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.
1111 lines
31 KiB
1111 lines
31 KiB
<template>
|
|
<div class="container">
|
|
<el-card class="statics">
|
|
<div class="statics-item">
|
|
<p class="statics-item__title">面积总量</p>
|
|
<p class="statics-item__num">{{ list.reduce((a,b) => a + Number(b.dikuaimianji),0) }} 平方</p>
|
|
</div>
|
|
<div class="statics-item">
|
|
<p class="statics-item__title">资产总量</p>
|
|
<p class="statics-item__num">{{ total }} 处</p>
|
|
</div>
|
|
<div class="statics-item">
|
|
<p class="statics-item__title">闲置面积</p>
|
|
<p class="statics-item__num">{{ Math.round(Math.random()*5000+5000) }} 平方</p>
|
|
</div>
|
|
<div class="statics-item">
|
|
<p class="statics-item__title">租聘面积</p>
|
|
<p class="statics-item__num">{{ list.reduce((a,b) => a + Number(b.jianzhumianji || 0),0) }} 平方</p>
|
|
</div>
|
|
<div class="statics-item">
|
|
<p class="statics-item__title">公益产业</p>
|
|
<p class="statics-item__num">{{ Math.round(Math.random()*5000+5000) }} 平方</p>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-card class="search-bar">
|
|
<span class="search-name">区域</span>
|
|
<el-select
|
|
clearable
|
|
style="width: 110px;"
|
|
v-model="select.filter[0].value"
|
|
size="mini"
|
|
placeholder="请选择区域"
|
|
>
|
|
<!-- @change="areaPick"-->
|
|
<el-option
|
|
v-for="(item, index) in wxAreas"
|
|
:value="index + 1"
|
|
:label="item"
|
|
></el-option>
|
|
</el-select>
|
|
|
|
<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-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>
|
|
<el-input size="mini" style="margin-top: 4px;" placeholder="请输入地块名称" v-model="select.filter[1].value" clearable>
|
|
<el-button type="primary" slot="append" icon="el-icon-search" @click="areaPick"></el-button>
|
|
</el-input>
|
|
<!-- <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>
|
|
|
|
<p style="zoom: .9;text-align: center;padding: 4px 0;font-weight: 600;">总共 {{total}} 条</p>
|
|
<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>-->
|
|
|
|
<!-- <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 class="map" id="map" :style="{ height: mapHeight + 'px' }"></div>
|
|
|
|
<div ref="infoWindow" id="infoWindow" v-show="isShowInfoWindow">
|
|
<el-scrollbar style="height: 260px; width: 100%">
|
|
<div class="infoWindow-container">
|
|
<div class="infoWindow-container__item" v-for="item in form">
|
|
<p>{{ item.name }}</p>
|
|
<p>{{ contentFormat(item) }}{{ units.get(item.field) }}</p>
|
|
</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
|
|
<p
|
|
class="to-detail"
|
|
@click="$router.push('/assetsDetail?id=' + openData.id)"
|
|
>
|
|
查看详情
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { index } from "@/api/system/baseForm";
|
|
import { show } from "@/api/system/customForm";
|
|
import { listdept } from "@/api/system/department";
|
|
import { getparameter } from "@/api/system/dictionary";
|
|
export default {
|
|
name: "mapList",
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
dragging: false,
|
|
searchShow: true,
|
|
selectList: {
|
|
table_name: "assets",
|
|
filter: [
|
|
{
|
|
key: "suoshuqu",
|
|
op: "eq",
|
|
value: "",
|
|
},
|
|
{
|
|
key: "dikuaimingcheng",
|
|
op: "like",
|
|
value: "",
|
|
}
|
|
],
|
|
},
|
|
select: {
|
|
table_name: "assets",
|
|
filter: [
|
|
{
|
|
key: "suoshuqu",
|
|
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: {
|
|
customFormId: "",
|
|
tableName: "",
|
|
},
|
|
form: [],
|
|
total: 0,
|
|
table: [],
|
|
list: [],
|
|
mapHeight: 0,
|
|
center: [120.283692, 31.614211],
|
|
isShowInfoWindow: false,
|
|
openData: {},
|
|
infoWindow: null,
|
|
district: null,
|
|
cluster: null,
|
|
polygons: [],
|
|
markerList: [],
|
|
wxAreas: [
|
|
"宜兴市",
|
|
"惠山区",
|
|
"新吴区",
|
|
"梁溪区",
|
|
"江阴市",
|
|
"滨湖区",
|
|
"锡山区",
|
|
],
|
|
units: new Map([
|
|
["jianzhumianji", "m²"],
|
|
["jianzhugaodu", "m"],
|
|
["dikuaizongjia", "元"],
|
|
["dikuaimianji", "m²"],
|
|
["muqianjunjia", "元"],
|
|
]),
|
|
};
|
|
},
|
|
methods: {
|
|
index,
|
|
areaPick(e) {
|
|
this.areaBG(this.wxAreas[this.select.filter[0].value - 1]);
|
|
this.getList().then((res) => {
|
|
this.setMapMarker();
|
|
});
|
|
},
|
|
pickRow({ row }) {
|
|
this.isShowInfoWindow = true;
|
|
this.openData = row;
|
|
if (row.zichanweizhi) {
|
|
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);
|
|
this.infoWindow.open(this.map, this.center);
|
|
}
|
|
},
|
|
async getList() {
|
|
this.loading = true;
|
|
const res = await index({
|
|
page: 1,
|
|
page_size: 9999,
|
|
...this.select,
|
|
});
|
|
this.total = res.total;
|
|
this.list = res.data;
|
|
this.loading = false;
|
|
},
|
|
addCluster() {
|
|
if (this.cluster) {
|
|
this.cluster.setMap(null);
|
|
}
|
|
this.cluster = new AMap.MarkerClusterer(this.map, this.markerList, {
|
|
gridSize: 50, // 设置网格像素大小
|
|
renderClusterMarker: this.renderClusterMarker, // 自定义聚合点样式
|
|
renderMarker: this.renderMarker, // 自定义非聚合点样式
|
|
});
|
|
},
|
|
renderClusterMarker(context) {
|
|
let factor = Math.pow(context.count / this.list.length, 1 / 18);
|
|
let div = document.createElement("div");
|
|
let Hue = 180 - factor * 180;
|
|
let bgColor = "hsla(" + Hue + ",100%,40%,0.7)";
|
|
let fontColor = "hsla(" + Hue + ",100%,90%,1)";
|
|
let borderColor = "hsla(" + Hue + ",100%,40%,1)";
|
|
let shadowColor = "hsla(" + Hue + ",100%,90%,1)";
|
|
div.style.backgroundColor = bgColor;
|
|
let size = Math.round(
|
|
30 + Math.pow(context.count / this.list.length, 1 / 5) * 20
|
|
);
|
|
div.style.width = div.style.height = size + "px";
|
|
div.style.border = "solid 1px " + borderColor;
|
|
div.style.borderRadius = size / 2 + "px";
|
|
div.style.boxShadow = "0 0 5px " + shadowColor;
|
|
div.innerHTML = context.count;
|
|
div.style.lineHeight = size + "px";
|
|
div.style.color = fontColor;
|
|
div.style.fontSize = "14px";
|
|
div.style.textAlign = "center";
|
|
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
|
|
context.marker.setContent(div);
|
|
},
|
|
renderMarker(context) {
|
|
let content =
|
|
'<div style="background-color: hsla(180, 100%, 50%, 0.3); height: 18px; width: 18px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 3px;"></div>';
|
|
let offset = new AMap.Pixel(-9, -9);
|
|
context.marker.setContent(content);
|
|
context.marker.setOffset(offset);
|
|
},
|
|
setMapMarker() {
|
|
this.map.remove(this.markerList);
|
|
this.markerList = [];
|
|
|
|
this.list.forEach((item) => {
|
|
if (item.zichanweizhi) {
|
|
let lat, lng;
|
|
[lng, lat] = item.zichanweizhi.split(",");
|
|
let marker = new AMap.Marker({
|
|
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
|
|
position: [Number(lng), Number(lat)],
|
|
offset: new AMap.Pixel(-13, -30),
|
|
});
|
|
let markerContent = document.createElement("div");
|
|
markerContent.setAttribute("class", "map-marker");
|
|
markerContent.onclick = () => {
|
|
this.pickRow({ row: item });
|
|
};
|
|
let markerImg = document.createElement("img");
|
|
markerImg.src =
|
|
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 =
|
|
item.dikuaimingcheng.length > 4
|
|
? item.dikuaimingcheng.slice(0, 2) +
|
|
".." +
|
|
item.dikuaimingcheng.slice(item.dikuaimingcheng.length - 2)
|
|
: item.dikuaimingcheng;
|
|
markerContent.appendChild(markerImg);
|
|
markerContent.appendChild(markerSpan);
|
|
marker.setContent(markerContent);
|
|
this.markerList.push(marker);
|
|
}
|
|
});
|
|
this.map.add(this.markerList);
|
|
|
|
this.addCluster();
|
|
},
|
|
init(adcode = ["320200"]) {
|
|
let winHeight = document
|
|
.querySelector("#app")
|
|
?.getBoundingClientRect()?.height;
|
|
this.mapHeight = winHeight - 50 - 20 - 20;
|
|
|
|
this.map = new AMap.Map("map", {
|
|
center: this.center,
|
|
mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", // 设置地图的显示样式
|
|
zoom: 15,
|
|
});
|
|
// 行政区域加载
|
|
this.areaBG(adcode);
|
|
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.map.on('click',e => {
|
|
console.log(e)
|
|
})
|
|
},
|
|
// 加载
|
|
areaBG(adcode = ["320200"]) {
|
|
AMap.service("AMap.DistrictSearch", () => {
|
|
let opts = {
|
|
subdistrict: 1, // 返回下一级行政区
|
|
extensions: "all", // 返回行政区边界坐标组等具体信息
|
|
level: "city", // 查询行政级别为市
|
|
// adcode:'320200'
|
|
};
|
|
// 实例化DistrictSearch
|
|
let district = new AMap.DistrictSearch(opts);
|
|
district.setLevel("district");
|
|
// 行政区查询
|
|
district.search(`${adcode}`, (status, result) => {
|
|
//清空
|
|
this.map.remove(this.polygons);
|
|
this.polygons = [];
|
|
// 获取边界信息
|
|
let bounds = result.districtList[0]?.boundaries;
|
|
if (bounds) {
|
|
for (let i = 0, l = bounds.length; i < l; i++) {
|
|
// 生成行政区划polygon
|
|
let polygon = new AMap.Polygon({
|
|
map: this.map,
|
|
strokeWeight: 1,
|
|
path: bounds[i],
|
|
fillOpacity: 0.2,
|
|
fillColor: "#3579c788",
|
|
strokeColor: "#3579c7",
|
|
});
|
|
polygon.on('click',e => {
|
|
console.log('polygon',e)
|
|
})
|
|
this.polygons.push(polygon);
|
|
this.map.setFitView(polygon);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
},
|
|
|
|
async getFormDetail() {
|
|
if (this.$route.meta.params?.custom_form) {
|
|
let decode = decodeURIComponent(this.$route.meta.params?.custom_form);
|
|
try {
|
|
let custom_form = JSON.parse(decode);
|
|
this.customForm.customFormId = custom_form.custom_form_id;
|
|
this.customForm.tableName = custom_form.table_name;
|
|
this.select.table_name = custom_form.table_name;
|
|
} catch (err) {
|
|
console.warn(err);
|
|
}
|
|
}
|
|
|
|
const res = await show({ id: this.customForm.customFormId }, false);
|
|
|
|
//字段处理
|
|
//初始表白名单
|
|
let baseTable = new Map([
|
|
[
|
|
"departments",
|
|
async () => {
|
|
const res = await listdept();
|
|
return res;
|
|
},
|
|
],
|
|
["admins", []],
|
|
]);
|
|
let { fields, relation } = res;
|
|
let fieldRes = fields.sort((a, b) => a.sort - b.sort);
|
|
if (
|
|
!fields ||
|
|
!relation ||
|
|
!fields instanceof Array ||
|
|
!relation instanceof Array
|
|
) {
|
|
throw new Error("fields或relation格式错误");
|
|
}
|
|
fieldRes?.forEach((i, index) => {
|
|
i._relations = relation.find(
|
|
(j) => j.link_table_name.split("_")[1] === i.field
|
|
);
|
|
if (i.select_item && typeof i.select_item === "object") {
|
|
let keys = Object.keys(i.select_item);
|
|
i._params = keys.map((key) => {
|
|
return {
|
|
key,
|
|
value: /^\d*$/.test(i.select_item[key])
|
|
? Number(i.select_item[key])
|
|
: i.select_item[key],
|
|
};
|
|
});
|
|
}
|
|
if (i.edit_input === "file" || i.edit_input === "files") {
|
|
return;
|
|
}
|
|
if (i._relations) {
|
|
if (baseTable.get(i._relations.link_table_name)) {
|
|
baseTable
|
|
.get(i._relations.link_table_name)()
|
|
.then((res) => {
|
|
i._params = res.data;
|
|
});
|
|
} else {
|
|
i._params = i._relations.parameter_id
|
|
? getparameter({ id: i._relations.parameter_id }, false).then(
|
|
(res) => {
|
|
i._params = res.detail;
|
|
}
|
|
)
|
|
: this.index({
|
|
table_name: i._relations.link_table_name,
|
|
page: 1,
|
|
page_size: 9999,
|
|
}).then((res) => {
|
|
i._params = res.data;
|
|
});
|
|
}
|
|
}
|
|
});
|
|
this.form = fieldRes || [];
|
|
this.form
|
|
?.filter((i) => i.list_show)
|
|
.forEach((i) => {
|
|
let linkOb = {};
|
|
|
|
if (i.edit_input === "richtext") {
|
|
linkOb.customFn = (row) => {
|
|
return (
|
|
<div
|
|
style={{ "max-height": "55px", overflow: "scroll" }}
|
|
domPropsInnerHTML={row[i.field]}
|
|
></div>
|
|
);
|
|
};
|
|
}
|
|
if (
|
|
i.select_item &&
|
|
typeof i.select_item === "object" &&
|
|
!(i.select_item instanceof Array)
|
|
) {
|
|
let keys = Object.keys(i.select_item);
|
|
linkOb.customFn = (row) => {
|
|
let paramMap = new Map();
|
|
keys.forEach((key) => {
|
|
paramMap.set(i.select_item[key], key);
|
|
});
|
|
|
|
return <span>{paramMap.get(row[i.field]?.toString())}</span>;
|
|
};
|
|
}
|
|
if (i._relations) {
|
|
let { link_relation, foreign_key, link_with_name } = i._relations;
|
|
if (link_relation === "newHasOne" || link_relation === "hasOne") {
|
|
linkOb.customFn = (row) => {
|
|
if (i.edit_input === "file") {
|
|
return (
|
|
<a
|
|
download={row[link_with_name]?.original_name}
|
|
href={row[link_with_name]?.url}
|
|
>
|
|
{row[link_with_name]?.original_name}
|
|
</a>
|
|
);
|
|
} else {
|
|
return (
|
|
<span>
|
|
{row[link_with_name]?.name ||
|
|
row[link_with_name]?.no ||
|
|
row[link_with_name]?.value}
|
|
</span>
|
|
);
|
|
}
|
|
};
|
|
}
|
|
|
|
if (link_relation === "hasMany" || link_relation === "newHasMany") {
|
|
linkOb.customFn = (row) => {
|
|
if (i.edit_input === "files") {
|
|
return (
|
|
<div style="display: flex;flex-direction: column;">
|
|
{row[link_with_name]?.map((o) => (
|
|
<a>{o?.original_name || o?.name}</a>
|
|
))}
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div>
|
|
{row[link_with_name]?.map((o) => (
|
|
<p>
|
|
{o?.name ||
|
|
o?.no ||
|
|
o?.value ||
|
|
o?.biaoti ||
|
|
o?.mingcheng}
|
|
</p>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
}
|
|
}
|
|
|
|
let alignLeft = ["dikuaimingcheng"];
|
|
this.table.push(
|
|
Object.assign(
|
|
{
|
|
prop: i.field,
|
|
label: i.name,
|
|
width: i.width,
|
|
align: alignLeft.find((m) => m === i.field) ? "left" : "center",
|
|
fixed: i.is_fixed,
|
|
},
|
|
linkOb
|
|
)
|
|
);
|
|
});
|
|
this.table.unshift({
|
|
type: "index",
|
|
width: 60,
|
|
label: "序号",
|
|
});
|
|
},
|
|
},
|
|
computed: {
|
|
contentFormat() {
|
|
return function (i) {
|
|
if (i._params && i._params.length > 0) {
|
|
return i._params.find(
|
|
(param) => param.value == this.openData[i.field]
|
|
)?.key;
|
|
}
|
|
if (i._relations) {
|
|
let { link_relation, foreign_key, link_with_name, link_table_name } =
|
|
i._relations;
|
|
|
|
if (link_table_name && link_relation) {
|
|
if (link_relation === "hasOne" || link_relation === "newHasOne") {
|
|
return (
|
|
this.openData[link_with_name]?.name ||
|
|
this.openData[link_with_name]?.no ||
|
|
this.openData[link_with_name]?.value
|
|
);
|
|
}
|
|
if (link_relation === "hasMany" || link_relation === "newHasMany") {
|
|
return this.openData[link_with_name]
|
|
?.map((o) => o?.original_name || o?.name || o?.no || o?.value)
|
|
?.toString();
|
|
}
|
|
}
|
|
}
|
|
|
|
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();
|
|
},
|
|
async mounted() {
|
|
let areaId = Number(this.$route.query.area) || ''
|
|
areaId ? (this.init(this.wxAreas[areaId - 1]),this.select.filter[0].value = areaId) : this.init();
|
|
|
|
await this.getList();
|
|
this.setMapMarker();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$staticsHeight: 60px;
|
|
.statics {
|
|
height: $staticsHeight;
|
|
|
|
z-index: 2;
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 8px;
|
|
right: 8px;
|
|
|
|
::v-deep .el-card__body {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
padding: 0;
|
|
}
|
|
&-item {
|
|
text-align: center;
|
|
flex: 1;
|
|
|
|
position: relative;
|
|
&__title {
|
|
zoom: .9;
|
|
|
|
}
|
|
&__num {
|
|
font-weight: 600;
|
|
line-height: 1.5;
|
|
font-size: 22px;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
width: 2px;
|
|
border-radius: 6px;
|
|
background: #66666655;
|
|
|
|
position: absolute;
|
|
right: 1px;
|
|
top: 5px;
|
|
bottom: 5px;
|
|
}
|
|
&:nth-last-child(1){
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.container {
|
|
|
|
position: relative;
|
|
}
|
|
::v-deep .el-card__body {
|
|
padding: 8px;
|
|
}
|
|
.search-bar {
|
|
.search-name {
|
|
zoom: .9;
|
|
|
|
padding: 0 10px;
|
|
}
|
|
|
|
z-index: 2;
|
|
position: absolute;
|
|
top: calc(8px * 2 + #{$staticsHeight});
|
|
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-list {
|
|
background-color: #ebeef6;
|
|
max-height: calc(100% - 8px * 3 - #{$staticsHeight});
|
|
min-height: 200px;
|
|
max-width: 355px;
|
|
border-radius: 6px;
|
|
filter: drop-shadow(2px 2px 5px #00000055);
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
z-index: 2;
|
|
position: absolute;
|
|
right: 8px;
|
|
top: calc(8px * 2 + #{$staticsHeight});
|
|
|
|
&__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: 40px;
|
|
font-size: 22px;
|
|
background: #ebeef6;
|
|
cursor: pointer;
|
|
|
|
position: absolute;
|
|
top: 84px;
|
|
left: -30px;
|
|
}
|
|
|
|
ul {
|
|
flex: 1;
|
|
overflow-y: scroll;
|
|
|
|
padding: 10px;
|
|
padding-top: 0;
|
|
&::-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 {
|
|
animation: fade-in 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
0% {
|
|
transform: translateX(200px);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateX(0px);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.fade-leave-active {
|
|
animation: fade-out 0.4s ease-out both;
|
|
}
|
|
|
|
@keyframes fade-out {
|
|
0% {
|
|
transform: translateX(0px);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateX(200px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
#infoWindow {
|
|
min-width: 260px;
|
|
max-height: 260px;
|
|
box-sizing: border-box;
|
|
filter: drop-shadow(2px 2px 5px #00000055);
|
|
border-radius: 0 4px 4px 4px;
|
|
background: #fff;
|
|
|
|
animation: fade-in 0.4s forwards;
|
|
position: relative;
|
|
}
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
#infoWindow > p {
|
|
background: $primaryColor;
|
|
color: #fff;
|
|
padding: 3px 10px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
border-radius: 6px 6px 0 0;
|
|
transform: translateY(-100%);
|
|
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
.infoWindow-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-gap: 10px;
|
|
|
|
padding: 20px;
|
|
& > div > p:nth-child(1) {
|
|
font-weight: 600;
|
|
padding-bottom: 6px;
|
|
}
|
|
& > div > p:nth-child(2) {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
::v-deep #infoWindow .el-icon-close {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.showInfo {
|
|
text-align: center;
|
|
cursor: pointer;
|
|
color: $primaryColor;
|
|
}
|
|
|
|
.map-marker {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
&__text {
|
|
background: #fff;
|
|
zoom: 0.75;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
white-space: nowrap;
|
|
filter: drop-shadow(2px 2px 5px #00000055);
|
|
}
|
|
}
|
|
</style>
|