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

修改主机参数页面数据

meizhou
selia-zx 6 months ago
parent
4f79f5bac9
commit
ccde8e6187
2 changed files with 201 additions and 144 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. 269
      src/views/centerairC/sysMonitor/components/hostChart.vue
  2. 62
      src/views/centerairC/sysMonitor/hostDetails.vue

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

@ -21,6 +21,7 @@ export default {
chartData2: [], chartData2: [],
chartData3: [], chartData3: [],
chartData4: [], chartData4: [],
chartData5: [],
bottomData: [], bottomData: [],
}; };
}, },
@ -36,10 +37,10 @@ export default {
let data = newVal; let data = newVal;
if (data.length > 0) { if (data.length > 0) {
// 获取 title 和 titleStr 数组 // 获取 title 和 titleStr 数组
const title = data.data[0].title; const title = data[0].title;
const titleStr = data.data[1].titleStr; const titleStr = data[1].titleStr;
// 获取 dataList 数组 // 获取 dataList 数组
const dataList = data.data[3].dataList; const dataList = data[3].dataList;
// 遍历 dataList 数组 // 遍历 dataList 数组
dataList.forEach((item) => { dataList.forEach((item) => {
@ -51,41 +52,49 @@ export default {
} }
}); });
console.log("处理后的data", data); console.log("处理后的data", data);
let name1 = "";
let name2 = "";
let name3 = "";
let name4 = "";
let name5 = "";
data.forEach((item) => { data.forEach((item) => {
if (item.timeStr) { if (item.timeStr) {
this.bottomData = item.timeStr; this.bottomData = item.timeStr;
} }
if (item.dataList) { if (item.dataList) {
let name1 = ""; // 用于存储 name 的数组
let name2 = ""; const names = [];
let name3 = ""; // 用于存储 chartData 的数组
let name4 = ""; const chartData = [];
item.dataList.forEach((val, index) => { item.dataList.forEach((val, index) => {
if (val.name) { if (val.name) {
switch (index) { // 只处理前 5 个元素
case 0: if (index < 5) {
this.chartData1 = val.value; chartData[index] = val.value;
name1 = val.name; names[index] = val.name;
break; console.log("多少个name",chartData[index] )
case 1:
this.chartData2 = val.value;
name2 = val.name;
break;
case 2:
this.chartData3 = val.value;
name3 = val.name;
break;
case 3:
this.chartData4 = val.value;
name4 = val.name;
break;
default:
break;
} }
} }
}); });
// 将 chartData 数组的值赋值给 this.chartDataX
this.chartData1 = chartData[0];
this.chartData2 = chartData[1];
this.chartData3 = chartData[2];
this.chartData4 = chartData[3];
this.chartData5 = chartData[4];
// 将 names 数组的值赋值给外部作用域的变量
name1 = names[0] || "";
name2 = names[1] || "";
name3 = names[2] || "";
name4 = names[3] || "";
name5 = names[4] || "";
} }
}); });
this.$nextTick(() => { this.$nextTick(() => {
const adapterOption = { const adapterOption = {
xAxis: { xAxis: {
@ -112,6 +121,11 @@ export default {
name: name4, name: name4,
data: this.chartData4, data: this.chartData4,
}, },
{
yAxisIndex: 0,
name: name5,
data: this.chartData5,
},
], ],
}; };
this.chartInstance.setOption(adapterOption); this.chartInstance.setOption(adapterOption);
@ -141,6 +155,10 @@ export default {
yAxisIndex: 0, yAxisIndex: 0,
data: [], data: [],
}, },
{
yAxisIndex: 0,
data: [],
},
], ],
}; };
this.chartInstance.setOption(adapterOption); this.chartInstance.setOption(adapterOption);
@ -266,35 +284,35 @@ export default {
data: this.chartData1, data: this.chartData1,
//折线颜色 //折线颜色
itemStyle: { itemStyle: {
color: "#1a69f1", //折线点的颜色 color: "#00CED1", //折线点的颜色
}, },
lineStyle: { lineStyle: {
color: "#1a69f1", //折线点的颜色 color: "#00CED1", //折线点的颜色
}, },
smooth: false, smooth: false,
// 不显示折线点 // 不显示折线点
showSymbol: false, showSymbol: false,
// 区域填充样式，添加渐变背景 // // 区域填充样式，添加渐变背景
areaStyle: { // areaStyle: {
color: { // color: {
type: "linear", // type: "linear",
x: 0, // x: 0,
y: 0, // y: 0,
x2: 0, // x2: 0,
y2: 1, // y2: 1,
colorStops: [ // colorStops: [
{ // {
offset: 0, // offset: 0,
color: "rgba(26, 105, 241, 0.5)", // 渐变起始颜色 // color: "rgba(26, 105, 241, 0.5)", // 渐变起始颜色
}, // },
{ // {
offset: 1, // offset: 1,
color: "rgba(26, 105, 241, 0)", // 渐变结束颜色 // color: "rgba(26, 105, 241, 0)", // 渐变结束颜色
}, // },
], // ],
global: false, // 缺省为 false // global: false, // 缺省为 false
}, // },
}, // },
}, },
{ {
type: "line", type: "line",
@ -303,31 +321,31 @@ export default {
data: this.chartData2, data: this.chartData2,
//折线颜色 //折线颜色
itemStyle: { itemStyle: {
color: "#00CED1", //折线的颜色 color: "#3ba272", //折线的颜色
}, },
smooth: false, smooth: false,
// 不显示折线点 // 不显示折线点
showSymbol: false, showSymbol: false,
areaStyle: { // areaStyle: {
color: { // color: {
type: "linear", // type: "linear",
x: 0, // x: 0,
y: 0, // y: 0,
x2: 0, // x2: 0,
y2: 1, // y2: 1,
colorStops: [ // colorStops: [
{ // {
offset: 0, // offset: 0,
color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色 // color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色
}, // },
{ // {
offset: 1, // offset: 1,
color: "rgba(0, 206, 209, 0)", // 渐变结束颜色 // color: "rgba(0, 206, 209, 0)", // 渐变结束颜色
}, // },
], // ],
global: false, // 缺省为 false // global: false, // 缺省为 false
}, // },
}, // },
}, },
{ {
type: "line", type: "line",
@ -336,31 +354,31 @@ export default {
data: this.chartData3, data: this.chartData3,
//折线颜色 //折线颜色
itemStyle: { itemStyle: {
color: "#00CED1", //折线的颜色 color: "#fac858", //折线的颜色
}, },
smooth: false, smooth: false,
// 不显示折线点 // 不显示折线点
showSymbol: false, showSymbol: false,
areaStyle: { // areaStyle: {
color: { // color: {
type: "linear", // type: "linear",
x: 0, // x: 0,
y: 0, // y: 0,
x2: 0, // x2: 0,
y2: 1, // y2: 1,
colorStops: [ // colorStops: [
{ // {
offset: 0, // offset: 0,
color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色 // color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色
}, // },
{ // {
offset: 1, // offset: 1,
color: "rgba(0, 206, 209, 0)", // 渐变结束颜色 // color: "rgba(0, 206, 209, 0)", // 渐变结束颜色
}, // },
], // ],
global: false, // 缺省为 false // global: false, // 缺省为 false
}, // },
}, // },
}, },
{ {
type: "line", type: "line",
@ -369,31 +387,64 @@ export default {
data: this.chartData4, data: this.chartData4,
//折线颜色 //折线颜色
itemStyle: { itemStyle: {
color: "#00CED1", //折线的颜色 color: "#1a69f1", //折线的颜色
}, },
smooth: false, smooth: false,
// 不显示折线点 // 不显示折线点
showSymbol: false, showSymbol: false,
areaStyle: { // areaStyle: {
color: { // color: {
type: "linear", // type: "linear",
x: 0, // x: 0,
y: 0, // y: 0,
x2: 0, // x2: 0,
y2: 1, // y2: 1,
colorStops: [ // colorStops: [
{ // {
offset: 0, // offset: 0,
color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色 // color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色
// },
// {
// offset: 1,
// color: "rgba(0, 206, 209, 0)", // 渐变结束颜色
// },
// ],
// global: false, // 缺省为 false
// },
// },
}, },
{ {
offset: 1, type: "line",
color: "rgba(0, 206, 209, 0)", // 渐变结束颜色 // 拐点大小
}, symbolSize: 8,
], data: this.chartData5,
global: false, // 缺省为 false //折线颜色
}, itemStyle: {
color: "#ee6666", //折线的颜色
}, },
smooth: 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
// },
// },
}, },
], ],
}; };

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

@ -62,14 +62,14 @@
<div class="host-name">{{ deviceName }}</div> <div class="host-name">{{ deviceName }}</div>
<!-- 冷凝器蒸发器压力--> <!-- 冷凝器蒸发器压力-->
<div class="outIn"> <div class="outIn">
<div class="outIn-li in1"> <!-- <div class="outIn-li in1">
<svg-icon slot="prefix" icon-class="arrow" class="arrow" /> <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
<div class="kpa">冷凝器压力:{{ condenserPre }}kpa</div> <div class="kpa">冷凝器压力:{{ condenserPre }}kpa</div>
</div> </div>
<div class="outIn-li out1"> <div class="outIn-li out1">
<svg-icon slot="prefix" icon-class="arrow" class="arrow" /> <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
<div class="kpa">蒸发器压力:{{ evaporatorPre }}kpa</div> <div class="kpa">蒸发器压力:{{ evaporatorPre }}kpa</div>
</div> </div> -->
<!-- <div class="outIn-li in2"> <!-- <div class="outIn-li in2">
<svg-icon slot="prefix" icon-class="arrow" class="arrow" /> <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
<div class="kpa">566.6kpa</div> <div class="kpa">566.6kpa</div>
@ -165,8 +165,8 @@
</div> </div>
<line-square <line-square
class="line1" class="line1"
:horizontalLength="700" :horizontalLength="720"
:verticalLength="300" :verticalLength="440"
:overlap="15" :overlap="15"
></line-square> ></line-square>
</div> </div>
@ -193,8 +193,8 @@
</div> </div>
<line-square <line-square
class="line1" class="line1"
:horizontalLength="700" :horizontalLength="720"
:verticalLength="300" :verticalLength="440"
:overlap="15" :overlap="15"
></line-square> ></line-square>
</div> </div>
@ -216,6 +216,7 @@ import hostChart from "./components/hostChart.vue";
import titleImg from "./components/titleImg.vue"; import titleImg from "./components/titleImg.vue";
import lineSquare from "./components/lineSquare.vue"; import lineSquare from "./components/lineSquare.vue";
import { format } from "@/utils/datetime"; import { format } from "@/utils/datetime";
import { getDay } from "@/utils/datetime";
export default { export default {
name: "sysControl", name: "sysControl",
components: { LoadData, hostChart, titleImg, lineSquare }, components: { LoadData, hostChart, titleImg, lineSquare },
@ -400,19 +401,16 @@ export default {
if (item.mtType === "9") { if (item.mtType === "9") {
// 压缩机参数 // 压缩机参数
this.compressorData = item.list; this.compressorData = item.list;
this.compressorData.forEach((item) => { // 遍历数组
if ( for (let i = 0; i < this.compressorData.length; i++) {
item.paramType === "13" && const item = this.compressorData[i];
item.otherName.includes("冷凝器") if (item.paramType === '1' && Number(item.curValue) === 0) {
) { item.curValue = "停止";
this.condenserPre = item.curValue; console.log("压缩机停止了啊是0···················")
} else if ( }else if (item.paramType === '1' && Number(item.curValue) === 1){
item.paramType === "13" && item.curValue = "运行";
item.otherName.includes("蒸发器") }
) {
this.evaporatorPre = item.curValue;
} }
});
} }
}); });
} }
@ -433,10 +431,11 @@ export default {
let newDataArray = []; // 用于存储符合条件的对象的新数组 let newDataArray = []; // 用于存储符合条件的对象的新数组
data.forEach((item) => { data.forEach((item) => {
if ( if (
item.otherName.includes("冷冻出水温度") || item.otherName.includes("冷冻回水温度") ||
item.otherName.includes("冷冻进水温度") || item.otherName.includes("冷冻供水温度") ||
item.otherName.includes("冷却出水温度") || item.otherName.includes("冷却回水温度") ||
item.otherName.includes("冷却进水温度") item.otherName.includes("冷却供水温度") ||
item.otherName.includes("负载")
) { ) {
let dataItem = { let dataItem = {
name: item.otherName, name: item.otherName,
@ -509,7 +508,6 @@ export default {
.monitor { .monitor {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
height: auto;
background-color: black; background-color: black;
color: #fff; color: #fff;
.monitor-top { .monitor-top {
@ -797,7 +795,7 @@ export default {
} }
} }
.detail-bottom { .detail-bottom {
height: 2.6rem; height: 5rem;
margin-top: 0.3rem; margin-top: 0.3rem;
margin-left: 0.25rem; margin-left: 0.25rem;
display: flex; display: flex;
@ -808,6 +806,7 @@ export default {
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
width: 3rem; width: 3rem;
margin-bottom: 1.5rem;
.hostStatus-li { .hostStatus-li {
background-color: #25455a; background-color: #25455a;
color: #c0dffc; color: #c0dffc;
@ -815,6 +814,9 @@ export default {
margin-bottom: 0.1rem; margin-bottom: 0.1rem;
padding: 0.1rem; padding: 0.1rem;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
display: flex;
flex-direction: row;
align-items: flex-start;
} }
} }
.detail-data { .detail-data {
@ -850,7 +852,7 @@ export default {
// width: 100%; // width: 100%;
margin-right: 0.1rem; margin-right: 0.1rem;
position: relative; position: relative;
color: #89acc4; color: #c0dffc;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
font-size: 0.18rem; font-size: 0.18rem;
@ -912,6 +914,10 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0.04rem 0.1rem; padding: 0.04rem 0.1rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
} }
.rightDot::before { .rightDot::before {
@ -987,15 +993,15 @@ export default {
} }
.line1 { .line1 {
position: absolute; position: absolute;
top: 0.53rem; top: 0rem;
} }
} }
.hostparams { .hostparams {
width: 7.6rem; width: 7.6rem;
.detail-data-bottom { .detail-data-bottom {
padding-left: 0.75rem; padding-left: 0.5rem;
.detail-data-li { .detail-data-li {
width: 3rem; width: 3.2rem;
} }
} }
} }

Write Preview
Loading…
Cancel
Save