admin-ui/src/views/iot/dataAnalysis/IndicatorAggregation/index.vue

<template>
  <div class="page">
    <el-card shadow="nover">
      <el-form inline>
        <el-form-item label="选择产品：" prop="productKey">
          <el-select v-model="params.productKey" filterable placeholder="请选择产品" @change="productChange">
            <el-option v-for="item in productList" :key="item.key" :label="item.name" :value="item.key">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; font-size: 13px">{{ item.key }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择设备：" prop="deviceKey">
          <el-select v-model="params.deviceKey" filterable placeholder="请选择设备">
            <el-option v-for="item in deviceList" :key="item.key" :label="item.name" :value="item.key">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; font-size: 13px;margin-left: 12px;">{{ item.key }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择属性：" prop="properties">
          <el-select v-model="params.properties" filterable placeholder="请选择属性" @change="propertyChange">
            <el-option v-for="item in propertyList" :key="item.key" :label="item.name" :value="item.key">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; font-size: 13px;margin-left: 12px;">{{ item.key }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择时间：" prop="dateRange">
          <el-date-picker v-model="params.dateRange" style="width: 360px" value-format="YYYY-MM-DD HH:mm:ss" date-format="YYYY-MM-DD" time-format="HH:mm" format="YYYY-MM-DD HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期" :clearable="false"></el-date-picker>
        </el-form-item>
        <el-form-item label="聚合粒度：" prop="dateType">
          <el-radio-group v-model="params.dateType" @change="dateTypeChange">
            <el-radio-button label="1">5分钟</el-radio-button>
            <el-radio-button label="2">1小时</el-radio-button>
            <el-radio-button label="3">1天</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="ml10" @click="getData">
            <el-icon>
              <ele-Search />
            </el-icon>
            查询
          </el-button>
        </el-form-item>
      </el-form>
      <div class="title">
        <el-icon style="margin-right: 5px;">
          <ele-Histogram />
        </el-icon>
        指标聚合统计图
      </div>
      <Chart class="flex1" height="12vw" ref="chart" :autoLoading="false" style="margin-top: 20px;" v-loading="loading"></Chart>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import api from '/@/api/device';
import dayjs from 'dayjs';
import Chart from '/@/components/chart/index.vue'
import { getLineOption } from '/@/components/chart/options'

const productList = ref<any[]>([])
const deviceList = ref<any[]>([])
const propertyList = ref<any[]>([])
const chart = ref()
const loading = ref(false)
const propertyName = ref('')

// 聚合力度可选值为"5分钟"、"1小时"和"1天"，对应的最大时间范围为"一周"、"一个月"和"一年"。

const params = reactive({
  productKey: '',
  deviceKey: '',
  properties: '',
  dateType: '1',
  dateRange: [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD HH:mm:00')]
})

function dateTypeChange(dateType: string) {
  switch (dateType) {
    case '1':
      params.dateRange = [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD HH:mm:00')]
      break;
    case '2':
      params.dateRange = [dayjs().subtract(7, 'days').format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD HH:mm:00')]
      break;
    case '3':
      params.dateRange = [dayjs().subtract(30, 'days').format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD HH:mm:00')]
      break;

    default:
      break;
  }

  getData()
}

api.product.getLists({ status: 1 }).then((res: any) => {
  productList.value = res.product || [];
});

function getData() {
  const diffDay = dayjs(params.dateRange[1], 'YYYY-MM-DD HH:mm:ss').diff(dayjs(params.dateRange[0], 'YYYY-MM-DD HH:mm:ss'), 'days')
  if (params.dateType === '1' && diffDay > 7) return ElMessage('时间范围不能超过7天')
  if (params.dateType === '2' && diffDay > 31) return ElMessage('时间范围不能超过1个月')
  if (params.dateType === '3' && diffDay > 366) return ElMessage('时间范围不能超过一年')

  if (!params.productKey) return ElMessage('请选选择产品')
  if (!params.deviceKey) return ElMessage('请选选择设备')
  if (!params.properties) return ElMessage('请选选择属性')

  loading.value = true
  api.analysis.deviceIndicatorPolymerize(params).then((data: any[]) => {
    const res = data || []
    chart.value.draw(
      getLineOption({
        datas: [res.map(item => item.dataAverageValue), res.map(item => item.dataMaxValue), res.map(item => item.dataMinValue)],
        xAxis: res.map(item => item.date),
        legend: [propertyName.value + '平均值', propertyName.value + '最大值', propertyName.value + '最小值']
      })
    )
  }).finally(() => loading.value = false)
}

function productChange(productKey: string) {
  params.deviceKey = ''
  params.properties = ''
  deviceList.value = []
  propertyList.value = []
  api.device.allList({ productKey }).then((res: any) => {
    deviceList.value = res.device;
  });
  api.product.getpropertyList({ productKey }).then((res: any) => {
    propertyList.value = res;
  });
}

function propertyChange(property: string) {
  propertyName.value = propertyList.value.find(item => item.key === property)?.name
}

</script>
<style scoped>
.title {
  font-size: 14px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  padding-bottom: 6px;
}
</style>