新修改添加页面

batman

2023-03-07 6a08de2fedd83c195d7755a13b81970fe6d2b822

新修改添加页面

 src/router/route.ts

@@ -127,5 +127,13 @@
        meta: {
            title: '特殊作业首页'
        }
    },
    {
        path: '/facilityIndex',
        name: 'facilityIndex',
        component: () => import('/@/views/facilityManagement/facilityIndex/index.vue'),
        meta: {
            title: '设备管理首页'
        }
    }
];

 src/views/facilityManagement/facilityIndex/index.vue

对比新文件
@@ -0,0 +1,1109 @@
<template>
    <div class="home-container">
        <div class="topChart">
          <div class="chart-item">
            <div class="chart-tit">
              <span class="tit">当前时间设备状态</span>
              <div class="filter-part filter-part2">
                <el-cascader v-model="chartSearch1.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
              </div>
            </div>
            <div class="chart" :id="sbzt"></div>
          </div>
          <div class="chart-item">
            <div class="chart-tit">
              <span class="tit">设备异常趋势</span>
              <div class="filter-part filter-part2">
                <el-cascader v-model="chartSearch2.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
              </div>
            </div>
            <div class="chart" :id="ycqs"></div>
          </div>
          <div class="chart-item">
            <div class="chart-tit">
              <span class="tit">关联作业排行</span>
              <div class="filter-part filter-part3">
                <el-cascader v-model="chartSearch3.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
                <el-select v-model="chartSearch3.period" size="small">
                  <el-option label="近7天" value="week"/>
                  <el-option label="近30天" value="month"/>
                  <el-option label="近90天" value="season"/>
                  <el-option label="近1年" value="year"/>
                </el-select>
                <el-select v-model="chartSearch3.workType" size="small">
                  <el-option
                      v-for="item in workType1"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  />
                </el-select>
              </div>
            </div>
            <div class="chart" style="margin-top: 10px">
              <el-table ref="multipleTableRef" :data="warningData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
                <el-table-column property="name" label="姓名" align="center"/>
                <el-table-column property="depName" label="所属部门" align="center"/>
                <el-table-column property="applyUname" label="异常报警次数" align="center"/>
                <el-table-column property="operators" label="角色" align="center"/>
                <el-table-column label="是否持证" align="center">
                  <template #default="scope">

                  </template>
                </el-table-column>
              </el-table>
              <el-button type="text" size="small">查看所有设计特殊作业的设备>></el-button>
            </div>
            <!--            <div class="chart" :id="ycqs"></div>-->
          </div>
        </div>
        <div class="topChart">
          <div class="chart-item chart-item2">
            <div class="chart-tit">
              <span class="tit">关联作业趋势图</span>
              <div class="filter-part filter-part2">
                <el-cascader v-model="chartSearch4.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
              </div>
            </div>
            <div class="chart" style="margin-top: 10px">
              <el-table :data="wdsbData" style="width: 100%" stripe border :header-cell-style="{ background: '#fafafa' }">
                <el-table-column label="设备位号" align="center"/>
                <el-table-column label="设备名称" align="center"/>
                <el-table-column label="所属事业部" align="center"/>
                <el-table-column label="温度敏感范围" align="center"/>
                <el-table-column label="当前气温" align="center"/>
                <el-table-column label="状态" align="center" width="180">
                  <template #default="scope">
                    <span :style="{color: scope.row.taskStatus == 1 ? '#999' : scope.row.taskStatus == 2 ? '#44b100' : scope.row.taskStatus == 3 ? '#409eff' : 'red'}">{{ scope.row.taskStatus == 1 ? '待巡检' : scope.row.taskStatus == 2 ? '巡检中' : scope.row.taskStatus == 3 ? '已巡检' : '超期未巡检' }}</span>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination v-model:currentPage="chartSearch4.pageIndex" v-model:page-size="chartSearch4.pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
          </div>
          <div class="chart-item chart-item2">
            <div class="chart-tit">
              <span class="tit">其他数据分析</span>
              <div class="filter-part filter-part2">
                <el-cascader v-model="chartSearch4.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
              </div>
            </div>
            <div class="chart" style="margin-top: 10px;display: flex;align-items: center">
              <div class="c-item" :id="aqxj">

              </div>
              <div class="c-item" :id="aqby">

              </div>
              <div class="c-item" :id="yhxh">

              </div>
            </div>
          </div>
        </div>
    </div>
</template>

<script lang="ts">
import {toRefs, reactive, defineComponent, ref, onMounted, defineAsyncComponent} from 'vue';
import { storeToRefs } from 'pinia';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { useUserInfo } from '/@/stores/userInfo';
import { Session } from '/@/utils/storage';
import { useRouter } from 'vue-router';
import { Edit, View, Plus, Delete, Refresh, Search, Finished, Download, FolderChecked } from '@element-plus/icons-vue';
import { ElTable, ElMessage } from 'element-plus';
import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
import type { TabsPaneContext } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
import Cookies from 'js-cookie';
import axios from 'axios';
import * as echarts from "echarts";

// 定义接口来定义对象的类型
interface stateType {
    applyData: Array<string>;
    workTimeList: Array<string>;
    multipleSelection: Array<any>;
    casProps: {};
    approveInfo: Object;
    dialogDetails: boolean;
    dialogReview: boolean;
    pageIndex1: number;
    pageSize1: number;
    chosenIndex: null | number;
    searchWord: number | null;
    searchStatus: number | null;
    chartSearch1: object;
    chartSearch2: object;
    chartSearch3: object;
    chartSearch4: object;
    searchDep2: number | null;
    searchDep: number | null;
    searchDate: Array<any>,
    totalSize1: number;
    details: {};
    workType: Array<type>;
    workType1: Array<type>;
    dialogType: number | null;
    departmentList: Array<any>;
    departmentRecursionList: Array<DepartmentState>;
    workStatus: Array<status>;
    reviewForm: object;
    reviewRules: object;
}
interface type {
    id: number;
    name: string;
}
interface status {
  name: string
  value: number
}
interface DepartmentState {
    depId: number;
    depName: string;
}
interface User {
  name: string;
  list: [];
  info: string;
}
export default defineComponent({
    name: 'facilityIndex',
    components: {},
    setup() {
        const userInfo = useUserInfo();
        const { userInfos } = storeToRefs(userInfo);
        const router = useRouter();
        const reviewFormRef = ref<FormInstance>()
        const sbzt = ref("eChartSbzt" + Date.now() + Math.random())
        const ycqs = ref("eChartYcqs" + Date.now() + Math.random())
        const aqxj = ref("eChartAqxj" + Date.now() + Math.random())
        const aqby = ref("eChartAqby" + Date.now() + Math.random())
        const yhxh = ref("eChartYhxh" + Date.now() + Math.random())
        const state = reactive<stateType>({
            pageIndex1: 1,
            pageSize1: 10,
            totalSize1: 0,
            dialogType: null,
            dialogReview: false,
            departmentList: [],
            departmentRecursionList: [],
            chosenIndex: null,
            searchWord: null,
            searchStatus: null,
            chartSearch1: {
              searchDep: null,
              period: 'month'
            },
            chartSearch2: {
              searchDep: null,
              type: 0
            },
            chartSearch3: {
              searchDep: null
            },
            chartSearch4: {
              searchDep: null
            },
            searchDep2: null,
            searchDep: null,
            searchDate: [],
            applyData: [],
            workTimeList: [],
            multipleSelection: [],
            approveInfo: {
                approvalSteps: [],
                operators: []
            },
            casProps: {
                expandTrigger: 'hover',
                emitPath: false,
                value: 'depId',
                label: 'depName',
                checkStrictly: true
            },
            dialogDetails: false,
            details: {},
            workType1: [
              { id: 0, name: '所有作业' },
              { id: 1, name: '动火作业' },
              { id: 2, name: '受限空间作业' },
              { id: 3, name: '吊装作业' },
              { id: 4, name: '动土作业' },
              { id: 5, name: '断路作业' },
              { id: 6, name: '高处作业' },
              { id: 7, name: '临时用电作业' },
              { id: 8, name: '盲板抽堵作业' }
            ],
            workType: [
                { id: 1, name: '动火作业' },
                { id: 2, name: '受限空间作业' },
                { id: 3, name: '吊装作业' },
                { id: 4, name: '动土作业' },
                { id: 5, name: '断路作业' },
                { id: 6, name: '高处作业' },
                { id: 7, name: '临时用电作业' },
                { id: 8, name: '盲板抽堵作业' }
            ],
            workStatus: [
              {
                name: '作业进行中',
                value: 0
              },
              {
                name: '作业终止',
                value: 1
              },
              {
                name: '作业结束待验收',
                value: 2
              },
              {
                name: '作业完成',
                value: 3
              }
            ],
            reviewForm: {
              advice: ''
            },
            reviewRules:{
              advice: [{ required: true, message: '请填写验收意见', trigger: 'blur' }]
            }
        });
      // 页面载入时执行方法
      onMounted(() => {
        getListByPage();
        getAllDepartment();
        initSbzt()
        initYcqs()
        initAqxj()
        initAqby()
        initYhxh()
      });

      type EChartsOption = echarts.EChartsOption
      const initSbzt =()=>{
        let dom = document.getElementById(sbzt.value);
        let myChart = echarts.init(dom);
        let option: EChartsOption;
        option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            top: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 1,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: true
              },
              data: [
                { value: 1048, name: '在用' },
                { value: 735, name: '维修' },
                { value: 580, name: '停用' },
                { value: 484, name: '报废' }
              ]
            }
          ]
        }

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

        option && myChart.setOption(option);
        window.addEventListener("resize",function (){
          myChart.resize();
        });
      }
      const initAqxj =()=>{
        let dom = document.getElementById(aqxj.value);
        let myChart = echarts.init(dom);
        let option: EChartsOption;
        option = {
          title: {
            text: '按期巡检率',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            bottom: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 1,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: true
              },
              data: [
                { value: 254, name: '在用' },
                { value: 735, name: '维修' }
              ]
            }
          ]
        }

        option && myChart.setOption(option);
        window.addEventListener("resize",function (){
          myChart.resize();
        });
      }
      const initAqby =()=>{
        let dom = document.getElementById(aqby.value);
        let myChart = echarts.init(dom);
        let option: EChartsOption;
        option = {
          title: {
            text: '按期保养率',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            bottom: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 1,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: true
              },
              data: [
                { value: 254, name: '在用' },
                { value: 735, name: '维修' }
              ]
            }
          ]
        }

        option && myChart.setOption(option);
        window.addEventListener("resize",function (){
          myChart.resize();
        });
      }
      const initYhxh =()=>{
        let dom = document.getElementById(yhxh.value);
        let myChart = echarts.init(dom);
        let option: EChartsOption;
        option = {
          title: {
            text: '隐患销号率',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            bottom: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 1,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: true
              },
              data: [
                { value: 254, name: '在用' },
                { value: 735, name: '维修' }
              ]
            }
          ]
        }

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

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

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

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

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

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

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

        const handleReview = (row)=>{
          state.dialogReview = true
        }

      const submitReview = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
          if (valid) {
            console.log('submit!')
          } else {
            console.log('error submit!', fields)
          }
        })
      }

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

        return {
            View,
            Edit,
            Delete,
            Refresh,
            Plus,
            Finished,
            Download,
            FolderChecked,
            reviewFormRef,
            sbzt,
            ycqs,
            aqxj,
            aqby,
            yhxh,
            handleReview,
            submitReview,
            reLoadData,
            toApply,
            toNames,
            searchRecord,
            clearSearch,
            getListByPage,
            handleSizeChange1,
            handleCurrentChange1,
            ...toRefs(state)
        };
    }
});
</script>

<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
    height: calc(100vh - 144px);
    box-sizing: border-box;
    overflow: hidden;
    .demo-tabs {
        width: 100%;
        height: 100%;

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

        .el-tab-pane {
            height: 100%;
        }
    }
    .topChart{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20px;
      height: 50%;

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

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

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

              :deep(.el-switch__core){
                width: 100% !important;
              }
            }
          }
          .filter-part2{
            :deep(.el-cascader){
              width: 100% !important;
            }
          }
          .filter-part3{
            :deep(.el-cascader){
              width: 30% !important;
            }
            .el-select{
              width: 25% !important;
              margin-left: 10px;
            }
          }
        }
        .chart{
          width: 100%;
          height: 88%;

          .c-item{
            width: calc((100% - 20px)/3);
            height: 100%;
          }
        }
        .el-radio-group{
          width: 20%;
          display: flex;
          flex-flow: column nowrap;
          align-items: flex-start;
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-30%);

          .el-radio{
            width: 100%;
            margin-bottom: 4px;
          }
        }
        :deep(.active-ring-info){
          .active-ring-name{
            font-size: 1.5rem !important;
            text-align: center;
          }
        }
      }

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

        &:last-of-type{
          margin-right: 0;
        }
      }
    }
    .homeCard {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 4px;

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

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

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

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

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

            .box-card {
                width: 100%;

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

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

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

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

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

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

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

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

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

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

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

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

            & > div {
                white-space: nowrap;
                margin-right: 20px;
            }
        }
    }
}
.el-card {
    border: 0;
}
.el-input{
    width: 100% !important;
}
::v-deep(.el-date-editor){
    width: 100%;
}
.el-select{
    width: 100%;
}
:deep(.el-cascader){
    width: 100% !important;
}
</style>

 src/views/intellectInspect/intelligentLine/index.vue

@@ -3,16 +3,16 @@
        <div class="big-title" @click="goBack()">国泰新华智能巡检系统</div>
        <div style="height: 20px;font-size: 14px;line-height: 20px; color: #00ffff; margin-top: 4px">{{ present }}</div>
        <div class="btns">
<!--            <div class="fullbtn" @click="onScreenfullClick">-->
<!--                <div class="toFull">-->
<!--                    <i class="iconfont" :title="全屏" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>-->
            <div class="fullbtn" @click="onScreenfullClick">
                <div class="toFull">
                    <i class="iconfont" :title="全屏" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
<!--                  <el-icon>-->
<!--                    <FullScreen v-if="isScreenfull"/>-->
<!--                    <Close v-else/>-->
<!--                  </el-icon>-->
<!--                </div>-->
<!--                <div>全屏</div>-->
<!--            </div>-->
                </div>
                <div>全屏</div>
            </div>
            <div class="backBtn" @click="goBack()">
                <img src="../../../assets/loginPage/back-icon.png"/>
                <div>退出</div>
@@ -20,6 +20,51 @@
        </div>
        <div class="blocks">
            <div>
            <div class="warning-part">
              <div class="warn-tit">异常警报：</div>
              <div class="warn-msg">
                <div class="warn-item">
                  <div class="i-tit">
                    P-8240A 巡检异常！
                  </div>
                  <div>
                    正常值：<span>8-10Mpa</span>
                  </div>
                  <div>
                    巡检值：<span>12Mpa</span>
                  </div>
                  <div>
                    已通知负责人：<span>黄公子</span>
                  </div>
                  <div>
                    负责人电话：<span>15261806176</span>
                  </div>
                  <div>
                    工单回执状态：<span>待响应</span>
                  </div>
                </div>
                <div class="warn-item">
                  <div class="i-tit">
                    P-8240A 巡检异常！
                  </div>
                  <div>
                    正常值：<span>8-10Mpa</span>
                  </div>
                  <div>
                    巡检值：<span>12Mpa</span>
                  </div>
                  <div>
                    已通知负责人：<span>黄公子</span>
                  </div>
                  <div>
                    负责人电话：<span>15261806176</span>
                  </div>
                  <div>
                    工单回执状态：<span>待响应</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="star-pic">
                <dv-decoration-12 scanDur="5" haloDur="4" class="scan"/>
                <div class="star-bg"><img src="../../../assets/loginPage/star-bg.png" /></div>
@@ -136,7 +181,7 @@
            let curId = route.query.id
            state.id = curId.toString()
            getLine(state.id)
            getUrl(state.id)
            // getUrl(state.id)
        });
      onActivated(()=>{
        onScreenfullClick();
@@ -158,9 +203,7 @@
                    // 实例化socket
                    let uid =  userInfos.value.uid.toString()
                    var url = state.path + uid + '*' + id;
                    console.log(url,'url',uid,'uid')
                    url = url.replace('https', 'ws').replace('http', 'ws');
                    console.log(url, '获取地址');
                    state.socket = new WebSocket(url);
                    // 监听socket连接
                    state.socket.onopen = () => {
@@ -173,7 +216,6 @@
                    // 监听socket消息
                    state.socket.onmessage = (msg) => {
                        if (msg.data === '连接成功') return;
                        console.log(msg.data,'data')
                        userInfos.value.dataList = JSON.parse(msg.data);
                    };
                }
@@ -1360,6 +1402,48 @@
                    }
                }
            }
            .warning-part{
              position: absolute;
              width: calc((100vw - 120px) / 7);
              height: calc((100vw - 120px) / 7);
              background-image: linear-gradient(to right, rgba(8, 109, 209, 0.4), rgba(11, 255, 255, 0.2));
              border: 1px solid #36fcfc;
              z-index: 99999;
              top: 100px;
              right: 60px;
              padding: 10px;
              color: rgb(0, 255, 255);

              .warn-tit{
                height: 26px;
                padding-bottom: 5px;
                font-weight: bolder;
                border-bottom: 1px solid rgb(0, 255, 255);
              }
              .warn-msg{
                width: 100%;
                margin-top: 10px;
                height: calc(100% - 36px);
                overflow: hidden;
                overflow-y: scroll;
                scrollbar-width: none; /* firefox */
                -ms-overflow-style: none; /* IE 10+ */

                &::-webkit-scrollbar {
                  display: none; /* Chrome Safari */
                }
                .warn-item{
                  padding: 0 0 10px;
                  margin-bottom: 10px;
                  border-bottom: 1px solid rgb(0, 255, 255);

                  &:last-of-type{
                    border-bottom: none;
                    margin-bottom: 0;
                  }
                }
              }
            }
            .star-pic {
                position: absolute;
                width: calc((100vw - 120px) / 7);

 src/views/specialWorkSystem/specialIndex/index.vue

@@ -70,6 +70,7 @@
                      :value="item.id"
                  />
                </el-select>
                <el-button type="text" size="small">所有记录>></el-button>
              </div>
            </div>
            <div class="chart">
@@ -80,7 +81,7 @@
                <el-table-column property="operators" label="角色" align="center"/>
                <el-table-column label="是否持证" align="center" width="180">
                  <template #default="scope">
                    <el-tag :type="scope.row.status==2?'success':(scope.row.status==8||scope.row.status==9)?'warning':'danger'">{{ scope.row.statusDesc }}</el-tag>

                  </template>
                </el-table-column>
              </el-table>
@@ -94,7 +95,7 @@
                  <el-col :span="5" style="display:flex;align-items: center">
                    <span style="white-space: nowrap">作业类型：</span>
                    <div class="grid-content topInfo">
                      <el-select v-model="searchWord">
                      <el-select v-model="searchWord" size="small">
                        <el-option
                            v-for="item in workType"
                            :key="item.id"
@@ -107,7 +108,7 @@
                  <el-col :span="5" style="display:flex;align-items: center">
                    <span style="white-space: nowrap">作业状态：</span>
                    <div class="grid-content topInfo">
                      <el-select v-model="searchStatus">
                      <el-select v-model="searchStatus" size="small">
                        <el-option
                            v-for="item in workStatus"
                            :key="item.value"
@@ -120,7 +121,7 @@
                  <el-col :span="5" style="display:flex;align-items: center">
                    <span style="white-space: nowrap">作业部门：</span>
                    <div class="grid-content topInfo">
                      <el-cascader v-model="searchDep" :options="departmentList" :props="casProps" :show-all-levels="false"/>
                      <el-cascader size="small" v-model="searchDep" :options="departmentList" :props="casProps" :show-all-levels="false"/>
                    </div>
                  </el-col>
                  <el-col :span="6" style="display:flex;align-items: center;">
@@ -128,6 +129,7 @@
                    <div class="grid-content topInfo">
                      <el-date-picker
                          v-model="searchDate"
                          size="small"
                          type="daterange"
                          unlink-panels
                          range-separator="至"
@@ -137,8 +139,8 @@
                      />
                    </div>
                  </el-col>
                  <el-button type="primary" style="margin-left: 20px" @click="searchRecord">查询</el-button>
                  <el-button plain @click="clearSearch">重置</el-button>
                  <el-button type="primary" style="margin-left: 20px" @click="searchRecord" size="small">查询</el-button>
                  <el-button plain @click="clearSearch" size="small">重置</el-button>
                </el-row>
                <div class="main-card">
                    <el-row class="cardTop" style="justify-content: space-between">
@@ -497,7 +499,7 @@
          xAxis: [
            {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              data: ['事业部1', '事业部2', '事业部3', '事业部4', '事业部5', '事业部6', '事业部7'],
              axisTick: {
                alignWithLabel: true
              }

 src/views/system/video/component/videoDialog.vue

@@ -15,7 +15,7 @@
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="所属部门" prop="bizDepId">
                            <el-cascader v-model="videoForm.bizDepId" :options="departmentData" :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }" placeholder="请选择部门" clearable class="w100"> </el-cascader>
                            <el-cascader v-model="videoForm.bizDepId" :options="departmentData" :props="addProps" placeholder="请选择部门" :show-all-levels="false" clearable class="w100"> </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
@@ -55,7 +55,8 @@
    videoFormRules:{

    },
    departmentData: Array<DeptData>
    departmentData: Array<DeptData>;
    addProps:{}
}

export default defineComponent({
@@ -78,6 +79,13 @@
                bizDepId: [{ required: true, message: '请选择部门', trigger: 'change' }]
            },
            departmentData: [], // 部门数据
            addProps:{
              expandTrigger: 'hover',
              emitPath: false,
              value: 'depId',
              label: 'depName',
              checkStrictly: true
            }
        });
        // 打开弹窗
        const openDialog = (type: string, value: any, departmentList: [], roleList: [], dutyList:[]) => {