<script lang="ts">
export default {
  name: 'reliabilitystatistic' //可靠性指标
};
</script>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import { getLinkTaskTodo } from "@/api/Intelligentlinkage/index";
import { useUserStore } from '@/store/modules/user';
import { getDeviceByType, } from "@/api/device";
import { getCameraIntegrityRate, getDeviceInspectionStat, getTaskDataStat, getRobotOnlineRate, deviceDownloadFile } from "@/api/reliabilitystatistic";
import Page from '@/components/Pagination/page.vue'
import moment from 'moment'
import { downloadFile } from '@/utils/index';
//控制行变色
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any
  rowIndex: number
}) => {
  if (rowIndex % 2 === 0) {
    return 'warning-row'
  } else if (rowIndex % 2 === 1) {
    return 'success-row'
  }
  return ''
}
const userStore = useUserStore();
const defaultprops = {
  label: "name",
}
function handleNodeClick(data: any, node: any) {
  isVideoActive.value = node.id - 1
  selectedId.value = data.id
  resetting()
}
const selectedId: any = ref("")
const tabData: any = ref([{
  id: "1",
  code: "1",
  name: "摄像机录像完整率统计"
}, {
  id: "2",
  code: "2",
  name: "巡视设备累计在线、离线统计"
}, {
  id: "3",
  code: "3",
  name: "巡视设备累计运行天数统计"
}, {
  id: "4",
  code: "4",
  name: "巡视设备巡检统计"
}, {
  id: "5",
  code: "5",
  name: "巡视任务数据统计"
}])
const queryInfo: any = ref({
  patrolDeviceName: "",
  type: "",
  flag: "",
  deviceModel: "",
  manufacturer: "",
  startDate: '',
  endDate: '',
  current: 1, // 当前页
  size: 10, // 页大小
})

const loading = ref(false)
const tableData1: any = ref([])
const tableData2: any = ref([])
const tableData3: any = ref([])
const tableData4: any = ref([])
const tableData5: any = ref([])

const total = ref(0)
function resetting() {
  queryInfo.value = {
    areaId: "",
    patrolDeviceName: "",
    patrolDeviceCode: "",
    type: "",
    flag: "",
    current: 1, // 当前页
    size: 10, // 页大小
    startDate: '',
    endDate: ''
  }
  getDate()
  getMonth()
  if (selectedId.value == "1") {
    getPublicData()
  } else if (selectedId.value == "2") {
    getRobotOnline()
  } else if (selectedId.value == "3") {
    getRobotOnline()
  } else if (selectedId.value == "4") {
    getTwoInit()
  } else if (selectedId.value == "5") {
    getTaskInit(dateWeekMonthActvie.value)
  }

}
function getQueryData() {
  if (selectedId.value == "1") {
    getPublicData()
  } else if (selectedId.value == "2") {
    getRobotOnline()
  } else if (selectedId.value == "3") {
    getRobotOnline()
  } else if (selectedId.value == "4") {
    getTwoInit()
  } else if (selectedId.value == "5") {
    getTaskInit(dateWeekMonthActvie.value)
  }
}
function getPublicData() { //摄像机录像完整率统计
  loading.value = true
  const params = {
    stationId: userStore.stationId,
    patrolDeviceName: queryInfo.value.patrolDeviceName,
    channel: queryInfo.value.channel,
    flag: queryInfo.value.flag,
    size: queryInfo.value.size,
    current: queryInfo.value.current,
  }
  getCameraIntegrityRate(params).then((res: any) => {
    loading.value = false
    tableData1.value = res.data.records
    total.value = res.data.total
    queryInfo.value.size = res.data.size
    queryInfo.value.current = res.data.current
  })
}
function getTwoInit() { //巡视设备巡检统计 
  loading.value = true
  const params = {
    stationId: userStore.stationId,
    patrolDeviceName: queryInfo.value.patrolDeviceName,
    patrolDeviceCode: queryInfo.value.patrolDeviceCode,
    size: queryInfo.value.size,
    type:queryInfo.value.type,
    current: queryInfo.value.current,
  }
  getDeviceInspectionStat(params).then((res: any) => {
    loading.value = false
    tableData4.value = res.data.records
    total.value = res.data.total
    queryInfo.value.size = res.data.size
    queryInfo.value.current = res.data.current
  })
}
const typedao = ref()
function getTaskInit(type: any) { //巡视设备巡检统计 
  typedao.value = type
  loading.value = true
  if (dateArr.value.length != 0) {
    if (dateWeekMonthActvie.value == '1' || dateWeekMonthActvie.value == '2') {
      queryInfo.value.startDate = dateArr.value[0]
      queryInfo.value.endDate = dateArr.value[1]
    }
    if (dateWeekMonthActvie.value == '3') {
      queryInfo.value.startDate = monthArr.value[0]
      queryInfo.value.endDate = monthArr.value[1]
    }

  }
  const params = {
    stationCode: userStore.stationCode,
    type: type,
    startDate: queryInfo.value.startDate,
    endDate: queryInfo.value.endDate,
    size: queryInfo.value.size,
    current: queryInfo.value.current,
  }
  getTaskDataStat(params).then((res: any) => {
    tableData5.value = res.data.records
    total.value = res.data.total
    loading.value = false
    queryInfo.value.size = res.data.size
    queryInfo.value.current = res.data.current
  })
}
//巡视设备累计在线、离线统计
function getRobotOnline() {
  loading.value = true
  const params = {
    stationId: userStore.stationId,
    patrolDeviceName: queryInfo.value.patrolDeviceName,
    patrolDeviceCode: queryInfo.value.patrolDeviceCode,
    type: queryInfo.value.type,
  }
  getRobotOnlineRate(params).then((res: any) => {
    loading.value = false
    tableData2.value = res.data.records
    tableData3.value = res.data.records
    total.value = res.data.total
    queryInfo.value.size = res.data.size
    queryInfo.value.current = res.data.current
  })
}

const isCompleteData: any = ref([{
  itemcode: '1',
  dictname: '是'
}, {
  itemcode: '0',
  dictname: '否'
}])


function dateClick(type: any) {
  dateWeekMonthActvie.value = type
  resetting()
}
const PatrolEquipmentData: any = ref([]); // 初始化主设备选项框数组
function getDict() {  // 获取数组字典方法
  const paramss = {
    dictcode: 'PatrolEquipmentType'
  }
  // 设备类型
  getDeviceByType(paramss).then((res: any) => {
    res.data.forEach((element: any) => {
      if (element.itemcode == 1 || element.itemcode == 2 || element.itemcode == 3|| element.itemcode == 10 || element.itemcode == 13) {
        PatrolEquipmentData.value.push(element)
      }
    });
    for (var i = 0; i < PatrolEquipmentData.value.length - 1; i++) {
      for (var j = i + 1; j < PatrolEquipmentData.value.length; j++) {
        if (PatrolEquipmentData.value[i].id == PatrolEquipmentData.value[j].id) {
          PatrolEquipmentData.value.splice(j, 1);
          j--;
        }
      }
    }
    // PatrolEquipmentData.value = res.data
  })
}
//导出点位
// //导出点位
function exportDevice() {
  const params = {
    bstationCode: userStore.stationCode,
    type: typedao.value,
    startDate: queryInfo.value.startDate,
    endDate: queryInfo.value.endDate,
    size: queryInfo.value.size,
    current: queryInfo.value.current,
  }
  loading.value = true
  deviceDownloadFile(params).then((response: any) => {
    loading.value = false
    downloadFile(response, '巡视任务数据', 'xlsx')
  }).catch(() => {
    loading.value = false
  });
}
const treeRef: any = ref()
const dateWeekMonthActvie: any = ref('1')
onMounted(() => {
  getDate()
  getMonth()
  getPublicData()
  getDict()
  // nextTick(() => {

  treeRef.value?.setCurrentKey("1");
  selectedId.value = "1"
  // })
  getLinkTaskTodo({ stationCode: userStore.stationCode }).then((res: any) => {
    nextTick(() => {

      // treeRef.value?.setCurrentKey('1');
    })
  })
})
const isVideoActive: any = ref(-1)
const dateArr: any = ref([])
const weekArr: any = ref([])
const monthArr: any = ref([])
function getDate() {
  let endDate = moment(new Date()).format('YYYY-MM-DD')
  const now = new Date(endDate)
  const year = now.getFullYear();
  const month = now.getMonth();
  const day = now.getDate();
  let startDate = moment(new Date(year, month - 1, day)).format('YYYY-MM-DD')
  dateArr.value = [startDate, endDate]
}
function getMonth() {
  let endDate = moment(new Date()).format('YYYY-MM')
  const now = new Date()
  const year = now.getFullYear();
  let startDate = moment(new Date(year, 0, 1)).format('YYYY-MM')
  weekArr.value = [startDate, endDate]
  monthArr.value = [startDate, endDate]
}
function currency(list: any, itemcode: any) {
  let dictname = ''
  list.forEach((element: any) => {
    if (element.itemcode == itemcode) {
      dictname = element.dictname
    }
  })
  return dictname
}
</script>
<template>
  <div class="reliabilitystatistic-box">
    <div class="reliabilitystatistic-left">
      <div class="reliabilitystatistic-box-title">
        <div>可靠性指标列表</div>
      </div>
      <el-scrollbar style="margin-top:10px ;height:calc(100vh - 220px)" height="calc(100vh - 220px)">
        <el-tree ref="treeRef" :data="tabData" :props="defaultprops" @node-click="handleNodeClick" default-expand-all
          node-key="id" :highlight-current="true">
          <template #default="{ node }">
            <span>{{ node.label }}</span>
          </template>
        </el-tree>
      </el-scrollbar>
    </div>
    <div class="reliabilitystatistic-right">
      <div style="display: flex;align-items: center;justify-content: space-between;">
        <div v-if="selectedId == '1'" style="display: flex;align-items: center;" class="screenHomepage">
          <el-input v-model="queryInfo.patrolDeviceName" clearable placeholder="请输入摄像机名称" @clear="getQueryData"
            @keyup.enter="getQueryData" style="margin-right:10px;width: 180px;" />
          <!-- <el-select   v-model="queryInfo.areaId" class="selType" placeholder="所属NVR" @change="getQueryData" clearable style="margin-right:15px ;"  :teleported="false" :popper-append-to-body="false">
            <el-option v-for="item in PatrolEquipmentData" :key="item.itemcode" :label="item.dictname" :value="item.itemcode" />
          </el-select> -->
          <el-select v-model="queryInfo.flag" class="selType" placeholder="录像是否完整"
            :teleported="false" :popper-append-to-body="false" @change="getQueryData" clearable>
            <el-option v-for="item in isCompleteData" :key="item.itemcode" :label="item.dictname"
              :value="item.itemcode" />
          </el-select>
          <el-button class="searchButton" @click="getQueryData">搜索</el-button>
          <el-button class="searchButton" @click="resetting">重置</el-button>
        </div>
        <div v-if="selectedId == '2' || selectedId == '3' || selectedId == '4'" style="display: flex;align-items: center;"
          class="screenHomepage">
          <el-input v-model="queryInfo.patrolDeviceName" clearable placeholder="请输入设备名称" @clear="getQueryData"
            @keyup.enter="getQueryData" style="margin-right:10px;width: 180px;" />
          <el-input v-model="queryInfo.patrolDeviceCode" clearable placeholder="请输入设备编号" @clear="getQueryData"
            @keyup.enter="getQueryData" style="margin-right:10px;width: 180px;" />
          <el-select class="screenHomepage selType" v-model="queryInfo.type" placeholder="设备类型" :teleported="false" :popper-append-to-body="false" @change="getQueryData"
            clearable>
            <el-option v-for="item in PatrolEquipmentData" :key="item.itemcode" :label="item.dictname"
              :value="item.itemcode" />
          </el-select>
          <el-button class="searchButton" @click="getQueryData">搜索</el-button>
          <el-button class="searchButton" @click="resetting">重置</el-button>
        </div>
        <div v-if="selectedId == '5'" style="display: flex;align-items: center;" class="screenHomepage">
          <div class="dateWeekMonth" :class="{ 'dateWeekMonthActvie': dateWeekMonthActvie == '1' }"
            @click="dateClick('1')">日
          </div>
          <div class="dateWeekMonth" :class="{ 'dateWeekMonthActvie': dateWeekMonthActvie == '2' }"
            @click="dateClick('2')">周
          </div>
          <div class="dateWeekMonth" :class="{ 'dateWeekMonthActvie': dateWeekMonthActvie == '3' }"
            @click="dateClick('3')">月
          </div>
          <el-date-picker v-if="dateWeekMonthActvie == '1'" popper-class="elDatePicker" class="selType" v-model="dateArr"
            type="daterange" range-separator="至" start-placeholder="开始时间" style="max-width: 350px;" format="YYYY-MM-DD"
            value-format="YYYY-MM-DD" end-placeholder="结束时间" :clearable="false" @change="getQueryData" />
          <el-date-picker v-if="dateWeekMonthActvie == '2'" v-model="weekArr" type="daterange" range-separator="至"
            start-placeholder="开始时间" style="max-width: 350px;" popper-class="elDatePicker" format="YYYY-MM-DD"
            value-format="YYYY-MM-DD" end-placeholder="结束时间" :clearable="false" @change="getQueryData" />
          <el-date-picker v-if="dateWeekMonthActvie == '3'" v-model="monthArr" type="daterange" range-separator="至"
            start-placeholder="开始时间" style="max-width: 350px;" popper-class="elDatePicker" format="YYYY-MM"
            value-format="YYYY-MM" end-placeholder="结束时间" :clearable="false" @change="getQueryData" />
          <el-button class="searchButton" @click="getQueryData">搜索</el-button>
          <el-button class="searchButton" @click="resetting">重置</el-button>
        </div>
        <el-button v-if="selectedId == '5'" class="searchButton" @click="exportDevice">导出</el-button>
      </div>
      <el-table v-if="selectedId == '1'" :data="tableData1" :row-class-name="tableRowClassName" class="PatrolMonitoring"
        v-loading="loading" highlight-current-row
        style="width: 100%;margin:auto;position: relative;margin-top: 15px; height:calc(100% - 79px); overflow: auto "
        :header-cell-style="{ background: '#253b51', color: '#b5d7ff', height: '50px' }">
        <el-table-column type="index" align="center" label="序号" width="60" />
        <el-table-column prop="patroldeviceName" label="摄像机名称" align="center" min-width="130" />
        <el-table-column prop="nvrname" label="所属NVR" align="center" min-width="130" />
        <el-table-column prop="channelId" label="NVR通道" align="center" width="190" />
        <el-table-column prop="duration" label="录像时长" align="center" width="160">
          <template #default="scope">
            <span v-if="scope.row.duration">{{ scope.row.duration }}分钟</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="cycle" label="录像周期" align="center" width="160">
          <template #default="scope">
            <span v-if="scope.row.duration">{{ scope.row.cycle }}天</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="rate" label="录像完整率" align="center" width="100">
          <template #default="scope">
            <span v-if="scope.row.rate">
              <span v-if="scope.row.rate == '100'" style="color: #009BFF;">{{ scope.row.rate }}%</span>
              <span v-else style="color: #FFCC00;">{{ scope.row.rate }}%</span>
            </span>
            <span v-else style="color: #FFCC00;">--</span>

          </template>
        </el-table-column>
        <el-table-column prop="isComplete" width="130" label="是录像否完整" align="center">
          <template #default="scope">
            <span v-if="scope.row.isComplete == '1'" style="color: #009BFF;">是</span>
            <span v-else style="color: #FFCC00;">否</span>
          </template>
        </el-table-column>
        <el-table-column prop="online" width="100" label="在线状态" align="center">
          <template #default="scope">
            <span v-if="scope.row.online == '1'" style="color: #009BFF;">在线</span>
            <span v-else style="color: #FF3300;">离线</span>
          </template>
        </el-table-column>
      </el-table>


      <el-table v-if="selectedId == '2'" :data="tableData2" :row-class-name="tableRowClassName" class="PatrolMonitoring"
        v-loading="loading" highlight-current-row
        style="width: 100%;margin:auto;position: relative;margin-top: 15px; height:calc(100% - 79px); overflow: auto "
        :header-cell-style="{ background: '#253b51', color: '#b5d7ff', height: '50px' }">
        <el-table-column type="index" align="center" label="序号" width="60" />
        <el-table-column prop="patroldeviceCode" label="设备编号" align="center" min-width="130" />
        <el-table-column prop="patroldeviceName" label="设备名称" align="center" min-width="130" />
        <el-table-column prop="type" label="设备分类" align="center" width="130">
          <template #default="scope">
            <span>{{ currency(PatrolEquipmentData, scope.row.type) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="recentStartTime" label="最近在线开始时间" align="center" width="165" />
        <el-table-column prop="recentEndTime" label="最近离线时间" align="center" width="165" />
        <el-table-column prop="onlineDuration" label="累计在线时长（h）" align="center" width="150">
          <template #default="scope">
            <span>{{ scope.row.onlineDuration }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="onlineNumber" label="累计离线次数（次）" align="center" width="150">
          <template #default="scope">
            <span>{{ scope.row.onlineNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="online" width="100" label="在线状态" align="center">
          <template #default="scope">
            <span v-if="scope.row.online == '1'" style="color: #009BFF;">在线</span>
            <span v-else style="color: #FF3300;">离线</span>
          </template>
        </el-table-column>
        <!-- <el-table-column v-if="selectedId == '2'" prop="name4" label="在线时长" align="center" width="160"/>
        <el-table-column v-if="selectedId == '3'" prop="name4" label="离线次数" align="center" width="160"/>
        <el-table-column v-if="selectedId == '4'" prop="name4" label="连续正常运行天数" align="center" width="160"/>
        <el-table-column v-if="selectedId == '5'||selectedId == '6'" prop="name4" label="正常天数" align="center" width="160"/>
        <el-table-column v-if="selectedId == '7'" prop="name4" label="正常巡检天数" align="center" width="160"/>
        <el-table-column v-if="selectedId == '7'" prop="name4" label="总投运天数" align="center" width="160"/>
        <el-table-column v-if="selectedId == '7'" prop="name4" label="出勤率" align="center" width="160"/>
        <el-table-column v-if="selectedId != '1'" prop="name5" label="在线状态" align="center" width="160"/> -->
      </el-table>
      <el-table v-if="selectedId == '3'" :data="tableData3" :row-class-name="tableRowClassName" class="PatrolMonitoring"
        v-loading="loading" highlight-current-row
        style="width: 100%;margin:auto;position: relative;margin-top: 15px; height:calc(100% - 79px); overflow: auto "
        :header-cell-style="{ background: '#253b51', color: '#b5d7ff', height: '50px' }">
        <el-table-column type="index" align="center" label="序号" width="60" />
        <el-table-column prop="patroldeviceCode" label="设备编号" align="center" min-width="130" />
        <el-table-column prop="patroldeviceName" label="设备名称" align="center" min-width="130" />
        <el-table-column prop="type" label="设备分类" align="center" width="100">
          <template #default="scope">
            <span>{{ currency(PatrolEquipmentData, scope.row.type) }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column  prop="inspectionDay" label="正常巡检天数" align="center" width="160"/>
        <el-table-column prop="inspectionRate" label="出勤率" align="center" width="160"/> -->
        <el-table-column prop="normalDay" label="连续正常运行天数" align="center" width="150">
          <template #default="scope">
            <span>{{ scope.row.normalDay }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="checkNormal" label="自检正常天数" align="center" width="150">
          <template #default="scope">
            <span>{{ scope.row.checkNormal }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="online" width="100" label="在线状态" align="center">
          <template #default="scope">
            <span v-if="scope.row.online == '1'" style="color: #009BFF;">在线</span>
            <span v-else style="color: #FF3300;">离线</span>
          </template>
        </el-table-column>
      </el-table>
      <el-table v-if="selectedId == '4'" :data="tableData4" :row-class-name="tableRowClassName" class="PatrolMonitoring"
        v-loading="loading" highlight-current-row
        style="width: 100%;margin:auto;position: relative;margin-top: 15px; height:calc(100% - 79px); overflow: auto "
        :header-cell-style="{ background: '#253b51', color: '#b5d7ff', height: '50px' }">
        <el-table-column type="index" align="center" label="序号" width="60" />
        <el-table-column prop="patroldeviceCode" label="设备编号" align="center" min-width="130" />
        <el-table-column prop="patroldeviceName" label="设备名称" align="center" min-width="130" />
        <el-table-column prop="type" label="设备分类" align="center" width="100">
          <template #default="scope">
            <span>{{ currency(PatrolEquipmentData, scope.row.type) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="productionDate" label="投运时间" align="center" width="180" />
        <el-table-column prop="name3" label="总投运天数" align="center" width="150">
          <template #default="scope">
            <span>{{ scope.row.productionCount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name3" label="正常巡检天数" align="center" width="150">
          <template #default="scope">
            <span>{{ scope.row.count }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name3" label="出勤率" align="center" width="150">
          <template #default="scope">
            <span>{{ Math.round(scope.row.count / scope.row.productionCount * 100) }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="online" width="100" label="在线状态" align="center">
          <template #default="scope">
            <span v-if="scope.row.online == '1'" style="color: #009BFF;">在线</span>
            <span v-else style="color: #FF3300;">离线</span>
          </template>
        </el-table-column>
      </el-table>

      <el-table v-if="selectedId == '5'" :data="tableData5" :row-class-name="tableRowClassName" class="PatrolMonitoring"
        v-loading="loading" highlight-current-row
        style="width: 100%;margin:auto;position: relative;margin-top: 15px; height:calc(100% - 79px); overflow: auto "
        :header-cell-style="{ background: '#253b51', color: '#b5d7ff', height: '50px' }">
        <el-table-column type="index" align="center" label="序号" width="60" />
        <el-table-column prop="date" label="时间" align="center" min-width="150" />
        <el-table-column prop="count1" label="巡视点位漏检率" align="center" min-width="150">
          <template #default="scope">
            <span v-if="scope.row.sum1 != null && scope.row.count1 != null">
              <el-tooltip placement="right">
                <template #content>漏检点位数量： {{ scope.row.sum1 }}<br />总巡检点位数量：{{ scope.row.count1 }} </template>
                {{ (scope.row.sum1 / scope.row.count1 * 100).toFixed(2) }}%
              </el-tooltip>

            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="count5" label="巡视任务执行闭环率" align="center" min-width="150">
          <template #default="scope">
            <span v-if="scope.row.sum5 != null && scope.row.count5 != null">
              <el-tooltip placement="right">
                <template #content>闭环任务数量： {{ scope.row.sum5 }}<br />执行结束任务点数：{{ scope.row.count5 }} </template>
                {{ (scope.row.sum5 / scope.row.count5 * 100).toFixed(2) }}%
              </el-tooltip>
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="count4" label="巡视告警人工审核完成率" align="center" min-width="160">
          <template #default="scope">
            <span v-if="scope.row.sum4 != null && scope.row.count4 != null">
              <el-tooltip placement="right">
                <template #content>已审核告警数量 {{ scope.row.sum4 }}<br />告警总数：{{ scope.row.count4 }} </template>
                {{ (scope.row.sum4 / scope.row.count4 * 100).toFixed(2) }}%
              </el-tooltip>

            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="count3" label="巡视告警准确率" align="center" min-width="150">
          <template #default="scope">
            <span v-if="scope.row.sum3 != null && scope.row.count3 != null">
              <el-tooltip placement="right">
                <template #content>已审核未人工修正的告数数量： {{ scope.row.sum3 }}<br />已审核告警总数：{{ scope.row.count3 }} </template>
                {{ (scope.row.sum3 / scope.row.count3 * 100).toFixed(2) }}%
              </el-tooltip>
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="count2" label="巡视结果人工审核完成率" align="center" min-width="160">
          <template #default="scope">
            <span v-if="scope.row.sum2 != null && scope.row.count2 != null">
              <el-tooltip placement="right">
                <template #content>已审核巡检结果数量： {{ scope.row.sum2 }}<br />总巡检结果数量：{{ scope.row.count2 }} </template>
                {{ (scope.row.sum2 / scope.row.count2 * 100).toFixed(2) }}%
              </el-tooltip>
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="巡视任务的次数" align="center"></el-table-column>
        <el-table-column prop="duration" label="巡视时长" align="center"></el-table-column>
        <el-table-column prop="type" label="发现缺陷种类" align="center" width="110px"></el-table-column>
        <el-table-column prop="count" label="发现缺陷数量" align="center" width="110px"></el-table-column>
      </el-table>

      <Page style="position: relative;z-index: 100;text-align: center;" :total="total" v-model:size="queryInfo.size"
        :jumper="'hide'" v-model:current="queryInfo.current" @pagination="getQueryData"></Page>
    </div>
  </div>
</template>
<style scoped lang="scss">
// :deep(.el-scrollbar){
//   height:90%;
// }
.reliabilitystatistic-box {
  position: relative;
  display: flex;
  box-sizing: border-box;
  padding: 8px;
  height: calc(100vh - 90px);
}

.reliabilitystatistic-left {
  position: relative;
  width: 321px;
  min-width: 261px;
  height: calc(100vh - 106px);
  background: url(@/assets/monitorsystem/spjk_lbbj.png) no-repeat center center;
  background-size: 100% 100%;

  .el-tree {
    background: transparent;
    color: #ffffff;
    --el-tree-node-hover-bg-color: transparent;
  }
}

.reliabilitystatistic-box-title {
  font-family: '阿里妈妈数黑体 Bold', '阿里妈妈数黑体';
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #ffffff;
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}

.reliabilitystatistic-right {
  position: relative;
  width: calc(100% - 340px);
  height: calc(100vh - 106px);
  background: url(@/assets/monitorsystem/reliabilitystatistic.png) no-repeat center center;
  background-size: 100% 100%;
  margin-left: 15px;
  padding: 15px;
  box-sizing: border-box;
}

:deep(.el-tree-node > .el-tree-node__content) {
  height: 40px;
}

:deep(.el-tree-node > .el-tree-node__content:hover) {
  color: #009BFF;
}




:deep(.el-table__body-wrapper) {
  color: #fff;
}

:deep(.el-table) {
  --el-table-row-hover-bg-color: transparent !important;
  --el-table-border-color: transparent !important;
}

:deep(.el-table__empty-text) {
  color: #fff !important;
}


:deep(.el-table) {
  background-color: transparent;
}

:deep(.el-scrollbar__wrap) {
  background: transparent;
}



:deep(.el-input__wrapper) {
  background-color: transparent !important;
  box-shadow: (0 0 0 1px #225b7e) inset;
}

:deep(.el-input__inner) {
  color: #fff !important;
}

:deep(.el-select-dropdown__wrap) {
  background-color: #16202e !important;
}

:deep(.el-date-editor .el-range-input) {
  color: #fff !important;
}

:deep(.el-table__body tr.current-row td) {
  background-color: transparent !important;
}
.videoActive {
  border-color: rgba(0, 249, 162, 1) !important;
}

.searchButton {
  border: #009bff solid 1px;
  background-color: #009bff;
  color: #ffffff;
  margin-left: 10px;
}

.dateWeekMonth {
  width: 32px;
  height: 32px;
  line-height: 30px;
  border-radius: 2px;
  text-align: center;
  font-size: 14px;
  border: #009bff solid 1px;
  // background-color: #08503a;
  color: rgba(255, 255, 255, 1);
  margin-right: 10px;
  cursor: pointer;
  font-family: 'Arial Normal', 'Arial';
}

.dateWeekMonth:hover {
  color: #ffffff;
  border: #009BFF solid 1px;
}

.dateWeekMonthActvie {
  color: #ffffff !important;
  border: #009BFF solid 1px;
  background-color: #009BFF;
}</style>
