hsq-pro/src/views/vent/monitorManager/hsqHome/components/HistoryLine.vue

<template>
  <div class="history-line">
    <!-- 控制设备下拉选择 -->
    <div class="device-select-row">
      <!-- <span class="select-label">控制设备</span> -->
      <a-select v-model:value="currentDevice" class="device-select" :options="deviceOptions" placeholder="请选择设备"
        :get-popup-container="(trigger) => trigger.parentNode" @change="onDeviceChange" />
    </div>
    <div class="device-row-line">
      <CustomChart :chart-config="chartConfig" :chart-data="chartData"></CustomChart>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, type PropType } from 'vue';
import CustomChart from './CustomChart.vue';
import { chartConfig } from '../hsqHome.data'
import { listdays } from '../hsqHome.api'
import dayjs from 'dayjs';

const DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss'
let props = defineProps({
  deviceOptions: {
    type: Array as PropType<any[]>,
    default: () => []
  }
})

/** 当前选中的设备 value */
const currentDevice = ref('')
/** 当前选中的设备类型 */
const deviceType = ref('')
/** 实时温度曲线图表数据 */
let chartData = ref<any[]>([])
/** 时间范围：[开始时间, 结束时间]，默认近 7 天至当前时间 */
const timeRange = ref<[string, string]>([
  dayjs().subtract(30, 'day').format(DATE_FORMAT),
  dayjs().format(DATE_FORMAT),
])



/** 选择设备，触发 deviceChange 事件 */
function onDeviceChange(value: string) {
  const item = props.deviceOptions.find((d) => d.value === value)
  currentDevice.value = value
  deviceType.value = item?.devicetype
  if (item) {
    // emit('deviceChange', item)
  }
}

/** 获取历史温度曲线数据 */
async function getChartData() {
  let res = await listdays({  ttime_begin: timeRange.value?.[0], ttime_end: timeRange.value?.[1],skip: '8',gdeviceids: currentDevice.value,pageNo: 1, pageSize: 1000,  strtype: deviceType.value,  })
  console.log(res, '历史温度曲线数据')
  if (res.datalist.records.length) {
      chartData.value = res.datalist.records.map((v,index) => ({
        pos: v.ttime,
        value:parseFloat(v.readData.avg)
      }))
  }
}

watch(() => props.deviceOptions, (newVal) => {
  if (newVal.length > 0) {
    currentDevice.value = newVal[0].value
    deviceType.value = newVal[0].devicetype
    getChartData()
  }
}, { immediate: true })
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

.history-line {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;

  .device-select-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
    flex-shrink: 0;

    .select-label {
      white-space: nowrap;
      color: #fff;
    }

    .device-select {
      flex: 1;
      min-width: 0;
    }
  }

  .device-row-line {
    width: 100%;
    height: calc(100% - 35px);
  }

  :deep(.zxm-select) {
    width: 100%;
    height: 28px;
  }

  :deep(.zxm-select-selector) {
    height: 28px !important;
    padding: 0 24px 0 11px !important;
    border: 1px solid #3ae1ff !important;
    background-color: rgba(16, 64, 100, 0.85) !important;
    box-shadow: 0 0 6px rgba(58, 225, 255, 0.25);
    color: #fff !important;
  }

  :deep(.zxm-select-selection-search) {
    inset-inline-start: 11px !important;
  }

  :deep(.zxm-select-selection-item),
  :deep(.zxm-select-selection-placeholder) {
    line-height: 26px !important;
    font-size: 14px;
    color: #fff !important;
  }

  :deep(.zxm-select-selection-placeholder) {
    color: rgba(200, 236, 255, 0.45) !important;
  }

  :deep(.zxm-select-arrow) {
    color: #3ae1ff !important;
  }

  :deep(.zxm-select-dropdown) {
    padding: 4px 0;
    background: rgba(16, 64, 100, 0.98);
    border: 1px solid #3ae1ff;
    box-shadow: 0 0 6px rgba(58, 225, 255, 0.25);
  }

  :deep(.zxm-select-item) {
    padding: 6px 10px;
    font-size: 14px;
    color: #fff;
  }

  :deep(.zxm-select-item-option-active),
  :deep(.zxm-select-item-option-selected) {
    background: rgba(58, 225, 255, 0.2) !important;
    color: #fff !important;
  }
}
</style>