chart.vue

<template>
  <div class="app-container">
    <el-form :inline="true" ref="query" size="mini">
      <el-form-item label="设备">
        <el-select
          v-model="device"
          filterable
          placeholder="请输入设备名称"
          @change="onChange"
        >
          <el-option
            v-for="(item, index) in watchs"
            :key="index"
            :label="item.imei"
            :value="item.imei"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        ><el-button type="primary" @click="onSubmit"
          >查询</el-button
        ></el-form-item
      >
      <el-form-item><el-button @click="onReset('query')">重置</el-button></el-form-item>
    </el-form>
    <LineChart :chartData="evm"></LineChart>
    <LvglChart :chartData="lvgl"></LvglChart>
  </div>
</template>
<script>
import { getWatchList, getMonitorData } from "@/api/index";
import LineChart from "./components/EvmChart";
import LvglChart from "./components/LvglChart";
import { wsNotify } from "@/utils/eventBus.js";
export default {
  name: "AppChart",
  data() {
    return {
      socket: null,
      watchs: [],
      watch_id: null,
      device: null,
      devices: {},
      isLoading: false,
      evm: {},
      evmList: [],
      lvgl: {},
      lvglList: [],
      image: {},
      imageList: [],
    };
  },
  components: {
    LineChart,
    LvglChart,
  },
  methods: {
    fetchData() {
      this.isLoading = true;
      getWatchList()
        .then((res) => {
          if (res.code == 200) this.watchs = res.data;
        })
        .catch((err) => {
          this.$message.warning(err.msg)
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    queryData() {
      getMonitorData({
        watch: this.watch_id,
      })
        .then((res) => {
          if (res.type == "object") {
            this.evmList = res.data.evm
            this.lvglList = res.data.lvgl
            this.imageList = res.data.image
          }
        })
        .catch((err) => {
          this.$message.warning(err.msg)
        });
    },
    onChange() {
      this.processData()
    },
    onSubmit() {
      this.queryData()
    },
    onReset(formName) {
      this.$refs[formName].resetFields()
      this.fetchData()
    },
    handleMessage(message) {
      if (!this.device) this.device = message.imei;
      this.devices[message.imei] = message;
      this.watchs.push({
        imei: message.imei,
        id: this.watchs.length
      })
      this.processData()
    },
    processData() {
      if (this.devices[this.device]) {
        if (this.devices[this.device].evm) this.evm = this.devices[this.device].evm;
        if (this.devices[this.device].lvgl) this.lvgl = this.devices[this.device].lvgl;
        if (this.devices[this.device].image) this.image = this.devices[this.device].image;
      }
    }
  },
  mounted() {},
  created() {
    this.socket = wsNotify;
    wsNotify.eventBus.$on("open", (message) => {
      this.$nextTick(() => {
        console.log(message);
      });
    });
    wsNotify.eventBus.$on("close", (message) => {
      this.$nextTick(() => {
        console.log(message);
      });
    });
    wsNotify.eventBus.$on("message", (message) => {
      this.$nextTick(() => {
        console.log(message);
        this.handleMessage(message);
      });
    });
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  & > div.page-wrapper {
    margin: 10px 0px;
  }
  #chart1 {
    width: 100%;
    height: 300px;
  }
}
</style>