feat：新增景区页面

src/App.vue

@@ -3,7 +3,15 @@ import { RouterView } from 'vue-router'
 </script>
 
 <template>
-  <RouterView />
+  <main class="wrapper"> <RouterView /> </main>
 </template>
 
-<style scoped></style>
+<style scoped>
+  .wrapper {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    background-color: #0a254b;
+  }
+</style>

src/assets/images/count-bg.svg

@@ -0,0 +1,41 @@
+<svg width="100" height="30" viewBox="0 0 100 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Mask group">
+<mask id="mask0_365_11091" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="30">
+<rect id="Rectangle 711" width="100" height="30" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_365_11091)">
+<g id="Group 1349">
+<g id="Rectangle 704" filter="url(#filter0_f_365_11091)">
+<path d="M6.25005 3H100V27H2.77783L6.25005 3Z" fill="url(#paint0_linear_365_11091)"/>
+<path d="M3.35538 26.5L6.68292 3.5H99.5001V26.5H3.35538Z" stroke="url(#paint1_linear_365_11091)"/>
+</g>
+<path id="Rectangle 710" d="M3.35538 23.5L6.68292 0.5H99.5001V23.5H3.35538Z" fill="url(#paint2_linear_365_11091)" stroke="url(#paint3_linear_365_11091)"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_365_11091" x="-1.22217" y="-1" width="105.222" height="32" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_365_11091"/>
+</filter>
+<linearGradient id="paint0_linear_365_11091" x1="2.77783" y1="15" x2="100" y2="15" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0096FF" stop-opacity="0.7"/>
+<stop offset="1" stop-color="#08305F" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_365_11091" x1="2.77783" y1="28.44" x2="20.0456" y2="8.62646" gradientUnits="userSpaceOnUse">
+<stop offset="0.005" stop-color="white"/>
+<stop offset="0.261149" stop-color="#02F9FA"/>
+<stop offset="1" stop-color="#0096FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_365_11091" x1="2.77783" y1="12" x2="100" y2="12" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0096FF" stop-opacity="0.7"/>
+<stop offset="1" stop-color="#08305F" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_365_11091" x1="2.77783" y1="25.44" x2="20.0456" y2="5.62646" gradientUnits="userSpaceOnUse">
+<stop offset="0.005" stop-color="white"/>
+<stop offset="0.261149" stop-color="#02F9FA"/>
+<stop offset="1" stop-color="#0096FF" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/images/dian.svg

@@ -0,0 +1,6 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1342">
+<circle id="Ellipse 141" cx="4" cy="4" r="4" fill="#0096FF" fill-opacity="0.4"/>
+<circle id="Ellipse 142" cx="2" cy="4" r="2" fill="#02F9FA"/>
+</g>
+</svg>

src/components/CoreVideo/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="box-1">
+  <div class="core-video">
     <div class="title">核心景区视频</div>
     <ul class="list">
       <li
@@ -21,7 +21,7 @@
 </script>
 
 <style lang="scss" scoped>
-  .box-1 {
+  .core-video {
     margin: vh(10);
     width: vw(326);
     border-radius: vw(2);

src/components/Correspondence/index.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="box-4-content">
+    <div class="top-box">
+      <div class="title">融合通信</div>
+      <div class="icon-box flex">
+        <div class="item"><img src="/src/assets/images/r-icon-1.png" alt="" /> 白帝城 </div>
+        <div class="item"><img src="/src/assets/images/r-icon-2.png" alt="" />三峡之颠</div>
+        <div class="item"><img src="/src/assets/images/r-icon-3.png" alt="" />龙桥河</div>
+        <div class="item"><img src="/src/assets/images/r-icon-4.png" alt="" />消防队</div>
+        <div class="item"><img src="/src/assets/images/r-icon-5.png" alt="" />文旅城</div>
+        <div class="item"><img src="/src/assets/images/r-icon-6.png" alt="" />交通城</div>
+      </div>
+    </div>
+    <div class="bom-box">
+      <div class="title">
+        <span>最近联系</span>
+      </div>
+      <table class="table">
+        <tr class="tr-th">
+          <th>人员姓名</th>
+          <th>部门</th>
+          <th>职位</th>
+          <th>时间</th>
+        </tr>
+        <tr class="tr-td">
+          <td>January</td>
+          <td>$100</td>
+          <td>January</td>
+          <td>$100</td>
+        </tr>
+        <tr class="tr-td">
+          <td>February</td>
+          <td>$80</td>
+          <td>February</td>
+          <td>$80</td>
+        </tr>
+        <tr class="tr-td">
+          <td>February</td>
+          <td>$80</td>
+          <td>February</td>
+          <td>$80</td>
+        </tr>
+        <tr class="tr-td">
+          <td>February</td>
+          <td>$80</td>
+          <td>February</td>
+          <td>$80</td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+  .box-4-content {
+    width: vw(260);
+    height: vh(1060);
+    background-image: url('/src/assets/images/rt-bg.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    margin-top: vh(10);
+    margin-left: vw(10);
+    position: relative;
+    z-index: 999;
+    .bom-box {
+      .table {
+        width: 100%;
+        margin-top: vh(5);
+        .tr-th {
+          background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
+          border-radius: 0px 0px 0px 0px;
+          // border: 1px solid;
+          border-image: linear-gradient(180deg, rgba(0, 150, 255, 0), rgba(0, 150, 255, 1)) 1 1;
+          font-weight: 400;
+          font-size: vw(12);
+          color: #0096ff;
+          line-height: vh(14);
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+
+          th {
+            padding: vw(5);
+          }
+        }
+        .tr-td {
+          font-weight: 400;
+          font-size: vw(14);
+          color: #f1f7ff;
+          line-height: vh(16);
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+
+          td {
+            padding: vh(5) vw(10);
+          }
+        }
+        .tr-td:nth-child(odd) {
+          background: linear-gradient(90deg, rgba(0, 150, 255, 0) 0%, rgba(0, 150, 255, 0.22) 100%);
+        }
+      }
+      .title {
+        background-image: url('/src/assets/images/nav-l-t-bg.png');
+        background-size: 100% 100%;
+
+        span {
+          margin-left: vw(30);
+          font-weight: 800;
+          font-size: vw(15);
+          line-height: vh(26);
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+          background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
+          -webkit-background-clip: text;
+          background-clip: text;
+          -webkit-text-fill-color: transparent;
+          color: transparent;
+        }
+      }
+    }
+    .top-box {
+      width: 100%;
+      height: vh(500);
+      .icon-box {
+        font-weight: 400;
+        font-size: vw(14);
+        color: #ffffff;
+        line-height: vh(16);
+        flex-wrap: wrap;
+        margin-left: vw(20);
+        .item {
+          margin-top: vh(40);
+          margin-right: vh(20);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          &:nth-child(3n) {
+            margin-right: 0;
+          }
+          & > img {
+            width: vw(54);
+            height: vh(60);
+          }
+        }
+      }
+      .title {
+        font-weight: 800;
+        font-size: vw(16);
+        line-height: vh(26);
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+        background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        color: transparent;
+      }
+    }
+  }
+</style>

src/components/Header/index.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="header">
+    <div v-if="isBack" class="back">返回</div>
+    <ul class="nav-left">
+      <li
+        class="nav-left-item"
+        :style="{
+          backgroundImage: `url(${current == index && !isSkip ? title2Select : title2})`
+        }"
+        v-for="(item, index) in navLeft"
+        :key="index"
+        @click="handleNav(item, index)"
+      >
+        {{ item.name }}
+      </li>
+    </ul>
+    <div class="title">
+      <span>{{ name }}</span>
+    </div>
+    <ul class="nav-right">
+      <li class="nav-right-item" v-for="(item, index) in navRight" :key="index">
+        {{ item.name }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+  import { useRouter } from 'vue-router'
+  import title2 from '@/assets/images/title-2.png'
+  import title2Select from '@/assets/images/title-2-select.png'
+
+  let props = defineProps({
+    title: {
+      type: String,
+      default: ''
+    },
+    navLeft: {
+      type: Array,
+      default: () => []
+    },
+    navRight: {
+      type: Array,
+      default: () => []
+    },
+    current: {
+      type: Number,
+      default: 0
+    },
+    isSkip: {
+      type: Boolean,
+      default: false
+    },
+    isBack: {
+      type: Boolean,
+      default: false
+    }
+  })
+  const emit = defineEmits(['change'])
+  const router = useRouter()
+
+  const name = computed(() => {
+    if (!props.isSkip && props.navLeft.length > 0) {
+      return props.navLeft[props.current].name
+    }
+    return props.title
+  })
+
+  const handleNav = (item, index) => {
+    if (props.isSkip) {
+      router.push(item.path)
+    } else {
+      emit('on-change', index)
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .header {
+    position: absolute;
+    left: vw(326);
+    .back {
+      position: absolute;
+      left: vw(60);
+      top: vh(40);
+      width: vw(120);
+      height: vh(30);
+      font-weight: 600;
+      font-size: vw(20);
+      color: #ffffff;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: vw(60);
+      border: 1px solid rgba(0, 114, 220, 0.3);
+      background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
+    }
+    .title {
+      width: vw(3133);
+      height: vh(120);
+      line-height: vh(90);
+      text-align: center;
+      letter-spacing: vw(10);
+      box-sizing: border-box;
+      background-image: url('@/assets/images/title.png');
+      background-size: 100% 100%;
+      & > span {
+        font-size: vw(48);
+        font-weight: 800;
+        color: transparent;
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
+      }
+    }
+    .nav-left {
+      position: absolute;
+      right: vw(2100);
+      top: vh(34);
+      display: flex;
+      &-item {
+        cursor: pointer;
+        margin-left: vh(-16);
+        width: vw(210);
+        height: vh(56);
+        line-height: vh(46);
+        font-weight: 600;
+        font-size: vw(28);
+        text-align: center;
+        color: rgba(208, 236, 255, 0.9);
+        background-size: 100% 100%;
+      }
+    }
+    .nav-right {
+      position: absolute;
+      left: vw(2110);
+      top: vh(34);
+      display: flex;
+      &-item {
+        cursor: pointer;
+        margin-right: vh(-16);
+        width: vw(210);
+        height: vh(56);
+        line-height: vh(46);
+        font-weight: 600;
+        font-size: vw(28);
+        text-align: center;
+        color: rgba(208, 236, 255, 0.9);
+        background-image: url('@/assets/images/title-3.png');
+        background-size: 100% 100%;
+      }
+    }
+  }
+</style>

src/router/index.js

@@ -6,12 +6,17 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: () => import('../views/home/index.vue')
+      component: () => import('@/views/home/index.vue')
     },
     {
       path: '/monitor',
       name: 'monitor',
-	  component: () => import('../views/monitor/index.vue')
+      component: () => import('@/views/monitor/index.vue')
+    },
+    {
+      path: '/scenic',
+      name: 'scenic',
+      component: () => import('@/views/scenic/index.vue')
     }
   ]
 })

src/styles/common.scss

@@ -10,6 +10,9 @@
 .align-end {
   align-items: flex-end;
 }
+.justify-center {
+  justify-content: center;
+}
 .justify-between {
   justify-content: space-between;
 }
@@ -28,6 +31,9 @@
 .mb-10 {
   margin-bottom: vh(10);
 }
+.mr-10 {
+  margin-right: vh(10);
+}
 .pt-20 {
   padding-top: vh(20);
 }

src/views/home/components/age-ratio.vue

@@ -1,33 +1,22 @@
 <template>
-  <div class="pie" :id="id" />
+  <div class="age-ratio" id="age-ratio" />
 </template>
 
 <script setup>
   import * as echarts from 'echarts'
   import { fitChartSize } from '@/utils/dataUtil'
 
-  const props = defineProps({
+  let ageChart = null
-    id: {
-      type: String,
-      default: () => ''
-    }
-  })
 
-  let gaugeChart = null
-
-  onMounted(() => {
-    init()
-  })
   const init = () => {
     // 基于准备好的dom，初始化echarts实例
-    gaugeChart = echarts.init(document.getElementById(props.id))
+    ageChart = echarts.init(document.getElementById('age-ratio'))
-    gaugeChart.setOption({
+    ageChart.setOption({
       tooltip: {
         trigger: 'item'
       },
       series: [
         {
-          name: 'Access From',
           type: 'pie',
           radius: ['30%', '40%'],
           itemStyle: {
@@ -59,15 +48,20 @@
     window.addEventListener('resize', resize)
   }
   const resize = () => {
-    if (gaugeChart) {
+    if (ageChart) {
-      gaugeChart.dispose()
+      ageChart.dispose()
+      ageChart = null
       init()
     }
   }
+
+  onMounted(() => {
+    init()
+  })
 </script>
 
 <style lang="scss" scoped>
-  .pie {
+  .age-ratio {
     width: vw(253);
     height: vh(100);
   }

src/views/home/components/box-2.vue

@@ -91,7 +91,7 @@
     <div class="flex">
       <div class="box-1">
         <Title3 title="年龄/性别占比" />
-        <pie id="pie" />
+        <age-ratio />
         <div class="count">总人数：<countup endVal="124563" /></div>
         <div class="cell pt-20">
           <img class="icon" src="@/assets/images/man.png" />
@@ -138,7 +138,7 @@
 
 <script setup>
   import countup from 'vue-countup-v3'
-  import pie from './pie.vue'
+  import AgeRatio from './age-ratio.vue'
   import top from './top.vue'
   import gauge from './gauge.vue'
   import ticket from './ticket.vue'

src/views/home/components/box-3.vue

@@ -44,7 +44,7 @@
     <div class="footer">
       <div class="left">
         <div>
-          <div class="flex">
+          <div class="flex justify-center pt-10">
             <div class="item">
               <p class="label">今日工单总条数</p>
               <countup :endVal="1234" />
@@ -54,10 +54,21 @@
               <countup :endVal="1234" />
             </div>
           </div>
-          <p>工单完成数</p>
+          <div class="progress-box">
+            <span class="text">工单完成数</span>
+            <div class="progress">
+              <el-progress
+                :percentage="50"
+                :show-text="false"
+                color="linear-gradient( to right,
+              #00C4F9 0%, #00C4F9 100%)"
+              />
+            </div>
+            <span class="value">50%</span>
+          </div>
         </div>
         <div>
-          <div class="flex">
+          <div class="flex justify-center pt-10">
             <div class="item">
               <p class="label">紧急工单数</p>
               <countup :endVal="1234" />
@@ -67,7 +78,18 @@
               <countup :endVal="1234" />
             </div>
           </div>
-          <p>工单完成数</p>
+          <div class="progress-box">
+            <span class="text">工单完成数</span>
+            <div class="progress">
+              <el-progress
+                :percentage="50"
+                :show-text="false"
+                color="linear-gradient( to right,
+              #DA3637 0%, #DA3637 100%)"
+              />
+            </div>
+            <span class="value">50%</span>
+          </div>
         </div>
       </div>
       <div class="right">
@@ -166,9 +188,11 @@
       .left {
         flex: 1;
         display: flex;
+        margin-top: vh(4);
         & > div {
           flex: 1;
           height: vh(110);
+          margin-right: vw(6);
           background-image: url('@/assets/images/bg-3.png');
           background-size: 100% 100%;
           .item {
@@ -189,6 +213,27 @@
             font-size: vw(28);
             font-weight: bold;
           }
+          .progress-box {
+            margin-top: vh(10);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .text {
+              margin-right: vw(10);
+              font-weight: 400;
+              font-size: vw(14);
+              color: #ffffff;
+            }
+            .progress {
+              width: vw(100);
+            }
+            .value {
+              margin-left: vw(10);
+              font-weight: 400;
+              font-size: vw(14);
+              color: #ffffff;
+            }
+          }
         }
       }
       .right {

src/views/home/components/gauge.vue

@@ -44,15 +44,15 @@
             roundCap: true,
             width: fitChartSize(6)
           },
-          pointer: {
-            show: false
-          },
           axisLine: {
             roundCap: true,
             lineStyle: {
               width: fitChartSize(6)
             }
           },
+          pointer: {
+            show: false
+          },
           axisTick: {
             show: false
           },

src/views/home/index.vue

@@ -1,97 +1,17 @@
 <template>
-  <main class="wrapper">
+  <Header title="奉节县旅游指挥调度中心" is-skip :nav-left="navLeft" :nav-right="navRight" />
-    <box1 />
+  <CoreVideo />
-    <div class="header">
-      <ul class="nav-left">
-        <li class="nav-left-item">安全</li>
-        <li class="nav-left-item">景区</li>
-        <li class="nav-left-item">交通</li>
-      </ul>
-      <div class="title">奉节县旅游指挥调度中心</div>
-      <ul class="nav-right">
-        <li class="nav-right-item">停车</li>
-        <li class="nav-right-item">工单</li>
-        <li class="nav-right-item">舆情</li>
-        <li class="nav-right-item">酒店</li>
-      </ul>
-    </div>
   <box2 />
   <box3 />
   <box4 />
-  </main>
+  <Correspondence />
 </template>
 
 <script setup>
-  import box1 from './components/box-1.vue'
   import box2 from './components/box-2.vue'
   import box3 from './components/box-3.vue'
   import box4 from './components/box-4.vue'
-
+  const navLeft = [{ name: '安全' }, { name: '景区', path: '/scenic' }, { name: '交通' }]
+  const navRight = [{ name: '停车' }, { name: '工单' }, { name: '舆情' }, { name: '酒店' }]
   onMounted(() => {})
 </script>
-
-<style lang="scss" scoped>
-  .wrapper {
-    display: flex;
-    width: 100vw;
-    height: 100vh;
-    overflow: hidden;
-    background-color: #0a254b;
-    .header {
-      position: absolute;
-      left: vw(326);
-      .title {
-        width: vw(3133);
-        height: vh(120);
-        font-size: vw(48);
-        font-weight: 800;
-        text-align: center;
-        padding-top: vh(20);
-        color: #fff;
-        letter-spacing: vw(10);
-        box-sizing: border-box;
-        text-shadow: 0px 4px 7px rgba(0, 150, 255, 0.75);
-        background-image: url('@/assets/images/title.png');
-        background-size: 100% 100%;
-      }
-      .nav-left {
-        position: absolute;
-        left: vw(630);
-        top: vh(34);
-        display: flex;
-        &-item {
-          cursor: pointer;
-          margin-left: vh(-10);
-          width: vw(210);
-          height: vh(56);
-          padding-top: vh(10);
-          font-weight: 600;
-          font-size: vw(28);
-          text-align: center;
-          color: rgba(208, 236, 255, 0.9);
-          background-image: url('@/assets/images/title-2.png');
-          background-size: 100% 100%;
-        }
-      }
-      .nav-right {
-        position: absolute;
-        right: vw(424);
-        top: vh(34);
-        display: flex;
-        &-item {
-          cursor: pointer;
-          margin-right: vh(-10);
-          width: vw(210);
-          height: vh(56);
-          padding-top: vh(10);
-          font-weight: 600;
-          font-size: vw(28);
-          text-align: center;
-          color: rgba(208, 236, 255, 0.9);
-          background-image: url('@/assets/images/title-3.png');
-          background-size: 100% 100%;
-        }
-      }
-    }
-  }
-</style>

src/views/scenic/components/box-1.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="box-1">
+    <div class="header">
+      <div>
+        <div class="label">今年总游客数</div>
+        <countup v-for="item in count" :endVal="item" />
+      </div>
+      <div>
+        <div>
+          <div class="label">接待状态</div>
+          <p class="value">安全</p>
+        </div>
+        <div>
+          <div class="label">景区安全</div>
+          <p class="value">安全</p>
+        </div>
+        <div>
+          <div class="label">景区游玩舒适</div>
+          <p class="value error">排队</p>
+        </div>
+        <div>
+          <div class="label">通景交通</div>
+          <p class="value">安全</p>
+        </div>
+        <div>
+          <div class="label">停车场负荷度</div>
+          <p class="value error">超负荷</p>
+        </div>
+      </div>
+    </div>
+    <div class="main"> </div>
+    <div class="footer">
+      <div class="flex">
+        <div class="item">
+          <pie :width="140" :height="70" />
+          <div>
+            <div class="bg">
+              <span class="label">今日工单总条数：</span>
+              <span class="value"> <countup :endVal="1234" /></span>
+            </div>
+            <div class="bg">
+              <span class="label">工单完成数：</span>
+              <span class="value"> <countup :endVal="1234" /></span>
+            </div>
+          </div>
+        </div>
+        <div class="item">
+          <pie :width="140" :height="70" />
+          <div>
+            <div class="bg">
+              <span class="label">今日工单总条数：</span>
+              <span class="value"> <countup :endVal="1234" /></span>
+            </div>
+            <div class="bg">
+              <span class="label">工单完成数：</span>
+              <span class="value"> <countup :endVal="1234" /></span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex align-center justify-between">
+        <div>
+          <div class="cell">
+            <span class="tag tag--success">普通</span>
+            <p class="content">
+              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
+              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
+            </p>
+          </div>
+          <div class="cell">
+            <span class="tag tag--error">普通</span>
+            <p class="content">
+              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
+              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
+            </p>
+          </div>
+          <div class="cell">
+            <span class="tag tag--primary">普通</span>
+            <p class="content">
+              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
+              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
+            </p>
+          </div>
+        </div>
+        <div class="more">查看更多</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import countup from 'vue-countup-v3'
+  import pie from './pie.vue'
+
+  let count = ref('58459')
+</script>
+
+<style scoped lang="scss">
+  .box-1 {
+    margin-top: vh(120);
+    width: vw(810);
+    height: vh(950);
+    padding: vw(10);
+    box-sizing: border-box;
+    background-image: url('@/assets/images/bg-3.png');
+    background-size: 100% 100%;
+    .header {
+      display: flex;
+      margin-top: vh(10);
+      & > div:nth-child(1) {
+        width: vw(300) !important;
+      }
+      & > div:nth-child(2) {
+        flex: 1;
+        display: flex;
+        justify-content: space-between;
+      }
+      .label {
+        font-weight: 400;
+        font-size: vw(16);
+        color: #ffffff;
+      }
+      .value {
+        font-weight: bold;
+        font-size: vw(28);
+        color: #02f9fa;
+        text-align: center;
+        line-height: vh(60);
+      }
+      .error {
+        color: #ff4400;
+      }
+      .countup-wrap {
+        margin-top: vh(10);
+        display: inline-block;
+        width: vw(40);
+        height: vh(40);
+        margin-right: vw(4);
+        border-radius: vw(4);
+        color: #ffffff;
+        font-size: vw(28);
+        font-weight: bold;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(180deg, #00b7ff 0%, #0033ff 100%);
+      }
+    }
+    .main {
+      width: 100%;
+      height: vh(600);
+    }
+    .footer {
+      .item {
+        flex: 1;
+        height: vh(120);
+        display: flex;
+        align-items: center;
+        background-image: url('@/assets/images/bg-3.png');
+        background-size: 100% 100%;
+        &:nth-child(1) {
+          margin-right: vw(10);
+        }
+        .bg {
+          padding-left: vw(20);
+          width: vw(243);
+          height: vh(40);
+          display: flex;
+          align-items: center;
+          background: linear-gradient(90deg, rgba(0, 150, 255, 0.34) 0%, rgba(0, 150, 255, 0) 100%);
+          &:nth-child(1) {
+            margin-bottom: vh(4);
+          }
+          .label {
+            font-weight: 400;
+            font-size: vw(14);
+            color: #fff;
+          }
+          .value {
+            font-weight: bold;
+            font-size: vw(28);
+            color: #02f9fa;
+          }
+        }
+      }
+      .cell {
+        display: flex;
+        margin-left: vw(4);
+        margin-top: vh(12);
+        &:nth-last-child(1) {
+          margin-bottom: 0;
+        }
+        .tag {
+          padding: 0 vw(16);
+          font-weight: bold;
+          font-size: vw(14);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: vw(2);
+          &--success {
+            color: #02f9fa;
+            border: 1px solid #02f9fa;
+            box-shadow: inset 0 0 vw(8) 0 #0be1ab;
+          }
+          &--error {
+            color: #ee2c2c;
+            border: 1px solid #ee2c2c;
+            box-shadow: inset 0 0 vw(8) 0 #ee2c2c;
+          }
+          &--primary {
+            color: #00aaff;
+            border: 1px solid #00aaff;
+            box-shadow: inset 0 0 vw(8) 0 #00aaff;
+          }
+        }
+        .content {
+          margin-left: vw(4);
+          padding: 0 vw(10);
+          width: vw(660);
+          height: vh(24);
+          line-height: vh(24);
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-weight: 400;
+          font-size: vw(14);
+          color: #ffffff;
+          border-radius: vw(2);
+          background: rgba(0, 150, 255, 0.28);
+        }
+      }
+      .more {
+        cursor: pointer;
+        margin-top: vh(12);
+        width: vw(26);
+        height: vh(98);
+        font-weight: 400;
+        font-size: vw(14);
+        line-height: vh(10);
+        color: #ffffff;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #034e99;
+      }
+    }
+  }
+</style>

src/views/scenic/components/box-2.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="container">
+    <div class="flex">
+      <div class="box mr-10">
+        <Title1 title="排队信息" />
+        <div class="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>
+        <Line :width="540" :height="340" />
+      </div>
+      <div class="box mr-10">
+        <Title1 title="景区承载" />
+        <div class="flex">
+          <pie :width="160" :height="50" />
+          <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>
+        <Line :width="540" :height="300" />
+      </div>
+      <div class="box-1 mr-10">
+        <Title1 title="停车信息" />
+      </div>
+      <div class="box-2">
+        <Title1 title="安全信息 " />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import CountItem from './count-item.vue'
+  import pie from './pie.vue'
+</script>
+
+<style scoped lang="scss">
+  .container {
+    flex: 1;
+    margin: vh(120) vw(10) 0 vw(10);
+    .bg {
+      background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
+    }
+    .box {
+      @extend .bg;
+      width: vw(575);
+      height: vh(475);
+    }
+    .box-1 {
+      @extend .bg;
+      width: vw(770);
+      height: vh(475);
+    }
+    .box-2 {
+      @extend .bg;
+      width: vw(440);
+      height: vh(475);
+    }
+  }
+</style>

src/views/scenic/components/count-item.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="count-item">
+    <div class="flex align-center">
+      <img src="@/assets/images/dian.svg" />
+      <span class="label">{{ label }}</span>
+    </div>
+    <div class="count">
+      <img class="bg" src="@/assets/images/count-bg.svg" />
+      <div class="flex align-center">
+        <countup class="value" :end-val="count" />
+        <span class="suffix">{{ suffix }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import countup from 'vue-countup-v3'
+  let props = defineProps({
+    label: {
+      type: Number,
+      default: ''
+    },
+    count: {
+      type: Number,
+      default: 0
+    },
+    suffix: {
+      type: String,
+      default: ''
+    }
+  })
+</script>
+
+<style scoped lang="scss">
+  .count-item {
+    flex: 1;
+    .label {
+      font-weight: 400;
+      font-size: vw(14);
+      margin-left: vw(4);
+      color: rgba(255, 255, 255, 0.9);
+    }
+    .count {
+      position: relative;
+      margin-top: vh(10);
+      z-index: 1;
+      .value {
+        padding-left: vw(20);
+        font-weight: bold;
+        font-size: vw(28);
+        color: #02f9fa;
+      }
+      .suffix {
+        margin-top: vh(4);
+        font-weight: bold;
+        font-size: vw(12);
+        color: #02f9fa;
+      }
+      .bg {
+        width: 100%;
+        height: vh(40);
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: -1;
+      }
+    }
+  }
+</style>

src/views/scenic/components/pie.vue

@@ -0,0 +1,178 @@
+<template>
+  <div
+    class="gauge"
+    :id="id"
+    :style="{
+      width: styleUtil.px2vw(width),
+      height: styleUtil.px2vh(height)
+    }"
+  />
+</template>
+
+<script setup>
+  import * as echarts from 'echarts'
+  import { guid } from '@/utils/util'
+  import styleUtil from '@/utils/styleUtil'
+  import { fitChartSize } from '@/utils/dataUtil'
+
+  const props = defineProps({
+    width: {
+      type: Number,
+      default: () => 0
+    },
+    height: {
+      type: Number,
+      default: () => 0
+    }
+  })
+  let gaugeChart = null
+  let id = ref(guid())
+  let defaultCofig = {
+    title: [
+      {
+        text: '45.5%',
+        x: 'center',
+        top: '34%',
+        textStyle: {
+          color: '#00D0FF',
+          fontSize: fitChartSize(12)
+        }
+      },
+      {
+        text: '完成率',
+        x: 'center',
+        top: '56%',
+        textStyle: {
+          color: '#fff',
+          fontSize: fitChartSize(12)
+        }
+      }
+    ],
+    series: [
+      // 内侧环
+      {
+        type: 'gauge',
+        radius: '100%',
+        center: ['50%', '60%'],
+        min: 0,
+        max: 100,
+        startAngle: 180,
+        endAngle: 0,
+        itemStyle: {
+          color: '#00D0FF'
+        },
+        axisLine: {
+          show: true,
+          roundCap: false,
+          lineStyle: {
+            color: [
+              [0, '#075199'],
+              [1, '#075199']
+            ],
+            width: fitChartSize(6)
+          }
+        },
+        progress: {
+          show: true,
+          roundCap: false,
+          width: fitChartSize(6)
+        },
+        pointer: {
+          // 指针
+          show: false
+        },
+        axisTick: {
+          // 刻度
+          show: false
+        },
+        splitLine: {
+          // 分割线
+          show: false
+        },
+        axisLabel: {
+          // 刻度标签
+          show: false
+        },
+        detail: {
+          // 仪表盘详情
+          show: false
+        },
+        data: [
+          {
+            value: 50
+          }
+        ]
+      },
+      {
+        type: 'gauge',
+        radius: '90%',
+        center: ['50%', '60%'],
+        min: 0,
+        max: 100,
+        startAngle: 180,
+        endAngle: 0,
+        itemStyle: {
+          color: '#057EB9'
+        },
+        axisLine: {
+          roundCap: false,
+          lineStyle: {
+            color: [
+              [0, '#075199'],
+              [1, '#075199']
+            ],
+            width: fitChartSize(6)
+          }
+        },
+        progress: {
+          show: true,
+          roundCap: false,
+          width: fitChartSize(6)
+        },
+        pointer: {
+          // 指针
+          show: false
+        },
+        axisTick: {
+          // 刻度
+          show: false
+        },
+        splitLine: {
+          // 分割线
+          show: false
+        },
+        axisLabel: {
+          // 刻度标签
+          show: false
+        },
+        detail: {
+          // 仪表盘详情
+          show: false
+        },
+        data: [
+          {
+            value: 50
+          }
+        ]
+      }
+    ]
+  }
+
+  onMounted(() => {
+    init()
+  })
+  const init = () => {
+    // 基于准备好的dom，初始化echarts实例
+    gaugeChart = echarts.init(document.getElementById(id.value))
+    gaugeChart.setOption({ ...defaultCofig })
+    window.addEventListener('resize', resize)
+  }
+  const resize = () => {
+    if (gaugeChart) {
+      gaugeChart.dispose()
+      init()
+    }
+  }
+</script>
+
+<style lang="scss" scoped></style>

src/views/scenic/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <Header :current="current" :nav-left="navLeft" @on-change="onChange" />
+  <CoreVideo />
+  <box1 />
+  <box2 />
+  <Correspondence />
+</template>
+
+<script setup>
+  import box1 from './components/box-1.vue'
+  import box2 from './components/box-2.vue'
+
+  const navLeft = [{ name: '奉节县' }, { name: '龙桥河' }, { name: '山峡之巅' }]
+  let current = ref(0)
+
+  const onChange = (e) => {
+    current.value = e
+  }
+</script>
+
+<style scoped lang="scss"></style>