pms-aomei/src/views/modules/pms/carHistory/components/temperatureDialog.vue

<template>
  <el-dialog
    :visible="visible"
    title="烧制温度"
    class="temperature-dialog"
    width="90%"
    @close="handleClose"
    :destroy-on-close="false"
    :close-on-click-modal="false">
    <div class="data-list">
      <BaseListTable
        v-loading="tableLoading"
        style="height: 90%"
        :table-config="{ height: '100%' }"
        :column-config="tableConfig"
        :table-data="dataList"
        @operate-event="handleOperate"
        :current-page="page"
        :current-size="size"
        :refresh-layout-key="refreshLayoutKey" />
      <el-pagination
        class=""
        style="position: absolute; bottom: 0; left: 50%; transform: translateX(-50%)"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page.sync="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="size"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    <div class="temp-chart" style="height: 100%; overflow: hidden">
      <div id="temp-chart" class="temp-chart__inner" style="height: 100%" />
      <!-- <div id="lambda-chart" class="lambda-chart__inner" style="height: 50%; background: #f001;" /> -->
    </div>
  </el-dialog>
</template>

<script>
import BaseListTable from "@/components/BaseListTable.vue";
import loadChartConfig from "./configs/chart";
import tableConfig from "./configs/tableProps";
import * as echarts from "echarts";

export default {
  name: "TemperatureDialog",
  components: { BaseListTable },
  props: {},
  data() {
    return {
      visible: false,
      hisId: null,
      tableConfig,
      chart: null,
      dataList: [],
      page: 1,
      size: 100,
      tableLoading: false,
      refreshLayoutKey: 0,
      totalPage: 0,
    };
  },
  activated() {
    this.refreshLayoutKey = Math.random();
  },
  mounted() {},
  watch: {
    dataList: {
      handler: function (val) {
        this.drawChart(val);
      },
    },
  },
  methods: {
    init(id) {
      this.hisId = id;
      this.visible = true;
      this.$nextTick(() => {
        this.getList();
      });
    },
    getList() {
      // this.dataList = [
      //   {
      //     code: "1",
      //     temp1: 39,
      //     press1: 12,
      //     press2: 10,
      //     remark: 9.9,
      //     createTime: "2021-09-09 12:00:00",
      //   },
      //   {
      //     code: "2",
      //     temp1: 49,
      //     press1: 11,
      //     press2: 32,
      //     remark: 9.9,
      //     createTime: "2021-09-09 12:00:00",
      //   },
      //   {
      //     code: "3",
      //     temp1: 59,
      //     press1: 32,
      //     press2: 43,
      //     remark: 39,
      //     createTime: "2021-09-09 12:00:00",
      //   },
      //   {
      //     code: "1",
      //     temp1: 39,
      //     press1: 21,
      //     press2: 94,
      //     remark: 19,
      //     createTime: "2021-09-09 12:00:00",
      //   },
      //   {
      //     code: "1",
      //     temp1: 22,
      //     press1: 55,
      //     press2: 42,
      //     remark: 98,
      //     createTime: "2021-09-09 12:00:00",
      //   },
      // ];
      // return;

      this.tableLoading = true;
      this.$http
        .post("/pms/kilnPosHistory/pageView", {
          page: this.page,
          limit: this.size,
          hisId: this.hisId,
        })
        .then(({ data: res }) => {
          //console.log("temp dialog res", res);

          this.tableLoading = false;
          if (res.code === 0) {
            if ("list" in res.data) {
              this.dataList = res.data.list;
              this.totalPage = res.data.total;
            } else if (Array.isArray(res.data)) {
              this.dataList = res.data;
              this.totalPage = res.data.length;
            } // else ...
          } else {
            this.dataList.splice(0);
            this.totalPage = 0;
          }
        });
    },
    drawChart() {
      // 根据 dataList 绘制折线图
      if (!this.chart) this.chart = echarts.init(document.getElementById("temp-chart"));
      // const y_data = Array(65).fill(0)
      // debugger;
      this.chart.setOption(
        loadChartConfig({
          x_data: null,
          y_data: this.dataList.map((i) => i.temp1),
        },
        {
          gas: this.dataList.map((i) => i.press2),
          lambda: this.dataList.map((i) => i.remark),
        })
      );
    },
    handleOperate() {},
    handlePageChange(page) {
      this.page = page;
      this.getList();
    },
    handleSizeChange(size) {
      this.size = size;
      this.getList();
    },
    handleClose() {
      setTimeout(() => {
        this.$emit("destroy-dialog");
      }, 300);
      this.visible = false;
    },
  },
};
</script>

<style scoped>
.temperature-dialog >>> .el-dialog__body {
  height: 70vh;
  display: flex;
}

.data-list,
.temp-chart {
  /* border: 1px solid #ccc; */
  width: 45%;
  overflow-y: auto;
  position: relative;
}

.temp-chart {
  flex: 1;
  /* margin-left: 18px; */
  padding-left: 10px;

  /* border-left: 1px solid #ccc; */
  /* background-color: lightblue; */
}
</style>