2023-11-20 xy

src/views/bigScreen/bigScreen.vue

@@ -104,6 +104,12 @@ import drawMixin from "@/mixin/drawMixin";
 import backBtn from './component/backBtn.vue'
 export default {
   mixins: [ drawMixin ],
+  provide() {
+    return {
+      load: this.load,
+      cancelLoading: this.cancelLoading
+    }
+  },
   components: {
     Icon,
 
@@ -129,8 +135,8 @@ export default {
   },
   mounted() {
     //document.documentElement.requestFullscreen();
-    this.timeFn()
-    this.cancelLoading()
+    this.timeFn();
+    this.cancelLoading();
   },
   beforeDestroy () {
     clearInterval(this.timing)
@@ -143,6 +149,10 @@ export default {
         this.dateWeek = this.weekday[new Date().getDay()]
       }, 1000)
     },
+
+    load () {
+      this.loading = true;
+    },
     cancelLoading() {
       setTimeout(() => {
         this.loading = false

src/views/bigScreen/component/centerRight1.vue

@@ -1,21 +1,55 @@
 <template>
   <div id="centerRight1">
+    <dv-decoration-4 style="width: 10px;height: 300px;position: absolute;bottom: 30px;right: 20px;" />
     <div class="bg-color-black">
       <div
         style="width: 100%; height: 100%"
         class="d-flex pt-2 pl-2 jc-between ai-center"
       >
-        <div class="board-item">
+        <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 class="board-item-container" ref="board-item-container">
+            <div
+              class="board-item-container-item"
+              v-for="(item,index) in rows"
+              :key="`${item.id}-${item.scroll}`"
+              :style="`
+                height: ${heights[index]}px;
+                line-height: ${heights[index]}px;
+                transition: all .2s;
+              `">
+              <dv-border-box-13 style="width: 100%;height: 100%;min-height: .5px;" :style="{ 'opacity': heights[index] ? 1 : 0}">
+                <div style="width: 100%;height: 100%;padding: 30px 20px;line-height: 1;" class="d-flex flex-column jc-between flex-1">
+                  <div class="board-item__top d-flex jc-between ai-center">
+                    <dv-decoration-11 style="width: 160px;height: 38px;">待执行</dv-decoration-11>
+                    <p class="fw-b">{{ item.equipment_id_equipments_id_relation ? item.equipment_id_equipments_id_relation.name : '' }}</p>
+                  </div>
+                  <div class="board-item__bottom d-flex jc-between ai-start">
+                    <div style="line-height: 1.5;">
+                      <div class="start-time">
+                        执行时间：{{ item.start_time }}
+                      </div>
+                      <div class="final-time">
+                        倒计时：
+                      </div>
+                    </div>
+                    <div @click="setTransferStatus(4,item)">
+                      <dv-border-box-8 reverse class="fw-b text-center" style="width: 64px;height: 38px;line-height: 38px;cursor: pointer;"
+                      >执行</dv-border-box-8>
+                    </div>
+                  </div>
+                </div>
+              </dv-border-box-13>
+            </div>
+          </div>
         </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" />
+<!--          <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" />
+<!--          <dv-scroll-board class="dv-scr-board" :config="config" />-->
         </div>
       </div>
     </div>
@@ -23,110 +57,159 @@
 </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";
+import {index, save} from "@/api/system/baseForm";
+import { deepCopy } from "@/utils";
 export default {
+  inject: ['load','cancelLoading'],
   data() {
     return {
-      width: 300,
-      height: 100,
-
-      config: {
-        data: [
-        ],
-        waitTime: 3000,
-        headerHeight: 35,
-        oddRowBGC: "#0000", //奇数行
-        evenRowBGC: "#0000", //偶数行
-        index: false,
-        rowNum: 3,
-        align: ["center"],
-      },
+      dom: '',
+      needCalc: false,
+      rowNum: 4,
+      height: 0,
+      width: 0,
+      avgHeight: 0,
+      updater: 0,
+      animationIndex: 0,
+      heights: [],
+      animationHandler: '',
 
       transfers: [],
+      rows: []
     };
   },
   methods: {
+    setTransferStatus (status,row) {
+      let copyRow = deepCopy(row);
+      copyRow.status = status;
+      for (let key in copyRow) {
+        if (/_relation/g.test(key)) {
+          delete copyRow[key]
+        }
+      }
+      console.log(copyRow)
+      save({
+        table_name: 'transfers',
+        ...copyRow
+      }).then(_ => {})
+    },
+
+
+
     async getTransfer() {
       const res = (
         await index({
           table_name: "transfers",
           page: 1,
           page_size: 9999,
-        })
+        },false)
       ).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.transfers = res;
+      this.rows = res.map(i => ({ ...i, scroll: i }));
+
+    },
+    initWH (resize = true) {
+      const { $nextTick, $refs, onResize } = this
+
+      return new Promise(resolve => {
+        $nextTick(_ => {
+          const dom = this.dom = $refs['board-item-container']
+
+          this.width = dom ? dom.clientWidth : 0
+          this.height = dom ? dom.clientHeight : 0
+
+          if (!dom) {
+            console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
+          } else if (!this.width || !this.height) {
+            console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
+          }
+
+          if (typeof onResize === 'function' && resize) onResize()
+
+          resolve()
+        })
       })
+    },
+    calcHeights (onresize = false) {
+      const { height, rowNum } = this
+
+      let allHeight = height
+
+      const avgHeight = allHeight / rowNum
+
+      this.avgHeight = avgHeight
 
-      this.$refs['dvBoard1'].updateRows(this.config.data)
+      if (!onresize) this.heights = new Array(this.transfers.length).fill(avgHeight)
     },
+    async animation (start = false) {
+      const { needCalc, calcHeights } = this
 
+      if (needCalc) {
+        calcHeights()
+        this.needCalc = false;
+      }
 
-    submit (row) {
-      console.log(row)
-    }
+      let { avgHeight, animationIndex, mergedConfig, animation, updater } = this
+
+      const { waitTime, carousel, rowNum } = {
+        waitTime: 5000,
+        carousel: 'single',
+        rowNum: this.rowNum
+      }
+
+      const rowLength = this.transfers.length
+
+      if (rowNum >= rowLength) return
+
+      if (start) {
+        await new Promise(resolve => setTimeout(resolve, waitTime))
+        if (updater !== this.updater) return
+      }
+
+      const animationNum = carousel === 'single' ? 1 : rowNum
+
+      let rows = this.transfers.slice(animationIndex)
+      rows.push(...this.transfers.slice(0, animationIndex))
+
+      this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
+      this.heights = new Array(rowLength).fill(avgHeight)
+
+      await new Promise(resolve => setTimeout(resolve, 300))
+      if (updater !== this.updater) return
+
+      this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))
+
+      animationIndex += animationNum
+
+      const back = animationIndex - rowLength
+      if (back >= 0) animationIndex = back
+
+      this.animationIndex = animationIndex
+      this.animationHandler = setTimeout(animation, waitTime - 300)
+    },
+    stopAnimation () {
+      const { animationHandler, updater } = this
+
+      this.updater = (updater + 1) % 999999
+
+      if (!animationHandler) return
+
+      clearTimeout(animationHandler)
+    },
   },
   created() {
-    this.getTransfer();
+
+  },
+  async mounted() {
+    await this.getTransfer();
+    await this.initWH(false);
+    this.calcHeights();
+    await this.animation(true);
   },
-  mounted() {
+  destroyed () {
+    const { stopAnimation } = this
+
+    stopAnimation();
   }
 };
 </script>
@@ -150,6 +233,8 @@ $box-width: 100%;
   .board-item {
     width: 31%;
     height: 100%;
+    display: flex;
+    flex-direction: column;
 
     &__title {
       width: 40%;
@@ -157,15 +242,21 @@ $box-width: 100%;
       text-align: center;
       font-size: 17px;
       line-height: 44px;
+      flex: 0;
 
       margin: auto;
       margin-top: 20px;
     }
-  }
-  .dv-scr-board {
-    height: calc(100% - 44px - 20px - 20px);
+    &-container {
+      overflow: hidden;
+      flex: 1;
 
-    margin-top: 20px;
+      margin-top: 20px;
+
+      &-item {
+        width: 100%;
+      }
+    }
   }
 }
 

src/views/bigScreen/component/transferBoard.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="board-item" >
+    <dv-border-box-10 class="board-item__title fw-b">待执行</dv-border-box-10>
+    <div class="board-item-container" ref="board-item-container">
+      <div
+        class="board-item-container-item"
+        v-for="(item,index) in rows"
+        :key="`${item.id}-${item.scroll}`"
+        :style="`
+                height: ${heights[index]}px;
+                line-height: ${heights[index]}px;
+                transition: all .2s;
+              `">
+        <dv-border-box-13 style="width: 100%;height: 100%;min-height: .5px;" :style="{ 'opacity': heights[index] ? 1 : 0}">
+          <div style="width: 100%;height: 100%;padding: 30px 20px;line-height: 1;" class="d-flex flex-column jc-between flex-1">
+            <div class="board-item__top d-flex jc-between ai-center">
+              <dv-decoration-11 style="width: 160px;height: 38px;">待执行</dv-decoration-11>
+              <p class="fw-b">{{ item.equipment_id_equipments_id_relation ? item.equipment_id_equipments_id_relation.name : '' }}</p>
+            </div>
+            <div class="board-item__bottom d-flex jc-between ai-start">
+              <div style="line-height: 1.5;">
+                <div class="start-time">
+                  执行时间：{{ item.start_time }}
+                </div>
+                <div class="final-time">
+                  倒计时：
+                </div>
+              </div>
+              <div @click="setTransferStatus(4,item)">
+                <dv-border-box-8 reverse class="fw-b text-center" style="width: 64px;height: 38px;line-height: 38px;cursor: pointer;"
+                >执行</dv-border-box-8>
+              </div>
+            </div>
+          </div>
+        </dv-border-box-13>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {deepCopy} from "@/utils";
+import {save} from "@/api/system/baseForm";
+
+export default {
+  props: {
+    transfers: Array
+  },
+  data() {
+    return {
+      dom: '',
+      needCalc: false,
+      rowNum: 4,
+      height: 0,
+      width: 0,
+      avgHeight: 0,
+      updater: 0,
+      animationIndex: 0,
+      heights: [],
+      animationHandler: '',
+
+      rows: []
+    }
+  },
+  methods: {
+    setTransferStatus (status,row) {
+      let copyRow = deepCopy(row);
+      copyRow.status = status;
+      for (let key in copyRow) {
+        if (/_relation/g.test(key)) {
+          delete copyRow[key]
+        }
+      }
+      console.log(copyRow)
+      save({
+        table_name: 'transfers',
+        ...copyRow
+      }).then(_ => {})
+    },
+
+
+    initWH (resize = true) {
+      const { $nextTick, $refs, onResize } = this
+
+      return new Promise(resolve => {
+        $nextTick(_ => {
+          const dom = this.dom = $refs['board-item-container']
+
+          this.width = dom ? dom.clientWidth : 0
+          this.height = dom ? dom.clientHeight : 0
+
+          if (!dom) {
+            console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
+          } else if (!this.width || !this.height) {
+            console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
+          }
+
+          if (typeof onResize === 'function' && resize) onResize()
+
+          resolve()
+        })
+      })
+    },
+    calcHeights (onresize = false) {
+      const { height, rowNum } = this
+
+      let allHeight = this.height
+
+      const avgHeight = allHeight / rowNum
+
+      this.avgHeight = avgHeight
+
+      if (!onresize) this.heights = new Array(this.transfers.length).fill(avgHeight)
+    },
+    async animation (start = false) {
+      const { needCalc, calcHeights } = this
+
+      if (needCalc) {
+        calcHeights()
+        this.needCalc = false;
+      }
+
+      let { avgHeight, animationIndex, mergedConfig, animation, updater } = this
+
+      const { waitTime, carousel, rowNum } = {
+        waitTime: 5000,
+        carousel: 'single',
+        rowNum: this.rowNum
+      }
+
+      const rowLength = this.transfers.length
+
+      if (rowNum >= rowLength) return
+
+      if (start) {
+        await new Promise(resolve => setTimeout(resolve, waitTime))
+        if (updater !== this.updater) return
+      }
+
+      const animationNum = carousel === 'single' ? 1 : rowNum
+
+      let rows = this.transfers.slice(animationIndex)
+      rows.push(...this.transfers.slice(0, animationIndex))
+
+      this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
+      this.heights = new Array(rowLength).fill(this.avgHeight)
+
+      await new Promise(resolve => setTimeout(resolve, 300))
+      if (updater !== this.updater) return
+
+      this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))
+
+      animationIndex += animationNum
+
+      const back = animationIndex - rowLength
+      if (back >= 0) animationIndex = back
+
+      this.animationIndex = animationIndex
+      this.animationHandler = setTimeout(animation, waitTime - 300)
+    },
+    stopAnimation () {
+      const { animationHandler, updater } = this
+
+      this.updater = (updater + 1) % 999999
+
+      if (!animationHandler) return
+
+      clearTimeout(animationHandler)
+    },
+  },
+  computed: {},
+  watch: {
+    async transfers(val) {
+      if (val && val.length > 0) {
+        await this.initWH(false);
+        this.calcHeights();
+        await this.animation(true);
+      }
+    }
+  },
+  async mounted() {
+  },
+  destroyed () {
+    const { stopAnimation } = this
+
+    stopAnimation();
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.board-item {
+  width: 31%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &__title {
+    width: 40%;
+    height: 44px;
+    text-align: center;
+    font-size: 17px;
+    line-height: 44px;
+    flex: 0;
+
+    margin: auto;
+    margin-top: 20px;
+  }
+  &-container {
+    overflow: hidden;
+    flex: 1;
+
+    margin-top: 20px;
+
+    &-item {
+      width: 100%;
+    }
+  }
+}
+::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>