刘翔宇-旅管家 4 years ago
parent 35c9217b8a
commit 484b7ccf1f

@ -17,7 +17,7 @@
"axios": "0.18.1", "axios": "0.18.1",
"core-js": "3.6.5", "core-js": "3.6.5",
"echarts": "^4.2.1", "echarts": "^4.2.1",
"element-ui": "2.13.2", "element-ui": "^2.15.9",
"js-cookie": "2.2.0", "js-cookie": "2.2.0",
"less-loader": "^5.0.0", "less-loader": "^5.0.0",
"moment": "^2.29.2", "moment": "^2.29.2",

@ -15,3 +15,11 @@ export function getChartsData(params) {
params: params params: params
}) })
} }
export function getTeamPersonData(params) {
return request({
url: '/api/admin/chart/team_and_person',
method: 'get',
params: params
})
}

@ -12,7 +12,7 @@ import {
const service = axios.create({ const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests // withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout timeout: 50000 // request timeout
}) })
// request interceptor // request interceptor

@ -1,7 +1,12 @@
<template> <template>
<el-row :gutter="40" class="panel-group">
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="background: #FDC830; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #F37335, #FDC830); /* Chrome 10-25, Safari 5.1-6 */
<el-row class="panel-group">
<el-col :xs="11" :sm="11" :lg="11" :xl="5" class="card-panel-col"
style="background: #FDC830; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #F37335, #FDC830); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #F37335, #FDC830); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */"> background: linear-gradient(to right, #F37335, #FDC830); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
<div class="card-panel"> <div class="card-panel">
<div class="card-panel-icon-wrapper icon-people"> <div class="card-panel-icon-wrapper icon-people">
@ -12,14 +17,15 @@ background: linear-gradient(to right, #F37335, #FDC830); /* W3C, IE 10+/ Edge, F
预约参观人次 预约参观人次
</div> </div>
<div class="card-panel-text"> <div class="card-panel-text">
<p>总人数{{totaldata.visit_total.total}}</p> <p>总人数{{totaldata.visit_total.total}}</p>
<p> {{totaldata.visit_total.today}}</p> <p> {{totaldata.visit_total.today}}</p>
</div> </div>
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="background: #FFB75E; /* fallback for old browsers */ <el-col :xs="11" :sm="11" :lg="11" :xl="5" class="card-panel-col"
background: -webkit-linear-gradient(to right, #ED8F03, #FFB75E); /* Chrome 10-25, Safari 5.1-6 */ style="background: #FFB75E; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ED8F03, #FFB75E); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ED8F03, #FFB75E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */"> background: linear-gradient(to right, #ED8F03, #FFB75E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
<div class="card-panel" style="background-color: transparent;" @click="handleRoute('box')"> <div class="card-panel" style="background-color: transparent;" @click="handleRoute('box')">
<div class="card-panel-icon-wrapper icon-message"> <div class="card-panel-icon-wrapper icon-message">
@ -29,17 +35,18 @@ background: linear-gradient(to right, #ED8F03, #FFB75E); /* W3C, IE 10+/ Edge, F
<div class="card-panel-text" style="font-family: '微软雅黑';margin-bottom:5px"> <div class="card-panel-text" style="font-family: '微软雅黑';margin-bottom:5px">
入场参观人次 入场参观人次
</div> </div>
<div class="card-panel-text"> <div class="card-panel-text">
<p>总人数{{totaldata.visit_enter.total}}</p> <p>总人数{{totaldata.visit_enter.total}}</p>
<p> {{totaldata.visit_enter.today}}</p> <p> {{totaldata.visit_enter.today}}</p>
<p>当日核销比{{totaldata.visit_enter.per}}</p> <p>当日核销比{{totaldata.visit_enter.per}}</p>
</div> </div>
<!-- <count-to :start-val="0" :end-val="countsData.client_count" :duration="3000" class="card-panel-num" /> --> <!-- <count-to :start-val="0" :end-val="countsData.client_count" :duration="3000" class="card-panel-num" /> -->
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="background: #ffe259; /* fallback for old browsers */ <el-col :xs="11" :sm="11" :lg="11" :xl="5" class="card-panel-col"
background: -webkit-linear-gradient(to right, #ffa751, #ffe259); /* Chrome 10-25, Safari 5.1-6 */ style="background: #ffe259; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ffa751, #ffe259); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ffa751, #ffe259); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */"> background: linear-gradient(to right, #ffa751, #ffe259); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
<div class="card-panel" @click="handleRoute('tool')"> <div class="card-panel" @click="handleRoute('tool')">
<div class="card-panel-icon-wrapper icon-money"> <div class="card-panel-icon-wrapper icon-money">
@ -49,16 +56,17 @@ background: linear-gradient(to right, #ffa751, #ffe259); /* W3C, IE 10+/ Edge, F
<div class="card-panel-text" style="font-family: '微软雅黑'"> <div class="card-panel-text" style="font-family: '微软雅黑'">
预约活动人次 预约活动人次
</div> </div>
<div class="card-panel-text" style="color: #fff;font-size:16px"> <div class="card-panel-text" style="color: #fff;font-size:16px">
<p>总人数{{totaldata.activity_total.total}}</p> <p>总人数{{totaldata.activity_total.total}}</p>
<p> {{totaldata.activity_total.today}}</p> <p> {{totaldata.activity_total.today}}</p>
</div> </div>
<!-- <count-to :start-val="0" :end-val="countsData.tool_count" :duration="3200" class="card-panel-num" /> --> <!-- <count-to :start-val="0" :end-val="countsData.tool_count" :duration="3200" class="card-panel-num" /> -->
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="background: #fe8c00; /* fallback for old browsers */ <el-col :xs="11" :sm="11" :lg="11" :xl="5" class="card-panel-col"
background: -webkit-linear-gradient(to right, #f83600, #fe8c00); /* Chrome 10-25, Safari 5.1-6 */ style="background: #fe8c00; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f83600, #fe8c00); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */"> background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
<div class="card-panel" @click="handleRoute('user')"> <div class="card-panel" @click="handleRoute('user')">
<div class="card-panel-icon-wrapper icon-shopping"> <div class="card-panel-icon-wrapper icon-shopping">
@ -68,9 +76,9 @@ background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, F
<div class="card-panel-text" style="font-family: '微软雅黑'"> <div class="card-panel-text" style="font-family: '微软雅黑'">
预约活动人次 预约活动人次
</div> </div>
<div class="card-panel-text" style="color: #fff;font-size:16px"> <div class="card-panel-text" style="color: #fff;font-size:16px">
<p>总人数{{totaldata.activity_enter.total}}</p> <p>总人数{{totaldata.activity_enter.total}}</p>
<p> {{totaldata.activity_enter.today}}</p> <p> {{totaldata.activity_enter.today}}</p>
</div> </div>
<!-- <count-to :start-val="0" :end-val="countsData.user_count" :duration="3600" class="card-panel-num" /> --> <!-- <count-to :start-val="0" :end-val="countsData.user_count" :duration="3600" class="card-panel-num" /> -->
</div> </div>
@ -87,28 +95,28 @@ background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, F
props: { props: {
countsData: { countsData: {
type: Object type: Object
}, },
totaldata:{ totaldata: {
type: Object, type: Object,
default:{ default: {
"visit_total": { "visit_total": {
"total": 0, "total": 0,
"today": 0 "today": 0
}, },
"visit_enter": { "visit_enter": {
"total": 0, "total": 0,
"today": 0, "today": 0,
"per":0 "per": 0
}, },
"activity_total": { "activity_total": {
"total": 0, "total": 0,
"today": 0 "today": 0
}, },
"activity_enter": { "activity_enter": {
"total": 0, "total": 0,
"today": 0 "today": 0
} }
} }
} }
}, },
components: { components: {
@ -129,8 +137,8 @@ background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, F
margin-right: -3% !important; margin-right: -3% !important;
.card-panel-col { .card-panel-col {
// margin:0 2%;
margin: 0 2%; margin: 0 2%;
margin-bottom: 32px; margin-bottom: 32px;
} }
@ -206,13 +214,14 @@ background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, F
line-height: 25px; line-height: 25px;
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 26px; font-size: 26px;
margin-bottom: 20px; margin-bottom: 20px;
width:70%; width: 70%;
text-align: left;
}
p {
text-align: left; text-align: left;
} font-size: 19px;
p{
text-align: left;
font-size: 19px;
} }
.card-panel-num { .card-panel-num {

@ -1,7 +1,9 @@
<template> <template>
<div class="dashboard-editor-container"> <div class="dashboard-editor-container">
<panel-group :totaldata="totaldata" :countsData="countsData" /> <panel-group :totaldata="totaldata" :countsData="countsData" />
<el-row :gutter="32"> <el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="8"> <el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper"> <div class="chart-wrapper">
@ -63,18 +65,19 @@
import PanelGroup from './components/PanelGroup' import PanelGroup from './components/PanelGroup'
// import BarChart from './components/BarChart' // import BarChart from './components/BarChart'
import PieChart from './components/PieChart' import PieChart from './components/PieChart'
import LineChart from './components/LineChart' import LineChart from './components/LineChart'
import { import {
totalRpt totalRpt
} from '../../api/report/total.js' } from '../../api/report/total.js'
import { import {
getChartsData, getChartsData,
getCounts getCounts,
} from "../../api/dashboard.js" getTeamPersonData
import { } from "../../api/dashboard.js"
ageRpt, import {
areaRpt, ageRpt,
sexRpt areaRpt,
sexRpt
} from "@/api/report/visit.js"; } from "@/api/report/visit.js";
export default { export default {
name: 'DashboardAdmin', name: 'DashboardAdmin',
@ -84,8 +87,8 @@
LineChart LineChart
}, },
data() { data() {
return { return {
totaldata:{}, totaldata: {},
countsData: { countsData: {
client_count: 0, client_count: 0,
tool_count: 0, tool_count: 0,
@ -122,8 +125,7 @@
}, },
areas: { areas: {
radiusArr: "50%", radiusArr: "50%",
yArr: [ yArr: [],
],
} }
}, },
lineArr: { lineArr: {
@ -133,106 +135,118 @@
name: '团队预约人数', name: '团队预约人数',
type: 'line', type: 'line',
stack: 'Total', stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310,124] data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 124]
}, },
{ {
name: '团队预约实际入场人数', name: '团队预约实际入场人数',
type: 'line', type: 'line',
stack: 'Total', stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,234] data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 234]
}, },
{ {
name: '个人预约人数', name: '个人预约人数',
type: 'line', type: 'line',
stack: 'Total', stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 210,150, 232, 201, 154, 190, 330, 210,189] data: [150, 232, 201, 154, 190, 330, 210, 150, 232, 201, 154, 190, 330, 210, 189]
}, },
{ {
name: '个人预约实际入场人数', name: '个人预约实际入场人数',
type: 'line', type: 'line',
stack: 'Total', stack: 'Total',
data: [50, 132, 101, 104, 180, 230, 110,50, 132, 101, 104, 180, 230, 110,167] data: [50, 132, 101, 104, 180, 230, 110, 50, 132, 101, 104, 180, 230, 110, 167]
} }
] ]
} }
} }
}, },
created: function() { created: function() {
this.lineArrDate(); //this.lineArrDate();
this.load(); this.load();
this.loadTeamAndPerson();
}, },
methods: { methods: {
load() { load() {
// this.showData = true; // this.showData = true;
totalRpt().then(res => { 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.visit_enter.per = ((res.visit_enter.today / (res.visit_total.today == 0 ? 1 : res.visit_total
this.totaldata = res; .today)) * 100).toFixed(2) + "%"
}) this.totaldata = res;
})
var aeraArr = [];
areaRpt().then(res=>{ var aeraArr = [];
for(var m of res.city_list){ areaRpt().then(res => {
if(!m.city){ for (var m of res.city_list) {
m.city = "未知" if (!m.city) {
} m.city = "未知"
aeraArr.push({ }
name: m.city, aeraArr.push({
value: m.num name: m.city,
}) value: m.num
} })
this.stat.areas.yArr = aeraArr }
}) this.stat.areas.yArr = aeraArr
var agearr = []; })
var sexarr = []; var agearr = [];
ageRpt().then((res) => { var sexarr = [];
for (var m of res) { ageRpt().then((res) => {
agearr.push({ for (var m of res) {
name: m.name, agearr.push({
value: m.plan_total name: m.name,
}) value: m.plan_total
} })
this.stat.exception.yArr = agearr; }
}).catch((res) => {}) this.stat.exception.yArr = agearr;
}).catch((res) => {})
sexRpt().then((res) => {
for (var m of res) { sexRpt().then((res) => {
sexarr.push({ for (var m of res) {
name: m.sex_name, sexarr.push({
value: m.plan_total name: m.sex_name,
}) value: m.plan_total
} })
}
this.stat.warning.yArr = sexarr;
}).catch((res) => {}) this.stat.warning.yArr = sexarr;
}, }).catch((res) => {})
lineArrDate(){ },
let arr=[] loadTeamAndPerson() {
for(var i=0;i<15;i++){ var that = this;
arr.push(this.showDate(i)) that.lineArr.xArr = [];
} for (var m of that.lineArr.series) {
this.lineArr.xArr = arr; 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){ showDate(date) {
var num = date var num = date
let n = num; let n = num;
let d = new Date(); let d = new Date();
let year = d.getFullYear(); let year = d.getFullYear();
let mon = d.getMonth() + 1; let mon = d.getMonth() + 1;
let day = d.getDate(); let day = d.getDate();
if(day <= n) { if (day <= n) {
if(mon > 1) { if (mon > 1) {
mon = mon - 1; mon = mon - 1;
} else { } else {
year = year - 1; year = year - 1;
mon = 12; mon = 12;
} }
} }
d.setDate(d.getDate() - n); d.setDate(d.getDate() - n);
year = d.getFullYear(); year = d.getFullYear();
mon = d.getMonth() + 1; mon = d.getMonth() + 1;
day = d.getDate(); day = d.getDate();
let s = (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day); let s = (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
return s; return s;
} }
} }
} }

@ -18,6 +18,15 @@
</el-option> </el-option>
<el-option v-for="item in parameters.parkType" :key="item.id" :label="item.value" :value="item.id"> <el-option v-for="item in parameters.parkType" :key="item.id" :label="item.value" :value="item.id">
</el-option> </el-option>
</el-select>
<el-select style="margin-right: 10px;width: 120px;" v-model="searchFields.status" placeholder="请选择状态">
<el-option value="">
</el-option>
<el-option v-for="(item,key) in parameters.status_list" :key="key" :label="item" :value="key">
{{item}}
</el-option>
</el-select> </el-select>
<Button type="primary" @click="load" style="margin-left: 10px">查询</Button> <Button type="primary" @click="load" style="margin-left: 10px">查询</Button>
</div> </div>
@ -51,7 +60,9 @@
{{scope.row["visit_order"].unit?scope.row["visit_order"].unit:"无"}} {{scope.row["visit_order"].unit?scope.row["visit_order"].unit:"无"}}
</div> </div>
<div v-else-if="column.field=='status'"> <div v-else-if="column.field=='status'">
<el-tag :type="(scope.row[column.field]=='2'?'success':(scope.row[column.field]=='1'?'warning':'info'))">{{parameters.status_list[scope.row[column.field]]}}</el-tag> <el-tag
:type="(scope.row[column.field]=='2'?'success':(scope.row[column.field]=='1'?'warning':'info'))">
{{parameters.status_list[scope.row[column.field]]}}</el-tag>
</div> </div>
</div> </div>
<div v-else> <div v-else>

@ -26,6 +26,12 @@
</el-select> </el-select>
<Input class="inputwrap" v-model="searchFields.keyword" placeholder="请输入关键词" /> <Input class="inputwrap" v-model="searchFields.keyword" placeholder="请输入关键词" />
<Input class="inputwrap" v-model="searchFields.unit" placeholder="请输入单位" /> <Input class="inputwrap" v-model="searchFields.unit" placeholder="请输入单位" />
<el-select style="margin-right: 10px;width: 120px;" v-model="searchFields.status" placeholder="请选择状态">
<el-option value="">
</el-option>
<el-option v-for="item in parameters.status_list" :key="item.id" :label="item.value" :value="item.id">
</el-option>
</el-select>
<Button type="primary" style="margin-right:10px" @click="searchload"></Button> <Button type="primary" style="margin-right:10px" @click="searchload"></Button>
<Button type="primary" style="margin-right:10px" @click="resetload"></Button> <Button type="primary" style="margin-right:10px" @click="resetload"></Button>
<Button type="primary" @click="exportExcel"></Button> <Button type="primary" @click="exportExcel"></Button>
@ -143,7 +149,8 @@
is_export: 0, is_export: 0,
type: "", type: "",
unit: "", unit: "",
time: "" time: "",
status: ""
}, },
tableData: [], tableData: [],
paginations: { paginations: {
@ -249,15 +256,7 @@
listvisitor({ listvisitor({
page: this.paginations.page, page: this.paginations.page,
page_size: this.paginations.page_size, page_size: this.paginations.page_size,
keyword: this.searchFields.keyword, ...this.searchFields
start_date: this.searchFields.start_date,
//is_export: this.searchFields.is_export,
end_date: this.searchFields.end_date,
order_start_date: this.searchFields.order_start_date,
order_end_date: this.searchFields.order_end_date,
type: this.searchFields.type,
unit: this.searchFields.unit,
time: this.searchFields.time
}).then(res => { }).then(res => {
let tokens = getToken(); let tokens = getToken();
console.log(is_export) console.log(is_export)

@ -25,6 +25,12 @@
<el-option v-for="item in parameters.visitType" :key="item.id" :label="item.value" :value="item.id"> <el-option v-for="item in parameters.visitType" :key="item.id" :label="item.value" :value="item.id">
</el-option> </el-option>
</el-select> </el-select>
<el-select style="margin-left: 10px;" v-model="searchFields.status" placeholder="请选择状态">
<el-option value="">
</el-option>
<el-option v-for="item in parameters.status_list" :key="item.id" :label="item.value" :value="item.id">
</el-option>
</el-select>
<Button type="primary" @click="load" style="margin-left: 10px">查询</Button> <Button type="primary" @click="load" style="margin-left: 10px">查询</Button>
</div> </div>
</slot> </slot>
@ -243,7 +249,8 @@
keyword: "", keyword: "",
date: "", date: "",
type: "", type: "",
time: "" time: "",
status: ""
}, },
tableData: [], tableData: [],
paginations: { paginations: {
@ -341,11 +348,7 @@
listvisitorder({ listvisitorder({
page: this.paginations.page, page: this.paginations.page,
page_size: this.paginations.page_size, page_size: this.paginations.page_size,
name: this.searchFields.name, ...this.searchFields
date: this.searchFields.date,
type: this.searchFields.type,
keyword: this.searchFields.keyword,
time: this.searchFields.time
}).then(res => { }).then(res => {
this.tableData = res.data; this.tableData = res.data;
this.paginations.total = res.total this.paginations.total = res.total

@ -7,13 +7,6 @@
<div slot="content"></div> <div slot="content"></div>
<slot> <slot>
<div> <div>
<el-date-picker
v-model="daterange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
<Button type="primary" @click="load" style="margin-left: 10px">查询</Button> <Button type="primary" @click="load" style="margin-left: 10px">查询</Button>
<Button type="primary" @click="viewPart" style="margin-left: 10px">{{btnText}}</Button> <Button type="primary" @click="viewPart" style="margin-left: 10px">{{btnText}}</Button>

Loading…
Cancel
Save