|
|
@@ -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);
|
|
|
}
|
|
|
}
|
|
|
};
|
