currency-data-visualization/src/views/engineeringScreen/index.vue

<template>
  <div class="module-container">
    <el-row>
      <el-col
        :span="24"
        class="filter-container"
      >
        <el-select
          v-model="project"
          placeholder="请选择"
          size="small"
          clearable
          @change="filterCharts"
        >
          <el-option
            label="全部项目"
            value=""
          />
          <el-option
            v-for="item in projectList"
            :key="item.projectId"
            :label="item.projectName"
            :value="item.projectId"
          />
        </el-select>
      </el-col>
    </el-row>
    <el-row
      :gutter="15"
      class="content-container"
    >
      <el-col :span="8">
        <el-row class="half-container">
          <dataContainer
            title="设备状态"
            :tip-content="(project ? filterForm.projectName : '所有项目') + '的设备状态统计'"
          >
            <div
              id="deviceStatus"
              class="charts-container"
            />
          </dataContainer>
        </el-row>
        <el-row class="half-container">
          <dataContainer
            title="设备类型"
            :tip-content="(project ? filterForm.projectName : '所有项目') + '的设备类型统计'"
          >
            <div
              id="deviceType"
              class="charts-container"
            />
          </dataContainer>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row class="two-third-container">
          <dataContainer title="基础数据">
            <div
              v-if="filterForm.projectId"
              class="base-project-container"
            >
              <div class="project-info">
                <el-image
                  :src="projectOption.src"
                  fit="cover"
                  style="width: 50%; height: 15vh; float: left; margin: 0 10px 10px 0;"
                />
                <span class="project-info-title">{{ projectOption.title }}</span>
                <br>
                <span class="project-info-text">{{ projectOption.info }}</span>
              </div>
            </div>
            <div
              v-else
              class="base-all-project"
            />
            <div class="base-info-container">
              <div
                class="base-info-card"
                @click="getChartData(1)"
              >
                <el-tooltip
                  placement="top"
                  popper-class="tooltip-dark"
                  effect="dark"
                >
                  <template #content>
                    <span class="tooltip-title">在管设备：</span>{{ (project ? filterForm.projectName : '所有项目') + '的设备总数' }}
                  </template>
                  <div class="base-info-title base-info-icon1">
                    在管设备
                  </div>
                </el-tooltip>
                <div class="base-info-data">
                  {{ baseInfoOption.deviceCount }}
                </div>
                <div class="base-info-tip">
                  在管项目
                  <span>{{ baseInfoOption.projectCount }}</span>
                  个&nbsp;&nbsp;&nbsp;&nbsp;在管机房
                  <span>{{ baseInfoOption.devicePartrolCount }}</span>
                  个
                </div>
              </div>
              <div
                class="base-info-card"
                @click="getChartData(2)"
              >
                <el-tooltip
                  placement="top"
                  popper-class="tooltip-dark"
                  effect="dark"
                >
                  <template #content>
                    <span class="tooltip-title">设备完好率：</span>维修中、故障中定义为设备损坏状态，其他状态定义为完好状态
                  </template>
                  <div class="base-info-title base-info-icon2">
                    设备完好率
                  </div>
                </el-tooltip>
                <div class="base-info-data">
                  {{ baseInfoOption.intactRate }}%
                </div>
              </div>
              <div
                class="base-info-card"
                @click="getChartData(3)"
              >
                <el-tooltip
                  placement="top"
                  popper-class="tooltip-dark"
                  effect="dark"
                >
                  <template #content>
                    <span class="tooltip-title">巡检完成率：</span>{{ '所有项目' + getYearAndMonth() + '巡检完成率（所有项目的任务完成数总计*100%/任务总数总计）' }}
                  </template>
                  <div class="base-info-title base-info-icon3">
                    巡检完成率
                  </div>
                </el-tooltip>
                <div class="base-info-data">
                  {{ baseInfoOption.patrolFinishRate }}%
                </div>
              </div>
              <div
                class="base-info-card"
                @click="getChartData(4)"
              >
                <el-tooltip
                  placement="top"
                  popper-class="tooltip-dark"
                  effect="dark"
                >
                  <template #content>
                    <span class="tooltip-title">维保完成率：</span>{{ '所有项目' + getYearAndMonth() + '维保完成率（所有项目的任务完成数总计*100%/任务总数总计）' }}
                  </template>
                  <div class="base-info-title base-info-icon4">
                    维保完成率
                  </div>
                </el-tooltip>
                <div class="base-info-data">
                  {{ baseInfoOption.maintainFinishRatehRate }}%
                </div>
              </div>
            </div>
          </dataContainer>
        </el-row>
        <el-row class="one-third-container">
          <dataContainer
            title="巡检任务"
            :tip-content="(project ? filterForm.projectName : '所有项目') + getYearAndMonth() + '已生成巡检任务统计'"
          >
            <div
              id="patrolTask"
              class="charts-container"
            />
          </dataContainer>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row class="one-third-container">
          <dataContainer
            title="设备大检预警信息"
            :tip-content="(project ? filterForm.projectName : '所有项目') + getYearAndMonth() + '预警中的大检信息'"
          >
            <div class="warning-info-box">
              <div
                class="warning-info-move-box"
                :style="{
                  animation: warningInfoList.length <= 2 ? 'none' : '',
                  'animation-duration': (warningInfoList.length - 2) + 's'
                }"
              >
                <div
                  v-for="(item ,index) in warningInfoList"
                  :key="index"
                  class="warning-info-card"
                >
                  <div class="warning-info-data">
                    <div class="warning-info-data-title">
                      <span>{{ item.projectName }}：</span>
                      {{ item.addressName }}机房&nbsp;&nbsp;{{ item.sysName }}系统&nbsp;&nbsp;{{ item.deviceName }}设备
                    </div>
                    <div class="warning-info-data-content">
                      {{ item.warningContent }}
                    </div>
                  </div>
                  <div class="warning-info-date">
                    <div class="warning-info-date-label">
                      预警日期：{{ item.warningTime }}
                    </div>
                    <div class="warning-info-date-label">
                      到期日期：{{ item.inspectionTime }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </dataContainer>
        </el-row>
        <el-row class="one-third-container">
          <dataContainer
            title="设备大检任务"
            :tip-content="(project ? filterForm.projectName : '所有项目') + '已生成大检任务统计'"
          >
            <div
              id="deviceTask"
              class="charts-container"
            />
          </dataContainer>
        </el-row>
        <el-row class="one-third-container">
          <dataContainer
            title="维保任务"
            :tip-content="(project ? filterForm.projectName : '所有项目') + getYearAndMonth() + '已生成维保任务统计'"
          >
            <div
              id="maintenanceTask"
              class="charts-container"
            />
          </dataContainer>
        </el-row>
      </el-col>
    </el-row>
    <el-drawer
      v-model="tableOption.display"
      :title="tableOption.title"
      size="90%"
      custom-class="table-dialog"
    >
      <div class="drawer-body">
        <el-table
          v-loading="tableOption.loading"
          :data="tableOption.data"
          :height="resizeHeight - 190"
          stripe
          border
          fit
        >
          <el-table-column
            v-if="tableOption.type == 'deviceStatus' || tableOption.type == 'deviceType'"
            prop="deviceName"
            label="设备名称"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'deviceStatus' || tableOption.type == 'deviceType'"
            prop="deviceCode"
            label="设备编码"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'deviceStatus' || tableOption.type == 'deviceType'"
            prop="deviceState"
            label="当前状态"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'deviceStatus' || tableOption.type == 'deviceType'"
            prop="sysName"
            label="所属系统"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'deviceStatus' || tableOption.type == 'deviceType'"
            prop="devicePartrolName"
            label="所属机房"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'deviceStatus' || tableOption.type == 'deviceType'"
            prop="levelName"
            label="系统级别"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'deviceStatus' || tableOption.type == 'deviceType'"
            prop="isDisable"
            label="是否报废"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'deviceStatus' || tableOption.type == 'deviceType'"
            prop="fmDeviceType"
            label="设备/设施"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'deviceStatus' || tableOption.type == 'deviceType'"
            prop="buildingLocations"
            label="设备地址"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'deviceStatus' || tableOption.type == 'deviceType'"
            prop="isImportant"
            label="是否重点设备"
            align="center"
          >
            <template #default="scope">
              {{ scope.row.isImportant ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableOption.type == 'patrolMaintenanceTask'"
            prop="projectName"
            label="所属项目"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'patrolMaintenanceTask'"
            prop="addressName"
            label="机房"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'patrolMaintenanceTask'"
            prop="sysName"
            label="所属系统"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'patrolMaintenanceTask'"
            prop="patrolRuleName"
            label="计划名称"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'patrolMaintenanceTask'"
            prop="userName"
            label="巡检人员"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'patrolMaintenanceTask'"
            prop="fullStartDate"
            label="开始时间"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'patrolMaintenanceTask'"
            prop="fullEndDate"
            label="结束时间"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'patrolMaintenanceTask'"
            prop="submitDate"
            label="提交时间"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'patrolMaintenanceTask'"
            prop="taskStateName"
            label="巡检状态"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'patrolMaintenanceTask'"
            prop="handleStateName"
            label="审核状态"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'patrolMaintenanceTask'"
            prop="workingTime"
            label="工时（分钟）"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'patrolMaintenanceTask'"
            prop="serverTime"
            label="同步时间"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'deviceTask'"
            prop="projectName"
            label="所属项目"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'deviceTask'"
            prop="addressName"
            label="机房名称"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'deviceTask'"
            prop="sysName"
            label="系统名称"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'deviceTask'"
            prop="deviceName"
            label="设备名称"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'deviceTask'"
            prop="deviceCode"
            label="设备编码"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'deviceTask'"
            prop="warningStatusName"
            label="预警状态"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'deviceTask'"
            prop="useDate"
            label="投入日期"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'deviceTask'"
            prop="inspectionInterial"
            label="大检间隔"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'deviceTask'"
            prop="warningTime"
            label="预警时间"
            align="center"
          />
          <el-table-column
            v-if="tableOption.type == 'deviceTask'"
            prop="detailName"
            label="大检类型"
            align="center"
          />
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="tableOption.total"
          @current-change="handlePageChange"
        />
      </div>
      <div class="drawer-footer">
        <el-button
          size="medium"
          @click="tableOption.display = false"
        >
          取 消
        </el-button>
      </div>
    </el-drawer>
    <el-drawer
      v-model="chartsOption.display"
      :title="chartsOption.title"
      size="90%"
      custom-class="table-dialog"
    >
      <div class="drawer-body">
        <div
          id="chartsContainer"
          class="charts-container"
          style="background-color: #ffffff;"
        />
      </div>
      <div class="drawer-footer">
        <el-button
          size="medium"
          @click="chartsOption.display = false"
        >
          取 消
        </el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import dataContainer from 'comps/dataContainer/index.vue'
import * as echarts from 'echarts'
import {
  getProjectDictionary
} from 'api/dictionary'
import {
  getProjectDataOfEngineering,
  getDeviceStatusDataOfEngineering,
  getDeviceStatusListOfEngineering,
  getDeviceTypeDataOfEngineering,
  getBaseInfoDataOfEngineering,
  getBaseInfoRatioOfEngineering,
  getBaseInfoChartsDataOfEngineering,
  getBaseInfoRatioChartsDataOfEngineering,
  getPatrolTaskDataOfEngineering,
  getTaskListOfEngineering,
  getWarningInfoDataOfEngineering,
  getDeviceTaskDataOfEngineering,
  getDeviceTaskListOfEngineering,
  getMaintenanceTaskDataOfEngineering
} from 'api/engineering'
export default {
  name: 'EngineeringScreen',
  components: {
    dataContainer
  },
  props: {
    resizeHeight: {
      type: Number,
      default: 500
    }
  },
  data () {
    return {
      project: '',
      projectList: [],
      filterForm: {
        companyId: localStorage.companyId || 281,
        areaId: '',
        projectId: '',
        projectName: ''
      },
      colorList: ['#87c9fa', '#b7e9ff', '#007afc', '#4aa1ff', '#71b5ff', '#26baff', '#e8f5ff', '#299ff6'],
      deviceStatusOption: [
        { name: '维修中', key: 'repairing', code: 2 },
        { name: '关机中', key: 'shutdown', code: 4 },
        { name: '维保中', key: 'maintenance', code: 3 },
        { name: '故障中', key: 'fault', code: 6 },
        { name: '停机中', key: 'stopDown', code: 7 },
        { name: '运行中', key: 'running', code: 1 }
      ],
      deviceTypeOption: [],
      projectOption: {
        src: '',
        title: '',
        info: ''
      },
      baseInfoOption: {
        deviceCount: '',
        projectCount: '',
        devicePartrolCount: '',
        intactRate: '',
        patrolFinishRate: '',
        maintainFinishRatehRate: ''
      },
      patrolTaskOption: [
        { name: '已完成', key: 'finished', code: 1 },
        { name: '待完成', key: 'unfinished', code: 0 },
        { name: '已销单', key: 'cancel', code: 5 },
        { name: '已过期', key: 'overDue', code: 2 },
        { name: '未派单', key: 'notDeliver', code: 6 },
        { name: '审核关闭', key: 'closed', code: 7 }
      ],
      warningInfoList: [],
      deviceTaskOption: [
        { name: '待处理', key: '0' },
        { name: '已处理', key: '1' },
        { name: '已超期', key: '2' }
      ],
      maintenanceTaskOption: [
        { name: '已完成', key: 'finished', code: 1 },
        { name: '待完成', key: 'unfinished', code: 0 },
        { name: '已销单', key: 'cancel', code: 5 },
        { name: '已过期', key: 'overDue', code: 2 },
        { name: '未派单', key: 'notDeliver', code: 6 },
        { name: '审核关闭', key: 'closed', code: 7 }
      ],
      tableOption: {
        filterForm: {},
        api: '',
        title: '',
        type: '',
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        loading: false,
        display: false,
        data: []
      },
      chartsOption: {
        title: '',
        display: false
      }
    }
  },
  mounted () {
    getProjectDictionary({
      companyId: localStorage.companyId || 281
    }).then(res => {
      if (res.status == 200) {
        this.projectList = res.data
      }
    })
    this.getScreenData()
    setInterval(() => {
      this.getScreenData()
    }, 60000)
    window.addEventListener('resize', this.resizePage)
  },
  methods: {
    //  获取当前年月
    getYearAndMonth () {
      return new Date().getFullYear() + '年' + (new Date().getMonth() + 1) + '月'
    },
    //  选取项目过滤图表
    filterCharts (value) {
      this.filterForm = {
        companyId: localStorage.companyId || 281,
        areaId: '',
        projectId: '',
        projectName: ''
      }
      if (value) {
        const projectOption = this.projectList.find(item => item.projectId == value)
        this.filterForm = {
          companyId: projectOption.companyId,
          areaId: projectOption.areaId,
          projectId: projectOption.projectId,
          projectName: projectOption.projectName
        }
        getProjectDataOfEngineering({
          projectId: this.filterForm.projectId
        }).then(res => {
          if (res.resultCode == 200) {
            this.projectOption = {
              src: res.data.imagePath,
              title: res.data.projectName,
              info: res.data.projectDesc
            }
          }
        })
      }
      this.getScreenData()
    },
    //  获取数据可视化数据
    getScreenData () {
      //  获取设备状态数据
      this.getDeviceStatusData()
      this.getDeviceTypeData()
      this.getBaseInfoData()
      this.getPatrolTaskData()
      this.getWarningInfoData()
      this.getDeviceTaskData()
      this.getMaintenanceTaskData()
    },
    //  获取设备状态数据
    getDeviceStatusData () {
      const that = this
      getDeviceStatusDataOfEngineering(this.filterForm).then(res => {
        if (res.status == 200) {
          const myChart = echarts.init(document.getElementById('deviceStatus'))
          myChart.clear()
          myChart.off('click')
          myChart.off('legendselectchanged')
          myChart.setOption({
            color: this.colorList,
            title: {
              text: '状态总数',
              subtext: res.data.total,
              textStyle: {
                color: '#46AEFD',
                fontSize: 12
              },
              subtextStyle: {
                fontSize: 14,
                color: '#FFFFFF'
              },
              left: 'center',
              top: '34%'
            },
            legend: {
              icon: 'circle',
              bottom: '10',
              orient: 'horizontal',
              itemGap: 20,
              formatter: function (name) {
                return '{nam|' + name + ' }\n{val|' + res.data[that.deviceStatusOption.find(item => item.name == name).key] + '}'
              },
              textStyle: {
                rich: {
                  nam: {
                    padding: [0, 80, 0, 0],
                    align: 'center',
                    lineHeight: 28,
                    color: '#51D0FF'
                  },
                  val: {
                    padding: [0, 80, 0, 0],
                    align: 'center',
                    color: '#FFB17C'
                  }
                }
              }
            },
            series: [
              {
                name: '设备状态',
                type: 'pie',
                radius: ['35%', '50%'],
                center: ['50%', '40%'],
                minAngle: 0.5,
                roseType: 'radius',
                label: {
                  formatter: '{b}: {c}'
                },
                labelLine: {
                  normal: {
                    length: 30,
                    length2: 20
                  }
                },
                itemStyle: {
                  shadowColor: '#4db2ff',
                  shadowBlur: 8
                },
                data: that.deviceStatusOption.map((item, index) => {
                  return {
                    name: item.name,
                    value: res.data[item.key],
                    through: item.through
                  }
                }).sort((a, b) => {
                  return b.value - a.value
                }).map((item, index) => {
                  return {
                    name: item.name,
                    value: item.value,
                    label: {
                      color: item.through ? '#F56C6C' : this.colorList[index]
                    }
                  }
                })
              }
            ]
          })
          myChart.on('click', (params) => {
            this.showDeviceStatusTable(params)
          })
          myChart.on('legendselectchanged', (params) => {
            this.showDeviceStatusTable(params)
            myChart.dispatchAction({
              type: 'legendSelect',
              name: params.name
            })
          })
        }
      })
    },
    //  展示设备状态数据
    showDeviceStatusTable (params) {
      this.tableOption.api = getDeviceStatusListOfEngineering
      this.tableOption.filterForm = {
        deviceState: this.deviceStatusOption.find(item => item.name == params.name).code
      }
      this.tableOption.title = params.name + '设备'
      this.tableOption.type = 'deviceStatus'
      this.tableOption.pageIndex = 1
      this.tableOption.data = []
      this.tableOption.display = true
      this.getTableList()
    },
    //  获取设备类型数据
    getDeviceTypeData () {
      getDeviceTypeDataOfEngineering(this.filterForm).then(res => {
        if (res.status == 200) {
          this.deviceTypeOption = res.data.sysNum
          const myChart = echarts.init(document.getElementById('deviceType'))
          myChart.clear()
          myChart.off('click')
          myChart.off('legendselectchanged')
          myChart.setOption({
            color: this.colorList,
            title: {
              text: '类型总数',
              subtext: res.data.sysNum.reduce((total, item) => {
                return total + parseInt(item.value)
              }, 0),
              textStyle: {
                color: '#46AEFD',
                fontSize: 12
              },
              subtextStyle: {
                fontSize: 14,
                color: '#FFFFFF'
              },
              left: 'center',
              top: '32%'
            },
            legend: {
              icon: 'circle',
              bottom: '10',
              left: 'center',
              orient: 'horizontal',
              itemGap: 20,
              formatter: function (name) {
                return '{nam|' + name + ' }\n{val|' + res.data.sysNum.find(item => item.name == name).value + '}'
              },
              textStyle: {
                rich: {
                  nam: {
                    padding: [0, 80, 0, 0],
                    align: 'center',
                    lineHeight: 28,
                    color: '#51D0FF'
                  },
                  val: {
                    padding: [0, 80, 0, 0],
                    align: 'center',
                    color: '#FFB17C'
                  }
                }
              }
            },
            series: [
              {
                name: '设备类型',
                type: 'pie',
                radius: ['32%', '45%'],
                center: ['50%', '38%'],
                minAngle: 0.5,
                roseType: 'radius',
                label: {
                  formatter: '{b}: {c}'
                },
                labelLine: {
                  normal: {
                    length: 30,
                    length2: 20
                  }
                },
                itemStyle: {
                  shadowColor: '#4db2ff',
                  shadowBlur: 8
                },
                data: res.data.sysNum.map((item, index) => {
                  return {
                    name: item.name,
                    value: item.value,
                    id: item.id,
                    id1: 'wsad',
                    label: {
                      color: this.colorList[index]
                    }
                  }
                }).sort((a, b) => {
                  return b.value - a.value
                })
              }
            ]
          })
          myChart.on('click', (params) => {
            this.showDeviceTypeTable(params)
          })
          myChart.on('legendselectchanged', (params) => {
            this.showDeviceTypeTable(params)
            myChart.dispatchAction({
              type: 'legendSelect',
              name: params.name
            })
          })
        }
      })
    },
    //  展示设备类型数据
    showDeviceTypeTable (params) {
      this.tableOption.api = getDeviceStatusListOfEngineering
      this.tableOption.filterForm = {
        sysId: this.deviceTypeOption.find(item => item.name == params.name).id
      }
      this.tableOption.title = params.name + '设备'
      this.tableOption.type = 'deviceType'
      this.tableOption.pageIndex = 1
      this.tableOption.data = []
      this.tableOption.display = true
      this.getTableList()
    },
    //  获取基础数据
    getBaseInfoData () {
      getBaseInfoDataOfEngineering(this.filterForm).then(res => {
        if (res.status == 200) {
          this.baseInfoOption.deviceCount = res.data.deviceCount
          this.baseInfoOption.projectCount = res.data.projectCount
          this.baseInfoOption.devicePartrolCount = res.data.devicePartrolCount
        }
      })
      getBaseInfoRatioOfEngineering(this.filterForm).then(res => {
        if (res.status == 200) {
          this.baseInfoOption.intactRate = res.data.intactRate
          this.baseInfoOption.patrolFinishRate = res.data.patrolFinishRate
          this.baseInfoOption.maintainFinishRatehRate = res.data.maintainFinishRatehRate
        }
      })
    },
    //  获取巡检任务数据
    getPatrolTaskData () {
      const that = this
      getPatrolTaskDataOfEngineering(this.filterForm).then(res => {
        if (res.status == 200) {
          const myChart = echarts.init(document.getElementById('patrolTask'))
          myChart.clear()
          myChart.off('click')
          myChart.off('legendselectchanged')
          myChart.setOption({
            color: this.colorList,
            title: {
              text: '任务总数',
              subtext: res.data.total,
              textAlign: 'center',
              textStyle: {
                color: '#46AEFD',
                fontSize: 12
              },
              subtextStyle: {
                fontSize: 14,
                color: '#FFFFFF'
              },
              left: '33%',
              top: '40%'
            },
            legend: {
              icon: 'circle',
              width: 200,
              height: 180,
              right: '10',
              top: 'center',
              orient: 'vertical',
              itemGap: 20,
              formatter: function (name) {
                return '{nam|' + name + ' }\n{val|' + res.data[that.patrolTaskOption.find(item => item.name == name).key] + '}'
              },
              textStyle: {
                rich: {
                  nam: {
                    padding: [0, 80, 0, 0],
                    align: 'center',
                    lineHeight: 28,
                    color: '#51D0FF'
                  },
                  val: {
                    padding: [0, 80, 0, 0],
                    align: 'center',
                    color: '#FFB17C'
                  }
                }
              }
            },
            series: [
              {
                name: '巡检任务',
                type: 'pie',
                radius: ['40%', '68%'],
                center: ['34%', '50%'],
                minAngle: 0.5,
                roseType: 'radius',
                label: {
                  formatter: '{b}: {c}'
                },
                labelLine: {
                  length: 20
                },
                labelLayout: {
                  moveOverlap: 'shiftY'
                },
                itemStyle: {
                  shadowColor: '#4db2ff',
                  shadowBlur: 8
                },
                data: that.patrolTaskOption.map((item, index) => {
                  return {
                    name: item.name,
                    value: res.data[item.key],
                    through: item.through
                  }
                }).sort((a, b) => {
                  return b.value - a.value
                }).map((item, index) => {
                  return {
                    name: item.name,
                    value: item.value,
                    label: {
                      color: item.through ? '#F56C6C' : this.colorList[index]
                    }
                  }
                })
              }
            ]
          })
          myChart.on('click', (params) => {
            this.showPatrolTaskTable(params)
          })
          myChart.on('legendselectchanged', (params) => {
            this.showPatrolTaskTable(params)
            myChart.dispatchAction({
              type: 'legendSelect',
              name: params.name
            })
          })
        }
      })
    },
    //  展示巡检任务数据
    showPatrolTaskTable (params) {
      this.tableOption.api = getTaskListOfEngineering
      this.tableOption.filterForm = {
        lpCategory: 1,
        taskState: this.patrolTaskOption.find(item => item.name == params.name).code
      }
      this.tableOption.title = params.name + '任务'
      this.tableOption.type = 'patrolMaintenanceTask'
      this.tableOption.pageIndex = 1
      this.tableOption.data = []
      this.tableOption.display = true
      this.getTableList()
    },
    //  获取预警信息数据
    getWarningInfoData () {
      getWarningInfoDataOfEngineering(this.filterForm).then(res => {
        if (res.status == 200) {
          this.warningInfoList = res.data.warningInfoList
        }
      })
    },
    //  获取设备大检任务数据
    getDeviceTaskData () {
      const that = this
      getDeviceTaskDataOfEngineering(this.filterForm).then(res => {
        if (res.status == 200) {
          const myChart = echarts.init(document.getElementById('deviceTask'))
          myChart.clear()
          myChart.off('click')
          myChart.off('legendselectchanged')
          myChart.setOption({
            color: this.colorList,
            title: {
              text: '任务总数',
              subtext: res.data.warningInfoTotal,
              textAlign: 'center',
              textStyle: {
                color: '#46AEFD',
                fontSize: 12
              },
              subtextStyle: {
                fontSize: 14,
                color: '#FFFFFF'
              },
              left: '33%',
              top: '40%'
            },
            legend: {
              icon: 'circle',
              width: 200,
              height: 180,
              right: '10',
              top: 'center',
              orient: 'vertical',
              itemGap: 20,
              formatter: function (name) {
                const site = res.data.warningInfoCount.find(site => site.warningStatusName == name)
                return '{nam|' + name + ' }\n{val|' + (site ? site.countNum : 0) + '}'
              },
              textStyle: {
                rich: {
                  nam: {
                    padding: [0, 80, 0, 0],
                    align: 'center',
                    lineHeight: 28,
                    color: '#51D0FF'
                  },
                  val: {
                    padding: [0, 80, 0, 0],
                    align: 'center',
                    color: '#FFB17C'
                  }
                }
              }
            },
            series: [
              {
                name: '巡检任务',
                type: 'pie',
                radius: ['40%', '68%'],
                center: ['34%', '50%'],
                minAngle: 0.5,
                roseType: 'radius',
                label: {
                  formatter: '{b}: {c}'
                },
                labelLine: {
                  length: 20
                },
                labelLayout: {
                  moveOverlap: 'shiftY'
                },
                itemStyle: {
                  shadowColor: '#4db2ff',
                  shadowBlur: 8
                },
                data: that.deviceTaskOption.map((item, index) => {
                  const site = res.data.warningInfoCount.find(site => site.warningStatus == item.key)
                  return {
                    name: item.name,
                    value: site ? site.countNum : 0,
                    through: item.through
                  }
                }).sort((a, b) => {
                  return b.value - a.value
                }).map((item, index) => {
                  return {
                    name: item.name,
                    value: item.value,
                    label: {
                      color: item.through ? '#F56C6C' : this.colorList[index]
                    }
                  }
                })
              }
            ]
          })
          myChart.on('click', (params) => {
            this.showDeviceTaskTable(params)
          })
          myChart.on('legendselectchanged', (params) => {
            this.showDeviceTaskTable(params)
            myChart.dispatchAction({
              type: 'legendSelect',
              name: params.name
            })
          })
        }
      })
    },
    //  展示设备大检任务数据
    showDeviceTaskTable (params) {
      this.tableOption.api = getDeviceTaskListOfEngineering
      this.tableOption.filterForm = {
        warningStatus: this.deviceTaskOption.find(item => item.name == params.name).key
      }
      this.tableOption.title = params.name + '任务'
      this.tableOption.type = 'deviceTask'
      this.tableOption.pageIndex = 1
      this.tableOption.data = []
      this.tableOption.display = true
      this.getTableList()
    },
    //  获取维保任务数据
    getMaintenanceTaskData () {
      const that = this
      getMaintenanceTaskDataOfEngineering(this.filterForm).then(res => {
        if (res.status == 200) {
          const myChart = echarts.init(document.getElementById('maintenanceTask'))
          myChart.clear()
          myChart.off('click')
          myChart.off('legendselectchanged')
          myChart.setOption({
            color: this.colorList,
            title: {
              text: '任务总数',
              subtext: res.data.warningInfoTotal,
              textAlign: 'center',
              textStyle: {
                color: '#46AEFD',
                fontSize: 12
              },
              subtextStyle: {
                fontSize: 14,
                color: '#FFFFFF'
              },
              left: '33%',
              top: '40%'
            },
            legend: {
              icon: 'circle',
              width: 200,
              height: 180,
              right: '10',
              top: 'center',
              orient: 'vertical',
              itemGap: 20,
              formatter: function (name) {
                return '{nam|' + name + ' }\n{val|' + res.data[that.maintenanceTaskOption.find(item => item.name == name).key] + '}'
              },
              textStyle: {
                rich: {
                  nam: {
                    padding: [0, 80, 0, 0],
                    align: 'center',
                    lineHeight: 28,
                    color: '#51D0FF'
                  },
                  val: {
                    padding: [0, 80, 0, 0],
                    align: 'center',
                    color: '#FFB17C'
                  }
                }
              }
            },
            series: [
              {
                name: '巡检任务',
                type: 'pie',
                radius: ['40%', '68%'],
                center: ['34%', '50%'],
                minAngle: 0.5,
                roseType: 'radius',
                label: {
                  formatter: '{b}: {c}'
                },
                labelLine: {
                  length: 20
                },
                labelLayout: {
                  moveOverlap: 'shiftY'
                },
                itemStyle: {
                  shadowColor: '#4db2ff',
                  shadowBlur: 8
                },
                data: that.maintenanceTaskOption.map((item, index) => {
                  return {
                    name: item.name,
                    value: res.data[item.key],
                    through: item.through
                  }
                }).sort((a, b) => {
                  return b.value - a.value
                }).map((item, index) => {
                  return {
                    name: item.name,
                    value: item.value,
                    label: {
                      color: item.through ? '#F56C6C' : this.colorList[index]
                    }
                  }
                })
              }
            ]
          })
          myChart.on('click', (params) => {
            this.showMaintenanceTaskTable(params)
          })
          myChart.on('legendselectchanged', (params) => {
            this.showMaintenanceTaskTable(params)
            myChart.dispatchAction({
              type: 'legendSelect',
              name: params.name
            })
          })
        }
      })
    },
    //  展示维保任务数据
    showMaintenanceTaskTable (params) {
      this.tableOption.api = getTaskListOfEngineering
      this.tableOption.filterForm = {
        lpCategory: 2,
        taskState: this.maintenanceTaskOption.find(item => item.name == params.name).code
      }
      this.tableOption.title = params.name + '任务'
      this.tableOption.type = 'patrolMaintenanceTask'
      this.tableOption.pageIndex = 1
      this.tableOption.data = []
      this.tableOption.display = true
      this.getTableList()
    },
    //  切换页面
    handlePageChange (val) {
      this.tableOption.pageIndex = val
      this.getTableList()
    },
    //  获取列表
    getTableList () {
      this.tableOption.loading = true
      this.tableOption.api({
        ...this.filterForm,
        ...this.tableOption.filterForm,
        pageIndex: this.tableOption.pageIndex,
        pageSize: this.tableOption.pageSize
      }).then(res => {
        this.tableOption.loading = false
        if (res.status == 200) {
          this.tableOption.data = res.data.records
          this.tableOption.total = res.data.total
        }
      })
    },
    //  获取图表数据
    getChartData (type) {
      if (this.project) {
        return false
      }
      if (type == 1) {
        this.chartsOption.display = true
        this.chartsOption.title = '在管设备'
        getBaseInfoChartsDataOfEngineering({
          ...this.filterForm
        }).then(res => {
          if (res.status == 200) {
            const myChart = echarts.init(document.getElementById('chartsContainer'))
            myChart.clear()
            myChart.setOption({
              color: ['#286be0'],
              legend: {
                top: '4%',
                data: ['设备数量']
              },
              grid: {
                left: '5%',
                right: '5%',
                top: '10%',
                bottom: '5%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                data: res.data.map(item => {
                  return item.projectName
                })
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                name: '设备数量',
                type: 'bar',
                label: {
                  show: true,
                  position: 'top'
                },
                data: res.data.map(item => {
                  return item.deviceNum
                })
              }]
            })
          }
        })
      } else if (type == 3 || type == 4) {
        this.tableOption.filterForm = {
          lpCategory: type == 3 ? 1 : 2
        }
        this.chartsOption.display = true
        this.chartsOption.title = type == 3 ? '巡检完成率' : '维保完成率'
        getBaseInfoRatioChartsDataOfEngineering({
          ...this.filterForm,
          lpCategory: type == 3 ? 1 : 2
        }).then(res => {
          if (res.status == 200) {
            const myChart = echarts.init(document.getElementById('chartsContainer'))
            myChart.clear()
            myChart.off('click')
            const sourceType = res.data.map(item => {
              return item.projectName
            })
            sourceType.unshift('ratio')
            const sourceData1 = res.data.map(item => {
              return item.finishRate
            })
            sourceData1.unshift('完成率')
            const sourceData2 = res.data.map(item => {
              return item.unFinishRate
            })
            sourceData2.unshift('未完成率')
            myChart.setOption({
              color: ['#286be0', '#87c9fa'],
              legend: {
                top: res.data.length > 6 ? 'middle' : '4%',
                left: res.data.length <= 6 ? 'center' : '1%',
                orient: res.data.length > 6 ? 'vertical' : 'horizontal',
                tooltip: {
                  show: true,
                  formatter: (params) => {
                    return params.name == '完成率' ? '完成率：任务完成数÷任务总数×100%（包含特殊关闭）' : '未完成率：（任务未完成数+已过期数+特殊关闭）÷任务总数×100%（包含特殊关闭）'
                  }
                }
              },
              dataset: {
                source: [
                  sourceType,
                  sourceData1,
                  sourceData2
                ]
              },
              tooltip: {
                trigger: 'item',
                formatter: '{b}：{d}%'
              },
              series: res.data.map((item, index) => {
                return {
                  type: 'pie',
                  radius: res.data.length <= 9 ? '30%' : (100 / Math.ceil(res.data.length / 3) - 4) + '%',
                  center: [
                    100 / 6 * ((index % 3) * 2 + 1) + '%',
                    50 / Math.ceil(res.data.length / 3) * (Math.floor(index / 3) * 2 + 1) + '%'
                  ],
                  encode: {
                    itemName: 'ratio',
                    value: item.projectName
                  },
                  label: {
                    position: 'inner',
                    fontSize: 14,
                    color: '#ffffff',
                    formatter: '{d}%'
                  },
                  markPoint: {
                    symbol: 'roundRect',
                    itemStyle: {
                      color: 'transparent'
                    },
                    tooltip: {
                      show: false
                    },
                    data: [
                      {
                        name: item.triangle,
                        x: 100 / 6 * ((index % 3) * 2 + 1) + '%',
                        y: 50 / Math.ceil(res.data.length / 3) * (Math.floor(index / 3 + 1) * 2) - 4 + '%',
                        label: {
                          normal: {
                            show: true,
                            width: '33%',
                            align: 'center',
                            formatter: item.projectName,
                            color: '#000000',
                            fontSize: 18,
                            fontWeight: 'bold'
                          }
                        }
                      }
                    ]
                  }
                }
              })
            })
            myChart.on('click', (params) => {
              this.tableOption.api = getTaskListOfEngineering
              this.tableOption.filterForm = {
                lpCategory: this.tableOption.filterForm.lpCategory,
                finishType: params.name == '完成率' ? 1 : 2,
                companyId: localStorage.companyId,
                projectId: res.data[params.componentIndex].projectId
              }
              this.tableOption.title = params.name == '完成率' ? '已完成任务' : '未完成任务'
              this.tableOption.type = 'patrolMaintenanceTask'
              this.tableOption.pageIndex = 1
              this.tableOption.data = []
              this.tableOption.display = true
              this.getTableList()
            })
          }
        })
      }
    },
    resizePage () {
      this.$nextTick(() => {
        echarts.init(document.getElementById('deviceStatus')).resize()
        echarts.init(document.getElementById('deviceType')).resize()
        echarts.init(document.getElementById('patrolTask')).resize()
        echarts.init(document.getElementById('deviceTask')).resize()
        echarts.init(document.getElementById('maintenanceTask')).resize()
        try {
          echarts.init(document.getElementById('chartsContainer')).resize()
        } catch (e) {
          console.log('--')
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .base-info-container{
    width: calc(100% + 10px);
    margin-left: -5px;
    display: flex;
    height: 7vw;
    .base-info-card{
      width: calc(25% - 8px);
      height: 100%;
      margin: 4px;
      padding: 15px 5px 15px 20px;
      .base-info-title{
        height: 3vh;
        font-size: 1.6vh;
        line-height: 3vh;
        background-size: 2.2vh;
      }
      .base-info-data{
        width: 100%;
        height: calc(100% - 6vh);
        font-size: 2.4vh;
      }
      .base-info-tip{
        height: 4vh;
        font-size: 1.2vh;
        line-height: 2vh;
      }
    }
  }
</style>