Skip to content

H
huaxin-rq
Commit 85b6074b authored by zhangjianqian's avatar zhangjianqian
Browse files
Options

更改大屏坐标上图改为海量点模式

parent 103c9d95
Show whitespace changes
Inline Side-by-side
Showing with 1070 additions and 10 deletions
huaxin-web/src/utils/mapClass/deviceIconTypeConfig.js
View file @ 85b6074b
...@@ -11,7 +11,8 @@ export const deviceIcon = { ...@@ -11,7 +11,8 @@ export const deviceIcon = {
1: require("@/assets/indexImg/mapTyx.png"), 1: require("@/assets/indexImg/mapTyx.png"),
2: require("@/assets/indexImg/mapFmj.png"), 2: require("@/assets/indexImg/mapFmj.png"),
3: require("@/assets/indexImg/mapCz.png"), 3: require("@/assets/indexImg/mapCz.png"),
4: require("@/assets/indexImg/monitorDeviceAlarm.gif") 4: require("@/assets/indexImg/monitorDeviceAlarm.gif"),
5: require("@/assets/indexImg/gongye.png")
} }
export const pipeColor = { export const pipeColor = {
......
huaxin-web/src/utils/mapClass/newMap.js
View file @ 85b6074b
...@@ -46,6 +46,18 @@ export class EditorMap { ...@@ -46,6 +46,18 @@ export class EditorMap {
// infowindow本身 // infowindow本身
infowindow = null; infowindow = null;
//商业用户-用户列表图层
businessDetectorUserlabelsLayer = null;
//调压箱-地图标注层
tyxlabelsLayer = null;
//阀门井-地图标注层
fmjlabelLayer = null;
//场站-地图标注层
czlabelLayer = null;
constructor(contaienr, config = {}, vue) { constructor(contaienr, config = {}, vue) {
this.map = new AMap.Map(contaienr, { this.map = new AMap.Map(contaienr, {
viewMode: "3D", viewMode: "3D",
...@@ -828,4 +840,322 @@ export class EditorMap { ...@@ -828,4 +840,322 @@ export class EditorMap {
destroy() { destroy() {
this.map.destroy(); this.map.destroy();
} }
/**
* 地图上添加场站 海量标注 LabelMarker 方式
* @param {*} detectorUserData
* @param {*} compontent
* @param {*} showBool
*/
labelsLayerMarksCzGoMap(mapData, compontent, showBool = true) {
if (mapData != null) {
const hashMap = new Map();
this.czlabelLayer = new AMap.LabelsLayer({
zooms: [3, 20],
zIndex: 1000,
collision: false, //该层内标注是否避让
allowCollision: false, //不同标注层之间是否避让
});
//设置一个图标对象
const icon = {
type: "image", //图标类型，现阶段只支持 image 类型
image: this.devicePicData[3], //可访问的图片 URL
anchor: "bottom-center", //图片相对 position 的锚点，默认为 bottom-center
};
var markers = [];
mapData.forEach((item) => {
let longitude = item.longitude;
let latitude = item.latitude;
var siteStationId = item.siteStationId;
icon.siteStationId = siteStationId;
var curData = {
position: [longitude, latitude],
icon: icon,
rank: 1, //避让优先级
};
hashMap.set(JSON.stringify(siteStationId), item);
//创建 LabelMarker
const labelMarker = new AMap.LabelMarker(curData);
// var marker = new AMap.Marker(curData);
markers.push(labelMarker);
labelMarker.on("click", (e) => {
var opts = JSON.stringify(e.data.opts);
var optsObj = JSON.parse(opts);
var siteStationId = JSON.stringify(optsObj.icon.siteStationId);
var extData = hashMap.get(siteStationId);
// 如果control==0就是默认值，没有使用123功能，就显示infowindow
this.massMarksMarkerClick(extData, compontent);
});
if (item.companyType) {
labelMarker.filterData = {
companyType: item.companyType,
iconType: item.iconType,
};
const iconType = item.iconType;
if (!Array.isArray(this.allDevice[iconType])) {
this.allDevice[iconType] = [];
}
this.allDevice[iconType].push(labelMarker);
}
});
this.czlabelLayer.add(markers);
this.map.add(this.czlabelLayer);
if (!showBool) {
this.czlabelLayer.hide();
}
}
}
/**
* 地图上添加阀门井 海量标注 LabelMarker 方式
* @param {*} detectorUserData
* @param {*} compontent
* @param {*} showBool
*/
labelsLayerMarksFmjGoMap(mapData, compontent, showBool = true) {
if (mapData != null) {
const hashMap = new Map();
this.fmjlabelLayer = new AMap.LabelsLayer({
zooms: [3, 20],
zIndex: 1000,
collision: false, //该层内标注是否避让
allowCollision: false, //不同标注层之间是否避让
});
//设置一个图标对象
const icon = {
type: "image", //图标类型，现阶段只支持 image 类型
image: this.devicePicData[2], //可访问的图片 URL
//size: [44, 49], //图片尺寸
anchor: "bottom-center", //图片相对 position 的锚点，默认为 bottom-center
};
var markers = [];
mapData.forEach((item) => {
let longitude = item.longitude;
let latitude = item.latitude;
var userId = item.deviceId;
icon.userId = userId;
var curData = {
position: [longitude, latitude],
icon: icon,
rank: 1, //避让优先级
};
hashMap.set(JSON.stringify(userId), item);
//创建 LabelMarker
const labelMarker = new AMap.LabelMarker(curData);
// var marker = new AMap.Marker(curData);
markers.push(labelMarker);
labelMarker.on("click", (e) => {
var opts = JSON.stringify(e.data.opts);
var optsObj = JSON.parse(opts);
var userId = JSON.stringify(optsObj.icon.userId);
var extData = hashMap.get(userId);
// 如果control==0就是默认值，没有使用123功能，就显示infowindow
this.massMarksMarkerClick(extData, compontent);
});
if (item.companyType) {
labelMarker.filterData = {
companyType: item.companyType,
iconType: item.iconType,
};
const iconType = item.iconType;
if (!Array.isArray(this.allDevice[iconType])) {
this.allDevice[iconType] = [];
}
this.allDevice[iconType].push(labelMarker);
}
});
this.fmjlabelLayer.add(markers);
this.map.add(this.fmjlabelLayer);
if (!showBool) {
this.fmjlabelLayer.hide();
}
}
}
/**
* 地图上添加调压箱 海量标注 LabelMarker 方式
* @param {*} detectorUserData
* @param {*} compontent
* @param {*} showBool
*/
labelsLayerMarksTysGoMap(mapData, compontent, showBool = true) {
if (mapData != null) {
const hashMap = new Map();
this.tyxlabelsLayer = new AMap.LabelsLayer({
zooms: [3, 20],
zIndex: 1000,
collision: false, //该层内标注是否避让
allowCollision: false, //不同标注层之间是否避让
});
//设置一个图标对象
const icon = {
type: "image", //图标类型，现阶段只支持 image 类型
image: this.devicePicData[1], //可访问的图片 URL
anchor: "bottom-center", //图片相对 position 的锚点，默认为 bottom-center
};
var markers = [];
mapData.forEach((item) => {
let longitude = item.longitude;
let latitude = item.latitude;
var deviceId = item.deviceId;
icon.deviceId = deviceId;
var curData = {
position: [longitude, latitude],
icon: icon,
rank: 1, //避让优先级
};
hashMap.set(JSON.stringify(deviceId), item);
//创建 LabelMarker
const labelMarker = new AMap.LabelMarker(curData);
// var marker = new AMap.Marker(curData);
markers.push(labelMarker);
labelMarker.on("click", (e) => {
var opts = JSON.stringify(e.data.opts);
var optsObj = JSON.parse(opts);
var deviceId = JSON.stringify(optsObj.icon.deviceId);
var extData = hashMap.get(deviceId);
// 如果control==0就是默认值，没有使用123功能，就显示infowindow
this.massMarksMarkerClick(extData, compontent);
});
if (item.companyType) {
labelMarker.filterData = {
companyType: item.companyType,
iconType: item.iconType,
};
const iconType = item.iconType;
if (!Array.isArray(this.allDevice[iconType])) {
this.allDevice[iconType] = [];
}
this.allDevice[iconType].push(labelMarker);
}
});
this.tyxlabelsLayer.add(markers);
this.map.add(this.tyxlabelsLayer);
if (!showBool) {
this.tyxlabelsLayer.hide();
}
}
}
/**
* 地图上添加工业用户数据 海量标注 LabelMarker 方式
* @param {*} detectorUserData
* @param {*} component
* @param {*} showBool
*/
labelsLayerMarksDetectorUserList(
mapData,
compontent,
showBool = true
) {
if (mapData != null) {
const hashMap = new Map();
this.businessDetectorUserlabelsLayer = new AMap.LabelsLayer({
zooms: [3, 20],
zIndex: 1000,
collision: false, //该层内标注是否避让
allowCollision: false, //不同标注层之间是否避让
});
//设置一个图标对象
const icon = {
type: "image", //图标类型，现阶段只支持 image 类型
image: this.devicePicData[5], //可访问的图片 URL
anchor: "bottom-center", //图片相对 position 的锚点，默认为 bottom-center
};
var markers = [];
mapData.forEach((item) => {
let longitude = item.longitude;
let latitude = item.latitude;
var userId = item.id;
icon.userId = userId;
var curData = {
position: [longitude, latitude],
icon: icon,
rank: 1, //避让优先级
};
hashMap.set(JSON.stringify(userId), item);
//创建 LabelMarker
const labelMarker = new AMap.LabelMarker(curData);
// var marker = new AMap.Marker(curData);
markers.push(labelMarker);
labelMarker.on("click", (e) => {
var opts = JSON.stringify(e.data.opts);
var optsObj = JSON.parse(opts);
var deviceId = JSON.stringify(optsObj.icon.userId);
var extData = hashMap.get(deviceId);
// 如果control==0就是默认值，没有使用123功能，就显示infowindow
this.massMarksMarkerClick(extData, compontent);
});
if (item.companyType) {
labelMarker.filterData = {
companyType: item.companyType,
iconType: item.iconType,
};
const iconType = item.iconType;
if (!Array.isArray(this.allDevice[iconType])) {
this.allDevice[iconType] = [];
}
this.allDevice[iconType].push(labelMarker);
}
});
this.businessDetectorUserlabelsLayer.add(markers);
this.map.add(this.businessDetectorUserlabelsLayer);
if (!showBool) {
this.businessDetectorUserlabelsLayer.hide();
}
}
}
/** 点击marker出现infowindow- 大屏端 massMarks设置
* @description:
* @param {*} target 点击的对象
* @param {*} compontent marker点击弹出的infowindow的组件
* @return {*}
*/
massMarksMarkerClick(data, compontent) {
// 通过搜索上图的数据
this.infowindowClose();
// var detectorUserVO = data.tdetectorUserVO;
// var lng = lnglatArray[0];
// var lat = lnglatArray[1];
// var detectorUserVO = {"userId":159843,"iconType":null,"userStatus":null,"nickName":"曾宪成","userType":"2","detectorCountList":[{"userId":159843,"iconType":null,"userStatus":null,"nickName":"曾宪成","userType":"2","detectorCountList":null,"detectorType":"工业探测器","detectorCount":1,"onLineNum":1,"offLineNum":0,"historyAlarmNum":0,"cancelAlarmNum":0,"processingAlarmNum":0,"address":"河北省-廊坊市-三河市-泃阳镇老厨小吃","longitude":117.06009,"latitude":39.991257,"linkman":"曾宪成","phone":"13172132000","email":null}],"detectorType":"工业探测器","detectorCount":1,"onLineNum":1,"offLineNum":0,"historyAlarmNum":0,"cancelAlarmNum":0,"processingAlarmNum":0,"address":"河北省-廊坊市-三河市-泃阳镇老厨小吃","longitude":117.06009,"latitude":39.991257,"linkman":"曾宪成","phone":"13172132000","email":null}
let lng = data.longitude;
let lat = data.latitude;
// 创建一个可以控制的组件，将其dom插入infowindow
this.infowindowComponent = this.createInfowindowDom(
this.vue,
this,
data,
compontent
);
this.infowindow = new AMap.InfoWindow({
isCustom: true,
content: this.infowindowComponent.$el,
position: [lng, lat],
anchor: "middle-left",
// offset: [20, -10],
offset: [20, 0],
});
this.infowindow.open(this.map);
}
} }
huaxin-web/src/views/bigWindow/Ind3/Ind.vue
View file @ 85b6074b
...@@ -23,8 +23,11 @@ import Right from "./components/Right.vue"; ...@@ -23,8 +23,11 @@ import Right from "./components/Right.vue";
import Bottom from "./components/Bottom.vue"; import Bottom from "./components/Bottom.vue";
import { EditorMap } from "@/utils/mapClass/newMap"; import { EditorMap } from "@/utils/mapClass/newMap";
import { deviceInfoList } from "@/api/baseinfo/deviceInfo"; import { deviceInfoList } from "@/api/baseinfo/deviceInfo";
import DeviceInfo from "./components/DeviceInfo"; import DeviceInfo from "./components/DeviceInfo"
import StationInfo from ".//components/StationInfo";
import GyInfo from ".//components/GyInfo";
import { stationInfoList } from "@/api/baseinfo/stationInfo.js"; import { stationInfoList } from "@/api/baseinfo/stationInfo.js";
import { listIndustry} from "@/api/baseinfo/industry";
import { import {
deviceType, deviceType,
deviceIcon, deviceIcon,
...@@ -37,7 +40,9 @@ export default { ...@@ -37,7 +40,9 @@ export default {
Left, Left,
Right, Right,
Bottom, Bottom,
DeviceInfo DeviceInfo,
StationInfo,
GyInfo
}, },
data() { data() {
return {}; return {};
...@@ -71,18 +76,35 @@ export default { ...@@ -71,18 +76,35 @@ export default {
this.getDeviceInfo(); this.getDeviceInfo();
//场站 //场站
this.getStationInfo(); this.getStationInfo();
//管道 //工业用户
this.getList();
},
/** 查询工业用户列表 */
getList() {
listIndustry({pageNum:1,pageSize:1000}).then(response => {
//this.industryList = response.rows;
console.log(response.rows)
this.gaoMap.labelsLayerMarksDetectorUserList(response.rows, GyInfo, false);
});
}, },
//调压箱 //调压箱
getDeviceInfo() { getDeviceInfo() {
deviceInfoList().then((res) => { deviceInfoList().then((res) => {
if (res.code && res.data) { if (res.code && res.data) {
console.log(res.data) let typeA = [];
let typeB = [];
res.data.forEach((item) => { res.data.forEach((item) => {
item.iconType = item.deviceType; item.iconType = item.deviceType;
this.gaoMap.addDevice(item, DeviceInfo, false); if (item.deviceType === '1') {
typeA.push(item);
} else if (item.deviceType === '2') {
typeB.push(item);
}
//this.gaoMap.addDevice(item, DeviceInfo, false);
}); });
this.gaoMap.labelsLayerMarksFmjGoMap(typeB, DeviceInfo, false);
this.gaoMap.labelsLayerMarksTysGoMap(typeA, DeviceInfo, false);
} }
}); });
}, },
...@@ -90,6 +112,7 @@ export default { ...@@ -90,6 +112,7 @@ export default {
getStationInfo() { getStationInfo() {
stationInfoList().then((res) => { stationInfoList().then((res) => {
if (res.code && res.data) { if (res.code && res.data) {
console.log(deviceType.station)
res.data.forEach((item) => { res.data.forEach((item) => {
item.iconType = deviceType.station; item.iconType = deviceType.station;
this.gaoMap.addDevice(item, StationInfo, false); this.gaoMap.addDevice(item, StationInfo, false);
...@@ -125,10 +148,28 @@ export default { ...@@ -125,10 +148,28 @@ export default {
// } // }
// }, // },
change(ind,val){ change(ind,val){
console.log(ind,val)
if(ind>=0){ if(ind>=0){
this.hideMarker(val-2); if(val==3){
this.gaoMap.tyxlabelsLayer.hide();
}else if(val==4){
this.gaoMap.fmjlabelLayer.hide();
}else if(val==5){
this.hideMarker(item.val-2);
}else { }else {
this.showMarker(val-2); this.gaoMap.businessDetectorUserlabelsLayer.hide();
}
}else {
if(val==3){
this.gaoMap.tyxlabelsLayer.show();
}else if(val==4){
this.gaoMap.fmjlabelLayer.show();
}else if(val==5){
//this.map.czlabelLayer.show();
this.showMarker(item.val-2);
}else {
this.gaoMap.businessDetectorUserlabelsLayer.show();
}
} }
} }
}, },
......
huaxin-web/src/views/bigWindow/Ind3/components/GyInfo.vue 0 → 100644
View file @ 85b6074b
<template>
<div class="devicea-wrapper">
<div class="title">
{{ deviceData.company }}
</div>
<div class="close" @click="close">
<i class="el-icon-close" style="font-size:20px;color:#5dfefe;"></i>
</div>
<p style="background-image: linear-gradient(to right, #5dfefe, #071738); width:100%;height:1px;"></p>
<div>
<div class="top flex">
<div class="top-left">
<div class="group">
<div class="left">单位名称：</div>
<div class="right zzz">{{ deviceData.company }}</div>
</div>
<div class="group">
<div class="left last">联系人：</div>
<div
:title="deviceData.stationDetail"
class="right last zzz"
>
{{ deviceData.username }}
</div>
</div>
<div class="group">
<div class="left">流量计品牌：</div>
<div class="right zzz">{{ meterCompanyFormatte(deviceData) }}</div>
</div>
<div class="group">
<div class="left">营业网点：</div>
<div class="right zzz">{{ getbranch(deviceData) }}</div>
</div>
<!--<div class="group">
<div class="left">最大储气量：</div>
<div class="right zzz">{{ deviceData.bigStorage }}(m³/t)</div>
</div>-->
<div class="group">
<div class="left">通气日期：</div>
<div class="right zzz">{{ deviceData.starttime}}</div>
</div>
<div class="group">
<div class="left">详细地址：</div>
<div
:title="deviceData.address"
class="right zzz"
>
{{ deviceData.address }}
</div>
</div>
</div>
<div class="top-center">
<div class="group">
<div class="left">生产品种：</div>
<div class="right zzz">
{{ deviceData.contract }}
</div>
</div>
<div class="group">
<div class="left">联系电话：</div>
<div class="right zzz" :title="deviceData.phone">{{ deviceData.phone }}</div>
</div>
<div class="group">
<div class="left">流量计型号：</div>
<div class="right zzz">{{ gasSourceFormatte(deviceData.type) }}</div>
</div>
<div class="group">
<div class="left">安检类型：</div>
<div class="right zzz" >
<span v-if="deviceData.taskType == '1'" title="华鑫季度一检">华鑫季度一检</span>
<span v-else-if="deviceData.taskType == '2'" title="鸿海季度一检"> 鸿海季度一检</span>
<span v-else>-</span>
</div>
</div>
<div class="group">
<div class="left">开通状态：</div>
<div class="right zzz">{{ statusFormatte(deviceData) }}</div>
</div>
</div>
<div class="top-right">
<div class="left last">照片：</div>
<el-image
v-if="deviceData.pictureAddress"
style="width: 80px; height: 80px"
:src="deviceData.pictureAddress"
:preview-src-list="[deviceData.pictureAddress ]"
:z-index="999999"
>
</el-image>
<div class="imgtext" v-else>暂无图片</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "device-info",
data(){
return{
meterCompany: [],
branchOptions: [],
statusOptions: []
}
},
created(){
this.getMeterCompany();
this.getGasSource();
this.getStatusType();
this.getDangerousType();
},
methods:{
close() {
this.mapClass.infowindowClose();
},
//流量计品牌
getMeterCompany(){
this.getDicts("t_business_factory_meter_type").then((response) => {
this.meterCompany = response.data;
});
},
//气源中类
getGasSource(){
this.getDicts("t_gas_source").then((response) => {
this.gasSource = response.data;
});
},
//营业网点
getDangerousType(){
this.getDicts("t_branch").then((response) => {
this.branchOptions = response.data;
});
},
getStatusType(){
this.getDicts("t_user_status").then((response) => {
this.statusOptions = response.data;
});
},
//品牌
meterCompanyFormatte(row){
return this.selectDictLabel(
this.meterCompany,
row.usernum
);
},
//流量计型号
gasSourceFormatte(num){
if(num==1){
return "DN25";
}else if(num==2){
return "DN50";
}else if(num==3){
return "DN80";
}else if(num==4){
return "DN100";
}else if(num==5){
return "DN150";
}else if(num==5){
return "DN200";
}
return "";
},
getbranch(row){
return this.selectDictLabel(
this.branchOptions,
row.branch
);
},
//危险源级别
statusFormatte(row){
return this.selectDictLabel(
this.statusOptions,
row.status
);
},
}
}
</script>
<style scoped lang="scss">
.devicea-wrapper {
box-shadow: 0px 0px 10px #54e0ef inset;
background-color: #071738;
padding: 10px;
position: relative;
width: 670px;
border-radius: 7px;
.title {
// padding-top: 10px;
// padding-left: 10px;
font-size: 14px;
line-height: 14px;
color: #ffffff;
}
.close {
position: absolute;
right: 10px;
top: 5px;
cursor: pointer;
}
.top {
margin-top: 10px;
margin-bottom: 10px;
box-sizing: border-box;
.top-left {
flex: 1.8;
.group {
height: 30px;
flex: 1;
display: flex;
justify-content: space-between;
box-sizing: border-box;
div {
flex: 1;
box-sizing: border-box;
font-size: 14px;
color: #ffffff;
line-height: 30px;
padding: 0 5px;
&.last {
border-bottom: none;
}
}
.left {
text-align: right;
}
.right {
flex:2;
}
}
}
.top-center {
flex: 1.2;
.group {
height: 30px;
flex: 1;
display: flex;
justify-content: space-between;
box-sizing: border-box;
div {
flex: 1;
box-sizing: border-box;
font-size: 14px;
color: #ffffff;
line-height: 30px;
padding: 0 5px;
&.last {
border-bottom: none;
}
}
.left {
text-align: right;
}
.right {
flex:0.9;
}
}
}
.top-right {
flex: 1;
display: flex;
justify-content: center;
div {
width: 50px;
font-size: 14px;
color: #ffffff;
&.last {
border-bottom: none;
}
}
.imgtext {
color: #ffffff;
font-size: 30px;
}
}
}
.foot {
font-size: 14px;
color: #ffffff;
background: url(~@/assets/firstimage/box-bg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 1px;
.thead,
.tbody {
div {
flex: 1;
text-align: left;
box-sizing: border-box;
text-align: center;
border: 1px solid #1b365d;
}
}
.tbody {
border-top: none;
}
}
.btn {
position: relative;
margin-top: 10px;
div {
font-size: 14px;
color: #ffffff;
background: url(~@/assets/firstimage/boxbtn-bg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 7px 15px;
}
}
.flex {
display: flex;
justify-content: space-between;
}
}
</style>
huaxin-web/src/views/bigWindow/Ind3/components/StationInfo.vue 0 → 100644
View file @ 85b6074b
<template>
<div class="devicea-wrapper">
<div class="title">
{{ deviceData.siteStationName }}
</div>
<div class="close" @click="close">
<i class="el-icon-close" style="font-size:20px;color:#5dfefe;"></i>
</div>
<p style="background-image: linear-gradient(to right, #5dfefe, #071738); width:100%;height:1px;"></p>
<div>
<div class="top flex">
<div class="top-left">
<div class="group">
<div class="left">场站名称：</div>
<div class="right zzz">{{ deviceData.siteStationName }}</div>
</div>
<div class="group">
<div class="left last">厂站用途：</div>
<div
:title="deviceData.stationDetail"
class="right last zzz"
>
{{ deviceData.stationDetail }}
</div>
</div>
<div class="group">
<div class="left">启动时间：</div>
<div class="right zzz">{{ deviceData.enableTiem }}</div>
</div>
<div class="group">
<div class="left">负责人电话：</div>
<div class="right zzz">{{ deviceData.phone }}</div>
</div>
<!--<div class="group">
<div class="left">最大储气量：</div>
<div class="right zzz">{{ deviceData.bigStorage }}(m³/t)</div>
</div>-->
<div class="group">
<div class="left">危险源级别：</div>
<div class="right zzz">{{ dangerousLevelFormatte(deviceData) }}</div>
</div>
<div class="group">
<div class="left">储罐容积：</div>
<div class="right zzz">{{ deviceData.volume }}</div>
</div>
</div>
<div class="top-center">
<div class="group">
<div class="left">场站类型：</div>
<div class="right zzz">
{{ siteStationFormatte(deviceData) }}
</div>
</div>
<div class="group">
<div class="left">详细地址：</div>
<div
:title="deviceData.address"
class="right zzz"
>
{{ deviceData.address }}
</div>
</div>
<div class="group">
<div class="left">负责人：</div>
<div class="right zzz">{{ deviceData.contacts }}</div>
</div>
<div class="group">
<div class="left">气源种类：</div>
<div class="right zzz">{{ gasSourceFormatte(deviceData) }}</div>
</div>
<div class="group">
<div class="left">最大供气量：</div>
<div class="right zzz">{{ deviceData.bigProvide }}(m³/d)</div>
</div>
<div class="group">
<div class="left">危险源名称：</div>
<div class="right zzz">{{ deviceData.dangerousName }}</div>
</div>
</div>
<div class="top-right">
<div class="left last">照片：</div>
<el-image
v-if="deviceData.pictureAddress"
style="width: 80px; height: 80px"
:src="deviceData.pictureAddress"
:preview-src-list="[deviceData.pictureAddress ]"
:z-index="999999"
>
</el-image>
<div class="imgtext" v-else>暂无图片</div>
</div>
</div>
<!--<div class="foot">
<div class="thead flex" v-if="list.length > 0">
<div class="first">设备类型</div>
<div>设备数量</div>
<div>在线设备</div>
<div>离线设备</div>
&lt;!&ndash; <div>历史报警</div>
<div>已处理报警</div> &ndash;&gt;
<div class="last">报警中</div>
</div>
<template v-if="list.length > 0">
<div
class="tbody flex"
v-for="deviceData in list"
:key="deviceData.inAlarm + Math.random()"
>
<div v-unValue class="first zzz">
{{ typeList[deviceData.dataType] }}
</div>
<div v-unValue class="">{{ deviceData.numberPressureGauges }}</div>
<div v-unValue class="">
{{ deviceData.onlineEquipment }}
</div>
<div v-unValue class="">
{{ deviceData.offlineEquipment }}
</div>
&lt;!&ndash; <div v-unValue class="">
{{ deviceData.historicalAlarm }}
</div>
<div v-unValue class="">
{{ deviceData.alarmProcessed }}
</div> &ndash;&gt;
<div v-unValue class="last">
{{ deviceData.inAlarm }}
</div>
</div>
</template>
</div>-->
</div>
</div>
</template>
<script>
export default {
name: "device-info",
data(){
return{
stationType: [],
gasSource: [],
dangerousLevel: []
}
},
created(){
this.getStationType();
this.getGasSource();
this.getDangerousType();
},
methods:{
close() {
this.mapClass.infowindowClose();
},
//场站类型
getStationType(){
this.getDicts("t_station_type").then((response) => {
this.stationType = response.data;
});
},
//气源中类
getGasSource(){
this.getDicts("t_gas_source").then((response) => {
this.gasSource = response.data;
});
},
//危险源级别
getDangerousType(){
this.getDicts("t_dangerous_level").then((response) => {
this.dangerousLevel = response.data;
});
},
//场站类型格式化
siteStationFormatte(row){
return this.selectDictLabel(
this.stationType,
row.siteStationType
);
},
//气体种类
gasSourceFormatte(row){
return this.selectDictLabel(
this.gasSource,
row.gasSource
);
},
//危险源级别
dangerousLevelFormatte(row){
return this.selectDictLabel(
this.dangerousLevel,
row.dangerousLevel
);
},
}
}
</script>
<style scoped lang="scss">
.devicea-wrapper {
box-shadow: 0px 0px 10px #54e0ef inset;
background-color: #071738;
padding: 10px;
position: relative;
width: 670px;
border-radius: 7px;
.title {
// padding-top: 10px;
// padding-left: 10px;
font-size: 14px;
line-height: 14px;
color: #ffffff;
}
.close {
position: absolute;
right: 10px;
top: 5px;
cursor: pointer;
}
.top {
margin-top: 10px;
margin-bottom: 10px;
box-sizing: border-box;
.top-left {
flex: 1.8;
.group {
height: 30px;
flex: 1;
display: flex;
justify-content: space-between;
box-sizing: border-box;
div {
flex: 1;
box-sizing: border-box;
font-size: 14px;
color: #ffffff;
line-height: 30px;
padding: 0 5px;
&.last {
border-bottom: none;
}
}
.left {
text-align: right;
}
.right {
flex:2;
}
}
}
.top-center {
flex: 1.2;
.group {
height: 30px;
flex: 1;
display: flex;
justify-content: space-between;
box-sizing: border-box;
div {
flex: 1;
box-sizing: border-box;
font-size: 14px;
color: #ffffff;
line-height: 30px;
padding: 0 5px;
&.last {
border-bottom: none;
}
}
.left {
text-align: right;
}
.right {
flex:0.9;
}
}
}
.top-right {
flex: 1;
display: flex;
justify-content: center;
div {
width: 50px;
font-size: 14px;
color: #ffffff;
&.last {
border-bottom: none;
}
}
.imgtext {
color: #ffffff;
font-size: 30px;
}
}
}
.foot {
font-size: 14px;
color: #ffffff;
background: url(~@/assets/firstimage/box-bg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 1px;
.thead,
.tbody {
div {
flex: 1;
text-align: left;
box-sizing: border-box;
text-align: center;
border: 1px solid #1b365d;
}
}
.tbody {
border-top: none;
}
}
.btn {
position: relative;
margin-top: 10px;
div {
font-size: 14px;
color: #ffffff;
background: url(~@/assets/firstimage/boxbtn-bg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 7px 15px;
}
}
.flex {
display: flex;
justify-content: space-between;
}
}
</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