iot-ui-plus/src/views/details/index.vue

<template>
  <div class="details">
    <el-card class="search" shadow="always">
      <el-form class="searchForm" ref="searchRef" :inline="true" :model="searchForm" label-width="100px">
        <el-form-item class="item" label="时间" prop="time">
          <el-date-picker
            v-model="searchForm.time"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY/MM/DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            :default-time="defaultTime"
            @change="timeChange"
          />
        </el-form-item>
        <el-form-item class="item" label="设备" prop="device">
          <el-select v-model="searchForm.device" multiple filterable placeholder="请选择设备" @change="deviceChange">
            <el-option
              v-for="item in deviceData"
              :key="item.centerDeviceCode"
              :label="item.deviceName"
              :value="item.centerDeviceCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="item" label="参数" prop="parameter">
          <el-select
            v-model="searchForm.parameter"
            multiple
            :multiple-limit="multipleLimit"
            filterable
            placeholder="请选择参数"
            @change="parameterChange"
          >
            <el-option
              v-for="item in parameterData"
              :key="item.paramClassCode"
              :label="item.paramClassName"
              :value="item.paramClassCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="item" label="分区" prop="partition">
          <el-select v-model="searchForm.partition" filterable placeholder="请选择分区" @change="partitionChange">
            <el-option
              v-for="item in partitionData"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(searchRef)">确认</el-button>
          <el-button @click="resetForm(searchRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="echart" shadow="always">
      <div class="comparisonInfo">
        <div ref="stackedRef" class="stackedLine" />
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts';
import { Ref } from 'vue';
const stackedRef: Ref<HTMLElement | any> = ref(null);
import type { FormInstance } from 'element-plus';

import { getDevices, getParams, getPortions, getDeviceInfos } from '@/api/device/index';
import { deetsVo, partitionVo, parameterVo } from '@/api/device/types';

const searchRef = ref<FormInstance>();
const defaultTime = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'
const multipleLimit = ref(0);
const searchForm = reactive({
  time: '',
  device: [],
  parameter: [],
  partition: ''
});
const filterForm = reactive({
  startTime: '',
  endTime: '',
  deviceUuid: '',
  paramCode: '',
  partion: ''
});
const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23'];
const deviceData = ref<deetsVo[]>();
const parameterData = ref<parameterVo[]>();
const partitionData = ref<partitionVo[]>();

// let base = +new Date();
// let oneDay = 24 * 3600 * 1000;
// let data = [[base, Math.random() * 300]];
// for (let i = 1; i < 200; i++) {
//   let now = new Date((base += oneDay));
//   console.log('now--', now);
//   data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
// }
const options1 = {
  title: {
    text: '多设备单参数'
  },
  tooltip: {
    trigger: 'axis'
    //   position: function (pt: any) {
    //     return [pt[0], '10%'];
    //   }
  },
  legend: {
    data: ['华尔街3号站', '颐和城', '李相', '汪家新村', '白沙岛']
  },
  grid: {
    top: '80',
    left: '100',
    right: '150',
    bottom: '50',
    containLabel: true
  },
  toolbox: {
    feature: {
      restore: {}
    }
  },
  xAxis: {
    type: 'time',
    boundaryGap: false
  },
  yAxis: {
    type: 'value',
    scale: true, //自适应
    minInterval: 1, //最小间距
    name: '单位()',
    nameTextStyle: {
      color: '#000',
      fontSize: 12,
      padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
    },
    axisTick: {
      // 轴刻度
      show: false
    }
    // boundaryGap: [0, '100%']
  },
  dataZoom: [
    {
      type: 'inside',
      startValue: '0'
      // start: 0,
      // end: 20
    },
    {
      startValue: '0'
      //   start: 0,
      //   end: 20
    }
  ],
  series: [
    {
      name: '华尔街3号站',
      type: 'line',
      smooth: true,
      symbol: 'none',
      data: [
        ['2023-10-01 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 15:00:00', Math.round(Math.random() * 500)]
      ]
    },
    {
      name: '颐和城',
      type: 'line',
      smooth: true,
      symbol: 'none',
      data: [
        ['2023-10-01 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 15:00:00', Math.round(Math.random() * 500)]
      ]
    },
    {
      name: '李相',
      type: 'line',
      smooth: true,
      symbol: 'none',
      data: [
        ['2023-10-01 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 15:00:00', Math.round(Math.random() * 500)]
      ]
    }
  ]
};

const options2 = {
  color: colors,
  title: {
    text: '单设备多参数'
  },
  tooltip: {
    trigger: 'axis'
    //   position: function (pt: any) {
    //     return [pt[0], '10%'];
    //   }
  },
  legend: {
    data: ['瞬时流量', '瞬时热量', '累计热量']
  },
  grid: {
    top: '80',
    left: '100',
    right: '150',
    bottom: '50',
    containLabel: true
  },
  toolbox: {
    feature: {
      restore: {}
    }
  },
  xAxis: {
    type: 'time',
    boundaryGap: false
  },
  yAxis: [
    {
      type: 'value',
      name: '瞬时流量(m³/h)',
      position: 'left',
      alignTicks: true,
      scale: true, //自适应
      minInterval: 1, //最小间距
      nameTextStyle: {
        fontSize: 12,
        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
      },
      axisTick: {
        // 轴刻度
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[0]
        }
      }
    },
    {
      type: 'value',
      name: '瞬时热量(JG/h)',
      position: 'right',
      alignTicks: true,
      scale: true, //自适应
      minInterval: 1, //最小间距
      nameTextStyle: {
        fontSize: 12,
        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
      },
      axisTick: {
        // 轴刻度
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[1]
        }
      }
    },
    {
      type: 'value',
      name: '累计热量(JG)',
      position: 'right',
      alignTicks: true,
      offset: 100,
      scale: true, //自适应
      minInterval: 1, //最小间距
      nameTextStyle: {
        fontSize: 12,
        padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
      },
      axisTick: {
        // 轴刻度
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[2]
        }
      }
    }
  ],
  // yAxis: {
  //   type: 'value',
  //   scale: true, //自适应
  //   minInterval: 1, //最小间距
  //   name: '单位()',
  //   nameTextStyle: {
  //     color: '#000',
  //     fontSize: 12,
  //     padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
  //   },
  //   axisTick: {
  //     // 轴刻度
  //     show: false
  //   }
  // },
  dataZoom: [
    {
      type: 'inside',
      startValue: '0'
      // start: 0,
      // end: 20
    },
    {
      startValue: '0'
      //   start: 0,
      //   end: 20
    }
  ],
  series: [
    {
      name: '瞬时流量',
      type: 'line',
      smooth: true,
      symbol: 'none',
      data: [
        ['2023-10-01 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 15:00:00', Math.round(Math.random() * 500)]
      ]
    },
    {
      name: '瞬时热量',
      type: 'line',
      smooth: true,
      symbol: 'none',
      yAxisIndex: 1,
      data: [
        ['2023-10-01 08:00:00', Math.round(Math.random() * 100)],
        ['2023-10-01 09:00:00', Math.round(Math.random() * 100)],
        ['2023-10-01 10:00:00', Math.round(Math.random() * 100)],
        ['2023-10-01 11:00:00', Math.round(Math.random() * 100)],
        ['2023-10-01 12:00:00', Math.round(Math.random() * 100)],
        ['2023-10-01 13:00:00', Math.round(Math.random() * 100)],
        ['2023-10-01 14:00:00', Math.round(Math.random() * 100)],
        ['2023-10-01 15:00:00', Math.round(Math.random() * 100)],
        ['2023-10-02 08:00:00', Math.round(Math.random() * 100)],
        ['2023-10-02 09:00:00', Math.round(Math.random() * 100)],
        ['2023-10-02 10:00:00', Math.round(Math.random() * 100)],
        ['2023-10-02 11:00:00', Math.round(Math.random() * 100)],
        ['2023-10-02 12:00:00', Math.round(Math.random() * 100)],
        ['2023-10-02 13:00:00', Math.round(Math.random() * 100)],
        ['2023-10-02 14:00:00', Math.round(Math.random() * 100)],
        ['2023-10-02 15:00:00', Math.round(Math.random() * 100)],
        ['2023-10-03 08:00:00', Math.round(Math.random() * 100)],
        ['2023-10-03 09:00:00', Math.round(Math.random() * 100)],
        ['2023-10-03 10:00:00', Math.round(Math.random() * 100)],
        ['2023-10-03 11:00:00', Math.round(Math.random() * 100)],
        ['2023-10-03 12:00:00', Math.round(Math.random() * 100)],
        ['2023-10-03 13:00:00', Math.round(Math.random() * 100)],
        ['2023-10-03 14:00:00', Math.round(Math.random() * 100)],
        ['2023-10-03 15:00:00', Math.round(Math.random() * 100)],
        ['2023-10-04 08:00:00', Math.round(Math.random() * 100)],
        ['2023-10-04 09:00:00', Math.round(Math.random() * 100)],
        ['2023-10-04 10:00:00', Math.round(Math.random() * 100)],
        ['2023-10-04 11:00:00', Math.round(Math.random() * 100)],
        ['2023-10-04 12:00:00', Math.round(Math.random() * 100)],
        ['2023-10-04 13:00:00', Math.round(Math.random() * 100)],
        ['2023-10-04 14:00:00', Math.round(Math.random() * 100)],
        ['2023-10-04 15:00:00', Math.round(Math.random() * 100)],
        ['2023-10-05 08:00:00', Math.round(Math.random() * 100)],
        ['2023-10-05 09:00:00', Math.round(Math.random() * 100)],
        ['2023-10-05 10:00:00', Math.round(Math.random() * 100)],
        ['2023-10-05 11:00:00', Math.round(Math.random() * 100)],
        ['2023-10-05 12:00:00', Math.round(Math.random() * 100)],
        ['2023-10-05 13:00:00', Math.round(Math.random() * 100)],
        ['2023-10-05 14:00:00', Math.round(Math.random() * 100)],
        ['2023-10-05 15:00:00', Math.round(Math.random() * 100)],
        ['2023-10-06 08:00:00', Math.round(Math.random() * 100)],
        ['2023-10-06 09:00:00', Math.round(Math.random() * 100)],
        ['2023-10-06 10:00:00', Math.round(Math.random() * 100)],
        ['2023-10-06 11:00:00', Math.round(Math.random() * 100)],
        ['2023-10-06 12:00:00', Math.round(Math.random() * 100)],
        ['2023-10-06 13:00:00', Math.round(Math.random() * 100)],
        ['2023-10-06 14:00:00', Math.round(Math.random() * 100)],
        ['2023-10-06 15:00:00', Math.round(Math.random() * 100)],
        ['2023-10-07 08:00:00', Math.round(Math.random() * 100)],
        ['2023-10-07 09:00:00', Math.round(Math.random() * 100)],
        ['2023-10-07 10:00:00', Math.round(Math.random() * 100)],
        ['2023-10-07 11:00:00', Math.round(Math.random() * 100)],
        ['2023-10-07 12:00:00', Math.round(Math.random() * 100)],
        ['2023-10-07 13:00:00', Math.round(Math.random() * 100)],
        ['2023-10-07 14:00:00', Math.round(Math.random() * 100)],
        ['2023-10-07 15:00:00', Math.round(Math.random() * 100)]
      ]
    },
    {
      name: '累计热量',
      type: 'line',
      smooth: true,
      symbol: 'none',
      yAxisIndex: 2,
      data: [
        ['2023-10-01 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-01 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-02 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-03 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-04 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-05 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-06 15:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 08:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 09:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 10:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 11:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 12:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 13:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 14:00:00', Math.round(Math.random() * 500)],
        ['2023-10-07 15:00:00', Math.round(Math.random() * 500)]
      ]
    }
  ]
};

onMounted(() => {
  // 图表初始化
  const chart = echarts.init(stackedRef.value);
  chart.setOption(options1);

  getDevice();
  getParam();
  getPortion();
  getDeviceInfo();

  // 大小自适应
  window.addEventListener('resize', () => {
    chart.resize();
  });
});

function getDevice() {
  //获取设备
  const params = {};
  getDevices().then((res: any) => {
    if (res.code === 200) {
      deviceData.value = res.data;
    }
  });
}
function getParam() {
  //获取参数
  const params = {};
  getParams().then((res: any) => {
    if (res.code === 200) {
      parameterData.value = res.data;
    }
  });
}
function getPortion() {
  //获取分区
  const params = {};
  getPortions().then((res: any) => {
    if (res.code === 200) {
      partitionData.value = res.data;
    }
  });
}
function getDeviceInfo() {
  //获取折线图数据
  const params = filterForm;
  getDeviceInfos(params).then((res: any) => {
    if (res.code === 200) {
    }
  });
}

function timeChange(res: any) {
  //时间区间确认
  filterForm.startTime = res[0];
  filterForm.endTime = res[1];
}

function deviceChange(res: any) {
  //设备选择确认
  searchForm.parameter = [];
  multipleLimit.value = res.length <= 1 ? 0 : 1;
  filterForm.deviceUuid = res.toString();
}
function parameterChange(res: any) {
  //参数选择确认
  filterForm.paramCode = res.toString();
}
function partitionChange(res: string) {
  //分区确认
  filterForm.partion = res;
}
const submitForm = (formEl: FormInstance | undefined) => {
  //筛选确认
  if (!formEl) return;
  formEl.validate(valid => {
    if (valid) {
      getDeviceInfo();
      console.log('submit:', filterForm);
    } else {
      console.log('error submit!');
      return false;
    }
  });
};
const resetForm = (formEl: FormInstance | undefined) => {
  //筛选重置
  if (!formEl) return;
  formEl.resetFields();
  filterForm.startTime = '';
  filterForm.endTime = '';
  filterForm.deviceUuid = '';
  filterForm.paramCode = '';
  filterForm.partion = '';
};
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>