<template>
|
<!-- 编号1 -->
|
<div class="screen1-plans module-block">
|
<block-title title="计划执行" />
|
<div class="module-content">
|
<div class="thead">
|
<div class="thead-inner">
|
<div class="first-cell"></div>
|
<div class="use-cell">数量总计</div>
|
</div>
|
</div>
|
<div class="tbody">
|
<div class="t-row" v-for="(scope,indexA) in obj" :key="'scroll-body-row-'+indexA">
|
<div class="first-cell">{{ scope.name }}</div>
|
<div class="use-cell">
|
<div class="num-div" v-for="(chr,index) in scope.data[0]" :key="'d-c-'+index">
|
<div class="corner coner-top-left"></div>
|
<div class="corner coner-top-right"></div>
|
<div class="corner coner-bottom-left"></div>
|
<div class="corner coner-bottom-right"></div>
|
<span>{{chr}}</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- <div class="t-row">
|
<div class="first-cell">立库完成</div>
|
<div class="use-cell">
|
<div class="num-div" v-for="(chr,index) in _numbers.dayCount" :key="'d-c-'+index">
|
<div class="corner coner-top-left"></div>
|
<div class="corner coner-top-right"></div>
|
<div class="corner coner-bottom-left"></div>
|
<div class="corner coner-bottom-right"></div>
|
<span>{{chr}}</span>
|
</div>
|
</div>
|
<div class="use-cell">
|
<div class="num-div" v-for="(chr,index) in _numbers.dayComplete" :key="'d-cp-'+index">
|
<div class="corner coner-top-left"></div>
|
<div class="corner coner-top-right"></div>
|
<div class="corner coner-bottom-left"></div>
|
<div class="corner coner-bottom-right"></div>
|
<span>{{chr}}</span>
|
</div>
|
</div>
|
</div> -->
|
|
<!--
|
|
<div class="t-row">
|
<div class="first-cell">平库完成</div>
|
<div class="use-cell">
|
<div class="num-div" v-for="(chr,index) in _numbers.dayComplete" :key="'d-cp-'+index">
|
<div class="corner coner-top-left"></div>
|
<div class="corner coner-top-right"></div>
|
<div class="corner coner-bottom-left"></div>
|
<div class="corner coner-bottom-right"></div>
|
<span>{{chr}}</span>
|
</div>
|
</div>
|
<div class="use-cell">
|
<div class="num-div" v-for="(chr,index) in _numbers.dayComplete" :key="'d-cp-'+index">
|
<div class="corner coner-top-left"></div>
|
<div class="corner coner-top-right"></div>
|
<div class="corner coner-bottom-left"></div>
|
<div class="corner coner-bottom-right"></div>
|
<span>{{chr}}</span>
|
</div>
|
</div>
|
</div>
|
<div class="t-row">
|
<div class="first-cell">本月计划</div>
|
<div class="use-cell">
|
<div class="num-div" v-for="(chr,index) in _numbers.dayComplete" :key="'d-cp-'+index">
|
<div class="corner coner-top-left"></div>
|
<div class="corner coner-top-right"></div>
|
<div class="corner coner-bottom-left"></div>
|
<div class="corner coner-bottom-right"></div>
|
<span>{{chr}}</span>
|
</div>
|
</div>
|
<div class="use-cell">
|
<div class="num-div" v-for="(chr,index) in _numbers.dayComplete" :key="'d-cp-'+index">
|
<div class="corner coner-top-left"></div>
|
<div class="corner coner-top-right"></div>
|
<div class="corner coner-bottom-left"></div>
|
<div class="corner coner-bottom-right"></div>
|
<span>{{chr}}</span>
|
</div>
|
</div>
|
</div>
|
<div class="t-row">
|
<div class="first-cell">本年计划</div>
|
<div class="use-cell">
|
<div class="num-div" v-for="(chr,index) in _numbers.dayComplete" :key="'d-cp-'+index">
|
<div class="corner coner-top-left"></div>
|
<div class="corner coner-top-right"></div>
|
<div class="corner coner-bottom-left"></div>
|
<div class="corner coner-bottom-right"></div>
|
<span>{{chr}}</span>
|
</div>
|
</div>
|
<div class="use-cell">
|
<div class="num-div" v-for="(chr,index) in _numbers.dayComplete" :key="'d-cp-'+index">
|
<div class="corner coner-top-left"></div>
|
<div class="corner coner-top-right"></div>
|
<div class="corner coner-bottom-left"></div>
|
<div class="corner coner-bottom-right"></div>
|
<span>{{chr}}</span>
|
</div>
|
</div>
|
</div> -->
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import BlockTitle from './BlockTitle.vue'
|
export default {
|
name:'screen1Plans',
|
components:{BlockTitle},
|
props:{
|
obj:{
|
type:Object,
|
default:function(){
|
return {}
|
}
|
}
|
},
|
computed:{
|
_numbers(){
|
let res = {
|
yearCount:'0000',
|
yearComplete:'0000',
|
monthCount:'0000',
|
}
|
res.yearCount = this.formatCountX(this.obj.YEARIssue_Count);
|
res.yearComplete = this.formatCountX(this.obj.YEAROK_Count);
|
res.monthCount = this.formatCountX(this.obj.MONTHIssue_Count);
|
return res;
|
}
|
},
|
methods:{
|
formatCount(val) {
|
let res = '0000';
|
if (val) {
|
if (val>9999) val = 9999;
|
res = this.$utils.numberFormat(val,4);
|
}
|
return res;
|
},
|
formatCountX(val) {
|
let res = '000000';
|
if (val) {
|
if (val>999999) val = 999999;
|
res = this.$utils.numberFormat(val,6);
|
}
|
return res;
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
@font-face {
|
font-family: yejing;
|
src:url('@/assets/fonts/yejing.TTF');
|
}
|
</style>
|
<style lang="scss" scoped>
|
.screen1-plans{
|
height: 100%;
|
.module-content {
|
display: flex;
|
flex-direction: column;
|
padding-bottom: 10px;
|
.thead{
|
height: 26px;
|
flex-shrink: 0;
|
color: #e4ffff;
|
font-size: 12px;
|
.thead-inner{
|
height: 100%;
|
}
|
}
|
.tbody{
|
flex-grow: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.t-row{
|
height: 40px;
|
border: 1px solid #085e84;
|
}
|
}
|
.thead-inner,.t-row{
|
display: flex;
|
.first-cell,.use-cell{
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.first-cell{
|
width:150px;
|
flex-shrink: 0;
|
color: #e4ffff;
|
font-size: 18px;
|
}
|
.use-cell{
|
width: 10px;
|
flex-grow: 1;
|
}
|
}
|
.t-row{
|
.use-cell {
|
padding: 4px 0;
|
}
|
}
|
.num-div{
|
font-family: yejing;
|
color: #ffff00;
|
font-size: 15px;
|
height: 100%;
|
width: 13px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background-color: #012b8a;
|
box-sizing: border-box;
|
border: 1px solid #002ea6;
|
position: relative;
|
.corner{
|
$cornerSize:3px;
|
position: absolute;
|
border-style: solid;
|
border-color: #15afa9;
|
width: $cornerSize;
|
height: $cornerSize;
|
z-index: 1;
|
}
|
.coner-top-left{
|
top: 0;
|
left: 0;
|
border-width: 1px 0 0 1px;
|
}
|
.coner-top-right{
|
top: 0;
|
right: 0;
|
border-width: 1px 1px 0 0;
|
}
|
.coner-bottom-left{
|
bottom: 0;
|
left: 0;
|
border-width: 0 0 1px 1px;
|
}
|
.coner-bottom-right{
|
bottom: 0;
|
right: 0;
|
border-width: 0 1px 1px 0;
|
}
|
&+.num-div{
|
margin-left: 4px;
|
}
|
&.num-div-total{
|
width: 84px;
|
}
|
}
|
}
|
}
|
</style>
|
