feat corres 接口

src/api/common.js

@@ -0,0 +1,24 @@
+import request from './request'
+
+// 部门列表
+export function getComDeptsApi() {
+  return request({
+    url: '/api/largeScreen/com/depts',
+    method: 'get'
+  })
+}
+// 部门成员
+export function getComDeptUsersApi(data) {
+  return request({
+    url: '/api/largeScreen/com/deptUsers',
+    method: 'get',
+	params: data
+  })
+}
+// 最近联系
+export function getComRecordApi() {
+  return request({
+    url: '/api/largeScreen/com/record',
+    method: 'get'
+  })
+}

src/components/Correspondence/index.vue

@@ -3,12 +3,18 @@
     <div class="top-box">
       <div class="title">融合通信</div>
       <div class="icon-box flex">
-        <div class="item"><img src="/src/assets/images/r-icon-1.png" />白帝城</div>
+        <div class="item" 
-        <div class="item"><img src="/src/assets/images/r-icon-2.png" />三峡之颠</div>
+		@click="handleDepsUser(item.id,item)" 
+		v-for="(item,index) in deptsList" 
+		:key="item.id">
+			<img src="/src/assets/images/r-icon-1.png" />
+			<view class="item-name">{{item.name}}</view>
+		</div>
+     <!--   <div class="item"><img src="/src/assets/images/r-icon-2.png" />三峡之颠</div>
         <div class="item"><img src="/src/assets/images/r-icon-3.png" />龙桥河</div>
         <div class="item"><img src="/src/assets/images/r-icon-4.png" />消防队</div>
         <div class="item"><img src="/src/assets/images/r-icon-5.png" />文旅城</div>
-        <div class="item"><img src="/src/assets/images/r-icon-6.png" />交通城</div>
+        <div class="item"><img src="/src/assets/images/r-icon-6.png" />交通城</div> -->
       </div>
     </div>
     <div class="bom-box">
@@ -21,32 +27,95 @@
           <div>时间</div>
         </div>
         <div class="list">
-          <div class="item" v-for="(item, index) in 10" :key="index">
+          <div class="item" v-for="(item, index) in recordList" :key="index">
-            <div>January</div>
+            <div>{{item.nickname}}</div>
-            <div>消防队</div>
+            <div>{{item.department}}</div>
-            <div>消防员</div>
+            <div>{{item.postion}}</div>
-            <div>消防员</div>
+            <div>{{item.time}}</div>
           </div>
         </div>
       </div>
     </div>
   </div>
+<el-dialog :title="gridTitle" center v-model="dialogTableVisible">
+	<div class="bom-box">
+	  <div class="table">
+	    <div class="header">
+	      <div>姓名</div>
+	      <div>部门</div>
+	      <div>职位</div>
+	      <div>电话号码</div>
+		  <div>操作</div>
+	    </div>
+	    <div class="list">
+	      <div class="item" v-for="(item, index) in gridData" :key="index">
+	        <div>{{item.nickName}}</div>
+	        <div>{{item.depthName}}</div>
+	        <div>{{item.postName}}</div>
+	        <div>{{item.phoneNumber}}</div>
+			<div>
+				<img class="sp-ico"  src="@/assets/images/sp-icom.png" />
+			</div>
+	      </div>
+	    </div>
+	  </div>
+	</div>
+</el-dialog>
 </template>
 
 <script setup>
-  const props = defineProps({
+  import { useRouter } from 'vue-router'
-    width: {
+  import { getComDeptsApi,getComDeptUsersApi,getComRecordApi } from '@/api/common'
-      type: Number,
+  let deptsList = ref([])
-      default: () => 0
+  let dialogTableVisible = ref(false)
-    },
+  const getComDepts = async()=>{
-    id: {
+	  let res = await getComDeptsApi()
-      type: String,
+	  deptsList.value = res.data
-      default: () => ''
   }
+  let recordList = ref([])
+  const getComRecord = async()=>{
+  	  let res = await getComRecordApi()
+  	  recordList.value = res.data
+  }
+  let gridData = ref([])
+  let gridTitle = ref('')
+  const handleDepsUser = async(id,item)=>{
+	  gridTitle.value = item.name
+	  let res = await getComDeptUsersApi({id})
+	  gridData.value = res.data
+	  dialogTableVisible.value = true
+	  console.log(gridData.value,'getcomdepts')
+  }
+
+  onMounted(() => {
+    getComDepts()
+	getComRecord()
   })
 </script>
-
+<style>
+	.el-dialog {
+	 	background:url('/src/assets/images/map-bg-2.png') no-repeat top center;
+		background-size: 100% 100%;
+	 }
+	.el-dialog__title{
+	 	 color:#fff;
+	 	 font-weight: bold;
+	}
+</style>
 <style lang="scss" scoped>
+	.sp-ico{
+		width:vw(50);
+		// height:vh(30);
+	}
+	.item-name{
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		width:100%;
+	}
+	.sp-img{
+		width:vw(100);
+	}
   .box-4-content {
     position: relative;
     margin: vw(8);
@@ -54,6 +123,8 @@
     height: vh(1060);
     background-image: url('@/assets/images/bg-1.png');
     background-size: 100% 100%;
+   
+  }
   .bom-box {
     .table {
       width: 100%;
@@ -168,5 +239,4 @@
       background-size: 100% 100%;
     }
   }
-  }
 </style>

src/views/home/index.vue

@@ -2,6 +2,7 @@
   <box1 />
   <box2 @switch-spot="switchSpot" />
   <box3 />
+  
 </template>
 
 <script setup>