商铺信息统计

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