screenFront/src/views/TrendChart/index.vue

<template>
  <div :class="$style['container']">
    <div class="header">
      <div class="title">
        <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.传感器监测走势图')" :titleTip="[]"
          :typeFun="['comback', 'time']" :alarmType="[]"></header2>
      </div>
    </div>
    <div class="content">
      <lineChart v-for="(calc, index) in calcArr"
        :style="{ width: width + 'px', height: height + 'px', 'min-width': 'calc(25% - 20px)' }" :calc="calc">
      </lineChart>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted, onUnmounted } from "vue"
import Header2 from "@/components/headerBox/header2.vue"
import lineChart from "./lineChart.vue";
import { getCurrent24Trend } from '@/http/Trend/index'
import { useRoute } from "vue-router";
import { useI18n } from 'vue-i18n'
let { t } = useI18n();
let route = useRoute()
let ids = route.query.ids as string
let unit = route.query.unit as string
let timer = null
type calcType = {
  name: string,
  math: {
            key: string,
            value: {
                max: number,
                min: number,
                avg: number,
                data: any[]
            }
        }[],
  data: any[]
}
let calcArr = ref<calcType[]>()
let width = ref(1500)
let height = ref(700)
async function ajax() {
  const res: any = await getCurrent24Trend(ids);
  let data = []
  if (res.code == 200) {
    // data = res.data.map((item: any) => {
    //   if (unit) {
    //     item.name = item.name + '(' + unit + ')'
    //   }
    //   return {
    //     name: item.name,
    //     type: item.type,
    //     max: item.max,
    //     min: item.min,
    //     avg: item.avg,
    //     data: item.date.map((key, value) => [key, item.value[value]])
    //   }
    // })

    let tempData = {}
    res.data.forEach((item: any) => {
        if (unit) {
        item.name = item.name + '(' + unit + ')'
      }
      if (tempData.hasOwnProperty(item.id)) {
        tempData[item.id].data.push({
          name: item.type,
          type: 'line',
          showSymbol: false,
          data: item.date.map((key, value) => [key, item.value[value]]),
          smooth: true,
        })
        tempData[item.id].math.push({
          key: item.type,
          value: {
            max: item.max,
            min: item.min,
            avg: item.avg
          }
        })
      } else {
        tempData[item.id] = {
          name: item.name,
          data: [{
            name: item.type,
            type: 'line',
            showSymbol: false,
            data: item.date.map((key, value) => [key, item.value[value]]),
            smooth: true,
          }],
          math: [{
            key: item.type,
            value: {
              max: item.max,
              min: item.min,
              avg: item.avg
            }
          }]
        }
      }
    })
    data = Object.values(tempData)
    calcArr.value = data
    if (data.length <= 4) {
      width.value = 1900 / data.length - (data.length - 1) * 20;
    } else if (data.length > 4 && data.length <= 8) {
      width.value = width.value / 4 - 3 * 20;
      height.value = 950 / 2 - 40;
    } else {
      width.value = width.value / 4 - 3 * 20;
      height.value = 950 / 3 - 60;
    }
  }
}
onMounted(() => {
  ajax()
  timer = setInterval(() => {
    ajax()
  }, 1000 * 60 * 10)
})
onUnmounted(() => {
  clearInterval(timer)
})
</script>
<style module>
.container {
  height: 1080px;
  width: 1920px;
  color: #20aec5;
  background-color: #100c2a;
  box-sizing: border-box;
}
</style>
<style scoped>
.content {
  height: 980px;
  width: 1920px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 5px;
}
</style>