fixd:集团统计导出及图标配色修改
This commit is contained in:
parent
c485a259ad
commit
fe4bcbf607
|
|
@ -20,6 +20,7 @@
|
|||
"echarts": "^5.4.0",
|
||||
"element-china-area-data": "^5.0.2",
|
||||
"element-ui": "^2.15.13",
|
||||
"exceljs": "^4.3.0",
|
||||
"file-saver": "^2.0.2",
|
||||
"js-cookie": "2.2.0",
|
||||
"normalize.css": "7.0.0",
|
||||
|
|
|
|||
|
|
@ -21,6 +21,11 @@
|
|||
@click="handlePrint"
|
||||
>打印</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="exportExcel"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<el-card style="margin-top:10px">
|
||||
|
|
@ -30,16 +35,16 @@
|
|||
<!-- 5个目标值 -->
|
||||
<el-row id="echartsContainer">
|
||||
<el-col class="chartsWraps">
|
||||
<div id="main" style="width:100%;height:500px;margin-left: 10px;"></div>
|
||||
<div id="main" style="width:100%;height:500px;margin-left: 10px;" ref="chart"></div>
|
||||
</el-col>
|
||||
<el-col class="chartsWraps">
|
||||
<div id="main2" style="width:100%;height:500px;margin-left: 10px;"></div>
|
||||
<div id="main2" style="width:100%;height:500px;margin-left: 10px;" ref="chart2"></div>
|
||||
</el-col>
|
||||
<el-col class="chartsWraps">
|
||||
<div id="main3" style="width:100%;height:500px;margin-left: 10px;"></div>
|
||||
<div id="main3" style="width:100%;height:500px;margin-left: 10px;" ref="chart3"></div>
|
||||
</el-col>
|
||||
<el-col class="chartsWraps">
|
||||
<div id="main4" style="width:100%;height:500px;margin-left: 10px;"></div>
|
||||
<div id="main4" style="width:100%;height:500px;margin-left: 10px;" ref="chart4"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
|
@ -50,6 +55,8 @@
|
|||
import { taskAnalyse } from "@/api/task";
|
||||
import checkPermission from "@/utils/permission";
|
||||
import * as echarts from 'echarts';
|
||||
import ExcelJS from 'exceljs'; // 引入exceljs, 用于生成excel文件
|
||||
import { saveAs } from 'file-saver'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -107,7 +114,7 @@
|
|||
type: 'category',
|
||||
data: [],
|
||||
},
|
||||
color:['#438af4','#91cc75','#ff0000'],
|
||||
color:['#c9caca','#007dcd','#000000'],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel:{
|
||||
|
|
@ -124,6 +131,10 @@
|
|||
barGap: 0,
|
||||
barWidth:10,
|
||||
data: [],
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
markLine : {
|
||||
symbol:"none",
|
||||
label: {
|
||||
|
|
@ -134,12 +145,12 @@
|
|||
silent:false, //鼠标悬停事件 true没有，false有
|
||||
lineStyle:{ //警戒线的样式 ，虚实 颜色
|
||||
type:"solid",
|
||||
color:"#ff0000",
|
||||
color:"#000000",
|
||||
},
|
||||
label:{
|
||||
position:'end',
|
||||
formatter:'{c}',
|
||||
color:"#ff0000",
|
||||
color:"#000000",
|
||||
fontSize:'8'
|
||||
},
|
||||
name:'',
|
||||
|
|
@ -152,6 +163,10 @@
|
|||
name: '单位目标值',
|
||||
type: 'bar',
|
||||
barWidth:10,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
data: []
|
||||
},
|
||||
{
|
||||
|
|
@ -217,13 +232,25 @@
|
|||
data42.push(item4.客户投诉处理满意率设定值)
|
||||
})
|
||||
markLine4 = sortedArr4[0].客户投诉处理满意率基础值;
|
||||
|
||||
console.log(data1,data2,data3)
|
||||
let option1 =that.option;
|
||||
let option2 =that.option;
|
||||
let option3=that.option;
|
||||
let option4= that.option;
|
||||
|
||||
option1.xAxis.data = xaxis1;
|
||||
option1.series[0].data = data1;
|
||||
|
||||
let arr1 = [],arr2=[],arr3=[],arr4=[];
|
||||
data1.forEach(item=>{
|
||||
if(item!==null){
|
||||
let item1 = item.toFixed(2)
|
||||
arr1.push(item1)
|
||||
}else{
|
||||
arr2.push(item)
|
||||
}
|
||||
})
|
||||
option1.series[0].data = arr1;
|
||||
option1.series[1].data = data12;
|
||||
option1.title.text = '报告/证书合格率';
|
||||
option1.series[0].markLine.data[0].yAxis = markLine1;
|
||||
|
|
@ -231,7 +258,15 @@
|
|||
that.barChart1.setOption(option1);
|
||||
|
||||
option2.xAxis.data = xaxis2;
|
||||
option2.series[0].data = data2;
|
||||
data2.forEach(item=>{
|
||||
if(item!==null){
|
||||
let item2 = item.toFixed(2)
|
||||
arr2.push(item2)
|
||||
}else{
|
||||
arr2.push(item)
|
||||
}
|
||||
})
|
||||
option2.series[0].data = arr2;
|
||||
option2.series[1].data = data22;
|
||||
option2.title.text = '报告/证书及时率';
|
||||
option2.series[0].markLine.data[0].yAxis = markLine2;
|
||||
|
|
@ -239,7 +274,15 @@
|
|||
that.barChart2.setOption(option2);
|
||||
|
||||
option3.xAxis.data = xaxis3;
|
||||
option3.series[0].data = data3;
|
||||
data3.forEach(item=>{
|
||||
if(item!==null){
|
||||
let item3 = item.toFixed(2)
|
||||
arr3.push(item3)
|
||||
}else{
|
||||
arr2.push(item)
|
||||
}
|
||||
})
|
||||
option3.series[0].data = arr3;
|
||||
option3.series[1].data = data32;
|
||||
option3.title.text = '能力验证满意率';
|
||||
option3.series[0].markLine.data[0].yAxis = markLine3;
|
||||
|
|
@ -247,7 +290,15 @@
|
|||
that.barChart3.setOption(option3);
|
||||
|
||||
option4.xAxis.data = xaxis4;
|
||||
option4.series[0].data = data4;
|
||||
data4.forEach(item=>{
|
||||
if(item!==null){
|
||||
let item4 = item.toFixed(2)
|
||||
arr4.push(item4)
|
||||
}else{
|
||||
arr4.push(item)
|
||||
}
|
||||
})
|
||||
option4.series[0].data = arr4;
|
||||
option4.series[1].data = data42;
|
||||
option4.title.text = '客户投诉处理满意率';
|
||||
option4.series[0].markLine.data[0].yAxis = markLine4;
|
||||
|
|
@ -255,6 +306,58 @@
|
|||
that.barChart4.setOption(option4);
|
||||
})
|
||||
},
|
||||
exportExcel() {
|
||||
const workbook = new ExcelJS.Workbook(); // 创建工作簿
|
||||
const worksheet = workbook.addWorksheet('Sheet1'); // 添加工作表
|
||||
|
||||
const chart = echarts.getInstanceByDom(this.$refs.chart) // 获取图表实例
|
||||
const base64Image = chart.getDataURL({
|
||||
pixelRatio: 2, // 导出图片的分辨率比例，默认为1，即图片的分辨率为屏幕分辨率的一倍
|
||||
backgroundColor: '#fff' // 导出图片的背景色
|
||||
})
|
||||
let image= workbook.addImage({ // 添加图片
|
||||
base64: base64Image, // 图片的base64编码
|
||||
extension: 'png' // 图片的扩展名
|
||||
});
|
||||
worksheet.addImage(image, 'A1:AB35'); // 将图片添加到工作表中
|
||||
|
||||
const chart2 = echarts.getInstanceByDom(this.$refs.chart2)
|
||||
const base64Image2 = chart2.getDataURL({
|
||||
pixelRatio: 2,
|
||||
backgroundColor: '#fff'
|
||||
})
|
||||
let image2= workbook.addImage({
|
||||
base64: base64Image2,
|
||||
extension: 'png'
|
||||
});
|
||||
worksheet.addImage(image2, 'A36:AB70');
|
||||
|
||||
const chart3 = echarts.getInstanceByDom(this.$refs.chart3)
|
||||
const base64Image3 = chart3.getDataURL({
|
||||
pixelRatio: 2,
|
||||
backgroundColor: '#fff'
|
||||
})
|
||||
let image3= workbook.addImage({
|
||||
base64: base64Image3,
|
||||
extension: 'png'
|
||||
});
|
||||
worksheet.addImage(image3, 'A71:AB105');
|
||||
const chart4 = echarts.getInstanceByDom(this.$refs.chart4)
|
||||
const base64Image4 = chart4.getDataURL({
|
||||
pixelRatio: 2,
|
||||
backgroundColor: '#fff'
|
||||
})
|
||||
let image4= workbook.addImage({
|
||||
base64: base64Image4,
|
||||
extension: 'png'
|
||||
});
|
||||
worksheet.addImage(image4, 'A106:AB140');
|
||||
workbook.xlsx.writeBuffer().then(function (buffer) { // 生成excel文件的二进制数据
|
||||
saveAs.saveAs(new Blob([buffer], { // 生成Blob对象
|
||||
type: 'application/octet-stream' // 指定文件的MIME类型
|
||||
}), 'xchart.xlsx'); // 指定文件名
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue