done 1019

2023-10-19 16:12:33 +08:00
parent 002c5a80e5
commit 41f2f01fd7
3 changed files with 259 additions and 95 deletions
--- a/src/views/modules/pms/carHistory/components/ListViewWithHead.vue
+++ b/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({
--- a/src/views/modules/pms/carHistory/components/configs/chart.js
+++ b/src/views/modules/pms/carHistory/components/configs/chart.js
@@ -2,97 +2,206 @@ const colors = {
  line: '#555'
 }

-export default (x_data, y_data) => ({
-  title: {
-    text: "窑车温度",
-  },
-  grid: [
-    {
-      id: 'temp-grid',
-      show: true,
-      top: 96,
-      left: 56,
-      right: 56,
-      bottom: 32,
+export default ({ x_data, y_data }, graph2) => {
+  // debugger;
+
+  return {
+    title: {
+      text: "窑车温度",
    },
-    {
-      id: 'lambda-grid',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0
-    }
-  ],
-  xAxis: [
-    {
-      gridIndex: 0,
-      id: 'temp-x-axis',
-      type: "category",
-      data: Array(65)
-        .fill(1)
-        .map((val, index) => {
-          return val + index;
-        }),
-      axisLine: {
-        lineStyle: {
-          color: colors.line
+
+    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',
+        top: 72,
+        left: 56,
+        right: 56,
+        bottom: 24,
+        height: 180,
+      },
+      {
+        id: 'lambda-grid',
+        top: 320,
+        left: 56,
+        right: 56,
+        bottom: 24,
+        height: 180,
+      }
+    ],
+    xAxis: [
+      {
+        gridIndex: 0,
+        id: 'temp-x-axis',
+        type: "category",
+        data: Array(65)
+          .fill(1)
+          .map((val, index) => {
+            return val + index;
+          }),
+        axisLine: {
+          lineStyle: {
+            color: colors.line
+          },
        },
      },
-    },
-    {
-      gridIndex: 1,
-      id: 'lambda-x-axis',
-      data: Array(65)
-        .fill(1)
-        .map((val, index) => {
-          return val + index;
-        }),
-      axisLine: {
-        lineStyle: {
-          color: colors.line
+      {
+        gridIndex: 1,
+        id: 'lambda-x-axis',
+        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,
+    ],
+    yAxis: [
+
+      {
+        gridIndex: 0,
+        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} ℃'
+        },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: '#ddd'
+          }
+        },
      },
-    },
-    axisLabel: {
-      formatter: '{value} ℃'
-    },
-    splitLine: {
-      lineStyle: {
-        color: '#ddd'
+      {
+        gridIndex: 1,
+        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'
    },
-  },
-  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",
-    },
-  ],
-})
+    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",
+      },
+    ],
+  }
+}
--- a/src/views/modules/pms/carHistory/components/temperatureDialog.vue
+++ b/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 id="temp-chart" class="temp-chart__inner" style="height: 100%; background:#ccc;" />
+    <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>
@@ -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(
-          null,
-          this.dataList.map((i) => i.temp1)
-        )
+        loadChartConfig({
+          x_data: null,
+          y_data: this.dataList.map((i) => i.temp1),
+        })
      );
    },
    handleOperate() {},