Default Changelist

马宇豪

2023-03-10 e5e9b84b800f1623f85be45a3565689917898c78

Default Changelist

 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

@@ -10,5 +10,32 @@
                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/inspectRecordDialog.vue

 src/views/intellectInspect/inspectIndex/components/sum.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 :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

文件名从 src/views/intellectInspect/inspectIndex2/index.vue 修改
@@ -102,33 +102,6 @@
                      </template>
                    </el-table-column>
                  </el-table>
<!--                  <div class="list">-->
<!--                    <div class="list-tit">-->
<!--                      <span class="w60">任务信息</span>-->
<!--                      <span class="w20">任务状态</span>-->
<!--                      <span class="w20">操作</span>-->
<!--                    </div>-->
<!--                    <div class="cardTop" v-for="(item, index) in tableData" :key="index">-->
<!--                      <div class="l-info">-->
<!--                        <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="m-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="r-info">-->
<!--                        <el-button type="text" v-if="item.taskStatus == 2" @click="toLine(item)" size="small">查看实时巡检</el-button>-->
<!--                        <el-button type="text" v-else class="reviewBtn" @click="toDetails('查看', item)" size="small">查看巡检记录</el-button>-->
<!--                      </div>-->
<!--                    </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>-->
                </div>
              </div>
            </div>
@@ -142,21 +115,35 @@
              </div>
              <div class="chart">
                <el-table :data="unusualData" stripe border :header-cell-style="{ background: '#fafafa' }">
                  <el-table-column prop="num" label="工单编号" align="center"/>
                  <el-table-column prop="spot" label="异常巡检点" align="center"/>
                  <el-table-column prop="time" label="巡检（发现）时间" align="center"/>
                  <el-table-column prop="job" label="所属巡检任务" align="center"/>
                  <el-table-column prop="area" label="设备/区域名称" align="center"/>
                  <el-table-column prop="refer" label="正常参考值" align="center"/>
                  <el-table-column prop="real" label="实际巡检值" align="center"/>
                  <el-table-column prop="name" label="隐患处置人" align="center"/>
                  <el-table-column prop="phone" label="电话" align="center"/>
                  <el-table-column prop="status" label="处置状态" align="center"/>
                  <el-table-column prop="describe" label="处置描述反馈" align="center"/>
                  <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 :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 type="text" size="small" class="checkBtn">验收</el-button>
                      <el-button type="text" size="small" class="reviewBtn">查看现场照片</el-button>
                      <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>
@@ -167,9 +154,42 @@
            </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"></unusual-list>
        <unusual-list ref="unusualListRef" @refreshRecord="getListExcepOrder"></unusual-list>
    </div>
</template>

@@ -181,7 +201,7 @@
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';
@@ -211,7 +231,11 @@
    chartStatus:boolean;
    period: string;
    isFull:boolean;
    themeColor:string
    themeColor:string;
    dialogVisible:boolean;
    workNum: string;
    beImgs: [];
    afImgs: []
}
interface type {
    id: number;
@@ -231,64 +255,14 @@
        const state = reactive<stateType>({
            isFull: false,
            themeColor: '#333',
            workNum: '',
            beImgs: [],
            afImgs: [],
            pageIndex: 1,
            pageSize: 5,
            totalSize: 0,
            tableData: [],
            unusualData: [
              {
                num: '202302280001',
                spot: '70736',
                time: '2023-03-02 17:44:25',
                job: '甲醇车间XXX巡检',
                area: 'xxx设备',
                refer: '8.9~10Mpa',
                real: '15.6Mpa',
                name: '黄公子',
                phone: '15261806176',
                status: '待验收',
                describe: '更换法兰更换法兰更换法兰更换法兰更换法兰更换法兰'
              },
              {
                num: '202302280001',
                spot: '70736',
                time: '2023-03-02 17:44:25',
                job: '甲醇车间XXX巡检',
                area: 'xxx设备',
                refer: '8.9~10Mpa',
                real: '15.6Mpa',
                name: '黄公子',
                phone: '15261806176',
                status: '待验收',
                describe: '更换法兰更换法兰更换法兰更换法兰更换法兰更换法兰'
              },
              {
                num: '202302280001',
                spot: '70736',
                time: '2023-03-02 17:44:25',
                job: '甲醇车间XXX巡检',
                area: 'xxx设备',
                refer: '8.9~10Mpa',
                real: '15.6Mpa',
                name: '黄公子',
                phone: '15261806176',
                status: '待验收',
                describe: '更换法兰更换法兰更换法兰更换法兰更换法兰更换法兰'
              },
              {
                num: '202302280001',
                spot: '70736',
                time: '2023-03-02 17:44:25',
                job: '甲醇车间XXX巡检',
                area: 'xxx设备',
                refer: '8.9~10Mpa',
                real: '15.6Mpa',
                name: '黄公子',
                phone: '15261806176',
                status: '待验收',
                describe: '更换法兰更换法兰更换法兰更换法兰更换法兰更换法兰'
              }
            ],
            unusualData: [],
            unchecked: null,
            unusual: null,
            chartStatus: true,
@@ -309,7 +283,8 @@
            ],
            classGroupList: [],
            quotaList: [],
            inspectPointAllList: []
            inspectPointAllList: [],
            dialogVisible: false
        });
        const inspectRecordDialogRef = ref();
        const inspectListRef = ref();
@@ -331,7 +306,7 @@
            initSbtj()
        });
        const toFullscreen =()=>{
          console.log(state.isFull,'quanp',state.themeColor)
          // console.log(state.isFull,'quanp',state.themeColor)
          const element = document.getElementById('bigScreen')
          if (!screenfull.isEnabled) {
            ElMessage.warning('暂不不支持全屏');
@@ -353,6 +328,86 @@
        }
        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 =()=>{
@@ -527,10 +582,10 @@
        };
        // 分页获取
        const getListExcepOrder = async () => {
          const data = { pageSize: state.pageSize, pageIndex: state.pageIndex };
          const data = { pageSize: 4, pageIndex: state.pageIndex };
          let res = await inspectIndexApi().getListExcepOrderByPage(data);
          if (res.data.code === '200') {
            console.log(res.data,'res')
            state.unusualData = JSON.parse(JSON.stringify(res.data.data.records))
          } else {
            ElMessage({
              type: 'warning',
@@ -613,6 +668,9 @@
            toFullscreen,
            checkAllRecord,
            checkAllList,
            acceptance,
            remark,
            openPhoto,
            toLine,
            toOverTime,
            toDetails,

 src/views/intellectInspect/inspectIndex2/components/unusualList.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,11 +27,15 @@
    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',
@@ -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 changeTab =(i)=>{
                state.cur = i
                nextTick(()=>{
                    initAccidentByYear();
                })
      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
          });
        }
      }

            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;
            }
            .act{
                z-index: 999999 !important;
                .el-cascader-node__label{
                color: #11FEEE;
                border: 1px solid #11FEEE;
                }
                .el-icon{
                    color: #11FEEE;
                }
                .el-cascader-node{
                    &:hover{
                        background: #0049af;
            }
        }
        .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-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;
                input{
                    font-size: 0.8rem;
                    color: #11FEEE;
                }
                .el-icon{
                    color: #11FEEE;
                }
            }
        }

        .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;
            }
            div:hover{
                color: #333;
                border: 1px solid #333;
                .el-icon{
                    color: #000;
            }
            .act{
                color: #333;
                border: 1px solid #333;
                .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{

 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 :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="dangerMonth"></div>
        <div v-show="cur===2" class="year" :id="dangerYear"></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 changeTab =(i)=>{
                state.cur = i
                nextTick(()=>{
                    initdangerByYear()
                })
      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 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,70 +243,7 @@
                    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);
@@ -202,32 +251,34 @@

            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()
            })

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

            return {
                dangerMonth,
                dangerYear,
                Search,
        changeTime,
                fontSize,
                changeTab,
                ...toRefs(state)
            };
        },
@@ -241,58 +292,115 @@
        padding: 2% 2% 0;
        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;
      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);
      ::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;
            }
            .act{
        z-index: 999999 !important;
        .el-cascader-node__label{
                color: #11FEEE;
                border: 1px solid #11FEEE;
        }
        .el-icon{
          color: #11FEEE;
        }
        .el-cascader-node{
          &:hover{
            background: #0049af;
            }
        }
        .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-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;
        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;
                border-radius: 2px;
                cursor: pointer;
        color: #fff;
        z-index: 999999 !important;
        .el-cascader-node__label{
          color: #000;
            }
            div:hover{
                color: #333;
                border: 1px solid #333;
        .el-icon{
          color: #000;
            }
            .act{
                color: #333;
                border: 1px solid #333;
        .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{

 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>

@@ -26,20 +28,31 @@
    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 {
        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,11 +60,35 @@
            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: [
                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
@@ -95,28 +132,120 @@
                    {
                        label: '十月',
                        value: 10
              },
              {
                label: '十一月',
                value: 11
              },
              {
                label: '十二月',
                value: 12
                    }
                ],
                selector: 'select-dark'
            })

            const swi = setInterval(()=>{
                state.curValue = !state.curValue
                if(state.curValue == true){
                    nextTick(()=>{
                        initRisk1()
                    })
            ]
          }
          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{
                    nextTick(()=>{
                        initRisk2()
                    })
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      };

      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{
                .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,24 +617,37 @@

        .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{
                .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;

 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'
                depProps: {
                    expandTrigger: 'hover',
                    checkStrictly: true,
                    value: 'depId',
                    label: 'depName',
                    emitPath: false
                    },
                    {
                        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'
                            }
                        ]
                    }
                ]
                departList: [],
            });

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

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

            // 获取部门列表
            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,37 +27,16 @@
      <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%;" />
      </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/index.vue

@@ -1,114 +1,11 @@
<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>
        <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>
        </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>
          <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>
    <div class="home-container">
        <div style="height: 100%">
            <el-row class="homeCard">
                  <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-select v-model="searchWord">
                        <el-option
                            v-for="item in workType"
                            :key="item.id"
@@ -121,7 +18,7 @@
                  <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-select v-model="searchStatus">
                        <el-option
                            v-for="item in workStatus"
                            :key="item.value"
@@ -134,7 +31,7 @@
                  <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"/>
                        <el-cascader v-model="searchDep" :options="departmentList" :props="casProps" :show-all-levels="false"/>
                    </div>
                  </el-col>
                  <el-col :span="6" style="display:flex;align-items: center;">
@@ -142,8 +39,6 @@
                    <div class="grid-content topInfo">
                      <el-date-picker
                          v-model="searchDate"
                          size="small"
                          :teleported="false"
                          type="daterange"
                          unlink-panels
                          range-separator="至"
@@ -153,9 +48,10 @@
                      />
                    </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-button type="primary" style="margin-left: 20px" @click="searchRecord">查询</el-button>
                <el-button plain @click="clearSearch">重置</el-button>
                </el-row>
            <div class="homeCard">
                <div class="main-card">
                    <el-row class="cardTop" style="justify-content: space-between">
                        <el-col :span="2" class="mainCardBtn">
@@ -179,38 +75,31 @@
                          <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">
                    <el-table ref="multipleTableRef" :data="applyData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }">
                        <el-table-column property="workPermitNo" label="作业证编号" width="180" align="center"/>
                      <el-table-column property="depName" label="部门" align="center"/>
                        <el-table-column property="applyUname" label="申请人" align="center"/>
                        <el-table-column property="operators" label="作业人" align="center"/>
                        <el-table-column property="workTypeDesc" label="作业类型" align="center"/>
                        <el-table-column property="workLevelDesc" label="作业等级" align="center"/>
                        <el-table-column property="applyTime" label="申请时间" width="180" align="center"/>
                        <el-table-column property="startTime" label="作业开始时间" width="180" align="center"/>
                        <el-table-column property="endTime" label="作业结束时间" width="180" align="center"/>
                        <el-table-column label="作业状态" align="center" width="180">
                            <template #default="scope">
                                <el-tag>{{ scope.row.status==0?'进行中':scope.row.status==1?'作业中止':scope.row.status==2?'作业结束验收': '作业完成'}}</el-tag>
                                <el-tag :type="scope.row.status==2?'success':(scope.row.status==8||scope.row.status==9)?'warning':'danger'">{{ scope.row.statusDesc }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column property="reason" label="中止原因" align="center"/>
                        <el-table-column label="安全预警" align="center">
                        <el-table-column property="stopReason" label="中止原因" align="center"/>
                        <el-table-column label="安全预警" align="center" width="180">
                          <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>
                            <el-tag :type="scope.row.saftyWarning==0?'success':(scope.row.saftyWarning==1||scope.row.saftyWarning==2)?'warning':'danger'">{{ scope.row.saftyWarning==0?'正常':'报警' }}</el-tag>
                        </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="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>
@@ -254,7 +143,6 @@
              </span>
          </template>
        </el-dialog>
        <video-detail ref="videoRef"></video-detail>
    </div>
</template>

@@ -265,22 +153,18 @@
import { useUserInfo } from '/@/stores/userInfo';
import { Session } from '/@/utils/storage';
import { useRouter } from 'vue-router';
import { Edit, View, Plus, Delete, Refresh, Search, Finished, Download, FolderChecked, VideoPlay } from '@element-plus/icons-vue';
import { Edit, View, Plus, Delete, Refresh, Search, Finished, Download, FolderChecked } from '@element-plus/icons-vue';
import { ElTable, ElMessage } from 'element-plus';
import { specialIndexApi } from '/@/api/specialWorkSystem/specialIndex';
import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
import type { TabsPaneContext } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
import Cookies from 'js-cookie';
import axios from 'axios';
import * as echarts from "echarts";
import screenfull from "screenfull";
import VideoDetail from "/@/views/specialWorkSystem/specialIndex/components/videoDetail.vue";

// 定义接口来定义对象的类型
interface stateType {
    workData: Array<any>;
    applyData: Array<string>;
    workTimeList: Array<string>;
    multipleSelection: Array<any>;
    casProps: {};
@@ -292,26 +176,16 @@
    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
    reviewForm: object
}
interface type {
    id: number;
@@ -333,7 +207,6 @@
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')),
@@ -348,10 +221,6 @@
        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,
@@ -363,104 +232,9 @@
            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',
            applyData: [],
            workTimeList: [],
            multipleSelection: [],
            approveInfo: {
@@ -476,17 +250,6 @@
            },
            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: '受限空间作业' },
@@ -515,219 +278,14 @@
                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:{
            }
        });

      const reviewRules = reactive<FormRules>({
              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
          });
        }
      }
      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
            },
            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: '动火作业' },
                { 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
              }
            }
          ],
          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();
        });
      }
      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();
@@ -761,8 +319,8 @@
            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) => {
                state.applyData = JSON.parse(JSON.stringify(res.data.data));
                state.applyData = state.applyData.map((item) => {
                    if (item.operators == null || item.operators == []) {
                        item.operators = [];
                    } else {
@@ -867,9 +425,7 @@
        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) => {
@@ -888,6 +444,12 @@
            await initBackEndControlRoutes();
        };

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

        return {
            View,
            Edit,
@@ -897,15 +459,9 @@
            Finished,
            Download,
            FolderChecked,
            VideoPlay,
            reviewFormRef,
            videoRef,
            zyfb,
            slfx,
            zyqs,
            toFullscreen,
            reviewRules,
            handleReview,
            openVideo,
            submitReview,
            reLoadData,
            toApply,
@@ -926,25 +482,8 @@
$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+ */

    &::-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%;
@@ -955,145 +494,6 @@

        .el-tab-pane {
            height: 100%;
        }
    }
    .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-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;
          }
          .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;

              :deep(.el-switch__core){
                width: 100% !important;
              }
            }
          }
          .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;
                    padding: 0 0 !important;
                    .cell{
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    }
                  }
                }
              }
              .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;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .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;
          }
        }
      }
    }
    .homeCard {
@@ -1117,12 +517,12 @@

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

@@ -1130,7 +530,7 @@
                  vertical-align: middle;
                  white-space: nowrap;
                  span {
                    font-size: 18px;
                    font-size: 22px;
                    color: #f3001e;
                    margin: 0 2px;
                    cursor: pointer;
@@ -1155,6 +555,9 @@
                    margin-bottom: 16px;
                }
            }
        }
        &:last-of-type {
            height: calc(100% - 100px);
        }
    }
    .stepItem {
@@ -1359,7 +762,7 @@
    .el-row {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
@@ -1378,199 +781,6 @@
            & > div {
                white-space: nowrap;
                margin-right: 20px;
            }
        }
    }
}

.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;
    z-index: 99999;
  }
  .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;
            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-button--text{
          color: #11FEEE;
        }
      }
    }
  }
  .homeCard{
    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;
    .el-row{
      &>div{
        &>span{
          color: #11FEEE;
        }
      }
    }
    :deep(.el-range-separator){
      color: #11FEEE;
    }
    .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;
      }
    }
  }