1

package.json

@@ -25,6 +25,7 @@
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "vue": "2.6.10",
+    "vue-count-to": "^1.0.13",
     "vue-json-viewer": "^2.2.21",
     "vue-router": "3.0.6",
     "vue2-org-tree": "^1.3.5",

src/views/baggageManagement/components/departure/index.vue

@@ -66,6 +66,19 @@
             @change="setEndDate"
           />
         </el-form-item>
+        <el-form-item>
+          <div class="box-item">
+             <p>预计装载总数：</p>
+            <li :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
+              v-for="(item,index) in orderNum"
+              :key="index">
+                <span v-if="!isNaN(item)">
+                  <i ref="numberItem">0123456789</i>
+                </span>
+              <span class="comma" v-else>{{item}}</span>
+            </li>
+    </div>
+        </el-form-item>
         <div style="float:right">
           <el-form-item prop="search">
             <el-input
@@ -215,6 +228,7 @@ export default {
   mixins: [terminalMixin, formMixin, tableColsMixin],
   data() {
     return {
+        orderNum: ['0', '0', '0', '0'], // 默认总数
       // 初始表头
       tableCols: [
         {
@@ -320,7 +334,8 @@ export default {
         DepartureBuild: []
       },
       loopEvent: null,
-      leaveCount: 0
+      leaveCount: 0,
+      baggageCount:0,
     }
   },
   created() {
@@ -395,15 +410,22 @@ export default {
       }
     },
     initTableData(tableData) {
-      this.leaveCount = 0
+      this.leaveCount = 0;
+      this.baggageCount = 0;
       tableData.forEach(item => {
         if(item.hasTakenOff == 0){
           this.leaveCount++
         }
-        item['waitfanj'] = item['noCheckInNumber'] - item['unLoad']
+        item['waitfanj'] = item['noCheckInNumber'] - item['unLoad'];
+        this.baggageCount = this.baggageCount + item.preLoad;
       })
       this.tableData = this._.sortBy(tableData, ['FlightDate', 'PlanDepartureTime'])
       this.setTableFilters()
+      this.toOrderNum(this.baggageCount)
+      // setInterval(() => {
+      //   this.baggageCount = this.baggageCount+1;
+      //    // 这里输入数字即可调用
+      // }, 2000);
     },
     // 表格添加过滤条件
     setTableFilters() {
@@ -422,13 +444,37 @@ export default {
     filterHandler(value, row, column) {
       const property = column['property']
       return row[property] === value
-    }
+    },
+    setNumberTransform () {
+       const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
+       const numberArr = this.orderNum.filter(item => !isNaN(item))
+       // 结合CSS 对数字字符进行滚动,显示订单数量
+       for (let index = 0; index < numberItems.length; index++) {
+        const elem = numberItems[index]
+        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
+       }
+      },
+
+      toOrderNum(num) {
+       num = num.toString()
+        if (num.length < 4) {
+          num = '0' + num // 如未满八位数，添加"0"补位
+          this.toOrderNum(num) // 递归添加"0"补位
+        } else if (num.length === 4) {
+          this.orderNum = num.split('') // 将其便变成数据，渲染至滚动数组
+        } else {
+          // 订单总量数字超过八位显示异常
+          this.$message.warning('总量数字过大')
+        }
+        this.setNumberTransform()
+      },
   },
   mounted() {
     let that = this
     this.loopEvent = setInterval(function () {
       that.getTableData()
     }, 3000)
+
   },
   beforeDestroy() {
     clearInterval(this.loopEvent)
@@ -478,6 +524,88 @@ export default {
       top: 6px;
     }
   }
+  .box-item {
+    position: relative;
+    height: 32px;
+    font-size: 18px;
+    line-height: 32px;
+    text-align: center;
+    list-style: none;
+    color: #2D7CFF;
+    writing-mode: vertical-lr;
+    text-orientation: upright;
+    /*文字禁止编辑*/
+    -moz-user-select: none; /*火狐*/
+    -webkit-user-select: none; /*webkit浏览器*/
+    -ms-user-select: none; /*IE10*/
+    -khtml-user-select: none; /*早期浏览器*/
+    user-select: none;
+    /* overflow: hidden; */
+    p{
+      line-height: 32px;
+      writing-mode: horizontal-tb!important;
+      text-orientation: none!important;
+      /*文字禁止编辑*/
+    -moz-user-select: none; /*火狐*/
+    -webkit-user-select: none; /*webkit浏览器*/
+    -ms-user-select: none; /*IE10*/
+    -khtml-user-select: none; /*早期浏览器*/
+    user-select: none;
+    margin-top: 5px;
+    }
+  }
+  /* 默认逗号设置 */
+  .mark-item {
+    width: 10px;
+    height: 32px;
+    margin-right: 5px;
+    line-height: 10px;
+    font-size: 18px;
+    position: relative;
+    & > span {
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+    }
+  }
+  /*滚动数字设置*/
+  .number-item {
+    width: 41px;
+    height: 42px;
+    /* 背景图片 */
+    background: url(/images/text-bg-blue.png) no-repeat center center;
+    background-size: 100% 100%;
+    // background: #ccc;
+    list-style: none;
+    margin-right: 5px;
+    // background:rgba(250,250,250,1);
+    border-radius:4px;
+    border:3px solid rgb(221, 221, 221);
+    & > span {
+      position: relative;
+      display: inline-block;
+      margin-right: 10px;
+      width: 100%;
+      height: 100%;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+      overflow: hidden;
+      & > i {
+        font-style: normal;
+        position: absolute;
+        top: 11px;
+        left: 50%;
+        transform: translate(-50%,-1%);
+        transition: transform 1s ease-in-out;
+        letter-spacing: 10px;
+      }
+    }
+  }
+  .number-item:last-child {
+    margin-right: 0;
+  }
 }
 .departure-table {
   width: 100%;