From 7ec8a988c206443411dfade8a6eff88e931ce19d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=91=A3=E5=93=B2=E5=A5=87?= <13840175730@139.com>
Date: Thu, 12 Sep 2024 16:20:33 +0800
Subject: [PATCH] =?UTF-8?q?1.=E7=9C=8B=E6=9D=BF=E7=95=8C=E9=9D=A2=E5=8F=8A?=
 =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E6=A0=B7=E5=BC=8F=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/kban/comps/GxChanLiang.vue        | 175 +++++++++++++++++++-
 src/views/kban/comps/MainChanLian.vue       |  66 +++++++-
 src/views/kban/comps/MainCq.vue             |  64 ++++++-
 src/views/kban/comps/MainGeYueChanLiang.vue |  56 ++++++-
 src/views/kban/comps/MainYueChanLiang.vue   |  76 ++++++++-
 src/views/kban/comps/cards.vue              |  26 +--
 src/views/kban/index.vue                    |  32 +++-
 7 files changed, 459 insertions(+), 36 deletions(-)

diff --git a/src/views/kban/comps/GxChanLiang.vue b/src/views/kban/comps/GxChanLiang.vue
index d9bad63..3fcca05 100644
--- a/src/views/kban/comps/GxChanLiang.vue
+++ b/src/views/kban/comps/GxChanLiang.vue
@@ -1,8 +1,23 @@
 <template>
   <div class="ycl">
-    <template v-for="(item,index) in gxNames">
+    <template v-for="(card,i) in cards">
       <div class="gxcl">
-        <div class="gxcl__title">{{item}}</div>
+        <div class="gxcl__title">{{card.title}}</div>
+        <dv-charts class="ring-charts" :option="card.ring" />
+        <div class="card-footer">
+          <div class="card-footer-item">
+            <div class="footer-title">数量</div>
+            <div class="footer-detail">
+              <dv-digital-flop :config="card.total" style="width:70%;height:35px;" />张
+            </div>
+          </div>
+          <div class="card-footer-item">
+            <div class="footer-title">重量</div>
+            <div class="footer-detail">
+              <dv-digital-flop :config="card.num" style="width:70%;height:35px;" />吨
+            </div>
+          </div>
+        </div>
       </div>
     </template>
   </div>
@@ -13,26 +28,104 @@ export default {
   name:'MainGxChanLiang',
   data(){
     return {
-      gxNames:['上料','抛丸','理料','划线','切割']
+      cards:[]
     }
+  },
+  methods: {
+    createData () {
+      const { randomExtend } = this
+
+      const arr=['上料','抛丸','理料','划线','切割']
+      this.cards = new Array(5).fill(0).map((foo, i) => ({
+        title: arr[i],
+        total: {
+          number: [randomExtend(100, 400)],
+          content: '{nt}',
+          textAlign: 'right',
+          style: {
+            fill: '#ea6027',
+            fontWeight: 'bold'
+          }
+        },
+        num: {
+          number: [randomExtend(300, 600)],
+          content: '{nt}',
+          textAlign: 'right',
+          style: {
+            fill: '#26fcd8',
+            fontWeight: 'bold'
+          }
+        },
+        ring: {
+          series: [
+            {
+              type: 'gauge',
+              startAngle: -Math.PI / 2,
+              endAngle: Math.PI * 1.5,
+              arcLineWidth: 13,
+              radius: '80%',
+              data: [
+                { name: '重量占比', value: randomExtend(40, 60) }
+              ],
+              axisLabel: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              pointer: {
+                show: false
+              },
+              backgroundArc: {
+                style: {
+                  stroke: '#224590'
+                }
+              },
+              details: {
+                show: true,
+                formatter: '重量占比{value}%',
+                style: {
+                  fill: '#1ed3e5',
+                  fontSize: 20
+                }
+              }
+            }
+          ],
+          color: ['#03d3ec']
+        }
+      }))
+    },
+    randomExtend (minNum, maxNum) {
+      if (arguments.length === 1) {
+        return parseInt(Math.random() * minNum + 1, 10)
+      } else {
+        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
+      }
+    }
+  },
+  mounted () {
+    const { createData } = this
+
+    createData()
+
+    setInterval(this.createData, 30000)
   }
 }
 </script>
 
 <style scoped>
 .ycl{
-  width: 1470px;
+  width: 1468px;
   height: 342px;
-  background: url('../../../assets/kban/yclbg.png') no-repeat;
-  background-size: 100% 100%;
   text-align: center;
   flex: 1;
   display: flex;
   flex-direction: row;
+  margin-left: 1px;
 
   .gxcl{
-    width: 278px;
-    height: 300px;
+    width: 298px;
+    height: 309px;
     background: url('../../../assets/kban/yclbg.png') no-repeat;
     background-size: 100% 100%;
 
@@ -48,6 +141,72 @@ export default {
     }
   }
 
+  display: flex;
+  justify-content: space-between;
+  height: 45%;
+
+  .card-item {
+    background-color: rgba(6, 30, 93, 0.5);
+    border-top: 2px solid rgba(1, 153, 209, .5);
+    width: 19%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .card-header {
+    display: flex;
+    height: 20%;
+    align-items: center;
+    justify-content: space-between;
+
+    .card-header-left {
+      font-size: 18px;
+      font-weight: bold;
+      padding-left: 20px;
+    }
+
+    .card-header-right {
+      padding-right: 20px;
+      font-size: 40px;
+      color: #03d3ec;
+    }
+  }
+
+  .ring-charts {
+    height: 55%;
+  }
+
+  .card-footer {
+    height: 25%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  .card-footer-item {
+    padding: 5px 10px 0px 10px;
+    box-sizing: border-box;
+    width: 40%;
+    background-color: rgba(6, 30, 93, 0.7);
+    border-radius: 3px;
+
+    .footer-title {
+      font-size: 15px;
+      margin-bottom: 5px;
+    }
+
+    .footer-detail {
+      font-size: 20px;
+      color: #1294fb;
+      display: flex;
+      font-size: 18px;
+      align-items: center;
+
+      .dv-digital-flop {
+        margin-right: 5px;
+      }
+    }
+  }
 }
 </style>
 
diff --git a/src/views/kban/comps/MainChanLian.vue b/src/views/kban/comps/MainChanLian.vue
index 0d6cee4..afd1593 100644
--- a/src/views/kban/comps/MainChanLian.vue
+++ b/src/views/kban/comps/MainChanLian.vue
@@ -1,12 +1,58 @@
 <template>
   <div class="chanlian">
     <div class="chanlian__title">本月各垮产量(吨)</div>
+    <dv-scroll-ranking-board :config="config" />
   </div>
 </template>
 
 <script>
 export default {
   name: "MainChanLian",
+  data () {
+    return {
+      config: {
+        data: [
+          {
+            name: '上料',
+            value: 120
+          },
+          {
+            name: '切割',
+            value: 55
+          },
+          {
+            name: '理料',
+            value: 78
+          },
+          {
+            name: '划线',
+            value: 66
+          },
+          {
+            name: '抛丸',
+            value: 80
+          },
+          {
+            name: '坡口',
+            value: 45
+          },
+          {
+            name: '曲加工',
+            value: 29
+          },
+          {
+            name: '打磨',
+            value: 29
+          },
+          {
+            name: '预配盘',
+            value: 29
+          }
+        ],
+        rowNum: 9
+      }
+    }
+  }
 }
 </script>
 
@@ -16,9 +62,13 @@ export default {
   height: 688px;
   background: url('../../../assets/kban/clbg.png') no-repeat;
   background-size: 100% 100%;
-  margin-left: 41px;
+  margin-left: 62px;
   text-align: center;
 
+  display: flex;
+  flex-direction: column;
+  padding: 0px 30px;
+
   .chanlian__title{
     width: 231px;
     height: 41px;
@@ -27,7 +77,19 @@ export default {
     font-weight: bold;
     font-size: 20px;
     padding: 12px 26px;
-    margin-left: 71px;
+    margin-left: 41px;
+  }
+
+  .ranking-board-title {
+    font-weight: bold;
+    height: 10px;
+    display: flex;
+    align-items: center;
+    font-size: 20px;
+  }
+
+  .dv-scroll-ranking-board {
+    flex: 1;
   }
 }
 </style>
diff --git a/src/views/kban/comps/MainCq.vue b/src/views/kban/comps/MainCq.vue
index 2b0cbbc..0af2012 100644
--- a/src/views/kban/comps/MainCq.vue
+++ b/src/views/kban/comps/MainCq.vue
@@ -1,12 +1,35 @@
 <template>
   <div class="cq">
     <div class="cq__title">出勤情况</div>
+    <div class="water-level-chart-details">
+      总人数<span>{{totalPerson}}</span>人
+    </div>
+    <div class="chart-container">
+      <dv-active-ring-chart :config="config" />
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name:'Cq'
+  name:'Cq',
+  data () {
+    return {
+      totalPerson:300,
+      config: {
+        radius: '60%',
+        activeRadius: '63%',
+        data: [
+          {name:'出勤',value:296},
+          {name:'请假',value:2},
+          {name:'缺勤',value:2}
+        ],
+        digitalFlopStyle: {
+          fontSize: 20
+        }
+      }
+    }
+  }
 }
 </script>
 
@@ -16,7 +39,7 @@ export default {
   height: 294px;
   background: url('../../../assets/kban/cqbg.png') no-repeat;
   background-size: 100% 100%;
-  margin-left: 41px;
+  margin-left: 62px;
   margin-top: 14px;
   text-align: center;
 
@@ -30,5 +53,42 @@ export default {
     padding: 12px 26px;
     margin-left: 71px;
   }
+
+  .water-level-chart-details {
+    height: 10%;
+    display: flex;
+    justify-content: center;
+    font-size: 17px;
+    align-items: flex-end;
+
+    span {
+      font-size: 30px;
+      font-weight: bold;
+      color: #58a1ff;
+      margin: 0 5px;
+      margin-bottom: -5px;
+    }
+  }
+
+  .chart-container {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .dv-active-ring-chart {
+    width: 300px;
+    height: 300px;
+    margin-top: -40px;
+
+    ellipse {
+      stroke: transparent !important;
+    }
+
+    text {
+      font-size: 40px;
+    }
+  }
 }
 </style>
diff --git a/src/views/kban/comps/MainGeYueChanLiang.vue b/src/views/kban/comps/MainGeYueChanLiang.vue
index 4cfe6cd..6b47445 100644
--- a/src/views/kban/comps/MainGeYueChanLiang.vue
+++ b/src/views/kban/comps/MainGeYueChanLiang.vue
@@ -1,19 +1,65 @@
 <template>
   <div class="ycl">
     <div class="ycl__title">各月份产量(吨)</div>
+    <dv-conical-column-chart :config="config" />
   </div>
 </template>
 
 <script>
 export default {
-  name:'MainGeYueChanLiang'
+  name:'MainGeYueChanLiang',
+  data(){
+    return {
+      config:{
+        showValue:true,
+        data: [
+          {
+            name: '1月',
+            value: 71
+          },
+          {
+            name: '2月',
+            value: 55
+          },
+          {
+            name: '3月',
+            value: 120
+          },
+          {
+            name: '4月',
+            value: 66
+          },
+          {
+            name: '5月',
+            value: 80
+          },
+          {
+            name: '6月',
+            value: 95
+          },
+          {
+            name: '7月',
+            value: 90
+          },
+          {
+            name: '8月',
+            value: 90
+          },
+          {
+            name: '9月',
+            value: 32
+          },
+        ],
+      }
+    }
+  }
 }
 </script>
 
 <style scoped>
 .ycl{
   width: 1070px;
-  height: 342px;
+  height: 378px;
   background: url('../../../assets/kban/gyclbg.png') no-repeat;
   background-size: 100% 100%;
   text-align: center;
@@ -28,6 +74,12 @@ export default {
     padding: 12px 26px;
     margin-left: 425px;
   }
+
+  .dv-conical-column-chart{
+    width: 90%;
+    height: 308px;
+    padding: 0 50px 0 50px;
+  }
 }
 </style>
 
diff --git a/src/views/kban/comps/MainYueChanLiang.vue b/src/views/kban/comps/MainYueChanLiang.vue
index 00af559..d2d4743 100644
--- a/src/views/kban/comps/MainYueChanLiang.vue
+++ b/src/views/kban/comps/MainYueChanLiang.vue
@@ -1,23 +1,91 @@
 <template>
   <div class="ycl">
-    <div class="ycl__title">计划完成情况</div>
+    <div class="ycl__title">本月计划完成情况</div>
+    <div class="water-level-chart-details">
+      累计完成<span>6,800</span>吨
+    </div>
+    <div class="chart-container">
+      <dv-water-level-pond :config="config" />
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name:'MainYueChanLiang'
+  name:'MainYueChanLiang',
+  data () {
+    return {
+      config: {
+        data: [45],
+        shape: 'round',
+        waveHeight: 25,
+        waveNum: 2
+      }
+    }
+  }
 }
 </script>
 
 <style scoped>
 .ycl{
-  width: 396px;
-  height: 342px;
+  width: 400px;
+  height: 378px;
   background: url('../../../assets/kban/yclbg.png') no-repeat;
   background-size: 100% 100%;
   text-align: center;
 
+  border-top: 2px solid rgba(1, 153, 209, .5);
+  display: flex;
+  flex-direction: column;
+
+  .water-level-chart-title {
+    font-weight: bold;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    font-size: 20px;
+    justify-content: center;
+  }
+
+  .water-level-chart-details {
+    height: 15%;
+    display: flex;
+    justify-content: center;
+    font-size: 17px;
+    align-items: flex-end;
+
+    span {
+      font-size: 35px;
+      font-weight: bold;
+      color: #58a1ff;
+      margin: 0 5px;
+      margin-bottom: -5px;
+    }
+  }
+
+  .chart-container {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .dv-water-pond-level {
+    max-width: 90%;
+    width: 240px;
+    height: 240px;
+    border: 10px solid #19c3eb;
+    border-radius: 50%;
+
+    ellipse {
+      stroke: transparent !important;
+    }
+
+    text {
+      font-size: 40px;
+    }
+  }
+
   .ycl__title{
     width: 231px;
     height: 41px;
diff --git a/src/views/kban/comps/cards.vue b/src/views/kban/comps/cards.vue
index 5bc06e4..9d8ec0c 100644
--- a/src/views/kban/comps/cards.vue
+++ b/src/views/kban/comps/cards.vue
@@ -11,19 +11,19 @@
       </div>
       <dv-charts class="ring-charts" :option="card.ring" />
       <div class="card-footer">
-        <div class="card-footer-item">
-          <div class="footer-title">数量</div>
-          <div class="footer-detail">
-            <dv-digital-flop :config="card.total" style="width:70%;height:35px;" />张
-          </div>
-        </div>
-        <div class="card-footer-item">
-          <div class="footer-title">重量</div>
-          <div class="footer-detail">
-            <dv-digital-flop :config="card.num" style="width:70%;height:35px;" />吨
-          </div>
-        </div>
-      </div>
+                    <div class="card-footer-item">
+                      <div class="footer-title">数量</div>
+                      <div class="footer-detail">
+                        <dv-digital-flop :config="card.total" style="width:70%;height:35px;" />张
+                      </div>
+                    </div>
+                    <div class="card-footer-item">
+                      <div class="footer-title">重量</div>
+                      <div class="footer-detail">
+                        <dv-digital-flop :config="card.num" style="width:70%;height:35px;" />吨
+                      </div>
+                    </div>
+                  </div>
     </div>
   </div>
 </template>
diff --git a/src/views/kban/index.vue b/src/views/kban/index.vue
index 8814b16..74f5eb3 100644
--- a/src/views/kban/index.vue
+++ b/src/views/kban/index.vue
@@ -2,17 +2,21 @@
   <div id="data-view">
     <dv-full-screen-container>
       <top-header />
-<!--      <Menu />-->
+      <Menu />
       <div class="main-content">
         <div class="block-top-bottom-content">
           <Cq />
           <MainVideo />
         </div>
-        <div class="block-mid-bottom-content">
+        <div class="block-left-right-content">
           <MainChanLian />
-          <MainYueChanLiang />
-          <MainGeYueChanLiang />
-          <MainGxChanLiang />
+          <div class="block-top-bottom-content1">
+            <div class="block-top-content">
+              <MainYueChanLiang />
+              <MainGeYueChanLiang />
+            </div>
+            <MainGxChanLiang />
+          </div>
         </div>
       </div>
     </dv-full-screen-container>
@@ -63,12 +67,30 @@ export default {
     flex-direction: column;
   }
 
+  .block-left-right-content {
+    flex: 1;
+    display: flex;
+  }
+
   .block-top-bottom-content {
     flex: 1;
     display: flex;
     flex-direction: row;
   }
 
+  .block-top-bottom-content1 {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .block-top-content {
+    height: 55%;
+    display: flex;
+    flex-grow: 0;
+    box-sizing: border-box;
+  }
+
   .block-mid-bottom-content {
     flex: 1;
     display: flex;