mediaAll/src/view/allMedia/convergence.vue

<template>
  <div class="convergence">
    <el-form :inline="true" :model="condition" size="large">
      <el-form-item prop="platform">
        <el-button
          v-for="(item, index) in btns"
          :class="{
            [item.platform]: true,
            [item.platform + '_active']: condition.platform === index,
          }"
          :key="item.id"
          @click="() => selectPlatform(item, index)"
        >
          <span
            :class="{ icon: true, iconfont: true, [item.class]: true }"
            style="margin-right: 5px"
          >
          </span>
          {{ item.text }}
        </el-button>
      </el-form-item>
      <br />
      <el-form-item label="日期" prop="dt">
        <el-date-picker
          v-model="condition.dt"
          type="daterange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>
      <el-form-item label="关键词" prop="keyword">
        <el-input v-model="condition.keyword" placeholder="请输入关键词" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="onExport">导出</el-button>
        <el-button type="primary" @click="binding">绑定账号</el-button>
      </el-form-item>
    </el-form>
    <br />
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="传播数据" name="T1">
        <el-table
          :data="disseminateData.list"
          style="width: 100%"
          :header-cell-style="{
            backgroundColor: '#f4f5f7',
            color: '#606266',
          }"
          ref="table1"
          align="center"
          empty-text="暂无数据"
          @sort-change="e => sort_change(e, 'disseminate')"
        >
          <template
            v-for="(item, i) in config.tableCol.agg[
              btns[condition.platform].text
            ]"
            :key="i"
          >
            <el-table-column
              align="center"
              :width="item.width"
              show-overflow-tooltip
              :prop="item.key"
              :label="item.label"
              :sortable="item.sortable"
              :sort-orders="
                item.sortable ? ['ascending', 'descending', null] : []
              "
            >
              <template #default="scope">
                {{
                  item.type == 'number'
                    ? formatter(scope.row[item.key])
                    : scope.row[item.key]
                }}
              </template>
            </el-table-column>
          </template>
        </el-table>
        <el-pagination
          @current-change="e => changePageDisseminate(e)"
          background
          layout="prev, pager, next"
          :page-count="
            Math.ceil(disseminateData.total / condition.disseminate.size) || 1
          "
        />
      </el-tab-pane>
      <el-tab-pane label="稿件数据" name="T2">
        <el-table
          :data="manuscriptData.list"
          style="width: 100%"
          :header-cell-style="{
            backgroundColor: '#f4f5f7',
            color: '#606266',
          }"
          ref="table1"
          align="center"
          empty-text="暂无数据"
          @sort-change="e => sort_change(e, 'manuscript')"
        >
          <template
            v-for="(item, i) in config.tableCol.list[
              btns[condition.platform].text
            ]"
            :key="i"
          >
            <el-table-column
              align="center"
              :width="item.width"
              show-overflow-tooltip
              :prop="item.key"
              :label="item.label"
              :sortable="item.sortable"
              :sort-orders="
                item.sortable ? ['ascending', 'descending', null] : []
              "
            >
              <template #default="scope">
                {{
                  item.type == 'number'
                    ? formatter(scope.row[item.key])
                    : scope.row[item.key]
                }}
              </template>
            </el-table-column>
          </template>
        </el-table>
        <el-pagination
          @current-change="e => changePageManuscript(e)"
          background
          layout="prev, pager, next"
          :page-count="
            Math.ceil(manuscriptData.total / condition.manuscript.size) || 1
          "
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { getAccountList, getUpdateTime, getAccountData } from '@/api/index';
import dayjs from 'dayjs';
import config from '../../config/index';
import { formatter } from '../../utils/tool';

const condition = ref({
  platform: 0,
  keyword: '',
  dt: [],
  sort: '',
  order: '',
  manuscript: {
    page: 1,
    size: 10,
  },
  disseminate: {
    page: 1,
    size: 10,
  },
});
const activeName = ref('T1');
const btns = [
  {
    text: '微博',
    platform: 'weibo',
    class: 'icon-weibo',
  },
  {
    text: '微信',
    platform: 'weixin',
    class: 'icon-weixin',
  },
  {
    text: '抖音',
    platform: 'douyin',
    class: 'icon-douyin',
  },
  {
    text: '快手',
    platform: 'kuaishou',
    class: 'icon-kuaishou',
  },
  {
    text: '头条',
    platform: 'jinritoutiao',
    class: 'icon-jinritoutiao',
  },
  {
    text: 'B站',
    platform: 'bzhan',
    class: 'icon-bzhan',
  },
  //   {
  //     text: '闪视频',
  //     platform: 'ssp',
  //     class: 'icon-ssp',
  //   },
  //   {
  //     text: '头条',
  //     platform: 'sxtt',
  //     class: 'icon-sxtt',
  //   },
];

const manuscriptData = ref({ list: [], total: 0 });
const disseminateData = ref({ list: [], total: 0 });

let defaultTime = [];

const selectPlatform = (item, index) => {
  condition.value.platform = index;
  for (let i = 0; i < defaultTime.length; i++) {
    const v = defaultTime[i];
    if (v.platform === item.text) {
      condition.value.dt = [v.dt, v.dt];
      break;
    }
  }
  //   页码和条数重置
  condition.value.sort = undefined;
  condition.value.order = undefined;
  condition.value.manuscript.page = 1;
  condition.value.manuscript.size = 10;
  condition.value.manuscript.total = 0;
  condition.value.disseminate.page = 1;
  condition.value.disseminate.size = 10;
  condition.value.disseminate.total = 0;
  getData();
};
const onSubmit = () => {
  getData();
};

const sort_change = (e, type) => {
  if (e.order) {
    condition.value.sort = e.prop;
    condition.value.order = e.order == 'descending' ? 1 : 0;
  } else {
    condition.value.sort = undefined;
    condition.value.order = undefined;
  }
  if (type == 'manuscript') changePageManuscript();
  else if (type == 'disseminate') changePageDisseminate();
};

const onExport = () => {
  if (!condition.value.dt || condition.value.dt.length != 2) return;
  let start = undefined;
  let end = undefined;
  if (condition.value.dt[0])
    start = dayjs(condition.value.dt[0]).format('YYYY-MM-DD');
  if (condition.value.dt[1])
    end = dayjs(condition.value.dt[1]).format('YYYY-MM-DD');
  let url =
    config.base.origin + '/new-media/export?start=' + start + '&end=' + end;
  if (condition.value.sort) url += '&sort=' + condition.value.sort;
  if (condition.value.order) url += '&order=' + condition.value.order;
  window.open(url);
};

const binding = () => {
  window.open(
    '#/authorization',
    'newwindow',
    'toolbar=no,location=no,resizable=no,height=550,width=750,scrollbars=yes,left=380,top=100'
  );
};

const handleClick = () => {};

const getData = () => {
  let start = undefined;
  let end = undefined;
  if (condition.value.dt[0])
    start = dayjs(condition.value.dt[0]).format('YYYY-MM-DD');
  if (condition.value.dt[1])
    end = dayjs(condition.value.dt[1]).format('YYYY-MM-DD');
  getAccountList({
    data: {
      platform: btns[condition.value.platform].text,
      start,
      end,
      page: condition.value.manuscript.page,
      size: condition.value.manuscript.size,
      match: condition.value.keyword,
      sort: condition.value.sort,
      order: condition.value.order,
    },
  }).then(res => {
    const resData = res || { records: [], total: 0 };
    manuscriptData.value.list = resData.records;
    manuscriptData.value.total = resData.total;
  });

  getAccountData({
    data: {
      platform: btns[condition.value.platform].text,
      start,
      end,
      page: condition.value.disseminate.page,
      size: condition.value.disseminate.size,
      match: condition.value.keyword,
      sort: condition.value.sort,
      order: condition.value.order,
    },
  }).then(res => {
    const resData = res || { records: [], total: 0 };
    disseminateData.value.list = resData.records;
    disseminateData.value.total = resData.total;
  });
};

const changePageDisseminate = e => {
  if (e) condition.value.disseminate.page = e;
  let start = undefined;
  let end = undefined;
  if (condition.value.dt[0])
    start = dayjs(condition.value.dt[0]).format('YYYY-MM-DD');
  if (condition.value.dt[1])
    end = dayjs(condition.value.dt[1]).format('YYYY-MM-DD');
  getAccountData({
    data: {
      platform: btns[condition.value.platform].text,
      start,
      end,
      page: condition.value.disseminate.page,
      size: condition.value.disseminate.size,
      match: condition.value.keyword,
      sort: condition.value.sort,
      order: condition.value.order,
    },
  }).then(res => {
    const resData = res || { records: [], total: 0 };
    disseminateData.value.list = resData.records;
    disseminateData.value.total = resData.total;
  });
  // 切页
};

const changePageManuscript = e => {
  if (e) condition.value.manuscript.page = e;
  let start = undefined;
  let end = undefined;
  if (condition.value.dt[0])
    start = dayjs(condition.value.dt[0]).format('YYYY-MM-DD');
  if (condition.value.dt[1])
    end = dayjs(condition.value.dt[1]).format('YYYY-MM-DD');
  getAccountList({
    data: {
      platform: btns[condition.value.platform].text,
      start,
      end,
      page: condition.value.manuscript.page,
      size: condition.value.manuscript.size,
      match: condition.value.keyword,
      sort: condition.value.sort,
      order: condition.value.order,
    },
  }).then(res => {
    const resData = res || { records: [], total: 0 };
    manuscriptData.value.list = resData.records;
    manuscriptData.value.total = resData.total;
  });
  // 切页
};

getUpdateTime({ data: {} }).then(res => {
  defaultTime = res || [];
  for (let i = 0; i < btns.length; i++) {
    const v = btns[i];
    if (v.text === defaultTime[0].platform) {
      condition.value.dt = [defaultTime[0].dt, defaultTime[0].dt];
      break;
    }
  }
  getData();
});
</script>

<style scoped>
.convergence {
  height: 100%;
  overflow: auto;
  padding: 1em;
}
.convergence .platform {
  width: 8em;
}
.convergence .el-form {
  border-bottom: 1px solid #f3f3f3;
}
</style>

<style>
.convergence .el-form-item .weixin_active,
.convergence .el-form-item .weixin:hover,
.convergence .el-form-item .weixin:focus {
  background-color: #1cc393;
  border-color: #1cc393;
  color: #ffffff;
}
.convergence .el-form-item .weibo_active,
.convergence .el-form-item .weibo:hover,
.convergence .el-form-item .weibo:focus {
  background-color: #ffb712;
  border-color: #ffb712;
  color: #ffffff;
}
.convergence .el-form-item .kuaishou_active,
.convergence .el-form-item .kuaishou:hover,
.convergence .el-form-item .kuaishou:focus {
  background-color: #eb3661;
  border-color: #eb3661;
  color: #ffffff;
}
.convergence .el-form-item .douyin_active,
.convergence .el-form-item .douyin:hover,
.convergence .el-form-item .douyin:focus {
  background-color: #170b1a;
  border-color: #170b1a;
  color: #ffffff;
}
.convergence .el-form-item .bzhan_active,
.convergence .el-form-item .bzhan:hover,
.convergence .el-form-item .bzhan:focus {
  background-color: #fb7299;
  border-color: #fb7299;
  color: #ffffff;
}
.convergence .el-form-item .jinritoutiao_active,
.convergence .el-form-item .jinritoutiao:hover,
.convergence .el-form-item .jinritoutiao:focus {
  background-color: #f04142;
  border-color: #f04142;
  color: #ffffff;
}
.convergence .el-form-item .ssp_active,
.convergence .el-form-item .ssp:hover,
.convergence .el-form-item .ssp:focus {
  background-color: #c11616;
  border-color: #c11616;
  color: #ffffff;
}
.convergence .el-form-item .sxtt_active,
.convergence .el-form-item .sxtt:hover,
.convergence .el-form-item .sxtt:focus {
  background-color: #0083eb;
  border-color: #0083eb;
  color: #ffffff;
}
</style>