From 75f043dfa6660716364e66ee0b3cf99f44255686 Mon Sep 17 00:00:00 2001 From: DYL0109 <dn18191638832@163.com> Date: 星期三, 16 四月 2025 19:20:36 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/develop1.0' into dyl_dev --- zhitan-vue/src/views/realtimemonitor/realtimemonitor/realtimemonitor.vue | 152 ++++++++++++++++++++++++++------------------------ 1 files changed, 79 insertions(+), 73 deletions(-) diff --git a/zhitan-vue/src/views/realtimemonitor/realtimemonitor/realtimemonitor.vue b/zhitan-vue/src/views/realtimemonitor/realtimemonitor/realtimemonitor.vue index bab0dc2..f55bb61 100644 --- a/zhitan-vue/src/views/realtimemonitor/realtimemonitor/realtimemonitor.vue +++ b/zhitan-vue/src/views/realtimemonitor/realtimemonitor/realtimemonitor.vue @@ -2,20 +2,23 @@ <div class="page"> <div class="page-container"> <div class="page-container-left"> - <LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" /> + <LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" ParentModelCode="YSCJMX" /> </div> <div class="page-container-right"> <div class="form-card"> <el-form :model="queryParams" ref="queryRef" :inline="true"> <el-form-item label="鑳芥簮绫诲瀷" prop="energyType"> <el-select v-model="queryParams.energyType" placeholder="鑳芥簮绫诲瀷" @change="handleQuery"> - <el-option :label="item.enername" :value="item.enersno" v-for="item in energyTypeList" :key="item.enersno" /> + <el-option + :label="item.enername" + :value="item.enersno" + v-for="item in energyTypeList" + :key="item.enersno" + /> </el-select> </el-form-item> <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery"> - 鎼滅储 - </el-button> + <el-button type="primary" icon="Search" @click="handleQuery"> 鎼滅储 </el-button> <el-button icon="Refresh" @click="resetQuery"> 閲嶇疆 </el-button> </el-form-item> <el-form-item> @@ -23,20 +26,24 @@ </el-form-item> </el-form> </div> - <div style=" - height: calc(100vh - 220px) !important; - max-height: calc(100vh - 220px) !important; - overflow-y: auto; - " v-loading="loading"> + <div + style="height: calc(100vh - 220px) !important; max-height: calc(100vh - 220px) !important; overflow-y: auto" + v-loading="loading" + > <div v-for="(item, index) in energyRealTimeMonitorList" :key="index" v-show="!!item.deviceArray"> <BaseCard :title="queryParams.nodeName + '-' + item.energyTypeName" v-if="item.deviceArray.length > 0"> <el-scrollbar> <div class="scrollbar-flex-content"> <p></p> - <div class="scrollbar-demo-item item-tag" @click="handleClick(item, index1)" v-for="item1,index1 in item.deviceArray" :key="index1" :style="{ - backgroundColor: - index1 == item.activeIndex ? '#5EC894' : '#9841FC', - }"> + <div + class="scrollbar-demo-item item-tag" + @click="handleClick(item, index1)" + v-for="(item1, index1) in item.deviceArray" + :key="index1" + :style="{ + backgroundColor: index1 == item.activeIndex ? '#5EC894' : '#9841FC', + }" + > {{ item1.deviceName }} </div> </div> @@ -71,18 +78,18 @@ {{ item.deviceArray[item.activeIndex].energyTypeName }} </div> <div class="card-box-ul"> - <div class="card-box-li" v-for="(item2, index2) in item.deviceArray[item.activeIndex] - .energyIndexArray"> + <div + class="card-box-li" + v-for="(item2, index2) in item.deviceArray[item.activeIndex].energyIndexArray" + > <el-tooltip class="box-item" effect="dark" content="鏌ョ湅鍘嗗彶鏁版嵁" placement="top"> <dl @click="handleChartModal(item2)"> <dd class="title"> {{ item2.name }} - <template v-if="!!item2.unit"> - ({{ item2.unit }}) - </template> + <template v-if="!!item2.unit"> ({{ item2.unit }}) </template> </dd> <dd class="num"> - {{ item2.value!=null ? item2.value.toFixed(2) : '--' }} + {{ item2.value != null ? item2.value.toFixed(2) : "--" }} </dd> <dd class="time"> <el-icon> @@ -105,22 +112,22 @@ </div> </template> <script setup name="energy-real-time-monitor"> -import chartModal from "./components/chart-modal.vue"; -import { listEnergyRealTimeMonitor } from "@/api/realTimeMonitor/realTimeMonitor"; -import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"; -const { proxy } = getCurrentInstance(); -import { useRoute } from "vue-router"; -import useSettingsStore from "@/store/modules/settings"; -const settingsStore = useSettingsStore(); +import chartModal from "./components/chart-modal.vue" +import { listEnergyRealTimeMonitor } from "@/api/realTimeMonitor/realTimeMonitor" +import { listEnergyTypeList } from "@/api/modelConfiguration/energyType" +const { proxy } = getCurrentInstance() +import { useRoute } from "vue-router" +import useSettingsStore from "@/store/modules/settings" +const settingsStore = useSettingsStore() watch( () => settingsStore.sideTheme, (val) => { - getList(); + getList() } -); -const energyTypeList = ref(undefined); -let energyRealTimeMonitorList = ref([]); -const loading = ref(false); +) +const energyTypeList = ref(undefined) +let energyRealTimeMonitorList = ref([]) +const loading = ref(false) const data = reactive({ queryParams: { nodeId: null, @@ -128,24 +135,24 @@ energyType: null, }, query: { ...useRoute().query }, -}); -const { queryParams, query } = toRefs(data); +}) +const { queryParams, query } = toRefs(data) /** 鑺傜偣鍗曞嚮浜嬩欢 */ function handleNodeClick(data) { - queryParams.value.nodeId = data.id; - queryParams.value.nodeName = data.label; + queryParams.value.nodeId = data.id + queryParams.value.nodeName = data.label listEnergyTypeList().then((res) => { - energyTypeList.value = res.data; - queryParams.value.energyType = energyTypeList.value[0].enersno; - handleQuery(); - }); + energyTypeList.value = res.data + queryParams.value.energyType = energyTypeList.value[0].enersno + handleQuery() + }) } function handleClick(item, index) { - item.activeIndex = index; + item.activeIndex = index } // 鑳芥簮瀹炴椂鐩戞帶-鑳芥簮瀹炴椂鐩戞帶-鍒楄〃 function getList() { - loading.value = true; + loading.value = true listEnergyRealTimeMonitor( proxy.addDateRange({ ...queryParams.value, @@ -154,31 +161,31 @@ ).then((res) => { if (!!res.code && res.code == 200) { res.data.map((item) => { - item.activeIndex = 0; - }); - loading.value = false; - energyRealTimeMonitorList.value = res.data; + item.activeIndex = 0 + }) + loading.value = false + energyRealTimeMonitorList.value = res.data } - }); + }) } // 鑳芥簮瀹炴椂鐩戞帶-鑳芥簮瀹炴椂鐩戞帶-鎼滅储 function handleQuery() { - energyRealTimeMonitorList.value = []; - getList(); + energyRealTimeMonitorList.value = [] + getList() } // 鑳芥簮瀹炴椂鐩戞帶-鑳芥簮瀹炴椂鐩戞帶-閲嶇疆 function resetQuery() { - proxy.resetForm("queryRef"); - queryParams.value.energyType = null; - energyRealTimeMonitorList.value = []; - handleQuery(); + proxy.resetForm("queryRef") + queryParams.value.energyType = null + energyRealTimeMonitorList.value = [] + handleQuery() } -let chartRef = ref(); +let chartRef = ref() function handleChartModal(row) { if (chartRef.value) { row.nodeName = queryParams.value.nodeName - chartRef.value.handleOpen(row); + chartRef.value.handleOpen(row) } } </script> @@ -200,8 +207,8 @@ text-align: left; font-weight: bold; font-family: OPPOSans, OPPOSans; - font-weight: 500; - font-size: 16px; + + font-size: 14px; font-style: normal; text-transform: none; } @@ -213,6 +220,7 @@ &-li { width: 18%; + min-width: 190px; margin: 1%; border-radius: 5px; border: 1px solid #22408c; @@ -223,11 +231,10 @@ padding: 0 10px; .title { - font-size: 14px; color: rgba(255, 255, 255, 0.8); font-family: OPPOSans, OPPOSans; - font-weight: 500; - font-size: 16px; + + font-size: 14px; line-height: 19px; text-align: left; font-style: normal; @@ -235,11 +242,10 @@ } .num { - font-size: 22px; + font-size: 26px; color: #36d3ff; font-family: OPPOSans, OPPOSans; font-weight: 800; - font-size: 32px; text-align: left; font-style: normal; text-transform: none; @@ -252,6 +258,7 @@ text-align: left; font-style: normal; text-transform: none; + font-size: 14px; } } @@ -285,7 +292,7 @@ text-align: center; margin: 5px 8px; border-radius: 8px; - padding: 7px 10px; + padding: 2px 6px; font-family: OPPOSans, OPPOSans; font-weight: 500; font-size: 16px; @@ -319,9 +326,9 @@ } &-li { - width: 240px; - margin-right: 10px; - margin-top: 16px; + width: 18%; + min-width: 190px; + margin: 1%; border-radius: 5px; border: 1px solid #ebebeb; margin-bottom: 5px; @@ -331,7 +338,6 @@ padding: 0 10px; .title { - font-size: 14px; color: #676767; font-family: OPPOSans, OPPOSans; font-weight: 500; @@ -343,11 +349,10 @@ } .num { - font-size: 22px; + font-size: 26px; color: #3271eb; font-family: OPPOSans, OPPOSans; font-weight: 800; - font-size: 32px; text-align: left; font-style: normal; text-transform: none; @@ -360,6 +365,7 @@ text-align: left; font-style: normal; text-transform: none; + font-size: 14px; } } @@ -393,7 +399,7 @@ text-align: center; margin: 5px 8px; border-radius: 8px; - padding: 7px 3px; + padding: 2px 6px; font-family: OPPOSans, OPPOSans; font-weight: 500; font-size: 16px; @@ -423,12 +429,12 @@ .item-tag { // width: 13%; text-align: center; - margin: 5px 8px; + margin: 2px 6px; border-radius: 8px; - padding: 7px 10px; + padding: 2px 6px; font-family: OPPOSans, OPPOSans; font-weight: 500; - font-size: 16px; + font-size: 14px; color: #ffffff; cursor: pointer; } -- Gitblit v1.9.3