| | |
| | | <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="选择日期" |
| | | range-separator="至" size="small" start-placeholder="开始日期" type="daterange" style="width: 100%;" |
| | | value-format="yyyy-MM-dd" @change="changeDatePicker"> |
| | | <el-date-picker |
| | | 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"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="样品名称" prop="sampleName"> |
| | |
| | | <el-input v-model="modelName" clearable placeholder="请输入型号" size="small" @change="changeDate"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="供应商名称" prop="supplierName"> |
| | | <el-input v-model="supplierName" clearable placeholder="请输入供应商名称" size="small" |
| | | @change="changeDate"></el-input> |
| | | <el-input v-model="supplierName" clearable placeholder="请输入供应商名称" size="small" @change="changeDate"></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | </el-col> |
| | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="8"> |
| | | <div class="pie-card"> |
| | | <div class="title">原辅料合格率</div> |
| | | <span class="data">{{ passRate }}</span> |
| | | <Echarts ref="chart" :legend="pieLegend" :series="materialPieSeries" :tooltip="pieTooltip" |
| | | style="height: 36vh;"></Echarts> |
| | | <div class="title">原材料合格率</div> |
| | | <span class="data">{{passRate}}</span> |
| | | <Echarts ref="chart" |
| | | :legend="pieLegend" |
| | | :series="materialPieSeries" |
| | | :tooltip="pieTooltip" |
| | | style="height: 36vh;"></Echarts> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <div class="pie-card"> |
| | | <div class="title"><span style="color: #F56C6C">本月</span>检验类型数量</div> |
| | | <Echarts ref="chart" :chartStyle="chartStyle2" :legend="pieLegend" :series="materialPieSeries1" |
| | | :tooltip="pieTooltip" style="height: 36vh;"></Echarts> |
| | | <Echarts ref="chart" |
| | | :chartStyle="chartStyle2" |
| | | :legend="pieLegend" |
| | | :series="materialPieSeries1" |
| | | :tooltip="pieTooltip" |
| | | style="height: 36vh;"></Echarts> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <div class="pie-card"> |
| | | <div class="title">原辅料<span style="color: #F56C6C">本月</span>与<span style="color: #F56C6C">上月</span>合格率对比</div> |
| | | <Echarts ref="chart" :barColors="barColors2" :chartStyle="chartStyle" :grid="grid" :legend="barLegend" |
| | | :series="barSeries" :tooltip="tooltip" :xAxis="xAxis1" :yAxis="yAxis1" style="height: 36vh;"></Echarts> |
| | | <div class="title">原材料<span style="color: #F56C6C">本月</span>与<span style="color: #F56C6C">上月</span>合格率对比</div> |
| | | <Echarts ref="chart" |
| | | :barColors="barColors2" |
| | | :chartStyle="chartStyle" |
| | | :grid="grid" |
| | | :legend="barLegend" |
| | | :series="barSeries" |
| | | :tooltip="tooltip" |
| | | :xAxis="xAxis1" |
| | | :yAxis="yAxis1" |
| | | style="height: 36vh;"></Echarts> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | <el-col :span="24"> |
| | | <div class="inspection-card"> |
| | | <div class="title">合格率</div> |
| | | <Echarts ref="chart" :barColors="barColors" :grid="grid" :legend="legend" :lineColors="lineColors" |
| | | :options="echartsOptions" :series="echartsSeries" :tooltip="tooltip" :xAxis="xAxis" :yAxis="yAxis" |
| | | style="height: 40vh;"></Echarts> |
| | | <Echarts ref="chart" |
| | | :barColors="barColors" |
| | | :grid="grid" |
| | | :legend="legend" |
| | | :lineColors="lineColors" |
| | | :options="echartsOptions" |
| | | :series="echartsSeries" |
| | | :tooltip="tooltip" |
| | | :xAxis="xAxis" |
| | | :yAxis="yAxis" |
| | | style="height: 40vh;"></Echarts> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | export default { |
| | | name: "QualificationRateStatistics", |
| | | // import 引入的组件需要注入到对象中才能使用 |
| | | components: { Echarts }, |
| | | components: {Echarts}, |
| | | data() { |
| | | // 这里存放数据 |
| | | return { |
| | |
| | | containLabel: true |
| | | }, |
| | | legend: { |
| | | data: ['总数', '合格率'] |
| | | data: ['总数','合格率'] |
| | | }, |
| | | tooltip: { |
| | | trigger: 'axis', |
| | |
| | | this.xAxis[0].data = xAxis |
| | | }) |
| | | }, |
| | | // 获取原辅料合格率图表数据 |
| | | // 获取原材料合格率图表数据 |
| | | getRawPass() { |
| | | const params = { |
| | | dateType: this.dateType, |
| | |
| | | this.barSeries[0].data = barData |
| | | }) |
| | | }, |
| | | changeDate() { |
| | | changeDate () { |
| | | this.getBar() |
| | | this.getRawPass() |
| | | // this.getOrderType() |
| | | // this.getPassRateCom() |
| | | }, |
| | | changeDatePicker(val) { |
| | | changeDatePicker (val) { |
| | | if (val) { |
| | | this.beginDate = val[0] + ' 00:00:00' |
| | | this.endDate = val[1] + ' 23:59:59' |
| | |
| | | .title { |
| | | padding: 10px 0 0 20px; |
| | | } |
| | | |
| | | .table { |
| | | padding: 0 10px 10px; |
| | | } |
| | | |
| | | .pie-card { |
| | | width: 100%; |
| | | background: #FFFFFF; |
| | | margin-top: 10px; |
| | | position: relative; |
| | | } |
| | | |
| | | .data { |
| | | position: absolute; |
| | | font-size: 20px; |
| | |
| | | top: 42%; |
| | | z-index: 1; |
| | | } |
| | | |
| | | .inspection-card { |
| | | .inspection-card{ |
| | | width: 100%; |
| | | background: #FFFFFF; |
| | | margin-top: 10px; |