mediaAll/src/view/allMedia/analysis.vue

<template>
  <div>
    <header_local />
    <el-scrollbar ref="scrollbar" class="analysis" @scroll="scroll">
      <div class="head">
        <div class="title">账号分析</div>
        <div class="searchRow">
          <div class="searchCol searchTitle">分类:</div>
          <div
            :class="{
              searchCol: true,
              searchActive: searchActive.classification === optionindex,
            }"
            v-for="(optionitem, optionindex) in classification"
            :key="optionindex + 'option'"
            v-text="optionitem.name"
            @click="() => clickSelect('classification', optionindex)"
          ></div>
        </div>
        <div class="searchRow">
          <div class="searchCol searchTitle">时间:</div>
          <div
            :class="{
              searchCol: true,
              searchActive: searchActive.time === optionindex,
            }"
            v-for="(optionitem, optionindex) in time"
            :key="optionindex + 'option'"
            v-text="optionitem.name"
            @click="() => clickSelect('time', optionindex)"
          ></div>
          <div
            :class="{
              searchCol: true,
              searchActive: searchActive.time === -1,
            }"
            @click="() => clickSelect('time', -1)"
          >
            自定义
          </div>
          <div class="searchCol">
            <el-date-picker
              v-model="date"
              :disabled="searchActive.time !== -1"
              @change="change"
              :disabled-date="disDate"
              type="daterange"
              :clearable="false"
              value-format="YYYY-MM-DD"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </div>
        </div>
        <div class="searchRow">
          <div class="searchCol searchTitle">搜索:</div>
          <div class="searchCol">
            <el-input v-model="searchText" placeholder="搜索文章">
              <template #suffix>
                <el-icon @click="search"><Search /></el-icon>
              </template>
            </el-input>
          </div>
        </div>
      </div>
      <div class="body">
        <analysisList ref="analysisListEle" />
      </div>

      <analysisHotList @changeSearch="hotList" province="" />
      <el-icon :size="45" class="upload" v-show="showUpload" @click="upload"
        ><Upload
      /></el-icon>
    </el-scrollbar>
  </div>
</template>

<script setup>
import header_local from './components/header.vue';
import dayjs from 'dayjs';
import { ref, onMounted } from 'vue';
import { getClass } from '../../api/index';

import analysisList from './components/analysis_list.vue';
import analysisHotList from './components/analysis_hot_list.vue';

const nowTime = Date.now();
const scrollbar = ref();
const analysisListEle = ref();
const showUpload = ref(false);
const searchActive = ref({
  classification: 0,
  time: 0,
  area: 0,
  areaSon: 0,
});
const defaultOption = {
  type: 'option',
  name: '全部',
  id: 0,
};
const classification = ref([defaultOption]);
const time = [
  {
    type: 'option',
    time: nowTime - 86400000,
    name: '24小时',
    id: 1,
  },
  {
    type: 'option',
    time: nowTime - 172800000,
    name: '48小时',
    id: 2,
  },
  {
    type: 'option',
    time: nowTime - 604800000,
    name: '近7天',
    id: 3,
  },
  {
    type: 'option',
    time: nowTime - 2592000000,
    name: '近30天',
    id: 4,
  },
];
const searchText = ref('');
const date = ref([]);

const pageSize = 10;
let page = 1;

onMounted(() => {
  getList();
});

getClass({}).then(res => {
  const li = res || [];
  const l = [];
  for (let i = 0; i < li.length; i++) {
    const v = li[i];
    l.push({
      type: 'option',
      name: v,
    });
  }
  classification.value.push(...l);
});

const getList = () => {
  const search = {
    category:
      classification.value[searchActive.value.classification].name || undefined,
    keywords: searchText.value,
    page: page++,
    pageSize,
  };
  search.category === '全部' ? (search.category = '') : '';
  search.city === '全部' ? (search.city = '') : '';
  // 时间区间
  if (searchActive.value['time'] === -1) {
    search.start = date.value[0];
    search.end = date.value[1];
  } else {
    search.start = dayjs(time[searchActive.value['time']].time).format(
      'YYYY-MM-DD HH:mm:ss'
    );
    search.end = dayjs(nowTime).format('YYYY-MM-DD HH:mm:ss');
  }
  analysisListEle.value.getlist(search);
};

const clickSelect = (select, index) => {
  searchActive.value[select] = index;
  if (index === -1) return;
  page = 1;
  getList();
};

const change = () => {
  date.value = [date.value[0] + ' 00:00:00', date.value[1] + ' 23:59:59'];
  page = 1;
  getList();
};

const search = () => {
  page = 1;
  getList();
};

const hotList = searchTextHot => {
  if (!searchTextHot) return;
  page = 1;
  searchText.value = searchTextHot;
  getList();
};

const scroll = e => {
  const height =
    document.querySelector('.analysis .head').offsetHeight +
    document.querySelector('.analysis .body').offsetHeight -
    document.querySelector('.analysis').offsetHeight;
  const scrollNum = e.scrollTop.toFixed(2) - 0;
  if (!showUpload.value && scrollNum > 180) showUpload.value = true;
  else if (scrollNum <= 180) showUpload.value = false;
  if (height - scrollNum > 0) return;
  getList();
};

const upload = () => {
  scrollbar.value.setScrollTop(0);
};

const nowT = Date.now();
const disDate = date => {
  return date.getTime() > nowT;
};
</script>

<style scoped>
.analysis {
  height: 100%;
  /* min-width: 1305px; */
  position: relative;
}
.analysis .head,
.analysis .body {
  margin: 0 1em;
  width: calc(100% - 400px);
  min-width: 855px;
}

.analysis .body {
  border: 1px solid #f3f3f3;
  margin: 1em;
}

.title {
  font-size: 16px;
  font-weight: 600;
  height: 49px;
  line-height: 49px;
  padding-left: 8px;
  border-bottom: 1px solid #f5f5f5;
}

.searchRow {
  margin: 0.5em 0;
}

.searchCol {
  display: inline-block;
  margin: 0 0.5em;
  padding: 0 0.5em;
  height: 35px;
  line-height: 35px;
  cursor: pointer;
}
.searchCol:hover {
  color: rgb(64, 158, 255);
}

.searchActive {
  font-weight: 600;
  color: rgb(64, 158, 255);
  border-radius: 5px;
  background-color: rgba(64, 158, 255, 0.1);
  border-bottom: none;
}

.searchRow .searchTitle {
  color: #b9c0d3;
}

.body .el-checkbox {
  margin-right: 15px;
}

.source {
  color: #22ac38;
}

.upload {
  position: absolute;
  right: 25px;
  bottom: 25px;
  background-color: #e9e9e990;
  border-radius: 50%;
  padding: 5px;
  cursor: pointer;
}
</style>