居民监管、住房监管样式修改

Lou

2024-01-24 4abff19fb4c63cf973e2d09ff3626cd4d68da515

居民监管、住房监管样式修改

 src/styles/avue-ui.scss

@@ -50,3 +50,9 @@
        width: 520px !important;
    }
}

.cur-house-hold-box {
    .avue-crud__left {
        flex: 1;
    }
}

 src/views/propertySupervision/houseHoldSupervision.vue

@@ -1,20 +1,12 @@
<template>
  <el-row>
    <el-col :span="24">



      <basic-container>




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


          <!--  <template slot-scope="{row, size}" slot="menu">
            <el-button :size="size" type="text" icon="el-icon-circle-plus-outline" v-if="permission.househould_manager"
@@ -25,10 +17,10 @@
            </el-button>
          </template> -->
          

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

@@ -526,6 +518,7 @@
    },
    mounted() {
      this.getLabelCount()
    this.setBarEchartsOption();
    },
    methods: {

@@ -834,7 +827,7 @@
                  },
                 legend: {
                  orient: 'horizontal',
          left: 'right',
          left: 'center',
          top: 'bottom',
                  },
      //             labelLine: {
@@ -845,7 +838,8 @@
                series: [
                      {
                    type: 'pie',
                    radius: '50%',
            center: '50%',
            radius: '50%', //修改大小
                    data: [],
                    emphasis: {
                      itemStyle: {
@@ -873,13 +867,61 @@
            })
         }
        
    },

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

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
      }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      };

      option && myChart.setOption(option);


    }


    }
  }
</script>

<style>
<style lang="scss" scoped>
  .box {
    height: 800px;
  }
@@ -891,13 +933,17 @@
  .box .el-scrollbar__wrap {
    overflow: scroll;
  }
  .echarts-wrap{

.echarts-wrap-box {
    display: flex;
    padding:0 30px;
    justify-content: center
  }
  .echarts-item{
    width:100%;
  justify-content: space-between;
  padding: 0;
  margin-bottom: 20px;

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

 src/views/propertySupervision/residentSupervision.vue

@@ -5,15 +5,24 @@


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

          <template  slot="menuLeft">
            <div  class="echarts-wrap">
                <div  class="echarts-item"  v-for="(i,k) in labelCountList"  :key="k"></div> 

              <div class="echarts-cell" v-for="(i, k) in labelCountList" :key="k">
                <box-title :title="i.name"></box-title>
                <div class="echarts-item">

                </div>


              </div>

            </div>
          </template>
         
@@ -121,9 +130,12 @@
  import {
    getTreeList
} from '@/api/label/label'

import boxTitle from "../place/components/boxTitle.vue"

  export default {
  components: {
    boxTitle
  },
    data() {
      let isCardId = function(rule, value, callback) {
        // 15位和18位身份证号码的正则表达式
@@ -1112,18 +1124,18 @@

      setEchartsOption(data){
        let  option = {
                  title: {
                      text:"",
                      left: 'center',
                      top:20,
                  },
        // title: {
        //     text:"",
        //     left: 'center',
        //     top:20,
        // },
                  tooltip: {
                      trigger: 'item'
                  },
                 legend: {
                  orient: 'horizontal',
          left: 'center',
          top: 70,
          top: 30,
                  },
                  labelLine: {
        length: 15,
@@ -1133,7 +1145,9 @@
                series: [
                      {
                    type: 'pie',
                    radius: '35%',
            center: '50%',
            radius: '50%', //修改大小
            top: 20,
                    data: [],
                    emphasis: {
                      itemStyle: {
@@ -1148,7 +1162,7 @@
          let myEchart = document.getElementsByClassName('echarts-item'); //获取类名
         for(let i = 0,ii = data.length;i<ii;i++){
           let myCharts =  echarts.init(myEchart[i]);
            option.title.text = data[i].name;
        // option.title.text = data[i].name;
            let series = [];
            for(let k = 0,kk = data[i].children.length;k<kk;k++){
              series.push({
@@ -1211,11 +1225,31 @@
  .echarts-wrap{
    display: flex;
    flex-wrap: wrap;
    padding:0 30px;
  padding: 0;
  justify-content: space-between;
  }
  .echarts-item{
    width:320px;
    height:400px;

.echarts-cell {
  /* width: 31%;
  height: 460px; */
    margin:0 30px 30px 0;
  border: 1px solid #999;
  }
</style>

.echarts-item {
  width: 100%;
  height: calc(100% - 52px);
}

.echarts-cell:nth-child(1),
.echarts-cell:nth-child(2) {
  width: 47%;
  height:460px;
}

.echarts-cell:nth-child(3),
.echarts-cell:nth-child(4),
.echarts-cell:nth-child(5) {
  width:22rem;
  height: 380px;
}</style>

 vue.config.js

@@ -28,9 +28,9 @@
    proxy: {
      "/api": {
        //本地服务接口地址
        // target: "https://srgdjczzxtpt.com:2080/api",
        target: "https://srgdjczzxtpt.com:2080/api",
        // target: "http://z4042833u6.wicp.vip",
        target: "http://localhost:9528",
        // target: "http://localhost:9528",
        // target:"http://192.168.0.109:9528",
        //远程演示服务地址,可用于直接启动项目
        //target: 'https://saber.bladex.cn/api',