大屏

project/dv/apps/AppXyDv.vue

@@ -130,6 +130,22 @@
       <div class="right-item middle-wrapper">
         <div class="title">分类统计</div>
         <div class="item-table">
+          <div class="left">
+            <div class="chart10" style="width: 100%; height: 240px;"></div>
+            <div class="left-text">
+              <h2>240</h2>
+              <span>总数</span>
+            </div>
+          </div>
+          <div class="right">
+            <div class="right-item" v-for="(item, index) in 5" :key="index">
+              <div class="right-item__left">
+                <i></i>
+                <span>类型A</span>
+              </div>
+              <p>类型A</p>
+            </div>
+          </div>
         </div>
       </div>
       <div class="right-item bottom-wrapper">
@@ -220,6 +236,14 @@
         if (document.querySelector('.AiDvWrapper .viewPanel')) {
           document.querySelector('.AiDvWrapper .viewPanel').style.backgroundImage = 'url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/bg.png)'
         }
+
+        this.initChart5('.chart10', [
+          { value: 1048, name: 'Search Engine' },
+          { value: 735, name: 'Direct' },
+          { value: 580, name: 'Email' },
+          { value: 484, name: 'Union Ads' },
+          { value: 300, name: 'Video Ads' }
+        ])
       })
     },
 
@@ -227,6 +251,60 @@
       onNodeClick (e) {
         this.getGridInfo(e)
       },
+      initChart5 (el, data) {
+        var chartDom = document.querySelector(el)
+        var myChart = echarts.init(chartDom)
+        var option = {
+          color: ['#2891FF', '#2AF0F8', '#61FDB9', '#FFBA68', '#DBE8FF', '#FD6C39'],
+          tooltip: {
+            trigger: 'item'
+          },
+          grid: {
+            top: '0%',
+            left: '0%',
+            right: '0%',
+            bottom: '0%',
+            height: 230,
+            containLabel: true
+          },
+          series: [
+            {
+              name: 'Access From',
+              type: 'pie',
+              radius: ['50%', '70%'],
+              avoidLabelOverlap: false,
+              itemStyle: {
+                borderRadius: 0,
+                borderColor: '#030D1C',
+                borderWidth: 3
+              },
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: false,
+                  fontSize: '20',
+                  fontWeight: 'bold'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                { value: 1048, name: 'Search Engine' },
+                { value: 735, name: 'Direct' },
+                { value: 580, name: 'Email' },
+                { value: 484, name: 'Union Ads' },
+                { value: 300, name: 'Video Ads' }
+              ]
+            }
+          ]
+        }
+
+        option && myChart.setOption(option)
+      },
 
       getInfo () {
         this.instance.post(`app/appintegraluser/userTotalIntegralSort`).then(res => {
@@ -1019,39 +1097,72 @@
         margin-bottom: 23px;
 
         .item-table {
-          .item-table__header {
+          position: relative;
-            display: flex;
+          height: 240px;
-            align-items: center;
-            justify-content: space-between;
-            height: 40px;
-            padding: 0 24px;
-            color: #82C5FF;
-            font-size: 14px;
-            background: rgba(35,160,172,0.2000);
-          }
 
-          .item-table__body {
+          .left {
-            height: 280px;
+            position: relative;
-            overflow-y: overlay;
+            left: -70px;
+            height: 240px;
 
-            .item-table__item {
+            .left-text {
               display: flex;
               align-items: center;
-              justify-content: space-between;
+              justify-items: center;
-              height: 40px;
+              flex-direction: column;
-              padding: 0 24px;
+              position: absolute;
-              color: #fff;
+              top: 50%;
-              font-size: 14px;
+              left: 50%;
-              background: rgba(35,160,172,0.2000);
+              z-index: 11;
+              line-height: 1;
+              transform: translate(-50%, -50%);
 
-              &:nth-of-type(2n - 1) {
+              h2 {
-                background: transparent;
+                font-size: 36px;
+                color: #fff;
               }
 
               span {
-                white-space: nowrap;
+                margin-top: 4px;
-                overflow: hidden;
+                color: #a4adbd;
-                text-overflow: ellipsis;
+                font-size: 20px;
+              }
+            }
+          }
+
+          .right {
+            position: absolute;
+            right: 0;
+            top: 50%;
+            z-index: 111;
+            transform: translateY(-50%);
+
+            .right-item {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+
+              .right-item__left {
+                display: flex;
+                align-items: center;
+                margin-right: 40px;
+
+                i {
+                  width: 14px;
+                  height: 14px;
+                  margin-right: 8px;
+                  background: #2891FF;
+                }
+
+                span {
+                  font-size: 14px;
+                  color: #fff;
+                }
+              }
+
+              P {
+                color: #fff;
+                font-size: 14px;
               }
             }
           }