From c353554427f56eeda8a7cb75cc12bfa572dd1c85 Mon Sep 17 00:00:00 2001
From: he wei <858544502@qq.com>
Date: 星期四, 26 六月 2025 09:22:27 +0800
Subject: [PATCH] U 大小写问题
---
src/views/realtime/index.vue | 326 ++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 267 insertions(+), 59 deletions(-)
diff --git a/src/views/realtime/index.vue b/src/views/realtime/index.vue
index 0b04e2f..6a6e6ef 100644
--- a/src/views/realtime/index.vue
+++ b/src/views/realtime/index.vue
@@ -1,23 +1,69 @@
-<script setup>
-import { ref, reactive } from "vue";
+<script setup name="realtime">
+import { ref, reactive, watch, onMounted, onActivated } from "vue";
import tabPower from "./tabs/power.vue";
import tabSystem from "./tabs/system.vue";
+import tabVol from './tabs/vol.vue';
+import tabRes from './tabs/res.vue';
+import tabTemp from './tabs/temp.vue';
+// import tabThreeD from './tabs/threeD.vue';
+// import tabSelf from './tabs/self.vue';
+import tabManage from './tabs/manage.vue';
+import siteList from "@/components/siteList/index.vue";
+import getQueryString from "@/utils/getQueryString";
+import formatSeconds from '@/utils/formatSeconds';
+import battAlarmParams from '@/views/alarm/battAlarmParams.vue';
+
+
+import { useRoute, useRouter } from "vue-router";
+import useWebSocket from "@/hooks/useWebSocket";
+
+const route = useRoute();
+const router = useRouter();
+
+const { message, sendData } = useWebSocket('real');
+
+const curStationId = ref(
+ getQueryString("stationId") || ''
+);
+
+const curPowerId = ref(
+ getQueryString("powerId") || ''
+);
+
+const curBattgroupId = ref(
+ getQueryString("battgroupId") || ''
+);
+
+const curDevId = ref(
+ getQueryString("devId") || ''
+);
+
+const rtData = reactive({
+ system: {},
+ power: {},
+ vol: {},
+ res: {},
+ tmp: {},
+ threeD: {},
+ self: {},
+ manage: {},
+});
const statusList = reactive([
- { label: '绯荤粺鐘舵��', value: '鍏呯數' },
- { label: '璁惧鐘舵��', value: '姝ｅ父' },
- { label: '鐢垫簮鐘舵��', value: '姝ｅ父' },
- { label: '鐢垫睜鐘舵��', value: '姝ｅ父' },
- { label: '姣嶇嚎鐢靛帇', value: 60 },
- { label: '鍦ㄧ嚎鐢靛帇', value: 60 },
- { label: '缁勭鐢靛帇', value: 60 },
- { label: '鐢垫睜鐢垫祦', value: 60 },
- { label: '娴嬭瘯鏃堕暱', value: 60 },
- { label: '娴嬭瘯瀹归噺', value: 60 },
- { label: '棰勪及鍓╀綑瀹归噺', value: 60 },
- { label: '棰勪及鍓╀綑缁埅', value: 60 },
- { label: '鍛婅', value: '鏃�' },
- { label: '鏇存柊鏃ユ湡', value: '2022-01-01' },
+ { label: '绯荤粺鐘舵��', prop: 'systemStateName', unit: '' },
+ { label: '璁惧鐘舵��', prop: 'devStateName', unit: '' },
+ { label: '鐢垫簮鐘舵��', prop: 'pwrStateName', unit: '' },
+ { label: '鐢垫睜鐘舵��', prop: 'battStateName', unit: '' },
+ { label: '姣嶇嚎鐢靛帇', prop: 'vbusVol', unit: 'V' },
+ { label: '鍦ㄧ嚎鐢靛帇', prop: 'onlineVol', unit: 'V' },
+ { label: '缁勭鐢靛帇', prop: 'captestGroupvol', unit: 'V' },
+ { label: '鐢垫睜鐢垫祦', prop: 'captestCurr', unit: 'A' },
+ { label: '娴嬭瘯鏃堕暱', prop: 'captestTimelong', unit: '' },
+ { label: '娴嬭瘯瀹归噺', prop: 'captestCap', unit: 'Ah' },
+ { label: '棰勪及鍓╀綑瀹归噺', prop: 'restCap', unit: 'Ah' },
+ { label: '棰勪及鍓╀綑缁埅', prop: 'restTime', unit: '' },
+ { label: '鍛婅', prop: 'allALmNum', unit: '' },
+ { label: '鏇存柊鏃ユ湡', prop: 'recordtime', unit: '' },
]);
const tabs = ref([
@@ -25,10 +71,13 @@
{ label: '鐢垫簮', name: 'power' },
{ label: '鐢靛帇', name: 'vol' },
{ label: '鍐呴樆', name: 'res' },
- { label: '娓╁害', name: 'temp' },
- { label: '3D', name: '3d' },
+ { label: '娓╁害', name: 'tmp' },
+ { label: '3D', name: '3D' },
{ label: '鑷剤鑳藉姏', name: 'self' },
{ label: '绠＄悊淇℃伅', name: 'manage' },
+]);
+
+const btns = ref([
{ label: '鐢垫簮鍛婅鍙傛暟璁剧疆', name: 'powerAlarmSet' },
{ label: '鐢垫睜鍛婅鍙傛暟璁剧疆', name: 'battAlarmSet' },
{ label: '鍥剧墖', name: 'img' },
@@ -38,65 +87,215 @@
const acTab = ref(tabs.value[0].name);
-const fullName = ref('婀栧寳鐪�-姝︽眽甯�-姝︽槍鍖�-姝︽槍鏈烘埧-鐢垫睜缁�1');
+const fullName = ref('');
+const topData = ref({});
+
+function sendMessage() {
+ let params = {
+ stationId: curStationId.value || 0,
+ powerId: curPowerId.value || 0,
+ devId: curDevId.value || 0,
+ battgroupId: curBattgroupId.value || 0,
+ // system, power, vol, res, tmp, 3D, self, manage
+ pageType: acTab.value
+ };
+ sendData(JSON.stringify(params));
+}
function tabClick(item) {
acTab.value = item.name;
+ sendMessage();
}
+
+const visibles = reactive({
+ powerAlarmSet: false,
+ battAlarmSet: false
+});
+
+function btnClick(item) {
+ console.log('item', item, '=============');
+ // 鏀逛负璺宠浆
+ switch(item.name) {
+ case 'powerAlarmSet':
+ router.push({
+ path: '/alarm/power-setting',
+ query: {
+ stationId: curStationId.value || 0,
+ powerId: curPowerId.value || 0,
+ devId: curDevId.value || 0,
+ battgroupId: curBattgroupId.value || 0,
+ pageFlag: Math.random(),
+ }
+ });
+ break;
+ case 'battAlarmSet':
+ // visibles.battAlarmSet = true;
+ router.push({
+ path: '/alarm/batt-setting',
+ query: {
+ stationId: curStationId.value || 0,
+ powerId: curPowerId.value || 0,
+ devId: curDevId.value || 0,
+ battgroupId: curBattgroupId.value || 0,
+ pageFlag: Math.random(),
+ }
+ });
+ break;
+ case 'img':
+ break;
+ case 'history':
+ router.push({
+ path: '/datas/history',
+ query: {
+ stationId: curStationId.value || 0,
+ powerId: curPowerId.value || 0,
+ devId: curDevId.value || 0,
+ battgroupId: curBattgroupId.value || 0,
+ pageTab: 'his-test',
+ pageFlag: Math.random(),
+ }
+ });
+ break;
+ case 'hisRt':
+ router.push({
+ path: '/datas/history',
+ query: {
+ stationId: curStationId.value || 0,
+ powerId: curPowerId.value || 0,
+ devId: curDevId.value || 0,
+ battgroupId: curBattgroupId.value || 0,
+ pageTab: 'his-real',
+ pageFlag: Math.random(),
+ }
+ });
+ break;
+ }
+
+}
+function leafClick(item) {
+ // console.log('item', item, '=============');
+ curStationId.value = item.stationId;
+ curPowerId.value = item.powerId;
+ curBattgroupId.value = item.battgroupId || 0;
+ curDevId.value = item.devId || 0;
+
+ sendMessage();
+}
+
+
+
+watch(
+ () => message.value,
+ (n) => {
+ if (n) {
+ let {data2: { topRes, realRes}} = JSON.parse(n);
+ let data = {};
+ if (topRes.code && topRes.data) {
+ data = topRes.data2;
+ fullName.value = `${data.fullName} ${data.powerName} ${data.devName} ${data.battGroupName}`;
+ }
+ topData.value = data;
+ if (realRes.code && realRes.data) {
+ rtData[realRes.data2.pageType] = realRes.data2;
+ }
+ }
+ }
+);
+
+onActivated(() => {
+ sendMessage();
+});
+
+onMounted(() => {
+ sendMessage();
+});
</script>
<template>
<div class="page-contain">
- <div class="page-header">
- <div class="p-title">{{ fullName }}</div>
- <div class="status-bar">
- <div
- :class="['status-item',]"
- v-for="(item, index) in statusList"
- :key="'status_' + index"
- >
- <div class="item-value">{{ item.value }}</div>
- <div class="item-name">{{ item.label }}</div>
+ <site-list @leaf-click="leafClick"></site-list>
+ <div class="page-inner">
+ <div class="page-header">
+ <div class="p-title">{{ fullName }}</div>
+ <div class="status-bar">
+ <div
+ :class="['status-item',]"
+ v-for="(item, index) in statusList"
+ :key="'status_' + index"
+ >
+ <div class="item-value" v-if="item.prop == 'captestTimelong' || item.prop == 'restTime'">{{ topData[item.prop] ? formatSeconds(topData[item.prop]) : '--' }}</div>
+ <div class="item-value time" v-else-if="item.prop == 'recordtime'">{{ topData[item.prop] || '--' }}</div>
+ <div class="item-value" v-else>{{ topData[item.prop] || '--' }}{{ item.unit }}</div>
+ <div class="item-name">{{ item.label }}</div>
+ </div>
+ </div>
+ <div class="p-tabs">
+ <div
+ :class="['tab-item', {'active': item.name == acTab}]"
+ v-for="(item, index) in tabs"
+ :key="'tab_' + index"
+ @click="tabClick(item)"
+ >
+ {{ item.label }}
+ </div>
+ <div
+ class="btn-item tab-item"
+ v-for="(item, index) in btns"
+ :key="'btn_' + index"
+ @click="btnClick(item)"
+ >
+ {{ item.label }}
+ </div>
</div>
</div>
- <div class="p-tabs">
- <div
- :class="['tab-item', {'active': item.name == acTab}]"
- v-for="(item, index) in tabs"
- :key="'tab_' + index"
- @click="tabClick(item)"
- >
- {{ item.label }}
+ <div class="page-main">
+ <div class="tab-contain" v-if="acTab == 'system'">
+ <tab-system :data="rtData['system']" :powerId="curPowerId" :devId="curDevId" :battgroupId="curBattgroupId"></tab-system>
</div>
+ <div class="tab-contain" v-if="acTab == 'power'">
+ <tab-power :data="rtData['power']"></tab-power>
+ </div>
+ <div class="tab-contain" v-if="acTab == 'vol'">
+ <tab-vol :data="rtData['vol']"></tab-vol>
+ </div>
+ <div class="tab-contain" v-if="acTab == 'res'">
+ <tab-res :data="rtData['res']"></tab-res>
+ </div>
+ <div class="tab-contain" v-if="acTab == 'tmp'">
+ <tab-temp :data="rtData['tmp']"></tab-temp>
+ </div>
+ <div class="tab-contain" v-if="acTab == '3D'">5</div>
+ <div class="tab-contain" v-if="acTab == 'self'">6</div>
+ <div class="tab-contain" v-if="acTab == 'manage'">
+ <tab-manage :data="rtData['manage']"></tab-manage>
+ </div>
+ <!-- <div class="tab-contain" v-if="acTab == 'powerAlarmSet'">8</div>
+ <div class="tab-contain" v-if="acTab == 'battAlarmSet'">9</div>
+ <div class="tab-contain" v-if="acTab == 'img'">10</div>
+ <div class="tab-contain" v-if="acTab == 'history'">11</div>
+ <div class="tab-contain" v-if="acTab == 'hisRt'">12</div> -->
</div>
</div>
- <div class="page-main">
- <div class="tab-contain" v-if="acTab == 'system'">
- <tab-system></tab-system>
- </div>
- <div class="tab-contain" v-if="acTab == 'power'">
- <tab-power></tab-power>
- </div>
- <div class="tab-contain" v-if="acTab == 'vol'">2</div>
- <div class="tab-contain" v-if="acTab == 'res'">3</div>
- <div class="tab-contain" v-if="acTab == 'temp'">4</div>
- <div class="tab-contain" v-if="acTab == '3d'">5</div>
- <div class="tab-contain" v-if="acTab == 'self'">6</div>
- <div class="tab-contain" v-if="acTab == 'manage'">7</div>
- <div class="tab-contain" v-if="acTab == 'powerAlarmSet'">8</div>
- <div class="tab-contain" v-if="acTab == 'battAlarmSet'">9</div>
- <div class="tab-contain" v-if="acTab == 'img'">10</div>
- <div class="tab-contain" v-if="acTab == 'history'">11</div>
- <div class="tab-contain" v-if="acTab == 'hisRt'">12</div>
- </div>
+ <!-- 鐢垫睜鍛婅鍙傛暟 -->
+ <!-- <el-dialog v-model="visibles.battAlarmSet" title="鐢垫睜鍛婅鍙傛暟" width="900">
+ <batt-alarm-params @close="visibles.battAlarmSet = false" v-if="visibles.battAlarmSet" :id="curBattgroupId"></batt-alarm-params>
+ </el-dialog> -->
</div>
</template>
<style scoped lang="less">
.page-contain {
display: flex;
- flex-direction: column;
+ padding: 8px 8px 8px 0;
+ margin-left: 8px;
+ overflow: hidden;
+ .page-inner {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ margin-left: 8px;
+ }
.page-header {
// border: 1px solid #0ff;
@@ -125,7 +324,7 @@
color: #50c7f1;
// border: 1px solid #0F6B79;
border-radius: 6px;
- margin: 4px 6px;
+ margin: 4px 2px;
display: flex;
flex-direction: column;
justify-content: center;
@@ -140,6 +339,10 @@
margin-bottom: 6px;
color: #ff0;
font-size: 20px;
+ &.time {
+ white-space: nowrap;
+ font-size: 12px;
+ }
}
.item-name {
@@ -171,13 +374,18 @@
background: #47CAFE;
color: #03216e;
}
+ &.btn-item {
+ background: #076fe8;
+ // border-radius: 6px;
+ }
}
}
}
.page-main {
flex: 1;
-
+ padding-left: 0;
+ padding-right: 0;
.tab-contain {
height: 100%;
}
--
Gitblit v1.9.1