调整活动统计页面

src/views/stat/activity/index.vue

@@ -3,71 +3,54 @@
     <el-row>
       <el-col :span="24" class="card-box">
         <el-card>
-          <div slot="header"><span>基本信息</span></div>
+          <div slot="header"><span>搜索信息</span></div>
           <div class="el-table el-table--enable-row-hover el-table--medium">
-            <table cellspacing="0" style="width: 100%">
-              <tbody>
-                <tr>
-                  <td class="el-table__cell is-leaf"><div class="cell">Redis版本</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">运行模式</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">端口</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">客户端数</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div></td>
-                </tr>
-                <tr>
-                  <td class="el-table__cell is-leaf"><div class="cell">运行时间(天)</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">使用内存</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">使用CPU</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">内存配置</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td>
-                </tr>
-                <tr>
-                  <td class="el-table__cell is-leaf"><div class="cell">AOF是否开启</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">RDB是否成功</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">Key数量</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell">网络入口/出口</div></td>
-                  <td class="el-table__cell is-leaf"><div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div></td>
-                </tr>
-              </tbody>
-            </table>
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
+              <el-form-item label="时间范围">
+                <el-date-picker
+                  v-model="dateRange"
+                  style="width: 240px"
+                  value-format="yyyy-MM-dd"
+                  type="daterange"
+                  range-separator="-"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                ></el-date-picker>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
           </div>
         </el-card>
       </el-col>
 
-      <el-col :span="12" class="card-box">
+      <el-col :span="8" class="card-box">
         <el-card>
-          <div slot="header"><span>活动次数统计</span></div>
+          <div slot="header"><span>活动统计</span></div>
           <div class="el-table el-table--enable-row-hover el-table--medium">
-            <div ref="activities" style="height: 420px" />
+            <div ref="activities" style="height: 500px" />
           </div>
         </el-card>
       </el-col>
-
-      <!-- <el-col :span="12" class="card-box">
-        <el-card>
-          <div slot="header"><span>命令统计</span></div>
-          <div class="el-table el-table--enable-row-hover el-table--medium">
-            <div ref="commandstats" style="height: 420px" />
-          </div>
-        </el-card>
-      </el-col> -->
-
-      <el-col :span="12" class="card-box">
+      <el-col :span="16" class="card-box">
         <el-card>
           <div slot="header">
-            <span>内存信息</span>
+            <span>人数统计</span>
           </div>
+          <el-row :gutter="24">
+            <el-col :span="3"><div class="grid-content bg-purple">总人数：</div></el-col>
+            <el-col :span="3"><div class="grid-content bg-purple">居民人数：</div></el-col>
+            <el-col :span="3"><div class="grid-content bg-purple">网格长人数：</div></el-col>
+            <el-col :span="3"><div class="grid-content bg-purple">楼栋长人数：</div></el-col>
+            <el-col :span="3"><div class="grid-content bg-purple">单元长人数：</div></el-col>
+            <el-col :span="3"><div class="grid-content bg-purple">下沉干部人数：</div></el-col>
+            <el-col :span="3"><div class="grid-content bg-purple">志愿者人数：</div></el-col>
+            <el-col :span="3"><div class="grid-content bg-purple">社区干部人数：</div></el-col>
+          </el-row>
           <div class="el-table el-table--enable-row-hover el-table--medium">
-            <div ref="usedmemory" style="height: 420px" />
+            <div ref="usedmemory" style="height: 480px" />
           </div>
         </el-card>
       </el-col>
@@ -86,46 +69,109 @@ export default {
     return {
       activities: null,
       // cache信息
-      cache: []
+      cache: [],
+      queryParams: {},
+      dateRange: []
     }
   },
-  created() {
-    this.getList();
-    this.openLoading();
+  mounted() {
+    // this.getList();
+    // this.openLoading();
+    this.getActivity();
+    this.getUser();
   },
   methods: {
+    // 搜索
+    handleQuery() {
+      console.log(this.addDateRange(this.queryParams, this.dateRange));
+    },
+    // 重置
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
     /** 查缓存询信息 */
     getList() {
-      getCache().then((response) => {
-        this.cache = response.data;
-        this.$modal.closeLoading();
-      });
-
-      statActivitiesByType().then((response) => {
-        this.activities = echarts.init(this.$refs.activities, "macarons");
-        this.activities.setOption({
-          tooltip: {
-            trigger: "item",
-            formatter: "{a} <br/>{b} : {c} ({d}%)",
-          },
-          series: [
-            {
-              name: "活动名称",
-              type: "pie",
-              roseType: "radius",
-              radius: [15, 95],
-              center: ["50%", "38%"],
-              data: response.data.activitiesStats,
-              animationEasing: "cubicInOut",
-              animationDuration: 1000,
-            }
-          ]
-        });
-      });
-    },
-    // 打开加载层
-    openLoading() {
       this.$modal.loading("正在加载活动统计数据，请稍候！");
+      this.$modal.closeLoading();
+    },
+    getActivity() {
+      const myChart = echarts.init(this.$refs.activities, 'macarons');
+      const data = [
+        { name: '教育宣讲', value: 120 },
+        { name: '关爱服务', value: 20 },
+        { name: '环境卫生', value: 100 },
+        { name: '治理防范', value: 200 },
+        { name: '文化娱乐', value: 80 },
+        { name: '志愿服务', value: 120 }
+      ]
+      const option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: "{b}: {c} ({d}%)",
+        },
+        series: [
+          {
+            type: "pie",
+            roseType: "radius",
+            radius: [15, 95],
+            center: ["50%", "38%"],
+            data,
+            animationEasing: "cubicInOut",
+            animationDuration: 1000,
+          }
+        ]
+      };
+      myChart.setOption(option);
+    },
+    getUser() {
+      const data = [
+        { name: '教育宣讲', value: 120 },
+        { name: '关爱服务', value: 20 },
+        { name: '环境卫生', value: 100 },
+        { name: '治理防范', value: 200 },
+        { name: '文化娱乐', value: 80 },
+        { name: '志愿服务', value: 120 }
+      ];
+      const myChart = echarts.init(this.$refs.usedmemory);
+      const option = {
+        xAxis: {
+          type: 'category',
+          data: (() => {
+            let list = [];
+              data.map((item) => {
+                  list.push(item.name);
+              });
+              return list;
+          })(),
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data,
+            type: 'bar',
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            },
+            label: {
+              show: true,
+              position: 'top'
+            },
+            itemStyle: {
+              normal: {
+                color: function(params) {
+                    return '#3f48cc'
+                }
+              }
+            }
+          }
+        ]
+      };
+      myChart.setOption(option);
     }
   }
 };