| | |
| | | <el-card> |
| | | <el-form :rules="rules" ref="formInline" :inline="true" |
| | | :model="formInline" class="demo-form-inline"> |
| | | <el-form-item prop="date"> |
| | | <p><span>*</span>检测日期:</p> |
| | | <el-form-item prop="date" label="检测日期:"> |
| | | <el-date-picker |
| | | size="small" |
| | | v-model="formInline.date" |
| | | format="yyyy-MM-dd" |
| | | value-format="yyyy-MM-dd" |
| | |
| | | end-placeholder="结束日期"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item prop="type"> |
| | | <p><span>*</span>检验类型:</p> |
| | | <el-select v-model="formInline.type" placeholder="采购入库"> |
| | | <el-form-item prop="type" label="检验类型:"> |
| | | <el-select size="small" v-model="formInline.type" placeholder="采购入库"> |
| | | <el-option label="原材料" value="0"></el-option> |
| | | <el-option label="成品" value="1"></el-option> |
| | | <el-option label="委托品" value="2"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item class="buttons"> |
| | | <el-button @click="resetForm('formInline')">清空</el-button> |
| | | <el-button type="primary" @click="onSubmit('formInline')">查询</el-button> |
| | | <el-button size="small" @click="resetForm('formInline')">清空</el-button> |
| | | <el-button size="small" type="primary" @click="onSubmit('formInline')">查询</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </el-card> |
| | |
| | | </el-row> |
| | | </div> |
| | | <div class="work-foot"> |
| | | <el-button type="primary">数据导出</el-button> |
| | | <el-button size="small" type="primary">数据导出</el-button> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | } |
| | | }, |
| | | mounted(){ |
| | | // this.initLeaderStatiChart(""); |
| | | this.initLeaderTimelyChart("leaderTimely"); |
| | | this.initTesterStatiChart("testerStati"); |
| | | this.initTesterTimelyChart("testerTimely"); |
| | | this.queryData(); |
| | | }, |
| | | methods: { |
| | | async queryData(){ |
| | | let date = this.formInline.date; |
| | | let date = []; |
| | | let type; |
| | | if(this.formInline.date == null || this.formInline.date == ""){ |
| | | let currentDate = new Date(); |
| | | let year = currentDate.getFullYear(); |
| | | let month = currentDate.getMonth() + 1; |
| | | let day = currentDate.getDate(); |
| | | date.push(year +"-" + month + "-01"); |
| | | date.push(year +"-" + month + "-" + day); |
| | | type = 0; |
| | | }else{ |
| | | date = this.formInline.date; |
| | | type = this.formInline.type; |
| | | } |
| | | let obj = { |
| | | startTime : date[0], |
| | | endTime : date[1], |
| | | type : this.formInline.type |
| | | type : type |
| | | } |
| | | const dutyMater = await getDutyMater(obj); |
| | | const dutyTimely = await getDutyTimely(obj); |
| | | const executeMater = await getExecuteMater(obj); |
| | | const executeTimely = await getExecuteTimely(obj); |
| | | console.log("dm",dutyMater.data); |
| | | console.log("dt",dutyTimely.data); |
| | | console.log("em",executeMater.data.length); |
| | | console.log("et",executeTimely.data); |
| | | this.initLeaderStatiChart("leaderStati",dutyMater.data); |
| | | this.initLeaderTimelyChart("leaderTimely",dutyTimely.data); |
| | | this.initTesterStatiChart("testerStati",executeMater.data); |
| | |
| | | series: [ |
| | | { |
| | | name: '已完成', |
| | | barWidth: '20%', |
| | | barWidth: '30%', |
| | | type: 'bar', |
| | | stack: 'one', |
| | | emphasis: emphasisStyle, |
| | |
| | | option && myChart.setOption(option); |
| | | }, |
| | | initTesterStatiChart(id,executeMater){ |
| | | console.log("qqq----",executeMater); |
| | | var chartDom = document.getElementById(id); |
| | | var myChart = echarts.init(chartDom); |
| | | window.addEventListener('resize', function() { |
| | | myChart.resize(); |
| | | }); |
| | | var option; |
| | | |
| | | let max = 0; |
| | | let xAxisData = []; |
| | | let data1 = []; |
| | | let data2 = []; |
| | | // for(let i=0;i<executeMater.length;i++){ |
| | | // xAxisData.push(executeMater[i].name); |
| | | // data1.push(executeMater[i].finsh); |
| | | // data2.push(executeMater[i].unfinsh); |
| | | // } |
| | | for(let i=0;i<executeMater.length;i++){ |
| | | xAxisData.push(executeMater[i].name); |
| | | data1.push(executeMater[i].finsh); |
| | | data2.push(executeMater[i].unfinsh); |
| | | let sum = executeMater[i].finsh + executeMater[i].unfinsh; |
| | | if(sum > max){ |
| | | max = sum; |
| | | } |
| | | } |
| | | var emphasisStyle = { |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | |
| | | }, |
| | | yAxis: { |
| | | min: 0, |
| | | max: 60, |
| | | interval: 10, |
| | | max: max, |
| | | interval: 1, |
| | | }, |
| | | grid: { |
| | | bottom: 100 |
| | |
| | | name: '数据1', |
| | | type: 'bar', |
| | | stack: 'one', |
| | | barWidth: '30%', |
| | | emphasis: emphasisStyle, |
| | | data: data1, |
| | | itemStyle:{ |
| | |
| | | name: '数据2', |
| | | type: 'bar', |
| | | stack: 'one', |
| | | barWidth: '30%', |
| | | emphasis: emphasisStyle, |
| | | data: data2, |
| | | itemStyle:{ |
| | |
| | | myChart.resize(); |
| | | }); |
| | | var option; |
| | | let xAxisData = []; |
| | | let data1 = []; |
| | | let data2 = []; |
| | | let yAxisData1 = 0; |
| | | for(let i=0;i<dutyTimely.length;i++){ |
| | | xAxisData.push(dutyTimely[i].name); |
| | | data1.push(dutyTimely[i].total); |
| | | data2.push(dutyTimely[i].timely); |
| | | if(dutyTimely[i].total > yAxisData1){ |
| | | yAxisData1 = dutyTimely[i].total; |
| | | } |
| | | } |
| | | option = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | |
| | | { |
| | | name: '姓名', |
| | | type: 'category', |
| | | data: ['沐秋',], |
| | | data: xAxisData, |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | }, |
| | | itemStyle: { |
| | | top: '20px' |
| | | nameTextStyle:{ |
| | | padding:20 |
| | | } |
| | | } |
| | | ], |
| | |
| | | type: 'value', |
| | | name: '数量', |
| | | min: 0, |
| | | max: 10, |
| | | max: yAxisData1, |
| | | interval: 1, |
| | | axisLabel: { |
| | | formatter: '{value}' |
| | |
| | | { |
| | | name: '样品数', |
| | | type: 'bar', |
| | | barWidth: '20%', |
| | | barWidth: '30%', |
| | | tooltip: { |
| | | valueFormatter: function (value) { |
| | | return value; |
| | | } |
| | | }, |
| | | data: [4.0], |
| | | data: data1, |
| | | itemStyle: { |
| | | color: '#9fceff' |
| | | } |
| | |
| | | { |
| | | name: '完成及时率', |
| | | type: 'line', |
| | | yAxisIndex: 1, |
| | | tooltip: { |
| | | valueFormatter: function (value) { |
| | | return value + ' %'; |
| | | } |
| | | }, |
| | | data: [7.5], |
| | | data: data2, |
| | | itemStyle: { |
| | | color: '#d2eec5' |
| | | } |
| | | }, |
| | | ] |
| | | }; |
| | | |
| | | option && myChart.setOption(option); |
| | | }, |
| | | initTesterTimelyChart(id,executeTimely){ |
| | |
| | | myChart.resize(); |
| | | }); |
| | | var option; |
| | | let xAxisData = []; |
| | | let data1 = []; |
| | | let data2 = []; |
| | | let yAxisData1 = 0; |
| | | for(let i=0;i<executeTimely.length;i++){ |
| | | xAxisData.push(executeTimely[i].name); |
| | | data1.push(executeTimely[i].total); |
| | | data2.push(executeTimely[i].timely); |
| | | if(executeTimely[i].total > yAxisData1){ |
| | | yAxisData1 = executeTimely[i].total; |
| | | } |
| | | } |
| | | option = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | |
| | | xAxis: [ |
| | | { |
| | | type: 'category', |
| | | data: ["","",""], |
| | | data: xAxisData, |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | } |
| | |
| | | type: 'value', |
| | | name: '', |
| | | min: 0, |
| | | max: 50, |
| | | interval: 5, |
| | | max: yAxisData1, |
| | | interval: 1, |
| | | axisLabel: { |
| | | formatter: '{value}' |
| | | } |
| | |
| | | { |
| | | name: '项目数', |
| | | type: 'bar', |
| | | barWidth: '30%', |
| | | tooltip: { |
| | | valueFormatter: function (value) { |
| | | return value ; |
| | | } |
| | | }, |
| | | data: [2.0, 4.9, 7.0], |
| | | data: data1, |
| | | itemStyle: { |
| | | color: '#5087ec' |
| | | } |
| | |
| | | return value + ' %'; |
| | | } |
| | | }, |
| | | data: [2.0, 2.2, 3.3], |
| | | data: data2, |
| | | itemStyle: { |
| | | color: '#68bbc4' |
| | | } |
| | |
| | | z-index: 10; |
| | | .demo-form-inline{ |
| | | margin: 0px 10px; |
| | | p{ |
| | | margin: 0; |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | span{ |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | color: red; |
| | | } |
| | | } |
| | | .buttons{ |
| | | margin: 40px 0px 0px 50%; |
| | | margin-left: 10%; |
| | | } |
| | | } |
| | | } |
| | | .work-center{ |
| | | margin: 0px 0px 150px 10px; |
| | | padding: 18vh 0px 5px 0px; |
| | | padding: 13vh 0px 5px 0px; |
| | | .el-card{ |
| | | margin: 5px 0px; |
| | | height:500px; |