提交

src/App.vue

@@ -29,7 +29,7 @@ export default {
   /*滚动条里面小方块*/
   border-radius: 10px;
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  background: #535353;
+  background: #babcc0;
 }
 
 *::-webkit-scrollbar-track {

src/components/maincomponents.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="maincomponents">
+  <div class="maincomponents" ref="main">
     <div class="card">
       <div class="cardtit">传播数据</div>
       <el-row style="margin: 10px 10px 0 10px; text-align: center">
@@ -13,6 +13,7 @@
           <el-card class="box-card">
             <div class="pl">
               <div class="platform" v-for="(item, i) in plays" :key="i">
+                <div class="line"></div>
                 <div class="numTitle" :style="'color:' + c[i % c.length]">
                   {{ item.val | numform }}
                 </div>
@@ -24,7 +25,7 @@
       </el-row>
     </div>
     <el-row>
-      <el-col :span="16">
+      <el-col :span="15">
         <div class="card">
           <div class="cardtit">传播量趋势</div>
           <canvas
@@ -34,7 +35,7 @@
           ></canvas>
         </div>
       </el-col>
-      <el-col :span="8" style="padding-left: 5px">
+      <el-col :span="9" style="padding-left: 5px">
         <div class="card">
           <div class="cardtit">传播平台占比</div>
           <canvas
@@ -204,13 +205,14 @@ export default {
         }
         if (!platform[v.platform] && platform[v.platform] !== 0) {
           platform[v.platform] = pli.length;
-          pli.push({ p: v.platform, val: v.playCount });
+          pli.push({ p: v.platform, val: v.playCount, a: 1 });
         } else {
           pli[platform[v.platform]] &&
             (pli[platform[v.platform]].val += v.playCount);
         }
       }
       this.plays = pli;
+      this.pie1(pli);
     });
     qushiData(this.topic).then(r => {
       this.line1(r);
@@ -221,26 +223,26 @@ export default {
       title: this.topic,
     }).then(r => {
       this.platformList = (r || []).sort((a, b) => b.readTotal - a.readTotal);
-      let obj = {},
-        li = [];
-      for (let i = 0; i < this.platformList.length; i++) {
-        const v = this.platformList[i];
-        let l = v.list || [];
-        l.map(o => {
-          if (!obj[o.platform] && obj[o.platform] !== 0) {
-            obj[o.platform] = li.length;
-            li.push({
-              platform: o.platform || "",
-              publishCount: o.publishCount || 0,
-              readCount: o.readCount || 0,
-            });
-          } else {
-            li[obj[o.platform]].publishCount = o.publishCount;
-            li[obj[o.platform]].readCount = o.readCount;
-          }
-        });
-      }
-      this.pie1(li);
+      //   let obj = {},
+      //     li = [];
+      //   for (let i = 0; i < this.platformList.length; i++) {
+      //     const v = this.platformList[i];
+      //     let l = v.list || [];
+      //     l.map(o => {
+      //       if (!obj[o.platform] && obj[o.platform] !== 0) {
+      //         obj[o.platform] = li.length;
+      //         li.push({
+      //           platform: o.platform || "",
+      //           publishCount: o.publishCount || 0,
+      //           readCount: o.readCount || 0,
+      //         });
+      //       } else {
+      //         li[obj[o.platform]].publishCount = o.publishCount;
+      //         li[obj[o.platform]].readCount = o.readCount;
+      //       }
+      //     });
+      //   }
+      //   this.pie1(li);
     });
     this.grtzhData();
     bumenList().then(r => {
@@ -273,7 +275,7 @@ export default {
         pageSize: this.pageSize,
         title: this.topic,
       };
-      this.dep && this.dep !== '全部' && (p.depName = this.dep)
+      this.dep && this.dep !== "全部" && (p.depName = this.dep);
       t[0] && (p.startTime = t[0]);
       t[1] && (p.endTime = t[1]);
       zhanghaoData(p).then(r => {
@@ -353,7 +355,10 @@ export default {
       linechart
         .line()
         .position("dt*playCount")
-        .color("l(90) 0:#1890FF 1:#f7f7f7")
+        .color("#1890FF")
+        .style({
+          lineWidth: 1,
+        })
         .shape("smooth");
       linechart.render();
     },
@@ -379,31 +384,10 @@ export default {
         grid: null,
       });
 
-      barchart.axis("depName", {
-        label: function label(text, index, total) {
-          const textCfg = {};
-          if (index === 0) {
-            textCfg.textAlign = "left";
-          } else if (index === total - 1) {
-            textCfg.textAlign = "right";
-          }
-          return textCfg;
-        },
-      });
-
       barchart.coord({
         transposed: true,
       });
-      barchart.tooltip({
-        showItemMarker: false,
-        triggerOn: ["touchstart", "touchmove"],
-        onShow: function onShow(ev) {
-          const items = ev.items;
-          items[0].name = null;
-          items[0].name = items[0].title;
-          items[0].value = "¥ " + items[0].value;
-        },
-      });
+      barchart.tooltip(false);
 
       barchart
         .interval()
@@ -419,7 +403,7 @@ export default {
         const point = barchart.getPosition(obj);
         const text = group.addShape("text", {
           attrs: {
-            x: point.x + 25,
+            x: point.x + 30,
             y: point.y + offset + 13,
             text: that.numform(obj.readCount),
             textAlign: "center",
@@ -437,15 +421,14 @@ export default {
       piechart = new F2.Chart({
         id: "piechart",
         pixelRatio: window.devicePixelRatio,
-        height: 296,
+        height: (this.$refs.main.offsetWidth / 24) * 7.5,
       });
       let lis = [];
       for (let i = 0; i < li.length; i++) {
         const v = li[i];
-        if (!v.readCount || v.readCount <= 0) continue;
+        if (!v.val || v.val <= 0) continue;
         lis.push(v);
       }
-
       piechart.source(lis);
       piechart.tooltip(false);
       piechart.legend(false);
@@ -456,16 +439,16 @@ export default {
       });
       // 添加饼图文本
       piechart.pieLabel({
-        sidePadding: 5,
+        anchorOffset: 0,
         label1: function label1(data, color) {
           return {
-            text: data.platform,
+            text: data.p,
             fill: color,
           };
         },
         label2: function label2(data) {
           return {
-            text: that.numform(data.readCount),
+            text: ((data.val / that.playT) * 100).toFixed(2) + "%",
             fill: "#808080",
             fontWeight: "bold",
           };
@@ -474,8 +457,8 @@ export default {
       piechart.axis(false);
       piechart
         .interval()
-        .position("a*readCount")
-        .color("platform", [
+        .position("a*val")
+        .color("p", [
           "#1890FF",
           "#13C2C2",
           "#2FC25B",
@@ -534,11 +517,24 @@ export default {
 }
 .maincomponents .platform {
   flex: 1;
+  position: relative;
+}
+.maincomponents .line {
+  border-right: 1px solid #eaeaea;
+  width: 1px;
+  height: 30px;
+  top: 15px;
+  position: absolute;
 }
 .maincomponents .el-table {
   color: #3b3b3b;
 }
+.maincomponents .el-table__header-wrapper {
+  border-radius: 5px;
+  overflow: hidden;
+}
 .maincomponents .has-gutter th {
   background: #eceff5;
+  color: #3b3b3b;
 }
 </style>

src/view/main.vue

@@ -5,11 +5,14 @@
         src="https://dangjian-web.oss-cn-chengdu.aliyuncs.com/img/logo1.png"
         style="width: 125px"
       />
+
       <img
         src="https://dangjian-web.oss-cn-chengdu.aliyuncs.com/img/out.png"
         style="width: 19px; float: right; margin-top: 2px"
         @click="layout"
       />
+
+      <div style="float: right;height:19px;line-height:19px;padding-right: 5px">{{username}}</div>
     </div>
     <div class="mainRight">
       <com-main v-if="hd" :hd="hd" :topic="hdName"></com-main>
@@ -26,6 +29,10 @@
             v-for="(item, i) in hds"
             :key="i"
           >
+            <i
+              class="el-icon-circle-close iconright rmicon"
+              @click="() => removehd(item)"
+            ></i>
             <span
               @click="
                 () => {
@@ -35,10 +42,6 @@
             >
               {{ item.name }}
             </span>
-            <i
-              class="el-icon-circle-close iconright"
-              @click="() => removehd(item)"
-            ></i>
           </div>
         </div>
       </div>
@@ -49,13 +52,13 @@
         </div>
         <div class="tbody">
           <div class="li" v-for="(item, i) in hts" :key="i">
-            <span @click="() => selecthd(item)">
-              {{ item.name }}
-            </span>
             <i
-              class="el-icon-circle-close iconright"
+              class="el-icon-circle-close iconright rmicon"
               @click="() => removeht(item)"
             ></i>
+            <span @click="() => selecthd(item)">
+              {{ item.name }}
+            </span>
           </div>
         </div>
       </div>
@@ -75,9 +78,11 @@ export default {
       hdName: "",
       hds: [],
       hts: [],
+      username: ""
     };
   },
   mounted() {
+      this.username = localStorage.login || ""
     gethd().then(r => {
       this.hds = r || [];
       this.hd = this.hds[0].activityId;
@@ -130,7 +135,7 @@ export default {
     },
     addht(v) {
       console.log(v);
-      this.$prompt("多个话题使用中文’；‘隔开", "添加话题", {
+      this.$prompt("多个话题使用中文‘；’隔开", "添加话题", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
       }).then(({ value }) => {
@@ -195,6 +200,11 @@ export default {
   border-radius: 10px;
   padding: 10px 24px;
   font-size: 12px;
+  padding-right: 20px; 
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
 }
 .main .tit {
   font-weight: 600;
@@ -215,6 +225,9 @@ export default {
   margin-top: 3px;
   cursor: pointer;
 }
+.main .rmicon{
+    margin-right: -10px
+}
 .main .mainRight {
   float: right;
   width: calc(100% - 300px);