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

<template>
  <el-dialog
    :visible="visible"
    title="烧制温度"
    class="temperature-dialog"
    width="80%"
    @close="handleClose"
    :destroy-on-close="false">
    <div class="data-list">
      <BaseListTable
        v-loading="tableLoading"
        style="height: 85%"
        :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="[20, 50, 100]"
        :page-size="size"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    <div class="temp-chart">
      <div id="temp-chart" class="temp-chart__inner" />
    </div>
  </el-dialog>
</template>

<script>
import BaseListTable from "@/components/BaseListTable.vue";
import chartConfig from "./configs/chart";
import tableConfig from "./configs/tableProps";

export default {
  name: "TemperatureDialog",
  components: { BaseListTable },
  props: {},
  data() {
    return {
      visible: false,
      hisId: null,
      chartConfig,
      tableConfig,
      chart: null,
      dataList: [],
      page: 1,
      size: 100,
      tableLoading: false,
      refreshLayoutKey: 0,
      totalPage: 0,
    };
  },
  activated() {
    this.refreshLayoutKey = Math.random();
  },
  mounted() {},
  methods: {
    init(id) {
      this.hisId = id;
      this.visible = true;
      this.$nextTick(() => {
        this.getList();
      });
    },
    getList() {
      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;
            } else if (Array.isArray(res.data)) {
              this.dataList = res.data;
            } // else ...
          } else {
            this.dataList.splice(0);
          }
          this.dataList = [
            { id: 1, code: 1, press1: 1, press2: 1, createTime: "2023-4-21 01:00:00", temp1: 1000 },
            { id: 2, code: 2, press1: 2, press2: 2, createTime: "2023-4-21 02:00:00", temp1: 2000 },
            { id: 3, code: 3, press1: 3, press2: 3, createTime: "2023-4-21 03:00:00", temp1: 3000 },
            { id: 4, code: 4, press1: 4, press2: 4, createTime: "2023-4-21 04:00:00", temp1: 4000 },
            { id: 5, code: 5, press1: 5, press2: 5, createTime: "2023-4-21 05:00:00", temp1: 5000 },
            { id: 6, code: 6, press1: 6, press2: 6, createTime: "2023-4-21 06:00:00", temp1: 6000 },
            { id: 7, code: 7, press1: 7, press2: 7, createTime: "2023-4-21 07:00:00", temp1: 7000 },
            { id: 8, code: 8, press1: 8, press2: 8, createTime: "2023-4-21 08:00:00", temp1: 8000 },
            { id: 9, code: 9, press1: 9, press2: 9, createTime: "2023-4-21 09:00:00", temp1: 9000 },
            { id: 10, code: 10, press1: 10, press2: 10, createTime: "2023-4-21 10:00:00", temp1: 10000 },
            { id: 11, code: 11, press1: 11, press2: 11, createTime: "2023-4-21 11:00:00", temp1: 11000 },
            { id: 12, code: 12, press1: 12, press2: 12, createTime: "2023-4-21 12:00:00", temp1: 12000 },
          ];
        });
    },
    drawChart() {
      // 根据 dataList 绘制折线图
    },
    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;
  margin-left: 10px;
  border-left: 1px solid #ccc;
  background-color: lightblue;
}
</style>