feat：完善功能
This commit is contained in:
zjc
232
src/layout/components/Correspondence/index.vue
Normal file
232
src/layout/components/Correspondence/index.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<div class="correspondence">
|
||||
<div class="top-box">
|
||||
<div class="title">融合通信(调试中)</div>
|
||||
<div class="icon-box flex">
|
||||
<div
|
||||
class="item"
|
||||
v-for="item in deptsList"
|
||||
:key="item.id"
|
||||
@click="handleDepsUser(item.id, item)"
|
||||
>
|
||||
<img src="/src/assets/images/r-icon-1.png" />
|
||||
<view class="item-name">{{ item.name }}</view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bom-box">
|
||||
<Title2 title="最近联系(调试中)" />
|
||||
<div class="table">
|
||||
<div class="header">
|
||||
<div>人员姓名</div>
|
||||
<div>部门</div>
|
||||
<div>时间</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item" v-for="(item, index) in recordList" :key="index">
|
||||
<div>{{ item.nickname }}</div>
|
||||
<div>{{ item.department }}</div>
|
||||
<div>{{ item.time }}</div>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getComDeptsApi, getComDeptUsersApi, getComRecordApi } from '@/api/common'
|
||||
let deptsList = ref([])
|
||||
let dialogTableVisible = ref(false)
|
||||
const getComDepts = async () => {
|
||||
let res = await getComDeptsApi()
|
||||
deptsList.value = res.data
|
||||
}
|
||||
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
|
||||
dialogTableVisible.value = true
|
||||
let res = await getComDeptUsersApi({ id })
|
||||
gridData.value = res.data
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getComDepts()
|
||||
getComRecord()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-dialog) {
|
||||
background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
:deep(.el-dialog__title) {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.sp-ico {
|
||||
width: vw(40);
|
||||
}
|
||||
.item-name {
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
.sp-img {
|
||||
width: vw(100);
|
||||
}
|
||||
.correspondence {
|
||||
margin: vw(8);
|
||||
width: vw(300);
|
||||
height: vh(1070);
|
||||
background-image: url('@/assets/images/bg-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.bom-box {
|
||||
.table {
|
||||
width: 100%;
|
||||
margin-top: vh(5);
|
||||
.header {
|
||||
height: vh(28);
|
||||
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;
|
||||
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; /* 使用省略号表示文本溢出 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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 {
|
||||
width: 100%;
|
||||
height: vh(500);
|
||||
.icon-box {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
color: #ffffff;
|
||||
line-height: vh(16);
|
||||
flex-wrap: wrap;
|
||||
.item {
|
||||
cursor: pointer;
|
||||
width: 50%;
|
||||
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>
|
||||
Reference in New Issue
Block a user