页面提交

src/views/SentryPage.vue

@@ -44,12 +44,12 @@
 
             </router-view>
             <!-- 哨兵详情弹窗 -->
-            <div class="tk_div" v-show="isDetailVisible">
+      <div class="tk_div" v-show="isDetailVisible">
 				<div class="tk1 tk_bor" style="width: 371px;height: 310px;">
 					<h1>
 						<span :title="detailInfo.deviceName || '--'" style="display: inline-block;overflow: hidden;width: 62%;text-overflow: ellipsis;">{{ detailInfo.deviceName || '--' }}</span>
 						<i class="el-icon el-icon-close" style="margin-left: 5%;cursor: pointer;" @click="closeDetail"></i>
-						<i>{{ detailInfo.workingStatus == '0' ? '在线' : '离线' }}</i>
+						<i>{{ detailInfo.workingStatus == '1' ? '离线' : '在线' }}</i>
 					</h1>
 					<p>设备名称：{{ detailInfo.deviceName || '--' }}</p>
 					<p>设备类型：{{ detailInfo.deviceTypeText || '--' }}</p>
@@ -65,7 +65,7 @@
 			</div>
 
 			<!-- 地图 -->
-			<supermap ref="supermap" style="width: 100%;height: 100vh;" @preview="preview" @openDetails="openEventDetails">
+			<supermap ref="supermap" style="width: 100%;height: 100vh;" @preview="preview" @openDetails="openEventDetails" @openAreaDetails="openAreaDetails">
 			</supermap>
       <!-- 事件詳情彈窗start -->
       <div v-if="isEventDetails">
@@ -185,6 +185,24 @@
         </el-dialog>
       </div>
       <!-- 事件詳情彈窗end -->
+      <!-- 小区详情弹窗 -->
+      <div class="tk_div" v-show="isAreaDetailVisible">
+        <div class="tk1 tk_bor" style="width: 371px;height: 450px;">
+          <h1>
+            <span style="display: inline-block;overflow: hidden;width: 62%;text-overflow: ellipsis;">区域信息</span>
+            <i class="el-icon el-icon-close" style="margin-left: 5%;cursor: pointer;" @click="closeAreaDetail"></i>
+          </h1>
+          <p>市区：{{ areaDetailInfo.address || '--' }}</p>
+          <p>街道：{{ areaDetailInfo.street || '--' }}</p>
+          <p>社区：{{ areaDetailInfo.community || '--' }}</p>
+          <p>区域名称：{{ areaDetailInfo.communityName || '--' }}</p>
+          <p>负责人：{{ areaDetailInfo.principal || '--' }}</p>
+          <p>负责人电话：{{ areaDetailInfo.phone || '--' }}</p>
+          <p>户数：{{ areaDetailInfo.houseNum || '--' }}</p>
+          <p>人数：{{ areaDetailInfo.personNum || '--' }}</p>
+          <img class="area_url" v-for="(img,index) in areaDetailInfo.imageUrls" :src="img"/>
+        </div>
+      </div>
 		</div>
 	</div>
  </template>
@@ -264,6 +282,12 @@
           {name:'不通过',value:false},
         ],
         reviewDescription:'',
+
+        /** 小区弹窗  **/
+        isAreaDetailVisible:false,
+        areaDetailInfo:{},
+        imageIndex:null,
+        bigImage:false
       }
 		},
     created() {
@@ -282,6 +306,17 @@
 
 		},
     methods:{
+      openAreaDetails(param){
+        this.isAreaDetailVisible = true;
+        this.areaDetailInfo = param;
+      },
+      closeAreaDetail(){
+        this.isAreaDetailVisible = false;
+      },
+      bigImg(img){
+        this.imageIndex=img;
+        this.bigImage=true;
+      },
       closeDetail(){
 				this.isDetailVisible = false
 				this.isVisible = false
@@ -1246,6 +1281,10 @@
       border: 1px solid #078d86;
       background-color: #056759a6;
     }
+    .area_url{
+      width: 6rem;
+      height: 6rem;
+    }
 </style>
 <style rel="stylesheet/scss" lang="scss" scoped>
 	@import '@/assets/styles/base.scss';

src/views/useCenter.vue

@@ -27,29 +27,6 @@
       </dl>
       <div class="sb_fx" ref="chart"/>
     </div>
-    <div class="visual-body">
-      <!--弹框演示模板 开始-->
-      <img src="../assets/images/sentinel/hz_qy.png" class="qydw1"/>
-      <img src="../assets/images/sentinel/hz_qy.png" class="qydw2"/>
-      <img src="../assets/images/sentinel/hz_qy.png" class="qydw3"/>
-      <div class="tk_div" v-if="false">
-        <div class="tk1 tk_bor">
-          <h1>用户信息<i>使用中</i></h1>
-          <p>用户名称：XXXXXXXXXXX</p>
-          <p>用户类型：商业、居民、工业</p>
-          <p>设备建设时间：2005年1月15日</p>
-          <p>用户开栓时间：2025年8月15日</p>
-          <p>最近检查时间：2025年8月15日</p>
-          <p>最近检查报告：<a @click="toggleDisplay">详情</a></p>
-          <p>历史数值：<a @click="toggleDisplay">详情</a></p>
-        </div>
-        <div class="tk2 tk_bor" v-if="isVisible">
-          <h1>哨兵详情</h1>
-          <div id="sbxqChart" ref="MyChart"></div>
-        </div>
-      </div>
-      <!--弹框演示模板 结束-->
-    </div>
     <div class="con_right">
       <div class="list_tit">用户列表</div>
       <div style="display: flex; gap: 10px;">
@@ -178,7 +155,7 @@ export default {
               lat: 43.02,
               icon: 'area',
               bindPopupHtml: '',
-              click: 'openDetails',
+              click: 'openAreaDetails',
               parameter: req.data[i],
               keepBindPopup: false,
               isAggregation: false
@@ -222,7 +199,7 @@ export default {
           name: "访问来源",
           type: "pie",
           radius: "50%",
-          center: ["50%", "50%"],
+          center: ["50%", "70%"],
           color: ["rgb(131,249,103)", "#FBFE27", "#FE5050",
             "#1DB7E5"
           ], //'#FBFE27','rgb(11,228,96)','#FE5050'
@@ -268,7 +245,7 @@ export default {
               },
               smooth: 0.2,
               length: 10,
-              length2: 20,
+              length2: 15,
             },
           },
           itemStyle: {