|
|
|
|
@ -93,7 +93,27 @@
|
|
|
|
|
</el-container> |
|
|
|
|
</div> |
|
|
|
|
</datav-card> |
|
|
|
|
<datav-card title="业务满意率"></datav-card> |
|
|
|
|
<div style="background-color:#04144E; "> |
|
|
|
|
<h3 style="color: white">业务满意率</h3> |
|
|
|
|
<el-table |
|
|
|
|
:data="tableData" |
|
|
|
|
height="300" |
|
|
|
|
:summary-cell-style="summaryCellStyle" |
|
|
|
|
:summary-method="getSummaries" |
|
|
|
|
:style="{ width: '100%', marginTop: '20px', fontSize: fontSize + 'px' }" |
|
|
|
|
:header-cell-style="headerCellStyle" |
|
|
|
|
:row-style="tableRowStyle" |
|
|
|
|
|
|
|
|
|
:show-summary='true' |
|
|
|
|
> |
|
|
|
|
<el-table-column prop="id" label="单项业务"/> |
|
|
|
|
<el-table-column prop="name" label="有效数"/> |
|
|
|
|
<el-table-column prop="amount1" label="基本满意数"/> |
|
|
|
|
<el-table-column prop="amount2" label="不满意数"/> |
|
|
|
|
<el-table-column prop="amount3" label="满意率"/> |
|
|
|
|
<el-table-column prop="amount3" label="同比"/> |
|
|
|
|
</el-table> |
|
|
|
|
</div> |
|
|
|
|
</el-col> |
|
|
|
|
|
|
|
|
|
<el-col :span="12"> |
|
|
|
|
@ -405,6 +425,61 @@ const option3 = {
|
|
|
|
|
} |
|
|
|
|
}] |
|
|
|
|
}; |
|
|
|
|
const fontSize = ref(11) |
|
|
|
|
const headerCellStyle = ref({ |
|
|
|
|
fontSize: '11px', /* 设置表头字体大小 */ |
|
|
|
|
color: '#24D2EE', /* 设置表头字体颜色 */ |
|
|
|
|
backgroundColor: '#04144E', /* 设置表头背景颜色 */ |
|
|
|
|
height: '15px', /* 设置表头高度 */ |
|
|
|
|
padding: '0 0 0 0', /* 设置表头内边距 */ |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const tableRowStyle = (row) => { |
|
|
|
|
return { |
|
|
|
|
backgroundColor: '#04144E', |
|
|
|
|
color: "#FFFFFF" |
|
|
|
|
}; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 自定义总合行样式 |
|
|
|
|
const summaryCellStyle = () => { |
|
|
|
|
return { |
|
|
|
|
backgroundColor: '#04144E', |
|
|
|
|
color: "#FFFFFF" |
|
|
|
|
}; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 定义汇总方法 |
|
|
|
|
const getSummaries = (param) => { |
|
|
|
|
const {columns, data} = param; |
|
|
|
|
const sums = []; |
|
|
|
|
columns.forEach((column, index) => { |
|
|
|
|
if (index === 0) { |
|
|
|
|
sums[index] = '总计'; |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
const values = data.map(item => Number(item[column.property])); |
|
|
|
|
if (!values.every(value => isNaN(value))) { |
|
|
|
|
sums[index] = values.reduce((prev, curr) => { |
|
|
|
|
const value = Number(curr); |
|
|
|
|
if (!isNaN(value)) { |
|
|
|
|
return prev + curr; |
|
|
|
|
} else { |
|
|
|
|
return prev; |
|
|
|
|
} |
|
|
|
|
}, 0); |
|
|
|
|
sums[index] += ''; |
|
|
|
|
} else { |
|
|
|
|
sums[index] = 'N/A'; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
return sums; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// region 调查情况 |
|
|
|
|
const overview = ref({ |
|
|
|
|
total: 0, |
|
|
|
|
@ -485,7 +560,51 @@ const colors = [
|
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const tableData = [ |
|
|
|
|
{ |
|
|
|
|
id: '12987122', |
|
|
|
|
name: 'Tom', |
|
|
|
|
amount1: '234', |
|
|
|
|
amount2: '3.2', |
|
|
|
|
amount3: 10, |
|
|
|
|
}, { |
|
|
|
|
id: '12987122', |
|
|
|
|
name: 'Tom', |
|
|
|
|
amount1: '234', |
|
|
|
|
amount2: '3.2', |
|
|
|
|
amount3: 10, |
|
|
|
|
}, { |
|
|
|
|
id: '12987122', |
|
|
|
|
name: 'Tom', |
|
|
|
|
amount1: '234', |
|
|
|
|
amount2: '3.2', |
|
|
|
|
amount3: 10, |
|
|
|
|
}, { |
|
|
|
|
id: '12987122', |
|
|
|
|
name: 'Tom', |
|
|
|
|
amount1: '234', |
|
|
|
|
amount2: '3.2', |
|
|
|
|
amount3: 10, |
|
|
|
|
}, { |
|
|
|
|
id: '12987122', |
|
|
|
|
name: 'Tom', |
|
|
|
|
amount1: '234', |
|
|
|
|
amount2: '3.2', |
|
|
|
|
amount3: 10, |
|
|
|
|
}, { |
|
|
|
|
id: '12987122', |
|
|
|
|
name: 'Tom', |
|
|
|
|
amount1: '234', |
|
|
|
|
amount2: '3.2', |
|
|
|
|
amount3: 10, |
|
|
|
|
}, { |
|
|
|
|
id: '12987122', |
|
|
|
|
name: 'Tom', |
|
|
|
|
amount1: '234', |
|
|
|
|
amount2: '3.2', |
|
|
|
|
amount3: 10, |
|
|
|
|
}, |
|
|
|
|
] |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -519,5 +638,20 @@ const colors = [
|
|
|
|
|
height: 118px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.custom-footer-row { |
|
|
|
|
background-color:#FB3131; |
|
|
|
|
font-weight: bold; |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.custom-footer-cell { |
|
|
|
|
text-align: center; |
|
|
|
|
padding: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style> |