| | |
| | | class="video_icon" |
| | | @click="hiddenVideo()" |
| | | /> |
| | | <a v-else href="#" title="实时监控" @click="aClick()"> |
| | | <a v-if="myNode && isHidden" href="#" title="实时监控" @click="aClick()"> |
| | | <img |
| | | src="/images/map/监控.png" |
| | | alt="" |
| | |
| | | /> |
| | | </a> |
| | | |
| | | <div class="video_box" v-if="myNode" :class="{ hidden: isHidden }"> |
| | | <div class="video_box" v-show="myNode" :class="{ hidden: isHidden }"> |
| | | <div class="title"> |
| | | <div class="left"> |
| | | <span class="ball"></span> |
| | | <span class="left_info">实时监控</span> |
| | | </div> |
| | | |
| | | <div class="right">设备编码: {{ myNode.values_.id }}</div> |
| | | <div class="right"> |
| | | 设备编码: {{ myNode && myNode.values && myNode.values_.id }} |
| | | </div> |
| | | </div> |
| | | |
| | | <video controls="controls" loop="loop"> |
| | |
| | | </video> |
| | | </div> |
| | | |
| | | <div class="helmet_box" v-show="myNode"> |
| | | <div class="helmet_box" v-show="myNodeHover"> |
| | | <div class="icon_close iconfont" @click="close"></div> |
| | | <div class="sn" v-if="myNode">{{ myNode.values_.lat.id }}</div> |
| | | <div class="location" v-if="myNode">经度: {{ myNode.values_.lat }}</div> |
| | | <div class="location" v-if="myNode">纬度: {{ myNode.values_.lng }}</div> |
| | | <div class="info" v-if="myNode">电量: {{ myNode.values_.battery }}</div> |
| | | <div class="sn" v-if="myNodeHover">{{ myNodeHover.values_.lat.id }}</div> |
| | | <div class="location" v-if="myNodeHover"> |
| | | 经度: {{ myNodeHover.values_.lat }} |
| | | </div> |
| | | <div class="location" v-if="myNodeHover"> |
| | | 纬度: {{ myNodeHover.values_.lng }} |
| | | </div> |
| | | <div class="info" v-if="myNodeHover"> |
| | | 电量: {{ myNodeHover.values_.battery }} |
| | | </div> |
| | | <div class="button"> |
| | | <img |
| | | src="/images/InternetData/视频.png" |
| | |
| | | let myModify = {}; |
| | | let myPolygon = {}; |
| | | let mySelect = {}; |
| | | let mySelect2 = {}; |
| | | let overlay = {}; |
| | | let overlay2 = {}; |
| | | let voiceText = ""; |
| | | |
| | | let drawFeature = []; |
| | | export default { |
| | | data() { |
| | | return { |
| | |
| | | polygonInfo: "", |
| | | nodeFeature: [], |
| | | myNode: null, |
| | | myNodeHover: null, |
| | | commentContent: "", |
| | | }; |
| | | }, |
| | |
| | | } else if (feature.type && feature.type == "polygon") { |
| | | myPolygon = feature; |
| | | this.myNode = null; |
| | | |
| | | this.nodeId = ""; |
| | | return true; |
| | | } else { |
| | | this.myNode = null; |
| | | return false; |
| | | } |
| | | }, |
| | | style: (feature) => { |
| | |
| | | condition: pointerMove, |
| | | filter: (feature, layer) => { |
| | | if (feature.values_ && feature.values_.type == "node") { |
| | | this.myNodeHover = feature; |
| | | return true; |
| | | } else { |
| | | return false; |
| | |
| | | map.addInteraction(select); |
| | | map.addInteraction(select2); |
| | | mySelect = select; |
| | | mySelect2 = select2; |
| | | |
| | | select.on("select", function (e) { |
| | | e.stopPropagation(); |
| | | overlay2.setPosition(undefined); |
| | | // e.stopPropagation(); |
| | | console.log("--------------"); |
| | | overlay.setPosition(undefined); |
| | | |
| | | if (e.selected.length == 0) { |
| | | console.log("999999"); |
| | | |
| | | that.polygonInfo = ""; |
| | | that.nodeId = ""; |
| | | that.myNode = null; |
| | |
| | | |
| | | if (e.selected[0].values_.type == "node") { |
| | | that.isHidden = false; |
| | | that.polygonInfo = ""; |
| | | that.nodeId = e.selected[0].values_.id; |
| | | return false; |
| | | } |
| | |
| | | } else { |
| | | that.polygonInfo = "新区域"; |
| | | } |
| | | overlay.setPosition(e.mapBrowserEvent.coordinate); |
| | | if (e.mapBrowserEvent) { |
| | | console.log(e.mapBrowserEvent.coordinate); |
| | | overlay.setPosition(e.mapBrowserEvent.coordinate); |
| | | } |
| | | |
| | | return false; |
| | | }); |
| | | |
| | |
| | | if ( |
| | | e.selected.length && |
| | | e.selected[0].values_.type == "node" && |
| | | that.myNode && |
| | | that.myNode.values_.id == e.selected[0].values_.id |
| | | that.myNodeHover && |
| | | that.myNodeHover.values_.id == e.selected[0].values_.id |
| | | ) { |
| | | overlay2.setPosition(e.mapBrowserEvent.coordinate); |
| | | } else { |
| | |
| | | feature.id = item.id; |
| | | feature.type = "polygon"; |
| | | feature.polygonName = item.name; |
| | | feature.data1 = item.data[1]; |
| | | this.polyFeature.push(feature); |
| | | }); |
| | | }, |
| | |
| | | view.setCenter(transform(this.center, "EPSG:4326", "EPSG:3857")); |
| | | }, |
| | | drawPolygon() { |
| | | this.rangeArr = []; |
| | | this.myNodeHover = null; |
| | | // this.myNode = null; |
| | | // this.nodeId = ""; |
| | | mySelect2.getFeatures().clear(); |
| | | |
| | | mySelect.dispatchEvent({ |
| | | type: "select", |
| | | selected: [], |
| | | }); |
| | | |
| | | this.resetMap(); |
| | | mySelect.setActive(false); |
| | | mySelect2.setActive(false); |
| | | this.showBtn = true; |
| | | const draw = new Draw({ |
| | | source: myVectorSource, |
| | |
| | | id, |
| | | data: event.feature.getGeometry().getCoordinates()[0], |
| | | }); |
| | | drawFeature.push(event.feature); |
| | | }); |
| | | |
| | | const modify = new Modify({ source: myVectorSource }); |
| | |
| | | myMap.addInteraction(draw); |
| | | }, |
| | | resetMap() { |
| | | drawFeature = []; |
| | | this.polygonInfo = ""; |
| | | mySelect.setActive(true); |
| | | mySelect2.setActive(true); |
| | | this.initPolygonArr(); |
| | | const vectorSource = new VectorSource({ |
| | | features: this.polyFeature, |
| | |
| | | }, |
| | | async savePoly() { |
| | | mySelect.setActive(true); |
| | | mySelect2.setActive(true); |
| | | myMap.removeInteraction(myDraw); |
| | | myMap.removeInteraction(myModify); |
| | | this.showBtn = false; |
| | |
| | | id: +item.id, |
| | | }; |
| | | }); |
| | | await createZones({ dots_arr: arrData }); |
| | | const res = await getHelemtData(); |
| | | const res = await createZones({ dots_arr: arrData }); |
| | | if (res.status == 200) { |
| | | this.$message({ |
| | | type: "success", |
| | | message: "保存成功!", |
| | | }); |
| | | } else { |
| | | this.$message({ |
| | | type: "info", |
| | | message: "保存失败", |
| | | }); |
| | | } |
| | | |
| | | const res2 = await getZones(); |
| | | if (res2.data && res2.data.items && res2.data.items.length > 0) { |
| | | this.polygonArr = res2.data.items.map((obj) => { |
| | | obj.data = obj.dots.map((item) => { |
| | | return transform([item[0], item[1]], "EPSG:4326", "EPSG:3857"); |
| | | }); |
| | | return obj; |
| | | }); |
| | | } |
| | | |
| | | if (drawFeature.length > 0) { |
| | | this.polyFeature.forEach((item) => { |
| | | myVectorSource.removeFeature(item); |
| | | }); |
| | | this.initPolygonArr(); |
| | | |
| | | this.polyFeature.forEach((item) => { |
| | | myVectorSource.addFeature(item); |
| | | }); |
| | | } |
| | | |
| | | // ; |
| | | |
| | | /* const res = await getHelemtData(); |
| | | this.nodeArr = []; |
| | | res.data.items.forEach((item) => { |
| | | this.nodeArr.push({ |
| | |
| | | myVectorSource.removeFeature(item); |
| | | }); |
| | | this.initNode(); |
| | | this.initAllNode(); |
| | | this.initAllNode(); */ |
| | | }, |
| | | delPoly() { |
| | | this.$confirm("此操作将删除该区域, 是否继续?", "提示", { |
| | |
| | | this.rangeArr = []; |
| | | } |
| | | |
| | | return; |
| | | return false; |
| | | } |
| | | |
| | | const res = await getHelemtData({ sn: val }); |
| | | |
| | | if (res.msg == "zone") { |
| | | mySelect.getFeatures().clear(); |
| | | const polyArr = this.polyFeature.filter((item) => { |
| | | return item.id == res.data.ID; |
| | | }); |
| | | |
| | | myPolygon = polyArr[0]; |
| | | mySelect.getFeatures().push(polyArr[0]); |
| | | mySelect.dispatchEvent({ |
| | | type: "select", |
| | | selected: [polyArr[0]], |
| | | mapBrowserEvent: { |
| | | coordinate: polyArr[0].data1, |
| | | }, |
| | | }); |
| | | |
| | | return; |
| | | } |
| | | |
| | | const arr = []; |
| | | if (res.data.items && res.data.items.length > 0) { |
| | | res.data.items.forEach((obj) => { |
| | |
| | | } |
| | | |
| | | #polygonInfo { |
| | | position: absolute; |
| | | padding: 10px; |
| | | border: 1px solid; |
| | | color: black; |