feat：完善景区页面

2024-12-18 11:08:13 +08:00
parent 1108aafed4
commit 44c87aa7ff
8 changed files with 189 additions and 22 deletions
--- a/src/assets/images/Group
+++ b/src/assets/images/Group
--- a/src/components/Pie/index.vue
+++ b/src/components/Pie/index.vue
@@ -0,0 +1,119 @@
+<template>
+  <div
+    :id="id"
+    :style="{
+      width: styleUtil.px2vw(width),
+      height: styleUtil.px2vh(height)
+    }"
+  />
+</template>
+
+<script setup>
+  import * as echarts from 'echarts'
+  import styleUtil from '@/utils/styleUtil'
+  import { fitChartSize } from '@/utils/dataUtil'
+  import { guid } from '@/utils/util'
+  const props = defineProps({
+    width: {
+      type: Number,
+      default: () => 0
+    },
+    height: {
+      type: Number,
+      default: () => 0
+    }
+  })
+
+  let id = ref(guid())
+  let pieChart = null
+  var colorList = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA', '']
+  var title = ['企业', '农业', '工业', '纺织']
+  var dataValue = ['15', '30', '35', '20']
+  var dataList = title.map((item, index) => {
+    return {
+      name: item,
+      value: dataValue[index]
+    }
+  })
+
+  var defaultCofig = {
+    color: colorList,
+    title: {
+      show: true,
+      text: '100%',
+      itemGap: 10,
+      x: 'center',
+      y: '30%',
+      subtext: '脱岗率',
+      textStyle: {
+        fontSize: fitChartSize(24),
+        fontWeight: 'bold',
+        color: '#ffffff'
+      },
+      subtextStyle: {
+        fontSize: fitChartSize(12),
+        fontWeight: 'bold',
+        color: '#7894A8'
+      }
+    },
+    legend: {
+      top: 'bottom',
+      left: 'center',
+      orient: 'horizontal',
+      data: dataList,
+      itemWidth: 16,
+      itemHeight: 16,
+      itemGap: 10
+    },
+    series: [
+      // 展示层
+      {
+        type: 'pie',
+        center: ['50%', '30%'],
+        radius: ['40%', '55%'],
+        itemStyle: {
+          borderWidth: fitChartSize(2), //描边线宽
+          borderColor: '#093672'
+        },
+        label: {
+          show: false
+        },
+        labelLine: {
+          show: true,
+          normal: {
+            length: 20,
+            length2: 40,
+            align: 'center',
+            lineStyle: {
+              width: 1
+            }
+          }
+        },
+        data: dataList
+      }
+    ]
+  }
+  const resize = () => {
+    if (pieChart) {
+      pieChart.dispose()
+      pieChart = null
+      init()
+    }
+  }
+
+  const init = () => {
+    const dom = document.getElementById(id.value)
+    pieChart = echarts.init(dom)
+    pieChart.setOption({
+      ...defaultCofig
+    })
+    // 监听窗口大小变化
+    window.addEventListener('resize', resize)
+  }
+
+  onMounted(() => {
+    init()
+  })
+</script>
+
+<style scoped lang="scss"></style>
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -31,9 +31,21 @@
 .mb-10 {
  margin-bottom: vh(10);
 }
+.mt-10 {
+  margin-top: vh(10) !important;
+}
 .mr-10 {
  margin-right: vh(10);
 }
+.mt-20 {
+  margin-top: vh(20) !important;
+}
+.ml-20 {
+  margin-left: vh(20) !important;
+}
+.pt-20 {
+  padding-top: vh(20);
+}
 .pt-20 {
  padding-top: vh(20);
 }
--- a/src/views/monitor/components/box-1.vue
+++ b/src/views/monitor/components/box-1.vue
@@ -9,7 +9,7 @@
        :key="index"
      >
        <p class="item-title">三峡之巅-最新异常名称</p>
-        <img class="item-img" src="@/assets/images/img-1.png" alt="" />
+        <img class="item-img" src="@/assets/images/cover.png" alt="" />
      </li>
    </ul>
  </div>
--- a/src/views/scenic/components/box-1.vue
+++ b/src/views/scenic/components/box-1.vue
@@ -32,7 +32,7 @@
    <div class="footer">
      <div class="flex">
        <div class="item">
-          <pie :width="140" :height="70" />
+          <progress1 :width="140" :height="70" />
          <div>
            <div class="bg">
              <span class="label">今日工单总条数：</span>
@@ -45,7 +45,7 @@
          </div>
        </div>
        <div class="item">
-          <pie :width="140" :height="70" />
+          <progress1 :width="140" :height="70" />
          <div>
            <div class="bg">
              <span class="label">今日工单总条数：</span>
@@ -90,7 +90,7 @@

 <script setup>
  import countup from 'vue-countup-v3'
-  import pie from './pie.vue'
+  import progress1 from './progress-1.vue'

  let count = ref('58459')
 </script>
--- a/src/views/scenic/components/box-2.vue
+++ b/src/views/scenic/components/box-2.vue
@@ -3,33 +3,58 @@
    <div class="flex">
      <div class="box mr-10">
        <Title1 title="排队信息" />
-        <div class="flex justify-between">
+        <div class="top flex justify-between">
          <count-item label="今日出票" :count="35600" suffix="张" />
          <count-item label="今日接待人数" :count="35600" suffix="人" />
          <count-item label="排队人数" :count="35600" suffix="人" />
          <count-item label="排队持续时间" :count="35600" suffix="S" />
        </div>
-        <div class="pt-10">
-          <Title3 title="景区排队人数" />
+        <div class="border">
+          <div class="pt-10">
+            <Title3 title="景区排队人数" />
+          </div>
+          <Line :width="520" :height="300" />
        </div>
-        <Line :width="540" :height="340" />
      </div>
      <div class="box mr-10">
        <Title1 title="景区承载" />
        <div class="flex">
-          <pie :width="160" :height="50" />
+          <FProgress :width="200" :height="70" />
          <div class="flex flex-1 justify-between">
            <count-item label="景区当前人数" :count="35600" suffix="张" />
            <count-item label="景区最大承载" :count="35600" suffix="人" />
          </div>
        </div>
-        <div class="pt-10">
-          <Title3 title="景区排队人数" />
+        <div class="border">
+          <div class="pt-10">
+            <Title3 title="景区排队人数" />
+          </div>
+          <Line :width="520" :height="300" />
        </div>
-        <Line :width="540" :height="300" />
      </div>
      <div class="box-1 mr-10">
        <Title1 title="停车信息" />
+        <div class="flex">
+          <div class="flex">
+            <FProgress :width="140" :height="70" />
+            <FProgress :width="140" :height="70" />
+            <FProgress :width="140" :height="70" />
+          </div>
+          <div class="ml-20 flex flex-1 justify-between">
+            <count-item label="总停车场数" :count="561" suffix="个" />
+            <count-item label="总停车位数" :count="150000" suffix="个" />
+          </div>
+        </div>
+        <div class="flex">
+          <div class="border flex-1">
+            <Title3 title="今日景区承载量" />
+            <Line :width="350" :height="310" />
+          </div>
+          <div class="border flex-1">
+            <Title3 title="车辆归属地占比" />
+            <Pie :width="350" :height="310" />
+          </div>
+        </div>
      </div>
      <div class="box-2">
        <Title1 title="安全信息 " />
@@ -40,16 +65,27 @@

 <script setup>
  import CountItem from './count-item.vue'
-  import pie from './pie.vue'
+  import FProgress from './progress-1.vue'
 </script>

 <style scoped lang="scss">
  .container {
    flex: 1;
    margin: vh(120) vw(10) 0 vw(10);
+    .top {
+      padding: 0 vw(10);
+      height: vh(70);
+    }
    .bg {
      background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
    }
+    .border {
+      padding: 0 vw(10);
+      margin: 0 vw(10);
+      box-sizing: border-box;
+      background-image: url('@/assets/images/bg-3.png');
+      background-size: 100% 100%;
+    }
    .box {
      @extend .bg;
      width: vw(575);
--- a/src/views/scenic/components/count-item.vue
+++ b/src/views/scenic/components/count-item.vue
@@ -18,7 +18,7 @@
  import countup from 'vue-countup-v3'
  let props = defineProps({
    label: {
-      type: Number,
+      type: String,
      default: ''
    },
    count: {
@@ -58,11 +58,11 @@
        color: #02f9fa;
      }
      .bg {
-        width: 100%;
-        height: vh(40);
        position: absolute;
        left: 0;
        top: 0;
+        width: vw(134);
+        height: vh(30);
        z-index: -1;
      }
    }
--- a/src/views/scenic/components/progress-1.vue
+++ b/src/views/scenic/components/progress-1.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="gauge"
+    class="progress"
    :id="id"
    :style="{
      width: styleUtil.px2vw(width),
@@ -25,7 +25,7 @@
      default: () => 0
    }
  })
-  let gaugeChart = null
+  let progressChart = null
  let id = ref(guid())
  let defaultCofig = {
    title: [
@@ -163,13 +163,13 @@
  })
  const init = () => {
    // 基于准备好的dom，初始化echarts实例
-    gaugeChart = echarts.init(document.getElementById(id.value))
-    gaugeChart.setOption({ ...defaultCofig })
+    progressChart = echarts.init(document.getElementById(id.value))
+    progressChart.setOption({ ...defaultCofig })
    window.addEventListener('resize', resize)
  }
  const resize = () => {
-    if (gaugeChart) {
-      gaugeChart.dispose()
+    if (progressChart) {
+      progressChart.dispose()
      init()
    }
  }