提交

package.json

@@ -29,6 +29,7 @@
     "axios": "1.8.4",
     "crypto-js": "4.2.0",
     "echarts": "5.6.0",
+    "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "2.9.8",
     "file-saver": "2.0.5",

src/api/large/index.ts

@@ -3,14 +3,14 @@ import request from '@/utils/request';
 // 查询图表总数据
 export function getPowerStationOverview() {
   return request({
-    url: '/ginlong/api/getPowerStationOverview',
+    url: '/ops/ginlong/api/getPowerStationOverview',
     method: 'get'
   });
 }
 //能源收益
 export function getStationMonthOverview(params: any) {
   return request({
-    url: '/ginlong/api/getStationMonthOverview',
+    url: '/ops/ginlong/api/getStationMonthOverview',
     method: 'get',
     params
   });
@@ -18,7 +18,7 @@ export function getStationMonthOverview(params: any) {
 //能源收益
 export function getInverterListOverview(params: any) {
   return request({
-    url: '/ginlong/api/getInverterListOverview',
+    url: '/ops/ginlong/api/getInverterListOverview',
     method: 'get',
     params
   });
@@ -26,7 +26,7 @@ export function getInverterListOverview(params: any) {
 //警告
 export function getAlarmListOverview(params?: any) {
   return request({
-    url: '/ginlong/api/getAlarmListOverview',
+    url: '/ops/ginlong/api/getAlarmListOverview',
     method: 'get',
     params
   });

src/assets/styles/element.scss

@@ -3,7 +3,7 @@
   .el-select__wrapper {
     background: transparent !important;
     box-shadow: none !important;
-    border: 0.1px solid #fff !important;
+    border: 0.1px solid rgba(24, 177, 219, 0.3) !important;
   }
 
   .el-select__placeholder {
@@ -47,7 +47,7 @@
   //   transition: var(--el-transition-box-shadow);
   //   transform: translate3d(0, 0, 0);
   box-shadow: none !important;
-  border: 0.1px solid #fff !important;
+  border: 0.1px solid rgba(24, 177, 219, 0.3) !important;
 }
 
 .el-input__inner {

src/assets/styles/index.scss

@@ -9,12 +9,6 @@
 @use 'element-plus/dist/index.css';
 @use './dialog.scss';
 
-@font-face {
-  font-family: 'AlimamaShuHeiTi';
-  src: url('@/assets/font/庞门正道标题体2.0增强版.ttf') format('truetype');
-  // font-weight: normal;
-  // font-style: normal;
-}
 
 body {
   height: 100%;

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;