|
|
@@ -0,0 +1,408 @@
|
|
|
+<template>
|
|
|
+ <div class="program">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <el-form
|
|
|
+ :model="form"
|
|
|
+ size="small"
|
|
|
+ :inline="true"
|
|
|
+ label-width="120px"
|
|
|
+ class="demo-form-inline"
|
|
|
+ >
|
|
|
+ <el-form-item>
|
|
|
+ <template v-for="item in pListData" :key="item.platform">
|
|
|
+ <el-button
|
|
|
+ :class="
|
|
|
+ 'colorBtn ' +
|
|
|
+ btnGroup[item.platform].class +
|
|
|
+ (form.platform == item.platform
|
|
|
+ ? ' ' + btnGroup[item.platform].class + 'act'
|
|
|
+ : '')
|
|
|
+ "
|
|
|
+ @click="() => tabChange(item)"
|
|
|
+ >
|
|
|
+ <span v-if="item.platform === '微信'" class="icon iconfont"
|
|
|
+ ></span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ v-if="item.platform === '微博'"
|
|
|
+ class="icon iconfont weiboIcon1"
|
|
|
+ ></span
|
|
|
+ >
|
|
|
+ <span v-if="item.platform === '快手'" class="icon iconfont"
|
|
|
+ ></span
|
|
|
+ >
|
|
|
+ <span v-if="item.platform === '抖音'" class="icon iconfont"
|
|
|
+ ></span
|
|
|
+ >
|
|
|
+ <span v-if="item.platform === 'B站'" class="icon iconfont"
|
|
|
+ ></span
|
|
|
+ >
|
|
|
+ <span v-if="item.platform === '头条'" class="icon iconfont"
|
|
|
+ ></span
|
|
|
+ >
|
|
|
+ {{ item.platform }}
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="日期">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.dt"
|
|
|
+ type="date"
|
|
|
+ :disabled-date="time => disabledDate(time)"
|
|
|
+ placeholder="日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="关键词">
|
|
|
+ <el-input v-model="form.match" placeholder="检索关键词" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="float: right">
|
|
|
+ <el-button type="primary" @click="onSubmit" :loading="load">
|
|
|
+ 查询
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" @click="onExport">导出</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+ <br />
|
|
|
+ <el-card class="box-card">
|
|
|
+ <el-tabs v-model="activeTab" class="demo-tabs">
|
|
|
+ <el-tab-pane label="传播数据" name="agg">
|
|
|
+ <el-table
|
|
|
+ :header-cell-style="{
|
|
|
+ backgroundColor: '#f4f5f7',
|
|
|
+ color: '#606266',
|
|
|
+ }"
|
|
|
+ align="center"
|
|
|
+ :data="tableData"
|
|
|
+ empty-text="暂无数据"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <template v-for="(item, i) in agg" :key="i">
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ :width="item.width"
|
|
|
+ show-overflow-tooltip
|
|
|
+ :prop="item.key"
|
|
|
+ :label="item.label"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ {{
|
|
|
+ item.type == "number"
|
|
|
+ ? formatter(scope.row[item.key])
|
|
|
+ : scope.row[item.key]
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="详情数据" name="list">
|
|
|
+ <el-table
|
|
|
+ :header-cell-style="{
|
|
|
+ backgroundColor: '#f4f5f7',
|
|
|
+ color: '#606266',
|
|
|
+ }"
|
|
|
+ align="center"
|
|
|
+ empty-text="暂无数据"
|
|
|
+ :data="tableList"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <template v-for="(item, i) in list" :key="i">
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ :width="item.width"
|
|
|
+ show-overflow-tooltip
|
|
|
+ :prop="item.key"
|
|
|
+ :label="item.label"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ {{
|
|
|
+ item.type == "number"
|
|
|
+ ? formatter(scope.row[item.key])
|
|
|
+ : scope.row[item.key]
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ <br />
|
|
|
+ <el-pagination
|
|
|
+ @current-change="cChange"
|
|
|
+ background
|
|
|
+ :page-size="pagesize || 10"
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="total"
|
|
|
+ />
|
|
|
+ <br />
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// @ is an alias to /src
|
|
|
+const ElLoading = require("element-plus/lib/el-loading/index");
|
|
|
+import "element-plus/lib/theme-chalk/el-loading.css";
|
|
|
+
|
|
|
+import { platformList, platformlistData, platform } from "@/api/index";
|
|
|
+
|
|
|
+import { formatter } from "@/utils/tool";
|
|
|
+
|
|
|
+import config from "@/config/index";
|
|
|
+let tableDataListOri = [];
|
|
|
+export default {
|
|
|
+ name: "RealData",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ btnGroup: {
|
|
|
+ 微信: {
|
|
|
+ color: "#1cc393",
|
|
|
+ class: "weixin",
|
|
|
+ },
|
|
|
+ 微博: {
|
|
|
+ color: "#ffb712",
|
|
|
+ class: "weibo",
|
|
|
+ },
|
|
|
+ 快手: {
|
|
|
+ color: "#ffb712",
|
|
|
+ class: "kuaishou",
|
|
|
+ },
|
|
|
+ 抖音: {
|
|
|
+ color: "#170b1a",
|
|
|
+ class: "douyin",
|
|
|
+ },
|
|
|
+ 头条: {
|
|
|
+ color: "#de0517",
|
|
|
+ class: "toutiao",
|
|
|
+ },
|
|
|
+ B站: {
|
|
|
+ color: "#ffb712",
|
|
|
+ class: "bzhan",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ page: 0,
|
|
|
+ pagesize: 20,
|
|
|
+ total: 0,
|
|
|
+ load: false,
|
|
|
+ activeTab: "agg",
|
|
|
+ form: {
|
|
|
+ platform: "",
|
|
|
+ dt: "",
|
|
|
+ match: "",
|
|
|
+ },
|
|
|
+ formRael: { platform: "", dt: "" },
|
|
|
+ tableData: [],
|
|
|
+ pListData: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ platformList().then(res => {
|
|
|
+ const first = res[0] || { platform: "", dt: "" };
|
|
|
+ this.form = {
|
|
|
+ dt: first.dt,
|
|
|
+ platform: first.platform,
|
|
|
+ };
|
|
|
+ this.formRael = {
|
|
|
+ dt: first.dt,
|
|
|
+ platform: first.platform || "",
|
|
|
+ };
|
|
|
+ this.pListData = res || [];
|
|
|
+ this.onSubmit();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ agg() {
|
|
|
+ if (!this.formRael.platform) return [];
|
|
|
+ return config.tableCol.agg[this.formRael.platform];
|
|
|
+ },
|
|
|
+ list() {
|
|
|
+ if (!this.formRael.platform) return [];
|
|
|
+ return config.tableCol.list[this.formRael.platform];
|
|
|
+ },
|
|
|
+ tableList() {
|
|
|
+ const out = [];
|
|
|
+ for (
|
|
|
+ let i = (this.page - 1) * this.pagesize;
|
|
|
+ i < this.page * this.pagesize;
|
|
|
+ i++
|
|
|
+ ) {
|
|
|
+ const v = tableDataListOri[i];
|
|
|
+ v && out.push(v);
|
|
|
+ }
|
|
|
+ return out;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ formatter,
|
|
|
+ tabChange(item) {
|
|
|
+ let p = {
|
|
|
+ platform: item.platform,
|
|
|
+ dt: this.form.dt,
|
|
|
+ match: this.form.match,
|
|
|
+ };
|
|
|
+ if (new Date(item.dt) - new Date(p.dt) < 0) p.dt = item.dt;
|
|
|
+ this.form = p;
|
|
|
+ this.onSubmit();
|
|
|
+ },
|
|
|
+ cChange(num) {
|
|
|
+ this.page = num;
|
|
|
+ },
|
|
|
+ onExport() {
|
|
|
+ if (!this.formRael.dt) return;
|
|
|
+ window.open(
|
|
|
+ config.base.url2 + "/new-media/export?dt=" + this.formRael.dt
|
|
|
+ );
|
|
|
+ },
|
|
|
+ disabledDate(time) {
|
|
|
+ return time.getTime() > Date.now() - 86400000;
|
|
|
+ },
|
|
|
+ onSubmit() {
|
|
|
+ const data = this.formatListData();
|
|
|
+ this.page = 0;
|
|
|
+ this.load = true;
|
|
|
+ const l = ElLoading.default.service();
|
|
|
+ Promise.all([platform(data), platformlistData(data)])
|
|
|
+ .then(list => {
|
|
|
+ console.log(list);
|
|
|
+ this.formRael = data;
|
|
|
+ this.tableData = (list[0] || []).map((v, i) => {
|
|
|
+ v.index = i + 1;
|
|
|
+ return v;
|
|
|
+ });
|
|
|
+ tableDataListOri = (list[1] || []).map((v, i) => {
|
|
|
+ v.index = i + 1;
|
|
|
+ return v;
|
|
|
+ });
|
|
|
+ this.total = tableDataListOri.length;
|
|
|
+ this.page = this.page + 1;
|
|
|
+ this.load = false;
|
|
|
+ l.close();
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ l.close();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ dateFormat(date) {
|
|
|
+ let D = new Date(date);
|
|
|
+ let m = D.getMonth() + 1;
|
|
|
+ let d = D.getDate();
|
|
|
+ let h = D.getHours();
|
|
|
+ let M = D.getMinutes();
|
|
|
+ let s = D.getSeconds();
|
|
|
+ m > 9 ? m : (m = "0" + m);
|
|
|
+ d > 9 ? d : (d = "0" + d);
|
|
|
+ h > 9 ? h : (h = "0" + h);
|
|
|
+ M > 9 ? M : (M = "0" + M);
|
|
|
+ s > 9 ? s : (s = "0" + s);
|
|
|
+ return {
|
|
|
+ year: D.getFullYear(),
|
|
|
+ month: m,
|
|
|
+ day: d,
|
|
|
+ hour: h,
|
|
|
+ minutes: M,
|
|
|
+ seconds: s,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ formatListData() {
|
|
|
+ const d = this.dateFormat(this.form.dt);
|
|
|
+ const loginname = JSON.parse(
|
|
|
+ window.parent.localStorage.userinfo || "{}"
|
|
|
+ ).loginname;
|
|
|
+ return {
|
|
|
+ platform: this.form.platform || this.pListData[0],
|
|
|
+ dt: [d.year, d.month, d.day].join("-"),
|
|
|
+ match: this.form.match,
|
|
|
+ userId: loginname,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.colorBtn {
|
|
|
+ background-color: #fff;
|
|
|
+ color: #000;
|
|
|
+ padding: 0 18px;
|
|
|
+ width: 8em;
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.weibo .icon {
|
|
|
+ color: #ffb712;
|
|
|
+}
|
|
|
+.weiboact,
|
|
|
+.weibo:hover,
|
|
|
+.weibo:focus,
|
|
|
+.weiboact .icon,
|
|
|
+.weibo:hover .icon {
|
|
|
+ background-color: #ffb712;
|
|
|
+ border-color: #ffb712;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.toutiao .icon {
|
|
|
+ color: #f04142;
|
|
|
+}
|
|
|
+.toutiaoact,
|
|
|
+.toutiao:hover,
|
|
|
+.toutiao:focus,
|
|
|
+.toutiaoact .icon,
|
|
|
+.toutiao:hover .icon {
|
|
|
+ background-color: #f04142;
|
|
|
+ border-color: #f04142;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.weixin .icon {
|
|
|
+ color: #1cc393;
|
|
|
+}
|
|
|
+.weixinact,
|
|
|
+.weixin:hover,
|
|
|
+.weixin:focus,
|
|
|
+.weixinact .icon,
|
|
|
+.weixin:hover .icon {
|
|
|
+ background-color: #1cc393;
|
|
|
+ border-color: #1cc393;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.kuaishou .icon {
|
|
|
+ color: #eb3661;
|
|
|
+}
|
|
|
+.kuaishouact,
|
|
|
+.kuaishou:hover,
|
|
|
+.kuaishou:focus,
|
|
|
+.kuaishou:focus,
|
|
|
+.kuaishouact .icon,
|
|
|
+.kuaishou:hover .icon {
|
|
|
+ background-color: #eb3661;
|
|
|
+ border-color: #eb3661;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.douyin .icon {
|
|
|
+ color: #170b1a;
|
|
|
+}
|
|
|
+.douyinact,
|
|
|
+.douyin:hover,
|
|
|
+.douyin:focus,
|
|
|
+.douyinact .icon,
|
|
|
+.douyin:hover .icon {
|
|
|
+ background-color: #170b1a;
|
|
|
+ border-color: #170b1a;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.bzhan .icon {
|
|
|
+ color: #fb7299;
|
|
|
+}
|
|
|
+.bzhanact,
|
|
|
+.bzhan:hover,
|
|
|
+.bzhan:focus,
|
|
|
+.bzhanact .icon,
|
|
|
+.bzhan:hover .icon {
|
|
|
+ background-color: #fb7299;
|
|
|
+ border-color: #fb7299;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+</style>
|
liyongli