feat：首页统计图

龚焕茏

2024-08-02 81380b5b765cdbfcbf7153378b79a41aab78b735

feat：首页统计图

 src/api/platform/home.js

New file
@@ -0,0 +1,27 @@
import request from '@/utils/request'

// 运维公司下拉
export function ywUnitList() {
  return request({
    url: '/home/ywUnitList',
    method: 'get'
  })
}

// 运维监控报表
export function monitor(data) {
  return request({
    url: '/home/monitor',
    method: 'get',
    params: data
  })
}

// 运维工单报表
export function workOrder(data) {
  return request({
    url: '/home/workOrder',
    method: 'get',
    params: data
  })
}

 src/views/home/data-chart/index.vue

@@ -5,14 +5,14 @@
        <div class="title-container">
          <h1>运维监控报表</h1>
          <div class="select-container">
            <el-select v-model="company" placeholder="请选择运维公司" @change="companyChange">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            <el-select v-model="params.unitId" placeholder="请选择运维公司" @change="showData">
              <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="date-container">
            <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期">
            <el-date-picker type="monthrange" v-model="params.dateRange" range-separator="至" start-placeholder="开始月份"
              end-placeholder="结束月份" @change="showData">
            </el-date-picker>
          </div>
        </div>
@@ -26,47 +26,19 @@

<script>
import * as echarts from 'echarts';
import { ywUnitList, monitor } from "@/api/platform/home";
let lineChart = null;
let observer = null;
export default {
  name: 'DataChart',
  data() {
    return {
      dateRange: '',
      company: '',
      options: [
        { label: 'XX运维公司1', value: 'XX运维公司1' },
        { label: 'XX运维公司2', value: 'XX运维公司2' },
        { label: 'XX运维公司3', value: 'XX运维公司3' },
        { label: 'XX运维公司4', value: 'XX运维公司4' },
      ],
      dataList: [
        {
          name: 'XX运维公司1',
          state: { '1月': 1000, '2月': 2131, '3月': 1233, '4月': 2132, '5月': 3211 },
          state2: { '1月': 123, '2月': 213, '3月': 1412, '4月': 23, '5月': 123 }
        },
        {
          name: 'XX运维公司2',
          state: { '1月': 213, '2月': 2131, '3月': 1233, '4月': 2132, '5月': 3211 },
          state2: { '1月': 123, '2月': 123, '3月': 1412, '4月': 23, '5月': 123 }
        },
        {
          name: 'XX运维公司3',
          state: { '1月': 1000, '2月': 2131, '3月': 1233, '4月': 2132, '5月': 3211, '6月': 1321 },
          state2: { '1月': 123, '2月': 213, '3月': 123, '4月': 23, '5月': 123 }
        },
        {
          name: 'XX运维公司4',
          state: { '1月': 1000, '2月': 2131, '3月': 1233, '4月': 2132, '5月': 3211 },
          state2: { '1月': 123, '2月': 613, '3月': 1412, '4月': 2336, '5月': 123 }
        },
        {
          name: 'XX运维公司5',
          state: { '1月': 1000, '2月': 433, '3月': 1233, '4月': 2132, '5月': 8886 },
          state2: { '1月': 123, '2月': 213, '3月': 1412, '4月': 23, '5月': 123 }
        },
      ],
      params: {
        dateRange: '',
        unitId: ''
      },
      options: [],
      dataList: [],
    }
  },
  methods: {
@@ -128,13 +100,20 @@
    },


    companyChange() {
      this.acitveData = this.dataList.find((item) => {
        return item.name === this.company;
      });
      if (this.acitveData) {
    showData() {
      monitor(this.params).then(res => {
        this.acitveData = res.data;
        if (Object.keys(this.acitveData).length === 0) {
          this.acitveData = {
              "name": "",
              "state": {},
              "state2": {}
          }
        }
        lineChart = echarts.init(this.$refs.chartContent);
        this.initChart();
      }
        this.observe();
      })
    },

    // 监听变化
@@ -155,11 +134,18 @@

  },
  mounted() {
    this.acitveData = this.dataList[0];
    this.company = this.acitveData.name;
    lineChart = echarts.init(this.$refs.chartContent);
    this.initChart();
    this.observe();
    ywUnitList().then(res => {
      this.options = res.data.data.map(item => {
        return {
          label: item.value,
          value: item.id
        }
      })
      if (this.params.unitId === '') {
        this.params.unitId = this.options[0].value;
      }
      this.showData();
    })
  },
  beforeDestroy() {
    if (lineChart) {

 src/views/home/work-order/index.vue

@@ -5,13 +5,13 @@
        <div class="title-container">
          <h1>运维工单报表</h1>
          <div class="select-container">
            <el-select v-model="company" placeholder="请选择运维公司" @change="companyChange">
            <el-select v-model="params.unitId" placeholder="请选择运维公司" @change="showData">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="date-container">
            <el-select v-model="dateRange" placeholder="请选择时间范围">
            <el-select v-model="params.dateType" placeholder="请选择时间范围" @change="showData">
              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
@@ -27,64 +27,24 @@

<script>
import * as echarts from 'echarts';
import { ywUnitList, workOrder } from "@/api/platform/home";
let lineChart = null;
let observer = null;
export default {
  name: 'DataChart',
  data() {
    return {
      dateRange: '',
      company: '',
      options: [
        { label: '全部', value: '全部' },
        { label: 'XX运维公司1', value: 'XX运维公司1' },
        { label: 'XX运维公司2', value: 'XX运维公司2' },
        { label: 'XX运维公司3', value: 'XX运维公司3' },
        { label: 'XX运维公司4', value: 'XX运维公司4' },
      ],
      params: {
        dateType: '',
        unitId: ''
      },
      options: [],
      options2: [
        { label: '日工单数', value: '日工单数' },
        { label: '周工单数', value: '周工单数' },
        { label: '月工单数', value: '月工单数' },
        { label: '日工单数', value: 'day' },
        { label: '周工单数', value: 'week' },
        { label: '月工单数', value: 'month' },
      ],
      dataList: [
        {
          name: '全部',
          complete: { '1月': 10310, '2月': 23200, '3月': 16430, '4月': 24000, '5月': 31700 },
          waiting: { '1月': 1500, '2月': 2310, '3月': 14530, '4月': 231, '5月': 1235 },
          pending: { '1月': 2530, '2月': 2450, '3月': 4000, '4月': 4300, '5月': 3210 }
        },
        {
          name: 'XX运维公司1',
          complete: { '1月': 1000, '2月': 2131, '3月': 1233, '4月': 2132, '5月': 3211 },
          waiting: { '1月': 123, '2月': 213, '3月': 1412, '4月': 23, '5月': 123 },
          pending: { '1月': 200, '2月': 235, '3月': 300, '4月': 400, '5月': 500 }
        },
        {
          name: 'XX运维公司2',
          complete: { '1月': 213, '2月': 2131, '3月': 1233, '4月': 2132, '5月': 3211 },
          waiting: { '1月': 123, '2月': 123, '3月': 1412, '4月': 23, '5月': 123 },
          pending: { '1月': 135, '2月': 422, '3月': 425, '4月': 323, '5月': 400 }
        },
        {
          name: 'XX运维公司3',
          complete: { '1月': 1000, '2月': 2131, '3月': 1233, '4月': 2132, '5月': 3211 },
          waiting: { '1月': 123, '2月': 213, '3月': 123, '4月': 23, '5月': 123 },
          pending: { '1月': 534, '2月': 435, '3月': 422, '4月': 121, '5月': 313 }
        },
        {
          name: 'XX运维公司4',
          complete: { '1月': 1000, '2月': 2131, '3月': 1233, '4月': 2132, '5月': 3211 },
          waiting: { '1月': 123, '2月': 613, '3月': 1412, '4月': 2336, '5月': 123 },
          pending: { '1月': 123, '2月': 321, '3月': 131, '4月': 321, '5月': 421 }
        },
        {
          name: 'XX运维公司5',
          complete: { '1月': 1000, '2月': 433, '3月': 1233, '4月': 2132, '5月': 8886 },
          waiting: { '1月': 123, '2月': 213, '3月': 1412, '4月': 23, '5月': 123 },
          pending: { '1月': 333, '2月': 245, '3月': 233, '4月': 222, '5月': 111 }
        },
      ],
      dataList: [],
    }
  },
  methods: {
@@ -160,13 +120,21 @@
    },


    companyChange() {
      this.acitveData = this.dataList.find((item) => {
        return item.name === this.company;
      });
      if (this.acitveData) {
    showData() {
      workOrder(this.params).then(res => {
        this.acitveData = res.data;
        if (Object.keys(this.acitveData).length === 0) {
          this.acitveData = {
            name: '',
            complete: {},
            waiting: {},
            pending: {}
          }
        }
        lineChart = echarts.init(this.$refs.chartContent);
        this.initChart();
      }
        this.observe();
      })
    },

    // 监听变化
@@ -187,11 +155,19 @@

  },
  mounted() {
    this.acitveData = this.dataList[0];
    this.company = this.acitveData.name;
    lineChart = echarts.init(this.$refs.chartContent);
    this.initChart();
    this.observe();
    ywUnitList().then(res => {
      this.options = res.data.data.map(item => {
        return {
          label: item.value,
          value: item.id
        }
      })
      if (this.params.unitId === '') {
        this.params.unitId = this.options[0].value;
      }
      this.params.dateType = this.options2[0].value;
      this.showData();
    })
  },
  beforeDestroy() {
    if (lineChart) {

 src/views/system/check/result/index.vue

@@ -4,8 +4,8 @@
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
        style="margin-bottom: 10px">
        <el-menu-item index="0">省厅月度</el-menu-item>
        <el-menu-item index="1">市局月度</el-menu-item>
        <el-menu-item index="2">省厅季度</el-menu-item>
        <el-menu-item index="1">市局月度</el-menu-item>
        <el-menu-item index="3">市局季度</el-menu-item>
      </el-menu>
    </div>