提交代码

src/App.vue

@@ -0,0 +1,7 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<style></style>

src/api/center/DataSize.js

@@ -0,0 +1,9 @@
+import request from "@/utils/request";
+
+//数据规模
+export function getDataSize() {
+    return request({
+        url: "/center/getDataSize",
+        method: "get",
+    });
+}

src/api/center/DropEvent.js

@@ -0,0 +1,189 @@
+// import request from "@/utils/request";
+
+// //大屏暂降事件
+// export function getAreaDownStatisticsData(data) {
+//     return request({
+//         url: "/event-boot/largeScreen/getAreaDownStatistics",
+//         method: "post",
+//         data,
+//     });
+// }
+import request from "@/utils/request";
+
+//大屏暂降事件(片区)
+export function getAreaDownStatisticsData(data) {
+  return request({
+    url: "/event-boot/largeScreen/getAreaDownStatistics",
+    method: "post",
+    data: data,
+  });
+}
+//大屏暂降事件(负荷类型)
+export function getLoadType(data) {
+  return request({
+    url: "/event-boot/largeScreen/getLoadType",
+    method: "post",
+    data: data,
+  });
+}
+//大屏暂降事件(暂降事件时间统计)
+export function getTimeCount(data) {
+  return request({
+    url: "/event-boot/largeScreen/getTimeCount",
+    method: "post",
+    data: data,
+  });
+}
+//大屏获取暂降事件最新50条数据
+export function eventLists(data) {
+  return request({
+    url: "/event-boot/largeScreen/eventLists",
+    method: "post",
+    data: data,
+  });
+}
+//大屏监测点规模(片区)
+export function getMonitoringPointScale(data) {
+  return request({
+    url: "/device-boot/largeScreen/getMonitoringPointScale",
+    method: "post",
+    data: data,
+  });
+}
+//大屏监测点规模(负荷类型)
+export function getLoadTypeData(data) {
+  return request({
+    url: "/device-boot/largeScreen/getLoadType",
+    method: "post",
+    data: data,
+  });
+}
+//大屏中间暂态
+export function getMiddleDown(data) {
+  return request({
+    url: "/event-boot/largeScreen/getMiddleDown",
+    method: "post",
+    data: data,
+  });
+}
+//大屏中间稳态越线信息
+export function getMiddleLimitRate(data) {
+  return request({
+    url: "/event-boot/largeScreen/getMiddleLimitRate",
+    method: "post",
+    data: data,
+  });
+}
+//大屏中间终端异常信息
+export function getMiddleTerminal(data) {
+  return request({
+    url: "/event-boot/largeScreen/getMiddleTerminal",
+    method: "post",
+    data: data,
+  });
+}
+//大屏中间所有数据
+export function getAllData(data) {
+  return request({
+    url: "/event-boot/largeScreen/getAllData",
+    method: "post",
+    data: data,
+  });
+}
+//稳态越线占比超标占比(负荷类型)
+export function getHomeostasisLoad(data) {
+  return request({
+    url: "/harmonic-boot/largeScreen/getHomeostasisLoad",
+    method: "post",
+    data: data,
+  });
+}
+//稳态越线占比超标占比(负荷类型)
+export function getHomeostasisArea(data) {
+  return request({
+    url: "/harmonic-boot/largeScreen/getHomeostasisArea",
+    method: "post",
+    data: data,
+  });
+}
+//灿能云用户规模
+export function getUserScale(data) {
+  return request({
+    url: "/user-boot/largeScreen/getUserScale",
+    method: "post",
+    data: data,
+  });
+}
+//数据规模
+export function getDataScale(data) {
+  return request({
+    url: "/system-boot/largeScreen/getDataScale",
+    method: "post",
+    data: data,
+  });
+}
+//功率负荷排名
+export function getPowerOrder(data) {
+  return request({
+    url: "/harmonic-boot/largeScreen/getPowerOrder",
+    method: "post",
+    data: data,
+  });
+}
+//视屏 图片 查询数据
+export function queryData(params) {
+  return request({
+    url: "/device-boot/resource/queryData",
+    method: "post",
+    params,
+  });
+}
+//播放视频资源
+export function play(params) {
+  return request({
+    url: "/device-boot/resource/play1",
+    method: "get",
+    params,
+    responseType: 'blob'
+  });
+}
+//上传资源
+export function uploadFile(data) {
+  return request({
+    url: "/device-boot/resource/uploadFile",
+    method: "post",
+    data,
+  });
+}
+//修改资源
+export function updateFile(data) {
+  return request({
+    url: "/device-boot/resource/updateFile",
+    method: "post",
+    data,
+  });
+}
+//删除资源
+export function deleteFile(params) {
+  return request({
+    url: "/device-boot/resource/deleteFile",
+    method: "get",
+    params,
+  });
+}
+//运行时间
+export function getRunTime(data) {
+  return request({
+    url: "/device-boot/largeScreen/getRunTime",
+    method: "post",
+    data,
+  });
+}
+//重要用户
+export function getImMonitorEvents(data) {
+  return request({
+    url: "/event-boot/rmpEventDetail/getImMonitorEvents",
+    method: "post",
+    data,
+  });
+}

src/api/center/SteadyState.js

@@ -0,0 +1,15 @@
+import request from "@/utils/request";
+
+//灿能用户规模
+export function Steadystateindicatorregion() {
+    return request({
+        url: "/Steadystateindicatorregion",
+        method: "post",
+    });
+}
+export function Steadystateindicatorloadtype() {
+    return request({
+        url: "/Steadystateindicatorloadtype",
+        method: "post",
+    });
+}

src/api/center/UserScale.js

@@ -0,0 +1,9 @@
+import request from "@/utils/request";
+
+//灿能用户规模
+export function getUserScale() {
+    return request({
+        url: "/center/getUserScale",
+        method: "get",
+    });
+}

src/api/homePage/index.js

@@ -0,0 +1,81 @@
+import request from "@/utils/request";
+//暂降原因
+export function getStatisticData(data) {
+    return request({
+        url: '/event-boot/areaAnalysis/getEventReason',
+        method: 'post',
+        data
+    })
+}
+//监测点规模状态
+export function getDeptLineCount(data) {
+    return request({
+        url: "/device-boot/line/getDeptLineCount",
+        method: "POST",
+        data,
+    });
+}
+//数据完整性统计
+export function getLineIntegrityData(data) {
+    return request({
+        url: "/harmonic-boot/integrity/getIntegrityIcon",
+        method: "POST",
+        data,
+    });
+}
+//终端状态统计
+export function getTerminalDataCensus(data) {
+    return request({
+        url: "/harmonic-boot/terminal/getTerminalDataCensus",
+        method: "POST",
+        data,
+    });
+}
+//谐波越限事件统计图
+export function getHarmonicProportion(data) {
+    return request({
+        url: "/harmonic-boot/harmonic/getHarmonicProportion",
+        method: "POST",
+        data,
+    });
+}
+//谐波畸变率排名前十监测点
+export function getTHDTopTenData(data) {
+    return request({
+        url: "/harmonic-boot/tHDistortion/getTHDTopTenData?topNum=10",
+        method: "POST",
+        data,
+    });
+}
+//电能质量污区图
+export function getPollutionSubstationData(data) {
+    return request({
+        url: "/harmonic-boot/PollutionSubstation/getPollutionSubstationData",
+        method: "POST",
+        data,
+    });
+}
+//实时告警信息
+export function getExceptionDeviceInfoAsDept(data) {
+    return request({
+        url: "/device-boot/deviceInfo/getExceptionDeviceInfoAsDept",
+        method: "POST",
+        data,
+    });
+}
+//按部门获取终端设备总数，在线数，在线率
+export function getDeptDeviceDetail(data) {
+    return request({
+        url: "/device-boot/deviceInfo/getDeptDeviceDetail",
+        method: "POST",
+        data,
+    });
+}
+//按部门获变电站数，变电站在线数，在线率
+export function getDeptSubstationDetail(data) {
+    return request({
+        url: "/device-boot/deviceInfo/getDeptSubstationDetail",
+        method: "POST",
+        data,
+    });
+}

src/api/monitoringpointStatistics/echart.js

@@ -0,0 +1,171 @@
+//台账统计
+import request from "@/utils/request";
+
+//获取地图点位数据
+export function getAreaLineInfo(data) {
+    return request({
+        url: "/event-boot/areaInfo/getAreaLineInfo",
+        method: "post",
+        data
+    });
+}
+//ITIC SEMI 获取数据
+export function getPlot(data) {
+    return request({
+        url: "/event-boot/monitor/getPlot",
+        method: "post",
+        data
+    });
+}
+//ITIC SEMI 获取数据
+export function getVoltageToleranceCurve(data) {
+    return request({
+        url: "/event-boot/areaAnalysis/getVoltageToleranceCurve",
+        method: "post",
+        data
+    });
+}
+//电压暂降表及密度 DISDIP 获取数据
+export function IEC411(data) {
+    return request({
+        url: "/event-boot/monitor/IEC411",
+        method: "post",
+        data
+    });
+}
+//电压暂降表及密度 IEC61000 获取数据
+export function IEC28(data) {
+    return request({
+        url: "/event-boot/monitor/IEC28",
+        method: "post",
+        data
+    });
+}
+//电压暂降表及密度 IEC61000 获取数据
+export function eventDisdip(data) {
+    return request({
+        url: "/event-boot/monitor/eventDisdip",
+        method: "post",
+        data
+    });
+}
+//电压暂降表及密度 暂降密度图 获取数据
+export function getCoords(data) {
+    return request({
+        url: "/event-boot/monitor/getCoords",
+        method: "post",
+        data
+    });
+}
+// 暂降分布统计 左 获取数据
+export function getReasonTypeTime(data) {
+    return request({
+        url: "/event-boot/monitor/getReasonTypeTime",
+        method: "post",
+        data
+    });
+}
+// 暂降分布统计 右 获取数据
+export function getStatistic(data) {
+    return request({
+        url: "/event-boot/monitor/getStatistic",
+        method: "post",
+        data
+    });
+}
+export function getEventReason(data) {
+    return request({
+        url: "/event-boot/areaAnalysis/getEventReason",
+        method: "post",
+        data
+    });
+}
+// 暂降分布统计 右 获取数据
+export function getProbabilityDistribution(data) {
+    return request({
+        url: "/event-boot/monitor/getProbabilityDistribution",
+        method: "post",
+        data
+    });
+}
+// 事件分析  获取数据
+export function getMonitorEventAnalyseQuery(data) {
+    return request({
+        url: "/event-boot/monitor/getMonitorEventAnalyseQuery",
+        method: "post",
+        data
+    });
+}
+// 事件分析  下载
+export function downloadMonitorEventWaveFile(data) {
+    return request({
+        url: "/event-boot/monitor/downloadMonitorEventWaveFile",
+        method: "post",
+        data:data.lineId,
+        responseType: 'blob'
+    });
+}
+//   downloadWaveFile(data) {
+//         return request({
+//           url: '/event-boot/transient/downloadWaveFile',
+//           method: 'post',
+//           data:data,
+//           responseType:'blob'
+//         })
+//       }
+// 事件分析  shushiboxi 获取数据
+export function getMonitorEventAnalyseWave(data) {
+    return request({
+        url: "/event-boot/transient/getTransientAnalyseWave",
+        method: "post",
+        data
+    });
+}
+// 事件分析  获取数据
+export function getRunOnlineRateData(data) {
+    return request({
+        url: "/device-boot/communicate/getRunOnlineRateData",
+        method: "post",
+        data
+    });
+}
+// 事件分析  运行状态 获取数据
+export function getComFlagInfoData(data) {
+    return request({
+        url: "/device-boot/communicate/getComFlagInfoData",
+        method: "post",
+        data
+    });
+}
+// 获取片区未处理暂态事件
+export function getNoDealEvents(data) {
+    return request({
+        url: "/event-boot/areaInfo/getNoDealEvents",
+        method: "post",
+        data
+    });
+}
+// 获取片区中断设备
+export function getAreaOffDev(data) {
+    return request({
+        url: "/device-boot/device/getAreaOffDev",
+        method: "post",
+        data
+    });
+}
+// 获取监测点下未处理的暂降事件
+export function getNoDealEventsByLineId(params) {
+    return request({
+        url: "/event-boot/areaInfo/getNoDealEventsByLineId",
+        method: "get",
+        params
+    });
+}
+// 获取监测点下未处理的暂降事件
+export function getTransientDetailById(data) {
+    return request({
+        url: "/event-boot/rmpEventDetail/getTransientDetailById",
+        method: "post",
+        params:data
+    });
+}

src/assets/common.css

@@ -0,0 +1,11 @@
+* {
+  box-sizing: border-box;
+}
+html,
+body {
+  width: 100%;
+  height: 100%;
+  padding: 0px;
+  margin: 0px;
+}
+

src/assets/common.less

@@ -0,0 +1,15 @@
+
+*{
+  box-sizing: border-box;
+}
+html,
+body {
+    width: 100%;
+    height: 100%;
+    padding: 0px;
+    margin: 0px;
+  
+}
+.el-dialog__body{
+  padding: 10px;
+}

src/main.js

@@ -0,0 +1,17 @@
+import Vue from "vue";
+import App from "./App.vue";
+
+import "./assets/common.less";
+import "echarts-gl";
+import dataV from "@jiaminghi/data-view";
+import axios from "axios";
+import router from "./router";
+Vue.config.productionTip = false;
+
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+Vue.prototype.$axios = axios;
+Vue.use(ElementUI);
+Vue.use(dataV);
+
+new Vue({ router, render: (h) => h(App) }).$mount("#app");

src/router/index.js

@@ -0,0 +1,20 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+
+Vue.use(VueRouter);
+
+const routes = [
+  { path: "/", redirect: "/homePage" },
+  {
+    path: "/homePage",
+    name: "homePage",
+    component: () => import("@/views/center/index.vue"),
+  },
+];
+
+const router = new VueRouter({
+  mode: "history",
+  routes,
+});
+
+export default router;

src/utils/dicData.js

@@ -0,0 +1,48 @@
+//dictypeData = eval("(" + dictypeData + ")");
+//console.log(dictypeData)
+
+function dicData(code, arr, type) {
+    var dicArr = [];
+    if (type) {
+        dicArr.push({ name: "全部", id: "" });
+    }
+    let dictypeData = JSON.parse(window.localStorage.getItem("dictData")).state.basic;
+    for (var i = 0; i < dictypeData.length; i++) {
+        if (dictypeData[i].code == code) {
+            var data = dictypeData[i].children;
+            if (arr.length == 0) {
+                for (var j = 0; j < data.length; j++) {
+                    let p = {
+                        name: data[j].name,
+                        id: data[j].id,
+                        code: data[j].code,
+                        label: data[j].name,
+                        gvalue: data[j].value,
+                        value: data[j].id,
+                        sort: data[j].sort,
+                    };
+                    dicArr.push(p);
+                }
+            } else if (arr.length > 0) {
+                for (var j = 0; j < data.length; j++) {
+                    if (arr.indexOf(data[j].code) == -1) {
+                        let p = {
+                            name: data[j].name,
+                            id: data[j].id,
+                            code: data[j].code,
+                            value: data[j].id,
+                            gvalue: data[j].value,
+                            label: data[j].name,
+                            sort: data[j].sort,
+                        };
+                        dicArr.push(p);
+                    }
+                }
+            }
+        }
+    }
+    return dicArr.sort((a, b) => {
+        return a.sort - b.sort;
+    });
+}
+export { dicData };

src/utils/request.js

@@ -0,0 +1,28 @@
+import axios from "axios";
+//拦截器
+
+const service = axios.create({
+  baseURL: "/api",
+  timeout: 150000,
+});
+axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
+
+service.interceptors.request.use(
+  (config) => {
+    // debugger
+
+        config.headers['Authorization'] = 'Bearer '  + JSON.parse(window.localStorage.getItem('adminInfo')).access_token; // 请求头带上token token要在登录的时候保存在localStorage中
+    // config.headers["Authorization"] =
+    //   "bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySW5kZXgiOiIyMTg3MTY2YjU1MDU0YjNjOGQyOTBkYTMzNGMxMGJmYiIsInVzZXJfbmFtZSI6ImdoYWluYW4iLCJzY29wZSI6WyJhbGwiXSwibmlja25hbWUiOiLnrqHkv4oiLCJ1c2VyVHlwZSI6MSwiZGVwdEluZGV4IjoiMDJkMWI0ZTE2ODA0MTNlYjcyZjNmYTYzZDQ2YzQ5NmMiLCJleHAiOjE3OTkwMjAwNjksImF1dGhvcml0aWVzIjpbImhuYWRtaW4iXSwianRpIjoiNjcwNTEyMmMtMDUyOS00MzUyLThhZWUtZDM1ODFiZmUyMTRiIiwiY2xpZW50X2lkIjoibmpjbnRlc3QiLCJoZWFkU2N1bHB0dXJlIjpudWxsfQ.Gce6c0_73yyGrK9sIDDuNfw-ZXv3pQ8WwsGg8J_EtaPgS3cp8Lbvr1SWt_e8NsVjG24DG6cCPzZC9zPq7sQFWSsAOaf_K2cCZZ9FaZVOGq2ZPjtyOW2jKsFdNrpO0KXi2xVVnUkz7aFB_14lP6okb5nqJSQVtz3bWHKsLtsdczdGeEdhOJh6I2TeTLxn7KSELBu0U-U1qpKc-2LcBK6l-QSMUt7ZGB1Kfms_I9fd6iYrTQyPIGfdHHgvnqqRnplFNAjJlv5CDjWyPFazbJM_wXfAcdoD_qFgzIm3i02vhhpXee9MOUWcVL7pGeXiDDXg4qwhOJe2NsoXWiQOax3ltQ";
+    // NProgress.done()
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+service.interceptors.response.use(({ config, data }) => {
+  const { code, message } = data;
+  return data;
+});
+export default service;

src/views/Timeinterval/index.vue

@@ -0,0 +1,822 @@
+<template>
+  <div>
+    <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
+      <el-form-item label="时间间隔:">
+        <el-select
+          style="width: 90px"
+          v-model="intervald"
+          @change="interchange"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in timeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-date-picker
+          style="width: 250px"
+          :disabled="disabled"
+          :readonly="pickDisabled"
+          :clearable="false"
+          v-model="timeValue"
+          :picker-options="pickerOptions"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          align="right"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          :disabled="backDisabled"
+          type="primary"
+          icon="el-icon-d-arrow-left"
+          @click="preClick"
+        ></el-button>
+        <el-button @click="nowTime" class="el-icon-video-pause" type="primary"
+          >当前</el-button
+        >
+        <el-button
+          :disabled="preDisabled"
+          type="primary"
+          icon="el-icon-d-arrow-right"
+          @click="back"
+        ></el-button>
+      </el-form-item>
+      <!-- <el-form-item>
+          <el-button v-show="false" type="primary">导出文件</el-button>
+        </el-form-item> -->
+    </el-form>
+    <!-- <span style="font-size: 14px; font-weight: 550">
+        <span class="spanColor">间隔:</span>
+      </span>
+      
+     
+  
+      <div style="display: inline" v-if="buttonShow">
+       
+      </div> -->
+    <!-- <el-button
+        v-show="buttonShow && thb"
+        @click="tongbiyear"
+        style="margin-left: 5px"
+        type="primary"
+        >同比</el-button
+      >
+      <el-button
+        v-show="buttonShow && thb"
+        @click="huangbiyear"
+        style="margin-left: 5px"
+        type="primary"
+        >环比</el-button
+      > -->
+
+    <!-- <el-button
+        @click="querfromdata"
+        type="primary"
+        icon="el-icon-search"
+        style="margin-left: 10px"
+        >查询</el-button
+      > -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: "index4",
+  props: {
+    name: {
+      type: String,
+      default: undefined,
+    },
+    path: {
+      type: String,
+      default: undefined,
+    },
+    tablename: {
+      type: String,
+      default: undefined,
+    },
+    interval: {
+      type: Number,
+      default: undefined,
+    },
+    type: {
+      type: Number,
+      default: undefined,
+    },
+    falg: {
+      type: Boolean,
+      default: false,
+    },
+    query: {
+      type: Boolean,
+      default: false,
+    },
+    thb: {
+      type: Boolean,
+      default: false,
+    },
+    timeOptions: {
+      type: Array,
+      default() {
+        return [
+          { label: "年份", value: 1 },
+          { label: "季度", value: 2 },
+          { label: "月份", value: 3 },
+          { label: "周", value: 4 },
+          // { label: "自定义", value: 5 },
+        ];
+      },
+    },
+  },
+  watch: {
+    intervald(val) {
+      if (val != 5) {
+        let endTime = this.getEndTime();
+        let startTime = this.getStartTime(this.intervald, endTime);
+        this.timeValue = [startTime, endTime];
+        this.pickDisabled = false;
+        this.buttonShow = true;
+      } else {
+        let endTime = this.getEndTime();
+        let startTime = this.getStartTime(this.intervald, endTime);
+        this.timeValue = [startTime, endTime];
+        this.buttonShow = false;
+        this.pickDisabled = false;
+      }
+    },
+  },
+  data() {
+    return {
+      ruleForm: {},
+      disabled: true,
+      buttonShow: true, //向前向后按钮显示隐藏控制按钮
+      pickDisabled: false, //时间组件只读控制se,
+      falg1: true,
+      // timeOptions: [
+      //   { label: "年份", value: 1 },
+      //   { label: "季度", value: 2 },
+      //   { label: "月份", value: 3 },
+      //   { label: "周", value: 4 },
+      //  // { label: "自定义", value: 5 },
+      // ],
+
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      intervald: this.interval,
+      tablenamed: this.tablename,
+      timeValue: [],
+      timehbValue: [],
+      backDisabled: false,
+      preDisabled: true,
+      huanbibiFalg: false,
+      tonbiFalg: false,
+      timeFlag: 0,
+    };
+  },
+  created() {},
+  mounted() {
+    let endTime = this.getEndTime();
+    let startTime = this.getStartTime(this.intervald, endTime);
+    // console.log(endTime,startTime,'endtime','startTime')
+    this.timeValue = [startTime, endTime];
+    this.$emit("time", [startTime, endTime, this.intervald]);
+    if (this.type == 2) {
+      this.huangbiyear();
+    } else if (!this.type) {
+      this.querfromdata();
+    }
+  },
+  methods: {
+    interchange(val) {
+      let endTime = this.getEndTime();
+      let startTime = this.getStartTime(this.intervald, endTime);
+      //  console.log(endTime,startTime,'endtime','startTime')
+      this.$emit("time", [startTime, endTime, val]);
+      if (val == 1 || val == 2) {
+        this.timeFlag = 0;
+      } else {
+        this.timeFlag = 1;
+      }
+      //  console.log(this.timeFlag);
+      this.intervald = val;
+      if (val == 5) {
+        this.tablenamed == "tab1";
+        this.disabled = false;
+      } else {
+        this.tablenamed == "tab2";
+        this.disabled = true;
+      }
+    },
+    // 获取当前日期，精确到日
+    getEndTime() {
+      var now = new Date();
+      var sep = "-";
+      var year = now.getFullYear();
+      var month = now.getMonth() + 1;
+      if (month < 10) {
+        month = "0" + month;
+      }
+      var date = now.getDate();
+      if (date < 10) {
+        date = "0" + date;
+      }
+
+      // 拼接当前的日期
+      var endTime = year + sep + month + sep + date;
+      return endTime;
+    },
+    // 获取起始日期
+    getStartTime(interval, endTime) {
+      var sep = "-";
+      var arr = endTime.split("-");
+      var year = arr[0];
+      var month = arr[1];
+      var date = arr[2];
+      // 按月份间隔
+      if (interval == 3) {
+        date = "01";
+        // 按季度间隔
+      } else if (interval == 2) {
+        if ((month > 0) & (month < 4)) {
+          // 第一季度
+          month = "01";
+          date = "01";
+        } else if (month > 3 && month < 7) {
+          // 第二季度
+          month = "04";
+          date = "01";
+        } else if (month > 6 && month < 10) {
+          // 第三季度
+          month = "07";
+          date = "01";
+        } else {
+          // 第四季度
+          month = "10";
+          date = "01";
+        }
+      } else if (interval == 1) {
+        month = "01";
+        date = "01";
+      } else if (interval == "半年") {
+        if (month < 7) {
+          month = "01";
+          date = "01";
+        } else {
+          month = "07";
+          date = "01";
+        }
+      } else if (interval == 4) {
+        //周
+        var start = new Date(year, month - 1, date);
+        var dayOfWeek = start.getDay() == 0 ? 7 : start.getDay(); // 如果为周日，则置为7天
+        start.setDate(start.getDate() - dayOfWeek + 1); // 计算开始时间
+
+        if (this.formatTime(new Date()) != endTime) {
+          // 如果结束时间不是当前时间
+          var end = new Date(start);
+          end.setDate(end.getDate() + 6);
+          //  $("#endTime").val(this.formatTime(end));
+        }
+
+        return this.formatTime(start);
+      }
+
+      var startTime = year + sep + month + sep + date;
+      return startTime;
+    },
+    // 时间格式化
+    formatTime(time) {
+      return (
+        time.getFullYear() +
+        "-" +
+        (time.getMonth() + 1 < 10 ? "0" : "") +
+        (time.getMonth() + 1) +
+        "-" +
+        (time.getDate() < 10 ? "0" : "") +
+        time.getDate()
+      );
+    },
+    //向前
+    preClick() {
+      let interval = this.intervald;
+      let startTime = this.timeValue[0];
+      let endTime = this.timeValue[1];
+      let year = parseInt(startTime.substring(0, 4));
+      let month = parseInt(startTime.substring(5, 7));
+      let date = parseInt(startTime.substring(8, 10));
+      //按月
+      if (interval == 3) {
+        // 换年份
+        if (month == 1) {
+          year = year - 1;
+          startTime = year + "-12-01";
+          endTime = year + "-12-31";
+        } else if (month <= 10) {
+          month = month - 1;
+          startTime = year + "-0" + month + "-01";
+          let day = this.getDays(year, month);
+          endTime = year + "-0" + month + "-" + day;
+        } else {
+          month = month - 1;
+          startTime = year + "-" + month + "-01";
+          let day = this.getDays(year, month);
+          endTime = year + "-" + month + "-" + day;
+        }
+        //按周
+      } else if (interval == 4) {
+        //根据开始时间推
+        let start = new Date(year, month - 1, date);
+        start.setDate(start.getDate() - 7);
+        startTime = this.formatTime(start);
+        var end = new Date(start);
+        end.setDate(start.getDate() + 6);
+        endTime = this.formatTime(end);
+        //按季度
+      } else if (interval == 2) {
+        // 换年份
+        if (month == 1) {
+          year = year - 1;
+          startTime = year + "-10-01";
+          endTime = year + "-12-31";
+        } else {
+          // 还是本年
+          month = month - 3;
+          startTime = year + "-0" + month + "-01";
+          month = month + 2;
+          var day = this.getDays(year, month);
+          endTime = year + "-0" + month + "-" + day;
+        }
+        //自定义
+      } else if (interval == 5) {
+        //按年
+      } else if (interval == 1) {
+        year = year - 1;
+        startTime = year + "-01-01";
+        endTime = year + "-12-31";
+      } else if (interval == 6) {
+        if (month <= 6) {
+          year = year - 1;
+          startTime = year + "-07-01";
+          endTime = year + "-12-31";
+        } else {
+          startTime = year + "-01-01";
+          endTime = year + "-06-30";
+        }
+      }
+      this.timeValue = [startTime, endTime];
+
+      // 判断向后键的状态
+      var temp = this.getEndTime();
+      this.timeStatus(temp, endTime);
+    },
+    //向后
+    back() {
+      let interval = this.intervald;
+      let startTime = this.timeValue[0];
+      let endTime = this.timeValue[1];
+      let year = parseInt(startTime.substring(0, 4));
+      let month = parseInt(startTime.substring(5, 7));
+      let date = parseInt(startTime.substring(8, 10));
+      var now = new Date();
+      // 获取当前年份
+      var presentY = now.getFullYear();
+      // 获取当前月份
+      var presentM = now.getMonth() + 1;
+      // 获取当前日期
+      var presentD = now.getDate();
+      if (interval == 3) {
+        if (month == 12) {
+          year = year + 1;
+          // 年份进位后，大于当前的年份，是不科学的
+          if (presentY < year) {
+            startTime = presentY + "-12-01";
+            if (presentD < 10) {
+              endTime = presentY + "-12" + "-0" + presentD;
+            } else {
+              endTime = presentY + "-12" + "-" + presentD;
+            }
+            // 年份进位后，等于当前的年份
+          } else if (presentY == year) {
+            startTime = year + "-01-01";
+            if (presentM > 1) {
+              endTime = year + "-01-31";
+            } else {
+              if (presentD < 10) {
+                endTime = year + "-01" + "-0" + presentD;
+              } else {
+                endTime = year + "-01" + "-" + presentD;
+              }
+            }
+            // 年份进位后，依旧小于当前的年份
+          } else {
+            startTime = year + "-01-01";
+            endTime = year + "-01-31";
+          }
+        } else {
+          month = month + 1;
+          // 年份等于当前年份
+          if (presentY == year) {
+            // 月份超过当前月份，是不科学的
+            if (month >= presentM) {
+              if (presentM < 10) {
+                startTime = year + "-0" + presentM + "-01";
+                if (presentD < 10) {
+                  endTime = year + "-0" + presentM + "-0" + presentD;
+                } else {
+                  endTime = year + "-0" + presentM + "-" + presentD;
+                }
+              } else {
+                startTime = year + "-" + presentM + "-01";
+                if (presentD < 10) {
+                  endTime = year + "-" + presentM + "-0" + presentD;
+                } else {
+                  endTime = year + "-" + presentM + "-" + presentD;
+                }
+              }
+            } else {
+              if (month < 10) {
+                startTime = year + "-0" + month + "-01";
+                var day = this.getDays(year, month);
+                endTime = year + "-0" + month + "-" + day;
+              } else {
+                startTime = year + "-" + month + "-01";
+                var day = this.getDays(year, month);
+                endTime = year + "-" + month + "-" + day;
+              }
+            }
+            // 年份小于当前的年份
+          } else {
+            if (month < 10) {
+              startTime = year + "-0" + month + "-01";
+              var day = this.getDays(year, month);
+              endTime = year + "-0" + month + "-" + day;
+            } else {
+              startTime = year + "-" + month + "-01";
+              var day = this.getDays(year, month);
+              endTime = year + "-" + month + "-" + day;
+            }
+          }
+        }
+      } else if (interval == 2) {
+        // 前进需要年份进位
+        if (month == 10) {
+          year = year + 1;
+          // 年份进位后大于当前年份是不科学的
+          if (year > presentY) {
+            startTime = presentY + "-10-01";
+            if (presentD < 10) {
+              endTime = year + "-" + presentM + "-0" + presentD;
+            } else {
+              endTime = year + "-" + presentM + "-" + presentD;
+            }
+          } else if (year == presentY) {
+            startTime = year + "-01-01";
+            // 当前月份大约3月份
+            if (presentM > 3) {
+              endTime = year + "-03-31";
+            } else {
+              // 当前月份也在第一季度里
+              if (presentD < 10) {
+                endTime = year + "-0" + presentM + "-0" + presentD;
+              } else {
+                endTime = year + "-0" + presentM + "-" + presentD;
+              }
+            }
+          } else {
+            startTime = year + "-01-01";
+            endTime = year + "-03-31";
+          }
+        } else {
+          month = month + 3;
+          // 季度进位后，超过当前月份是不科学的
+          if (year == presentY) {
+            if (month >= presentM) {
+              // 当季度进位后大于当前月，以当前月的时间显示季度
+              if (presentM > 0 && presentM < 4) {
+                // 第一季度
+                startTime = year + "-01-01";
+                if (presentD < 10) {
+                  endTime = year + "-0" + presentM + "-0" + presentD;
+                } else {
+                  endTime = year + "-0" + presentM + "-" + presentD;
+                }
+              } else if (presentM > 3 && presentM < 7) {
+                // 第二季度
+                startTime = year + "-04-01";
+                if (presentD < 10) {
+                  endTime = year + "-0" + presentM + "-0" + presentD;
+                } else {
+                  endTime = year + "-0" + presentM + "-" + presentD;
+                }
+              } else if (presentM > 6 && presentM < 10) {
+                // 第三季度
+                startTime = year + "-07-01";
+                if (presentD < 10) {
+                  endTime = year + "-0" + presentM + "-0" + presentD;
+                } else {
+                  endTime = year + "-0" + presentM + "-" + presentD;
+                }
+              } else {
+                // 第四季度
+                startTime = year + "-10-01";
+                if (presentD < 10) {
+                  endTime = year + "-" + presentM + "-0" + presentD;
+                } else {
+                  endTime = year + "-" + presentM + "-" + presentD;
+                }
+              }
+            } else {
+              if (month == 10) {
+                startTime = year + "-" + month + "-01";
+              } else {
+                startTime = year + "-0" + month + "-01";
+              }
+              month = month + 2;
+              if (month >= presentM) {
+                endTime = this.getEndTime();
+              } else {
+                var day = this.getDays(year, month);
+                endTime = year + "-" + month + "-" + day;
+              }
+            }
+          } else {
+            if (month == 10) {
+              startTime = year + "-" + month + "-01";
+              month = month + 2;
+              var day = this.getDays(year, month);
+              endTime = year + "-" + month + "-" + day;
+            } else {
+              startTime = year + "-0" + month + "-01";
+              month = month + 2;
+              var day = this.getDays(year, month);
+              endTime = year + "-0" + month + "-" + day;
+            }
+          }
+        }
+      } else if (interval == 5) {
+      } else if (interval == 4) {
+        //根据开始时间推
+        var start = new Date(year, month - 1, date);
+        start.setDate(start.getDate() + 7);
+        startTime = this.formatTime(start);
+        var end = new Date(start);
+        end.setDate(start.getDate() + 6);
+        endTime = this.formatTime(end);
+
+        if (parseInt((end - new Date()) / 1000 / 60) > 24) {
+          //相差小时大于24小时，即超过当天，置为当天日期
+          endTime = this.formatTime(new Date());
+        }
+      } else {
+        year = year + 1;
+        // 年份进位后大于当前年份，是不科学的
+        if (year >= presentY) {
+          startTime = presentY + "-01-01";
+          if (presentM < 10) {
+            if (presentD < 10) {
+              endTime = presentY + "-0" + presentM + "-0" + presentD;
+            } else {
+              endTime = presentY + "-0" + presentM + "-" + presentD;
+            }
+          } else {
+            endTime = presentY + "-" + presentM + "-" + presentD;
+          }
+        } else {
+          startTime = year + "-01-01";
+          endTime = year + "-12-31";
+        }
+      }
+
+      this.timeValue = [startTime, endTime];
+
+      // 判断向后键的状态
+      var temp = this.getEndTime();
+      this.timeStatus(temp, endTime);
+    },
+    //当前按钮点击事件
+    nowTime() {
+      let interval = this.intervald;
+      let endTime = this.getEndTime();
+      let startTime = this.getStartTime(interval, endTime);
+      this.timeValue = [startTime, endTime];
+      // 判断向后键的状态
+      let temp = this.getEndTime();
+      this.timeStatus(temp, endTime);
+    },
+    //判断向后按钮
+    timeStatus(temp, endTime) {
+      // 判断next按钮的状态
+      if (temp == endTime) {
+        this.preDisabled = true;
+      } else {
+        this.preDisabled = false;
+      }
+    },
+    // 获取月份的天数
+    getDays(year, month) {
+      let max = new Date(year, month, 0).getDate();
+      return max;
+    },
+    querfromdata() {
+      //type用于区分是按钮触发还是钩子函数触发 1按钮触发 underfind 钩子触发
+      if (!this.type) {
+        var data = this.timeValue;
+        var timehbValue = "";
+        this.$emit("querfromdata", data, timehbValue, this.intervald);
+      } else if (this.type == 2) {
+        this.huangbiyear();
+      }
+    },
+    goto() {
+      this.$router.push({
+        path: "/harmonic-boot/algorithm",
+        query: { name: this.name, path: this.path },
+      });
+    },
+    //环比
+    huangbiyear() {
+      this.huanbibiFalg = true;
+      let interval = this.intervald;
+      let startTime = this.timeValue[0];
+      let endTime = this.timeValue[1];
+      let year = parseInt(startTime.substring(0, 4));
+      let month = parseInt(startTime.substring(5, 7));
+      let date = parseInt(startTime.substring(8, 10));
+      //按月
+      if (interval == 3) {
+        // 换年份
+        if (month == 1) {
+          year = year - 1;
+          startTime = year + "-12-01";
+          endTime = year + "-12-31";
+        } else if (month <= 10) {
+          month = month - 1;
+          startTime = year + "-0" + month + "-01";
+          let day = this.getDays(year, month);
+          endTime = year + "-0" + month + "-" + day;
+        } else {
+          month = month - 1;
+          startTime = year + "-" + month + "-01";
+          let day = this.getDays(year, month);
+          endTime = year + "-" + month + "-" + day;
+        }
+        //按周
+      } else if (interval == 4) {
+        //根据开始时间推
+        let start = new Date(year, month - 1, date);
+        start.setDate(start.getDate() - 7);
+        startTime = this.formatTime(start);
+        var end = new Date(start);
+        end.setDate(start.getDate() + 6);
+        endTime = this.formatTime(end);
+        //按季度
+      } else if (interval == 2) {
+        // 换年份
+        if (month == 1) {
+          year = year - 1;
+          startTime = year + "-10-01";
+          endTime = year + "-12-31";
+        } else {
+          // 还是本年
+          month = month - 3;
+          startTime = year + "-0" + month + "-01";
+          month = month + 2;
+          var day = this.getDays(year, month);
+          endTime = year + "-0" + month + "-" + day;
+        }
+        //自定义
+      } else if (interval == 5) {
+        //按年
+      } else if (interval == 1) {
+        year = year - 1;
+        startTime = year + "-01-01";
+        endTime = year + "-12-31";
+      } else if (interval == 6) {
+        if (month <= 6) {
+          year = year - 1;
+          startTime = year + "-07-01";
+          endTime = year + "-12-31";
+        } else {
+          startTime = year + "-01-01";
+          endTime = year + "-06-30";
+        }
+      }
+      this.timehbValue = [startTime, endTime];
+      var data = this.timeValue;
+      var timehbValue = this.timehbValue;
+      // debugger
+      this.$emit("querfromdata", data, timehbValue, interval);
+      // 判断向后键的状态
+      // var temp = this.getEndTime();
+      //this.timeStatus(temp, endTime);
+    },
+    //同比
+    tongbiyear() {
+      this.tonbiFalg = true;
+      let interval = this.intervald;
+      let startTime = this.timeValue[0];
+      let endTime = this.timeValue[1];
+      let year = parseInt(startTime.substring(0, 4));
+      let month = parseInt(startTime.substring(5, 7));
+      let date = parseInt(startTime.substring(8, 10));
+      //按月
+      if (interval == 3) {
+        year = year - 1;
+        if (month <= 10) {
+          startTime = year + "-0" + month + "-01";
+          let day = this.getDays(year, month);
+          endTime = year + "-0" + month + "-" + day;
+        } else {
+          startTime = year + "-" + month + "-01";
+          let day = this.getDays(year, month);
+          endTime = year + "-" + month + "-" + day;
+        }
+        //按周
+      } else if (interval == 4) {
+        //根据开始时间推
+        let start = new Date(year - 1, month, date);
+        start.setDate(start.getDate() - 7);
+        startTime = this.formatTime(start);
+        var end = new Date(start);
+        end.setDate(start.getDate() + 6);
+        endTime = this.formatTime(end);
+        //按季度
+      } else if (interval == 2) {
+        year = year - 1;
+        if (month < 10) {
+          startTime = year + "-0" + month + "-01";
+        } else {
+          startTime = year + "-" + month + "-01";
+        }
+        month = month + 2;
+        if (month <= 10) {
+          var day = this.getDays(year, month);
+          endTime = year + "-0" + month + "-" + day;
+        } else {
+          var day = this.getDays(year, month);
+          endTime = year + "-" + month + "-" + day;
+        }
+        //自定义
+      } else if (interval == 5) {
+        //按年
+      } else if (interval == 1) {
+        year = year - 1;
+        startTime = year + "-01-01";
+        endTime = year + "-12-31";
+      } else if (interval == 6) {
+        if (month <= 6) {
+          year = year - 1;
+          startTime = year + "-07-01";
+          endTime = year + "-12-31";
+        } else {
+          startTime = year + "-01-01";
+          endTime = year + "-06-30";
+        }
+      }
+      this.timehbValue = [startTime, endTime];
+      var data = this.timeValue;
+      var timehbValue = this.timehbValue;
+      this.$emit("querfromdata", data, timehbValue, interval);
+    },
+  },
+};
+</script>

src/views/center/components/DataCenter.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="box">
+    <div class="boxTop" ref="boxTop">
+      <img
+        class="img"
+        src="../images/369a8784c99e23f956099a59f7bdfa1.png"
+        alt=""
+        srcset=""
+      />
+      <span>数据中心</span>
+      <div class="divSpan">
+        ∣<span @click="tab1" :style="{ color: flag == 0 ? '#07d8fd' : '#fff' }"
+          >产品系统介绍</span
+        >
+        ∣
+        <span @click="tab2" :style="{ color: flag == 1 ? '#07d8fd' : '#fff' }"
+          >产品视频介绍</span
+        >
+      </div>
+    </div>
+    <div class="boxB" style="height: 100%" ref="box" v-show="show">
+      <!-- <img id="img"  @click="imgClick" src="@/assets/pdf.png"  /> -->
+      <!-- ppt -->
+      <div
+        class="divImg"
+        v-for="item in PPTList"
+        :key="item.id"
+        @click="imgClick(item)"
+      >
+        <img class="imgs" :src="item.picUrl" />
+        <span style="color: rgb(7, 216, 253)">{{ item.resourceName }}</span>
+      </div>
+    </div>
+    <div class="boxB" style="height: 100%" v-show="!show">
+      <!-- mp4 -->
+      <div
+        class="divImg"
+        v-for="item in MP4List"
+        :key="item.id"
+        @click="videoMp4(item)"
+      >
+        <img class="imgs" :src="item.picUrl" />
+        <span style="color: rgb(7, 216, 253)">{{ item.resourceName }}</span>
+      </div>
+    </div>
+    <!-- <video v-if="showvideo"
+      controls
+      autoplay
+      src="/device-boot/resource/play1?id=c4e4616e3aa630e5c3883807985a6cb8"
+    /> -->
+    <el-dialog
+      :close-on-click-modal="false"
+      :title="titleVideo"
+      :visible.sync="showvideo"
+      v-if="showvideo"
+      width="90%"
+      :append-to-body="true"
+    >
+      <!-- v-if="showvideo" -->
+      <video style="height: 85vh" controls="controls" autoplay :src="src" />
+    </el-dialog>
+    <!-- <el-dialog :close-on-click-modal="false"
+      title="PPT目录"
+      :visible.sync="dialogVisible"
+      
+      width="60%"
+      :append-to-body="true"
+    >
+      <div class="imgDiv" ref="imgDiv">
+        <img
+          id="img1"
+          @click="clickImg('./static/pdf/XTJS.pdf')"
+          src="@/assets/XTJS.png"
+        />
+        <img
+          id="img2"
+          @click="clickImg('./static/pdf/XTYY.pdf')"
+          src="@/assets/YYJS.png"
+        />
+      </div>
+    </el-dialog> -->
+  </div>
+</template>
+<script>
+import { queryData, play } from "@/api/center/DropEvent.js";
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {
+      flag: 0,
+      show: true,
+      dialogVisible: false,
+      MP4List: [],
+      PPTList: [],
+      src: "",
+      showvideo: false,
+      titleVideo: "",
+    };
+  },
+  created() {
+    this.infoZ();
+    this.infoO();
+  },
+
+  mounted() {
+    // document.getElementById("img").style.height =
+    //   this.$refs.box.offsetHeight - this.$refs.boxTop.offsetHeight - 20 + "px";
+
+    // el-dialog__body
+    this.tab1();
+  },
+
+  methods: {
+    infoZ() {
+      queryData({
+        type: 0,
+        state: 0,
+      }).then((res) => {
+        this.PPTList = res.data;
+      });
+    },
+    infoO() {
+      queryData({
+        type: 1,
+        state: 0,
+      }).then((res) => {
+        this.MP4List = res.data;
+      });
+    },
+    async videoMp4(e) {
+      let message = null;
+      message = this.$message({
+        showClose: true,
+        message: "  视频加载中，请稍等......",
+        iconClass: "el-icon-loading",
+        duration: 0,
+      });
+      this.titleVideo = e.resourceName;
+      await play({
+        id: e.id,
+      })
+        .then((res) => {
+          this.src = window.URL.createObjectURL(res);
+          message.close();
+        })
+        .catch(() => {
+          message.close();
+        });
+      this.showvideo = true;
+    },
+    async imgClick(e) {
+      // await play({
+      //   id: e.id,
+      // }).then((res) => {
+      window.open(e.resUrl);
+      // });
+      // let height = document.getElementsByClassName("el-dialog__body");
+
+      // setTimeout(() => {
+      //   let height =
+      //     document.getElementsByClassName("el-dialog__body")[0].offsetHeight +
+      //     "px";
+      //   document.getElementById("img1").style.height = height;
+      //   document.getElementById("img2").style.height = height;
+      // }, 100);
+    },
+    clickImg(e) {
+      let test = window.open(e); // 直接写成这样的地址
+    },
+    tab1() {
+      this.infoZ();
+      this.flag = 0;
+      this.show = true;
+    },
+    tab2() {
+      this.infoO();
+      this.flag = 1;
+      this.show = false;
+    },
+  },
+  watch: {},
+};
+</script>
+<style lang="less" scoped>
+@import url("../css/home.less");
+@font-face {
+  font-family: sszh;
+  src: url("../fonts/sszh.ttf"); /* IE9+ */
+}
+.box {
+  width: 100%;
+  height: 100%;
+  .boxTop {
+    display: flex;
+    align-items: center;
+    height: 8%;
+    font-family: "\5FAE\8F6F\96C5\9ED1";
+    font-size: 0.85rem;
+    line-height: 8%;
+    // background-color: #29707f;
+    letter-spacing: 1px;
+    color: #07d8fd;
+    cursor: pointer;
+    background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
+    .img {
+      height: 100%;
+      padding: 0 1.5%;
+      cursor: pointer;
+    }
+    .divSpan {
+      padding-left: 5%;
+      font-size: 0.85rem;
+      color: #fff;
+    }
+  }
+  .boxBot {
+    height: 90%;
+    // background-color: rgb(41, 16, 16);
+  }
+  .boxB {
+    padding: 10px;
+    height: 90% !important;
+    width: 100%;
+    /*把背景图片放大到适合元素容器的尺寸，图片比例不变*/
+    background-size: cover;
+    position: absolute;
+    display: flex;
+    flex-wrap: wrap;
+    // justify-content: space-around;
+    left: 0;
+    top: 9%;
+  }
+  .divImg {
+    height: 80px !important;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-left: 1%;
+  }
+  .imgs {
+    vertical-align: bottom;
+    cursor: pointer; //鼠标滑过变成小手
+    height: 100% !important;
+  }
+}
+::v-deep .el-dialog {
+  // background-color: transparent;
+  border: 1px solid #1697de;
+  background-color: rgba(33, 57, 83, 0.6);
+
+  .el-dialog__header {
+    // background-color: transparent ;
+    background-color: rgba(33, 57, 83, 0.6);
+
+    border-bottom: 1px solid #1697de;
+  }
+  .el-dialog__title {
+    line-height: 24px;
+    font-size: 18px;
+    color: rgb(7, 216, 253);
+  }
+}
+.imgDiv {
+  display: flex;
+  width: 100%;
+  justify-content: space-around;
+  img {
+    width: 45%;
+    vertical-align: bottom;
+    cursor: pointer; //鼠标滑过变成小手
+  }
+}
+::v-deep .el-dialog {
+  margin-top: 2% !important;
+}
+::v-deep .el-dialog__body {
+  padding: 10px;
+  max-height: none !important;
+  display: flex;
+  justify-content: center;
+}
+</style>

src/views/center/components/DataSize.vue

@@ -0,0 +1,320 @@
+<template>
+  <div class="box">
+    <div class="boxTop">
+      <img class="img" src="../images/GM.png" alt="" srcset="" />
+      <span>数据规模</span>
+      <div class="total">
+        总计:<span>{{ total }}</span>
+      </div>
+    </div>
+    <div class="boxBot" ref="Echarts">
+      <div
+        id="echart1"
+        style="width: 100%; height: 100%"
+        v-loading="isLoading"
+      ></div>
+    </div>
+  </div>
+</template>
+<script>
+import { getDataScale } from "@/api/center/DropEvent.js";
+
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {
+      zoom: undefined, //图表焦点校验
+      h: undefined,
+      isLoading: false,
+      total: 0,
+      myChart: null,
+      time: null,
+    };
+  },
+  created() {},
+
+  mounted() {
+    this.zoom = 1 / document.body.style.zoom;
+    window.addEventListener("resize", () => {
+      this.zoom = 1 / document.body.style.zoom;
+    });
+    this.$nextTick(() => {
+      this.province();
+      setInterval(() => {
+        clearInterval(this.time);
+        this.province();
+      }, 60000 * 5);
+    });
+  },
+
+  methods: {
+    //echarts图
+    async province() {
+      this.isLoading = true;
+      var xData = [];
+      var yData = [];
+      const data = [];
+      await getDataScale({
+        deptIndex: "1",
+        searchBeginTime: "2022-01-01",
+        searchEndTime: "2022-01-01",
+      }).then((res) => {
+        res.data.forEach((item, i) => {
+          this.total = this.total + item.dataStatis;
+          if (i != 0) {
+            item.timeId = item.timeId.slice(5);
+          }
+          xData.push(item.timeId);
+          yData.push(item.dataStatis);
+        });
+      });
+      let _this = this;
+      let echarts = require("echarts");
+      if (_this.myChart != null) {
+        _this.myChart.dispose();
+      }
+      let domID1 = document.getElementById("echart1");
+      setTimeout(() => {
+        (domID1.style.width = this.$refs.Echarts.offsetWidth + "px"),
+          (domID1.style.height = this.$refs.Echarts.offsetHeight + "px");
+      }, 0);
+      _this.myChart = echarts.init(domID1);
+      this.isLoading = false;
+      let option = {
+        //backgroundColor:'#12193a',
+        color: ["#f0c725", "#16f892"],
+        title: {
+          left: "center",
+          text: "南京灿能数据规模变化",
+          textStyle: {
+            color: "#FFFFFF",
+            fontSize: "14",
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+        },
+        legend: {
+          data: ["语文"],
+          x: "center",
+          top: "25",
+          textStyle: {
+            color: "#c1cadf",
+            fontSize: 10,
+          },
+        },
+        grid: {
+          left: "1%",
+          right: "6.5%",
+          top: "16%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        toolbox: {
+          show: true,
+          orient: "vertical",
+          x: "right",
+          y: "center",
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: xData,
+            axisLine: {
+              lineStyle: {
+                color: "#00ffff",
+              },
+            },
+            axisLabel: {
+              show: true,
+              color: "#00ffff",
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            //name: 'GB',
+            nameTextStyle: {
+              color: "#00ffff",
+              align: "right",
+              lineHeight: 10,
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#00ffff",
+              },
+            },
+            axisLabel: {
+              interval: 0,
+              color: "#00ffff",
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+          {
+            type: "value",
+            name: "单位:GB",
+            nameTextStyle: {
+              color: "#00ffff",
+              fontSize: 12,
+              align: "right",
+              lineHeight: 10,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "数据量",
+            type: "line",
+            smooth: true,
+            symbolSize: 8,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgba(240,199,37,0.5)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(15,253,195,0.5)",
+                },
+              ]),
+            },
+            data: yData,
+            barWidth: "30%",
+            lineStyle: { normal: { color: "#f0c725" } },
+            itemStyle: {
+              color: "#07d8fd",
+            },
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "#07d8fd",
+                fontSize: 12,
+              },
+            },
+            markLine: {
+              silent: true,
+              data: [
+                {
+                  yAxis: 150,
+                },
+              ],
+              label: {
+                color: "#07d8fd",
+              },
+            },
+          },
+        ],
+      };
+      option && _this.myChart.setOption(option, true);
+      //window.echartsArr.push(_this.myChart);
+      setTimeout(function () {
+        _this.myChart.resize();
+        let app = {
+          currentIndex: -1,
+        };
+
+        _this.time = setInterval(function () {
+          var dataLen = option.series[0].data.length;
+
+          // 取消之前高亮的图形
+          _this.myChart.dispatchAction({
+            type: "downplay",
+            seriesIndex: 0,
+            dataIndex: app.currentIndex,
+          });
+          app.currentIndex = (app.currentIndex + 1) % dataLen;
+          //console.log(app.currentIndex);
+          // 高亮当前图形
+          _this.myChart.dispatchAction({
+            type: "highlight",
+            seriesIndex: 0,
+            dataIndex: app.currentIndex,
+          });
+          // 显示 tooltip
+          _this.myChart.dispatchAction({
+            type: "showTip",
+            seriesIndex: 0,
+            dataIndex: app.currentIndex,
+          });
+        }, 2000);
+      }, 0);
+    },
+  },
+  beforeDestroy() {
+    for (let i = 1; i < 10000; i++) {
+      clearInterval(i);
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+// @import url("../css/home.less");
+@font-face {
+  font-family: sszh;
+  src: url("../fonts/sszh.ttf"); /* IE9+ */
+}
+.box {
+  width: 100%;
+  height: 100%;
+  .boxTop {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 8%;
+    font-family: "\5FAE\8F6F\96C5\9ED1";
+    font-size: 0.85rem;
+    line-height: 8%;
+    letter-spacing: 1px;
+    color: #07d8fd;
+    cursor: pointer;
+    background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
+    .img {
+      height: 100%;
+      padding: 0 1.5%;
+      cursor: pointer;
+    }
+    .total {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      font-size: 0.85rem;
+      color: rgb(0, 255, 0);
+      transform: translate(-50%, -50%);
+      span {
+        font-family: electricFont;
+        font-size: 1.3rem;
+        color: #07d8fd;
+      }
+    }
+  }
+  .boxBot {
+    height: 90%;
+
+    // background-color: rgb(41, 16, 16);
+  }
+}
+</style>

src/views/center/components/MonitoringPointScale.vue

@@ -0,0 +1,776 @@
+<template>
+  <div class="MonitoringPointScale">
+    <div class="boxT" @mouseleave="handleMouseLeave">
+      <img class="imgicon" src="../images/GM.png" alt="" srcset="" />
+      <span>监测点规模</span>
+      <div class="divSpan">
+        <span @click="tab1(0, 1)" :style="{ color: flag == 0 ? '#07d8fd' : '#fff' }">片区</span>
+        ∣
+        <span @click="tab2(0, 1)" :style="{ color: flag == 1 ? '#07d8fd' : '#fff' }">负荷类型</span>
+      </div>
+    </div>
+    <div class="boxB" ref="electr0_7" v-show="isshow">
+      <div id="electr0_7" style="width: 100%; height: 100%" />
+      <div class="boxnum" id="boxnum">
+        <div class="zong">
+          <div class="zong_title" id="zong_title">总数</div>
+          <div class="zong_num" id="zong_num">{{ total }}</div>
+        </div>
+        <div class="add">
+          <div class="add_title" id="add_title">本月新增</div>
+          <div class="add_num" id="add_num">{{ add }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="boxB" ref="electr0_8" v-show="!isshow">
+      <div id="electr0_8" style="width: 100%; height: 100%" />
+    </div>
+  </div>
+</template>
+<script>
+import {
+  getMonitoringPointScale,
+  getLoadTypeData,
+} from "@/api/center/DropEvent.js";
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {
+      isshow: true,
+      flag: 0,
+      Num: 0,
+      zoom: "", //图表焦点校验
+      total: "", //图表焦点校验
+      add: "", //图表焦点校验
+      formData: {
+        deptIndex: "",
+        searchBeginTime: this.getCurrentMonthFirst(),
+        searchEndTime: this.getNowFormatDate(),
+      },
+
+      piedata: [
+        { value: 1048, name: "安徽省" },
+        { value: 735, name: "江苏省" },
+        { value: 580, name: "浙江省" },
+        { value: 484, name: "云南省" },
+        { value: 300, name: "海南省" },
+        { value: 300, name: "福建省" },
+        { value: 300, name: "广东省" },
+      ],
+      timeA: null,
+      timeB: null,
+      calm: false,
+      electr7List: [],
+      electr8List: [],
+      myChart2: null,
+    };
+  },
+  created() {
+    this.formData.deptIndex = JSON.parse(
+      window.localStorage.getItem("adminInfo")
+    ).deptId;
+  },
+  mounted() {
+    this.zoom = 1 / document.body.style.zoom;
+    window.addEventListener("resize", () => {
+      this.zoom = 1 / document.body.style.zoom;
+    });
+    getMonitoringPointScale(this.formData).then((res) => {
+      this.total = res.data.monitorTotalCount;
+      this.add = res.data.monitorAddCount;
+      this.electr7List = res;
+
+      this.electr7();
+    });
+    getLoadTypeData(this.formData).then((res) => {
+      this.electr8List = res;
+    });
+    this.info();
+  },
+  beforeDestroy() {
+    for (let i = 1; i < 10000; i++) {
+      clearInterval(i);
+    }
+    for (let i = 1; i < 10000; i++) {
+      clearTimeout(i);
+    }
+  },
+  methods: {
+    info() {
+      this.timeA = setTimeout(() => {
+        this.tab2();
+      }, 15000);
+      this.timeB = setTimeout(() => {
+        this.tab1();
+        this.info();
+      }, 60000);
+    },
+    handleMouseLeave() {
+      if (this.calm) {
+        this.calm = false;
+        this.$emit("Remove");
+        // this.info();
+      }
+    },
+    //获取当月第一天日期
+    getCurrentMonthFirst() {
+      var date = new Date();
+      var year = date.getFullYear();
+      date.setDate(1);
+      var month = parseInt(date.getMonth() + 1);
+      var day = date.getDate();
+      if (month < 10) {
+        month = "0" + month;
+      }
+      if (day < 10) {
+        day = "0" + day;
+      }
+      return year + "-" + month + "-" + day;
+    },
+    //获取当天日期
+    getNowFormatDate() {
+      var date = new Date();
+      var year = date.getFullYear();
+      var month = date.getMonth() + 1;
+      var day = date.getDate();
+      if (month < 10) {
+        month = "0" + month;
+      }
+      if (day < 10) {
+        day = "0" + day;
+      }
+      return year + "-" + month + "-" + day;
+    },
+    fontSize(res) {
+      let clientWidth = document.documentElement.clientWidth;
+      if (!clientWidth) return;
+      let fontSize = clientWidth / 1920;
+      return res * fontSize;
+    },
+    tab1(e, v) {
+      this.flag = 0;
+      this.electr7();
+
+      this.isshow = true;
+      if (e == 0) {
+        if (v == 1) {
+          this.$emit("control", { name: "MonitoringPointScale", val: 1 });
+        }
+        clearTimeout(this.timeA);
+        clearTimeout(this.timeB);
+        this.calm = true;
+      }
+    },
+    tab2(e, v) {
+      this.flag = 1;
+      this.electr8();
+      this.isshow = false;
+      if (e == 0) {
+        if (v == 1) {
+          this.$emit("control", { name: "MonitoringPointScale", val: 2 });
+        }
+
+        clearTimeout(this.timeA);
+        clearTimeout(this.timeB);
+        this.calm = true;
+      }
+    },
+    // 监测点规模片区
+    async electr7() {
+      let EchartsData = [];
+
+      let arrData = this.electr7List.data.param;
+      arrData.forEach((item) => {
+        item.name = item.name;
+        item.value = item.count;
+      });
+      EchartsData = arrData;
+      let echarts = require("echarts");
+      let domID1 = document.getElementById("electr0_7");
+      let boxnum = document.getElementById("boxnum");
+      let zong_title = document.getElementById("zong_title");
+      let zong_num = document.getElementById("zong_num");
+      let add_title = document.getElementById("add_title");
+      let add_num = document.getElementById("add_num");
+      setTimeout(() => {
+        (domID1.style.width = this.$refs.electr0_7.offsetWidth + "px"),
+          (domID1.style.height = this.$refs.electr0_7.offsetHeight + "px");
+        boxnum.style.width = this.$refs.electr0_7.offsetWidth / 5 + "px";
+        zong_title.style.fontSize = ".75rem";
+        zong_num.style.fontSize = "1.5rem";
+        add_title.style.fontSize = ".75rem";
+        add_num.style.fontSize = "1.5rem";
+      }, 0);
+      let color = [
+        "#d909e0",
+        "#ffe400",
+        "#ff9a09",
+        "#ef1e5f",
+        "#23cbe5",
+        "#ec561b",
+        "#ffa500",
+        "#41E398",
+        "#12AFA6",
+        "#FF0000",
+        "#CC99FF",
+        "#0099CC",
+        "#FF6699",
+        "#00FF7F",
+        "#D2691E",
+        "#FF6347",
+        "#A52A2A",
+        "#808080",
+        "#DEB887",
+        "#FFD700",
+        "#556B2F",
+        "#7FFF00",
+        "#808000",
+        "#40E0D0",
+        "#00FFFF",
+        "#8A2BE2",
+        "#EE82EE",
+        "#000080",
+        "#DC143C",
+        "#008080",
+        "#8FBC8F",
+        "#F5DEB3",
+        "#FF7F50",
+        "#FFF5EE",
+      ];
+      let myChart2 = echarts.init(domID1);
+      let option = {
+        title: {
+          text: "片区分布",
+          left: "center",
+          top: "center",
+          textStyle: {
+            color: "#fff",
+          },
+        },
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "rgba(8,36,68,.7)",
+          color: "#00ffff",
+          textStyle: {
+            color: "#00ffff",
+          },
+        },
+        legend: {
+          type: "scroll",
+          orient: "vertical",
+          left: 0,
+          top: 5,
+          bottom: 10,
+          // itemHeight: 8,
+          pageIconColor: "white", //激活的分页按钮颜色
+          pageTextStyle: {
+            color: "#35ffff",
+          },
+          pageIconInactiveColor: "#CCC", //没激活的分页按钮颜色
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          //设置自定义legend 的重点
+          // formatter: function(name) {
+          //   // 获取legend显示内容
+          //   let data = EchartsData;//这个是展示的数据
+          //   let total = 0;
+          //   let tarValue = 0;
+          //   let value = 0;
+          //   for (let i = 0, l = data.length; i < l; i++) {
+          //     total += data[i].value;
+          //     if (data[i].name == name) {
+          //       tarValue = data[i].value;
+          //       value = data[i].value;
+          //     }
+          //   }
+          // let p = total== 0? 0 :((tarValue / total) * 100).toFixed(1);
+          // return [
+          //   "{a|" +
+          //     echarts.format.truncateText(
+          //       name,
+          //       80,
+          //       "14px Microsoft Yahei",
+          //       "…"//如果宽度超过80会出现...
+          //     ) +
+          //     "}",
+          //   "{b|" + p + "%}",
+          //   "{x|" + value + "}"  //a、b、x、跟下面的rich对应
+          // ].join(" ");
+          // },
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["55%", "65%"],
+            // center: ['60%', '60%'],
+            data: EchartsData.map((item, index) => {
+              item.label = {
+                color: color[index],
+              };
+              return item;
+            }),
+            itemStyle: {
+              color: (params) => {
+                var index = params.dataIndex;
+                var color = [
+                  "#d909e0",
+                  "#ffe400",
+                  "#ff9a09",
+                  "#ef1e5f",
+                  "#23cbe5",
+                  "#ec561b",
+                  "#ffa500",
+                  "#41E398",
+                  "#12AFA6",
+                  "#FF0000",
+                  "#CC99FF",
+                  "#0099CC",
+                  "#FF6699",
+                  "#00FF7F",
+                  "#D2691E",
+                  "#FF6347",
+                  "#A52A2A",
+                  "#808080",
+                  "#DEB887",
+                  "#FFD700",
+                  "#556B2F",
+                  "#7FFF00",
+                  "#808000",
+                  "#40E0D0",
+                  "#00FFFF",
+                  "#8A2BE2",
+                  "#EE82EE",
+                  "#000080",
+                  "#DC143C",
+                  "#008080",
+                  "#8FBC8F",
+                  "#F5DEB3",
+                  "#FF7F50",
+                  "#FFF5EE",
+                ];
+                return color[index];
+              },
+            },
+          },
+        ],
+      };
+
+      option && myChart2.setOption(option, true);
+      //window.echartsArr.push(myChart2);
+      setTimeout(function () {
+        myChart2.resize();
+      }, 0);
+    },
+    async electr8() {
+      let echarts = require("echarts");
+      let _this = this;
+      let domID1 = document.getElementById("electr0_8");
+      setTimeout(() => {
+        (domID1.style.width = this.$refs.electr0_8.offsetWidth + "px"),
+          (domID1.style.height = this.$refs.electr0_8.offsetHeight + "px");
+      }, 0);
+      if (_this.myChart2 != null) {
+        _this.myChart2.dispose();
+        clearInterval(_this.time2);
+      }
+      _this.myChart2 = echarts.init(domID1);
+      // const data = await getLoadTypeData(this.formData);
+      let cityList = [];
+      let cityData = [];
+      
+      this.electr8List.data.param.sort((a, b) => b.count - a.count).forEach((item) => {
+        if (item.count != 0) {
+          cityList.push(item.name);
+          cityData.push(item.count);
+        }
+
+      });
+      // 数据处理
+      var charts = {
+        // 按顺序排列从大到小
+        cityList: cityList,
+        cityData: cityData,
+      };
+      var top10CityList = charts.cityList;
+      var top10CityData = charts.cityData;
+      var color = [
+        "rgba(3,255,238",
+        "rgba(218,3,255",
+        "rgba(255,248,3",
+        "rgba(120,255,3",
+        "rgba(255,218,3",
+        "rgba(3,204,255",
+        "rgba(3,72,255",
+        "rgba(255,101,3",
+        "rgba(3,255,155",
+        "rgba(218,255,3",
+        "rgba(135,3,255",
+        "rgba(107,146,168",
+        "rgba(7,230,163",
+        "rgba(52,162,191",
+        "rgba(147,112,219",
+        "rgba(100,149,237",
+        "rgba(72,209,204",
+        "rgba(152,251,152",
+        "rgba(255,99,71",
+        "rgba(188,143,143",
+        "rgba(105,105,105",
+        "rgba(210,105,30",
+        "rgba(255,165,0",
+        "rgba(189,183,107",
+        "rgba(124,252,0",
+        "rgba(0,255,127",
+        "rgba(0,139,139",
+        "rgba(0,191,255",
+        "rgba(225,255,255",
+        "rgba(112,128,144",
+        "rgba(176,196,222",
+        "rgba(123,104,238",
+        "rgba(153,50,204",
+        "rgba(255,0,255",
+        "rgba(255,105,180",
+      ];
+
+      // 图表option整理
+      let lineY = [];
+      var yData = [];
+      for (var i = 0; i < charts.cityList.length; i++) {
+        yData.push(top10CityData[i] + "个");
+        var EchartsData = {
+          name: charts.cityList[i],
+          color: color[i] + ")",
+          value: top10CityData[i],
+          itemStyle: {
+            normal: {
+              show: true,
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                1,
+                0,
+                [
+                  {
+                    offset: 0,
+                    color: color[i] + ", 0.3)",
+                  },
+                  {
+                    offset: 1,
+                    color: color[i] + ", 1)",
+                  },
+                ],
+                false
+              ),
+              barBorderRadius: 10,
+            },
+            emphasis: {
+              shadowBlur: 15,
+              shadowColor: "rgba(0, 0, 0, 0.1)",
+            },
+          },
+        };
+        lineY.push(EchartsData);
+      }
+      let maxValue = 0;
+
+      for (const item of lineY) {
+        if (item.value > maxValue) {
+          maxValue = item.value;
+        }
+      }
+
+      var option = {
+        // backgroundColor: '#000',
+        title: {
+          show: false,
+        },
+        tooltip: {
+          showContent: true,
+          trigger: "axis",
+          backgroundColor: "rgba(8,36,68,.7)",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+          color: "#00ffff",
+          textStyle: {
+            color: "#00ffff",
+          },
+          // formatter: function (params) {
+          //   for (var i = 0; i < params.length; i++) {
+          //     if (params[i].name !== "") {
+          //       str += params[i].name +":" +
+          //         params[i].value +
+          //         "<br/>";
+          //     }
+          //   }
+          //   return str;
+          // },
+        },
+        grid: {
+          borderWidth: 0,
+          top: "10px",
+          left: "30px",
+          right: "35px",
+          bottom: "15px",
+        },
+        color: color,
+        dataZoom: [
+          {
+            type: "slider",
+            show: true,
+            // 设置组件控制的y轴
+            yAxisIndex: [0, 1],
+            left: 5,
+            // top: 60,
+            // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%
+            // 也可以用 startValue设置起始值
+            start: 0,
+            end: lineY.length < 10 ? 100 : 50, //默认为100
+            width: 6,
+            // height: 450,
+            // 组件的背景颜色
+            // left: 600, //左边的距离
+            // right: 8,//右边的距离
+            borderRadius: 5,
+            // borderColor: "rgba(43,48,67,0.8)",
+            // fillerColor: '#ccc',//滑动块的颜色
+            //  backgroundColor: '#33384b',//两边未选中的滑动条片区的颜色
+            // 是否显示detail，即拖拽时候显示详细数值信息
+            showDetail: false,
+            // 控制手柄的尺寸
+            handleSize: 12,
+            // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。
+            showDataShadow: false,
+          },
+          {
+            type: "inside",
+            yAxisIndex: [0, 1],
+            start: 1,
+            // end: 36,
+            // 不按任何功能键，鼠标滚轮能触发缩放
+            // zoomOnMouseWheel: false,
+            // 不按任何功能键，鼠标移动能触发数据窗口平移
+            // moveOnMouseWheel: true,
+          },
+        ],
+        yAxis: [
+          {
+            type: "category",
+            inverse: true,
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#fff",
+                width: 3,
+              },
+            },
+            axisLabel: {
+              show: false,
+              inside: false,
+            },
+            data: top10CityList,
+          },
+          {
+            name: "单位:个",
+            type: "category",
+            inverse: true,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              inside: false,
+              textStyle: {
+                color: "#03E9FF",
+                fontSize: "10",
+                fontFamily: "PingFangSC-Regular",
+              },
+              // formatter: function (val) {
+              //     return `${val}个`;
+              //   },
+            },
+            data: yData,
+            splitArea: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        xAxis: {
+          type: "value",
+          axisTick: {
+            show: false,
+          },
+          max: maxValue + 30,
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+            textStyle: {
+              fontSize: "10",
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "bar",
+            // zlevel: 2,
+            barMaxWidth: 20,
+            barGap: `10%`,
+            data: lineY,
+            animationDuration: 1500,
+            label: {
+              normal: {
+                color: "#03FDFF",
+                show: true,
+                position: "right",
+                textStyle: {
+                  fontSize: "0.9rem",
+                },
+                formatter: function (a, b) {
+                  return a.name;
+                },
+              },
+            },
+          },
+        ],
+        animationEasing: "cubicOut",
+      };
+
+      option && _this.myChart2.setOption(option, true);
+      //window.echartsArr.push(myChart2);
+      setTimeout(function () {
+        _this.myChart2.resize();
+      }, 0);
+      if (lineY.length >= 10) {
+        _this.time2 = setInterval(() => {
+          if (option.dataZoom[0].end == 50) {
+            option.dataZoom[0].end = 100;
+            option.dataZoom[0].start = 50;
+          } else if (option.dataZoom[0].end == 100) {
+            option.dataZoom[0].end = 50;
+            option.dataZoom[0].start = 0;
+          } 
+          // else if (option.dataZoom[0].end == 75) {
+          //   option.dataZoom[0].end = 100;
+          //   option.dataZoom[0].start = 75;
+          // } else if (option.dataZoom[0].end == 100) {
+          //   option.dataZoom[0].end = 25;
+          //   option.dataZoom[0].start = 0;
+          // }
+          _this.myChart2.setOption(option);
+          //window.echartsArr.push(_this.myChart2);
+        }, 8000);
+      }
+    },
+  },
+
+  computed: {},
+
+  watch: {},
+};
+</script>
+<style lang="less" scoped>
+@import url("../../center/css/home.less");
+
+// @import url("../center/css/change.less");
+@font-face {
+  font-family: sszh;
+  src: url("../../center/fonts/sszh.ttf");
+  /* IE9+ */
+}
+
+.MonitoringPointScale {
+  width: 100%;
+  height: 100%;
+
+  .boxT {
+    display: flex;
+    align-items: center;
+    height: 8%;
+    font-family: "\5FAE\8F6F\96C5\9ED1";
+    font-size: 0.85rem;
+    line-height: 8%;
+    // background-color: #29707f;
+    letter-spacing: 1px;
+    color: #07d8fd;
+    cursor: pointer;
+    background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
+
+    .imgicon {
+      height: 100%;
+      padding: 0 1.5%;
+      cursor: pointer;
+    }
+
+    .divSpan {
+      padding-left: 5%;
+      font-size: 0.85rem;
+      color: #fff;
+      cursor: pointer;
+    }
+  }
+
+  .boxB {
+    position: relative;
+    height: 92%;
+    // background-color: rgb(41, 16, 16);
+  }
+
+  .boxnum {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 100000000;
+  }
+
+  .zong_title {
+    text-align: center;
+  }
+
+  .zong_num {
+    font-family: electricFont;
+    color: rgb(0, 238, 255);
+    text-align: center;
+  }
+
+  .add_title {
+    color: rgb(0, 238, 255);
+    text-align: center;
+  }
+
+  .add_num {
+    font-family: electricFont;
+    color: #00ff7f;
+    text-align: center;
+  }
+
+  .zong {
+    margin-top: 5px;
+    border: 1px solid yellow;
+    border-radius: 8px;
+  }
+
+  .add {
+    margin-top: 5px;
+    border: 1px solid rgb(0, 238, 255);
+    border-radius: 8px;
+  }
+}
+</style>

src/views/center/components/PowerLoad.vue

@@ -0,0 +1,375 @@
+<template>
+  <div class="box">
+    <div class="boxTop">
+      <img class="img" src="../images/GM.png" alt="" srcset="" />
+      <span>功率负荷排名</span>
+    </div>
+    <div class="boxBot" ref="Echarts">
+      <div id="echart1" style="width: 100%; height: 100%"></div>
+    </div>
+  </div>
+</template>
+<script>
+import { getPowerOrder } from "@/api/center/DropEvent.js";
+
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {
+      zoom: undefined, //图表焦点校验
+      h: undefined,
+      isLoading: false,
+      total: 0,
+      myChart: null,
+      time: null,
+      formData: {
+        deptIndex: "",
+        limit: 20,
+        searchBeginTime: this.getCurrentMonthFirst(),
+        searchEndTime: this.getNowFormatDate(),
+      },
+    };
+  },
+  created() {
+    this.formData.deptIndex = JSON.parse(
+      window.localStorage.getItem("adminInfo")
+    ).deptId;
+  },
+
+  mounted() {
+    this.zoom = 1 / document.body.style.zoom;
+    window.addEventListener("resize", () => {
+      this.zoom = 1 / document.body.style.zoom;
+    });
+    this.$nextTick(() => {
+      this.province();
+      setInterval(() => {
+        clearInterval(this.time);
+        this.province();
+      }, 60000 * 5);
+    });
+  },
+
+  methods: {
+    //获取当月第一天日期
+    getCurrentMonthFirst() {
+      var date = new Date();
+      var year = date.getFullYear();
+      date.setDate(1);
+      var month = parseInt(date.getMonth() + 1);
+      var day = date.getDate();
+      if (month < 10) {
+        month = "0" + month;
+      }
+      if (day < 10) {
+        day = "0" + day;
+      }
+      return year + "-" + month + "-" + day;
+    },
+    //获取当天日期
+    getNowFormatDate() {
+      var date = new Date();
+      var year = date.getFullYear();
+      var month = date.getMonth() + 1;
+      var day = date.getDate();
+      if (month < 10) {
+        month = "0" + month;
+      }
+      if (day < 10) {
+        day = "0" + day;
+      }
+      return year + "-" + month + "-" + day;
+    },
+    //echarts图
+    async province() {
+      this.isLoading = true;
+      var xData = [];
+      var yData = [];
+      const data = [];
+      await getPowerOrder(this.formData).then((res) => {
+        res.data.sort((a, b) => b.max - a.max).forEach((item) => {
+          //   this.total = this.total + item.dataStatis;
+          //   if( i != 0){
+          //     item.timeId = item.timeId.slice(5)
+          //   }
+          xData.push(item.name);
+          yData.push(Number(item.max).toFixed(2));
+        });
+      });
+      let _this = this;
+      let echarts = require("echarts");
+      if (_this.myChart != null) {
+        _this.myChart.dispose();
+      }
+      let domID1 = document.getElementById("echart1");
+      setTimeout(() => {
+        (domID1.style.width = this.$refs.Echarts.offsetWidth + "px"),
+          (domID1.style.height = this.$refs.Echarts.offsetHeight + "px");
+      }, 0);
+      _this.myChart = echarts.init(domID1);
+      this.isLoading = false;
+      let option = {
+        tooltip: {
+          showContent: true,
+          trigger: "axis",
+          backgroundColor: "rgba(8,36,68,.7)",
+          color: "#00ffff",
+          textStyle: {
+            color: "#00ffff",
+          },
+          formatter: function (params) {
+            var tips = "";
+            // tips += params[0].name + "</br/>";
+            tips += '监测点' + "：" + params[0].name + "</br/>";
+            for (var i = 0; i < params.length; i++) {
+              if (params[i].value == 3.14159) {
+                tips += '功率' + "：" + params[i].name + ":" + 0 + "<br/>";
+              } else {
+                tips += '功率' + "：" + params[i].value + "kW<br/>";
+              }
+            }
+            return tips;
+          },
+        },
+        textStyle: {
+          color: "#00ffff",
+          fontSize: 12,
+        },
+        legend: {
+          top: "4%",
+          left: "center",
+          itemWidth: 13,
+          itemHeight: 13,
+          itemStyle: {
+            color: "#00ffff",
+          },
+          icon: "rect",
+          padding: 0,
+          textStyle: {
+            color: "#03E9FF",
+            fontSize: 12,
+            padding: [2, 0, 0, 0],
+          },
+        },
+        grid: {
+          top: "40px", // 等价于 y: '16%'
+          left: "50px",
+          right: "55px",
+          bottom: "50px",
+        },
+        xAxis: {
+          name: "监测点",
+          nameTextStyle: {
+            color: "#07FCF0",
+            // top:'5%',
+            fontSize: 12,
+          },
+          type: "category",
+          axisLine: {
+            lineStyle: {
+              color: "#00ffff",
+              width: 1,
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              fontFamily: "dinproRegular",
+              color: "#00ffff",
+            },
+            rotate: 45,
+            formatter: function (value) {
+              if (value.length > 5) {
+                return `${value.slice(0, 5)}...`;
+              }
+              return value;
+            },
+          },
+          data: xData,
+        },
+        yAxis: [
+          {
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#00ffff",
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#00ffff",
+              },
+            },
+            splitLine: {
+              //分割线配置
+              lineStyle: {
+                type: "dashed",
+                color: "#00ffff",
+              },
+            },
+          },
+          {
+            name: "单位:kW",
+            nameTextStyle: {
+              color: "#00ffff",
+
+              fontSize: 12,
+            },
+            position: "right",
+            //right:'15%',
+            axisLine: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+
+        series: [
+          {
+            name: "功率负荷排名",
+            type: "bar",
+            barMaxWidth: 20,
+            label: {
+              show: true,
+              // position: "top",
+              // distance: 5,
+              color: "#00ffff",
+              formatter: function (params) {
+                var val = "";
+                if (params.value == 5) {
+                  val = 0;
+                }
+                return val;
+              },
+              fontSize: 12,
+            },
+            data: yData,
+            itemStyle: {
+              normal: {
+                type: "linear",
+                global: false,
+                color: function (params) {
+                  if (params.value != 3.14159) {
+                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                      {
+                        offset: 0,
+                        color: "#0b9eff",
+                      },
+                      {
+                        offset: 1,
+                        color: "#ffcc00",
+                      },
+                    ]);
+                  } else if ((params.value = 3.14159)) {
+                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                      {
+                        offset: 1,
+                        color: "#ccc",
+                      },
+                    ]);
+                  }
+                },
+              },
+            },
+          },
+        ],
+      };
+      option && _this.myChart.setOption(option, true);
+      //window.echartsArr.push(_this.myChart);
+      setTimeout(function () {
+        _this.myChart.resize();
+        let app = {
+          currentIndex: -1,
+        };
+
+        _this.time = setInterval(function () {
+          var dataLen = option.series[0].data.length;
+
+          // 取消之前高亮的图形
+          _this.myChart.dispatchAction({
+            type: "downplay",
+            seriesIndex: 0,
+            dataIndex: app.currentIndex,
+          });
+          app.currentIndex = (app.currentIndex + 1) % dataLen;
+          //console.log(app.currentIndex);
+          // 高亮当前图形
+          _this.myChart.dispatchAction({
+            type: "highlight",
+            seriesIndex: 0,
+            dataIndex: app.currentIndex,
+          });
+          // 显示 tooltip
+          _this.myChart.dispatchAction({
+            type: "showTip",
+            seriesIndex: 0,
+            dataIndex: app.currentIndex,
+          });
+        }, 2000);
+      }, 0);
+    },
+  },
+  beforeDestroy() {
+    for (let i = 1; i < 10000; i++) {
+      clearInterval(i);
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+// @import url("../css/home.less");
+@font-face {
+  font-family: sszh;
+  src: url("../fonts/sszh.ttf");
+  /* IE9+ */
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+
+  .boxTop {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 8%;
+    font-family: "\5FAE\8F6F\96C5\9ED1";
+    font-size: 0.85rem;
+    line-height: 8%;
+    letter-spacing: 1px;
+    color: #07d8fd;
+    cursor: pointer;
+    background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
+
+    .img {
+      height: 100%;
+      padding: 0 1.5%;
+      cursor: pointer;
+    }
+
+    .total {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      font-size: 0.85rem;
+      color: rgb(0, 255, 0);
+      transform: translate(-50%, -50%);
+
+      span {
+        font-family: electricFont;
+        font-size: 1.3rem;
+        color: #07d8fd;
+      }
+    }
+  }
+
+  .boxBot {
+    height: 90%;
+
+    // background-color: rgb(41, 16, 16);
+  }
+}
+</style>

src/views/center/components/SteadyState.vue

@@ -0,0 +1,752 @@
+<template>
+  <div class="MonitoringPointScale">
+    <Timeinterval ref="Timeinterval" :interval="3" v-show="false"></Timeinterval>
+    <div class="boxT" @mouseleave="handleMouseLeave">
+      <img class="imgicon" src="../images/GM.png" alt="" srcset="" />
+      <span>稳态越线占比</span>
+      <div class="divSpan">
+        <span @click="tab1(0, 1)" :style="{ color: flag == 0 ? '#07d8fd' : '#fff' }">片区</span>
+        ∣
+        <span @click="tab2(0, 1)" :style="{ color: flag == 1 ? '#07d8fd' : '#fff' }">负荷类型</span>
+      </div>
+    </div>
+    <div class="boxB" ref="electr_7" v-show="isshow">
+      <div id="electr_7" style="width: 100%; height: 100%" />
+    </div>
+    <div class="boxB" ref="electr_8" v-show="!isshow">
+      <div id="electr_8" style="width: 100%; height: 100%" />
+    </div>
+  </div>
+</template>
+<script>
+import {
+  getHomeostasisLoad,
+  getHomeostasisArea,
+} from "@/api/center/DropEvent.js";
+import Timeinterval from "@/views/Timeinterval/index.vue";
+export default {
+  components: { Timeinterval },
+  props: {},
+  data() {
+    return {
+      isshow: true,
+      color: [
+        "#d909e0",
+        "#ffe400",
+        "#ff9a09",
+        "#ef1e5f",
+        "#23cbe5",
+        "#ec561b",
+        "#ffa500",
+      ],
+      flag: 0,
+      Num: 0,
+      zoom: "", //图表焦点校验
+      form: {},
+      myChart1: null,
+      time1: null,
+      myChart2: null,
+      time2: null,
+      timeA: null,
+      timeB: null,
+      calm: false,
+      electr7List: [],
+      electr8List: [],
+    };
+  },
+  created() { },
+  mounted() {
+    this.form = {
+      deptIndex: JSON.parse(window.localStorage.getItem("adminInfo")).deptId,
+      searchBeginTime: this.$refs.Timeinterval.timeValue[0],
+      searchEndTime: this.$refs.Timeinterval.timeValue[1],
+    };
+    this.zoom = 1 / document.body.style.zoom;
+    window.addEventListener("resize", () => {
+      this.zoom = 1 / document.body.style.zoom;
+    });
+    getHomeostasisArea(this.form).then((res) => {
+      this.electr7List = res;
+      this.electr7();
+    });
+    getHomeostasisLoad(this.form).then((res) => {
+      this.electr8List = res;
+    });
+    this.info();
+  },
+  beforeDestroy() {
+    for (let i = 1; i < 10000; i++) {
+      clearInterval(i);
+    }
+  },
+  methods: {
+    info() {
+      this.timeA = setTimeout(() => {
+        this.tab2();
+      }, 15000);
+      this.timeB = setTimeout(() => {
+        this.tab1();
+        this.info();
+      }, 60000);
+    },
+    tab1(e, v) {
+      this.flag = 0;
+      this.electr7();
+      this.isshow = true;
+      if (e == 0) {
+        if (v == 1) {
+          this.$emit("control", { name: "SteadyState", val: 1 });
+        }
+        clearTimeout(this.timeA);
+        clearTimeout(this.timeB);
+        this.calm = true;
+      }
+    },
+    tab2(e, v) {
+      this.flag = 1;
+      this.electr8();
+      this.isshow = false;
+      if (e == 0) {
+        if (v == 1) {
+          this.$emit("control", { name: "SteadyState", val: 2 });
+        }
+        clearTimeout(this.timeA);
+        clearTimeout(this.timeB);
+        this.calm = true;
+      }
+    },
+    handleMouseLeave() {
+      if (this.calm) {
+        this.calm = false;
+        this.$emit("Remove");
+        // this.info();
+      }
+    },
+    // 分布式光伏渗透率
+    async electr7() {
+      let _this = this;
+      let echarts = require("echarts");
+      let domID1 = document.getElementById("electr_7");
+      let titleList = [];
+      let datalist = [];
+      // await getHomeostasisArea(this.form).then((res) => {
+      this.electr7List.data.sort((a, b) => b.avg - a.avg).forEach((item) => {
+        titleList.push(item.name);
+        if (item.avg == 0) {
+          item.avg = 0.00159;
+        }
+        datalist.push(item.avg);
+      });
+      // });
+      setTimeout(() => {
+        (domID1.style.width = this.$refs.electr_7.offsetWidth + "px"),
+          (domID1.style.height = this.$refs.electr_7.offsetHeight + "px");
+      }, 0);
+      if (_this.myChart1 != null) {
+        _this.myChart1.dispose();
+        clearInterval(_this.time1);
+      }
+      _this.myChart1 = echarts.init(domID1);
+      var option = {
+        tooltip: {
+          showContent: true,
+          trigger: "axis",
+          backgroundColor: "rgba(8,36,68,.7)",
+          color: "#00ffff",
+          textStyle: {
+            color: "#00ffff",
+          },
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+          formatter: function (params) {
+            var tips = "";
+            tips += params[0].name + "</br/>";
+            for (var i = 0; i < params.length; i++) {
+              if (params[i].value ==0.00159) {
+                tips += params[i].seriesName + "" + 0 + "<br/>";
+              } else {
+                tips += params[i].seriesName + "" + params[i].value + "%<br/>";
+              }
+            }
+            return tips;
+          },
+        },
+        textStyle: {
+          color: "#00ffff",
+          fontSize: 12,
+        },
+        legend: {
+          top: "4%",
+          left: "center",
+          itemWidth: 13,
+          itemHeight: 13,
+          itemStyle: {
+            color: "#00ffff",
+          },
+          icon: "rect",
+          padding: 0,
+          textStyle: {
+            color: "#00ffff",
+            fontSize: 12,
+            padding: [2, 0, 0, 0],
+          },
+        },
+        grid: {
+          top: "40px", // 等价于 y: '16%'
+          left: "35px",
+          right: "45px",
+          bottom: datalist.length < 8 ? "30px" : "45px",
+        },
+        xAxis: {
+          axisLine: {
+            show: true, //隐藏X轴轴线
+            lineStyle: {
+              color: "#00ffff",
+            },
+          },
+          name: "片区",
+          nameTextStyle: {
+            color: "#00ffff",
+            fontSize: 12,
+          },
+          axisLabel: {
+            interval: 0,
+            rotate: datalist.length < 8 ? "0" : "45",
+            formatter: function (value) {
+              if (value.length > 3) {
+                return `${value.slice(0, 2)}...`;
+              }
+              return value;
+            },
+            textStyle: {
+              color: "#00ffff", //坐标轴字颜色
+            },
+            margin: 10,
+          },
+          axisTick: {
+            show: false, //隐藏X轴刻度
+          },
+          splitLine: {
+            //网格线
+            show: false,
+          },
+          data: titleList,
+          type: "category",
+        },
+        yAxis: [
+          {
+            min: 0,
+            max: 100,
+            axisLine: {
+              show: true, //隐藏X轴轴线
+              lineStyle: {
+                color: "#00ffff",
+              },
+            },
+            axisTick: {
+              show: false, //隐藏X轴刻度
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#00ffff",
+              },
+            },
+            splitLine: {
+              //网格线
+              show: true.valueOf,
+              lineStyle: {
+                type: "dashed",
+                color: "#00ffff",
+              },
+            },
+          },
+          {
+            name: "单位:%",
+            nameTextStyle: {
+              color: "#00ffff",
+
+              fontSize: 12,
+            },
+            position: "right",
+            //right:'15%',
+            axisLine: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "片区指标百分比",
+            data: datalist,
+            type: "bar",
+            barMaxWidth: 20,
+            barMinHeight: 5,
+            // "barWidth": 7,
+            barWidth: 17,
+            itemStyle: {
+              normal: {
+                type: "linear",
+                global: false,
+                color: function (params) {
+                  if (params.value !=0.00159) {
+                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                      {
+                        offset: 0,
+                        color: "#0b9eff",
+                      },
+                      {
+                        offset: 1,
+                        color: "#00ffff",
+                      },
+                    ]);
+                  } else if ((params.value == 0.00159)) {
+                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                      {
+                        offset: 1,
+                        color: "#ccc",
+                      },
+                    ]);
+                  }
+                },
+              },
+            },
+            label: {
+              show: true,
+              position: "top",
+              color: "#fff",
+              distance: 5,
+
+              formatter: function (params) {
+                var val = params.value;
+                if (val == 0.00159) {
+                  val = 0;
+                }
+                return val;
+              },
+              fontSize: 12,
+            },
+          },
+        ],
+      };
+      var app = {
+        currentIndex: -1,
+      };
+      _this.time1 = setInterval(function () {
+        var dataLen = option.series[0].data.length;
+
+        // 取消之前高亮的图形
+        _this.myChart1.dispatchAction({
+          type: "downplay",
+          seriesIndex: 0,
+          dataIndex: app.currentIndex,
+        });
+        app.currentIndex = (app.currentIndex + 1) % dataLen;
+        //console.log(app.currentIndex);
+        // 高亮当前图形
+        _this.myChart1.dispatchAction({
+          type: "highlight",
+          seriesIndex: 0,
+          dataIndex: app.currentIndex,
+        });
+        // 显示 tooltip
+        _this.myChart1.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: app.currentIndex,
+        });
+      }, 2000);
+      option && _this.myChart1.setOption(option, true);
+      //window.echartsArr.push(_this.myChart1);
+      setTimeout(function () {
+        _this.myChart1.resize();
+      }, 0);
+    },
+    async electr8() {
+      let _this = this;
+      let echarts = require("echarts");
+      let domID1 = document.getElementById("electr_8");
+      let titleList = [];
+      let datalist = [];
+      // await getHomeostasisLoad(this.form).then((res) => {
+      this.electr8List.data.sort((a, b) => b.avg - a.avg).forEach((item) => {
+
+        // if (item.avg == 0) {
+        //   item.avg = 100 * 0.05;
+        // }
+        if (item.avg != 0) {
+          titleList.push(item.name);
+          datalist.push(item.avg);
+
+        }
+        // });
+      });
+      setTimeout(() => {
+        (domID1.style.width = this.$refs.electr_8.offsetWidth + "px"),
+          (domID1.style.height = this.$refs.electr_8.offsetHeight + "px");
+      }, 0);
+      if (_this.myChart2 != null) {
+        _this.myChart2.dispose();
+        clearInterval(_this.time2);
+      }
+      _this.myChart2 = echarts.init(domID1);
+
+      var option = {
+        tooltip: {
+          showContent: true,
+          trigger: "axis",
+          backgroundColor: "rgba(8,36,68,.7)",
+          color: "#00ffff",
+          textStyle: {
+            color: "#00ffff",
+          },
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+          formatter: function (params) {
+            var tips = "";
+            tips += params[0].name + "</br/>";
+            for (var i = 0; i < params.length; i++) {
+              if (params[i].value == 3.14159) {
+                tips += params[i].seriesName + "" + 0 + "<br/>";
+              } else {
+                tips += params[i].seriesName + "" + params[i].value + "%<br/>";
+              }
+            }
+            return tips;
+          },
+        },
+        textStyle: {
+          color: "#00ffff",
+          fontSize: 12,
+        },
+        legend: {
+          top: "4%",
+          left: "center",
+          itemWidth: 13,
+          itemHeight: 13,
+          itemStyle: {
+            color: "#00ffff",
+          },
+          icon: "rect",
+          padding: 0,
+          textStyle: {
+            color: "#03E9FF",
+            fontSize: 12,
+            padding: [2, 0, 0, 0],
+          },
+        },
+        grid: {
+          top: "40px", // 等价于 y: '16%'
+          left: "5px",
+          right: "45px",
+          bottom: "10px",
+          containLabel: true
+        },
+        xAxis: {
+          name: "负荷\n类型",
+          nameTextStyle: {
+            color: "#00ffff",
+            fontSize: 12,
+          },
+          type: "category",
+          axisLine: {
+            lineStyle: {
+              color: "#00ffff",
+              width: 1,
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              fontFamily: "dinproRegular",
+              color: "#00ffff",
+            },
+            rotate: 45,
+            formatter: function (value) {
+              if (value.length > 5) {
+                return `${value.slice(0, 5)}...`;
+              }
+              return value;
+            },
+          },
+          data: titleList,
+        },
+        yAxis: [
+          {
+            min: 0,
+            max: 100,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#00ffff",
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#00ffff",
+              },
+            },
+            splitLine: {
+              //分割线配置
+              lineStyle: {
+                type: "dashed",
+                color: "#00ffff",
+              },
+            },
+          },
+          {
+            name: "单位:%",
+            nameTextStyle: {
+              color: "#00ffff",
+
+              fontSize: 12,
+            },
+            position: "right",
+            //right:'15%',
+            axisLine: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+
+        series: [
+          {
+            name: "负荷类型百分比",
+            type: "bar",
+            barMaxWidth: 20,
+            barMinHeight: 5,
+            label: {
+              show: true,
+              position: "top",
+              color: "#fff",
+              distance: 5,
+
+              formatter: function (params) {
+                var val = params.value;
+                if (val ==0.00159) {
+                  val = 0;
+                }
+                return val;
+              },
+              fontSize: 12,
+            },
+            data: datalist,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  if (params.value >= 90 && params.value <= 100) {
+                    return new echarts.graphic.LinearGradient(
+                      0,
+                      1,
+                      0,
+                      0,
+                      [
+                        {
+                          offset: 1,
+                          color: "#82FF03",
+                        },
+                        {
+                          offset: 0,
+                          color: "#00ffff",
+                        },
+                      ],
+                      false
+                    );
+                  } else if (params.value >= 60 && params.value <= 90) {
+                    return new echarts.graphic.LinearGradient(
+                      0,
+                      1,
+                      0,
+                      0,
+                      [
+                        {
+                          offset: 1,
+                          color: "#FFF803 ",
+                        },
+                        {
+                          offset: 0,
+                          color: "#00ffff",
+                        },
+                      ],
+                      false
+                    );
+                  } else if (params.value <= 60 && params.value != 3.14159) {
+                    return new echarts.graphic.LinearGradient(
+                      0,
+                      1,
+                      0,
+                      0,
+                      [
+                        {
+                          offset: 1,
+                          color: "#FF0303",
+                        },
+                        {
+                          offset: 0,
+                          color: "#00ffff",
+                        },
+                      ],
+                      false
+                    );
+                  } else if (params.value == 3.14159) {
+                    return new echarts.graphic.LinearGradient(
+                      0,
+                      1,
+                      0,
+                      0,
+                      [
+                        {
+                          offset: 1,
+                          color: "#ccc",
+                        },
+                      ],
+                      false
+                    );
+                  }
+                },
+              },
+            },
+          },
+        ],
+      };
+      var app = {
+        currentIndex: -1,
+      };
+      _this.time2 = setInterval(function () {
+        var dataLen = option.series[0].data.length;
+
+        // 取消之前高亮的图形
+        _this.myChart2.dispatchAction({
+          type: "downplay",
+          seriesIndex: 0,
+          dataIndex: app.currentIndex,
+        });
+        app.currentIndex = (app.currentIndex + 1) % dataLen;
+        //console.log(app.currentIndex);
+        // 高亮当前图形
+        _this.myChart2.dispatchAction({
+          type: "highlight",
+          seriesIndex: 0,
+          dataIndex: app.currentIndex,
+        });
+        // 显示 tooltip
+        _this.myChart2.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: app.currentIndex,
+        });
+      }, 2000);
+      option && _this.myChart2.setOption(option, true);
+      //window.echartsArr.push(_this.myChart2);
+      setTimeout(function () {
+        _this.myChart2.resize();
+      }, 0);
+    },
+  },
+
+  computed: {},
+
+  watch: {},
+};
+</script>
+<style lang="less" scoped>
+@import url("../../center/css/home.less");
+
+// @import url("../center/css/change.less");
+@font-face {
+  font-family: sszh;
+  src: url("../../center/fonts/sszh.ttf");
+  /* IE9+ */
+}
+
+.MonitoringPointScale {
+  width: 100%;
+  height: 100%;
+
+  .boxT {
+    display: flex;
+    align-items: center;
+    height: 8%;
+    font-family: "\5FAE\8F6F\96C5\9ED1";
+    font-size: 0.85rem;
+    line-height: 8%;
+    // background-color: #29707f;
+    letter-spacing: 1px;
+    color: #07d8fd;
+    cursor: pointer;
+    background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
+
+    .imgicon {
+      height: 100%;
+      padding: 0 1.5%;
+      cursor: pointer;
+    }
+
+    .divSpan {
+      padding-left: 5%;
+      font-size: 0.85rem;
+      color: #fff;
+    }
+  }
+
+  .boxB {
+    position: relative;
+    height: 92%;
+    // background-color: rgb(41, 16, 16);
+  }
+
+  .boxnum {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 100000000;
+  }
+
+  .zong_title {
+    font-size: 18px;
+    text-align: center;
+  }
+
+  .zong_num {
+    font-family: electricFont;
+    font-size: 30px;
+    color: rgb(0, 238, 255);
+    text-align: center;
+  }
+
+  .add_title {
+    font-size: 18px;
+    color: rgb(0, 238, 255);
+    text-align: center;
+  }
+
+  .add_num {
+    font-family: electricFont;
+    font-size: 30px;
+    color: yellow;
+    text-align: center;
+  }
+
+  .zong {
+    margin-top: 20px;
+    border: 1px solid yellow;
+    border-radius: 8px;
+  }
+
+  .add {
+    margin-top: 5px;
+    border: 1px solid rgb(0, 238, 255);
+    border-radius: 8px;
+  }
+}
+</style>

src/views/center/components/Table.vue

@@ -0,0 +1,499 @@
+<template>
+  <div class="MapTable">
+    <div @mouseover="mouseover" @mouseout="mouseout" style="cursor: pointer">
+      <el-table class="ddf" style="width: 100%" ref="offromfixTable" header-cell-class-name="table_header"
+        :header-cell-style="{ 'text-align': 'center', background: '#b1defd' }" :row-style="{
+          height: '28px',
+          color: '#f0cb0d',
+        }" :cell-style="{
+          padding: '0px',
+          color: '#f0cb0d',
+        }" @row-click="rowClick" :data="tableDataSon" :highlight-current-row="true">
+        <el-table-column align="center" type="index" prop="number" label="序号" width="60px"></el-table-column>
+        <el-table-column align="center" prop="time" min-width="220px" label="发生时刻"
+          show-overflow-tooltip></el-table-column>
+        <el-table-column show-overflow-tooltip align="center" min-width="160px" prop="subName"
+          label="变电站"></el-table-column>
+        <el-table-column show-overflow-tooltip align="center" min-width="160px" prop="name"
+          label="监测点"></el-table-column>
+        <el-table-column show-overflow-tooltip align="center" min-width="80px" prop="reason" :formatter="formFilter"
+          label="暂降原因"></el-table-column>
+        <el-table-column show-overflow-tooltip align="center" min-width="80px" prop="type" :formatter="formFilter1"
+          label="暂降类型"></el-table-column>
+        <el-table-column show-overflow-tooltip align="center" min-width="120" prop="amplitude" label="暂降幅值(%)">
+          <template slot-scope="scope">
+            <span>{{ (scope.row.amplitude * 100).toFixed() }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column show-overflow-tooltip align="center" min-width="100px" prop="duration"
+          label="持续时间(s)"></el-table-column>
+      </el-table>
+
+      <el-table ref="table" class="ddf swiper-page-table" element-loading-text="数据加载中" :header-cell-style="{
+        height: '25px',
+        padding: '0px',
+      }" :row-style="{ height: '28px', color: '#04d9ff' }" :cell-style="{ padding: '0px', color: '#04d9ff' }"
+        :data="tableData" style="width: 100%; height: 100%" :show-header="false" @row-click="rowClick"
+        :height="vh - 162 + 'px'">
+        <el-table-column align="center" type="index" prop="number" label="序号" width="60px"></el-table-column>
+        <el-table-column align="center" prop="time" min-width="220px" label="发生时刻"
+          show-overflow-tooltip></el-table-column>
+          <el-table-column show-overflow-tooltip align="center" min-width="160px" prop="subName"
+          label="变电站"></el-table-column>
+        <el-table-column show-overflow-tooltip align="center" min-width="160px" prop="name"
+          label="监测点"></el-table-column>
+        <el-table-column show-overflow-tooltip align="center" min-width="80px" prop="reason" :formatter="formFilter"
+          label="暂降原因"></el-table-column>
+        <el-table-column show-overflow-tooltip align="center" min-width="80px" prop="type" :formatter="formFilter1"
+          label="暂降类型"></el-table-column>
+        <el-table-column show-overflow-tooltip align="center" min-width="120" prop="amplitude" label="暂降幅值(%)">
+          <template slot-scope="scope">
+            <span>{{ (scope.row.amplitude * 100).toFixed() }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column show-overflow-tooltip align="center" min-width="100px" prop="duration"
+          label="持续时间(s)"></el-table-column>
+      </el-table>
+    </div>
+    <el-dialog :close-on-click-modal="false" class="eldialotable" title="波形查看" :visible.sync="view2" v-if="view2"
+      :append-to-body="true" :before-close="backbxlb" width="80%">
+      <div>
+        <el-row>
+          <el-col :span="12">
+            <span style="
+                color: #fff;
+                font-size: 14px;
+            
+                line-height: 30px;
+              ">值类型选择:</span>
+            <el-select v-model="value" @change="changeView" placeholder="请选择值类型">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+          </el-col>
+        </el-row>
+        <el-tabs v-model="bxactiveName" @tab-click="bxhandleClick">
+          <el-tab-pane label="瞬时波形" name="ssbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'">
+            <shushiboxi v-if="bxactiveName == 'ssbx' && showBoxi" :value="value" :boxoList="boxoList" :wp="wp"
+              :DColor="true"></shushiboxi>
+          </el-tab-pane>
+          <el-tab-pane label="RMS波形" name="rmsbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'">
+            <rmsboxi v-if="bxactiveName == 'rmsbx' && showBoxi" :value="value" :boxoList="boxoList" :wp="wp"
+              :DColor="true">
+            </rmsboxi>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { eventLists } from "@/api/center/DropEvent.js";
+import { dicData } from "@/utils/dicData.js";
+import rmsboxi from "@/views/echarts/rmsboxi";
+import shushiboxi from "@/views/echarts/shushiboxi";
+import {
+  getMonitorEventAnalyseWave,
+  getTransientDetailById,
+} from "@/api/monitoringpointStatistics/echart";
+import jquery from "jquery";
+export default {
+  components: { rmsboxi, shushiboxi },
+  props: {
+    height: {
+      type: Number,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      wid: null,
+      dialogVisible: false,
+      isLoading: false,
+      tableData: [],
+      tableDataSon: [],
+      type: [],
+      reason: [],
+      time: null,
+      vh: null,
+      formData: {
+        deptIndex: "",
+        searchBeginTime: this.getCurrentMonthFirst(),
+        searchEndTime: this.getNowFormatDate(),
+      },
+      boxoList: {},
+      wp: {},
+      view: true,
+      bxecharts: undefined,
+      view2: false,
+      bxactiveName: "ssbx",
+      value: 1,
+      showBoxi: true,
+      options: [
+        {
+          value: 1,
+          label: "一次值",
+        },
+        {
+          value: 2,
+          label: "二次值",
+        },
+      ],
+    };
+  },
+  created() {
+    this.queryData();
+    this.getclassificationData();
+  },
+  mounted() {
+    this.setHeight();
+    window.addEventListener("resize", this.setHeight);
+
+    this.tableScroll();
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.setHeight);
+  },
+  methods: {
+    setHeight() {
+      this.wid = window.localStorage.getItem("appwidth") - 20 + "px";
+      this.vh = this.height;
+      console.log("🚀 ~ setHeight ~ this.height:", this.height)
+      this.bxecharts = "74vh";
+    },
+
+    changeView() {
+      this.showBoxi = false;
+      setTimeout(() => {
+        this.showBoxi = true;
+      }, 0);
+    },
+    // 表格单击
+    async rowClick(e) {
+      await getTransientDetailById({
+        eventId: e.eventId,
+        sysType: 0,
+        smallType: 0,
+      }).then((res) => {
+        this.boxoList = res.data;
+      });
+      await getMonitorEventAnalyseWave({
+        id: e.eventId,
+        //id: "e178edd5-354c-49a7-b72f-119442080155",
+        systemType: 0,
+        type: 0,
+      }).then((res) => {
+        if (res.data == null) {
+          return this.$message({
+            message: res.message,
+            type: "warning",
+          });
+        } else if (res != undefined) {
+          this.wp = res.data;
+          setTimeout(() => {
+            this.view = false;
+            this.view2 = true;
+            jquery(".el-dialog__body").height(30 + "px");
+          }, 0);
+        }
+
+        //  this.initWaves()
+      });
+    },
+
+    //里层波形tab标签页触发事件
+    bxhandleClick(tab, event) {
+      if (tab.name == "ssbx") {
+        this.bxactiveName = "ssbx";
+      } else if (tab.name == "rmsbx") {
+        this.bxactiveName = "rmsbx";
+      }
+      // console.log(tab, event);
+    },
+    //返回触发事件
+    backbxlb() {
+      this.view = true;
+      this.view2 = false;
+      this.value = 1;
+    },
+
+    // 鼠标经过
+    mouseover() {
+      clearInterval(this.time);
+    },
+    // 鼠标离开
+    mouseout() {
+      this.tableScroll();
+    },
+    tableScroll() {
+      const table = this.$refs.table;
+      // 拿到表格中承载数据的div元素
+      const divData = table.bodyWrapper;
+      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
+      this.time = setInterval(() => {
+        // 元素自增距离顶部1像素
+        divData.scrollTop += 1;
+        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
+        if (
+          divData.clientHeight + divData.scrollTop >
+          divData.scrollHeight - 1
+        ) {
+          // 重置table距离顶部距离
+          divData.scrollTop = 0;
+        }
+      }, 30); // 滚动速度
+    },
+    //大屏获取暂降事件最新50条数据
+    queryData() {
+      this.isLoading = true;
+      this.formData.deptIndex = JSON.parse(
+        window.localStorage.getItem("adminInfo")
+      ).deptId;
+      eventLists(this.formData).then((res) => {
+        // console.log(res);
+        this.tableData = res.data;
+        this.tableDataSon = [
+          this.tableData[0],
+          this.tableData[1],
+          this.tableData[2],
+        ];
+        this.isLoading = false;
+      });
+    },
+    getclassificationData() {
+      //暂态原因
+      this.reason = dicData("Event_Reason", []);
+      //暂态类型
+      this.type = dicData("Event_Type", []);
+    },
+    formFilter(row) {
+      let title = "";
+      this.reason.forEach((item) => {
+        if (row.reason == item.id) {
+          title = item.name;
+        }
+      });
+      return title;
+    },
+    formFilter1(row) {
+      let title = "";
+      this.type.forEach((item) => {
+        if (row.type == item.id) {
+          title = item.name;
+        }
+      });
+      return title;
+    },
+    //获取当月第一天日期
+    getCurrentMonthFirst() {
+      var date = new Date();
+      var year = date.getFullYear();
+      date.setDate(1);
+      var month = parseInt(date.getMonth() + 1);
+      var day = date.getDate();
+      if (month < 10) {
+        month = "0" + month;
+      }
+      if (day < 10) {
+        day = "0" + day;
+      }
+      return year + "-" + month + "-" + day;
+    },
+    //获取当天日期
+    getNowFormatDate() {
+      var date = new Date();
+      var year = date.getFullYear();
+      var month = date.getMonth() + 1;
+      var day = date.getDate();
+      if (month < 10) {
+        month = "0" + month;
+      }
+      if (day < 10) {
+        day = "0" + day;
+      }
+      return year + "-" + month + "-" + day;
+    },
+  },
+
+  computed: {},
+
+  watch: {
+    height(val) {
+      this.vh = val;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+/* 最外层透明 */
+::v-deep .el-table,
+::v-deep .el-table__expanded-cell {
+  background-color: transparent;
+}
+
+/* 表格内背景颜色 */
+::v-deep .el-table th,
+::v-deep .el-table tr,
+::v-deep .el-table td {
+  background-color: transparent;
+}
+
+::v-deep .el-table tr,
+.el-table th,
+.el-table td {
+  color: #0b8eb7;
+}
+
+::v-deep .el-table__header th {
+  color: #04e8ef !important;
+  background: #10727d;
+}
+
+::v-deep .el-table--scrollable-y .el-table__body-wrapper {
+  overflow-y: hidden;
+}
+
+::v-deep .table_header {
+  background-color: #187d8b !important;
+}
+
+::v-deep .el-table__header {
+
+  tr,
+  th {
+    background: #187d8b !important;
+  }
+}
+
+::v-deep .el-table td {
+  // background-color: #055d6bcd !important;
+}
+
+::v-deep .el-table--d .el-table__body tr.el-table__row--d td {
+  background: #65c9c275 !important;
+}
+
+::v-deep .el-dialog {
+  // background-color: transparent;
+  border: 1px solid #1697de;
+  background-color: rgb(33 57 83 / 60%);
+  margin-top: 2.56% !important;
+
+  .el-dialog__title {
+    color: rgb(7, 216, 253);
+  }
+
+  .el-dialog__header {
+    // background-color: transparent ;
+    background-color: rgb(33 57 83 / 0%);
+    border-bottom: 1px solid #1697de;
+  }
+
+  .el-dialog__body {
+    padding: 10px !important;
+    max-height: none;
+    // height:85vh,
+  }
+}
+
+::v-deep .el-input__inner {
+  background-color: rgb(33 57 83 / 60%);
+  color: #fff;
+}
+
+::v-deep .el-tabs__item {
+  color: #fff;
+}
+
+::v-deep.el-table--striped .el-table__body tr.el-table__row--striped td {
+  background-color: #055d6b80 !important;
+}
+
+::v-deep .el-tabs__item:hover {
+  color: #06e0fa !important;
+  opacity: 0.8;
+}
+
+::v-deep .el-tabs__active-bar {
+  background-color: #06e0fa !important;
+}
+
+::v-deep .el-tabs__item.is-active {
+  color: #06e0fa;
+}
+
+::v-deep.el-table--striped .el-table__body tr:hover.el-table__row--striped>td {
+  background-color: #055d6b80 !important;
+}
+
+::v-deep.el-table .el-table__body tr:hover.el-table__row>td {
+  background-color: #055d6b80 !important;
+}
+
+::v-deep .dpjcksss .el-dialog .el-dialog__body {
+  max-height: 70vh;
+  padding: 0px !important;
+  overflow-y: auto;
+}
+
+/* // ----------修改elementui表格的默认样式----------- */
+::v-deep .el-table__body-wrapper {
+  &::-webkit-scrollbar {
+    // 整个滚动条
+    width: 0; // 纵向滚动条的宽度
+    background: rgba(213, 215, 220, 0.3);
+    border: none;
+  }
+
+  &::-webkit-scrollbar-track {
+    // 滚动条轨道
+    border: none;
+  }
+}
+
+/* // --------------------隐藏table gutter列和内容区右侧的空白 start */
+::v-deep .el-table th.gutter {
+  display: none;
+  width: 0;
+}
+
+::v-deep .el-table colgroup col[name="gutter"] {
+  display: none;
+  width: 0;
+}
+
+::v-deep .el-table__body {
+  width: 100% !important;
+}
+
+/* // --------------------隐藏table gutter列和内容区右侧的空白 end */
+//2023-11-9
+::v-deep .el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+  border: 0px;
+}
+
+// ::v-deep.el-table td,
+// .el-table th.is-leaf {
+//     // border-bottom: none;
+//     border-right: 0.2px solid #f2f3f3 !important;
+//     /*no*/
+//     border-bottom: 0.2px solid #f2f3f3 !important;
+//     /*no*/
+// }
+// ::v-deep .el-table--border,
+// .el-table--group {
+//     border: 0.2px solid #f2f3f3 !important;
+//     /*no*/
+// }
+
+::v-deep .el-tabs__nav-wrap::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 0px;
+  background-color: #e4e7ed;
+  z-index: 1;
+}
+</style>

src/views/center/components/UserScale.vue

@@ -0,0 +1,448 @@
+<template>
+  <div class="box">
+    <div class="boxTop">
+      <img
+        class="img"
+        src="../images/d045d87176109fc1dfb3b09a583fea5.png"
+        alt=""
+        srcset=""
+      />
+      <span>灿能用户规模</span>
+      <div class="total">
+        总计:<span>{{ total }}</span>
+      </div>
+    </div>
+    <div class="boxBot" ref="Echarts">
+      <div
+        id="echart"
+        style="width: 100%; height: 100%"
+        v-loading="isLoading"
+      ></div>
+    </div>
+  </div>
+</template>
+<script>
+import { getUserScale } from "@/api/center/DropEvent.js";
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {
+      zoom: undefined, //图表焦点校验
+      h: undefined,
+      isLoading: false,
+      total: 0,
+      myChart: null,
+      time: null,
+    };
+  },
+  created() {},
+
+  mounted() {
+    this.zoom = 1 / document.body.style.zoom;
+    window.addEventListener("resize", () => {
+      this.zoom = 1 / document.body.style.zoom;
+    });
+    this.$nextTick(() => {
+      this.province();
+      setInterval(() => {
+        clearInterval(this.time);
+
+        this.province();
+      }, 60000 * 5);
+    });
+  },
+
+  methods: {
+    //echarts图
+    async province() {
+      let xData = [];
+      let yData1 = [];
+      let yData2 = [];
+      await getUserScale({
+        deptIndex: "1",
+        searchBeginTime: "2022-01-01",
+        searchEndTime: "2022-01-01",
+      }).then((res) => {
+        var maxNum = res.data[0].incrementNum;
+        for (let i = 0; i < res.data.length; i++) {
+          if (res.data[i].incrementNum > maxNum) {
+            maxNum = res.data[i].incrementNum;
+          }
+          this.total = maxNum;
+        }
+        res.data.forEach((item, i) => {
+          if (i != 0) {
+            item.timeId = item.timeId.slice(5);
+          } else if (i == 0) {
+            let month = item.timeId.slice(5);
+            let year = item.timeId.slice(0, 4);
+            item.timeId = month + "\n" + "(" + year + ")";
+          }
+          xData.push(item.timeId);
+          yData1.push(item.monthIncrementNum || 0);
+          yData2.push(item.incrementNum || 0);
+        });
+      });
+
+      this.isLoading = true;
+
+      // const data = await getUserScale();
+      let _this = this;
+      let echarts = require("echarts");
+      let domID1 = document.getElementById("echart");
+      setTimeout(() => {
+        (domID1.style.width = this.$refs.Echarts.offsetWidth + "px"),
+          (domID1.style.height = this.$refs.Echarts.offsetHeight + "px");
+      }, 0);
+      if (_this.myChart != null) {
+        _this.myChart.dispose();
+      }
+      _this.myChart = echarts.init(domID1);
+      this.isLoading = false;
+      let option = {
+        //backgroundColor: '#ddd',
+        grid: {
+          top: "40px", // 等价于 y: '16%'
+          left: "35px",
+          right: "45px",
+          bottom: "30px",
+        },
+        color: function (params) {
+          let colorArr =
+            params.value > 0 ? ["#BFE905", "#03EEFF"] : ["#03EEFF", "#BFE905"];
+          return new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: colorArr[0], // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: colorArr[1], // 100% 处的颜色
+              },
+            ],
+            false
+          );
+        },
+        legend: {
+          top: "2%",
+          //orient: 'vertical',
+          textStyle: {
+            color: "#00ffff",
+          },
+          data: ["累计增量", "当月增量"],
+        },
+        tooltip: {
+          showContent: true,
+          trigger: "axis",
+          backgroundColor: "rgba(8,36,68,.7)",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+          color: "#00ffff",
+          textStyle: {
+            color: "#00ffff",
+          },
+          formatter: function (params) {
+            var str = "";
+            let year = xData[0].slice(4, 8);
+            let month = params[0].axisValue.slice(0, 2);
+            str += year + "-" + month + "<br/>";
+            for (var i = 0; i < params.length; i++) {
+              if (params[i].seriesName !== "") {
+                str += params[i].seriesName + ":" + params[i].value + "<br/>";
+              }
+            }
+            return str;
+          },
+        },
+        xAxis: [
+          {
+            name: "时间",
+            nameTextStyle: {
+              color: "#07FCF0",
+              // top:'5%',
+              fontSize: 12,
+            },
+            type: "category",
+            color: "#00ffff",
+            data: xData,
+            axisLabel: {
+              margin: 4,
+              color: "#00ffff",
+              textStyle: {
+                fontSize: 12,
+              },
+              // rotate: 30,
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#00ffff",
+              },
+            },
+            axisTick: {
+              show: true,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            splitNumber: 5,
+            min: 0,
+            max:
+              Math.max(...yData1) +
+              (Math.max(...yData1) % 5 == 0
+                ? 0
+                : 5 - (Math.max(...yData1) % 5)),
+            interval:
+              (Math.max(...yData1) +
+                (Math.max(...yData1) % 5 == 0
+                  ? 0
+                  : 5 - (Math.max(...yData1) % 5))) /
+              5,
+            name: "当月增量(个)",
+            minInterval: 1,
+            nameTextStyle: {
+              color: "#07FCF0",
+              fontSize: 10,
+            },
+            axisLabel: {
+              color: "#00ffff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#00ffff",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#00ffff",
+                type: "dashed",
+              },
+            },
+          },
+          {
+            minInterval: 1,
+            type: "value",
+            name: "累计增量(个)",
+            splitNumber: 5,
+            min: 0,
+            max:
+              Math.max(...yData2) +
+              (Math.max(...yData2) % 5 == 0
+                ? 0
+                : 5 - (Math.max(...yData2) % 5)),
+            interval:
+              (Math.max(...yData2) +
+                (Math.max(...yData2) % 5 == 0
+                  ? 0
+                  : 5 - (Math.max(...yData2) % 5))) /
+              5,
+            nameTextStyle: {
+              color: "#07FCF0",
+              fontSize: 10,
+            },
+            axisLabel: {
+              color: "#00ffff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#00ffff",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#00ffff",
+                type: "dashed",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            name: "当月增量",
+            data: yData1,
+            barWidth: "15px",
+            // itemStyle: {
+            //   normal: {
+            //     color: function (params) {
+            //       return new echarts.graphic.LinearGradient(
+            //         0,
+            //         0,
+            //         0,
+            //         1,
+            //         [
+            //           {
+            //             offset: 0,
+            //             color: "#BFE905", // 0% 处的颜色
+            //           },
+            //           {
+            //             offset: 1,
+            //             color: "#03EEFF", // 100% 处的颜色
+            //           },
+            //         ],
+            //         false
+            //       );
+            //     },
+            //     barBorderRadius: [30, 30, 15, 15],
+            //   },
+            // },
+            itemStyle: {
+              //本月阻拦请求次数的数据渐变色设置，本章重点部分
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#BFE905" }, //开始的颜色
+                { offset: 1, color: "#03EEFF" }, //结束的颜色
+              ]), //中间可以设置多个数值，0 为百分之0 所以可以按照自己的想法，百分之10一个颜色变化都可。
+              barBorderRadius: [30, 30, 15, 15],
+            },
+            barCategoryGap: "60%", //柱状图间距
+
+            label: {
+              normal: {
+                show: false,
+                fontSize: 18,
+                fontWeight: "bold",
+                color: "#333",
+                position: "top",
+              },
+            },
+          },
+          {
+            data: yData2,
+            type: "line",
+            smooth: false,
+            name: "累计增量",
+            showSymbol: true,
+            yAxisIndex: 1,
+            symbolSize: 8,
+            zlevel: 3,
+            lineStyle: {
+              color: "#05FFDF",
+              width: 2,
+              shadowColor: "rgba(0, 0, 0, 0.3)", //设置折线阴影
+              //shadowBlur: 15,
+              // shadowOffsetY: 20,
+            },
+          },
+        ],
+      };
+      //   // _this.myChart.resize();
+      //   let _this = this;
+      //   _this.$erd.listenTo(_this.$refs.fg, (element) => {
+      //     _this.$nextTick(() => {
+      //       _this.myChart.resize();
+      //     });
+      //   });
+      //   window.onresize = function () {
+      //     _this.myChart.resize();
+      //   };
+      option && _this.myChart.setOption(option, true);
+      //window.echartsArr.push(_this.myChart);
+
+      setTimeout(function () {
+        _this.myChart.resize();
+        let app = {
+          currentIndex: -1,
+        };
+
+        _this.time = setInterval(function () {
+          var dataLen = option.series[0].data.length;
+
+          // 取消之前高亮的图形
+          _this.myChart.dispatchAction({
+            type: "downplay",
+            seriesIndex: 0,
+            dataIndex: app.currentIndex,
+          });
+          app.currentIndex = (app.currentIndex + 1) % dataLen;
+          // 高亮当前图形
+          _this.myChart.dispatchAction({
+            type: "highlight",
+            seriesIndex: 0,
+            dataIndex: app.currentIndex,
+          });
+          // 显示 tooltip
+          _this.myChart.dispatchAction({
+            type: "showTip",
+            seriesIndex: 0,
+            dataIndex: app.currentIndex,
+          });
+        }, 2000);
+      }, 0);
+    },
+  },
+  beforeDestroy() {
+    for (let i = 1; i < 10000; i++) {
+      clearInterval(i);
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+// @import url("../css/home.less");
+@font-face {
+  font-family: sszh;
+  src: url("../fonts/sszh.ttf"); /* IE9+ */
+}
+.box {
+  width: 100%;
+  height: 100%;
+  .boxTop {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 8%;
+    font-family: "\5FAE\8F6F\96C5\9ED1";
+    font-size: 0.85rem;
+    line-height: 8%;
+    letter-spacing: 1px;
+    color: #07d8fd;
+    cursor: pointer;
+    background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
+    .img {
+      height: 100%;
+      padding: 0 1.5%;
+      cursor: pointer;
+    }
+    .total {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      font-size: 0.85rem;
+      color: rgb(0, 255, 0);
+      transform: translate(-50%, -50%);
+      span {
+        font-family: electricFont;
+        font-size: 1.3rem;
+        color: #07d8fd;
+      }
+    }
+  }
+  .boxBot {
+    height: 90%;
+    // background-color: rgb(41, 16, 16);
+  }
+}
+</style>

src/views/center/components/datashuju.vue

@@ -0,0 +1,468 @@
+<template>
+  <div class="box">
+    <Timeinterval ref="Timeinterval" :interval="3" v-show="false"></Timeinterval>
+    <div class="boxTop">
+      <img class="img" src="../images/d045d87176109fc1dfb3b09a583fea5.png" alt="" srcset="" />
+      <span>片区数据完整性</span>
+      <!-- <div class="total">
+          总计:<span>{{ total }}</span>
+        </div> -->
+    </div>
+    <div class="boxBot" ref="electrBoxgg">
+      <div id="electrsj6" style="width: 100%; height: 100%" v-loading="isLoading"></div>
+    </div>
+  </div>
+</template>
+<script>
+import { getUserScale } from "@/api/center/DropEvent.js";
+import { getTHDTopTenData, getLineIntegrityData } from "@/api/homePage/index";
+import Timeinterval from "@/views/Timeinterval/index.vue";
+import { dicData } from "@/utils/dicData.js";
+export default {
+  components: { Timeinterval },
+  props: {},
+  data() {
+    return {
+      zoom: undefined, //图表焦点校验
+      h: undefined,
+      isLoading: false,
+      total: 0,
+      myChart: null,
+      time: null,
+      form: {
+        deptIndex: "",
+        monitorFlag: 2,
+        powerFlag: 2,
+        loadType: null,
+        searchBeginTime: "",
+        searchEndTime: "",
+        statisticalType: "",
+        timeFlag: 3,
+        linePassRate: 0,
+      },
+    };
+  },
+  created() { },
+
+  mounted() {
+    (this.form.deptIndex = JSON.parse(
+      window.localStorage.getItem("adminInfo")
+    ).deptId),
+      (this.form.statisticalType = dicData("Statistical_Type", [
+        "Report_Type",
+      ])[0]);
+
+    (this.form.searchBeginTime = this.timefamt()[0]),
+      (this.form.searchEndTime = this.timefamt()[1]),
+      (this.zoom = 1 / document.body.style.zoom);
+    window.addEventListener("resize", () => {
+      this.zoom = 1 / document.body.style.zoom;
+    });
+    this.$nextTick(() => {
+      this.VoltageOne();
+      setInterval(() => {
+        clearInterval(this.time);
+
+        this.VoltageOne();
+      }, 60000 * 5);
+    });
+  },
+
+  methods: {
+    //echarts图
+    timefamt() {
+      var date = new Date();
+      var year = date.getFullYear();
+      var month = date.getMonth() + 1;
+      var day = date.getDate();
+      month = month > 9 ? month : "0" + month;
+      day = day < 10 ? "0" + day : day;
+      var arr = [];
+      var today2 = year + "-" + month + "-01";
+      // var today2 = year + "-01-01";
+      var today = year + "-" + month + "-" + day;
+      arr.push(today2);
+      arr.push(today);
+      return arr;
+    },
+
+    // 数据完整性统计统计 echartsn 1类
+    async VoltageOne() {
+      // const { data } = await Voltage();
+
+      this.form.serverName = "harmonic-boot";
+      let title = [];
+      let integrityData = [];
+
+      await getLineIntegrityData(this.form).then((res) => {
+        // title = res.data.type;
+        // integrityData = res.data.single;
+        res.data.sort((a, b) => b.single - a.single).forEach((item) => {
+          title.push(item.type);
+          if (item.single === 0 || item.single === 3.14159) {
+            item.single = 3.14159;
+            integrityData.push(item.single);
+          } else {
+            integrityData.push(item.single);
+          }
+        });
+      });
+
+      let echarts = require("echarts");
+      let domID1 = document.getElementById("electrsj6");
+      setTimeout(() => {
+        (domID1.style.width = this.$refs.electrBoxgg.offsetWidth + "px"),
+          (domID1.style.height = this.$refs.electrBoxgg.offsetHeight + "px");
+      }, 0);
+      let myChart2 = echarts.init(domID1);
+      // let echartsData = data[0];
+      let colors = ["#318af9", "#a6dffd"];
+
+      // 加阴影效果
+
+      let option = {
+        title: {
+          text: this.title,
+          left: "center",
+
+          //subtext: '单位(%)'
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(8,36,68,.7)",
+          color: "#00ffff",
+          textStyle: {
+            color: "#00ffff",
+          },
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+          formatter: function (params) {
+            var tips = "";
+            tips += params[0].name;
+            for (var i = 0; i < params.length; i++) {
+              if (params[i].value == 3.14159) {
+                tips += params[i].seriesName + "：暂无数据<br/>";
+              } else {
+                tips +=
+                  params[i].seriesName +
+                  "：" +
+                  params[i].value.toFixed(2) +
+                  "%<br/>";
+              }
+            }
+            return tips;
+          },
+        },
+        grid: {
+          top: "60px", // 等价于 y: '16%'
+          left: "35px",
+          right: "45px",
+          bottom: "20px",
+        },
+        legend: {
+          top: "4%",
+          left: "center",
+          itemWidth: 13,
+          itemHeight: 13,
+          itemStyle: {
+            color: "#00ffff",
+          },
+          icon: "rect",
+          padding: 0,
+          textStyle: {
+            color: "#03E9FF",
+            fontSize: 12,
+            padding: [2, 0, 0, 0],
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: title,
+          name: "片区",
+          nameTextStyle: {
+            color: "#07FCF0",
+            // top:'5%',
+            fontSize: 12,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#00ffff",
+            },
+          },
+          axisTick: {
+            show: false,
+
+            alignWithLabel: true,
+            lineStyle: {
+              color: "#00ffff",
+            },
+          },
+          axisLabel: {
+            color: "#00ffff",
+            // interval: 0,
+            rotate: 0,
+            formatter: function (name) {
+              //超出部分隐藏显示
+              return name.length > 6 ? name.slice(0, 3) + "..." : name;
+            },
+            interval: 0,
+          },
+        },
+        // toolbox: {
+        //   show: true,
+        //   feature: {
+        //     saveAsImage: { show: true },
+        //     // dataZoom: {
+        //     //      yAxisIndex: 'none'
+        //     // },
+        //     // //restore: {},
+        //     // mark : {show: true},
+        //     //magicType : {show: true, type: ['line', 'bar']}
+        //   },
+        // },
+        yAxis: [
+          {
+            name: "",
+            max: 100,
+            min: 0,
+            position: "left",
+            nameTextStyle: {
+              color: "#00ffff",
+
+              fontSize: 12,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#00ffff",
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#00ffff",
+              },
+            },
+            splitLine: {
+              show: false,
+              //分割线配置
+              lineStyle: {
+                type: "dashed",
+                color: "#00ffff",
+              },
+            },
+          },
+          {
+            name: "单位:%",
+            // max:100,
+            // min:0,
+            position: "right",
+            nameTextStyle: {
+              color: "#00ffff",
+
+              fontSize: 12,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "数据完整性",
+            // name: this.timeValue,
+            barMaxWidth: 20,
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+              },
+            },
+            itemStyle: {
+              normal: {
+                // 随机显示
+                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
+
+                // 定制显示（按顺序）
+                color: function (params) {
+                  if (params.value == 3.14159) {
+                    return new echarts.graphic.LinearGradient(
+                      0,
+                      1,
+                      0,
+                      0,
+                      [
+                        {
+                          offset: 1,
+                          color: "#ccc",
+                        },
+                      ],
+                      false
+                    );
+                  } else if (params.value >= 90) {
+                    return new echarts.graphic.LinearGradient(
+                      0,
+                      1,
+                      0,
+                      0,
+                      [
+                        {
+                          offset: 1,
+                          color: "#339966",
+                        },
+                      ],
+                      false
+                    );
+                  } else if (params.value >= 60 && params.value <= 90) {
+                    return new echarts.graphic.LinearGradient(
+                      0,
+                      1,
+                      0,
+                      0,
+                      [
+                        {
+                          offset: 1,
+                          color: "#FFCC33",
+                        },
+                      ],
+                      false
+                    );
+                    // && params.value > 5
+                  } else if (params.value <= 60) {
+                    return new echarts.graphic.LinearGradient(
+                      0,
+                      1,
+                      0,
+                      0,
+                      [
+                        {
+                          offset: 1,
+                          color: "#CC0000",
+                        },
+                      ],
+                      false
+                    );
+                  }
+                },
+              },
+            },
+            markLine: {
+              silent: false,
+              symbol: "circle",
+              data: [
+                {
+                  name: "完整性≥90%",
+                  yAxis: 100,
+                  lineStyle: {
+                    color: "#339966",
+                  },
+                  label: {
+                    position: "middle",
+                    formatter: "{b}",
+                    textStyle: {
+                      color: "#339966",
+                    },
+                  },
+                },
+                {
+                  name: "60%≤完整性<90%",
+                  yAxis: 90,
+                  lineStyle: {
+                    color: "#FFCC33",
+                  },
+                  label: {
+                    position: "middle",
+                    formatter: "{b}",
+                    textStyle: {
+                      color: "#FFCC33",
+                    },
+                  },
+                },
+                {
+                  name: "完整性<60%",
+                  yAxis: 60,
+                  lineStyle: {
+                    color: "#CC0000",
+                  },
+                  label: {
+                    position: "middle",
+                    formatter: "{b}",
+                    textStyle: {
+                      color: "#CC0000",
+                    },
+                  },
+                },
+              ],
+            },
+            // data: this.ydata
+            data: integrityData,
+          },
+        ],
+      };
+      option && myChart2.setOption(option, true);
+      //window.echartsArr.push(myChart2);
+      setTimeout(function () {
+        myChart2.resize();
+      }, 0);
+    },
+  },
+  beforeDestroy() {
+    for (let i = 1; i < 10000; i++) {
+      clearInterval(i);
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+// @import url("../css/home.less");
+@font-face {
+  font-family: sszh;
+  src: url("../fonts/sszh.ttf");
+  /* IE9+ */
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+
+  .boxTop {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 8%;
+    font-family: "\5FAE\8F6F\96C5\9ED1";
+    font-size: 0.85rem;
+    line-height: 8%;
+    letter-spacing: 1px;
+    color: #07d8fd;
+    cursor: pointer;
+    background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
+
+    .img {
+      height: 100%;
+      padding: 0 1.5%;
+      cursor: pointer;
+    }
+
+    .total {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      font-size: 0.85rem;
+      color: rgb(0, 255, 0);
+      transform: translate(-50%, -50%);
+
+      span {
+        font-family: electricFont;
+        font-size: 1.3rem;
+        color: #07d8fd;
+      }
+    }
+  }
+
+  .boxBot {
+    height: 90%;
+    // background-color: rgb(41, 16, 16);
+  }
+}
+</style>

src/views/center/components/tHDistortion.vue

@@ -0,0 +1,335 @@
+<template>
+  <div class="box">
+    <Timeinterval ref="Timeinterval" :interval="3" v-show="false"></Timeinterval>
+    <div class="boxTop">
+      <img class="img" src="../images/d045d87176109fc1dfb3b09a583fea5.png" alt="" srcset="" />
+      <span>谐波畸变率排名</span>
+      <!-- <div class="total">
+          总计:<span>{{ total }}</span>
+        </div> -->
+    </div>
+    <div class="boxBot" ref="Echartspm">
+      <div id="echartpm" style="width: 100%; height: 100%" v-loading="isLoading"></div>
+    </div>
+  </div>
+</template>
+<script>
+import { getUserScale } from "@/api/center/DropEvent.js";
+import { getTHDTopTenData } from "@/api/homePage/index";
+import Timeinterval from "@/views/Timeinterval/index.vue";
+export default {
+  components: { Timeinterval },
+  props: {},
+  data() {
+    return {
+      zoom: undefined, //图表焦点校验
+      h: undefined,
+      isLoading: false,
+      total: 0,
+      myChart: null,
+      time: null,
+    };
+  },
+  created() { },
+
+  mounted() {
+    this.zoom = 1 / document.body.style.zoom;
+    window.addEventListener("resize", () => {
+      this.zoom = 1 / document.body.style.zoom;
+    });
+    this.$nextTick(() => {
+      this.province();
+      setInterval(() => {
+        clearInterval(this.time);
+
+        this.province();
+      }, 60000 * 5);
+    });
+  },
+
+  methods: {
+    //echarts图
+    async province() {
+      let name = [];
+      let vthd = [];
+      let transformerSubstation = [];
+      await getTHDTopTenData({
+        id: JSON.parse(window.localStorage.getItem("adminInfo")).deptId,
+        startTime: this.$refs.Timeinterval.timeValue[0],
+        endTime: this.$refs.Timeinterval.timeValue[1],
+        type: 3,
+      }).then((res) => {
+        res.data.forEach((item) => {
+          if (item.vthd) {
+            name.push(item.name);
+            transformerSubstation.push(item.subStationName)
+            vthd.push(item.vthd);
+          }
+        });
+      });
+
+      this.isLoading = true;
+
+      // const data = await getUserScale();
+      let _this = this;
+      let echarts = require("echarts");
+      let domID1 = document.getElementById("echartpm");
+      setTimeout(() => {
+        (domID1.style.width = this.$refs.Echartspm.offsetWidth + "px"),
+          (domID1.style.height = this.$refs.Echartspm.offsetHeight + "px");
+      }, 0);
+      if (_this.myChart != null) {
+        _this.myChart.dispose();
+      }
+      _this.myChart = echarts.init(domID1);
+      this.isLoading = false;
+      let option = {
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(8,36,68,.7)",
+          color: "#00ffff",
+          textStyle: {
+            color: "#00ffff",
+          },
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+          formatter: function (params) {
+
+            var tips = "";
+            let index = name.indexOf(params[0].name)
+            tips += '监测点' + "："+ params[0].name + "</br/>";
+            tips += '变电站' + "：" + transformerSubstation[index] + "<br/>";
+            tips += params[0].seriesName + "：" + params[0].value + "%<br/>";
+            return tips;
+          },
+        },
+        grid: {
+          top: "40px", // 等价于 y: '16%'
+          left: "50px",
+          right: "55px",
+          bottom: "50px",
+        },
+        legend: {
+          top: "4%",
+          left: "center",
+          itemWidth: 13,
+          itemHeight: 13,
+          itemStyle: {
+            color: "#00ffff",
+          },
+          icon: "rect",
+          padding: 0,
+          textStyle: {
+            color: "#03E9FF",
+            fontSize: 12,
+            padding: [2, 0, 0, 0],
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: name,
+          name: "监测点",
+          nameTextStyle: {
+            color: "#07FCF0",
+            // top:'5%',
+            fontSize: 12,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#00ffff",
+            },
+          },
+          axisTick: {
+            show: false,
+
+            alignWithLabel: true,
+            lineStyle: {
+              color: "#00ffff",
+            },
+          },
+          axisLabel: {
+            color: "#00ffff",
+            // interval: 0,
+            rotate: 45,
+            formatter: function (name) {
+              //超出部分隐藏显示
+              return name.length > 6 ? name.slice(0, 3) + "..." : name;
+            },
+            interval: 0,
+          },
+        },
+
+        yAxis: [
+          {
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#00ffff",
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#00ffff",
+              },
+            },
+            splitLine: {
+              //分割线配置
+              lineStyle: {
+                type: "dashed",
+                color: "#00ffff",
+              },
+            },
+          },
+          {
+            name: "单位:%",
+            nameTextStyle: {
+              color: "#00ffff",
+
+              fontSize: 12,
+            },
+            position: "right",
+            //right:'15%',
+            axisLine: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "谐波畸变率",
+            type: "bar",
+            barWidth: "20",
+            label: {
+              show: true,
+              position: "top",
+              color: "#fff",
+            },
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#80ff09",
+                  },
+                  {
+                    offset: 1,
+                    color: "#05fffa",
+                  },
+                ]),
+              },
+            },
+            data: vthd,
+          },
+        ],
+      };
+      //   // _this.myChart.resize();
+      //   let _this = this;
+      //   _this.$erd.listenTo(_this.$refs.fg, (element) => {
+      //     _this.$nextTick(() => {
+      //       _this.myChart.resize();
+      //     });
+      //   });
+      //   window.onresize = function () {
+      //     _this.myChart.resize();
+      //   };
+      option && _this.myChart.setOption(option, true);
+      //window.echartsArr.push(_this.myChart);
+
+      setTimeout(function () {
+        _this.myChart.resize();
+        let app = {
+          currentIndex: -1,
+        };
+
+        _this.time = setInterval(function () {
+          var dataLen = option.series[0].data.length;
+
+          // 取消之前高亮的图形
+          _this.myChart.dispatchAction({
+            type: "downplay",
+            seriesIndex: 0,
+            dataIndex: app.currentIndex,
+          });
+          app.currentIndex = (app.currentIndex + 1) % dataLen;
+          // 高亮当前图形
+          _this.myChart.dispatchAction({
+            type: "highlight",
+            seriesIndex: 0,
+            dataIndex: app.currentIndex,
+          });
+          // 显示 tooltip
+          _this.myChart.dispatchAction({
+            type: "showTip",
+            seriesIndex: 0,
+            dataIndex: app.currentIndex,
+          });
+        }, 2000);
+      }, 0);
+    },
+  },
+  beforeDestroy() {
+    for (let i = 1; i < 10000; i++) {
+      clearInterval(i);
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+// @import url("../css/home.less");
+@font-face {
+  font-family: sszh;
+  src: url("../fonts/sszh.ttf");
+  /* IE9+ */
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+
+  .boxTop {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 8%;
+    font-family: "\5FAE\8F6F\96C5\9ED1";
+    font-size: 0.85rem;
+    line-height: 8%;
+    letter-spacing: 1px;
+    color: #07d8fd;
+    cursor: pointer;
+    background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
+
+    .img {
+      height: 100%;
+      padding: 0 1.5%;
+      cursor: pointer;
+    }
+
+    .total {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      font-size: 0.85rem;
+      color: rgb(0, 255, 0);
+      transform: translate(-50%, -50%);
+
+      span {
+        font-family: electricFont;
+        font-size: 1.3rem;
+        color: #07d8fd;
+      }
+    }
+  }
+
+  .boxBot {
+    height: 90%;
+    // background-color: rgb(41, 16, 16);
+  }
+}
+</style>

src/views/center/css/change.css

@@ -0,0 +1,105 @@
+.logo {
+  font-size: 17px !important;
+}
+.main-tit {
+  font-size: 14px;
+}
+.menu-tit {
+  font-size: 14px;
+}
+.main-con {
+  font-size: 10px !important;
+  font-family: 'Microsoft YaHei';
+}
+.big-num {
+  font-size: 14px;
+}
+.spe-border {
+  height: 100%;
+  background: linear-gradient(to left, #00bf8f, #00bf8f) left top no-repeat, linear-gradient(to bottom, #00bf8f, #00bf8f) left top no-repeat, linear-gradient(to left, #00bf8f, #00bf8f) right top no-repeat, linear-gradient(to bottom, #00bf8f, #00bf8f) right top no-repeat, linear-gradient(to left, #00bf8f, #00bf8f) left bottom no-repeat, linear-gradient(to bottom, #00bf8f, #00bf8f) left bottom no-repeat, linear-gradient(to left, #00bf8f, #00bf8f) right bottom no-repeat, linear-gradient(to left, #00bf8f, #00bf8f) right bottom no-repeat;
+  background-size: 1px 5px, 5px 1px, 1px 5px, 5px 1px;
+}
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #617d96;
+  border-radius: 3px;
+  height: 5px !important;
+}
+/* IE 浏览器 */
+.scrollbar {
+  /*三角箭头的颜色*/
+  scrollbar-arrow-color: #fff;
+  /*滚动条滑块按钮的颜色*/
+  scrollbar-face-color: #0099dd;
+  /*滚动条整体颜色*/
+  scrollbar-highlight-color: #0099dd;
+  /*滚动条阴影*/
+  scrollbar-shadow-color: #0099dd;
+  /*滚动条轨道颜色*/
+  scrollbar-track-color: #0066ff;
+  /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
+  scrollbar-3dlight-color: #0099dd;
+  /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
+  scrollbar-darkshadow-color: #0099dd;
+  /*滚动条基准颜色*/
+  scrollbar-base-color: #0099dd;
+}
+.yellow {
+  color: #F7C709;
+}
+.yellow-bg {
+  background-color: #f7c709;
+}
+.red {
+  color: #EE1111;
+}
+.red-bg {
+  background-color: #ee1111;
+}
+.blue {
+  color: #1196EE;
+}
+.blue-bg {
+  background-color: #1196ee;
+}
+.green {
+  color: #11ee6d;
+}
+.green-bg {
+  background-color: #11ee5b;
+}
+@keyframes pointer {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  15% {
+    opacity: 1;
+    transform: scale(1.25);
+  }
+  30% {
+    opacity: 0.8;
+    transform: scale(1.5);
+  }
+  45% {
+    opacity: 0.8;
+    transform: scale(2);
+  }
+  60% {
+    opacity: 0.8;
+    transform: scale(2);
+  }
+  75% {
+    opacity: 1;
+    transform: scale(1.5);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.point-ani {
+  animation: pointer 3s linear infinite;
+}

src/views/center/css/change.less

@@ -0,0 +1,97 @@
+// 字体篇
+.logo{
+  font-size: 17px !important;
+}
+.main-tit{
+  font-size: 14px;
+}
+.menu-tit{
+  font-size: 14px;
+}
+.main-con{
+  font-size: 10px !important;
+  font-family: 'Microsoft YaHei';
+}
+.big-num{
+  font-size: 14px;
+}
+.spe-border{
+  height: 100%;
+  background: linear-gradient(to left, #00bf8f, #00bf8f) left top no-repeat, 
+              linear-gradient(to bottom, #00bf8f, #00bf8f) left top no-repeat, 
+              linear-gradient(to left, #00bf8f, #00bf8f) right top no-repeat,
+              linear-gradient(to bottom, #00bf8f, #00bf8f) right top no-repeat, 
+              linear-gradient(to left, #00bf8f, #00bf8f) left bottom no-repeat,
+              linear-gradient(to bottom, #00bf8f, #00bf8f) left bottom no-repeat,
+              linear-gradient(to left, #00bf8f, #00bf8f) right bottom no-repeat,
+              linear-gradient(to left, #00bf8f, #00bf8f) right bottom no-repeat;
+  background-size: 1px 5px, 5px 1px, 1px 5px, 5px 1px;
+}
+//滚动条的宽度
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+// 滚动条的滑块
+::-webkit-scrollbar-thumb {
+  background-color: #617d96;
+  border-radius: 3px;
+  height: 5px !important;
+}
+
+/* IE 浏览器 */
+.scrollbar {
+  /*三角箭头的颜色*/
+  scrollbar-arrow-color: #fff;
+  /*滚动条滑块按钮的颜色*/
+  scrollbar-face-color: #0099dd;
+  /*滚动条整体颜色*/
+  scrollbar-highlight-color: #0099dd;
+  /*滚动条阴影*/
+  scrollbar-shadow-color: #0099dd;
+  /*滚动条轨道颜色*/
+  scrollbar-track-color: #0066ff;
+  /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
+  scrollbar-3dlight-color: #0099dd;
+  /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
+  scrollbar-darkshadow-color: #0099dd;
+  /*滚动条基准颜色*/
+  scrollbar-base-color: #0099dd;
+}
+.yellow{
+  color: #F7C709;
+}
+.yellow-bg{
+  background-color: rgb(247,199,9);
+}
+.red{
+  color: #EE1111;
+}
+.red-bg{
+  background-color: rgb(238,17,17);
+}
+.blue{
+  color: #1196EE;
+}
+.blue-bg{
+  background-color: rgb(17,150,238);
+}
+.green{
+  color: #11ee6d;
+}
+.green-bg{
+  background-color: rgb(17, 238, 91);
+}
+@keyframes pointer
+  {
+    0%   {opacity: 1;transform:scale(1);}
+    15%  {opacity: 1;transform:scale(1.25);}
+    30%  {opacity: 0.8;transform:scale(1.5);}
+    45% {opacity: 0.8;transform:scale(2);}
+    60%   {opacity: 0.8;transform:scale(2);}
+    75%  {opacity: 1;transform:scale(1.5);}
+    100% {opacity: 1;transform:scale(1);}
+  }
+.point-ani{
+  animation: pointer 3s linear infinite;
+}

src/views/center/css/commonStyle.css

@@ -0,0 +1,736 @@
+.aside-submenu-title {
+  background-color: rgba(5, 16, 16, 0.48) !important;
+}
+#app {
+  font-family: 'Microsoft YaHei', 'Avenir', Helvetica, Arial, sans-serif;
+}
+.el-main > div:nth-child(1) > div:nth-child(1) {
+  text-align: center;
+  margin-bottom: 48px;
+  font-weight: bold;
+  font-size: 18px;
+}
+body .el-table th.gutter {
+  display: table-cell !important;
+}
+.el-table th,
+.el-table {
+  background-color: #153741 !important;
+  color: #35b1b7;
+}
+.el-table th {
+  padding: 4px 0 !important;
+}
+.el-table__expand-icon {
+  color: #fff !important;
+}
+.el-table-column--selection > div {
+  text-align: left !important;
+}
+.el-table--border,
+.el-table--group {
+  border: 1px solid #446575;
+  /*no*/
+}
+.el-table tbody td .cell {
+  margin-right: 12px;
+}
+.el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  background-color: #ebeef500;
+}
+.el-table th div {
+  text-align: center;
+}
+.el-table__empty-text,
+.el-table td {
+  color: #e2e6ec;
+}
+.el-table td,
+.el-table th.is-leaf {
+  border-right: 1px solid #446575;
+  /*no*/
+  border-bottom: 1px solid #446575;
+  /*no*/
+}
+.el-table__row > td {
+  border: none;
+  border-right: 1px solid #446575;
+  /*no*/
+  border-bottom: 1px solid #446575;
+  /*no*/
+}
+.el-table::before {
+  height: 0px;
+  color: #446575;
+}
+.el-table,
+.el-table__expanded-cell {
+  background-color: transparent !important;
+}
+el-table th,
+.el-table tr,
+.el-table td {
+  background-color: transparent !important;
+}
+.el-table td {
+  padding: 5px 0px !important;
+}
+.el-table tbody tr:hover > td {
+  background-color: #367f7f78 !important;
+}
+.el-table__row--striped td {
+  background-color: #45797b33 !important;
+}
+.el-table__row:not(.el-table__row--striped) {
+  background: #1439391c !important;
+}
+.el-table .el-button {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+.el-table .ascending .sort-caret.ascending {
+  border-bottom-color: #34d2d2 !important;
+}
+.el-table .descending .sort-caret.descending {
+  border-top-color: #34d2d2 !important;
+}
+.el-table .el-table tr th::before {
+  display: none;
+}
+.el-table .el-table {
+  margin: 20px 20px 20px 46px;
+  width: 95%;
+}
+.el-table .el-table th {
+  background-color: #1a3968 !important;
+  color: #a3a8e6 !important;
+}
+.el-input.is-disabled .el-input__inner,
+.el-range-editor.is-disabled,
+.el-range-editor.is-disabled input,
+.is-disabled .el-textarea__inner {
+  color: #c8d4e4 !important;
+  background-color: #354460 !important;
+  border: none;
+}
+.is-disabled .el-range__icon {
+  color: #abb8ca;
+}
+.el-dialog {
+  background-color: rgba(12, 24, 49, 0.9) !important;
+  margin-top: 14vh;
+  margin: 14vh auto 0px !important;
+}
+.el-dialog .el-dialog__header {
+  border-bottom: 1px solid #40ffff59;
+  /*no*/
+}
+.el-dialog .el-dialog__header .el-dialog__title {
+  color: #d4e0f0;
+  font-weight: bold;
+}
+.el-dialog .el-dialog__body {
+  padding: 40px;
+}
+.el-dialog .el-dialog__body label {
+  color: #9acaf7;
+}
+.el-dialog .el-tree__empty-text {
+  color: #9acaf7;
+}
+.el-dialog .button-group {
+  text-align: right;
+  margin-top: 36px;
+}
+.el-dialog .el-table th {
+  background-color: #111d40;
+  color: #7788b9;
+  padding: 0px 0px !important;
+}
+.el-dialog .el-table__empty-text {
+  color: #7788b9;
+}
+.el-dialog .el-tree {
+  border: 1px solid #9acaf7;
+  /*no*/
+  border-radius: 7px;
+}
+.el-dialog .el-dialog__wrapper {
+  max-height: 98vh;
+}
+.el-message-box {
+  background-color: rgba(10, 18, 25, 0.9) !important;
+  border: none;
+}
+.el-message-box .el-message-box__title,
+.el-message-box .el-message-box__message {
+  color: #b2bece !important;
+}
+.el-transfer-panel {
+  background: #111d25 !important;
+}
+.el-transfer-panel .el-transfer-panel__header {
+  background: #21405d !important;
+}
+.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label,
+.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label span {
+  color: #a1d8f9 !important;
+}
+.el-transfer-panel__item {
+  display: block !important;
+}
+.el-button--primary {
+  background-color: #2b9999 !important;
+  border: none !important;
+  color: #FFF !important;
+}
+.el-button--primary:hover,
+.el-button--primary:focus {
+  background-color: #38cece !important;
+}
+.el-button--danger {
+  background-color: #9e1e01 !important;
+  border: none;
+}
+.el-button--warning.is-disabled,
+.el-button--primary.is-disabled,
+.el-button--danger.is-disabled,
+.el-button--danger.is-disabled:active,
+.el-button--danger.is-disabled:focus,
+.el-button--danger.is-disabled:hover,
+.el-button--warning.is-disabled:active,
+.el-button--warning.is-disabled:focus,
+.el-button--warning.is-disabled:hover,
+.el-button--primary.is-disabled:active,
+.el-button--primary.is-disabled:focus,
+.el-button--primary.is-disabled:hover {
+  background-color: #929292 !important;
+  border: none;
+}
+.el-button--warning {
+  background-color: #b4843c !important;
+  border: none;
+}
+.el-button--warning:hover {
+  background-color: #e4a84f !important;
+  border: none;
+}
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #617d96;
+  border-radius: 3px;
+  height: 5px !important;
+}
+/* IE 浏览器 */
+.scrollbar {
+  /*三角箭头的颜色*/
+  scrollbar-arrow-color: #fff;
+  /*滚动条滑块按钮的颜色*/
+  scrollbar-face-color: #0099dd;
+  /*滚动条整体颜色*/
+  scrollbar-highlight-color: #0099dd;
+  /*滚动条阴影*/
+  scrollbar-shadow-color: #0099dd;
+  /*滚动条轨道颜色*/
+  scrollbar-track-color: #0066ff;
+  /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
+  scrollbar-3dlight-color: #0099dd;
+  /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
+  scrollbar-darkshadow-color: #0099dd;
+  /*滚动条基准颜色*/
+  scrollbar-base-color: #0099dd;
+}
+.el-pagination {
+  margin-top: 10px;
+  text-align: right;
+}
+.el-pagination .el-input {
+  width: 60% !important;
+}
+.el-pagination .el-input .el-input__inner {
+  color: #b2bece !important;
+  background-color: #ffffff00 !important;
+}
+.el-pagination .el-pagination__total,
+.el-pagination .el-select .el-input .el-select__caret,
+.el-pagination .btn-prev,
+.el-pagination .btn-next {
+  color: #b2bece !important;
+}
+.el-pagination .el-dialog,
+.el-pagination .el-pager li,
+.el-pagination button:disabled,
+.el-pagination .btn-prev,
+.el-pagination .btn-next {
+  background-color: transparent !important;
+}
+.el-pagination .el-pager li {
+  color: #b2bece !important;
+}
+.el-pagination .el-pager .active {
+  color: #09e8e8 !important;
+}
+.el-loading-mask {
+  background-color: rgba(13, 26, 40, 0.8) !important;
+}
+.select-view {
+  margin-top: 16px;
+}
+.select-view .echart-icon:hover {
+  border: 1px solid #19f602 !important;
+  /*no*/
+  width: 27px;
+  height: 27px;
+  border: 1px solid #8a8a8a;
+  /*no*/
+  vertical-align: middle;
+  background-position: 4px 4px;
+  background-size: 60%;
+  margin-right: 0px;
+  cursor: pointer;
+  display: inline-block;
+  margin-left: -5px;
+}
+.select-view .echart-icon-active {
+  border: 1px solid #19f602 !important;
+  /*no*/
+}
+.select-view .table-icon:hover {
+  border: 1px solid #19f602 !important;
+  /*no*/
+  width: 27px;
+  height: 27px;
+  border: 1px solid #8a8a8a;
+  /*no*/
+  vertical-align: middle;
+  background-position: 4px 4px;
+  background-size: 60%;
+  margin-right: 0px;
+  cursor: pointer;
+  display: inline-block;
+  margin-left: -5px;
+}
+.select-view .table-icon-active {
+  border: 1px solid #19f602 !important;
+  /*no*/
+}
+.select-view .change-icon {
+  width: 27px;
+  height: 27px;
+  border: 1px solid #8a8a8a;
+  /*no*/
+  vertical-align: middle;
+  background-position: 4px 4px;
+  background-size: 60%;
+  margin-right: 0px;
+  cursor: pointer;
+  display: inline-block;
+  margin-left: -5px;
+}
+.block {
+  border: 1px solid #2c667e;
+  /*no*/
+  padding: 15px 10px 10px;
+  border-radius: 5px;
+  position: relative;
+  height: 100%;
+}
+.block .block-title {
+  position: absolute;
+  background-color: #153a38d9;
+  padding: 5px 10px;
+  color: #c1ffe9;
+  top: -14px;
+  border-radius: 5px;
+}
+.block .empty-text {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  color: #909399;
+}
+.el-input__inner {
+  background-color: transparent !important;
+  color: #b2bece;
+}
+.el-textarea__inner {
+  color: #b2bece !important;
+}
+.el-select .el-input.is-focus .el-input__inner,
+.el-input.is-focus,
+.el-input__inner:focus-within {
+  border-color: #40ffff !important;
+}
+.el-form-item.is-error .el-input__inner,
+.el-form-item.is-error .el-input__inner:focus,
+.el-form-item.is-error .el-textarea__inner,
+.el-form-item.is-error .el-textarea__inner:focus,
+.el-message-box__input input.invalid,
+.el-message-box__input input.invalid:focus {
+  border-color: #F56C6C !important;
+}
+.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
+  background-color: #1d2a46 !important;
+}
+.el-select-dropdown,
+.el-picker-panel,
+.el-dropdown-menu {
+  background-color: #1d2a46 !important;
+  border: 1px solid #40ffff;
+  /*no*/
+}
+.el-tag.el-tag--info {
+  background-color: #2b9999 !important;
+  border-color: #06f3d2 !important;
+  color: #ffffff !important;
+}
+.el-select-dropdown__item,
+.el-dropdown-menu__item {
+  color: #b2bece !important;
+}
+.el-select-dropdown__item.hover,
+.el-tree-node__content:hover,
+.el-dropdown-menu__item:hover {
+  background-color: #145e5e !important;
+}
+.el-tree-node__content {
+  background: transparent !important;
+}
+.is-current > .el-tree-node__content,
+.is-current > .el-tree-node__content:focus {
+  background-color: #247676 !important;
+}
+.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
+  background-color: #2f3235;
+}
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #0dcac1;
+  border-color: #dfefed;
+}
+.el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #0be9ff;
+}
+input::-webkit-input-placeholder {
+  color: #787b80 !important;
+}
+input::-moz-input-placeholder {
+  color: #787b80 !important;
+}
+input::-ms-input-placeholder {
+  color: #787b80 !important;
+}
+.el-time-spinner__item {
+  height: auto !important;
+}
+.el-picker-panel {
+  color: #afb9b9 !important;
+}
+.time-select-item.selected:not(.disabled) {
+  color: #32fbf2 !important;
+}
+.time-select-item:hover {
+  background-color: #12504d !important;
+}
+.el-date-table td.today span {
+  color: #00fff3 !important;
+}
+.el-date-table td.disabled div {
+  background-color: #1d2a46;
+  color: #616263;
+}
+.el-date-table td.disabled div span {
+  color: #616263 !important;
+}
+.el-time-range-picker__header {
+  color: #e4e4e4 !important;
+}
+.el-time-spinner__item.disabled {
+  color: #575e6d !important;
+}
+.el-picker-panel__body-wrapper span,
+.el-picker-panel__body-wrapper a {
+  color: #b2bece !important;
+}
+.el-range-editor.is-active,
+.el-range-editor.is-active:hover {
+  border-color: #40ffff;
+}
+.el-range-input {
+  background: transparent;
+  color: #b2bece !important;
+}
+.el-date-editor .el-range-separator,
+.el-date-range-picker__header div {
+  color: #b2bece;
+}
+.el-picker-panel__footer {
+  background: transparent;
+}
+.el-picker-panel__footer .el-button--text {
+  color: #40ffff;
+}
+.el-picker-panel__footer .el-button--default {
+  background: #2b9494;
+  border: none;
+}
+.el-picker-panel__footer .el-button--default span {
+  color: #fff;
+}
+.el-picker-panel__footer .el-button.is-plain:focus,
+.el-picker-panel__footer .el-button.is-plain:hover {
+  background: #1a5c5c !important;
+  border: none;
+}
+.el-select-dropdown__item.selected,
+.el-month-table td .cell:hover,
+.current a {
+  color: #40ffff !important;
+}
+.el-date-picker__header {
+  padding-bottom: 2px;
+  margin: 3px !important;
+  border-bottom: solid 1px #40ffff;
+  /*no*/
+}
+.el-picker-panel__content th {
+  color: #b2bece !important;
+}
+.el-picker-panel__content .el-date-table td.in-range div {
+  background-color: #13969647;
+}
+.el-picker-panel__content .el-date-table td.end-date span,
+.el-picker-panel__content .el-date-table td.start-date span,
+.el-picker-panel__content .el-date-table td.current:not(.disabled) span {
+  background-color: #1d881b;
+}
+.el-button.is-disabled.is-plain,
+.el-button.is-disabled.is-plain:focus,
+.el-button.is-disabled.is-plain:hover {
+  background-color: #616868 !important;
+}
+.el-time-panel {
+  background-color: #1d2a46;
+}
+.el-time-panel__btn {
+  color: #40ffff !important;
+}
+.el-time-spinner__item {
+  color: #b2bece;
+}
+.el-time-spinner__item:not(.active):hover {
+  background-color: #2b9494 !important;
+}
+.el-time-spinner__item.active:not(.disabled) {
+  color: #40ffff;
+}
+.el-picker-panel__icon-btn {
+  color: #40ffff !important;
+}
+.popper__arrow::after {
+  border-bottom-color: #40ffff !important;
+}
+.el-tree {
+  background-color: transparent !important;
+  overflow-y: scroll;
+}
+.el-tree span {
+  color: #b2bece !important;
+}
+.el-textarea__inner {
+  background: transparent;
+}
+.el-radio {
+  color: #b2bece !important;
+}
+.is-checked .el-radio__inner {
+  border-color: #40ffff !important;
+  background: #40ffff !important;
+}
+.is-disabled .is-checked .el-radio__inner {
+  border-color: #7a8e8e !important;
+  background: #5a6363 !important;
+}
+.el-radio__input.is-checked + .el-radio__label {
+  color: #40ffff !important;
+}
+.is-disabled .el-radio__input.is-checked + .el-radio__label {
+  color: #b2bece !important;
+}
+.filter {
+  display: flex;
+  background-size: 28px;
+  padding-left: 40px;
+  border-bottom: 1px solid #2c667e;
+  /*no*/
+  padding-bottom: 10px;
+}
+.filter > div {
+  margin-right: 40px;
+  line-height: 36px;
+  font-size: 15px;
+}
+.menu-select-title {
+  height: 38px;
+  background-size: 46px 46px;
+  margin-bottom: 0.09375rem;
+  line-height: 46px;
+  padding-left: 13px;
+}
+.menu-select-title span {
+  margin-left: 24px;
+  border-bottom: 1px solid #2b6c09;
+  /*no*/
+  border-image: linear-gradient(to right, #00deff, #023c3e) 1 10 1;
+  border-image: -webkit-linear-gradient(to right, #00deff, #023c3e) 30 30;
+  border-image: -moz-linear-gradient(to right, #00deff, #023c3e) 30 30;
+  display: inline-block;
+  padding: 0 29px 0px 10px;
+  line-height: 26px;
+  color: #00d6ff;
+}
+.el-tooltip__popper.is-dark {
+  background: #2b3853d4;
+}
+.home-title {
+  background-size: 150px 35px;
+  height: 25px;
+  width: 100%;
+  color: #40ffff;
+  padding-left: 14px;
+  line-height: 25px;
+  background-position: -14px -4px;
+}
+.home-block {
+  position: relative;
+}
+.home-block > div:nth-child(1) {
+  background-size: 100% 100%;
+}
+.opacity1 {
+  animation: move_down 1s ease-in;
+  animation-fill-mode: forwards;
+}
+.opacity0 {
+  animation: move_top 1s ease-out;
+  animation-fill-mode: forwards;
+}
+@-webkit-keyframes move_top {
+  0% {
+    top: 0px;
+  }
+  100% {
+    top: -50px;
+    opacity: 0;
+  }
+}
+@keyframes move_top {
+  0% {
+    top: 0px;
+  }
+  100% {
+    top: -50px;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes move_down {
+  0% {
+    top: -60px;
+    opacity: 0;
+  }
+  100% {
+    top: 0px;
+    opacity: 1;
+  }
+}
+@keyframes move_down {
+  0% {
+    top: -60px;
+    opacity: 0;
+  }
+  100% {
+    top: 0px;
+    opacity: 1;
+  }
+}
+.el-input__inner,
+.el-checkbox__inner::after {
+  border-width: 1px !important;
+  /*no*/
+}
+.empty-text2 {
+  color: #e6e6e6;
+  margin-top: 17%;
+  margin-left: 27%;
+}
+.empty-text2::before {
+  content: "";
+  display: block;
+  background-size: 100% 100%;
+  width: 40px;
+  height: 40px;
+  text-align: center;
+}
+.empty-text2::after {
+  content: "暂无数据";
+}
+.rect-border {
+  background: rgba(18, 24, 26, 0.98);
+  border: 1px solid #075252;
+  padding: 15px;
+  position: relative;
+  display: block;
+}
+.rect-border .rect-border-title {
+  width: 200px;
+  height: 40px;
+  background-size: cover;
+  line-height: 40px;
+  padding-left: 38px;
+  margin-bottom: 5px;
+  color: #00ffd5;
+  text-align: left;
+}
+.rect-border .rect-border-title .icon {
+  color: #fffc00;
+  font-size: 16px;
+  padding-right: 5px;
+}
+.rect-border .close-icon {
+  float: right;
+  color: #00ffd5;
+  cursor: pointer;
+}
+.rect-border::before,
+.rect-border::after,
+.rect-border .border-foot::before,
+.rect-border .border-foot::after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  border: 1px solid #05e2e2;
+  box-shadow: 0px 0px 8px #11fec7;
+  background: rgba(18, 24, 26, 0.98);
+}
+.rect-border::before {
+  left: -3px;
+  top: -2px;
+}
+.rect-border::after {
+  right: -3px;
+  top: -2px;
+}
+.rect-border .border-foot::before {
+  left: -3px;
+  bottom: -2px;
+}
+.rect-border .border-foot::after {
+  right: -3px;
+  bottom: -2px;
+}

src/views/center/css/commonStyle.less

@@ -0,0 +1,943 @@
+//该文件为全局样式定义，方便统一系统风格
+
+@import '../css/themeMixin.less';
+@tableFontColor: #322550;
+#app{
+  font-family: 'Microsoft YaHei','Avenir', Helvetica, Arial, sans-serif;
+}
+
+//菜单内容标题样式
+.el-main>div:nth-child(1)>div:nth-child(1) {
+  text-align: center;
+  margin-bottom: 48px;
+  font-weight: bold;
+  font-size: 18px;
+}
+
+//表头样式
+body .el-table th.gutter{
+  display: table-cell!important;
+  }
+.el-table th,
+.el-table {
+  background-color: #153741 !important;
+  color: #35b1b7;
+}
+
+.el-table th {
+  padding: 4px 0 !important
+}
+
+.el-table__expand-icon {
+  color: #fff !important
+}
+
+.el-table-column--selection>div {
+  text-align: left !important;
+}
+
+.el-table--border,
+.el-table--group {
+  border: 1px solid #446575;
+  /*no*/
+}
+
+.el-table tbody td .cell {
+  margin-right: 12px;
+}
+
+.el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  background-color: #ebeef500;
+}
+
+.el-table th div {
+  text-align: center;
+}
+
+.el-table__empty-text,
+.el-table td {
+  color: #e2e6ec;
+}
+
+.el-table td,
+.el-table th.is-leaf {
+  // border-bottom: none;
+  border-right: 1px solid #446575;
+  /*no*/
+  border-bottom: 1px solid #446575;
+  /*no*/
+}
+
+.el-table__row>td {
+  border: none;
+  border-right: 1px solid #446575;
+  /*no*/
+  border-bottom: 1px solid #446575;
+  /*no*/
+}
+
+.el-table::before {
+  height: 0px;
+  color: #446575;
+}
+
+.el-table,
+.el-table__expanded-cell {
+  background-color: transparent !important;
+}
+
+el-table th,
+.el-table tr,
+.el-table td {
+  background-color: transparent !important;
+}
+
+.el-table td {
+  padding: 5px 0px !important
+}
+
+.el-table tbody tr:hover>td {
+  background-color: #367f7f78 !important
+}
+
+.el-table__row--striped td {
+  background-color: #45797b33 !important
+}
+
+.el-table__row:not(.el-table__row--striped) {
+  background: #1439391c !important;
+}
+
+.el-table {
+  .el-button {
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
+}
+
+
+.el-table .ascending .sort-caret.ascending {
+  border-bottom-color: #34d2d2 !important;
+}
+
+.el-table .descending .sort-caret.descending {
+  border-top-color: #34d2d2 !important;
+}
+
+//二级表格
+.el-table {
+  .el-table tr th::before {
+    display: none;
+  }
+
+  .el-table {
+    margin: 20px 20px 20px 46px;
+    width: 95%;
+
+    th {
+      background-color: #1a3968 !important;
+      color: #a3a8e6 !important;
+    }
+
+  }
+}
+
+//input框disabled样式
+
+
+.el-input.is-disabled .el-input__inner,
+.el-range-editor.is-disabled,
+.el-range-editor.is-disabled input,
+.is-disabled .el-textarea__inner {
+  color: #c8d4e4 !important;
+  background-color: #354460 !important;
+  border: none;
+}
+
+.is-disabled .el-range__icon {
+  color: #abb8ca;
+}
+
+//弹窗样式
+.el-dialog {
+  background-color: rgba(12, 24, 49, 0.9) !important;
+  margin-top: 14vh;
+  margin: 14vh auto 0px !important;
+
+  .el-dialog__header {
+    border-bottom: 1px solid #40ffff59;
+    /*no*/
+    ;
+
+    .el-dialog__title {
+      color: #d4e0f0;
+      font-weight: bold;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 40px;
+
+    label {
+      color: #9acaf7;
+    }
+  }
+
+  .el-tree__empty-text {
+    color: #9acaf7;
+  }
+
+  .button-group {
+    text-align: right;
+    margin-top: 36px;
+  }
+
+  .el-table th {
+    background-color: #111d40;
+    color: #7788b9;
+    padding: 0px 0px !important;
+  }
+
+  .el-table__empty-text {
+    color: #7788b9;
+  }
+
+  .el-tree {
+    border: 1px solid #9acaf7;
+    /*no*/
+    border-radius: 7px;
+  }
+
+  .el-dialog__wrapper {
+    max-height: 98vh;
+  }
+}
+
+.el-message-box {
+  background-color: rgba(10, 18, 25, 0.9) !important;
+  border: none;
+
+  .el-message-box__title,
+  .el-message-box__message {
+    color: #b2bece !important;
+  }
+}
+
+//穿梭框
+.el-transfer-panel {
+  background: #111d25 !important;
+}
+
+.el-transfer-panel .el-transfer-panel__header {
+  background: #21405d !important;
+}
+
+.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label,
+.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label span {
+  color: #a1d8f9 !important;
+}
+
+.el-transfer-panel__item {
+  display: block !important;
+}
+
+//button样式
+.el-button--primary {
+  background-color: #2b9999 !important;
+  border: none !important;
+  color: #FFF !important;
+
+  &:hover,
+  &:focus {
+    background-color: #38cece !important
+  }
+}
+
+.el-button--danger {
+  background-color: #9e1e01 !important;
+  border: none;
+}
+
+.el-button--warning.is-disabled,
+.el-button--primary.is-disabled,
+.el-button--danger.is-disabled,
+.el-button--danger.is-disabled:active,
+.el-button--danger.is-disabled:focus,
+.el-button--danger.is-disabled:hover,
+.el-button--warning.is-disabled:active,
+.el-button--warning.is-disabled:focus,
+.el-button--warning.is-disabled:hover,
+.el-button--primary.is-disabled:active,
+.el-button--primary.is-disabled:focus,
+.el-button--primary.is-disabled:hover {
+  background-color: #929292 !important;
+  border: none;
+}
+
+.el-button--warning {
+  background-color: #b4843c !important;
+  border: none;
+
+  &:hover {
+    background-color: #e4a84f !important;
+    border: none;
+  }
+}
+
+// .el-button:focus,
+// .el-button:hover {
+//   background-color: #44bf9d !important;
+// }
+
+//滚动条的宽度
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+// 滚动条的滑块
+::-webkit-scrollbar-thumb {
+  background-color: #617d96;
+  border-radius: 3px;
+  height: 5px !important;
+}
+
+/* IE 浏览器 */
+.scrollbar {
+  /*三角箭头的颜色*/
+  scrollbar-arrow-color: #fff;
+  /*滚动条滑块按钮的颜色*/
+  scrollbar-face-color: #0099dd;
+  /*滚动条整体颜色*/
+  scrollbar-highlight-color: #0099dd;
+  /*滚动条阴影*/
+  scrollbar-shadow-color: #0099dd;
+  /*滚动条轨道颜色*/
+  scrollbar-track-color: #0066ff;
+  /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
+  scrollbar-3dlight-color: #0099dd;
+  /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
+  scrollbar-darkshadow-color: #0099dd;
+  /*滚动条基准颜色*/
+  scrollbar-base-color: #0099dd;
+}
+
+
+//分页样式
+.el-pagination {
+  margin-top: 10px;
+  text-align: right;
+
+  .el-input {
+    width: 60% !important;
+
+    .el-input__inner {
+      color: #b2bece !important;
+      background-color: #ffffff00 !important;
+    }
+  }
+
+  .el-pagination__total,
+  .el-select .el-input .el-select__caret,
+  .btn-prev,
+  .btn-next {
+    color: #b2bece !important;
+  }
+
+  .el-dialog,
+  .el-pager li,
+  button:disabled,
+  .btn-prev,
+  .btn-next {
+    background-color: transparent !important;
+  }
+
+  .el-pager li {
+    color: #b2bece !important;
+  }
+
+  .el-pager .active {
+    color: #09e8e8 !important;
+  }
+}
+
+//页面loading样式
+.el-loading-mask {
+  background-color: rgba(13, 26, 40, 0.8) !important;
+}
+
+//折现图和表格切换
+.select-view {
+  margin-top: 16px;
+
+  .echart-icon {
+   // background: url("../../page/pageAssets/images/echart_grey.png") no-repeat;
+
+    &:hover {
+      .echart-icon-active;
+      .change-icon;
+    }
+  }
+
+  .echart-icon-active {
+   // background: url("../../page/pageAssets/images/echart_active.png") no-repeat;
+    border: 1px solid #19f602 !important;
+    /*no*/
+  }
+
+  .table-icon {
+    //background: url("../../page/pageAssets/images/table_grey.png") no-repeat;
+
+    &:hover {
+      .table-icon-active;
+      .change-icon;
+    }
+  }
+
+  .table-icon-active {
+   // background: url("../../page/pageAssets/images/table_active.png") no-repeat;
+    border: 1px solid #19f602 !important;
+    /*no*/
+  }
+
+  .change-icon {
+    width: 27px;
+    height: 27px;
+    border: 1px solid #8a8a8a;
+    /*no*/
+    vertical-align: middle;
+    background-position: 4px 4px;
+    background-size: 60%;
+    margin-right: 0px;
+    cursor: pointer;
+    display: inline-block;
+    margin-left: -5px;
+  }
+}
+
+//块状内容模块
+.block {
+  position: relative;
+  border: 1px solid #2c667e;
+  /*no*/
+
+  // border-image: linear-gradient(#7e74dd, #2e6125) 1 10 1;
+  padding: 15px 10px 10px;
+  border-radius: 5px;
+  position: relative;
+  height: 100%;
+
+  .block-title {
+    position: absolute;
+    background-color: #153a38d9;
+    padding: 5px 10px;
+    color: #c1ffe9;
+    top: -14px;
+    border-radius: 5px;
+  }
+
+  .empty-text {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    color: #909399;
+  }
+}
+
+//el-input样式
+.el-input__inner {
+  background-color: transparent !important;
+  color: #b2bece;
+}
+
+.el-textarea__inner {
+  color: #b2bece !important;
+}
+
+
+.el-select .el-input.is-focus .el-input__inner,
+.el-input.is-focus,
+.el-input__inner:focus-within {
+  border-color: #40ffff !important;
+}
+
+.el-form-item.is-error .el-input__inner,
+.el-form-item.is-error .el-input__inner:focus,
+.el-form-item.is-error .el-textarea__inner,
+.el-form-item.is-error .el-textarea__inner:focus,
+.el-message-box__input input.invalid,
+.el-message-box__input input.invalid:focus {
+  border-color: #F56C6C !important;
+}
+
+.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
+  background-color: #1d2a46 !important;
+}
+
+.el-select-dropdown,
+.el-picker-panel,
+.el-dropdown-menu {
+  background-color: #1d2a46 !important;
+  border: 1px solid #40ffff;
+  /*no*/
+}
+
+.el-tag.el-tag--info {
+  background-color: #2b9999 !important;
+  border-color: #06f3d2 !important;
+  color: #ffffff !important;
+}
+
+.el-select-dropdown__item,
+.el-dropdown-menu__item {
+  color: #b2bece !important;
+}
+
+.el-select-dropdown__item.hover,
+.el-tree-node__content:hover,
+.el-dropdown-menu__item:hover {
+  background-color: #145e5e !important;
+}
+
+.el-tree-node__content {
+  background: transparent !important;
+}
+
+
+.is-current>.el-tree-node__content,
+.is-current>.el-tree-node__content:focus {
+  background-color: #247676 !important;
+}
+
+.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
+  background-color: #2f3235;
+}
+
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #0dcac1;
+  border-color: #dfefed;
+}
+
+.el-checkbox__input.is-checked+.el-checkbox__label {
+  color: #0be9ff
+}
+
+
+//input框placeholder颜色
+input::-webkit-input-placeholder {
+  color: #787b80 !important;
+}
+
+input::-moz-input-placeholder {
+  color: #787b80 !important;
+}
+
+input::-ms-input-placeholder {
+  color: #787b80 !important;
+}
+
+//日期选择器
+.el-time-spinner__item {
+  height: auto !important
+}
+
+.el-picker-panel {
+  color: #afb9b9 !important;
+}
+
+.time-select-item.selected:not(.disabled) {
+  color: #32fbf2 !important;
+}
+
+.time-select-item:hover {
+  background-color: #12504d !important;
+}
+
+.el-date-table td.today span {
+  color: #00fff3 !important;
+}
+
+.el-date-table td.disabled div {
+  background-color: #1d2a46;
+  color: #616263;
+
+  span {
+    color: #616263 !important;
+  }
+}
+
+.el-time-range-picker__header {
+  color: #e4e4e4 !important;
+}
+
+.el-time-spinner__item.disabled {
+  color: #575e6d !important;
+}
+
+.el-picker-panel__body-wrapper span,
+.el-picker-panel__body-wrapper a {
+  color: #b2bece !important
+}
+
+.el-range-editor.is-active,
+.el-range-editor.is-active:hover {
+  border-color: #40ffff;
+}
+
+.el-range-input {
+  background: transparent;
+  color: #b2bece !important;
+}
+
+.el-date-editor .el-range-separator,
+.el-date-range-picker__header div {
+  color: #b2bece;
+}
+
+.el-picker-panel__footer {
+  background: transparent;
+
+  .el-button--text {
+    color: #40ffff;
+  }
+
+  .el-button--default {
+    background: #2b9494;
+    border: none;
+
+    span {
+      color: #fff;
+    }
+  }
+
+  .el-button.is-plain:focus,
+  .el-button.is-plain:hover {
+    background: #1a5c5c !important;
+    border: none;
+  }
+}
+
+.el-select-dropdown__item.selected,
+.el-month-table td .cell:hover,
+.current a {
+  color: #40ffff !important;
+}
+
+.el-date-picker__header {
+  padding-bottom: 2px;
+  margin: 3px !important;
+  border-bottom: solid 1px #40ffff;
+  /*no*/
+}
+
+.el-picker-panel__content th {
+  color: #b2bece !important
+}
+
+.el-picker-panel__content {
+  .el-date-table td.in-range div {
+    background-color: #13969647;
+  }
+
+  .el-date-table td.end-date span,
+  .el-date-table td.start-date span,
+  .el-date-table td.current:not(.disabled) span {
+    background-color: #1d881b;
+  }
+}
+
+.el-button.is-disabled.is-plain,
+.el-button.is-disabled.is-plain:focus,
+.el-button.is-disabled.is-plain:hover {
+  background-color: #616868 !important;
+}
+
+.el-time-panel {
+  background-color: #1d2a46;
+}
+
+.el-time-panel__btn {
+  color: #40ffff !important;
+}
+
+.el-time-spinner__item {
+  color: #b2bece;
+}
+
+.el-time-spinner__item:not(.active):hover {
+  background-color: #2b9494 !important;
+}
+
+.el-time-spinner__item.active:not(.disabled) {
+  color: #40ffff;
+}
+
+.el-picker-panel__icon-btn {
+  color: #40ffff !important;
+}
+
+.popper__arrow::after {
+  border-bottom-color: #40ffff !important;
+}
+
+.el-tree {
+  background-color: transparent !important;
+  overflow-y: scroll;
+
+  span {
+    color: #b2bece !important
+  }
+}
+
+.el-textarea__inner {
+  background: transparent;
+}
+
+//el-raidio
+.el-radio {
+  color: #b2bece !important
+}
+
+.is-checked .el-radio__inner {
+  border-color: #40ffff !important;
+  background: #40ffff !important;
+}
+
+.is-disabled .is-checked .el-radio__inner {
+  border-color: #7a8e8e !important;
+  background: #5a6363 !important;
+}
+
+.el-radio__input.is-checked+.el-radio__label {
+  color: #40ffff !important;
+}
+
+.is-disabled .el-radio__input.is-checked+.el-radio__label {
+  color: #b2bece !important;
+}
+
+//过滤片区
+.filter {
+  display: flex;
+  //background: url("../../page/pageAssets/images/filter.png") no-repeat;
+  background-size: 28px;
+  padding-left: 40px;
+  border-bottom: 1px solid #2c667e;
+  /*no*/
+  // border-image: linear-gradient(to right, #50d8ee, #665a05) 1 10 1;
+  padding-bottom: 10px;
+
+  &>div {
+    margin-right: 40px;
+    line-height: 36px;
+    font-size: 15px;
+  }
+}
+
+//树形菜单选择后名称片区
+.menu-select-title {
+  //background: url("../../page/pageAssets/images/location.png") no-repeat;
+  height: 38px;
+  background-size: 46px 46px;
+  margin-bottom: 0.09375rem;
+  line-height: 46px;
+  padding-left: 13px;
+
+  span {
+    margin-left: 24px;
+    border-bottom: 1px solid #2b6c09;
+    /*no*/
+    border-image: linear-gradient(to right, #00deff, #023c3e) 1 10 1;
+    border-image: -webkit-linear-gradient(to right, #00deff, #023c3e) 30 30;
+    border-image: -moz-linear-gradient(to right, #00deff, #023c3e) 30 30;
+    display: inline-block;
+    padding: 0 29px 0px 10px;
+    line-height: 26px;
+    color: #00d6ff;
+  }
+}
+
+//文字提示框
+.el-tooltip__popper.is-dark {
+  background: #2b3853d4;
+}
+
+.home-title {
+  //background: url("../../page/pageAssets/images/home_title.png") no-repeat 0 0;
+  background-size: 150px 35px;
+  height: 25px;
+  width: 100%;
+  color: #40ffff;
+  padding-left: 14px;
+  line-height: 25px;
+  background-position: -14px -4px;
+}
+
+.home-block {
+  // background-color: #0521494a;
+  position: relative;
+
+  &>div:nth-child(1) {
+    // background: url("../../page//pageAssets/images/border1.png") no-repeat;
+    background-size: 100% 100%;
+  }
+}
+
+//上边栏动画
+.opacity1 {
+  animation: move_down 1s ease-in;
+  animation-fill-mode: forwards;
+}
+
+.opacity0 {
+  animation: move_top 1s ease-out;
+  animation-fill-mode: forwards;
+}
+
+@-webkit-keyframes move_top {
+  0% {
+    top: 0px;
+  }
+
+  100% {
+    top: -50px;
+    opacity: 0;
+  }
+}
+
+@keyframes move_top {
+  0% {
+    top: 0px;
+  }
+
+  100% {
+    top: -50px;
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes move_down {
+  0% {
+    top: -60px;
+    opacity: 0;
+  }
+
+  100% {
+    top: 0px;
+    opacity: 1;
+  }
+}
+
+@keyframes move_down {
+  0% {
+    top: -60px;
+    opacity: 0;
+  }
+
+  100% {
+    top: 0px;
+    opacity: 1;
+  }
+}
+
+// 以下为兼容IE配置
+.el-input__inner,
+.el-checkbox__inner::after {
+  border-width: 1px !important;
+  /*no*/
+}
+
+
+//暂无数据
+.empty-text2 {
+  color: #e6e6e6;
+  margin-top: 17%;
+  margin-left: 27%;
+
+  &::before {
+    content: "";
+    display: block;
+    //background: url("../images/empty_icon.png") no-repeat;
+    background-size: 100% 100%;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+  }
+  &::after {
+    content: "暂无数据";
+  }
+}
+
+//四个角边框样式
+.rect-border {
+  background: rgba(18, 24, 26, 0.98);
+  //   min-width: 402px;
+  // min-height: 251px;
+  border: 1px solid #075252;
+  padding: 15px;
+  position: relative;
+  display: block;
+
+
+
+
+  .rect-border-title {
+    //background: url("../../page/pageAssets/images/box-title.png") no-repeat;
+    width: 200px;
+    height: 40px;
+    background-size: cover;
+    line-height: 40px;
+    padding-left: 38px;
+    margin-bottom: 5px;
+    color: #00ffd5;
+    text-align: left;
+
+    .icon {
+      color: rgb(255 252 0);
+      font-size: 16px;
+      padding-right: 5px;
+    }
+  }
+
+  .close-icon {
+    float: right;
+    color: #00ffd5;
+    cursor: pointer;
+  }
+
+  &::before,
+  &::after,
+  .border-foot::before,
+  .border-foot::after {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    width: 5px;
+    height: 5px;
+    border: 1px solid #05e2e2;
+    box-shadow: 0px 0px 8px #11fec7;
+    background: rgba(18, 24, 26, 0.98);
+  }
+
+  &::before {
+    left: -3px;
+    top: -2px;
+  }
+
+  &::after {
+    right: -3px;
+    top: -2px;
+  }
+
+  .border-foot::before {
+    left: -3px;
+    bottom: -2px;
+  }
+
+  .border-foot::after {
+    right: -3px;
+    bottom: -2px;
+  }
+}

src/views/center/css/home.less

@@ -0,0 +1,202 @@
+/* 定义 */
+@font-face {
+    font-family: "electricFont";
+    src: url("../fonts/digital-7.woff2") format("woff2"),
+        url("../fonts/digital-7.woff") format("woff"),
+        url("../fonts/digital-7.ttf") format("truetype"),
+        url("../fonts/digital-7.eot") format("embedded-opentype"),
+       // url(".../fonts/digital-7.svg") format("svg");
+}
+
+.actSty {
+    width: 25%;
+    height: 25%
+}
+
+#header {
+    position: fixed;
+    top: 0px;
+    width: 100%;
+    z-index: 2004;
+    height: 54px;
+}
+
+#homePage {
+    // background: url("../../../../static/imges/bg5.png") no-repeat;
+    // background-size: cover;
+
+    &>div:first-child {
+        margin-top: 0px;
+    }
+
+    .play-container-bug {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        top: 0px;
+        left: 0px;
+        z-index: 100;
+    }
+
+    .play-container {
+        position: fixed;
+        background: #14142dcc;
+        width: 100%;
+        height: 100%;
+        top: 0px;
+        left: 0px;
+        z-index: 99;
+
+        .play-content {
+            margin-top: 50px;
+            height: 100%;
+            margin-bottom: 50px;
+
+            .el-carousel--horizontal {
+                height: 100%;
+            }
+
+            .el-carousel__container {
+                height: 86% !important;
+            }
+        }
+    }
+
+    .home-content {
+        display: flex;
+        height: calc(100% - 65px);
+
+        .menu-left {
+            position: relative;
+            padding-top: 4%;
+            width: 3%;
+            overflow: hidden;
+
+            ul {
+                position: absolute;
+                top: 18%;
+                left: -34px;
+
+                li {
+                    list-style: none;
+                    color: #fff;
+                    margin-top: 3px;
+                    position: absolute;
+                    cursor: pointer;
+                    width: 25px;
+                    height: 110px;
+                    padding-left: 8px;
+                    padding-top: 25px;
+
+                    &:hover {
+                        color: #13e6e6
+                    }
+                }
+
+                span {
+                    display: inline-block;
+                    width: 10px;
+                    font-size: 0.3rem;
+                }
+
+                li:nth-child(1) {
+                  //  background: url("../images/menu-border1.png") no-repeat;
+                    background-size: 100% 91%;
+                    top: -46px;
+                    height: 70px;
+                    background-position-x: -2px;
+                }
+
+                li:nth-child(2) {
+                   // background: url("../images/menu-border1.png") no-repeat;
+                    top: 42px;
+                    background-size: 100% 91%;
+                    height: 92px;
+                    background-position-x: -2px;
+                    display: block;
+
+                    span {
+                        margin-top: -9px;
+                    }
+                }
+
+                li:nth-child(3) {
+                    //background: url("../images/menu-border1.png") no-repeat;
+                    top: 150px;
+                    padding-top: 20px;
+                    background-size: 100% 91%;
+                    height: 72px;
+                    background-position-x: -2px;
+                    display: block;
+                }
+            }
+        }
+
+        .content-left {
+            width: 25%;
+            height: 100%;
+
+            &>div {
+                width: 100%;
+                margin-top: 10px;
+            }
+
+        }
+
+        .content-center {
+            width: 25%;
+            height: 100%;
+            margin-left: 10%;
+            margin-right: 10%;
+
+            .center-item1 {
+                width: 100%;
+            }
+
+            .center-item2 {
+                width: 186%;
+                height: 70%;
+                margin-left: -45%;
+                margin-top: 20px;
+            }
+        }
+
+        .content-right {
+            width: 25%;
+            padding: 10px;
+            height: 100%;
+        }
+
+        .content-top {
+            margin-top: 10px;
+        }
+    }
+
+
+
+    .map {
+        width: 100%;
+        height: 100%;
+    }
+
+    .home-header {
+        position: relative;
+        width: 100%;
+
+        .img-left {
+            width: 30px;
+            height: 30px;
+            margin-top: 11px
+        }
+    }
+
+    .header-text {
+        width: 300px;
+        font-size: 0.5rem;
+        font-weight: bold;
+        color: #43a8bf;
+        position: absolute;
+        top: 14px;
+        left: 38px;
+    }
+}

src/views/center/css/themeMixin.less

@@ -0,0 +1,88 @@
+//该文件主要做主题颜色管理，方便后期换肤切换 
+@background-color-theme1: #23262b;
+@background-color-theme2: #23262b;
+@body-bg-color: #073158;
+@content-bg-color: #073158;
+@header-bg-color: rgba(41, 44, 74, 0.5);
+@aside-bg-color: rgba(11, 95, 95, 0.48);
+@aside-bg-color1: rgba(28, 43, 95, 0.88);
+@aside-submenu: rgba(5, 16, 16, 0.48);
+@font-color: #c3d5ea;
+
+//主页面整体背景颜色
+.body-bg-color-mixin() {
+  background-color: @body-bg-color  !important;
+  // background-image: radial-gradient(#133750, #291d3b);
+  background-image: radial-gradient(#20676e, #291d3b);
+  // background-image: radial-gradient(#20676e, #0d1619);
+
+  [data-theme="theme1"] & {
+    background-color: @background-color-theme1;
+  }
+
+  [data-theme="theme2"] & {
+    background-color: @background-color-theme2;
+  }
+}
+
+//主页面content背景颜色
+.content-bg-color-mixin() {
+  // background-color: transparent !important;
+
+  [data-theme="theme1"] & {
+    background-color: @background-color-theme1;
+  }
+
+  [data-theme="theme2"] & {
+    background-color: @background-color-theme2;
+  }
+}
+
+// 菜单header颜色
+.header-bg-color-mixin() {
+  background-color: @header-bg-color  !important;
+
+  [data-theme="theme1"] & {
+    background-color: @background-color-theme1;
+  }
+
+  [data-theme="theme2"] & {
+    background-color: @background-color-theme2;
+  }
+}
+
+//左侧menu菜单整体背景颜色
+.aside-bg-color-mixin() {
+  background-color: @aside-bg-color  !important;
+
+  [data-theme="theme1"] & {
+    background-color: @background-color-theme1;
+  }
+
+  [data-theme="theme2"] & {
+    background-color: @background-color-theme2;
+  }
+}
+
+//左侧menu一级菜单整体背景颜色
+.aside-level1-bg-color-mixin() {
+  background-color: @aside-bg-color1  !important;
+
+  [data-theme="theme1"] & {
+    background-color: @background-color-theme1;
+  }
+
+  [data-theme="theme2"] & {
+    background-color: @background-color-theme2;
+  }
+}
+
+//左侧菜单submenutitle颜色
+.aside-submenu-title {
+  background-color: @aside-submenu  !important;
+}
+
+//菜单字体颜色
+.font-color-mixin() {
+  color: @font-color  !important;
+}

src/views/center/fonts/digital-7.css

@@ -0,0 +1,12 @@
+@charset "UTF-8";
+
+@font-face {
+  font-family: "digital-7";
+  src: url("../fonts/digital-7.woff2") format("woff2"),
+       url("../fonts/digital-7.woff") format("woff"),
+       url("../fonts/digital-7.ttf") format("truetype"),
+       url("../fonts/digital-7.eot") format("embedded-opentype"),
+       url("../fonts/digital-7.svg") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}

src/views/center/fonts/digital-7.svg

@@ -0,0 +1,263 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+<metadata>
+Created by FontForge 20170924 at Wed Mar 23 16:17:49 2011
+ By www-data
+Created by Sizenko Alexander. (c) 2008 Style-7. All rights reserved. http://www.styleseven.com
+</metadata>
+<defs>
+<font id="Digital-7" horiz-adv-x="520" >
+  <font-face 
+    font-family="Digital-7"
+    font-weight="400"
+    font-stretch="normal"
+    units-per-em="1100"
+    panose-1="2 0 0 0 0 0 0 0 0 0"
+    ascent="880"
+    descent="-220"
+    x-height="710"
+    cap-height="720"
+    bbox="50 -120 550 840"
+    underline-thickness="70"
+    underline-position="-225"
+    unicode-range="U+0020-2030"
+  />
+<missing-glyph horiz-adv-x="580" 
+d="M460 0h-360q-40 10 -50 50l80 30h300zM430 640h-299l-80 30q10 40 50 50h359zM130 100l-80 -30v580l80 -30v-520zM530 50q-10 -40 -50 -50l-30 80v560l30 80q40 -10 50 -50v-620z" />
+    <glyph glyph-name=".notdef" horiz-adv-x="580" 
+d="M460 0h-360q-40 10 -50 50l80 30h300zM430 640h-299l-80 30q10 40 50 50h359zM130 100l-80 -30v580l80 -30v-520zM530 50q-10 -40 -50 -50l-30 80v560l30 80q40 -10 50 -50v-620z" />
+    <glyph glyph-name=".null" horiz-adv-x="0" 
+ />
+    <glyph glyph-name="nonmarkingreturn" horiz-adv-x="500" 
+ />
+    <glyph glyph-name="space" unicode=" " horiz-adv-x="300" 
+ />
+    <glyph glyph-name="exclam" unicode="!" horiz-adv-x="180" 
+d="M110 350l20 -20v-170h-80v130zM50 430v210l30 80q40 -10 50 -50v-280l-20 -20zM130 0h-80v80h80v-80z" />
+    <glyph glyph-name="quotedbl" unicode="&#x22;" horiz-adv-x="341" 
+d="M130 560l-40 -40l-40 40v160h80v-160zM291 561l-40 -40l-40 40v160h80v-160z" />
+    <glyph glyph-name="numbersign" unicode="#" horiz-adv-x="540" 
+d="M290 480l40 -40l-40 -40h-40l-40 40l40 40h40zM290 320l40 -40l-40 -40h-40l-40 40l40 40h40zM150 380l40 40l40 -40v-40l-40 -40l-40 40v40zM310 380l40 40l40 -40v-40l-40 -40l-40 40v40zM150 560l40 40l40 -40v-60l-40 -40l-40 40v60zM310 560l40 40l40 -40v-60
+l-40 -40l-40 40v60zM310 221l40 40l40 -40v-61l-40 -40l-40 40v61zM150 220l40 40l40 -40v-61l-40 -40l-40 40v61zM130 320l40 -40l-40 -40h-40l-40 40l40 40h40zM450 319l40 -40l-40 -40h-40l-40 40l40 40h40zM450 480l40 -40l-40 -40h-40l-40 40l40 40h40zM130 479l40 -40
+l-40 -40h-40l-40 40l40 40h40z" />
+    <glyph glyph-name="dollar" unicode="$" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM130 620v-190l-60 -60l-20 20v260zM131 640l-80 30q10 40 50 50h319q40 -10 50 -50l-80 -30h-259zM230 750v50l40 40l40 -40v-50
+h-80zM230 430v180h80v-180h-80zM230 110v180h80v-180h-80zM310 -30v-50l-40 -40l-40 40v50h80z" />
+    <glyph glyph-name="percent" unicode="%" horiz-adv-x="600" 
+d="M311 478l119 242q60 0 80 -40l-154 -310h-45v108zM289 242l-119 -242q-60 0 -80 40l154 310h45v-108zM190 640h-60l-80 30q10 40 50 50h120zM130 620v-60l-30 -80q-40 10 -50 50v120zM150 560h60l80 -30q-10 -40 -50 -50h-120zM210 580v60l30 80q40 -10 50 -50v-120z
+M470 100v60l30 80q40 -10 50 -50v-120zM450 160h-60l-80 30q10 40 50 50h120zM390 140v-60l-30 -80q-40 10 -50 50v120zM410 80h60l80 -30q-10 -40 -50 -50h-120z" />
+    <glyph glyph-name="ampersand" unicode="&#x26;" horiz-adv-x="560" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-230h-50l-30 30v160zM490 0h-390q-40 10 -50 50l80 30h320l60 -60zM50 70v260l20 20l60 -60v-190zM330 600h-160l-80 30q10 40 50 50h220zM170 580v-110l-60 -60l-20 20v180zM350 470v130l30 80
+q40 -10 50 -50v-200l-20 -20zM470 -20v-50l-20 -20l-60 60v10h80z" />
+    <glyph glyph-name="quotesingle" unicode="'" horiz-adv-x="180" 
+d="M130 560l-40 -40l-40 40v160h80v-160z" />
+    <glyph glyph-name="parenleft" unicode="(" horiz-adv-x="350" 
+d="M260 640h-110l-40 40l40 40h110l40 -40zM70 370l-20 20v230l50 50l30 -30v-210zM300 40l-40 -40h-110l-40 40l40 40h110zM130 290v-210l-30 -30l-50 50v230l20 20z" />
+    <glyph glyph-name="parenright" unicode=")" horiz-adv-x="350" 
+d="M90 80h110l40 -40l-40 -40h-110l-40 40zM280 350l20 -20v-230l-50 -50l-30 30v210zM50 680l40 40h110l40 -40l-40 -40h-110zM220 430v210l30 30l50 -50v-230l-20 -20z" />
+    <glyph glyph-name="asterisk" unicode="*" horiz-adv-x="430" 
+d="M175 430v80l40 40l40 -40v-80l70 40l55 -15l-15 -55l-69 -40l69 -40l15 -55l-55 -15l-70 40v-80l-40 -40l-40 40v80l-70 -40l-55 15l15 55l69 40l-69 40l-15 55l55 15z" />
+    <glyph glyph-name="plus" unicode="+" horiz-adv-x="440" 
+d="M180 400v90l40 40l40 -40v-90h90l40 -40l-40 -40h-90v-90l-40 -40l-40 40v90h-90l-40 40l40 40h90z" />
+    <glyph glyph-name="comma" unicode="," horiz-adv-x="180" 
+d="M130 -80l-40 -40l-40 40v160h80v-160z" />
+    <glyph glyph-name="hyphen" unicode="-" horiz-adv-x="440" 
+d="M350 400l40 -40l-40 -40h-260l-40 40l40 40h260z" />
+    <glyph glyph-name="period" unicode="." horiz-adv-x="180" 
+d="M130 0h-80v80h80v-80z" />
+    <glyph glyph-name="slash" unicode="/" 
+d="M271 478l119 242q60 0 80 -40l-154 -310h-45v108zM249 242l-119 -242q-60 0 -80 40l154 310h45v-108z" />
+    <glyph glyph-name="zero" unicode="0" 
+d="M450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM50 70v260l20 20l60 -60v-190zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
+    <glyph glyph-name="one" unicode="1" horiz-adv-x="180" 
+d="M110 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM50 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
+    <glyph glyph-name="two" unicode="2" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM430 0h-330q-40 10 -50 50l80 30h270zM50 70v260l20 20l60 -60v-190zM370 640h-239l-80 30q10 40 50 50h299zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
+    <glyph glyph-name="three" unicode="3" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM370 640h-239l-80 30q10 40 50 50h299zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
+    <glyph glyph-name="four" unicode="4" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM130 650v-220l-60 -60l-20 20v290zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
+    <glyph glyph-name="five" unicode="5" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM400 640h-269l-80 30q10 40 50 50h329zM130 620v-190l-60 -60l-20 20v260z" />
+    <glyph glyph-name="six" unicode="6" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM50 70v260l20 20l60 -60v-190zM400 640h-269l-80 30q10 40 50 50h329zM130 620v-190l-60 -60l-20 20v260z" />
+    <glyph glyph-name="seven" unicode="7" 
+d="M450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
+    <glyph glyph-name="eight" unicode="8" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM50 70v260l20 20l60 -60v-190zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80
+q40 -10 50 -50v-280l-20 -20z" />
+    <glyph glyph-name="nine" unicode="9" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
+    <glyph glyph-name="colon" unicode=":" horiz-adv-x="180" 
+d="M130 160h-80v80h80v-80zM130 480h-80v80h80v-80z" />
+    <glyph glyph-name="semicolon" unicode=";" horiz-adv-x="180" 
+d="M130 480h-80v80h80v-80zM130 -80l-40 -40l-40 40v160h80v-160z" />
+    <glyph glyph-name="less" unicode="&#x3c;" horiz-adv-x="370" 
+d="M160 370h-110l200 200h40l30 -39zM320 189l-30 -39h-40l-200 200h110z" />
+    <glyph glyph-name="equal" unicode="=" horiz-adv-x="440" 
+d="M350 480l40 -40l-40 -40h-260l-40 40l40 40h260zM350 319l40 -40l-40 -40h-260l-40 40l40 40h260z" />
+    <glyph glyph-name="greater" unicode="&#x3e;" horiz-adv-x="370" 
+d="M50 531l30 39h40l200 -200h-110zM210 350h110l-200 -200h-40l-30 39z" />
+    <glyph glyph-name="question" unicode="?" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM50 160v170l20 20l60 -60v-130h-80zM370 640h-239l-80 30q10 40 50 50h299zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM130 0h-80v80h80v-80z" />
+    <glyph glyph-name="at" unicode="@" 
+d="M450 350l20 -20v-120q-10 -40 -50 -50l-30 80v50zM400 0h-300q-40 10 -50 50l80 30h240zM50 70v260l20 20l60 -60v-190zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM400 160l-140 -1
+q-40 10 -50 50l80 31h80zM210 230v100l20 20l60 -60v-30zM290 460v-30l-60 -60l-20 20v100zM370 480h-80l-80 31q10 40 50 50l110 -1v-80z" />
+    <glyph glyph-name="A" unicode="A" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM130 290v-210l-30 -80q-40 10 -50 50v280
+l20 20z" />
+    <glyph glyph-name="B" unicode="B" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM50 70v260l20 20l60 -60v-190zM370 640h-240l-80 30v50h320l40 -40zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 30l50 -50v-230l-20 -20zM450 350l20 -20v-230l-50 -50l-30 30v210zM409 40l-40 -40h-319v50l80 30
+h239z" />
+    <glyph glyph-name="C" unicode="C" horiz-adv-x="480" 
+d="M430 0h-330q-40 10 -50 50l80 30h270zM50 70v260l20 20l60 -60v-190zM400 640h-269l-80 30q10 40 50 50h329zM130 620v-190l-60 -60l-20 20v260z" />
+    <glyph glyph-name="D" unicode="D" 
+d="M50 70v260l20 20l60 -60v-190zM370 640h-240l-80 30v50h320l40 -40zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 30l50 -50v-230l-20 -20zM450 350l20 -20v-230l-50 -50l-30 30v210zM409 40l-40 -40h-319v50l80 30h239z" />
+    <glyph glyph-name="E" unicode="E" horiz-adv-x="480" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM430 0h-330q-40 10 -50 50l80 30h270zM50 70v260l20 20l60 -60v-190zM400 640h-269l-80 30q10 40 50 50h329zM130 620v-190l-60 -60l-20 20v260z" />
+    <glyph glyph-name="F" unicode="F" horiz-adv-x="480" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM400 640h-269l-80 30q10 40 50 50h329zM130 620v-190l-60 -60l-20 20v260zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20z" />
+    <glyph glyph-name="G" unicode="G" 
+d="M390 400l40 -40l-40 -40h-90l-40 40l40 40h90zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM50 70v260l20 20l60 -60v-190zM400 640h-269l-80 30q10 40 50 50h329zM130 620v-190l-60 -60l-20 20v260z" />
+    <glyph glyph-name="H" unicode="H" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20zM70 360l-20 20v280q10 40 50 50l30 -80v-210z" />
+    <glyph glyph-name="I" unicode="I" horiz-adv-x="180" 
+d="M50 430v210l30 80q40 -10 50 -50v-280l-20 -20zM110 360l20 -20v-280q-10 -40 -50 -50l-30 80v210z" />
+    <glyph glyph-name="J" unicode="J" 
+d="M450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM50 70v260l20 20l60 -60v-190zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
+    <glyph glyph-name="K" unicode="K" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM150 480l240 240q60 0 80 -40l-260 -260h-60v60zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20zM70 370l-20 20v280q10 40 50 50l30 -80v-210z" />
+    <glyph glyph-name="L" unicode="L" 
+d="M130 290v-210l-30 -80q-40 10 -50 50v280l20 20zM150 80h240l80 -30q-10 -40 -50 -50h-300zM70 370l-20 20v280q10 40 50 50l30 -80v-210z" />
+    <glyph glyph-name="M" unicode="M" 
+d="M300 390l-40 -40l-40 40v230h80v-230zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20z" />
+    <glyph glyph-name="N" unicode="N" 
+d="M130 290v-210l-30 -80q-40 10 -50 50v280l20 20zM370 420h-70l-150 150v60h60l160 -160v-50zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM390 420v210l30 80q40 -10 50 -50v-280l-20 -20zM70 360l-20 20v280q10 40 50 50l30 -80v-210z" />
+    <glyph glyph-name="O" unicode="O" 
+d="M370 640h-220l-40 40l40 40h220l40 -40zM390 430v210l30 30l50 -50v-230l-20 -20zM450 350l20 -20v-230l-50 -50l-30 30v210zM70 370l-20 20v230l50 50l30 -30v-210zM410 40l-40 -40h-220l-40 40l40 40h220zM130 290v-210l-30 -30l-50 50v230l20 20z" />
+    <glyph glyph-name="P" unicode="P" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM370 640h-240l-80 30v50h320l40 -40zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 30l50 -50v-230l-20 -20zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20z" />
+    <glyph glyph-name="Q" unicode="Q" horiz-adv-x="530" 
+d="M450 350l20 -20v-240l-80 80v120zM380 0h-280q-40 10 -50 50l80 30h170zM50 70v260l20 20l60 -60v-190zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM290 180h60l130 -130v-60h-60l-130 130
+v60z" />
+    <glyph glyph-name="R" unicode="R" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM150 300h60l260 -260q-20 -40 -80 -40l-240 240v60zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20zM370 640h-239l-80 30q10 40 50 50h299zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM130 620v-190l-60 -60
+l-20 20v260z" />
+    <glyph glyph-name="S" unicode="S" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM130 620v-190l-60 -60l-20 20v260zM131 640l-80 30q10 40 50 50h319q40 -10 50 -50l-80 -30h-259z" />
+    <glyph glyph-name="T" unicode="T" horiz-adv-x="519" 
+d="M259 350l40 -40v-260q-10 -40 -50 -50l-30 80v230zM219 410v210h80v-210l-40 -40zM130 640l-80 30q10 40 50 50h319q40 -10 50 -50l-80 -30h-259z" />
+    <glyph glyph-name="U" unicode="U" 
+d="M450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM50 70v260l20 20l60 -60v-190zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM70 360l-20 20v280q10 40 50 50l30 -80v-210z" />
+    <glyph glyph-name="V" unicode="V" 
+d="M70 360l-20 20v280q10 40 50 50l30 -80v-210zM390 420v210l30 80q40 -10 50 -50v-280l-20 -20zM250 120v-120l-200 260v60l20 20l60 -60zM390 280l60 60l20 -20v-60l-200 -260v120z" />
+    <glyph glyph-name="W" unicode="W" 
+d="M300 100h-80v230l40 40l40 -40v-230zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM400 0h-299q-40 10 -50 50l80 30h239zM50 70v260l20 20l60 -60v-190zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM70 370l-20 20v280q10 40 50 50l30 -80v-210z" />
+    <glyph glyph-name="X" unicode="X" 
+d="M270 350h45l154 -310q-20 -40 -80 -40l-119 242v108zM271 478l119 242q60 0 80 -40l-154 -310h-45v108zM249 242l-119 -242q-60 0 -80 40l154 310h45v-108zM250 370h-45l-154 310q20 40 80 40l119 -243v-107z" />
+    <glyph glyph-name="Y" unicode="Y" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM130 650v-220l-60 -60l-20 20v290zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
+    <glyph glyph-name="Z" unicode="Z" 
+d="M430 0h-280l40 80h210zM330 640h-199l-80 30q10 40 50 50h269zM260 430l130 290q60 0 80 -40l-150 -310h-60v60zM270 290l-140 -290q-60 0 -80 40l160 310h60v-60z" />
+    <glyph glyph-name="bracketleft" unicode="[" horiz-adv-x="310" 
+d="M50 70v260l20 20l60 -60v-190zM200 640h-69l-80 30q10 40 50 50h139l20 -20zM130 620v-190l-60 -60l-20 20v260zM260 20l-20 -20h-139q-40 10 -50 50l80 30h69z" />
+    <glyph glyph-name="backslash" unicode="\" horiz-adv-x="518" 
+d="M269 350h45l154 -310q-20 -40 -80 -40l-119 242v108zM249 370h-45l-154 310q20 40 80 40l119 -243v-107z" />
+    <glyph glyph-name="bracketright" unicode="]" horiz-adv-x="310" 
+d="M240 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM160 640h-50l-60 60l20 20h120zM180 430v210l30 80q40 -10 50 -50v-280l-20 -20zM190 0h-120l-20 20l60 60h50z" />
+    <glyph glyph-name="asciicircum" unicode="^" horiz-adv-x="519" 
+d="M269 610v110l200 -200v-40l-39 -30zM89 450l-39 30v40l200 200l-1 -110z" />
+    <glyph glyph-name="underscore" unicode="_" horiz-adv-x="519" 
+d="M389 80l80 -30q-10 -40 -50 -50h-319q-40 10 -50 50l80 30h259z" />
+    <glyph glyph-name="grave" unicode="`" horiz-adv-x="280" 
+d="M230 610v-40l-40 -10l-140 140l10 40h40z" />
+    <glyph glyph-name="a" unicode="a" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM130 290v-210l-30 -80q-40 10 -50 50v280
+l20 20z" />
+    <glyph glyph-name="b" unicode="b" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM50 70v260l20 20l60 -60v-190zM370 640h-240l-80 30v50h320l40 -40zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 30l50 -50v-230l-20 -20zM450 350l20 -20v-230l-50 -50l-30 30v210zM409 40l-40 -40h-319v50l80 30
+h239z" />
+    <glyph glyph-name="c" unicode="c" horiz-adv-x="480" 
+d="M430 0h-330q-40 10 -50 50l80 30h270zM50 70v260l20 20l60 -60v-190zM400 640h-269l-80 30q10 40 50 50h329zM130 620v-190l-60 -60l-20 20v260z" />
+    <glyph glyph-name="d" unicode="d" 
+d="M50 70v260l20 20l60 -60v-190zM370 640h-240l-80 30v50h320l40 -40zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 30l50 -50v-230l-20 -20zM450 350l20 -20v-230l-50 -50l-30 30v210zM409 40l-40 -40h-319v50l80 30h239z" />
+    <glyph glyph-name="e" unicode="e" horiz-adv-x="480" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM430 0h-330q-40 10 -50 50l80 30h270zM50 70v260l20 20l60 -60v-190zM400 640h-269l-80 30q10 40 50 50h329zM130 620v-190l-60 -60l-20 20v260z" />
+    <glyph glyph-name="f" unicode="f" horiz-adv-x="480" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM400 640h-269l-80 30q10 40 50 50h329zM130 620v-190l-60 -60l-20 20v260zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20z" />
+    <glyph glyph-name="g" unicode="g" 
+d="M390 400l40 -40l-40 -40h-90l-40 40l40 40h90zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM50 70v260l20 20l60 -60v-190zM400 640h-269l-80 30q10 40 50 50h329zM130 620v-190l-60 -60l-20 20v260z" />
+    <glyph glyph-name="h" unicode="h" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20zM70 360l-20 20v280q10 40 50 50l30 -80v-210z" />
+    <glyph glyph-name="i" unicode="i" horiz-adv-x="180" 
+d="M50 430v210l30 80q40 -10 50 -50v-280l-20 -20zM110 360l20 -20v-280q-10 -40 -50 -50l-30 80v210z" />
+    <glyph glyph-name="j" unicode="j" 
+d="M450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM50 70v260l20 20l60 -60v-190zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
+    <glyph glyph-name="k" unicode="k" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM150 480l240 240q60 0 80 -40l-260 -260h-60v60zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20zM70 370l-20 20v280q10 40 50 50l30 -80v-210z" />
+    <glyph glyph-name="l" unicode="l" 
+d="M130 290v-210l-30 -80q-40 10 -50 50v280l20 20zM150 80h240l80 -30q-10 -40 -50 -50h-300zM70 370l-20 20v280q10 40 50 50l30 -80v-210z" />
+    <glyph glyph-name="m" unicode="m" 
+d="M300 390l-40 -40l-40 40v230h80v-230zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20z" />
+    <glyph glyph-name="n" unicode="n" 
+d="M130 290v-210l-30 -80q-40 10 -50 50v280l20 20zM370 420h-70l-150 150v60h60l160 -160v-50zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM390 420v210l30 80q40 -10 50 -50v-280l-20 -20zM70 360l-20 20v280q10 40 50 50l30 -80v-210z" />
+    <glyph glyph-name="o" unicode="o" 
+d="M370 640h-220l-40 40l40 40h220l40 -40zM390 430v210l30 30l50 -50v-230l-20 -20zM450 350l20 -20v-230l-50 -50l-30 30v210zM70 370l-20 20v230l50 50l30 -30v-210zM410 40l-40 -40h-220l-40 40l40 40h220zM130 290v-210l-30 -30l-50 50v230l20 20z" />
+    <glyph glyph-name="p" unicode="p" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM370 640h-240l-80 30v50h320l40 -40zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 30l50 -50v-230l-20 -20zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20z" />
+    <glyph glyph-name="q" unicode="q" horiz-adv-x="530" 
+d="M450 350l20 -20v-240l-80 80v120zM380 0h-280q-40 10 -50 50l80 30h170zM50 70v260l20 20l60 -60v-190zM370 640h-239l-80 30q10 40 50 50h299zM130 620v-190l-60 -60l-20 20v260zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM290 180h60l130 -130v-60h-60l-130 130
+v60z" />
+    <glyph glyph-name="r" unicode="r" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM150 300h60l260 -260q-20 -40 -80 -40l-240 240v60zM130 290v-210l-30 -80q-40 10 -50 50v280l20 20zM370 640h-239l-80 30q10 40 50 50h299zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM130 620v-190l-60 -60
+l-20 20v260z" />
+    <glyph glyph-name="s" unicode="s" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM130 620v-190l-60 -60l-20 20v260zM131 640l-80 30q10 40 50 50h319q40 -10 50 -50l-80 -30h-259z" />
+    <glyph glyph-name="t" unicode="t" horiz-adv-x="519" 
+d="M259 350l40 -40v-260q-10 -40 -50 -50l-30 80v230zM219 410v210h80v-210l-40 -40zM130 640l-80 30q10 40 50 50h319q40 -10 50 -50l-80 -30h-259z" />
+    <glyph glyph-name="u" unicode="u" 
+d="M450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM50 70v260l20 20l60 -60v-190zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM70 360l-20 20v280q10 40 50 50l30 -80v-210z" />
+    <glyph glyph-name="v" unicode="v" 
+d="M70 360l-20 20v280q10 40 50 50l30 -80v-210zM390 420v210l30 80q40 -10 50 -50v-280l-20 -20zM250 120v-120l-200 260v60l20 20l60 -60zM390 280l60 60l20 -20v-60l-200 -260v120z" />
+    <glyph glyph-name="w" unicode="w" 
+d="M300 100h-80v230l40 40l40 -40v-230zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20zM400 0h-299q-40 10 -50 50l80 30h239zM50 70v260l20 20l60 -60v-190zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM70 370l-20 20v280q10 40 50 50l30 -80v-210z" />
+    <glyph glyph-name="x" unicode="x" 
+d="M270 350h45l154 -310q-20 -40 -80 -40l-119 242v108zM271 478l119 242q60 0 80 -40l-154 -310h-45v108zM249 242l-119 -242q-60 0 -80 40l154 310h45v-108zM250 370h-45l-154 310q20 40 80 40l119 -243v-107z" />
+    <glyph glyph-name="y" unicode="y" 
+d="M390 400l40 -40l-40 -40h-260l-40 40l40 40h260zM450 350l20 -20v-280q-10 -40 -50 -50l-30 80v210zM400 0h-300q-40 10 -50 50l80 30h240zM130 650v-220l-60 -60l-20 20v290zM390 430v210l30 80q40 -10 50 -50v-280l-20 -20z" />
+    <glyph glyph-name="z" unicode="z" 
+d="M430 0h-280l40 80h210zM330 640h-199l-80 30q10 40 50 50h269zM260 430l130 290q60 0 80 -40l-150 -310h-60v60zM270 290l-140 -290q-60 0 -80 40l160 310h60v-60z" />
+    <glyph glyph-name="braceleft" unicode="{" horiz-adv-x="430" 
+d="M170 70v220l60 60l20 -20v-230zM320 640h-69l-80 30q10 40 50 50h139l20 -20zM250 620v-230l-20 -20l-60 60v220zM380 20l-20 -20h-139q-40 10 -50 50l80 30h69zM160 400l40 -40l-40 -40h-70l-40 40l40 40h70z" />
+    <glyph glyph-name="bar" unicode="|" horiz-adv-x="180" 
+d="M130 50q-10 -40 -50 -50l-30 80v560l30 80q40 -10 50 -50v-620z" />
+    <glyph glyph-name="braceright" unicode="}" horiz-adv-x="430" 
+d="M180 100v230l20 20l60 -60v-220zM50 700l20 20h139q40 -10 50 -50l-80 -30h-69zM260 650v-220l-60 -60l-20 20v230zM110 80h69l80 -30q-10 -40 -50 -50h-139l-20 20zM340 400l40 -40l-40 -40h-70l-40 40l40 40h70z" />
+    <glyph glyph-name="asciitilde" unicode="~" horiz-adv-x="540" 
+d="M290 480l40 -40l-40 -40h-40l-40 40l40 40h40zM130 479l40 -40l-40 -40h-40l-40 40l40 40h40zM450 480l40 -40l-40 -40h-40l-40 40l40 40h40zM210 540l40 -40l-40 -40h-40l-40 40l40 40h40zM370 410l40 -40l-40 -40h-40l-40 40l40 40h40z" />
+    <glyph glyph-name="copyright" unicode="&#xa9;" horiz-adv-x="580" 
+d="M460 0h-360q-40 10 -50 50l80 30h300zM430 640h-299l-80 30q10 40 50 50h359zM130 100l-80 -30v580l80 -30v-520zM530 50q-10 -40 -50 -50l-30 80v560l30 80q40 -10 50 -50v-620zM380 480h-130l-80 30q10 40 50 50h190zM250 460v-220l-30 -80q-40 10 -50 50v280zM270 240
+h60l80 -30q-10 -40 -50 -50h-120z" />
+    <glyph glyph-name="endash" unicode="&#x2013;" horiz-adv-x="540" 
+d="M450 400l40 -40l-40 -40h-360l-40 40l40 40h360z" />
+    <glyph glyph-name="emdash" unicode="&#x2014;" horiz-adv-x="580" 
+d="M490 400l40 -40l-40 -40h-400l-40 40l40 40h400z" />
+    <glyph glyph-name="quoteleft" unicode="&#x2018;" horiz-adv-x="180" 
+d="M130 520h-80v160l40 40l40 -40v-160z" />
+    <glyph glyph-name="quoteright" unicode="&#x2019;" horiz-adv-x="180" 
+d="M130 560l-40 -40l-40 40v160h80v-160z" />
+    <glyph glyph-name="quotedblleft" unicode="&#x201c;" horiz-adv-x="340" 
+d="M130 521h-80v160l40 40l40 -40v-160zM290 520h-80v160l40 40l40 -40v-160z" />
+    <glyph glyph-name="quotedblright" unicode="&#x201d;" horiz-adv-x="341" 
+d="M130 560l-40 -40l-40 40v160h80v-160zM291 561l-40 -40l-40 40v160h80v-160z" />
+    <glyph glyph-name="bullet" unicode="&#x2022;" horiz-adv-x="390" 
+d="M195 220q-60 0 -102.5 42.5t-42.5 102.5t42.5 102.5t102.5 42.5t102.5 -42.5t42.5 -102.5t-42.5 -102.5t-102.5 -42.5z" />
+    <glyph glyph-name="perthousand" unicode="&#x2030;" horiz-adv-x="590" 
+d="M279 399l-160 -159q-60 -1 -59 59l189 190h30v-90zM140 640h-10l-80 30q10 40 50 50h70zM130 620v-60l-30 -80q-40 10 -50 50v120zM150 560h10l80 -30q-10 -40 -50 -50h-70zM160 580v60l30 80q40 -10 50 -50v-120zM440 160h-10l-80 30q10 40 50 50h70zM431 140v-60
+l-30 -80q-40 10 -50 50v120zM450 80h10l80 -30q-10 -40 -50 -50h-70zM460 100v60l30 80q40 -10 50 -50v-120zM230 100v60l30 80q40 -10 50 -50v-120zM220 79h10l80 -30q-10 -40 -50 -50h-70zM200 140v-60l-30 -80q-40 10 -50 50v120zM210 160h-10l-80 30q10 40 50 50h70z
+M290 531l160 159q60 1 59 -59l-189 -191l-30 1v90z" />
+    <glyph glyph-name="NULL" horiz-adv-x="500" 
+ />
+  </font>
+</defs></svg>

src/views/center/index.vue

@@ -0,0 +1,556 @@
+<template>
+  <div id="data-view">
+    <dv-full-screen-container ref="dataView">
+      <div class="main-header index-head">
+        <!-- 顶栏开始 -->
+        <div id="header" class="index-head">
+          <div class="bt">
+            {{ title }}
+          </div>
+          <!-- <div class="bt">海南监控数据中心</div> -->
+          <el-row class="elRow">
+            <el-col :span="8">
+              <div class="elCol">
+                <div class="yxsj">
+                  运行时间：<span class="p1">{{ yxsj }}</span><span style="margin-left: 10px">天</span>
+                </div>
+                <div class="dqsj">
+                  当前时间：<span class="p2">{{ dqsj }}</span>
+                </div>
+              </div>
+            </el-col>
+
+            <el-col :span="8" :offset="8">
+              <div class="elCol" style="padding: 0 23%">
+                <div class="tjsj">
+                  统计时间：<span class="p3">{{ tjsj }}</span>
+                </div>
+                <!-- <div style="font-size: 20px; color: #00bf8f">首页概览</div> -->
+              </div>
+            </el-col>
+          </el-row>
+
+          <!-- <el-button
+            type="primary"
+            class="menu-index"
+            :icon="fullscreen ? 'el-icon-close' : 'el-icon-view'"
+            size="mini"
+            circle
+            @click="handleFullScreen"
+          ></el-button> -->
+        </div>
+      </div>
+
+      <div class="main-container" :key="sun" :style="`height: calc(${fullscreen ? '100% - 80px' : '100% - 250px'
+        }   );`">
+        <!-- 左 -->
+        <div class="rmctc-right-container">
+          <!-- 监测点规模 -->
+          <dv-border-box-13 :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="rmctc-chart-1">
+            <MonitoringPointScale ref="MonitoringPointScale" @control="control" @Remove="Remove" />
+          </dv-border-box-13>
+          <!-- 暂降事件 -->
+          <dv-border-box-13 :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="rmctc-chart-2" :reverse="true">
+            <DropEvent ref="DropEvent" @control="control" @Remove="Remove" />
+            <!-- <Right-Chart-2 /> -->
+          </dv-border-box-13>
+          <!-- 稳态越线占比 -->
+          <dv-border-box-13 :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="rmctc-chart-1" :reverse="true">
+            <SteadyState ref="SteadyState" @control="control" @Remove="Remove" />
+          </dv-border-box-13>
+        </div>
+        <!-- 中 -->
+        <div class="right-main-container">
+          <!-- 地图片区 -->
+          <dv-border-box-1 class="rmc-top-container mapBJ">
+            <Map />
+          </dv-border-box-1>
+          <!-- 表格 -->
+          <dv-border-box-7 ref="TableHeight" :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="rmc-bottom-container">
+            <Table :height="heightTable" />
+          </dv-border-box-7>
+        </div>
+        <!-- 右 -->
+        <div class="rmctc-right-container">
+          <!-- 用户规模 -->
+          <dv-border-box-13 :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="rmctc-chart-1">
+            <UserScale v-if="isChina" />
+            <tHDistortion v-else />
+          </dv-border-box-13>
+          <!-- 数据规模 -->
+          <!-- <dv-border-box-13
+            :color="['rgb(7 216 253)', 'rgb(7 216 253)']"
+            class="rmctc-chart-2"
+            :reverse="true"
+          >
+            <DataSize />
+          </dv-border-box-13> -->
+          <dv-border-box-13 :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="rmctc-chart-2" :reverse="true">
+            <PowerLoad />
+          </dv-border-box-13>
+          <!-- 数据中心 -->
+          <dv-border-box-13 :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="rmctc-chart-1" :reverse="true">
+            <DataCenter v-if="isChina" />
+            <datashuju v-else />
+          </dv-border-box-13>
+        </div>
+      </div>
+    </dv-full-screen-container>
+  </div>
+</template>
+
+<script>
+import { getRunTime } from "@/api/center/DropEvent.js";
+import MonitoringPointScale from "./components/MonitoringPointScale";
+import DropEvent from "./components/DropEvent";
+import SteadyState from "./components/SteadyState";
+import Map from "./components/Map";
+import Table from "./components/Table";
+import UserScale from "./components/UserScale";
+// import DataSize from "./components/DataSize";
+import DataCenter from "./components/DataCenter";
+import PowerLoad from "./components/PowerLoad";
+import tHDistortion from "./components/tHDistortion";
+import datashuju from "./components/datashuju";
+export default {
+  components: {
+    MonitoringPointScale,
+    DropEvent,
+    SteadyState,
+    Map,
+    Table,
+    UserScale,
+    // DataSize,
+    DataCenter,
+    PowerLoad,
+    tHDistortion,
+    datashuju,
+  },
+  data() {
+    return {
+      vh: undefined,
+      nowTime: "",
+      dqsj: "",
+      tjsj: this.getCurrentMonthFirst() + "--" + this.getNowFormatDate(),
+      yxsj: this.day2 - this.day1 + 1,
+      heightTable: 0,
+      day1: "",
+      day2: "",
+      isChina: true,
+      title: "南京灿能监控数据中心",
+      isFullscreenBool: true,
+      fullscreen: false,
+      sun: 0,
+    };
+  },
+  created() {
+    const info = JSON.parse(localStorage.getItem("adminInfo"));
+    if (info.areaId !== "0") {
+      this.isChina = false;
+      this.title = info.areaName + "电能质量监控大屏";
+    }
+  },
+  mounted() {
+    this.vh =
+      (window.innerHeight ||
+        document.documentElement.clientHeight ||
+        document.body.clientHeight) -
+      80 +
+      "px";
+    let _this = this;
+    window.addEventListener("fullscreenchange", (event) => {
+      if (document.fullscreenElement) {
+        // console.log("变大了");
+      } else {
+        // console.log("变小了");
+        _this.fullscreen = false;
+        _this.sun++;
+        // this.handleFullScreen()
+      }
+    });
+
+    window.addEventListener("keydown", (e) => {
+      // 阻止F11键默认事件，用HTML5全屏API代替
+      e = e || window.event;
+      if (e.keyCode === 122) {
+        this.handleFullScreen();
+        e.preventDefault();
+      }
+    });
+
+    setTimeout(() => {
+      this.heightTable = this.$refs.TableHeight.height;
+    }, 0);
+    setInterval(() => {
+      this.fullscreen = false;
+      this.GetTheCurrentTime();
+    }, 1000);
+
+    this.time();
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.onresize);
+  },
+  methods: {
+    // 点击事件 分控
+    control(e) {
+      // 片区
+      if (e.val == 1) {
+        if (e.name == "MonitoringPointScale") {
+          this.$refs.DropEvent.tab1(0);
+          this.$refs.SteadyState.tab1(0);
+        } else if (e.name == "DropEvent") {
+          this.$refs.MonitoringPointScale.tab1(0);
+          this.$refs.SteadyState.tab1(0);
+        } else if (e.name == "SteadyState") {
+          this.$refs.DropEvent.tab1(0);
+          this.$refs.MonitoringPointScale.tab1(0);
+        }
+      } else if (e.val == 2) {
+        if (e.name == "MonitoringPointScale") {
+          this.$refs.DropEvent.tab2(0);
+          this.$refs.SteadyState.tab2(0);
+        } else if (e.name == "DropEvent") {
+          this.$refs.MonitoringPointScale.tab2(0);
+          this.$refs.SteadyState.tab2(0);
+        } else if (e.name == "SteadyState") {
+          this.$refs.DropEvent.tab2(0);
+          this.$refs.MonitoringPointScale.tab2(0);
+        }
+      } else if (e.val == 3) {
+        this.$refs.MonitoringPointScale.tab2(0);
+        this.$refs.SteadyState.tab2(0);
+      }
+    },
+    time() {
+      getRunTime().then((res) => {
+        this.yxsj = res.data.days;
+      });
+    },
+    // 鼠标移出事件
+    Remove(e) {
+      this.$refs.SteadyState.info();
+      this.$refs.DropEvent.info();
+      this.$refs.MonitoringPointScale.info();
+    },
+    //获取当前时间
+    GetTheCurrentTime() {
+      var date = new Date();
+      var seperator1 = "-";
+      var seperator2 = ":";
+      var month = date.getMonth() + 1;
+      var strDate = date.getDate();
+      var hours = date.getHours();
+      var minutes = date.getMinutes();
+      var seconds = date.getSeconds();
+      if (month < 10) {
+        month = "0" + month;
+      }
+      if (strDate < 10) {
+        strDate = "0" + strDate;
+      }
+      if (hours < 10) {
+        hours = "0" + hours;
+      }
+      if (minutes < 10) {
+        minutes = "0" + minutes;
+      }
+      if (seconds < 10) {
+        seconds = "0" + seconds;
+      }
+      var currentdate =
+        date.getFullYear() +
+        seperator1 +
+        month +
+        seperator1 +
+        strDate +
+        " " +
+        hours +
+        seperator2 +
+        minutes +
+        seperator2 +
+        seconds;
+      this.dqsj = currentdate;
+    },
+    //获取当月第一天日期
+    getCurrentMonthFirst() {
+      var date = new Date();
+      var year = date.getFullYear();
+      date.setDate(1);
+      var month = parseInt(date.getMonth() + 1);
+      var day = date.getDate();
+      this.day1 = day;
+      // console.log(this.day1);
+      if (month < 10) {
+        month = "0" + month;
+      }
+      if (day < 10) {
+        day = "0" + day;
+      }
+
+      return year + "-" + month + "-" + day;
+    },
+    //获取当天日期
+    getNowFormatDate() {
+      var date = new Date();
+      var year = date.getFullYear();
+      var month = date.getMonth() + 1;
+      var day = date.getDate();
+      this.day2 = day;
+      // console.log(this.day2);
+      if (month < 10) {
+        month = "0" + month;
+      }
+      if (day < 10) {
+        day = "0" + day;
+      }
+
+      return year + "-" + month + "-" + day;
+    },
+
+    handleFullScreen() {
+      console.log(1);
+      let element = document.documentElement;
+      // 判断是否已经是全屏
+      // 如果是全屏，退出
+      if (this.fullscreen) {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.webkitCancelFullScreen) {
+          document.webkitCancelFullScreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        }
+        this.fullscreen = false;
+      } else {
+        // 否则，进入全屏
+        if (element.requestFullscreen) {
+          element.requestFullscreen();
+        } else if (element.webkitRequestFullScreen) {
+          element.webkitRequestFullScreen();
+        } else if (element.mozRequestFullScreen) {
+          element.mozRequestFullScreen();
+        } else if (element.msRequestFullscreen) {
+          // IE11
+          element.msRequestFullscreen();
+        }
+        this.fullscreen = true;
+        // console.log("已全屏！");
+      }
+      this.sun++;
+      // 改变当前全屏状态
+      // this.fullscreen = !this.fullscreen;
+    },
+
+    //进入菜单内容页
+  },
+};
+</script>
+
+<style lang="less" scoped>
+::v-deep.dpjcksss.el-dialog .el-dialog__body {
+  max-height: 70vh;
+  padding: 0px !important;
+  overflow-y: auto;
+}
+
+// @import url("../center/css/commonStyle.less");
+// @import url("../center/css/themeMixin.less");
+@import url("./css/home.less");
+
+// @import url("../center/css/change.less");
+@font-face {
+  font-family: sszh;
+  src: url("./fonts/sszh.ttf");
+  /* IE9+ */
+}
+
+#data-view {
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  background-color: #030409;
+
+  #dv-full-screen-container {
+    display: flex;
+    // background-image: linear-gradient(
+    //   rgb(57, 86, 102,0.8),
+    //   rgb(57, 86, 102,0.9),
+    //   // rgb(41, 62, 76)
+    // );
+    // background-repeat: no-repeat;
+    // background-size: 100% auto;
+    background: url("../center/images/BJ1.png") no-repeat;
+    background-position: center;
+    background-size: 100% 100%;
+    box-shadow: 0 0 3px blue;
+    flex-direction: column;
+  }
+
+  .main-header {
+    height: 80px;
+
+    .yxsj {
+      // width: 165px;
+      font-family: electricFont;
+      font-size: 1.2rem;
+      color: #03fa2c;
+
+      .p1 {
+        font-size: 1.5rem;
+        color: rgb(1, 238, 255);
+      }
+    }
+
+    .dqsj {
+      width: 50%;
+      font-family: electricFont;
+      font-size: 1.2rem;
+      color: #06e0fa;
+
+      .p2 {
+        font-size: 1.5rem;
+        color: rgb(1, 238, 255);
+      }
+    }
+
+    .tjsj {
+      // width:56%;
+      font-family: electricFont;
+      font-size: 1.2rem;
+      color: #06e0fa;
+
+      .p3 {
+        font-size: 1.5rem;
+        color: rgb(1, 238, 255);
+      }
+    }
+
+    .bt {
+      // position: absolute;
+      // left: 38.3%;
+      margin-top: 10px;
+      font-size: 2.2rem;
+      color: #fff;
+      text-align: center;
+    }
+
+    .index-head {
+      // margin-top: 30px;
+      z-index: 2000 !important;
+      width: 100%;
+      height: 80px !important;
+      // background-image: url("../center/images/header.png");
+      background: url("../center/images/header.png") no-repeat;
+      // background-attachment: fixed;
+      background-position: 0 25px;
+      background-size: 100% 100%;
+      // background-size: contain;
+      // transform: translate(-15%, -50%);
+
+      // width: 400px;
+      //         height: 300px;
+      //         border-bottom: 15px solid rgb(249, 244, 245);
+      //         /* 边框图片路径 */
+      //         border-image-source: url(../center/images/header.png);
+      //         /* 第一种写法上右下左值不同的时候  */
+      //         /* border-image-slice: 170 10 45 80; */
+      //         /* 第二种写法上右下左值都相同的时候  */
+      //         border-image-slice: 200;
+      //         /* 图片边框的宽度（需要加单位） */
+      //         border-image-width: 30px;
+      //         /* 图像边框是否平铺（repeat）、铺满（round）或拉伸（stretch） */
+      //         border-image-repeat: stretch;
+
+      .menu-index {
+        position: absolute;
+        //right: 0;
+        top: 10px;
+        left: 95%;
+        width: 30px;
+        height: 30px;
+
+        color: aliceblue;
+        text-align: center;
+        cursor: pointer;
+        background: #527f74;
+      }
+
+      .el-icon-s-home {
+        font-size: 26px;
+        color: #00bf8f;
+      }
+    }
+  }
+
+  .main-container {
+    display: flex;
+    // height: calc(~"100% - 80px");
+    padding: 10px;
+    box-sizing: border-box;
+  }
+
+  .right-main-container {
+    width: 50% !important;
+    padding: 0 0.5% !important;
+    box-sizing: border-box;
+  }
+
+  .rmc-top-container {
+    display: flex;
+    height: 66.2% !important;
+  }
+
+  .mapBJ {
+    // background: url("../center/images/BJ.png") no-repeat;
+    // background-attachment: fixed;
+    background-position: center;
+    background-size: 98% 98%;
+    width: 100%;
+  }
+
+  .rmc-bottom-container {
+    height: 97%/3 !important;
+    margin-top: 1% !important;
+    border: 0 solid rgb(7 216 253) !important;
+    box-shadow: #279cb1 0 0 5px inset !important;
+  }
+
+  .rmctc-right-container {
+    width: 27% !important;
+  }
+
+  .rmctc-chart-1,
+  .rmctc-chart-2 {
+    height: 32.444% !important;
+
+    border: 0 solid rgb(7 216 253) !important;
+    box-shadow: #279cb1 0 0 1px inset !important;
+  }
+
+  .rmctc-chart-2 {
+    margin: 2% 0 !important;
+  }
+}
+
+.dv-border-box-13,
+.dv-border-box-7 {
+  position: relative;
+  width: 100%;
+  height: 32.4%;
+  padding: 15px 10px 10px 10px;
+}
+
+.elRow {
+  position: relative;
+  top: -10px;
+}
+
+.elCol {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+</style>