<!--
  Description: 报警管理-查看数据(监控数据) -- 管网哨兵
  Author: 李亚光
  Date: 2024-09-10
 -->
<script lang="ts" setup name="MonitorDataDialog">
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import { exportDeviceData, getDataSearch } from '@/api/home/device/device'
import { getDeviceTypeListPage } from '@/api/home/device/type'
import { exportFile } from '@/utils/exportUtils'
import { toHumpObject } from '@/utils/String'
const dialogFormVisible = ref(false) // 对话框是否显示
const info = ref()
const listQuery = ref({
  devcode: '',
  typeName: '',
  logBegTime: '',
  logEndTime: '',
  upBegTime: '',
  upEndTime: ''
})
const deviceTypeList = ref<any[]>([])
// 时间查询条件
const timerangForCollect = ref<string[]>([])
const timerangForReport = ref<string[]>([])
watch(
  () => timerangForCollect.value,
  newVal => {
    listQuery.value.upBegTime = ''
    listQuery.value.upEndTime = ''
    if (Array.isArray(newVal)) {
      if (newVal.length) {
        listQuery.value.upBegTime = `${newVal[0]}`
        listQuery.value.upEndTime = `${newVal[1]}`
      }
    }
  }
)
watch(
  () => timerangForReport.value,
  newVal => {
    listQuery.value.logBegTime = ''
    listQuery.value.logEndTime = ''
    if (Array.isArray(newVal)) {
      if (newVal.length) {
        listQuery.value.logBegTime = `${newVal[0]}`
        listQuery.value.logEndTime = `${newVal[1]}`
      }
    }
  }
)

const showTable = ref(true)
const resizePage = () => {
  setTimeout(() => {
    const resize = new Event('resize')
    window.dispatchEvent(resize)
  }, 500)
}
// 列表loading
const loadingTable = ref(true)
//  列表展示数据
const list = ref<any[]>([])
const xAxisData = ref<any[]>([])
const data = ref<any[]>([])
//  列表展示列
const columns = ref<any>([
  // { text: '设备编号', value: 'devcode', align: 'center' },
  // { text: '燃气浓度（%LEL)', value: 'snr', align: 'center' },
  // { text: '电量(%)', value: 'cell', align: 'center' },
  // { text: '信号强度', value: 'strength', align: 'center' },
  // { text: '采集时间', value: 'uptime', align: 'center' },
  // { text: '上传时间', value: 'logtime', align: 'center' },
])
// 燃气智能监测终端
const columns1 = ref<any>([
  { text: '设备编号', value: 'devcode', align: 'center' },
  { text: '燃气浓度（%LEL)', value: 'strength', align: 'center' },
  { text: '电量(%)', value: 'cell', align: 'center' },
  { text: '信号强度', value: 'pci', align: 'center' },
  { text: '采集时间', value: 'uptime', align: 'center', width: '180' },
  { text: '上传时间', value: 'logtime', align: 'center', width: '180' }
])
// 管网哨兵
const columns2 = ref<any>([
  { text: '设备编号', value: 'devcode', align: 'center' },
  { text: '燃气浓度（%LEL)', value: 'gasval', align: 'center' },
  { text: '电池电压(V)', value: 'vbat', align: 'center' },
  { text: '采集时间', value: 'uptime', align: 'center', width: '180' },
  { text: '上传时间', value: 'logtime', align: 'center', width: '180' }
])
// DATA_GAS("燃气智能监测终端", "data_gas", "devcode,uptime,logtime", "id,well_code,devcode设备编号,cell电量,strength浓度,descn,uptime采集时间,logtime上传时间,pci,rsrp,snr", "logtime"),
// DATA_TUBE_OTHER("管网哨兵", "data_tube_other", "devcode,uptime,logtime", "DEVCODE设备编号,GASVAL浓度, VBAT电压,SIN,RSRP,SINR,UPTIME采集时间,LOGTIME上传时间", "logtime"),
// DATA_MONITOR_PIPE_OTHER("智能警示桩", "data_monitor_pipe_other", "devcode,uptime,logtime", "TEMPERATURE,HUMIDITY,VBAT,PIPE_INCLINE_ALARM,PIPE_BREAK_ALARM,LEFT_OFF_LINE_ALARM,LEFT_VIBRATE_ALARM,RIGHT_OFF_LINE_ALARM,RIGHT_VIBRATE_ALARM,PICTURE_ALARM,LEFT_GAS,RIGHT_GAS,LOGTIME,UPTIME ", "logtime"),
// DATA_PAN_GAS("场站监测云台", "data_pan_gas", "DEVICE_CODE,,logtime", "ID,LEDGER_NUMBER,DEVICE_CODE设备编号,CONCENTRATION浓度,LOGTIME,DIRCETION水平位置,PITCH垂直位置", "LOGTIME采集时间");
// 智能警示桩
const columns3 = ref<any>([
  { text: '左侧甲烷值', value: 'leftGas', align: 'center', width: '110' },
  { text: '右侧甲烷值', value: 'rightGas', align: 'center', width: '110' },
  { text: '电池电压(V)', value: 'vbat', align: 'center', width: '110' },
  {
    text: '桩倾斜报警',
    value: 'pipeInclineAlarm',
    align: 'center',
    width: '110'
  },
  {
    text: '桩拆卸报警',
    value: 'pipeBreakAlarm',
    align: 'center',
    width: '110'
  },
  {
    text: '左断线报警',
    value: 'leftOffLineAlarm',
    align: 'center',
    width: '110'
  },
  {
    text: '左振动报警',
    value: 'leftVibrateAlarm',
    align: 'center',
    width: '110'
  },
  {
    text: '右断线报警',
    value: 'rightOffLineAlarm',
    align: 'center',
    width: '110'
  },
  {
    text: '右振动报警',
    value: 'rightVibrateAlarm',
    align: 'center',
    width: '110'
  },
  { text: '采集时间', value: 'uptime', align: 'center' },
  { text: '上传时间', value: 'logtime', align: 'center' }
])
// 场站监测云台
const columns4 = ref<any>([
  { text: '设备编号', value: 'deviceCode', align: 'center' },
  { text: '浓度', value: 'concentration', align: 'center' },
  { text: '水平位置', value: 'dircetion', align: 'center' },
  { text: '垂直位置', value: 'pitch', align: 'center' },
  { text: '采集时间', value: 'uptime', align: 'center', width: '180' },
  { text: '上传时间', value: 'logtime', align: 'center', width: '180' }
])
const fetchData = () => {
  listQuery.value.devcode = info.value.devcode
  listQuery.value.typeName = info.value.devTypeName
  loadingTable.value = true
  getDataSearch(listQuery.value)
    .then(res => {
      list.value = res.data.map((item: any) => toHumpObject(item))
      xAxisData.value = list.value
        .slice()
        .reverse()
        .map(item => item.logtime)
      if (
        !listQuery.value.typeName ||
        listQuery.value.typeName === '燃气智能监测终端'
      ) {
        data.value = [
          {
            name: '燃气浓度',
            data: list.value
              .slice()
              .reverse()
              .map(item => item.snr || '0')
          },
          // {
          //   name: '电量',
          //   data: list.value
          //     .slice()
          //     .reverse()
          //     .map(item => item.cell || '0')
          // },
          // {
          //   name: '信号强度',
          //   data: list.value
          //     .slice()
          //     .reverse()
          //     .map(item => item.strength || '0')
          // }
        ]
      } else if (listQuery.value.typeName === '管网哨兵') {
        data.value = [
          {
            name: '燃气浓度',
            data: list.value
              .slice()
              .reverse()
              .map(item => item.gasval || '0')
          },
          // {
          //   name: '电压',
          //   data: list.value
          //     .slice()
          //     .reverse()
          //     .map(item => item.vbat || '0')
          // }
        ]
      } else if (listQuery.value.typeName === '智能警示桩') {
        data.value = [
          {
            name: '左侧甲烷值',
            data: list.value
              .slice()
              .reverse()
              .map(item => item.leftGas || '0')
          },
          {
            name: '右侧甲烷值',
            data: list.value
              .slice()
              .reverse()
              .map(item => item.rightGas || '0')
          }
        ]
      } else if (listQuery.value.typeName === '场站监测云台') {
        data.value = [
          {
            name: '浓度',
            data: list.value
              .slice()
              .reverse()
              .map(item => item.concentration || '0')
          }
        ]
      }

      console.log(xAxisData.value, data.value)
      setTimeout(() => {
        loadingTable.value = false
      }, 1500);
      if (!showTable.value) {
        // fetchData()
        resizePage()
      }
    })
    .catch(() => {
      loadingTable.value = false
    })
}
const changeView = () => {
  showTable.value = !showTable.value
  if (!showTable.value) {
    fetchData()
    resizePage()
  }
}
// 初始化对话框
const initDialog = (row: any) => {
  timerangForCollect.value = [
  dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'),
  dayjs().format('YYYY-MM-DD HH:mm:ss')
]
// timerangForReport.value = [
//   dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'),
//   dayjs().format('YYYY-MM-DD HH:mm:ss')
// ]
  console.log(row, 'row')
  dialogFormVisible.value = true
  info.value = row
  if (row.devTypeName) {
    if (row.devTypeName === '燃气智能监测终端') {
      columns.value = columns1.value
    } else if (row.devTypeName === '管网哨兵') {
      columns.value = columns2.value
    } else if (row.devTypeName === '智能警示桩') {
      columns.value = columns3.value
    } else if (row.devTypeName === '场站监测云台') {
      columns.value = columns4.value
    } else {
      columns.value = columns1.value
    }
  } else {
    columns.value = columns1.value
  }
  setTimeout(() => {
    fetchData()
    if(showTable.value) {
      changeView()
    }
  });
}
defineExpose({
  initDialog
})

const cancel = () => {
  dialogFormVisible.value = false
}
</script>

<template>
  <el-dialog
    v-model="dialogFormVisible"
    title="查看数据"
    append-to-body
    width="900px"
  >
    <table-container title="">
      <template #btns-left>
        <!-- 查询条件 -->
        <div style="display: flex; align-items: center;">
          <span style="margin-right: 5px; white-space: nowrap">采集时间:</span>
          <el-date-picker
            v-model="timerangForCollect"
            type="datetimerange"
            range-separator="至"
            start-placeholder="采集开始时间"
            end-placeholder="采集结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
          <!-- <span
            style="margin-right: 5px; margin-left: 10px; white-space: nowrap"
            >上传时间:</span
          >
          <el-date-picker
            v-model="timerangForReport"
            type="datetimerange"
            range-separator="至"
            start-placeholder="上报开始时间"
            end-placeholder="上报结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          /> -->
          <el-button
            type="primary"
            style="margin-left: 10px"
            @click="fetchData"
          >
            搜索
          </el-button>
          <el-button
            type="primary"
            style="margin-left: 10px"
            @click="changeView"
          >
            切换视图
          </el-button>
        </div>
      </template>
      <normal-table
        v-if="showTable"
        :data="list"
        :total="0"
        :columns="columns"
        :query="listQuery"
        :height="350"
        :list-loading="loadingTable"
        :pagination="false"
      >
        <template #preColumns>
          <el-table-column label="序号" width="55" align="center">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
        </template>
      </normal-table>
      <div  v-loading="loadingTable" v-show="!showTable" style="height: 250px">
        <line-chart
          v-show="xAxisData.length"
          v-loading="loadingTable"
          :x-axis-data="xAxisData"
          :data="data"
          :gradient="false"
          unit="%LEL"
          :legend="{
            itemWidth: 8,
            itemHeight: 8,
            type: 'scroll',
            orient: 'horizontal',
            icon: 'roundRect',
            right: '60',
            top: '10'
          }"
          :grid="{
            top: 50,
            left: 60,
            right: 60,
            bottom: 20,
            containLabel: true // 是否包含坐标轴的刻度标签
          }"
        />
        <el-empty
          v-show="!xAxisData.length"
          description="暂无数据"
          :image-size="100"
        />
      </div>
    </table-container>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="cancel"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.el-dialog {
  width: 700px;
}

.el-select {
  width: 100%;
}

.red {
  color: red;
}
</style>