From 7cf85ad3023d84ac6f80cb535f629f37703bd5d6 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期二, 23 四月 2024 10:36:42 +0800
Subject: [PATCH] 添加数据统计
---
/dev/null | 9 -
src/views/Admin/dataStatistic.vue | 223 +++++++++++++++++++++++++++++++
src/components/Home/QuickNavigation.vue | 2
src/layout/menu/index.js | 6
src/components/Home/Team.vue | 97 +++++++++++--
src/views/Admin/msgRecord.vue | 2
src/router/index.js | 6
src/api/list.js | 17 ++
8 files changed, 327 insertions(+), 35 deletions(-)
diff --git a/src/api/list.js b/src/api/list.js
index 1b9fef7..b1d77e6 100644
--- a/src/api/list.js
+++ b/src/api/list.js
@@ -68,4 +68,21 @@
url: '/attachment/delete/' + id,
method: 'get'
})
+}
+
+// 获取30天总体用量
+export function getTotalStatistics(){
+ return request({
+ url: '/statistics/sms/countByTime',
+ method: 'get'
+ })
+}
+
+// 获取各地总体用量
+export function getTotalStatisticsByArea(data){
+ return request({
+ url: '/statistics/sms/count',
+ method: 'post',
+ data: data
+ })
}
\ No newline at end of file
diff --git a/src/components/Home/QuickNavigation.vue b/src/components/Home/QuickNavigation.vue
index e6505b4..203fd65 100644
--- a/src/components/Home/QuickNavigation.vue
+++ b/src/components/Home/QuickNavigation.vue
@@ -14,7 +14,7 @@
<a :class="toReview>0?'resColor':''" @click="toRev" v-if="userinfo.role.id == 2">待审核<span v-if="toReview > 0">（{{toReview}}）</span></a>
</a-tooltip>
<a href="massSend" v-if="userinfo.role.id == 3">发布通知</a>
- <a href="audit" >查看统计</a>
+ <a href="dataStatistic" >查看统计</a>
<a href="user" v-if="userinfo.role.id == 3">用户管理</a>
<!-- <a-button><a-icon type="plus" />添加</a-button> -->
</a-card>
diff --git a/src/components/Home/Team.vue b/src/components/Home/Team.vue
index 381357c..285d73b 100644
--- a/src/components/Home/Team.vue
+++ b/src/components/Home/Team.vue
@@ -1,17 +1,14 @@
<template>
<a-card title="各地区统计数据">
<div class="item" v-for="(item, index) in lists" :key="'team' + index">
- <a-tooltip overlayClassName="tip">
- <template #title>
- 数据统计模块待呈现
- </template>
- <a style="border: 1px solid #1890ff;padding: 5px 8px;border-radius: 5px;">{{ item.title }}</a>
- </a-tooltip>
+ <a style="border: 1px solid #1890ff;padding: 5px 8px;border-radius: 5px;" @click="toDetails(item.name)">{{ item.title }}</a>
</div>
</a-card>
</template>
<script>
+import dataStatistic from "@/views/Admin/dataStatistic";
+
export default {
name: 'Team',
data () {
@@ -19,35 +16,99 @@
lists: [
{
title: '全疆汇总',
- url:''
+ name: '新疆维吾尔自治区',
+ url:''
},
{
title: '乌鲁木齐市',
- url:''
+ name: '乌鲁木齐市',
+ url:''
+ },
+ {
+ title: '克拉玛依市',
+ name: '克拉玛依市',
+ url:''
},
{
title: '吐鲁番市',
- url:''
+ name: '吐鲁番市',
+ url:''
},
{
- title: '昌吉市',
- url:''
+ title: '哈密市',
+ name: '哈密市',
+ url:''
+ },
+ {
+ title: '昌吉回族自治州',
+ name: '昌吉回族自治州',
+ url:''
+ },
+ {
+ title: '博尔塔拉蒙古自治州',
+ name: '博尔塔拉蒙古自治州',
+ url:''
},
{
title: '巴音郭楞蒙古自治州',
- url:''
- },
- {
- title: '伊犁哈萨克自治州',
- url:''
+ name: '巴音郭楞蒙古自治州',
+ url:''
},
{
title: '阿克苏地区',
- url:''
+ name: '阿克苏地区',
+ url:''
},
+ {
+ title: '克孜勒苏柯尔克孜自治州',
+ name: '克孜勒苏柯尔克孜自治州',
+ url:''
+ },
+ {
+ title: '喀什地区',
+ name: '喀什地区',
+ url:''
+ },
+ {
+ title: '和田地区',
+ name: '和田地区',
+ url:''
+ },
+ {
+ title: '伊犁哈萨克自治州',
+ name: '伊犁哈萨克自治州',
+ url:''
+ },
+ {
+ title: '塔城地区',
+ name: '塔城地区',
+ url:''
+ },
+ {
+ title: '阿勒泰地区',
+ name: '阿勒泰地区',
+ url:''
+ },
+ {
+ title: '自治区直辖县级行政区划',
+ name: '自治区直辖县级行政区划',
+ url:''
+ }
]
}
- }
+ },
+ methods: {
+ toDetails(name){
+ this.$router.push(
+ {
+ name: 'dataStatistic',
+ query: {
+ name: name
+ }
+ }
+ )
+ }
+ },
}
</script>
diff --git a/src/layout/menu/index.js b/src/layout/menu/index.js
index c440bd8..3ee28c2 100644
--- a/src/layout/menu/index.js
+++ b/src/layout/menu/index.js
@@ -26,7 +26,7 @@
{
MenuID: "13",
MenuTitle: "数据统计",
- MenuPath: "/audit"
+ MenuPath: "/dataStatistic"
}
],
},
@@ -142,7 +142,7 @@
{
MenuID: "13",
MenuTitle: "数据统计",
- MenuPath: "/audit"
+ MenuPath: "/dataStatistic"
}
],
},
@@ -186,7 +186,7 @@
{
MenuID: "13",
MenuTitle: "数据统计",
- MenuPath: "/audit"
+ MenuPath: "/dataStatistic"
}
],
},
diff --git a/src/router/index.js b/src/router/index.js
index 550d46b..8c9b385 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -41,10 +41,10 @@
component: () => import('@/views/Admin/list'),
},
{
- path: '/audit',
- name: 'audit',
+ path: '/dataStatistic',
+ name: 'dataStatistic',
meta: { title: '数据统计' },
- component: () => import('@/views/Admin/Audit'),
+ component: () => import('@/views/Admin/dataStatistic'),
},
{
path: '/notice',
diff --git a/src/views/Admin/Audit.vue b/src/views/Admin/Audit.vue
deleted file mode 100644
index 3777a7e..0000000
--- a/src/views/Admin/Audit.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
- <div>数据统计模块待呈现</div>
-</template>
-
-<script>
-</script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/src/views/Admin/dataStatistic.vue b/src/views/Admin/dataStatistic.vue
new file mode 100644
index 0000000..3a3010d
--- /dev/null
+++ b/src/views/Admin/dataStatistic.vue
@@ -0,0 +1,223 @@
+<template>
+ <div class="inner">
+ <div id="charts" style="width: 100%;height: 400px"></div>
+ <a-row type="flex" justify="space-between" style="margin-bottom: 20px">
+ <a-col :span="20">
+ <a-row type="flex" :gutter="18">
+ <a-col :span="8">
+ <a-range-picker
+ v-model="timeRange"
+ format="YYYY-MM-DD"
+ :placeholder="['开始时间', '结束时间']"
+ @change="timeChange"
+ @ok="timeOk"
+ style="width: 100%"
+ />
+ </a-col>
+ <a-col :span="6">
+ <a-button type="primary" @click="searchData">查询</a-button>
+ <a-button style="margin-left: 12px" @click="resetSearch">重置</a-button>
+ </a-col>
+ </a-row>
+ </a-col>
+ </a-row>
+
+ <!-- 表格实体部分-->
+ <div class="table-cont">
+ <a-button type="primary" v-if="backButton" @click="backData" :loading="backLoading" style="margin-bottom: 20px">返回上级</a-button>
+ <a-table :columns="columns" :data-source="data" bordered :pagination="false" :rowKey="record=>record.name">
+ <template #index="text,record,index">
+ {{ index + 1 }}
+ </template>
+ <template #name="text,record">
+ <a-button type="link" v-if="record.chidren" @click="openSubData(record)">{{ text }}</a-button>
+ <span v-else>{{ text }}</span>
+ </template>
+ </a-table>
+ </div>
+ </div>
+</template>
+<script>
+import {getTotalStatistics, getTotalStatisticsByArea} from "@/api/list";
+import {getReviewDetailByWorker} from "@/api/review";
+import axios from "axios";
+import Cookies from "js-cookie";
+import {getUserInfo} from "@/util/storage";
+import * as echarts from 'echarts';
+const columns = [{
+ title: '序号',
+ dataIndex: 'index',
+ scopedSlots: {
+ customRender: 'index'
+ }
+},
+ {
+ title: '地区',
+ dataIndex: 'name',
+ scopedSlots: {
+ customRender: 'name'
+ }
+ },
+ {
+ title: '本级任务数',
+ dataIndex: 'curentTaskCount'
+ },
+ {
+ title: '短信计费条数',
+ dataIndex: 'currentSmsCount'
+ },
+ {
+ title: '下级总任务数',
+ dataIndex: 'subordinateTaskCount'
+ },
+ {
+ title: '下级短信计费条数',
+ dataIndex: 'subordinateSmsCount'
+ },
+ {
+ title: '合计条数',
+ dataIndex: 'smsTotalCount'
+ }
+];
+export default {
+ name: 'dataStatistic',
+ components: {},
+ data() {
+ return {
+ search:{
+ startTime: '',
+ endTime: ''
+ },
+ timeRange: [],
+ category: 'default',
+ data:[],
+ columns,
+ backButton: false,
+ backLoading: false,
+ areaName: null
+ }
+ },
+ mounted() {
+ if(getUserInfo().role.id == 1){
+ this.columns = this.columns.filter(i=>i.dataIndex !== 'operation')
+ }
+ this.getChartsData()
+ },
+ created() {
+ const t = this
+ if(t.$route.query.name){
+ t.areaName = t.$route.query.name
+ t.$router.push(t.$route.path)
+ }
+ t.getData()
+ },
+ methods: {
+ async getData(){
+ const t = this
+ t.backLoading = true
+ const res = await getTotalStatisticsByArea(t.search)
+ if(res.data.code == 100){
+ if(t.areaName && t.areaName !== '新疆维吾尔自治区'){
+ t.data = res.data.data.find(i=>i.name == t.areaName).chidren
+ t.backButton = true
+ t.areaName = null
+ }else{
+ t.data = res.data.data
+ t.backButton = false
+ }
+ t.backLoading = false
+ }else{
+ this.$message.error(res.data.msg)
+ }
+ },
+
+ async getChartsData(){
+ const t = this
+ const res = await getTotalStatistics()
+ if(res.data.code == 100){
+ const data = res.data.data
+ await t.initChart(data)
+ }else{
+ this.$message.error(res.data.msg)
+ }
+ },
+
+ async initChart(data){
+ var chartDom = document.getElementById('charts');
+ var myChart = echarts.init(chartDom);
+ var option;
+ option = {
+ title: {
+ text: '近30日用量趋势'
+ },
+ tooltip: {
+ trigger: 'axis',
+ formatter: function (params){
+ return '日期：' + params[0].name + '<br/>' + '用量：' + params[0].value + '条'
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: data.map(i=>i.time)
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: data.map(i=>i.smsCount),
+ type: 'line'
+ }
+ ],
+ grid: [
+ {
+ left: '5%',
+ right: '5%',
+ top: '20%'
+ }
+ ],
+ color: ['#91cc75']
+ };
+
+ option && myChart.setOption(option);
+ },
+
+ async openSubData(record){
+ this.data = record.chidren
+ this.backButton = true
+ },
+
+ async backData(){
+ await this.getData()
+ this.backButton = false
+ },
+
+ timeChange(value, dateString) {
+ const t = this
+ if(dateString){
+ t.search.startTime = value[0].format('YYYY-MM-DD')
+ t.search.endTime = value[1].format('YYYY-MM-DD')
+ }
+ },
+
+ timeOk(value) {
+ console.log('onOk: ', value);
+ },
+
+ searchData(){
+ this.getData()
+ },
+
+ resetSearch(){
+ const t = this
+ t.search = {
+ startTime: '',
+ endTime: ''
+ }
+ t.timeRange = []
+ t.getData()
+ }
+ }
+}
+
+</script>
\ No newline at end of file
diff --git a/src/views/Admin/msgRecord.vue b/src/views/Admin/msgRecord.vue
index ac55650..ba945fb 100644
--- a/src/views/Admin/msgRecord.vue
+++ b/src/views/Admin/msgRecord.vue
@@ -27,7 +27,7 @@
<div class="tit">
任务ID：<span>{{item.id}}</span>
</div>
- 发送人数：{{item.recipients.length}}
+ 发送人数：{{item.recipients.length}}
</template>
<p>
{{item.content}}
--
Gitblit v1.9.2