From 41f2f01fd75787b3399453cba191c4d0e8173330 Mon Sep 17 00:00:00 2001 From: lb Date: Thu, 19 Oct 2023 16:12:33 +0800 Subject: [PATCH] done 1019 --- .../components/ListViewWithHead.vue | 15 +- .../carHistory/components/configs/chart.js | 281 ++++++++++++------ .../components/temperatureDialog.vue | 58 +++- 3 files changed, 259 insertions(+), 95 deletions(-) diff --git a/src/views/modules/pms/carHistory/components/ListViewWithHead.vue b/src/views/modules/pms/carHistory/components/ListViewWithHead.vue index 3a15460..b8dd1b2 100644 --- 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({ diff --git a/src/views/modules/pms/carHistory/components/configs/chart.js b/src/views/modules/pms/carHistory/components/configs/chart.js index 1125e95..6ce0432 100644 --- 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 `位置${params[0].name}` + params.map(item => { + return item.value ? `
${item.seriesName}${item.value}${item.seriesName == 'lambda' ? '' : item.seriesName == '温度' ? '℃' : 'm³'}
` : '' + }).join('') + } + // formatter: + // '位置 ({b}) {c} ℃' + }, + + 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: '位置 ({b}) {c} ℃' - }, - dataZoom: { - type: 'inside' - }, - series: [ - { - data: y_data, - // data: Array(65) - // .fill(1) - // .map((val) => Math.floor(Math.random() * 1000)), - type: "line", - }, - ], -}) \ No newline at end of file + 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", + }, + ], + } +} \ No newline at end of file diff --git a/src/views/modules/pms/carHistory/components/temperatureDialog.vue b/src/views/modules/pms/carHistory/components/temperatureDialog.vue index 161756d..96441cb 100644 --- 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"> -
-
+
+
@@ -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() {},