231 lines
7.8 KiB
HTML
231 lines
7.8 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
|
|
|
|
<style>
|
|
|
|
.center-col {
|
|
background-color: white;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 20px;
|
|
width: calc((100% - (20px * 2)) / 2);
|
|
}
|
|
|
|
.col-title {
|
|
color: rgba(0, 0, 0, .45);
|
|
font-size: 14px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.col-button {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="app" v-cloak>
|
|
<guava ref="guava">
|
|
<template>
|
|
<el-card shadow="never">
|
|
<div class="btn-group tool-button">
|
|
<el-date-picker
|
|
v-model="year"
|
|
type="year"
|
|
value-format="yyyy"
|
|
placeholder="选择年"
|
|
style="width: 100%" @change="doSearch">
|
|
</el-date-picker>
|
|
</div>
|
|
|
|
</el-card>
|
|
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-card shadow="never" class="mr5 mt20">
|
|
<div class="col-title">
|
|
线路报名人数
|
|
<el-radio-group @change="doSearch()" v-model="regionalNature" size="mini"
|
|
style="float: right">
|
|
<el-radio-button label="省内">省内（{{snNum}}）人</el-radio-button>
|
|
<el-radio-button label="省外">省外（{{swNum}}）人</el-radio-button>
|
|
</el-radio-group>
|
|
</div>
|
|
<div id="lineBar"></div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-card shadow="never" class="ml5 mt20">
|
|
<div class="col-title">
|
|
旅行社平均分
|
|
<el-rate style="float: right"
|
|
value="5"
|
|
disabled
|
|
show-text
|
|
:texts="aaa"
|
|
text-color="#ff9900">
|
|
</el-rate>
|
|
|
|
</div>
|
|
<div id="travelAgencyRating"></div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-card shadow="never" class="ml5 mt20">
|
|
<div class="col-title">
|
|
线路平均分
|
|
<el-rate style="float: right"
|
|
value="5"
|
|
disabled
|
|
show-text
|
|
:texts="aaa"
|
|
text-color="#ff9900">
|
|
</el-rate>
|
|
</div>
|
|
<div id="lineRating"></div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
</guava>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
const chart = {
|
|
lineBar: undefined,
|
|
travelAgencyRating: undefined,
|
|
lineRating: undefined
|
|
}
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
mixins: [initTableMixins],
|
|
data() {
|
|
return {
|
|
aaa: ['极差', '失望', '一般', '满意', '最高平均分五分'],
|
|
snNum: 0,
|
|
swNum: 0,
|
|
year: moment().format('YYYY'),
|
|
regionalNature: '省内'
|
|
}
|
|
},
|
|
methods: {
|
|
async doSearch() {
|
|
await this.getLineBar()
|
|
await this.getSnSwNum()
|
|
await this.getTravelAgencyRating()
|
|
await this.getLineRating()
|
|
|
|
},
|
|
async getLineRating() {
|
|
let data = []
|
|
const refs = await $.post(loc() + "/getLineRating", {year: this.year})
|
|
refs.data.forEach(v => {
|
|
data.push({lineName: v.lineName, avg: v.avg})
|
|
})
|
|
if (chart.lineRating) {
|
|
chart.lineRating.changeData(data)
|
|
return
|
|
}
|
|
setTimeout(() => {
|
|
chart.lineRating = new G2Plot.Bar(document.getElementById("lineRating"), {
|
|
data,
|
|
xField: 'avg',
|
|
yField: 'lineName',
|
|
meta: {
|
|
lineName: {
|
|
alias: '线路',
|
|
},
|
|
avg: {
|
|
alias: '平均分（分）',
|
|
},
|
|
},
|
|
minBarWidth: 20,
|
|
maxBarWidth: 20,
|
|
});
|
|
chart.lineRating.render();
|
|
}, 300)
|
|
},
|
|
async getTravelAgencyRating() {
|
|
let data = []
|
|
const refs = await $.post(loc() + "/getTravelAgencyRating", {year: this.year})
|
|
refs.data.forEach(v => {
|
|
data.push({travelAgencyName: v.travelAgencyName, avg: v.avg})
|
|
})
|
|
if (chart.travelAgencyRating) {
|
|
chart.travelAgencyRating.changeData(data)
|
|
return
|
|
}
|
|
setTimeout(() => {
|
|
chart.travelAgencyRating = new G2Plot.Bar(document.getElementById("travelAgencyRating"), {
|
|
data,
|
|
xField: 'avg',
|
|
yField: 'travelAgencyName',
|
|
meta: {
|
|
travelAgencyName: {
|
|
alias: '旅行社',
|
|
},
|
|
avg: {
|
|
alias: '平均分（分）',
|
|
},
|
|
},
|
|
minBarWidth: 20,
|
|
maxBarWidth: 20,
|
|
});
|
|
chart.travelAgencyRating.render();
|
|
}, 300)
|
|
},
|
|
async getLineBar() {
|
|
let data = []
|
|
const refs = await $.post(loc() + "/getLineBar", {regionalNature: this.regionalNature, year: this.year})
|
|
refs.data.forEach(v => {
|
|
data.push({lineName: v.lineName, lineNum: (v.enrollNum + v.companionNum)})
|
|
})
|
|
if (chart.lineBar) {
|
|
chart.lineBar.changeData(data)
|
|
return
|
|
}
|
|
setTimeout(() => {
|
|
chart.lineBar = new G2Plot.Bar(document.getElementById("lineBar"), {
|
|
data,
|
|
xField: 'lineNum',
|
|
yField: 'lineName',
|
|
meta: {
|
|
lineName: {
|
|
alias: '线路名称',
|
|
},
|
|
lineNum: {
|
|
alias: '报名人数',
|
|
},
|
|
},
|
|
minBarWidth: 20,
|
|
maxBarWidth: 20,
|
|
});
|
|
chart.lineBar.render();
|
|
}, 300)
|
|
},
|
|
async getSnSwNum() {
|
|
const {data} = await $.post(loc() + "/getSnSwNum", {year: this.year})
|
|
this.snNum = data.snNum
|
|
this.swNum = data.snNum
|
|
}
|
|
|
|
},
|
|
async created() {
|
|
await this.getLineBar()
|
|
await this.getSnSwNum()
|
|
await this.getTravelAgencyRating()
|
|
await this.getLineRating()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
|
|
<!--#
|
|
}
|
|
#--> |