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.
333 lines
10 KiB
333 lines
10 KiB
<template>
|
|
<div>
|
|
<el-page-header
|
|
:content="$route.meta.title + (detail.dikuaimingcheng ? ' - ' : '') + detail.dikuaimingcheng"
|
|
style="
|
|
padding: 1em;
|
|
font-size: 1em;
|
|
background: #fff;
|
|
margin: 1.67em 0;
|
|
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
|
border-radius: 5px;
|
|
"
|
|
@back="$router.back()"
|
|
>
|
|
</el-page-header>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="14">
|
|
<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
|
|
style="width: 100%; height: 100%;"
|
|
:src="item.url"
|
|
:preview-src-list="picList"
|
|
fit="contain"></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>
|
|
</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>
|
|
<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>
|
|
</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>
|
|
</div>
|
|
</template>
|
|
|
|
<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'
|
|
export default {
|
|
data() {
|
|
return {
|
|
center: [120.283692, 31.614211],
|
|
marker: {},
|
|
|
|
histories: [],
|
|
picList: [],
|
|
detail: {},
|
|
fields: [],
|
|
relation: [],
|
|
customForm: {
|
|
customFormId: "",
|
|
tableName: "",
|
|
},
|
|
|
|
|
|
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);
|
|
try {
|
|
let custom_form = JSON.parse(decode);
|
|
this.customForm.customFormId = custom_form.custom_form_id;
|
|
this.customForm.tableName = custom_form.table_name;
|
|
} catch (err) {
|
|
console.warn(err);
|
|
}
|
|
}
|
|
|
|
const res = await formShow({ id: this.customForm.customFormId }, false);
|
|
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
|
|
if (
|
|
!fields ||
|
|
!relation ||
|
|
!fields instanceof Array ||
|
|
!relation instanceof Array
|
|
) {
|
|
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;
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
const detail = await show({
|
|
id: this.$route.query.id,
|
|
table_name: this.customForm.tableName
|
|
})
|
|
this.detail = detail
|
|
this.init();
|
|
|
|
this.picList = detail?.id_assets_picture_files_file_id_relation?.map(i => i.url)
|
|
},
|
|
|
|
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
|
|
}
|
|
},
|
|
computed: {
|
|
contentFormat() {
|
|
return function (i) {
|
|
let { _relations } = i;
|
|
if (_relations && _relations.link_table_name) {
|
|
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") {
|
|
return this.detail[_relations.link_with_name]
|
|
?.map((o) => o?.original_name || o?.name || o?.no || o?.value)
|
|
?.toString();
|
|
}
|
|
|
|
return
|
|
}
|
|
if (i._params && i._params.length > 0) {
|
|
return i._params.find(j => j.value == this.detail[i.field])?.key;
|
|
}
|
|
|
|
return this.detail[i.field]
|
|
};
|
|
}
|
|
},
|
|
created() {
|
|
this.getFields().then(res => {
|
|
this.getHistory()
|
|
})
|
|
}
|
|
}
|
|
</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>
|