添加数据统计

马宇豪

2024-04-23 7cf85ad3023d84ac6f80cb535f629f37703bd5d6

添加数据统计

 src/api/list.js

@@ -69,3 +69,20 @@
        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
    })
}

 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>

 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,36 +16,100 @@
      lists: [
        {
          title: '全疆汇总',
          name: '新疆维吾尔自治区',
          url:''
        },
        {
          title: '乌鲁木齐市',
          name: '乌鲁木齐市',
              url:''
        },
        {
          title: '克拉玛依市',
          name: '克拉玛依市',
          url:''
        },
        {
          title: '吐鲁番市',
          name: '吐鲁番市',
          url:''
        },
        {
          title: '昌吉市',
          title: '哈密市',
          name: '哈密市',
          url:''
        },
        {
          title: '昌吉回族自治州',
          name: '昌吉回族自治州',
              url:''
        },
        {
          title: '博尔塔拉蒙古自治州',
          name: '博尔塔拉蒙古自治州',
          url:''
        },
        {
          title: '巴音郭楞蒙古自治州',
          url:''
        },
        {
          title: '伊犁哈萨克自治州',
          name: '巴音郭楞蒙古自治州',
          url:''
        },
        {
          title: '阿克苏地区',
          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>

<style lang="less" scoped>

 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"

            }

        ],

    },


 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',

 src/views/Admin/Audit.vue

文件已删除

 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>

 src/views/Admin/msgRecord.vue