大屏numflip的bug 图标替换

src/assets/icons/svg/danganjieyue.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1663379673747" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3890" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25"><path d="M219.796755 1023.98488C99.998523 1025.38486 1.799973 929.386277 0.499993 809.688044V219.796755C-7.099895 106.29843 78.698838 8.09988 192.297161 0.499993c9.199864-0.599991 18.399728-0.599991 27.499594 0h657.990284v731.089205h-657.990284c-74.698897 0-170.597481 46.299316-146.197842 146.197841 30.099556 50.999247 87.298711 79.698823 146.197842 73.098921h731.089205V146.697834h73.09892V1023.98488H219.796755z m0-219.296762h657.990284v73.098921h-657.990284v-73.098921z" fill="#F65163" p-id="3891"></path></svg>

src/assets/icons/svg/danganleibie.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1663379678313" class="icon" viewBox="0 0 1095 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4036" xmlns:xlink="http://www.w3.org/1999/xlink" width="26.7333984375" height="25"><path d="M866.406288 275.424112h-638.337102c-12.937821 0-23.416386 10.58549-23.416386 23.52331s10.478566 23.416386 23.416386 23.416386h638.444026c12.937821 0 23.416386-10.58549 23.416387-23.52331-0.106924-12.937821-10.58549-23.416386-23.523311-23.416386z m22.774842-118.792718H205.294345c-12.937821 0-23.416386 10.58549-23.416387 23.523311s10.478566 23.416386 23.416387 23.416386h684.207557c12.937821 0 23.416386-10.58549 23.416386-23.52331s-10.478566-23.416386-23.416386-23.416387h-0.320772z m193.211917 284.952828L992.362923 64.462788c-0.213848-0.748469-0.427697-1.603862-0.748469-2.352331-10.478566-39.989628-48.757407-66.186041-89.816276-61.588304L190.645738 2.446788c-40.631172-3.314648-77.947696 22.240221-89.495504 61.267531-0.320772 0.962317-0.641545 1.81771-0.855393 2.780027L11.333959 450.886622C4.276966 457.408994 0.213848 466.497546 0 476.120718v497.304165c3.849269 27.800276 26.731034 48.971255 54.745159 50.575117h1004.017653c25.020248 0 36.033434-24.913324 36.033435-50.575117V476.120718c0.962317-12.723972-3.314648-25.234097-12.082428-34.536496h-0.320772zM821.070454 821.485683H273.725793V648.803201h547.344661v172.682482z m-68.431448-347.182675s-48.436634 0.641545-72.280717 0.641545H425.771917c-23.844083 0-83.7216-0.641545-83.7216-0.641545h-294.041379l96.231724-394.122372c4.91851-21.170979 25.554869-34.750345 46.939696-30.901076L902.760495 47.248002c31.328772 0 37.958069 7.805462 46.939697 30.794151l97.621737 396.260855H752.639006z" fill="#F65163" p-id="4037"></path></svg>

src/assets/icons/svg/zaijieshuliang.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1663379597958" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3742" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25"><path d="M480 32c0 17.7 14.3 32 32 32s32-14.3 32-32-14.3-32-32-32-32 14.3-32 32zM480 992c0 17.7 14.3 32 32 32s32-14.3 32-32-14.3-32-32-32c-17.7-0.1-32 14.2-32 32 0-0.1 0-0.1 0 0zM960 512c0 17.7 14.3 32 32 32s32-14.3 32-32-14.3-32-32-32-32 14.3-32 32zM0 512c0 17.7 14.3 32 32 32s32-14.3 32-32-14.3-32-32-32-32 14.3-32 32z" fill="#E58033" p-id="3743"></path><path d="M128 512c0 212.1 171.9 384 384 384s384-171.9 384-384-172-384-384-384c-212.1 0-384 171.9-384 384z" fill="#E58033" opacity=".2" p-id="3744"></path><path d="M498.1 999.7c-16.3-0.5-32.6-1.7-48.6-3.8l2-15.9c15.5 2 31.3 3.2 47 3.7l-0.4 16z m48.7-1l-1.2-16c15.7-1.1 31.3-3 46.8-5.7l2.7 15.8c-16 2.8-32.2 4.8-48.5 5.9h0.2z m-145.3-11.4c-15.8-3.7-31.6-8.2-46.9-13.4l5.2-15.2c14.9 5.1 30.1 9.4 45.4 13l-3.7 15.6z m241.3-5l-4.3-15.4c15.1-4.2 30.1-9.2 44.8-14.9l5.8 14.9c-15.2 5.9-30.6 11-46.3 15.4z m-333.6-26.5c-14.7-6.8-29.2-14.3-43.3-22.5l8.1-13.7c13.6 7.9 27.6 15.2 41.9 21.7l-6.7 14.5z m424.4-9.1l-7.3-14.3c14-7.1 27.7-15.1 41-23.5l8.7 13.7c-13.7 8.7-28 16.9-42.4 24.3v-0.2zM225 906.6c-13.1-9.5-25.8-19.8-38-30.7l10.7-11.9c11.7 10.5 24 20.3 36.7 29.6l-9.4 13zM815.5 894l-10-12.5c12.3-9.8 24.1-20.2 35.4-31.2l11.2 11.5c-11.7 11.3-23.9 22.1-36.6 32.2z m-663.1-52.1c-11-12-21.5-24.6-31.2-37.5l12.8-9.6c9.4 12.5 19.5 24.7 30.1 36.3l-11.7 10.8z m732.9-15.7L873.1 816c10.2-12.1 19.8-24.7 28.6-37.5l13.2 9c-9.1 13.3-19.1 26.3-29.6 38.7zM94 764c-8.4-13.9-16.1-28.2-23.1-42.9l14.5-6.8c6.8 14.1 14.2 28.1 22.3 41.5L94 764z m846.4-18.1l-14-7.7c7.6-13.8 14.4-28 20.5-42.5l14.8 6.2c-6.4 15-13.6 29.7-21.4 44h0.1z m-888.1-70c-5.5-15.3-10.2-30.9-14.1-46.7l15.5-3.8c3.8 15.2 8.3 30.4 13.7 45.2l-15.1 5.3z m925.9-19.8l-15.3-4.7c4.6-15 8.5-30.3 11.6-45.7l15.7 3.2c-3.1 16-7.1 31.7-12 47.2zM28.9 581.4c-2.3-16-3.8-32.3-4.5-48.5l16-0.7c0.7 15.7 2.1 31.5 4.3 47l-15.8 2.2z m968.7-20.7l-15.9-1.6c1.5-15.5 2.3-31.4 2.3-47.1 0-13.7-0.6-27.1-1.7-40.4l15.9-1.3c1.2 13.7 1.8 27.7 1.8 41.7-0.1 16.3-0.8 32.7-2.4 48.7zM40.8 485l-16-0.9c0.9-16.2 2.6-32.4 5.2-48.5l15.8 2.5c-2.5 15.5-4.2 31.2-5 46.9zM976 424.9c-2.9-15.4-6.6-30.7-11-45.9l15.3-4.5c4.6 15.6 8.4 31.4 11.3 47.4l-15.6 3zM55.4 392l-15.5-4.1c4.1-15.7 9.1-31.3 14.7-46.5l15 5.6c-5.4 14.7-10.2 29.8-14.2 45z m894-57.4c-5.9-14.5-12.6-28.9-19.9-42.7l14.2-7.5c7.6 14.4 14.4 29.1 20.5 44.2l-14.8 6zM88.2 303.9l-14.3-7.1c7.2-14.5 15.1-28.9 23.7-42.6l13.7 8.5c-8.4 13.1-16.1 27-23 41l-0.1 0.2z m817.1-52.5c-8.7-13-18.1-25.8-28-37.9l12.4-10.2c10.3 12.6 20 25.6 29 39.2l-13.4 8.9z m-767.2-27.3l-12.7-9.8c9.9-12.8 20.5-25.3 31.7-37.1l11.6 11c-10.6 11.1-20.9 23.1-30.5 35.6l-0.1 0.3z m707.5-45.5c-11.1-11.1-22.8-21.7-35-31.7l10.2-12.4c12.6 10.2 24.7 21.3 36.2 32.7l-11.4 11.4z m-642.8-23l-10.5-12.1c12.2-10.6 25.2-20.7 38.4-30.1l9.2 13.1c-12.6 8.7-25.1 18.5-37 28.8l-0.1 0.3z m570-36.7c-13.1-8.7-26.6-16.8-40.5-24.1l7.5-14.1c14.3 7.6 28.5 16 41.9 24.9l-8.9 13.3z m-493-17.7l-7.9-13.9c14.1-8 28.8-15.3 43.6-21.9l6.4 14.6c-14.3 6.4-28.4 13.6-42.1 21.2z m409.6-26.4c-14.5-5.9-29.3-11.1-44.4-15.5l4.5-15.4c15.5 4.6 31 10 46.1 16.1l-6.1 14.8h-0.1zM366 63.3l-4.9-15.2c15.5-5 31.2-9.3 47.1-12.7l3.4 15.6c-15.4 3.2-30.6 7.2-45.5 12l-0.1 0.3z m233.2-15.4c-15.4-2.9-31-5-46.7-6.3l1.3-15.9c16.2 1.4 32.4 3.6 48.3 6.5l-2.9 15.7z m-141-5L456.4 27c16-1.8 32.4-2.9 48.7-3.1l0.2 16c-15.7 0.4-31.6 1.4-47.1 3.1v-0.1zM529.6 716.4h-0.3c-15.3 0-30.2-5-42.5-14.2l-173.4-43.3c-5.9-1.4-10-6.8-9.8-13l3.7-106.1c0.1-3.8 1.9-7.4 5-9.8 2.3-1.8 5.2-2.8 8.2-2.8 0.8 0 1.6 0.1 2.3 0.2l66.5 12.8c9.7-17.9 28.4-29.1 48.8-29.1 3.3 0 6.7 0.3 10 0.9h0.3c6.5-0.4 41-2.4 75.5-2.4 36.7 0 81.4 2.3 86.5 13.2 0.7 1.4 0.7 3 0 4.4-3.8 7.1-26.9 10.8-51.2 14.8-31.6 5-64.2 10.2-63.3 23.5 1.7 25.3 82.6 26 83.4 26l136.3-52.7c5.1-1.4 10.4-2.1 15.7-2.1 13.1 0 25.8 4.2 36.3 12C782 563.2 788 584 783.8 604c-0.5 4.6-3.4 8.6-7.7 10.4l-196.8 87.4c-15 9.2-32.1 14.2-49.7 14.6z m158.9-261.7H422c-40.6-0.1-73.5-32.9-73.5-73.5s32.9-73.5 73.5-73.6h266.5c7.2 0 13.1 5.8 13.1 13.1 0 7.2-5.9 13-13.1 13h-23.6c-18.6 29-18.3 66.4 0.8 95.1h22.8c7.2 0 13.1 5.8 13.1 13.1-0.1 7-5.9 12.8-13.1 12.8zM437.9 349.6c-16.6 0-30.1 13.5-30.1 30.1s13.5 30.1 30.1 30.1 30.1-13.5 30.2-30.1c-0.1-16.6-13.6-30.1-30.2-30.1z" fill="#E58033" p-id="3745"></path></svg>

src/views/environmentalScreen/index.vue

@@ -192,7 +192,7 @@
               <li>
                 <div class="row-item">
                   <div class="svg-box">
-                    <svg-icon icon-class="danganzongliang" class-name="card-panel-icon" />
+                    <svg-icon icon-class="zaijieshuliang" class-name="card-panel-icon" />
                   </div>
                   <span>在借数量</span>
                 </div>
@@ -244,16 +244,16 @@
             <ul>
               <li>
                 <span>日借阅量</span>
-                <NumFlip :tnum="daylend" />
+                <NumFlip :tnum="daylend" :chartnum="daylendnum" />
               </li>
               <li><span>日归还量</span>
-                <NumFlip :tnum="dayreturn" />
+                <NumFlip :tnum="dayreturn" :chartnum="dayreturnnum" />
               </li>
               <li><span>月借阅量</span>
-                <NumFlip :tnum="monlend" />
+                <NumFlip :tnum="monlend" :chartnum="monlendnum" />
               </li>
               <li><span>月归还量</span>
-                <NumFlip :tnum="monreturn" />
+                <NumFlip :tnum="monreturn" :chartnum="monreturnnum" />
               </li>
             </ul>
 
@@ -264,7 +264,7 @@
         <div class="env-item container-wrap">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
-          <h3><i class="iconfont icon-zhenglishi" />档案借阅</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="60000" />
           </div>
@@ -272,7 +272,7 @@
         <div class="env-item container-wrap">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
-          <h3><i class="iconfont icon-zhenglishi" />档案类型</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="60000" />
           </div>
@@ -371,9 +371,13 @@ export default {
         waterLeakageText4: ''
       },
       daylend: 'daylend',
+      daylendnum: 1234,
       dayreturn: 'dayreturn',
+      dayreturnnum: 4567,
       monlend: 'monlend',
-      monreturn: 'monreturn'
+      monlendnum: 1001,
+      monreturn: 'monreturn',
+      monreturnnum: 123456
     }
   },
   async created() {
@@ -876,11 +880,12 @@ export default {
   color: #339CFF ;
   font-size: 14px;
   justify-content: space-between;
-    height: calc(100%  - 198px);
+    height: calc(50%  - 192px);
   .middle-bottom-l{
     display: flex;
     justify-content: space-between;
     width: 60%;
+    height:calc(100%  - 22px) !important;
     ul{
       width: 59%;
       padding: 25px 20px;
@@ -914,6 +919,7 @@ export default {
   }
   .middle-bottom-r{
     width: 38%;
+    height:calc(100%  - 22px) !important;
     ul{
       width: 100%;
       height: 100%;

src/views/environmentalScreen/module/numFlip.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="chartNum">
       <div :id="tnum" class="box-items">
-        <li class="number-item"><span><i ref="numberItem" class="item">0123456789</i></span></li>
+        <li v-for="index in flipNum" :key="index" class="number-item"><span><i :ref="tnum" :class="tnum">0123456789</i></span></li>
       </div>
     </div>
   </div>
@@ -14,11 +14,18 @@ export default {
     tnum: {
       type: String,
       default: null
+    },
+    chartnum: {
+      type: Array,
+      default: function() {
+        return 0
+      }
     }
   },
   data() {
     return {
-      chartNum: ['0', '0', '0', '0', '0', '0', '0', '0']
+      echartnum: this.chartnum,
+      flipNum: [0, 0, 0, 0, 0, 0, 0, 0]
     }
   },
   mounted() {
@@ -28,36 +35,37 @@ export default {
   },
   methods: {
     start() {
-      var 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
+      // 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
       setInterval(() => {
-        _this.toOrderNum('123456')
+        // _this.toOrderNum('123456')
+        _this.toOrderNum(this.chartnum)
         _this.setNumberTransform()
       }, 1000)
     },
     toOrderNum(num) {
       num = num.toString() // 数字变成字符串
-      if (num.length < 6) { // 如未满位数，添加"0"补位
+      if (num.length < 8) { // 如未满位数，添加"0"补位
         num = '0' + num
         this.toOrderNum(num) // 递归添加"0"补位
-      } else if (num.length === 6) { // 数中加入逗号
-        this.chartNum = num.split('') // 将其便变成数据
+      } else if (num.length === 8) { // 数中加入逗号
+        this.flipNum = num.split('') // 将其便变成数据
       } else {
         alert('显示异常')
       }
     },
     setNumberTransform() {
-      var numberItems = document.getElementsByClassName('item')
+      const numberItems = document.getElementsByClassName(this.tnum)
       // console.log(numberItems)
-      const numberArr = this.chartNum.filter(item => !isNaN(item))
-      for (var index = 0; index < numberItems.length; index++) {
+      const numberArr = this.flipNum.filter(item => !isNaN(item))
+      for (let index = 0; index < numberItems.length; index++) {
         const elem = numberItems[index]
         elem.style.transform = 'translate(-50%, -' + numberArr[index] * 10 + '%)'
       }