项目统计问题

src/views/building/Count.vue

@@ -2,16 +2,27 @@
   <div class="box-center">
     <div>
       <div class="toptab" style="cursor: pointer" v-if="orgType != 2">
-        <div @click="tapclickyab(0)" :class="{ activecllasscet: activeTotal == 0 }"
-          :style="{ background: activeTotal == 0 ? '#2671E2' : '#ffffff' }">
+        <div
+          @click="tapclickyab(0)"
+          :class="{ activecllasscet: activeTotal == 0 }"
+          :style="{ background: activeTotal == 0 ? '#2671E2' : '#ffffff' }"
+        >
           项目
         </div>
-        <div v-if="orgType == 0" @click="tapclickyab(1)" :class="{ activecllasscet: activeTotal == 1 }"
-          :style="{ background: activeTotal == 1 ? '#2671E2' : '#ffffff' }">
+        <div
+          v-if="orgType == 0"
+          @click="tapclickyab(1)"
+          :class="{ activecllasscet: activeTotal == 1 }"
+          :style="{ background: activeTotal == 1 ? '#2671E2' : '#ffffff' }"
+        >
           代理商
         </div>
-        <div v-if="orgType == 0 || orgType == 1" @click="tapclickyab(2)" :class="{ activecllasscet: activeTotal == 2 }"
-          :style="{ background: activeTotal == 2 ? '#2671E2' : '#ffffff' }">
+        <div
+          v-if="orgType == 0 || orgType == 1"
+          @click="tapclickyab(2)"
+          :class="{ activecllasscet: activeTotal == 2 }"
+          :style="{ background: activeTotal == 2 ? '#2671E2' : '#ffffff' }"
+        >
           公司
         </div>
       </div>
@@ -21,57 +32,142 @@
           <div class="div-lab">
             <div class="label" style="margin-left: 15px">筛选日期：</div>
             <div class="toptimeqhuan">
-              <div :class="{ tophove: searchForm.dateType == 4 }" @click="tabtimetap(4)" style="cursor: pointer">
+              <div
+                :class="{ tophove: searchForm.dateType == 4 }"
+                @click="tabtimetap(4)"
+                style="cursor: pointer"
+              >
                 近7天
               </div>
-              <div :class="{ tophove: searchForm.dateType == 5 }" @click="tabtimetap(5)" style="cursor: pointer">
+              <div
+                :class="{ tophove: searchForm.dateType == 5 }"
+                @click="tabtimetap(5)"
+                style="cursor: pointer"
+              >
                 近15天
               </div>
-              <div :class="{ tophove: searchForm.dateType == 6 }" @click="tabtimetap(6)" style="cursor: pointer">
+              <div
+                :class="{ tophove: searchForm.dateType == 6 }"
+                @click="tabtimetap(6)"
+                style="cursor: pointer"
+              >
                 近30天
               </div>
             </div>
             <div>
-              <el-date-picker v-model="time" type="daterange" class="div-inp" range-separator="-"
-                start-placeholder="开始日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd"
-                end-placeholder="结束日期" @change="timeChange">
+              <el-date-picker
+                v-model="time"
+                type="daterange"
+                class="div-inp"
+                range-separator="-"
+                start-placeholder="开始日期"
+                :default-time="['00:00:00', '23:59:59']"
+                value-format="yyyy-MM-dd"
+                end-placeholder="结束日期"
+                @change="timeChange"
+              >
               </el-date-picker>
             </div>
           </div>
 
           <div class="div-lab" v-if="orgType == 0">
-            <el-input v-model="changeValue" clearable placeholder="请输入" maxlength="10" @change="selectChange"
-              style="width: 363px">
-              <el-select v-model="selflag" slot="prepend" class="input-with-select" style="width: 115px"
-                placeholder="请选择" @change="selChange" :disabled="activeTotal == 1 || activeTotal == 2">
-                <el-option v-if="activeTotal != 1" label="公司名称" value="1"></el-option>
-                <el-option v-if="activeTotal != 2" label="代理商名称" value="2"></el-option>
-                <el-option v-if="activeTotal == 0" label="项目名称" value="3"></el-option>
+            <el-input
+              v-model="changeValue"
+              clearable
+              placeholder="请输入"
+              maxlength="10"
+              @change="selectChange"
+              style="width: 363px"
+            >
+              <el-select
+                v-model="selflag"
+                slot="prepend"
+                class="input-with-select"
+                style="width: 115px"
+                placeholder="请选择"
+                @change="selChange"
+                :disabled="activeTotal == 1 || activeTotal == 2"
+              >
+                <el-option
+                  v-if="activeTotal != 1"
+                  label="公司名称"
+                  value="1"
+                ></el-option>
+                <el-option
+                  v-if="activeTotal != 2"
+                  label="代理商名称"
+                  value="2"
+                ></el-option>
+                <el-option
+                  v-if="activeTotal == 0"
+                  label="项目名称"
+                  value="3"
+                ></el-option>
               </el-select>
             </el-input>
           </div>
 
           <div class="div-lab" v-if="orgType == 1">
-            <el-input v-model="changeValue" clearable placeholder="请输入" maxlength="10" @change="selectChange"
-              style="width: 363px">
-              <el-select v-model="selflag" slot="prepend" class="input-with-select" style="width: 115px"
-                placeholder="请选择" @change="selChange">
-                <el-option v-if="activeTotal != 1" label="公司名称" value="1"></el-option>
-                <el-option v-if="activeTotal == 0" label="项目名称" value="3"></el-option>
+            <el-input
+              v-model="changeValue"
+              clearable
+              placeholder="请输入"
+              maxlength="10"
+              @change="selectChange"
+              style="width: 363px"
+            >
+              <el-select
+                v-model="selflag"
+                slot="prepend"
+                class="input-with-select"
+                style="width: 115px"
+                placeholder="请选择"
+                @change="selChange"
+              >
+                <el-option
+                  v-if="activeTotal != 1"
+                  label="公司名称"
+                  value="1"
+                ></el-option>
+                <el-option
+                  v-if="activeTotal == 0"
+                  label="项目名称"
+                  value="3"
+                ></el-option>
               </el-select>
             </el-input>
           </div>
         </div>
         <div class="app-titel" style="margin-top: 5px">
           <div class="div-lab">
-            <div class="label" style="width: 70px;text-align: right;">地区：</div>
-            <el-cascader :props="props" @change="locationsChange" placeholder="省/市" size="small" separator="/"
-              v-model="provice" clearable></el-cascader>
+            <div class="label" style="width: 70px; text-align: right">
+              地区：
+            </div>
+            <el-cascader
+              :props="props"
+              @change="locationsChange"
+              placeholder="省/市"
+              size="small"
+              separator="/"
+              v-model="provice"
+              clearable
+            ></el-cascader>
           </div>
           <div v-if="orgType == 0 || orgType == 1" class="div-lab">
             <div class="label">运营人员：</div>
-            <el-select v-model="searchForm.operationStaffId" placeholder="请选择" class="div-inp" filterable clearable>
-              <el-option v-for="item in operaList" :key="item.accountId" :label="item.name" :value="item.accountId">
+            <el-select
+              v-model="searchForm.operationStaffId"
+              placeholder="请选择"
+              class="div-inp"
+              filterable
+              clearable
+            >
+              <el-option
+                v-for="item in operaList"
+                :key="item.accountId"
+                :label="item.name"
+                :value="item.accountId"
+              >
               </el-option>
             </el-select>
           </div>
@@ -83,169 +179,208 @@
           <div style="margin-left: 20px">
             <el-button @click="clascreen" type="text">清空筛选条件</el-button>
           </div>
-          <div style="margin-left: auto; margin-right: 10px" v-if="cus_build_count_download">
-            <el-button @click="downLoad" icon="el-icon-download">导出</el-button>
+          <div
+            style="margin-left: auto; margin-right: 10px"
+            v-if="cus_build_count_download"
+          >
+            <el-button @click="downLoad" icon="el-icon-download"
+              >导出</el-button
+            >
           </div>
         </div>
-        
       </div>
     </div>
 
     <!-- 表格 -->
     <div class="cen-tab">
-      <el-table height="427px" ref="table" :header-cell-style="{ background: '#F5F7FA', color: '#333333' }" v-if="activeTotal == 0" :data="tableData"
-        stripe style="width: 100%">
-        <el-table-column prop="propertyName" width="120"  label="项目名称" align="center">
-        </el-table-column>
-        <el-table-column prop="orgName" width="120" label="公司名称" align="center">
-          <template slot-scope="{ row }">
-            <el-tooltip class="item" effect="dark" :content="row.orgName" placement="top-start">
-              <span
-                style="display: block;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ row.orgName }}</span>
-            </el-tooltip>
-          </template>
-        </el-table-column>
-        <el-table-column prop="agentName" width="120" label="代理商" align="center">
-        </el-table-column>
-        <el-table-column prop="avgExacutiveRate" label="平均执行率" width="110" align="center" sortable>
-          <template slot-scope="{ row }">
-            {{ row.avgExacutiveRate || 0 }}%
+      <template v-if="activeTotal == 0">
+        <avue-crud
+          ref="crud"
+          :page.sync="page"
+          :data="tableData"
+          :table-loading="tableLoading"
+          :option="tableOption"
+          :show-column.sync="showColumn"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        >
+          <template slot-scope="{ row }" slot="menu">
+            <el-button
+              type="text"
+              v-if="cus_build_area_record"
+              @click="goEquiment(row)"
+              >设备使用统计</el-button
+            >
           </template>
-        </el-table-column>
-        <!-- <el-table-column prop="axExacutiveRate" label="最高执行率" align="center" sortable width="110">
-        </el-table-column>
-        <el-table-column prop="noMarkAdviserCount" label="未标顾问" align="center" sortable width="110">
-        </el-table-column> -->
-        <el-table-column prop="equipmentNum" label="设备总数" align="center" sortable width="100">
-        </el-table-column>
+        </avue-crud>
+      </template>
 
-        <el-table-column prop="area" label="地区" width="120"  :show-overflow-tooltip="true" align="center">
-          <template slot-scope="{ row }">
-              <span>{{ row.area }}</span>
+      <template v-if="activeTotal == 1">
+        <avue-crud
+          ref="crud"
+          :page.sync="page"
+          :data="tableData"
+          :table-loading="tableLoading"
+          :option="tableOption1"
+          :show-column.sync="showColumn1"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        >
+          <template slot-scope="{ row }" slot="menu">
+            <el-button type="text" @click="goDetail(row, 1)"
+              >查看详情</el-button
+            >
           </template>
-        </el-table-column>
-
-        <el-table-column v-if="orgType != 2" width="140" :show-overflow-tooltip="true" prop="operationStaffName" label="运营人员" align="center">
-          <template slot-scope="{ row }">
-              <span>{{ row.operationStaffName }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="onlineQuantity" label="在线设备" align="center" sortable width="100">
-        </el-table-column>
-        <el-table-column prop="noOnlineQuantity" label="离线设备" width="100" align="center" sortable>
-        </el-table-column>
-        <el-table-column prop="activeQuantity" label="活跃设备" align="center" sortable width="100">
-        </el-table-column>
-        <el-table-column prop="activeAccount" label="活跃顾问" align="center" sortable width="100">
-        </el-table-column>
-        <el-table-column prop="sumReception" label="接待量" align="center" sortable>
-        </el-table-column>
-        <!-- <el-table-column prop="sumActiveCustomer" label="有效接待" align="center" sortable width="110">
-        </el-table-column>
-        <el-table-column prop="noActiveCustomer" label="无效接待" align="center" sortable width="110">
-        </el-table-column> -->
-        <el-table-column prop="sumRecordTime" label="接待时长" align="center" sortable width="100">
-        </el-table-column>
+        </avue-crud>
+      </template>
 
-        <el-table-column prop="sumProhibitedQuantity" label="违禁次数" width="100" align="center" sortable>
-        </el-table-column>
-        <el-table-column label="操作" align="center" fixed="right" width="100">
-          <template slot-scope="{ row }">
-            <el-button type="text" v-if="cus_build_area_record" @click="goEquiment(row)">设备使用统计</el-button>
+      <template v-if="activeTotal == 2">
+        <avue-crud
+          ref="crud"
+          :page.sync="page"
+          :data="tableData"
+          :table-loading="tableLoading"
+          :option="tableOption2"
+          :show-column.sync="showColumn2"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        >
+          <template slot-scope="{ row }" slot="menu">
+            <el-button type="text" @click="goDetail(row, 2)"
+              >查看详情</el-button
+            >
           </template>
-        </el-table-column>
-      </el-table>
+        </avue-crud>
+      </template>
 
-      <el-table :header-cell-style="{ background: '#F5F7FA', color: '#333333' }" v-if="activeTotal == 2" :data="tableData"
-        stripe style="width: 100%" >
-        <el-table-column prop="orgName" width="120"  label="公司名称" align="center">
-        </el-table-column>
-        <el-table-column prop="houseQuantityOfEnough" label="服务期内项目" align="center" width="140">
-        </el-table-column>
-        <el-table-column prop="avgExacutiveRate" label="平均执行率" align="center" width="110" sortable>
+      <!-- <el-table
+        ref="table2"
+        :header-cell-style="{ background: '#F5F7FA', color: '#333333' }"
+        v-if="activeTotal == 2"
+        :data="tableData"
+        stripe
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="orgName"
+          width="120"
+          label="公司名称"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="houseQuantityOfEnough"
+          label="服务期内项目"
+          align="center"
+          width="140"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="avgExacutiveRate"
+          label="平均执行率"
+          align="center"
+          width="110"
+          sortable
+        >
           <template slot-scope="{ row }">
             {{ row.avgExacutiveRate || 0 }}%
           </template>
         </el-table-column>
-        <!-- <el-table-column prop="axExacutiveRate" label="最高执行率" align="center" sortable width="110">
-        </el-table-column>
-        <el-table-column prop="noMarkAdviserCount" label="未标顾问" align="center" sortable width="110">
-        </el-table-column> -->
-        <el-table-column prop="onlineQuantity" label="在线设备" align="center" sortable width="110">
+        <el-table-column
+          prop="onlineQuantity"
+          label="在线设备"
+          align="center"
+          sortable
+          width="110"
+        >
         </el-table-column>
         <el-table-column prop="area" label="地区" width="120" align="center">
         </el-table-column>
-        <el-table-column prop="operationStaffName" width="140"  label="运营人员" align="center">
-        </el-table-column>
-        <el-table-column prop="equipmentNum" label="设备总数" align="center" sortable width="110">
-        </el-table-column>
-        <el-table-column prop="noOnlineQuantity" label="离线设备" width="100" align="center" sortable>
-        </el-table-column>
-        <el-table-column prop="activeQuantity" label="活跃设备" align="center" sortable width="110">
-        </el-table-column>
-        <el-table-column prop="activeAccount" label="活跃顾问" align="center" sortable width="110">
-        </el-table-column>
-        <el-table-column prop="sumReception" label="接待量" align="center" sortable width="110">
-        </el-table-column>
-        <!-- <el-table-column prop="sumActiveCustomer" label="有效接待" align="center" sortable width="110">
-        </el-table-column>
-        <el-table-column prop="noActiveCustomer" label="无效接待" align="center" sortable width="110">
-        </el-table-column> -->
-        <el-table-column prop="sumRecordTime" label="接待时长" align="center" sortable width="110">
+        <el-table-column
+          prop="operationStaffName"
+          width="140"
+          label="运营人员"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="equipmentNum"
+          label="设备总数"
+          align="center"
+          sortable
+          width="110"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="noOnlineQuantity"
+          label="离线设备"
+          width="100"
+          align="center"
+          sortable
+        >
+        </el-table-column>
+        <el-table-column
+          prop="activeQuantity"
+          label="活跃设备"
+          align="center"
+          sortable
+          width="110"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="activeAccount"
+          label="活跃顾问"
+          align="center"
+          sortable
+          width="110"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="sumReception"
+          label="接待量"
+          align="center"
+          sortable
+          width="110"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="sumRecordTime"
+          label="接待时长"
+          align="center"
+          sortable
+          width="110"
+        >
         </el-table-column>
 
-        <el-table-column prop="sumProhibitedQuantity" label="违禁次数" align="center" sortable width="110">
+        <el-table-column
+          prop="sumProhibitedQuantity"
+          label="违禁次数"
+          align="center"
+          sortable
+          width="110"
+        >
         </el-table-column>
         <el-table-column label="操作" align="center" fixed="right" width="100">
           <template slot-scope="{ row }">
-            <el-button type="text" @click="goDetail(row, 2)">查看详情</el-button>
+            <el-button type="text" @click="goDetail(row, 2)"
+              >查看详情</el-button
+            >
           </template>
         </el-table-column>
-      </el-table>
+      </el-table> -->
 
-      <el-table :header-cell-style="{ background: '#F5F7FA', color: '#333333' }" v-if="activeTotal == 1" :data="tableData"
-        stripe style="width: 100%">
-        <el-table-column prop="agentName" width="120" label="代理商名称" align="center">
-        </el-table-column>
-        <el-table-column prop="area" label="地区" width="120" align="center">
-        </el-table-column>
-        <el-table-column prop="avgExacutiveRate" label="平均执行率" align="center" width="140" sortable>
-          <template slot-scope="{ row }">
-            {{ row.avgExacutiveRate || 0 }}%
-          </template>
-        </el-table-column>
-        <!-- <el-table-column prop="axExacutiveRate" label="最高执行率" align="center" sortable width="110">
-        </el-table-column>
-        <el-table-column prop="noMarkAdviserCount" label="未标顾问" align="center" sortable width="110">
-        </el-table-column> -->
-        <el-table-column prop="operationStaffName" width="140" label="运营人员" align="center">
-        </el-table-column>
-        <el-table-column prop="houseQuantityOfEnough" label="服务期内项目" align="center" width="150" sortable>
-        </el-table-column>
-        <el-table-column prop="sumReception" label="接待量" align="center" sortable width="110">
-        </el-table-column>
-        <!-- <el-table-column prop="sumActiveCustomer" label="有效接待" align="center" sortable width="110">
-        </el-table-column>
-        <el-table-column prop="noActiveCustomer" label="无效接待" align="center" sortable width="110">
-        </el-table-column> -->
-        <el-table-column prop="equipmentNum" label="设备总数" align="center" sortable width="110">
-        </el-table-column>
-        <el-table-column prop="sumRecordTime" label="接待时长" align="center" sortable width="110">
-        </el-table-column>
-
-        <el-table-column prop="sumProhibitedQuantity" label="违禁次数" align="center" width="110" sortable>
-        </el-table-column>
-        <el-table-column label="操作" align="center" fixed="right" width="100">
-          <template slot-scope="{ row }">
-            <el-button type="text" @click="goDetail(row, 1)">查看详情</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
-        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
-          :page-sizes="[10,20, 30, 50,100]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
+      <!-- <div style="display: flex; justify-content: flex-end; margin-top: 10px">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[10, 20, 30, 50, 100]"
+          :page-size="size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        >
         </el-pagination>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -256,6 +391,24 @@ import { getAreaList } from "@/api/modules/api";
 export default {
   data() {
     return {
+      tableIdName: "buildCount1", // 当前页面需要的变量
+      tableOption: this.$tableOption.buildCount1, // 当前table配置项
+      showColumn: [], // 监听的显示列的变量
+      tableLoading: false, // 是否显示加载中
+      page: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 30, // 每页显示多少条
+      },
+
+      tableIdName1: "buildCount2", // 当前页面需要的变量
+      tableOption1: this.$tableOption.buildCount2, // 当前table配置项
+      showColumn1: [], // 监听的显示列的变量
+
+      tableIdName2: "buildCount3", // 当前页面需要的变量
+      tableOption2: this.$tableOption.buildCount3, // 当前table配置项
+      showColumn2: [], // 监听的显示列的变量
+
       props: {
         lazy: true,
         checkStrictly: true,
@@ -321,7 +474,33 @@ export default {
   computed: {
     ...mapGetters(["permissions"]),
   },
+  watch: {
+    showColumn(nowV) {
+      let params = {
+        tableIdName: this.tableIdName,
+        optionData: nowV,
+      };
+      this.$db.upDate(params);
+    },
+    showColumn1(nowV) {
+      let params = {
+        tableIdName: this.tableIdName1,
+        optionData: nowV,
+      };
+      this.$db.upDate(params);
+    },
+    showColumn2(nowV) {
+      let params = {
+        tableIdName: this.tableIdName2,
+        optionData: nowV,
+      };
+      this.$db.upDate(params);
+    },
+  },
+
   created() {
+    // 获取显隐的列表
+    this.setTableOption();
     this.cus_build_area_record = this.permissions["cus_build_area_record"];
     this.cus_build_count_download =
       this.permissions["cus_build_count_download"];
@@ -330,12 +509,58 @@ export default {
     if (this.orgType == 1) {
       this.selflag = "3";
     }
+
+    this.checkOption();
+
     // 获取项目列表
     this.tabtimetap(4);
     this.getOperaList();
     this.houseStatistics();
   },
   methods: {
+    // 获取当前页面的显隐
+    setTableOption() {
+      this.$db.getDataByKey(this.tableIdName).then((res) => {
+        console.log(res, "获取存储的res");
+        if (res.tableIdName == this.tableIdName) {
+          this.showColumn = res.optionData;
+        }
+      });
+    },
+
+    // 切换table选项后获取缓存的数据
+    getNowTable() {
+      let name =
+        this.activeTotal == 0
+          ? this.tableIdName
+          : this["tableIdName" + this.activeTotal];
+      let showArr =
+        this.activeTotal == 0 ? "showColumn" : `showColumn${this.activeTotal}`;
+      this.$db.getDataByKey(name).then((res) => {
+        console.log(res, "获取存储的res");
+        if (res.tableIdName == name) {
+          this[showArr] = res.optionData;
+        }
+      });
+    },
+
+    // 检测是否可以展示某些字段
+    checkOption() {
+      const checkArr = ["运营人员"];
+      checkArr.forEach((item) => {
+        let index = this.$tableOption[this.tableIdName].column.findIndex(
+          (findObj) => item == findObj.label
+        );
+        if (index >= 0) {
+          let obj = this.$tableOption[this.tableIdName].column[index];
+          if (obj.label == "运营人员" && this.orgType != 2) {
+            obj.hide = false;
+            obj.showColumn = true;
+          }
+        }
+      });
+    },
+
     downLoad() {
       let obj = {
         ...this.searchForm,
@@ -488,6 +713,7 @@ export default {
         }
       }
       this.clascreen();
+      this.getNowTable()
       // this.houseStatistics();
     },
     timeChange(e) {
@@ -516,7 +742,7 @@ export default {
       this.searchForm.orgName = "";
     },
     screen() {
-      this.currentPage = 1;
+      this.page.currentPage = 1;
       console.log(this.searchForm);
       this.houseStatistics();
     },
@@ -535,13 +761,13 @@ export default {
         startDate: "",
         endDate: "",
       };
-      this.currentPage = 1;
+      this.page.currentPage = 1;
       this.houseStatistics();
     },
     houseStatistics() {
       let obj = {
-        current: this.currentPage,
-        size: this.size,
+        current: this.page.currentPage,
+        size: this.page.pageSize,
         ...this.searchForm,
         agentId: localStorage.getItem("agentId"),
         orgCode: localStorage.getItem("orgCode"),
@@ -560,7 +786,11 @@ export default {
         this.$api.api.houseStatistics1(obj).then((res) => {
           // console.log(res);
           this.tableData = res.data.records;
-          this.total = res.data.total;
+          this.page.total = res.data.total;
+          // 表格中设置ref属性，在数据渲染之后或者updated()之后
+          this.$nextTick(() => {
+            this.$refs.crud.doLayout();
+          });
         });
       } else if (this.activeTotal == 1) {
         obj.operationType = null;
@@ -568,7 +798,11 @@ export default {
         this.$api.api.agentStatistics(obj).then((res) => {
           // console.log(res);
           this.tableData = res.data.records;
-          this.total = res.data.total;
+          this.page.total = res.data.total;
+          // 表格中设置ref属性，在数据渲染之后或者updated()之后
+          this.$nextTick(() => {
+            this.$refs.crud.doLayout();
+          });
         });
       } else {
         if (this.orgType == 0) {
@@ -582,10 +816,10 @@ export default {
         this.$api.api.companyStatistics(obj).then((res) => {
           // console.log(res);
           this.tableData = res.data.records;
-          this.total = res.data.total;
-                    // 表格中设置ref属性，在数据渲染之后或者updated()之后
+          this.page.total = res.data.total;
+          // 表格中设置ref属性，在数据渲染之后或者updated()之后
           this.$nextTick(() => {
-            this.$refs.table.doLayout();
+            this.$refs.crud.doLayout();
           });
         });
       }
@@ -595,12 +829,12 @@ export default {
     },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
-      this.size = val;
+      this.page.pageSize = val;
       this.houseStatistics();
     },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
-      this.currentPage = val;
+      this.page.currentPage = val;
       this.houseStatistics();
     },
   },
@@ -700,7 +934,7 @@ export default {
   thead {
     tr {
       th {
-        background: #F5F7FA;
+        background: #f5f7fa;
         color: #333333;
       }
     }
@@ -708,11 +942,11 @@ export default {
 }
 
 /deep/ .el-button--primary {
-  background: #2671E2 !important;
-  border: 1px solid #2671E2 !important;
+  background: #2671e2 !important;
+  border: 1px solid #2671e2 !important;
 }
 
 /deep/ .el-button--text {
-  color: #2671E2;
+  color: #2671e2;
 }
 </style>

src/views/building/table.js

@@ -66,13 +66,13 @@ export default {
                 dicData: [{
                     label: '正式',
                     value: 0
-                },{
+                }, {
                     label: '试用',
                     value: 1
-                },{
+                }, {
                     label: '演示',
                     value: 2
-                },{
+                }, {
                     label: '测试',
                     value: 3
                 }]
@@ -142,5 +142,293 @@ export default {
                 prop: "provinceName",
             },
         ]
-    }
+    },
+
+    buildCount1: {
+        border: true,
+        index: false,
+        height: 420,
+        indexLabel: "序号",
+        stripe: true,
+        menuAlign: "center",
+        menuWidth: 146,
+        menu: true,
+        align: "left",
+        refreshBtn: false,
+        searchSize: "mini",
+        searchMenuSpan: 9,
+        delBtn: false,
+        addBtn: false,
+        editBtn: false,
+        viewBtn: false,
+        size: "small",
+        column: [
+            {
+                label: "项目名称",
+                prop: "propertyName",
+            },
+            {
+                label: "公司名称",
+                prop: "orgName",
+                minWidth: '100px',
+            },
+            {
+                label: "代理商",
+                prop: "agentName",
+                minWidth: '100px',
+            },
+            {
+                label: "平均执行率",
+                prop: "avgExacutiveRate",
+                sortable: true,
+                minWidth: '110px',
+                formatter: row => {
+                    return (row.avgExacutiveRate || 0) + '%'
+                }
+            },
+            {
+                label: "设备总数",
+                prop: "equipmentNum",
+                minWidth: '100px',
+                sortable: true,
+            },
+            {
+                label: "地区",
+                prop: "area", 
+                formatter: row => {
+                    return row.area || '-'
+                }
+            },
+            {
+                label: "运营人员",
+                prop: "operationStaffName",
+                hide: true,
+                showColumn: false,
+                formatter: row => {
+                    return row.operationStaffName || '-'
+                }
+            },
+            {
+                label: "在线设备",
+                prop: "onlineQuantity",
+                minWidth: '100px',
+                sortable: true,
+            },
+            {
+                label: "离线设备",
+                prop: "noOnlineQuantity",
+                minWidth: '100px',
+                sortable: true,
+            },
+            {
+                label: "活跃设备",
+                prop: "activeQuantity",
+                minWidth: '100px',
+                sortable: true,
+            },
+            {
+                label: "活跃顾问",
+                prop: "activeAccount",
+                minWidth: '100px',
+                sortable: true,
+            },
+            {
+                label: "接待量",
+                prop: "sumReception",
+                minWidth: '100px',
+                sortable: true,
+            },
+            {
+                label: "接待时长",
+                prop: "sumRecordTime",
+                minWidth: '100px',
+                sortable: true,
+            },
+            {
+                label: "违禁次数",
+                prop: "sumProhibitedQuantity",
+                minWidth: '100px',
+                sortable: true,
+            },
+        ]
+    },
+
+    buildCount2: {
+        border: true,
+        index: false,
+        height: 420,
+        indexLabel: "序号",
+        stripe: true,
+        menuAlign: "center",
+        menuWidth: 146,
+        menu: true,
+        align: "left",
+        refreshBtn: false,
+        searchSize: "mini",
+        searchMenuSpan: 9,
+        delBtn: false,
+        addBtn: false,
+        editBtn: false,
+        viewBtn: false,
+        size: "small",
+        column: [
+            {
+                label: "代理商名称",
+                prop: "agentName",
+                minWidth: '120px',
+            },
+            {
+                label: "平均执行率",
+                prop: "avgExacutiveRate",
+                minWidth: '140px',
+                formatter: row => {
+                    return (row.avgExacutiveRate || 0) + '%'
+                }
+            },
+            {
+                label: "运营人员",
+                prop: "operationStaffName",
+                minWidth: '140px',
+                formatter: row => {
+                    return row.operationStaffName || '-'
+                }
+            },
+            {
+                label: "服务期内项目",
+                prop: "houseQuantityOfEnough",
+                minWidth: '120px',
+                sortable: true,
+            },
+            {
+                label: "接待量",
+                prop: "sumReception",
+                minWidth: '110px',
+                sortable: true,
+            },
+            {
+                label: "设备总数",
+                prop: "equipmentNum",
+                minWidth: '110px',
+                sortable: true,
+            },
+            {
+                label: "接待时长",
+                prop: "sumRecordTime",
+                minWidth: '110px',
+                sortable: true,
+            },
+            {
+                label: "违禁次数",
+                prop: "sumProhibitedQuantity",
+                minWidth: '110px',
+                sortable: true,
+            },
+        ]
+    },
+
+    buildCount3: {
+        border: true,
+        index: false,
+        height: 500,
+        indexLabel: "序号",
+        stripe: true,
+        menuAlign: "center",
+        menuWidth: 146,
+        menu: true,
+        align: "left",
+        refreshBtn: false,
+        searchSize: "mini",
+        searchMenuSpan: 9,
+        delBtn: false,
+        addBtn: false,
+        editBtn: false,
+        viewBtn: false,
+        size: "small",
+        column: [
+            {
+                label: "公司名称",
+                minWidth: '120px',
+                prop: "orgName",
+            },
+            {
+                label: "服务期内项目",
+                minWidth: '100px',
+                prop: "houseQuantityOfEnough",
+            },
+            {
+                label: "平均执行率",
+                minWidth: '120px',
+                sortable: true,
+                prop: "avgExacutiveRate",
+                formatter: row => {
+                    return (row.avgExacutiveRate || 0) + '%'
+                }
+            },
+            {
+                label: "在线设备",
+                sortable: true,
+                minWidth: '100px',
+                prop: "onlineQuantity",
+            },
+            {
+                label: "地区",
+                minWidth: '120px',
+                prop: "area",
+                formatter: row => {
+                    return row.area || '-'
+                }
+            },
+            {
+                label: "运营人员",
+                minWidth: '120px',
+                prop: "operationStaffName",
+                formatter: row => {
+                    return row.operationStaffName || '-'
+                }
+            },
+            {
+                label: "设备总数",
+                minWidth: '120px',
+                sortable: true,
+                prop: "equipmentNum",
+            },
+            {
+                label: "离线设备",
+                minWidth: '120px',
+                sortable: true,
+                prop: "noOnlineQuantity",
+            },
+            {
+                label: "活跃设备",
+                minWidth: '120px',
+                sortable: true,
+                prop: "activeQuantity",
+            },
+            {
+                label: "活跃顾问",
+                minWidth: '120px',
+                sortable: true,
+                prop: "activeAccount",
+            },
+            {
+                label: "接待量",
+                minWidth: '120px',
+                sortable: true,
+                prop: "sumReception",
+            },
+            {
+                label: "接待时长",
+                minWidth: '120px',
+                sortable: true,
+                prop: "sumRecordTime",
+            },
+            {
+                label: "违禁次数",
+                minWidth: '120px',
+                sortable: true,
+                prop: "sumProhibitedQuantity",
+            },
+        ]
+    },
+
 }