| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <el-row> |
| | | <el-col :span="4"> |
| | | <el-radio-group v-model="dateType" @change="changeDateType"> |
| | | <el-radio-button label="1">本周</el-radio-button> |
| | | <el-radio-button label="2">本月</el-radio-button> |
| | | <el-radio-button label="3">今年</el-radio-button> |
| | | </el-radio-group> |
| | | </el-col> |
| | | <!-- <el-col :span="4">--> |
| | | <!-- <el-radio-group v-model="dateType" @change="changeDateType">--> |
| | | <!-- <el-radio-button label="1">本周</el-radio-button>--> |
| | | <!-- <el-radio-button label="2">本月</el-radio-button>--> |
| | | <!-- <el-radio-button label="3">今年</el-radio-button>--> |
| | | <!-- </el-radio-group>--> |
| | | <!-- </el-col>--> |
| | | <el-col :span="20"> |
| | | <el-form ref="entity" size="small" :inline="true"> |
| | | <el-form-item style="width: 20%;"> |
| | | <el-date-picker v-model="datePicker" end-placeholder="结束日期" format="yyyy-MM-dd" placeholder="选择日期" |
| | | <el-date-picker :picker-options="pickerOptions" v-model="datePicker" end-placeholder="结束日期" format="yyyy-MM-dd" placeholder="选择日期" |
| | | range-separator="至" size="small" start-placeholder="开始日期" type="daterange" style="width: 100%;" |
| | | value-format="yyyy-MM-dd" @change="changeDatePicker"> |
| | | value-format="yyyy-MM-dd" clearable @change="changeDatePicker"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="样品名称" prop="sampleName"> |
| | |
| | | <el-form-item label="供应商名称" prop="supplierName"> |
| | | <el-input v-model="supplierName" clearable placeholder="请输入供应商名称" size="small" |
| | | @change="changeDate"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="IFS域" prop="contract"> |
| | | <el-select v-model="contract" clearable placeholder="请选择IFS域" size="small" |
| | | @change="changeDate"> |
| | | <el-option label="ZTNS" value="ZTNS"/> |
| | | <el-option label="KJNS" value="KJNS"/> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-form> |
| | | </el-col> |
| | |
| | | data() { |
| | | // 这里存放数据 |
| | | return { |
| | | pickerOptions: { |
| | | shortcuts: [{ |
| | | text: '最近一周', |
| | | onClick(picker) { |
| | | const end = new Date(); |
| | | const start = new Date(); |
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 6); |
| | | picker.$emit('pick', [start, end]); |
| | | } |
| | | }, { |
| | | text: '最近一个月', |
| | | onClick(picker) { |
| | | const end = new Date(); |
| | | const start = new Date(); |
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
| | | picker.$emit('pick', [start, end]); |
| | | } |
| | | }, { |
| | | text: '最近一年', |
| | | onClick(picker) { |
| | | const end = new Date(); |
| | | const start = new Date(); |
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 365); |
| | | picker.$emit('pick', [start, end]); |
| | | } |
| | | }] |
| | | }, |
| | | dateType: '1', |
| | | datePicker: [], |
| | | beginDate: '', |
| | | endDate: '', |
| | | sampleName: '', |
| | | contract: '', |
| | | modelName: '', |
| | | supplierName: '', |
| | | inspectionTitle: '原材料', |
| | |
| | | sum: '', |
| | | } |
| | | }, |
| | | |
| | | mounted() { |
| | | this.setBarChartTitle(); |
| | | this.getBar(); |
| | |
| | | this.getPassRateCom(); |
| | | this.getTableData(); |
| | | }, |
| | | |
| | | watch:{ |
| | | datePicker:{ |
| | | handler(newVal){ |
| | | //计算开始时间与结束时间的天数差 |
| | | if (newVal && newVal.length === 2) { |
| | | const startDate = new Date(newVal[0]); |
| | | const endDate = new Date(newVal[1]); |
| | | const timeDiff = endDate - startDate; |
| | | const dayDiff = timeDiff / (1000 * 3600 * 24); |
| | | if (dayDiff <= 7) { |
| | | this.dateType = '1'; |
| | | } else if (dayDiff > 7 && dayDiff <= 31) { |
| | | this.dateType = '2'; |
| | | } else if (dayDiff > 31) { |
| | | this.dateType = '3'; |
| | | } |
| | | }else{ |
| | | this.dateType = '1'; |
| | | } |
| | | }, immediate:true |
| | | } |
| | | }, |
| | | // 方法集合 |
| | | methods: { |
| | | // 获取合格率图表数据 |
| | |
| | | sampleName: this.sampleName, |
| | | modelName: this.modelName, |
| | | supplierName: this.supplierName, |
| | | contract:this.contract, |
| | | materialProp: t, |
| | | }; |
| | | return getRawPassRateByBarChart(params); |
| | |
| | | let lineData = []; |
| | | let xAxis = []; |
| | | |
| | | console.log(sortedDates) |
| | | sortedDates.forEach(date => { |
| | | const { qualified, unQualified } = dateMap[date]; |
| | | const total = qualified + unQualified; |
| | |
| | | this.echartsSeries[1].data = unQualifiedData; |
| | | this.echartsSeries[2].data = lineData; |
| | | this.xAxis[0].data = xAxis; |
| | | console.log(xAxis) |
| | | }); |
| | | }, |
| | | |
| | |
| | | sampleName: this.sampleName, |
| | | modelName: this.modelName, |
| | | supplierName: this.supplierName, |
| | | contract:this.contract, |
| | | materialProp: t |
| | | }; |
| | | return getRawPassRateByCake(params); |
| | |
| | | sampleName: this.sampleName, |
| | | modelName: this.modelName, |
| | | supplierName: this.supplierName, |
| | | contract:this.contract, |
| | | materialProp: t, |
| | | }; |
| | | return getMaterialPropTable(params); |