Skip to content

G
gassafety
Commit 01628a86 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

gis地图抽屉样式调整

parent f8bfeac2
Hide whitespace changes
Inline Side-by-side
Showing with 338 additions and 211 deletions
gassafety-web/src/assets/styles/element-ui.scss
View file @ 01628a86
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
// dropdown // dropdown
.el-dropdown-menu { .el-dropdown-menu {
a { a {
display: block display: block;
} }
} }
...@@ -78,6 +78,19 @@ ...@@ -78,6 +78,19 @@
display: inline-flex !important; display: inline-flex !important;
} }
// gis地图里抽屉的搜索样式
.search-input {
.el-input__inner {
height: 28px;
min-height: 28px;
outline: #053b6a;
&:focus {
// outline: #053b6a;
border-color: #053b6a;
}
}
}
// to fix el-date-picker css style // to fix el-date-picker css style
.el-range-separator { .el-range-separator {
box-sizing: content-box; box-sizing: content-box;
...@@ -89,4 +102,4 @@ ...@@ -89,4 +102,4 @@
> .el-submenu__title > .el-submenu__title
.el-submenu__icon-arrow { .el-submenu__icon-arrow {
display: none; display: none;
} }
\ No newline at end of file
gassafety-web/src/assets/styles/fonticon.scss
View file @ 01628a86
@font-face { @font-face {
font-family: "iconfont"; /* Project id 2692138 */ font-family: "iconfont"; /* Project id 2692138 */
src: url('//at.alicdn.com/t/font_2692138_cd9e8nk8yoo.woff2?t=1627718383904') format('woff2'), src: url('//at.alicdn.com/t/font_2692138_spittg1q2rr.woff2?t=1629681541408') format('woff2'),
url('//at.alicdn.com/t/font_2692138_cd9e8nk8yoo.woff?t=1627718383904') format('woff'), url('//at.alicdn.com/t/font_2692138_spittg1q2rr.woff?t=1629681541408') format('woff'),
url('//at.alicdn.com/t/font_2692138_cd9e8nk8yoo.ttf?t=1627718383904') format('truetype'); url('//at.alicdn.com/t/font_2692138_spittg1q2rr.ttf?t=1629681541408') format('truetype');
} }
.iconfont { .iconfont {
...@@ -13,6 +13,19 @@ ...@@ -13,6 +13,19 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-reset:before {
content: "\e616";
}
.icon-search{
}
.icon-search:before {
content: "\e617";
font-size: 13px;
}
.icon-zhibanrenyuan:before { .icon-zhibanrenyuan:before {
content: "\e613"; content: "\e613";
} }
......
gassafety-web/src/utils/gaodeMapView.js
View file @ 01628a86
...@@ -28,7 +28,8 @@ export const DEVICE_TYPE = { ...@@ -28,7 +28,8 @@ export const DEVICE_TYPE = {
WORKORDER: "6", WORKORDER: "6",
PRESSUREGAGE: "7", PRESSUREGAGE: "7",
INSPECTOR: "8", INSPECTOR: "8",
SMALLINSPECTOR: "workPoint" SMALLINSPECTOR: "workPoint",
TROUBLE:"trouble"
}; };
class gaodeMap { class gaodeMap {
// 所有线的数组 // 所有线的数组
...@@ -114,11 +115,11 @@ class gaodeMap { ...@@ -114,11 +115,11 @@ class gaodeMap {
if (!this.onceFlag) { if (!this.onceFlag) {
this.onceFlag = true; this.onceFlag = true;
this.view.backFlag = false; this.view.backFlag = false;
let options = this.myMap.getStatus();
options.scrollWheel = true;
this.myMap.setStatus(options);
} }
// 每次地图移动结束，就让地图可以缩放
let options = this.myMap.getStatus();
options.scrollWheel = true;
this.myMap.setStatus(options);
}); });
this.districtBoundaries(); this.districtBoundaries();
} }
...@@ -268,10 +269,20 @@ class gaodeMap { ...@@ -268,10 +269,20 @@ class gaodeMap {
this.workerManMarkArr.push(marker); this.workerManMarkArr.push(marker);
} }
} }
// 隐患
if(DEVICE_TYPE.TROUBLE == markerType){
console.log("隐患上图")
}
if ( if (
DEVICE_TYPE.WORKORDER != markerType && DEVICE_TYPE.WORKORDER != markerType &&
DEVICE_TYPE.INSPECTOR != markerType && DEVICE_TYPE.INSPECTOR != markerType &&
DEVICE_TYPE.SMALLINSPECTOR != markerType DEVICE_TYPE.SMALLINSPECTOR != markerType&&
DEVICE_TYPE.TROUBLE != markerType
) { ) {
// marker.content = this.getMarketContent(data, markerInfoWindow); // marker.content = this.getMarketContent(data, markerInfoWindow);
marker.infoWindow = infoWindow; marker.infoWindow = infoWindow;
...@@ -504,6 +515,16 @@ class gaodeMap { ...@@ -504,6 +515,16 @@ class gaodeMap {
dom.remove(); dom.remove();
return html; return html;
} }
case DEVICE_TYPE.TROUBLE: {
const dom = createPop(workerManInfowindow, {
title: "隐患",
data: data,
map: map
});
const html = dom.$el;
dom.remove();
return html;
}
} }
} }
...@@ -595,6 +616,16 @@ class gaodeMap { ...@@ -595,6 +616,16 @@ class gaodeMap {
marker.setIcon(icon); marker.setIcon(icon);
break; break;
} }
//隐患
case DEVICE_TYPE.TROUBLE: {
let icon = new AMap.Icon({
opacity: 0.1,
image: require("../assets/images/trouble.png")
});
marker.workerPoint = true;
marker.setIcon(icon);
break;
}
} }
} }
changeMarkIcon(marker, iconUrl) { changeMarkIcon(marker, iconUrl) {
......
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ 01628a86
...@@ -94,9 +94,17 @@ ...@@ -94,9 +94,17 @@
placeholder="点击输入" placeholder="点击输入"
id="tipinput" id="tipinput"
class="search-input" class="search-input"
/> >
<el-button class="search-but" @click="search()">搜索</el-button> <template slot="suffix">
<el-button class="refresh-but" @click="refreshMap()">重置</el-button> <div @click="search()">
<i class="iconfont icon-search"></i>
</div>
</template>
</el-input>
<!-- <el-button class="search-but" @click="search()">搜索</el-button> -->
<el-button class="refresh-but" @click="refreshMap()">
<i class="iconfont icon-reset"></i>
</el-button>
<div class="leftBar-wrapper"> <div class="leftBar-wrapper">
<div <div
...@@ -138,7 +146,7 @@ ...@@ -138,7 +146,7 @@
<template v-if="item.list.length > 0"> <template v-if="item.list.length > 0">
<!-- 设备以及管道 展示内容是一样的 --> <!-- 设备以及管道 展示内容是一样的 -->
<template v-if="item.value != 9"> <template v-if="item.value != 9">
<div> <div class="list-wrapper">
<div class="thead"> <div class="thead">
<div class="no">序号</div> <div class="no">序号</div>
<div class="code">设备编号</div> <div class="code">设备编号</div>
...@@ -163,7 +171,7 @@ ...@@ -163,7 +171,7 @@
</template> </template>
<!-- 值班人员 展示不太一样--> <!-- 值班人员 展示不太一样-->
<template v-else-if="item.value == 9"> <template v-else-if="item.value == 9">
<div> <div class="list-wrapper">
<div class="thead"> <div class="thead">
<div class="no">序号</div> <div class="no">序号</div>
<div class="code">人员姓名</div> <div class="code">人员姓名</div>
...@@ -188,25 +196,26 @@ ...@@ -188,25 +196,26 @@
</template> </template>
<div class="goback"> <div class="goback">
<div class="minMax"> <!-- <div class="minMax">
页数 页数
{{ item.nowPage }}/{{ item.maxPage }} {{ item.nowPage }}/{{ item.maxPage }}
</div> </div> -->
<div class="btn"> <div class="btn-w">
<el-button <el-button
class="backPage" class="btn backPage"
type="mini" type="mini"
:disabled="item.nowPage == 1" :disabled="item.nowPage == 1"
@click.stop="pageBack(item, index)" @click.stop="pageBack(item, index)"
>上一页</el-button icon="el-icon-arrow-left"
> />
<span class="btn-w-num">{{ item.nowPage }}</span>
<el-button <el-button
class="goPage" class="btn goPage"
type="mini" type="mini"
:disabled="item.nowPage == item.maxPage" :disabled="item.nowPage == item.maxPage"
@click.stop="pageGo(item, index)" @click.stop="pageGo(item, index)"
>下一页</el-button icon="el-icon-arrow-right"
> />
</div> </div>
</div> </div>
</template> </template>
...@@ -230,8 +239,10 @@ import gaodeMap, { ...@@ -230,8 +239,10 @@ import gaodeMap, {
DEVICE_TYPE, DEVICE_TYPE,
mapOperateType, mapOperateType,
} from "utils/gaodeMapView.js"; } from "utils/gaodeMapView.js";
import { selectAlarmDevice } from "@/api/dataMonitoring/deviceAlarm.js"; import { selectAlarmDevice } from "@/api/dataMonitoring/deviceAlarm.js";
import { getAllDeviceInfo, countDeviceByType } from "@/api/device/deviceInfo"; import { getAllDeviceInfo, countDeviceByType } from "@/api/device/deviceInfo";
import { getMapHiddenTroublelist } from "@/api/riskManagement/hiddenTrouble";
import RightBototmData from "./components/RightBototmData.vue"; import RightBototmData from "./components/RightBototmData.vue";
import CreateWork from "./components/CreateWork.vue"; import CreateWork from "./components/CreateWork.vue";
import { getInspectorLocations } from "@/api/inspectorLocation/location"; import { getInspectorLocations } from "@/api/inspectorLocation/location";
...@@ -342,7 +353,7 @@ export default { ...@@ -342,7 +353,7 @@ export default {
created() { created() {
// 让左边的框隐藏 // 让左边的框隐藏
this.$store.dispatch("app/toggleDevice", "mobile"); this.$store.dispatch("app/toggleDevice", "mobile");
console.log("sasdasdas") console.log("sasdasdas");
}, },
mounted() { mounted() {
...@@ -369,7 +380,6 @@ export default { ...@@ -369,7 +380,6 @@ export default {
this.gaoMap.view = this; this.gaoMap.view = this;
// 右下角数据 跟值班人员 // 右下角数据 跟值班人员
this.rightBottomData(); this.rightBottomData();
// this.backFlag = false; // this.backFlag = false;
}, },
...@@ -388,6 +398,12 @@ export default { ...@@ -388,6 +398,12 @@ export default {
return this.getInspectorLocations(); return this.getInspectorLocations();
} }
}) })
.then((res) => {
if (res == 200) {
//隐患
return this.getMapHiddenTroublelist();
}
})
.then((res) => { .then((res) => {
if (res == 200) { if (res == 200) {
// 所有设备上图结束之后，左边的抽屉加载数据 // 所有设备上图结束之后，左边的抽屉加载数据
...@@ -397,6 +413,7 @@ export default { ...@@ -397,6 +413,7 @@ export default {
} }
}); });
}, },
// 设备
getDeviceInfo(queryParams) { getDeviceInfo(queryParams) {
this.loading = true; this.loading = true;
return getAllDeviceInfo(queryParams).then((response) => { return getAllDeviceInfo(queryParams).then((response) => {
...@@ -426,6 +443,7 @@ export default { ...@@ -426,6 +443,7 @@ export default {
return response.code; return response.code;
}); });
}, },
// 管道
getPipeList(queryParams) { getPipeList(queryParams) {
return pipeAllInfoList(queryParams).then((res) => { return pipeAllInfoList(queryParams).then((res) => {
console.log("管道", res); console.log("管道", res);
...@@ -453,6 +471,18 @@ export default { ...@@ -453,6 +471,18 @@ export default {
return res.code; return res.code;
}); });
}, },
// 隐患
getMapHiddenTroublelist(queryParams) {
return getMapHiddenTroublelist({ dealStatus: 3 }).then((res) => {
if (res.code == 200) {
res.data.forEach((item) => {
console.log("隐患", item);
this.gaoMap.addMarker(DEVICE_TYPE.TROUBLE, item);
});
return res.code;
}
});
},
// 获取报警资源，并且改变图上的状态 // 获取报警资源，并且改变图上的状态
getSelectAlarmDevice() { getSelectAlarmDevice() {
selectAlarmDevice().then((res) => { selectAlarmDevice().then((res) => {
...@@ -506,7 +536,6 @@ export default { ...@@ -506,7 +536,6 @@ export default {
options.lineData.alarmType = alarmType; options.lineData.alarmType = alarmType;
// 报警信息 // 报警信息
options.lineData.alarmValue = alarmValue; options.lineData.alarmValue = alarmValue;
console.log("管道报警"); console.log("管道报警");
} }
polyline.setExtData(options); polyline.setExtData(options);
...@@ -657,9 +686,7 @@ export default { ...@@ -657,9 +686,7 @@ export default {
// 左边的Bar修改值 左边抽屉 // 左边的Bar修改值 左边抽屉
leftBarChange(item) { leftBarChange(item) {
// this.leftBarNum= this.leftBarNum != item.value ? item.value:0; // this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
const index = this.leftBarNum.indexOf(item.value); const index = this.leftBarNum.indexOf(item.value);
if (index >= 0) { if (index >= 0) {
this.leftBarNum.splice(index, 1); this.leftBarNum.splice(index, 1);
} else { } else {
...@@ -926,7 +953,7 @@ export default { ...@@ -926,7 +953,7 @@ export default {
// }); // });
// console.log(this.changeBtnData[0], this.allList[0]); // console.log(this.changeBtnData[0], this.allList[0]);
this.changeBtnData.forEach((item, index) => { this.changeBtnData.forEach((item, index) => {
console.log("=======", index, this.allList[index]); // console.log("=======", index, this.allList[index]);
if (this.allList[index]?.length > 0) { if (this.allList[index]?.length > 0) {
item.list = this.allList[index].filter((item2, index2) => { item.list = this.allList[index].filter((item2, index2) => {
return ( return (
...@@ -1234,7 +1261,6 @@ export default { ...@@ -1234,7 +1261,6 @@ export default {
.right { .right {
padding-right: 38px; padding-right: 38px;
} }
.newLetf { .newLetf {
margin-left: 20px; margin-left: 20px;
} }
...@@ -1335,16 +1361,6 @@ input[type="radio"] { ...@@ -1335,16 +1361,6 @@ input[type="radio"] {
margin-right: 1rem; margin-right: 1rem;
} }
.refresh-but {
// position: fixed;
position: absolute;
top: 10px;
left: 285px;
// width: 85px;
color: white;
background-color: #053b6a;
}
.classShow { .classShow {
opacity: 0; opacity: 0;
} }
...@@ -1353,12 +1369,12 @@ input[type="radio"] { ...@@ -1353,12 +1369,12 @@ input[type="radio"] {
top: 80px; top: 80px;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 370px; width: 348px;
transition: 0.2s linear; transition: 0.2s linear;
background: #fff; background: #fff;
// background: red; // background: red;
&.back { &.back {
left: -370px; left: -348px;
} }
.scroll { .scroll {
// height: 100%; // height: 100%;
...@@ -1369,191 +1385,245 @@ input[type="radio"] { ...@@ -1369,191 +1385,245 @@ input[type="radio"] {
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
} .search-input {
.switch { position: absolute;
position: absolute; top: 14px;
font-size: 30px; left: 39px;
right: -27px; width: 236px;
top: 50%; .icon-search {
margin-top: -30px; line-height: 28px;
width: 40px; cursor: pointer;
border-radius: 40%; font-size: 13px;
overflow: hidden; }
cursor: pointer; }
// background: #fff; .refresh-but {
i { // position: fixed;
background: #fff; position: absolute;
padding: 0px;
height: 28px;
width: 28px;
top: 14px;
left: 285px;
// width: 85px;
color: white;
background-color: #053b6a;
.icon-reset {
font-size: 13px;
}
} }
} }
}
.search-input {
position: absolute;
top: 10px;
left: 20px;
width: 200px;
}
.search-but {
// position: fixed;
position: absolute;
top: 10px;
left: 220px;
// width: 85px;
color: white;
background-color: #053b6a;
}
// 左边的bar
.leftBar-wrapper {
// position: fixed;
width: 340px;
margin-left: 20px;
margin-top: 70px;
// box-sizing: border-box;
.box-wrapper {
}
.animate {
border: 1px solid rgba(0, 0, 0, 0.1);
border-top: none;
.thead { // 左边的bar
display: flex; .leftBar-wrapper {
font-size: 14px; // position: fixed;
> div { width: 340px;
border-right: 1px solid #cccccc; // margin-left: 20px;
margin-top: 60px;
// box-sizing: border-box;
.box-wrapper {
width: 340px;
}
.animate {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-top: none;
width: 340px;
.list-wrapper {
margin-left: 22px;
padding-top: 8px;
}
.thead {
display: flex;
font-size: 14px;
margin-bottom: 8px;
> div {
// border-right: 1px solid #cccccc;
box-sizing: border-box;
// padding-left: 5px;
color: #053B6A;
font-weight: 600;
}
}
.deviceList {
cursor: pointer;
margin-bottom: 2px;
box-sizing: border-box; box-sizing: border-box;
padding-left: 5px; border-bottom: 1px solid #053b6a00;
color: #000; color: #1D1D1D;
font-weight: 600; &:hover {
box-sizing: border-box;
border-bottom: 1px solid #053b6a;
color: #053B6A;
}
&.topActive {
// border-top: 1px solid #cccccc;
}
display: flex;
// border-bottom: 1px solid #cccccc;
// justify-content: space-between;
> div {
// flex: 1;
font-size: 14px;
// border-right: 1px solid #cccccc;
box-sizing: border-box;
// padding-left: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// border-right: 1px solid #cccccc;
}
}
.no {
width: 50px;
}
.name {
// border-right: none;
flex: 1;
text-align: center;
}
.code {
width: 112px;
text-align: center;
} }
} }
.deviceList { .box {
width: 348px;
height: 48px;
padding-left: 20px;
display: flex;
background-color: #ffffff;
box-sizing: border-box;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
cursor: pointer; cursor: pointer;
&.topActive { position: relative;
border-top: 1px solid #cccccc; // box-sizing: border-box;
&.firstbox {
border-top: 1px solid rgba(0, 0, 0, 0.1);
// box-sizing: border-box;
&:hover {
border-top: 1px solid rgba(5, 59, 106, 0);
}
} }
display: flex; &:hover {
border-bottom: 1px solid #cccccc;
// justify-content: space-between;
> div {
// flex: 1;
font-size: 14px;
border-right: 1px solid #cccccc;
box-sizing: border-box; box-sizing: border-box;
padding-left: 5px; background-color: rgba(5, 59, 106, 0.1);
overflow: hidden; border-bottom: none !important;
text-overflow: ellipsis; }
white-space: nowrap; .upPic {
// border-right: 1px solid #cccccc; display: inline-block;
margin-left: 64px;
line-height: 48px;
font-size: 16px;
color: #053b6a;
}
> i.ju {
position: absolute;
display: inline-block;
width: 15px;
height: 15px;
background: #fff;
border: 1px solid #cccccc;
left: 45px;
top: 16px;
// top: ;
z-index: 1;
border-radius: 2px;
}
> i.bingo {
z-index: 2;
position: absolute;
// line-height: 48px;
left: 45px;
top: 16px;
color: #fff;
}
> i.arrow-right {
position: absolute;
right: 32px;
top: 16px;
transition: 0.3s linear;
&.active {
transform: rotate(90deg);
}
} }
}
.no {
width: 50px;
}
.name {
// border-right: none;
flex: 1;
}
.code {
width: 100px;
}
}
.box {
width: 340px;
height: 48px;
display: flex;
background-color: #ffffff;
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0.1);
border-top: none;
cursor: pointer;
position: relative;
.upPic {
display: inline-block;
margin-left: 32px;
line-height: 48px;
font-size: 10px;
color: #053b6a;
}
&.firstbox {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
> i.ju {
position: absolute;
display: inline-block;
width: 15px;
height: 15px;
background: #fff;
border: 1px solid #cccccc;
left: 15px;
top: 16px;
// top: ;
z-index: 1;
border-radius: 2px;
}
> i.bingo {
z-index: 2;
position: absolute;
// line-height: 48px;
left: 15px;
top: 16px;
color: #fff;
}
> i.arrow-right {
position: absolute;
right: 10px;
top: 16px;
transition: 0.3s linear;
&.active { &.active {
transform: rotate(90deg); // background-color: #053b6a;
.left,
.right {
color: #053b6a;
}
> i {
color: #053b6a;
}
} }
} .left {
&:hover {
// background-color: #053b6a;
// color: #ffffff;
// > i {
// color:#fff;
// }
}
&:hover .left,
&:hover .right {
// color: #ffffff;
}
&.active {
// background-color: #053b6a;
.left,
.right {
color: #053b6a; color: #053b6a;
line-height: 48px;
margin-left: 28px;
.iconfont {
font-size: 22px;
}
} }
> i { .right {
color: #053b6a; color: #1d1d1d;
line-height: 48px;
font-size: 16px;
margin-left: 4px;
} }
} }
.left { .goback {
color: #053b6a; display: flex;
line-height: 48px; justify-content: space-between;
margin-left: 20px; .minMax {
} font-size: 14px;
.right { line-height: 28px;
color: #1d1d1d; box-sizing: border-box;
line-height: 48px; padding-left: 3px;
// margin-left: 20px; }
.btn-w {
width: 100%;
text-align: center;
padding-bottom: 2px;
.btn {
border-radius: 50%;
// width: 14px;
// height: 14px;
padding: 2px;
&:active {
// border-color: #053b6a;
// color: #053b6a;
// outline: none;
}
&:hover {
// background: #053b6a;
// color: #053b6a;
}
}
.goPage {
// margin-left: 0;
}
.btn-w-num {
display: inline-block;
font-size: 14px;
padding: 0px 5px;
}
}
} }
} }
.goback { // 开关
display: flex; .switch {
justify-content: space-between; position: absolute;
.minMax { font-size: 30px;
font-size: 14px; right: -27px;
line-height: 28px; top: 50%;
box-sizing: border-box; margin-top: -30px;
padding-left: 3px; width: 40px;
} border-radius: 40%;
.btn { overflow: hidden;
text-align: right; cursor: pointer;
.goPage { // background: #fff;
margin-left: 0; i {
} background: #fff;
} }
} }
} }
......
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