30

src/api/home.js

@@ -91,3 +91,12 @@ export function getBaiduMapCrowdedApi(data) {
     params: data
   })
 }
+// 订票弹窗
+
+export function getSpotTicketDate(data) {
+  return request({
+    url: '/fjtcc-api/api/largeScreen/spot/ticketDate',
+    method: 'get',
+    params: data
+  })
+}

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

@@ -294,9 +294,16 @@
     }
   }
   const currentChange = (e) => {
-    clearHlsRefs()
+	  if(navList.value.length==current.value){
-    videoList.value = []
+		  clearHlsRefs()
-    getVideoList()
+		  videoList.value = []
+		  getColletList()
+	  }else{
+		  clearHlsRefs()
+		  videoList.value = []
+		  getVideoList()
+	  }
+  
   }
   const  getColletList = async () => {
 	clearHlsRefs()

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

@@ -1,7 +1,7 @@
 <template>
   <div class="box-1">
     <div class="header">
-     <div class="header__left">
+     <div class="header__left" @click="handlePiaoPop">
         <img src="@/assets/images/ticket.png" />
         <div
           class="header__left-item"
@@ -100,8 +100,27 @@
         <img class="more" src="@/assets/images/more-col.png" alt="查看更多" @click="handleMore" />
       </div>
     </div>
+	<el-dialog :title="'未来预定票数'" center v-model="dialogTableVisible">
+	  <div class="bom-box">
+	    <div class="table">
+			<div class="header-title">{{gridTitle}}</div>
+	      <div class="header">
+	        <div>订票时间</div>
+	        <div>订票数量</div>
+	      </div>
+	      <div class="list">
+	        <div class="item" v-for="(item, index) in gridData" :key="index">
+	          <div>{{ item.time }}</div>
+	          <div>{{ item.value }}</div>
+	        
+	        </div>
+	      </div>
+	    </div>
+	  </div>
+	</el-dialog>
   </div>
   <video-dialog v-model="videoShow" :src="src" :cameraIndexCode="cameraIndexCode" />
+
 </template>
 
 <script setup>
@@ -113,7 +132,7 @@
   import { useScenicStore } from '@/stores/scenic'
 
   import { useMap } from '@/hooks/map'
-  import {getPreviewUrlApi} from "@/api/home.js";
+  import {getPreviewUrlApi,getSpotTicketDate} from "@/api/home.js";
 import pubSub from 'pubsub-js'
   const router = useRouter()
   const scenicStore = useScenicStore()
@@ -125,7 +144,6 @@ import pubSub from 'pubsub-js'
       default: () => ''
     }
   })
-
   let scenicChange = null
   const handleMore = () => {
     router.push('/workOrder')
@@ -152,9 +170,20 @@ import pubSub from 'pubsub-js'
       videoShow.value = true
     }
   });
-
+  let dialogTableVisible = ref(false)
+  let gridData = ref([])
+  let gridTitle = ref('')
+  const handlePiaoPop = async()=>{
+	  dialogTableVisible.value = true
+	  let res = await getSpotTicketDate({scenicSpotId:props.scenicSpotId})
+	  gridData.value = res.data
+	  console.log(res,'res')
+  }
   onMounted(() => {
     scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
+		
+		gridTitle.value = data.name
+		
 		hrefItem.value = data
       // initMap('scenic-map', data.lng, data.lat, 15)
       // map.value.setDisplayOptions({
@@ -394,3 +423,175 @@ import pubSub from 'pubsub-js'
     }
   }
 </style>
+<style lang="scss" scoped>
+	:deep(.el-dialog__headerbtn .el-dialog__close){
+		color:#fff;
+		font-size:40px;
+		position:relative;
+		top:15px;
+		right:15px;
+	}
+	:deep(.el-dialog__header.show-close){
+		padding-right:0;
+	}
+  :deep(.el-dialog) {
+    background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
+    background-size: 100% 100%;
+	width:vw(1500);
+  }
+  :deep(.el-dialog__title) {
+    color: #fff;
+    font-weight: bold;
+  }
+
+  .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(1070);
+    background-image: url('@/assets/images/bg-1.png');
+    background-size: 100% 100%;
+  }
+  .bom-box2{
+	  // margin-top:vh(10);
+	  min-width:vw(900);
+	  height:vh(800);
+	
+  }
+  .header-title{
+  		  font-size:vw(32);
+  		  color:#fff;
+  		  text-align:center;
+  		  font-weight:bold;
+  		  margin-bottom:vh(20);
+		  
+  }
+  .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;
+        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;
+      }
+    }
+  }
+  .top-box {
+    width: 100%;
+    height: vh(500);
+    .icon-box {
+      font-weight: 400;
+      font-size: vw(14);
+      color: #ffffff;
+      line-height: vh(16);
+      flex-wrap: wrap;
+      .item {
+        cursor: pointer;
+        width: 50%;
+        margin-top: vh(40);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        &:nth-child(3n) {
+          margin-right: 0;
+        }
+        & > img {
+          width: vw(54);
+          height: auto;
+        }
+      }
+    }
+    .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%;
+    }
+  }
+</style>