mediaAll/src/view/allMedia/components/analysis_list.vue

<template>
  <div class="mainTitle">
    <div class="mainTitleTool" v-if="selectlist.length">
      <el-select
        v-model="selectValue"
        class="m-2"
        placeholder="Select"
        @change="changeSelect"
      >
        <el-option
          v-for="item in selectlist"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    文章列表
  </div>
  <br />
  <div class="lists">
    <div
      class="list"
      v-for="item in listTable"
      :key="item.title"
      @click="() => toDetail(item)"
    >
      <div class="listHead" v-text="item ? item.title || '' : ''"></div>
      <div class="listSubtitle" v-html="item ? item.summary || '' : ''"></div>
      <el-row>
        <el-col :span="12" style="color: #9aa8c4">
          <el-icon><Clock /></el-icon>
          <span v-text="item.publishTime"></span>
        </el-col>
        <el-col :span="12" style="text-align: right">
          来源：
          <span class="source" v-text="item.sourceWebsite"></span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, defineExpose, defineProps } from 'vue';
import { useRouter } from 'vue-router';
import { searchData, getreporting } from '../../../api/index';
import { split } from 'lodash';
let T = undefined;
let total = -1;
const selectValue = ref(0);
const router = useRouter();
const listTable = ref([]);
const props = defineProps({
  apiKey: String,
});
const selectlist = [
  //   {
  //     label: '按发布时间降序',
  //     value: 0,
  //   },
  //   {
  //     label: '按发布时间升序',
  //     value: 1,
  //   },
  //   {
  //     label: '按发情感值升序',
  //     value: 2,
  //   },
  //   {
  //     label: '按发情感值降序',
  //     value: 3,
  //   },
];
const api = {
  getreporting,
  searchData,
};
const changeSelect = () => {
  // 更改排序
  console.log(selectValue.value);
};
const toDetail = item => {
  //   router.push({
  //     path: '/analysis_detail',
  //     query: {
  //       detail: JSON.stringify(item),
  //     },
  //   });

  const url = location.href.split("#")[0] +'#/analysis_detail';
  localStorage.setItem('analysis_detail',  JSON.stringify({
    publishTime: item.publishTime,
    sourceWebsite: item.sourceWebsite,
    title: item.title,
    content: item.content
  }));
  window.open(url, '_blank');
};
const getlist = search => {
  if (search.page === 1) {
    listTable.value = [];
    total = -1;
  } else if ((search.page - 1) * search.pageSize >= total) return;

  if (T) T = window.clearTimeout(T);
  T = window.setTimeout(() => {
    api[props.apiKey || 'searchData']({
      data: search,
    })
      .then(res => {
        const li = res.records || [];
        listTable.value.push(...li);
        total = res.total || 0;
        if (T) T = window.clearTimeout(T);
      })
      .catch(() => {
        if (T) T = window.clearTimeout(T);
      });
  }, 200);
};

defineExpose({
  getlist,
});
</script>

<style scoped>
.mainTitle {
  padding: 0 20px;
  position: relative;
  line-height: 60px;
  border-bottom: 1px solid #f5f5f5;
}
.mainTitleTool {
  position: absolute;
  right: 20px;
  line-height: 60px;
  top: 0;
  text-align: right;
}
.listHead,
.listSubtitle {
  overflow: hidden;
  text-overflow: ellipsis;
}

.lists {
  padding: 0.5em;
}

.list {
  border-radius: 5px;
  padding: 0.5em;
  cursor: pointer;
  line-height: 1.8em;
  font-size: 14px;
}
.list:hover {
  background-color: rgba(64, 158, 255, 0.1);
}
.list:not(:last-child) {
  border-bottom: 1px dashed #b9c0d3;
}

.listSubtitle {
  color: #b9c0d3;
}
</style>