hand_device/web/src/views/HandDevice/Home/components/HistoricalCurve.vue

<template>
  <el-drawer
    v-model="drawer"
    :direction="'btt'"
    :before-close="handleClose"
    :destroy-on-close="true"
    resizable
    size="550px"
  >
    <template #header>
      <h4
        >{{ currentMarker?.name }}手持表
        <span class="gasChemical">{{ currentMarker?.gasChemical }}检测</span></h4
      >
    </template>
    <template #default>
      <!-- <div> 数据统计截止：{{ currentMarker?.timeStr }} </div> -->
      <div>
        <div class="flex items-center justify-between">
          <div class="chart-title"> {{ currentMarker?.gasChemical }}浓度与电量趋势 </div>
          <div>
            <el-date-picker
              v-model="gasDateTimeRange"
              value-format="YYYY-MM-DD HH:mm:ss"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
              @change="handleDateChange"
            />
          </div>
        </div>
        <div v-if="drawer && !loading">
          <Echart :options="gasLineOptions" :height="400" />
        </div>
      </div>
      <!-- <div>
        <div class="flex items-center justify-between">
          <div> 电量趋势 </div>
          <div>
            <el-date-picker
              v-model="gasDateTimeRange"
              value-format="YYYY-MM-DD HH:mm:ss"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
              class="!w-240px"
            />
          </div>
        </div>
        <div v-if="drawer && !loading">
          <Echart :options="batteryLineOptions" :height="300" />
        </div>
      </div> -->
    </template>
    <!-- <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">cancel</el-button>
        <el-button type="primary" @click="confirmClick">confirm</el-button>
      </div>
    </template> -->
  </el-drawer>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import type { MarkerData } from './types/map.types'

import { tdengineApi, tdStruct } from '@/api/gas/tdengine/index'

import { EChartsOption } from 'echarts'
import Echart from '@/components/Echart/src/Echart.vue'

import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

export type tdStruct2 = tdStruct & {
  timeStr: string
}

const drawer = ref(false)
const loading = ref(false)
const currentMarker = ref<MarkerData | null>()
const historicalData = ref<tdStruct2[]>([])
async function getData(row: MarkerData) {
  try {
    const data = await tdengineApi.getHistoricalSn({
      sn: row.sn,
      startTime: gasDateTimeRange.value[0],
      endTime: gasDateTimeRange.value[1]
    })
    if (!data || data.length === 0) {
      ElMessage.error('没有数据')
      historicalData.value = []
    }
    historicalData.value = data.map((item) => ({
      ...item,
      timeStr: dayjs(item.ts).format('YYYY-MM-DD HH:mm:ss')
    }))
      console.log(historicalData.value)
  } catch (error) {
    //   ElMessage.error(error.message)
  } finally {
    loading.value = false
  }
  //   console.log(data)
}
function openDrawer(row: MarkerData) {
  reset()
  historicalData.value = []
  currentMarker.value = row
  drawer.value = true
  loading.value = true
  getData(row)
}
const handleClose = (done) => {
  reset()
  done()
}
const reset = () => {
  loading.value = false
  historicalData.value = []
  currentMarker.value = null
  gasDateTimeRange.value = [
    dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
    dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')
  ]
}

const gasDateTimeRange = ref(['', ''])
const handleDateChange = () => {
  if (!currentMarker.value) {
    return
  }
  getData(currentMarker.value)
}

const gas = computed(() => {
  var value: (number | null)[] = []
  var battery: (number | null)[] = []
  var time: string[] = []
  historicalData.value
    // .filter((item) => typeof item.value === 'number')
    .forEach((item) => {
      if (item.battery !== '') {
        battery.push(Number(item.battery))
      } else {
        battery.push(null)
      }
      if (typeof item.value === 'number') {
        value.push(Number(item.value))
      } else {
        value.push(null)
      }

      time.push(item.timeStr)
    })

  return {
    value,
    battery,
    time
  }
})
const gasLineOptions = computed<EChartsOption>(() => {
  const option: EChartsOption = {
    title: {
      text: '',
      left: 'center'
    },
    xAxis: {
      data: gas.value.time,
      boundaryGap: false,
      axisTick: {
        show: false
      }
    },

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      padding: [5, 10]
    },
    yAxis: [
      {
        axisTick: {
          show: false
        }
      },
      {
        axisTick: {
          show: false
        }
      }
    ],
    legend: {
      // data: [],
      top: 50
    },
    series: [
      {
        name: currentMarker.value?.gasChemical + '浓度',
        smooth: true,
        type: 'line',
        data: gas.value.value,
        animationDuration: 2800,
        symbol: 'none',

        animationEasing: 'cubicInOut'
      },
      {
        name: '电池电量',
        smooth: true,
        type: 'line',
        yAxisIndex: 1,
        symbol: 'none',
        data: gas.value.battery,
        animationDuration: 2800,
        animationEasing: 'cubicInOut'
      }
    ]
  }
  const grid = {
    left: 20,
    right: 20,
    bottom: 10,
    top: 80,
    containLabel: true
  }
  if (gas.value.time.length >= 100) {
    grid.bottom = 50

    // 缩放
    option.dataZoom = [
      {
        type: 'slider',
        xAxisIndex: [0],
        bottom: 10,
        start: 0,
        end: 100
      },
      {
        type: 'inside',
        xAxisIndex: [0],
        start: 0,
        end: 100
      }
    ]
  } else {
  }
  option.grid = grid

  return option
})

defineExpose({
  openDrawer
})
</script>
<style scoped lang="scss">
.chart-title {
  position: relative;
  font-size: 14px;
  font-weight: bold;
  padding-left: 10px;

  &::after {
    content: '';
    position: absolute;
    left: 0px;
    bottom: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background-color: rgba(22, 119, 255, 1);
  }
}
.gasChemical {
  display: inline-block;
  padding: 2px 6px;
  font-size: 12px;
  color: #f59a23;
  background-color: rgba(245, 154, 35, 0.09);
}
</style>