fengjie-datascreen/src/views/sentiment/index.vue

<template>
  <Header title="舆情检测" is-back />
  <CoreVideo />
  <div class="container">
    <div class="flex">
      <div class="box-1 mr-10">
        <Title1 title="最新舆情" />
        <div class="list">
          <div class="item" v-for="(item, index) in hotNewList" :key="index">
            <p class="status status-error">{{ item.type }}</p>
            <p class="content">
              {{ item.title }}
            </p>
            <p class="date">{{ item.time }}</p>
          </div>
        </div>
      </div>
      <div class="box-2 mr-10">
        <div class="flex justify-center">
          <div class="top flex justify-evenly">
            <count-item label="今日舆情总数" :count="total" suffix="条" color="#ffffff" />
            <count-item label="今日正面舆情" :count="sensitive" suffix="条" color="#ffffff" />
            <count-item label="今日负面舆情" :count="unsensitive" suffix="条" color="#ffffff" />
          </div>
        </div>
        <div class="flex mt-20 gap-8 ml-8 mr-8">
          <div v-for="(item, index) in stateList" :key="index" class="border flex-1">
            <Title3 :title="item.name" />
            <pie-row :width="500" :height="330" :dataList="item.data" :total="item.total" />
          </div>
        </div>
      </div>
      <div class="box-1">
        <Title1 title="数据来源分析" />
        <data-source />
      </div>
    </div>
    <div class="flex mt-10">
      <div class="box-2 mr-10">
        <Title1 title="舆情指数" />
        <Dropdown :options="options" @on-change="onChange" />
        <Line
          :width="1560"
          :height="400"
          :data="seriesData"
          :xAxisData="xAxisData"
          :seriesConfig="{ smooth: false, symbol: 'circle' }"
        />
      </div>
      <div class="box-1 mr-10">
        <Title1 title="地域分析" />
        <Area />
      </div>
      <div class="box-1 mr-10">
        <Title1 title="词频分析" />
        <word-cloud />
      </div>
    </div>
  </div>
  <Correspondence />
</template>

<script setup>
  import Area from './components/area.vue'
  import wordCloud from './components/wordCloud.vue'
  import dataSource from './components/dataSource.vue'
  import {
    getHotNewApi,
    getLineChartApi,
    getStateApi,
    getTotalApi,
    getSpotApi
  } from '@/api/sentiment.js'

  let seriesData = ref([])
  let xAxisData = ref([])
  let hotNewList = ref([])
  let total = ref(0)
  let sensitive = ref(0)
  let unsensitive = ref(0)
  let stateList = ref([])
  let options = ref([])
  const onChange = (e) => {
    console.log(e, '===')
    getLineChart(e.id)
  }
  const getStop = async () => {
    let res = await getSpotApi()
    options.value = res.data
  }
  const getTotal = async () => {
    let res = await getTotalApi()
    total.value = res.data.total
    sensitive.value = res.data.sensitive
    unsensitive.value = res.data.unsensitive
  }
  const getState = async () => {
    let res = await getStateApi()
    stateList.value = res.data
    console.log(stateList.value, '------')
  }
  const getLineChart = async (id) => {
    let res = await getLineChartApi({ id })
    xAxisData.value = res.data.data
    seriesData.value = res.data.series
  }
  const getHotNew = async () => {
    let res = await getHotNewApi()
    hotNewList.value = res.data
  }
  onMounted(() => {
    getStop()
    getHotNew()
    getTotal()
    getState()
    getLineChart()
  })
</script>

<style scoped lang="scss">
  .container {
    margin-top: vh(120);
    .bg {
      background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
    }
    .top {
      width: vw(600);
      margin-top: vh(35);
    }
    .box-1 {
      width: vw(780);
      height: vh(470);
      @extend .bg;
    }
    .box-2 {
      width: vw(1574);
      height: vh(470);
      @extend .bg;
    }
    .border {
      background-image: url('@/assets/images/bg-3.png');
      background-size: 100% 100%;
    }
    .list {
      margin: 0 vw(20);
      overflow-y: auto;
      height: vh(400);
      /* 滚动条整体样式 */
      &::-webkit-scrollbar {
        width: vw(4); /* 滚动条的宽度 */
      }
      /* 滚动条轨道 */
      &::-webkit-scrollbar-track {
        background: 'transparent'; /* 轨道的背景色 */
      }
      /* 滚动条滑块 */
      &::-webkit-scrollbar-thumb {
        background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
        border-radius: 5px; /* 滑块的圆角 */
      }
      .item {
        display: flex;
        align-items: center;
        height: vh(40);
        &:nth-child(2n + 1) {
          background: rgba(3, 78, 153, 0.3);
        }
        .status {
          width: vw(40);
          height: vh(20);
          line-height: vh(20);
          text-align: center;
          margin: 0 vw(20);
          font-weight: 400;
          font-size: vw(12);
          color: #ffffff;
          border-radius: vw(2);
          &-error {
            @extend .status;
            background: #d9011b;
          }
          &-warning {
            @extend .status;
            background: #feae00;
          }
          &-primary {
            @extend .status;
            background: #2380fb;
          }
        }
        .content {
          flex: 1;
          font-weight: 400;
          font-size: vw(15);
          color: #ffffff;
          white-space: nowrap; /* 保证文本在一行内显示 */
          overflow: hidden; /* 隐藏溢出的内容 */
          text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
        }
        .date {
          margin: 0 vw(20);
          font-weight: 400;
          font-size: vw(12);
          color: rgba(255, 255, 255, 0.7);
        }
      }
    }
  }
</style>