park-h/src/components/temperature.vue

<template>
  <div class="box-bg">
    <div :style="{ width: '92%', height: '92%',margin: 'auto 3% auto 5%' }" id="temperature"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import * as echarts from "echarts";
import { getTeamAndHumidity } from "api/index";

export default defineComponent({
  name: "temperature",
  data() {
    return {
      myCharts: {},
      temps: [],
      time: null,
    };
  },

  computed: {
    // 温度
    tempArray() {
      const { temps } = this;
      let arr = [];
      if (temps && temps.length) {
        temps.forEach((item) => {
          arr.push(item.temp);
        });
      } else {
        arr = [45, 55, 56, 73, 76, 95, 98];
      }
      return arr;
    },

    // 时间
    timeArray() {
      const { temps } = this;
      let arr = [];
      if (temps && temps.length) {
        temps.forEach((item) => {
          arr.push(item.time);
        });
      } else {
        arr = ["10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00"];
      }
      return arr;
    },
  },

  watch: {
    temps: {
      deep: true,
      handler(value) {
        if (value) {
          this.getOptions();
        }
      },
    },
  },

  mounted() {
    setInterval(() => {
      // 获取数据
      this.getTeamAndHumidity();
    }, 3500);
    // 绘制图表
    this.getOptions();
  },

  unmounted() {
    clearInterval(this.time);
    this.time = null;
  },

  methods: {
    /** 查询温度与湿度
     * @param {number} endTime 结束时间
     * @param {number} startTime 开始时间
     * @param {number} warehouseId 仓库id
     */
    async getTeamAndHumidity() {
      try {
        const { parkId, warehouseId } = this.$route.query;
        const param = { parkId: parkId || 2, warehouseId: warehouseId || 7 };
        const data = await getTeamAndHumidity(param);
        this.temps = data.temps;
      } catch (error) {
        console.log("error: ", error);
      }
    },

    getOptions() {
      // 绘制图表
      const { tempArray, timeArray } = this;
      // 基于准备好的dom，初始化echarts实例
      let temperature = document.getElementById("temperature");
      temperature.removeAttribute("_echarts_instance_");
      let myChart1 = echarts.init(temperature);

      myChart1.setOption({
        tooltip: {},
        grid: {
          left: "0",
          right: "6%",
          top: "25%",
          bottom: "0",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          data: timeArray,
        },
        yAxis: {
          type: "value",
          name: "℃",
          nameTextStyle: {
            color: "#fff",
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
        },
        series: [
          {
            name: "温度",
            type: "line",
            // lineStyle: {
            //   color: '#FC8452',
            // },
            // itemStyle: {
            //   normal: {
            //     color: '#FC8452',
            //   },
            // },
            smooth: true,
            data: tempArray,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          },
        ],
      });
    },
  },
});
</script>

<style scoped>
.box-bg {
  width: 100%;
  height: 100%;
}

.temperature {
  width: 1440rem;
  height: 1110rem;
}
</style>