lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of 1ihldi8qxdvv.angerl.cn:fengjie/fengjie-datascreen

Browse Source
This commit is contained in:
zjc
2025-01-16 16:02:05 +08:00
parent 70495d3c95 1bc9c62d3c
commit 0c00523114
4 changed files with 214 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

308
src/components/Correspondence/index.vue
View File

@@ -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"><img src="/src/assets/images/r-icon-2.png" />三峡之颠</div>
<div class="item"
@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>January</div>
<div>消防队</div>
<div>消防员</div>
<div>消防员</div>
<div class="item" v-for="(item, index) in recordList" :key="index">
<div>{{item.nickname}}</div>
<div>{{item.department}}</div>
<div>{{item.postion}}</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({
width: {
type: Number,
default: () => 0
},
id: {
type: String,
default: () => ''
}
import { useRouter } from 'vue-router'
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
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%;
margin-top: vh(5);
.header {
height: vh(28);
font-weight: 400;
font-size: vw(12);
color: #fff;
}
.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;
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 {
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);
.title {
span {
margin-left: vw(30);
font-weight: 800;
color: #fff;
background-image: url('@/assets/images/title-1.png');
background-size: 100% 100%;
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 {
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>