From d0f98ad8e1047e3161a458399ad3005404ed87b8 Mon Sep 17 00:00:00 2001
From: whychdw <496960745@qq.com>
Date: 星期五, 06 六月 2025 15:52:15 +0800
Subject: [PATCH] 标准参数管理
---
src/views/realtime/tabs/system.vue | 238 +++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 181 insertions(+), 57 deletions(-)
diff --git a/src/views/realtime/tabs/system.vue b/src/views/realtime/tabs/system.vue
index 0056ad8..72c663f 100644
--- a/src/views/realtime/tabs/system.vue
+++ b/src/views/realtime/tabs/system.vue
@@ -1,22 +1,131 @@
<script setup>
-import { ref } from "vue";
+import { nextTick, ref, watch, onMounted } from "vue";
import svgDiagram from '@/components/svgDiagram.vue';
import info from '@/components/info.vue';
-// import lineChart from '@/components/echarts/line1.vue';
-import lineChart from '@/components/echarts/BaseChart.vue';
+import lineChart from '@/components/echarts/line1.vue';
+import lineChart2 from '@/components/echarts/line2.vue';
+// import lineChart from '@/components/echarts/BaseChart.vue';
// import lineChart from '../bar8.vue';
+
+import {
+ getHalfHourBattDevData,
+ getHalfHourPwrHisAcinData,
+ getHalfHourPwrHisDcoutData,
+} from "@/api/realtime";
+
const props = defineProps({
- data: {
- type: Object,
- default: {},
- },
+ data: {
+ type: Object,
+ default: {},
+ },
+ powerId: {
+ type: [Number, String],
+ },
+ devId: {
+ type: [Number, String],
+ },
+ battgroupId: {
+ type: [Number, String],
+ },
});
const tabIdx0 = ref(0);
const tabIdx1 = ref(0);
+const chart0 = ref(null);
+const chart1 = ref(null);
+const chart2 = ref(null);
+watch(
+ () => tabIdx0.value,
+ () => {
+ nextTick(() => {
+ tabIdx0Change();
+ });
+ },
+ { immediate: true }
+);
+
+watch(
+ () => tabIdx1.value,
+ () => {
+ nextTick(() => {
+ tabIdx1Change();
+ });
+ },
+ { immediate: true }
+);
+
+watch(
+ () => props.powerId,
+ (n) => {
+ if (!n) return;
+
+ nextTick(() => {
+ getAcinData();
+ getDevData();
+ getDcoutData();
+ });
+ },
+ { immediate: true }
+)
+
+function tabIdx0Change() {
+ // TODO
+ if (chart0.value) {
+ chart0.value.updateChart([1, 2, 3], [100, 200, 300]);
+ }
+}
+
+function tabIdx1Change() {
+ // TODO
+ if (chart1.value) {
+ chart1.value.updateChart([1, 2, 3], [100, 200, 300]);
+ }
+}
+
+async function getAcinData(granularity = 5) {
+ let { code, data, data2 } = await getHalfHourPwrHisAcinData(props.powerId, granularity);
+ let list = [];
+ if (code && data) {
+ list = data2;
+ }
+ return list;
+}
+
+async function getDevData(granularity = 5) {
+ let { code, data, data2 } = await getHalfHourBattDevData(props.battgroupId, granularity);
+ let list = [];
+ if (code && data) {
+ list = data2;
+ }
+ return list;
+}
+
+async function getDcoutData(granularity = 5) {
+ let { code, data, data2 } = await getHalfHourPwrHisDcoutData(props.powerId, granularity);
+ let list = [];
+ if (code && data) {
+ list = data2;
+ }
+ return list;
+}
+
+onMounted(async () => {
+ // await getAcinData();
+ // await getDevData();
+ // await getDcoutData();
+
+ if (chart2.value) {
+ chart2.value.updateChart(['04:12', '04:13', '04:14'], {
+ '璁惧娓╁害': [100, 200, 220],
+ '缁勭鐢垫祦': [100, 200, 220],
+ '缁勭鐢靛帇': [100, 200, 220],
+ '璐熻浇鐢垫祦': [100, 200, 220],
+ });
+ }
+});
</script>
<template>
@@ -68,12 +177,16 @@
</div>
<div class="p-right">
<div class="control-contain">
- <div class="control-title"><svg-icon icon-class="controls"></svg-icon><span>鎺у埗绠＄悊</span></div>
+ <div class="control-title">
+ <svg-icon icon-class="controls"></svg-icon><span>鎺у埗绠＄悊</span>
+ </div>
<div class="control-btn">鏍稿娴嬭瘯</div>
<div class="control-btn">鍋滄鏍稿娴嬭瘯</div>
</div>
<div class="control-contain">
- <div class="control-title"><svg-icon icon-class="dev"></svg-icon><span>璁惧绠＄悊</span></div>
+ <div class="control-title">
+ <svg-icon icon-class="dev"></svg-icon><span>璁惧绠＄悊</span>
+ </div>
<div class="control-btn">杩滅▼閲嶅惎</div>
<div class="control-btn">绯荤粺鍙傛暟璁剧疆</div>
<div class="control-btn">鍛婅鍙傛暟璁剧疆</div>
@@ -94,7 +207,10 @@
</el-radio-group>
<svg-icon class-name="btn-setting" icon-class="setting"></svg-icon>
</template>
- <line-chart></line-chart>
+ <line-chart
+ ref="chart0"
+ :type="['鐢垫祦', '鐢靛帇'][tabIdx0]"
+ ></line-chart>
</card>
</div>
<div class="card-item">
@@ -106,6 +222,10 @@
</el-radio-group>
<svg-icon class-name="btn-setting" icon-class="setting"></svg-icon>
</template>
+ <line-chart
+ ref="chart1"
+ :type="['鐢垫祦', '鐢靛帇'][tabIdx1]"
+ ></line-chart>
</card>
</div>
<div class="card-item">
@@ -113,43 +233,23 @@
<template #tools>
<svg-icon class-name="btn-setting" icon-class="setting"></svg-icon>
</template>
+ <line-chart2
+ ref="chart2"
+ :type="['鐢垫祦', '鐢靛帇'][tabIdx1]"
+ ></line-chart2>
</card>
</div>
<div class="card-item">
<card title="钃勭數姹犱俊鎭�">
<div class="batt grid">
- <info
- label="鏈�澶у閲�"
- value="#3 8Ah"
- ></info>
- <info
- label="鏈�灏忓閲�"
- value="100"
- ></info>
- <info
- label="鏈�楂樺唴闃�"
- value="100"
- ></info>
- <info
- label="鏈�浣庡唴闃�"
- value="100"
- ></info>
- <info
- label="鏈�楂樼數鍘�"
- value="100"
- ></info>
- <info
- label="鏈�浣庣數鍘�"
- value="100"
- ></info>
- <info
- label="鏈�楂樻俯搴�"
- value="100"
- ></info>
- <info
- label="鏈�浣庢俯搴�"
- value="100"
- ></info>
+ <info label="鏈�澶у閲�" value="#3 8Ah"></info>
+ <info label="鏈�灏忓閲�" value="100"></info>
+ <info label="鏈�楂樺唴闃�" value="100"></info>
+ <info label="鏈�浣庡唴闃�" value="100"></info>
+ <info label="鏈�楂樼數鍘�" value="100"></info>
+ <info label="鏈�浣庣數鍘�" value="100"></info>
+ <info label="鏈�楂樻俯搴�" value="100"></info>
+ <info label="鏈�浣庢俯搴�" value="100"></info>
</div>
</card>
</div>
@@ -164,24 +264,30 @@
padding-right: 8px;
display: flex;
flex-direction: column;
+
.row {
flex: 1.52;
+
.row-content {
display: flex;
flex-direction: row;
height: 100%;
}
+
.p-left {
width: 240px;
display: flex;
flex-direction: column;
+
.p-item {
margin: 8px;
display: flex;
flex-direction: column;
+
.panel-title {
font-size: 24px;
}
+
.panel {
border: 1px solid #5FA9CF;
background: #073451;
@@ -192,18 +298,22 @@
font-size: 12px;
display: flex;
flex-direction: column;
+
.panel-row {
display: flex;
flex-direction: row;
margin-bottom: 4px;
+
.label {
flex: 0 0 6em;
margin-right: 0.6em;
text-align: right;
+
&::after {
content: ":";
}
}
+
.value {
flex: 1;
}
@@ -211,9 +321,11 @@
}
}
}
+
.p-main {
flex: 1;
}
+
.p-right {
width: 160px;
margin-left: 20px;
@@ -221,6 +333,7 @@
padding-top: 20px;
display: flex;
flex-direction: column;
+
.control-contain {
display: flex;
flex-direction: column;
@@ -231,6 +344,7 @@
padding-bottom: 4px;
overflow: hidden;
font-size: 12px;
+
.control-title {
background: #0B415D;
font-size: 20px;
@@ -238,10 +352,12 @@
text-align: center;
font-weight: 700;
margin-bottom: 4px;
+
span {
margin-left: 0.6em;
}
}
+
.control-btn {
margin: 2px 4px;
cursor: pointer;
@@ -250,14 +366,17 @@
padding: 6px 0;
text-align: center;
border-radius: 4px;
+
&:hover {
color: #FDFE01;
border: 1px solid #DF7B26;
box-shadow: inset 0 0 10px 4px #DF7B26;
}
}
+
&.no-wrap {
background: transparent;
+
.control-btn {
flex: 1;
border: 1px solid #0BF9FE;
@@ -265,6 +384,7 @@
font-weight: bold;
font-size: 14px;
box-shadow: inset 0 0 10px 4px #0BF9FE;
+
&:hover {
color: #FDFE01;
border: 1px solid #DF7B26;
@@ -274,26 +394,28 @@
}
}
}
+
&.row2 {
flex: 1;
margin-top: 4px;
display: flex;
flex-direction: row;
+
.card-item {
flex: 1;
margin: 4px;
}
}
}
- .svg-diagram {
-
- }
+
+ .svg-diagram {}
.btn-setting {
display: inline-block;
cursor: pointer;
margin-left: 0.4em;
transition: all 1.3s ease;
+
&:hover {
transform: rotate(360deg);
color: #FDFE01;
@@ -317,26 +439,28 @@
border-radius: 0;
box-shadow: none !important;
}
+
// .el-radio-button--small .el-radio-button__inner {
// border-radius: 0;
// font-size: 12px;
// padding: 5px 11px;
// }
:deep(.el-radio-button__inner) {
- background: #183A55;
- border: 1px solid #4D81BA;
- border-left: 0;
- border-radius: 0;
- color: #fff;
- font-weight: 500;
- padding: 4px 10px;
+ background: #183A55;
+ border: 1px solid #4D81BA;
+ border-left: 0;
+ border-radius: 0;
+ color: #fff;
+ font-weight: 500;
+ padding: 4px 10px;
}
+
:deep(.el-radio-button.is-active .el-radio-button__original-radio:not(:disabled)+.el-radio-button__inner) {
- background: linear-gradient(69deg, #6EABE4, #6EABE4 25%, #0A3E77 75%, #0A3E77);
- // border: 0 none;
- box-shadow: none;
- color: #fff;
+ background: linear-gradient(69deg, #6EABE4, #6EABE4 25%, #0A3E77 75%, #0A3E77);
+ // border: 0 none;
+ box-shadow: none;
+ color: #fff;
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.1