|
|
|
|
@ -8,14 +8,14 @@
|
|
|
|
|
placeholder="选择月">
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="白坯名称" prop="materialName">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="queryParams.materialName"
|
|
|
|
|
placeholder="请输入白坯名称"
|
|
|
|
|
clearable
|
|
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- <el-form-item label="白坯名称" prop="materialName">-->
|
|
|
|
|
<!-- <el-input-->
|
|
|
|
|
<!-- v-model="queryParams.materialName"-->
|
|
|
|
|
<!-- placeholder="请输入白坯名称"-->
|
|
|
|
|
<!-- clearable-->
|
|
|
|
|
<!-- @keyup.enter.native="handleQuery"-->
|
|
|
|
|
<!-- />-->
|
|
|
|
|
<!-- </el-form-item>-->
|
|
|
|
|
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
|
|
@ -34,40 +34,84 @@
|
|
|
|
|
<el-form ref="form" :model="form" label-width="80px">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24" style="text-align:center">
|
|
|
|
|
<h2>{{form.column080090}} 年 {{form.column090100}} 月 份 黑 蚊 香 成 品 包 装 不 良 排 列 图</h2>
|
|
|
|
|
<h2>{{titleYear}} 年 {{titleMonth}} 月 份 黑 蚊 香 成 品 包 装 不 良 排 列 图</h2>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-descriptions title="" border :column="3" :contentStyle="content_style" :label-style="label_style">
|
|
|
|
|
<el-descriptions-item label="产品名称" class="my-description-item1">{{form.materialName}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="抽样数" class="my-description-item1">{{form.sampleQty}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="产品名称" class="my-description-item1">{{ProductName}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="抽样数" class="my-description-item1">{{sampleQty}}盒</el-descriptions-item>
|
|
|
|
|
|
|
|
|
|
<el-descriptions-item label="生产车间" class="my-description-item1">{{form.workCenter}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="不良品数" class="my-description-item1">{{form.noOkQty}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="生产车间" class="my-description-item1">{{workCenter}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="不良品数" class="my-description-item1">{{noOkQty}}盒</el-descriptions-item>
|
|
|
|
|
|
|
|
|
|
<el-descriptions-item label="不良率" class="my-description-item1">{{form.noOkNumRate}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="合格率" class="my-description-item1">{{form.okNumRate}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="不良率" class="my-description-item1">{{noOkNumRate}}</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="合格率" class="my-description-item1">{{okNumRate}}</el-descriptions-item>
|
|
|
|
|
</el-descriptions>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div id="echartss" style="width:1200px;height:450px;"></div>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
<el-tab-pane label="报表" name="second">
|
|
|
|
|
<el-table v-loading="loading" :data="itemProList" border>
|
|
|
|
|
<el-table-column label="序号" type="index" align="center" :index="indexMethod" fixed/>
|
|
|
|
|
<el-table-column label="项目" align="center" prop="dataType" min-width="100" fixed/>
|
|
|
|
|
<template v-for="(column, index) in showTitles">
|
|
|
|
|
<el-table-column align="center" min-width="120" :prop="column.id" :key="column.id" :label="column.titleName"/>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
<div id="echartss" style="width:1200px;height:500px;"></div>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
<el-tab-pane label="报表" name="second">
|
|
|
|
|
<div class="quality-table-container">
|
|
|
|
|
<table class="quality-table" id="exportTable">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<!-- 使用v-for循环遍历数据，将class_name作为表头 -->
|
|
|
|
|
<th>不良项目</th>
|
|
|
|
|
<th v-for="(item, index) in dataList" :key="index">{{ item.class_name }}</th>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<!-- 使用v-for循环遍历数据，将noOk_quality作为对应的值显示在第一行 -->
|
|
|
|
|
<th>不良品数</th>
|
|
|
|
|
<td v-for="(item, index) in dataList" :key="index">{{ item.noOk_quality }}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<!-- 使用v-for循环遍历数据，将rate作为显示在第二行 -->
|
|
|
|
|
<th>不良比例</th>
|
|
|
|
|
<td v-for="(item, index) in dataList" :key="index">{{ item.rate }}%</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<!-- 使用v-for循环遍历数据，将rate作为显示在第二行 -->
|
|
|
|
|
<th>累计不良比例</th>
|
|
|
|
|
<td v-for="(item, index) in dataList" :key="index">{{ item.rateAdd }}%</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <el-table :data="[tableData]" style="width: 100%">-->
|
|
|
|
|
<!-- <!– 动态生成表头和列数据 –>-->
|
|
|
|
|
<!-- <el-table-column-->
|
|
|
|
|
<!-- v-for="(value, key) in tableData"-->
|
|
|
|
|
<!-- :key="key"-->
|
|
|
|
|
<!-- :label="key"-->
|
|
|
|
|
<!-- :prop="key">-->
|
|
|
|
|
<!-- </el-table-column>-->
|
|
|
|
|
<!-- </el-table>-->
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
<!-- </el-tab-pane>-->
|
|
|
|
|
<!-- <el-tab-pane label="报表" name="second">-->
|
|
|
|
|
<!-- <el-table v-loading="loading" :data="itemProList" border>-->
|
|
|
|
|
<!--<!– <el-table-column label="设备编码" align="center" prop="equipmentCode" width="150"/>–>-->
|
|
|
|
|
|
|
|
|
|
<!-- <el-table-column label="项目" align="center" prop="dataType" min-width="100" fixed>-->
|
|
|
|
|
<!-- <template v-for="(column, index) in showTitles">-->
|
|
|
|
|
<!-- <el-table-column align="center" min-width="120" :prop="column.id" :key="column.id" :label="column.class_name"/>-->
|
|
|
|
|
<!-- </template>-->
|
|
|
|
|
<!-- </el-table-column>-->
|
|
|
|
|
<!-- </el-table>-->
|
|
|
|
|
|
|
|
|
|
</el-tabs>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {getDefectItemTitle,getDefectItemData,getDefectItemLine} from "@/api/quality/qcTable";
|
|
|
|
|
import {getHWXCPBZTitle,getDefectItemData,getDefectItemLine} from "@/api/quality/qcTable";
|
|
|
|
|
import moment from 'moment';
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
import * as XLSX from "xlsx";
|
|
|
|
|
import FileSaver from 'file-saver'
|
|
|
|
|
export default {
|
|
|
|
|
name: "CpSortChart",
|
|
|
|
|
data() {
|
|
|
|
|
@ -83,10 +127,12 @@ export default {
|
|
|
|
|
// 显示搜索条件
|
|
|
|
|
showSearch: true,
|
|
|
|
|
// 备料单表格数据
|
|
|
|
|
itemProList: [],
|
|
|
|
|
dataList: [],
|
|
|
|
|
tableData: {},
|
|
|
|
|
activeName: 'first',
|
|
|
|
|
showTitles:[],//列表展示的小时段
|
|
|
|
|
|
|
|
|
|
showTitles:[],//列表展示的小时段
|
|
|
|
|
rate:[],
|
|
|
|
|
rateAdd:[],
|
|
|
|
|
// 弹出层标题
|
|
|
|
|
title: "",
|
|
|
|
|
// 是否显示弹出层
|
|
|
|
|
@ -113,6 +159,14 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
// 表单参数
|
|
|
|
|
form: {},
|
|
|
|
|
titleYear: null,
|
|
|
|
|
titleMonth: null,
|
|
|
|
|
ProductName: null,
|
|
|
|
|
sampleQty: null,
|
|
|
|
|
workCenter: null,
|
|
|
|
|
noOkQty: null,
|
|
|
|
|
noOkNumRate: null,
|
|
|
|
|
okNumRate:null,
|
|
|
|
|
// 班次list
|
|
|
|
|
workShift: [],
|
|
|
|
|
equipmentTypeOption:[
|
|
|
|
|
@ -139,8 +193,11 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getDate();
|
|
|
|
|
this.getList();
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
/**获取默认查询时间段**/
|
|
|
|
|
getDate() {
|
|
|
|
|
@ -155,11 +212,13 @@ export default {
|
|
|
|
|
return y + "-" + m ;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/** 查询设备小时产量列表 */
|
|
|
|
|
/** 查询表头内容 */
|
|
|
|
|
getList() {
|
|
|
|
|
console.log(this.queryParams);
|
|
|
|
|
|
|
|
|
|
if(this.queryParams.yearMonthDate!=null){
|
|
|
|
|
this.queryParams.yearMonth = moment(this.queryParams.yearMonthDate).format('YYYY-MM');
|
|
|
|
|
this.titleYear = this.queryParams.yearMonth.split('-')[0];
|
|
|
|
|
this.titleMonth = this.queryParams.yearMonth.split('-')[1];
|
|
|
|
|
}else{
|
|
|
|
|
this.$message.error("请填写月份");
|
|
|
|
|
return
|
|
|
|
|
@ -170,21 +229,32 @@ export default {
|
|
|
|
|
|
|
|
|
|
this.loading = true;
|
|
|
|
|
//获取Table表头
|
|
|
|
|
getDefectItemTitle(this.queryParams).then(response => {
|
|
|
|
|
this.showTitles = [];
|
|
|
|
|
for(let i=0;i<=response.length-1;i++){
|
|
|
|
|
var pobj={};
|
|
|
|
|
pobj.id="item"+i;
|
|
|
|
|
pobj.titleName = response[i];
|
|
|
|
|
this.showTitles.push(pobj)
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
//获取Table数据
|
|
|
|
|
getDefectItemData(this.queryParams).then(response => {
|
|
|
|
|
this.itemProList = response;
|
|
|
|
|
this.getTbody();
|
|
|
|
|
this.loading = false;
|
|
|
|
|
});
|
|
|
|
|
getHWXCPBZTitle(this.queryParams)
|
|
|
|
|
.then(response => {
|
|
|
|
|
this.ProductName = response.ProductName;
|
|
|
|
|
this.workCenter = response.workCenter;
|
|
|
|
|
this.sampleQty = response.sampleQty;
|
|
|
|
|
this.noOkQty = response.noOKQtyTotal;
|
|
|
|
|
this.noOkNumRate = response.noOkNumRate;
|
|
|
|
|
this.okNumRate = response.okNumRate;
|
|
|
|
|
this.dataList = response.classNameMap
|
|
|
|
|
.sort((a, b) => b.rate - a.rate)
|
|
|
|
|
.reduce((acc, item) => {
|
|
|
|
|
const sum = (acc.length > 0 ? acc[acc.length - 1].rateAdd : 0) + item.rate;
|
|
|
|
|
const rateAdd = Number(sum.toFixed(2));
|
|
|
|
|
acc.push({ ...item, rateAdd });
|
|
|
|
|
return acc;
|
|
|
|
|
}, []);
|
|
|
|
|
this.showTitles = this.dataList ? this.dataList.map(item => item.class_name) : [];
|
|
|
|
|
this.rate = this.dataList ? this.dataList.map(item => item.rate) : [];
|
|
|
|
|
this.rateAdd = this.dataList ? this.dataList.map(item => item.rateAdd) : [];
|
|
|
|
|
// 数据处理完成后调用 initChart
|
|
|
|
|
this.loading = true;
|
|
|
|
|
this.initChart();
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.error('数据请求失败', error);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 取消按钮
|
|
|
|
|
@ -238,10 +308,18 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/** 导出按钮操作 */
|
|
|
|
|
handleExport() {
|
|
|
|
|
this.download('quality/staticTable/getDefectItemDataExport', {
|
|
|
|
|
...this.queryParams
|
|
|
|
|
}, `bpDefectItem_${new Date().getTime()}.xlsx`)
|
|
|
|
|
async handleExport() {
|
|
|
|
|
this.exportLoading = true;
|
|
|
|
|
const table = document.querySelector('#exportTable').cloneNode(true)
|
|
|
|
|
// 删除fixed区域避免重复内容
|
|
|
|
|
if (table.querySelector('.el-table__fixed')) {
|
|
|
|
|
table.removeChild(table.querySelector('.el-table__fixed')) // :ml-citation{ref="3,8" data="citationList"}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const wb = XLSX.utils.table_to_book(table, { raw: true })
|
|
|
|
|
const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
|
|
|
|
|
FileSaver.saveAs(new Blob([wbout]), '黑蚊香成品排列明细.xlsx') // :ml-citation{ref="4,7" data="citationList"}
|
|
|
|
|
this.exportLoading = false;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -250,88 +328,119 @@ export default {
|
|
|
|
|
this.$refs.tables.doLayout()//对table进行重新布局
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
async getTbody(){
|
|
|
|
|
this.loading=true
|
|
|
|
|
this.$nextTick(()=>{
|
|
|
|
|
this.$refs.tables.doLayout()//对table进行重新布局
|
|
|
|
|
})
|
|
|
|
|
let _this = this
|
|
|
|
|
getDefectItemLine(this.queryParams).then(response => {
|
|
|
|
|
_this.form = response;
|
|
|
|
|
_this.getEcharts(response.supplierCodes,response.columns1,response.columns2)
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
getEcharts(xData,yDataLeft,yDdataRight){
|
|
|
|
|
var _this=this
|
|
|
|
|
var chartDom = document.getElementById('echartss');
|
|
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
|
var option;
|
|
|
|
|
option = {
|
|
|
|
|
async initChart() {
|
|
|
|
|
var chartDom = document.getElementById('echartss');
|
|
|
|
|
if (!chartDom) {
|
|
|
|
|
console.error('图表容器不存在');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
|
var option = {
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: 'cross',
|
|
|
|
|
crossStyle: {
|
|
|
|
|
color: '#999'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
toolbox: {
|
|
|
|
|
feature: {
|
|
|
|
|
// dataView: { show: true, readOnly: false },
|
|
|
|
|
// magicType: { show: true, type: ['line', 'bar'] },
|
|
|
|
|
// restore: { show: true },
|
|
|
|
|
saveAsImage: { show: true }
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
data: ['不良比例','累计不良比例']
|
|
|
|
|
},
|
|
|
|
|
xAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: 'category',
|
|
|
|
|
data: this.showTitles,
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: 'shadow'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
yAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: 'value',
|
|
|
|
|
name: '不良比例',
|
|
|
|
|
min: 0,
|
|
|
|
|
max: 100,
|
|
|
|
|
interval: 50,
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter: '{value} %'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'value',
|
|
|
|
|
name: '累计不良比例',
|
|
|
|
|
min: 0,
|
|
|
|
|
max: 100,
|
|
|
|
|
interval: 5,
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter: '{value} %'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '不良比例',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: 'cross',
|
|
|
|
|
crossStyle: {
|
|
|
|
|
color: '#999'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
return value + ' %';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
data: ['不良率', '累计不良率']
|
|
|
|
|
data: this.rate,
|
|
|
|
|
label: {
|
|
|
|
|
show: true, // 启用数值显示
|
|
|
|
|
position: 'top', // 数值显示在柱顶
|
|
|
|
|
formatter: '{c}%',
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: 14, // 字体大小
|
|
|
|
|
fontWeight: 'bold', // 加粗
|
|
|
|
|
color: 'blue' // 字体颜色
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '累计不良比例',
|
|
|
|
|
type: 'line',
|
|
|
|
|
yAxisIndex: 1,
|
|
|
|
|
tooltip: {
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
return value + ' %';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
data: xData//['断片', '断裂', '变形', '干料', '杂质']
|
|
|
|
|
},
|
|
|
|
|
yAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: 'value',
|
|
|
|
|
name: '不良率(%)',
|
|
|
|
|
min: 0,
|
|
|
|
|
max: 100,
|
|
|
|
|
interval: 5,
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter: '{value} %'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'value',
|
|
|
|
|
name: '累计不良率',
|
|
|
|
|
min: 0,
|
|
|
|
|
//max: 100,
|
|
|
|
|
interval: 20,
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter: '{value} %'
|
|
|
|
|
}
|
|
|
|
|
data: this.rateAdd,
|
|
|
|
|
label: {
|
|
|
|
|
show: true, // 启用数值显示
|
|
|
|
|
position: 'top', // 数值显示在柱顶
|
|
|
|
|
// formatter: '{c}%',
|
|
|
|
|
formatter: function (index) {
|
|
|
|
|
console.log(index)
|
|
|
|
|
if (index.dataIndex == 0) {
|
|
|
|
|
return '';
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '不良率',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
data: yDataLeft, //[15, 10, 8, 5, 2],
|
|
|
|
|
label: {
|
|
|
|
|
show: true, // 开启显示
|
|
|
|
|
position: 'top', // 显示位置，可以是'top', 'bottom', 'left', 'right'等
|
|
|
|
|
formatter: '{c}%' // {c} 表示系列中的当前数据值
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '累计不良率',
|
|
|
|
|
type: 'line',
|
|
|
|
|
yAxisIndex: 1,
|
|
|
|
|
data: yDdataRight //[15, 25, 33, 38, 40]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
return index.data + '%';
|
|
|
|
|
},
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: 14, // 字体大小
|
|
|
|
|
fontWeight: 'bold', // 加粗
|
|
|
|
|
color: 'blue' // 字体颜色
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 生成表头序号
|
|
|
|
|
indexMethod(index) {
|
|
|
|
|
return index + 1;
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
@ -339,4 +448,44 @@ export default {
|
|
|
|
|
.my-description-item1 {
|
|
|
|
|
width: 200px; /* 或者你想要的任何宽度 */
|
|
|
|
|
}
|
|
|
|
|
.quality-table-container {
|
|
|
|
|
padding: 20px;
|
|
|
|
|
font-family: 'Arial', sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.quality-table {
|
|
|
|
|
width: 100%;
|
|
|
|
|
border-collapse: collapse; /* 合并边框为单线条 */
|
|
|
|
|
border: 1px solid #e0e0e0;
|
|
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.quality-table th,
|
|
|
|
|
.quality-table td {
|
|
|
|
|
padding: 12px 15px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border: 1px solid #e0e0e0; /* 统一单元格边框 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.quality-table thead th {
|
|
|
|
|
background-color: #f5f7fa;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.quality-table tbody th {
|
|
|
|
|
background-color: #f9f9f9;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
text-align: left;
|
|
|
|
|
min-width: 120px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.quality-table tbody tr:nth-child(even) {
|
|
|
|
|
background-color: #fafafa;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.quality-table td:hover {
|
|
|
|
|
background-color: #f0f7ff;
|
|
|
|
|
transition: background-color 0.2s;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
