diff --git a/src/views/bigScreen/bigScreen.vue b/src/views/bigScreen/bigScreen.vue index dd89c1f..0492a19 100644 --- a/src/views/bigScreen/bigScreen.vue +++ b/src/views/bigScreen/bigScreen.vue @@ -147,7 +147,7 @@
{{ viewMes.totalGas }}t
总蒸汽量
-
+
@@ -490,7 +490,7 @@ export default { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; - margin-top: 29px; + margin: 30px 0; font-family: SourceHanSansCN-Regular; font-size: 16px; font-weight: normal; @@ -503,7 +503,7 @@ export default { align-items: center; justify-content: center; width: calc(33.33% - 32px); - margin: 0 16px; + margin: 16px; // margin-bottom: 22px; .message-data { font-family: DIN-Bold; @@ -611,11 +611,11 @@ export default { .screen-right { width: 30% !important; .message { - margin-top: 0.29rem !important; + margin: 0.3rem 0 !important; font-size: 0.16rem !important; .message-li { width: calc(33.33% - 0.32rem) !important; - margin: 0 0.16rem !important; + margin:0.16rem !important; .message-data { font-size: 0.2rem !important; margin-bottom: 0.3rem !important; diff --git a/src/views/bigScreen/components/allEnergy.vue b/src/views/bigScreen/components/allEnergy.vue index d80e311..0e764ca 100644 --- a/src/views/bigScreen/components/allEnergy.vue +++ b/src/views/bigScreen/components/allEnergy.vue @@ -124,10 +124,16 @@ export default { { name: "数据详情:", data: [ - { value: this.energyMes.eleStandardCoal, name: "耗电量" }, - { value: this.energyMes.waterStandardCoal, name: "用水量" }, - { value: this.energyMes.coldStandardCoal, name: "产冷量" }, - { value: this.energyMes.gasStandardCoal, name: "蒸汽量" }, + { value: this.energyMes.eleStandardCoal, name: "耗电量(kgce)" }, + { + value: this.energyMes.waterStandardCoal, + name: "用水量(kgce)", + }, + { + value: this.energyMes.coldStandardCoal, + name: "产冷量(kgce)", + }, + { value: this.energyMes.gasStandardCoal, name: "蒸汽量(kgce)" }, ], itemStyle: { color: function (params) { @@ -140,10 +146,16 @@ export default { }, { data: [ - { value: this.energyMes.eleStandardCoal, name: "耗电量" }, - { value: this.energyMes.waterStandardCoal, name: "用水量" }, - { value: this.energyMes.coldStandardCoal, name: "产冷量" }, - { value: this.energyMes.gasStandardCoal, name: "蒸汽量" }, + { value: this.energyMes.eleStandardCoal, name: "耗电量(kgce)" }, + { + value: this.energyMes.waterStandardCoal, + name: "用水量(kgce)", + }, + { + value: this.energyMes.coldStandardCoal, + name: "产冷量(kgce)", + }, + { value: this.energyMes.gasStandardCoal, name: "蒸汽量(kgce)" }, ], }, ], @@ -227,10 +239,10 @@ export default { { name: "数据详情:", data: [ - { value: 0, name: "耗电量" }, - { value: 0, name: "用水量" }, - { value: 0, name: "产冷量" }, - { value: 0, name: "蒸汽量" }, + { value: 0, name: "耗电量(kgce)" }, + { value: 0, name: "用水量(kgce)" }, + { value: 0, name: "产冷量(kgce)" }, + { value: 0, name: "蒸汽量(kgce)" }, ], itemStyle: { color: function (params) { @@ -243,10 +255,10 @@ export default { }, { data: [ - { value: 0, name: "耗电量" }, - { value: 0, name: "用水量" }, - { value: 0, name: "产冷量" }, - { value: 0, name: "蒸汽量" }, + { value: 0, name: "耗电量(kgce)" }, + { value: 0, name: "用水量(kgce)" }, + { value: 0, name: "产冷量(kgce)" }, + { value: 0, name: "蒸汽量(kgce)" }, ], }, ], @@ -286,7 +298,7 @@ export default { color: "#ffffff", }, textAlign: "center", - x: "27%", + x: "23%", y: "36%", //距离上边的距离 }, tooltip: { @@ -310,7 +322,7 @@ export default { name: "数据详情:", type: "pie", radius: ["60%", "72%"], - center: ["28%", "44%"], + center: ["24%", "44%"], avoidLabelOverlap: false, label: { show: false, @@ -333,7 +345,7 @@ export default { { type: "pie", radius: ["50%", "62%"], - center: ["28%", "44%"], + center: ["24%", "44%"], avoidLabelOverlap: false, label: { show: false, @@ -363,7 +375,7 @@ export default { // 这里开启silent: true, 就达到效果了 // center与非内圈一致 radius: ["38%", "39%"], - center: ["28%", "44%"], + center: ["24%", "44%"], label: { show: false, }, @@ -385,7 +397,7 @@ export default { // 这里开启silent: true, 就达到效果了 // center与非内圈一致 radius: ["0%", "38%"], - center: ["28%", "44%"], + center: ["24%", "44%"], label: { show: false, }, diff --git a/src/views/bigScreen/components/coldSysEnergy.vue b/src/views/bigScreen/components/coldSysEnergy.vue index 7ac4e27..f737b5e 100644 --- a/src/views/bigScreen/components/coldSysEnergy.vue +++ b/src/views/bigScreen/components/coldSysEnergy.vue @@ -509,16 +509,21 @@ export default { label: { show: true, position: "center", // 文字显示在中心位置 - offset: [0, -titleFontSize * 0.6], // 向上偏移 10 个单位 + offset: [0, -25], // 向上偏移 10 个单位 formatter: function () { // 返回 HTML 标签，使用 rich 里定义的样式 - return `{line|${that.useForm.useData}}`; + return `{line1|${that.useForm.useData}}\n{line2| EER}`; }, rich: { - line: { + line1: { + color: "#39dd4f", // 第一行文字颜色 + fontSize: 20, // 第一行文字大小 + lineHeight: 34, // 行高，实现间距 + }, + line2: { color: "#fff", // 第二行文字颜色 - fontSize: titleFontSize, // 第二行文字大小 - lineHeight: 0, // 行高，实现间距 + fontSize: 14, // 第二行文字大小 + lineHeight: 24, // 行高，实现间距 }, }, }, diff --git a/src/views/bigScreen/components/timeData.vue b/src/views/bigScreen/components/timeData.vue index 7276028..2872fb0 100644 --- a/src/views/bigScreen/components/timeData.vue +++ b/src/views/bigScreen/components/timeData.vue @@ -19,7 +19,7 @@ export default { props: ["currentIndex"], data() { return { - timeData2: [{ title: "日" }, { title: "月" }, { title: "年" }], + timeData2: [{ title: "当日" }, { title: "当月" }, { title: "当年" }], timeIndex2: 0, }; }, diff --git a/src/views/bigScreen/components/useElect.vue b/src/views/bigScreen/components/useElect.vue index 99b7ae8..8470950 100644 --- a/src/views/bigScreen/components/useElect.vue +++ b/src/views/bigScreen/components/useElect.vue @@ -127,6 +127,7 @@ export default { }, series: [ { + name: "用电趋势", type: "line", // 拐点大小 symbolSize: 8, @@ -203,7 +204,8 @@ export default { ":" + '' + value + - "
"; + "kwh"; + ("
"); } return res; }, @@ -264,7 +266,7 @@ export default { .sys_charts { width: 100%; - height: 230px; + height: 280px; } .eer { font-size: 18px; @@ -275,7 +277,7 @@ export default { @media (min-width: 2000px) { .energy_content { .sys_charts { - height: 2.4rem !important; + height: 2.8rem !important; } .eer { font-size: 0.18rem !important; diff --git a/src/views/bigScreen/components/waterSysEnergy.vue b/src/views/bigScreen/components/waterSysEnergy.vue index 8be1963..5f55b30 100644 --- a/src/views/bigScreen/components/waterSysEnergy.vue +++ b/src/views/bigScreen/components/waterSysEnergy.vue @@ -510,16 +510,21 @@ export default { label: { show: true, position: "center", // 文字显示在中心位置 - offset: [0, -titleFontSize * 0.6], // 向上偏移 10 个单位 + offset: [0, -25], // 向上偏移 10 个单位 formatter: function () { // 返回 HTML 标签，使用 rich 里定义的样式 - return `{line|${that.useForm.useData}}`; + return `{line1|${that.useForm.useData}}\n{line2| kwh/吨}`; }, rich: { - line: { + line1: { + color: "#39dd4f", // 第一行文字颜色 + fontSize: 20, // 第一行文字大小 + lineHeight: 34, // 行高，实现间距 + }, + line2: { color: "#fff", // 第二行文字颜色 - fontSize: titleFontSize, // 第二行文字大小 - lineHeight: 0, // 行高，实现间距 + fontSize: 14, // 第二行文字大小 + lineHeight: 24, // 行高，实现间距 }, }, }, diff --git a/src/views/centerairC/enSourceAnalysis/components/deviceEnergy.vue b/src/views/centerairC/enSourceAnalysis/components/deviceEnergy.vue index 4073a01..cfa2465 100644 --- a/src/views/centerairC/enSourceAnalysis/components/deviceEnergy.vue +++ b/src/views/centerairC/enSourceAnalysis/components/deviceEnergy.vue @@ -86,7 +86,7 @@ > - - + -->
{ this.electType = []; - this.deviceTypes = response.rows; + // 过滤 response.rows，只保留 dictValue 在 "0" 到 "3" 范围内的对象 + this.deviceTypes = response.rows.filter((item) => { + const dictValue = parseInt(item.dictValue, 10); + return !isNaN(dictValue) && dictValue >= 0 && dictValue <= 3; + }); if (this.deviceTypes.length > 0) { this.deviceType = this.deviceTypes[0].dictValue; } @@ -233,7 +237,10 @@ export default { }, /** 初始化数据 */ initData() { - Promise.all([this.getDictList(), this.getList()]) + Promise.all([ + // this.getDictList(), + this.getList(), + ]) .then(() => { this.getTableData(); }) @@ -394,7 +401,7 @@ export default { startTime: this.startTime, endTime: this.endTime, deviceType: this.deviceType, - systemType: this.systemType, + systemType: 0, }; console.log("查询数据参数", data); // this.option2.series[0].data = ["1"]; @@ -505,8 +512,8 @@ export default { show: false, // 不显示图例 }, grid: { - top: "6%", - left: "3%", + top: "15%", + left: "5%", right: "4.4%", bottom: "20%", containLabel: true, @@ -621,12 +628,12 @@ export default { // x轴坐标字体大小 xAxis: { axisLabel: { - fontSize: titleFontSize * 1.5, + fontSize: titleFontSize * 1.4, }, }, yAxis: { axisLabel: { - fontSize: titleFontSize * 1.5, + fontSize: titleFontSize * 1.4, }, }, // 拖拽X轴 @@ -693,7 +700,7 @@ export default { line-height: 0.07rem; letter-spacing: 0.02rem; color: #1f70e9; - margin: 0.3rem 0; + margin: 0.3rem 0 0rem 0; width: 100%; text-align: center; } @@ -708,7 +715,12 @@ export default { .main-content { min-height: 6.9rem; } - +.charts-table{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} .charts_refs { width: 17rem; height: 4.55rem; diff --git a/src/views/centerairC/enSourceAnalysis/components/equipment.vue b/src/views/centerairC/enSourceAnalysis/components/equipment.vue index dd423b1..2dd698b 100644 --- a/src/views/centerairC/enSourceAnalysis/components/equipment.vue +++ b/src/views/centerairC/enSourceAnalysis/components/equipment.vue @@ -72,6 +72,7 @@
- - + -->
查询
@@ -312,9 +313,20 @@ export default { }; cpmList(data) .then((response) => { + // 过滤数据，只保留 system_type = 0 且 grade = 40 的对象 + this.electTypes = response.rows.filter( + (item) => item.systemType === "0" && item.grade === 40 + ); this.electType = []; - this.electTypes = response.rows; - this.electType = [this.electTypes[0].mtNum]; + if (this.electTypes.length > 3) { + this.electType = [ + this.electTypes[0].mtNum, + this.electTypes[1].mtNum, + this.electTypes[2].mtNum, + ]; + } else if (this.electTypes.length > 0) { + this.electType = [this.electTypes[0].mtNum]; + } console.log("this.electTypes", this.electTypes); console.log("this.electType", this.electType); this.handleSelectChange(); @@ -327,7 +339,10 @@ export default { }, /** 初始化数据 */ initData() { - Promise.all([this.getDictList(), this.getList()]) + Promise.all([ + // this.getDictList(), + this.getList(), + ]) .then(() => { this.getTableData(); this.getChartsData(); @@ -465,7 +480,7 @@ export default { pageNum: this.pageParm.page, pageSize: this.pageParm.pageSize, searchParams: this.selectElect, - systemType: this.systemType, + systemType: "0", }; console.log("查询数据参数", data); this.listLoading = true; @@ -534,7 +549,7 @@ export default { pageNum: 0, pageSize: 10, searchParams: this.selectElect, - systemType: this.systemType, + systemType: "0", }; console.log("查询数据参数", data); deviceAnalyze(data).then((res) => { @@ -611,7 +626,7 @@ export default { }, grid: { - top: "9%", + top: "15%", left: "3%", right: "2%", bottom: "25%", @@ -810,6 +825,12 @@ export default { .main-content { min-height: 6.6rem; } +.charts-table { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} .elSelectDiv { margin-left: 15px; width: 250px; diff --git a/src/views/centerairC/enSourceAnalysis/components/machineRoom.vue b/src/views/centerairC/enSourceAnalysis/components/machineRoom.vue index 5ed95ff..4bb259f 100644 --- a/src/views/centerairC/enSourceAnalysis/components/machineRoom.vue +++ b/src/views/centerairC/enSourceAnalysis/components/machineRoom.vue @@ -65,7 +65,7 @@ >
- - + -->
查询
@@ -287,7 +287,8 @@ export default { }, mounted() { this.initializeTimeDate(); - this.getDictList(); + // this.getDictList(); + this.getTableData(); }, methods: { /** 查询系统类型-字典数据列表 */ @@ -424,7 +425,7 @@ export default { timeType: this.dateType, startTime: this.startTime, endTime: this.endTime, - systemType: this.systemType, + systemType: "0", }; console.log("查询数据参数", data); this.listLoading = true; @@ -480,7 +481,7 @@ export default { timeType: this.dateType, startTime: this.startTime, endTime: this.endTime, - systemType: this.systemType, + systemType: "0", }; console.log("导出数据参数", data); analyzeExport(data).then((res) => { diff --git a/src/views/centerairC/sysMonitor/monitorCenter.vue b/src/views/centerairC/sysMonitor/monitorCenter.vue index e50f616..7caea68 100644 --- a/src/views/centerairC/sysMonitor/monitorCenter.vue +++ b/src/views/centerairC/sysMonitor/monitorCenter.vue @@ -7,7 +7,7 @@ alt="" />
供暖区
+ +
+ {{ steamHeatingFire[0].deviceName }} +
+
+ {{ steamHeatingFire[1].deviceName }} +
+ +
+
+ + + + +
+ 1# +
+
+ 2# +
+
+ 3# +
+ +
+
+
+ + + + + +
+ {{ steamHeatingPumpHz1 }}Hz +
+
+ {{ steamHeatingPumpHz2 }}Hz +
+
+ {{ steamHeatingPumpHz3 }}Hz +
+ +
{{ steamHeatingInTem }}℃
+
{{ steamHeatingOutTem }}℃
@@ -975,6 +1120,15 @@ export default { hotInletBuild: [], //裙楼供暖进水阀 hotOutletGuest: [], //客房供暖出水阀 hotInletGuest: [], //客房供暖进水阀 + // 频率反馈 + steamHeatingPumpHz1: "", + steamHeatingPumpHz2: "", + steamHeatingPumpHz3: "", + steamHeatingHzAndRun: [], //运行和频率 + steamHeatingFire: [], //热水锅炉火力 + steamHeatingTem: [], //热量计供回水温度数组 + steamHeatingInTem: "", //回水温度 + steamHeatingOutTem: "", //供水温度 freezingManifold: [], //冷冻总管 isShowOn: false, //一键启停,false是Off,true显示On oneKeyButtonId: "", @@ -1071,6 +1225,7 @@ export default { this.getPerformance(); this.getOneKeyButton(); this.getMonitorList(); + this.getSteamHeatingData(); this.getAlarnStatus(); this.getDayData(); @@ -1081,6 +1236,7 @@ export default { this.getPerformance(); this.getOneKeyButton(); this.getMonitorList(); + this.getSteamHeatingData(); this.getAlarnStatus(); this.getDayData(); }, 10000); @@ -1455,6 +1611,54 @@ export default { } }); }, + // 获取蒸汽锅炉运行监测数据 + getSteamHeatingData() { + monitorList({ systemType: 3 }).then((res) => { + if (res.code === 200) { + console.log("设备监测列表返回", res); + // 初始化各个设备列表 + this.steamHeatingHzAndRun = []; //频率和运行状态 + this.steamHeatingFire = []; //热水锅炉火力 + this.steamHeatingTem = []; //热量计供回水温度 + res.rows.forEach((row) => { + switch (row.name) { + case "11": + this.steamHeatingHzAndRun = this.processDeviceList(row.values); + console.log( + "裙蒸汽锅炉频率和运行状态", + this.steamHeatingHzAndRun + ); + break; + case "25": + this.steamHeatingFire = this.processDeviceList(row.values); + console.log("裙蒸汽锅炉火力", this.steamHeatingFire); + + break; + case "6": + this.steamHeatingTem = row.values; + console.log("裙蒸汽锅炉热量计供回水温度", this.steamHeatingTem); + this.steamHeatingTem.forEach((element) => { + if ( + element.collectName.includes("回水温度") && + element.paramType == "12" + ) { + this.steamHeatingInTem = element.collectValue; + } + if ( + element.collectName.includes("供水温度") && + element.paramType == "12" + ) { + this.steamHeatingOutTem = element.collectValue; + } + }); + break; + default: + break; + } + }); + } + }); + }, // 封装一个通用函数来处理设备列表 processDeviceList(values) { const deviceList = []; @@ -2338,6 +2542,163 @@ export default { const targetItem = arr.find((item) => item.paramType === targetType); return targetItem ? targetItem.collectValue : 0; }, + // 采暖泵运行状态 + steamHeatingPumpRunClass(index) { + // 从 this.steamHeatingHzAndRun 中查找 deviceName 包含与 index 相同数字的对象 + let targetDevice = null; + for (let i = 0; i < this.steamHeatingHzAndRun.length; i++) { + const device = this.steamHeatingHzAndRun[i]; + const indexStr = index.toString(); + const deviceName = device.deviceName.toString(); + for (let j = 0; j < indexStr.length; j++) { + if (deviceName.includes(indexStr[j])) { + targetDevice = device; + break; + } + } + if (targetDevice) { + break; + } + } + // 如果未找到匹配的设备，返回 false + if (!targetDevice) { + return false; + } + // 获取匹配设备的 properties 数组 + const properties = targetDevice.properties; + + // 检查 properties 数组是否存在 + if (!properties || properties.length === 0) { + return false; + } + + // 遍历 properties 数组，如果当前对象paramType === 1并且item.collectValue !== "0.00"则便是运行状态中的运行 + for (let i = 0; i < properties.length; i++) { + const item = properties[i]; + if (item.paramType === "1" && Number(item.collectValue) == !0) { + return true; + } + } + // 否则代表运行状态中的不运行 + return false; + }, + // 采暖泵频率 + steamHeatingPumpHz(index) { + // 从 this.steamHeatingHzAndRun 中查找 deviceName 包含与 index 相同数字的对象 + let targetDevice = null; + for (let i = 0; i < this.steamHeatingHzAndRun.length; i++) { + const device = this.steamHeatingHzAndRun[i]; + const indexStr = index.toString(); + const deviceName = device.deviceName.toString(); + for (let j = 0; j < indexStr.length; j++) { + if (deviceName.includes(indexStr[j])) { + targetDevice = device; + break; + } + } + if (targetDevice) { + break; + } + } + // 如果未找到匹配的设备，返回 false + if (!targetDevice) { + return false; + } + // 获取匹配设备的 properties 数组 + const properties = targetDevice.properties; + + // 检查 properties 数组是否存在 + if (!properties || properties.length === 0) { + return false; + } + // 遍历 properties 数组，如果当前对象paramType === 4则有频率反馈 + for (let i = 0; i < properties.length; i++) { + const item = properties[i]; + if (item.paramType === "4") { + // 动态构造属性名 + const propertyName = `steamHeatingPumpHz${index}`; + // 使用方括号语法动态设置属性值 + this[propertyName] = item.collectValue; + // this.steamHeatingPumpHz[index] = item.collectValue; + return true; + } + } + // 否则代表运行状态中的不运行 + return false; + }, + // 采暖锅炉运行状态 + steamHeatingBoilerRunClass(index) { + // 从 this.steamHeatingFire 中查找 deviceName 包含与 index 相同数字的对象 + let targetDevice = null; + for (let i = 0; i < this.steamHeatingFire.length; i++) { + const device = this.steamHeatingFire[i]; + const indexStr = index.toString(); + const deviceName = device.deviceName.toString(); + for (let j = 0; j < indexStr.length; j++) { + if (deviceName.includes(indexStr[j])) { + targetDevice = device; + break; + } + } + if (targetDevice) { + break; + } + } + // 如果未找到匹配的设备，返回 false + if (!targetDevice) { + return false; + } + // 获取匹配设备的 properties 数组 + const properties = targetDevice.properties; + + // 检查 properties 数组是否存在 + if (!properties || properties.length === 0) { + return false; + } + + // console.log("锅炉列表111", properties); + // 遍历 properties 数组，如果当前对象paramType === 45并且item.collectValue !== "0.00"则便是运行状态中的运行 + for (let i = 0; i < properties.length; i++) { + const item = properties[i]; + if ( + item.paramType === "45" && + item.collectName.includes("火力") && + Number(item.collectValue) !== 0 + ) { + return true; + } + } + // 否则代表运行状态中的不运行 + return false; + }, + // 采暖锅炉温度 + getTemperature(values, targetName) { + // console.log("values和targetName", values, targetName); + const targetItem = values.find((item) => + item.collectName.includes(targetName) + ); + // console.log("得到的targetItem", targetItem.collectValue); + return targetItem ? targetItem.collectValue : ""; + }, + // 采暖锅炉跳转 + goBoilerDetail(item, val) { + // console.log("item", item); + // let hostId = item.properties[0].deviceLedgerId; + this.$router.push({ + path: "/hotWaterBoilerDetails", + // query: { + // hostId: hostId, + // hostName: item.deviceName, + // isMagnetic: val, + // }, + }); + }, + // 采暖泵跳转 + goPumpDetail() { + this.$router.push({ + path: "/heatingPumpDetails", + }); + }, // 报警列表 getAlarnStatus() { let data = { @@ -2936,15 +3297,15 @@ export default { z-index: 10; position: absolute; top: 4.2rem; - right: 5rem; + right: 5.05rem; font-size: 0.16rem; font-weight: bold; } .freezingOutWater { z-index: 10; position: absolute; - top: 5.4rem; - right: 4.9rem; + top: 5.43rem; + right: 5.1rem; font-size: 0.16rem; font-weight: bold; } @@ -3985,8 +4346,8 @@ export default { .hotClass { z-index: 10; position: absolute; - top: 4.3rem; - right: 3.7rem; + top: 4.15rem; + right: 3.5rem; font-size: 0.16rem; color: #00ffff; font-weight: bold; @@ -4053,6 +4414,214 @@ export default { color: #ffffff; margin-left: 0.1rem; } + .steamHeatingBoiler1 { + border-bottom: 1px solid rgba(0, 255, 255, 1); + z-index: 10; + font-size: 0.2rem; + font-weight: bold; + color: aqua; + position: absolute; + cursor: pointer; + top: 4.9rem; + left: 9.4rem; + transform: rotateX(50deg) rotateY(0deg) rotateZ(30deg); /* 分别在 X、Y、Z 轴上旋转 */ + transform-origin: bottom center; /* 设置旋转的基点为底部中心 */ + text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9); /* 添加文字阴影增强立体感 */ + } + .steamHeatingBoiler2 { + border-bottom: 1px solid rgba(0, 255, 255, 1); + z-index: 10; + font-size: 0.2rem; + font-weight: bold; + color: aqua; + position: absolute; + cursor: pointer; + top: 5.45rem; + left: 10.9rem; + transform: rotateX(50deg) rotateY(0deg) rotateZ(30deg); /* 分别在 X、Y、Z 轴上旋转 */ + transform-origin: bottom center; /* 设置旋转的基点为底部中心 */ + text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9); /* 添加文字阴影增强立体感 */ + } + .steamHeatingBoiler-main1 { + z-index: 100; + position: absolute; + top: 4.5rem; + left: 10.25rem; + width: 0.6rem; + height: 0.6rem; + // background-color: #007bff; + cursor: pointer; + opacity: 0.4; + transform-style: preserve-3d; + } + .steamHeatingBoiler-main2 { + z-index: 100; + position: absolute; + top: 5rem; + left: 11.6rem; + width: 0.6rem; + height: 0.6rem; + // background-color: #007bff; + cursor: pointer; + opacity: 0.4; + transform-style: preserve-3d; + } + .steamHeatingBoiler-img1 { + z-index: 10; + position: absolute; + top: 4.42rem; + left: 10.6rem; + width: 0.35rem; + height: 0.35rem; + transform-style: preserve-3d; + transform: translateX(-50%) rotateX(60deg) rotateZ(0deg); + } + .steamHeatingBoiler-img2 { + z-index: 10; + position: absolute; + top: 4.88rem; + left: 11.94rem; + width: 0.35rem; + height: 0.35rem; + transform-style: preserve-3d; + transform: translateX(-50%) rotateX(60deg) rotateZ(0deg); + } + .steamHeatingPump1 { + cursor: pointer; + z-index: 10; + font-size: 0.15rem; + font-weight: bold; + color: #46f1e3; + position: absolute; + top: 4.67rem; + left: 11.3rem; + } + .steamHeatingPump2 { + cursor: pointer; + z-index: 10; + font-size: 0.15rem; + font-weight: bold; + color: #46f1e3; + position: absolute; + top: 4.8rem; + left: 11.78rem; + } + .steamHeatingPump3 { + cursor: pointer; + z-index: 10; + font-size: 0.15rem; + font-weight: bold; + color: #46f1e3; + position: absolute; + top: 4.95rem; + left: 12.3rem; + } + .steamHeatingPump-main1 { + z-index: 100; + position: absolute; + top: 4.3rem; + left: 11.25rem; + width: 0.3rem; + height: 0.55rem; + // background-color: #007bff; + cursor: pointer; + opacity: 0.4; + transform-style: preserve-3d; + } + .steamHeatingPump-main2 { + z-index: 100; + position: absolute; + top: 4.39rem; + left: 11.75rem; + width: 0.3rem; + height: 0.55rem; + // background-color: #007bff; + cursor: pointer; + opacity: 0.4; + transform-style: preserve-3d; + } + .steamHeatingPump-main3 { + z-index: 100; + position: absolute; + top: 4.5rem; + left: 12.25rem; + width: 0.3rem; + height: 0.55rem; + // background-color: #007bff; + cursor: pointer; + opacity: 0.4; + transform-style: preserve-3d; + } + .steamHeatingPump-img1 { + z-index: 10; + position: absolute; + top: 4.23rem; + left: 11.4rem; + width: 0.35rem; + height: 0.35rem; + transform-style: preserve-3d; + transform: translateX(-50%) rotateX(60deg) rotateZ(0deg); + } + .steamHeatingPump-img2 { + z-index: 10; + position: absolute; + top: 4.4rem; + left: 11.9rem; + width: 0.35rem; + height: 0.35rem; + transform-style: preserve-3d; + transform: translateX(-50%) rotateX(60deg) rotateZ(0deg); + } + .steamHeatingPump-img3 { + z-index: 10; + position: absolute; + top: 4.55rem; + left: 12.4rem; + width: 0.35rem; + height: 0.35rem; + transform-style: preserve-3d; + transform: translateX(-50%) rotateX(60deg) rotateZ(0deg); + } + .steamHeatingPump-hz1 { + z-index: 10; + position: absolute; + top: 4.18rem; + left: 11.05rem; + font-size: 0.16rem; + font-weight: bold; + } + .steamHeatingPump-hz2 { + z-index: 10; + position: absolute; + top: 4.35rem; + left: 11.62rem; + font-size: 0.16rem; + font-weight: bold; + } + .steamHeatingPump-hz3 { + z-index: 10; + position: absolute; + top: 4.5rem; + left: 12.15rem; + font-size: 0.16rem; + font-weight: bold; + } + .steamHeatingInTem { + z-index: 10; + position: absolute; + top: 4.87rem; + right: 2.35rem; + font-size: 0.16rem; + font-weight: bold; + } + .steamHeatingOutTem { + z-index: 10; + position: absolute; + top: 4.7rem; + right: 2.95rem; + font-size: 0.16rem; + font-weight: bold; + } } // @media (min-width: 1240px) and (max-width: 1440px) { // } diff --git a/src/views/components/hotWater.vue b/src/views/components/hotWater.vue index e00c49f..0d6f791 100644 --- a/src/views/components/hotWater.vue +++ b/src/views/components/hotWater.vue @@ -1,28 +1,23 @@ @@ -39,18 +34,20 @@ export default { return { temData1: "", temData2: "", + temData: [], }; }, watch: { subData: { immediate: true, // 页面加载时立即触发一次监听 handler(newVal) { - console.log("检测到传功来的数据", this.subData); + console.log("检测到传过来的温度数据", this.subData); if (Object.keys(newVal).length > 0) { console.log("newval", newVal); let data = newVal; this.temData1 = ""; this.temData2 = ""; + this.temData = newVal; data.forEach((item) => { if (item.name.includes("回水")) { this.temData1 = parseInt(item.value); @@ -71,11 +68,12 @@ export default { width: 100%; display: flex; flex-direction: row; + flex-wrap: wrap; justify-content: space-between; align-items: center; + margin: 0.1rem 0; .card-li { width: 50%; - padding: 0.2rem 0; display: flex; flex-direction: column; align-items: center; @@ -83,7 +81,6 @@ export default { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 0.1rem; .card-title { font-size: 15px; font-weight: 600; @@ -97,11 +94,11 @@ export default { display: inline-block; } .thermometer { - height: 180px; - width: 40px; + height: 100px; + width: 25px; background: #3d5581; border-radius: 20px; - margin: 0 auto 0.25rem; + margin: 0 auto 0.1rem; overflow: hidden; box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.1); position: relative; @@ -111,32 +108,36 @@ export default { bottom: 0; width: 100%; border-top-left-radius: 20px; - border-top-right-radius:20px; + border-top-right-radius: 20px; background: linear-gradient(to top, #3498db, #2ecc71) !important; } } + .card-li:nth-child(1), + .card-li:nth-child(2) { + padding-bottom: 15px; + } } @media (min-width: 2000px) { -.card-div { - .card-li { - .card-header { - .card-title { - font-size: 0.15rem !important; + .card-div { + .card-li { + .card-header { + .card-title { + font-size: 0.15rem !important; + } + } + .temperature { + font-size: 0.2rem !important; + } + .thermometer { + height: 1.8rem !important; + width: 0.4rem !important; + border-radius: 0.2rem !important; + } + .temprogress { + border-top-left-radius: 0.2rem !important; + border-top-right-radius: 0.2rem !important; } - } - .temperature { - font-size: 0.2rem !important; - } - .thermometer { - height: 1.8rem !important; - width: 0.4rem !important; - border-radius: 0.2rem !important; - } - .temprogress { - border-top-left-radius: 0.2rem !important; - border-top-right-radius:0.2rem !important; } } } -} diff --git a/src/views/components/viewEnergy.vue b/src/views/components/viewEnergy.vue index bd959b7..fe1d66e 100644 --- a/src/views/components/viewEnergy.vue +++ b/src/views/components/viewEnergy.vue @@ -291,6 +291,9 @@ export default { .right-table { padding: 27px 15px 35px 15px; } +.choice { + margin-left: 0 !important; +} .mr20 { width: 92px; padding: 2px;