mediaAll/src/view/allMedia/analysis_map.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.area === optionindex,
            }"
            v-for="(optionitem, optionindex) in areaification"
            :key="optionindex + 'option'"
            v-text="optionitem.name"
            @click="() => clickSelect('area', optionindex)"
          ></div>
        </div>
        <div
          class="searchRow"
          v-if="
            areaification[searchActive.area] &&
            areaification[searchActive.area].child
          "
        >
          <div class="searchCol searchTitle">市:</div>
          <div
            :class="{
              searchCol: true,
              searchActive: searchActive.areaSon === optionindex,
            }"
            v-for="(optionitem, optionindex) in areaification[searchActive.area]
              .child"
            :key="optionindex + 'optionSon'"
            v-text="optionitem.name"
            @click="() => clickSelect('areaSon', optionindex)"
          ></div>
        </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="
          areaification[searchActive.area]
            ? areaification[searchActive.area].name
            : ''
        "
      />
      <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 { getEconomize, 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 areaification = 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();
});
getEconomize({
  data: {
    //   key: 'b264662362c25150a1e6612013a7b921',
    //   keywords: '中国',
    //   subdistrict: 2,
  },
}).then(r => {
  const list = r || [];
  for (let i = 0; i < list.length; i++) {
    const v = list[i];
    const city = [
      {
        type: 'option',
        name: '全部',
        id: -1,
      },
      ...v.districts.map((item, index) => {
        return {
          type: 'option',
          name: item.alias,
          id: index,
        };
      }),
    ];
    areaification.value.push({
      type: 'option',
      name: v.alias,
      child: city,
      id: i,
    });
  }
});

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,
  };

  const sheng = areaification.value[searchActive.value.area] || {};
  if (sheng.name && sheng.name !== '全部') {
    const city =
      sheng.child[searchActive.value.areaSon] &&
      sheng.child[searchActive.value.areaSon].name;
    const l = [sheng.name];
    if (city !== '全部') l.push(city || '');
    search.city = l.join(',');
  }
  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: calc(100vh - 2em);
  /* 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>