diff --git a/ruoyi-ui/public/dataCard.html b/ruoyi-ui/public/dataCard.html new file mode 100644 index 0000000..dfac0a5 --- /dev/null +++ b/ruoyi-ui/public/dataCard.html @@ -0,0 +1,691 @@ + + + + + + 数据卡 + + + + +
+
+
+
+
+ + 返回 +
+
数据卡
+
+
+ + + 导出图片 + +
+
+ +
+
+ 行数: + +
+
+ 列数: + +
+ +
+ 单元格背景色: + +
+
+
+
+ + + 选择颜色 + + +
+ +
+ 撤回 + 合并单元格 + 保存 + 清空选中 +
+
+ +
+
+ + + + + + +
+
+
+ {{ cell.content }} + +
+
+
+
+
+ + + + + + + diff --git a/ruoyi-ui/public/logo.png b/ruoyi-ui/public/logo.png new file mode 100644 index 0000000..5168989 Binary files /dev/null and b/ruoyi-ui/public/logo.png differ diff --git a/ruoyi-ui/public/logo2.jpg b/ruoyi-ui/public/logo2.jpg new file mode 100644 index 0000000..73a3c9a Binary files /dev/null and b/ruoyi-ui/public/logo2.jpg differ diff --git a/ruoyi-ui/public/stepEditor.html b/ruoyi-ui/public/stepEditor.html index 9509c31..af92c33 100644 --- a/ruoyi-ui/public/stepEditor.html +++ b/ruoyi-ui/public/stepEditor.html @@ -36,7 +36,6 @@ padding: 0 32px; height: 56px; background: #fff; - border-bottom: 1px solid #e8e8e8; } .header-left { @@ -45,9 +44,14 @@ gap: 16px; } + .header-right { + display: flex; + gap: 12px; + } + .back-btn { padding: 8px 12px; - font-size: 14px; + font-size: 16px; color: #666; } @@ -56,14 +60,20 @@ } .step-title { - font-size: 16px; - font-weight: 500; + font-size: 18px; + font-weight: bold; color: #333; } .save-btn { padding: 8px 24px; - font-size: 14px; + font-size: 16px; + border-radius: 4px; + } + + .export-btn { + padding: 8px 24px; + font-size: 16px; border-radius: 4px; } @@ -201,6 +211,10 @@ 保存 + + + 导出 + @@ -596,6 +610,88 @@ localStorage.setItem('stepEditorContent', JSON.stringify(savedData)) this.$message.success('保存成功') }, + async exportContent() { + this.content = this.$refs.editor.innerHTML + + let contentWithBase64 = this.content + try { + const base64 = await this.imageToBase64('./logo2.jpg') + contentWithBase64 = this.content.replace(/]*>/g, + ``) + } catch (e) { + console.log('Logo conversion skipped:', e) + } + + const completeHtml = ` + + + + + + ${this.stepTitle} + + + +
+ ${contentWithBase64} +
+ + + ` + + const blob = new Blob([completeHtml], { type: 'text/html;charset=utf-8' }) + const url = URL.createObjectURL(blob) + const link = document.createElement('a') + link.href = url + link.download = `${this.stepTitle}_${new Date().toLocaleString().replace(/[/:]/g, '-')}.html` + document.body.appendChild(link) + link.click() + document.body.removeChild(link) + URL.revokeObjectURL(url) + this.$message.success('导出成功') + }, + imageToBase64(url) { + return new Promise((resolve, reject) => { + const img = new Image() + img.crossOrigin = 'Anonymous' + img.onload = () => { + const canvas = document.createElement('canvas') + canvas.width = img.width + canvas.height = img.height + const ctx = canvas.getContext('2d') + ctx.drawImage(img, 0, 0) + resolve(canvas.toDataURL('image/jpeg')) + } + img.onerror = reject + img.src = url + }) + }, loadSavedContent() { const savedData = JSON.parse(localStorage.getItem('stepEditorContent') || '{}') const stepData = savedData[`step_${this.stepIndex}`] @@ -605,7 +701,129 @@ this.content = stepData.content this.updateWordCount() }) + } else { + this.setDefaultContent() } + }, + setDefaultContent() { + this.$nextTick(() => { + if (this.stepIndex === 0) { + this.$refs.editor.innerHTML = ` +
+ logo +

点名

+
+
+
+
+

XXX组：

 

 

 

 

 

+

XXX组：

 

 

 

 

 

+
+
+

XXX组：

 

 

 

 

 

+

XXX组：

 

 

 

 

 

+
+
+

XXX组：

 

 

 

 

 

+

XXX组：

 

 

 

 

 

+
+
+ ` + } else if (this.stepIndex === 1) { + this.$refs.editor.innerHTML = ` +
+ logo +

集体协同

+
+
+

任务主要目标、次要目标及风险等级

+
+

主要目标：

+

 

+

 

+

次要目标：

+

 

+

 

+

风险等级：

+

 

+

 

+
+ ` + } else if (this.stepIndex === 2) { + this.$refs.editor.innerHTML = ` +
+ logo +

战术规划

+
+
+

整体战术：

+ ` + } else if (this.stepIndex === 3) { + this.$refs.editor.innerHTML = ` +
+ logo +

资源准备

+
+
+

资源准备、风险识别及应对措施

+
+

资源准备：

+

 

+

 

+

风险识别：

+

 

+

 

+

应对措施：

+

 

+

 

+
+ ` + } else if (this.stepIndex === 4) { + this.$refs.editor.innerHTML = ` +
+ logo +

指挥演练

+
+
+

任务分工、时间节点及实时监控

+
+

任务分工：

+

 

+

 

+

时间节点：

+

 

+

 

+

实时监控：

+

 

+

 

+
+ ` + } else if (this.stepIndex === 5) { + this.$refs.editor.innerHTML = ` +
+ logo +

总结评估

+
+
+

任务完成情况、效果评估及总结改进

+
+

完成情况：

+

 

+

 

+

效果评估：

+

 

+

 

+

总结改进：

+

 

+

 

+
+ ` + } else { + this.$refs.editor.innerHTML = '' + } + this.content = this.$refs.editor.innerHTML + this.updateWordCount() + }) } } }) diff --git a/ruoyi-ui/src/assets/icons/svg/shujukapian.svg b/ruoyi-ui/src/assets/icons/svg/shujukapian.svg new file mode 100644 index 0000000..99d3aff --- /dev/null +++ b/ruoyi-ui/src/assets/icons/svg/shujukapian.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ruoyi-ui/src/views/childRoom/index.vue b/ruoyi-ui/src/views/childRoom/index.vue index 40e1be8..f32d6d1 100644 --- a/ruoyi-ui/src/views/childRoom/index.vue +++ b/ruoyi-ui/src/views/childRoom/index.vue @@ -535,6 +535,7 @@ export default { { id: 'modify', name: '测距', icon: 'cj' }, { id: 'refresh', name: '截图', icon: 'screenshot', action: 'refresh' }, { id: 'basemap', name: '底图', icon: 'dt' }, + { id: 'datacard', name: '数据卡', icon: 'shujukapian' }, { id: 'save', name: '保存', icon: 'el-icon-document-checked' }, { id: 'import', name: '导入', icon: 'el-icon-upload2' }, { id: 'export', name: '导出', icon: 'el-icon-download' } @@ -2506,6 +2507,9 @@ export default { // 点击推演时，也停止地图绘制状态 this.drawDom = false; this.airspaceDrawDom = false; + } else if (item.id === 'datacard') { + // 点击数据卡，在新标签页打开 + window.open('/dataCard.html', '_blank'); } else { // 点击其他菜单项时，也自动收起右侧面板 this.isRightPanelHidden = true;