1212 lines
27 KiB
Vue
1212 lines
27 KiB
Vue
<template>
|
||
<!-- 顶部导航栏 -->
|
||
<custom-nav-bar :left="false" leftText="" @leftClick="" :title="title">
|
||
<template v-slot:left>
|
||
<view @click="$refs.landRef.open()">地块</view>
|
||
</template>
|
||
</custom-nav-bar>
|
||
<!-- 地图 -->
|
||
<view id="map" class="map" :imgs="mapData.imgs" :change:imgs="leaflet.imgsEmitHandler" :wo="mapData.wo"
|
||
:change:wo="leaflet.woEmitHandler"></view>
|
||
<!-- 图层 -->
|
||
<view class="above">
|
||
<view @click="showPopup('popup2')">
|
||
<i class="iconfont icon-tuceng">
|
||
<span>图层</span>
|
||
</i>
|
||
</view>
|
||
</view>
|
||
<!-- 工具 -->
|
||
<view class="below">
|
||
<view>
|
||
<i class="iconfont icon-dingwei"></i>
|
||
</view>
|
||
</view>
|
||
<!-- 控制弹出 -->
|
||
<u-popup mode="bottom" :show="pop.show" @close="closePopup">
|
||
<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
|
||
<view class="card-grey">
|
||
<view class="card-title">
|
||
<u-row>
|
||
<u-col span="2">
|
||
<view>
|
||
<text class="font-green">●</text>
|
||
A1-1
|
||
</view>
|
||
</u-col>
|
||
<u-col span="5">
|
||
<view class="fixed">
|
||
<view class="iconfont icon-wendu icon" style="float: left;margin-left: 5px;">12
|
||
</view>
|
||
</view>
|
||
</u-col>
|
||
<u-col span="5" style="align-items: flex-end;">
|
||
<view class="fixed">
|
||
<u-button type="success" size="mini" text="刷新" />
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<view class="control">
|
||
<view class="icon iconfont icon-tubiao"></view>
|
||
<u-row>
|
||
<u-col span="3">
|
||
<u-button type="success">
|
||
<span>60</span>
|
||
①
|
||
<i class="iconfont icon-suoding"></i>
|
||
<span class="name">张三</span>
|
||
</u-button>
|
||
|
||
</u-col>
|
||
<u-col span="6">
|
||
<view class="valve">
|
||
<view>
|
||
<u-button type="success">
|
||
<span>60</span>
|
||
①
|
||
<i class="iconfont icon-suoding"></i>
|
||
</u-button>
|
||
</view>
|
||
<view class="btn-img">
|
||
<view class="text">
|
||
<view class="left">
|
||
111
|
||
</view>
|
||
<view class="top">22</view>
|
||
<view class="middle">
|
||
离线
|
||
</view>
|
||
<view class="right">
|
||
333
|
||
</view>
|
||
<view class="bottom">444</view>
|
||
</view>
|
||
<image src="../static/images/valves/3/valve3_open.gif" mode="widthFix" />
|
||
</view>
|
||
<view>
|
||
<u-button type="success">
|
||
<span>60</span>
|
||
①
|
||
<i class="iconfont icon-suoding"></i>
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
</u-col>
|
||
<u-col span="3">
|
||
<u-button type="success">
|
||
<span>60</span>
|
||
①
|
||
<i class="iconfont icon-suoding"></i>
|
||
</u-button>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<view class="box show">
|
||
<view class="card">
|
||
<view class="expand">
|
||
<view class="icon">
|
||
<view class="iconfont icon-jt-b"></view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="title fixed">
|
||
<view class="text" style="min-width: 25px;">
|
||
水压趋势（kPa）
|
||
</view>
|
||
<view>更多<span class="iconfont icon-you"></span></view>
|
||
</view>
|
||
<view class="tip">设备仅采集已打开的出水口水压</view>
|
||
<view class="pressure">
|
||
<view>①口</view>
|
||
<view>
|
||
<view>放图表</view>
|
||
<span>近2小时暂无水压变化</span>
|
||
</view>
|
||
</view>
|
||
<view class="pressure">
|
||
<view>①口</view>
|
||
<view>
|
||
<view>放图表</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card" style="overflow: hidden;">
|
||
<view class="title fixed">
|
||
<view class="text" style="min-width: 25px;">
|
||
最近操作
|
||
</view>
|
||
<view>更多<span class="iconfont icon-you"></span></view>
|
||
</view>
|
||
<view class="text-list">
|
||
<view>
|
||
<view>关闭</view>
|
||
<view class="font-green">执行成功</view>
|
||
</view>
|
||
<view>
|
||
<view>操作人：农场主</view>
|
||
<view>2024-12-12 12:21:30</view>
|
||
</view>
|
||
</view>
|
||
<view class="text-list">
|
||
<view>
|
||
<view>关闭</view>
|
||
<view class="font-green">执行成功</view>
|
||
</view>
|
||
<view>
|
||
<view>操作人：农场主</view>
|
||
<view>2024-12-12 12:21:30</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 图层弹出 -->
|
||
<u-popup ref="popup2" type="center">
|
||
<view class="popup-content">
|
||
<view class="layer">
|
||
<view class="title">
|
||
<span>图层</span>
|
||
<view>
|
||
<i class="iconfont icon-guanbi"></i>
|
||
</view>
|
||
</view>
|
||
<view class="card">
|
||
<view class="layer-item">
|
||
<view class="img"><image src="../static/images/map/dt.jpg"></image></view>
|
||
标准地图
|
||
</view>
|
||
<view class="layer-item">
|
||
<view class="img"><image src="../static/images/map/dx.jpg"></image></view>
|
||
地形图
|
||
</view>
|
||
<view class="layer-item" >
|
||
<view class="img"><image src="../static/images/map/wx.jpg"></image></view>
|
||
卫星图
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 地块选择 -->
|
||
<custom-select-land ref="landRef" :data="ijs.companys" :defaultSelect="ijs.land" @getLand="getLand"
|
||
@select="landChange" />
|
||
<!-- 角度 -->
|
||
<custom-angle-slider ref="refAngleSlider" mode="bottom" @close="swiperClose" @confirm="swiperConfirm" />
|
||
<!-- ADC -->
|
||
<custom-index-adc ref="adcRef" />
|
||
|
||
<!-- <custom-index-mp ref="mpRef" /> -->
|
||
</template>
|
||
|
||
<script>
|
||
import store from "@/store"
|
||
import * as imageAssets from '@/utils/indexUtil/imageAssets.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
user: store.state.user.user,
|
||
title: "",
|
||
ijs: getApp().ijs, // 首页公共js
|
||
dc: getApp().dc, // 设备控制公共代码
|
||
valveImg: imageAssets, //阀门图片
|
||
mqttshow: false, // h5端手动链接mqtt按钮显示
|
||
mqttConnected: false, // mqtt链接状态
|
||
screenValue: "", // 关键字搜索
|
||
isSticky: false, //吸顶状态
|
||
stateScreen: { // 吸顶筛选选中的项 值为 click
|
||
all: null,
|
||
online: null,
|
||
error: null
|
||
},
|
||
mapData: {
|
||
imgs: null, //地图所用到的图片
|
||
wo: null,
|
||
},
|
||
pop: {
|
||
show: false,
|
||
showA: false,
|
||
item: {}
|
||
},
|
||
selectItem: null,
|
||
}
|
||
},
|
||
onLoad() {
|
||
console.error("onLoad")
|
||
// 监听mqtt链接状态
|
||
// uni.$off("mqtt-connected");
|
||
uni.$on("mqtt-connected", (e) => {
|
||
this.mqttConnected = e;
|
||
});
|
||
// 监听地块改变
|
||
uni.$on("update-land-indexMap", (e) => {
|
||
console.error("update-land-indexMap:", e);
|
||
this.initMapData();
|
||
});
|
||
|
||
// this.ijs.initData(this.user.userId, (land, wo) => {
|
||
// getApp().getWoList(land, wo);
|
||
// });
|
||
},
|
||
onShow() {
|
||
this.title = this.ijs?.land?.landName || "田间";
|
||
|
||
// // 监听当前页面的加载状态
|
||
// uni.$off("index-showLoading");
|
||
// uni.$on("index-showLoading", (flg) => {
|
||
// if (flg) {
|
||
// uni.showLoading();
|
||
// } else {
|
||
// uni.hideLoading();
|
||
// }
|
||
// });
|
||
// 监听控制角度弹窗通知
|
||
uni.$off("open-angle-slider");
|
||
uni.$on("open-angle-slider", (e) => {
|
||
console.error("打开角度选择：", e)
|
||
this.$refs.refAngleSlider.show(e.title, e.extra, e.value, e.other);
|
||
this.pop.showA = true;
|
||
this.pop.show = false;
|
||
});
|
||
},
|
||
mounted() {
|
||
//初始化基础数据
|
||
this.mapData.imgs = {
|
||
key: import.meta.env.VITE_APP_TIAN_DI_TU_KEY,
|
||
centerPoint: [87.624947, 43.791789], //默认乌鲁木齐
|
||
imgs: imageAssets,
|
||
};
|
||
},
|
||
onHide() {
|
||
uni.$off("index-showLoading");
|
||
uni.$off("open-angle-slider");
|
||
},
|
||
methods: {
|
||
mapEventHandler(e) {
|
||
if (!e) {
|
||
return;
|
||
}
|
||
switch (e.type) {
|
||
case "msg":
|
||
this.$toast(e.data);
|
||
break;
|
||
case "showPopup":
|
||
this.showPopup(e.data);
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
},
|
||
initMapData() {
|
||
//初始化地块数据
|
||
this.mapData.wo = this.ijs.wo;
|
||
},
|
||
// 地块选择回调
|
||
landChange(e) {
|
||
this.title = e.landName;
|
||
},
|
||
// 获取地块信息
|
||
getLand(e) {
|
||
this.ijs.getLand(e.node).then(res => {
|
||
this.$refs.landRef.addLand(e, res.data);
|
||
});
|
||
},
|
||
showPopup(e) {
|
||
this.pop.item = e;
|
||
console.error("item:", this.pop.item);
|
||
console.error("dataObj:", this.dc.dataObj);
|
||
this.pop.show = true;
|
||
this.pop.showA = false;
|
||
},
|
||
closePopup() {
|
||
this.pop.show = false;
|
||
},
|
||
// 角度控制回调
|
||
swiperConfirm(e) {
|
||
this.dc.buildCommand(e.item, e.index, e.value, e.other);
|
||
this.swiperClose();
|
||
},
|
||
swiperClose() {
|
||
this.pop.show = true;
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<script module="leaflet" lang="renderjs">
|
||
// #ifdef H5
|
||
import "leaflet/dist/leaflet.css"
|
||
// #endif
|
||
import L from "leaflet"
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
map: null,
|
||
key: null,
|
||
centerPoint: null, //默认乌鲁木齐
|
||
mapType: null,
|
||
selectMapType: "img_w",
|
||
dom: {
|
||
landMap: null,
|
||
dataObj: {},
|
||
imgs: null,
|
||
cp: null,
|
||
label: {},
|
||
marker: {}
|
||
},
|
||
};
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
// 接受图片传递
|
||
imgsEmitHandler(e) {
|
||
if (!e) {
|
||
return;
|
||
}
|
||
this.key = e.key;
|
||
this.centerPoint = {
|
||
lat: e.centerPoint[0],
|
||
lng: e.centerPoint[1],
|
||
};
|
||
this.dom.imgs = e.imgs;
|
||
this.initMap();
|
||
},
|
||
woEmitHandler(e) {
|
||
if (!e) {
|
||
return;
|
||
}
|
||
console.error("woEmitHandler:", e);
|
||
const that = this;
|
||
if (this.map) {
|
||
var layers = that.map._layers;
|
||
var markersToRemove = [];
|
||
// 遍历所有图层并移除
|
||
for (var id in layers) {
|
||
if (layers[id] instanceof L.Marker) { // 确保我们处理的是一个Leaflet图层
|
||
markersToRemove.push(layers[id]);
|
||
}
|
||
}
|
||
// 移除所有的 Marker
|
||
markersToRemove.forEach(function(marker) {
|
||
that.map.removeLayer(marker);
|
||
});
|
||
} else {
|
||
this.initMap();
|
||
}
|
||
this.dom.dataObj = e.deviceData;
|
||
this.drawMap(e.landMap);
|
||
this.setWaterOutlet(e.wo);
|
||
},
|
||
//初始化地图
|
||
initMap() {
|
||
if (this.map) {
|
||
return;
|
||
}
|
||
const that = this;
|
||
that.mapType = {
|
||
vec_w: new L.tileLayer(
|
||
`http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${that.key}`, {
|
||
attribution: '矢量地图'
|
||
}),
|
||
img_w: new L.tileLayer(
|
||
`http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${that.key}`, {
|
||
attribution: '影像地图'
|
||
}),
|
||
ter_w: new L.tileLayer(
|
||
`http://t0.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=${that.key}`, {
|
||
attribution: '地形图'
|
||
}),
|
||
labelLayer: new L.tileLayer(
|
||
`http://t0.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=${that.key}`, {
|
||
attribution: '矢量地名标注'
|
||
}),
|
||
};
|
||
var normal = L.layerGroup([that.mapType[that.selectMapType], that.mapType.labelLayer])
|
||
|
||
const map = L.map('map', {
|
||
// crs: L.CRS.EPSG3857,
|
||
// center: [34.07148, 108.84076], //中心点
|
||
center: [that.centerPoint.lng, that.centerPoint.lat], //中心点
|
||
layers: normal,
|
||
zoom: 5, //默认层级
|
||
minZoom: 2, //最小层级
|
||
maxZoom: 18, //最大层级
|
||
zoomControl: true, //是否将 zoom 缩放控件添加到地图中。
|
||
doubleClickZoom: false, //图是否可以通过双击来放大
|
||
dragging: true, //地图是否可以通过 mouse/touch 进行拖动。
|
||
attributionControl: false, //是否将 attribution 版权控件添加到地图中。
|
||
tap: true // 确保此选项为 true 或者不指定，因为默认值是 true
|
||
});
|
||
|
||
// 如果需要监听缩放过程中的变化，可以使用 'zoom' 事件
|
||
map.on('zoom', function() {
|
||
that.onZoomend();
|
||
});
|
||
|
||
that.map = map;
|
||
that.$ownerInstance.callMethod('initMapData', "map初始化回调");
|
||
},
|
||
onZoomend() { //缩放监听
|
||
const that = this;
|
||
var currentZoomLevel = this.map.getZoom();
|
||
console.log("正在缩放，当前缩放级别: " + currentZoomLevel);
|
||
var layers = that.map._layers;
|
||
var markersToRemove = [];
|
||
// 遍历所有图层并移除
|
||
for (var id in layers) {
|
||
if (layers[id] instanceof L.Marker) { // 确保我们处理的是一个Leaflet图层
|
||
markersToRemove.push(layers[id]);
|
||
}
|
||
}
|
||
// 移除所有的 Marker
|
||
markersToRemove.forEach(function(marker) {
|
||
that.map.removeLayer(marker);
|
||
});
|
||
if (currentZoomLevel > 16) {
|
||
for (let key in that.dom.label) {
|
||
that.map.addLayer(that.dom.label[key])
|
||
}
|
||
for (let key in that.dom.marker) {
|
||
that.map.addLayer(that.dom.marker[key].marker);
|
||
}
|
||
} else if (currentZoomLevel == 16) {
|
||
for (let key in that.dom.marker) {
|
||
that.map.addLayer(that.dom.marker[key].marker);
|
||
}
|
||
} else {
|
||
// 定义图标属性
|
||
let markerIcon = L.icon({
|
||
iconUrl: "./static/images/map/zhongxindian.png",
|
||
//图标图像的尺寸，单位是像素。
|
||
iconSize: [20, 30],
|
||
});
|
||
L.marker([that.centerPoint.lng, that.centerPoint.lat], {
|
||
icon: markerIcon,
|
||
}).addTo(that.map);
|
||
}
|
||
},
|
||
// 绘制地图
|
||
drawMap(landMap) {
|
||
if (!landMap) {
|
||
return
|
||
}
|
||
const {
|
||
centerPoint, //中心点
|
||
boundary, //边界(支持多个)
|
||
mainLine, //主干管
|
||
secondaryLine //支干管
|
||
} = landMap;
|
||
// 重新设置中心点
|
||
const cp = JSON.parse(centerPoint)
|
||
// this.map.setZoomAround([cp[1], cp[0]], 16)
|
||
// this.map.flyTo([cp[1], cp[0]], 16)
|
||
this.map.setView([cp[1], cp[0]], 18)
|
||
this.setCenterPoint(centerPoint)
|
||
this.setBoundary(boundary)
|
||
this.setMainLine(mainLine)
|
||
this.setSecondaryLine(secondaryLine)
|
||
this.dom.landMap = landMap;
|
||
},
|
||
// 设置中心点
|
||
setCenterPoint(centerPoint) {
|
||
if (!centerPoint) {
|
||
return
|
||
}
|
||
// 重新设置中心点
|
||
centerPoint = JSON.parse(centerPoint)
|
||
// 重新设置中心点
|
||
this.centerPoint = {
|
||
lat: centerPoint[0],
|
||
lng: centerPoint[1],
|
||
};
|
||
},
|
||
// 设置边界
|
||
setBoundary(boundary) {
|
||
if (!boundary) {
|
||
return
|
||
}
|
||
// 重新设置中心点
|
||
boundary = JSON.parse(boundary)
|
||
if (boundary.length) {
|
||
let points = []
|
||
boundary.forEach((item) => {
|
||
points.push([item[1], item[0]])
|
||
})
|
||
//创建面对象
|
||
var polygon = L.polygon(points, {
|
||
color: "blue"
|
||
});
|
||
this.map.addLayer(polygon);
|
||
}
|
||
},
|
||
// 设置主干管
|
||
setMainLine(mainLine) {
|
||
if (!mainLine) {
|
||
return
|
||
}
|
||
// 重新设置中心点
|
||
mainLine = JSON.parse(mainLine)
|
||
if (mainLine.length) {
|
||
mainLine.forEach((item1) => {
|
||
let points = []
|
||
item1.forEach((item2) => {
|
||
points.push([item2[1], item2[0]])
|
||
})
|
||
//创建线对象
|
||
var line = L.polyline(points, {
|
||
color: '#ff0000',
|
||
});
|
||
//向地图上添加线
|
||
this.map.addLayer(line)
|
||
})
|
||
}
|
||
},
|
||
// 设置主干管
|
||
setSecondaryLine(secondaryLine) {
|
||
if (!secondaryLine) {
|
||
return
|
||
}
|
||
// 重新设置中心点
|
||
secondaryLine = JSON.parse(secondaryLine)
|
||
secondaryLine = [
|
||
[
|
||
[108.83999, 34.07187],
|
||
[108.8438, 34.07187]
|
||
]
|
||
]
|
||
if (secondaryLine.length) {
|
||
secondaryLine.forEach((item1) => {
|
||
let points = []
|
||
item1.forEach((item2) => {
|
||
points.push([item2[1], item2[0]])
|
||
})
|
||
//创建线对象
|
||
var line = L.polyline(points, {
|
||
color: '#00ff00',
|
||
});
|
||
//向地图上添加线
|
||
this.map.addLayer(line)
|
||
})
|
||
}
|
||
},
|
||
// 设置阀门
|
||
setWaterOutlet(wo) {
|
||
if (!wo && !wo.length) {
|
||
return
|
||
}
|
||
const that = this
|
||
wo.forEach((item) => {
|
||
if (item.longitude && item.latitude) {
|
||
item.latitude = 34.07187
|
||
// 创建标注
|
||
let marker = L.marker([item.latitude, item.longitude], {
|
||
title: "312",
|
||
alt: "123",
|
||
icon: that.creatMapIcon(item?.device?.deviceTypeKey)
|
||
})
|
||
marker.on('click', function(e) {
|
||
that.mapDeviceClick(e);
|
||
});
|
||
that.map.addLayer(marker) // 将标注添加到地图中
|
||
that.addMarker(marker, item);
|
||
|
||
// 创建文字
|
||
let label = that.creatLabel(item, marker);
|
||
that.map.addLayer(label) // 将标注添加到地图中
|
||
that.addLabel(item, label);
|
||
}
|
||
if (item.children && item.children.length) {
|
||
item.children.forEach((child) => {
|
||
if (child.longitude && child.latitude) {
|
||
child.latitude = 34.07187
|
||
// 创建标注
|
||
let marker = L.marker([child.latitude, child.longitude], {
|
||
icon: that.creatMapIcon(child?.device?.deviceTypeKey)
|
||
})
|
||
marker.addEventListener("click", (e) => {
|
||
that.mapDeviceClick(e);
|
||
});
|
||
that.map.addLayer(marker) // 将标注添加到地图中
|
||
that.addMarker(marker, child);
|
||
|
||
// 创建文字
|
||
let label = that.creatLabel(child, marker);
|
||
that.map.addLayer(label) // 将标注文字添加到地图中
|
||
that.addLabel(child, label);
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 生成阀门图标
|
||
creatMapIcon(type, select = false) {
|
||
// 获取当前地图的缩放级别
|
||
const zoom = this.map.getZoom();
|
||
var icon = null;
|
||
switch (type) {
|
||
case 'valve':
|
||
icon = L.icon({
|
||
iconUrl: `.${select ? this.dom.imgs.valve3_select : this.dom.imgs.valve3}`,
|
||
iconSize: [20, 34], //图标图像的尺寸，单位是像素。
|
||
});
|
||
break;
|
||
case 'fiveValve':
|
||
icon = L.icon({
|
||
iconUrl: `.${select ? this.dom.imgs.valve5_select : this.dom.imgs.valve5}`,
|
||
iconSize: [20, 34], //图标图像的尺寸，单位是像素。
|
||
});
|
||
break;
|
||
case 'butterflyValve':
|
||
icon = L.icon({
|
||
iconUrl: `.${select ? this.dom.imgs.df_select : this.dom.imgs.df}`,
|
||
iconSize: [20, 34], //图标图像的尺寸，单位是像素。
|
||
});
|
||
break;
|
||
default:
|
||
icon = L.icon({
|
||
iconUrl: `.${this.dom.imgs.csk}`,
|
||
iconSize: [20, 30], //图标图像的尺寸，单位是像素。
|
||
// //图标 "tip" 的坐标（相对于其左上角）。图标将被对齐，使该点位于标记的地理位置。如果指定了尺寸，默认为居中，也可以在CSS中设置负的边距。
|
||
// iconAnchor: [7, 9],
|
||
// //弹出窗口（popup）的坐标，相对于图标锚点而言，将从该点打开。
|
||
// popupAnchor: [-3, -3],
|
||
});
|
||
break;
|
||
}
|
||
return icon;
|
||
},
|
||
// 生成阀门文字
|
||
creatLabel(item, marker) {
|
||
let name = item.showName;
|
||
let divIcon = L.divIcon({
|
||
html: `<span>${name}</span>`,
|
||
className: `my-device-icon ${this.getLableColor(item.dataKey)}`,
|
||
iconAnchor: [15, -10],
|
||
});
|
||
if (name.length <= 3) {
|
||
divIcon.options.iconAnchor = [15, -10]
|
||
} else if (name.length == 4 || name.length == 5) {
|
||
divIcon.options.iconAnchor = [20, -10]
|
||
} else {
|
||
divIcon.options.iconAnchor = [25, -10]
|
||
}
|
||
return L.marker(marker._latlng, {
|
||
icon: divIcon
|
||
});
|
||
},
|
||
// 获取文字的颜色
|
||
getLableColor(dataKey) {
|
||
let color = 'device-white'; //"#fff";
|
||
if (this.dom.dataObj[dataKey] && this.dom.dataObj[dataKey]?.online) {
|
||
if (this.dom.dataObj[dataKey].warning.length) {
|
||
color = 'device-orange'; //"#fbc902"; //橙黄（警告）
|
||
} else {
|
||
color = 'device-green'; //"#0bff3a"; //绿色（在线）
|
||
}
|
||
} else {
|
||
color = 'device-white'; //"#fff"; //白色（默认/离线）
|
||
}
|
||
return color;
|
||
},
|
||
// 缓存页面marker
|
||
addMarker(marker, item) {
|
||
this.dom.marker[marker._leaflet_id] = {
|
||
item: item,
|
||
select: false,
|
||
marker: marker,
|
||
};
|
||
},
|
||
// 缓存页面Label
|
||
addLabel(item, label) {
|
||
if (item.device) {
|
||
this.dom.label[item.device.deviceCode] = label;
|
||
} else {
|
||
this.dom.label[item.showName] = label;
|
||
}
|
||
},
|
||
// 设备点击
|
||
mapDeviceClick(e) {
|
||
const that = this;
|
||
const key = e.sourceTarget._leaflet_id;
|
||
const clickItem = that.dom.marker[key];
|
||
if (clickItem.item?.device) {
|
||
for (var rkey in that.dom.marker) {
|
||
if (that.dom.marker[rkey].select) {
|
||
const clickedIcon = that.creatMapIcon(that.dom.marker[rkey].item.device?.deviceTypeKey, false);
|
||
that.dom.marker[rkey].marker.setIcon(clickedIcon);
|
||
that.dom.marker[rkey].select = false;
|
||
}
|
||
if (key == rkey) {
|
||
const clickedIcon = that.creatMapIcon(that.dom.marker[rkey].item?.device?.deviceTypeKey, true);
|
||
that.dom.marker[rkey].marker.setIcon(clickedIcon);
|
||
that.dom.marker[rkey].select = true;
|
||
}
|
||
}
|
||
// that.$ownerInstance.callMethod('showPopup', that.dom.marker[rkey].item);
|
||
that.$ownerInstance.callMethod('mapEventHandler', {
|
||
type: "showPopup",
|
||
data: clickItem.item
|
||
});
|
||
} else {
|
||
that.$ownerInstance.callMethod('mapEventHandler', {
|
||
type: "msg",
|
||
data: "未绑定设备!"
|
||
});
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
/* #ifdef APP-PLUS */
|
||
@import url("leaflet/dist/leaflet.css");
|
||
/* #endif */
|
||
|
||
.map {
|
||
width: 100%;
|
||
top: 0;
|
||
bottom: 0;
|
||
position: absolute;
|
||
z-index: 0;
|
||
|
||
/* 地图放大缩小 */
|
||
::v-deep .leaflet-control-container {
|
||
position: absolute !important;
|
||
right: 55px !important;
|
||
top: 20% !important;
|
||
}
|
||
|
||
/* 文字 */
|
||
:deep() {
|
||
.my-device-icon {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.my-device-icon span {
|
||
font-size: 14px;
|
||
white-space: nowrap;
|
||
display: block;
|
||
border-radius: 4px;
|
||
background-color: transparent;
|
||
width: fit-content;
|
||
padding: 2px 5px;
|
||
}
|
||
|
||
.device-white span {
|
||
color: #fff;
|
||
}
|
||
|
||
.device-green span {
|
||
color: #0bff3a;
|
||
}
|
||
|
||
.device-orange span {
|
||
color: #fbc902;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
fill: currentColor;
|
||
overflow: hidden;
|
||
}
|
||
|
||
// 图层
|
||
.above {
|
||
background-color: #fff;
|
||
border-radius: 5px;
|
||
position: absolute;
|
||
z-index: 1100;
|
||
width: 35px;
|
||
min-height: 35px;
|
||
top: 15%;
|
||
right: 10px;
|
||
transform: translateY(-50%);
|
||
|
||
&>view {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
height: 35px;
|
||
|
||
i {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
span {
|
||
font-size: 9px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.below {
|
||
position: absolute;
|
||
z-index: 1100;
|
||
bottom: 20%;
|
||
right: 10px;
|
||
|
||
&>view {
|
||
margin-bottom: 5px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
width: 35px;
|
||
height: 35px;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
|
||
span {
|
||
font-size: 9px;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
/* 图层弹出 */
|
||
.layer {
|
||
padding: 10px;
|
||
position: absolute;
|
||
z-index: 1200;
|
||
background-color: #eff0f5;
|
||
width: 100%;
|
||
border-radius: 10px 10px 0 0;
|
||
|
||
.card {
|
||
background-color: #fff;
|
||
border-radius: 5px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
&>view {
|
||
width: 74px;
|
||
height: auto;
|
||
margin: 15px 0;
|
||
text-align: center;
|
||
|
||
.img {
|
||
width: 74px;
|
||
height: 50px;
|
||
overflow: hidden;
|
||
margin-bottom: 5px;
|
||
border-radius: 5px;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.click {
|
||
color: #1a8def;
|
||
|
||
.img {
|
||
border: 1px solid #1a8def;
|
||
}
|
||
}
|
||
}
|
||
|
||
.title {
|
||
padding: 0 10px 10px 10px;
|
||
font-size: 16px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
view {
|
||
width: 30px;
|
||
}
|
||
|
||
i {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 控制弹出框
|
||
.uni-popup {
|
||
z-index: 1000;
|
||
}
|
||
|
||
.popup-content {
|
||
max-height: calc(100vh - 88px);
|
||
overflow-y: scroll;
|
||
}
|
||
|
||
// 水阀列表title
|
||
.card-grey {
|
||
height: auto;
|
||
overflow: hidden;
|
||
border-radius: 10px 10px 0 0;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.card {
|
||
margin: 10px;
|
||
height: auto;
|
||
position: relative;
|
||
|
||
.title {
|
||
justify-content: space-between;
|
||
padding: 10px;
|
||
|
||
.text {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.title>view:nth-child(2) {
|
||
color: #999;
|
||
|
||
span {
|
||
font-size: 0.875rem;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
.sf-title {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
padding: 10px 0;
|
||
|
||
.text {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.icon {
|
||
vertical-align: top;
|
||
margin-right: 5px;
|
||
font-size: 44rpx;
|
||
color: #39ac4f;
|
||
}
|
||
}
|
||
|
||
.font-green {
|
||
color: #39ac4f !important;
|
||
}
|
||
|
||
.font-red {
|
||
color: #e60012 !important;
|
||
}
|
||
|
||
// 提示
|
||
.tip {
|
||
color: #999;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.box {
|
||
transition: height 0.5s ease-out;
|
||
|
||
|
||
}
|
||
|
||
.box.show {
|
||
height: calc(100% - 270px);
|
||
|
||
.icon {
|
||
transform: rotate(0deg);
|
||
}
|
||
}
|
||
|
||
.box.hide {
|
||
height: 10px;
|
||
|
||
.icon {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
|
||
.expand {
|
||
width: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
top: -10px;
|
||
transform: translateX(50%);
|
||
|
||
.icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.iconfont {
|
||
animation: iconleft 0.5s infinite ease-in-out alternate;
|
||
color: #3399ff;
|
||
}
|
||
}
|
||
|
||
|
||
@keyframes iconleft {
|
||
from {
|
||
transform: translateY(0px);
|
||
}
|
||
|
||
to {
|
||
transform: translateY(2px);
|
||
}
|
||
}
|
||
|
||
// 水压图表
|
||
.pressure {
|
||
padding: 10px;
|
||
|
||
&>view:first-child {
|
||
margin: 10px 0;
|
||
}
|
||
|
||
span {
|
||
text-align: center;
|
||
color: #999;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
// 操作记录
|
||
.text-list {
|
||
padding: 5px 10px;
|
||
margin: 0 10px 10px;
|
||
background-color: #f3f3f3;
|
||
border-radius: 5px;
|
||
|
||
&>view {
|
||
line-height: 24px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
&>view:nth-child(2) {
|
||
color: #666;
|
||
font-size: 0.775rem;
|
||
}
|
||
}
|
||
|
||
/* 首页阀门列表 */
|
||
.control {
|
||
padding: 20px 10px;
|
||
|
||
&>.icon {
|
||
color: #3399ff;
|
||
position: absolute;
|
||
right: 10px;
|
||
}
|
||
|
||
.u-button {
|
||
width: 100% !important;
|
||
min-width: 77px;
|
||
|
||
.name {
|
||
position: absolute;
|
||
color: rgb(0, 0, 0, 0.5);
|
||
}
|
||
}
|
||
|
||
.u-line-progress {
|
||
min-width: 77px;
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
font-size: 12rpx;
|
||
margin: 10px;
|
||
}
|
||
|
||
|
||
.valve {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.timeout {
|
||
color: red !important;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.btn-img {
|
||
width: 160px;
|
||
margin: 15px;
|
||
position: relative;
|
||
|
||
img {
|
||
width: 100%;
|
||
}
|
||
|
||
.text,
|
||
.text5 {
|
||
&>view {
|
||
position: absolute;
|
||
z-index: 2;
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
color: #333;
|
||
}
|
||
|
||
.left {
|
||
left: 0;
|
||
top: calc(50% - 17px);
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.top {
|
||
top: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.middle {
|
||
font-size: 24px;
|
||
top: calc(50% - 18px);
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
color: #e60012;
|
||
text-align: center;
|
||
}
|
||
|
||
.right {
|
||
right: 0;
|
||
top: calc(50% - 17px);
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.bottom {
|
||
bottom: 0;
|
||
right: 50%;
|
||
transform: translateX(50%);
|
||
}
|
||
}
|
||
|
||
.text5 {
|
||
.left {
|
||
left: 0;
|
||
top: calc(50% - 4px);
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.middle {
|
||
top: calc(50% - 5px);
|
||
}
|
||
|
||
.right {
|
||
right: 0;
|
||
top: calc(50% - 4px);
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style> |