From 3965a856130a5d91af7697f685523942bd7281d4 Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Mon, 20 Nov 2023 13:05:42 +0800
Subject: [PATCH] 2023-11-20 xy

---
 src/views/bigScreen/component/centerLeft1.vue |  32 +--
 .../bigScreen/component/centerRight1.vue      | 228 +++++++++++++++---
 2 files changed, 209 insertions(+), 51 deletions(-)

diff --git a/src/views/bigScreen/component/centerLeft1.vue b/src/views/bigScreen/component/centerLeft1.vue
index 5615b9c..ccacfff 100644
--- a/src/views/bigScreen/component/centerLeft1.vue
+++ b/src/views/bigScreen/component/centerLeft1.vue
@@ -14,22 +14,22 @@
         <CenterLeft1Chart />
       </div>
       <!-- 4个主要的数据 -->
-      <div class="bottom-data">
-        <div
-          class="item-box mt-2"
-          v-for="(item, index) in numberData"
-          :key="index"
-        >
-          <div class="d-flex">
-            <span class="coin">￥</span>
-            <dv-digital-flop class="dv-digital-flop" :config="item.number" />
-          </div>
-          <p class="text" style="text-align: center;">
-            {{ item.text }}
-            <span class="colorYellow">(件)</span>
-          </p>
-        </div>
-      </div>
+<!--      <div class="bottom-data">-->
+<!--        <div-->
+<!--          class="item-box mt-2"-->
+<!--          v-for="(item, index) in numberData"-->
+<!--          :key="index"-->
+<!--        >-->
+<!--          <div class="d-flex">-->
+<!--            <span class="coin">￥</span>-->
+<!--            <dv-digital-flop class="dv-digital-flop" :config="item.number" />-->
+<!--          </div>-->
+<!--          <p class="text" style="text-align: center;">-->
+<!--            {{ item.text }}-->
+<!--            <span class="colorYellow">(件)</span>-->
+<!--          </p>-->
+<!--        </div>-->
+<!--      </div>-->
     </div>
   </div>
 </template>
diff --git a/src/views/bigScreen/component/centerRight1.vue b/src/views/bigScreen/component/centerRight1.vue
index f77ba79..29f193a 100644
--- a/src/views/bigScreen/component/centerRight1.vue
+++ b/src/views/bigScreen/component/centerRight1.vue
@@ -1,51 +1,134 @@
 <template>
   <div id="centerRight1">
     <div class="bg-color-black">
-      <div class="d-flex pt-2 pl-2">
-        <span>
-          <icon name="chart-line" class="text-icon"></icon>
-        </span>
-        <div class="d-flex">
-          <span class="fs-xl text mx-2">任务完成排行榜</span>
+      <div
+        style="width: 100%; height: 100%"
+        class="d-flex pt-2 pl-2 jc-between ai-center"
+      >
+        <div class="board-item">
+          <dv-border-box-10 class="board-item__title fw-b">待执行</dv-border-box-10>
+          <dv-scroll-board ref="dvBoard1" class="dv-scr-board" :config="config" @click="submit"/>
+        </div>
+        <div class="board-item">
+          <dv-border-box-10 class="board-item__title fw-b">即将执行</dv-border-box-10>
+          <dv-scroll-board class="dv-scr-board" :config="config" />
+        </div>
+        <div class="board-item">
+          <dv-border-box-10 class="board-item__title fw-b">已完成</dv-border-box-10>
+          <dv-scroll-board class="dv-scr-board" :config="config" />
         </div>
-      </div>
-      <div class="d-flex jc-center body-box">
-        <dv-scroll-board class="dv-scr-board" :config="config" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
+const dvBorderBoxTemplate = (slot) => {
+  return ` <div class="dv-border-box-13">
+                <svg class="dv-border-svg-container" width="${385}" height="${210}">
+                  <path
+                    fill="transparent"
+                    stroke="#6586ec"
+                    d="M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
+                       L ${385 - 20} 10 L ${385 - 5} 25
+                       L ${385  - 5} ${210 - 5} L 20 ${210 - 5}
+                       L 5 ${210 - 20} L 5 20"
+                  />
+
+                  <path
+                    fill="transparent"
+                    stroke-width="3"
+                    stroke-linecap="round"
+                    stroke-dasharray="10, 5"
+                    stroke="#6586ec"
+                    d="M 16 9 L 61 9"
+                  />
+
+                  <path
+                    fill="transparent"
+                    stroke="#2cf7fe"
+                    d="M 5 20 L 5 10 L 12 3  L 60 3 L 68 10"
+                  />
+
+                  <path
+                    fill="transparent"
+                    stroke="#2cf7fe"
+                    d="M ${385  - 5} ${210 - 30} L ${385  - 5} ${210 - 5} L ${385  - 30} ${210 - 5}"
+                  />
+                </svg>
+
+                <div class="border-box-content">
+                  ${slot}
+                </div>
+            </div>`
+}
+import { index } from "@/api/system/baseForm";
 export default {
   data() {
     return {
+      width: 300,
+      height: 100,
+
       config: {
-        header: ['组件', '分支', '覆盖率'],
         data: [
-          ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
-          ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
-          ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
-          ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
-          ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
-          ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
-          ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
-          ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
-          ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
-          ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
         ],
-        rowNum: 7, //表格行数
+        waitTime: 3000,
         headerHeight: 35,
-        headerBGC: '#0f1325', //表头
-        oddRowBGC: '#0f1325', //奇数行
-        evenRowBGC: '#171c33', //偶数行
-        index: true,
-        columnWidth: [50],
-        align: ['center']
-      }
+        oddRowBGC: "#0000", //奇数行
+        evenRowBGC: "#0000", //偶数行
+        index: false,
+        rowNum: 3,
+        align: ["center"],
+      },
+
+      transfers: [],
+    };
+  },
+  methods: {
+    async getTransfer() {
+      const res = (
+        await index({
+          table_name: "transfers",
+          page: 1,
+          page_size: 9999,
+        })
+      ).data;
+      console.log(res);
+      res.forEach(i => {
+        if (true) {
+          this.config.data.push([dvBorderBoxTemplate(`
+            <div class="box-content">
+              <div class="box-content-top">
+                <div>待执行</div>
+                <div>${i.equipment_id_equipments_id_relation?.name || ''}</div>
+              </div>
+
+              <div class="box-content-bottom">
+                <div>
+                  <div>执行时间：<span>${this.$moment().format('YYYY-MM-DD')} ${i.start_time.split(' ')[1]}</span></div>
+                  <div>倒计时：<span></span></div>
+                </div>
+                <div>执行</div>
+              </div>
+            </div>
+          `)])
+        }
+      })
+
+      this.$refs['dvBoard1'].updateRows(this.config.data)
+    },
+
+
+    submit (row) {
+      console.log(row)
     }
+  },
+  created() {
+    this.getTransfer();
+  },
+  mounted() {
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -64,13 +147,88 @@ $box-width: 100%;
   .text {
     color: #c3cbde;
   }
-  .body-box {
-    border-radius: 10px;
-    overflow: hidden;
-    .dv-scr-board {
-      width: 270px;
-      height: 340px;
+  .board-item {
+    width: 31%;
+    height: 100%;
+
+    &__title {
+      width: 40%;
+      height: 44px;
+      text-align: center;
+      font-size: 17px;
+      line-height: 44px;
+
+      margin: auto;
+      margin-top: 20px;
     }
   }
+  .dv-scr-board {
+    height: calc(100% - 44px - 20px - 20px);
+
+    margin-top: 20px;
+  }
+}
+
+::v-deep .row-item .ceil {
+  width: 100%;
+}
+
+::v-deep .box-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  line-height: 1;
+
+  padding: 30px 12px;
+
+  &-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 10px 10px 0 10px;
+
+    & > div:nth-child(1) {
+      background: #eccb77;
+      border-radius: 30px;
+      color: #333;
+      padding: 6px 10px;
+      font-weight: 600;
+    }
+    & > div:nth-child(2)  {
+      font-weight: 600;
+      font-size: 17px;
+    }
+  }
+  &-bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    padding: 10px 10px 0 10px;
+
+    span {
+      color: $primaryColor;
+    }
+    & > div:nth-child(1) {
+      text-align: left;
+      line-height: 2;
+      font-size: 16px;
+      font-weight: 600;
+    }
+    & > div:nth-child(2) {
+      cursor: pointer;
+      line-height: 2;
+      font-size: 15px;
+      font-weight: 600;
+      background: $primaryColor;
+      border-radius: 8px;
+      border: 2px solid rgb(119, 232, 250);
+
+      padding: 0 8px;
+    }
+
+  }
 }
 </style>