done 1019

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

@@ -65,7 +65,14 @@ const DIALOG_CARPAYLOAD = "DialogCarPayload";
 
 export default {
   name: "ListViewWithHead",
-  components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm, DialogCarPayload, TemperatureDialog },
+  components: {
+    BaseSearchForm,
+    BaseListTable,
+    DialogWithMenu,
+    DialogJustForm,
+    DialogCarPayload,
+    TemperatureDialog,
+  },
   props: {
     tableConfig: {
       type: Object,
@@ -170,7 +177,7 @@ export default {
       // if (this.urls.pageIsPostApi) {
       // } else {
       // 默认是 get 方式请求 page
-      console.log("params: ", params);
+      // console.log("params: ", params);
       this.$http[this.urls.pageIsPostApi ? "post" : "get"](
         this.urls.page,
         this.urls.pageIsPostApi
@@ -416,7 +423,9 @@ export default {
         }
         case "detach": {
           return this.$http
-            .post(this.urls.detach, data /* { id: data } */, { headers: { "Content-Type": "application/json" } })
+            .post(this.urls.detach, data /* { id: data } */, {
+              headers: { "Content-Type": "application/json" },
+            })
             .then(({ data: res }) => {
               if (res.code === 0) {
                 this.$message({

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

@@ -2,25 +2,51 @@ const colors = {
   line: '#555'
 }
 
-export default (x_data, y_data) => ({
+export default ({ x_data, y_data }, graph2) => {
+  // debugger;
+
+  return {
     title: {
       text: "窑车温度",
     },
+
+    legend: {
+      icon: 'circle',
+      top: 280,
+      left: 'center',
+      itemHeight: 8,
+      itemWidth: 8
+    },
+
+    tooltip: {
+      show: true,
+      trigger: 'axis',
+      formatter: function (params) {
+        // debugger;
+        return `<span>位置${params[0].name}</span>` + params.map(item => {
+          return item.value ? `<div style="min-width: 180px; display: flex; justify-content: space-between;"><span>${item.seriesName}</span><span style="color: #888">${item.value}${item.seriesName == 'lambda' ? '' : item.seriesName == '温度' ? '℃' : 'm³'}</span></div>` : ''
+        }).join('')
+      }
+      // formatter: 
+      // '<strong style="font-size: 16px">位置</strong> ({b})  <span style="font-size: 16px; font-weight: bold;">{c}</span> ℃'
+    },
+
     grid: [
       {
         id: 'temp-grid',
-      show: true,
+        top: 72,
-      top: 96,
         left: 56,
         right: 56,
-      bottom: 32,
+        bottom: 24,
+        height: 180,
       },
       {
         id: 'lambda-grid',
-      top: 0,
+        top: 320,
-      left: 0,
+        left: 56,
-      right: 0,
+        right: 56,
-      bottom: 0
+        bottom: 24,
+        height: 180,
       }
     ],
     xAxis: [
@@ -54,15 +80,19 @@ export default (x_data, y_data) => ({
         }
       }
     ],
-  yAxis: {
+    yAxis: [
+
+      {
+        gridIndex: 0,
         type: "value",
+        interval: 20,
         name: "温度",
         nameTextStyle: {
-      fontSize: 18,
+          fontSize: 14,
           align: "right",
           verticalAlign: "bottom",
-      lineHeight: 36,
+          lineHeight: 20,
-      padding: 10,
+          padding: 6,
         },
         axisLine: {
           show: true,
@@ -74,25 +104,104 @@ export default (x_data, y_data) => ({
           formatter: '{value} ℃'
         },
         splitLine: {
+          show: false,
           lineStyle: {
             color: '#ddd'
           }
         },
       },
-  tooltip: {
+      {
-    trigger: 'axis',
+        gridIndex: 1,
-    formatter: '<strong style="font-size: 16px">位置</strong> ({b})  <span style="font-size: 16px; font-weight: bold;">{c}</span> ℃'
+        type: "value",
+        interval: 20,
+        name: "消耗量",
+        nameTextStyle: {
+          fontSize: 14,
+          align: "right",
+          verticalAlign: "bottom",
+          lineHeight: 20,
+          padding: 6,
         },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: colors.line,
+          },
+        },
+        axisLabel: {
+          formatter: '{value} m³'
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#ddd'
+          }
+        },
+      },
+      {
+        gridIndex: 0,
+        type: "value",
+        name: "lambda",
+        nameTextStyle: {
+          fontSize: 14,
+          align: "left",
+          verticalAlign: "bottom",
+          lineHeight: 20,
+          padding: 6,
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: colors.line,
+          },
+        },
+        axisLabel: {
+          formatter: '{value}'
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#ddd'
+          }
+        },
+      }
+
+    ],
+
     dataZoom: {
       type: 'inside'
     },
     series: [
       {
+        id: 'temp-series',
+        name: '温度',
         data: y_data,
+        xAxisIndex: 0,
+        yAxisIndex: 0,
+        // data: Array(65)
+        //   .fill(1)
+        //   .map((val) => Math.floor(Math.random() * 1000)),
+        type: "line",
+      },
+      {
+        id: 'gas-series',
+        name: '燃气消耗量(m³)',
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        data: Array(65)
+          .fill(1)
+          .map((val) => Math.floor(Math.random() * 128)),
+        type: "line",
+      },
+      {
+        id: 'lambda-series',
+        name: 'lambda',
+        data: [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 33, 11, 21, 3, 5, 67, 8, 88, 90, 12, 32, 2, 31, 33, null, null],
+        xAxisIndex: 0,
+        yAxisIndex: 2,
         // data: Array(65)
         //   .fill(1)
         //   .map((val) => Math.floor(Math.random() * 1000)),
         type: "line",
       },
     ],
-})
+  }
+}

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

@@ -29,8 +29,8 @@
         :total="totalPage"
         layout="total, sizes, prev, pager, next, jumper"></el-pagination>
     </div>
-    <div class="temp-chart" style="height: 100%; overflow: hidden;">
+    <div class="temp-chart" style="height: 100%; overflow: hidden">
-      <div id="temp-chart" class="temp-chart__inner" style="height: 100%; background:#ccc;" />
+      <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>
@@ -80,6 +80,50 @@ export default {
       });
     },
     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", {
@@ -89,6 +133,7 @@ export default {
         })
         .then(({ data: res }) => {
           //console.log("temp dialog res", res);
+
           this.tableLoading = false;
           if (res.code === 0) {
             if ("list" in res.data) {
@@ -122,11 +167,12 @@ export default {
       // 根据 dataList 绘制折线图
       if (!this.chart) this.chart = echarts.init(document.getElementById("temp-chart"));
       // const y_data = Array(65).fill(0)
+      // debugger;
       this.chart.setOption(
-        loadChartConfig(
+        loadChartConfig({
-          null,
+          x_data: null,
-          this.dataList.map((i) => i.temp1)
+          y_data: this.dataList.map((i) => i.temp1),
-        )
+        })
       );
     },
     handleOperate() {},