|
|
@@ -1,70 +1,38 @@
|
|
|
<template>
|
|
|
<div id="up1">
|
|
|
<div class="bg-color-black">
|
|
|
- <div class="d-flex pt-1 pl-2 jc-center">
|
|
|
- <span class="fs-xxl text mx-2 fw-b">当前工单</span>
|
|
|
+ <div class="d-flex">
|
|
|
+ <span>
|
|
|
+ <icon name="align-left" class="text-icon"></icon>
|
|
|
+ </span>
|
|
|
+ <span class="fs-xl text mx-2">设备维保执行情况</span>
|
|
|
</div>
|
|
|
- <div class="d-flex body-box">
|
|
|
- <div class = "left">
|
|
|
- <div class="item ">
|
|
|
- <p class="ml-3 colorText fw-b fs-xl">工单号
|
|
|
- <span class="dv-dig-flop ml-1 mt-2 pl-3"> {{ upitem.v_macode }}</span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="item">
|
|
|
- <p class="ml-3 colorText fw-b fs-xl">上线时间
|
|
|
- <span class="dv-dig-flop ml-1 mt-2 pl-1"> {{ upitem.v_sxdate }}
|
|
|
- </span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <p class="ml-3 colorText fw-b fs-xl">计划产出
|
|
|
- <span class="dv-dig-flop ml-1 mt-2 pl-3"> {{ upitem.v_planoutqty }}
|
|
|
- </span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <p class="ml-3 colorText fw-b fs-xl">实际产出
|
|
|
- <span class="dv-dig-flop ml-1 mt-2 pl-3"> {{ upitem.v_actoutqty }}
|
|
|
- </span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class="d-flex circleperent">
|
|
|
- <div class="item" v-for="item in rate" :key="item.id">
|
|
|
- <CenterChart :id="item.id" :tips="item.tips" :colorObj="item.colorData"/>
|
|
|
- <span >{{ item.title }}</span>
|
|
|
+ <div class="d-flex ai-center flex-column body-box">
|
|
|
+ <!--<dv-capsule-chart class="dv-cap-chart" :config="config" />-->
|
|
|
+ <div class="up">
|
|
|
+ <div
|
|
|
+ class="bg-color-black item"
|
|
|
+ v-for="item in titleItem"
|
|
|
+ :key="item.title"
|
|
|
+ >
|
|
|
+ <p class="ml-3 colorY fw-b fs-xl">{{ item.title }}</p>
|
|
|
+ <div>
|
|
|
+ <dv-digital-flop
|
|
|
+ class="dv-dig-flop ml-1 mt-2 pl-3"
|
|
|
+ :config="item.number"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class ="right">
|
|
|
- <div class="item fw-b d-flex flex-wrap text-left ml-3">
|
|
|
- <div class=" colorText fs-xl " style="width:20%">机型
|
|
|
- </div>
|
|
|
- <div style="width:80%">
|
|
|
- <p class="colorText fw-b fs-xl ">
|
|
|
- <span class="dv-dig-flop"> {{ upitem.v_jitype }}
|
|
|
- </span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <p class="ml-3 colorText fw-b fs-xl">剩余
|
|
|
- <span class="dv-dig-flop ml-1 mt-2 pl-3"> {{ upitem.v_resttime }}
|
|
|
- </span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <p class="ml-3 colorText fw-b fs-xl">当前工段良率
|
|
|
- <span class="dv-dig-flop ml-1 mt-2 pl-3"> {{ upitem.v_ztrate }}%
|
|
|
- </span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class="mt-3" >
|
|
|
- <span class="fs-xxl text mx-2 fw-b ">计划 VS 实际</span>
|
|
|
- <div class="pt-2 " style="margin-left:-30px">
|
|
|
- <BarChart :bardata="bardata" />
|
|
|
- </div>
|
|
|
+ <div class="percent">
|
|
|
+ <div class="item bg-color-black" v-for="item in rate"
|
|
|
+ :key="item.id">
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ <CenterChart
|
|
|
+ :id="item.id"
|
|
|
+ :tips="item.tips"
|
|
|
+ :colorObj="item.colorData"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -72,33 +40,24 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
+
|
|
|
<script>
|
|
|
import CenterChart from '@/components/prodlinechart/up1Chart/centerChartRate'
|
|
|
-import BarChart from '@/components/prodlinechart/up1Chart/bottomBarChart'
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
timing:null,
|
|
|
- upitem:{
|
|
|
- v_macode:'',
|
|
|
- v_jitype:'',
|
|
|
- v_sxdate:'',
|
|
|
- v_resttime:'',
|
|
|
- v_planoutqty:0,
|
|
|
- v_ztrate:0,
|
|
|
- v_actoutqty:0,
|
|
|
- v_planinqty:0,
|
|
|
- v_actinqty:0,
|
|
|
- v_licode:'',
|
|
|
- v_inrate:0,
|
|
|
- v_outrate:0
|
|
|
+ titleItem:[],
|
|
|
+ config: {
|
|
|
+ data: [],
|
|
|
+ showValue: true
|
|
|
},
|
|
|
+ // 通过率和达标率的组件复用数据
|
|
|
rate: [
|
|
|
{
|
|
|
id: 'centerRate1',
|
|
|
- tips: 0,
|
|
|
- title :'投入',
|
|
|
+ tips: 60,
|
|
|
colorData: {
|
|
|
textStyle: '#31b4fb',
|
|
|
series: {
|
|
|
@@ -112,8 +71,7 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
id: 'centerRate2',
|
|
|
- tips: 0,
|
|
|
- title :'产出',
|
|
|
+ tips: 60,
|
|
|
colorData: {
|
|
|
textStyle: '#43cfe9',
|
|
|
series: {
|
|
|
@@ -125,15 +83,67 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- ],
|
|
|
- bardata : {
|
|
|
- planData:[],
|
|
|
- actData:[],
|
|
|
- max : 1000,
|
|
|
- }
|
|
|
+ {
|
|
|
+ id: 'centerRate3',
|
|
|
+ tips: 60,
|
|
|
+ colorData: {
|
|
|
+ textStyle: '#6ad59c',
|
|
|
+ series: {
|
|
|
+ color: ['rgba(25,161,95,0.29)', 'transparent'],
|
|
|
+ dataColor: {
|
|
|
+ normal: '#00a11a',
|
|
|
+ shadowColor: '#6cda9c'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'centerRate4',
|
|
|
+ tips: 60,
|
|
|
+ colorData: {
|
|
|
+ textStyle: '#a9e6bf',
|
|
|
+ series: {
|
|
|
+ color: ['rgba(134,230,177,0.29)', 'transparent'],
|
|
|
+ dataColor: {
|
|
|
+ normal: '#9FE6B8',
|
|
|
+ shadowColor: '#afe6c2'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'centerRate5',
|
|
|
+ tips: 60,
|
|
|
+ colorData: {
|
|
|
+ textStyle: '#fff67f',
|
|
|
+ series: {
|
|
|
+ color: ['rgba(255,229,33,0.29)', 'transparent'],
|
|
|
+ dataColor: {
|
|
|
+ normal: '#ffe521',
|
|
|
+ shadowColor: '#fffab0'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'centerRate6',
|
|
|
+ tips: 60,
|
|
|
+ colorData: {
|
|
|
+ textStyle: '#ff9884',
|
|
|
+ series: {
|
|
|
+ color: ['rgba(255,114,97,0.29)', 'transparent'],
|
|
|
+ dataColor: {
|
|
|
+ normal: '#ff7261',
|
|
|
+ shadowColor: '#ffa58b'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
- components: {CenterChart,BarChart},
|
|
|
+ components: {CenterChart},
|
|
|
mounted() {
|
|
|
this.refreshdata();
|
|
|
},
|
|
|
@@ -149,60 +159,46 @@ export default {
|
|
|
},
|
|
|
|
|
|
async setdata() {
|
|
|
- //当前工单
|
|
|
- var caller = 'KB!LongLineMakeInfo';
|
|
|
- await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
|
|
|
- params: {
|
|
|
- condition: "V_OUTLINE='"+sessionStorage.getItem('ul_code')+"'" ,
|
|
|
- //"v_licode='"+sessionStorage.getItem('li_code')+"'",
|
|
|
- }
|
|
|
- }).then((result)=>{
|
|
|
- let dataList = JSON.parse(result.data.data);
|
|
|
- if(dataList.length>0){
|
|
|
- this.upitem = dataList[0];
|
|
|
- //圆形图
|
|
|
- this.rate[0].tips = dataList[0].v_inrate;
|
|
|
- this.rate[1].tips = dataList[0].v_outrate;
|
|
|
- //条形图 计划数
|
|
|
- let maxnumber = dataList[0].v_planinqty;
|
|
|
- if(dataList[0].v_planoutqty>maxnumber){
|
|
|
- maxnumber = dataList[0].v_planoutqty;
|
|
|
+ // 设备类别维保执行情况
|
|
|
+ this.config.data = [];
|
|
|
+ this.config = { ...this.config };
|
|
|
+ await this.$http.get("kanban/datalist.action?caller=ZZ!DeviceMaintainData&_noc=1&page=1&pageSize=100&condition=1=1")
|
|
|
+ .then((result)=>{
|
|
|
+ let dataList = JSON.parse(result.data.data);
|
|
|
+ let titleitems = new Array();
|
|
|
+ for (let index = 0; index < dataList.length; index++) {
|
|
|
+ const element = dataList[index];
|
|
|
+ titleitems.push({
|
|
|
+ title: element.name,
|
|
|
+ number: {
|
|
|
+ number: [element.value],
|
|
|
+ textAlign: 'left',
|
|
|
+ content: '{nt}',
|
|
|
+ style: {
|
|
|
+ fontSize: 26
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.titleItem = titleitems;
|
|
|
+ },(result)=>{
|
|
|
+ console.error(result)
|
|
|
}
|
|
|
- if(dataList[0].v_actinqty>maxnumber){
|
|
|
- maxnumber = dataList[0].v_actinqty;
|
|
|
- }
|
|
|
- if(dataList[0].v_actoutqty>maxnumber){
|
|
|
- maxnumber = dataList[0].v_actoutqty;
|
|
|
+ );
|
|
|
+
|
|
|
+ //饼图pie，设备保养执行率
|
|
|
+ await this.$http.get("kanban/datalist.action?caller=ZZ!DeviceMaintainRate&_noc=1&page=1&pageSize=100&condition=1=1")
|
|
|
+ .then((result)=>{
|
|
|
+ let dataList = JSON.parse(result.data.data);
|
|
|
+ for (let index = 0; index < dataList.length; index++) {
|
|
|
+ const element = dataList[index];
|
|
|
+ this.rate[index].tips = element.rate;
|
|
|
+ this.rate[index].title = element.title;
|
|
|
+ }
|
|
|
+ },(result)=>{
|
|
|
+ console.error(result)
|
|
|
}
|
|
|
- this.bardata.planData = [dataList[0].v_planinqty,dataList[0].v_planoutqty];
|
|
|
- this.bardata.actData = [dataList[0].v_actinqty,dataList[0].v_actoutqty];
|
|
|
- this.bardata.max = Math.ceil(maxnumber*1.2);
|
|
|
- //this.options.yAxis[0].max = (maxnumber*1.2).toFixed();
|
|
|
- }else{
|
|
|
- this.upitem={
|
|
|
- v_macode:'',
|
|
|
- v_jitype:'',
|
|
|
- v_sxdate:'',
|
|
|
- v_resttime:'',
|
|
|
- v_planoutqty:'',
|
|
|
- v_ztrate:'',
|
|
|
- v_actoutqty:'',
|
|
|
- v_planinqty:'',
|
|
|
- v_actinqty:'',
|
|
|
- v_licode:'',
|
|
|
- v_inrate:'',
|
|
|
- v_outrate:''
|
|
|
- },
|
|
|
- this.rate[0].tips=0;
|
|
|
- this.rate[1].tips =0;
|
|
|
- this.bardata.planData = [0,0];
|
|
|
- this.bardata.actData = [0,0];
|
|
|
- this.bardata.max = 1000;
|
|
|
- }
|
|
|
- },(result)=>{
|
|
|
- console.error(result)
|
|
|
- }
|
|
|
- );
|
|
|
+ );
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -213,71 +209,68 @@ $box-height: 430px;
|
|
|
$box-width: 100%;
|
|
|
#up1 {
|
|
|
padding: 13px;
|
|
|
+ // padding: 5px;
|
|
|
height: $box-height;
|
|
|
- font-size: 32px;
|
|
|
width: $box-width;
|
|
|
border-radius: 5px;
|
|
|
.bg-color-black {
|
|
|
+ padding: 5px;
|
|
|
height: $box-height - 25px;
|
|
|
- //width: $box-width - 10px;
|
|
|
+ // width: width - 5px;
|
|
|
border-radius: 10px;
|
|
|
- padding: 5px;
|
|
|
}
|
|
|
-
|
|
|
.text {
|
|
|
color: #c3cbde;
|
|
|
+ //font-size: 15px;
|
|
|
}
|
|
|
.body-box {
|
|
|
border-radius: 10px;
|
|
|
overflow: hidden;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- .left{
|
|
|
- width: 50%;
|
|
|
+
|
|
|
+ .dv-cap-chart {
|
|
|
+ width: 100%;
|
|
|
+ height: 160px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .up {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
.item {
|
|
|
border-radius: 6px;
|
|
|
padding-top: 8px;
|
|
|
margin-top: 8px;
|
|
|
- height: 45px;
|
|
|
+ width: 33%;
|
|
|
+ height: 65px;
|
|
|
+
|
|
|
.dv-dig-flop {
|
|
|
- width: 100%;
|
|
|
+ width: 150px;
|
|
|
height: 30px;
|
|
|
- font-size: 20px;
|
|
|
- color: #3de7c9;
|
|
|
}
|
|
|
- }
|
|
|
- .circleperent {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- .item {
|
|
|
- width: 50%;
|
|
|
- height: 118px;
|
|
|
- span {
|
|
|
- font-size: 18px;
|
|
|
- display: flex;
|
|
|
- padding-left: 40px;
|
|
|
- // justify-content: center;
|
|
|
- }
|
|
|
+
|
|
|
+ .colorY, .colorY:hover {
|
|
|
+ color: #00a11a !important
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .right{
|
|
|
- width: 50%;
|
|
|
+
|
|
|
+ .percent {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
.item {
|
|
|
- border-radius: 6px;
|
|
|
- padding-top: 8px;
|
|
|
- margin-top: 8px;
|
|
|
- height: 45px;
|
|
|
- .dv-dig-flop {
|
|
|
- width: 100%;
|
|
|
- height: 30px;
|
|
|
- font-size: 20px;
|
|
|
- color: #3de7c9;
|
|
|
- }
|
|
|
- .wrap {
|
|
|
- display: inline-block;
|
|
|
- width: 200px; /* 或者你想要的任何宽度 */
|
|
|
- word-wrap: break-word; /* 如果需要在单词之间断行 */
|
|
|
+ width: 33.3%;
|
|
|
+ height: 120px;
|
|
|
+ span {
|
|
|
+ //margin-top: 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
}
|
|
|
}
|
