no message

src/api/junction/index.ts

@@ -7,7 +7,9 @@ enum API {
   // 获取各路口累计人数数据接口地址
   ADDNUM_URL = "/crossqueryGaosuT.action",
   // 获取各路口表格数据接口地址
-  TABLEDATA_URL = "/fbpqueryByPlace.action",
+  // TABLEDATA_URL = "/fbpqueryByPlace.action",
+  TABLEDATA_URL = "/crossqueryUserList.action",
+
   // 获取所有路口当日人数数据接口地址
   DAYNUMBYALL_URL = "/crossqueryDayT.action",
   // 获取所有路口累计人数数据接口地址
@@ -43,9 +45,9 @@ export const reqJtNumByTotal = () =>
 export const reqJtTableData = (sm_place: string) =>
   request({
     method: "post",
-    url: `${API.TABLEDATA_URL}?sm_place=${sm_place}`,
+    url: `${API.TABLEDATA_URL}?sm_place=${sm_place}&page=1&rows=20`,
     headers: {
-      type: "bigData2",
+      type: "bigData",
     },
   });
 

src/api/scenic/index.ts

@@ -17,9 +17,9 @@ enum API {
 
   // 获取游客来源地统计数据 接口地址
   SOURCERANK_URL = "/tourqueryTourProvinceT.action",
-  // 获取游客人数昨日12小时趋势 接口地址
+  // 获取游客人数昨日8小时趋势 接口地址
   NUMBYHOUROFYESTERDAY_URL = "/tourqueryYesHourHistory.action",
-  // 获取游客人数今日12小时趋势 接口地址
+  // 获取游客人数今日8小时趋势 接口地址
   NUMBYHOUROFTODAY_URL = "/tourqueryTodayHourHistory.action",
   // 获取今日游客人流排行榜数据 接口地址
   TOURNUMBYDAY_URL = "/tourNumAndDay.action",
@@ -52,7 +52,7 @@ export const reqGetScenicInfoByNum = (data: any) =>
     url: API.PEOPLENUM_URL,
     params: data,
     headers: {
-      type: "bigData2",
+      type: "bigData",
     },
   });
 

src/components/map/scenicData.ts

@@ -23,6 +23,8 @@ export const scenicData = [
     right: -29,
     iframeUrl: `${baseUrl}/hik/cn/ch70_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.69:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -44,6 +46,8 @@ export const scenicData = [
     right: 46,
     iframeUrl: `${baseUrl}/hik/cn/ch75_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.74:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -65,6 +69,8 @@ export const scenicData = [
     right: -29,
     iframeUrl: `${baseUrl}/hik/cn/ch80_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.79:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -86,6 +92,8 @@ export const scenicData = [
     right: -29,
     iframeUrl: `${baseUrl}/hik/cn/ch115_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.114:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -107,6 +115,8 @@ export const scenicData = [
     right: -39,
     iframeUrl: `${baseUrl}/hik/cn/ch35_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.34:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -128,6 +138,8 @@ export const scenicData = [
     right: -40,
     iframeUrl: `${baseUrl}/hik/cn/ch45_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.44:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -149,6 +161,8 @@ export const scenicData = [
     right: -12,
     iframeUrl: `${baseUrl}/hik/cn/ch50_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.49:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -170,6 +184,8 @@ export const scenicData = [
     right: -55,
     iframeUrl: `${baseUrl}/hik/cn/ch55_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.54:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -191,6 +207,8 @@ export const scenicData = [
     right: -49,
     iframeUrl: `${baseUrl}/hik/cn/ch10_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.9:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -212,6 +230,8 @@ export const scenicData = [
     right: -45,
     iframeUrl: `${baseUrl}/hik/cn/ch85_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.84:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -233,6 +253,8 @@ export const scenicData = [
     right: -29,
     iframeUrl: `${baseUrl}/hik/cn/ch90_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.89:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -254,6 +276,8 @@ export const scenicData = [
     right: -20,
     iframeUrl: `${baseUrl}/hik/cn/ch95_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.94:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -275,6 +299,8 @@ export const scenicData = [
     right: 9,
     iframeUrl: `${baseUrl}/hik/cn/ch100_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.99:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -296,6 +322,8 @@ export const scenicData = [
     right: -29,
     iframeUrl: `${baseUrl}/hik/cn/ch105_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.104:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -317,6 +345,8 @@ export const scenicData = [
     right: -29,
     iframeUrl: `${baseUrl}/hik/cn/ch240_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.67.239:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -338,6 +368,8 @@ export const scenicData = [
     right: -79,
     iframeUrl: `${baseUrl}/hik/cn/ch145_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.144:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -359,6 +391,8 @@ export const scenicData = [
     right: -46,
     iframeUrl: `${baseUrl}/hik/cn/ch60_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.59:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -380,6 +414,8 @@ export const scenicData = [
     right: -29,
     iframeUrl: `${baseUrl}/hik/cn/ch65_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.64:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -401,6 +437,8 @@ export const scenicData = [
     right: -30,
     iframeUrl: `${baseUrl}/hik/cn/ch110_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.109:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -422,6 +460,8 @@ export const scenicData = [
     right: -59,
     iframeUrl: `${baseUrl}/hik/cn/ch120_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.119:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -443,6 +483,8 @@ export const scenicData = [
     right: -49,
     iframeUrl: `${baseUrl}/hik/cn/ch125_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.124:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -464,6 +506,8 @@ export const scenicData = [
     right: -59,
     iframeUrl: `${baseUrl}/hik/cn/ch15_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.14:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -485,6 +529,8 @@ export const scenicData = [
     right: -39,
     iframeUrl: `${baseUrl}/hik/cn/ch20_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.19:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -506,6 +552,8 @@ export const scenicData = [
     right: -29,
     iframeUrl: `${baseUrl}/hik/cn/ch160_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.159:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -527,6 +575,8 @@ export const scenicData = [
     right: -29,
     iframeUrl: `${baseUrl}/hik/cn/ch25_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.24:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -548,6 +598,8 @@ export const scenicData = [
     right: -49,
     iframeUrl: `${baseUrl}/hik/cn/ch185_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.184:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -569,6 +621,8 @@ export const scenicData = [
     right: -85,
     iframeUrl: `${baseUrl}/hik/cn/ch150_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.149:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -590,6 +644,8 @@ export const scenicData = [
     right: -29,
     iframeUrl: `${baseUrl}/hik/cn/ch130_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.129:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -611,6 +667,8 @@ export const scenicData = [
     right: -39,
     iframeUrl: `${baseUrl}/hik/cn/ch245_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.67.244:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -633,6 +691,8 @@ export const scenicData = [
     iframeUrl: `${baseUrl}/hik/cn/ch225_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.67.224:554/Streaming/Channels/102",
     VRurl: "https://www.720yun.com/t/cavkieih02e?scene_id=33545192",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -654,6 +714,8 @@ export const scenicData = [
     right: -29,
     iframeUrl: `${baseUrl}/hik/cn/ch63_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.67.229:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -675,6 +737,8 @@ export const scenicData = [
     right: -39,
     iframeUrl: `${baseUrl}/hik/cn/ch235_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.67.234:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     markerContent: `
@@ -697,6 +761,8 @@ export const scenicData = [
     iframeUrl: `${baseUrl}/hik/cn/ch40_two.html`,
     rtspaddr: "rtsp://admin:hik12345@6.205.68.39:554/Streaming/Channels/102",
     VRurl: "https://www.720yun.com/t/67djz5hn5n5?scene_id=8195316",
+    isShow: false,
+    timer: null,
   },
   // {
   //   title: "璪都红绿灯路口",

src/views/analyse/center/centerAnalyse.vue

@@ -11,13 +11,13 @@
       </div>
       <div class="left_info">
         <div class="info_box">
-          <div class="now">实时（人次）</div>
+          <div class="now">实时（人）</div>
           <div class="box">
             <div class="num" ref="realDom">{{ realValue }}</div>
           </div>
         </div>
         <div class="info_box">
-          <div class="now">累计（人次）</div>
+          <div class="now">累计（人）</div>
           <div class="box">
             <div class="num" ref="addDom">{{ addValue }}</div>
           </div>
@@ -53,13 +53,13 @@
       </div>
       <div class="right_info">
         <div class="info_box">
-          <div class="now">累计（人次）</div>
+          <div class="now">累计（人）</div>
           <div class="box">
             <div class="num" ref="addDom2">{{ addValue2 }}</div>
           </div>
         </div>
         <div class="info_box">
-          <div class="now">实时（人次）</div>
+          <div class="now">实时（人）</div>
           <div class="box">
             <div class="num" ref="realDom2">{{ realValue2 }}</div>
           </div>

src/views/analyse/center/peopleDetailDialog.vue

@@ -75,8 +75,10 @@ const getList = () => {
     // 获取当日人数
     ele.currentDay = await getCurrentDay(ele.title);
     // 获取表格数据
-    const res = await reqJtTableData(ele.title);
-    ele.table = res.data;
+    const res: any = await reqJtTableData(ele.title);
+    // console.log(res);
+
+    ele.table = res.rows;
   });
   // console.log(slotList.value);
 };

src/views/analyse/center/scenicDetailAge.vue

@@ -108,7 +108,7 @@ const initPieChart = () => {
   // 折线图配置
   const options = {
     title: {
-      text: "靖安县",
+      text: "总人数",
       left: "21%",
       top: "40%",
       textStyle: {

src/views/analyse/center/scenicDetailAnalyse.vue

@@ -58,12 +58,6 @@
 import { ref, onMounted, nextTick } from "vue";
 import * as Echarts from "echarts";
 import { countUpNum } from "@/utils/countUpNum.ts";
-// 引入获取近8天日期函数
-import { getNearDay } from "@/utils/getNearDay.ts";
-// 引入获取近8月函数
-import { getNearMonth } from "@/utils/getNearMonth";
-// 引入获取近8年函数
-import { getNearYear } from "@/utils/getNearYear";
 // 引入景区相关的接口
 import {
   reqGetAllNumToday,
@@ -125,15 +119,12 @@ const getCountUpNum = () => {
 const getChartData = () => {
   if (currentIndex.value === 0) {
     // 近8日
-    chartXdata.value = getNearDay();
     getAllNumByDay();
   } else if (currentIndex.value === 1) {
     // 近8月
-    chartXdata.value = getNearMonth();
     getAllNumByMonth();
   } else if (currentIndex.value === 2) {
     // 近8年
-    chartXdata.value = getNearYear();
     getAllNumByYear();
   }
 };
@@ -142,8 +133,8 @@ const getChartData = () => {
 const getAllNumByDay = async () => {
   const res = await reqGetAllNumByDay();
   // console.log(res);
-  const temArr = res.data.map((ele: any) => ele.num * 1);
-  chartYdata.value = temArr;
+  chartYdata.value = res.data.map((ele: any) => ele.num * 1);
+  chartXdata.value = res.data.map((ele: any) => ele.dateTime.slice(-2) + "日");
   // 初始化折线图
   initLineChart();
 };
@@ -152,8 +143,8 @@ const getAllNumByDay = async () => {
 const getAllNumByMonth = async () => {
   const res = await reqGetAllNumByMonth();
   // console.log(res);
-  const temArr = res.data.map((ele: any) => ele.num * 1);
-  chartYdata.value = temArr;
+  chartYdata.value = res.data.map((ele: any) => ele.num * 1);
+  chartXdata.value = res.data.map((ele: any) => ele.dateTime.slice(-2) + "月");
   // 初始化折线图
   initLineChart();
 };
@@ -162,8 +153,8 @@ const getAllNumByMonth = async () => {
 const getAllNumByYear = async () => {
   const res = await reqGetAllNumByYear();
   // console.log(res);
-  const temArr = res.data.map((ele: any) => ele.num * 1);
-  chartYdata.value = temArr;
+  chartYdata.value = res.data.map((ele: any) => ele.num * 1);
+  chartXdata.value = res.data.map((ele: any) => ele.dateTime + "年");
   // 初始化折线图
   initLineChart();
 };

src/views/analyse/center/scenicDetailDialog.vue

@@ -18,7 +18,7 @@
       </div>
       <!-- 第二层数据区域 -->
       <div class="bottom">
-        <!-- 游客趋势走势区域 -->
+        <!-- 游客近8小时趋势走势区域 -->
         <ScenicDetailTrend />
         <!-- 景区本年游客人流排行榜区域 -->
         <ScenicDetailRank />

src/views/analyse/center/scenicDetailRank.vue

@@ -24,11 +24,12 @@
         <!-- 每一个景区区域 -->
         <div class="list_item" v-for="(item, index) in placeList" :key="index">
           <div class="item_index">{{ index + 1 }}</div>
-          <div class="item_place">{{ item.name }}</div>
-          <div class="item_num" ref="itemNum" :data-value="item.num">
-            {{ item.num }}
+          <div class="item_place">{{ item.place || "未知" }}</div>
+          <div class="item_num" ref="itemNum" :data-value="item.inCount">
+            {{ item.inCount }}
           </div>
         </div>
+        <div class="list_noData" v-if="!placeList.length">暂无数据</div>
       </div>
     </div>
   </div>
@@ -50,61 +51,40 @@ const currentIndex = ref<number>(0);
 const itemNum = ref();
 
 // 景区排行数组
-const placeList = ref([
-  {
-    name: "雷公尖",
-    num: 4626,
-  },
-  {
-    name: "虎啸峡",
-    num: 3002,
-  },
-  {
-    name: "观音岩",
-    num: 5666,
-  },
-  {
-    name: "白水洞",
-    num: 5261,
-  },
-
-  {
-    name: "宝峰寺",
-    num: 3266,
-  },
-
-  {
-    name: "白崖山",
-    num: 2563,
-  },
-]);
+const placeList = ref<any>([]);
 
 onMounted(() => {
+  // 获取数据
   getData();
-  // 将数据进行排序
-  placeList.value.sort((a, b) => b.num - a.num);
-  // 让数字跳动
-  getCountUpNum();
 });
 
+// 获取数据
 const getData = async () => {
   if (currentIndex.value === 0) {
     // 今日数据
+
     const res = await reqGetTourByDay();
-    console.log(res);
+    // console.log(res);
+    placeList.value = res.data;
   } else if (currentIndex.value === 1) {
     // 本月数据
+
     const res = await reqGetTourByMonthOrYear({
       dateTime: "当月",
     });
-    console.log(res);
+    // console.log(res);
+    placeList.value = res.data;
   } else if (currentIndex.value === 2) {
     // 今年数据
+
     const res = await reqGetTourByMonthOrYear({
       dateTime: "当年",
     });
-    console.log(res);
+    // console.log(res);
+    placeList.value = res.data;
   }
+  // 让数字跳动
+  getCountUpNum();
 };
 
 // 让数字跳动
@@ -176,13 +156,14 @@ const handleChangeIndex = (index: number) => {
     .box_list {
       width: 484px;
       height: 352px;
+      overflow-y: auto;
 
       .list_item {
         display: flex;
         align-items: center;
         padding: 0 20px 0 14px;
         margin-bottom: 9px;
-        width: 484px;
+        // width: 484px;
         height: 50px;
         background-image: linear-gradient(
           rgba(0, 128, 254, 0.1),
@@ -219,6 +200,12 @@ const handleChangeIndex = (index: number) => {
       .list_item:nth-child(3) > .item_index {
         background-image: url(@/assets/images/4.png);
       }
+
+      .list_noData {
+        margin-top: 150px;
+        font-size: 24px;
+        text-align: center;
+      }
     }
   }
 }

src/views/analyse/center/scenicDetailTrend.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, nextTick } from "vue";
 import * as Echarts from "echarts";
 // 引入景区相关的接口
 import { reqGetHourByYesterday, reqGetHourByToday } from "@/api/scenic/index";
@@ -25,27 +25,30 @@ const todayData = ref([]);
 const timeData = ref([]);
 
 onMounted(() => {
-  // 获取游客人数昨日12小时趋势
-  getHourByYesterday();
   // 获取游客人数今日12小时趋势
   getHourByToday();
+  // 获取游客人数昨日12小时趋势
+  getHourByYesterday();
 });
 
+// 获取游客人数今日12小时趋势
+const getHourByToday = async () => {
+  const res = await reqGetHourByToday();
+  // console.log(res);
+  todayData.value = res.data.map((ele: any) => ele.num * 1);
+};
+
 // 获取游客人数昨日12小时趋势
 const getHourByYesterday = async () => {
   const res = await reqGetHourByYesterday();
   // console.log(res);
   timeData.value = res.data.map((ele: any) => ele.dateTime.slice(-2) + ":00");
-  todayData.value = res.data.map((ele: any) => ele.num * 1);
   yesterdayData.value = res.data.map((ele: any) => ele.num * 1);
-  // 初始化折线图
-  initLineChart();
-};
 
-// 获取游客人数今日12小时趋势
-const getHourByToday = async () => {
-  await reqGetHourByToday();
-  // console.log(res);
+  nextTick(() => {
+    // 初始化折线图
+    initLineChart();
+  });
 };
 
 // 初始化折线图
@@ -123,7 +126,7 @@ const initLineChart = () => {
         smooth: true,
         symbol: "none",
         itemStyle: {
-          color: "#32C5FF",
+          color: "#F2B949",
         },
         tooltip: {
           valueFormatter: function (value: any) {
@@ -140,11 +143,11 @@ const initLineChart = () => {
             colorStops: [
               {
                 offset: 0,
-                color: "rgba(25, 104, 255, 0.2)",
+                color: "rgba(242,185,73, 0.2)",
               },
               {
                 offset: 1,
-                color: "rgba(54, 161, 255, 0.6)",
+                color: "rgba(154, 161, 255, 0.6)",
               },
             ],
           },

src/views/analyse/left/crossingDetailDialog.vue

@@ -9,7 +9,8 @@
 
       <!-- 视频区域 -->
       <div class="detail_video">
-        <div class="video_box" id="videoDom"></div>
+        <div class="video_noSignal">无信号</div>
+        <div class="video_box" id="videoDom" v-show="isShow"></div>
         <div class="video_title">
           {{ detailObj.place_name }}
         </div>
@@ -83,6 +84,12 @@ const player = ref();
 // 定时器标识
 const timer = ref();
 
+// 是否展示监控
+const isShow = ref(false);
+
+// 延时器实例
+const videoTimer = ref();
+
 onMounted(() => {
   // console.log(props.detailObj);
 
@@ -103,14 +110,30 @@ onMounted(() => {
 onUnmounted(() => {
   // 页面卸载时销毁WasmPlayer实例
   player.value.destroy();
-  // 页面卸载时清除定时器
+  // 页面卸载时清除定时器和延时器
   clearInterval(timer.value);
+  clearTimeout(videoTimer.value);
 });
 
 // 获取监控视频地址
 const getVideosData = async () => {
   const res = await getVedio(props.detailObj.rtspaddr);
-  player.value = new WasmPlayer(null, "videoDom");
+  player.value = new WasmPlayer(null, "videoDom", (a: any) => {
+    // a表示当前播放的状态
+    if (a === "videoTimestamp") {
+      isShow.value = true;
+    } else {
+      // 开启一个延时10秒的延时器
+      if (!videoTimer.value) {
+        videoTimer.value = setTimeout(() => {
+          //  如果isShow为false表示播放失败，此时断开连接节约性能
+          if (!isShow.value) {
+            player.value.destroy();
+          }
+        }, 10000);
+      }
+    }
+  });
 
   player.value.play(res, 1);
 };
@@ -130,9 +153,9 @@ const getJtNumByTotal = async () => {
 
 // 获取表格数据
 const getTableData = async () => {
-  const res = await reqJtTableData(props.detailObj.place_name);
+  const res: any = await reqJtTableData(props.detailObj.place_name);
   // console.log(res);
-  tableData.value = res.data;
+  tableData.value = res.rows;
   loading.value = false;
 };
 
@@ -182,6 +205,17 @@ const handleCloseDetail = () => {
       width: 874px;
       height: 491px;
 
+      .video_noSignal {
+        position: absolute;
+        top: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 874px;
+        height: 491px;
+        background-color: #000;
+      }
+
       .video_box {
         width: 100%;
         height: 100%;

src/views/analyse/left/mapCrossingDialog.vue

@@ -5,7 +5,8 @@
 
     <!-- 视频区域 -->
     <div class="detail_video">
-      <div id="videoDom2"></div>
+      <div class="video_noSignal">无信号</div>
+      <div id="videoDom2" v-show="isShow"></div>
       <div class="video_title">{{ detailObj.name }}</div>
     </div>
 
@@ -83,6 +84,12 @@ const player = ref();
 // 定时器标识
 const timer = ref();
 
+// 是否展示监控
+const isShow = ref(false);
+
+// 延时器实例
+const videoTimer = ref();
+
 onMounted(() => {
   // 获取视频地址
   getVideosData();
@@ -104,13 +111,16 @@ onMounted(() => {
 onUnmounted(() => {
   // 页面卸载时销毁WasmPlayer实例
   player.value.destroy();
-  // 页面卸载时清除定时器
+  // 页面卸载时清除定时器和延时器
   clearInterval(timer.value);
+  clearTimeout(videoTimer.value);
 });
 
 // 监听路口变化更新数据
 watch(props.detailObj, () => {
+  isShow.value = false;
   player.value?.destroy();
+  clearTimeout(videoTimer.value);
   getVideosData();
   getJtNumByDay();
   getJtNumByTotal();
@@ -122,7 +132,22 @@ const getVideosData = async () => {
   const Obj = junctionData.find((ele) => ele.title === props.detailObj.name);
 
   const res = await getVedio(Obj?.rtspaddr as string);
-  player.value = new WasmPlayer(null, "videoDom2");
+  player.value = new WasmPlayer(null, "videoDom2", (a: any) => {
+    // a表示当前播放的状态
+    if (a === "videoTimestamp") {
+      isShow.value = true;
+    } else {
+      // 开启一个延时10秒的延时器
+      if (!videoTimer.value) {
+        videoTimer.value = setTimeout(() => {
+          //  如果isShow为false表示播放失败，此时断开连接节约性能
+          if (!isShow.value) {
+            player.value.destroy();
+          }
+        }, 10000);
+      }
+    }
+  });
 
   player.value.play(res, 1);
 };
@@ -153,9 +178,9 @@ const getJtNumByTotal = async () => {
 
 // 获取表格数据
 const getTableData = async () => {
-  const res = await reqJtTableData(props.detailObj.name);
+  const res: any = await reqJtTableData(props.detailObj.name);
   // console.log(res);
-  tableData.value = res.data;
+  tableData.value = res.rows;
   loading.value = false;
 };
 
@@ -189,6 +214,17 @@ const handleCloseDetail = () => {
     width: 874px;
     height: 491px;
 
+    .video_noSignal {
+      position: absolute;
+      top: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 874px;
+      height: 491px;
+      background-color: #000;
+    }
+
     .video_title {
       z-index: 10;
       position: absolute;

src/views/analyse/right/mapScenicDialog.vue

@@ -5,7 +5,9 @@
 
     <!-- 视频区域 -->
     <div class="detail_video">
-      <div id="videoDom4"></div>
+      <div class="video_noSignal">无信号</div>
+
+      <div id="videoDom4" v-show="isShow"></div>
       <div class="video_title">{{ scenicInfo?.scenicSpotName }}</div>
     </div>
 
@@ -19,6 +21,11 @@
         <div class="info_num">
           联系人：{{ scenicInfo?.responsibler }} &nbsp;&nbsp;&nbsp;&nbsp;
           电话号码：{{ scenicInfo?.responsiblerPhone }}
+          &nbsp;&nbsp;&nbsp;&nbsp;VR链接：
+          <el-link v-if="VRurl" :href="VRurl" target="_blank">
+            <el-icon size="32" color="#7DC0FF"><Link /></el-icon>
+          </el-link>
+          <span v-else>暂无</span>
         </div>
       </div>
     </div>
@@ -92,6 +99,7 @@ import { scenicData } from "@/components/map/scenicData";
 import { getVedio } from "@/api/video/index";
 // @ts-ignore
 import WasmPlayer from "@easydarwin/easywasmplayer";
+import { Link } from "@element-plus/icons-vue";
 
 // 父组件传递过来的数据
 const props = defineProps(["detailObj"]);
@@ -111,12 +119,21 @@ const moreValue = ref<number>(15);
 // 景区信息
 const scenicInfo = ref();
 
+// VR地址
+const VRurl = ref("");
+
 // 监控实例
 const player = ref();
 
 // 定时器标识
 const timer = ref();
 
+// 是否展示监控
+const isShow = ref(false);
+
+// 延时器实例
+const videoTimer = ref();
+
 onMounted(() => {
   // 获取监控视频地址
   getVideosData();
@@ -134,13 +151,16 @@ onMounted(() => {
 onUnmounted(() => {
   // 页面卸载时销毁WasmPlayer实例
   player.value.destroy();
-  // 页面卸载时清除定时器
+  // 页面卸载时清除定时器和延时器
   clearInterval(timer.value);
+  clearTimeout(videoTimer.value);
 });
 
 // 监听景区变化刷新数据
 watch(props.detailObj, () => {
+  isShow.value = false;
   player.value?.destroy();
+  clearTimeout(videoTimer.value);
   // 获取监控视频地址
   getVideosData();
   // 获取景点信息
@@ -152,9 +172,28 @@ watch(props.detailObj, () => {
 // 获取监控视频地址
 const getVideosData = async () => {
   const Obj = scenicData.find((ele) => ele.title === props.detailObj.name);
+  // console.log(Obj);
+
+  // 匹配VR地址
+  VRurl.value = Obj?.VRurl as string;
 
   const res = await getVedio(Obj?.rtspaddr as string);
-  player.value = new WasmPlayer(null, "videoDom4");
+  player.value = new WasmPlayer(null, "videoDom4", (a: any) => {
+    // a表示当前播放的状态
+    if (a === "videoTimestamp") {
+      isShow.value = true;
+    } else {
+      // 开启一个延时10秒的延时器
+      if (!videoTimer.value) {
+        videoTimer.value = setTimeout(() => {
+          //  如果isShow为false表示播放失败，此时断开连接节约性能
+          if (!isShow.value) {
+            player.value.destroy();
+          }
+        }, 10000);
+      }
+    }
+  });
 
   player.value.play(res, 1);
 };
@@ -218,6 +257,17 @@ const handleCloseDetail = () => {
     width: 874px;
     height: 491px;
 
+    .video_noSignal {
+      position: absolute;
+      top: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 874px;
+      height: 491px;
+      background-color: #000;
+    }
+
     .video_title {
       z-index: 10;
       position: absolute;

src/views/analyse/right/scenicDetailDialog.vue

@@ -9,7 +9,8 @@
 
       <!-- 视频区域 -->
       <div class="detail_video">
-        <div id="videoDom3"></div>
+        <div class="video_noSignal">无信号</div>
+        <div id="videoDom3" v-show="isShow"></div>
         <div class="video_title">
           {{ scenicInfo?.scenicSpotName || detailObj.place }}
         </div>
@@ -138,6 +139,12 @@ const player = ref();
 // 定时器标识
 const timer = ref();
 
+// 是否展示监控
+const isShow = ref(false);
+
+// 延时器实例
+const videoTimer = ref();
+
 onMounted(() => {
   console.log(props.detailObj);
 
@@ -157,14 +164,30 @@ onMounted(() => {
 onUnmounted(() => {
   // 页面卸载时销毁WasmPlayer实例
   player.value.destroy();
-  // 页面卸载时清除定时器
+  // 页面卸载时清除定时器和延时器
   clearInterval(timer.value);
+  clearTimeout(videoTimer.value);
 });
 
 // 获取监控视频地址
 const getVideosData = async () => {
   const res = await getVedio(props.detailObj.rtspaddr);
-  player.value = new WasmPlayer(null, "videoDom3");
+  player.value = new WasmPlayer(null, "videoDom3", (a: any) => {
+    // a表示当前播放的状态
+    if (a === "videoTimestamp") {
+      isShow.value = true;
+    } else {
+      // 开启一个延时10秒的延时器
+      if (!videoTimer.value) {
+        videoTimer.value = setTimeout(() => {
+          //  如果isShow为false表示播放失败，此时断开连接节约性能
+          if (!isShow.value) {
+            player.value.destroy();
+          }
+        }, 10000);
+      }
+    }
+  });
 
   player.value.play(res, 1);
 };
@@ -181,7 +204,7 @@ const getScenicInfoByNum = async (flag: boolean) => {
   const res = await reqGetScenicInfoByNum({
     place_name: props.detailObj.place,
   });
-  // console.log(res);
+  console.log(res);
   dayValue.value = res.dayNum;
   addValue.value = res.LjNum * 1;
   moreValue.value = res.maxNum;
@@ -245,6 +268,17 @@ const handleCloseDetail = () => {
       width: 874px;
       height: 491px;
 
+      .video_noSignal {
+        position: absolute;
+        top: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 874px;
+        height: 491px;
+        background-color: #000;
+      }
+
       .video_title {
         z-index: 10;
         position: absolute;

src/views/safe/center/watchDetailDialog.vue

@@ -7,8 +7,31 @@
       <!-- 标题区域 -->
       <div class="title" :title="currentWatch">{{ currentWatch }}</div>
 
-      <!-- 监控展示区域 -->
-      <div class="iframe" id="videoDom5"></div>
+      <!-- 监控信息展示区域 -->
+      <div class="content">
+        <!-- 左边列表区域 -->
+        <div class="content_list">
+          <div
+            class="list_item"
+            :class="{ active: current === index }"
+            v-for="(item, index) in videoList"
+            :key="index"
+            @click="handleChange(index, item)"
+          >
+            {{ item.d
+            }}{{ item.installationSite ? "-" + item.installationSite : "" }}
+          </div>
+        </div>
+
+        <!-- 右边展示监控区域 -->
+        <div class="content_video">
+          <!-- 无信号区域 -->
+          <div class="noSignal">无信号</div>
+
+          <!-- 监控展示区域 -->
+          <div class="iframe" id="videoDom5" v-show="isShow"></div>
+        </div>
+      </div>
 
       <!-- 关闭按钮区域 -->
       <div class="close" @click="handleClose"></div>
@@ -24,6 +47,7 @@ import { watchData } from "@/components/map/watchData";
 import { getVedio } from "@/api/video/index";
 // @ts-ignore
 import WasmPlayer from "@easydarwin/easywasmplayer";
+import axios from "axios";
 
 const props = defineProps(["currentWatch"]);
 const $emit = defineEmits(["closeDialog"]);
@@ -31,26 +55,155 @@ const $emit = defineEmits(["closeDialog"]);
 // 监控实例
 const player = ref();
 
+// 是否展示监控
+const isShow = ref(false);
+
+// 延时器实例
+const timer = ref();
+
+// 当前索引
+const current = ref(0);
+
+// 监控列表
+const videoList = ref<any>([]);
+
+// 当前通道
+const currentD = ref("");
+
 onMounted(() => {
-  // 获取监控视频地址
-  getVideosData();
+  console.log(props.currentWatch);
+
+  if (props.currentWatch === "三爪仑观音岩") {
+    let admin_token = localStorage.getItem("admin_token");
+
+    if (admin_token) {
+      // 获取监控列表数据
+      getVideoList();
+    } else {
+      // 登录获取监控权限
+      handleLogin();
+    }
+  } else {
+    videoList.value.push({
+      d: props.currentWatch,
+      rtspaddr: "",
+    });
+
+    // 获取监控视频地址
+    getVideosData("");
+  }
 });
 
 onUnmounted(() => {
   // 页面卸载时销毁WasmPlayer实例
   player.value?.destroy();
+
+  // 页面卸载时销毁延时器实例
+  clearTimeout(timer.value);
 });
 
+// 登录获取监控权限
+const handleLogin = async () => {
+  const res = await axios({
+    url: "http://6.205.66.13:8083/av_ja/videoAdmin/login",
+    method: "post",
+    data: {
+      username: "admin",
+      password: "admin.123456",
+    },
+  });
+  console.log(res);
+  if ((res as any).code === 200) {
+    localStorage.setItem("admin_token", res.data.code);
+
+    // 获取监控列表数据
+    getVideoList();
+  }
+};
+
+// 获取监控列表数据
+const getVideoList = async () => {
+  const res = await axios({
+    url: "http://6.205.66.13:8083/av_ja/videoAdmin/login",
+    params: {
+      pageNum: 1,
+      pageSize: 100,
+      spot: props.currentWatch,
+    },
+    headers: {
+      admin_token: localStorage.getItem("admin_token"),
+    },
+  });
+  console.log(res);
+  if ((res as any).code === 200) {
+    videoList.value = res.data.list;
+    currentD.value = videoList.value[0].d;
+    // 拉流
+    addStreamSource();
+  }
+};
+
+// 拉流请求
+const addStreamSource = async () => {
+  const res = await axios({
+    url: "http://6.205.66.13:8083/av_ja/stream/addStreamSource",
+    method: "post",
+    data: {
+      d: currentD.value,
+      nowLine: "1",
+    },
+    headers: {
+      admin_token: localStorage.getItem("admin_token"),
+    },
+  });
+  console.log(res);
+  if ((res as any).code === 200) {
+    getVideosData(res.data.flv_ws);
+  }
+};
 // 获取监控视频地址
-const getVideosData = async () => {
-  const Obj = watchData.find((ele) => ele.title === props.currentWatch);
+const getVideosData = async (url: string) => {
+  let res;
+  if (url) {
+    res = url;
+  } else {
+    const Obj = watchData.find((ele) => ele.title === props.currentWatch);
 
-  const res = await getVedio(Obj?.rtspaddr as string);
-  player.value = new WasmPlayer(null, "videoDom5");
+    res = await getVedio(Obj?.rtspaddr as string);
+  }
+
+  player.value = new WasmPlayer(null, "videoDom5", (a: any) => {
+    // a表示当前播放的状态
+    if (a === "videoTimestamp") {
+      isShow.value = true;
+    } else {
+      // 开启一个延时10秒的延时器
+      if (!timer.value) {
+        timer.value = setTimeout(() => {
+          //  如果isShow为false表示播放失败，此时断开连接节约性能
+          if (!isShow.value) {
+            player.value.destroy();
+          }
+        }, 10000);
+      }
+    }
+  });
 
   player.value.play(res, 1);
 };
 
+// 监控列表切换回调
+const handleChange = (index: number, item: any) => {
+  if (props.currentWatch === "三爪仑观音岩") {
+    current.value = index;
+    currentD.value = item.d;
+    isShow.value = false;
+    player.value?.destroy();
+    clearTimeout(timer.value);
+    addStreamSource();
+  }
+};
+
 // 点击关闭按钮回调
 const handleClose = () => {
   $emit("closeDialog", false);
@@ -81,18 +234,18 @@ const handleClose = () => {
   .watch {
     position: relative;
     padding: 0 50px;
-    width: 748px;
-    height: 600px;
+    width: 1156px;
+    height: 700px;
     background-image: url(@/assets/images/75.png);
     background-size: 100% 100%;
 
     .title {
       padding: 0 20px;
-      margin-left: 220px;
+      margin-left: 366px;
       margin-bottom: 90px;
-      width: 224px;
-      height: 46px;
-      line-height: 46px;
+      width: 345px;
+      height: 72px;
+      line-height: 72px;
       text-align: center;
       font-size: 35px;
       color: #ccffe6;
@@ -102,6 +255,63 @@ const handleClose = () => {
       text-overflow: ellipsis;
     }
 
+    .content {
+      display: flex;
+      padding: 0 20px;
+      height: 425px;
+
+      .content_list {
+        padding: 10px;
+        width: 220px;
+        height: 100%;
+        overflow-y: auto;
+
+        .list_item {
+          margin-bottom: 10px;
+          padding: 0 10px;
+          height: 50px;
+          line-height: 50px;
+          text-align: center;
+          font-size: 20px;
+          border-radius: 10px;
+          cursor: pointer;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          background-color: rgba($color: #fff, $alpha: 0.1);
+        }
+
+        .active {
+          color: skyblue;
+          background: linear-gradient(
+            90deg,
+            rgba(138, 208, 255, 0.09) 41.47%,
+            rgba(163, 248, 255, 0) 100%
+          );
+        }
+      }
+
+      .content_video {
+        position: relative;
+        flex: 1;
+        height: 425px;
+        margin: 0 20px;
+
+        .noSignal {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 30px;
+          background-color: #000;
+        }
+      }
+    }
+
     .close {
       position: absolute;
       top: 10px;

src/views/safe/left/leftSafe.vue

@@ -38,10 +38,15 @@
         <div class="content_right">
           <div
             class="right_box"
-            v-for="(item, index) in scenicData.slice(0, 9)"
+            v-for="(item, index) in videoList"
             :key="index"
           >
-            <div class="box_video" :id="index + 'leftWatch'"></div>
+            <div class="box_mask">无信号</div>
+            <div
+              v-show="item.isShow"
+              class="box_video"
+              :id="index + 'leftWatch'"
+            ></div>
             <div class="box_name">{{ item.title }}</div>
           </div>
         </div>
@@ -83,6 +88,12 @@ const currentWatch = ref("");
 // 监控实例数组
 const playerList = ref<any>([]);
 
+// 延时器实例数组
+const timerList = ref<any>([]);
+
+// 监控列表
+const videoList = ref<any>([]);
+
 onMounted(() => {
   // 获取监控视频地址
   getVideosData();
@@ -91,14 +102,36 @@ onMounted(() => {
 onUnmounted(() => {
   // 销毁WasmPlayer实例
   destroyVideos();
+  // 销毁延时器实例
+  destroyTimers();
 });
 
 // 获取监控视频地址
 const getVideosData = () => {
-  scenicData.slice(0, 9).forEach(async (ele, index) => {
+  videoList.value = scenicData.slice(0, 9);
+
+  videoList.value.forEach(async (ele: any, index: number) => {
     const res = await getVedio(ele.rtspaddr);
     // console.log(res);
-    let player = new WasmPlayer(null, index + "leftWatch");
+    let player = new WasmPlayer(null, index + "leftWatch", (a: any) => {
+      // a表示当前播放的状态
+      if (a === "videoTimestamp") {
+        ele.isShow = true;
+      } else {
+        // 开启一个延时10秒的延时器
+        if (!ele.timer) {
+          (ele.timer as any) = setTimeout(() => {
+            //  如果isShow为false表示播放失败，此时断开连接节约性能
+            if (!ele.isShow) {
+              player.destroy();
+            }
+
+            // 收集延时器实例方便后面销毁
+            timerList.value.push(ele.timer);
+          }, 10000);
+        }
+      }
+    });
     player.play(res, 1);
     playerList.value.push(player);
   });
@@ -120,6 +153,13 @@ const destroyVideos = () => {
   });
 };
 
+// 销毁延时器实例
+const destroyTimers = () => {
+  timerList.value.forEach((ele: any) => {
+    clearTimeout(ele);
+  });
+};
+
 // 自定义事件
 const closeDialog = (data: boolean) => {
   showWatch.value = data;
@@ -249,10 +289,23 @@ const closeDialog = (data: boolean) => {
         overflow-y: auto;
 
         .right_box {
+          position: relative;
           border-radius: 10px;
           overflow: hidden;
           background-color: rgba(52, 77, 94, 0.4);
 
+          .box_mask {
+            position: absolute;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 30px;
+            background-color: #000;
+          }
+
           .box_video {
             width: 469px;
             height: 313px;
@@ -260,10 +313,14 @@ const closeDialog = (data: boolean) => {
           }
 
           .box_name {
-            padding: 10px 0 0 26px;
+            position: absolute;
+            top: 310px;
+            left: 0;
+            padding-left: 26px;
             width: 469px;
             height: 75px;
             font-size: 30px;
+            background-color: rgba($color: #fff, $alpha: 0.1);
           }
         }
       }

src/views/safe/right/rightSafe.vue

@@ -11,7 +11,8 @@
       <div class="video_line right"></div>
       <!-- 每一个监控区域 -->
       <div class="video_item" v-for="(item, index) in videoList" :key="index">
-        <div class="item_box" :id="item.id"></div>
+        <div class="item_noSignal">无信号</div>
+        <div class="item_box" :id="item.id" v-show="item.isShow"></div>
         <div class="item_mask">{{ item.name }}</div>
       </div>
     </div>
@@ -262,22 +263,31 @@ const timeList = ref<any>([]);
 // 防火等级
 const fireLevel = ref("");
 
+// 延时器实例数组
+const timerList = ref<any>([]);
+
 // 监控列表
-const videoList = ref([
+const videoList = ref<any>([
   {
     id: "4",
     name: "宝峰小湾森林防火",
     rtspaddr: "rtsp://admin:hik12345@6.205.67.206:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     id: "5",
     name: "三爪仑虎啸峡森林防火",
     rtspaddr: "rtsp://admin:hik12345@6.205.67.207:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
   {
     id: "6",
     name: "中源景区防火",
     rtspaddr: "rtsp://admin:hik12345@6.205.67.208:554/Streaming/Channels/102",
+    isShow: false,
+    timer: null,
   },
 ]);
 
@@ -385,13 +395,34 @@ onMounted(() => {
 onUnmounted(() => {
   // 销毁WasmPlayer实例
   destroyVideos();
+  // 销毁延时器实例
+  destroyTimers();
 });
 
 // 获取监控视频地址
 const getVideosData = () => {
-  videoList.value.forEach(async (ele) => {
+  videoList.value.forEach(async (ele: any) => {
     const res = await getVedio(ele.rtspaddr);
-    let player = new WasmPlayer(null, ele.id);
+
+    let player = new WasmPlayer(null, ele.id, (a: any) => {
+      // a表示当前播放的状态
+      if (a === "videoTimestamp") {
+        ele.isShow = true;
+      } else {
+        // 开启一个延时10秒的延时器
+        if (!ele.timer) {
+          ele.timer = setTimeout(() => {
+            //  如果isShow为false表示播放失败，此时断开连接节约性能
+            if (!ele.isShow) {
+              player.destroy();
+            }
+
+            // 收集延时器实例方便后面销毁
+            timerList.value.push(ele.timer);
+          }, 10000);
+        }
+      }
+    });
 
     player.play(res, 1);
     playerList.value.push(player);
@@ -487,6 +518,13 @@ const destroyVideos = () => {
   });
 };
 
+// 销毁延时器实例
+const destroyTimers = () => {
+  timerList.value.forEach((ele: any) => {
+    clearTimeout(ele);
+  });
+};
+
 // 点击查看详情按钮回调
 const handleClickDetail = (row: any) => {
   showDetail.value = true;
@@ -568,6 +606,18 @@ const closeDialog = (data: boolean) => {
       border-radius: 10px 10px 0 0;
       overflow: hidden;
 
+      .item_noSignal {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 30px;
+        background-color: #000;
+      }
+
       .item_box {
         width: 100%;
         height: 100%;

src/views/server/right/latrineData.vue

@@ -46,15 +46,15 @@ import { countUpNum } from "@/utils/countUpNum.ts";
 import { reqGetToiletBaseCount, reqGetToiletRealData } from "@/api/serve/index";
 
 // 厕所数量
-const num = ref<number>(48);
+const num = ref<number>(28);
 const numDom = ref();
 
 // 累计服务
-const server = ref<number>(15130);
+const server = ref<number>(1130);
 const serverDom = ref();
 
 // 当日服务
-const today = ref<number>(486);
+const today = ref<number>(46);
 const todayDom = ref();
 
 // 扇形图DOM元素

src/views/server/right/latrineScene.vue

@@ -37,7 +37,7 @@
         <!-- 左边区域 -->
         <div class="box_left">
           <div class="left_icon"></div>
-          <div class="left_text">男厕 52/200</div>
+          <div class="left_text">男厕 {{ stay_man }}/{{ total_man }}</div>
         </div>
 
         <!-- 右边区域 -->
@@ -47,36 +47,38 @@
             <div class="item_pro">
               <el-progress
                 :stroke-width="12"
-                :percentage="80"
+                :percentage="(enter_man / enter_man) * 100"
                 :show-text="false"
                 color="#8DCDEB"
               />
             </div>
-            <div class="item_num">150</div>
+            <div class="item_num">{{ enter_man }}</div>
           </div>
+
           <div class="right_item">
             <div class="item_name">出流量</div>
             <div class="item_pro">
               <el-progress
                 :stroke-width="12"
-                :percentage="50"
+                :percentage="(leave_man / enter_man) * 100"
                 :show-text="false"
                 color="#F5BBA1"
               />
             </div>
-            <div class="item_num">142</div>
+            <div class="item_num">{{ leave_man }}</div>
           </div>
+
           <div class="right_item">
             <div class="item_name">驻留人数</div>
             <div class="item_pro">
               <el-progress
                 :stroke-width="12"
-                :percentage="10"
+                :percentage="(stay_man / enter_man) * 100"
                 :show-text="false"
                 color="#3BA3FF"
               />
             </div>
-            <div class="item_num">8</div>
+            <div class="item_num">{{ stay_man }}</div>
           </div>
         </div>
       </div>
@@ -92,7 +94,7 @@
         <!-- 左边区域 -->
         <div class="box_left">
           <div class="left_icon2"></div>
-          <div class="left_text">女厕 50/300</div>
+          <div class="left_text">女厕 {{ stay_woman }}/{{ total_woman }}</div>
         </div>
 
         <!-- 右边区域 -->
@@ -102,36 +104,38 @@
             <div class="item_pro">
               <el-progress
                 :stroke-width="12"
-                :percentage="65"
+                :percentage="(enter_woman / enter_woman) * 100"
                 :show-text="false"
                 color="#8DCDEB"
               />
             </div>
-            <div class="item_num">288</div>
+            <div class="item_num">{{ enter_woman }}</div>
           </div>
+
           <div class="right_item">
             <div class="item_name">出流量</div>
             <div class="item_pro">
               <el-progress
                 :stroke-width="12"
-                :percentage="60"
+                :percentage="(leave_woman / enter_woman) * 100"
                 :show-text="false"
                 color="#F5BBA1"
               />
             </div>
-            <div class="item_num">266</div>
+            <div class="item_num">{{ leave_woman }}</div>
           </div>
+
           <div class="right_item">
             <div class="item_name">驻留人数</div>
             <div class="item_pro">
               <el-progress
                 :stroke-width="12"
-                :percentage="10"
+                :percentage="(stay_woman / enter_woman) * 100"
                 :show-text="false"
                 color="#3BA3FF"
               />
             </div>
-            <div class="item_num">22</div>
+            <div class="item_num">{{ stay_woman }}</div>
           </div>
         </div>
       </div>
@@ -148,7 +152,7 @@
         <div class="box_left">
           <div class="left_icon3"></div>
           <div class="left_text">无障碍厕所</div>
-          <div class="left_text">50/88</div>
+          <div class="left_text">{{ stay_free }}/{{ total_free }}</div>
         </div>
 
         <!-- 右边区域 -->
@@ -158,36 +162,38 @@
             <div class="item_pro">
               <el-progress
                 :stroke-width="12"
-                :percentage="60"
+                :percentage="(enter_free / enter_free) * 100"
                 :show-text="false"
                 color="#8DCDEB"
               />
             </div>
-            <div class="item_num">30</div>
+            <div class="item_num">{{ enter_free }}</div>
           </div>
+
           <div class="right_item">
             <div class="item_name">出流量</div>
             <div class="item_pro">
               <el-progress
                 :stroke-width="12"
-                :percentage="50"
+                :percentage="(leave_free / enter_free) * 100"
                 :show-text="false"
                 color="#F5BBA1"
               />
             </div>
-            <div class="item_num">28</div>
+            <div class="item_num">{{ leave_free }}</div>
           </div>
+
           <div class="right_item">
             <div class="item_name">驻留人数</div>
             <div class="item_pro">
               <el-progress
                 :stroke-width="12"
-                :percentage="5"
+                :percentage="(stay_free / enter_free) * 100"
                 :show-text="false"
                 color="#3BA3FF"
               />
             </div>
-            <div class="item_num">2</div>
+            <div class="item_num">{{ stay_free }}</div>
           </div>
         </div>
       </div>
@@ -206,6 +212,33 @@ const placeValue = ref();
 // 智慧厕所列表数组
 const options = ref<any>([]);
 
+// 男厕总数
+const total_man = ref(20);
+// 男厕入流量
+const enter_man = ref(25);
+// 男厕出流量
+const leave_man = ref(23);
+// 男厕驻留人数
+const stay_man = ref(2);
+
+// 女厕总数
+const total_woman = ref(40);
+// 女厕入流量
+const enter_woman = ref(28);
+// 女厕出流量
+const leave_woman = ref(25);
+// 女厕驻留人数
+const stay_woman = ref(3);
+
+// 无障碍厕所总数
+const total_free = ref(5);
+// 无障碍厕所入流量
+const enter_free = ref(3);
+// 无障碍厕所出流量
+const leave_free = ref(3);
+// 无障碍厕所驻留人数
+const stay_free = ref(0);
+
 onMounted(() => {
   // 获取厕所列表数据
   getToiletBaseInfo();

src/views/server/right/parkingResource.vue

@@ -63,9 +63,9 @@ const initPieChart = () => {
   // 圆环图配置
   const options = {
     title: {
-      text: totalCount.value,
-      left: "42%",
-      top: "28%",
+      text: " " + totalCount.value,
+      left: "43%",
+      top: "26%",
       textStyle: {
         fontSize: 58,
         color: "#9BB7D4",