更新
This commit is contained in:
liushuai
@@ -152,7 +152,7 @@
|
||||
<div v-show="false">{{ content }}</div>
|
||||
<!--富文本编辑器-->
|
||||
<div v-show="!preview" id="tinymce" style="height:850px;">
|
||||
<tinymce ref="tinymce" :height="700" v-model="contentNew" style="width:800px;margin: 0 auto;pointer-events: none"/>
|
||||
<tinymce ref="tinymce" :height="700" v-model="contentNew" style="width:800px;margin: 0 auto;"/>
|
||||
</div>
|
||||
<!--网页预览-->
|
||||
<div v-show="preview" class="editor-content" style="min-height:500px;margin: 0px auto;width:800px;border:1px solid black" v-html="content"/>
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
<el-button type="success" size="small" icon="el-icon-search" style="margin-left: 15px" @click="getTableData()">查询</el-button>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<h3>采购效率</h3>
|
||||
<div id="myChart" style="width: 1000px; height: 570px; margin: auto"/>
|
||||
</el-card>
|
||||
<el-card style="width: 650px">
|
||||
@@ -64,21 +65,111 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<el-card v-loading="loading2" style="height: 450px">
|
||||
<span>供应商分布图</span>
|
||||
<el-button size="small" type="success" icon="el-icon-search" @click="search2()">查询</el-button>
|
||||
<div id="myChart2" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<span style="margin-left: 10px">时间段:</span>
|
||||
<el-date-picker
|
||||
v-model="date3"
|
||||
style="width:160px;margin:10px;"
|
||||
size="small"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
placeholder="选择日期"/>
|
||||
<span>~</span>
|
||||
<el-date-picker
|
||||
v-model="date4"
|
||||
style="width:160px;margin:10px;"
|
||||
size="small"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
placeholder="选择日期"/>
|
||||
<el-button type="success" size="small" icon="el-icon-search" style="margin-left: 15px" @click="getTableData2()">查询</el-button>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<h3>采购合同审核审批效率</h3>
|
||||
<div id="myChart3" style="width: 1000px; height: 570px; margin: auto"/>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<span style="margin-left: 10px">时间段:</span>
|
||||
<el-date-picker
|
||||
v-model="date5"
|
||||
style="width:160px;margin:10px;"
|
||||
size="small"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
placeholder="选择日期"/>
|
||||
<span>~</span>
|
||||
<el-date-picker
|
||||
v-model="date6"
|
||||
style="width:160px;margin:10px;"
|
||||
size="small"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
placeholder="选择日期"/>
|
||||
<el-button type="success" size="small" icon="el-icon-search" style="margin-left: 15px" @click="getTableData3()">查询</el-button>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<h3>制造采购合同审批效率</h3>
|
||||
<div id="myChart4" style="width: 1000px; height: 570px; margin: auto"/>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<span style="margin-left: 10px">时间段:</span>
|
||||
<el-date-picker
|
||||
v-model="date7"
|
||||
style="width:160px;margin:10px;"
|
||||
size="small"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
placeholder="选择日期"/>
|
||||
<span>~</span>
|
||||
<el-date-picker
|
||||
v-model="date8"
|
||||
style="width:160px;margin:10px;"
|
||||
size="small"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
placeholder="选择日期"/>
|
||||
<el-button type="success" size="small" icon="el-icon-search" style="margin-left: 15px" @click="getTableData4()">查询</el-button>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<h3>采购合同审批付款效率</h3>
|
||||
<div id="myChart5" style="width: 1000px; height: 570px; margin: auto"/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getData, getData1 } from '@/api/PurchasingCenter/PurchasingEfficiencyAnalysis'
|
||||
import { getData, getData1, getData2, getData3, getData4 } from '@/api/PurchasingCenter/PurchasingEfficiencyAnalysis'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
tableData1: [],
|
||||
tableData2: [],
|
||||
tableData3: [],
|
||||
date1: '',
|
||||
date2: ''
|
||||
date2: '',
|
||||
date3: '',
|
||||
date4: '',
|
||||
date5: '',
|
||||
date6: '',
|
||||
date7: '',
|
||||
date8: '',
|
||||
loading2: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getTableData() {
|
||||
getTableData() {
|
||||
this.tableData = []
|
||||
getData(this.date1, this.date2).then(response => {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
@@ -160,7 +251,279 @@ export default {
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
getTableData2() {
|
||||
getData2(this.date3, this.date4).then(response => {
|
||||
this.tableData1 = response.data
|
||||
}).then(() => {
|
||||
this.drawLine1()
|
||||
})
|
||||
},
|
||||
drawLine1() {
|
||||
const myChart = this.$echarts.init(document.getElementById('myChart3'))
|
||||
const xData = []
|
||||
const lineData = []
|
||||
const lineData1 = []
|
||||
for (let i = 0; i < this.tableData1.length; i++) {
|
||||
xData.push(this.tableData1[i].采购合同编号)
|
||||
lineData.push(this.tableData1[i].审核用时)
|
||||
lineData1.push(this.tableData1[i].审批用时)
|
||||
}
|
||||
myChart.clear()
|
||||
myChart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['审核用时', '审批用时']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
name: '合同编号',
|
||||
data: xData,
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 40
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '用时(H)'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '审核用时',
|
||||
type: 'line',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
data: lineData
|
||||
},
|
||||
{
|
||||
name: '审批用时',
|
||||
type: 'line',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
data: lineData1
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
getTableData3() {
|
||||
getData3(this.date5, this.date6).then(response => {
|
||||
this.tableData2 = response.data
|
||||
}).then(() => {
|
||||
this.drawLine2()
|
||||
})
|
||||
},
|
||||
drawLine2() {
|
||||
const myChart = this.$echarts.init(document.getElementById('myChart4'))
|
||||
const xData = []
|
||||
const lineData = []
|
||||
for (let i = 0; i < this.tableData2.length; i++) {
|
||||
xData.push(this.tableData2[i].采购合同编号)
|
||||
lineData.push(this.tableData2[i].审批用时)
|
||||
}
|
||||
myChart.clear()
|
||||
myChart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['审批用时']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
name: '合同编号',
|
||||
data: xData,
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 40
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '用时(H)'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '审核用时',
|
||||
type: 'line',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
data: lineData
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
getTableData4() {
|
||||
getData4(this.date7, this.date8).then(response => {
|
||||
this.tableData3 = response.data
|
||||
}).then(() => {
|
||||
this.drawLine3()
|
||||
})
|
||||
},
|
||||
drawLine3() {
|
||||
const myChart = this.$echarts.init(document.getElementById('myChart5'))
|
||||
const xData = []
|
||||
const lineData = []
|
||||
const lineData1 = []
|
||||
for (let i = 0; i < this.tableData3.length; i++) {
|
||||
xData.push(this.tableData3[i].采购合同编号)
|
||||
lineData.push(this.tableData3[i].付款用时)
|
||||
lineData1.push(this.tableData3[i].审批用时)
|
||||
}
|
||||
myChart.clear()
|
||||
myChart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['付款用时', '审批用时']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
name: '合同编号',
|
||||
data: xData,
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 40
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '用时(H)'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '付款用时',
|
||||
type: 'line',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
data: lineData
|
||||
},
|
||||
{
|
||||
name: '审批用时',
|
||||
type: 'line',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
data: lineData1
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
// // 客户分布图
|
||||
// search2() {
|
||||
// this.loading2 = true
|
||||
// var myChart2 = this.$echarts.init(document.getElementById('myChart2'))
|
||||
// myChart2.clear()
|
||||
// getData2().then(response => {
|
||||
// this.loading2 = false
|
||||
// this.drawLine2(response.data)
|
||||
// })
|
||||
// },
|
||||
// drawLine2(data) {
|
||||
// var dataX = []
|
||||
// var lineData = []
|
||||
// for (let i = 0; i < data.length; i++) {
|
||||
// dataX.push({
|
||||
// value: parseInt(data[i].客户数量),
|
||||
// name: data[i].省份
|
||||
// })
|
||||
// lineData.push(data[i].省份)
|
||||
// }
|
||||
// var myChart2 = this.$echarts.init(document.getElementById('myChart2'))
|
||||
// myChart2.clear()
|
||||
// myChart2.setOption({
|
||||
// title: {
|
||||
// text: '供应商分布图',
|
||||
// x: 'center'
|
||||
// },
|
||||
// tooltip: {
|
||||
// trigger: 'item',
|
||||
// formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
// },
|
||||
// legend: {
|
||||
// orient: 'vertical',
|
||||
// left: 'left',
|
||||
// data: lineData
|
||||
// },
|
||||
// series: [
|
||||
// {
|
||||
// name: '省份',
|
||||
// type: 'pie',
|
||||
// radius: '55%',
|
||||
// center: ['50%', '60%'],
|
||||
// data: dataX,
|
||||
// itemStyle: {
|
||||
// emphasis: {
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// })
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user