baise-pc-vue/src/views/warningHome/components/chat_components/index.vue

<template>
    <div class="chat-page">
        <div class="chat-wrap">
            <div class="chat-title">飞鸟种植大脑</div>
            <div class="chat-box" ref="chatBox">
                <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">
                            思考中<el-icon><ArrowDown /></el-icon>
                        </div>
                        <div class="header" v-html="msg.text.header" :class="{ 'main-text': !msg.text.content }"></div>
                        <div class="divider" v-if="msg.text.content"></div>
                        <div class="content" v-html="msg.text.content"></div>
                        <div
                            class="table-wrap"
                            v-if="msg.text.name === '2024年广东省各市的稻谷播种面积？' && msg.loadEnd"
                        >
                            <el-table :data="tableData" border style="width: 100%">
                                <el-table-column prop="city" label="市" width="100" />
                                <el-table-column prop="area" label="2024年稻谷播种面积">
                                    <template #default="scope"> {{ scope.row.area }}亩 </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <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="覆盖范围" 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>
                        </div>
                        <div class="table-wrap" v-if="msg.text.name === '当前高州的作物分布和物候期？' && msg.loadEnd">
                            <el-table :data="tableData3" border style="width: 100%">
                                <el-table-column prop="name" label="农作物类型" />
                                <el-table-column prop="area" label="播种面积（亩）">
                                    <template #default="scope"> {{ scope.row.area }}亩 </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <div v-if="msg.type === 'real'" class="bubble answer">
                        <div class="think" v-if="!msg.text.name">
                            思考中<el-icon><ArrowDown /></el-icon>
                        </div>
                        <div class="header" v-html="deepSeekAsk.markdownToHtml(msg.text.header)"></div>
                        <div class="divider"></div>
                        <div class="content" v-html="deepSeekAsk.markdownToHtml(msg.text.content)"></div>
                    </div>

                    <div v-if="msg.type === 'auto'" class="system auto">
                        <div class="bubble">
                            {{ msg.text.header }}
                            <div>
                                <div class="ask-title">你可以试着问我</div>
                                <div class="ask-list">
                                    <li
                                        class="ask-item cursor-pointer"
                                        @click="toMapLayer(askQues.text.askContent[0], askQues.text)"
                                    >
                                        当前区域八角有什么生长风险？
                                    </li>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 猜你想问 -->
                    <div v-if="msg.type === 'ask'" class="system ask">
                        <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(ask, msg.text)"
                                >
                                    <li>
                                        {{ ask }}
                                    </li>
                                    <div class="go-icon">
                                        <el-icon><ArrowRight /></el-icon>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom-send">
                <div class="input-box">
                    <el-input
                        v-model="userInput"
                        :autosize="{ minRows: 2, maxRows: 8 }"
                        type="textarea"
                        placeholder="给 飞鸟种植大脑 提问吧~"
                        @keyup.enter="sendMessage"
                    />
                    <div class="bottom-group">
                        <div class="btn-l">
                            <div class="l-item">
                                <img src="@/assets/images/warningHome/chat/think.png" />
                                深度思考(R1)
                            </div>
                            <div class="l-item">
                                <img src="@/assets/images/warningHome/chat/net.png" />
                                联网搜索
                            </div>
                        </div>
                        <div class="btn-r">
                            <img class="file-icon" src="@/assets/images/warningHome/chat/file.png" />
                            <img
                                class="send-icon"
                                @click="sendMessage"
                                src="@/assets/images/warningHome/chat/send.png"
                                alt="send"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { nextTick, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import chat from "./chat.json";
import DeepSeekAsk from "./deepSeekAsk";
import { useStore } from "vuex";
import eventBus from "@/api/eventBus";
const store = useStore();

let userId = 12321;
let deepSeekAsk = new DeepSeekAsk(userId);

const router = useRouter();

const userInput = ref("");
const messages = ref([]);

const isProcessing = ref(false); // 控制是否在处理消息

const tableData = ref([
    { city: "广州", area: 360091 },
    { city: "深圳", area: 14726 },
    { city: "珠海", area: 66670 },
    { city: "汕头", area: 690567 },
    { city: "佛山", area: 104095 },
    { city: "韶关", area: 1534904 },
    { city: "河源", area: 1836469 },
    { city: "梅州", area: 2428360 },
    { city: "惠州", area: 1275493 },
    { city: "汕尾", area: 1033786 },
    { city: "东莞", area: 24106 },
    { city: "中山", area: 37709 },
    { city: "江门", area: 2523802 },
    { city: "阳江", area: 1604316 },
    { city: "湛江", area: 3357751 },
    { city: "茂名", area: 3151002 },
    { city: "肇庆", area: 2521029 },
    { city: "清远", area: 1832838 },
    { city: "潮州", area: 481617 },
    { city: "揭阳", area: 1217258 },
    { city: "云浮", area: 1317616 },
]);

const tableData2 = ref([
    {
        name: "天*股份",
        area: "广东省及周边省份，100家配送中心",
        step: "此次花期统防统治接收任务28个，完成进度64%。",
        rate: "90分",
        farmRate: "89分",
    },
    {
        name: "大*农业",
        area: "广东省及周边省份",
        step: "此次花期统防统治接收任务17个，完成进度80%。",
        rate: "95分",
        farmRate: "92分",
    },
    {
        name: "美*公司",
        area: "广东省及周边省份",
        step: "此次花期统防统治接收任务13个，完成进度59%。",
        rate: "89分",
        farmRate: "90分",
    },
    {
        name: "盛*农业",
        area: "广东省、广西省，50家配送中心",
        step: "此次花期统防统治接收任务25个，完成进度72%",
        rate: "91分",
        farmRate: "88分",
    },
    {
        name: "宝*公司",
        area: "广东省及周边省份",
        step: "此次花期统防统治接收任务20个，完成进度67%",
        rate: "90分",
        farmRate: "92分",
    },
    {
        name: "优*农业",
        area: "广东省、福建省，30家配送中心",
        step: "此次花期统防统治接收任务15个，完成进度85%",
        rate: "94分",
        farmRate: "93分",
    },
    {
        name: "新*科技",
        area: "广东省及周边省份",
        step: "此次花期统防统治接收任务18个，完成进度70%",
        rate: "87分",
        farmRate: "86分",
    },
    {
        name: "海*农资",
        area: "广东省及周边省份",
        step: "此次花期统防统治接收任务21个，完成进度91%",
        rate: "96分",
        farmRate: "94分",
    },
    {
        name: "丰*公司",
        area: "广东省、海南省",
        step: "此次花期统防统治接收任务20个，完成进度68%",
        rate: "88分",
        farmRate: "85分",
    },
    {
        name: "绿*农业",
        area: "广东省、广西省，70家配送中心",
        step: "此次花期统防统治接收任务30个，完成进度75%",
        rate: "91分",
        farmRate: "93分",
    },
    {
        name: "亮*集团",
        area: "广东省、云南省 ",
        step: "此次花期统防统治接收任务16个，完成进度70%",
        rate: "91分",
        farmRate: "89分",
    },
]);

const tableData3 = ref([
    { name: "水稻", area: "839884" },
    { name: "玉米", area: "16079" },
    { name: "番薯", area: "39467" },
    { name: "花生", area: "121093" },
    { name: "中草药材", area: "72357" },
    { name: "蔬菜", area: "407695" },
    { name: "荔枝", area: "590322" },
    { name: "龙眼", area: "324390" },
    { name: "香蕉", area: "258688" },
    { name: "柚子", area: "14527" },
    { name: "黄皮", area: "48020" },
]);

const askQues = {
    type: "ask",
    text: {
        mapName: "分散种植",
        askHeader: "当前区域八角有什么生长风险？",
        askContent: ["当前区域八角有什么生长风险？"],
    },
};
const steps = [
    { type: "auto", text: { header: "您好，飞鸟智慧种植大脑是您的私人管家" } },
    // {
    //     type: "ask",
    //     text: {
    //         mapName: "分散种植",
    //         askHeader: "当前区域八角有什么生长风险？",
    //         askContent: ["当前区域八角有什么生长风险？",],
    //     },
    // },
    {
        type: "ask",
        text: {
            mapName: "病虫态势",
            askHeader: "当前八角区域有哪些地块病虫害风险较高",
            askContent: ["当前八角区域有哪些地块病虫害风险较高"],
        },
    },
    {
        type: "ask",
        text: {
            mapName: "病虫态势",
            askHeader: "当前区域哪些有荔枝地块病虫害风险较高",
            askContent: ["当前区域哪些有荔枝地块病虫害风险较高"],
        },
    },
    {
        type: "ask",
        text: {
            mapName: "农情需求",
            askHeader: "现在哪些地方有农情需求",
            askContent: ["现在哪些地方有农情需求"],
        },
    },
    {
        type: "ask",
        text: {
            mapName: "植保机",
            askHeader: "哪些地方有植保机",
            askContent: ["哪些地方有植保机"],
        },
    },
    {
        type: "ask",
        text: {
            mapName: "",
            askHeader: "花期统防统治报表，有没有与农资对接",
            askContent: ["花期统防统治报表，有没有与农资对接"],
        },
    },
];

const stepIndex = ref(0);
const triggerNextStep = () => {
    if (stepIndex.value < steps.length) {
        addSystemReply(steps[stepIndex.value].type, steps[stepIndex.value].text, () => {
            isProcessing.value = false;
            // steps[stepIndex.value].loadEnd = true
        });
        stepIndex.value++;
        saveState();
        scrollToBottom();
    }
};

const loadState = () => {
    const storedMessages = localStorage.getItem(STORAGE_KEY);
    const storedDate = localStorage.getItem(DATE_KEY);
    const storedStep = localStorage.getItem(STEP_KEY);
    const today = new Date().toISOString().split("T")[0];

    if (storedDate === today && storedMessages) {
        messages.value = JSON.parse(storedMessages);
        stepIndex.value = storedStep ? parseInt(storedStep, 10) : 0;
        nextTick(() => scrollToBottom());
    } else {
        localStorage.removeItem(STORAGE_KEY);
        localStorage.removeItem(DATE_KEY);
        localStorage.removeItem(STEP_KEY);
        stepIndex.value = 0;
    }
};

const toMapLayer = (name, text) => {
    askText(name);
    eventBus.emit("chat:showMapLayer", { name, mapName: text.mapName });
    // addSystemReply('system', {header: name, content: '', name}, () => {
    //     steps[stepIndex.value].loadEnd = true
    // });
};

const askText = (val) => {
    userInput.value = val;
    sendMessage();
};

const sendMessage = () => {
    if (!userInput.value.trim()) return;

    // 先保存用户输入的内容
    const userText = userInput.value;
    // 添加用户消息
    messages.value.push({ text: userInput.value, type: "user" });

    saveMessages();
    scrollToBottom();

    // 模拟系统回复
    // setTimeout(() => {
    //     messages.value.push({ text: "系统回复: " + userText, type: "system" });
    // }, 500);

    // 模拟 AI 逐字回复
    let isSearch = true;
    console.log("userText", userText);
    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
                messages.value[messages.value.length - 1].loadEnd = true;
                setTimeout(triggerNextStep, 2000);
            });
            isSearch = false;
        }
    });

    if (isSearch) {
        messages.value.push({ type: "real", text: { header: "", content: "" } });
        deepSeekAsk.ask(userText, function (code) {
            if (code == 0) {
                let intervalId = setInterval(() => {
                    if (deepSeekAsk.end) {
                        clearInterval(intervalId);
                    }
                    for (let content of deepSeekAsk.contents) {
                        console.log(content.content);
                        messages.value[messages.value.length - 1].text.content = content.content;
                        messages.value[messages.value.length - 1].text.header = content.header;
                        scrollToBottom();
                        saveMessages();
                    }
                }, 1000);
            }
        });
    }
    // 清空输入框
    userInput.value = "";
};

// **逐字显示系统回复（header 和 content）**
const addSystemReply = (type = "system", textObject, callback) => {
    isProcessing.value = true;
    let currentHeader = "";
    let currentContent = "";
    if (type === "ask") {
        messages.value.push({
            text: { header: textObject.askHeader, content: textObject.askContent, mapName: textObject.mapName },
            type,
        });
    } else {
        messages.value.push({ text: { header: currentHeader, content: currentContent, name: textObject.name }, type });
    }
    saveMessages();
    scrollToBottom();

    const content = textObject.content;
    const header = textObject.header;

    // **逐字显示 content**
    const showContent = () => {
        let contentIndex = 0;
        if (content && content.length > 0) {
            const contentInterval = setInterval(() => {
                if (contentIndex < content.length) {
                    currentContent += content[contentIndex];
                    if (type !== "ask") {
                        messages.value[messages.value.length - 1].text.content = currentContent;
                    }
                    saveMessages();
                    scrollToBottom();
                    contentIndex++;
                } else {
                    clearInterval(contentInterval);
                    messages.value[messages.value.length - 1].loadEnd = true;
                    scrollToBottom();
                    callback && callback(); // 回复完成后解锁输入
                }
            }, 100);
        } else {
            callback && callback(); // 如果 content 为空，直接解锁输入
        }
    };

    let headerIndex = 0;
    if (header && header.length > 0) {
        const headerInterval = setInterval(() => {
            if (headerIndex < header.length) {
                currentHeader += header[headerIndex];
                messages.value[messages.value.length - 1].text.header = currentHeader;
                saveMessages();
                scrollToBottom();
                headerIndex++;
            } else {
                clearInterval(headerInterval);
                showContent();
            }
        }, 100); // 50ms 逐字显示 header
    } else {
        showContent();
    }
};
const saveState = () => {
    const today = new Date().toISOString().split("T")[0];
    localStorage.setItem(STORAGE_KEY, JSON.stringify(messages.value));
    localStorage.setItem(DATE_KEY, today);
    localStorage.setItem(STEP_KEY, stepIndex.value);
};

// **存入缓存**
const STORAGE_KEY = "chatMessages";
const DATE_KEY = "chatDate";
const STEP_KEY = "chatStep";
const saveMessages = () => {
    const today = new Date().toISOString().split("T")[0]; // 仅保存 "YYYY-MM-DD"
    localStorage.setItem(STORAGE_KEY, JSON.stringify(messages.value));
    localStorage.setItem(DATE_KEY, today);
};

// **恢复缓存**
const loadMessages = () => {
    const storedMessages = localStorage.getItem(STORAGE_KEY);
    const storedDate = localStorage.getItem(DATE_KEY);
    const today = new Date().toISOString().split("T")[0]; // 获取今天的日期

    if (storedDate === today && storedMessages) {
        messages.value = JSON.parse(storedMessages);
    } else {
        // 清除过期数据
        localStorage.removeItem(STORAGE_KEY);
        localStorage.removeItem(DATE_KEY);
    }
};

// 路由跳转
const toOtherPage = (val) => {
    router.push(val);
};

const chatBox = ref();
onMounted(() => {
    // loadMessages()
    // scrollToBottom()
    loadState();
    nextTick(() => {
        setTimeout(triggerNextStep, 1000);
    });
    // setTimeout(() => {
    //     chatBox.value.scrollTo({top: chatBox.value.scrollHeight, behavior: 'smooth' }); // 滚动到页面顶部
    // }, 200)
});

eventBus.on("chat:hideMapLayer", () => {
    // setTimeout(triggerNextStep, 2000);
});

// **滚动到底部**
const scrollToBottom = () => {
    nextTick(() => {
        if (chatBox.value) {
            chatBox.value.scrollTo({ top: chatBox.value.scrollHeight, behavior: "smooth" }); // 滚动到页面底部
        }
    });
};
</script>

<style lang="scss" scoped>
.chat-page {
    height: 100%;
    padding-top: 34px;
    box-sizing: border-box;
    .chat-wrap {
        height: 100%;
        background: #232323;
        border-radius: 8px;
        border: 1px solid #777777;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
        .chat-title {
            border-radius: 8px 8px 0 0;
            background: #2f2f2f;
            text-align: center;
            padding: 10px 0;
        }
    }
}
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
}
.chat-box {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}
.message {
    display: flex;
    margin: 10px 0;
    .avatar {
        width: 28px;
        height: 28px;
        margin-right: 8px;
    }
}
.table-wrap {
    padding-top: 12px;
    width: 100%;
    overflow: auto;
    ::v-deep {
        .el-table .el-table__header th.el-table__cell {
            background: #3b3b3b !important;
            border-bottom-color: #555555;
            border-right-color: #555555;
        }
        .el-table .el-table__body tr:hover > td {
            background-color: transparent !important;
        }
        .el-table {
            color: #fff;
        }
        .el-table tr {
            background: #2f2f2f;
            // pointer-events: none;
        }
        .el-table thead {
            color: #999999;
        }
        .el-table td.el-table__cell {
            border-color: #555555;
        }
        .el-table--border .el-table__inner-wrapper:after,
        .el-table--border:after,
        .el-table--border:before,
        .el-table__inner-wrapper:before,
        .el-table__border-bottom-patch,
        .el-table__border-left-patch {
            background-color: #555555;
        }
    }
}
.ask {
    width: 100%;
    display: flex;
    .bubble {
        width: 100%;
    }
}
.ask-title {
    color: #999999;
    padding-bottom: 10px;
}
.ask-list {
    color: #55e5c6;
}
.to-map {
    display: flex;
    justify-content: space-between;
    background: #3c3c3c;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
}
.to-map + .to-map {
    margin-top: 8px;
}
.ask-item + .ask-item {
    padding-top: 2px;
}
.route-wrap {
    display: flex;
    .route-img {
        width: 100%;
        padding-top: 8px;
    }
}

.user {
    justify-content: flex-end;
}
.system {
    justify-content: flex-start;
}
.link {
    display: flex;
    .header-link {
        color: #55e5c6;
        display: flex;
        align-items: baseline;
        text-decoration: underline;
        .icon {
            margin-right: 5px;
        }
    }
}
.bubble {
    padding: 16px 12px;
    box-sizing: border-box;
    max-width: 100%;
    border-radius: 8px;
    // max-width: 60%;
    background: rgba(255, 212, 137, 0.1);
    color: #55e5c6;
    border-radius: 16px 2px 16px 16px;
    line-height: 24px;
    font-size: 14px;
    .header {
        color: #999999;
        // padding-bottom: 8px;
    }
    .main-text {
        // color: #ffffff;
    }
    .content {
        color: #ffffff;
    }
    .divider {
        width: 100%;
        height: 1px;
        background: rgba(153, 153, 153, 0.2);
        margin: 12px 0;
    }
    .think {
        color: #999999;
    }
    .expert-img {
        margin-top: 12px;
        width: 100%;
    }
}
.system .bubble,
.real .bubble {
    background: #2f2f2f;
    color: #fff;
    border-radius: 2px 16px 16px 16px;
}
.uploader {
    width: 100%;
    display: flex;
    justify-content: center;
    img {
        width: 174px;
        height: 55px;
    }
}
.bottom-send {
    padding: 6px 16px 16px;
}
.input-box {
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: #2f2f2f;
    border-radius: 16px;
    /* border-top: 1px solid #ddd; */
    ::v-deep {
        .el-textarea__inner {
            background: transparent;
            box-shadow: none;
            color: #fff;
        }
    }
    .bottom-group {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 6px;
        .btn-l {
            display: flex;
            .l-item {
                display: flex;
                align-items: center;
                border-radius: 20px;
                border: 1px solid #555555;
                padding: 6px 8px;
            }
            .l-item + .l-item {
                margin-left: 12px;
            }
            img {
                width: 16px;
                padding-right: 2px;
            }
        }
        .file-icon {
            // width: 16px;
            height: 16px;
        }
        .send-icon {
            margin-left: 8px;
            width: 28px;
        }
    }
}
input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
button {
    margin-left: 10px;
    padding: 10px 15px;
    background: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}
</style>