围栏打卡对接

.env.development

@@ -2,7 +2,7 @@
  # @Author: 张涛
  # @Date: 2023-11-09 18:29:41
  # @LastEditors: JC9527
- # @LastEditTime: 2024-01-26 16:18:44
+ # @LastEditTime: 2024-02-02 11:21:47
  # @FilePath: \JiangningUrbanManagePc\.env.development
 ### 
 # 页面标题
@@ -14,10 +14,10 @@ ENV = 'development'
 # 若依管理系统/开发环境
 # /dev-api
 # VUE_APP_BASE_API = 'http://39.101.188.84:9037'
-VUE_APP_BASE_API = 'https://t-jn-bjh-admin-server.jsszkd.com'
+# VUE_APP_BASE_API = 'https://t-jn-bjh-admin-server.jsszkd.com'
 VUE_APP_BASE_API1 = 'https://t-kd-process-server.jsszkd.com'
 VUE_APP_BASE_API2 = 'https://t-jn-development-manager-server.jsszkd.com/api/webapp'
-# VUE_APP_BASE_API = 'http://192.168.0.106:9037'
+VUE_APP_BASE_API = 'http://192.168.0.109:9037'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

src/api/bigScreenApi/index.js

@@ -200,8 +200,16 @@ export function getUserByImei(params){
 // 根据手机号和人员名称查询
 export function dwgjList(params){
   return request({
-      url: '/jn/dwgj/list',
-      method: 'get',
-      params
+    url: '/jn/dwgj/list',
+    method: 'get',
+    params
+  })
+}
+// 获取围栏打卡信息
+export function getFence(params){
+  return request({
+    url: '/jn/screen/getFence',
+    method: 'get',
+    params
   })
 }

src/views/bigScreen/components/mapRightContent.vue

@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2023-08-15 11:09:57
  * @LastEditors: JC9527
- * @LastEditTime: 2024-01-22 13:03:42
+ * @LastEditTime: 2024-02-02 13:38:08
 -->
 <template>
   <div class="right-box">
@@ -29,6 +29,9 @@
 <script>
 import titleBox from '../../components/title/index.vue'
 import mapRight from '../../components/mapRight/index.vue'
+import {
+  getFence,
+} from "@/api/bigScreenApi";
 export default {
   name:'mapRightContent',
   components:{titleBox,mapRight},
@@ -112,15 +115,15 @@ export default {
       },
       immediate:true,
     },
-    weilanData:{
-      handler(newWeilan){
-        // console.log(newWeilan,'围栏');
-        if(newWeilan) {
-          this.weilanArray = newWeilan
-        }
-      },
-      immediate:true,
-    },
+    // weilanData:{
+    //   handler(newWeilan){
+    //     // console.log(newWeilan,'围栏');
+    //     if(newWeilan) {
+    //       this.weilanArray = newWeilan
+    //     }
+    //   },
+    //   immediate:true,
+    // },
     luduanData:{
       handler(newLuduan){
         // console.log(newLuduan,'路段');
@@ -153,7 +156,15 @@ export default {
           this.getHeight = Number(relativeHeight);
         }
       })
-    }
+    },
+    getWeilan(){
+      getFence().then(res=>{
+        if(res.code == 200) {
+          this.weilanArray = res.data;
+        }
+      })
+      
+    },
   },
   mounted(){
     window.addEventListener("resize", () => {
@@ -161,6 +172,7 @@ export default {
       this.getDomHeight();
     });
     this.getDomHeight();
+    this.getWeilan();
   },
 }
 </script>

src/views/components/mapRight/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="right-main" id="rightParent">
-    <div class="header-title">
+    <div class="header-title" :class="id == 4 ? 'myHeader-title':''">
       <div>{{ id == 1 ? '网格名称' : id == 2 ? '区域名称' : id == 3 ? "路段名称" : "围栏名称"}}</div>
       <div>{{ id == 4 ? '今日已打卡' : '今日事件' }}</div>
       <div>{{ id == 4 ? '今日未打卡' : '已处理' }}</div>
-      <div>{{ id == 4 ? '打卡异常' : '未处理' }}</div>
+      <div v-if="id != 4">{{ id == 4 ? '打卡异常' : '未处理' }}</div>
     </div>
     <div class="lists-main" id="rightBox" :style="{'height':(height - lists.height - 20) + 'px'}">
-      <div class="main" v-for="(item,index) in rightArray" :key="index" :class="(index+1) % 2 == 0 ? 'main1':''">
+      <div class="main" v-for="(item,index) in rightArray" :key="index" :class="id == 4 ? 'mymain' : (index+1) % 2 == 0 ? 'main1' : ''">
         <el-tooltip :content="item.properties ? item.properties.NAME : item.name" placement="top" :disabled="tooltipDisabled">
           <div class="main-name" @mouseenter="spanMouseenter($event)" @click="divClick(item)">
             <img src="@/assets/images/location1.png" alt="">
@@ -17,9 +17,11 @@
         <!-- <div>{{ item.event }}</div>
         <div>{{ item.resolved }}</div>
         <div class="unsolved">{{ item.unsolved }}</div> -->
-        <div>50</div>
-        <div>30</div>
-        <div class="unsolved">20</div>
+        <div v-if="id == 4">{{ item.ydk }}</div>
+        <div v-else>50</div>
+        <div v-if="id == 4">{{ item.wdk }}</div>
+        <div v-else>30</div>
+        <div class="unsolved" v-if="id != 4">20</div>
       </div>
     </div>
   </div>
@@ -66,11 +68,19 @@ export default {
       }
     },
     divClick(item){
-      let obj = {
-        id:this.id,
-        item:item
+      if(item.id) {
+        let obj = {
+          id:this.id,
+          item:item
+        }
+        this.$emit('divClick', obj);
+      } else {
+        let obj = {
+          id:this.id,
+          item:item.fenceId
+        }
+        this.$emit('divClick', obj);
       }
-      this.$emit('divClick', obj);
     }
   },
   mounted(){
@@ -124,6 +134,9 @@ export default {
       }
     }
   }
+  .myHeader-title {
+    grid-template-columns: repeat(3, 1fr);
+  }
   .lists-main {
     overflow-y: scroll;
     // height: 99px;
@@ -175,6 +188,9 @@ export default {
       text-align: center;
     }
   }
+  .mymain {
+    grid-template-columns: repeat(3, 33.4%);
+  }
   .main1 {
     background: rgba(187,220,255,0.16);
   }