309 lines
10 KiB
HTML
309 lines
10 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<style>
|
|
.clearfix {
|
|
font-weight: 600;
|
|
padding: 5px;
|
|
}
|
|
|
|
.el-select {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|
|
<div id="app" v-cloak>
|
|
<guava>
|
|
<el-card shadow="never">
|
|
<el-select v-model="meetingId" placeholder="请选择教代会" @change="initData">
|
|
<el-option
|
|
v-for="item in allJdhOptions"
|
|
:key="item.id"
|
|
:label="item.jdhallname"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</el-card>
|
|
|
|
<el-row :gutter="10" class="mt10">
|
|
<el-col :span="12" v-loading="loading.satisfiedLoading">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>提案满意度</span>
|
|
</div>
|
|
<div class="text item">
|
|
<div id="satisfiedChart"></div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="12" v-loading="loading.typeLoading">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>提案类型</span>
|
|
</div>
|
|
<div class="text item">
|
|
<div id="typeChart"></div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="10" class="mt10">
|
|
<el-col :span="12" v-loading="loading.resultLoading">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>立案结果</span>
|
|
</div>
|
|
<div class="text item">
|
|
<div id="resultChart"></div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="12" v-loading="loading.stateLoading">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>提案状态</span>
|
|
</div>
|
|
<div class="text item">
|
|
<div id="stateChart"></div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</guava>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
const chart = {
|
|
satisfiedChart: undefined,
|
|
resultChart: undefined,
|
|
typeChart: undefined,
|
|
stateChart: undefined
|
|
}
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
meetingId: '',
|
|
allJdhOptions: [],
|
|
tableData: [],
|
|
chatLoading: true,
|
|
topBlockLoading: true,
|
|
tabLoading: false,
|
|
loading: {
|
|
satisfiedLoading: false,
|
|
resultLoading: false,
|
|
typeLoading: false,
|
|
stateLoading: false
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 提案满意度
|
|
* @returns {Promise<void>}
|
|
*/
|
|
async satisfiedData() {
|
|
this.loading.satisfiedLoading = true
|
|
const resp = await $.get(loc() + '/satisfiedData', {meetingId: this.meetingId})
|
|
this.loading.satisfiedLoading = false
|
|
if (resp.code === 0) {
|
|
const data = resp.data
|
|
|
|
if (chart.satisfiedChart) {
|
|
chart.satisfiedChart.changeData()
|
|
return
|
|
}
|
|
|
|
chart.satisfiedChart = new G2Plot.Pie('satisfiedChart', {
|
|
data,
|
|
appendPadding: 10,
|
|
angleField: 'num',
|
|
colorField: 'name',
|
|
radius: 0.75,
|
|
color: ['#9661BC', '#5B8FF9', '#61DDAA'],
|
|
label: {
|
|
type: 'spider',
|
|
labelHeight: 28,
|
|
content: '{name}\n{percentage}',
|
|
},
|
|
interactions: [{type: 'element-selected'}, {type: 'element-active'}],
|
|
});
|
|
|
|
chart.satisfiedChart.render();
|
|
} else {
|
|
this.notifyWarning(resp.msg)
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 立案结果
|
|
* @returns {Promise<void>}
|
|
*/
|
|
async resultData() {
|
|
this.loading.resultLoading = true
|
|
const resp = await $.get(loc() + '/resultData', {meetingId: this.meetingId})
|
|
this.loading.resultLoading = false
|
|
if (resp.code === 0) {
|
|
const data = resp.data
|
|
if (chart.resultChart) {
|
|
chart.resultChart.changeData(data)
|
|
return
|
|
}
|
|
chart.resultChart = new G2Plot.Radar('resultChart', {
|
|
data,
|
|
xField: 'name',
|
|
yField: 'num',
|
|
seriesField: 'type',
|
|
meta: {
|
|
num: {
|
|
alias: '数量',
|
|
min: 0
|
|
},
|
|
},
|
|
xAxis: {
|
|
line: null,
|
|
tickLine: null,
|
|
grid: {
|
|
line: {
|
|
style: {
|
|
lineDash: null,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
yAxis: {
|
|
line: null,
|
|
tickLine: null,
|
|
grid: {
|
|
line: {
|
|
type: 'line',
|
|
style: {
|
|
lineDash: null,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
area: {},
|
|
point: {
|
|
size: 2,
|
|
},
|
|
});
|
|
chart.resultChart.render();
|
|
} else {
|
|
this.notifyWarning(resp.msg)
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 提案类型
|
|
* @returns {Promise<void>}
|
|
*/
|
|
async typeData() {
|
|
this.loading.typeLoading = true
|
|
const resp = await $.get(loc() + '/typeData', {meetingId: this.meetingId})
|
|
this.loading.typeLoading = false
|
|
|
|
if (resp.code === 0) {
|
|
const data = resp.data
|
|
|
|
if (chart.typeChart) {
|
|
chart.typeChart.changeData(data)
|
|
return
|
|
}
|
|
chart.typeChart = new G2Plot.Column('typeChart', {
|
|
data,
|
|
xField: 'typeName',
|
|
yField: 'num',
|
|
meta: {
|
|
type: {
|
|
alias: '类别',
|
|
},
|
|
sales: {
|
|
alias: '数量',
|
|
},
|
|
},
|
|
xAxis: {
|
|
label: {
|
|
autoRotate: true,
|
|
autoHide: false,
|
|
autoEllipsis: false,
|
|
},
|
|
}
|
|
});
|
|
chart.typeChart.render();
|
|
} else {
|
|
this.notifyWarning(resp.msg)
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 提案状态
|
|
* @returns {Promise<void>}
|
|
*/
|
|
async stateData() {
|
|
this.loading.stateLoading = true
|
|
const resp = await $.get(loc() + '/stateData', {meetingId: this.meetingId})
|
|
this.loading.stateLoading = false
|
|
|
|
if (resp.code === 0) {
|
|
const data = resp.data
|
|
if (chart.stateChart) {
|
|
chart.stateChart.changeData(data)
|
|
return
|
|
}
|
|
chart.stateChart = new G2Plot.Radar('stateChart', {
|
|
data,
|
|
xField: 'stateName',
|
|
yField: 'num',
|
|
xAxis: {
|
|
line: null,
|
|
tickLine: null,
|
|
grid: {
|
|
line: {
|
|
style: {
|
|
lineDash: null,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
yAxis: {
|
|
line: null,
|
|
tickLine: null,
|
|
grid: {
|
|
line: {
|
|
type: 'line',
|
|
style: {
|
|
lineDash: null,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
point: {
|
|
size: 2,
|
|
},
|
|
});
|
|
chart.stateChart.render();
|
|
} else {
|
|
this.notifyWarning(resp.msg)
|
|
}
|
|
},
|
|
async initData() {
|
|
await this.satisfiedData()
|
|
await this.resultData()
|
|
await this.typeData()
|
|
await this.stateData()
|
|
}
|
|
},
|
|
async created() {
|
|
this.allJdhOptions = await proposal.getAllMeeting()
|
|
this.meetingId = this.allJdhOptions.length ? this.allJdhOptions[0].id : ''
|
|
this.initData()
|
|
}
|
|
})
|
|
</script>
|
|
<!--#
|
|
}
|
|
#-->
|