78 lines
2.3 KiB
Plaintext
78 lines
2.3 KiB
Plaintext
import { WaterMonitor } from '../components/WaterMonitor';
|
|
import { DeviceAlarm } from '../components/DeviceAlarm';
|
|
import { AiPredict } from '../components/AiPredict';
|
|
import { ContrastAnalysis } from '../components/ContrastAnalysis';
|
|
import { CarbonCalc } from '../components/CarbonCalc';
|
|
import DeviceListInterface from '../model/DeviceListInterface';
|
|
|
|
@Entry
|
|
@Component
|
|
struct Details {
|
|
@State currentIndex: number = 0;
|
|
@State currentDevice: DeviceListInterface | null = null;
|
|
|
|
private navItems: string[] = ['水情检测', '设备报警', 'AI预测', '对比分析', '碳汇计算'];
|
|
|
|
aboutToAppear(): void {
|
|
const device = AppStorage.get<DeviceListInterface>('point');
|
|
if (device) {
|
|
this.currentDevice = device;
|
|
}
|
|
}
|
|
|
|
build() {
|
|
Column() {
|
|
// 内容区域
|
|
Column() {
|
|
if (this.currentIndex === 0) {
|
|
WaterMonitor()
|
|
} else if (this.currentIndex === 1) {
|
|
DeviceAlarm()
|
|
} else if (this.currentIndex === 2) {
|
|
AiPredict()
|
|
} else if (this.currentIndex === 3) {
|
|
ContrastAnalysis()
|
|
} else {
|
|
CarbonCalc()
|
|
}
|
|
}
|
|
.width('100%')
|
|
.layoutWeight(1)
|
|
|
|
// 底部导航 - 科技蓝风格
|
|
Row() {
|
|
ForEach(this.navItems, (item: string, index: number) => {
|
|
Column({ space: 4 }) {
|
|
Image($rawfile(this.currentIndex === index
|
|
? `daohang/ic_tab_0${index + 1}_active.png`
|
|
: `daohang/ic_tab_0${index + 1}.png`))
|
|
.width(24)
|
|
.height(24)
|
|
|
|
Text(item)
|
|
.fontSize(11)
|
|
.fontColor(this.currentIndex === index ? '#FFFFFF' : 'rgba(255,255,255,0.5)')
|
|
.fontWeight(this.currentIndex === index ? FontWeight.Bold : FontWeight.Normal)
|
|
}
|
|
.width('20%')
|
|
.justifyContent(FlexAlign.Center)
|
|
.onClick(() => {
|
|
this.currentIndex = index;
|
|
})
|
|
})
|
|
}
|
|
.width('100%')
|
|
.height(65)
|
|
.backgroundColor('rgba(13,40,71,0.95)')
|
|
.borderWidth({ top: 1 })
|
|
.borderColor('rgba(22,119,255,0.3)')
|
|
.justifyContent(FlexAlign.SpaceEvenly)
|
|
}
|
|
.width('100%')
|
|
.height('100%')
|
|
.linearGradient({
|
|
angle: 180,
|
|
colors: [['#0a1628', 0], ['#0d2847', 0.5], ['#1677FF', 1]]
|
|
})
|
|
}
|
|
} |