Skip to content

Z
zh-baseversion-project
Commit 0f257aa0 authored by wanghao's avatar wanghao
Browse files
Options

1 大屏端 地图上 显示 用户类型 界面优化

parent 7ac22b8e
Hide whitespace changes
Inline Side-by-side
Showing with 131 additions and 84 deletions
zh-baseversion-web/src/components/bigWindow/User.vue
View file @ 0f257aa0
......@@ -16,74 +16,63 @@
<!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> -->
<i class="el-icon-close" style="font-size: 20px; color: #49d8ff"></i>
</div>
<div class="line"></div>
<div>
<div class="top flex top-top">
<div class="group" style="">
<div class="left">联系人：</div>
<div class="right zzz">{{ deviceData.linkman }}</div>
</div>
<div class="group" style="">
<div class="left">联系电话:</div>
<div v-unValue class="right zzz">
{{ deviceData.phone }}
</div>
</div>
<div class="group" style="">
<div class="left">联系地址：</div>
<div :title="deviceData.address" class="right last zzz">
{{ deviceData.address || "-" }}
</div>
</div>
<div class="line"></div>
<div class="top">
<div class="info-item" :show-overflow-tooltip="true">
<div class="label">联系人：</div>
<div class="username-value" :title="deviceData.linkman">{{ deviceData.linkman }}</div>
</div>
<div class="info-item" :show-overflow-tooltip="true">
<div class="label">联系电话：</div>
<div class="phone-value" :title="deviceData.phone"> {{ deviceData.phone }} </div>
</div>
<!-- <div class="top flex top-bottom">
</div>
<div class="addresstop">
<div class="group">
<div class="left">联系地址：</div>
<div :title="deviceData.address" class="right last zzz">
{{ deviceData.address || "-" }}
</div>
</div>
</div> -->
</div>
</div>
<template v-if="deviceData.detectorCountList.length>0">
<div class="foot">
<div class="thead flex">
<div class="first">设备类型</div>
<div>设备数量</div>
<div>在线设备</div>
<div>离线设备</div>
<!-- <div>历史报警</div>
<div>已处理报警</div> -->
<div class="last">报警中</div>
</div>
<div
v-for="data in deviceData.detectorCountList"
:key="data.userId"
class="tbody flex"
>
<div v-unValue class="first zzz">{{ data.detectorType }}</div>
<div class="">{{ data.detectorCount }}</div>
<div v-unValue class="">
{{ data.onLineNum }}
</div>
<div v-unValue class="">
{{ data.offLineNum }}
</div>
<!-- <div v-unValue class="">
{{ data.historyAlarmNum }}
<template v-if="deviceData.detectorCountList.length>0">
<div class="foot">
<div class="thead flex">
<div class="first">设备类型</div>
<div>设备数量</div>
<div>在线设备</div>
<div>离线设备</div>
<!-- <div>历史报警</div>
<div>已处理报警</div> -->
<div class="last">报警中</div>
</div>
<div
v-for="data in deviceData.detectorCountList"
:key="data.userId"
class="tbody flex"
>
<div v-unValue class="first zzz">{{ data.detectorType }}</div>
<div class="">{{ data.detectorCount }}</div>
<div v-unValue class="">
{{ data.onLineNum }}
</div>
<div v-unValue class="">
{{ data.cancelAlarmNum }}
</div> -->
<div v-unValue class="last zzz">
{{ data.processingAlarmNum }}
</div>
{{ data.offLineNum }}
</div>
<!-- <div v-unValue class="">
{{ data.historyAlarmNum }}
</div>
</template>
</div>
<div v-unValue class="">
{{ data.cancelAlarmNum }}
</div> -->
<div v-unValue class="last zzz">
{{ data.processingAlarmNum }}
</div>
</div>
</div>
</template>
<div style="width: 100%; display: flex" v-if="detcetorList>0">
<div class="btn">
......@@ -258,21 +247,18 @@ export default {
cursor: pointer;
}
.top {
.addresstop {
margin-top: 10px;
margin-bottom: 10px;
box-sizing: border-box;
&.top-top {
// div{
// width: 33%;
// }
}
display: flex;
// gap: 10px; /* 列与列之间的间隔 */
.group {
height: 30px;
display: flex;
justify-content: space-evenly;
box-sizing: border-box;
div {
justify-content: flex-start; /* 左对齐 */
align-items: center; /* 垂直居中，如果需要的话 */
div {
box-sizing: border-box;
text-align: left;
font-size: 14px;
......@@ -288,26 +274,87 @@ export default {
text-align: left;
}
}
&.top-bottom {
.left {
flex: none;
width: 192px !important;
}
.right {
flex: 1;
}
}
.top {
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
display: flex; /* 使用 Flexbox 布局 */
align-items: center; /* 垂直居中 */
justify-content: space-between; /* 平均分布 */
box-sizing: border-box; /* 边框盒模型 */
.info-item{
flex: 1; /* 每个组合占据一半的空间 */
display: flex;
align-items: center; /* 垂直居中 */
justify-content: flex-start; /* 左对齐 */
overflow: hidden; /* 防止内容溢出容器 */
}
.label {
min-width: 80px;
text-align: left; /* 标签右对齐 */
padding-left: 5px; /* 添加一些右侧内边距 */
color: #ffffff;
font-size: 14px;
}
.username-value,
.phone-value {
flex: 1; /* 弹性布局，占据剩余空间 */
overflow: hidden; /* 如果值过长，隐藏超出的部分 */
text-overflow: ellipsis; /* 显示省略号 */
white-space: nowrap; /* 不允许文本换行 */
text-align: left; /* 值左对齐 */
padding-left: 5px; /* 添加一些左侧内边距 */
color: #ffffff;
font-size: 14px;
}
// .info-item {
// width: 50%;
// }
}
// .middle {
// width: 100%;
// padding: 5px;
// border: 1px solid #ffffff;
// box-sizing: border-box;
// font-size: 14px;
// color: #ffffff;
// text-indent: 2em;
// .top {
// margin-top: 10px;
// margin-bottom: 10px;
// }
// box-sizing: border-box;
// &.top-top {
// // div{
// // width: 33%;
// // }
// }
// .group {
// height: 30px;
// display: flex;
// justify-content: space-evenly;
// box-sizing: border-box;
// div {
// box-sizing: border-box;
// text-align: left;
// font-size: 14px;
// color: #ffffff;
// line-height: 30px;
// padding: 0 5px;
// &.last {
// border-right: none;
// }
// }
// .left {
// text-align: left;
// }
// }
// &.top-bottom {
// .left {
// flex: none;
// width: 192px !important;
// }
// .right {
// flex: 1;
// }
// }
// }
.foot {
font-size: 14px;
color: #ffffff;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment