From fd8ede8a325ae01197869a33d2cfc1d2de8b2131 Mon Sep 17 00:00:00 2001
From: zjc <1034206993@qq.com>
Date: Thu, 16 Jan 2025 19:41:46 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=AF=B9=E6=8E=A5=E6=99=AF?=
 =?UTF-8?q?=E5=8C=BA=E6=95=B0=E6=8D=AE=E5=92=8C=E7=9B=91=E6=8E=A7=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/common.js                       |  10 +-
 src/components/CoreVideo/index.vue      |   2 +-
 src/components/Correspondence/index.vue | 156 ++++++-------
 src/components/Line/index.vue           |   4 +-
 src/components/monitor/index.vue        | 172 +++++++++++---
 src/stores/home.js                      |  11 +
 src/stores/scenic.js                    |   7 +
 src/utils/config.js                     |   2 +-
 src/views/home/components/box-1.vue     |   2 +-
 src/views/home/components/box-2.vue     |  41 ++--
 src/views/home/components/box-3.vue     |   2 +-
 src/views/home/components/occupancy.vue |   4 +-
 src/views/home/components/ticket.vue    |   2 +-
 src/views/home/index.vue                |   4 +-
 src/views/monitor/components/box-2.vue  |   6 +-
 src/views/scenic/components/box-1.vue   |  81 +++----
 src/views/scenic/components/box-2.vue   |  18 +-
 src/views/scenic/components/ticket.vue  | 259 +++++++--------------
 src/views/scenic/components/top.vue     | 289 ++++++++++--------------
 src/views/scenic/index.vue              |   3 +
 20 files changed, 534 insertions(+), 541 deletions(-)

diff --git a/src/api/common.js b/src/api/common.js
index 6600c4d..a0964cb 100644
--- a/src/api/common.js
+++ b/src/api/common.js
@@ -3,22 +3,22 @@ import request from './request'
 // 部门列表
 export function getComDeptsApi() {
   return request({
-    url: '/api/largeScreen/com/depts',
+    url: '/fjtcc-api/api/largeScreen/com/depts',
     method: 'get'
   })
 }
 // 部门成员
 export function getComDeptUsersApi(data) {
   return request({
-    url: '/api/largeScreen/com/deptUsers',
+    url: '/fjtcc-api/api/largeScreen/com/deptUsers',
     method: 'get',
-	params: data
+    params: data
   })
 }
 // 最近联系
 export function getComRecordApi() {
   return request({
-    url: '/api/largeScreen/com/record',
+    url: '/fjtcc-api/api/largeScreen/com/record',
     method: 'get'
   })
-}
\ No newline at end of file
+}
diff --git a/src/components/CoreVideo/index.vue b/src/components/CoreVideo/index.vue
index dde7922..d69dfc6 100644
--- a/src/components/CoreVideo/index.vue
+++ b/src/components/CoreVideo/index.vue
@@ -4,7 +4,7 @@
     <ul class="list">
       <li
         class="item"
-        :style="{ backgroundImage: `url(${index == 0 ? primary : error})` }"
+        :style="{ backgroundImage: `url(${primary})` }"
         v-for="(item, index) in list"
         :key="index"
         @click.shop="handleItem(item)"
diff --git a/src/components/Correspondence/index.vue b/src/components/Correspondence/index.vue
index f0bf5f9..259bc51 100644
--- a/src/components/Correspondence/index.vue
+++ b/src/components/Correspondence/index.vue
@@ -1,20 +1,17 @@
 <template>
-  <div class="box-4-content">
+  <div class="correspondence">
     <div class="top-box">
       <div class="title">融合通信</div>
       <div class="icon-box flex">
-        <div class="item" 
-		@click="handleDepsUser(item.id,item)" 
-		v-for="(item,index) in deptsList" 
-		:key="item.id">
-			<img src="/src/assets/images/r-icon-1.png" />
-			<view class="item-name">{{item.name}}</view>
-		</div>
-     <!--   <div class="item"><img src="/src/assets/images/r-icon-2.png" />三峡之颠</div>
-        <div class="item"><img src="/src/assets/images/r-icon-3.png" />龙桥河</div>
-        <div class="item"><img src="/src/assets/images/r-icon-4.png" />消防队</div>
-        <div class="item"><img src="/src/assets/images/r-icon-5.png" />文旅城</div>
-        <div class="item"><img src="/src/assets/images/r-icon-6.png" />交通城</div> -->
+        <div
+          class="item"
+          v-for="item in deptsList"
+          :key="item.id"
+          @click="handleDepsUser(item.id, item)"
+        >
+          <img src="/src/assets/images/r-icon-1.png" />
+          <view class="item-name">{{ item.name }}</view>
+        </div>
       </div>
     </div>
     <div class="bom-box">
@@ -23,107 +20,99 @@
         <div class="header">
           <div>人员姓名</div>
           <div>部门</div>
-          <div>职位</div>
+
           <div>时间</div>
         </div>
         <div class="list">
           <div class="item" v-for="(item, index) in recordList" :key="index">
-            <div>{{item.nickname}}</div>
-            <div>{{item.department}}</div>
-            <div>{{item.postion}}</div>
-            <div>{{item.time}}</div>
+            <div>{{ item.nickname }}</div>
+            <div>{{ item.department }}</div>
+            <div>{{ item.time }}</div>
           </div>
         </div>
       </div>
     </div>
   </div>
-<el-dialog :title="gridTitle" center v-model="dialogTableVisible">
-	<div class="bom-box">
-	  <div class="table">
-	    <div class="header">
-	      <div>姓名</div>
-	      <div>部门</div>
-	      <div>职位</div>
-	      <div>电话号码</div>
-		  <div>操作</div>
-	    </div>
-	    <div class="list">
-	      <div class="item" v-for="(item, index) in gridData" :key="index">
-	        <div>{{item.nickName}}</div>
-	        <div>{{item.depthName}}</div>
-	        <div>{{item.postName}}</div>
-	        <div>{{item.phoneNumber}}</div>
-			<div>
-				<img class="sp-ico"  src="@/assets/images/sp-icom.png" />
-			</div>
-	      </div>
-	    </div>
-	  </div>
-	</div>
-</el-dialog>
+  <el-dialog :title="gridTitle" center v-model="dialogTableVisible">
+    <div class="bom-box">
+      <div class="table">
+        <div class="header">
+          <div>姓名</div>
+          <div>部门</div>
+          <div>职位</div>
+          <div>电话号码</div>
+          <div>操作</div>
+        </div>
+        <div class="list">
+          <div class="item" v-for="(item, index) in gridData" :key="index">
+            <div>{{ item.nickName }}</div>
+            <div>{{ item.depthName }}</div>
+            <div>{{ item.postName }}</div>
+            <div>{{ item.phoneNumber }}</div>
+            <div>
+              <img class="sp-ico" src="@/assets/images/sp-icom.png" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
 </template>
 
 <script setup>
-  import { useRouter } from 'vue-router'
-  import { getComDeptsApi,getComDeptUsersApi,getComRecordApi } from '@/api/common'
+  import { getComDeptsApi, getComDeptUsersApi, getComRecordApi } from '@/api/common'
   let deptsList = ref([])
   let dialogTableVisible = ref(false)
-  const getComDepts = async()=>{
-	  let res = await getComDeptsApi()
-	  deptsList.value = res.data
+  const getComDepts = async () => {
+    let res = await getComDeptsApi()
+    deptsList.value = res.data
   }
   let recordList = ref([])
-  const getComRecord = async()=>{
-  	  let res = await getComRecordApi()
-  	  recordList.value = res.data
+  const getComRecord = async () => {
+    let res = await getComRecordApi()
+    recordList.value = res.data
   }
   let gridData = ref([])
   let gridTitle = ref('')
-  const handleDepsUser = async(id,item)=>{
-	  gridTitle.value = item.name
-	  let res = await getComDeptUsersApi({id})
-	  gridData.value = res.data
-	  dialogTableVisible.value = true
-	  console.log(gridData.value,'getcomdepts')
+  const handleDepsUser = async (id, item) => {
+    gridTitle.value = item.name
+    dialogTableVisible.value = true
+    let res = await getComDeptUsersApi({ id })
+    gridData.value = res.data
   }
 
   onMounted(() => {
     getComDepts()
-	getComRecord()
+    getComRecord()
   })
 </script>
 <style>
-	.el-dialog {
-	 	background:url('/src/assets/images/map-bg-2.png') no-repeat top center;
-		background-size: 100% 100%;
-	 }
-	.el-dialog__title{
-	 	 color:#fff;
-	 	 font-weight: bold;
-	}
+  .el-dialog {
+    background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
+    background-size: 100% 100%;
+  }
+  .el-dialog__title {
+    color: #fff;
+    font-weight: bold;
+  }
 </style>
 <style lang="scss" scoped>
-	.sp-ico{
-		width:vw(50);
-		// height:vh(30);
-	}
-	.item-name{
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		width:100%;
-	}
-	.sp-img{
-		width:vw(100);
-	}
-  .box-4-content {
-    position: relative;
+  .sp-ico {
+    width: vw(40);
+  }
+  .item-name {
+    width: 90%;
+    text-align: center;
+  }
+  .sp-img {
+    width: vw(100);
+  }
+  .correspondence {
     margin: vw(8);
     width: vw(300);
-    height: vh(1060);
+    height: vh(1070);
     background-image: url('@/assets/images/bg-1.png');
     background-size: 100% 100%;
-   
   }
   .bom-box {
     .table {
@@ -211,7 +200,8 @@
       line-height: vh(16);
       flex-wrap: wrap;
       .item {
-        width: 33.33%;
+        cursor: pointer;
+        width: 50%;
         margin-top: vh(40);
         display: flex;
         flex-direction: column;
diff --git a/src/components/Line/index.vue b/src/components/Line/index.vue
index 72c5184..4b63b80 100644
--- a/src/components/Line/index.vue
+++ b/src/components/Line/index.vue
@@ -71,13 +71,13 @@
       formatter: (e) => {
         let valueStr = ''
         e.map((item) => {
-          valueStr += `<div>${item.seriesName}：${item.value}</div>`
+          valueStr += `<div>${item.axisValueLabel}：${item.value}</div>`
         })
         let str = `<div style="
                 background: #07356B;
                 border: 1px solid #0096FF;
                 color: #fff;
-                font-weight: 600;
+                font-weight: bold;
                 font-size: ${fitChartSize(16)}px;
                 border-radius: ${fitChartSize(4)}px;
                 padding: ${fitChartSize(4)}px ${fitChartSize(12)}px;">
diff --git a/src/components/monitor/index.vue b/src/components/monitor/index.vue
index 02fef75..aa49d55 100644
--- a/src/components/monitor/index.vue
+++ b/src/components/monitor/index.vue
@@ -5,7 +5,7 @@
         class="video-item"
         v-for="(item, index) in videoList"
         :key="index"
-        @click="handleItemVideo(item.hlsUrl, item.cameraName, item.updateTime)"
+        @click="handleItemVideo(item.hlsUrl, 100)"
       >
         <div class="video-item__inner">
           <video
@@ -25,13 +25,8 @@
       </div>
     </div>
   </div>
-
   <div class="video-detail" v-if="videoLog == 2">
-    <div class="video-detail__wrapper v-error-bg">
-      <div class="video-detail__title">
-        <span>{{ videoTitle }}</span>
-        <span>{{ videoUpdateTime }}</span>
-      </div>
+    <div class="video-detail__wrapper">
       <video
         class="video-detail__video"
         ref="videoRef"
@@ -43,16 +38,39 @@
         <source src="" type="application/x-mpegURL" />
       </video>
     </div>
-    <!-- <div class="video-rt">
-      <div class="title">
-        <span>最近联系</span>
-      </div>
-      <div class="rt-v-box">
-        <div class="rt-video v-error-bg" v-for="item in 8">
-          <div class="desc">核心路段：这是一条信息说明</div>
+    <div class="video-right">
+      <div class="flex justify-between">
+        <Title2 title="异常告警" />
+        <div class="back-box" @click="handleBack">
+          <img class="icon" src="@/assets/images/back.png" />
+          <span>返回</span>
         </div>
       </div>
-    </div> -->
+      <ul class="list">
+        <li
+          class="item"
+          v-for="(item, index) in videoList"
+          :key="index"
+          @click="handleItemVideo(item.hlsUrl, 101)"
+        >
+          <div>
+            <p class="item-title--primary">
+              {{ item.cameraName }}
+            </p>
+            <video
+              class="item-img"
+              :id="'monitorVideo' + index"
+              muted
+              autoplay
+              :controls="false"
+              style="object-fit: cover"
+            >
+              <source src="" type="application/x-mpegURL" />
+            </video>
+          </div>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -96,23 +114,41 @@
 
   let videoLog = ref(1)
   let videoRef = ref()
-  let videoTitle = ref('')
-  let videoUpdateTime = ref('')
 
-  const handleItemVideo = (url, title, time) => {
+  const initVideo = () => {
+    nextTick(() => {
+      videoList.value.forEach(async (item, index) => {
+        const video = document.getElementById(`monitorVideo${index}`)
+        let res = await postRefreshApi({
+          type: 'hls',
+          businessVideoDisplayPosition: item.businessVideoDisplayPosition,
+          cameraIndexCode: item.cameraIndexCode
+        })
+        item.hlsUrl = res.data.hlsUrl
+        const hls = new Hls()
+        hls.loadSource(res.data.hlsUrl)
+        hls.attachMedia(video)
+        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          video.play()
+        })
+      })
+    })
+  }
+  const handleBack = () => {
+    videoLog.value = 1
+    initVideo()
+  }
+
+  const handleItemVideo = (url, type) => {
     videoLog.value = 2
-    videoTitle.value = title
-    videoUpdateTime.value = time
     nextTick(() => {
       const hls = new Hls()
-      console.log(url, '111')
-      console.log(videoRef.value, '222')
-
       hls.loadSource(url)
       hls.attachMedia(videoRef.value)
       hls.on(Hls.Events.MANIFEST_PARSED, () => {
         videoRef.value.play()
       })
+      if (type == 100) initVideo()
     })
   }
 </script>
@@ -149,7 +185,7 @@
       }
     }
     &-item {
-      width: vw(404);
+      width: vw(410);
       height: vh(300);
       padding: vw(10);
       background-image: url('/src/assets/images/item-primary.png');
@@ -195,8 +231,8 @@
     &-detail__wrapper {
       position: relative;
       padding: vh(40) vw(50);
-      width: vw(1666);
-      height: vh(950);
+      width: vw(1660);
+      height: vh(960);
       background-image: url('/src/assets/images/one-video-bg.png');
       background-size: 100% 100%;
     }
@@ -218,6 +254,90 @@
       width: 100%;
       height: vh(880);
     }
+    &-right {
+      margin-left: vw(8);
+      width: vw(440);
+      height: vh(956);
+      background: #082f5a;
+      .back-box {
+        cursor: pointer;
+        padding-right: vw(20);
+        display: flex;
+        align-items: center;
+        .icon {
+          width: vw(30);
+          height: auto;
+          margin-right: vw(10);
+        }
+        & > span {
+          font-weight: bold;
+          font-size: vw(20);
+          color: #ffffff;
+        }
+      }
+      .list {
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: vh(920);
+        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(10);
+        padding: vw(10);
+        background-image: url('@/assets/images/item-primary.png');
+        background-size: 100% 100%;
+        & > div {
+          position: relative;
+        }
+        &-title {
+          position: absolute;
+          bottom: 0;
+          width: 100%;
+          padding: vw(10);
+          color: #fff;
+          font-size: vw(14);
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          z-index: 999;
+        }
+        &-title--error {
+          @extend .item-title;
+          background-color: rgba(226, 27, 27, 0.72);
+        }
+        &-title--primary {
+          @extend .item-title;
+          background-color: rgba(4, 30, 69, 0.72);
+        }
+        &-img {
+          width: 100%;
+          height: vh(164);
+          display: block;
+          object-fit: cover;
+        }
+      }
+    }
     .video-live {
       .video-rt {
         width: vw(400);
diff --git a/src/stores/home.js b/src/stores/home.js
index d840788..8ce085e 100644
--- a/src/stores/home.js
+++ b/src/stores/home.js
@@ -44,6 +44,12 @@ export const useHomeStore = defineStore('home', () => {
   let baiduMapData = ref(null)
   // 工单列表
   let wordkOrderList = ref([])
+  // 工单统计
+  let wordkOrderData = ref({
+    toDayData: { count: 15, end: 0, rate: '0.0' },
+    warnData: { count: 15, end: 0, rate: '0.0' }
+  })
+
   // 交通信息
   let trafficInfoData = ref({
     data: {
@@ -102,6 +108,9 @@ export const useHomeStore = defineStore('home', () => {
   const setScenicQueueData = (val) => {
     scenicQueueData.value = val
   }
+  const setWordkOrderData = (val) => {
+    wordkOrderData.value = val
+  }
   const setWordkOrderList = (val) => {
     wordkOrderList.value = val
   }
@@ -119,6 +128,7 @@ export const useHomeStore = defineStore('home', () => {
     userPortraitData,
     baiduMapData,
     wordkOrderList,
+    wordkOrderData,
     scenicQueueData,
     scenicBearData,
     visitorInfoData,
@@ -131,6 +141,7 @@ export const useHomeStore = defineStore('home', () => {
     setUserPortraitData,
     setBaiduMapData,
     setWordkOrderList,
+    setWordkOrderData,
     setScenicQueueData,
     setScenicBearData,
     setVisitorInfoData,
diff --git a/src/stores/scenic.js b/src/stores/scenic.js
index 304f3e9..3ab9dbb 100644
--- a/src/stores/scenic.js
+++ b/src/stores/scenic.js
@@ -47,7 +47,12 @@ export const useScenicStore = defineStore('scenic', () => {
       provinceRate: []
     }
   })
+  // 工单列表
+  let wordkOrderList = ref([])
 
+  const setWordkOrderList = (val) => {
+    wordkOrderList.value = val
+  }
   const setUserPortraitData = (val) => {
     userPortraitData.value = val
   }
@@ -70,6 +75,7 @@ export const useScenicStore = defineStore('scenic', () => {
     scenicSpotData.value = val
   }
   return {
+    wordkOrderList,
     scenicSpotData,
     scenicQueueData,
     scenicBearData,
@@ -77,6 +83,7 @@ export const useScenicStore = defineStore('scenic', () => {
     secureData,
     trafficData,
     userPortraitData,
+    setWordkOrderList,
     setScenicSpotData,
     setScenicQueueData,
     setScenicBearData,
diff --git a/src/utils/config.js b/src/utils/config.js
index e1d5822..ac35dec 100644
--- a/src/utils/config.js
+++ b/src/utils/config.js
@@ -1,5 +1,5 @@
 export const baseUrl = 'http://36.138.38.16:8001'
-export const proBaseUrl = ' http://192.168.77.200'
+export const proBaseUrl = 'http://192.168.77.200'
 
 export const socketBaseUrl = 'ws://36.138.38.16:81'
 export const proSocketBaseUrl = 'ws://192.168.77.200:8060'
diff --git a/src/views/home/components/box-1.vue b/src/views/home/components/box-1.vue
index 90c7483..8a68435 100644
--- a/src/views/home/components/box-1.vue
+++ b/src/views/home/components/box-1.vue
@@ -90,7 +90,7 @@
         <div class="mt-8">
           <age :list="homeStore.userPortraitData?.ageRate" />
         </div>
-        <div v-if="ageRateTotal > 0" class="count">总人数：<countup :end-val="ageRateTotal" /></div>
+        <div class="count">总人数：<countup :end-val="ageRateTotal" /></div>
         <div
           class="cell pt-20"
           v-for="(item, index) in homeStore?.userPortraitData.genderRate"
diff --git a/src/views/home/components/box-2.vue b/src/views/home/components/box-2.vue
index 539e0a9..3aadb5e 100644
--- a/src/views/home/components/box-2.vue
+++ b/src/views/home/components/box-2.vue
@@ -58,38 +58,44 @@
           <div class="flex justify-center pt-10">
             <div class="item">
               <p class="label">今日工单总条数</p>
-              <countup :endVal="1234" />
+              <countup :end-val="homeStore.wordkOrderData.toDayData.count" />
             </div>
             <div class="item">
               <p class="label">工单完成数</p>
-              <countup :endVal="1234" />
+              <countup class="complete" :end-val="homeStore.wordkOrderData.toDayData.end" />
             </div>
           </div>
           <div class="progress-box">
             <span class="text">工单完成数</span>
             <div class="progress-1">
-              <el-progress :percentage="50" :show-text="false" />
+              <el-progress
+                :percentage="homeStore.wordkOrderData.toDayData.rate"
+                :show-text="false"
+              />
             </div>
-            <span class="value">50%</span>
+            <span class="value">{{ homeStore.wordkOrderData.toDayData.rate }}%</span>
           </div>
         </div>
         <div>
           <div class="flex justify-center pt-10">
             <div class="item">
               <p class="label">紧急工单数</p>
-              <countup :endVal="1234" />
+              <countup class="error" :end-val="homeStore.wordkOrderData.warnData.count" />
             </div>
             <div class="item">
               <p class="label">紧急工单完成数</p>
-              <countup :endVal="1234" />
+              <countup class="complete" :end-val="homeStore.wordkOrderData.warnData.end" />
             </div>
           </div>
           <div class="progress-box">
             <span class="text">工单完成数</span>
             <div class="progress-2">
-              <el-progress :percentage="50" :show-text="false" />
+              <el-progress
+                :percentage="homeStore.wordkOrderData.warnData.rate"
+                :show-text="false"
+              />
             </div>
-            <span class="value">50%</span>
+            <span class="value">{{ homeStore.wordkOrderData.warnData.rate }}%</span>
           </div>
         </div>
       </div>
@@ -162,9 +168,10 @@
   const getSpotList = async () => {
     let res = await getSpotListApi()
     spotList.value = res.data
-    // let res1 = await getBaiduMapCrowdedApi({
-    //   nodeId: res.data[0].nodeid
-    // })
+    let res1 = await getBaiduMapCrowdedApi({
+      nodeId: res.data[0].nodeid
+    })
+    console.log(res1, 'res1')
   }
 
   watch(
@@ -338,16 +345,22 @@
             justify-content: center;
           }
           .label {
+            margin-bottom: vh(10);
             font-weight: 400;
             font-size: vw(14);
-            margin-bottom: vh(10);
-            color: rgba(255, 255, 255, 0.9);
+            color: #ffffff;
           }
           .countup-wrap {
             color: #02f9fa;
             font-size: vw(28);
             font-weight: bold;
           }
+          .error {
+            color: #e21b1b;
+          }
+          .complete {
+            color: #ffffff;
+          }
           .progress-box {
             margin-top: vh(10);
             display: flex;
@@ -388,7 +401,7 @@
         }
       }
       .right {
-        margin-top: vh(8);
+        margin-top: vh(4);
         padding: vh(10) vw(10);
         height: vh(106);
         width: vw(1040);
diff --git a/src/views/home/components/box-3.vue b/src/views/home/components/box-3.vue
index 6eb9623..078c134 100644
--- a/src/views/home/components/box-3.vue
+++ b/src/views/home/components/box-3.vue
@@ -359,7 +359,7 @@
       flex: 1;
       & > div {
         position: relative;
-        height: vh(110);
+        height: vh(114);
         display: flex;
         align-items: center;
         background-image: url('@/assets/images/bg-4.png');
diff --git a/src/views/home/components/occupancy.vue b/src/views/home/components/occupancy.vue
index 4a60d9e..e282e1c 100644
--- a/src/views/home/components/occupancy.vue
+++ b/src/views/home/components/occupancy.vue
@@ -127,7 +127,7 @@
                 fontSize: fitChartSize(12)
               },
               verticalAlign: 'bottom',
-              padding: [0, 0, 6, 0],
+              padding: [0, 0, 10, 0],
               inside: true,
               formatter: function (value) {
                 return `{value|${value}}{value|%}`
@@ -156,7 +156,7 @@
             },
             label: {
               show: true,
-              offset: [10, -10],
+              offset: [10, -14],
               color: '#fff',
               fontWeight: 500,
               position: 'left',
diff --git a/src/views/home/components/ticket.vue b/src/views/home/components/ticket.vue
index 3297d06..8ee5e38 100644
--- a/src/views/home/components/ticket.vue
+++ b/src/views/home/components/ticket.vue
@@ -66,7 +66,7 @@
         legend: {
           show: true,
           x: 'center',
-          y: 'bottom',
+          y: '70%',
           itemHeight: fitChartSize(12),
           itemWidth: fitChartSize(12),
           itemGap: fitChartSize(6),
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 41f0230..f2460cc 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -2,7 +2,6 @@
   <box1 />
   <box2 @switch-spot="switchSpot" />
   <box3 />
-  
 </template>
 
 <script setup>
@@ -63,6 +62,9 @@
           case 'wordkOrderlist':
             homeStore.setWordkOrderList(val.data)
             break
+          case 'wordkOrderTotal':
+            homeStore.setWordkOrderData(val)
+            break
           case 'trafficInformation':
             homeStore.setTrafficInfoData(val)
             break
diff --git a/src/views/monitor/components/box-2.vue b/src/views/monitor/components/box-2.vue
index c489e95..6e68691 100644
--- a/src/views/monitor/components/box-2.vue
+++ b/src/views/monitor/components/box-2.vue
@@ -26,9 +26,9 @@
 </script>
 <style lang="scss" scoped>
   .box-2 {
-    margin-top: vh(120);
-    width: vw(2356);
-    height: vh(965);
     display: flex;
+    flex: 1;
+    margin-top: vh(120);
+    height: vh(965);
   }
 </style>
diff --git a/src/views/scenic/components/box-1.vue b/src/views/scenic/components/box-1.vue
index a09e435..430d172 100644
--- a/src/views/scenic/components/box-1.vue
+++ b/src/views/scenic/components/box-1.vue
@@ -67,29 +67,24 @@
       </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>
+          <vue3-seamless-scroll
+            class="list"
+            :list="scenicStore.wordkOrderList"
+            :limitScrollNum="3"
+            :hover="true"
+            :step="0.2"
+            :wheel="true"
+            :isWatch="true"
+          >
+            <div class="cell" v-for="(item, index) in scenicStore.wordkOrderList" :key="index">
+              <span :class="`tag--${item.level}`">{{ item.level_text }}</span>
+              <p class="content">
+                {{ item.title }}
+              </p>
+            </div>
+          </vue3-seamless-scroll>
         </div>
-        <img class="more" src="@/assets/images/more-col.png" alt="查看更多" />
+        <img class="more" src="@/assets/images/more-col.png" alt="查看更多" @click="handleMore" />
       </div>
     </div>
   </div>
@@ -97,9 +92,16 @@
 
 <script setup>
   import countup from 'vue-countup-v3'
+  import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
   import { useScenicStore } from '@/stores/scenic'
+  import { useRouter } from 'vue-router'
 
+  const router = useRouter()
   const scenicStore = useScenicStore()
+
+  const handleMore = () => {
+    router.push('/workOrder')
+  }
 </script>
 
 <style scoped lang="scss">
@@ -205,6 +207,11 @@
           }
         }
       }
+      .list {
+        margin-top: vh(4);
+        height: vh(116);
+        overflow: hidden;
+      }
       .cell {
         display: flex;
         margin-left: vw(4);
@@ -216,30 +223,28 @@
           padding: 0 vw(16);
           font-weight: bold;
           font-size: vw(14);
+          color: #fff;
           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;
-          }
+        }
+        .tag--important {
+          @extend .tag;
+          background: #feae00;
+        }
+        .tag--warn {
+          @extend .tag;
+          background: #d9011b;
+        }
+        .tag--normal {
+          @extend .tag;
+          background: #2380fb;
         }
         .content {
           margin-left: vw(4);
           padding: 0 vw(10);
-          width: vw(660);
+          width: vw(760);
           height: vh(24);
           line-height: vh(24);
           white-space: nowrap;
diff --git a/src/views/scenic/components/box-2.vue b/src/views/scenic/components/box-2.vue
index b9ffefa..1760cb8 100644
--- a/src/views/scenic/components/box-2.vue
+++ b/src/views/scenic/components/box-2.vue
@@ -115,7 +115,7 @@
             label="安全告警占比"
             :dataList="scenicStore.secureData.dataList"
             :total="alarmTotal"
-            :width="350"
+            :width="460"
             :height="300"
           />
         </div>
@@ -141,26 +141,10 @@
           <div class="border mr-8">
             <Title3 title="拥堵次数占比" />
             <jam :width="220" :height="160" />
-            <!-- <div class="legend">
-              <ul class="legend__wrapper">
-                <li class="legend-item" v-for="(item, index) in 6" :key="index">
-                  <p class="legend-item-label">路段1</p>
-                  <p class="legend-item-value">10%</p>
-                </li>
-              </ul>
-            </div> -->
           </div>
           <div class="border">
             <Title3 title="拥堵时长占比" />
             <jam :width="220" :height="160" />
-            <!-- <div class="legend">
-              <ul class="legend__wrapper">
-                <li class="legend-item" v-for="(item, index) in 6" :key="index">
-                  <p class="legend-item-label">路段1</p>
-                  <p class="legend-item-value">10%</p>
-                </li>
-              </ul>
-            </div> -->
           </div>
         </div>
       </div>
diff --git a/src/views/scenic/components/ticket.vue b/src/views/scenic/components/ticket.vue
index 9de5971..3886033 100644
--- a/src/views/scenic/components/ticket.vue
+++ b/src/views/scenic/components/ticket.vue
@@ -1,195 +1,106 @@
+<!-- 购票来源 -->
 <template>
   <div class="ticket" :id="id" />
 </template>
 
 <script setup>
   import { fitChartSize } from '@/utils/dataUtil'
-  import * as echarts from 'echarts'
-  import { guid } from '@/utils/util'
+  import { useEchart } from '@/hooks/echart'
 
-  let id = ref(guid())
-  let ticketChart = null
-  var qxzbData = [
-    {
-      name: '处理中',
-      value: 500,
-      full: 1000 // 最大值
+  import { useScenicStore } from '@/stores/scenic'
+
+  const scenicStore = useScenicStore()
+
+  const { id, setOption } = useEchart()
+
+  let x = 15
+  let y = 25
+  let params = null
+
+  watch(
+    () => scenicStore.userPortraitData.data.channel,
+    (val) => {
+      if (val.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
     },
     {
-      name: '超期中',
-      value: 756,
-      full: 1000
-    },
-    {
-      name: '延期中',
-      value: 800,
-      full: 1000
+      immediate: true
     }
-  ]
-  var returnData = function (qxzbData, name) {
-    for (var a = 0; a < qxzbData.length; a++) {
-      if (qxzbData[a].name == name) {
-        return qxzbData[a].value
+  )
+
+  const setSeries = () => {
+    return scenicStore.userPortraitData.data.channel.map((item, index) => {
+      return {
+        name: item.name,
+        type: 'pie',
+        clockwise: false,
+        silent: true,
+        radius: [`${x * (index + 1)}%`, `${y + index * 15}%`],
+        center: ['50%', '40%'],
+        label: { show: false },
+        labelLine: { show: false },
+        emphasis: { show: false },
+        data: [
+          {
+            value: parseFloat(item.value),
+            name: item.name
+          },
+          {
+            value: 100,
+            itemStyle: {
+              color: '#07439C'
+            }
+          }
+        ]
       }
-    }
-  }
-  let option = {
-    backgroundColor: 'transparent',
-    tooltip: {
-      trigger: 'item',
-      formatter: function (rsp) {
-        if (rsp.name != '') {
-          return rsp.name + '<br/>' + rsp.marker + ' ' + rsp.value + ' （' + rsp.percent + '）'
-        }
-      }
-    },
-    legend: {
-      x: 'center',
-      y: 'bottom',
-      data: qxzbData,
-      itemHeight: fitChartSize(8),
-      itemWidth: fitChartSize(8),
-      itemGap: fitChartSize(20),
-      formatter: function (name) {
-        return '{title|' + name + '}  {value|' + returnData(qxzbData, name) + '}'
-      },
-      textStyle: {
-        rich: {
-          title: {
-            color: '#fff',
-            fontSize: fitChartSize(14)
-          },
-          value: {
-            color: '#00D5F6',
-            fontSize: fitChartSize(14)
-          }
-        }
-      }
-    },
-    color: ['#F15A25', '#01FEFE', '#12B5FD'],
-    series: [
-      {
-        name: qxzbData[0].name, //最里面的圈
-        type: 'pie',
-        clockWise: false, //顺时加载
-        radius: ['15%', '25%'],
-        center: ['50%', '40%'],
-        label: {
-          normal: {
-            show: false
-          }
-        },
-        labelLine: {
-          show: false
-        },
-        itemStyle: {
-          emphasis: {
-            show: false
-          }
-        },
-        data: [
-          {
-            value: qxzbData[0].value,
-            name: qxzbData[0].name
-          },
-          {
-            value: qxzbData[0].full,
-            itemStyle: {
-              normal: {
-                color: '#07439C'
-              }
-            }
-          }
-        ]
-      },
-      {
-        name: qxzbData[1].name, //第二个圈
-        type: 'pie',
-        clockWise: false, //顺时加载
-        radius: ['35%', '45%'],
-        center: ['50%', '40%'],
-        label: {
-          normal: {
-            show: false
-          }
-        },
-        labelLine: {
-          show: false
-        },
-        itemStyle: {
-          emphasis: {
-            show: false
-          }
-        },
-        data: [
-          {
-            value: qxzbData[1].value,
-            name: qxzbData[1].name
-          },
-          {
-            value: qxzbData[1].full,
-            itemStyle: {
-              normal: {
-                color: '#07439C'
-              }
-            }
-          }
-        ]
-      },
-      {
-        name: qxzbData[2].name, //最外层圈
-        type: 'pie',
-        clockWise: false, //顺时加载
-        radius: ['55%', '65%'],
-        center: ['50%', '40%'],
-        label: {
-          normal: {
-            show: false
-          }
-        },
-        labelLine: {
-          show: false
-        },
-        itemStyle: {
-          emphasis: {
-            show: false
-          }
-        },
-        data: [
-          {
-            value: qxzbData[2].value,
-            name: qxzbData[2].name
-          },
-          {
-            value: qxzbData[2].full,
-            itemStyle: {
-              normal: {
-                color: '#07439C'
-              }
-            }
-          }
-        ]
-      }
-    ]
+    })
   }
+
   const init = () => {
-    ticketChart = echarts.init(document.getElementById(id.value))
-    ticketChart.setOption(option)
-  }
-  const resize = () => {
-    if (ticketChart) {
-      ticketChart.resize()
+    if (!params) {
+      params = {
+        backgroundColor: 'transparent',
+        legend: {
+          show: true,
+          x: 'center',
+          y: '70%',
+          itemHeight: fitChartSize(12),
+          itemWidth: fitChartSize(12),
+          itemGap: fitChartSize(6),
+          formatter: function (name) {
+            let obj = scenicStore.userPortraitData.data.channel.find((item) => item.name == name)
+            return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
+          },
+          textStyle: {
+            rich: {
+              name: {
+                color: '#fff',
+                fontSize: fitChartSize(12)
+              },
+              value: {
+                color: '#00D5F6',
+                fontWeight: 600,
+                fontSize: fitChartSize(12)
+              }
+            }
+          }
+        },
+        color: ['#F15A25', '#01FEFE', '#12B5FD'],
+        series: setSeries()
+      }
+    } else {
+      params.series = setSeries()
     }
+    setOption(params)
   }
-  onMounted(() => {
-    init()
-    window.addEventListener('resize', resize)
-  })
 </script>
 
 <style scoped lang="scss">
   .ticket {
-    width: vw(250);
-    height: vh(300);
+    width: vw(260);
+    height: vh(336);
   }
 </style>
diff --git a/src/views/scenic/components/top.vue b/src/views/scenic/components/top.vue
index 82a435b..5008163 100644
--- a/src/views/scenic/components/top.vue
+++ b/src/views/scenic/components/top.vue
@@ -1,187 +1,134 @@
+<!-- 客源地分析TOP5 -->
 <template>
   <div class="top" :id="id" />
 </template>
 
 <script setup>
   import { fitChartSize } from '@/utils/dataUtil'
-  import * as echarts from 'echarts'
-  import { guid } from '@/utils/util'
+  import { useEchart } from '@/hooks/echart'
+  import { useScenicStore } from '@/stores/scenic'
+
+  const scenicStore = useScenicStore()
+  const { id, setOption } = useEchart()
+  let params = null
 
-  let id = ref(guid())
-  let topChart = null
-  let colorList = [
-    'rgba(255, 38, 38, 1)',
-    'rgba(255, 96, 0, 1)',
-    'rgba(255, 165, 7, 1)',
-    'rgba(0, 234, 255, 1)',
-    'rgba(0, 132, 255, 1)',
-    '#2379FF'
-  ]
-  let colorListA = [
-    'rgba(255, 38, 38, 0.1)',
-    'rgba(255, 96, 0, 0.1)',
-    'rgba(255, 165, 7, 0.1)',
-    'rgba(0, 234, 255, 0.1)',
-    'rgba(0, 132, 255, 0.1)',
-    '#49B1FF'
-  ]
-  let result = [
-    { name: '河北', value: 86 },
-    { name: '山西', value: 83 },
-    { name: '河南', value: 73 },
-    { name: '内蒙', value: 61 },
-    { name: '辽宁', value: 61 }
-  ]
-  let option = {
-    color: colorList,
-    backgroundColor: 'transparent',
-    tooltip: {
-      show: false
-    },
-    legend: {
-      show: false
-    },
-    grid: {
-      left: '4%',
-      right: '4%',
-      top: '6%',
-      bottom: '4%',
-      containLabel: true
-    },
-    xAxis: [
-      {
-        splitLine: {
-          show: false
-        },
-        type: 'value',
-        show: false
-      }
-    ],
-    yAxis: [
-      {
-        splitLine: {
-          show: false
-        },
-        axisLine: {
-          show: false
-        },
-        type: 'category',
-        axisTick: {
-          show: false
-        },
-        data: result.map((item) => item.name),
-        axisLabel: {
-          show: false
-        }
-      },
-      {
-        type: 'category',
-        inverse: true,
-        axisTick: 'none',
-        axisLine: 'none',
-        show: true,
-        axisLabel: {
-          textStyle: {
-            color: '#fff',
-            fontSize: fitChartSize(12)
-          },
-          verticalAlign: 'bottom',
-          padding: [0, 0, 10, 0],
-          inside: true,
-          formatter: function (value) {
-            return `{value|${value}}`
-          },
-          rich: {
-            name: {
-              align: 'center',
-              color: '#D3E5FF',
-              fontSize: fitChartSize(14),
-              fontFamily: 'Source Han Sans CN'
-            },
-            value: {
-              align: 'center',
-              color: '#fff',
-              fontSize: fitChartSize(14),
-              fontFamily: 'Source Han Sans CN'
-            }
-          }
-        },
-        data: result.map((item) => item.value)
-      }
-    ],
-    series: [
-      {
-        name: '',
-        type: 'bar',
-        barWidth: fitChartSize(12),
-        MaxSize: 0,
-        showBackground: true,
-        barBorderRadius: [30, 0, 0, 30],
-        backgroundStyle: {
-          color: 'rgba(0, 150, 255, 0.15)'
-        },
-        label: {
-          show: true,
-          offset: [10, -17],
-          color: '#D3E5FF',
-          fontWeight: 500,
-          position: 'left',
-          align: 'left',
-          fontSize: fitChartSize(14),
-          fontFamily: 'Source Han Sans CN',
-          formatter: function (params) {
-            return params.data.name
-          }
-        },
-        data: result.map((item, index) => {
-          return {
-            name: item.name,
-            value: item.value,
-            itemStyle: {
-              barBorderRadius: [3, 0, 0, 3],
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 1,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: colorListA[index]
-                  },
-                  {
-                    offset: 1,
-                    color: colorList[index]
-                  }
-                ]
-              }
-            }
-          }
-        })
-      }
-    ]
-  }
   const init = () => {
-    topChart = echarts.init(document.getElementById(id.value))
-    topChart.setOption(option)
-  }
-  const resize = () => {
-    if (topChart) {
-      topChart.dispose()
-      topChart = null
-      init()
+    if (!params) {
+      params = {
+        backgroundColor: 'transparent',
+        tooltip: {
+          show: false
+        },
+        legend: {
+          show: false
+        },
+        grid: {
+          left: '4%',
+          right: '4%',
+          top: '10%',
+          bottom: '-4%',
+          containLabel: false
+        },
+        xAxis: [{ max: 100, show: false }],
+        yAxis: [
+          {
+            type: 'category',
+            splitLine: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            }
+          },
+          {
+            type: 'category',
+            axisTick: 'none',
+            axisLine: 'none',
+            show: true,
+            axisLabel: {
+              textStyle: {
+                color: '#fff',
+                fontSize: fitChartSize(18)
+              },
+              verticalAlign: 'bottom',
+              padding: [0, -fitChartSize(10), fitChartSize(10), 0],
+              inside: true,
+              formatter: function (value) {
+                return `{value|${value}}%`
+              },
+              rich: {
+                value: {
+                  align: 'center',
+                  color: '#fff',
+                  fontSize: fitChartSize(14)
+                }
+              }
+            },
+            data: scenicStore.userPortraitData.data.provinceRate.map((item) => Number(item.value))
+          }
+        ],
+        series: [
+          {
+            type: 'bar',
+            barWidth: fitChartSize(12),
+            showBackground: true,
+            barBorderRadius: [0, 0, 0, 0],
+            backgroundStyle: {
+              color: 'rgba(0, 150, 255, 0.15)'
+            },
+            label: {
+              show: true,
+              offset: [fitChartSize(12), -fitChartSize(20)],
+              color: '#D3E5FF',
+              fontWeight: 500,
+              position: 'left',
+              align: 'left',
+              fontSize: fitChartSize(14),
+              formatter: function (params) {
+                return params.data.name ?? '其他'
+              }
+            },
+            data: scenicStore.userPortraitData.data.provinceRate.map((item) => {
+              return {
+                name: item.name,
+                value: Number(item.value),
+                itemStyle: {
+                  barBorderRadius: [0, 0, 0, 0],
+                  color: parseFloat(item.value) > 50 ? '#FF7021' : '#00CCFF'
+                }
+              }
+            })
+          }
+        ]
+      }
     }
+    setOption(params)
   }
-  onMounted(() => {
-    init()
-    window.addEventListener('resize', resize)
-  })
+
+  watch(
+    () => scenicStore.userPortraitData.data.provinceRate,
+    (val) => {
+      if (val.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
+    },
+    {
+      immediate: true
+    }
+  )
 </script>
 
 <style scoped lang="scss">
   .top {
-    width: vw(240);
-    height: vh(360);
+    width: vw(250);
+    height: vh(366);
   }
 </style>
diff --git a/src/views/scenic/index.vue b/src/views/scenic/index.vue
index 1c2c1ab..9082c10 100644
--- a/src/views/scenic/index.vue
+++ b/src/views/scenic/index.vue
@@ -30,6 +30,9 @@
       if (val) {
         console.log(val, '接受消息')
         switch (val.type) {
+          case 'wordkOrderlist':
+            scenicStore.setWordkOrderList(val.data)
+            break
           case 'scenicSpotData':
             scenicStore.setScenicSpotData(val.data)
             break