lcw

src/views/home/components/deployControlItem.vue

@@ -1,7 +1,17 @@
 <template>
   <div class="warning-card ">
     <div class="warning-image flex">
-      <img :src="item.yjTp" width="65" height="70" />
+      <el-image style="width: 65px; height: 70px"  :src="item.yjTp" :preview-src-list="[item.yjTp]" show-progress>
+      <template #error>
+        <div class="image-slot error">
+          <img src="@/assets/images/car.png" width="65" height="70" v-if="item.yjLx == 2"/>
+          <img src="@/assets/images/default_male.png" width="65" height="70" v-else/>
+        </div>
+      </template>
+    </el-image>
+
+
+
       <div class="ml10 warning-info">
         <div class="flex just-between align-center">
           <div class="flex align-center mt4" v-if="item.yjLx == 2">
@@ -71,7 +81,7 @@ const changeBG = (str) => {
   box-sizing: border-box;
 
   .warning-image {
-    // 
+    //
     // width: 80px;
     // height: 100px;
 
@@ -84,7 +94,7 @@ const changeBG = (str) => {
 
   .warning-info {
     flex: 1;
- 
+
     .tag {
       padding: 1px 6px;
       background: #0072FF;
@@ -98,6 +108,27 @@ const changeBG = (str) => {
       background: #e9e9e9;
     }
   }
+
+  // 图片错误状态样式
+  .image-slot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+  }
+
+  // 主图错误和预览图错误的样式
+  .image-slot.error,
+  .image-slot.viewer-error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
   .warning-boder{
     border-bottom: 2px dashed  #0958b2;
   }

src/views/home/components/yjItem.vue

@@ -1,7 +1,15 @@
 <template>
   <div class="warning-card flex align-center" :class="changeBG(item.yjJb)">
     <div class="warning-image">
-      <img :src="item.yjTp" width="80" height="120" alt="" />
+      <el-image style="width: 80px; height:120px"  :src="item.yjTp" :preview-src-list="[item.yjTp]" show-progress>
+      <template #error>
+        <div class="image-slot error">
+          <img src="@/assets/images/car.png" width="65" height="70" v-if="item.yjLx == 2"/>
+          <img src="@/assets/images/default_male.png" width="65" height="70" v-else/>
+        </div>
+      </template>
+    </el-image>
+      <!-- <img :src="item.yjTp" width="80" height="120" alt="" /> -->
     </div>
     <div class="warning-info">
       <div class="flex just-between align-center">

src/views/home/echarts/barHatEcharts.vue

@@ -54,33 +54,33 @@ function startAutoTooltip() {
   if (!props.autoTooltip) {
     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),
@@ -88,7 +88,7 @@ function startAutoTooltip() {
   //   firstSeriesName: props.data.list[0]?.name,
   //   firstSeriesValueCount: props.data.list[0]?.value?.length
   // });
-  
+
   tooltipTimer.value = setInterval(() => {
     try {
       // 检查图表实例是否仍然存在
@@ -97,18 +97,18 @@ function startAutoTooltip() {
         stopAutoTooltip();
         return;
       }
-      
+
       // 检查是否暂停
       if (isPaused.value) {
         // console.log('提示框循环已暂停');
         return;
       }
-      
+
       // 先隐藏当前提示框
       myChart.value.dispatchAction({
         type: 'hideTip'
       });
-      
+
       // 延迟一点时间再显示新的提示框，确保动画效果
       setTimeout(() => {
         if (myChart.value && !isPaused.value) {
@@ -116,21 +116,21 @@ function startAutoTooltip() {
             // 获取当前数据点信息
             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);
@@ -139,7 +139,7 @@ function startAutoTooltip() {
           }
         }
       }, 100);
-      
+
       // 更新索引，循环展示
       currentTooltipIndex.value = (currentTooltipIndex.value + 1) % dataLength;
     } catch (error) {
@@ -147,7 +147,7 @@ function startAutoTooltip() {
       stopAutoTooltip();
     }
   }, props.tooltipInterval);
-  
+
   // console.log(`✓ 自动提示框已启动 - 间隔: ${props.tooltipInterval}ms, 数据长度: ${dataLength}`);
 }
 
@@ -229,22 +229,23 @@ function lineChartFn(xDate, legend, series) {
         // 获取当前数据点的所有系列信息
         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="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;">${categoryName}:</span>
               <span style="color: #00d4ff; font-weight: bold; font-size: 14px;">${value}</span>
             </div>`;
           });
         }
-        
+
         return result;
       },
       // 确保提示框能够正确显示
@@ -256,17 +257,17 @@ function lineChartFn(xDate, legend, series) {
         // 计算提示框位置，避免超出边界
         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];
       }
     },
@@ -316,30 +317,30 @@ function lineChartFn(xDate, legend, series) {
     ],
     series: series
   };
-  
+
   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 () { 
+
+  window.onresize = function () {
     if (myChart.value) {
-      myChart.value.resize(); 
+      myChart.value.resize();
     }
   };
 }

src/views/home/layout/head.vue

@@ -85,7 +85,7 @@
         </div>
       </ul>
     </div>
-    
+
   </div>
 </template>
 
@@ -131,7 +131,7 @@ const router = useRouter();
 const route = useRoute();
 const btns = reactive({
   rightBtn: ["四色预警", "重点人群"],
-  leftBtn: ["预警布控",'研判首页'],
+  leftBtn: ["智能布控",'研判首页'],
   moreBtn:['退出登录',]
 });
 const btnsActive = ref("");
@@ -159,8 +159,8 @@ const handleBtns = (val) => {
   btnsActive.value = val;
 
   switch (val) {
-    case "预警布控":
-      router.push("/warningControl");
+    case "智能布控":
+      router.push("/DeploymentArea");
       break;
     case "四色预警":
       router.push("/IdentityManage");
@@ -172,8 +172,9 @@ const handleBtns = (val) => {
       router.push("/editPassword");
       break;
     case "重点人群":
-      const NPShref = router.resolve({ path: '/KeyPopulations', query: {}});
-      window.open(NPShref.href, "_blank");
+    router.push("/mpvPeo");
+      // const NPShref = router.resolve({ path: '/KeyPopulations', query: {}});
+      // window.open(NPShref.href, "_blank");
       break;
     case "退出登录":
       window.opener = null;

src/views/home/model/deployControl.vue

@@ -44,6 +44,7 @@ onMounted(()=>{
 })
 onUnmounted(() => {
   if (intervalId.value) clearInterval(intervalId.value)// 清理定时器
+  stopAutoScroll()
 })
 // 自动滚动
 const autoScroll = () => {