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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 282
      src/views/centerairC/sysMonitor/components/hostChart.vue
  2. 71
      src/views/centerairC/sysMonitor/hostDetails.vue

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

@ -3,7 +3,6 @@
<div class="historyCharts" ref="chart_ref"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
@ -21,6 +20,7 @@ export default {
chartData2: [],
chartData3: [],
chartData4: [],
chartData5: [],
bottomData: [],
};
},
@ -36,11 +36,10 @@ export default {
let data = newVal;
if (data.length > 0) {
// 获取 title 和 titleStr 数组
const title = data.data[0].title;
const titleStr = data.data[1].titleStr;
const title = data[0].title;
const titleStr = data[1].titleStr;
// 获取 dataList 数组
const dataList = data.data[3].dataList;
const dataList = data[3].dataList;
// 遍历 dataList 数组
dataList.forEach((item) => {
// 查找 name 在 title 数组中的索引
@ -51,39 +50,42 @@ export default {
}
});
console.log("处理后的data", data);
let name1 = "";
let name2 = "";
let name3 = "";
let name4 = "";
let name5 = "";
data.forEach((item) => {
if (item.timeStr) {
this.bottomData = item.timeStr;
}
if (item.dataList) {
let name1 = "";
let name2 = "";
let name3 = "";
let name4 = "";
// 用于存储 name 的数组
const names = [];
// 用于存储 chartData 的数组
const chartData = [];
item.dataList.forEach((val, index) => {
if (val.name) {
switch (index) {
case 0:
this.chartData1 = val.value;
name1 = val.name;
break;
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;
// 只处理前 5 个元素
if (index < 5) {
chartData[index] = val.value;
names[index] = val.name;
console.log("多少个name",chartData[index] )
}
}
});
// 将 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(() => {
@ -94,28 +96,33 @@ export default {
series: [
{
yAxisIndex: 0,
name:name1,
name: name1,
data: this.chartData1,
},
{
yAxisIndex: 0,
name:name2,
name: name2,
data: this.chartData2,
},
{
yAxisIndex: 0,
name:name3,
name: name3,
data: this.chartData3,
},
{
yAxisIndex: 0,
name:name4,
name: name4,
data: this.chartData4,
},
{
yAxisIndex: 0,
name: name5,
data: this.chartData5,
},
],
};
this.chartInstance.setOption(adapterOption);
//手动的调用图标对象的resize才能产生效果
// 手动的调用图标对象的 resize 才能产生效果
this.chartInstance.resize();
});
} else {
@ -141,6 +148,10 @@ export default {
yAxisIndex: 0,
data: [],
},
{
yAxisIndex: 0,
data: [],
},
],
};
this.chartInstance.setOption(adapterOption);
@ -266,35 +277,35 @@ export default {
data: this.chartData1,
//折线颜色
itemStyle: {
color: "#1a69f1", //折线点的颜色
color: "#00CED1", //折线点的颜色
},
lineStyle: {
color: "#1a69f1", //折线点的颜色
color: "#00CED1", //折线点的颜色
},
smooth: 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
},
},
// // 区域填充样式，添加渐变背景
// 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",
@ -303,31 +314,31 @@ export default {
data: this.chartData2,
//折线颜色
itemStyle: {
color: "#00CED1", //折线的颜色
color: "#3ba272", //折线的颜色
},
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
},
},
// 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",
@ -336,31 +347,31 @@ export default {
data: this.chartData3,
//折线颜色
itemStyle: {
color: "#00CED1", //折线的颜色
color: "#fac858", //折线的颜色
},
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
},
},
// 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",
@ -369,31 +380,64 @@ export default {
data: this.chartData4,
//折线颜色
itemStyle: {
color: "#00CED1", //折线的颜色
color: "#1a69f1", //折线的颜色
},
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
},
// 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",
// 拐点大小
symbolSize: 8,
data: this.chartData5,
//折线颜色
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>
<style lang="scss" scoped>
.historyCharts {
width: 100%;
height: 4rem;
}
</style>

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

@ -62,14 +62,14 @@
<div class="host-name">{{ deviceName }}</div>
<!-- 冷凝器蒸发器压力-->
<div class="outIn">
<div class="outIn-li in1">
<!-- <div class="outIn-li in1">
<svg-icon slot="prefix" icon-class="arrow" class="arrow" />
<div class="kpa">冷凝器压力:{{ condenserPre }}kpa</div>
</div>
<div class="outIn-li out1">
<svg-icon slot="prefix" icon-class="arrow" class="arrow" />
<div class="kpa">蒸发器压力:{{ evaporatorPre }}kpa</div>
</div>
</div> -->
<!-- <div class="outIn-li in2">
<svg-icon slot="prefix" icon-class="arrow" class="arrow" />
<div class="kpa">566.6kpa</div>
@ -165,8 +165,8 @@
</div>
<line-square
class="line1"
:horizontalLength="700"
:verticalLength="300"
:horizontalLength="720"
:verticalLength="440"
:overlap="15"
></line-square>
</div>
@ -193,8 +193,8 @@
</div>
<line-square
class="line1"
:horizontalLength="700"
:verticalLength="300"
:horizontalLength="720"
:verticalLength="440"
:overlap="15"
></line-square>
</div>
@ -202,7 +202,6 @@
</div>
</div>
</template>
<script>
import {
hostDetailsData,
@ -216,13 +215,13 @@ import hostChart from "./components/hostChart.vue";
import titleImg from "./components/titleImg.vue";
import lineSquare from "./components/lineSquare.vue";
import { format } from "@/utils/datetime";
import { getDay } from "@/utils/datetime";
export default {
name: "sysControl",
components: { LoadData, hostChart, titleImg, lineSquare },
data() {
return {
loading: false,
currentDate: new Date(),
nowTimer: null,
deviceName: "", //主机名称
@ -400,19 +399,16 @@ export default {
if (item.mtType === "9") {
// 压缩机参数
this.compressorData = item.list;
this.compressorData.forEach((item) => {
if (
item.paramType === "13" &&
item.otherName.includes("冷凝器")
) {
this.condenserPre = item.curValue;
} else if (
item.paramType === "13" &&
item.otherName.includes("蒸发器")
) {
this.evaporatorPre = item.curValue;
// 遍历数组
for (let i = 0; i < this.compressorData.length; i++) {
const item = this.compressorData[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 = "运行";
}
});
}
}
});
}
@ -433,10 +429,11 @@ export default {
let newDataArray = []; // 用于存储符合条件的对象的新数组
data.forEach((item) => {
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 = {
name: item.otherName,
@ -504,12 +501,10 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.monitor {
width: 100%;
min-height: 100vh;
height: auto;
background-color: black;
color: #fff;
.monitor-top {
@ -797,7 +792,7 @@ export default {
}
}
.detail-bottom {
height: 2.6rem;
height: 5rem;
margin-top: 0.3rem;
margin-left: 0.25rem;
display: flex;
@ -808,6 +803,7 @@ export default {
flex-direction: column;
justify-content: flex-end;
width: 3rem;
margin-bottom: 1.5rem;
.hostStatus-li {
background-color: #25455a;
color: #c0dffc;
@ -815,6 +811,9 @@ export default {
margin-bottom: 0.1rem;
padding: 0.1rem;
letter-spacing: 0.02rem;
display: flex;
flex-direction: row;
align-items: flex-start;
}
}
.detail-data {
@ -850,7 +849,7 @@ export default {
// width: 100%;
margin-right: 0.1rem;
position: relative;
color: #89acc4;
color: #c0dffc;
font-family: Arial, sans-serif;
letter-spacing: 0.02rem;
font-size: 0.18rem;
@ -895,7 +894,6 @@ export default {
#217df5 100%
);
}
.detail-data-li::before {
top: 0;
}
@ -912,8 +910,11 @@ export default {
width: 100%;
height: 100%;
padding: 0.04rem 0.1rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.rightDot::before {
content: "";
position: absolute;
@ -931,7 +932,6 @@ export default {
border-radius: 50%;
z-index: 10;
}
.rightDot::after {
content: "";
position: absolute;
@ -966,7 +966,6 @@ export default {
rgba(255, 255, 255, 0) 70%
);
}
.leftDot::after {
content: "";
position: absolute;
@ -987,15 +986,15 @@ export default {
}
.line1 {
position: absolute;
top: 0.53rem;
top: 0rem;
}
}
.hostparams {
width: 7.6rem;
.detail-data-bottom {
padding-left: 0.75rem;
padding-left: 0.5rem;
.detail-data-li {
width: 3rem;
width: 3.2rem;
}
}
}
@ -1038,4 +1037,4 @@ export default {
}
}
}
</style>
</style>
Write Preview
Loading…
Cancel
Save