From ddad5f19e0cd21f5f499e45d8155cb793c621158 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期一, 12 十二月 2022 10:00:27 +0800
Subject: [PATCH] 修改大屏时间选择

---
 src/views/doubleIndex/saftyScreen/components/screen.vue |   78 ++++++++++++++++++++++++---------------
 1 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/src/views/doubleIndex/saftyScreen/components/screen.vue b/src/views/doubleIndex/saftyScreen/components/screen.vue
index e7a11bb..a7eb7a5 100644
--- a/src/views/doubleIndex/saftyScreen/components/screen.vue
+++ b/src/views/doubleIndex/saftyScreen/components/screen.vue
@@ -278,7 +278,8 @@
                 blindPlatePluggingCount: [],
                 riskEventConfig: {},
                 riskStatusConfig: {},
-                deviceConfig: {}
+                deviceConfig: {},
+                myVar: null
             };
         },
         created(){
@@ -448,6 +449,7 @@
             },
 
             changeCompleteTimeInspectionPerson() {
+                console.log(this.value2,this.completeListQuery,'222')
                 if(this.value2 !== null){
                     this.completeListQuery.startTime = this.value2[0]
                     this.completeListQuery.endTime = this.value2[1]
@@ -515,18 +517,20 @@
                 await this.initRiskLevel()
             },
             changeInspectionTask() {
-                this.updateMission(this.personListQuery)
+                this.updateMission(this.taskListQuery)
             },
             changeTimeTask(){
+                console.log(this.value3,this.taskListQuery,'333')
                 if(this.value3 !== null){
-                    this.taskListQuery.startTime = this.value1[0]
-                    this.taskListQuery.endTime = this.value1[1]
+                    this.taskListQuery.startTime = this.value3[0]
+                    this.taskListQuery.endTime = this.value3[1]
                 }
-                this.updateMission(this.personListQuery)
+                this.updateMission(this.taskListQuery)
             },
 
             // 各部门预约
             initAppoint(){
+                const t = this
                 const dom = document.getElementById(this.appointId);
                 let myChart = this.$echarts.init(dom, null, {
                     renderer: 'canvas',
@@ -570,21 +574,16 @@
                             type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                         }
                     },
-                    dataZoom: {
-                        type: 'slider',
-                        show: true,
-                        showDetails: true,
-                        textStyle: {
-                          color: '#fff'
+                    dataZoom: [
+                        //滑动条
+                        {
+                            yAxisIndex: 0, //这里是从X轴的0刻度开始
+                            show: false, //是否显示滑动条,不影响使用
+                            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+                            startValue: 0, // 从头开始。
+                            endValue: 6, // 一次性展示几个。
                         },
-                        realtime: true,
-                        right: 10,
-                        height: 200,
-                        width: 15,
-                        start: 50,
-                        end: 100,
-                        orient: 'vertical'
-                    },
+                    ],
                         legend: {
                         textStyle: {
                             color: '#fff',
@@ -637,7 +636,7 @@
                             emphasis: {
                                 focus: 'series'
                             },
-                            data: this.hotCount
+                            data: t.hotCount
                         },
                         {
                             name: '受限空间作业',
@@ -649,7 +648,7 @@
                             emphasis: {
                                 focus: 'series'
                             },
-                            data: this.confinedSpaceCount
+                            data: t.confinedSpaceCount
                         },
                         {
                             name: '吊装作业',
@@ -661,7 +660,7 @@
                             emphasis: {
                                 focus: 'series'
                             },
-                            data: this.liftingCount
+                            data: t.liftingCount
                         },
                         {
                             name: '动土作业',
@@ -673,7 +672,7 @@
                             emphasis: {
                                 focus: 'series'
                             },
-                            data: this.groundBreakingCount
+                            data: t.groundBreakingCount
                         },
                         {
                             name: '断路作业',
@@ -685,7 +684,7 @@
                             emphasis: {
                                 focus: 'series'
                             },
-                            data: this.openCircuitCout
+                            data: t.openCircuitCout
                         },
                         {
                             name: '高处作业',
@@ -697,7 +696,7 @@
                             emphasis: {
                                 focus: 'series'
                             },
-                            data: this.heightCount
+                            data: t.heightCount
                         },
                         {
                             name: '临时用电作业',
@@ -709,7 +708,7 @@
                             emphasis: {
                                 focus: 'series'
                             },
-                            data: this.temporaryPowerCount
+                            data: t.temporaryPowerCount
                         },
                         {
                             name: '盲板抽堵作业',
@@ -721,15 +720,25 @@
                             emphasis: {
                                 focus: 'series'
                             },
-                            data: this.blindPlatePluggingCount
+                            data: t.blindPlatePluggingCount
                         }
                     ]
                 };
 
                 if (option && typeof option === 'object') {
                     myChart.setOption(option);
+                    t.myVar = setInterval(function(){
+                        console.log('tik')
+                        if (option.dataZoom[0].endValue == t.depList.length ) {
+                            option.dataZoom[0].endValue = 6;
+                            option.dataZoom[0].startValue = 0;
+                        } else {
+                            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
+                            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
+                        }
+                        myChart.setOption(option);
+                    }, 6000)
                 }
-
                 window.addEventListener('resize', myChart.resize);
                 setTimeout(()=>{
                     myChart.resize
@@ -913,6 +922,15 @@
                     myChart.resize
                 },500)
             }
+        },
+        beforeDestroy(){
+            window.clearInterval(this.myVar)
+            this.myVar = null
+        },
+        destroyed(){
+            // 离开当前路由后的操作
+            window.clearInterval(this.myVar)
+            this.myVar = null
         }
     }
 </script>
@@ -1195,7 +1213,7 @@
         .main-cont {
             display: grid;
             grid-template-columns: repeat(3, minmax(100px, 1fr));
-            grid-template-rows: repeat(2, 1fr);
+            grid-template-rows: repeat(2, calc(50% - 20px));
             grid-auto-flow: row;
             padding: 10px;
             margin-bottom: 20px;
@@ -1237,7 +1255,7 @@
         .main-cont {
             display: grid;
             grid-template-columns: repeat(3, minmax(100px, 1fr));
-            grid-template-rows: repeat(2, 1fr);
+            grid-template-rows: repeat(2, calc((100% - 35px)/2));
             grid-auto-flow: row;
             padding: 10px;
             margin-bottom: 20px;

--
Gitblit v1.9.2