|
@@ -0,0 +1,260 @@
|
|
|
|
|
+import { VMHome } from '../../vm/VMHome'
|
|
|
|
|
+import { VMHomeTab } from '../../vm/VMHomeTab'
|
|
|
|
|
+
|
|
|
|
|
+/**
|
|
|
|
|
+ * 首页Tab页面
|
|
|
|
|
+ */
|
|
|
|
|
+@Component
|
|
|
|
|
+export struct TabHome {
|
|
|
|
|
+ // 父组件传递
|
|
|
|
|
+ @Link vmHome: VMHome
|
|
|
|
|
+ // 页面状态
|
|
|
|
|
+ @State vm: VMHomeTab = new VMHomeTab()
|
|
|
|
|
+
|
|
|
|
|
+ aboutToAppear(): void {
|
|
|
|
|
+ this.vm.init()
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ build() {
|
|
|
|
|
+ Column() {
|
|
|
|
|
+ this.TopBar()
|
|
|
|
|
+ Refresh({ refreshing: $$this.vm.isRefreshing }) {
|
|
|
|
|
+ Column() {
|
|
|
|
|
+ this.TODOStatus()
|
|
|
|
|
+ this.TODOList()
|
|
|
|
|
+ }.width("100%").height("100%")
|
|
|
|
|
+ }.width("100%").layoutWeight(1).onRefreshing(() => {
|
|
|
|
|
+ this.vm.onRefresh()
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ .width("100%")
|
|
|
|
|
+ .height("100%")
|
|
|
|
|
+ .clip(false)
|
|
|
|
|
+ .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 顶部状态栏
|
|
|
|
|
+ */
|
|
|
|
|
+ @Builder
|
|
|
|
|
+ TopBar() {
|
|
|
|
|
+ Column() {
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ Image($r("app.media.user"))
|
|
|
|
|
+ .width(36)
|
|
|
|
|
+ .height(36)
|
|
|
|
|
+ .borderRadius("50%")
|
|
|
|
|
+ .backgroundColor("#FFD700")
|
|
|
|
|
+ .padding(8)
|
|
|
|
|
+ .fillColor(Color.White)
|
|
|
|
|
+ Column() {
|
|
|
|
|
+ Text(this.vm.username).fontSize(16).fontColor(Color.White).fontWeight(FontWeight.Medium)
|
|
|
|
|
+ Text("操作员 电气维护组").fontSize(12).fontColor(Color.White).opacity(0.8)
|
|
|
|
|
+ }.layoutWeight(1).margin({ left: 10, right: 10 }).alignItems(HorizontalAlign.Start)
|
|
|
|
|
+
|
|
|
|
|
+ Stack() {
|
|
|
|
|
+ Image($r("app.media.bell")).width(19).height(19).fillColor(Color.White)
|
|
|
|
|
+ Text("99")
|
|
|
|
|
+ .backgroundColor("#FF4500")
|
|
|
|
|
+ .borderRadius("50%")
|
|
|
|
|
+ .fontColor(Color.White)
|
|
|
|
|
+ .fontSize(10)
|
|
|
|
|
+ .position({ top: -5, left: "52%" })
|
|
|
|
|
+ .constraintSize({ minWidth: 15, minHeight: 15 })
|
|
|
|
|
+ .textAlign(TextAlign.Center)
|
|
|
|
|
+ }.width(36).height(24).onClick(() => {
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ Stack() {
|
|
|
|
|
+ Image($r("app.media.settings")).width(18).height(18).fillColor(Color.White)
|
|
|
|
|
+ }.width(36).height(24).onClick(() => {
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ .width("100%")
|
|
|
|
|
+ .padding({
|
|
|
|
|
+ left: 16,
|
|
|
|
|
+ top: 15,
|
|
|
|
|
+ right: 16,
|
|
|
|
|
+ bottom: 15
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ .width("100%")
|
|
|
|
|
+ .backgroundColor("#FFA500")
|
|
|
|
|
+ .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 待办状态
|
|
|
|
|
+ */
|
|
|
|
|
+ @Builder
|
|
|
|
|
+ TODOStatus() {
|
|
|
|
|
+ Column() {
|
|
|
|
|
+ Text("中午好,今天有2个待办任务")
|
|
|
|
|
+ .width("100%")
|
|
|
|
|
+ .height(51)
|
|
|
|
|
+ .backgroundColor("#E6F7FF")
|
|
|
|
|
+ .fontSize(14)
|
|
|
|
|
+ .fontColor("#333333")
|
|
|
|
|
+ .textAlign(TextAlign.Center)
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ Column() {
|
|
|
|
|
+ Text("2").fontSize(24).fontColor("#FF4500").fontWeight(FontWeight.Bold)
|
|
|
|
|
+ Text("待处理").fontSize(12).fontColor("#333333").margin({ top: 10, bottom: 5 })
|
|
|
|
|
+ Image($r("app.media.job_todo")).width(18).height(18).fillColor(Color.Black)
|
|
|
|
|
+ }
|
|
|
|
|
+ .margin(5)
|
|
|
|
|
+ .layoutWeight(1)
|
|
|
|
|
+ .aspectRatio(1)
|
|
|
|
|
+ .backgroundColor("#FFF5EB")
|
|
|
|
|
+ .borderRadius(12)
|
|
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
|
|
+
|
|
|
|
|
+ Column() {
|
|
|
|
|
+ Text("5").fontSize(24).fontColor("#FFA500").fontWeight(FontWeight.Bold)
|
|
|
|
|
+ Text("进行中").fontSize(12).fontColor("#333333").margin({ top: 10, bottom: 5 })
|
|
|
|
|
+ Image($r("app.media.job_ing")).width(18).height(18).fillColor(Color.Black)
|
|
|
|
|
+ }
|
|
|
|
|
+ .margin(5)
|
|
|
|
|
+ .layoutWeight(1)
|
|
|
|
|
+ .aspectRatio(1)
|
|
|
|
|
+ .backgroundColor("#FFF5EB")
|
|
|
|
|
+ .borderRadius(12)
|
|
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
|
|
+
|
|
|
|
|
+ Column() {
|
|
|
|
|
+ Text("10").fontSize(24).fontColor("#32CD32").fontWeight(FontWeight.Bold)
|
|
|
|
|
+ Text("本月完成").fontSize(12).fontColor("#333333").margin({ top: 10, bottom: 5 })
|
|
|
|
|
+ Image($r("app.media.job_finish")).width(18).height(18).fillColor(Color.Black)
|
|
|
|
|
+ }
|
|
|
|
|
+ .margin(5)
|
|
|
|
|
+ .layoutWeight(1)
|
|
|
|
|
+ .aspectRatio(1)
|
|
|
|
|
+ .backgroundColor("#FFF5EB")
|
|
|
|
|
+ .borderRadius(12)
|
|
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
|
|
+ }
|
|
|
|
|
+ .padding({
|
|
|
|
|
+ left: 5,
|
|
|
|
|
+ right: 5,
|
|
|
|
|
+ top: 10,
|
|
|
|
|
+ bottom: 10
|
|
|
|
|
+ })
|
|
|
|
|
+ }.width("100%").margin({ top: 3 })
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ @Builder
|
|
|
|
|
+ TODOList() {
|
|
|
|
|
+ List() {
|
|
|
|
|
+ ListItem() {
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ Text("我的当前任务").fontSize(14).fontColor("#333333").fontWeight(FontWeight.Medium)
|
|
|
|
|
+ Row().layoutWeight(1)
|
|
|
|
|
+ Text("查看全部").fontSize(14).fontColor("#1E90FF").fontWeight(FontWeight.Medium)
|
|
|
|
|
+ }.width("100%").height(46).onClick(() => {
|
|
|
|
|
+ this.vmHome.updateTabIndex(1)
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ ForEach([1, 2], (item: number, index: number) => {
|
|
|
|
|
+ ListItem() {
|
|
|
|
|
+ Column() {
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ Text("冷却水系统能量隔离作业").fontSize(15).fontColor("#333333").fontWeight(FontWeight.Medium)
|
|
|
|
|
+ Row().layoutWeight(1)
|
|
|
|
|
+ Text("待办")
|
|
|
|
|
+ .fontSize(12)
|
|
|
|
|
+ .fontColor("#333333")
|
|
|
|
|
+ .backgroundColor("#FFD700")
|
|
|
|
|
+ .borderRadius(20)
|
|
|
|
|
+ .height(24)
|
|
|
|
|
+ .padding({ left: 10, right: 10 })
|
|
|
|
|
+ .textAlign(TextAlign.Center)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ Flex({ wrap: FlexWrap.Wrap, alignItems: ItemAlign.Center, direction: FlexDirection.Row }) {
|
|
|
|
|
+ Image($r("app.media.location")).width(12).height(12).fillColor("#1E90FF").margin({ right: 5 })
|
|
|
|
|
+ Text("车间B区")
|
|
|
|
|
+ .fontSize(13)
|
|
|
|
|
+ .fontColor("#666666")
|
|
|
|
|
+ .margin({ right: 12 })
|
|
|
|
|
+ .height(24)
|
|
|
|
|
+ .textAlign(TextAlign.Center)
|
|
|
|
|
+ Image($r("app.media.user")).width(12).height(12).fillColor("#666666").margin({ right: 5 })
|
|
|
|
|
+ Text("负责人:王主管哈哈哈哈")
|
|
|
|
|
+ .fontSize(13)
|
|
|
|
|
+ .fontColor("#666666")
|
|
|
|
|
+ .margin({ right: 12 })
|
|
|
|
|
+ .height(24)
|
|
|
|
|
+ .textAlign(TextAlign.Center)
|
|
|
|
|
+ Image($r("app.media.jobs")).width(12).height(12).fillColor("#666666").margin({ right: 5 })
|
|
|
|
|
+ Text("WO-2025-005")
|
|
|
|
|
+ .fontSize(13)
|
|
|
|
|
+ .fontColor("#666666")
|
|
|
|
|
+ .margin({ right: 12 })
|
|
|
|
|
+ .height(24)
|
|
|
|
|
+ .textAlign(TextAlign.Center)
|
|
|
|
|
+ }.margin({ top: 10 })
|
|
|
|
|
+
|
|
|
|
|
+ Text("作业内容:上锁挂牌").fontSize(13).fontColor("#666666").height(24).textAlign(TextAlign.Center)
|
|
|
|
|
+
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ Text("今天 14:00").layoutWeight(1).margin({ right: 10 }).fontColor("#999999").fontSize(12)
|
|
|
|
|
+ Button("查看详情")
|
|
|
|
|
+ .height(35)
|
|
|
|
|
+ .padding({ left: 15, right: 15 })
|
|
|
|
|
+ .backgroundColor("#4682B4")
|
|
|
|
|
+ .borderRadius(4)
|
|
|
|
|
+ .fontSize(13)
|
|
|
|
|
+ .fontWeight(FontWeight.Medium)
|
|
|
|
|
+ }.width("100%").layoutWeight(1)
|
|
|
|
|
+ }.width("100%").height("100%").justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start)
|
|
|
|
|
+ }
|
|
|
|
|
+ .width("100%")
|
|
|
|
|
+ .height(175)
|
|
|
|
|
+ .backgroundColor("#F8F9FA")
|
|
|
|
|
+ .borderRadius(12)
|
|
|
|
|
+ .border({ width: 1, color: "#EEEEEE" })
|
|
|
|
|
+ .margin({ bottom: index == 1 ? 0 : 15 })
|
|
|
|
|
+ .padding(16)
|
|
|
|
|
+ })
|
|
|
|
|
+ ListItem() {
|
|
|
|
|
+ Row() {
|
|
|
|
|
+ Text("最新消息").fontSize(14).fontColor("#333333").fontWeight(FontWeight.Medium)
|
|
|
|
|
+ Row().layoutWeight(1)
|
|
|
|
|
+ Text("全部消息").fontSize(14).fontColor("#1E90FF").fontWeight(FontWeight.Medium)
|
|
|
|
|
+ }.width("100%").height(46).onClick(() => {
|
|
|
|
|
+ this.vmHome.updateTabIndex(2)
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ ForEach([1, 2], (item: number) => {
|
|
|
|
|
+ ListItem() {
|
|
|
|
|
+ Column() {
|
|
|
|
|
+ Text("系统通知:您有新的作业任务待处理,请及时查看并执行操作,请及时查看并执行操作,请及时查看并执行操作,请及时查看并执行操作")
|
|
|
|
|
+ .fontSize(14)
|
|
|
|
|
+ .fontColor("#333333")
|
|
|
|
|
+ .textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(2)
|
|
|
|
|
+ Text("5分钟前")
|
|
|
|
|
+ .layoutWeight(1)
|
|
|
|
|
+ .width("100%")
|
|
|
|
|
+ .textAlign(TextAlign.End)
|
|
|
|
|
+ .fontSize(12)
|
|
|
|
|
+ .fontColor("#999999")
|
|
|
|
|
+ }
|
|
|
|
|
+ .width("100%")
|
|
|
|
|
+ .height("100%")
|
|
|
|
|
+ .justifyContent(FlexAlign.Start)
|
|
|
|
|
+ .alignItems(HorizontalAlign.Start)
|
|
|
|
|
+ .padding(16)
|
|
|
|
|
+ }
|
|
|
|
|
+ .width("100%")
|
|
|
|
|
+ .height(102)
|
|
|
|
|
+ .backgroundColor("#F8F9FA")
|
|
|
|
|
+ .borderRadius(12)
|
|
|
|
|
+ .border({ width: 1, color: "#EEEEEE" })
|
|
|
|
|
+ .margin({ bottom: 15 })
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ .width("100%").layoutWeight(1).padding({ left: 20, right: 20 }).scrollBar(BarState.Off)
|
|
|
|
|
+ }
|
|
|
|
|
+}
|