zcdsj
/
cma_search
mirror of https://e.coding.net/ctcdevteam/cma_search.git
5
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fixd:集团统计导出及图标配色修改

This commit is contained in:
shijing 2023-08-08 09:03:01 +08:00
parent c485a259ad
commit fe4bcbf607
2 changed files with 115 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/package.json
View File

@ -20,6 +20,7 @@
"echarts": "^5.4.0", "echarts": "^5.4.0",
"element-china-area-data": "^5.0.2", "element-china-area-data": "^5.0.2",
"element-ui": "^2.15.13", "element-ui": "^2.15.13",
"exceljs": "^4.3.0",
"file-saver": "^2.0.2", "file-saver": "^2.0.2",
"js-cookie": "2.2.0", "js-cookie": "2.2.0",
"normalize.css": "7.0.0", "normalize.css": "7.0.0",

125
client/src/views/supervisionNew/statisticsGroup.vue
View File

@ -21,6 +21,11 @@
@click="handlePrint" @click="handlePrint"
>打印</el-button >打印</el-button
> >
<el-button
type="primary"
@click="exportExcel"
>导出</el-button
>
</el-row> </el-row>
</el-card> </el-card>
<el-card style="margin-top:10px"> <el-card style="margin-top:10px">
@ -30,16 +35,16 @@
<!-- 5个目标值 --> <!-- 5个目标值 -->
<el-row id="echartsContainer"> <el-row id="echartsContainer">
<el-col class="chartsWraps"> <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>
<el-col class="chartsWraps"> <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>
<el-col class="chartsWraps"> <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>
<el-col class="chartsWraps"> <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-col>
</el-row> </el-row>
</div> </div>
@ -50,6 +55,8 @@
import { taskAnalyse } from "@/api/task"; import { taskAnalyse } from "@/api/task";
import checkPermission from "@/utils/permission"; import checkPermission from "@/utils/permission";
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import ExcelJS from 'exceljs'; // 引入exceljs, 用于生成excel文件
import { saveAs } from 'file-saver'
export default { export default {
data() { data() {
return { return {
@ -107,7 +114,7 @@
type: 'category', type: 'category',
data: [], data: [],
}, },
color:['#438af4','#91cc75','#ff0000'], color:['#c9caca','#007dcd','#000000'],
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel:{ axisLabel:{
@ -124,6 +131,10 @@
barGap: 0, barGap: 0,
barWidth:10, barWidth:10,
data: [], data: [],
label: {
show: true,
position: 'top'
},
markLine : { markLine : {
symbol:"none", symbol:"none",
label: { label: {
@ -134,12 +145,12 @@
silent:false, //鼠标悬停事件 true没有，false有 silent:false, //鼠标悬停事件 true没有，false有
lineStyle:{ //警戒线的样式 ，虚实 颜色 lineStyle:{ //警戒线的样式 ，虚实 颜色
type:"solid", type:"solid",
color:"#ff0000", color:"#000000",
}, },
label:{ label:{
position:'end', position:'end',
formatter:'{c}', formatter:'{c}',
color:"#ff0000", color:"#000000",
fontSize:'8' fontSize:'8'
}, },
name:'', name:'',
@ -152,6 +163,10 @@
name: '单位目标值', name: '单位目标值',
type: 'bar', type: 'bar',
barWidth:10, barWidth:10,
label: {
show: true,
position: 'top'
},
data: [] data: []
}, },
{ {
@ -217,13 +232,25 @@
data42.push(item4.客户投诉处理满意率设定值) data42.push(item4.客户投诉处理满意率设定值)
}) })
markLine4 = sortedArr4[0].客户投诉处理满意率基础值; markLine4 = sortedArr4[0].客户投诉处理满意率基础值;
console.log(data1,data2,data3)
let option1 =that.option; let option1 =that.option;
let option2 =that.option; let option2 =that.option;
let option3=that.option; let option3=that.option;
let option4= that.option; let option4= that.option;
option1.xAxis.data = xaxis1; 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.series[1].data = data12;
option1.title.text = '报告/证书合格率'; option1.title.text = '报告/证书合格率';
option1.series[0].markLine.data[0].yAxis = markLine1; option1.series[0].markLine.data[0].yAxis = markLine1;
@ -231,7 +258,15 @@
that.barChart1.setOption(option1); that.barChart1.setOption(option1);
option2.xAxis.data = xaxis2; 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.series[1].data = data22;
option2.title.text = '报告/证书及时率'; option2.title.text = '报告/证书及时率';
option2.series[0].markLine.data[0].yAxis = markLine2; option2.series[0].markLine.data[0].yAxis = markLine2;
@ -239,7 +274,15 @@
that.barChart2.setOption(option2); that.barChart2.setOption(option2);
option3.xAxis.data = xaxis3; 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.series[1].data = data32;
option3.title.text = '能力验证满意率'; option3.title.text = '能力验证满意率';
option3.series[0].markLine.data[0].yAxis = markLine3; option3.series[0].markLine.data[0].yAxis = markLine3;
@ -247,7 +290,15 @@
that.barChart3.setOption(option3); that.barChart3.setOption(option3);
option4.xAxis.data = xaxis4; 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.series[1].data = data42;
option4.title.text = '客户投诉处理满意率'; option4.title.text = '客户投诉处理满意率';
option4.series[0].markLine.data[0].yAxis = markLine4; option4.series[0].markLine.data[0].yAxis = markLine4;
@ -255,6 +306,58 @@
that.barChart4.setOption(option4); 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> </script>