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 @@ ...@@ -16,74 +16,63 @@
<!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> --> <!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> -->
<i class="el-icon-close" style="font-size: 20px; color: #49d8ff"></i> <i class="el-icon-close" style="font-size: 20px; color: #49d8ff"></i>
</div> </div>
<div class="line"></div> <div class="line"></div>
<div> <div class="top">
<div class="top flex top-top"> <div class="info-item" :show-overflow-tooltip="true">
<div class="group" style=""> <div class="label">联系人：</div>
<div class="left">联系人：</div> <div class="username-value" :title="deviceData.linkman">{{ deviceData.linkman }}</div>
<div class="right zzz">{{ deviceData.linkman }}</div> </div>
</div> <div class="info-item" :show-overflow-tooltip="true">
<div class="group" style=""> <div class="label">联系电话：</div>
<div class="left">联系电话:</div> <div class="phone-value" :title="deviceData.phone"> {{ deviceData.phone }} </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> </div>
</div>
<!-- <div class="top flex top-bottom"> <div class="addresstop">
<div class="group"> <div class="group">
<div class="left">联系地址：</div> <div class="left">联系地址：</div>
<div :title="deviceData.address" class="right last zzz"> <div :title="deviceData.address" class="right last zzz">
{{ deviceData.address || "-" }} {{ deviceData.address || "-" }}
</div> </div>
</div> </div>
</div> --> </div>
<template v-if="deviceData.detectorCountList.length>0"> <template v-if="deviceData.detectorCountList.length>0">
<div class="foot"> <div class="foot">
<div class="thead flex"> <div class="thead flex">
<div class="first">设备类型</div> <div class="first">设备类型</div>
<div>设备数量</div> <div>设备数量</div>
<div>在线设备</div> <div>在线设备</div>
<div>离线设备</div> <div>离线设备</div>
<!-- <div>历史报警</div> <!-- <div>历史报警</div>
<div>已处理报警</div> --> <div>已处理报警</div> -->
<div class="last">报警中</div> <div class="last">报警中</div>
</div> </div>
<div <div
v-for="data in deviceData.detectorCountList" v-for="data in deviceData.detectorCountList"
:key="data.userId" :key="data.userId"
class="tbody flex" class="tbody flex"
> >
<div v-unValue class="first zzz">{{ data.detectorType }}</div> <div v-unValue class="first zzz">{{ data.detectorType }}</div>
<div class="">{{ data.detectorCount }}</div> <div class="">{{ data.detectorCount }}</div>
<div v-unValue class=""> <div v-unValue class="">
{{ data.onLineNum }} {{ data.onLineNum }}
</div>
<div v-unValue class="">
{{ data.offLineNum }}
</div>
<!-- <div v-unValue class="">
{{ data.historyAlarmNum }}
</div> </div>
<div v-unValue class=""> <div v-unValue class="">
{{ data.cancelAlarmNum }} {{ data.offLineNum }}
</div> -->
<div v-unValue class="last zzz">
{{ data.processingAlarmNum }}
</div>
</div> </div>
<!-- <div v-unValue class="">
{{ data.historyAlarmNum }}
</div> </div>
</template> <div v-unValue class="">
</div> {{ 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 style="width: 100%; display: flex" v-if="detcetorList>0">
<div class="btn"> <div class="btn">
...@@ -258,21 +247,18 @@ export default { ...@@ -258,21 +247,18 @@ export default {
cursor: pointer; cursor: pointer;
} }
.top {
.addresstop {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
box-sizing: border-box; display: flex;
&.top-top { // gap: 10px; /* 列与列之间的间隔 */
// div{
// width: 33%;
// }
}
.group { .group {
height: 30px; height: 30px;
display: flex; display: flex;
justify-content: space-evenly; justify-content: flex-start; /* 左对齐 */
box-sizing: border-box; align-items: center; /* 垂直居中，如果需要的话 */
div { div {
box-sizing: border-box; box-sizing: border-box;
text-align: left; text-align: left;
font-size: 14px; font-size: 14px;
...@@ -288,26 +274,87 @@ export default { ...@@ -288,26 +274,87 @@ export default {
text-align: left; text-align: left;
} }
} }
&.top-bottom { }
.left { .top {
flex: none; margin-top: 10px;
width: 192px !important; margin-bottom: 10px;
} width: 100%;
.right { display: flex; /* 使用 Flexbox 布局 */
flex: 1; 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 { // .top {
// width: 100%; // margin-top: 10px;
// padding: 5px;
// border: 1px solid #ffffff;
// box-sizing: border-box;
// font-size: 14px;
// color: #ffffff;
// text-indent: 2em;
// margin-bottom: 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 { .foot {
font-size: 14px; font-size: 14px;
color: #ffffff; 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