修改大屏时间选择

马宇豪

2022-12-12 ddad5f19e0cd21f5f499e45d8155cb793c621158

 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>
@@ -210,6 +213,7 @@
    import Cookies from "js-cookie";
    import {getInspectComplete, getInspectTask, getDepApplyToday} from "../../../../api/inspectStatistics";
    import {getDepartmentList} from "../../../../api/departmentManage";
    import * as echarts from 'echarts';

    export default {
        components: {},
@@ -220,8 +224,8 @@
                value2:['',''],
                value3:['',''],
                pageIndex: 1,
                pageSize: this.isScreenfull?7:6,
                smallSize: this.isScreenfull?5:4,
                pageSize: 10,
                smallSize: 10,
                eventData: [],
                riskStatusData: [],
                deviceData: [],
@@ -271,7 +275,11 @@
                openCircuitCout: [],
                heightCount: [],
                temporaryPowerCount: [],
                blindPlatePluggingCount: []
                blindPlatePluggingCount: [],
                riskEventConfig: {},
                riskStatusConfig: {},
                deviceConfig: {},
                myVar: null
            };
        },
        created(){
@@ -327,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,
@@ -341,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',
@@ -392,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',
@@ -404,7 +419,6 @@

            reGroup(data,index){
                let arr = []
                console.log(data,'data')
                for(let i of data){
                    arr.push(i.typeList[index].count)
                }
@@ -435,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]
@@ -448,6 +463,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',
@@ -498,20 +517,22 @@
                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 = echarts.init(dom, null, {
                let myChart = this.$echarts.init(dom, null, {
                    renderer: 'canvas',
                    useDirtyRect: false
                });
@@ -553,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: 0,
                        end: 50,
                        orient: 'vertical'
                    },
                    ],
                        legend: {
                        textStyle: {
                            color: '#fff',
@@ -620,7 +636,7 @@
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.hotCount
                            data: t.hotCount
                        },
                        {
                            name: '受限空间作业',
@@ -632,7 +648,7 @@
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.confinedSpaceCount
                            data: t.confinedSpaceCount
                        },
                        {
                            name: '吊装作业',
@@ -644,7 +660,7 @@
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.liftingCount
                            data: t.liftingCount
                        },
                        {
                            name: '动土作业',
@@ -656,7 +672,7 @@
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.groundBreakingCount
                            data: t.groundBreakingCount
                        },
                        {
                            name: '断路作业',
@@ -668,7 +684,7 @@
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.openCircuitCout
                            data: t.openCircuitCout
                        },
                        {
                            name: '高处作业',
@@ -680,7 +696,7 @@
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.heightCount
                            data: t.heightCount
                        },
                        {
                            name: '临时用电作业',
@@ -692,7 +708,7 @@
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.temporaryPowerCount
                            data: t.temporaryPowerCount
                        },
                        {
                            name: '盲板抽堵作业',
@@ -704,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
@@ -722,7 +748,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
                });
@@ -801,7 +827,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
                });
@@ -896,11 +922,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%;
@@ -1173,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;
@@ -1215,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;