Browse Source

场站管理接入数据

bls-dan 2 years ago
parent
commit
f3d7a052f9

+ 409 - 301
src/pages/views/home/components/StationManagement.vue

@@ -5,7 +5,7 @@
         <Box
         <Box
           :width="665"
           :width="665"
           :height="396"
           :height="396"
-          :name="'安全行驶'"
+          :name="'区域分布'"
           style="margin-bottom: 25px;"
           style="margin-bottom: 25px;"
         >
         >
           <div class="body">
           <div class="body">
@@ -14,10 +14,10 @@
                 src="../../../../assets/img/1-1.png"
                 src="../../../../assets/img/1-1.png"
                 alt=""
                 alt=""
               >
               >
-              <p>40</p>
+              <p>{{ region.total }}</p>
               <div>总量</div>
               <div>总量</div>
             </div>
             </div>
-            <Echart :option="option" />
+            <Echart :option="region.option" />
           </div>
           </div>
         </Box>
         </Box>
         <Box
         <Box
@@ -34,7 +34,7 @@
               class="text"
               class="text"
             >
             >
               站场总数
               站场总数
-              <p>100</p>
+              <p>{{ typeTotal }}</p>
             </div>
             </div>
             <Echart
             <Echart
               v-if="item.option"
               v-if="item.option"
@@ -48,35 +48,19 @@
           :name="'使用情况'"
           :name="'使用情况'"
         >
         >
           <div class="usage">
           <div class="usage">
-            <div class="list">
-              <img
-                src="../../../../assets/img/1-1.png"
-                alt=""
-              >
-              <div class="value">
-                0
-              </div>
-              <p>规划</p>
-            </div>
-            <div class="list">
-              <img
-                src="../../../../assets/img/1-1.png"
-                alt=""
-              >
-              <div class="value">
-                0
-              </div>
-              <p>在建</p>
-            </div>
-            <div class="list">
+            <div
+              v-for="item, index in useData"
+              :key="index"
+              class="list"
+            >
               <img
               <img
                 src="../../../../assets/img/1-1.png"
                 src="../../../../assets/img/1-1.png"
                 alt=""
                 alt=""
               >
               >
               <div class="value">
               <div class="value">
-                0
+                {{ item.number }}
               </div>
               </div>
-              <p>使用</p>
+              <p> {{ item.useType }}</p>
             </div>
             </div>
           </div>
           </div>
         </Box>
         </Box>
@@ -91,63 +75,36 @@
           style="margin-bottom: 23px;"
           style="margin-bottom: 23px;"
         >
         >
           <div class="commercial">
           <div class="commercial">
-            <div class="commercial-vehicles">
-              <div class="title">
-                营运车
-              </div>
-              <div class="top">
-                <div class="list">
-                  <div>100 <span>辆/次</span></div>
-                  <p>进场车次</p>
-                </div>
-                <div class="list">
-                  <div>100 <span>辆/次</span></div>
-                  <p>出场车次</p>
-                </div>
-                <div class="list">
-                  <div>100 <span>辆/次</span></div>
-                  <p>泊车车次</p>
-                </div>
-              </div>
-              <div class="bottom">
-                <div class="list">
-                  <div>100 <span>辆/次</span></div>
-                  <p>凌晨两点泊车</p>
-                </div>
-                <div class="list">
-                  <div style="color: #E73D41;">
-                    100 <span>辆/次</span>
-                  </div>
-                  <p>长期滞留车辆(大于7天)</p>
-                </div>
-              </div>
-            </div>
-            <div class="commercial-vehicles">
+            <div
+              v-for="item in operateData"
+              :key="item.type"
+              class="commercial-vehicles"
+            >
               <div class="title">
               <div class="title">
-                非营运车
+                {{ item.type === 1 ? '营运车' : '非营运车' }}
               </div>
               </div>
               <div class="top">
               <div class="top">
                 <div class="list">
                 <div class="list">
-                  <div>100 <span>辆/次</span></div>
+                  <div>{{ item.inNum }} <span>辆/次</span></div>
                   <p>进场车次</p>
                   <p>进场车次</p>
                 </div>
                 </div>
                 <div class="list">
                 <div class="list">
-                  <div>100 <span>辆/次</span></div>
+                  <div>{{ item.outNum }} <span>辆/次</span></div>
                   <p>出场车次</p>
                   <p>出场车次</p>
                 </div>
                 </div>
                 <div class="list">
                 <div class="list">
-                  <div>100 <span>辆/次</span></div>
+                  <div>{{ item.parkingNum }} <span>辆/次</span></div>
                   <p>泊车车次</p>
                   <p>泊车车次</p>
                 </div>
                 </div>
               </div>
               </div>
               <div class="bottom">
               <div class="bottom">
                 <div class="list">
                 <div class="list">
-                  <div>100 <span>辆/次</span></div>
+                  <div>{{ item.amParkingNum }} <span>辆/次</span></div>
                   <p>凌晨两点泊车</p>
                   <p>凌晨两点泊车</p>
                 </div>
                 </div>
                 <div class="list">
                 <div class="list">
                   <div style="color: #E73D41;">
                   <div style="color: #E73D41;">
-                    100 <span>辆/次</span>
+                    {{ item.retentionNum }} <span>辆/次</span>
                   </div>
                   </div>
                   <p>长期滞留车辆(大于7天)</p>
                   <p>长期滞留车辆(大于7天)</p>
                 </div>
                 </div>
@@ -178,7 +135,7 @@
             <div class="airport">
             <div class="airport">
               <div class="text">
               <div class="text">
                 站场总数
                 站场总数
-                <p>100</p>
+                <p>{{ installedCapacityTotal }}</p>
               </div>
               </div>
               <Echart :option="airportChart" />
               <Echart :option="airportChart" />
             </div>
             </div>
@@ -192,16 +149,16 @@
           >
           >
             <ul class="hd">
             <ul class="hd">
               <li
               <li
-                v-for="item in 4"
-                :key="item"
+                v-for="item, index in chargingStatus"
+                :key="index"
               >
               >
                 <img
                 <img
                   src="../../../../assets/img/1-1.png"
                   src="../../../../assets/img/1-1.png"
                   alt=""
                   alt=""
                 >
                 >
                 <div class="txt">
                 <div class="txt">
-                  <p>100</p>
-                  <div>进厂车次</div>
+                  <p>{{ item.number }}</p>
+                  <div>{{ item.chargingStatus }}</div>
                 </div>
                 </div>
               </li>
               </li>
             </ul>
             </ul>
@@ -209,11 +166,13 @@
               <li>
               <li>
                 <div class="tt">
                 <div class="tt">
                   <p>今日充电车次</p>
                   <p>今日充电车次</p>
-                  <div>73 <span>/100</span> </div>
+                  <div>
+                    {{ chargingStatistics.chargingNum }} <span> /{{ chargingStatistics.totalChargingNum }}</span>
+                  </div>
                 </div>
                 </div>
                 <n-progress
                 <n-progress
                   type="line"
                   type="line"
-                  :percentage="60"
+                  :percentage="(chargingStatistics.chargingNum / chargingStatistics.totalChargingNum * 100).toFixed(2)"
                   :show-indicator="false"
                   :show-indicator="false"
                   :indicator-placement="'inside'"
                   :indicator-placement="'inside'"
                   processing
                   processing
@@ -223,11 +182,13 @@
               <li>
               <li>
                 <div class="tt">
                 <div class="tt">
                   <p>今日充电电量 kw.h</p>
                   <p>今日充电电量 kw.h</p>
-                  <div>73 <span>/100</span> </div>
+                  <div>
+                    {{ chargingStatistics.electricityNum }} <span> /{{ chargingStatistics.totalElectricityNum }}</span>
+                  </div>
                 </div>
                 </div>
                 <n-progress
                 <n-progress
                   type="line"
                   type="line"
-                  :percentage="60"
+                  :percentage="(chargingStatistics.electricityNum / chargingStatistics.totalElectricityNum * 100).toFixed(2)"
                   :show-indicator="false"
                   :show-indicator="false"
                   :indicator-placement="'inside'"
                   :indicator-placement="'inside'"
                   processing
                   processing
@@ -242,14 +203,18 @@
             :name="'资源使用率'"
             :name="'资源使用率'"
           >
           >
             <ul class="btn">
             <ul class="btn">
-              <li>各场站入场率</li>
-              <li>各充电场站充电量</li>
-              <li>各维保场维修保养车辆数</li>
-              <li>运维驿站使用率</li>
+              <li
+                v-for="item,key in typeMap"
+                :key="key"
+                :class="{active:type === key}"
+                @click="type = key"
+              >
+                {{ item }}
+              </li>
             </ul>
             </ul>
             <n-data-table
             <n-data-table
               :columns="columns"
               :columns="columns"
-              :data="data"
+              :data="tableData"
               max-height="200"
               max-height="200"
             />
             />
           </Box>
           </Box>
@@ -262,9 +227,12 @@
 <script setup lang='ts'>
 <script setup lang='ts'>
 import Layout from '@/components/layout.vue'
 import Layout from '@/components/layout.vue'
 import Box from '@/components/box.vue'
 import Box from '@/components/box.vue'
-import { ref } from 'vue'
+import {
+  Ref, computed, h, ref
+} from 'vue'
 import Echart from '@/components/chart.vue'
 import Echart from '@/components/chart.vue'
-const leftTitle = [ {
+import StationManagementService from '../services/stationManagement.service'
+const leftTitle: Ref<any[]> = ref([ {
   name: '类型分布',
   name: '类型分布',
   option: {
   option: {
     color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
     color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
@@ -280,28 +248,25 @@ const leftTitle = [ {
         fontSize: 16
         fontSize: 16
       }
       }
     },
     },
-    series: [
-      {
-        type: 'pie',
-        radius: [ '55%', '75%' ],
-        label: {
-          show: true,
-          color: '#fff',
-          formatter: '{b}: {c}个',
-          fontSize: 14
-        },
-        data: [
-          { value: 1048, name: '首末班' },
-          { value: 735, name: '枢纽站' },
-          { value: 580, name: '停车场' },
-          { value: 580, name: '保养场' }
-
-        ]
-
-      }
-    ]
+    series: {
+      type: 'pie',
+      radius: [ '55%', '75%' ],
+      label: {
+        show: true,
+        color: '#fff',
+        formatter: '{b}: {c}个',
+        fontSize: 14
+      },
+      data: [
+        { value: 1048, name: '首末班' },
+        { value: 735, name: '枢纽站' },
+        { value: 580, name: '停车场' },
+        { value: 580, name: '保养场' }
+      ]
+    }
   }
   }
-}, {
+},
+{
   name: '面积分布',
   name: '面积分布',
   option: {
   option: {
     color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
     color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
@@ -317,29 +282,26 @@ const leftTitle = [ {
         fontSize: 16
         fontSize: 16
       }
       }
     },
     },
-    series: [
-      {
-        type: 'pie',
-        radius: '70%',
-        label: {
-          show: true,
-          color: '#fff',
-          formatter: '{b}: {c}个',
-          fontSize: 14
-        },
-        data: [
-          { value: 1048, name: '<=500m' },
-          { value: 735, name: '500~2000' },
-          { value: 580, name: '2000~5000' },
-          { value: 580, name: '5000~10000' }
-
-        ]
-
-      }
-    ]
+    series: {
+      type: 'pie',
+      radius: '70%',
+      label: {
+        show: true,
+        color: '#fff',
+        formatter: '{b}: {c}个',
+        fontSize: 14
+      },
+      data: [
+        { value: 1048, name: '<=500m' },
+        { value: 735, name: '500~2000' },
+        { value: 580, name: '2000~5000' },
+        { value: 580, name: '5000~10000' }
+      ]
+    }
   }
   }
-}, {
-  name: '战场权属分布',
+},
+{
+  name: '场站权属情况',
   option: {
   option: {
     color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
     color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
     tooltip: {
     tooltip: {
@@ -354,31 +316,27 @@ const leftTitle = [ {
         fontSize: 16
         fontSize: 16
       }
       }
     },
     },
-    series: [
-      {
-        type: 'pie',
-        radius: '70%',
-        label: {
-          show: true,
-          color: '#fff',
-          formatter: '{b}: {c}个',
-          fontSize: 14
-        },
-        data: [
-          { value: 1048, name: '自有' },
-          { value: 735, name: '临时使用' },
-          { value: 580, name: '先借后租' },
-          { value: 580, name: '租用' }
-
-        ]
-
-      }
-    ]
+    series: {
+      type: 'pie',
+      radius: '70%',
+      label: {
+        show: true,
+        color: '#fff',
+        formatter: '{b}: {c}个',
+        fontSize: 14
+      },
+      data: [
+        { value: 1048, name: '自有' },
+        { value: 735, name: '临时使用' },
+        { value: 580, name: '先借后租' },
+        { value: 580, name: '租用' }
+      ]
+    }
   }
   }
-}, {
+},
+{
   name: '建设时间',
   name: '建设时间',
   option: {
   option: {
-
     tooltip: {
     tooltip: {
       trigger: 'axis',
       trigger: 'axis',
       axisPointer: {
       axisPointer: {
@@ -396,94 +354,84 @@ const leftTitle = [ {
       textStyle: {
       textStyle: {
         color: '#fff'
         color: '#fff'
       }
       }
+    },
+    xAxis: {
+      type: 'category',
+      data: [ '超过十年', '5-7年', '近3年', '3-5年' ],
+      axisLabel: {
+        color: '#fff',
 
 
+        fontSize: 16
+      },
+      axisTick: {
+        alignWithLabel: true
+      },
+      splitLine: {
+        show: false
+      }
     },
     },
-    xAxis: [
-      {
-        type: 'category',
-        data: [ '超过十年', '5-7年', '近3年', '3-5年' ],
-        axisLabel: {
-          color: '#fff',
-
-          fontSize: 16
-        },
-        axisTick: {
-          alignWithLabel: true
-        },
-        splitLine: {
-          show: false
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        color: '#fff'
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgb(34,43,57)'
         }
         }
       }
       }
-    ],
-    yAxis: [
-      {
-        type: 'value',
-        axisLabel: {
-          color: '#fff'
-        },
-        splitLine: {
-          show: true,
-          lineStyle: {
-            color: 'rgb(34,43,57)'
-          }
+    },
+    series: {
+      name: '数量',
+      type: 'bar',
+      barWidth: '40',
+      itemStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [ {
+            offset: 0, color: '#00fdff' // 0% 处的颜色
+          }, {
+            offset: 1, color: '#00aaff08' // 100% 处的颜色
+          } ],
+          global: false // 缺省为 false
         }
         }
-      }
-    ],
-    series: [
-      {
-        name: '数量',
-        type: 'bar',
-        barWidth: '40%',
-        itemStyle: {
-          color: {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [ {
-              offset: 0, color: '#00fdff' // 0% 处的颜色
-            }, {
-              offset: 1, color: '#00aaff08' // 100% 处的颜色
-            } ],
-            global: false // 缺省为 false
-          }
-        },
-        data: [ 10, 52, 200, 334, 390, 330, 220 ]
-      }
-
-    ]
+      },
+      data: [ 10, 52, 200, 334, 390, 330, 220 ]
+    }
   }
   }
-} ]
+} ])
 // 区域分布
 // 区域分布
-const option = {
-
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      type: 'shadow'
-    }
-  },
-  grid: {
-    left: '1%',
-    right: '4%',
-    bottom: '3%',
-    containLabel: true
-  },
-  legend: {
-    show: false,
-    textStyle: {
-      color: '#fff'
-    }
-
-  },
-  yAxis: [
-    {
+const region = ref({
+  total: 40,
+  option: {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    grid: {
+      left: '1%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    legend: {
+      show: false,
+      textStyle: {
+        color: '#fff'
+      }
+    },
+    yAxis: {
       type: 'category',
       type: 'category',
       data: [ '吊挂式', '独立式', '嵌入式' ],
       data: [ '吊挂式', '独立式', '嵌入式' ],
       axisLabel: {
       axisLabel: {
         color: '#fff',
         color: '#fff',
-
         fontSize: 16
         fontSize: 16
       },
       },
       axisTick: {
       axisTick: {
@@ -492,10 +440,8 @@ const option = {
       splitLine: {
       splitLine: {
         show: false
         show: false
       }
       }
-    }
-  ],
-  xAxis: [
-    {
+    },
+    xAxis: {
       type: 'value',
       type: 'value',
       axisLabel: {
       axisLabel: {
         color: '#fff'
         color: '#fff'
@@ -507,13 +453,11 @@ const option = {
           color: 'rgb(34,43,57)'
           color: 'rgb(34,43,57)'
         }
         }
       }
       }
-    }
-  ],
-  series: [
-    {
+    },
+    series: {
       name: '数量',
       name: '数量',
       type: 'bar',
       type: 'bar',
-      barWidth: '40%',
+      barWidth: '40',
       itemStyle: {
       itemStyle: {
         color: 'rgb(86,137,239)',
         color: 'rgb(86,137,239)',
         barBorderRadius: [ 0, 20, 20, 0 ]
         barBorderRadius: [ 0, 20, 20, 0 ]
@@ -525,10 +469,10 @@ const option = {
       },
       },
       data: [ 10, 52, 200, 334, 390, 330, 220 ]
       data: [ 10, 52, 200, 334, 390, 330, 220 ]
     }
     }
+  }
+})
 
 
-  ]
-}
-const powerChart = {
+const powerChart = ref({
   tooltip: {
   tooltip: {
     trigger: 'axis'
     trigger: 'axis'
   },
   },
@@ -537,7 +481,6 @@ const powerChart = {
     boundaryGap: false,
     boundaryGap: false,
     axisLabel: {
     axisLabel: {
       color: '#fff',
       color: '#fff',
-
       fontSize: 16
       fontSize: 16
     },
     },
     data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
     data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
@@ -560,31 +503,29 @@ const powerChart = {
     show: true,
     show: true,
     type: 'slider'
     type: 'slider'
   },
   },
-  series: [
-    {
-      data: [ 820, 932, 901, 934, 1290, 1330, 1320 ],
-      type: 'line',
-      areaStyle: {
-        color: {
-          type: 'linear',
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [ {
-            offset: 0, color: '#FFD35D ' // 0% 处的颜色
-          }, {
-            offset: 0.5, color: '#7ec2f3 ' // 100% 处的颜色
-          }, {
-            offset: 1, color: '#1890ff ' // 100% 处的颜色
-          } ],
-          global: false // 缺省为 false
-        }
+  series: {
+    data: [ 820, 932, 901, 934, 1290, 1330, 1320 ],
+    type: 'line',
+    areaStyle: {
+      color: {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [ {
+          offset: 0, color: '#FFD35D ' // 0% 处的颜色
+        }, {
+          offset: 0.5, color: '#7ec2f3 ' // 100% 处的颜色
+        }, {
+          offset: 1, color: '#1890ff ' // 100% 处的颜色
+        } ],
+        global: false // 缺省为 false
       }
       }
     }
     }
-  ]
-}
-const airportChart = {
+  }
+})
+const airportChart = ref({
   color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
   color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
   tooltip: {
   tooltip: {
     trigger: 'item'
     trigger: 'item'
@@ -598,50 +539,213 @@ const airportChart = {
       fontSize: 16
       fontSize: 16
     }
     }
   },
   },
-  series: [
-    {
-      type: 'pie',
-      radius: [ '55%', '75%' ],
-      label: {
-        show: true,
-        color: '#fff',
-        formatter: '{b}: {c}个',
-        fontSize: 14
-      },
-      data: [
-        { value: 1048, name: '<=500m' },
-        { value: 735, name: '500~2000' },
-        { value: 580, name: '2000~5000' },
-        { value: 580, name: '5000~10000' }
+  series: {
+    type: 'pie',
+    radius: [ '55%', '75%' ],
+    label: {
+      show: true,
+      color: '#fff',
+      formatter: '{b}: {c}个',
+      fontSize: 14
+    },
+    data: [
+      { value: 1048, name: '<=500m' },
+      { value: 735, name: '500~2000' },
+      { value: 580, name: '2000~5000' },
+      { value: 580, name: '5000~10000' }
 
 
-      ]
+    ]
 
 
-    }
-  ]
+  }
+})
+const originData = ref([ {
+  admissionRate: 0,
+  stationName: 'xxx'
+} ])
+const type = ref('admissionRate')
+const typeMap = {
+  admissionRate: '各场站入场率',
+  chargingCapacity: '各充电场站充电量',
+  maintenanceNum: '各维保场维修保养车辆数',
+  usageRate: '运维驿站使用率'
+}
+const tableData = computed(() => originData.value.map((item:any) => ({
+  stationName: item.stationName,
+  rate: item[type.value]
+})))
+const columns = [
+  {
+    title: '序号',
+    render: (_: any, rowIndex: number) => h('span', rowIndex + 1)
+  },
+  {
+    title: '场站',
+    key: 'stationName'
+  },
+  {
+    title: '入场率',
+    key: 'rate'
+  } ]
+
+const stationManagementService = new StationManagementService()
+
+async function getStationRegion() {
+  const res = await stationManagementService.getStationRegion()
+  const yData = []
+  const seriesData = []
+  let total = 0
+
+  for (let i = 0; i < res.length; i++) {
+    const item = res[i]
+    yData.push(item.region)
+    seriesData.push(item.passengerFlow)
+    total += item.passengerFlow
+  }
+
+  region.value.option.yAxis.data = yData
+  region.value.option.series.data = seriesData
+  region.value.total = total
+}
+getStationRegion()
+
+const typeTotal = ref(0)
+async function getStationTypes() {
+  const res = await stationManagementService.getStationTypes()
+  const seriesData = []
+  let total = 0
+
+  for (let i = 0; i < res.length; i++) {
+    const item = res[i]
+    seriesData.push({
+      name: item.type,
+      value: item.number
+    })
+    total += item.number
+  }
+  leftTitle.value[0].option.series.data = seriesData
+  typeTotal.value = total
 }
 }
-const data = [
-  { no: 3, title: 'Wonderwall', length: '4:18' },
-  { no: 4, title: "Don't Look Back in Anger", length: '4:48' },
-  { no: 12, title: 'Champagne Supernova', length: '7:27' },
-  { no: 12, title: 'Champagne Supernova', length: '7:27' },
-  { no: 12, title: 'Champagne Supernova', length: '7:27' },
-  { no: 12, title: 'Champagne Supernova', length: '7:27' },
-  { no: 12, title: 'Champagne Supernova', length: '7:27' },
-  { no: 12, title: 'Champagne Supernova', length: '7:27' },
-  { no: 12, title: 'Champagne Supernova', length: '7:27' },
-  { no: 12, title: 'Champagne Supernova', length: '7:27' },
-  { no: 12, title: 'Champagne Supernova', length: '7:27' }
-]
-const columns = [ {
-  title: '序号',
-  key: 'no'
-}, {
-  title: '场站',
-  key: 'title'
-}, {
-  title: '入场率',
-  key: 'length'
-} ]
+getStationTypes()
+async function getStationArea() {
+  const res = await stationManagementService.getStationArea()
+  const seriesData = []
+  let total = 0
+
+  for (let i = 0; i < res.length; i++) {
+    const item = res[i]
+    seriesData.push({
+      name: item.areaType,
+      value: item.number
+    })
+    total += item.number
+  }
+  leftTitle.value[1].option.series.data = seriesData
+  typeTotal.value = total
+}
+getStationArea()
+async function getStationOwnership() {
+  const res = await stationManagementService.getStationOwnership()
+  const seriesData = []
+  let total = 0
+
+  for (let i = 0; i < res.length; i++) {
+    const item = res[i]
+    seriesData.push({
+      name: item.ownership,
+      value: item.number
+    })
+    total += item.number
+  }
+  leftTitle.value[2].option.series.data = seriesData
+  typeTotal.value = total
+}
+getStationOwnership()
+async function getStationConstruct() {
+  const res = await stationManagementService.getStationConstruct()
+  const xData = []
+  const seriesData = []
+
+  for (let i = 0; i < res.length; i++) {
+    const item = res[i]
+    xData.push(item.constructSituation)
+    seriesData.push(item.number)
+  }
+  leftTitle.value[3].option.xAxis.data = seriesData
+  leftTitle.value[3].option.series.data = seriesData
+}
+getStationConstruct()
+
+const useData = ref([] as any[])
+async function getStationUse() {
+  useData.value = await stationManagementService.getStationUse()
+}
+getStationUse()
+
+const operateData = ref([] as any[])
+async function getStationOperate() {
+  operateData.value = await stationManagementService.getStationOperate()
+}
+getStationOperate()
+
+async function getStationChargingTrends() {
+  const res = await stationManagementService.getStationChargingTrends()
+  const xData = []
+  const seriesData = []
+
+  for (let i = 0; i < res.length; i++) {
+    const item = res[i]
+    xData.push(item.time.slice(11))
+    seriesData.push(item.number)
+  }
+  powerChart.value.xAxis.data = xData
+  powerChart.value.series.data = seriesData
+}
+getStationChargingTrends()
+
+const installedCapacityTotal = ref(0)
+async function getStationInstalledCapacity() {
+  const res = await stationManagementService.getStationInstalledCapacity()
+  const seriesData = []
+  let total = 0
+
+  for (let i = 0; i < res.length; i++) {
+    const item = res[i]
+    seriesData.push({
+      name: item.type,
+      value: item.number
+    })
+    total += item.number
+  }
+  airportChart.value.series.data = seriesData
+  installedCapacityTotal.value = total
+}
+getStationInstalledCapacity()
+
+const chargingStatus = ref([
+  { chargingStatus: '空闲', number: 0 },
+  { chargingStatus: '充满', number: 0 },
+  { chargingStatus: '在充', number: 0 },
+  { chargingStatus: '故障', number: 0 }
+])
+async function getStationChargingStatus() {
+  const res = await stationManagementService.getStationChargingStatus()
+}
+getStationChargingStatus()
+
+const chargingStatistics = ref({
+  chargingNum: 1,
+  totalChargingNum: 2,
+  electricityNum: 1,
+  totalElectricityNum: 1
+})
+async function getStationChargingStatistics() {
+  chargingStatistics.value = await stationManagementService.getStationChargingStatistics()
+}
+getStationChargingStatistics()
+async function getStationResourceRate() {
+  originData.value = await stationManagementService.getStationResourceRate()
+}
+getStationResourceRate()
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
@@ -896,6 +1000,7 @@ const columns = [ {
     .btn {
     .btn {
       display: flex;
       display: flex;
       flex-wrap: wrap;
       flex-wrap: wrap;
+
       // justify-content: space-between;
       // justify-content: space-between;
       li {
       li {
 
 
@@ -903,9 +1008,12 @@ const columns = [ {
         border-radius: 100px;
         border-radius: 100px;
         border: 1px solid #80FFFF;
         border: 1px solid #80FFFF;
         padding: 0 10px;
         padding: 0 10px;
-        margin:  10px;
+        margin: 10px;
         font-size: 20px;
         font-size: 20px;
         cursor: pointer;
         cursor: pointer;
+        &.active{
+          background: #2f64aa;
+        }
 
 
       }
       }
     }
     }

+ 124 - 0
src/pages/views/home/services/stationManagement.service.ts

@@ -0,0 +1,124 @@
+import NetService from '@/services/net.service'
+import { injectable, Service } from '@/services/service'
+
+@injectable
+export default class StationManagementService extends Service {
+  private netService = new NetService()
+
+  /** 区域分布  /getStationRegion   */
+  async getStationRegion() {
+    const { success, data } = await this.netService.get('/getStationRegion')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 类型分布  /getStationTypes   */
+  async getStationTypes() {
+    const { success, data } = await this.netService.get('/getStationTypes')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 面积分布  /getStationArea   */
+  async getStationArea() {
+    const { success, data } = await this.netService.get('/getStationArea')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 场站权属情况  /getStationOwnership   */
+  async getStationOwnership() {
+    const { success, data } = await this.netService.get('/getStationOwnership')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 建设时间  /getStationConstruct   */
+  async getStationConstruct() {
+    const { success, data } = await this.netService.get('/getStationConstruct')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 使用情况  /getStationUse   */
+  async getStationUse() {
+    const { success, data } = await this.netService.get('/getStationUse')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 运营保障  /getStationOperate   */
+  async getStationOperate() {
+    const { success, data } = await this.netService.get('/getStationOperate')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 充电趋势  /getStationChargingTrends   */
+  async getStationChargingTrends() {
+    const { success, data } = await this.netService.get('/getStationChargingTrends')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 场站装机容量  /getStationInstalledCapacity   */
+  async getStationInstalledCapacity() {
+    const { success, data } = await this.netService.get('/getStationInstalledCapacity')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 充电桩服务情况  /getStationChargingStatus   */
+  async getStationChargingStatus() {
+    const { success, data } = await this.netService.get('/getStationChargingStatus')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 今日充电统计  /getStationChargingStatistics   */
+  async getStationChargingStatistics() {
+    const { success, data } = await this.netService.get('/getStationChargingStatistics')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 资源使用率  /getStationResourceRate   */
+  async getStationResourceRate() {
+    const { success, data } = await this.netService.get('/getStationResourceRate')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 场站管理地图统计数据配置  /getStationStatistics   */
+  async getStationStatistics() {
+    const { success, data } = await this.netService.get('/getStationStatistics')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+}