电站运行监控优化

src/views/module_ems/photovoltaic/stationMonitor/index.vue

@@ -10,8 +10,16 @@
           style="text-align: center"
         >
           <a-row :gutter="24">
+            <!-- <a-form layout="inline">
+                <a-col :span="24">
+                  <a-form-item label="站点名称">
+                    <a-input placeholder="请输入站点名称"></a-input>
+                  </a-form-item>
+                  <a-button type="primary" icon="search">查询</a-button>
+                </a-col>
+            </a-form> -->
             <a-col :span="12">
-              <div class="totalEle-trend" ref="realPowerChart"></div>
+              <div class="totalEle-trend" ref="realPowerChart" style="padding-top:10%;"></div>
               <span style="margin-top: 120px">实时发电功率(kW)</span>
             </a-col>
             <a-col :span="12">
@@ -45,6 +53,7 @@
               :loading="loading"
               :body-style="{ padding: '10px 8px 8px' }"
               class="topcard"
+              size="small"
               :bordered="false"
               title="发电量信息"
             >
@@ -100,6 +109,7 @@
             :loading="loading"
             :body-style="{ padding: '10px 8px 8px' }"
             class="topcard"
+            size="small"
             :bordered="false"
             title="视频监控"
           >
@@ -113,6 +123,7 @@
           :loading="loading"
           :body-style="{ padding: '10px 8px 8px' }"
           class="middlecard"
+          size="small"
           :bordered="false"
           title="气象信息"
         >
@@ -143,6 +154,7 @@
           :body-style="{ padding: '0px 8px 8px' }"
           class="middlecard"
           :bordered="false"
+          size="small"
           title="功率及发电量趋势"
           style="margin-left: -4px"
         >
@@ -152,34 +164,43 @@
     </a-row>
     <a-row>
       <a-col :sm="24" :md="12" :xl="24" :style="{ padding: '12px 0px 0px 0px' }">
-        <div class="tri-colorLight" ref="flexDivGroup">
-          <div class="item-title item-title1" style="padding: 16px 0px 0px 0px; font-size: 16px; margin-left: 26px">
-            逆变器信息
-          </div>
-          <a-divider style="margin: 16px 0" />
-          <div class="item-content" ref="itemFlexDiv" v-for="(item, index) in invInfo" :key="index" cl>
-            <div class="item-title">{{ item.fInvertername }}</div>
-            <div style="width: 100%">
-              <div class="item-inv"></div>
-              <div class="item-cc">
-                <div class="item-title"></div>
-                <div>厂家：{{ item.fManufacturername }}</div>
-                <div>设备型号：{{ item.fProductmodel }}</div>
-                <div>状态：{{ item.state }}</div>
-                <div>额定交流功率：{{ item.fRatedoutputpower }} kW</div>
-                <div>实时发电功率：{{ item.realGeneratingPower }} kW</div>
-                <div>当日发电量：{{ item.powerByDay }} kW·h</div>
-                <div>组件峰值功率：{{ item.fComponentpeakpower }} kWp</div>
+        <a-card
+          :body-style="{ padding: '0px 8px 8px' }"
+          class="middlecard"
+          :bordered="false"
+          size="small"
+          title="逆变器信息"
+          style="height: 700px;"
+        >
+          <div class="tri-colorLight" ref="flexDivGroup">
+            <!-- <div class="item-title item-title1" style="padding: 16px 0px 0px 0px; font-size: 16px; margin-left: 26px">
+              逆变器信息
+            </div> -->
+            <!-- <a-divider style="margin: 16px 0" /> -->
+            <div class="item-content" ref="itemFlexDiv" v-for="(item, index) in invInfo" :key="index" cl>
+              <div class="item-title">{{ item.fInvertername }}</div>
+              <div style="width: 100%">
+                <div class="item-inv"></div>
+                <div class="item-cc">
+                  <div class="item-title"></div>
+                  <div>厂家：{{ item.fManufacturername }}</div>
+                  <div>设备型号：{{ item.fProductmodel }}</div>
+                  <div>状态：{{ item.state }}</div>
+                  <div>额定交流功率：{{ item.fRatedoutputpower }} kW</div>
+                  <div>实时发电功率：{{ item.realGeneratingPower }} kW</div>
+                  <div>当日发电量：{{ item.powerByDay }} kW·h</div>
+                  <div>组件峰值功率：{{ item.fComponentpeakpower }} kWp</div>
+                </div>
               </div>
+              <router-link :to="'/equipment/info/detail/' + item.fInverterid">
+                <!-- <router-link :to="'/system/dict-data/index/' + item.equipmentid"> -->
+                <a-button type="success" plain style="margin-top: 10px">查看详情 </a-button>
+              </router-link>
             </div>
-            <router-link :to="'/equipment/info/detail/' + item.fInverterid">
-              <!-- <router-link :to="'/system/dict-data/index/' + item.equipmentid"> -->
-              <a-button type="success" plain style="margin-top: 10px">查看详情 </a-button>
-            </router-link>
+            <!-- 优化布局 -->
+            <div ref="completion" v-for="item in completionNumber" :key="'com' + item" class="completion"></div>
           </div>
-          <!-- 优化布局 -->
-          <div ref="completion" v-for="item in completionNumber" :key="'com' + item" class="completion"></div>
-        </div>
+        </a-card>
       </a-col>
     </a-row>
   </div>
@@ -267,14 +288,59 @@ export default {
               show: true,
             },
             detail: {
+              // 仪表盘展示文字
+              // show: false,
               formatter: '{value}',
+              color: "#838383"
             },
             radius: '100%', // 仪表盘放大/缩小
-            axisLine: { lineStyle: { width: 5 } }, // 修改线段宽度
+            axisLine: { lineStyle: {
+                color: [[1, '#1FD09D']],
+            } },
+            axisLabel: {
+                textStyle: {
+                    color: "#1FD09D"
+                }
+            },
+            // 分隔线
+              splitLine: {
+                show: true,
+                // 这里刻度线长短
+                // length: 12,
+                lineStyle: {
+                  width: 2,
+                  color: '#1FD09D'
+                }
+              },
+              // 刻度线
+              axisTick: {
+                show: true,
+                splitNumber: 5,
+                length: 10,
+                lineStyle: {
+                  color: '#B0B0B0',
+                  width: 1,
+                },
+              },
+              // 刻度标签(数字)
+              axisLabel: {
+                // distance: 2,
+                color: '#1FD09D',
+              },
+              // 仪表盘指针
+              pointer: {
+                show: true,
+                length: '65%',
+                width: 5 // 指针粗细
+              },
+              // 仪表盘指针样式
+              itemStyle: {
+                color: '#1FD09D'
+              },
             data: [
               {
                 value: _this.stationInfo.realPower,
-                name: '功率',
+                // name: '功率',
               },
             ],
           },
@@ -593,4 +659,15 @@ export default {
     margin: 10px 6px;
   }
 }
+::v-deep .ant-card{
+  border-radius: 5px;
+  box-shadow: -1px 0 2px rgba(180, 180, 180, 0.156), /*左侧阴影*/
+                1px 0 2px rgba(180, 180, 180, 0.156), /*右侧阴影*/
+                -2px 2px 2px rgba(180, 180, 180, 0.156), /*上方阴影*/
+                2px 2px 2px rgba(180, 180, 180, 0.156);
+}
+::v-deep .ant-card-head{
+  background-color: #01ADA8 !important;
+  color: #fff;
+}
 </style>