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

修改主机参数页面数据

dev
selia-zx 1 month ago
parent
b8ee223e10
commit
a90a39b9aa
2 changed files with 198 additions and 155 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. 268
      src/views/centerairC/sysMonitor/components/hostChart.vue
  2. 69
      src/views/centerairC/sysMonitor/hostDetails.vue

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

@ -3,7 +3,6 @@
<div class="historyCharts" ref="chart_ref"></div> <div class="historyCharts" ref="chart_ref"></div>
</div> </div>
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
export default { export default {
@ -21,6 +20,7 @@ export default {
chartData2: [], chartData2: [],
chartData3: [], chartData3: [],
chartData4: [], chartData4: [],
chartData5: [],
bottomData: [], bottomData: [],
}; };
}, },
@ -36,11 +36,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) => {
// 查找 name 在 title 数组中的索引 // 查找 name 在 title 数组中的索引
@ -51,39 +50,42 @@ 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(() => {
@ -112,6 +114,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 +148,10 @@ export default {
yAxisIndex: 0, yAxisIndex: 0,
data: [], data: [],
}, },
{
yAxisIndex: 0,
data: [],
},
], ],
}; };
this.chartInstance.setOption(adapterOption); this.chartInstance.setOption(adapterOption);
@ -266,35 +277,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 +314,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 +347,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 +380,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
// },
// },
}, },
], ],
}; };
@ -406,10 +450,10 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.historyCharts { .historyCharts {
width: 100%; width: 100%;
height: 4rem; height: 4rem;
} }
</style> </style>

69
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>
@ -202,7 +202,6 @@
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { import {
hostDetailsData, hostDetailsData,
@ -216,13 +215,13 @@ 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 },
data() { data() {
return { return {
loading: false, loading: false,
currentDate: new Date(), currentDate: new Date(),
nowTimer: null, nowTimer: null,
deviceName: "", //主机名称 deviceName: "", //主机名称
@ -400,19 +399,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 +429,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,
@ -504,12 +501,10 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.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 +792,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 +803,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 +811,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 +849,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;
@ -895,7 +894,6 @@ export default {
#217df5 100% #217df5 100%
); );
} }
.detail-data-li::before { .detail-data-li::before {
top: 0; top: 0;
} }
@ -912,8 +910,11 @@ 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 {
content: ""; content: "";
position: absolute; position: absolute;
@ -931,7 +932,6 @@ export default {
border-radius: 50%; border-radius: 50%;
z-index: 10; z-index: 10;
} }
.rightDot::after { .rightDot::after {
content: ""; content: "";
position: absolute; position: absolute;
@ -966,7 +966,6 @@ export default {
rgba(255, 255, 255, 0) 70% rgba(255, 255, 255, 0) 70%
); );
} }
.leftDot::after { .leftDot::after {
content: ""; content: "";
position: absolute; position: absolute;
@ -987,15 +986,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