diff --git a/src/assets/icons/svg/chartsSvg.svg b/src/assets/icons/svg/chartsSvg.svg new file mode 100644 index 0000000..dc04e90 --- /dev/null +++ b/src/assets/icons/svg/chartsSvg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/svg/tableSvg.svg b/src/assets/icons/svg/tableSvg.svg new file mode 100644 index 0000000..2d78f83 --- /dev/null +++ b/src/assets/icons/svg/tableSvg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/utils/datetime.js b/src/utils/datetime.js index 406e846..f0f277d 100644 --- a/src/utils/datetime.js +++ b/src/utils/datetime.js @@ -23,7 +23,7 @@ export function formatDay (datetime) { /** * 时间格式化 - * 将 2018-09-23T11:54:16.000+0000 格式化成 2018/09/23 11:54:16 + * 将 2018-09-23T11:54:16.000+0000 格式化成 2018/09/23 11:54 * @param datetime 国际化日期格式 */ export function format2(datetime) { diff --git a/src/views/hotWater/waterControl/index.vue b/src/views/hotWater/waterControl/index.vue index 04a7811..e30e3b2 100644 --- a/src/views/hotWater/waterControl/index.vue +++ b/src/views/hotWater/waterControl/index.vue @@ -58,27 +58,107 @@ >
{{ item.name }}
- -
- -
-
-
开关状态:
-
- +
+
+ +
+
+
开关状态:
+
+ + +
+
+
+
故障信息:
+ {{ item.alarmStatus }} - + {{ + item.alarmStatus + }} +
+
+
实际温度:
+
{{ item.temp }}℃
+
+
+
设定温度:
+
+ +
+
+
+
+
+ +
+
+ +
+
+
PID手自动:
+
+ + +
+
+
+
启停控制:
+
+ + +
+
+
故障信息:
+
+
运行状态:
+ {{ item.runningStatus }} + {{ + item.runningStatus + }} +
当前频率:
{{ item.frequency }}Hz
-
-
- -
- -
-
开关状态:
-
- - -
+
频率设置:
+ +
Hz
-
故障信息:
- 压力设置:
+ {{ item.alarmStatus }} - {{ - item.alarmStatus - }} + > +
bar
-
实际温度:
-
{{ item.temp }}℃
+
停机延时:
+ +
S
-
设定温度:
-
- -
+
换机周期:
+ +
min
- -
-
+
+ +
+
+
补水阀启停:
+
+ + +
+
+
+
+
+
实际液位:
{{ item.waterLevel }} %
-
-
设置液位:
+
+
设置液位:
+
%
-
-
采集时间:
+
+
补水延时时间:
+ +
S
+
+
+
液位误差值:
+ +
%
+
+
+
时间:
{{ item.curTime }}
+ +
+
+ +
+
+
启动:
+
+ + +
+
+
+
停止:
+
+ + +
+
+
+
+
+
+
供水温度:
+
{{ item.temp }}℃
+
+
+
供水温度设定:
+ +
℃
+
+
+
供水压力
+
{{ item.pressure }}bar
+
+
+
供水温度误差设定:
+ +
℃
+
+
+
故障信息:
+ {{ item.alarmStatus }} + {{ + item.alarmStatus + }} +
+
+
补水延时时间设定:
+ +
S
+
+
+
@@ -186,6 +492,7 @@ import { spaceTree } from "@/api/region"; import { waterOperateList, operationConrol } from "@/api/hotWater/waterControl"; import waterTank from "../../components/waterTank.vue"; export default { + name: "WaterControl", components: { waterTank }, data() { return { @@ -204,6 +511,8 @@ export default { activeName: "", //默认选中 tabsList: [], //tab列表 devicesList: [], //设备列表 + isInitialPage: true, //记录是否初始页面 + isNodeClicked: false, //记录是否点击了tree }; }, mounted() { @@ -321,6 +630,7 @@ export default { // 点击当前节点，保存节点内容 handleNodeClick(node, data) { console.log("点击的当前节点", node, data); + this.isNodeClicked = true; // 设置标志位为 true，表示节点被点击 if (data.level !== 4) { console.log("不是第4层000"); // 设置当前选中的节点,默认高亮 @@ -342,6 +652,7 @@ export default { } }, handleClick(tab, event) { + this.isNodeClicked = false; // 表示切换tab但并未点击tree console.log(tab, event); console.log("activeName", this.activeName); // 根据 tab 的 name 从 tabsList 中找到对应的 item,处理得到devicesList @@ -353,17 +664,15 @@ export default { if (item.name) { // 在每次迭代时创建一个新的 deviceItem 对象 let deviceItem = { - id: item.id, - name: item.name, - temp: item.temp, - tempSet: item.tempSet, - frequency: item.frequency, - frequencySet: item.frequencySet, + ...item, waterLevel: Number(item.waterLevel), - waterLevelSet: item.waterLevelSet, - curTime: item.curTime, - alarmStatus: Number(item.alarmStatus) == 0 ? "无故障" : "故障", - switchStatus: Number(item.switchStatus) == 0 ? false : true, + runningStatus: Number(item.switchStatus) == 0 ? "运行" : "停止", //运行状态 + switchStatus: Number(item.switchStatus) == 0 ? false : true, //启停控制 + alarmStatus: Number(item.alarmStatus) == 0 ? "无故障" : "故障", //故障状态 + handAutomaticSwitch: + Number(item.handAutomaticSwitch) == 0 ? false : true, //手自动状态 + openSwitch: Number(item.openSwitch) == 0 ? false : true, //一键启动 + closeSwitch: Number(item.closeSwitch) == 0 ? false : true, //一键停止 }; // 将处理后的对象添加到 devicesList 中 this.devicesList.push(deviceItem); @@ -372,6 +681,8 @@ export default { console.log("当前楼层water列表", this.devicesList); } }, + // 失去焦点 + handleBlur() {}, // 获取热水设备列表 getWaterList() { return new Promise((resolve, reject) => { @@ -382,8 +693,25 @@ export default { waterOperateList(data) .then((res) => { if (res.code == 200 && res.rows.length > 0) { + console.log("页面请求数据了~~~~~~~~~~~", res.rows); this.tabsList = res.rows; - this.activeName = res.rows[0].name; + // 初始页面的时候默认选择第一个tabs,否则不设置 + if (this.isInitialPage) { + this.activeName = res.rows[0].name; + this.isInitialPage = false; + console.log("初始页面默认tabs", this.activeName); + } else { + console.log("非初始页面默认tabs", this.activeName); + // 判断是勾选了tree还是tabs控制更新, + if (this.isNodeClicked) { + // tree + this.activeName = res.rows[0].name; + console.log("非初始页面默认tabs-点击tree", this.activeName); + } else { + this.activeName = this.activeName; + console.log("非初始页面默认tabs-tabs中更新", this.activeName); + } + } // 根据 tab 的 name 从 tabsList 中找到对应的 item,处理得到devicesList const currentItem = this.tabsList.find( (item) => item.name === this.activeName @@ -395,19 +723,18 @@ export default { if (item.name) { // 在每次迭代时创建一个新的 deviceItem 对象 let deviceItem = { - id: item.id, - name: item.name, - temp: item.temp, - tempSet: item.tempSet, - frequency: item.frequency, - frequencySet: item.frequencySet, - waterLevel: item.waterLevel, - waterLevelSet: item.waterLevelSet, - curTime: item.curTime, - alarmStatus: - Number(item.alarmStatus) == 0 ? "无故障" : "故障", + ...item, + waterLevel: Number(item.waterLevel), + runningStatus: + Number(item.switchStatus) == 0 ? "运行" : "停止", //运行状态 switchStatus: - Number(item.switchStatus) == 0 ? false : true, + Number(item.switchStatus) == 0 ? false : true, //启停控制 + alarmStatus: + Number(item.alarmStatus) == 0 ? "无故障" : "故障", //故障状态 + handAutomaticSwitch: + Number(item.handAutomaticSwitch) == 0 ? false : true, //手自动状态 + openSwitch: Number(item.openSwitch) == 0 ? false : true, //一键启动 + closeSwitch: Number(item.closeSwitch) == 0 ? false : true, //一键停止 }; // 将处理后的对象添加到 devicesList 中 this.devicesList.push(deviceItem); @@ -429,12 +756,12 @@ export default { }); }); }, - // 设置水泵开关状态 - handleWaterPump(item) { + // 一键启动 + handleAllStart(item) { this.$confirm( - `确定要切换设备"${item.name}"的状态为:${ - item.switchStatus ? "开启" : "停止 吗?" - }`, + `确定要 ${item.openSwitch ? "一键开启" : "关闭一键开启"} ${ + item.name + }的设备吗?`, "提示", { confirmButtonText: "确定", @@ -443,26 +770,69 @@ export default { } ) .then(() => { - // 这里调用请求函数，示例中只是简单打印信息 - console.log("请求后台", item.switchStatus); + console.log("请求后台", item.openSwitch); let param = null; - if (item.switchStatus) { + if (item.openSwitch) { param = 1; } else { param = 0; } - this.hadleOperationConrol(item.id, param); + this.hadleOperationConrol(item.openSwitchId, param); }) .catch(() => { // 用户取消操作，恢复开关状态 - item.switchStatus = !item.switchStatus; + item.openSwitch = !item.openSwitch; + }); + }, + // 一键停止 + handleAllEnd(item) { + this.$confirm( + `确定要 ${item.closeSwitch ? "一键停止" : "关闭一键停止"} ${ + item.name + }的设备吗?`, + "提示", + { + confirmButtonText: "确定", + cancelButtonText: "取消", + type: "warning", + } + ) + .then(() => { + console.log("请求后台", item.closeSwitch); + let param = null; + if (item.closeSwitch) { + param = 1; + } else { + param = 0; + } + this.hadleOperationConrol(item.closeSwitchId, param); + }) + .catch(() => { + // 用户取消操作，恢复开关状态 + item.closeSwitch = !item.closeSwitch; }); }, + // input设置 + handleEnter(item, value, id, set, unit) { + this.$confirm( + `确定要修改"${item.name}"的${set}为:${value} ${unit}吗?`, + "提示", + { + confirmButtonText: "确定", + cancelButtonText: "取消", + type: "warning", + } + ) + .then(() => { + this.hadleOperationConrol(id, value); + }) + .catch(() => {}); + }, // 设置热泵开关状态 handleHotPump(item) { this.$confirm( `确定要切换设备"${item.name}"的状态为:${ - item.switchStatus ? "开启" : "停止 吗?" + item.switchStatus ? "开启" : "关闭 吗?" }`, "提示", { @@ -480,17 +850,19 @@ export default { } else { param = 0; } - this.hadleOperationConrol(item.id, param); + this.hadleOperationConrol(item.switchStatusId, param); }) .catch(() => { // 用户取消操作，恢复开关状态 item.switchStatus = !item.switchStatus; }); }, - // 设置热泵温度 - handleEnter(item) { + // 设置供水泵手自动状态 + handAutomatic(item) { this.$confirm( - `确定要修改"${item.name}"的温度为:${item.tempSet} ℃吗?`, + `确定要切换设备"${item.name}"的状态为:${ + item.handAutomaticSwitch ? "手动" : "自动 吗?" + }`, "提示", { confirmButtonText: "确定", @@ -499,15 +871,27 @@ export default { } ) .then(() => { - this.hadleOperationConrol(item.id, item.tempSet); + // 这里调用请求函数，示例中只是简单打印信息 + console.log("请求后台", item.handAutomaticSwitch); + let param = null; + if (item.handAutomaticSwitch) { + param = 0; + } else { + param = 1; + } + this.hadleOperationConrol(item.handAutomaticSwitchId, param); }) - .catch(() => {}); + .catch(() => { + // 用户取消操作，恢复开关状态 + item.handAutomaticSwitch = !item.handAutomaticSwitch; + }); }, - // 设置水箱水位 - handleWaterEnter(item) { - console.log("请求后端"); + // 设置启停控制 + handleSwitch(item) { this.$confirm( - `确定要修改"${item.name}"的水位为:${item.waterLevelSet} %吗?`, + `确定要切换设备"${item.name}"的状态为:${ + item.switchStatus ? "开启" : "停止 吗?" + }`, "提示", { confirmButtonText: "确定", @@ -516,9 +900,20 @@ export default { } ) .then(() => { - this.hadleOperationConrol(item.id, item.waterLevelSet); + // 这里调用请求函数，示例中只是简单打印信息 + console.log("请求后台", item.switchStatus); + let param = null; + if (item.switchStatus) { + param = 1; + } else { + param = 0; + } + this.hadleOperationConrol(item.switchStatusId, param); }) - .catch(() => {}); + .catch(() => { + // 用户取消操作，恢复开关状态 + item.switchStatus = !item.switchStatus; + }); }, // 处理输入事件，过滤非数字字符 handleInput(item) { @@ -593,7 +988,7 @@ export default { align-items: stretch; height: 100%; .left-tree { - width: 216px; + width: 256px; padding: 15px 10px; border: 1px solid #004b8c; min-height: 800px; @@ -655,7 +1050,7 @@ export default { } } .right-monitor { - width: calc(100% - 240px); + width: calc(100% - 280px); display: flex; flex-direction: column; justify-content: flex-start; @@ -742,39 +1137,91 @@ export default { justify-content: space-between; margin-top: 20px; .monitor-flex-left { + padding: 0 0.2rem; display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; + flex-direction: column; width: 100%; - padding: 0 0.2rem; - .monitor-img1 { - width: 1.2rem; - height: 1.2rem; + .control-top { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; + .monitor-img1 { + width: 1.2rem; + height: 1.2rem; + } + .monitor-img2 { + width: 1.2rem; + height: 0.8rem; + } } - .monitor-img2 { - width: 1.2rem; - height: 0.8rem; + .control-bottom { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + margin-top: 20px; + } + .ash { + color: #b8bfcb; + white-space: nowrap; + margin-right: 8px; + } + .white { + color: #ffffff; + } + .words-li { + display: flex; + flex-direction: row; + align-items: center; + font-family: SourceHanSansCN-Regular; + font-size: 16px; + line-height: 28px; + margin-bottom: 10px; } .monitor-words { + flex-wrap: wrap; + .words-li { + width: 100%; + } + } + .control-bottom { + flex-wrap: wrap; .words-li { + width: 45%; + flex-wrap: nowrap; + } + .words-li2 { + width: 100%; display: flex; flex-direction: row; align-items: center; - font-family: SourceHanSansCN-Regular; - font-size: 16px; - line-height: 28px; - margin-bottom: 10px; + } + .words-li3 { + width: 36%; + } + .words-li4 { + width: 60%; .ash { - color: #b8bfcb; - white-space: nowrap; - margin-right: 8px; + width: 130px; } - .white { - color: #ffffff; + } + .words-li5 { + width: 45%; + .ash2 { + width: 100px; } } } + .sigClass { + width: 40%; + flex-wrap: wrap; + .words-li { + width: 100%; + } + } } } } @@ -885,4 +1332,23 @@ export default { /* color: #f56c6c; */ color: #25f1f8; } +.monitor-flex-left >>> .el-input { + width: 80px !important; + margin: 0 5px; +} +.monitor-flex-left >>> .el-input__inner { + background-color: #04193a; + border: 1px solid #1262db; + color: #3ef0fd; + font-weight: 700; + text-align: center; + padding: 0 0.1rem !important; +} +/* // 媒体查询，适配大于2000px分辨率的大屏样式 */ +@media (min-width: 2000px) { + .monitor-flex-left >>> .el-input { + width: 0.8rem !important; + margin: 0 0.15rem 0 0.05rem !important; + } +} diff --git a/src/views/hotWater/waterMonitor/index.vue b/src/views/hotWater/waterMonitor/index.vue index 64a0f1e..b15ec7d 100644 --- a/src/views/hotWater/waterMonitor/index.vue +++ b/src/views/hotWater/waterMonitor/index.vue @@ -281,13 +281,13 @@ @@ -482,6 +482,7 @@ export default { }, //查询单个热泵状态 点击表格的某一行 handlerow(row, event, column) { + console.log("row", row); //水位 温度 热泵名称 this.progress = row.waterLevel; this.temdata = row.waterTemp; @@ -540,7 +541,17 @@ export default { waterMonitorList(data).then((res) => { console.log("系统状态返回", res); if (res.code == 200 && res.rows.length > 0) { - this.tableData = res.rows; + this.tableData = []; + res.rows.forEach((item) => { + let deviceItem = { + ...item, + runState: Number(item.runState) == 0 ? "0" : "1", //运行状态 + upWaterState: Number(item.upWaterState) == 0 ? "0" : "1", //供水状态 + isFault: Number(item.isFault) == 0 ? "0" : "1", //故障状态 + }; + this.tableData.push(deviceItem); + }); + console.log("处理后的tableData", this.tableData); if (this.tableData.length > 0) { // 获取第一行数据 const firstRow = this.tableData[0]; @@ -1035,9 +1046,9 @@ export default { } } .changecontent { - border-radius:0.06rem !important; + border-radius: 0.06rem !important; height: 3rem !important; - padding: 0.15rem 0.1rem 0 0.1rem !important; + padding: 0.15rem 0.1rem 0 0.1rem !important; margin-top: 0.3rem !important; .tablemaeta { diff --git a/src/views/temSys/temHistory/components/historyCharts.vue b/src/views/temSys/temHistory/components/historyCharts.vue new file mode 100644 index 0000000..1fd81da --- /dev/null +++ b/src/views/temSys/temHistory/components/historyCharts.vue @@ -0,0 +1,295 @@ + + + + + diff --git a/src/views/temSys/temHistory/components/historyTables.vue b/src/views/temSys/temHistory/components/historyTables.vue new file mode 100644 index 0000000..23758ce --- /dev/null +++ b/src/views/temSys/temHistory/components/historyTables.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/src/views/temSys/temHistory/index.vue b/src/views/temSys/temHistory/index.vue index a867ec2..f4dbd50 100644 --- a/src/views/temSys/temHistory/index.vue +++ b/src/views/temSys/temHistory/index.vue @@ -1,13 +1,306 @@ + if (newRes.data && newRes.data[0] && newRes.data[0].children) { + newRes.data[0].children = newRes.data[0].children.filter((item) => { + // 假设子项有一个 label属性，用于检查是否包含 "热水" + return item.label && item.label.includes("温度监测"); + }); + } + this.options = newRes.data[0].children[0].children; + console.log("温度监测的数组", this.options); + // 提取路径 + if (this.options.length > 0) { + // 找到最后一层的第一个子节点 + const lastLevelFirstChild = this.findLastLevelFirstChild( + this.options[0] + ); + console.log("最后一个节点的id", lastLevelFirstChild); + // 查找完整路径 + const path = this.findPath(this.options, lastLevelFirstChild.id); + if (path) { + this.selectedValue = [path]; + } + console.log("反推三个id", path); + } - \ No newline at end of file + diff --git a/src/views/temSys/temMonitor/index.vue b/src/views/temSys/temMonitor/index.vue index 9f8c134..e0d31e9 100644 --- a/src/views/temSys/temMonitor/index.vue +++ b/src/views/temSys/temMonitor/index.vue @@ -148,7 +148,7 @@
import { spaceTree } from "@/api/region"; +import { format } from "@/utils/datetime"; import { temList, temHistory } from "@/api/temSys/temMonitor"; import * as echarts from "echarts"; export default { @@ -395,9 +396,13 @@ export default { }); }, echartsData(id) { + const start = new Date(new Date().setHours(0, 0, 0, 0)); + const end = new Date(new Date().setHours(23, 59, 59, 59)); let data = { systemType: "4", houseIds: [id], + startTime: format(start), + endTime: format(end), }; temHistory(data).then((res) => { console.log("历史数据返回", res); @@ -837,7 +842,7 @@ export default { height: 300px; } .tree-container { - height: 300px; /* 设置固定高度 */ + height: 330px; /* 设置固定高度 */ overflow-y: auto; /* 启用垂直滚动条 */ } // 滚动条