恒通大2.0

src/components/baozuo-demo/CenterCmp.vue

@@ -19,25 +19,20 @@
         <div class="ccmc-title">
           本月工单概况
         </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">
             <div class="station-name">{{ item.name }}</div>
             <div class="station-value">{{ item.value }}</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 class="right-container-new" v-show="dataType != '3'">
-        
-        <div class="right-container-new">
           <!-- 第一行 -->
           <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="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>
        
@@ -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/1.png`), name: '派工数量', value: '1120' },
-      { icon: require(`@/img/icons/2.png`), name: '生产中工单数', value: '600' },
+      { icon: require(`@/img/icons/2.png`), name: '未完工数量', value: '600' },
-      { icon: require(`@/img/icons/3.png`), name: '本月生产完成率', value: '100%' }
+      { 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;

src/components/baozuo-demo/index.vue

@@ -72,9 +72,9 @@ export default {
       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() {
     return {