dvcp_v2_webapp/packages/grid/AppHouseMap/toolBar/buildingInfo.vue

<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>