From e8d946a82907aa530ff086987d3ec7d2c04a90d2 Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期二, 15 十一月 2022 13:09:55 +0800
Subject: [PATCH] 默认更改列表

---
 src/views/doubleIndex/saftyScreen/components/screen.vue |  171 ++++++++++++++++++++++++++++++++++----------------------
 1 files changed, 104 insertions(+), 67 deletions(-)

diff --git a/src/views/doubleIndex/saftyScreen/components/screen.vue b/src/views/doubleIndex/saftyScreen/components/screen.vue
index cbac527..ff1eaa7 100644
--- a/src/views/doubleIndex/saftyScreen/components/screen.vue
+++ b/src/views/doubleIndex/saftyScreen/components/screen.vue
@@ -29,16 +29,17 @@
                 <div class="item-head">
                     <div>
                         <img src="../../../../assets/images/tit-bg.png">
-                        <span>告警风险事件概括</span>
+                        <span>风险事件概括</span>
                     </div>
                     <div @click="toEvent()">查看更多>></div>
                 </div>
-                <el-table :data="eventData" style="width: 100%;height: 90%">
-                    <el-table-column prop="riskEventName" label="风险事件名称" show-overflow-tooltip></el-table-column>
-                    <el-table-column prop="riskUnitName" label="风险分析单元" show-overflow-tooltip></el-table-column>
-                    <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip align="center"></el-table-column>
-                    <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip align="center"></el-table-column>
-                </el-table>
+<!--                <el-table :data="eventData" style="width: 100%;height: 90%">-->
+<!--                    <el-table-column prop="riskEventName" label="风险事件名称" show-overflow-tooltip></el-table-column>-->
+<!--                    <el-table-column prop="riskUnitName" label="风险分析单元" show-overflow-tooltip></el-table-column>-->
+<!--                    <el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip align="center"></el-table-column>-->
+<!--                    <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip align="center"></el-table-column>-->
+<!--                </el-table>-->
+                <dv-scroll-board :config="riskEventConfig" style="width:100%;height:90%" />
             </div>
             <div class="table-item">
                 <div class="item-head item-head1">
@@ -57,26 +58,27 @@
                     </div>
                     <div @click="toRisk()">查看更多>></div>
                 </div>
-                <el-table :data="riskStatusData" style="width: 100%;height: 90%">
-                    <el-table-column type="index" label="序号" width="60" align="center"/>
+<!--                <el-table :data="riskStatusData" style="width: 100%;height: 90%">-->
+<!--                    <el-table-column type="index" label="序号" width="60" align="center"/>-->
 <!--                    <el-table-column prop="reportTime" label="上报时间" show-overflow-tooltip width="170px"></el-table-column>-->
-                    <el-table-column prop="dangerCode" label="隐患名称" show-overflow-tooltip></el-table-column>
-                    <el-table-column prop="dangerLevel" label="隐患等级" show-overflow-tooltip align="center">
-                        <template slot-scope="scope">
-                            <div :style="{color: scope.row.dangerLevel==1?'#28c3ff':'#ff0000'}">
-                                {{scope.row.dangerLevel==1?'一般隐患':'重大隐患'}}
-                            </div>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="gmtCreate" label="上报时间" show-overflow-tooltip align="center"></el-table-column>
-                    <el-table-column prop="dangerStatus" label="隐患状态" show-overflow-tooltip align="center">
-                        <template slot-scope="scope">
-                            <div :style="{color: scope.row.dangerStatus==0 || scope.row.dangerStatus==1 ?'#00ff7e':(scope.row.dangerStatus==2 || scope.row.dangerStatus==3?'#F56C6C':'#28c3ff')}">
-                                {{scope.row.dangerStatus==0?'整改中':(scope.row.dangerStatus==1?'待验收':(scope.row.dangerStatus==2?'延期整改':(scope.row.dangerStatus==3?'超期未整改':'已验收')))}}
-                            </div>
-                        </template>
-                    </el-table-column>
-                </el-table>
+<!--                    <el-table-column prop="dangerCode" label="隐患名称" show-overflow-tooltip></el-table-column>-->
+<!--                    <el-table-column prop="dangerLevel" label="隐患等级" show-overflow-tooltip align="center">-->
+<!--                        <template slot-scope="scope">-->
+<!--                            <div :style="{color: scope.row.dangerLevel==1?'#28c3ff':'#ff0000'}">-->
+<!--                                {{scope.row.dangerLevel==1?'一般隐患':'重大隐患'}}-->
+<!--                            </div>-->
+<!--                        </template>-->
+<!--                    </el-table-column>-->
+<!--                    <el-table-column prop="gmtCreate" label="上报时间" show-overflow-tooltip align="center"></el-table-column>-->
+<!--                    <el-table-column prop="dangerStatus" label="隐患状态" show-overflow-tooltip align="center">-->
+<!--                        <template slot-scope="scope">-->
+<!--                            <div :style="{color: scope.row.dangerStatus==0 || scope.row.dangerStatus==1 ?'#00ff7e':(scope.row.dangerStatus==2 || scope.row.dangerStatus==3?'#F56C6C':'#28c3ff')}">-->
+<!--                                {{scope.row.dangerStatus==0?'整改中':(scope.row.dangerStatus==1?'待验收':(scope.row.dangerStatus==2?'延期整改':(scope.row.dangerStatus==3?'超期未整改':'已验收')))}}-->
+<!--                            </div>-->
+<!--                        </template>-->
+<!--                    </el-table-column>-->
+<!--                </el-table>-->
+                <dv-scroll-board :config="riskStatusConfig" style="width:100%;height:90%" />
             </div>
             <div class="table-item">
                 <div class="item-head item-head1">
@@ -133,16 +135,17 @@
                     </div>
                     <div @click="toDevices()">查看更多>></div>
                 </div>
-                <el-table class="deviceTable" :data="deviceData" style="width: 100%">
-                    <el-table-column prop="produceDeviceName" label="装置名称" show-overflow-tooltip></el-table-column>
-                    <el-table-column prop="riskLevel" label="风险等级" show-overflow-tooltip align="center">
-                        <template slot-scope="scope">
-                            <div :style="{color: scope.row.riskLevel==1?'#28c3ff':(scope.row.riskLevel==2?'#00ff7e':(scope.row.riskLevel==3?'#ff9a31':'#ff0000'))}">
-                                {{scope.row.riskLevel==1?'低风险':(scope.row.riskLevel==2?'一般风险':(scope.row.riskLevel==3?'较大风险':'重大风险'))}}
-                            </div>
-                        </template>
-                    </el-table-column>
-                </el-table>
+<!--                <el-table class="deviceTable" :data="deviceData" style="width: 100%">-->
+<!--                    <el-table-column prop="produceDeviceName" label="装置名称" show-overflow-tooltip></el-table-column>-->
+<!--                    <el-table-column prop="riskLevel" label="风险等级" show-overflow-tooltip align="center">-->
+<!--                        <template slot-scope="scope">-->
+<!--                            <div :style="{color: scope.row.riskLevel==1?'#28c3ff':(scope.row.riskLevel==2?'#00ff7e':(scope.row.riskLevel==3?'#ff9a31':'#ff0000'))}">-->
+<!--                                {{scope.row.riskLevel==1?'低风险':(scope.row.riskLevel==2?'一般风险':(scope.row.riskLevel==3?'较大风险':'重大风险'))}}-->
+<!--                            </div>-->
+<!--                        </template>-->
+<!--                    </el-table-column>-->
+<!--                </el-table>-->
+                <dv-scroll-board :config="deviceConfig" style="width:100%;height: 60%"/>
                 <div class="deviceLevel">
                     <div class="levelItem red">
                         <span>{{majorRisk}}</span>
@@ -221,8 +224,8 @@
                 value2:['',''],
                 value3:['',''],
                 pageIndex: 1,
-                pageSize: this.isScreenfull?7:6,
-                smallSize: this.isScreenfull?5:4,
+                pageSize: 10,
+                smallSize: 10,
                 eventData: [],
                 riskStatusData: [],
                 deviceData: [],
@@ -272,7 +275,11 @@
                 openCircuitCout: [],
                 heightCount: [],
                 temporaryPowerCount: [],
-                blindPlatePluggingCount: []
+                blindPlatePluggingCount: [],
+                riskEventConfig: {},
+                riskStatusConfig: {},
+                deviceConfig: {},
+                myVar: null
             };
         },
         created(){
@@ -328,6 +335,10 @@
                 let res = await getRiskEvent(data)
                 if (res.data.code === '200'){
                     this.eventData = res.data.data
+                    const conData = res.data.data.map((item)=>{
+                        return [item.riskEventName,item.riskUnitName,item.lastEditUserName,item.gmtCreate]
+                    })
+                    this.riskEventConfig = {data: conData, header: ['风险事件名称', '风险分析单元', '创建人','创建时间'], oddRowBGC: 'rgba(1, 155, 255, 0)', evenRowBGC: 'rgba(1, 155, 255, 0.1)', headerBGC: 'rgba(1,216,255,0.1)',rowNum: 7,align:['center','center','center','center']}
                 } else {
                     this.$message({
                         message:res.data.message,
@@ -342,6 +353,10 @@
                 let res = await getDangerManage(data)
                 if (res.data.code === '200'){
                     this.riskStatusData = res.data.data
+                    const conData = res.data.data.map((item)=>{
+                        return [item.dangerCode,item.dangerLevel==1?'一般隐患':'重大隐患',item.gmtCreate,item.dangerStatus==0?'整改中':(item.dangerStatus==1?'待验收':(item.dangerStatus==2?'延期整改':(item.dangerStatus==3?'超期未整改':'已验收')))]
+                    })
+                    this.riskStatusConfig = {data: conData, header: ['隐患名称', '隐患等级', '上报时间','隐患状态'], oddRowBGC: 'rgba(1, 155, 255, 0)', evenRowBGC: 'rgba(1, 155, 255, 0.1)', headerBGC: 'rgba(1,216,255,0.1)',rowNum: 7,align:['center','center','center','center']}
                 } else {
                     this.$message({
                         type: 'warning',
@@ -393,7 +408,6 @@
                     this.heightCount = this.reGroup(res.data.data,5)
                     this.temporaryPowerCount = this.reGroup(res.data.data,6)
                     this.blindPlatePluggingCount = this.reGroup(res.data.data,7)
-                    console.log(this.depList,'this.depList')
                 }else{
                     this.$message({
                         type:'warning',
@@ -405,7 +419,6 @@
 
             reGroup(data,index){
                 let arr = []
-                console.log(data,'data')
                 for(let i of data){
                     arr.push(i.typeList[index].count)
                 }
@@ -449,6 +462,10 @@
                 let res = await getDevicePage(data)
                 if (res.data.code === '200'){
                     this.deviceData = res.data.data
+                    const conData = res.data.data.map((item)=>{
+                        return [item.produceDeviceName,item.riskLevel==1?'低风险':(item.riskLevel==2?'一般风险':(item.riskLevel==3?'较大风险':'重大风险'))]
+                    })
+                    this.deviceConfig = {data: conData, header: ['装置名称', '风险等级'], oddRowBGC: 'rgba(1, 155, 255, 0)', evenRowBGC: 'rgba(1, 155, 255, 0.1)', headerBGC: 'rgba(1,216,255,0.1)',rowNum: 5,align:['center','center']}
                 } else {
                     this.$message({
                         type: 'warning',
@@ -511,8 +528,9 @@
 
             // 各部门预约
             initAppoint(){
+                const t = this
                 const dom = document.getElementById(this.appointId);
-                let myChart = echarts.init(dom, null, {
+                let myChart = this.$echarts.init(dom, null, {
                     renderer: 'canvas',
                     useDirtyRect: false
                 });
@@ -554,21 +572,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',
@@ -621,7 +634,7 @@
                             emphasis: {
                                 focus: 'series'
                             },
-                            data: this.hotCount
+                            data: t.hotCount
                         },
                         {
                             name: '受限空间作业',
@@ -633,7 +646,7 @@
                             emphasis: {
                                 focus: 'series'
                             },
-                            data: this.confinedSpaceCount
+                            data: t.confinedSpaceCount
                         },
                         {
                             name: '吊装作业',
@@ -645,7 +658,7 @@
                             emphasis: {
                                 focus: 'series'
                             },
-                            data: this.liftingCount
+                            data: t.liftingCount
                         },
                         {
                             name: '动土作业',
@@ -657,7 +670,7 @@
                             emphasis: {
                                 focus: 'series'
                             },
-                            data: this.groundBreakingCount
+                            data: t.groundBreakingCount
                         },
                         {
                             name: '断路作业',
@@ -669,7 +682,7 @@
                             emphasis: {
                                 focus: 'series'
                             },
-                            data: this.openCircuitCout
+                            data: t.openCircuitCout
                         },
                         {
                             name: '高处作业',
@@ -681,7 +694,7 @@
                             emphasis: {
                                 focus: 'series'
                             },
-                            data: this.heightCount
+                            data: t.heightCount
                         },
                         {
                             name: '临时用电作业',
@@ -693,7 +706,7 @@
                             emphasis: {
                                 focus: 'series'
                             },
-                            data: this.temporaryPowerCount
+                            data: t.temporaryPowerCount
                         },
                         {
                             name: '盲板抽堵作业',
@@ -705,15 +718,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
@@ -723,7 +746,7 @@
             // 巡检完成情况
             initRiskFix(){
                 const dom = document.getElementById(this.riskFixId);
-                let myChart = echarts.init(dom, null, {
+                let myChart = this.$echarts.init(dom, null, {
                     renderer: 'canvas',
                     useDirtyRect: false
                 });
@@ -802,7 +825,7 @@
             // 巡检任务情况
             initRiskLevel(){
                 const dom = document.getElementById(this.riskLevelId);
-                let myChart = echarts.init(dom, null, {
+                let myChart = this.$echarts.init(dom, null, {
                     renderer: 'canvas',
                     useDirtyRect: false
                 });
@@ -897,11 +920,25 @@
                     myChart.resize
                 },500)
             }
+        },
+        beforeDestroy(){
+            window.clearInterval(this.myVar)
+            this.myVar = null
+        },
+        destroyed(){
+            // 离开当前路由后的操作
+            window.clearInterval(this.myVar)
+            this.myVar = null
         }
     }
 </script>
 
 <style lang="scss" scoped>
+    ::v-deep.dv-scroll-board{
+        .header{
+            color: #00fff6 !important;
+        }
+    }
     .screen-container{
         width: 100%;
         height: 100%;

--
Gitblit v1.9.2