xiugai

马宇豪

2024-07-08 20b0ce2db27b64a60de60aee05dedd448099e330

xiugai

 src/api/riskWarning/index.ts

@@ -12,9 +12,9 @@
        },

        //获取任意部门事故统计指定月度区间报表
        getRiskByTimeDep: (data: {depId:number,beginYear:string,beginMonth:string,endYear: string,endMonth:string}) => {
        getRiskByTimeDep: (data: {year:string,month: 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}`,
                url: import.meta.env.VITE_API_URL + `/riskCtrl/spi/report/accident/count?year=${data.year}&month=${data.month}`,
                method: 'get',
            });
        },
@@ -41,6 +41,107 @@
                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',
            });
        },

        // 人员专业度分析
        getUserCount: () => {
            return request({
                url: import.meta.env.VITE_API_URL + `/riskCtrl/spi/report/user/count`,
                method: 'get',
            });
        },

        // 教育培训分析
        getTrainInfo: () => {
            return request({
                url: import.meta.env.VITE_API_URL + `/riskCtrl/spi/report/last/train/info`,
                method: 'get',
            });
        },

        // 应急物资储备
        getEmergencySupplies: () => {
            return request({
                url: import.meta.env.VITE_API_URL + `/riskCtrl/spi/report/emergency/supplies`,
                method: 'get',
            });
        },

        // 智能巡检超期未巡检
        getSafeCheckTask: () => {
            return request({
                url: import.meta.env.VITE_API_URL + `/riskCtrl/spi/report/safe/check/task`,
                method: 'get',
            });
        },

        // 隐患趋势
        getDpLine: () => {
            return request({
                url: import.meta.env.VITE_API_URL + `/riskCtrl/spi/report/dp/line`,
                method: 'get',
            });
        },

        // 隐患等级
        getDpGrade: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/riskCtrl/spi/report/dp/grade`,
                method: 'post',
                data: params
            });
        },

        // spi分页
        getSpiPage: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/spi/list/Page`,
                method: 'post',
                data: params
            });
        },

        // spi新增
        addSpi: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/spi/add`,
                method: 'post',
                data: params
            });
        },

        // spi修改
        modSpi: (params: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/spi/mod`,
                method: 'post',
                data: params
            });
        },

        // spi删除
        delSpi: (id: number | null) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/spi/del/${id}`,
                method: 'delete'
            });
        },

        // spi总记录
        getAllReport: () => {
            return request({
                url: import.meta.env.VITE_API_URL + `/riskCtrl/spi/report/all`,
                method: 'get',
            });
        },

        // spi总记录
        getReportDetails: (id: number | null) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/riskCtrl/spi/report/get/${id}`,
                method: 'get',
            });
        }

    };
}

 src/views/intellectInspect/inspectBasic/inspectTarget/index.vue

@@ -65,12 +65,12 @@
interface TableDataState {
    inspectTargetData: {
        data: Array<TableData>;
        total: number;
        loading: boolean;
        total: number
        loading: boolean
        params: {
            pageIndex: number;
            pageSize: number;
            quotaName: string;
            pageIndex: number
            pageSize: number
            quotaName: string
        };
    };
    quotaTypeList: [];

 src/views/intellectInspect/inspectTaskManage/inspectTask/index.vue

@@ -1,129 +1,129 @@
<template>
    <div class="home-container">
      <div style="height: 100%;display: flex;flex-direction: column;align-items: stretch;">
            <el-row class="homeCard">
                <div class="basic-line">
                    <span>任务类型：</span>
                    <el-select v-model="tableData.params.workType" clearable filterable class="input-box" placeholder="任务类型">
                        <el-option v-for="item in workTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="basic-line">
                    <span>部门：</span>
                    <el-cascader class="input-box" :options="departmentList" :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
                                 placeholder="请选择部门" clearable v-model="tableData.params.execDepId"
                                 @change="changeGroup"
                    > </el-cascader>
                </div>
                <div class="basic-line">
                    <span>执行班组：</span>
                    <el-select v-model="tableData.params.execClassgroupId" clearable filterable class="input-box" placeholder="执行班组">
                        <el-option v-for="item in classGroupList" :key="item.id" :label="item.groupName" :value="item.id"></el-option>
                    </el-select>
                </div>
                <div style="padding-bottom: 10px">
                    <el-button type="primary" @click="getInspectionTask">查询</el-button>
                    <el-button plain @click="reset">重置</el-button>
                </div>
            </el-row>
            <div class="homeCard">
                <div class="main-card">
                    <el-row class="cardTop">
                        <el-col :span="12" class="mainCardBtn">
                            <el-button type="primary" :icon="Plus" size="default" @click="openInspectTaskDialog('新增', {})">新增</el-button>
                          <el-button type="primary" :icon="Upload" size="default" @click="openUploadDialog('任务')">导入</el-button>
                            <!--                            <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>-->
                        </el-col>
                        <el-button type="primary" :icon="Refresh" size="default" />
                    </el-row>
                    <el-table ref="multipleTableRef" :data="tableData.inspectTaskData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }" @selection-change="handleSelectionChange">
<!--                        <el-table-column type="selection" width="55" />-->
                        <el-table-column property="unitName" label="任务名称" />
                        <el-table-column property="workType" label="任务类型">
                            <template #default="scope">
  <div class="home-container">
    <div style="height: 100%;display: flex;flex-direction: column;align-items: stretch;">
      <el-row class="homeCard">
        <div class="basic-line">
          <span>任务类型：</span>
          <el-select v-model="tableData.params.workType" clearable filterable class="input-box" placeholder="任务类型">
            <el-option v-for="item in workTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="basic-line">
          <span>部门：</span>
          <el-cascader class="input-box" :options="departmentList" :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
                       placeholder="请选择部门" clearable v-model="tableData.params.execDepId"
                       @change="changeGroup"
          > </el-cascader>
        </div>
        <div class="basic-line">
          <span>执行班组：</span>
          <el-select v-model="tableData.params.execClassgroupId" clearable filterable class="input-box" placeholder="执行班组">
            <el-option v-for="item in classGroupList" :key="item.id" :label="item.groupName" :value="item.id"></el-option>
          </el-select>
        </div>
        <div style="padding-bottom: 10px">
          <el-button type="primary" @click="getInspectionTask">查询</el-button>
          <el-button plain @click="reset">重置</el-button>
        </div>
      </el-row>
      <div class="homeCard">
        <div class="main-card">
          <el-row class="cardTop">
            <el-col :span="12" class="mainCardBtn">
              <el-button type="primary" :icon="Plus" size="default" @click="openInspectTaskDialog('新增', {})">新增</el-button>
              <el-button type="primary" :icon="Upload" size="default" @click="openUploadDialog('任务')">导入</el-button>
              <!--                            <el-button type="danger" :icon="Delete" size="default" plain>删除</el-button>-->
            </el-col>
            <el-button type="primary" :icon="Refresh" size="default" />
          </el-row>
          <el-table ref="multipleTableRef" :data="tableData.inspectTaskData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }" @selection-change="handleSelectionChange">
            <!--                        <el-table-column type="selection" width="55" />-->
            <el-table-column property="unitName" label="任务名称" />
            <el-table-column property="workType" label="任务类型">
              <template #default="scope">
                                <span>
                                    {{ parseNumber(scope.row.workType, '任务类型') }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column property="execClassgroupId" label="巡检班组">
                            <template #default="scope">
              </template>
            </el-table-column>
            <el-table-column property="execClassgroupId" label="巡检班组">
              <template #default="scope">
                                <span>
                                    {{ parseNumber(scope.row.execClassgroupId, '巡检班组') }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column property="frequency" label="检查频次">
                            <template #default="scope">
              </template>
            </el-table-column>
            <el-table-column property="frequency" label="检查频次">
              <template #default="scope">
                                <span>
                                    {{ scope.row.checkCycle }}
                                </span>
                                <span>
                <span>
                                    {{ scope.row.checkCycleUnit }}
                                </span>
                            </template>
                        </el-table-column>
                        <!--                        <el-table-column prop="validTime" label="有效时间" show-overflow-tooltip>-->
                        <!--                            <template #default="scope">-->
                        <!--                                <span>-->
                        <!--                                    {{ scope.row.validTime }}-->
                        <!--                                </span>-->
                        <!--                                <span>-->
                        <!--                                    {{ parseNumber(scope.row.validTimeUnit, '检查频次') }}-->
                        <!--                                </span>-->
                        <!--                            </template>-->
                        <!--                        </el-table-column>-->
                        <!--                        <el-table-column prop="validTime" label="提醒时间" show-overflow-tooltip>-->
                        <!--                            <template #default="scope">-->
                        <!--                                <span>-->
                        <!--                                    {{ scope.row.noticeTime }}-->
                        <!--                                </span>-->
                        <!--                                <span>-->
                        <!--                                    {{ parseNumber(scope.row.noticeTimeUnit, '检查频次') }}-->
                        <!--                                </span>-->
                        <!--                            </template>-->
                        <!--                        </el-table-column>-->
                        <el-table-column property="firstStartTime" label="任务开始时间" />
                        <el-table-column prop="createUserName" label="创建人" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column>
                        <el-table-column property="taskUnitStatus" label="状态" width="60">
                            <template #default="scope">
                                <div>
                                    <div v-if="scope.row.taskUnitStatus === 1">
                                        <el-tag :type="''">
                                            {{ '开启' }}
                                        </el-tag>
                                    </div>
                                    <div v-if="scope.row.taskUnitStatus === 2">
                                        <el-tag :type="'danger'">
                                            {{ '关闭' }}
                                        </el-tag>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" align="center" width="300">
                            <template #default="scope">
                                <el-button link type="primary" size="small" :icon="View" @click="openInspectTaskDialog('查看', scope.row)">查看</el-button>
                                <el-button link type="primary" size="small" :icon="Edit" @click="openInspectTaskDialog('修改', scope.row)">修改</el-button>
                                <el-button link type="danger" size="small" :icon="Delete" v-if="scope.row.taskUnitStatus === 2" @click="deleteInspectTask(scope.row)">删除</el-button>
                                <div @click="changeStatus(scope.row)">
                                    <el-switch v-model="scope.row.taskUnitStatus" inline-prompt active-text="开" inactive-text="关" :active-value="1" :inactive-value="2" style="margin: 0 10px" />
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pageBtn">
                        <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="tableData.params.pageIndex" background v-model:page-size="tableData.params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" class="page-position"> </el-pagination>
                    </div>
              </template>
            </el-table-column>
            <!--                        <el-table-column prop="validTime" label="有效时间" show-overflow-tooltip>-->
            <!--                            <template #default="scope">-->
            <!--                                <span>-->
            <!--                                    {{ scope.row.validTime }}-->
            <!--                                </span>-->
            <!--                                <span>-->
            <!--                                    {{ parseNumber(scope.row.validTimeUnit, '检查频次') }}-->
            <!--                                </span>-->
            <!--                            </template>-->
            <!--                        </el-table-column>-->
            <!--                        <el-table-column prop="validTime" label="提醒时间" show-overflow-tooltip>-->
            <!--                            <template #default="scope">-->
            <!--                                <span>-->
            <!--                                    {{ scope.row.noticeTime }}-->
            <!--                                </span>-->
            <!--                                <span>-->
            <!--                                    {{ parseNumber(scope.row.noticeTimeUnit, '检查频次') }}-->
            <!--                                </span>-->
            <!--                            </template>-->
            <!--                        </el-table-column>-->
            <el-table-column property="firstStartTime" label="任务开始时间" />
            <el-table-column prop="createUserName" label="创建人" show-overflow-tooltip></el-table-column>
            <el-table-column prop="gmtCreate" label="创建时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="lastEditUserName" label="最后修改人" show-overflow-tooltip></el-table-column>
            <el-table-column prop="gmtModitify" label="最后修改时间" show-overflow-tooltip></el-table-column>
            <el-table-column property="taskUnitStatus" label="状态" width="60">
              <template #default="scope">
                <div>
                  <div v-if="scope.row.taskUnitStatus === 1">
                    <el-tag :type="''">
                      {{ '开启' }}
                    </el-tag>
                  </div>
                  <div v-if="scope.row.taskUnitStatus === 2">
                    <el-tag :type="'danger'">
                      {{ '关闭' }}
                    </el-tag>
                  </div>
                </div>
            </div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="300">
              <template #default="scope">
                <el-button link type="primary" size="small" :icon="View" @click="openInspectTaskDialog('查看', scope.row)">查看</el-button>
                <el-button link type="primary" size="small" :icon="Edit" @click="openInspectTaskDialog('修改', scope.row)">修改</el-button>
                <el-button link type="danger" size="small" :icon="Delete" v-if="scope.row.taskUnitStatus === 2" @click="deleteInspectTask(scope.row)">删除</el-button>
                <div @click="changeStatus(scope.row)">
                  <el-switch v-model="scope.row.taskUnitStatus" inline-prompt active-text="开" inactive-text="关" :active-value="1" :inactive-value="2" style="margin: 0 10px" />
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pageBtn">
            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="tableData.params.pageIndex" background v-model:page-size="tableData.params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" class="page-position"> </el-pagination>
          </div>
        </div>
        <inspect-task-dialog ref="inspectTaskDialogRef" @refreshInspectTask="getInspectionTask"></inspect-task-dialog>
        <upload-dialog ref="uploadRef" @refresh="getInspectionTask"></upload-dialog>
      </div>
    </div>
    <inspect-task-dialog ref="inspectTaskDialogRef" @refreshInspectTask="getInspectionTask"></inspect-task-dialog>
    <upload-dialog ref="uploadRef" @refresh="getInspectionTask"></upload-dialog>
  </div>
</template>

<script lang="ts">
@@ -139,514 +139,514 @@
import { facilityAreaApi } from '/@/api/intellectInspectSystem/facilityAreaManage';
import { RFIDApi } from '/@/api/intellectInspectSystem/RFID';
let global: any = {
    homeChartOne: null,
    homeChartTwo: null,
    homeCharThree: null,
    dispose: [null, '', undefined]
  homeChartOne: null,
  homeChartTwo: null,
  homeCharThree: null,
  dispose: [null, '', undefined]
};

interface stateType {
    tableData: {
        inspectTaskData: [];
        total: number;
        loading: boolean;
        params: {
            pageIndex: number | null;
            pageSize: number | null;
            execDepId: number | null;
            unitName: string | null;
            workType: number | null;
            createUserId: number | null;
            execClassgroupId: number | null;
            checkCycle: number | null;
            checkCycleUnit: number | null;
        };
  tableData: {
    inspectTaskData: [];
    total: number;
    loading: boolean;
    params: {
      pageIndex: number | null;
      pageSize: number | null;
      execDepId: number | null;
      unitName: string | null;
      workType: number | null;
      createUserId: number | null;
      execClassgroupId: number | null;
      checkCycle: number | null;
      checkCycleUnit: number | null;
    };
    workTypeList: Array<type>;
    quotaList: [];
    departmentList: [];
    classGroupList: Array<classGroup>;
    inspectPointAllList: [];
    regionNameList: [];
    RFIDList: [];
    timeType: Array<type>;
  };
  workTypeList: Array<type>;
  quotaList: [];
  departmentList: [];
  classGroupList: Array<classGroup>;
  inspectPointAllList: [];
  regionNameList: [];
  RFIDList: [];
  timeType: Array<type>;
}
interface type {
    id: number;
    name: string;
  id: number;
  name: string;
}
interface classGroup {
    id: number;
    groupName: string;
  id: number;
  groupName: string;
}
export default {
    name: 'index',
    components: { inspectTaskDialog, uploadDialog },
    setup() {
        const inspectTaskDialogRef = ref();
        const uploadRef = ref()
        const state = reactive<stateType>({
            tableData: {
                inspectTaskData: [],
                total: 0,
                loading: false,
                params: {
                    pageIndex: 1,
                    pageSize: 10,
                    unitName: null,
                    execDepId: null,
                    workType: null,
                    createUserId: null,
                    execClassgroupId: null,
                    checkCycle: null,
                    checkCycleUnit: null
                }
            },
            workTypeList: [
                { id: 1, name: '周期任务' },
                { id: 2, name: '单次任务' }
            ],
            quotaList: [],
            departmentList: [],
            classGroupList: [],
            inspectPointAllList: [],
            regionNameList: [],
            RFIDList: [],
            timeType: [
                { id: 1, name: '分' },
                { id: 2, name: '小时' },
                { id: 3, name: '日' },
                { id: 4, name: '月' },
                { id: 5, name: '年' }
            ],
        });

        //获取巡检任务数据
        const getInspectionTask = async () => {
            let res = await inspectTaskApi().getInspectTaskList(state.tableData.params);
            if (res.data.code === '200') {
                state.tableData.inspectTaskData = res.data.data.records;
                state.tableData.total = res.data.data.total;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        //获取部门
        const getDepartmentData = async () => {
            let res = await departmentApi().getDepartmentList();
            if (res.data.code === '200') {
                state.departmentList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        //获取部门
        // const getQuotaList = async () => {
        //     let res = await inspectTaskApi().getQuotaList();
        //     if (res.data.code === '200') {
        //         state.quotaList = res.data.data;
        //     } else {
        //         ElMessage({
        //             type: 'warning',
        //             message: res.data.msg
        //         });
        //     }
        // };
      //获取部门
      const getQuotaList = async () => {
        let res = await inspectTaskApi().getAllQuotaList();
        if (res.data.code === '200') {
          state.quotaList = res.data.data;
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
  name: 'index',
  components: { inspectTaskDialog, uploadDialog },
  setup() {
    const inspectTaskDialogRef = ref();
    const uploadRef = ref()
    const state = reactive<stateType>({
      tableData: {
        inspectTaskData: [],
        total: 0,
        loading: false,
        params: {
          pageIndex: 1,
          pageSize: 10,
          unitName: null,
          execDepId: null,
          workType: null,
          createUserId: null,
          execClassgroupId: null,
          checkCycle: null,
          checkCycleUnit: null
        }
      };
      },
      workTypeList: [
        { id: 1, name: '周期任务' },
        { id: 2, name: '单次任务' }
      ],
      quotaList: [],
      departmentList: [],
      classGroupList: [],
      inspectPointAllList: [],
      regionNameList: [],
      RFIDList: [],
      timeType: [
        { id: 1, name: '分' },
        { id: 2, name: '小时' },
        { id: 3, name: '日' },
        { id: 4, name: '月' },
        { id: 5, name: '年' }
      ],
    });

        //获取巡检点
        const getInspectTaskPoint = async () => {
            let res = await inspectPointApi().getInspectPointAll();
            if (res.data.code === '200') {
                state.inspectPointAllList = res.data.data;
            } else {
    //获取巡检任务数据
    const getInspectionTask = async () => {
      let res = await inspectTaskApi().getInspectTaskList(state.tableData.params);
      if (res.data.code === '200') {
        state.tableData.inspectTaskData = res.data.data.records;
        state.tableData.total = res.data.data.total;
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };

    //获取部门
    const getDepartmentData = async () => {
      let res = await departmentApi().getDepartmentList();
      if (res.data.code === '200') {
        state.departmentList = res.data.data;
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };

    //获取部门
    // const getQuotaList = async () => {
    //     let res = await inspectTaskApi().getQuotaList();
    //     if (res.data.code === '200') {
    //         state.quotaList = res.data.data;
    //     } else {
    //         ElMessage({
    //             type: 'warning',
    //             message: res.data.msg
    //         });
    //     }
    // };
    //获取部门
    const getQuotaList = async () => {
      let res = await inspectTaskApi().getAllQuotaList();
      if (res.data.code === '200') {
        state.quotaList = res.data.data;
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };

    //获取巡检点
    const getInspectTaskPoint = async () => {
      let res = await inspectPointApi().getInspectPointAll();
      if (res.data.code === '200') {
        state.inspectPointAllList = res.data.data;
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };

    //获取所有设施区域名称
    const initFacilityAreaType = async () => {
      let res = await facilityAreaApi().getAllFacilityAreaList();
      if (res.data.code === '200') {
        state.regionNameList = JSON.parse(JSON.stringify(res.data.data));
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };

    //获取所有RFID名称
    const initRFIDList = async () => {
      let res = await RFIDApi().getAllRFIDList();
      if (res.data.code === '200') {
        state.RFIDList = JSON.parse(JSON.stringify(res.data.data));
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };

    //获取班组
    const getClassGroupData = async () => {
      let res = await teamManageApi().getRecord({ depIp: null, groupName: null, containGroupMemberEnable: null });
      if (res.data.code === '200') {
        state.classGroupList = res.data.data;
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };

    const changeGroup = async () => {
      if(state.tableData.params.execDepId === null) {
        state.classGroupList = []
      }else{
        let res = await departmentApi().getByDepId({depId:state.tableData.params.execDepId})
        if(res.data.code === '200'){
          state.classGroupList = res.data.data
        }else{

        }
      }
    };

    const changeStatus = async (value: { taskUnitStatus: number; id: number }) => {
      if (value.taskUnitStatus === 2) {
        ElMessageBox.confirm(`此操作将关闭该巡检任务”，是否继续?`, '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        })
            .then(async () => {
              let res = await inspectTaskApi().openOrCloseInspectTask({ id: value.id, taskUnitStatus: 2 });
              if (res.data.code === '200') {
                await getInspectionTask();
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                  type: 'success',
                  duration: 2000,
                  message: '关闭成功'
                });
            }
        };

        //获取所有设施区域名称
        const initFacilityAreaType = async () => {
            let res = await facilityAreaApi().getAllFacilityAreaList();
            if (res.data.code === '200') {
                state.regionNameList = JSON.parse(JSON.stringify(res.data.data));
            } else {
              } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                  type: 'warning',
                  message: res.data.msg
                });
            }
        };

        //获取所有RFID名称
        const initRFIDList = async () => {
            let res = await RFIDApi().getAllRFIDList();
            if (res.data.code === '200') {
                state.RFIDList = JSON.parse(JSON.stringify(res.data.data));
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        //获取班组
        const getClassGroupData = async () => {
            let res = await teamManageApi().getRecord({ depIp: null, groupName: null, containGroupMemberEnable: null });
            if (res.data.code === '200') {
                state.classGroupList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const changeGroup = async () => {
            if(state.tableData.params.execDepId === null) {
                state.classGroupList = []
            }else{
                let res = await departmentApi().getByDepId({depId:state.tableData.params.execDepId})
                if(res.data.code === '200'){
                    state.classGroupList = res.data.data
                }else{

                }
            }
        };

        const changeStatus = async (value: { taskUnitStatus: number; id: number }) => {
            if (value.taskUnitStatus === 2) {
                ElMessageBox.confirm(`此操作将关闭该巡检任务”，是否继续?`, '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(async () => {
                        let res = await inspectTaskApi().openOrCloseInspectTask({ id: value.id, taskUnitStatus: 2 });
                        if (res.data.code === '200') {
                            await getInspectionTask();
                            ElMessage({
                                type: 'success',
                                duration: 2000,
                                message: '关闭成功'
                            });
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    })
                    .catch((error) => {});
            } else {
                ElMessageBox.confirm(`此操作将开启该巡检任务”，是否继续?`, '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(async () => {
                        let res = await inspectTaskApi().openOrCloseInspectTask({ id: value.id, taskUnitStatus: 1 });
                        if (res.data.code === '200') {
                            await getInspectionTask();
                            ElMessage({
                                type: 'success',
                                duration: 2000,
                                message: '开启成功'
                            });
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    })
                    .catch((error) => {});
            }
            await getInspectionTask();
        };

        // 删除
        const deleteInspectTask = (row: any) => {
            ElMessageBox.confirm(`此操作将永久删除该任务：“${row.unitName}”，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
              }
            })
                .then(async () => {
                    let res = await inspectTaskApi().deleteInspectTask({ id: row.id });
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await getInspectionTask();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };
            .catch((error) => {});
      } else {
        ElMessageBox.confirm(`此操作将开启该巡检任务”，是否继续?`, '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        })
            .then(async () => {
              let res = await inspectTaskApi().openOrCloseInspectTask({ id: value.id, taskUnitStatus: 1 });
              if (res.data.code === '200') {
                await getInspectionTask();
                ElMessage({
                  type: 'success',
                  duration: 2000,
                  message: '开启成功'
                });
              } else {
                ElMessage({
                  type: 'warning',
                  message: res.data.msg
                });
              }
            })
            .catch((error) => {});
      }
      await getInspectionTask();
    };

        const openInspectTaskDialog = (type: string, value: {}) => {
            inspectTaskDialogRef.value.showInspectTaskDialog(type, value, state.workTypeList, state.departmentList, state.timeType, state.classGroupList, state.quotaList, state.inspectPointAllList, state.regionNameList, state.RFIDList);
        };

        const parseNumber = (value: number, type: string) => {
            if (type === '任务类型') {
                return state.workTypeList.find((item) => item.id === value)?.name;
            } else if (type === '检查频次') {
                return state.timeType.find((item) => item.id == value)?.name;
    // 删除
    const deleteInspectTask = (row: any) => {
      ElMessageBox.confirm(`此操作将永久删除该任务：“${row.unitName}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(async () => {
            let res = await inspectTaskApi().deleteInspectTask({ id: row.id });
            if (res.data.code === '200') {
              ElMessage({
                type: 'success',
                duration: 2000,
                message: '删除成功'
              });
              await getInspectionTask();
            } else {
                return state.classGroupList.find((item) => item.id == value)?.groupName;
              ElMessage({
                type: 'warning',
                message: res.data.msg
              });
            }
        };
          })
          .catch(() => {});
    };

        const openUploadDialog = (type: string)=>{
          uploadRef.value.open(type)
        }
    const openInspectTaskDialog = (type: string, value: {}) => {
      inspectTaskDialogRef.value.showInspectTaskDialog(type, value, state.workTypeList, state.departmentList, state.timeType, state.classGroupList, state.quotaList, state.inspectPointAllList, state.regionNameList, state.RFIDList);
    };

        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.tableData.params.pageSize = val;
            getInspectionTask();
        };
        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.tableData.params.pageIndex = val;
            getInspectionTask();
        };
    const parseNumber = (value: number, type: string) => {
      if (type === '任务类型') {
        return state.workTypeList.find((item) => item.id === value)?.name;
      } else if (type === '检查频次') {
        return state.timeType.find((item) => item.id == value)?.name;
      } else {
        return state.classGroupList.find((item) => item.id == value)?.groupName;
      }
    };

        const reset = () => {
            state.tableData.params = {
                pageIndex: 1,
                pageSize: 10,
                unitName: null,
                execDepId: null,
                workType: null,
                createUserId: null,
                execClassgroupId: null,
                checkCycle: null,
                checkCycleUnit: null
            };
        };

        // 页面加载时
        onMounted(() => {
            getInspectionTask();
            getQuotaList();
            getDepartmentData();
            getClassGroupData();
            getInspectTaskPoint();
            initFacilityAreaType();
            initRFIDList();
        });

        return {
            View,
            Edit,
            Delete,
            Refresh,
            Plus,
            Upload,
            reset,
          openUploadDialog,
            changeStatus,
            changeGroup,
            parseNumber,
            deleteInspectTask,
            getInspectionTask,
            onHandleSizeChange,
            onHandleCurrentChange,
            inspectTaskDialogRef,
            uploadRef,
            openInspectTaskDialog,
            ...toRefs(state)
        };
    const openUploadDialog = (type: string)=>{
      uploadRef.value.open(type)
    }

    // 分页改变
    const onHandleSizeChange = (val: number) => {
      state.tableData.params.pageSize = val;
      getInspectionTask();
    };
    // 分页改变
    const onHandleCurrentChange = (val: number) => {
      state.tableData.params.pageIndex = val;
      getInspectionTask();
    };

    const reset = () => {
      state.tableData.params = {
        pageIndex: 1,
        pageSize: 10,
        unitName: null,
        execDepId: null,
        workType: null,
        createUserId: null,
        execClassgroupId: null,
        checkCycle: null,
        checkCycleUnit: null
      };
    };

    // 页面加载时
    onMounted(() => {
      getInspectionTask();
      getQuotaList();
      getDepartmentData();
      getClassGroupData();
      getInspectTaskPoint();
      initFacilityAreaType();
      initRFIDList();
    });

    return {
      View,
      Edit,
      Delete,
      Refresh,
      Plus,
      Upload,
      reset,
      openUploadDialog,
      changeStatus,
      changeGroup,
      parseNumber,
      deleteInspectTask,
      getInspectionTask,
      onHandleSizeChange,
      onHandleCurrentChange,
      inspectTaskDialogRef,
      uploadRef,
      openInspectTaskDialog,
      ...toRefs(state)
    };
  }
};
</script>

<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
    height: calc(100vh - 144px);
  height: calc(100vh - 144px);
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  .homeCard {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    .homeCard {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 4px;
        flex: 0 auto;
    background: #fff;
    border-radius: 4px;
    flex: 0 auto;

        .main-card {
            width: 100%;
            height: 100%;
            .cardTop {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn {
                    margin: 0;
                }
            }
            .pageBtn {
              position: absolute;
              width: 100%;
              z-index: 99;
              bottom: 0;
              right: 0;
              height: 60px;
              border-radius: 0 0 4px 4px;
              padding-right: 20px;
              background: #fff;
              display: flex;
              align-items: center;
              justify-content: right;

                .demo-pagination-block + .demo-pagination-block {
                    margin-top: 10px;
                }
                .demo-pagination-block .demonstration {
                    margin-bottom: 16px;
                }
            }
        }
        &:last-of-type {
          flex: 1;
        }
    }
    .el-row {
    .main-card {
      width: 100%;
      height: 100%;
      .cardTop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        .mainCardBtn {
          margin: 0;
        }
        .grid-content {
            align-items: center;
            min-height: 36px;
        }
      }
      .pageBtn {
        position: absolute;
        width: 100%;
        z-index: 99;
        bottom: 0;
        right: 0;
        height: 60px;
        border-radius: 0 0 4px 4px;
        padding-right: 20px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: right;

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

            & > div {
                white-space: nowrap;
                margin-right: 20px;
            }
        .demo-pagination-block + .demo-pagination-block {
          margin-top: 10px;
        }
    }
}
.stepItem {
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    margin-left: 30px;
    padding-bottom: 30px;
    border-left: 2px solid #ccc;
    &:first-of-type {
        margin-top: 30px;
        .demo-pagination-block .demonstration {
          margin-bottom: 16px;
        }
      }
    }
    &:last-of-type {
        margin-bottom: 0;
        border-left: none;
      flex: 1;
    }
    .stepNum {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        box-sizing: border-box;
        color: #333;
        border: 1px solid #999;
        line-height: 28px;
        text-align: center;
        margin-right: 10px;
        margin-left: -16px;
        margin-top: -30px;
  }
  .el-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    .stepCard {
        width: 100%;
        margin-top: -30px;
    .grid-content {
      align-items: center;
      min-height: 36px;
    }

        .box-card {
            width: 100%;
            &:deep(.el-card__header) {
                padding: 10px 15px;
            }
            .card-header {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                & > div:first-of-type {
                    margin-right: 80px;
                    font-size: 18px;
                    font-weight: bold;
                }
            }
    .topInfo {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: bold;

      & > div {
        white-space: nowrap;
        margin-right: 20px;
      }
    }
  }
}
.stepItem {
  width: 100%;
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
  margin-left: 30px;
  padding-bottom: 30px;
  border-left: 2px solid #ccc;
  &:first-of-type {
    margin-top: 30px;
  }
  &:last-of-type {
    margin-bottom: 0;
    border-left: none;
  }
  .stepNum {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    box-sizing: border-box;
    color: #333;
    border: 1px solid #999;
    line-height: 28px;
    text-align: center;
    margin-right: 10px;
    margin-left: -16px;
    margin-top: -30px;
  }
  .stepCard {
    width: 100%;
    margin-top: -30px;

    .box-card {
      width: 100%;
      &:deep(.el-card__header) {
        padding: 10px 15px;
      }
      .card-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        & > div:first-of-type {
          margin-right: 80px;
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
    &:hover .card-header {
        color: #0098f5;
    }
    &:hover .stepNum {
        border: 2px solid #0098f5;
        color: #0098f5;
    }
  }
  &:hover .card-header {
    color: #0098f5;
  }
  &:hover .stepNum {
    border: 2px solid #0098f5;
    color: #0098f5;
  }
}
.el-input {
    width: 100% !important;
  width: 100% !important;
}
:deep(.el-date-editor) {
    width: 100%;
  width: 100%;
}
.el-select {
    width: 100%;
  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));
  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));
  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);
  background-color: var(--el-card-bg-color);
}
</style>

 src/views/newHome/index.vue

@@ -146,8 +146,10 @@
                    <div class="toplayer">
                        <img class="iconImg" src="../../assets/newMenu/icon9.png" />
                        <div>
                            <div class="itemTit">智能安全危险化学品全生命周期管控系统</div>
                            <div class="enTit">Intelligent Security Hazardous Chemicals Life Cycle Safety Management System </div>
<!--                            <div class="itemTit">智能安全危险化学品全生命周期管控系统</div>-->
<!--                            <div class="enTit">Intelligent Security Hazardous Chemicals Life Cycle Safety Management System</div>-->
                            <div class="itemTit">安全教育考试系统</div>
                            <div class="enTit">Safety Education Examination System</div>
                        </div>
                    </div>
                    <img class="bgImg" src="../../assets/newMenu/card-10.png" />
@@ -358,22 +360,27 @@
            });
        };
        // 去风险大屏
        const toRiskPlatform = () => {
        const toRiskPlatform = async() => {
            // router.push({
            //     name: "warningScreen"
            // });
          const routePath = '/warningScreen';
          const resolvedRoute = router.resolve(routePath);
          const fullPath = resolvedRoute.href
          window.open(fullPath, '_blank');
          // window.open(fullPath, '_blank');

            window.open('http://39.104.85.193:8585/');
            // window.open('http://39.104.85.193:8585/');
        };

        const toDoublePrevent = () => {
           window.open('http://124.88.37.66:6801');
           window.open('http://117.190.40.54:6801/login');
        };
        const toSmartFactory = () =>{
          window.open('http://10.211.134.139:5522/#/login');
          window.open('http://117.190.40.54:5522/#/login');
        }
        const toManLocation = () =>{
          window.open('http://124.88.37.66:8081/location_system_5.4.9/login/login.html?company=GUOTAI&version=5.4.9');
          window.open('http://117.190.40.54:8081/location_system_5.4.9/login/login.html?company=GUOTAI&version=5.4.9');
        }
        const throttle = (renderMenu: any, delay: number) => {
            let flag = true;
@@ -424,7 +431,8 @@
        };

        const renderToNew = () => {
            window.open('http://222.92.213.22:18001/smartlab/', '_blank');
            // window.open('http://222.92.213.22:18001/smartlab/', '_blank');
          window.open('http://106.15.95.149:8005/nanoweb/foreground/', '_blank');
        };
        // //点击进入特殊作业
        // const toSpecialWorkSys = () => {

 src/views/newSpecialWorkSystem/workTicket/sqjl/index.vue

@@ -34,6 +34,13 @@
                          />
                        </el-select>
                      </div>
                      <div class="basic-line" style="display:flex;white-space:nowrap;line-height: 40px">
                        <span>作业票编号：</span>
                        <el-input
                            v-model="searPara.workPermitNo"
                            placeholder="请输入作业票编号"
                        />
                      </div>
                      <div style="margin-left: 20px">
                        <el-button type="primary" @click="searchRecord">查询</el-button>
                        <el-button plain @click="clearSearch">重置</el-button>
@@ -59,7 +66,12 @@
                                <el-table-column property="applyDepName" label="作业所在车间" align="center"/>
                                <el-table-column property="workContent" label="作业内容" align="center"/>
                                <el-table-column property="workTypeDesc" label="作业类型" align="center"/>
                                <el-table-column property="workDepName" label="作业单位" align="center"/>
                                <el-table-column label="作业单位" align="center">
                                  <template #default="scope">
                                    <span v-if="scope.row.workDepList && scope.row.workDepList.length>0">{{scope.row.workDepList.map(i=>i.workDepName).join(',')}}</span>
                                    <span v-else>{{scope.row.workDepName }}</span>
                                  </template>
                                </el-table-column>
                                <el-table-column property="headList" label="负责人及电话" align="center">
                                  <template #default="scope">
                                    {{scope.row.headList.map(i=>{return i.userName + '(' + i.phone+ ')' }).join('，')}}
@@ -328,6 +340,7 @@
            searPara:{
              startTime: '',
              endTime: '',
              workPermitNo: '',
              workType: null,
              headUserName: '',
              secondDepId: null
@@ -365,48 +378,72 @@
            ],
          statusList: [
            {
              value: -1,
              label: '废止'
            },
            {
              value: 0,
              label: '风险研判中'
              label: '风险研判'
            },
            {
              value: 1,
              label: '票证办理中'
              label: '票证办理'
            },
            {
              value: 2,
              label: '安全措施确认中'
              label: '气体分析'
            },
            {
              value: 3,
              label: '培训交底中'
              label: '安全措施确认，培训交底'
            },
            {
              value: 4,
              label: '气体分析中'
              label: '安全措施确认'
            },
            {
              value: 5,
              label: '作业开始'
              label: '培训交底'
            },
            {
              value: 6,
              label: '作业监护'
              label: '部门审批'
            },
            {
              value: 7,
              label: '作业结束'
              label: '作业票填报结束'
            },
            {
              value: 8,
              label: '作业验收'
              label: '作业气体分析不合格'
            },
            {
              value: 9,
              label: '安全措施确认，培训交底中'
              label: '审批未通过'
            },
            {
              value: 10,
              label: '开始'
            },
            {
              value: 11,
              label: '监护'
            },
            {
              value: 12,
              label: '结束'
            },
            {
              value: 13,
              label: '待验收'
            },
            {
              value: 14,
              label: '验收完成'
            },
            {
              value: 15,
              label: '取消'
            },
            {
              value: 16,
              label: '废止作业票'
            }
          ],
          timeRange: []
@@ -504,6 +541,7 @@

        // 关键词查询记录
        const searchRecord = async () => {
            state.pageIndex1 = 1
            getListByPage();
        };
        // 重置搜索
@@ -512,10 +550,12 @@
            state.searPara = {
              startTime: '',
              endTime: '',
              workPermitNo: '',
              workType: null,
              headUserName: '',
              secondDepId: null
            };
            state.pageIndex1 = 1
            getListByPage();
        };


 src/views/newSpecialWorkSystem/workTicket/wdsq/components/brokenDialog.vue

@@ -12,13 +12,21 @@
      </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="作业单位" prop="workDepId">
              <el-cascader style="width: 100%" v-model="form.workDepId" :props="depProps" :options="lists.departList" :show-all-levels="false"/>
            <el-form-item label="作业单位" prop="workDepIds">
              <el-cascader style="width: 100%" v-model="form.workDepIds" :props="depProps" @change="getWorkerList" :options="lists.departList" :show-all-levels="false"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="涉及相关单位（部门）" prop="workDetail.involvedDepIds">
              <el-cascader style="width: 100%" v-model="form.workDetail.involvedDepIds" :props="depProps2" :options="lists.departList" :show-all-levels="false"/>
            <el-form-item label="作业人" prop="operatorUids">
              <el-select v-model="form.operatorUids" filterable multiple clearable>
                <el-option
                    v-for="item in zyList"
                    :key="item.uid"
                    :label="item.realName"
                    :value="item.uid"
                />
              </el-select>
              <!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
            </el-form-item>
          </el-col>
        </el-row>
@@ -84,16 +92,8 @@
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
              <el-option
                  v-for="item in lists.spList.opList"
                  :key="item.uid"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          <el-form-item label="涉及相关单位（部门）" prop="workDetail.involvedDepIds">
            <el-cascader style="width: 100%" v-model="form.workDetail.involvedDepIds" :props="depProps2" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
      </el-row>
@@ -376,6 +376,7 @@
    depProps:{},
    depProps2:{},
    safetyMeasureBasicList: [],
    zyList: []
    fileList: Array<file>,
    uploadUrl: string,
    dialogVisible: Boolean,
@@ -398,6 +399,7 @@
        showDialog: false,
                equipmentDialog: false,
        safetyMeasureBasicList: [],
        zyList: [],
                form: {
          id: null,
          workType: 5,
@@ -410,7 +412,7 @@
          headUids: [],
          analystUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -440,6 +442,7 @@
          expandTrigger: 'hover',
          label: 'depName',
          value: 'depId',
          multiple: true,
          checkStrictly: true,
          emitPath: false
        },
@@ -464,7 +467,7 @@
        workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        operatorUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        headUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        analystUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
@@ -485,16 +488,26 @@
      const workSelectRef = ref()
            // 页面载入时执行方法
            onMounted(() => {
        getBasicData()

      });
      const openWorkSelect = ()=>{
        workSelectRef.value.openDialog(state.form.involveOtherWork)
      }

      const getWorkerList = ()=>{
        const filteredList = props.lists.spList.opList.filter(i => state.form.workDepIds.includes(i.depId));
        if(filteredList && filteredList.length>0){
          state.zyList = filteredList
        }else{
          state.zyList = props.lists.spList.opList
        }
      }
      const getSelected = ()=>{
        state.form.involveOtherWork = workSelectRef.value.selected
      }
      const openDialog = (row)=>{
        clearFile()
        state.zyList = props.lists.spList.opList
        getBasicData()
        Object.keys(state.form).forEach(key => {
          if (row.hasOwnProperty(key)) {
            state.form[key] = JSON.parse(JSON.stringify(row))[key];
@@ -525,6 +538,12 @@
          }
        })
        state.form.workDetail.bcPath = row.workDetail.bcPath.split(',').map(item => item.match(/specialWork9step\/(.*?)\?/)[1])
        if(row.workDepList && row.workDepList.length>0){
          state.form.workDepIds = row.workDepList.map(i=>i.workDepId)
        }else{
          state.form.workDepIds.push(row.workDepId)
        }
        getWorkerList()
        state.showDialog = true
      }

@@ -541,7 +560,7 @@
          headUids: [],
          analystUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -595,16 +614,16 @@
        const res = await workApplyApi().getFormData(5)
        if (res.data.code === '200') {
          state.safetyMeasureBasicList = JSON.parse(JSON.stringify(res.data.data.safetyMeasureBasicList))
          if(res.data.data.approvalDepBasicList && res.data.data.approvalDepBasicList.length>0){
            state.form.approvalDepBasicList = res.data.data.approvalDepBasicList.map(({id,content})=>({
              content,
              approvalDepBasicId: id,
              approvalUids: [],
              approvalType: null
            }))
          }else{
            state.form.approvalDepBasicList = []
          }
          // if(res.data.data.approvalDepBasicList && res.data.data.approvalDepBasicList.length>0){
          //   state.form.approvalDepBasicList = res.data.data.approvalDepBasicList.map(({id,content})=>({
          //     content,
          //     approvalDepBasicId: id,
          //     approvalUids: [],
          //     approvalType: null
          //   }))
          // }else{
          //   state.form.approvalDepBasicList = []
          // }
        } else {
          ElMessage({
            type: 'warning',
@@ -822,6 +841,7 @@
            return {
                renderMenu,
        getBasicData,
        getWorkerList,
        getStartEndIds,
        getSafetyIds,
        isFirstRow,

 src/views/newSpecialWorkSystem/workTicket/wdsq/components/detailLog.vue

@@ -119,12 +119,14 @@
        <div class="d-tit">作业地址</div><div class="d-cont">{{details.workLocation}}</div>
      </div>
      <div class="d-row">
        <div class="d-tit">作业单位</div><div class="d-cont">{{details.workDepName}}</div>
        <div class="d-tit">作业单位</div>
        <div class="d-cont" v-if="details.workDepList && details.workDepList.length>0">{{details.workDepList.map(i=>i.workDepName).join(',')}}</div>
        <div class="d-cont" v-else>{{details.workDepName}}</div>
      </div>
      <div class="d-row">
        <div class="d-tit">作业人</div><div class="d-cont">{{details.operatorList.map(i=>{return i.userName + '(' + i.phone+ ')' }).join('、')}}</div>
      </div>
      <div class="d-row">
      <div class="d-row" v-if="details.involveOtherWork && details.involveOtherWork !== ''">
        <div class="d-tit">关联其他作业</div><div class="d-cont">{{details.involveOtherWork}}</div>
      </div>


 src/views/newSpecialWorkSystem/workTicket/wdsq/components/fireDialog.vue

@@ -46,33 +46,21 @@
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="动火方式" prop="workDetail.workMethod">
            <el-input
                v-model="form.workDetail.workMethod"
                :autosize="{ minRows: 1 }"
                type="textarea"
                placeholder="请输入动火方式"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
          <el-form-item label="动火方式" prop="workDetail.methodList">
<!--            <el-input-->
<!--                v-model="form.workDetail.workMethod"-->
<!--                :autosize="{ minRows: 1 }"-->
<!--                type="textarea"-->
<!--                placeholder="请输入动火方式"-->
<!--            />-->
            <el-select v-model="form.workDetail.methodList" filterable multiple clearable>
              <el-option
                  v-for="item in lists.spList.opList"
                  :key="item.uid"
                  :label="item.realName"
                  :value="item.uid"
                  v-for="item in fireWorkList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepId">
            <el-cascader style="width: 100%" v-model="form.workDepId" :props="depProps" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
@@ -85,7 +73,39 @@
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
            <!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="form.workDetail.methodList.find(i=>i == '其他')">
        <el-col :span="12">
          <el-form-item label="其他方式" prop="workDetail.other">
            <el-input
                v-model="form.workDetail.other"
                :autosize="{ minRows: 1 }"
                type="textarea"
                placeholder="请输入其他动火方式"
            />
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepIds">
            <el-cascader style="width: 100%" v-model="form.workDepIds" :props="depProps" @change="getWorkerList" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
              <el-option
                  v-for="item in zyList"
                  :key="item.uid"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
            <!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
            </el-row>
@@ -347,9 +367,11 @@
    interface stateType {
        form: Object,
        workLevelList: Array<any>,
    fireWorkList: Array<any>,
        equipmentDialog: boolean,
    tabLoading: boolean
    showDialog: boolean
    zyList: []
    props1:{}
    depProps:{}
    safetyMeasureBasicList: []
@@ -366,6 +388,7 @@
        showDialog: false,
                equipmentDialog: false,
        safetyMeasureBasicList: [],
        zyList: [],
                form: {
          id: null,
          workType: 1,
@@ -378,7 +401,7 @@
          headUids: [],
          analystUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -390,7 +413,9 @@
          startOrEndUids: [],
          cameraIds: [],
          workDetail: {
            workMethod: ''
            workMethod: '',
            methodList: [],
            other: ''
          },
          remark: ''
                },
@@ -408,6 +433,52 @@
                        value: 3
                    }
                ],
        fireWorkList: [
          {
            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: "破碎地面",
            id: 9
          },
          {
            name: "清洗机",
            id: 10
          },
          {
            name: "其他",
            id: 11
          }
        ],
        props1:{
          expandTrigger: 'hover',
          label: 'depName',
@@ -418,6 +489,7 @@
          expandTrigger: 'hover',
          label: 'depName',
          value: 'depId',
          multiple: true,
          checkStrictly: true,
          emitPath: false
        }
@@ -429,7 +501,7 @@
        workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        operatorUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        headUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        analystUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
@@ -441,20 +513,31 @@
        acceptUid: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        lastApprover: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        startOrEndUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                "workDetail.workMethod": [{ required: true, message: '该内容不能为空', trigger: 'blur' }]
        "workDetail.methodList": [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        "workDetail.other": [{ required: true, message: '该内容不能为空', trigger: 'blur' }]
            });
      const workSelectRef = ref()

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

      onUpdated(()=>{
        console.log('false loading')
      })

      const getWorkerList = ()=>{
        const filteredList = props.lists.spList.opList.filter(i => state.form.workDepIds.includes(i.depId));
        if(filteredList && filteredList.length>0){
          state.zyList = filteredList
        }else{
          state.zyList = props.lists.spList.opList
        }
      }
      const openDialog = (row)=>{
        clearFile()
        state.zyList = props.lists.spList.opList
        getBasicData()
        Object.keys(state.form).forEach(key => {
          if (row.hasOwnProperty(key)) {
            state.form[key] = JSON.parse(JSON.stringify(row))[key]
@@ -469,15 +552,28 @@
        state.form.cameraIds = row.workApprovalDeviceList.map(i=>i.deviceId)
        state.form.safetyMeasureUids = row.safetyMeasureList.map(i=>i.userId)
        state.form.approvalDepBasicList = row.approvalDepList.map((item)=>({
              content: item.content,
              approvalDepBasicId: item.approvalDepBasicId,
              approvalUids: item.approvalPersonList.filter(j=>j.type == 5).map(i=>i.userId),
              approvalType: item.approvalType
          content: item.content,
          approvalDepBasicId: item.approvalDepBasicId,
          approvalUids: item.approvalPersonList.filter(j=>j.type == 5).map(i=>i.userId),
          approvalType: item.approvalType
        }))
        console.log(state.form.approvalDepBasicList,777)
        state.form.acceptUid = row.acceptUser.userId
        state.form.startOrEndUids = row.startOrEndList.map(i=>i.userId)
        state.form.lastApprover = row.lastApprover.userId
        console.log(state.form,'form')
        state.form.workDetail.methodList = state.form.workDetail.workMethod.split(',')
        if(row.workDepList && row.workDepList.length>0){
          state.form.workDepIds = row.workDepList.map(i=>i.workDepId)
        }else{
          state.form.workDepIds.push(row.workDepId)
        }
        for(let i in state.form.workDetail.methodList){
          if(!state.fireWorkList.find(item=>item.name == state.form.workDetail.methodList[i])){
            state.form.workDetail.other = state.form.workDetail.methodList[i]
            state.form.workDetail.methodList[i] = '其他'
          }
        }
        getWorkerList()
        state.showDialog = true
      }

@@ -494,7 +590,7 @@
          headUids: [],
          analystUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -506,7 +602,9 @@
          startOrEndUids: [],
          cameraIds: [],
          workDetail: {
            workMethod: ''
            workMethod: '',
            methodList: [],
            other: ''
          },
          remark: ''
        }
@@ -628,6 +726,13 @@
            // }
            state.form.riskIdentification = state.form.riskIdentification.join(',')
            const {...data} = state.form
            data.workDetail.methodList = data.workDetail.methodList.map(item=>{
              if(item == '其他'){
                item = data.workDetail.other
              }
              return item
            })
            data.workDetail.workMethod = data.workDetail.methodList.join(',')
            data.operatorUids = transform2Arr(data.operatorUids)
            data.headUids = transform2Arr(data.headUids)
            // data.analystUids = transformArr(data.analystUids)
@@ -697,6 +802,7 @@
                renderMenu,
        getBasicData,
        getStartEndIds,
        getWorkerList,
        getSafetyIds,
        isFirstRow,
        submitForm,

 src/views/newSpecialWorkSystem/workTicket/wdsq/components/groundDialog.vue

@@ -22,26 +22,6 @@
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" multiple clearable>
              <el-option
                  v-for="item in lists.spList.opList"
                  :key="item.uid"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepId">
            <el-cascader style="width: 100%" v-model="form.workDepId" :props="depProps" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业负责人" prop="headUids">
            <el-select v-model="form.headUids" multiple filterable @change="getStartEndIds" clearable>
              <el-option
@@ -51,7 +31,27 @@
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
            <!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepIds">
            <el-cascader style="width: 100%" v-model="form.workDepIds" :props="depProps" @change="getWorkerList" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" multiple clearable>
              <el-option
                  v-for="item in zyList"
                  :key="item.uid"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
            <!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
            </el-row>
@@ -360,6 +360,7 @@
    props1:{},
    depProps:{},
    safetyMeasureBasicList: [],
    zyList: []
    fileList: Array<file>,
    uploadUrl: string,
    dialogVisible: Boolean,
@@ -382,6 +383,7 @@
        showDialog: false,
                equipmentDialog: false,
        safetyMeasureBasicList: [],
        zyList: [],
                form: {
          id: null,
          workType: 4,
@@ -393,7 +395,7 @@
          operatorUids: [],
          headUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -421,6 +423,7 @@
          expandTrigger: 'hover',
          label: 'depName',
          value: 'depId',
          multiple: true,
          checkStrictly: true,
          emitPath: false
        },
@@ -437,7 +440,7 @@
        workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        operatorUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        headUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        riskIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
@@ -455,17 +458,27 @@
      const workSelectRef = ref()
            // 页面载入时执行方法
            onMounted(() => {
        getBasicData()
        // getBasicData()
      });
      const openWorkSelect = ()=>{
        workSelectRef.value.openDialog(state.form.involveOtherWork)
      }

      const getWorkerList = ()=>{
        const filteredList = props.lists.spList.opList.filter(i => state.form.workDepIds.includes(i.depId));
        if(filteredList && filteredList.length>0){
          state.zyList = filteredList
        }else{
          state.zyList = props.lists.spList.opList
        }
      }
      const getSelected = ()=>{
        state.form.involveOtherWork = workSelectRef.value.selected
      }

      const openDialog = (row)=>{
        clearFile()
        state.zyList = props.lists.spList.opList
        getBasicData()
        Object.keys(state.form).forEach(key => {
          if (row.hasOwnProperty(key)) {
            state.form[key] = JSON.parse(JSON.stringify(row))[key];
@@ -495,6 +508,12 @@
          }
        })
        state.form.workDetail.gbPath = row.workDetail.gbPath.split(',').map(item => item.match(/specialWork9step\/(.*?)\?/)[1])
        if(row.workDepList && row.workDepList.length>0){
          state.form.workDepIds = row.workDepList.map(i=>i.workDepId)
        }else{
          state.form.workDepIds.push(row.workDepId)
        }
        getWorkerList()
        state.showDialog = true
      }

@@ -510,7 +529,7 @@
          operatorUids: [],
          headUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -562,16 +581,16 @@
        const res = await workApplyApi().getFormData(4)
        if (res.data.code === '200') {
          state.safetyMeasureBasicList = JSON.parse(JSON.stringify(res.data.data.safetyMeasureBasicList))
          if(res.data.data.approvalDepBasicList && res.data.data.approvalDepBasicList.length>0){
            state.form.approvalDepBasicList = res.data.data.approvalDepBasicList.map(({id,content})=>({
              content,
              approvalDepBasicId: id,
              approvalUids: [],
              approvalType: null
            }))
          }else{
            state.form.approvalDepBasicList = []
          }
          // if(res.data.data.approvalDepBasicList && res.data.data.approvalDepBasicList.length>0){
          //   state.form.approvalDepBasicList = res.data.data.approvalDepBasicList.map(({id,content})=>({
          //     content,
          //     approvalDepBasicId: id,
          //     approvalUids: [],
          //     approvalType: null
          //   }))
          // }else{
          //   state.form.approvalDepBasicList = []
          // }
        } else {
          ElMessage({
            type: 'warning',
@@ -829,6 +848,7 @@
            return {
                renderMenu,
        getBasicData,
        getWorkerList,
        getStartEndIds,
        getSafetyIds,
        isFirstRow,

 src/views/newSpecialWorkSystem/workTicket/wdsq/components/heightDialog.vue

@@ -55,26 +55,6 @@
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
              <el-option
                  v-for="item in lists.spList.opList"
                  :key="item.uid"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepId">
            <el-cascader style="width: 100%" v-model="form.workDepId" :props="depProps" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业负责人" prop="headUids">
            <el-select v-model="form.headUids" filterable multiple @change="getStartEndIds" clearable>
              <el-option
@@ -84,7 +64,27 @@
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
            <!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepIds">
            <el-cascader style="width: 100%" v-model="form.workDepIds" :props="depProps" @change="getWorkerList" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
              <el-option
                  v-for="item in zyList"
                  :key="item.uid"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
            <!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
            </el-row>
@@ -303,6 +303,7 @@
    props1:{},
    depProps:{},
    safetyMeasureBasicList: []
    zyList: []
    tabLoading: boolean
    }
    export default defineComponent({
@@ -317,6 +318,7 @@
        showDialog: false,
                equipmentDialog: false,
        safetyMeasureBasicList: [],
        zyList: [],
                form: {
          id: null,
          workType: 6,
@@ -328,7 +330,7 @@
          operatorUids: [],
          headUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -372,6 +374,7 @@
          expandTrigger: 'hover',
          label: 'depName',
          value: 'depId',
          multiple: true,
          checkStrictly: true,
          emitPath: false
        }
@@ -383,7 +386,7 @@
        workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        operatorUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        headUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        riskIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
@@ -399,16 +402,26 @@
      const workSelectRef = ref()
            // 页面载入时执行方法
            onMounted(() => {
        getBasicData()
        // getBasicData()
      });
      const openWorkSelect = ()=>{
        workSelectRef.value.openDialog(state.form.involveOtherWork)
      }

      const getWorkerList = ()=>{
        const filteredList = props.lists.spList.opList.filter(i => state.form.workDepIds.includes(i.depId));
        if(filteredList && filteredList.length>0){
          state.zyList = filteredList
        }else{
          state.zyList = props.lists.spList.opList
        }
      }
      const getSelected = ()=>{
        state.form.involveOtherWork = workSelectRef.value.selected
      }
      const openDialog = (row)=>{
        clearFile()
        state.zyList = props.lists.spList.opList
        getBasicData()
        Object.keys(state.form).forEach(key => {
          if (row.hasOwnProperty(key)) {
            state.form[key] = JSON.parse(JSON.stringify(row))[key];
@@ -431,6 +444,12 @@
        state.form.acceptUid = row.acceptUser.userId
        state.form.startOrEndUids = row.startOrEndList.map(i=>i.userId)
        state.form.lastApprover = row.lastApprover.userId
        if(row.workDepList && row.workDepList.length>0){
          state.form.workDepIds = row.workDepList.map(i=>i.workDepId)
        }else{
          state.form.workDepIds.push(row.workDepId)
        }
        getWorkerList()
        state.showDialog = true
      }

@@ -446,7 +465,7 @@
          operatorUids: [],
          headUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -496,16 +515,16 @@
        const res = await workApplyApi().getFormData(6)
        if (res.data.code === '200') {
          state.safetyMeasureBasicList = JSON.parse(JSON.stringify(res.data.data.safetyMeasureBasicList))
          if(res.data.data.approvalDepBasicList && res.data.data.approvalDepBasicList.length>0){
            state.form.approvalDepBasicList = res.data.data.approvalDepBasicList.map(({id,content})=>({
              content,
              approvalDepBasicId: id,
              approvalUids: [],
              approvalType: null
            }))
          }else{
            state.form.approvalDepBasicList = []
          }
          // if(res.data.data.approvalDepBasicList && res.data.data.approvalDepBasicList.length>0){
          //   state.form.approvalDepBasicList = res.data.data.approvalDepBasicList.map(({id,content})=>({
          //     content,
          //     approvalDepBasicId: id,
          //     approvalUids: [],
          //     approvalType: null
          //   }))
          // }else{
          //   state.form.approvalDepBasicList = []
          // }
        } else {
          ElMessage({
            type: 'warning',
@@ -657,6 +676,7 @@
            return {
                renderMenu,
        getBasicData,
        getWorkerList,
        getStartEndIds,
        getSafetyIds,
        isFirstRow,

 src/views/newSpecialWorkSystem/workTicket/wdsq/components/hoistDialog.vue

@@ -65,26 +65,6 @@
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
              <el-option
                  v-for="item in lists.spList.opList"
                  :key="item.uid"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepId">
            <el-cascader style="width: 100%" v-model="form.workDepId" :props="depProps" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业负责人" prop="headUids">
            <el-select v-model="form.headUids" multiple filterable @change="getStartEndIds" clearable>
              <el-option
@@ -94,7 +74,27 @@
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
            <!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepIds">
            <el-cascader style="width: 100%" v-model="form.workDepIds" :props="depProps" @change="getWorkerList" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
              <el-option
                  v-for="item in zyList"
                  :key="item.uid"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
            <!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
            </el-row>
@@ -367,6 +367,7 @@
    showDialog: boolean
    props1:{}
    depProps:{}
    zyList: []
    safetyMeasureBasicList: []
    tabLoading: boolean
    }
@@ -382,6 +383,7 @@
        showDialog: false,
                equipmentDialog: false,
        safetyMeasureBasicList: [],
        zyList: [],
                form: {
          id: null,
          workType: 3,
@@ -394,7 +396,7 @@
          headUids: [],
          analystUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -436,6 +438,7 @@
          expandTrigger: 'hover',
          label: 'depName',
          value: 'depId',
          multiple: true,
          checkStrictly: true,
          emitPath: false
        }
@@ -447,7 +450,7 @@
        workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        operatorUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        headUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        analystUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
@@ -466,16 +469,26 @@
      const workSelectRef = ref()
            // 页面载入时执行方法
            onMounted(() => {
        getBasicData()
        // getBasicData()
      });
      const openWorkSelect = ()=>{
        workSelectRef.value.openDialog(state.form.involveOtherWork)
      }

      const getWorkerList = ()=>{
        const filteredList = props.lists.spList.opList.filter(i => state.form.workDepIds.includes(i.depId));
        if(filteredList && filteredList.length>0){
          state.zyList = filteredList
        }else{
          state.zyList = props.lists.spList.opList
        }
      }
      const getSelected = ()=>{
        state.form.involveOtherWork = workSelectRef.value.selected
      }
      const openDialog = (row)=>{
        clearFile()
        state.zyList = props.lists.spList.opList
        getBasicData()
        Object.keys(state.form).forEach(key => {
          if (row.hasOwnProperty(key)) {
            state.form[key] = JSON.parse(JSON.stringify(row))[key];
@@ -499,6 +512,12 @@
        state.form.acceptUid = row.acceptUser.userId
        state.form.startOrEndUids = row.startOrEndList.map(i=>i.userId)
        state.form.lastApprover = row.lastApprover.userId
        if(row.workDepList && row.workDepList.length>0){
          state.form.workDepIds = row.workDepList.map(i=>i.workDepId)
        }else{
          state.form.workDepIds.push(row.workDepId)
        }
        getWorkerList()
        state.showDialog = true
      }

@@ -515,7 +534,7 @@
          headUids: [],
          analystUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -567,16 +586,16 @@
        const res = await workApplyApi().getFormData(3)
        if (res.data.code === '200') {
          state.safetyMeasureBasicList = JSON.parse(JSON.stringify(res.data.data.safetyMeasureBasicList))
          if(res.data.data.approvalDepBasicList && res.data.data.approvalDepBasicList.length>0){
            state.form.approvalDepBasicList = res.data.data.approvalDepBasicList.map(({id,content})=>({
              content,
              approvalDepBasicId: id,
              approvalUids: [],
              approvalType: null
            }))
          }else{
            state.form.approvalDepBasicList = []
          }
          // if(res.data.data.approvalDepBasicList && res.data.data.approvalDepBasicList.length>0){
          //   state.form.approvalDepBasicList = res.data.data.approvalDepBasicList.map(({id,content})=>({
          //     content,
          //     approvalDepBasicId: id,
          //     approvalUids: [],
          //     approvalType: null
          //   }))
          // }else{
          //   state.form.approvalDepBasicList = []
          // }
        } else {
          ElMessage({
            type: 'warning',
@@ -711,6 +730,7 @@
            return {
                renderMenu,
        getBasicData,
        getWorkerList,
        getStartEndIds,
        getSafetyIds,
        isFirstRow,

 src/views/newSpecialWorkSystem/workTicket/wdsq/components/plateDialog.vue

@@ -144,16 +144,16 @@
        </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
          <el-form-item label="作业负责人" prop="headUids">
            <el-select v-model="form.headUids" multiple filterable @change="getStartEndIds" clearable>
              <el-option
                  v-for="item in lists.spList.opList"
                  v-for="item in lists.workerList"
                  :key="item.uid"
                  :label="item.realName"
                  :label="item.username"
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
            <!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
        <el-col :span="12" class="valueSelect">
@@ -175,21 +175,21 @@
      </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepId">
            <el-cascader style="width: 100%" v-model="form.workDepId" :props="depProps" :options="lists.departList" :show-all-levels="false"/>
          <el-form-item label="作业单位" prop="workDepIds">
            <el-cascader style="width: 100%" v-model="form.workDepIds" :props="depProps" @change="getWorkerList" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业负责人" prop="headUids">
            <el-select v-model="form.headUids" multiple filterable @change="getStartEndIds" clearable>
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
              <el-option
                  v-for="item in lists.workerList"
                  v-for="item in zyList"
                  :key="item.uid"
                  :label="item.username"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
            <!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
            </el-row>
@@ -413,6 +413,7 @@
    props1:{},
    depProps:{},
    safetyMeasureBasicList: [],
    zyList: []
    fileList: Array<file>,
    uploadUrl: string,
    imgLimit: number,
@@ -433,6 +434,7 @@
        showDialog: false,
                equipmentDialog: false,
        safetyMeasureBasicList: [],
        zyList: [],
                form: {
          id: null,
          workType: 8,
@@ -444,7 +446,7 @@
          operatorUids: [],
          headUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -490,6 +492,7 @@
          expandTrigger: 'hover',
          label: 'depName',
          value: 'depId',
          multiple: true,
          checkStrictly: true,
          emitPath: false
        },
@@ -504,7 +507,7 @@
        workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        operatorUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        headUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        riskIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
@@ -530,17 +533,27 @@
      const workSelectRef = ref()
            // 页面载入时执行方法
            onMounted(() => {
        getBasicData()
        // getBasicData()
      });
      const openWorkSelect = ()=>{
        workSelectRef.value.openDialog(state.form.involveOtherWork)
      }

      const getWorkerList = ()=>{
        const filteredList = props.lists.spList.opList.filter(i => state.form.workDepIds.includes(i.depId));
        if(filteredList && filteredList.length>0){
          state.zyList = filteredList
        }else{
          state.zyList = props.lists.spList.opList
        }
      }
      const getSelected = ()=>{
        state.form.involveOtherWork = workSelectRef.value.selected
      }

      const openDialog = (row)=>{
        clearFile()
        state.zyList = props.lists.spList.opList
        getBasicData()
        Object.keys(state.form).forEach(key => {
          if (row.hasOwnProperty(key)) {
            state.form[key] = JSON.parse(JSON.stringify(row))[key];
@@ -570,6 +583,12 @@
          }
        })
        state.form.workDetail.bpLocationMapPath = row.workDetail.bpLocationMapPath.split(',').map(item => item.match(/specialWork9step\/(.*?)\?/)[1])
        if(row.workDepList && row.workDepList.length>0){
          state.form.workDepIds = row.workDepList.map(i=>i.workDepId)
        }else{
          state.form.workDepIds.push(row.workDepId)
        }
        getWorkerList()
        state.showDialog = true
      }

@@ -585,7 +604,7 @@
          operatorUids: [],
          headUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -645,16 +664,16 @@
        const res = await workApplyApi().getFormData(8)
        if (res.data.code === '200') {
          state.safetyMeasureBasicList = JSON.parse(JSON.stringify(res.data.data.safetyMeasureBasicList))
          if(res.data.data.approvalDepBasicList && res.data.data.approvalDepBasicList.length>0){
            state.form.approvalDepBasicList = res.data.data.approvalDepBasicList.map(({id,content})=>({
              content,
              approvalDepBasicId: id,
              approvalUids: [],
              approvalType: null
            }))
          }else{
            state.form.approvalDepBasicList = []
          }
          // if(res.data.data.approvalDepBasicList && res.data.data.approvalDepBasicList.length>0){
          //   state.form.approvalDepBasicList = res.data.data.approvalDepBasicList.map(({id,content})=>({
          //     content,
          //     approvalDepBasicId: id,
          //     approvalUids: [],
          //     approvalType: null
          //   }))
          // }else{
          //   state.form.approvalDepBasicList = []
          // }
        } else {
          ElMessage({
            type: 'warning',
@@ -877,6 +896,7 @@
            return {
                renderMenu,
        getBasicData,
        getWorkerList,
        getStartEndIds,
        getSafetyIds,
        isFirstRow,

 src/views/newSpecialWorkSystem/workTicket/wdsq/components/powerDialog.vue

@@ -79,36 +79,36 @@
      </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="作业人" prop="operatorUids">
              <el-select v-model="form.operatorUids" filterable multiple clearable>
            <el-form-item label="作业负责人" prop="headUids">
              <el-select v-model="form.headUids" multiple filterable @change="getStartEndIds" clearable>
                <el-option
                    v-for="item in lists.spList.opList"
                    v-for="item in lists.workerList"
                    :key="item.uid"
                    :label="item.realName"
                    :label="item.username"
                    :value="item.uid"
                />
              </el-select>
<!--              <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
              <!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
            </el-form-item>
          </el-col>
        </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepId">
            <el-cascader style="width: 100%" v-model="form.workDepId" :props="depProps" :options="lists.departList" :show-all-levels="false"/>
          <el-form-item label="作业单位" prop="workDepIds">
            <el-cascader style="width: 100%" v-model="form.workDepIds" :props="depProps" @change="getWorkerList" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业负责人" prop="headUids">
            <el-select v-model="form.headUids" multiple filterable @change="getStartEndIds" clearable>
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
              <el-option
                  v-for="item in lists.workerList"
                  v-for="item in zyList"
                  :key="item.uid"
                  :label="item.username"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
            <!--              <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
            </el-row>
@@ -382,6 +382,7 @@
    props1:{},
    depProps:{},
    safetyMeasureBasicList: []
    zyList: []
    tabLoading: boolean
    }
    export default defineComponent({
@@ -396,6 +397,7 @@
                equipmentDialog: false,
        showDialog: false,
        safetyMeasureBasicList: [],
        zyList: [],
                form: {
          id: null,
          workType: 7,
@@ -408,7 +410,7 @@
          headUids: [],
          analystUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -437,6 +439,7 @@
          expandTrigger: 'hover',
          label: 'depName',
          value: 'depId',
          multiple: true,
          checkStrictly: true,
          emitPath: false
        }
@@ -448,7 +451,7 @@
        workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        operatorUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        headUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        analystUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
@@ -468,15 +471,26 @@
      const workSelectRef = ref()
            // 页面载入时执行方法
            onMounted(() => {
        getBasicData()
        // getBasicData()
      });
      const openWorkSelect = ()=>{
        workSelectRef.value.openDialog(state.form.involveOtherWork)
      }
      const getWorkerList = ()=>{
        const filteredList = props.lists.spList.opList.filter(i => state.form.workDepIds.includes(i.depId));
        if(filteredList && filteredList.length>0){
          state.zyList = filteredList
        }else{
          state.zyList = props.lists.spList.opList
        }
      }
      const getSelected = ()=>{
        state.form.involveOtherWork = workSelectRef.value.selected
      }
      const openDialog = (row)=>{
        clearFile()
        state.zyList = props.lists.spList.opList
        getBasicData()
        Object.keys(state.form).forEach(key => {
          if (row.hasOwnProperty(key)) {
            state.form[key] = JSON.parse(JSON.stringify(row))[key];
@@ -500,6 +514,12 @@
        state.form.acceptUid = row.acceptUser.userId
        state.form.startOrEndUids = row.startOrEndList.map(i=>i.userId)
        state.form.lastApprover = row.lastApprover.userId
        if(row.workDepList && row.workDepList.length>0){
          state.form.workDepIds = row.workDepList.map(i=>i.workDepId)
        }else{
          state.form.workDepIds.push(row.workDepId)
        }
        getWorkerList()
        state.showDialog = true
      }

@@ -516,7 +536,7 @@
          headUids: [],
          analystUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -569,16 +589,16 @@
        const res = await workApplyApi().getFormData(7)
        if (res.data.code === '200') {
          state.safetyMeasureBasicList = JSON.parse(JSON.stringify(res.data.data.safetyMeasureBasicList))
          if(res.data.data.approvalDepBasicList && res.data.data.approvalDepBasicList.length>0){
            state.form.approvalDepBasicList = res.data.data.approvalDepBasicList.map(({id,content})=>({
              content,
              approvalDepBasicId: id,
              approvalUids: [],
              approvalType: null
            }))
          }else{
            state.form.approvalDepBasicList = []
          }
          // if(res.data.data.approvalDepBasicList && res.data.data.approvalDepBasicList.length>0){
          //   state.form.approvalDepBasicList = res.data.data.approvalDepBasicList.map(({id,content})=>({
          //     content,
          //     approvalDepBasicId: id,
          //     approvalUids: [],
          //     approvalType: null
          //   }))
          // }else{
          //   state.form.approvalDepBasicList = []
          // }
        } else {
          ElMessage({
            type: 'warning',
@@ -703,6 +723,7 @@
            return {
                renderMenu,
        getBasicData,
        getWorkerList,
        getStartEndIds,
        getSafetyIds,
        isFirstRow,

 src/views/newSpecialWorkSystem/workTicket/wdsq/components/spaceDialog.vue

@@ -44,16 +44,16 @@
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
          <el-form-item label="作业负责人" prop="headUids">
            <el-select v-model="form.headUids" multiple filterable @change="getStartEndIds" clearable>
              <el-option
                  v-for="item in lists.spList.opList"
                  v-for="item in lists.workerList"
                  :key="item.uid"
                  :label="item.realName"
                  :label="item.username"
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
            <!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
      </el-row>
@@ -71,21 +71,21 @@
        </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepId">
            <el-cascader style="width: 100%" v-model="form.workDepId" :props="depProps" :options="lists.departList" :show-all-levels="false"/>
          <el-form-item label="作业单位" prop="workDepIds">
            <el-cascader style="width: 100%" v-model="form.workDepIds" :props="depProps" @change="getWorkerList" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业负责人" prop="headUids">
            <el-select v-model="form.headUids" multiple filterable @change="getStartEndIds" clearable>
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
              <el-option
                  v-for="item in lists.workerList"
                  v-for="item in zyList"
                  :key="item.uid"
                  :label="item.username"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
            <!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
            </el-row>
@@ -321,6 +321,7 @@
    props1:{},
    depProps:{},
    safetyMeasureBasicList: []
    zyList: []
    tabLoading: boolean
    }
    export default defineComponent({
@@ -335,6 +336,7 @@
        showDialog: false,
                equipmentDialog: false,
        safetyMeasureBasicList: [],
        zyList: [],
                form: {
          id: null,
          workType: 2,
@@ -347,7 +349,7 @@
          headUids: [],
          analystUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -374,6 +376,7 @@
          expandTrigger: 'hover',
          label: 'depName',
          value: 'depId',
          multiple: true,
          checkStrictly: true,
          emitPath: false
        }
@@ -385,7 +388,7 @@
        workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        operatorUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        headUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        analystUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
@@ -403,18 +406,28 @@
      const workSelectRef = ref()
            // 页面载入时执行方法
            onMounted(() => {
        getBasicData()
        // getBasicData()
      });

      const openWorkSelect = ()=>{
        workSelectRef.value.openDialog(state.form.involveOtherWork)
      }

      const getWorkerList = ()=>{
        const filteredList = props.lists.spList.opList.filter(i => state.form.workDepIds.includes(i.depId));
        if(filteredList && filteredList.length>0){
          state.zyList = filteredList
        }else{
          state.zyList = props.lists.spList.opList
        }
      }
      const getSelected = ()=>{
        state.form.involveOtherWork = workSelectRef.value.selected
      }

      const openDialog = (row)=>{
        clearFile()
        state.zyList = props.lists.spList.opList
        getBasicData()
        Object.keys(state.form).forEach(key => {
          if (row.hasOwnProperty(key)) {
            state.form[key] = JSON.parse(JSON.stringify(row))[key];
@@ -434,9 +447,16 @@
          approvalUids: item.approvalPersonList.filter(j=>j.type == 5).map(i=>i.userId),
          approvalType: item.approvalType
        }))
        console.log(state.form.approvalDepBasicList,777)
        state.form.acceptUid = row.acceptUser.userId
        state.form.startOrEndUids = row.startOrEndList.map(i=>i.userId)
        state.form.lastApprover = row.lastApprover.userId
        if(row.workDepList && row.workDepList.length>0){
          state.form.workDepIds = row.workDepList.map(i=>i.workDepId)
        }else{
          state.form.workDepIds.push(row.workDepId)
        }
        getWorkerList()
        state.showDialog = true
      }

@@ -453,7 +473,7 @@
          headUids: [],
          analystUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -504,16 +524,16 @@
        const res = await workApplyApi().getFormData(2)
        if (res.data.code === '200') {
          state.safetyMeasureBasicList = JSON.parse(JSON.stringify(res.data.data.safetyMeasureBasicList))
          if(res.data.data.approvalDepBasicList && res.data.data.approvalDepBasicList.length>0){
            state.form.approvalDepBasicList = res.data.data.approvalDepBasicList.map(({id,content})=>({
              content,
              approvalDepBasicId: id,
              approvalUids: [],
              approvalType: null
            }))
          }else{
            state.form.approvalDepBasicList = []
          }
          // if(res.data.data.approvalDepBasicList && res.data.data.approvalDepBasicList.length>0){
          //   state.form.approvalDepBasicList = res.data.data.approvalDepBasicList.map(({id,content})=>({
          //     content,
          //     approvalDepBasicId: id,
          //     approvalUids: [],
          //     approvalType: null
          //   }))
          // }else{
          //   state.form.approvalDepBasicList = []
          // }
        } else {
          ElMessage({
            type: 'warning',
@@ -621,6 +641,7 @@
            return {
                renderMenu,
        getBasicData,
        getWorkerList,
        getStartEndIds,
        getSafetyIds,
        isFirstRow,

 src/views/newSpecialWorkSystem/workTicket/wdsq/index.vue

@@ -34,6 +34,13 @@
                          />
                        </el-select>
                      </div>
                      <div class="basic-line" style="display:flex;white-space:nowrap;line-height: 40px">
                        <span>作业票编号：</span>
                        <el-input
                            v-model="searPara.workPermitNo"
                            placeholder="请输入作业票编号"
                        />
                      </div>
                      <div style="margin-left: 20px">
                        <el-button type="primary" @click="searchRecord">查询</el-button>
                        <el-button plain @click="clearSearch">重置</el-button>
@@ -49,11 +56,21 @@
                                <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()" />
                            </el-row>
                            <el-table ref="multipleTableRef" :data="applyData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }">
                                <el-table-column property="workPermitNo" label="作业编号" align="center">
                                  <template #default="scope">
                                    {{scope.row.workPermitNo?scope.row.workPermitNo:'—'}}
                                  </template>
                                </el-table-column>
                                <el-table-column property="seDepName" label="事业部" align="center"/>
                                <el-table-column property="applyDepName" label="作业所在车间" align="center"/>
                                <el-table-column property="workContent" label="作业内容" align="center"/>
                                <el-table-column property="workTypeDesc" label="作业类型" align="center"/>
                                <el-table-column property="workDepName" label="作业单位" align="center"/>
                                <el-table-column label="作业单位" align="center">
                                  <template #default="scope">
                                    <span v-if="scope.row.workDepList && scope.row.workDepList.length>0">{{scope.row.workDepList.map(i=>i.workDepName).join(',')}}</span>
                                    <span v-else>{{scope.row.workDepName }}</span>
                                  </template>
                                </el-table-column>
                                <el-table-column property="headList" label="负责人及电话" align="center">
                                  <template #default="scope">
                                    {{scope.row.headList.map(i=>{return i.userName + '(' + i.phone+ ')' }).join('，')}}
@@ -89,16 +106,16 @@
                                <el-table-column label="风险研判" align="center">
                                    <template #default="scope">
                                        <el-button v-if="scope.row.status == 0" link type="primary" size="small" @click="openReport('上传', scope.row)">上传研判报告</el-button>
                                        <el-tag type="danger" v-else-if="scope.row.status == -1">已废止</el-tag>
                                        <el-tag type="danger" v-else-if="scope.row.status == 16">已废止</el-tag>
                                        <el-button v-else link type="primary" size="small" @click="openReport('查看', scope.row)">查看研判报告</el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column fixed="right" label="操作" align="center" width="150">
                                    <template #default="scope">
                                        <span v-if="scope.row.status == -1">已废止</span>
                                        <el-button v-if="scope.row.status == 0 || scope.row.status == 1" link type="danger" size="small" :icon="Delete" @click="abortRecordBtn(scope.row)">作废</el-button>
                                        <el-button v-if="scope.row.status !== -1" link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                                        <el-button link type="primary" size="small" v-throttle :icon="Edit" @click="openEdit(scope.row)">修改</el-button>
                                        <span v-if="scope.row.status == 16">已废止</span>
                                        <el-button v-if="scope.row.status == 0 || scope.row.status == 1" link type="danger" size="small" :icon="Delete" @click="abortRecordBtn(scope.row)">取消</el-button>
                                        <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                                        <el-button v-if="scope.row.status !== 16" link type="primary" size="small" v-throttle :icon="Edit" @click="openEdit(scope.row)">修改</el-button>
                                        <el-button link type="success" v-throttle v-if="scope.row.status == 0 || scope.row.status == 1" size="small" :icon="Download" @click="checkTicket(scope.row)">正式办票</el-button>
<!--                                        <el-button :disabled="scope.row.status == 7 ? false : true" link type="primary" size="small" :icon="Download" @click="downLoadBtn(scope.row)">导出作业票</el-button>-->
                                    </template>
@@ -230,6 +247,7 @@
            searPara:{
              startTime: '',
              endTime: '',
              workPermitNo: '',
              workType: null,
              headUserName: '',
              secondDepId: null
@@ -277,48 +295,72 @@
          ],
          statusList: [
            {
              value: -1,
              label: '废止'
            },
            {
              value: 0,
              label: '风险研判中'
              label: '风险研判'
            },
            {
              value: 1,
              label: '票证办理中'
              label: '票证办理'
            },
            {
              value: 2,
              label: '安全措施确认中'
              label: '气体分析'
            },
            {
              value: 3,
              label: '培训交底中'
              label: '安全措施确认，培训交底'
            },
            {
              value: 4,
              label: '气体分析中'
              label: '安全措施确认'
            },
            {
              value: 5,
              label: '作业开始'
              label: '培训交底'
            },
            {
              value: 6,
              label: '作业监护'
              label: '部门审批'
            },
            {
              value: 7,
              label: '作业结束'
              label: '作业票填报结束'
            },
            {
              value: 8,
              label: '作业验收'
              label: '作业气体分析不合格'
            },
            {
              value: 9,
              label: '安全措施确认，培训交底中'
              label: '审批未通过'
            },
            {
              value: 10,
              label: '开始'
            },
            {
              value: 11,
              label: '监护'
            },
            {
              value: 12,
              label: '结束'
            },
            {
              value: 13,
              label: '待验收'
            },
            {
              value: 14,
              label: '验收完成'
            },
            {
              value: 15,
              label: '取消'
            },
            {
              value: 16,
              label: '废止作业票'
            }
          ]
        });
@@ -551,10 +593,12 @@
          state.searPara = {
            startTime: '',
            endTime: '',
            workPermitNo: '',
            workType: null,
            headUserName: '',
            secondDepId: null
          };
          state.pageIndex1 = 1
          getListByPage();
        };


 src/views/newSpecialWorkSystem/workTicket/zysq/components/broken.vue

@@ -11,13 +11,21 @@
      </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="作业单位" prop="workDepId">
              <el-cascader style="width: 100%" v-model="form.workDepId" :props="depProps" :options="lists.departList" :show-all-levels="false"/>
            <el-form-item label="作业单位" prop="workDepIds">
              <el-cascader style="width: 100%" v-model="form.workDepIds" :props="depProps" @change="getWorkerList" :options="lists.departList" :show-all-levels="false"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="涉及相关单位（部门）" prop="workDetail.involvedDepIds">
              <el-cascader style="width: 100%" v-model="form.workDetail.involvedDepIds" :props="depProps2" :options="lists.departList" :show-all-levels="false"/>
            <el-form-item label="作业人" prop="operatorUids">
              <el-select v-model="form.operatorUids" filterable multiple clearable>
                <el-option
                    v-for="item in zyList"
                    :key="item.uid"
                    :label="item.realName"
                    :value="item.uid"
                />
              </el-select>
              <!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
            </el-form-item>
          </el-col>
        </el-row>
@@ -83,16 +91,8 @@
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
              <el-option
                  v-for="item in lists.spList.opList"
                  :key="item.uid"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          <el-form-item label="涉及相关单位（部门）" prop="workDetail.involvedDepIds">
            <el-cascader style="width: 100%" v-model="form.workDetail.involvedDepIds" :props="depProps2" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
      </el-row>
@@ -369,6 +369,7 @@
    interface stateType {
        form: Object,
        equipmentDialog: boolean,
    zyList: []
    props1:{},
    depProps:{},
    depProps2:{},
@@ -398,6 +399,7 @@
        tabLoading: false,
                equipmentDialog: false,
        safetyMeasureBasicList: [],
        zyList: [],
                form: {
          workType: 5,
          workLevel: 0,
@@ -410,7 +412,7 @@
          headUids: [],
          analystUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -438,6 +440,7 @@
          expandTrigger: 'hover',
          label: 'depName',
          value: 'depId',
          multiple: true,
          checkStrictly: true,
          emitPath: false
        },
@@ -582,7 +585,7 @@
        workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        operatorUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        headUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        analystUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
@@ -603,12 +606,20 @@
      const workSelectRef = ref()
            // 页面载入时执行方法
            onMounted(() => {
        state.zyList = props.lists.spList.opList
        getBasicData()
      });
      const openWorkSelect = ()=>{
        workSelectRef.value.openDialog(state.form.involveOtherWork)
      }

      const getWorkerList = (val)=>{
        const filteredList = props.lists.spList.opList.filter(i => state.form.workDepIds.includes(i.depId));
        if(filteredList && filteredList.length>0){
          state.zyList = filteredList
        }else{
          state.zyList = props.lists.spList.opList
        }
      }
      const getSelected = ()=>{
        state.form.involveOtherWork = workSelectRef.value.selected
      }
@@ -907,6 +918,7 @@
            return {
                renderMenu,
        getBasicData,
        getWorkerList,
        getStartEndIds,
        getSafetyIds,
        isFirstRow,

 src/views/newSpecialWorkSystem/workTicket/zysq/components/fire.vue

@@ -45,33 +45,15 @@
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="动火方式" prop="workDetail.workMethod">
            <el-input
                v-model="form.workDetail.workMethod"
                :autosize="{ minRows: 1 }"
                type="textarea"
                placeholder="请输入动火方式"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
          <el-form-item label="动火方式" prop="workDetail.methodList">
            <el-select v-model="form.workDetail.methodList" filterable multiple clearable>
              <el-option
                  v-for="item in lists.spList.opList"
                  :key="item.uid"
                  :label="item.realName"
                  :value="item.uid"
                  v-for="item in fireWorkList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepId">
            <el-cascader style="width: 100%" v-model="form.workDepId" :props="depProps" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
@@ -84,7 +66,39 @@
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
            <!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="form.workDetail.methodList.find(i=>i == '其他')">
        <el-col :span="12">
          <el-form-item label="其他方式" prop="workDetail.other">
            <el-input
                v-model="form.workDetail.other"
                :autosize="{ minRows: 1 }"
                type="textarea"
                placeholder="请输入其他动火方式"
            />
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepIds">
            <el-cascader style="width: 100%" v-model="form.workDepIds" :props="depProps" @change="getWorkerList" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
              <el-option
                  v-for="item in zyList"
                  :key="item.uid"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
            <!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
            </el-row>
@@ -345,6 +359,8 @@
    interface stateType {
        form: Object,
        workLevelList: Array<any>,
    fireWorkList: Array<any>,
    zyList: Array<any>,
        equipmentDialog: boolean,
    tabLoading: boolean
    props1:{}
@@ -366,6 +382,7 @@
        tabLoading: false,
                equipmentDialog: false,
        safetyMeasureBasicList: [],
        zyList: [],
                form: {
          workType: 1,
          workLevel: null,
@@ -378,7 +395,7 @@
          headUids: [],
          analystUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -390,8 +407,11 @@
          startOrEndUids: [],
          cameraIds: [],
          workDetail: {
            workMethod: ''
          }
            workMethod: '',
            methodList: [],
            other: ''
          },
          remark: ''
                },
                workLevelList: [
                    {
@@ -407,6 +427,52 @@
                        value: 3
                    }
                ],
        fireWorkList: [
          {
            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: "破碎地面",
            id: 9
          },
          {
            name: "清洗机",
            id: 10
          },
          {
            name: "其他",
            id: 11
          }
        ],
        casProps: {
          expandTrigger: 'hover',
          value: 'uid',
@@ -536,6 +602,7 @@
          expandTrigger: 'hover',
          label: 'depName',
          value: 'depId',
          multiple: true,
          checkStrictly: true,
          emitPath: false
        }
@@ -547,7 +614,7 @@
        workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        operatorUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        headUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        analystUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
@@ -559,18 +626,29 @@
        acceptUid: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        lastApprover: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        startOrEndUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                "workDetail.workMethod": [{ required: true, message: '该内容不能为空', trigger: 'blur' }]
                "workDetail.methodList": [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        "workDetail.other": [{ required: true, message: '该内容不能为空', trigger: 'blur' }]
            });
      const workSelectRef = ref()

            // 页面载入时执行方法
            onMounted(() => {
        state.zyList = props.lists.spList.opList
        getBasicData()
      })

      onUpdated(()=>{
        console.log('false loading')
      })

      const getWorkerList = (val)=>{
        const filteredList = props.lists.spList.opList.filter(i => state.form.workDepIds.includes(i.depId));
        if(filteredList && filteredList.length>0){
          state.zyList = filteredList
        }else{
          state.zyList = props.lists.spList.opList
        }
      }

      const openWorkSelect = ()=>{
        workSelectRef.value.openDialog(state.form.involveOtherWork)
@@ -709,6 +787,13 @@
            // }
            state.form.riskIdentification = state.form.riskIdentification.join(',')
            const {depIdList,...data} = state.form
            data.workDetail.methodList = data.workDetail.methodList.map(item=>{
              if(item == '其他'){
                item = data.workDetail.other
              }
              return item
            })
            data.workDetail.workMethod = data.workDetail.methodList.join(',')
            data.operatorUids = transform2Arr(data.operatorUids)
            data.headUids = transform2Arr(data.headUids)
            // data.analystUids = transformArr(data.analystUids)
@@ -778,6 +863,7 @@
            };
            return {
                renderMenu,
        getWorkerList,
        getBasicData,
        getStartEndIds,
        getSafetyIds,

 src/views/newSpecialWorkSystem/workTicket/zysq/components/ground.vue

@@ -21,26 +21,6 @@
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" multiple clearable>
              <el-option
                  v-for="item in lists.spList.opList"
                  :key="item.uid"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepId">
            <el-cascader style="width: 100%" v-model="form.workDepId" :props="depProps" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业负责人" prop="headUids">
            <el-select v-model="form.headUids" multiple filterable @change="getStartEndIds" clearable>
              <el-option
@@ -50,7 +30,27 @@
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
            <!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepIds">
            <el-cascader style="width: 100%" v-model="form.workDepIds" :props="depProps" @change="getWorkerList" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" multiple clearable>
              <el-option
                  v-for="item in zyList"
                  :key="item.uid"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
            <!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
            </el-row>
@@ -354,6 +354,7 @@
    interface stateType {
        form: Object,
        equipmentDialog: boolean,
    zyList: []
    props1:{},
    depProps:{},
    casProps:{}
@@ -382,6 +383,7 @@
        tabLoading: false,
                equipmentDialog: false,
        safetyMeasureBasicList: [],
        zyList: [],
                form: {
          workType: 4,
          workLevel: 0,
@@ -393,7 +395,7 @@
          operatorUids: [],
          headUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -419,6 +421,7 @@
          expandTrigger: 'hover',
          label: 'depName',
          value: 'depId',
          multiple: true,
          checkStrictly: true,
          emitPath: false
        },
@@ -555,7 +558,7 @@
        workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        operatorUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        headUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        riskIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
@@ -573,10 +576,20 @@
      const workSelectRef = ref()
            // 页面载入时执行方法
            onMounted(() => {
        state.zyList = props.lists.spList.opList
        getBasicData()
      });
      const openWorkSelect = ()=>{
        workSelectRef.value.openDialog(state.form.involveOtherWork)
      }

      const getWorkerList = (val)=>{
        const filteredList = props.lists.spList.opList.filter(i => state.form.workDepIds.includes(i.depId));
        if(filteredList && filteredList.length>0){
          state.zyList = filteredList
        }else{
          state.zyList = props.lists.spList.opList
        }
      }

      const getSelected = ()=>{
@@ -877,6 +890,7 @@
            return {
                renderMenu,
        getBasicData,
        getWorkerList,
        getStartEndIds,
        getSafetyIds,
        isFirstRow,

 src/views/newSpecialWorkSystem/workTicket/zysq/components/height.vue

@@ -54,26 +54,6 @@
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
              <el-option
                  v-for="item in lists.spList.opList"
                  :key="item.uid"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepId">
            <el-cascader style="width: 100%" v-model="form.workDepId" :props="depProps" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业负责人" prop="headUids">
            <el-select v-model="form.headUids" filterable multiple @change="getStartEndIds" clearable>
              <el-option
@@ -83,7 +63,27 @@
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
            <!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepIds">
            <el-cascader style="width: 100%" v-model="form.workDepIds" :props="depProps" @change="getWorkerList" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
              <el-option
                  v-for="item in zyList"
                  :key="item.uid"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
            <!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
            </el-row>
@@ -297,6 +297,7 @@
        form: Object,
        workLevelList: Array<any>,
        equipmentDialog: boolean,
    zyList: []
    props1:{},
    depProps:{},
    casProps:{}
@@ -317,6 +318,7 @@
        tabLoading: false,
                equipmentDialog: false,
        safetyMeasureBasicList: [],
        zyList: [],
                form: {
          workType: 6,
          workLevel: null,
@@ -328,7 +330,7 @@
          operatorUids: [],
          headUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -490,6 +492,7 @@
          expandTrigger: 'hover',
          label: 'depName',
          value: 'depId',
          multiple: true,
          checkStrictly: true,
          emitPath: false
        }
@@ -501,7 +504,7 @@
        workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        operatorUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        headUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        riskIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
@@ -517,10 +520,20 @@
      const workSelectRef = ref()
            // 页面载入时执行方法
            onMounted(() => {
        state.zyList = props.lists.spList.opList
        getBasicData()
      });
      const openWorkSelect = ()=>{
        workSelectRef.value.openDialog(state.form.involveOtherWork)
      }

      const getWorkerList = (val)=>{
        const filteredList = props.lists.spList.opList.filter(i => state.form.workDepIds.includes(i.depId));
        if(filteredList && filteredList.length>0){
          state.zyList = filteredList
        }else{
          state.zyList = props.lists.spList.opList
        }
      }

      const getSelected = ()=>{
@@ -726,6 +739,7 @@
            return {
                renderMenu,
        getBasicData,
        getWorkerList,
        getStartEndIds,
        getSafetyIds,
        isFirstRow,

 src/views/newSpecialWorkSystem/workTicket/zysq/components/hoist.vue

@@ -64,26 +64,6 @@
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
              <el-option
                  v-for="item in lists.spList.opList"
                  :key="item.uid"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepId">
            <el-cascader style="width: 100%" v-model="form.workDepId" :props="depProps" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业负责人" prop="headUids">
            <el-select v-model="form.headUids" multiple filterable @change="getStartEndIds" clearable>
              <el-option
@@ -93,7 +73,27 @@
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
            <!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepIds">
            <el-cascader style="width: 100%" v-model="form.workDepIds" :props="depProps" @change="getWorkerList" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
              <el-option
                  v-for="item in zyList"
                  :key="item.uid"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
            <!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
            </el-row>
@@ -362,6 +362,7 @@
        form: Object,
        workLevelList: Array<any>,
        equipmentDialog: boolean,
    zyList: []
    props1:{},
    depProps:{},
    casProps:{}
@@ -382,6 +383,7 @@
        tabLoading: false,
                equipmentDialog: false,
        safetyMeasureBasicList: [],
        zyList: [],
                form: {
          workType: 3,
          workLevel: null,
@@ -394,7 +396,7 @@
          headUids: [],
          analystUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -434,6 +436,7 @@
          expandTrigger: 'hover',
          label: 'depName',
          value: 'depId',
          multiple: true,
          checkStrictly: true,
          emitPath: false
        },
@@ -565,7 +568,7 @@
        workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        operatorUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        headUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        analystUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
@@ -584,10 +587,20 @@
      const workSelectRef = ref()
            // 页面载入时执行方法
            onMounted(() => {
        state.zyList = props.lists.spList.opList
        getBasicData()
      });
      const openWorkSelect = ()=>{
        workSelectRef.value.openDialog(state.form.involveOtherWork)
      }

      const getWorkerList = (val)=>{
        const filteredList = props.lists.spList.opList.filter(i => state.form.workDepIds.includes(i.depId));
        if(filteredList && filteredList.length>0){
          state.zyList = filteredList
        }else{
          state.zyList = props.lists.spList.opList
        }
      }

      const getSelected = ()=>{
@@ -795,6 +808,7 @@
            return {
                renderMenu,
        getBasicData,
        getWorkerList,
        getStartEndIds,
        getSafetyIds,
        isFirstRow,

 src/views/newSpecialWorkSystem/workTicket/zysq/components/plate.vue

@@ -143,16 +143,16 @@
        </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
          <el-form-item label="作业负责人" prop="headUids">
            <el-select v-model="form.headUids" multiple filterable @change="getStartEndIds" clearable>
              <el-option
                  v-for="item in lists.spList.opList"
                  v-for="item in lists.workerList"
                  :key="item.uid"
                  :label="item.realName"
                  :label="item.username"
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
            <!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
        <el-col :span="12" class="valueSelect">
@@ -174,21 +174,21 @@
      </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepId">
            <el-cascader style="width: 100%" v-model="form.workDepId" :props="depProps" :options="lists.departList" :show-all-levels="false"/>
          <el-form-item label="作业单位" prop="workDepIds">
            <el-cascader style="width: 100%" v-model="form.workDepIds" :props="depProps" @change="getWorkerList" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业负责人" prop="headUids">
            <el-select v-model="form.headUids" multiple filterable @change="getStartEndIds" clearable>
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
              <el-option
                  v-for="item in lists.workerList"
                  v-for="item in zyList"
                  :key="item.uid"
                  :label="item.username"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
            <!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
            </el-row>
@@ -407,6 +407,7 @@
        form: Object,
        workLevelList: Array<any>,
        equipmentDialog: boolean,
    zyList: []
    props1:{},
    depProps:{},
    casProps:{}
@@ -435,6 +436,7 @@
        tabLoading: false,
                equipmentDialog: false,
        safetyMeasureBasicList: [],
        zyList: [],
                form: {
          workType: 8,
          workLevel: null,
@@ -446,7 +448,7 @@
          operatorUids: [],
          headUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -490,6 +492,7 @@
          expandTrigger: 'hover',
          label: 'depName',
          value: 'depId',
          multiple: true,
          checkStrictly: true,
          emitPath: false
        },
@@ -626,7 +629,7 @@
        workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        operatorUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        headUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        riskIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
@@ -652,12 +655,20 @@
      const workSelectRef = ref()
            // 页面载入时执行方法
            onMounted(() => {
        state.zyList = props.lists.spList.opList
        getBasicData()
      });
      const openWorkSelect = ()=>{
        workSelectRef.value.openDialog(state.form.involveOtherWork)
      }

      const getWorkerList = (val)=>{
        const filteredList = props.lists.spList.opList.filter(i => state.form.workDepIds.includes(i.depId));
        if(filteredList && filteredList.length>0){
          state.zyList = filteredList
        }else{
          state.zyList = props.lists.spList.opList
        }
      }
      const getSelected = ()=>{
        state.form.involveOtherWork = workSelectRef.value.selected
      }
@@ -957,6 +968,7 @@
            return {
                renderMenu,
        getBasicData,
        getWorkerList,
        getStartEndIds,
        getSafetyIds,
        isFirstRow,

 src/views/newSpecialWorkSystem/workTicket/zysq/components/power.vue

@@ -76,27 +76,7 @@
          </el-form-item>
        </el-col>
      </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="作业人" prop="operatorUids">
              <el-select v-model="form.operatorUids" filterable multiple clearable>
                <el-option
                    v-for="item in lists.spList.opList"
                    :key="item.uid"
                    :label="item.realName"
                    :value="item.uid"
                />
              </el-select>
<!--              <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
            </el-form-item>
          </el-col>
        </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepId">
            <el-cascader style="width: 100%" v-model="form.workDepId" :props="depProps" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
      <el-row>
        <el-col :span="12">
          <el-form-item label="作业负责人" prop="headUids">
            <el-select v-model="form.headUids" multiple filterable @change="getStartEndIds" clearable>
@@ -107,7 +87,27 @@
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
            <!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepIds">
            <el-cascader style="width: 100%" v-model="form.workDepIds" :props="depProps" @change="getWorkerList" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
              <el-option
                  v-for="item in zyList"
                  :key="item.uid"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
            <!--              <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
            </el-row>
@@ -376,6 +376,7 @@
    interface stateType {
        form: Object,
        equipmentDialog: boolean,
    zyList: []
    props1:{},
    depProps:{},
    casProps:{}
@@ -396,6 +397,7 @@
        tabLoading: false,
                equipmentDialog: false,
        safetyMeasureBasicList: [],
        zyList: [],
                form: {
          workType: 7,
          workLevel: 0,
@@ -408,7 +410,7 @@
          headUids: [],
          analystUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -435,6 +437,7 @@
          expandTrigger: 'hover',
          label: 'depName',
          value: 'depId',
          multiple: true,
          checkStrictly: true,
          emitPath: false
        },
@@ -566,7 +569,7 @@
        workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        operatorUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        headUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        analystUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
@@ -586,10 +589,19 @@
      const workSelectRef = ref()
            // 页面载入时执行方法
            onMounted(() => {
        state.zyList = props.lists.spList.opList
        getBasicData()
      });
      const openWorkSelect = ()=>{
        workSelectRef.value.openDialog(state.form.involveOtherWork)
      }
      const getWorkerList = (val)=>{
        const filteredList = props.lists.spList.opList.filter(i => state.form.workDepIds.includes(i.depId));
        if(filteredList && filteredList.length>0){
          state.zyList = filteredList
        }else{
          state.zyList = props.lists.spList.opList
        }
      }
      const getSelected = ()=>{
        state.form.involveOtherWork = workSelectRef.value.selected
@@ -798,6 +810,7 @@
            return {
                renderMenu,
        getBasicData,
        getWorkerList,
        getStartEndIds,
        getSafetyIds,
        isFirstRow,

 src/views/newSpecialWorkSystem/workTicket/zysq/components/space.vue

@@ -43,16 +43,16 @@
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
          <el-form-item label="作业负责人" prop="headUids">
            <el-select v-model="form.headUids" multiple filterable @change="getStartEndIds" clearable>
              <el-option
                  v-for="item in lists.spList.opList"
                  v-for="item in lists.workerList"
                  :key="item.uid"
                  :label="item.realName"
                  :label="item.username"
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
            <!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
      </el-row>
@@ -70,21 +70,21 @@
        </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="作业单位" prop="workDepId">
            <el-cascader style="width: 100%" v-model="form.workDepId" :props="depProps" :options="lists.departList" :show-all-levels="false"/>
          <el-form-item label="作业单位" prop="workDepIds">
            <el-cascader style="width: 100%" v-model="form.workDepIds" :props="depProps" @change="getWorkerList" :options="lists.departList" :show-all-levels="false"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作业负责人" prop="headUids">
            <el-select v-model="form.headUids" multiple filterable @change="getStartEndIds" clearable>
          <el-form-item label="作业人" prop="operatorUids">
            <el-select v-model="form.operatorUids" filterable multiple clearable>
              <el-option
                  v-for="item in lists.workerList"
                  v-for="item in zyList"
                  :key="item.uid"
                  :label="item.username"
                  :label="item.realName"
                  :value="item.uid"
              />
            </el-select>
<!--            <el-cascader style="width: 100%" v-model="form.headUids" :options="lists.workerList" :props="casProps" @change="getStartEndIds" filterable :show-all-levels="false"/>-->
            <!--            <el-cascader style="width: 100%" v-model="form.operatorUids" :options="lists.spList.opList" :props="cas2Props" @change="singleSelect($event,'作业人')" filterable :show-all-levels="false"/>-->
          </el-form-item>
        </el-col>
            </el-row>
@@ -315,6 +315,7 @@
    interface stateType {
        form: Object,
        equipmentDialog: boolean,
    zyList: []
    props1:{},
    depProps:{},
    casProps:{}
@@ -335,6 +336,7 @@
        tabLoading: false,
                equipmentDialog: false,
        safetyMeasureBasicList: [],
        zyList: [],
                form: {
          workType: 2,
          workLevel: 0,
@@ -347,7 +349,7 @@
          headUids: [],
          analystUids: [],
          guardianUids: [],
          workDepId: null,
          workDepIds: [],
          workContent: '',
          workLocation: '',
          riskIdentification: [],
@@ -372,6 +374,7 @@
          expandTrigger: 'hover',
          label: 'depName',
          value: 'depId',
          multiple: true,
          checkStrictly: true,
          emitPath: false
        },
@@ -503,7 +506,7 @@
        workContent: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
                workLocation: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        operatorUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepId: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        workDepIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        headUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        analystUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
@@ -521,13 +524,21 @@
      const workSelectRef = ref()
            // 页面载入时执行方法
            onMounted(() => {
        state.zyList = props.lists.spList.opList
        getBasicData()
      });

      const openWorkSelect = ()=>{
        workSelectRef.value.openDialog(state.form.involveOtherWork)
      }

      const getWorkerList = (val)=>{
        const filteredList = props.lists.spList.opList.filter(i => state.form.workDepIds.includes(i.depId));
        if(filteredList && filteredList.length>0){
          state.zyList = filteredList
        }else{
          state.zyList = props.lists.spList.opList
        }
      }
      const getSelected = ()=>{
        state.form.involveOtherWork = workSelectRef.value.selected
      }
@@ -734,6 +745,7 @@
            return {
                renderMenu,
        getBasicData,
        getWorkerList,
        getStartEndIds,
        getSafetyIds,
        isFirstRow,

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

@@ -35,7 +35,7 @@
            size: Number,
            theme: Boolean
        },
        setup(props) {
        setup(props,context) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const screenThemes = useScreenTheme()
@@ -50,220 +50,68 @@

            // 获取spi数据
            const getSpiData = async () => {
                let res = await riskWarningApi().getSpiData(screenTheme.value.depId);
                if (res.data.code === '200') {
                    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',
                        message: res.data.msg
                    });
                }
        let res = await riskWarningApi().getSpiPage({
            pageIndex: 1,
            pageSize: 12
        })
        if (res.data.code === '200') {
          state.spiData = res.data.data;
          initSpi(state.spiData.reverse())
          context.emit('getData',state.spiData.reverse())
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
            };
            type EChartsOption = echarts.EChartsOption
            // 隐患整改情况
            const initSpi =()=>{
            const initSpi =(data)=>{
                let dom = document.getElementById(spi.value);
                let myChart = echarts.init(dom);

                let option: EChartsOption;

                option = {
                    legend: {
                        data: ['注意线', '警告线', '危险线', 'SPI预警指数值'],
                        top: '2%',
                        right: '6%',
                        textStyle:{
                            color: '#999',
                            fontSize: fontSize(14)
                        }
                    },
                    color: ['rgba(216,55,55)','rgba(235,194,80)','rgba(147,208,81)'],
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '8%',
                        right: '8%',
                        bottom: '5%',
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: state.monthList,
                            axisLine:{
                                show: true,
                                lineStyle:{
                                    color: '#999'
                                }
                            },
                            splitLine:{
                                show: true,
                                lineStyle:{
                                    type: 'dashed',
                                    color: '#999'
                                }
                            },
                            axisLabel:{
                                color: '#999',
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLine:{
                                show: true,
                                lineStyle:{
                                    type: 'dotted'
                                }
                            },
                            axisLabel:{
                                color: '#ccc'
                            },
                            splitLine:{
                                show: true,
                                lineStyle:{
                                    type: 'dashed',
                                    color: 'rgba(255,255,255,.4)'
                                }
                            }
                        }
                    ],
                    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: 'SPI预警指数值',
                            data: state.valueList,
                            type: 'line',
                            triggerLineEvent: true,
                            label:{
                                show: true,
                                color: '#23E5E5',
                                fontSize: fontSize(12)
                            },
                            lineStyle:{
                                width: 2,
                                color: '#23E5E5'
                            },
                            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)", // 坐标轴处的颜色
                                        },
                                    ],
                                }
                            },
                            itemStyle:{
                                color: '#23E5E5',
                                borderColor: '#fff',
                                borderWidth: 4
                            },
                            smooth: true
                        }
                    ]
                };
        option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // Use axis to trigger tooltip
              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
          },
          color: ['#91cc75','#ee6666'],
          grid: [
            {
              top: '5%',
              right: '2%',
              bottom: '10%'
            }
          ],
          xAxis: {
            type: 'category',
            data: data.map(i=>i.time),
            axisLabel: {
              color: '#fff'
            }
          },
          yAxis: {
            type: 'value',
            splitLine:{
              lineStyle: {
                color: 'rgba(255,255,255,.2)'
              }
            }
          },
          series: [
            {
              name: 'spi数值',
              type: 'line',
              data: data.map(i=>i.value?i.value:0)
            }
          ]
        }

                option && myChart.setOption(option);
                window.addEventListener("resize",function (){
@@ -284,7 +132,6 @@
            // 页面载入时执行方法
            onMounted(() => {
                getSpiData();
                initSpi();
            });

            return {

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

@@ -44,7 +44,7 @@
            size: Number,
            theme: Boolean
        },
        setup(props) {
        setup(props,context) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const screenThemes = useScreenTheme()
@@ -139,27 +139,18 @@
        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]
          year: state.timeValue[0],
          month: state.timeValue[1],
        }
        if(state.timeValue[1] == 0){
          data.beginMonth = 1
          data.endMonth = 12
          data.month = ''
        }
        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)
          state.accData = res.data.data
          initAccidentByMonth(state.accData)
          context.emit('getData',state.accData)
        } else {
          ElMessage({
            type: 'warning',
@@ -170,7 +161,7 @@

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

@@ -219,13 +210,12 @@
                                    fontWeight: 'bold'
                                }
                            },
                            data: [
                                { value: one, name: '特别重大事故' },
                                { value: two, name: '重大事故' },
                                { value: three, name: '较大事故' },
                                { value: four, name: '一般事故' },
                                { value: five, name: '未遂事故' }
                            ],
                            data: data.map(i=>{
                return {
                  name: i.accidentGrade,
                  value: i.count
                }
              }),
                            center: ['50%','60%']
                        }
                    ]
@@ -257,7 +247,7 @@
                }else{
                    state.selector =  'select-light'
                }
        getDataByYearId()
        // getDataByYearId()
            })

      const changeTime = (value)=>{
@@ -272,7 +262,6 @@
        getTime();
        makeList();
        getDataByYearId();
                // initAccidentByYear();
            });

            onUnmounted(() =>{

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

@@ -54,7 +54,7 @@
            size: Number,
            theme: Boolean
        },
        setup(props) {
        setup(props,context) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const screenThemes = useScreenTheme()
@@ -151,29 +151,22 @@
      const changeTime = (value)=>{
        state.timeValue[0] = value[0]
        state.timeValue[1] = value[1]
        getDataByYearId()
      }

      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]
          year: state.timeValue[0],
          month: state.timeValue[1],
        }
        if(state.timeValue[1] == 0){
          data.beginMonth = 1
          data.endMonth = 12
          data.month = ''
        }
        let res = await riskWarningApi().getSelfPreventByTimeDep(data);
        let res = await riskWarningApi().getDpGrade(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)
          initdangerByMonth(state.dangerData)
          context.emit('getData',state.dangerData)
        } else {
          ElMessage({
            type: 'warning',
@@ -184,7 +177,7 @@

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

@@ -194,7 +187,6 @@
                    tooltip: {
                        trigger: 'item'
                    },
                    color: ['#FAC858','#EE6666'],
                    legend: {
                        top: '8%',
                        left: 'center',
@@ -231,7 +223,20 @@
                                    fontWeight: 'bold'
                                }
                            },
                            data: danger,
                            data: [
                {
                  name: 'A级',
                  value: data.a
                },
                {
                  name: 'B级',
                  value: data.b
                },
                {
                  name: 'C级',
                  value: data.c
                }
              ],
                            center: ['50%','55%']
                        }
                    ]
@@ -263,7 +268,7 @@
        }else{
          state.selector =  'select-light'
        }
        getDataByYearId()
        // getDataByYearId()
            })

            // 页面载入时执行方法

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

@@ -18,9 +18,11 @@
    import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
    import * as echarts from 'echarts';
    import '/@/theme/bigScreen.css'
  import {riskWarningApi} from "/@/api/riskWarning";


    interface stateType {
    educateData: []
    }
    export default defineComponent({
        name: 'educate',
@@ -28,16 +30,32 @@
        props:{
            size: Number
        },
        setup(props) {
        setup(props,context) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const educate = ref("eChartEdu" + Date.now() + Math.random())
            const state = reactive<stateType>({

        educateData: []
            })

      const getTrainInfo = async () => {
        let res = await riskWarningApi().getTrainInfo();
        if (res.data.code === '200') {
          state.educateData = res.data.data
          initEducate(state.educateData)
          context.emit('getData',state.educateData)
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }


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

@@ -46,7 +64,6 @@
                option = {
                    color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
                    legend: {
                        top: '8%',
                        left: 'center',
                        itemWidth: fontSize(10),
                        itemHeight: fontSize(8),
@@ -57,12 +74,11 @@
                    },
                    radar: [
                        {
                            indicator: [
                                { name: '设计培训次数' },
                                { name: '培训时间（小时）' },
                                { name: '完成比例（%）' }
                            ],
                            center: ['50%', '60%'],
                            indicator: data.map(i=>{
                const {name} = i
                return {name}
              }),
                            center: ['50%', '50%'],
                            radius: fontSize(65),
                            startAngle: 90,
                            splitNumber: 4,
@@ -70,8 +86,8 @@
                            axisName: {
                                formatter: '{value}',
                                color: '#428BD4',
                                fontSize: fontSize(10),
                                width: 20,
                                fontSize: fontSize(9),
                                width: 10,
                                overflow: 'break'
                            },
                            splitArea: {
@@ -103,15 +119,7 @@
                            },
                            data: [
                                {
                                    value: [100, 8, 0.4, -80, 2000],
                                    name: '企业汇总'
                                },
                                {
                                    value: [60, 5, 0.3, -100, 1500],
                                    name: '事业部A',
                                    areaStyle: {
                                        color: 'rgba(255, 228, 52, 0.6)'
                                    }
                                    value: data.map(i=>i.count),
                                }
                            ]
                        },
@@ -130,7 +138,7 @@

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

            return {

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

@@ -20,8 +20,10 @@
    import * as echarts from 'echarts';
    import '/@/theme/bigScreen.css'
    import {useScreenTheme} from "/@/stores/screenTheme"
  import {riskWarningApi} from "/@/api/riskWarning";

    interface stateType {
    reportData: []
        config: object
    }
    export default defineComponent({
@@ -31,7 +33,7 @@
            size: Number,
            theme: Boolean
        },
        setup(props) {
        setup(props,context) {
            const screenThemes = useScreenTheme()
            const { screenTheme }  = storeToRefs(screenThemes);
            const userInfo = useUserInfo()
@@ -39,45 +41,54 @@
            const router = useRouter();
            const pro = ref("eChartPro" + Date.now() + Math.random())
            const state = reactive<stateType>({
        reportData: [],
                config:{
                    header: ['消息列表', '同比'],
                    data: [
                        ['一月预警消息SPI报告', '<span style="color:#4CF475;">↑ 94%</span>'],
                        ['二月预警消息SPI报告', '<span style="color:#4CF475;">↑ 94%</span>'],
                        ['三月预警消息SPI报告', '<span style="color:#4CF475;">↑ 94%</span>'],
                        ['四月预警消息SPI报告', '<span style="color:red;">↓ 43%</span>'],
                        ['五月预警消息SPI报告', '<span style="color:#4CF475;">↑ 94%</span>'],
                        ['六月预警消息SPI报告', '<span style="color:#4CF475;">↑ 94%</span>'],
                        ['七月预警消息SPI报告', '<span style="color:#4CF475;">↑ 94%</span>'],
                        ['八月预警消息SPI报告', '<span style="color:red;">↓ 65%</span>'],
                        ['九月预警消息SPI报告', '<span style="color:#4CF475;">↑ 94%</span>'],
                        ['十月预警消息SPI报告', '<span style="color:#4CF475;">↑ 94%</span>'],
                        ['十一月预警消息SPI报告', '<span style="color:#4CF475;">↑ 94%</span>'],
                        ['十二月预警消息SPI报告', '<span style="color:#4CF475;">↑ 94%</span>']
                    ],
                    index: true,
                    columnWidth: [60],
                    align: ['center','center','center'],
                    header: ['消息列表','同比'],
                    data: [],
                    align: ['left'],
                    headerBGC: '#0049af',
                    oddRowBGC: 'none',
          index: true,
          columnWidth: [55,250],
                    evenRowBGC: 'rgba(57,122,206,.1)',
                    indexHeader: '序号',
                    rowNum: fontSize(5)
                }
            })

      const getReport = async () => {
        let res = await riskWarningApi().getAllReport();
        if (res.data.code === '200') {
          state.reportData = res.data.data
          state.config.data = state.reportData.map(i=> {
            if(i.yoy >= 0){
              return [i.spiName,'<span style="color:#11feee">' + i.yoy + '%</span>']
            }else{
              return [i.spiName,'<span style="color:red">' + i.yoy + '%</span>']
            }

          })
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }

            const mouseoverHandler = (e: any) => {

            }

            const clickHandler = (e: any) => {
                console.log(e.row,'row')
                router.push({
                    path: 'msgDetail',
                    path: 'screenPage',
                    query: {
                        row: e.row
            num: 8,
                        rowIndex: e.rowIndex
                    }
                })
        context.emit('getData',e.rowIndex)
            }

            function fontSize(val){
@@ -110,6 +121,7 @@

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


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

@@ -1,8 +1,9 @@
<template>
    <div class="charts-cont">
        <div class="monitor" :id="monitor">
            <div>
                <img src="../../../../assets/warningScreen/video.png">
        <div class="monitor">
            <div style="width: 100%;height: 100%">
<!--                <img src="../../../../assets/warningScreen/video.png">-->
        <iframe class="video" style="width: 100%;height: 100%" :src="'http://36.108.169.10:8088/808gps/open/player/video.html?lang=zh&devIdno=' + videoUrl + '&&account=gtxh&password=000000'"></iframe>
            </div>
        </div>
    </div>
@@ -20,31 +21,58 @@
    import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
    import * as echarts from 'echarts';
    import '/@/theme/bigScreen.css'
  import {videoApi} from "/@/api/systemManage/video";


    interface stateType {
    videoList: [],
    listQuery: {}
    videoUrl: string
    }
    export default defineComponent({
        name: 'monitor',
        components: {},
        props:['allData'],
        setup() {
        props: [''],
        setup(props,context) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const monitor = ref("eChartMon" + Date.now() + Math.random())
            const state = reactive<stateType>({

        videoList: [],
        listQuery: {
          bizDepId: null,
          name: '',
          shortName: '',
          pageIndex: 1,
          pageSize: 999
        },
        videoUrl: ''
            })

      onMounted(() => {
        getVideoTableData()
      })


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

      const getVideoTableData = async () => {
        let res = await videoApi().getVideoList(state.listQuery);
        if (res.data.code === '200') {
          state.videoList = res.data.data
          state.videoUrl = state.videoList[0].deviceNo
          context.emit('getData',state.videoList)
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }
      const changeVideo = (no)=>{
        state.videoUrl = no
      }
            return {
                monitor,
                Search,
        getVideoTableData,
        changeVideo,
                ...toRefs(state)
            };
        },

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

@@ -10,18 +10,18 @@
<script lang="ts">
    import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted} 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 { ElMessage } from 'element-plus'
    import type { FormInstance, FormRules } from 'element-plus'
    import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
    import * as echarts from 'echarts';
    import '/@/theme/bigScreen.css'
  import {riskWarningApi} from "/@/api/riskWarning";


    interface stateType {
    proData: []
    }
    export default defineComponent({
        name: 'profession',
@@ -29,40 +29,34 @@
        props:{
            size: Number
        },
        setup(props) {
        setup(props,context) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const pro = ref("eChartPro" + Date.now() + Math.random())
            const state = reactive<stateType>({
                config:{
                    data: [
                        {
                            name: '持证人员',
                            value: 55
                        },
                        {
                            name: '非持证人员',
                            value: 120
                        }
                    ],
                    radius: '65%',
                    activeRadius: '60%',
                    color: ['#FAC858','#EE6666'],
                    lineWidth: fontSize(25),
                    digitalFlopStyle: {
                        fontSize: 16,
                        fill: '#999'
                    }
                }
            })
        proData: []
      })

      const getUserCount = async () => {
        let res = await riskWarningApi().getUserCount();
        if (res.data.code === '200') {
          state.proData = res.data.data
          initPro(state.proData)
          context.emit('getData',state.proData)
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }

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

                let option: EChartsOption;

                option = {
                    tooltip: {
                        trigger: 'item'
@@ -77,17 +71,17 @@
                    },
                    series: [
                        {
                            name: 'Access From',
                            name: '人员专业度分布',
                            type: 'pie',
                            radius: ['45%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 4
                                borderRadius: 2
                            },
                            label: {
                                show: true,
                                position: 'outer',
                                fontSize: fontSize(12),
                                fontSize: fontSize(8),
                                color: '#999',
                                textBorderWidth: 0,
                                width: 30,
@@ -105,10 +99,13 @@
                                    fontWeight: 'bold'
                                }
                            },
                            data: [
                                { value: 1048, name: '持证人员' },
                                { value: 735, name: '非持证人员' }
                            ],
                            data: data.map(i=>{
                const obj = {
                  name: i.name,
                  value: i.count
                }
                return obj
              }),
                            center: ['50%','55%']
                        }
                    ]
@@ -126,7 +123,7 @@

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

            return {

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

@@ -1,15 +1,15 @@
<template>
    <div class="charts-cont">
        <div :class="selector">
            <el-cascader
                    class="timeSe"
                    :teleported="false"
                    v-model="timeValue"
                    :options="optionList"
                    :props="riskProps"
                    @change="changeTime"
            />
        </div>
<!--        <div :class="selector">-->
<!--            <el-cascader-->
<!--                    class="timeSe"-->
<!--                    :teleported="false"-->
<!--                    v-model="timeValue"-->
<!--                    :options="optionList"-->
<!--                    :props="riskProps"-->
<!--                    @change="changeTime"-->
<!--            />-->
<!--        </div>-->
        <div class="risk" :id="risk1"></div>
<!--        <div v-show="curValue===false" class="risk" :id="risk2"></div>-->
    </div>
@@ -55,7 +55,7 @@
            theme: Boolean,
      dep: Array
        },
        setup(props) {
        setup(props,context) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const screenThemes = useScreenTheme()
@@ -147,19 +147,6 @@
          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();
@@ -184,51 +171,13 @@
          }
        }
      };
      // 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);
        let res = await riskWarningApi().getDpLine();
        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)
          initRisk1(state.riskData)
          context.emit('getData',state.riskData)
        } else {
          ElMessage({
            type: 'warning',
@@ -246,12 +195,10 @@

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

                let option: EChartsOption;

                option = {
                    tooltip: {
                        trigger: 'axis',
@@ -260,245 +207,47 @@
                            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: [
            //滑动条
          color: ['#91cc75','#ee6666'],
          grid: [
            {
              xAxisIndex: 0, //这里是从X轴的0刻度开始
              show: false, //是否显示滑动条，不影响使用
              type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
              startValue: 0, // 从头开始。
              endValue: 6, // 一次性展示几个。
            },
          ],
                    legend: {
                        top: '0',
                        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: depList,
                        axisLine:{
                            show: true,
                            lineStyle:{
                                color: '#999'
                            }
                        },
                        axisLabel:{
                            color: '#999',
              fontSize: fontSize(9)
                        }
                    },
                    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: deathList,
                            barCategoryGap: '50%'
                        },
                        {
                            name: '可能造成重伤的',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: hardList,
                            barCategoryGap: '50%'
                        },
                        {
                            name: '可能造成轻伤的',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: false
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: lightList,
                            barCategoryGap: '50%'
                        }
                    ]
                };
                // 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;
              top: '5%',
              right: '2%',
              bottom: '10%'
            }
            myChart.setOption(option);
          }, 6000)
        }
          ],
          xAxis: {
            type: 'category',
            data: data.map(i=>i.time),
            axisLabel: {
              color: '#fff'
            }
          },
          yAxis: {
            type: 'value',
            splitLine:{
              lineStyle: {
                color: 'rgba(255,255,255,.2)'
              }
            }
          },
          series: [
            {
              name: '一般隐患',
              type: 'line',
              data: data.map(i=>i.generalDanger?i.generalDanger:0)
            },
            {
              name: '重大隐患',
              type: 'line',
              data: data.map(i=>i.majorDanger?i.majorDanger:0)
            },
          ]
                };
                option && myChart.setOption(option);
                window.addEventListener("resize",function (){
                    myChart.resize();
                });
                // 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: ['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){

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

@@ -1,9 +1,6 @@
<template>
    <div class="charts-cont">
        <div v-show="curValue===true" class="stock" :id="stock1">

        </div>
        <div v-show="curValue===false" class="stock" :id="stock2"></div>
        <div class="stock" :id="stock1"></div>
    </div>
</template>

@@ -19,9 +16,11 @@
    import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
    import * as echarts from 'echarts';
    import '/@/theme/bigScreen.css'
  import {riskWarningApi} from "/@/api/riskWarning";

    interface stateType {
        curValue: boolean
    stockData: []
    changeCharts: any
    }
    export default defineComponent({
        name: 'stock',
@@ -29,595 +28,127 @@
        props:{
            size: Number
        },
        setup(props) {
        setup(props,context) {
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
            const stock1 = ref("eChartStock1" + Date.now() + Math.random())
            const stock2 = ref("eChartStock2" + Date.now() + Math.random())
            const state = reactive<stateType>({
                curValue: true
        stockData: [],
        changeCharts: null
            })

            const swit = setInterval(()=>{
                state.curValue = !state.curValue
                if(state.curValue == true){
                    nextTick(()=>{
                        initStock1()
                    })
                }else{
                    nextTick(()=>{
                        initStock2()
                    })
                }
            },5000)
      const getSupplies = async () => {
        let res = await riskWarningApi().getEmergencySupplies();
        if (res.data.code === '200') {
          state.stockData = res.data.data
          const chartData = state.stockData.reduce((acc, curr, index) => {
            if (index % 4 === 0) acc.push([]);
            acc[acc.length - 1].push(curr);
            return acc;
          }, [])
          const maxNum = Math.max(...state.stockData.map(i=>i.count))
          let curIndex = 0
          const renderCharts = () => {
            const data = chartData[curIndex]
            initStock(data,maxNum)
            curIndex = (curIndex + 1) % chartData.length
          }
          renderCharts()
          state.changeCharts = setInterval(renderCharts,5000)
          context.emit('getData',state.stockData)
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }


            type EChartsOption = echarts.EChartsOption
            // 隐患整改情况
            const initStock1 =()=>{
            const initStock =(data,maxNum)=>{
                let dom = document.getElementById(stock1.value);
                let myChart = echarts.init(dom);

                let option: EChartsOption;

                option = {
                    series: [
                        {
                            name: '消防耗材',
                            type: 'pie',
                            radius: [fontSize(40), fontSize(50)],
                            data: [
                                { value: 2103, name: '消防耗材'},
                                { value: 2310, name: '消防耗材未使用'}
                            ],
                            label: {
                                show: true,
                                position: 'center',
                                formatter: '{total|{a}}' + '\n\r' + '{active|2103}',
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#999',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#999',
                                    },
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#2D74C0" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#21D9DC" // 100% 处的颜色
                                    }]
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#333" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#333" // 100% 处的颜色
                                    }]
                                }
                            ],
                            center: ['20%','25%']
                        },
                        {
                            name: '安全帽',
                            type: 'pie',
                            radius: [fontSize(40), fontSize(50)],
                            data: [
                                { value: 23509, name: '安全帽'},
                                { value: 34312, name: '安全帽未使用'}
                            ],
                            label: {
                                show: true,
                                position: 'center',
                                formatter: '{total|{a}}' + '\n\r' + '{active|23509}',
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#999',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#999',
                                    },
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#0DAA2E" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#4CF475" // 100% 处的颜色
                                    }]
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#333" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#333" // 100% 处的颜色
                                    }]
                                }
                            ],
                            center: ['50%','25%']
                        },
                        {
                            name: '防护服',
                            type: 'pie',
                            radius: [fontSize(40), fontSize(50)],
                            data: [
                                { value: 12830, name: '防护服'},
                                { value: 22140, name: '防护服未使用'}
                            ],
                            label: {
                                show: true,
                                position: 'center',
                                formatter: '{total|{a}}' + '\n\r' + '{active|12830}',
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#999',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#999',
                                    },
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#E8B21D" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#E5DC44" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#333" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#333" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            ],
                            center: ['80%','25%']
                        },
                        {
                            name: '劳保鞋',
                            type: 'pie',
                            radius: [fontSize(40), fontSize(50)],
                            data: [
                                { value: 5492, name: '劳保鞋'},
                                { value: 10842, name: '劳保鞋未使用'}
                            ],
                            label: {
                                show: true,
                                position: 'center',
                                formatter: '{total|{a}}' + '\n\r' + '{active|5492}',
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#999',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#999',
                                    },
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#D65146" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#F58C28" // 100% 处的颜色
                                    }]
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#333" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#333" // 100% 处的颜色
                                    }]
                                }
                            ],
                            center: ['33.33%','75%']
                        },
                        {
                            name: '动火护具',
                            type: 'pie',
                            radius: [fontSize(40), fontSize(50)],
                            data: [
                                { value: 44043, name: '动火护具'},
                                { value: 68102, name: '动火护具未使用' }
                            ],
                            label: {
                                show: true,
                                position: 'center',
                                formatter: '{total|{a}}' + '\n\r' + '{active|44043}',
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#999',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#999',
                                    },
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#4449D1" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#A86DE5" // 100% 处的颜色
                                    }]
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#333" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#333" // 100% 处的颜色
                                    }]
                                }
                            ],
                            center: ['66.66%','75%']
                        }
                    ],
          series: data.map((item,index)=>{
            const centerList = [
              ['30%','25%'],['70%','25%'],['30%','75%'],['70%','75%']
            ]
            const i = {
              type: 'gauge',
              radius: '40%',
              startAngle: 90,
              endAngle: -270,
              pointer: {
                show: false
              },
              progress: {
                show: true,
                overlap: false,
                roundCap: true,
                clip: false,
                itemStyle: {
                  borderWidth: 0,
                  borderColor: '#464646'
                },
              },
              axisLine: {
                lineStyle: {
                  width: fontSize(10),
                  color: [[1,'#666']]
                },
                show: true
              },
              splitLine: {
                show: false,
                distance: 0,
                length: 10
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false,
                distance: 50
              },
              data: [
                {
                  value: item.count,
                  name: item.name,
                  title: {
                    offsetCenter: ['0%', '-25%'],
                    color: '#fff'
                  },
                },
              ],
              center: centerList[index],
              // max: maxNum,
              title: {
                fontSize: fontSize(11),
              },
              detail: {
                width: 50,
                height: fontSize(20),
                fontSize: fontSize(24),
                color: 'inherit',
                borderColor: 'inherit',
                borderRadius: 20,
                borderWidth: 0,
                formatter: '{value}'
              }
            }
            return i
          })
                };

                option && myChart.setOption(option);
                window.addEventListener("resize",function (){
                    myChart.resize();
                });
                echarts.init(document.getElementById(stock2.value)).dispose()
            }

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

                let option: EChartsOption;

                option = {
                    series: [
                        {
                            name: '急救包',
                            type: 'pie',
                            radius: [fontSize(40), fontSize(50)],
                            data: [
                                { value: 8603, name: '急救包'},
                                { value: 12032, name: '急救包未使用'}
                            ],
                            label: {
                                show: true,
                                position: 'center',
                                formatter: '{total|{a}}' + '\n\r' + '{active|8603}',
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#999',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#999',
                                    },
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#2D74C0" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#21D9DC" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#333" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#333" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            ],
                            center: ['20%','25%']
                        },
                        {
                            name: '人员培训资料',
                            type: 'pie',
                            radius: [fontSize(40), fontSize(50)],
                            data: [
                                { value: 8960, name: '人员培训资料'},
                                { value: 9890, name: '人员培训资料未使用'}
                            ],
                            label: {
                                show: true,
                                position: 'center',
                                formatter: '{total|{a}}' + '\n\r' + '{active|8960}',
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#999',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#999',
                                    },
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#0DAA2E" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#4CF475" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#333" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#333" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            ],
                            center: ['50%','25%']
                        },
                        {
                            name: '安全护具',
                            type: 'pie',
                            radius: [fontSize(40), fontSize(50)],
                            data: [
                                { value: 12302, name: '安全护具'},
                                { value: 20130, name: '安全护具未使用'}
                            ],
                            label: {
                                show: true,
                                position: 'center',
                                formatter: '{total|{a}}' + '\n\r' + '{active|12302}',
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#999',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#999',
                                    },
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#E8B21D" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#E5DC44" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#333" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#333" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            ],
                            center: ['80%','25%']
                        },
                        {
                            name: '高空护具',
                            type: 'pie',
                            radius: [fontSize(40), fontSize(50)],
                            data: [
                                { value: 42948, name: '高空护具'},
                                { value: 89342, name: '高空护具未使用'}
                            ],
                            label: {
                                show: true,
                                position: 'center',
                                formatter: '{total|{a}}' + '\n\r' + '{active|42948}',
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#999',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#999',
                                    },
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#D65146" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#F58C28" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#333" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#333" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            ],
                            center: ['33.33%','75%']
                        },
                        {
                            name: '防尘护具',
                            type: 'pie',
                            radius: [fontSize(40), fontSize(50)],
                            data: [
                                { value: 1220, name: '防尘护具'},
                                { value: 5034, name: '防尘护具未使用' }
                            ],
                            label: {
                                show: true,
                                position: 'center',
                                formatter: '{total|{a}}' + '\n\r' + '{active|1220}',
                                rich: {
                                    total:{
                                        fontSize: fontSize(12),
                                        color:'#999',
                                        lineHeight: fontSize(16)
                                    },
                                    active: {
                                        fontSize: fontSize(16),
                                        color:'#999',
                                    },
                                }
                            },
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#4449D1" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#A86DE5" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                },
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: "#333" // 0% 处的颜色
                                    }, {
                                        offset: 1, color: "#333" // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            ],
                            center: ['66.66%','75%']
                        }
                    ],
                };

                option && myChart.setOption(option);
                window.addEventListener("resize",function (){
                    myChart.resize();
                });
                echarts.init(document.getElementById(stock1.value)).dispose()
            }

            function fontSize(val){
@@ -627,14 +158,13 @@

            // 页面载入时执行方法
            onMounted(() => {
                initStock1();
                getSupplies()
            });
            onBeforeUnmount(() =>{
                clearInterval(swit)
                clearInterval(state.changeCharts)
            })
            return {
                stock1,
                stock2,
                Search,
                fontSize,
                ...toRefs(state)

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

@@ -1,10 +1,6 @@
<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>
        <div class="train" :id="train1"></div>
    </div>
</template>

@@ -34,12 +30,8 @@
    import '/@/theme/bigScreen.css'

    interface stateType {
        curTab: number,
    timeValue: Array<any>,
    traData: Array<any>,
    monthData: Array<any>,
    lastDays: number | null,
    tip: string,
    changeChart: any
    }
    export default defineComponent({
        name: 'accident',
@@ -48,78 +40,35 @@
            size: Number,
      theme: Boolean
        },
        setup(props) {
        setup(props,context) {
            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,
        timeValue: [],
        traData: [],
        monthData: [],
        lastDays: null,
        tip: 'tip-dark'
        changeChart: null
            })
      const timeForm = {
        hour12: false,
        year: 'numeric',
        month: 'numeric',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      };

      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);
        let res = await riskWarningApi().getSafeCheckTask();
        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
              }
            }
          const chartData = state.traData.reduce((acc, curr, index) => {
            if (index % 4 === 0) acc.push([]);
            acc[acc.length - 1].push(curr);
            return acc;
          }, [])
          let curIndex = 0
          const renderCharts = () => {
            const data = chartData[curIndex]
            initTrain1(data)
            curIndex = (curIndex + 1) % chartData.length
          }
          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()
          renderCharts()
          state.changeChart = setInterval(renderCharts,5000)
          context.emit('getData',state.traData)
        } else {
          ElMessage({
            type: 'warning',
@@ -127,43 +76,14 @@
          });
        }
      }
      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
                    if(state.curTab == 2){
                        nextTick(()=>{
                            initTrain2()
                        })
                    }else{
                        nextTick(()=>{
                            initTrain3()
                        })
                    }

                }else{
                    state.curTab = 1
                    nextTick(()=>{
                        initTrain1()
                    })
                }
            },5000)
      }

            type EChartsOption = echarts.EChartsOption
            // 隐患整改情况
            const initTrain1 =()=>{
            const initTrain1 =(data)=>{
                let dom = document.getElementById(train1.value);
                let myChart = echarts.init(dom);
                let option: EChartsOption;
@@ -200,7 +120,7 @@
                    },
                    yAxis: {
                        type: 'category',
                        data: ['一月', '二月', '三月', '四月'],
                        data: data.map(i=>i.year+ '.' + i.month),
                        axisLine:{
                            show: true,
                            lineStyle:{
@@ -208,14 +128,14 @@
                            }
                        },
                        axisLabel:{
                            color: '#999'
                            color: '#fff'
                        }
                    },
                    series: [
                        {
                            name: '2011',
                            type: 'bar',
                            data: state.monthData[0],
                            data: data.map(i=>i.count),
                            itemStyle:{
                                color: {
                                    x: 0,
@@ -250,193 +170,6 @@
                window.addEventListener("resize",function (){
                    myChart.resize();
                });
                echarts.init(document.getElementById(train2.value)).dispose()
                echarts.init(document.getElementById(train3.value)).dispose()
            }

            const initTrain2 =()=>{
                let dom = document.getElementById(train2.value);
                let myChart = echarts.init(dom);
                let option: EChartsOption;

                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        top: '1%',
                        left: '2%',
                        right: '2%',
                        bottom: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLine:{
                            show: true,
                            lineStyle:{
                                type: 'dotted'
                            }
                        },
                        axisLabel:{
                            color: '#999'
                        },
                        splitLine:{
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: ['五月', '六月','七月', '八月'],
                        axisLine:{
                            show: true,
                            lineStyle:{
                                color: '#999'
                            }
                        },
                        axisLabel:{
                            color: '#999'
                        }
                    },
                    series: [
                        {
                            name: '2011',
                            type: 'bar',
                            // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
                            data: state.monthData[1],
                            barCategoryGap: '50%',
                            itemStyle:{
                                color: {
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0.1,
                                            color: "#2D74C0", // 线处的颜色
                                        },
                                        {
                                            offset: 0.9,
                                            color: "#21D9DC", // 坐标轴处的颜色
                                        },
                                    ]
                                },
                                borderRadius: [0,99,99,0]
                            },
                            label:{
                                show: true,
                                position: 'outside',
                                color: '#999',
                                fontSize: fontSize(11)
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
                window.addEventListener("resize",function (){
                    myChart.resize();
                });
                echarts.init(document.getElementById(train1.value)).dispose()
                echarts.init(document.getElementById(train3.value)).dispose()
            }

            const initTrain3 =()=>{
                let dom = document.getElementById(train3.value);
                let myChart = echarts.init(dom);
                let option: EChartsOption;

                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        top: '1%',
                        left: '2%',
                        right: '2%',
                        bottom: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLine:{
                            show: true,
                            lineStyle:{
                                type: 'dotted'
                            }
                        },
                        axisLabel:{
                            color: '#999'
                        },
                        splitLine:{
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'category',
                        // data: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
                        data: ['九月', '十月', '十一月', '十二月'],
                        axisLine:{
                            show: true,
                            lineStyle:{
                                color: '#999'
                            }
                        },
                        axisLabel:{
                            color: '#999'
                        }
                    },
                    series: [
                        {
                            name: '2011',
                            type: 'bar',
                            // data: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230]
                            data: state.monthData[2],
                            barCategoryGap: '50%',
                            itemStyle:{
                                color: {
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0.1,
                                            color: "#2D74C0", // 线处的颜色
                                        },
                                        {
                                            offset: 0.9,
                                            color: "#21D9DC", // 坐标轴处的颜色
                                        },
                                    ]
                                },
                                borderRadius: [0,99,99,0]
                            },
                            label:{
                                show: true,
                                position: 'outside',
                                color: '#999',
                                fontSize: fontSize(11)
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
                window.addEventListener("resize",function (){
                    myChart.resize();
                });
                echarts.init(document.getElementById(train1.value)).dispose()
                echarts.init(document.getElementById(train2.value)).dispose()
            }

            function fontSize(val){
@@ -446,27 +179,19 @@


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

            // 页面载入时执行方法
            onMounted(() => {
        getTime();
        getTheme();
        getDataById()
            });
            onBeforeUnmount(() =>{
                clearInterval(changeTab)
        clearInterval(state.changeChart)
            })
            return {
                train1,
                train2,
                train3,
                Search,
                fontSize,
                ...toRefs(state)

 src/views/riskWarningSys/warningBigScreen/index.vue

@@ -30,10 +30,10 @@
<!--                <img src="themeStyle.skinIcon" class="qiehuan" @click="changeTheme" />-->
                <span class="datetime">{{currentTime}}</span>
                <div class="btns">
                    <div class="themeBtn" @click="changeTheme()">
                        <img v-if="screenTheme.isDark" src="../../../assets/warningScreen/skin.png"/>
                        <img v-else src="../../../assets/warningScreen/skin-light.png"/>
                    </div>
<!--                    <div class="themeBtn" @click="changeTheme()">-->
<!--                        <img v-if="screenTheme.isDark" src="../../../assets/warningScreen/skin.png"/>-->
<!--                        <img v-else src="../../../assets/warningScreen/skin-light.png"/>-->
<!--                    </div>-->
                    <div class="fullBtn" @click="onScreenfullClick">
                        <div class="toFull">
                            <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
@@ -64,7 +64,7 @@
                <div class="left-mid">
                    <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                    <div class="part-tit">
                        <span>| 应急演练次数</span>
                        <span>| 智能巡检超期未巡检任务</span>
<!--                        <img @click="jumpPage(2)" src="../../../assets/warningScreen/small-full.png">-->
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(2)"/>
                    </div>
@@ -75,7 +75,7 @@
                <div class="left-bottom">
                    <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                    <div class="part-tit">
                        <span>| 隐患等级数量分布</span>
                        <span>| 隐患趋势</span>
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(3)"/>
                    </div>
                    <div class="chart-box">
@@ -88,15 +88,15 @@
                    <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: 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"
                            />
<!--                            <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>
@@ -160,7 +160,7 @@
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(9)"/>
                    </div>
                    <div class="chart-box">
                        <monitor></monitor>
                        <monitor :size="1" ref="monRef" :theme="screenTheme.isDark"></monitor>
                    </div>
                </div>
                <div class="right-bottom">
@@ -201,6 +201,8 @@
    import {useScreenTheme} from "/@/stores/screenTheme"
    import {storeToRefs} from "pinia";
    import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
    import {NextLoading} from "/@/utils/loading";
    import {videoApi} from "/@/api/systemManage/video";

    // 定义接口来定义对象的类型
    interface stateType {
@@ -248,7 +250,7 @@
                isScreenfull: false,
                currentTime: '',
                dialogShow: 'hide',
                dialogHide: 'showup',
                dialogHide: 'hide',
                depProps: {
                    expandTrigger: 'hover',
                    checkStrictly: true,
@@ -259,8 +261,10 @@
                departList: [],
                timer: null
            });
            const monRef = ref()
            // 页面载入时执行方法
            onMounted(() => {
              NextLoading.done();
                state.depValue = screenTheme.value.depId
                getTime();
                getAllDepartment();
@@ -344,7 +348,7 @@
                }else{
                    state.dialogShow = 'hide'
                }
            };
            }

            const closeInfo = ()=>{
                state.dialogHide = 'hide'
@@ -361,7 +365,10 @@

            // 返回上一页
            const goBack = () => {
                window.history.go(-1);
                // window.history.go(-1);
              router.push({
                path: 'newMenu'
              });
            };

            onBeforeUnmount(() =>{
@@ -385,6 +392,7 @@
                router,
                props,
                screenTheme,
                monRef,
                openDialog,
                closeInfo,
                changeTheme,
@@ -403,10 +411,14 @@
    .hide{
        display: none;
    }

    #container{
      width: 100%;
      height: 100%;
    }
    .showup{
        display: block;
    }

    .dark {
        width: 100%;
        height: 100%;

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

@@ -1,52 +1,31 @@
<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>
    <div class="tit">
      <div class="title">事故等级分布</div>
    </div>
    <div class="chart-cont">
      <div class="chart">
        <accident :size="2.5" ref="accRef" @getData="getData"></accident>
      </div>
      <div class="chart-right">
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
        <div class="charts-des">
        <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" :key="index">
              <h4>{{item.accidentGrade}}：{{item.count}}起</h4>
            </div>
          </div>
        </div>
      </div>
      <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;"/>
    </div>
  </div>
</div>
</template>
<script lang="ts">
  import screenfull from 'screenfull';
@@ -75,7 +54,9 @@

  export default defineComponent({
    name: 'accDesc',
    components: {},
    components: {
      accident: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/accident.vue'))
    },
    props:{
      content: Object || null
    },
@@ -86,28 +67,33 @@
        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') {
      // 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
      //     });
      //   }
      // }

        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      const getData = (data:Array)=>{
        state.descContent = data
      }

      const getTheme =()=>{
        if(screenTheme.value.isDark){
          window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
@@ -118,17 +104,18 @@
        }
      }

      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
        }
      })
      // 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 {
        getData,
        ...toRefs(state)
      };
    }
@@ -136,98 +123,257 @@
</script>

<style scoped lang="scss">
  .dark-desc{
.dark-page{
  width: 100%;
  height: 100%;
  border:1px #5a5959 solid;
  background: url('../../../../../assets/warningScreen/body-bg.jpg');
  padding: 4%;
  .btns{
    position: fixed;
    width: 8%;
    height: 6%;
    right: 5%;
    top: 1.25rem;
    font-size: 1.125rem;
    color: rgb(17, 254, 238);
    cursor: pointer;
  }
  .tit{
    width: 100%;
    height: 100%;
    height: 122px;
    background: url("../../../../../assets/warningScreen/pagebg-t.png") no-repeat center;
    background-size: 100% 100%;

    .des-tit{

    .title{
      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;
        }
      }
      height: 122px;
      line-height: 112px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 2.8rem;
      color: #11feee;
      font-weight: bolder;
      text-align: center;
      letter-spacing: 5px;
    }
  }
  .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;
  .chart-cont{
    width: 100%;
    padding: 20px;
    height: calc(92vh - 122px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .chart{
      width: calc((100% - 20px) * 0.63);
      height: 100%;
      padding: 3%;
      background: url("../../../../../assets/warningScreen/pagebg-l.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .selector-2{
        position: absolute;
        top: 5%;
        right: 10%;
        width: 20%;
        font-size: 1.25rem;
        color: #fff;
      }
      .main-chart{
        width: 100%;
        height: 100%;
      }
    }
    .des-main{
    .chart-right{
      width: calc((100% - 20px) * 0.37);
      height: 100%;
      .charts-des{
        height: 90%;
        padding: 4%;
        background: url("../../../../../assets/warningScreen/pagebg-r.png") no-repeat center;
        background-size: 100% 100%;

        .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-page{
  width: 100%;
  height: 100%;
  border:1px #5a5959 solid;
  background: #F0F0F0;
  padding: 4%;
  .btns{
    position: fixed;
    width: 8%;
    height: 6%;
    right: 5%;
    top: 1.25rem;
    font-size: 1.125rem;
    color: #333;
    cursor: pointer;
  }
  .tit{
    width: 100%;
    height: 122px;
    background: url("../../../../../assets/warningScreen/pagebg-t-light.png") no-repeat center;
    background-size: 100% 100%;


    .title{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      height: 122px;
      line-height: 112px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 2.8rem;
      color: #333;
      font-weight: bolder;
      text-align: center;
      letter-spacing: 5px;
    }
  }

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }
  .chart-cont{
    width: 100%;
    padding: 20px;
    height: calc(92vh - 122px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;
    .chart{
      width: calc((100% - 20px) * 0.63);
      height: 100%;
      padding: 3%;
      background: url("../../../../../assets/warningScreen/pagebg-l-light.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .selector-2{
        position: absolute;
        top: 5%;
        right: 10%;
        width: 20%;
        font-size: 1.25rem;
        color: #fff;
      }
      .main-chart{
        width: 100%;
        height: 100%;
      }
    }
    .chart-right{
      width: calc((100% - 20px) * 0.37);
      height: 100%;

          span{
            margin-right: 10px;
      .charts-des{
        height: 90%;
        padding: 4%;
        background: url("../../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center;
        background-size: 100% 100%;

        .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;
            }
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }
          .des-main{
            width: 100%;
            height: calc(96% - 2.2rem);
            padding: 1rem;
            overflow: auto;
            color: #333;

        &>p{
          font-size: 1rem;
          margin-top: 10px;
            &::-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

@@ -1,56 +1,45 @@
<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="tit">
      <div class="title">隐患等级</div>
    </div>
    <div class="chart-cont">
      <div class="chart">
        <danger :size="2.5" @getData="getData"></danger>
      </div>
      <div class="des-main">
        <div>
          <h4 v-if="descContent.detail && descContent.detail.heavyRiskCount">
            重大隐患数量：{{descContent.detail.heavyRiskCount}}
          </h4>
          <h4 v-else>
            重大隐患数量：0
          </h4>
      <div class="chart-right">
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
        <div class="charts-des">
          <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>
                  A级：{{descContent.a}}
                </h4>
                <h4>
                  B级：{{descContent.b}}
                </h4>
                <h4>
                  C级：{{descContent.c}}
                </h4>
                <h4>
                  已完成整改数：{{descContent.rectifyFinish}}
                </h4>
                <h4>
                  未完成整改数：{{descContent.rectifyNotFinish}}
                </h4>
              </div>
            </div>
          </div>
        </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>-->
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;"/>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import screenfull from 'screenfull';
@@ -76,7 +65,9 @@
  }
  export default defineComponent({
    name: 'danDesc',
    components: {},
    components: {
      danger: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/danger.vue')),
    },
    props:{
      content: Object || null
    },
@@ -106,11 +97,15 @@
        }
      })

      const getData = (data:Object)=>{
        state.descContent = data
      }
      // 页面载入时执行方法
      onMounted(() => {
        getTheme();
      });
      return {
        getData,
        ...toRefs(state)
      };
    }
@@ -118,98 +113,253 @@
</script>

<style scoped lang="scss">
  .dark-desc{
.dark-page{
  width: 100%;
  height: 100%;
  border:1px #5a5959 solid;
  background: url('../../../../../assets/warningScreen/body-bg.jpg');
  padding: 4%;
  .btns{
    position: fixed;
    width: 8%;
    height: 6%;
    right: 5%;
    top: 1.25rem;
    font-size: 1.125rem;
    color: rgb(17, 254, 238);
    cursor: pointer;
  }
  .tit{
    width: 100%;
    height: 100%;
    height: 122px;
    background: url("../../../../../assets/warningScreen/pagebg-t.png") no-repeat center;
    background-size: 100% 100%;

    .des-tit{

    .title{
      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;
        }
      }
      height: 122px;
      line-height: 112px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 2.8rem;
      color: #11feee;
      font-weight: bolder;
      text-align: center;
      letter-spacing: 5px;
    }
  }
  .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;
  .chart-cont{
    width: 100%;
    padding: 20px;
    height: calc(92vh - 122px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .chart{
      width: calc((100% - 20px) * 0.63);
      height: 100%;
      padding: 3%;
      background: url("../../../../../assets/warningScreen/pagebg-l.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .selector-2{
        position: absolute;
        top: 5%;
        right: 10%;
        width: 20%;
        font-size: 1.25rem;
        color: #fff;
      }
      .main-chart{
        width: 100%;
        height: 100%;
      }
    }
    .des-main{
    .chart-right{
      width: calc((100% - 20px) * 0.37);
      height: 100%;
      .charts-des{
        height: 90%;
        padding: 4%;
        background: url("../../../../../assets/warningScreen/pagebg-r.png") no-repeat center;
        background-size: 100% 100%;

        .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;
                margin-bottom: 10px;

                span{
                  margin-right: 10px;
                }
              }

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

  }
}
.light-page{
  width: 100%;
  height: 100%;
  border:1px #5a5959 solid;
  background: #F0F0F0;
  padding: 4%;
  .btns{
    position: fixed;
    width: 8%;
    height: 6%;
    right: 5%;
    top: 1.25rem;
    font-size: 1.125rem;
    color: #333;
    cursor: pointer;
  }
  .tit{
    width: 100%;
    height: 122px;
    background: url("../../../../../assets/warningScreen/pagebg-t-light.png") no-repeat center;
    background-size: 100% 100%;


    .title{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      height: 122px;
      line-height: 112px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 2.8rem;
      color: #333;
      font-weight: bolder;
      text-align: center;
      letter-spacing: 5px;
    }
  }

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }
  .chart-cont{
    width: 100%;
    padding: 20px;
    height: calc(92vh - 122px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;
    .chart{
      width: calc((100% - 20px) * 0.63);
      height: 100%;
      padding: 3%;
      background: url("../../../../../assets/warningScreen/pagebg-l-light.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .selector-2{
        position: absolute;
        top: 5%;
        right: 10%;
        width: 20%;
        font-size: 1.25rem;
        color: #fff;
      }
      .main-chart{
        width: 100%;
        height: 100%;
      }
    }
    .chart-right{
      width: calc((100% - 20px) * 0.37);
      height: 100%;

          span{
            margin-right: 10px;
      .charts-des{
        height: 90%;
        padding: 4%;
        background: url("../../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center;
        background-size: 100% 100%;

        .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;
            }
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }
          .des-main{
            width: 100%;
            height: calc(96% - 2.2rem);
            padding: 1rem;
            overflow: auto;
            color: #333;

        &>p{
          font-size: 1rem;
          margin-top: 10px;
            &::-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;
                margin-bottom: 10px;

                span{
                  margin-right: 10px;
                }
              }

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

  }
}
</style>

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

@@ -1,51 +1,31 @@
<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="tit">
      <div class="title">教育培训分析</div>
    </div>
    <div class="chart-cont">
      <div class="chart">
        <educate :size="2.5" @getData="getData"></educate>
      </div>
      <div class="des-main">
        <div>
          <h4>公司总计：</h4>
      <div class="chart-right">
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
        <div class="charts-des">
          <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" :key="index">
                <h4>{{item.name}}：{{item.count}}%</h4>
              </div>
            </div>
          </div>
        </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>
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;"/>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import screenfull from 'screenfull';
@@ -71,7 +51,9 @@
  }
  export default defineComponent({
    name: 'eduDesc',
    components: {},
    components: {
      educate: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/educate.vue')),
    },
    props:{
      content: Object || null
    },
@@ -101,11 +83,16 @@
        // }
      })

      const getData = (data:Array)=>{
        state.descContent = data
      }

      // 页面载入时执行方法
      onMounted(() => {
        getTheme();
      });
      return {
        getData,
        ...toRefs(state)
      };
    }
@@ -113,98 +100,257 @@
</script>

<style scoped lang="scss">
  .dark-desc{
.dark-page{
  width: 100%;
  height: 100%;
  border:1px #5a5959 solid;
  background: url('../../../../../assets/warningScreen/body-bg.jpg');
  padding: 4%;
  .btns{
    position: fixed;
    width: 8%;
    height: 6%;
    right: 5%;
    top: 1.25rem;
    font-size: 1.125rem;
    color: rgb(17, 254, 238);
    cursor: pointer;
  }
  .tit{
    width: 100%;
    height: 100%;
    height: 122px;
    background: url("../../../../../assets/warningScreen/pagebg-t.png") no-repeat center;
    background-size: 100% 100%;

    .des-tit{

    .title{
      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;
        }
      }
      height: 122px;
      line-height: 112px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 2.8rem;
      color: #11feee;
      font-weight: bolder;
      text-align: center;
      letter-spacing: 5px;
    }
  }
  .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;
  .chart-cont{
    width: 100%;
    padding: 20px;
    height: calc(92vh - 122px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .chart{
      width: calc((100% - 20px) * 0.63);
      height: 100%;
      padding: 3%;
      background: url("../../../../../assets/warningScreen/pagebg-l.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .selector-2{
        position: absolute;
        top: 5%;
        right: 10%;
        width: 20%;
        font-size: 1.25rem;
        color: #fff;
      }
      .main-chart{
        width: 100%;
        height: 100%;
      }
    }
    .des-main{
    .chart-right{
      width: calc((100% - 20px) * 0.37);
      height: 100%;
      .charts-des{
        height: 90%;
        padding: 4%;
        background: url("../../../../../assets/warningScreen/pagebg-r.png") no-repeat center;
        background-size: 100% 100%;

        .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-page{
  width: 100%;
  height: 100%;
  border:1px #5a5959 solid;
  background: #F0F0F0;
  padding: 4%;
  .btns{
    position: fixed;
    width: 8%;
    height: 6%;
    right: 5%;
    top: 1.25rem;
    font-size: 1.125rem;
    color: #333;
    cursor: pointer;
  }
  .tit{
    width: 100%;
    height: 122px;
    background: url("../../../../../assets/warningScreen/pagebg-t-light.png") no-repeat center;
    background-size: 100% 100%;


    .title{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      height: 122px;
      line-height: 112px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 2.8rem;
      color: #333;
      font-weight: bolder;
      text-align: center;
      letter-spacing: 5px;
    }
  }

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }
  .chart-cont{
    width: 100%;
    padding: 20px;
    height: calc(92vh - 122px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;
    .chart{
      width: calc((100% - 20px) * 0.63);
      height: 100%;
      padding: 3%;
      background: url("../../../../../assets/warningScreen/pagebg-l-light.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .selector-2{
        position: absolute;
        top: 5%;
        right: 10%;
        width: 20%;
        font-size: 1.25rem;
        color: #fff;
      }
      .main-chart{
        width: 100%;
        height: 100%;
      }
    }
    .chart-right{
      width: calc((100% - 20px) * 0.37);
      height: 100%;

          span{
            margin-right: 10px;
      .charts-des{
        height: 90%;
        padding: 4%;
        background: url("../../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center;
        background-size: 100% 100%;

        .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;
            }
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }
          .des-main{
            width: 100%;
            height: calc(96% - 2.2rem);
            padding: 1rem;
            overflow: auto;
            color: #333;

        &>p{
          font-size: 1rem;
          margin-top: 10px;
            &::-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

@@ -1,16 +1,39 @@
<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="tit">
      <div class="title">特殊作业实时监控</div>
    </div>
    <div class="chart-cont">
      <div class="chart">
        <monitor :size="2.5" ref="monRef" @getData="getData"></monitor>
      </div>
      <div class="des-main">
        <div>
          <h4>请选择所要查看的监控：</h4>
          <p>监控系统待接入...</p>
      <div class="chart-right">
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
        <div class="charts-des">
          <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 class="videoList" v-if="descContent && descContent.length>0">
                  <div style="cursor: pointer;padding: 10px" v-for="(item,index) in descContent" :key="index" @click="openVideo(item,index)" :class="index == activeIndex?'active':''">
                    {{item.name}}
                  </div>
                </div>
                <div v-else>
                  监控系统待接入...
                </div>
              </div>
            </div>
          </div>
        </div>
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;"/>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import screenfull from 'screenfull';
@@ -32,21 +55,24 @@
  // 定义接口来定义对象的类型
  interface stateType {
    descContent: Object;
    activeIndex: number
    lineColor: Array<string>;
  }
  export default defineComponent({
    name: 'monDesc',
    components: {},
    components: {
      monitor: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/monitor.vue')),
    },
    props:{
      content: Object || null
    },
    setup(props) {
      const screenThemes = useScreenTheme()
      const { screenTheme } = storeToRefs(screenThemes);
      const monRef = ref()
      const state = reactive<stateType>({
        descContent: {

        },
        descContent: {},
        activeIndex: 0,
        lineColor: ['#11FEEE'],
      });

@@ -65,12 +91,23 @@
        //   state.descContent = props.content
        // }
      })
      const openVideo=(item,index)=>{
        state.activeIndex = index
        monRef.value.changeVideo(item.deviceNo)
      }
      const getData = (data:Array)=>{
        state.descContent = data
      }

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

      });
      return {
        monRef,
        getData,
        openVideo,
        ...toRefs(state)
      };
    }
@@ -78,98 +115,259 @@
</script>

<style scoped lang="scss">
  .dark-desc{
.dark-page{
  width: 100%;
  height: 100%;
  border:1px #5a5959 solid;
  background: url('../../../../../assets/warningScreen/body-bg.jpg');
  padding: 4%;
  .btns{
    position: fixed;
    width: 8%;
    height: 6%;
    right: 5%;
    top: 1.25rem;
    font-size: 1.125rem;
    color: rgb(17, 254, 238);
    cursor: pointer;
  }
  .tit{
    width: 100%;
    height: 100%;
    height: 122px;
    background: url("../../../../../assets/warningScreen/pagebg-t.png") no-repeat center;
    background-size: 100% 100%;

    .des-tit{

    .title{
      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;
        }
      }
      height: 122px;
      line-height: 112px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 2.8rem;
      color: #11feee;
      font-weight: bolder;
      text-align: center;
      letter-spacing: 5px;
    }
  }
  .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;
  .chart-cont{
    width: 100%;
    padding: 20px;
    height: calc(92vh - 122px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .chart{
      width: calc((100% - 20px) * 0.63);
      height: 100%;
      padding: 3%;
      background: url("../../../../../assets/warningScreen/pagebg-l.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .selector-2{
        position: absolute;
        top: 5%;
        right: 10%;
        width: 20%;
        font-size: 1.25rem;
        color: #fff;
      }
      .main-chart{
        width: 100%;
        height: 100%;
      }
    }
    .des-main{
    .chart-right{
      width: calc((100% - 20px) * 0.37);
      height: 100%;
      .charts-des{
        height: 90%;
        padding: 4%;
        background: url("../../../../../assets/warningScreen/pagebg-r.png") no-repeat center;
        background-size: 100% 100%;

        .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;
              }
              .active{
                background: rgba(255,255,255,.2);
              }
            }
          }
        }
      }
    }

  }
}
.light-page{
  width: 100%;
  height: 100%;
  border:1px #5a5959 solid;
  background: #F0F0F0;
  padding: 4%;
  .btns{
    position: fixed;
    width: 8%;
    height: 6%;
    right: 5%;
    top: 1.25rem;
    font-size: 1.125rem;
    color: #333;
    cursor: pointer;
  }
  .tit{
    width: 100%;
    height: 122px;
    background: url("../../../../../assets/warningScreen/pagebg-t-light.png") no-repeat center;
    background-size: 100% 100%;


    .title{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      height: 122px;
      line-height: 112px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 2.8rem;
      color: #333;
      font-weight: bolder;
      text-align: center;
      letter-spacing: 5px;
    }
  }

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }
  .chart-cont{
    width: 100%;
    padding: 20px;
    height: calc(92vh - 122px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;
    .chart{
      width: calc((100% - 20px) * 0.63);
      height: 100%;
      padding: 3%;
      background: url("../../../../../assets/warningScreen/pagebg-l-light.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .selector-2{
        position: absolute;
        top: 5%;
        right: 10%;
        width: 20%;
        font-size: 1.25rem;
        color: #fff;
      }
      .main-chart{
        width: 100%;
        height: 100%;
      }
    }
    .chart-right{
      width: calc((100% - 20px) * 0.37);
      height: 100%;

          span{
            margin-right: 10px;
      .charts-des{
        height: 90%;
        padding: 4%;
        background: url("../../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center;
        background-size: 100% 100%;

        .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;
            }
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }
          .des-main{
            width: 100%;
            height: calc(96% - 2.2rem);
            padding: 1rem;
            overflow: auto;
            color: #333;

        &>p{
          font-size: 1rem;
          margin-top: 10px;
            &::-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

@@ -1,24 +1,41 @@
<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="tit">
      <div class="title">预警消息报告</div>
    </div>
    <div class="chart-cont">
      <div class="chart">
        <message :size="2" @getData=showDetails></message>
      </div>
      <div class="des-main">
        <div>
          <h4>2022年8月整体SPI指数317.65，处于安全范围以内。</h4>
          <p>8月份spi中教育培训比例不足和一般风险新增较多，对SPI总值影响较大，请注意调整相关因素环节的处理措施。</p>
      <div class="chart-right">
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
        <div class="charts-des">
        <div id="descCont" class="dark-desc">
          <div class="des-tit">
            <div>{{descContent.spiName}}</div>
            <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
          </div>
          <div class="des-main">
            <div>
              <div style="margin-bottom: 10px">生成时间：{{creatTime}}1日 00:00:03</div>
              <h4>{{descContent.reportTime}}新疆国泰新华化工有限公司安全风险指数基础数据情况如下</h4>
              <p>1、本月共计上报事故{{descContent.accidentTotal}}起，其中一级事故{{descContent.accidentOne}}起，二级事故{{descContent.accidentTwo}}起，三级事故{{descContent.accidentThree}}起，四级事故{{descContent.accidentFour}}起。</p>
              <p>2、智能巡检本月总任务数{{descContent.checkTotal}}个，其中{{descContent.checkOverdue }}个超期未巡检，超期未巡检率{{descContent.checkOverRate}}%，上报异常{{descContent.checkException}}个。</p>
              <p>3、本月隐患上报数量{{descContent.hdTotal}}个，其中A级隐患{{descContent.hdA}}个，B级隐患{{descContent.hdB}}个，C级隐患{{descContent.hdC}}个，已经完成整改验收{{descContent.hdRf}}个，暂未完成整改{{descContent.hdRnf}}个。</p>
              <p>4、截至{{descContent.lastTime}}系统人员用户共计{{descContent.userCount}}个，其中证书绑定（持证人员）{{descContent.userCertCount}}个，系统人员总体持证比{{(descContent.userCertCount / descContent.userCount * 100).toFixed(2)}}%。</p>
              <p>5、最近一次教育培训上报情况为：课程数量{{descContent.courseNum}}，课件数量{{descContent.coursewareNum}}，试题数量{{descContent.questionsNum}}。考试参与率{{descContent.examJoinRate}}%，考试合格率{{descContent.examPassRate}}%，缺考总数{{descContent.missExam}}，待补课数{{descContent.repairNum}}，人均学时{{descContent.studyAverage}}，学时达标率{{descContent.studyQualifyRate}}%,培训人数{{descContent.trainPerson}}，培训参与率{{descContent.trainJoinRate}}%。</p>
              <p>6、截至{{descContent.lastTime}}应急物资储备情况为：</p>
              <div style="margin-top: 10px;margin-left: 20px" v-for="(item,index) in descContent.emergencySuppliesList">
                ({{index+1}})  编号：{{item.number}}，物资名称：{{item.name}}，负责部分：{{item.departmentName?item.departmentName: '暂无'}}，物资分类：{{item.classificationName}}，存放位置：{{item.place}}，存放数量：{{item.count}}
              </div>
            </div>
          </div>
        </div>
        <div>
          <h4>次月预警消息</h4>
          <p>未来一个月该地区气候干燥，降水量少，高温天气仍将持续，应注意防范消防风险，注意重点消防区域的消防设置设备的可用性检查</p>
        </div>
        <div>
          <h4>本月SPI基础数据构成：</h4>
          <p>...</p>
        </div>
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;"/>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import screenfull from 'screenfull';
@@ -36,15 +53,21 @@
  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: Object;
    lineColor: Array<string>;
    descContent: Object
    lineColor: Array<string>
    reportData: []
    creatTime: string | null
  }
  export default defineComponent({
    name: 'msgDesc',
    components: {},
    components: {
      message: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/message.vue')),
    },
    props:{
      content: Object || null
    },
@@ -52,11 +75,11 @@
      const screenThemes = useScreenTheme()
      const { screenTheme } = storeToRefs(screenThemes);
      const state = reactive<stateType>({
        descContent: {

        },
        descContent: {},
        lineColor: ['#11FEEE'],
      });
        reportData: [],
        creatTime: ''
      })

      const getTheme =()=>{
        if(screenTheme.value.isDark){
@@ -73,12 +96,58 @@
        //   state.descContent = props.content
        // }
      })
      // const getData = (index)=>{
      //   state.descContent = data
      // }

      const showDetails = (index)=>{
        riskWarningApi().getAllReport().then((res)=>{
          if (res.data.code === '200') {
            state.reportData = res.data.data
            riskWarningApi().getReportDetails(state.reportData[index].id).then((re)=>{
              if (re.data.code === '200') {
                state.descContent = re.data.data
                state.creatTime = getNextMonth(state.descContent.reportTime)
              }else{
                ElMessage({
                  type: 'warning',
                  message: re.data.msg
                })
              }
            })
          } else {
            ElMessage({
              type: 'warning',
              message: res.data.msg
            })
          }
        })
      }

      const getNextMonth=(dateString:string)=>{
        // 提取年份和月份
        const year = parseInt(dateString.slice(0, 4));
        const month = parseInt(dateString.slice(5, 7));
        // 计算下一个月的年份和月份
        let nextYear = year;
        let nextMonth = month + 1;
        if (nextMonth === 13) {
          nextYear++;
          nextMonth = 1; // 如果下一个月是13月，则重置为1月
        }
        // 格式化下一个月的日期字符串
        const formattedNextMonth = `${nextYear}年${nextMonth.toString().padStart(2, '0')}月`;
        return formattedNextMonth;
      }

      // 页面载入时执行方法
      onMounted(() => {
        getTheme();
      });
      return {
        // getData,
        getNextMonth,
        showDetails,
        ...toRefs(state)
      };
    }
@@ -86,98 +155,257 @@
</script>

<style scoped lang="scss">
  .dark-desc{
.dark-page{
  width: 100%;
  height: 100%;
  border:1px #5a5959 solid;
  background: url('../../../../../assets/warningScreen/body-bg.jpg');
  padding: 4%;
  .btns{
    position: fixed;
    width: 8%;
    height: 6%;
    right: 5%;
    top: 1.25rem;
    font-size: 1.125rem;
    color: rgb(17, 254, 238);
    cursor: pointer;
  }
  .tit{
    width: 100%;
    height: 100%;
    height: 122px;
    background: url("../../../../../assets/warningScreen/pagebg-t.png") no-repeat center;
    background-size: 100% 100%;

    .des-tit{

    .title{
      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;
        }
      }
      height: 122px;
      line-height: 112px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 2.8rem;
      color: #11feee;
      font-weight: bolder;
      text-align: center;
      letter-spacing: 5px;
    }
  }
  .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;
  .chart-cont{
    width: 100%;
    padding: 20px;
    height: calc(92vh - 122px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .chart{
      width: calc((100% - 20px) * 0.63);
      height: 100%;
      padding: 3%;
      background: url("../../../../../assets/warningScreen/pagebg-l.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .selector-2{
        position: absolute;
        top: 5%;
        right: 10%;
        width: 20%;
        font-size: 1.25rem;
        color: #fff;
      }
      .main-chart{
        width: 100%;
        height: 100%;
      }
    }
    .des-main{
    .chart-right{
      width: calc((100% - 20px) * 0.37);
      height: 100%;
      .charts-des{
        height: 90%;
        padding: 4%;
        background: url("../../../../../assets/warningScreen/pagebg-r.png") no-repeat center;
        background-size: 100% 100%;

        .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: 20px;
              }
            }
          }
        }
      }
    }

  }
}
.light-page{
  width: 100%;
  height: 100%;
  border:1px #5a5959 solid;
  background: #F0F0F0;
  padding: 4%;
  .btns{
    position: fixed;
    width: 8%;
    height: 6%;
    right: 5%;
    top: 1.25rem;
    font-size: 1.125rem;
    color: #333;
    cursor: pointer;
  }
  .tit{
    width: 100%;
    height: 122px;
    background: url("../../../../../assets/warningScreen/pagebg-t-light.png") no-repeat center;
    background-size: 100% 100%;


    .title{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      height: 122px;
      line-height: 112px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 2.8rem;
      color: #333;
      font-weight: bolder;
      text-align: center;
      letter-spacing: 5px;
    }
  }

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }
  .chart-cont{
    width: 100%;
    padding: 20px;
    height: calc(92vh - 122px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;
    .chart{
      width: calc((100% - 20px) * 0.63);
      height: 100%;
      padding: 3%;
      background: url("../../../../../assets/warningScreen/pagebg-l-light.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .selector-2{
        position: absolute;
        top: 5%;
        right: 10%;
        width: 20%;
        font-size: 1.25rem;
        color: #fff;
      }
      .main-chart{
        width: 100%;
        height: 100%;
      }
    }
    .chart-right{
      width: calc((100% - 20px) * 0.37);
      height: 100%;

          span{
            margin-right: 10px;
      .charts-des{
        height: 90%;
        padding: 4%;
        background: url("../../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center;
        background-size: 100% 100%;

        .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;
            }
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }
          .des-main{
            width: 100%;
            height: calc(96% - 2.2rem);
            padding: 1rem;
            overflow: auto;
            color: #333;

        &>p{
          font-size: 1rem;
          margin-top: 10px;
            &::-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: 20px;
              }
            }
          }
        }
      }
    }

  }
}
</style>

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

@@ -1,24 +1,31 @@
<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="tit">
      <div class="title">人员专业度分布</div>
    </div>
    <div class="chart-cont">
      <div class="chart">
        <profession :size="2.5" @getData="getData"></profession>
      </div>
      <div class="des-main">
        <div>
          <h4>该岗位工种持证人员：1048人</h4>
      <div class="chart-right">
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
        <div class="charts-des">
          <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" :key="index">
                <h4>{{ item.name }}：{{item.count}} 人</h4>
              </div>
            </div>
          </div>
        </div>
        <div>
          <h4>该岗位工种未持证人员：735人</h4>
        </div>
        <div>
          <h4>关键岗位必要持证无证上岗：1人</h4>
        </div>
        <div>
          <p>提醒：本年度存在有1人在管家必要持证岗位未持证上岗情况，该情况已经上报监管系统，请注意控制该风险因素。</p>
        </div>
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;"/>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import screenfull from 'screenfull';
@@ -44,7 +51,9 @@
  }
  export default defineComponent({
    name: 'proDesc',
    components: {},
    components: {
      profession: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/profession.vue')),
    },
    props:{
      content: Object || null
    },
@@ -73,12 +82,15 @@
        //   state.descContent = props.content
        // }
      })

      const getData = (data:Array)=>{
        state.descContent = data
      }
      // 页面载入时执行方法
      onMounted(() => {
        getTheme();
      });
      return {
        getData,
        ...toRefs(state)
      };
    }
@@ -86,98 +98,257 @@
</script>

<style scoped lang="scss">
  .dark-desc{
.dark-page{
  width: 100%;
  height: 100%;
  border:1px #5a5959 solid;
  background: url('../../../../../assets/warningScreen/body-bg.jpg');
  padding: 4%;
  .btns{
    position: fixed;
    width: 8%;
    height: 6%;
    right: 5%;
    top: 1.25rem;
    font-size: 1.125rem;
    color: rgb(17, 254, 238);
    cursor: pointer;
  }
  .tit{
    width: 100%;
    height: 100%;
    height: 122px;
    background: url("../../../../../assets/warningScreen/pagebg-t.png") no-repeat center;
    background-size: 100% 100%;

    .des-tit{

    .title{
      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;
        }
      }
      height: 122px;
      line-height: 112px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 2.8rem;
      color: #11feee;
      font-weight: bolder;
      text-align: center;
      letter-spacing: 5px;
    }
  }
  .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;
  .chart-cont{
    width: 100%;
    padding: 20px;
    height: calc(92vh - 122px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .chart{
      width: calc((100% - 20px) * 0.63);
      height: 100%;
      padding: 3%;
      background: url("../../../../../assets/warningScreen/pagebg-l.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .selector-2{
        position: absolute;
        top: 5%;
        right: 10%;
        width: 20%;
        font-size: 1.25rem;
        color: #fff;
      }
      .main-chart{
        width: 100%;
        height: 100%;
      }
    }
    .des-main{
    .chart-right{
      width: calc((100% - 20px) * 0.37);
      height: 100%;
      .charts-des{
        height: 90%;
        padding: 4%;
        background: url("../../../../../assets/warningScreen/pagebg-r.png") no-repeat center;
        background-size: 100% 100%;

        .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-page{
  width: 100%;
  height: 100%;
  border:1px #5a5959 solid;
  background: #F0F0F0;
  padding: 4%;
  .btns{
    position: fixed;
    width: 8%;
    height: 6%;
    right: 5%;
    top: 1.25rem;
    font-size: 1.125rem;
    color: #333;
    cursor: pointer;
  }
  .tit{
    width: 100%;
    height: 122px;
    background: url("../../../../../assets/warningScreen/pagebg-t-light.png") no-repeat center;
    background-size: 100% 100%;


    .title{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      height: 122px;
      line-height: 112px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 2.8rem;
      color: #333;
      font-weight: bolder;
      text-align: center;
      letter-spacing: 5px;
    }
  }

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }
  .chart-cont{
    width: 100%;
    padding: 20px;
    height: calc(92vh - 122px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;
    .chart{
      width: calc((100% - 20px) * 0.63);
      height: 100%;
      padding: 3%;
      background: url("../../../../../assets/warningScreen/pagebg-l-light.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .selector-2{
        position: absolute;
        top: 5%;
        right: 10%;
        width: 20%;
        font-size: 1.25rem;
        color: #fff;
      }
      .main-chart{
        width: 100%;
        height: 100%;
      }
    }
    .chart-right{
      width: calc((100% - 20px) * 0.37);
      height: 100%;

          span{
            margin-right: 10px;
      .charts-des{
        height: 90%;
        padding: 4%;
        background: url("../../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center;
        background-size: 100% 100%;

        .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;
            }
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }
          .des-main{
            width: 100%;
            height: calc(96% - 2.2rem);
            padding: 1rem;
            overflow: auto;
            color: #333;

        &>p{
          font-size: 1rem;
          margin-top: 10px;
            &::-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

@@ -1,41 +1,48 @@
<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="tit">
      <div class="title">隐患趋势</div>
    </div>
    <div class="chart-cont">
      <div class="chart">
        <risk :size="2.5" @getData="getData"></risk>
      </div>
      <div class="des-main">
        <div v-for="(item,index) in descContent.riskData" :key="index">
          <div>
            <h4>{{item.depId}}共上报隐患总数：{{item.detail.riskTotalCount }} 个</h4>
      <div class="chart-right">
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
        <div class="charts-des">
        <div id="descCont" class="dark-desc">
          <div class="des-tit">
            <div>隐患趋势详情</div>
            <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
          </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 class="des-main">
            <div v-for="(item,index) in descContent" :key="index">
              <div>
                <h2>{{item.time}} 共上报隐患总数：{{item.count }}</h2>
              </div>
              <div>
                <h3>其中：</h3>
              </div>
              <div>
                <h4>一般隐患：{{ item.generalDanger }}</h4>
              </div>
              <div>
                <h4>重大隐患：{{ item.majorDanger }}</h4>
              </div>
              <div>
                <h4>已完成整改：{{ item.rectifyFinish }}</h4>
              </div>
              <div>
                <h4>未完成整改：{{ item.rectifyNotFinish }}</h4>
              </div>
            </div>
          </div>
        </div>
        </div>
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;"/>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import screenfull from 'screenfull';
@@ -61,7 +68,9 @@
  }
  export default defineComponent({
    name: 'riskDesc',
    components: {},
    components: {
      risk: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/risk.vue')),
    },
    props:{
      content: Object || null
    },
@@ -89,14 +98,16 @@
        if(props.content){
          state.descContent = props.content
        }
        console.log(state.descContent,'risk')
      })

      const getData = (data:Array)=>{
        state.descContent = data
      }
      // 页面载入时执行方法
      onMounted(() => {
        getTheme();
      });
      return {
        getData,
        ...toRefs(state)
      };
    }
@@ -104,98 +115,253 @@
</script>

<style scoped lang="scss">
  .dark-desc{
.dark-page{
  width: 100%;
  height: 100%;
  border:1px #5a5959 solid;
  background: url('../../../../../assets/warningScreen/body-bg.jpg');
  padding: 4%;
  .btns{
    position: fixed;
    width: 8%;
    height: 6%;
    right: 5%;
    top: 1.25rem;
    font-size: 1.125rem;
    color: rgb(17, 254, 238);
    cursor: pointer;
  }
  .tit{
    width: 100%;
    height: 100%;
    height: 122px;
    background: url("../../../../../assets/warningScreen/pagebg-t.png") no-repeat center;
    background-size: 100% 100%;

    .des-tit{

    .title{
      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;
        }
      }
      height: 122px;
      line-height: 112px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 2.8rem;
      color: #11feee;
      font-weight: bolder;
      text-align: center;
      letter-spacing: 5px;
    }
  }
  .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;
  .chart-cont{
    width: 100%;
    padding: 20px;
    height: calc(92vh - 122px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .chart{
      width: calc((100% - 20px) * 0.63);
      height: 100%;
      padding: 3%;
      background: url("../../../../../assets/warningScreen/pagebg-l.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .selector-2{
        position: absolute;
        top: 5%;
        right: 10%;
        width: 20%;
        font-size: 1.25rem;
        color: #fff;
      }
      .main-chart{
        width: 100%;
        height: 100%;
      }
    }
    .des-main{
    .chart-right{
      width: calc((100% - 20px) * 0.37);
      height: 100%;
      .charts-des{
        height: 90%;
        padding: 4%;
        background: url("../../../../../assets/warningScreen/pagebg-r.png") no-repeat center;
        background-size: 100% 100%;

        .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;
              &>div{
                display: flex;
                align-items: center;

                span{
                  margin-right: 10px;
                }
              }

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

  }
}
.light-page{
  width: 100%;
  height: 100%;
  border:1px #5a5959 solid;
  background: #F0F0F0;
  padding: 4%;
  .btns{
    position: fixed;
    width: 8%;
    height: 6%;
    right: 5%;
    top: 1.25rem;
    font-size: 1.125rem;
    color: #333;
    cursor: pointer;
  }
  .tit{
    width: 100%;
    height: 122px;
    background: url("../../../../../assets/warningScreen/pagebg-t-light.png") no-repeat center;
    background-size: 100% 100%;


    .title{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      height: 122px;
      line-height: 112px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 2.8rem;
      color: #333;
      font-weight: bolder;
      text-align: center;
      letter-spacing: 5px;
    }
  }

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }
  .chart-cont{
    width: 100%;
    padding: 20px;
    height: calc(92vh - 122px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;
    .chart{
      width: calc((100% - 20px) * 0.63);
      height: 100%;
      padding: 3%;
      background: url("../../../../../assets/warningScreen/pagebg-l-light.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .selector-2{
        position: absolute;
        top: 5%;
        right: 10%;
        width: 20%;
        font-size: 1.25rem;
        color: #fff;
      }
      .main-chart{
        width: 100%;
        height: 100%;
      }
    }
    .chart-right{
      width: calc((100% - 20px) * 0.37);
      height: 100%;

          span{
            margin-right: 10px;
      .charts-des{
        height: 90%;
        padding: 4%;
        background: url("../../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center;
        background-size: 100% 100%;

        .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;
            }
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }
          .des-main{
            width: 100%;
            height: calc(96% - 2.2rem);
            padding: 1rem;
            overflow: auto;
            color: #333;

        &>p{
          font-size: 1rem;
          margin-top: 10px;
            &::-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

@@ -1,15 +1,31 @@
<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="tit">
      <div class="title">SPI数据分析</div>
    </div>
    <div class="chart-cont">
      <div class="chart">
        <spi :size="2" @getData="getData"></spi>
      </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 class="chart-right">
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
        <div class="charts-des">
          <div id="descCont" class="dark-desc">
            <div class="des-tit">
              <div>近12月SPI趋势</div>
              <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
            </div>
            <div class="des-main">
              <div v-for="(item,index) in descContent" :key="index">
                <h4>{{item.time}}，SPI数值：{{item.value}}</h4>
              </div>
            </div>
          </div>
        </div>
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;"/>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import screenfull from 'screenfull';
@@ -35,7 +51,9 @@
  }
  export default defineComponent({
    name: 'spiDesc',
    components: {},
    components: {
      spi: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/SPI.vue'))
    },
    props:{
      content: Object || null
    },
@@ -63,11 +81,17 @@
        }
      })

      const getData = (data:Array)=>{
        state.descContent = data
        console.log(state.descContent,'d')
      }

      // 页面载入时执行方法
      onMounted(() => {
        getTheme();
      });
      return {
        getData,
        ...toRefs(state)
      };
    }
@@ -75,98 +99,257 @@
</script>

<style scoped lang="scss">
  .dark-desc{
.dark-page{
  width: 100%;
  height: 100%;
  border:1px #5a5959 solid;
  background: url('../../../../../assets/warningScreen/body-bg.jpg');
  padding: 4%;
  .btns{
    position: fixed;
    width: 8%;
    height: 6%;
    right: 5%;
    top: 1.25rem;
    font-size: 1.125rem;
    color: rgb(17, 254, 238);
    cursor: pointer;
  }
  .tit{
    width: 100%;
    height: 100%;
    height: 122px;
    background: url("../../../../../assets/warningScreen/pagebg-t.png") no-repeat center;
    background-size: 100% 100%;

    .des-tit{

    .title{
      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;
        }
      }
      height: 122px;
      line-height: 112px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 2.8rem;
      color: #11feee;
      font-weight: bolder;
      text-align: center;
      letter-spacing: 5px;
    }
  }
  .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;
  .chart-cont{
    width: 100%;
    padding: 20px;
    height: calc(92vh - 122px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .chart{
      width: calc((100% - 20px) * 0.63);
      height: 100%;
      padding: 3%;
      background: url("../../../../../assets/warningScreen/pagebg-l.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .selector-2{
        position: absolute;
        top: 5%;
        right: 10%;
        width: 20%;
        font-size: 1.25rem;
        color: #fff;
      }
      .main-chart{
        width: 100%;
        height: 100%;
      }
    }
    .des-main{
    .chart-right{
      width: calc((100% - 20px) * 0.37);
      height: 100%;
      .charts-des{
        height: 90%;
        padding: 4%;
        background: url("../../../../../assets/warningScreen/pagebg-r.png") no-repeat center;
        background-size: 100% 100%;

        .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-page{
  width: 100%;
  height: 100%;
  border:1px #5a5959 solid;
  background: #F0F0F0;
  padding: 4%;
  .btns{
    position: fixed;
    width: 8%;
    height: 6%;
    right: 5%;
    top: 1.25rem;
    font-size: 1.125rem;
    color: #333;
    cursor: pointer;
  }
  .tit{
    width: 100%;
    height: 122px;
    background: url("../../../../../assets/warningScreen/pagebg-t-light.png") no-repeat center;
    background-size: 100% 100%;


    .title{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      height: 122px;
      line-height: 112px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 2.8rem;
      color: #333;
      font-weight: bolder;
      text-align: center;
      letter-spacing: 5px;
    }
  }

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }
  .chart-cont{
    width: 100%;
    padding: 20px;
    height: calc(92vh - 122px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;
    .chart{
      width: calc((100% - 20px) * 0.63);
      height: 100%;
      padding: 3%;
      background: url("../../../../../assets/warningScreen/pagebg-l-light.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .selector-2{
        position: absolute;
        top: 5%;
        right: 10%;
        width: 20%;
        font-size: 1.25rem;
        color: #fff;
      }
      .main-chart{
        width: 100%;
        height: 100%;
      }
    }
    .chart-right{
      width: calc((100% - 20px) * 0.37);
      height: 100%;

          span{
            margin-right: 10px;
      .charts-des{
        height: 90%;
        padding: 4%;
        background: url("../../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center;
        background-size: 100% 100%;

        .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;
            }
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }
          .des-main{
            width: 100%;
            height: calc(96% - 2.2rem);
            padding: 1rem;
            overflow: auto;
            color: #333;

        &>p{
          font-size: 1rem;
          margin-top: 10px;
            &::-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

@@ -1,52 +1,31 @@
<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="tit">
      <div class="title">应急演练次数</div>
    </div>
    <div class="chart-cont">
      <div class="chart">
        <stock :size="2" @getData="getData"></stock>
      </div>
      <div class="des-main">
        <div>
          <h4>消防耗材：</h4>
      <div class="chart-right">
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
        <div class="charts-des">
          <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" :key="index">
                <h4>{{item.name}}：{{item.count}}</h4>
              </div>
            </div>
          </div>
        </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>
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;"/>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import screenfull from 'screenfull';
@@ -72,7 +51,9 @@
  }
  export default defineComponent({
    name: 'stoDesc',
    components: {},
    components: {
      stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue')),
    },
    props:{
      content: Object || null
    },
@@ -101,12 +82,15 @@
        //   state.descContent = props.content
        // }
      })

      const getData = (data:Array)=>{
        state.descContent = data
      }
      // 页面载入时执行方法
      onMounted(() => {
        getTheme();
      });
      return {
        getData,
        ...toRefs(state)
      };
    }
@@ -114,98 +98,257 @@
</script>

<style scoped lang="scss">
  .dark-desc{
.dark-page{
  width: 100%;
  height: 100%;
  border:1px #5a5959 solid;
  background: url('../../../../../assets/warningScreen/body-bg.jpg');
  padding: 4%;
  .btns{
    position: fixed;
    width: 8%;
    height: 6%;
    right: 5%;
    top: 1.25rem;
    font-size: 1.125rem;
    color: rgb(17, 254, 238);
    cursor: pointer;
  }
  .tit{
    width: 100%;
    height: 100%;
    height: 122px;
    background: url("../../../../../assets/warningScreen/pagebg-t.png") no-repeat center;
    background-size: 100% 100%;

    .des-tit{

    .title{
      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;
        }
      }
      height: 122px;
      line-height: 112px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 2.8rem;
      color: #11feee;
      font-weight: bolder;
      text-align: center;
      letter-spacing: 5px;
    }
  }
  .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;
  .chart-cont{
    width: 100%;
    padding: 20px;
    height: calc(92vh - 122px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .chart{
      width: calc((100% - 20px) * 0.63);
      height: 100%;
      padding: 3%;
      background: url("../../../../../assets/warningScreen/pagebg-l.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .selector-2{
        position: absolute;
        top: 5%;
        right: 10%;
        width: 20%;
        font-size: 1.25rem;
        color: #fff;
      }
      .main-chart{
        width: 100%;
        height: 100%;
      }
    }
    .des-main{
    .chart-right{
      width: calc((100% - 20px) * 0.37);
      height: 100%;
      .charts-des{
        height: 90%;
        padding: 4%;
        background: url("../../../../../assets/warningScreen/pagebg-r.png") no-repeat center;
        background-size: 100% 100%;

        .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-page{
  width: 100%;
  height: 100%;
  border:1px #5a5959 solid;
  background: #F0F0F0;
  padding: 4%;
  .btns{
    position: fixed;
    width: 8%;
    height: 6%;
    right: 5%;
    top: 1.25rem;
    font-size: 1.125rem;
    color: #333;
    cursor: pointer;
  }
  .tit{
    width: 100%;
    height: 122px;
    background: url("../../../../../assets/warningScreen/pagebg-t-light.png") no-repeat center;
    background-size: 100% 100%;


    .title{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      height: 122px;
      line-height: 112px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 2.8rem;
      color: #333;
      font-weight: bolder;
      text-align: center;
      letter-spacing: 5px;
    }
  }

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }
  .chart-cont{
    width: 100%;
    padding: 20px;
    height: calc(92vh - 122px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;
    .chart{
      width: calc((100% - 20px) * 0.63);
      height: 100%;
      padding: 3%;
      background: url("../../../../../assets/warningScreen/pagebg-l-light.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .selector-2{
        position: absolute;
        top: 5%;
        right: 10%;
        width: 20%;
        font-size: 1.25rem;
        color: #fff;
      }
      .main-chart{
        width: 100%;
        height: 100%;
      }
    }
    .chart-right{
      width: calc((100% - 20px) * 0.37);
      height: 100%;

          span{
            margin-right: 10px;
      .charts-des{
        height: 90%;
        padding: 4%;
        background: url("../../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center;
        background-size: 100% 100%;

        .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;
            }
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }
          .des-main{
            width: 100%;
            height: calc(96% - 2.2rem);
            padding: 1rem;
            overflow: auto;
            color: #333;

        &>p{
          font-size: 1rem;
          margin-top: 10px;
            &::-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

@@ -1,18 +1,31 @@
<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="tit">
      <div class="title">智能巡检超期未巡检任务</div>
    </div>
    <div class="chart-cont">
      <div class="chart">
        <training :size="2.5" @getData="getData"></training>
      </div>
      <div class="des-main">
        <div>
          <h4>应急演练分月情况汇总：</h4>
      <div class="chart-right">
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
        <div class="charts-des">
          <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" :key="index">
                <h4>{{item.year}}年{{item.month}}月份超期未巡检次数：{{item.count}}次；</h4>
              </div>
            </div>
          </div>
        </div>
        <div v-for="(item,index) in descContent.traData" :key="index">
          <h4>{{item.month}}月份应急演练次数：{{item.totalCount}}次；</h4>
        </div>
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;"/>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import screenfull from 'screenfull';
@@ -38,7 +51,9 @@
  }
  export default defineComponent({
    name: 'trainDesc',
    components: {},
    components: {
      training: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/training.vue')),
    },
    props:{
      content: Object || null
    },
@@ -68,11 +83,16 @@
        }
      })

      const getData = (data:Array)=>{
        state.descContent = data
      }

      // 页面载入时执行方法
      onMounted(() => {
        getTheme();
      });
      return {
        getData,
        ...toRefs(state)
      };
    }
@@ -80,98 +100,256 @@
</script>

<style scoped lang="scss">
  .dark-desc{
.dark-page{
  width: 100%;
  height: 100%;
  border:1px #5a5959 solid;
  background: url('../../../../../assets/warningScreen/body-bg.jpg');
  padding: 4%;
  .btns{
    position: fixed;
    width: 8%;
    height: 6%;
    right: 5%;
    top: 1.25rem;
    font-size: 1.125rem;
    color: rgb(17, 254, 238);
    cursor: pointer;
  }
  .tit{
    width: 100%;
    height: 100%;
    height: 122px;
    background: url("../../../../../assets/warningScreen/pagebg-t.png") no-repeat center;
    background-size: 100% 100%;

    .des-tit{

    .title{
      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;
        }
      }
      height: 122px;
      line-height: 112px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 2.8rem;
      color: #11feee;
      font-weight: bolder;
      text-align: center;
      letter-spacing: 5px;
    }
  }
  .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;
  .chart-cont{
    width: 100%;
    padding: 20px;
    height: calc(92vh - 122px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .chart{
      width: calc((100% - 20px) * 0.63);
      height: 100%;
      padding: 3%;
      background: url("../../../../../assets/warningScreen/pagebg-l.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .selector-2{
        position: absolute;
        top: 5%;
        right: 10%;
        width: 20%;
        font-size: 1.25rem;
        color: #fff;
      }
      .main-chart{
        width: 100%;
        height: 100%;
      }
    }
    .des-main{
    .chart-right{
      width: calc((100% - 20px) * 0.37);
      height: 100%;
      .charts-des{
        height: 90%;
        padding: 4%;
        background: url("../../../../../assets/warningScreen/pagebg-r.png") no-repeat center;
        background-size: 100% 100%;

        .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-page{
  width: 100%;
  height: 100%;
  border:1px #5a5959 solid;
  background: #F0F0F0;
  padding: 4%;
  .btns{
    position: fixed;
    width: 8%;
    height: 6%;
    right: 5%;
    top: 1.25rem;
    font-size: 1.125rem;
    color: #333;
    cursor: pointer;
  }
  .tit{
    width: 100%;
    height: 122px;
    background: url("../../../../../assets/warningScreen/pagebg-t-light.png") no-repeat center;
    background-size: 100% 100%;


    .title{
      width: 100%;
      height: calc(96% - 2.2rem);
      padding: 1rem;
      overflow: auto;
      height: 122px;
      line-height: 112px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 2.8rem;
      color: #333;
      font-weight: bolder;
      text-align: center;
      letter-spacing: 5px;
    }
  }

      &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
      &::scrollbar { width: 0; height: 0; color: transparent; }
  .chart-cont{
    width: 100%;
    padding: 20px;
    height: calc(92vh - 122px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

      &>div{
        margin-bottom: 1rem;
        &>h4{
          font-size: 1.25rem;
          display: flex;
          align-items: center;
    .chart{
      width: calc((100% - 20px) * 0.63);
      height: 100%;
      padding: 3%;
      background: url("../../../../../assets/warningScreen/pagebg-l-light.png") no-repeat center;
      background-size: 100% 100%;
      position: relative;
      .selector-2{
        position: absolute;
        top: 5%;
        right: 10%;
        width: 20%;
        font-size: 1.25rem;
        color: #fff;
      }
      .main-chart{
        width: 100%;
        height: 100%;
      }
    }
    .chart-right{
      width: calc((100% - 20px) * 0.37);
      height: 100%;

          span{
            margin-right: 10px;
      .charts-des{
        height: 90%;
        padding: 4%;
        background: url("../../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center;
        background-size: 100% 100%;

        .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;
            }
          }
          &:first-of-type{
            margin-bottom: 10px;
          }
        }
          .des-main{
            width: 100%;
            height: calc(96% - 2.2rem);
            padding: 1rem;
            overflow: auto;
            color: #333;

        &>p{
          font-size: 1rem;
          margin-top: 10px;
            &::-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

@@ -7,40 +7,16 @@
        </div>
      </dv-decoration-11>
    </div>

    <div class="tit">
      <div class="title">{{curChart===1?'事故等级分布':curChart===2?'应急演练次数':curChart===3?'隐患等级数量分布':curChart===4?'SPI数据分析':curChart===5?'教育培训分析':curChart===6?'隐患等级':curChart===7?'人员专业度分布':curChart===8?'预警消息报告':curChart===9?'特殊作业实时监控':'风险应急物资储备'}}</div>
    </div>
    <div class="chart-cont">
      <div class="chart">
        <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" 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>
        <stock v-else class="main-chart" :size="2"></stock>
      </div>
      <div class="chart-right">
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
        <div class="charts-des">
          <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>
    </div>
    <acc-desc v-show="curChart===1"></acc-desc>
    <train-desc v-show="curChart===2"></train-desc>
    <risk-desc v-show="curChart===3"></risk-desc>
    <spi-desc v-show="curChart===4"></spi-desc>
    <edu-desc v-show="curChart===5"></edu-desc>
    <dan-desc v-show="curChart===6"></dan-desc>
    <pro-desc v-show="curChart===7"></pro-desc>
    <msg-desc v-show="curChart===8" ref="msgRef"/>
    <mon-desc v-show="curChart===9"></mon-desc>
    <sto-desc v-show="curChart===10"></sto-desc>
  </div>
</template>

@@ -60,77 +36,59 @@
  import { ElTable } from 'element-plus';
  import { FormInstance, FormRules, ElMessage } from 'element-plus';
  import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts';
  import { useRoute } from 'vue-router';
  import {useRoute, useRouter} from 'vue-router';
  import {hiddenReportApi} from "/@/api/doublePreventSystem/report";
  import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
  import '/@/theme/bigScreen.css'
  import {useScreenTheme} from "/@/stores/screenTheme"
  import {storeToRefs} from "pinia";
  import msgDesc from '/@/views/riskWarningSys/warningBigScreen/indexs/components/msg.vue'

  // 定义接口来定义对象的类型
  interface stateType {
    isScreenfull: boolean;
    curChart: number | null;
    lineColor: Array<string>;
    accRef: Object;
    trainRef: Object;
    riskRef: Object;
    spiRef: Object;
    eduRef: Object;
    danRef: Object;
    proRef: Object;
    msgRef: Object;
    monRef: Object;
    stoRef: Object
    lineColor: Array<string>
  }
  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')),
      msgDesc,
      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 msgRef = ref()
      const screenThemes = useScreenTheme()
      const { screenTheme } = storeToRefs(screenThemes);
      const route = useRoute();
      const router = useRouter();
      const state = reactive<stateType>({
        isScreenfull: false,
        curChart: null,
        lineColor: ['#11FEEE'],
        accRef: {},
        trainRef: {},
        riskRef: {},
        spiRef: {},
        eduRef: {},
        danRef: {},
        proRef: {},
        msgRef: {},
        monRef: {},
        stoRef: {}
      });

      // 页面载入时执行方法
      onMounted(() => {
        console.log(msgRef.value,'val')
        if (route.query.num) {
          state.curChart = Number(route.query.num)

          if(route.query.num == '8'){
            if(route.query.rowIndex){
              msgRef.value.showDetails(route.query.rowIndex)
            }else{
              msgRef.value.showDetails(0)
            }
          }
        }
        getTheme()
      });
@@ -143,23 +101,23 @@
      const onScreenfullClick = () => {
        if (!screenfull.isEnabled) {
          ElMessage.warning('暂不不支持全屏');
          return false;
          return false
        }
        screenfull.toggle();
        screenfull.on('change', () => {
          if (screenfull.isFullscreen) {
            state.isScreenfull = true;
            state.isScreenfull = true
          } else {
            state.isScreenfull = false;
            state.isScreenfull = false
          }
        });
      };
      const getTheme =()=>{
        if(screenTheme.value.isDark){
          window.document.getElementById('pageCont').setAttribute( "class", 'dark-page' );
          window.document.getElementById('pageCont').setAttribute( "class", 'dark-page' )
          state.lineColor = ['#11FEEE']
        }else{
          window.document.getElementById('pageCont').setAttribute( "class", 'light-page' );
          window.document.getElementById('pageCont').setAttribute( "class", 'light-page' )
          state.lineColor = ['#333','#ccc']
        }
      }
@@ -168,12 +126,15 @@
      })
      // 返回上一页
      const goBack = () => {
        window.history.go(-1);
        router.push({
            name: "warningScreen"
        });
      };


      return {
        route,
        msgRef,
        onScreenfullClick,
        goBack,
        ...toRefs(state)

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

@@ -189,7 +189,7 @@
      const recordRef = ref()
      const openDialog = (row)=>{
        state.videoData = row
        console.log(state.videoData,'data')
        console.log(state.videoData.approvalDeviceList,'data')
        state.title = row.workTypeDesc + '编号' + row.workPermitNo + '实时监测详情'
        state.videoDetailDialog = true
      }

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

@@ -20,6 +20,12 @@
        <div>操作时间：{{item.operationTime}}</div>
        <div>操作内容：{{item.content}}</div>
        <div>操作意见：{{item.approvalOpinions}}</div>
        <div v-if="item.fileUrl" style="display: flex;align-items: flex-start">附件内容：
          <el-image style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="item.fileUrl" fit="cover" />
        </div>
        <div v-if="item.signUrl" style="display: flex;align-items: flex-start">签字图片：
          <el-image style="width: 150px; height: 150px;margin-right: 50px;margin-bottom: 20px" :src="item.signUrl" fit="cover" />
        </div>
      </div>
    </div>
  </el-dialog>
@@ -101,16 +107,21 @@
        }
    .item{
      display: flex;
      align-items: flex-start;
      align-items: stretch; /* 使 marker 和 content 高度一致 */
      width: 100%;
      padding-left: 50px;
      margin-bottom: 10px;
      position: relative;

      .marker{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 20px;
        height: 100%; /* 使 marker 高度自适应父元素 */

        .dot{
          width: 28px;
@@ -121,11 +132,12 @@
        }
        .line{
          width: 1px;
          height: 120px;
          flex-grow: 1; /* 自动适应剩余高度 */
          background: #13ce66;
        }
      }
      .content{

        div{
          margin-bottom: 6px;
        }

 src/views/specialWorkSystem/specialIndex/index.vue

@@ -110,7 +110,7 @@
      <div class="homeCard">
        <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
        <el-row>
          <el-col :span="5" style="display:flex;align-items: center">
          <el-col :span="4" style="display:flex;align-items: center">
            <span style="white-space: nowrap">作业类型：</span>
            <div class="grid-content topInfo">
              <el-select :teleported="false" v-model="searchParams.workType" size="small">
@@ -123,7 +123,7 @@
              </el-select>
            </div>
          </el-col>
          <el-col :span="5" style="display:flex;align-items: center">
          <el-col :span="4" style="display:flex;align-items: center">
            <span style="white-space: nowrap">作业状态：</span>
            <div class="grid-content topInfo">
              <el-select :teleported="false" v-model="searchParams.workAllStatus" size="small">
@@ -136,12 +136,12 @@
              </el-select>
            </div>
          </el-col>
          <el-col :span="5" style="display:flex;align-items: center">
            <span style="white-space: nowrap">作业部门：</span>
            <div class="grid-content topInfo">
              <el-cascader :teleported="false" size="small" v-model="searchParams.workDepId" :options="departmentList" :props="casProps" :show-all-levels="false"/>
            </div>
          </el-col>
<!--          <el-col :span="4" 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="searchParams.workDepId" :options="departmentList" :props="casProps" :show-all-levels="false"/>-->
<!--            </div>-->
<!--          </el-col>-->
          <el-col :span="6" style="display:flex;align-items: center;">
            <span style="white-space: nowrap;margin-left: 20px">申请时间：</span>
            <div class="grid-content topInfo">
@@ -155,6 +155,16 @@
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
              />
            </div>
          </el-col>
          <el-col :span="4" style="display:flex;align-items: center">
            <span style="white-space: nowrap;margin-left: 20px">作业票编号：</span>
            <div class="grid-content topInfo">
              <el-input
                  v-model="searchParams.workPermitNo"
                  placeholder="请输入作业票编号"
                  size="small"
              />
            </div>
          </el-col>
@@ -186,7 +196,12 @@
<!--          </el-row>-->
          <el-table ref="multipleTableRef" stripe border :data="workData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
            <el-table-column property="workPermitNo" label="作业证编号" align="center"/>
            <el-table-column property="workDepName" label="作业单位" align="center"/>
            <el-table-column label="作业单位" align="center">
              <template #default="scope">
                <span v-if="scope.row.workDepList && scope.row.workDepList.length>0">{{scope.row.workDepList.map(i=>i.workDepName).join(',')}}</span>
                <span v-else>{{scope.row.workDepName }}</span>
              </template>
            </el-table-column>
            <el-table-column property="applyUname" label="申请人" align="center"/>
            <el-table-column property="applyDepName" label="申请单位" align="center"/>
            <el-table-column property="applyTime" label="申请时间" align="center"/>
@@ -880,6 +895,7 @@
            workAllStatus: null
      }
      state.searchDate = []
      state.pageIndex = 1
      getMydepList()
    };


 src/views/system/spi/component/spiDialog.vue

对比新文件
@@ -0,0 +1,153 @@
<template>
    <div class="system-add-user-container">
        <el-dialog :title="title" v-model="isShowDialog" width="50%">
            <el-form :model="spiForm" size="default" ref="userRef" :rules="spiFormRules" label-width="120px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="总值" prop="value">
                            <el-input v-model.trim="spiForm.value" type="number" placeholder="请输入当月总值" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isShowDialog = !isShowDialog" size="default">取 消</el-button>
                    <el-button type="primary" v-throttle @click="onSubmit" size="default">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs, onMounted, defineComponent, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import {riskWarningApi} from "/@/api/riskWarning";
// 定义接口来定义对象的类型
interface DeptData {}
interface sexData {}
interface UserState {
    title: string;
    isShowDialog: boolean;
    spiForm: {
        id?: number | null
        time: string | null
        value: number | null
    };
    spiFormRules:{

    }
}

export default defineComponent({
    name: 'spiDialog',
    setup(props, context) {
        const userRef = ref()
        const state = reactive<UserState>({
            title: '',
            isShowDialog: false,
            spiForm: {
              id: null,
              time: '',
              value: null
            },
            spiFormRules:{
                value: [{ required: true, message: '请填写spi总值', trigger: 'blur' }],
            }
        });
        // 打开弹窗
        const openDialog = (type: string, val: any) => {
            state.isShowDialog = true
            if (type === '新增') {
                state.title = '新增SPI总值'
                state.spiForm = {
                  id: null,
                  time: '',
                  value: null
                }
                getTime()
            } else {
                state.title = '修改SPI总值'
                const {id,time,value} = val
                state.spiForm = {id,time, value}
            }
        };

      // 时间格式化
      const timeForm = {
        hour12: false,
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      };

      const getTime = () =>{
        const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
        state.spiForm.time = curTime.substring(0,7)
      }

        // 新增修改
        const onSubmit = async () => {
            userRef.value.validate(async (valid:Boolean) => {
                if(valid){
                    if (state.title === '新增SPI总值') {
                      const {id,...data} = state.spiForm
                      data.value = Number(state.spiForm.value)
                        let res = await riskWarningApi().addSpi(data);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '新增成功',
                                duration: 2000
                            });
                            state.isShowDialog = false;
                            context.emit('getSpiList');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    } else {
                        state.spiForm.value = Number(state.spiForm.value)
                        let res = await riskWarningApi().modSpi(state.spiForm);
                        if (res.data.code === '200') {
                            ElMessage({
                                type: 'success',
                                message: '修改成功',
                                duration: 2000
                            });
                            state.isShowDialog = false;
                            context.emit('getSpiList');
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }
                }else{
                    ElMessage({
                        type:'warning',
                        message:'请完善基本信息'
                    })
                }
            })

        };

        // 页面加载时
        onMounted(() => {});
        return {
            userRef,
            openDialog,
            onSubmit,
            ...toRefs(state)
        };
    }
});
</script>

 src/views/system/spi/index.vue

对比新文件
@@ -0,0 +1,227 @@
<template>
    <div class="system-user-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <el-button size="default" type="success" class="ml10" @click="onOpenSpiDialog('新增', '')">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增
                </el-button>
            </div>
            <el-table :data="spiData.data" style="width: 100%">
                <el-table-column type="index" label="序号" width="60" align="center"/>
                <el-table-column prop="time" label="日期" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="value" label="总值" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="100" align="center">
                    <template #default="scope">
                        <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenSpiDialog('修改', scope.row)">修改</el-button>
                        <el-button style="color: red" :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br />
            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="page-position" :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="listQuery.pageIndex" background v-model:page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="spiData.total"> </el-pagination>
            <br />
            <br />
        </el-card>
        <spiDialog ref="userRef" @getSpiList="initSpiData"/>
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import spiDialog from '/@/views/system/spi/component/spiDialog.vue';
import { videoApi } from '/@/api/systemManage/video';
import { dutyApi } from '/@/api/systemManage/duty';
import { departmentApi } from '/@/api/systemManage/department';
import { useRoleApi } from '/@/api/systemManage/role';
import {riskWarningApi} from "/@/api/riskWarning";

// 定义接口来定义对象的类型
interface TableDataRow {
    name: string;
    userNickname: string;
    roleSign: string;
    department: string[];
    phone: string;
    email: string;
    sex: string;
    password: string;
    overdueTime: Date;
    status: boolean;
    describe: string;
    createTime: string;
}
interface DepartmentDataRow {}
interface TableDataState {
    spiData: {
        data: Array<TableDataRow>;
        total: number;
        loading: boolean;
    };
    listQuery: {
      pageIndex: number;
      pageSize: number;
    };
    departmentList: [];
    roleList: [];
    dutyList: [];
    props:{}
}

export default defineComponent({
    name: 'systemVideo',
    components: { spiDialog },
    setup() {
        const userRef = ref();
        const state = reactive<TableDataState>({
            spiData: {
                data: [],
                total: 0,
                loading: false,
            },
            listQuery: {
              pageIndex: 1,
              pageSize: 10
            },
            departmentList: [],
            roleList: [],
            dutyList: [],
            props: {
              label: 'depName',
              value: 'depId',
              checkStrictly: true,
              emitPath: false
            }
        });
        // 初始化表格数据
        const initSpiData = async () => {
            let res = await riskWarningApi().getSpiPage(state.listQuery);
            if (res.data.code === '200') {
                state.spiData.data = res.data.data;
                state.spiData.total = res.data.total;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 回显职务信息
        const parseNumber = (value: number) => {
            return state.dutyList.find((i) => i.positionId === value)?.positionName;
        };
        const getDepartmentData = async () => {
            let res = await departmentApi().getDepartmentList();
            if (res.data.code === '200') {
                state.departmentList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const getRoleData = async () => {
            let res = await useRoleApi().getRoleList();
            if (res.data.code === '200') {
                state.roleList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

      const getDutyData = async () => {
        let res = await dutyApi().getAllList({positionName: '',positionCode: ''});
        if (res.data.code === '200') {
          state.dutyList = res.data.data;
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      };

        // 打开新增修改用户弹窗
        const onOpenSpiDialog = (type: string, value: any) => {
            userRef.value.openDialog(type, value, state.departmentList, state.roleList, state.dutyList);
        };

        // 删除用户
        const onRowDel = (row: TableDataRow) => {
            ElMessageBox.confirm(`此操作将永久删除该数据，是否继续?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await riskWarningApi().delSpi(row.id);
                    if (res.data.code === '200') {
                        ElMessage({
                            type: 'success',
                            duration: 2000,
                            message: '删除成功'
                        });
                        await initSpiData();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };
        // 分页改变
        const onHandleSizeChange = (val: number) => {
            state.listQuery.pageSize = val;
            initSpiData();
        };
        // 分页改变
        const onHandleCurrentChange = (val: number) => {
            state.listQuery.pageIndex = val;
            initSpiData();
        };
        // 页面加载时
        onMounted(() => {
            let a = { name: 1, c: { name: 1 } };
            let b = Object.assign({}, a);
            b.c.name = 2;
            initSpiData();
            getDepartmentData();
            getRoleData();
            getDutyData()
        });
        return {
            userRef,
            onOpenSpiDialog,
            onRowDel,
            parseNumber,
            onHandleSizeChange,
            initSpiData,
            onHandleCurrentChange,
            ...toRefs(state)
        };
    }
});
</script>
<style  scoped>
: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>