feat：完善舆情页面

src/views/sentiment/components/box1.vue

@@ -1,11 +0,0 @@
-<template>
-  <div class="container"> </div>
-</template>
-
-<script setup></script>
-
-<style scoped lang="scss">
-  .container {
-    margin: vh(120) vw(10) 0 vw(10);
-  }
-</style>

src/views/sentiment/components/dataSource.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="table">
+    <div class="header">
+      <p>排名</p>
+      <p>媒体/账号名称</p>
+      <p>媒体类型</p>
+      <p>总条数</p>
+      <p>敏感舆情</p>
+    </div>
+    <div class="list">
+      <div class="cell" v-for="(item, index) in 10" :key="index">
+        <p><span class="index">排名</span></p>
+        <p><span class="name">手机新浪网</span></p>
+        <p><span class="name">新闻</span></p>
+        <p><span class="number">580</span></p>
+        <p><span class="status">1000</span></p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style scoped lang="scss">
+  .table {
+    padding: 0 vw(20);
+    .header {
+      display: flex;
+      font-weight: 400;
+      font-size: vw(13);
+      color: #0084ff;
+      height: vh(40);
+      display: flex;
+      align-items: center;
+      background: rgba(3, 78, 153, 0.3);
+      & > p {
+        flex: 1;
+        text-align: center;
+      }
+    }
+    .list {
+      overflow-y: auto;
+      height: vh(370);
+      /* 滚动条整体样式 */
+      &::-webkit-scrollbar {
+        width: vw(4); /* 滚动条的宽度 */
+      }
+      /* 滚动条轨道 */
+      &::-webkit-scrollbar-track {
+        background: 'transparent'; /* 轨道的背景色 */
+      }
+      /* 滚动条滑块 */
+      &::-webkit-scrollbar-thumb {
+        background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+        border-radius: 5px; /* 滑块的圆角 */
+      }
+      // /* 当鼠标悬停在滚动条上时滑块的样式 */
+      // &::-webkit-scrollbar-thumb:hover {
+      //   background: #555; /* 滑块的背景色 */
+      // }
+      .cell {
+        height: vh(40);
+        display: flex;
+        align-items: center;
+        &:nth-child(2n) {
+          background: rgba(3, 78, 153, 0.3);
+        }
+        & > p {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .index {
+          display: inline-block;
+          width: vw(40);
+          height: vh(24);
+          font-weight: 400;
+          font-size: vw(12);
+          color: #ffffff;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: vw(2);
+          background-color: #495c77;
+        }
+        .name {
+          font-weight: 400;
+          font-size: vw(15);
+          color: #ffffff;
+        }
+        .number {
+          font-weight: 400;
+          font-size: vw(15);
+          color: #02f9fa;
+        }
+        .status {
+          font-weight: 400;
+          font-size: vw(15);
+          color: #e21b1b;
+        }
+      }
+    }
+  }
+</style>

src/views/sentiment/components/emotion.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="emotion" id="emotion" />
+</template>
+
+<script setup>
+  import * as echarts from 'echarts'
+  import { fitChartSize } from '@/utils/dataUtil'
+  let emotionChart = null
+  const initChart = () => {
+    const dom = document.getElementById('emotion')
+    emotionChart = echarts.init(dom)
+    emotionChart.setOption({
+      legend: {
+        top: 'top',
+        itemWidth: fitChartSize(30),
+        itemHeight: fitChartSize(30),
+        textStyle: {
+          fontSize: fitChartSize(14),
+          color: '#fff'
+        }
+      },
+      series: [
+        {
+          name: 'Nightingale Chart',
+          type: 'pie',
+          radius: ['10%', '70%'],
+          center: ['50%', '56%'],
+          roseType: 'area',
+          itemStyle: {
+            borderRadius: fitChartSize(10)
+          },
+          data: [
+            { value: 40, name: 'rose 1' },
+            { value: 38, name: 'rose 2' },
+            { value: 32, name: 'rose 3' },
+            { value: 30, name: 'rose 4' },
+            { value: 28, name: 'rose 5' },
+            { value: 26, name: 'rose 6' },
+            { value: 22, name: 'rose 7' },
+            { value: 18, name: 'rose 8' }
+          ]
+        }
+      ]
+    })
+  }
+  const resize = () => {
+    if (emotionChart) {
+      emotionChart.dispose()
+      emotionChart = null
+      initChart()
+    }
+  }
+  onMounted(() => {
+    initChart()
+    window.addEventListener('resize', resize)
+  })
+</script>
+
+<style scoped lang="scss">
+  .emotion {
+    width: vw(740);
+    height: vh(400);
+  }
+</style>

src/views/sentiment/components/wordCloud.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="wordCloud" id="wordCloud" />
+</template>
+
+<script setup>
+  import * as echarts from 'echarts'
+  import 'echarts-wordcloud'
+  import { fitChartSize } from '@/utils/dataUtil'
+
+  let wordChart = null
+  const initChart = () => {
+    const dom = document.getElementById('wordCloud')
+    wordChart = echarts.init(dom)
+    wordChart.setOption({
+      //你的代码
+      series: [
+        {
+          type: 'wordCloud',
+          // 网格大小，各项之间间距
+          gridSize: fitChartSize(50),
+          // 形状 circle 圆，cardioid  心， diamond 菱形，
+          // triangle-forward 、triangle 三角，star五角星
+          shape: 'circle',
+          // 字体大小范围
+          sizeRange: [fitChartSize(14), fitChartSize(36)],
+          // 文字旋转角度范围
+          rotationRange: [0, 0],
+          // 旋转步值
+          rotationStep: 90,
+          // 自定义图形
+          // maskImage: maskImage,
+          left: 'center',
+          top: 'center',
+          // 画布宽
+          width: '100%',
+          // 画布高
+          height: '100%',
+          // 是否渲染超出画布的文字
+          drawOutOfBound: false,
+          textStyle: {
+            color: function () {
+              const colors = ['#165DFF', '#6aca37', '#05a4b6', '#f93920', '#f0b114']
+              return colors[parseInt(Math.random() * colors.length)]
+            },
+            padding: fitChartSize(10),
+            backgroundColor: 'rgba(0,255,255,.2)'
+          },
+          data: [
+            {
+              value: 2,
+              name: '体外循环'
+            },
+            {
+              value: 1,
+              name: '偏好现金'
+            },
+            {
+              value: 7.75434839431,
+              name: '新成立公司'
+            },
+            {
+              value: 11.3865516372,
+              name: '相同董监高'
+            },
+            {
+              value: 7.75434839431,
+              name: '司法风险'
+            },
+            {
+              value: 5.83541244308,
+              name: '小微企业'
+            },
+            {
+              value: 15.83541244308,
+              name: '同名称交易'
+            },
+            {
+              value: 2.83541244308,
+              name: '高频交易'
+            },
+            {
+              value: 5.83541244308,
+              name: '大额交易'
+            },
+            {
+              value: 10.83541244308,
+              name: '贸易公司'
+            },
+            {
+              value: 5.83541244308,
+              name: '票据偏好'
+            },
+            {
+              value: 5.83541244308,
+              name: '空转走单'
+            }
+          ]
+        }
+      ]
+    })
+  }
+  const resize = () => {
+    if (wordChart) {
+      wordChart.dispose()
+      wordChart = null
+      initChart()
+    }
+  }
+  onMounted(() => {
+    initChart()
+    window.addEventListener('resize', resize)
+  })
+</script>
+
+<style scoped lang="scss">
+  .wordCloud {
+    width: vw(760);
+    height: vh(420);
+  }
+</style>

src/views/sentiment/index.vue

@@ -1,40 +1,104 @@
 <template>
-  <Header title="舆情检测" />
+  <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 in 20">
+            <p class="status status-error">负面</p>
+            <p class="content">
+              这是一条关于三侠之颠旅游舆情的负面新闻这是一条关于三侠之颠旅游舆情的负面这是一条关于三侠之颠旅游舆情的负面新闻这是一条关于三侠之颠旅游舆情的负面
+            </p>
+            <p class="date">2024-12.16 23:58</p>
+          </div>
+        </div>
       </div>
       <div class="box-2 mr-10">
         <div class="flex justify-center">
-          <div class="flex">
-            <count-item label="今日预警" :count="35600" suffix="条" />
-            <count-item label="今日预警" :count="35600" suffix="条" />
-            <count-item label="今日预警" :count="35600" suffix="条" />
+          <div class="top flex justify-evenly">
+            <count-item label="今日舆情总数" :count="35600" suffix="条" color="#fff" />
+            <count-item label="今日正面舆情" :count="35600" suffix="条" color="#fff" />
+            <count-item label="今日负面舆情" :count="35600" suffix="条" color="#fff" />
+          </div>
+        </div>
+        <div class="flex mt-20 gap-8 ml-8 mr-8">
+          <div class="border flex-1">
+            <Title3 title="山峡之巅" />
+            <pie-row :width="500" :height="330" />
+          </div>
+          <div class="border flex-1">
+            <Title3 title="山峡之巅" />
+            <pie-row :width="500" :height="330" />
+          </div>
+          <div class="border flex-1">
+            <Title3 title="山峡之巅" />
+            <pie-row :width="500" :height="330" />
           </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="舆情指数" />
+        <Line
+          :width="1560"
+          :height="400"
+          :data="[
+            {
+              name: '企业数',
+              data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
+            },
+            {
+              name: '交易量',
+              data: [124, 30, 77, 97, 67, 75, 70, 334, 123, 124, 30, 77, 97, 67, 75, 70]
+            }
+          ]"
+          :xAxisData="xAxisData"
+          :seriesConfig="{ smooth: false, symbol: 'circle' }"
+        />
       </div>
       <div class="box-1 mr-10">
         <Title1 title="情感分布" />
+        <emotion />
       </div>
       <div class="box-1 mr-10">
         <Title1 title="词频分析" />
+        <word-cloud />
       </div>
     </div>
   </div>
   <Correspondence />
 </template>
 
-<script setup></script>
+<script setup>
+  import emotion from './components/emotion.vue'
+  import wordCloud from './components/wordCloud.vue'
+  import dataSource from './components/dataSource.vue'
+  let xAxisData = ref([
+    '12-16 10:00',
+    '12-16 14:00',
+    '12-16 16:00',
+    '12-16 22:00',
+    '12-17 02:00',
+    '12-17 06:00',
+    '12-17 10:00',
+    '12-17 14:00',
+    '12-17 16:00',
+    '12-16 22:00',
+    '12-18 02:00',
+    '12-18 06:00',
+    '12-8 10:00',
+    '12-18 14:00',
+    '12-18 16:00',
+    '12-18 20:00'
+  ])
+</script>
 
 <style scoped lang="scss">
   .container {
@@ -43,6 +107,10 @@
     .bg {
       background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
     }
+    .top {
+      width: vw(600);
+      margin-top: vh(35);
+    }
     .box-1 {
       width: vw(770);
       height: vh(470);
@@ -53,5 +121,73 @@
       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>