2 changed files with 204 additions and 81 deletions
@ -0,0 +1,123 @@ |
|||
<template> |
|||
<div v-if="showMarkdown"> |
|||
<div v-html="markdownContent"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { marked } from "marked"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
text: '', |
|||
displayedText: '', |
|||
showMarkdown: false, |
|||
typingQueue: [], //队列存储 |
|||
isTyping: false, |
|||
markdownContent: '', |
|||
typingSpeed: 50, //每个字出现的间隔时间（毫秒） |
|||
|
|||
}; |
|||
}, |
|||
created() { }, |
|||
methods: { |
|||
getLastWeekDateRange() { |
|||
const today = new Date(); |
|||
const dayOfWeek = today.getDay(); |
|||
const startOfLastWeek = new Date(today); |
|||
const endOfLastWeek = new Date(today); |
|||
startOfLastWeek.setDate(today.getDate() - dayOfWeek - 6); |
|||
endOfLastWeek.setDate(today.getDate() - dayOfWeek); |
|||
const formatDate = (date) => { |
|||
const year = date.getFullYear(); |
|||
const month = String(date.getMonth() + 1).padStart(2, '0'); |
|||
const day = String(date.getDate()).padStart(2, '0'); |
|||
return `${year}-${month}-${day}`; |
|||
}; |
|||
return { |
|||
queryDateStart: formatDate(startOfLastWeek), |
|||
queryDateEnd: formatDate(endOfLastWeek), |
|||
}; |
|||
}, |
|||
regexChat(str) { |
|||
const regex = /"content":"(.*?)"/g; |
|||
const matches = []; |
|||
let match; |
|||
while ((match = regex.exec(str)) !== null) { |
|||
// let formattedContent = match[1].replace(/\\n/g, '\\\\n'); |
|||
matches.push(match[1]); |
|||
} |
|||
const mergedContent = matches.join(''); |
|||
console.log(mergedContent,'mergedContent'); |
|||
return mergedContent; |
|||
}, |
|||
startNextTypingEffect() { |
|||
// 如果正在打字或队列为空，则直接返回 |
|||
if (this.isTyping || this.typingQueue.length === 0) { |
|||
return |
|||
}; |
|||
const nextText = this.typingQueue.shift(); |
|||
console.log(nextText,typeof(nextText),'seeeee1'); |
|||
|
|||
this.displayedText += nextText |
|||
}, |
|||
async loadMarkdownTohtml() { |
|||
const { queryDateStart, queryDateEnd } = this.getLastWeekDateRange(); |
|||
const that = this; |
|||
try { |
|||
const res = await fetch(`${process.env.VUE_APP_API_SERVER}/governance/event/assistant/report?queryDateStart=${queryDateStart}&queryDateEnd=${queryDateEnd}`, { |
|||
method: "GET", |
|||
headers: { |
|||
"Authorization": localStorage.getItem('token'), |
|||
"Content-Type": "application/json" |
|||
} |
|||
}) |
|||
const reader = res.body.getReader(); |
|||
const decoder = new TextDecoder("utf-8"); |
|||
|
|||
reader.read().then(function process({ done, value }) { |
|||
if (done) { |
|||
console.log('加载完了', that.displayedText); |
|||
that.showMarkdown = true; |
|||
that.markdownContent = marked(that.displayedText); // 将markdown内容解析 |
|||
console.log(that.markdownContent); |
|||
console.log(that.displayedText === |
|||
'\n\n**市北区2025-03-03至2025-03-09事件分析报告**\n\n---\n\n### 一、主要事件类型分析\n1. **事件类别统计** \n - 基础设施类：1起（电表异常问题） \n - 其他类别（如治安、环保等）：0起 \n2. **突出类别说明** \n 本月所有上报事件均集中于**基础设施类**（电表问题），占比100%。该问题直接涉及居民日常生活与公共资源管理，需重点关注。\n\n---\n\n### 二、重点集中区域分析\n1. **高频事件区域** \n - **华山镇花园小区54号楼**：发生1起电表问题投诉。 \n2. **潜在原因推测** \n - **设备老化可能性**：电表更换后出现异常，可能与新设备调试不当或旧电路系统适配性有关。 \n - **居民需求敏感度**：电力供应直接影响生活成本，居民对电表准确性关注度高，易引发投诉。 \n - **区域特殊性**：该小区为较老社区，基础设施维护需求可能长期存在。\n\n---\n\n### 三、事件趋势分析\n1. **数量对比** \n - 本月事件总量：1起（仅基础设施类） \n - 上月事件总量（假设数据）：无提供历史数据，需补充信息以分析趋势。 \n2. **初步推断** \n - 若上月无同类问题，本次电表投诉可能为偶发个案；若持续出现类似事件，则需排查系统性风险（如批量设备故障）。\n\n---\n\n### 四、工作改进建议\n1. **基础设施优化** \n - 联合电力部门对华山镇花园小区开展电表专项检查，排查设备异常原因，公开检测结果以消除居民疑虑。 \n - 对老旧社区实施电路系统升级计划，减少因设备老化引发的后续问题。 \n2. **居民沟通与宣传** \n - 通过社区公告、线上通知等形式，普及电表使用常识及问题反馈渠道，降低信息不对称。 \n3. **服务流程完善** \n - 建立公共设施报修快速响应机制，确保问题在24小时内初步响应并反馈处理进度。 \n4. **数据监测扩展** \n - 补充完善环保、治安等事件的数据采集，以支持更全面的社区管理分析。\n\n---\n\n**结论**：本月社区管理需重点关注基础设施维护与居民沟通效率，建议通过专项排查和透明化服务提升居民满意度，同时加强多维度数据收集以支持长期决策。'); |
|||
return; |
|||
'\n\n**市北区2025-03-03至2025-03-09事件分析报告**\n\n---\n\n### 一、主要事件类型分析\n1. **事件类别统计** \n - 基础设施类：1起（电表异常问题） \n - 其他类别（如治安、环保等）：0起 \n2. **突出类别说明** \n 本月所有上报事件均集中于**基础设施类**（电表问题），占比100%。该问题直接涉及居民日常生活与公共资源管理，需重点关注。\n\n---\n\n### 二、重点集中区域分析\n1. **高频事件区域** \n - **华山镇花园小区54号楼**：发生1起电表问题投诉。 \n2. **潜在原因推测** \n - **设备老化可能性**：电表更换后出现异常，可能与新设备调试不当或旧电路系统适配性有关。 \n - **居民需求敏感度**：电力供应直接影响生活成本，居民对电表准确性关注度高，易引发投诉。 \n - **区域特殊性**：该小区为较老社区，基础设施维护需求可能长期存在。\n\n---\n\n### 三、事件趋势分析\n1. **数量对比** \n - 本月事件总量：1起（类） \n - 上月事件总量（假设数据）：无提供历史数据，需补充信息以分析趋势。 \n2. **初步推断** \n - 若上月无同类问题，本次电表投诉可能为偶发个案；若持续出现类似事件，则需排查系统性风险（如批量设备故障）。\n\n---\n\n### 四、工作改进建议\n1. **基础设施优化** \n - 联合电力部门对华山镇花园小区开展电表专项检查，排查设备异常原因，公开检测结果以消除居民疑虑。 \n - 对老旧社区实施电路系统升级计划，减少因设备老化引发的后续问题。 \n2. **居民沟通与宣传** \n - 通过社区公告、线上通知等形式，普及电表使用常识及问题反馈渠道，降低信息不对称。 \n3. **服务流程完善** \n - 建立公共设施报修快速响应机制，确保问题在24小时内初步响应并反馈处理进度。 \n4. **数据监测扩展** \n - 补充完善环保、治安等事件的数据采集，以支持更全面的社区管理分析。\n\n---\n\n**结论**：本月社区管理需重点关注基础设施维护与居民沟通效率，建议通过专项排查和透明化服务提升居民满意度，同时加强多维度数据收集以支持长期决策。' |
|||
} |
|||
|
|||
const chunk = decoder.decode(value, { stream: true }); |
|||
console.log("流数据块：", chunk, typeof (chunk)); |
|||
// console.log(JSON.parse(`"${chunk}"`),'json'); |
|||
const text = that.regexChat(chunk); |
|||
console.log("转换后：", text, typeof (text)); |
|||
|
|||
// 将数据推入队列 |
|||
that.typingQueue.push(text); |
|||
that.startNextTypingEffect(); // 尝试开始下一个 |
|||
|
|||
// 继续读取 |
|||
return reader.read().then(process); |
|||
}); |
|||
|
|||
} catch { |
|||
|
|||
} |
|||
} |
|||
}, |
|||
components: {}, |
|||
computed: { |
|||
}, |
|||
watch: {}, |
|||
props: { |
|||
html: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.loadMarkdownTohtml() |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue