done 窑车温度

src/views/modules/pms/carHistory/components/configs/chart.js

@@ -1,15 +1,70 @@
-export default {
+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',
+    type: "category",
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    data: Array(65)
+      .fill(1)
+      .map((val, index) => {
+        return val + index;
+      }),
+    axisLine: {
+      lineStyle: {
+        color: colors.line
+      },
+    },
   },
   yAxis: {
-    type: 'value'
+    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: [150, 230, 224, 218, 135, 147, 260],
+      data: y_data,
-      type: 'line'
+      // data: Array(65)
-    }
+      //   .fill(1)
-  ]
+      //   .map((val) => Math.floor(Math.random() * 1000)),
-};
+      type: "line",
+    },
+  ],
+})

src/views/modules/pms/carHistory/components/configs/tableProps.js

@@ -5,10 +5,10 @@ export default [
   // { prop: "createTime", label: "添加时间", filter: timeFilter },
   // { prop: "stateDictValue", label: "状态", filter: v => (v !== null && v !== undefined) ? ['没有数据', '正常', '判废', '过渡'][v] : '-' }, // subcomponent
   // { prop: "stateDictValue", label: "温度", subcomponent: StateSelect },
-  { prop: "code", label: "位置" },
+  { width: 60, prop: "code", label: "位置" },
-  { prop: "temp1", label: "温度" },
+  { width: 60, prop: "temp1", label: "温度" },
-  { prop: "press1", label: "窑内压力" },
+  { width: 80, prop: "press1", label: "窑内压力" },
-  { prop: "press2", label: "车下压力" },
+  { width: 80, prop: "press2", label: "车下压力" },
   { prop: "createTime", label: "时间", filter: timeFilter },
   // { prop: "endTime", label: "结束时间", filter: timeFilter },
   // {

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

@@ -36,7 +36,7 @@
 
 <script>
 import BaseListTable from "@/components/BaseListTable.vue";
-import chartConfig from "./configs/chart";
+import loadChartConfig from "./configs/chart";
 import tableConfig from "./configs/tableProps";
 import * as echarts from "echarts";
 
@@ -48,7 +48,6 @@ export default {
     return {
       visible: false,
       hisId: null,
-      chartConfig,
       tableConfig,
       chart: null,
       dataList: [],
@@ -98,26 +97,27 @@ export default {
           } else {
             this.dataList.splice(0);
           }
-          this.dataList = [
+          // this.dataList = [
-            { id: 1, code: 1, press1: 1, press2: 1, createTime: "2023-4-21 01:00:00", temp1: 1000 },
+          //   { 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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 },
+          //   { 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"));
-      this.chart.setOption(this.chartConfig);
+      // const y_data = Array(65).fill(0)
+      this.chart.setOption(loadChartConfig(null, this.dataList.map(i => i.temp1)));
     },
     handleOperate() {},
     handlePageChange(page) {
@@ -147,7 +147,7 @@ export default {
 .data-list,
 .temp-chart {
   /* border: 1px solid #ccc; */
-  width: 45%;
+  width: 35%;
   overflow-y: auto;
   position: relative;
 }
@@ -157,7 +157,7 @@ export default {
   /* margin-left: 18px; */
   padding-left: 10px;
   margin-left: 10px;
-  border-left: 1px solid #ccc;
+  /* border-left: 1px solid #ccc; */
-  background-color: lightblue;
+  /* background-color: lightblue; */
 }
 </style>