比較mrviewer0.vue與mrviewer.vue，找出mrviewer.vue的錯誤之處：
mrviewer0.vue：
<template>
<div class="container">
<!-- 控制面板 -->
<div class="control-panel">
<button @click="fetchData" class="refresh-btn">刷新數據</button>
<button @click="toggleRelative" class="relative-btn">
{{ showRelative ? '病態關聯' : '病態關聯' }}
</button>
<!-- 本草关联器按钮 -->
<button @click="toggleMNRelative" class="relative-btn">
{{ showMNRelative ? '本草關聯' : '本草關聯' }}
</button>
<!-- 方剂关联器按钮 -->
<button @click="togglePNRelative" class="relative-btn">
{{ showPNRelative ? '方劑關聯' : '方劑關聯' }}
</button>
<!-- 出处关联器按钮 -->
<button @click="toggleSNRelative" class="relative-btn">
{{ showSNRelative ? '典籍關聯' : '典籍關聯' }}
</button>
<!-- 新增人物关联器按钮 -->
<button @click="toggleFNRelative" class="relative-btn">
{{ showFNRelative ? '人物關聯' : '人物關聯' }}
</button>
<input v-model="searchQuery"
placeholder="搜索..."
class="search-input" />
<div class="pagination-controls">
<span>每頁顯示:</span>
<select v-model.number="pageSize" class="page-size-select">
<option value="1">1筆</option>
<option value="4">4筆</option>
<option value="10">10筆</option>
</select>
<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
<span>第</span>
<input type="number"
v-model.number="inputPage"
min="1"
:max="totalPages"
class="page-input"
@input="handlePageInput">
<span>頁 / 共 {{ totalPages }} 頁</span>
<button @click="nextPage" :disabled="currentPage === totalPages">下一頁</button>
<span>醫案閱讀器</span>
</div>
</div>
<!-- 主内容区域 -->
<div class="content-area">
<div class="horizontal-records" v-if="filteredData.length > 0">
<div v-for="(item, index) in paginatedData" :key="item.id" class="record-card">
<div class="record-header">
<h3>醫案 #{{ (currentPage - 1) * pageSize + index + 1 }}</h3>
</div>
<div class="record-body">
<div v-for="(value, key) in processFieldNames(item)" :key="key" class="record-field">
<div class="field-name">{{ key }}:</div>
<div class="field-value">
<!-- 病态名称 -->
<div v-if="key === '相關病態' && Array.isArray(value)"
class="dntag-value"
v-html="formatDntagValueHTML(value)"></div>
<!-- 本草名称 -->
<div v-else-if="key === '相關本草' && Array.isArray(value)"
class="mntag-value"
v-html="formatMntagValueHTML(value)"></div>
<!-- 方剂名称 -->
<div v-else-if="key === '相關方劑' && Array.isArray(value)"
class="pntag-value"
v-html="formatPntagValueHTML(value)"></div>
<!-- 出处名称 -->
<div v-else-if="key === '相關典籍' && Array.isArray(value)"
class="sntag-value"
v-html="formatSntagValueHTML(value)"></div>
<!-- 新增人物名称 -->
<div v-else-if="key === '相關人物' && Array.isArray(value)"
class="fntag-value"
v-html="formatFntagValueHTML(value)"></div>
<div v-else-if="Array.isArray(value)" class="array-value">
<span v-for="(subItem, subIndex) in value" :key="subIndex">
<span v-html="formatValue(subItem, key)"></span><span v-if="subIndex < value.length - 1">；</span>
</span>
</div>
<div v-else v-html="formatValue(value, key)"></div>
</div>
</div>
</div>
</div>
</div>
<div v-else class="no-data">
沒有找到匹配的數據
</div>
</div>
<!-- 相关区域 -->
<div class="relative-area">
<mrdnrelate v-if="showRelative"
:currentCase="currentCase"
:allTags="api2Data"
@data-updated="handleDataUpdated"></mrdnrelate>
<!-- 本草关联器 -->
<mrmnrelate v-else-if="showMNRelative"
:currentCase="currentCase"
:allTags="api3Data"
@data-updated="handleDataUpdated"></mrmnrelate>
<!-- 方剂关联器 -->
<mrpnrelate v-else-if="showPNRelative"
:currentCase="currentCase"
:allTags="api5Data"
@data-updated="handleDataUpdated"></mrpnrelate>
<!-- 出处关联器 -->
<mrsnrelate v-else-if="showSNRelative"
:currentCase="currentCase"
:allTags="api4Data"
@data-updated="handleDataUpdated"></mrsnrelate>
<!-- 新增人物关联器 -->
<mrfnrelate v-else-if="showFNRelative"
:currentCase="currentCase"
:allTags="api6Data"
@data-updated="handleDataUpdated"></mrfnrelate>
<span v-else>點按下方關聯器，顯示醫案相關專有名詞</span>
</div>
</div>
</template>
<script>
import mrdnrelate from './mrdnrelate.vue';
import mrmnrelate from './mrmnrelate.vue';
import mrpnrelate from './mrpnrelate.vue'; // 导入方剂关联器组件
import mrsnrelate from './mrsnrelate.vue';
import mrfnrelate from './mrfnrelate.vue'; // 导入新增的人物关联器组件
export default {
name: 'mrviewer',
components: { mrdnrelate, mrmnrelate, mrpnrelate, mrsnrelate, mrfnrelate },
data() {
return {
api1Data: [],
api2Data: [],
api3Data: [], // 本草标签数据
api4Data: [], // 出处标签数据
api5Data: [], // 方剂标签数据
api6Data: [], // 新增人物标签数据
mergedData: [],
currentPage: 1,
pageSize: 1,
searchQuery: '',
sortKey: '',
sortOrders: {},
inputPage: 1,
fieldNames: {
'mrcase': '醫案全文',
'mrorigin': '醫案出處',
'mrdoctor': '醫案醫者',
'mrname': '醫案命名',
'mrposter': '醫案提交者',
'mrlasttime': '最後編輯時間',
'mreditnumber': '編輯次數',
'mrreadnumber': '閱讀次數',
'mrpriority': '重要性',
'dntag': '相關病態',
'mntag': '相關本草',
'pntag': '相關方劑',
'sntag': '相關典籍',
'fntag': '相關人物' // 新增人物字段
},
inputTimeout: null,
dnNames: [],
mnNames: [], // 本草名称列表
pnNames: [], // 方剂名称列表
snNames: [], // 出处名称列表
fnNames: [], // 新增人物名称列表
stateVersion: '1.0',
showRelative: false,
showMNRelative: false, // 控制本草关联器显示
showPNRelative: false, // 控制方剂关联器显示
showSNRelative: false, // 控制出处关联器显示
showFNRelative: false, // 新增控制人物关联器显示
currentCase: null
};
},
computed: {
filteredData() {
const query = this.searchQuery.trim();
if (query && /^\d+$/.test(query)) {
const idToSearch = parseInt(query, 10);
return this.mergedData.filter(item => item.id === idToSearch);
}
if (!query) return this.mergedData;
const lowerQuery = query.toLowerCase();
return this.mergedData.filter(item => {
return Object.values(item).some(value => {
if (value === null || value === undefined) return false;
if (Array.isArray(value)) {
return value.some(subValue => {
if (typeof subValue === 'object' && subValue !== null) {
return JSON.stringify(subValue).toLowerCase().includes(lowerQuery);
}
return String(subValue).toLowerCase().includes(lowerQuery);
});
}
if (typeof value === 'object' && value !== null) {
return JSON.stringify(value).toLowerCase().includes(lowerQuery);
}
return String(value).toLowerCase().includes(lowerQuery);
});
});
},
sortedData() {
if (!this.sortKey) return this.filteredData;
const order = this.sortOrders[this.sortKey] || 1;
return [...this.filteredData].sort((a, b) => {
const getValue = (obj) => {
const val = obj[this.sortKey];
if (Array.isArray(val)) return JSON.stringify(val);
return val;
};
const aValue = getValue(a);
const bValue = getValue(b);
if (aValue === bValue) return 0;
return aValue > bValue ? order : -order;
});
},
paginatedData() {
const start = (this.currentPage - 1) * Number(this.pageSize);
const end = start + Number(this.pageSize);
const data = this.sortedData.slice(start, end);
// 更新当前医案完整数据
if (data.length > 0) {
this.currentCase = data[0];
} else {
this.currentCase = null;
}
return data;
},
totalPages() {
return Math.ceil(this.filteredData.length / this.pageSize) || 1;
}
},
watch: {
pageSize() {
this.currentPage = 1;
this.inputPage = 1;
this.saveState();
},
currentPage(newVal) {
this.inputPage = newVal;
this.saveState();
},
filteredData() {
if (this.currentPage > this.totalPages) {
this.currentPage = Math.max(1, this.totalPages);
}
this.inputPage = this.currentPage;
},
searchQuery() {
this.saveState();
}
},
methods: {
// 处理数据更新事件
handleDataUpdated() {
// 显示操作成功的提示
alert('數據已更新，正在刷新醫案數據...');
// 刷新数据
this.fetchData();
},
// 本草关联器切换方法
toggleMNRelative() {
if (!this.showMNRelative) {
this.showRelative = false;
this.showPNRelative = false;
this.showSNRelative = false;
this.showFNRelative = false;
}
this.showMNRelative = !this.showMNRelative;
},
// 方剂关联器切换方法
togglePNRelative() {
if (!this.showPNRelative) {
this.showRelative = false;
this.showMNRelative = false;
this.showSNRelative = false;
this.showFNRelative = false;
}
this.showPNRelative = !this.showPNRelative;
},
// 出处关联器切换方法
toggleSNRelative() {
if (!this.showSNRelative) {
this.showRelative = false;
this.showMNRelative = false;
this.showPNRelative = false;
this.showFNRelative = false;
}
this.showSNRelative = !this.showSNRelative;
},
// 病态关联器切换方法
toggleRelative() {
if (this.showRelative) {
this.showRelative = false;
} else {
this.showMNRelative = false;
this.showPNRelative = false;
this.showSNRelative = false;
this.showFNRelative = false;
this.showRelative = true;
}
},
// 新增人物关联器切换方法
toggleFNRelative() {
if (!this.showFNRelative) {
this.showRelative = false;
this.showMNRelative = false;
this.showPNRelative = false;
this.showSNRelative = false;
}
this.showFNRelative = !this.showFNRelative;
},
// 病态名称HTML格式化方法 (使用橙色)
formatDntagValueHTML(dntagArray) {
return dntagArray.map(tagObj => {
const name = tagObj.dnname || tagObj.name || '未命名標籤';
return `<span style="color: rgb(212, 107, 8); font-weight: bold;">${this.escapeHtml(name)}</span>`;
}).join('；');
},
// 本草名称HTML格式化方法 (使用绿色)
formatMntagValueHTML(mntagArray) {
return mntagArray.map(tagObj => {
const name = tagObj.mnname || tagObj.name || '未命名標籤';
return `<span style="color: rgb(0, 128, 0); font-weight: bold;">${this.escapeHtml(name)}</span>`;
}).join('；');
},
// 方剂名称HTML格式化方法 (使用紫色)
formatPntagValueHTML(pntagArray) {
return pntagArray.map(tagObj => {
const name = tagObj.pnname || tagObj.name || '未命名標籤';
return `<span style="color: rgb(128, 0, 128); font-weight: bold;">${this.escapeHtml(name)}</span>`;
}).join('；');
},
// 出处名称HTML格式化方法 (使用蓝色)
formatSntagValueHTML(sntagArray) {
return sntagArray.map(tagObj => {
const name = tagObj.snname || tagObj.name || '未命名標籤';
return `<span style="color: rgb(51, 102, 255); font-weight: bold;">${this.escapeHtml(name)}</span>`;
}).join('；');
},
// 新增人物名称HTML格式化方法 (使用棕色)
formatFntagValueHTML(fntagArray) {
return fntagArray.map(tagObj => {
const name = tagObj.fnname || tagObj.name || '未命名標籤';
return `<span style="color: #8B4513; font-weight: bold;">${this.escapeHtml(name)}</span>`;
}).join('；');
},
// HTML转义方法防止XSS攻击
escapeHtml(text) {
const map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return text.replace(/[&<>"']/g, m => map[m]);
},
saveState() {
const state = {
version: this.stateVersion,
currentPage: this.currentPage,
pageSize: this.pageSize,
searchQuery: this.searchQuery,
timestamp: new Date().getTime()
};
sessionStorage.setItem('mrviewerState', JSON.stringify(state));
},
restoreState() {
const savedState = sessionStorage.getItem('mrviewerState');
if (!savedState) return;
try {
const state = JSON.parse(savedState);
if (state.version !== this.stateVersion) return;
this.currentPage = state.currentPage || 1;
this.pageSize = state.pageSize || 1;
this.searchQuery = state.searchQuery || '';
this.inputPage = this.currentPage;
} catch (e) {
sessionStorage.removeItem('mrviewerState');
}
},
clearState() {
sessionStorage.removeItem('mrviewerState');
},
async fetchData() {
try {
// 获取原有数据
const api1Response = await fetch("MRInfo/?format=json");
this.api1Data = await api1Response.json();
const api2Response = await fetch("DNTag/?format=json");
this.api2Data = await api2Response.json();
// 本草数据获取
const api3Response = await fetch("MNTag/?format=json");
this.api3Data = await api3Response.json();
// 方剂数据获取
const api5Response = await fetch("PNTag/?format=json");
this.api5Data = await api5Response.json();
// 出处数据获取
const api4Response = await fetch("SNTag/?format=json");
this.api4Data = await api4Response.json();
// 新增人物数据获取
const api6Response = await fetch("FNTag/?format=json");
this.api6Data = await api6Response.json();
// 本草名称列表
this.mnNames = this.api3Data.map(item => item.mnname).filter(name => name && name.trim());
this.mnNames.sort((a, b) => b.length - a.length);
// 方剂名称列表
this.pnNames = this.api5Data.map(item => item.pnname).filter(name => name && name.trim());
this.pnNames.sort((a, b) => b.length - a.length);
// 病态名称列表
this.dnNames = this.api2Data.map(item => item.dnname).filter(name => name && name.trim());
this.dnNames.sort((a, b) => b.length - a.length);
// 出处名称列表
this.snNames = this.api4Data.map(item => item.snname).filter(name => name && name.trim());
this.snNames.sort((a, b) => b.length - a.length);
// 新增人物名称列表
this.fnNames = this.api6Data.map(item => item.fnname).filter(name => name && name.trim());
this.fnNames.sort((a, b) => b.length - a.length);
this.mergeData();
this.currentPage = 1;
this.inputPage = 1;
this.saveState();
} catch (error) {
console.error("獲取數據失敗:", error);
alert("數據加載失敗，請稍後重試");
}
},
mergeData() {
this.mergedData = this.api1Data.map((item) => {
const newItem = { ...item };
// 处理病态标签
if (newItem.dntag && Array.isArray(newItem.dntag)) {
newItem.dntag = newItem.dntag.map((tagId) => {
const matchedItem = this.api2Data.find(api2Item => api2Item.id === tagId);
return matchedItem || { id: tagId, dnname: "未找到匹配的數據" };
});
}
// 处理本草标签
if (newItem.mntag && Array.isArray(newItem.mntag)) {
newItem.mntag = newItem.mntag.map((tagId) => {
const matchedItem = this.api3Data.find(api3Item => api3Item.id === tagId);
return matchedItem || { id: tagId, mnname: "未找到匹配的數據" };
});
}
// 处理方剂标签
if (newItem.pntag && Array.isArray(newItem.pntag)) {
newItem.pntag = newItem.pntag.map((tagId) => {
const matchedItem = this.api5Data.find(api5Item => api5Item.id === tagId);
return matchedItem || { id: tagId, pnname: "未找到匹配的數據" };
});
}
// 处理出处标签
if (newItem.sntag && Array.isArray(newItem.sntag)) {
newItem.sntag = newItem.sntag.map((tagId) => {
const matchedItem = this.api4Data.find(api4Item => api4Item.id === tagId);
return matchedItem || { id: tagId, snname: "未找到匹配的數據" };
});
}
// 新增处理人物标签
if (newItem.fntag && Array.isArray(newItem.fntag)) {
newItem.fntag = newItem.fntag.map((tagId) => {
const matchedItem = this.api6Data.find(api6Item => api6Item.id === tagId);
return matchedItem || { id: tagId, fnname: "未找到匹配的數據" };
});
}
return newItem;
});
// 初始化排序顺序
this.sortOrders = {};
if (this.mergedData.length > 0) {
Object.keys(this.mergedData[0]).forEach(key => {
this.sortOrders[key] = 1;
});
}
},
processFieldNames(item) {
const result = {};
for (const key in item) {
const newKey = this.fieldNames[key] || key;
result[newKey] = item[key];
}
return result;
},
formatValue(value, fieldName) {
if (value === null || value === undefined) return '';
// 醫案全文的高亮（保持不变）
if (fieldName === '醫案全文' && typeof value === 'string') {
let highlighted = this.highlightMatches(value, this.dnNames, 'rgb(212, 107, 8)');
highlighted = this.highlightMatches(highlighted, this.mnNames, 'rgb(0, 128, 0)');
highlighted = this.highlightMatches(highlighted, this.pnNames, 'rgb(128, 0, 128)');
highlighted = this.highlightMatches(highlighted, this.snNames, 'rgb(51, 102, 255)');
highlighted = this.highlightMatches(highlighted, this.fnNames, '#8B4513');
return highlighted;
}
// 醫案出處字段：高亮相关典籍（蓝色）
else if (fieldName === '醫案出處' && typeof value === 'string') {
return this.highlightMatches(value, this.snNames, 'rgb(51, 102, 255)');
}
// 醫案醫者字段：高亮相关人物（棕色）
else if (fieldName === '醫案醫者' && typeof value === 'string') {
return this.highlightMatches(value, this.fnNames, '#8B4513');
}
// 其他字段处理（保持不变）
if (typeof value === 'string' && value.startsWith('http')) {
return `<a href="${value}" target="_blank">${value}</a>`;
}
return value;
},
// 改进的高亮方法，支持不同颜色
highlightMatches(text, words, color) {
if (!text || typeof text !== 'string' || words.length === 0) {
return text;
}
const pattern = new RegExp(
words
.map(name => name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
.join('|'),
'gi'
);
return text.replace(pattern, match =>
`<span style="color: ${color}; font-weight: bold;">${this.escapeHtml(match)}</span>`
);
},
sortBy(key) {
const originalKey = Object.keys(this.fieldNames).find(
origKey => this.fieldNames[origKey] === key
) || key;
this.sortKey = originalKey;
this.sortOrders[originalKey] = this.sortOrders[originalKey] * -1;
this.saveState();
},
prevPage() {
if (this.currentPage > 1) {
this.currentPage--;
this.saveState();
}
},
nextPage() {
if (this.currentPage < this.totalPages) {
this.currentPage++;
this.saveState();
}
},
handlePageInput() {
clearTimeout(this.inputTimeout);
this.inputTimeout = setTimeout(() => {
this.
goToPage();
this.saveState();
}, 300);
},
goToPage() {
if (this.inputPage === null || this.inputPage === undefined || this.inputPage === '') {
this.inputPage = this.currentPage;
return;
}
const page = parseInt(this.inputPage);
if (isNaN(page)) {
this.inputPage = this.currentPage;
return;
}
if (page < 1) {
this.currentPage = 1;
} else if (page > this.totalPages) {
this.currentPage = this.totalPages;
} else {
this.currentPage = page;
}
this.inputPage = this.currentPage;
}
},
mounted() {
this.restoreState();
this.fetchData();
},
activated() {
this.restoreState();
},
deactivated() {
this.saveState();
}
};
</script>
<style scoped>
.container {
max-width: 1200px;
margin: 0px;
padding: 0px;
}
.control-panel {
margin-bottom: 0px;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ffd800ff;
z-index: 999;
padding: 10px 20px;
box-sizing: border-box;
}
.content-area {
position: fixed;
top: 56px;
bottom: 45px;
left: 0;
width: 70%;
background: white;
padding: 1px;
z-index: 100;
overflow-y: auto;
}
.relative-area {
position: fixed;
top: 56px;
bottom: 45px;
right: 0;
width: 30%;
background: lightblue;
padding: 1px;
z-index: 100;
overflow-y: auto;
}
.refresh-btn, .relative-btn {
padding: 4px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.refresh-btn:hover, .relative-btn:hover {
background-color: #45a049;
}
.search-input {
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
flex-grow: 1;
max-width: 300px;
}
.pagination-controls {
display: flex;
align-items: center;
gap: 5px;
}
.page-size-select {
padding: 4px;
border-radius: 4px;
width: 70px;
}
.page-input {
width: 50px;
padding: 4px;
border: 1px solid #ddd;
border-radius: 4px;
text-align: center;
}
.horizontal-records {
display: flex;
flex-direction: column;
gap: 20px;
}
.record-card {
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.record-header {
padding: 12px 16px;
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
}
.record-header h3 {
margin: 0;
font-size: 1.1em;
}
.record-body {
padding: 16px;
}
.record-field {
display: flex;
margin-bottom: 12px;
line-height: 1.5;
}
.record-field:last-child {
margin-bottom: 0;
}
.field-name {
font-weight: bold;
min-width: 120px;
color: #555;
}
.field-value {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dntag-value {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* 本草名称样式 */
.mntag-value {
display: flex;
flex-wrap: wrap;
gap: 8px;
color: #006400; /* 深绿色 */
font-weight: 500;
}
/* 方剂名称样式 */
.pntag-value {
display: flex;
flex-wrap: wrap;
gap: 8px;
color: #800080; /* 紫色 */
font-weight: 500;
}
/* 出处名称样式 */
.sntag-value {
display: flex;
flex-wrap: wrap;
gap: 8px;
color: #0094ff; /* 靛蓝->蓝色 */
font-weight: 500;
}
/* 新增人物名称样式 */
.fntag-value {
display: flex;
flex-wrap: wrap;
gap: 8px;
color: #8B4513; /* 棕色 */
font-weight: 500;
}
.array-value {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.no-data {
padding: 20px;
text-align: center;
color: #666;
font-style: italic;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
</style>
mrviewer.vue:
<!-- mrviewer.vue -->
<template>
<div class="container">
<!-- 控制面板 -->
<div class="control-panel">
<button @click="fetchData" class="refresh-btn">刷新數據</button>
<button @click="toggleRelative" class="relative-btn">
{{ showRelative ? '病態關聯' : '病態關聯' }}
</button>
<!-- 本草关联器按钮 -->
<button @click="toggleMNRelative" class="relative-btn">
{{ showMNRelative ? '本草關聯' : '本草關聯' }}
</button>
<!-- 方剂关联器按钮 -->
<button @click="togglePNRelative" class="relative-btn">
{{ showPNRelative ? '方劑關聯' : '方劑關聯' }}
</button>
<!-- 出处关联器按钮 -->
<button @click="toggleSNRelative" class="relative-btn">
{{ showSNRelative ? '典籍關聯' : '典籍關聯' }}
</button>
<!-- 人物关联器按钮 -->
<button @click="toggleFNRelative" class="relative-btn">
{{ showFNRelative ? '人物關聯' : '人物關聯' }}
</button>
<!-- 新增辨證关联器按钮 -->
<button @click="toggleDianNRelative" class="relative-btn">
{{ showDianNRelative ? '辨證關聯' : '辨證關聯' }}
</button>
<input v-model="searchQuery"
placeholder="搜索..."
class="search-input" />
<div class="pagination-controls">
<span>每頁顯示:</span>
<select v-model.number="pageSize" class="page-size-select">
<option value="1">1筆</option>
<option value="4">4筆</option>
<option value="10">10筆</option>
</select>
<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
<span>第</span>
<input type="number"
v-model.number="inputPage"
min="1"
:max="totalPages"
class="page-input"
@input="handlePageInput">
<span>頁 / 共 {{ totalPages }} 頁</span>
<button @click ="nextPage" :disabled="currentPage === totalPages">
下一頁</button>
<span>醫案閱讀器</span>
</div>
</div>
<!-- 主内容区域 -->
<div class="content-area">
<div class="horizontal-records" v-if="filteredData.length > 0">
<div v-for="(item, index) in paginatedData" :key="item.id" class="record-card">
<div class="record-header">
<h3>醫案 #{{ (currentPage - 1) * pageSize + index + 1 }}</h3>
</div>
<div class="record-body">
<div v-for="(value, key) in processFieldNames(item)" :key="key" class="record-field">
<div class="field-name">{{ key }}:</div>
<div class="field-value">
<!-- 病态名称 -->
<div v-if="key === '相關病態' && Array.isArray(value)"
class="dntag-value"
v-html="formatDntagValueHTML(value)"></div>
<!-- 本草名称 -->
<div v-else-if="key === '相關本草' && Array.isArray(value)"
class="mntag-value"
v-html="formatMntagValueHTML(value)"></div>
<!-- 方剂名称 -->
<div v-else-if="key === '相關方劑' && Array.isArray(value)"
class="pntag-value"
v-html="formatPntagValueHTML(value)"></div>
<!-- 出处名称 -->
<div v-else-if="key === '相關典籍' && Array.isArray(value)"
class="sntag-value"
v-html="formatSntagValueHTML(value)"></div>
<!-- 人物名称 -->
<div v-else-if="key === '相關人物' && Array.isArray(value)"
class="fntag-value"
v-html="formatFntagValueHTML(value)"></div>
<!-- 辨證名称 -->
<div v-else-if="key === '相關辨證' && Array.isArray(value)"
class="diantag-value"
v-html="formatDiantagValueHTML(value)"></div>
<div v-else-if="Array.isArray(value)" class="array-value">
<span v-for="(subItem, subIndex) in value" :key="subIndex">
<span v-html="formatValue(subItem, key)"></span><span v-if="subIndex < value.length - 1">；</span>
</span>
</div>
<div v-else v-html="formatValue(value, key)"></div>
</div>
</div>
</div>
</div>
</div>
<div v-else class="no-data">
沒有找到匹配的數據
</div>
</div>
<!-- 相关区域 -->
<div class="relative-area">
<mrdnrelate v-if="showRelative"
:currentCase="currentCase"
:allTags="api2Data"
@data-updated="handleDataUpdated"></mrdnrelate>
<!-- 本草关联器 -->
<mrmnrelate v-else-if="showMNRelative"
:currentCase="currentCase"
:allTags="api3Data"
@data-updated="handleDataUpdated"></mrmnrelate>
<!-- 方剂关联器 -->
<mrpnrelate v-else-if="showPNRelative"
:currentCase="currentCase"
:allTags="api5Data"
@data-updated="handleDataUpdated"></mrpnrelate>
<!-- 出处关联器 -->
<mrsnrelate v-else-if="showSNRelative"
:currentCase="currentCase"
:allTags="api4Data"
@data-updated="handleDataUpdated"></mrsnrelate>
<!-- 人物关联器 -->
<mrfnrelate v-else-if="showFNRelative"
:currentCase="currentCase"
:allTags="api6Data"
@data-updated="handleDataUpdated"></mrfnrelate>
<!-- 新增辨證关联器 -->
<mrdianrelate v-else-if="showDianNRelative"
:currentCase="currentCase"
:allTags="api7Data"
@data-updated="handleDataUpdated"></mrdianrelate>
<span v-else>點按下方關聯器，顯示醫案相關專有名詞</span>
</div>
</div>
</template>
<script>
import mrdnrelate from './mrdnrelate.vue';
import mrmnrelate from './mrmnrelate.vue';
import mrpnrelate from './mrpnrelate.vue';
import mrsnrelate from './mrsnrelate.vue';
import mrfnrelate from './mrfnrelate.vue';
import mrdianrelate from './mrdianrelate.vue'; // 导入辨證关联器组件
export default {
name: 'mrviewer',
components: { mrdnrelate, mrmnrelate, mrpnrelate, mrsnrelate, mrfnrelate, mrdianrelate },
data() {
return {
api1Data: [],
api2Data: [],
api3Data: [],
api4Data: [],
api5Data: [],
api6Data: [],
api7Data: [], // 辨證标签数据
mergedData: [],
currentPage: 1,
pageSize: 1,
searchQuery: '',
sortKey: '',
sortOrders: {},
inputPage: 1,
fieldNames: {
'mrcase': '醫案全文',
'mrorigin': '醫案出處',
'mrdoctor': '醫案醫者',
'mrname': '醫案命名',
'mrposter': '醫案提交者',
'mrlasttime': '最後編輯時間',
'mreditnumber': '編輯次數',
'mrreadnumber': '閱讀次數',
'mrpriority': '重要性',
'dntag': '相關病態',
'mntag': '相關本草',
'pntag': '相關方劑',
'sntag': '相關典籍',
'fntag': '相關人物',
'diantag': '相關辨證' // 新增辨證字段
},
inputTimeout: null,
dnNames: [],
mnNames: [],
pnNames: [],
snNames: [],
fnNames: [],
dianNames: [], // 辨證名称列表
stateVersion: '1.0',
showRelative: false,
showMNRelative: false,
showPNRelative: false,
showSNRelative: false,
showFNRelative: false,
showDianNRelative: false, // 控制辨證关联器显示
currentCase: null
};
},
computed: {
filteredData() {
const query = this.searchQuery.trim();
if (query && /^\d+$/.test(query)) {
const idToSearch = parseInt(query, 10);
return this.mergedData.filter(item => item.id === idToSearch);
}
if (!query) return this.mergedData;
const lowerQuery = query.toLowerCase();
return this.mergedData.filter(item => {
return Object.values(item).some(value => {
if (value === null || value === undefined) return false;
if (Array.isArray(value)) {
return value.some(subValue => {
if (typeof subValue === 'object' && subValue !== null) {
return JSON.stringify(subValue).toLowerCase().includes(lowerQuery);
}
return String(subValue).toLowerCase().includes(lowerQuery);
});
}
if (typeof value === 'object' && value !== null) {
return JSON.stringify(value).toLowerCase().includes(lowerQuery);
}
return String(value).toLowerCase().includes(lowerQuery);
});
});
},
sortedData() {
if (!this.sortKey) return this.filteredData;
const order = this.sortOrders[this.sortKey] || 1;
return [...this.filteredData].sort((a, b) => {
const getValue = (obj) => {
const val = obj[this.sortKey];
if (Array.isArray(val)) return JSON.stringify(val);
return val;
};
const aValue = getValue(a);
const bValue = getValue(b);
if (aValue === bValue) return 0;
return aValue > bValue ? order : -order;
});
},
paginatedData() {
const start = (this.currentPage - 1) * Number(this.pageSize);
const end = start + Number(this.pageSize);
const data = this.sortedData.slice(start, end);
if (data.length > 0) {
this.currentCase = data[0];
} else {
this.currentCase = null;
}
return data;
},
totalPages() {
return Math.ceil(this.filteredData.length / this.pageSize) || 1;
}
},
watch: {
pageSize() {
this.currentPage = 1;
this.inputPage = 1;
this.saveState();
},
currentPage(newVal) {
this.inputPage = newVal;
this.saveState();
},
filteredData() {
if (this.currentPage > this.totalPages) {
this.currentPage = Math.max(1, this.totalPages);
}
this.inputPage = this.currentPage;
},
searchQuery() {
this.saveState();
}
},
methods: {
handleDataUpdated() {
alert('數據已更新，正在刷新醫案數據...');
this.fetchData();
},
toggleMNRelative() {
if (!this.showMNRelative) {
this.showRelative = false;
this.showPNRelative = false;
this.showSNRelative = false;
this.showFNRelative = false;
this.showDianNRelative = false;
}
this.showMNRelative = !this.showMNRelative;
},
togglePNRelative() {
if (!this.showPNRelative) {
this.showRelative = false;
this.showMNRelative = false;
this.showSNRelative = false;
this.showFNRelative = false;
this.showDianNRelative = false;
}
this.showPNRelative = !this.showPNRelative;
},
toggleSNRelative() {
if (!this.showSNRelative) {
this.showRelative = false;
this.showMNRelative = false;
this.showPNRelative = false;
this.showFNRelative = false;
this.showDianNRelative = false;
}
this.showSNRelative = !this.showSNRelative;
},
toggleRelative() {
if (this.showRelative) {
this.showRelative = false;
} else {
this.showMNRelative = false;
this.showPNRelative = false;
this.showSNRelative = false;
this.showFNRelative = false;
this.showDianNRelative = false;
this.showRelative = true;
}
},
toggleFNRelative() {
if (!this.showFNRelative) {
this.showRelative = false;
this.showMNRelative = false;
this.showPNRelative = false;
this.showSNRelative = false;
this.showDianNRelative = false;
}
this.showFNRelative = !this.showFNRelative;
},
// 辨證关联器切换方法
toggleDianNRelative() {
if (!this.showDianNRelative) {
this.showRelative = false;
this.showMNRelative = false;
this.showPNRelative = false;
this.showSNRelative = false;
this.showFNRelative = false;
}
this.showDianNRelative = !this.showDianNRelative;
},
// 辨證名称HTML格式化方法 (使用红色)
formatDiantagValueHTML(diantagArray) {
return diantagArray.map(tagObj => {
const name = tagObj.dianname || tagObj.name || '未命名標籤';
return `<span style="color: rgb(255, 0, 0); font-weight: bold;">${this.escapeHtml(name)}</span>`;
}).join('；');
},
escapeHtml(text) {
const map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return text.replace(/[&<>"']/g, m => map[m]);
},
saveState() {
const state = {
version: this.stateVersion,
currentPage: this.currentPage,
pageSize: this.pageSize,
searchQuery: this.searchQuery,
timestamp: new Date().getTime()
};
sessionStorage.setItem('mrviewerState', JSON.stringify(state));
},
restoreState() {
const savedState = sessionStorage.getItem('mrviewerState');
if (!savedState) return;
try {
const state = JSON.parse(savedState);
if (state.version !== this.stateVersion) return;
this.currentPage = state.currentPage || 1;
this.pageSize = state.pageSize || 1;
this.searchQuery = state.searchQuery || '';
this.inputPage = this.currentPage;
} catch (e) {
sessionStorage.removeItem('mrviewerState');
}
},
async fetchData() {
try {
// 获取原有数据
const api1Response = await fetch("MRInfo/?format=json");
this.api1Data = await api1Response.json();
const api2Response = await fetch("DNTag/?format=json");
this.api2Data = await api2Response.json();
const api3Response = await fetch("MNTag/?format=json");
this.api3Data = await api3Response.json();
const api4Response = await fetch("SNTag/?format=json");
this.api4Data = await api4Response.json();
const api5Response = await fetch("PNTag/?format=json");
this.api5Data = await api5Response.json();
const api6Response = await fetch("FNTag/?format=json");
this.api6Data = await api6Response.json();
// 辨證数据获取
const api7Response = await fetch("DiaNTag/?format=json");
this.api7Data = await api7Response.json();
// 本草名称列表
this.mnNames = this.api3Data.map(item => item.mnname).filter(name => name && name.trim());
this.mnNames.sort((a, b) => b.length - a.length);
// 方剂名称列表
this.pnNames = this.api5Data.map(item => item.pnname).filter(name => name && name.trim());
this.pnNames.sort((a, b) => b.length - a.length);
// 病态名称列表
this.dnNames = this.api2Data.map(item => item.dnname).filter(name => name && name.trim());
this.dnNames.sort((a, b) => b.length - a.length);
// 出处名称列表
this.snNames = this.api4Data.map(item => item.snname).filter(name => name && name.trim());
this.snNames.sort((a, b) => b.length - a.length);
// 人物名称列表
this.fnNames = this.api6Data.map(item => item.fnname).filter(name => name && name.trim());
this.fnNames.sort((a, b) => b.length - a.length);
// 辨證名称列表
this.dianNames = this.api7Data.map(item => item.dianname).filter(name => name && name.trim());
this.dianNames.sort((a, b) => b.length - a.length);
this.mergeData();
this.currentPage = 1;
this.inputPage = 1;
this.saveState();
} catch (error) {
console.error("獲取數據失敗:", error);
alert("數據加載失敗，請稍後重試");
}
},
mergeData() {
this.mergedData = this.api1Data.map((item) => {
const newItem = { ...item };
// 处理病态标签
if (newItem.dntag && Array.isArray(newItem.dntag)) {
newItem.dntag = newItem.dntag.map((tagId) => {
const matchedItem = this.api2Data.find(api2Item => api2Item.id === tagId);
return matchedItem || { id: tagId, dnname: "未找到匹配的數據" };
});
}
// 处理本草标签
if (newItem.mntag && Array.isArray(newItem.mntag)) {
newItem.mntag = newItem.mntag.map((tagId) => {
const matchedItem = this.api3Data.find(api3Item => api3Item.id === tagId);
return matchedItem || { id: tagId, mnname: "未找到匹配的數據" };
});
}
// 处理方剂标签
if (newItem.pntag && Array.isArray(newItem.pntag)) {
newItem.pntag = newItem.pntag.map((tagId) => {
const matchedItem = this.api5Data.find(api5Item => api5Item.id === tagId);
return matchedItem || { id: tagId, pnname: "未找到匹配的數據" };
});
}
// 处理出处标签
if (newItem.sntag && Array.isArray(newItem.sntag)) {
newItem.sntag = newItem.sntag.map((tagId) => {
const matchedItem = this.api4Data.find(api4Item => api4Item.id === tagId);
return matchedItem || { id: tagId, snname: "未找到匹配的數據" };
});
}
// 处理人物标签
if (newItem.fntag && Array.isArray(newItem.fntag)) {
newItem.fntag = newItem.fntag.map((tagId) => {
const matchedItem = this.api6Data.find(api6Item => api6Item.id === tagId);
return matchedItem || { id: tagId, fnname: "未找到匹配的數據" };
});
}
// 处理辨證标签
if (newItem.diantag && Array.isArray(newItem.diantag)) {
newItem.diantag = newItem.diantag.map((tagId) => {
const matchedItem = this.api7Data.find(api7Item => api7Item.id === tagId);
return matchedItem || { id: tagId, dianname: "未找到匹配的數據" };
});
}
return newItem;
});
// 初始化排序顺序
this.sortOrders = {};
if (this.mergedData.length > 0) {
Object.keys(this.mergedData[0]).forEach(key => {
this.sortOrders[key] = 1;
});
}
},
processFieldNames(item) {
const result = {};
for (const key in item) {
const newKey = this.fieldNames[key] || key;
result[newKey] = item[key];
}
return result;
},
formatValue(value, fieldName) {
if (value === null || value === undefined) return '';
// 醫案全文的高亮
if (fieldName === '醫案全文' && typeof value === 'string') {
let highlighted = this.highlightMatches(value, this.dnNames, 'rgb(212, 107, 8)');
highlighted = this.highlightMatches(highlighted, this.mnNames, 'rgb(0, 128, 0)');
highlighted = this.highlightMatches(highlighted, this.pnNames, 'rgb(128, 0, 128)');
highlighted = this.highlightMatches(highlighted, this.snNames, 'rgb(51, 102, 255)');
highlighted = this.highlightMatches(highlighted, this.fnNames, '#8B4513');
highlighted = this.highlightMatches(highlighted, this.dianNames, 'rgb(255, 0, 0)'); // 辨證高亮
return highlighted;
}
// 醫案出處字段
else if (fieldName === '醫案出處' && typeof value === 'string') {
return this.highlightMatches(value, this.snNames, 'rgb(51, 102, 255)');
}
// 醫案醫者字段
else if (fieldName === '醫案醫者' && typeof value === 'string') {
return this.highlightMatches(value, this.fnNames, '#8B4513');
}
if (typeof value === 'string' && value.startsWith('http')) {
return `<a href="${value}" target="_blank">${value}</a>`;
}
return value;
},
highlightMatches(text, words, color) {
if (!text || typeof text !== 'string' || words.length === 0) {
return text;
}
const pattern = new RegExp(
words
.map(name => name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
.join('|'),
'gi'
);
return text.replace(pattern, match =>
`<span style="color: ${color}; font-weight: bold;">${this.escapeHtml(match)}</span>`
);
},
prevPage() {
if (this.currentPage > 1) {
this.currentPage--;
this.saveState();
}
},
nextPage() {
if (this.currentPage < this.totalPages) {
this.currentPage++;
this.saveState();
}
},
handlePageInput() {
clearTimeout(this.inputTimeout);
this.inputTimeout = setTimeout(() => {
this.
goToPage();
this.saveState();
}, 300);
},
goToPage() {
if (this.inputPage === null || this.inputPage === undefined || this.inputPage === '') {
this.inputPage = this.currentPage;
return;
}
const page = parseInt(this.inputPage);
if (isNaN(page)) {
this.inputPage = this.currentPage;
return;
}
if (page < 1) {
this.currentPage = 1;
} else if (page > this.totalPages) {
this.currentPage = this.totalPages;
} else {
this.currentPage = page;
}
this.inputPage = this.currentPage;
}
},
mounted() {
this.restoreState();
this.fetchData();
},
activated() {
this.restoreState();
},
deactivated() {
this.saveState();
}
};
</script>
<style scoped>
.container {
max-width: 1200px;
margin: 0px;
padding: 0px;
}
.control-panel {
margin-bottom: 0px;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ffd800ff;
z-index: 999;
padding: 10px 20px;
box-sizing: border-box;
}
.content-area {
position: fixed;
top: 56px;
bottom: 45px;
left: 0;
width: 70%;
background: white;
padding: 1px;
z-index: 100;
overflow-y: auto;
}
.relative-area {
position: fixed;
top: 56px;
bottom: 45px;
right: 0;
width: 30%;
background: lightblue;
padding: 1px;
z-index: 100;
overflow-y: auto;
}
.refresh-btn, .relative-btn {
padding: 4px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.refresh-btn:hover, .relative-btn:hover {
background-color: #45a049;
}
.search-input {
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
flex-grow: 1;
max-width: 300px;
}
.pagination-controls {
display: flex;
align-items: center;
gap: 5px;
}
.page-size-select {
padding: 4px;
border-radius: 4px;
width: 70px;
}
.page-input {
width: 50px;
padding: 4px;
border: 1px solid #ddd;
border-radius: 4px;
text-align: center;
}
.horizontal-records {
display: flex;
flex-direction: column;
gap: 20px;
}
.record-card {
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.record-header {
padding: 12px 16px;
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
}
.record-header h3 {
margin: 0;
font-size: 1.1em;
}
.record-body {
padding: 16px;
}
.record-field {
display: flex;
margin-bottom: 12px;
line-height: 1.5;
}
.record-field:last-child {
margin-bottom: 0;
}
.field-name {
font-weight: bold;
min-width: 120px;
color: #555;
}
.field-value {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dntag-value {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mntag-value {
display: flex;
flex-wrap: wrap;
gap: 8px;
color: #006400;
font-weight: 500;
}
.pntag-value {
display: flex;
flex-wrap: wrap;
gap: 8px;
color: #800080;
font-weight: 500;
}
.sntag-value {
display: flex;
flex-wrap: wrap;
gap: 8px;
color: #0094ff;
font-weight: 500;
}
.fntag-value {
display: flex;
flex-wrap: wrap;
gap: 8px;
color: #8B4513;
font-weight: 500;
}
/* 辨證名称样式 */
.diantag-value {
display: flex;
flex-wrap: wrap;
gap: 8px;
color: rgb(255, 0, 0);
font-weight: 500;
}
.array-value {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.no-data {
padding: 20px;
text-align: center;
color: #666;
font-style: italic;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
</style>
本文介绍了一个简单的分页查询实现方法，通过更改页面索引来触发数据更新，并使用SQL语句来实现特定的分页效果。同时展示了如何通过事件传递新旧页面索引。
扫一扫
408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
