From 09375778026a6d31ed2aef397de7b9187598de88 Mon Sep 17 00:00:00 2001 From: guangyin Date: Tue, 16 May 2023 18:08:36 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E9=A6=96=E9=A1=B5=E6=90=AD=E5=BB=BA?= =?UTF-8?q?=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit feat:导览页搭建 --- src/assets/style/pageCommon.component.scss | 84 +++++ src/components/home/right/chartData.js | 49 +-- .../home/right/confirm.component.vue | 289 ----------------- .../home/right/homeRight.component.html | 82 +---- .../home/right/homeRight.component.ts | 57 +--- .../home/right/judgment.component.vue | 269 ---------------- src/components/view/left/chartData.js | 98 ++++++ .../view/left/viewLeft.component.html | 51 +++ .../view/left/viewLeft.component.ts | 84 +++++ src/components/view/right/chartData.js | 203 ++++++++++++ .../view/right/viewRight.component.html | 43 +++ .../view/right/viewRight.component.ts | 290 ++++++++++++++++++ src/views/overview.component.html | 6 + src/views/overview.component.ts | 9 +- 14 files changed, 914 insertions(+), 700 deletions(-) delete mode 100644 src/components/home/right/confirm.component.vue delete mode 100644 src/components/home/right/judgment.component.vue create mode 100644 src/components/view/left/chartData.js create mode 100644 src/components/view/left/viewLeft.component.html create mode 100644 src/components/view/left/viewLeft.component.ts create mode 100644 src/components/view/right/chartData.js create mode 100644 src/components/view/right/viewRight.component.html create mode 100644 src/components/view/right/viewRight.component.ts diff --git a/src/assets/style/pageCommon.component.scss b/src/assets/style/pageCommon.component.scss index 599b63c..3f5539c 100644 --- a/src/assets/style/pageCommon.component.scss +++ b/src/assets/style/pageCommon.component.scss @@ -2777,4 +2777,88 @@ svg.loading-icon { margin-right: 6px; } } +.tree-box{ + width: 330px; + height: 300px; + background: rgba(0,0,0,0.5); + box-shadow: 0 10px 20px -10px #000000; + border-radius: 6px; + border: 1px solid; + border-image: linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0)) 1 1; +} +.tree-line{ + .white{ + color: #FFFFFF; + } + &.el-tree,.el-tree-node__content, .el-upload-list__item{ + background: transparent; + &:hover,&:focus,&:active,&:visited{ + background: transparent; + } + } + + .tree-level-1-icon{ + width: 24px; + height: 24px; + background: #FFFFFF; + border-radius: 2px; + position: relative; + left: -4px; + } + .el-tree-node { + position: relative; + padding-left: 16px; // 缩进量 + } + .el-tree-node__children { + padding-left: 16px; // 缩进量 + } + + // 竖线 + .el-tree-node::before { + content: ""; + height: 100%; + width: 1px; + position: absolute; + left: -3px; + top: 0; + border-width: 1px; + border-left: 1px solid #ffffff; + } + // 当前层最后一个节点的竖线高度固定 + .el-tree-node:last-child::before { + height: 38px; // 可以自己调节到合适数值 + } + + // 横线 + .el-tree-node::after { + content: ""; + width: 24px; + height: 20px; + position: absolute; + left: -3px; + top: 12px; + border-width: 1px; + border-top: 1px solid #ffffff; + } + + // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了 + & > .el-tree-node::after { + border-top: none; + } + & > .el-tree-node::before { + border-left: none; + } + + // 展开关闭的icon + .el-tree-node__expand-icon{ + font-size: 16px; + padding: 0 3px; + // 叶子节点（无子节点） + &.is-leaf{ + color: transparent; + // display: none; // 也可以去掉 + } + } + +} diff --git a/src/components/home/right/chartData.js b/src/components/home/right/chartData.js index 2c05362..92e12ff 100644 --- a/src/components/home/right/chartData.js +++ b/src/components/home/right/chartData.js @@ -98,9 +98,12 @@ export const lineChartData = function () { ], tooltip: { - show: false, - alwaysShowContent: false, - trigger: 'item' + trigger: 'item', + backgroundColor:"rgba(0,0,0,0.6)", + borderWidth:0, + textStyle:{ + color:"rgba(255,255,255,0.8)", + }, }, grid: { x: 30, @@ -111,18 +114,23 @@ export const lineChartData = function () { } } -export const roundChartData = function () { +export const radarChartData = function () { return { - backgroundColor: "#0A2E5D", - tooltip: {}, - + tooltip: { + trigger: 'item', + backgroundColor:"rgba(0,0,0,0.6)", + borderWidth:0, + textStyle:{ + color:"rgba(255,255,255,0.8)", + }, + }, radar: { - radius: "50%", //大小 - nameGap: 20, // 图中工艺等字距离图的距离 + radius: "70%", //大小 + nameGap: 10, // 图中工艺等字距离图的距离 center: ["50%", "50%"], // 图的位置 name: { textStyle: { - color: "rgba(101, 213, 255, 1)", + color: "rgba(255,255,255,0.8)", fontSize: 16 }, formatter: function(name) { @@ -130,15 +138,14 @@ export const roundChartData = function () { } }, indicator: [ - {"name":'社会稳定',"max":"100"}, - {"name":'社会治安',"max":"100"}, - {"name":'交通安全',"max":"100"}, - {"name":'消防安全',"max":"100"}, - {"name":'公共安全',"max":"100"}, + {"name":'1月',"max":"100"}, + {"name":'2月',"max":"100"}, + {"name":'3月',"max":"100"}, + {"name":'4月',"max":"100"}, + {"name":'5月',"max":"100"}, ], axisLine: { lineStyle: { - color: "rgba(153, 409, 246, 0.2)" }, show:true, @@ -163,7 +170,7 @@ export const roundChartData = function () { series: [ { - name: "报警类型分析", + name: "物资统计", type: "radar", symbol: "angle", itemStyle: { @@ -176,16 +183,16 @@ export const roundChartData = function () { symbol: "circle", symbolSize: 5, value: [70,42,63,84,75,34], - areaStyle: { color: "rgba(64, 205, 241, 0.2)" }, + areaStyle: { color: "rgba(125,174,255,0.5)" }, itemStyle: { normal: { borderWidth:1, - color: "RGBA(0, 34, 66, 1)", - borderColor: "rgba(146, 225, 255, 1)" + color: "#7FB0FF", + borderColor: "#7FB0FF" } }, lineStyle: { - color: "rgba(146, 225, 255, 1)", + color: "#7FB0FF", width: 1 } } diff --git a/src/components/home/right/confirm.component.vue b/src/components/home/right/confirm.component.vue deleted file mode 100644 index 587a25c..0000000 --- a/src/components/home/right/confirm.component.vue +++ /dev/null @@ -1,289 +0,0 @@ - - - diff --git a/src/components/home/right/homeRight.component.html b/src/components/home/right/homeRight.component.html index 38b1646..bd8aa0f 100644 --- a/src/components/home/right/homeRight.component.html +++ b/src/components/home/right/homeRight.component.html @@ -3,7 +3,8 @@ 能耗统计 - +
@@ -13,7 +14,7 @@
安防设备 -
+
100/300
@@ -35,79 +36,8 @@ 物资盘点 -
-
-
{{count}}%
- 物资完备度 -
- -
-
- -
-
×
-
-
-
-
-
{{popTitle}}
- - - - - - - - - - - - - - - - - - - - - - -
-
确认
-
取消
-
-
- -
-
×
-
-
-
-
-
报警记录
-
- 告警类型 - 告警内容 - 报警内容 - 上报人员 - 事故地点 - 处理意见 -
-
-
- {{item.type}} - {{item.content}} - {{item.alarm}} - {{item.reporter}} - {{item.address}} - {{item.suggestion}} -
-
- - +
+ diff --git a/src/components/home/right/homeRight.component.ts b/src/components/home/right/homeRight.component.ts index e2d28e6..c34b3ca 100644 --- a/src/components/home/right/homeRight.component.ts +++ b/src/components/home/right/homeRight.component.ts @@ -1,6 +1,6 @@ import {Component, Emit, Vue} from 'vue-property-decorator'; import template from "./homeRight.component.html" -import {lineChartData} from "./chartData"; +import {lineChartData,radarChartData} from "./chartData"; import TitleComponent from "@/components/title.component.vue" import * as echarts from 'echarts'; @@ -25,15 +25,11 @@ export default class HomeRightComponent extends Vue { option: any = {} //折线图实例 lineChart: any = {} - // 计数 - count = 0 - public colors = [ - {color: '#FF5959', percentage: 20}, - {color: '#FFA900', percentage: 40}, - {color: '#FADFA4', percentage: 60}, - {color: '#C9FFD7', percentage: 80}, - {color: '#76c893', percentage: 100} - ]; + //雷达图数据 + radarData: any = {} + //折线图实例 + radar: any = {} + showPop = false showLogPop = false popTitle = '开启演练' @@ -216,42 +212,17 @@ export default class HomeRightComponent extends Vue { suggestion:'立即救援', }, ] - //开始演练 - startDrill(){ - this.showPop = true - } - //报警记录 - showLog(){ - this.showLogPop = true - } - submitWaring(){ - this.showPop = false - this.showPlan() - } - @Emit('showPlan') - showPlan(){ - // - } - public textFormat(data){ - return "" - } - public getCount(data){ - this.count = 0; - setTimeout(()=>{ - const timer = setInterval(()=>{ - if(this.count { this.lineChart.clear() this.lineChart.setOption(this.option) - this.getCount(this.count) }, 5000) } @@ -287,7 +257,6 @@ export default class HomeRightComponent extends Vue { } mounted() { - this.getCount(70) this.autoChangeLineData() window.addEventListener("resize", this.resize); } diff --git a/src/components/home/right/judgment.component.vue b/src/components/home/right/judgment.component.vue deleted file mode 100644 index f0ac06c..0000000 --- a/src/components/home/right/judgment.component.vue +++ /dev/null @@ -1,269 +0,0 @@ - - - diff --git a/src/components/view/left/chartData.js b/src/components/view/left/chartData.js new file mode 100644 index 0000000..efdb970 --- /dev/null +++ b/src/components/view/left/chartData.js @@ -0,0 +1,98 @@ +export const pieChartData = { + title: { + text: '90%', + subtext: '在线率', + itemGap: 5, + x: 105, + y: '37%', + textStyle: { + fontSize: 30, + fontWeight: '600', + fontStyle: 'italic', + color: '#E8E8E8', + }, + subtextStyle: { + fontSize: 17, + fontWeight: 'normal', + align: "center", + color: '#E8E8E8' + }, + }, + tooltip: { + trigger: 'item' + }, + legend: { + orient: 'vertical', + right: '0%', + top: 'bottom', + height:100, + itemWidth: 10, + itemHeight: 10, + data: [ + {value: 25, name: '气体'}, + {value: 25, name: '水质'}, + {value: 15, name: '特征污染物'}, + {value: 20, name: '废气'}, + {value: 15, name: '废水'} + ], + textStyle: { + color: '#D4E5FF', + padding: [5, 10, 5, 10] + }, + }, + series: [ + { + type: 'pie', + selectedMode: 'single', + selectedOffset: 10, + left:-50, + radius: [50, 75], + data: [ + {value: 25, name: '气体',num:90}, + {value: 1, name: '',num:0}, + {value: 25, name: '水质',num:95}, + {value: 1, name: '',num:0}, + {value: 15, name: '特征污染物',num:94}, + {value: 1, name: '',num:0}, + {value: 20, name: '废气',num:91}, + {value: 1, name: '',num:0}, + {value: 15, name: '废水',num:89}, + {value: 1, name: '',num:0}, + ], + color: ['#7FB0FF', null, '#947FEA', null, '#C9FFD7', null, '#FADFA4', null, '#FFFFFF', null], + emphasis: { + itemStyle: { + // shadowBlur: 10, + shadowOffsetX: 0, + // borderWidth:5, + // borderColor:"rgba(255,255,255,0)", + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + }, + itemStyle: {}, + select: { + itemStyle: {} + }, + labelLine: { + show: false + }, + label: { + show: false + }, + tooltip:{ + backgroundColor:'rgba(0,0,0,0.4)', + textStyle:{ + color:'#ffffff' + }, + formatter:function (params) { + return params.data.name+' : '+ params.data.num+'%' + } + + } + } + ], + animationDuration: 0, + animationDurationUpdate: 3000, + animationEasing: 'linear', + animationEasingUpdate: 'linear' +} diff --git a/src/components/view/left/viewLeft.component.html b/src/components/view/left/viewLeft.component.html new file mode 100644 index 0000000..5eba149 --- /dev/null +++ b/src/components/view/left/viewLeft.component.html @@ -0,0 +1,51 @@ +
+ +
+ + 训练设置 + +
+ +
+ + +
+ +
+ + + + + {{ node.label }} + + + + + +
+ +
+
+
+ + 告警列表 + +
+
diff --git a/src/components/view/left/viewLeft.component.ts b/src/components/view/left/viewLeft.component.ts new file mode 100644 index 0000000..fa7b878 --- /dev/null +++ b/src/components/view/left/viewLeft.component.ts @@ -0,0 +1,84 @@ +import {Component, Emit, Vue} from 'vue-property-decorator'; +import template from "./viewLeft.component.html" +import TitleComponent from "@/components/title.component.vue" +import WarningListComponent from "@/components/warningList.component.vue" +import * as turf from '@turf/turf' +import Mock from "mockjs" +import moment from "moment" +import("@/assets/style/pageCommon.component.scss") + + +Component.registerHooks([ + 'beforeRouteLeave', +]); +@Component({ + template, + components: { + TitleComponent, + WarningListComponent + }, +}) +export default class ViewLeftComponent extends Vue { + //标题左侧图标 + imgSrc = require("@/assets/icons/png/env/env-title-icon.png"); + + treeData = [{ + label: '一级 1', + children: [{ + label: '二级 1-1', + children: [] + }] + }, { + label: '一级 2', + children: [{ + label: '二级 2-1', + children: [] + }, { + label: '二级 2-2', + children: [{ + label: '三级 2-2-1' + }] + }] + }, { + label: '一级 3', + children: [{ + label: '二级 3-1', + children: [{ + label: '三级 3-1-1' + }] + }, { + label: '二级 3-2', + children: [{ + label: '三级 3-2-1' + }] + }] + }] + + + //点击告警信息 + @Emit() + getItem(item) { + // console.log('item', item) + } + + count = 1 + + + mounted() { + + } + + destroyed() { + + } + + changeMore() { + console.log(1) + } + + changeClose() { + console.log(1) + } + +} + diff --git a/src/components/view/right/chartData.js b/src/components/view/right/chartData.js new file mode 100644 index 0000000..92e12ff --- /dev/null +++ b/src/components/view/right/chartData.js @@ -0,0 +1,203 @@ + +export const lineChartData = function () { + return { + color:['#FADFA4','#947FEA'], + xAxis: { + type: 'category', + splitLine: { + show: true, + lineStyle: { + color: '#999999', + type: 'solid' + }, + }, + axisLabel: { + //x轴文字的配置 + show: true, + interval: 0,//使x轴文字显示全 + }, + axisLine: { + lineStyle: { + color: '#999999', + } + }, + + data: ['1月','2月','3月','4月','5月'] + }, + legend: { + top: 'top', + itemGap: 30, + itemWidth: 8, + itemHeight: 8, + textStyle: { + // 未单独设置样式的图例（即非上下标） + lineHeight: 12, + verticalAlign: "middle", + fontSize: 10, + color: "#fff" + }, + data:[ + { + name:'应急事件', + icon:'roundRect' + },{ + name:'应急演练', + icon:'roundRect' + } + ] + }, + yAxis: { + type: 'value', + splitLine: { + show: true, + lineStyle: { + color: '#999999', + type: 'solid' + }, + }, + axisLine: { + lineStyle: { + color: '#999999', + } + }, + }, + series: [ + { + name:'应急事件', + data: [60,80,140,70,100], + type: 'line', + symbolSize: 4, + symbol: 'circle', + lineStyle: { + width: 2 + }, + smooth: true, + label: { + show: false, + position: 'top', + color: '#ffffff', + borderWidth: 0 + }, + },{ + name:'应急演练', + data: [50,70,130,60,90], + type: 'line', + symbolSize: 4, + symbol: 'circle', + lineStyle: { + width: 2 + }, + smooth: true, + label: { + show: false, + position: 'top', + color: '#ffffff', + borderWidth: 0 + }, + } + ], + + tooltip: { + trigger: 'item', + backgroundColor:"rgba(0,0,0,0.6)", + borderWidth:0, + textStyle:{ + color:"rgba(255,255,255,0.8)", + }, + }, + grid: { + x: 30, + y: 30, + x2: 12, + y2: 20, + } + } +} + +export const radarChartData = function () { + return { + tooltip: { + trigger: 'item', + backgroundColor:"rgba(0,0,0,0.6)", + borderWidth:0, + textStyle:{ + color:"rgba(255,255,255,0.8)", + }, + }, + radar: { + radius: "70%", //大小 + nameGap: 10, // 图中工艺等字距离图的距离 + center: ["50%", "50%"], // 图的位置 + name: { + textStyle: { + color: "rgba(255,255,255,0.8)", + fontSize: 16 + }, + formatter: function(name) { + return name; + } + }, + indicator: [ + {"name":'1月',"max":"100"}, + {"name":'2月',"max":"100"}, + {"name":'3月',"max":"100"}, + {"name":'4月',"max":"100"}, + {"name":'5月',"max":"100"}, + ], + axisLine: { + lineStyle: { + color: "rgba(153, 409, 246, 0.2)" + }, + show:true, + symbolSize : [20,15], + symbolOffset:[0,15] + + }, + splitArea: { + show: false, + areaStyle: { + color: "rgba(255,0,0,0)" // 图表背景的颜色 + } + }, + splitLine: { + show: true, + lineStyle: { + width: 1, + color: "rgba(153, 209, 246, 0.2)" // 设置网格的颜色 + } + } + }, + + series: [ + { + name: "物资统计", + type: "radar", + symbol: "angle", + itemStyle: { + normal: { + areaStyle: { type: "default" } + } + }, + data: [ + { + symbol: "circle", + symbolSize: 5, + value: [70,42,63,84,75,34], + areaStyle: { color: "rgba(125,174,255,0.5)" }, + itemStyle: { + normal: { + borderWidth:1, + color: "#7FB0FF", + borderColor: "#7FB0FF" + } + }, + lineStyle: { + color: "#7FB0FF", + width: 1 + } + } + ] + } + ] + } +} diff --git a/src/components/view/right/viewRight.component.html b/src/components/view/right/viewRight.component.html new file mode 100644 index 0000000..bd8aa0f --- /dev/null +++ b/src/components/view/right/viewRight.component.html @@ -0,0 +1,43 @@ +
+
+ + 能耗统计 + + +
+
+ + 设备在线统计 + +
+
+ + 安防设备 +
+ 100/300 +
+
+
+ + 训练设备 +
+ 100/300 +
+
+
+ + 配套设备 +
+ 100/300 +
+
+
+ + 物资盘点 + + +
+ +
diff --git a/src/components/view/right/viewRight.component.ts b/src/components/view/right/viewRight.component.ts new file mode 100644 index 0000000..dae8e2e --- /dev/null +++ b/src/components/view/right/viewRight.component.ts @@ -0,0 +1,290 @@ +import {Component, Emit, Vue} from 'vue-property-decorator'; +import template from "./viewRight.component.html" +import {lineChartData,radarChartData} from "./chartData"; +import TitleComponent from "@/components/title.component.vue" +import * as echarts from 'echarts'; + +import("@/assets/style/pageCommon.component.scss") + + +Component.registerHooks([ + 'beforeRouteLeave', +]); +@Component({ + template, + components: { + TitleComponent, + }, +}) +export default class ViewRightComponent extends Vue { + //标题图片 + imgSrc = require("@/assets/icons/png/env/env-title-icon.png"); + //定时器 + timer: any = null; + //折线图数据 + option: any = {} + //折线图实例 + lineChart: any = {} + //雷达图数据 + radarData: any = {} + //折线图实例 + radar: any = {} + + showPop = false + showLogPop = false + popTitle = '开启演练' + popObj:any = { + popTitle:'报警记录', + type:'', + title: '风险点异常', + info: '', + time: '', + address:'', + level: '', + typeName:"", + reporter:"", + tel:"", + position:[], + content:"", + typeId:"", + plan:"", + linkPlan:"化工园区氢气泄露处理预案", + id:'' + + } + typeList =[ + { + label:'气体泄露', + value:'normal', + level:2, + id:1 + },{ + label:'火灾爆炸', + value:'fire', + level:1, + id:2 + },{ + label:'气液泄露', + value:'normal', + level:1, + id:3 + },{ + label:'安全事故', + value:'normal', + level:2, + id:4 + },{ + label:'自然灾害', + value:'normal', + level:3, + id:5 + }, + ] + levelList =[ + { + label:'一级', + value:'1', + id:1 + },{ + label:'二级', + value:'2', + id:2 + },{ + label:'三级', + value:'3', + id:3 + },{ + label:'四级', + value:'4', + id:4 + } + ] + planList =[ + { + label:'氢气泄露演练', + value:'氢气泄露演练', + id:1 + },{ + label:'氯气泄露演练', + value:'氯气泄露演练', + id:2 + },{ + label:'氯化氢泄露演练', + value:'氯化氢泄露演练', + id:3 + },{ + label:'二氧化硫泄露演练', + value:'二氧化硫泄露演练', + id:5 + } + ] + linkPlanList =[ + { + label:'化工园区氢气泄露处理预案', + value:'化工园区氢气泄露处理预案', + id:1 + } + ] + tableData = [ + { + type:'火灾爆炸', + content:'发生火灾', + alarm:'发生火灾', + reporter:'罗马', + address:'A号点位', + suggestion:'立即救援', + }, { + type:'火灾爆炸', + content:'发生火灾', + alarm:'发生火灾', + reporter:'罗马', + address:'A号点位', + suggestion:'立即救援', + }, { + type:'火灾爆炸', + content:'发生火灾', + alarm:'发生火灾', + reporter:'罗马', + address:'A号点位', + suggestion:'立即救援', + }, { + type:'火灾爆炸', + content:'发生火灾', + alarm:'发生火灾', + reporter:'罗马', + address:'A号点位', + suggestion:'立即救援', + }, { + type:'火灾爆炸', + content:'发生火灾', + alarm:'发生火灾', + reporter:'罗马', + address:'A号点位', + suggestion:'立即救援', + }, { + type:'火灾爆炸', + content:'发生火灾', + alarm:'发生火灾', + reporter:'罗马', + address:'A号点位', + suggestion:'立即救援', + },{ + type:'火灾爆炸', + content:'发生火灾', + alarm:'发生火灾', + reporter:'罗马', + address:'A号点位', + suggestion:'立即救援', + }, { + type:'火灾爆炸', + content:'发生火灾', + alarm:'发生火灾', + reporter:'罗马', + address:'A号点位', + suggestion:'立即救援', + }, { + type:'火灾爆炸', + content:'发生火灾', + alarm:'发生火灾', + reporter:'罗马', + address:'A号点位', + suggestion:'立即救援', + }, { + type:'火灾爆炸', + content:'发生火灾', + alarm:'发生火灾', + reporter:'罗马', + address:'A号点位', + suggestion:'立即救援', + }, { + type:'火灾爆炸', + content:'发生火灾', + alarm:'发生火灾', + reporter:'罗马', + address:'A号点位', + suggestion:'立即救援', + }, { + type:'火灾爆炸', + content:'发生火灾', + alarm:'发生火灾', + reporter:'罗马', + address:'A号点位', + suggestion:'立即救援', + }, + ] + + + //获取图表实例 + getEcharts(e, type) { + this[type] = e + if (type === 'lineChart'){ + this.initLineData() + }else{ + this.radarData = radarChartData() + } + + } + setData(val,type){ + if (type === 'typeName'){ + const find = this.typeList.find(item=>item.id == val) as any + this.popObj.title = find.label + this.popObj.type = find.value + } + this.popObj[type] = val + } + //图表自适应 + resize() { + setTimeout(() => { + this.lineChart.resize(); + }, 300) + } + + timerForLineData: any = null; + + //自动切换line图表数据 + autoChangeLineData() { + this.timerForLineData = setInterval(() => { + this.lineChart.clear() + this.lineChart.setOption(this.option) + }, 5000) + } + + //获取范围内随机数 + getRandomInt(min: number, max: number) { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值 + } + + mounted() { + this.autoChangeLineData() + window.addEventListener("resize", this.resize); + } + + //初始化line图表 + initLineData() { + this.option = lineChartData() + } + + beforeDestroy() { + clearInterval(this.timer) + clearInterval(this.timerForLineData) + } + + destroyed() { + window.removeEventListener("resize", this.resize) + } + + //改变污染物监测颜色 + changeColor(val) { + if (Number(val) <= 30) { + return '#ffffff' + } else if (Number(val) > 30 && Number(val) <= 50) { + return '#F2A183' + } else { + return '#DD7171' + } + + } +} + diff --git a/src/views/overview.component.html b/src/views/overview.component.html index d16fce3..d836f92 100644 --- a/src/views/overview.component.html +++ b/src/views/overview.component.html @@ -4,13 +4,19 @@
+ + +
+ + +
diff --git a/src/views/overview.component.ts b/src/views/overview.component.ts index 46ea354..514bf37 100644 --- a/src/views/overview.component.ts +++ b/src/views/overview.component.ts @@ -6,13 +6,17 @@ import layer from "layui-layer" import BaseComponent from "./base.component" import HomeLeftComponent from "@/components/home/left/homeLeft.component"; import HomeRightComponent from "@/components/home/right/homeRight.component"; +import ViewLeftComponent from "@/components/view/left/viewLeft.component"; +import ViewRightComponent from "@/components/view/right/viewRight.component"; @Component({ components: { HomeLeftComponent, - HomeRightComponent + HomeRightComponent, + ViewLeftComponent, + ViewRightComponent, } }) export default class OverViewComponent extends BaseComponent { @@ -25,6 +29,9 @@ export default class OverViewComponent extends BaseComponent { // 是否展开图层 public openLayerDrawer = false; + //展示导览右侧 + viewRightShow = false + created(){ this.warnTimer = setInterval(()=>{ this.upDateEventList()