jiangyy
3 years ago
7 changed files with 3509 additions and 351 deletions
File diff suppressed because it is too large
@ -0,0 +1,313 @@ |
|||
<template> |
|||
<div> |
|||
<div class="dialog-h-content scroll-h"> |
|||
<div v-if="view_real_data" |
|||
class="div_tuomin"> |
|||
<el-button size="mini" |
|||
class="diy-button--search" |
|||
@click="handleTuomin">显示脱敏信息</el-button> |
|||
</div> |
|||
<div v-if="initLoading" |
|||
class="m-row"> |
|||
<div class="m-info"> |
|||
<div class="info-prop"> |
|||
<span class="info-title-3">姓名：</span> |
|||
<span>{{ formData.name||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-3">手机号：</span> |
|||
<span>{{ formData.showMobile||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-3">证件号：</span> |
|||
<span>{{ formData.showIdCard||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-3">现居地：</span> |
|||
<span>{{ formData.presentAddress||'--' }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-3">详细地址：</span> |
|||
<span>{{ formData.detailAddress||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-3">来自地区：</span> |
|||
<span>{{ formData.sourceAddress||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-3">详细地址：</span> |
|||
<span>{{ formData.comeAreaFull||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-3">来到本地时间：</span> |
|||
<span>{{ formData.arriveTime||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-3">返回方式：</span> |
|||
<span>{{ formData.comeMode||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-3">班次：</span> |
|||
<span>{{ formData.shift||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-3">48小时核酸：</span> |
|||
<span>{{ formData.carryHesuanProof||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-3">健康码异常：</span> |
|||
<span>{{ formData.healthCodeAbnormal||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-3">行程码异常：</span> |
|||
<span>{{ formData.travelCodeAbnormal||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-3">核酸检测报告异常：</span> |
|||
<span>{{ formData.detectionAbnormal||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-3">两码一报告状态：</span> |
|||
<span>{{ formData.twoCodeOneReportStatus||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-3">是否有外地旅居史：</span> |
|||
<span>{{ formData.nonlocalResidenceHistory||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-3">途径地区：</span> |
|||
<span>{{ formData.viaAddressShow||'--' }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-3">同行人：</span> |
|||
<span>{{ formData.travelPersonnel||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-3">户籍地：</span> |
|||
<span>{{ formData.registeredResidenceCity||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-3">户籍详细地址：</span> |
|||
<span>{{ formData.registeredResidenceAddress||'--' }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-3">是否带车：</span> |
|||
<span>{{ formData.carryVehicle||'--' }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-3">带车车牌号：</span> |
|||
<span>{{ formData.carryVehicleNumber||'--' }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-3">车辆颜色：</span> |
|||
<span>{{ formData.carryVehicleNumberColor||'--' }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-3">目的地交通场站：</span> |
|||
<span>{{ formData.destinationStation||'--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-3">入鲁时间：</span> |
|||
<span>{{ formData.arriveLuTime||'--' }}</span> |
|||
</div> |
|||
<div v-if="!formData.travelCodeImg" |
|||
class="info-prop"> |
|||
<span class="info-title-3">行程码：</span> |
|||
<span>{{ '--' }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop" |
|||
v-if="formData.travelCodeImg"> |
|||
<span class="info-title-3">行程码：</span> |
|||
|
|||
<div class="info-pics"> |
|||
|
|||
<img style="width:80px;height:80px" |
|||
:src="formData.travelCodeImg" |
|||
@click="watchImg(formData.travelCodeImg)"> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-3">离开本地时间：</span> |
|||
<span>{{ formData.leaveTheRiskAreaTime||'--' }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-3">备注：</span> |
|||
<span>{{ formData.remark||'--' }}</span> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="div-btn"> |
|||
<el-button size="small" |
|||
@click="handleCancle">关 闭</el-button> |
|||
<!-- <el-button v-if="formType != 'detail'" |
|||
size="small" |
|||
type="primary" |
|||
:disabled="btnDisable" |
|||
@click="handleComfirm('ref_form')">确 定</el-button> --> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
import { dateFormats } from '@/utils/index' |
|||
import { isCard, isMobile } from '@/utils/validate' |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
|
|||
return { |
|||
|
|||
initLoading: false, |
|||
|
|||
selId: '', |
|||
formData: {}, |
|||
|
|||
} |
|||
}, |
|||
components: {}, |
|||
async mounted () { |
|||
const { user } = this.$store.state |
|||
this.agencyId = user.agencyId |
|||
|
|||
}, |
|||
destroyed () { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
async initForm (row) { |
|||
console.log('row----', row) |
|||
|
|||
this.formData.agencyId = this.agencyId |
|||
this.selId = row.id |
|||
await this.loadFormData(row.id) |
|||
|
|||
this.initLoading = true |
|||
|
|||
|
|||
}, |
|||
async handleTuomin () { |
|||
const url = "/data/aggregator/epmetuser/detailByType"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
id: this.selId, |
|||
type: "routeFollow", |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.$set(this.formData, 'showMobile', data.mobile) |
|||
this.$set(this.formData, 'showIdCard', data.idCard) |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
|
|||
}, |
|||
|
|||
async loadFormData (id) { |
|||
|
|||
const url = '/epmetuser/tripreport/yt-detail ' |
|||
let params = { |
|||
id, |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
console.log('deda-------', data) |
|||
this.formData = { ...data, channel: [], content: '' } |
|||
|
|||
if (data.userType == 'icresi') this.isFromResi = true |
|||
|
|||
this.formData.viaAddressShow = '' |
|||
if (this.formData.viaProvince) { |
|||
this.formData.viaAddressShow = this.formData.viaAddressShow + this.formData.viaProvince |
|||
} |
|||
if (this.formData.viaCity) { |
|||
this.formData.viaAddressShow = this.formData.viaAddressShow + '-' + this.formData.viaCity |
|||
} |
|||
if (this.formData.viaCounty) { |
|||
this.formData.viaAddressShow = this.formData.viaAddressShow + '-' + this.formData.viaCounty |
|||
} |
|||
|
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
watchImg (src) { |
|||
window.open(src); |
|||
}, |
|||
handleCancle () { |
|||
// this.resetData() |
|||
this.$emit('dialogCancle') |
|||
|
|||
}, |
|||
|
|||
resetData () { |
|||
|
|||
}, |
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
props: { |
|||
view_real_data: {//显示【显示脱敏信息】按钮 |
|||
type: Boolean, |
|||
default: false, |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/management/detail-main.scss"; |
|||
|
|||
.div_tuomin { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 40px; |
|||
z-index: 1000; |
|||
} |
|||
</style> |
|||
|
|||
|
|||
File diff suppressed because it is too large
@ -0,0 +1,750 @@ |
|||
<template> |
|||
<div class="warning-box"> |
|||
<!-- 组织路由 --> |
|||
<div class="div_top"> |
|||
<div class="router_line"></div> |
|||
<div class="div_router"> |
|||
<span class="router_parents" |
|||
v-for="(item,index) in runAgencyArray" |
|||
@click="handleClickAgency(index)" |
|||
:key="index">{{item.orgName}}<span class="arrow">></span></span> |
|||
|
|||
<span class="router_child">{{orgName}}</span> |
|||
</div> |
|||
</div> |
|||
<cpt-card v-if="!showHouseList&&!showPeopleList" |
|||
:min-full-screen="true"> |
|||
<div class="card-title"> |
|||
<img class="title-icon" |
|||
src="@/assets/img/shuju/title-tip.png" /> |
|||
<div class="title-label"> |
|||
人房概览数据统计 |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="card-left-title">本级人房概览数据统计</div> |
|||
<div class="card-echart"> |
|||
|
|||
<div class="card-left"> |
|||
<div v-if="!dataLoading" |
|||
class="div-chart"> |
|||
<screen-echarts-frame class="echart-wr" |
|||
@myChartMethod="housePieInitOk" |
|||
ref="housePieChart"></screen-echarts-frame> |
|||
|
|||
<div class="div-tip"> |
|||
<div :class="['legend_item',{'item_last':index===legendArray.length-1}]" |
|||
v-for="(item,index) in legendArray" |
|||
:key="index"> |
|||
<div class="item_name">{{item.name}}</div> |
|||
<img :src="item.url" /> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div v-if="!dataLoading" |
|||
class="pie-table"> |
|||
<div class="pie-table-total" |
|||
@click="handleClickHouse('')"> |
|||
<div class="pie-table-total-count">{{houseData.houseTotal}}</div> |
|||
<div class="pie-table-title">房屋总数</div> |
|||
</div> |
|||
<div class="pie-table-line"></div> |
|||
<div class="pie-table-total " |
|||
@click="handleClickHouse('0')"> |
|||
<div class="pie-table-total-count zz">{{houseData.zzHouseTotal}}</div> |
|||
<div class="pie-table-title">自住房屋数</div> |
|||
</div> |
|||
<div class="pie-table-total " |
|||
@click="handleClickHouse('1')"> |
|||
<div class="pie-table-total-count cz">{{houseData.czHouseTotal}}</div> |
|||
<div class="pie-table-title">出租房屋数</div> |
|||
</div> |
|||
<div class="pie-table-total " |
|||
@click="handleClickHouse('2')"> |
|||
<div class="pie-table-total-count xz">{{houseData.xzHouseTotal}}</div> |
|||
<div class="pie-table-title">闲置房屋数</div> |
|||
</div> |
|||
<div class="pie-table-total " |
|||
@click="handleClickHouse('3')"> |
|||
<div class="pie-table-total-count wsc">{{houseData.wscHouseTotal}}</div> |
|||
<div class="pie-table-title">未出售房屋数</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="loading-status" |
|||
v-if="dataLoading"> |
|||
<screen-loading>加载中</screen-loading> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="card-left"> |
|||
<div v-if="!dataLoading" |
|||
class="div-chart"> |
|||
<screen-echarts-frame class="echart-wr" |
|||
@myChartMethod="userPieInitOk" |
|||
ref="userPieChart"></screen-echarts-frame> |
|||
|
|||
<div class="div-tip2"> |
|||
<div class="cz-tip"> |
|||
<div class="cz-tip-dot"></div> |
|||
<span>常住人口数</span> |
|||
</div> |
|||
<div class="ld-tip"> |
|||
<div class="ld-tip-dot"></div> |
|||
<span>流动人口数</span> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div v-if="!dataLoading" |
|||
class="pie-table"> |
|||
<div class="pie-table-total" |
|||
@click="handleClickPeople('all')"> |
|||
<div class="pie-table-total-count">{{userData.userTotal}}</div> |
|||
<div class="pie-table-title">居民总数</div> |
|||
</div> |
|||
<div class="pie-table-line"></div> |
|||
<div class="pie-table-total " |
|||
@click="handleClickPeople('cz')"> |
|||
<div class="pie-table-total-count zz">{{userData.czUserTotal}}</div> |
|||
<div class="pie-table-title">常住人口数</div> |
|||
</div> |
|||
<div class="pie-table-total " |
|||
@click="handleClickPeople('ld')"> |
|||
<div class="pie-table-total-count cz">{{userData.ldUserTotal}}</div> |
|||
<div class="pie-table-title">流动人口数</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="loading-status" |
|||
v-if="dataLoading"> |
|||
<screen-loading>加载中</screen-loading> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div v-if="orgType!=='village'"> |
|||
|
|||
<div class="card-left-title">下级人房概览数据统计</div> |
|||
|
|||
<div v-if="subList.length>0" |
|||
class="card-table"> |
|||
<div v-for="(item,index) in subList" |
|||
:key="index" |
|||
:class="['table_item',index%2 === 0?'item_dark':'']"> |
|||
<div class="item_name" |
|||
@click="handleToSubAgency(item)"> |
|||
<img src="@/assets/img/shuju/logo1.png" /> |
|||
<span>{{item.orgName}}</span> |
|||
</div> |
|||
|
|||
<div class="item_data"> |
|||
<div class="item_left"> |
|||
<div class="pie-table-total"> |
|||
<div class="pie-table-total-count" |
|||
@click="handleClickHouse('',item)">{{item.houseTotal}}</div> |
|||
<div class="pie-table-title">房屋总数</div> |
|||
</div> |
|||
<div class="pie-table-line"></div> |
|||
<div class="pie-table-total "> |
|||
<div class="pie-table-total-count colorwhite" |
|||
@click="handleClickHouse('0',item)">{{item.zzHouseTotal}}</div> |
|||
<div class="pie-table-title table-table-title">{{item.zzHouseRatio+'%'}}</div> |
|||
<div class="pie-table-title table-table-title">自住房屋数</div> |
|||
</div> |
|||
<div class="pie-table-total "> |
|||
<div class="pie-table-total-count colorwhite" |
|||
@click="handleClickHouse('1',item)">{{item.czHouseTotal}}</div> |
|||
<div class="pie-table-title table-table-title">{{item.czHouseRatio+'%'}}</div> |
|||
<div class="pie-table-title table-table-title">出租房屋数</div> |
|||
</div> |
|||
<div class="pie-table-total "> |
|||
<div class="pie-table-total-count colorwhite" |
|||
@click="handleClickHouse('2',item)">{{item.xzHouseTotal}}</div> |
|||
<div class="pie-table-title table-table-title">{{item.xzHouseRatio+'%'}}</div> |
|||
<div class="pie-table-title table-table-title">闲置房屋数</div> |
|||
</div> |
|||
<div class="pie-table-total "> |
|||
<div class="pie-table-total-count colorwhite" |
|||
@click="handleClickHouse('3',item)">{{item.wscHouseTotal}}</div> |
|||
<div class="pie-table-title table-table-title">{{item.wscHouseRatio+'%'}}</div> |
|||
<div class="pie-table-title table-table-title">未出售房屋数</div> |
|||
</div> |
|||
</div> |
|||
<div class="item_right"> |
|||
<div class="pie-table-total"> |
|||
<div class="pie-table-total-count" |
|||
@click="handleClickPeople('all',item)">{{item.userTotal}}</div> |
|||
<div class="pie-table-title">居民总数</div> |
|||
</div> |
|||
<div class="pie-table-line"></div> |
|||
<div class="pie-table-total "> |
|||
<div class="pie-table-total-count colorwhite" |
|||
@click="handleClickPeople('cz',item)">{{item.czUserTotal}}</div> |
|||
<div class="pie-table-title table-table-title">{{item.czUserRatio+'%'}}</div> |
|||
<div class="pie-table-title table-table-title">常住人口数</div> |
|||
</div> |
|||
<div class="pie-table-total "> |
|||
<div class="pie-table-total-count colorwhite" |
|||
@click="handleClickPeople('ld',item)">{{item.ldUserTotal}}</div> |
|||
<div class="pie-table-title table-table-title">{{item.ldUserRatio+'%'}}</div> |
|||
<div class="pie-table-title table-table-title">流动人口数</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-if="subList.length===0" |
|||
class="no-data"> |
|||
|
|||
<img src="@/assets/img/modules/visual/noData.png" |
|||
class="no-data-img" /> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</cpt-card> |
|||
|
|||
<house-list v-if="showHouseList " |
|||
:orgId="selOrgId" |
|||
:orgType="selOrgType" |
|||
:rentType="rentType" |
|||
@close="showHouseList = false"> |
|||
|
|||
</house-list> |
|||
<people-list v-if="showPeopleList " |
|||
:orgId="selOrgId" |
|||
:orgType="selOrgType" |
|||
:type="type" |
|||
@close="showPeopleList = false"> |
|||
|
|||
</people-list> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import screenTable from "../../components/screen-table/index"; |
|||
import cptCard from "@/views/modules/visual/cpts/card"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import screenEchartsFrame from "../../components/screen-echarts-frame"; |
|||
import ScreenLoading from "@/views/modules/visual/components/screen-loading"; |
|||
import { housePieOption } from './options' |
|||
import { userPieOption } from './userOptions' |
|||
import houseList from './houseList' |
|||
import peopleList from './peopleList' |
|||
|
|||
import * as echarts from 'echarts'; |
|||
export default { |
|||
name: "warning-box", |
|||
components: { |
|||
cptCard, |
|||
screenTable, |
|||
screenEchartsFrame, |
|||
ScreenLoading, |
|||
houseList, |
|||
peopleList |
|||
}, |
|||
data () { |
|||
return { |
|||
dataLoading: true, |
|||
orgId: '', |
|||
orgType: '', |
|||
orgName: this.$store.state.user.agencyName, |
|||
// orgShowName: this.$store.state.user.agencyName,//面包屑显示当前组织名称 |
|||
|
|||
|
|||
housePieChartS: null, |
|||
housePieChart: '', |
|||
housePieOption: {}, |
|||
housePieInitState: false, |
|||
houseData: { |
|||
orgId: '',//组织、网格、小区Id |
|||
orgType: '',//组织、网格、小区类型 agency grid village |
|||
houseTotal: 198000,//房屋总数 |
|||
zzHouseTotal: 2000,//房屋自住总数 |
|||
zzHouseRatio: '90%',//房屋自住总数占比（保留两位小数，带百分号的） |
|||
czHouseTotal: 30,//房屋出租总数 |
|||
czHouseRatio: '5%',//房屋出租总数占比（保留两位小数，带百分号的） |
|||
xzHouseTotal: 200,//房屋闲置总数 |
|||
xzHouseRatio: '70%',//房屋闲置总数占比（保留两位小数，带百分号的） |
|||
wscHouseTotal: 100,//房屋未售出总数 |
|||
wscHouseRatio: '20%',//房屋未售出总数占比 |
|||
}, |
|||
houseColorArray: ['#3dda83', '#e43c26', '#fac126', '#fc8452'], |
|||
housePieData: [], |
|||
|
|||
legendArray: [ |
|||
{ |
|||
name: '自住房屋数', |
|||
url: require('../../../../../assets/img/shuju/measure/lv@2x.png') |
|||
}, |
|||
{ |
|||
name: '出租房屋数', |
|||
url: require('../../../../../assets/img/shuju/measure/hong@2x.png') |
|||
}, |
|||
{ |
|||
name: '闲置房屋数', |
|||
url: require('../../../../../assets/img/shuju/measure/huang@2x.png') |
|||
}, |
|||
{ |
|||
name: '未出售房屋数', |
|||
url: require('../../../../../assets/img/shuju/measure/cheng.png') |
|||
} |
|||
], |
|||
|
|||
userPieChartS: null, |
|||
userPieChart: '', |
|||
userPieOption: {}, |
|||
userPieInitState: false, |
|||
userData: { |
|||
orgId: '',//组织、网格、小区Id |
|||
orgType: '',//组织、网格、小区类型 agency grid village |
|||
userTotal: 198000,//居民总数 |
|||
czUserTotal: 2000,//常住居民总数 |
|||
czUserRatio: '90%',//常住居民总数占比 |
|||
ldUserTotal: 30,//流动居民总数 |
|||
ldUserRatio: '5%',//流动居民总数占比 |
|||
|
|||
}, |
|||
userColorArray: ['#3dda83', '#e43c26'], |
|||
userPieData: [], |
|||
|
|||
subList: [], |
|||
|
|||
//下钻层级记录 |
|||
runNum: 0, |
|||
runAgencyArray: [], |
|||
selUserId: '', |
|||
center: [], |
|||
zoom: null, |
|||
parentPolygon: [], |
|||
|
|||
rentType: '',//点击房屋数类型 |
|||
type: '',//点击人员数类型 |
|||
showPeopleList: false, |
|||
showHouseList: false, |
|||
selOrgId: '', |
|||
selOrgType: '', |
|||
|
|||
}; |
|||
}, |
|||
async mounted () { |
|||
|
|||
await this.getApiData() |
|||
|
|||
}, |
|||
methods: { |
|||
async getApiData () { |
|||
this.dataLoading = true |
|||
|
|||
this.housePieInitState = false |
|||
this.userPieInitState = false |
|||
await this.getHousechart() |
|||
await this.getUserchart() |
|||
await this.getSubuserhouselist() |
|||
this.dataLoading = false |
|||
|
|||
await nextTick(500) |
|||
|
|||
this.getHousePie() |
|||
this.getUserPie() |
|||
|
|||
}, |
|||
|
|||
//点击房屋数 |
|||
handleClickHouse (rentType, item) { |
|||
if (item) { |
|||
this.selOrgId = item.orgId |
|||
this.selOrgType = item.orgType |
|||
} else { |
|||
this.selOrgId = this.houseData.orgId |
|||
this.selOrgType = this.houseData.orgType |
|||
} |
|||
this.toSubAgency('house') |
|||
this.rentType = rentType |
|||
this.showHouseList = true |
|||
}, |
|||
//点击人员数 |
|||
handleClickPeople (type, item) { |
|||
if (item) { |
|||
this.selOrgId = item.orgId |
|||
this.selOrgType = item.orgType |
|||
} else { |
|||
this.selOrgId = this.houseData.orgId |
|||
this.selOrgType = this.houseData.orgType |
|||
} |
|||
this.toSubAgency('people') |
|||
this.type = type |
|||
this.showPeopleList = true |
|||
}, |
|||
|
|||
housePieInitOk (dom) { |
|||
console.log('pie准备好了', dom) |
|||
this.housePieChartS = dom |
|||
// this.housePieInitState = true |
|||
|
|||
}, |
|||
userPieInitOk (dom) { |
|||
console.log('pie准备好了', dom) |
|||
this.userPieChartS = dom |
|||
// this.userPieInitState = true |
|||
|
|||
}, |
|||
|
|||
async getHousechart (node, resolve) { |
|||
if (this.$refs.housePieChart) { |
|||
this.$refs.housePieChart.showLoading() |
|||
} |
|||
|
|||
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/house/housechart"; |
|||
const url = '/gov/org/house/housechart' |
|||
let params = { |
|||
orgId: this.orgId, |
|||
orgType: this.orgType |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.houseData = data |
|||
if (this.$refs.housePieChart) { |
|||
this.$refs.housePieChart.hideLoading() |
|||
} |
|||
|
|||
} else { |
|||
this.houseData = {} |
|||
this.$message.error(msg); |
|||
} |
|||
this.housePieInitState = true |
|||
}, |
|||
|
|||
getHousePie () { |
|||
if (this.housePieInitState) { |
|||
this.assignHousePieChart() |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getHousePie() |
|||
}, 500) |
|||
} |
|||
}, |
|||
|
|||
assignHousePieChart () { |
|||
|
|||
if (this.houseData) { |
|||
this.$refs.housePieChart.setNoData(false) |
|||
this.$refs.housePieChart.clear() |
|||
this.housePieData = [] |
|||
|
|||
const _that = this |
|||
// 获取pieChart配置 |
|||
this.housePieOption = housePieOption(this.housePieChartS) |
|||
// let maxValue = this.housePieData[0].total |
|||
// let maxIndex = 0 |
|||
|
|||
let obj1 = { |
|||
name: '自住房屋数', |
|||
value: this.houseData.zzHouseRatio, |
|||
selected: true |
|||
} |
|||
let obj2 = { |
|||
name: '出租房屋数', |
|||
value: this.houseData.czHouseRatio |
|||
} |
|||
let obj3 = { |
|||
name: '闲置房屋数', |
|||
value: this.houseData.xzHouseRatio |
|||
} |
|||
let obj4 = { |
|||
name: '未出售房屋数', |
|||
value: this.houseData.wscHouseRatio |
|||
} |
|||
|
|||
this.housePieData.push(obj1) |
|||
this.housePieData.push(obj2) |
|||
this.housePieData.push(obj3) |
|||
this.housePieData.push(obj4) |
|||
|
|||
this.housePieOption.title.text = this.houseData.houseTotal |
|||
this.housePieOption.series[1].itemStyle = { |
|||
color: function (params) { |
|||
return _that.houseColorArray[params.dataIndex] |
|||
} |
|||
} |
|||
|
|||
let fun = function (params) { |
|||
_that.clickHousePie(params.dataIndex) |
|||
|
|||
} |
|||
this.$refs.housePieChart.handleClick(fun) |
|||
this.clickHousePie(0) |
|||
} else { |
|||
this.$refs.housePieChart.setNoData(true) |
|||
} |
|||
}, |
|||
|
|||
async getUserchart (node, resolve) { |
|||
if (this.$refs.userPieChart) { |
|||
this.$refs.userPieChart.showLoading() |
|||
} |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/userchart"; |
|||
const url = '/epmetuser/icresiuser/userchart' |
|||
let params = { |
|||
orgId: this.orgId, |
|||
orgType: this.orgType |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.userData = data |
|||
if (this.$refs.userPieChart) { |
|||
this.$refs.userPieChart.hideLoading() |
|||
} |
|||
} else { |
|||
this.userData = {} |
|||
this.$message.error(msg); |
|||
} |
|||
this.userPieInitState = true |
|||
}, |
|||
|
|||
getUserPie () { |
|||
if (this.userPieInitState) { |
|||
this.assignUserPieChart() |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getUserPie() |
|||
}, 500) |
|||
} |
|||
}, |
|||
|
|||
assignUserPieChart () { |
|||
|
|||
if (this.userData) { |
|||
this.$refs.userPieChart.setNoData(false) |
|||
this.$refs.userPieChart.clear() |
|||
this.userPieData = [] |
|||
|
|||
const _that = this |
|||
// 获取pieChart配置 |
|||
this.userPieOption = userPieOption(this.userPieChartS) |
|||
// let maxValue = this.userPieData[0].total |
|||
// let maxIndex = 0 |
|||
|
|||
let obj1 = { |
|||
name: '常住人口数', |
|||
value: this.userData.czUserRatio, |
|||
selected: true |
|||
} |
|||
let obj2 = { |
|||
name: '流动人口数', |
|||
value: this.userData.ldUserRatio |
|||
} |
|||
|
|||
this.userPieData.push(obj1) |
|||
this.userPieData.push(obj2) |
|||
|
|||
this.userPieOption.title.text = this.userData.userTotal |
|||
this.userPieOption.series[1].itemStyle = { |
|||
color: function (params) { |
|||
return _that.userColorArray[params.dataIndex] |
|||
} |
|||
} |
|||
|
|||
let fun = function (params) { |
|||
_that.clickUserPie(params.dataIndex) |
|||
|
|||
} |
|||
this.$refs.userPieChart.handleClick(fun) |
|||
this.clickUserPie(0) |
|||
} else { |
|||
this.$refs.userPieChart.setNoData(true) |
|||
} |
|||
}, |
|||
|
|||
async getSubuserhouselist (node, resolve) { |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/house/subuserhouselist"; |
|||
const url = '/gov/org/house/subuserhouselist' |
|||
let params = { |
|||
orgId: this.orgId, |
|||
orgType: this.orgType |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.subList = data |
|||
|
|||
|
|||
} else { |
|||
} |
|||
}, |
|||
|
|||
async clickHousePie (seriesIndex) { |
|||
this.housePieData.forEach((element, index) => { |
|||
if (index === seriesIndex) { |
|||
element.label = { |
|||
show: true, |
|||
|
|||
}; |
|||
element.labelLine = { |
|||
show: true, |
|||
lineStyle: { |
|||
opacity: 1, |
|||
} |
|||
|
|||
}; |
|||
console.log('zhilma') |
|||
|
|||
} else { |
|||
element.label = { |
|||
show: false, |
|||
|
|||
}; |
|||
element.labelLine = { |
|||
show: false, |
|||
lineStyle: { |
|||
opacity: 0, |
|||
color: 'rgba(255,255,255,0)' |
|||
} |
|||
|
|||
}; |
|||
|
|||
} |
|||
}); |
|||
this.housePieOption.series[1].data = this.housePieData |
|||
// this.$refs.housePieChart.hideLoading() |
|||
this.$refs.housePieChart.setOption(this.housePieOption) |
|||
|
|||
|
|||
}, |
|||
|
|||
async clickUserPie (seriesIndex) { |
|||
this.userPieData.forEach((element, index) => { |
|||
if (index === seriesIndex) { |
|||
element.label = { |
|||
show: true, |
|||
|
|||
}; |
|||
element.labelLine = { |
|||
show: true, |
|||
lineStyle: { |
|||
opacity: 1, |
|||
} |
|||
|
|||
}; |
|||
console.log('zhilma') |
|||
|
|||
} else { |
|||
element.label = { |
|||
show: false, |
|||
|
|||
}; |
|||
element.labelLine = { |
|||
show: false, |
|||
lineStyle: { |
|||
opacity: 0, |
|||
color: 'rgba(255,255,255,0)' |
|||
} |
|||
|
|||
}; |
|||
|
|||
} |
|||
}); |
|||
this.userPieOption.series[1].data = this.userPieData |
|||
// this.$refs.userPieChart.hideLoading() |
|||
this.$refs.userPieChart.setOption(this.userPieOption) |
|||
|
|||
// this.getTable() |
|||
}, |
|||
|
|||
async handleToSubAgency (item) { |
|||
if (!this.dataLoading) { |
|||
this.toSubAgency('subAgency', item) |
|||
|
|||
await this.getApiData() |
|||
} |
|||
|
|||
}, |
|||
|
|||
//下钻到下一级 |
|||
async toSubAgency (type, item) { |
|||
this.runNum++ |
|||
let obj = { |
|||
orgId: this.orgId, |
|||
orgType: this.orgType, |
|||
orgName: this.orgName, |
|||
type: type |
|||
} |
|||
this.runAgencyArray.push(obj) |
|||
|
|||
if (type === 'subAgency') { |
|||
|
|||
this.orgId = item.orgId |
|||
this.orgType = item.orgType |
|||
this.orgName = item.orgName |
|||
|
|||
} else if (type === 'house') { |
|||
|
|||
this.orgName = '房屋列表' |
|||
} else if (type === 'people') { |
|||
this.orgName = '人员列表' |
|||
} |
|||
|
|||
}, |
|||
|
|||
|
|||
//返回所选组织 |
|||
handleClickAgency (index) { |
|||
|
|||
|
|||
const cutNum = this.runAgencyArray.length - index//要减去的长度 |
|||
this.runNum = this.runNum - cutNum |
|||
|
|||
let orgData = this.runAgencyArray[index] |
|||
console.log('----------------', orgData) |
|||
|
|||
for (let i = 0; i < cutNum; i++) { |
|||
this.runAgencyArray.pop() |
|||
} |
|||
|
|||
this.orgId = orgData.orgId |
|||
this.orgType = orgData.orgType |
|||
this.orgName = orgData.orgName |
|||
this.showHouseList = false |
|||
this.showPeopleList = false |
|||
// if (orgData.type === 'house') { |
|||
// this.showHouseList = false |
|||
// } |
|||
// if (orgData.type === 'people') { |
|||
// this.showPeopleList = false |
|||
// } |
|||
|
|||
this.getApiData() |
|||
|
|||
|
|||
}, |
|||
|
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/modules/visual/warning.scss" |
|||
scoped |
|||
></style> |
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/modules/visual/basicInfoMain.scss" |
|||
scoped |
|||
></style> |
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/modules/visual/houseStatic.scss" |
|||
scoped |
|||
></style> |
|||
|
|||
Loading…
Reference in new issue