From 46b328deebfc604ecfe6e34afe08403d95356614 Mon Sep 17 00:00:00 2001
From: guoshipeng <3194674006@qq.com>
Date: Wed, 12 Apr 2023 09:52:51 +0800
Subject: [PATCH] 1、设备详情显示修改 2、监测因子对比改成监测因子相关性对比 3、监测因子相关性对比显示修改
---
src/components/Echarts/LineChartSpe.vue | 78 +++-
src/views/contrast/index.vue | 8
.idea/workspace.xml | 6
src/router/dynamicRouter.js | 2
src/views/deviceDetail/index.vue | 947 ++++++++++++++++++++++++++++++++++++----------------
cmsdist/index.html | 2
6 files changed, 719 insertions(+), 324 deletions(-)
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 89e98d2..01e0f77 100644
--- a/.idea/workspace.xml
+++ b/.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>
diff --git a/cmsdist/index.html b/cmsdist/index.html
index 3c762d4..309c2f5 100644
--- a/cmsdist/index.html
+++ b/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 ���������
//���������������������������������������������������������������������������������������������������
diff --git a/src/components/Echarts/LineChartSpe.vue b/src/components/Echarts/LineChartSpe.vue
index df84764..eca1e94 100644
--- a/src/components/Echarts/LineChartSpe.vue
+++ b/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,
// [{
diff --git a/src/router/dynamicRouter.js b/src/router/dynamicRouter.js
index 008dee3..e9126fd 100644
--- a/src/router/dynamicRouter.js
+++ b/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 = {
diff --git a/src/views/contrast/index.vue b/src/views/contrast/index.vue
index 731ae64..c353aff 100644
--- a/src/views/contrast/index.vue
+++ b/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++) {
diff --git a/src/views/deviceDetail/index.vue b/src/views/deviceDetail/index.vue
index eff6d6c..d5a62fb 100644
--- a/src/views/deviceDetail/index.vue
+++ b/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: [ 0, 35 ]</li>
<li>PM10: [ 0, 50 ]</li>
<li>NO2: [ 0, 40 ]</li>
- <li>SO2: [ 0, 50 ]</li>
+ <li>SO2: [ 0, 150 ]</li>
<li>CO: [ 0, 2 ]</li>
<li>O3: [ 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>
--
Gitblit v1.8.0