Skip to content

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

完成

parent 403c54ce
Hide whitespace changes
Inline Side-by-side
Showing with 438 additions and 195 deletions
gassafety-web/src/assets/styles/gassafety.scss
View file @ 414c84a6
......@@ -432,6 +432,13 @@
}
}
.rightPic{
.el-bottom {
.el-table__body-wrapper {
max-height: 250px !important;
}
}
}
// 设备巡检详情页表格样式
.inspectiondetail {
.el-table {
......
gassafety-web/src/components/PopWindowGis/detectorOnlyInfoWindow.vue
View file @ 414c84a6
......@@ -9,6 +9,31 @@
<img src="../../assets/images/closeBtn.png" alt="" @click="close" />
</div>
</div>
<div class="contant">
<div>
<div class="theadtop">
设备名称: <span v-un-content>{{ data.detectorName }}</span>
</div>
<div>
设备编号: <span v-un-content>{{ data.detectorCode }}</span>
</div>
<div>
联系人: <span v-un-content>{{ data.linkman }}</span>
</div>
<div>
联系电话: <span v-un-content>{{ data.phone }}</span>
</div>
<div>
设备状态: <span v-un-content>{{ data.detectorStatus }}</span>
</div>
<div>
报警时间: <span v-un-content>{{ data.alarmTime }}</span>
</div>
<div>
创建时间: <span v-un-content>{{ data.creatTime }}</span>
</div>
</div>
</div>
</div>
</template>
......@@ -23,37 +48,60 @@ export default {
map: null,
},
data() {
return {};
return {
userTypeName: ["家用报警器", "商用报警器", "工业报警器"],
};
},
computed: {},
mounted() {},
methods: {
moment,
deviceMore() {
this.data.class.view.$router.push({
// path: "/dataMonitoring/realtimedetail",
path: "/device/deviceInfoDetail",
query: {
deviceId: this.data.deviceId,
// deviceType: this.data.deviceType,
},
});
},
close() {
this.map.clearInfoWindow();
this.data.class.view.domAllShow();
this.data.class.clearDetectorOnlyOpen();
},
},
};
</script>
<style lang="scss" scoped>
.wrapper {
width: 406px;
max-height: 500px;
// width: 406px;
max-height: 430px;
// background: #fff;
background: rgba(7, 29, 51, 0.9);
color: #fff;
border-radius: 4px;
background: rgba(7, 29, 51, 0.9);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
color: #fff;
// overflow: hidden;
.top {
width: 100%;
height: 51px;
// background-color: #ff5a67;
background-image: url(../../assets/images/redTopBg.png);
// 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;
// width: 0px;
// height: 0px;
// z-index:-1;
// border-top: 15px solid transparent;
// border-bottom: 15px solid transparent;
// border-right: 30px solid #053b6a;
content: "";
position: absolute;
left: -20px;
......@@ -61,7 +109,7 @@ export default {
z-index: -1;
width: 33px;
height: 33px;
background-image: url(../../assets/images/redLeftTriangle.png);
background-image: url(../../assets/images/blueLeftTriangle.png);
}
.text {
font-weight: 600;
......@@ -79,100 +127,8 @@ export default {
}
}
}
.content {
position: relative;
max-height: 300px;
overflow: hidden;
overflow-y: auto;
padding-bottom: 2px;
border-bottom: 1px solid #eeeeee;
.eq-content {
// min-height: 156px;
box-sizing: border-box;
padding: 13px 22px 0px 22px;
// border-bottom: 1px solid #e2e2e2;
.text-wrapper {
padding-top: 1px;
& > div {
margin-bottom: 6px;
}
.eq-text {
font-size: 14px;
font-weight: 400;
color: #fff;
opacity: 1;
& > span {
vertical-align: top;
display: inline-block;
// white-space: nowrap;
// text-overflow: ellipsis;
// overflow: hidden;
word-break: break-all;
max-width: 100px;
}
}
}
.pic {
width: 180px;
height: 103px;
// background-color: black;
img {
width: 100%;
height: 100%;
// cursor: pointer;
}
}
}
}
.maintain-content {
width: 100%;
max-height: 119px;
padding-left: 22px;
// padding-right: 22px;
// padding-bottom: 10px;
// padding-top: 16px;
box-sizing: border-box;
// border-bottom: 1px solid #e2e2e2;
& > div {
margin-bottom: 8px;
font-size: 14px;
font-weight: 400;
span {
vertical-align: top;
display: inline-block;
word-break: break-all;
max-width: 280px;
}
}
}
.warn-wrapper {
.warn-content {
box-sizing: border-box;
padding: 10px 0 2px 22px;
border-bottom: 1px solid #e2e2e2;
color: #fe5966;
& > div {
font-size: 14px;
font-weight: 400;
margin-bottom: 8px;
}
}
.btn {
padding: 16px 0;
text-align: center;
span {
display: inline-block;
padding: 0 10px;
.elbtn {
background-color: #053b6a;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
width: 95px;
height: 33px;
// border: none;
}
}
}
.contant {
padding: 10px;
}
}
......
gassafety-web/src/utils/gaodeMapView.js
View file @ 414c84a6
......@@ -17,7 +17,7 @@ import videoView from "../components/PopWindowGis/videoView.vue";
import videoInfowindow from "../components/PopWindowGis/videoInfowindow.vue";
// 三个报警器
import detectorInfoWindow from "../components/PopWindowGis/detectorInfoWindow.vue";
import detectorOnlyInfoWindow from "../components/PopWindowGis/detectorInfoWindow.vue";
import detectorOnlyInfoWindow from "../components/PopWindowGis/detectorOnlyInfoWindow.vue";
import { getArray } from "@/utils/gassafety.js";
import { lineColor, mapStyle } from "./mapCommon.js";
......@@ -101,7 +101,8 @@ class gaodeMap {
// if (this.lineType !=1 || this.lineFlag) return;
this.closeInfoWindow();
this.polyLinesColorClear();
// 删除独立报警器
this.clearDetectorOnlyOpen();
this.domAllShow();
if (this.lineType != 1 || this.lineFlag) return;
// 除了这里，还要利用vue页面的window事件辅助，当组件出来的时候，就得利用window事件
......@@ -383,18 +384,25 @@ class gaodeMap {
if (DEVICE_TYPE.DETECTOR_ONLY == markerType) {
// 如果报警器用户下的单一报警器
// 如果this.detcetorMarker有值就删了
this.detcetorMarker && map.remove(this.detcetorMarker);
this.detcetorMarker = null;
this.clearDetectorOnlyOpen();
marker.markerType = markerType;
marker.data = data;
marker.infoWindow = infoWindow;
// marker.on("mousedown", this.detectorOpen
const e = {
target,
target: marker,
lnglat: [data.longitude, data.latitude]
};
this.detectorOnlyOpen(e);
// 先把infowindow关掉
this.detectorOpenInfoWindow && this.detectorOpenInfoWindow.close();
this.detectorOnlyOpenInfowindow &&
this.detectorOnlyOpenInfowindow.close();
// 回调，先移动，后展示infowindow
this.handleInfoWindowOpenFunc = () => {
this.detectorOnlyOpen(e);
};
this.panTo([data.longitude, data.latitude - 0.08]);
marker.setExtData(data);
// 赋值上去
......@@ -545,18 +553,23 @@ class gaodeMap {
e.target.infoWindow.setContent(e.target.content);
e.target.infoWindow.open(map, e.target.getPosition());
this.boxCollision(e.target.infoWindow.dom);
this.workerManInfoWindow = e.target.infoWindow;
this.detectorOpenInfoWindow = e.target.infoWindow;
};
// 报警器用户下的单独报警器
detectorOnlyOpen = e => {
this.markerType = e.target.markerType;
e.target.content = this.getMarketContent(e.target.data);
e.target.infoWindow.setContent(e.target.content);
e.target.infoWindow.setOffset(new AMap.Pixel(24, -21));
e.target.infoWindow.open(map, e.target.getPosition());
this.boxCollision(e.target.infoWindow.dom);
this.workerManInfoWindow = e.target.infoWindow;
this.detectorOnlyOpenInfowindow = e.target.infoWindow;
};
// 清空独立报警器
clearDetectorOnlyOpen() {
this.detcetorMarker && map.remove(this.detcetorMarker);
this.detcetorMarker = null;
}
// 鼠标移入设备时候实行的函数
infoOpen = e => {
if (e.target.getExtData().alarmState == 1) {
......@@ -748,7 +761,7 @@ class gaodeMap {
case DEVICE_TYPE.DETECTOR_ONLY: {
// console.log("DEVICE_TYPE.VIDEODEVICE_TYPE.VIDEO", DEVICE_TYPE.VIDEO);
const dom = createPop(detectorOnlyInfoWindow, {
title: "detector",
title: "detectorOnly",
data: data,
map: map
});
......@@ -1227,10 +1240,12 @@ class gaodeMap {
// gis地图页面的bottomdata组件
const {
Bottom: { $el: pageDomBottom },
Right: { $el: pageDomRight }
Right: { $el: pageDomRight },
RightPic: { $el: pageDomRightPic }
} = this.view.$refs;
this.mathWho(infowindowDom, pageDomBottom, "bottomDataShow", "bottom");
this.mathWho(infowindowDom, pageDomRight, "rightDataShow", "right");
// this.mathWho(infowindowDom, pageDomBottom, "bottomDataShow", "bottom");
// this.mathWho(infowindowDom, pageDomRight, "rightDataShow", "right");
this.mathWho(infowindowDom,pageDomRightPic,"RightPicShow","rightpic");
}
// domAttr view里的属性
//attr 存储在类里的值
......@@ -1275,6 +1290,7 @@ class gaodeMap {
domAllShow() {
this.view.bottomDataShow = true;
this.view.rightDataShow = true;
this.view.RightPicShow = true;
}
// 把map里的in佛window转化成vue里的dom
......@@ -1304,6 +1320,8 @@ class gaodeMap {
// 工人的轨迹线条用的
this.markerPassedPolylineInfoWindow &&
this.markerPassedPolylineInfoWindow.close();
this.detectorOpenInfoWindow && this.detectorOpenInfoWindow.close();
this.detectorOnlyOpenInfowindow && this.detectorOnlyOpenInfowindow.close();
}
// infoWindow的拖拽
infoWindowMove(infoWindow) {
......
gassafety-web/src/views/enterprise/mapView/components/Center.vue
View file @ 414c84a6
......@@ -10,8 +10,9 @@
<div class="bottom right-bottom-data-left">
<el-table
size="mini"
:data="detcetorList"
style="width: 100%; maxheight: 600px"
:data="tableData"
style="width: 100%;"
:height="tableHeight"
class="el-bottom"
>
<!-- :height="tableHeight" -->
......@@ -28,24 +29,27 @@
</el-table-column>
<el-table-column prop="alarmTime" label="报警时间" width="">
<template slot-scope="scope">
<div v-un-content>{{scope.row.alarmTime}}</div>
<div v-un-content>{{ scope.row.alarmTime }}</div>
</template>
</el-table-column>
<el-table-column prop="creatTime" label="创建时间" width="">
<template slot-scope="scope">
<div v-un-content>{{scope.row.creatTime}}</div>
<div v-un-content>{{ scope.row.creatTime }}</div>
</template>
</el-table-column>
<el-table-column prop="alarmValue" label="定位" width="50">
<template slot-scope="scope">
<div @click="createDetector(scope)" class="iconfont icon-bjqdw">
</div>
<div
@click="createDetector(scope)"
class="iconfont icon-bjqdw"
></div>
<!-- {{ scope.row.userId }} -->
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
......@@ -72,55 +76,7 @@ export default {
city: "普陀区",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路",
},
],
};
},
......@@ -144,10 +100,11 @@ export default {
this.$parent.centerShow = false;
},
// 点击创建点并且定位过去
createDetector(data){
createDetector(data) {
console.log(data);
this.$parent.gaoMap.addMarker('detector_only');
}
this.close();
this.$parent.gaoMap.addMarker("detector_only", data.row);
},
},
};
</script>
......@@ -286,7 +243,8 @@ export default {
}
}
}
.iconfont{
.iconfont {
cursor: pointer;
}
// 单独调整下最后一个icon的大小
......@@ -306,6 +264,5 @@ export default {
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
}
</style>
\ No newline at end of file
gassafety-web/src/views/enterprise/mapView/components/RightPic.vue 0 → 100644
View file @ 414c84a6
<template>
<div class="wrapper rightPic">
<div class="math">
<div><span>2012</span>报警设备</div>
<div><span>2022</span>在线设备</div>
<div><span>2052</span>离线设备</div>
</div>
<div class="left">
<div class="bottom right-bottom-data-left">
<el-table
size="mini"
:data="tableData"
style="width: 100%"
:height="tableHeight"
class="el-bottom"
>
<el-table-column prop="deviceCode" label="编号" width="80">
</el-table-column>
<el-table-column prop="deviceName" label="名称" width="">
</el-table-column>
<el-table-column prop="province" label="报警类型" width="">
</el-table-column>
<el-table-column prop="city" label="报警开始时间" width="180">
</el-table-column>
<el-table-column prop="address" label="报警内容" width="">
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
<script>
import { listDeviceAlarm } from "@/api/dataMonitoring/deviceAlarm";
export default {
props: {},
data() {
return {
timer: null,
repeatFinshed: false,
tableHeight: 202,
tableData: [
{
deviceCode: "ZhC-11",
deviceName: "流量计",
province: "压力异常",
city: "2021-02-02 16-00-00",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "ZhC-11",
deviceName: "流量计",
province: "压力异常",
city: "2021-02-02 16-00-00",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "ZhC-11",
deviceName: "流量计",
province: "压力异常",
city: "2021-02-02 16-00-00",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "ZhC-11",
deviceName: "流量计",
province: "压力异常",
city: "2021-02-02 16-00-00",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "ZhC-11",
deviceName: "流量计",
province: "压力异常",
city: "2021-02-02 16-00-00",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "ZhC-11",
deviceName: "流量计",
province: "压力异常",
city: "2021-02-02 16-00-00",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "ZhC-11",
deviceName: "流量计",
province: "压力异常",
city: "2021-02-02 16-00-00",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "ZhC-11",
deviceName: "流量计",
province: "压力异常",
city: "2021-02-02 16-00-00",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "ZhC-11",
deviceName: "流量计",
province: "压力异常",
city: "2021-02-02 16-00-00",
address: "上海市普陀区金沙江路",
},
],
};
},
created() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.wrapper {
width: 520px;
max-height: 258px;
box-sizing: border-box;
padding: 10px;
padding-top: 15px;
padding-right: 0px;
position: fixed;
right: 20px;
top: 150px;
// background-color: #fff;
display: flex;
justify-content: space-between;
background-image: url(../../../../assets/images/bg/newPicBg.png);
background-size: 100% 100%;
.math {
width: 520px;
position: absolute;
top:-40px;
left:0px;
display: flex;
justify-content: space-between;
&>div{
>span{
color:aqua;
}
font-size: 14px;
color:#fff;
text-align: center;
line-height: 30px;
width: 108px;
height:30px;
background-image: url(../../../../assets/images/bg/bg.png);
}
}
& > div {
}
.left {
width: 500px;
max-height: 256px;
margin-right: 12px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
// background-color: #fff;
// color: #fff;
font-size: 14px;
font-weight: 400;
.el-table__body-wrappe {
max-height: 140px !important;
}
.top {
height: 19px;
// background-color: #053b6a;
color: #fff;
// line-height: 32px;
// padding-left: 12px;
position: relative;
.title {
position: absolute;
left: 50%;
margin-left: -92px;
top: -5px;
}
.repeat {
position: absolute;
top: -5px;
right: 160px;
color: #fff;
cursor: pointer;
&:hover {
color: #2788ea;
}
}
.repeat2 {
position: absolute;
right: 206px;
color: #67c23a;
}
.more {
position: absolute;
right: 38px;
top: -5px;
color: #fff;
float: right;
margin-right: 20px;
cursor: pointer;
&:hover {
color: #2788ea;
}
}
}
.bottom {
// width: 680px;
margin: 0 auto;
}
}
.right {
width: 740px;
display: flex;
flex-wrap: wrap;
// justify-content: space-between;
align-content: flex-start;
// margin-top: 7px;
& > .right-content {
background-color: #fff;
width: 238px;
height: 82px;
margin-bottom: 29px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
margin-right: 10px;
display: flex;
&.three {
margin-right: 0px;
}
// align-items: center;
.text-icon {
line-height: 82px;
padding-left: 22px;
margin-right: 22px;
i {
color: #053b6a;
font-size: 60px;
}
}
.text {
font-size: 14px;
padding-top: 16px;
.top {
color: #000;
margin-bottom: 10px;
font-weight: 600;
}
.bottom {
color: #2788ea;
}
}
}
}
// 单独调整下最后一个icon的大小
.iconFontSize {
font-size: 50px !important;
}
.fade-enter-to,
.fade-leave {
opacity: 1;
}
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter-active {
transition: opacity 0s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
}
</style>
\ No newline at end of file
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ 414c84a6
......@@ -66,13 +66,13 @@
</div>
</div>
<Right
v-show="rightDataShow"
v-show="rightDataShow && 0"
:class="{ classShow: !rightDataShow }"
ref="Right"
:list="rightBototmData"
/>
<Bottom
v-show="bottomDataShow"
v-show="bottomDataShow && 0"
:class="{
classShow: !bottomDataShow,
bottomMarginRight: bottomMarginRight,
......@@ -80,6 +80,8 @@
ref="Bottom"
:list="rightBototmData"
/>
<!-- 右边 -->
<RightPic v-show="RightPicShow" ref="RightPic"/>
<!-- 报警工单 -->
<CreateWork
ref="CreateWork"
......@@ -93,7 +95,15 @@
@callback="CreateWorkTroubleCallBack"
/>
<!-- 报警用户的报警器列表 -->
<Center :show="centerShow" ref="center" :detcetorList="detcetorList"/>
<Center :show="centerShow" ref="center" :detcetorList="detcetorList" />
<!-- 当报警列表隐藏时，这个显示,点击就让Center回来 -->
<div
@click="centerShow = true"
v-show="!centerShow && gaoMap && gaoMap.detcetorMarker"
class="circle"
>
列表
</div>
<div
ref="drawer"
class="drawer"
......@@ -390,7 +400,10 @@
<script>
// import from "utils/gaodeMapView.js";
import { pipeAllInfoList, countPipeLength } from "@/api/device/pipe.js";
import { detectorUserList,getdetectorInfoList } from "@/api/device/detector.js";
import {
detectorUserList,
getdetectorInfoList,
} from "@/api/device/detector.js";
import { videoList } from "@/api/device/videoManager.js";
import gaodeMap, {
map,
......@@ -404,6 +417,7 @@ import { getAllDeviceInfo, countDeviceByType } from "@/api/device/deviceInfo";
import { getMapHiddenTroublelist } from "@/api/riskManagement/hiddenTrouble";
import Bottom from "./components/Bottom.vue";
import Right from "./components/Right.vue";
import RightPic from "./components/RightPic.vue";
import Center from "./components/Center.vue";
import CreateWork from "./components/CreateWork.vue";
import CreateWorkTrouble from "./components/CreateWorkTrouble.vue";
......@@ -417,7 +431,8 @@ export default {
CreateWork,
CreateWorkTrouble,
Right,
Center
RightPic,
Center,
},
data() {
return {
......@@ -443,7 +458,7 @@ export default {
createLabel: "新增",
//所有燃气公司
comp: [{ infoId: 123, unitName: "公司A" }],
// 公司被选中状态
compChangeArr: [],
......@@ -555,6 +570,7 @@ export default {
rightBototmData: [],
bottomDataShow: true,
rightDataShow: true,
RightPicShow:true,
// 如果右边与下面重叠了，bottom要往左移
bottomMarginRight: false,
// 是否显示生成工单弹框
......@@ -574,8 +590,8 @@ export default {
mapStyle: true,
// Center组件的参数，也就是报警用户的的list
centerShow:false,
detcetorList:[],
centerShow: false,
detcetorList: [],
};
},
created() {
......@@ -812,16 +828,17 @@ export default {
});
},
// 获取报警器用户的报警器分布
getDetectorInfoList(queryParams){
return getdetectorInfoList(queryParams).then(res=>{
console.log("queryParams",res)
if(res.code ==200){
this.detcetorList=res.data;
this.centerShow=true;
getDetectorInfoList(queryParams) {
console.log(queryParams);
return getdetectorInfoList(queryParams).then((res) => {
console.log("queryParams", res);
if (res.code == 200) {
this.detcetorList = res.data;
this.centerShow = true;
// 传递回去
return res.code;
}
})
});
},
// 获取报警资源，并且改变图上的状态
getSelectAlarmDevice() {
......@@ -1362,8 +1379,8 @@ export default {
this.videoInfoWindowShow(iten, lat, lng);
} else if (item.value > 10 && item.value <= 13) {
// this.detectorOpen
console.log("detectorInfoWindowShow")
this.detectorInfoWindowShow(iten, lat, lng)
console.log("detectorInfoWindowShow");
this.detectorInfoWindowShow(iten, lat, lng);
} else {
// 其他设备
this.diveceInfoWindowShow(iten, lat, lng);
......@@ -1518,7 +1535,6 @@ export default {
};
},
// 向右的箭头的动画
arrowRightChange(item) {
const index = this.arrowRightNum.indexOf(item.value);
......@@ -2612,5 +2628,19 @@ input[type="radio"] {
}
}
}
// 报警器列表消失的时候右下角的列表
.circle {
width: 100px;
height: 100px;
background-color: #31eaea;
position: fixed;
bottom: 20px;
right: 20px;
border-radius: 50%;
cursor: pointer;
text-align: center;
line-height: 100px;
}
</style>
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