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

2023-8-21

Browse Source
master
xy 2 years ago
parent 18152dce3c
commit 828c6cffd8
2 changed files with 247 additions and 178 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,7 +1,10 @@
<template>
<div>
<el-page-header
:content="$route.meta.title + (detail.dikuaimingcheng ? ' - ' + detail.dikuaimingcheng : '')"
:content="
$route.meta.title +
(detail.dikuaimingcheng ? ' - ' + detail.dikuaimingcheng : '')
"
style="
padding: 1em;
font-size: 1em;
@ -16,30 +19,55 @@
<el-row :gutter="20">
<el-col :span="14">
<el-card v-if="detail.id_assets_atlas_files_asset_id_relation && detail.id_assets_atlas_files_asset_id_relation.length > 0">
<div class="el-descriptions__header el-descriptions__title">资产图集</div>
<el-card
v-if="
detail.id_assets_atlas_files_asset_id_relation &&
detail.id_assets_atlas_files_asset_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_atlas_files_asset_id_relation">
<el-carousel-item
v-for="item in detail.id_assets_atlas_files_asset_id_relation"
>
<el-image
style="width: 100%; height: 100%;"
style="width: 100%; height: 100%"
:src="item.url"
:preview-src-list="picList"
fit="cover"></el-image>
fit="cover"
></el-image>
</el-carousel-item>
</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" v-if="!['file','picture'].find(j => j === item.field)">{{
contentFormat(item)
}}{{ units.get(item.field) }}</el-descriptions-item>
<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)
}}{{ units.get(item.field) }}</el-descriptions-item
>
</el-descriptions>
</el-card>
<el-card>
<div class="el-descriptions__header el-descriptions__title">资产相关附件</div>
<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">
<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>
@ -50,17 +78,26 @@
</template>
</el-card>
<el-card>
<div class="el-descriptions__header el-descriptions__title">资产证件图片</div>
<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">
<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%;"
style="width: 100%; height: 100%"
:src="item.url"
:preview-src-list="picList"
fit="contain"></el-image>
fit="contain"
></el-image>
</div>
</template>
<template v-else>
@ -69,18 +106,24 @@
</template>
</el-card>
</el-col>
<el-col :span="10" >
<el-col :span="10">
<el-card>
<div class="el-descriptions__header el-descriptions__title">资产历史</div>
<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">
<TimelineItem v-for="(item, index) in histories" :key="item.id">
<p>{{ item.riqi }}</p>
<div v-html="item.neirong"></div>
<el-image style="width: 78%;height: 160px;" v-for="img in item.id_his_tupian_files_asset_history_id_relation" :src="img.url" fit="contain"></el-image>
<el-image
style="width: 78%; height: 160px"
v-for="img in item.id_his_tupian_files_asset_history_id_relation"
:src="img.url"
fit="contain"
></el-image>
</TimelineItem>
</Timeline>
</template>
<template v-else>
@ -89,9 +132,15 @@
</template>
</el-card>
<el-card>
<div class="el-descriptions__header el-descriptions__title">资产地图</div>
<div class="el-descriptions__header el-descriptions__title">
资产地图
</div>
<div class="map" id="detail-map" style="width: 100%;height: 300px;"></div>
<div
class="map"
id="detail-map"
style="width: 100%; height: 300px"
></div>
</el-card>
</el-col>
</el-row>
@ -101,10 +150,10 @@
<script>
import { show, index } from "@/api/system/baseForm";
import { show as formShow } from "@/api/system/customForm";
import { getparameter } from '@/api/system/dictionary'
import { listdept } from '@/api/system/department'
import { getparameter } from "@/api/system/dictionary";
import { listdept } from "@/api/system/department";
export default {
name: 'detail',
name: "detail",
data() {
return {
center: [120.283692, 31.614211],
@ -119,23 +168,21 @@ export default {
tableName: "",
},
units: new Map([
['jianzhumianji','m²'],
['jianzhugaodu','m'],
['dikuaizongjia','元'],
['dikuaimianji','m²'],
['muqianjunjia','元'],
])
}
["jianzhumianji", "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
zoom: 60,
});
this.map.remove(this.marker);
@ -160,13 +207,12 @@ export default {
marker.setContent(markerContent);
this.marker = marker;
this.map.add(this.marker)
this.map.add(this.marker);
this.map.setFitView(this.marker);
}
},
async getFields () {
async getFields() {
if (this.$route.meta.params?.custom_form) {
let decode = decodeURIComponent(this.$route.meta.params?.custom_form);
try {
@ -179,20 +225,22 @@ export default {
}
const res = await formShow({ id: this.customForm.customFormId }, false);
this.fields = res.fields.sort((a,b) => a.sort - b.sort)
this.relation = res.relation
this.fields = res.fields.sort((a, b) => a.sort - b.sort);
this.relation = res.relation;
//字段处理
//初始表白名单
let baseTable = new Map([
['departments', async () => {
const res = await listdept()
return res
}],
['admins',[]]
])
let { fields, relation } = this
[
"departments",
async () => {
const res = await listdept();
return res;
},
],
["admins", []],
]);
let { fields, relation } = this;
if (
!fields ||
!relation ||
@ -201,110 +249,122 @@ export default {
) {
throw new Error("fields或relation格式错误");
}
fields.sort((a,b) => a.sort - b.sort).forEach(i => {
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;
});
fields
.sort((a, b) => a.sort - b.sort)
.forEach((i) => {
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;
});
}
}
});
const detail = await show({
id: this.$route.query.id,
table_name: this.customForm.tableName
})
this.detail = detail
table_name: this.customForm.tableName,
});
this.detail = detail;
this.init();
},
async getHistory () {
async getHistory() {
const res = await index({
page: 1,
page_size: 999,
table_name: "asset_histories",
filter: [
{
key: 'asset_id',
op: 'eq',
value: this.detail.id
}
]
})
this.histories = res.data
}
key: "asset_id",
op: "eq",
value: this.detail.id,
},
],
});
this.histories = res.data;
},
},
computed: {
picList () {
return this.detail?.id_assets_atlas_files_asset_id_relation?.map(i => i.url) || []
picList() {
return (
this.detail?.id_assets_atlas_files_asset_id_relation?.map(
(i) => i.url
) || []
);
},
contentFormat() {
return function (i) {
let { _relations } = i;
if (_relations && _relations.link_table_name) {
if (_relations.link_relation === "hasOne" || _relations.link_relation === "newHasOne") {
if (
_relations.link_relation === "hasOne" ||
_relations.link_relation === "newHasOne"
) {
return (
this.detail[_relations.link_with_name]?.name ||
this.detail[_relations.link_with_name]?.no ||
this.detail[_relations.link_with_name]?.value
);
}
if (_relations.link_relation === "hasMany" || _relations.link_relation === "newHasMany") {
if (
_relations.link_relation === "hasMany" ||
_relations.link_relation === "newHasMany"
) {
return this.detail[_relations.link_with_name]
?.map((o) => o?.original_name || o?.name || o?.no || o?.value)
?.toString();
}
return
return;
}
if (i._params && i._params.length > 0) {
return i._params.find(j => j.value == this.detail[i.field])?.key;
return i._params.find((j) => j.value == this.detail[i.field])?.key;
}
return this.detail[i.field]
return this.detail[i.field];
};
}
},
},
created() {
this.getFields().then(res => {
this.getHistory()
})
}
}
this.getFields().then((res) => {
this.getHistory();
});
},
};
</script>
<style scoped lang="scss">

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

@ -8,8 +8,8 @@
@change="areaPick"
>
<el-option
v-for="(item,index) in wxAreas"
:value="index+1"
v-for="(item, index) in wxAreas"
:value="index + 1"
:label="item"
></el-option>
</el-select>
@ -54,8 +54,8 @@
placeholder="请选择区域"
>
<el-option
v-for="(item,index) in wxAreas"
:value="index+1"
v-for="(item, index) in wxAreas"
:value="index + 1"
:label="item"
></el-option>
</el-select>
@ -80,7 +80,7 @@
<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%">
<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>
@ -89,7 +89,12 @@
</div>
</el-scrollbar>
<p class="to-detail" @click="$router.push('/assetsDetail?id='+openData.id)">查看详情</p>
<p
class="to-detail"
@click="$router.push('/assetsDetail?id=' + openData.id)"
>
查看详情
</p>
</div>
</div>
</template>
@ -100,7 +105,7 @@ import { show } from "@/api/system/customForm";
import { listdept } from "@/api/system/department";
import { getparameter } from "@/api/system/dictionary";
export default {
name: 'mapList',
name: "mapList",
data() {
return {
dragging: false,
@ -109,26 +114,26 @@ export default {
table_name: "assets",
filter: [
{
key: 'suoshuqu',
op: 'eq',
value: ''
key: "suoshuqu",
op: "eq",
value: "",
},
{
key: 'dikuaimingcheng',
op: 'like',
value: ''
}
]
key: "dikuaimingcheng",
op: "like",
value: "",
},
],
},
select: {
table_name: "assets",
filter: [
{
key: 'suoshuqu',
op: 'eq',
value: ''
}
]
key: "suoshuqu",
op: "eq",
value: "",
},
],
},
customForm: {
customFormId: "",
@ -156,26 +161,24 @@ export default {
"锡山区",
],
units: new Map([
['jianzhumianji','m²'],
['jianzhugaodu','m'],
['dikuaizongjia','元'],
['dikuaimianji','m²'],
['muqianjunjia','元'],
])
["jianzhumianji", "m²"],
["jianzhugaodu", "m"],
["dikuaizongjia", "元"],
["dikuaimianji", "m²"],
["muqianjunjia", "元"],
]),
};
},
methods: {
test () {
console.log(
this.$refs['search-input'].$el
)
test() {
console.log(this.$refs["search-input"].$el);
},
index,
areaPick(e) {
this.areaBG(this.wxAreas[e-1]);
this.getList().then(res => {
this.setMapMarker()
})
this.areaBG(this.wxAreas[e - 1]);
this.getList().then((res) => {
this.setMapMarker();
});
},
pickRow({ row }) {
this.isShowInfoWindow = true;
@ -199,7 +202,7 @@ export default {
this.list = res.data;
},
addCluster () {
addCluster() {
if (this.cluster) {
this.cluster.setMap(null);
}
@ -209,33 +212,36 @@ export default {
renderMarker: this.renderMarker, // 自定义非聚合点样式
});
},
renderClusterMarker (context) {
renderClusterMarker(context) {
let factor = Math.pow(context.count / this.list.length, 1 / 18);
let div = document.createElement('div');
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)';
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;
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.lineHeight = size + "px";
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
div.style.fontSize = "14px";
div.style.textAlign = "center";
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div)
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>';
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)
context.marker.setContent(content);
context.marker.setOffset(offset);
},
setMapMarker() {
this.map.remove(this.markerList);
@ -262,7 +268,9 @@ export default {
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.slice(0, 2) +
".." +
item.dikuaimingcheng.slice(item.dikuaimingcheng.length - 2)
: item.dikuaimingcheng;
markerContent.appendChild(markerImg);
markerContent.appendChild(markerSpan);
@ -283,7 +291,7 @@ export default {
this.map = new AMap.Map("map", {
center: this.center,
mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", // 设置地图的显示样式
zoom: this.zoom
zoom: this.zoom,
});
// 行政区域加载
let adcode = ["320200"];
@ -499,14 +507,14 @@ export default {
}
}
let alignLeft = ['dikuaimingcheng']
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',
align: alignLeft.find((m) => m === i.field) ? "left" : "center",
fixed: i.is_fixed,
},
linkOb
@ -529,7 +537,8 @@ export default {
)?.key;
}
if (i._relations) {
let { link_relation, foreign_key, link_with_name, link_table_name } = 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") {
@ -547,7 +556,7 @@ export default {
}
}
return this.openData[i.field] || '/';
return this.openData[i.field] || "/";
};
},
},
@ -680,7 +689,7 @@ export default {
padding: 3px 10px;
cursor: pointer;
font-size: 13px;
border-radius: 6px 6px 0 0 ;
border-radius: 6px 6px 0 0;
transform: translateY(-100%);
position: absolute;

Write Preview
Loading…
Cancel
Save