src/api/community/shop.js

@@ -10,17 +10,9 @@ export function listShop(query) {
 }
 
 // 依据商业板块
-export function listBuildingByDistrict(district) {
+export function listTagByDistrict(district) {
   return request({
-    url: '/community/shop/listBuildingByDistrict/' + district,
-    method: 'get'
-  })
-}
-
-// 依据商业板块
-export function getDistrictBuildingFloor() {
-  return request({
-    url: '/community/shop/districtBuildingFloor',
+    url: '/community/shop/listTagByDistrict/' + district,
     method: 'get'
   })
 }

src/api/stat/index.js

@@ -107,3 +107,19 @@ export function writeOffQuery(query) {
     params: query
   })
 }
+
+// 按商铺个数统计
+export function shopCount() {
+  return request({
+    url: '/community/stat/shop-count',
+    method: 'get'
+  })
+}
+
+// 按商铺面积统计
+export function shopArea() {
+  return request({
+    url: '/community/stat/shop-area',
+    method: 'get'
+  })
+}

src/views/community/shop/index.vue

@@ -9,13 +9,25 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="商业板块" prop="address">
-        <el-cascader
-              v-model="addressSelected"
-              :options="addressOptions"
-              :props="{ checkStrictly: true }"
-              clearable
-              @change="handleChange"></el-cascader>
+      <el-form-item label="商业板块" prop="district">
+        <el-select v-model="queryParams.district" placeholder="请选择商业板块" @change="handleSelectDistrict" clearable>
+          <el-option
+            v-for="dict in dict.type.che_district"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="标签" prop="tag">
+        <el-select v-model="queryParams.tag"  v-bind:disabled="districtNotSelected" placeholder="请选择标签" clearable>
+          <el-option
+            v-for="item in tagList"
+            :key="item"
+            :label="item"
+            :value="item"
+          ></el-option>
+        </el-select>
       </el-form-item>
       <el-form-item label="使用状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="请选择使用状态" clearable>
@@ -62,7 +74,7 @@
           icon="el-icon-upload"
           size="mini"
           @click="handleImport"
-          v-hasPermi="['community:shop:export']"
+          v-hasPermi="['community:shop:import']"
         >导入</el-button>
       </el-col>
       <el-col :span="1.5">
@@ -85,8 +97,7 @@
           <dict-tag :options="dict.type.che_district" :value="scope.row.district"/>
         </template>
       </el-table-column>
-      <el-table-column label="楼栋" align="center" prop="building" />
-      <el-table-column label="楼层" align="center" prop="floor" />
+      <el-table-column label="标签" align="center" prop="tag" />
       <el-table-column label="店铺号" align="center" prop="number" />
       <el-table-column label="使用状态" align="center" prop="status">
         <template slot-scope="scope">
@@ -149,11 +160,8 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="楼栋" prop="building">
-          <el-input v-model="form.building" placeholder="请输入楼栋" />
-        </el-form-item>
-        <el-form-item label="楼层" prop="floor">
-          <el-input v-model="form.floor" placeholder="请输入楼层" />
+        <el-form-item label="标签" prop="tag">
+          <el-input v-model="form.tag" placeholder="请输入标签" />
         </el-form-item>
         <el-form-item label="店铺号" prop="number">
           <el-input v-model="form.number" placeholder="请输入店铺号" />
@@ -244,7 +252,7 @@
 </template>
 
 <script>
-import { listShop, listBuildingByDistrict, getDistrictBuildingFloor, getShop, delShop, addShop, updateShop } from "@/api/community/shop";
+import { listShop, listTagByDistrict, getShop, delShop, addShop, updateShop } from "@/api/community/shop";
 import { getToken } from "@/utils/auth";
 
 export default {
@@ -252,8 +260,6 @@ export default {
   dicts: ['establishment_category', 'vacant_status', 'che_district', 'business_model'],
   data() {
     return {
-      addressSelected: [],
-      addressOptions: [],
       // 遮罩层
       loading: true,
       // 选中数组
@@ -268,6 +274,8 @@ export default {
       total: 0,
       // shop表格数据
       shopList: [],
+      // tag表格数据
+      tagList: [],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -277,8 +285,7 @@ export default {
         pageNum: 1,
         pageSize: 10,
         district: null,
-        building: null,
-        floor: null,
+        tag: null,
         status: null,
         name: null,
       },
@@ -309,7 +316,11 @@ export default {
   },
   created() {
     this.getList();
-    this.getDistrictBuidlingFloor();
+  },
+  computed: {
+    districtNotSelected() {
+      return this.queryParams.district === null;
+    }
   },
   methods: {
     /** 查询shop列表 */
@@ -321,11 +332,6 @@ export default {
         this.loading = false;
       });
     },
-    getDistrictBuidlingFloor(){
-      getDistrictBuildingFloor().then(response => {
-        this.addressOptions = response.data;
-      });
-    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -336,8 +342,7 @@ export default {
       this.form = {
         shopId: null,
         district: null,
-        building: null,
-        floor: null,
+        tag: null,
         number: null,
         status: null,
         name: null,
@@ -363,38 +368,24 @@ export default {
 
       this.queryParams.name = null;
       this.queryParams.district = null;
-      this.queryParams.building = null;
-      this.queryParams.floor = null;
+      this.queryParams.tag = null;
       this.queryParams.status = null;
 
       this.resetForm("queryForm");
       this.handleQuery();
     },
-    handleChange(value) {
-        if (value.length == 1) {
-          this.queryParams.district = value[0];
-          this.queryParams.building = null;
-          this.queryParams.floor = null;
-        }
-
-        if (value.length == 2) {
-          this.queryParams.district = value[0];
-          this.queryParams.building = value[1];
-          this.queryParams.floor = null;
-        }
-
-        if (value.length == 3) {
-          this.queryParams.district = value[0];
-          this.queryParams.building = value[1];
-          this.queryParams.floor = value[2];
-        }
-    },
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.shopId)
       this.single = selection.length!==1
       this.multiple = !selection.length
     },
+    handleSelectDistrict(data){
+      this.queryParams.tag = null;
+      listTagByDistrict(data).then(response => {
+        this.tagList = response.data;
+      });
+    },
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
@@ -445,7 +436,7 @@ export default {
     handleExport() {
       this.download('community/shop/export', {
         ...this.queryParams
-      }, `shop_${new Date().getTime()}.xlsx`)
+      }, `商铺信息_${new Date().getTime()}.xlsx`)
     },
     /** 导入按钮操作 */
     handleImport() {

src/views/stat/shop/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="app-container">
+    <el-row>
+      <el-col :span="12" class="card-box">
+        <el-card>
+          <div slot="header">
+            <span>商铺个数统计</span>
+          </div>
+          <div ref="shopCount" style="height: 550px" />
+        </el-card>
+      </el-col>
+      <el-col :span="12" class="card-box">
+        <el-card>
+          <div slot="header">
+            <span>商铺面积统计</span>
+          </div>
+          <div ref="shopArea" style="height: 550px" />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { shopCount, shopArea } from "@/api/stat/index";
+import echarts from "echarts";
+
+export default {
+  name: "Cache",
+  data() {
+    return {
+      // cache信息
+      cache: [],
+      queryParams: {},
+      dateRange: [],
+      userData: []
+    }
+  },
+  mounted() {
+    this.handleQuery();
+  },
+  methods: {
+    // 搜索
+    handleQuery() {
+      this.$modal.loading("正在加载活动统计数据，请稍候！");
+      this.getShopCount();
+      this.getShopArea();
+    },
+    async getShopCount() {
+      const res = await shopCount();
+      const data = res?.data;
+      const myChart = echarts.init(this.$refs.shopCount);
+      const option = {
+        legend: {},
+        tooltip: {},
+        dataset: {
+          source: [
+            ['商业板块', '总铺位数', '已租铺位数', '待租铺位数'],
+            ...data.map(item => [item.district, item.totalCount, item.usedCount, item.unusedCount])
+          ]
+        },
+        xAxis: { type: 'category' },
+        yAxis: {},
+        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
+      };
+      myChart.setOption(option);
+
+      this.$modal.closeLoading();
+    },
+    async getShopArea() {
+      const res = await shopArea();
+      const data = res?.data;
+      const myChart = echarts.init(this.$refs.shopArea);
+      const option = {
+        legend: {},
+        tooltip: {},
+        dataset: {
+          source: [
+            ['商业板块', '总铺位面积', '已租铺位面积', '待租铺位面积'],
+            ...data.map(item => [item.district, item.totalArea, item.usedArea, item.unusedArea])
+          ]
+        },
+        xAxis: { type: 'category' },
+        yAxis: {},
+        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
+      };
+      myChart.setOption(option);
+
+      this.$modal.closeLoading();
+    },
+  }
+};
+</script>