moral_fronted.git

parent: 7b3c8b26 | patch | commit | ignore whitespace

1、设备详情显示修改 2、监测因子对比改成监测因子相关性对比 3、监测因子相关性对比显示修改

guoshipeng

2023-04-12 46b328deebfc604ecfe6e34afe08403d95356614

1、设备详情显示修改
2、监测因子对比改成监测因子相关性对比
3、监测因子相关性对比显示修改

6 files modified

	.idea/workspace.xml	6 ●●●●● patch \| view \| raw \| blame \| history
	cmsdist/index.html	2 ●●●●● patch \| view \| raw \| blame \| history
	src/components/Echarts/LineChartSpe.vue	78 ●●●●● patch \| view \| raw \| blame \| history
	src/router/dynamicRouter.js	2 ●●●●● patch \| view \| raw \| blame \| history
	src/views/contrast/index.vue	8 ●●●●● patch \| view \| raw \| blame \| history
	src/views/deviceDetail/index.vue	947 ●●●●● patch \| view \| raw \| blame \| history

 .idea/workspace.xml

@@ -4,10 +4,6 @@
    <list default="true" id="6a923843-d66d-4ccb-892a-72e969a7cbe1" name="Default Changelist" comment="export cityRankWord">
      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/cmsdist/index.html" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/serverConfig.json" beforeDir="false" afterPath="$PROJECT_DIR$/cmsdist/serverConfig.json" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-09784ec9.dbe1340e.js" beforeDir="false" />
      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/components/Form/DatePicker.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Form/DatePicker.vue" afterDir="false" />
    </list>
    <option name="SHOW_DIALOG" value="false" />
    <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -375,6 +371,8 @@
      <workItem from="1673224135076" duration="7014000" />
      <workItem from="1679296211797" duration="11000" />
      <workItem from="1679296917474" duration="8000" />
      <workItem from="1680243193398" duration="162000" />
      <workItem from="1680502666801" duration="6000" />
    </task>
    <task id="LOCAL-00001" summary="处理详情页侧面菜单不消失">
      <created>1627269084478</created>

 cmsdist/index.html

@@ -6,7 +6,7 @@

    html {
      overflow-y: hidden;
    }</style><link href=/static/css/chunk-elementUI.f2af0811.css rel=stylesheet><link href=/static/css/chunk-libs.3dfb7769.css rel=stylesheet><link href=/static/css/app.cfbc7fff.css rel=stylesheet></head><body><noscript><strong>七星瓢虫环境科技 不支持无javaScript环境</strong></noscript><div id=app></div><script src=/static/js/chunk-elementUI.b4749c03.js></script><script src=/static/js/chunk-libs.afc70fdc.js></script><script>(function(e){function c(c){for(var u,a,h=c[0],r=c[1],f=c[2],k=0,o=[];k<h.length;k++)a=h[k],t[a]&&o.push(t[a][0]),t[a]=0;for(u in r)Object.prototype.hasOwnProperty.call(r,u)&&(e[u]=r[u]);b&&b(c);while(o.length)o.shift()();return d.push.apply(d,f||[]),n()}function n(){for(var e,c=0;c<d.length;c++){for(var n=d[c],u=!0,a=1;a<n.length;a++){var h=n[a];0!==t[h]&&(u=!1)}u&&(d.splice(c--,1),e=r(r.s=n[0]))}return e}var u={},a={runtime:0},t={runtime:0},d=[];function h(e){return r.p+"static/js/"+({"chunk-commons":"chunk-commons"}[e]||e)+"."+{"chunk-09784ec9":"d1978ded","chunk-5f8a81f5":"8442ae25","chunk-48dcde72":"d3e4571b","chunk-201c0396":"f3e63fed","chunk-26aa192a":"ca93e195","chunk-2c6cd7be":"26fa5bec","chunk-2d0aa5b8":"aa86ab80","chunk-04dff74e":"6b338551","chunk-8960d1b6":"a80ee1fd","chunk-2d0b9293":"c84b8980","chunk-4adb9048":"e8609968","chunk-5d23b120":"3abeafa7","chunk-85a2e2d8":"9b079fdf","chunk-aa6495fe":"47ab2c3e","chunk-495b3b99":"c224fb40","chunk-5db5f624":"b668735f","chunk-08d7cab3":"4bec4dad","chunk-291c8555":"8265323a","chunk-e6c00ab8":"efa42862","chunk-03e4f198":"b5b3f0c5","chunk-515db732":"b4aa04c5","chunk-ec6a3d1c":"8a40b817","chunk-c9c77a48":"bb1c3f1c","chunk-commons":"6a605666","chunk-0e0b280e":"dc4627d7","chunk-47eed6e4":"a0c74128","chunk-6f5de554":"8fb28c7e","chunk-243d09ae":"32e46461","chunk-44900a0d":"312aa2a2","chunk-64670b04":"12a8c47a","chunk-ec8fa258":"55771c69","chunk-4a79fb70":"b7f6ecb7","chunk-4ae0200c":"32c14596","chunk-7a25313a":"0b02e54c","chunk-d89e6198":"3150f980","chunk-d38dc67e":"ab84683a","chunk-7ad495bf":"75747fd9","chunk-b5d299f2":"4f55dfc7","chunk-0a0d3ad6":"33ea41b5","chunk-fea4eb42":"191ab795"}[e]+".js"}function r(c){if(u[c])return u[c].exports;var n=u[c]={i:c,l:!1,exports:{}};return e[c].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.e=function(e){var c=[],n={"chunk-48dcde72":1,"chunk-201c0396":1,"chunk-26aa192a":1,"chunk-2c6cd7be":1,"chunk-04dff74e":1,"chunk-8960d1b6":1,"chunk-4adb9048":1,"chunk-5d23b120":1,"chunk-85a2e2d8":1,"chunk-495b3b99":1,"chunk-08d7cab3":1,"chunk-291c8555":1,"chunk-03e4f198":1,"chunk-515db732":1,"chunk-ec6a3d1c":1,"chunk-c9c77a48":1,"chunk-0e0b280e":1,"chunk-47eed6e4":1,"chunk-243d09ae":1,"chunk-44900a0d":1,"chunk-64670b04":1,"chunk-ec8fa258":1,"chunk-4a79fb70":1,"chunk-4ae0200c":1,"chunk-7a25313a":1,"chunk-d89e6198":1,"chunk-d38dc67e":1,"chunk-b5d299f2":1,"chunk-0a0d3ad6":1,"chunk-fea4eb42":1};a[e]?c.push(a[e]):0!==a[e]&&n[e]&&c.push(a[e]=new Promise((function(c,n){for(var u="static/css/"+({"chunk-commons":"chunk-commons"}[e]||e)+"."+{"chunk-09784ec9":"31d6cfe0","chunk-5f8a81f5":"31d6cfe0","chunk-48dcde72":"4e0b5cf8","chunk-201c0396":"3bec9bdf","chunk-26aa192a":"2af0888d","chunk-2c6cd7be":"577279a3","chunk-2d0aa5b8":"31d6cfe0","chunk-04dff74e":"8bd549e9","chunk-8960d1b6":"d43cc52a","chunk-2d0b9293":"31d6cfe0","chunk-4adb9048":"6e6b0b74","chunk-5d23b120":"0b74763b","chunk-85a2e2d8":"99ec93e0","chunk-aa6495fe":"31d6cfe0","chunk-495b3b99":"40cb5e47","chunk-5db5f624":"31d6cfe0","chunk-08d7cab3":"86ed856d","chunk-291c8555":"d66896f4","chunk-e6c00ab8":"31d6cfe0","chunk-03e4f198":"0e23a2c4","chunk-515db732":"ccf69b0e","chunk-ec6a3d1c":"3d0ac165","chunk-c9c77a48":"a37cd815","chunk-commons":"31d6cfe0","chunk-0e0b280e":"ff6fa18a","chunk-47eed6e4":"3de502ed","chunk-6f5de554":"31d6cfe0","chunk-243d09ae":"79a92fcd","chunk-44900a0d":"9c0e30cb","chunk-64670b04":"94095f03","chunk-ec8fa258":"db72f820","chunk-4a79fb70":"c452ee63","chunk-4ae0200c":"423b9be8","chunk-7a25313a":"3225998f","chunk-d89e6198":"38d255bc","chunk-d38dc67e":"34fb2242","chunk-7ad495bf":"31d6cfe0","chunk-b5d299f2":"fd0d3da7","chunk-0a0d3ad6":"6c805bdf","chunk-fea4eb42":"51ca3679"}[e]+".css",t=r.p+u,d=document.getElementsByTagName("link"),h=0;h<d.length;h++){var f=d[h],k=f.getAttribute("data-href")||f.getAttribute("href");if("stylesheet"===f.rel&&(k===u||k===t))return c()}var o=document.getElementsByTagName("style");for(h=0;h<o.length;h++){f=o[h],k=f.getAttribute("data-href");if(k===u||k===t)return c()}var b=document.createElement("link");b.rel="stylesheet",b.type="text/css",b.onload=c,b.onerror=function(c){var u=c&&c.target&&c.target.src||t,d=new Error("Loading CSS chunk "+e+" failed.\n("+u+")");d.code="CSS_CHUNK_LOAD_FAILED",d.request=u,delete a[e],b.parentNode.removeChild(b),n(d)},b.href=t;var i=document.getElementsByTagName("head")[0];i.appendChild(b)})).then((function(){a[e]=0})));var u=t[e];if(0!==u)if(u)c.push(u[2]);else{var d=new Promise((function(c,n){u=t[e]=[c,n]}));c.push(u[2]=d);var f,k=document.createElement("script");k.charset="utf-8",k.timeout=120,r.nc&&k.setAttribute("nonce",r.nc),k.src=h(e),f=function(c){k.onerror=k.onload=null,clearTimeout(o);var n=t[e];if(0!==n){if(n){var u=c&&("load"===c.type?"missing":c.type),a=c&&c.target&&c.target.src,d=new Error("Loading chunk "+e+" failed.\n("+u+": "+a+")");d.type=u,d.request=a,n[1](d)}t[e]=void 0}};var o=setTimeout((function(){f({type:"timeout",target:k})}),12e4);k.onerror=k.onload=f,document.head.appendChild(k)}return Promise.all(c)},r.m=e,r.c=u,r.d=function(e,c,n){r.o(e,c)||Object.defineProperty(e,c,{enumerable:!0,get:n})},r.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,c){if(1&c&&(e=r(e)),8&c)return e;if(4&c&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&c&&"string"!=typeof e)for(var u in e)r.d(n,u,function(c){return e[c]}.bind(null,u));return n},r.n=function(e){var c=e&&e.__esModule?function(){return e["default"]}:function(){return e};return r.d(c,"a",c),c},r.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},r.p="/",r.oe=function(e){throw console.error(e),e};var f=window["webpackJsonp"]=window["webpackJsonp"]||[],k=f.push.bind(f);f.push=c,f=f.slice();for(var o=0;o<f.length;o++)c(f[o]);var b=k;n()})([]);</script><script src=/static/js/app.45db1781.js></script></body><script>var docEl = document.documentElement,
    }</style><link href=/static/css/chunk-elementUI.f2af0811.css rel=stylesheet><link href=/static/css/chunk-libs.3dfb7769.css rel=stylesheet><link href=/static/css/app.cfbc7fff.css rel=stylesheet></head><body><noscript><strong>七星瓢虫环境科技 不支持无javaScript环境</strong></noscript><div id=app></div><script src=/static/js/chunk-elementUI.b4749c03.js></script><script src=/static/js/chunk-libs.afc70fdc.js></script><script>(function(e){function c(c){for(var u,a,h=c[0],r=c[1],f=c[2],k=0,o=[];k<h.length;k++)a=h[k],t[a]&&o.push(t[a][0]),t[a]=0;for(u in r)Object.prototype.hasOwnProperty.call(r,u)&&(e[u]=r[u]);b&&b(c);while(o.length)o.shift()();return d.push.apply(d,f||[]),n()}function n(){for(var e,c=0;c<d.length;c++){for(var n=d[c],u=!0,a=1;a<n.length;a++){var h=n[a];0!==t[h]&&(u=!1)}u&&(d.splice(c--,1),e=r(r.s=n[0]))}return e}var u={},a={runtime:0},t={runtime:0},d=[];function h(e){return r.p+"static/js/"+({"chunk-commons":"chunk-commons"}[e]||e)+"."+{"chunk-09784ec9":"d1978ded","chunk-5f8a81f5":"8442ae25","chunk-48dcde72":"d3e4571b","chunk-201c0396":"f3e63fed","chunk-26aa192a":"ca93e195","chunk-2c6cd7be":"26fa5bec","chunk-2d0aa5b8":"aa86ab80","chunk-04dff74e":"6b338551","chunk-8960d1b6":"a80ee1fd","chunk-2d0b9293":"c84b8980","chunk-4adb9048":"e8609968","chunk-5d23b120":"3abeafa7","chunk-85a2e2d8":"9b079fdf","chunk-aa6495fe":"47ab2c3e","chunk-495b3b99":"c224fb40","chunk-5db5f624":"b668735f","chunk-08d7cab3":"4bec4dad","chunk-291c8555":"8265323a","chunk-e6c00ab8":"efa42862","chunk-03e4f198":"b5b3f0c5","chunk-515db732":"b4aa04c5","chunk-ec6a3d1c":"8a40b817","chunk-c9c77a48":"bb1c3f1c","chunk-commons":"6a605666","chunk-0e0b280e":"dc4627d7","chunk-47eed6e4":"a0c74128","chunk-6f5de554":"8fb28c7e","chunk-243d09ae":"32e46461","chunk-44900a0d":"312aa2a2","chunk-64670b04":"12a8c47a","chunk-ec8fa258":"2ac4806f","chunk-4a79fb70":"b7f6ecb7","chunk-4ae0200c":"32c14596","chunk-7a25313a":"0b02e54c","chunk-d89e6198":"3150f980","chunk-d38dc67e":"ab84683a","chunk-7ad495bf":"75747fd9","chunk-b5d299f2":"4f55dfc7","chunk-0a0d3ad6":"33ea41b5","chunk-fea4eb42":"191ab795"}[e]+".js"}function r(c){if(u[c])return u[c].exports;var n=u[c]={i:c,l:!1,exports:{}};return e[c].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.e=function(e){var c=[],n={"chunk-48dcde72":1,"chunk-201c0396":1,"chunk-26aa192a":1,"chunk-2c6cd7be":1,"chunk-04dff74e":1,"chunk-8960d1b6":1,"chunk-4adb9048":1,"chunk-5d23b120":1,"chunk-85a2e2d8":1,"chunk-495b3b99":1,"chunk-08d7cab3":1,"chunk-291c8555":1,"chunk-03e4f198":1,"chunk-515db732":1,"chunk-ec6a3d1c":1,"chunk-c9c77a48":1,"chunk-0e0b280e":1,"chunk-47eed6e4":1,"chunk-243d09ae":1,"chunk-44900a0d":1,"chunk-64670b04":1,"chunk-ec8fa258":1,"chunk-4a79fb70":1,"chunk-4ae0200c":1,"chunk-7a25313a":1,"chunk-d89e6198":1,"chunk-d38dc67e":1,"chunk-b5d299f2":1,"chunk-0a0d3ad6":1,"chunk-fea4eb42":1};a[e]?c.push(a[e]):0!==a[e]&&n[e]&&c.push(a[e]=new Promise((function(c,n){for(var u="static/css/"+({"chunk-commons":"chunk-commons"}[e]||e)+"."+{"chunk-09784ec9":"31d6cfe0","chunk-5f8a81f5":"31d6cfe0","chunk-48dcde72":"4e0b5cf8","chunk-201c0396":"3bec9bdf","chunk-26aa192a":"2af0888d","chunk-2c6cd7be":"577279a3","chunk-2d0aa5b8":"31d6cfe0","chunk-04dff74e":"8bd549e9","chunk-8960d1b6":"d43cc52a","chunk-2d0b9293":"31d6cfe0","chunk-4adb9048":"6e6b0b74","chunk-5d23b120":"0b74763b","chunk-85a2e2d8":"99ec93e0","chunk-aa6495fe":"31d6cfe0","chunk-495b3b99":"40cb5e47","chunk-5db5f624":"31d6cfe0","chunk-08d7cab3":"86ed856d","chunk-291c8555":"d66896f4","chunk-e6c00ab8":"31d6cfe0","chunk-03e4f198":"0e23a2c4","chunk-515db732":"ccf69b0e","chunk-ec6a3d1c":"3d0ac165","chunk-c9c77a48":"a37cd815","chunk-commons":"31d6cfe0","chunk-0e0b280e":"ff6fa18a","chunk-47eed6e4":"3de502ed","chunk-6f5de554":"31d6cfe0","chunk-243d09ae":"79a92fcd","chunk-44900a0d":"9c0e30cb","chunk-64670b04":"94095f03","chunk-ec8fa258":"db72f820","chunk-4a79fb70":"c452ee63","chunk-4ae0200c":"423b9be8","chunk-7a25313a":"3225998f","chunk-d89e6198":"38d255bc","chunk-d38dc67e":"34fb2242","chunk-7ad495bf":"31d6cfe0","chunk-b5d299f2":"fd0d3da7","chunk-0a0d3ad6":"6c805bdf","chunk-fea4eb42":"51ca3679"}[e]+".css",t=r.p+u,d=document.getElementsByTagName("link"),h=0;h<d.length;h++){var f=d[h],k=f.getAttribute("data-href")||f.getAttribute("href");if("stylesheet"===f.rel&&(k===u||k===t))return c()}var o=document.getElementsByTagName("style");for(h=0;h<o.length;h++){f=o[h],k=f.getAttribute("data-href");if(k===u||k===t)return c()}var b=document.createElement("link");b.rel="stylesheet",b.type="text/css",b.onload=c,b.onerror=function(c){var u=c&&c.target&&c.target.src||t,d=new Error("Loading CSS chunk "+e+" failed.\n("+u+")");d.code="CSS_CHUNK_LOAD_FAILED",d.request=u,delete a[e],b.parentNode.removeChild(b),n(d)},b.href=t;var i=document.getElementsByTagName("head")[0];i.appendChild(b)})).then((function(){a[e]=0})));var u=t[e];if(0!==u)if(u)c.push(u[2]);else{var d=new Promise((function(c,n){u=t[e]=[c,n]}));c.push(u[2]=d);var f,k=document.createElement("script");k.charset="utf-8",k.timeout=120,r.nc&&k.setAttribute("nonce",r.nc),k.src=h(e),f=function(c){k.onerror=k.onload=null,clearTimeout(o);var n=t[e];if(0!==n){if(n){var u=c&&("load"===c.type?"missing":c.type),a=c&&c.target&&c.target.src,d=new Error("Loading chunk "+e+" failed.\n("+u+": "+a+")");d.type=u,d.request=a,n[1](d)}t[e]=void 0}};var o=setTimeout((function(){f({type:"timeout",target:k})}),12e4);k.onerror=k.onload=f,document.head.appendChild(k)}return Promise.all(c)},r.m=e,r.c=u,r.d=function(e,c,n){r.o(e,c)||Object.defineProperty(e,c,{enumerable:!0,get:n})},r.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,c){if(1&c&&(e=r(e)),8&c)return e;if(4&c&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&c&&"string"!=typeof e)for(var u in e)r.d(n,u,function(c){return e[c]}.bind(null,u));return n},r.n=function(e){var c=e&&e.__esModule?function(){return e["default"]}:function(){return e};return r.d(c,"a",c),c},r.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},r.p="/",r.oe=function(e){throw console.error(e),e};var f=window["webpackJsonp"]=window["webpackJsonp"]||[],k=f.push.bind(f);f.push=c,f=f.slice();for(var o=0;o<f.length;o++)c(f[o]);var b=k;n()})([]);</script><script src=/static/js/app.45db1781.js></script></body><script>var docEl = document.documentElement,
    //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，
    //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
    //总来的来就是监听当前窗口的变化，一旦有变化就需要重新设置根字体的值

 src/components/Echarts/LineChartSpe.vue

@@ -45,12 +45,10 @@
  },
  watch: {
    chartData: {

      handler(val) {
        this.setOptions(val)
      },
      deep: true,

    },
  },
  mounted() {
@@ -90,22 +88,23 @@
            },
          },
          grid: {
            left: 10,
            left: 100,
            right: 10,
            bottom: 20,
            top: 30,
            height: fontSize(3.5),
            width: fontSize(15),
            containLabel: true,
          },
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: 'none',
              },
              restore: {},
              saveAsImage: {},
            },
          },
          // toolbox: {
          //   feature: {
          //     dataZoom: {
          //       yAxisIndex: 'none',
          //     },
          //     restore: {},
          //     saveAsImage: {},
          //   },
          // },
          // tooltip: {
          //   trigger: 'axis',
          //   position: function(pt) {
@@ -127,11 +126,55 @@
            // },
          },

          yAxis: {
            axisLabel: {
              show: false,
          yAxis: [
            {
              
              type: 'value',
              position: 'left',
              axisLabel: {
                show: true,
              },
            },
          },
            {
             
              type: 'value',
              position: 'right',
              axisLabel: {
                show: true,
              },
            },
            {
             
              type: 'value',
              position: 'right',
              offset: 50,
              axisLabel: {
                show: true,
              },
              min: 'dataMin', //取最小值为最小刻度
              max: 'dataMax', //取最大值为最大刻度
              min: function (value) {
                //取最小值向下取整为最小刻度
                return Math.floor(value.min)
              },
              max: function (value) {
                //取最大值向上取整为最大刻度
                return Math.ceil(value.max)
              },

              scale: true, //自适应
              minInterval: 0.1, //分割刻度
            },
            {
             
              type: 'value',
              position: 'left',
              axisLabel: {
                show: true,
              },
              offset: 50,
            },
          ],
          legend: {
            icon: 'circle',
            itemHeight: 15,
@@ -149,10 +192,9 @@
            {
              start: 0,
              end: 10,
              top:fontSize(4),
              top: fontSize(4),
              height: fontSize(0.4),
            },

          ],
          series: val.series,
          // [{

 src/router/dynamicRouter.js

@@ -56,7 +56,7 @@
  path: 'charts/contrast',
  name: 'contrast',
  component: () => import('@/views/contrast/index'),
  meta: { title: '监测因子对比', icon: 'example' }
  meta: { title: '监测因子相关性对比', icon: 'example' }
}

const averageContrast = {

 src/views/contrast/index.vue

@@ -1,5 +1,5 @@
+<template>
  <div style="width: 100%; height: 100%">
  <div style="width: 100%; height: 100%; margin:0 auto">
    <div class="topSelect">
      <el-cascader
        v-model="newMac"
@@ -57,7 +57,7 @@
      <div style="position:absolute">(单位:ug/m³)</div>
      <div style="text-align: center;width: 100%;">{{ newData }}·{{ newMac?newMac[0]:'' }}·{{ newMac?newMac[newMac.length - 1][0]:'' }}·{{ value |sensorFilter }}·趋势图</div>
    </div> -->
    <LineChart :chart-data="lineChartData"  style="height: 23rem"/>
    <LineChart :chart-data="lineChartData"  style="height: 23rem;"/>
  </div>
</template>

@@ -274,6 +274,7 @@
        series: [],
        xAxis: [],
        title: [],
        yAxis:[]
      }
      this.newXData = []
      this.$request({
@@ -299,7 +300,8 @@
            newLineChartData.xAxis.push(data[0].timeValueList[i].time)
          }
          for (var i = 0; i < data.length; i++) {
             newLineChartData.series.push({ data: [], name: '', type: 'line' })
            newLineChartData.series.push({ data: [], name: '', type: 'line' ,yAxisIndex:data[i].code})
            // newLineChartData.yAxis.push({})
            newLineChartData.series[i].name = data[i].name
            newLineChartData.title.push(data[i].name);
            for (var j = 0; j < data[i].timeValueList.length; j++) {

 src/views/deviceDetail/index.vue

@@ -3,88 +3,242 @@
    :style="{
      color: '#fff',
      backgroundSize: 'cover',
      backgroundImage:
        'url(' + require('../../assets/images/sixBg2.jpg') + ')',
      height:'100%'
      backgroundImage: 'url(' + require('../../assets/images/sixBg2.jpg') + ')',
      height: '100%',
    }"
  >
    <el-aside width="31%">
      <el-main style="display:flex;flex-flow: column;height: 100%;padding-left: 0;padding-right: 0;margin-left:10px">
      <el-main
        style="
          display: flex;
          flex-flow: column;
          height: 100%;
          padding-left: 0;
          padding-right: 0;
          margin-left: 10px;
        "
      >
        <div
          class="left0"
          :style="{display:'flex',flexDirection:'column',alignContent:'center',flex:'1',padding: '0 20px 10px 20px'}"
          :style="{
            display: 'flex',
            flexDirection: 'column',
            alignContent: 'center',
            flex: '1',
            padding: '0 20px 10px 20px',
          }"
        >
          <h3 style="text-align:center;font-size: 0.9rem">{{ currentTime }}</h3>
          <h3 style="text-align: center; font-size: 0.9rem">
            {{ currentTime }}
          </h3>
          <!-- <div v-for="(val,key,i) in wsData2" v-if="i!=='name'&&i!=='address'" :key="i" style="flex:1;display:flex"> -->
          <!-- 左侧列表数组 -->
          <div v-for="(val,key,i) in defaultMonitorItems" :key="i" style="flex:1;display:flex">
            <span style="width:33%;font-size: 0.9rem">{{ val.sensorCode |sensorFilter }}</span>
            <span style="width: 33%;height: 0.9rem;font-size: 0.9rem"><el-progress :text-inside="true" :percentage="val.alarm" :color="val.colour" style="width:100%" /></span>
            <span style="width:34%;text-align:right;font-size: 0.9rem">{{ val.value }}</span>
<!--            <span><el-progress v-if="val.alarm" :text-inside="true" :stroke-width="15" :percentage="val.alarm>100?100:val.alarm" :color="val.colour" style="width:150px" /></span>
          <div
            v-for="(val, key, i) in defaultMonitorItems"
            :key="i"
            style="flex: 1; display: flex"
            
          >
            <span style="width: 33%; font-size: 0.9rem" @click="chuan(val)">{{
              val.sensorCode | sensorFilter
            }}</span>
            <span style="width: 33%; height: 0.9rem; font-size: 0.9rem"
              ><el-progress
                :text-inside="true"
                :percentage="val.alarm"
                :color="val.colour"
                style="width: 100%"
            /></span>
            <span style="width: 34%; text-align: right; font-size: 0.9rem">{{
              val.value
            }}</span>
            <!--            <span><el-progress v-if="val.alarm" :text-inside="true" :stroke-width="15" :percentage="val.alarm>100?100:val.alarm" :color="val.colour" style="width:150px" /></span>
            <span style="width:50%;text-align:right">{{ val.value }}</span>-->
          </div>
          <!-- <div style="flex:1;display:flex"><span>VOCs总量</span><el-progress style="flex:1;padding:0 10px" :text-inside="true" :stroke-width="24" :percentage="0" status="success" /><span>mg/m³</span> </div> -->
          <!-- <div style="flex:1;display:flex"><span>VOCs总量</span><el-progress style="flex:1;padding:0 10px" :text-inside="true" :stroke-width="24" :percentage="50" status="success" /><span>mg/m³</span> </div> -->
          <!-- <div style="flex:1;display:flex"><span>VOCs总量</span><el-progress style="flex:1;padding:0 10px" :text-inside="true" :stroke-width="24" :percentage="33" status="success" /><span>mg/m³</span> </div>   :stroke-width="15"-->
        </div>
        <div class="border-top" style="height:150px;display:flex;margin-top:10px">
        <div
          class="border-top"
          style="height: 150px; display: flex; margin-top: 10px"
        >
          <!-- 左下角风向数组 -->
          <div v-if="wsData2 && wsData2.a01008" class="border-right left1" style="display:flex;flex:1;justify-content: space-around;align-items: center">
            <div style="position:relative">
          <div
            v-if="wsData2 && wsData2.a01008"
            class="border-right left1"
            style="
              display: flex;
              flex: 1;
              justify-content: space-around;
              align-items: center;
            "
          >
            <div style="position: relative">
              <img style="width: 5.5rem; height: 5.5rem" :src="compassBg" />
              <img
                style="width: 5.5rem; height: 5.5rem"
                :src="compassBg"
              >
              <img
                style="font-size:2rem;width: 2rem; height: 2rem;position: absolute;left: 0;top: 0;margin-left: 50%;margin-top: 50%;transform: translate(-50%, -50%);"
                style="
                  font-size: 2rem;
                  width: 2rem;
                  height: 2rem;
                  position: absolute;
                  left: 0;
                  top: 0;
                  margin-left: 50%;
                  margin-top: 50%;
                  transform: translate(-50%, -50%);
                "
                :src="compassDirection"
                :style="{transform:'translate(-50%, -50%) rotate('+ windDeg +'deg)'}"
              >
                :style="{
                  transform: 'translate(-50%, -50%) rotate(' + windDeg + 'deg)',
                }"
              />
            </div>
            <div style="text-align:center;font-size:1rem">
            <div style="text-align: center; font-size: 1rem">
              <div>{{ windDir }}</div>
              <div style="margin-top:15px">{{ wsData2? wsData2.a01008:'无数据' }}</div>
              <div style="margin-top: 15px">
                {{ wsData2 ? wsData2.a01008 : '无数据' }}
              </div>
            </div>
          </div>
          <div
            class="left2"
            style="flex: 1 1 0%;text-align: center;display: flex;flex-direction: column;justify-content: center"
            style="
              flex: 1 1 0%;
              text-align: center;
              display: flex;
              flex-direction: column;
              justify-content: center;
            "
          >
            <div style="font-size:0.9rem">空气质量指数(小时平均)</div>
            <div style="font-size:1.5rem;margin-top:7px">
              {{ aqi }}<span style="font-size:0.8rem">(AQI)</span>
            <div style="font-size: 0.9rem">空气质量指数(小时平均)</div>
            <div style="font-size: 1.5rem; margin-top: 7px">
              {{ aqi }}<span style="font-size: 0.8rem">(AQI)</span>
            </div>
          </div>
        </div>
      </el-main>
    </el-aside>
    <el-container class="border-left border-right" style="margin: 0 10px;">
      <el-header class="title0" style="text-align:center;display:unset!important;margin-top:10px;"><h1 style="text-align:center;text-align: center;margin: 0;padding-top: 20px;font-size: 1.2rem" @click="websocketData()">{{ deviceName? deviceName:'停机' }}</h1></el-header>
      <el-main style="padding-left:0;padding-right:0;padding-top:0;display: flex;flex-direction: column;" class="noneScoll">
        <div class="middle0" style="padding: 20px 0;margin-bottom: 10px;height:50%;min-height:394px">
          <div style="display:flex;flex-flow: row wrap;height:356px">
    <el-container class="border-left border-right" style="margin: 0 10px">
      <el-header
        class="title0"
        style="text-align: center; display: unset !important; margin-top: 10px"
        ><h1
          style="
            text-align: center;
            text-align: center;
            margin: 0;
            padding-top: 20px;
            font-size: 1.2rem;
          "
          @click="websocketData()"
        >
          {{ deviceName ? deviceName : '停机' }}
        </h1></el-header
      >
      <el-main
        style="
          padding-left: 0;
          padding-right: 0;
          padding-top: 0;
          display: flex;
          flex-direction: column;
        "
        class="noneScoll"
      >
        <div
          class="middle0"
          style="
            padding: 20px 0;
            margin-bottom: 10px;
            height: 50%;
            min-height: 394px;
          "
        >
          <div style="display: flex; flex-flow: row wrap; height: 356px">
            <!-- 中间核心数组 -->
            <div v-for="(val,key,i) in coreMonitorItems" :key="i" style="position: relative;width:33%;height: 50%;font-size: 0.9rem" class="circleWH" ref='test'>
<!--              <div style="position: relative;width: 155px;height: 155px;margin: 0px auto;" :class="{'alarmBg5':val.bg === 5,'alarmBg4':val.bg === 4,'alarmBg3':val.bg === 3,'alarmBg2':val.bg === 2,'alarmBg1':val.bg === 1,'alarmBg0':val.bg === 0,}">-->
              <div style="position: relative;width: 75%;height:80%;margin: 0px auto;background-size: contain;background-position:center" :class="{'alarmBg5':val.bg === 5,'alarmBg4':val.bg === 4,'alarmBg3':val.bg === 3,'alarmBg2':val.bg === 2,'alarmBg1':val.bg === 1,'alarmBg0':val.bg === 0,}">
            <div
              v-for="(val, key, i) in coreMonitorItems"
              :key="i"
              style="
                position: relative;
                width: 33%;
                height: 50%;
                font-size: 0.9rem;
              "
              class="circleWH"
              ref="test"
            >
              <!--              <div style="position: relative;width: 155px;height: 155px;margin: 0px auto;" :class="{'alarmBg5':val.bg === 5,'alarmBg4':val.bg === 4,'alarmBg3':val.bg === 3,'alarmBg2':val.bg === 2,'alarmBg1':val.bg === 1,'alarmBg0':val.bg === 0,}">-->
              <div
                style="
                  position: relative;
                  width: 75%;
                  height: 80%;
                  margin: 0px auto;
                  background-size: contain;
                  background-position: center;
                "
                :class="{
                  alarmBg5: val.bg === 5,
                  alarmBg4: val.bg === 4,
                  alarmBg3: val.bg === 3,
                  alarmBg2: val.bg === 2,
                  alarmBg1: val.bg === 1,
                  alarmBg0: val.bg === 0,
                }"
              >
                <!-- <img :src="{alarmBg5:val.bg === 5,alarmBg4:val.bg === 4,alarmBg3:val.bg === 3,alarmBg2:val.bg === 2,alarmBg1:val.bg === 1,alarmBg0:val.bg === 0}" alt="" style="display: block;margin: 0 auto;"> -->
<!--                <div style="position: absolute;top: 0;left: 0;margin-left: 50%;margin-top: 50%;transform: translate(-50%, -50%);color: #fff;text-align:center">{{ val.value? val.value:'无数据' }}</div>-->
                <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;text-align:center">{{ val.value? val.value:'无数据' }}</div>
                <!--                <div style="position: absolute;top: 0;left: 0;margin-left: 50%;margin-top: 50%;transform: translate(-50%, -50%);color: #fff;text-align:center">{{ val.value? val.value:'无数据' }}</div>-->
                <div
                  style="
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    color: #fff;
                    text-align: center;
                  "
                >
                  {{ val.value ? val.value : '无数据' }}
                </div>
              </div>
              <div style="text-align:center;padding-top:5px">{{ val.sensorCode |sensorFilter }}</div>
              <div
                style="text-align: center; padding-top: 5px"
                @click="chuan2(val)"
              >
                {{ val.sensorCode | sensorFilter }}
              </div>
            </div>
          </div>
        </div>
        <div class="border-top" style="display:flex;height:50%">
          <div ref="main" class="middle1" style="flex:1;padding-top:30px" />
        <div class="border-top" style="display: flex; height: 50%">
          <div ref="main" class="middle1" style="flex: 1; padding-top: 2rem" />
          <!-- <line-chart :chart-data="lineChartData" /> -->
          <div class="border-left middle2" style="width: 11rem;text-align:center;padding-top:50px;margin-left:10px">
          <div
            class="border-left middle2"
            style="
              width: 11rem;
              text-align: center;
              padding-top: 50px;
              margin-left: 10px;
            "
          >
            <h3 style="font-size: 0.9rem">本月平均值</h3>
            <div>
              <div style="font-size: 0.9rem">非甲烷总烃</div>
              <div style="padding:8px 0 0;font-size:2.3rem;font-weight:bold">{{ average }}</div>
              <div style="text-align:right;padding-right:10px;font-size: 0.9rem">(ppm)</div>
              <div style="font-size: 0.9rem">{{ chartSensorName }}</div>
              <div
                style="padding: 8px 0 0; font-size: 2.3rem; font-weight: bold"
              >
                {{ average }}
              </div>
              <div
                style="
                  text-align: right;
                  padding-right: 10px;
                  font-size: 0.9rem;
                "
              ></div>
            </div>
          </div>
        </div>
@@ -92,36 +246,85 @@
    </el-container>
    <el-aside width="21%">
      <el-main
        style="padding-left:0;padding-right:0;display: flex;flex-direction: column;margin-right:10px;overflow:hidden"
        style="
          padding-left: 0;
          padding-right: 0;
          display: flex;
          flex-direction: column;
          margin-right: 10px;
          overflow: hidden;
        "
      >
        <div class="border-bottom right0" style="text-align: center;padding-bottom: 25px;margin-bottom:10px;height: 60%">
          <div style="height:100%;display: flex;flex-direction: column;">
            <div style="height:30%">
              <h3 style="text-align:center;font-size: 0.9rem" v-if="macLat"><span>坐标：</span>  {{ macLat }}, {{ macLng }}</h3>
        <div
          class="border-bottom right0"
          style="
            text-align: center;
            padding-bottom: 25px;
            margin-bottom: 10px;
            height: 60%;
          "
        >
          <div style="height: 100%; display: flex; flex-direction: column">
            <div style="height: 30%">
              <h3 style="text-align: center; font-size: 0.9rem" v-if="macLat">
                <span>坐标：</span> {{ macLat }}, {{ macLng }}
              </h3>
              <h3 style="font-size: 0.9rem">实时监测超标预警</h3>
            </div>
            <div style="height:70%">
<!--              padding-top: 4%-->
              <img style="" :src="url1" alt="" style="width:70%">
            <div style="height: 70%">
              <!--              padding-top: 4%-->
              <img :src="url1" alt="" style="width: 70%" />
            </div>
            <div>
              <img style="width: 75%" :src="url2" alt="">
              <img style="width: 75%" :src="url2" alt="" />
            </div>
          </div>
        </div>
        <div class="right1" style="height:40%;display: flex;flex-direction: column;" v-if="monitorPointInfo">
          <h3 style="text-align:center; font-size: 0.9rem">设备列表</h3>
          <ul class="listUl" style="overflow: auto;padding:0 10% 10% 10%;font-size: 0.9rem; margin-top: 0">
            <li v-for="(v,i) in monitorPointInfo.devices" :key="i" class="listLi" :class="{liActive:libg==i}" @click="reMac(v.mac,i,v.name)">{{ v.name }}</li>
        <div
          class="right1"
          style="height: 40%; display: flex; flex-direction: column"
          v-if="monitorPointInfo"
        >
          <h3 style="text-align: center; font-size: 0.9rem">设备列表</h3>
          <ul
            class="listUl"
            style="
              overflow: auto;
              padding: 0 10% 10% 10%;
              font-size: 0.9rem;
              margin-top: 0;
            "
          >
            <li
              v-for="(v, i) in monitorPointInfo.devices"
              :key="i"
              class="listLi"
              :class="{ liActive: libg == i }"
              @click="reMac(v.mac, i, v.name)"
            >
              {{ v.name }}
            </li>
          </ul>
        </div>
        <div class="right1" style="height:40%;display: flex;flex-direction: column;" v-else>
          <h3 style="text-align:center; font-size: 0.9rem">标准值</h3>
          <ul class="listUl" style="overflow: auto;padding:0 10%;font-size: 0.9rem; margin-top: 0">
        <div
          class="right1"
          style="height: 40%; display: flex; flex-direction: column"
          v-else
        >
          <h3 style="text-align: center; font-size: 0.9rem">标准值</h3>
          <ul
            class="listUl"
            style="
              overflow: auto;
              padding: 0 10%;
              font-size: 0.9rem;
              margin-top: 0;
            "
          >
            <li>PM2.5: &nbsp;[ 0, 35 ]</li>
            <li>PM10: &nbsp;&nbsp;[ 0, 50 ]</li>
            <li>NO2: &nbsp;&nbsp;&nbsp;&nbsp;[ 0, 40 ]</li>
            <li>SO2: &nbsp;&nbsp;&nbsp;&nbsp;[ 0, 50 ]</li>
            <li>SO2: &nbsp;&nbsp;&nbsp;&nbsp;[ 0, 150 ]</li>
            <li>CO: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[ 0, 2 ]</li>
            <li>O3: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[ 0, 160 ]</li>
          </ul>
@@ -138,20 +341,21 @@
import json from '@/assets/json/sensor.json'
// import { parse } from 'path-to-regexp'
// import LineChart from '@/components/Echarts/LineChart'
// import draggable from 'vuedraggable'
export default {
// import 引入的组件需要注入到对象中才能使用
  // import 引入的组件需要注入到对象中才能使用
  components: {
    // LineChart
    // draggable
  },
  filters: {
    // 过滤器替换websocket实时数据的key值
    sensorFilter: function(value) {
    sensorFilter: function (value) {
      if (!value) return ''
      return json[value]
    }
    },
  },
  props: {
  },
  props: {},
  data() {
    // 这里存放数据
    return {
@@ -160,7 +364,7 @@
      url2: require('@/assets/images/alarmstate-1.png'),
      bg: {
        backgroundImage: 'url(' + require('@/assets/images/bg1.png') + ')',
        backgroundRepeat: 'round'
        backgroundRepeat: 'round',
      },
      wsData1: null,
      wsData2: null,
@@ -184,27 +388,12 @@
      // 报警等级
      alarmLevel: null,
      alarmLevelDome: {
        a00e12: '[10000, 15000, 20000]',
        a00e13: '[60, 90, 120]',
        a00e34: null,
        a35e21: null,
        a01001: '[25, 30, 60]',
        a01002: '[60, 100, 160]',
        a01006: null,
        a01007: '[5, 6, 8]',
        a01008: null,
        a05024: '[160, 200, 300, 400, 800]',
        a06001: null,
        a19002: null,
        a21004: '[100, 200, 700, 1200, 2340]',
        a21005: '[5, 10, 35, 60, 90]',
        a21026: '[150, 500, 650, 800, 1600]',
        a34002: '[50, 150, 250, 350, 420]',
        a34004: '[35, 75, 115, 150, 250]',
        a99054: '[1.5, 3, 5]',
        dustld: null,
        flylat: null,
        flylon: null
        a05024: '[0, 160, 200, 300, 400, 800]', //臭氧
        a21004: '[0, 100, 200, 700, 1200, 2340]', //二氧化氮
        a21005: '[0, 5, 10, 35, 60, 90]', //一氧化碳
        a21026: '[0, 150, 500, 650, 800, 1600]', //二氧化硫
        a34002: '[0, 50, 150, 250, 350, 420]', //PM10
        a34004: '[0, 35, 75, 115, 150, 250]', //PM2.5
      }, // 假设报警等级
      // 报警进度条
      alarmProgress: {},
@@ -231,6 +420,7 @@
      alarmBg0: require('@/assets/images/level0_circle0.gif'),
      deviceName: '',
      chartSensorKey: [],
      chartSensor1: '',
      coreMonitorItems: [],
      defaultMonitorItems: [],
      fixedMonitorItems: [],
@@ -243,15 +433,15 @@
        CO2: '',
        SO2: '',
        CO: '',
        O3: ''
      }
        O3: '',
      },
    }
  },
  // 计算属性 类似于data概念
  computed: {
    leftaSide() {
      return this.$store.state.leftaSide
    }
    },
  },
  // 监控data中的数据变化
  watch: {
@@ -263,7 +453,7 @@
      // this.myChart.resize()
      this.myChart = null
      // this.drawChart()
    }
    },
  },
  // 生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
@@ -289,7 +479,7 @@
    this.websocketData()
    this.getkeyName()
    this.getHourlyAqi()
    this.getSensorMonthAvg()
    // this.getSensorMonthAvg()
    this.$watch('chartSensorKey', () => {
      this.filterSensorName()
    })
@@ -327,6 +517,24 @@
  activated() {},
  // 方法集合
  methods: {
    chuan(val) {
      console.log(val)
      this.chartSensorKey[0] = {}
      this.chartSensorKey[0] = val
      this.getSensorMonthAvg()
      this.PM2_5Data = []
      this.filterSensorName()
      // console.log(this.chartSensorKey[0].sensorCode);
      // console.log(this.chartSensorKey)
    },
    chuan2(val) {
      console.log(val)
      this.chartSensorKey[0] = {}
      this.chartSensorKey[0] = val
      this.getSensorMonthAvg()
      this.PM2_5Data = []
      this.filterSensorName()
    },
    // 修改圆圈的宽高
    getCircleWH() {
      // var circleWHList = document.getElementsByClassName('circleWH')
@@ -337,7 +545,9 @@
    },
    // 过滤图表因子名称
    filterSensorName() {
      this.chartSensorName = this.$options.filters.sensorFilter(this.chartSensorKey[0].sensorCode)
      this.chartSensorName = this.$options.filters.sensorFilter(
        this.chartSensorKey[0].sensorCode
      )
    },
    // 因子布局接口
    sensorLayout() {
@@ -346,55 +556,63 @@
          url: '/organizationLayout/getLayoutByMac',
          method: 'get',
          params: {
            mac: this.macName
          }
            mac: this.macName,
          },
        })
          .then(res => {
            // console.log('因子布局接口')
            // console.log(res)
          .then((res) => {
            console.log(res, '因子布局接口')
            this.chartSensorKey = res.data.chartSensorKey
            this.coreMonitorItems = res.data.coreMonitorItems
            this.defaultMonitorItems = res.data.defaultMonitorItems
            this.fixedMonitorItems = res.data.fixedMonitorItems
            this.totalArray.push(...this.chartSensorKey, ...this.coreMonitorItems, ...this.defaultMonitorItems, ...this.fixedMonitorItems)
            this.totalArray.push(
              ...this.chartSensorKey,
              ...this.coreMonitorItems,
              ...this.defaultMonitorItems,
              ...this.fixedMonitorItems
            )
            this.getSensorMonthAvg()
            resolve()
          })
          .catch(err => {
          .catch((err) => {
            console.log(err)
          })
      })
    },
    // 调用污染程度接口
    getAlarmLevels() {
      this.$axios.get('http://121.43.179.139:8080/screen_api_v2/screen/alarm-levels', {
        params: {
          mac: this.macName,
          primaryKey: this.macName
        }
      }).then((res) => {
        this.alarmLevels = res.data
        // console.log('以下是alarm-levels的返回')
        // console.log(this.alarmLevels)
      }).catch((err) => {
        console.log(err)
      })
      this.$axios
        .get('http://121.43.179.139:8080/screen_api_v2/screen/alarm-levels', {
          params: {
            mac: this.macName,
            primaryKey: this.macName,
          },
        })
        .then((res) => {
          this.alarmLevels = res.data
          // console.log('以下是alarm-levels的返回')
          // console.log(this.alarmLevels)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 获得实时日期更新
    getTime() {
      var _this = this // 声明一个变量指向Vue实例this，保证作用域一致
      this.timer = setInterval(function() {
      this.timer = setInterval(function () {
        _this.currentTime = // 修改数据date
        _this.appendZero(new Date().getFullYear()) +
        '-' +
        _this.appendZero((new Date().getMonth() + 1)) +
        '-' +
        _this.appendZero(new Date().getDate()) +
        ' ' +
        _this.appendZero(new Date().getHours()) +
        ': ' +
        _this.appendZero(new Date().getMinutes()) +
        ': ' +
        _this.appendZero(new Date().getSeconds())
          _this.appendZero(new Date().getFullYear()) +
          '-' +
          _this.appendZero(new Date().getMonth() + 1) +
          '-' +
          _this.appendZero(new Date().getDate()) +
          ' ' +
          _this.appendZero(new Date().getHours()) +
          ': ' +
          _this.appendZero(new Date().getMinutes()) +
          ': ' +
          _this.appendZero(new Date().getSeconds())
      }, 1000)
    },
    appendZero(obj) {
@@ -431,15 +649,18 @@
        url: '/deviceInfo/getHourlyAqi',
        method: 'get',
        params: {
          mac: this.macName
        }
      }).then((res) => {
        // console.log('以下是getHourlyAqi请求的返回')
        // console.log(res)
        this.aqi = res.data.AQI
      }).catch((err) => {
        console.log(err)
          mac: this.macName,
        },
      })
        .then((res) => {
          // console.log('以下是getHourlyAqi请求的返回')
          // console.log(res)
          this.aqi = res.data.AQI
        })
        .catch((err) => {
          // console.log(this.chartSensorKey[0].sensorCode);
          console.log(err)
        })
    },
    // 请求单台设备某参数月平均值
    getSensorMonthAvg() {
@@ -447,16 +668,19 @@
        url: '/deviceInfo/getMonthAvg',
        method: 'get',
        params: {
          sensorCode: 'a24088',
          mac: this.macName
        }
      }).then((res) => {
        // console.log('以下是sensorMonthAvg请求的返回')
        // console.log(res)
        this.average = res.data.avg
      }).catch((err) => {
        console.log(err)
          sensorCode: this.chartSensorKey[0].sensorCode,
          mac: this.macName,
        },
      })
        .then((res) => {
          // console.log(res,'123');
          // console.log('以下是sensorMonthAvg请求的返回')
          // console.log(res)
          this.average = res.data.avg
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 因子报警值排序
    alarmSort() {
@@ -489,28 +713,37 @@
        // socketUrl = 'http://192.168.0.33:8081/cruiserWebsocket/' + this.macName
      } else {
        socketUrl = 'http://47.99.64.149:8081/singleDevice/' + this.macName
        // socketUrl = 'http://192.168.0.4:8081/singleDevice/' + this.macName
      }
      // 替换http为WS
      socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')

      this.ws = new WebSocket(socketUrl)

      this.ws.onopen = function() {
      this.ws.onopen = function () {
        console.log('websocket开启成功')
      }
      console.log(2)
      // this.ws.send('{"mac":' + '"' + this.macName + '"' + ',"accountIdInfo":' + this.$store.state.accountId + '}')
      // 获得消息事件
      this.ws.onmessage = function(msg) {
      this.ws.onmessage = function (msg) {
        // console.log(1);
        // if (JSON.parse(msg.data).名称) {
        that.wsData2 = JSON.parse(msg.data)
        // console.log(msg.data, 'data2')
        // that.wsData2.on('click',function (params) {
        //     console.log(params);
        // })
        if (that.wsData2.dustld) {
          that.wsData2.dustld = that.wsData2.dustld.replace(/g/, 'ug')
        }
        // console.log('以下是websocket返回数据')
        // console.log(that.wsData2)
        // console.log(that.wsData2, '0')
        // 风向算法
        if (that.wsData2.a01008) {
          var windDirs = Number(that.wsData2.a01008.substr(0, that.wsData2.a01008.length - 1))
          var windDirs = Number(
            that.wsData2.a01008.substr(0, that.wsData2.a01008.length - 1)
          )
          // console.log(windDirs)
          that.windDeg = windDirs
          if (windDirs === 0) {
@@ -536,26 +769,46 @@
        that.alarmBg = {}
        // 报警等级
        for (const key in that.wsData2) {
          if (that.chartSensorKey && key === that.chartSensorKey[0].sensorCode) {
          // console.log(key,'key');
          if (
            that.chartSensorKey &&
            key === that.chartSensorKey[0].sensorCode
          ) {
            // console.log(that.wsData2[key],'kk');
            that.chartSensorKey[0].value = that.wsData2[key]
          }
          // console.log(that.alarmLevel, 'that.alarmLevel')
          for (const keys in that.alarmLevel) {
            // 遍历进度条颜色
            if (key === keys && JSON.parse(that.alarmLevel[keys])) {
              if (parseFloat(that.wsData2[key]) >= parseFloat(JSON.parse(that.alarmLevel[keys])[5])) {
                that.alarmColour[keys] = '#9f012f'
              if (
                parseFloat(that.wsData2[key]) >=
                parseFloat(JSON.parse(that.alarmLevel[keys])[5])
              ) {
                that.alarmColour[keys] = '#000000'
                that.alarmBg[keys] = 5
              } else if (parseFloat(that.wsData2[key]) >= parseFloat(JSON.parse(that.alarmLevel[keys])[4])) {
              } else if (
                parseFloat(that.wsData2[key]) >=
                parseFloat(JSON.parse(that.alarmLevel[keys])[4])
              ) {
                that.alarmColour[keys] = '#c00261'
                that.alarmBg[keys] = 4
              } else if (parseFloat(that.wsData2[key]) >= parseFloat(JSON.parse(that.alarmLevel[keys])[3])) {
              } else if (
                parseFloat(that.wsData2[key]) >=
                parseFloat(JSON.parse(that.alarmLevel[keys])[3])
              ) {
                that.alarmColour[keys] = '#fc0101'
                that.alarmBg[keys] = 3
              } else if (parseFloat(that.wsData2[key]) >= parseFloat(JSON.parse(that.alarmLevel[keys])[2])) {
              } else if (
                parseFloat(that.wsData2[key]) >=
                parseFloat(JSON.parse(that.alarmLevel[keys])[2])
              ) {
                that.alarmColour[keys] = '#ff8202'
                that.alarmBg[keys] = 2
              } else if (parseFloat(that.wsData2[key]) >= parseFloat(JSON.parse(that.alarmLevel[keys])[1])) {
              } else if (
                parseFloat(that.wsData2[key]) >=
                parseFloat(JSON.parse(that.alarmLevel[keys])[1])
              ) {
                that.alarmColour[keys] = '#fdff00'
                that.alarmBg[keys] = 1
              } else {
@@ -569,22 +822,46 @@
            // 遍历进度条百分比
            if (key === keys && JSON.parse(that.alarmLevel[keys])) {
              if (JSON.parse(that.alarmLevel[keys])[5]) {
                const percentage = Math.round(parseFloat(that.wsData2[key]) / parseFloat(JSON.parse(that.alarmLevel[keys])[5]) * 100)
                const percentage = Math.round(
                  (parseFloat(that.wsData2[key]) /
                    parseFloat(JSON.parse(that.alarmLevel[keys])[5])) *
                    100
                )
                that.alarmProgress[keys] = percentage
              } else if (JSON.parse(that.alarmLevel[keys])[4]) {
                const percentage = Math.round(parseFloat(that.wsData2[key]) / parseFloat(JSON.parse(that.alarmLevel[keys])[4]) * 100)
                const percentage = Math.round(
                  (parseFloat(that.wsData2[key]) /
                    parseFloat(JSON.parse(that.alarmLevel[keys])[4])) *
                    100
                )
                that.alarmProgress[keys] = percentage
              } else if (JSON.parse(that.alarmLevel[keys])[3]) {
                const percentage = Math.round(parseFloat(that.wsData2[key]) / parseFloat(JSON.parse(that.alarmLevel[keys])[3]) * 100)
                const percentage = Math.round(
                  (parseFloat(that.wsData2[key]) /
                    parseFloat(JSON.parse(that.alarmLevel[keys])[3])) *
                    100
                )
                that.alarmProgress[keys] = percentage
              } else if (JSON.parse(that.alarmLevel[keys])[2]) {
                const percentage = Math.round(parseFloat(that.wsData2[key]) / parseFloat(JSON.parse(that.alarmLevel[keys])[2]) * 100)
                const percentage = Math.round(
                  (parseFloat(that.wsData2[key]) /
                    parseFloat(JSON.parse(that.alarmLevel[keys])[2])) *
                    100
                )
                that.alarmProgress[keys] = percentage
              } else if (JSON.parse(that.alarmLevel[keys])[1]) {
                const percentage = Math.round(parseFloat(that.wsData2[key]) / parseFloat(JSON.parse(that.alarmLevel[keys])[1]) * 100)
                const percentage = Math.round(
                  (parseFloat(that.wsData2[key]) /
                    parseFloat(JSON.parse(that.alarmLevel[keys])[1])) *
                    100
                )
                that.alarmProgress[keys] = percentage
              } else if (JSON.parse(that.alarmLevel[keys])[0]) {
                const percentage = Math.round(parseFloat(that.wsData2[key]) / parseFloat(JSON.parse(that.alarmLevel[keys])[0]) * 100)
                const percentage = Math.round(
                  (parseFloat(that.wsData2[key]) /
                    parseFloat(JSON.parse(that.alarmLevel[keys])[0])) *
                    100
                )
                that.alarmProgress[keys] = percentage
              }
            } else if (key === keys) {
@@ -600,7 +877,9 @@
          for (const key in that.wsData2) {
            if (key !== 'time') {
              // 获取数据的小数
              var tempDecimal = that.wsData2[key].replace(/[^\d.]/g, '').split('.')[1]
              var tempDecimal = that.wsData2[key]
                .replace(/[^\d.]/g, '')
                .split('.')[1]
              if (that.totalArray[i].sensorCode === key) {
                // 臭气和湿度保留整数
                if (that.totalArray[i].sensorCode === 'a19002') {
@@ -608,8 +887,13 @@
                } else if (that.totalArray[i].sensorCode === 'a01002') {
                  that.totalArray[i].value = parseInt(that.wsData2[key]) + '%'
                  // 除了TVOCQ其他因子数据小数是零的就去掉小数
                } else if (that.totalArray[i].sensorCode !== 'a99054' && Number(tempDecimal) === 0) {
                  that.totalArray[i].value = parseInt(that.wsData2[key]) + that.wsData2[key].split(' ')[1]
                } else if (
                  that.totalArray[i].sensorCode !== 'a99054' &&
                  Number(tempDecimal) === 0
                ) {
                  that.totalArray[i].value =
                    parseInt(that.wsData2[key]) +
                    that.wsData2[key].split(' ')[1]
                } else {
                  that.totalArray[i].value = that.wsData2[key]
                }
@@ -655,83 +939,115 @@
        // 判断PM2.5的超标预警
        if (e1Data > 250) {
          that.e1Bg = require('@/assets/images/level0_circle5.gif')
          that.coreMonitorItems[0].bg=5
        } else if (e1Data > 150) {
          that.coreMonitorItems[0].bg=4
          that.e1Bg = require('@/assets/images/level0_circle4.gif')
        } else if (e1Data > 115) {
          that.coreMonitorItems[0].bg=3
          that.e1Bg = require('@/assets/images/level0_circle3.gif')
        } else if (e1Data > 75) {
          that.coreMonitorItems[0].bg=2
          that.e1Bg = require('@/assets/images/level0_circle2.gif')
        } else if (e1Data > 35) {
          that.coreMonitorItems[0].bg=1
          that.e1Bg = require('@/assets/images/level0_circle1.gif')
        } else {
          // console.log(that.coreMonitorItems[0].bg,'bg');
          // that.coreMonitorItems[0].bg=1
          that.e1Bg = require('@/assets/images/level0_circle0.gif')
        }
        // 判断PM10的超标预警
        if (e2Data > 420) {
          that.coreMonitorItems[1].bg=5
          that.e2Bg = require('@/assets/images/level0_circle5.gif')
        } else if (e2Data > 350) {
          that.coreMonitorItems[1].bg=4
          that.e2Bg = require('@/assets/images/level0_circle4.gif')
        } else if (e2Data > 250) {
          that.coreMonitorItems[1].bg=3
          that.e2Bg = require('@/assets/images/level0_circle3.gif')
        } else if (e2Data > 150) {
          that.coreMonitorItems[1].bg=2
          that.e2Bg = require('@/assets/images/level0_circle2.gif')
        } else if (e2Data > 50) {
          that.coreMonitorItems[1].bg=1
          that.e2Bg = require('@/assets/images/level0_circle1.gif')
        } else {
          that.e2Bg = require('@/assets/images/level0_circle0.gif')
        }
        // 判断CO的超标预警
        if (e10Data > 90) {
          that.coreMonitorItems[3].bg=5
          that.e10Bg = require('@/assets/images/level0_circle5.gif')
        } else if (e10Data > 60) {
          that.coreMonitorItems[3].bg=4
          that.e10Bg = require('@/assets/images/level0_circle4.gif')
        } else if (e10Data > 35) {
          that.coreMonitorItems[3].bg=3
          that.e10Bg = require('@/assets/images/level0_circle3.gif')
        } else if (e10Data > 10) {
          that.coreMonitorItems[3].bg=2
          that.e10Bg = require('@/assets/images/level0_circle2.gif')
        } else if (e10Data > 5) {
          that.coreMonitorItems[3].bg=1
          that.e10Bg = require('@/assets/images/level0_circle1.gif')
        } else {
          that.e10Bg = require('@/assets/images/level0_circle0.gif')
        }
        // 判断SO2的超标预警
        if (e11Data > 90) {
        if (e11Data > 1600) {
          that.coreMonitorItems[4].bg=5
          that.e11Bg = require('@/assets/images/level0_circle5.gif')
        } else if (e11Data > 60) {
        } else if (e11Data > 800) {
          that.coreMonitorItems[4].bg=4
          that.e11Bg = require('@/assets/images/level0_circle4.gif')
        } else if (e11Data > 35) {
        } else if (e11Data > 650) {
          that.coreMonitorItems[4].bg=3
          that.e11Bg = require('@/assets/images/level0_circle3.gif')
        } else if (e11Data > 10) {
        } else if (e11Data > 500) {
          that.coreMonitorItems[4].bg=2
          that.e11Bg = require('@/assets/images/level0_circle2.gif')
        } else if (e11Data > 5) {
        } else if (e11Data > 150) {
          that.coreMonitorItems[4].bg=1
          that.e11Bg = require('@/assets/images/level0_circle1.gif')
        } else {
          that.e11Bg = require('@/assets/images/level0_circle0.gif')
        }
        // 判断O3的超标预警
        if (e15Data > 800) {
          that.coreMonitorItems[5].bg=5
          that.e15Bg = require('@/assets/images/level0_circle5.gif')
        } else if (e15Data > 400) {
          that.coreMonitorItems[5].bg=4
          that.e15Bg = require('@/assets/images/level0_circle4.gif')
        } else if (e15Data > 300) {
          that.coreMonitorItems[5].bg=3
          that.e15Bg = require('@/assets/images/level0_circle3.gif')
        } else if (e15Data > 200) {
          that.coreMonitorItems[5].bg=2
          that.e15Bg = require('@/assets/images/level0_circle2.gif')
        } else if (e15Data > 160) {
          that.coreMonitorItems[5].bg=1
          that.e15Bg = require('@/assets/images/level0_circle1.gif')
        } else {
          that.e15Bg = require('@/assets/images/level0_circle0.gif')
        }
        // 判断NO2的超标预警
        if (e16Data > 2340) {
          that.coreMonitorItems[2].bg=5
          that.e16Bg = require('@/assets/images/level0_circle5.gif')
        } else if (e16Data > 1200) {
          that.coreMonitorItems[2].bg=4
          that.e16Bg = require('@/assets/images/level0_circle4.gif')
        } else if (e16Data > 700) {
          that.coreMonitorItems[2].bg=3
          that.e16Bg = require('@/assets/images/level0_circle3.gif')
        } else if (e16Data > 200) {
          that.coreMonitorItems[2].bg=2
          that.e16Bg = require('@/assets/images/level0_circle2.gif')
        } else if (e16Data > 100) {
          that.coreMonitorItems[2].bg=1
          that.e16Bg = require('@/assets/images/level0_circle1.gif')
        } else {
          that.e16Bg = require('@/assets/images/level0_circle0.gif')
@@ -739,29 +1055,48 @@
        // 判断实时监测超标预警
        for (const key in that.wsData2) {
          // 右侧报警背景图
          for (const keys in that.alarmLevel) {
          for (const keys in that.alarmLevelDome) {
            // console.log(that.wsData2,'11');
            // console.log(keys,'keys');
            var alarmLevel = {}
            alarmLevel[keys] = JSON.parse(that.alarmLevel[keys])
            if (key === keys && JSON.parse(that.alarmLevel[keys])) {
            alarmLevel[keys] = JSON.parse(that.alarmLevelDome[keys])
            // console.log(alarmLevel[keys],'111');
            if (key === keys && JSON.parse(that.alarmLevelDome[keys])) {
              // console.log(key, 'kk')
              const wsData2KeyData = parseInt(that.wsData2[key])
              // console.log(that.wsData2[key],'22');
              const alarmLevelsData0 = alarmLevel[keys][0]
              const alarmLevelsData1 = alarmLevel[keys][1]
              const alarmLevelsData2 = alarmLevel[keys][2]
              const alarmLevelsData3 = alarmLevel[keys][3]
              const alarmLevelsData4 = alarmLevel[keys][4]
              const alarmLevelsData5 = alarmLevel[keys][5]

              if (wsData2KeyData > alarmLevelsData5) {
                that.alarmLevelsStatus = 5
              } else if (wsData2KeyData > alarmLevelsData4 && that.alarmLevelsStatus < 5) {
              } else if (
                wsData2KeyData > alarmLevelsData4 &&
                that.alarmLevelsStatus < 5
              ) {
                that.alarmLevelsStatus = 4
              } else if (wsData2KeyData > alarmLevelsData3 && that.alarmLevelsStatus < 4) {
              } else if (
                wsData2KeyData > alarmLevelsData3 &&
                that.alarmLevelsStatus < 4
              ) {
                that.alarmLevelsStatus = 3
              } else if (wsData2KeyData > alarmLevelsData2 && that.alarmLevelsStatus < 3) {
              } else if (
                wsData2KeyData > alarmLevelsData2 &&
                that.alarmLevelsStatus < 3
              ) {
                that.alarmLevelsStatus = 2
              } else if (wsData2KeyData > alarmLevelsData1 && that.alarmLevelsStatus < 2) {
              } else if (
                wsData2KeyData > alarmLevelsData1 &&
                that.alarmLevelsStatus < 2
              ) {
                that.alarmLevelsStatus = 1
              } else if (wsData2KeyData > alarmLevelsData0 && that.alarmLevelsStatus < 1) {
              } else if (
                wsData2KeyData > alarmLevelsData0 &&
                that.alarmLevelsStatus < 1
              ) {
                that.alarmLevelsStatus = 0
              }
              switch (that.alarmLevelsStatus) {
@@ -771,15 +1106,15 @@
                  break
                case 1:
                  that.url1 = require('@/assets/images/alarmlevel1.gif')
                  that.url2 = require('@/assets/images/alarmstate1.png')
                  that.url2 = require('@/assets/images/alarmstate11.png')
                  break
                case 2:
                  that.url1 = require('@/assets/images/alarmlevel2.gif')
                  that.url2 = require('@/assets/images/alarmstate2.png')
                  that.url2 = require('@/assets/images/alarmstate22.png')
                  break
                case 3:
                  that.url1 = require('@/assets/images/alarmlevel3.gif')
                  that.url2 = require('@/assets/images/alarmstate3.png')
                  that.url2 = require('@/assets/images/alarmstate33.png')
                  break
                case 4:
                  that.url1 = require('@/assets/images/alarmlevel4.gif')
@@ -865,28 +1200,31 @@
        url: '/deviceInfo/queryAlarmByMac',
        method: 'get',
        params: {
          mac: this.macName
        }
      }).then((res) => {
        // console.log('以下是queryAlarmByMac请求的返回')
        this.alarmLevel = res.data.alarmLevel
        // var levelList = res.data.alarmLevel
        // var info = false
        // for (let key in levelList) {
        //   if (levelList[key] !== null) {
        //     info = true
        //     break
        //   }
        // }
        // if (info) {
        //   this.alarmLevel = res.data.alarmLevel
        // } else {
        //   this.alarmLevel = this.alarmLevelDome
        // }
        // console.log(this.alarmLevel, 'this.alarmLevel')
      }).catch((err) => {
        console.log(err)
          mac: this.macName,
        },
      })
        .then((res) => {
          console.log(res, 'res')
          // console.log('以下是queryAlarmByMac请求的返回')
          this.alarmLevel = res.data.alarmLevel
          // var levelList = res.data.alarmLevel
          // var info = false
          // for (let key in levelList) {
          //   if (levelList[key] !== null) {
          //     info = true
          //     break
          //   }
          // }
          // if (info) {
          //   this.alarmLevel = res.data.alarmLevel
          // } else {
          //   this.alarmLevel = this.alarmLevelDome
          // }
          // console.log(this.alarmLevel, 'this.alarmLevel')
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 折线图
    drawChart() {
@@ -899,22 +1237,31 @@
            left: 'center',
            text: this.chartSensorName + '动态走势',
            Color: 'white',
            textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
              color: '#fff'
            }
            textStyle: {
              // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
              color: '#fff',
            },
          },
          grid: {
            top: 25,
            bottom: 25
            top: 50,
            bottom: 25,
          },
          tooltip: {
            // formatter:function(res){
            //   console.log(res,'res');
            //   var result=''
            //   var html1='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff;"></span>'
            //   result+=res[0].axisValue+"<br/>"+html1+res[0].value
            //   return result
            // },
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
                backgroundColor: '#6a7985',
                color: '#fff',
              },
            },
          },
          xAxis: {
            type: 'category',
@@ -922,80 +1269,81 @@
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
                color: '#fff',
              },
            },
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }

                color: '#fff',
              },
            },
          },
          series: [{
            data: this.PM2_5Data,
            type: 'line',
            areaStyle: {},
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            }
          }]
          series: [
            {
              data: this.PM2_5Data,
              type: 'line',
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  color: '#fff',
                },
              },
            },
          ],
        }
        that.myChart.setOption(option)
        setTimeout(function() {
          window.onresize = function() {
        setTimeout(function () {
          window.onresize = function () {
            that.myChart.resize()
          }
        }, 200)
      } else {
        console.log('容器为空')
      }
    }
    },
    // circles() {
    //   for (let index = this.circle; index < 100; index++) {
    //     index++
    //     this.circle++
    //   }
    // }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
h3{
h3 {
  font-size: 16px;
}
.noneScoll::-webkit-scrollbar{
.noneScoll::-webkit-scrollbar {
  display: none;
}
.cirqueBox{
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    -webkit-mask: radial-gradient(transparent, transparent 60px, #000 0);
    mask: radial-gradient(transparent 60px, #000 0);
.cirqueBox {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  -webkit-mask: radial-gradient(transparent, transparent 60px, #000 0);
  mask: radial-gradient(transparent 60px, #000 0);
}
.cirqueRed{
    position: absolute;
    width:100%;
    height: 100%;
    left:0;
    top:0;
    background-color:#e31514;
    z-index: 1;
.cirqueRed {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #e31514;
  z-index: 1;
}
ul>li{
  list-style-type:none;
ul > li {
  list-style-type: none;
  margin-top: 15px;
  cursor: pointer;
}
.liActive{
.liActive {
  /* color: #555; */
  /* background: #fff; */
  color: #fff;
@@ -1003,114 +1351,119 @@
  padding: 5px;
}
::-webkit-scrollbar {
 width: 7px;
 height: 10px;
  width: 7px;
  height: 10px;
}
/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
 background-color: #aaa;
 border-radius: 3px;
  background-color: #aaa;
  border-radius: 3px;
}
.main-container>section{
  display: flex!important;
.main-container > section {
  display: flex !important;
}
.main-container{
.main-container {
  background: url('../../assets/images/sixBg.jpg');
}
article, aside, footer, header, nav, section{
  display: flex!important;
article,
aside,
footer,
header,
nav,
section {
  display: flex !important;
}
.app-main{
.app-main {
  display: flex;
  padding-bottom: 0;
}
.left0{
.left0 {
  background: url('../../assets/images/左框.png') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.left1{
.left1 {
  background: url('../../assets/images/左框1.png') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.left2{
.left2 {
  background: url('../../assets/images/左框2.png') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.middle0{
.middle0 {
  background: url('../../assets/images/中框.png') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.middle1{
.middle1 {
  background: url('../../assets/images/中框1.png') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.middle2{
.middle2 {
  background: url('../../assets/images/中框2.png') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.right0{
.right0 {
  background: url('../../assets/images/右框.png') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.right1{
.right1 {
  background: url('../../assets/images/右框1.png') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.title0{
.title0 {
  background: url('../../assets/images/标题.png') no-repeat;
  background-size: 70% 90%;
  background-position: center;
}
.alarmBg5{
.alarmBg5 {
  background: url('../../assets/images/level0_circle5.gif') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.alarmBg4{
.alarmBg4 {
  background: url('../../assets/images/level0_circle4.gif') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.alarmBg3{
.alarmBg3 {
  background: url('../../assets/images/level0_circle3.gif') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.alarmBg2{
.alarmBg2 {
  background: url('../../assets/images/level0_circle2.gif') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.alarmBg1{
.alarmBg1 {
  background: url('../../assets/images/level0_circle1.gif') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.alarmBg0{
.alarmBg0 {
  background: url('../../assets/images/level0_circle0.gif') no-repeat;
  background-size: 100% 100%
  background-size: 100% 100%;
}
.border-left{
.border-left {
  /* border-left:1px solid #eee */
  border: none;
}
.border-right{
.border-right {
  /* border-right:1px solid #eee */
  border: none;
}
.border-top{
.border-top {
  /* border-top: 1px solid #fff; */
  border: none;
}
.border-bottom{
.border-bottom {
  /* border-bottom: 1px solid #eee; */
  border: none;
}
.class1{
.class1 {
  height: 60%;
}
.class2{
.class2 {
  height: 100%;
}
/deep/ .el-progress-bar__outer{
/deep/ .el-progress-bar__outer {
  height: 1rem !important;
}
/deep/ .el-progress-bar__innerText{
/deep/ .el-progress-bar__innerText {
  font-size: 0.8rem;
}
</style>

			@@ -4,10 +4,6 @@
			<list default="true" id="6a923843-d66d-4ccb-892a-72e969a7cbe1" name="Default Changelist" comment="export cityRankWord">
			<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
			<change beforePath="$PROJECT_DIR$/cmsdist/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/cmsdist/index.html" afterDir="false" />
			<change beforePath="$PROJECT_DIR$/cmsdist/serverConfig.json" beforeDir="false" afterPath="$PROJECT_DIR$/cmsdist/serverConfig.json" afterDir="false" />
			<change beforePath="$PROJECT_DIR$/cmsdist/static/js/chunk-09784ec9.dbe1340e.js" beforeDir="false" />
			<change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
			<change beforePath="$PROJECT_DIR$/src/components/Form/DatePicker.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Form/DatePicker.vue" afterDir="false" />
			</list>
			<option name="SHOW_DIALOG" value="false" />
			<option name="HIGHLIGHT_CONFLICTS" value="true" />
			@@ -375,6 +371,8 @@
			<workItem from="1673224135076" duration="7014000" />
			<workItem from="1679296211797" duration="11000" />
			<workItem from="1679296917474" duration="8000" />
			<workItem from="1680243193398" duration="162000" />
			<workItem from="1680502666801" duration="6000" />
			</task>
			<task id="LOCAL-00001" summary="处理详情页侧面菜单不消失">
			<created>1627269084478</created>

			@@ -6,7 +6,7 @@

			html {
			overflow-y: hidden;
			}</style><link href=/static/css/chunk-elementUI.f2af0811.css rel=stylesheet><link href=/static/css/chunk-libs.3dfb7769.css rel=stylesheet><link href=/static/css/app.cfbc7fff.css rel=stylesheet></head><body><noscript><strong>七星瓢虫环境科技不支持无javaScript环境</strong></noscript><div id=app></div><script src=/static/js/chunk-elementUI.b4749c03.js></script><script src=/static/js/chunk-libs.afc70fdc.js></script><script>(function(e){function c(c){for(var u,a,h=c[0],r=c[1],f=c[2],k=0,o=[];k<h.length;k++)a=h[k],t[a]&&o.push(t[a][0]),t[a]=0;for(u in r)Object.prototype.hasOwnProperty.call(r,u)&&(e[u]=r[u]);b&&b(c);while(o.length)o.shift()();return d.push.apply(d,f\|\|[]),n()}function n(){for(var e,c=0;c<d.length;c++){for(var n=d[c],u=!0,a=1;a<n.length;a++){var h=n[a];0!==t[h]&&(u=!1)}u&&(d.splice(c--,1),e=r(r.s=n[0]))}return e}var u={},a={runtime:0},t={runtime:0},d=[];function h(e){return r.p+"static/js/"+({"chunk-commons":"chunk-commons"}[e]\|\|e)+"."+{"chunk-09784ec9":"d1978ded","chunk-5f8a81f5":"8442ae25","chunk-48dcde72":"d3e4571b","chunk-201c0396":"f3e63fed","chunk-26aa192a":"ca93e195","chunk-2c6cd7be":"26fa5bec","chunk-2d0aa5b8":"aa86ab80","chunk-04dff74e":"6b338551","chunk-8960d1b6":"a80ee1fd","chunk-2d0b9293":"c84b8980","chunk-4adb9048":"e8609968","chunk-5d23b120":"3abeafa7","chunk-85a2e2d8":"9b079fdf","chunk-aa6495fe":"47ab2c3e","chunk-495b3b99":"c224fb40","chunk-5db5f624":"b668735f","chunk-08d7cab3":"4bec4dad","chunk-291c8555":"8265323a","chunk-e6c00ab8":"efa42862","chunk-03e4f198":"b5b3f0c5","chunk-515db732":"b4aa04c5","chunk-ec6a3d1c":"8a40b817","chunk-c9c77a48":"bb1c3f1c","chunk-commons":"6a605666","chunk-0e0b280e":"dc4627d7","chunk-47eed6e4":"a0c74128","chunk-6f5de554":"8fb28c7e","chunk-243d09ae":"32e46461","chunk-44900a0d":"312aa2a2","chunk-64670b04":"12a8c47a","chunk-ec8fa258":"55771c69","chunk-4a79fb70":"b7f6ecb7","chunk-4ae0200c":"32c14596","chunk-7a25313a":"0b02e54c","chunk-d89e6198":"3150f980","chunk-d38dc67e":"ab84683a","chunk-7ad495bf":"75747fd9","chunk-b5d299f2":"4f55dfc7","chunk-0a0d3ad6":"33ea41b5","chunk-fea4eb42":"191ab795"}[e]+".js"}function r(c){if(u[c])return u[c].exports;var n=u[c]={i:c,l:!1,exports:{}};return e[c].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.e=function(e){var c=[],n={"chunk-48dcde72":1,"chunk-201c0396":1,"chunk-26aa192a":1,"chunk-2c6cd7be":1,"chunk-04dff74e":1,"chunk-8960d1b6":1,"chunk-4adb9048":1,"chunk-5d23b120":1,"chunk-85a2e2d8":1,"chunk-495b3b99":1,"chunk-08d7cab3":1,"chunk-291c8555":1,"chunk-03e4f198":1,"chunk-515db732":1,"chunk-ec6a3d1c":1,"chunk-c9c77a48":1,"chunk-0e0b280e":1,"chunk-47eed6e4":1,"chunk-243d09ae":1,"chunk-44900a0d":1,"chunk-64670b04":1,"chunk-ec8fa258":1,"chunk-4a79fb70":1,"chunk-4ae0200c":1,"chunk-7a25313a":1,"chunk-d89e6198":1,"chunk-d38dc67e":1,"chunk-b5d299f2":1,"chunk-0a0d3ad6":1,"chunk-fea4eb42":1};a[e]?c.push(a[e]):0!==a[e]&&n[e]&&c.push(a[e]=new Promise((function(c,n){for(var u="static/css/"+({"chunk-commons":"chunk-commons"}[e]\|\|e)+"."+{"chunk-09784ec9":"31d6cfe0","chunk-5f8a81f5":"31d6cfe0","chunk-48dcde72":"4e0b5cf8","chunk-201c0396":"3bec9bdf","chunk-26aa192a":"2af0888d","chunk-2c6cd7be":"577279a3","chunk-2d0aa5b8":"31d6cfe0","chunk-04dff74e":"8bd549e9","chunk-8960d1b6":"d43cc52a","chunk-2d0b9293":"31d6cfe0","chunk-4adb9048":"6e6b0b74","chunk-5d23b120":"0b74763b","chunk-85a2e2d8":"99ec93e0","chunk-aa6495fe":"31d6cfe0","chunk-495b3b99":"40cb5e47","chunk-5db5f624":"31d6cfe0","chunk-08d7cab3":"86ed856d","chunk-291c8555":"d66896f4","chunk-e6c00ab8":"31d6cfe0","chunk-03e4f198":"0e23a2c4","chunk-515db732":"ccf69b0e","chunk-ec6a3d1c":"3d0ac165","chunk-c9c77a48":"a37cd815","chunk-commons":"31d6cfe0","chunk-0e0b280e":"ff6fa18a","chunk-47eed6e4":"3de502ed","chunk-6f5de554":"31d6cfe0","chunk-243d09ae":"79a92fcd","chunk-44900a0d":"9c0e30cb","chunk-64670b04":"94095f03","chunk-ec8fa258":"db72f820","chunk-4a79fb70":"c452ee63","chunk-4ae0200c":"423b9be8","chunk-7a25313a":"3225998f","chunk-d89e6198":"38d255bc","chunk-d38dc67e":"34fb2242","chunk-7ad495bf":"31d6cfe0","chunk-b5d299f2":"fd0d3da7","chunk-0a0d3ad6":"6c805bdf","chunk-fea4eb42":"51ca3679"}[e]+".css",t=r.p+u,d=document.getElementsByTagName("link"),h=0;h<d.length;h++){var f=d[h],k=f.getAttribute("data-href")\|\|f.getAttribute("href");if("stylesheet"===f.rel&&(k===u\|\|k===t))return c()}var o=document.getElementsByTagName("style");for(h=0;h<o.length;h++){f=o[h],k=f.getAttribute("data-href");if(k===u\|\|k===t)return c()}var b=document.createElement("link");b.rel="stylesheet",b.type="text/css",b.onload=c,b.onerror=function(c){var u=c&&c.target&&c.target.src\|\|t,d=new Error("Loading CSS chunk "+e+" failed.\n("+u+")");d.code="CSS_CHUNK_LOAD_FAILED",d.request=u,delete a[e],b.parentNode.removeChild(b),n(d)},b.href=t;var i=document.getElementsByTagName("head")[0];i.appendChild(b)})).then((function(){a[e]=0})));var u=t[e];if(0!==u)if(u)c.push(u[2]);else{var d=new Promise((function(c,n){u=t[e]=[c,n]}));c.push(u[2]=d);var f,k=document.createElement("script");k.charset="utf-8",k.timeout=120,r.nc&&k.setAttribute("nonce",r.nc),k.src=h(e),f=function(c){k.onerror=k.onload=null,clearTimeout(o);var n=t[e];if(0!==n){if(n){var u=c&&("load"===c.type?"missing":c.type),a=c&&c.target&&c.target.src,d=new Error("Loading chunk "+e+" failed.\n("+u+": "+a+")");d.type=u,d.request=a,n[1](d)}t[e]=void 0}};var o=setTimeout((function(){f({type:"timeout",target:k})}),12e4);k.onerror=k.onload=f,document.head.appendChild(k)}return Promise.all(c)},r.m=e,r.c=u,r.d=function(e,c,n){r.o(e,c)\|\|Object.defineProperty(e,c,{enumerable:!0,get:n})},r.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,c){if(1&c&&(e=r(e)),8&c)return e;if(4&c&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&c&&"string"!=typeof e)for(var u in e)r.d(n,u,function(c){return e[c]}.bind(null,u));return n},r.n=function(e){var c=e&&e.__esModule?function(){return e["default"]}:function(){return e};return r.d(c,"a",c),c},r.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},r.p="/",r.oe=function(e){throw console.error(e),e};var f=window["webpackJsonp"]=window["webpackJsonp"]\|\|[],k=f.push.bind(f);f.push=c,f=f.slice();for(var o=0;o<f.length;o++)c(f[o]);var b=k;n()})([]);</script><script src=/static/js/app.45db1781.js></script></body><script>var docEl = document.documentElement,
			}</style><link href=/static/css/chunk-elementUI.f2af0811.css rel=stylesheet><link href=/static/css/chunk-libs.3dfb7769.css rel=stylesheet><link href=/static/css/app.cfbc7fff.css rel=stylesheet></head><body><noscript><strong>七星瓢虫环境科技不支持无javaScript环境</strong></noscript><div id=app></div><script src=/static/js/chunk-elementUI.b4749c03.js></script><script src=/static/js/chunk-libs.afc70fdc.js></script><script>(function(e){function c(c){for(var u,a,h=c[0],r=c[1],f=c[2],k=0,o=[];k<h.length;k++)a=h[k],t[a]&&o.push(t[a][0]),t[a]=0;for(u in r)Object.prototype.hasOwnProperty.call(r,u)&&(e[u]=r[u]);b&&b(c);while(o.length)o.shift()();return d.push.apply(d,f\|\|[]),n()}function n(){for(var e,c=0;c<d.length;c++){for(var n=d[c],u=!0,a=1;a<n.length;a++){var h=n[a];0!==t[h]&&(u=!1)}u&&(d.splice(c--,1),e=r(r.s=n[0]))}return e}var u={},a={runtime:0},t={runtime:0},d=[];function h(e){return r.p+"static/js/"+({"chunk-commons":"chunk-commons"}[e]\|\|e)+"."+{"chunk-09784ec9":"d1978ded","chunk-5f8a81f5":"8442ae25","chunk-48dcde72":"d3e4571b","chunk-201c0396":"f3e63fed","chunk-26aa192a":"ca93e195","chunk-2c6cd7be":"26fa5bec","chunk-2d0aa5b8":"aa86ab80","chunk-04dff74e":"6b338551","chunk-8960d1b6":"a80ee1fd","chunk-2d0b9293":"c84b8980","chunk-4adb9048":"e8609968","chunk-5d23b120":"3abeafa7","chunk-85a2e2d8":"9b079fdf","chunk-aa6495fe":"47ab2c3e","chunk-495b3b99":"c224fb40","chunk-5db5f624":"b668735f","chunk-08d7cab3":"4bec4dad","chunk-291c8555":"8265323a","chunk-e6c00ab8":"efa42862","chunk-03e4f198":"b5b3f0c5","chunk-515db732":"b4aa04c5","chunk-ec6a3d1c":"8a40b817","chunk-c9c77a48":"bb1c3f1c","chunk-commons":"6a605666","chunk-0e0b280e":"dc4627d7","chunk-47eed6e4":"a0c74128","chunk-6f5de554":"8fb28c7e","chunk-243d09ae":"32e46461","chunk-44900a0d":"312aa2a2","chunk-64670b04":"12a8c47a","chunk-ec8fa258":"2ac4806f","chunk-4a79fb70":"b7f6ecb7","chunk-4ae0200c":"32c14596","chunk-7a25313a":"0b02e54c","chunk-d89e6198":"3150f980","chunk-d38dc67e":"ab84683a","chunk-7ad495bf":"75747fd9","chunk-b5d299f2":"4f55dfc7","chunk-0a0d3ad6":"33ea41b5","chunk-fea4eb42":"191ab795"}[e]+".js"}function r(c){if(u[c])return u[c].exports;var n=u[c]={i:c,l:!1,exports:{}};return e[c].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.e=function(e){var c=[],n={"chunk-48dcde72":1,"chunk-201c0396":1,"chunk-26aa192a":1,"chunk-2c6cd7be":1,"chunk-04dff74e":1,"chunk-8960d1b6":1,"chunk-4adb9048":1,"chunk-5d23b120":1,"chunk-85a2e2d8":1,"chunk-495b3b99":1,"chunk-08d7cab3":1,"chunk-291c8555":1,"chunk-03e4f198":1,"chunk-515db732":1,"chunk-ec6a3d1c":1,"chunk-c9c77a48":1,"chunk-0e0b280e":1,"chunk-47eed6e4":1,"chunk-243d09ae":1,"chunk-44900a0d":1,"chunk-64670b04":1,"chunk-ec8fa258":1,"chunk-4a79fb70":1,"chunk-4ae0200c":1,"chunk-7a25313a":1,"chunk-d89e6198":1,"chunk-d38dc67e":1,"chunk-b5d299f2":1,"chunk-0a0d3ad6":1,"chunk-fea4eb42":1};a[e]?c.push(a[e]):0!==a[e]&&n[e]&&c.push(a[e]=new Promise((function(c,n){for(var u="static/css/"+({"chunk-commons":"chunk-commons"}[e]\|\|e)+"."+{"chunk-09784ec9":"31d6cfe0","chunk-5f8a81f5":"31d6cfe0","chunk-48dcde72":"4e0b5cf8","chunk-201c0396":"3bec9bdf","chunk-26aa192a":"2af0888d","chunk-2c6cd7be":"577279a3","chunk-2d0aa5b8":"31d6cfe0","chunk-04dff74e":"8bd549e9","chunk-8960d1b6":"d43cc52a","chunk-2d0b9293":"31d6cfe0","chunk-4adb9048":"6e6b0b74","chunk-5d23b120":"0b74763b","chunk-85a2e2d8":"99ec93e0","chunk-aa6495fe":"31d6cfe0","chunk-495b3b99":"40cb5e47","chunk-5db5f624":"31d6cfe0","chunk-08d7cab3":"86ed856d","chunk-291c8555":"d66896f4","chunk-e6c00ab8":"31d6cfe0","chunk-03e4f198":"0e23a2c4","chunk-515db732":"ccf69b0e","chunk-ec6a3d1c":"3d0ac165","chunk-c9c77a48":"a37cd815","chunk-commons":"31d6cfe0","chunk-0e0b280e":"ff6fa18a","chunk-47eed6e4":"3de502ed","chunk-6f5de554":"31d6cfe0","chunk-243d09ae":"79a92fcd","chunk-44900a0d":"9c0e30cb","chunk-64670b04":"94095f03","chunk-ec8fa258":"db72f820","chunk-4a79fb70":"c452ee63","chunk-4ae0200c":"423b9be8","chunk-7a25313a":"3225998f","chunk-d89e6198":"38d255bc","chunk-d38dc67e":"34fb2242","chunk-7ad495bf":"31d6cfe0","chunk-b5d299f2":"fd0d3da7","chunk-0a0d3ad6":"6c805bdf","chunk-fea4eb42":"51ca3679"}[e]+".css",t=r.p+u,d=document.getElementsByTagName("link"),h=0;h<d.length;h++){var f=d[h],k=f.getAttribute("data-href")\|\|f.getAttribute("href");if("stylesheet"===f.rel&&(k===u\|\|k===t))return c()}var o=document.getElementsByTagName("style");for(h=0;h<o.length;h++){f=o[h],k=f.getAttribute("data-href");if(k===u\|\|k===t)return c()}var b=document.createElement("link");b.rel="stylesheet",b.type="text/css",b.onload=c,b.onerror=function(c){var u=c&&c.target&&c.target.src\|\|t,d=new Error("Loading CSS chunk "+e+" failed.\n("+u+")");d.code="CSS_CHUNK_LOAD_FAILED",d.request=u,delete a[e],b.parentNode.removeChild(b),n(d)},b.href=t;var i=document.getElementsByTagName("head")[0];i.appendChild(b)})).then((function(){a[e]=0})));var u=t[e];if(0!==u)if(u)c.push(u[2]);else{var d=new Promise((function(c,n){u=t[e]=[c,n]}));c.push(u[2]=d);var f,k=document.createElement("script");k.charset="utf-8",k.timeout=120,r.nc&&k.setAttribute("nonce",r.nc),k.src=h(e),f=function(c){k.onerror=k.onload=null,clearTimeout(o);var n=t[e];if(0!==n){if(n){var u=c&&("load"===c.type?"missing":c.type),a=c&&c.target&&c.target.src,d=new Error("Loading chunk "+e+" failed.\n("+u+": "+a+")");d.type=u,d.request=a,n[1](d)}t[e]=void 0}};var o=setTimeout((function(){f({type:"timeout",target:k})}),12e4);k.onerror=k.onload=f,document.head.appendChild(k)}return Promise.all(c)},r.m=e,r.c=u,r.d=function(e,c,n){r.o(e,c)\|\|Object.defineProperty(e,c,{enumerable:!0,get:n})},r.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,c){if(1&c&&(e=r(e)),8&c)return e;if(4&c&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&c&&"string"!=typeof e)for(var u in e)r.d(n,u,function(c){return e[c]}.bind(null,u));return n},r.n=function(e){var c=e&&e.__esModule?function(){return e["default"]}:function(){return e};return r.d(c,"a",c),c},r.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},r.p="/",r.oe=function(e){throw console.error(e),e};var f=window["webpackJsonp"]=window["webpackJsonp"]\|\|[],k=f.push.bind(f);f.push=c,f=f.slice();for(var o=0;o<f.length;o++)c(f[o]);var b=k;n()})([]);</script><script src=/static/js/app.45db1781.js></script></body><script>var docEl = document.documentElement,
			//当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，
			//注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
			//总来的来就是监听当前窗口的变化，一旦有变化就需要重新设置根字体的值

			@@ -45,12 +45,10 @@
			},
			watch: {
			chartData: {

			handler(val) {
			this.setOptions(val)
			},
			deep: true,

			},
			},
			mounted() {
			@@ -90,22 +88,23 @@
			},
			},
			grid: {
			left: 10,
			left: 100,
			right: 10,
			bottom: 20,
			top: 30,
			height: fontSize(3.5),
			width: fontSize(15),
			containLabel: true,
			},
			toolbox: {
			feature: {
			dataZoom: {
			yAxisIndex: 'none',
			},
			restore: {},
			saveAsImage: {},
			},
			},
			// toolbox: {
			// feature: {
			// dataZoom: {
			// yAxisIndex: 'none',
			// },
			// restore: {},
			// saveAsImage: {},
			// },
			// },
			// tooltip: {
			// trigger: 'axis',
			// position: function(pt) {
			@@ -127,11 +126,55 @@
			// },
			},

			yAxis: {
			axisLabel: {
			show: false,
			yAxis: [
			{

			type: 'value',
			position: 'left',
			axisLabel: {
			show: true,
			},
			},
			},
			{

			type: 'value',
			position: 'right',
			axisLabel: {
			show: true,
			},
			},
			{

			type: 'value',
			position: 'right',
			offset: 50,
			axisLabel: {
			show: true,
			},
			min: 'dataMin', //取最小值为最小刻度
			max: 'dataMax', //取最大值为最大刻度
			min: function (value) {
			//取最小值向下取整为最小刻度
			return Math.floor(value.min)
			},
			max: function (value) {
			//取最大值向上取整为最大刻度
			return Math.ceil(value.max)
			},

			scale: true, //自适应
			minInterval: 0.1, //分割刻度
			},
			{

			type: 'value',
			position: 'left',
			axisLabel: {
			show: true,
			},
			offset: 50,
			},
			],
			legend: {
			icon: 'circle',
			itemHeight: 15,
			@@ -149,10 +192,9 @@
			{
			start: 0,
			end: 10,
			top:fontSize(4),
			top: fontSize(4),
			height: fontSize(0.4),
			},

			],
			series: val.series,
			// [{

			@@ -56,7 +56,7 @@
			path: 'charts/contrast',
			name: 'contrast',
			component: () => import('@/views/contrast/index'),
			meta: { title: '监测因子对比', icon: 'example' }
			meta: { title: '监测因子相关性对比', icon: 'example' }
			}

			const averageContrast = {

			@@ -1,5 +1,5 @@
			+<template>
			<div style="width: 100%; height: 100%">
			<div style="width: 100%; height: 100%; margin:0 auto">
			<div class="topSelect">
			<el-cascader
			v-model="newMac"
			@@ -57,7 +57,7 @@
			<div style="position:absolute">(单位:ug/m³)</div>
			<div style="text-align: center;width: 100%;">{{ newData }}·{{ newMac?newMac[0]:'' }}·{{ newMac?newMac[newMac.length - 1][0]:'' }}·{{ value \|sensorFilter }}·趋势图</div>
			</div> -->
			<LineChart :chart-data="lineChartData" style="height: 23rem"/>
			<LineChart :chart-data="lineChartData" style="height: 23rem;"/>
			</div>
			</template>

			@@ -274,6 +274,7 @@
			series: [],
			xAxis: [],
			title: [],
			yAxis:[]
			}
			this.newXData = []
			this.$request({
			@@ -299,7 +300,8 @@
			newLineChartData.xAxis.push(data[0].timeValueList[i].time)
			}
			for (var i = 0; i < data.length; i++) {
			newLineChartData.series.push({ data: [], name: '', type: 'line' })
			newLineChartData.series.push({ data: [], name: '', type: 'line' ,yAxisIndex:data[i].code})
			// newLineChartData.yAxis.push({})
			newLineChartData.series[i].name = data[i].name
			newLineChartData.title.push(data[i].name);
			for (var j = 0; j < data[i].timeValueList.length; j++) {