Startseite Erkunden Hilfe
Registrieren Anmelden
liyongli
/
H5_Embedded_Page
1
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

提交

liyongli vor 4 Jahren
Ursprung
b7dd316a10
Commit
cb21dbebab
13 geänderte Dateien mit 1154 neuen und 463 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 3 3
      package.json
  2. 6 3
      public/index.html
  3. 28 0
      src/App.vue
  4. 1 1
      src/api/getList.js
  5. 0 210
      src/appMinxin/dist/getList.dev.js
  6. 0 204
      src/appMinxin/dist/getListSecond.dev.js
  7. 2 1
      src/main.js
  8. 5 1
      src/router/index.js
  9. 18 0
      src/utils/filters/index.js
  10. 522 7
      src/view/index/index.vue
  11. 486 0
      src/view/live/index.vue
  12. 79 29
      src/view/skeleton/index.vue
  13. 4 4
      yarn.lock

+ 3 - 3
package.json
Datei anzeigen 

@@ -9,7 +9,7 @@
 
   },
 
   "dependencies": {
 
     "@antv/data-set": "^0.11.7",
 
-    "@antv/f2": "^3.8.1",
 
+    "@antv/f2": "^3.8.9",
 
     "axios": "^0.21.0",
 
     "vant": "^2.11.2",
 
     "vue": "^2.6.11",
 
@@ -21,6 +21,7 @@
 
     "@vue/cli-plugin-babel": "~4.5.0",
 
     "@vue/cli-plugin-eslint": "~4.5.0",
 
     "@vue/cli-service": "~4.5.0",
 
+    "@vue/eslint-config-prettier": "^5.0.0",
 
     "babel-eslint": "^10.1.0",
 
     "core-js": "^3.6.5",
 
     "eslint": "^6.7.2",
 
@@ -28,8 +29,7 @@
 
     "eslint-plugin-vue": "^7.10.0",
 
     "node-sass": "^5.0.0",
 
     "sass-loader": "^10.1.0",
 
-    "vue-template-compiler": "^2.6.11",
 
-    "@vue/eslint-config-prettier": "^5.0.0"
 
+    "vue-template-compiler": "^2.6.11"
 
   },
 
   "browserslist": [
 
     "> 1%",

+ 6 - 3
public/index.html
Datei anzeigen 

@@ -4,6 +4,10 @@
 
     <meta charset="utf-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 
+    <meta
 
+      name="viewport"
 
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
 
+    />
 
     <title>陕西广电融媒体集团创新中心</title>
 
     <% if(!("production" == process.env.NODE_ENV && undefined ==
 
     process.env.VUE_APP_MODE)){ %>
 
@@ -16,9 +20,8 @@
 
   <body>
 
     <noscript>
 
       <strong
 
-        >We're sorry but 陕西广电融媒体集团创新中心 doesn't work
 
-        properly without JavaScript enabled. Please enable it to
 
-        continue.</strong
 
+        >We're sorry but 陕西广电融媒体集团创新中心 doesn't work properly
 
+        without JavaScript enabled. Please enable it to continue.</strong
 
       >
 
     </noscript>
 
     <div id="app"></div>

+ 28 - 0
src/App.vue
Datei anzeigen 

@@ -14,6 +14,9 @@ body {
 
   overflow: hidden;
 
   width: 100%;
 
   height: 100%;
 
+  font-weight: 400;
 
+  font-size: 14px;
 
+  color: #bfcbd9;
 
 }
 
 body {
 
   font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
 
@@ -23,4 +26,29 @@ body {
 
   font-weight: 400;
 
   color: #2c3e50;
 
 }
 
+
 
+.local_table {
 
+  width: 100%;
 
+  border-top: 1px solid #eee;
 
+  border-bottom: 1px solid #eee;
 
+}
 
+td {
 
+  padding: 5px;
 
+}
 
+.title {
 
+  padding-left: 13px;
 
+  height: 3em;
 
+  line-height: 3em;
 
+  position: relative;
 
+}
 
+.title::before {
 
+  position: absolute;
 
+  left: 5px; 
+  top: 1em;
 
+  display: block;
 
+  content: " ";
 
+  width: 2px;
 
+  height: 1em;
 
+  background-color: #bfcbd9;
 
+}
 
 </style>

+ 1 - 1
src/api/getList.js
Datei anzeigen 

@@ -45,7 +45,7 @@ export function getAllPlatform(param) {
 
 */
 
 export function getList(param) {
 
     return request({
 
-        url: 'time',
 
+        url: 'time/v2',
 
         params: param,
 
         closeLoading: true,
 
         method: 'get',

+ 0 - 210
src/appMinxin/dist/getList.dev.js
Datei anzeigen 

@@ -1,210 +0,0 @@
 
-"use strict";
 
-
 
-Object.defineProperty(exports, "__esModule", {
 
-  value: true
 
-});
 
-exports["default"] = void 0;
 
-
 
-var _getList = require("@/api/getList");
 
-
 
-var _default = {
 
-  data: function data() {
 
-    return {
 
-      timeout: undefined
 
-    };
 
-  },
 
-  methods: {
 
-    select: function select() {
 
-      var _this = this;
 
-
 
-      var title = this.$route.query.title;
 
-      (0, _getList.getBase)({
 
-        "topic_name": title
 
-      }).then(function (x) {
 
-        _this.allList = {
 
-          read: x.total_pv || 0,
 
-          talk: x.total_comment || 0,
 
-          keyWord: title,
 
-          totalLikes: x.total_digg || 0,
 
-          totalForward: x.total_forward || 0,
 
-          totalOri: x.total_ori || 0
 
-        };
 
-      });
 
-      (0, _getList.getAllPlatform)({
 
-        "topic_name": title
 
-      }).then(function (x) {
 
-        var list = [];
 
-
 
-        _this.platformList.map(function (className) {
 
-          var keyValue = "total_forward";
 
-          className === "浏览" && (keyValue = "total_pv");
 
-          className === "点赞" && (keyValue = "total_digg");
 
-          className === "评论" && (keyValue = "total_comment");
 
-
 
-          if (className === "浏览") {
 
-            (x || []).map(function (v) {
 
-              list.push({
 
-                name: className,
 
-                nickname: v.platform,
 
-                value: v[keyValue]
 
-              });
 
-            });
 
-          }
 
-        });
 
-
 
-        _this.platformSort = list;
 
-      });
 
-      (0, _getList.getPlatform)({
 
-        "topic_name": title,
 
-        platform: "ALL"
 
-      }).then(function (x) {
 
-        _this.userSortAll = x || [];
 
-
 
-        _this.clickBtn(_this.selectIndex);
 
-      });
 
-      (0, _getList.getPlatform)({
 
-        "topic_name": title,
 
-        platform: "douyin"
 
-      }).then(function (x) {
 
-        _this.douAllList = (x || []).map(function (v) {
 
-          // v.nickname = v.nickname.replace(/(?=(\B)(\S{2})+$)/g, "\n");
 
-          // v.nickname = v.nickname.replace(/^\n/g, "");
 
-          var li = v.nickname.split("");
 
-          v.nickname = li.map(function (nameString, i) {
 
-            i !== 0 && (i + 1) % 2 === 0 && (nameString = nameString + "\n");
 
-            return nameString;
 
-          }).join("");
 
-          return v;
 
-        });
 
-      });
 
-      (0, _getList.getPlatform)({
 
-        "topic_name": title,
 
-        platform: "kuaishou"
 
-      }).then(function (x) {
 
-        _this.kuaiAllList = (x || []).map(function (v) {
 
-          // v.nickname = v.nickname.replace(/(?=(\B)(\S{2})+$)/g, "\n");
 
-          // v.nickname = v.nickname.replace(/^\n/g, "");
 
-          var li = v.nickname.split("");
 
-          v.nickname = li.map(function (nameString, i) {
 
-            i !== 0 && (i + 1) % 2 === 0 && (nameString = nameString + "\n");
 
-            return nameString;
 
-          }).join("");
 
-          return v;
 
-        });
 
-      });
 
-      (0, _getList.getPlatform)({
 
-        "topic_name": title,
 
-        platform: "yangshi"
 
-      }).then(function (x) {
 
-        _this.yangAllList = (x || []).map(function (v) {
 
-          // v.nickname = v.nickname.replace(/(?=(\B)(\S{2})+$)/g, "\n");
 
-          // v.nickname = v.nickname.replace(/^\n/g, "");
 
-          var li = v.nickname.split("");
 
-          v.nickname = li.map(function (nameString, i) {
 
-            i !== 0 && (i + 1) % 2 === 0 && (nameString = nameString + "\n");
 
-            return nameString;
 
-          }).join("");
 
-          return v;
 
-        });
 
-      });
 
-      var Filename = this.$utils.getUrl("id");
 
-      (0, _getList.getCould)({}, this.$store.state.p[Filename]).then(function (res) {
 
-        var ori = res || [];
 
-        var listOri = [];
 
-        ori.map(function (v) {
 
-          listOri.push({
 
-            x: v.name,
 
-            value: v.value
 
-          });
 
-        });
 
-        _this.listOri = listOri;
 
-      });
 
-      this.getAllWeibo();
 
-    },
 
-    selectRead: function selectRead(dateT) {
 
-      var _this2 = this;
 
-
 
-      (0, _getList.getList)({
 
-        "topic_name": this.$route.query.title,
 
-        time: dateT.type
 
-      }).then(function (res) {
 
-        _this2.read = (res.read || []).map(function (v) {
 
-          return {
 
-            date: v.time,
 
-            type: "微博-阅读量趋势",
 
-            value: v.value
 
-          };
 
-        });
 
-        _this2.readType = dateT.type;
 
-      });
 
-    },
 
-    selectMe: function selectMe(dateT) {
 
-      var _this3 = this;
 
-
 
-      (0, _getList.getList)({
 
-        "topic_name": this.$route.query.title,
 
-        time: dateT.type
 
-      }).then(function (res) {
 
-        _this3.me = (res.me || []).map(function (v) {
 
-          return {
 
-            date: v.time,
 
-            type: "微博-讨论趋势",
 
-            value: v.value
 
-          };
 
-        });
 
-        _this3.meType = dateT.type;
 
-      });
 
-    },
 
-    selectOri: function selectOri(dateT) {
 
-      var _this4 = this;
 
-
 
-      (0, _getList.getList)({
 
-        "topic_name": this.$route.query.title,
 
-        time: dateT.type
 
-      }).then(function (res) {
 
-        _this4.ori = (res.ori || []).map(function (v) {
 
-          return {
 
-            date: v.time,
 
-            type: "微博-原创趋势",
 
-            value: v.value
 
-          };
 
-        });
 
-        _this4.oriType = dateT.type;
 
-      });
 
-    },
 
-    getAllWeibo: function getAllWeibo() {
 
-      var _this5 = this;
 
-
 
-      (0, _getList.getList)({
 
-        "topic_name": this.$route.query.title,
 
-        time: "30d"
 
-      }).then(function (res) {
 
-        _this5.read = (res.read || []).map(function (v) {
 
-          return {
 
-            date: v.time,
 
-            type: "微博-阅读量趋势",
 
-            value: v.value
 
-          };
 
-        });
 
-        _this5.ori = (res.ori || []).map(function (v) {
 
-          return {
 
-            date: v.time,
 
-            type: "微博-原创趋势",
 
-            value: v.value
 
-          };
 
-        });
 
-        _this5.me = (res.me || []).map(function (v) {
 
-          return {
 
-            date: v.time,
 
-            type: "微博-讨论趋势",
 
-            value: v.value
 
-          };
 
-        });
 
-      })["catch"](function () {// window.clearInterval(this.timeout)
 
-      });
 
-    }
 
-  },
 
-  created: function created() {},
 
-  mounted: function mounted() {}
 
-};
 
-exports["default"] = _default;

+ 0 - 204
src/appMinxin/dist/getListSecond.dev.js
Datei anzeigen 

@@ -1,204 +0,0 @@
 
-"use strict";
 
-
 
-Object.defineProperty(exports, "__esModule", {
 
-  value: true
 
-});
 
-exports["default"] = void 0;
 
-
 
-var _getList = require("@/api/getList");
 
-
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-
 
-var _default = {
 
-  data: function data() {
 
-    return {
 
-      timeout: undefined
 
-    };
 
-  },
 
-  methods: {
 
-    select: function select() {
 
-      var _this = this;
 
-
 
-      var title = this.$route.query.title;
 
-      (0, _getList.getBase)(this.pageDate).then(function (x) {
 
-        _this.allList = {
 
-          read: x.total_pv || 0,
 
-          talk: x.total_comment || 0,
 
-          keyWord: title,
 
-          totalLikes: x.total_digg || 0,
 
-          totalForward: x.total_forward || 0,
 
-          totalOri: x.total_ori || 0
 
-        };
 
-      });
 
-      (0, _getList.getAllPlatform)(this.pageDate).then(function (x) {
 
-        var list = [];
 
-
 
-        _this.platformList.map(function (className) {
 
-          var keyValue = "total_forward";
 
-          className === "浏览" && (keyValue = "total_pv");
 
-          className === "点赞" && (keyValue = "total_digg");
 
-          className === "评论" && (keyValue = "total_comment");
 
-
 
-          if (className === "浏览") {
 
-            (x || []).map(function (v) {
 
-              list.push({
 
-                name: className,
 
-                nickname: v.platform,
 
-                value: v[keyValue]
 
-              });
 
-            });
 
-          }
 
-        });
 
-
 
-        _this.platformSort = list;
 
-      });
 
-      (0, _getList.getPlatform)(_objectSpread({}, this.pageDate, {
 
-        platform: "ALL"
 
-      })).then(function (x) {
 
-        _this.userSortAll = x || [];
 
-
 
-        _this.clickBtn(_this.selectIndex);
 
-      });
 
-      (0, _getList.getPlatform)(_objectSpread({}, this.pageDate, {
 
-        platform: "douyin"
 
-      })).then(function (x) {
 
-        _this.douAllList = (x || []).map(function (v) {
 
-          // v.nickname = v.nickname.replace(/(?=(\B)(\S{2})+$)/g, "\n");
 
-          // v.nickname = v.nickname.replace(/^\n/g, "");
 
-          var li = v.nickname.split("");
 
-          v.nickname = li.map(function (nameString, i) {
 
-            i !== 0 && (i + 1) % 2 === 0 && (nameString = nameString + "\n");
 
-            return nameString;
 
-          }).join("");
 
-          return v;
 
-        });
 
-      });
 
-      (0, _getList.getPlatform)(_objectSpread({}, this.pageDate, {
 
-        platform: "kuaishou"
 
-      })).then(function (x) {
 
-        _this.kuaiAllList = (x || []).map(function (v) {
 
-          // v.nickname = v.nickname.replace(/(?=(\B)(\S{2})+$)/g, "\n");
 
-          // v.nickname = v.nickname.replace(/^\n/g, "");
 
-          var li = v.nickname.split("");
 
-          v.nickname = li.map(function (nameString, i) {
 
-            i !== 0 && (i + 1) % 2 === 0 && (nameString = nameString + "\n");
 
-            return nameString;
 
-          }).join("");
 
-          return v;
 
-        });
 
-      });
 
-      (0, _getList.getPlatform)(_objectSpread({}, this.pageDate, {
 
-        platform: "yangshi"
 
-      })).then(function (x) {
 
-        _this.yangAllList = (x || []).map(function (v) {
 
-          // v.nickname = v.nickname.replace(/(?=(\B)(\S{2})+$)/g, "\n");
 
-          // v.nickname = v.nickname.replace(/^\n/g, "");
 
-          var li = v.nickname.split("");
 
-          v.nickname = li.map(function (nameString, i) {
 
-            i !== 0 && (i + 1) % 2 === 0 && (nameString = nameString + "\n");
 
-            return nameString;
 
-          }).join("");
 
-          return v;
 
-        });
 
-      });
 
-      var Filename = this.$utils.getUrl("id");
 
-      (0, _getList.getCould)({}, this.$store.state.p[Filename]).then(function (res) {
 
-        var ori = res || [];
 
-        var listOri = [];
 
-        ori.map(function (v) {
 
-          listOri.push({
 
-            x: v.name,
 
-            value: v.value
 
-          });
 
-        });
 
-        _this.listOri = listOri;
 
-      });
 
-      this.getAllWeibo();
 
-    },
 
-    selectRead: function selectRead(dateT) {
 
-      var _this2 = this;
 
-
 
-      (0, _getList.getList)(_objectSpread({}, this.pageDate, {
 
-        time: dateT.type
 
-      })).then(function (res) {
 
-        _this2.read = (res.read || []).map(function (v) {
 
-          return {
 
-            date: v.time,
 
-            type: "微博-阅读量趋势",
 
-            value: v.value
 
-          };
 
-        });
 
-        _this2.readType = dateT.type;
 
-      });
 
-    },
 
-    selectMe: function selectMe(dateT) {
 
-      var _this3 = this;
 
-
 
-      (0, _getList.getList)(_objectSpread({}, this.pageDate, {
 
-        time: dateT.type
 
-      })).then(function (res) {
 
-        _this3.me = (res.me || []).map(function (v) {
 
-          return {
 
-            date: v.time,
 
-            type: "微博-讨论趋势",
 
-            value: v.value
 
-          };
 
-        });
 
-        _this3.meType = dateT.type;
 
-      });
 
-    },
 
-    selectOri: function selectOri(dateT) {
 
-      var _this4 = this;
 
-
 
-      (0, _getList.getList)(_objectSpread({}, this.pageDate, {
 
-        time: dateT.type
 
-      })).then(function (res) {
 
-        _this4.ori = (res.ori || []).map(function (v) {
 
-          return {
 
-            date: v.time,
 
-            type: "微博-原创趋势",
 
-            value: v.value
 
-          };
 
-        });
 
-        _this4.oriType = dateT.type;
 
-      });
 
-    },
 
-    getAllWeibo: function getAllWeibo() {
 
-      var _this5 = this;
 
-
 
-      (0, _getList.getList)(_objectSpread({}, this.pageDate, {
 
-        time: "30d"
 
-      })).then(function (res) {
 
-        _this5.read = (res.read || []).map(function (v) {
 
-          return {
 
-            date: v.time,
 
-            type: "微博-阅读量趋势",
 
-            value: v.value
 
-          };
 
-        });
 
-        _this5.ori = (res.ori || []).map(function (v) {
 
-          return {
 
-            date: v.time,
 
-            type: "微博-原创趋势",
 
-            value: v.value
 
-          };
 
-        });
 
-        _this5.me = (res.me || []).map(function (v) {
 
-          return {
 
-            date: v.time,
 
-            type: "微博-讨论趋势",
 
-            value: v.value
 
-          };
 
-        });
 
-      })["catch"](function () {// window.clearInterval(this.timeout)
 
-      });
 
-    }
 
-  },
 
-  created: function created() {},
 
-  mounted: function mounted() {}
 
-};
 
-exports["default"] = _default;

+ 2 - 1
src/main.js
Datei anzeigen 

@@ -2,13 +2,14 @@ import Vue from 'vue'
 
 import App from './App.vue'
 
 import router from "./router";
 
 import utils from "./utils/utils";
 
+import filters from "./utils/filters/index";
 
 import store from './store/index'
 
 import config from "./config/index";
 
 
 Vue.config.productionTip = false;
 
 Vue.prototype.$config = config;
 
 Vue.prototype.$utils = utils;
 
-
 
+Vue.filter("formatnum", filters.formatNum)
 
 
 new Vue({
 
   router,

+ 5 - 1
src/router/index.js
Datei anzeigen 

@@ -8,7 +8,6 @@ Vue.use(VueRouter);
 
 const routes = [
 
   {
 
     path: "/",
 
-    redirect: "/home",
 
     name: "index",
 
     component: Skeleton,
 
     children: [
 
@@ -16,6 +15,11 @@ const routes = [
 
         path: "home",
 
         name: "home",
 
         component: resolve => require(["@/view/index/index.vue"], resolve)
 
+      },
 
+      {
 
+        path: "live",
 
+        name: "live",
 
+        component: resolve => require(["@/view/live/index.vue"], resolve)
 
       }
 
     ]
 
   },

+ 18 - 0
src/utils/filters/index.js
Datei anzeigen 

@@ -0,0 +1,18 @@
 
+function formatNum(num) {
 
+  let n = num || 0;
 
+  if (n >= 100000000) {
 
+    n = (num / 10000000).toFixed(2) - 0 + "亿";
 
+  }
 
+  if (n >= 10000000) {
 
+    n = (num / 1000000).toFixed(2) - 0 + "千万";
 
+  }
 
+  if (n >= 10000) {
 
+    n = (num / 10000).toFixed(2) - 0 + "万";
 
+  }
 
+  n == 0 && (n = '-');
 
+  return n;
 
+}
 
+
 
+export default {
 
+  formatNum,
 
+};

+ 522 - 7
src/view/index/index.vue
Datei anzeigen 

@@ -1,14 +1,529 @@
 
 <template>
 
-    <div></div>
 
-</template>
 
+  <div style="padding-bottom: 1em">
 
+    <table class="local_table">
 
+      <tr>
 
+        <td v-if="baseData.total_pv !== -1">总浏览量</td>
 
+        <td v-if="baseData.total_pv !== -1">
 
+          {{ baseData.total_pv | formatnum }}
 
+        </td>
 
+        <td v-if="baseData.total_ori !== -1">原创量</td>
 
+        <td v-if="baseData.total_ori !== -1">
 
+          {{ baseData.total_ori | formatnum }}
 
+        </td>
 
+      </tr>
 
+      <tr>
 
+        <td v-if="baseData.total_digg !== -1">总点赞数</td>
 
+        <td v-if="baseData.total_digg !== -1">
 
+          {{ baseData.total_digg | formatnum }}
 
+        </td>
 
+        <td v-if="baseData.total_comment !== -1">总评论数</td>
 
+        <td v-if="baseData.total_comment !== -1">
 
+          {{ baseData.total_comment | formatnum }}
 
+        </td>
 
+      </tr>
 
+      <tr>
 
+        <td v-if="baseData.total_forward !== -1">总转发量</td>
 
+        <td v-if="baseData.total_forward !== -1">
 
+          {{ baseData.total_forward | formatnum }}
 
+        </td>
 
+        <td v-if="baseData.live_uv !== -1">直播观看人数</td>
 
+        <td v-if="baseData.live_uv !== -1">
 
+          {{ baseData.live_uv | formatnum }}
 
+        </td>
 
+      </tr>
 
+      <tr>
 
+        <td v-if="baseData.live_add_fans !== -1">新增粉丝数</td>
 
+        <td v-if="baseData.live_add_fans !== -1">
 
+          {{ baseData.live_add_fans | formatnum }}
 
+        </td>
 
+        <td v-if="baseData.live_comment !== -1">直播评论数</td>
 
+        <td v-if="baseData.live_comment !== -1">
 
+          {{ baseData.live_comment | formatnum }}
 
+        </td>
 
+      </tr>
 
+    </table>
 
+
 
+    <br v-if="baseData.has_live_douyin_data" />
 
+    <van-button
 
+      v-if="baseData.has_live_douyin_data"
 
+      plain
 
+      hairline
 
+      type="info"
 
+      style="margin: 0 5px"
 
+      size="normal"
 
+      @click="show = true"
 
+      round
 
+      >直播</van-button
 
+    >
 
+    <br v-if="baseData.has_live_douyin_data" />
 
+    <div v-if="cakeList.length" class="title">平台对比</div>
 
+    <canvas
 
+      v-if="cakeList.length"
 
+      id="cake"
 
+      class="canvas"
 
+      :width="client.width"
 
+      :height="client.height"
 
+    ></canvas>
 
+    <div v-if="userSort.length" class="title">账号排名</div>
 
+    <canvas
 
+      v-if="userSort.length"
 
+      id="account"
 
+      class="canvas"
 
+      :width="client.width"
 
+      :height="client.height"
 
+    ></canvas>
 
+    <div v-if="baseData.word_cloud_url" class="title">词云</div>
 
+    <van-image v-if="baseData.word_cloud_url" :src="baseData.word_cloud_url">
 
+      <template v-slot:loading>
 
+        <van-loading type="spinner" size="20" />
 
+      </template>
 
+    </van-image>
 
+    <!-- <canvas
 
+      id="keyCloud"
 
+      class="canvas"
 
+      :width="client.width"
 
+      :height="client.height"
 
+    ></canvas> -->
 
+    <div v-if="douyin.length" class="title">抖音-评论排行</div>
 
+    <canvas
 
+      v-if="douyin.length"
 
+      id="douyinComment"
 
+      class="canvas"
 
+      :width="client.width"
 
+      :height="client.height"
 
+    ></canvas>
 
+    <div v-if="douyin.length" class="title">抖音-点赞排行</div>
 
+    <canvas
 
+      v-if="douyin.length"
 
+      id="douyinDigg"
 
+      class="canvas"
 
+      :width="client.width"
 
+      :height="client.height"
 
+    ></canvas>
 
+    <div v-if="douyin.length" class="title">抖音-粉丝量排行</div>
 
+    <canvas
 
+      v-if="douyin.length"
 
+      id="douyinMplatformFollowers"
 
+      class="canvas"
 
+      :width="client.width"
 
+      :height="client.height"
 
+    ></canvas>
 
+    <div v-if="kuaishou.length" class="title">快手-播放量排行</div>
 
+    <canvas
 
+      v-if="kuaishou.length"
 
+      id="kuaishouPlay"
 
+      class="canvas"
 
+      :width="client.width"
 
+      :height="client.height"
 
+    ></canvas>
 
+    <div v-if="kuaishou.length" class="title">快手-评论排行</div>
 
+    <canvas
 
+      v-if="kuaishou.length"
 
+      id="kuaishouComment"
 
+      class="canvas"
 
+      :width="client.width"
 
+      :height="client.height"
 
+    ></canvas>
 
+    <div v-if="read.length" class="title">微博-阅读量趋势</div>
 
+    <canvas
 
+      v-if="read.length"
 
+      id="weiboRead"
 
+      class="canvas"
 
+      :width="client.width"
 
+      :height="client.height"
 
+    ></canvas>
 
+    <div v-if="me.length" class="title">微博-讨论趋势</div>
 
+    <canvas
 
+      v-if="me.length"
 
+      id="weiboMe"
 
+      class="canvas"
 
+      :width="client.width"
 
+      :height="client.height"
 
+    ></canvas>
 
+    <div v-if="ori.length" class="title">微博-原创趋势</div>
 
+    <canvas
 
+      v-if="ori.length"
 
+      id="weiboOri"
 
+      class="canvas"
 
+      :width="client.width"
 
+      :height="client.height"
 
+    ></canvas>
 
+    <div v-if="yangshi.length" class="title">央视-浏览排行</div>
 
+    <canvas
 
+      v-if="yangshi.length"
 
+      id="yangshiPv"
 
+      class="canvas"
 
+      :width="client.width"
 
+      :height="client.height"
 
+    ></canvas>
 
 
-<style lang="sass" scoped>
 
+    <van-popup safe-area-inset-bottom v-model="show" round position="bottom">
 
+      123
 
+    </van-popup>
 
+  </div>
 
+</template>
 
 
-</style>
 
+<style scoped></style>
 
 
 <script>
 
+import {
 
+  getAllPlatform,
 
+  getPlatform,
 
+  getList,
 
+} from "@/api/getList.js";
 
+import filters from "@/utils/filters/index";
 
+import {
 
+  Image as vanImage,
 
+  Loading as vanLoading,
 
+  Popup as vanPopup,
 
+  Button as vanButton,
 
+} from "vant";
 
+import "vant/lib/image/style";
 
+import "vant/lib/popup/style";
 
+import "vant/lib/button/style";
 
+import F2 from "@antv/f2";
 
 export default {
 
-    
-}
 
-</script>
 
+  components: {
 
+    vanImage,
 
+    vanLoading,
 
+    vanPopup,
 
+    vanButton,
 
+  },
 
+  data() {
 
+    return {
 
+      initCanvas: {
 
+        cake: undefined,
 
+        account: undefined,
 
+      },
 
+      baseData: {},
 
+      client: {
 
+        width: 0,
 
+        height: 0,
 
+      },
 
+      userSort: [],
 
+      douyin: [],
 
+      kuaishou: [],
 
+      weibo: {},
 
+      me: [],
 
+      ori: [],
 
+      read: [],
 
+      yangshi: [],
 
+      cakeList: [],
 
+      show: false,
 
+    };
 
+  },
 
+  created() {
 
+    this.init();
 
+  },
 
+  methods: {
 
+    init() {
 
+      let titles = this.$route.query.title.split(" / ");
 
+      let title =  titles[titles.length - 1];
 
+      // let title =  encodeURIComponent(titles[titles.length - 1]);
 
+      let clientWidth = document.body.clientWidth || 0;
 
+      this.client = {
 
+        width: clientWidth,
 
+        height: (clientWidth / 16) * 9,
 
+      };
 
+      this.baseData = JSON.parse(this.$route.query.data);
 
+      getAllPlatform({
 
+        season: this.$route.query.season,
 
+        topic_name: title,
 
+      }).then(res => {
 
+        this.cakeList = res || [];
 
+        if (!this.cakeList.length) return;
 
+        this.$nextTick(() => {
 
+          this.cake(res || []);
 
+        });
 
+      });
 
+      getPlatform({
 
+        season: this.$route.query.season,
 
+        topic_name: title,
 
+        platform: "ALL",
 
+        type: "all",
 
+      }).then(res => {
 
+        this.userSort = (res || []).map(v => {
 
+          return {
 
+            name: v.nickname,
 
+            digg_count: v.digg_count,
 
+            comment_count: v.comment_count,
 
+            forward_count: v.forward_count,
 
+          };
 
+        });
 
+        if (!this.userSort.length) return;
 
+        this.$nextTick(() => {
 
+          let list = this.userSort.sort((a, b) => b.digg_count - a.digg_count);
 
+          this.account(list, "digg_count", "account");
 
+        });
 
+      });
 
+      getPlatform({
 
+        season: this.$route.query.season,
 
+        topic_name: title,
 
+        platform: "douyin",
 
+        type: "douyin",
 
+      }).then(res => {
 
+        this.douyin = (res || []).map(v => {
 
+          return {
 
+            name: v.nickname,
 
+            digg_count: v.digg_count,
 
+            comment_count: v.comment_count,
 
+            mplatform_followers_count: v.mplatform_followers_count,
 
+          };
 
+        });
 
+        if (!this.douyin.length) return;
 
+        this.$nextTick(() => {
 
+          // 点赞
 
+          let list = this.douyin.sort((a, b) => b.digg_count - a.digg_count);
 
+          this.account(list, "digg_count", "douyinDigg");
 
+          // 评论
 
+          let listComment = this.douyin.sort(
 
+            (a, b) => b.comment_count - a.comment_count
 
+          );
 
+          this.account(listComment, "comment_count", "douyinComment");
 
+          // 粉丝量
 
+          let listFollowers = this.douyin.sort(
 
+            (a, b) => b.mplatform_followers_count - a.mplatform_followers_count
 
+          );
 
+          this.account(
 
+            listFollowers,
 
+            "mplatform_followers_count",
 
+            "douyinMplatformFollowers"
 
+          );
 
+        });
 
+      });
 
+      getPlatform({
 
+        season: this.$route.query.season,
 
+        topic_name: title,
 
+        platform: "kuaishou",
 
+        type: "kuaishou",
 
+      }).then(res => {
 
+        this.kuaishou = (res || []).map(v => {
 
+          return {
 
+            name: v.nickname,
 
+            pv: v.pv,
 
+            comment_count: v.comment_count,
 
+          };
 
+        });
 
+        if (!this.kuaishou.length) return;
 
+        this.$nextTick(() => {
 
+          // 播放量
 
+          let list = this.kuaishou.sort((a, b) => b.pv - a.pv);
 
+          this.account(list, "pv", "kuaishouPlay");
 
+          // 评论
 
+          let listComment = this.kuaishou.sort(
 
+            (a, b) => b.comment_count - a.comment_count
 
+          );
 
+          this.account(listComment, "comment_count", "kuaishouComment");
 
+        });
 
+      });
 
+      getPlatform({
 
+        season: this.$route.query.season,
 
+        topic_name: title,
 
+        platform: "yangshi",
 
+        type: "yangshi",
 
+      }).then(res => {
 
+        this.yangshi = (res || []).map(v => {
 
+          return {
 
+            name: v.nickname,
 
+            pv: v.pv,
 
+          };
 
+        });
 
+        if (!this.yangshi.length) return;
 
+        this.$nextTick(() => {
 
+          // 播放量
 
+          let list = this.yangshi.sort((a, b) => b.pv - a.pv);
 
+          this.account(list, "pv", "yangshiPv");
 
+        });
 
+      });
 
+      getList({
 
+        topic_name: title,
 
+        time: "30d",
 
+        season: this.$route.query.season,
 
+      }).then(res => {
 
+        this.weibo = res || {};
 
+        let weiboSelect = this.weibo["30d"] || { me: [], read: [], ori: [] };
 
+        this.me = weiboSelect.me || [];
 
+        this.read = weiboSelect.read || [];
 
+        this.ori = weiboSelect.ori || [];
 
+        this.$nextTick(() => {
 
+          this.me.length && this.line(this.me, "value", "weiboMe");
 
+          this.read.length && this.line(this.read, "value", "weiboRead");
 
+          this.ori.length && this.line(this.ori, "value", "weiboOri");
 
+        });
 
+      });
 
+    },
 
+    cake(list) {
 
+      let data = list.map(v => {
 
+        return {
 
+          name: v.platform,
 
+          percent: v.total_pv,
 
+          a: "1",
 
+        };
 
+      });
 
+      const chart = new F2.Chart({
 
+        id: "cake",
 
+        pixelRatio: window.devicePixelRatio,
 
+      });
 
+      chart.source(data, {
 
+        percent: {
 
+          formatter: function formatter(val) {
 
+            return val * 100 + "%";
 
+          },
 
+        },
 
+      });
 
+      chart.tooltip(false);
 
+      chart.coord("polar", {
 
+        transposed: true,
 
+        radius: 1,
 
+      });
 
+      chart.axis(false);
 
+      chart.legend({
 
+        position: "left",
 
+      });
 
+      chart
 
+        .interval()
 
+        .position("a*percent")
 
+        .color("name", ["#13C2C2", "#2FC25B", "#FACC14", "#F04864", "#8543E0"])
 
+        .adjust("stack")
 
+        .style({
 
+          lineWidth: 1,
 
+          stroke: "#fff",
 
+          lineJoin: "round",
 
+          lineCap: "round",
 
+        })
 
+        .animate({
 
+          appear: {
 
+            duration: 1200,
 
+            easing: "bounceOut",
 
+          },
 
+        });
 
+
 
+      chart.render();
 
+      this.initCanvas.cake = chart;
 
+    },
 
+    account(list, key, id) {
 
+      // F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
 
+      let data = [];
 
+      let len = list.length > 10 ? 10 : list.length;
 
+      for (let i = 0; i < len; i++) {
 
+        const v = list[i];
 
+
 
+        const li = v.name.split("");
 
+        let nickname = li
 
+          .map((val, i) => {
 
+            i !== 0 && (i + 1) % 2 === 0 && (val = val + "\n");
 
+            return val;
 
+          })
 
+          .join("");
 
+        data.push({
 
+          name: nickname,
 
+          value: v[key],
 
+        });
 
+      }
 
+      // Step 1: 创建 Chart 对象
 
+      const chart = new F2.Chart({
 
+        id,
 
+        pixelRatio: window.devicePixelRatio, // 指定分辨率
 
+      });
 
+
 
+      chart.legend(false);
 
+      chart.axis("value", {
 
+        label: function label(text) {
 
+          return { text: filters.formatNum(text) };
 
+        },
 
+      });
 
 
+      // Step 2: 载入数据源
 
+      chart.source(data);
 
+
 
+      // Step 3：创建图形语法，绘制柱状图
 
+      chart
 
+        .interval()
 
+        .position("name*value")
 
+        .color("name", ["#13C2C2"]);
 
+
 
+      // Step 4: 渲染图表
 
+      chart.render();
 
+
 
+      // 绘制柱状图文本
 
+      const offset = -5;
 
+      const canvas = chart.get("canvas");
 
+      const group = canvas.addGroup();
 
+      data.forEach(function(obj) {
 
+        const point = chart.getPosition(obj);
 
+        let val = filters.formatNum(obj.value);
 
+        group.addShape("text", {
 
+          attrs: {
 
+            x: point.x,
 
+            y: point.y + offset,
 
+            text: val,
 
+            textAlign: "center",
 
+            textBaseline: "bottom",
 
+            fill: "#808080",
 
+          },
 
+        });
 
+      });
 
+      this.initCanvas[id] = chart;
 
+    },
 
+    line(list, key, id) {
 
+      let data = [];
 
+      let len = list.length;
 
+      for (let i = 0; i < len; i++) {
 
+        const v = list[i];
 
+        data.push({
 
+          name: v.time,
 
+          value: v[key],
 
+        });
 
+      }
 
+      const chart = new F2.Chart({
 
+        id,
 
+        pixelRatio: window.devicePixelRatio,
 
+      });
 
+      chart.source(data, {
 
+        name: {
 
+          tickCount: 3,
 
+          range: [0, 1],
 
+        },
 
+        value: {
 
+          tickCount: 5,
 
+          min: 0,
 
+        },
 
+      });
 
+
 
+      chart.axis("name", {
 
+        label: function label(text, index, total) {
 
+          const textCfg = {};
 
+          if (index === 0) {
 
+            textCfg.textAlign = "left";
 
+          } else if (index === total - 1) {
 
+            textCfg.textAlign = "right";
 
+          }
 
+          return textCfg;
 
+        },
 
+      });
 
+
 
+      chart.axis("value", {
 
+        label: function label(text) {
 
+          return { text: filters.formatNum(text) };
 
+        },
 
+      });
 
+      chart.tooltip({
 
+        showCrosshairs: true,
 
+      });
 
+
 
+      chart
 
+        .area()
 
+        .position("name*value")
 
+        .color("l(90) 0:#1890FF 1:#f7f7f7")
 
+        .shape("smooth");
 
+      chart
 
+        .line()
 
+        .position("name*value")
 
+        .color("l(90) 0:#1890FF 1:#f7f7f7")
 
+        .shape("smooth");
 
+      chart.render();
 
+      this.initCanvas[id] = chart;
 
+    },
 
+  },
 
+};
 
+</script>

+ 486 - 0
src/view/live/index.vue
Datei anzeigen 

@@ -0,0 +1,486 @@
 
+<template>
 
+    <div style="padding-bottom: 1em">
 
+      <table class="local_table">
 
+        <tr>
 
+          <td v-if="baseData.total_pv !== -1">总浏览量</td>
 
+          <td v-if="baseData.total_pv !== -1">{{ baseData.total_pv | formatnum }}</td>
 
+          <td v-if="baseData.total_ori !== -1">原创量</td>
 
+          <td v-if="baseData.total_ori !== -1">{{ baseData.total_ori | formatnum }}</td>
 
+        </tr>
 
+        <tr>
 
+          <td v-if="baseData.total_digg !== -1">总点赞数</td>
 
+          <td v-if="baseData.total_digg !== -1">{{ baseData.total_digg | formatnum }}</td>
 
+          <td v-if="baseData.total_comment !== -1">总评论数</td>
 
+          <td v-if="baseData.total_comment !== -1">{{ baseData.total_comment | formatnum }}</td>
 
+        </tr>
 
+        <tr>
 
+          <td v-if="baseData.total_forward !== -1">总转发量</td>
 
+          <td v-if="baseData.total_forward !== -1">{{ baseData.total_forward | formatnum }}</td>
 
+          <td v-if="baseData.live_uv !== -1">直播观看人数</td>
 
+          <td v-if="baseData.live_uv !== -1">{{ baseData.live_uv | formatnum }}</td>
 
+        </tr>
 
+        <tr>
 
+          <td v-if="baseData.live_add_fans !== -1">新增粉丝数</td>
 
+          <td v-if="baseData.live_add_fans !== -1">{{ baseData.live_add_fans | formatnum }}</td>
 
+          <td v-if="baseData.live_comment !== -1">直播评论数</td>
 
+          <td v-if="baseData.live_comment !== -1">{{ baseData.live_comment | formatnum }}</td>
 
+        </tr>
 
+      </table>
 
+  
+      <div v-if="cakeList.length" class="title">平台对比</div>
 
+      <canvas
 
+        v-if="cakeList.length"
 
+        id="cake"
 
+        class="canvas"
 
+        :width="client.width"
 
+        :height="client.height"
 
+      ></canvas>
 
+      <div v-if="userSort.length" class="title">账号排名</div>
 
+      <canvas
 
+        v-if="userSort.length"
 
+        id="account"
 
+        class="canvas"
 
+        :width="client.width"
 
+        :height="client.height"
 
+      ></canvas>
 
+      <div v-if="baseData.word_cloud_url" class="title">词云</div>
 
+      <van-image v-if="baseData.word_cloud_url" :src="baseData.word_cloud_url">
 
+        <template v-slot:loading>
 
+          <van-loading type="spinner" size="20" />
 
+        </template>
 
+      </van-image>
 
+      <!-- <canvas
 
+        id="keyCloud"
 
+        class="canvas"
 
+        :width="client.width"
 
+        :height="client.height"
 
+      ></canvas> -->
 
+      <div v-if="douyin.length" class="title">抖音-评论排行</div>
 
+      <canvas
 
+        v-if="douyin.length"
 
+        id="douyinComment"
 
+        class="canvas"
 
+        :width="client.width"
 
+        :height="client.height"
 
+      ></canvas>
 
+      <div v-if="douyin.length" class="title">抖音-点赞排行</div>
 
+      <canvas
 
+        v-if="douyin.length"
 
+        id="douyinDigg"
 
+        class="canvas"
 
+        :width="client.width"
 
+        :height="client.height"
 
+      ></canvas>
 
+      <div v-if="douyin.length" class="title">抖音-粉丝量排行</div>
 
+      <canvas
 
+        v-if="douyin.length"
 
+        id="douyinMplatformFollowers"
 
+        class="canvas"
 
+        :width="client.width"
 
+        :height="client.height"
 
+      ></canvas>
 
+      <div v-if="kuaishou.length" class="title">快手-播放量排行</div>
 
+      <canvas
 
+        v-if="kuaishou.length"
 
+        id="kuaishouPlay"
 
+        class="canvas"
 
+        :width="client.width"
 
+        :height="client.height"
 
+      ></canvas>
 
+      <div v-if="kuaishou.length" class="title">快手-评论排行</div>
 
+      <canvas
 
+        v-if="kuaishou.length"
 
+        id="kuaishouComment"
 
+        class="canvas"
 
+        :width="client.width"
 
+        :height="client.height"
 
+      ></canvas>
 
+      <div v-if="read.length" class="title">微博-阅读量趋势</div>
 
+      <canvas
 
+        v-if="read.length"
 
+        id="weiboRead"
 
+        class="canvas"
 
+        :width="client.width"
 
+        :height="client.height"
 
+      ></canvas>
 
+      <div v-if="me.length" class="title">微博-讨论趋势</div>
 
+      <canvas
 
+        v-if="me.length"
 
+        id="weiboMe"
 
+        class="canvas"
 
+        :width="client.width"
 
+        :height="client.height"
 
+      ></canvas>
 
+      <div v-if="ori.length" class="title">微博-原创趋势</div>
 
+      <canvas
 
+        v-if="ori.length"
 
+        id="weiboOri"
 
+        class="canvas"
 
+        :width="client.width"
 
+        :height="client.height"
 
+      ></canvas>
 
+      <div v-if="yangshi.length" class="title">央视-浏览排行</div>
 
+      <canvas
 
+        v-if="yangshi.length"
 
+        id="yangshiPv"
 
+        class="canvas"
 
+        :width="client.width"
 
+        :height="client.height"
 
+      ></canvas>
 
+    </div>
 
+  </template>
 
+  
+  <style scoped></style>
 
+  
+  <script>
 
+  import {
 
+    getBase,
 
+    getAllPlatform,
 
+    getPlatform,
 
+    getList,
 
+  } from "@/api/getList.js";
 
+  import filters from "@/utils/filters/index";
 
+  import { Image as vanImage, Loading as vanLoading } from "vant";
 
+  import "vant/lib/image/style";
 
+  import F2 from "@antv/f2";
 
+  export default {
 
+    components: {
 
+      vanImage,
 
+      vanLoading,
 
+    },
 
+    data() {
 
+      return {
 
+        initCanvas: {
 
+          cake: undefined,
 
+          account: undefined,
 
+        },
 
+        baseData: {},
 
+        client: {
 
+          width: 0,
 
+          height: 0,
 
+        },
 
+        userSort: [],
 
+        douyin: [],
 
+        kuaishou: [],
 
+        weibo: {},
 
+        me: [],
 
+        ori: [],
 
+        read: [],
 
+        yangshi: [],
 
+        cakeList: [],
 
+      };
 
+    },
 
+    created() {
 
+      let title = decodeURIComponent(this.$route.query.title);
 
+      let clientWidth = document.body.clientWidth || 0;
 
+      this.client = {
 
+        width: clientWidth,
 
+        height: (clientWidth / 16) * 9,
 
+      };
 
+      getBase({ season: this.$route.query.season, topic_name: title }).then(
 
+        res => {
 
+          this.baseData = res || {};
 
+        }
 
+      );
 
+      getAllPlatform({
 
+        season: this.$route.query.season,
 
+        topic_name: title,
 
+      }).then(res => {
 
+        this.cakeList = res || [];
 
+        if (!this.cakeList.length) return;
 
+        this.$nextTick(() => {
 
+          this.cake(res || []);
 
+        });
 
+      });
 
+      getPlatform({
 
+        season: this.$route.query.season,
 
+        topic_name: title,
 
+        platform: "ALL",
 
+        type: "all",
 
+      }).then(res => {
 
+        this.userSort = (res || []).map(v => {
 
+          return {
 
+            name: v.nickname,
 
+            digg_count: v.digg_count,
 
+            comment_count: v.comment_count,
 
+            forward_count: v.forward_count,
 
+          };
 
+        });
 
+        if (!this.userSort.length) return;
 
+        this.$nextTick(() => {
 
+          let list = this.userSort.sort((a, b) => b.digg_count - a.digg_count);
 
+          this.account(list, "digg_count", "account");
 
+        });
 
+      });
 
+      getPlatform({
 
+        season: this.$route.query.season,
 
+        topic_name: title,
 
+        platform: "douyin",
 
+        type: "douyin",
 
+      }).then(res => {
 
+        this.douyin = (res || []).map(v => {
 
+          return {
 
+            name: v.nickname,
 
+            digg_count: v.digg_count,
 
+            comment_count: v.comment_count,
 
+            mplatform_followers_count: v.mplatform_followers_count,
 
+          };
 
+        });
 
+        if (!this.douyin.length) return;
 
+        this.$nextTick(() => {
 
+          // 点赞
 
+          let list = this.douyin.sort((a, b) => b.digg_count - a.digg_count);
 
+          this.account(list, "digg_count", "douyinDigg");
 
+          // 评论
 
+          let listComment = this.douyin.sort(
 
+            (a, b) => b.comment_count - a.comment_count
 
+          );
 
+          this.account(listComment, "comment_count", "douyinComment");
 
+          // 粉丝量
 
+          let listFollowers = this.douyin.sort(
 
+            (a, b) => b.mplatform_followers_count - a.mplatform_followers_count
 
+          );
 
+          this.account(
 
+            listFollowers,
 
+            "mplatform_followers_count",
 
+            "douyinMplatformFollowers"
 
+          );
 
+        });
 
+      });
 
+      getPlatform({
 
+        season: this.$route.query.season,
 
+        topic_name: title,
 
+        platform: "kuaishou",
 
+        type: "kuaishou",
 
+      }).then(res => {
 
+        this.kuaishou = (res || []).map(v => {
 
+          return {
 
+            name: v.nickname,
 
+            pv: v.pv,
 
+            comment_count: v.comment_count,
 
+          };
 
+        });
 
+        if (!this.kuaishou.length) return;
 
+        this.$nextTick(() => {
 
+          // 播放量
 
+          let list = this.kuaishou.sort((a, b) => b.pv - a.pv);
 
+          this.account(list, "pv", "kuaishouPlay");
 
+          // 评论
 
+          let listComment = this.kuaishou.sort(
 
+            (a, b) => b.comment_count - a.comment_count
 
+          );
 
+          this.account(listComment, "comment_count", "kuaishouComment");
 
+        });
 
+      });
 
+      getPlatform({
 
+        season: this.$route.query.season,
 
+        topic_name: title,
 
+        platform: "yangshi",
 
+        type: "yangshi",
 
+      }).then(res => {
 
+        this.yangshi = (res || []).map(v => {
 
+          return {
 
+            name: v.nickname,
 
+            pv: v.pv,
 
+          };
 
+        });
 
+        if (!this.yangshi.length) return;
 
+        this.$nextTick(() => {
 
+          // 播放量
 
+          let list = this.yangshi.sort((a, b) => b.pv - a.pv);
 
+          this.account(list, "pv", "yangshiPv");
 
+        });
 
+      });
 
+      getList({
 
+        topic_name: title,
 
+        time: "30d",
 
+        season: this.$route.query.season,
 
+      }).then(res => {
 
+        this.weibo = res || {};
 
+        let weiboSelect = this.weibo["30d"] || { me: [], read: [], ori: [] };
 
+        this.me = weiboSelect.me || [];
 
+        this.read = weiboSelect.read || [];
 
+        this.ori = weiboSelect.ori || [];
 
+        this.$nextTick(() => {
 
+          this.me.length && this.line(this.me, "value", "weiboMe");
 
+          this.read.length && this.line(this.read, "value", "weiboRead");
 
+          this.ori.length && this.line(this.ori, "value", "weiboOri");
 
+        });
 
+      });
 
+    },
 
+    methods: {
 
+      cake(list) {
 
+        let data = list.map(v => {
 
+          return {
 
+            name: v.platform,
 
+            percent: v.total_pv,
 
+            a: "1",
 
+          };
 
+        });
 
+        const chart = new F2.Chart({
 
+          id: "cake",
 
+          pixelRatio: window.devicePixelRatio,
 
+        });
 
+        chart.source(data, {
 
+          percent: {
 
+            formatter: function formatter(val) {
 
+              return val * 100 + "%";
 
+            },
 
+          },
 
+        });
 
+        chart.tooltip(false);
 
+        chart.coord("polar", {
 
+          transposed: true,
 
+          radius: 1,
 
+        });
 
+        chart.axis(false);
 
+        chart.legend({
 
+          position: "left",
 
+        });
 
+        chart
 
+          .interval()
 
+          .position("a*percent")
 
+          .color("name", ["#13C2C2", "#2FC25B", "#FACC14", "#F04864", "#8543E0"])
 
+          .adjust("stack")
 
+          .style({
 
+            lineWidth: 1,
 
+            stroke: "#fff",
 
+            lineJoin: "round",
 
+            lineCap: "round",
 
+          })
 
+          .animate({
 
+            appear: {
 
+              duration: 1200,
 
+              easing: "bounceOut",
 
+            },
 
+          });
 
+  
+        chart.render();
 
+        this.initCanvas.cake = chart;
 
+      },
 
+      account(list, key, id) {
 
+        // F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
 
+        let data = [];
 
+        let len = list.length > 10 ? 10 : list.length;
 
+        for (let i = 0; i < len; i++) {
 
+          const v = list[i];
 
+  
+          const li = v.name.split("");
 
+          let nickname = li
 
+            .map((val, i) => {
 
+              i !== 0 && (i + 1) % 2 === 0 && (val = val + "\n");
 
+              return val;
 
+            })
 
+            .join("");
 
+          data.push({
 
+            name: nickname,
 
+            value: v[key],
 
+          });
 
+        }
 
+        // Step 1: 创建 Chart 对象
 
+        const chart = new F2.Chart({
 
+          id,
 
+          pixelRatio: window.devicePixelRatio, // 指定分辨率
 
+        });
 
+  
+        chart.legend(false);
 
+        chart.axis("value", {
 
+          label: function label(text) {
 
+            return { text: filters.formatNum(text) };
 
+          },
 
+        });
 
+  
+        // Step 2: 载入数据源
 
+        chart.source(data);
 
+  
+        // Step 3：创建图形语法，绘制柱状图
 
+        chart
 
+          .interval()
 
+          .position("name*value")
 
+          .color("name", ["#13C2C2"]);
 
+  
+        // Step 4: 渲染图表
 
+        chart.render();
 
+  
+        // 绘制柱状图文本
 
+        const offset = -5;
 
+        const canvas = chart.get("canvas");
 
+        const group = canvas.addGroup();
 
+        data.forEach(function(obj) {
 
+          const point = chart.getPosition(obj);
 
+          let val = filters.formatNum(obj.value);
 
+          group.addShape("text", {
 
+            attrs: {
 
+              x: point.x,
 
+              y: point.y + offset,
 
+              text: val,
 
+              textAlign: "center",
 
+              textBaseline: "bottom",
 
+              fill: "#808080",
 
+            },
 
+          });
 
+        });
 
+        this.initCanvas[id] = chart;
 
+      },
 
+      line(list, key, id) {
 
+        let data = [];
 
+        let len = list.length;
 
+        for (let i = 0; i < len; i++) {
 
+          const v = list[i];
 
+          data.push({
 
+            name: v.time,
 
+            value: v[key],
 
+          });
 
+        }
 
+        const chart = new F2.Chart({
 
+          id,
 
+          pixelRatio: window.devicePixelRatio,
 
+        });
 
+        chart.source(data, {
 
+          name: {
 
+            tickCount: 3,
 
+            range: [0, 1],
 
+          },
 
+          value: {
 
+            tickCount: 5,
 
+            min: 0,
 
+          },
 
+        });
 
+  
+        chart.axis("name", {
 
+          label: function label(text, index, total) {
 
+            const textCfg = {};
 
+            if (index === 0) {
 
+              textCfg.textAlign = "left";
 
+            } else if (index === total - 1) {
 
+              textCfg.textAlign = "right";
 
+            }
 
+            return textCfg;
 
+          },
 
+        });
 
+  
+        chart.axis("value", {
 
+          label: function label(text) {
 
+            return { text: filters.formatNum(text) };
 
+          },
 
+        });
 
+        chart.tooltip({
 
+          showCrosshairs: true,
 
+        });
 
+  
+        chart
 
+          .area()
 
+          .position("name*value")
 
+          .color("l(90) 0:#1890FF 1:#f7f7f7")
 
+          .shape("smooth");
 
+        chart
 
+          .line()
 
+          .position("name*value")
 
+          .color("l(90) 0:#1890FF 1:#f7f7f7")
 
+          .shape("smooth");
 
+        chart.render();
 
+      },
 
+    },
 
+  };
 
+  </script>
 
+

+ 79 - 29
src/view/skeleton/index.vue
Datei anzeigen 

@@ -1,15 +1,14 @@
 
 <template>
 
   <div class="skeleton">
 
-    <router-view />
 
     <van-field
 
       v-model="fieldValue"
 
       is-link
 
       readonly
 
-      label="话题"
 
       placeholder="请选择话题"
 
       @click="show = true"
 
     />
 
-    <van-popup v-model="show" round position="bottom">
 
+    <router-view :key="key" />
 
+    <van-popup safe-area-inset-bottom v-model="show" round position="bottom">
 
       <van-cascader
 
         v-model="cascaderValue"
 
         title="请选择话题"
 
@@ -33,28 +32,16 @@ import {
 
 import "vant/lib/cascader/style";
 
 import "vant/lib/field/style";
 
 import "vant/lib/popup/style";
 
-
 
-// import { getBase } from "../../api/getList.js";
 
-// import { getUrl } from "../../utils.js";
 
+import { getBase } from "@/api/getList.js";
 
 
 export default {
 
   data() {
 
     return {
 
+      key: 0,
 
       fieldValue: "",
 
       cascaderValue: "",
 
       show: false,
 
-      options: [
 
-        {
 
-          text: "第一季",
 
-          value: "1",
 
-          children: [{ text: "杭州市", value: "330100" }],
 
-        },
 
-        {
 
-          text: "第二季",
 
-          value: "2",
 
-          children: [{ text: "南京市", value: "320100" }],
 
-        },
 
-      ],
 
+      options: [],
 
     };
 
   },
 
   components: {
 
@@ -62,19 +49,82 @@ export default {
 
     vanField,
 
     vanPopup,
 
   },
 
+  created() {
 
+    getBase({ season: this.$route.query.season }).then(res => {
 
+      if (!(res || []).length) return;
 
+      this.options = (res || []).map((v, i) => {
 
+        let children = (v.child_list || []).map((childItem, o) => {
 
+          return {
 
+            text: childItem,
 
+            value: o + 1,
 
+          };
 
+        });
 
+        children.length &&
 
+          children.unshift({
 
+            text: v.alias_name,
 
+            value: 0,
 
+          });
 
+        !children.length && (children = undefined);
 
+        return {
 
+          ...v,
 
+          text: v.alias_name,
 
+          value: i,
 
+          children,
 
+        };
 
+      });
 
+      this.fieldValue = this.$route.query.title || this.options[0].text;
 
+      let data = {};
 
+      for (let i = 0; i < this.options.length; i++) {
 
+        const v = this.options[i];
 
+        if(v.text === this.fieldValue) {
 
+          data = v;
 
+          break;
 
+        }
 
+      }
 
+      if (this.$route.name == "home") return;
 
+      this.$router.push({
 
+        path: "home",
 
+        query: { title: this.fieldValue, season: this.$route.query.season, data: JSON.stringify(data) },
 
+      });
 
+    });
 
+  },
 
+  beforeRouteUpdate(to, from, next) {
 
+    // 在当前路由改变，但是该组件被复用时调用
 
+    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
 
+    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
 
+    // 可以访问组件实例 `this`
 
+    next();
 
+    this.key++;
 
+  },
 
   methods: {
 
-    onFinish() {},
 
+    onFinish(data) {
 
+      let lever = data.selectedOptions.length;
 
+      let D = {};
 
+      if (lever > 1)
 
+        this.fieldValue =
 
+          data.selectedOptions[0].text +
 
+          " / " +
 
+          data.selectedOptions[lever - 1].text;
 
+      else if (lever == 1) this.fieldValue = data.selectedOptions[0].text;
 
+      else this.fieldValue = "";
 
+      for (let i = 0; i < this.options.length; i++) {
 
+        const v = this.options[i];
 
+        if(v.text === this.fieldValue) {
 
+          D = v;
 
+          break;
 
+        }
 
+      }
 
+      this.$router.push({
 
+        path: "/home",
 
+        query: { title: this.fieldValue, season: this.$route.query.season, data: JSON.stringify(D) },
 
+      });
 
+    },
 
     onChange(data) {
 
-      console.log(data);
 
-      // let season = getUrl("season");
 
-      //   if (value === this.options[0].value) {
 
-      //     setTimeout(() => {
 
-      //       this.options[0].children = [
 
-      //         { text: '杭州市', value: '330100' },
 
-      //         { text: '宁波市', value: '330200' },
 
-      //       ];
 
-      //     }, 500);
 
-      //   }
 
+      let lever = data.selectedOptions.length;
 
+      if (!data.selectedOptions[lever - 1].children) {
 
+        this.show = false;
 
+        return;
 
+      }
 
     },
 
   },
 
 };

+ 4 - 4
yarn.lock
Datei anzeigen 

@@ -31,10 +31,10 @@
 
     topojson-client "^3.0.0"
 
     wolfy87-eventemitter "^5.1.0"
 
 
-"@antv/f2@^3.8.1":
 
-  version "3.8.8"
 
-  resolved "https://registry.nlark.com/@antv/f2/download/@antv/f2-3.8.8.tgz"
 
-  integrity sha1-abMp57JfbxTnZaB0YlbTXPSG4jA=
 
+"@antv/f2@^3.8.9":
 
+  version "3.8.9"
 
+  resolved "https://registry.nlark.com/@antv/f2/download/@antv/f2-3.8.9.tgz#8a5a2a896425729e569544a96ccedd25a1cb6add"
 
+  integrity sha1-iloqiWQlcp5WlUSpbM7dJaHLat0=
 
   dependencies:
 
     "@antv/adjust" "~0.1.1"
 
     "@antv/scale" "~0.3.3"