diff --git a/src/components/baozuo-demo/CenterCmp.vue b/src/components/baozuo-demo/CenterCmp.vue index 957d56b..5df3176 100644 --- a/src/components/baozuo-demo/CenterCmp.vue +++ b/src/components/baozuo-demo/CenterCmp.vue @@ -19,25 +19,20 @@
本月工单概况
- - - +
{{ leftData[2].name }}
+
{{ leftData[2].value }}
- --> - -
+
+
@@ -66,6 +61,7 @@
+
{{dataType=='3'?'未完成订单数量':'保养及备料信息'}} @@ -73,11 +69,20 @@
-
-
- icon -
{{ item.value }}
-
{{ item.name }}
+
+ + +
+
+ +

{{ item.name }}

+

{{ item.value }}

+
@@ -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; diff --git a/src/components/baozuo-demo/index.vue b/src/components/baozuo-demo/index.vue index 055cab7..882eaad 100644 --- a/src/components/baozuo-demo/index.vue +++ b/src/components/baozuo-demo/index.vue @@ -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 { diff --git a/src/components/baozuo-demo/pieChart.vue b/src/components/baozuo-demo/pieChart.vue index 3270cf0..7ccb601 100644 --- a/src/components/baozuo-demo/pieChart.vue +++ b/src/components/baozuo-demo/pieChart.vue @@ -19,15 +19,15 @@
-
-

{{ testchartData[2].value }}

+
+

{{ testchartData[2].value }}

{{ testchartData[2].name }}

-
-

{{ testchartData[3].value }}

+
+

{{ testchartData[3].value }}

{{ testchartData[3].name }}

@@ -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;