恒通大2.0
This commit is contained in:
parent
aceebceef7
commit
6729cc3719
|
|
@ -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>
|
||||
</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/1.png`), name: '派工数量', value: '1120' },
|
||||
{ icon: require(`@/img/icons/2.png`), name: '未完工数量', value: '600' },
|
||||
{ icon: require(`@/img/icons/3.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,14 @@ export default {
|
|||
flex-direction: column;
|
||||
|
||||
.station-icon {
|
||||
width: 190px;
|
||||
width: 220px;
|
||||
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 +309,7 @@ export default {
|
|||
}
|
||||
|
||||
.station-value {
|
||||
font-size: 30px;
|
||||
font-size: 35px;
|
||||
font-weight: bold;
|
||||
color: #08e5ff;
|
||||
text-align: center;
|
||||
|
|
@ -488,12 +519,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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue