更新页面

2025-09-20 17:29:35 +08:00
parent 9f503c7069
commit c565736d49
26 changed files with 1398 additions and 106 deletions
--- a/src/views/home/dialog/components/popupWarning.vue
+++ b/src/views/home/dialog/components/popupWarning.vue
@ -10,7 +10,7 @@

 </template>
 <script setup>
-import YjItem from "@/views/backOfficeSystem/IntelligentControl/warningControl/components/yjItem.vue";
+import YjItem from "@/views/backOfficeSystem/fourColorManage/warningControl/centerHome/components/yjItem.vue";
 import { ref, defineProps, onMounted, watch } from "vue";
 import emitter from "@/utils/eventBus.js";
 //参数传递
--- a/src/views/home/echarts/barHatEcharts
+++ b/src/views/home/echarts/barHatEcharts
@ -0,0 +1,137 @@
+<template>
+  <div style="height:100%;width:100%" :id="echartsId"></div>
+</template>
+
+<script setup>
+import * as echarts from "echarts";
+import { nextTick , onMounted, watch, defineProps } from "vue";
+const props = defineProps({
+  echartsId:{
+    type:String,
+    default:'barHatId'
+  },
+  data:{
+    type:Object,
+    default:{
+      xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
+      list:[
+        { name: "总数", value: [10,20,30,40,50,60,70] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
+        { name: "已处置", value: [10,20,30,40,50,60,70],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF'  },
+      ],
+    }
+  }
+});
+
+watch(()=>props.data,val=>{
+  nextTick(()=>{ handleDate() })
+},{immediate:true,deep:true})
+
+// 处理数据
+function handleDate() {
+  let xDate = props.data.xDate;
+  let legend = props.data.list.map(v=>{return {name:v.name}})
+  let series = props.data.list.map((item,i)=>{
+    let obj = {
+      name: item.name,
+      type: "bar",
+      data: item.value,
+      barWidth: "10px",
+      itemStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(0,0,0,1,[
+            { offset: 0, color: item.color ? item.color[0] : "rgba(0,244,255,1)" },
+            { offset: 1,  color: item.color ? item.color[1] : "rgba(0,77,167,1)" }],false),
+        }
+      },
+      markPoint: {
+        symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
+        symbolSize: [11, 4], // 设置扁圆的宽和高
+        itemStyle: { color: item.hatColor || '#087df9'   },// 圆盘颜色
+        data: item.value.map((obj, index) => ({
+          xAxis: index, // 对应柱子的横坐标
+          yAxis: obj + 0 // 柱子的值加上一些偏移量
+        }))
+      },
+    }
+    return obj
+  })
+  lineChartFn(xDate,legend,series)
+}
+
+function lineChartFn(xDate,legend,series) {
+  var myChart = echarts.init(document.getElementById(props.echartsId));
+  var option = {
+    legend: {
+      type: "plain",
+      show: true,
+      right: 0,
+      textStyle: { color: "#ddd" },
+      data: legend
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
+      }
+    },
+    grid: {
+      top: "25%",
+      right: "8%",
+      left: "10%",
+      bottom: "22%"
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: xDate,
+        axisLine: {
+          lineStyle: {
+            color: "rgba(255,255,255,0.12)"
+          }
+        },
+        axisLabel: {
+          margin: 10,
+          color: "#e2e9ff",
+          textStyle: {
+            fontSize: 14
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        // name: '单位：万元',
+        axisLabel: {
+          formatter: "{value}",
+          color: "#e2e9ff"
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: "rgba(255,255,255,1)"
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: "rgba(255,255,255,0.12)"
+          }
+        }
+      }
+    ],
+    series: series
+  };
+  option && myChart.setOption(option);
+  window.onresize = function () { myChart.resize(); };
+}
+onMounted(() => {
+  lineChartFn();
+});
+</script>
+
+<style lang="scss" scoped>
+.circlecz {
+  height: 100%;
+  background: rgba(0,29,75,0.6);
+  border-radius: 0 0 4px 4px;
+}
+</style>
--- a/src/views/home/echarts/barHatEcharts.vue
+++ b/src/views/home/echarts/barHatEcharts.vue
@ -4,33 +4,180 @@

 <script setup>
 import * as echarts from "echarts";
-import { nextTick , onMounted, watch, defineProps } from "vue";
+import { nextTick, onMounted, onUnmounted, watch, defineProps, ref } from "vue";
+
 const props = defineProps({
-  echartsId:{
-    type:String,
-    default:'barHatId'
+  echartsId: {
+    type: String,
+    default: 'barHatId'
  },
-  data:{
-    type:Object,
-    default:{
+  data: {
+    type: Object,
+    default: {
      xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
-      list:[
-        { name: "总数", value: [10,20,30,40,50,60,70] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
-        { name: "已处置", value: [10,20,30,40,50,60,70],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF'  },
+      list: [
+        { name: "总数", value: [10,20,30,40,50,60,70], color:['rgba(0,244,255,1)','rgba(0,77,167,1)'], hatColor:'#087df9'},
+        { name: "已处置", value: [10,20,30,40,50,60,70], color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'], hatColor:'#00FFFF'},
      ],
    }
+  },
+  // 新增：是否启用自动循环展示提示框
+  autoTooltip: {
+    type: Boolean,
+    default: true
+  },
+  // 新增：提示框循环间隔时间（毫秒）
+  tooltipInterval: {
+    type: Number,
+    default: 2000
+  },
+  // 新增：鼠标悬停时是否暂停循环
+  pauseOnHover: {
+    type: Boolean,
+    default: true
  }
 });

-watch(()=>props.data,val=>{
-  nextTick(()=>{ handleDate() })
-},{immediate:true,deep:true})
+// 响应式变量
+const myChart = ref(null);
+const tooltipTimer = ref(null);
+const currentTooltipIndex = ref(0);
+const isPaused = ref(false);
+
+watch(() => props.data, val => {
+  nextTick(() => { handleDate() })
+}, { immediate: true, deep: true })
+
+// 启动自动循环展示提示框
+function startAutoTooltip() {
+  // 详细的条件检查和日志
+  if (!props.autoTooltip) {
+    console.log('自动提示框未启动 - autoTooltip为false');
+    return;
+  }
+  
+  if (!props.data) {
+    console.warn('自动提示框未启动 - 缺少数据');
+    return;
+  }
+  
+  if (!props.data.xDate || props.data.xDate.length === 0) {
+    console.warn('自动提示框未启动 - xDate数据为空');
+    return;
+  }
+  
+  if (!props.data.list || props.data.list.length === 0) {
+    console.warn('自动提示框未启动 - list数据为空');
+    return;
+  }
+  
+  if (!myChart.value) {
+    console.warn('自动提示框未启动 - 图表实例不存在');
+    return;
+  }
+  
+  // 清除之前的定时器
+  stopAutoTooltip();
+  
+  const dataLength = props.data.xDate.length;
+  currentTooltipIndex.value = 0;
+  
+  console.log(`开始自动提示框循环 - 数据长度: ${dataLength}, 间隔: ${props.tooltipInterval}ms`);
+  console.log('数据预览:', {
+    xDate: props.data.xDate.slice(0, 3),
+    listCount: props.data.list.length,
+    firstSeriesName: props.data.list[0]?.name,
+    firstSeriesValueCount: props.data.list[0]?.value?.length
+  });
+  
+  tooltipTimer.value = setInterval(() => {
+    try {
+      // 检查图表实例是否仍然存在
+      if (!myChart.value) {
+        console.error('图表实例丢失，停止自动提示框');
+        stopAutoTooltip();
+        return;
+      }
+      
+      // 检查是否暂停
+      if (isPaused.value) {
+        console.log('提示框循环已暂停');
+        return;
+      }
+      
+      // 先隐藏当前提示框
+      myChart.value.dispatchAction({
+        type: 'hideTip'
+      });
+      
+      // 延迟一点时间再显示新的提示框，确保动画效果
+      setTimeout(() => {
+        if (myChart.value && !isPaused.value) {
+          try {
+            // 获取当前数据点信息
+            const currentData = props.data.xDate[currentTooltipIndex.value];
+            const currentValues = props.data.list.map(series => series.value[currentTooltipIndex.value]);
+            
+            // 验证数据有效性
+            if (currentData === undefined) {
+              console.error(`数据索引 ${currentTooltipIndex.value} 超出范围`);
+              stopAutoTooltip();
+              return;
+            }
+            
+            // 显示当前索引的提示框 - 使用第一个系列
+            myChart.value.dispatchAction({
+              type: 'showTip',
+              seriesIndex: 0,
+              dataIndex: currentTooltipIndex.value
+            });
+            
+            console.log(`✓ 显示提示框 [${currentTooltipIndex.value}/${dataLength-1}] - ${currentData}:`, currentValues);
+          } catch (error) {
+            console.error('显示提示框时出错:', error);
+            // 如果出错，尝试停止循环避免持续错误
+            stopAutoTooltip();
+          }
+        }
+      }, 100);
+      
+      // 更新索引，循环展示
+      currentTooltipIndex.value = (currentTooltipIndex.value + 1) % dataLength;
+    } catch (error) {
+      console.error('自动提示框循环出错:', error);
+      stopAutoTooltip();
+    }
+  }, props.tooltipInterval);
+  
+  console.log(`✓ 自动提示框已启动 - 间隔: ${props.tooltipInterval}ms, 数据长度: ${dataLength}`);
+}
+
+// 停止自动循环展示提示框
+function stopAutoTooltip() {
+  if (tooltipTimer.value) {
+    clearInterval(tooltipTimer.value);
+    tooltipTimer.value = null;
+    console.log('自动提示框已停止');
+  }
+}
+
+// 暂停自动循环
+function pauseAutoTooltip() {
+  isPaused.value = true;
+  console.log('自动提示框已暂停');
+}
+
+// 恢复自动循环
+function resumeAutoTooltip() {
+  isPaused.value = false;
+  console.log('自动提示框已恢复');
+}

 // 处理数据
 function handleDate() {
  let xDate = props.data.xDate;
-  let legend = props.data.list.map(v=>{return {name:v.name}})
-  let series = props.data.list.map((item,i)=>{
+  let legend = props.data.list.map(v => { return { name: v.name } })
+  let series = props.data.list.map((item, i) => {
    let obj = {
      name: item.name,
      type: "bar",
@ -38,15 +185,15 @@ function handleDate() {
      barWidth: "10px",
      itemStyle: {
        normal: {
-          color: new echarts.graphic.LinearGradient(0,0,0,1,[
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: item.color ? item.color[0] : "rgba(0,244,255,1)" },
-            { offset: 1,  color: item.color ? item.color[1] : "rgba(0,77,167,1)" }],false),
+            { offset: 1, color: item.color ? item.color[1] : "rgba(0,77,167,1)" }], false),
        }
      },
      markPoint: {
        symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
        symbolSize: [11, 4], // 设置扁圆的宽和高
-        itemStyle: { color: item.hatColor || '#087df9'   },// 圆盘颜色
+        itemStyle: { color: item.hatColor || '#087df9' },// 圆盘颜色
        data: item.value.map((obj, index) => ({
          xAxis: index, // 对应柱子的横坐标
          yAxis: obj + 0 // 柱子的值加上一些偏移量
@ -55,11 +202,11 @@ function handleDate() {
    }
    return obj
  })
-  lineChartFn(xDate,legend,series)
+  lineChartFn(xDate, legend, series)
 }

-function lineChartFn(xDate,legend,series) {
-  var myChart = echarts.init(document.getElementById(props.echartsId));
+function lineChartFn(xDate, legend, series) {
+  myChart.value = echarts.init(document.getElementById(props.echartsId));
  var option = {
    legend: {
      type: "plain",
@ -69,9 +216,59 @@ function lineChartFn(xDate,legend,series) {
      data: legend
    },
    tooltip: {
-      trigger: "axis",
-      axisPointer: {
-        type: "shadow"
+      trigger: "item",
+      backgroundColor: 'rgba(0, 0, 0, 0.9)',
+      borderColor: '#00d4ff',
+      borderWidth: 2,
+      borderRadius: 8,
+      textStyle: {
+        color: '#fff',
+        fontSize: 13,
+        fontWeight: 'normal'
+      },
+      formatter: function(params) {
+        // 获取当前数据点的所有系列信息
+        const dataIndex = params.dataIndex;
+        const categoryName = params.name;
+        
+        let result = `<div style="margin-bottom: 8px; font-weight: bold; color: #00d4ff; font-size: 14px; border-bottom: 1px solid #00d4ff; padding-bottom: 4px;">${categoryName}</div>`;
+        
+        // 遍历所有系列，显示该数据点的所有信息
+        if (props.data && props.data.list) {
+          props.data.list.forEach((seriesData, index) => {
+            const value = seriesData.value[dataIndex];
+            const color = seriesData.color ? seriesData.color[0] : '#00d4ff';
+            result += `<div style="margin: 4px 0; display: flex; align-items: center;">
+              <span style="display: inline-block; width: 12px; height: 12px; background: ${color}; border-radius: 50%; margin-right: 8px; border: 1px solid rgba(255,255,255,0.3);"></span>
+              <span style="color: #fff; margin-right: 8px; min-width: 60px;">${seriesData.name}:</span>
+              <span style="color: #00d4ff; font-weight: bold; font-size: 14px;">${value}</span>
+            </div>`;
+          });
+        }
+        
+        return result;
+      },
+      // 确保提示框能够正确显示
+      confine: true,
+      // 添加动画效果
+      transitionDuration: 0.2,
+      // 设置提示框位置
+      position: function (point, params, dom, rect, size) {
+        // 计算提示框位置，避免超出边界
+        let x = point[0] + 15;
+        let y = point[1] - 10;
+        
+        // 如果右侧空间不够，显示在左侧
+        if (x + size.contentSize[0] > size.viewSize[0]) {
+          x = point[0] - size.contentSize[0] - 15;
+        }
+        
+        // 如果上方空间不够，显示在下方
+        if (y < 0) {
+          y = point[1] + 20;
+        }
+        
+        return [x, y];
      }
    },
    grid: {
@ -120,13 +317,46 @@ function lineChartFn(xDate,legend,series) {
    ],
    series: series
  };
-  option && myChart.setOption(option);
-  window.onresize = function () { myChart.resize(); };
-  document.getElementById(props.echartsId).setAttribute("_echarts_instance_", "");
+  
+  option && myChart.value.setOption(option);
+  
+  // 添加鼠标事件监听
+  if (props.pauseOnHover) {
+    myChart.value.on('mouseover', () => {
+      pauseAutoTooltip();
+    });
+    
+    myChart.value.on('mouseout', () => {
+      resumeAutoTooltip();
+    });
+  }
+  
+  // 启动自动循环展示
+  if (props.autoTooltip) {
+    setTimeout(() => {
+      startAutoTooltip();
+    }, 1000); // 延迟1秒启动，确保图表完全渲染
+  }
+  
+  window.onresize = function () { 
+    if (myChart.value) {
+      myChart.value.resize(); 
+    }
+  };
 }
+
 onMounted(() => {
  lineChartFn();
 });
+
+// 组件卸载时清理定时器
+onUnmounted(() => {
+  stopAutoTooltip();
+  if (myChart.value) {
+    myChart.value.dispose();
+    myChart.value = null;
+  }
+});
 </script>

 <style lang="scss" scoped>
--- a/src/views/home/echarts/tooltipDemo.vue
+++ b/src/views/home/echarts/tooltipDemo.vue
@ -0,0 +1,171 @@
+<template>
+  <div class="tooltip-demo">
+    <div class="demo-header">
+      <h2>ECharts 提示框循环展示演示</h2>
+      <div class="controls">
+        <el-button @click="toggleAutoTooltip" :type="autoTooltip ? 'success' : 'info'">
+          {{ autoTooltip ? '停止循环' : '开始循环' }}
+        </el-button>
+        <el-button @click="changeInterval">
+          切换间隔 (当前: {{ tooltipInterval }}ms)
+        </el-button>
+        <el-button @click="changeData">
+          切换数据
+        </el-button>
+      </div>
+    </div>
+    
+    <div class="chart-container">
+      <BarHatEcharts 
+        :data="currentData"
+        :autoTooltip="autoTooltip"
+        :tooltipInterval="tooltipInterval"
+        :pauseOnHover="true"
+        echartsId="tooltipDemoChart"
+      />
+    </div>
+    
+    <div class="feature-description">
+      <h3>功能说明：</h3>
+      <ul>
+        <li>✅ <strong>自动循环展示</strong>：提示框会按设定间隔自动循环显示每个数据点的信息</li>
+        <li>✅ <strong>智能暂停</strong>：鼠标悬停在图表上时自动暂停循环，离开时恢复</li>
+        <li>✅ <strong>可配置间隔</strong>：支持自定义循环间隔时间（1秒、2秒、3秒）</li>
+        <li>✅ <strong>美观样式</strong>：深色主题提示框，蓝色边框，清晰的数据展示</li>
+        <li>✅ <strong>错误处理</strong>：完善的错误处理机制，确保稳定运行</li>
+        <li>✅ <strong>生命周期管理</strong>：组件卸载时自动清理定时器，防止内存泄漏</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import BarHatEcharts from './barHatEcharts.vue';
+
+const autoTooltip = ref(true);
+const tooltipInterval = ref(2000);
+
+const dataSet1 = {
+  xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
+  list: [
+    { name: "总数", value: [10,20,30,40,50,60,70], color:['rgba(0,244,255,1)','rgba(0,77,167,1)'], hatColor:'#087df9'},
+    { name: "已处置", value: [8,15,25,35,45,55,65], color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'], hatColor:'#00FFFF'},
+  ]
+};
+
+const dataSet2 = {
+  xDate: ['东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区'],
+  list: [
+    { name: "报警数量", value: [25,35,45,30,20,40], color:['rgba(255,99,132,1)','rgba(255,99,132,0.3)'], hatColor:'#ff6384'},
+    { name: "处理完成", value: [20,30,40,25,18,35], color:['rgba(54,162,235,1)','rgba(54,162,235,0.3)'], hatColor:'#36a2eb'},
+    { name: "待处理", value: [5,5,5,5,2,5], color:['rgba(255,206,86,1)','rgba(255,206,86,0.3)'], hatColor:'#ffce56'},
+  ]
+};
+
+const currentData = ref(dataSet1);
+
+function toggleAutoTooltip() {
+  autoTooltip.value = !autoTooltip.value;
+}
+
+function changeInterval() {
+  const intervals = [1000, 2000, 3000];
+  const currentIndex = intervals.indexOf(tooltipInterval.value);
+  const nextIndex = (currentIndex + 1) % intervals.length;
+  tooltipInterval.value = intervals[nextIndex];
+}
+
+function changeData() {
+  currentData.value = currentData.value === dataSet1 ? dataSet2 : dataSet1;
+}
+</script>
+
+<style lang="scss" scoped>
+.tooltip-demo {
+  padding: 20px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  min-height: 100vh;
+  color: #fff;
+}
+
+.demo-header {
+  margin-bottom: 30px;
+  text-align: center;
+  
+  h2 {
+    margin-bottom: 20px;
+    color: #00d4ff;
+    font-size: 28px;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+  }
+  
+  .controls {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    flex-wrap: wrap;
+  }
+}
+
+.chart-container {
+  height: 400px;
+  background: rgba(0,29,75,0.6);
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 30px;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+}
+
+.feature-description {
+  background: rgba(0,0,0,0.3);
+  padding: 20px;
+  border-radius: 8px;
+  border-left: 4px solid #00d4ff;
+  
+  h3 {
+    color: #00d4ff;
+    margin-bottom: 15px;
+    font-size: 20px;
+  }
+  
+  ul {
+    list-style: none;
+    padding: 0;
+    
+    li {
+      margin-bottom: 10px;
+      padding-left: 10px;
+      line-height: 1.6;
+      
+      strong {
+        color: #00d4ff;
+      }
+    }
+  }
+}
+
+:deep(.el-button) {
+  background: rgba(0,212,255,0.2);
+  border-color: #00d4ff;
+  color: #00d4ff;
+  
+  &:hover {
+    background: rgba(0,212,255,0.3);
+    border-color: #00d4ff;
+    color: #fff;
+  }
+  
+  &.el-button--success {
+    background: rgba(103,194,58,0.2);
+    border-color: #67c23a;
+    color: #67c23a;
+    
+    &:hover {
+      background: rgba(103,194,58,0.3);
+      border-color: #67c23a;
+      color: #fff;
+    }
+  }
+}
+</style>
--- a/src/views/home/model/qblyType.vue
+++ b/src/views/home/model/qblyType.vue
@ -3,7 +3,7 @@
    <span class="title">情报来源类型</span>
  </div> 
  <div class="comom-cnt">
-    <BarHatEcharts echartsId="qbltBox" :data="list"></BarHatEcharts>
+    <BarHatEcharts echartsId="qbltBox" :autoTooltip="true" :data="list"></BarHatEcharts>
  </div>
 </template>