居民监管样式调整

shuishen

2024-01-24 d16d10d94fddff86bdfd87113e7fd2cebe8b7cd7

居民监管样式调整

 src/views/place/components/boxTitle.vue

@@ -10,7 +10,7 @@
    <div class="titleContent">
        <!-- <div class="title1" data-color="red"></div> -->

        <div :class="'title title' + classVal">
        <div :class="`title title${classVal} ${classStyle}`">
            {{ title }}</div>
    </div>
</template>
@@ -26,7 +26,12 @@

        classVal: {
            type: Number,
        }
        },

        classStyle: {
            type: String,
            default: ''
        },
    }
}
</script>
@@ -50,6 +55,10 @@
    z-index: 0;
}

.echarts-title {
    margin: 0 !important;
}

.title1 {
    padding-left: 15px;


 src/views/propertySupervision/residentSupervision.vue

@@ -1,34 +1,21 @@
<template>
  <el-row>
    <el-col :span="24">
      <basic-container>
    <div class="cur-resident-supervision-page" v-loading="loading">
        <div class="echarts-wrap">
            <div class="echarts-cell" v-for="(i, k) in labelCountList" :key="k">
                <box-title :title="i.name" :classVal="9" :classStyle="'echarts-title'"></box-title>
                <div class="echarts-item"></div>
            </div>
        </div>



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

          <template slot="menuLeft">
            <div class="echarts-wrap">

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

          <template slot-scope="{row, size}" slot="menu">
            <el-button :size="size" type="text" icon="el-icon-circle-plus-outline" v-if="permission.househould_manager"
              @click="manageLabel(row)">标签
                    <el-button :size="size" type="text" icon="el-icon-circle-plus-outline"
                        v-if="permission.househould_manager" @click="manageLabel(row)">标签
            </el-button>
          </template>
          <template slot-scope="{row, size}" slot="phoneNumber">
@@ -44,6 +31,8 @@
            {{ labelDispose(row.householdLabelList) }}
          </template>
        </avue-crud>
        </div>

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

          <el-tree :data="roleGrantList" show-checkbox check-strictly default-expand-all node-key="id" ref="treeRole"
@@ -86,9 +75,7 @@
            </template>
          </avue-form>
        </el-dialog>
      </basic-container>
    </el-col>
  </el-row>
    </div>
</template>

<script>
@@ -126,7 +113,7 @@
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import Qs from "qs"
import * as echarts from 'echarts';
import * as echarts from 'echarts'
import {
  getTreeList
} from '@/api/label/label'
@@ -228,7 +215,7 @@
        editBtn: false,
        dialogType: 'drawer',
        dialogClickModal: false,
        menuFixed: 'right',

        column: [{
          label: "与业主关系",
          prop: "relationship",
@@ -535,7 +522,6 @@
        },

        {
          width: 210,
          overHidden: true,
          label: "标签",
          prop: "householdLabelList",
@@ -770,7 +756,6 @@
      householdLabelList: [],

      labelCountList: []

    }
  },
  watch: {
@@ -865,7 +850,7 @@
    }
  },
  mounted() {
    this.getLabelCount();
        this.getLabelCount()

  },
  methods: {
@@ -1114,8 +1099,8 @@
    getLabelCount() {
      getTreeList().then(res => {
        const data = res.data.data
        let list = data[0].children;
        this.labelCountList = list;
                let list = data[0].children
                this.labelCountList = list
        this.$nextTick(() => {
          this.setEchartsOption(list)
        })
@@ -1134,8 +1119,7 @@
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          top: 30,
                    padding: 20,
        },
        labelLine: {
          length: 15,
@@ -1146,8 +1130,7 @@
          {
            type: 'pie',
            center: '50%',
            radius: '50%', //修改大小
            top: 20,
                        radius: '40%', //修改大小
            data: [],
            emphasis: {
              itemStyle: {
@@ -1158,12 +1141,12 @@
            }
          }
        ]
      };
      let myEchart = document.getElementsByClassName('echarts-item'); //获取类名
            }
            let myEchart = document.getElementsByClassName('echarts-item') //获取类名
      for (let i = 0, ii = data.length; i < ii; i++) {
        let myCharts = echarts.init(myEchart[i]);
                let myCharts = echarts.init(myEchart[i])
        // option.title.text = data[i].name;
        let series = [];
                let series = []
        for (let k = 0, kk = data[i].children.length; k < kk; k++) {
          series.push({
            value: data[i].children[k].count,
@@ -1172,11 +1155,11 @@
          })
        }
        option.legend.type = series.length > 4 ? "scroll" : "plain"
        option.series[0].data = series;
        option && myCharts.setOption(option);
                option.series[0].data = series
                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)
        })
      }
@@ -1186,7 +1169,13 @@
}
</script>

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

.box {
  height: 800px;
}
@@ -1227,29 +1216,40 @@
  flex-wrap: wrap;
  padding: 0;
  justify-content: space-between;
}

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

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

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

.echarts-cell:nth-child(3),
.echarts-cell:nth-child(4),
.echarts-cell:nth-child(5) {
  width:22rem;
  height: 380px;
}</style>
        margin-top: 10px;
        height: 280px;
        width: calc((100% / 3) - 5px);
    }

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