<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="24">
|
<a-col :span="6">
|
<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-select v-model="search.disasterType" style="width: 100%" placeholder="选择灾种类别" allow-clear>
|
<a-select-option v-for="item in typeList" :value="item.value" :key="item.value">{{item.name}}</a-select-option>
|
</a-select>
|
</a-col>
|
<a-col :span="6">
|
<a-cascader :options="areaData" v-model="areaVal" placeholder="选择地理位置" expandTrigger="hover" :fieldNames="fieldNames" changeOnSelect @change="onChange1" 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" :loading="loading" :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';
|
import {getDistrictInfo} from "@/api/login";
|
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 {
|
loading: false,
|
search:{
|
startTime: '',
|
endTime: '',
|
disasterType: undefined ,
|
province: '',
|
city: ''
|
|
},
|
typeList: [
|
{name: '地震',value: 1},
|
{name: '气象',value: 3},
|
{name: '地质灾害',value: 4},
|
{name: '水旱',value: 5},
|
{name: '森林草原火灾',value: 6}
|
],
|
areaData: [],
|
areaVal: [],
|
fieldNames:{
|
label: 'name',
|
value: 'id',
|
children: 'children'
|
},
|
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()
|
t.getDistrictInfo()
|
},
|
methods: {
|
async getData(){
|
const t = this
|
t.backLoading = true
|
t.loading = 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
|
t.loading = false
|
}else{
|
this.$message.error(res.data.msg)
|
}
|
},
|
async getDistrictInfo(){
|
let res = await getDistrictInfo()
|
if(res.data.code == 100){
|
this.areaData = res.data.data.map(item => ({
|
...item,
|
children: item.children?.map(child => ({...child,children:undefined }))
|
}))
|
} else {
|
this.$message.warning(res.data.msg);
|
}
|
},
|
// 根据id查对象
|
findCodeById(data,value) {
|
for (const node of data) {
|
if (node.id === value) {
|
return node;
|
}
|
if (node.children) {
|
const foundNode = this.findCodeById(node.children, value);
|
if (foundNode) {
|
return foundNode;
|
}
|
}
|
}
|
return null;
|
},
|
onChange1(value) {
|
const t = this
|
t.search.province = ''
|
t.search.city = ''
|
if(value[0]){
|
t.search.province = t.findCodeById(t.areaData,value[0]).name
|
|
}
|
if(value[1]){
|
t.search.city = t.findCodeById(t.areaData,value[1]).name
|
}
|
// if(value[2]){
|
// t.search.searchParams.area = t.findCodeById(t.areaData,value[2]).name
|
// }
|
// if(value[3]){
|
// t.search.searchParams.town = t.findCodeById(t.areaData,value[3]).name
|
// }
|
console.log('111',t.search.searchParams)
|
|
},
|
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: '',
|
disasterType: undefined ,
|
province: '',
|
city: ''
|
}
|
t.timeRange = []
|
t.getData()
|
}
|
}
|
}
|
|
</script>
|
