Merge branch 'main' of https://git.positivepole.cn/dev/GScreenWEB_TPMes
This commit is contained in:
commit
ed6844931d
|
|
@ -19,25 +19,20 @@
|
|||
<div class="ccmc-title">
|
||||
本月工单概况
|
||||
</div>
|
||||
<!-- <div class="ccmc-items">
|
||||
<div class="station-info" v-for="(item, index) in rightData" :key="index">
|
||||
<div class="ccmc-items" v-show="dataType =='3'">
|
||||
<div class="station-info" v-for="(item, index) in leftData.slice(0,2)" :key="index">
|
||||
<img :src="item.icon" alt="icon" class="station-icon">
|
||||
<div class="station-name">{{ item.name }}</div>
|
||||
<div class="station-value">{{ item.value }}</div>
|
||||
<div class="station-name" style="margin-left: 30px;">{{ item.name }}</div>
|
||||
<div class="station-value" style="margin-left: 30px;">{{ item.value }}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="right-box-items">
|
||||
<div class="rbi-info" v-for="(item, index) in rightData" :key="index">
|
||||
<img :src="item.icon" alt="icon" class="rbi-icon">
|
||||
<div class="rbi-text">
|
||||
<div class="rbi-name">{{ item.name }}</div>
|
||||
<div class="rbi-value">{{ item.value }}</div>
|
||||
</div>
|
||||
<div class="station-info">
|
||||
<dv-charts :option="oiloption" style="width: 300px;height: 300px;"/>
|
||||
<!-- <img :src="leftData[2].icon" alt="icon" class="station-icon"> -->
|
||||
<div class="station-name">{{ leftData[2].name }}</div>
|
||||
<div class="station-value">{{ leftData[2].value }}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="right-container-new">
|
||||
</div>
|
||||
<div class="right-container-new" v-show="dataType != '3'">
|
||||
<!-- 第一行 -->
|
||||
<div class="first-row">
|
||||
<img src="../../img/icons/16.png" class="fc-icon">
|
||||
|
|
@ -66,6 +61,7 @@
|
|||
<div class="ccmc-middle">
|
||||
<PieChart :dataType="dataType"></PieChart>
|
||||
</div>
|
||||
|
||||
<div class="ccmc-left">
|
||||
<div class="ccmc-title">
|
||||
{{dataType=='3'?'未完成订单数量':'保养及备料信息'}}
|
||||
|
|
@ -73,11 +69,20 @@
|
|||
<div class="new-bar-chart" v-show="dataType !='3'">
|
||||
<div id="echarts-new" style="height: 400px;width: 800px;"></div>
|
||||
</div>
|
||||
<div class="ccmc-items" v-show="dataType=='3'">
|
||||
<div class="station-info" v-for="(item, index) in rightData" :key="index">
|
||||
<img :src="item.icon" alt="icon" class="station-icon">
|
||||
<div class="station-value">{{ item.value }}</div>
|
||||
<div class="station-name">{{ item.name }}</div>
|
||||
<div class="right-container-new" v-show="dataType =='3'">
|
||||
<!-- 第一行 -->
|
||||
<!-- 第二行 -->
|
||||
<div class="second-row">
|
||||
<div
|
||||
class="item-card"
|
||||
style="width: 325px;height: 135px;"
|
||||
v-for="(item, index) in rightData"
|
||||
:key="index"
|
||||
>
|
||||
<!-- <img :src="item.icon" class="sc-icon"> -->
|
||||
<p class="sc-name2">{{ item.name }}</p>
|
||||
<p class="sc-value2">{{ item.value }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -114,9 +119,9 @@ export default {
|
|||
{ icon: require(`@/img/icons/12.png`), name: '本月派工完成率', value: '100%' }
|
||||
];
|
||||
const originalLeftData2 = [
|
||||
{ icon: require(`@/img/icons/1.png`), name: '完成工单数', value: '1120' },
|
||||
{ icon: require(`@/img/icons/2.png`), name: '生产中工单数', value: '600' },
|
||||
{ icon: require(`@/img/icons/3.png`), name: '本月生产完成率', value: '100%' }
|
||||
{ icon: require(`@/img/icons/12.png`), name: '派工数量', value: '1120' },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '未完工数量', value: '600' },
|
||||
{ icon: require(`@/img/icons/12.png`), name: '工单订成率', value: '100%' }
|
||||
];
|
||||
|
||||
const originalRightData = [
|
||||
|
|
@ -168,7 +173,32 @@ export default {
|
|||
{ icon: require(`@/img/icons/12.png`), name: '盖板备料进度', value: 85 }
|
||||
]
|
||||
},
|
||||
oiloption:{
|
||||
grid:{
|
||||
top:'5%',left:'0%',right:'5%',bottom:'5%'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
data: [ { name: 'itemA', value: 100 } ],
|
||||
center: ['50%', '55%'],
|
||||
axisLabel: {
|
||||
formatter: '{value}%',
|
||||
style: {
|
||||
fill: '#fff',
|
||||
fontSize: 20,
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
style: {
|
||||
stroke: '#fff'
|
||||
}
|
||||
},
|
||||
|
||||
animationCurve: 'easeInOutBack'
|
||||
}
|
||||
]
|
||||
},
|
||||
labelConfig: {
|
||||
|
||||
data: ['机芯产量', '盖板产量']
|
||||
|
|
@ -264,13 +294,16 @@ export default {
|
|||
flex-direction: column;
|
||||
|
||||
.station-icon {
|
||||
width: 190px;
|
||||
width: 225px;
|
||||
margin-top: 60px;
|
||||
margin-left: 30px;
|
||||
margin-bottom: 20px;
|
||||
// height: 80px;
|
||||
// margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.station-name {
|
||||
font-size: 23px;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
|
|
@ -278,7 +311,7 @@ export default {
|
|||
}
|
||||
|
||||
.station-value {
|
||||
font-size: 30px;
|
||||
font-size: 35px;
|
||||
font-weight: bold;
|
||||
color: #08e5ff;
|
||||
text-align: center;
|
||||
|
|
@ -488,12 +521,28 @@ export default {
|
|||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.sc-name2{
|
||||
font-size:30px;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
width: 95%;
|
||||
border-left:5px solid #08e5ff;
|
||||
}
|
||||
.sc-value{
|
||||
font-size: 35px;
|
||||
text-align: center;
|
||||
color: #08e5ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.sc-value2{
|
||||
font-size: 55px;
|
||||
text-align: center;
|
||||
color: #08e5ff;
|
||||
font-weight: bold;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.sc-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
|
|
|||
|
|
@ -72,9 +72,9 @@ export default {
|
|||
this.dataType = ''; // 如果不是 '1'，则设置为空
|
||||
}
|
||||
|
||||
setInterval(() => {
|
||||
this.switchType = this.switchType == 1 ? 2 : 1
|
||||
}, 15000); // 10000 毫秒 = 10 秒
|
||||
// setInterval(() => {
|
||||
// this.switchType = this.switchType == 1 ? 2 : 1
|
||||
// }, 15000); // 10000 毫秒 = 10 秒
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -19,15 +19,15 @@
|
|||
</div>
|
||||
<div class="item-box" style="top: 100px;right: 0;text-align: left;">
|
||||
<div class="item-value-box">
|
||||
<div class="triangle-right" style="border-left:20px solid #ffdc9d;"></div>
|
||||
<p class="item-value" style="color: #ffdc9d;">{{ testchartData[2].value }}</p>
|
||||
<div class="triangle-right" style="border-left:20px solid #FFD700;"></div>
|
||||
<p class="item-value" style="color: #FFD700;">{{ testchartData[2].value }}</p>
|
||||
</div>
|
||||
<p class="item-name">{{ testchartData[2].name }}</p>
|
||||
</div>
|
||||
<div class="item-box" style="top: 300px;right: 0;">
|
||||
<div class="item-value-box">
|
||||
<div class="triangle-right" style="border-left:20px solid #eb7e41;"></div>
|
||||
<p class="item-value" style="color: #eb7e41;">{{ testchartData[3].value }}</p>
|
||||
<div class="triangle-right" style="border-left:20px solid #08e5ff;"></div>
|
||||
<p class="item-value" style="color: #08e5ff;">{{ testchartData[3].value }}</p>
|
||||
</div>
|
||||
<p class="item-name">{{ testchartData[3].name }}</p>
|
||||
</div>
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
name: "组件产量",
|
||||
},
|
||||
],
|
||||
color: ['#3de7c9','#88a8f4','#ffdc9d','#eb7e41'],
|
||||
color: ['#3de7c9','#88a8f4','#FFD700','#08e5ff'],
|
||||
lineWidth: 40,
|
||||
radius: '75%',
|
||||
activeRadius: '80%'
|
||||
|
|
@ -213,7 +213,7 @@
|
|||
// color: "#E5F2A7",
|
||||
// },
|
||||
// ]),
|
||||
'#3de7c9','#88a8f4','#ffdc9d','#eb7e41'
|
||||
'#3de7c9','#88a8f4','#FFD700','#08e5ff'
|
||||
];
|
||||
const sum = chartData.reduce((per, cur) => per + cur.value, 0);
|
||||
const gap = (1 * sum) / 100;
|
||||
|
|
|
|||
Loading…
Reference in New Issue