|
|
@@ -0,0 +1,428 @@
|
|
|
+<template>
|
|
|
+ <div class="report-template-page admin-page">
|
|
|
+ <!-- Tab 1: 模板列表 -->
|
|
|
+ <el-card v-show="activeTab === 'list'">
|
|
|
+ <div slot="header">
|
|
|
+ <span>报告模板管理</span>
|
|
|
+ <el-button size="small" type="primary" @click="openEditor(null)">+ 新增模板</el-button>
|
|
|
+ </div>
|
|
|
+ <el-table :data="templates" v-loading="loading" border stripe :max-height="tableHeight">
|
|
|
+ <el-table-column prop="id" label="ID" width="60" />
|
|
|
+ <el-table-column prop="name" label="模板名称" min-width="160" />
|
|
|
+ <el-table-column prop="reportType" label="报告类型" width="140">
|
|
|
+ <template slot-scope="{ row }">{{ typeLabel(row.reportType) }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="状态" width="80">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-tag :type="row.isActive === 1 ? 'success' : 'info'" size="small">
|
|
|
+ {{ row.isActive === 1 ? '启用' : '停用' }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="updatedAt" label="更新时间" width="170">
|
|
|
+ <template slot-scope="{ row }">{{ formatTime(row.updatedAt) }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="200" fixed="right">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-button size="mini" @click="openEditor(row)">编辑</el-button>
|
|
|
+ <el-button size="mini" :type="row.isActive === 1 ? 'warning' : 'success'" @click="handleToggle(row)">
|
|
|
+ {{ row.isActive === 1 ? '停用' : '启用' }}
|
|
|
+ </el-button>
|
|
|
+ <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- Tab 2: 模板编辑器 -->
|
|
|
+ <el-card v-show="activeTab === 'editor'">
|
|
|
+ <div slot="header">
|
|
|
+ <span>{{ isEdit ? '编辑模板' : '新增模板' }}</span>
|
|
|
+ <el-button size="small" @click="activeTab = 'list'">返回列表</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-form ref="form" :model="form" label-width="110px" style="max-width:900px">
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="模板名称" required>
|
|
|
+ <el-input v-model="form.name" placeholder="如:肠道菌群标准报告" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="报告类型" required>
|
|
|
+ <el-select v-model="form.reportType" placeholder="选择报告类型" style="width:100%">
|
|
|
+ <el-option label="肠道菌群 (gut_flora)" value="gut_flora" />
|
|
|
+ <el-option label="DAN测评 (dan)" value="dan" />
|
|
|
+ <el-option label="体检报告 (physical_exam)" value="physical_exam" />
|
|
|
+ <el-option label="舌诊报告 (tongue)" value="tongue" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 固定块编辑区 -->
|
|
|
+ <el-divider content-position="left">固定展示块(按顺序渲染)</el-divider>
|
|
|
+ <div class="block-list">
|
|
|
+ <div v-for="(block, bIdx) in form.fixedBlocks" :key="bIdx" class="block-item">
|
|
|
+ <div class="block-header">
|
|
|
+ <span class="block-type-tag">{{ blockTypeLabel(block.type) }}</span>
|
|
|
+ <span class="block-title-display">{{ block.title || '(无标题)' }}</span>
|
|
|
+ <el-button size="mini" type="text" class="block-move-up" @click="moveBlock(bIdx, -1)" :disabled="bIdx === 0">↑</el-button>
|
|
|
+ <el-button size="mini" type="text" class="block-move-dn" @click="moveBlock(bIdx, 1)" :disabled="bIdx === form.fixedBlocks.length - 1">↓</el-button>
|
|
|
+ <el-button size="mini" type="text" class="block-del" @click="removeBlock(bIdx)">删除</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="block-body">
|
|
|
+ <!-- score 块配置 -->
|
|
|
+ <template v-if="block.type === 'score'">
|
|
|
+ <el-form-item label="分数字段">
|
|
|
+ <el-checkbox-group v-model="block.scoreFields">
|
|
|
+ <el-checkbox label="overallScore">综合评分</el-checkbox>
|
|
|
+ <el-checkbox label="gutHealthScore">菌群健康</el-checkbox>
|
|
|
+ <el-checkbox label="chronicDiseaseScore">慢病控制</el-checkbox>
|
|
|
+ <el-checkbox label="nutritionScore">营养均衡</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- indicator 块配置 -->
|
|
|
+ <template v-if="block.type === 'indicator'">
|
|
|
+ <el-form-item label="分组标签">
|
|
|
+ <el-input v-model="block.groupLabel" placeholder="如:血脂指标" style="width:200px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="指标名称">
|
|
|
+ <el-select v-model="block.indicatorNames" multiple filterable placeholder="搜索指标名称" style="width:100%">
|
|
|
+ <el-option v-for="ind in indicatorList" :key="ind.name" :label="ind.name" :value="ind.name" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- list 块配置 -->
|
|
|
+ <template v-if="block.type === 'list'">
|
|
|
+ <el-form-item label="列表来源">
|
|
|
+ <el-select v-model="block.listKey" style="width:200px">
|
|
|
+ <el-option label="菌种详情" value="flora" />
|
|
|
+ <el-option label="益生菌种" value="probiotic" />
|
|
|
+ <el-option label="分类学" value="taxonomy" />
|
|
|
+ <el-option label="食物推荐" value="food" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="块标题">
|
|
|
+ <el-input v-model="block.title" placeholder="块显示标题" style="width:200px" />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- text 块配置 -->
|
|
|
+ <template v-if="block.type === 'text'">
|
|
|
+ <el-form-item label="标题">
|
|
|
+ <el-input v-model="block.title" style="width:200px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="内容">
|
|
|
+ <el-input v-model="block.content" type="textarea" :rows="3" />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-button size="small" type="dashed" @click="addBlock" style="margin-top:8px">+ 添加固定块</el-button>
|
|
|
+
|
|
|
+ <!-- 自由显示配置 -->
|
|
|
+ <el-divider content-position="left">自由显示配置</el-divider>
|
|
|
+ <el-form-item label="启用自由显示">
|
|
|
+ <el-switch v-model="form.freeDisplay.enabled" :active-value="true" :inactive-value="false" />
|
|
|
+ <span class="hint-text">开启后,未配置在固定块的指标将追加到末尾</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="追加分组名" v-if="form.freeDisplay.enabled">
|
|
|
+ <el-input v-model="form.freeDisplay.groupName" placeholder="如:其他指标" style="width:200px" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" :loading="saving" @click="handleSave">保存</el-button>
|
|
|
+ <el-button @click="handlePreview">预览效果</el-button>
|
|
|
+ </el-formItem>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 预览对话框 -->
|
|
|
+ <el-dialog title="模板预览" :visible.sync="previewVisible" width="700px">
|
|
|
+ <div v-loading="previewLoading">
|
|
|
+ <div v-for="(block, bi) in previewBlocks" :key="bi" class="preview-block">
|
|
|
+ <div class="preview-block-title">{{ block.title }}</div>
|
|
|
+ <!-- score -->
|
|
|
+ <div v-if="block.type === 'score'" class="preview-score">
|
|
|
+ <div v-for="item in block.items" :key="item.label" class="preview-score-item">
|
|
|
+ <span>{{ item.label }}: {{ item.value }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- indicator -->
|
|
|
+ <div v-else-if="block.type === 'indicator'" class="preview-indicator">
|
|
|
+ <div v-for="(item, ii) in block.items" :key="ii" class="preview-ind-item">
|
|
|
+ <span class="ind-name">{{ item.name }}</span>
|
|
|
+ <span class="ind-value">{{ item.value }} {{ item.unit }}</span>
|
|
|
+ <span class="ind-status" :class="'status-' + item.status">{{ item.status }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- list -->
|
|
|
+ <div v-else-if="block.type === 'list'" class="preview-list">
|
|
|
+ <table class="preview-table">
|
|
|
+ <thead>
|
|
|
+ <tr v-for="(col, ci) in block.columns" :key="ci">
|
|
|
+ <th>{{ col.label }}</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="(item, li) in block.items" :key="li">
|
|
|
+ <td v-for="(col, ci) in block.columns" :key="ci">{{ item[col.key] || '--' }}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <!-- text -->
|
|
|
+ <div v-else class="preview-text">{{ block.content }}</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="!previewBlocks.length" class="empty-hint">暂无数据,请先保存模板</div>
|
|
|
+ </div>
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button @click="previewVisible = false">关闭</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getReportTemplates, saveReportTemplate, deleteReportTemplate, toggleReportTemplate, getAvailableIndicators } from '@/api/reportTemplate'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'ReportTemplateManage',
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeTab: 'list',
|
|
|
+ loading: false,
|
|
|
+ saving: false,
|
|
|
+ templates: [],
|
|
|
+ indicatorList: [],
|
|
|
+ isEdit: false,
|
|
|
+ previewVisible: false,
|
|
|
+ previewLoading: false,
|
|
|
+ previewBlocks: [],
|
|
|
+ form: this.emptyForm()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ tableHeight() {
|
|
|
+ return window.innerHeight - 280
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() { this.fetchTemplates() },
|
|
|
+ methods: {
|
|
|
+ emptyForm() {
|
|
|
+ return {
|
|
|
+ id: null,
|
|
|
+ name: '',
|
|
|
+ reportType: 'gut_flora',
|
|
|
+ fixedBlocks: [
|
|
|
+ { type: 'score', title: '健康评分', scoreFields: ['overallScore', 'gutHealthScore', 'chronicDiseaseScore'] },
|
|
|
+ { type: 'indicator', title: '指标', groupLabel: '血脂指标', indicatorNames: [] }
|
|
|
+ ],
|
|
|
+ freeDisplay: { enabled: true, groupName: '其他指标' }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fetchTemplates() {
|
|
|
+ this.loading = true
|
|
|
+ getReportTemplates({}).then(res => {
|
|
|
+ this.templates = res.data || []
|
|
|
+ }).finally(() => { this.loading = false })
|
|
|
+ },
|
|
|
+ fetchIndicators() {
|
|
|
+ getAvailableIndicators({ domain: '' }).then(res => {
|
|
|
+ this.indicatorList = res.data || []
|
|
|
+ }).catch(() => {})
|
|
|
+ },
|
|
|
+ typeLabel(rt) {
|
|
|
+ const map = { gut_flora: '肠道菌群', dan: 'DAN测评', physical_exam: '体检报告', tongue: '舌诊' }
|
|
|
+ return map[rt] || rt
|
|
|
+ },
|
|
|
+ blockTypeLabel(t) {
|
|
|
+ const map = { score: '评分', indicator: '指标', list: '列表', text: '文本' }
|
|
|
+ return map[t] || t
|
|
|
+ },
|
|
|
+ openEditor(row) {
|
|
|
+ this.fetchIndicators()
|
|
|
+ if (row) {
|
|
|
+ this.isEdit = true
|
|
|
+ try {
|
|
|
+ var cfg = JSON.parse(row.config || '{}')
|
|
|
+ this.form = {
|
|
|
+ id: row.id,
|
|
|
+ name: row.name,
|
|
|
+ reportType: row.reportType,
|
|
|
+ fixedBlocks: cfg.fixedBlocks || [],
|
|
|
+ freeDisplay: cfg.freeDisplay || { enabled: true, groupName: '其他指标' }
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ this.form = this.emptyForm()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.isEdit = false
|
|
|
+ this.form = this.emptyForm()
|
|
|
+ }
|
|
|
+ this.activeTab = 'editor'
|
|
|
+ },
|
|
|
+ addBlock() {
|
|
|
+ this.form.fixedBlocks.push({ type: 'indicator', title: '新块', groupLabel: '', indicatorNames: [] })
|
|
|
+ },
|
|
|
+ removeBlock(idx) {
|
|
|
+ this.form.fixedBlocks.splice(idx, 1)
|
|
|
+ },
|
|
|
+ moveBlock(idx, dir) {
|
|
|
+ var list = this.form.fixedBlocks
|
|
|
+ var newIdx = idx + dir
|
|
|
+ if (newIdx < 0 || newIdx >= list.length) return
|
|
|
+ var tmp = list[idx]
|
|
|
+ list[idx] = list[newIdx]
|
|
|
+ list[newIdx] = tmp
|
|
|
+ },
|
|
|
+ handleSave() {
|
|
|
+ if (!this.form.name || !this.form.reportType) {
|
|
|
+ this.$message.error('请填写名称和报告类型')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.saving = true
|
|
|
+ var config = {
|
|
|
+ fixedBlocks: this.form.fixedBlocks.map(function(b) {
|
|
|
+ var block = { type: b.type, title: b.title || '' }
|
|
|
+ if (b.type === 'score') block.items = b.scoreFields || []
|
|
|
+ else if (b.type === 'indicator') { block.indicatorNames = b.indicatorNames || []; block.groupLabel = b.groupLabel || '' }
|
|
|
+ else if (b.type === 'list') { block.listKey = b.listKey || ''; block.title = b.title || '' }
|
|
|
+ else if (b.type === 'text') { block.content = b.content || '' }
|
|
|
+ return block
|
|
|
+ }),
|
|
|
+ freeDisplay: this.form.freeDisplay
|
|
|
+ }
|
|
|
+ var payload = Object.assign({}, this.form, { config: JSON.stringify(config) })
|
|
|
+ delete payload.fixedBlocks
|
|
|
+ delete payload.freeDisplay
|
|
|
+ saveReportTemplate(payload).then(res => {
|
|
|
+ this.$message.success('保存成功')
|
|
|
+ this.activeTab = 'list'
|
|
|
+ this.fetchTemplates()
|
|
|
+ }).catch(() => { this.$message.error('保存失败') }).finally(() => { this.saving = false })
|
|
|
+ },
|
|
|
+ handleDelete(row) {
|
|
|
+ this.$confirm('确定删除该模板?', '提示', { type: 'warning' }).then(() => {
|
|
|
+ deleteReportTemplate(row.id).then(() => {
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ this.fetchTemplates()
|
|
|
+ }).catch(() => { this.$message.error('删除失败') })
|
|
|
+ }).catch(function() {})
|
|
|
+ },
|
|
|
+ handleToggle(row) {
|
|
|
+ toggleReportTemplate({ id: row.id, isActive: row.isActive === 1 ? 0 : 1 }).then(() => {
|
|
|
+ this.fetchTemplates()
|
|
|
+ }).catch(() => { this.$message.error('操作失败') })
|
|
|
+ },
|
|
|
+ handlePreview() {
|
|
|
+ this.previewLoading = true
|
|
|
+ this.previewVisible = true
|
|
|
+ // 模拟预览:用默认 gut_flora payload 渲染
|
|
|
+ var mockPayload = {
|
|
|
+ summary: { overallScore: 85, gutHealthScore: 78, chronicDiseaseScore: 90, nutritionScore: 72 },
|
|
|
+ indicators: [
|
|
|
+ { indicatorName: '总胆固醇', value: '5.2', unit: 'mmol/L', refRange: '3.1-5.2', status: 'normal', category: '血脂' },
|
|
|
+ { indicatorName: '甘油三酯', value: '1.8', unit: 'mmol/L', refRange: '0.56-1.7', status: 'high', category: '血脂' },
|
|
|
+ { indicatorName: '血红蛋白', value: '135', unit: 'g/L', refRange: '115-150', status: 'normal', category: '血常规' }
|
|
|
+ ],
|
|
|
+ gutFlora: [{ bacteriaName: '双歧杆菌', bacteriaValue: '4.2', normalRange: '3-6', populationLevel: 'normal' }],
|
|
|
+ diseaseRisks: [{ diseaseName: '心血管疾病', riskValue: '12%', riskLevel: 'low' }]
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ this.previewBlocks = this.renderPreview(this.form.fixedBlocks, mockPayload)
|
|
|
+ this.previewLoading = false
|
|
|
+ }, 300)
|
|
|
+ },
|
|
|
+ renderPreview(blocks, payload) {
|
|
|
+ var result = []
|
|
|
+ for (var i = 0; i < blocks.length; i++) {
|
|
|
+ var b = blocks[i]
|
|
|
+ if (b.type === 'score') {
|
|
|
+ var items = []
|
|
|
+ var s = payload.summary || {}
|
|
|
+ var fieldMap = { overallScore: '综合', gutHealthScore: '菌群健康', chronicDiseaseScore: '慢病控制', nutritionScore: '营养均衡' }
|
|
|
+ if (b.items) {
|
|
|
+ for (var j = 0; j < b.items.length; j++) {
|
|
|
+ var f = b.items[j]
|
|
|
+ if (s[f] != null) items.push({ label: fieldMap[f] || f, value: s[f] })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (items.length > 0) result.push({ type: 'score', title: b.title, items: items })
|
|
|
+ } else if (b.type === 'indicator') {
|
|
|
+ var filtered = (payload.indicators || []).filter(function(ind) {
|
|
|
+ return b.indicatorNames && b.indicatorNames.indexOf(ind.indicatorName) >= 0
|
|
|
+ })
|
|
|
+ if (filtered.length > 0) result.push({ type: 'indicator', title: b.groupLabel || b.title, items: filtered })
|
|
|
+ } else if (b.type === 'list') {
|
|
|
+ if (b.listKey === 'flora' && payload.gutFlora && payload.gutFlora.length) {
|
|
|
+ result.push({ type: 'list', title: b.title, columns: [{ key: 'bacteriaName', label: '菌种' }, { key: 'bacteriaValue', label: '数值' }, { key: 'normalRange', label: '正常范围' }, { key: 'populationLevel', label: '状态' }], items: payload.gutFlora })
|
|
|
+ }
|
|
|
+ } else if (b.type === 'text') {
|
|
|
+ result.push({ type: 'text', title: b.title, content: b.content })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 自由显示
|
|
|
+ if (this.form.freeDisplay && this.form.freeDisplay.enabled) {
|
|
|
+ var remaining = (payload.indicators || []).filter(function(ind) {
|
|
|
+ for (var j = 0; j < blocks.length; j++) {
|
|
|
+ if (blocks[j].type === 'indicator' && blocks[j].indicatorNames && blocks[j].indicatorNames.indexOf(ind.indicatorName) >= 0) return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ })
|
|
|
+ if (remaining.length > 0) {
|
|
|
+ result.push({ type: 'indicator', title: this.form.freeDisplay.groupName || '其他指标', items: remaining })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return result
|
|
|
+ },
|
|
|
+ formatTime(t) {
|
|
|
+ if (!t) return '-'
|
|
|
+ return t.replace('T', ' ').substring(0, 19)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.report-template-page { padding: 20px; }
|
|
|
+.block-list { border: 1px solid #ebeef5; border-radius: 4px; margin-bottom: 12px; }
|
|
|
+.block-item { border-bottom: 1px solid #f0f0f0; padding: 12px 16px; }
|
|
|
+.block-item:last-child { border-bottom: none; }
|
|
|
+.block-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
|
|
+.drag-handle { cursor: move; color: #bbb; font-size: 16px; }
|
|
|
+.block-type-tag { background: #f0f9ff; color: #2c7be5; padding: 2rpx 8rpx; border-radius: 4px; font-size: 12px; }
|
|
|
+.block-title-display { color: #333; font-size: 14px; }
|
|
|
+.block-del { margin-left: auto; }
|
|
|
+.hint-text { margin-left: 12px; color: #999; font-size: 12px; }
|
|
|
+.block-list { border: 1px solid #ebeef5; border-radius: 4px; margin-bottom: 12px; }
|
|
|
+.block-item { border-bottom: 1px solid #f0f0f0; padding: 12px 16px; }
|
|
|
+.block-item:last-child { border-bottom: none; }
|
|
|
+.block-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
|
|
+.block-type-tag { background: #f0f9ff; color: #2c7be5; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
|
|
|
+.block-title-display { color: #333; font-size: 14px; }
|
|
|
+.block-del { margin-left: auto; }
|
|
|
+.block-move-up, .block-move-dn { color: #909399; }
|
|
|
+.preview-block { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 16px; margin-bottom: 12px; }
|
|
|
+.preview-block-title { font-weight: bold; font-size: 15px; margin-bottom: 10px; color: #303133; }
|
|
|
+.preview-score-item { display: inline-block; background: #f5f7fa; padding: 4px 12px; margin: 4px; border-radius: 4px; }
|
|
|
+.preview-ind-item { display: flex; align-items: center; padding: 6px 0; border-bottom: 1px solid #f0f0f0; }
|
|
|
+.ind-name { flex: 1; font-size: 13px; }
|
|
|
+.ind-value { font-size: 13px; color: #666; margin: 0 12px; }
|
|
|
+.ind-status { font-size: 12px; padding: 2px 8px; border-radius: 10px; }
|
|
|
+.status-normal { background: #e8f5e9; color: #2e7d32; }
|
|
|
+.status-high { background: #ffebee; color: #c62828; }
|
|
|
+.status-low { background: #fff3e0; color: #e65100; }
|
|
|
+.preview-table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
|
|
+.preview-table th, .preview-table td { border: 1px solid #eee; padding: 6px 10px; text-align: left; }
|
|
|
+.preview-table th { background: #f5f7fa; font-weight: 600; }
|
|
|
+.preview-text { font-size: 14px; color: #555; line-height: 1.7; white-space: pre-wrap; }
|
|
|
+.empty-hint { color: #bbb; text-align: center; padding: 40px; }
|
|
|
+</style>
|