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