feat 游客总数弹窗

src/api/home.js

@@ -132,3 +132,11 @@ export function getVideCollectCateSort(data) {
     data
   })
 }
+//今年游客总数
+export function getSpotVisitor(data) {
+  return request({
+    url: '/fjtcc-api/api/largeScreen/spot/spotVisitor',
+    method: 'get',
+    data
+  })
+}

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

@@ -3,7 +3,9 @@
     <div class="header" :class="homeStore.amplify?'':'coll-box-2'">
       <div class="flex">
         <div class="left">
-          <div class="item">
+          <div class="item"
+			  @click="dialogTableVisible = true" 
+			  style="cursor: pointer;">
             <div class="label">今年总游客数</div>
             <scroll-number :count="homeStore.visitorInfoData.total_count_this_year" prefix="1" />
 			<!-- -->
@@ -117,6 +119,26 @@
         </vue3-seamless-scroll>
       </div>
     </div>
+		<el-dialog title="今年总游客数" center v-model="dialogTableVisible">
+		  <div class="bom-box">
+		    <div class="table">
+		
+		      <div class="header">
+		        <div>景区</div>
+		        <div>今年游客数</div>
+		       
+		      </div>
+		      <div class="list">
+		        <div class="item" v-for="(item, index) in orderedScenicData" :key="index">
+		          <div>{{item.name}}</div>
+		          <div>{{item.value}}</div>
+		        
+		       
+		        </div>
+		      </div>
+		    </div>
+		  </div>
+		</el-dialog>
   </div>
 </template>
 
@@ -125,7 +147,7 @@
   import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
 
   import ScrollNumber from '@/components/ScrollNumber/index.vue'
-  import { getSpotListApi, getBaiduMapApi, getBaiduMapCrowdedApi } from '@/api/home'
+  import { getSpotListApi, getBaiduMapApi, getBaiduMapCrowdedApi,getSpotVisitor } from '@/api/home'
 
   import icon8 from '@/assets/images/icon-8.png'
   import icon9 from '@/assets/images/icon-9.png'
@@ -146,6 +168,20 @@
   const handleMap = (e) => {
     emit('switch-spot', e)
     // map.value.centerAndZoom(new BMapGL.Point('108.704166', '30.94776'), 16)
+  }
+	const dialogTableVisible = ref(false)
+    const visitorList = ref([])
+    const scenicOrder = ['白帝城·瞿塘峡', '三峡之巅', '龙桥河'];
+    const orderedScenicData = computed(() => {
+      return scenicOrder.map(name => ({
+        name: name, // 景点名（键）
+        value: visitorList.value[name] // 对应数值（值）
+      }));
+    });
+    const getSpotVisitorList = async () => {
+      let res = await getSpotVisitor()
+    	visitorList.value = res.data
+      console.log(res,'getSpotVisitor')
     }
   const getSpotList = async () => {
     let res = await getSpotListApi()
@@ -364,10 +400,108 @@
 
   onMounted(() => {
     getSpotList()
-
+	getSpotVisitorList()
   })
 </script>
-
+<style lang="scss" scoped>
+	:deep(.el-dialog__headerbtn .el-dialog__close){
+			color:#fff;
+			font-size:30px;
+			position:relative;
+			top:15px;
+			right:15px;
+		}
+	:deep(.el-dialog) {
+	  background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
+	  background-size: 100% 100%;
+	}
+	:deep(.el-dialog__title) {
+	  color: #fff;
+	  font-weight: bold;
+	}
+	.bom-box {
+		  .table2{
+			  width:100%;
+			  height:vh(740);
+		  }
+	  .table {
+	    width: 100%;
+	    margin-top: vh(5);
+	    .header {
+	      height: vh(28);
+	      font-weight: 400;
+	      font-size: vw(12);
+	      color: #fff;
+	      display: flex;
+		  padding:0;
+		  width:100%;
+	      background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
+	      & > div {
+	        flex: 1;
+	        display: flex;
+	        align-items: center;
+	        justify-content: center;
+	      }
+	    }
+	    .list {
+	      overflow-y: auto;
+	      height: vh(490);
+	      /* 滚动条整体样式 */
+	      &::-webkit-scrollbar {
+	        width: vw(4); /* 滚动条的宽度 */
+	      }
+	      /* 滚动条轨道 */
+	      &::-webkit-scrollbar-track {
+	        background: 'transparent'; /* 轨道的背景色 */
+	      }
+	      /* 滚动条滑块 */
+	      &::-webkit-scrollbar-thumb {
+	        background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+	        border-radius: 5px; /* 滑块的圆角 */
+	      }
+	      .item {
+	        height: vh(50);
+	        font-weight: 400;
+	        font-size: vw(14);
+	        color: #f1f7ff;
+	        display: flex;
+	        &:nth-child(2n + 1) {
+	          background: linear-gradient(
+	            90deg,
+	            rgba(0, 150, 255, 0) 0%,
+	            rgba(0, 150, 255, 0.22) 100%
+	          );
+	        }
+	        & > div {
+	          flex: 1;
+	          display: flex;
+	          align-items: center;
+	          justify-content: center;
+	          white-space: nowrap; /* 保证文本在一行内显示 */
+	          overflow: hidden; /* 隐藏溢出的内容 */
+	          text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
+	        }
+	      }
+	    }
+	  }
+	  .title {
+	    span {
+	      margin-left: vw(30);
+	      font-weight: 800;
+	      font-size: vw(15);
+	      line-height: vh(26);
+	      text-align: center;
+	      font-style: normal;
+	      text-transform: none;
+	      background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
+	      -webkit-background-clip: text;
+	      background-clip: text;
+	      -webkit-text-fill-color: transparent;
+	      color: transparent;
+	    }
+	  }
+	}
+</style>
 <style lang="scss" scoped>
   .workorder-empty{
     text-align: center;