chart.vue

<template>
  <div class="app-container">
    <el-form :inline="true" :model="form" size="mini">
      <el-form-item label="设备">
        <el-select
          v-model="watch_id"
          filterable
          placeholder="请输入设备名称"
          @change="onChange"
        >
          <el-option
            v-for="(item, index) in watchs"
            :key="index"
            :label="item.imei"
            :value="item.id"
          ></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">重置</el-button></el-form-item>
    </el-form>
    <LineChart :chartData="evm" :dataList="evmList"></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: [],
      form: {
        start: null,
        end: null,
      },
    };
  },
  components: {
    LineChart,
    LvglChart,
  },
  methods: {
    sendMsg() {
      this.socket.send("hello,world");
    },
    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() {
      let params = {
        watch: this.watch_id,
      };
      if (this.value2 && this.value2.length) {
        if (this.value2.length > 1) {
          params.start = Math.ceil(this.value2[0] / 1000);
          params.end = Math.ceil(this.value2[1] / 1000);
        } else {
          params.start = Math.ceil(this.value2[0] / 1000);
        }
      }
      getMonitorData(params)
        .then((res) => {
          if (res.type == "object") {
            this.evmList = res.data.evm
            this.lvglList = res.data.lvgl
            this.imageList = res.data.image
          } else {
            if (params.category == "evm") this.evmList = res.data
            else if (params.category == "lvgl") this.lvglList = res.data
            else if (params.category == "image") this.imageList = res.data
          }
        })
        .catch((err) => {
          this.$message.warning(err.msg);
        });
    },
    onChange(res) {
      var t = this.watchs.find((item) => {
        return item.id == res;
      });
      if (t) this.device = t.imei;
      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.processData()
    },
    processData() {
      this.evm = this.devices[this.device].evm;
      this.lvgl = this.devices[this.device].lvgl;
      this.image = this.devices[this.device].image;
    }
  },
  mounted() {},
  created() {
    this.socket = wsNotify;
    wsNotify.eventBus.$on("open", (message) => {
      this.sendMsg();
      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);
      });
    });

    this.fetchData();
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  & > div.page-wrapper {
    margin: 10px 0px;
  }
  #chart1 {
    width: 100%;
    height: 300px;
  }
}
</style>