mediaAll/src/view/allMedia/analysis.vue

<template>
    <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>
  </template>
  
  <script setup>
  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>