添加统计分析

src/router/routes/routes-file-six.js

@@ -115,6 +115,7 @@ const statisticalAnalysis = {
   component: Layout,
   meta: {
     keepAlive: false,
+    roles: ['demo']
   },
   children: [
     {

src/views/statisticalAnalysis/components/index.vue

@@ -4,10 +4,29 @@
     <div class="content">
       <div class="content-list flex-wrap">
         <div class="content-list-box">
-          <div class="content-list-box-bp">dd</div>
+          <div class="content-list-box-bp">
+            <div class="content-list-box-bp-title">运输总量</div>
+            <div class="box-item">
+              <li v-for="(item, index) in orderNum" :key="index" :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }">
+                <span v-if="!isNaN(item)">
+                  <i ref="numberItem">0123456789</i>
+                </span>
+                <span v-else class="comma">{{ item }}</span>
+              </li>
+            </div>
+          </div>
         </div>
         <div class="content-list-box">
-          <div class="content-list-box-bp">dd</div>
+          <div class="content-list-box-bp">
+            <div class="flex">
+              <div class="total-transportation-info">
+                <div class="content-list-box-bp-title">运输总量</div>
+              </div>
+              <div class="total-transportation-content">
+                <LineCharts id="total-transportation" :option="totalOption" />
+              </div>
+            </div>
+          </div>
         </div>
         <div class="content-list-box">
           <div class="content-list-box-bp">dd</div>
@@ -18,8 +37,101 @@
 </template>
 
 <script>
+import LineCharts from '@/layout/components/Echarts/commonChartsLine.vue'
 export default {
-  name: 'statisticalAnalysisContent'
+  name: 'statisticalAnalysisContent',
+  components: {
+    LineCharts
+  },
+  data () {
+    return {
+      countEnterNum: '4567892111',
+      orderNum: ['1', '2', '3', '4', '5', '1', '1', '1', '1', '1'],
+      totalOption: {
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+        },
+        grid: {
+          left: '0%',
+          right: '0%',
+          bottom: '0%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['2021.12', '2022.01', '2022.02', '2022.03', '2022.04', '2022.05']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: 'Email',
+            type: 'line',
+            stack: 'Total',
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: 'Union Ads',
+            type: 'line',
+            stack: 'Total',
+            data: [220, 182, 191, 234, 290, 330, 310]
+          },
+          {
+            name: 'Video Ads',
+            type: 'line',
+            stack: 'Total',
+            data: [150, 232, 201, 154, 190, 330, 410]
+          },
+          {
+            name: 'Direct',
+            type: 'line',
+            stack: 'Total',
+            data: [320, 332, 301, 334, 390, 330, 320]
+          },
+          {
+            name: 'Search Engine',
+            type: 'line',
+            stack: 'Total',
+            data: [820, 932, 901, 934, 1290, 1330, 1320]
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    countEnterNum () {
+      this.getCountEnterNum();
+    }
+  },
+  methods: {
+    getCountEnterNum () {
+      this.$nextTick(() => {
+        this.toOrderNum(this.countEnterNum); // 这里输入数字即可调用
+        this.setNumberTransform();
+      });
+    },
+    toOrderNum (num) {
+      num = num.toString()
+      this.orderNum = num.split('')
+    },
+    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}%)`
+      }
+    },
+  },
+  mounted () {
+    this.getCountEnterNum();
+  },
 }
 </script>
 
@@ -36,6 +148,7 @@ export default {
   }
   .content {
     margin-top: 28px;
+    margin-left: 0;
     &-list {
       &-box {
         flex: 1;
@@ -75,7 +188,38 @@ export default {
         background-size: 10px 100%, 100% 10px;
         &-bp {
           padding: 36px;
+          position: relative;
+          height: 100%;
           border: 1px solid rgba($color: #fff, $alpha: 0.3);
+          &-title {
+            height: 20px;
+            font-size: 20px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #ffffff;
+          }
+          .total-transportation {
+            &-info {
+              width: 100px;
+              margin-right: 30px;
+            }
+            &-content {
+              min-height: 156px;
+              flex: 1;
+              position: relative;
+            }
+          }
+          &::after {
+            position: absolute;
+            content: "";
+            width: 11px;
+            height: 11px;
+            background-image: url("../../../assets/analysis/pic_triangle_conner.png");
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            left: 10px;
+            top: 10px;
+          }
         }
         &:last-child {
           margin-right: 0;
@@ -83,5 +227,86 @@ export default {
       }
     }
   }
+  .box-item {
+    margin-top: 36px;
+    position: relative;
+    height: 66px;
+    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: 42px;
+    height: 66px;
+    background: #1e3c6f;
+    list-style: none;
+    margin-right: 10px;
+    & > span {
+      position: relative;
+      display: inline-block;
+      margin-right: 10px;
+      width: 100%;
+      height: 100%;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+      overflow: hidden;
+      & > i {
+        font-size: 48px;
+        font-family: DIN;
+        font-weight: bold;
+        color: #ffffff;
+        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;
+  }
 }
 </style>>