371 lines
8.5 KiB
Python
371 lines
8.5 KiB
Python
<template>
|
|
<div id="center">
|
|
<div class="up">
|
|
<div
|
|
class="bg-color-black item"
|
|
v-for="item in titleItem"
|
|
:key="item.title"
|
|
>
|
|
<p class="ml-3 colorBlue fw-b fs-xl">{{ item.title }}</p>
|
|
<div v-if="numberShow">
|
|
<dv-digital-flop
|
|
class="dv-dig-flop ml-1 mt-2 pl-3"
|
|
:config="item.number"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="down">
|
|
<div class="ranking bg-color-black">
|
|
<span>
|
|
<el-icon class="el-icon-pie-chart"></el-icon>
|
|
</span>
|
|
<span class="fs-xl text mx-2 mb-1 pl-3">工序生产进度</span>
|
|
<dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
|
|
</div>
|
|
<div class="percent">
|
|
<div class="item bg-color-black">
|
|
<span>本月产品合格率</span>
|
|
<CenterChart
|
|
:id="rate[0].id"
|
|
:tips="rate[0].tips"
|
|
:colorObj="rate[0].colorData"
|
|
/>
|
|
</div>
|
|
<div class="item bg-color-black">
|
|
<span>本月任务完成率</span>
|
|
<CenterChart
|
|
:id="rate[1].id"
|
|
:tips="rate[1].tips"
|
|
:colorObj="rate[1].colorData"
|
|
/>
|
|
</div>
|
|
<div class="water">
|
|
<dv-water-level-pond class="dv-wa-le-po" :config="water" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getProductionplanList} from "@/api/pm";
|
|
import {getContractList, getOrderList} from "@/api/sam";
|
|
import CenterChart from '@/components/echart/chartRate.vue'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
contractTotalCurrent:0,
|
|
orderTotalCurrent:0,
|
|
planTotalCurrent:0,
|
|
selProductCurrent:0,
|
|
noProductCurrent:0,
|
|
numberShow:true,
|
|
/* 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: 55
|
|
},
|
|
{
|
|
name: '热弯成型',
|
|
value: 120
|
|
},
|
|
{
|
|
name: '化学钢化',
|
|
value: 78
|
|
},
|
|
{
|
|
name: '镀膜',
|
|
value: 66
|
|
},
|
|
{
|
|
name: '夹层',
|
|
value: 80
|
|
},
|
|
{
|
|
name: '包边',
|
|
value: 80
|
|
},
|
|
{
|
|
name: '装框',
|
|
value: 80
|
|
}
|
|
],
|
|
carousel: 'single',
|
|
unit: '/件'
|
|
},
|
|
water: {
|
|
data: [24, 45],
|
|
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'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]*/
|
|
}
|
|
},
|
|
components: {
|
|
CenterChart
|
|
},
|
|
props: {
|
|
titleItem:{
|
|
type:Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
} ,
|
|
rate:{
|
|
type:Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
} ,
|
|
water:{
|
|
type:Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
} ,
|
|
ranking:{
|
|
type:Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
} ,
|
|
},
|
|
methods:{
|
|
/* getData(){
|
|
let that = this;
|
|
that.numberShow = false;
|
|
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.$nextTick(()=>{
|
|
|
|
})
|
|
},*/
|
|
getContract(){
|
|
let that = this;
|
|
//合同
|
|
getContractList({type:'big_screen',page: 1, page_size: 1, create_time_start: that.create_time_start}).then((response) => {
|
|
if (response.data) {
|
|
that.numberShow = false;
|
|
that.titleItem[0].number.number[0] = response.data.count;
|
|
that.numberShow = true;
|
|
}
|
|
});
|
|
},
|
|
getOrder(){
|
|
let that = this;
|
|
//订单
|
|
getOrderList({type:'big_screen',page: 1, page_size: 1, create_time_start: that.create_time_start}).then((response) => {
|
|
if (response.data) {
|
|
that.numberShow = false;
|
|
that.titleItem[1].number.number[0] = response.data.count;
|
|
that.numberShow = true;
|
|
}
|
|
});
|
|
},
|
|
getProductionplan(){
|
|
let that = this;
|
|
//已排产任务
|
|
getProductionplanList({type:'big_screen',page: 1, page_size: 1, tag: 'working'}).then((response) => {
|
|
if (response.data) {
|
|
that.numberShow = false;
|
|
that.titleItem[2].number.number[0] = response.data.count;
|
|
that.numberShow = true;
|
|
}
|
|
});
|
|
},
|
|
},
|
|
mounted() {
|
|
let that = this;
|
|
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.getContract();
|
|
that.getOrder();
|
|
that.getProductionplan();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
.up {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
.item {
|
|
border-radius: 6px;
|
|
padding-top: 8px;
|
|
margin-top: 8px;
|
|
width: 32%;
|
|
height: 70px;
|
|
.dv-dig-flop {
|
|
width: 150px;
|
|
height: 30px;
|
|
}
|
|
}
|
|
}
|
|
.down {
|
|
padding: 6px 4px;
|
|
padding-bottom: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
height: 255px;
|
|
justify-content: space-between;
|
|
.bg-color-black {
|
|
border-radius: 5px;
|
|
}
|
|
.ranking {
|
|
padding: 10px;
|
|
width: 59%;
|
|
.dv-scr-rank-board {
|
|
height: 200px;
|
|
}
|
|
}
|
|
.percent {
|
|
width: 40%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.item {
|
|
width: 50%;
|
|
height: 120px;
|
|
span {
|
|
margin-top: 8px;
|
|
font-size: 14px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
.water {
|
|
width: 100%;
|
|
.dv-wa-le-po {
|
|
height: 120px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|