优化

operationSupport/src/views/payService/statisticalReport/chargeStatistics.vue

@@ -1,264 +1,329 @@
 <template>
-    <div class="main">
-        <div class="search">
-            <el-input class="search-input" v-model="mixins_query.likeValue" placeholder="输入业主/房间号" clearable></el-input>
-            <el-select v-model="mixins_query.communityId" placeholder="选择社区" @change="communityChange">
-                <el-option v-for="(item, index) in communityArr" :key="index" :label="item.communityName" :value="item.id"></el-option>
-            </el-select>
-            <el-date-picker
-                v-model="times"
-                value-format="yyyy-MM"
-                type="monthrange"
-                range-separator="至"
-                start-placeholder="选择开始日期"
-                end-placeholder="选择结束日期"
-                @change="effectiveDateToggle"
-                :clearable="false"
-            ></el-date-picker>
+  <div class="main">
+    <div
+      style="width: 100%; height: 90px;"
+      v-if="blockArr.length != 0"
+    >
+      <div
+        v-if="blockArr.length < 7"
+        :class="`mainTitle${index}`"
+        v-for="(item, index) in blockArr"
+        :key="index"
+      >
+        <div class="blockTitle">{{ item.val }}</div>
+        <div class="blockNumber">{{ item.label }}(元)</div>
+      </div>
 
-            <el-button type="primary" class="search-btn" @click="initSearchAll" icon="el-icon-search">查询 </el-button>
-            <div class="search-icon">
-                <el-tooltip class="item" effect="light" placement="bottom" content="导出">
-                    <i class="zoniot_font zoniot-icon-daochu2" @click="exportExcel"></i>
-                </el-tooltip>
-            </div>
-        </div>
-        <div class="table-top">
-            <div class="table-top_block title">
-                <div>{{ thisObjCommunit['communityName'] || '' }}收费统计</div>
-                <div>{{ timeFiterType() }}</div>
-            </div>
-            <div class="table-top_block blockColor" v-for="item in blockArr" :key="item">
-                <div class="number">{{ item.val }}</div>
-                <div>{{ item.label }}</div>
-            </div>
-        </div>
-        <zz-table
-            :cols="cols"
-            :settings="{ showIndex: true, stripe: true }"
-            :loading="mixins_onQuery"
-            :data="mixins_list"
-            :updateFlag="true"
-            :pageset="mixins_pageset"
-            @page-change="pageChange"
+      <div
+        v-else
+        :class="`mainTitles${index}`"
+      >
+        <div class="blockTitle">{{ item.val }}</div>
+        <div class="blockNumber">{{ item.label }}(元)</div>
+      </div>
+    </div>
+
+    <!-- console.log(this.blockArr.length) -->
+    <div :class="blockArr.length == 0 ? 'search' : 'search searchTitle'">
+      <div class="table-top_block title">
+        <div>{{ thisObjCommunit['communityName'] || '' }}收费统计</div>
+        <div>{{ timeFiterType() }}</div>
+      </div>
+      <el-input
+        class="search-input"
+        v-model="mixins_query.likeValue"
+        placeholder="输入业主/房间号"
+        clearable
+      ></el-input>
+      <el-select
+        v-model="mixins_query.communityId"
+        placeholder="选择社区"
+        @change="communityChange"
+      >
+        <el-option
+          v-for="(item, index) in communityArr"
+          :key="index"
+          :label="item.communityName"
+          :value="item.id"
+        ></el-option>
+      </el-select>
+      <el-date-picker
+        v-model="times"
+        value-format="yyyy-MM"
+        type="monthrange"
+        range-separator="至"
+        start-placeholder="选择开始日期"
+        end-placeholder="选择结束日期"
+        @change="effectiveDateToggle"
+        :clearable="false"
+      ></el-date-picker>
+
+      <el-button
+        type="primary"
+        class="search-btn"
+        @click="initSearchAll"
+        icon="el-icon-search"
+      >查询 </el-button>
+      <div class="search-icon">
+        <el-tooltip
+          class="item"
+          effect="light"
+          placement="bottom"
+          content="导出"
         >
-            <template slot-scope="scope" :slot="item.md5Key" v-for="(item, index) in tableInsert">
-                <div :key="index">
-                    {{ activeName(item, scope.row['details']) }}
-                </div>
-            </template>
-        </zz-table>
+          <i
+            class="zoniot_font zoniot-icon-daochu2"
+            @click="exportExcel"
+          ></i>
+        </el-tooltip>
+      </div>
     </div>
+    <!-- <div class="table-top">
+      <div class="table-top_block title">
+        <div>{{ thisObjCommunit['communityName'] || '' }}收费统计</div>
+        <div>{{ timeFiterType() }}</div>
+      </div>
+      <div
+        class="table-top_block blockColor"
+        v-for="item in blockArr"
+        :key="item"
+      >
+        <div class="number">{{ item.val }}</div>
+        <div>{{ item.label }}</div>
+      </div>
+    </div> -->
+    <zz-table
+      :cols="cols"
+      :settings="{ showIndex: true, stripe: true }"
+      :loading="mixins_onQuery"
+      :data="mixins_list"
+      :updateFlag="true"
+      :pageset="mixins_pageset"
+      @page-change="pageChange"
+    >
+      <template
+        slot-scope="scope"
+        :slot="item.md5Key"
+        v-for="(item, index) in tableInsert"
+      >
+        <div :key="index">
+          {{ activeName(item, scope.row['details']) }}
+        </div>
+      </template>
+    </zz-table>
+  </div>
 </template>
 
 <script>
 import list from '@utils/list.js';
 export default {
-    mixins: [list],
-    data() {
-        let _this = this;
-        return {
-            cols: [
-                {
-                    label: '社区名称',
-                    prop: 'communityName'
-                },
-                {
-                    label: '房间',
-                    prop: 'houseDetail'
-                },
-                {
-                    label: '业主',
-                    prop: 'residentName'
-                },
-                {
-                    label: '物业费标准(元/月)',
-                    prop: 'chargingStandard'
-                },
-                {
-                    label: '月数',
-                    prop: 'months'
-                },
-                {
-                    label: '合计',
-                    prop: 'totalAmount'
-                }
-            ],
-            mixins_post: 'post',
-            times: [],
-            communityArr: [],
-            blockArr: [],
-            tableInsert: [],
-            thisObjCommunit: {}
-        };
-    },
-    created() {
-        let thisDay = this.$moment(new Date()).format('YYYY-MM');
-        this.times = [thisDay, thisDay];
-        new Promise((resolve) => {
-            this.getorgTree(resolve);
-        }).then(() => {
-            this.initSearchData(thisDay);
-            this.mixins_dataUrl = '/sc-charge/charge/report/page';
-            this.initSearchAll();
-        });
-    },
-    mounted() {},
-    methods: {
-        initSearchData(time) {
-            this.mixins_query = {
-                communityId: this.thisObjCommunit.id,
-                startTime: time,
-                endTime: time
-            };
+  mixins: [list],
+  data () {
+    let _this = this;
+    return {
+      cols: [
+        {
+          label: '社区名称',
+          prop: 'communityName'
         },
-        initSearchAll() {
-            new Promise((resolve) => {
-                this.getTopTable(resolve);
-            }).then(() => {
-                this.mixins_search();
-            });
+        {
+          label: '房间',
+          prop: 'houseDetail'
         },
-        typeName(item) {
-            let name = '';
-            switch (item.chargeType) {
-                case 1:
-                    name = '物业费';
-                    break;
-                case 2:
-                    name = '水费';
-                    break;
-                case 3:
-                    name = '电费';
-                    break;
-                case 4:
-                    name = '车位费';
-                    break;
-                case 6:
-                    name = '卫生费';
-                    break;
-                case 7:
-                    name = item.chargeName;
-                    break;
-                case 8:
-                    if ( item.chargeName == "租赁保证金"){
-                        name = item.chargeName;
-                    } else{
-                        name = "租赁费";
-                    }
-                    break;
-            }
-            return name;
+        {
+          label: '业主',
+          prop: 'residentName'
         },
-        activeName(item, arr) {
-            let amount = '--';
-            arr.map((its) => {
-                if (its.md5Key == item.md5Key) {
-                    amount = its.amount;
-                }
-            });
-            return amount;
+        {
+          label: '物业费标准(元/月)',
+          prop: 'chargingStandard'
         },
-        exportExcel() {
-            this.__exportExcel('/sc-charge/charge/report/export/excel', this.mixins_query);
+        {
+          label: '月数',
+          prop: 'months'
         },
-        effectiveDateToggle(va) {
-            let arr = va;
-            if (!arr) {
-                arr = ['', ''];
-            }
-            this.mixins_query.startTime = arr[0];
-            this.mixins_query.endTime = arr[1];
-            this.initSearchAll();
-        },
-        getorgTree(resolve) {
-            this.$http
-                .get('/sc-community/assets/community/list')
-                .then((data) => {
-                    this.communityArr = data.data;
-                    this.thisObjCommunit = this.communityArr[0];
-                    this.$store.commit('setAreaSelect', data.data);
-                    resolve && resolve();
-                })
+        {
+          label: '合计',
+          prop: 'totalAmount'
+        }
+      ],
+      mixins_post: 'post',
+      times: [],
+      communityArr: [],
+      blockArr: [],
+      tableInsert: [],
+      thisObjCommunit: {}
+    };
+  },
+  created () {
+    let thisDay = this.$moment(new Date()).format('YYYY-MM');
+    this.times = [thisDay, thisDay];
+    new Promise((resolve) => {
+      this.getorgTree(resolve);
+    }).then(() => {
+      this.initSearchData(thisDay);
+      this.mixins_dataUrl = '/sc-charge/charge/report/page';
+      this.initSearchAll();
+    });
+  },
+  mounted () { },
+  methods: {
+    initSearchData (time) {
+      this.mixins_query = {
+        communityId: this.thisObjCommunit.id,
+        startTime: time,
+        endTime: time
+      };
+    },
+    initSearchAll () {
+      new Promise((resolve) => {
+        this.getTopTable(resolve);
+      }).then(() => {
+        this.mixins_search();
+      });
+    },
+    typeName (item) {
+      let name = '';
+      switch (item.chargeType) {
+        case 1:
+          name = '物业费';
+          break;
+        case 2:
+          name = '水费';
+          break;
+        case 3:
+          name = '电费';
+          break;
+        case 4:
+          name = '车位费';
+          break;
+        case 6:
+          name = '卫生费';
+          break;
+        case 7:
+          name = item.chargeName;
+          break;
+        case 8:
+          if (item.chargeName == "租赁保证金") {
+            name = item.chargeName;
+          } else {
+            name = "租赁费";
+          }
+          break;
+      }
+      return name;
+    },
+    activeName (item, arr) {
+      let amount = '--';
+      arr.map((its) => {
+        if (its.md5Key == item.md5Key) {
+          amount = its.amount;
+        }
+      });
+      return amount;
+    },
+    exportExcel () {
+      this.__exportExcel('/sc-charge/charge/report/export/excel', this.mixins_query);
+    },
+    effectiveDateToggle (va) {
+      let arr = va;
+      if (!arr) {
+        arr = ['', ''];
+      }
+      this.mixins_query.startTime = arr[0];
+      this.mixins_query.endTime = arr[1];
+      this.initSearchAll();
+    },
+    getorgTree (resolve) {
+      this.$http
+        .get('/sc-community/assets/community/list')
+        .then((data) => {
+          this.communityArr = data.data;
+          this.thisObjCommunit = this.communityArr[0];
+          this.$store.commit('setAreaSelect', data.data);
+          resolve && resolve();
+        })
 
-                .catch(function () {});
+        .catch(function () { });
+    },
+    getTopTable (resolve) {
+      this.cols = [
+        {
+          label: '社区名称',
+          prop: 'communityName'
         },
-        getTopTable(resolve) {
-            this.cols = [
-                {
-                    label: '社区名称',
-                    prop: 'communityName'
-                },
-                {
-                    label: '房间',
-                    prop: 'houseDetail'
-                },
-                {
-                    label: '业主',
-                    prop: 'residentName'
-                },
-                {
-                    label: '物业费标准(元/月)',
-                    prop: 'chargingStandard'
-                },
-                {
-                    label: '月数',
-                    prop: 'months'
-                },
-                {
-                    label: '合计',
-                    prop: 'totalAmount'
-                }
-            ];
-            let tableInsert = [];
-            this.$http.post('/sc-charge/charge/report/total', this.mixins_query).then(({ data, status, msg }) => {
-                if (status == 0) {
-                    if (!!data && data.details.length) {
-                        let arr = [{ label: '总收费', val: data.totalAmount }];
-                        data.details.map((item, index) => {
-                            arr.push({ label: this.typeName(item), val: item.amount });
-                            tableInsert.push({
-                                md5Key: item.md5Key
-                            });
-                            this.cols.splice(5 + index, 0, {
-                                label: this.typeName(item),
-                                slot: item.md5Key
-                            });
-                        });
-                        this.tableInsert = tableInsert;
-                        this.blockArr = arr;
-                    } else {
-                        this.tableInsert = [];
-                        this.blockArr = [];
-                    }
-                }
-                resolve && resolve();
-            });
+        {
+          label: '房间',
+          prop: 'houseDetail'
         },
-        communityChange(e) {
-            this.communityArr.find((item) => {
-                if (item.id == e) {
-                    this.thisObjCommunit = item;
-                    this.initSearchAll();
-                }
-            });
+        {
+          label: '业主',
+          prop: 'residentName'
         },
-        timeFiterType() {
-            let arr = this.times;
-            let text = '';
-            if (!arr) {
-                arr = ['', ''];
-            }
-            let f = new Date(arr[0]).getMonth(),
-                l = new Date(arr[1]).getMonth();
-            if (f == l) {
-                text = `${this.$moment(new Date(arr[0])).format('YYYY年M月')}`;
-            } else {
-                text = `${this.$moment(new Date(arr[0])).format('YYYY年M月')}-${this.$moment(new Date(arr[1])).format('YYYY年M月')}`;
-            }
-            return text;
+        {
+          label: '物业费标准(元/月)',
+          prop: 'chargingStandard'
+        },
+        {
+          label: '月数',
+          prop: 'months'
+        },
+        {
+          label: '合计',
+          prop: 'totalAmount'
+        }
+      ];
+      let tableInsert = [];
+      this.$http.post('/sc-charge/charge/report/total', this.mixins_query).then(({ data, status, msg }) => {
+        if (status == 0) {
+          if (!!data && data.details.length) {
+            let arr = [{ label: '总收费', val: data.totalAmount }];
+            data.details.map((item, index) => {
+              arr.push({ label: this.typeName(item), val: item.amount });
+              tableInsert.push({
+                md5Key: item.md5Key
+              });
+              this.cols.splice(5 + index, 0, {
+                label: this.typeName(item),
+                slot: item.md5Key
+              });
+            });
+            this.tableInsert = tableInsert;
+            this.blockArr = arr;
+            console.log(this.blockArr.length)
+          } else {
+            this.tableInsert = [];
+            this.blockArr = [];
+            console.log(this.blockArr.length)
+          }
+        }
+        resolve && resolve();
+      });
+    },
+    communityChange (e) {
+      this.communityArr.find((item) => {
+        if (item.id == e) {
+          this.thisObjCommunit = item;
+          this.initSearchAll();
         }
+      });
+    },
+    timeFiterType () {
+      let arr = this.times;
+      let text = '';
+      if (!arr) {
+        arr = ['', ''];
+      }
+      let f = new Date(arr[0]).getMonth(),
+        l = new Date(arr[1]).getMonth();
+      if (f == l) {
+        text = `${this.$moment(new Date(arr[0])).format('YYYY年M月')}`;
+      } else {
+        text = `${this.$moment(new Date(arr[0])).format('YYYY年M月')}-${this.$moment(new Date(arr[1])).format('YYYY年M月')}`;
+      }
+      return text;
     }
+  }
 };
 </script>
 <style scoped lang='scss'>
@@ -296,4 +361,219 @@ export default {
         }
     }
 }
+
+.table-top_block {
+    float: left;
+    margin-right: 20px;
+    color: #0eaeff;
+    font-weight: 600;
+    line-height: 20px;
+}
+.mainTitle0 {
+    float: left;
+    margin-bottom: 20px;
+    width: 220px;
+    height: 78px;
+    background: linear-gradient(135deg, #488fff 0%, #65dcff 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitle1 {
+    float: left;
+    margin-bottom: 20px;
+    width: 220px;
+    height: 78px;
+    background: linear-gradient(315deg, #5eedcc 0%, #24c3f1 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitle2 {
+    float: left;
+    margin-bottom: 20px;
+    width: 220px;
+    height: 78px;
+    background: linear-gradient(135deg, #f0646c 0%, #f4994e 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitle3 {
+    float: left;
+    margin-bottom: 20px;
+    width: 220px;
+    height: 78px;
+    background: linear-gradient(135deg, #7178ff 0%, #d2a4ff 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitle4 {
+    float: left;
+    margin-bottom: 20px;
+    width: 220px;
+    height: 78px;
+    background: linear-gradient(135deg, #884dd2 0%, #df63cc 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitle5 {
+    float: left;
+    margin-bottom: 20px;
+    width: 220px;
+    height: 78px;
+    background: linear-gradient(135deg, #488fff 0%, #65dcff 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitle6 {
+    float: left;
+    margin-bottom: 20px;
+    width: 220px;
+    height: 78px;
+    background: linear-gradient(315deg, #5eedcc 0%, #24c3f1 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitles0 {
+    float: left;
+    margin-bottom: 20px;
+    width: 148px;
+    height: 78px;
+    background: linear-gradient(135deg, #488fff 0%, #65dcff 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitles1 {
+    float: left;
+    margin-bottom: 20px;
+    width: 148px;
+    height: 78px;
+    background: linear-gradient(315deg, #5eedcc 0%, #24c3f1 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitles2 {
+    float: left;
+    margin-bottom: 20px;
+    width: 148px;
+    height: 78px;
+    background: linear-gradient(135deg, #f0646c 0%, #f4994e 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitles3 {
+    float: left;
+    margin-bottom: 20px;
+    width: 148px;
+    height: 78px;
+    background: linear-gradient(135deg, #7178ff 0%, #d2a4ff 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitles4 {
+    float: left;
+    margin-bottom: 20px;
+    width: 148px;
+    height: 78px;
+    background: linear-gradient(135deg, #884dd2 0%, #df63cc 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitles5 {
+    float: left;
+    margin-bottom: 20px;
+    width: 148px;
+    height: 78px;
+    background: linear-gradient(135deg, #488fff 0%, #65dcff 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitles6 {
+    float: left;
+    margin-bottom: 20px;
+    width: 148px;
+    height: 78px;
+    background: linear-gradient(315deg, #5eedcc 0%, #24c3f1 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitles7 {
+    float: left;
+    margin-bottom: 20px;
+    width: 148px;
+    height: 78px;
+    background: linear-gradient(135deg, #f0646c 0%, #f4994e 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitles8 {
+    float: left;
+    margin-bottom: 20px;
+    width: 148px;
+    height: 78px;
+    background: linear-gradient(135deg, #7178ff 0%, #d2a4ff 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitles9 {
+    float: left;
+    margin-bottom: 20px;
+    width: 148px;
+    height: 78px;
+    background: linear-gradient(135deg, #884dd2 0%, #df63cc 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitles10 {
+    float: left;
+    margin-bottom: 20px;
+    width: 148px;
+    height: 78px;
+    background: linear-gradient(135deg, #488fff 0%, #65dcff 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitle:last-child {
+    margin-right: 0px;
+}
+.mainTitles:last-child {
+    margin-right: 0px;
+}
+.searchTitle {
+    margin-bottom: 0px !important;
+}
+.blockTitle {
+    width: 152px;
+    height: 35px;
+    font-size: 30px;
+    font-family: DINAlternate-Bold, DINAlternate;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 35px;
+}
+.blockNumber {
+    width: 56px;
+    height: 17px;
+    font-size: 12px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 17px;
+}
 </style>

operationSupport/src/views/payService/statisticalReport/receivableStatistics.vue

@@ -1,220 +1,286 @@
 <template>
-    <div class="main">
-        <div class="search">
-            <el-input class="search-input" v-model="mixins_query.likeValue" placeholder="输入业主/房间号" clearable></el-input>
-            <el-select v-model="mixins_query.communityId" placeholder="选择社区" clearable>
-                <el-option v-for="(item, index) in communityArr" :key="index" :label="item.communityName" :value="item.id"></el-option>
-            </el-select>
-            <el-select v-model="mixins_query.chargeType" placeholder="费用类型" clearable>
-                <el-option
-                    :label="item.label"
-                    :value="item.value"
-                    v-for="(item, index) in $publicArray.chargeType()"
-                    :key="index"
-                ></el-option>
-            </el-select>
-            <el-date-picker
-                v-model="times"
-                value-format="yyyy-MM"
-                type="monthrange"
-                range-separator="至"
-                start-placeholder="选择开始日期"
-                end-placeholder="选择结束日期"
-                @change="effectiveDateToggle"
-                :clearable="false"
-            ></el-date-picker>
+  <div class="main">
+    <div style="width: 100%; height: 90px;">
+      <div class="mainTitle0">
+        <div class="blockTitle"> 应收 </div>
+        <div class="blockNumber">{{ tableInsert.receivableAmount || 0 }}(元)</div>
+      </div>
+      <div class="mainTitle1">
+        <div class="blockTitle"> 已收 </div>
+        <div class="blockNumber">{{ tableInsert.receivedAmount || 0 }}(元)</div>
+      </div>
+      <div class="mainTitle2">
+        <div class="blockTitle"> 未收 </div>
+        <div class="blockNumber">{{ tableInsert.uncollectedAmount || 0 }}(元)</div>
+      </div>
+      <div class="mainTitle3">
+        <div class="blockTitle"> 收款率 </div>
+        <div class="blockNumber">{{ tableInsert.collectionRate || '0%' }}</div>
+      </div>
+    </div>
 
-            <el-button type="primary" class="search-btn" @click="initSearchAll" icon="el-icon-search">查询 </el-button>
-            <div class="search-icon">
-                <el-tooltip class="item" effect="light" placement="bottom" content="导出">
-                    <i class="zoniot_font zoniot-icon-daochu2" @click="exportExcel"></i>
-                </el-tooltip>
-            </div>
-        </div>
-        <div class="table-top">
-            <div class="table-top_block title">
-                <div>{{ timeFiterType() }}</div>
-                <div>应收统计</div>
-            </div>
-            <div class="table-top_block blockColor">
-                <div class="number">{{ tableInsert.receivableAmount || 0 }}</div>
-                <div>应收</div>
-            </div>
-            <div class="table-top_block blockColor">
-                <div class="number">{{ tableInsert.receivedAmount || 0 }}</div>
-                <div>已收</div>
-            </div>
-            <div class="table-top_block blockColor">
-                <div class="number">{{ tableInsert.uncollectedAmount || 0 }}</div>
-                <div>未收</div>
-            </div>
-            <div class="table-top_block blockColor">
-                <div class="number">{{ tableInsert.collectionRate || '0%' }}</div>
-                <div>收款率</div>
-            </div>
-        </div>
-        <zz-table
-            :cols="cols"
-            :settings="{ showIndex: true, stripe: true }"
-            :loading="mixins_onQuery"
-            :data="mixins_list"
-            :updateFlag="true"
-            :pageset="mixins_pageset"
-            @page-change="pageChange"
+    <div class="search">
+      <div class="table-top_block title">
+        <div>{{ timeFiterType() }}</div>
+        <div>应收统计</div>
+      </div>
+
+      <el-input
+        class="search-input"
+        v-model="mixins_query.likeValue"
+        placeholder="输入业主/房间号"
+        clearable
+      ></el-input>
+      <el-select
+        v-model="mixins_query.communityId"
+        placeholder="选择社区"
+        clearable
+      >
+        <el-option
+          v-for="(item, index) in communityArr"
+          :key="index"
+          :label="item.communityName"
+          :value="item.id"
+        ></el-option>
+      </el-select>
+      <el-select
+        v-model="mixins_query.chargeType"
+        placeholder="费用类型"
+        clearable
+      >
+        <el-option
+          :label="item.label"
+          :value="item.value"
+          v-for="(item, index) in $publicArray.chargeType()"
+          :key="index"
+        ></el-option>
+      </el-select>
+      <el-date-picker
+        v-model="times"
+        value-format="yyyy-MM"
+        type="monthrange"
+        range-separator="至"
+        start-placeholder="选择开始日期"
+        end-placeholder="选择结束日期"
+        @change="effectiveDateToggle"
+        :clearable="false"
+      ></el-date-picker>
+
+      <el-button
+        type="primary"
+        class="search-btn"
+        @click="initSearchAll"
+        icon="el-icon-search"
+      >查询 </el-button>
+      <div class="search-icon">
+        <el-tooltip
+          class="item"
+          effect="light"
+          placement="bottom"
+          content="导出"
         >
-            <template slot-scope="scope" slot="opt">
-                <div class="opt">
-                    <el-tooltip class="item" effect="light" placement="bottom" content="查看">
-                        <i class="zoniot_font zoniot-icon-xiangqing" @click="lookPage(scope.row)"></i>
-                    </el-tooltip>
-                </div>
-            </template>
-        </zz-table>
+          <i
+            class="zoniot_font zoniot-icon-daochu2"
+            @click="exportExcel"
+          ></i>
+        </el-tooltip>
+      </div>
     </div>
+    <!-- <div class="table-top">
+      <div class="table-top_block title">
+        <div>{{ timeFiterType() }}</div>
+        <div>应收统计</div>
+      </div>
+      <div class="table-top_block blockColor">
+        <div class="number">{{ tableInsert.receivableAmount || 0 }}</div>
+        <div>应收</div>
+      </div>
+      <div class="table-top_block blockColor">
+        <div class="number">{{ tableInsert.receivedAmount || 0 }}</div>
+        <div>已收</div>
+      </div>
+      <div class="table-top_block blockColor">
+        <div class="number">{{ tableInsert.uncollectedAmount || 0 }}</div>
+        <div>未收</div>
+      </div>
+      <div class="table-top_block blockColor">
+        <div class="number">{{ tableInsert.collectionRate || '0%' }}</div>
+        <div>收款率</div>
+      </div>
+    </div> -->
+    <zz-table
+      :cols="cols"
+      :settings="{ showIndex: true, stripe: true }"
+      :loading="mixins_onQuery"
+      :data="mixins_list"
+      :updateFlag="true"
+      :pageset="mixins_pageset"
+      @page-change="pageChange"
+    >
+      <template
+        slot-scope="scope"
+        slot="opt"
+      >
+        <div class="opt">
+          <el-tooltip
+            class="item"
+            effect="light"
+            placement="bottom"
+            content="查看"
+          >
+            <i
+              class="zoniot_font zoniot-icon-xiangqing"
+              @click="lookPage(scope.row)"
+            ></i>
+          </el-tooltip>
+        </div>
+      </template>
+    </zz-table>
+  </div>
 </template>
 
 <script>
 import list from '@utils/list.js';
 export default {
-    mixins: [list],
-    data() {
-        return {
-            cols: [
-                {
-                    label: '社区名称',
-                    prop: 'communityName'
-                },
-                {
-                    label: '房间',
-                    prop: 'houseDetail'
-                },
-                {
-                    label: '业主',
-                    prop: 'residentName'
-                },
-                {
-                    label: '应收（元）',
-                    prop: 'receivableAmount'
-                },
-                {
-                    label: '已收（元）',
-                    prop: 'receivedAmount'
-                },
-                {
-                    label: '未收（元）',
-                    prop: 'uncollectedAmount'
-                },
-                {
-                    label: '收款率',
-                    prop: 'collectionRate'
-                },
-                {
-                    label: '操作',
-                    slot: 'opt'
-                }
-            ],
-            mixins_post: 'post',
-            times: [],
-            communityArr: [],
-            tableInsert: {},
-            thisObjCommunit: {}
-        };
-    },
-    created() {
-        let thisDay = this.$moment(new Date()).format('YYYY-MM');
-        this.times = [thisDay, thisDay];
-        new Promise((resolve) => {
-            this.getorgTree(resolve);
-        }).then(() => {
-            this.initSearchData(thisDay);
-            this.mixins_dataUrl = '/sc-charge/charge/report/receivable/page';
-            this.initSearchAll();
-        });
-    },
-    mounted() {},
-    methods: {
-        initSearchData(time) {
-            this.mixins_query = {
-                communityId: this.thisObjCommunit.id,
-                startTime: time,
-                endTime: time
-            };
+  mixins: [list],
+  data () {
+    return {
+      cols: [
+        {
+          label: '社区名称',
+          prop: 'communityName'
         },
-        initSearchAll() {
-            new Promise((resolve) => {
-                this.getTopTable(resolve);
-            }).then(() => {
-                this.mixins_search();
-            });
+        {
+          label: '房间',
+          prop: 'houseDetail'
         },
-        exportExcel() {
-            this.__exportExcel('/sc-charge/charge/report/receivable/export/excel', this.mixins_query);
+        {
+          label: '业主',
+          prop: 'residentName'
         },
-        effectiveDateToggle(va) {
-            let arr = va;
-            if (!arr) {
-                arr = ['', ''];
-            }
-            this.mixins_query.startTime = arr[0];
-            this.mixins_query.endTime = arr[1];
-            this.initSearchAll();
+        {
+          label: '应收（元）',
+          prop: 'receivableAmount'
         },
-        getorgTree(resolve) {
-            this.$http
-                .get('/sc-community/assets/community/list')
-                .then((data) => {
-                    this.communityArr = data.data;
-                    this.thisObjCommunit = this.communityArr[0];
-                    this.$store.commit('setAreaSelect', data.data);
-                    resolve && resolve();
-                })
-
-                .catch(function () {});
+        {
+          label: '已收（元）',
+          prop: 'receivedAmount'
         },
-        getTopTable(resolve) {
-            this.$http.post('/sc-charge/charge/report/statistics/receivable', this.mixins_query).then(({ data, status, msg }) => {
-                if (status == 0 && !!data) {
-                    this.tableInsert = data;
-                }
-                resolve && resolve();
-            });
+        {
+          label: '未收（元）',
+          prop: 'uncollectedAmount'
         },
-        timeFiterType() {
-            let arr = this.times;
-            let text = '';
-            if (!arr) {
-                arr = ['', ''];
-            }
-            let f = new Date(arr[0]).getMonth(),
-                l = new Date(arr[1]).getMonth();
-            if (f == l) {
-                text = `${this.$moment(new Date(arr[0])).format('YYYY年M月')}`;
-            } else {
-                text = `${this.$moment(new Date(arr[0])).format('YYYY年M月')}-${this.$moment(new Date(arr[1])).format('YYYY年M月')}`;
-            }
-            return text;
+        {
+          label: '收款率',
+          prop: 'collectionRate'
         },
-        lookPage(row) {
-            new Promise((resolve) => {
-                this.$store.dispatch('addPopup', {
-                    url: '/payService/statisticalReport/paymentDetails.vue',
-                    width: '1200px',
-                    height: '500px',
-                    props: {
-                        row,
-                        mixins_query: this.mixins_query,
-                        callback: resolve
-                    },
-                    showConfirmButton: true,
-                    showCancelButton: true,
-                    hideStar: true,
-                    title: '缴费详情'
-                });
-            }).then(() => {
-                this.mixins_search();
-            });
+        {
+          label: '操作',
+          slot: 'opt'
+        }
+      ],
+      mixins_post: 'post',
+      times: [],
+      communityArr: [],
+      tableInsert: {},
+      thisObjCommunit: {}
+    };
+  },
+  created () {
+    let thisDay = this.$moment(new Date()).format('YYYY-MM');
+    this.times = [thisDay, thisDay];
+    new Promise((resolve) => {
+      this.getorgTree(resolve);
+    }).then(() => {
+      this.initSearchData(thisDay);
+      this.mixins_dataUrl = '/sc-charge/charge/report/receivable/page';
+      this.initSearchAll();
+    });
+  },
+  mounted () { },
+  methods: {
+    initSearchData (time) {
+      this.mixins_query = {
+        communityId: this.thisObjCommunit.id,
+        startTime: time,
+        endTime: time
+      };
+    },
+    initSearchAll () {
+      new Promise((resolve) => {
+        this.getTopTable(resolve);
+      }).then(() => {
+        this.mixins_search();
+      });
+    },
+    exportExcel () {
+      this.__exportExcel('/sc-charge/charge/report/receivable/export/excel', this.mixins_query);
+    },
+    effectiveDateToggle (va) {
+      let arr = va;
+      if (!arr) {
+        arr = ['', ''];
+      }
+      this.mixins_query.startTime = arr[0];
+      this.mixins_query.endTime = arr[1];
+      this.initSearchAll();
+    },
+    getorgTree (resolve) {
+      this.$http
+        .get('/sc-community/assets/community/list')
+        .then((data) => {
+          this.communityArr = data.data;
+          this.thisObjCommunit = this.communityArr[0];
+          this.$store.commit('setAreaSelect', data.data);
+          resolve && resolve();
+        })
+
+        .catch(function () { });
+    },
+    getTopTable (resolve) {
+      this.$http.post('/sc-charge/charge/report/statistics/receivable', this.mixins_query).then(({ data, status, msg }) => {
+        if (status == 0 && !!data) {
+          this.tableInsert = data;
         }
+        resolve && resolve();
+      });
+    },
+    timeFiterType () {
+      let arr = this.times;
+      let text = '';
+      if (!arr) {
+        arr = ['', ''];
+      }
+      let f = new Date(arr[0]).getMonth(),
+        l = new Date(arr[1]).getMonth();
+      if (f == l) {
+        text = `${this.$moment(new Date(arr[0])).format('YYYY年M月')}`;
+      } else {
+        text = `${this.$moment(new Date(arr[0])).format('YYYY年M月')}-${this.$moment(new Date(arr[1])).format('YYYY年M月')}`;
+      }
+      return text;
+    },
+    lookPage (row) {
+      new Promise((resolve) => {
+        this.$store.dispatch('addPopup', {
+          url: '/payService/statisticalReport/paymentDetails.vue',
+          width: '1200px',
+          height: '500px',
+          props: {
+            row,
+            mixins_query: this.mixins_query,
+            callback: resolve
+          },
+          showConfirmButton: true,
+          showCancelButton: true,
+          hideStar: true,
+          title: '缴费详情'
+        });
+      }).then(() => {
+        this.mixins_search();
+      });
     }
+  }
 };
 </script>
 <style scoped lang='scss'>
@@ -252,4 +318,93 @@ export default {
         }
     }
 }
+.search {
+    margin-bottom: 0px;
+}
+.table-top_block {
+    float: left;
+    margin-right: 20px;
+    color: #0eaeff;
+    font-weight: 600;
+    line-height: 20px;
+}
+.blockTitle {
+    width: 152px;
+    height: 35px;
+    font-size: 28px;
+    font-family: DINAlternate-Bold, DINAlternate;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 35px;
+}
+.blockNumber {
+    width: 56px;
+    height: 17px;
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 17px;
+}
+
+.mainTitle0 {
+    float: left;
+    margin-bottom: 20px;
+    width: 220px;
+    height: 78px;
+    background: linear-gradient(135deg, #488fff 0%, #65dcff 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitle1 {
+    float: left;
+    margin-bottom: 20px;
+    width: 220px;
+    height: 78px;
+    background: linear-gradient(315deg, #5eedcc 0%, #24c3f1 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitle2 {
+    float: left;
+    margin-bottom: 20px;
+    width: 220px;
+    height: 78px;
+    background: linear-gradient(135deg, #f0646c 0%, #f4994e 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitle3 {
+    float: left;
+    margin-bottom: 20px;
+    width: 220px;
+    height: 78px;
+    background: linear-gradient(135deg, #7178ff 0%, #d2a4ff 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitle4 {
+    float: left;
+    margin-bottom: 20px;
+    width: 220px;
+    height: 78px;
+    background: linear-gradient(135deg, #884dd2 0%, #df63cc 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
+.mainTitle5 {
+    float: left;
+    margin-bottom: 20px;
+    width: 220px;
+    height: 78px;
+    background: linear-gradient(135deg, #488fff 0%, #65dcff 100%);
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 15px 25px;
+}
 </style>