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

马宇豪

2023-03-20 5f114549b05ad3334ca911e84e9698cade0995ca

 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>