From 2f2b09869423f7e98c64f79dc96c62d9a1696f24 Mon Sep 17 00:00:00 2001
From: ali <ali9696@163.com>
Date: 星期一, 13 一月 2025 18:08:42 +0800
Subject: [PATCH] 修改整体样式偏大问题
---
zhitan-vue/src/views/powerbalance/powerbalance.vue | 242 +++++++++++++++++++++++-------------------------
1 files changed, 117 insertions(+), 125 deletions(-)
diff --git a/zhitan-vue/src/views/powerbalance/powerbalance.vue b/zhitan-vue/src/views/powerbalance/powerbalance.vue
index d559c09..4656d80 100644
--- a/zhitan-vue/src/views/powerbalance/powerbalance.vue
+++ b/zhitan-vue/src/views/powerbalance/powerbalance.vue
@@ -8,22 +8,22 @@
<div class="table-box">
<div class="table-header-box">
<div>
- <div class="cell"> </div>
+ <div class="cell"></div>
</div>
- <div v-for=" (item, i) in tableHeaderData" :key="i">
+ <div v-for="(item, i) in tableHeaderData" :key="i">
<div class="cell">{{ item }}</div>
</div>
</div>
<div class="table-content-box" v-for="(items, i) in ListData" :key="i">
- <div class="calc6_4 ">
- <div style="display: flex;align-items: center; width: 100%;border: 1px solid #666;">
+ <div class="calc6_4">
+ <div style="display: flex; align-items: center; width: 100%; border: 1px solid #666">
<div class="calc4">
{{ items.jinList.jinName }}
</div>
<div class="width50">
- <div v-for=" (item, k) in items.jinList.list" :key="k" class="data-list-ul">
- <div class="width50" style="border-right: 1px solid #666;">{{ item.title }}</div>
+ <div v-for="(item, k) in items.jinList.list" :key="k" class="data-list-ul">
+ <div class="width50" style="border-right: 1px solid #666">{{ item.title }}</div>
<div class="width50">{{ item.num }}</div>
</div>
</div>
@@ -31,16 +31,19 @@
{{ items.jinList.total }}
</div>
</div>
- <div style="display: flex;align-items: center; width: 100%;border: 1px solid #666;">
+ <div style="display: flex; align-items: center; width: 100%; border: 1px solid #666">
<div class="calc4">
{{ items.chuList.chuName }}
</div>
<div class="width50">
- <div v-for=" (item, k) in items.chuList.list" :key="k"
- style="display: flex;align-items: center; width: 100%;" class="data-list-ul">
- <div class="width50" style="border-right: 1px solid #666;">{{ item.title }}</div>
+ <div
+ v-for="(item, k) in items.chuList.list"
+ :key="k"
+ style="display: flex; align-items: center; width: 100%"
+ class="data-list-ul"
+ >
+ <div class="width50" style="border-right: 1px solid #666">{{ item.title }}</div>
<div class="width50">{{ item.num }}</div>
-
</div>
</div>
<div class="calc4">
@@ -48,21 +51,23 @@
</div>
</div>
</div>
- <div class="calc6"
- style="border: 1px solid #666;display: flex;align-items: center;justify-content: center;">
+ <div
+ class="calc6"
+ style="border: 1px solid #666; display: flex; align-items: center; justify-content: center"
+ >
<div>
{{ items.cha }}
</div>
</div>
- <div class="calc6"
- style="border: 1px solid #666;display: flex;align-items: center;justify-content: center;">
+ <div
+ class="calc6"
+ style="border: 1px solid #666; display: flex; align-items: center; justify-content: center"
+ >
<div>
{{ items.baifenbi }}
</div>
-
</div>
</div>
-
</div>
<BaseCard title="鑳芥簮娴佸悜鍒嗘瀽">
<div class="chart-box">
@@ -74,119 +79,111 @@
</div>
</template>
<script setup>
-import useSettingsStore from '@/store/modules/settings'
+import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
-import * as echarts from 'echarts';
-import { onMounted } from 'vue';
+import * as echarts from "echarts"
+import { onMounted } from "vue"
/** 鑺傜偣鍗曞嚮浜嬩欢 */
-function handleNodeClick(data) {
-}
+function handleNodeClick(data) {}
-
-const tableHeaderData = ['绾胯矾鍚嶇О', '鑰楃數閲�', '灏忚', '宸��', '鐧惧垎姣�']
+const tableHeaderData = ["绾胯矾鍚嶇О", "鑰楃數閲�", "灏忚", "宸��", "鐧惧垎姣�"]
const ListData = ref([
{
id: 1,
jinList: {
- jinName: '杩涚嚎',
+ jinName: "杩涚嚎",
list: [
- { num: 24726900, title: '1#涓诲彉' },
- { num: 0, title: '鍐朵笁浣欑儹鍙戠數鍙嶅悜' },
- { num: 958880, title: '鍚夐『鍏変紡1#绾�' },
- { num: 874720, title: '鍚夐『鍏変紡2#绾�' }
+ { num: 24726900, title: "1#涓诲彉" },
+ { num: 0, title: "鍐朵笁浣欑儹鍙戠數鍙嶅悜" },
+ { num: 958880, title: "鍚夐『鍏変紡1#绾�" },
+ { num: 874720, title: "鍚夐『鍏変紡2#绾�" },
],
- total: 39375820
+ total: 39375820,
},
chuList: {
- chuName: '鍑虹嚎',
+ chuName: "鍑虹嚎",
list: [
- { num: 1766800, title: '鍐朵笁榧撻鏈烘埧1#绾�' },
- { num: 1046400, title: '鍐朵笁榧撻鏈烘埧2#绾�' },
- { num: 1790400, title: '鍐朵笁纭吀1#绾�' },
- { num: 1385700, title: '鍐朵笁纭吀2#绾�' },
- { num: 5058600, title: '鍐朵笁鍒舵哀1#绾�' },
- { num: 3921600, title: '鍐朵笁鍒舵哀2#绾�' },
- { num: 215760, title: '鐢熷寲2#绾�' },
- { num: 0, title: '渚у惞绮剧偧1#绾�' },
- { num: 5555000, title: '渚у惞鐔旂偧1#绾�' },
- { num: 4786530, title: '1#35kV鐢熷寲绾�' },
- { num: 973980, title: '2#35kV鐢熷寲绾�' },
- { num: 7680, title: '鍚夐『鍏変紡1#绾�' },
- { num: 5280, title: '鍚夐『鍏変紡2#绾�' }
-
+ { num: 1766800, title: "鍐朵笁榧撻鏈烘埧1#绾�" },
+ { num: 1046400, title: "鍐朵笁榧撻鏈烘埧2#绾�" },
+ { num: 1790400, title: "鍐朵笁纭吀1#绾�" },
+ { num: 1385700, title: "鍐朵笁纭吀2#绾�" },
+ { num: 5058600, title: "鍐朵笁鍒舵哀1#绾�" },
+ { num: 3921600, title: "鍐朵笁鍒舵哀2#绾�" },
+ { num: 215760, title: "鐢熷寲2#绾�" },
+ { num: 0, title: "渚у惞绮剧偧1#绾�" },
+ { num: 5555000, title: "渚у惞鐔旂偧1#绾�" },
+ { num: 4786530, title: "1#35kV鐢熷寲绾�" },
+ { num: 973980, title: "2#35kV鐢熷寲绾�" },
+ { num: 7680, title: "鍚夐『鍏変紡1#绾�" },
+ { num: 5280, title: "鍚夐『鍏変紡2#绾�" },
],
- total: 39173060
+ total: 39173060,
},
cha: 202760,
- baifenbi: '0.51%'
+ baifenbi: "0.51%",
+ },
+])
+
+watch(
+ () => settingsStore.sideTheme,
+ (val) => {
+ getChart()
}
-
-]);
-
-
-
-watch(() => settingsStore.sideTheme, (val) => {
- getChart()
-})
+)
function getChart() {
-
-
- let colors = ['#FBB4AE', '#B3CDE3', '#CCEBC5', '#DECBE4', '#5470C6'];
+ let colors = ["#FBB4AE", "#B3CDE3", "#CCEBC5", "#DECBE4", "#5470C6"]
let mydata = [
- { id: 1, name: '1#涓诲彉', itemStyle: { color: colors[0] }, depth: 0 },
- { id: 2, name: '鍚夐『鍏変紡1#绾�', itemStyle: { color: colors[0] }, depth: 0 },
- { id: 3, name: '鍚夐『鍏変紡2#绾�', itemStyle: { color: colors[0] }, depth: 0 },
- { id: 4, name: '鍐朵笁浣欑儹鍙戠數鍙嶅悜', itemStyle: { color: colors[0] }, depth: 0 },
+ { id: 1, name: "1#涓诲彉", itemStyle: { color: colors[0] }, depth: 0 },
+ { id: 2, name: "鍚夐『鍏変紡1#绾�", itemStyle: { color: colors[0] }, depth: 0 },
+ { id: 3, name: "鍚夐『鍏変紡2#绾�", itemStyle: { color: colors[0] }, depth: 0 },
+ { id: 4, name: "鍐朵笁浣欑儹鍙戠數鍙嶅悜", itemStyle: { color: colors[0] }, depth: 0 },
-
- { id: 5, name: '杩涘嚭绾�', itemStyle: { color: colors[1] }, depth: 1 },
+ { id: 5, name: "杩涘嚭绾�", itemStyle: { color: colors[1] }, depth: 1 },
// { name: 'L2-1', itemStyle: { color: colors[1] }, depth: 1 },
// { name: 'L2-2', itemStyle: { color: colors[1] }, depth: 1 },
// { name: 'L2-3', itemStyle: { color: colors[1] }, depth: 1 },
-
// { name: 'L3', itemStyle: { color: colors[2] }, depth: 2 },
// { name: 'L3-1', itemStyle: { color: colors[2] }, depth: 2 },
// { name: 'L3-2', itemStyle: { color: colors[2] }, depth: 2 },
- { id: 6, name: '鍐朵笁榧撻鏈烘埧1#绾�', itemStyle: { color: colors[3] }, depth: 3 },
- { id: 7, name: '鍐朵笁榧撻鏈烘埧2#绾�', itemStyle: { color: colors[3] }, depth: 3 },
- { id: 8, name: '鍐朵笁纭吀1#绾�', itemStyle: { color: colors[3] }, depth: 3 },
- { id: 9, name: '鍐朵笁纭吀2#绾�', itemStyle: { color: colors[3] }, depth: 3 },
- { id: 10, name: '鍐朵笁鍒舵哀1#绾�', itemStyle: { color: colors[3] }, depth: 3 },
- { id: 11, name: '鍐朵笁鍒舵哀2#绾�', itemStyle: { color: colors[3] }, depth: 3 },
- { id: 12, name: '鐢熷寲2#绾�', itemStyle: { color: colors[3] }, depth: 3 },
- { id: 13, name: '渚у惞绮剧偧1#绾�', itemStyle: { color: colors[3] }, depth: 3 },
- { id: 14, name: '渚у惞鐔旂偧1#绾�', itemStyle: { color: colors[3] }, depth: 3 },
- { id: 15, name: '1#35kV鐢熷寲绾�', itemStyle: { color: colors[3] }, depth: 3 },
- { id: 16, name: '2#35kV鐢熷寲绾�', itemStyle: { color: colors[3] }, depth: 3 },
- { id: 17, name: '鍚夐『鍏変紡1#绾�', itemStyle: { color: colors[3] }, depth: 3 },
- { id: 18, name: '鍚夐『鍏変紡2#绾�', itemStyle: { color: colors[3] }, depth: 3 },
- ];
+ { id: 6, name: "鍐朵笁榧撻鏈烘埧1#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+ { id: 7, name: "鍐朵笁榧撻鏈烘埧2#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+ { id: 8, name: "鍐朵笁纭吀1#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+ { id: 9, name: "鍐朵笁纭吀2#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+ { id: 10, name: "鍐朵笁鍒舵哀1#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+ { id: 11, name: "鍐朵笁鍒舵哀2#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+ { id: 12, name: "鐢熷寲2#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+ { id: 13, name: "渚у惞绮剧偧1#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+ { id: 14, name: "渚у惞鐔旂偧1#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+ { id: 15, name: "1#35kV鐢熷寲绾�", itemStyle: { color: colors[3] }, depth: 3 },
+ { id: 16, name: "2#35kV鐢熷寲绾�", itemStyle: { color: colors[3] }, depth: 3 },
+ { id: 17, name: "鍚夐『鍏変紡1#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+ { id: 18, name: "鍚夐『鍏変紡2#绾�", itemStyle: { color: colors[3] }, depth: 3 },
+ ]
// mydata.reverse()
let mylinks = [
// L1鈫扡4 9720
- { source: '1', target: '5', value: 24726900 },
- { source: '2', target: '5', value: 958880 },
- { source: '3', target: '5', value: 874720 },
- { source: '4', target: '5', value: 0 },
+ { source: "1", target: "5", value: 24726900 },
+ { source: "2", target: "5", value: 958880 },
+ { source: "3", target: "5", value: 874720 },
+ { source: "4", target: "5", value: 0 },
// L2鈫扡4 24396
- { source: '5', target: '6', value: 1766800 },
- { source: '5', target: '7', value: 1046400 },
- { source: '5', target: '8', value: 1790400 },
- { source: '5', target: '9', value: 1385700 },
- { source: '5', target: '10', value: 5058600 },
- { source: '5', target: '11', value: 3921600 },
- { source: '5', target: '12', value: 215760 },
- { source: '5', target: '13', value: 0 },
- { source: '5', target: '14', value: 5555000 },
- { source: '5', target: '15', value: 4786530 },
- { source: '5', target: '16', value: 973980 },
- { source: '5', target: '17', value: 7680 },
- { source: '5', target: '18', value: 5280 },
-
+ { source: "5", target: "6", value: 1766800 },
+ { source: "5", target: "7", value: 1046400 },
+ { source: "5", target: "8", value: 1790400 },
+ { source: "5", target: "9", value: 1385700 },
+ { source: "5", target: "10", value: 5058600 },
+ { source: "5", target: "11", value: 3921600 },
+ { source: "5", target: "12", value: 215760 },
+ { source: "5", target: "13", value: 0 },
+ { source: "5", target: "14", value: 5555000 },
+ { source: "5", target: "15", value: 4786530 },
+ { source: "5", target: "16", value: 973980 },
+ { source: "5", target: "17", value: 7680 },
+ { source: "5", target: "18", value: 5280 },
// // L3鈫扡4 1462
// { source: 'L3', target: 'L4', value: 1462 },
@@ -206,28 +203,26 @@
// // L2鈫扡3鈫扡4 893
// { source: 'L2-3', target: 'L3-3', value: 893 },
// { source: 'L3-3', target: 'L4', value: 893 },
+ ]
- ];
-
-
- const myChart1 = echarts.init(document.getElementById("Chart1"));
+ const myChart1 = echarts.init(document.getElementById("Chart1"))
myChart1.setOption({
tooltip: {
- trigger: 'item',
- triggerOn: 'mousemove',
+ trigger: "item",
+ triggerOn: "mousemove",
},
series: {
- type: 'sankey',
+ type: "sankey",
lineStyle: {
opacity: 0.3,
- color: 'gradient',
+ color: "gradient",
curveness: 0.7,
},
// nodeAlign: 'left',
nodeGap: 18,
layoutIterations: 1,
emphasis: {
- focus: 'adjacency',
+ focus: "adjacency",
},
data: mydata,
links: mylinks,
@@ -237,15 +232,19 @@
// position: 'left', // 鏍囩浣嶇疆
formatter: function (node) {
// 鑷畾涔夋爣绛惧唴瀹�
- return node.data.name;
- }
- }
+ return node.data.name
+ },
+ },
},
},
})
- window.addEventListener("resize", () => {
- myChart1.resize();
- }, { passive: true });
+ window.addEventListener(
+ "resize",
+ () => {
+ myChart1.resize()
+ },
+ { passive: true }
+ )
}
onMounted(() => {
getChart()
@@ -272,7 +271,7 @@
padding: 8px 0;
align-items: center;
- &>div {
+ & > div {
width: calc(100% / 6);
word-break: break-word;
background-color: #1d3778 !important;
@@ -296,13 +295,12 @@
line-height: 23px;
padding: 0 12px;
}
-
-
}
}
.table-content-box {
color: #fff;
+ background-color: #1d3778 !important;
padding: 8px 0;
width: 100%;
display: flex;
@@ -311,24 +309,20 @@
align-items: stretch;
.calc6_4 {
- width: calc((100% / 6) * 4)
+ width: calc((100% / 6) * 4);
}
-
-
.calc6 {
- width: calc(100% / 6)
+ width: calc(100% / 6);
}
.calc4 {
- width: calc(100% / 4)
+ width: calc(100% / 4);
}
.width50 {
width: 50%;
}
-
-
.data-list-ul {
width: 100%;
@@ -353,8 +347,6 @@
// /* 浣跨敤鐪佺暐鍙疯〃绀烘孩鍑虹殑鏂囨湰 */
// }
}
-
-
}
.chart-box {
@@ -366,4 +358,4 @@
height: 100%;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3