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