提交

README.md

@@ -1,24 +1,29 @@
 # app-data
 
 ## Project setup
+
 ```
-yarn install
+pnpm install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
-yarn serve
+pnpm serve
 ```
 
 ### Compiles and minifies for production
+
 ```
-yarn build
+pnpm build
 ```
 
 ### Lints and fixes files
+
 ```
-yarn lint
+pnpm lint
 ```
 
 ### Customize configuration
+
 See [Configuration Reference](https://cli.vuejs.org/config/).

src/components/maincomponents.vue

@@ -8,6 +8,11 @@
             <div class="numTitle">{{ playT | numform }}</div>
             <div class="numValue">总传播量</div>
           </el-card>
+          <br />
+          <el-card class="box-card" style="text-align: center">
+            <div class="numTitle">{{ publishCount | numform }}</div>
+            <div class="numValue">总发稿量</div>
+          </el-card>
         </el-col>
         <el-col :span="20" style="padding-left: 10px">
           <el-card class="box-card">
@@ -28,11 +33,7 @@
       <el-col :span="15">
         <div class="card">
           <div class="cardtit">传播量趋势</div>
-          <canvas
-            id="container"
-            style="width: 100%; height: 100%"
-            class=""
-          ></canvas>
+          <canvas id="container" style="width: 100%; height: 100%" class=""></canvas>
         </div>
       </el-col>
       <el-col :span="9" style="padding-left: 5px">
@@ -75,39 +76,21 @@
           </el-button>
         </el-button-group> -->
       </div>
-      <canvas
-        id="barChart"
-        v-if="heightBar > 0"
-        :height="heightBar"
-        style="width: 100%"
-        class=""
-      ></canvas>
+      <canvas id="barChart" v-if="heightBar > 0" :height="heightBar" style="width: 100%"></canvas>
     </div>
 
     <div class="card">
       <div class="cardtit">热点报道</div>
       <div style="padding: 10px">
         <el-table :data="platformList" style="width: 100%">
-          <el-table-column show-overflow-tooltip prop="host" label="部门">
+          <el-table-column show-overflow-tooltip prop="host" label="部门"> </el-table-column>
+          <el-table-column show-overflow-tooltip prop="subTopic" label="热点话题">
           </el-table-column>
-          <el-table-column
-            show-overflow-tooltip
-            prop="subTopic"
-            label="热点话题"
-          >
-          </el-table-column>
-          <el-table-column
-            show-overflow-tooltip
-            prop="playCount"
-            label="传播量"
-          >
+          <el-table-column show-overflow-tooltip prop="playCount" label="传播量">
             <template slot-scope="scope">
               <el-popover placement="right" width="400" trigger="hover">
                 <el-table :data="scope.row.topicDataList">
-                  <el-table-column
-                    property="platform"
-                    label="平台"
-                  ></el-table-column>
+                  <el-table-column property="platform" label="平台"></el-table-column>
                   <el-table-column property="address" label="传播量">
                     <template slot-scope="scopeSon">
                       {{ scopeSon.row.playCount | numform }}
@@ -158,17 +141,10 @@
       </div>
       <div style="padding: 20px">
         <el-table v-loading="loading" :data="userlist" style="width: 100%">
-          <el-table-column show-overflow-tooltip prop="depName" label="部门">
-          </el-table-column>
-          <el-table-column show-overflow-tooltip prop="name" label="账号">
-          </el-table-column>
-          <el-table-column show-overflow-tooltip prop="platform" label="平台">
-          </el-table-column>
-          <el-table-column
-            show-overflow-tooltip
-            prop="publishTime"
-            label="发稿时间"
-          >
+          <el-table-column show-overflow-tooltip prop="depName" label="部门"> </el-table-column>
+          <el-table-column show-overflow-tooltip prop="name" label="账号"> </el-table-column>
+          <el-table-column show-overflow-tooltip prop="platform" label="平台"> </el-table-column>
+          <el-table-column show-overflow-tooltip prop="publishTime" label="发稿时间">
           </el-table-column>
         </el-table>
         <el-pagination
@@ -187,40 +163,18 @@
       <div class="cardtit">TOP30</div>
       <div style="padding: 20px">
         <el-table v-loading="loading" :data="top" style="width: 100%">
-          <el-table-column
-            show-overflow-tooltip
-            prop="title"
-            label="标题"
-            width="300"
-          >
-          </el-table-column>
-          <el-table-column
-            show-overflow-tooltip
-            prop="platform"
-            label="平台"
-            width="50"
-          >
-          </el-table-column>
-          <el-table-column show-overflow-tooltip prop="depName" label="部门">
+          <el-table-column show-overflow-tooltip prop="title" label="标题" width="300">
           </el-table-column>
-          <el-table-column show-overflow-tooltip prop="name" label="账号">
+          <el-table-column show-overflow-tooltip prop="platform" label="平台" width="50">
           </el-table-column>
-          <el-table-column
-            show-overflow-tooltip
-            prop="readCount"
-            label="阅读量"
-            width="100"
-          >
+          <el-table-column show-overflow-tooltip prop="depName" label="部门"> </el-table-column>
+          <el-table-column show-overflow-tooltip prop="name" label="账号"> </el-table-column>
+          <el-table-column show-overflow-tooltip prop="readCount" label="阅读量" width="100">
             <template slot-scope="scope">
               {{ scope.row.readCount | numform }}
             </template>
           </el-table-column>
-          <el-table-column
-            width="150"
-            show-overflow-tooltip
-            prop="publishTime"
-            label="发稿时间"
-          >
+          <el-table-column width="150" show-overflow-tooltip prop="publishTime" label="发稿时间">
           </el-table-column>
         </el-table>
       </div>
@@ -239,7 +193,7 @@ import {
   baodianList,
   zhanghaoData,
   bumenList,
-  getTop,
+  getTop
 } from '@/api/index.js';
 let linechart = null,
   barchart = null,
@@ -249,6 +203,7 @@ export default {
   name: 'Maincomponents',
   data() {
     return {
+      publishCount: 0,
       playT: 0,
       plays: [],
       loading: false,
@@ -264,7 +219,7 @@ export default {
       usertotal: 0,
       height: 0,
       c: ['#FB6161', '#EC72DC', '#F98E53', '#49BED0', '#4BCA8B'],
-      heightBar: 0,
+      heightBar: 0
     };
   },
   filters: {
@@ -275,7 +230,7 @@ export default {
       else if (text >= 10000) num = (text / 10000).toFixed(2) - 0 + '万';
       else num = num + '';
       return num;
-    },
+    }
   },
   props: ['hd', 'topic'],
   watch: {
@@ -284,7 +239,7 @@ export default {
     },
     hd() {
       this.init();
-    },
+    }
   },
   mounted() {
     this.height = (this.$refs.main.offsetWidth / 24) * 6.9;
@@ -309,7 +264,7 @@ export default {
         oDay = oD.getDate();
       this.T = [
         [oYear, oMonth, oDay].join('-') + ' 00:00:00',
-        [Year, Month, Day].join('-') + ' 23:59:59',
+        [Year, Month, Day].join('-') + ' 23:59:59'
       ];
 
       baodianList(this.topic).then(r => {
@@ -328,8 +283,7 @@ export default {
             platform[v.platform] = pli.length;
             pli.push({ p: v.platform, val: v.playCount, a: 1 });
           } else {
-            pli[platform[v.platform]] &&
-              (pli[platform[v.platform]].val += v.playCount);
+            pli[platform[v.platform]] && (pli[platform[v.platform]].val += v.playCount);
           }
         }
         this.plays = pli.sort((a, b) => b.val - a.val);
@@ -367,12 +321,12 @@ export default {
         let options = (r || []).map(v => {
           return {
             value: v.depName,
-            label: v.depName,
+            label: v.depName
           };
         });
         options.unshift({
           value: '全部',
-          label: '全部',
+          label: '全部'
         });
         this.options = options;
       });
@@ -393,7 +347,7 @@ export default {
       const p = {
         page: this.page,
         pageSize: this.pageSize,
-        title: this.topic,
+        title: this.topic
       };
       this.dep && this.dep !== '全部' && (p.depName = this.dep);
       t[0] && (p.startTime = t[0]);
@@ -408,12 +362,17 @@ export default {
     bmGet() {
       bumenData({
         depRange: this.type,
-        title: this.topic,
+        title: this.topic
       }).then(r => {
         let li = (r || []).reverse();
         this.heightBar = li.length ? li.length * 35 + 40 : 0;
         localStorage.type = this.type;
         if (this.heightBar === 0) return;
+        let n = 0;
+        (li || []).map(v => {
+          n += v.publishCount;
+        });
+        this.publishCount = n;
         this.$nextTick(() => {
           this.bar1(li);
         });
@@ -436,15 +395,15 @@ export default {
       // 传播量趋势
       linechart = new F2.Chart({
         id: 'container',
-        pixelRatio: window.devicePixelRatio,
+        pixelRatio: window.devicePixelRatio
       });
       linechart.source(li, {
         dt: {
-          tickCount: 5,
+          tickCount: 5
         },
         playCount: {
-          tickCount: 5,
-        },
+          tickCount: 5
+        }
       });
       linechart.axis('dt', {
         label: function label(text, index, total) {
@@ -455,12 +414,12 @@ export default {
             textCfg.textAlign = 'right';
           }
           return textCfg;
-        },
+        }
       });
       linechart.scale('playCount', {
         formatter(text) {
           return that.numform(text);
-        },
+        }
       });
       linechart.tooltip({
         triggerOn: ['click'],
@@ -469,20 +428,16 @@ export default {
           items[0].name = items[0].title;
           items[1].name = null;
           items[1].value = 0;
-        },
+        }
       });
 
-      linechart
-        .area()
-        .position('dt*playCount')
-        .color('l(90) 0:#1890FF 1:#f7f7f7')
-        .shape('smooth');
+      linechart.area().position('dt*playCount').color('l(90) 0:#1890FF 1:#f7f7f7').shape('smooth');
       linechart
         .line()
         .position('dt*playCount')
         .color('#1890FF')
         .style({
-          lineWidth: 1,
+          lineWidth: 1
         })
         .shape('smooth');
       linechart.render();
@@ -497,13 +452,13 @@ export default {
         id: 'barChart',
         pixelRatio: window.devicePixelRatio,
         padding: [10, 50, 30, 140],
-        height: this.heightBar,
+        height: this.heightBar
       });
 
       barchart.source(li, {
         readCount: {
-          tickCount: 3,
-        },
+          tickCount: 3
+        }
       });
       barchart.axis('readCount', {
         label: function label(text) {
@@ -512,7 +467,7 @@ export default {
           textCfg.fontSize = 12;
           return textCfg;
         },
-        grid: null,
+        grid: null
       });
       barchart.axis('depName', {
         label: function label(text) {
@@ -521,18 +476,15 @@ export default {
           textCfg.fontSize = 14;
           return textCfg;
         },
-        grid: null,
+        grid: null
       });
 
       barchart.coord({
-        transposed: true,
+        transposed: true
       });
       barchart.tooltip(false);
 
-      barchart
-        .interval()
-        .position('depName*readCount')
-        .color('l(180) 0:#1890ff 1:#70cdd0'); // 定义柱状图渐变色
+      barchart.interval().position('depName*readCount').color('l(180) 0:#1890ff 1:#70cdd0'); // 定义柱状图渐变色
       barchart.render();
       // 绘制柱状图文本
       const offset = -5;
@@ -548,8 +500,8 @@ export default {
             text: that.numform(obj.readCount),
             textAlign: 'center',
             textBaseline: 'bottom',
-            fill: '#808080',
-          },
+            fill: '#808080'
+          }
         });
 
         shapes[obj.year] = text; // 缓存该 shape, 便于后续查找
@@ -563,7 +515,7 @@ export default {
       const that = this;
       piechart = new F2.Chart({
         id: 'piechart',
-        pixelRatio: window.devicePixelRatio,
+        pixelRatio: window.devicePixelRatio
       });
       let lis = [];
       for (let i = 0; i < li.length; i++) {
@@ -577,7 +529,7 @@ export default {
       piechart.coord('polar', {
         transposed: true,
         innerRadius: 0.7,
-        radius: 0.85,
+        radius: 0.85
       });
       // 添加饼图文本
       piechart.pieLabel({
@@ -585,16 +537,16 @@ export default {
         label1: function label1(data, color) {
           return {
             text: data.p,
-            fill: color,
+            fill: color
           };
         },
         label2: function label2(data) {
           return {
             text: ((data.val / that.playT) * 100).toFixed(2) + '%',
             fill: '#808080',
-            fontWeight: 'bold',
+            fontWeight: 'bold'
           };
-        },
+        }
       });
       piechart.axis(false);
       piechart
@@ -608,7 +560,7 @@ export default {
           '#F04864',
           '#8543E0',
           '#3436C7',
-          '#223273',
+          '#223273'
         ])
         .adjust('stack');
 
@@ -619,7 +571,7 @@ export default {
       this.$nextTick(() => {
         this.grtzhData();
       });
-    },
+    }
   },
   beforeDestroy() {
     linechart && linechart.destroy();
@@ -629,7 +581,7 @@ export default {
     barchart = null;
     piechart = null;
   },
-  components: {},
+  components: {}
 };
 </script>