<!--suppress ALL -->
<template>
<div>
<div class="overview-map-container">
<!--地图-->
<a-map-container ref="map" :center="center" :zoom="zoom" :base-layer="baseLayer" :style="{height:(bodyHeight-50)+'px'}" vid="overview" class="map-demo" @ready="mapReady">
</a-map-container>
<div class="pipe-btns">
<el-button type="primary" icon="el-icon-plus" circle style="font-size: 20px;padding: 5px;" @click="addPipe"/>
<div/>
<el-button type="warning" icon="el-icon-s-open" circle style="font-size: 20px;padding: 5px;margin-top: 10px" @click="clearPipe"/>
</div>
<div class="info-box" v-show="isShowTable">
<i class="el-icon-error" style="cursor: pointer;position: absolute;right: 10px;font-size: 20px;color: #3f9dfe" @click="isShowTable=false"></i>
<div style="font-weight: bold;margin: 10px 0px">关阀分析</div>
<div style="margin-left: 10px">共找到上游阀门
<span style="font-weight: bold">{{list.filter(item => item.valveType === '上游').length}}</span> 个，下游阀门
<span style="font-weight: bold">{{list.filter(item => item.valveType === '下游').length}}</span> 个，其他
<span style="font-weight: bold">{{list.filter(item => item.valveType === '其他').length}}</span> 个
</div>
<el-table :data="list" border size="small" height="220px" class="table" style="width: 380px">
<el-table-column type="index" width="50" align="center" label="序号"/>
<el-table-column prop="valveCode" align="center" label="阀 门"/>
<el-table-column prop="valveType" align="center" width="80" label="阀门类型"/>
<el-table-column fixed="right" align="center" width="80" label="操作">
<template slot-scope="scope">
<el-button @click="flyTo(scope.row)" type="text" size="small">定位</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import {appList, getAreasByValve, getValvesByPipe} from '@/api/overview/wellOverview'
import AMapContainer from '@/components/Amap/AMapContainer'
import xlInfoWindow from './components/infoWindowXl'
import Vue from 'vue'
import {toLngLat} from "@/components/Amap/utils/convert-helper";
export default {
name: 'Overview',
components: { AMapContainer },
data() {
return {
arcgisUrl: "http://111.198.10.15:13002/arcgis/rest/services/zq_publish/MapServer",
total: 0,
list: [],
isShowTable: false,
isClick: false,
baseLayer: 'gaode_vec', // 底图图层
checkedLayer: [], // 选中的图层
clearList: [],
center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
zoom: 12, // 地图缩放比例
type: this.baseConfig.showPointType, // 加载数据方式：massMarkers海量点或cluster聚合点
refreshType: this.baseConfig.refreshType, // 刷新数据方式：clock定时器或websocket推送
alarmIcon: require('@/assets/icons/icon-alarm1.png'), // 报警图标
alarmIconSize: [30, 30], // 报警图标大小
alarmOffset: [-15, -30], // 报警图标偏移量
wellIcon: require('@/assets/overview/icon-location-small.png'), // 井图标
wellIconSize: [16, 16], // 井图标大小
wellOffset: [-8, -16], // 井偏移量
massMarkerUrl: './static/overview/icon-location-small.png',
}
},
computed: {
...mapGetters([
'needRefresh',
'bodyHeight'
])
},
mounted() {
this.resultList = []
},
methods: {
// 初始化放这里
mapReady(map) {
window.map = map
const that = this
const icon = new AMap.Icon({
size: new AMap.Size(30, 30), // 图标尺寸
image: require('@/assets/icons/阀门.png'),
imageSize: new AMap.Size(30, 30) // 根据所设置的大小拉伸或压缩图片
})
appList().then(response => {
if (response.code === 200) {
response.data.forEach((item,index) => {
var polyline = new AMap.Polyline({
// path: [new AMap.LngLat(item.startLongitudeGd, item.startLatitudeGd), new AMap.LngLat(item.endLongitudeGd, item.endLatitudeGd)],
path: [[item.startLongitudeGd, item.startLatitudeGd], [item.endLongitudeGd, item.endLatitudeGd]],
// borderWeight: 1, // 线条宽度，默认为 1
strokeWeight: 4,
strokeColor: '#ff4bde', // 线条颜色
extData: item
});
polyline.on('click', function (e) {
if(that.isClick) {
let marker = new AMap.Marker({
position: new AMap.LngLat( e.lnglat.lng, e.lnglat.lat),
extData: e.target._opts.extData
})
marker.on('click', function (ex) {
that.list = []
that.total = 0
getValvesByPipe(ex.target._opts.extData.pipeCode).then(res => {
if (res.code === 200) {
that.list = res.data
that.total = res.data.length
that.isShowTable = true
res.data.forEach(point => {
let door = new AMap.Marker({
position: new AMap.LngLat( point.longitude, point.latitude ),
extData: point,
icon: icon, // 添加 Icon 实例
offset: new AMap.Pixel(-15, -15),
})
door.on('click', function (door_e) {
getAreasByValve(door_e.target._opts.extData.valveCode).then(re => {
const xlInfo = re.data
const XlWindow = Vue.extend({
render: h => h(xlInfoWindow, {
props: { xlInfo: xlInfo },
on: {
area: function (params) {
console.log(re)
re.data.forEach(block => {
const path = block.positions.map(item => new AMap.LngLat(item.longitude, item.latitude))
console.log(path)
// 多边形
let polygon = new AMap.Polygon({
path: path, //路径
fillColor: '#ffd079', //多边形填充颜色
strokeWeight: 2, //线条宽度，默认为 2
strokeColor: "#d59200", //线条颜色
fillOpacity: 0.5
});
map.add(polygon)
map.setCenter([block.positions[0].longitude , block.positions[0].latitude])
that.clearList.push(polygon)
})
},
}
})
})
const xlWindow = new XlWindow().$mount()
const infoWindow = new window.AMap.InfoWindow({
content: xlWindow .$el, // 显示内容
offset: [0, -16], // 偏移
autoMove: true // 是否自动调整窗体到视野内
})
infoWindow.open(window.map, new toLngLat([door_e.target._opts.extData.longitude, door_e.target._opts.extData.latitude]))
})
})
map.add(door)
that.clearList.push(door)
})
}
})
})
that.clearList.push(marker)
map.add(marker)
}
})
map.add(polyline);
})
}
})
},
flyTo(row) {
window.map.setCenter([row.longitude, row.latitude])
},
addPipe() {
this.isClick = true
},
clearPipe() {
this.clearList.forEach(item => {
window.map.remove(item)
})
this.clearList = []
this.isShowTable = false
this.list = []
this.total = 0
window.map.clearInfoWindow()
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
// 查询框
.map-search-div{
position: absolute;
z-index: 100;
padding: 5px 20px;
background-color: rgba(244, 244, 244, 0.9);
/*left: 90px;*/
.el-form-item{
margin-bottom: 0px;
}
}
// 刷新框
.function-div{
position: absolute;
right: 10px;
top: 7px;
z-index: 1100;
padding: 10px;
color: #ce8b74;
font-size: 14px;
/*background-color: rgba(244, 233, 230, 1.0);*/
.font-red{
color: red;
font-weight: bold;
}
.el-icon-refresh:hover{
color: red;
font-weight: bold;
cursor: pointer;
}
}
// 刷新框
.refresh-div{
position: absolute;
right: 10px;
top: 7px;
z-index: 100;
padding: 10px;
color: #ce8b74;
font-size: 14px;
background-color: rgba(244, 233, 230, 1.0);
.font-red{
color: red;
font-weight: bold;
}
.el-icon-refresh:hover{
color: red;
font-weight: bold;
cursor: pointer;
}
}
// 地图
.overview-map-container{
width: 100%;
.map-demo{
width: 100%;
.svg-icon{
width: 20px;
height: 20px;
}
.alarm-icon{
width: 29px;
height: 30px;
}
.nomal-info-window{
background-color: pink;
}
}
}
.search-marker{
position: relative;
.search-marker-image{
width: 100%;
height: 100%;
}
.search-marker-label{
position:absolute;
font-size: 14px;
font-weight: 600;
color:#FFF;
z-index:50;
top: 4px;
left: 50%;
transform: translateX(-50%)
}
}
.pipe-btns {
position: absolute;
right: 10px;
top: 10px;
}
.info-box {
position: absolute;
left: 10px;
top: 10px;
border-radius: 10px;
width: 400px;
height: 300px;
overflow: hidden;
background: rgba(255, 255, 255, 0.9);
border: 1px soilder #ababab;
box-shadow: 0 0 8px #7a7a7a;
z-index: 999999;
padding: 10px;
}
</style>
