From 011aab07af85ba820b9f96a02c249b7ba26c8d26 Mon Sep 17 00:00:00 2001
From: he wei <858544502@qq.com>
Date: 星期四, 26 六月 2025 09:02:06 +0800
Subject: [PATCH] U 整理提交
---
src/views/realtime/tabs/system.vue | 882 ++++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 815 insertions(+), 67 deletions(-)
diff --git a/src/views/realtime/tabs/system.vue b/src/views/realtime/tabs/system.vue
index 0056ad8..d75cb0e 100644
--- a/src/views/realtime/tabs/system.vue
+++ b/src/views/realtime/tabs/system.vue
@@ -1,22 +1,644 @@
-<script setup>
-import { ref } from "vue";
+<script setup name="tabSystem">
+import { nextTick, ref, reactive, computed, 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 hrParams from '@/components/hrParams.vue';
+import devAlarmParams from '../devAlarmParams.vue';
+
+import lineChart3 from '@/components/echarts/line-scroll.vue';
+// import lineChart from '@/components/echarts/BaseChart.vue';
// import lineChart from '../bar8.vue';
+import moment from 'moment';
+import getBinaryDigits from '@/utils/getBinaryDigits.js';
+
+import useElement from "@/hooks/useElement.js";
+ const { $loading, $message, $confirm } = useElement();
+
+
+import {
+ getBattDevData100,
+ getPwrHisAcinData100,
+ getPwrHisDcoutData100,
+ getPwrHeartParam,
+} from "@/api/realtime";
+
+import {
+ stopDis,
+ restart,
+} from '@/api/control';
+
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);
+const labels_0 = [
+ [
+ ['涓�璺疉鐩哥數娴�', 'acin1Curra'],
+ ['涓�璺疊鐩哥數娴�', 'acin1Currb'],
+ ['涓�璺疌鐩哥數娴�', 'acin1Currc'],
+ ['浜岃矾A鐩哥數娴�', 'acin2Curra'],
+ ['浜岃矾B鐩哥數娴�', 'acin2Currb'],
+ ['浜岃矾C鐩哥數娴�', 'acin2Currc'],
+ ],
+ [
+ ['涓�璺疉鐩哥數鍘�', 'acin1Vola'],
+ ['涓�璺疊鐩哥數鍘�', 'acin1Volb'],
+ ['涓�璺疌鐩哥數鍘�', 'acin1Volc'],
+ ['浜岃矾A鐩哥數鍘�', 'acin2Vola'],
+ ['浜岃矾B鐩哥數鍘�', 'acin2Volb'],
+ ['浜岃矾C鐩哥數鍘�', 'acin2Volc'],
+ ]
+];
+
+const labels_1 = reactive([[], []]);
+
+const devRt = ref({
+ devIp: "127.0.0.0",
+ devVersion: "1",
+ devId: 0,
+ devOnline: 0,
+ recordDatetime: "",
+ devTesttype: 0,
+ devTestgroupnum: 0,
+ devWorkstate: -1,
+ devAlarmstate: 0,
+ devTemp: 0.0,
+ devResTestState: 0,
+ devOnlinevollow: 0,
+ devEachgroupBattsum: 0,
+ devCaptestOnlinevol: 0.0,
+ devCaptestGroupvol: 0.0,
+ devCaptestCurr: 0.0,
+ devCaptestCap: 0.0,
+ devCaptestTimelong: 0,
+ devRestestCount: 0,
+ devCommcount: 0,
+ devErrcommcount: 0,
+ devRxnullerrcount: 0,
+ devLastCaptestStopType: 0,
+ devCondvoldp: 0.0,
+ devConresist: 0.0,
+ devConresist1: 0.0,
+ dev61850alarms: "",
+ devCondvoldp1: 0.0,
+ groupVol1: 0.0,
+ groupVol2: 0.0,
+ groupCurr1: 0.0,
+ groupCurr2: 0.0,
+});
+
+const battRt = ref({
+ groupCurr: 0,
+});
+
+watch(
+ () => tabIdx0.value,
+ () => {
+ nextTick(() => {
+ tabIdx0Change();
+ });
+ },
+ { immediate: true }
+);
+
+watch(
+ () => tabIdx1.value,
+ () => {
+ nextTick(() => {
+ tabIdx1Change();
+ });
+ },
+ { immediate: true }
+);
+
+watch(
+ () => props.powerId,
+ (n) => {
+ if (!n) return;
+
+ nextTick(() => {
+ getHeartParam();
+ // getAcinData();
+ // getDevData();
+ // getDcoutData();
+ numChange('acin');
+ numChange('dcout');
+ numChange('dev');
+ });
+ },
+ { immediate: true }
+);
+
+watch(
+ () => props.data,
+ (n) => {
+ if (!n) return;
+ nextTick(() => {
+ updateRt();
+ if (n.deviceState) {
+ devRt.value = n.deviceState;
+ }
+ if (n.battRtstate) {
+ battRt.value = n.battRtstate;
+ }
+ });
+ },
+ { immediate: true, deep: true }
+);
+
+const show_num = reactive({
+ acin: 5,
+ dcout: 5,
+ dev: 5,
+});
+
+// 鐢ㄦ潵缁樺浘鐨勬暟鎹�
+const chartData = reactive({
+ acin: [],
+ dcout: [],
+ dev: [],
+});
+
+const modelCfg = ref([]);
+const startIdx = ref(0);
+
+// 鍗婂皬鏃剁殑鏁版嵁鏉℃暟 1绉掍竴绗旇
+// 鏀逛负100绗� 鍙厤缃� 涓変釜灞炴�у彲浠ヨ缃笉鍚�
+const counter = 30 * 60;
+
+let xLabels1 = ref([]);
+let xLabels2 = ref([]);
+
+// 鏍规嵁绮掑害 鍜屾煡璇㈢粨鏋� 琛ュ叏鏁版嵁
+function completeData(type) {
+ // 鏍规嵁绮掑害 璁＄畻鍑洪渶瑕佺殑鏉℃暟
+ let num = Math.ceil(counter / show_num[type]);
+ let _num = num - chartData[type].length;
+ let obj = null;
+ let res = [...chartData[type]];
+ switch (type) {
+ case 'acin':
+ obj = {
+ acin1Vola: 0,
+ acin1Volb: 0,
+ acin1Volc: 0,
+ acin2Vola: 0,
+ acin2Volb: 0,
+ acin2Volc: 0,
+ acin1Curra: 0,
+ acin1Currb: 0,
+ acin1Currc: 0,
+ acin2Curra: 0,
+ acin2Currb: 0,
+ acin2Currc: 0,
+ };
+ break;
+ case 'dcout':
+ obj = {
+ m1Outcurr: 0.0,
+ m2Outcurr: 0.0,
+ m3Outcurr: 0.0,
+ m4Outcurr: 0.0,
+ m5Outcurr: 0.0,
+ m6Outcurr: 0.0,
+ m7Outcurr: 0.0,
+ m8Outcurr: 0.0,
+ m9Outcurr: 0.0,
+ m10Outcurr: 0.0,
+ m11Outcurr: 0.0,
+ m12Outcurr: 0.0,
+ m13Outcurr: 0.0,
+ m14Outcurr: 0.0,
+ m15Outcurr: 0.0,
+ m16Outcurr: 0.0,
+ m1OutVol: 0.0,
+ m2OutVol: 0.0,
+ m3OutVol: 0.0,
+ m4OutVol: 0.0,
+ m5OutVol: 0.0,
+ m6OutVol: 0.0,
+ m7OutVol: 0.0,
+ m8OutVol: 0.0,
+ m9OutVol: 0.0,
+ m10OutVol: 0.0,
+ m11OutVol: 0.0,
+ m12OutVol: 0.0,
+ m13OutVol: 0.0,
+ m14OutVol: 0.0,
+ m15OutVol: 0.0,
+ m16OutVol: 0.0,
+ moutputvol: 0.0,
+ };
+ break;
+ case 'dev':
+ obj = {
+ groupVol: 0.0,
+ onlineVol: 0.0,
+ groupCurr: 0.0,
+ groupTmp: 0.0,
+ loadCurr: 0.0,
+ };
+ break;
+ }
+ let _xLabels1 = chartData['dcout'].map(item => item.recordDatetime);
+ let _xLabels2 = chartData['dev'].map(item => item.recordDatetime);
+ // 鏁版嵁鏈�灏忔椂闂�
+ let minTime = chartData[type].length ? chartData[type][0].recordDatetime : moment().format('YYYY-MM-DD HH:mm:ss');
+ if (_num > 0) {
+ for (let i = _num; i--;) {
+ minTime = moment(minTime).subtract(show_num[type], 'seconds').format('YYYY-MM-DD HH:mm:ss');
+ res.unshift({
+ recordDatetime: minTime,
+ ...obj,
+ });
+ _xLabels1.unshift(minTime);
+ _xLabels2.unshift(minTime);
+ }
+ }
+ switch (type) {
+ case 'acin':
+ break;
+ case 'dcout':
+ xLabels1.value = yLabels.value.length ? _xLabels1 : [];
+ break;
+ case 'dev':
+ xLabels2.value = _xLabels2;
+ break;
+ }
+ chartData[type] = res;
+}
+
+
+function tabIdx0Change() {
+ updateChart0();
+}
+
+function tabIdx1Change() {
+ updateChart1();
+}
+
+async function getAcinData() {
+ let { code, data, data2 } = await getPwrHisAcinData100(props.powerId);
+ let list = [];
+ if (code && data) {
+ list = data2;
+ }
+ return list;
+}
+
+async function getDevData() {
+ let { code, data, data2 } = await getBattDevData100(props.battgroupId, props.powerId);
+ let list = [];
+ if (code && data) {
+ list = data2;
+ }
+ return list;
+}
+
+async function getDcoutData() {
+ let { code, data, data2, data3 } = await getPwrHisDcoutData100(props.powerId);
+ let list = [];
+ let cfg = [];
+ if (code && data) {
+ list = data2;
+ cfg = getBinaryDigits(data3).map((v, i) => ({ value: v, label: i + 1 })).filter(vv => vv.value).map(v => v.label);
+ }
+ console.log('cfg', cfg, '=============', data3);
+
+ modelCfg.value = cfg;
+ if (cfg.length < 4) {
+ startIdx.value = 0;
+ }
+ // setLabel1();
+ return list;
+}
+
+const yLabels = computed(() => {
+ let res = modelCfg.value.map((idx) => `${idx}#鏁存祦鍣╜);
+ if (modelCfg.value.length > 4) {
+ res = res.slice(startIdx.value, startIdx.value + 4);
+ }
+ return res;
+});
+
+// function setLabel1() {
+// // console.log('??', modelCfg.value, '=============');
+// if (modelCfg.value.length <= 4) {
+// yLabels.value = modelCfg.value.map((idx) => `${idx}#鏁存祦鍣╜);
+// } else {
+// yLabels.value = modelCfg.value.slice(startIdx.value, startIdx.value + 4).map((idx) => `${idx}#鏁存祦鍣╜);
+// }
+// }
+
+const chartData1 = ref([]);
+
+function formatData1() {
+ let res = [];
+ for (let i = 0, len = chartData['dcout'].length; i < len; i++) {
+ yLabels.value.forEach((item, idx) => {
+ res[idx] = res[idx] || [];
+ let type = ['curr', 'Vol'][tabIdx1.value];
+ let _prop = `m${idx + 1}Out${type}`;
+
+ res[idx].push(chartData['dcout'][i][_prop]);
+ });
+ }
+ // console.log('res format', res, yLabels.value, '=============');
+
+ chartData1.value = res;
+}
+
+
+function stopHrTest() {
+ $confirm("鍋滄鏍稿娴嬭瘯", async () => {
+ let loading = $loading();
+ let res = await stopDis(props.powerId, props.battgroupId);
+ loading.close();
+ let { code, data } = res;
+ if (code && data) {
+ $message.success('鎿嶄綔鎴愬姛');
+ } else {
+ $message.error('鎿嶄綔澶辫触');
+ }
+ });
+}
+
+function remoteRestart() {
+ $confirm("杩滅▼閲嶅惎", async () => {
+ let loading = $loading();
+ let res = await restart(props.powerId, props.battgroupId);
+ loading.close();
+ let { code, data } = res;
+ if (code && data) {
+ $message.success('鎿嶄綔鎴愬姛');
+ } else {
+ $message.error('鎿嶄綔澶辫触');
+ }
+ });
+}
+
+const devAlmVisible = ref(false);
+function showDevAlarmParam() {
+ devAlmVisible.value = true;
+}
+
+
+async function numChange(type) {
+ switch (type) {
+ case 'acin':
+ chartData.acin = await getAcinData();
+ completeData('acin');
+ updateChart0();
+ break;
+ case 'dcout':
+ chartData.dcout = await getDcoutData();
+ // setLabel1();
+ completeData('dcout');
+ formatData1();
+ updateChart1();
+ break;
+ case 'dev':
+ chartData.dev = await getDevData();
+ completeData('dev');
+ updateChart2();
+ break;
+ }
+
+}
+
+const battInfo = ref({});
+// 鏇存柊瀹炴椂鏁版嵁
+function updateRt() {
+ let pwrData = props.data.pwrdevAcdcdata;
+ if (!pwrData) {
+ return false;
+ }
+ // 淇敼涓変釜鍥捐〃鐨勬暟鎹�
+ // chart0 chartData['acin']
+ // 鏍规嵁绮掑害 璁＄畻鍑洪渶瑕佺殑鏉℃暟
+ // let num = Math.ceil(counter / show_num['acin']);
+ chartData['acin'].shift();
+ chartData['acin'].push(pwrData);
+ updateChart0();
+
+ // chart1 chartData['dcout']
+ // 鏍规嵁绮掑害 璁＄畻鍑洪渶瑕佺殑鏉℃暟
+ if (!chartData1.value.length) {
+ modelCfg.value = getBinaryDigits(props.data.powerInf.modelCfg).map((v, i) => ({ value: v, label: i + 1 })).filter(vv => vv.value).map(v => v.label);
+ pwrData.recordDatetime
+ let minTime = pwrData.recordDatetime;
+ let num = Math.ceil(counter / show_num['dcout']);
+ let _label = [];
+ let list = [];
+ for (let i = num; i--;) {
+ minTime = moment(minTime).subtract(show_num['dcout'], 'seconds').format('YYYY-MM-DD HH:mm:ss');
+ list.unshift({
+ recordDatetime: minTime,
+ m1Outcurr: 0.0,
+ m2Outcurr: 0.0,
+ m3Outcurr: 0.0,
+ m4Outcurr: 0.0,
+ m5Outcurr: 0.0,
+ m6Outcurr: 0.0,
+ m7Outcurr: 0.0,
+ m8Outcurr: 0.0,
+ m9Outcurr: 0.0,
+ m10Outcurr: 0.0,
+ m11Outcurr: 0.0,
+ m12Outcurr: 0.0,
+ m13Outcurr: 0.0,
+ m14Outcurr: 0.0,
+ m15Outcurr: 0.0,
+ m16Outcurr: 0.0,
+ m1OutVol: 0.0,
+ m2OutVol: 0.0,
+ m3OutVol: 0.0,
+ m4OutVol: 0.0,
+ m5OutVol: 0.0,
+ m6OutVol: 0.0,
+ m7OutVol: 0.0,
+ m8OutVol: 0.0,
+ m9OutVol: 0.0,
+ m10OutVol: 0.0,
+ m11OutVol: 0.0,
+ m12OutVol: 0.0,
+ m13OutVol: 0.0,
+ m14OutVol: 0.0,
+ m15OutVol: 0.0,
+ m16OutVol: 0.0,
+ moutputvol: 0.0,
+ });
+ _label.unshift(minTime);
+ }
+ xLabels1.value = _label;
+ chartData['dcout'] = list;
+ }
+
+ xLabels1.value.shift();
+ xLabels1.value.push(pwrData.recordDatetime);
+ chartData['dcout'].shift();
+ chartData['dcout'].push(pwrData);
+ nextTick(() => {
+
+ formatData1();
+ updateChart1();
+ });
+
+
+ // chart2 chartData['dev']
+ // 鏍规嵁绮掑害 璁＄畻鍑洪渶瑕佺殑鏉℃暟
+ // let num = Math.ceil(counter / show_num['dev']);
+ // TODO battRtstate 缂哄皯loadCurr
+ let devObj = props.data.battRtstate;
+ xLabels2.value.shift();
+ xLabels2.value.push(devObj.recDatetime);
+ chartData['dev'].shift();
+ chartData['dev'].push(devObj);
+ updateChart2();
+
+ // 钃勭數姹犱俊鎭�
+ battInfo.value = props.data.sticRtdata;
+}
+
+const configVisible = ref(false);
+const formRef = ref();
+const form1 = reactive({
+ time: 5,
+ count: 100,
+});
+
+function validatorTime(rule, value, callback) {
+ if(/^\d+$/.test(value)) {
+ if(value<1 || value>30) {
+ callback(new Error('鑼冨洿1~30'));
+ } else {
+ callback();
+ }
+ }else {
+ callback(new Error('璇疯緭鍏ユ暣鏁�'));
+ }
+}
+
+function validatorCount(rule, value, callback) {
+ if(/^\d+$/.test(value)) {
+ if (value<50 || value>200) {
+ callback(new Error('鑼冨洿50~200'));
+ } else {
+ callback();
+ }
+ }else {
+ callback(new Error('璇疯緭鍏ユ暣鏁�'));
+ }
+}
+
+const rules = {
+ time: [{ required: true, message: '璇疯緭鍏ユ椂闂�', trigger: ['blur', 'change'] },
+ { validator: validatorTime, trigger: ['blur', 'change'] },
+ ],
+ count: [{ required: true, message: '璇疯緭鍏ユ潯鏁�', trigger: ['blur', 'change'] },
+ { validator: validatorCount, trigger: ['blur', 'change'] },
+ ],
+};
+
+// 鍙栧墠鍗婂皬鏃舵暟鎹� 鏇存柊鍥捐〃
+
+// 鏇存柊鍥捐〃 1 2 3
+function updateChart0() {
+ if (chart0.value) {
+ chart0.value.updateChart(labels_0[tabIdx0.value], chartData['acin']);
+ }
+}
+
+function updateChart1() {
+ if (chart1.value) {
+ chart1.value.updateChart(xLabels1.value, chartData1.value);
+ }
+}
+
+function updateChart2() {
+ if (chart2.value) {
+ chart2.value.updateChart(xLabels2.value, chartData['dev']);
+ }
+}
+
+function scrollHandler(data) {
+ console.log('data', data, '=============');
+
+ startIdx.value += data * 1;
+ nextTick(() => {
+ // updateChart1();
+ })
+}
+
+const hrParamTitle = ref('鏍稿娴嬭瘯');
+const hrParamVisible = ref(false);
+function startHrTest() {
+ hrParamVisible.value = true;
+}
+
+const config = ref({});
+
+async function getHeartParam() {
+ let res = await getPwrHeartParam(props.powerId);
+ let { code, data, data2 } = res.data;
+ let cfg = {};
+ if (code && data) {
+ cfg = data2;
+ }
+ config.value = cfg;
+}
+
+const configTitle = ref('');
+function setConfig(type) {
+ switch(type) {
+ case 0:
+ configTitle.value = '璁剧疆浜ゆ祦杈撳叆閲囬泦鍙傛暟';
+ form1.time = config.value.acinInterverCfg || 5;
+ form1.count = config.value.acinCountCfg || 100;
+ break;
+ case 1:
+ configTitle.value = '璁剧疆鐩存祦杈撳嚭閲囬泦鍙傛暟';
+ form1.time = config.value.acoutInterverCfg || 5;
+ form1.count = config.value.acoutCountCfg || 100;
+ break;
+ case 2:
+ configTitle.value = '璁剧疆鏍稿璁惧閲囬泦鍙傛暟';
+ form1.time = config.value.hrInterverCfg || 5;
+ form1.count = config.value.hrCountCfg || 100;
+ break;
+ }
+ configVisible.value = true;
+}
+
+function updateConfig() {
+ configVisible.value = false;
+}
+
+onMounted(async () => {
+
+});
</script>
<template>
@@ -64,19 +686,23 @@
</div>
</div>
<div class="p-main">
- <svg-diagram class="svg-diagram"></svg-diagram>
+ <svg-diagram :data="devRt" :battRt="battRt" class="svg-diagram"></svg-diagram>
</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-btn">鏍稿娴嬭瘯</div>
- <div class="control-btn">鍋滄鏍稿娴嬭瘯</div>
+ <div class="control-title">
+ <svg-icon icon-class="controls"></svg-icon><span>鎺у埗绠＄悊</span>
+ </div>
+ <div class="control-btn" @click="startHrTest">鏍稿娴嬭瘯</div>
+ <div class="control-btn" @click="stopHrTest">鍋滄鏍稿娴嬭瘯</div>
</div>
<div class="control-contain">
- <div class="control-title"><svg-icon icon-class="dev"></svg-icon><span>璁惧绠＄悊</span></div>
- <div class="control-btn">杩滅▼閲嶅惎</div>
+ <div class="control-title">
+ <svg-icon icon-class="dev"></svg-icon><span>璁惧绠＄悊</span>
+ </div>
+ <div class="control-btn" @click="remoteRestart">杩滅▼閲嶅惎</div>
<div class="control-btn">绯荤粺鍙傛暟璁剧疆</div>
- <div class="control-btn">鍛婅鍙傛暟璁剧疆</div>
+ <div class="control-btn" @click="showDevAlarmParam">鍛婅鍙傛暟璁剧疆</div>
</div>
<div class="control-contain no-wrap">
<div class="control-btn">鏀剧數鐢宠</div>
@@ -92,68 +718,141 @@
<el-radio-button label="鐢垫祦" :value="0" />
<el-radio-button label="鐢靛帇" :value="1" />
</el-radio-group>
- <svg-icon class-name="btn-setting" icon-class="setting"></svg-icon>
+ <svg-icon class-name="btn-setting" icon-class="setting" @click="setConfig(0)"></svg-icon>
</template>
- <line-chart></line-chart>
+ <line-chart ref="chart0"></line-chart>
</card>
</div>
<div class="card-item">
- <card title="鐩存祦杈撳叆">
+ <card title="鐩存祦杈撳嚭">
<template #tools>
<el-radio-group class="tab-idx" v-model="tabIdx1" size="small">
<el-radio-button label="鐢垫祦" :value="0" />
<el-radio-button label="鐢靛帇" :value="1" />
</el-radio-group>
- <svg-icon class-name="btn-setting" icon-class="setting"></svg-icon>
+ <svg-icon class-name="btn-setting" icon-class="setting" @click="setConfig(1)"></svg-icon>
</template>
+ <line-chart3
+ ref="chart1"
+ :type="['鐢垫祦', '鐢靛帇'][tabIdx1]"
+ :yLabels="yLabels"
+ :start-idx="startIdx"
+ :mode-count="modelCfg.length"
+ @scroll="scrollHandler"
+ ></line-chart3>
</card>
</div>
<div class="card-item">
<card title="鏍稿璁惧淇℃伅">
<template #tools>
- <svg-icon class-name="btn-setting" icon-class="setting"></svg-icon>
+ <svg-icon class-name="btn-setting" icon-class="setting" @click="setConfig(2)"></svg-icon>
</template>
+ <line-chart2 ref="chart2"></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="鏈�澶у閲�">
+ <template
+ #value
+ v-if="battInfo.maxCapNumList && battInfo.maxCapNumList.length"
+ >
+ <span class="mon-num">#{{ battInfo.maxCapNumList[0] }}</span>
+ <span class="val">{{ battInfo.maxCap }}Ah</span>
+ </template>
+ </info>
+ <info label="鏈�灏忓閲�">
+ <template
+ #value
+ v-if="battInfo.minCapNumList && battInfo.minCapNumList.length"
+ >
+ <span class="mon-num">#{{ battInfo.minCapNumList[0] }}</span>
+ <span class="val">{{ battInfo.minCap }}Ah</span>
+ </template>
+ </info>
+ <info label="鏈�楂樺唴闃�">
+ <template
+ #value
+ v-if="battInfo.maxResNumList && battInfo.maxResNumList.length"
+ >
+ <span class="mon-num">#{{ battInfo.maxResNumList[0] }}</span>
+ <span class="val">{{ battInfo.maxRes }}m惟</span>
+ </template>
+ </info>
+ <info label="鏈�浣庡唴闃�">
+ <template
+ #value
+ v-if="battInfo.minResNumList && battInfo.minResNumList.length"
+ >
+ <span class="mon-num">#{{ battInfo.minResNumList[0] }}</span>
+ <span class="val">{{ battInfo.minRes }}m惟</span>
+ </template>
+ </info>
+ <info label="鏈�楂樼數鍘�">
+ <template
+ #value
+ v-if="battInfo.maxVolNumList && battInfo.maxVolNumList.length"
+ >
+ <span class="mon-num">#{{ battInfo.maxVolNumList[0] }}</span>
+ <span class="val">{{ battInfo.maxVol }}V</span>
+ </template>
+ </info>
+ <info label="鏈�浣庣數鍘�">
+ <template
+ #value
+ v-if="battInfo.minVolNumList && battInfo.minVolNumList.length"
+ >
+ <span class="mon-num">#{{ battInfo.minVolNumList[0] }}</span>
+ <span class="val">{{ battInfo.minVol }}V</span>
+ </template>
+ </info>
+ <info label="鏈�楂樻俯搴�">
+ <template
+ #value
+ v-if="battInfo.maxTmpNumList && battInfo.maxTmpNumList.length"
+ >
+ <span class="mon-num">#{{ battInfo.maxTmpNumList[0] }}</span>
+ <span class="val">{{ battInfo.maxTmp }}鈩�</span>
+ </template>
+ </info>
+ <info label="鏈�浣庢俯搴�">
+ <template
+ #value
+ v-if="battInfo.minTmpNumList && battInfo.minTmpNumList.length"
+ >
+ <span class="mon-num">#{{ battInfo.minTmpNumList[0] }}</span>
+ <span class="val">{{ battInfo.minTmp }}鈩�</span>
+ </template>
+ </info>
</div>
</card>
</div>
</div>
+ <!-- 璁剧疆闂撮殧鍙傛暟 -->
+ <el-dialog v-model="configVisible" draggable :title="configTitle" width="560">
+ <el-form ref="formRef" :model="form1" :rules="rules" label-width="10em">
+ <el-form-item label="闂撮殧鏃堕棿(鍒�)" prop="time">
+ <el-input v-model="form1.time"></el-input>
+ </el-form-item>
+ <el-form-item label="鏁版嵁绗旀暟" prop="count">
+ <el-input v-model="form1.count"></el-input>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button @click="configVisible = false">鍏抽棴</el-button>
+ <!-- <el-button type="primary" @click="getConfig">璇诲彇</el-button> -->
+ <el-button type="primary" @click="updateConfig">璁惧畾</el-button>
+ </template>
+ </el-dialog>
+ <!-- 璁剧疆鏍稿鍙傛暟 -->
+ <el-dialog v-model="hrParamVisible" draggable :title="hrParamTitle" width="960">
+ <hr-params :devId="devId" v-model:visible="hrParamVisible" :battgroupId="battgroupId"></hr-params>
+ </el-dialog>
+ <!-- 璁剧疆璁惧鍛婅鍙傛暟 -->
+ <el-dialog v-model="devAlmVisible" draggable title="璁惧鍛婅鍙傛暟" width="960">
+ <dev-alarm-params :devId="devId" v-model:visible="devAlmVisible"></dev-alarm-params>
+ </el-dialog>
</div>
</template>
@@ -164,24 +863,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 +897,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 +920,11 @@
}
}
}
+
.p-main {
flex: 1;
}
+
.p-right {
width: 160px;
margin-left: 20px;
@@ -221,6 +932,7 @@
padding-top: 20px;
display: flex;
flex-direction: column;
+
.control-contain {
display: flex;
flex-direction: column;
@@ -231,6 +943,7 @@
padding-bottom: 4px;
overflow: hidden;
font-size: 12px;
+
.control-title {
background: #0B415D;
font-size: 20px;
@@ -238,10 +951,12 @@
text-align: center;
font-weight: 700;
margin-bottom: 4px;
+
span {
margin-left: 0.6em;
}
}
+
.control-btn {
margin: 2px 4px;
cursor: pointer;
@@ -250,14 +965,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 +983,7 @@
font-weight: bold;
font-size: 14px;
box-shadow: inset 0 0 10px 4px #0BF9FE;
+
&:hover {
color: #FDFE01;
border: 1px solid #DF7B26;
@@ -274,26 +993,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 +1038,53 @@
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;
}
}
+
+ .page-filter {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin-right: 6px;
+ margin-top: 0;
+ margin-bottom: 0;
+ padding: 0;
+ background: transparent;
+ border: 0 none;
+
+ .label {
+ font-size: 12px;
+ margin-right: 6px;
+
+ &::after {
+ content: ":";
+ }
+ }
+ }
+
+ .mon-num {
+ margin-right: 1em;
+ }
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.1