Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt

Your Name

2023-03-13 4ef69f1d7bdd01471d207c865a394c618c214452

Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt

 package-lock.json

@@ -10,7 +10,7 @@
            "license": "MIT",
            "dependencies": {
                "@element-plus/icons-vue": "^2.0.6",
                "@kjgl77/datav-vue3": "^1.2.1",
                "@kjgl77/datav-vue3": "^1.4.1",
                "@wangeditor/editor": "^5.1.14",
                "axios": "^0.27.2",
                "countup.js": "^2.2.0",
@@ -450,12 +450,9 @@
            }
        },
        "node_modules/@jiaminghi/color": {
            "version": "0.1.1",
            "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-0.1.1.tgz",
            "integrity": "sha512-M09+Sb5HGqVim0zo+nG5gU1v+6gXT8ptr0BZR6dMGt83XmCJgnZtO8s7llTW4hLFFFM5co6geZvTekqLpSPAAQ==",
            "dependencies": {
                "@babel/runtime": "^7.5.5"
            }
            "version": "1.1.3",
            "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz",
            "integrity": "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
        },
        "node_modules/@jiaminghi/transition": {
            "version": "1.1.11",
@@ -466,13 +463,15 @@
            }
        },
        "node_modules/@kjgl77/datav-vue3": {
            "version": "1.2.1",
            "resolved": "https://registry.npmmirror.com/@kjgl77/datav-vue3/-/datav-vue3-1.2.1.tgz",
            "integrity": "sha512-hiSodPvXkp6o8nyPPgDFcrb+M4h9dZd2hmuT3WqHY+sInEHCFtypCGrhvxRFT3oGlcIlLKSX9WVb117JksFROA==",
            "version": "1.4.2",
            "resolved": "https://registry.npmmirror.com/@kjgl77/datav-vue3/-/datav-vue3-1.4.2.tgz",
            "integrity": "sha512-2bwQtvPpRNSmWAUS/e81SLZdOabCdiF3wGkvLjkOa/n4grygNk0f8l7AwpaP0bUlc4ougPgFRIAy/wzkyNocoA==",
            "dependencies": {
                "@jiaminghi/c-render": "^0.4.3",
                "@jiaminghi/charts": "^0.2.18",
                "@vueuse/core": "^9.1.0"
                "@jiaminghi/color": "^1.1.3",
                "@vueuse/core": "^9.1.0",
                "lodash-es": "^4.17.21"
            }
        },
        "node_modules/@kjgl77/datav-vue3/node_modules/@types/web-bluetooth": {
@@ -5089,12 +5088,9 @@
            }
        },
        "@jiaminghi/color": {
            "version": "0.1.1",
            "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-0.1.1.tgz",
            "integrity": "sha512-M09+Sb5HGqVim0zo+nG5gU1v+6gXT8ptr0BZR6dMGt83XmCJgnZtO8s7llTW4hLFFFM5co6geZvTekqLpSPAAQ==",
            "requires": {
                "@babel/runtime": "^7.5.5"
            }
            "version": "1.1.3",
            "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz",
            "integrity": "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
        },
        "@jiaminghi/transition": {
            "version": "1.1.11",
@@ -5105,13 +5101,15 @@
            }
        },
        "@kjgl77/datav-vue3": {
            "version": "1.2.1",
            "resolved": "https://registry.npmmirror.com/@kjgl77/datav-vue3/-/datav-vue3-1.2.1.tgz",
            "integrity": "sha512-hiSodPvXkp6o8nyPPgDFcrb+M4h9dZd2hmuT3WqHY+sInEHCFtypCGrhvxRFT3oGlcIlLKSX9WVb117JksFROA==",
            "version": "1.4.2",
            "resolved": "https://registry.npmmirror.com/@kjgl77/datav-vue3/-/datav-vue3-1.4.2.tgz",
            "integrity": "sha512-2bwQtvPpRNSmWAUS/e81SLZdOabCdiF3wGkvLjkOa/n4grygNk0f8l7AwpaP0bUlc4ougPgFRIAy/wzkyNocoA==",
            "requires": {
                "@jiaminghi/c-render": "^0.4.3",
                "@jiaminghi/charts": "^0.2.18",
                "@vueuse/core": "^9.1.0"
                "@jiaminghi/color": "^1.1.3",
                "@vueuse/core": "^9.1.0",
                "lodash-es": "^4.17.21"
            },
            "dependencies": {
                "@types/web-bluetooth": {

 src/api/intellectInspectSystem/inspectIndex/index.ts

对比新文件
@@ -0,0 +1,41 @@
import request from '/@/utils/request';

export function inspectIndexApi() {
    return {
        //
        getListExcepOrderByPage: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/SafeCheck/abnormalWorkOrder/select/listExcepOrderByPage`,
                method: 'post',
                data: data
            });
        },

        //
        falseAlarmStatus: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/SafeCheck/abnormalWorkOrder/update/falseAlarmStatusById`,
                method: 'post',
                data: data
            });
        },

        //
        acceptedStatus: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/SafeCheck/abnormalWorkOrder/update/acceptedStatusById`,
                method: 'post',
                data: data
            });
        },

        //
        getListImages: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/SafeCheck/abnormalWorkOrder/select/listImagesById`,
                method: 'post',
                data: data
            });
        },
    };
}

 src/api/riskWarning/index.ts

对比新文件
@@ -0,0 +1,46 @@
import request from '/@/utils/request';

export function riskWarningApi() {
    return {

        //spi版本分页列表
        getSpiData: (data:number) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/riskCtrl/spi/report/dep/12month?depId=${data}`,
                method: 'get',
            });
        },

        //获取任意部门事故统计指定月度区间报表
        getRiskByTimeDep: (data: {depId:number,beginYear:string,beginMonth:string,endYear: string,endMonth:string}) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/riskCtrl/risk/report/multipleMonth/incident/department?depId=${data.depId}&beginYear=${data.beginYear}&beginMonth=${data.beginMonth}&endYear=${data.endYear}&endMonth=${data.endMonth}`,
                method: 'get',
            });
        },

        //获取任意部门应急演练指定月度区间报表
        getEmergencyByDep: (data: {depId:number,beginYear:string,beginMonth:string,endYear: string,endMonth:string}) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/riskCtrl/risk/report/multipleMonth/emergency/department?depId=${data.depId}&beginYear=${data.beginYear}&beginMonth=${data.beginMonth}&endYear=${data.endYear}&endMonth=${data.endMonth}`,
                method: 'get',
            });
        },

        //获取任意部门的双重预防隐患指定月份区间报表
        getSelfPreventByTimeDep: (data: {depId:number,beginYear:string,beginMonth:string,endYear: string,endMonth:string}) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/riskCtrl/risk/report/multipleMonth/prevent/department?depId=${data.depId}&beginYear=${data.beginYear}&beginMonth=${data.beginMonth}&endYear=${data.endYear}&endMonth=${data.endMonth}`,
                method: 'get',
            });
        },

        //获取任意部门的直属子部门的双重预防隐患指定月份区间报表
        getPreventByTimeDep: (data: {depId:number,beginYear:string,beginMonth:string,endYear: string,endMonth:string}) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/riskCtrl/risk/report/multipleMonth/prevent/subDepartments?depId=${data.depId}&beginYear=${data.beginYear}&beginMonth=${data.beginMonth}&endYear=${data.endYear}&endMonth=${data.endMonth}`,
                method: 'get',
            });
        }
    };
}

 src/stores/interface/index.ts

@@ -54,7 +54,8 @@

export interface screenThemeState {
    screenTheme: {
        isDark: boolean
        isDark: boolean,
        depId: number
    }
}


 src/stores/screenTheme.ts

@@ -10,12 +10,16 @@
export const useScreenTheme = defineStore('screenTheme', {
    state: (): screenThemeState => ({
        screenTheme:{
            isDark: true
            isDark: true,
            depId: 1
        }
    }),
    actions: {
        async setScreenTheme(value: any) {
            this.screenTheme.isDark = value;
        },
        async setDepId(value: any) {
            this.screenTheme.depId = value;
        }
    },
});

 src/views/intellectInspect/inspectIndex/components/inspectList.vue

 src/views/intellectInspect/inspectIndex/components/unusualList.vue

对比新文件
@@ -0,0 +1,539 @@
<template>
    <el-dialog v-model="unusualListDialog" title="巡检异常清单" width="90%" center>
      <div class="main-card">
        <el-table :data="unusualData" stripe border :header-cell-style="{ background: '#fafafa' }">
          <el-table-column prop="workOrderNum" label="工单编号" align="center"/>
          <el-table-column prop="pointCode" label="异常巡检点" align="center"/>
          <el-table-column prop="occurrenceTime" label="巡检（发现）时间" align="center"/>
          <el-table-column prop="taskName" label="所属巡检任务" align="center"/>
          <el-table-column prop="regionName" label="设备/区域名称" align="center"/>
          <el-table-column prop="refer" label="正常参考值" align="center">
            <template #default="scope">
              <span>{{scope.row.dataReportType==1?(scope.row.firstReferenceValue==0?'正常':'异常'):scope.row.dataReportType==2?((scope.row.secondReferenceSignscope==1?'>':'>=') + scope.row.secondReferenceValue + ',' + (scope.row.thirdReferenceSign==3?'<':'<=') + scope.row.thirdReferenceValue): ((scope.row.firstReferenceValue==0?'正常':'异常') + ',' + ((scope.row.secondReferenceSignscope==1?'>':'>=') + scope.row.secondReferenceValue + ',' + (scope.row.thirdReferenceSign==3?'<':'<=') + scope.row.thirdReferenceValue))}}</span>
            </template>
          </el-table-column>
          <el-table-column label="实际巡检值" align="center">
            <template #default="scope">
              <span>{{scope.row.dataReportType==1?(scope.row.firstReferenceResult==0?'正常':'异常'):scope.row.dataReportType==2?scope.row.secondReferenceResult:(scope.row.firstReferenceResult==0?'正常':'异常') + ',' + scope.row.secondReferenceResult}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="hiddenDangerHandlerName" label="隐患处置人" align="center"/>
          <el-table-column prop="hiddenDangerHandlerPhone" label="电话" align="center"/>
          <el-table-column prop="handlerStatus" label="处置状态" align="center">
            <template #default="scope">
              <el-tag size="small" :type="scope.row.handlerStatus == 2?'danger':(scope.row.handlerStatus == 1 || scope.row.handlerStatus == 3)?'':'success'">{{scope.row.handlerStatus == 1?'待响应':scope.row.handlerStatus == 2?'标记误报':scope.row.handlerStatus == 3?'自查处理中':scope.row.handlerStatus == 4?'已移交上报':scope.row.handlerStatus == 5?'待验收':'已完成'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="handlerDesc" label="处置描述反馈" align="center"/>
          <el-table-column label="操作" align="center" width="180" fixed="right">
            <template #default="scope">
              <el-button v-if="scope.row.handlerStatus == 5" type="text" size="small" class="checkBtn" @click="acceptance(scope.row)">验收</el-button>
              <el-button v-if="scope.row.handlerStatus !==1 && scope.row.handlerStatus !==2" type="text" size="small" class="reviewBtn" @click="openPhoto(scope.row)">查看现场照片</el-button>
              <el-button v-if="scope.row.handlerStatus ==1" type="text" size="small" @click="remark(scope.row)">标记误报</el-button>
              <span v-if="scope.row.handlerStatus == 2" style="color: red">标记误报</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer" style="display: flex;justify-content: right">
          <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </span>
      </template>
        <inspect-record-dialog ref="inspectRecordDialogRef" @refreshInspectRecord="getInspectRecord"></inspect-record-dialog>
      <el-dialog
          v-model="dialogVisible"
          :title= '"工单编号：" + workNum'
          width="60%"
          :before-close="handleClose"
          center
      >
        <div style="margin-bottom: 20px">
          <div style="margin-bottom: 10px">处置前：</div>
          <div v-if="beImgs && beImgs.length>0">
            <el-image v-for="(item,index) in beImgs" :key="index" style="width: 100px; height: 100px" :src="item" fit="fill" />
          </div>
          <div v-else>
            无照片信息
          </div>
        </div>
        <div>
          <div style="margin-bottom: 10px">处置后</div>
          <div v-if="afImgs && beImgs.length>0">
            <el-image v-for="(item,index) in afImgs" :key="index" style="width: 100px; height: 100px" :src="item" fit="fill" />
          </div>
          <div v-else>
            无照片信息
          </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="dialogVisible = false">
                确认
              </el-button>
            </span>
        </template>
      </el-dialog>
    </el-dialog>
</template>

<script lang="ts">
import { toRefs, reactive, ref, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { useUserInfo } from '/@/stores/userInfo';
import { Session } from '/@/utils/storage';
import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
import { ElTable } from 'element-plus';
import { FormInstance, FormRules, ElMessage } from 'element-plus';
import { inspectRecordApi } from '/@/api/intellectInspectSystem/inspectRecord';
import { useRouter } from 'vue-router';
import inspectRecordDialog from './inspectRecordDialog.vue';
import { departmentApi } from '/@/api/systemManage/department';
import {inspectIndexApi} from "/@/api/intellectInspectSystem/inspectIndex";
import {ElMessageBox} from "element-plus/es";
// 定义接口来定义对象的类型
interface stateType {
    unusualData: Array<any>;
    unchecked: null | number;
    unusual: null | number;
    uncheckedList: [];
    abnormalList: [];
    pageIndex: number;
    pageSize: number;
    totalSize: number;
    workTypeList: Array<type>;
    classGroupList: Array<classGroup>;
    quotaList: [];
    departmentList: [];
    inspectPointAllList: [];
    unusualListDialog: boolean;
    dialogVisible:boolean;
    workNum: string;
    beImgs: [];
    afImgs: []
}
interface type {
    id: number;
    name: string;
}
interface classGroup {
    id: number;
    groupName: string;
}
export default {
    name: 'inspectList',
    components: { inspectRecordDialog },
    setup(context) {
        const router = useRouter();
        const state = reactive<stateType>({
            unusualListDialog: false,
          dialogVisible: false,
          workNum: '',
          beImgs: [],
          afImgs: [],
            pageIndex: 1,
            pageSize: 10,
            totalSize: 0,
            unusualData: [],
            unchecked: null,
            unusual: null,
            departmentList: [],
            uncheckedList: [],
            abnormalList: [],
            workTypeList: [
                { id: 1, name: '日常任务' },
                { id: 2, name: '周期任务' }
            ],
            classGroupList: [],
            quotaList: [],
            inspectPointAllList: []
        });
        const inspectRecordDialogRef = ref();
        interface User {
            name: string;
            startTime: string;
            endTime: string;
            info: string;
        }

        // 页面载入时执行方法
        onMounted(() => {

        });

        const showUnusualList = ()=>{
          state.unusualListDialog = true
          getInspectRecord();
        }
        // 分页获取工作时段列表
        const getInspectRecord = async () => {
            const data = { pageSize: state.pageSize, pageIndex: state.pageIndex };
            let res = await inspectIndexApi().getListExcepOrderByPage(data);
            if (res.data.code === '200') {
              state.unusualData = JSON.parse(JSON.stringify(res.data.data.records))
              state.totalSize = res.data.data.total;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };
      const acceptance =(row:object)=>{
        ElMessageBox.confirm(
            '确认完成验收并结束工单？',
            '完成验收',
            {
              confirmButtonText: '确认',
              cancelButtonText: '取消',
              type: 'warning',
              center: true
            }
        )
            .then(async() => {
              const res = await inspectIndexApi().acceptedStatus({id: row.id});
              if (res.data.code === '200') {
                getInspectRecord();
                context.emit('refreshRecord');
                ElMessage({
                  type: 'success',
                  message: '验收成功',
                })
              } else {
                ElMessage({
                  type: 'warning',
                  message: '验收失败'
                });
              }
            })
            .catch(() => {
              ElMessage({
                type: 'info',
                message: '取消验收',
              })
            })
      }
      const remark =(row:object)=>{
        ElMessageBox.confirm(
            '确认是否标记误报？',
            '标记误报',
            {
              confirmButtonText: '确认',
              cancelButtonText: '取消',
              type: 'warning',
              center: true
            }
        )
            .then(async() => {
              const res = await inspectIndexApi().falseAlarmStatus({id: row.id});
              if (res.data.code === '200') {
                getInspectRecord();
                context.emit('refreshRecord');
                ElMessage({
                  type: 'success',
                  message: '标记误报成功',
                })
              } else {
                ElMessage({
                  type: 'warning',
                  message: '标记误报失败'
                });
              }
            })
            .catch(() => {
              ElMessage({
                type: 'info',
                message: '取消标记',
              })
            })
      }
        const openPhoto = async(row)=>{
          state.dialogVisible = true
          state.workNum = row.workOrderNum
          const res = await inspectIndexApi().getListImages({id: row.id});
          if (res.data.code === '200') {
            state.beImgs = res.data.data.beforeImages
            state.afImgs = res.data.data.afterImages
          } else {
            ElMessage({
              type: 'warning',
              message: '图片获取失败'
            });
          }
        }
        const handleSizeChange = (val: number) => {
            state.pageSize = val;
            getInspectRecord();
        };
        const handleCurrentChange = (val: number) => {
            state.pageIndex = val;
            getInspectRecord();
        };

        const toLine = (item) => {
          console.log(item,'item')
            let id = item.id;
            console.log(id,'id')
            router.push({
                path: 'intelligentLine',
                query: {
                    id: id
                }
            });
        };

        const toOverTime = (id) => {
            console.log(state.uncheckedList, 'list');
            router.push({
                path: 'inspectRecord',
                query: {
                    id: id,
                }
            });
        };
        const toDetails = (type: string, item: object) => {

        };
        return {
            View,
            Edit,
            Delete,
            Refresh,
            Plus,
            router,
            inspectRecordDialogRef,
            acceptance,
          openPhoto,
            remark,
            showUnusualList,
            toLine,
            toOverTime,
            toDetails,
            handleSizeChange,
            handleCurrentChange,
            ...toRefs(state)
        };
    }
};
</script>

<style scoped lang="scss">
$homeNavLengh: 8;
@media screen and (min-width: 1366px) {
    .topCard {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bolder;

        .top-info {
            display: flex;
            font-size: 16px;
            align-items: center;
            padding: 10px 15px;
            background: #ffeb87;
            border-radius: 8px;
            border: 1px solid #ffae00;

            & > div {
                vertical-align: middle;
                white-space: nowrap;
                span {
                    font-size: 22px;
                    color: #f3001e;
                    margin: 0 4px;
                    cursor: pointer;

                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    .left-info {
        width: 70%;
        display: flex;
        align-items: center;
        justify-content: left;
        font-size: 16px;
        overflow-x: auto;
        & > span {
            white-space: nowrap;
        }
        p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            & > span {
                white-space: nowrap;
            }
        }
    }
}
@media screen and (min-width: 1200px) and (max-width: 1366px) {
    .topCard {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bolder;

        .top-info {
            display: flex;
            font-size: 14px;
            align-items: center;
            padding: 6px 10px;
            background: #ffeb87;
            border-radius: 4px;
            border: 1px solid #ffae00;

            & > div {
                vertical-align: middle;
                white-space: nowrap;
                span {
                    font-size: 18px;
                    color: #f3001e;
                    margin: 0 2px;
                    cursor: pointer;

                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    .left-info {
        width: 70%;
        display: flex;
        align-items: center;
        justify-content: left;
        font-size: 15px;
        color: #333;
        overflow-x: auto;
        & > span {
            white-space: nowrap;
        }
        p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            & > span {
                white-space: nowrap;
            }
        }
    }
}
@media screen and (max-width: 1200px) {
    .topCard {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bolder;

        .top-info {
            display: flex;
            font-size: 14px;
            align-items: center;
            padding: 2px 6px;
            background: #ffeb87;
            border-radius: 4px;
            border: 1px solid #ffae00;

            & > div {
                vertical-align: middle;
                white-space: nowrap;
                span {
                    font-size: 16px;
                    color: #f3001e;
                    margin: 0 1px;
                    cursor: pointer;

                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    .left-info {
        width: 70%;
        display: flex;
        align-items: center;
        justify-content: left;
        font-size: 12px;
        color: #333;
        overflow-x: auto;
        & > span {
            white-space: nowrap;
        }
        p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            & > span {
                white-space: nowrap;
            }
        }
    }
}

.home-container {
    height: calc(100vh - 144px);
    box-sizing: border-box;
    overflow: hidden;
    .homeCard {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 4px;

        .title {
            font-size: 20px;
            font-weight: bolder;
        }
        .main-card {
            width: 100%;
            height: 100%;
        }
        &:last-of-type {
            position: relative;
            padding-top: 0;
            height: calc(100% - 60px);
        }
    }
    .el-row {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
        .grid-content {
            align-items: center;
            min-height: 36px;
        }
    }
}
.el-input {
    width: 100% !important;
}
.el-date-editor::v-deep {
    width: 100%;
}
.el-select {
    width: 100%;
}
:deep(.el-textarea.is-disabled .el-textarea__inner) {
    background-color: var(--el-card-bg-color);
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
:deep(.el-input.is-disabled .el-input__inner) {
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
:deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: var(--el-card-bg-color);
}
</style>

 src/views/intellectInspect/inspectIndex/index.vue

@@ -1,62 +1,195 @@
<template>
    <div class="home-container">
    <div class="home-container" :class="isFull==true?'container':''" id="bigScreen">
      <div class="full">
        <el-button v-if="isFull==false" type="text" style="height: 34px" @click="toFullscreen">
          <el-icon style="vertical-align: middle">
            <FullScreen />
          </el-icon>
          <span style="vertical-align: middle">全屏</span>
        </el-button>
        <el-button v-else type="text" style="height: 34px" @click="toFullscreen">
          <el-icon style="vertical-align: middle">
            <Close />
          </el-icon>
          <span style="vertical-align: middle">退出全屏</span>
        </el-button>
      </div>
        <div style="height: 100%">
            <div class="homeCard topCard">
                <div class="title">当前巡检任务</div>
                <div class="top-info" v-if="unchecked != 0 || unusual != 0">
                    <el-icon :size="18" color="#F3001E" style="margin-right: 4px"><BellFilled /></el-icon>
                    预警消息：
                    <div v-if="unchecked != 0">
          <div class="topChart">
            <div class="chart-item">
              <div class="chart-tit">
                <span class="tit">年度巡检异常趋势</span>
              </div>
              <div class="chart" :id="xjLine"></div>
            </div>
            <div class="chart-item">
              <div class="chart-tit">
                <span class="tit">异常区域设备统计</span>
                <div class="filter-part">
                  <el-switch
                      v-model="chartStatus"
                      inline-prompt
                      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #13ce66"
                      active-text="区域"
                      inactive-text="设备"
                  />
                </div>
              </div>
              <div class="chart" :id="sbtj"></div>
              <el-radio-group v-model="period" size="small">
                <el-radio border label="week">近7天</el-radio>
                <el-radio border label="month">近30天</el-radio>
                <el-radio border label="season">近90天</el-radio>
                <el-radio border label="year">近一年</el-radio>
              </el-radio-group>
            </div>
          </div>
            <div class="midChart">
              <div class="chart-item">
                <div class="chart-tit">
                  <div style="display: flex;align-items: center">
                    <span class="tit">当前巡检任务</span>
                    <div class="top-info" v-if="unchecked != 0 || unusual != 0">
                      <el-icon :size="18" color="#F3001E" style="margin-right: 4px"><BellFilled /></el-icon>
                      <div>预警消息：</div>
                      <div v-if="unchecked != 0">
                        当日超期未巡检任务<el-tooltip
                            class="box-item"
                            effect="light"
                            content="查看相关记录"
                            placement="bottom-start"
                    ><span @click="toOverTime(4)">{{ unchecked }}</span></el-tooltip>个
                    </div>
                    <span v-if="unchecked != 0 && unusual != 0">，</span>
                    <div v-if="unusual != 0">
                          class="box-item"
                          effect="light"
                          content="查看相关记录"
                          placement="bottom-start"
                      ><span @click="toOverTime(4)">{{ unchecked }}</span></el-tooltip>个
                      </div>
                      <span v-if="unchecked != 0 && unusual != 0">，</span>
                      <div v-if="unusual != 0">
                        存在异常任务<el-tooltip
                            class="box-item"
                            effect="light"
                            content="查看相关记录"
                            placement="bottom-start"
                    ><span @click="toOverTime(5)">{{ unusual }}</span
                        ></el-tooltip>个
                          class="box-item"
                          effect="light"
                          content="查看相关记录"
                          placement="bottom-start"
                      ><span @click="toOverTime(5)">{{ unusual }}</span
                      ></el-tooltip>个
                      </div>
                      。
                    </div>
                    。
                  </div>
                  <div class="checkAll" @click="checkAllRecord()">
                    全部记录>>
                  </div>
                </div>
            </div>
            <div class="homeCard">
                <div class="main-card">
                    <div class="list">
                        <div class="cardTop" v-for="(item, index) in tableData" :key="index">
                            <div class="left-info">
                                <span class="num">{{ pageSize * (pageIndex - 1) + index + 1 }}、</span>
                                <span class="place">{{ item.taskName }}，</span>
                                <p v-if="item.execUserName == null">该任务暂无人认领</p>
                                <p v-else>
                                    <span class="time">{{ item.taskStatus == 2 ? item.startTime : item.endTime }}</span
                                    >由<span class="name">{{ item.execUserName }}</span
                                    >进行的巡检任务
                                </p>
                            </div>
                            <div class="mid-info">
                                任务状态：<span :class="item.taskStatus == 1 ? 'grey' : item.taskStatus == 2 ? 'green' : item.taskStatus == 3 ? 'blue' : 'red'">{{ item.taskStatus == 1 ? '待巡检' : item.taskStatus == 2 ? '巡检中' : item.taskStatus == 3 ? '已巡检' : '超期未巡检' }}</span>
                            </div>
                            <div class="right-info">
                                <div v-if="item.taskStatus == 2" @click="toLine(item)" class="checkBtn">查看实时巡检</div>
                                <div v-else class="reviewBtn" @click="toDetails('查看', item)">[查看巡检记录]</div>
                            </div>
                <div class="chart">
                  <el-table :data="tableData" stripe border :header-cell-style="{ background: '#fafafa' }">
                    <el-table-column label="任务信息" align="center">
                      <template #default="scope">
                        <div class="left-info">
                          <span>{{ scope.row.taskName }}，</span>
                          <p v-if="scope.row.execUserName == null">该任务暂无人认领</p>
                          <p v-else>
                              <span class="time">{{ scope.row.taskStatus == 2 ? scope.row.startTime : scope.row.endTime }}</span>由<span class="name">{{ scope.row.execUserName }}</span>进行的巡检任务
                          </p>
                        </div>
                    </div>
                    <div class="pageBtn">
                        <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="taskStatus" label="任务状态" align="center" width="180">
                      <template #default="scope">
                        <span :class="scope.row.taskStatus == 1 ? 'grey' : scope.row.taskStatus == 2 ? 'green' : scope.row.taskStatus == 3 ? 'blue' : 'red'">{{ scope.row.taskStatus == 1 ? '待巡检' : scope.row.taskStatus == 2 ? '巡检中' : scope.row.taskStatus == 3 ? '已巡检' : '超期未巡检' }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="180">
                      <template #default="scope">
                        <el-button type="text" size="small" v-if="scope.row.taskStatus == 2" @click="toLine(scope.row)" class="checkBtn">查看实时巡检</el-button>
                        <el-button type="text" size="small" v-else class="reviewBtn" @click="toDetails('查看', scope.row)">查看巡检记录</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          <div class="midChart">
            <div class="chart-item">
              <div class="chart-tit">
                  <span class="tit">巡检异常清单</span>
                  <div class="checkAll" @click="checkAllList()">
                    全部记录>>
                  </div>
              </div>
              <div class="chart">
                <el-table :data="unusualData" stripe border :header-cell-style="{ background: '#fafafa' }">
                  <el-table-column prop="workOrderNum" label="工单编号" align="center"/>
                  <el-table-column prop="pointCode" label="异常巡检点" align="center"/>
                  <el-table-column prop="occurrenceTime" label="巡检（发现）时间" align="center"/>
                  <el-table-column prop="taskName" label="所属巡检任务" align="center"/>
                  <el-table-column prop="regionName" label="设备/区域名称" align="center"/>
                  <el-table-column prop="refer" label="正常参考值" align="center">
                    <template #default="scope">
                      <span>{{scope.row.dataReportType==1?(scope.row.firstReferenceValue==0?'正常':'异常'):scope.row.dataReportType==2?((scope.row.secondReferenceSignscope==1?'>':'>=') + scope.row.secondReferenceValue + ',' + (scope.row.thirdReferenceSign==3?'<':'<=') + scope.row.thirdReferenceValue): ((scope.row.firstReferenceValue==0?'正常':'异常') + ',' + ((scope.row.secondReferenceSignscope==1?'>':'>=') + scope.row.secondReferenceValue + ',' + (scope.row.thirdReferenceSign==3?'<':'<=') + scope.row.thirdReferenceValue))}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="实际巡检值" align="center">
                    <template #default="scope">
                      <span>{{scope.row.dataReportType==1?(scope.row.firstReferenceResult==0?'正常':'异常'):scope.row.dataReportType==2?scope.row.secondReferenceResult:(scope.row.firstReferenceResult==0?'正常':'异常') + ',' + scope.row.secondReferenceResult}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="hiddenDangerHandlerName" label="隐患处置人" align="center"/>
                  <el-table-column prop="hiddenDangerHandlerPhone" label="电话" align="center"/>
                  <el-table-column prop="handlerStatus" label="处置状态" align="center">
                    <template #default="scope">
                      <el-tag size="small" :type="scope.row.handlerStatus == 2?'danger':(scope.row.handlerStatus == 1 || scope.row.handlerStatus == 3)?'':'success'">{{scope.row.handlerStatus == 1?'待响应':scope.row.handlerStatus == 2?'标记误报':scope.row.handlerStatus == 3?'自查处理中':scope.row.handlerStatus == 4?'已移交上报':scope.row.handlerStatus == 5?'待验收':'已完成'}}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="handlerDesc" label="处置描述反馈" align="center"/>
                  <el-table-column label="操作" align="center" width="180" fixed="right">
                    <template #default="scope">
                      <el-button v-if="scope.row.handlerStatus == 5" type="text" size="small" class="checkBtn" @click="acceptance(scope.row)">验收</el-button>
                      <el-button v-if="scope.row.handlerStatus !==1 && scope.row.handlerStatus !==2" type="text" size="small" class="reviewBtn" @click="openPhoto(scope.row)">查看现场照片</el-button>
                      <el-button v-if="scope.row.handlerStatus ==1" type="text" size="small" @click="remark(scope.row)">标记误报</el-button>
                      <span v-if="scope.row.handlerStatus == 2" style="color: red">标记误报</span>
                    </template>
                  </el-table-column>
                </el-table>
<!--                <div class="pageBtn">-->
<!--                  <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />-->
<!--                </div>-->
              </div>
            </div>
          </div>
        </div>
        <el-dialog
            v-model="dialogVisible"
            :title= '"工单编号：" + workNum'
            width="60%"
            :before-close="handleClose"
            center
        >
          <div style="margin-bottom: 20px">
            <div style="margin-bottom: 10px">处置前：</div>
            <div v-if="beImgs && beImgs.length>0">
              <el-image v-for="(item,index) in beImgs" :key="index" style="width: 100px; height: 100px" :src="item" fit="fill" />
            </div>
            <div v-else>
              无照片信息
            </div>
          </div>
          <div>
            <div style="margin-bottom: 10px">处置后</div>
            <div v-if="afImgs && beImgs.length>0">
              <el-image v-for="(item,index) in afImgs" :key="index" style="width: 100px; height: 100px" :src="item" fit="fill" />
            </div>
            <div v-else>
              无照片信息
            </div>
          </div>
          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="dialogVisible = false">
                确认
              </el-button>
            </span>
          </template>
        </el-dialog>
        <inspect-record-dialog ref="inspectRecordDialogRef" @refreshInspectRecord="getInspectRecord"></inspect-record-dialog>
        <inspect-list ref="inspectListRef"></inspect-list>
        <unusual-list ref="unusualListRef" @refreshRecord="getListExcepOrder"></unusual-list>
    </div>
</template>

@@ -68,14 +201,20 @@
import { Session } from '/@/utils/storage';
import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
import { ElTable } from 'element-plus';
import { FormInstance, FormRules, ElMessage } from 'element-plus';
import { FormInstance, FormRules, ElMessage, ElMessageBox } from 'element-plus';
import { inspectRecordApi } from '/@/api/intellectInspectSystem/inspectRecord';
import { inspectIndexApi } from '/@/api/intellectInspectSystem/inspectIndex'
import { useRouter } from 'vue-router';
import * as echarts from 'echarts'
import inspectRecordDialog from './components/inspectRecordDialog.vue';
import inspectList from './components/inspectList.vue';
import unusualList from './components/unusualList.vue';
import { departmentApi } from '/@/api/systemManage/department';
import screenfull from "screenfull";
// 定义接口来定义对象的类型
interface stateType {
    tableData: Array<string>;
    unusualData: Array<any>;
    unchecked: null | number;
    unusual: null | number;
    uncheckedList: [];
@@ -89,6 +228,14 @@
    classGroupList: Array<classGroup>;
    quotaList: [];
    inspectPointAllList: [];
    chartStatus:boolean;
    period: string;
    isFull:boolean;
    themeColor:string;
    dialogVisible:boolean;
    workNum: string;
    beImgs: [];
    afImgs: []
}
interface type {
    id: number;
@@ -99,17 +246,27 @@
    groupName: string;
}
export default {
    name: 'workingHours',
    components: { inspectRecordDialog },
    name: 'inspectIndex',
    components: { inspectRecordDialog, inspectList, unusualList },
    setup() {
        const router = useRouter();
        const xjLine = ref("eChartXjLine" + Date.now() + Math.random())
        const sbtj = ref("eChartSbtj" + Date.now() + Math.random())
        const state = reactive<stateType>({
            isFull: false,
            themeColor: '#333',
            workNum: '',
            beImgs: [],
            afImgs: [],
            pageIndex: 1,
            pageSize: 10,
            pageSize: 5,
            totalSize: 0,
            tableData: [],
            unusualData: [],
            unchecked: null,
            unusual: null,
            chartStatus: true,
            period: 'month',
            uncheckedList: [],
            abnormalList: [],
            workTypeList: [
@@ -126,9 +283,12 @@
            ],
            classGroupList: [],
            quotaList: [],
            inspectPointAllList: []
            inspectPointAllList: [],
            dialogVisible: false
        });
        const inspectRecordDialogRef = ref();
        const inspectListRef = ref();
        const unusualListRef = ref();
        interface User {
            name: string;
            startTime: string;
@@ -139,11 +299,274 @@
        // 页面载入时执行方法
        onMounted(() => {
            getInspectRecord();
            getListExcepOrder();
            getDayData();
            getDepartmentData();
            initXjLine()
            initSbtj()
        });
        const toFullscreen =()=>{
          // console.log(state.isFull,'quanp',state.themeColor)
          const element = document.getElementById('bigScreen')
          if (!screenfull.isEnabled) {
            ElMessage.warning('暂不不支持全屏');
            return false;
          }
          screenfull.toggle(element);
          state.isFull = !state.isFull
          if(state.isFull == true){
            state.themeColor = '#11FEEE'
          }else{
            state.themeColor = '#333'
          }
          initXjLine()
          initSbtj()
        }
        const checkAllRecord =()=>{
          inspectListRef.value.departmentList = state.departmentList
          inspectListRef.value.showInspectList()
        }
        const checkAllList =()=>{
          unusualListRef.value.showUnusualList()
        }
        const acceptance =(row:object)=>{
          ElMessageBox.confirm(
              '确认完成验收并结束工单？',
              '完成验收',
              {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
              }
          )
              .then(async() => {
                const res = await inspectIndexApi().acceptedStatus({id: row.id});
                if (res.data.code === '200') {
                  getListExcepOrder();
                  ElMessage({
                    type: 'success',
                    message: '验收成功',
                  })
                } else {
                  ElMessage({
                    type: 'warning',
                    message: '验收失败'
                  });
                }
              })
              .catch(() => {
                ElMessage({
                  type: 'info',
                  message: '取消验收',
                })
              })
        }
        const remark =(row:object)=>{
          ElMessageBox.confirm(
              '确认是否标记误报？',
              '标记误报',
              {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
              }
          )
              .then(async() => {
                const res = await inspectIndexApi().falseAlarmStatus({id: row.id});
                if (res.data.code === '200') {
                  getListExcepOrder();
                  ElMessage({
                    type: 'success',
                    message: '标记误报成功',
                  })
                } else {
                  ElMessage({
                    type: 'warning',
                    message: '标记误报失败'
                  });
                }
              })
              .catch(() => {
                ElMessage({
                  type: 'info',
                  message: '取消标记',
                })
              })
        }
        const openPhoto = async(row)=>{
          state.dialogVisible = true
          state.workNum = row.workOrderNum
          const res = await inspectIndexApi().getListImages({id: row.id});
          if (res.data.code === '200') {
              state.beImgs = res.data.data.beforeImages
              state.afImgs = res.data.data.afterImages
          } else {
            ElMessage({
              type: 'warning',
              message: '图片获取失败'
            });
          }
        }
        type EChartsOption = echarts.EChartsOption
        const initXjLine =()=>{
          let dom = document.getElementById(xjLine.value);
          let myChart = echarts.init(dom);

        // 分页获取工作时段列表
          let option: EChartsOption;

          option = {
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['总趋势', '事业部'],
              height: '15%',
              top: 0,
              bottom: 0,
              padding:[1,1,1,0],
              textStyle: {
                // 设置默认的文字颜色
                color: state.themeColor,
                fontSize: 12
              },
            },
            grid: {
              top: '15%',
              left: '3%',
              right: '3%',
              bottom: 0,
              containLabel: true
            },
            toolbox: {
              feature: {
                // saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'],
              axisLabel: {
                color: state.themeColor
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '总趋势',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 120, 132, 101, 134, 90, 230, 210],
                label:{
                  show: true,
                  color: '#95d475',
                  fontSize: 12
                },
                lineStyle:{
                  width: 1,
                  color: '#95d475'
                },
                itemStyle:{
                  color: '#95d475',
                  borderColor: '#fff',
                  borderWidth: 2
                }
              },
              {
                name: '事业部',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290, 330, 310],
                label:{
                  show: true,
                  color: '#337ecc',
                  fontSize: 12
                },
                lineStyle:{
                  width: 1,
                  color: '#337ecc'
                },
                itemStyle:{
                  color: '#337ecc',
                  borderColor: '#fff',
                  borderWidth: 2
                }
              }
            ]
          }

          option && myChart.setOption(option);
          window.addEventListener("resize",function (){
            myChart.resize();
          });
        }
        const initSbtj =()=>{
          let dom = document.getElementById(sbtj.value);
          let myChart = echarts.init(dom);
          let option: EChartsOption;
          option = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              top: 'center',
              textStyle: {
                // 设置默认的文字颜色
                color: state.themeColor,
                fontSize: 12
              },
              itemStyle: {
                borderWidth: 0 // 设置图例边框宽度为0
              }
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 1,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: true
                },
                data: [
                  { value: 1048, name: '区域1' },
                  { value: 735, name: '区域2' },
                  { value: 580, name: '区域3' },
                  { value: 484, name: '区域4' },
                  { value: 735, name: '区域5' }
                ]
              }
            ]
          }

          option && myChart.setOption(option);
          window.addEventListener("resize",function (){
            myChart.resize();
          });
        }
        // 分页获取
        const getInspectRecord = async () => {
            const data = { pageSize: state.pageSize, pageIndex: state.pageIndex };
            let res = await inspectRecordApi().getInspectRecordByIndex(data);
@@ -156,6 +579,19 @@
                    message: res.data.msg
                });
            }
        };
        // 分页获取
        const getListExcepOrder = async () => {
          const data = { pageSize: 4, pageIndex: state.pageIndex };
          let res = await inspectIndexApi().getListExcepOrderByPage(data);
          if (res.data.code === '200') {
            state.unusualData = JSON.parse(JSON.stringify(res.data.data.records))
          } else {
            ElMessage({
              type: 'warning',
              message: res.data.msg
            });
          }
        };
        //获取部门
        const getDepartmentData = async () => {
@@ -222,9 +658,19 @@
            Edit,
            Delete,
            Refresh,
            xjLine,
            sbtj,
            Plus,
            router,
            inspectRecordDialogRef,
            inspectListRef,
            unusualListRef,
            toFullscreen,
            checkAllRecord,
            checkAllList,
            acceptance,
            remark,
            openPhoto,
            toLine,
            toOverTime,
            toDetails,
@@ -239,319 +685,240 @@
<style scoped lang="scss">
$homeNavLengh: 8;
@media screen and (min-width: 1366px) {
    .topCard {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bolder;

        .top-info {
            display: flex;
            font-size: 16px;
            align-items: center;
            padding: 10px 15px;
            background: #ffeb87;
            border-radius: 8px;
            border: 1px solid #ffae00;

            & > div {
                vertical-align: middle;
                white-space: nowrap;
                span {
                    font-size: 22px;
                    color: #f3001e;
                    margin: 0 4px;
                    cursor: pointer;

                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    .left-info {
        width: 70%;
        display: flex;
        align-items: center;
        justify-content: left;
        font-size: 18px;
        color: #333;
        overflow-x: auto;
        & > span {
            white-space: nowrap;
        }
        p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            & > span {
                white-space: nowrap;
            }
        }
    }
    .mid-info {
        width: 20%;
        font-size: 18px;
        color: #333;
    }
    .right-info {
        width: 10%;
        display: flex;
        justify-content: right;
        align-items: center;
        font-size: 16px;
        color: #fff;

        div {
            white-space: nowrap;
        }
    }
}
@media screen and (min-width: 1200px) and (max-width: 1366px) {
    .topCard {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bolder;

        .top-info {
            display: flex;
            font-size: 14px;
            align-items: center;
            padding: 6px 10px;
            background: #ffeb87;
            border-radius: 4px;
            border: 1px solid #ffae00;

            & > div {
                vertical-align: middle;
                white-space: nowrap;
                span {
                    font-size: 18px;
                    color: #f3001e;
                    margin: 0 2px;
                    cursor: pointer;

                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    .left-info {
        width: 70%;
        display: flex;
        align-items: center;
        justify-content: left;
        font-size: 15px;
        color: #333;
        overflow-x: auto;
        & > span {
            white-space: nowrap;
        }
        p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            & > span {
                white-space: nowrap;
            }
        }
    }
    .mid-info {
        width: 20%;
        font-size: 15px;
        color: #333;
    }
    .right-info {
        width: 10%;
        display: flex;
        justify-content: right;
        align-items: center;
        font-size: 13px;
        color: #fff;
        div {
            white-space: nowrap;
        }
    }
}
@media screen and (max-width: 1200px) {
    .topCard {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bolder;

        .top-info {
            display: flex;
            font-size: 14px;
            align-items: center;
            padding: 2px 6px;
            background: #ffeb87;
            border-radius: 4px;
            border: 1px solid #ffae00;

            & > div {
                vertical-align: middle;
                white-space: nowrap;
                span {
                    font-size: 16px;
                    color: #f3001e;
                    margin: 0 1px;
                    cursor: pointer;

                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    .left-info {
        width: 70%;
        display: flex;
        align-items: center;
        justify-content: left;
        font-size: 12px;
        color: #333;
        overflow-x: auto;
        & > span {
            white-space: nowrap;
        }
        p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            & > span {
                white-space: nowrap;
            }
        }
    }
    .mid-info {
        width: 20%;
        font-size: 12px;
        color: #333;
    }
    .right-info {
        width: 10%;
        display: flex;
        justify-content: right;
        align-items: center;
        font-size: 12px;
        color: #fff;
        div {
            white-space: nowrap;
        }
    }
}

.home-container {
    height: calc(100vh - 144px);
    box-sizing: border-box;
    overflow: hidden;
    .homeCard {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 4px;
    .full{
      position:fixed;
      height: 34px;
      line-height: 34px;
      top: 80px;
      right: 20px;
      z-index: 99999;
    }
    .topChart{
      width: 100%;
      height: calc((100% - 40px) / 3);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20px;
      &:last-of-type{
        margin-bottom: 0;
      }

        .title {
      .chart-item{
        width: calc(60% - 20px);
        height: 100%;
        margin-right: 20px;
        position: relative;
        background: #fff;
        padding: 20px;

        &:last-of-type{
          width: 40%;
          margin-right: 0;
        }

        .chart-tit{
          width: 100%;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          .tit{
            font-size: 1.33rem;
            font-weight: bolder;
          }
          .filter-part{
            display: flex;
            align-items: center;
            justify-content: right;
            width: 20%;
            .el-switch{
              width: 100% !important;
              :deep(.el-switch__core){
                width: 100% !important;
              }
            }
          }
        }
        .chart{
          width: 100%;
          height: 88%;
        }
        .el-radio-group{
          width: 20%;
          display: flex;
          flex-flow: column nowrap;
          align-items: flex-start;
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-30%);

          .el-radio{
            width: 100%;
            margin-bottom: 4px;
          }
        }
        :deep(.active-ring-info){
          .active-ring-name{
            font-size: 1.5rem !important;
            text-align: center;
          }
        }
      }
    }
    .midChart{
      height: calc((100% - 40px) / 3);
      width: 100%;
      background: #fff;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20px;
      padding: 20px;

      .chart-item{
        width: 100%;
        height: 100%;
        padding: 0 0 20px;

        .chart-tit{
          width: 100%;
          height: 15%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .tit{
            font-size: 20px;
            font-weight: bolder;
        }
        .main-card {
            width: 100%;
            height: 100%;
            .cardTop {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 10px;
                background: #daf3ff;
                padding: 10px 15px;
                border-radius: 8px;
          }
          :deep(.el-switch__core){
            width: 120px;

                .left-info {
                    .num {
                        font-weight: bolder;
                        margin-right: 10px;
                    }
                    .place {
                        font-weight: bolder;
                    }
                    .time {
                        font-weight: bolder;
                        margin-right: 5px;
                    }
                    .name {
                        font-weight: bolder;
                        margin: 0 5px;
                        font-weight: bolder;
                    }
                }
                .mid-info {
                    span {
                        font-weight: bolder;
                    }
          }
          .top-info {
            display: flex;
            font-size: 14px;
            align-items: center;
            background: #ffeb87;
            padding: 4px 10px;
            margin-left: 20px;
            border-radius: 2px;
            border: 1px solid #ffae00;
            & > div {
              vertical-align: middle;
              white-space: nowrap;
              height: 100%;
              span {
                color: #f3001e;
                margin: 0 4px;
                font-size: 18px;
                cursor: pointer;
                font-weight: bolder;

                    .grey {
                        color: #999;
                    }
                    .green {
                        color: #44b100;
                    }
                    .blue {
                        color: #409eff;
                    }
                    .red {
                        color: red;
                    }
                &:hover{
                  text-decoration: underline;
                }
                .right-info {
                    .checkBtn {
                        padding: 10px 15px;
                        background: #409eff;
                        border-radius: 4px;
                        cursor: pointer;
                    }

                    .reviewBtn {
                        margin: 10px 15px;
                        cursor: pointer;
                        color: #44b100;
                    }
                }
              }
            }
            .list {
                height: calc(100% - 60px);
                overflow-y: auto;
          }
          .checkAll{
            cursor: pointer;
            &:hover{
              color: #409eff
            }
            .pageBtn {
                position: absolute;
                bottom: 15px;
                right: 20px;
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: right;
          }
        }
        .chart{
          width: 100%;
          height: 85%;
          margin-top: 10px;

                .demo-pagination-block + .demo-pagination-block {
                    margin-top: 10px;
          .el-table{
            height: 100% !important;
            :deep(.el-table__inner-wrapper){
              height: 100% !important;
              .el-table__header-wrapper {
                height: 20% !important;
                .el-table__header{
                  height: 100% !important;
                  th{
                    height: 100% !important;
                    padding: 0 0 !important;
                    .cell{
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    }
                  }
                }
                .demo-pagination-block .demonstration {
                    margin-bottom: 16px;
              }
              .el-table__body-wrapper {
                height: 80% !important;
                .el-scrollbar__view{
                  height: 100% !important;
                  .el-table__body{
                    height: 100% !important;
                    tbody{
                      height: 100% !important;
                      .el-table__row{
                        height: 25% !important;
                        td{
                          height: 25% !important;
                          padding: 0 0 !important;
                          .left-info{
                            display: flex;
                            align-items: center;
                          }
                          .cell{
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                          }
                          .el-button{
                            padding: 0 !important;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          .pageBtn {
            position: absolute;
            bottom: 15px;
            right: 20px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: right;

            .demo-pagination-block + .demo-pagination-block {
              margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
              margin-bottom: 16px;
            }
          }
        }
        &:last-of-type {
            position: relative;
            padding-top: 0;
            height: calc(100% - 60px);
        }
      }
    }

    .el-row {
        display: flex;
        align-items: center;
@@ -565,6 +932,193 @@
        }
    }
}
.container{
  padding: 20px;
  background: url('../../../assets/spwbg.png') no-repeat center;

  .full{
    position:fixed;
    background: #fff;
    border-radius: 17px;
    box-shadow: 3px 3px 12px rgba(0,0,0,.2);
    height: 34px;
    line-height: 34px;
    top: 0;
    right: 20px;
  }
  .topChart{
    .chart-item{
      border-radius: 4px;
      background: rgba(8, 109, 209, 0.2);
      border: 1px solid rgba(54, 252, 252, .6);
      backdrop-filter: blur(5px);
      position: relative;
      z-index: 2;
      &:last-of-type{
        position: relative;
        z-index: 1;
      }
      .el-radio.is-bordered.is-checked{
        border-color: #11FEEE !important;
        :deep(.el-radio__inner){
          border-color: #11FEEE !important;
          background: #11FEEE !important;
        }
        :deep(.el-radio__label){
          color: #11FEEE !important
        }
      }
      .chart-tit{
        .tit{
          color: #11FEEE;
        }
        ::v-deep(.el-popper){
          background-color: rgba(10,31,92,1);
          border: 1px solid rgba(17,254,238,.4);
          color: #11FEEE;
          .el-cascader-node{
            .in-active-path{
              background: #0049af;
            }
            &:hover{
              background: #0049af;
            }
          }
          .el-cascader-node__label{
            color: #11FEEE;
          }
          .el-icon{
            color: #11FEEE;
          }
          .el-select-dropdown__item{
            color: #11FEEE;
          }
          .el-select-dropdown__item.hover{
            background: #0049af;
          }
        }
        ::v-deep(.el-popper__arrow){
          &::before{
            background-color: rgba(10,31,92,.6) !important;
            border: 1px solid rgba(17,254,238,.4);
          }
        }
        ::v-deep(.el-input__wrapper){
          box-shadow: none;
          border: 1px solid rgba(17,254,238,.2);
          background: rgba(10,31,92,.6) !important;
          height: 1.5rem;
          color: #11FEEE;

          input{
            font-size: 0.8rem;
            color: #11FEEE;
          }
          .el-icon{
            color: #11FEEE;
          }
        }
      }
      .chart{
        .el-table {
          color: #11FEEE !important;
          background-color: rgba(0,0,0,0) !important;
          :deep(thead){
            color: #11FEEE !important;
          }
          :deep(tr){
            background-color: rgba(0,0,0,0) !important;
            .el-table__cell{
              background-color: rgba(0,0,0,0) !important;
            }
          }
        }
      }
    }
  }
  .midChart{
    border-radius: 4px;
    background: rgba(8, 109, 209, 0.2);
    border: 1px solid rgba(54, 252, 252, .6);
    backdrop-filter: blur(5px);
    position: relative;
    z-index: 3;
    .tit{
      color: #11FEEE;
    }
    .checkAll{
      cursor: pointer;
      color: #11feee;
      &:hover{
        color: #409eff
      }
    }
    .el-table {
      color: #11FEEE !important;
      background-color: rgba(0,0,0,0) !important;
      :deep(thead){
        color: #11FEEE !important;
        background-color: #092846 !important
      }
      :deep(tr){
        background-color: rgba(0,0,0,0) !important;
        .el-table__cell{
          background-color: rgba(0,0,0,0) !important;
        }
        .el-table-fixed-column--right{
          background-color: #092846 !important
        }
      }
    }

    ::v-deep(.el-popper){
      background-color: rgba(10,31,92,1);
      border: 1px solid rgba(17,254,238,.4);
      color: #11FEEE;
      .el-cascader-node{
        .in-active-path{
          background: #0049af;
        }
        &:hover{
          background: #0049af;
        }
      }
      .el-cascader-node__label{
        color: #11FEEE;
      }
      .el-icon{
        color: #11FEEE;
      }
      .el-select-dropdown__item{
        color: #11FEEE;
      }
      .el-select-dropdown__item.hover{
        background: #0049af;
      }
    }
    ::v-deep(.el-popper__arrow){
      &::before{
        background-color: rgba(10,31,92,.6) !important;
        border: 1px solid rgba(17,254,238,.4);
      }
    }
    ::v-deep(.el-input__wrapper){
      box-shadow: none;
      border: 1px solid rgba(17,254,238,.2);
      background: rgba(10,31,92,.6) !important;
      height: 1.5rem;
      color: #11FEEE;

      input{
        font-size: 0.8rem;
        color: #11FEEE;
      }
      .el-icon{
        color: #11FEEE;
      }
    }
  }
}
.el-input {
    width: 100% !important;
}

 src/views/intellectInspect/inspectIndex2/components/inspectRecordDialog.vue

文件已删除

 src/views/intellectInspect/inspectIndex2/components/sum.vue

文件已删除

 src/views/intellectInspect/inspectIndex2/components/unusualList.vue

文件已删除

 src/views/intellectInspect/inspectIndex2/index.vue

文件已删除

 src/views/riskWarningSys/warningBigScreen/components/SPI.vue

@@ -1,17 +1,5 @@
<template>
    <div class="charts-cont">
        <div :class="spiChart">
            <el-cascader
                class="spiSe"
                :teleported="false"
                v-model="spiValue"
                :options="departList"
                :props="spiProps"
                :show-all-levels="false"
                @change="handleChange"
            />
        </div>

        <div class="spi" :id="spi">

        </div>
@@ -32,12 +20,13 @@
    import '/@/theme/bigScreen.css'
    import {useScreenTheme} from "/@/stores/screenTheme";
    import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
    import {riskWarningApi} from "/@/api/riskWarning";

    interface stateType {
        spiValue: number;
        departList: Array<any>;
        spiChart: string;
        spiProps: object
        spiData: Array<any>;
        year: string;
        monthList: Array<string>;
        valueList: Array<string>
    }
    export default defineComponent({
        name: 'SPI',
@@ -53,22 +42,21 @@
            const { screenTheme }  = storeToRefs(screenThemes);
            const spi = ref("eChartSpi" + Date.now() + Math.random())
            const state = reactive<stateType>({
                spiValue: 1,
                departList: [],
                spiProps: {
                    expandTrigger: 'hover',
                    checkStrictly: true,
                    value: 'depId',
                    label: 'depName',
                },
                spiChart: 'spi-dark'
                spiData: [],
                year: '',
                monthList: [],
                valueList: [],
            })

            // 获取部门列表
            const getAllDepartment = async () => {
                let res = await teamManageApi().getAllDepartment();
            // 获取spi数据
            const getSpiData = async () => {
                let res = await riskWarningApi().getSpiData(screenTheme.value.depId);
                if (res.data.code === '200') {
                    state.departList = JSON.parse(JSON.stringify(res.data.data))
                    state.spiData = JSON.parse(JSON.stringify(res.data.data))
                    state.monthList = Array.from(state.spiData, ({ month }) => month + '月');
                    state.valueList = Array.from(state.spiData, ({ spiVal }) => spiVal);
                    state.year = res.data.data[0].year
                    initSpi()
                } else {
                    ElMessage({
                        type: 'warning',
@@ -76,7 +64,6 @@
                    });
                }
            };

            type EChartsOption = echarts.EChartsOption
            // 隐患整改情况
            const initSpi =()=>{
@@ -108,7 +95,7 @@
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                            data: state.monthList,
                            axisLine:{
                                show: true,
                                lineStyle:{
@@ -149,70 +136,106 @@
                        }
                    ],
                    series: [
                        // {
                        //     name: '危险线',
                        //     data: [1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000],
                        //     type: 'line',
                        //     lineStyle:{
                        //         width: 0
                        //     },
                        //     areaStyle: {
                        //         color: {
                        //             x: 0,
                        //             y: 0,
                        //             x2: 0,
                        //             y2: 1,
                        //             colorStops: [
                        //                 {
                        //                     offset: 0.1,
                        //                     color: "rgba(216,55,55)", // 线处的颜色
                        //                 },
                        //                 {
                        //                     offset: 0.9,
                        //                     color: "rgba(216,55,55,.1)", // 坐标轴处的颜色
                        //                 },
                        //             ],
                        //         }
                        //     },
                        //     showSymbol: false,
                        //     // stack: 'Total',
                        //     smooth: true
                        // },
                        // {
                        //     name: '警告线',
                        //     data: [750, 750, 750, 750, 750, 750, 750, 750, 750, 750, 750, 750],
                        //     type: 'line',
                        //     lineStyle:{
                        //         width: 0
                        //     },
                        //     areaStyle: {
                        //         color: {
                        //             x: 0,
                        //             y: 0,
                        //             x2: 0,
                        //             y2: 1,
                        //             colorStops: [
                        //                 {
                        //                     offset: 0.1,
                        //                     color: "rgba(235,194,80)", // 线处的颜色
                        //                 },
                        //                 {
                        //                     offset: 0.9,
                        //                     color: "rgba(235,194,80,.1)", // 坐标轴处的颜色
                        //                 },
                        //             ],
                        //         }
                        //     },
                        //     showSymbol: false,
                        //     // stack: 'Total',
                        //     smooth: true
                        // },
                        // {
                        //     name: '注意线',
                        //     data: [500, 500, 500, 500, 500, 500, 500,500, 500, 500, 500, 500],
                        //     type: 'line',
                        //     lineStyle:{
                        //         width: 0
                        //     },
                        //     areaStyle: {
                        //         color: {
                        //             x: 0,
                        //             y: 0,
                        //             x2: 0,
                        //             y2: 1,
                        //             colorStops: [
                        //                 {
                        //                     offset: 0.1,
                        //                     color: "rgba(147,208,81)", // 线处的颜色
                        //                 },
                        //                 {
                        //                     offset: 0.9,
                        //                     color: "rgba(147,208,81,.2)", // 坐标轴处的颜色
                        //                 },
                        //             ]
                        //         },
                        //     },
                        //     showSymbol: false,
                        //     // stack: 'Total',
                        //     smooth: true
                        // },
                        {
                            name: '危险线',
                            data: [1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000],
                            name: 'SPI预警指数值',
                            data: state.valueList,
                            type: 'line',
                            triggerLineEvent: true,
                            label:{
                                show: true,
                                color: '#23E5E5',
                                fontSize: fontSize(12)
                            },
                            lineStyle:{
                                width: 0
                            },
                            areaStyle: {
                                color: {
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0.1,
                                            color: "rgba(216,55,55)", // 线处的颜色
                                        },
                                        {
                                            offset: 0.9,
                                            color: "rgba(216,55,55,.1)", // 坐标轴处的颜色
                                        },
                                    ],
                                }
                            },
                            showSymbol: false,
                            // stack: 'Total',
                            smooth: true
                        },
                        {
                            name: '警告线',
                            data: [750, 750, 750, 750, 750, 750, 750, 750, 750, 750, 750, 750],
                            type: 'line',
                            lineStyle:{
                                width: 0
                            },
                            areaStyle: {
                                color: {
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0.1,
                                            color: "rgba(235,194,80)", // 线处的颜色
                                        },
                                        {
                                            offset: 0.9,
                                            color: "rgba(235,194,80,.1)", // 坐标轴处的颜色
                                        },
                                    ],
                                }
                            },
                            showSymbol: false,
                            // stack: 'Total',
                            smooth: true
                        },
                        {
                            name: '注意线',
                            data: [500, 500, 500, 500, 500, 500, 500,500, 500, 500, 500, 500],
                            type: 'line',
                            lineStyle:{
                                width: 0
                                width: 2,
                                color: '#23E5E5'
                            },
                            areaStyle: {
                                color: {
@@ -229,26 +252,8 @@
                                            offset: 0.9,
                                            color: "rgba(147,208,81,.2)", // 坐标轴处的颜色
                                        },
                                    ]
                                },
                            },
                            showSymbol: false,
                            // stack: 'Total',
                            smooth: true
                        },
                        {
                            name: 'SPI预警指数值',
                            data: [450, 632, 501, 434, 390, 530, 520,750, 632, 401, 634, 590],
                            type: 'line',
                            triggerLineEvent: true,
                            label:{
                                show: true,
                                color: '#23E5E5',
                                fontSize: fontSize(12)
                            },
                            lineStyle:{
                                width: 2,
                                color: '#23E5E5'
                                    ],
                                }
                            },
                            itemStyle:{
                                color: '#23E5E5',
@@ -266,20 +271,9 @@
                });
            }

            const getTheme =()=>{
                if(screenTheme.value.isDark){
                    state.spiChart =  'spi-dark'
                }else{
                    state.spiChart =  'spi-light'
                }
            }

            watchEffect(() => {
                if(props.theme){
                    state.spiChart =  'spi-dark'
                }else{
                    state.spiChart =  'spi-light'
                }
                getSpiData()
            })

            function fontSize(val){
@@ -289,9 +283,8 @@

            // 页面载入时执行方法
            onMounted(() => {
                getAllDepartment();
                getSpiData();
                initSpi();
                getTheme();
            });

            return {
@@ -311,105 +304,6 @@
        padding: 2%;
        position: relative;

        .spi-dark{
            position: absolute;
            width: 25% !important;
            top: 0;
            left: 2rem;
            z-index: 99999;

            ::v-deep(.el-cascader){
                width: 100% !important;
            }
            ::v-deep(.el-popper){
                background-color: rgba(10,31,92,1);
                border: 1px solid rgba(17,254,238,.4);
                color: #11FEEE;
                .el-cascader-node__label{
                    color: #11FEEE;
                }
                .el-icon{
                    color: #11FEEE;
                }
                .el-cascader-node{
                    &:hover{
                        background: #0049af;
                    }
                }
            }
            ::v-deep(.el-popper__arrow){
                &::before{
                    background-color: rgba(10,31,92,.6) !important;
                    border: 1px solid rgba(17,254,238,.4);
                }
            }
            ::v-deep(.el-input__wrapper){
                width: 20%;
                box-shadow: none;
                border: 1px solid rgba(17,254,238,.2);
                background: rgba(10,31,92,.6) !important;
                height: 2.5rem;
                color: #11FEEE;

                input{
                    font-size: 1.25rem;
                    color: #11FEEE;
                }
                .el-icon{
                    color: #11FEEE;
                }
            }
        }

        .spi-light{
            position: absolute;
            width: 25% !important;
            top: 0;
            left: 2rem;
            z-index: 99999;

            ::v-deep(.el-cascader){
                width: 100% !important;
            }
            ::v-deep(.el-popper){
                background-color: #fff;
                border: 1px solid #ccc;
                color: #000;
                .el-cascader-node__label{
                    color: #000;
                }
                .el-icon{
                    color: #000;
                }
                .el-cascader-node{
                    &:hover{
                        background: #ccc;
                    }
                }
            }
            ::v-deep(.el-popper__arrow){
                &::before{
                    background-color: #fff !important;
                    border: 1px solid #ccc;
                }
            }
            ::v-deep(.el-input__wrapper){
                width: 20%;
                box-shadow: none;
                border: 1px solid #ccc;
                background: #fff !important;
                height: 2.5rem;
                color: #000;

                input{
                    font-size: 1.25rem;
                    color: #000;
                }
                .el-icon{
                    color: #000;
                }
            }
        }
        .spi{
            width: 100%;
            height: 100%;

 src/views/riskWarningSys/warningBigScreen/components/accident.vue

@@ -1,11 +1,16 @@
<template>
    <div class="charts-cont">
        <div :class="choose" >
            <div :class="cur===1?'act':''" @click="changeTab(1)">月度</div>
            <div :class="cur===2?'act':''" @click="changeTab(2)">年度</div>
        <div :class="selector">
            <el-cascader
                    class="timeSe"
                    :teleported="false"
                    v-model="timeValue"
                    :options="optionList"
                    :props="riskProps"
                    @change="changeTime"
            />
        </div>
        <div v-show="cur===1" class="month" :id="accidentMonth"></div>
        <div v-show="cur===2" class="month" :id="accidentYear"></div>
        <div class="month" :id="accidentMonth"></div>
    </div>
</template>

@@ -22,12 +27,16 @@
    import * as echarts from "echarts";
    import '/@/theme/bigScreen.css'
    import {useScreenTheme} from "/@/stores/screenTheme"

  import { riskWarningApi } from '/@/api/riskWarning';
  import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
    interface stateType {
        cur: number,
        curColor: string,
        choose: string
    }
    accData: Array<any>;
        timeValue: Array<any>,
        optionList: Array<any>,
        selector: string,
        riskProps: object
  }
    export default defineComponent({
        name: 'accident',
        components: {},
@@ -41,22 +50,127 @@
            const screenThemes = useScreenTheme()
            const { screenTheme }  = storeToRefs(screenThemes);
            const accidentMonth = ref("eChartFix" + Date.now() + Math.random())
            const accidentYear = ref("eChartFix" + Date.now() + Math.random())
            const state = reactive<stateType>({
                cur: 1,
                curColor: '#fff',
                choose: 'choose-dark'
        accData: [],
                timeValue: [],
                optionList: [],
                riskProps: {
                    expandTrigger: 'hover'
                },
                selector: 'select-dark'
            })
      const timeForm = {
        hour12: false,
        year: 'numeric',
        month: 'numeric',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      };
      const makeList = () =>{
        for(let i=0;i<=60;i++){
          const newObj = {
            label: 1990 + i + '',
            value: 1990 + i + '',
            children: [
              {
                label: '年度',
                value: 0
              },
              {
                label: '一月',
                value: 1
              },
              {
                label: '二月',
                value: 2
              },
              {
                label: '三月',
                value: 3
              },
              {
                label: '四月',
                value: 4
              },
              {
                label: '五月',
                value: 5
              },
              {
                label: '六月',
                value: 6
              },
              {
                label: '七月',
                value: 7
              },
              {
                label: '八月',
                value: 8
              },
              {
                label: '九月',
                value: 9
              },
              {
                label: '十月',
                value: 10
              },
              {
                label: '十一月',
                value: 11
              },
              {
                label: '十二月',
                value: 12
              }
            ]
          }
          state.optionList.push(newObj)
        }
      }
      const getTime = () =>{
        const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
        const temp = curTime.split('-')
        state.timeValue[0] = temp[0]
        state.timeValue[1] = Number(temp[1])
      }
      const getDataByYearId = async () => {
        getTime()
        const data = {
          depId: screenTheme.value.depId || 1,
          beginYear: state.timeValue[0],
          beginMonth: state.timeValue[1],
          endYear: state.timeValue[0],
          endMonth: state.timeValue[1]
        }
        if(state.timeValue[1] == 0){
          data.beginMonth = 1
          data.endMonth = 12
        }
        let res = await riskWarningApi().getRiskByTimeDep(data);
        if (res.data.code === '200') {
          state.accData = res.data.data[0].detail
          const oneList = res.data.data[0].detail[0].count
          const twoList = res.data.data[0].detail[1].count
          const threeList = res.data.data[0].detail[2].count
          const fourList = res.data.data[0].detail[3].count
          const fiveList = res.data.data[0].detail[4].count
          initAccidentByMonth(oneList,twoList,threeList,fourList,fiveList)
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }

            const changeTab =(i)=>{
                state.cur = i
                nextTick(()=>{
                    initAccidentByYear();
                })
            }
            type EChartsOption = echarts.EChartsOption
            // 隐患整改情况
            const initAccidentByMonth =()=>{
            const initAccidentByMonth =(one:number,two:number,three:number,four:number,five:number)=>{
                let dom = document.getElementById(accidentMonth.value);
                let myChart = echarts.init(dom);

@@ -78,7 +192,7 @@
                    },
                    series: [
                        {
                            name: '月度数据',
                            name: '事故等级数量',
                            type: 'pie',
                            radius: ['50%', '80%'],
                            avoidLabelOverlap: false,
@@ -106,11 +220,11 @@
                                }
                            },
                            data: [
                                { value: 1, name: '特别重大事故' },
                                { value: 10, name: '重大事故' },
                                { value: 20, name: '较大事故' },
                                { value: 33, name: '一般事故' },
                                { value: 50, name: '未遂事故' }
                                { value: one, name: '特别重大事故' },
                                { value: two, name: '重大事故' },
                                { value: three, name: '较大事故' },
                                { value: four, name: '一般事故' },
                                { value: five, name: '未遂事故' }
                            ],
                            center: ['50%','60%']
                        }
@@ -123,74 +237,7 @@
                    myChart.resize();
                });
            }
            // 隐患整改情况
            const initAccidentByYear =()=>{
                let dom = document.getElementById(accidentYear.value);
                let myChart = echarts.init(dom);

                let option: EChartsOption;

                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '0',
                        left: 'center',
                        itemWidth: fontSize(10),
                        itemHeight: fontSize(8),
                        textStyle:{
                            color: 'auto',
                            fontSize: fontSize(11)
                        }
                    },
                    series: [
                        {
                            name: '年度数据',
                            type: 'pie',
                            radius: ['50%', '80%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: fontSize(2)
                            },
                            label: {
                                show: false,
                                position: 'outer',
                                fontSize: fontSize(10),
                                textBorderWidth: 0,
                                width: fontSize(40),
                                overflow: 'break'
                            },
                            // labelLine: {
                            //     show: true,
                            //     length: fontSize(10),
                            //     length2: fontSize(10)
                            // },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: fontSize(22),
                                    fontWeight: 'bold'
                                }
                            },
                            data: [
                                { value: 10, name: '特别重大事故' },
                                { value: 20, name: '重大事故' },
                                { value: 100, name: '较大事故' },
                                { value: 130, name: '一般事故' },
                                { value: 150, name: '未遂事故' }
                            ],
                            center: ['50%','60%']
                        }
                    ]
                };

                option && myChart.setOption(option);

                window.addEventListener("resize",function (){
                    myChart.resize();
                });
            }

            function fontSize(val){
                let nowClientWidth = document.documentElement.clientWidth;
@@ -198,25 +245,33 @@
            }
            const getTheme =()=>{
                if(screenTheme.value.isDark){
                    state.choose =  'choose-dark'
                    state.selector =  'select-dark'
                }else{
                    state.choose =  'choose-light'
                    state.selector =  'select-light'
                }
            }

            watchEffect(() => {
                if(props.theme){
                    state.choose =  'choose-dark'
                    state.selector =  'select-dark'
                }else{
                    state.choose =  'choose-light'
                    state.selector =  'select-light'
                }
        getDataByYearId()
            })

      const changeTime = (value)=>{
        state.timeValue[0] = value[0]
        state.timeValue[1] = value[1]
        getDataByYearId()
      }

            // 页面载入时执行方法
            onMounted(() => {
                initAccidentByMonth();
                getTheme()
                getTheme();
        getTime();
        makeList();
        getDataByYearId();
                // initAccidentByYear();
            });

@@ -226,9 +281,8 @@

            return {
                accidentMonth,
                accidentYear,
                Search,
                changeTab,
        changeTime,
                fontSize,
                ...toRefs(state)
            };
@@ -243,58 +297,115 @@
        padding: 5%;
        position: relative;

        .choose-dark{
        .select-dark{
            position: absolute;
            right: 4%;
            bottom: 4%;
            z-index: 999;
            display: flex;
            align-items: center;
            font-size: 0.75rem;
            justify-content: space-between;
            z-index: 99999;
            top: -20px;
            right: 3rem;
            width: 30%;
            height: 1.5rem;
            margin-right: 0.8rem;

            div{
                padding: 2px 6px;
                box-sizing: border-box;
                color: rgba(17,254,238,.4);
            ::v-deep(.el-cascader){
                width: 100% !important;
                line-height: 100%;
            }
            ::v-deep(.el-popper){
                background-color: rgba(10,31,92,1);
                border: 1px solid rgba(17,254,238,.4);
                border-radius: 2px;
                cursor: pointer;
            }
            div:hover{
                color: #11FEEE;
                border: 1px solid #11FEEE;
                z-index: 999999 !important;
                .el-cascader-node__label{
                    color: #11FEEE;
                }
                .el-icon{
                    color: #11FEEE;
                }
                .el-cascader-node{
                    &:hover{
                        background: #0049af;
                    }
                }
            }
            .act{
            ::v-deep(.el-cascader-menu){
                min-width: 50px !important;
            }
            ::v-deep(.el-popper__arrow){
                &::before{
                    background-color: rgba(10,31,92,.6) !important;
                    border: 1px solid rgba(17,254,238,.4);
                }
            }
            ::v-deep(.el-input__wrapper){
                box-shadow: none;
                border: 1px solid rgba(17,254,238,.2);
                background: rgba(10,31,92,.6) !important;
                height: 1.5rem;
                color: #11FEEE;
                border: 1px solid #11FEEE;

                input{
                    font-size: 0.8rem;
                    color: #11FEEE;
                }
                .el-icon{
                    color: #11FEEE;
                }
            }
        }
        .choose-light{
            position: absolute;
            right: 4%;
            bottom: 4%;
            z-index: 999;
            display: flex;
            align-items: center;
            font-size: 0.75rem;
            justify-content: space-between;

            div{
                padding: 2px 6px;
                box-sizing: border-box;
                color: #ccc;
        .select-light{
            position: absolute;
            z-index: 99999;
            top: -20px;
            right: 3rem;
            width: 30%;
            height: 20px;
            margin-right: 0.8rem;

            ::v-deep(.el-cascader){
                width: 100% !important;
                line-height: 100%;
            }
            ::v-deep(.el-popper){
                background-color: rgba(255,255,255,1);
                border: 1px solid #ccc;
                border-radius: 2px;
                cursor: pointer;
                color: #fff;
                z-index: 999999 !important;
                .el-cascader-node__label{
                    color: #000;
                }
                .el-icon{
                    color: #000;
                }
                .el-cascader-node{
                    &:hover{
                        background: #ccc;
                    }
                }
            }
            div:hover{
                color: #333;
                border: 1px solid #333;
            ::v-deep(.el-cascader-menu){
                min-width: 80px !important;
            }
            .act{
                color: #333;
                border: 1px solid #333;
            ::v-deep(.el-popper__arrow){
                &::before{
                    background-color: rgba(255,255,255,.6) !important;
                    border: 1px solid #ccc;
                }
            }
            ::v-deep(.el-input__wrapper){
                box-shadow: none;
                border: 1px solid #ccc;
                background: #fff !important;
                height: 1.5rem;
                color: #fff;

                input{
                    font-size: 0.8rem;
                    color: #000;
                }
                .el-icon{
                    color: #000;
                }
            }
        }
        .month{

 src/views/riskWarningSys/warningBigScreen/components/danger.vue

@@ -1,15 +1,16 @@
<template>
    <div class="charts-cont">
<!--        <el-select v-model="selected" class="choose" size="small">-->
<!--            <el-option label="月度" value="1"/>-->
<!--            <el-option label="年度" value="2"/>-->
<!--        </el-select>-->
        <div :class="choose">
            <div :class="cur===1?'act':''" @click="changeTab(1)">企业</div>
            <div :class="cur===2?'act':''" @click="changeTab(2)">部门</div>
        </div>
        <div v-show="cur===1" class="month" :id="dangerMonth"></div>
        <div v-show="cur===2" class="year" :id="dangerYear"></div>
    <div :class="selector">
      <el-cascader
          class="timeSe"
          :teleported="false"
          v-model="timeValue"
          :options="optionList"
          :props="riskProps"
          @change="changeTime"
      />
    </div>
        <div class="month" :id="dangerMonth"></div>
    </div>
</template>

@@ -36,11 +37,15 @@
    import * as echarts from "echarts";
    import '/@/theme/bigScreen.css'
    import {useScreenTheme} from "/@/stores/screenTheme";
  import {riskWarningApi} from "/@/api/riskWarning";


    interface stateType {
        cur: number,
        choose: string
    selector: string,
    timeValue: Array<any>,
    optionList: Array<any>,
    riskProps: object,
    dangerData: Array<any>
    }
    export default defineComponent({
        name: 'danger',
@@ -55,21 +60,131 @@
            const screenThemes = useScreenTheme()
            const { screenTheme }  = storeToRefs(screenThemes);
            const dangerMonth = ref("eChartFix" + Date.now() + Math.random())
            const dangerYear = ref("eChartFix" + Date.now() + Math.random())
            const state = reactive<stateType>({
                cur: 1,
                choose: 'choose-dark'
        selector: 'select-dark',
        timeValue: [],
        dangerData: [],
        optionList: [],
        riskProps: {
          expandTrigger: 'hover'
        },
            })
      const timeForm = {
        hour12: false,
        year: 'numeric',
        month: 'numeric',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      }
      const makeList = () =>{
        for(let i=0;i<=60;i++){
          const newObj = {
            label: 1990 + i + '',
            value: 1990 + i + '',
            children: [
              {
                label: '年度',
                value: 0
              },
              {
                label: '一月',
                value: 1
              },
              {
                label: '二月',
                value: 2
              },
              {
                label: '三月',
                value: 3
              },
              {
                label: '四月',
                value: 4
              },
              {
                label: '五月',
                value: 5
              },
              {
                label: '六月',
                value: 6
              },
              {
                label: '七月',
                value: 7
              },
              {
                label: '八月',
                value: 8
              },
              {
                label: '九月',
                value: 9
              },
              {
                label: '十月',
                value: 10
              },
              {
                label: '十一月',
                value: 11
              },
              {
                label: '十二月',
                value: 12
              }
            ]
          }
          state.optionList.push(newObj)
        }
      }
      const getTime = () =>{
        const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
        const temp = curTime.split('-')
        state.timeValue[0] = temp[0]
        state.timeValue[1] = Number(temp[1])
      }

            const changeTab =(i)=>{
                state.cur = i
                nextTick(()=>{
                    initdangerByYear()
                })
            }
      const changeTime = (value)=>{
        state.timeValue[0] = value[0]
        state.timeValue[1] = value[1]
      }

      const getDataByYearId = async () => {
        getTime()
        const data = {
          depId: screenTheme.value.depId || 1,
          beginYear: state.timeValue[0],
          beginMonth: state.timeValue[1],
          endYear: state.timeValue[0],
          endMonth: state.timeValue[1]
        }
        if(state.timeValue[1] == 0){
          data.beginMonth = 1
          data.endMonth = 12
        }
        let res = await riskWarningApi().getSelfPreventByTimeDep(data);
        if (res.data.code === '200') {
          state.dangerData = res.data.data
          const danger = [
            {value: state.dangerData[0].detail.lightRiskCount,name: '一般隐患'},
            {value: state.dangerData[0].detail.heavyRiskCount,name: '重大隐患'}
          ]
          initdangerByMonth(danger)
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }

            type EChartsOption = echarts.EChartsOption
            // 隐患整改情况
            const initdangerByMonth =()=>{
            const initdangerByMonth =(danger)=>{
                let dom = document.getElementById(dangerMonth.value);
                let myChart = echarts.init(dom);

@@ -116,10 +231,7 @@
                                    fontWeight: 'bold'
                                }
                            },
                            data: [
                                { value: 235, name: '一般隐患' },
                                { value: 1048, name: '重大隐患' }
                            ],
                            data: danger,
                            center: ['50%','55%']
                        }
                    ]
@@ -131,103 +243,42 @@
                    myChart.resize();
                });
            }
            // 隐患整改情况
            const initdangerByYear =()=>{
                let dom = document.getElementById(dangerYear.value);
                let myChart = echarts.init(dom);

                let option: EChartsOption;

                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    color: ['#FAC858','#EE6666'],
                    legend: {
                        top: '8%',
                        left: 'center',
                        itemWidth: fontSize(10),
                        itemHeight: fontSize(8),
                        textStyle:{
                            color: 'auto',
                            fontSize: fontSize(11)
                        }
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '65%',
                            avoidLabelOverlap: true,
                            label: {
                                show: true,
                                position: 'inside',
                                fontSize: fontSize(12),
                                color: '#ffffff',
                                textBorderWidth: 0,
                                width: 30,
                                overflow: 'break'
                            },
                            labelLine: {
                                show: true,
                                length: 10,
                                length2: 10
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: fontSize(22),
                                    fontWeight: 'bold'
                                }
                            },
                            data: [
                                { value: 35, name: '一般隐患' },
                                { value: 1048, name: '重大隐患' }
                            ],
                            center: ['50%','55%']
                        }
                    ]
                };

                option && myChart.setOption(option);

                window.addEventListener("resize",function (){
                    myChart.resize();
                });
            }
            function fontSize(val){
                let nowClientWidth = document.documentElement.clientWidth;
                return val * (nowClientWidth/1920) * Number(props.size);
            }

            const getTheme =()=>{
                if(screenTheme.value.isDark){
                    state.choose =  'choose-dark'
                }else{
                    state.choose =  'choose-light'
                }
        if(screenTheme.value.isDark){
          state.selector =  'select-dark'
        }else{
          state.selector =  'select-light'
        }
            }

            watchEffect(() => {
                if(props.theme){
                    state.choose =  'choose-dark'
                }else{
                    state.choose =  'choose-light'
                }
        if(props.theme){
          state.selector =  'select-dark'
        }else{
          state.selector =  'select-light'
        }
        getDataByYearId()
            })

            // 页面载入时执行方法
            onMounted(() => {
                initdangerByMonth();
        getTime()
                getTheme()
        makeList()
        getDataByYearId()
            });

            return {
                dangerMonth,
                dangerYear,
                Search,
        changeTime,
                fontSize,
                changeTab,
                ...toRefs(state)
            };
        },
@@ -241,60 +292,117 @@
        padding: 2% 2% 0;
        position: relative;

        .choose-dark{
            position: absolute;
            right: 4%;
            bottom: 4%;
            z-index: 999;
            display: flex;
            align-items: center;
            font-size: 0.75rem;
            justify-content: space-between;
    .select-dark{
      position: absolute;
      z-index: 99999;
      bottom: 0;
      left: 2rem;
      width: 50%;
      height: 1.5rem;
      margin-right: 0.8rem;

            div{
                padding: 2px 6px;
                box-sizing: border-box;
                color: rgba(17,254,238,.4);
                border: 1px solid rgba(17,254,238,.4);
                border-radius: 2px;
                cursor: pointer;
            }
            div:hover{
                color: #11FEEE;
                border: 1px solid #11FEEE;
            }
            .act{
                color: #11FEEE;
                border: 1px solid #11FEEE;
            }
        }
        .choose-light{
            position: absolute;
            right: 4%;
            bottom: 4%;
            z-index: 999;
            display: flex;
            align-items: center;
            font-size: 0.75rem;
            justify-content: space-between;
      ::v-deep(.el-cascader){
        width: 100% !important;
        line-height: 100%;
      }
      ::v-deep(.el-popper){
        background-color: rgba(10,31,92,1);
        border: 1px solid rgba(17,254,238,.4);
        color: #11FEEE;
        z-index: 999999 !important;
        .el-cascader-node__label{
          color: #11FEEE;
        }
        .el-icon{
          color: #11FEEE;
        }
        .el-cascader-node{
          &:hover{
            background: #0049af;
          }
        }
      }
      ::v-deep(.el-cascader-menu){
        min-width: 50px !important;
      }
      ::v-deep(.el-popper__arrow){
        &::before{
          background-color: rgba(10,31,92,.6) !important;
          border: 1px solid rgba(17,254,238,.4);
        }
      }
      ::v-deep(.el-input__wrapper){
        box-shadow: none;
        border: 1px solid rgba(17,254,238,.2);
        background: rgba(10,31,92,.6) !important;
        height: 1.5rem;
        color: #11FEEE;

            div{
                padding: 2px 6px;
                box-sizing: border-box;
                color: #ccc;
                border: 1px solid #ccc;
                border-radius: 2px;
                cursor: pointer;
            }
            div:hover{
                color: #333;
                border: 1px solid #333;
            }
            .act{
                color: #333;
                border: 1px solid #333;
            }
        }
        input{
          font-size: 0.8rem;
          color: #11FEEE;
        }
        .el-icon{
          color: #11FEEE;
        }
      }
    }

    .select-light{
      position: absolute;
      z-index: 99999;
      bottom: 0;
      left: 2rem;
      width: 50%;
      height: 20px;
      margin-right: 0.8rem;

      ::v-deep(.el-cascader){
        width: 100% !important;
        line-height: 100%;
      }
      ::v-deep(.el-popper){
        background-color: rgba(255,255,255,1);
        border: 1px solid #ccc;
        color: #fff;
        z-index: 999999 !important;
        .el-cascader-node__label{
          color: #000;
        }
        .el-icon{
          color: #000;
        }
        .el-cascader-node{
          &:hover{
            background: #ccc;
          }
        }
      }
      ::v-deep(.el-cascader-menu){
        min-width: 80px !important;
      }
      ::v-deep(.el-popper__arrow){
        &::before{
          background-color: rgba(255,255,255,.6) !important;
          border: 1px solid #ccc;
        }
      }
      ::v-deep(.el-input__wrapper){
        box-shadow: none;
        border: 1px solid #ccc;
        background: #fff !important;
        height: 1.5rem;
        color: #fff;

        input{
          font-size: 0.8rem;
          color: #000;
        }
        .el-icon{
          color: #000;
        }
      }
    }
        .month{
            width: 100%;
            height: 100%;

 src/views/riskWarningSys/warningBigScreen/components/risk.vue

@@ -1,15 +1,17 @@
<template>
    <div class="charts-cont">
        <el-select :class="selector" v-model="month" placeholder="Select" :teleported="false" size="default">
            <el-option
                    v-for="item in optionList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
        <div :class="selector">
            <el-cascader
                    class="timeSe"
                    :teleported="false"
                    v-model="timeValue"
                    :options="optionList"
                    :props="riskProps"
                    @change="changeTime"
            />
        </el-select>
        <div v-show="curValue===true" class="risk" :id="risk1"></div>
        <div v-show="curValue===false" class="risk" :id="risk2"></div>
        </div>
        <div class="risk" :id="risk1"></div>
<!--        <div v-show="curValue===false" class="risk" :id="risk2"></div>-->
    </div>
</template>

@@ -25,21 +27,32 @@
    import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
    import * as echarts from 'echarts';
    import '/@/theme/bigScreen.css'
    import {useScreenTheme} from "/@/stores/screenTheme";
    import { useScreenTheme } from "/@/stores/screenTheme";
  import { riskWarningApi } from '/@/api/riskWarning';
  import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";


    interface stateType {
        curValue: boolean,
        month: number,
        timeValue: Array<any>,
        optionList: Array<any>,
        selector: string
        selector: string,
        riskData: Array<any>,
        riskProps: object,
    departmentList: Array<any>,
    departmentRecursionList: Array<DepartmentState>;
    }
  interface DepartmentState {
    depId: number;
    depName: string;
  }
    export default defineComponent({
        name: 'risk',
        components: {},
        props:{
            size: Number,
            theme: Boolean
            theme: Boolean,
      dep: Array
        },
        setup(props) {
            const userInfo = useUserInfo()
@@ -47,76 +60,192 @@
            const screenThemes = useScreenTheme()
            const { screenTheme }  = storeToRefs(screenThemes);
            const risk1 = ref("eChartRisk1" + Date.now() + Math.random())
            const risk2 = ref("eChartRisk2" + Date.now() + Math.random())
            // const risk2 = ref("eChartRisk2" + Date.now() + Math.random())
            const state = reactive<stateType>({
                curValue: true,
                month: 0,
                optionList: [
                    {
                        label: '年度',
                        value: 0
                    },
                    {
                        label: '一月',
                        value: 1
                    },
                    {
                        label: '二月',
                        value: 2
                    },
                    {
                        label: '三月',
                        value: 3
                    },
                    {
                        label: '四月',
                        value: 4
                    },
                    {
                        label: '五月',
                        value: 5
                    },
                    {
                        label: '六月',
                        value: 6
                    },
                    {
                        label: '七月',
                        value: 7
                    },
                    {
                        label: '八月',
                        value: 8
                    },
                    {
                        label: '九月',
                        value: 9
                    },
                    {
                        label: '十月',
                        value: 10
                    }
                ],
                selector: 'select-dark'
                timeValue: [],
                optionList: [],
                riskProps: {
                    expandTrigger: 'hover'
                },
                selector: 'select-dark',
                riskData: [],
        departmentList: [],
        departmentRecursionList: [],
        myVar: 0
            })
      const timeForm = {
        hour12: false,
        year: 'numeric',
        month: 'numeric',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      };
      const makeList = () =>{
        for(let i=0;i<=60;i++){
          const newObj = {
            label: 1990 + i + '',
            value: 1990 + i + '',
            children: [
              {
                label: '年度',
                value: 0
              },
              {
                label: '一月',
                value: 1
              },
              {
                label: '二月',
                value: 2
              },
              {
                label: '三月',
                value: 3
              },
              {
                label: '四月',
                value: 4
              },
              {
                label: '五月',
                value: 5
              },
              {
                label: '六月',
                value: 6
              },
              {
                label: '七月',
                value: 7
              },
              {
                label: '八月',
                value: 8
              },
              {
                label: '九月',
                value: 9
              },
              {
                label: '十月',
                value: 10
              },
              {
                label: '十一月',
                value: 11
              },
              {
                label: '十二月',
                value: 12
              }
            ]
          }
          state.optionList.push(newObj)
        }
      }
            // const swi = setInterval(()=>{
            //     state.curValue = !state.curValue
            //     if(state.curValue == true){
            //         nextTick(()=>{
            //             initRisk1()
            //         })
            //     }else{
            //         nextTick(()=>{
            //             initRisk2()
            //         })
            //     }
      //
            // },5000)
      // 获取部门列表
      const getAllDepartment = async () => {
        let res = await teamManageApi().getAllDepartment();
        if (res.data.code === '200') {
          state.departmentList = JSON.parse(JSON.stringify(res.data.data))
          recursion(state.departmentList);
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      };

            const swi = setInterval(()=>{
                state.curValue = !state.curValue
                if(state.curValue == true){
                    nextTick(()=>{
                        initRisk1()
                    })
                }else{
                    nextTick(()=>{
                        initRisk2()
                    })
                }
      const recursion = (value: any) => {
        for (let i of value) {
          if (i.children.length !== 0) {
            state.departmentRecursionList.push(i);
            recursion(i.children);
          } else {
            state.departmentRecursionList.push(i);
          }
        }
      };
      // const recursion = (value: any) => {
      //   for (let i of value) {
      //     if (i.children.length !== 0) {
      //       state.departmentRecursionList.push(i);
      //       recursion(i.children);
      //     } else {
      //       state.departmentRecursionList.push(i);
      //     }
      //   }
      // };
      const getDataByYearId = async () => {
        getTime()
        const data = {
          depId: screenTheme.value.depId || 1,
          beginYear: state.timeValue[0],
          beginMonth: state.timeValue[1],
          endYear: state.timeValue[0],
          endMonth: state.timeValue[1]
        }
        if(state.timeValue[1] == 0){
          data.beginMonth = 1
          data.endMonth = 12
        }
        let res = await riskWarningApi().getPreventByTimeDep(data);
        if (res.data.code === '200') {
          state.riskData = res.data.data
          const depList = []
          const deathList = []
          const hardList = []
          const lightList = []
          for(let index in state.riskData){
            state.riskData[index].depId = state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(state.riskData[index].depId))?.depName;
            depList.push(state.riskData[index].depId)
            deathList.push(state.riskData[index].detail.deathCount)
            hardList.push(state.riskData[index].detail.heavyInjureCount)
            lightList.push(state.riskData[index].detail.lightInjureCount)
          }
          // state.departmentList.find((i: { depId: number }) => i.depId === Number(state.details.workDetail.operationDepId))?.depName;
          if(depList.length == 0){
            depList.push('该部门不包含子部门数据')
            deathList.push(0)
            hardList.push(0)
            lightList.push(0)
          }
          initRisk1(depList,deathList,hardList,lightList)
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }

            },5000)
            const changeTime = (value)=>{
                state.timeValue[0] = value[0]
                state.timeValue[1] = value[1]
                getDataByYearId()
            }


            type EChartsOption = echarts.EChartsOption
            // 隐患整改情况
            const initRisk1 =()=>{
            const initRisk1 =(depList,deathList,hardList,lightList)=>{
                let dom = document.getElementById(risk1.value);
                let myChart = echarts.init(dom);

@@ -130,8 +259,33 @@
                            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                        }
                    },
          // dataZoom: {
          //   type: 'slider',
          //   show: true,
          //   textStyle: {
          //     color: '#fff'
          //   },
          //   realtime: true,
          //   top: 20,
          //   left: 10,
          //   height: 12,
          //   width: 80,
          //   start: 0,
          //   end: 100,
          //   orient: 'horizontal'
          // },
          dataZoom: [
            //滑动条
            {
              xAxisIndex: 0, //这里是从X轴的0刻度开始
              show: false, //是否显示滑动条，不影响使用
              type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
              startValue: 0, // 从头开始。
              endValue: 6, // 一次性展示几个。
            },
          ],
                    legend: {
                        top: '1%',
                        top: '0',
                        left: 'center',
                        itemWidth: fontSize(10),
                        itemHeight: fontSize(8),
@@ -148,8 +302,7 @@
                    },
                    xAxis: {
                        type: 'category',
                        // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        data: ['企业总', 'A部门', 'B部门', 'C部门', 'D部门', 'E部门'],
                        data: depList,
                        axisLine:{
                            show: true,
                            lineStyle:{
@@ -157,7 +310,8 @@
                            }
                        },
                        axisLabel:{
                            color: '#999'
                            color: '#999',
              fontSize: fontSize(9)
                        }
                    },
                    yAxis: {
@@ -186,8 +340,7 @@
                            emphasis: {
                                focus: 'series'
                            },
                            // data: [320, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
                            data: [320, 302, 301, 334, 390, 330],
                            data: deathList,
                            barCategoryGap: '50%'
                        },
                        {
@@ -200,8 +353,7 @@
                            emphasis: {
                                focus: 'series'
                            },
                            // data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230]
                            data: [120, 132, 101, 134, 90, 230],
                            data: hardList,
                            barCategoryGap: '50%'
                        },
                        {
@@ -214,131 +366,138 @@
                            emphasis: {
                                focus: 'series'
                            },
                            // data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
                            data: [220, 182, 191, 234, 290, 330],
                            data: lightList,
                            barCategoryGap: '50%'
                        }
                    ]
                };

                option && myChart.setOption(option);
                // option && myChart.setOption(option);
        if (option && typeof option === 'object') {
          myChart.setOption(option);
          state.myVar = setInterval(function(){
            if (option.dataZoom[0].endValue == depList.length ) {
              option.dataZoom[0].endValue = 4;
              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",function (){
                    myChart.resize();
                });
                echarts.init(document.getElementById(risk2.value)).dispose()
                // echarts.init(document.getElementById(risk2.value)).dispose()
            }

            const initRisk2 =()=>{
                let dom = document.getElementById(risk2.value);
                let myChart = echarts.init(dom);

                let option: EChartsOption;

                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            // Use axis to trigger tooltip
                            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                        }
                    },
                    legend: {
                        top: '1%',
                        left: 'center',
                        itemWidth: fontSize(10),
                        itemHeight: fontSize(8),
                        textStyle:{
                            color: 'auto',
                            fontSize: fontSize(12)
                        }
                    },
                    grid: {
                        left: '2%',
                        right: '4%',
                        bottom: '0',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        data: ['F部门', 'G部门', 'H部门', 'I部门', 'J部门', 'K部门'],
                        axisLine:{
                            show: true,
                            lineStyle:{
                                color: '#999'
                            }
                        },
                        axisLabel:{
                            color: '#999'
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine:{
                            show: true,
                            lineStyle:{
                                type: 'dotted'
                            }
                        },
                        axisLabel:{
                            color: '#999'
                        },
                        splitLine:{
                            show: false
                        }
                    },
                    series: [
                        {
                            name: '可能造成死亡的',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            // data: [320, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
                            data: [320, 301, 334, 390, 330, 320],
                            barCategoryGap: '50%'
                        },
                        {
                            name: '可能造成重伤的',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            // data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230]
                            data: [90, 230, 210, 132, 101, 134],
                            barCategoryGap: '50%'
                        },
                        {
                            name: '可能造成轻伤的',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            // data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
                            data: [290, 330, 310, 191, 234, 290],
                            barCategoryGap: '50%'
                        }
                    ]
                };

                option && myChart.setOption(option);
                window.addEventListener("resize",function (){
                    myChart.resize();
                });
                echarts.init(document.getElementById(risk1.value)).dispose()
            }
            // const initRisk2 =()=>{
            //     let dom = document.getElementById(risk2.value);
            //     let myChart = echarts.init(dom);
      //
            //     let option: EChartsOption;
      //
            //     option = {
            //         tooltip: {
            //             trigger: 'axis',
            //             axisPointer: {
            //                 // Use axis to trigger tooltip
            //                 type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            //             }
            //         },
            //         legend: {
            //             top: '1%',
            //             left: 'center',
            //             itemWidth: fontSize(10),
            //             itemHeight: fontSize(8),
            //             textStyle:{
            //                 color: 'auto',
            //                 fontSize: fontSize(12)
            //             }
            //         },
            //         grid: {
            //             left: '2%',
            //             right: '4%',
            //             bottom: '0',
            //             containLabel: true
            //         },
            //         xAxis: {
            //             type: 'category',
            //             data: ['F部门', 'G部门', 'H部门', 'I部门', 'J部门', 'K部门'],
            //             axisLine:{
            //                 show: true,
            //                 lineStyle:{
            //                     color: '#999'
            //                 }
            //             },
            //             axisLabel:{
            //                 color: '#999'
            //             }
            //         },
            //         yAxis: {
            //             type: 'value',
            //             axisLine:{
            //                 show: true,
            //                 lineStyle:{
            //                     type: 'dotted'
            //                 }
            //             },
            //             axisLabel:{
            //                 color: '#999'
            //             },
            //             splitLine:{
            //                 show: false
            //             }
            //         },
            //         series: [
            //             {
            //                 name: '可能造成死亡的',
            //                 type: 'bar',
            //                 stack: 'total',
            //                 label: {
            //                     show: false
            //                 },
            //                 emphasis: {
            //                     focus: 'series'
            //                 },
            //                 data: [320, 301, 334, 390, 330, 320],
            //                 barCategoryGap: '50%'
            //             },
            //             {
            //                 name: '可能造成重伤的',
            //                 type: 'bar',
            //                 stack: 'total',
            //                 label: {
            //                     show: false
            //                 },
            //                 emphasis: {
            //                     focus: 'series'
            //                 },
            //                 data: [90, 230, 210, 132, 101, 134],
            //                 barCategoryGap: '50%'
            //             },
            //             {
            //                 name: '可能造成轻伤的',
            //                 type: 'bar',
            //                 stack: 'total',
            //                 label: {
            //                     show: false
            //                 },
            //                 emphasis: {
            //                     focus: 'series'
            //                 },
            //                 data: [290, 330, 310, 191, 234, 290],
            //                 barCategoryGap: '50%'
            //             }
            //         ]
            //     };
      //
            //     option && myChart.setOption(option);
            //     window.addEventListener("resize",function (){
            //         myChart.resize();
            //     });
            //     echarts.init(document.getElementById(risk1.value)).dispose()
            // }

            const getTheme =()=>{
                if(screenTheme.value.isDark){
@@ -348,12 +507,20 @@
                }
            }

      const getTime = () =>{
        const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
        const temp = curTime.split('-')
        state.timeValue[0] = temp[0]
        state.timeValue[1] = Number(temp[1])
      }

            watchEffect(() => {
                if(props.theme){
                    state.selector =  'select-dark'
                }else{
                    state.selector =  'select-light'
                }
        getDataByYearId()
            })

            function fontSize(val){
@@ -363,19 +530,23 @@

            // 页面载入时执行方法
            onMounted(() => {
                initRisk1();
                // initRisk1();
                getTheme();
        getTime();
        makeList();
        getAllDepartment();
        getDataByYearId()
            });

            onBeforeUnmount(() =>{
                clearInterval(swi)
                clearInterval(state.myVar)
            })

            return {
                risk1,
                risk2,
                Search,
                fontSize,
                changeTime,
                ...toRefs(state)
            };
        },
@@ -390,23 +561,36 @@
        position: relative;
        .select-dark{
            position: absolute;
            z-index: 999;
            z-index: 99999;
            top: -20px;
            right: 1.6rem;
            right: 3rem;
            width: 30%;
            height: 20px;
            height: 1.5rem;
            margin-right: 0.8rem;

            ::v-deep(.el-cascader){
                width: 100% !important;
                line-height: 100%;
            }
            ::v-deep(.el-popper){
                background-color: rgba(10,31,92,1);
                border: 1px solid rgba(17,254,238,.4);
                color: #11FEEE;
                .el-select-dropdown__item{
                z-index: 999999 !important;
                .el-cascader-node__label{
                    color: #11FEEE;
                }
                .el-select-dropdown__item.hover{
                    background: #0049af;
                .el-icon{
                    color: #11FEEE;
                }
                .el-cascader-node{
                    &:hover{
                        background: #0049af;
                    }
                }
            }
            ::v-deep(.el-cascader-menu){
                min-width: 50px !important;
            }
            ::v-deep(.el-popper__arrow){
                &::before{
@@ -433,23 +617,36 @@

        .select-light{
            position: absolute;
            z-index: 999;
            z-index: 99999;
            top: -20px;
            right: 1.6rem;
            right: 3rem;
            width: 30%;
            height: 20px;
            margin-right: 0.8rem;

            ::v-deep(.el-cascader){
                width: 100% !important;
                line-height: 100%;
            }
            ::v-deep(.el-popper){
                background-color: rgba(255,255,255,1);
                border: 1px solid #ccc;
                color: #fff;
                .el-select-dropdown__item{
                z-index: 999999 !important;
                .el-cascader-node__label{
                    color: #000;
                }
                .el-select-dropdown__item.hover{
                    background: #ccc;
                .el-icon{
                    color: #000;
                }
                .el-cascader-node{
                    &:hover{
                        background: #ccc;
                    }
                }
            }
            ::v-deep(.el-cascader-menu){
                min-width: 80px !important;
            }
            ::v-deep(.el-popper__arrow){
                &::before{

 src/views/riskWarningSys/warningBigScreen/components/training.vue

@@ -1,5 +1,7 @@
<template>
    <div class="charts-cont">
    <span v-if="lastDays == -1" :class="tip">该部门本年未进行应急演练</span>
    <span v-else :class="tip">距本年度上次演练结束{{lastDays}}天</span>
        <div v-show="curTab === 1" class="train" :id="train1"></div>
        <div v-show="curTab === 2" class="train" :id="train2"></div>
        <div v-show="curTab === 3" class="train" :id="train3"></div>
@@ -7,59 +9,138 @@
</template>

<script lang="ts">
    import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onBeforeUnmount} from 'vue';
import {
  toRefs,
  reactive,
  defineComponent,
  ref,
  defineAsyncComponent,
  onMounted,
  nextTick,
  onBeforeUnmount,
  watchEffect
} from 'vue';
    import { storeToRefs } from 'pinia';
    import { initBackEndControlRoutes } from '/@/router/backEnd';
    import {useUserInfo} from "/@/stores/userInfo";
    import { Session } from '/@/utils/storage';
    import { Search } from '@element-plus/icons-vue'
  import {useScreenTheme} from "/@/stores/screenTheme"
    import { ElMessage } from 'element-plus'
    import type { FormInstance, FormRules } from 'element-plus'
    import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
  import { riskWarningApi } from '/@/api/riskWarning';
    import * as echarts from 'echarts';
    import '/@/theme/bigScreen.css'

    interface stateType {
        curTab: number
        curTab: number,
    timeValue: Array<any>,
    traData: Array<any>,
    monthData: Array<any>,
    lastDays: number | null,
    tip: string,
    }
    export default defineComponent({
        name: 'accident',
        components: {},
        props:{
            size: Number
            size: Number,
      theme: Boolean
        },
        setup(props) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
      const screenThemes = useScreenTheme()
      const { screenTheme }  = storeToRefs(screenThemes);
            const train1 = ref("eChartTrain1" + Date.now() + Math.random())
            const train2 = ref("eChartTrain2" + Date.now() + Math.random())
            const train3 = ref("eChartTrain3" + Date.now() + Math.random())
            const state = reactive<stateType>({
                curTab: 1
                curTab: 1,
        timeValue: [],
        traData: [],
        monthData: [],
        lastDays: null,
        tip: 'tip-dark'
            })
      const timeForm = {
        hour12: false,
        year: 'numeric',
        month: 'numeric',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      };

            // const changeTab=()=>{
            //     setInterval(()=>{
            //         if(state.curTab<3){
            //             state.curTab = state.curTab + 1
            //             if(state.curTab == 2){
            //                 nextTick(()=>{
            //                     initTrain2()
            //                 })
            //             }else{
            //                 nextTick(()=>{
            //                     initTrain3()
            //                 })
            //             }
            //
            //         }else{
            //             state.curTab = 1
            //             nextTick(()=>{
            //                 initTrain1()
            //             })
            //         }
            //     },5000)
            // }
      const getDataById = async () => {
        getTime()
        const data = {
          depId: screenTheme.value.depId || 1,
          beginYear: state.timeValue[0],
          beginMonth: 1,
          endYear: state.timeValue[0],
          endMonth: state.timeValue[1]
        }
        let res = await riskWarningApi().getEmergencyByDep(data);
        if (res.data.code === '200') {
          state.traData = res.data.data
          const result = []
          let lastTime = ''
          for(let index in state.traData){
            if(state.traData[index].detail && state.traData[index].detail.length>0){
              let total = state.traData[index].detail.reduce((pre,cur)=>{
                return pre+cur.practiceCount
              },0)
              result.push(total)
              state.traData[index].totalCount = total
            }else{
              result.push(0)
            }
            for(let i in state.traData[index].detail){
              if(state.traData[index].detail[i].lastPracticeTime != null){
                lastTime = state.traData[index].detail[i].lastPracticeTime
              }
            }
          }
          if(!lastTime){
            state.lastDays = -1
          }else{
            const date = new Date(lastTime)
            const nTime = Date.now() - date.getTime()
            state.lastDays = Math.floor(nTime / 86400000)
          }
          const arrNum = Math.ceil(result.length/4, 10);
          let index = 0; // 定义初始索引
          let resIndex = 0; // 用来保存每次拆分的长度
          while(index< arrNum){
            state.monthData[index]= result.slice(resIndex,4+resIndex);
            resIndex += 4;
            index++;
          }
          initTrain1()
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }
      const getTime = () =>{
        const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
        const temp = curTime.split('-')
        state.timeValue[0] = temp[0]
        state.timeValue[1] = Number(temp[1])
      }

      const getTheme =()=>{
        if(screenTheme.value.isDark){
          state.tip =  'tip-dark'
        }else{
          state.tip =  'tip-light'
        }
      }
            const changeTab = setInterval(()=>{
                if(state.curTab<3){
                    state.curTab = state.curTab + 1
@@ -119,7 +200,6 @@
                    },
                    yAxis: {
                        type: 'category',
                        // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
                        data: ['一月', '二月', '三月', '四月'],
                        axisLine:{
                            show: true,
@@ -135,8 +215,7 @@
                        {
                            name: '2011',
                            type: 'bar',
                            // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
                            data: [18203, 23489, 29034, 104970],
                            data: state.monthData[0],
                            itemStyle:{
                                color: {
                                    x: 0,
@@ -212,7 +291,6 @@
                    },
                    yAxis: {
                        type: 'category',
                        // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
                        data: ['五月', '六月','七月', '八月'],
                        axisLine:{
                            show: true,
@@ -229,7 +307,7 @@
                            name: '2011',
                            type: 'bar',
                            // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
                            data: [131744, 630230, 18203, 23489],
                            data: state.monthData[1],
                            barCategoryGap: '50%',
                            itemStyle:{
                                color: {
@@ -322,7 +400,7 @@
                            name: '2011',
                            type: 'bar',
                            // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
                            data: [29034, 104970, 131744, 630230],
                            data: state.monthData[2],
                            barCategoryGap: '50%',
                            itemStyle:{
                                color: {
@@ -366,9 +444,21 @@
                return val * (nowClientWidth/1920) * Number(props.size);
            }


      watchEffect(() => {
        if(props.theme){
          state.tip =  'tip-dark'
        }else{
          state.tip =  'tip-light'
        }
        getDataById()
      })

            // 页面载入时执行方法
            onMounted(() => {
                initTrain1();
        getTime();
        getTheme();
        getDataById()
            });
            onBeforeUnmount(() =>{
                clearInterval(changeTab)
@@ -397,6 +487,18 @@
            height: 100%;
        }
    }
  .tip-dark{
    display: block;
    font-size: 0.8rem;
    color: #11feee;
    height: 1rem;
  }
  .tip-light{
    display: block;
    font-size: 0.8rem;
    color: #333;
    height: 1rem;
  }
    .home-container {
        height: 100%;
        overflow: hidden;

 src/views/riskWarningSys/warningBigScreen/index.vue

@@ -69,8 +69,7 @@
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(2)"/>
                    </div>
                    <div class="chart-box">
                        <span class="train-tip">距上次演练结束 5 天</span>
                        <training class="train-chart" :size="1"></training>
                        <training :size="1" :theme="screenTheme.isDark"></training>
                    </div>
                </div>
                <div class="left-bottom">
@@ -80,15 +79,25 @@
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(3)"/>
                    </div>
                    <div class="chart-box">
                        <risk :size="1" :theme="screenTheme.isDark"></risk>
                        <risk :size="1" :theme="screenTheme.isDark" :dep="departList"></risk>
                    </div>
                </div>
            </div>
            <div class="main-middle">
                <div class="mid-top">
                    <dv-border-box-11 title="SPI数据分析" :backgroundColor="boxBg" :color="boxBigColor" class="box-bg"></dv-border-box-11>
                    <div class="part-tit" style="position: absolute;top: 8%;padding: 0 4%">
                        <div></div>
                    <div class="part-tit" style="position: absolute;top: 10%;padding: 0 4%;align-items: flex-start;z-index: 10001">
                        <div class="spiChart">
                            <el-cascader
                                    class="spiSe"
                                    :teleported="false"
                                    v-model="depValue"
                                    :options="departList"
                                    :props="depProps"
                                    :show-all-levels="false"
                                    @change="depChange"
                            />
                        </div>
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(4)"/>
                    </div>
                    <div class="chart-box" style="top: 60px;height: calc(100% - 70px)">
@@ -171,7 +180,17 @@

<script lang="ts">
    import screenfull from 'screenfull';
    import { toRefs, reactive, ref, onMounted, defineComponent, defineAsyncComponent, nextTick, onUnmounted } from 'vue';
    import {
        toRefs,
        reactive,
        ref,
        onMounted,
        defineComponent,
        defineAsyncComponent,
        nextTick,
        onUnmounted,
        onBeforeUnmount
    } from 'vue';
    import { ElTable } from 'element-plus';
    import { FormInstance, FormRules, ElMessage } from 'element-plus';
    import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts';
@@ -181,6 +200,7 @@
    import '/@/theme/bigScreen.css'
    import {useScreenTheme} from "/@/stores/screenTheme"
    import {storeToRefs} from "pinia";
    import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";

    // 定义接口来定义对象的类型
    interface stateType {
@@ -189,10 +209,12 @@
        boxBigColor: Array<string>;
        isScreenfull: boolean;
        currentTime: string;
        spiValue: number;
        spiOptions: Array<any>;
        depValue: number;
        dialogShow: string;
        dialogHide: string
        dialogHide: string;
        depProps: object;
        departList: Array<any>;
        lastTrain: number | null;
    }
    export default defineComponent({
        name: 'warningScreen',
@@ -218,67 +240,54 @@
            }
            const state = reactive<stateType>({
                boxBg: 'rgba(8, 109, 209, 0.2)',
                depValue: 1,
                boxColor: [],
                boxBigColor: [],
                lastTrain: null,
                isScreenfull: false,
                currentTime: '',
                spiValue: 0,
                dialogShow: 'hide',
                dialogHide: 'showup',
                spiOptions: [
                    {
                        value: 0,
                        label: '公司级别SPI'
                    },
                    {
                        value: 1,
                        label: 'A事业部SPI',
                        children: [
                            {
                                value: 11,
                                label: 'A车间SPI'
                            },
                            {
                                value: 12,
                                label: 'B车间SPI'
                            },
                            {
                                value: 13,
                                label: 'C车间SPI'
                            }
                        ]
                    },
                    {
                        value: 2,
                        label: 'B事业部SPI',
                        children: [
                            {
                                value: 21,
                                label: 'D车间SPI'
                            },
                            {
                                value: 22,
                                label: 'E车间SPI'
                            },
                            {
                                value: 23,
                                label: 'F车间SPI'
                            }
                        ]
                    }
                ]
                depProps: {
                    expandTrigger: 'hover',
                    checkStrictly: true,
                    value: 'depId',
                    label: 'depName',
                    emitPath: false
                },
                departList: [],
            });

            // 页面载入时执行方法
            onMounted(() => {
                getTime()
                state.depValue = screenTheme.value.depId
                getTime();
                getAllDepartment();
                setInterval(()=>{
                    getTime()
                },1000)
                getTheme()
            });

            const getTime =()=>{
                setInterval(() => {
                    state.currentTime = new Date().toLocaleString();
                }, 1000);
                state.currentTime = new Date().toLocaleString();
            }

            // 获取部门列表
            const getAllDepartment = async () => {
                let res = await teamManageApi().getAllDepartment();
                if (res.data.code === '200') {
                    state.departList = JSON.parse(JSON.stringify(res.data.data))
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            }

            const depChange = (value)=>{
                state.depValue = value
                screenThemes.setDepId(value)
            }

            const changeTheme = () =>{
@@ -353,6 +362,9 @@
                window.history.go(-1);
            };

            onBeforeUnmount(() =>{
                clearInterval()
            })
            // 隐患状态列表
            // const getDeviceRecord = async () => {
            //     const data = { pageSize: state.pageSize, pageIndex: state.pageIndex};
@@ -375,6 +387,7 @@
                closeInfo,
                changeTheme,
                onScreenfullClick,
                depChange,
                jumpPage,
                goBack,
                ...toRefs(state)
@@ -621,6 +634,52 @@
                        align-items: center;
                        z-index: 9999;

                        .spiChart{
                            width: 25% !important;

                            ::v-deep(.el-cascader){
                                width: 100% !important;
                            }
                            ::v-deep(.el-popper){
                                background-color: rgba(10,31,92,1);
                                border: 1px solid rgba(17,254,238,.4);
                                color: #11FEEE;
                                .el-cascader-node__label{
                                    color: #11FEEE;
                                }
                                .el-icon{
                                    color: #11FEEE;
                                }
                                .el-cascader-node{
                                    &:hover{
                                        background: #0049af;
                                    }
                                }
                            }
                            ::v-deep(.el-popper__arrow){
                                &::before{
                                    background-color: rgba(10,31,92,.6) !important;
                                    border: 1px solid rgba(17,254,238,.4);
                                }
                            }
                            ::v-deep(.el-input__wrapper){
                                width: 20%;
                                box-shadow: none;
                                border: 1px solid rgba(17,254,238,.2);
                                background: rgba(10,31,92,.6) !important;
                                height: 2.5rem;
                                color: #11FEEE;

                                input{
                                    font-size: 1.25rem;
                                    color: #11FEEE;
                                }
                                .el-icon{
                                    color: #11FEEE;
                                }
                            }
                        }

                        span{
                            font-size: 1.25rem;
                            font-weight: bolder;
@@ -641,7 +700,7 @@
                        right: 0;
                        width: 100%;
                        height: calc(100% - 50px);
                        z-index: 99999;
                        z-index: 10000;
                        .train-tip{
                            display: block;
                            font-size: 0.8rem;
@@ -649,11 +708,6 @@
                            margin-left: 5%;
                            color: #fff;
                            height: 1rem;
                        }

                        .train-chart{
                            width: 100%;
                            height: calc(100% - 1rem);
                        }
                    }
                }
@@ -931,6 +985,53 @@
                        justify-content: space-between;
                        align-items: center;
                        z-index: 9999;

                        .spiChart{
                            width: 25% !important;

                            ::v-deep(.el-cascader){
                                width: 100% !important;
                            }
                            ::v-deep(.el-popper){
                                background-color: #fff;
                                border: 1px solid #ccc;
                                color: #000;
                                .el-cascader-node__label{
                                    color: #000;
                                }
                                .el-icon{
                                    color: #000;
                                }
                                .el-cascader-node{
                                    &:hover{
                                        background: #ccc;
                                    }
                                }
                            }
                            ::v-deep(.el-popper__arrow){
                                &::before{
                                    background-color: #fff !important;
                                    border: 1px solid #ccc;
                                }
                            }
                            ::v-deep(.el-input__wrapper){
                                width: 20%;
                                box-shadow: none;
                                border: 1px solid #ccc;
                                background: #fff !important;
                                height: 2.5rem;
                                color: #000;

                                input{
                                    font-size: 1.25rem;
                                    color: #000;
                                }
                                .el-icon{
                                    color: #000;
                                }
                            }
                        }

                        span{
                            font-size: 1.25rem;
                            font-weight: bolder;
@@ -951,7 +1052,7 @@
                        right: 0;
                        width: 100%;
                        height: calc(100% - 50px);
                        z-index: 99999;
                        z-index: 10000;
                        .train-tip{
                            display: block;
                            font-size: 0.8rem;
@@ -959,11 +1060,6 @@
                            margin-left: 5%;
                            color: #333;
                            height: 1rem;
                        }

                        .train-chart{
                            width: 100%;
                            height: calc(100% - 1rem);
                        }
                    }
                }

 src/views/riskWarningSys/warningBigScreen/indexs/components/acc.vue

对比新文件
@@ -0,0 +1,233 @@
<template>
    <div id="descCont" class="dark-desc">
      <div class="des-tit">
        <div>2022年度事故等级分布与影响一览</div>
        <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
      </div>
      <div class="des-main">
        <div v-if="descContent[0]">
          <h4>特别重大事故共计：{{descContent[0].count}}起</h4>
          <p>
            死亡人数：{{descContent[0].causeDeathCount}}人；
            重伤人数：{{descContent[0].causeHeavyInjureCount}}人；
            轻伤人数：{{descContent[0].causeLightInjureCount}}人；
            直接经济损失：{{descContent[0].loss}}元</p>
        </div>
        <div v-if="descContent[1]">
          <h4>重大事故共计：{{descContent[1].count}}起</h4>
          <p>
            死亡人数：{{descContent[1].causeDeathCount}}人；
            重伤人数：{{descContent[1].causeHeavyInjureCount}}人；
            轻伤人数：{{descContent[1].causeLightInjureCount}}人；
            直接经济损失：{{descContent[1].loss}}万元</p>
        </div>
        <div v-if="descContent[2]">
          <h4>较大事故共计：{{descContent[2].count}}起</h4>
          <p>
            死亡人数：{{descContent[2].causeDeathCount}}人；
            重伤人数：{{descContent[2].causeHeavyInjureCount}}人；
            轻伤人数：{{descContent[2].causeLightInjureCount}}人；
            直接经济损失：{{descContent[2].loss}}元</p>
        </div>
        <div v-if="descContent[3]">
          <h4>一般事故共计：{{descContent[3].count}}起</h4>
          <p>
            死亡人数：{{descContent[3].causeDeathCount}}人；
            重伤人数：{{descContent[3].causeHeavyInjureCount}}人；
            轻伤人数：{{descContent[3].causeLightInjureCount}}人；
            直接经济损失：{{descContent[3].loss}}元</p>
        </div>
        <div v-if="descContent[4]">
          <h4>未遂事故共计：{{descContent[4].count}}起</h4>
          <p>
            死亡人数：{{descContent[4].causeDeathCount}}人；
            重伤人数：{{descContent[4].causeHeavyInjureCount}}人；
            轻伤人数：{{descContent[4].causeLightInjureCount}}人；
            直接经济损失：{{descContent[4].loss}}元</p>
        </div>
      </div>
    </div>
</template>
<script lang="ts">
  import screenfull from 'screenfull';
  import {
    toRefs,
    reactive,
    ref,
    onMounted,
    defineComponent,
    defineAsyncComponent,
    nextTick,
    onUnmounted,
    watchEffect
  } from 'vue';
  import '/@/theme/bigScreen.css'
  import {useScreenTheme} from "/@/stores/screenTheme"
  import {storeToRefs} from "pinia";
  import {riskWarningApi} from "/@/api/riskWarning";
  import {ElMessage} from "element-plus/es";

  // 定义接口来定义对象的类型
  interface stateType {
    descContent: Array<any>;
    lineColor: Array<string>;
  }

  export default defineComponent({
    name: 'accDesc',
    components: {},
    props:{
      content: Object || null
    },
    setup(props) {
      const screenThemes = useScreenTheme()
      const { screenTheme } = storeToRefs(screenThemes);
      const state = reactive<stateType>({
        descContent: [],
        lineColor: ['#11FEEE'],
      });
      const getDataByYearId = async () => {
        const data = {
          depId: screenTheme.value.depId || 1,
          beginYear: state.timeValue[0],
          beginMonth: state.timeValue[1],
          endYear: state.timeValue[0],
          endMonth: state.timeValue[1]
        }
        if(state.timeValue[1] == '0'){
          data.beginMonth = '1'
          data.endMonth = '12'
        }
        let res = await riskWarningApi().getRiskByTimeDep(data);
        if (res.data.code === '200') {

        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }
      const getTheme =()=>{
        if(screenTheme.value.isDark){
          window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
          state.lineColor = ['#11FEEE']
        }else{
          window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
          state.lineColor = ['#333','#ccc']
        }
      }

      watchEffect(() => {
        if(props.content && props.content.accData && props.content.accData[0] && props.content.accData[1] && props.content.accData[2] && props.content.accData[3] && props.content.accData[4]){
          state.descContent = props.content.accData
        }
      })

      // 页面载入时执行方法
      onMounted(() => {
        getTheme();
      });
      return {
        ...toRefs(state)
      };
    }
  });
</script>

<style scoped lang="scss">
  .dark-desc{
    width: 100%;
    height: 100%;

    .des-tit{
      width: 100%;
      &>div{
        font-size: 1.5rem;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        font-weight: bolder;
        color: #11FEEE;
      }
    }
    .des-main{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      color: #11FEEE;

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;

          span{
            margin-right: 10px;
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }

        &>p{
          font-size: 1rem;
          margin-top: 10px;
        }
      }
    }
  }
  .light-desc{
    width: 100%;
    height: 100%;

    .des-tit{
      width: 100%;
      &>div{
        font-size: 1.5rem;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        font-weight: bolder;
        color: #333;
      }
    }
    .des-main{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      color: #333;

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;

          span{
            margin-right: 10px;
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }

        &>p{
          font-size: 1rem;
          margin-top: 10px;
        }
      }
    }
  }
</style>

 src/views/riskWarningSys/warningBigScreen/indexs/components/dan.vue

对比新文件
@@ -0,0 +1,215 @@
<template>
    <div id="descCont" class="dark-desc">
      <div class="des-tit">
        <div>隐患等级分布与隐患整改率</div>
        <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
      </div>
      <div class="des-main">
        <div>
          <h4 v-if="descContent.detail && descContent.detail.heavyRiskCount">
            重大隐患数量：{{descContent.detail.heavyRiskCount}}
          </h4>
          <h4 v-else>
            重大隐患数量：0
          </h4>
        </div>
        <div>
          <h4 v-if="descContent.detail && descContent.detail.heavyRiskCount && descContent.detail.heavyRiskFinishCount">
            已完成整改：{{descContent.detail.heavyRiskCount == 0 ? 0 + '%' : Math.round(descContent.detail.heavyRiskFinishCount / descContent.detail.heavyRiskCount * 10000) / 100.00 + '%'}}
          </h4>
          <h4 v-else>
            已完成整改：0%
          </h4>
        </div>
<!--        <div>-->
<!--          <h4>整改中：8%；</h4>-->
<!--        </div>-->
<!--        <div>-->
<!--          <h4>暂未整改：3%；</h4>-->
<!--        </div>-->
        <div>
          <h4 v-if="descContent.detail && descContent.detail.lightRiskCount">
            一般隐患数量：{{descContent.detail.lightRiskCount}}
          </h4>
          <h4 v-else>
            一般隐患数量：0
          </h4>
        </div>
        <div>
          <h4 v-if="descContent.detail && descContent.detail.lightRiskCount && descContent.detail.lightRiskFinishCount">
            已完成整改：{{descContent.detail.lightRiskCount == 0 ? 0 + '%' : Math.round(descContent.detail.lightRiskFinishCount / descContent.detail.lightRiskCount * 10000) / 100.00 + '%'}}
          </h4>
          <h4 v-else>
            已完成整改：0%
          </h4>
        </div>
<!--        <div>-->
<!--          <h4>整改中：19%；</h4>-->
<!--        </div>-->
<!--        <div>-->
<!--          <h4>暂未整改：6%；</h4>-->
<!--        </div>-->
      </div>
    </div>
</template>
<script lang="ts">
  import screenfull from 'screenfull';
  import {
    toRefs,
    reactive,
    ref,
    onMounted,
    defineComponent,
    defineAsyncComponent,
    nextTick,
    onUnmounted,
    watchEffect
  } from 'vue';
  import '/@/theme/bigScreen.css'
  import {useScreenTheme} from "/@/stores/screenTheme"
  import {storeToRefs} from "pinia";

  // 定义接口来定义对象的类型
  interface stateType {
    descContent: Object;
    lineColor: Array<string>;
  }
  export default defineComponent({
    name: 'danDesc',
    components: {},
    props:{
      content: Object || null
    },
    setup(props) {
      const screenThemes = useScreenTheme()
      const { screenTheme } = storeToRefs(screenThemes);
      const state = reactive<stateType>({
        descContent: {

        },
        lineColor: ['#11FEEE'],
      });

      const getTheme =()=>{
        if(screenTheme.value.isDark){
          window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
          state.lineColor = ['#11FEEE']
        }else{
          window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
          state.lineColor = ['#333','#ccc']
        }
      }

      watchEffect(() => {
        if(props.content && props.content.dangerData && props.content.dangerData[0]){
          state.descContent = props.content.dangerData[0]
        }
      })

      // 页面载入时执行方法
      onMounted(() => {
        getTheme();
      });
      return {
        ...toRefs(state)
      };
    }
  });
</script>

<style scoped lang="scss">
  .dark-desc{
    width: 100%;
    height: 100%;

    .des-tit{
      width: 100%;
      &>div{
        font-size: 1.5rem;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        font-weight: bolder;
        color: #11FEEE;
      }
    }
    .des-main{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      color: #11FEEE;

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;

          span{
            margin-right: 10px;
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }

        &>p{
          font-size: 1rem;
          margin-top: 10px;
        }
      }
    }
  }
  .light-desc{
    width: 100%;
    height: 100%;

    .des-tit{
      width: 100%;
      &>div{
        font-size: 1.5rem;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        font-weight: bolder;
        color: #333;
      }
    }
    .des-main{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      color: #333;

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;

          span{
            margin-right: 10px;
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }

        &>p{
          font-size: 1rem;
          margin-top: 10px;
        }
      }
    }
  }
</style>

 src/views/riskWarningSys/warningBigScreen/indexs/components/edu.vue

对比新文件
@@ -0,0 +1,210 @@
<template>
    <div id="descCont" class="dark-desc">
      <div class="des-tit">
        <div>教育培训情况汇总</div>
        <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
      </div>
      <div class="des-main">
        <div>
          <h4>公司总计：</h4>
        </div>
        <div>
          <h4>企业总设计培训次数：50次</h4>
        </div>
        <div>
          <h4>企业总设计培训时间：100小时</h4>
        </div>
        <div>
          <h4>企业总完成培训次数：50次</h4>
        </div>
        <div>
          <h4>企业总完成培训时间：100小时</h4>
        </div>
        <div>
          <h4>企业总完成比例：100%</h4>
        </div>
        <div>
          <h4>部门级完成度最低部门前三：</h4>
        </div>
        <div>
          <h4>有机化工事业部</h4>
        </div>
        <div>
          <h4>设计培训次数：--次</h4>
        </div>
        <div>
          <h4>设计培训时间：--小时</h4>
        </div>
        <div>
          <h4>完成培训次数：--次</h4>
        </div>
        <div>
          <h4>完成培训时间：--小时</h4>
        </div>
        <div>
          <h4>完成比例：--%</h4>
        </div>
      </div>
    </div>
</template>
<script lang="ts">
  import screenfull from 'screenfull';
  import {
    toRefs,
    reactive,
    ref,
    onMounted,
    defineComponent,
    defineAsyncComponent,
    nextTick,
    onUnmounted,
    watchEffect
  } from 'vue';
  import '/@/theme/bigScreen.css'
  import {useScreenTheme} from "/@/stores/screenTheme"
  import {storeToRefs} from "pinia";

  // 定义接口来定义对象的类型
  interface stateType {
    descContent: Object;
    lineColor: Array<string>;
  }
  export default defineComponent({
    name: 'eduDesc',
    components: {},
    props:{
      content: Object || null
    },
    setup(props) {
      const screenThemes = useScreenTheme()
      const { screenTheme } = storeToRefs(screenThemes);
      const state = reactive<stateType>({
        descContent: {

        },
        lineColor: ['#11FEEE'],
      });

      const getTheme =()=>{
        if(screenTheme.value.isDark){
          window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
          state.lineColor = ['#11FEEE']
        }else{
          window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
          state.lineColor = ['#333','#ccc']
        }
      }

      watchEffect(() => {
        // if(props.content){
        //   state.descContent = props.content
        // }
      })

      // 页面载入时执行方法
      onMounted(() => {
        getTheme();
      });
      return {
        ...toRefs(state)
      };
    }
  });
</script>

<style scoped lang="scss">
  .dark-desc{
    width: 100%;
    height: 100%;

    .des-tit{
      width: 100%;
      &>div{
        font-size: 1.5rem;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        font-weight: bolder;
        color: #11FEEE;
      }
    }
    .des-main{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      color: #11FEEE;

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;

          span{
            margin-right: 10px;
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }

        &>p{
          font-size: 1rem;
          margin-top: 10px;
        }
      }
    }
  }
  .light-desc{
    width: 100%;
    height: 100%;

    .des-tit{
      width: 100%;
      &>div{
        font-size: 1.5rem;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        font-weight: bolder;
        color: #333;
      }
    }
    .des-main{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      color: #333;

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;

          span{
            margin-right: 10px;
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }

        &>p{
          font-size: 1rem;
          margin-top: 10px;
        }
      }
    }
  }
</style>

 src/views/riskWarningSys/warningBigScreen/indexs/components/mon.vue

对比新文件
@@ -0,0 +1,175 @@
<template>
    <div id="descCont" class="dark-desc">
      <div class="des-tit">
        <div>监控列表</div>
        <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
      </div>
      <div class="des-main">
        <div>
          <h4>请选择所要查看的监控：</h4>
          <p>监控系统待接入...</p>
        </div>
      </div>
    </div>
</template>
<script lang="ts">
  import screenfull from 'screenfull';
  import {
    toRefs,
    reactive,
    ref,
    onMounted,
    defineComponent,
    defineAsyncComponent,
    nextTick,
    onUnmounted,
    watchEffect
  } from 'vue';
  import '/@/theme/bigScreen.css'
  import {useScreenTheme} from "/@/stores/screenTheme"
  import {storeToRefs} from "pinia";

  // 定义接口来定义对象的类型
  interface stateType {
    descContent: Object;
    lineColor: Array<string>;
  }
  export default defineComponent({
    name: 'monDesc',
    components: {},
    props:{
      content: Object || null
    },
    setup(props) {
      const screenThemes = useScreenTheme()
      const { screenTheme } = storeToRefs(screenThemes);
      const state = reactive<stateType>({
        descContent: {

        },
        lineColor: ['#11FEEE'],
      });

      const getTheme =()=>{
        if(screenTheme.value.isDark){
          window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
          state.lineColor = ['#11FEEE']
        }else{
          window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
          state.lineColor = ['#333','#ccc']
        }
      }

      watchEffect(() => {
        // if(props.content){
        //   state.descContent = props.content
        // }
      })

      // 页面载入时执行方法
      onMounted(() => {
        getTheme();
      });
      return {
        ...toRefs(state)
      };
    }
  });
</script>

<style scoped lang="scss">
  .dark-desc{
    width: 100%;
    height: 100%;

    .des-tit{
      width: 100%;
      &>div{
        font-size: 1.5rem;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        font-weight: bolder;
        color: #11FEEE;
      }
    }
    .des-main{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      color: #11FEEE;

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;

          span{
            margin-right: 10px;
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }

        &>p{
          font-size: 1rem;
          margin-top: 10px;
        }
      }
    }
  }
  .light-desc{
    width: 100%;
    height: 100%;

    .des-tit{
      width: 100%;
      &>div{
        font-size: 1.5rem;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        font-weight: bolder;
        color: #333;
      }
    }
    .des-main{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      color: #333;

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;

          span{
            margin-right: 10px;
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }

        &>p{
          font-size: 1rem;
          margin-top: 10px;
        }
      }
    }
  }
</style>

 src/views/riskWarningSys/warningBigScreen/indexs/components/msg.vue

对比新文件
@@ -0,0 +1,183 @@
<template>
    <div id="descCont" class="dark-desc">
      <div class="des-tit">
        <div>预警消息SPI报告-2022年8月</div>
        <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
      </div>
      <div class="des-main">
        <div>
          <h4>2022年8月整体SPI指数317.65，处于安全范围以内。</h4>
          <p>8月份spi中教育培训比例不足和一般风险新增较多，对SPI总值影响较大，请注意调整相关因素环节的处理措施。</p>
        </div>
        <div>
          <h4>次月预警消息</h4>
          <p>未来一个月该地区气候干燥，降水量少，高温天气仍将持续，应注意防范消防风险，注意重点消防区域的消防设置设备的可用性检查</p>
        </div>
        <div>
          <h4>本月SPI基础数据构成：</h4>
          <p>...</p>
        </div>
      </div>
    </div>
</template>
<script lang="ts">
  import screenfull from 'screenfull';
  import {
    toRefs,
    reactive,
    ref,
    onMounted,
    defineComponent,
    defineAsyncComponent,
    nextTick,
    onUnmounted,
    watchEffect
  } from 'vue';
  import '/@/theme/bigScreen.css'
  import {useScreenTheme} from "/@/stores/screenTheme"
  import {storeToRefs} from "pinia";

  // 定义接口来定义对象的类型
  interface stateType {
    descContent: Object;
    lineColor: Array<string>;
  }
  export default defineComponent({
    name: 'msgDesc',
    components: {},
    props:{
      content: Object || null
    },
    setup(props) {
      const screenThemes = useScreenTheme()
      const { screenTheme } = storeToRefs(screenThemes);
      const state = reactive<stateType>({
        descContent: {

        },
        lineColor: ['#11FEEE'],
      });

      const getTheme =()=>{
        if(screenTheme.value.isDark){
          window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
          state.lineColor = ['#11FEEE']
        }else{
          window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
          state.lineColor = ['#333','#ccc']
        }
      }

      watchEffect(() => {
        // if(props.content){
        //   state.descContent = props.content
        // }
      })

      // 页面载入时执行方法
      onMounted(() => {
        getTheme();
      });
      return {
        ...toRefs(state)
      };
    }
  });
</script>

<style scoped lang="scss">
  .dark-desc{
    width: 100%;
    height: 100%;

    .des-tit{
      width: 100%;
      &>div{
        font-size: 1.5rem;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        font-weight: bolder;
        color: #11FEEE;
      }
    }
    .des-main{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      color: #11FEEE;

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;

          span{
            margin-right: 10px;
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }

        &>p{
          font-size: 1rem;
          margin-top: 10px;
        }
      }
    }
  }
  .light-desc{
    width: 100%;
    height: 100%;

    .des-tit{
      width: 100%;
      &>div{
        font-size: 1.5rem;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        font-weight: bolder;
        color: #333;
      }
    }
    .des-main{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      color: #333;

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;

          span{
            margin-right: 10px;
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }

        &>p{
          font-size: 1rem;
          margin-top: 10px;
        }
      }
    }
  }
</style>

 src/views/riskWarningSys/warningBigScreen/indexs/components/pro.vue

对比新文件
@@ -0,0 +1,183 @@
<template>
    <div id="descCont" class="dark-desc">
      <div class="des-tit">
        <div>人员持证上岗情况</div>
        <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
      </div>
      <div class="des-main">
        <div>
          <h4>该岗位工种持证人员：1048人</h4>
        </div>
        <div>
          <h4>该岗位工种未持证人员：735人</h4>
        </div>
        <div>
          <h4>关键岗位必要持证无证上岗：1人</h4>
        </div>
        <div>
          <p>提醒：本年度存在有1人在管家必要持证岗位未持证上岗情况，该情况已经上报监管系统，请注意控制该风险因素。</p>
        </div>
      </div>
    </div>
</template>
<script lang="ts">
  import screenfull from 'screenfull';
  import {
    toRefs,
    reactive,
    ref,
    onMounted,
    defineComponent,
    defineAsyncComponent,
    nextTick,
    onUnmounted,
    watchEffect
  } from 'vue';
  import '/@/theme/bigScreen.css'
  import {useScreenTheme} from "/@/stores/screenTheme"
  import {storeToRefs} from "pinia";

  // 定义接口来定义对象的类型
  interface stateType {
    descContent: Object;
    lineColor: Array<string>;
  }
  export default defineComponent({
    name: 'proDesc',
    components: {},
    props:{
      content: Object || null
    },
    setup(props) {
      const screenThemes = useScreenTheme()
      const { screenTheme } = storeToRefs(screenThemes);
      const state = reactive<stateType>({
        descContent: {

        },
        lineColor: ['#11FEEE'],
      });

      const getTheme =()=>{
        if(screenTheme.value.isDark){
          window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
          state.lineColor = ['#11FEEE']
        }else{
          window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
          state.lineColor = ['#333','#ccc']
        }
      }

      watchEffect(() => {
        // if(props.content){
        //   state.descContent = props.content
        // }
      })

      // 页面载入时执行方法
      onMounted(() => {
        getTheme();
      });
      return {
        ...toRefs(state)
      };
    }
  });
</script>

<style scoped lang="scss">
  .dark-desc{
    width: 100%;
    height: 100%;

    .des-tit{
      width: 100%;
      &>div{
        font-size: 1.5rem;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        font-weight: bolder;
        color: #11FEEE;
      }
    }
    .des-main{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      color: #11FEEE;

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;

          span{
            margin-right: 10px;
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }

        &>p{
          font-size: 1rem;
          margin-top: 10px;
        }
      }
    }
  }
  .light-desc{
    width: 100%;
    height: 100%;

    .des-tit{
      width: 100%;
      &>div{
        font-size: 1.5rem;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        font-weight: bolder;
        color: #333;
      }
    }
    .des-main{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      color: #333;

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;

          span{
            margin-right: 10px;
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }

        &>p{
          font-size: 1rem;
          margin-top: 10px;
        }
      }
    }
  }
</style>

 src/views/riskWarningSys/warningBigScreen/indexs/components/risk.vue

对比新文件
@@ -0,0 +1,201 @@
<template>
    <div id="descCont" class="dark-desc">
      <div class="des-tit">
        <div>隐患影响等级分布详情</div>
        <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
      </div>
      <div class="des-main">
        <div v-for="(item,index) in descContent.riskData" :key="index">
          <div>
            <h4>{{item.depId}}共上报隐患总数：{{item.detail.riskTotalCount }} 个</h4>
          </div>
          <div>
            <h4>其中：</h4>
          </div>
          <div>
            <h4>一般隐患数量：{{ item.detail.lightRiskCount }} 个</h4>
          </div>
          <div>
            <h4>重大隐患数量：{{ item.detail.heavyRiskCount }} 个</h4>
          </div>
          <div>
            <h4>可能造成死亡的：{{ item.detail.deathCount }} 个</h4>
          </div>
          <div>
            <h4>可能造成重伤的：{{ item.detail.heavyInjureCount}} 个</h4>
          </div>
          <div>
            <h4>可能造成轻伤的：{{ item.detail.lightInjureCount }} 个</h4>
          </div>
          <div>
            <h4>一般隐患整改数量：{{ item.detail.lightRiskFinishCount }} 个</h4>
          </div>
          <div>
            <h4>重大隐患整改数量：{{ item.detail.heavyRiskFinishCount }} 个</h4>
          </div>
        </div>
      </div>
    </div>
</template>
<script lang="ts">
  import screenfull from 'screenfull';
  import {
    toRefs,
    reactive,
    ref,
    onMounted,
    defineComponent,
    defineAsyncComponent,
    nextTick,
    onUnmounted,
    watchEffect
  } from 'vue';
  import '/@/theme/bigScreen.css'
  import {useScreenTheme} from "/@/stores/screenTheme"
  import {storeToRefs} from "pinia";

  // 定义接口来定义对象的类型
  interface stateType {
    descContent: Object;
    lineColor: Array<string>;
  }
  export default defineComponent({
    name: 'riskDesc',
    components: {},
    props:{
      content: Object || null
    },
    setup(props) {
      const screenThemes = useScreenTheme()
      const { screenTheme } = storeToRefs(screenThemes);
      const state = reactive<stateType>({
        descContent: {

        },
        lineColor: ['#11FEEE'],
      });

      const getTheme =()=>{
        if(screenTheme.value.isDark){
          window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
          state.lineColor = ['#11FEEE']
        }else{
          window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
          state.lineColor = ['#333','#ccc']
        }
      }

      watchEffect(() => {
        if(props.content){
          state.descContent = props.content
        }
        console.log(state.descContent,'risk')
      })

      // 页面载入时执行方法
      onMounted(() => {
        getTheme();
      });
      return {
        ...toRefs(state)
      };
    }
  });
</script>

<style scoped lang="scss">
  .dark-desc{
    width: 100%;
    height: 100%;

    .des-tit{
      width: 100%;
      &>div{
        font-size: 1.5rem;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        font-weight: bolder;
        color: #11FEEE;
      }
    }
    .des-main{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      color: #11FEEE;

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;

          span{
            margin-right: 10px;
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }

        &>p{
          font-size: 1rem;
          margin-top: 10px;
        }
      }
    }
  }
  .light-desc{
    width: 100%;
    height: 100%;

    .des-tit{
      width: 100%;
      &>div{
        font-size: 1.5rem;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        font-weight: bolder;
        color: #333;
      }
    }
    .des-main{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      color: #333;

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;

          span{
            margin-right: 10px;
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }

        &>p{
          font-size: 1rem;
          margin-top: 10px;
        }
      }
    }
  }
</style>

 src/views/riskWarningSys/warningBigScreen/indexs/components/spi.vue

对比新文件
@@ -0,0 +1,172 @@
<template>
    <div id="descCont" class="dark-desc">
      <div class="des-tit">
        <div>{{descContent.year}}年度事企业SPI趋势</div>
        <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
      </div>
      <div class="des-main">
        <div v-for="(item,index) in descContent.spiData" :key="index">
          <h4>{{item.month}}月份，安全生产预警指数值：{{item.spiVal}}<span v-if="index < descContent.spiData.length">；</span></h4>
        </div>
      </div>
    </div>
</template>
<script lang="ts">
  import screenfull from 'screenfull';
  import {
    toRefs,
    reactive,
    ref,
    onMounted,
    defineComponent,
    defineAsyncComponent,
    nextTick,
    onUnmounted,
    watchEffect
  } from 'vue';
  import '/@/theme/bigScreen.css'
  import {useScreenTheme} from "/@/stores/screenTheme"
  import {storeToRefs} from "pinia";

  // 定义接口来定义对象的类型
  interface stateType {
    descContent: Object;
    lineColor: Array<string>;
  }
  export default defineComponent({
    name: 'spiDesc',
    components: {},
    props:{
      content: Object || null
    },
    setup(props) {
      const screenThemes = useScreenTheme()
      const { screenTheme } = storeToRefs(screenThemes);
      const state = reactive<stateType>({
        descContent: {},
        lineColor: ['#11FEEE'],
      });

      const getTheme =()=>{
        if(screenTheme.value.isDark){
          window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
          state.lineColor = ['#11FEEE']
        }else{
          window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
          state.lineColor = ['#333','#ccc']
        }
      }

      watchEffect(() => {
        if(props.content){
          state.descContent = props.content
        }
      })

      // 页面载入时执行方法
      onMounted(() => {
        getTheme();
      });
      return {
        ...toRefs(state)
      };
    }
  });
</script>

<style scoped lang="scss">
  .dark-desc{
    width: 100%;
    height: 100%;

    .des-tit{
      width: 100%;
      &>div{
        font-size: 1.5rem;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        font-weight: bolder;
        color: #11FEEE;
      }
    }
    .des-main{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      color: #11FEEE;

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;

          span{
            margin-right: 10px;
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }

        &>p{
          font-size: 1rem;
          margin-top: 10px;
        }
      }
    }
  }
  .light-desc{
    width: 100%;
    height: 100%;

    .des-tit{
      width: 100%;
      &>div{
        font-size: 1.5rem;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        font-weight: bolder;
        color: #333;
      }
    }
    .des-main{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      color: #333;

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;

          span{
            margin-right: 10px;
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }

        &>p{
          font-size: 1rem;
          margin-top: 10px;
        }
      }
    }
  }
</style>

 src/views/riskWarningSys/warningBigScreen/indexs/components/sto.vue

对比新文件
@@ -0,0 +1,211 @@
<template>
    <div id="descCont" class="dark-desc">
      <div class="des-tit">
        <div>当前应急物资储备情况（总）</div>
        <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
      </div>
      <div class="des-main">
        <div>
          <h4>消防耗材：</h4>
        </div>
        <div>
          <h4>入库总数：2310</h4>
        </div>
        <div>
          <h4>剩余总数：2103</h4>
        </div>
        <div></div>
        <div>
          <h4>安全帽：</h4>
        </div>
        <div>
          <h4>入库总数：34312</h4>
        </div>
        <div>
          <h4>剩余总数：23509</h4>
        </div>
        <div></div>
        <div>
          <h4>防护服：</h4>
        </div>
        <div>
          <h4>入库总数：22140</h4>
        </div>
        <div>
          <h4>剩余总数：12830</h4>
        </div>
        <div></div>
        <div>
          <h4>防护服：</h4>
        </div>
        <div>
          <h4>入库总数：22140</h4>
        </div>
        <div>
          <h4>剩余总数：12830</h4>
        </div>
        <div></div>
      </div>
    </div>
</template>
<script lang="ts">
  import screenfull from 'screenfull';
  import {
    toRefs,
    reactive,
    ref,
    onMounted,
    defineComponent,
    defineAsyncComponent,
    nextTick,
    onUnmounted,
    watchEffect
  } from 'vue';
  import '/@/theme/bigScreen.css'
  import {useScreenTheme} from "/@/stores/screenTheme"
  import {storeToRefs} from "pinia";

  // 定义接口来定义对象的类型
  interface stateType {
    descContent: Object;
    lineColor: Array<string>;
  }
  export default defineComponent({
    name: 'stoDesc',
    components: {},
    props:{
      content: Object || null
    },
    setup(props) {
      const screenThemes = useScreenTheme()
      const { screenTheme } = storeToRefs(screenThemes);
      const state = reactive<stateType>({
        descContent: {

        },
        lineColor: ['#11FEEE'],
      });

      const getTheme =()=>{
        if(screenTheme.value.isDark){
          window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
          state.lineColor = ['#11FEEE']
        }else{
          window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
          state.lineColor = ['#333','#ccc']
        }
      }

      watchEffect(() => {
        // if(props.content){
        //   state.descContent = props.content
        // }
      })

      // 页面载入时执行方法
      onMounted(() => {
        getTheme();
      });
      return {
        ...toRefs(state)
      };
    }
  });
</script>

<style scoped lang="scss">
  .dark-desc{
    width: 100%;
    height: 100%;

    .des-tit{
      width: 100%;
      &>div{
        font-size: 1.5rem;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        font-weight: bolder;
        color: #11FEEE;
      }
    }
    .des-main{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      color: #11FEEE;

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;

          span{
            margin-right: 10px;
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }

        &>p{
          font-size: 1rem;
          margin-top: 10px;
        }
      }
    }
  }
  .light-desc{
    width: 100%;
    height: 100%;

    .des-tit{
      width: 100%;
      &>div{
        font-size: 1.5rem;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        font-weight: bolder;
        color: #333;
      }
    }
    .des-main{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      color: #333;

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;

          span{
            margin-right: 10px;
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }

        &>p{
          font-size: 1rem;
          margin-top: 10px;
        }
      }
    }
  }
</style>

 src/views/riskWarningSys/warningBigScreen/indexs/components/train.vue

对比新文件
@@ -0,0 +1,177 @@
<template>
    <div id="descCont" class="dark-desc">
      <div class="des-tit">
        <div>应急演练概况</div>
        <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
      </div>
      <div class="des-main">
        <div>
          <h4>应急演练分月情况汇总：</h4>
        </div>
        <div v-for="(item,index) in descContent.traData" :key="index">
          <h4>{{item.month}}月份应急演练次数：{{item.totalCount}}次；</h4>
        </div>
      </div>
    </div>
</template>
<script lang="ts">
  import screenfull from 'screenfull';
  import {
    toRefs,
    reactive,
    ref,
    onMounted,
    defineComponent,
    defineAsyncComponent,
    nextTick,
    onUnmounted,
    watchEffect
  } from 'vue';
  import '/@/theme/bigScreen.css'
  import {useScreenTheme} from "/@/stores/screenTheme"
  import {storeToRefs} from "pinia";

  // 定义接口来定义对象的类型
  interface stateType {
    descContent: Object;
    lineColor: Array<string>;
  }
  export default defineComponent({
    name: 'trainDesc',
    components: {},
    props:{
      content: Object || null
    },
    setup(props) {
      const screenThemes = useScreenTheme()
      const { screenTheme } = storeToRefs(screenThemes);
      const state = reactive<stateType>({
        descContent: {

        },
        lineColor: ['#11FEEE'],
      });

      const getTheme =()=>{
        if(screenTheme.value.isDark){
          window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
          state.lineColor = ['#11FEEE']
        }else{
          window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
          state.lineColor = ['#333','#ccc']
        }
      }

      watchEffect(() => {
        if(props.content){
          state.descContent = props.content
        }
      })

      // 页面载入时执行方法
      onMounted(() => {
        getTheme();
      });
      return {
        ...toRefs(state)
      };
    }
  });
</script>

<style scoped lang="scss">
  .dark-desc{
    width: 100%;
    height: 100%;

    .des-tit{
      width: 100%;
      &>div{
        font-size: 1.5rem;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        font-weight: bolder;
        color: #11FEEE;
      }
    }
    .des-main{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      color: #11FEEE;

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;

          span{
            margin-right: 10px;
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }

        &>p{
          font-size: 1rem;
          margin-top: 10px;
        }
      }
    }
  }
  .light-desc{
    width: 100%;
    height: 100%;

    .des-tit{
      width: 100%;
      &>div{
        font-size: 1.5rem;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        font-weight: bolder;
        color: #333;
      }
    }
    .des-main{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      color: #333;

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;

          span{
            margin-right: 10px;
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }

        &>p{
          font-size: 1rem;
          margin-top: 10px;
        }
      }
    }
  }
</style>

 src/views/riskWarningSys/warningBigScreen/indexs/index.vue

@@ -13,13 +13,12 @@
    </div>
    <div class="chart-cont">
      <div class="chart">
        <div v-show="curChart===2" class="selector-2">距上次演练结束5天</div>
        <accident v-if="curChart===1" :size="2.5"></accident>
        <training v-else-if="curChart===2" :size="2.5"></training>
        <risk v-else-if="curChart===3" :month="month" :size="2.5"></risk>
        <spi v-else-if="curChart===4" :size="2"></spi>
        <accident v-if="curChart===1" :size="2.5" ref="accRef"></accident>
        <training v-else-if="curChart===2" :size="2.5" ref="trainRef"></training>
        <risk v-else-if="curChart===3" :size="2.5" ref="riskRef"></risk>
        <spi v-else-if="curChart===4" :size="2" ref="spiRef"></spi>
        <educate v-else-if="curChart===5" :size="2.5"></educate>
        <danger v-else-if="curChart===6" :size="2.5"></danger>
        <danger v-else-if="curChart===6" :size="2.5" ref="danRef"></danger>
        <profession v-else-if="curChart===7" :size="2.5"></profession>
        <message v-else-if="curChart===8" :size="2"></message>
        <monitor v-else-if="curChart===9" :size="2.5"></monitor>
@@ -28,39 +27,18 @@
      <div class="chart-right">
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
        <div class="charts-des">
          <div class="des-tit">
            <div v-if="curChart===1">2022年度事故等级分布与影响一览</div>
            <div v-else-if="curChart===2">应急演练概况</div>
            <div v-else-if="curChart===3">隐患影响等级分布详情</div>
            <div v-else-if="curChart===4">2022年度事企业SPI趋势</div>
            <div v-else-if="curChart===5">教育培训情况汇总</div>
            <div v-else-if="curChart===6">隐患等级分布与隐患整改率</div>
            <div v-else-if="curChart===7">人员持证上岗情况</div>
            <div v-else-if="curChart===8">预警消息SPI报告-2022年8月</div>
            <div v-else-if="curChart===9">监控列表</div>
            <div v-else>当前应急物资储备情况（总）</div>
            <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
          </div>
          <div v-if="curChart===2" class="des-main">
            <div>
              <h4>距上次【<span>{{trainDesc.title}}</span>】应急演练结束<span>{{trainDesc.total}}</span>天</h4>
              <h4>
                应急演练分月情况汇总：
              </h4>
              <p v-for="(item,index) in trainDesc.list" :key="index">{{item.month}}应急演练次数：{{item.num}}次</p>
            </div>
          </div>
          <div v-else class="des-main">
            <div v-for="(item,index) in accidentDesc" :key="index">
              <h4><span>{{item.title}}</span>共计：<span>{{item.total}}</span>起</h4>
              <h4>
                事故影响
              </h4>
              <p>{{item.desc}}</p>
            </div>
          </div>
          <acc-desc v-if="curChart===1" :content="accRef"></acc-desc>
          <train-desc v-else-if="curChart===2" :content="trainRef"></train-desc>
          <risk-desc v-else-if="curChart===3" :content="riskRef"></risk-desc>
          <spi-desc v-else-if="curChart===4" :content="spiRef"></spi-desc>
          <edu-desc v-else-if="curChart===5" :content="eduRef"></edu-desc>
          <dan-desc v-else-if="curChart===6" :content="danRef"></dan-desc>
          <pro-desc v-else-if="curChart===7" :content="proRef"></pro-desc>
          <msg-desc v-else-if="curChart===8" :content="msgRef"></msg-desc>
          <mon-desc v-else-if="curChart===9" :content="monRef"></mon-desc>
          <sto-desc v-else :content="stoRef"></sto-desc>
        </div>
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;"/>
      </div>
    </div>
  </div>
@@ -68,7 +46,17 @@

<script lang="ts">
  import screenfull from 'screenfull';
  import { toRefs, reactive, ref, onMounted, defineComponent, defineAsyncComponent, nextTick, onUnmounted } from 'vue';
  import {
    toRefs,
    reactive,
    ref,
    onMounted,
    defineComponent,
    defineAsyncComponent,
    nextTick,
    onUnmounted,
    watchEffect
  } from 'vue';
  import { ElTable } from 'element-plus';
  import { FormInstance, FormRules, ElMessage } from 'element-plus';
  import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts';
@@ -84,22 +72,40 @@
    isScreenfull: boolean;
    curChart: number | null;
    lineColor: Array<string>;
    accidentDesc: Array<any>;
    trainDesc: Object;
    accRef: Object;
    trainRef: Object;
    riskRef: Object;
    spiRef: Object;
    eduRef: Object;
    danRef: Object;
    proRef: Object;
    msgRef: Object;
    monRef: Object;
    stoRef: Object
  }
  export default defineComponent({
    name: 'warningPage',
    components: {
      accident: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/accident.vue')),
      accDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/acc.vue')),
      training: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/training.vue')),
      trainDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/train.vue')),
      spi: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/SPI.vue')),
      spiDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/spi.vue')),
      risk: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/risk.vue')),
      riskDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/risk.vue')),
      educate: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/educate.vue')),
      eduDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/edu.vue')),
      danger: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/danger.vue')),
      danDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/dan.vue')),
      profession: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/profession.vue')),
      proDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/pro.vue')),
      message: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/message.vue')),
      msgDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/msg.vue')),
      monitor: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/monitor.vue')),
      stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue'))
      monDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/mon.vue')),
      stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue')),
      stoDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/sto.vue'))
    },
    setup() {
      const screenThemes = useScreenTheme()
@@ -109,71 +115,16 @@
        isScreenfull: false,
        curChart: null,
        lineColor: ['#11FEEE'],
        accidentDesc:[
          {
            title: '特别重大事故',
            total: 10,
            desc: '死亡人数：0人； 重伤人数：2人； 轻伤人数：3人； 直接经济损失：180.61万元'
          },
          {
            title: '重大事故',
            total: 20,
            desc: '死亡人数：1人； 重伤人数：6人； 轻伤人数：0人； 直接经济损失：160.61万元'
          },
          {
            title: '较大事故',
            total: 100,
            desc: '死亡人数：0人； 重伤人数：0人； 轻伤人数：3人； 直接经济损失：190.61万元'
          },
          {
            title: '一般事故',
            total: 130,
            desc: '死亡人数：0人； 重伤人数：0人； 轻伤人数：0人； 直接经济损失：180.61万元'
          },
          {
            title: '未遂事故',
            total: 150,
            desc: '死亡人数：0人； 重伤人数：0人； 轻伤人数：0人； 直接经济损失：9万元'
          }
        ],
        trainDesc:{
          title: '公司级',
          total: 5,
          list: [
            {
              month: '一月份',
              num: 23
            },
            {
              month: '二月份',
              num: 76
            },
            {
              month: '三月份',
              num: 152
            },
            {
              month: '四月份',
              num: 200
            },
            {
              month: '五月份',
              num: 49
            },
            {
              month: '六月份',
              num: 83
            },
            {
              month: '七月份',
              num: 102
            },
            {
              month: '八月份',
              num: 99
            }
          ]
        }
        accRef: {},
        trainRef: {},
        riskRef: {},
        spiRef: {},
        eduRef: {},
        danRef: {},
        proRef: {},
        msgRef: {},
        monRef: {},
        stoRef: {}
      });

      // 页面载入时执行方法
@@ -184,6 +135,9 @@
        getTheme()
      });

      watchEffect(() => {

      })

      // 全屏
      const onScreenfullClick = () => {
@@ -209,6 +163,9 @@
          state.lineColor = ['#333','#ccc']
        }
      }
      watchEffect(() => {

      })
      // 返回上一页
      const goBack = () => {
        window.history.go(-1);
@@ -296,9 +253,9 @@
        height: 100%;
        .charts-des{
          height: 90%;
          padding: 4%;
          background: url("../../../../assets/warningScreen/pagebg-r.png") no-repeat center;
          background-size: 100% 100%;
          padding: 4%;

          .des-tit{
            width: 100%;
@@ -417,9 +374,9 @@
        height: 100%;
        .charts-des{
          height: 90%;
          padding: 4%;
          background: url("../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center;
          background-size: 100% 100%;
          padding: 4%;

          .des-tit{
            width: 100%;

 src/views/specialWorkSystem/specialIndex/components/videoDetail.vue

@@ -1,5 +1,44 @@
<template>
  <el-dialog v-model="videoDetailDialog" title="实时监控" width="80%" center>
  <el-dialog v-model="videoDetailDialog" title="动火作业编号00001 实时监测详情" width="80%" center>
    <div style="margin-bottom: 20px">
      <el-button type="warning">人工录入警报信息</el-button>
    </div>
    <div class="info">
<!--      <video class="video-cont" autoplay src="https://www.bilibili.com/video/BV1UM411s7Ey/?vd_source=7700e61a97bad6ca1f7c0ecb9768d682" controls></video>-->
      <iframe class="video-cont" src="http://36.108.169.10:8088/808gps/open/player/video.html?lang=zh&devIdno=21125705363&&account=gtxh&password=000000"></iframe>
      <div class="right-info">
        <div class="info-item">
          <div class="info-tit">
            基础信息
          </div>
          <div class="content">
            <div>作业编号: <span>0000001</span></div>
            <div>作业部门: <span>有机化工</span></div>
            <div>作业人员: <span>王大壮（持证）</span></div>
            <div>开始时间: <span>2023-03-09 14:00:45</span></div>
            <div>结束时间: <span>2023-03-09 17:05:45</span></div>
            <div class="checkBtn">查看作业票</div>
            <div class="checkBtn">查看审批流</div>
          </div>
        </div>
        <div class="info-item">
          <div class="info-tit">
            警报信息
          </div>
          <div class="content">
            <div>设备IA自动识别警报:
              <div>无</div>
            </div>
            <div>人工录入警报信息:
              <div>无</div>
            </div>
            <div>现场检查不合格项:
              <div>1、除动火人和监护人有无其他人员在场：有信息化人员在场</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </el-dialog>
</template>
@@ -40,5 +79,49 @@
</script>

<style scoped lang="scss">
  .info{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .video-cont{
      width: calc(70% - 20px);
      height: 60vh;
      margin-right: 20px;
    }
    .right-info{
      width: 30%;

      .info-item{
        width: 100%;
        margin-bottom: 10px;

        &:last-of-type{
          margin-bottom: 0;
        }

        .info-tit{
          width: 100%;
          padding: 6px 0;
          text-align: center;
          background: #59ddf7;
          border-radius: 4px;
          margin-bottom: 10px;
        }
        .content{
          width: 100%;
          div{
            width: 100%;
            font-size: 14px;
            margin-bottom: 4px;
          }
          .checkBtn{
            color: #409eff;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>

 src/views/specialWorkSystem/specialIndex/index.vue

@@ -1,261 +1,261 @@
<template>
    <div class="home-container" :class="isFull==true?'container':''" id="bigScreen">
      <div class="full">
        <el-button v-if="isFull==false" type="text" style="height: 34px" @click="toFullscreen">
          <el-icon style="vertical-align: middle">
            <FullScreen />
          </el-icon>
          <span style="vertical-align: middle">全屏</span>
        </el-button>
        <el-button v-else type="text" style="height: 34px" @click="toFullscreen">
          <el-icon style="vertical-align: middle">
            <Close />
          </el-icon>
          <span style="vertical-align: middle">退出全屏</span>
        </el-button>
  <div class="home-container" :class="isFull==true?'container':''" id="bigScreen">
    <div class="full">
      <el-button v-if="isFull==false" type="text" style="height: 34px" @click="toFullscreen">
        <el-icon style="vertical-align: middle">
          <FullScreen />
        </el-icon>
        <span style="vertical-align: middle">全屏</span>
      </el-button>
      <el-button v-else type="text" style="height: 34px" @click="toFullscreen">
        <el-icon style="vertical-align: middle">
          <Close />
        </el-icon>
        <span style="vertical-align: middle">退出全屏</span>
      </el-button>
    </div>
    <div class="topChart">
      <div class="chart-item">
        <div class="chart-tit">
          <span class="tit">八大作业各分类分布图</span>
          <div class="filter-part filter-part2">
            <el-cascader :teleported="false" v-model="chartSearch1.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
          </div>
        </div>
        <div class="chart" :id="zyfb"></div>
        <el-radio-group v-model="chartSearch1.period" size="small">
          <el-radio label="week" border>近7天</el-radio>
          <el-radio label="month" border>近30天</el-radio>
          <el-radio label="season" border>近90天</el-radio>
          <el-radio label="year" border>近一年</el-radio>
        </el-radio-group>
      </div>
        <div class="topChart">
          <div class="chart-item">
            <div class="chart-tit">
              <span class="tit">八大作业各分类分布图</span>
              <div class="filter-part filter-part2">
                <el-cascader :teleported="false" v-model="chartSearch1.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
              </div>
            </div>
            <div class="chart" :id="zyfb"></div>
            <el-radio-group v-model="chartSearch1.period" size="small">
              <el-radio label="week" border>近7天</el-radio>
              <el-radio label="month" border>近30天</el-radio>
              <el-radio label="season" border>近90天</el-radio>
              <el-radio label="year" border>近一年</el-radio>
            </el-radio-group>
          </div>
          <div class="chart-item">
            <div class="chart-tit">
              <span class="tit">各事业部关联作业分析</span>
              <div class="filter-part">
                <el-cascader :teleported="false" v-model="chartSearch2.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
                <el-select v-model="chartSearch2.type" size="small" :teleported="false">
                  <el-option
                      v-for="item in workType1"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  />
                </el-select>
              </div>
            </div>
            <div class="chart" :id="slfx"></div>
      <div class="chart-item">
        <div class="chart-tit">
          <span class="tit">各事业部关联作业分析</span>
          <div class="filter-part">
            <el-cascader :teleported="false" v-model="chartSearch2.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
            <el-select v-model="chartSearch2.type" size="small" :teleported="false">
              <el-option
                  v-for="item in workType1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </div>
        </div>
        <div class="topChart">
          <div class="chart-item">
            <div class="chart-tit">
              <span class="tit">关联作业趋势图</span>
              <div class="filter-part filter-part2">
                <el-cascader :teleported="false" v-model="chartSearch3.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
              </div>
            </div>
            <div class="chart" :id="zyqs"></div>
        <div class="chart" :id="slfx"></div>
      </div>
    </div>
    <div class="topChart">
      <div class="chart-item">
        <div class="chart-tit">
          <span class="tit">关联作业趋势图</span>
          <div class="filter-part filter-part2">
            <el-cascader :teleported="false" v-model="chartSearch3.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
          </div>
          <div class="chart-item">
            <div class="chart-tit">
              <span class="tit">异常警报关联人</span>
              <div class="filter-part">
                <el-switch
                    v-model="chartSearch4.type"
                    inline-prompt
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #13ce66"
                    active-text="作业人"
                    inactive-text="监护人"
        </div>
        <div class="chart" :id="zyqs"></div>
      </div>
      <div class="chart-item">
        <div class="chart-tit">
          <span class="tit">异常警报关联人</span>
          <div class="filter-part">
            <el-switch
                v-model="chartSearch4.type"
                inline-prompt
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #13ce66"
                active-text="作业人"
                inactive-text="监护人"
            />
            <el-select :teleported="false" v-model="chartSearch4.period" size="small">
              <el-option label="近7天" value="week"/>
              <el-option label="近30天" value="month"/>
              <el-option label="近90天" value="season"/>
              <el-option label="近1年" value="year"/>
            </el-select>
            <el-select :teleported="false" v-model="chartSearch4.workType" size="small">
              <el-option
                  v-for="item in workType1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </div>
        </div>
        <div class="chart">
          <el-table ref="multipleTableRef" :data="warningData" style="width: 100%" stripe border :header-cell-style="{ background: '#fafafa' }">
            <el-table-column property="name" label="姓名" align="center"/>
            <el-table-column property="dep" label="所属部门" align="center"/>
            <el-table-column property="warning" label="异常报警次数" align="center"/>
            <el-table-column property="role" label="角色" align="center"/>
            <el-table-column property="isCard" label="是否持证" align="center">
              <template #default="scope">
                <span>{{scope.row.isCard == 1?'是':'否'}}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="text" size="small" style="margin-top: 10px">所有记录>></el-button>
        </div>
        <!--            <div class="chart" :id="slfx"></div>-->
      </div>
    </div>
    <div>
      <div class="homeCard">
        <el-row>
          <el-col :span="5" style="display:flex;align-items: center">
            <span style="white-space: nowrap">作业类型：</span>
            <div class="grid-content topInfo">
              <el-select :teleported="false" v-model="searchWord" size="small">
                <el-option
                    v-for="item in workType"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
                <el-select :teleported="false" v-model="chartSearch4.period" size="small">
                  <el-option label="近7天" value="week"/>
                  <el-option label="近30天" value="month"/>
                  <el-option label="近90天" value="season"/>
                  <el-option label="近1年" value="year"/>
                </el-select>
                <el-select :teleported="false" v-model="chartSearch4.workType" size="small">
                  <el-option
                      v-for="item in workType1"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  />
                </el-select>
              </el-select>
            </div>
          </el-col>
          <el-col :span="5" style="display:flex;align-items: center">
            <span style="white-space: nowrap">作业状态：</span>
            <div class="grid-content topInfo">
              <el-select :teleported="false" v-model="searchStatus" size="small">
                <el-option
                    v-for="item in workStatus"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                />
              </el-select>
            </div>
          </el-col>
          <el-col :span="5" style="display:flex;align-items: center">
            <span style="white-space: nowrap">作业部门：</span>
            <div class="grid-content topInfo">
              <el-cascader :teleported="false" size="small" v-model="searchDep" :options="departmentList" :props="casProps" :show-all-levels="false"/>
            </div>
          </el-col>
          <el-col :span="6" style="display:flex;align-items: center;">
            <span style="white-space: nowrap;margin-left: 20px">申请时间：</span>
            <div class="grid-content topInfo">
              <el-date-picker
                  v-model="searchDate"
                  size="small"
                  :teleported="false"
                  type="daterange"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
              />
            </div>
          </el-col>
          <el-button type="primary" style="margin-left: 20px" @click="searchRecord" size="small">查询</el-button>
          <el-button plain @click="clearSearch" size="small">重置</el-button>
        </el-row>
        <div class="main-card">
          <el-row class="cardTop" style="justify-content: space-between">
            <el-col :span="2" class="mainCardBtn">
              <el-button type="primary" :icon="Plus" size="default" @click="toApply()">新作业申请</el-button>
            </el-col>
            <el-col :span="22" style="display: flex;justify-content: end;align-items: center">
              <div class="top-info">
                <el-icon :size="18" color="#F3001E" style="margin-right: 4px"><BellFilled /></el-icon>
                作业编号
                <div v-if="unchecked != 0">
                  <el-tooltip
                      class="box-item"
                      effect="light"
                      content="查看预警详情"
                      placement="bottom-start"
                  ><span>123456</span></el-tooltip>
                </div>
                可燃气体浓度超过18%
                ,请及时处理！
              </div>
            </div>
            <div class="chart">
              <el-table ref="multipleTableRef" :data="warningData" style="width: 100%" stripe border :header-cell-style="{ background: '#fafafa' }">
                <el-table-column property="name" label="姓名" align="center"/>
                <el-table-column property="dep" label="所属部门" align="center"/>
                <el-table-column property="warning" label="异常报警次数" align="center"/>
                <el-table-column property="role" label="角色" align="center"/>
                <el-table-column property="isCard" label="是否持证" align="center">
                  <template #default="scope">
                    <span>{{scope.row.isCard == 1?'是':'否'}}</span>
                  </template>
                </el-table-column>
              </el-table>
              <el-button type="text" size="small" style="margin-top: 10px">所有记录>></el-button>
            </div>
<!--            <div class="chart" :id="slfx"></div>-->
              <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()" />
            </el-col>
          </el-row>
          <el-table ref="multipleTableRef" stripe border :data="workData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
            <el-table-column property="num" label="作业证编号" align="center"/>
            <el-table-column property="dep" label="部门" align="center"/>
            <el-table-column property="applyer" label="申请人" align="center"/>
            <el-table-column property="worker" label="作业人" align="center"/>
            <el-table-column property="type" label="作业类型" align="center"/>
            <el-table-column property="level" label="作业等级" align="center"/>
            <el-table-column property="applyTime" label="申请时间" align="center"/>
            <el-table-column property="startTime" label="作业开始时间" align="center"/>
            <el-table-column property="endTime" label="作业结束时间" align="center"/>
            <el-table-column label="作业状态" align="center">
              <template #default="scope">
                <el-tag>{{ scope.row.status==0?'进行中':scope.row.status==1?'作业中止':scope.row.status==2?'作业结束验收': '作业完成'}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column property="reason" label="中止原因" align="center"/>
            <el-table-column label="安全预警" align="center">
              <template #default="scope">
                <el-tag :type="scope.row.warning==0?'success':(scope.row.warning==1||scope.row.warning==2)?'warning':'danger'">{{ scope.row.warning==0?'正常':'报警' }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column property="message" label="报警信息" align="center">
              <template #default="scope">
                <el-button type="text" size="small" v-if="scope.row.message == 1">查看</el-button>
                <span v-else>无</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="250">
              <template #default="scope">
                <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看作业票</el-button>
                <el-button link type="primary" size="small" :icon="FolderChecked" @click="handleReview(scope.row)">验收</el-button>
                <el-button link type="primary" size="small" :icon="VideoPlay" @click="openVideo(scope.row)">查看实时监控</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pageBtn">
            <el-pagination v-model:currentPage="pageIndex1" v-model:page-size="pageSize1" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize1" @size-change="handleSizeChange1" @current-change="handleCurrentChange1" />
          </div>
        </div>
        <div>
            <div class="homeCard">
                <el-row>
                  <el-col :span="5" style="display:flex;align-items: center">
                    <span style="white-space: nowrap">作业类型：</span>
                    <div class="grid-content topInfo">
                      <el-select :teleported="false" v-model="searchWord" size="small">
                        <el-option
                            v-for="item in workType"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        />
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :span="5" style="display:flex;align-items: center">
                    <span style="white-space: nowrap">作业状态：</span>
                    <div class="grid-content topInfo">
                      <el-select :teleported="false" v-model="searchStatus" size="small">
                        <el-option
                            v-for="item in workStatus"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value"
                        />
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :span="5" style="display:flex;align-items: center">
                    <span style="white-space: nowrap">作业部门：</span>
                    <div class="grid-content topInfo">
                      <el-cascader :teleported="false" size="small" v-model="searchDep" :options="departmentList" :props="casProps" :show-all-levels="false"/>
                    </div>
                  </el-col>
                  <el-col :span="6" style="display:flex;align-items: center;">
                    <span style="white-space: nowrap;margin-left: 20px">申请时间：</span>
                    <div class="grid-content topInfo">
                      <el-date-picker
                          v-model="searchDate"
                          size="small"
                          :teleported="false"
                          type="daterange"
                          unlink-panels
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
                      />
                    </div>
                  </el-col>
                  <el-button type="primary" style="margin-left: 20px" @click="searchRecord" size="small">查询</el-button>
                  <el-button plain @click="clearSearch" size="small">重置</el-button>
                </el-row>
                <div class="main-card">
                    <el-row class="cardTop" style="justify-content: space-between">
                        <el-col :span="2" class="mainCardBtn">
                            <el-button type="primary" :icon="Plus" size="default" @click="toApply()">新作业申请</el-button>
                        </el-col>
                        <el-col :span="22" style="display: flex;justify-content: end;align-items: center">
                          <div class="top-info">
                            <el-icon :size="18" color="#F3001E" style="margin-right: 4px"><BellFilled /></el-icon>
                            作业编号
                            <div v-if="unchecked != 0">
                              <el-tooltip
                                class="box-item"
                                effect="light"
                                content="查看预警详情"
                                placement="bottom-start"
                            ><span>123456</span></el-tooltip>
                            </div>
                            可燃气体浓度超过18%
                            ,请及时处理！
                          </div>
                          <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()" />
                        </el-col>
                    </el-row>
                    <el-table ref="multipleTableRef" stripe border :data="workData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
                        <el-table-column property="num" label="作业证编号" align="center"/>
                        <el-table-column property="dep" label="部门" align="center"/>
                        <el-table-column property="applyer" label="申请人" align="center"/>
                        <el-table-column property="worker" label="作业人" align="center"/>
                        <el-table-column property="type" label="作业类型" align="center"/>
                        <el-table-column property="level" label="作业等级" align="center"/>
                        <el-table-column property="applyTime" label="申请时间" align="center"/>
                        <el-table-column property="startTime" label="作业开始时间" align="center"/>
                        <el-table-column property="endTime" label="作业结束时间" align="center"/>
                        <el-table-column label="作业状态" align="center">
                            <template #default="scope">
                                <el-tag>{{ scope.row.status==0?'进行中':scope.row.status==1?'作业中止':scope.row.status==2?'作业结束验收': '作业完成'}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column property="reason" label="中止原因" align="center"/>
                        <el-table-column label="安全预警" align="center">
                          <template #default="scope">
                            <el-tag :type="scope.row.warning==0?'success':(scope.row.warning==1||scope.row.warning==2)?'warning':'danger'">{{ scope.row.warning==0?'正常':'报警' }}</el-tag>
                          </template>
                        </el-table-column>
                      <el-table-column property="message" label="报警信息" align="center">
                        <template #default="scope">
                          <el-button type="text" size="small" v-if="scope.row.message == 1">查看</el-button>
                          <span v-else>无</span>
                        </template>
                      </el-table-column>
                        <el-table-column fixed="right" label="操作" align="center" width="250">
                            <template #default="scope">
                              <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看作业票</el-button>
                              <el-button link type="primary" size="small" :icon="FolderChecked" @click="handleReview(scope.row)">验收</el-button>
                              <el-button link type="primary" size="small" :icon="VideoPlay" @click="openVideo(scope.row)">查看实时监控</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pageBtn">
                        <el-pagination v-model:currentPage="pageIndex1" v-model:page-size="pageSize1" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize1" @size-change="handleSizeChange1" @current-change="handleCurrentChange1" />
                    </div>
                </div>
            </div>
        </div>
        <el-dialog v-model="dialogDetails" title="作业申请详情" center>
            <fire v-if="dialogType == 1" :details = details></fire>
            <space v-else-if="dialogType == 2" :details = details></space>
            <hoist v-else-if="dialogType == 3" :details = details></hoist>
            <ground v-else-if="dialogType == 4" :details = details></ground>
            <broken v-else-if="dialogType == 5" :details = details></broken>
            <height v-else-if="dialogType == 6" :details = details></height>
            <power v-else-if="dialogType == 7" :details = details></power>
            <plate v-else :details = details></plate>
            <template #footer>
      </div>
    </div>
    <el-dialog v-model="dialogDetails" title="作业申请详情" center>
      <fire v-if="dialogType == 1" :details = details></fire>
      <space v-else-if="dialogType == 2" :details = details></space>
      <hoist v-else-if="dialogType == 3" :details = details></hoist>
      <ground v-else-if="dialogType == 4" :details = details></ground>
      <broken v-else-if="dialogType == 5" :details = details></broken>
      <height v-else-if="dialogType == 6" :details = details></height>
      <power v-else-if="dialogType == 7" :details = details></power>
      <plate v-else :details = details></plate>
      <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="dialogDetails = false"
                >确认</el-button
                >
              </span>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogReview" title="填报验收意见" center>
          <el-form ref="reviewFormRef" :model="reviewForm" :rules="reviewRules" label-width="120px">
            <el-form-item label="填报验收意见：" prop="advice">
              <el-input
                  v-model="reviewForm.advice"
                  :autosize="{ minRows: 4, maxRows: 10 }"
                  type="textarea"
                  placeholder="请填写验收意见"
              />
            </el-form-item>
          </el-form>
          <template #footer>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogReview" title="填报验收意见" center>
      <el-form ref="reviewFormRef" :model="reviewForm" :rules="reviewRules" label-width="120px">
        <el-form-item label="填报验收意见：" prop="advice">
          <el-input
              v-model="reviewForm.advice"
              :autosize="{ minRows: 4, maxRows: 10 }"
              type="textarea"
              placeholder="请填写验收意见"
          />
        </el-form-item>
      </el-form>
      <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="submitReview(reviewFormRef)">提交验收</el-button>
              </span>
          </template>
        </el-dialog>
        <video-detail ref="videoRef"></video-detail>
    </div>
      </template>
    </el-dialog>
    <video-detail ref="videoRef"></video-detail>
  </div>
</template>

<script lang="ts">
@@ -280,50 +280,50 @@

// 定义接口来定义对象的类型
interface stateType {
    workData: Array<any>;
    workTimeList: Array<string>;
    multipleSelection: Array<any>;
    casProps: {};
    approveInfo: Object;
    dialogDetails: boolean;
    dialogReview: boolean;
    pageIndex1: number;
    pageSize1: number;
    chosenIndex: null | number;
    searchWord: number | null;
    searchStatus: number | null;
    chartSearch1: object;
    chartSearch2: object;
    chartSearch3: object;
    chartSearch4: object;
    searchDep2: number | null;
    searchDep: number | null;
    searchDate: Array<any>,
    totalSize1: number;
    details: {};
    workType: Array<type>;
    workType1: Array<type>;
    dialogType: number | null;
    departmentList: Array<any>;
    departmentRecursionList: Array<DepartmentState>;
    workStatus: Array<status>;
    reviewForm: object;
    reviewRules: object;
    warningData: Array<any>;
    isFull:boolean;
    themeColor:string
  workData: Array<any>;
  workTimeList: Array<string>;
  multipleSelection: Array<any>;
  casProps: {};
  approveInfo: Object;
  dialogDetails: boolean;
  dialogReview: boolean;
  pageIndex1: number;
  pageSize1: number;
  chosenIndex: null | number;
  searchWord: number | null;
  searchStatus: number | null;
  chartSearch1: object;
  chartSearch2: object;
  chartSearch3: object;
  chartSearch4: object;
  searchDep2: number | null;
  searchDep: number | null;
  searchDate: Array<any>,
  totalSize1: number;
  details: {};
  workType: Array<type>;
  workType1: Array<type>;
  dialogType: number | null;
  departmentList: Array<any>;
  departmentRecursionList: Array<DepartmentState>;
  workStatus: Array<status>;
  reviewForm: object;
  reviewRules: object;
  warningData: Array<any>;
  isFull:boolean;
  themeColor:string
}
interface type {
    id: number;
    name: string;
  id: number;
  name: string;
}
interface status {
  name: string
  value: number
}
interface DepartmentState {
    depId: number;
    depName: string;
  depId: number;
  depName: string;
}
interface User {
  name: string;
@@ -331,739 +331,738 @@
  info: string;
}
export default defineComponent({
    name: 'specialIndex',
    components: {
      VideoDetail,
        fire: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/fireLog.vue')),
        space: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/spaceLog.vue')),
        hoist: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/hoistLog.vue')),
        ground: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/groundLog.vue')),
        broken: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/brokenLog.vue')),
        height: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/heightLog.vue')),
        power: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/powerLog.vue')),
        plate: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/plateLog.vue'))
    },
    setup() {
        const userInfo = useUserInfo();
        const { userInfos } = storeToRefs(userInfo);
        const router = useRouter();
        const reviewFormRef = ref<FormInstance>()
        const zyfb = ref("eChartZyfb" + Date.now() + Math.random())
        const slfx = ref("eChartSlfx" + Date.now() + Math.random())
        const zyqs = ref("eChartZyqs" + Date.now() + Math.random())
        const videoRef = ref();
        const state = reactive<stateType>({
            pageIndex1: 1,
            pageSize1: 10,
            totalSize1: 0,
            dialogType: null,
            dialogReview: false,
            departmentList: [],
            departmentRecursionList: [],
            chosenIndex: null,
            searchWord: null,
            searchStatus: null,
            chartSearch1: {
              searchDep: null,
              startTime: '2023-03-08',
              endTime: '2023-02-08',
              period: 'month'
            },
            chartSearch2: {
              searchDep: null,
              type: 0
            },
            chartSearch3: {
              searchDep: null
            },
            chartSearch4: {
              searchDep: null
            },
            searchDep2: null,
            searchDep: null,
            searchDate: [],
            workData: [
              {
                num: '111',
                dep: '部门1',
                applyer: '张凤',
                worker: '李羽飞',
                type: '动火作业',
                level: '一级',
                applyTime: '2023-03-08',
                startTime: '2023-03-08',
                endTime: '2023-03-08',
                status: 0,
                reason: '分析超时',
                warning: 0,
                message: 1
              },
              {
                num: '222',
                dep: '部门2',
                applyer: '张凤',
                worker: '李羽飞',
                type: '动土作业',
                level: '一级',
                applyTime: '2023-03-08',
                startTime: '2023-03-08',
                endTime: '2023-03-08',
                status: 1,
                reason: '分析超时',
                warning: 1,
                message: 0
              },
              {
                num: '333',
                dep: '部门3',
                applyer: '张凤',
                worker: '李羽飞',
                type: '动火作业',
                level: '一级',
                applyTime: '2023-03-08',
                startTime: '2023-03-08',
                endTime: '2023-03-08',
                status: 2,
                reason: '分析超时',
                warning: 2,
                message: 0
              },
              {
                num: '222',
                dep: '部门2',
                applyer: '张凤',
                worker: '李羽飞',
                type: '动土作业',
                level: '一级',
                applyTime: '2023-03-08',
                startTime: '2023-03-08',
                endTime: '2023-03-08',
                status: 1,
                reason: '分析超时',
                warning: 1,
                message: 0
              },
              {
                num: '333',
                dep: '部门3',
                applyer: '张凤',
                worker: '李羽飞',
                type: '动火作业',
                level: '一级',
                applyTime: '2023-03-08',
                startTime: '2023-03-08',
                endTime: '2023-03-08',
                status: 2,
                reason: '分析超时',
                warning: 2,
                message: 0
              }
            ],
            isFull: false,
            themeColor: '#333',
            workTimeList: [],
            multipleSelection: [],
            approveInfo: {
                approvalSteps: [],
                operators: []
            },
            casProps: {
                expandTrigger: 'hover',
                emitPath: false,
                value: 'depId',
                label: 'depName',
                checkStrictly: true
            },
            dialogDetails: false,
            details: {},
            workType1: [
              { id: 0, name: '所有作业' },
              { id: 1, name: '动火作业' },
              { id: 2, name: '受限空间作业' },
              { id: 3, name: '吊装作业' },
              { id: 4, name: '动土作业' },
              { id: 5, name: '断路作业' },
              { id: 6, name: '高处作业' },
              { id: 7, name: '临时用电作业' },
              { id: 8, name: '盲板抽堵作业' }
            ],
            workType: [
                { id: 1, name: '动火作业' },
                { id: 2, name: '受限空间作业' },
                { id: 3, name: '吊装作业' },
                { id: 4, name: '动土作业' },
                { id: 5, name: '断路作业' },
                { id: 6, name: '高处作业' },
                { id: 7, name: '临时用电作业' },
                { id: 8, name: '盲板抽堵作业' }
            ],
            workStatus: [
              {
                name: '作业进行中',
                value: 0
              },
              {
                name: '作业终止',
                value: 1
              },
              {
                name: '作业结束待验收',
                value: 2
              },
              {
                name: '作业完成',
                value: 3
              }
            ],
            warningData: [
              {
                name: '黄公子',
                dep: '有机事业部',
                warning: 69,
                role: '作业人',
                isCard: 1
              },
              {
                name: '李飞飞',
                dep: '有机事业部',
                warning: 51,
                role: '监护人',
                isCard: 0
              },
              {
                name: '黄公子',
                dep: '有机事业部',
                warning: 69,
                role: '作业人',
                isCard: 1
              }
            ],
            reviewForm: {
              advice: ''
            },
            reviewRules:{
              advice: [{ required: true, message: '请填写验收意见', trigger: 'blur' }]
            }
  name: 'specialIndex',
  components: {
    VideoDetail,
    fire: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/fireLog.vue')),
    space: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/spaceLog.vue')),
    hoist: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/hoistLog.vue')),
    ground: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/groundLog.vue')),
    broken: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/brokenLog.vue')),
    height: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/heightLog.vue')),
    power: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/powerLog.vue')),
    plate: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/plateLog.vue'))
  },
  setup() {
    const userInfo = useUserInfo();
    const { userInfos } = storeToRefs(userInfo);
    const router = useRouter();
    const reviewFormRef = ref<FormInstance>()
    const zyfb = ref("eChartZyfb" + Date.now() + Math.random())
    const slfx = ref("eChartSlfx" + Date.now() + Math.random())
    const zyqs = ref("eChartZyqs" + Date.now() + Math.random())
    const videoRef = ref();
    const state = reactive<stateType>({
      pageIndex1: 1,
      pageSize1: 10,
      totalSize1: 0,
      dialogType: null,
      dialogReview: false,
      departmentList: [],
      departmentRecursionList: [],
      chosenIndex: null,
      searchWord: null,
      searchStatus: null,
      chartSearch1: {
        searchDep: null,
        startTime: '2023-03-08',
        endTime: '2023-02-08',
        period: 'month'
      },
      chartSearch2: {
        searchDep: null,
        type: 0
      },
      chartSearch3: {
        searchDep: null
      },
      chartSearch4: {
        searchDep: null
      },
      searchDep2: null,
      searchDep: null,
      searchDate: [],
      workData: [
        {
          num: '111',
          dep: '部门1',
          applyer: '张凤',
          worker: '李羽飞',
          type: '动火作业',
          level: '一级',
          applyTime: '2023-03-08',
          startTime: '2023-03-08',
          endTime: '2023-03-08',
          status: 0,
          reason: '分析超时',
          warning: 0,
          message: 1
        },
        {
          num: '222',
          dep: '部门2',
          applyer: '张凤',
          worker: '李羽飞',
          type: '动土作业',
          level: '一级',
          applyTime: '2023-03-08',
          startTime: '2023-03-08',
          endTime: '2023-03-08',
          status: 1,
          reason: '分析超时',
          warning: 1,
          message: 0
        },
        {
          num: '333',
          dep: '部门3',
          applyer: '张凤',
          worker: '李羽飞',
          type: '动火作业',
          level: '一级',
          applyTime: '2023-03-08',
          startTime: '2023-03-08',
          endTime: '2023-03-08',
          status: 2,
          reason: '分析超时',
          warning: 2,
          message: 0
        },
        {
          num: '222',
          dep: '部门2',
          applyer: '张凤',
          worker: '李羽飞',
          type: '动土作业',
          level: '一级',
          applyTime: '2023-03-08',
          startTime: '2023-03-08',
          endTime: '2023-03-08',
          status: 1,
          reason: '分析超时',
          warning: 1,
          message: 0
        },
        {
          num: '333',
          dep: '部门3',
          applyer: '张凤',
          worker: '李羽飞',
          type: '动火作业',
          level: '一级',
          applyTime: '2023-03-08',
          startTime: '2023-03-08',
          endTime: '2023-03-08',
          status: 2,
          reason: '分析超时',
          warning: 2,
          message: 0
        }
      ],
      isFull: false,
      themeColor: '#333',
      workTimeList: [],
      multipleSelection: [],
      approveInfo: {
        approvalSteps: [],
        operators: []
      },
      casProps: {
        expandTrigger: 'hover',
        emitPath: false,
        value: 'depId',
        label: 'depName',
        checkStrictly: true
      },
      dialogDetails: false,
      details: {},
      workType1: [
        { id: 0, name: '所有作业' },
        { id: 1, name: '动火作业' },
        { id: 2, name: '受限空间作业' },
        { id: 3, name: '吊装作业' },
        { id: 4, name: '动土作业' },
        { id: 5, name: '断路作业' },
        { id: 6, name: '高处作业' },
        { id: 7, name: '临时用电作业' },
        { id: 8, name: '盲板抽堵作业' }
      ],
      workType: [
        { id: 1, name: '动火作业' },
        { id: 2, name: '受限空间作业' },
        { id: 3, name: '吊装作业' },
        { id: 4, name: '动土作业' },
        { id: 5, name: '断路作业' },
        { id: 6, name: '高处作业' },
        { id: 7, name: '临时用电作业' },
        { id: 8, name: '盲板抽堵作业' }
      ],
      workStatus: [
        {
          name: '作业进行中',
          value: 0
        },
        {
          name: '作业终止',
          value: 1
        },
        {
          name: '作业结束待验收',
          value: 2
        },
        {
          name: '作业完成',
          value: 3
        }
      ],
      warningData: [
        {
          name: '黄公子',
          dep: '有机事业部',
          warning: 69,
          role: '作业人',
          isCard: 1
        },
        {
          name: '李飞飞',
          dep: '有机事业部',
          warning: 51,
          role: '监护人',
          isCard: 0
        },
        {
          name: '黄公子',
          dep: '有机事业部',
          warning: 69,
          role: '作业人',
          isCard: 1
        }
      ],
      reviewForm: {
        advice: ''
      },
      reviewRules:{
        advice: [{ required: true, message: '请填写验收意见', trigger: 'blur' }]
      }
    });
    // 页面载入时执行方法
    onMounted(() => {
      getListByPage();
      getAllDepartment();
      initZyfb()
      initSlfx()
      initZyqs()
    });
    const toFullscreen =()=>{
      const element = document.getElementById('bigScreen')
      if (!screenfull.isEnabled) {
        ElMessage.warning('暂不不支持全屏');
        return false;
      }
      screenfull.toggle(element);
      state.isFull = !state.isFull
      if(state.isFull == true){
        state.themeColor = '#11FEEE'
      }else{
        state.themeColor = '#333'
      }
      initZyfb()
      initSlfx()
      initZyqs()
    }
    const getTypePie = async ()=>{
      let res = await specialIndexApi().analyseType(state.chartSearch1.startTime,state.chartSearch1.endTime,state.chartSearch1.searchDep);
      if (res.data.code === '200') {
        console.log(res.data,'666666666')
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      // 页面载入时执行方法
      onMounted(() => {
        getListByPage();
        getAllDepartment();
        initZyfb()
        initSlfx()
        initZyqs()
      });
      const toFullscreen =()=>{
        const element = document.getElementById('bigScreen')
        if (!screenfull.isEnabled) {
          ElMessage.warning('暂不不支持全屏');
          return false;
        }
        screenfull.toggle(element);
        state.isFull = !state.isFull
        if(state.isFull == true){
          state.themeColor = '#11FEEE'
        }else{
          state.themeColor = '#333'
        }
        initZyfb()
        initSlfx()
        initZyqs()
      }
      const getTypePie = async ()=>{
        let res = await specialIndexApi().analyseType(state.chartSearch1.startTime,state.chartSearch1.endTime,state.chartSearch1.searchDep);
        if (res.data.code === '200') {
          console.log(res.data,'666666666')
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }
      type EChartsOption = echarts.EChartsOption
      const initZyfb =()=>{
        let dom = document.getElementById(zyfb.value);
        let myChart = echarts.init(dom);
        let option: EChartsOption;
        option = {
          tooltip: {
            trigger: 'item'
    }
    type EChartsOption = echarts.EChartsOption
    const initZyfb =()=>{
      let dom = document.getElementById(zyfb.value);
      let myChart = echarts.init(dom);
      let option: EChartsOption;
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'center',
          textStyle: {
            // 设置默认的文字颜色
            color: state.themeColor,
            fontSize: 12
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            top: 'center',
            textStyle: {
              // 设置默认的文字颜色
              color: state.themeColor,
              fontSize: 12
            },
          itemStyle: {
            borderWidth: 0 // 设置图例边框宽度为0
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderWidth: 0 // 设置图例边框宽度为0
            }
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 1,
                borderColor: '#fff',
                borderWidth: 2
              },
              borderRadius: 1,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: true
              },
              data: [
                { value: 1048, name: '动火作业' },
                { value: 735, name: '受限空间作业' },
                { value: 580, name: '吊装作业' },
                { value: 484, name: '动土作业' },
                { value: 735, name: '断路作业' },
                { value: 580, name: '高处作业' },
                { value: 484, name: '临时用电作业' },
                { value: 300, name: '盲板抽堵作业' }
              ]
            }
          ]
        }

        option && myChart.setOption(option);
        window.addEventListener("resize",function (){
          myChart.resize();
        });
      }
      const initSlfx =()=>{
        let dom = document.getElementById(slfx.value);
        let myChart = echarts.init(dom);
        let option: EChartsOption;
        option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['事业部1', '事业部2', '事业部3', '事业部4', '事业部5', '事业部6', '事业部7'],
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                color: state.themeColor
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: 'Direct',
              type: 'bar',
              barWidth: '60%',
              data: [10, 52, 200, 334, 390, 330, 220]
            }
          ]
        }

        option && myChart.setOption(option);
        window.addEventListener("resize",function (){
          myChart.resize();
        });
            },
            labelLine: {
              show: true
            },
            data: [
              { value: 1048, name: '动火作业' },
              { value: 735, name: '受限空间作业' },
              { value: 580, name: '吊装作业' },
              { value: 484, name: '动土作业' },
              { value: 735, name: '断路作业' },
              { value: 580, name: '高处作业' },
              { value: 484, name: '临时用电作业' },
              { value: 300, name: '盲板抽堵作业' }
            ]
          }
        ]
      }
      const initZyqs =()=>{
        let dom = document.getElementById(zyqs.value);
        let myChart = echarts.init(dom);
        let option: EChartsOption;
        option = {
          xAxis: {

      option && myChart.setOption(option);
      window.addEventListener("resize",function (){
        myChart.resize();
      });
    }
    const initSlfx =()=>{
      let dom = document.getElementById(slfx.value);
      let myChart = echarts.init(dom);
      let option: EChartsOption;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'],
            data: ['事业部1', '事业部2', '事业部3', '事业部4', '事业部5', '事业部6', '事业部7'],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              color: state.themeColor
            }
          },
          yAxis: {
          }
        ],
        yAxis: [
          {
            type: 'value'
          },
          grid: {
            top: '8%',
            bottom: '8%'
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260],
              type: 'line'
            }
          ]
        }
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      }

        option && myChart.setOption(option);
        window.addEventListener("resize",function (){
          myChart.resize();
      option && myChart.setOption(option);
      window.addEventListener("resize",function (){
        myChart.resize();
      });
    }
    const initZyqs =()=>{
      let dom = document.getElementById(zyqs.value);
      let myChart = echarts.init(dom);
      let option: EChartsOption;
      option = {
        xAxis: {
          type: 'category',
          data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'],
          axisLabel: {
            color: state.themeColor
          }
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          top: '8%',
          bottom: '8%'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      }

      option && myChart.setOption(option);
      window.addEventListener("resize",function (){
        myChart.resize();
      });
    }
    // 刷新
    const reLoadData = async () => {
      getListByPage();
    };

    // 填写表单
    const toApply = () => {
      router.push({
        path: 'zysq'
      });
    };

    // 获取部门列表
    const getAllDepartment = async () => {
      let res = await teamManageApi().getAllDepartment();
      if (res.data.code === '200') {
        state.departmentList = JSON.parse(JSON.stringify(res.data.data))
        // recursion(state.departmentList);
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
        // 刷新
        const reLoadData = async () => {
            getListByPage();
        };
    };

        // 填写表单
        const toApply = () => {
            router.push({
                path: 'zysq'
            });
        };

        // 获取部门列表
        const getAllDepartment = async () => {
            let res = await teamManageApi().getAllDepartment();
            if (res.data.code === '200') {
                state.departmentList = JSON.parse(JSON.stringify(res.data.data))
                // recursion(state.departmentList);
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 分页获取列表
        const getListByPage = async () => {
            const dateRange = JSON.parse(JSON.stringify(state.searchDate))
            if(dateRange[1]){dateRange[1] = dateRange[1].replace('00:00:00','23:59:59')}
            const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: { workType: state.searchWord, applyDepId: state.searchDep,applyStartTime: dateRange[0],applyEndTime: dateRange[1]} };
            let res = await workApplyApi().getApplyList(data);
            if (res.data.code === '200') {
                state.workData = JSON.parse(JSON.stringify(res.data.data));
                state.workData = state.workData.map((item) => {
                    if (item.operators == null || item.operators == []) {
                        item.operators = [];
                    } else {
                        item.operators = Array.from(item.operators, ({ operatorUname }) => operatorUname);
                    }
                    return item;
                });
                state.totalSize1 = res.data.total;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 表格数据格式化
        const toNames = (row, column, cellValue, index) => {
            if (row.list == []) {
                return [];
            } else {
                const nameList = [];
                for (let i = 0; i < row.list.length; i++) {
                    for (let t = 0; t < state.workTimeList.length; t++) {
                        if (row.list[i] == state.workTimeList[t].id) {
                            nameList.push(state.workTimeList[t].name);
                        }
                    }
                }
                return nameList.join();
            }
        };

        // 关键词查询记录
        const searchRecord = async () => {
            if (state.searchWord == null && state.searchStatus == null && state.searchDep == null && state.searchDate == []) {
                ElMessage({
                    type: 'warning',
                    message: '请输入查询关键词'
                });
            } else {
                getListByPage();
            }
        };
        // 重置搜索
        const clearSearch = async () => {
            state.searchWord = null;
            state.searchDep = null;
            state.searchDate = []
            getListByPage();
        };

        const handleSizeChange1 = (val: number) => {
            state.pageSize1 = val;
            getListByPage();
        };
        const handleCurrentChange1 = (val: number) => {
            state.pageIndex1 = val;
            getListByPage();
        };

        // 查看记录
        const viewRecord = (row: any) => {
            state.dialogType = row.workType
            state.details = JSON.parse(JSON.stringify(row));
            if(state.details.workDetail.otherSpecialWork == '' || !state.details.workDetail.otherSpecialWork){
                state.details.workDetail.otherSpecialWork=[]
            }
            else {
                const a = state.details.workDetail.otherSpecialWork
                state.details.workDetail.otherSpecialWork = a.split(',').map((item) => {
                    return state.workType.find((i: { id: number }) => i.id === Number(item))?.name;
                });
            }
            if(state.details.workDetail.involvedDepIds == '' || !state.details.workDetail.involvedDepIds){
                state.details.workDetail.involvedDepIds=[]
            }
            else {
                const a = state.details.workDetail.involvedDepIds
                state.details.workDetail.involvedDepIds = a.split(',').map((item) => {
                    return state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(item))?.depName;
                });
            }
            if(state.details.workDetail.csDepId){
                state.details.workDetail.csDepId = state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(state.details.workDetail.csDepId))?.depName;
            }
            if(state.details.workDetail.operationDepId){
                state.details.workDetail.operationDepId = state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(state.details.workDetail.operationDepId))?.depName;
            }
            if(state.details.workDetail.gbPath){
                state.details.workDetail.gbPath = state.details.workDetail.gbPath.split(',')
            }
            if(state.details.workDetail.bcPath){
                state.details.workDetail.bcPath = state.details.workDetail.bcPath.split(',')
            }
            if(state.details.workDetail.bpLocationMapPath){
                state.details.workDetail.bpLocationMapPath = state.details.workDetail.bpLocationMapPath.split(',')
            }
            state.dialogDetails = true;
        };

        const handleReview = (row)=>{
          state.dialogReview = true
        }
        const openVideo = ()=>{
          videoRef.value.openDialog()
        }
      const submitReview = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
          if (valid) {
            console.log('submit!')
    // 分页获取列表
    const getListByPage = async () => {
      const dateRange = JSON.parse(JSON.stringify(state.searchDate))
      if(dateRange[1]){dateRange[1] = dateRange[1].replace('00:00:00','23:59:59')}
      const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: { workType: state.searchWord, applyDepId: state.searchDep,applyStartTime: dateRange[0],applyEndTime: dateRange[1]} };
      let res = await workApplyApi().getApplyList(data);
      if (res.data.code === '200') {
        state.workData = JSON.parse(JSON.stringify(res.data.data));
        state.workData = state.workData.map((item) => {
          if (item.operators == null || item.operators == []) {
            item.operators = [];
          } else {
            console.log('error submit!', fields)
            item.operators = Array.from(item.operators, ({ operatorUname }) => operatorUname);
          }
        })
          return item;
        });
        state.totalSize1 = res.data.total;
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };

        // 折线图
        const renderMenu = async (value: string) => {
            Session.set('projectId', value);
            userInfos.value.projectId = value;
            await initBackEndControlRoutes();
        };
    // 表格数据格式化
    const toNames = (row, column, cellValue, index) => {
      if (row.list == []) {
        return [];
      } else {
        const nameList = [];
        for (let i = 0; i < row.list.length; i++) {
          for (let t = 0; t < state.workTimeList.length; t++) {
            if (row.list[i] == state.workTimeList[t].id) {
              nameList.push(state.workTimeList[t].name);
            }
          }
        }
        return nameList.join();
      }
    };

        return {
            View,
            Edit,
            Delete,
            Refresh,
            Plus,
            Finished,
            Download,
            FolderChecked,
            VideoPlay,
            reviewFormRef,
            videoRef,
            zyfb,
            slfx,
            zyqs,
            toFullscreen,
            handleReview,
            openVideo,
            submitReview,
            reLoadData,
            toApply,
            toNames,
            searchRecord,
            clearSearch,
            viewRecord,
            getListByPage,
            handleSizeChange1,
            handleCurrentChange1,
            ...toRefs(state)
        };
    // 关键词查询记录
    const searchRecord = async () => {
      if (state.searchWord == null && state.searchStatus == null && state.searchDep == null && state.searchDate == []) {
        ElMessage({
          type: 'warning',
          message: '请输入查询关键词'
        });
      } else {
        getListByPage();
      }
    };
    // 重置搜索
    const clearSearch = async () => {
      state.searchWord = null;
      state.searchDep = null;
      state.searchDate = []
      getListByPage();
    };

    const handleSizeChange1 = (val: number) => {
      state.pageSize1 = val;
      getListByPage();
    };
    const handleCurrentChange1 = (val: number) => {
      state.pageIndex1 = val;
      getListByPage();
    };

    // 查看记录
    const viewRecord = (row: any) => {
      state.dialogType = row.workType
      state.details = JSON.parse(JSON.stringify(row));
      if(state.details.workDetail.otherSpecialWork == '' || !state.details.workDetail.otherSpecialWork){
        state.details.workDetail.otherSpecialWork=[]
      }
      else {
        const a = state.details.workDetail.otherSpecialWork
        state.details.workDetail.otherSpecialWork = a.split(',').map((item) => {
          return state.workType.find((i: { id: number }) => i.id === Number(item))?.name;
        });
      }
      if(state.details.workDetail.involvedDepIds == '' || !state.details.workDetail.involvedDepIds){
        state.details.workDetail.involvedDepIds=[]
      }
      else {
        const a = state.details.workDetail.involvedDepIds
        state.details.workDetail.involvedDepIds = a.split(',').map((item) => {
          return state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(item))?.depName;
        });
      }
      if(state.details.workDetail.csDepId){
        state.details.workDetail.csDepId = state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(state.details.workDetail.csDepId))?.depName;
      }
      if(state.details.workDetail.operationDepId){
        state.details.workDetail.operationDepId = state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(state.details.workDetail.operationDepId))?.depName;
      }
      if(state.details.workDetail.gbPath){
        state.details.workDetail.gbPath = state.details.workDetail.gbPath.split(',')
      }
      if(state.details.workDetail.bcPath){
        state.details.workDetail.bcPath = state.details.workDetail.bcPath.split(',')
      }
      if(state.details.workDetail.bpLocationMapPath){
        state.details.workDetail.bpLocationMapPath = state.details.workDetail.bpLocationMapPath.split(',')
      }
      state.dialogDetails = true;
    };

    const handleReview = (row)=>{
      state.dialogReview = true
    }
    const openVideo = ()=>{
      videoRef.value.openDialog()
    }
    const submitReview = async (formEl: FormInstance | undefined) => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log('submit!')
        } else {
          console.log('error submit!', fields)
        }
      })
    }

    // 折线图
    const renderMenu = async (value: string) => {
      Session.set('projectId', value);
      userInfos.value.projectId = value;
      await initBackEndControlRoutes();
    };

    return {
      View,
      Edit,
      Delete,
      Refresh,
      Plus,
      Finished,
      Download,
      FolderChecked,
      VideoPlay,
      reviewFormRef,
      videoRef,
      zyfb,
      slfx,
      zyqs,
      toFullscreen,
      handleReview,
      openVideo,
      submitReview,
      reLoadData,
      toApply,
      toNames,
      searchRecord,
      clearSearch,
      viewRecord,
      getListByPage,
      handleSizeChange1,
      handleCurrentChange1,
      ...toRefs(state)
    };
  }
});
</script>

<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
    height: calc(100vh - 144px);
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: scroll;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
  height: calc(100vh - 144px);
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  overflow-y: scroll;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */

    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    .full{
      position:fixed;
      height: 34px;
      line-height: 34px;
      top: 80px;
      right: 20px;
      z-index: 99999;
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .full{
    position:fixed;
    height: 34px;
    line-height: 34px;
    top: 80px;
    right: 20px;
    z-index: 99999;
  }

  .demo-tabs {
    width: 100%;
    height: 100%;

    &::v-deep(.el-tabs__content) {
      height: calc(100% - 60px);
    }

    .demo-tabs {
        width: 100%;
        height: 100%;

        &::v-deep(.el-tabs__content) {
            height: calc(100% - 60px);
        }

        .el-tab-pane {
            height: 100%;
        }
    .el-tab-pane {
      height: 100%;
    }
    .topChart{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20px;
      height: 40%;
  }
  .topChart{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    height: 40%;
    &:last-of-type{
      margin-bottom: 0;
    }

    .chart-item{
      width: calc(50% - 10px);
      height: 100%;
      margin-right: 10px;
      position: relative;
      background: #fff;
      padding: 20px;

      &:last-of-type{
        margin-bottom: 0;
        margin-right: 0;
      }

      .chart-item{
        width: calc(50% - 10px);
        height: 100%;
        margin-right: 10px;
        position: relative;
        background: #fff;
        padding: 20px;

        &:last-of-type{
          margin-right: 0;
      .chart-tit{
        width: 100%;
        height: 15%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        .tit{
          font-size: 1.33rem;
          font-weight: bolder;
          white-space: nowrap;
        }

        .chart-tit{
          width: 100%;
          height: 15%;
        .filter-part{
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          .tit{
            font-size: 1.33rem;
            font-weight: bolder;
            white-space: nowrap;
          align-items: center;
          justify-content: right;
          :deep(.el-cascader){
            width: 35% !important;
          }
          .filter-part{
            display: flex;
            align-items: center;
            justify-content: right;
            :deep(.el-cascader){
              width: 35% !important;
            }
            .el-select{
              width: 35% !important;
              margin-left: 10px;
            }
            .el-switch{
              width: 25% !important;
          .el-select{
            width: 35% !important;
            margin-left: 10px;
          }
          .el-switch{
            width: 25% !important;

              :deep(.el-switch__core){
                width: 100% !important;
              }
            }
          }
          .filter-part2{
            :deep(.el-cascader){
            :deep(.el-switch__core){
              width: 100% !important;
            }
          }

        }
        .chart{
          width: 100%;
          height: 85%;
          .el-table{
            height: 90% !important;
            :deep(.el-table__inner-wrapper){
              height: 100% !important;
              .el-table__header-wrapper {
                height: 20% !important;
                .el-table__header{
        .filter-part2{
          :deep(.el-cascader){
            width: 100% !important;
          }
        }

      }
      .chart{
        width: 100%;
        height: 85%;
        .el-table{
          height: 90% !important;
          :deep(.el-table__inner-wrapper){
            height: 100% !important;
            .el-table__header-wrapper {
              height: 20% !important;
              .el-table__header{
                height: 100% !important;
                th{
                  height: 100% !important;
                  th{
                    height: 100% !important;
                    padding: 0 0 !important;
                    .cell{
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    }
                  padding: 0 0 !important;
                  .cell{
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                }
              }
              .el-table__body-wrapper {
                height: 80% !important;
                .el-scrollbar__view{
            }
            .el-table__body-wrapper {
              height: 80% !important;
              .el-scrollbar__view{
                height: 100% !important;
                .el-table__body{
                  height: 100% !important;
                  .el-table__body{
                  tbody{
                    height: 100% !important;
                    tbody{
                      height: 100% !important;
                      .el-table__row{
                    .el-table__row{
                      height: 25% !important;
                      td{
                        height: 25% !important;
                        td{
                          height: 25% !important;
                          padding: 0 0 !important;
                          .left-info{
                            display: flex;
                            align-items: center;
                          }
                          .cell{
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                          }
                          .el-button{
                            padding: 0 !important;
                          }
                        padding: 0 0 !important;
                        .left-info{
                          display: flex;
                          align-items: center;
                        }
                        .cell{
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        }
                        .el-button{
                          padding: 0 !important;
                        }
                      }
                    }
@@ -1073,314 +1072,315 @@
            }
          }
        }
        .el-radio-group{
          width: 20%;
          display: flex;
          flex-flow: column nowrap;
          align-items: flex-start;
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-30%);
      }
      .el-radio-group{
        width: 20%;
        display: flex;
        flex-flow: column nowrap;
        align-items: flex-start;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-30%);

          .el-radio{
            width: 100%;
            margin-bottom: 4px;
          }
        .el-radio{
          width: 100%;
          margin-bottom: 4px;
        }
        :deep(.active-ring-info){
          .active-ring-name{
            font-size: 1.5rem !important;
            text-align: center;
          }
      }
      :deep(.active-ring-info){
        .active-ring-name{
          font-size: 1.5rem !important;
          text-align: center;
        }
      }
    }
    .homeCard {
  }
  .homeCard {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 4px;

    .main-card {
      width: 100%;
      height: 100%;
      .cardTop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        .mainCardBtn {
          margin: 0;
        }

        .top-info {
          display: flex;
          font-size: 14px;
          font-weight: bolder;
          align-items: center;
          padding: 4px 10px;
          background: #ffeb87;
          border-radius: 2px;
          border: 1px solid #ffae00;
          margin-right: 20px;

          & > div {
            vertical-align: middle;
            white-space: nowrap;
            span {
              font-size: 18px;
              color: #f3001e;
              margin: 0 2px;
              cursor: pointer;

              &:hover{
                text-decoration: underline;
              }
            }
          }
        }
      }
      .pageBtn {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: right;

        .demo-pagination-block + .demo-pagination-block {
          margin-top: 10px;
        }
        .demo-pagination-block .demonstration {
          margin-bottom: 16px;
        }
      }
    }
  }
  .stepItem {
    display: flex;
    align-items: flex-start;
    margin-top: 30px;
    margin-left: 30px;
    padding-bottom: 30px;
    padding-left: 40px;
    border-left: 1px solid #a0cfff;
    position: relative;
    &:first-of-type {
      margin-top: 30px;
    }
    &:first-of-type {
      margin-bottom: 0;
      border-left: none;
    }
    .stepNum {
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 20px;
      box-sizing: border-box;
      font-size: 18px;
      color: #333;
      border: 1px solid #a0cfff;
      line-height: 38px;
      text-align: center;
      left: -20px;
      top: -30px;
      background: #d9ecff;
    }
    .stepCard {
      width: 100%;
      margin-top: -30px;

      .box-card {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 4px;

        .main-card {
        .card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;

          span {
            font-weight: bold;
            margin-left: 10px;
          }
        }

        .text {
          width: 100%;
          font-size: 14px;
          margin-bottom: 10px;
          padding-left: 10px;

          span {
            font-weight: bolder;
            color: #409eff;
          }

          &:last-of-type {
            margin-bottom: 0;
          }
        }
        .approveUnit {
          width: 100%;
          font-size: 14px;
          margin-bottom: 20px;
          padding: 10px 15px;
          border: 1px solid #fff;
          background: #ecf8ff;
          border-radius: 6px;
          .item-tit {
            width: 100%;
            height: 100%;
            .cardTop {
            display: flex;
            color: #409eff;
            align-items: flex-start;
            justify-content: space-between;
            padding-bottom: 10px;
            border-bottom: 1px solid #a0cfff;

            & > span {
              flex: 1;
              &:last-of-type{
                text-align: center;
              }
            }
            & > div {
              flex: 1;
              text-align: center;
            }
          }
          .item-cont {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #c6e2ff;

            & > span {
              flex: 1;
              &:last-of-type{
                text-align: center;
              }
            }
            & > div {
              flex: 1;
              text-align: center;

              & > div {
                text-align: left;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn {
                    margin: 0;
                }

              .top-info {
                display: flex;
                font-size: 14px;
                font-weight: bolder;
                align-items: center;
                padding: 4px 10px;
                background: #ffeb87;
                border-radius: 2px;
                border: 1px solid #ffae00;
                margin-right: 20px;

                & > div {
                  vertical-align: middle;
                  white-space: nowrap;
                  span {
                    font-size: 18px;
                    color: #f3001e;
                    margin: 0 2px;
                    cursor: pointer;

                    &:hover{
                      text-decoration: underline;
                    }
                span {
                  width: 45%;
                  &:first-of-type {
                    width: 30%;
                  }
                }
              }
            }
            .pageBtn {
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: right;

                .demo-pagination-block + .demo-pagination-block {
                    margin-top: 10px;
                }
                .demo-pagination-block .demonstration {
                    margin-bottom: 16px;
                }
            &:last-of-type {
              border-bottom: 0;
            }
          }
        }
    }
    .stepItem {
        display: flex;
        align-items: flex-start;
        margin-top: 30px;
        margin-left: 30px;
        padding-bottom: 30px;
        padding-left: 40px;
        border-left: 1px solid #a0cfff;
        position: relative;
        &:first-of-type {
            margin-top: 30px;
        }
        &:first-of-type {
            margin-bottom: 0;
            border-left: none;
        }
        .stepNum {
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 20px;
            box-sizing: border-box;
            font-size: 18px;
            color: #333;
            border: 1px solid #a0cfff;
            line-height: 38px;
            text-align: center;
            left: -20px;
            top: -30px;
            background: #d9ecff;
        }
        .stepCard {
        .approveItem {
          width: 100%;
          font-size: 14px;
          margin-bottom: 20px;
          padding: 10px 15px;
          background: #ecf8ff;
          border: 1px solid #fff;
          border-radius: 6px;
          .item-tit {
            width: 100%;
            margin-top: -30px;
            display: flex;
            color: #409eff;
            align-items: flex-start;
            justify-content: space-between;
            padding-bottom: 10px;
            border-bottom: 1px solid #a0cfff;

            .box-card {
                width: 100%;

                .card-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    span {
                        font-weight: bold;
                        margin-left: 10px;
                    }
                }

                .text {
                    width: 100%;
                    font-size: 14px;
                    margin-bottom: 10px;
                    padding-left: 10px;

                    span {
                        font-weight: bolder;
                        color: #409eff;
                    }

                    &:last-of-type {
                        margin-bottom: 0;
                    }
                }
                .approveUnit {
                    width: 100%;
                    font-size: 14px;
                    margin-bottom: 20px;
                    padding: 10px 15px;
                    border: 1px solid #fff;
                    background: #ecf8ff;
                    border-radius: 6px;
                    .item-tit {
                        width: 100%;
                        display: flex;
                        color: #409eff;
                        align-items: flex-start;
                        justify-content: space-between;
                        padding-bottom: 10px;
                        border-bottom: 1px solid #a0cfff;

                        & > span {
                            flex: 1;
                            &:last-of-type{
                                text-align: center;
                            }
                        }
                        & > div {
                            flex: 1;
                            text-align: center;
                        }
                    }
                    .item-cont {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 10px 0;
                        border-bottom: 1px solid #c6e2ff;

                        & > span {
                            flex: 1;
                            &:last-of-type{
                                text-align: center;
                            }
                        }
                        & > div {
                            flex: 1;
                            text-align: center;

                            & > div {
                                text-align: left;
                                width: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                span {
                                    width: 45%;
                                    &:first-of-type {
                                        width: 30%;
                                    }
                                }
                            }
                        }
                        &:last-of-type {
                            border-bottom: 0;
                        }
                    }
                }
                .approveItem {
                    width: 100%;
                    font-size: 14px;
                    margin-bottom: 20px;
                    padding: 10px 15px;
                    background: #ecf8ff;
                    border: 1px solid #fff;
                    border-radius: 6px;
                    .item-tit {
                        width: 100%;
                        display: flex;
                        color: #409eff;
                        align-items: flex-start;
                        justify-content: space-between;
                        padding-bottom: 10px;
                        border-bottom: 1px solid #a0cfff;

                        & > span {
                            flex: 1;
                        }
                        & > div {
                            flex: 2;
                            text-align: center;
                        }
                    }
                    .item-cont {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 10px 0;
                        border-bottom: 1px solid #c6e2ff;

                        & > span {
                            flex: 1;
                        }
                        & > div {
                            flex: 2;
                            text-align: center;

                            & > div {
                                text-align: left;
                                width: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: flex-start;
                                margin-bottom: 10px;
                                span {
                                    width: 50%;
                                    &:first-of-type {
                                        width: 25%;
                                    }
                                }
                            }
                        }
                        &:last-of-type {
                            border-bottom: 0;
                        }
                    }
                }
            & > span {
              flex: 1;
            }
        }
        &:hover .card-header {
            color: #0098f5;
        }
        &:hover .stepNum {
            border: 2px solid #0098f5;
            color: #0098f5;
        }
    }
    .el-row {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        &:last-child {
            margin-bottom: 0;
        }
        .grid-content {
            align-items: center;
            min-height: 36px;
        }

        .topInfo {
            & > div {
              flex: 2;
              text-align: center;
            }
          }
          .item-cont {
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: bold;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #c6e2ff;

            & > div {
                white-space: nowrap;
                margin-right: 20px;
            & > span {
              flex: 1;
            }
            & > div {
              flex: 2;
              text-align: center;

              & > div {
                text-align: left;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: flex-start;
                margin-bottom: 10px;
                span {
                  width: 50%;
                  &:first-of-type {
                    width: 25%;
                  }
                }
              }
            }
            &:last-of-type {
              border-bottom: 0;
            }
          }
        }
      }
    }
    &:hover .card-header {
      color: #0098f5;
    }
    &:hover .stepNum {
      border: 2px solid #0098f5;
      color: #0098f5;
    }
  }
  .el-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
    .grid-content {
      align-items: center;
      min-height: 36px;
    }

    .topInfo {
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: bold;

      & > div {
        white-space: nowrap;
        margin-right: 20px;
      }
    }
  }
}

.container{
@@ -1576,18 +1576,18 @@
  }
}
.el-card {
    border: 0;
  border: 0;
}
.el-input{
    width: 100% !important;
  width: 100% !important;
}
::v-deep(.el-date-editor){
    width: 100%;
  width: 100%;
}
.el-select{
    width: 100%;
  width: 100%;
}
:deep(.el-cascader){
    width: 100% !important;
  width: 100% !important;
}
</style>

 src/views/system/user/component/userDialog.vue

@@ -4,7 +4,7 @@
            <el-form :model="userForm" size="default" ref="userRef" :rules="userFormRules" label-width="90px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="disabled">
                        <el-form-item label="用户名">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model.trim="userForm.username" :disabled="disabled" placeholder="" clearable></el-input>
                        </el-form-item>
                    </el-col>