|
|
<template>
|
|
|
<div style="padding: 0 20px;">
|
|
|
<el-page-header
|
|
|
:content="$route.meta.title"
|
|
|
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="24">
|
|
|
<el-col :span="21" class="print-content">
|
|
|
<el-card
|
|
|
id="detail-pictures"
|
|
|
v-if="
|
|
|
(detail.id_assets_atlas_files_house_id_relation &&
|
|
|
detail.id_assets_atlas_files_house_id_relation.length > 0) ||
|
|
|
(detail.id_assets_atlas_files_land_id_relation &&
|
|
|
detail.id_assets_atlas_files_land_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_house_id_relation || detail.id_assets_atlas_files_land_id_relation)"
|
|
|
>
|
|
|
<el-image
|
|
|
style="width: 100%; height: 100%"
|
|
|
:src="item.url"
|
|
|
:preview-src-list="picList"
|
|
|
fit="cover"
|
|
|
></el-image>
|
|
|
</el-carousel-item>
|
|
|
</el-carousel>
|
|
|
</el-card>
|
|
|
<el-card id="detail-info">
|
|
|
<div class="el-descriptions__header el-descriptions__title">
|
|
|
基本信息
|
|
|
</div>
|
|
|
<el-descriptions
|
|
|
border
|
|
|
: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-item :label="'关联'+(detail.hasOwnProperty('id_houses_land_id_relation') ? '房产' : '土地')">-->
|
|
|
<!-- <template v-if="/\/land/g.test($route.path)">-->
|
|
|
<!-- <div v-for="item in detail.id_houses_land_id_relation" style="display: flex;align-items: center;">-->
|
|
|
<!-- <span>{{ item.name }}</span>-->
|
|
|
<!-- <el-link style="margin-left: 10px;white-space: nowrap;" @click="$router.push(/houseDetail/+item.id)">查看</el-link>-->
|
|
|
<!-- </div>-->
|
|
|
<!-- </template>-->
|
|
|
<!-- <template v-if="/\/house/g.test($route.path)">-->
|
|
|
<!-- <div style="display: flex;align-items: center;">-->
|
|
|
<!-- <span>{{ (detail.land_id_lands_id_relation ? detail.land_id_lands_id_relation.name : '') }}</span>-->
|
|
|
<!-- <el-link style="margin-left: 10px;white-space: nowrap;" @click="$router.push('/landDetail/'+detail.land_id_lands_id_relation.id)">查看</el-link>-->
|
|
|
<!-- </div>-->
|
|
|
<!-- </template>-->
|
|
|
<!-- </el-descriptions-item>-->
|
|
|
</el-descriptions>
|
|
|
</el-card>
|
|
|
|
|
|
<!-- <el-card id="detail-documents">-->
|
|
|
<!-- <div class="el-descriptions__header el-descriptions__title">-->
|
|
|
<!-- 资产证件图片-->
|
|
|
<!-- </div>-->
|
|
|
<!-- <template>-->
|
|
|
<!-- <template-->
|
|
|
<!-- v-if="-->
|
|
|
<!-- (detail.id_asset_picture_files_land_id_relation &&-->
|
|
|
<!-- detail.id_asset_picture_files_land_id_relation.length > 0) ||-->
|
|
|
<!-- (detail.id_asset_picture_files_house_id_relation &&-->
|
|
|
<!-- detail.id_asset_picture_files_house_id_relation.length > 0)-->
|
|
|
<!-- "-->
|
|
|
<!-- >-->
|
|
|
<!-- <div style="display: flex;flex-wrap: wrap;">-->
|
|
|
<!-- <div-->
|
|
|
<!-- v-for="item in /\/land/g.test($route.path) ? detail.id_asset_picture_files_land_id_relation : detail.id_asset_picture_files_house_id_relation"-->
|
|
|
<!-- >-->
|
|
|
<!-- <el-image-->
|
|
|
<!-- style="width: 100%; max-width: 200px;margin-right: 10px;"-->
|
|
|
<!-- :src="item.url"-->
|
|
|
<!-- :preview-src-list="-->
|
|
|
<!-- (/\/land/g.test($route.path) ? detail.id_asset_picture_files_land_id_relation : detail.id_asset_picture_files_house_id_relation).map(-->
|
|
|
<!-- (i) => i.url-->
|
|
|
<!-- )-->
|
|
|
<!-- "-->
|
|
|
<!-- fit="contain"-->
|
|
|
<!-- ></el-image>-->
|
|
|
<!-- </div>-->
|
|
|
<!-- </div>-->
|
|
|
<!-- </template>-->
|
|
|
<!-- <template v-else>-->
|
|
|
<!-- <el-empty description="无"></el-empty>-->
|
|
|
<!-- </template>-->
|
|
|
<!-- </template>-->
|
|
|
<!-- </el-card>-->
|
|
|
<el-card id="detail-link-land" v-if="/\/house/g.test($route.path) && (detail.land_id_lands_id_relation && detail.land_id_lands_id_relation.length > 0)">
|
|
|
<div class="el-descriptions__header el-descriptions__title">
|
|
|
<p>关联土地</p>
|
|
|
|
|
|
<div v-if="detail.land_id_lands_id_relation" style="font-size: 14px;" @click="(detail.land_id_lands_id_relation && detail.land_id_lands_id_relation.id) ? $router.push('/landDetail/'+detail.land_id_lands_id_relation.id) : ''">
|
|
|
<span>查看</span>
|
|
|
<i class="el-icon-d-arrow-right"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-descriptions
|
|
|
v-if="detail.land_id_lands_id_relation"
|
|
|
border
|
|
|
:column="2"
|
|
|
:label-style="{ 'font-weight': '600' }"
|
|
|
>
|
|
|
<el-descriptions-item
|
|
|
v-for="item in landFields"
|
|
|
:label="item.label"
|
|
|
>{{ detail.land_id_lands_id_relation ? detail.land_id_lands_id_relation[item.prop] : "" }}{{ units.get(item.prop) }}</el-descriptions-item
|
|
|
>
|
|
|
</el-descriptions>
|
|
|
<el-empty v-else description="暂无关联土地"></el-empty>
|
|
|
</el-card>
|
|
|
<el-card id="detail-link-houses" v-if="/\/land/g.test($route.path) && detail.id_houses_land_id_relation">
|
|
|
<div class="el-descriptions__header el-descriptions__title">
|
|
|
关联房产
|
|
|
</div>
|
|
|
|
|
|
<xy-table :is-page="false" :height="300" :list="detail.id_houses_land_id_relation" :table-item="houseTable" style="margin-top: 20px" size="mini" :auths="[]" ></xy-table>
|
|
|
</el-card>
|
|
|
|
|
|
<el-card id="detail-histories">
|
|
|
<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">
|
|
|
<el-descriptions :column="1" size="mini" border :title="$moment(item.fashengshijian).format('YYYY-MM-DD')" :label-style="{ 'width': '86px' }">
|
|
|
<el-descriptions-item>
|
|
|
<template slot="label">
|
|
|
<i class="el-icon-coordinate"></i>
|
|
|
面积调整
|
|
|
</template>
|
|
|
{{ item.mianjitiaozheng }}
|
|
|
</el-descriptions-item>
|
|
|
<el-descriptions-item>
|
|
|
<template slot="label">
|
|
|
<i class="el-icon-office-building"></i>
|
|
|
资产来源
|
|
|
</template>
|
|
|
{{ item.zichanlaiyuan }}
|
|
|
</el-descriptions-item>
|
|
|
<el-descriptions-item>
|
|
|
<template slot="label">
|
|
|
<i class="el-icon-chat-line-square"></i>
|
|
|
其他说明
|
|
|
</template>
|
|
|
{{ item.qitashuoming }}
|
|
|
</el-descriptions-item>
|
|
|
<el-descriptions-item>
|
|
|
<template slot="label">
|
|
|
<i class="el-icon-picture-outline"></i>
|
|
|
文件目录
|
|
|
</template>
|
|
|
<div style="display: flex;flex-wrap: wrap;padding-top: 10px;">
|
|
|
<div style="display: flex;flex-direction: column; align-items: center;margin-right: 16px;cursor: pointer;"
|
|
|
v-for="(img,index) in item.tupian_detail"
|
|
|
:key="img.id">
|
|
|
<!-- <el-image-->
|
|
|
<!-- style="height: 160px"-->
|
|
|
<!-- :src="img.url"-->
|
|
|
<!-- fit="contain"-->
|
|
|
<!-- :preview-src-list="item.id_his_tupian_files_asset_history_id_relation.map(i => i.url)"-->
|
|
|
<!-- ></el-image>-->
|
|
|
<i class="el-icon-document" style="font-size: 24px;" @click="open(img.url)"></i>
|
|
|
<div style="color: #3477c6;padding: 10px 0;" @click="open(img.url)">{{ ++index }}. <span style="font-weight: 600;">{{ img.original_name }}</span></div>
|
|
|
<div style="color: #3477c6" @click="down(img)"><i class="el-icon-download"></i>点击下载</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
|
|
|
</TimelineItem>
|
|
|
</Timeline>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<el-empty description="无"></el-empty>
|
|
|
</template>
|
|
|
</template>
|
|
|
</el-card>
|
|
|
<el-card id="detail-assetsMap">
|
|
|
<div class="el-descriptions__header el-descriptions__title">
|
|
|
<p>资产地图</p>
|
|
|
|
|
|
<div @click="copyLocation" style="cursor: pointer;margin-left: auto;margin-right: 20px;">
|
|
|
<i class="el-icon-map-location" style="font-weight: 600;margin-right: 4px;"></i>
|
|
|
<span>{{ detail.zichanweizhi }}</span>
|
|
|
</div>
|
|
|
|
|
|
<i class="el-icon-full-screen" style="cursor: pointer;font-weight: 600;" @click="assetsMapFullscreen"></i>
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
class="map"
|
|
|
id="detail-map"
|
|
|
style="width: 100%; height: 300px"
|
|
|
></div>
|
|
|
|
|
|
</el-card>
|
|
|
<!-- <el-card id="detail-safe">-->
|
|
|
<!-- <div class="el-descriptions__header el-descriptions__title">-->
|
|
|
<!-- 安全检查-->
|
|
|
<!-- </div>-->
|
|
|
|
|
|
<!-- <xy-table :is-page="false" :height="300" :list="inspections" :table-item="inspectionTable" style="margin-top: 20px" size="mini" stripe ref="table1" :auths="[]" ></xy-table>-->
|
|
|
<!-- </el-card>-->
|
|
|
|
|
|
<el-card id="detail-contract">
|
|
|
<div class="el-descriptions__header el-descriptions__title">
|
|
|
租赁合同
|
|
|
</div>
|
|
|
|
|
|
<xy-table :is-page="false" :height="300" :list="leases" :table-item="leaseTable" style="margin-top: 20px" size="mini" stripe ref="table1" :auths="[]" ></xy-table>
|
|
|
</el-card>
|
|
|
|
|
|
<el-card id="detail-repair">
|
|
|
<div class="el-descriptions__header el-descriptions__title">
|
|
|
维修保养
|
|
|
</div>
|
|
|
|
|
|
<xy-table :is-page="false" :height="300" :list="keeps" :table-item="keepTable" style="margin-top: 20px" size="mini" stripe ref="table1" :auths="[]" ></xy-table>
|
|
|
</el-card>
|
|
|
|
|
|
<el-card id="detail-files">
|
|
|
<div class="el-descriptions__header el-descriptions__title">
|
|
|
资产相关附件
|
|
|
</div>
|
|
|
<template>
|
|
|
<template
|
|
|
v-if="
|
|
|
(detail.id_asset_file_files_land_id_relation &&
|
|
|
detail.id_asset_file_files_land_id_relation.length > 0) ||
|
|
|
(detail.id_asset_file_files_house_id_relation &&
|
|
|
detail.id_asset_file_files_house_id_relation.length > 0)
|
|
|
"
|
|
|
>
|
|
|
<div
|
|
|
v-for="item in /\/land/g.test($route.path) ? detail.id_asset_file_files_land_id_relation : detail.id_asset_file_files_house_id_relation"
|
|
|
style="display: flex; justify-content: space-between;margin-bottom: 4px;"
|
|
|
>
|
|
|
<a :download="item.url">{{ item.original_name }}</a>
|
|
|
<div>
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
icon="el-icon-download"
|
|
|
circle
|
|
|
size="mini"
|
|
|
@click="down(item)"
|
|
|
></el-button>
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
icon="el-icon-view"
|
|
|
circle
|
|
|
size="mini"
|
|
|
@click="open(item.url)"
|
|
|
></el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<el-empty description="无"></el-empty>
|
|
|
</template>
|
|
|
</template>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="3">
|
|
|
<Anchor class="myanchor" show-ink :offset-top="64" @on-select="anchorSelect">
|
|
|
<AnchorLink href="#detail-pictures" title="资产图集" v-if="
|
|
|
(detail.id_assets_atlas_files_house_id_relation &&
|
|
|
detail.id_assets_atlas_files_house_id_relation.length > 0) ||
|
|
|
(detail.id_assets_atlas_files_land_id_relation &&
|
|
|
detail.id_assets_atlas_files_land_id_relation.length > 0)
|
|
|
" />
|
|
|
<AnchorLink href="#detail-info" title="基本信息" />
|
|
|
<AnchorLink href="#detail-link-land" title="关联土地" v-if="/\/house/g.test($route.path)"/>
|
|
|
<AnchorLink href="#detail-link-houses" title="关联房产" v-if="/\/land/g.test($route.path)"/>
|
|
|
<!-- <AnchorLink href="#detail-documents" title="证件图片" />-->
|
|
|
<AnchorLink href="#detail-histories" title="历史沿革" />
|
|
|
<AnchorLink href="#detail-assetsMap" title="资产地图" />
|
|
|
<!-- <AnchorLink href="#detail-safe" title="安全检查"></AnchorLink>-->
|
|
|
<AnchorLink href="#detail-contract" title="租赁合同"></AnchorLink>
|
|
|
<AnchorLink href="#detail-repair" title="维修保养"></AnchorLink>
|
|
|
<AnchorLink href="#detail-files" title="相关附件" />
|
|
|
</Anchor>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<div style="position:fixed;right: 40px;bottom: 80px;background: #fff;border-radius: 100%;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;font-size: 20px;cursor: pointer;" @click="print">
|
|
|
<Icon type="md-print" />
|
|
|
</div>
|
|
|
<div style="position:fixed;right: 40px;bottom: 30px;background: #fff;border-radius: 100%;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;font-size: 20px;cursor: pointer;" @click="isShowSearch = !isShowSearch">
|
|
|
<Icon type="md-search" />
|
|
|
</div>
|
|
|
|
|
|
<transition name="search-container">
|
|
|
<el-card v-show="isShowSearch" class="search-container">
|
|
|
<template #header>
|
|
|
<div style="display:flex;align-items: center;">
|
|
|
<p>搜索附件</p>
|
|
|
|
|
|
<i class="el-icon-close" style="margin-left: auto;" @click="isShowSearch = false"></i>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template>
|
|
|
<!-- <div>-->
|
|
|
<!-- <Button size="small" type="success" ghost>资产</Button>-->
|
|
|
<!-- <Button size="small" type="info" ghost>文件</Button>-->
|
|
|
<!-- </div>-->
|
|
|
<el-input v-model="searchKeyword" size="mini" style="margin-top: 4px;" placeholder="请输入名称" clearable>
|
|
|
<el-button type="primary" slot="append" icon="el-icon-search" @click="searchFile"></el-button>
|
|
|
</el-input>
|
|
|
|
|
|
<ul class="search-file-list">
|
|
|
<li v-for="(item, index) in filesFilter" :key="item.name+item.id">
|
|
|
<div style="display: flex;justify-content: space-between;align-items: center;">
|
|
|
<a style="flex-basis: 50%;" :download="item.url">{{index+1}}.{{ item.original_name }}</a>
|
|
|
|
|
|
<!-- <p style="flex-basis: 25%;flex-shrink: 0;">-->
|
|
|
<!-- {{ item.land.name ? `[土地]${item.land.name}` : `[房产]${item.house.name}` }}-->
|
|
|
<!-- </p>-->
|
|
|
|
|
|
<div>
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
icon="el-icon-download"
|
|
|
circle
|
|
|
size="mini"
|
|
|
@click="down(item)"
|
|
|
></el-button>
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
icon="el-icon-view"
|
|
|
circle
|
|
|
size="mini"
|
|
|
@click="open(item.url)"
|
|
|
></el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</template>
|
|
|
</el-card>
|
|
|
</transition>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import html2canvas from "html2canvas";
|
|
|
|
|
|
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 { download } from "@/utils/downloadRequest";
|
|
|
import { getFiles } from "@/api/common";
|
|
|
export default {
|
|
|
name: "detail",
|
|
|
data() {
|
|
|
return {
|
|
|
isShowSearch: false,
|
|
|
showModal: false,
|
|
|
codeUri: "",
|
|
|
center: [120.283692, 31.614211],
|
|
|
marker: {},
|
|
|
|
|
|
detail: {},
|
|
|
fields: [],
|
|
|
relation: [],
|
|
|
customForm: {
|
|
|
customFormId: "",
|
|
|
tableName: "",
|
|
|
},
|
|
|
|
|
|
histories: [],
|
|
|
leases: [],
|
|
|
inspections: [],
|
|
|
keeps: [],
|
|
|
units: new Map([
|
|
|
["dengjimianji", "m²"],
|
|
|
["shijimianji", "m²"],
|
|
|
["dikuaizongjia", "元"],
|
|
|
["dikuaimianji", "m²"],
|
|
|
["muqianjunjia", "元"],
|
|
|
]),
|
|
|
|
|
|
landFields: [
|
|
|
{
|
|
|
"prop": "tudiquanshuren",
|
|
|
"label": "土地权属人",
|
|
|
"width": 0,
|
|
|
"align": "left"
|
|
|
},
|
|
|
{
|
|
|
"prop": "name",
|
|
|
"label": "资产名称",
|
|
|
"width": 0,
|
|
|
"align": "left",
|
|
|
"fixed": "left"
|
|
|
},
|
|
|
{
|
|
|
"prop": "tudizhenghao",
|
|
|
"label": "土地证号",
|
|
|
"width": 0,
|
|
|
"align": "left"
|
|
|
},
|
|
|
{
|
|
|
"prop": "zuoluo",
|
|
|
"label": "坐落",
|
|
|
"width": 0,
|
|
|
"align": "left"
|
|
|
},
|
|
|
{
|
|
|
"prop": "zichanweizhi",
|
|
|
"label": "资产位置",
|
|
|
"width": 0,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "quanliren",
|
|
|
"label": "证载“权利人”",
|
|
|
"width": 0,
|
|
|
"align": "left"
|
|
|
},
|
|
|
{
|
|
|
"prop": "gongyouqingkuang",
|
|
|
"label": "共有情况",
|
|
|
"width": 0,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "shiyongnianxian",
|
|
|
"label": "使用年限（年）",
|
|
|
"width": 0,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "xianzhuang",
|
|
|
"label": "现状",
|
|
|
"width": 0,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "yongtu",
|
|
|
"label": "用途",
|
|
|
"width": 0,
|
|
|
"align": "left"
|
|
|
},
|
|
|
{
|
|
|
"prop": "shiyongquanleixing",
|
|
|
"label": "使用权类型",
|
|
|
"width": 0,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "lingzhengriqi",
|
|
|
"label": "领证日期",
|
|
|
"width": 0,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "zhongzhiriqi",
|
|
|
"label": "终止日期",
|
|
|
"width": 0,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "dengjimianji",
|
|
|
"label": "登记面积（m²）",
|
|
|
"width": 0,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "shijimianji",
|
|
|
"label": "实际面积（m²）",
|
|
|
"width": 0,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "ruzhangshijian",
|
|
|
"label": "入账时间",
|
|
|
"width": 0,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "zhangmianyuanzhi",
|
|
|
"label": "账面原值",
|
|
|
"width": 0,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "tudidengji",
|
|
|
"label": "土地等级",
|
|
|
"width": 0,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "tudishuidanjia",
|
|
|
"label": "土地税单价",
|
|
|
"width": 0,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "tudishui",
|
|
|
"label": "土地税",
|
|
|
"width": 0,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "tudishuijiaonazhuti",
|
|
|
"label": "土地税缴纳主体",
|
|
|
"width": 0,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "jiaoshuijine",
|
|
|
"label": "缴税金额",
|
|
|
"width": 0,
|
|
|
"align": "center"
|
|
|
}
|
|
|
],
|
|
|
houseTable: [
|
|
|
{
|
|
|
"prop": "quanshuren",
|
|
|
"label": "权属人",
|
|
|
"width": 0,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "name",
|
|
|
"label": "资产名称",
|
|
|
"minWidth": 200,
|
|
|
"fixed": "left",
|
|
|
"align": "left"
|
|
|
},
|
|
|
{
|
|
|
"prop": "quanzhenghao",
|
|
|
"label": "权证号",
|
|
|
"width": 0,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "zuoluo",
|
|
|
"label": "坐落",
|
|
|
"width": 0,
|
|
|
"align": "left"
|
|
|
},
|
|
|
{
|
|
|
"prop": "zichanweizhi",
|
|
|
"label": "房产位置",
|
|
|
"width": 0,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "quanliren",
|
|
|
"label": "证载“权利人”",
|
|
|
"width": 0,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "yongtu",
|
|
|
"label": "用途",
|
|
|
"width": 180,
|
|
|
"align": "left"
|
|
|
},
|
|
|
{
|
|
|
"prop": "zhuangtai",
|
|
|
"label": "现状",
|
|
|
"width": 160,
|
|
|
"align": "left"
|
|
|
},
|
|
|
{
|
|
|
"prop": "dengjishijian",
|
|
|
"label": "登记时间",
|
|
|
"width": 180,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "dengjimianji",
|
|
|
"label": "登记面积（m²）",
|
|
|
"width": 160,
|
|
|
"align": "right"
|
|
|
},
|
|
|
{
|
|
|
"prop": "shijimianji",
|
|
|
"label": "实际面积（m²）",
|
|
|
"width": 160,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "ruzhangshijian",
|
|
|
"label": "入账时间",
|
|
|
"width": 180,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "zhangmianyuanzhi",
|
|
|
"label": "账面原值",
|
|
|
"width": 160,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
"prop": "shiyongzhuangtai",
|
|
|
"label": "使用状态",
|
|
|
"width": 160,
|
|
|
"align": "center"
|
|
|
},
|
|
|
{
|
|
|
prop: "operate",
|
|
|
label: "查看",
|
|
|
align: 'center',
|
|
|
fixed: "right",
|
|
|
customFn: row => (
|
|
|
<div>
|
|
|
<Button type="primary"
|
|
|
size="small"
|
|
|
on={{['click']:_ => this.$router.push(/houseDetail/+row.id)}}>查看</Button>
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
],
|
|
|
inspectionTable: [
|
|
|
{
|
|
|
fixed: 'left',
|
|
|
type: 'index',
|
|
|
width: 46,
|
|
|
},
|
|
|
{
|
|
|
label: "检查记录",
|
|
|
prop: "jianchajilu",
|
|
|
minWidth: 200,
|
|
|
align: "left"
|
|
|
},
|
|
|
{
|
|
|
label: "日期",
|
|
|
prop: "riqi",
|
|
|
width: 160
|
|
|
}
|
|
|
],
|
|
|
keepTable: [
|
|
|
{
|
|
|
fixed: 'left',
|
|
|
type: 'index',
|
|
|
width: 46,
|
|
|
},
|
|
|
{
|
|
|
label: "保养内容",
|
|
|
prop: "baoyangneirong",
|
|
|
minWidth: 200,
|
|
|
align: "left"
|
|
|
},
|
|
|
{
|
|
|
label: "保养日期",
|
|
|
prop: "baoyangriqi",
|
|
|
width: 160
|
|
|
},
|
|
|
{
|
|
|
label: "经办人",
|
|
|
prop: "jingbanren",
|
|
|
width: 140
|
|
|
}
|
|
|
],
|
|
|
leaseTable: [
|
|
|
{
|
|
|
fixed: 'left',
|
|
|
type: 'index',
|
|
|
width: 46,
|
|
|
},
|
|
|
{
|
|
|
label: '资产名称',
|
|
|
prop: 'assets',
|
|
|
width: 180,
|
|
|
fixed: 'left',
|
|
|
align: 'left',
|
|
|
customFn: row => {
|
|
|
return (
|
|
|
<div>
|
|
|
{
|
|
|
row.land?.map(i => (
|
|
|
<div>
|
|
|
<Tag color="green">{ i.name }</Tag>
|
|
|
</div>
|
|
|
))
|
|
|
}
|
|
|
{
|
|
|
row.houses?.map(i => (
|
|
|
<div>
|
|
|
<Tag color="blue">{ i.name }</Tag>
|
|
|
</div>
|
|
|
))
|
|
|
}
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
label: '承租方',
|
|
|
prop: 'chengzufang',
|
|
|
width: 150
|
|
|
},
|
|
|
{
|
|
|
label: '租赁期限',
|
|
|
width: 190,
|
|
|
customFn:row => {
|
|
|
return (
|
|
|
<div>
|
|
|
<span>{ this.$moment(new Date(row.zulinkaishiqixian)).format('YYYY.MM.DD') }</span>
|
|
|
<span> - </span>
|
|
|
<span>{ this.$moment(new Date(row.zulinjieshuqixian)).format('YYYY.MM.DD') }</span>
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
label: '年租金单价',
|
|
|
prop: 'nianzujindanjia',
|
|
|
align: 'right',
|
|
|
width: 120
|
|
|
},
|
|
|
{
|
|
|
label: '签订年月',
|
|
|
prop: 'qiandingnianyue',
|
|
|
align: 'right',
|
|
|
width: 120
|
|
|
},
|
|
|
{
|
|
|
label: "租金收取计划",
|
|
|
multiHd: [
|
|
|
{
|
|
|
width: 200,
|
|
|
prop: "zujindiyicidaoweishijian",
|
|
|
label: "租金第一次到位时间",
|
|
|
customFn: ({ row }) => {
|
|
|
return (
|
|
|
<div>
|
|
|
{
|
|
|
row.id_lease_plans_lease_id_relation?.map(i => (
|
|
|
<p>{ i.zujindiyicidaoweishijian }</p>
|
|
|
))
|
|
|
}
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
width: 160,
|
|
|
prop: "shijidaozhangriqi",
|
|
|
label: "实际到账日期",
|
|
|
customFn: ({ row }) => {
|
|
|
return (
|
|
|
<div>
|
|
|
{
|
|
|
row.id_lease_plans_lease_id_relation?.map(i => (
|
|
|
<p>{ i.shijidaozhangriqi }</p>
|
|
|
))
|
|
|
}
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
width: 140,
|
|
|
prop: "yingshou",
|
|
|
label: "应收租金",
|
|
|
customFn: ({ row }) => {
|
|
|
return (
|
|
|
<div>
|
|
|
{
|
|
|
row.id_lease_plans_lease_id_relation?.map(i => (
|
|
|
<p style="text-align: right;">{ i.yingshou }</p>
|
|
|
))
|
|
|
}
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
width: 140,
|
|
|
prop: "shijidaozhang",
|
|
|
label: "实际到账",
|
|
|
customFn: ({ row }) => {
|
|
|
return (
|
|
|
<div>
|
|
|
{
|
|
|
row.id_lease_plans_lease_id_relation?.map(i => (
|
|
|
<p style="text-align: right;">{ i.shijidaozhang }</p>
|
|
|
))
|
|
|
}
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
width: 200,
|
|
|
prop: "weidaoweiyuanyin",
|
|
|
label: "未到账原因",
|
|
|
customFn: ({ row }) => {
|
|
|
return (
|
|
|
<div>
|
|
|
{
|
|
|
row.id_lease_plans_lease_id_relation?.map(i => (
|
|
|
<p>{ i.weidaoweiyuanyin }</p>
|
|
|
))
|
|
|
}
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
],
|
|
|
|
|
|
|
|
|
searchKeyword: "",
|
|
|
searchFiles: [],
|
|
|
searchFileTotal: 0,
|
|
|
|
|
|
myFiles: [],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
assetsMapFullscreen () {
|
|
|
const dom = document.querySelector('#detail-map')
|
|
|
this.$store.dispatch('app/toggleDevice',"mobile")
|
|
|
this.$store.commit('app/CLOSE_SIDEBAR')
|
|
|
|
|
|
dom.classList.add('dom-fullscreen')
|
|
|
|
|
|
const closeDom = document.createElement('div')
|
|
|
closeDom.classList.add('dom-fullscreen-close')
|
|
|
closeDom.innerHTML = '<i class="el-icon-circle-close"></i>'
|
|
|
document.body.append(closeDom)
|
|
|
closeDom.addEventListener('click',() => {
|
|
|
dom.classList.remove('dom-fullscreen')
|
|
|
closeDom.remove()
|
|
|
this.$store.dispatch('app/toggleDevice',"desktop")
|
|
|
this.$store.commit('app/TOGGLE_SIDEBAR')
|
|
|
})
|
|
|
},
|
|
|
|
|
|
anchorSelect (href) {
|
|
|
const { y } = document.querySelector(href)?.getBoundingClientRect()
|
|
|
const el = document.querySelector(".app-main-scroll")
|
|
|
let scrollTop = y - 70 + el.scrollTop
|
|
|
el.scrollTo({
|
|
|
left: 0,
|
|
|
top: scrollTop,
|
|
|
behavior: "smooth"
|
|
|
})
|
|
|
},
|
|
|
|
|
|
copyLocation () {
|
|
|
const input = document.createElement("input");
|
|
|
input.setAttribute("readonly", "readonly"); // 设置为只读, 防止在 ios 下拉起键盘
|
|
|
input.value = this.detail.zichanweizhi;
|
|
|
document.body.appendChild(input);
|
|
|
input.setSelectionRange(0, 9999); // 防止 ios 下没有全选内容而无法复制
|
|
|
input.select();
|
|
|
document.execCommand("copy");
|
|
|
document.body.removeChild(input);
|
|
|
this.$message({
|
|
|
type: "success",
|
|
|
message: `已复制:${input.value}`,
|
|
|
});
|
|
|
},
|
|
|
|
|
|
async searchFile () {
|
|
|
try {
|
|
|
const res = await getFiles({ keyword: this.searchKeyword });
|
|
|
this.searchFiles = res.list.data;
|
|
|
this.searchFileTotal = res.list.total
|
|
|
} catch (err) {
|
|
|
|
|
|
}
|
|
|
},
|
|
|
|
|
|
open(url) {
|
|
|
this.$bus.$emit('online-file', url)
|
|
|
},
|
|
|
|
|
|
down(e) {
|
|
|
download(e.url, "get", {}, e.original_name);
|
|
|
},
|
|
|
|
|
|
init() {
|
|
|
//创建卫星图层
|
|
|
const satellite = new AMap.TileLayer.Satellite();
|
|
|
const roadNet = new AMap.TileLayer.RoadNet();
|
|
|
this.map = new AMap.Map("detail-map", {
|
|
|
center: this.center,
|
|
|
mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", // 设置地图的显示样式
|
|
|
zoom: 60,
|
|
|
layers: [satellite, roadNet]
|
|
|
});
|
|
|
this.map.plugin(["AMap.ToolBar"],() => {
|
|
|
//加载工具条
|
|
|
this.map.addControl(new AMap.ToolBar());
|
|
|
});
|
|
|
|
|
|
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.name;
|
|
|
markerContent.appendChild(markerImg);
|
|
|
markerContent.appendChild(markerSpan);
|
|
|
marker.setContent(markerContent);
|
|
|
|
|
|
this.marker = marker;
|
|
|
this.map.add(this.marker);
|
|
|
this.map.setFitView(this.marker);
|
|
|
this.map.setZoom(15);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
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.filter(i => i.list_show).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
|
|
|
.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.params.id,
|
|
|
table_name: this.customForm.tableName,
|
|
|
});
|
|
|
this.detail = detail;
|
|
|
this.init();
|
|
|
|
|
|
if (/\/land/g.test(this.$route.path)) {
|
|
|
this.myFiles.push(...detail.id_asset_file_files_land_id_relation);
|
|
|
this.myFiles.push(...detail.id_asset_picture_files_land_id_relation);
|
|
|
this.myFiles.push(...detail.id_assets_atlas_files_land_id_relation);
|
|
|
} else {
|
|
|
this.myFiles.push(...detail.id_asset_file_files_house_id_relation);
|
|
|
this.myFiles.push(...detail.id_asset_picture_files_house_id_relation);
|
|
|
this.myFiles.push(...detail.id_assets_atlas_files_house_id_relation);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
|
|
|
async getHistories () {
|
|
|
const res = await index({
|
|
|
table_name: 'his_evolutions',
|
|
|
page: 1,
|
|
|
page_size: 999,
|
|
|
sort_name: "fashengshijian",
|
|
|
filter:[
|
|
|
{
|
|
|
key: /\/land/g.test(this.$route.path) ? 'land_id' : 'house_id',
|
|
|
op: 'eq',
|
|
|
value: this.$route.params.id
|
|
|
}
|
|
|
]
|
|
|
})
|
|
|
this.histories = res.data;
|
|
|
|
|
|
res.data.forEach(i => {
|
|
|
this.myFiles.push(...i.tupian_detail)
|
|
|
})
|
|
|
},
|
|
|
|
|
|
async getLeases () {
|
|
|
if(this.detail.leases.length <= 0) return
|
|
|
const res = await index({
|
|
|
table_name: 'leases',
|
|
|
page: 1,
|
|
|
page_size: 999,
|
|
|
filter:[
|
|
|
{
|
|
|
key: "id",
|
|
|
op: 'eq_many',
|
|
|
value: this.detail.leases.map(i => i.id).toString()
|
|
|
}
|
|
|
]
|
|
|
})
|
|
|
this.leases = res.data;
|
|
|
|
|
|
res.data.forEach(i => {
|
|
|
if (i.file_detail) {
|
|
|
this.myFiles.push(...i.file_detail)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
|
|
|
async getKeeps () {
|
|
|
const res = await index({
|
|
|
table_name: 'asset_safety_keeps',
|
|
|
page: 1,
|
|
|
page_size: 999,
|
|
|
filter:[
|
|
|
{
|
|
|
key: /\/land/g.test(this.$route.path) ? 'land_id' : 'house_id',
|
|
|
op: 'eq',
|
|
|
value: this.$route.params.id
|
|
|
}
|
|
|
]
|
|
|
})
|
|
|
this.keeps = res.data;
|
|
|
|
|
|
res.data.forEach(i => {
|
|
|
this.myFiles.push(...i.fujian_detail)
|
|
|
})
|
|
|
},
|
|
|
|
|
|
async getInspections () {
|
|
|
const res = await index({
|
|
|
table_name: 'asset_safety_inspections',
|
|
|
page: 1,
|
|
|
page_size: 999,
|
|
|
filter:[
|
|
|
{
|
|
|
key: /\/land/g.test(this.$route.path) ? 'land_id' : 'house_id',
|
|
|
op: 'eq',
|
|
|
value: this.$route.params.id
|
|
|
}
|
|
|
]
|
|
|
})
|
|
|
this.inspections = res.data;
|
|
|
|
|
|
res.data.forEach(i => {
|
|
|
this.myFiles.push(...i.fujian_detail)
|
|
|
})
|
|
|
},
|
|
|
|
|
|
print () {
|
|
|
const iframeEL=document.querySelector('.print-iframe');
|
|
|
if(iframeEL){
|
|
|
iframeEL.remove();
|
|
|
}
|
|
|
const dom = document.querySelector('.print-content')
|
|
|
html2canvas(dom,{
|
|
|
useCORS: true,
|
|
|
ignoreElements:ele => {
|
|
|
const ignoreIds = ['detail-pictures']
|
|
|
if (ignoreIds.indexOf(ele.id) !== -1) {
|
|
|
return true
|
|
|
}
|
|
|
}
|
|
|
}).then(canvas => {
|
|
|
const img = new Image();
|
|
|
img.src = canvas.toDataURL('image/png');
|
|
|
img.style.width='100%'
|
|
|
// 在 iframe 文档中添加图片元素
|
|
|
const iframe = document.createElement('iframe');
|
|
|
iframe.style.width='100%'
|
|
|
iframe.classList.add('print-iframe')
|
|
|
document.body.appendChild(iframe)
|
|
|
const doc = iframe.contentWindow.document
|
|
|
doc.body.appendChild(img);
|
|
|
//避免图片没有加载完成就打印
|
|
|
setTimeout(()=>{
|
|
|
iframe.contentWindow.print();
|
|
|
},100)
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
|
|
|
computed: {
|
|
|
filesFilter () {
|
|
|
return this.myFiles.filter((i) => (new RegExp(`${this.searchKeyword}.`).test(i.original_name)));
|
|
|
},
|
|
|
|
|
|
picList() {
|
|
|
if (/\/house/g.test(this.$route.path)) {
|
|
|
return (
|
|
|
this.detail?.id_assets_atlas_files_house_id_relation?.map(
|
|
|
(i) => i.url
|
|
|
) || []
|
|
|
);
|
|
|
}
|
|
|
if (/\/land/g.test(this.$route.path)) {
|
|
|
return (
|
|
|
this.detail?.id_assets_atlas_files_land_id_relation?.map(
|
|
|
(i) => i.url
|
|
|
) || []
|
|
|
);
|
|
|
}
|
|
|
},
|
|
|
contentFormat() {
|
|
|
return function (i) {
|
|
|
let { field, _relations } = i;
|
|
|
if (field === 'bufuqingkuang') {
|
|
|
if ((this.detail.tudiquanshuren !== this.detail.quanliren) ||
|
|
|
(this.detail.dengjimianji !== this.detail.shijimianji)) {
|
|
|
let text = ""
|
|
|
text += this.detail.tudiquanshuren !== this.detail.quanliren
|
|
|
? " 权利人名称不符 "
|
|
|
: ""
|
|
|
text += this.detail.dengjimianji !== this.detail.shijimianji
|
|
|
? " 登记面积不符 "
|
|
|
: ""
|
|
|
return text;
|
|
|
}
|
|
|
return "无"
|
|
|
}
|
|
|
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.getHistories()
|
|
|
this.getKeeps()
|
|
|
this.getLeases()
|
|
|
// this.getInspections()
|
|
|
})
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.el-card__body > .el-descriptions__title,.el-card__body > ::v-deep .el-descriptions__title {
|
|
|
|
|
|
position: relative;
|
|
|
padding-left: 14px;
|
|
|
|
|
|
&::before {
|
|
|
content: '';
|
|
|
width: 4px;
|
|
|
background: linear-gradient(to bottom,rgb(57, 129, 199), rgba(118, 148, 183, 0.7));
|
|
|
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: 2px;
|
|
|
bottom: 2px;
|
|
|
}
|
|
|
}
|
|
|
::v-deep .el-card {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
::v-deep .el-empty__image {
|
|
|
width: 120px;
|
|
|
}
|
|
|
|
|
|
a {
|
|
|
color: $primaryColor;
|
|
|
text-decoration: none;
|
|
|
transition: all 0.2s;
|
|
|
}
|
|
|
|
|
|
a:hover {
|
|
|
color: $primaryColor;
|
|
|
text-decoration: underline;
|
|
|
}
|
|
|
|
|
|
::v-deep .ivu-anchor-link-title:hover {
|
|
|
transition: all 0.2s;
|
|
|
color: $primaryColor !important;
|
|
|
}
|
|
|
|
|
|
.el-image + .el-image {
|
|
|
margin-left: 6px;
|
|
|
}
|
|
|
|
|
|
.search-container-enter-active {
|
|
|
animation: slide-in-fwd-br 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
|
|
|
|
|
}
|
|
|
.search-container-leave-active {
|
|
|
animation: slide-out-fwd-br 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
|
|
|
}
|
|
|
@keyframes slide-in-fwd-br {
|
|
|
0% {
|
|
|
transform: translateZ(-1400px) translateY(800px) translateX(1000px);
|
|
|
opacity: 0;
|
|
|
}
|
|
|
100% {
|
|
|
transform: translateZ(0) translateY(0) translateX(0);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
@keyframes slide-out-fwd-br {
|
|
|
0% {
|
|
|
transform: translateZ(0) translateY(0) translateX(0);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
100% {
|
|
|
transform: translateZ(600px) translateY(300px) translateX(400px);
|
|
|
opacity: 0;
|
|
|
}
|
|
|
}
|
|
|
.search-container {
|
|
|
min-width: 460px;
|
|
|
background: #fff;
|
|
|
|
|
|
z-index: 4000;
|
|
|
position: fixed;
|
|
|
right: 100px;
|
|
|
bottom: 30px;
|
|
|
}
|
|
|
|
|
|
.search-file-list {
|
|
|
|
|
|
margin-top: 20px;
|
|
|
li {
|
|
|
transition: all 0.2s;
|
|
|
list-style: none;
|
|
|
line-height: 1.5;
|
|
|
border-radius: 6px;
|
|
|
border: 1px solid transparent;
|
|
|
padding: 6px 10px;
|
|
|
|
|
|
&:hover {
|
|
|
border-color: $primaryColor;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.myanchor {
|
|
|
|
|
|
position: fixed;
|
|
|
}
|
|
|
</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);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.dom-fullscreen {
|
|
|
position: fixed !important;
|
|
|
z-index: 99999999 !important;
|
|
|
width: 100vw !important;
|
|
|
height: 100vh !important;
|
|
|
top: 0 !important;
|
|
|
left: 0 !important;
|
|
|
transition: all .2s;
|
|
|
}
|
|
|
.dom-fullscreen-close {
|
|
|
position: fixed !important;
|
|
|
z-index: 999999999 !important;
|
|
|
top: 50px !important;
|
|
|
right: 50px !important;
|
|
|
background: #fff;
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
border-radius: 100%;
|
|
|
transition: all .2s;
|
|
|
font-size: 50px;
|
|
|
}
|
|
|
</style>
|
