lijianfu
/
eemcs_ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1.主机详情页面，图表添加负载y轴，压缩机参数不采用tab形式 

2.热水监控系统中，修改热泵开关模式为select选择
3.修改温度监测系统中，传参和样式的问题
meizhou
selia-zx 18 hours ago
parent
8282126f15
commit
ad60088e00
10 changed files with 420 additions and 287 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      .env.development
  2. BIN
      src/assets/images/host-img3.png
  3. BIN
      src/assets/images/host-img5.png
  4. 353
      src/views/centerairC/sysMonitor/components/hostChart.vue
  5. 125
      src/views/centerairC/sysMonitor/hostDetails.vue
  6. 11
      src/views/centerairC/timeSwitch/index.vue
  7. 76
      src/views/hotWater/waterControl/index.vue
  8. 15
      src/views/temSys/temHistory/components/historyCharts.vue
  9. 32
      src/views/temSys/temHistory/components/historyTables.vue
  10. 91
      src/views/temSys/temHistory/index.vue

4
.env.development
Unescape View File

@ -7,9 +7,9 @@ ENV = 'development'
# 开发环境 # 开发环境
# VUE_APP_BASE_API = '/dev-api' # 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:8091' # VUE_APP_BASE_API = 'http://106.55.173.225:8091'
# 路由懒加载 # 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true VUE_CLI_BABEL_TRANSPILE_MODULES = true

BIN
src/assets/images/host-img3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 417 KiB

After

Width:  |  Height:  |  Size: 410 KiB

BIN
src/assets/images/host-img5.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 417 KiB

353
src/views/centerairC/sysMonitor/components/hostChart.vue
Unescape View File

@ -62,44 +62,94 @@ export default {
if (item.timeStr) { if (item.timeStr) {
this.bottomData = item.timeStr; this.bottomData = item.timeStr;
} }
if (item.dataList) { if (item.dataList) {
// 用于存储 name 的数组 // 用于存储 name 的数组
const names = []; const names = [];
// 用于存储 chartData 的数组 // 用于存储 chartData 的数组
const chartData = []; const chartData = [];
item.dataList.forEach((val, index) => { // 查找包含“负载”的数据
let loadDataIndex = -1;
for (let i = 0; i < item.dataList.length; i++) {
if (
item.dataList[i].name &&
item.dataList[i].name.includes("负载")
) {
loadDataIndex = i;
this.chartData5 = item.dataList[i].value;
name5 = item.dataList[i].name;
break;
}
}
// 剔除包含“负载”的数据
if (loadDataIndex !== -1) {
item.dataList.splice(loadDataIndex, 1);
}
// 处理剩下的数据
item.dataList.slice(0, 4).forEach((val, index) => {
if (val.name) { if (val.name) {
// 只处理前 5 个元素 chartData[index] = val.value;
if (index < 5) { names[index] = val.name;
chartData[index] = val.value;
names[index] = val.name;
console.log("多少个name",chartData[index] )
}
} }
}); });
// 将 chartData 数组的值赋值给 this.chartDataX // 将 chartData 数组的值赋值给 this.chartDataX
this.chartData1 = chartData[0]; this.chartData1 = chartData[0] || "";
this.chartData2 = chartData[1]; this.chartData2 = chartData[1] || "";
this.chartData3 = chartData[2]; this.chartData3 = chartData[2] || "";
this.chartData4 = chartData[3]; this.chartData4 = chartData[3] || "";
this.chartData5 = chartData[4];
// 将 names 数组的值赋值给外部作用域的变量 // 将 names 数组的值赋值给外部作用域的变量
name1 = names[0] || ""; name1 = names[0] || "";
name2 = names[1] || ""; name2 = names[1] || "";
name3 = names[2] || ""; name3 = names[2] || "";
name4 = names[3] || ""; name4 = names[3] || "";
name5 = names[4] || "";
} }
}); });
console.log("this.chartData1", this.chartData1);
console.log("this.chartData2", this.chartData2);
console.log("this.chartData3", this.chartData3);
console.log("this.chartData4", this.chartData4);
console.log("this.chartData5", this.chartData5);
this.$nextTick(() => { this.$nextTick(() => {
// 计算双y轴最大最小值，
var Min1 = 0,
Min2 = 0,
Max1 = Math.ceil(
Math.max(
...this.chartData1,
...this.chartData2,
...this.chartData3,
...this.chartData4
)
),
Max2 = Math.ceil(Math.max(...this.chartData5));
console.log("Min1", Min1);
console.log("Min2", Min2);
console.log("Max1", Max1);
console.log("Max2", Max2);
const adapterOption = { const adapterOption = {
xAxis: { xAxis: {
data: this.bottomData, data: this.bottomData,
}, },
yAxis: [
//两个y轴
{
min: Min1,
max: Max1,
splitNumber: 10,
interval: (Max1 - Min1) / 10,
},
{
min: Min2,
max: Max2,
splitNumber: 10,
interval: (Max2 - Min2) / 10,
},
],
series: [ series: [
{ {
yAxisIndex: 0, yAxisIndex: 0,
@ -122,7 +172,7 @@ export default {
data: this.chartData4, data: this.chartData4,
}, },
{ {
yAxisIndex: 0, yAxisIndex: 1,
name: name5, name: name5,
data: this.chartData5, data: this.chartData5,
}, },
@ -138,6 +188,21 @@ export default {
xAxis: { xAxis: {
data: [], data: [],
}, },
yAxis: [
//两个y轴
{
min: 0,
max: 0,
splitNumber: 10,
interval: 0,
},
{
min: 0,
max: 0,
splitNumber: 10,
interval: 0,
},
],
series: [ series: [
{ {
yAxisIndex: 0, yAxisIndex: 0,
@ -193,6 +258,17 @@ export default {
}, },
//初始化chartInstance对象 //初始化chartInstance对象
initChart() { initChart() {
var Min1 = 0,
Min2 = 0,
Max1 = Math.ceil(
Math.max(
...this.chartData1,
...this.chartData2,
...this.chartData3,
...this.chartData4
) + 4
),
Max2 = Math.ceil(Math.max(...this.chartData5) + 4);
const chartRef = this.$refs.chart_ref; const chartRef = this.$refs.chart_ref;
if (chartRef) { if (chartRef) {
// 初始化图表的代码 // 初始化图表的代码
@ -200,6 +276,42 @@ export default {
this.option = { this.option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
// 自定义 tooltip 内容
formatter: function (params) {
var res = params[0].name + "<br/>";
for (var i = 0, l = params.length; i < l; i++) {
var seriesName = params[i].seriesName;
var value = params[i].value;
console.log("打印颜色", params[i].color)
var marker =
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
params[i].color +
'"></span>';
// 根据不同的seriesName 返回不同的单位
if (seriesName.includes("负载")) {
res +=
marker +
seriesName +
":" +
'<span style="color: #000000; font-weight: bold;margin-left:5px">' +
value +
" " +
"%" +
"</span><br>";
} else {
res +=
marker +
seriesName +
":" +
'<span style="color: #000000; font-weight: bold;margin-left:5px">' +
value +
" " +
"℃" +
"</span><br>";
}
}
return res;
},
}, },
legend: { legend: {
show: true, show: true,
@ -242,46 +354,86 @@ export default {
}, //x轴分割线 }, //x轴分割线
data: this.bottomData, data: this.bottomData,
}, },
yAxis: { yAxis: [
min: 0, {
// max:20, min: Min1,
// // // min:'dataMin', max: Max1,
// // // max:'dataMax', splitNumber: 10,
// name: "kwh", // 第一个 y 轴的单位描述 interval: (Max1 - Min1) / 10,
// 设置 name 的样式 // 设置 name 的样式
nameTextStyle: { nameTextStyle: {
color: "rgba(255, 255, 255, 1)", color: "rgba(255, 255, 255, 1)",
fontSize: 12, fontSize: 12,
}, },
miniInterval: 5, miniInterval: 5,
type: "value", type: "value",
// 修饰刻度标签的颜色即y坐标数据 // 修饰刻度标签的颜色即y坐标数据
axisLabel: { axisLabel: {
color: "rgba(255, 255, 255, 1)", color: "rgba(255, 255, 255, 1)",
}, },
// 显示y坐标轴 // 显示y坐标轴
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#365576", // 设置 y 轴线的颜色 color: "#365576", // 设置 y 轴线的颜色
},
},
//y轴分割线段数
// splitNumber: 10,
// 修改y轴分割线的颜色
splitLine: {
lineStyle: {
color: "#1a3d62", // 设置分割线的颜色
type: "dashed", // 设置分割线为虚线
},
}, },
}, },
//y轴分割线段数 {
// splitNumber: 10, min: Min2,
// 修改y轴分割线的颜色 max: Max2,
splitLine: { splitNumber: 10,
lineStyle: { interval: (Max2 - Min2) / 10,
color: "#1a3d62", // 设置分割线的颜色 // 设置 name 的样式
type: "dashed", // 设置分割线为虚线 nameTextStyle: {
color: "rgba(255, 255, 255, 1)",
fontSize: 12,
},
miniInterval: 5,
type: "value",
name: "负载", // y 轴的单位描述
// 修饰刻度标签的颜色即y坐标数据
axisLabel: {
color: "#ffffff",
},
// 修饰刻度标签的颜色即y坐标数据
axisLabel: {
color: "rgba(255, 255, 255, 1)",
},
// 显示y坐标轴
axisLine: {
show: true,
lineStyle: {
color: "#365576", // 设置 y 轴线的颜色
},
},
//y轴分割线段数
// splitNumber: 10,
// 修改y轴分割线的颜色
splitLine: {
lineStyle: {
color: "#1a3d62", // 设置分割线的颜色
type: "dashed", // 设置分割线为虚线
},
}, },
}, },
}, ],
series: [ series: [
{ {
type: "line", type: "line",
// 拐点大小 // 拐点大小
symbolSize: 8, symbolSize: 8,
data: this.chartData1, data: this.chartData1,
yAxisIndex: 0,
//折线颜色 //折线颜色
itemStyle: { itemStyle: {
color: "#00CED1", //折线点的颜色 color: "#00CED1", //折线点的颜色
@ -292,33 +444,13 @@ export default {
smooth: false, smooth: false,
// 不显示折线点 // 不显示折线点
showSymbol: false, showSymbol: false,
// // 区域填充样式，添加渐变背景
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "rgba(26, 105, 241, 0.5)", // 渐变起始颜色
// },
// {
// offset: 1,
// color: "rgba(26, 105, 241, 0)", // 渐变结束颜色
// },
// ],
// global: false, // 缺省为 false
// },
// },
}, },
{ {
type: "line", type: "line",
// 拐点大小 // 拐点大小
symbolSize: 8, symbolSize: 8,
data: this.chartData2, data: this.chartData2,
yAxisIndex: 0,
//折线颜色 //折线颜色
itemStyle: { itemStyle: {
color: "#3ba272", //折线的颜色 color: "#3ba272", //折线的颜色
@ -326,125 +458,48 @@ export default {
smooth: false, smooth: false,
// 不显示折线点 // 不显示折线点
showSymbol: false, showSymbol: false,
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色
// },
// {
// offset: 1,
// color: "rgba(0, 206, 209, 0)", // 渐变结束颜色
// },
// ],
// global: false, // 缺省为 false
// },
// },
}, },
{ {
type: "line", type: "line",
// 拐点大小 // 拐点大小
symbolSize: 8, symbolSize: 8,
data: this.chartData3, data: this.chartData3,
yAxisIndex: 0,
//折线颜色 //折线颜色
itemStyle: { itemStyle: {
color: "#fac858", //折线的颜色 color: "#1a69f1", //折线的颜色
}, },
smooth: false, smooth: false,
// 不显示折线点 // 不显示折线点
showSymbol: false, showSymbol: false,
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色
// },
// {
// offset: 1,
// color: "rgba(0, 206, 209, 0)", // 渐变结束颜色
// },
// ],
// global: false, // 缺省为 false
// },
// },
}, },
{ {
type: "line", type: "line",
// 拐点大小 // 拐点大小
symbolSize: 8, symbolSize: 8,
data: this.chartData4, data: this.chartData4,
yAxisIndex: 0,
//折线颜色 //折线颜色
itemStyle: { itemStyle: {
color: "#1a69f1", //折线的颜色 color: "#ee6666", //折线的颜色
}, },
smooth: false, smooth: false,
// 不显示折线点 // 不显示折线点
showSymbol: false, showSymbol: false,
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色
// },
// {
// offset: 1,
// color: "rgba(0, 206, 209, 0)", // 渐变结束颜色
// },
// ],
// global: false, // 缺省为 false
// },
// },
}, },
{ {
type: "line", type: "line",
// 拐点大小 // 拐点大小
symbolSize: 8, symbolSize: 8,
data: this.chartData5, data: this.chartData5,
yAxisIndex: 1,
//折线颜色 //折线颜色
itemStyle: { itemStyle: {
color: "#ee6666", //折线的颜色 color: "#fac858", //折线的颜色
}, },
smooth: false, smooth: false,
// 不显示折线点 // 不显示折线点
showSymbol: false, showSymbol: false,
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色
// },
// {
// offset: 1,
// color: "rgba(0, 206, 209, 0)", // 渐变结束颜色
// },
// ],
// global: false, // 缺省为 false
// },
// },
}, },
], ],
}; };

125
src/views/centerairC/sysMonitor/hostDetails.vue
Unescape View File

@ -163,33 +163,67 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <line-square
class="line1"
:horizontalLength="720"
:verticalLength="440"
:overlap="15"
></line-square> -->
</div> </div>
<div class="detail-data compressor"> <div class="detail-data compressor">
<div class="detail-data-top"> <div class="detail-data-top">
<title-img></title-img> <title-img></title-img>
<div class="choice"> <div class="choice">
<div <div>{{ compressorData1.mtTypeName }}</div>
class="mr20" </div>
v-for="(item, index) in compressorData" <title-img></title-img>
:key="index" </div>
@click="handleEnter(index, item.name)" <div class="detail-data-bottom">
:class="{ timeStyle: sharedIndex == index }" <div
> class="detail-data-li"
{{ item.mtTypeName }} v-for="(subItem, subIndex) in compressorData1.list"
:key="subIndex"
>
<div class="rightDot">
<div class="leftDot">
<span>{{ subItem.otherName }}:</span>
<span class="dotData">{{ subItem.curValue }}</span>
<span>{{ subItem.unit }}</span>
</div>
</div> </div>
</div> </div>
</div>
</div>
<div class="detail-data compressor">
<div class="detail-data-top">
<title-img></title-img>
<div class="choice">
<div>{{ compressorData2.mtTypeName }}</div>
</div>
<title-img></title-img> <title-img></title-img>
</div> </div>
<div class="detail-data-bottom"> <div class="detail-data-bottom">
<div <div
class="detail-data-li" class="detail-data-li"
v-for="(subItem, subIndex) in currentDisplayData" v-for="(subItem, subIndex) in compressorData2.list"
:key="subIndex"
>
<div class="rightDot">
<div class="leftDot">
<span>{{ subItem.otherName }}:</span>
<span class="dotData">{{ subItem.curValue }}</span>
<span>{{ subItem.unit }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="detail-data compressor">
<div class="detail-data-top">
<title-img></title-img>
<div class="choice">
<div>{{ compressorData3.mtTypeName }}</div>
</div>
<title-img></title-img>
</div>
<div class="detail-data-bottom">
<div
class="detail-data-li"
v-for="(subItem, subIndex) in compressorData3.list"
:key="subIndex" :key="subIndex"
> >
<div class="rightDot"> <div class="rightDot">
@ -239,13 +273,14 @@ export default {
localObj: {}, //本地远程状态 localObj: {}, //本地远程状态
badObj: {}, //故障状态 badObj: {}, //故障状态
timeObj: {}, //累计运行时间 timeObj: {}, //累计运行时间
compressorData: [], //压缩机参数 compressorData1: [], //压缩机1参数
compressorData2: [],
compressorData3: [],
temArray: [], //冷冻冷却水温度 temArray: [], //冷冻冷却水温度
isMagnetic: false, isMagnetic: false,
isShowWarning: false, //是否有报警 isShowWarning: false, //是否有报警
dayData: "", //监测天数 dayData: "", //监测天数
sharedIndex: 0, sharedIndex: 0,
currentDisplayData: [],
}; };
}, },
computed: { computed: {
@ -387,10 +422,6 @@ export default {
return Number(a.orderNum) - Number(b.orderNum); return Number(a.orderNum) - Number(b.orderNum);
}); });
this.hostData.forEach((item) => { this.hostData.forEach((item) => {
// // 右边主机参数 温度12
// if (item.paramType === "12") {
// this.rightHostData.push(item);
// }
//左边主机参数 根据不同的 paramType 处理 showValue //左边主机参数 根据不同的 paramType 处理 showValue
if (item.paramType === "6") { if (item.paramType === "6") {
// 运行状态 // 运行状态
@ -415,31 +446,25 @@ export default {
} }
}); });
// 使用 filter 方法过滤掉 item 为 '0' 的对象 // 使用 filter 方法过滤掉 item 为 '0' 的对象
this.compressorData = data.filter((obj) => obj.mtType !== "0"); let compressorData = data.filter((obj) => obj.mtType !== "0");
console.log("压缩机数组", this.compressorData); console.log("压缩机数组", this.compressorData);
// 在组件挂载后触发 handleEnter 方法，这里默认点击第一个元素 compressorData.forEach((item) => {
if (this.compressorData.length > 0) { if (item.mtType === "9") {
this.handleEnter(0, this.compressorData[0].name); // 压缩机1
} this.compressorData1 = item;
}
if (item.mtType === "10") {
// 压缩机2
this.compressorData2 = item;
}
if (item.mtType === "11") {
// 压缩机3
this.compressorData3 = item;
}
});
} }
}); });
}, },
handleEnter(index, event) {
console.log("index", index);
this.sharedIndex = index;
// 更新当前显示的数据为点击项的子列表
this.currentDisplayData = this.compressorData[index].list;
// 遍历数组
for (let i = 0; i < this.currentDisplayData.length; i++) {
const item = this.currentDisplayData[i];
if (item.paramType === "1" && Number(item.curValue) === 0) {
item.curValue = "停止";
console.log("压缩机停止了啊是0···················");
} else if (item.paramType === "1" && Number(item.curValue) === 1) {
item.curValue = "运行";
}
}
},
// 采集参数列表 // 采集参数列表
getCollect(id) { getCollect(id) {
let data = { let data = {
@ -769,7 +794,7 @@ export default {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 0.6rem; top: 0.6rem;
left: 4.8rem; left: 4.9rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
@ -864,8 +889,8 @@ export default {
.fanBlade { .fanBlade {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 2.3rem; top: 2.5rem;
left: 4.3rem; left: 4.1rem;
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
transform-style: preserve-3d; transform-style: preserve-3d;
@ -888,9 +913,9 @@ export default {
.host-name { .host-name {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 1.43rem; top: 1.6rem;
left: 1.44rem; left: 1.44rem;
color: #3520f8; color: #2925f8;
font-weight: bold; font-weight: bold;
font-size: 0.18rem; font-size: 0.18rem;
} }
@ -898,7 +923,7 @@ export default {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 0rem; top: 0rem;
left:5rem; left: 5rem;
} }
} }
.detail-top-right { .detail-top-right {
@ -1104,12 +1129,12 @@ export default {
} }
} }
.compressor { .compressor {
width: 7.6rem; width: 3.5rem;
.detail-data-bottom { .detail-data-bottom {
// padding-left: 0.75rem; // padding-left: 0.75rem;
.detail-data-li { .detail-data-li {
// width: 3.4rem; // width: 3.4rem;
width: calc(50% - 0.2rem) !important; width: calc(100%) !important;
margin: 0 0.1rem; margin: 0 0.1rem;
} }
} }

11
src/views/centerairC/timeSwitch/index.vue
Unescape View File

@ -419,13 +419,7 @@ export default {
border-radius: 10px; border-radius: 10px;
font-size: 14px; font-size: 14px;
.device-li { .device-li {
width: 100%; flex: none !important;
display: flex;
flex-direction: row;
align-items: center;
padding: 12px 0;
color: #abcdfc;
border-bottom: 1px dashed #0349ac;
.device-name { .device-name {
flex: 1; flex: 1;
white-space: nowrap; white-space: nowrap;
@ -441,9 +435,6 @@ export default {
} }
} }
} }
.device-li:nth-child(1) {
color: #9ca3af;
}
} }
// 媒体查询，适配大于2000px分辨率的大屏样式 // 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) { @media (min-width: 2000px) {

76
src/views/hotWater/waterControl/index.vue
Unescape View File

@ -69,15 +69,19 @@
<div class="words-li"> <div class="words-li">
<div class="ash">开关状态:</div> <div class="ash">开关状态:</div>
<div class="white"> <div class="white">
<el-switch <el-select
style="display: block" v-model="item.hotPumpStatus"
v-model="item.switchStatus" placeholder="请选择"
active-color="#13ce66"
active-text="开启"
inactive-text="关闭"
@change="handleHotPump(item)" @change="handleHotPump(item)"
> >
</el-switch> <el-option
v-for="item in hotPumpOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div> </div>
</div> </div>
<div class="words-li"> <div class="words-li">
@ -583,6 +587,24 @@ export default {
}, },
tabsList: [], tabsList: [],
expandedKeys: [], expandedKeys: [],
hotPumpOptions: [
{
label: "关机",
value: 0,
},
{
label: "制冷",
value: 2,
},
{
label: "制热",
value: 3,
},
{
label: "热水",
value: 4,
},
],
currentId: "", //当前选中高亮的id currentId: "", //当前选中高亮的id
currentName: "", //当前选中的名称 currentName: "", //当前选中的名称
currentLevel: "", //当前节点的层级 currentLevel: "", //当前节点的层级
@ -746,6 +768,7 @@ export default {
...item, ...item,
waterLevel: Number(item.waterLevel), waterLevel: Number(item.waterLevel),
runningStatus: Number(item.runningStatus) == 0 ? "停止" : "运行", //运行状态 runningStatus: Number(item.runningStatus) == 0 ? "停止" : "运行", //运行状态
hotPumpStatus: item.switchStatus, //热泵开关状态
switchStatus: Number(item.switchStatus) == 0 ? false : true, //启停控制 switchStatus: Number(item.switchStatus) == 0 ? false : true, //启停控制
alarmStatus: Number(item.alarmStatus) == 0 ? "无故障" : "故障", //故障状态 alarmStatus: Number(item.alarmStatus) == 0 ? "无故障" : "故障", //故障状态
handAutomaticSwitch: handAutomaticSwitch:
@ -805,7 +828,8 @@ export default {
...item, ...item,
waterLevel: Number(item.waterLevel), waterLevel: Number(item.waterLevel),
runningStatus: runningStatus:
Number(item.switchStatus) == 0 ? "运行" : "停止", //运行状态 Number(item.runningStatus) == 0 ? "运行" : "停止", //运行状态
hotPumpStatus: item.switchStatus, //热泵开关状态
switchStatus: switchStatus:
Number(item.switchStatus) == 0 ? false : true, //启停控制 Number(item.switchStatus) == 0 ? false : true, //启停控制
alarmStatus: alarmStatus:
@ -909,10 +933,26 @@ export default {
}, },
// 设置热泵开关状态 // 设置热泵开关状态
handleHotPump(item) { handleHotPump(item) {
// 记录原始状态
const originalStatus = item.hotPumpStatus;
// 根据 value 值获取对应的 label
let statusLabel = "";
switch (item.hotPumpStatus) {
case 0:
statusLabel = "关机";
break;
case 2:
statusLabel = "制冷";
break;
case 3:
statusLabel = "制热";
break;
case 4:
statusLabel = "热水";
break;
}
this.$confirm( this.$confirm(
`确定要切换设备"${item.name}"的状态为:${ `确定要切换设备"${item.name}"的状态为:${statusLabel} 吗?"`,
item.switchStatus ? "开启" : "关闭 吗?"
}`,
"提示", "提示",
{ {
confirmButtonText: "确定", confirmButtonText: "确定",
@ -921,19 +961,11 @@ export default {
} }
) )
.then(() => { .then(() => {
// 这里调用请求函数，示例中只是简单打印信息 this.hadleOperationConrol(item.switchStatusId, item.hotPumpStatus);
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; item.hotPumpStatus = originalStatus;
}); });
}, },
// 设置供水泵手自动状态 // 设置供水泵手自动状态

15
src/views/temSys/temHistory/components/historyCharts.vue
Unescape View File

@ -1,6 +1,10 @@
<template> <template>
<div> <div>
<div class="historyCharts" ref="chart_ref"></div> <div
class="historyCharts"
:class="{ oneClass: isShowOne }"
ref="chart_ref"
></div>
</div> </div>
</template> </template>
@ -12,6 +16,9 @@ export default {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
isShowOne: {
type: Boolean,
},
}, },
data() { data() {
return { return {
@ -293,6 +300,10 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.historyCharts { .historyCharts {
width: 100%; width: 100%;
height: 200px; height: 230px;
}
.oneClass {
width: 100% !important;
height: 600px !important;
} }
</style> </style>

32
src/views/temSys/temHistory/components/historyTables.vue
Unescape View File

@ -1,18 +1,14 @@
<template> <template>
<div> <div>
<el-table class="historyTables" :data="tableList" height="200px"> <el-table
<el-table-column class="historyTables"
prop="curTime" :class="{ oneClass: isShowOne }"
label="时间" :data="tableList"
></el-table-column> height="230px"
<el-table-column >
prop="indoorTemp" <el-table-column prop="curTime" label="时间"></el-table-column>
label="温度(℃)" <el-table-column prop="indoorTemp" label="温度(℃)"></el-table-column>
></el-table-column> <el-table-column prop="indoorHumidity" label="湿度(%)"></el-table-column>
<el-table-column
prop="indoorHumidity"
label="湿度(%)"
></el-table-column>
</el-table> </el-table>
</div> </div>
</template> </template>
@ -24,6 +20,9 @@ export default {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
isShowOne: {
type: Boolean,
},
}, },
data() { data() {
return { return {
@ -50,4 +49,9 @@ export default {
}; };
</script> </script>
<style></style> <style lang="scss" scoped>
.oneClass {
width: 100% !important;
height: 600px !important;
}
</style>

91
src/views/temSys/temHistory/index.vue
Unescape View File

@ -26,6 +26,7 @@
v-model="timeDate" v-model="timeDate"
:default-time="['00:00:00', '23:59:59']" :default-time="['00:00:00', '23:59:59']"
type="datetimerange" type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至" range-separator="至"
placeholder="选择日期" placeholder="选择日期"
start-placeholder="开始日期" start-placeholder="开始日期"
@ -48,7 +49,10 @@
<div class="history" v-loading="loading"> <div class="history" v-loading="loading">
<div <div
class="history-li" class="history-li"
:class="{ oneClass: tableData.length === 1 }" :class="{
oneClass: tableData.length === 1,
twoClass: tableData.length === 2,
}"
v-for="(item, index) in tableData" v-for="(item, index) in tableData"
:key="index" :key="index"
> >
@ -74,15 +78,20 @@
<history-charts <history-charts
v-if="item.showCharts" v-if="item.showCharts"
:chartsData="item.dataList" :chartsData="item.dataList"
:isShowOne="showOneClass"
></history-charts> ></history-charts>
<history-tables v-else :tableData="item.dataList"></history-tables> <history-tables
v-else
:tableData="item.dataList"
:isShowOne="showOneClass"
></history-tables>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { format2,formatDay } from "@/utils/datetime"; import { format2, formatDay } from "@/utils/datetime";
import { spaceTree } from "@/api/region"; import { spaceTree } from "@/api/region";
import { temHistory } from "@/api/temSys/temMonitor"; import { temHistory } from "@/api/temSys/temMonitor";
import historyCharts from "./components/historyCharts.vue"; import historyCharts from "./components/historyCharts.vue";
@ -93,7 +102,7 @@ export default {
return { return {
loading: false, loading: false,
timeDate: [], timeDate: [],
dayDate:[], dayDate: [],
// 查询参数 // 查询参数
queryParams: { queryParams: {
systemType: "4", systemType: "4",
@ -109,20 +118,8 @@ export default {
multiple: true, multiple: true,
}, },
options: [], options: [],
tableData: [ tableData: [],
{ showOneClass: true,
name: "A201",
showCharts: true, // 初始显示图表组件
},
{
name: "A202",
showCharts: true, // 初始显示图表组件
},
{
name: "A203",
showCharts: true, // 初始显示图表组件
},
],
}; };
}, },
mounted() { mounted() {
@ -165,6 +162,7 @@ export default {
this.selectedValue = [path]; this.selectedValue = [path];
} }
console.log("反推三个id", path); console.log("反推三个id", path);
this.queryParams.houseIds = path;
} }
this.getList(); this.getList();
@ -205,27 +203,40 @@ export default {
getList() { getList() {
this.queryParams.startTime = this.timeDate[0]; this.queryParams.startTime = this.timeDate[0];
this.queryParams.endTime = this.timeDate[1]; this.queryParams.endTime = this.timeDate[1];
this.dayDate = [
formatDay(this.queryParams.startTime),
formatDay(this.queryParams.endTime),
];
let data = this.queryParams; let data = this.queryParams;
console.log("参数", data); console.log("参数", data);
temHistory(data).then((res) => { // 开启 loading 效果
console.log("历史数据返回", res); this.loading = true;
if (res.code == 200) { temHistory(data)
// 开启 loading 效果 .then((res) => {
this.loading = true; console.log("历史数据返回", res);
// 过滤掉 dataList 为空的对象 if (res.code == 200) {
const filteredRows = res.rows.filter( // 过滤掉 dataList 为空的对象
(item) => item.dataList && item.dataList.length > 0 const filteredRows = res.rows.filter(
); (item) => item.dataList && item.dataList.length > 0
// 为过滤后的每个对象添加 showCharts: true 属性 );
const newRows = filteredRows.map((item) => ({ // 为过滤后的每个对象添加 showCharts: true 属性
...item, const newRows = filteredRows.map((item) => ({
showCharts: true, ...item,
})); showCharts: true,
this.tableData = newRows; }));
console.log("处理后的历史数据", newRows); this.tableData = newRows;
} if (this.tableData.length > 2) {
}).catch((error) => { this.showOneClass = false;
} else {
this.showOneClass = true;
}
console.log("处理后的历史数据", newRows);
console.log("动态class布尔值", this.showOneClass);
}
})
.catch((error) => {
console.error("查询表格数据时发生错误:", error); console.error("查询表格数据时发生错误:", error);
this.loading = false;
}) })
.finally(() => { .finally(() => {
setTimeout(() => { setTimeout(() => {
@ -263,7 +274,7 @@ export default {
.history-li { .history-li {
background-color: rgb(38, 64, 99); background-color: rgb(38, 64, 99);
width: calc(49% - 20px); width: calc(49% - 20px);
height: 330px; height: 350px;
margin: 0 10px; margin: 0 10px;
padding: 20px; padding: 20px;
border-radius: 20px; border-radius: 20px;
@ -304,11 +315,15 @@ export default {
} }
.oneClass { .oneClass {
width: 100% !important; width: 100% !important;
height: 750px !important;
}
.twoClass {
height: 750px !important;
} }
} }
</style> </style>
<style scoped> <style scoped>
.elCascader >>>.el-input__inner::placeholder { .elCascader >>> .el-input__inner::placeholder {
color: transparent !important; color: transparent !important;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save