修改巡检首页，添加视频详情内容

马宇豪

2023-03-20 5f114549b05ad3334ca911e84e9698cade0995ca

修改巡检首页，添加视频详情内容

 src/router/route.ts

@@ -89,6 +89,14 @@
        }
    },
    {
        path: '/inspectFullScreen',
        name: 'inspectFullScreen',
        component: () => import('/@/views/intellectInspect/inspectIndex/components/fullScreen.vue'),
        meta: {
            title: '巡检首页全屏'
        }
    },
    {
        path: '/msgDetail',
        name: 'msgDetail',
        component: () => import('/@/views/riskWarningSys/warningBigScreen/indexs/msgDetail.vue'),

 src/views/facilityManagement/facilityIndex/index.vue

@@ -1,117 +1,117 @@
<template>
    <div class="home-container" :class="isFull==true?'container':''" id="bigScreen">
      <div class="full">
        <el-button v-if="isFull==false" type="text" style="height: 34px" @click="toFullscreen">
          <el-icon style="vertical-align: middle">
            <FullScreen />
          </el-icon>
          <span style="vertical-align: middle">全屏</span>
        </el-button>
        <el-button v-else type="text" style="height: 34px" @click="toFullscreen">
          <el-icon style="vertical-align: middle">
            <Close />
          </el-icon>
          <span style="vertical-align: middle">退出全屏</span>
        </el-button>
      </div>
        <div class="topChart">
          <div class="chart-item" :class="zin==1?'upItem':''">
            <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
            <div class="chart-tit">
              <span class="tit">当前时间设备状态</span>
              <div class="filter-part filter-part2">
                <el-cascader @focus="upgrade(1)" :teleported="false" 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" :class="zin==2?'upItem':''">
            <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
            <div class="chart-tit">
              <span class="tit">设备异常趋势</span>
              <div class="filter-part filter-part2">
                <el-cascader @focus="upgrade(2)" :teleported="false" 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" :class="zin==3?'upItem':''">
            <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
            <div class="chart-tit">
              <span class="tit">关联作业排行</span>
              <div class="filter-part filter-part3">
                <el-cascader @focus="upgrade(3)" :teleported="false" v-model="chartSearch3.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
                <el-select :teleported="false" 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 :teleported="false" 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">
              <el-table ref="multipleTableRef" :data="rankData" style="width: 100%" stripe border :header-cell-style="{ background: '#fafafa' }">
                <el-table-column property="num" label="设备位号" align="center"/>
                <el-table-column property="name" label="设备名称" align="center"/>
                <el-table-column property="dep" label="所属部门" align="center"/>
                <el-table-column property="count" label="关联次数" align="center"/>
              </el-table>
              <el-button type="text" size="small" style="margin-top: 10px">查看所有涉及殊作业的设备>></el-button>
            </div>
            <!--            <div class="chart" :id="ycqs"></div>-->
          </div>
        </div>
        <div class="topChart">
          <div class="chart-item chart-item2" :class="zin==4?'upItem':''">
            <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
            <div class="chart-tit">
              <span class="tit">关联作业趋势图</span>
              <div class="filter-part filter-part2">
                <el-cascader @focus="upgrade(4)" :teleported="false" v-model="chartSearch4.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
              </div>
            </div>
            <div class="chart">
              <el-table :data="wdsbData" style="width: 100%" stripe border :header-cell-style="{ background: '#fafafa' }">
                <el-table-column prop="num" label="设备位号" align="center"/>
                <el-table-column prop="name" label="设备名称" align="center"/>
                <el-table-column prop="dep" label="所属事业部" align="center"/>
                <el-table-column prop="temRange" label="温度敏感范围" align="center"/>
                <el-table-column prop="tem" label="当前气温" align="center"/>
                <el-table-column prop="status" label="状态" align="center" width="180">
                  <template #default="scope">
                    <el-tag :type="scope.row.status == 0 ? 'success' : scope.row.status == 1 ? '' : 'danger'">{{ scope.row.status == 0 ? '正常' : scope.row.status == 1 ? '低温警报' : '高温警报' }}</el-tag>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pageBtn" style="margin-top: 10px">
                <el-pagination v-model:currentPage="pageIndex1" v-model:page-size="pageSize1" :page-sizes="[3]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize1" @size-change="handleSizeChange1" @current-change="handleCurrentChange1" />
              </div>
            </div>
          </div>
          <div class="chart-item chart-item2" :class="zin==5?'upItem':''">
            <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
            <div class="chart-tit">
              <span class="tit">其他数据分析</span>
              <div class="filter-part filter-part2">
                <el-cascader @focus="upgrade(5)" :teleported="false" 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 class="home-container" :class="isFull==true?'container':''" id="bigScreen">
    <div class="full">
      <el-button v-if="isFull==false" type="text" style="height: 34px" @click="toFullscreen">
        <el-icon style="vertical-align: middle">
          <FullScreen />
        </el-icon>
        <span style="vertical-align: middle">全屏</span>
      </el-button>
      <el-button v-else type="text" style="height: 34px" @click="toFullscreen">
        <el-icon style="vertical-align: middle">
          <Close />
        </el-icon>
        <span style="vertical-align: middle">退出全屏</span>
      </el-button>
    </div>
    <div class="topChart">
      <div class="chart-item" :class="zin==1?'upItem':''">
        <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
        <div class="chart-tit">
          <span class="tit">当前时间设备状态</span>
          <div class="filter-part filter-part2">
            <el-cascader @focus="upgrade(1)" :teleported="false" 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" :class="zin==2?'upItem':''">
        <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
        <div class="chart-tit">
          <span class="tit">设备异常趋势</span>
          <div class="filter-part filter-part2">
            <el-cascader @focus="upgrade(2)" :teleported="false" 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" :class="zin==3?'upItem':''">
        <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
        <div class="chart-tit">
          <span class="tit">关联作业排行</span>
          <div class="filter-part filter-part3">
            <el-cascader @focus="upgrade(3)" :teleported="false" v-model="chartSearch3.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
            <el-select :teleported="false" 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 :teleported="false" 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">
          <el-table ref="multipleTableRef" :data="rankData" style="width: 100%" stripe border :header-cell-style="{ background: '#fafafa' }">
            <el-table-column property="num" label="设备位号" align="center"/>
            <el-table-column property="name" label="设备名称" align="center"/>
            <el-table-column property="dep" label="所属部门" align="center"/>
            <el-table-column property="count" label="关联次数" align="center"/>
          </el-table>
          <el-button type="text" size="small" style="margin-top: 10px">查看所有涉及殊作业的设备>></el-button>
        </div>
        <!--            <div class="chart" :id="ycqs"></div>-->
      </div>
    </div>
    <div class="topChart">
      <div class="chart-item chart-item2" :class="zin==4?'upItem':''">
        <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
        <div class="chart-tit">
          <span class="tit">关联作业趋势图</span>
          <div class="filter-part filter-part2">
            <el-cascader @focus="upgrade(4)" :teleported="false" v-model="chartSearch4.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
          </div>
        </div>
        <div class="chart">
          <el-table :data="wdsbData" style="width: 100%" stripe border :header-cell-style="{ background: '#fafafa' }">
            <el-table-column prop="num" label="设备位号" align="center"/>
            <el-table-column prop="name" label="设备名称" align="center"/>
            <el-table-column prop="dep" label="所属事业部" align="center"/>
            <el-table-column prop="temRange" label="温度敏感范围" align="center"/>
            <el-table-column prop="tem" label="当前气温" align="center"/>
            <el-table-column prop="status" label="状态" align="center" width="180">
              <template #default="scope">
                <el-tag :type="scope.row.status == 0 ? 'success' : scope.row.status == 1 ? '' : 'danger'">{{ scope.row.status == 0 ? '正常' : scope.row.status == 1 ? '低温警报' : '高温警报' }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
          <div class="pageBtn" style="margin-top: 10px">
            <el-pagination v-model:currentPage="pageIndex1" v-model:page-size="pageSize1" :page-sizes="[3]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize1" @size-change="handleSizeChange1" @current-change="handleCurrentChange1" />
          </div>
        </div>
      </div>
      <div class="chart-item chart-item2" :class="zin==5?'upItem':''">
        <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
        <div class="chart-tit">
          <span class="tit">其他数据分析</span>
          <div class="filter-part filter-part2">
            <el-cascader @focus="upgrade(5)" :teleported="false" 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">
@@ -135,45 +135,45 @@

// 定义接口来定义对象的类型
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;
    totalSize1: number;
    details: {};
    workType: Array<type>;
    workType1: Array<type>;
    dialogType: number | null;
    departmentList: Array<any>;
    rankData: Array<any>;
    wdsbData: Array<any>;
    isFull:boolean;
    themeColor:string;
    zin:number
  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;
  totalSize1: number;
  details: {};
  workType: Array<type>;
  workType1: Array<type>;
  dialogType: number | null;
  departmentList: Array<any>;
  rankData: Array<any>;
  wdsbData: Array<any>;
  isFull:boolean;
  themeColor:string;
  zin:number
}
interface type {
    id: number;
    name: string;
  id: number;
  name: string;
}
interface status {
  name: string
  value: number
}
interface DepartmentState {
    depId: number;
    depName: string;
  depId: number;
  depName: string;
}
interface User {
  name: string;
@@ -181,774 +181,773 @@
  info: string;
}
export default defineComponent({
    name: 'facilityIndex',
    components: {},
    setup() {
        const userInfo = useUserInfo();
        const { userInfos } = storeToRefs(userInfo);
        const router = useRouter();
        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>({
            isFull: false,
            themeColor: '#333',
            zin: 1,
            pageIndex1: 1,
            pageSize1: 3,
            totalSize1: 3,
            dialogType: null,
            dialogReview: false,
            departmentList: [],
            chosenIndex: null,
            searchWord: null,
            searchStatus: null,
            chartSearch1: {
              searchDep: null,
              period: 'month'
            },
            chartSearch2: {
              searchDep: null,
              type: 0
            },
            chartSearch3: {
              searchDep: null
            },
            chartSearch4: {
              searchDep: null
            },
            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: '盲板抽堵作业' }
            ],
            rankData: [
              {
                num: '111',
                name: '设备1',
                dep: '事业部1',
                count: 58
              },
              {
                num: '222',
                name: '设备2',
                dep: '事业部2',
                count: 58
              },
              {
                num: '333',
                name: '设备3',
                dep: '事业部3',
                count: 58
              },
              {
                num: '444',
                name: '设备4',
                dep: '事业部4',
                count: 58
              },
              {
                num: '555',
                name: '设备5',
                dep: '事业部5',
                count: 58
              }
            ],
            wdsbData: [
              {
                num: '111',
                name: '设备1',
                dep: '事业部1',
                temRange: '>=35摄氏度',
                tem: '38摄氏度',
                status: '2'
              },
              {
                num: '222',
                name: '设备1',
                dep: '事业部1',
                temRange: '<=55摄氏度',
                tem: '38摄氏度',
                status: '1'
              },
              {
                num: '333',
                name: '设备1',
                dep: '事业部1',
                temRange: '>=55摄氏度',
                tem: '38摄氏度',
                status: '0'
              }
            ]
        });
      // 页面载入时执行方法
      onMounted(() => {
        // getListByPage();
        getAllDepartment();
        initSbzt()
        initYcqs()
        initAqxj()
        initAqby()
        initYhxh()
      });
      const toFullscreen =()=>{
        console.log(state.isFull,'quanp',state.themeColor)
        const element = document.getElementById('bigScreen')
        if (!screenfull.isEnabled) {
          ElMessage.warning('暂不不支持全屏');
          return false;
  name: 'facilityIndex',
  components: {},
  setup() {
    const userInfo = useUserInfo();
    const { userInfos } = storeToRefs(userInfo);
    const router = useRouter();
    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>({
      isFull: false,
      themeColor: '#333',
      zin: 1,
      pageIndex1: 1,
      pageSize1: 3,
      totalSize1: 3,
      dialogType: null,
      dialogReview: false,
      departmentList: [],
      chosenIndex: null,
      searchWord: null,
      searchStatus: null,
      chartSearch1: {
        searchDep: null,
        period: 'month'
      },
      chartSearch2: {
        searchDep: null,
        type: 0
      },
      chartSearch3: {
        searchDep: null
      },
      chartSearch4: {
        searchDep: null
      },
      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: '盲板抽堵作业' }
      ],
      rankData: [
        {
          num: '111',
          name: '设备1',
          dep: '事业部1',
          count: 58
        },
        {
          num: '222',
          name: '设备2',
          dep: '事业部2',
          count: 58
        },
        {
          num: '333',
          name: '设备3',
          dep: '事业部3',
          count: 58
        },
        {
          num: '444',
          name: '设备4',
          dep: '事业部4',
          count: 58
        },
        {
          num: '555',
          name: '设备5',
          dep: '事业部5',
          count: 58
        }
        screenfull.toggle(element);
        state.isFull = !state.isFull
        if(state.isFull == true){
          state.themeColor = '#11FEEE'
        }else{
          state.themeColor = '#333'
      ],
      wdsbData: [
        {
          num: '111',
          name: '设备1',
          dep: '事业部1',
          temRange: '>=35摄氏度',
          tem: '38摄氏度',
          status: '2'
        },
        {
          num: '222',
          name: '设备1',
          dep: '事业部1',
          temRange: '<=55摄氏度',
          tem: '38摄氏度',
          status: '1'
        },
        {
          num: '333',
          name: '设备1',
          dep: '事业部1',
          temRange: '>=55摄氏度',
          tem: '38摄氏度',
          status: '0'
        }
        initSbzt()
        initYcqs()
        initAqxj()
        initAqby()
        initYhxh()
      ]
    });
    // 页面载入时执行方法
    onMounted(() => {
      // getListByPage();
      getAllDepartment();
      initSbzt()
      initYcqs()
      initAqxj()
      initAqby()
      initYhxh()
    });
    const toFullscreen =()=>{
      console.log(state.isFull,'quanp',state.themeColor)
      const element = document.getElementById('bigScreen')
      if (!screenfull.isEnabled) {
        ElMessage.warning('暂不不支持全屏');
        return false;
      }
      const upgrade =(level:number)=>{
        state.zin = level
        console.log(state.zin,'zin')
      screenfull.toggle(element);
      state.isFull = !state.isFull
      if(state.isFull == true){
        state.themeColor = '#11FEEE'
      }else{
        state.themeColor = '#333'
      }
      type EChartsOption = echarts.EChartsOption
      const initSbzt =()=>{
        let dom = document.getElementById(sbzt.value);
        let myChart = echarts.init(dom);
        let option: EChartsOption;
        option = {
          tooltip: {
            trigger: 'item'
      initSbzt()
      initYcqs()
      initAqxj()
      initAqby()
      initYhxh()
    }
    const upgrade =(level:number)=>{
      state.zin = level
      console.log(state.zin,'zin')
    }
    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: {
          bottom: '10%',
          textStyle: {
            // 设置默认的文字颜色
            color: state.themeColor,
            fontSize: 12
          },
          legend: {
            bottom: '10%',
            textStyle: {
              // 设置默认的文字颜色
              color: state.themeColor,
              fontSize: 12
            },
          itemStyle: {
            borderWidth: 0 // 设置图例边框宽度为0
          }
        },
        series: [
          {
            name: '当前时间设备状态',
            type: 'pie',
            radius: '50%',
            center: ['50%','35%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderWidth: 0 // 设置图例边框宽度为0
              borderRadius: 1,
              borderColor: '#fff',
              borderWidth: 1
            },
            label: {
              show: true,
              position: 'outside',
              overflow: 'truncate',
              borderWidth: 0,
              color: state.themeColor
            },
            labelLine: {
              show: true,    // 显示指示线
              lineStyle: {
                color: '#ccc',
                width: 1,
                type: 'solid'
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
            },
            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: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'],
          axisLabel: {
            color: state.themeColor
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: '#fafafa',
              width: 1,
              type: 'dashed'
            }
          },
          series: [
            {
              name: '当前时间设备状态',
              type: 'pie',
              radius: '50%',
              center: ['50%','35%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 1,
                borderColor: '#fff',
                borderWidth: 1
              },
          axisLabel:{
            color: '#ccc'
          }
        },
        grid: {
          top: '8%',
          bottom: '8%'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260],
            type: 'line',
            label:{
              show: true
            }
          }
        ]
      }

      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',
          textStyle:{
            color: state.themeColor
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '5%',
          left: 'center',
          textStyle: {
            // 设置默认的文字颜色
            color: state.themeColor,
            fontSize: 12
          },
          itemStyle: {
            borderWidth: 0 // 设置图例边框宽度为0
          }
        },
        series: [
          {
            name: '按期巡检率',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%','48%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 1,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                position: 'outside',
                overflow: 'truncate',
                borderWidth: 0,
                color: state.themeColor
              },
              labelLine: {
                show: true,    // 显示指示线
                lineStyle: {
                  color: '#ccc',
                  width: 1,
                  type: 'solid'
                }
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
              },
              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: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'],
            axisLabel: {
              color: state.themeColor
            }
          },
          yAxis: {
            splitLine: {
              show: true,
              lineStyle: {
                color: '#fafafa',
                width: 1,
                type: 'dashed'
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            axisLabel:{
              color: '#ccc'
            }
          },
          grid: {
            top: '8%',
            bottom: '8%'
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260],
              type: 'line',
              label:{
                show: true
              }
            }
          ]
        }

        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',
            textStyle:{
              color: state.themeColor
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            bottom: '5%',
            left: 'center',
            textStyle: {
              // 设置默认的文字颜色
              color: state.themeColor,
              fontSize: 12
            labelLine: {
              show: true
            },
            itemStyle: {
              borderWidth: 0 // 设置图例边框宽度为0
            }
          },
          series: [
            {
              name: '按期巡检率',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['50%','48%'],
              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',
            textStyle:{
              color: state.themeColor
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            bottom: '5%',
            left: 'center',
            textStyle: {
              // 设置默认的文字颜色
              color: state.themeColor,
              fontSize: 12
            },
            itemStyle: {
              borderWidth: 0 // 设置图例边框宽度为0
            }
          },
          series: [
            {
              name: '按期保养率',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['50%','48%'],
              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',
            textStyle:{
              color: state.themeColor
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            bottom: '5%',
            left: 'center',
            textStyle: {
              // 设置默认的文字颜色
              color: state.themeColor,
              fontSize: 12
            },
            itemStyle: {
              borderWidth: 0 // 设置图例边框宽度为0
            }
          },
          series: [
            {
              name: '隐患销号率',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['50%','48%'],
              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)
            data: [
              { value: 254, name: '在用' },
              { value: 735, name: '维修' }
            ]
          }
        })
        ]
      }

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

        return {
            View,
            Edit,
            Delete,
            Refresh,
            Plus,
            Finished,
            Download,
            FolderChecked,
            sbzt,
            ycqs,
            aqxj,
            aqby,
            yhxh,
            toFullscreen,
            upgrade,
            handleReview,
            submitReview,
            reLoadData,
            toApply,
            toNames,
            // searchRecord,
            // clearSearch,
            // getListByPage,
            // handleSizeChange1,
            // handleCurrentChange1,
            ...toRefs(state)
        };
      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',
          textStyle:{
            color: state.themeColor
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '5%',
          left: 'center',
          textStyle: {
            // 设置默认的文字颜色
            color: state.themeColor,
            fontSize: 12
          },
          itemStyle: {
            borderWidth: 0 // 设置图例边框宽度为0
          }
        },
        series: [
          {
            name: '按期保养率',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%','48%'],
            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',
          textStyle:{
            color: state.themeColor
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '5%',
          left: 'center',
          textStyle: {
            // 设置默认的文字颜色
            color: state.themeColor,
            fontSize: 12
          },
          itemStyle: {
            borderWidth: 0 // 设置图例边框宽度为0
          }
        },
        series: [
          {
            name: '隐患销号率',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%','48%'],
            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,
      sbzt,
      ycqs,
      aqxj,
      aqby,
      yhxh,
      toFullscreen,
      upgrade,
      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;
    .full{
      position:fixed;
      height: 34px;
      line-height: 34px;
      top: 80px;
      right: 20px;
      z-index: 9;
  height: calc(100vh - 144px);
  box-sizing: border-box;
  overflow: hidden;
  .full{
    position:fixed;
    height: 34px;
    line-height: 34px;
    top: 80px;
    right: 20px;
    z-index: 9;
  }
  .demo-tabs {
    width: 100%;
    height: 100%;

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

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

    .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%;
        height: 100%;

        &::v-deep(.el-tabs__content) {
            height: calc(100% - 60px);
        height: 15%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        .tit{
          font-size: 16px;
          font-weight: bolder;
          white-space: nowrap;
        }

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

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

              :deep(.el-switch__core){
                width: 100% !important;
              }
            }
          }
          .filter-part2{
            :deep(.el-cascader){
            :deep(.el-switch__core){
              width: 100% !important;
            }
          }
          .filter-part3{
            :deep(.el-cascader){
              width: 30% !important;
            }
            .el-select{
              width: 25% !important;
              margin-left: 10px;
            }
        }
        .filter-part2{
          :deep(.el-cascader){
            width: 100% !important;
          }
        }
        .chart{
          width: 100%;
          height: 85%;
          .el-table{
            height: 90% !important;
            :deep(.el-table__inner-wrapper){
              height: 100% !important;
              .el-table__header-wrapper {
                height: 20% !important;
                .el-table__header{
        .filter-part3{
          :deep(.el-cascader){
            width: 30% !important;
          }
          .el-select{
            width: 25% !important;
            margin-left: 10px;
          }
        }
      }
      .chart{
        width: 100%;
        height: 85%;
        .el-table{
          height: 90% !important;
          :deep(.el-table__inner-wrapper){
            height: 100% !important;
            .el-table__header-wrapper {
              height: 20% !important;
              .el-table__header{
                height: 100% !important;
                th{
                  height: 100% !important;
                  th{
                    height: 100% !important;
                    padding: 0 0 !important;
                    .cell{
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    }
                  padding: 0 0 !important;
                  .cell{
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                }
              }
              .el-table__body-wrapper {
                height: 80% !important;
                .el-scrollbar__view{
            }
            .el-table__body-wrapper {
              height: 80% !important;
              .el-scrollbar__view{
                height: 100% !important;
                .el-table__body{
                  height: 100% !important;
                  .el-table__body{
                  tbody{
                    height: 100% !important;
                    tbody{
                      height: 100% !important;
                      .el-table__row{
                    .el-table__row{
                      height: 20% !important;
                      td{
                        height: 20% !important;
                        td{
                          height: 20% !important;
                          padding: 0 0 !important;
                          .left-info{
                            display: flex;
                            align-items: center;
                          }
                          .cell{
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                          }
                          .el-button{
                            padding: 0 !important;
                          }
                        padding: 0 0 !important;
                        .left-info{
                          display: flex;
                          align-items: center;
                        }
                        .cell{
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        }
                        .el-button{
                          padding: 0 !important;
                        }
                      }
                    }
@@ -957,99 +956,99 @@
              }
            }
          }
          .c-item{
            width: calc((100% - 20px)/3);
            height: 100%;
          }
          .pageBtn {
            display: flex;
            align-items: center;
            justify-content: right;

            .demo-pagination-block .demonstration {
              margin-bottom: 16px;
            }
          }
        }
        .el-radio-group{
          width: 20%;
        .c-item{
          width: calc((100% - 20px)/3);
          height: 100%;
        }
        .pageBtn {
          display: flex;
          flex-flow: column nowrap;
          align-items: flex-start;
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-30%);
          align-items: center;
          justify-content: right;

          .el-radio{
            width: 100%;
            margin-bottom: 4px;
          }
        }
        :deep(.active-ring-info){
          .active-ring-name{
            font-size: 1.5rem !important;
            text-align: center;
          .demo-pagination-block .demonstration {
            margin-bottom: 16px;
          }
        }
      }
      .el-radio-group{
        width: 20%;
        display: flex;
        flex-flow: column nowrap;
        align-items: flex-start;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-30%);

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

        &:last-of-type{
          margin-right: 0;
        .el-radio{
          width: 100%;
          margin-bottom: 4px;
        }
        .chart{
          .el-table{
            height: 90% !important;
            :deep(.el-table__inner-wrapper){
              height: 100% !important;
              .el-table__header-wrapper {
                height: 20% !important;
                .el-table__header{
      }
      :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;
      }
      .chart{
        .el-table{
          height: 90% !important;
          :deep(.el-table__inner-wrapper){
            height: 100% !important;
            .el-table__header-wrapper {
              height: 20% !important;
              .el-table__header{
                height: 100% !important;
                th{
                  height: 100% !important;
                  th{
                    height: 100% !important;
                    padding: 0 0 !important;
                    .cell{
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    }
                  padding: 0 0 !important;
                  .cell{
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                }
              }
              .el-table__body-wrapper {
                height: 80% !important;
                .el-scrollbar__view{
            }
            .el-table__body-wrapper {
              height: 80% !important;
              .el-scrollbar__view{
                height: 100% !important;
                .el-table__body{
                  height: 100% !important;
                  .el-table__body{
                  tbody{
                    height: 100% !important;
                    tbody{
                      height: 100% !important;
                      .el-table__row{
                    .el-table__row{
                      height: 20% !important;
                      td{
                        height: 20% !important;
                        td{
                          height: 20% !important;
                          padding: 0 0 !important;
                          .left-info{
                            display: flex;
                            align-items: center;
                          }
                          .cell{
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                          }
                          .el-button{
                            padding: 0 !important;
                          }
                        padding: 0 0 !important;
                        .left-info{
                          display: flex;
                          align-items: center;
                        }
                        .cell{
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        }
                        .el-button{
                          padding: 0 !important;
                        }
                      }
                    }
@@ -1061,32 +1060,33 @@
        }
      }
    }
  }

    .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-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;
      }
    }
  }
}
.container{
  padding: 20px;
@@ -1231,18 +1231,18 @@
  }
}
.el-card {
    border: 0;
  border: 0;
}
.el-input{
    width: 100% !important;
  width: 100% !important;
}
::v-deep(.el-date-editor){
    width: 100%;
  width: 100%;
}
.el-select{
    width: 100%;
  width: 100%;
}
:deep(.el-cascader){
    width: 100% !important;
  width: 100% !important;
}
</style>
</style>

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

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

<script lang="ts">
import { toRefs, reactive, ref, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { useUserInfo } from '/@/stores/userInfo';
import { Session } from '/@/utils/storage';
import { Edit, View, Plus, Delete, Refresh, Search, Download } from '@element-plus/icons-vue';
import { ElTable } from 'element-plus';
import { FormInstance, FormRules, ElMessage, ElMessageBox } from 'element-plus';
import { inspectRecordApi } from '/@/api/intellectInspectSystem/inspectRecord';
import { inspectIndexApi } from '/@/api/intellectInspectSystem/inspectIndex'
import { useRouter } from 'vue-router';
import * as echarts from 'echarts'
import inspectRecordDialog from './inspectRecordDialog.vue';
import inspectList from './inspectList.vue';
import unusualList from './unusualList.vue';
import { departmentApi } from '/@/api/systemManage/department';
import screenfull from "screenfull";
import { BorderBox10 as DvBorderBox10 } from '@kjgl77/datav-vue3'
// 定义接口来定义对象的类型
interface stateType {
    tableData: Array<string>;
    unusualData: Array<any>;
    unchecked: null | number;
    unusual: null | number;
    uncheckedList: [];
    abnormalList: [];
    pageIndex: number;
    pageSize: number;
    totalSize: number;
    workTypeList: Array<type>;
    departmentList: [];
    timeType: Array<type>;
    classGroupList: Array<classGroup>;
    quotaList: [];
    inspectPointAllList: [];
    chartStatus:boolean;
    period: string;
    dialogVisible:boolean;
    workNum: string;
    beImgs: [];
    afImgs: []
}
interface type {
    id: number;
    name: string;
}
interface classGroup {
    id: number;
    groupName: string;
}
export default {
    name: 'inspectFullScreen',
    components: { inspectRecordDialog, inspectList, unusualList },
    setup() {
        const router = useRouter();
        const xjLine = ref("eChartXjLine" + Date.now() + Math.random())
        const sbtj = ref("eChartSbtj" + Date.now() + Math.random())
        const state = reactive<stateType>({
            workNum: '',
            beImgs: [],
            afImgs: [],
            pageIndex: 1,
            pageSize: 5,
            totalSize: 0,
            tableData: [],
            unusualData: [],
            unchecked: null,
            unusual: null,
            chartStatus: true,
            period: 'month',
            uncheckedList: [],
            abnormalList: [],
            workTypeList: [
                { id: 1, name: '日常任务' },
                { id: 2, name: '周期任务' }
            ],
            departmentList: [],
            timeType: [
                { id: 1, name: '分' },
                { id: 2, name: '小时' },
                { id: 3, name: '日' },
                { id: 4, name: '月' },
                { id: 5, name: '年' }
            ],
            classGroupList: [],
            quotaList: [],
            inspectPointAllList: [],
            dialogVisible: false
        });
        const inspectRecordDialogRef = ref();
        const inspectListRef = ref();
        const unusualListRef = ref();
        interface User {
            name: string;
            startTime: string;
            endTime: string;
            info: string;
        }

        // 页面载入时执行方法
        onMounted(() => {
            getInspectRecord();
            getListExcepOrder();
            getDayData();
            getDepartmentData();
            initXjLine()
            initSbtj()
        });
        const toIndex =()=>{
          router.push({
            path: 'inspectIndex',
            query: {

            }
          })
        }
        const checkAllRecord =()=>{
          inspectListRef.value.departmentList = state.departmentList
          inspectListRef.value.showInspectList()
        }
        const checkAllList =()=>{
          unusualListRef.value.showUnusualList()
        }
        const acceptance =(row:object)=>{
          ElMessageBox.confirm(
              '确认完成验收并结束工单？',
              '完成验收',
              {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
              }
          )
              .then(async() => {
                const res = await inspectIndexApi().acceptedStatus({id: row.id});
                if (res.data.code === '200') {
                  getListExcepOrder();
                  ElMessage({
                    type: 'success',
                    message: '验收成功',
                  })
                } else {
                  ElMessage({
                    type: 'warning',
                    message: '验收失败'
                  });
                }
              })
              .catch(() => {
                ElMessage({
                  type: 'info',
                  message: '取消验收',
                })
              })
        }
        const remark =(row:object)=>{
          ElMessageBox.confirm(
              '确认是否标记误报？',
              '标记误报',
              {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
              }
          )
              .then(async() => {
                const res = await inspectIndexApi().falseAlarmStatus({id: row.id});
                if (res.data.code === '200') {
                  getListExcepOrder();
                  ElMessage({
                    type: 'success',
                    message: '标记误报成功',
                  })
                } else {
                  ElMessage({
                    type: 'warning',
                    message: '标记误报失败'
                  });
                }
              })
              .catch(() => {
                ElMessage({
                  type: 'info',
                  message: '取消标记',
                })
              })
        }
        const openPhoto = async(row)=>{
          state.dialogVisible = true
          state.workNum = row.workOrderNum
          const res = await inspectIndexApi().getListImages({id: row.id});
          if (res.data.code === '200') {
              state.beImgs = res.data.data.beforeImages
              state.afImgs = res.data.data.afterImages
          } else {
            ElMessage({
              type: 'warning',
              message: '图片获取失败'
            });
          }
        }
        type EChartsOption = echarts.EChartsOption
        const initXjLine =()=>{
          let dom = document.getElementById(xjLine.value);
          let myChart = echarts.init(dom);

          let option: EChartsOption;

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

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

          option && myChart.setOption(option);
          window.addEventListener("resize",function (){
            myChart.resize();
          });
        }
        // 分页获取
        const getInspectRecord = async () => {
            const data = { pageSize: state.pageSize, pageIndex: state.pageIndex };
            let res = await inspectRecordApi().getInspectRecordByIndex(data);
            if (res.data.code === '200') {
                state.tableData = res.data.data.records;
                state.totalSize = res.data.data.total;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };
        // 分页获取
        const getListExcepOrder = async () => {
          const data = { pageSize: 4, pageIndex: state.pageIndex };
          let res = await inspectIndexApi().getListExcepOrderByPage(data);
          if (res.data.code === '200') {
            state.unusualData = JSON.parse(JSON.stringify(res.data.data.records))
          } else {
            ElMessage({
              type: 'warning',
              message: res.data.msg
            });
          }
        };
        //获取部门
        const getDepartmentData = async () => {
            let res = await departmentApi().getDepartmentList();
            if (res.data.code === '200') {
                state.departmentList = res.data.data;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        //获取当日数据
        const getDayData = async () => {
            let res = await inspectRecordApi().getDayRecord();
            if (res.data.code === '200') {
                state.unchecked = res.data.data.noCheckTaskCount;
                state.unusual = res.data.data.abnormalTaskCount;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const handleSizeChange = (val: number) => {
            state.pageSize = val;
            getInspectRecord();
        };
        const handleCurrentChange = (val: number) => {
            state.pageIndex = val;
            getInspectRecord();
        };

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

        const toOverTime = (id) => {
            console.log(state.uncheckedList, 'list');
            router.push({
                path: 'inspectRecord',
                query: {
                    id: id,
                }
            });
        };
        const toDetails = (type: string, item) => {
            inspectRecordDialogRef.value.showInspectRecordDialog(type, item, state.workTypeList, state.departmentList, state.timeType, state.classGroupList, state.quotaList, state.inspectPointAllList);
        };
        return {
            View,
            Edit,
            Delete,
            Refresh,
            xjLine,
            sbtj,
            Plus,
            router,
            inspectRecordDialogRef,
            inspectListRef,
            unusualListRef,
            toIndex,
            checkAllRecord,
            checkAllList,
            acceptance,
            remark,
            openPhoto,
            toLine,
            toOverTime,
            toDetails,
            handleSizeChange,
            handleCurrentChange,
            ...toRefs(state)
        };
    }
};
</script>

<style scoped lang="scss">
$homeNavLengh: 8;
@media screen and (min-width: 1366px) {

}
@media screen and (min-width: 1200px) and (max-width: 1366px) {

}
@media screen and (max-width: 1200px) {

}

.home-container {
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
    padding: 20px;
    background: url('../../../../assets/spwbg.png') no-repeat center;
    .full{
      position:fixed;
      background: rgba(0,0,0,.2);
      border: 1px solid rgba(54, 252, 252, .6);
      border-radius: 17px 1px 1px 17px;
      box-shadow: 3px 3px 12px rgba(0,0,0,.2);
      height: 32px;
      line-height: 30px;
      top: 10px;
      right: 2px;
      display: flex;
      justify-content: center;
      backdrop-filter: blur(2px);
      z-index: 99999;
    }
    .topChart{
      width: 100%;
      height: calc((100% - 40px) / 3);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20px;
      &:last-of-type{
        margin-bottom: 0;
      }

      .chart-item{
        width: calc(60% - 20px);
        height: 100%;
        margin-right: 20px;
        position: relative;
        background: #fff;
        padding: 20px;
        border-radius: 4px;
        background: rgba(0, 61, 121, 0.2);
        backdrop-filter: blur(5px);
        z-index: 2;

        &:last-of-type{
          width: 40%;
          margin-right: 0;
          position: relative;
          z-index: 1;
        }
        .item-bg{
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
        }
        .chart-tit{
          width: 100%;
          height: 15%;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          .tit{
            font-size: 1.33rem;
            font-weight: bolder;
            color: #11FEEE;
          }
          ::v-deep(.el-popper){
            background-color: rgba(10,31,92,1);
            border: 1px solid rgba(17,254,238,.4);
            color: #11FEEE;
            .el-cascader-node{
              .in-active-path{
                background: #0049af;
              }
              &:hover{
                background: #0049af;
              }
            }
            .el-cascader-node__label{
              color: #11FEEE;
            }
            .el-icon{
              color: #11FEEE;
            }
            .el-select-dropdown__item{
              color: #11FEEE;
            }
            .el-select-dropdown__item.hover{
              background: #0049af;
            }
          }
          ::v-deep(.el-popper__arrow){
            &::before{
              background-color: rgba(10,31,92,.6) !important;
              border: 1px solid rgba(17,254,238,.4);
            }
          }
          ::v-deep(.el-input__wrapper){
            box-shadow: none;
            border: 1px solid rgba(17,254,238,.2);
            background: rgba(10,31,92,.6) !important;
            height: 1.5rem;
            color: #11FEEE;

            input{
              font-size: 0.8rem;
              color: #11FEEE;
            }
            .el-icon{
              color: #11FEEE;
            }
          }
          .filter-part{
            display: flex;
            align-items: center;
            justify-content: right;
            width: 20%;
            .el-switch{
              width: 100% !important;
              :deep(.el-switch__core){
                width: 100% !important;
              }
            }
          }
        }
        .chart{
          width: 100%;
          height: 85%;
          .el-table {
            color: #11FEEE !important;
            background-color: rgba(0,0,0,0) !important;
            :deep(thead){
              color: #11FEEE !important;
            }
            :deep(tr){
              background-color: rgba(0,0,0,0) !important;
              .el-table__cell{
                background-color: rgba(0,0,0,0) !important;
              }
            }
          }
        }
        .el-radio-group{
          width: 20%;
          display: flex;
          flex-flow: column nowrap;
          align-items: flex-start;
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-30%);

          .el-radio{
            width: 100%;
            margin-bottom: 4px;
          }
        }
        :deep(.active-ring-info){
          .active-ring-name{
            font-size: 1.5rem !important;
            text-align: center;
          }
        }
      }
    }
    .midChart{
      height: calc((100% - 40px) / 3);
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20px;
      padding: 20px;
      border-radius: 4px;
      background: rgba(0, 61, 121, 0.2);
      backdrop-filter: blur(5px);
      position: relative;
      z-index: 3;
      .item-bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }
      .chart-item{
        width: 100%;
        height: 100%;
        padding: 0 0 20px;

        .chart-tit{
          width: 100%;
          height: 15%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .tit{
            font-size: 20px;
            font-weight: bolder;
            color: #11FEEE;
          }
          :deep(.el-switch__core){
            width: 120px;
          }
          .top-info {
            display: flex;
            font-size: 14px;
            align-items: center;
            background: #ffeb87;
            padding: 4px 10px;
            margin-left: 20px;
            border-radius: 2px;
            border: 1px solid #ffae00;
            & > div {
              vertical-align: middle;
              white-space: nowrap;
              height: 100%;
              span {
                color: #f3001e;
                margin: 0 4px;
                font-size: 18px;
                cursor: pointer;
                font-weight: bolder;

                &:hover{
                  text-decoration: underline;
                }
              }
            }
          }
          .checkAll{
            cursor: pointer;
            color: #11feee;
            &:hover{
              color: #409eff
            }
          }
        }

        .chart{
          width: 100%;
          height: 85%;
          margin-top: 10px;

          .el-table{
            height: 100% !important;
            color: #11FEEE !important;
            background-color: rgba(0,0,0,0) !important;
            :deep(thead){
              color: #11FEEE !important;
              background-color: #092846 !important
            }
            :deep(tr){
              background-color: rgba(0,0,0,0) !important;
              .el-table__cell{
                background-color: rgba(0,0,0,0) !important;
              }
              .el-table-fixed-column--right{
                background-color: #092846 !important
              }
            }
            :deep(.el-table__inner-wrapper){
              height: 100% !important;
              .el-table__header-wrapper {
                height: 20% !important;
                .el-table__header{
                  height: 100% !important;
                  th{
                    height: 100% !important;
                    padding: 0 0 !important;
                    .cell{
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    }
                  }
                }
              }
              .el-table__body-wrapper {
                height: 80% !important;
                .el-scrollbar__view{
                  height: 100% !important;
                  .el-table__body{
                    height: 100% !important;
                    tbody{
                      height: 100% !important;
                      .el-table__row{
                        height: 25% !important;
                        td{
                          height: 25% !important;
                          padding: 0 0 !important;
                          .left-info{
                            display: flex;
                            align-items: center;
                          }
                          .cell{
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                          }
                          .el-button{
                            padding: 0 !important;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }

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

            .demo-pagination-block + .demo-pagination-block {
              margin-top: 10px;
            }
            .demo-pagination-block .demonstration {
              margin-bottom: 16px;
            }
          }
        }
      }
    }

    .el-row {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
        .grid-content {
            align-items: center;
            min-height: 36px;
        }
    }
}

.el-input {
    width: 100% !important;
}
.el-date-editor::v-deep {
    width: 100%;
}
.el-select {
    width: 100%;
}
:deep(.el-textarea.is-disabled .el-textarea__inner) {
    background-color: var(--el-card-bg-color);
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
:deep(.el-input.is-disabled .el-input__inner) {
    color: var(--el-input-text-color, var(--el-text-color-regular));
}
:deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: var(--el-card-bg-color);
}
</style>

 src/views/intellectInspect/inspectIndex/index.vue

@@ -1,30 +1,22 @@
<template>
    <div class="home-container" :class="isFull==true?'container':''" id="bigScreen">
    <div class="home-container">
      <div class="full">
        <el-button v-if="isFull==false" type="text" style="height: 34px" @click="toFullscreen">
        <el-button type="text" style="height: 34px" @click="toFullscreen">
          <el-icon style="vertical-align: middle">
            <FullScreen />
          </el-icon>
          <span style="vertical-align: middle">全屏</span>
        </el-button>
        <el-button v-else type="text" style="height: 34px" @click="toFullscreen">
          <el-icon style="vertical-align: middle">
            <Close />
          </el-icon>
          <span style="vertical-align: middle">退出全屏</span>
        </el-button>
      </div>
        <div style="height: 100%">
          <div class="topChart">
            <div class="chart-item">
              <dv-border-box10 v-if="isFull==true" class="item-bg" :color="['rgba(8, 109, 209, 0.2)']"></dv-border-box10>
              <div class="chart-tit">
                <span class="tit">年度巡检异常趋势</span>
              </div>
              <div class="chart" :id="xjLine"></div>
            </div>
            <div class="chart-item">
              <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
              <div class="chart-tit">
                <span class="tit">异常区域设备统计</span>
                <div class="filter-part">
@@ -47,7 +39,6 @@
            </div>
          </div>
            <div class="midChart">
              <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
              <div class="chart-item">
                <div class="chart-tit">
                  <div style="display: flex;align-items: center">
@@ -109,7 +100,6 @@
              </div>
            </div>
          <div class="midChart">
            <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10>
            <div class="chart-item">
              <div class="chart-tit">
                  <span class="tit">巡检异常清单</span>
@@ -235,8 +225,6 @@
    inspectPointAllList: [];
    chartStatus:boolean;
    period: string;
    isFull:boolean;
    themeColor:string;
    dialogVisible:boolean;
    workNum: string;
    beImgs: [];
@@ -258,13 +246,11 @@
        const xjLine = ref("eChartXjLine" + Date.now() + Math.random())
        const sbtj = ref("eChartSbtj" + Date.now() + Math.random())
        const state = reactive<stateType>({
            isFull: false,
            themeColor: '#333',
            workNum: '',
            beImgs: [],
            afImgs: [],
            pageIndex: 1,
            pageSize: 5,
            pageSize: 10,
            totalSize: 0,
            tableData: [],
            unusualData: [],
@@ -311,21 +297,12 @@
            initSbtj()
        });
        const toFullscreen =()=>{
          // console.log(state.isFull,'quanp',state.themeColor)
          const element = document.getElementById('bigScreen')
          if (!screenfull.isEnabled) {
            ElMessage.warning('暂不不支持全屏');
            return false;
          }
          screenfull.toggle(element);
          state.isFull = !state.isFull
          if(state.isFull == true){
            state.themeColor = '#11FEEE'
          }else{
            state.themeColor = '#333'
          }
          initXjLine()
          initSbtj()
          router.push({
            path: 'inspectFullScreen',
            query: {

            }
          })
        }
        const checkAllRecord =()=>{
          inspectListRef.value.departmentList = state.departmentList
@@ -433,7 +410,7 @@
              padding:[1,1,1,0],
              textStyle: {
                // 设置默认的文字颜色
                color: state.themeColor
                color: '#333'
              },
            },
            grid: {
@@ -453,7 +430,7 @@
              boundaryGap: false,
              data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'],
              axisLabel: {
                color: state.themeColor
                color: '#333'
              }
            },
            yAxis: {
@@ -532,7 +509,7 @@
              top: 'center',
              textStyle: {
                // 设置默认的文字颜色
                color: state.themeColor,
                color: '#333',
                // fontSize: 12
              },
              itemStyle: {
@@ -555,7 +532,7 @@
                  position: 'outside',
                  overflow: 'truncate',
                  borderWidth: 0,
                  color: state.themeColor
                  color: '#333'
                },
                labelLine: {
                  show: true,    // 显示指示线
@@ -604,7 +581,7 @@
        };
        // 分页获取
        const getListExcepOrder = async () => {
          const data = { pageSize: 4, pageIndex: state.pageIndex };
          const data = { pageSize: 10, pageIndex: state.pageIndex };
          let res = await inspectIndexApi().getListExcepOrderByPage(data);
          if (res.data.code === '200') {
            state.unusualData = JSON.parse(JSON.stringify(res.data.data.records))
@@ -701,7 +678,7 @@
            ...toRefs(state)
        };
    }
};
}
</script>

<style scoped lang="scss">
@@ -720,6 +697,7 @@
    height: calc(100vh - 144px);
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: scroll;
    .full{
      position:fixed;
      height: 34px;
@@ -730,7 +708,7 @@
    }
    .topChart{
      width: 100%;
      height: calc((100% - 40px) / 3);
      height: 300px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
@@ -802,7 +780,6 @@
      }
    }
    .midChart{
      height: calc((100% - 40px) / 3);
      width: 100%;
      background: #fff;
      display: flex;
@@ -867,60 +844,10 @@
          width: 100%;
          height: 85%;
          margin-top: 10px;

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

          .pageBtn {
            position: absolute;
            bottom: 15px;
@@ -954,212 +881,7 @@
        }
    }
}
.container{
  padding: 20px;
  background: url('../../../assets/spwbg.png') no-repeat center;

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

          input{
            font-size: 0.8rem;
            color: #11FEEE;
          }
          .el-icon{
            color: #11FEEE;
          }
        }
      }
      .chart{
        .el-table {
          color: #11FEEE !important;
          background-color: rgba(0,0,0,0) !important;
          :deep(thead){
            color: #11FEEE !important;
          }
          :deep(tr){
            background-color: rgba(0,0,0,0) !important;
            .el-table__cell{
              background-color: rgba(0,0,0,0) !important;
            }
          }
        }
      }
    }
  }
  .midChart{
    border-radius: 4px;
    background: rgba(0, 61, 121, 0.2);
    backdrop-filter: blur(5px);
    position: relative;
    z-index: 3;
    .item-bg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .tit{
      color: #11FEEE;
    }
    .checkAll{
      cursor: pointer;
      color: #11feee;
      &:hover{
        color: #409eff
      }
    }
    .el-table {
      color: #11FEEE !important;
      background-color: rgba(0,0,0,0) !important;
      :deep(thead){
        color: #11FEEE !important;
        background-color: #092846 !important
      }
      :deep(tr){
        background-color: rgba(0,0,0,0) !important;
        .el-table__cell{
          background-color: rgba(0,0,0,0) !important;
        }
        .el-table-fixed-column--right{
          background-color: #092846 !important
        }
      }
    }

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

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

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

@@ -1,11 +1,46 @@
<template>
  <el-dialog v-model="videoDetailDialog" title="动火作业编号00001 实时监测详情" width="80%" center>
    <div style="margin-bottom: 20px">
      <el-button type="warning">人工录入警报信息</el-button>
      <el-button type="warning" @click="fillDialog = true">人工录入警报信息</el-button>
    </div>
    <div class="info">
<!--      <video class="video-cont" autoplay src="https://www.bilibili.com/video/BV1UM411s7Ey/?vd_source=7700e61a97bad6ca1f7c0ecb9768d682" controls></video>-->
      <iframe class="video-cont" src="http://36.108.169.10:8088/808gps/open/player/video.html?lang=zh&devIdno=21125705363&&account=gtxh&password=000000"></iframe>
      <div class="left-info">
        <iframe class="video-cont" src="http://36.108.169.10:8088/808gps/open/player/video.html?lang=zh&devIdno=21125705363&&account=gtxh&password=000000"></iframe>
        <div class="chart-area">
          <div class="chart-item">
            <div class="top-tit">
              <div class="tit">基础指标数据（可燃气体浓度、氧气、一氧化碳、硫化氢按需展示）：</div>
              <el-button type="warning" @click="reportDialog = true">监管异常填报</el-button>
            </div>
            <el-table :data="basicData" style="width: 100%" border :header-cell-style="{ background: '#fafafa' }">
              <el-table-column property="type" label="类别" align="center"/>
              <el-table-column property="time" label="填报时间" align="center"/>
              <el-table-column property="name" label="填报人" align="center"/>
              <el-table-column property="number" label="值" align="center"/>
              <el-table-column property="isGood" label="是否合格" align="center">
                <template #default="scope">
                  <span>{{scope.row.isGood == 0?'合格':'不合格'}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="chart-item">
            <div class="top-tit"><div class="tit">现场检查代码：</div></div>
            <el-table :data="checkData" style="width: 100%" border :header-cell-style="{ background: '#fafafa' }">
              <el-table-column property="name" label="现在检查人" align="center"/>
              <el-table-column property="time" label="检查填报时间" align="center"/>
              <el-table-column property="content" label="检查内容" align="center"/>
              <el-table-column property="info" label="描述" align="center"/>
              <el-table-column property="isGood" label="是否合格" align="center">
                <template #default="scope">
                  <span>{{scope.row.isGood == 0?'合格':'不合格'}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="right-info">
        <div class="info-item">
          <div class="info-tit">
@@ -39,7 +74,50 @@
        </div>
      </div>
    </div>

    <el-dialog v-model="fillDialog" title="作业全过程监测风险警报信息发现录入" width="50%" center>
      <el-form ref="reviewFormRef" :model="reviewForm" :rules="reviewRules" label-width="170px">
        <el-form-item label="风险描述：" prop="describe">
          <el-input
              v-model="reviewForm.describe"
              :autosize="{ minRows: 4, maxRows: 10 }"
              type="textarea"
              prop="desc"
              placeholder="请输入风险描述信息"
          />
        </el-form-item>
        <el-form-item label="是否已通知现场负责人：" prop="isInform">
          <el-radio-group v-model="reviewForm.isInform">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="fillDialog = false">取消</el-button>
            <el-button type="primary">确认</el-button>
          </span>
      </template>
    </el-dialog>
    <el-dialog v-model="reportDialog" title="基础指标数据作业过程中监管异常填报" width="50%" center>
      <div class="tip">
        提示：动火作业被测可燃气体或蒸气浓度不应大于10%LEL。您在现场人员未发现或未如实填报时，才需要填写此项。
      </div>
      <el-form ref="reportFormRef" :model="reportForm" :rules="reportRules" label-width="120px">
        <el-form-item label="可燃气体浓度：" prop="problem">
          <el-input
              v-model="reportForm.problem"
              prop="problem"
          />
        </el-form-item>
      </el-form>
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="reportDialog = false">取消</el-button>
            <el-button type="primary">确认</el-button>
          </span>
      </template>
    </el-dialog>
  </el-dialog>
</template>

@@ -56,6 +134,12 @@

    interface stateType {
    videoDetailDialog:boolean
    basicData: Array<any>
    checkData: Array<any>
    fillDialog: boolean
    reviewForm: object
    reportForm: object
    reportDialog: boolean
    }
    export default defineComponent({
        name: 'videoDetail',
@@ -65,7 +149,50 @@
            const userInfo = useUserInfo()
            const { userInfos } = storeToRefs(userInfo);
      const state = reactive<stateType>({
        videoDetailDialog: false
        videoDetailDialog: false,
        basicData:[
          {
            type: '可燃气体浓度',
            time: '2023-03-20 09:09',
            name: '李羽飞（动火分析人）',
            number: '3%LEL',
            isGood: 0
          },
          {
            type: '可燃气体浓度',
            time: '2023-03-20 09:09',
            name: '李羽飞（动火分析人）',
            number: '2.9%LEL',
            isGood: 0
          }
        ],
        checkData:[
          {
            name: '杨冬冬',
            time: '2023-03-20 09:09',
            content: '防火面罩不少于2个',
            info: '2个',
            isGood: 0
          },
          {
            name: '杨冬冬',
            time: '2023-03-20 09:09',
            content: '电源插座是否防爆',
            info: '是',
            isGood: 0
          },
          {
            name: '杨冬冬',
            time: '2023-03-20 09:09',
            content: '除动火人和监护人有无其他人员在场',
            info: '有信息化人员',
            isGood: 1
          }
        ],
        fillDialog: false,
        reportDialog: false,
        reviewForm: {},
        reportForm: {}
      })
      const openDialog = ()=>{
        state.videoDetailDialog = true
@@ -85,10 +212,28 @@
    align-items: flex-start;
    justify-content: space-between;

    .video-cont{
    .left-info{
      width: calc(70% - 20px);
      height: 60vh;
      margin-right: 20px;
      .video-cont{
        width: 100%;
        min-height: 500px;
      }
      .chart-area{
        width: 100%;
        background: #fafafa;
        padding: 20px;
        margin-top: 20px;
        .chart-item{
          margin-bottom: 20px;
          .top-tit{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
          }
        }
      }
    }
    .right-info{
      width: 30%;
@@ -124,4 +269,7 @@
      }
    }
  }
  .tip{
    margin-bottom: 20px;
  }
</style>