liyongli 2 年 前
コミット
f7737d8788
5 ファイル変更641 行追加44 行削除
  1. 12 0
      src/api/index.js
  2. 8 1
      src/router/index.js
  3. 37 42
      src/views/Keep/index.vue
  4. 582 0
      src/views/LiveRoom/index.vue
  5. 2 1
      src/views/Version/index.vue

+ 12 - 0
src/api/index.js

@@ -982,3 +982,15 @@ export function getVersionChart(data) {
     data,
   });
 }
+/**
+ * 获取大数据平台直播分析 表格;
+ * @return {AxjxPromise}
+ */
+export function getLivePage(data) {
+  return ajax({
+    urlType: "leverAudience",
+    url: "/cxzx-program/new-media/live/list",
+    method: "POST",
+    data,
+  });
+}

+ 8 - 1
src/router/index.js

@@ -153,7 +153,14 @@ const routes = [
     path: "/channle",
     name: "Channle",
     component: () =>
-      import(/* webpackChunkName: "Version" */ "../views/Channle/index.vue"),
+      import(/* webpackChunkName: "Channle" */ "../views/Channle/index.vue"),
+  },
+  //   直播分析
+  {
+    path: "/liveRoom",
+    name: "LiveRoom",
+    component: () =>
+      import(/* webpackChunkName: "LiveRoom" */ "../views/LiveRoom/index.vue"),
   },
 
   countryRouter, // 全国数据

+ 37 - 42
src/views/Keep/index.vue

@@ -105,12 +105,18 @@
             用户数
           </el-button>
         </el-button-group>
-          <el-button size="small" style="margin-left: .5em;" type="primary" @click="onExport">导出</el-button>
+        <el-button
+          size="small"
+          style="margin-left: 0.5em"
+          type="primary"
+          @click="onExport"
+          >导出</el-button
+        >
       </div>
       <br />
       <el-table
-        v-if="this.oriData && this.oriData.list && this.oriData.list.length"
-        :data="showList"
+        v-if="oriData.length"
+        :data="oriData"
         style="width: 100%"
         :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
       >
@@ -150,10 +156,12 @@
               "
             >
               <countTo
+                v-if="form.keepType === 1"
                 :startVal="scope.row.r1"
                 :endVal="scope.row.r1"
                 :duration="100"
               ></countTo>
+              <span v-else>{{ (scope.row.r1 * 100).toFixed(2) }}%</span>
             </div>
           </template>
         </el-table-column>
@@ -173,10 +181,12 @@
               "
             >
               <countTo
+                v-if="form.keepType === 1"
                 :startVal="scope.row.r2"
                 :endVal="scope.row.r2"
                 :duration="100"
               ></countTo>
+              <span v-else>{{ (scope.row.r2 * 100).toFixed(2) }}%</span>
             </div>
           </template>
         </el-table-column>
@@ -196,10 +206,12 @@
               "
             >
               <countTo
+                v-if="form.keepType === 1"
                 :startVal="scope.row.r3"
                 :endVal="scope.row.r3"
                 :duration="100"
               ></countTo>
+              <span v-else>{{ (scope.row.r3 * 100).toFixed(2) }}%</span>
             </div>
           </template>
         </el-table-column>
@@ -219,10 +231,12 @@
               "
             >
               <countTo
+                v-if="form.keepType === 1"
                 :startVal="scope.row.r4"
                 :endVal="scope.row.r4"
                 :duration="100"
               ></countTo>
+              <span v-else>{{ (scope.row.r4 * 100).toFixed(2) }}%</span>
             </div>
           </template>
         </el-table-column>
@@ -242,10 +256,12 @@
               "
             >
               <countTo
+                v-if="form.keepType === 1"
                 :startVal="scope.row.r5"
                 :endVal="scope.row.r5"
                 :duration="100"
               ></countTo>
+              <span v-else>{{ (scope.row.r5 * 100).toFixed(2) }}%</span>
             </div>
           </template>
         </el-table-column>
@@ -265,10 +281,12 @@
               "
             >
               <countTo
+                v-if="form.keepType === 1"
                 :startVal="scope.row.r6"
                 :endVal="scope.row.r6"
                 :duration="100"
               ></countTo>
+              <span v-else>{{ (scope.row.r6 * 100).toFixed(2) }}%</span>
             </div>
           </template>
         </el-table-column>
@@ -282,16 +300,18 @@
             <div
               class="keepNmuber"
               :style="
-                scope.row.r6
+                scope.row.r7
                   ? 'background-color: #69c0ff;color: #fff'
                   : 'background-color: #ebf0ff;color: #ddd'
               "
             >
               <countTo
-                :startVal="scope.row.r6"
-                :endVal="scope.row.r6"
+                v-if="form.keepType === 1"
+                :startVal="scope.row.r7"
+                :endVal="scope.row.r7"
                 :duration="100"
               ></countTo>
+              <span v-else>{{ (scope.row.r7 * 100).toFixed(2) }}%</span>
             </div>
           </template>
         </el-table-column>
@@ -311,10 +331,12 @@
               "
             >
               <countTo
+                v-if="form.keepType === 1"
                 :startVal="scope.row.r15"
                 :endVal="scope.row.r15"
                 :duration="100"
               ></countTo>
+              <span v-else>{{ (scope.row.r15 * 100).toFixed(2) }}%</span>
             </div>
           </template>
         </el-table-column>
@@ -334,23 +356,16 @@
               "
             >
               <countTo
+                v-if="form.keepType === 1"
                 :startVal="scope.row.r30"
                 :endVal="scope.row.r30"
                 :duration="100"
               ></countTo>
+              <span v-else>{{ (scope.row.r30 * 100).toFixed(2) }}%</span>
             </div>
           </template>
         </el-table-column>
       </el-table>
-      <div v-if="oriData.list && oriData.list.length">
-        <el-pagination
-          v-if="Math.ceil(oriData.list.length / 10) > 1"
-          :current-page="page"
-          layout="prev, pager, next"
-          :total="oriData.list.length"
-          @current-change="pagechange"
-        />
-      </div>
     </el-card>
   </div>
 </template>
@@ -368,7 +383,6 @@ export default {
     return {
       type: "",
       lastParams: {},
-      page: 1,
       form: {
         app: "",
         keepType: 1,
@@ -377,8 +391,7 @@ export default {
         date: [],
       },
       cycle: [],
-      oriData: {},
-      showList: [],
+      oriData: [],
       version: [],
       channel: [],
     };
@@ -406,8 +419,9 @@ export default {
   computed: {},
   methods: {
     keepTypeChange(type) {
-        this.form.keepType = type;
-        this.onSubmit();
+      this.form.keepType = type;
+      this.oriData = [];
+      this.onSubmit();
     },
     verifyList(list, verify, obj, more) {
       if (!obj) return;
@@ -424,20 +438,6 @@ export default {
       }
       return out;
     },
-    pagechange(p) {
-      this.page = p;
-      this.pushShowList();
-    },
-    pushShowList() {
-      let s = this.page - 1 < 0 ? 0 : (this.page - 1) * 10;
-      let e = this.page * 10;
-      let li = JSON.parse(JSON.stringify(this.oriData.list || []));
-      let out = [];
-      for (let i = s; i < e; i++) {
-        li[i] && out.push(li[i]);
-      }
-      this.showList = out;
-    },
     onSubmit() {
       this.lastParams = {
         app: this.form.app,
@@ -449,16 +449,11 @@ export default {
       };
       getKeepPage(this.lastParams)
         .then(r => {
-          let oriData = r || {};
-          this.oriData = {
-            list: oriData || [],
-          };
-          this.page = 1;
-          this.pushShowList();
+          let oriData = r || [];
+          this.oriData = oriData;
         })
         .catch(() => {
-          this.oriData = {};
-          this.pushShowList();
+          this.oriData = [];
         });
     },
     async getAppListFunc() {

+ 582 - 0
src/views/LiveRoom/index.vue

@@ -0,0 +1,582 @@
+<template>
+  <div class="Content">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item>新媒体</el-breadcrumb-item>
+      <el-breadcrumb-item>应用分析</el-breadcrumb-item>
+      <el-breadcrumb-item>版本分析</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-card class="box-card">
+      <el-form
+        ref="form"
+        :model="form"
+        size="small"
+        :inline="true"
+        label-width="120px"
+        class="demo-form-inline"
+      >
+        <el-form-item label="日期">
+          <el-date-picker
+            v-if="form.date.length"
+            v-model="form.date"
+            type="daterange"
+            :disabled-date="time => disabledDate(time)"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :clearable="false"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="应用">
+          <el-select
+            v-model="form.app"
+            placeholder="请选择时段"
+            @change="change"
+          >
+            <el-option
+              v-for="item in cycle"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="渠道">
+          <el-select
+            multiple
+            collapse-tags
+            clearable
+            v-model="form.channel"
+            @change="changechannel"
+            placeholder="请选择渠道"
+          >
+            <el-option
+              v-for="item in channel"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="版本">
+          <el-select
+            multiple
+            collapse-tags
+            clearable
+            v-model="form.version"
+            placeholder="请选择版本"
+            @change="changeversion"
+          >
+            <el-option
+              v-for="item in version"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="直播房间号">
+          <el-input
+            v-model="form.liveId"
+            placeholder="请输入房间号"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="房间标题">
+          <el-input
+            v-model="form.liveTitle"
+            placeholder="请输入房间标题"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="主播">
+          <el-input
+            v-model="form.publisherName"
+            placeholder="请输入主播名称"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item style="float: right">
+          <el-button type="primary" @click="onSubmit">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <br />
+    <el-card class="box-card">
+      <div style="text-align: right">
+        <el-button
+          size="small"
+          style="margin-left: 0.5em"
+          type="primary"
+          @click="onExport"
+        >
+          导出
+        </el-button>
+      </div>
+      <br />
+      <br />
+      <el-table
+        :data="table.records || []"
+        style="width: 100%"
+        :header-cell-style="{
+          backgroundColor: '#f4f5f7',
+          color: '#606266',
+        }"
+      >
+        <el-table-column
+          prop="liveId"
+          header-align="center"
+          align="center"
+          label="房间号"
+          show-overflow-tooltip
+        >
+          <template #default="scope">
+            <span v-text="scope.row.liveId || '-'"></span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="liveTitle"
+          header-align="center"
+          align="center"
+          label="房间标题"
+          show-overflow-tooltip
+        >
+          <template #default="scope">
+            <span v-text="scope.row.liveTitle || '-'"></span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          show-overflow-tooltip
+          label="应用名称"
+          header-align="center"
+          align="center"
+        >
+          <template #default>
+            <span>{{ form.app || "-" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="publisherName"
+          header-align="center"
+          align="center"
+          label="主播"
+          show-overflow-tooltip
+        >
+          <template #default="scope">
+            <span>{{ scope.row.publisherName || "-" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="关注用户数"
+          header-align="center"
+          align="center"
+          prop="follow"
+        >
+          <template #default="scope">
+            <countTo
+              :startVal="scope.row.follow || 0"
+              :endVal="scope.row.follow || 0"
+              :duration="100"
+            ></countTo>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="直播时长"
+          header-align="center"
+          align="center"
+          prop="duration"
+        >
+          <template #default="scope">
+            {{ timeFormat(scope.row.duration) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="评论数"
+          header-align="center"
+          align="center"
+          prop="comments"
+        >
+          <template #default="scope">
+            <countTo
+              :startVal="scope.row.comments || 0"
+              :endVal="scope.row.comments || 0"
+              :duration="100"
+            ></countTo>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="点赞数"
+          header-align="center"
+          align="center"
+          prop="support"
+        >
+          <template #default="scope">
+            <countTo
+              :startVal="scope.row.support || 0"
+              :endVal="scope.row.support || 0"
+              :duration="100"
+            ></countTo>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="礼物数"
+          header-align="center"
+          align="center"
+          prop="giftCount"
+        >
+          <template #default="scope">
+            <countTo
+              :startVal="scope.row.giftCount || 0"
+              :endVal="scope.row.giftCount || 0"
+              :duration="100"
+            ></countTo>
+          </template>
+        </el-table-column>
+      </el-table>
+      <br />
+      <el-pagination
+        layout="prev, pager, next"
+        :page-size="form.size"
+        :current-page="form.page"
+        :total="table.total"
+        background
+        @current-change="changePage"
+      />
+    </el-card>
+  </div>
+</template>
+<script>
+// @ is an alias to /src
+import { getRule, getAppList, getSearchData, getLivePage } from "@/api/index";
+
+import countTo from "@/components/counto/vue-countTo.vue";
+
+import config from "@/config/index";
+export default {
+  name: "Version",
+  data() {
+    return {
+      lastParams: {},
+      table: {},
+      numType: "newUser",
+      form: {
+        app: "",
+        version: [],
+        channel: [],
+        date: [],
+        liveId: "",
+        liveTitle: "",
+        publisherName: "",
+        page: 1,
+        size: 20,
+      },
+      cycle: [],
+      showList: [],
+      channel: [],
+      version: [],
+    };
+  },
+  async mounted() {
+    const { source, appV, appC, appli, appVLi, appCLi } =
+      await this.getAppListFunc();
+    const keys = {
+      value: "mname",
+      label: "mname",
+    };
+    this.cycle = this.verifyList(appli, source, keys, false);
+    this.channel = this.verifyList(appCLi, appC, keys, true);
+    this.version = this.verifyList(appVLi, appV, keys, true);
+    this.form = {
+      //   app: (this.cycle[0] || { value: "" }).value,
+      app: "起点新闻",
+      version: [(this.version[0] || { value: "" }).value],
+      channel: [(this.channel[0] || { value: "" }).value],
+      date: [new Date(Date.now() - 604800000), new Date(Date.now() - 86400000)],
+      liveId: "",
+      liveTitle: "",
+      publisherName: "",
+    };
+    this.onSubmit();
+  },
+  computed: {},
+  methods: {
+    verifyList(list, verify, obj, more) {
+      if (!obj) return;
+      let li = list || [];
+      const out = [];
+      more && out.push({ value: -1, label: "不限" });
+      for (let i = 0; i < li.length; i++) {
+        const v = li[i];
+        if (verify.length !== 0 && !verify[v.mcode]) continue;
+        out.push({
+          value: v[obj.value],
+          label: v[obj.label],
+        });
+      }
+      return out;
+    },
+    selectNumType(type) {
+      this.numType = type;
+    },
+    changePage(e) {
+      this.form.page = e;
+      this.onSubmit();
+    },
+    onSubmit() {
+      this.lastParams = {
+        app: this.form.app,
+        start: this.FormData(this.form.date[0]),
+        end: this.FormData(this.form.date[1]),
+        manufacturer: this.form.channel == -1 ? undefined : this.form.channel,
+        version: this.form.version == -1 ? undefined : this.form.version,
+        liveId: this.form.liveId,
+        liveTitle: this.form.liveTitle,
+        publisherName: this.form.publisherName,
+        page: this.form.page,
+        pageSize: this.form.size,
+      };
+      getLivePage(this.lastParams).then(r => (this.table = r || {}));
+    },
+    async getAppListFunc() {
+      const { r, li, appVersion, channel } = await this.getAppListOri();
+      let source = { length: 0 },
+        appli = [];
+      let appV = { length: 0 },
+        appVLi = [];
+      let appC = { length: 0 },
+        appCLi = [];
+      let prvList = r.output.data.prvRolectrl || [];
+      for (let i = 0; i < prvList.length; i++) {
+        const v = prvList[i];
+        if (v.controlid == "RMT_SOURCE")
+          (source[v.detid] = true), (source.length = source.length + 1);
+        if (v.controlid == "APP_VERSION")
+          (appV[v.detid] = true), (appV.length = appV.length + 1);
+        if (v.controlid == "CHANNEL")
+          (appC[v.detid] = true), (appC.length = appC.length + 1);
+      }
+      if (li.status === "0") appli = li.output.data || [];
+      if (appVersion.length) appVLi = appVersion || [];
+      if (channel.length) appCLi = channel || [];
+      return {
+        source,
+        appV,
+        appC,
+        appli,
+        appVLi,
+        appCLi,
+      };
+    },
+    async getAppListOri() {
+      const roleid = JSON.parse(
+        window.parent.localStorage.userinfo || "{}"
+      ).roleid;
+      const r = await getRule({
+        db: "authplat",
+        exportMark: "0",
+        menuid: 399,
+        roleid,
+      });
+      //   应用列表
+
+      const li = await getAppList({
+        exportMark: "0",
+        gcode: "SOURCE",
+        pageid: 1,
+        pagesize: 1000,
+      });
+      const defaultAppName = "起点新闻";
+      //   应用版本列表
+      const appVersion = await getSearchData({
+        gcode: "APP_VERSION",
+        source: defaultAppName,
+      });
+      //   应用渠道列表
+      const channel = await getSearchData({
+        gcode: "CHANNEL",
+        source: defaultAppName,
+      });
+      return { r, li, appVersion, channel };
+    },
+    disabledDate(time) {
+      const first = new Date("2021-06-21 00:00:00");
+      return (
+        time.getTime() > Date.now() - 86400000 ||
+        time.getTime() < first.getTime()
+      );
+    },
+    FormData(date) {
+      const d = new Date(date || Date.now() - 86400000);
+      const year = d.getFullYear();
+      const month =
+        d.getMonth() <= 8 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
+      const day = d.getDate() <= 9 ? "0" + d.getDate() : d.getDate();
+      return [year, month, day].join("-");
+    },
+    timeFormat(t) {
+      const Time = t || 0;
+      const mH = Time % 3600;
+      let hour = (Time - mH) / 3600;
+      let min = (mH - (mH % 60)) / 60;
+      let son = Number(mH % 60).toFixed(0);
+      hour = hour <= 9 ? "0" + hour : hour;
+      min = min <= 9 ? "0" + min : min;
+      son = son <= 9 ? "0" + son : son;
+      let out = [];
+      if (hour * 1 > 0) out.push(hour);
+      out.push(...[min, son]);
+      return out.join(":");
+    },
+    change() {
+      const roleid = JSON.parse(
+        window.parent.localStorage.userinfo || "{}"
+      ).roleid;
+      const appV = {
+        length: 0,
+      };
+      getRule({
+        db: "authplat",
+        exportMark: "0",
+        menuid: 399,
+        roleid,
+      }).then(rule => {
+        let prvList = rule.output.data.prvRolectrl || [];
+        for (let i = 0; i < prvList.length; i++) {
+          const v = prvList[i];
+          if (v.controlid == "APP_VERSION")
+            (appV[v.detid] = true), (appV.length = appV.length + 1);
+        }
+        getSearchData({
+          gcode: "APP_VERSION",
+          source: this.form.app,
+        }).then(r => {
+          let version = [
+            {
+              label: "不限",
+              value: -1,
+            },
+          ];
+          r.map(v => {
+            if ((appV.length && appV[v.mcode]) || appV.length === 0)
+              version.push({
+                value: v.mname,
+                label: v.mname,
+              });
+          });
+          this.version = version;
+          this.form = {
+            ...this.form,
+            version: [-1],
+          };
+        });
+        getSearchData({
+          gcode: "CHANNEL",
+          source: this.form.app,
+        }).then(r => {
+          let channel = [
+            {
+              label: "不限",
+              value: -1,
+            },
+          ];
+          r.map(v => {
+            if ((appV.length && appV[v.mcode]) || appV.length === 0)
+              channel.push({
+                value: v.mname,
+                label: v.mname,
+              });
+          });
+          this.channel = channel;
+          this.form = {
+            ...this.form,
+            channel: [-1],
+          };
+        });
+      });
+    },
+    changeversion(v) {
+      if (!v.length) return (this.form.version = [-1]);
+      const last = v[v.length - 1];
+      if (last == -1) return (this.form.version = [-1]);
+      let ver = [];
+      for (let i = 0; i < v.length; i++) {
+        const element = v[i];
+        if (element == -1) continue;
+        ver.push(element);
+      }
+      this.form.version = ver;
+    },
+    changechannel(v) {
+      if (!v.length) return (this.form.channel = [-1]);
+      const last = v[v.length - 1];
+      if (last == -1) return (this.form.channel = [-1]);
+      let ver = [];
+      for (let i = 0; i < v.length; i++) {
+        const element = v[i];
+        if (element == -1) continue;
+        ver.push(element);
+      }
+      this.form.channel = ver;
+    },
+    onExport() {
+      const S = this.form.date[0]
+        ? this.FormData(this.form.date[0])
+        : undefined;
+      const E = this.form.date[1]
+        ? this.FormData(this.form.date[1])
+        : undefined;
+      const app = this.lastParams.app || this.form.app;
+      const version =
+        this.form.version == -1 ? undefined : this.form.version.join(",");
+      const manufacturer =
+        this.lastParams.manufacturer || this.form.channel.join(",");
+      let url =
+        config.base.leverAudience +
+        "/cxzx-program/new-media/live/export?start=" +
+        S +
+        "&end=" +
+        E +
+        "&app=" +
+        app;
+      version && (url += "&version=" + version);
+      version && (url += "&version=" + version);
+      this.lastParams.liveId && (url += "&liveId=" + this.lastParams.liveId);
+      this.lastParams.liveTitle &&
+        (url += "&liveTitle=" + this.lastParams.liveTitle);
+      this.lastParams.publisherName &&
+        (url += "&publisherName=" + this.lastParams.publisherName);
+      manufacturer &&
+        manufacturer !== -1 &&
+        (url += "&manufacturer=" + manufacturer);
+      window.open(url);
+    },
+  },
+  components: {
+    countTo,
+  },
+};
+</script>
+
+<style>
+.Content {
+  margin: 10px 15px;
+}
+.libTitle {
+  color: tomato;
+  font-weight: 700;
+  font-size: 14px;
+}
+.btn-next i,
+.btn-prev i {
+  margin: 0 auto;
+}
+.caret-wrapper .ascending {
+  display: none;
+}
+</style>

+ 2 - 1
src/views/Version/index.vue

@@ -383,6 +383,7 @@ export default {
       chart.resize({
         height: (this.$refs.regionChart.offsetWidth * 4) / 16,
       });
+      chart.clear()
       chart.setOption({
         tooltip: {
           trigger: "axis",
@@ -649,7 +650,7 @@ export default {
             v.newUser,
             v.activeUser,
             v.startTimes,
-            v.distribution,
+            v.distribution + '%',
             this.timeFormat(v.duration),
             "\r\n",
           ].join(",");