新增场站管理

src/components/chart.vue

@@ -15,20 +15,20 @@ const props = defineProps<{
     option: Echarts.EChartsOption | any
 }>()
 const chart = ref()
-const myChart = ref()
+let myChart = null as any
 
 nextTick(() => {
-  myChart.value = Echarts.init(chart.value)
+  myChart = Echarts.init(chart.value)
 })
 
 watch(() => props.option, (v) => {
   nextTick(() => {
-    myChart.value.setOption(v)
+    myChart.setOption(v)
   })
 }, { deep: true, immediate: true })
 
 onUnmounted(() => {
-  if (myChart.value) myChart.value.dispose()
+  if (myChart) myChart.dispose()
 })
 </script>
 

src/pages/views/home/components/FacilityManagement.vue

@@ -66,7 +66,7 @@
         <Box
           :width="1380"
           :height="353"
-          name="线路基本情况"
+          name="电子站牌"
           style="margin-top: 22px;"
         >
           <div class="plate">
@@ -677,7 +677,7 @@ function setWasher() {
         label: {
           show: true,
           color: '#fff',
-          formatter: '{b}: {d}个',
+          formatter: '{b}: {c}个',
           fontSize: 14
         },
         data: [
@@ -755,7 +755,7 @@ function setPower() {
         label: {
           show: true,
           color: '#fff',
-          formatter: '{b}: {d}个',
+          formatter: '{b}: {c}个',
           fontSize: 14
         },
         data: [

src/pages/views/home/components/StationManagement.vue

@@ -1,22 +1,869 @@
 <template>
   <Layout>
     <template #left>
-      <div>666</div>
+      <div class="left">
+        <Box
+          :width="665"
+          :height="396"
+          :name="'安全行驶'"
+          style="margin-bottom: 25px;"
+        >
+          <div class="body">
+            <div class="total">
+              <img
+                src="../../../../assets/img/1-1.png"
+                alt=""
+              >
+              <p>40</p>
+              <div>总量</div>
+            </div>
+            <Echart :option="option" />
+          </div>
+        </Box>
+        <Box
+          v-for="item in leftTitle"
+          :key="item.name"
+          :width="665"
+          :height="396"
+          :name="item.name"
+          style="margin-bottom: 25px;"
+        >
+          <div class="body">
+            <div
+              v-if="item.name === '类型分布'"
+              class="text"
+            >
+              站场总数
+              <p>100</p>
+            </div>
+            <Echart
+              v-if="item.option"
+              :option="item.option"
+            />
+          </div>
+        </Box>
+        <Box
+          :width="665"
+          :height="396"
+          :name="'使用情况'"
+        >
+          <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">
+              <img
+                src="../../../../assets/img/1-1.png"
+                alt=""
+              >
+              <div class="value">
+                0
+              </div>
+              <p>使用</p>
+            </div>
+          </div>
+        </Box>
+      </div>
     </template>
     <template #center>
       <div>666</div>
     </template>
     <template #right>
-      <div>666</div>
+      <div class="right">
+        <Box
+          :width="1340"
+          :height="393"
+          :name="'运营保障'"
+          style="margin-bottom: 23px;"
+        >
+          <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 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>
+        </Box>
+        <div class="chart-box">
+          <Box
+            :width="665"
+            :height="396"
+            :name="'充电趋势'"
+          >
+            <div class="contet">
+              <div class="title">
+                充电量\kw.h
+              </div>
+              <div class="chart">
+                <Echart :option="powerChart" />
+              </div>
+            </div>
+          </Box>
+          <Box
+            :width="665"
+            :height="396"
+            :name="'机场装机容量'"
+          >
+            <div class="airport">
+              <div class="text">
+                站场总数
+                <p>100</p>
+              </div>
+              <Echart :option="airportChart" />
+            </div>
+          </Box>
+        </div>
+        <div class="chart-box">
+          <Box
+            :width="665"
+            :height="396"
+            :name="'充电桩服务情况'"
+          >
+            <ul class="hd">
+              <li
+                v-for="item in 4"
+                :key="item"
+              >
+                <img
+                  src="../../../../assets/img/1-1.png"
+                  alt=""
+                >
+                <div class="txt">
+                  <p>100</p>
+                  <div>进厂车次</div>
+                </div>
+              </li>
+            </ul>
+            <ul class="percentage">
+              <li>
+                <div class="tt">
+                  <p>今日充电车次</p>
+                  <div>73 <span>/100</span> </div>
+                </div>
+                <n-progress
+                  type="line"
+                  :percentage="60"
+                  :show-indicator="false"
+                  :indicator-placement="'inside'"
+                  processing
+                  :stroke-width="15"
+                />
+              </li>
+              <li>
+                <div class="tt">
+                  <p>今日充电电量 kw.h</p>
+                  <div>73 <span>/100</span> </div>
+                </div>
+                <n-progress
+                  type="line"
+                  :percentage="60"
+                  :show-indicator="false"
+                  :indicator-placement="'inside'"
+                  processing
+                  :stroke-width="15"
+                />
+              </li>
+            </ul>
+          </Box>
+          <Box
+            :width="665"
+            :height="396"
+            :name="'资源使用率'"
+          >
+            <ul class="btn">
+              <li>各场站入场率</li>
+              <li>各充电场站充电量</li>
+              <li>各维保场维修保养车辆数</li>
+              <li>运维驿站使用率</li>
+            </ul>
+          </Box>
+        </div>
+      </div>
     </template>
   </Layout>
 </template>
 
 <script setup lang='ts'>
 import Layout from '@/components/layout.vue'
+import Box from '@/components/box.vue'
+import { ref } from 'vue'
+import Echart from '@/components/chart.vue'
+const leftTitle = [ {
+  name: '类型分布',
+  option: {
+    color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      orient: 'horizontal',
+      bottom: '0',
+      icon: 'circle',
+      textStyle: {
+        color: '#fff',
+        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: '保养场' }
+
+        ]
+
+      }
+    ]
+  }
+}, {
+  name: '面积分布',
+  option: {
+    color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      orient: 'horizontal',
+      bottom: '0',
+      icon: 'circle',
+      textStyle: {
+        color: '#fff',
+        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' }
+
+        ]
+
+      }
+    ]
+  }
+}, {
+  name: '战场权属分布',
+  option: {
+    color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      orient: 'horizontal',
+      bottom: '0',
+      icon: 'circle',
+      textStyle: {
+        color: '#fff',
+        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: '租用' }
+
+        ]
+
+      }
+    ]
+  }
+}, {
+  name: '建设时间',
+  option: {
+
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    grid: {
+      left: '1%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    legend: {
+      show: true,
+      textStyle: {
+        color: '#fff'
+      }
+
+    },
+    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)'
+          }
+        }
+      }
+    ],
+    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 ]
+      }
+
+    ]
+  }
+} ]
+// 区域分布
+const 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',
+      data: [ '吊挂式', '独立式', '嵌入式' ],
+      axisLabel: {
+        color: '#fff',
+
+        fontSize: 16
+      },
+      axisTick: {
+        alignWithLabel: true
+      },
+      splitLine: {
+        show: false
+      }
+    }
+  ],
+  xAxis: [
+    {
+      type: 'value',
+      axisLabel: {
+        color: '#fff'
+      },
+
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgb(34,43,57)'
+        }
+      }
+    }
+  ],
+  series: [
+    {
+      name: '数量',
+      type: 'bar',
+      barWidth: '40%',
+      itemStyle: {
+        color: 'rgb(86,137,239)',
+        barBorderRadius: [ 0, 20, 20, 0 ]
+      },
+      label: {
+        show: true,
+        position: 'inside',
+        color: '#fff'
+      },
+      data: [ 10, 52, 200, 334, 390, 330, 220 ]
+    }
+
+  ]
+}
+const powerChart = {
+  tooltip: {
+    trigger: 'axis'
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    axisLabel: {
+      color: '#fff',
 
+      fontSize: 16
+    },
+    data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgb(34,43,57)'
+      }
+    },
+    axisLabel: {
+      color: '#fff',
+
+      fontSize: 16
+    }
+  },
+  dataZoom: {
+    show: true,
+    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
+        }
+      }
+    }
+  ]
+}
+const airportChart = {
+  color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    orient: 'horizontal',
+    bottom: '0',
+    icon: 'circle',
+    textStyle: {
+      color: '#fff',
+      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' }
+
+      ]
+
+    }
+  ]
+}
 </script>
 
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
+.left {
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  .usage {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    padding: 0 120px;
+    justify-content: space-between;
+    align-items: center;
+
+    .list {
+      text-align: center;
+
+      img {
+        width: 80px;
+        height: 80px;
+      }
+
+      .value {
+        color: #00FFFF;
+        font-size: 50px;
+
+      }
+
+      p {
+        font-size: 24px;
+      }
+    }
+
+  }
+
+  .body {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    position: relative;
+
+    .total {
+      width: 136px;
+      text-align: center;
+
+      img {
+        margin-top: 80px;
+
+        width: 100px;
+        height: 100px;
+      }
+
+      p {
+        font-size: 60px;
+      }
+
+      div {
+        font-size: 24px;
+      }
+    }
+
+    .plot {
+      flex: 1;
+    }
+
+    .text {
+      position: absolute;
+      left: 42%;
+      top: 40%;
+      font-size: 28px;
+      text-align: center;
+    }
+
+  }
+
+}
+
+.right {
+  width: 1340px;
+  color: #fff;
+
+  ul {
+    margin: 0;
+    padding: 0;
+
+    li {
+      list-style: none;
+    }
+  }
+
+  .commercial {
+    display: flex;
+    justify-content: space-between;
+
+    .commercial-vehicles {
+      width: 49%;
+
+      .title {
+        color: #F59A23;
+        font-size: 24px;
+        line-height: 74px;
+        text-indent: 10px;
+      }
+
+      .list {
+        width: 33.33333%;
+        border: 1px solid rgba(0, 255, 255, 0.298);
+        height: 137px;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        div {
+          font-size: 50px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          span {
+            font-size: 20px;
+            line-height: 50px;
+            margin-left: 10px;
+            color: #fff;
+          }
+        }
+
+        p {
+          color: #80FFFF;
+        }
+      }
+
+      .top {
+        display: flex;
+      }
+
+      .bottom {
+        display: flex;
+
+        .list {
+          width: 50%;
+        }
+      }
+
+    }
+  }
+
+  .chart-box {
+    display: flex;
+    justify-content: space-between;
+
+    .airport {
+      width: 100%;
+      height: 100%;
+      position: relative;
+
+      .text {
+        position: absolute;
+        left: 42%;
+        top: 40%;
+        font-size: 28px;
+        text-align: center;
+      }
+    }
+
+    .contet {
+      width: 100%;
+      height: 100%;
+      display: flex;
+
+      .title {
+        font-size: 16px;
+        writing-mode: vertical-lr;
+        /* 从上到下排列，默认为从左到右 */
+        text-orientation: sideways;
+        transform: rotate(180deg);
+        text-align: center;
+        height: 100%;
+      }
+
+      .chart {
+        flex: 1;
+      }
+    }
+
+    .hd {
+      display: flex;
+      margin-top: 18px;
+      li {
+        display: flex;
+        width: 25%;
+        height: 137px;
+        border: 1px solid rgba(0, 255, 255, 0.298);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        img {
+          width: 40px;
+          height: 40px;
+        }
+
+        .txt {
+          margin-left: 10px;
+
+          p {
+
+            font-size: 26px;
+            line-height: 40px;
+          }
+
+          div {
+            font-size: 18px;
+            color: #80FFFF;
+          }
+        }
+      }
+
+    }
+
+    .percentage {
+      padding-right: 40px;
+
+      li {
+        margin-top: 30px;
+        .tt {
+          display: flex;
+          justify-content: space-between;
+          line-height: 40px;
+          font-size: 20px;
+          margin-bottom: 10px;
+          div {
+            font-size: 34px;
+            color: #80FFFF;
+
+            span {
+              font-size: 24px;
+              color: #fff;
+            }
+          }
 
-  </style>
+        }
+      }
+    }
+  }
+}
+</style>