feat：对接景区数据和监控视频

2025-01-16 19:41:46 +08:00
parent 0c00523114
commit fd8ede8a32
20 changed files with 534 additions and 541 deletions
--- a/src/api/common.js
+++ b/src/api/common.js
@@ -3,14 +3,14 @@ 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
  })
@@ -18,7 +18,7 @@ export function getComDeptUsersApi(data) {
 // 最近联系
 export function getComRecordApi() {
  return request({
-    url: '/api/largeScreen/com/record',
+    url: '/fjtcc-api/api/largeScreen/com/record',
    method: 'get'
  })
 }
--- 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)"
--- 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" 
+        <div
+          class="item"
+          v-for="item in deptsList"
+          :key="item.id"
          @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>
    </div>
    <div class="bom-box">
@@ -23,14 +20,13 @@
        <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>
        </div>
@@ -64,7 +60,6 @@
 </template>

 <script setup>
-  import { useRouter } from 'vue-router'
  import { getComDeptsApi, getComDeptUsersApi, getComRecordApi } from '@/api/common'
  let deptsList = ref([])
  let dialogTableVisible = ref(false)
@@ -81,10 +76,9 @@
  let gridTitle = ref('')
  const handleDepsUser = async (id, item) => {
    gridTitle.value = item.name
+    dialogTableVisible.value = true
    let res = await getComDeptUsersApi({ id })
    gridData.value = res.data
-	  dialogTableVisible.value = true
-	  console.log(gridData.value,'getcomdepts')
  }

  onMounted(() => {
@@ -104,26 +98,21 @@
 </style>
 <style lang="scss" scoped>
  .sp-ico {
-		width:vw(50);
-		// height:vh(30);
+    width: vw(40);
  }
  .item-name {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		width:100%;
+    width: 90%;
+    text-align: center;
  }
  .sp-img {
    width: vw(100);
  }
-  .box-4-content {
-    position: relative;
+  .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;
--- 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;">
--- 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);
--- 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,
--- 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,
--- 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"
--- 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);
--- 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');
--- 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',
--- 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),
--- 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
--- 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>
--- 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>
+          <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>
-          <div class="cell">
-            <span class="tag tag--error">普通</span>
-            <p class="content">
-              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
-              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
-            </p>
+          </vue3-seamless-scroll>
        </div>
-          <div class="cell">
-            <span class="tag tag--primary">普通</span>
-            <p class="content">
-              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
-              工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
-            </p>
-          </div>
-        </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;
+        .tag--important {
+          @extend .tag;
+          background: #feae00;
        }
-          &--primary {
-            color: #00aaff;
-            border: 1px solid #00aaff;
-            box-shadow: inset 0 0 vw(8) 0 #00aaff;
+        .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;
--- 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>
--- 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
+      immediate: true
+    }
+  )
+
+  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
          },
          {
-      name: '延期中',
-      value: 800,
-      full: 1000
+            value: 100,
+            itemStyle: {
+              color: '#07439C'
+            }
          }
        ]
-  var returnData = function (qxzbData, name) {
-    for (var a = 0; a < qxzbData.length; a++) {
-      if (qxzbData[a].name == name) {
-        return qxzbData[a].value
      }
+    })
  }
-  }
-  let option = {
+
+  const init = () => {
+    if (!params) {
+      params = {
        backgroundColor: 'transparent',
-    tooltip: {
-      trigger: 'item',
-      formatter: function (rsp) {
-        if (rsp.name != '') {
-          return rsp.name + '<br/>' + rsp.marker + ' ' + rsp.value + ' （' + rsp.percent + '）'
-        }
-      }
-    },
        legend: {
+          show: true,
          x: 'center',
-      y: 'bottom',
-      data: qxzbData,
-      itemHeight: fitChartSize(8),
-      itemWidth: fitChartSize(8),
-      itemGap: fitChartSize(20),
+          y: '70%',
+          itemHeight: fitChartSize(12),
+          itemWidth: fitChartSize(12),
+          itemGap: fitChartSize(6),
          formatter: function (name) {
-        return '{title|' + name + '}  {value|' + returnData(qxzbData, name) + '}'
+            let obj = scenicStore.userPortraitData.data.channel.find((item) => item.name == name)
+            return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
          },
          textStyle: {
            rich: {
-          title: {
+              name: {
                color: '#fff',
-            fontSize: fitChartSize(14)
+                fontSize: fitChartSize(12)
              },
              value: {
                color: '#00D5F6',
-            fontSize: fitChartSize(14)
+                fontWeight: 600,
+                fontSize: fitChartSize(12)
              }
            }
          }
        },
        color: ['#F15A25', '#01FEFE', '#12B5FD'],
-    series: [
-      {
-        name: qxzbData[0].name, //最里面的圈
-        type: 'pie',
-        clockWise: false, //顺时加载
-        radius: ['15%', '25%'],
-        center: ['50%', '40%'],
-        label: {
-          normal: {
-            show: false
+        series: setSeries()
      }
-        },
-        labelLine: {
-          show: false
-        },
-        itemStyle: {
-          emphasis: {
-            show: false
+    } else {
+      params.series = setSeries()
    }
-        },
-        data: [
-          {
-            value: qxzbData[0].value,
-            name: qxzbData[0].name
-          },
-          {
-            value: qxzbData[0].full,
-            itemStyle: {
-              normal: {
-                color: '#07439C'
+    setOption(params)
  }
-            }
-          }
-        ]
-      },
-      {
-        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()
-    }
-  }
-  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>
--- a/src/views/scenic/components/top.vue
+++ b/src/views/scenic/components/top.vue
@@ -1,39 +1,20 @@
+<!-- 客源地分析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'

-  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,
+  const scenicStore = useScenicStore()
+  const { id, setOption } = useEchart()
+  let params = null
+
+  const init = () => {
+    if (!params) {
+      params = {
        backgroundColor: 'transparent',
        tooltip: {
          show: false
@@ -44,144 +25,110 @@
        grid: {
          left: '4%',
          right: '4%',
-      top: '6%',
-      bottom: '4%',
-      containLabel: true
+          top: '10%',
+          bottom: '-4%',
+          containLabel: false
        },
-    xAxis: [
-      {
-        splitLine: {
-          show: false
-        },
-        type: 'value',
-        show: false
-      }
-    ],
+        xAxis: [{ max: 100, show: false }],
        yAxis: [
          {
+            type: 'category',
            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)
+                fontSize: fitChartSize(18)
              },
              verticalAlign: 'bottom',
-          padding: [0, 0, 10, 0],
+              padding: [0, -fitChartSize(10), fitChartSize(10), 0],
              inside: true,
              formatter: function (value) {
-            return `{value|${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'
+                  fontSize: fitChartSize(14)
                }
              }
            },
-        data: result.map((item) => item.value)
+            data: scenicStore.userPortraitData.data.provinceRate.map((item) => Number(item.value))
          }
        ],
        series: [
          {
-        name: '',
            type: 'bar',
            barWidth: fitChartSize(12),
-        MaxSize: 0,
            showBackground: true,
-        barBorderRadius: [30, 0, 0, 30],
+            barBorderRadius: [0, 0, 0, 0],
            backgroundStyle: {
              color: 'rgba(0, 150, 255, 0.15)'
            },
            label: {
              show: true,
-          offset: [10, -17],
+              offset: [fitChartSize(12), -fitChartSize(20)],
              color: '#D3E5FF',
              fontWeight: 500,
              position: 'left',
              align: 'left',
              fontSize: fitChartSize(14),
-          fontFamily: 'Source Han Sans CN',
              formatter: function (params) {
-            return params.data.name
+                return params.data.name ?? '其他'
              }
            },
-        data: result.map((item, index) => {
+            data: scenicStore.userPortraitData.data.provinceRate.map((item) => {
              return {
                name: item.name,
-            value: item.value,
+                value: Number(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]
+                  barBorderRadius: [0, 0, 0, 0],
+                  color: parseFloat(item.value) > 50 ? '#FF7021' : '#00CCFF'
+                }
+              }
+            })
+          }
+        ]
+      }
+    }
+    setOption(params)
+  }
+
+  watch(
+    () => scenicStore.userPortraitData.data.provinceRate,
+    (val) => {
+      if (val.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
    },
    {
-                    offset: 1,
-                    color: colorList[index]
+      immediate: true
    }
-                ]
-              }
-            }
-          }
-        })
-      }
-    ]
-  }
-  const init = () => {
-    topChart = echarts.init(document.getElementById(id.value))
-    topChart.setOption(option)
-  }
-  const resize = () => {
-    if (topChart) {
-      topChart.dispose()
-      topChart = null
-      init()
-    }
-  }
-  onMounted(() => {
-    init()
-    window.addEventListener('resize', resize)
-  })
+  )
 </script>

 <style scoped lang="scss">
  .top {
-    width: vw(240);
-    height: vh(360);
+    width: vw(250);
+    height: vh(366);
  }
 </style>
--- 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