居民监管、住房监管页面显示调整

shuishen

2024-01-24 a90d446264955f2e6bcc5f898de9f3bc1e552741

居民监管、住房监管页面显示调整

 src/page/login/tenement.vue

@@ -12,7 +12,6 @@
                <p class="title">上饶市智慧物业管理平台</p>
            </div>
            <div class="login-border">
                <img class="img" src="/img/logo.png" alt="">
                <div class="login-main">

                    <h4 class="login-title">
@@ -34,9 +33,7 @@
        </div>

        <div class="copyright-box">
            版权所有：上饶市住房和城乡建设局
            <br />
            技术支持：上饶国控数字科技有限公司
            <span>版权所有：上饶市住房和城乡建设局</span> <span>技术支持：上饶国控数字科技有限公司</span>
        </div>
    </div>
</template>

 src/styles/avue-ui.scss

@@ -56,3 +56,52 @@
        flex: 1;
    }
}

.cur-resident-supervision-page,
.cur-house-hold-supervision-page {
    margin: 10px !important;
    margin-top: 0 !important;
    padding: 0 !important;

    .echarts-wrap {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        justify-content: space-between;


        .echarts-cell:nth-child(1),
        .echarts-cell:nth-child(2) {
            height: 300px;
            width: calc(50% - 5px);
        }

        .echarts-cell:nth-child(3),
        .echarts-cell:nth-child(4),
        .echarts-cell:nth-child(5) {
            margin-top: 10px;
            height: 300px;
            width: calc((100% / 3) - 6.66px);
        }

        .echarts-cell {
            display: flex;
            flex-direction: column;
            background: #fff;

            .echarts-item {
                padding: 10px;
                width: 100%;
                height: 0;
                flex: 1;
            }
        }

    }

    .cur-from-box {
        margin-top: 10px;
        padding: 10px;
        background: #fff;
    }
}

 src/styles/login.scss

@@ -17,6 +17,10 @@
        color: #fff;
        line-height: 24px;
        font-size: 14px;

        span {
            margin: 0 10px;
        }
    }
}


 src/views/propertySupervision/houseHoldSupervision.vue

@@ -1,9 +1,20 @@
<template>
  <el-row>
    <el-col :span="24">
      <basic-container class="cur-house-hold-box">
        <avue-crud :option="option" :search.sync="search" :table-loading="loading" :data="data" ref="crud" v-model="form"
          :permission="permissionList" @row-del="rowDel" @row-update="rowUpdate" @row-save="rowSave"
    <div class="cur-house-hold-supervision-page" v-loading="loading">
        <div class="echarts-wrap">
            <div class="echarts-cell">
                <box-title :title="'分类统计'" :classVal="9" :classStyle="'echarts-title'"></box-title>
                <div class="echarts-item" id="echarts"></div>
            </div>

            <div class="echarts-cell">
                <box-title :title="'区域统计'" :classVal="9" :classStyle="'echarts-title'"></box-title>
                <div class="echarts-item" id="bar-echarts"></div>
            </div>
        </div>

        <div class="cur-from-box">
            <avue-crud :option="option" :search.sync="search" :table-loading="loading" :data="data" ref="crud"
                v-model="form" :permission="permissionList" @row-del="rowDel" @row-update="rowUpdate" @row-save="rowSave"
          :before-open="beforeOpen" :page.sync="page" @search-change="searchChange" @search-reset="searchReset"
          @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
          @refresh-change="refreshChange" @on-load="onLoad">
@@ -16,15 +27,6 @@
              @click="manageLabel(row)">标签
            </el-button>
          </template> -->

          <template slot="menuLeft">
            <div class="echarts-wrap-box">
              <div class="echarts-item-box" id="echarts"></div>
              <div class="echarts-item-box" id="bar-echarts"></div>
            </div>
          </template>


          <template slot-scope="{row, size}" slot="phone">
            <el-button :size="size" type="text" @click="showStringDispose(row, 'phoneflag')">
              {{ textDispose(row, 'phoneflag', 'phone') }}
@@ -35,7 +37,7 @@
            {{ labelDispose(row.userHouseLabelVOList) }}
          </template>
        </avue-crud>

        </div>

        <el-dialog title="用户角色配置" append-to-body :visible.sync="roleBox" width="345px">

@@ -84,11 +86,7 @@
        <el-dialog title="住户管理" append-to-body :visible.sync="householdManagerVisible" width="70%" height="60%">
          <!-- <householdManager ref="householdManager" /> -->
        </el-dialog>


      </basic-container>
    </el-col>
  </el-row>
    </div>
</template>

<script>
@@ -128,13 +126,15 @@
import func from "@/util/func"
// import householdManager from "./components/householdManager"
import Qs from "qs"
import * as echarts from 'echarts';
import * as echarts from 'echarts'
import {
  getTreeList
} from '@/api/label/label'
import boxTitle from "../place/components/boxTitle.vue"

export default {
  components: {
        boxTitle
    // householdManager
  },
  data() {
@@ -221,6 +221,7 @@
        viewBtn: true,
        dialogType: 'drawer',
        dialogClickModal: false,

        column: [{
          label: "房屋编号",
          prop: "houseCode",
@@ -518,7 +519,7 @@
  },
  mounted() {
    this.getLabelCount()
    this.setBarEchartsOption();
        this.setBarEchartsOption()
  },
  methods: {

@@ -807,8 +808,8 @@
    getLabelCount() {
      getTreeList().then(res => {
        const data = res.data.data
        let list = data[1].children;
        this.labelCountList = list;
                let list = data[1].children
                this.labelCountList = list
        this.$nextTick(() => {
          this.setEchartsOption(list)
        })
@@ -826,9 +827,9 @@
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          top: 'bottom',
                    orient: 'vertical',
                    right: 30,
                    bottom: 10
        },
        //             labelLine: {
        //   length: 15,
@@ -838,8 +839,8 @@
        series: [
          {
            type: 'pie',
            center: '50%',
            radius: '50%', //修改大小
                        center: ['36%', '50%'],
                        radius: '80%',  //修改大小
            data: [],
            emphasis: {
              itemStyle: {
@@ -850,19 +851,19 @@
            }
          }
        ]
      };
      let myEchart = document.getElementById('echarts'); //获取类名
      let myCharts = echarts.init(myEchart);
            }
            let myEchart = document.getElementById('echarts') //获取类名
            let myCharts = echarts.init(myEchart)
      for (let i = 0, ii = data.length; i < ii; i++) {
        option.series[0].data.push({
          name: data[i].name,
          value: data[i].count,
          id: data[i].id
        });
        option && myCharts.setOption(option);
                })
                option && myCharts.setOption(option)
        myCharts.on('click', (params) => {
          console.log(params)
          this.query.labelId = params.data.id;
                    this.query.labelId = params.data.id
          this.onLoad(this.page, this.query)
        })
      }
@@ -870,9 +871,9 @@
    },

    setBarEchartsOption() {
      var chartDom = document.getElementById('bar-echarts');
      var myChart = echarts.init(chartDom);
      var option;
            var chartDom = document.getElementById('bar-echarts')
            var myChart = echarts.init(chartDom)
            var option

      option = {
        tooltip: {
@@ -909,9 +910,9 @@
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      };
            }

      option && myChart.setOption(option);
            option && myChart.setOption(option)


    }
@@ -921,29 +922,4 @@
}
</script>

<style lang="scss" scoped>
.box {
  height: 800px;
}

.el-scrollbar {
  height: 100%;
}

.box .el-scrollbar__wrap {
  overflow: scroll;
}

.echarts-wrap-box {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin-bottom: 20px;

  .echarts-item-box {
    width: 48%;
    height: 300px;
    border: 1px solid #999;
  }
}
</style>
<style lang="scss" scoped></style>

 src/views/propertySupervision/residentSupervision.vue

@@ -1109,17 +1109,13 @@

        setEchartsOption (data) {
            let option = {
                // title: {
                //     text:"",
                //     left: 'center',
                //     top:20,
                // },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'horizontal',
                    padding: 20,
                    orient: 'vertical',
                    right: 30,
                    bottom: 10
                },
                labelLine: {
                    length: 15,
@@ -1129,9 +1125,10 @@
                series: [
                    {
                        type: 'pie',
                        center: '50%',
                        radius: '40%', //修改大小
                        center: ['36%', '50%'],
                        radius: '80%', //修改大小
                        data: [],

                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
@@ -1154,6 +1151,17 @@
                        id: data[i].children[k].id,
                    })
                }

                if (data[i].children.length > 10) {
                    option.series[0].label = {
                        show: false
                    }
                } else {
                    option.series[0].label = {
                        show: true
                    }
                }

                option.legend.type = series.length > 4 ? "scroll" : "plain"
                option.series[0].data = series
                option && myCharts.setOption(option)
@@ -1170,16 +1178,6 @@
</script>

<style lang="scss" scoped>
.cur-resident-supervision-page {
    margin: 10px !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

.box {
    height: 800px;
}

.grid-container2 {
    /* display: grid;
    grid-template-columns: auto auto auto auto;
@@ -1209,47 +1207,5 @@

.box .el-scrollbar__wrap {
    overflow: scroll;
}

.echarts-wrap {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    justify-content: space-between;


    .echarts-cell:nth-child(1),
    .echarts-cell:nth-child(2) {
        height: 480px;
        width: calc(50% - 5px);
    }

    .echarts-cell:nth-child(3),
    .echarts-cell:nth-child(4),
    .echarts-cell:nth-child(5) {
        margin-top: 10px;
        height: 280px;
        width: calc((100% / 3) - 6.66px);
    }

    .echarts-cell {
        display: flex;
        flex-direction: column;
        background: #fff;

        .echarts-item {
            padding: 10px;
            width: 100%;
            height: 0;
            flex: 1;
        }
    }

}

.cur-from-box {
    margin-top: 10px;
    padding: 10px;
    background: #fff;
}
</style>