提交

src/views/largeScreen/components/header.vue

@@ -102,7 +102,7 @@ onUnmounted(() => {
 }
 .title {
   color: #fff;
-  font-family: 'AlimamaShuHeiTi', sans-serif;
+  font-family: 'Rang_men_zheng_title', sans-serif;
   text-align: center;
 }
 .title > div:first-child {
@@ -169,7 +169,7 @@ onUnmounted(() => {
 .right-section {
   display: flex;
   align-items: center;
-  font-family: 'AlimamaShuHeiTi', sans-serif;
+  font-family: 'Rang_men_zheng_title', sans-serif;
   font-size: 20px;
 }
 .right-section img {

src/views/largeScreen/components/leftPage.vue

@@ -57,7 +57,7 @@
         </div>
       </div>
     </div>
-    <div style="box-sizing: border-box; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; margin-top: 5px">
+    <div style="box-sizing: border-box; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; margin-top: 5px">
       <div class="inverter">
         <div class="left_title">
           <div style="display: flex; align-items: center">
@@ -125,9 +125,8 @@
         </div>
       </div>
       <div class="brokenLine">
-        <EchartBoxTwo :option="lineOption"></EchartBoxTwo>
+        <EchartBoxTwo :option="lineOption" ref="lineChart"></EchartBoxTwo>
       </div>
-
       <div class="left_title">
         <div style="display: flex; align-items: center">
           <div class="left_title_img">
@@ -138,7 +137,7 @@
       </div>
 
       <div class="income">
-        <EchartBoxTwo :option="barOption"></EchartBoxTwo>
+        <EchartBoxTwo :option="barOption" ref="barChart"></EchartBoxTwo>
       </div>
       <div class="income_list">
         <div style="display: flex; justify-content: space-between">
@@ -168,9 +167,8 @@
 import * as echarts from 'echarts';
 import EchartBoxTwo from '@/components/EchartBox/index.vue';
 import { formatDate } from '@/utils/index';
-
 import { getLineOption, getBarOptions } from './optionList';
-import { getPowerStationOverview, getStationMonthOverview, getInverterListOverview } from '@/api/large';
+import { getPowerStationOverview, getStationMonthOverview, getInverterListOverview } from '@/api/large/index';
 
 // 直接在组件内部定义数据
 const chartData = ref({
@@ -258,9 +256,9 @@ const getInverterData = () => {
   getInverterListOverview(params).then((res) => {
     if (res.code == 200) {
       pedestrianFlow(res.data.data);
-      chartData.value.fault = res.data.fault;
-      chartData.value.normal = res.data.normal;
-      chartData.value.abnormal = res.data.offline;
+      chartData.value.fault = res.data.fault ?? 0;
+      chartData.value.normal = res.data.normal ?? 0;
+      chartData.value.abnormal = res.data.offline ?? 0;
       renderChart();
     }
   });
@@ -295,9 +293,9 @@ const calculatePercentages = () => {
   }
 
   return {
-    normal: Number(normal),
-    abnormal: Number(abnormal),
-    fault: Number(fault)
+    normal: Number(normal) ?? 0,
+    abnormal: Number(abnormal) ?? 0,
+    fault: Number(fault) ?? 0
   };
 };
 const lineOption = ref({});
@@ -335,6 +333,8 @@ const initChart = () => {
 
   getEnergyData();
   getInverterData();
+  // pedestrianFlow();
+  // getTurnoverList();
 };
 
 // 渲染图表逆变器柱状图
@@ -445,6 +445,8 @@ const renderChart = () => {
 
   chartInstance.setOption(option);
 };
+const lineChart = ref();
+
 onMounted(() => {
   initChart();
   window.addEventListener('resize', () => chartInstance?.resize());
@@ -515,7 +517,7 @@ onMounted(() => {
   }
   .left_title_text {
     font-size: 20px;
-    font-family: 'AlimamaShuHeiTi', sans-serif;
+    font-family: 'Rang_men_zheng_title', sans-serif;
     display: flex;
     align-items: flex-end;
     margin-left: 15px;
@@ -595,19 +597,19 @@ img {
 }
 .income {
   width: 100%;
-  height: 20vh;
+  height: 24vh;
   // margin-top: 20px;
 }
 .income_list {
   width: 100%;
-  height: 9vh;
+  height: 7vh;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   align-items: center; /* 垂直居中 */
   // grid-gap: 10px;
   // background-color: rgba(29, 214, 255, 0.1);
   // border-radius: 10px;
-  padding: 10px;
+  padding: 0 10px;
   box-sizing: border-box;
   font-size: 14px;
 }

src/views/largeScreen/components/optionList.ts

@@ -601,15 +601,15 @@ export const getBarOptions = (data: any) => {
     backgroundColor: '',
     grid: {
       left: '7%',
-      top: '4%',
-      bottom: '25%',
+      top: '10%',
+      bottom: '23%',
       right: '2%'
     },
     tooltip: {
       show: true,
       backgroundColor: '',
       trigger: 'axis',
-      formatter: '{b0}：{c0}元',
+      formatter: '{b0}：{c0}万元',
       textStyle: {
         color: '#fff'
       }

src/views/largeScreen/components/rightPage.vue

@@ -267,7 +267,7 @@ getAlarm();
   }
   .left_title_text {
     font-size: 20px;
-    font-family: 'AlimamaShuHeiTi', sans-serif;
+    font-family: 'Rang_men_zheng_title', sans-serif;
     display: flex;
     align-items: flex-end;
     margin-left: 15px;