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

up

Browse Source
master
刘翔宇-旅管家 4 years ago
parent a173d8855b
commit 14db9d180f
7 changed files with 799 additions and 66 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,12 +1,12 @@
<template>
<div class="dashboard-editor-container">
<panel-group :countsData="countsData" />
<panel-group :countsData="countsData" />
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="12">
<div class="chart-wrapper">
<div class="chart-title">
<router-link to="/toolbox/warning">观众性别</router-link>
<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">
@ -21,7 +21,7 @@
<div class="chart-wrapper">
<div class="chart-title">
<router-link to="/toolbox/exception">观众年龄</router-link>
<!-- <div>
<!-- <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}}
@ -30,27 +30,27 @@
</div>
<pie-chart :chartData="stat.exception" />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8" v-if="false">
<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.times" />
</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" />
<el-col :xs="24" :sm="24" :lg="8" v-if="false">
<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.times" />
</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>
@ -135,35 +135,35 @@
type: "month",
name: "本月"
}]
},
times: {
radiusArr: "50%",
yArr: [{
value: 240,
name: '苏州'
},
{
value: 20,
name: '无锡'
},
{
value: 130,
name: '常州'
},
{
value: 120,
name: '泰州'
},
{
value: 120,
name: '宿迁'
}
],
},
times: {
radiusArr: "50%",
yArr: [{
value: 240,
name: '苏州'
},
{
value: 20,
name: '无锡'
},
{
value: 130,
name: '常州'
},
{
value: 120,
name: '泰州'
},
{
value: 120,
name: '宿迁'
}
],
}
},
lineArr: {
xArr: ['05-22', '05-23', '05-24', '05-25', '05-26', '05-27', '05-28'],
legendArr:["团队预约人数","团队预约实际入场人数","个人预约人数","个人预约实际入场人数"],
xArr: ['05-22', '05-23', '05-24', '05-25', '05-26', '05-27', '05-28'],
legendArr: ["团队预约人数", "团队预约实际入场人数", "个人预约人数", "个人预约实际入场人数"],
series: [{
name: '团队预约人数',
type: 'line',
@ -181,24 +181,24 @@
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 210]
},
{
name: '个人预约实际入场人数',
type: 'line',
stack: 'Total',
data: [50, 132, 101, 104, 180, 230, 110]
},
{
name: '个人预约实际入场人数',
type: 'line',
stack: 'Total',
data: [50, 132, 101, 104, 180, 230, 110]
}
]
}
}
},
created: function() {
}
},
created: function() {
},
methods: {
},
methods: {
}
}
}
</script>
<style lang="scss" scoped>

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

@ -0,0 +1,146 @@
<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>

143
src/views/report/components/LineChart.vue
Unescape View File

@ -0,0 +1,143 @@
<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: '400px'
},
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,
// },
],
legendArr:[],
legend: {
orient: 'horizontal',
bottom: '3%',
data:chartdata.legendArr
},
tooltip: {
trigger: 'axis'
},
backgroundColor:"#fff",
grid: {
top: '3%',
left: '2%',
right: '2%',
bottom: '12%',
containLabel: true
},
xAxis: [{
type: 'category',
data: chartdata.xArr,
}],
yAxis: [{
type: 'value',
minInterval: 1,
}],
series: chartdata.series
})
}
}
}
</script>

211
src/views/report/components/PanelGroup.vue
Unescape View File

@ -0,0 +1,211 @@
<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 */
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-icon-wrapper icon-people">
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text" style="font-family: '微软雅黑'">
234
</div>
<div class="card-panel-text" style="color: #fff;font-size:16px">
预约参观总人次
</div>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" 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+ */">
<div class="card-panel" style="background-color: transparent;" @click="handleRoute('box')">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="user-group" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text" style="font-family: '微软雅黑'">
204
</div>
<div class="card-panel-text" style="color: #fff;font-size:16px">
入场参观总人次
</div>
<!-- <count-to :start-val="0" :end-val="countsData.client_count" :duration="3000" class="card-panel-num" /> -->
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" 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+ */">
<div class="card-panel" @click="handleRoute('tool')">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text" style="font-family: '微软雅黑'">
305
</div>
<div class="card-panel-text" style="color: #fff;font-size:16px">
预约活动总人次
</div>
<!-- <count-to :start-val="0" :end-val="countsData.tool_count" :duration="3200" class="card-panel-num" /> -->
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" 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+ */">
<div class="card-panel" @click="handleRoute('user')">
<div class="card-panel-icon-wrapper icon-shopping">
<svg-icon icon-class="user-group" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text" style="font-family: '微软雅黑'">
267
</div>
<div class="card-panel-text" style="color: #fff;font-size:16px">
参与活动总人次
</div>
<!-- <count-to :start-val="0" :end-val="countsData.user_count" :duration="3600" class="card-panel-num" /> -->
</div>
</div>
</el-col>
</el-row>
</template>
<script>
import CountTo from 'vue-count-to'
export default {
props: {
countsData: {
type: Object
}
},
components: {
CountTo
},
methods: {
handleRoute(type) {
this.$emit('handleRoute', type)
}
}
}
</script>
<style lang="scss" scoped>
.panel-group {
// margin-top: 18px;
margin-left: -2% !important;
margin-right: -3% !important;
.card-panel-col {
// margin:0 2%;
margin: 0 2%;
margin-bottom: 32px;
}
.card-panel {
height: 130px;
cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: #666;
text-align: center;
// background: #fff;
// box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
// border-color: rgba(0, 0, 0, .05);
&:hover {
.card-panel-icon-wrapper {
color: #fff;
}
// .icon-people {
// background: #40c9c6;
// }
// .icon-message {
// background: #36a3f7;
// }
// .icon-money {
// background: #f4516c;
// }
// .icon-shopping {
// background: #34bfa3
// }
}
.icon-people {
color: #fff;
}
.icon-message {
color: #fff;
}
.icon-money {
color: #fff;
}
.icon-shopping {
color: #fff
}
.card-panel-icon-wrapper {
float: right;
margin: 22px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;
}
.card-panel-icon {
float: left;
font-size: 42px;
}
.card-panel-description {
// float: right;
font-weight: bold;
margin: 33px 0;
.card-panel-text {
line-height: 25px;
color: rgb(255, 255, 255);
font-size: 28px;
margin-bottom: 12px;
}
.card-panel-num {
font-size: 20px;
}
}
}
}
@media (max-width:550px) {
.card-panel-description {
display: none;
}
.card-panel-icon-wrapper {
float: none !important;
width: 100%;
height: 100%;
margin: 0 !important;
.svg-icon {
display: block;
margin: 14px auto !important;
float: none !important;
}
}
}
</style>

163
src/views/report/components/PieChart.vue
Unescape View File

@ -0,0 +1,163 @@
<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: '300px'
},
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,
// },
],
legend: {
orient: 'horizontal',
bottom: '4%',
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
grid: {
top: 0,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: chartdata.xArr,
axisLine: {
show: false //不显示坐标轴轴线
},
axisTick: {
show: false //不显示坐标轴刻度
},
}],
yAxis: [{
type: 'value',
minInterval: 1,
axisLine: {
show: false //不显示坐标轴轴线
},
axisTick: {
show: false //不显示坐标轴刻度
},
}],
radiusArr:[],
series: [{
name: '数据',
type: 'pie',
stack: 'vistors',
barWidth: '60%',
radius: chartdata.radiusArr,
center: ['50%', '45%'],
data: chartdata.yArr,
animationDuration
}]
})
}
}
}
</script>

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

@ -0,0 +1,55 @@
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)
}
}
}

25
src/views/report/visit/sexRpt.vue
Unescape View File

@ -31,6 +31,7 @@
</el-table>
</div>
<div v-else>
<pie-chart :chartData="rptData" />
</div>
</div>
@ -38,12 +39,14 @@
</template>
<script>
import LxHeader from "@/components/LxHeader/index.vue";
import PieChart from './components/PieChart'
import {
sexRpt
} from "@/api/report/visit.js";
export default {
components: {
LxHeader
LxHeader,
PieChart
},
created() {
this.initLoad()
@ -55,12 +58,16 @@
showData: false,
searchFields: {},
tableData: [],
tableHeight: 0
tableHeight: 0,
rptData: {
yArr: [],
radiusArr: "50%"
}
}
},
methods: {
viewPart(){
this.showData=false;
methods: {
viewPart() {
this.showData = false;
},
initLoad() {
var that = this;
@ -73,10 +80,18 @@
},
load() {
this.showData = true;
var arr = [];
sexRpt().then((res) => {
for (var m of res) {
m.per = (m.use_total / (m.plan_total == 0 ? 1 : m.plan_total)) * 100 + "%"
arr.push({
name: m.sex_name,
value: m.plan_total
})
}
this.rptData.yArr = arr;
this.tableData = res;
}).catch((res) => {})
}

Write Preview
Loading…
Cancel
Save