|
|
@@ -0,0 +1,426 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="title-container">
|
|
|
+ <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
|
|
|
+ </div>
|
|
|
+ <div class="query-class">
|
|
|
+ <el-input placeholder="请输入内容" v-model.trim="queryParam.location" class="input-with-select">
|
|
|
+ <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 130px;">
|
|
|
+ <el-option label="口估地址" value="location"></el-option>
|
|
|
+ <el-option label="口估小区名字" value="communityName"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-input>
|
|
|
+ <el-input style="margin-left: 20px; width: 300px;" type="number" v-model.number="queryParam.acreage" placeholder="请输入面积">
|
|
|
+ <template slot="prepend">口估面积</template>
|
|
|
+ </el-input>
|
|
|
+ <el-input style="margin-left: 20px; width: 300px; color: red;" :value="currentDate" disabled readonly>
|
|
|
+ <template slot="prepend">价值时点</template>
|
|
|
+ </el-input>
|
|
|
+ <el-button style="margin-left: 20px;" type="success">口估查询</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-card class="data-class" shadow="never">
|
|
|
+ <span style="font-weight: bold;">大友个贷数据</span>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <div>
|
|
|
+ <el-table ref="table" slot="table" size="medium" :data="data" border
|
|
|
+ :row-key="getRowKeys" :height=maxHeight fit stripe highlight-current-row
|
|
|
+ :header-row-style="{ color: '#333333' }" style="
|
|
|
+ border-left: 1px solid #ebeced;
|
|
|
+ border-right: 1px solid #ebeced;
|
|
|
+ color: #333333;
|
|
|
+ " >
|
|
|
+ <el-table-column label="订单号" align="center" prop="orderId">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.orderId }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="坐落" align="center" prop="location">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.location }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="小区名称" align="center" prop="communityName">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.communityName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="评估单价" align="center" prop="price">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.price }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="评估面积" align="center" prop="acreage">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.acreage }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="评估总价" align="center" prop="amount">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.amount }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="楼层" align="center" prop="atFloor">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.atFloor }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="房屋类型" align="center" prop="buildingType">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.buildingType }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="户型" align="center" prop="houseType">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.houseType }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="装修情况" align="center" prop="decoration">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.decoration }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="价值时点" align="center" prop="valueTiming">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.valueTiming }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="匹配方式" align="center" prop="matching">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.matching }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ <el-card class="data-class" shadow="never">
|
|
|
+ <span style="font-weight: bold;">系统数据 </span>
|
|
|
+ <el-tag type="danger" effect="plain">{{ limit }}</el-tag>
|
|
|
+ <el-tag style="margin-left: 5px;" effect="plain">{{ queryTarget }}</el-tag>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <div style="width: 100%; display: flex;">
|
|
|
+ <el-card :style="activateTable=='deal'?activeStyle:disActiveStyle" shadow="hover" @click.native="activateTable = 'deal'">
|
|
|
+ <div style="padding: 3px;font-size: 20px;">
|
|
|
+ <div>
|
|
|
+ <span style="font-weight: bold; color: red;">成交价：{{ dealPrice }} ￥</span> =
|
|
|
+ <span style="margin-left: 20px; margin-right: 20px; font-weight: bold;">{{ dealAvgPrice }}</span> *
|
|
|
+ <span style="margin-left: 20px; margin-right: 20px; font-weight: bold;">{{ timeParam }}</span> *
|
|
|
+ <span style="margin-left: 20px; margin-right: 20px; font-weight: bold;">{{ acreageParam }}</span> *
|
|
|
+ <span style="margin-left: 20px; margin-right: 20px; font-weight: bold;">{{ overAllParam }}</span>
|
|
|
+
|
|
|
+ <span style="margin-left: 50px;">案例个数：{{ qiYuDealSize }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <el-tag style="margin-left: 200px; font-size: 13px; ">成交均价</el-tag>
|
|
|
+ <el-tag style="margin-left: 28px; font-size: 13px; ">时间修正</el-tag>
|
|
|
+ <el-tag style="margin-left: 3px; font-size: 13px; ">面价修正</el-tag>
|
|
|
+ <el-tag style="margin-left: 3px; font-size: 13px; ">综合修正</el-tag>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <el-card :style="activateTable=='up'?activeStyle:disActiveStyle" shadow="hover" @click.native="activateTable = 'up'">
|
|
|
+ <div style="padding: 3px;font-size: 20px;">
|
|
|
+ <div>
|
|
|
+ <span style="font-weight: bold; color: red;">挂牌价：{{ upPrice }} ￥</span> =
|
|
|
+ <span style="margin-left: 20px; margin-right: 20px; font-weight: bold;">{{ dealAvgPrice }}</span> *
|
|
|
+ <span style="margin-left: 20px; margin-right: 20px; font-weight: bold;">{{ timeParam }}</span> *
|
|
|
+ <span style="margin-left: 20px; margin-right: 20px; font-weight: bold;">{{ acreageParam }}</span> *
|
|
|
+ <span style="margin-left: 20px; margin-right: 20px; font-weight: bold;">{{ overAllParam }}</span>
|
|
|
+
|
|
|
+ <span style="margin-left: 50px;">案例个数：{{ qiYuDealSize }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <el-tag style="margin-left: 200px; font-size: 13px; ">挂牌 均价</el-tag>
|
|
|
+ <el-tag style="margin-left: 28px; font-size: 13px; ">时间修正</el-tag>
|
|
|
+ <el-tag style="margin-left: 3px; font-size: 13px; ">面价修正</el-tag>
|
|
|
+ <el-tag style="margin-left: 3px; font-size: 13px; ">综合修正</el-tag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <div class="dealData-class" v-show="activateTable=='deal'">
|
|
|
+ <el-table ref="dealTable" slot="table" size="medium" :data="dealData" border
|
|
|
+ :row-key="getRowKeys" :height=maxHeight fit stripe highlight-current-row
|
|
|
+ :header-row-style="{ color: '#333333' }" style="
|
|
|
+ border-left: 1px solid #ebeced;
|
|
|
+ border-right: 1px solid #ebeced;
|
|
|
+ color: #333333;
|
|
|
+ " >
|
|
|
+ <el-table-column label="坐落" align="center" prop="location">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.location }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="小区名称" align="center" prop="communityName">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.communityName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="评估单价" align="center" prop="price">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.price }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="评估面积" align="center" prop="acreage">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.acreage }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="评估总价" align="center" prop="amount">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.amount }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="区域" align="center" prop="areaName">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.areaName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="板块" align="center" prop="businessName">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.businessName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="用途" align="center" prop="useType">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.useType }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="房屋类型" align="center" prop="buildingType">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.buildingType }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="装修" align="center" prop="decoration">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.decoration }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="楼层" align="center" prop="floor">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.floor }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="户型" align="center" prop="houseType">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.houseType }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="朝向" align="center" prop="orientation">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.orientation }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="结构" align="center" prop="structure">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.structure }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="成交日期" align="center" prop="dealDate">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.dealDate }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="数据源" align="center" prop="dataResource">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.dataResource }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="upData-class" v-show="activateTable=='up'">
|
|
|
+ <el-table ref="upTable" slot="table" size="medium" :data="dealData" border
|
|
|
+ :row-key="getRowKeys" :height=maxHeight fit stripe highlight-current-row
|
|
|
+ :header-row-style="{ color: '#333333' }" style="
|
|
|
+ border-left: 1px solid #ebeced;
|
|
|
+ border-right: 1px solid #ebeced;
|
|
|
+ color: #333333;
|
|
|
+ " >
|
|
|
+ <el-table-column label="坐落" align="center" prop="location">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.location }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="小区名称" align="center" prop="communityName">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.communityName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="评估单价" align="center" prop="price">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.price }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="评估面积" align="center" prop="acreage">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.acreage }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="评估总价" align="center" prop="amount">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.amount }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="区域" align="center" prop="areaName">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.areaName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="板块" align="center" prop="businessName">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.businessName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="用途" align="center" prop="useType">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.useType }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="房屋类型" align="center" prop="buildingType">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.buildingType }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="装修" align="center" prop="decoration">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.decoration }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="楼层" align="center" prop="floor">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.floor }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="户型" align="center" prop="houseType">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.houseType }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="朝向" align="center" prop="orientation">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.orientation }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="结构" align="center" prop="structure">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.structure }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="挂牌日期" align="center" prop="upDate">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.upDate }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="数据源" align="center" prop="dataResource">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <span>{{ row.dataResource }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import YPageListLayout from '@/components/YPageListLayout'
|
|
|
+import Breadcrumb from '@/components/Breadcrumb'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'personalFacePrice',
|
|
|
+ components: {
|
|
|
+ Breadcrumb,
|
|
|
+ YPageListLayout,
|
|
|
+ },
|
|
|
+
|
|
|
+ watch:{
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ currentDate() {
|
|
|
+ let currentDate = new Date();
|
|
|
+ let year = currentDate.getFullYear();
|
|
|
+ let month = currentDate.getMonth() + 1; // 注意月份从0开始，需要加1
|
|
|
+ let day = currentDate.getDate();
|
|
|
+
|
|
|
+ return year + "年" + month + "月" + day +"日";
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dyData: [],
|
|
|
+ select: 'location',
|
|
|
+ queryParam:{
|
|
|
+ location:null,
|
|
|
+ acreage:null
|
|
|
+ },
|
|
|
+ dealData:[],
|
|
|
+ activateTable:'deal',
|
|
|
+ activeStyle:"width:50%;height:80px;background-color:#f1f4fd;",
|
|
|
+ disActiveStyle:"width:50%;height:80px;",
|
|
|
+ dealPrice:12023,
|
|
|
+ timeParam:1,
|
|
|
+ acreageParam:1,
|
|
|
+ overAllParam:1,
|
|
|
+ dealAvgPrice:12300,
|
|
|
+ upPrice:16923,
|
|
|
+ limit:"一年内",
|
|
|
+ queryTarget:"成都市青羊区光华北一路527号7栋3单元8层805号",
|
|
|
+ qiYuDealSize:12
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ clickCard(val){
|
|
|
+ this.activateTable = val;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+.query-class{
|
|
|
+ margin-top: 20px ;
|
|
|
+}
|
|
|
+
|
|
|
+.input-with-select{
|
|
|
+ width: 30%;
|
|
|
+ height: 30px;
|
|
|
+}
|
|
|
+.el-select .el-input {
|
|
|
+ width: 130px;
|
|
|
+ }
|
|
|
+ .input-with-select .el-input-group__prepend {
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+/deep/.el-input.is-disabled .el-input__inner{
|
|
|
+ color:red;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.data-class{
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.actiateCard{
|
|
|
+ background-color: #f1f4fd;
|
|
|
+}
|
|
|
+</style>
|
