fix: 图例显示

src/views/warningHome/components/chat_components/chat.json

@@ -25,22 +25,22 @@
         "content": "根据现有公开数据，2024年广东省各市稻谷播种面积的具体分市数据尚未发布。当前可查的2024年农业统计信息集中于全省层面，主要包含以下内容：全省稻谷播种面积：2024年广东省稻谷播种面积为2752.6万亩，同比增长0.4%，占全年粮食播种面积的82.1%。2024年广东省各市水稻播种数据需等待《2025年广东统计年鉴》发布（通常次年6月后），或关注广东省统计局后续公开的细分报告。"
     },
     {
-        "name": "当前高州的作物分布？",
+        "name": "当前高州的作物分布",
         "header": "1、飞鸟感知脑正在感知<br/>（1）要获取作物分布，首先需要调取当下遥感与无人机监测数据，以及历史气象数据，以及历史遥感无人机观测样本。<br/>（2）正在调取sentinel时序多光谱遥感数据。<br/>（3）正在调取近期地面低空飞巡观测监测数据。<br/>（4）正在调用“时空-作物“信息嵌入大气校正算法，减少遥感影像大气差异。<br/>（5）正在调用空天地一体作物物种生育期联合识别算法，结合遥感数据、历史气象数据以及实时观测的表型定量指标，联合预测地区物种物候期。<br/>2、飞鸟推理脑正在推理<br/>（1）正在分析感知数据结果，要分析作物分布，可以进一步推测分布物候期变化，需调取多源数据融合的生育期预测框架。<br/>（2）正在调取作物生育期的时序预测模型，需要通过历史数据分析种植因子。<br/>（3）正在读取近20年的气象数据和遥感数据，分析历史气象农情信息推断物候变化。<br/>（4）正在调取非线性概率回归方法，推测当前区域的作物生育期变化状态。<br/>（5）输入精细化气象参量，推理脑正在分析结果，将上述信息进行总结整理推送。",
         "content": "一、作物分布特征<br/>高州市的耕地作物以水稻、番薯、蔬菜为主，呈现规模化与机械化特点：其中水稻是核心作物，2025年高州市目标实现水稻耕种收综合机械化水平85%以上，且通过“公司+农户”模式扩大种植面积，例如石鼓镇已形成机械化育秧、插秧和收割的全链条生产。番薯和蔬菜也在种植结构中占重要地位，历史数据显示番薯产量持续稳定，蔬菜种植面积覆盖多镇。<br/>园地作物以荔枝、龙眼等热带水果为主，兼具经济与地域特色：荔枝种植标准化程度高，部分果园已实现机械剪枝与喷药作业，且通过现代农业产业园建设推动品种升级。龙眼作为传统经济作物，与荔枝形成互补，分散分布于丘陵地带。<br/>"
     },
     {
-        "name": "当前区域荔枝有什么生长风险？ ",
+        "name": "当前区域荔枝有什么生长风险？",
         "header": "1、飞鸟感知脑正在感知<br/>（1）正在读取当前区域基础地形信息，需要当前区域的温光湿环境信息。<br/>（2）正在调取NASA的SMAP卫星的L波段微波辐射计数据，读取土壤水分信息。<br/>（3）正在调取Landsat卫星的OLI传感器和TIRS传感器数据，读取地表温度信息<br/>（4）正在调取Terra和Aqua卫星上的MODIS中分辨率成像光谱仪数据，基于辐射传输模型计算地表太阳辐射信息。<br/>（5）正在调取过去30天与未来14天预报的气象数据。<br/>（6）基于时空气象降尺度技术，开始气象因子降尺度感知计算<br/>2、飞鸟推理脑正在推理<br/>（1）正在分析当前区域的作物信息，和地块环境基础信息。<br/>（2）需要通过历史数据分析种植风险，正在读取近20年的气象数据和遥感数据<br/>（3）正在读取低空飞巡物候信息感知数据，当前区域大部分农户处于花穗伸长期。<br/>（4）正在调取专家20年作物风险胁迫定量反演模型，当前时期易发生爆花风险。<br/>（5）输入精细化气象参量，推理脑正在分析结果，结果表明未来一周内爆花风险概率将上升达52%，需要提醒农户及时控花。<br/>（6）最后将上述信息进行总结整理，推送给农户。",
         "content": "当前区域位于广东省湛江市廉江市<br/>一、荔枝当前物候期<br/>廉江属热带季风气候，冬季温暖，荔枝花期通常为2-4月，当前为2025年2月中旬，廉江荔枝应处于花芽分化末期至开花初期。<br/>二、气象数据分析<br/>1. 过去30天天气<br/>气温：廉江市冬季气温波动较大，平均气温15-23℃，最低温降至8-10℃，最高温可达25-28℃（晴暖天气）。昼夜温差10-15℃，可能对荔枝花芽分化造成压力。<br/>降水：总降水量偏少，以零星小雨为主（累计约20-40mm），部分区域出现阶段性干旱。1月底至2月初受冷空气影响，伴随短暂阴雨。<br/>其他：北风或东北风为主，风力3-4级，湿度50-70%。<br/>2.未来14天预测（2025年2月16日-3月2日）<br/>未来14天的气温将逐渐升高，降水量相对较少。<br/>三、风险分析<br/>过去30天气温波动较大，但整体温度较高，叠加未来14天温度整体升高，存在干旱风险，极易造成荔枝花芽分化过旺，引发爆花现象。"
     },
     {
-        "name": "当前区域哪些有荔枝地块有病虫害 ",
+        "name": "当前区域哪些有荔枝地块有病虫害",
         "header": "1、飞鸟推理脑正在推理<br/>（1）感知数据已获获取，正在分析当前区域荔枝作物信息，基础地形信息，需要当前区域的温光湿环境信息。<br/>（2）需要通过历史数据分析病虫风险，正在读取近20年的气象数据和遥感数据<br/>（3）正在读取低空飞巡病虫害信息感知数据。<br/>（4）还需要进一步分析作物的病虫风险以及发展趋势<br/>（5）正在逐地块并行读取附近3km低空飞巡物候信息感知数据，正在调取专家作物病虫风险扩散预报模型。<br/>（6）输入精细化气象参量，推理脑正在分析结果，结果表明未来一周内病虫风险概率将上升达71%，需要提醒农户及时防治。<br/>（7）最后将上述信息进行总结整理，推送给农户。",
         "content": "根据近期对荔枝病虫害的监测和预报，预计未来一周内，荔枝部分地块的病虫害风险概率将上升至71%。主要病害包括霜疫霉病和炭疽病，主要虫害包括荔枝蒂蛀虫、荔枝蝽等。 为有效防控，建议加强田间巡查，及时发现并处理病虫害，合理使用农药，并结合物理和生物防治措施，确保荔枝的健康生长。"
     },
     {
-        "name": "现在哪些地方有农情需求 ",
+        "name": "现在哪些地方有农情需求",
         "header": "1、飞鸟感知脑正在感知<br/>（1）历史服务数据调取，正在读取当前的农情服务记录，包括已接单和未接单的需求。<br/>（2）实时数据获取，正在调取当前区域的作物生长状态、气象数据、土壤条件等信息。<br/>（3）用户反馈分析，正在分析农户的反馈和需求，融合农户主动申报数据，卫星遥感数据，识别当前最迫切的农情问题。<br/>2、飞鸟推理脑正在推理<br/>（1）需求类型识别，基于历史数据和实时信息，识别出当前主要的农情需求类型，如病虫害防治、灌溉需求、施肥建议等。<br/>（2）风险预测，正在使用机器学习模型预测未来一周内可能出现的农情风险，如爆花风险、病虫害爆发等。<br/>（3）需求区域定位：根据风险预测结果，定位出未来可能需求较高的区域，调用时空图卷积网络，以地块为节点构建农业风险传播图谱，预测需求扩散路径。<br/>（4）服务能力评估：评估当前的服务能力，Voronoi图空间分割动态划分服务优先级区域，结合路网数据计算最优路径，确定哪些需求可以立即响应，哪些需要进一步资源调配。",
         "content": "当前区域大部分地方无农情需求，少数地方有需求未接单或有需求已接单。但随着未来一段时间的气温逐步上升，生长风险和病虫害风险概率增加，有需求但未接单的地方会急剧上升，将近半数。"
     },

src/views/warningHome/components/chat_components/index.vue

@@ -6,7 +6,7 @@
                 <div v-for="(msg, index) in messages" :key="index" class="message" :class="msg.type">
                     <div v-if="msg.type === 'user'" class="bubble">{{ msg.text }}</div>
                     <div v-if="msg.type === 'system'" class="bubble answer">
-                        <div class="think" v-if="!msg.text.name">
+                        <div class="think">
                             思考中<el-icon><ArrowDown /></el-icon>
                         </div>
                         <div class="header" v-html="msg.text.header" :class="{'main-text': !msg.text.content}"></div>
@@ -25,11 +25,11 @@
                         <div class="table-wrap" v-if="msg.text.name === '花期统防统治报表，有没有与农资对接' && msg.loadEnd">
                             <el-table :data="tableData2" border style="width: 100%">
                                 <el-table-column prop="name" label="企业名称" />
-                                <el-table-column prop="area" label="覆盖范围" />
-                                <el-table-column prop="step" label="完成进度" />
-                                <el-table-column prop="rate" label="系统/信用评分" />
-                                <el-table-column prop="farmRate" label="农户评价" />
-                                <el-table-column prop="result" label="成效" />
+                                <el-table-column prop="area" label="覆盖范围" show-overflow-tooltip />
+                                <el-table-column prop="step" label="完成进度" show-overflow-tooltip />
+                                <el-table-column prop="rate" label="系统/信用评分" show-overflow-tooltip />
+                                <el-table-column prop="farmRate" label="农户评价" show-overflow-tooltip />
+                                <el-table-column prop="result" label="成效" show-overflow-tooltip />
                             </el-table>
                         </div>
                     </div>
@@ -64,7 +64,7 @@
                         <div class="bubble">
                             <div class="ask-title">你可以试着问我</div>
                             <div class="ask-list">
-                                <div class="to-map" v-for="(ask, askI) in msg.text.content" :key="askI" @click="toMapLayer(msg.text.header)">
+                                <div class="to-map" v-for="(ask, askI) in msg.text.content" :key="askI" @click="toMapLayer(ask)">
                                     <li>
                                         {{ ask }}
                                     </li>
@@ -160,32 +160,48 @@ const steps = [
     {
         type: "ask",
         text: {
-            askHeader: "当前高州的作物分布？",
-            askContent: ["当前高州的作物分布？",],
+            askHeader: "当前高州的作物分布",
+            askContent: ["当前高州的作物分布",],
+        },
+        loadEnd: false
+    },
+    {
+        type: "ask",
+        text: {
+            askHeader: "当前区域荔枝有什么生长风险？",
+            askContent: ["当前区域荔枝有什么生长风险？"],
+        },
+        loadEnd: false
+    },
+    {
+        type: "ask",
+        text: {
+            askHeader: "当前区域哪些有荔枝地块有病虫害",
+            askContent: ["当前区域哪些有荔枝地块有病虫害"],
         },
         loadEnd: false
     },
     {
         type: "ask",
         text: {
-            askHeader: "2024年3月广东省各市的早稻播种率",
-            askContent: ["2024年3月广东省各市的早稻播种率", "2222"],
+            askHeader: "现在哪些地方有农情需求",
+            askContent: ["现在哪些地方有农情需求"],
         },
         loadEnd: false
     },
     {
         type: "ask",
         text: {
-            askHeader: "统计2024年广东省洪灾涝渍区域",
-            askContent: ["统计2024年广东省洪灾涝渍区域", "333"],
+            askHeader: "哪些地方有植保机",
+            askContent: ["哪些地方有植保机"],
         },
         loadEnd: false
     },
     {
         type: "ask",
         text: {
-            askHeader: "附近10KM范围有4台植保机：",
-            askContent: ["哪些地方有植保机", "4444"],
+            askHeader: "花期统防统治报表，有没有与农资对接",
+            askContent: ["花期统防统治报表，有没有与农资对接"],
         },
         loadEnd: false
     },
@@ -200,7 +216,7 @@ const triggerNextStep = () => {
             steps[stepIndex.value].text,
             () => {
                 isProcessing.value = false;
-                steps[stepIndex.value].loadEnd = true
+                // steps[stepIndex.value].loadEnd = true
             }
         );
         stepIndex.value++;
@@ -229,9 +245,10 @@ const loadState = () => {
 
 const toMapLayer = (name) => {
     eventBus.emit("chat:showMapLayer", name)
-    addSystemReply('system', {header: name, content: '', name}, () => {
-        steps[stepIndex.value].loadEnd = true
-    });
+    askText(name)
+    // addSystemReply('system', {header: name, content: '', name}, () => {
+    //     steps[stepIndex.value].loadEnd = true
+    // });
 }
 
 const askText = (val) => {
@@ -262,7 +279,8 @@ const sendMessage = () => {
     chat.map((item) => {
         if (userText.indexOf(item.name) !== -1) {
             addSystemReply('system', {header: item.header, content: item.content, name: item.name}, () => {
-                steps[stepIndex.value].loadEnd = true
+                // steps[stepIndex.value].loadEnd = true
+                messages.value[messages.value.length - 1].loadEnd = true
                 setTimeout(triggerNextStep, 2000);
             });
             isSearch = false;
@@ -329,7 +347,7 @@ const addSystemReply = (type = "system", textObject, callback) => {
                     scrollToBottom();
                     callback && callback(); // 回复完成后解锁输入
                 }
-            }, 50);
+            }, 5);
         } else {
             callback && callback(); // 如果 content 为空，直接解锁输入
         }
@@ -465,6 +483,8 @@ const scrollToBottom = () => {
 }
 .table-wrap {
     padding-top: 12px;
+    width: 100%;
+    overflow: auto;
     ::v-deep {
         .el-table .el-table__header th.el-table__cell {
             background: #3B3B3B !important;
@@ -546,6 +566,8 @@ const scrollToBottom = () => {
 }
 .bubble {
     padding: 16px 12px;
+    box-sizing: border-box;
+    max-width: 100%;
     border-radius: 8px;
     // max-width: 60%;
     background: rgba(255, 212, 137, 0.1);

src/views/warningHome/index.vue

@@ -54,9 +54,12 @@
                 <chat></chat>
 
                 <!-- 地图图例 -->
-                <div class="map-legend" v-if="legendImg">
+                <div class="map-legend" v-if="legendImg && hideChatMapLayer">
                     <img :src="legendImg" />
                 </div>
+                <div class="map-legend chat-legend" v-if="!hideChatMapLayer">
+                    <StaticMapLegend></StaticMapLegend>
+                </div>
             </div>
             <div class="warning-search yes-events">
                 <img src="@/assets/images/warningHome/search-img.png" />
@@ -94,6 +97,7 @@
 <script setup>
 import "./map/mockFarmLayer";
 import StaticMapLayers from "@/components/static_map_change/Layers.js"
+import StaticMapLegend from "@/components/static_map_change/legend.vue"
 import { onMounted, ref } from "vue";
 import fnHeader from "@/components/fnHeader.vue";
 import WarningMap from "./warningMap";
@@ -152,7 +156,7 @@ const handleMapLayer = (name) => {
     hideChatMapLayer.value = false
     console.log('name', name);
     // staticMapLayers.show("干旱缺水")
-    staticMapLayers.show("testpng")
+    staticMapLayers.show("爆花态势0")
 }
 
 const toggleChatMapLayer = () => {
@@ -236,6 +240,9 @@ const toggleBox = (name) => {
                     opacity: 0.6;
                 }
             }
+            .chat-legend {
+                bottom: -12px;
+            }
         }
         .warning-search {
             position: absolute;