From 809f8b1279bf84f28bccabc4f95a8eba6c22a24d Mon Sep 17 00:00:00 2001
From: Fixiaobai <fixiaobai@163.com>
Date: 星期二, 29 八月 2023 10:30:04 +0800
Subject: [PATCH] 放行委托新增
---
src/views/chart/work/index.vue | 459 +++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 392 insertions(+), 67 deletions(-)
diff --git a/src/views/chart/work/index.vue b/src/views/chart/work/index.vue
index 59b9b32..d958e62 100644
--- a/src/views/chart/work/index.vue
+++ b/src/views/chart/work/index.vue
@@ -4,27 +4,31 @@
<el-row :gutter="10">
<el-col :span="24">
<el-card>
- <el-form :inline="true" :model="formInline" class="demo-form-inline">
- <el-form-item>
+ <el-form :rules="rules" ref="formInline" :inline="true"
+ :model="formInline" class="demo-form-inline">
+ <el-form-item prop="date">
<p><span>*</span>妫�娴嬫棩鏈�:</p>
<el-date-picker
- v-model="dateTime"
+ v-model="formInline.date"
+ format="yyyy-MM-dd"
+ value-format="yyyy-MM-dd"
type="daterange"
range-separator="鑷�"
start-placeholder="寮�濮嬫棩鏈�"
end-placeholder="缁撴潫鏃ユ湡">
</el-date-picker>
</el-form-item>
- <el-form-item>
+ <el-form-item prop="type">
<p><span>*</span>妫�楠岀被鍨�:</p>
- <el-select v-model="formInline.region" placeholder="閲囪喘鍏ュ簱">
- <el-option label="鍖哄煙涓�" value="shanghai"></el-option>
- <el-option label="鍖哄煙浜�" value="beijing"></el-option>
+ <el-select 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>娓呯┖</el-button>
- <el-button type="primary" @click="onSubmit">鏌ヨ</el-button>
+ <el-button @click="resetForm('formInline')">娓呯┖</el-button>
+ <el-button type="primary" @click="onSubmit('formInline')">鏌ヨ</el-button>
</el-form-item>
</el-form>
</el-card>
@@ -48,59 +52,111 @@
<el-col :span="12">
<el-card>
<p>璐熻矗浜哄強鏃剁巼</p>
- <div id="leaderTimly" style="width:100%;height:400px;"></div>
+ <div id="leaderTimely" style="width:100%;height:400px;"></div>
</el-card>
</el-col>
<el-col :span="12">
<el-card>
<p>瀹為獙鍛樺強鏃剁巼</p>
- <div id="testerTimly" style="width:100%;height:400px;"></div>
+ <div id="testerTimely" style="width:100%;height:400px;"></div>
</el-card>
</el-col>
</el-row>
</div>
- <div class="work-foot"></div>
+ <div class="work-foot">
+ <el-button type="primary">鏁版嵁瀵煎嚭</el-button>
+ </div>
</div>
</template>
<script>
import * as echarts from 'echarts';
+import { getDutyMater,getDutyTimely,getExecuteMater,getExecuteTimely
+} from '@/api/chart/work/index'
export default {
data() {
return {
formInline: {
- user: '',
- region: ''
+ date: null,
+ type: ''
},
- dateTime: '',
+ rules: {
+ type: [
+ { required: true, message: '璇烽�夋嫨妫�娴嬬被鍨�', trigger: 'change' }
+ ],
+ date: [
+ {required: true, message: '璇烽�夋嫨鏃ユ湡', trigger: 'change' }
+ ]
+ },
}
},
mounted(){
- this.initLeaderStatiChart('leaderStati');
- this.initLeaderTimlyChart();
- this.initLeaderStatiChart('testerStati');
- this.initTesterTimlyChart();
+ this.queryData();
},
methods: {
- onSubmit() {
- console.log('submit!');
+ async queryData(){
+ 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 : type
+ }
+ const dutyMater = await getDutyMater(obj);
+ const dutyTimely = await getDutyTimely(obj);
+ const executeMater = await getExecuteMater(obj);
+ const executeTimely = await getExecuteTimely(obj);
+ this.initLeaderStatiChart("leaderStati",dutyMater.data);
+ this.initLeaderTimelyChart("leaderTimely",dutyTimely.data);
+ this.initTesterStatiChart("testerStati",executeMater.data);
+ this.initTesterTimelyChart("testerTimely",executeTimely.data);
},
- initLeaderStatiChart(id){
+ onSubmit(formName) {
+ this.$refs[formName].validate((valid) => {
+ if (valid) {
+ this.queryData();
+ } else {
+ console.log('error submit!!');
+ return false;
+ }
+ });
+ },
+ resetForm(formName) {
+ this.formInline.date = null;
+ this.formInline.type = null;
+ this.$refs[formName].resetFields();
+ },
+ initLeaderStatiChart(id,dutyMater){
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 = [];
- let data3 = [];
- let data4 = [];
- for (let i = 0; i < 10; i++) {
- xAxisData.push('Class' + i);
- data1.push(+(Math.random() * 2).toFixed(2));
- data2.push(+(Math.random() * 5).toFixed(2));
- data3.push(+(Math.random() + 0.3).toFixed(2));
- data4.push(+Math.random().toFixed(2));
+ for(let i=0;i<dutyMater.length;i++){
+ xAxisData.push(dutyMater[i].name);
+ data1.push(dutyMater[i].finsh);
+ data2.push(dutyMater[i].unfinish);
+ let sum = dutyMater[i].finsh + dutyMater[i].unfinish;
+ if( sum > max ){
+ max = sum;
+ }
}
var emphasisStyle = {
itemStyle: {
@@ -110,7 +166,7 @@
};
option = {
legend: {
- data: ['bar', 'bar2'],
+ data: ['宸插畬鎴�', '鏈畬鎴�'],
left: 'center'
},
tooltip: {},
@@ -121,59 +177,312 @@
splitLine: { show: false },
splitArea: { show: false }
},
- yAxis: {},
+ yAxis: {
+ min: 0,
+ max: max,
+ interval: max,
+ },
grid: {
bottom: 100
},
series: [
{
- name: 'bar',
+ name: '宸插畬鎴�',
+ barWidth: '30%',
type: 'bar',
stack: 'one',
emphasis: emphasisStyle,
- data: data1
+ data: data1,
+ itemStyle: {
+ color: '#80d9c5'
+ }
},
{
- name: 'bar2',
+ name: '鏈畬鎴�',
+ barWidth: '20%',
type: 'bar',
stack: 'one',
emphasis: emphasisStyle,
- data: data2
+ data: data2,
+ itemStyle: {
+ color: '#f2d09d'
+ },
}
]
};
- myChart.on('brushSelected', function (params) {
- var brushed = [];
- var brushComponent = params.batch[0];
- for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
- var rawIndices = brushComponent.selected[sIdx].dataIndex;
- brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
- }
- myChart.setOption({
- title: {
- backgroundColor: '#333',
- text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
- bottom: 0,
- right: '10%',
- width: 100,
- textStyle: {
- fontSize: 12,
- color: '#fff'
- }
- }
- });
- });
-
option && myChart.setOption(option);
},
- initTesterStatiChart(){
-
+ initTesterStatiChart(id,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);
+ let sum = executeMater[i].finsh + executeMater[i].unfinsh;
+ if(sum > max){
+ max = sum;
+ }
+ }
+ var emphasisStyle = {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowColor: 'rgba(0,0,0,0.3)'
+ }
+ };
+ option = {
+ legend: {
+ data: ['鏁版嵁1', '鏁版嵁2'],
+ left: 'center'
+ },
+ tooltip: {},
+ xAxis: {
+ data: xAxisData,
+ name: '濮撳悕',
+ axisLine: { onZero: true },
+ splitLine: { show: false },
+ splitArea: { show: false }
+ },
+ yAxis: {
+ min: 0,
+ max: max,
+ interval: 1,
+ },
+ grid: {
+ bottom: 100
+ },
+ series: [
+ {
+ name: '鏁版嵁1',
+ type: 'bar',
+ stack: 'one',
+ barWidth: '30%',
+ emphasis: emphasisStyle,
+ data: data1,
+ itemStyle:{
+ color: "#d97559"
+ }
+ },
+ {
+ name: '鏁版嵁2',
+ type: 'bar',
+ stack: 'one',
+ barWidth: '30%',
+ emphasis: emphasisStyle,
+ data: data2,
+ itemStyle:{
+ color: "#e4c477"
+ }
+ }
+ ]
+ };
+ option && myChart.setOption(option);
},
- initLeaderTimlyChart(){
-
+ initLeaderTimelyChart(id,dutyTimely){
+ var chartDom = document.getElementById(id);
+ var myChart = echarts.init(chartDom);
+ window.addEventListener('resize', function() {
+ 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',
+ axisPointer: {
+ type: 'cross',
+ crossStyle: {
+ color: '#999'
+ }
+ }
+ },
+ legend: {
+ data: ['鏍峰搧鏁�', '瀹屾垚鍙婃椂鐜�']
+ },
+ xAxis: [
+ {
+ name: '濮撳悕',
+ type: 'category',
+ data: xAxisData,
+ axisPointer: {
+ type: 'shadow'
+ },
+ nameTextStyle:{
+ padding:20
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: '鏁伴噺',
+ min: 0,
+ max: yAxisData1,
+ interval: 1,
+ axisLabel: {
+ formatter: '{value}'
+ }
+ },
+ {
+ type: 'value',
+ name: '鐧惧垎姣�',
+ min: 0,
+ max: 100,
+ interval: 10,
+ axisLabel: {
+ formatter: '{value} %'
+ }
+ }
+ ],
+ series: [
+ {
+ name: '鏍峰搧鏁�',
+ type: 'bar',
+ barWidth: '30%',
+ tooltip: {
+ valueFormatter: function (value) {
+ return value;
+ }
+ },
+ data: data1,
+ itemStyle: {
+ color: '#9fceff'
+ }
+ },
+ {
+ name: '瀹屾垚鍙婃椂鐜�',
+ type: 'line',
+ yAxisIndex: 1,
+ tooltip: {
+ valueFormatter: function (value) {
+ return value + ' %';
+ }
+ },
+ data: data2,
+ itemStyle: {
+ color: '#d2eec5'
+ }
+ },
+ ]
+ };
+ option && myChart.setOption(option);
},
- initTesterTimlyChart(){
+ initTesterTimelyChart(id,executeTimely){
+ var chartDom = document.getElementById(id);
+ var myChart = echarts.init(chartDom);
+ window.addEventListener('resize', function() {
+ 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',
+ axisPointer: {
+ type: 'cross',
+ crossStyle: {
+ color: '#999'
+ }
+ }
+ },
+ legend: {
+ data: ['椤圭洰鏁�', '瀹屾垚鍙婃椂鐜�'],
+ show: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: xAxisData,
+ axisPointer: {
+ type: 'shadow'
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: '',
+ min: 0,
+ max: yAxisData1,
+ interval: 1,
+ axisLabel: {
+ formatter: '{value}'
+ }
+ },
+ {
+ type: 'value',
+ name: '',
+ min: 0,
+ max: 100,
+ interval: 10,
+ axisLabel: {
+ formatter: '{value} %'
+ }
+ }
+ ],
+ series: [
+ {
+ name: '椤圭洰鏁�',
+ type: 'bar',
+ barWidth: '30%',
+ tooltip: {
+ valueFormatter: function (value) {
+ return value ;
+ }
+ },
+ data: data1,
+ itemStyle: {
+ color: '#5087ec'
+ }
+ },
+ {
+ name: '瀹屾垚鍙婃椂鐜�',
+ type: 'line',
+ yAxisIndex: 1,
+ tooltip: {
+ valueFormatter: function (value) {
+ return value + ' %';
+ }
+ },
+ data: data2,
+ itemStyle: {
+ color: '#68bbc4'
+ }
+ }
+ ]
+ };
+ option && myChart.setOption(option);
},
}
}
@@ -186,7 +495,7 @@
padding: 0;
.work-head{
width:94%;
- height:100;
+ height:100px;
margin: 5px 10px;
position: fixed;
z-index: 10;
@@ -203,16 +512,32 @@
}
}
.buttons{
- margin: 40px 0px 0px 900px;
+ margin: 40px 0px 0px 50%;
}
}
}
.work-center{
- margin: 0px 0px 5px 10px;
+ margin: 0px 0px 150px 10px;
padding: 18vh 0px 5px 0px;
.el-card{
margin: 5px 0px;
height:500px;
+ p{
+ font-size: 22px;
+ margin: 0;
+ padding: 0;
+ }
+ }
+ }
+ .work-foot{
+ width:100%;
+ height:50px;
+ position: fixed;
+ bottom: 0px;
+ z-index: 10;
+ text-align: right;
+ .el-button{
+ margin-right: 7%;
}
}
}
--
Gitblit v1.9.3