first commit
This commit is contained in:
@@ -0,0 +1,308 @@
|
||||
<!--#
|
||||
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>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user