update 订单详情-窑车详情

public/index.html

@@ -38,9 +38,9 @@
   <% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
     <script>
     // window.SITE_CONFIG['apiURL'] = 'http://192.168.1.103:8080/pms-am';
-    // window.SITE_CONFIG['apiURL'] = 'http://192.168.1.49:8080/pms-am'; // tengyun
+    window.SITE_CONFIG['apiURL'] = 'http://192.168.1.49:8080/pms-am'; // tengyun
     // window.SITE_CONFIG['apiURL'] = 'http://192.168.1.62:8080/pms-am'; // tao
-    window.SITE_CONFIG['apiURL'] = 'http://192.168.1.21:8080/pms-am'; // xv
+    // window.SITE_CONFIG['apiURL'] = 'http://192.168.1.21:8080/pms-am'; // xv
     // window.SITE_CONFIG['apiURL'] = 'http://localhost:3000/pms-am'; // xv
     </script>
   <% } %>

src/views/modules/pms/finishedOrder/components/tabs/carDetail.vue

@@ -24,6 +24,13 @@
       :dialog-visible.sync="carPayloadDialogVisible"
       :configs="carPayloadDialogConfigs" />
     <!-- @refreshDataList="getList" -->
+
+    <TemperatureDialog
+      ref="temperature-dialog"
+      v-if="!!temperatureDialogVisible"
+      :dialog-visible.sync="temperatureDialogVisible"
+      @refreshDataList="getAList" />
+
   </div>
 </template>
 
@@ -32,11 +39,12 @@ import BaseListTable from "@/components/BaseListTable.vue";
 import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
 // import StateSelect from '@/components/StateSelect.vue';
 import { timeFilter, dictFilter } from "@/utils/filters";
+import TemperatureDialog from "./temperatureDialog.vue";
 import DialogCarPayload from "@/components/DialogCarPayload.vue";
 
 export default {
   name: "CarDetailTag",
-  components: { BaseListTable, DialogCarPayload },
+  components: { BaseListTable, DialogCarPayload, TemperatureDialog },
   props: {
     orderId: {
       type: String,
@@ -67,6 +75,7 @@ export default {
           width: 90,
           subcomponent: TableOperaionComponent,
           options: [
+            { name: "temperature", label: "烧制温度", icon: "odometer", color: '#ff4d00' },
             { name: "to-car-payload", label: "装载详情", icon: "shopping-cart-full" }, // or  el-icon-box
             // { name: "delete", label: "删除", icon: "delete", emitFull: true, promptField: "code" },
           ],
@@ -99,6 +108,7 @@ export default {
           ],
         },
       },
+      temperatureDialogVisible: false,
     };
   },
   watch: {
@@ -178,10 +188,22 @@ export default {
         case "to-car-payload": {
           // open dialog instead of redirect to a new page
           this.openCarPayloadDialog(data);
+          break;
+        }
+        case "temperature": {
+          this.openTemperatureDialog(data);
+          break;
         }
       }
     },
 
+    openTemperatureDialog(id) {
+      this.temperatureDialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs["temperature-dialog"].init(id);
+      });
+    },
+
     openCarPayloadDialog(id) {
       this.carPayloadDialogVisible = true;
       this.$nextTick(() => {

src/views/modules/pms/finishedOrder/components/tabs/configs/chart.js

@@ -0,0 +1,70 @@
+const colors = {
+  line: '#555'
+}
+
+export default (x_data, y_data) => ({
+  title: {
+    text: "窑车温度",
+  },
+  grid: {
+    show: true,
+    top: 96,
+    left: 52,
+    right: 32,
+    bottom: 24,
+  },
+  xAxis: {
+    type: "category",
+    data: Array(65)
+      .fill(1)
+      .map((val, index) => {
+        return val + index;
+      }),
+    axisLine: {
+      lineStyle: {
+        color: colors.line
+      },
+    },
+  },
+  yAxis: {
+    type: "value",
+    name: "温度",
+    nameTextStyle: {
+      fontSize: 18,
+      align: "right",
+      verticalAlign: "bottom",
+      lineHeight: 36,
+      padding: 10,
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: colors.line,
+      },
+    },
+    axisLabel: {
+      formatter: '{value} ℃'
+    },
+    splitLine: {
+      lineStyle: {
+        color: '#ddd'
+      }
+    },
+  },
+  tooltip: {
+    trigger: 'axis',
+    formatter: '<strong style="font-size: 16px">位置</strong> ({b})  <span style="font-size: 16px; font-weight: bold;">{c}</span> ℃'
+  },
+  dataZoom: {
+    type: 'inside'
+  },
+  series: [
+    {
+      data: y_data,
+      // data: Array(65)
+      //   .fill(1)
+      //   .map((val) => Math.floor(Math.random() * 1000)),
+      type: "line",
+    },
+  ],
+})

src/views/modules/pms/finishedOrder/components/tabs/configs/tableProps.js

@@ -0,0 +1,26 @@
+import { timeFilter } from '@/utils/filters'
+
+export default [
+  // { type: 'index', label: '序号' },
+  // { prop: "createTime", label: "添加时间", filter: timeFilter },
+  // { prop: "stateDictValue", label: "状态", filter: v => (v !== null && v !== undefined) ? ['没有数据', '正常', '判废', '过渡'][v] : '-' }, // subcomponent
+  // { prop: "stateDictValue", label: "温度", subcomponent: StateSelect },
+  { width: 60, prop: "code", label: "位置" },
+  { width: 60, prop: "temp1", label: "温度" },
+  { width: 80, prop: "press1", label: "窑内压力" },
+  { width: 80, prop: "press2", label: "车下压力" },
+  { prop: "createTime", label: "时间", filter: timeFilter },
+  // { prop: "endTime", label: "结束时间", filter: timeFilter },
+  // {
+  //   prop: "operations",
+  //   name: "操作",
+  //   fixed: "right",
+  //   width: 150,
+  //   subcomponent: TableOperaionComponent,
+  //   options: [
+  //     { name: "temperature", label: "烧制温度", },
+  //     { name: "to-car-payload", label: "装载详情", icon: 'document' },
+  //     { name: "delete", label: "删除", icon: 'delete', emitFull: true, promptField: 'code' }
+  //   ],
+  // },
+];

src/views/modules/pms/finishedOrder/components/tabs/temperatureDialog.vue

@@ -0,0 +1,164 @@
+<template>
+  <el-dialog
+    :visible="visible"
+    title="烧制温度"
+    class="temperature-dialog"
+    width="80%"
+    @close="handleClose"
+    :append-to-body="true"
+    :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" style="height: 300px;">
+      <div id="temp-chart" class="temp-chart__inner" style="height: 100%;" />
+    </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.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 绘制折线图
+      if (!this.chart) this.chart = echarts.init(document.getElementById("temp-chart"));
+      // const y_data = Array(65).fill(0)
+      this.chart.setOption(loadChartConfig(null, this.dataList.map(i => i.temp1)));
+    },
+    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: 35%;
+  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>