You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
290 lines
8.5 KiB
290 lines
8.5 KiB
<template>
|
|
<div class="dashboard-editor-container">
|
|
|
|
<panel-group :totaldata="totaldata" :countsData="countsData" />
|
|
|
|
|
|
<el-row :gutter="32">
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
<div class="chart-wrapper">
|
|
<div class="chart-title">
|
|
<router-link to="/report/visit/sexRpt">观众性别</router-link>
|
|
<!-- <div>
|
|
<el-tag @click="changeDate('warning',item.type,index)" :type="(item.checked?'success':'info')"
|
|
style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.warning.dateRange">
|
|
{{item.name}}
|
|
</el-tag>
|
|
</div> -->
|
|
</div>
|
|
<pie-chart :chartData="stat.warning" />
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
<div class="chart-wrapper">
|
|
<div class="chart-title">
|
|
<router-link to="/toolbox/exception">观众年龄</router-link>
|
|
<!-- <div>
|
|
<el-tag @click="changeDate('exception',item.type,index)" :type="(item.checked?'success':'info')"
|
|
style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.exception.dateRange">
|
|
{{item.name}}
|
|
</el-tag>
|
|
</div> -->
|
|
</div>
|
|
<pie-chart :chartData="stat.exception" />
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
<div class="chart-wrapper">
|
|
<div class="chart-title">
|
|
<router-link to="/toolbox/exception">城市分布</router-link>
|
|
<!-- <div>
|
|
<el-tag @click="changeDate('exception',item.type,index)" :type="(item.checked?'success':'info')"
|
|
style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.exception.dateRange">
|
|
{{item.name}}
|
|
</el-tag>
|
|
</div> -->
|
|
</div>
|
|
<pie-chart :chartData="stat.areas" />
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :lg="24">
|
|
<div class="chart-wrapper">
|
|
<div class="chart-title">
|
|
<router-link to="/toolbox/exception">团体与个人统计</router-link>
|
|
</div>
|
|
<line-chart :chartData="lineArr" />
|
|
</div>
|
|
|
|
</el-col>
|
|
</el-row>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import PanelGroup from './components/PanelGroup'
|
|
// import BarChart from './components/BarChart'
|
|
import PieChart from './components/PieChart'
|
|
import LineChart from './components/LineChart'
|
|
import {
|
|
totalRpt
|
|
} from '../../api/report/total.js'
|
|
import {
|
|
getChartsData,
|
|
getCounts,
|
|
getTeamPersonData
|
|
} from "../../api/dashboard.js"
|
|
import {
|
|
ageRpt,
|
|
areaRpt,
|
|
sexRpt
|
|
} from "@/api/report/visit.js";
|
|
export default {
|
|
name: 'DashboardAdmin',
|
|
components: {
|
|
PanelGroup,
|
|
PieChart,
|
|
LineChart
|
|
},
|
|
data() {
|
|
return {
|
|
totaldata: {},
|
|
countsData: {
|
|
client_count: 0,
|
|
tool_count: 0,
|
|
user_count: 0
|
|
},
|
|
stat: {
|
|
warning: {
|
|
// xArr: ["一","二","三","四","五"],
|
|
// yArr: [200,300,400,500,330],
|
|
yArr: [],
|
|
radiusArr: "50%",
|
|
dateRange: [{
|
|
checked: true,
|
|
type: "week",
|
|
name: "本周"
|
|
}, {
|
|
checked: false,
|
|
type: "month",
|
|
name: "本月"
|
|
}]
|
|
},
|
|
exception: {
|
|
yArr: [],
|
|
radiusArr: ['30%', '50%'],
|
|
// dateRange: [{
|
|
// checked: true,
|
|
// type: "week",
|
|
// name: "本周"
|
|
// }, {
|
|
// checked: false,
|
|
// type: "month",
|
|
// name: "本月"
|
|
// }]
|
|
},
|
|
areas: {
|
|
radiusArr: "50%",
|
|
yArr: [],
|
|
}
|
|
},
|
|
lineArr: {
|
|
xArr: ['05-22', '05-23', '05-24', '05-25', '05-26', '05-27', '05-28'],
|
|
legendArr: ["团队预约人数", "团队预约实际入场人数", "个人预约人数", "个人预约实际入场人数"],
|
|
series: [{
|
|
name: '团队预约人数',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 124]
|
|
},
|
|
{
|
|
name: '团队预约实际入场人数',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 234]
|
|
},
|
|
{
|
|
name: '个人预约人数',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: [150, 232, 201, 154, 190, 330, 210, 150, 232, 201, 154, 190, 330, 210, 189]
|
|
},
|
|
{
|
|
name: '个人预约实际入场人数',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: [50, 132, 101, 104, 180, 230, 110, 50, 132, 101, 104, 180, 230, 110, 167]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
created: function() {
|
|
//this.lineArrDate();
|
|
this.load();
|
|
this.loadTeamAndPerson();
|
|
},
|
|
methods: {
|
|
load() {
|
|
// this.showData = true;
|
|
totalRpt().then(res => {
|
|
res.visit_enter.per = ((res.visit_enter.today / (res.visit_total.today == 0 ? 1 : res.visit_total
|
|
.today)) * 100).toFixed(2) + "%"
|
|
res.activity_enter.per = ((res.activity_enter.today / (res.activity_total.today == 0 ? 1 : res.activity_total
|
|
.today)) * 100).toFixed(2) + "%"
|
|
this.totaldata = res;
|
|
})
|
|
|
|
var aeraArr = [];
|
|
areaRpt().then(res => {
|
|
for (var m of res.city_list) {
|
|
if (!m.city) {
|
|
m.city = "未知"
|
|
}
|
|
aeraArr.push({
|
|
name: m.city,
|
|
value: m.num
|
|
})
|
|
}
|
|
this.stat.areas.yArr = aeraArr
|
|
})
|
|
var agearr = [];
|
|
var sexarr = [];
|
|
ageRpt().then((res) => {
|
|
for (var m of res) {
|
|
agearr.push({
|
|
name: m.name,
|
|
value: m.plan_total
|
|
})
|
|
}
|
|
this.stat.exception.yArr = agearr;
|
|
}).catch((res) => {})
|
|
|
|
sexRpt().then((res) => {
|
|
for (var m of res) {
|
|
sexarr.push({
|
|
name: m.sex_name,
|
|
value: m.plan_total
|
|
})
|
|
}
|
|
|
|
this.stat.warning.yArr = sexarr;
|
|
}).catch((res) => {})
|
|
},
|
|
loadTeamAndPerson() {
|
|
var that = this;
|
|
that.lineArr.xArr = [];
|
|
for (var m of that.lineArr.series) {
|
|
m.data = [];
|
|
}
|
|
getTeamPersonData().then((res) => {
|
|
|
|
for (var m of res) {
|
|
that.lineArr.xArr.push(m.date.split('-')[1] + "-" + m.date.split('-')[2]);
|
|
that.lineArr.series[0].data.push(m.team_plan_total);
|
|
that.lineArr.series[1].data.push(m.team_use_total);
|
|
that.lineArr.series[2].data.push(m.person_plan_total);
|
|
that.lineArr.series[3].data.push(m.person_use_total);
|
|
}
|
|
}).catch((res) => {})
|
|
},
|
|
showDate(date) {
|
|
var num = date
|
|
let n = num;
|
|
let d = new Date();
|
|
let year = d.getFullYear();
|
|
let mon = d.getMonth() + 1;
|
|
let day = d.getDate();
|
|
if (day <= n) {
|
|
if (mon > 1) {
|
|
mon = mon - 1;
|
|
} else {
|
|
year = year - 1;
|
|
mon = 12;
|
|
}
|
|
}
|
|
d.setDate(d.getDate() - n);
|
|
year = d.getFullYear();
|
|
mon = d.getMonth() + 1;
|
|
day = d.getDate();
|
|
let s = (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
|
|
return s;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dashboard-editor-container {
|
|
padding: 32px;
|
|
background-color: rgb(240, 242, 245);
|
|
position: relative;
|
|
|
|
.github-corner {
|
|
position: absolute;
|
|
top: 0px;
|
|
border: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.chart-wrapper {
|
|
background: #fff;
|
|
padding: 16px 16px 0;
|
|
margin-bottom: 32px;
|
|
|
|
.chart-title {
|
|
font-size: 16px;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width:1024px) {
|
|
.chart-wrapper {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
</style>
|