目录代码整合
This commit is contained in:
aixianling
239
packages/grid/AppHouseMap/toolBar/buildingInfo.vue
Normal file
239
packages/grid/AppHouseMap/toolBar/buildingInfo.vue
Normal file
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<section class="buildingInfo">
|
||||
<ai-title title="人口信息"/>
|
||||
<div class="infoPane">
|
||||
<div class="staZone">
|
||||
<div v-for="(value, name) in staData" :key="name">
|
||||
<b>{{ value }}</b>
|
||||
<span>{{ name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ai-title title="房屋信息"/>
|
||||
<div class="infoPane">
|
||||
<el-row type="flex" justify="space-between" class="info-item">
|
||||
<span>所属社区</span>
|
||||
<span>{{build.areaName}}</span>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="space-between" class="info-item">
|
||||
<span>所属小区</span>
|
||||
<span>{{build.communityName}}</span>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="space-between" class="info-item">
|
||||
<span>房屋类型</span>
|
||||
<span>{{root.dict.getLabel("communityBuildingType",build.buildingType)}}</span>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="space-between" class="info-item">
|
||||
<span>楼长姓名</span>
|
||||
<span>{{build.managerName}}</span>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="space-between" class="info-item">
|
||||
<span>联系方式</span>
|
||||
<span>{{build.managerPhone}}</span>
|
||||
</el-row>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: "buildingInfo",
|
||||
inject: ['root', 'sta'],
|
||||
computed: {
|
||||
chartData() {
|
||||
return this.root.dict.getDict("residentTipType").map(e => ({
|
||||
name: e.dictName,
|
||||
key: e.dictValue,
|
||||
color: e.dictColor,
|
||||
v1: 0
|
||||
}))
|
||||
},
|
||||
colConfigs() {
|
||||
return [
|
||||
{prop:"areaName",label:"所属社区"}
|
||||
];
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
staData: {},
|
||||
tag:{},
|
||||
color:{},
|
||||
build:{},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart(data) {
|
||||
this.chart = echarts.init(document.getElementById("PersonStaChart"))
|
||||
let selected = {}, color = []
|
||||
this.chartData.map(e => {
|
||||
selected[e.name] = false
|
||||
color.push(e.color)
|
||||
})
|
||||
this.chart.setOption({
|
||||
grid: {top: 31, right: 0, height: 135},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
top: 185,
|
||||
left: 0,
|
||||
orient: "vertical",
|
||||
selected,
|
||||
itemWidth: 14,
|
||||
itemHeight: 14,
|
||||
itemGap: 12,
|
||||
icon: "rect",
|
||||
formatter: name => {
|
||||
let item = data.find(e => this.root.dict.getLabel('residentTipType', e.name) == name)
|
||||
return `{a|${name}} {b|${item.v1}}`
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {color: "#666", width: 123},
|
||||
b: {color: "#333", fontWeight: 'bold', align: 'right'}
|
||||
}
|
||||
}
|
||||
}, color,
|
||||
yAxis: {type: 'value', min: 0, minInterval: 1, axisTick: false, axisLine: false, axisLabel: {color: "#666"}},
|
||||
xAxis: {type: 'category', axisTick: false, axisLine: false, axisLabel: false},
|
||||
series: data.map(e => ({
|
||||
type: 'bar',
|
||||
barWidth: 8,
|
||||
barGap: '250%',
|
||||
name: this.root.dict.getLabel('residentTipType', e.name)
|
||||
}))
|
||||
})
|
||||
this.chart.on('legendselectchanged', ({selected}) => {
|
||||
let tips = Object.keys(selected)?.filter(e => selected[e])?.map(e => this.root.dict.getValue('residentTipType', e))
|
||||
this.sta?.selectedTips(tips)
|
||||
})
|
||||
this.getChartData(data)
|
||||
},
|
||||
getChartData(data) {
|
||||
this.chart?.setOption({
|
||||
series: data.map(e => ({data: [e.v1]}))
|
||||
})
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.root.dict?.load("communityBuildingType")
|
||||
},
|
||||
mounted() {
|
||||
this.root.instance.post("/app/appcommunitybuildinginfo/statistics", null, {
|
||||
params: {
|
||||
id: this.root.isFormDv ? this.root.info.id : this.$route.query.buildingId,
|
||||
unitNum: this.root.isFormDv ? this.root.info.unitNumber : this.$route.query.unitNum,
|
||||
}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.staData = res.data.unit;
|
||||
this.tag = res.data.tag;
|
||||
this.color = res.data.color;
|
||||
this.build = res.data.build;
|
||||
// this.root.dict.load('residentTipType').then(() => {
|
||||
// this.initChart(res.data.lx)
|
||||
// })
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.buildingInfo {
|
||||
::v-deep .infoPane {
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px;
|
||||
|
||||
.info-item{
|
||||
height: 32px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
align-items: center;
|
||||
|
||||
span:last-child{
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
&:nth-child(2n-1){
|
||||
background-color: #F3F6F9;
|
||||
}
|
||||
}
|
||||
|
||||
.static-wrap{
|
||||
width: 360px;
|
||||
box-sizing: border-box;
|
||||
padding-top: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.sta-item{
|
||||
width: 46%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.sta-left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.tag{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: #DC1739;
|
||||
border-radius: 2px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
& > label{
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.num{
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.staZone {
|
||||
height: 80px;
|
||||
background: #F5F7F9;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
|
||||
b {
|
||||
font-size: 24px;
|
||||
font-family: DINAlternate-Bold, DINAlternate,serif;
|
||||
color: #2266FF;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
#PersonStaChart {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user