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,119 +123,120 @@
     height: vh(1060);
     background-image: url('@/assets/images/bg-1.png');
     background-size: 100% 100%;
-    .bom-box {
+   
-      .table {
+  }
-        width: 100%;
+  .bom-box {
-        margin-top: vh(5);
+    .table {
-        .header {
+      width: 100%;
-          height: vh(28);
+      margin-top: vh(5);
-          font-weight: 400;
+      .header {
-          font-size: vw(12);
+        height: vh(28);
-          color: #fff;
+        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;
-          background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
+          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; /* 使用省略号表示文本溢出 */
           }
         }
-        .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 {
+    .title {
-      width: 100%;
+      span {
-      height: vh(500);
+        margin-left: vw(30);
-      .icon-box {
-        font-weight: 400;
-        font-size: vw(14);
-        color: #ffffff;
-        line-height: vh(16);
-        flex-wrap: wrap;
-        .item {
-          width: 33.33%;
-          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;
+        font-size: vw(15);
-        background-image: url('@/assets/images/title-1.png');
+        line-height: vh(26);
-        background-size: 100% 100%;
+        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 {
+        width: 33.33%;
+        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>

src/views/home/index.vue

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