diff --git a/.env.development b/.env.development index eb84861..c000d60 100644 --- a/.env.development +++ b/.env.development @@ -7,9 +7,9 @@ ENV = 'development' # 开发环境 # VUE_APP_BASE_API = '/dev-api' # 后台 -# VUE_APP_BASE_API = 'http://192.168.1.222:8080' +VUE_APP_BASE_API = 'http://192.168.1.222:8080' # 海湾酒店-云端 -VUE_APP_BASE_API = 'http://106.55.173.225:8090' +# VUE_APP_BASE_API = 'http://106.55.173.225:8090' # 路由懒加载 VUE_CLI_BABEL_TRANSPILE_MODULES = true diff --git a/src/assets/flowimg/closepum.png b/src/assets/flowimg/closepum.png index 7270e65..b461c32 100644 Binary files a/src/assets/flowimg/closepum.png and b/src/assets/flowimg/closepum.png differ diff --git a/src/assets/flowimg/standbyhotpump.png b/src/assets/flowimg/standbyhotpump.png new file mode 100644 index 0000000..7a2243e Binary files /dev/null and b/src/assets/flowimg/standbyhotpump.png differ diff --git a/src/assets/flowimg/starthotpum.png b/src/assets/flowimg/starthotpum.png index fae136d..2995b5a 100644 Binary files a/src/assets/flowimg/starthotpum.png and b/src/assets/flowimg/starthotpum.png differ diff --git a/src/assets/flowimg/waterBox.png b/src/assets/flowimg/waterBox.png index c6ce38b..2bbb35e 100644 Binary files a/src/assets/flowimg/waterBox.png and b/src/assets/flowimg/waterBox.png differ diff --git a/src/assets/icons/svg/hotPumpLog.svg b/src/assets/icons/svg/hotPumpLog.svg new file mode 100644 index 0000000..00b4aa1 --- /dev/null +++ b/src/assets/icons/svg/hotPumpLog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss index e522185..a0ce138 100644 --- a/src/assets/styles/element-ui.scss +++ b/src/assets/styles/element-ui.scss @@ -1438,4 +1438,24 @@ flex-direction: row; align-items: center; flex-wrap: nowrap; +} +.el-table--group, +.el-table--border { + border: 1px solid #00264f !important; +} +.el-table--border .el-table__cell { + border-right: 1px solid #00264f !important; +} +.el-table--border th.el-table__cell { + border-bottom: 1px solid #00264f !important; +} +.el-table__expand-icon{ + color: #fff !important; +} +.el-tag { + font-weight: bold !important; +} +.el-tag.el-tag--success{ + font-weight: bold !important; + color: #03a249 !important; } \ No newline at end of file diff --git a/src/views/components/monitor/hotWaterMonitor.vue b/src/views/components/monitor/hotWaterMonitor.vue index a274d5f..63f93d8 100644 --- a/src/views/components/monitor/hotWaterMonitor.vue +++ b/src/views/components/monitor/hotWaterMonitor.vue @@ -48,8 +48,8 @@
无线网关
回水阀
房间
-
水箱1(总容量:2.5米)
-
水箱2(总容量:2.5米)
+
水箱1(总容量:30吨)
+
水箱2(总容量:30吨)
- 实际容量:{{ progress2 }}米 + 实际高度:{{ progress2 }}米 +
实际容量:{{ getActualCapacity(progress2) }}吨
- 实际容量:{{ progress2 }}米 + 实际高度:{{ progress2 }}米 +
实际容量:{{ getActualCapacity(progress2) }}吨
@@ -211,12 +213,14 @@
- 实际容量:{{ progress1 }}米 + 实际高度:{{ progress1 }}米 +
实际容量:{{ getActualCapacity(progress1) }}吨
- 实际容量:{{ progress1 }}米 + 实际高度:{{ progress1 }}米 +
实际容量:{{ getActualCapacity(progress1) }}吨
@@ -232,7 +236,7 @@
低区回水泵1
低区回水泵2
回水管
-
水箱(总容量:2.5米)
+
水箱(总容量:30吨)
@@ -310,12 +314,14 @@
- 实际容量:{{ progress1 }}米 + 实际高度:{{ progress1 }}米 +
实际容量:{{ getActualCapacity(progress1) }}吨
- 实际容量:{{ progress1 }}米 + 实际容量:{{ progress1 }}米 +
实际高度:{{ getActualCapacity(progress1) }}吨
@@ -379,14 +385,15 @@ @@ -501,10 +508,10 @@ {{ hotPumpOperateData.alarmStatus - }} + }} {{ hotPumpOperateData.alarmStatus - }} + }} @@ -512,7 +519,7 @@ {{ hotPumpOperateData.runningStatus - }} + }} 不运行 @@ -564,10 +571,10 @@ {{ hotPumpOperateData.alarmStatus - }} + }} {{ hotPumpOperateData.alarmStatus - }} + }} @@ -575,7 +582,7 @@ {{ hotPumpOperateData.runningStatus - }} + }} 不运行 @@ -584,10 +591,10 @@ {{ hotPumpOperateData.localRemoteStatus - }} + }} {{ hotPumpOperateData.localRemoteStatus - }} + }} @@ -612,7 +619,7 @@ export default { data() { return { loading: false, - dialogLoading:false, + dialogLoading: false, currentDate: new Date(), nowTimer: null, timer: null, // 用于存储定时器 ID @@ -693,14 +700,22 @@ export default { methods: { getImageSrc(item) { // console.log("item", item); - if (Number(item.runState) === 1 && Number(item.isFault) !== 1) { - // 使用 require 函数导入图片 - return require("@/assets/flowimg/starthotpum.png"); - } else if (Number(item.isFault) === 1) { + // 优先判断故障状态 + if (Number(item.isFault) === 1) { return require("@/assets/flowimg/badhotpum.png"); - } else { + } + + // 根据运行状态返回不同图片 + if (Number(item.runState) === 0) { return require("@/assets/flowimg/closehotpum.png"); + } else if (Number(item.runState) === 4) { + return require("@/assets/flowimg/starthotpum.png"); + } else if (Number(item.runState) === 9) { + return require("@/assets/flowimg/standbyhotpump.png"); } + + // 默认返回关闭状态 + return require("@/assets/flowimg/closehotpum.png"); }, getSysBuild() { floorTree().then((res) => { @@ -1007,7 +1022,7 @@ export default { res.rows.forEach((item) => { let deviceItem = { ...item, - runState: Number(item.runState) == 0 ? "0" : "1", //运行状态 + // runState: Number(item.runState) == 0 ? "0" : "1", //运行状态 upWaterState: Number(item.upWaterState) == 0 ? "0" : "1", //供水状态 isFault: Number(item.isFault) == 0 ? "0" : "1", //故障状态 }; @@ -1018,6 +1033,7 @@ export default { this.progress2 = 0; this.temdata1 = 0; this.temdata2 = 0; + this.webstate = 0; if (this.tableData.length > 0 && this.isShowHotWater) { // 获取数据 @@ -1040,8 +1056,14 @@ export default { this.progress1 = this.tableData[0].waterLevel1; this.temdata1 = this.tableData[0].tankWaterTemp; } + this.webstate = Number(this.tableData[0].gatewayStatus); } else { this.tableData = []; + this.progress1 = 0; + this.progress2 = 0; + this.temdata1 = 0; + this.temdata2 = 0; + this.webstate = 0; } }); }, @@ -1051,7 +1073,7 @@ export default { }, // 判断热泵是否运行 isHotPumpRunning() { - return this.tableData.some(item => Number(item.runState) !== 0); + return this.tableData.some(item => Number(item.runState) == 4); }, // 获取循环泵图片（通用方法） getCyclePumpImg(stateKey) { @@ -1091,7 +1113,7 @@ export default { console.log("点击循环泵", pumpName); this.currentPumpType = "cyclepump"; this.hotPumpTitle = pumpName; - this.loadOperateData("贵宾楼循环泵", pumpName); + this.loadOperateData("循环泵", pumpName); }, // 加载操作数据（通用方法） loadOperateData(groupName, itemName) { @@ -1161,6 +1183,11 @@ export default { // 如果计算的值大于100，则返回100 return Number(percentage) > 100 ? 100 : Number(percentage); }, + // 计算实际容量（根据实际高度计算） + getActualCapacity(actualHeight, totalHeight = 2.5, totalCapacity = 30) { + let actualCapacity = (actualHeight / totalHeight * totalCapacity).toFixed(2); + return Number(actualCapacity); + }, // 设置热泵开关状态 handleHotPump(item) { this.$confirm( @@ -1298,7 +1325,7 @@ export default { console.log("res.code:", res.code, "类型:", typeof res.code); console.log("res.code == 200:", res.code == 200); console.log("res.code === 200:", res.code === 200); - + if (res.code == 200) { console.log("进入 res.code == 200 分支"); this.$modal.msgSuccess("指令下发成功!"); @@ -1715,6 +1742,7 @@ export default { left: 2.2rem; z-index: 1; } + .text22 { position: absolute; top: 3.2rem; @@ -2087,9 +2115,23 @@ export default { color: #d22727; position: absolute; top: -0.3rem; - left:-0.5rem; + left: -0.5rem; + z-index: 3; + white-space: nowrap; + } + + .propo { + font-family: AdobeHeitiStd-Regular; + font-size: 0.17rem; + line-height: 0.2rem; + letter-spacing: 0rem; + color: #d22727; + position: absolute; + top: -0.6rem; + left: -0.5rem; z-index: 3; white-space: nowrap; + font-weight: bold; } } @@ -2120,10 +2162,24 @@ export default { color: #d22727; position: absolute; top: -0.3rem; - left:-0.5rem; + left: -0.5rem; z-index: 3; white-space: nowrap; } + + .propo { + font-family: AdobeHeitiStd-Regular; + font-size: 0.17rem; + line-height: 0.2rem; + letter-spacing: 0rem; + color: #d22727; + position: absolute; + top: -0.6rem; + left: -0.5rem; + z-index: 3; + white-space: nowrap; + font-weight: bold; + } } .progressContainer3 { @@ -2153,9 +2209,23 @@ export default { color: #d22727; position: absolute; top: -0.3rem; - left:-0.4rem; + left: -0.4rem; + z-index: 3; + white-space: nowrap; + } + + .propo { + font-family: AdobeHeitiStd-Regular; + font-size: 0.17rem; + line-height: 0.2rem; + letter-spacing: 0rem; + color: #d22727; + position: absolute; + top: -0.6rem; + left: -0.4rem; z-index: 3; white-space: nowrap; + font-weight: bold; } } @@ -2186,9 +2256,23 @@ export default { color: #d22727; position: absolute; top: -0.3rem; - left:-0.4rem; + left: -0.4rem; + z-index: 3; + white-space: nowrap; + } + + .propo { + font-family: AdobeHeitiStd-Regular; + font-size: 0.17rem; + line-height: 0.2rem; + letter-spacing: 0rem; + color: #d22727; + position: absolute; + top: -0.6rem; + left: -0.4rem; z-index: 3; white-space: nowrap; + font-weight: bold; } } @@ -2219,9 +2303,23 @@ export default { color: #d22727; position: absolute; top: -0.3rem; - left:-0.4rem; + left: -0.4rem; + z-index: 3; + white-space: nowrap; + } + + .propo { + font-family: AdobeHeitiStd-Regular; + font-size: 0.17rem; + line-height: 0.2rem; + letter-spacing: 0rem; + color: #d22727; + position: absolute; + top: -0.6rem; + left: -0.4rem; z-index: 3; white-space: nowrap; + font-weight: bold; } } @@ -2252,9 +2350,23 @@ export default { color: #d22727; position: absolute; top: -0.3rem; - left:-0.4rem; + left: -0.4rem; + z-index: 3; + white-space: nowrap; + } + + .propo { + font-family: AdobeHeitiStd-Regular; + font-size: 0.17rem; + line-height: 0.2rem; + letter-spacing: 0rem; + color: #d22727; + position: absolute; + top: -0.6rem; + left: -0.4rem; z-index: 3; white-space: nowrap; + font-weight: bold; } } diff --git a/src/views/hotWater/energyAnalysis/components/energyReport copy.vue b/src/views/hotWater/energyAnalysis/components/energyReport copy.vue new file mode 100644 index 0000000..65bcbcd --- /dev/null +++ b/src/views/hotWater/energyAnalysis/components/energyReport copy.vue @@ -0,0 +1,1132 @@ + + + + diff --git a/src/views/hotWater/energyAnalysis/components/energyReport.vue b/src/views/hotWater/energyAnalysis/components/energyReport.vue index 65bcbcd..859a5e1 100644 --- a/src/views/hotWater/energyAnalysis/components/energyReport.vue +++ b/src/views/hotWater/energyAnalysis/components/energyReport.vue @@ -20,11 +20,7 @@ {{ useWaterRadio }} - +
@@ -45,11 +41,7 @@ {{ useElectRadio }}
- +
@@ -70,79 +62,33 @@ {{ useUnitRadio }}
- +
- - + +
时间类型:
- + 日 月 年 - + - +
- +
至
- +
@@ -153,38 +99,17 @@
-
-
- {{ item.title }} -
-
- + - + @@ -221,8 +146,6 @@ export default { }, brokenInstanc: null, brokenOption: {}, - timeData2: [{ title: "用水量" }, { title: "用电量" }, { title: "单耗" }], - currentIndex: 0, brokenData1: [], brokenData2: [], brokenData3: [], @@ -264,10 +187,6 @@ export default { return false; } }, - handleEnter(index) { - this.currentIndex = index; - this.renderingBroken(); - }, /** 查询楼栋 */ getBuildList() { let data = { @@ -559,131 +478,78 @@ export default { } }, renderingBroken() { - let unit = ""; - let itemColor = ""; - if (this.currentIndex === 0) { - this.brokenOption.yAxis.name = "吨"; - this.brokenOption.yAxis.nameTextStyle = { - color: "rgba(255, 255, 255, 1)", - fontSize: 12, - }; - this.brokenOption.series[0].data = this.brokenData1; - this.brokenOption.series[0].itemStyle.color = "#d48e17"; - this.brokenOption.series[0].areaStyle.color.colorStops = [ - { - offset: 0, - color: "rgba(212, 142, 23, 0.3)", // 0% 处的颜色 + const titleFontSize = this.$refs.chart_ref.offsetWidth / 100; + var Min1 = 0, + Min2 = 0, + Max1 = Math.ceil(Math.max(...this.brokenData1, ...this.brokenData2) + 4), + Max2 = Math.ceil(Math.max(...this.brokenData3) + 4); + this.brokenOption.yAxis = [ + { + type: "value", + name: "用量", + // 设置 name 的样式 + nameTextStyle: { + color: "rgba(255, 255, 255, 1)", + fontSize: 12, }, - { - offset: 0.8, - color: "rgba(212, 142, 23,0)", // 100% 处的颜色 + // 修饰刻度标签的颜色即y坐标数据 + axisLabel: { + color: "rgba(255, 255, 255, 1)", }, - ]; - unit = "吨"; - itemColor = "#d48e17"; - } else if (this.currentIndex === 1) { - this.brokenOption.yAxis.name = "度"; - this.brokenOption.yAxis.nameTextStyle = { - color: "rgba(255, 255, 255, 1)", - fontSize: 12, - }; - this.brokenOption.series[0].data = this.brokenData2; - this.brokenOption.series[0].itemStyle.color = "#1ab395"; - this.brokenOption.series[0].areaStyle.color.colorStops = [ - { - offset: 0, - color: "rgba(26, 179, 149, 0.3)", // 0% 处的颜色 + // 显示y坐标轴 + axisLine: { + show: true, + lineStyle: { + color: "#365576", // 设置 y 轴线的颜色 + }, }, - { - offset: 0.8, - color: "rgba(26, 179, 149,0)", // 100% 处的颜色 + splitLine: { + lineStyle: { + color: "#1a3d62", // 设置分割线的颜色 + type: "dashed", // 设置分割线为虚线 + }, }, - ]; - unit = "度"; - itemColor = "#1ab395"; - } else if (this.currentIndex === 2) { - this.brokenOption.yAxis.name = "度/吨"; - this.brokenOption.yAxis.nameTextStyle = { - color: "rgba(255, 255, 255, 1)", - fontSize: 12, - }; - this.brokenOption.series[0].data = this.brokenData3; - this.brokenOption.series[0].itemStyle.color = "#1f8dee"; - this.brokenOption.series[0].areaStyle.color.colorStops = [ - { - offset: 0, - color: "rgba(31, 141, 238, 0.3)", // 0% 处的颜色 + scale: true, + min: Min1, + max: Max1, + splitNumber: 10, + interval: (Max1 - Min1) / 10, + }, + { + type: "value", + name: "单耗", + // 设置 name 的样式 + nameTextStyle: { + color: "rgba(255, 255, 255, 1)", + fontSize: 12, }, - { - offset: 0.8, - color: "rgba(31, 141, 238,0)", // 100% 处的颜色 + // 修饰刻度标签的颜色即y坐标数据 + axisLabel: { + color: "rgba(255, 255, 255, 1)", }, - ]; - unit = ""; - itemColor = "#1f8dee"; - } - // 保存当前索引用于闭包 - const currentIndex = this.currentIndex; - const titleFontSize = this.$refs.chart_ref.offsetWidth / 100; - // 动态设置 tooltip 格式化函数 - this.brokenOption.tooltip = { - trigger: "axis", - formatter: function (params) { - // 获取当前数据点信息 - const data = params[0]; - const month = data.name; - const value = data.value; - - // 根据索引返回不同内容 - if (currentIndex === 0) { - return `${month}
用水量: ${value} 吨`; - } else if (currentIndex === 1) { - return `${month}
用电量: ${value} 度`; - } else if (currentIndex === 2) { - return `${month}
单耗: ${value} 度/吨`; - } - }, - }; - this.brokenOption.series[0].markPoint = { - data: [ - { - type: 'max', - name: '最大值', - symbol: 'arrow', - symbolRotate: 180, - label: { - formatter: function (params) { - return params.value + unit; - } - } + // 显示y坐标轴 + axisLine: { + show: true, + lineStyle: { + color: "#365576", // 设置 y 轴线的颜色 }, - { - type: 'min', - name: '最小值', - symbol: 'arrow', - symbolRotate: 180, - label: { - formatter: function (params) { - return params.value + unit; - } - } - } - ], - label: { - fontSize: titleFontSize * 0.8, - color: itemColor, - fontWeight: 'bold', - padding: [4, 8], - borderRadius: 4, - backgroundColor: 'rgba(0, 0, 0, 0.7)', - // symbolSize: titleFontSize * 0.8, - offset: [0, -titleFontSize * 1.5] }, - itemStyle: { - color: itemColor + splitLine: { + lineStyle: { + color: "#1a3d62", // 设置分割线的颜色 + type: "dashed", // 设置分割线为虚线 + }, }, - symbolSize: titleFontSize * 1 - } + scale: true, + min: Min2, + max: Max2, + splitNumber: 10, + interval: (Max2 - Min2) / 10, + }, + ], + this.brokenOption.series[0].data = this.brokenData1; + this.brokenOption.series[1].data = this.brokenData2; + this.brokenOption.series[2].data = this.brokenData3; this.brokenOption.xAxis.data = this.brokenTime; this.brokenInstanc.setOption(this.brokenOption); }, @@ -789,31 +655,69 @@ export default { }, //初始化chartInstance对象 initChart() { + var Min1 = 0, + Min2 = 0, + Max1 = Math.ceil(Math.max(...this.brokenData1, ...this.brokenData2) + 4), + Max2 = Math.ceil(Math.max(...this.brokenData3) + 4); + const titleFontSize = this.$refs.chart_ref.offsetWidth / 100; this.brokenInstanc = echarts.init(this.$refs.chart_ref); this.brokenOption = { tooltip: { trigger: "axis", + formatter: function (params) { + var res = params[0].name + "
"; + for (var i = 0, l = params.length; i < l; i++) { + var seriesName = params[i].seriesName; + var value = params[i].value; + var marker = + ''; + if (seriesName === "用水量") { + res += + marker + + seriesName + + ":" + + '' + + value + + " " + + "吨" + + "
"; + } else if (seriesName === "用电量") { + res += + marker + + seriesName + + ":" + + '' + + value + + " " + + "度" + + "
"; + } else { + res += + marker + + seriesName + + ":" + + '' + + value + + " " + + "
"; + } + } + return res; + }, }, legend: { - show: false, - selectedMode: false, // 是否允许图例进行点击 - icon: "cricle", //图例样式，可以自行查看样式选择 - //图例文字颜色 + data: ["用水量", "用电量", "单耗"], + show: true, textStyle: { - color: "#ffff", - fontSize: 16, //这里改字体大小 + color: "white", }, - // left: "73%", - left: "66%", - top: "0", - //图例距离饼图的距离 - itemGap: 5, - itemWidth: 10, - itemHeight: 5, + selectedMode: true, }, grid: { - top: "15%", + top: "22%", left: "3%", right: "4%", bottom: "5%", @@ -847,72 +751,595 @@ export default { }, //x轴分割线 data: this.brokenTime, }, - yAxis: { - min: 0, - // max:20, - // // // min:'dataMin', - // // // max:'dataMax', - // name: "kwh", // 第一个 y 轴的单位描述 - // 设置 name 的样式 - nameTextStyle: { - color: "rgba(255, 255, 255, 1)", - fontSize: 12, - }, - miniInterval: 5, - type: "value", - // 修饰刻度标签的颜色即y坐标数据 - axisLabel: { - color: "rgba(255, 255, 255, 1)", - }, - // 显示y坐标轴 - axisLine: { - show: true, - lineStyle: { - color: "#365576", // 设置 y 轴线的颜色 + yAxis: [ + { + type: "value", + name: "用量", + // 设置 name 的样式 + nameTextStyle: { + color: "rgba(255, 255, 255, 1)", + fontSize: 12, }, - fontSize: 14, // 设置字体大小，可根据需要调整 + // 修饰刻度标签的颜色即y坐标数据 + axisLabel: { + color: "rgba(255, 255, 255, 1)", + }, + // 显示y坐标轴 + axisLine: { + show: true, + lineStyle: { + color: "#365576", // 设置 y 轴线的颜色 + }, + }, + splitLine: { + lineStyle: { + color: "#1a3d62", // 设置分割线的颜色 + type: "dashed", // 设置分割线为虚线 + }, + }, + scale: true, + min: Min1, + max: Max1, + splitNumber: 10, + interval: (Max1 - Min1) / 10, }, - //y轴分割线段数 - // splitNumber: 10, - // 修改y轴分割线的颜色 - splitLine: { - lineStyle: { - color: "#1a3d62", // 设置分割线的颜色 - type: "dashed", // 设置分割线为虚线 + { + type: "value", + name: "单耗", + // 设置 name 的样式 + nameTextStyle: { + color: "rgba(255, 255, 255, 1)", + fontSize: 12, + }, + // 修饰刻度标签的颜色即y坐标数据 + axisLabel: { + color: "rgba(255, 255, 255, 1)", }, + // 显示y坐标轴 + axisLine: { + show: true, + lineStyle: { + color: "#365576", // 设置 y 轴线的颜色 + }, + }, + splitLine: { + lineStyle: { + color: "#1a3d62", // 设置分割线的颜色 + type: "dashed", // 设置分割线为虚线 + }, + }, + scale: true, + min: Min2, + max: Max2, + splitNumber: 10, + interval: (Max2 - Min2) / 10, }, - }, + ], series: [ { - type: "line", + name: "用水量", + type: "bar", + smooth: true, + symbol: "circle", // 拐点大小 symbolSize: 8, + + // 开始不显示拐点， 鼠标经过显示 + showSymbol: false, + //折线颜色 + itemStyle: { + color: "#0b75d3", + // 使用颜色渐变 + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: "rgba(1, 102, 251, 1)", // 起始颜色 + }, + { + offset: 1, + color: "rgba(1, 102, 251, 0)", // 结束颜色 + }, + ], + global: false, // 缺省为 false + }, + borderRadius: [5, 5, 0, 0], // 分别对应左上、右上、右下、左下的圆角半径 + }, + markPoint: { + data: [ + { + type: 'max', + name: '最大值', + symbol: 'arrow', + symbolRotate: 180, + label: { + formatter: function (params) { + return params.value + '吨'; + } + } + }, + { + type: 'min', + name: '最小值', + symbol: 'arrow', + symbolRotate: 180, + label: { + formatter: function (params) { + return params.value + '吨'; + } + } + } + ], + label: { + fontSize: titleFontSize * 0.8, + color: "#0b75d3", + fontWeight: 'bold', + padding: [4, 8], + borderRadius: 4, + backgroundColor: 'rgba(0, 0, 0, 0.7)', + // symbolSize: titleFontSize * 0.8, + offset: [0, -titleFontSize * 1.5] + }, + itemStyle: { + color: "#0b75d3", + }, + symbolSize: titleFontSize * 1 + } + }, + { + name: "用电量", + type: "bar", smooth: true, + symbol: "circle", + // 拐点大小 + symbolSize: 8, + // 开始不显示拐点， 鼠标经过显示 showSymbol: false, - data: this.brokenData1, //折线颜色 itemStyle: { - color: "#d48e17", //折线点的颜色 - lineStyle: { - color: "#d48e17", //折线的颜色 + color: "#0b75d3", + // 使用颜色渐变 + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: "rgba(0, 224, 225, 1)", // 起始颜色 + }, + { + offset: 1, + color: "rgba(0, 224, 225, 0)", // 结束颜色 + }, + ], + global: false, // 缺省为 false }, + borderRadius: [5, 5, 0, 0], }, - areaStyle: { + markPoint: { + data: [ + { + type: 'max', + name: '最大值', + symbol: 'arrow', + symbolRotate: 180, + label: { + formatter: function (params) { + return params.value + '度'; + } + } + }, + { + type: 'min', + name: '最小值', + symbol: 'arrow', + symbolRotate: 180, + label: { + formatter: function (params) { + return params.value + '度'; + } + } + } + ], + label: { + fontSize: titleFontSize * 0.8, + color: "rgba(0, 224, 225, 1)", + fontWeight: 'bold', + padding: [4, 8], + borderRadius: 4, + backgroundColor: 'rgba(0, 0, 0, 0.7)', + // symbolSize: titleFontSize * 0.8, + offset: [0, -titleFontSize * 1.5] + }, + itemStyle: { + color: "rgba(0, 224, 225, 1)", + }, + symbolSize: titleFontSize * 1 + } + }, + { + name: "单耗", + type: "line", + smooth: false, + symbol: "circle", + // 拐点大小 + symbolSize: 8, + yAxisIndex: 1, + // 开始不显示拐点， 鼠标经过显示 + showSymbol: false, + //折线颜色 + itemStyle: { + color: "#EE5217", //折线点的颜色 color: { - //线性渐变 type: "linear", x: 0, y: 0, x2: 0, y2: 1, - colorStops: [], + colorStops: [ + { + offset: 0, + color: "#EE5217", // 起始颜色 + }, + { + offset: 1, + color: "#EE5217", // 结束颜色 + }, + ], + global: false, // 缺省为 false + }, + lineStyle: { + color: "#EE5217", //折线的颜色 }, }, + markPoint: { + data: [ + { + type: 'max', + name: '最大值', + symbol: 'arrow', + symbolRotate: 180, + label: { + formatter: function (params) { + return params.value; + } + } + }, + { + type: 'min', + name: '最小值', + symbol: 'arrow', + symbolRotate: 180, + label: { + formatter: function (params) { + return params.value; + } + } + } + ], + label: { + fontSize: titleFontSize * 0.8, + color: "#EE5217", + fontWeight: 'bold', + padding: [4, 8], + borderRadius: 4, + backgroundColor: 'rgba(0, 0, 0, 0.7)', + // symbolSize: titleFontSize * 0.8, + offset: [0, -titleFontSize * 1.5] + }, + itemStyle: { + color: "#EE5217", + }, + symbolSize: titleFontSize * 1 + } }, ], }; //把配置项给实例对象 this.brokenInstanc.setOption(this.brokenOption, true); + + const self = this; + this.brokenInstanc.on('legendselectchanged', function(params) { + let dataSources = []; + if (params.selected["用水量"] !== false) { + dataSources.push(...self.brokenData1); + } + if (params.selected["用电量"] !== false) { + dataSources.push(...self.brokenData2); + } + + var newMax1 = dataSources.length > 0 ? Math.ceil(Math.max(...dataSources) + 4) : 10; + var newMax2 = self.brokenData3.length > 0 ? Math.ceil(Math.max(...self.brokenData3) + 4) : 10; + // 重新设置图表配置,不然markPoint的箭头老是会在原位置残留 + var newOption = { + tooltip: { + trigger: "axis", + formatter: function (params) { + if (!params || params.length === 0 || !params[0]) { + return ""; + } + var res = params[0].name + "
"; + for (var i = 0, l = params.length; i < l; i++) { + var param = params[i]; + if (!param) continue; + var seriesName = param.seriesName; + var value = param.value; + var color = param.color; + var markerColor = color && color.colorStops ? color.colorStops[0].color : "#999"; + var marker = + ''; + if (seriesName === "用水量") { + res += + marker + + seriesName + + ":" + + '' + + value + + " " + + "吨" + + "
"; + } else if (seriesName === "用电量") { + res += + marker + + seriesName + + ":" + + '' + + value + + " " + + "度" + + "
"; + } else { + res += + marker + + seriesName + + ":" + + '' + + value + + " " + + "
"; + } + } + return res; + }, + }, + legend: { + data: ["用水量", "用电量", "单耗"], + show: true, + textStyle: { + color: "white", + }, + selectedMode: true, + selected: params.selected + }, + grid: { + top: "22%", + left: "3%", + right: "4%", + bottom: "5%", + containLabel: true, + }, + xAxis: { + type: "category", + boundaryGap: true, + axisLabel: { + color: "rgba(255, 255, 255, 1)", + fontSize: 14, + }, + axisTick: { + show: false, + }, + axisLine: { + show: true, + lineStyle: { + color: "#365576", + }, + }, + splitLine: { + lineStyle: { + color: "#e2e6f0", + }, + }, + data: self.brokenTime, + }, + yAxis: [ + { + type: "value", + name: "用量", + nameTextStyle: { + color: "rgba(255, 255, 255, 1)", + fontSize: 12, + }, + axisLabel: { + color: "rgba(255, 255, 255, 1)", + }, + axisLine: { + show: true, + lineStyle: { + color: "#365576", + }, + }, + splitLine: { + lineStyle: { + color: "#1a3d62", + type: "dashed", + }, + }, + scale: true, + min: 0, + max: newMax1, + splitNumber: 10, + interval: (newMax1 - 0) / 10, + }, + { + type: "value", + name: "单耗", + nameTextStyle: { + color: "rgba(255, 255, 255, 1)", + fontSize: 12, + }, + axisLabel: { + color: "rgba(255, 255, 255, 1)", + }, + axisLine: { + show: true, + lineStyle: { + color: "#365576", + }, + }, + splitLine: { + lineStyle: { + color: "#1a3d62", + type: "dashed", + }, + }, + scale: true, + min: 0, + max: newMax2, + splitNumber: 10, + interval: (newMax2 - 0) / 10, + }, + ], + dataZoom: self.brokenOption.dataZoom, + series: [ + { + name: "用水量", + type: "bar", + smooth: true, + symbol: "circle", + symbolSize: 8, + showSymbol: false, + itemStyle: { + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0, color: "rgba(1, 102, 251, 1)" }, + { offset: 1, color: "rgba(1, 102, 251, 0)" }, + ], + global: false, + }, + borderRadius: [5, 5, 0, 0], + }, + markPoint: { + data: params.selected["用水量"] ? [ + { type: 'max', name: '最大值', symbol: 'arrow', symbolRotate: 180, label: { formatter: (params) => params.value + '吨' } }, + { type: 'min', name: '最小值', symbol: 'arrow', symbolRotate: 180, label: { formatter: (params) => params.value + '吨' } } + ] : [], + label: { + fontSize: titleFontSize * 0.8, + color: "#0b75d3", + fontWeight: 'bold', + padding: [4, 8], + borderRadius: 4, + backgroundColor: 'rgba(0, 0, 0, 0.7)', + // symbolSize: titleFontSize * 0.8, + offset: [0, -titleFontSize * 1.5] + }, + itemStyle: { + color:"#0b75d3", + }, + symbolSize: titleFontSize * 1 + }, + data: self.brokenData1, + }, + { + name: "用电量", + type: "bar", + smooth: true, + symbol: "circle", + symbolSize: 8, + showSymbol: false, + itemStyle: { + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0, color: "rgba(0, 224, 225, 1)" }, + { offset: 1, color: "rgba(0, 224, 225, 0)" }, + ], + global: false, + }, + borderRadius: [5, 5, 0, 0], + }, + markPoint: { + data: params.selected["用电量"] ? [ + { type: 'max', name: '最大值', symbol: 'arrow', symbolRotate: 180, label: { formatter: (params) => params.value + '度' } }, + { type: 'min', name: '最小值', symbol: 'arrow', symbolRotate: 180, label: { formatter: (params) => params.value + '度' } } + ] : [], + label: { + fontSize: titleFontSize * 0.8, + color: "rgba(0, 224, 225, 1)", + fontWeight: 'bold', + padding: [4, 8], + borderRadius: 4, + backgroundColor: 'rgba(0, 0, 0, 0.7)', + // symbolSize: titleFontSize * 0.8, + offset: [0, -titleFontSize * 1.5] + }, + itemStyle: { + color:"rgba(0, 224, 225, 1)", + }, + symbolSize: titleFontSize * 1 + }, + data: self.brokenData2, + }, + { + name: "单耗", + type: "line", + smooth: false, + symbol: "circle", + symbolSize: 8, + yAxisIndex: 1, + showSymbol: false, + itemStyle: { + color: "#EE5217", + lineStyle: { + color: "#EE5217", + }, + }, + markPoint: { + data: params.selected["单耗"] ? [ + { type: 'max', name: '最大值', symbol: 'arrow', symbolRotate: 180 }, + { type: 'min', name: '最小值', symbol: 'arrow', symbolRotate: 180 } + ] : [], + label: { + fontSize: titleFontSize * 0.8, + color: "#EE5217", + fontWeight: 'bold', + padding: [4, 8], + borderRadius: 4, + backgroundColor: 'rgba(0, 0, 0, 0.7)', + // symbolSize: titleFontSize * 0.8, + offset: [0, -titleFontSize * 1.5] + }, + itemStyle: { + color:"#EE5217", + }, + symbolSize: titleFontSize * 1 + }, + data: self.brokenData3, + }, + ], + }; + + self.brokenInstanc.setOption(newOption, true); + }); }, }, }; @@ -952,6 +1379,7 @@ export default { } } } + .data-content { display: flex; flex-direction: row; @@ -959,6 +1387,7 @@ export default { justify-content: space-between; width: 100%; margin-top: 23px; + .data-li { background-color: transparent; border-radius: 8px; @@ -973,16 +1402,19 @@ export default { font-size: 0.16rem; position: relative; overflow: hidden; + .use-icon { width: 0.6rem; height: 0.6rem; } + .use-text { width: 33%; display: flex; flex-direction: column; align-items: flex-start; color: #dbdbdb; + .data-text { z-index: 11 !important; font-family: DIN-Bold; @@ -990,22 +1422,26 @@ export default { margin-top: 0.05rem; color: #ffffff; } + .downText { color: #ff4027; z-index: 11 !important; font-family: DIN-Bold; font-size: 0.24rem; margin-top: 0.05rem; + .el-icon-bottom { margin-right: 0.08rem; } } + .upText { color: #2ff016; z-index: 11 !important; font-family: DIN-Bold; font-size: 0.24rem; margin-top: 0.05rem; + .el-icon-bottom, .el-icon-top { margin-right: 0.08rem; @@ -1013,6 +1449,7 @@ export default { } } } + .type-img { position: absolute; bottom: 0; @@ -1020,12 +1457,14 @@ export default { height: 0.52rem; z-index: 10; } + .type1 { border: 1px solid #e8aa13; border-radius: 10px; /* 设置渐变背景 */ background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5)); } + .type1::after { content: ""; width: 100%; @@ -1039,12 +1478,14 @@ export default { bottom: -100% !important; z-index: 1; } + .type2 { border: 1px solid #27a0f2; border-radius: 10px; /* 设置渐变背景 */ background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5)); } + .type2::after { content: ""; width: 100%; @@ -1058,12 +1499,14 @@ export default { bottom: -100% !important; z-index: 1; } + .type3 { border: 1px solid #1ad3ef; border-radius: 10px; /* 设置渐变背景 */ background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5)); } + .type3::after { content: ""; width: 100%; @@ -1077,12 +1520,14 @@ export default { bottom: -100% !important; z-index: 1; } + .type4 { border: 1px solid #11d47b; border-radius: 10px; /* 设置渐变背景 */ background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5)); } + .type4::after { content: ""; width: 100%; @@ -1097,19 +1542,23 @@ export default { z-index: 1; } } + .choice { margin: 20px; + .mr20 { padding: 0.05rem 0.2rem; white-space: nowrap; width: auto; } } + .charts { width: 100%; - height: 300px; + height: 330px; margin-bottom: 0.1rem; } + // 媒体查询，适配大于2000px分辨率的大屏样式 @media (min-width: 2000px) { .condition { diff --git a/src/views/hotWater/hotPumpLog/index.vue b/src/views/hotWater/hotPumpLog/index.vue index e69a793..faab9c5 100644 --- a/src/views/hotWater/hotPumpLog/index.vue +++ b/src/views/hotWater/hotPumpLog/index.vue @@ -2,66 +2,27 @@
- - - + + + - +
- 搜索 + 搜索
- 导出 + 导出
- + @@ -70,22 +31,14 @@ @@ -96,22 +49,14 @@ @@ -122,26 +67,14 @@ @@ -152,118 +85,120 @@ - - + + - + - + - + - - + + - + - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - + - + - - + @@ -277,12 +212,7 @@ disabled > --> - + 1号热泵 @@ -290,53 +220,24 @@ - + - + - - - + + + - - - + + + 2号热泵 @@ -344,53 +245,24 @@ - + - + - - - + + + - - - + + + + + + + + - {{ - tableColumnLabel1 - }} - - - - - - - - - - - - - - - - - - - - - - - - - {{ - tableColumnLabel2 - }} - - - - - - - - - - - - - - - - - - - - - - + 水箱 - - - - - - + + + + + + - + - + @@ -662,7 +483,6 @@
-