51 changed files with 6482 additions and 183 deletions
|
After Width: | Height: | Size: 974 B |
|
After Width: | Height: | Size: 974 B |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 181 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 392 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 366 KiB |
|
After Width: | Height: | Size: 417 KiB |
|
After Width: | Height: | Size: 531 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
@ -0,0 +1,415 @@
|
||||
<template> |
||||
<div> |
||||
<div class="historyCharts" ref="chart_ref"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
export default { |
||||
props: { |
||||
temArray: { |
||||
type: Array, |
||||
default: () => [], |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
chartInstance: null, |
||||
option: {}, |
||||
chartData1: [], |
||||
chartData2: [], |
||||
chartData3: [], |
||||
chartData4: [], |
||||
bottomData: [], |
||||
}; |
||||
}, |
||||
watch: { |
||||
temArray: { |
||||
immediate: true, // 页面加载时立即触发一次监听 |
||||
handler(newVal, oldVal) { |
||||
if (newVal) { |
||||
this.chartData1 = []; // 清空 chartData1 |
||||
this.chartData2 = []; // 清空 chartData2 |
||||
this.bottomData = []; // 清空 bottomData |
||||
console.log("charts传值", newVal); |
||||
let data = newVal; |
||||
if (data.length > 0) { |
||||
// 获取 title 和 titleStr 数组 |
||||
const title = data.data[0].title; |
||||
const titleStr = data.data[1].titleStr; |
||||
// 获取 dataList 数组 |
||||
const dataList = data.data[3].dataList; |
||||
|
||||
// 遍历 dataList 数组 |
||||
dataList.forEach((item) => { |
||||
// 查找 name 在 title 数组中的索引 |
||||
const index = title.indexOf(item.name); |
||||
if (index !== -1) { |
||||
// 若找到匹配项，则将 name 替换为 titleStr 中对应位置的值 |
||||
item.name = titleStr[index]; |
||||
} |
||||
}); |
||||
console.log("处理后的data", data); |
||||
data.forEach((item) => { |
||||
if (item.timeStr) { |
||||
this.bottomData = item.timeStr; |
||||
} |
||||
if (item.dataList) { |
||||
let name1 = ""; |
||||
let name2 = ""; |
||||
let name3 = ""; |
||||
let name4 = ""; |
||||
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; |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
}); |
||||
this.$nextTick(() => { |
||||
const adapterOption = { |
||||
xAxis: { |
||||
data: this.bottomData, |
||||
}, |
||||
series: [ |
||||
{ |
||||
yAxisIndex: 0, |
||||
name:name1, |
||||
data: this.chartData1, |
||||
}, |
||||
{ |
||||
yAxisIndex: 0, |
||||
name:name2, |
||||
data: this.chartData2, |
||||
}, |
||||
{ |
||||
yAxisIndex: 0, |
||||
name:name3, |
||||
data: this.chartData3, |
||||
}, |
||||
{ |
||||
yAxisIndex: 0, |
||||
name:name4, |
||||
data: this.chartData4, |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
}); |
||||
} else { |
||||
this.$nextTick(() => { |
||||
const adapterOption = { |
||||
xAxis: { |
||||
data: [], |
||||
}, |
||||
series: [ |
||||
{ |
||||
yAxisIndex: 0, |
||||
data: [], |
||||
}, |
||||
{ |
||||
yAxisIndex: 0, |
||||
data: [], |
||||
}, |
||||
{ |
||||
yAxisIndex: 0, |
||||
data: [], |
||||
}, |
||||
{ |
||||
yAxisIndex: 0, |
||||
data: [], |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
this.screenAdapter(); |
||||
}); |
||||
} |
||||
} |
||||
}, |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.initChart(); |
||||
this.screenAdapter(); |
||||
}, |
||||
destroyed() { |
||||
//取消监听器 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = {}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
}, |
||||
//初始化chartInstance对象 |
||||
initChart() { |
||||
const chartRef = this.$refs.chart_ref; |
||||
if (chartRef) { |
||||
// 初始化图表的代码 |
||||
this.chartInstance = echarts.init(this.$refs.chart_ref); |
||||
this.option = { |
||||
tooltip: { |
||||
trigger: "axis", |
||||
}, |
||||
legend: { |
||||
show: true, |
||||
top: 0, |
||||
textStyle: { |
||||
color: "white", |
||||
}, |
||||
}, |
||||
grid: { |
||||
top: "10%", |
||||
left: "4%", |
||||
right: "6%", |
||||
bottom: "3%", |
||||
containLabel: true, |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
//设置为true代表离零刻度间隔一段距离 |
||||
boundaryGap: true, |
||||
// 修饰刻度标签的颜色即x坐标数据 |
||||
axisLabel: { |
||||
// interval: 0, //强制显示所有x轴数据 |
||||
// rotate: 30, //x轴坐标字体倾斜30度 |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
axisTick: { |
||||
show: false, // 不显示坐标轴刻度线 |
||||
}, |
||||
// x坐标轴的颜色 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#e2e6f0", |
||||
}, |
||||
}, //x轴分割线 |
||||
data: this.bottomData, |
||||
}, |
||||
yAxis: { |
||||
min: 0, |
||||
// max:20, |
||||
// // // min:'dataMin', |
||||
// // // max:'dataMax', |
||||
// name: "kwh", // 第一个 y 轴的单位描述 |
||||
// 设置 name 的样式 |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}, |
||||
miniInterval: 5, |
||||
type: "value", |
||||
// 修饰刻度标签的颜色即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: [ |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: 8, |
||||
data: this.chartData1, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#1a69f1", //折线点的颜色 |
||||
}, |
||||
lineStyle: { |
||||
color: "#1a69f1", //折线点的颜色 |
||||
}, |
||||
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 |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: 8, |
||||
data: this.chartData2, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#00CED1", //折线的颜色 |
||||
}, |
||||
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 |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: 8, |
||||
data: this.chartData3, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#00CED1", //折线的颜色 |
||||
}, |
||||
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 |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: 8, |
||||
data: this.chartData4, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#00CED1", //折线的颜色 |
||||
}, |
||||
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 |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance.setOption(this.option, true); |
||||
} else { |
||||
console.error("未找到有效的 DOM 元素"); |
||||
} |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.historyCharts { |
||||
width: 100%; |
||||
height: 4rem; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,67 @@
|
||||
<template> |
||||
<div class="crossed-lines-container"> |
||||
<!-- 上边线 --> |
||||
<div |
||||
class="line horizontal-line" |
||||
:style="{ width: (horizontalLength / 100) + 'rem', left: `calc(50% - ${horizontalLength / 200}rem)`, top: `calc(50% - ${(verticalLength / 200) - (overlap / 100)}rem)` }" |
||||
></div> |
||||
<!-- 右边线 --> |
||||
<div |
||||
class="line vertical-line" |
||||
:style="{ height: (verticalLength / 100) + 'rem', top: `calc(50% - ${verticalLength / 200}rem)`, left: `calc(50% + ${(horizontalLength / 200) - (overlap / 100)}rem)` }" |
||||
></div> |
||||
<!-- 下边线 --> |
||||
<div |
||||
class="line horizontal-line" |
||||
:style="{ width: (horizontalLength / 100) + 'rem', left: `calc(50% - ${horizontalLength / 200}rem)`, top: `calc(50% + ${(verticalLength / 200) - (overlap / 100)}rem)` }" |
||||
></div> |
||||
<!-- 左边线 --> |
||||
<div |
||||
class="line vertical-line" |
||||
:style="{ height: (verticalLength / 100) + 'rem', top: `calc(50% - ${verticalLength / 200}rem)`, left: `calc(50% - ${(horizontalLength / 200) - (overlap / 100)}rem)` }" |
||||
></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
// 水平方向（上下边）的直线长度 |
||||
horizontalLength: { |
||||
type: Number, |
||||
default: 100 |
||||
}, |
||||
// 垂直方向（左右边）的直线长度 |
||||
verticalLength: { |
||||
type: Number, |
||||
default: 100 |
||||
}, |
||||
// 直线交叉时超出的长度 |
||||
overlap: { |
||||
type: Number, |
||||
default: 10 |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.crossed-lines-container { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.line { |
||||
position: absolute; |
||||
background-color: rgb(45, 121, 236,0.7); |
||||
} |
||||
|
||||
.horizontal-line { |
||||
height: 0.01rem; |
||||
} |
||||
|
||||
.vertical-line { |
||||
width: 0.01rem; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,452 @@
|
||||
<template> |
||||
<div> |
||||
<div class="sys_charts" ref="sys_charts"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
import { eventBus } from "@/utils/evenBus"; |
||||
import { overView } from "@/api/bigScreen"; |
||||
import { getDay, getMonth, getYear } from "@/utils/datetime"; |
||||
export default { |
||||
props: { |
||||
hostData: { |
||||
type: Array, |
||||
default: () => [], |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
chartInstance: null, |
||||
option: {}, |
||||
loadPercent: "", |
||||
}; |
||||
}, |
||||
watch: { |
||||
hostData: { |
||||
immediate: true, // 页面加载时立即触发一次监听 |
||||
handler(newVal, oldVal) { |
||||
if (newVal) { |
||||
console.log("charts传值", newVal); |
||||
let data = newVal; |
||||
if (data.length > 0) { |
||||
data.forEach((item) => { |
||||
if (item.paramType === "28") { |
||||
this.loadPercent = item.curValue; |
||||
} |
||||
}); |
||||
this.$nextTick(() => { |
||||
// 销毁现有的 ECharts 实例 |
||||
if (this.chartInstance) { |
||||
this.chartInstance.dispose(); |
||||
} |
||||
// 重新初始化图表 |
||||
this.initChart(); |
||||
}); |
||||
} else { |
||||
} |
||||
} |
||||
}, |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.initChart(); |
||||
this.screenAdapter(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
}, |
||||
destroyed() { |
||||
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
// 计算颜色设置的函数 |
||||
getAxisLineColor(useData, maxData) { |
||||
// 计算阈值 |
||||
// 真实值大于最大值的0.75才使用颜色渐变 |
||||
const threshold = maxData * 0.75; |
||||
|
||||
// 判断实际值是否超过阈值 |
||||
if (useData > threshold) { |
||||
return [ |
||||
[ |
||||
useData / maxData, |
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
||||
{ offset: 0, color: "rgba(0,127,208,1)" }, |
||||
{ offset: 0.6, color: "rgba(0,127,208,1)" }, |
||||
{ offset: 1, color: "rgba(69, 235, 167,0.5)" }, |
||||
]), |
||||
], |
||||
[1, "rgba(28,128,245,.0)"], |
||||
]; |
||||
} else { |
||||
return [ |
||||
[ |
||||
useData / maxData, |
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
||||
{ offset: 0, color: "rgba(0,127,208,1)" }, |
||||
{ offset: 0.5, color: "rgba(0,127,208,1)" }, |
||||
{ offset: 1, color: "rgba(0,127,208,1)" }, |
||||
]), |
||||
], |
||||
[1, "rgba(28,128,245,.0)"], |
||||
]; |
||||
} |
||||
}, |
||||
//初始化chartInstance2对象 折线图 |
||||
initChart() { |
||||
var value = 80; |
||||
// 初始化数据 |
||||
const dataArr = this.loadPercent; //负载数据 |
||||
const dataX = 100; |
||||
this.chartInstance = echarts.init(this.$refs.sys_charts); |
||||
this.option = { |
||||
backgroundStyle: { |
||||
borderWidth: 1, |
||||
color: "transparent", |
||||
}, |
||||
title: [ |
||||
{ |
||||
text: `${dataArr} %`, |
||||
bottom: "8%", |
||||
left: "center", |
||||
textStyle: { |
||||
fontSize: "16", //标记 |
||||
color: "#ffff", |
||||
fontWeight: 800, |
||||
}, |
||||
triggerEvent: true, |
||||
}, |
||||
], |
||||
|
||||
legend: { |
||||
show: false, |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "最外部进度条", |
||||
type: "gauge", |
||||
radius: "99%", |
||||
splitNumber: 10, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: [ |
||||
[ |
||||
dataArr / dataX, |
||||
{ |
||||
type: "linear", |
||||
x: 0, |
||||
y: 1, |
||||
x2: 0.5, |
||||
y2: 0.5, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: "rgba(0,0,0,0)", // 0% 处的颜色 |
||||
}, |
||||
{ |
||||
offset: 0.8, |
||||
color: "#195b9d", // 100% 处的颜色 |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: "#0a2256", // 100% 处的颜色 |
||||
}, |
||||
], |
||||
global: false, // 缺省为 false |
||||
}, |
||||
], |
||||
[1, "#083158"], |
||||
], |
||||
width: 5, //标记 |
||||
}, |
||||
}, |
||||
axisLabel: { |
||||
show: false, |
||||
}, |
||||
axisTick: { |
||||
show: false, |
||||
}, |
||||
splitLine: { |
||||
show: false, |
||||
}, |
||||
itemStyle: { |
||||
show: false, |
||||
}, |
||||
detail: { |
||||
show: false, |
||||
}, |
||||
title: { |
||||
// 标题 |
||||
show: false, |
||||
}, |
||||
data: [ |
||||
{ |
||||
name: "title", |
||||
value: dataArr, |
||||
}, |
||||
], |
||||
pointer: { |
||||
show: false, |
||||
}, |
||||
animationDuration: 4000, |
||||
}, |
||||
{ |
||||
name: "刻度尺", |
||||
type: "gauge", |
||||
radius: "88%", |
||||
splitNumber: 10, // 刻度数量 |
||||
min: 0, // 最小刻度 |
||||
max: dataX, // 最大刻度 |
||||
// 分隔线 |
||||
splitLine: { |
||||
show: true, |
||||
length: 12, |
||||
lineStyle: { |
||||
width: 3, |
||||
color: "#12E5FE", |
||||
}, |
||||
}, |
||||
// 刻度线 |
||||
axisTick: { |
||||
show: true, |
||||
splitNumber: 10, |
||||
length: 5, |
||||
lineStyle: { |
||||
color: "#12E5FE", |
||||
width: 2, |
||||
}, |
||||
}, |
||||
// 刻度标签 |
||||
axisLabel: { |
||||
distance: -8, //刻度数字离轴线的距离 |
||||
color: "#CEF3FE", |
||||
fontSize: "6", |
||||
fontWeight: 600, |
||||
}, |
||||
detail: { |
||||
show: false, |
||||
}, |
||||
axisLine: { |
||||
lineStyle: { |
||||
width: -10, //刻度离轴线的距离 |
||||
color: [ |
||||
[ |
||||
1, |
||||
{ |
||||
type: "radial", |
||||
x: 0.5, |
||||
y: 0.6, |
||||
r: 0.6, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0.85, |
||||
color: "#031F46", // 0% 处的颜色 |
||||
}, |
||||
{ |
||||
offset: 0.93, |
||||
color: "#060d25", // 100% 处的颜色 |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: "#12D7EF", // 100% 处的颜色 |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
], |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
name: "外部指针", |
||||
type: "gauge", |
||||
radius: "90%", |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: [ |
||||
[dataArr / dataX - 0.001, "rgba(0,0,0,0)"], |
||||
[dataArr / dataX + 0.003, "#e43c59"], |
||||
[1, "rgba(0,0,0,0)"], |
||||
], |
||||
width: 33, |
||||
}, |
||||
}, |
||||
axisLabel: { |
||||
show: false, |
||||
}, |
||||
axisTick: { |
||||
show: false, |
||||
}, |
||||
splitLine: { |
||||
show: false, |
||||
}, |
||||
itemStyle: { |
||||
show: false, |
||||
}, |
||||
detail: { |
||||
show: false, |
||||
}, |
||||
title: { |
||||
// 标题 |
||||
show: false, |
||||
}, |
||||
data: [ |
||||
{ |
||||
name: "title", |
||||
value: dataArr, |
||||
}, |
||||
], |
||||
pointer: { |
||||
show: false, |
||||
}, |
||||
}, |
||||
{ |
||||
name: "内层带指针", |
||||
type: "gauge", |
||||
radius: "60%", |
||||
splitNumber: 10, // 刻度数量 |
||||
min: 0, // 最小刻度 |
||||
max: dataX, // 最大刻度 |
||||
// 仪表盘轴线相关配置 |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: [ |
||||
[ |
||||
1, |
||||
{ |
||||
type: "radial", |
||||
x: 0.5, |
||||
y: 0.59, |
||||
r: 0.6, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0.72, |
||||
color: "#032046", |
||||
}, |
||||
{ |
||||
offset: 0.94, |
||||
color: "#086989", |
||||
}, |
||||
{ |
||||
offset: 0.98, |
||||
color: "#0FAFCB", |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: "#0EA4C1", |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
], |
||||
width: 1000, |
||||
}, |
||||
}, |
||||
// 分隔线 |
||||
splitLine: { |
||||
show: false, |
||||
}, |
||||
// 刻度线 |
||||
axisTick: { |
||||
show: false, |
||||
}, |
||||
// 刻度标签 |
||||
axisLabel: { |
||||
show: false, |
||||
}, |
||||
// 仪表盘指针 |
||||
pointer: { |
||||
show: true, |
||||
length: "95%", |
||||
width: 5, // 指针粗细 |
||||
}, |
||||
// 仪表盘指针样式 |
||||
itemStyle: { |
||||
color: "#01eaf8", |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: dataArr, |
||||
}, |
||||
], |
||||
detail: { |
||||
show: false, |
||||
}, |
||||
}, |
||||
|
||||
// 中间半圆装饰 |
||||
{ |
||||
type: "gauge", |
||||
radius: "110%", // 大小 |
||||
center: ["50%", "127%"], |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
// 轴线样式 |
||||
width: 4, // 宽度 |
||||
color: [ |
||||
[ |
||||
1, |
||||
{ |
||||
type: "radial", |
||||
x: 0.5, |
||||
y: 0, |
||||
r: 0.6, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: "#00f3f9", // 0% 处的颜色 |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: "#000", // 100% 处的颜色 |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
], |
||||
}, |
||||
}, |
||||
axisTick: { |
||||
// 刻度 |
||||
show: false, |
||||
}, |
||||
splitLine: { |
||||
// 分割线 |
||||
show: false, |
||||
}, |
||||
axisLabel: { |
||||
// 刻度标签 |
||||
show: false, |
||||
}, |
||||
pointer: { |
||||
// 仪表盘指针 |
||||
show: false, |
||||
}, |
||||
detail: { |
||||
// 仪表盘详情 |
||||
show: false, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance.setOption(this.option, true); |
||||
}, |
||||
screenAdapter() { |
||||
const titleFontSize = this.$refs.sys_charts.offsetWidth / 18; |
||||
const adapterOption = {}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
this.chartInstance.resize(); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.sys_charts { |
||||
width: 2rem; |
||||
height: 2rem; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,416 @@
|
||||
<template> |
||||
<div> |
||||
<div class="historyCharts" ref="chart_ref"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
export default { |
||||
props: { |
||||
temArray: { |
||||
type: Array, |
||||
default: () => [], |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
chartInstance: null, |
||||
option: {}, |
||||
chartData1: [], |
||||
chartData2: [], |
||||
chartData3: [], |
||||
chartData4: [], |
||||
bottomData: [], |
||||
}; |
||||
}, |
||||
watch: { |
||||
temArray: { |
||||
immediate: true, // 页面加载时立即触发一次监听 |
||||
handler(newVal, oldVal) { |
||||
if (newVal) { |
||||
this.chartData1 = []; // 清空 chartData1 |
||||
this.chartData2 = []; // 清空 chartData2 |
||||
this.bottomData = []; // 清空 bottomData |
||||
console.log("charts传值", newVal); |
||||
let data = newVal; |
||||
if (data.length > 0) { |
||||
// 获取 title 和 titleStr 数组 |
||||
const title = data.data[0].title; |
||||
const titleStr = data.data[1].titleStr; |
||||
// 获取 dataList 数组 |
||||
const dataList = data.data[3].dataList; |
||||
|
||||
// 遍历 dataList 数组 |
||||
dataList.forEach((item) => { |
||||
// 查找 name 在 title 数组中的索引 |
||||
const index = title.indexOf(item.name); |
||||
if (index !== -1) { |
||||
// 若找到匹配项，则将 name 替换为 titleStr 中对应位置的值 |
||||
item.name = titleStr[index]; |
||||
} |
||||
}); |
||||
console.log("处理后的data", data); |
||||
data.forEach((item) => { |
||||
if (item.timeStr) { |
||||
this.bottomData = item.timeStr; |
||||
} |
||||
if (item.dataList) { |
||||
let name1 = ""; |
||||
let name2 = ""; |
||||
let name3 = ""; |
||||
let name4 = ""; |
||||
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; |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
}); |
||||
this.$nextTick(() => { |
||||
const adapterOption = { |
||||
xAxis: { |
||||
data: this.bottomData, |
||||
}, |
||||
series: [ |
||||
{ |
||||
yAxisIndex: 0, |
||||
name:name1, |
||||
data: this.chartData1, |
||||
}, |
||||
{ |
||||
yAxisIndex: 0, |
||||
name:name2, |
||||
data: this.chartData2, |
||||
}, |
||||
{ |
||||
yAxisIndex: 0, |
||||
name:name3, |
||||
data: this.chartData3, |
||||
}, |
||||
{ |
||||
yAxisIndex: 0, |
||||
name:name4, |
||||
data: this.chartData4, |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
}); |
||||
} else { |
||||
this.$nextTick(() => { |
||||
const adapterOption = { |
||||
xAxis: { |
||||
data: [], |
||||
}, |
||||
series: [ |
||||
{ |
||||
yAxisIndex: 0, |
||||
data: [], |
||||
}, |
||||
{ |
||||
yAxisIndex: 0, |
||||
data: [], |
||||
}, |
||||
{ |
||||
yAxisIndex: 0, |
||||
data: [], |
||||
}, |
||||
{ |
||||
yAxisIndex: 0, |
||||
data: [], |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
this.screenAdapter(); |
||||
}); |
||||
} |
||||
} |
||||
}, |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.initChart(); |
||||
this.screenAdapter(); |
||||
}, |
||||
destroyed() { |
||||
//取消监听器 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = {}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
}, |
||||
//初始化chartInstance对象 |
||||
initChart() { |
||||
const chartRef = this.$refs.chart_ref; |
||||
if (chartRef) { |
||||
// 初始化图表的代码 |
||||
this.chartInstance = echarts.init(this.$refs.chart_ref); |
||||
this.option = { |
||||
tooltip: { |
||||
trigger: "axis", |
||||
}, |
||||
legend: { |
||||
show: true, |
||||
top: 0, |
||||
textStyle: { |
||||
color: "white", |
||||
}, |
||||
}, |
||||
grid: { |
||||
top: "10%", |
||||
left: "4%", |
||||
right: "6%", |
||||
bottom: "3%", |
||||
containLabel: true, |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
//设置为true代表离零刻度间隔一段距离 |
||||
boundaryGap: true, |
||||
// 修饰刻度标签的颜色即x坐标数据 |
||||
axisLabel: { |
||||
// interval: 0, //强制显示所有x轴数据 |
||||
// rotate: 30, //x轴坐标字体倾斜30度 |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
axisTick: { |
||||
show: false, // 不显示坐标轴刻度线 |
||||
}, |
||||
// x坐标轴的颜色 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#e2e6f0", |
||||
}, |
||||
}, //x轴分割线 |
||||
data: this.bottomData, |
||||
}, |
||||
yAxis: { |
||||
min: 0, |
||||
// max:20, |
||||
// // // min:'dataMin', |
||||
// // // max:'dataMax', |
||||
// name: "kwh", // 第一个 y 轴的单位描述 |
||||
// 设置 name 的样式 |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}, |
||||
miniInterval: 5, |
||||
type: "value", |
||||
// 修饰刻度标签的颜色即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: [ |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: 8, |
||||
data: this.chartData1, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#1a69f1", //折线点的颜色 |
||||
}, |
||||
lineStyle: { |
||||
color: "#1a69f1", //折线点的颜色 |
||||
}, |
||||
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 |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: 8, |
||||
data: this.chartData2, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#00CED1", //折线的颜色 |
||||
}, |
||||
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 |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: 8, |
||||
data: this.chartData3, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#00CED1", //折线的颜色 |
||||
}, |
||||
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 |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: 8, |
||||
data: this.chartData4, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#00CED1", //折线的颜色 |
||||
}, |
||||
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 |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance.setOption(this.option, true); |
||||
} else { |
||||
console.error("未找到有效的 DOM 元素"); |
||||
} |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.historyCharts { |
||||
width: 100%; |
||||
height:3rem; |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,15 @@
|
||||
<template> |
||||
<div class="title-img"> |
||||
<img src="../../../../assets/images/big.png" class="img1" alt="" /> |
||||
</div> |
||||
</template> |
||||
<style lang="scss" scoped> |
||||
.title-img { |
||||
position: relative; |
||||
} |
||||
.img1 { |
||||
width: 0.8rem; |
||||
height: 0.5rem; |
||||
z-index: 10; |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,881 @@
|
||||
<template> |
||||
<div class="monitor" v-loading="loading"> |
||||
<div class="monitor-top"> |
||||
<img |
||||
class="title-left" |
||||
src="../../../assets/images/title-left.png" |
||||
alt="" |
||||
/> |
||||
<img |
||||
class="title-center" |
||||
src="../../../assets/images/title-center.png" |
||||
alt="" |
||||
/> |
||||
<img |
||||
class="title-right" |
||||
src="../../../assets/images/title-right.png" |
||||
alt="" |
||||
/> |
||||
<div class="sys-title">铭汉高效冷源站管理系统</div> |
||||
<!-- logo --> |
||||
<img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" /> |
||||
<div class="nowTime">{{ formattedDate }}</div> |
||||
<div class="monitor-time">已监测时长:{{ dayData }}天</div> |
||||
<img |
||||
class="icon_warning" |
||||
src="../../../assets/images/warning.png" |
||||
title="报警记录" |
||||
@click="goWarning" |
||||
v-if="isShowWarning" |
||||
alt="" |
||||
/> |
||||
<img |
||||
class="icon_home" |
||||
src="../../../assets/images/icon_home.png" |
||||
title="首页" |
||||
@click="goSys" |
||||
alt="" |
||||
/> |
||||
<img |
||||
class="back-icon" |
||||
src="../../../assets/images/back-icon.png" |
||||
title="返回" |
||||
@click="goBack" |
||||
alt="" |
||||
/> |
||||
</div> |
||||
<div class="host-detail"> |
||||
<div class="detail-top"> |
||||
<div class="detail-top-left"> |
||||
<div class="host-li"> |
||||
<img |
||||
class="host-img" |
||||
src="../../../assets/images/host-img4.png" |
||||
alt="" |
||||
/> |
||||
<div class="host-name">1号螺旋机</div> |
||||
<div class="detail-data hostparams"> |
||||
<div class="detail-data-top"> |
||||
<title-img></title-img> |
||||
<div class="details-title">冷机性能</div> |
||||
<title-img></title-img> |
||||
</div> |
||||
<div class="detail-data-bottom"> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>实时EER:</span> |
||||
<span class="dotData">10.365</span> |
||||
<span class="dotUnit">kw/kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>实时功率:</span> |
||||
<span class="dotData">126</span> |
||||
<span class="dotUnit">kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>实时冷量:</span> |
||||
<span class="dotData">1306</span> |
||||
<span class="dotUnit">kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li year-data"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>全年EER:</span> |
||||
<span class="dotData">0.000</span> |
||||
<span class="dotUnit">kw/kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>全年用电:</span> |
||||
<span class="dotData">64098</span> |
||||
<span class="dotUnit">kw/H</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>全年供电:</span> |
||||
<span class="dotData">101365</span> |
||||
<span class="dotUnit">kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="host-li"> |
||||
<img |
||||
class="host-img" |
||||
src="../../../assets/images/host-img4.png" |
||||
alt="" |
||||
/> |
||||
<div class="host-name">2号螺旋机</div> |
||||
<div class="detail-data hostparams"> |
||||
<div class="detail-data-top"> |
||||
<title-img></title-img> |
||||
<div class="details-title">冷机性能</div> |
||||
<title-img></title-img> |
||||
</div> |
||||
<div class="detail-data-bottom"> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>实时EER:</span> |
||||
<span class="dotData">10.365</span> |
||||
<span class="dotUnit">kw/kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>实时功率:</span> |
||||
<span class="dotData">126</span> |
||||
<span class="dotUnit">kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>实时冷量:</span> |
||||
<span class="dotData">1306</span> |
||||
<span class="dotUnit">kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li year-data"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>全年EER:</span> |
||||
<span class="dotData">0.000</span> |
||||
<span class="dotUnit">kw/kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>全年用电:</span> |
||||
<span class="dotData">64098</span> |
||||
<span class="dotUnit">kw/H</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>全年供电:</span> |
||||
<span class="dotData">101365</span> |
||||
<span class="dotUnit">kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="host-li"> |
||||
<img |
||||
class="host-img" |
||||
src="../../../assets/images/host-img3.png" |
||||
alt="" |
||||
/> |
||||
<div class="host-name">3号磁悬浮机</div> |
||||
<div class="detail-data hostparams"> |
||||
<div class="detail-data-top"> |
||||
<title-img></title-img> |
||||
<div class="details-title">冷机性能</div> |
||||
<title-img></title-img> |
||||
</div> |
||||
<div class="detail-data-bottom"> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>实时EER:</span> |
||||
<span class="dotData">10.365</span> |
||||
<span class="dotUnit">kw/kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>实时功率:</span> |
||||
<span class="dotData">126</span> |
||||
<span class="dotUnit">kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>实时冷量:</span> |
||||
<span class="dotData">1306</span> |
||||
<span class="dotUnit">kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li year-data"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>全年EER:</span> |
||||
<span class="dotData">0.000</span> |
||||
<span class="dotUnit">kw/kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>全年用电:</span> |
||||
<span class="dotData">64098</span> |
||||
<span class="dotUnit">kw/H</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>全年供电:</span> |
||||
<span class="dotData">101365</span> |
||||
<span class="dotUnit">kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-top-right"> |
||||
<div class="detail-data hostparams"> |
||||
<div class="detail-data-top"> |
||||
<title-img></title-img> |
||||
<div class="details-title">系统性能</div> |
||||
<title-img></title-img> |
||||
</div> |
||||
<div class="detail-data-bottom"> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>今日EER:</span> |
||||
<span class="dotData">6.531</span> |
||||
<span class="dotUnit">kw/kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>今日用电:</span> |
||||
<span class="dotData">367</span> |
||||
<span class="dotUnit">kw/H</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>今日供冷:</span> |
||||
<span class="dotData">2397</span> |
||||
<span class="dotUnit">kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li year-data"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>当月EER:</span> |
||||
<span class="dotData">6.131</span> |
||||
<span class="dotUnit">kw/kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>今月用电:</span> |
||||
<span class="dotData">27840</span> |
||||
<span class="dotUnit">kw/H</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>当月供冷:</span> |
||||
<span class="dotData">172069</span> |
||||
<span class="dotUnit">kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li year-data"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>当年EER:</span> |
||||
<span class="dotData">6.531</span> |
||||
<span class="dotUnit">kw/kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>当年用电:</span> |
||||
<span class="dotData">105771</span> |
||||
<span class="dotUnit">kw/H</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span>当年供冷:</span> |
||||
<span class="dotData">744519</span> |
||||
<span class="dotUnit">kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li year-data"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span class="dotTitle">累计EER:</span> |
||||
<span class="dotData">5.531</span> |
||||
<span class="dotUnit">kw/kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span class="dotTitle">累计用电:</span> |
||||
<span class="dotData">1096628</span> |
||||
<span class="dotUnit">kw/H</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-data-li"> |
||||
<div class="rightDot"> |
||||
<div class="leftDot"> |
||||
<span class="dotTitle">累计供冷:</span> |
||||
<span class="dotData">6107983</span> |
||||
<span class="dotUnit">kw</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail-bottom"> |
||||
<performance-chart :temArray="temArray"></performance-chart> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
hostDetailsData, |
||||
hostTemData, |
||||
runTime, |
||||
} from "@/api/centerairC/sysMonitor"; |
||||
import { alarmRecordList } from "@/api/alarm/alarmRecord"; |
||||
import titleImg from "./components/titleImg.vue"; |
||||
import { format } from "@/utils/datetime"; |
||||
import PerformanceChart from './components/performanceChart.vue'; |
||||
export default { |
||||
name: "sysControl", |
||||
components: { titleImg, PerformanceChart }, |
||||
data() { |
||||
return { |
||||
loading: false, |
||||
|
||||
currentDate: new Date(), |
||||
nowTimer: null, |
||||
deviceName: "", //主机名称 |
||||
hostData: [], //冷机性能 |
||||
rightHostData: [], //右 |
||||
automaticObj: {}, //手自动状态 |
||||
localObj: {}, //本地远程状态 |
||||
badObj: {}, //故障状态 |
||||
timeObj: {}, //累计运行时间 |
||||
compressorData: [], //压缩机参数 |
||||
temArray: [], //冷冻冷却水温度 |
||||
isMagnetic: false, |
||||
isShowWarning: false, //是否有报警 |
||||
dayData: "", //监测天数 |
||||
}; |
||||
}, |
||||
computed: { |
||||
formattedDate() { |
||||
const year = this.currentDate.getFullYear(); |
||||
const month = String(this.currentDate.getMonth() + 1).padStart(2, "0"); |
||||
const day = String(this.currentDate.getDate()).padStart(2, "0"); |
||||
const hours = String(this.currentDate.getHours()).padStart(2, "0"); |
||||
const minutes = String(this.currentDate.getMinutes()).padStart(2, "0"); |
||||
const seconds = String(this.currentDate.getSeconds()).padStart(2, "0"); |
||||
const weekDays = [ |
||||
"星期日", |
||||
"星期一", |
||||
"星期二", |
||||
"星期三", |
||||
"星期四", |
||||
"星期五", |
||||
"星期六", |
||||
]; |
||||
const weekDay = weekDays[this.currentDate.getDay()]; |
||||
return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`; |
||||
}, |
||||
}, |
||||
created() {}, |
||||
mounted() { |
||||
this.getHostDetailsData(); |
||||
this.getDayData(); |
||||
// 在组件挂载后尝试进入全屏 |
||||
setTimeout(() => { |
||||
this.requestFullscreen(); |
||||
}, 100); // 延迟 100 毫秒执行全屏操作 |
||||
}, |
||||
beforeDestroy() { |
||||
// 组件销毁前清除定时器 |
||||
if (this.nowTimer) { |
||||
clearInterval(this.nowTimer); |
||||
} |
||||
}, |
||||
methods: { |
||||
// 全屏操作 |
||||
requestFullscreen() { |
||||
const element = document.documentElement; |
||||
console.log("全屏了吗"); |
||||
if (element.requestFullscreen) { |
||||
element.requestFullscreen(); |
||||
} else if (element.mozRequestFullScreen) { |
||||
// Firefox |
||||
element.mozRequestFullScreen(); |
||||
} else if (element.webkitRequestFullscreen) { |
||||
// Chrome, Safari and Opera |
||||
element.webkitRequestFullscreen(); |
||||
} else if (element.msRequestFullscreen) { |
||||
// IE/Edge |
||||
element.msRequestFullscreen(); |
||||
} |
||||
}, |
||||
// 退出全屏 |
||||
exitFullscreen() { |
||||
if (document.exitFullscreen) { |
||||
document.exitFullscreen(); |
||||
} else if (document.mozCancelFullScreen) { |
||||
// Firefox |
||||
document.mozCancelFullScreen(); |
||||
} else if (document.webkitExitFullscreen) { |
||||
// Chrome, Safari and Opera |
||||
document.webkitExitFullscreen(); |
||||
} else if (document.msExitFullscreen) { |
||||
// IE/Edge |
||||
document.msExitFullscreen(); |
||||
} |
||||
}, |
||||
// 进入系统首页 |
||||
goSys() { |
||||
this.exitFullscreen(); |
||||
this.$router.push("/"); |
||||
}, |
||||
// 返回上一页 |
||||
goBack() { |
||||
this.$router.back(); |
||||
}, |
||||
getHostDetailsData() { |
||||
// 请求数据 |
||||
// this.getHostParams(deviceLedgerId); |
||||
}, |
||||
// 监测天数 |
||||
getDayData() { |
||||
runTime().then((res) => { |
||||
if (res.code == 200) { |
||||
this.dayData = res.data.runTime; |
||||
} |
||||
}); |
||||
}, |
||||
// 报警列表 |
||||
getAlarnStatus() { |
||||
let data = { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
status: "0", |
||||
}; |
||||
let timeArr = [getDay(0), getDay(0)]; |
||||
alarmRecordList(this.addDateRange(data, timeArr)).then((res) => { |
||||
if (res.code == 200 && res.rows.length > 0) { |
||||
this.isShowWarning = true; |
||||
} else { |
||||
this.isShowWarning = false; |
||||
} |
||||
}); |
||||
}, |
||||
goWarning() { |
||||
this.exitFullscreen(); |
||||
this.$router.push("/alarm/alarmRecord"); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.monitor { |
||||
width: 100%; |
||||
min-height: 100vh; |
||||
height: auto; |
||||
background-color: black; |
||||
color: #fff; |
||||
.monitor-top { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: flex-start; |
||||
justify-content: space-between; |
||||
flex-wrap: nowrap; |
||||
padding: 0.1rem 0.2rem; |
||||
position: relative; |
||||
.title-left { |
||||
width: 3.41rem; |
||||
height: 0.8rem; |
||||
} |
||||
.title-center { |
||||
width: 9.46rem; |
||||
height: 0.69rem; |
||||
} |
||||
.title-right { |
||||
width: 5.04rem; |
||||
height: 0.61rem; |
||||
} |
||||
.sys-title { |
||||
position: absolute; |
||||
top: 40%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
font-size: 0.28rem; |
||||
color: #ffffff; |
||||
font-weight: bold; |
||||
z-index: 100; |
||||
} |
||||
.nowTime { |
||||
position: absolute; |
||||
top: 0.3rem; |
||||
right: 0.6rem; |
||||
font-size: 0.18rem; |
||||
color: #ffffff; |
||||
font-weight: bold; |
||||
z-index: 100; |
||||
} |
||||
.sys-logo { |
||||
width: 1.8rem; |
||||
height: 0.5rem; |
||||
position: absolute; |
||||
top: 0.26rem; |
||||
left: 0.8rem; |
||||
z-index: 10; |
||||
} |
||||
.monitor-time { |
||||
position: absolute; |
||||
top: 0.44rem; |
||||
left: 4.2rem; |
||||
z-index: 10; |
||||
font-size: 0.18rem; |
||||
color: #ffffff; |
||||
font-weight: bold; |
||||
} |
||||
.icon_warning { |
||||
position: absolute; |
||||
top: 0.33rem; |
||||
right: 4.4rem; |
||||
z-index: 10; |
||||
width: 0.3rem; |
||||
height: 0.27rem; |
||||
margin: 0 0.25rem 0 0.27rem; |
||||
cursor: pointer; |
||||
/* 添加闪烁动画 */ |
||||
animation: blink 1s infinite; |
||||
} |
||||
@keyframes blink { |
||||
100% { |
||||
opacity: 1; |
||||
} |
||||
50% { |
||||
opacity: 0; |
||||
} |
||||
} |
||||
.icon_home { |
||||
position: absolute; |
||||
top: 0.33rem; |
||||
right: 4rem; |
||||
z-index: 10; |
||||
width: 0.3rem; |
||||
height: 0.27rem; |
||||
margin: 0 0.2rem 0 0.27rem; |
||||
cursor: pointer; |
||||
} |
||||
.back-icon { |
||||
position: absolute; |
||||
top: 0.33rem; |
||||
right: 3.7rem; |
||||
z-index: 10; |
||||
width: 0.3rem; |
||||
height: 0.27rem; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.host-detail { |
||||
padding: 0.2rem; |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.detail-top { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.detail-top-left { |
||||
width: 14rem; |
||||
// background-color: aquamarine; |
||||
position: relative; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: flex-start; |
||||
.host-li { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin-left: 0.3rem; |
||||
position: relative; |
||||
.host-img { |
||||
width: 3.5rem; |
||||
height: 2.6rem; |
||||
margin-bottom: 0.1rem; |
||||
} |
||||
.host-name{ |
||||
position: absolute; |
||||
top: 0.8rem; |
||||
left: 1.6rem; |
||||
color: #3520f8; |
||||
font-size: 0.18rem; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
} |
||||
.detail-top-right { |
||||
width: calc(100% - 14rem); |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
} |
||||
.detail-data { |
||||
display: flex; |
||||
flex-direction: column; |
||||
width: 4.5rem; |
||||
position: relative; |
||||
.detail-data-top { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
color: #c0dffc; |
||||
font-weight: bold; |
||||
font-size: 0.18rem; |
||||
width: 100%; |
||||
text-align: center; |
||||
z-index: 10; |
||||
.details-title { |
||||
margin: 0 0.15rem; |
||||
} |
||||
} |
||||
.detail-data-bottom { |
||||
width: 100%; |
||||
padding: 0rem 0.3rem; |
||||
z-index: 0; |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
align-items: flex-start; |
||||
justify-content: center; |
||||
.detail-data-li { |
||||
width: 80%; |
||||
margin-right: 0.1rem; |
||||
position: relative; |
||||
color: #89acc4; |
||||
font-family: Arial, sans-serif; |
||||
letter-spacing: 0.02rem; |
||||
font-size: 0.18rem; |
||||
position: relative; |
||||
margin-bottom: 0.08rem; |
||||
border-left: 0.01rem solid #217df5; |
||||
border-right: 0.01rem solid #217df5; |
||||
background-image: radial-gradient( |
||||
circle at left top, |
||||
#217df5 0.01rem, |
||||
transparent 0.01rem |
||||
), |
||||
radial-gradient( |
||||
circle at right top, |
||||
#217df5 0.01rem, |
||||
transparent 0.01rem |
||||
), |
||||
radial-gradient( |
||||
circle at left bottom, |
||||
#217df5 0.01rem, |
||||
transparent 0.01rem |
||||
), |
||||
radial-gradient( |
||||
circle at right bottom, |
||||
#217df5 0.01rem, |
||||
transparent 0.01rem |
||||
); |
||||
background-repeat: no-repeat; |
||||
background-position: left top, right top, left bottom, right bottom; |
||||
} |
||||
.detail-data-li::before, |
||||
.detail-data-li::after { |
||||
content: ""; |
||||
position: absolute; |
||||
left: 0; |
||||
right: 0; |
||||
height: 0.01rem; |
||||
background-image: linear-gradient( |
||||
to right, |
||||
#217df5 0%, |
||||
rgba(41, 128, 185, 0) 50%, |
||||
#217df5 100% |
||||
) !important; |
||||
} |
||||
.year-data { |
||||
margin-top: 0.1rem; |
||||
} |
||||
.rightDot { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 100%; |
||||
z-index: 999; |
||||
} |
||||
.leftDot { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 100%; |
||||
padding: 0.04rem 0.1rem; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
.dotData { |
||||
font-weight: bold; |
||||
margin: 0 0.06rem; |
||||
color: #3b80ff; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.dotUnit{ |
||||
width: 0.55rem; |
||||
text-align: left; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
} |
||||
|
||||
.rightDot::before { |
||||
content: ""; |
||||
position: absolute; |
||||
top: -0.03rem; |
||||
right: -0.03rem; |
||||
width: 0.06rem; |
||||
height: 0.06rem; |
||||
background-color: #217df5; |
||||
box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9); |
||||
background-image: radial-gradient( |
||||
circle at 30% 30%, |
||||
rgba(255, 255, 255, 0.8) 0%, |
||||
rgba(255, 255, 255, 0) 70% |
||||
); |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
.rightDot::after { |
||||
content: ""; |
||||
position: absolute; |
||||
bottom: -0.03rem; |
||||
right: -0.03rem; |
||||
width: 0.06rem; |
||||
height: 0.06rem; |
||||
background-color: #217df5; |
||||
box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9); |
||||
background-image: radial-gradient( |
||||
circle at 30% 30%, |
||||
rgba(255, 255, 255, 0.8) 0%, |
||||
rgba(255, 255, 255, 0) 70% |
||||
); |
||||
border-radius: 50%; |
||||
} |
||||
.leftDot::before { |
||||
content: ""; |
||||
position: absolute; |
||||
top: -0.03rem; |
||||
left: -0.03rem; |
||||
width: 0.06rem; |
||||
height: 0.06rem; |
||||
background-color: #217df5; |
||||
border-radius: 50%; |
||||
box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9); |
||||
background-image: radial-gradient( |
||||
circle at 30% 30%, |
||||
rgba(255, 255, 255, 0.8) 0%, |
||||
rgba(255, 255, 255, 0) 70% |
||||
); |
||||
} |
||||
|
||||
.leftDot::after { |
||||
content: ""; |
||||
position: absolute; |
||||
bottom: -0.03rem; |
||||
left: -0.03rem; |
||||
width: 0.06rem; |
||||
height: 0.06rem; |
||||
background-color: #217df5; |
||||
box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9); |
||||
background-image: radial-gradient( |
||||
circle at 30% 30%, |
||||
rgba(255, 255, 255, 0.8) 0%, |
||||
rgba(255, 255, 255, 0) 70% |
||||
); |
||||
border-radius: 50%; |
||||
} |
||||
} |
||||
.line1 { |
||||
position: absolute; |
||||
top: 0.53rem; |
||||
} |
||||
} |
||||
} |
||||
.detail-bottom { |
||||
// margin: 0.3rem 0.5rem 0 0.5rem; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
height:3rem; |
||||
// background-color: #217df5; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue