diff --git a/client/package.json b/client/package.json
index 749ca6b..2cb862a 100644
--- a/client/package.json
+++ b/client/package.json
@@ -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",
diff --git a/client/src/views/supervisionNew/statisticsGroup.vue b/client/src/views/supervisionNew/statisticsGroup.vue
index ec3dc8c..8b491bf 100644
--- a/client/src/views/supervisionNew/statisticsGroup.vue
+++ b/client/src/views/supervisionNew/statisticsGroup.vue
@@ -21,6 +21,11 @@
@click="handlePrint"
>打印
+ 导出
@@ -30,16 +35,16 @@
-
+
-
+
-
+
-
+
@@ -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'); // 指定文件名
+ });
+ }
}
};