完成设施管理页面

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

@@ -1,22 +1,1101 @@
 <template>
   <Layout>
     <template #left>
-      <div>555</div>
+      <div class="left">
+        <Box
+          :width="1340"
+          :height="353"
+          name="线路基本情况"
+        >
+          <div class="title">
+            设备数量
+          </div>
+          <div
+            ref="deviceNumber"
+            class="chart"
+          />
+          <div class="bar">
+            <div class="bar-box">
+              <div
+                ref="deviceValue"
+                class="bar-chart"
+              />
+              <div class="ct">
+                <p>完好度</p>
+                <div>100.00%</div>
+              </div>
+            </div>
+
+            <div class="value">
+              <p>全部 <span>500</span></p>
+              <p>完好 <span>500</span></p>
+            </div>
+          </div>
+        </Box>
+        <Box
+          :width="1340"
+          :height="353"
+          name="车型展示"
+          style="margin-top: 52px;"
+        >
+          <div class="title">
+            数量/辆
+          </div>
+          <div
+            ref="carNumber"
+            class="chart"
+          />
+          <div class="bar">
+            <div class="bar-box">
+              <div
+                ref="carValue"
+                class="bar-chart"
+              />
+              <div class="ct">
+                <p>完好度</p>
+                <div>100.00%</div>
+              </div>
+            </div>
+
+            <div class="value">
+              <p>全部 <span>500</span></p>
+              <p>完好 <span>500</span></p>
+            </div>
+          </div>
+        </Box>
+        <Box
+          :width="1340"
+          :height="353"
+          name="线路基本情况"
+          style="margin-top: 52px;"
+        >
+          <div class="plate">
+            <div
+              ref="plantNumber"
+              class="chart"
+            />
+            <p>数量/座</p>
+          </div>
+          <div class="bar">
+            <div class="bar-box">
+              <div
+                ref="plantValue"
+                class="bar-chart"
+              />
+              <div class="ct">
+                <p>完好度</p>
+                <div>100.00%</div>
+              </div>
+            </div>
+
+            <div class="value">
+              <p>全部 <span>500</span></p>
+              <p>完好 <span>500</span></p>
+            </div>
+          </div>
+        </Box>
+      </div>
     </template>
     <template #center>
       <div>555</div>
     </template>
     <template #right>
-      <div>555</div>
+      <div class="right">
+        <Box
+          :width="1340"
+          :height="353"
+          name="洗车机"
+        >
+          <div class="bar">
+            <div class="bar-box">
+              <div
+                ref="washerBar1"
+                class="bar-chart"
+              />
+              <div class="ct">
+                <p>完好度</p>
+                <div>100.00%</div>
+              </div>
+            </div>
+
+            <div class="value">
+              <p>全部 <span>500</span></p>
+              <p>完好 <span>500</span></p>
+            </div>
+          </div>
+          <div class="content">
+            <div class="value">
+              <p
+                v-for="item in 6"
+                :key="item"
+              >
+                1
+              </p>
+            </div>
+            <div class="name">
+              累计洗车数
+            </div>
+          </div>
+          <div class="bar2">
+            <div class="value">
+              洗车机机年龄分布
+            </div>
+            <div
+              ref="washerBar2"
+              class="chart"
+            />
+          </div>
+        </Box>
+        <Box
+          :width="1340"
+          :height="353"
+          name="充电站"
+          style="margin-top: 52px;"
+        >
+          <div class="bar">
+            <div class="bar-box">
+              <div
+                ref="powerBar1"
+                class="bar-chart"
+              />
+              <div class="ct">
+                <p>完好度</p>
+                <div>100.00%</div>
+              </div>
+            </div>
+
+            <div class="value">
+              <p>全部 <span>500</span></p>
+              <p>完好 <span>500</span></p>
+            </div>
+          </div>
+          <div class="content">
+            <div class="value">
+              <p
+                v-for="item in 6"
+                :key="item"
+              >
+                1
+              </p>
+            </div>
+            <div class="name">
+              累计洗车数
+            </div>
+          </div>
+          <div class="bar2">
+            <div class="value">
+              充电设备分布
+            </div>
+            <div
+              ref="powerBar2"
+              class="chart"
+            />
+          </div>
+        </Box>
+        <Box
+          :width="1340"
+          :height="353"
+          name="充电站"
+          style="margin-top: 52px;"
+        >
+          <div class="bar">
+            <div class="bar-box">
+              <div
+                ref="vehiclePie"
+                class="bar-chart"
+              />
+              <div class="ct">
+                <p>完好度</p>
+                <div>100.00%</div>
+              </div>
+            </div>
+
+            <div class="value">
+              <p>全部 <span>500</span></p>
+              <p>完好 <span>500</span></p>
+            </div>
+          </div>
+          <div class="vehicle">
+            <div class="title">
+              设备数量
+            </div>
+            <div
+              ref="vehicleBar"
+              class="vehicle-chart "
+            />
+          </div>
+        </Box>
+      </div>
     </template>
   </Layout>
 </template>
 
 <script setup lang='ts'>
 import Layout from '@/components/layout.vue'
+import Box from '@/components/box.vue'
+import * as echarts from 'echarts'
+import { ref, nextTick } from 'vue'
+// 设备数量折线图
+const deviceNumber = ref()
+// 设备数量饼图
+const deviceValue = ref()
+// 设备数量饼图和折线图
+function setDevice() {
+  // 折线图
+  const option = {
+    color: [ 'rgb(91,143,249)', 'rgb(90,216,166)', 'rgb(93,112,146)', 'rgb(246,189,22)', 'rgb(111,94,249)' ],
+    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: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],
+        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%',
+        stack: 'total',
+        data: [ 10, 52, 200, 334, 390, 330, 220 ]
+      },
+      {
+        name: '电子站牌',
+        type: 'bar',
+        barWidth: '40%',
+        stack: 'total',
+        data: [ 10, 52, 200, 334, 390, 330, 220 ]
+      },
+      {
+        name: '洗车机',
+        type: 'bar',
+        barWidth: '40%',
+        stack: 'total',
+        data: [ 10, 52, 200, 334, 390, 330, 220 ]
+      },
+      {
+        name: '充电桩',
+        type: 'bar',
+        barWidth: '40%',
+        stack: 'total',
+        data: [ 10, 52, 200, 334, 390, 330, 220 ]
+      },
+      {
+        name: '车载部件',
+        type: 'bar',
+        barWidth: '40%',
+        stack: 'total',
+        data: [ 10, 52, 200, 334, 390, 330, 220 ]
+      }
+    ]
+  }
+  const mychart = echarts.init(deviceNumber.value)
+  mychart.setOption(option)
+  // 柱状图
+  const pieOption = {
+    tooltip: {
+      trigger: 'item'
+    },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: [ '65%', '85%' ],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: false,
+            fontSize: 40,
+            fontWeight: 'bold'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: [
+          { value: 1048, name: 'Search Engine' },
+          { value: 735, name: 'Direct' }
+
+        ]
+      }
+    ]
+  }
+  const pieChart = echarts.init(deviceValue.value)
+  pieChart.setOption(pieOption)
+}
+// 线路柱状图
+const carNumber = ref()
+// 线路饼图
+const carValue = ref()
+// 设备线路基本情况
+function setLine() {
+  // 折线图
+  const 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: [ 'Wed', '12.8银隆双层观光', '12.8银隆中海豚', 'Thu', 'Fri', 'Sat', 'Sun' ],
+        axisLabel: {
+          color: '#fff',
+          rotate: -45,
+          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 mychart = echarts.init(carNumber.value)
+  mychart.setOption(option)
+  // 柱状图
+  const pieOption = {
+    tooltip: {
+      trigger: 'item'
+    },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: [ '65%', '85%' ],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: false,
+            fontSize: 40,
+            fontWeight: 'bold'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: [
+          { value: 1048, name: 'Search Engine' },
+          { value: 735, name: 'Direct' }
+
+        ]
+      }
+    ]
+  }
+  const pieChart = echarts.init(carValue.value)
+  pieChart.setOption(pieOption)
+}
+
+// 线路柱状图
+const plantNumber = ref()
+// 线路饼图
+const plantValue = ref()
+// 设备线路基本情况
+function setPlant() {
+  // 折线图
+  const option = {
+
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    grid: {
+      left: '1%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    legend: {
+      show: true,
+      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: '50%',
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            colorStops: [ {
+              offset: 0, color: '#6A5BF0' // 0% 处的颜色
+            }, {
+              offset: 1, color: '#00aaff08' // 100% 处的颜色
+            } ],
+            global: false // 缺省为 false
+          }
+        },
+        data: [ 10, 52, 200, 334, 390, 330, 220 ]
+      }
+
+    ]
+  }
+  const mychart = echarts.init(plantNumber.value)
+  mychart.setOption(option)
+  // 柱状图
+  const pieOption = {
+    tooltip: {
+      trigger: 'item'
+    },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: [ '65%', '85%' ],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: false,
+            fontSize: 40,
+            fontWeight: 'bold'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: [
+          { value: 1048, name: 'Search Engine' },
+          { value: 735, name: 'Direct' }
+
+        ]
+      }
+    ]
+  }
+  const pieChart = echarts.init(plantValue.value)
+  pieChart.setOption(pieOption)
+}
+
+// 线路柱状图
+const washerBar1 = ref()
+// 线路饼图
+const washerBar2 = ref()
+// 设备线路基本情况
+function setWasher() {
+  // 第一个饼图
+  const pieOption = {
+    tooltip: {
+      trigger: 'item'
+    },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: [ '65%', '85%' ],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: false,
+            fontSize: 40,
+            fontWeight: 'bold'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: [
+          { value: 1048, name: 'Search Engine' },
+          { value: 735, name: 'Direct' }
+
+        ]
+      }
+    ]
+  }
+  // 第二个饼图
+  const pieChart = echarts.init(washerBar1.value)
+  pieChart.setOption(pieOption)
+  const pieOption2 = {
+    color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)' ],
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      orient: 'horizontal',
+      bottom: '0',
+      icon: 'circle',
+      textStyle: {
+        color: '#fff'
+      }
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: '70%',
+        label: {
+          show: true,
+          color: '#fff',
+          formatter: '{b}: {d}个',
+          fontSize: 14
+        },
+        data: [
+          { value: 1048, name: '0-5年' },
+          { value: 735, name: '6-10年' },
+          { value: 580, name: '11-15年' }
+
+        ]
+
+      }
+    ]
+  }
+  const pieChart2 = echarts.init(washerBar2.value)
+  pieChart2.setOption(pieOption2)
+}
+// 线路柱状图
+const powerBar1 = ref()
+// 线路饼图
+const powerBar2 = ref()
+// 充电站
+function setPower() {
+  // 第一个饼图
+  const pieOption = {
+    tooltip: {
+      trigger: 'item'
+    },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: [ '65%', '85%' ],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: false,
+            fontSize: 40,
+            fontWeight: 'bold'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: [
+          { value: 1048, name: 'Search Engine' },
+          { value: 735, name: 'Direct' }
+
+        ]
+      }
+    ]
+  }
+  // 第二个饼图
+  const pieChart = echarts.init(powerBar1.value)
+  pieChart.setOption(pieOption)
+  const pieOption2 = {
+    color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)' ],
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      orient: 'horizontal',
+      bottom: '0',
+      icon: 'circle',
+      textStyle: {
+        color: '#fff'
+      }
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: '70%',
+        label: {
+          show: true,
+          color: '#fff',
+          formatter: '{b}: {d}个',
+          fontSize: 14
+        },
+        data: [
+          { value: 1048, name: '充电站' },
+          { value: 735, name: '充电桩' },
+          { value: 580, name: '充电枪' }
+
+        ]
+
+      }
+    ]
+  }
+  const pieChart2 = echarts.init(powerBar2.value)
+  pieChart2.setOption(pieOption2)
+}
+
+// 线路柱状图
+const vehicleBar = ref()
+// 线路饼图
+const vehiclePie = ref()
+// 车载部件
+function setVehicle() {
+  // 折线图
+  const 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: [ 'Wed', '12.8银隆双层观光', '12.8银隆中海豚', 'Thu', 'Fri', 'Sat', 'Sun' ],
+        axisLabel: {
+          color: '#fff',
+          rotate: -45,
+          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 mychart = echarts.init(vehicleBar.value)
+  mychart.setOption(option)
+  // 柱状图
+  const pieOption = {
+    tooltip: {
+      trigger: 'item'
+    },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: [ '65%', '85%' ],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: false,
+            fontSize: 40,
+            fontWeight: 'bold'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: [
+          { value: 1048, name: 'Search Engine' },
+          { value: 735, name: 'Direct' }
+
+        ]
+      }
+    ]
+  }
+  const pieChart = echarts.init(vehiclePie.value)
+  pieChart.setOption(pieOption)
+}
+nextTick(() => {
+  setDevice()
+  setLine()
+  setPlant()
+  setWasher()
+  setPower()
+  setVehicle()
+})
 </script>
 
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
+.left {
+  color: #fff;
+
+  :deep(.box-content) {
+    display: flex;
+
+    .title {
+      font-size: 14px;
+      writing-mode: vertical-lr;
+      /* 从上到下排列，默认为从左到右 */
+      text-orientation: sideways;
+      transform: rotate(180deg);
+      text-align: center;
+      height: 100%;
+    }
+
+    .chart {
+      width: 1040px;
+      // height: 100%;
+    }
+
+    .bar {
+      flex: 1;
+
+      &-box {
+        width: 100%;
+        height: 214px;
+        position: relative;
+      }
+
+      &-chart {
+        width: 100%;
+        height: 214px;
+      }
+
+      .ct {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        text-align: center;
+        font-size: 26px;
+
+        p {
+          font-size: 20px;
+        }
+
+      }
+
+      .value {
+        width: 100%;
+
+        p {
+          text-align: center;
+
+          span {
+            color: #80FFFF;
+            margin-left: 5px;
+            font-size: 20px;
+            line-height: 30px;
+          }
+        }
+      }
+    }
+
+    .plate {
+      width: 1059px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+
+      .chart {
+        width: 100%;
+        flex: 1;
+      }
+
+      p {
+        text-align: center;
+      }
+    }
+  }
+
+}
+
+.right {
+  color: #fff;
+
+  :deep(.box-content) {
+    display: flex;
+  }
+
+  .bar {
+    width: 281px;
+
+    &-box {
+      width: 100%;
+      height: 214px;
+      position: relative;
+    }
+
+    &-chart {
+      width: 100%;
+      height: 214px;
+    }
+
+    .ct {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      text-align: center;
+      font-size: 26px;
+
+      p {
+        font-size: 20px;
+      }
+
+    }
+
+    .value {
+      width: 100%;
+
+      p {
+        text-align: center;
+
+        span {
+          color: #80FFFF;
+          margin-left: 5px;
+          font-size: 20px;
+          line-height: 30px;
+        }
+      }
+    }
+  }
+
+  .content {
+    width: 556px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .value {
+      display: flex;
+      width: 90%;
+      justify-content: space-between;
+      p {
+        background: #15305D;
+        width: 67px;
+        height: 89px;
+        border-radius: 10px;
+        line-height: 89px;
+        text-align: center;
+        font-size: 60px;
+      }
+    }
 
-  </style>
+    .name {
+      font-size: 24px;
+      color: #80FFFF;
+      margin-top: 10px;
+    }
+  }
+  .bar2{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    .value{
+      text-align: center;
+      color: #80FFFF;
+      margin-top: 32px;
+    }
+    .chart{
+      flex: 1;
+    }
+  }
+  .vehicle{
+    flex: 1;
+    display: flex;
+    .title{
+      font-size: 14px;
+      writing-mode: vertical-lr;
+      /* 从上到下排列，默认为从左到右 */
+      text-orientation: sideways;
+      transform: rotate(180deg);
+      text-align: center;
+      height: 100%;
+    }
+    .vehicle-chart{
+     flex: 1;
+    }
+  }
+}
+</style>