693 lines
21 KiB
Python
693 lines
21 KiB
Python
<template>
|
|
<div id="index" ref="appRef">
|
|
<div class="bg">
|
|
<!--<dv-loading v-show="loading">Loading...</dv-loading>-->
|
|
<div class="host-body">
|
|
<div class="d-flex jc-center" id="firstLine">
|
|
<dv-decoration-10 class="dv-dec-10"/>
|
|
<div class="d-flex jc-center">
|
|
<dv-decoration-8 class="dv-dec-8" :color="['#568aea', '#000000']"/>
|
|
<div class="title">
|
|
<div class="title-text">
|
|
<span style="margin-right: 20px">航玻生产</span><span>管理系统</span>
|
|
</div>
|
|
<dv-decoration-6
|
|
class="dv-dec-6"
|
|
:reverse="true"
|
|
:color="['#50e3c2', '#67a1e5']"
|
|
/>
|
|
</div>
|
|
<dv-decoration-8
|
|
class="dv-dec-8"
|
|
:reverse="true"
|
|
:color="['#568aea', '#000000']"
|
|
/>
|
|
</div>
|
|
<dv-decoration-10 class="dv-dec-10-s"/>
|
|
</div>
|
|
<!-- 第二行 -->
|
|
<div class="d-flex jc-between px-2">
|
|
<div class="d-flex aside-width">
|
|
<div class="react-left ml-4 react-l-s">
|
|
<span class="react-before"></span>
|
|
<span class="text">数据统计</span>
|
|
</div>
|
|
<div class="react-right ml-3">
|
|
<!--<span class="text">数据分析2</span>-->
|
|
</div>
|
|
</div>
|
|
<div class="d-flex aside-width">
|
|
<div class="react-right bg-color-blue mr-3">
|
|
<span class="text fw-b">车间详情</span>
|
|
</div>
|
|
<div class="react-right mr-4 react-l-s">
|
|
<span class="react-after"></span>
|
|
<span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="body-box">
|
|
<!-- 第三行数据 -->
|
|
<div id="centerWrap" class="content-box">
|
|
<!-- 数据统计 -->
|
|
<div>
|
|
<center
|
|
v-if="numberShow"
|
|
:titleItem="titleItem"
|
|
:rate="rate"
|
|
:water="water"
|
|
:ranking="ranking"
|
|
/>
|
|
</div>
|
|
<!--工序成品率-->
|
|
<div>
|
|
<centerRight2
|
|
v-if="processRate"
|
|
:config="config"
|
|
/>
|
|
</div>
|
|
<!--一车间-->
|
|
<div>
|
|
<dv-border-box-1>
|
|
<centerLeft1
|
|
v-if="limitedOne"
|
|
:numberData="numberData"
|
|
/>
|
|
</dv-border-box-1>
|
|
</div>
|
|
<!--二车间-->
|
|
<div>
|
|
<dv-border-box-1>
|
|
<centerLeft2
|
|
v-if="limitedTwo"
|
|
:numberDataTwo="numberDataTwo"
|
|
/>
|
|
</dv-border-box-1>
|
|
</div>
|
|
<!--到岗情况-->
|
|
<div>
|
|
<dv-border-box-10>
|
|
<centerRight1
|
|
v-if="listUser"
|
|
:userConfig="userConfig"
|
|
/>
|
|
</dv-border-box-10>
|
|
</div>
|
|
</div>
|
|
<!-- 第四行数据 -->
|
|
<div class="bototm-box">
|
|
<dv-border-box-3 v-if="limitedTwo">
|
|
<bottomRight
|
|
:configArticle="configArticle"
|
|
/>
|
|
</dv-border-box-3>
|
|
<dv-border-box-13>
|
|
<bottomLeft
|
|
v-if="limitedTwo"
|
|
/>
|
|
</dv-border-box-13>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import drawMixin from "../../utils/drawMixin";
|
|
import {formatTimeBigScreen} from '../../utils/index.js'
|
|
import centerLeft1 from './centerLeft1'
|
|
import centerLeft2 from './centerLeft2'
|
|
import centerRight1 from './centerRight1'
|
|
import centerRight2 from './centerRight2'
|
|
import center from './center'
|
|
import {getEmployee} from "@/api/hrm";
|
|
import bottomLeft from './bottomLeft'
|
|
import bottomRight from './bottomRight'
|
|
import {getPlanGantt} from "@/api/srm";
|
|
import {getProductionplanList} from "@/api/pm";
|
|
import {getProcessYield,productCount,getProcessNow,planCount,orderCount} from "@/api/srm";
|
|
import {getContractList, getOrderList} from "@/api/sam";
|
|
import {getArticles} from "@/api/cms";
|
|
|
|
export default {
|
|
mixins: [drawMixin],
|
|
data() {
|
|
return {
|
|
timing: null,
|
|
loading: true,
|
|
dateDay: null,
|
|
dateYear: null,
|
|
dateWeek: null,
|
|
planGanttList: [],
|
|
numberShow: false,
|
|
processRate: false,
|
|
listUser: false,
|
|
create_time_start: '',
|
|
titleItem: [
|
|
{
|
|
title: '本月合同数',
|
|
number: {
|
|
number: [12],//数字数值
|
|
toFixed: 0,//小数位数
|
|
textAlign: 'left',//水平对齐方式
|
|
content: '{nt}',//内容模版//rowGap行间距
|
|
style: {//样式配置
|
|
fontSize: 26
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: '本月生产订单数',
|
|
number: {
|
|
number: [12],
|
|
toFixed: 0,
|
|
textAlign: 'left',
|
|
content: '{nt}',
|
|
style: {
|
|
fontSize: 26
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: '本月在制任务数',
|
|
number: {
|
|
number: [2],
|
|
toFixed: 0,
|
|
textAlign: 'left',
|
|
content: '{nt}',
|
|
style: {
|
|
fontSize: 26
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: '本月交付产品数',
|
|
number: {
|
|
number: [8],
|
|
toFixed: 0,
|
|
textAlign: 'left',
|
|
content: '{nt}',
|
|
style: {
|
|
fontSize: 26
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: '本月不合格产品数',
|
|
number: {
|
|
number: [2],
|
|
toFixed: 0,
|
|
textAlign: 'left',
|
|
content: '{nt}',
|
|
style: {
|
|
fontSize: 26
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: '本月军检合格率',
|
|
number: {
|
|
number: [99],
|
|
toFixed: 1,
|
|
textAlign: 'left',
|
|
content: '{nt}%',
|
|
style: {
|
|
fontSize: 26
|
|
}
|
|
}
|
|
},
|
|
],
|
|
ranking: {
|
|
data: [
|
|
{
|
|
name: '冷加工',
|
|
value: 100
|
|
},
|
|
{
|
|
name: '热弯成型',
|
|
value: 100
|
|
},
|
|
{
|
|
name: '化学钢化',
|
|
value: 100
|
|
},
|
|
{
|
|
name: '镀膜',
|
|
value: 100
|
|
},
|
|
{
|
|
name: '夹层',
|
|
value: 100
|
|
},
|
|
{
|
|
name: '包边',
|
|
value: 100
|
|
},
|
|
{
|
|
name: '装框',
|
|
value: 100
|
|
}
|
|
],
|
|
carousel: 'single',
|
|
unit: '%'
|
|
},
|
|
water: {
|
|
data: [45, 90],
|
|
shape: 'roundRect',
|
|
formatter: '{value}%',
|
|
waveNum: 3
|
|
},
|
|
// 通过率和达标率的组件复用数据
|
|
rate: [
|
|
{
|
|
id: 'centerRate1',
|
|
tips: 98,
|
|
colorData: {
|
|
textStyle: '#3fc0fb',
|
|
series: {
|
|
color: ['#00bcd44a', 'transparent'],
|
|
dataColor: {
|
|
normal: '#03a9f4',
|
|
shadowColor: '#97e2f5'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
id: 'centerRate2',
|
|
tips: 99,
|
|
colorData: {
|
|
textStyle: '#67e0e3',
|
|
series: {
|
|
color: ['#faf3a378', 'transparent'],
|
|
dataColor: {
|
|
normal: '#ff9800',
|
|
shadowColor: '#fcebad'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
],
|
|
config: {
|
|
data: []
|
|
},
|
|
//人员到岗
|
|
userConfig: {
|
|
header: ['姓名', '到岗情况'],
|
|
data: [
|
|
['冯宝宝', "<span class='colorGrass'>已到岗</span>"]
|
|
],
|
|
rowNum: 7, //表格行数
|
|
headerHeight: 35,
|
|
headerBGC: '#0f1325', //表头
|
|
oddRowBGC: '#0f1325', //奇数行
|
|
evenRowBGC: '#171c33', //偶数行
|
|
index: false,
|
|
columnWidth: [70],
|
|
align: ['center']
|
|
},
|
|
//车间一
|
|
numberData: [
|
|
{
|
|
number: {
|
|
number: [0],
|
|
toFixed: 0,
|
|
textAlign: 'left',
|
|
content: '{nt}',
|
|
style: {
|
|
fontSize: 24
|
|
}
|
|
},
|
|
text: '今日产量'
|
|
},
|
|
{
|
|
number: {
|
|
number: [0],
|
|
toFixed: 0,
|
|
textAlign: 'left',
|
|
content: '{nt}',
|
|
style: {
|
|
fontSize: 24
|
|
}
|
|
},
|
|
text: '年累计完成量'
|
|
},
|
|
{
|
|
number: {
|
|
number: [0],
|
|
toFixed: 0,
|
|
textAlign: 'left',
|
|
content: '{nt}',
|
|
style: {
|
|
fontSize: 24
|
|
}
|
|
},
|
|
text: '在制品数量'
|
|
},
|
|
{
|
|
number: {
|
|
number: [0],
|
|
toFixed: 0,
|
|
textAlign: 'left',
|
|
content: '{nt}',
|
|
style: {
|
|
fontSize: 24
|
|
}
|
|
},
|
|
text: '不合格数量'
|
|
},
|
|
|
|
],
|
|
limitedOne:false,
|
|
//车间二
|
|
numberDataTwo: [
|
|
{
|
|
number: {
|
|
number: [0],
|
|
toFixed: 0,
|
|
textAlign: 'left',
|
|
content: '{nt}',
|
|
style: {
|
|
fontSize: 24
|
|
}
|
|
},
|
|
text: '今日产量'
|
|
},
|
|
{
|
|
number: {
|
|
number: [0],
|
|
toFixed: 0,
|
|
textAlign: 'left',
|
|
content: '{nt}',
|
|
style: {
|
|
fontSize: 24
|
|
}
|
|
},
|
|
text: '年累计完成量'
|
|
},
|
|
{
|
|
number: {
|
|
number: [0],
|
|
toFixed: 0,
|
|
textAlign: 'left',
|
|
content: '{nt}',
|
|
style: {
|
|
fontSize: 24
|
|
}
|
|
},
|
|
text: '在制品数量'
|
|
},
|
|
{
|
|
number: {
|
|
number: [0],
|
|
toFixed: 0,
|
|
textAlign: 'left',
|
|
content: '{nt}',
|
|
style: {
|
|
fontSize: 24
|
|
}
|
|
},
|
|
text: '不合格数量'
|
|
},
|
|
|
|
],
|
|
limitedTwo:false,
|
|
configArticle: {
|
|
header: ['标题','置顶','作者', '发布时间'],
|
|
data: [
|
|
['郑成功', '2022-03-05'],
|
|
['冯宝宝', '2022-03-05']
|
|
],
|
|
rowNum: 15, //表格行数
|
|
headerHeight: 40,
|
|
headerBGC: '#0f1325', //表头
|
|
oddRowBGC: '#0f1325', //奇数行
|
|
evenRowBGC: '#171c33', //偶数行
|
|
index: false,
|
|
// columnWidth: [50],
|
|
align: ['center']
|
|
},
|
|
weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
|
|
}
|
|
},
|
|
components: {
|
|
centerLeft1,
|
|
centerLeft2,
|
|
centerRight1,
|
|
centerRight2,
|
|
center,
|
|
bottomLeft,
|
|
bottomRight
|
|
},
|
|
created() {
|
|
// window.open('http://49.232.14.174:2222/#/index');
|
|
// this.$router.go(-1)
|
|
},
|
|
mounted() {
|
|
let that = this;
|
|
this.timeFn();
|
|
this.cancelLoading();
|
|
this.getPageData();
|
|
let bigHeight = document.getElementsByClassName('host-body')[0].clientHeight;
|
|
let firstHeight = document.getElementById('firstLine').clientHeight;
|
|
let secondHeight = document.getElementsByClassName('jc-between')[0].clientHeight;
|
|
let domHeight = (bigHeight / 2) - firstHeight - secondHeight - 30;
|
|
document.getElementById('centerWrap').style.height = domHeight + 'px';
|
|
let dat = new Date();
|
|
that.week = dat.getDay();
|
|
that.currentTime = dat.getTime();
|
|
that.currentYear = dat.getFullYear();
|
|
let month = dat.getMonth() + 1;
|
|
that.currentMonth = month > 9 ? month : '0' + month;
|
|
that.currentDay = dat.getDate();
|
|
that.create_time_start = that.currentYear + '-' + that.currentMonth + '-01';
|
|
that.getCenterData();
|
|
that.getCenterRight2Data();
|
|
that.getUserList();
|
|
that.getOneData();//车间一
|
|
that.getTwoData();//车间二
|
|
that.getArticle();
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.timing)
|
|
},
|
|
methods: {
|
|
timeFn() {
|
|
this.timing = setInterval(() => {
|
|
this.dateDay = formatTimeBigScreen(new Date(), 'HH: mm: ss')
|
|
this.dateYear = formatTimeBigScreen(new Date(), 'yyyy-MM-dd')
|
|
this.dateWeek = this.weekday[new Date().getDay()]
|
|
}, 1000)
|
|
},
|
|
getPageData() {
|
|
let that = this;
|
|
getPlanGantt({type: 'big_screen'}).then(res => {
|
|
if (res.code === 200) {
|
|
this.planGanttList = res.data.results;
|
|
} else {
|
|
that.$message.error(res.msg);
|
|
}
|
|
})
|
|
},
|
|
cancelLoading() {
|
|
setTimeout(() => {
|
|
this.loading = false
|
|
}, 500)
|
|
},
|
|
getCenterData() {
|
|
let that = this;
|
|
let dat = new Date();
|
|
let Year = dat.getFullYear();
|
|
let month = dat.getMonth() + 1;
|
|
let searchTime = Year + '-' + month + '-01';
|
|
that.numberShow = false;
|
|
getContractList({ //合同
|
|
type: 'big_screen',
|
|
page: 1,
|
|
page_size: 1,
|
|
create_time_start: that.create_time_start
|
|
}).then((response) => {
|
|
if (response.data) {
|
|
that.titleItem[0].number.number[0] = response.data.count;
|
|
getOrderList({
|
|
type: 'big_screen',
|
|
page: 1,
|
|
page_size: 1,
|
|
create_time_start: that.create_time_start
|
|
}).then((respons) => {//订单
|
|
if (respons.data) {
|
|
that.titleItem[1].number.number[0] = respons.data.count;
|
|
getProductionplanList({type: 'big_screen', page: 1, page_size: 1, tag: 'working'}).then((respon) => {
|
|
if (respon.data) {
|
|
that.titleItem[2].number.number[0] = respon.data.count;
|
|
productCount({type: 'big_screen',datetime_start:searchTime,tag:1}).then(respo=>{
|
|
if (respo.data) {
|
|
that.titleItem[3].number.number[0] = respo.data.count_selled;
|
|
that.titleItem[4].number.number[0] = respo.data.count_notok;
|
|
let mtestCount = respo.data.count_mtestok + respo.data.count_mtestnotok;
|
|
that.titleItem[5].number.number[0] = Math.floor((respo.data.count_mtestok/mtestCount)*100);
|
|
that.rate[0].tips = Math.floor((respo.data.count_ok/respo.data.count)*100);
|
|
getProcessNow({type: 'big_screen'}).then(res=>{//工序生产进度
|
|
if (res.data) {
|
|
let list = res.data;
|
|
let data = [];
|
|
list.forEach(item => {
|
|
let obj = new Object();
|
|
obj.name = item.process__name;
|
|
let value = Math.floor(item.count/item.count_real * 100);
|
|
obj.value = value>100?100:value;
|
|
data.push(obj)
|
|
});
|
|
that.ranking.data = data;
|
|
//任务完成率
|
|
/* planCount({type: 'big_screen'}).then(res=>{
|
|
debugger;
|
|
})*/
|
|
//准时交付率
|
|
/*getOrderList({type: 'big_screen',page: 1, page_size: that.warningPageSize, tag: 'near_delivery'}).then((response) => {
|
|
if (response.data) {
|
|
that.warningList = response.data.results;
|
|
that.warningTotal = response.data.count;
|
|
}
|
|
});*/
|
|
that.numberShow = true;
|
|
}
|
|
})
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
getCenterRight2Data() {
|
|
let that = this;
|
|
that.processRate = false;
|
|
let dat = new Date();
|
|
let Year = dat.getFullYear();
|
|
let month = dat.getMonth() + 1;
|
|
let day = dat.getDate();
|
|
let searchTime = Year + '-' + month + '-' + day;
|
|
getProcessYield({datetime_start: searchTime, datetime_end: searchTime,type:'big_screen'}).then((response) => {
|
|
if (response.data) {
|
|
let list = response.data;
|
|
let data = [];
|
|
list.forEach(item => {
|
|
let obj = new Object();
|
|
obj.name = item.name;
|
|
obj.value = Math.floor(item.rate * 100);
|
|
// obj.value = rate.toFixed(2);
|
|
data.push(obj)
|
|
});
|
|
that.config.data = data;
|
|
that.processRate = true;
|
|
}
|
|
});
|
|
},
|
|
//一车间
|
|
getOneData(){
|
|
let that = this;
|
|
that.limitedOne = false;
|
|
let dat = new Date();
|
|
let Year = dat.getFullYear();
|
|
let month = dat.getMonth() + 1;
|
|
let searchTime = Year + '-' + month + '-01';
|
|
let searchYear = Year + '-' + '01-01';
|
|
productCount({type: 'big_screen',datetime_start:searchTime,tag:2,dept:1}).then(response=>{
|
|
if (response.data) {
|
|
that.numberData[0].number.number[0] = response.data.count;
|
|
that.numberData[2].number.number[0] = response.data.count_doing;
|
|
that.numberData[3].number.number[0] = response.data.count_notok;
|
|
productCount({type: 'big_screen',datetime_start:searchYear,tag:2,dept:1}).then(res=>{
|
|
if (res.data) {
|
|
that.numberData[1].number.number[0] = res.data.count;
|
|
that.limitedOne = true;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
//二车间
|
|
getTwoData(){
|
|
let that = this;
|
|
that.limitedTwo = false;
|
|
let dat = new Date();
|
|
let Year = dat.getFullYear();
|
|
let month = dat.getMonth() + 1;
|
|
let searchTime = Year + '-' + month + '-01';
|
|
let searchYear = Year + '-' + '01-01';
|
|
productCount({type: 'big_screen',datetime_start:searchTime,tag:2,dept:2}).then(response=>{
|
|
if (response.data) {
|
|
that.numberDataTwo[0].number.number[0] = response.data.count;
|
|
that.numberDataTwo[2].number.number[0] = response.data.count_doing;
|
|
that.numberDataTwo[3].number.number[0] = response.data.count_notok;
|
|
productCount({type: 'big_screen',datetime_start:searchYear,tag:2,dept:2}).then(res=>{
|
|
if (res.data) {
|
|
that.numberDataTwo[1].number.number[0] = res.data.count;
|
|
that.limitedTwo = true;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
//人员到岗情况列表
|
|
getUserList() {
|
|
let that = this;
|
|
that.listUser = false;
|
|
getEmployee({page: 0,type:'big_screen'}).then((response) => {
|
|
if (response.data) {
|
|
let list = response.data.results;
|
|
let data = [];
|
|
list.forEach(item => {
|
|
let obj = [];
|
|
obj.push(item.name);
|
|
// obj.push(item.dept_.name);
|
|
if (item.is_atwork) {
|
|
obj.push("<span class='colorGrass'>已到岗</span>")
|
|
} else {
|
|
obj.push("<span class='colorRed'>未到岗</span>")
|
|
}
|
|
data.push(obj)
|
|
});
|
|
that.userConfig.data = data;
|
|
that.listUser = true;
|
|
}
|
|
});
|
|
},
|
|
//企业资讯
|
|
getArticle(){
|
|
let that = this;
|
|
getArticles({type: 'big_screen',page:0}).then((response) => {
|
|
if (response.data) {
|
|
// this.configArticle = response.data;
|
|
let list = response.data;
|
|
let data=[];
|
|
list.forEach(item => {
|
|
let obj = [];
|
|
obj.push(item.title);
|
|
if(item.is_top===false){
|
|
obj.push('未置顶');
|
|
}else{
|
|
obj.push('已置顶');
|
|
}
|
|
obj.push(item.author);
|
|
obj.push(item.create_time);
|
|
data.push(obj)
|
|
});
|
|
that.configArticle.data=data;
|
|
}
|
|
});
|
|
},
|
|
|
|
//任务完成进度
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '../../assets/scss/index';
|
|
</style>
|