Skip to content

G
gassafety
Commit 4697fb41 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

设备录入上图页面的样式修改完毕

parent c2269b3d
Hide whitespace changes
Inline Side-by-side
Showing with 145 additions and 85 deletions
gassafety-web/src/components/PopWindow/flowMeter.vue
View file @ 4697fb41
......@@ -13,6 +13,7 @@
v-model="form.pipeId"
placeholder="请选择所属管道"
style="width: 100%"
@change="selectChange"
>
<el-option
v-for="item in pipeList"
......@@ -200,6 +201,10 @@ export default {
MyFileUpload,
},
methods: {
selectChange(e){
const arr = this.pipeList.filter(item=>item.pipeId == e);
this.form.pipeName = arr[0].pipeName;
},
show() {
this.dialogVisible = true;
},
......@@ -210,7 +215,7 @@ export default {
this.form.iconUrl = res.url;
},
submitForm() {
console.log(this.form);
// console.log("this.form",this.form);
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.deviceId != null) {
......
gassafety-web/src/components/PopWindow/lineInfoWindow.vue
View file @ 4697fb41
<template>
<div class="wrapper">
<div class="top display-default">
<div class="left text">{{ obj.pipeName }}</div>
<div class="left text ddd" :title="obj.pipeName">{{ obj.pipeName }}</div>
<div class="right text">
<img @click="close" src="../../assets/images/closeBtn.png" alt="" />
</div>
......@@ -132,27 +132,30 @@ export default {
.wrapper {
width: 406px;
// height: 488px;
background: #fff;
// background: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
background: rgba(7, 29, 51, 0.9);
color: #fff;
// overflow: hidden;
&:before {
content: "";
position: absolute;
left: -20px;
top: 5px;
width: 0px;
height: 0px;
/* border: 20px solid red; */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #053b6a;
}
.top {
width: 100%;
height: 51px;
background-color: #053b6a;
// background-color: #053b6a;
background-image: url(../../assets/images/blueTopBg.png);
background-size: 100% 100%;
background-position: center;
&:before {
content: "";
position: absolute;
left: -20px;
top: 5px;
z-index: -1;
width: 33px;
height: 33px;
background-image: url(../../assets/images/blueLeftTriangle.png);
}
.text {
font-weight: 600;
font-size: 16px;
......@@ -187,7 +190,7 @@ export default {
.eq-text {
font-size: 14px;
font-weight: 400;
color: #1d1d1d;
color: #fff;
opacity: 1;
& > span {
vertical-align: top;
......
gassafety-web/src/components/PopWindow/markerInfoWindow.vue
View file @ 4697fb41
......@@ -2,7 +2,7 @@
<div class="wrapper">
<span class="dot-left"></span>
<div class="top display-default">
<div class="left text">{{ data.deviceName }}</div>
<div class="left text ddd" :title="data.deviceName">{{ data.deviceName }}</div>
<div class="right text">
<img
src="../../assets/images/closeBtn.png"
......@@ -51,8 +51,8 @@
</el-col>
<div>
<span>管道所在地址：</span>
<span>{{ data.pipeAddr }}</span>
<span>设备所在地址：</span>
<span>{{ data.deviceAddr }}</span>
</div>
<div>
<span>备注信息：</span>
......@@ -88,26 +88,28 @@ export default {
.wrapper {
width: 406px;
// height: 488px;
background: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
// background: #fff;
// overflow: hidden;
background: rgba(7, 29, 51, 0.9);
color: #fff;
.top {
width: 100%;
height: 51px;
background-color: #053b6a;
background-image: url(../../assets/images/blueTopBg.png);
background-size: 100% 100%;
background-position: center;
color: #fff;
&:before {
content: "";
position: absolute;
left: -20px;
top: 5px;
width: 0px;
height: 0px;
/* border: 20px solid red; */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #053b6a;
z-index: -1;
width: 33px;
height: 33px;
background-image: url(../../assets/images/blueLeftTriangle.png);
}
.text {
font-weight: 600;
......@@ -143,7 +145,7 @@ export default {
.eq-text {
font-size: 14px;
font-weight: 400;
color: #1d1d1d;
color: #fff;
opacity: 1;
& > span {
vertical-align: top;
......
gassafety-web/src/components/PopWindow/pipelineView.vue
View file @ 4697fb41
......@@ -349,7 +349,6 @@ export default {
// 图片列表移除
listRemove(e) {
this.editForm.iconUrl = "";
this.fileArr = [];
},
},
......
gassafety-web/src/components/PopWindow/pressureGage.vue
View file @ 4697fb41
......@@ -13,6 +13,7 @@
v-model="form.pipeId"
placeholder="请选择所属管道"
style="width: 100%"
@change="selectChange"
>
<el-option
v-for="item in pipeList"
......@@ -201,6 +202,10 @@ export default {
MyFileUpload,
},
methods: {
selectChange(e){
const arr = this.pipeList.filter(item=>item.pipeId == e);
this.form.pipeName = arr[0].pipeName;
},
show() {
this.dialogVisible = true;
},
......
gassafety-web/src/components/PopWindow/regulatorBox.vue
View file @ 4697fb41
......@@ -13,6 +13,7 @@
v-model="form.pipeId"
placeholder="请选择所属管道"
style="width: 100%"
@change="selectChange"
>
<el-option
v-for="item in pipeList"
......@@ -200,6 +201,10 @@ export default {
MyFileUpload,
},
methods: {
selectChange(e){
const arr = this.pipeList.filter(item=>item.pipeId == e);
this.form.pipeName = arr[0].pipeName;
},
show() {
this.dialogVisible = true;
//this.getPipeInfo();
......
gassafety-web/src/components/PopWindow/valveWell.vue
View file @ 4697fb41
......@@ -13,6 +13,7 @@
v-model="form.pipeId"
placeholder="请选择所属管道"
style="width: 100%"
@change="selectChange"
>
<el-option
v-for="item in pipeList"
......@@ -198,6 +199,10 @@ export default {
MyFileUpload,
},
methods: {
selectChange(e){
const arr = this.pipeList.filter(item=>item.pipeId == e);
this.form.pipeName = arr[0].pipeName;
},
show() {
this.dialogVisible = true;
},
......
gassafety-web/src/components/PopWindowGis/lineInfoWindow.vue
View file @ 4697fb41
......@@ -151,9 +151,9 @@ export default {
.wrapper {
width: 406px;
max-height: 430px;
background: rgba(7, 29, 51, 0.9);
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
background: rgba(7, 29, 51, 0.9);
color: #fff;
// overflow: hidden;
......
gassafety-web/src/utils/gaodeMap.js
View file @ 4697fb41
......@@ -54,6 +54,7 @@ class gaodeMap {
// labelzIndex: 110,
pitch: 8,
zoom: 9,
mapStyle: "amap://styles/1c84d2203793b0f622df2cda53db1afd"
// mapStyle: 'amap://styles/darkblue',
// mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae',
});
......@@ -77,7 +78,7 @@ class gaodeMap {
this.createNewLine();
console.log("map点击事件新建");
})
.catch(() => { });
.catch(() => {});
}
// console.log("抬起来了");
});
......@@ -116,7 +117,7 @@ class gaodeMap {
let options = this.myMap.getStatus();
options.scrollWheel = true;
this.myMap.setStatus(options);
console.log("飞行结束")
console.log("飞行结束");
});
this.districtBoundaries(latlng);
......@@ -157,9 +158,8 @@ class gaodeMap {
level: "city"
};
let district = new AMap.DistrictSearch(opts);
district.search(that.center, function (status, result) {
district.search(that.center, function(status, result) {
if (status == "complete") {
let defaultCenter = [];
defaultCenter.push(result.districtList[0].center.lng);
defaultCenter.push(result.districtList[0].center.lat);
......@@ -169,7 +169,7 @@ class gaodeMap {
map.setCenter(defaultCenter);
}
console.log("defaultCenter", defaultCenter)
console.log("defaultCenter", defaultCenter);
let bounds = result.districtList[0].boundaries;
for (let i = 0; i < bounds.length; i += 1) {
......@@ -199,12 +199,12 @@ class gaodeMap {
offset: new AMap.Pixel(24, -38),
anchor: "left-top"
});
infoWindow.on("mouseover", function () {
infoWindow.on("mouseover", function() {
let options = map.getStatus();
options.scrollWheel = false;
map.setStatus(options);
});
infoWindow.on("mouseout", function () {
infoWindow.on("mouseout", function() {
let options = map.getStatus();
options.scrollWheel = true;
map.setStatus(options);
......@@ -234,7 +234,7 @@ class gaodeMap {
editWindow.obj = marker;
editWindow.gaoMap = that;
editWindow.map = map;
marker.on("click", function (e) {
marker.on("click", function(e) {
if ("edit" == that.mapOperateType) {
editWindow.form = e.target.getExtData();
editWindow.show();
......@@ -248,10 +248,10 @@ class gaodeMap {
vue
.$confirm(
'是否删除名称为"' +
e.target.getExtData().deviceName +
'"的' +
diviceType[markerType] +
" ?",
e.target.getExtData().deviceName +
'"的' +
diviceType[markerType] +
" ?",
"提示",
{
type: "warning"
......@@ -296,19 +296,19 @@ class gaodeMap {
infoWindow.open(map, e.target.getPosition());
}*/
});
marker.on("dragend", function (e) {
marker.on("dragend", function(e) {
editWindow.form.longitude = e.lnglat.lng;
editWindow.form.latitude = e.lnglat.lat;
});
} else {
marker.on("mouseover", function () {
marker.on("mouseover", function() {
marker.setLabel({
offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
content: "<div class='info'>" + data.deviceName + "</div>", //设置文本标注内容
direction: "top" //设置文本标注方位
});
});
marker.on("mouseout", function () {
marker.on("mouseout", function() {
marker.setLabel({
content: null
});
......@@ -447,7 +447,7 @@ class gaodeMap {
case DEVICE_TYPE.REGEULATORBOX: {
let icon = new AMap.Icon({
//size: new AMap.Size(51, 23),
image: require("../assets/oldImages/tiaoyaxiang.png")
image: require("../assets/images/tiaoyaxiang.png")
});
marker.setIcon(icon);
break;
......@@ -455,7 +455,7 @@ class gaodeMap {
case DEVICE_TYPE.VALUEWELL: {
let icon = new AMap.Icon({
//size: new AMap.Size(51, 23),
image: require("../assets/oldImages/famenjing.png")
image: require("../assets/images/famenjing.png")
});
marker.setIcon(icon);
break;
......@@ -463,7 +463,7 @@ class gaodeMap {
case DEVICE_TYPE.FLOWMETER: {
let icon = new AMap.Icon({
//size: new AMap.Size(51, 23),
image: require("../assets/oldImages/liuliangji.png")
image: require("../assets/images/liuliangji.png")
});
marker.setIcon(icon);
break;
......@@ -487,7 +487,7 @@ class gaodeMap {
case DEVICE_TYPE.PRESSUREGAGE: {
let icon = new AMap.Icon({
//size: new AMap.Size(51, 23),
image: require("../assets/oldImages/yalibiao.png")
image: require("../assets/images/yalibiao.png")
});
marker.setIcon(icon);
break;
......@@ -952,14 +952,14 @@ class gaodeMap {
this.overlays = [];
let that = this;
this.markerOverlays = [];
this.mouseTool.on("draw", function (e) {
this.mouseTool.on("draw", function(e) {
if (e.obj.getExtData().type != "newLine") {
map.remove(that.markerOverlays);
const device = that.createInfowindow("新增");
device.map = map;
device.obj = e.obj;
device.gaoMap = that;
e.obj.on("click", function (aa) {
e.obj.on("click", function(aa) {
let postion = aa.target._position;
//兼容拖拽后单击事件，拖拽后点击事件返回位置为数组
if (postion instanceof Array) {
......@@ -971,11 +971,11 @@ class gaodeMap {
}
device.show();
});
e.obj.on("mouseover", function () {
e.obj.on("mouseover", function() {
that.mouseTool.close();
});
e.obj.on("mouseout", function () {
e.obj.on("mouseout", function() {
that.draw(that.deviceType);
});
......@@ -1086,7 +1086,7 @@ class gaodeMap {
"AMap.MapType",
"AMap.Geolocation"
],
function () {
function() {
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
//map.addControl(new AMap.ToolBar());
......@@ -1109,7 +1109,7 @@ class gaodeMap {
searchTips(inputId) {
let that = this;
AMap.plugin(["AMap.AutoComplete", "AMap.PlaceSearch"], function () {
AMap.plugin(["AMap.AutoComplete", "AMap.PlaceSearch"], function() {
//输入提示
// var autoOptions = {
// input: inputId
......@@ -1170,7 +1170,10 @@ class gaodeMap {
const path1 = eval(coordinates)[0];
const path2 = eval(coordinates)[1];
// map.setFitView();
const path3 = [(Number(path1[0])+Number(path2[0]) )/2 ,(Number(path1[1])+Number(path2[1]) )/2];
const path3 = [
(Number(path1[0]) + Number(path2[0])) / 2,
(Number(path1[1]) + Number(path2[1])) / 2
];
map.setCenter(path3, false);
// const lntlat = eval(coordinates)[0];
......
gassafety-web/src/views/device/map/index.vue
View file @ 4697fb41
......@@ -213,7 +213,7 @@
</template>
<!-- 无数据 -->
<template v-else>
<div style="padding-left: 5px">暂无数据</div>
<div style="padding-left: 5px; color: #fff">暂无数据</div>
</template>
</div>
</el-collapse-transition>
......@@ -307,7 +307,7 @@ export default {
},
methods: {
onResize() {
this.boxHeight = document.body.clientHeight - 81;
this.boxHeight = document.body.clientHeight - 80;
this.boxWidth = document.body.clientWidth - 100;
},
async initMap() {
......@@ -1116,7 +1116,9 @@ input[type="radio"] {
left: 100px;
width: 348px;
transition: 0.2s linear;
background: #fff;
// background: #fff;
background: rgba(6, 29, 51, 0.8);
// background: red;
opacity: 0;
&.opacity {
......@@ -1188,7 +1190,9 @@ input[type="radio"] {
// border-right: 1px solid #cccccc;
box-sizing: border-box;
// padding-left: 5px;
color: #053b6a;
// color: #053b6a;
color: #fff;
font-weight: 600;
}
}
......@@ -1200,9 +1204,14 @@ input[type="radio"] {
color: #1d1d1d;
&:hover {
box-sizing: border-box;
border-bottom: 1px solid #053b6a;
color: #053b6a;
// border-bottom: 1px solid #053b6a;
border-bottom: 1px solid #7fc0f8;
// color: #053b6a;
font-weight: 600;
> div {
color: #7fc0f8;
}
}
&.topActive {
// border-top: 1px solid #cccccc;
......@@ -1219,6 +1228,8 @@ input[type="radio"] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #fff;
// border-right: 1px solid #cccccc;
}
}
......@@ -1242,14 +1253,16 @@ input[type="radio"] {
height: 48px;
padding-left: 20px;
display: flex;
background-color: #ffffff;
// background-color: #ffffff;
box-sizing: border-box;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
cursor: pointer;
position: relative;
// box-sizing: border-box;
&.firstbox {
border-top: 1px solid rgba(0, 0, 0, 0.1);
// border-top: 1px solid rgba(0, 0, 0, 0.1);
border-top: 1px solid rgba(5, 59, 106, 0);
// box-sizing: border-box;
&:hover {
border-top: 1px solid rgba(5, 59, 106, 0);
......@@ -1257,15 +1270,24 @@ input[type="radio"] {
}
&:hover {
box-sizing: border-box;
background-color: rgba(5, 59, 106, 0.1);
// background-color: rgba(5, 59, 106, 0.1);
background-color: #053b6a;
border-bottom: none !important;
.upPic {
color: #31eaea;
}
.left,
.right {
color: #31eaea !important;
}
}
.upPic {
display: inline-block;
margin-left: 40px;
line-height: 48px;
font-size: 16px;
color: #053b6a;
// color: #053b6a;
color: #fff;
}
> i.ju {
position: absolute;
......@@ -1289,6 +1311,7 @@ input[type="radio"] {
color: #fff;
}
> i.arrow-right {
color: #fff !important;
position: absolute;
right: 32px;
top: 16px;
......@@ -1299,16 +1322,21 @@ input[type="radio"] {
}
&.active {
// background-color: #053b6a;
.left,
.right {
color: #053b6a;
}
// .left,
// .right {
// color: #053b6a;
// }
// > i {
// color: #053b6a;
// }
> i {
color: #053b6a;
color: #31eaea;
font-weight: 600;
}
}
.left {
color: #053b6a;
// color: #053b6a;
color: #fff;
line-height: 48px;
margin-left: 28px;
.iconfont {
......@@ -1316,7 +1344,8 @@ input[type="radio"] {
}
}
.right {
color: #1d1d1d;
// color: #1d1d1d;
color: #fff;
line-height: 48px;
font-size: 16px;
margin-left: 4px;
......@@ -1337,6 +1366,8 @@ input[type="radio"] {
padding-bottom: 2px;
.btn {
border-radius: 50%;
background: none;
// width: 14px;
// height: 14px;
padding: 2px;
......@@ -1345,17 +1376,18 @@ input[type="radio"] {
display: inline-block;
font-size: 14px;
padding: 0px 5px;
color: #fff;
}
}
}
}
// 开关
.switch {
.switch {
position: absolute;
font-size: 30px;
right: -27px;
right: -30px;
top: 50%;
margin-top: -30px;
margin-top: -123px;
width: 40px;
border-radius: 40%;
overflow: hidden;
......
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ 4697fb41
......@@ -448,11 +448,10 @@ export default {
const RightBottom = pageDomRight.offsetTop + pageDomRight.offsetHeight;
// 下边的上边
const bottomTop = pageDomBottom.offsetTop;
if(RightBottom>bottomTop){
if (RightBottom > bottomTop) {
// 重叠了，bottom右移动
this.bottomMarginRight=true;
this.bottomMarginRight = true;
}
},
initMap() {
......@@ -1512,7 +1511,7 @@ export default {
width: 100%;
}
// 如果right与bottom 重叠，则bottom左移动
.bottomMarginRight{
.bottomMarginRight {
right: 280px;
}
// .btn-wrapper {
......@@ -1833,7 +1832,9 @@ input[type="radio"] {
position: relative;
// box-sizing: border-box;
&.firstbox {
border-top: 1px solid rgba(0, 0, 0, 0.5);
// border-top: 1px solid rgba(0, 0, 0, 0.5);
border-top: 1px solid rgba(5, 59, 106, 0);
// box-sizing: border-box;
&:hover {
border-top: 1px solid rgba(5, 59, 106, 0);
......
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