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

2023-8-18

Browse Source
master
xy 2 years ago
parent 4fbc639d43
commit 5fad8feba8
6 changed files with 237 additions and 48 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,6 +1,7 @@
<template>
<div>
<avue-map v-model="map" placeholder="请选择地图"></avue-map>
<p style="zoom: .85;">{{ value }}</p>
</div>
</template>

8
src/draggable.js
Unescape View File

@ -12,7 +12,7 @@ export const defineDirective = () => {
el.onmousedown = e => {
e.stopPropagation();
e.preventDefault();
//e.preventDefault();
//鼠标按下，计算当前元素距离可视区的距离
let disX = e.clientX - dom.offsetLeft;
let disY = e.clientY - dom.offsetTop;
@ -47,10 +47,10 @@ export const defineDirective = () => {
}
};
el.onclick = e => {
setTimeout(() => {
binding.value(false)
}
},500)
};
//return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
//return false;
};

126
src/views/component/detail.vue
Unescape View File

@ -1,7 +1,7 @@
<template>
<div>
<el-page-header
:content="$route.meta.title"
:content="$route.meta.title + (detail.dikuaimingcheng ? ' - ' : '') + detail.dikuaimingcheng"
style="
padding: 1em;
font-size: 1em;
@ -16,8 +16,8 @@
<el-row :gutter="20">
<el-col :span="14">
<el-card v-if="detail.id_assets_picture_files_file_id_relation" style="margin-bottom: 20px;">
<div class="el-descriptions__header el-descriptions__title">图集</div>
<el-card v-if="detail.id_assets_picture_files_file_id_relation && detail.id_assets_picture_files_file_id_relation.length > 0">
<div class="el-descriptions__header el-descriptions__title">资产图集</div>
<el-carousel trigger="click" height="150px">
<el-carousel-item v-for="item in detail.id_assets_picture_files_file_id_relation">
<el-image
@ -29,16 +29,51 @@
</el-carousel>
</el-card>
<el-card>
<el-descriptions title="详情" :column="2" :label-style="{'font-weight': '600'}">
<el-descriptions-item v-for="item in fields" :label="item.name">{{
<el-descriptions title="基本信息" :column="2" :label-style="{'font-weight': '600'}">
<el-descriptions-item v-for="item in fields" :label="item.name" v-if="!['file','picture'].find(j => j === item.field)">{{
contentFormat(item)
}}</el-descriptions-item>
}}{{ units.get(item.field) }}</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card>
<div class="el-descriptions__header el-descriptions__title">资产相关附件</div>
<template>
<template v-if="detail.id_assets_file_files_file_id_relation && detail.id_assets_file_files_file_id_relation.length > 0">
<div v-for="item in detail.id_assets_file_files_file_id_relation">
<a :download="item.url">{{ item.original_name }}</a>
</div>
</template>
<template v-else>
<el-empty description="无"></el-empty>
</template>
</template>
</el-card>
<el-card>
<div class="el-descriptions__header el-descriptions__title">资产证件图片</div>
<template>
<template v-if="detail.id_assets_picture_files_file_id_relation && detail.id_assets_picture_files_file_id_relation.length > 0">
<div v-for="item in detail.id_assets_picture_files_file_id_relation">
<el-image
style="width: 100%; height: 100%;"
:src="item.url"
:preview-src-list="picList"
fit="contain"></el-image>
</div>
</template>
<template v-else>
<el-empty description="无"></el-empty>
</template>
</template>
</el-card>
</el-col>
<el-col :span="10" >
<el-card>
<div class="el-descriptions__header el-descriptions__title">资产历史</div>
<template>
<template v-if="histories && histories.length > 0">
<Timeline>
<TimelineItem v-for="(item,index) in histories" :key="item.id">
<p>{{ item.riqi }}</p>
@ -47,6 +82,16 @@
</TimelineItem>
</Timeline>
</template>
<template v-else>
<el-empty description="无"></el-empty>
</template>
</template>
</el-card>
<el-card>
<div class="el-descriptions__header el-descriptions__title">资产地图</div>
<div class="map" id="detail-map" style="width: 100%;height: 300px;"></div>
</el-card>
</el-col>
</el-row>
@ -61,6 +106,9 @@ import { listdept } from '@/api/system/department'
export default {
data() {
return {
center: [120.283692, 31.614211],
marker: {},
histories: [],
picList: [],
detail: {},
@ -72,9 +120,52 @@ export default {
},
units: new Map([
['jianzhu','m²'],
['jianzhugaodu','m'],
['dikuaizongjia','元'],
['dikuaimianji','m²'],
['muqianjunjia','元'],
])
}
},
methods: {
init() {
this.map = new AMap.Map("detail-map", {
center: this.center,
mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", // 设置地图的显示样式
zoom: 60
});
this.map.remove(this.marker);
if (this.detail.zichanweizhi) {
let lat, lng;
[lng, lat] = this.detail.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");
let markerImg = document.createElement("img");
markerImg.src =
"//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 = this.detail.dikuaimingcheng;
markerContent.appendChild(markerImg);
markerContent.appendChild(markerSpan);
marker.setContent(markerContent);
this.marker = marker;
this.map.add(this.marker)
this.map.setFitView(this.marker);
}
},
async getFields () {
if (this.$route.meta.params?.custom_form) {
let decode = decodeURIComponent(this.$route.meta.params?.custom_form);
@ -158,6 +249,7 @@ export default {
table_name: this.customForm.tableName
})
this.detail = detail
this.init();
this.picList = detail?.id_assets_picture_files_file_id_relation?.map(i => i.url)
},
@ -215,4 +307,26 @@ export default {
</script>
<style scoped lang="scss">
::v-deep .el-card {
margin-bottom: 20px;
}
::v-deep .el-empty__image {
width: 120px;
}
</style>
<style lang="scss">
.map-marker {
display: flex;
flex-direction: column;
align-items: center;
&__text {
background: #fff;
zoom: 0.9;
padding: 2px 6px;
border-radius: 4px;
white-space: nowrap;
filter: drop-shadow(2px 2px 5px #00000055);
}
}
</style>

5
src/views/component/imports.vue
Unescape View File

@ -129,6 +129,11 @@ export default {
width: 200
};
});
this.table.unshift({
key: 'id',
title: 'id',
width: 140
})
}
},
},

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

@ -2,14 +2,14 @@
<div>
<div class="search-bar">
<el-select
v-model="nowCity"
v-model="select.filter[0].value"
size="small"
placeholder="请选择区域"
@change="areaPick"
>
<el-option
v-for="item in wxAreas"
:value="item"
v-for="(item,index) in wxAreas"
:value="index+1"
:label="item"
></el-option>
</el-select>
@ -41,10 +41,24 @@
"
>
<Input
v-model="select.name"
style="width: 65px; margin-right: 10px"
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
>
@ -56,7 +70,7 @@
:height="360"
:action="index"
:table-item="table"
:req-opt="select"
:req-opt="selectList"
@row-click="pickRow"
></xy-table>
</div>
@ -66,12 +80,16 @@
<div class="map" id="map" :style="{ height: mapHeight + 'px' }"></div>
<div ref="infoWindow" id="infoWindow" v-show="isShowInfoWindow">
<div>
<div v-for="item in form">
<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) }}</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>
@ -86,8 +104,30 @@ export default {
return {
dragging: false,
searchShow: false,
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: ''
}
]
},
customForm: {
customFormId: "",
@ -97,7 +137,7 @@ export default {
table: [],
list: [],
mapHeight: 0,
center: [119.597897, 31.723247],
center: [120.283692, 31.614211],
isShowInfoWindow: false,
openData: {},
infoWindow: null,
@ -105,22 +145,36 @@ export default {
cluster: null,
polygons: [],
markerList: [],
nowCity: "",
wxAreas: [
"锡山区",
"宜兴市",
"惠山区",
"滨湖区",
"梁溪区",
"新吴区",
"梁溪区",
"江阴市",
"宜兴市",
"滨湖区",
"锡山区",
],
units: new Map([
['jianzhu','m²'],
['jianzhugaodu','m'],
['dikuaizongjia','元'],
['dikuaimianji','m²'],
['muqianjunjia','元'],
])
};
},
methods: {
test () {
console.log(
this.$refs['search-input'].$el
)
},
index,
areaPick(e) {
this.areaBG(e);
this.areaBG(this.wxAreas[e-1]);
this.getList().then(res => {
this.setMapMarker()
})
},
pickRow({ row }) {
this.isShowInfoWindow = true;
@ -443,12 +497,15 @@ export default {
};
}
}
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
@ -539,7 +596,7 @@ export default {
}
&-list {
max-width: 500px;
max-width: 560px;
border-radius: 6px;
filter: drop-shadow(2px 2px 5px #00000055);
background: #fff;
@ -598,20 +655,15 @@ export default {
</style>
<style lang="scss">
#infoWindow {
min-width: 140px;
max-height: 240px;
overflow-y: scroll;
position: relative;
min-width: 260px;
max-height: 260px;
box-sizing: border-box;
filter: drop-shadow(2px 2px 5px #00000055);
border-radius: 4px;
border-radius: 0 4px 4px 4px;
background: #fff;
padding: 20px;
animation: fade-in 0.4s forwards;
&::-webkit-scrollbar {
width: 4px;
}
position: relative;
}
@keyframes fade-in {
from {
@ -621,11 +673,25 @@ export default {
opacity: 1;
}
}
#infoWindow > div {
#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;

3
src/views/component/table.vue
Unescape View File

@ -565,12 +565,15 @@ export default {
};
}
}
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

Write Preview
Loading…
Cancel
Save