xiaoy
/
wxjt-asset-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2023-8-22

Browse Source
master
xy 2 years ago
parent 356567153f
commit c35ccf178e
3 changed files with 406 additions and 118 deletions
Show Stats Download Patch File Download Diff File

2
src/components/XyMap/index.vue
Unescape View File

@ -11,7 +11,7 @@ export default {
value: [String, Object, Array, Number, Boolean],
resultFormat: {
type: [String, Object, Array],
default: () => ['latitude', 'longitude'] //latitude纬度，longitude经度,formattedAddress地址
default: () => ['longitude','latitude'] //latitude纬度，longitude经度,formattedAddress地址
}
},
data() {

2
src/layout/components/AppMain.vue
Unescape View File

@ -28,7 +28,7 @@ export default {
overflow: hidden;
}
.fixed-header+.app-main {
padding: 50px 20px 0 20px;
padding: 50px 20px 20px 20px;
}
</style>

520
src/views/component/map.vue
Unescape View File

@ -1,82 +1,207 @@
<template>
<div>
<div class="search-bar">
<div class="container">
<el-card class="search-bar">
<span class="search-name">区域</span>
<el-select
clearable
style="width: 110px;"
v-model="select.filter[0].value"
size="small"
size="mini"
placeholder="请选择区域"
@change="areaPick"
>
<!-- @change="areaPick"-->
<el-option
v-for="(item, index) in wxAreas"
:value="index + 1"
:label="item"
></el-option>
</el-select>
</div>
<div class="search" v-draggable="(status) => (dragging = status)">
<transition name="fade">
<span class="search-name">地块类型</span>
<el-select
clearable
style="width: 120px;"
v-model="select.filter[2].value"
size="mini"
placeholder="请选择地块类型"
>
<el-option
v-for="(item, index) in dikuaileixingTypes"
:value="item.value"
:label="item.key"
></el-option>
</el-select>
<span class="search-name">建筑类型</span>
<el-select
clearable
style="width: 120px;"
v-model="select.filter[3].value"
size="mini"
placeholder="请选择建筑类型"
>
<el-option
v-for="(item, index) in jianzhuleixingTypes"
:value="item.value"
:label="item.key"
></el-option>
</el-select>
<span class="search-name">资产类型</span>
<el-select
clearable
style="width: 120px;"
v-model="select.filter[4].value"
size="mini"
placeholder="请选择资产类型"
>
<el-option
v-for="(item, index) in zichanleixingTypes"
:value="item.value"
:label="item.key"
></el-option>
</el-select>
<el-button size="mini" type="primary" style="margin-left: 10px;" @click="areaPick">查询</el-button>
</el-card>
<transition name="fade">
<div class="search-list" v-show="searchShow" v-loading="loading">
<div class="search-list__close" @click="searchShow = false">
<i class="el-icon-arrow-right"></i>
</div>
<div
class="search-btn"
v-if="!searchShow"
@click="dragging ? '' : (searchShow = true)"
class="search-list__bar"
>
查询
<Button size="small" type="success" :ghost="select.filter[5].value !== 1" @click="select.filter[5].value = 1,areaPick()">有建筑</Button>
<Button size="small" type="primary" :ghost="select.filter[5].value !== 2" @click="select.filter[5].value = 2,areaPick()">无建筑</Button>
<Button size="small" type="info" :ghost="!!select.filter[5].value" @click="select.filter[5].value = '',areaPick()">全部</Button>
<!-- <RadioGroup v-model="select.filter[5].value" type="button" button-style="solid">-->
<!-- <Radio label="是" :value="1"></Radio>-->
<!-- <Radio label="否" :value="0"></Radio>-->
<!-- <Radio label="全部" value=""></Radio>-->
<!-- </RadioGroup>-->
<!-- <Input-->
<!-- ref="search-input"-->
<!-- v-model="select.filter[1].value"-->
<!-- style="width: 120px; margin-right: 10px"-->
<!-- placeholder="地块名称"-->
<!-- @mousedown="test"-->
<!-- />-->
<!-- <el-select-->
<!-- v-model="select.filter[0].value"-->
<!-- size="small"-->
<!-- style="width: 120px; margin-right: 10px"-->
<!-- placeholder="请选择区域"-->
<!-- >-->
<!-- <el-option-->
<!-- v-for="(item, index) in wxAreas"-->
<!-- :value="index + 1"-->
<!-- :label="item"-->
<!-- ></el-option>-->
<!-- </el-select>-->
<!-- <Button type="primary" @click="$refs['table'].getTableData(true)"-->
<!-- >查询</Button-->
<!-- >-->
</div>
</transition>
<transition name="fade">
<div class="search-list" v-if="searchShow">
<div class="search-list__close" @click="searchShow = false">
<i class="el-icon-arrow-right"></i>
</div>
<ul v-if="list && list.length > 0">
<li v-for="(item,index) in list" :key="item.id" :style="{'border-color': openData.id === item.id ? 'blue' : ''}">
<div class="left">
<p>{{ item.dikuaimingcheng }}</p>
<Tag color="blue" v-if="item.suoshuqu">{{ wxAreas[item.suoshuqu-1] }}</Tag>
<Tag color="cyan" v-if="item.suoshuqu">{{ dikuaileixing(item.dikuaileixing) }}</Tag>
<Tag color="gold" v-if="item.jianzhuleixing">{{ jianzhuleixing(item.jianzhuleixing) }}</Tag>
<Tag color="magenta" v-if="item.zichanleixing">{{ zichanleixing(item.zichanleixing) }}</Tag>
</div>
<div class="right">
<Button type="primary" @click="pickRow({ row:item })">查看</Button>
</div>
</li>
</ul>
<el-empty v-else style="flex: 1;width: 100%;padding: 40px 60px;">
</el-empty>
<!-- <div>-->
<!-- <xy-table-->
<!-- ref="table"-->
<!-- :height="360"-->
<!-- :action="index"-->
<!-- :table-item="table"-->
<!-- :req-opt="selectList"-->
<!-- @row-click="pickRow"-->
<!-- ></xy-table>-->
<!-- </div>-->
</div>
</transition>
<transition name="fade">
<div class="search-list__close close-btn__hidden" v-show="!searchShow" @click="searchShow = true">
<i class="el-icon-arrow-left"></i>
</div>
</transition>
<!-- <div class="search" v-draggable="(status) => (dragging = status)">-->
<!-- <transition name="fade">-->
<!-- <div-->
<!-- class="search-btn"-->
<!-- v-if="!searchShow"-->
<!-- @click="dragging ? '' : (searchShow = true)"-->
<!-- >-->
<!-- 查询-->
<!-- </div>-->
<!-- </transition>-->
<div
style="
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-bottom: 10px;
"
>
<Input
ref="search-input"
v-model="selectList.filter[1].value"
style="width: 120px; margin-right: 10px"
placeholder="地块名称"
@mousedown="test"
/>
<el-select
v-model="selectList.filter[0].value"
size="small"
style="width: 120px; margin-right: 10px"
placeholder="请选择区域"
>
<el-option
v-for="(item, index) in wxAreas"
:value="index + 1"
:label="item"
></el-option>
</el-select>
<Button type="primary" @click="$refs['table'].getTableData(true)"
>查询</Button
>
</div>
<!-- <transition name="fade">-->
<!-- <div class="search-list" v-if="searchShow">-->
<!-- <div class="search-list__close" @click="searchShow = false">-->
<!-- <i class="el-icon-arrow-right"></i>-->
<!-- </div>-->
<!-- <div-->
<!-- style="-->
<!-- display: flex;-->
<!-- justify-content: flex-start;-->
<!-- flex-wrap: wrap;-->
<!-- margin-bottom: 10px;-->
<!-- "-->
<!-- >-->
<!-- <Input-->
<!-- ref="search-input"-->
<!-- v-model="selectList.filter[1].value"-->
<!-- style="width: 120px; margin-right: 10px"-->
<!-- placeholder="地块名称"-->
<!-- @mousedown="test"-->
<!-- />-->
<!-- <el-select-->
<!-- v-model="selectList.filter[0].value"-->
<!-- size="small"-->
<!-- style="width: 120px; margin-right: 10px"-->
<!-- placeholder="请选择区域"-->
<!-- >-->
<!-- <el-option-->
<!-- v-for="(item, index) in wxAreas"-->
<!-- :value="index + 1"-->
<!-- :label="item"-->
<!-- ></el-option>-->
<!-- </el-select>-->
<!-- <Button type="primary" @click="$refs['table'].getTableData(true)"-->
<!-- >查询</Button-->
<!-- >-->
<!-- </div>-->
<!-- <div>-->
<!-- <xy-table-->
<!-- ref="table"-->
<!-- :height="360"-->
<!-- :action="index"-->
<!-- :table-item="table"-->
<!-- :req-opt="selectList"-->
<!-- @row-click="pickRow"-->
<!-- ></xy-table>-->
<!-- </div>-->
<!-- </div>-->
<!-- </transition>-->
<!-- </div>-->
<div>
<xy-table
ref="table"
:height="360"
:action="index"
:table-item="table"
:req-opt="selectList"
@row-click="pickRow"
></xy-table>
</div>
</div>
</transition>
</div>
<div class="map" id="map" :style="{ height: mapHeight + 'px' }"></div>
<div ref="infoWindow" id="infoWindow" v-show="isShowInfoWindow">
@ -108,8 +233,9 @@ export default {
name: "mapList",
data() {
return {
loading: false,
dragging: false,
searchShow: false,
searchShow: true,
selectList: {
table_name: "assets",
filter: [
@ -122,7 +248,7 @@ export default {
key: "dikuaimingcheng",
op: "like",
value: "",
},
}
],
},
select: {
@ -133,6 +259,31 @@ export default {
op: "eq",
value: "",
},
{
key: "dikuaimingcheng",
op: "like",
value: "",
},
{
key: "dikuaileixing",
op: "eq",
value: ""
},
{
key: "jianzhuleixing",
op: "eq",
value: ""
},
{
key: 'zichanleixing',
op: 'eq',
value: ''
},
{
key: 'zichanshifouyoujianzhu',
op: 'eq',
value: ''
}
],
},
customForm: {
@ -175,7 +326,7 @@ export default {
},
index,
areaPick(e) {
this.areaBG(this.wxAreas[e - 1]);
this.areaBG(this.wxAreas[this.select.filter[0].value - 1]);
this.getList().then((res) => {
this.setMapMarker();
});
@ -187,6 +338,7 @@ export default {
let lat, lng;
[lng, lat] = row.zichanweizhi.split(",");
this.map.panTo([lng, lat]);
this.map.setZoom(30);
this.infoWindow.open(this.map, [lng, lat]);
} else {
this.map.panTo(this.center);
@ -194,6 +346,7 @@ export default {
}
},
async getList() {
this.loading = true;
const res = await index({
page: 1,
page_size: 9999,
@ -201,6 +354,7 @@ export default {
});
this.list = res.data;
this.loading = false;
},
addCluster() {
if (this.cluster) {
@ -263,7 +417,7 @@ export default {
};
let markerImg = document.createElement("img");
markerImg.src =
"//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png";
item.zichanshifouyoujianzhu === 1 ? "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png" : "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png";
let markerSpan = document.createElement("span");
markerSpan.setAttribute("class", "map-marker__text");
markerSpan.innerText =
@ -284,14 +438,14 @@ export default {
},
init(adcode = ["320200"]) {
let winHeight = document
.querySelector(".app-main")
.querySelector("#app")
?.getBoundingClientRect()?.height;
this.mapHeight = winHeight - 50 - 20;
this.mapHeight = winHeight - 50 - 20 - 20;
this.map = new AMap.Map("map", {
center: this.center,
mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", // 设置地图的显示样式
zoom: this.zoom,
zoom: 15,
});
// 行政区域加载
this.areaBG(adcode);
@ -305,7 +459,7 @@ export default {
});
},
// 加载
areaBG(adcode) {
areaBG(adcode = ["320200"]) {
AMap.service("AMap.DistrictSearch", () => {
let opts = {
subdistrict: 1, // 返回下一级行政区
@ -322,7 +476,7 @@ export default {
this.map.remove(this.polygons);
this.polygons = [];
// 获取边界信息
let bounds = result.districtList[0].boundaries;
let bounds = result.districtList[0]?.boundaries;
if (bounds) {
for (let i = 0, l = bounds.length; i < l; i++) {
// 生成行政区划polygon
@ -558,6 +712,30 @@ export default {
return this.openData[i.field] || "/";
};
},
dikuaileixing () {
return function (dikuaileixing) {
return this.form.find(j => j.field === 'dikuaileixing')?._params.find(i => i.value == dikuaileixing)?.key || ''
}
},
dikuaileixingTypes () {
return this.form.find(j => j.field === 'dikuaileixing')?._params || []
},
jianzhuleixing () {
return function (jianzhuleixing) {
return this.form.find(j => j.field === 'jianzhuleixing')?._params.find(i => i.value == jianzhuleixing)?.key || ''
}
},
jianzhuleixingTypes () {
return this.form.find(j => j.field === 'jianzhuleixing')?._params || []
},
zichanleixing () {
return function (zichanleixing) {
return this.form.find(j => j.field === 'zichanleixing')?._params.find(i => i.value == zichanleixing)?.key || ''
}
},
zichanleixingTypes () {
return this.form.find(j => j.field === 'zichanleixing')?._params || []
},
},
created() {
this.getFormDetail();
@ -573,69 +751,175 @@ export default {
</script>
<style scoped lang="scss">
.container {
position: relative;
}
::v-deep .el-card__body {
padding: 8px;
}
.search-bar {
padding: 10px 0;
.search-name {
zoom: .9;
padding: 0 10px;
}
z-index: 2;
position: absolute;
top: 8px;
left: 8px;
}
.close-btn__hidden {
filter: drop-shadow(2px 2px 5px #00000033);
z-index: 2;
position: absolute;
right: 0;
left: unset!important;
top: 8px;
}
.search {
min-width: 50px;
min-height: 50px;
position: fixed;
top: 115px;
left: 85px;
z-index: 99;
&-btn {
color: #fff;
width: 50px;
height: 50px;
background: $primaryColor;
filter: drop-shadow(2px 2px 5px #000000aa);
transition: all 0.3s;
border-radius: 50px;
.search-list {
background-color: #ebeef6;
max-height: calc(100% - 16px);
min-height: 200px;
max-width: 355px;
border-radius: 6px;
filter: drop-shadow(2px 2px 5px #00000055);
display: flex;
flex-direction: column;
//padding: 10px;
z-index: 2;
position: absolute;
right: 8px;
top: 8px;
&__bar {
background-color: #fff;
display: flex;
border-radius: 6px 6px 0 0;
justify-content: center;
flex-wrap: wrap;
padding: 8px 10px;
Button {
flex: 1;
}
}
&__close {
zoom: 0.85;
width: 40px;
height: 40px;
border-radius: 40px 0 0 40px;
text-align: center;
line-height: 50px;
line-height: 40px;
font-size: 22px;
background: #ebeef6;
cursor: pointer;
font-weight: bold;
position: absolute;
top: 0;
left: 0;
&:hover {
transform: scale(1.1, 1.1);
}
top: 76px;
left: -30px;
}
&-list {
max-width: 560px;
border-radius: 6px;
filter: drop-shadow(2px 2px 5px #00000055);
background: #fff;
ul {
flex: 1;
overflow-y: scroll;
padding: 10px;
position: relative;
&__close {
zoom: 0.85;
width: 40px;
height: 40px;
border-radius: 40px 0 0 40px;
text-align: center;
line-height: 40px;
font-size: 22px;
background: #fff;
cursor: pointer;
transform: translateY(-50%);
position: absolute;
top: 10%;
left: -24px;
&::-webkit-scrollbar {
width: 4px;
}
li {
border-color: #0000;
border-width: 1px;
border-style: solid;
border-radius: 4px;
background-color: #fff;
list-style: none;
filter: drop-shadow(2px 2px 5px #00000022);
display: flex;
padding: 8px;
.left {
flex: 1;
margin-right: 20px;
& > p {
font-weight: 600;
}
}
& + li {
margin-top: 10px;
}
}
}
}
//.search {
// min-width: 50px;
// min-height: 50px;
// position: fixed;
// top: 115px;
// left: 85px;
// z-index: 99;
//
// &-btn {
// color: #fff;
// width: 50px;
// height: 50px;
// background: $primaryColor;
// filter: drop-shadow(2px 2px 5px #000000aa);
// transition: all 0.3s;
// border-radius: 50px;
// text-align: center;
// line-height: 50px;
// cursor: pointer;
// font-weight: bold;
//
// position: absolute;
// top: 0;
// left: 0;
// &:hover {
// transform: scale(1.1, 1.1);
// }
// }
//
// &-list {
// max-width: 560px;
// border-radius: 6px;
// filter: drop-shadow(2px 2px 5px #00000055);
// background: #fff;
//
// padding: 10px;
// position: relative;
//
// &__close {
// zoom: 0.85;
// width: 40px;
// height: 40px;
// border-radius: 40px 0 0 40px;
// text-align: center;
// line-height: 40px;
// font-size: 22px;
// background: #fff;
// cursor: pointer;
// transform: translateY(-50%);
//
// position: absolute;
// top: 10%;
// left: -24px;
// }
// }
//}
#map {
border-radius: 4px;
filter: drop-shadow(2px 2px 5px #00000033);
margin-top: 20px;
}
.fade-enter-active {
@ -644,9 +928,11 @@ export default {
@keyframes fade-in {
0% {
transform: translateX(200px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
@ -656,9 +942,11 @@ export default {
@keyframes fade-out {
0% {
transform: translateX(0px);
opacity: 1;
}
100% {
transform: translateX(200px);
opacity: 0;
}
}

Write Preview
Loading…
Cancel
Save