feat：完善舆情页面

2024-12-19 18:21:28 +08:00
parent 42a680c9c3
commit 188e233c7f
25 changed files with 641 additions and 139 deletions
--- a/index.html
+++ b/index.html
@@ -3,7 +3,10 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+    />
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=MZ9Zd9vKGesV5wxV1EhvjOoGIjHc09Yj"></script>
    <title>奉节旅游调度</title>
  </head>
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
        "@newpanjing/datav-vue3": "^0.0.0-alpha.0",
        "axios": "^1.7.9",
        "echarts": "^5.5.1",
+        "echarts-wordcloud": "^2.0.0",
        "element-plus": "^2.9.0",
        "flv.js": "^1.6.2",
        "pinia": "^2.2.6",
@@ -1787,6 +1788,14 @@
        "zrender": "5.6.0"
      }
    },
+    "node_modules/echarts-wordcloud": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-2.0.0.tgz",
+      "integrity": "sha512-K7l6pTklqdW7ZWzT/1CS0KhBSINr/cd7c5N1fVMzZMwLQHEwT7x+nivK7g5hkVh7WNcAv4Dn6/ZS5zMKRozC1g==",
+      "peerDependencies": {
+        "echarts": "^5.0.1"
+      }
+    },
    "node_modules/electron-to-chromium": {
      "version": "1.5.68",
      "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.68.tgz",
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
    "@newpanjing/datav-vue3": "^0.0.0-alpha.0",
    "axios": "^1.7.9",
    "echarts": "^5.5.1",
+    "echarts-wordcloud": "^2.0.0",
    "element-plus": "^2.9.0",
    "flv.js": "^1.6.2",
    "pinia": "^2.2.6",
--- a/src/components/CountItem/index.vue
+++ b/src/components/CountItem/index.vue
@@ -6,7 +6,7 @@
    </div>
    <div class="count">
      <img class="bg" src="@/assets/images/mask-success.png" />
-      <div class="flex align-center">
+      <div class="flex align-center" :style="{ color }">
        <countup class="value" :end-val="count" />
        <span class="suffix">{{ suffix }}</span>
      </div>
@@ -16,7 +16,7 @@

 <script setup>
  import countup from 'vue-countup-v3'
-  
+
  let props = defineProps({
    label: {
      type: String,
@@ -26,6 +26,10 @@
      type: Number,
      default: 0
    },
+    color: {
+      type: String,
+      default: '#02f9fa'
+    },
    mode: {
      type: Number,
      default: 0
--- a/src/components/Header/index.vue
+++ b/src/components/Header/index.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="header">
-    <div v-if="isBack" class="back">返回</div>
+    <div v-if="isBack" class="back" @click="handleBack">返回</div>
    <ul class="nav-left">
      <li
        class="nav-left-item"
@@ -18,9 +18,12 @@
      <span>{{ name }}</span>
    </div>
    <ul class="nav-right">
-      <li class="nav-right-item" 
-		@click="handleNav(item, index)"
-	  v-for="(item, index) in navRight" :key="index">
+      <li
+        class="nav-right-item"
+        @click="handleNav(item, index)"
+        v-for="(item, index) in navRight"
+        :key="index"
+      >
        {{ item.name }}
      </li>
    </ul>
@@ -68,6 +71,9 @@
    return props.title
  })

+  const handleBack = () => {
+    router.go(-1)
+  }
  const handleNav = (item, index) => {
    if (props.isSkip) {
      router.push(item.path)
@@ -83,7 +89,7 @@
    left: vw(326);
    .back {
      position: absolute;
-      left: vw(60);
+      right: vw(20);
      top: vh(40);
      width: vw(120);
      height: vh(30);
--- a/src/components/Line/index.vue
+++ b/src/components/Line/index.vue
@@ -20,6 +20,22 @@
    height: {
      type: Number,
      default: () => 0
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    xAxisData: {
+      type: Array,
+      default: () => []
+    },
+    config: {
+      type: Object,
+      default: () => {}
+    },
+    seriesConfig: {
+      type: Object,
+      default: () => {}
    }
  })

@@ -27,12 +43,26 @@
  let lineChart = null
  let timer = null
  let currentIndex = -1
-  let defaultCofig = {
+
+  var defaultColors = ['#06E2FF', '#02FFB8', '#FF465F', '#FFCA36', '#9A4BFC', '#044EFF']
+
+  let defaultSeriesConfig = {
+    type: 'line',
+    smooth: true,
+    symbol: 'none',
+    symbolSize: fitChartSize(8)
+  }
+  let defaultConfig = {
+    colors: defaultColors,
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'transparent',
      borderWidth: 0,
      formatter: (params) => {
+        let valueStr = ''
+        params.map((item) => {
+          valueStr += `<div>${item.seriesName}：${item.value}</div>`
+        })
        let str = `<div style="
              background: #07356B;
              border: 1px solid #0096FF;
@@ -41,7 +71,7 @@
              font-size: ${fitChartSize(16)}px;
              border-radius: ${fitChartSize(4)}px;
              padding: ${fitChartSize(4)}px ${fitChartSize(12)}px;">
-              ${params[0].value}</div>`
+              ${valueStr}</div>`
        return str
      }
    },
@@ -49,9 +79,23 @@
      left: '2%',
      right: '2%',
      bottom: '5%',
-      top: '5%',
+      top: '10%',
      containLabel: true
    },
+    legend: {
+      orient: 'horizontal',
+      x: 'center',
+      y: 'top',
+      icon: 'rect',
+      itemWidth: fitChartSize(8),
+      itemHeight: fitChartSize(4),
+      itemGap: fitChartSize(10),
+      textStyle: {
+        color: '#ffffff',
+        fontSize: fitChartSize(12)
+      },
+      data: []
+    },
    title: {
      show: false
    },
@@ -85,48 +129,42 @@
        }
      }
    },
-    series: [
-      {
-        data: [],
-        type: 'line',
-        smooth: true,
-        symbol: 'none',
-        lineStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: '#7DE7FF'
-            },
-            {
-              offset: 0.5,
-              color: '#02F9FA'
-            },
-            {
-              offset: 1,
-              color: '#009DFF'
-            }
-          ])
-        }
-      }
-    ]
+    series: []
  }
-
-  const init = () => {
+  watch(
+    () => props.data,
+    (val) => {
+      if (val.length > 0) {
+        setTimeout(() => {
+          initChart()
+        }, 500)
+      }
+    },
+    { immediate: true }
+  )
+  const initChart = () => {
    const dom = document.getElementById(id.value)
    lineChart = echarts.init(dom)
-    defaultCofig.xAxis.data = [
-      '10:00',
-      '10:05',
-      '10:10',
-      '10:15',
-      '10:20',
-      '10:25',
-      '10:30',
-      '10:35'
-    ]
-    defaultCofig.series[0].data = [820, 932, 901, 934, 1290, 1330, 1320, 1290]
+    defaultConfig.xAxis.data = props.xAxisData
+    props.data.map((item, index) => {
+      defaultConfig.series.push({
+        ...defaultSeriesConfig,
+        ...props.seriesConfig,
+        name: item.name,
+        data: item.data,
+        itemStyle: {
+          color: '#0B2F63',
+          borderColor: defaultColors[index],
+          borderWidth: fitChartSize(4)
+        },
+        lineStyle: {
+          color: defaultColors[index]
+        }
+      })
+      defaultConfig.legend.data.push(item.name)
+    })
    lineChart.setOption({
-      ...defaultCofig
+      ...defaultConfig
    })
    // // 开启轮播
    // startTooltipLoop()
@@ -151,42 +189,37 @@
    if (lineChart) {
      lineChart.dispose()
      lineChart = null
-      init()
+      initChart()
    }
  }
-
-  // 切换tooltip
-  const switchTooltip = () => {
-    // 取消之前高亮的图形
-    lineChart.dispatchAction({
-      type: 'downplay',
-      seriesIndex: 0,
-      dataIndex: currentIndex
-    })
-    currentIndex = (currentIndex + 1) % 8
-    // 高亮当前图形
-    lineChart.dispatchAction({
-      type: 'highlight',
-      seriesIndex: 0,
-      dataIndex: currentIndex
-    })
-    // 显示tooltip
-    lineChart.dispatchAction({
-      type: 'showTip',
-      seriesIndex: 0,
-      dataIndex: currentIndex
-    })
-  }
-  const startTooltipLoop = () => {
-    timer = setInterval(() => switchTooltip(), 3000)
-  }
-  const closeSwitchTooltip = () => {
-    clearInterval(timer)
-    timer = undefined
-  }
-
-  onMounted(() => {
-    init()
-  })
+  // // 切换tooltip
+  // const switchTooltip = () => {
+  //   // 取消之前高亮的图形
+  //   lineChart.dispatchAction({
+  //     type: 'downplay',
+  //     seriesIndex: 0,
+  //     dataIndex: currentIndex
+  //   })
+  //   currentIndex = (currentIndex + 1) % 8
+  //   // 高亮当前图形
+  //   lineChart.dispatchAction({
+  //     type: 'highlight',
+  //     seriesIndex: 0,
+  //     dataIndex: currentIndex
+  //   })
+  //   // 显示tooltip
+  //   lineChart.dispatchAction({
+  //     type: 'showTip',
+  //     seriesIndex: 0,
+  //     dataIndex: currentIndex
+  //   })
+  // }
+  // const startTooltipLoop = () => {
+  //   timer = setInterval(() => switchTooltip(), 3000)
+  // }
+  // const closeSwitchTooltip = () => {
+  //   clearInterval(timer)
+  //   timer = undefined
+  // }
 </script>
 <style lang="scss"></style>
--- a/src/components/PieRow/index.vue
+++ b/src/components/PieRow/index.vue
@@ -61,7 +61,6 @@
        fontSize: fitChartSize(12)
      }
    },
-
    series: [
      {
        type: 'pie',
@@ -98,14 +97,6 @@
      }
    ]
  }
-  const resize = () => {
-    if (pieChart) {
-      pieChart.dispose()
-      pieChart = null
-      init()
-    }
-  }
-
  const init = () => {
    const dom = document.getElementById(id.value)
    pieChart = echarts.init(dom)
@@ -116,7 +107,13 @@
    // 监听窗口大小变化
    window.addEventListener('resize', resize)
  }
-
+  const resize = () => {
+    if (pieChart) {
+      pieChart.dispose()
+      pieChart = null
+      init()
+    }
+  }
  onMounted(() => {
    init()
  })
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -19,9 +19,18 @@
 .justify-evenly {
  justify-content: space-evenly;
 }
+.gap-8 {
+  gap: vh(8) vw(8);
+}
 .mb-6 {
  margin-bottom: vh(6) !important;
 }
+.ml-8 {
+  margin-left: vw(8) !important;
+}
+.mr-8 {
+  margin-right: vw(8) !important;
+}
 .pt-10 {
  padding-top: vh(10) !important;
 }
--- a/src/styles/screen.scss
+++ b/src/styles/screen.scss
@@ -1,16 +1,16 @@
-@use "sass:math";
+@use 'sass:math';

 //默认设计稿的宽度
-$designWidth:3840;
+$designWidth: 3822;
 //默认设计稿的高度
-$designHeight:1080;
+$designHeight: 1080;

 //px转为vw的函数
@function vw($px) {
-  @return math.div($px , $designWidth) * 100vw;
+  @return math.div($px, $designWidth) * 100vw;
 }

 //px转为vh的函数
@function vh($px) {
-  @return math.div($px , $designHeight) * 100vh;
+  @return math.div($px, $designHeight) * 100vh;
 }
--- a/src/utils/dataUtil.js
+++ b/src/utils/dataUtil.js
@@ -1,5 +1,5 @@
 /* Echarts图表尺寸自适应 */
-export const fitChartSize = (size, width = 3840) => {
+export const fitChartSize = (size, width = 3822) => {
  let clientWidth =
    window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
  if (!clientWidth) return size
--- a/src/utils/styleUtil.js
+++ b/src/utils/styleUtil.js
@@ -1,5 +1,5 @@
 //默认设计稿的宽度
-const designWidth = 3840
+const designWidth = 3822
 //默认设计稿的高度
 const designHeight = 1080

--- a/src/views/home/components/age-ratio.vue
+++ b/src/views/home/components/age-ratio.vue
@@ -15,16 +15,42 @@
      tooltip: {
        trigger: 'item'
      },
+      legend: {
+        orient: 'vertical',
+        left: '60%',
+        y: 'center',
+        data: ['19岁以下', '18-30岁', '30-40岁', '40-60岁', '60岁以上'],
+        itemHeight: fitChartSize(8),
+        itemWidth: fitChartSize(8),
+        itemGap: fitChartSize(10),
+        formatter: function (name) {
+          return '{title|' + name + '}'
+        },
+        textStyle: {
+          rich: {
+            title: {
+              color: '#fff',
+              fontSize: fitChartSize(14)
+            },
+            value: {
+              color: '#00D5F6',
+              fontSize: fitChartSize(14)
+            }
+          }
+        }
+      },
      series: [
        {
          type: 'pie',
-          radius: ['30%', '40%'],
+          center: ['30%', '50%'],
+          radius: ['50%', '70%'],
          itemStyle: {
            borderColor: 'transparent',
            borderRadius: fitChartSize(2),
            borderWidth: fitChartSize(2)
          },
          label: {
+            show: false,
            color: '#D3F0FE',
            fontSize: fitChartSize(12)
          },
@@ -36,11 +62,11 @@
            }
          },
          data: [
-            { value: 484, name: '19岁以下', labelLine: { length: 2 } },
-            { value: 300, name: '18-30岁', labelLine: { length: 2 } },
-            { value: 1048, name: '30-40岁', labelLine: { length: 2 } },
-            { value: 580, name: '40-60岁', labelLine: { length: 2 } },
-            { value: 735, name: '60岁以上', labelLine: { length: 2 } }
+            { value: 484, name: '19岁以下' },
+            { value: 300, name: '18-30岁' },
+            { value: 1048, name: '30-40岁' },
+            { value: 580, name: '40-60岁' },
+            { value: 735, name: '60岁以上' }
          ]
        }
      ]
@@ -63,6 +89,6 @@
 <style lang="scss" scoped>
  .age-ratio {
    width: vw(253);
-    height: vh(100);
+    height: vh(120);
  }
 </style>
--- a/src/views/home/components/box-2.vue
+++ b/src/views/home/components/box-2.vue
@@ -245,7 +245,7 @@
    }
    .box-1 {
      width: vw(253);
-      height: vh(270);
+      height: vh(290);
      background-image: url('@/assets/images/bg-3.png');
      background-size: 100% 100%;
      &:nth-child(1) {
--- a/src/views/home/components/box-4.vue
+++ b/src/views/home/components/box-4.vue
@@ -235,7 +235,7 @@
  }
  .box-4 {
    margin-top: vh(120);
-    width: vw(790);
+    width: vw(710);
    height: vh(950);
    padding: vw(8);
    box-sizing: border-box;
--- a/src/views/home/components/box-5.vue
+++ b/src/views/home/components/box-5.vue
--- a/src/views/home/components/jam.vue
+++ b/src/views/home/components/jam.vue
@@ -103,7 +103,7 @@
        },
        label: {
          show: true,
-          offset: [10, -13],
+          offset: [10, -10],
          color: '#D3E5FF',
          fontWeight: 500,
          position: 'left',
--- a/src/views/home/components/ticket.vue
+++ b/src/views/home/components/ticket.vue
@@ -42,12 +42,8 @@
      }
    },
    legend: {
-      orient: 'vertical',
-      x: 'right',
-      y: 'center',
-      //   textStyle: {
-      //     color: '#4A9AE4'
-      //   },
+      x: 'center',
+      y: 'bottom',
      data: qxzbData,
      itemHeight: fitChartSize(8),
      itemWidth: fitChartSize(8),
@@ -75,7 +71,7 @@
        type: 'pie',
        clockWise: false, //顺时加载
        radius: ['15%', '25%'],
-        center: ['30%', '50%'],
+        center: ['50%', '40%'],
        label: {
          normal: {
            show: false
@@ -109,7 +105,7 @@
        type: 'pie',
        clockWise: false, //顺时加载
        radius: ['30%', '40%'],
-        center: ['30%', '50%'],
+        center: ['50%', '40%'],
        label: {
          normal: {
            show: false
@@ -143,7 +139,7 @@
        type: 'pie',
        clockWise: false, //顺时加载
        radius: ['45%', '55%'],
-        center: ['30%', '50%'],
+        center: ['50%', '40%'],
        label: {
          normal: {
            show: false
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -11,7 +11,11 @@
  import box2 from './components/box-2.vue'
  import box3 from './components/box-3.vue'
  import box4 from './components/box-4.vue'
-  const navLeft = [{ name: '安全' }, { name: '景区', path: '/scenic' }, { name: '交通' }]
+  const navLeft = [
+    { name: '安全', path: '/monitor' },
+    { name: '景区', path: '/scenic' },
+    { name: '交通' }
+  ]
  const navRight = [
    { name: '停车' },
    { name: '工单' },
--- a/src/views/scenic/index.vue
+++ b/src/views/scenic/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <Header :current="current" :nav-left="navLeft" @on-change="onChange" />
+  <Header is-back :current="current" :nav-left="navLeft" @on-change="onChange" />
  <CoreVideo />
  <box1 />
  <box2 />
--- a/src/views/sentiment/components/box1.vue
+++ b/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>
--- a/src/views/sentiment/components/dataSource.vue
+++ b/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>
--- a/src/views/sentiment/components/emotion.vue
+++ b/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>
--- a/src/views/sentiment/components/wordCloud.vue
+++ b/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>
--- a/src/views/sentiment/index.vue
+++ b/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>
--- a/t.png
+++ b/t.png