From 44c87aa7ff31655b95e32e2b52bad3ff12a627a5 Mon Sep 17 00:00:00 2001
From: zjc <1034206993@qq.com>
Date: Wed, 18 Dec 2024 11:08:13 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=AE=8C=E5=96=84=E6=99=AF?=
 =?UTF-8?q?=E5=8C=BA=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/Group 1342@2x.png           | Bin 423 -> 0 bytes
 src/components/Pie/index.vue                  | 119 ++++++++++++++++++
 src/styles/common.scss                        |  12 ++
 src/views/monitor/components/box-1.vue        |   2 +-
 src/views/scenic/components/box-1.vue         |   6 +-
 src/views/scenic/components/box-2.vue         |  54 ++++++--
 src/views/scenic/components/count-item.vue    |   6 +-
 .../components/{pie.vue => progress-1.vue}    |  12 +-
 8 files changed, 189 insertions(+), 22 deletions(-)
 delete mode 100644 src/assets/images/Group 1342@2x.png
 create mode 100644 src/components/Pie/index.vue
 rename src/views/scenic/components/{pie.vue => progress-1.vue} (93%)

diff --git a/src/assets/images/Group 1342@2x.png b/src/assets/images/Group 1342@2x.png
deleted file mode 100644
index a44ed4e16c7aad04898dab9caf2b19f4e6a7aa81..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 423
zcmV;Y0a*TtP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00001b5ch_0Itp)
z=>Px$VM#<mR5(wqlTRyzQ5431=bAwiC9^?FK7dlQK*`2>R%+I>qeS@*HWrq`LSlo-
zZY+d_1=$QKyV*$6Y>Z+U%^&yZn()prubQ0Qz2`j7d7gXE5o%*qyD8HT^dYo=q=hVy
z#gbxLp1lzHIwZ822O?Moevo=E3|Dk=PE3jwZWj)mC5jUE1%D=;qA*EEQXyE;kv}`v
zGCL(xawaTk8$EVL#@^x*q8CF*ALUX{O@fSZ-s?vbN#U?OVMgty16Ea9$=iK1?@MC1
z5_v2gNvn?k)<&O6>rQa7t^`9)OrfZC3!IAez?`28F|VZ;j8@C{AnaOj(w9J<N-1g4
z$gdXMW9|l)eJtDy$K|LQ((PImYRT(C(>!-RKOv+AH@aOmF2gn^9XjZM<mFaR%!V)6
z$;z?y4};X`D3{n{Rtk+RQ;`b?{$3{UGcRa6AtD3_e=V1i18xX#&7@?!<?pf9jm*y@
R>a73(002ovPDHLkV1ka4vjhMD

diff --git a/src/components/Pie/index.vue b/src/components/Pie/index.vue
new file mode 100644
index 0000000..769dec0
--- /dev/null
+++ 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>
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 56dbb20..57c280f 100644
--- 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);
 }
diff --git a/src/views/monitor/components/box-1.vue b/src/views/monitor/components/box-1.vue
index 85f37a0..475c267 100644
--- 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>
diff --git a/src/views/scenic/components/box-1.vue b/src/views/scenic/components/box-1.vue
index cf6a50b..d92af2f 100644
--- 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>
diff --git a/src/views/scenic/components/box-2.vue b/src/views/scenic/components/box-2.vue
index 0d9a729..f67a43e 100644
--- 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);
diff --git a/src/views/scenic/components/count-item.vue b/src/views/scenic/components/count-item.vue
index 7b8743a..192f0d5 100644
--- 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;
       }
     }
diff --git a/src/views/scenic/components/pie.vue b/src/views/scenic/components/progress-1.vue
similarity index 93%
rename from src/views/scenic/components/pie.vue
rename to src/views/scenic/components/progress-1.vue
index 7cc9831..763a372 100644
--- a/src/views/scenic/components/pie.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()
     }
   }