cankao-h5/src/pages/realtimeInfo/indexRelease.vue

<template>
  <!-- 顶部 banner 区域 -->
  <view class="all">
    <!-- banner start -->
    <!-- <view class="banner">
      <img :src="bannerImg" class="banner_bk" />
      <view class="r_banner_title">
        <img :src="bannerTitle2" class="banner_title" />
        <text>数据更新时间:{{ dayjs(new Date().getTime()).format("YYYY-MM-DD") }}</text>
      </view>
    </view> -->
    <!-- banner end -->

    <view>
      <!-- <view class="tag">
        <view class="r_tag_img">
          <img :src="tagicon_1_bg" class="tag_bk" />
          <view class="tag_content">
            <view class="tag_item_left">
              <text class="tag_title">行业分类贴标</text>

              <view style="display: flex; margin-top: 15rpx">
                <countTo :startVal="lastLeftNum" :endVal="topNum.leftNum" :duration="5000" class="tag_num"></countTo>

                <text class="tag_status">已处理</text>
              </view>
            </view>

            <view class="tag_item_right">
              <img :src="tagicon_1" class="tag_icon" />
            </view>
          </view>
        </view>

        <view class="r_tag_img">
          <img :src="tagicon_2_bg" class="tag_bk" />
          <view class="tag_content">
            <view class="tag_item_left">
              <text class="tag_title">概念标签贴标</text>
              <view style="display: flex; margin-top: 15rpx">
                <countTo :startVal="lastRightNum" :endVal="topNum.rightNum" :duration="5000" class="tag_num"></countTo>

                <text class="tag_status">已处理</text>
              </view>
            </view>

            <view class="tag_item_right">
              <img :src="tagicon_2" class="tag_icon" />
            </view>
          </view>
        </view>
      </view> -->
    </view>

    <view style="background-color: white; margin-top: -100rpx; position: relative; z-index: 9999">
      <indexMenuTitle title="近7天热度统计"></indexMenuTitle>
      <LineHol v-if="lineTabIndex === 0" barColor="#3C74F1" :data="lineTopData"></LineHol>
      <LineHol v-else-if="lineTabIndex === 1" barColor="#FFCC65" :data="lineTopData"></LineHol>
      <LineHolYellow v-else-if="lineTabIndex === 2" barColor="#8B2DD4" :data="lineTopData"></LineHolYellow>

      <div style="display: flex; justify-content: center; margin-bottom: 20px; margin-top: 20px">
        <div class="tabs">
          <div :class="['tab', 'tab_left', { active: lineTabIndex === 0 }]" @click="handleTabClick(0)">申万行业</div>
          <div :class="['tab', { active: lineTabIndex === 1 }]" @click="handleTabClick(1)">概念标签</div>
          <div :class="['tab', 'tab_right', { active: lineTabIndex === 2 }]" @click="handleTabClick(2)">媒体来源</div>
        </div>
      </div>
    </view>

    <!-- <view style="background-color: white; margin-top: 40rpx">
      <indexMenuTitle title="资讯评分分布区间"></indexMenuTitle>
      <Line style="margin-top: 30rpx" :data="lineData"></Line>

      <view style="display: flex; flex-direction: column; text-align: center; justify-content: center; align-items: center; padding-bottom: 30rpx">
        <InfoSummary style="width: 85%" :count="newsNum"></InfoSummary>
      </view>
    </view> -->

    <view style="background-color: white; padding-top: 40rpx">
      <view style="width: 100vw; display: flex; justify-content: space-between; align-items: center">
        <indexMenuTitle title="编辑精选" style="margin-top: 10rpx"></indexMenuTitle>
        <view class="r_sreach">
          <!-- <image class="top_bk" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/top_bg.png"></image> -->
          <!-- <image class="logo_text" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/logo_text_icon.png"> </image> -->
          <view class="sreach" @click="goSreach">
            <view class="sreach_icon">
              <image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/icon_search_line.png"></image>
            </view>
            <view class="sreach_text">
              <text>搜索资讯</text>
            </view>
          </view>
        </view>
      </view>

      <RankList hasTag :newsList="newsList" :needExp="false"></RankList>
    </view>

    <!-- <view class="logout" @click="loginOut" v-if="Session.get('token')">退出登录</view> -->

    <LoginPopup
      :show="LoginShow"
      @handlePopupClose="handlePopupClose"
      @handlePopupSuccessCallback="handlePopupSuccessCallback"
      @handlePopupErrorCallback="handlePopupErrorCallback"
    />
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive } from "vue";
import Line from "@/components/charts/Line.vue";
import bannerImg from "@/assets/zixun/banner_pic.png";
import bannerTitle from "@/assets/zixun/banner_title.png";
import bannerTitle2 from "@/assets/zixun/banner_title2.png";
import tagicon_1_bg from "@/assets/zixun/tagicon_1_bg.png";
import tagicon_2_bg from "@/assets/zixun/tagicon_2_bg.png";
import tagicon_1 from "@/assets/zixun/tagicon_1.png";
import tagicon_2 from "@/assets/zixun/tagicon_2.png";
import LoginPopup from "@/components/loginPopup/index.vue";
import { Session } from "@/utils/storage";
import LineHol from "@/components/charts/LineHol.vue";
import LineHolYellow from "@/components/charts/LineHolYellow.vue";

import {
  getindustryCount,
  getConceptCount,
  getTopNewsAll,
  getTopIndustry_d,
  getTopConcept_d,
  getNews_cnt_d,
  newsInfoScore,
  getTopConceptPeriod,
  getTopIndustryPeriod,
  getTopSourcePeriod,
} from "@/api/newsInfo";
import countTo from "@/components/count-to/vue-countTo.vue";
import RankList from "@/components/RankList.vue"; // 路径根据实际调整
import InfoSummary from "@/components/InfoSummary.vue"; // 路径根据实际调整
import indexMenuTitle from "@/components/indexMenuTitle.vue"; // 路径根据实际调整
import dayjs from "dayjs/esm/index";
import HotIndustryList from "@/components/HotIndustryList.vue"; // 路径根据实际调整

const newsList = ref([]);

const lastLeftNum = ref(0);
const lastRightNum = ref(0);

const industryList = ref([]);
const topConceptList = ref([]);
const newsNum = ref(0);
const lineData = ref();
const handleViewAll = () => {
  // 在这里处理点击“查看全部”的逻辑，比如跳转新页面等
  console.log("点击了查看全部");
};

const topNum = ref({});

// 获取顶部两个统计数据
async function getTopNum() {
  let res1 = await getindustryCount({});
  topNum.value.leftNum = res1.aggregations.industry_non_empty.doc_count;
  let res2 = await getConceptCount({});
  topNum.value.rightNum = res2.aggregations.concept_non_empty.doc_count;

  lastLeftNum.value = topNum.value.leftNum;
  lastRightNum.value = topNum.value.rightNum;
}

// 概念标签贴标
async function getNewsList() {
  newsList.value = await getTopNewsAll({});
}

// 热门行业top10
async function getTopIndustry_dFn() {
  industryList.value = await getTopIndustry_d({});
}

// 风口概念池top10
async function getTopConcept_dFn() {
  topConceptList.value = await getTopConcept_d({});
}

// 今日精选
async function getNews_cnt_dFn() {
  let temp = await getNews_cnt_d({});

  newsNum.value = temp[0].value;
}

// 获取柱状图数据
async function getLineData() {
  let res = await newsInfoScore({});
  lineData.value = res;
}

function initData() {
  // 获取柱状图数据
  getLineData();
  // 获取顶部两个统计数据
  getTopNum();
  // 概念标签贴标
  getNewsList();
  // 热门行业top10
  getTopIndustry_dFn();
  // 风口概念池top10
  getTopConcept_dFn();
  // 今日精选
  getNews_cnt_dFn();
}

const type = ref();
function onViewAll(type) {
  type.value = type;
  if (Session.get("token")) {
    uni.navigateTo({
      url: "/pages/realtimeInfo/rankDetail?type=" + type,
    });
  } else {
    LoginShow.value = true;
  }
}

const timer = setInterval(() => {
  initData();
}, 5000);

const LoginShow = ref(false);
const isLoginStatus = ref();
// 关闭弹框
const handlePopupClose = () => {
  LoginShow.value = false;
};

// 登录成功之后的回调
const handlePopupSuccessCallback = () => {
  isLoginStatus.value = true;

  // uni.navigateTo({
  //   url: "/pages/realtimeInfo/rankDetail?type=" + type.value,
  // });
};

// 登录失败之后的回调
const handlePopupErrorCallback = () => {
  console.log("登录失败");
};
import { doLogout } from "@/api";
function loginOut() {
  doLogout({
    financialAccount: Session.get("userPhone"),
  });
  Session.clear();
  window.location.reload();
}

const lineTabIndex = ref(0);
function handleTabClick(index) {
  lineTabIndex.value = index;
  getLineDataFn();
}

const lineTopData = ref({});
async function getLineDataFn() {
  if (lineTabIndex.value == 0) {
    // 行业
    getTopIndustryPeriod({
      start_time: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
      end_time: dayjs().format("YYYY-MM-DD"),
      limit_num: 10,
    }).then((res) => {
      lineTopData.value = res;
    });
  } else if (lineTabIndex.value == 1) {
    // 概念
    getTopConceptPeriod({
      start_time: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
      end_time: dayjs().format("YYYY-MM-DD"),
      limit_num: 10,
    }).then((res) => {
      lineTopData.value = res;
    });
  } else if (lineTabIndex.value == 2) {
    // 媒体
    getTopSourcePeriod({
      start_time: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
      end_time: dayjs().format("YYYY-MM-DD"),
      limit_num: 10,
    }).then((res) => {
      lineTopData.value = res;
    });
  }
}

function goSreach() {
  if (Session.get("token")) {
    uni.navigateTo({
      url: "/pages/sreachReq/index",
    });
  } else {
    LoginShow.value = true;
  }
}

onUnmounted(() => {
  clearInterval(timer);
});
const { aplus_queue } = window;
onMounted(async () => {
  initData();
  if (!Session.get("token")) {
    LoginShow.value = true;
  }
  getLineDataFn();

  aplus_queue.push({
    action: "aplus.sendPV",
    arguments: [{ is_auto: false }], // 此处上报的数据暂时在后台没有展示
  });
});
</script>

<style scoped lang="scss">
.all {
  display: flex;
  flex-direction: column;
  background: #f3f5f8;
}

.banner {
  position: relative;
}

.banner_bk {
  width: 100vw;
}

.r_banner_title {
  position: absolute;
  top: 160rpx;
  left: 50rpx;
  display: flex;
  flex-direction: column;

  .banner_title {
    width: 364rpx;
    height: 134rpx;
  }

  text {
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

.tag {
  display: flex;
  margin-top: -150rpx;
  position: relative;
  z-index: 999;
  padding: 0 25rpx;
  gap: 20rpx;
}

.r_tag_img {
  width: calc(50vw - 20rpx);
  height: 175rpx;
  position: relative;
  box-shadow: 0 10rpx 10rpx rgba(80, 80, 80, 0.1);
  border-radius: 20rpx;
}

.tag_bk {
  width: 100%;
  height: 100%;
}

.tag_content {
  display: flex;
  position: absolute;
  top: 40rpx;
  left: 30rpx;
  width: 83%;
  justify-content: space-between;

  .tag_item_left {
    display: flex;
    flex-direction: column;
  }

  .tag_title {
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #222222;
    line-height: 33rpx;
  }

  .tag_num {
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: bold;
    font-size: 38rpx;
    color: #222222;
    line-height: 56rpx;
  }

  .tag_status {
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: #999999;
    line-height: 33rpx;
    margin-top: 15rpx;
    margin-left: 7rpx;
  }

  .tag_item_right {
    width: 70rpx;
    height: 84rpx;
  }
}

.tag_icon {
  width: 70rpx;
  height: 84rpx;
}

.view-all {
  font-size: 14px;
  color: #999;
  text-decoration: underline;
}

.logout {
  // width: 100%;
  height: 80rpx;
  background-color: red;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: white;
  margin-top: 50rpx;
  border-radius: 20rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}

.tabs {
  display: flex;
  align-items: center;
  height: 30px;
  border-radius: 10px;

  .tab {
    width: 100px;
    height: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    border: 1px solid #e7e7e7;
    color: #000;
    font-size: 12px;
  }

  .tab_left {
    border-start-start-radius: 10px;
    border-end-start-radius: 10px;
    border-right: 0;
  }

  .tab_right {
    border-start-end-radius: 10px;
    border-end-end-radius: 10px;
    border-left: 0;
  }

  .active {
    border: 1px solid #ed971f;
    background-color: #ed971f;
    color: #fff;
  }
}

.r_sreach {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  // position: absolute;
  // top: 10px;
  // left: 0;
  // z-index: 9999;
  // background: url("https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/top_bg.png");
}

.logo_text {
  width: 88rpx;
  height: 40rpx;
}

.sreach {
  display: flex;
  align-items: center;
  padding: 0rpx 30rpx;
  background-color: #fff;
  border-radius: 100rpx;
  // width: 90vw;
  height: 63rpx;
  margin-left: 20rpx;
  border: 1px solid #e7e7e7;
  margin-top: 5rpx;
  // box-shadow: 0 0 10rpx rgba(97, 97, 97, 0.1);
}

.sreach_icon {
  margin-right: 10rpx;
  display: flex;
  align-items: center;

  image {
    width: 35rpx;
    height: 35rpx;
    margin-top: 5rpx;
  }
}

.sreach_text {
  font-family:
    PingFangSC,
    PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #999999;
  line-height: 33rpx;
  text-align: left;
  font-style: normal;
}

.top_bk {
  width: 100vw;
  height: 60px;
}
</style>