wangyifang
/
szbd-visitor-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

统计 首页

Browse Source
master
lion 3 years ago
parent d56033e0da
commit 62aa7268c2
15 changed files with 497 additions and 581 deletions
Show Stats Download Patch File Download Diff File

4
.env.development
Unescape View File

@ -2,5 +2,5 @@
ENV = 'development'
# base api
VUE_APP_BASE_API = http://bd-fangke.ali251.langye.net
VUE_APP_UPLOAD_API = http://bd-fangke.ali251.langye.net/api/admin/upload-file
VUE_APP_BASE_API = https://bd-fangke.ali251.langye.net
VUE_APP_UPLOAD_API = https://bd-fangke.ali251.langye.net/api/admin/upload-file

4
.env.production
Unescape View File

@ -2,5 +2,5 @@
ENV = 'production'
# base api
VUE_APP_BASE_API = http://starter.ali251.langye.net
VUE_APP_UPLOAD_API =http://starter.ali251.langye.net/api/admin/upload-file
VUE_APP_BASE_API = https://starter.ali251.langye.net
VUE_APP_UPLOAD_API =https://starter.ali251.langye.net/api/admin/upload-file

10
src/api/report/index.js
Unescape View File

@ -1,8 +1,8 @@
import request from "@/utils/request";
export function carList(params){
export function monthList(params){
return request({
url:'/api/admin/study/index',
url:'/api/admin/chart/month',
method:'get',
params
})
@ -10,15 +10,15 @@ export function carList(params){
export function timeList(params){
return request({
url:'/api/admin/study/index',
url:'/api/admin/chart/time',
method:'get',
params
})
}
export function monthList(params){
export function carList(params){
return request({
url:'/api/admin/study/index',
url:'/api/admin/chart/car',
method:'get',
params
})

0
src/views/dashboard/components/BarChart.vue → src/components/morecharts/BarChart.vue
Unescape View File

0
src/views/report/components/LineChart.vue → src/components/morecharts/LineChart.vue
Unescape View File

0
src/views/report/components/PanelGroup.vue → src/components/morecharts/PanelGroup.vue
Unescape View File

0
src/views/report/components/PieChart.vue → src/components/morecharts/PieChart.vue
Unescape View File

0
src/views/dashboard/components/mixins/resize.js → src/components/morecharts/mixins/resize.js
Unescape View File

127
src/views/dashboard/components/PanelGroup.vue
Unescape View File

@ -3,26 +3,29 @@
<div class="boxlist">
<div class="box box1">
<div class="boxtitle">
<span>营业统计</span>
<span>普通访客</span>
<i class="el-icon-data-line statIcon"></i>
</div>
<div class="bline"></div>
<div class="boxcontentsubtitle">服务金额</div>
<div class="boxcontentsubtitle">总人数/总入厂人数</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
{{totaldata.business.server_money_total}}
<span>3000</span>
<span>1500</span>
</div>
<div style="display: flex;justify-content: space-around;">
<div class="boxcontentitem-small">
<span>{{totaldata.business.nurse_money_total}}</span>
<span>护工金额</span>
</div>
<div class="boxcontentitem-small">
<span>{{totaldata.business.remain_money_total}}</span>
<span>留存金额</span>
</div>
<div class="per">核销比：50%</div>
</div>
</div>
<div class="blinefull"></div>
<div class="boxcontentsubtitle">今日人数/今日入厂人数</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<span>80</span>
<span>40</span>
</div>
<div class="per">核销比：50%</div>
</div>
</div>
</div>
@ -30,33 +33,34 @@
<div class="box box2">
<div class="boxtitle">
<span>人效统计</span>
<span>施工访客</span>
<i class="el-icon-user statIcon"></i>
</div>
<div class="bline"></div>
<div class="boxcontentsubtitle">总服务时长</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
{{totaldata.person_efficiency.server_time_total}}
分钟
</div>
<div style="display: flex;justify-content: space-around;">
<div class="boxcontentitem-small">
<span>{{totaldata.person_efficiency.expect}}</span>
<span> 照护人员数</span>
</div>
<div class="boxcontentitem-small">
<span>{{totaldata.person_efficiency.act}} </span>
<span>天数</span>
</div>
</div>
</div>
<div class="boxcontentsubtitle">总人数/总核销人数</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<span>3000</span>
<span>1500</span>
</div>
<div class="per">核销比：50%</div>
</div>
</div>
<div class="blinefull"></div>
<div class="boxcontentsubtitle">今日人数/今日核销人数</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<span>80</span>
<span>40</span>
</div>
<div class="per">核销比：50%</div>
</div>
</div>
</div>
<div class="box box3">
<!-- <div class="box box3">
<div class="boxtitle">
<span>客户统计</span>
<i class="el-icon-s-custom statIcon"></i>
@ -81,32 +85,38 @@
</div>
</div>
</div>
-->
<div class="box box4">
<div class="boxtitle">
<span>订单统计</span>
<span>物流车辆</span>
<i class="el-icon-document statIcon"></i>
</div>
<div class="bline"></div>
<div class="boxcontentsubtitle">服务订单</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">{{totaldata.order.server_total}}单
</div>
<div style="display: flex;justify-content: space-around;">
<div class="boxcontentitem-small">
<span>{{totaldata.order.cycle_total}}</span>
<span>周期性订单</span>
</div>
<div class="boxcontentitem-small">
<span>{{totaldata.order.unit_total}}</span>
<span>单次订单</span>
</div>
</div>
</div>
<div class="boxcontentsubtitle">总预约数/总核销人数</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<span>3000</span>
<span>1500</span>
</div>
<div class="per">核销比：50%</div>
</div>
</div>
<div class="blinefull"></div>
<div class="boxcontentsubtitle">今日预约数/今日核销人数</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
<span>80</span>
<span>40</span>
</div>
<div class="per">核销比：50%</div>
</div>
</div>
</div>
</div>
</div>
</template>
@ -196,7 +206,7 @@
width: 33%;
margin-left: 0.5%;
margin-right: 0.5%;
margin-bottom: 2.375rem;
// margin-bottom: 2.375rem;
box-shadow: 0px 8px 15px 0px rgba(212, 84, 32, 0.3100);
border-radius: 8px;
box-sizing: border-box;
@ -263,6 +273,12 @@
font-family: Arial;
font-weight: 400;
color: #FFFFFF;
display: flex;
justify-content: space-around;
}
.per {
// padding:
}
}
@ -289,6 +305,13 @@
margin-top: 1.25rem;
}
.blinefull {
height: 0.2rem;
background: rgba(255, 255, 255, .3);
width: 100%;
margin-top: 1.25rem;
}
.box2 {
background: linear-gradient(134deg, #9193BC, #B7B9D4);

66
src/views/dashboard/index.vue
Unescape View File

@ -1,20 +1,28 @@
<template>
<div>
<div style="padding:20px">
<PanelGroup></PanelGroup>
<div class="tCharts">
<PieChart :chartData="pieData" :width="'30%'"></PieChart>
<LineChart :chartData="LineData" :width="'65%'"></LineChart>
</div>
</div>
</template>
<script>
import echarts from "echarts"
// import echarts from "echarts"
import PanelGroup from './components/PanelGroup'
import PieChart from '@/components/morecharts/PieChart.vue'
import LineChart from '@/components/morecharts/LineChart.vue'
import {
getChartsHome
} from "../../api/dashboard.js"
export default {
components: {
PanelGroup
PanelGroup,
PieChart,
LineChart
},
data() {
return {
@ -26,6 +34,46 @@
customerArr: [],
orderArr: [],
chartData: {},
pieData:{
// xArr:['普通访客','施工访客','物流车辆'],
yArr:[
{
value:20,
name:"普通访客"
},{
value:40,
name:"施工访客"
},{
value:40,
name:"物流车辆"
}],
radiusArr:'50%'
},
LineData:{
xArr: ['9:00-10:00','10:00-11:00','11:00-12:00','12:00-13:00'],
legendArr: ["普通访客", "施工访客", "物流车辆"],
series:[
{
name: '普通访客',
type: 'line',
stack: 'Total',
data: [20,10,40,70]
},
{
name: '施工访客',
type: 'line',
stack: 'Total',
data: [15,75,35,45]
},
{
name: '物流车辆',
type: 'line',
stack: 'Total',
data: [75,35,60,10]
}
]
}
}
},
watch: {
@ -252,7 +300,13 @@
}
}
}
.tCharts{
display: flex;
justify-content: space-between;
background-color: #fff;
margin:.5%;
margin-top: 2.5%;
}
.chart {
display: flex;
@ -280,7 +334,7 @@
}
#line-chart {
background: #fff;
// background: #fff;
border-radius: 10px;
flex: 1;
padding: 20px;

146
src/views/report/components/BarChart.vue
Unescape View File

@ -1,146 +0,0 @@
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
const animationDuration = 6000
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '500px'
},
chartData: {
type: Object
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons');
this.setOptions(this.chartData);
},
setOptions(chartdata) {
console.log(chartdata.xArr)
this.chart.setOption({
dataZoom: [
//给x轴设置滚动条
{
startValue: 0,
endValue: 6, // 显示条数
type: 'slider',
show: true,
xAxisIndex: [0],
handleSize: 0, //滑动条的 左右2个滑动条的大小
height: 8, //组件高度
left: 50, //左边的距离
right: 40, //右边的距离
bottom: 26, //右边的距离
handleColor: '#EFEFEF', //h滑动图标的颜色
handleStyle: {
borderColor: '#409EFF',
borderWidth: '1',
shadowBlur: 2,
background: '#EFEFEF',
shadowColor: '#EFEFEF'
},
fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: '#409EFF'
},
{
offset: 1,
color: '#409EFF'
}
]),
backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
filterMode: 'filter'
}
//下面这个属性是里面拖到
// {
// type: 'inside',
// show: true,
// xAxisIndex: [0],
// start: 0, //默认为1
// end: 50,
// },
],
grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: chartdata.xArr,
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value',
minInterval: 1,
axisTick: {
show: false
}
}],
series: [{
name: '数据',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: chartdata.yArr,
animationDuration
}]
})
}
}
}
</script>

55
src/views/report/components/mixins/resize.js
Unescape View File

@ -1,55 +0,0 @@
import { debounce } from '@/utils'
export default {
data() {
return {
$_sidebarElm: null,
$_resizeHandler: null
}
},
mounted() {
this.$_resizeHandler = debounce(() => {
if (this.chart) {
this.chart.resize()
}
}, 100)
this.$_initResizeEvent()
this.$_initSidebarResizeEvent()
},
beforeDestroy() {
this.$_destroyResizeEvent()
this.$_destroySidebarResizeEvent()
},
// to fixed bug when cached by keep-alive
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
activated() {
this.$_initResizeEvent()
this.$_initSidebarResizeEvent()
},
deactivated() {
this.$_destroyResizeEvent()
this.$_destroySidebarResizeEvent()
},
methods: {
// use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_initResizeEvent() {
window.addEventListener('resize', this.$_resizeHandler)
},
$_destroyResizeEvent() {
window.removeEventListener('resize', this.$_resizeHandler)
},
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this.$_resizeHandler()
}
},
$_initSidebarResizeEvent() {
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
},
$_destroySidebarResizeEvent() {
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
}
}
}

221
src/views/report/month.vue
Unescape View File

@ -1,145 +1,158 @@
<template>
<!-- 查询配置 -->
<div style="padding: 0px 20px">
<div ref="lxHeader">
<lx-header icon="md-apps" text="月度统计" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<slot>
<div style="display: flex;align-items: center;">
<el-date-picker
v-model="select.year"
type="year"
value-format="yyyy"
placeholder="选择年份">
</el-date-picker>
<el-button @click="getList" slot="reference" size="medium" type="primary" style="margin-left: 10px">查询</el-button>
<el-button @click="viewPart" slot="reference" size="medium" type="primary" style="margin-left: 10px">{{btnText}}</el-button>
<el-button @click="handleGo" slot="reference" size="medium" type="primary" style="margin-left: 10px">导出</el-button>
</div>
</slot>
</lx-header>
</div>
<div class="table-tree" v-if="showData">
<xy-table
:table-item="table"
:list="tableData"
:is-page="false">
</xy-table>
</div>
<div v-else>
<line-chart :chartData="rptData" :height="chartHeight"/>
</div>
<!-- 查询配置 -->
<div style="padding: 0px 20px">
<div ref="lxHeader">
<lx-header icon="md-apps" text="月度统计" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<slot>
<div style="display: flex;align-items: center;">
<el-date-picker v-model="select.year" type="year" formate='yyyy' value-format="yyyy" placeholder="选择年份">
</el-date-picker>
<el-button @click="getList" slot="reference" size="medium" type="primary"
style="margin-left: 10px">查询</el-button>
<el-button @click="viewPart" slot="reference" size="medium" type="primary"
style="margin-left: 10px">{{btnText}}</el-button>
<el-button @click="downloadExel" slot="reference" size="medium" type="primary"
style="margin-left: 10px">导出</el-button>
</div>
</slot>
</lx-header>
</div>
<div class="table-tree" v-if="showData">
<xy-table :table-item="table" :list="tableData" :is-page="false">
<template v-slot:btns></template>
</xy-table>
</div>
<div v-else>
<line-chart :chartData="rptData" :height="chartHeight" />
</div>
</div>
</template>
<script>
import LineChart from './components/LineChart'
// import { ElMapExportTable } from "table-excel";
// import {export_json_to_excel} from '@/Excel/Export2Excel';
import LineChart from '@/components/morecharts/LineChart.vue'
import {
monthList
} from "@/api/report";
} from "@/api/report";
import {
download
} from '@/utils/downloadRequest'
export default {
components: {
LineChart
},
created() {
created() {
// let date = new Date()
// this.select.year = date.getFullYear()
let now = new Date()
this.select.year = this.$moment(now).format("YYYY")
this.initLoad()
// this.load()
this.getList()
},
mounted() {},
data() {
return {
showData: false,
select: {
year:""
select: {
year: "",
is_export:0
},
tableData: [],
tableHeight: 0,
table:[
{
label:'月份',
sortable:false,
prop:'name'
},
{
label:'车辆',
sortable:false,
prop:'num'
},
],
chartHeight:"",
btnText:"数据展示",
rptData: {
xArr:[],
series:{
type:"bar"
tableHeight: 0,
table: [{
label: '月份',
sortable: false,
prop: 'month'
},
{
label: '预约数',
sortable: false,
prop: 'plan_total'
},
legendArr:["预约人数","入场人数"]
{
label: '入场数',
sortable: false,
prop: 'enter_total'
},
{
label: '取消数',
sortable: false,
prop: 'cancel_total'
}
],
chartHeight: "",
btnText: "数据展示",
rptData: {
xArr: [],
series: {
type: "bar"
},
legendArr: ["预约人数", "入场人数"]
}
}
},
methods: {
/** 导出按钮操作 */
handleGo(){
var data = this.tableData; // 这里面是数据列表
const column = [
{ title: "月份", dataIndex: "month" }, // dataIndex为数据列表中的数据字段
{ title: "预约车辆数", dataIndex: "plan_total" },
{ title: "入场车辆数", dataIndex: "use_total" },
];
const instance = new ElMapExportTable(
{ column, data },
{ progress: progress => console.log(progress) }// 进度条回调
);
instance.download("停车年度统计报表"); // 导出的文件名
},
viewPart() {
this.showData = !this.showData;
this.btnText = this.showData ? "图表展示" : "数据展示"
},
methods: {
initLoad() {
var that = this;
var clientHeight = document.documentElement.clientHeight
var lxHeader_height = 96.5; //查询 头部
var paginationHeight = 37; //分页的高度
var topHeight = 50; //页面 头部
let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
that.tableHeight = tableHeight;
that.chartHeight = tableHeight+"px"
let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight;
that.tableHeight = tableHeight;
that.chartHeight = tableHeight + "px"
},
downloadExel() {
this.select.is_export = 1
download(
'/api/admin/chart/month',
'get', {
...this.select
},
'月度统计报表.xlsx')
this.select.is_export = 0
},
viewPart() {
this.showData = !this.showData;
this.btnText = this.showData ? "图表展示" : "数据展示"
},
getList() {
// this.showData = true;
var xarr = [];
var planarr=[];
var usearr=[];
monthList({
year:this.select.year
var xarr = [];
var planarr = [];
var enterarr = [];
var cancelarr = []
monthList({
year: this.select.year
}).then((res) => {
for (var m of res) {
m.month = m.month+"月";
for (var m of res) {
xarr.push(m.month);
planarr.push(
m.plan_total
)
usearr.push(
m.use_total
)
}
enterarr.push(
m.enter_total
)
cancelarr.push(
m.cancel_total
)
}
this.rptData.xArr = xarr;
this.rptData.series = [{
name: "预约数",
type: 'bar',
data: planarr
},
{
name: "入场数",
type: 'bar',
data: enterarr
}, {
name: "取消数",
type: 'bar',
data: cancelarr
}
this.rptData.xArr = xarr;
this.rptData.series=[
{
name:"预约车辆数",
type: 'bar',
data:planarr
},
{
name:"入场车辆数",
type: 'bar',
data:usearr
}
]
this.tableData = res;
}).catch((res) => {})

221
src/views/report/park.vue
Unescape View File

@ -1,145 +1,158 @@
<template>
<!-- 查询配置 -->
<div style="padding: 0px 20px">
<div ref="lxHeader">
<lx-header icon="md-apps" text="车辆统计" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<slot>
<div style="display: flex;align-items: center;">
<el-date-picker
v-model="select.year"
type="year"
value-format="yyyy"
placeholder="选择年份">
</el-date-picker>
<el-button @click="getList" slot="reference" size="medium" type="primary" style="margin-left: 10px">查询</el-button>
<el-button @click="viewPart" slot="reference" size="medium" type="primary" style="margin-left: 10px">{{btnText}}</el-button>
<el-button @click="handleGo" slot="reference" size="medium" type="primary" style="margin-left: 10px">导出</el-button>
</div>
</slot>
</lx-header>
</div>
<div class="table-tree" v-if="showData">
<xy-table
:table-item="table"
:list="tableData"
:is-page="false">
</xy-table>
</div>
<div v-else>
<line-chart :chartData="rptData" :height="chartHeight"/>
</div>
<!-- 查询配置 -->
<div style="padding: 0px 20px">
<div ref="lxHeader">
<lx-header icon="md-apps" text="车辆统计" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<slot>
<div style="display: flex;align-items: center;">
<el-date-picker v-model="select.year" type="year" formate='yyyy' value-format="yyyy" placeholder="选择年份">
</el-date-picker>
<el-button @click="getList" slot="reference" size="medium" type="primary"
style="margin-left: 10px">查询</el-button>
<el-button @click="viewPart" slot="reference" size="medium" type="primary"
style="margin-left: 10px">{{btnText}}</el-button>
<el-button @click="downloadExel" slot="reference" size="medium" type="primary"
style="margin-left: 10px">导出</el-button>
</div>
</slot>
</lx-header>
</div>
<div class="table-tree" v-if="showData">
<xy-table :table-item="table" :list="tableData" :is-page="false">
<template v-slot:btns></template>
</xy-table>
</div>
<div v-else>
<line-chart :chartData="rptData" :height="chartHeight" />
</div>
</div>
</template>
<script>
import LineChart from './components/LineChart'
// import { ElMapExportTable } from "table-excel";
// import {export_json_to_excel} from '@/Excel/Export2Excel';
import LineChart from '@/components/morecharts/LineChart.vue'
import {
carList
} from "@/api/report";
} from "@/api/report";
import {
download
} from '@/utils/downloadRequest'
export default {
components: {
LineChart
},
created() {
created() {
// let date = new Date()
// this.select.year = date.getFullYear()
let now = new Date()
this.select.year = this.$moment(now).format("YYYY")
this.initLoad()
// this.load()
this.getList()
},
mounted() {},
data() {
return {
showData: false,
select: {
year:""
select: {
year: "",
is_export:0
},
tableData: [],
tableHeight: 0,
table:[
{
label:'月份',
sortable:false,
prop:'name'
},
{
label:'车辆',
sortable:false,
prop:'num'
},
],
chartHeight:"",
btnText:"数据展示",
rptData: {
xArr:[],
series:{
type:"bar"
tableHeight: 0,
table: [{
label: '月份',
sortable: false,
prop: 'month'
},
{
label: '预约数',
sortable: false,
prop: 'plan_total'
},
legendArr:["预约人数","入场人数"]
{
label: '入场数',
sortable: false,
prop: 'enter_total'
},
{
label: '取消数',
sortable: false,
prop: 'cancel_total'
}
],
chartHeight: "",
btnText: "数据展示",
rptData: {
xArr: [],
series: {
type: "bar"
},
legendArr: ["预约人数", "入场人数"]
}
}
},
methods: {
/** 导出按钮操作 */
handleGo(){
var data = this.tableData; // 这里面是数据列表
const column = [
{ title: "月份", dataIndex: "month" }, // dataIndex为数据列表中的数据字段
{ title: "预约车辆数", dataIndex: "plan_total" },
{ title: "入场车辆数", dataIndex: "use_total" },
];
const instance = new ElMapExportTable(
{ column, data },
{ progress: progress => console.log(progress) }// 进度条回调
);
instance.download("停车年度统计报表"); // 导出的文件名
},
viewPart() {
this.showData = !this.showData;
this.btnText = this.showData ? "图表展示" : "数据展示"
},
methods: {
initLoad() {
var that = this;
var clientHeight = document.documentElement.clientHeight
var lxHeader_height = 96.5; //查询 头部
var paginationHeight = 37; //分页的高度
var topHeight = 50; //页面 头部
let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
that.tableHeight = tableHeight;
that.chartHeight = tableHeight+"px"
let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight;
that.tableHeight = tableHeight;
that.chartHeight = tableHeight + "px"
},
downloadExel() {
this.select.is_export = 1
download(
'/api/admin/chart/car',
'get', {
...this.select
},
'车辆统计报表.xlsx')
this.select.is_export = 0
},
viewPart() {
this.showData = !this.showData;
this.btnText = this.showData ? "图表展示" : "数据展示"
},
getList() {
// this.showData = true;
var xarr = [];
var planarr=[];
var usearr=[];
carList({
year:this.select.year
var xarr = [];
var planarr = [];
var enterarr = [];
var cancelarr = []
carList({
year: this.select.year
}).then((res) => {
for (var m of res) {
m.month = m.month+"月";
for (var m of res) {
xarr.push(m.month);
planarr.push(
m.plan_total
)
usearr.push(
m.use_total
)
}
enterarr.push(
m.enter_total
)
cancelarr.push(
m.cancel_total
)
}
this.rptData.xArr = xarr;
this.rptData.series = [{
name: "预约数",
type: 'bar',
data: planarr
},
{
name: "入场数",
type: 'bar',
data: enterarr
}, {
name: "取消数",
type: 'bar',
data: cancelarr
}
this.rptData.xArr = xarr;
this.rptData.series=[
{
name:"预约车辆数",
type: 'bar',
data:planarr
},
{
name:"入场车辆数",
type: 'bar',
data:usearr
}
]
this.tableData = res;
}).catch((res) => {})

224
src/views/report/time.vue
Unescape View File

@ -1,145 +1,159 @@
<template>
<!-- 查询配置 -->
<div style="padding: 0px 20px">
<div ref="lxHeader">
<lx-header icon="md-apps" text="时段统计" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<slot>
<div style="display: flex;align-items: center;">
<el-date-picker
v-model="select.date"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
<el-button @click="getList" slot="reference" size="medium" type="primary" style="margin-left: 10px">查询</el-button>
<el-button @click="viewPart" slot="reference" size="medium" type="primary" style="margin-left: 10px">{{btnText}}</el-button>
<el-button @click="handleGo" slot="reference" size="medium" type="primary" style="margin-left: 10px">导出</el-button>
</div>
</slot>
</lx-header>
</div>
<div class="table-tree" v-if="showData">
<xy-table
:table-item="table"
:list="tableData"
:is-page="false">
</xy-table>
</div>
<div v-else>
<line-chart :chartData="rptData" :height="chartHeight"/>
</div>
<!-- 查询配置 -->
<div style="padding: 0px 20px">
<div ref="lxHeader">
<lx-header icon="md-apps" text="时段统计" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<slot>
<div style="display: flex;align-items: center;">
<el-date-picker v-model="select.date" type="date" formate='yyyy-MM-dd' value-format="yyyy-MM-dd" placeholder="选择日期">
</el-date-picker>
<el-button @click="getList" slot="reference" size="medium" type="primary"
style="margin-left: 10px">查询</el-button>
<el-button @click="viewPart" slot="reference" size="medium" type="primary"
style="margin-left: 10px">{{btnText}}</el-button>
<el-button @click="downloadExel" slot="reference" size="medium" type="primary"
style="margin-left: 10px">导出</el-button>
</div>
</slot>
</lx-header>
</div>
<div class="table-tree" v-if="showData">
<xy-table :table-item="table" :list="tableData" :is-page="false">
<template v-slot:btns></template>
</xy-table>
</div>
<div v-else>
<line-chart :chartData="rptData" :height="chartHeight" />
</div>
</div>
</template>
<script>
import LineChart from './components/LineChart'
// import { ElMapExportTable } from "table-excel";
// import {export_json_to_excel} from '@/Excel/Export2Excel';
import LineChart from '@/components/morecharts/LineChart.vue'
import {
timeList
} from "@/api/report";
} from "@/api/report";
import {
download
} from '@/utils/downloadRequest'
export default {
components: {
LineChart
},
created() {
created() {
// let date = new Date()
// this.select.year = date.getFullYear()
let now = new Date()
this.select.date = this.$moment(now).format("YYYY-MM-DD")
console.log(this.select.date)
this.initLoad()
// this.load()
this.getList()
},
mounted() {},
data() {
return {
showData: false,
select: {
year:""
select: {
date: "",
is_export:0
},
tableData: [],
tableHeight: 0,
table:[
{
label:'月份',
sortable:false,
prop:'name'
},
{
label:'车辆',
sortable:false,
prop:'num'
},
],
chartHeight:"",
btnText:"数据展示",
rptData: {
xArr:[],
series:{
type:"bar"
tableHeight: 0,
table: [{
label: '时段',
sortable: false,
prop: 'time'
},
{
label: '预约数',
sortable: false,
prop: 'plan_total'
},
legendArr:["预约人数","入场人数"]
{
label: '入场数',
sortable: false,
prop: 'enter_total'
},
{
label: '取消数',
sortable: false,
prop: 'cancel_total'
}
],
chartHeight: "",
btnText: "数据展示",
rptData: {
xArr: [],
series: {
type: "bar"
},
legendArr: ["预约人数", "入场人数"]
}
}
},
methods: {
/** 导出按钮操作 */
handleGo(){
var data = this.tableData; // 这里面是数据列表
const column = [
{ title: "月份", dataIndex: "month" }, // dataIndex为数据列表中的数据字段
{ title: "预约车辆数", dataIndex: "plan_total" },
{ title: "入场车辆数", dataIndex: "use_total" },
];
const instance = new ElMapExportTable(
{ column, data },
{ progress: progress => console.log(progress) }// 进度条回调
);
instance.download("停车年度统计报表"); // 导出的文件名
},
viewPart() {
this.showData = !this.showData;
this.btnText = this.showData ? "图表展示" : "数据展示"
},
methods: {
initLoad() {
var that = this;
var clientHeight = document.documentElement.clientHeight
var lxHeader_height = 96.5; //查询 头部
var paginationHeight = 37; //分页的高度
var topHeight = 50; //页面 头部
let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
that.tableHeight = tableHeight;
that.chartHeight = tableHeight+"px"
let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight;
that.tableHeight = tableHeight;
that.chartHeight = tableHeight + "px"
},
downloadExel() {
this.select.is_export = 1
download(
'/api/admin/chart/time',
'get', {
...this.select
},
'车辆统计报表.xlsx')
this.select.is_export = 0
},
viewPart() {
this.showData = !this.showData;
this.btnText = this.showData ? "图表展示" : "数据展示"
},
getList() {
// this.showData = true;
var xarr = [];
var planarr=[];
var usearr=[];
timeList({
year:this.select.date
var xarr = [];
var planarr = [];
var enterarr = [];
var cancelarr = []
timeList({
date: this.select.date
}).then((res) => {
for (var m of res) {
m.month = m.month+"月";
xarr.push(m.month);
for (var m of res) {
xarr.push(m.time);
planarr.push(
m.plan_total
)
usearr.push(
m.use_total
)
}
enterarr.push(
m.enter_total
)
cancelarr.push(
m.cancel_total
)
}
this.rptData.xArr = xarr;
this.rptData.series = [{
name: "预约数",
type: 'bar',
data: planarr
},
{
name: "入场数",
type: 'bar',
data: enterarr
}, {
name: "取消数",
type: 'bar',
data: cancelarr
}
this.rptData.xArr = xarr;
this.rptData.series=[
{
name:"预约车辆数",
type: 'bar',
data:planarr
},
{
name:"入场车辆数",
type: 'bar',
data:usearr
}
]
this.tableData = res;
}).catch((res) => {})

Write Preview
Loading…
Cancel
Save