|
|
@@ -6,7 +6,7 @@
|
|
|
<view class="tab-item" v-for="(tab, idx) in tabs" :key="idx"
|
|
|
:class="'tab-' + (selectedTab === tab.key ? 'active' : '')"
|
|
|
@tap="selectedTab = tab.key">
|
|
|
- <text>{{ tab.label }}</text>
|
|
|
+ <text>{{ tab.label }} <text class="tab-count">{{ tabCounts[tab.key] }}</text></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -22,8 +22,10 @@
|
|
|
<text class="flora-level-tag" v-if="item.level && item.level !== 'GENUS'">{{ item.level }}</text>
|
|
|
</view>
|
|
|
<view class="flora-details" v-if="!isEditing">
|
|
|
- <text class="detail-text">丰度 {{ item.bacteriaValue || '--' }} | 正常 {{ item.normalRange || '--' }}</text>
|
|
|
- <text class="detail-text">人群 {{ item.populationLevel || '--' }} | 检出 {{ item.detectionRate || '--' }}</text>
|
|
|
+ <text class="detail-item">人群 {{ item.populationLevel || '--' }}</text>
|
|
|
+ <text class="detail-item">检出 {{ item.detectionRate || '--' }}</text>
|
|
|
+ <text class="detail-item">丰度 {{ item.bacteriaValue || '--' }}</text>
|
|
|
+ <text class="detail-item">正常 {{ item.normalRange || '--' }}</text>
|
|
|
</view>
|
|
|
<view class="flora-edit-row" v-if="isEditing">
|
|
|
<text class="edit-label">丰度:</text>
|
|
|
@@ -83,9 +85,35 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
+ /** 每个查询标签对应的菌群数量 */
|
|
|
+ tabCounts: function() {
|
|
|
+ var self = this
|
|
|
+ var counts = {}
|
|
|
+ for (var i = 0; i < this.tabs.length; i++) {
|
|
|
+ var key = this.tabs[i].key
|
|
|
+ counts[key] = self._getTabList(key).length
|
|
|
+ }
|
|
|
+ return counts
|
|
|
+ },
|
|
|
filteredFlora: function() {
|
|
|
+ return this._getTabList(this.selectedTab)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad: function(options) {
|
|
|
+ this.reportId = options.reportId ? parseInt(options.reportId) : null
|
|
|
+ if (options.tab) {
|
|
|
+ this.selectedTab = options.tab
|
|
|
+ }
|
|
|
+ if (this.reportId) {
|
|
|
+ this.loadData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goBack: function() { uni.navigateBack() },
|
|
|
+ /** 按 tabKey 过滤菌群列表(filteredFlora 与 tabCounts 共用) */
|
|
|
+ _getTabList: function(tabKey) {
|
|
|
var list = this.isEditing ? this.editFlora : this.gutFlora
|
|
|
- if (this.selectedTab === 'all') return list
|
|
|
+ if (tabKey === 'all') return list
|
|
|
// 中文 category 映射到英文 tab key(兼容旧数据)
|
|
|
var catToTab = {
|
|
|
'core': 'core', '核心菌': 'core', '核心菌属': 'core',
|
|
|
@@ -95,13 +123,13 @@ export default {
|
|
|
'pathogen_genus': 'pathogen_genus', '病原菌属': 'pathogen_genus',
|
|
|
'pathogen_detection': 'pathogen_detection', '病原菌': 'pathogen_detection', '致病菌': 'pathogen_detection'
|
|
|
}
|
|
|
- if (this.selectedTab === 'probiotic') {
|
|
|
+ if (tabKey === 'probiotic') {
|
|
|
return this.isEditing
|
|
|
? this.editFlora.filter(function(i) { return (catToTab[i.category] || i.category) === 'probiotic' })
|
|
|
: this.probioticSpecies
|
|
|
}
|
|
|
// Taxonomy tabs: filter by category='taxonomy' + level
|
|
|
- if (this.selectedTab.indexOf('taxonomy_') === 0) {
|
|
|
+ if (tabKey.indexOf('taxonomy_') === 0) {
|
|
|
var levelMap = {
|
|
|
'taxonomy_phylum': 'PHYLUM',
|
|
|
'taxonomy_class': 'CLASS',
|
|
|
@@ -110,32 +138,20 @@ export default {
|
|
|
'taxonomy_genus': 'GENUS',
|
|
|
'taxonomy_species': 'SPECIES'
|
|
|
}
|
|
|
- var targetLevel = levelMap[this.selectedTab]
|
|
|
+ var targetLevel = levelMap[tabKey]
|
|
|
return list.filter(function(item) {
|
|
|
return item.category === 'taxonomy' && item.level === targetLevel
|
|
|
})
|
|
|
}
|
|
|
// Other category tabs
|
|
|
- var targetTab = catToTab[this.selectedTab]
|
|
|
+ var targetTab = catToTab[tabKey]
|
|
|
if (targetTab) {
|
|
|
return list.filter(function(item) {
|
|
|
return (catToTab[item.category] || item.category) === targetTab
|
|
|
})
|
|
|
}
|
|
|
return []
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad: function(options) {
|
|
|
- this.reportId = options.reportId ? parseInt(options.reportId) : null
|
|
|
- if (options.tab) {
|
|
|
- this.selectedTab = options.tab
|
|
|
- }
|
|
|
- if (this.reportId) {
|
|
|
- this.loadData()
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- goBack: function() { uni.navigateBack() },
|
|
|
+ },
|
|
|
/** 中文状态 → CSS安全英文 */
|
|
|
_cssForStatus: function(s) {
|
|
|
var map = { '偏高': 'high', '过多': 'excess', '偏低': 'low', '缺乏': 'deficient', '不足': 'insufficient' }
|
|
|
@@ -237,6 +253,7 @@ export default {
|
|
|
.tabs { background: #fff; padding: 10rpx 20rpx; display: flex; flex-wrap: wrap; border-bottom: 1rpx solid #eee; }
|
|
|
.tab-item { display: inline-block; padding: 12rpx 24rpx; margin: 6rpx; border-radius: 30rpx; font-size: 24rpx; background: #f0f0f0; color: #666; }
|
|
|
.tab-active { background: #4A9BD7; color: #fff; }
|
|
|
+.tab-count { font-size: 20rpx; opacity: 0.7; margin-left: 6rpx; }
|
|
|
.content { padding: 20rpx 30rpx; height: calc(100vh - 200rpx); }
|
|
|
.flora-card { background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 16rpx; }
|
|
|
.flora-header { display: flex; align-items: center; margin-bottom: 10rpx; }
|
|
|
@@ -249,7 +266,8 @@ export default {
|
|
|
.arrow-up { color: #C62828; font-size: 22rpx; }
|
|
|
.arrow-down { color: #E65100; font-size: 22rpx; }
|
|
|
.flora-level-tag { padding: 2rpx 12rpx; background: #E3F2FD; border-radius: 16rpx; font-size: 20rpx; color: #4A9BD7; }
|
|
|
-.detail-text { font-size: 24rpx; color: #999; display: block; line-height: 1.8; }
|
|
|
+.flora-details { display: flex; align-items: center; }
|
|
|
+.detail-item { flex: 1; font-size: 22rpx; color: #999; text-align: center; white-space: nowrap; }
|
|
|
.flora-edit-row { display: flex; align-items: center; gap: 12rpx; flex-wrap: wrap; }
|
|
|
.edit-label { font-size: 26rpx; color: #666; }
|
|
|
.edit-input { border: 1rpx solid #ddd; border-radius: 8rpx; padding: 8rpx 12rpx; font-size: 26rpx; width: 140rpx; }
|