|
@@ -6,16 +6,21 @@
|
|
|
<div slot="header"><span>搜索信息</span></div>
|
|
|
<div class="el-table el-table--enable-row-hover el-table--medium">
|
|
|
<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"
|
|
|
+ <el-form-item label="活动开始时间" prop="startTime">
|
|
|
+ <el-date-picker clearable
|
|
|
+ v-model="queryParams.startTime"
|
|
|
+ type="date"
|
|
|
value-format="yyyy-MM-dd"
|
|
|
- type="daterange"
|
|
|
- range-separator="-"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- ></el-date-picker>
|
|
|
+ placeholder="请选择活动开始时间">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="活动结束时间" prop="endTime">
|
|
|
+ <el-date-picker clearable
|
|
|
+ v-model="queryParams.endTime"
|
|
|
+ type="date"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="请选择活动结束时间">
|
|
|
+ </el-date-picker>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
@@ -40,17 +45,10 @@
|
|
|
<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-col :span="4" v-for="(item, index) in userData" :key="index"><div style="margin-top: 8px;">{{ item.name }}: {{ item.value }}人</div></el-col>
|
|
|
</el-row>
|
|
|
<div class="el-table el-table--enable-row-hover el-table--medium">
|
|
|
- <div ref="usedmemory" style="height: 480px" />
|
|
|
+ <div ref="usedmemory" style="height: 440px" />
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
@@ -59,8 +57,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getCache } from "@/api/monitor/cache";
|
|
|
-import { statActivitiesByType } from "@/api/community/stat";
|
|
|
+import { activityCountByType, userCountByType, userCountByTag, userTotalCountByTag } from "@/api/stat/index";
|
|
|
import echarts from "echarts";
|
|
|
|
|
|
export default {
|
|
@@ -71,19 +68,29 @@ export default {
|
|
|
// cache信息
|
|
|
cache: [],
|
|
|
queryParams: {},
|
|
|
- dateRange: []
|
|
|
+ dateRange: [],
|
|
|
+ userData: [],
|
|
|
+ titleList: [
|
|
|
+ { name: '文化娱乐', value: 'whyl' },
|
|
|
+ { name: '志愿服务', value: 'zyfu' },
|
|
|
+ { name: '教育宣讲', value: 'jyxj' },
|
|
|
+ { name: '治理防范', value: 'zlff' },
|
|
|
+ { name: '环境卫生', value: 'hjws' },
|
|
|
+ { name: '关爱服务', value: 'gafw' }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
- // this.getList();
|
|
|
+ this.handleQuery();
|
|
|
// this.openLoading();
|
|
|
- this.getActivity();
|
|
|
- this.getUser();
|
|
|
},
|
|
|
methods: {
|
|
|
// 搜索
|
|
|
handleQuery() {
|
|
|
- console.log(this.addDateRange(this.queryParams, this.dateRange));
|
|
|
+ this.$modal.loading("正在加载活动统计数据,请稍候!");
|
|
|
+ this.getActivity();
|
|
|
+ this.getUser();
|
|
|
+ this.getUserList();
|
|
|
},
|
|
|
// 重置
|
|
|
resetQuery() {
|
|
@@ -91,21 +98,24 @@ export default {
|
|
|
this.resetForm("queryForm");
|
|
|
this.handleQuery();
|
|
|
},
|
|
|
- /** 查缓存询信息 */
|
|
|
- getList() {
|
|
|
- this.$modal.loading("正在加载活动统计数据,请稍候!");
|
|
|
+ /** 人数信息 */
|
|
|
+ async getUserList() {
|
|
|
+ const typeUser = await userCountByTag(this.queryParams);
|
|
|
+ console.log(typeUser, 'typeUser');
|
|
|
+ const allUser = await userTotalCountByTag(this.queryParams);
|
|
|
+ console.log(allUser, 'allUser');
|
|
|
+ const allData = [{ name: '总人数', value: allUser.data }];
|
|
|
+ this.userData = [ ...allData, ...typeUser?.data ];
|
|
|
this.$modal.closeLoading();
|
|
|
},
|
|
|
- getActivity() {
|
|
|
+ async getActivity() {
|
|
|
+ const res = await activityCountByType(this.queryParams);
|
|
|
+ const data = res?.data.map(e => {
|
|
|
+ const type = this.titleList.find(j => j.value == e.name);
|
|
|
+ if (type) e.name = type.name;
|
|
|
+ return e;
|
|
|
+ });;
|
|
|
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',
|
|
@@ -125,15 +135,13 @@ export default {
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
},
|
|
|
- getUser() {
|
|
|
- const data = [
|
|
|
- { name: '教育宣讲', value: 120 },
|
|
|
- { name: '关爱服务', value: 20 },
|
|
|
- { name: '环境卫生', value: 100 },
|
|
|
- { name: '治理防范', value: 200 },
|
|
|
- { name: '文化娱乐', value: 80 },
|
|
|
- { name: '志愿服务', value: 120 }
|
|
|
- ];
|
|
|
+ async getUser() {
|
|
|
+ const res = await userCountByType(this.queryParams);
|
|
|
+ const data = res?.data.map(e => {
|
|
|
+ const type = this.titleList.find(j => j.value == e.name);
|
|
|
+ if (type) e.name = type.name;
|
|
|
+ return e;
|
|
|
+ });
|
|
|
const myChart = echarts.init(this.$refs.usedmemory);
|
|
|
const option = {
|
|
|
xAxis: {
|
|
@@ -175,4 +183,4 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
-</script>
|
|
|
+</script>
|