You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
449 lines
12 KiB
449 lines
12 KiB
<template>
|
|
<div>
|
|
<div class="map" id="map" :style="{'height':mapHeight+'px'}">
|
|
<div class="tabs">
|
|
<div :class="!addCur?'tabcur':''" @click="changeMask(1)">抢险队伍</div>
|
|
<div :class="addCur?'tabcur':''" @click="changeMask(2)">防汛仓库</div>
|
|
</div>
|
|
</div>
|
|
<div ref='infoWindow' id="infoWindow">
|
|
<div class="iconClose">
|
|
<i @click='closeWin' class="el-icon-close"></i>
|
|
</div>
|
|
<div v-for="item in openData">
|
|
<template v-if="item.type=='teams'">
|
|
<div class="teams">
|
|
<p>名称：<span>{{item.mingcheng}}</span></p>
|
|
<p>负责人：<span>{{item.fuzeren?item.fuzeren:''}}</span></p>
|
|
<p>联系电话：<span>{{item.lianxidianhua?item.lianxidianhua:''}}</span></p>
|
|
<p>队长：<span>{{item.duizhang?item.duizhang:''}}</span></p>
|
|
<p>人数：<span>{{item.renshu?item.renshu:''}}</span></p>
|
|
</div>
|
|
|
|
</template>
|
|
<template v-if="item.type=='storages'">
|
|
<div class="storages">
|
|
<div>
|
|
<div>
|
|
<p>名称：<span>{{item.cangkumingcheng}}</span></p>
|
|
<p>所在区域：<span>{{item.suozaiquyu?item.suozaiquyu:''}}</span></p>
|
|
</div>
|
|
<div>
|
|
<p>建设年代：<span>{{item.jiansheniandai?item.jiansheniandai:''}}</span></p>
|
|
<p>仓库面积：<span>{{item.cangkumianji?item.cangkumianji:''}}</span></p>
|
|
</div>
|
|
<div>
|
|
<p>负责人：<span>{{item.fuzeren?item.fuzeren:''}}</span></p>
|
|
<p>联系电话：<span>{{item.lianxidianhua?item.lianxidianhua:''}}</span></p>
|
|
</div>
|
|
<div>
|
|
<p>仓库现存物资：<span>{{total?total:0}}</span>项</p>
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
<xy-table :list="materList" :height="300" :isPage="false" v-loading="loading" :table-item="table">
|
|
<template v-slot:btns>
|
|
<div></div>
|
|
</template>
|
|
|
|
</xy-table>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
index,
|
|
destroy
|
|
} from "@/api/system/baseForm.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
zoom: 10,
|
|
center: [120.585294, 31.299758],
|
|
mapHeight: 0,
|
|
map: null,
|
|
markerList: [],
|
|
makerObj: {
|
|
teams: [],
|
|
storages: []
|
|
},
|
|
infoWindow: null,
|
|
openData: [],
|
|
materList: [],
|
|
loading: true,
|
|
total: 0,
|
|
addCur: false,
|
|
loadingFull:null,
|
|
table: [{
|
|
label: '序号',
|
|
type: 'index',
|
|
fixed: 'left',
|
|
width: 80
|
|
},
|
|
// {
|
|
// label: "关联仓库",
|
|
// width: 120,
|
|
// prop: 'guanliancangku',
|
|
// align: 'center',
|
|
// },
|
|
// {
|
|
// label: "仓库名称",
|
|
// width: 220,
|
|
// prop: 'cangkumingcheng',
|
|
// align: 'left',
|
|
// },
|
|
{
|
|
label: "物资代码",
|
|
width: 120,
|
|
prop: 'wuzidaima',
|
|
align: 'left'
|
|
},
|
|
{
|
|
label: "现物资名称",
|
|
width: 120,
|
|
prop: 'xianwuzimingcheng',
|
|
align: 'center'
|
|
},
|
|
{
|
|
label: "原物资名称",
|
|
width: 120,
|
|
prop: 'yuanwuzimingcheng',
|
|
align: 'left'
|
|
},
|
|
{
|
|
label: "规格型号",
|
|
width: 120,
|
|
prop: 'guigexinghao',
|
|
align: 'center'
|
|
},
|
|
{
|
|
label: "数量",
|
|
width: 80,
|
|
prop: 'shuliang',
|
|
align: 'center'
|
|
},
|
|
{
|
|
label: "单位",
|
|
width: 80,
|
|
prop: 'danwei',
|
|
align: 'center'
|
|
},
|
|
{
|
|
label: "价值（元）",
|
|
width: 80,
|
|
prop: 'jiazhiyuan',
|
|
align: 'center'
|
|
},
|
|
{
|
|
label: "生产日期",
|
|
width: 120,
|
|
prop: 'shengchanriqi',
|
|
align: 'center'
|
|
},
|
|
{
|
|
label: "入库日期",
|
|
width: 120,
|
|
prop: 'rukuriqi',
|
|
align: 'center'
|
|
},
|
|
{
|
|
label: "储备年限",
|
|
width: 80,
|
|
prop: 'chubeinianxian',
|
|
align: 'center'
|
|
},
|
|
{
|
|
label: "状态",
|
|
width: 80,
|
|
prop: 'zhuangtai',
|
|
align: 'center'
|
|
},
|
|
{
|
|
label: "资金来源",
|
|
width: 120,
|
|
prop: 'zijinlaiyuan',
|
|
align: 'center'
|
|
},
|
|
{
|
|
label: "储备方式",
|
|
width: 120,
|
|
prop: 'chubeifangshi',
|
|
align: 'center'
|
|
},
|
|
{
|
|
label: "储备地点",
|
|
width: 180,
|
|
prop: 'chubeididian',
|
|
align: 'left'
|
|
},
|
|
{
|
|
label: "备注",
|
|
width: 180,
|
|
prop: 'beizhu',
|
|
align: 'left'
|
|
},
|
|
{
|
|
label: "储备层级",
|
|
width: 120,
|
|
prop: 'chubeicengji',
|
|
align: 'left'
|
|
},
|
|
{
|
|
label: "是否展示",
|
|
width: 120,
|
|
prop: 'shifouzhanshi',
|
|
align: 'left'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
created() {
|
|
this.initHeight()
|
|
this.$nextTick(function() {
|
|
this.mapInit()
|
|
})
|
|
},
|
|
methods: {
|
|
initHeight() {
|
|
let winHeight = document.body.clientHeight
|
|
this.mapHeight = winHeight - 50 - 20
|
|
},
|
|
mapInit() {
|
|
this.loadingFull = this.$loading({
|
|
lock: true,
|
|
text: '',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
this.map = new AMap.Map("map", {
|
|
center: this.center,
|
|
mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", // 设置地图的显示样式
|
|
zoom: this.zoom
|
|
});
|
|
|
|
|
|
this.infoWindow = new AMap.InfoWindow({
|
|
isCustom: true,
|
|
autoMove: true,
|
|
avoid: [20, 20, 20, 20],
|
|
content: this.$refs.infoWindow,
|
|
closeWhenClickMap: true,
|
|
offset: new AMap.Pixel(-10, -10)
|
|
})
|
|
this.getTeams()
|
|
this.getStorages()
|
|
// this.setMapMarker()
|
|
},
|
|
changeMask(type) {
|
|
if (type == 1) {
|
|
this.addCur = false
|
|
this.setMapMarker("teams", this.makerObj.teams)
|
|
} else if (type == 2) {
|
|
this.addCur = true
|
|
this.setMapMarker("storages", this.makerObj.storages)
|
|
}
|
|
},
|
|
async getTeams() {
|
|
await index({
|
|
page: 1,
|
|
page_size: 9999,
|
|
table_name: 'teams'
|
|
}).then(res => {
|
|
let markers = []
|
|
if (res.data.length < 1) {
|
|
return
|
|
}
|
|
res.data.map(item => {
|
|
this.makerObj.teams.push({
|
|
type: 'teams',
|
|
name: item.mingcheng,
|
|
...item
|
|
})
|
|
})
|
|
this.setMapMarker("teams", this.makerObj.teams)
|
|
})
|
|
},
|
|
async getStorages() {
|
|
await index({
|
|
page: 1,
|
|
page_size: 9999,
|
|
table_name: 'flood_storages'
|
|
}).then(res => {
|
|
let markers = []
|
|
if (res.data.length < 1) {
|
|
return
|
|
}
|
|
res.data.map(item => {
|
|
this.makerObj.storages.push({
|
|
type: 'storages',
|
|
name: item.cangkumingcheng,
|
|
...item
|
|
})
|
|
})
|
|
this.loadingFull.close();
|
|
})
|
|
},
|
|
async getMater(id) {
|
|
|
|
const res = await index({
|
|
page: 1,
|
|
page_size: 9999,
|
|
table_name: "flood_materials",
|
|
filter: [{
|
|
"key": "guanliancangku",
|
|
"op": "eq",
|
|
"value": id
|
|
}],
|
|
})
|
|
this.materList = res.data
|
|
this.total = res.total
|
|
this.loading = false
|
|
},
|
|
// 增加点位
|
|
setMapMarker(type, arr) {
|
|
var that = this
|
|
console.log(type, arr)
|
|
this.markerList.forEach(marker => marker.setMap(null));
|
|
this.markerList = []
|
|
arr.forEach((item, index) => {
|
|
// 遍历生成多个标记
|
|
if (!item.jingdu || !item.weidu) {
|
|
return
|
|
}
|
|
|
|
let marker = new AMap.Text({
|
|
map: this.map,
|
|
text: item.name,
|
|
zIndex: 9999999,
|
|
offset: new AMap.Pixel(-13, -30),
|
|
position: [parseFloat(item.jingdu), parseFloat(item.weidu)],
|
|
clickable: true,
|
|
extData: item.id,
|
|
style: {
|
|
'border': item.type === 'teams' ? '1px solid red' : '1px solid blue',
|
|
'padding': '0px 5px'
|
|
}
|
|
})
|
|
marker.on('click', (e) => {
|
|
this.openData = []
|
|
this.loading = true
|
|
this.total = 0
|
|
this.materList = []
|
|
if (e.target.w.extData === item.id) {
|
|
this.openData.push(item)
|
|
if (item.type == 'storages') {
|
|
this.getMater(item.id)
|
|
}
|
|
}
|
|
this.infoWindow.open(this.map, e.target.getPosition())
|
|
})
|
|
// if(item.type == 'storages'){
|
|
// this.makerObj.storages.push(marker)
|
|
// }else{
|
|
// this.makerObj.teams.push(marker)
|
|
// }
|
|
this.markerList.push(marker)
|
|
});
|
|
console.log("this.makerObj", this.makerObj)
|
|
// this.map.add(this.makerObj['teams'])
|
|
},
|
|
closeWin() {
|
|
|
|
this.infoWindow.close()
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.tabs {
|
|
position: absolute;
|
|
z-index: 99;
|
|
top: 20px;
|
|
right: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.tabs>div {
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
background-color: #fff;
|
|
color: #333;
|
|
}
|
|
|
|
.tabs>div:first-child {
|
|
border-radius: 20px 0 0 20px;
|
|
|
|
}
|
|
|
|
.tabs>div:last-child {
|
|
border-radius: 0 20px 20px 0;
|
|
|
|
}
|
|
|
|
.tabs>div.tabcur {
|
|
background: #0077CC;
|
|
color: #fff
|
|
}
|
|
|
|
#infoWindow {
|
|
position: relative;
|
|
}
|
|
|
|
#infoWindow .iconClose {
|
|
background: #000;
|
|
border: none;
|
|
padding: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 20px;
|
|
color: #fff;
|
|
text-align: center;
|
|
position: absolute;
|
|
right: -10px;
|
|
top: -10px;
|
|
}
|
|
|
|
#infoWindow>div {
|
|
background: #fff;
|
|
border: 1px solid red;
|
|
padding: 10px;
|
|
}
|
|
|
|
#infoWindow div.teams {
|
|
width: 180px;
|
|
}
|
|
|
|
#infoWindow div.storages {
|
|
width: 650px;
|
|
}
|
|
|
|
#infoWindow div.storages>div:first-child {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#infoWindow div.storages>div:first-child div {
|
|
width: 50%
|
|
}
|
|
|
|
/deep/ #infoWindow .el-icon-close {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|