6车间看板数据调整
This commit is contained in:
parent
5538f8354c
commit
0f15a76945
|
|
@ -2,7 +2,7 @@
|
|||
<el-container>
|
||||
<el-main>
|
||||
<div class="boxmain">
|
||||
<div class="wrapper" :id="'scrollWrapper'+refValue" @mouseover="mouseOver" @mouseout="mouseOut">
|
||||
<div class="wrapper" :id="'scrollWrapper' + refValue" @mouseover="mouseOver" @mouseout="mouseOut">
|
||||
<table class="totall">
|
||||
<tr class="title">
|
||||
<th v-for="itemx in titleData" :key="itemx">{{ itemx }}</th>
|
||||
|
|
@ -11,32 +11,29 @@
|
|||
<div :id="refValue" :ref="`${refValue}`" style="overflow:scroll">
|
||||
<div>
|
||||
<table :class="{ marquee_top: animate }">
|
||||
<tr v-for="(itemy,index) in rowData" class="rollData" ref="con1" :key="itemy">
|
||||
<td>{{ index+1 }}</td>
|
||||
<tr v-for="(itemy, index) in rowData" class="rollData" ref="con1" :key="itemy">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td v-for="itemz in itemy" :key="itemz">
|
||||
<el-progress v-if="itemz.elType=='progress'" :text-inside="true" :stroke-width="14" :percentage="itemz.value"
|
||||
:status="getStatus(itemz.value)"/>
|
||||
<el-tag v-else-if="itemz.elType=='tag'" :type="getTagType(itemz.value)">{{ stateOption[itemz.value] }}</el-tag>
|
||||
<el-progress v-if="itemz.elType == 'progress'" :text-inside="true"
|
||||
:stroke-width="14" :percentage="itemz.value" :status="getStatus(itemz.value)" />
|
||||
<el-tag v-else-if="itemz.elType == 'tag'" :type="getTagType(itemz.value)">{{
|
||||
stateOption[itemz.value] }}</el-tag>
|
||||
<span v-else>{{ itemz.value }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table :class="{ marquee_top: animate }" v-show="scrollVivible">
|
||||
<tr v-for="(itemy,index) in rowData" class="rollData" ref="con1" :key="itemy">
|
||||
<td>{{ index+1 }}</td>
|
||||
<tr v-for="(itemy, index) in rowData" class="rollData" ref="con1" :key="itemy">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td v-for="itemz in itemy" :key="itemz">
|
||||
<!-- <el-progress v-if="itemz.elType=='progress'" :text-inside="true" :stroke-width="14" :percentage="itemz.value"
|
||||
:status="getStatus(itemz.value)"/> -->
|
||||
<el-progress
|
||||
v-if="itemz.elType=='progress'"
|
||||
:text-inside="true"
|
||||
:stroke-width="16"
|
||||
:percentage="itemz.value"
|
||||
:status="getStatus(itemz.value)"
|
||||
>
|
||||
<span>{{itemz.value}}</span>
|
||||
<el-progress v-if="itemz.elType == 'progress'" :text-inside="true"
|
||||
:stroke-width="16" :percentage="itemz.value" :status="getStatus(itemz.value)">
|
||||
<span>{{ itemz.value }}</span>
|
||||
</el-progress>
|
||||
<el-tag v-else-if="itemz.elType=='tag'" :type="getTagType(itemz.value)">{{ stateOption[itemz.value] }}</el-tag>
|
||||
<el-tag v-else-if="itemz.elType == 'tag'" :type="getTagType(itemz.value)">{{
|
||||
stateOption[itemz.value] }}</el-tag>
|
||||
<span v-else>{{ itemz.value }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -49,29 +46,29 @@
|
|||
</el-container>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type:Array,
|
||||
default () {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
titleData:{
|
||||
type:Array,
|
||||
default () {
|
||||
titleData: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
tableHeight:{
|
||||
type:Number,
|
||||
default () {
|
||||
tableHeight: {
|
||||
type: Number,
|
||||
default() {
|
||||
return 100
|
||||
}
|
||||
},
|
||||
refValue:{
|
||||
type:String,
|
||||
default(){
|
||||
refValue: {
|
||||
type: String,
|
||||
default() {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
|
@ -83,32 +80,32 @@
|
|||
iliHeight: 30,
|
||||
time: null,
|
||||
delay: 20,
|
||||
scrollVivible:true,
|
||||
stateOption:{
|
||||
scrollVivible: true,
|
||||
stateOption: {
|
||||
10: "创建中",
|
||||
14: "已分解",
|
||||
20: "已下达",
|
||||
30:'生产中',
|
||||
40:'已完成',
|
||||
'normal':'正常',
|
||||
'late':'迟到',
|
||||
'未到岗':'未到岗',
|
||||
30: '生产中',
|
||||
40: '已完成',
|
||||
'normal': '正常',
|
||||
'late': '迟到',
|
||||
'未到岗': '未到岗',
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
let Container =that.tableHeight;
|
||||
let tableHeight = Container-40;
|
||||
let idName = 'scrollWrapper'+that.refValue;
|
||||
let Container = that.tableHeight;
|
||||
let tableHeight = Container - 40;
|
||||
let idName = 'scrollWrapper' + that.refValue;
|
||||
let idName2 = that.refValue;
|
||||
document.getElementById(idName).style.height = Container+'px';
|
||||
document.getElementById(idName2).style.height = tableHeight+'px';
|
||||
document.getElementById(idName).style.height = Container + 'px';
|
||||
document.getElementById(idName2).style.height = tableHeight + 'px';
|
||||
// console.log(this.$refs[`${this.refValue}`])
|
||||
let scrollHeight = that.$refs[`${that.refValue}`].scrollHeight/2;
|
||||
if(tableHeight>scrollHeight){
|
||||
let scrollHeight = that.$refs[`${that.refValue}`].scrollHeight / 2;
|
||||
if (tableHeight > scrollHeight) {
|
||||
that.scrollVivible = false;
|
||||
}else{
|
||||
} else {
|
||||
that.scrollVivible = true;
|
||||
that.myScroll = setInterval(() => {
|
||||
that.scrollUp();
|
||||
|
|
@ -116,40 +113,43 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
getTagType(type){
|
||||
if(type==30||type==10||type==14||type==20){
|
||||
getTagType(type) {
|
||||
if (type == 30 || type == 10 || type == 14 || type == 20) {
|
||||
return ""
|
||||
}else if(type==40){
|
||||
} else if (type == 40) {
|
||||
return "success"
|
||||
}else if(type=='normal'){
|
||||
} else if (type == 'normal') {
|
||||
return "success"
|
||||
}else if(type=='late'){
|
||||
} else if (type == 'late') {
|
||||
return "warning"
|
||||
}else if(type=='未到岗'){
|
||||
} else if (type == '未到岗') {
|
||||
return "danger"
|
||||
}
|
||||
},
|
||||
getStatus(status){
|
||||
if(status==100){
|
||||
getStatus(status) {
|
||||
if (status == 100) {
|
||||
return "success"
|
||||
}else if(status>=80){
|
||||
} else if (status >= 80) {
|
||||
return "primary"
|
||||
}else if(status>=60){
|
||||
} else if (status >= 60) {
|
||||
return "warning"
|
||||
}else{
|
||||
} else {
|
||||
return "exception"
|
||||
}
|
||||
},
|
||||
|
||||
scrollUp(){
|
||||
scrollUp() {
|
||||
if (this.$refs[`${this.refValue}`] && this.$refs[`${this.refValue}`].scrollTop) {
|
||||
let scrollTop = this.$refs[`${this.refValue}`].scrollTop;
|
||||
let scrollHeight = this.$refs[`${this.refValue}`].scrollHeight;
|
||||
if (scrollTop >=scrollHeight/2) {
|
||||
if (scrollTop >= scrollHeight / 2) {
|
||||
//判断条件是否达到临界
|
||||
this.$refs[`${this.refValue}`].scrollTop = 0;
|
||||
} else {
|
||||
this.$refs[`${this.refValue}`].scrollTop=scrollTop+40;
|
||||
this.$refs[`${this.refValue}`].scrollTop = scrollTop + 40;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
// 鼠标滑过暂停滚动
|
||||
mouseOver() {
|
||||
|
|
@ -173,58 +173,68 @@
|
|||
clearInterval(that.myScroll1);
|
||||
that.myScroll1 = null;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.boxmain {
|
||||
.boxmain {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
@media screen and (max-width: 800px) {
|
||||
.boxmain {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
table {
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
.title{
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
table th {
|
||||
}
|
||||
|
||||
table th {
|
||||
font-size: 14px;
|
||||
background: rgba(0, 0, 0, .1);
|
||||
}
|
||||
table td {
|
||||
}
|
||||
|
||||
table td {
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, .8);
|
||||
}
|
||||
table th,table td{
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
padding: .1rem 0;
|
||||
border-bottom: none !important;
|
||||
background:none !important;
|
||||
}
|
||||
.marquee_top{
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.marquee_top {
|
||||
transition: all 0.5s ease-in-out;
|
||||
margin-top: -26px;
|
||||
}
|
||||
.totall{
|
||||
}
|
||||
|
||||
.totall {
|
||||
color: #fff;
|
||||
background-color: rgb(10, 63, 68);
|
||||
}
|
||||
.rollData{
|
||||
}
|
||||
|
||||
.rollData {
|
||||
background-color: rgb(10, 39, 50);
|
||||
}
|
||||
.rollData:nth-of-type(2n+1){
|
||||
}
|
||||
|
||||
.rollData:nth-of-type(2n+1) {
|
||||
background-color: rgb(0, 59, 81);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<el-container class="dashboard">
|
||||
<el-header class="header">
|
||||
<div style="font-weight: bold; font-family:'myfont';font-size:32px">6车间生产数据大看板</div>
|
||||
<div style="font-size: 14px;margin-top:18px">{{currentDay}} {{ currentTime }}</div>
|
||||
<div style="font-size: 14px;margin-top:18px">{{ currentDay }} {{ currentTime }}</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-row style="height: 60%" :gutter="10">
|
||||
|
|
@ -14,10 +14,12 @@
|
|||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain bigdata border" style="overflow:scroll">
|
||||
<div v-for="item in todayUtask" :key="item.id" style="width:50%;display:inline-block; height: 40px;">
|
||||
<span style="font-size:12px">{{item.number}}</span>
|
||||
<span style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">
|
||||
{{item.count}}
|
||||
<div v-for="item in todayUtask" :key="item.id"
|
||||
style="width:50%;display:inline-block; height: 40px;">
|
||||
<span style="font-size:12px">{{ item.number }}</span>
|
||||
<span
|
||||
style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">
|
||||
{{ item.count }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -33,8 +35,7 @@
|
|||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain" id="scrollContainer1">
|
||||
<scScrollTavle v-if="table1Visible" :tableHeight="containerHeight1"
|
||||
:rowData="saleOutData" :titleData="liData1" :refValue="refValue1"
|
||||
></scScrollTavle>
|
||||
:rowData="saleOutData" :titleData="liData1" :refValue="refValue1"></scScrollTavle>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -47,9 +48,8 @@
|
|||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain" id="scrollContainer2">
|
||||
<scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2"
|
||||
:rowData="processData" :titleData="liData2" :refValue="refValue2"
|
||||
></scScrollTavle>
|
||||
<scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2" :rowData="processData"
|
||||
:titleData="liData2" :refValue="refValue2"></scScrollTavle>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -85,7 +85,7 @@ function deepCopy(obj) {
|
|||
return JSON.parse(JSON.stringify(obj));
|
||||
}
|
||||
export default {
|
||||
components: {scScrollTavle},
|
||||
components: { scScrollTavle },
|
||||
data() {
|
||||
return {
|
||||
basicOption: {
|
||||
|
|
@ -153,7 +153,7 @@ export default {
|
|||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
data: ['1日','2日', '3日', '4日', '5日', '6日', '7日', '8日','9日','10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日','19日','20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日'],
|
||||
data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日'],
|
||||
nameTextStyle: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
|
|
@ -222,7 +222,7 @@ export default {
|
|||
label: {
|
||||
show: true,
|
||||
position: 'insideTop',
|
||||
color:'#666'
|
||||
color: '#666'
|
||||
},
|
||||
data: []
|
||||
},
|
||||
|
|
@ -267,35 +267,35 @@ export default {
|
|||
label: {
|
||||
show: true,
|
||||
position: 'insideTop',
|
||||
color:'#666',
|
||||
font:'10'
|
||||
color: '#666',
|
||||
font: '10'
|
||||
},
|
||||
data:[]
|
||||
data: []
|
||||
},
|
||||
]
|
||||
},
|
||||
containerHeight1:100,
|
||||
containerHeight2:100,
|
||||
table1Visible:false,
|
||||
table2Visible:false,
|
||||
refValue1:'moocBox1',
|
||||
refValue2:'moocBox2',
|
||||
liData1: ['序号','日期','名称', '型号', '规格', '发货数量'],
|
||||
liData2: ['序号','工序','产品名称', '型号', '计划数量', '合格数量', '完成进度', '合格率'],
|
||||
todayUtask:[],
|
||||
saleOutData:[],
|
||||
processData:[],
|
||||
containerHeight1: 100,
|
||||
containerHeight2: 100,
|
||||
table1Visible: false,
|
||||
table2Visible: false,
|
||||
refValue1: 'moocBox1',
|
||||
refValue2: 'moocBox2',
|
||||
liData1: ['序号', '日期', '名称', '型号', '规格', '发货数量'],
|
||||
liData2: ['序号', '工序', '产品名称', '型号', '计划数量', '合格数量', '完成进度', '合格率'],
|
||||
todayUtask: [],
|
||||
saleOutData: [],
|
||||
processData: [],
|
||||
time: null,
|
||||
start_date:'',
|
||||
end_date:'',
|
||||
scrollVivible:true,
|
||||
dayInterval:null,
|
||||
chartInterval1:null,
|
||||
chartInterval2:null,
|
||||
currentTime:'',
|
||||
currentDay:'',
|
||||
weekFirst:'',
|
||||
weekLast:'',
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
scrollVivible: true,
|
||||
dayInterval: null,
|
||||
chartInterval1: null,
|
||||
chartInterval2: null,
|
||||
currentTime: '',
|
||||
currentDay: '',
|
||||
weekFirst: '',
|
||||
weekLast: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -309,21 +309,29 @@ export default {
|
|||
const ondDayTime = 86400000;
|
||||
let date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth()+1;
|
||||
let month = date.getMonth() + 1;
|
||||
let day = date.getDate();
|
||||
let days = new Date(year, month, 0).getDate();
|
||||
this.days = days;
|
||||
let start_date = year+'-'+month+'-01';
|
||||
let start_date = year + '-' + month + '-01';
|
||||
let lastDay = new Date(year, month, 0).getDate();
|
||||
let end_date = year+'-'+month+'-'+lastDay;
|
||||
let end_date = year + '-' + month + '-' + lastDay;
|
||||
this.start_date = start_date;
|
||||
this.end_date = end_date;
|
||||
this.today = year+'-'+month+'-'+day;
|
||||
// let yesterday = new Date(date.getTime()-24*60*60*1000);
|
||||
// this.yesterday = yesterday.getFullYear()+"-" + (yesterday.getMonth()+1) + "-" + yesterday.getDate();
|
||||
let week = date.getDay();//当前时间的week数
|
||||
this.today = year + '-' + month + '-' + day;
|
||||
let yesterday = new Date(date.getTime() - 24 * 60 * 60 * 1000);
|
||||
this.yesterday = yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate();
|
||||
let week = yesterday.getDay();//当前时间的week数
|
||||
console.log(week);
|
||||
let weekFirst = week - 1;//第一天对应的天数
|
||||
let weekLast = 7 - week;//最后一天对应的天数
|
||||
if (week == 0) {
|
||||
weekFirst = 6;
|
||||
weekLast = 0;//周日特殊处理
|
||||
} else {
|
||||
weekFirst = week - 1;
|
||||
weekLast = 7 - week;
|
||||
}
|
||||
let first = new Date(new Date(date.getTime() - (weekFirst * ondDayTime)));//本周周一
|
||||
let last = new Date(new Date(date.getTime() + (weekLast * ondDayTime)));//本周周日
|
||||
this.weekFirst = first.getFullYear() + '-' + (first.getMonth() + 1) + '-' + first.getDate();
|
||||
|
|
@ -335,12 +343,12 @@ export default {
|
|||
this.getMtask();
|
||||
//时间
|
||||
this.showTime()
|
||||
this.dayInterval = setInterval(()=>{
|
||||
this.dayInterval = setInterval(() => {
|
||||
this.showTime()
|
||||
},1000)
|
||||
}, 1000)
|
||||
},
|
||||
methods: {
|
||||
showTime(){
|
||||
showTime() {
|
||||
this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
|
||||
this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
|
||||
},
|
||||
|
|
@ -360,31 +368,31 @@ export default {
|
|||
}, 500)
|
||||
},
|
||||
//今日任务
|
||||
getTodayUtask(){
|
||||
getTodayUtask() {
|
||||
let that = this;
|
||||
let obj ={};
|
||||
obj.start_date = this.today;
|
||||
obj.end_date = this.today;
|
||||
obj.belong_dept__name='6车间';
|
||||
obj.page=0;
|
||||
let obj = {};
|
||||
obj.start_date__lte = this.today;
|
||||
obj.end_date__gte = this.today;
|
||||
obj.belong_dept__name = '6车间';
|
||||
obj.page = 0;
|
||||
that.$API.pm.utask.list.req(obj).then((res) => {
|
||||
that.todayUtask=res;
|
||||
console.log('今日任务:',res);
|
||||
that.todayUtask = res;
|
||||
console.log('今日任务:', res);
|
||||
});
|
||||
},
|
||||
//发货情况
|
||||
getMioItem(){
|
||||
getMioItem() {
|
||||
let that = this;
|
||||
let obj ={};
|
||||
let obj = {};
|
||||
obj.mio__type = 'sale_out';
|
||||
obj.mio__inout_date__gte = that.start_date;
|
||||
obj.mio__inout_date__lte = that.end_date;
|
||||
obj.page=0;
|
||||
obj.page = 0;
|
||||
that.$API.inm.mioitem.list.req(obj).then((res) => {
|
||||
console.log(res);
|
||||
let saleOutData = [];
|
||||
res.forEach(item => {
|
||||
let arr = [],obj1 = {},obj2 = {},obj3 = {},obj4 = {},obj5 = {};
|
||||
let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {}, obj5 = {};
|
||||
obj1.elType = 'primary';
|
||||
obj1.value = item.inout_date;
|
||||
obj2.elType = 'primary';
|
||||
|
|
@ -406,39 +414,33 @@ export default {
|
|||
});
|
||||
},
|
||||
//本周工序进展
|
||||
getMtask(){
|
||||
getMtask() {
|
||||
let that = this;
|
||||
let obj ={};
|
||||
obj.start_date = this.weekFirst;
|
||||
obj.end_date = this.weekLast;
|
||||
obj.mgroup__belong_dept__name='6车间';
|
||||
obj.page=0;
|
||||
that.$API.pm.mtask.list.req(obj).then((res) => {
|
||||
console.log(res);
|
||||
if(res.length>0){
|
||||
let obj = {
|
||||
query: { start_date: this.start_date, end_date: this.end_date, dept_name: "6车间" },
|
||||
};
|
||||
//生产车间按日统计
|
||||
that.$API.bi.dataset.exec.req('mgroupWeek', obj).then((res) => {
|
||||
let data = res.data2.ds0;
|
||||
if (data.length > 0) {
|
||||
let processData = [];
|
||||
res.forEach(item => {
|
||||
let arr = [],obj1 = {},obj2 = {},obj3 = {},obj4 = {},obj5 = {},obj6 = {},obj7 = {},obj8 = {};
|
||||
data.forEach(item => {
|
||||
let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {}, obj5 = {}, obj6 = {}, obj7 = {}, obj8 = {};
|
||||
obj1.elType = 'primary';
|
||||
obj1.value = item.mgroup_name;//工序
|
||||
obj1.value = item.工段;//工序
|
||||
obj2.elType = 'primary';
|
||||
obj2.value = item.material_out_.name;
|
||||
obj2.value = item.物料名称;
|
||||
obj3.elType = 'primary';
|
||||
obj3.value = item.material_out_.specification;
|
||||
obj3.value = item.型号;
|
||||
obj4.elType = 'primary';
|
||||
obj4.value = item.count;
|
||||
obj4.value = item.计划数;
|
||||
obj5.elType = 'primary';
|
||||
obj5.value = item.count_ok;
|
||||
obj5.value = item.合格数;
|
||||
obj6.elType = 'progress';
|
||||
let jindu = Math.round((item.count_ok/item.count)*100);
|
||||
let jindu = Math.round((item.完成进度) * 100);
|
||||
obj6.value = jindu;
|
||||
obj7.elType = 'primary';
|
||||
let rate = 0;
|
||||
if(item.count_real!=0){
|
||||
rate = Math.round((item.count_ok/item.count_real)*100);
|
||||
}else{
|
||||
rate = 0;
|
||||
}
|
||||
let rate = Math.round((item.合格率) * 100);
|
||||
obj7.value = rate;
|
||||
arr.push(obj1);
|
||||
arr.push(obj2);
|
||||
|
|
@ -448,105 +450,140 @@ export default {
|
|||
arr.push(obj6);
|
||||
arr.push(obj7);
|
||||
processData.push(arr);
|
||||
|
||||
});
|
||||
console.log('processData',processData)
|
||||
console.log('processData', processData)
|
||||
this.processData = processData;
|
||||
}
|
||||
debugger;
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
// let obj = {};
|
||||
// obj.start_date = this.weekFirst;
|
||||
// obj.end_date = this.weekLast;
|
||||
// obj.mgroup__belong_dept__name = '6车间';
|
||||
// obj.page = 0;
|
||||
// that.$API.pm.mtask.list.req(obj).then((res) => {
|
||||
// console.log(res);
|
||||
// if (res.length > 0) {
|
||||
// let processData = [];
|
||||
// res.forEach(item => {
|
||||
// let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {}, obj5 = {}, obj6 = {}, obj7 = {}, obj8 = {};
|
||||
// obj1.elType = 'primary';
|
||||
// obj1.value = item.mgroup_name;//工序
|
||||
// obj2.elType = 'primary';
|
||||
// obj2.value = item.material_out_.name;
|
||||
// obj3.elType = 'primary';
|
||||
// obj3.value = item.material_out_.specification;
|
||||
// obj4.elType = 'primary';
|
||||
// obj4.value = item.count;
|
||||
// obj5.elType = 'primary';
|
||||
// obj5.value = item.count_ok;
|
||||
// obj6.elType = 'progress';
|
||||
// let jindu = Math.round((item.count_ok / item.count) * 100);
|
||||
// obj6.value = jindu;
|
||||
// obj7.elType = 'primary';
|
||||
// let rate = 0;
|
||||
// if (item.count_real != 0) {
|
||||
// rate = Math.round((item.count_ok / item.count_real) * 100);
|
||||
// } else {
|
||||
// rate = 0;
|
||||
// }
|
||||
// obj7.value = rate;
|
||||
// arr.push(obj1);
|
||||
// arr.push(obj2);
|
||||
// arr.push(obj3);
|
||||
// arr.push(obj4);
|
||||
// arr.push(obj5);
|
||||
// arr.push(obj6);
|
||||
// arr.push(obj7);
|
||||
// processData.push(arr);
|
||||
|
||||
// });
|
||||
// console.log('processData', processData)
|
||||
// this.processData = processData;
|
||||
// }
|
||||
// debugger;
|
||||
// });
|
||||
},
|
||||
//本月生产统计&本月交付统计
|
||||
getsaleOut(){
|
||||
getsaleOut() {
|
||||
let that = this;
|
||||
let obj ={
|
||||
query: {start_date:this.start_date,end_date:this.end_date,dept_name: "6车间"},
|
||||
let obj = {
|
||||
query: { start_date: this.start_date, end_date: this.end_date, dept_name: "6车间" },
|
||||
};
|
||||
let obj2 ={
|
||||
query: {start_date:this.start_date,end_date:this.end_date,mio_type: 'sale_out',material_id:''},
|
||||
let obj2 = {
|
||||
query: { start_date: this.start_date, end_date: this.end_date, mio_type: 'sale_out', material_id: '' },
|
||||
};
|
||||
//生产车间按日统计
|
||||
that.$API.bi.dataset.exec.req('productStatistic', obj).then((res1) => {
|
||||
console.log('生产车间按日统计:',res1);
|
||||
console.log('生产车间按日统计:', res1);
|
||||
let list1 = res1.data2.ds0;
|
||||
let seriesData11 = [],seriesData12 = [],xAxisData1=[],bangArr=[],guanArr=[];
|
||||
let seriesData11 = [], seriesData12 = [], xAxisData1 = [], bangArr = [], guanArr = [];
|
||||
for (let i = 0; i < that.days; i++) {
|
||||
let day = i+1;
|
||||
let text = day+'日';
|
||||
xAxisData1[i]=text;
|
||||
let day = i + 1;
|
||||
let text = day + '日';
|
||||
xAxisData1[i] = text;
|
||||
seriesData11.push(0);
|
||||
seriesData12.push(0);
|
||||
}
|
||||
if(list1.length>0){
|
||||
list1.forEach(item1=>{
|
||||
if(item1.name=='光纤预制管'){
|
||||
if (list1.length > 0) {
|
||||
list1.forEach(item1 => {
|
||||
if (item1.name == '光纤预制管') {
|
||||
guanArr.push(item1)
|
||||
}else{
|
||||
} else {
|
||||
bangArr.push(item1)
|
||||
}
|
||||
})
|
||||
}
|
||||
if(bangArr.length>0){
|
||||
bangArr.forEach(item11=>{
|
||||
let index11 = item11.日-1;
|
||||
if (bangArr.length > 0) {
|
||||
bangArr.forEach(item11 => {
|
||||
let index11 = item11.日 - 1;
|
||||
seriesData11[index11] = item11.生产数;
|
||||
})
|
||||
}
|
||||
if(guanArr.length>0){
|
||||
guanArr.forEach(item12=>{
|
||||
let index12 = item12.日-1;
|
||||
if (guanArr.length > 0) {
|
||||
guanArr.forEach(item12 => {
|
||||
let index12 = item12.日 - 1;
|
||||
seriesData12[index12] = item12.生产数;
|
||||
})
|
||||
}
|
||||
|
||||
let chart1Option = deepCopy(this.basicOption)
|
||||
chart1Option.xAxis.data = xAxisData1;
|
||||
chart1Option.series[0].data=seriesData11;
|
||||
chart1Option.series[1].data=seriesData12;
|
||||
let chart1 = this.setChart("chart1", chart1Option);
|
||||
// let index1 = 0
|
||||
// this.chartInterval1 = setInterval(function () {
|
||||
// if (index1 < chart1Option.series[0].data.length) {
|
||||
// chart1.dispatchAction({ type: 'downplay', seriesIndex: 0 });
|
||||
// chart1.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index2 });
|
||||
// chart1.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index2 });
|
||||
// index1++;
|
||||
// } else {
|
||||
// index1 = 0;
|
||||
// }
|
||||
// }, 3000);
|
||||
// debugger;
|
||||
chart1Option.series[0].data = seriesData11;
|
||||
chart1Option.series[1].data = seriesData12;
|
||||
this.setChart("chart1", chart1Option);
|
||||
});
|
||||
//本月交付统计
|
||||
that.$API.bi.dataset.exec.req('saleOutDay', obj2).then((saleOutRes) => {
|
||||
console.log('本月交付统计:',saleOutRes);
|
||||
let seriesData21 = [],seriesData22 = [],xAxisData2=[],bangArr2=[],guanArr2=[];
|
||||
console.log('本月交付统计:', saleOutRes);
|
||||
let seriesData21 = [], seriesData22 = [], xAxisData2 = [], bangArr2 = [], guanArr2 = [];
|
||||
let list2 = saleOutRes.data2.ds0;
|
||||
for (let i = 0; i < that.days; i++) {
|
||||
let day = i+1;
|
||||
let text = day+'日';
|
||||
xAxisData2[i]=text;
|
||||
let day = i + 1;
|
||||
let text = day + '日';
|
||||
xAxisData2[i] = text;
|
||||
seriesData21.push(0);
|
||||
seriesData22.push(0);
|
||||
}
|
||||
if(list2.length>0){
|
||||
list2.forEach(item2=>{
|
||||
if(item2.name=='光纤预制管'){
|
||||
if (list2.length > 0) {
|
||||
list2.forEach(item2 => {
|
||||
if (item2.name == '光纤预制管') {
|
||||
guanArr2.push(item2)
|
||||
}else{
|
||||
} else {
|
||||
bangArr2.push(item2)
|
||||
}
|
||||
})
|
||||
}
|
||||
if(bangArr2.length>0){
|
||||
bangArr2.forEach(item21=>{
|
||||
let index21 = item21.日-1;
|
||||
if (bangArr2.length > 0) {
|
||||
bangArr2.forEach(item21 => {
|
||||
let index21 = item21.日 - 1;
|
||||
seriesData21[index21] = item21.生产数;
|
||||
})
|
||||
}
|
||||
if(guanArr2.length>0){
|
||||
guanArr2.forEach(item22=>{
|
||||
let index22 = item22.日-1;
|
||||
if (guanArr2.length > 0) {
|
||||
guanArr2.forEach(item22 => {
|
||||
let index22 = item22.日 - 1;
|
||||
seriesData22[index22] = item22.生产数;
|
||||
})
|
||||
}
|
||||
|
|
@ -555,24 +592,12 @@ export default {
|
|||
chart2Option.series[1].type = 'line';
|
||||
chart2Option.xAxis.data = xAxisData2;
|
||||
|
||||
chart2Option.series[0].data=seriesData21;
|
||||
chart2Option.series[0].label.position='top';
|
||||
chart2Option.series[1].data=seriesData22;
|
||||
chart2Option.series[1].label.position='top';
|
||||
chart2Option.series[0].data = seriesData21;
|
||||
chart2Option.series[0].label.position = 'top';
|
||||
chart2Option.series[1].data = seriesData22;
|
||||
chart2Option.series[1].label.position = 'top';
|
||||
|
||||
let chart2 = this.setChart("chart2", chart2Option);
|
||||
// let index2 = 0
|
||||
// this.chartInterval2 = setInterval(function () {
|
||||
// if (index2 < chart2Option.series[0].data.length) {
|
||||
// chart2.dispatchAction({ type: 'downplay', seriesIndex: 0 });
|
||||
// chart2.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index2 });
|
||||
// chart2.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index2 });
|
||||
// index2++;
|
||||
// } else {
|
||||
// index2 = 0;
|
||||
// }
|
||||
// }, 3000);
|
||||
// debugger;
|
||||
this.setChart("chart2", chart2Option);
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -581,17 +606,21 @@ export default {
|
|||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@font-face {
|
||||
font-family: 'myfont'; /* 字体名称 */
|
||||
src: url('../../utils/youShe.ttf'); /* 字体文件相对路径 */
|
||||
}
|
||||
.dashboard {
|
||||
@font-face {
|
||||
font-family: 'myfont';
|
||||
/* 字体名称 */
|
||||
src: url('../../utils/youShe.ttf');
|
||||
/* 字体文件相对路径 */
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
background-image: url("/public/img/photon_bg.png");
|
||||
color: #fff;
|
||||
background-size:cover;
|
||||
background-size: cover;
|
||||
font-family: "Microsoft Yahei" !important;
|
||||
}
|
||||
.header {
|
||||
}
|
||||
|
||||
.header {
|
||||
background: url("/public/img/photon_header.png");
|
||||
border-bottom: none;
|
||||
background-size: 100% 100%;
|
||||
|
|
@ -602,72 +631,87 @@ export default {
|
|||
font-family: 'Microsoft Yahei';
|
||||
text-align: center;
|
||||
padding: 12px 0px;
|
||||
}
|
||||
.box {
|
||||
}
|
||||
|
||||
.box {
|
||||
background: rgba(10, 63, 68, 0.5);
|
||||
height: 100%;
|
||||
}
|
||||
.boxtitle {
|
||||
}
|
||||
|
||||
.boxtitle {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
height: 36px;
|
||||
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335), rgba(11, 101, 140, 0.451));
|
||||
}
|
||||
.bgimg {
|
||||
}
|
||||
|
||||
.bgimg {
|
||||
background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png');
|
||||
background-size: 140% 100%;
|
||||
}
|
||||
.boxlabel {
|
||||
}
|
||||
|
||||
.boxlabel {
|
||||
margin-left: 6px;
|
||||
font-size: 18px;
|
||||
margin-top: 6px
|
||||
}
|
||||
.boxmain {
|
||||
}
|
||||
|
||||
.boxmain {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.boxmain {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
.flex_center {
|
||||
}
|
||||
|
||||
.flex_center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
.border{
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px dashed #49bcf7;
|
||||
}
|
||||
.bigdata {
|
||||
}
|
||||
|
||||
.bigdata {
|
||||
font-size: 24px;
|
||||
}
|
||||
.wrapper{
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
overflow: hidden;
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
.title{
|
||||
.title {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
table th{
|
||||
}
|
||||
|
||||
table th {
|
||||
font-size: 14px;
|
||||
background: rgba(0, 0, 0, .1);
|
||||
}
|
||||
.marquee_top{
|
||||
}
|
||||
|
||||
.marquee_top {
|
||||
transition: all 0.5s ease-in-out;
|
||||
margin-top: -26px;
|
||||
}
|
||||
.totall{
|
||||
}
|
||||
|
||||
.totall {
|
||||
color: #fff;
|
||||
background-color: rgb(10, 63, 68);
|
||||
}
|
||||
.rollData{
|
||||
}
|
||||
|
||||
.rollData {
|
||||
background-color: rgb(10, 39, 50);
|
||||
}
|
||||
.rollData:nth-of-type(2n+1){
|
||||
}
|
||||
|
||||
.rollData:nth-of-type(2n+1) {
|
||||
background-color: rgb(0, 59, 81);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -120,7 +120,10 @@
|
|||
<div class="border_corner border_right_bottom"></div>
|
||||
<p class="title">{{ dialogData.deptName }}</p>
|
||||
<div class="infoCantier">
|
||||
<div class="leftBlock">
|
||||
<div class="leftBlock" v-if="dialogData.deptName == '办公楼'">
|
||||
<img src="img/gz_logo.png" alt="" style="width:100%">
|
||||
</div>
|
||||
<div class="leftBlock" v-else>
|
||||
<el-progress :width="70" type="circle" color="rgba(54, 217, 187, 1)" :percentage="dialogData.percentage"
|
||||
id="dashbordProcess">
|
||||
<span class="percentage-value" style="font-size: 16px">{{ dialogData.percentage }}%</span>
|
||||
|
|
@ -129,8 +132,7 @@
|
|||
</div>
|
||||
<div class="rightBlock">
|
||||
<div>
|
||||
<p>昨日产量</p>
|
||||
<!-- <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p> -->
|
||||
<p v-if="dialogData.deptName !== '办公楼'">昨日产量</p>
|
||||
</div>
|
||||
<div class="countWrap">
|
||||
<div v-if="dialogData.deptName == '光纤预制管生产车间' || dialogData.deptName == '光学精密加工车间'">
|
||||
|
|
@ -148,6 +150,10 @@
|
|||
<p> <span class="numberFont">{{ dialogData.count }}</span><span class="numberUnit">kg</span>
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="dialogData.deptName == '办公楼'">
|
||||
<p style="font-size:12px">
|
||||
公司秉承“善用资源，服务建设”的核心理念，践行“材料创造美好世界”的企业使命，坚持“创新、绩效、和谐、责任”的核心价值观，努力成长为具有创新精神和全球视野的光子材料领先企业。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -160,7 +166,10 @@
|
|||
<div class="border_corner border_right_bottom"></div>
|
||||
<p class="title">{{ currentData.deptName }}</p>
|
||||
<div class="infoCantier">
|
||||
<div class="leftBlock">
|
||||
<div class="leftBlock" v-if="currentData.deptName == '办公楼'">
|
||||
<img src="img/gz_logo.png" alt="" style="margin-top:10px">
|
||||
</div>
|
||||
<div class="leftBlock" v-else>
|
||||
<el-progress :width="100" type="circle" color="rgba(54, 217, 187, 1)"
|
||||
:percentage="currentData.percentage" id="dashbordProcess">
|
||||
<span class="percentage-value" style="font-size: 16px">{{ currentData.percentage }}%</span>
|
||||
|
|
@ -169,8 +178,7 @@
|
|||
</div>
|
||||
<div class="rightBlock">
|
||||
<div>
|
||||
<p>昨日产量</p>
|
||||
<!-- <p> <span class="numberFont">390</span><span class="numberUnit">件</span></p> -->
|
||||
<p v-if="currentData.deptName !== '办公楼'">昨日产量</p>
|
||||
</div>
|
||||
<div class="countWrap">
|
||||
<div v-if="currentData.deptName == '光纤预制管生产车间' || currentData.deptName == '光学精密加工车间'">
|
||||
|
|
@ -190,6 +198,9 @@
|
|||
<p> <span class="numberFont">{{ currentData.count }}</span><span class="numberUnit">kg</span>
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="currentData.deptName == '办公楼'">
|
||||
<p>公司秉承“善用资源，服务建设”的核心理念，践行“材料创造美好世界”的企业使命，坚持“创新、绩效、和谐、责任”的核心价值观，努力成长为具有创新精神和全球视野的光子材料领先企业。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CircleClose class="circleClose" @click="circleClose" />
|
||||
|
|
@ -416,7 +427,7 @@ export default {
|
|||
let cDate = new Date();
|
||||
let yesterday = new Date(cDate.getTime() - ondDayTime);
|
||||
let week = yesterday.getDay();//当前时间的week数
|
||||
console.log(week);
|
||||
// console.log(week);
|
||||
let weekFirst = week - 1;//第一天对应的天数
|
||||
let weekLast = 7 - week;//最后一天对应的天数
|
||||
if (week == 0) {
|
||||
|
|
@ -686,7 +697,7 @@ export default {
|
|||
let countOkDept10 = [0, 0, 0, 0, 0, 0, 0], countRateDept10 = [0, 0, 0, 0, 0, 0, 0];
|
||||
let countOk_dept10 = 0;
|
||||
if (list.length > 0) {
|
||||
console.log(this.weekDateList)
|
||||
// console.log(this.weekDateList)
|
||||
list.forEach(item => {
|
||||
let index = that.weekDateList.indexOf(item.日);
|
||||
countOkDept10[index] = item.合格数;
|
||||
|
|
@ -861,7 +872,7 @@ export default {
|
|||
});
|
||||
}
|
||||
that.taskBoard.data = data;
|
||||
console.log('getMaterialList', data)
|
||||
// console.log('getMaterialList', data)
|
||||
})
|
||||
},
|
||||
showTime() {
|
||||
|
|
@ -1074,7 +1085,7 @@ export default {
|
|||
const pickResult = scene.pick(scene.pointerX, scene.pointerY);
|
||||
if (pickResult.hit) {
|
||||
const mesh = pickResult.pickedMesh;
|
||||
console.log('mesh', mesh)
|
||||
// console.log('mesh', mesh)
|
||||
if (that.nodesLists[mesh.name]) {
|
||||
that.getDeptClickData(that.nodesLists[mesh.name])
|
||||
hl1Click.removeAllMeshes();
|
||||
|
|
@ -1119,7 +1130,7 @@ export default {
|
|||
},
|
||||
getDeptData(name) {
|
||||
this.infoVisibel = true;
|
||||
console.log('hoverName', name)
|
||||
// console.log('hoverName', name)
|
||||
if (name == '光学精密加工车间') { //6
|
||||
this.dialogData = this.dept6Obj;
|
||||
} else if (name == '光纤预制棒生产车间') {//7
|
||||
|
|
@ -1131,7 +1142,7 @@ export default {
|
|||
}
|
||||
},
|
||||
getDeptClickData(name) {
|
||||
console.log('clickName', name)
|
||||
// console.log('clickName', name)
|
||||
if (name == '光学精密加工车间') { //6
|
||||
this.currentData = this.dept6Obj;
|
||||
} else if (name == '光纤预制棒生产车间') {//7
|
||||
|
|
@ -1849,7 +1860,7 @@ export default {
|
|||
|
||||
.inforBlock.clickBlock {
|
||||
left: 50%;
|
||||
width: 630px;
|
||||
width: 520px;
|
||||
height: 225px;
|
||||
padding: 40px;
|
||||
font-size: 16px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue