添加模板功能，大屏日月借出

src/views/category/form.vue

@@ -13,8 +13,8 @@
             <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" :disabled="item.typeState" />
           </el-select>
         </el-form-item>
-        <el-form-item v-if="crud.status.add === 1" label="选择模板" prop="dicExplain">
-          <treeselect v-model="form.dicExplain" :options="templateTree" placeholder="" style="width: 370px;" :disabled="form.isType !== 6" :normalizer="normalizer" />
+        <el-form-item v-if="crud.status.add === 1" label="选择模板" prop="templateId">
+          <treeselect v-model="form.templateId" :flat="true" :options="templateTree" placeholder="" style="width: 370px;" :disabled="form.isType !== 6" :normalizer="normalizer" @select="updateTemplateValue" />
         </el-form-item>
         <el-form-item label="内容说明">
           <el-input v-model="form.remark" style="width: 370px;" type="textarea" :rows="4" />
@@ -31,6 +31,7 @@
 <script>
 import { getCategoryTree, getCategoryType } from '@/api/category/category'
 import { form } from '@crud/crud'
+import CRUD from '@crud/crud'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
@@ -59,7 +60,8 @@ export default {
         ]
       },
       selectOptions: [],
-      templateTree: []
+      templateTree: [],
+      selectedTemplateNode: {}
     }
   },
   created() {
@@ -97,10 +99,22 @@ export default {
         this.form.isType = 4
       }
     },
+    [CRUD.HOOK.beforeSubmit]() {
+      if (this.form.templateId) {
+        this.form.children = [this.selectedTemplateNode]
+      } else {
+        this.form.children = null
+      }
+    },
+    updateTemplateValue(node, instanceId) {
+      this.selectedTemplateNode = node
+    },
     changeType() {
       if (this.form.isType === 6) {
         // this.crudDict.getDicts()
         this.getTemplateTree()
+      } else {
+        this.form.dicExplain = null
       }
     },
     getTemplateTree() {
@@ -120,10 +134,14 @@ export default {
       })
     },
     normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children
+      }
       return {
         id: node.id,
         label: node.cnName,
-        children: node.children
+        children: node.children,
+        isDisabled: node.isType !== 2 && node.isType !== 3 && node.isType !== 5
       }
     }
   }

src/views/environmentalScreen/index.vue

@@ -257,16 +257,16 @@
             <ul>
               <li>
                 <span>日借阅量</span>
-                <NumFlip :tnum="daylend" :chartnum="daylendnum" />
+                <NumFlip ref="daylend" :tnum="daylend" :chartnum="daylendnum" />
               </li>
               <li><span>日归还量</span>
-                <NumFlip :tnum="dayreturn" :chartnum="dayreturnnum" />
+                <NumFlip ref="dayreturn" :tnum="dayreturn" :chartnum="dayreturnnum" />
               </li>
               <li><span>月借阅量</span>
-                <NumFlip :tnum="monlend" :chartnum="monlendnum" />
+                <NumFlip ref="monlend" :tnum="monlend" :chartnum="monlendnum" />
               </li>
               <li><span>月归还量</span>
-                <NumFlip :tnum="monreturn" :chartnum="monreturnnum" />
+                <NumFlip ref="monreturn" :tnum="monreturn" :chartnum="monreturnnum" />
               </li>
             </ul>
 
@@ -277,7 +277,9 @@
         <div class="env-item container-wrap">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
-          <h3> <svg-icon icon-class="danganjieyue" style="margin-right:10px" />档案借阅</h3>
+          <h3>
+            <svg-icon icon-class="danganjieyue" style="margin-right:10px" />档案借阅
+          </h3>
           <div class="chart-wrapper" style="height: calc(100% - 40px);">
             <lend-across :lend-data="lendData" :refreshtime="refreshtime" />
           </div>
@@ -285,7 +287,9 @@
         <div class="env-item container-wrap">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
-          <h3><svg-icon icon-class="danganleibie" style="margin-right:10px" />档案类型</h3>
+          <h3>
+            <svg-icon icon-class="danganleibie" style="margin-right:10px" />档案类型
+          </h3>
           <div v-if="typeData.length !== 0" class="chart-wrapper" style="height: calc(100% - 40px);">
             <type-pie :type-data="typeData" :refreshtime="refreshtime" />
           </div>
@@ -419,6 +423,8 @@ export default {
     })
     this.displayConfigData = this.allDisplayConfigData.filter((item) => { return item.isDisplay && item.bindState && item.deviceInfo && (item.divPosition.includes('OAO') || item.divPosition.includes('TOP') || item.divPosition.includes('LS')) })
     await this.getRealTimeData()
+    this.getDayYearBorrowNum()
+    this.handleLeftTableNum()
   },
   mounted() {
     const _this = this
@@ -939,60 +945,65 @@ export default {
     }
   }
 }
-.middle-bottom{
+.middle-bottom {
   display: flex;
-  color: #339CFF ;
+  color: #339cff;
   font-size: 14px;
   justify-content: space-between;
-  height: calc(100%/4);
-  .middle-bottom-l{
+  height: calc(100% / 4);
+  .middle-bottom-l {
     display: flex;
     justify-content: space-between;
     width: 60%;
-    height:calc(100%  - 22px) !important;
-    ul{
+    height: calc(100% - 22px) !important;
+    ul {
       width: 59%;
       padding: 25px 20px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      li{
+      li {
         height: calc(100% / 3 - 14px);
-        background: linear-gradient(360deg, rgba(51,156,255,0.24) 0%, rgba(56,158,225,0) 70%, rgba(56,158,225,0) 100%);
+        background: linear-gradient(
+          360deg,
+          rgba(51, 156, 255, 0.24) 0%,
+          rgba(56, 158, 225, 0) 70%,
+          rgba(56, 158, 225, 0) 100%
+        );
         display: flex;
         align-items: center;
         justify-content: space-between;
-        .row-item{
+        .row-item {
           display: flex;
           align-items: center;
-          .svg-box{
-          margin-right: 10px;
-            .card-panel-icon{
-                font-size: 24px;
+          .svg-box {
+            margin-right: 10px;
+            .card-panel-icon {
+              font-size: 24px;
             }
           }
         }
-        .row-num{
-            font-size: 18px;
-            color: #fff;
-            margin-right: 10px;
+        .row-num {
+          font-size: 18px;
+          color: #fff;
+          margin-right: 10px;
         }
 
         // padding: 10px 0;
       }
     }
   }
-  .middle-bottom-r{
+  .middle-bottom-r {
     width: 38%;
-    height:calc(100%  - 22px) !important;
-    ul{
+    height: calc(100% - 22px) !important;
+    ul {
       width: 100%;
       height: 100%;
       padding: 20px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-       li{
+      li {
         height: 20%;
         display: flex;
         align-items: center;
@@ -1001,6 +1012,5 @@ export default {
       }
     }
   }
-
 }
 </style>

src/views/environmentalScreen/module/numFlip.vue

@@ -30,32 +30,36 @@ export default {
       ikey: [1, 2, 3, 4, 5, 6, 7]
     }
   },
+  watch: {
+    chartnum: function(val) {
+      this.update()
+    }
+  },
   mounted() {
-    this.$nextTick(() => {
-      this.start()
-    })
+    // this.$nextTick(() => {
+    //   this.start()
+    // })
   },
   beforeDestroy() {
     clearInterval(this.timer)
   },
   methods: {
-    start() {
-      // let strHtml = ''
-      // for (var i = 0; i < this.chartnum.length; i++) {
-      //   strHtml += '<li class="number-item">\n' +
-      //           ' <span><i class="item" ref="numberItem">0123456789</i></span>\n' +
-      //           ' </li>'
-      // }
-      // document.getElementById(this.tnum).innerHTML = strHtml
-      // 定时改变数字
-      const _this = this
-      this.timer = null
-      this.timer = setInterval(() => {
-        // _this.toOrderNum('123456')
-        _this.toOrderNum(this.chartnum)
-        _this.setNumberTransform()
-      }, 1000 * 10)
-    },
+    // start() {
+    //   // let strHtml = ''
+    //   // for (var i = 0; i < this.chartnum.length; i++) {
+    //   //   strHtml += '<li class="number-item">\n' +
+    //   //           ' <span><i class="item" ref="numberItem">0123456789</i></span>\n' +
+    //   //           ' </li>'
+    //   // }
+    //   // document.getElementById(this.tnum).innerHTML = strHtml
+    //   // 定时改变数字
+    //   const _this = this
+    //   this.timer = null
+    //   this.timer = setInterval(() => {
+    //     // _this.toOrderNum('123456')
+    //     _this.update()
+    //   }, 1000 * 10)
+    // },
     toOrderNum(num) {
       num = num.toString() // 数字变成字符串
       if (num.length < 7) { // 如未满位数，添加"0"补位
@@ -76,6 +80,10 @@ export default {
         const elem = numberItems[index]
         elem.style.transform = 'translate(-50%, -' + numberArr[index] * 10 + '%)'
       }
+    },
+    update() {
+      this.toOrderNum(this.chartnum)
+      this.setNumberTransform()
     }
   }
 }
@@ -83,5 +91,4 @@ export default {
 
 <style lang="scss" scoped>
 @import "~@/assets/styles/font-some.css";
-
 </style>