feat 安全检测

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>

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);
 }

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

@@ -0,0 +1,94 @@
+<template>
+  <div class="box-1">
+    <div class="title">核心景区视频</div>
+    <ul class="list">
+      <li
+        class="item"
+        :style="{ backgroundImage: `url(${index == 0 ? item1 : item2})` }"
+        v-for="(item, index) in 10"
+        :key="index"
+      >
+        <p class="item-title">三峡之巅-最新异常名称</p>
+        <img class="item-img" src="@/assets/images/cover.png" alt="" />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+  import item1 from '@/assets/images/item-1.png'
+  import item2 from '@/assets/images/item-2.png'
+
+  console.log(item1, 'item1')
+</script>
+
+<style lang="scss" scoped>
+  .box-1 {
+    margin: vh(10);
+    width: vw(326);
+    border-radius: vw(2);
+    background-image: url('@/assets/images/bg-1.png');
+    background-size: 100% 100%;
+
+    .title {
+      width: vw(260);
+      height: vh(26);
+      text-align: center;
+      line-height: vh(26);
+      margin-left: vw(32.5);
+      font-size: vw(16);
+      font-weight: 800;
+      color: #fff;
+      background-image: url('@/assets/images/title-1.png');
+      background-size: 100% 100%;
+    }
+
+    .list {
+      overflow-y: auto;
+      overflow-x: hidden;
+      height: vh(1026);
+      padding: vw(8);
+      /* 滚动条整体样式 */
+      &::-webkit-scrollbar {
+        width: vw(0); /* 滚动条的宽度 */
+      }
+
+      /* 滚动条轨道 */
+      &::-webkit-scrollbar-track {
+        background: #f1f1f1; /* 轨道的背景色 */
+      }
+
+      /* 滚动条滑块 */
+      &::-webkit-scrollbar-thumb {
+        background: #888; /* 滑块的背景色 */
+        border-radius: 5px; /* 滑块的圆角 */
+      }
+
+      /* 当鼠标悬停在滚动条上时滑块的样式 */
+      &::-webkit-scrollbar-thumb:hover {
+        background: #555; /* 滑块的背景色 */
+      }
+    }
+
+    .item {
+      margin-bottom: vh(13);
+      background-size: 100% 100%;
+      &-title {
+        margin-bottom: vh(6);
+        margin-left: vw(45);
+        color: #fff;
+        font-size: vw(16);
+        height: vh(24);
+        line-height: vh(24);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      &-img {
+        width: 100%;
+        height: vh(164);
+        display: block;
+      }
+    }
+  }
+</style>

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>

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="border">
           <div class="pt-10">
             <Title3 title="景区排队人数" />
           </div>
-        <Line :width="540" :height="340" />
+          <Line :width="520" :height="300" />
+        </div>
       </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="border">
           <div class="pt-10">
             <Title3 title="景区排队人数" />
           </div>
-        <Line :width="540" :height="300" />
+          <Line :width="520" :height="300" />
+        </div>
       </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);

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;
       }
     }

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()
     }
   }