Skip to content

P
pingshan-ranqi
Commit c7aa837d authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

页面样式优化

parent 190b2159
Hide whitespace changes
Inline Side-by-side
Showing with 100 additions and 34 deletions
gassafety-web/src/components/PopWindowGis/detectorInfoWindow.vue
View file @ c7aa837d
......@@ -2,7 +2,7 @@
<div class="wrapper">
<span class="dot-left"></span>
<div class="top display-default">
<div class="left text ddd" :title="data.deviceName">
<div class="left text ddd" :title="data.nickName">
{{ data.nickName }}
</div>
<div class="right text">
......@@ -78,7 +78,7 @@ export default {
this.data.class.view.domAllShow();
},
centerShow() {
this.data.class.view.getDetectorInfoList({ userId: this.data.userId });
this.data.class.view.getDetectorInfoList({ userId: this.data.userId },this.data.nickName);
},
},
};
......
gassafety-web/src/views/enterprise/mapView/components/Center.vue
View file @ c7aa837d
......@@ -9,7 +9,7 @@
<div v-show="show" class="wrapper center">
<div class="left">
<div class="title-wrapper">
<div class="title">报警器列表</div>
<div class="title">{{title}}报警器列表</div>
<div class="close" @click="close">
<img src="@/assets/images/closeBtn.png" alt="" />
</div>
......@@ -21,12 +21,21 @@
style="width: 100%"
:height="tableHeight"
class="el-bottom"
:key="Math.random()"
>
<!-- :height="tableHeight" -->
<el-table-column prop="detectorCode" label="设备编号" width="180">
<template slot-scope="scope">
<div :title="scope.row.detectorCode" class="ddd" v-un-content>
{{ scope.row.detectorCode }}
</div>
</template>
</el-table-column>
<el-table-column prop="detectorName" label="设备名称" width="100">
<template slot-scope="scope">
<div v-un-content>{{ scope.row.detectorName }}</div>
<div :title="scope.row.detectorName" class="ddd" v-un-content>
{{ scope.row.detectorName }}
</div>
</template>
</el-table-column>
<el-table-column prop="medium" label="监测介质" width="">
......@@ -34,8 +43,6 @@
<div v-un-content>{{ scope.row.medium }}</div>
</template>
</el-table-column>
<el-table-column prop="detectorCode" label="设备编号" width="150">
</el-table-column>
<el-table-column prop="linkman" label="联系人" width="100">
</el-table-column>
<el-table-column prop="phone" label="联系电话" width="">
......@@ -47,7 +54,6 @@
<div v-un-content>{{ scope.row.alarmTime }}</div>
</template>
</el-table-column>
<el-table-column prop="alarmValue" label="定位" width="50">
<template slot-scope="scope">
<div
......@@ -65,6 +71,7 @@
layout="prev, pager, next, jumper"
:total="total"
:hide-on-single-page="total <= pageSize"
:key="total+''+pageSize"
>
</el-pagination>
</div>
......@@ -86,6 +93,9 @@ export default {
show: {
type: Boolean,
},
title: {
type: String,
},
userId: {
type: [Number, String],
},
......@@ -103,13 +113,13 @@ export default {
fade: "fade",
tableHeight: 600,
tableData: [
{
deviceCode: "2016-05-05",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路",
},
// {
// deviceCode: "2016-05-05",
// name: "王小虎",
// province: "上海",
// city: "普陀区",
// address: "上海市普陀区金沙江路",
// },
],
moveX: 0,
moveY: 0,
......@@ -139,7 +149,7 @@ export default {
userId: this.userId,
pageNum: val,
pageSize: this.pageSize,
});
},this.title);
},
close() {
this.fade = "fade";
......@@ -282,12 +292,14 @@ export default {
background: #1890ff;
padding: 5px;
.title {
width: 100%;
color: #fff;
text-align: center;
}
.close {
box-sizing: border-box;
padding-top: 2px;
padding-right: 2px;
padding-right: 5px;
cursor: pointer;
}
}
......@@ -337,7 +349,7 @@ export default {
}
}
.bottom {
width: 900px;
width: 1000px;
margin: 0 auto;
position: relative;
}
......
gassafety-web/src/views/enterprise/mapView/components/RightPic.vue
View file @ c7aa837d
......@@ -2,21 +2,25 @@
<div class="wrapper rightPic">
<div class="math">
<div>
<span>{{ rightPicData.alarmNum }}</span
>报警总数
<span :title="rightPicData.alarmNum" class="ddd">{{ rightPicData.alarmNum }}</span>
<i>报警总数</i>
</div>
<div>
<span>{{ rightPicData.onlineNum }}</span
>在线设备
<span :title="rightPicData.onlineNum" class="ddd">{{ rightPicData.onlineNum }}</span>
<i>在线设备</i>
</div>
<div>
<span>{{ rightPicData.offlineNum }}</span
>离线设备
<span :title="rightPicData.offlineNum" class="ddd">{{ rightPicData.offlineNum }}</span>
<i>离线设备</i>
</div>
</div>
<div class="left">
<div class="bottom right-bottom-data-left" @mouseover="tableEnter" @mouseout="timerAni">
<div
class="bottom right-bottom-data-left"
@mouseover="tableEnter"
@mouseout="timerAni"
>
<el-table
size="mini"
:data="tableData"
......@@ -159,6 +163,16 @@ export default {
> span {
color: aqua;
font-size: 20px;
display: inline-block;
margin-right: 8px;
max-width: 50px;
overflow: hidden;
}
> i {
display: inline-block;
overflow: hidden;
font-style: normal;
}
font-size: 14px;
color: #fff;
......
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ c7aa837d
......@@ -81,7 +81,11 @@
:list="rightBototmData"
/>
<!-- 右边 -->
<RightPic :rightPicData="rightPicData" v-show="RightPicShow" ref="RightPic"/>
<RightPic
:rightPicData="rightPicData"
v-show="RightPicShow"
ref="RightPic"
/>
<!-- 报警工单 -->
<CreateWork
ref="CreateWork"
......@@ -95,7 +99,15 @@
@callback="CreateWorkTroubleCallBack"
/>
<!-- 报警用户的报警器列表 -->
<Center :show="centerShow" ref="center" :detcetorList="detcetorList" :userId="centerUserId" :total="centerTotal" :pageSize="20"/>
<Center
:title="centerTitle"
:show="centerShow"
ref="center"
:detcetorList="detcetorList"
:userId="centerUserId"
:total="centerTotal"
:pageSize="20"
/>
<!-- 当报警列表隐藏时，这个显示,点击就让Center回来 -->
<div
@click="
......@@ -162,7 +174,7 @@
</el-button> -->
<div class="leftBar-wrapper">
<!-- 燃气公司 -->
<div class="compTitle">燃气公司设备</div>
<div class="comp-wrapper">
<div
class="comp"
......@@ -179,7 +191,10 @@
class="box-wrapper"
v-for="(item, index) in changeBtnData"
:key="item.value"
:class="{ boxWrapperTop: index == 5 }"
>
<!-- :class="{boxWrapperTop:index==5}" 的意思是非公司切换的列表 -->
<div class="boxTitle" v-if="index == 5">安全防护设备</div>
<div
class="box"
:class="{
......@@ -263,6 +278,7 @@
</div>
</div>
</template>
<!-- 隐患的展示 -->
<template v-else-if="item.value == 8">
<div class="list-wrapper">
......@@ -359,7 +375,7 @@
>
<div class="no">{{ iten.no + 1 }}</div>
<div :title="iten.deviceName" class="code">
{{ iten.deviceName }}
{{ iten.deviceName }}
</div>
<div :title="iten.deviceAddress" class="name">
{{ iten.deviceAddress ? iten.deviceAddress : "-" }}
......@@ -601,12 +617,15 @@ export default {
// 报警列表的数据
detcetorList: [],
// 报警列表的总数据，分页用的
centerTotal:0,
centerTotal: 0,
// 这是center列表翻页时候用的userId
centerUserId:99,
centerUserId: 99,
// center 的title
centerTitle: "",
lntPosition: 0,
//右上角数据
rightPicData:{},
rightPicData: {},
};
},
created() {
......@@ -845,7 +864,7 @@ export default {
});
},
// 获取报警器用户的报警器分布
getDetectorInfoList(queryParams) {
getDetectorInfoList(queryParams, title) {
console.log(queryParams);
return getdetectorInfoList(queryParams).then((res) => {
console.log("queryParams", res);
......@@ -856,6 +875,7 @@ export default {
this.centerTotal = res.total;
this.$refs.center.fade = "fade";
this.centerShow = true;
this.centerTitle = title;
// 传递回去
return res.code;
}
......@@ -865,7 +885,7 @@ export default {
getAlarmData(queryParams) {
return alarmData(queryParams).then((res) => {
if (res.code == 200) {
console.log('右上角数据',res)
console.log("右上角数据", res);
this.rightPicData = res.data;
return res.code;
}
......@@ -2412,8 +2432,28 @@ input[type="radio"] {
// margin-left: 20px;
margin-top: 15px;
// box-sizing: border-box;
// 燃气公司
.compTitle {
text-align: center;
color: #31eaea;
font-size: 25px;
padding: 5px 0 10px 0;
}
.box-wrapper {
width: 340px;
position: relative;
&.boxWrapperTop {
.boxTitle {
text-align: center;
color: #31eaea;
font-size: 25px;
padding: 10px 0px 5px 0px;
}
// margin-top: 60px;
.box {
// border-top: 1px solid rgba(0, 0, 0, 0.5);
}
}
}
.animate {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
......
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