From b9bd29a1a81f6f7de479e3cc3fdfe3d85fc660bf Mon Sep 17 00:00:00 2001
From: he wei <858544502@qq.com>
Date: 星期三, 23 四月 2025 13:35:06 +0800
Subject: [PATCH] UA 整理提交
---
src/views/dashboard/index.vue | 471 ++++++++++++++++++++++++++++------------------------------
1 files changed, 224 insertions(+), 247 deletions(-)
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 55215f4..b3dce5c 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,217 +1,219 @@
<script setup name="Dashboard">
- import { defineComponent } from 'vue';
- import HdwCard from '@/components/HdwCard/index.vue';
- import LedNum from '@/components/LedNum/index.vue';
- import mapChart from "@/components/echarts/mapChart.vue";
- import pie from "@/components/echarts/pie.vue";
- import bar from "@/components/echarts/bar.vue";
- import groupBar from "@/components/echarts/groupBar.vue";
+ import { defineComponent } from 'vue';
+ import ycCard from '@/components/ycCard/index.vue';
+ import LedNum from '@/components/LedNum/index.vue';
+ import mapChart from "@/components/echarts/mapChart.vue";
+ import pie from "@/components/echarts/pie.vue";
+ import bar from "@/components/echarts/bar.vue";
+ import groupBar from "@/components/echarts/groupBar.vue";
+ import valuePanel from './components/valuePanel.vue';
+ import valuePanel2 from './components/valuePanel2.vue';
- import { ref, watchEffect } from 'vue';
- import useWebsocket from '@/hooks/useWebsocket';
+ import { ref, watchEffect } from 'vue';
+ import useWebsocket from '@/hooks/useWebsocket';
- const { message: listMessage } = useWebsocket('home');
+ const { message: listMessage } = useWebsocket('home');
- const stationNum = ref(0);
- const chartData = ref([]);
- const map = ref();
- const typePie = ref();
- const prodPie = ref();
- const testBar = ref();
- const useageRateChart = ref();
+ const stationNum = ref(0);
+ const chartData = ref([]);
+ const map = ref();
+ const typePie = ref();
+ const prodPie = ref();
+ const testBar = ref();
+ const useageRateChart = ref();
- let lockDatas = ref([]);
- const rateList = ref([]);
- const rateType = ref('month');
+ let lockDatas = ref([]);
+ const rateList = ref([]);
+ const rateType = ref('month');
- // "offLineNum": 6,
- // "unLoadNum": 5,
- // "sumLinf": 7,
- // "openNum": 0,
- // "onlineNum": 1,
- // "closeNum": 2
+ // "offLineNum": 6,
+ // "unLoadNum": 5,
+ // "sumLinf": 7,
+ // "openNum": 0,
+ // "onlineNum": 1,
+ // "closeNum": 2
- const offLine_num = ref(0);
- const unLoad_num = ref(0);
- const sumLinf_num = ref(0);
- const open_num = ref(0);
- const online_num = ref(0);
- const close_num = ref(0);
- const rtData = ref([]);
- const alarmData = ref([]);
+ const offLine_num = ref(0);
+ // const unLoad_num = ref(0);
+ const sumLinf_num = ref(0);
+ const open_num = ref(0);
+ const online_num = ref(0);
+ const close_num = ref(0);
+ const rtData = ref([]);
+ const alarmData = ref([]);
- watchEffect(() => {
- if (listMessage.value) {
- const { resScreenBox, resErrorCtlLog, resAllCtlLog, resLockState, resReport, resAllAinf } = JSON.parse(listMessage.value)?.data;
- console.log('resScreenBox, resErrorCtlLog, resAllCtlLog, resLockState, resReport', resScreenBox, resErrorCtlLog, resAllCtlLog, resLockState, resReport, '=============');
+ watchEffect(() => {
+ if (listMessage.value) {
+ const { resScreenBox, resErrorCtlLog, resAllCtlLog, resLockState, resReport, resAllAinf } = JSON.parse(listMessage.value)?.data;
+ console.log('resScreenBox, resErrorCtlLog, resAllCtlLog, resLockState, resReport', resScreenBox, resErrorCtlLog, resAllCtlLog, resLockState, resReport, '=============');
- let locks = [];
- let _offLine = 0,
- _unLoad = 0,
- _sumLinf = 0,
- _open = 0,
- _online = 0,
- _close = 0;
+ let locks = [];
+ let _offLine = 0,
+ // _unLoad = 0,
+ _sumLinf = 0,
+ _open = 0,
+ _online = 0,
+ _close = 0;
- if (resLockState.code && resLockState.data) {
- let _list = resLockState.data2;
- locks = _list.allLinfs.filter(v => v.longitude || v.latitude);
- _offLine = _list.offLineNum;
- _unLoad = _list.unLoadNum;
- _sumLinf = _list.sumLinf;
- _open = _list.openNum;
- _online = _list.onlineNum;
- _close = _list.closeNum;
- }
+ if (resLockState.code && resLockState.data) {
+ let _list = resLockState.data2;
+ locks = _list.allLinfs.filter(v => v.longitude || v.latitude);
+ _offLine = _list.offLineNum;
+ // _unLoad = _list.unLoadNum;
+ _sumLinf = _list.sumLinf;
+ _open = _list.openNum;
+ _online = _list.onlineNum;
+ _close = _list.closeNum;
+ }
- offLine_num.value = _offLine;
- unLoad_num.value = _unLoad;
- sumLinf_num.value = _sumLinf;
- open_num.value = _open;
- online_num.value = _online;
- close_num.value = _close;
+ offLine_num.value = _offLine;
+ // unLoad_num.value = _unLoad;
+ open_num.value = _open;
+ online_num.value = _online;
+ close_num.value = _close;
+ sumLinf_num.value = _sumLinf;
- lockDatas.value = locks;
+ lockDatas.value = locks;
- if (resAllCtlLog.code && resAllCtlLog.data) {
- let _list = resAllCtlLog.data2.map(v => ({
- ...v,
- state: v.ctlResult ? '寮�閿佹垚鍔�' : '寮�閿佸け璐�'
- }));
- rtData.value = _list;
- }
- if (resErrorCtlLog.code && resErrorCtlLog.data) {
- let _list = resErrorCtlLog.data2.map(v => ({
- ...v,
- state: v.ctlResult ? '寮�閿佹垚鍔�' : '寮�閿佸け璐�'
- }));
- alarmData.value = _list;
- }
+ if (resAllCtlLog.code && resAllCtlLog.data) {
+ let _list = resAllCtlLog.data2.map(v => ({
+ ...v,
+ state: v.ctlResult ? '寮�閿佹垚鍔�' : '寮�閿佸け璐�'
+ }));
+ rtData.value = _list;
+ }
+ if (resErrorCtlLog.code && resErrorCtlLog.data) {
+ let _list = resErrorCtlLog.data2.map(v => ({
+ ...v,
+ state: v.ctlResult ? '寮�閿佹垚鍔�' : '寮�閿佸け璐�'
+ }));
+ alarmData.value = _list;
+ }
- let _rateList = [];
- if (resReport.code && resReport.data) {
- _rateList = resReport.data2;
- }
- rateList.value = _rateList;
+ let _rateList = [];
+ if (resReport.code && resReport.data) {
+ _rateList = resReport.data2;
+ }
+ rateList.value = _rateList;
- let area_num = 0;
- if (resAllAinf.code && resAllAinf.data) {
- area_num = resAllAinf.data2;
- }
+ let area_num = 0;
+ if (resAllAinf.code && resAllAinf.data) {
+ area_num = resAllAinf.data2.stationNum;
+ }
- stationNum.value = area_num;
+ stationNum.value = area_num;
- if (resScreenBox.code && resScreenBox.data) {
- let { product, type } = resScreenBox.data2;
- let prodData = formatPieData(product);
- let typeData = formatPieData(type);
+ if (resScreenBox.code && resScreenBox.data) {
+ let { product, type } = resScreenBox.data2;
+ let prodData = formatPieData(product);
+ let typeData = formatPieData(type);
- typePie.value.updateChart(typeData.sData);
- prodPie.value.updateChart(prodData.sData);
- }
+ typePie.value.updateChart(typeData.sData);
+ prodPie.value.updateChart(prodData.sData);
+ }
- updateMap();
- updateStateChart();
- updateUseageRateChart();
- }
- });
+ updateMap();
+ updateStateChart();
+ updateUseageRateChart();
+ }
+ });
- function updateStateChart() {
- let labels = ['閿佸叿', '鏈畨瑁�', '寮�閿�', '鍏抽攣', '鍦ㄧ嚎', '绂荤嚎'];
- let datas = [sumLinf_num.value, unLoad_num.value, open_num.value, close_num.value, online_num.value, offLine_num.value];
- testBar.value.updateChart(labels, datas);
- }
+ function updateStateChart() {
+ let labels = ['閿佸叿', '寮�閿�', '鍏抽攣', '鍦ㄧ嚎', '绂荤嚎'];
+ let datas = [sumLinf_num.value, open_num.value, close_num.value, online_num.value, offLine_num.value];
+ testBar.value.updateChart(labels, datas);
+ }
- /**
- * 鏍煎紡鍖栨暟鎹� 鍙栧墠4 鍓╀笅鐨勪负鍏朵粬
- */
- function formatPieData(data) {
- let res = { sData: [] };
- let arr = Object.keys(data)
- .map((v) => ({ name: v, value: data[v] }))
- .sort((a, b) => {
- return b.value - a.value;
- });
- let total = 0;
- arr.map(v => {
- total += v.value * 1;
- });
+ /**
+ * 鏍煎紡鍖栨暟鎹� 鍙栧墠4 鍓╀笅鐨勪负鍏朵粬
+ */
+ function formatPieData(data) {
+ let res = { sData: [] };
+ let arr = Object.keys(data)
+ .map((v) => ({ name: v, value: data[v] }))
+ .sort((a, b) => {
+ return b.value - a.value;
+ });
+ let total = 0;
+ arr.map(v => {
+ total += v.value * 1;
+ });
- if (arr.length <= 5) {
- res.sData = arr;
- } else {
- let name = "鍏朵粬";
- let value = 0;
- let otherList = [];
- arr.splice(4).forEach((v) => {
- value += v.value * 1;
- let percent = (total ? v.value / total : 0).toFixed(4);
- otherList.push({
- name: v.name,
- value: v.value,
- percent: (percent * 100).toFixed(2) + "%"
- });
- });
+ if (arr.length <= 5) {
+ res.sData = arr;
+ } else {
+ let name = "鍏朵粬";
+ let value = 0;
+ let otherList = [];
+ arr.splice(4).forEach((v) => {
+ value += v.value * 1;
+ let percent = (total ? v.value / total : 0).toFixed(4);
+ otherList.push({
+ name: v.name,
+ value: v.value,
+ percent: (percent * 100).toFixed(2) + "%"
+ });
+ });
- res.sData = arr;
- res.sData.push({ name, value });
- }
- return res;
- }
+ res.sData = arr;
+ res.sData.push({ name, value });
+ }
+ return res;
+ }
- function updateMap() {
- const getColor = (onLine) => ["#aaa", "#0f0"][onLine];
- let data = lockDatas.value;
- map.value.updateChart(
- data.map((v) => {
- return {
- ...v,
- label: v.lockName,
- color: getColor(v.lockOnline),
- points: [v.longitude, v.latitude],
- // 鏃犲疄闄呮剰涔�
- value: 100,
- };
- })
- );
- }
+ function updateMap() {
+ const getColor = (onLine) => ["#aaa", "#0f0"][onLine];
+ let data = lockDatas.value;
+ map.value.updateChart(
+ data.map((v) => {
+ return {
+ ...v,
+ label: v.lockName,
+ color: getColor(v.lockOnline),
+ points: [v.longitude, v.latitude],
+ // 鏃犲疄闄呮剰涔�
+ value: 100,
+ };
+ })
+ );
+ }
- function updateUseageRateChart() {
- // 鑾峰彇褰撳墠鐨勬棩鏈熷璞�
- let currentDate = new Date();
- // 鑾峰彇鏈堜唤鏁帮紙0 琛ㄧず涓�鏈堬紝11 琛ㄧず鍗佷簩鏈堬級
- let month = currentDate.getMonth() + 1;
- // 鑾峰彇瀛ｅ害鏁�
- let quarter = Math.ceil(month / 3);
- let type = rateType.value;
- let _list = rateList.value;
- let list = [];
- switch (type) {
- case 'month':
- list = _list.map(v => ({
- label: v.lockName, value: v['month' + month]
- })).sort((a, b) => b.value - a.value);
- break;
- case 'quarter':
- list = _list.map(v => ({
- label: v.lockName, value: v['quarter' + quarter]
- })).sort((a, b) => b.value - a.value);
- break;
- case 'year':
- list = _list.map(v => ({
- label: v.lockName, value: v.yearCount
- })).sort((a, b) => b.value - a.value);
- break;
- }
+ function updateUseageRateChart() {
+ // 鑾峰彇褰撳墠鐨勬棩鏈熷璞�
+ let currentDate = new Date();
+ // 鑾峰彇鏈堜唤鏁帮紙0 琛ㄧず涓�鏈堬紝11 琛ㄧず鍗佷簩鏈堬級
+ let month = currentDate.getMonth() + 1;
+ // 鑾峰彇瀛ｅ害鏁�
+ let quarter = Math.ceil(month / 3);
+ let type = rateType.value;
+ let _list = rateList.value;
+ let list = [];
+ switch (type) {
+ case 'month':
+ list = _list.map(v => ({
+ label: v.lockName, value: v['month' + month]
+ })).sort((a, b) => b.value - a.value);
+ break;
+ case 'quarter':
+ list = _list.map(v => ({
+ label: v.lockName, value: v['quarter' + quarter]
+ })).sort((a, b) => b.value - a.value);
+ break;
+ case 'year':
+ list = _list.map(v => ({
+ label: v.lockName, value: v.yearCount
+ })).sort((a, b) => b.value - a.value);
+ break;
+ }
- let labels = list.slice(0, 5).map(v => v.label);
- let datas = list.slice(0, 5).map(v => v.value);
+ let labels = list.slice(0, 5).map(v => v.label);
+ let datas = list.slice(0, 5).map(v => v.value);
- useageRateChart.value.updateChart(labels, datas);
- }
+ useageRateChart.value.updateChart(labels, datas);
+ }
</script>
@@ -220,43 +222,38 @@
<div class="dashboard-left">
<div class="left-content-list">
<div class="left-content-item">
- <hdw-card is-full title="灞忔煖绫诲瀷">
+ <yc-card is-full title="灞忔煖绫诲瀷">
<pie ref="typePie"></pie>
- </hdw-card>
+ </yc-card>
</div>
<div class="left-content-item">
- <hdw-card is-full title="璁惧宸ヤ綔鐘舵��">
+ <yc-card is-full title="璁惧宸ヤ綔鐘舵��">
<bar ref="testBar" unit="濂�"></bar>
- </hdw-card>
+ </yc-card>
</div>
<div class="left-content-item last">
- <hdw-card is-full title="鐜鐘舵��">
+ <yc-card is-full title="鐜鐘舵��">
<div class="env">
<!-- 鐑熸劅 -->
- <div class="item">
+ <value-panel2 label="鐑熸劅" :value="0"></value-panel2>
+ <value-panel2 label="娓╁害" unit="鈩�" color="#efa10b" :value="0"></value-panel2>
+ <value-panel2 label="婀垮害" color="#55c587" :value="0"></value-panel2>
+ <!-- <div class="item">
<div class="label">鐑熸劅</div>
<div class="value">0</div>
- </div>
- <!-- 娓╁害 -->
- <div class="item">
- <div class="label">娓╁害</div>
- <div class="value">0</div>
- </div>
- <!-- 婀垮害 -->
- <div class="item">
- <div class="label">婀垮害</div>
- <div class="value">0</div>
- </div>
+ </div> -->
</div>
- </hdw-card>
+ </yc-card>
</div>
</div>
</div>
<div class="dashboard-middle">
<div class="middle-content-wrapper">
- <hdw-card>
+ <yc-card>
<div class="number-list-wrapper">
- <div class="number-item">
+ <value-panel label="鏈烘埧" :value="stationNum"></value-panel >
+ <value-panel label="閿佸叿" color="#efa10b" :value="sumLinf_num"></value-panel >
+ <!-- <div class="number-item">
<div class="number-label">鍖哄煙</div>
<div class="number-value">
<led-num color="#f00" :num="stationNum"></led-num>
@@ -267,7 +264,7 @@
<div class="number-value">
<led-num color="#f00" :num="sumLinf_num"></led-num>
</div>
- </div>
+ </div> -->
<!-- <div class="number-item">
<div class="number-label">鐢靛瓙鍗�</div>
<div class="number-value">
@@ -275,9 +272,9 @@
</div>
</div> -->
</div>
- </hdw-card>
+ </yc-card>
<div class="map-wrapper">
- <hdw-card is-full>
+ <yc-card is-full>
<map-chart ref="map" @mapMounted="updateMap">
<template #tools>
<div class="map-mark">
@@ -292,30 +289,30 @@
</div>
</template>
</map-chart>
- </hdw-card>
+ </yc-card>
</div>
<div class="dev-real-info">
- <hdw-card title="瀹炴椂寮�閿佷俊鎭�" is-full>
- <el-table :data="rtData" style="width: 100%; height: 100%">
+ <yc-card title="瀹炴椂寮�閿佷俊鎭�" is-full>
+ <el-table :data="rtData" stripe style="width: 100%; height: 100%">
<el-table-column prop="ctlTime" label="鏃堕棿" width="180" />
<el-table-column prop="lockId" label="閿佸叿ID" width="180" />
<el-table-column prop="lockName" label="閿佸叿鍚嶇О" />
<el-table-column prop="state" label="鎿嶄綔鐘舵��" />
</el-table>
- </hdw-card>
+ </yc-card>
</div>
</div>
</div>
<div class="dashboard-right">
<div class="left-content-list">
<div class="left-content-item">
- <hdw-card is-full title="灞忔煖鍝佺墝">
+ <yc-card is-full title="灞忔煖鍝佺墝">
<pie ref="prodPie"></pie>
- </hdw-card>
+ </yc-card>
</div>
<div class="left-content-item">
- <hdw-card is-full title="浣跨敤棰戞">
+ <yc-card is-full title="浣跨敤棰戞">
<template #tools>
<el-radio-group v-model="rateType" size="small">
<el-radio-button value="month" label="鏈湀"></el-radio-button>
@@ -324,17 +321,17 @@
</el-radio-group>
</template>
<bar ref="useageRateChart" :rotate="30" unit="娆�"></bar>
- </hdw-card>
+ </yc-card>
</div>
<div class="left-content-item last">
- <hdw-card is-full title="鍛婅缁熻">
- <el-table :data="alarmData" style="width: 100%; height: 100%">
+ <yc-card is-full title="鍛婅缁熻">
+ <el-table :data="alarmData" stripe style="width: 100%; height: 100%">
<el-table-column prop="ctlTime" label="鏃堕棿" width="160" />
<el-table-column prop="lockId" label="閿佸叿ID" width="90" />
<el-table-column prop="lockName" label="閿佸叿鍚嶇О" />
<el-table-column prop="state" label="鎿嶄綔鐘舵��" />
</el-table>
- </hdw-card>
+ </yc-card>
</div>
</div>
</div>
@@ -348,17 +345,19 @@
height: 100%;
.dashboard-left {
- width: 500px;
- height: 100%;
- }
-
- .dashboard-middle {
+ // width: 500px;
flex: 1;
height: 100%;
}
+ .dashboard-middle {
+ flex: 1.12;
+ height: 100%;
+ }
+
.dashboard-right {
- width: 500px;
+ // width: 500px;
+ flex: 1;
height: 100%;
}
}
@@ -464,29 +463,7 @@
padding: 10px;
display: flex;
flex-direction: row;
+ justify-content: space-evenly;
align-items: center;
- .item {
- flex: 1;
- border-radius: 8px;
- padding: 4px 8px;
- background: #0ff;
- & + .item {
- margin-left: 20px;
- }
- .label {
- color: #333;
- font-weight: bold;
- margin-bottom: 0.4em;
- text-align: center;
- }
- .value {
- background: #000;
- border-radius: 6px;
- padding: 4px 8px;
- color: #fff;
- font-weight: bold;
- text-align: center;
- }
- }
}
</style>
--
Gitblit v1.9.1