281 lines
9.6 KiB
Plaintext
281 lines
9.6 KiB
Plaintext
import { router } from '@kit.ArkUI'
|
|
import { common } from '@kit.AbilityKit'
|
|
import { dateFormat } from '../../utils/Utils'
|
|
import { Footer } from './components/Footer'
|
|
import { Block } from './components/Block'
|
|
import { LineCard } from './components/LineCard'
|
|
import { WarnCard } from './components/WarnCard'
|
|
import { RingOptions, RingProgress } from '../ring/Index'
|
|
import { getInspectAlarmUsingPost, getPadIndexInfoUsingGet } from '../../api/padController'
|
|
import { getDeviceId } from '../../utils/System'
|
|
|
|
@Component
|
|
@Entry
|
|
struct Home {
|
|
@State currentTime: string = ""
|
|
@State line: API.InspectLineInfoVo[] = []
|
|
@State warn: API.InspectAlarmItemVo[] = []
|
|
@State select: number = -1
|
|
@State statistics: RingOptions[] = [
|
|
{ color: 0xffcc31, count: 0 },
|
|
{ color: 0x33ff29, count: 0 },
|
|
{ color: 0xff3a48, count: 0 },
|
|
]
|
|
@State warnRing: RingOptions[] = [
|
|
{
|
|
color: 0x034B61,
|
|
count: 0,
|
|
animate: false,
|
|
full: true
|
|
},
|
|
{ color: 0x06CDF5, count: 0 },
|
|
]
|
|
@State total: number = 0
|
|
private timeTick: number = -1
|
|
private getDataTick: number = -1
|
|
|
|
onPageShow(): void {
|
|
this.currentTime = dateFormat(new Date(), 'yyyy-MM-dd HH:mm:ss')
|
|
this.timeTick = setInterval(() => {
|
|
this.currentTime = dateFormat(new Date(), 'yyyy-MM-dd HH:mm:ss')
|
|
}, 1000)
|
|
this.getData()
|
|
this.loopGetData()
|
|
}
|
|
|
|
onPageHide(): void {
|
|
clearInterval(this.timeTick)
|
|
clearInterval(this.getDataTick)
|
|
this.timeTick = -1
|
|
this.getDataTick = -1
|
|
}
|
|
|
|
loopGetData() {
|
|
this.getDataTick = setInterval(() => {
|
|
this.getData()
|
|
}, 5000)
|
|
}
|
|
|
|
exit() {
|
|
let context = getContext(this) as common.UIAbilityContext
|
|
context.terminateSelf()
|
|
}
|
|
|
|
onBackPress(): boolean | void {
|
|
return true
|
|
}
|
|
|
|
async getData() {
|
|
let deviceId = await getDeviceId()
|
|
let lineId = this.select === -1 ? undefined : this.line[this.select].lineId
|
|
getPadIndexInfoUsingGet({
|
|
imei: deviceId,
|
|
lineId
|
|
}).then((res) => {
|
|
this.line = res.data?.list || []
|
|
this.statistics[0].count = res.data?.indexCount?.unfinish || 0
|
|
this.statistics[1].count = res.data?.indexCount?.finish || 0
|
|
this.statistics[2].count = res.data?.indexCount?.fail || 0
|
|
this.total = res.data?.indexCount?.total || 0
|
|
this.statistics = JSON.parse(JSON.stringify(this.statistics))
|
|
})
|
|
|
|
getInspectAlarmUsingPost({ lineId }).then(res => {
|
|
this.warn = res.data?.page?.rows || []
|
|
this.warnRing[1].count = res.data?.dealNum || 0
|
|
})
|
|
}
|
|
|
|
@Builder
|
|
buildCenter() {
|
|
Column() {
|
|
Text("查验数量").fontSize(36).fontColor(0xffffff).fontFamily("Alimama").margin({ bottom: 6 })
|
|
Text(this.total.toString()).fontSize(40).fontColor(0xffffff).fontFamily("Alimama")
|
|
}
|
|
}
|
|
|
|
build() {
|
|
Column() {
|
|
Row() {
|
|
Row() {
|
|
Image($rawfile("images/text_logo.png")).height(36)
|
|
}.width("20%").height("100%").justifyContent(FlexAlign.Center).padding({ top: 18 })
|
|
|
|
Row() {
|
|
Row() {
|
|
Text("机动车智能查验机器人系统")
|
|
.fontFamily("Alimama")
|
|
.fontSize(32)
|
|
.blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
|
|
.textShadow({
|
|
offsetX: 0.5,
|
|
offsetY: 0,
|
|
radius: 2,
|
|
color: 0x00627E
|
|
})
|
|
}.linearGradient({ direction: GradientDirection.Top, colors: [[0xACECF7, 0.0], [0xFFFFFF, 1.0]] })
|
|
.blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
|
|
}
|
|
.layoutWeight(1)
|
|
|
|
.height("100%")
|
|
.justifyContent(FlexAlign.Center)
|
|
|
|
Column() {
|
|
Column() {
|
|
Text("当前时间").fontSize(16).fontColor(0xffffff).margin({ bottom: 4 })
|
|
Text(this.currentTime).fontSize(16).fontColor(0xffffff)
|
|
}.alignItems(HorizontalAlign.Start)
|
|
}
|
|
.width("20%")
|
|
.height("100%")
|
|
.justifyContent(FlexAlign.Center)
|
|
.alignItems(HorizontalAlign.Center)
|
|
.padding({ top: 18 })
|
|
}
|
|
.width("100%")
|
|
.height(72)
|
|
.justifyContent(FlexAlign.Center)
|
|
.backgroundImage($rawfile("images/home/header.png"))
|
|
.backgroundImageSize({ width: "100%", height: "100%" })
|
|
|
|
Column() {
|
|
Row() {
|
|
Block({
|
|
cusMargin: { right: 18 }, title: "所有区域", onTitleClick: () => {
|
|
this.select = -1
|
|
this.getData()
|
|
}
|
|
}) {
|
|
List({ space: 12 }) {
|
|
ForEach(this.line, (item: API.InspectLineInfoVo, index: number) => {
|
|
ListItem() {
|
|
LineCard({
|
|
label: item.lineName?.toString(),
|
|
select: this.select === index,
|
|
data: item
|
|
})
|
|
}.width("100%").constraintSize({ minHeight: 100 }).onClick(() => {
|
|
this.select = index
|
|
this.getData()
|
|
})
|
|
})
|
|
}.width("100%").height("100%").scrollBar(BarState.Off)
|
|
}
|
|
|
|
Column() {
|
|
RingProgress({
|
|
option: this.statistics, style: { width: 290, height: 290 }, buildCenter: () => {
|
|
this.buildCenter()
|
|
}
|
|
})
|
|
.margin({ top: 45.5, left: 1.5 })
|
|
|
|
Row() {
|
|
Column() {
|
|
Text("正在查验数量").fontSize(24).fontColor(0xffffff).fontWeight(700).margin({ bottom: 6 })
|
|
Text(this.statistics[0].count.toString()).fontSize(32).fontColor(0xFFCC31).fontWeight(700)
|
|
}
|
|
.layoutWeight(1.8)
|
|
.justifyContent(FlexAlign.Center)
|
|
.alignItems(HorizontalAlign.Center)
|
|
.margin({ right: 20 })
|
|
.backgroundImage($rawfile("images/home/label.png"))
|
|
.backgroundImageSize({ width: "100%", height: "100%" })
|
|
.height("100%")
|
|
|
|
Column() {
|
|
Text("完成数量").fontSize(24).fontColor(0xffffff).fontWeight(700).margin({ bottom: 6 })
|
|
Text(this.statistics[1].count.toString()).fontSize(32).fontColor(0x33FF29).fontWeight(700)
|
|
}
|
|
.layoutWeight(1.4)
|
|
.justifyContent(FlexAlign.Center)
|
|
.alignItems(HorizontalAlign.Center)
|
|
.margin({ left: 10, right: 10 })
|
|
.backgroundImage($rawfile("images/home/label.png"))
|
|
.backgroundImageSize({ width: "100%", height: "100%" })
|
|
.height("100%")
|
|
|
|
Column() {
|
|
Text("失败").fontSize(24).fontColor(0xffffff).fontWeight(700).margin({ bottom: 6 })
|
|
Text(this.statistics[2].count.toString()).fontSize(32).fontColor(0xFF3A48).fontWeight(700)
|
|
}
|
|
.layoutWeight(1)
|
|
.justifyContent(FlexAlign.Center)
|
|
.alignItems(HorizontalAlign.Center)
|
|
.margin({ left: 10 })
|
|
.backgroundImage($rawfile("images/home/label.png"))
|
|
.backgroundImageSize({ width: "100%", height: "100%" })
|
|
.height("100%")
|
|
}.width("100%").height(100)
|
|
}
|
|
.alignItems(HorizontalAlign.Center)
|
|
.justifyContent(FlexAlign.SpaceBetween)
|
|
.margin({ left: 18, right: 18 })
|
|
.layoutWeight(1.5)
|
|
.height("100%")
|
|
.backgroundImage($rawfile("images/home/earth.png"))
|
|
.backgroundImagePosition(Alignment.Top)
|
|
.backgroundImageSize({
|
|
width: "90%"
|
|
})
|
|
|
|
|
|
Block({ cusMargin: { left: 18 }, title: "预警信息" }) {
|
|
Row() {
|
|
Column() {
|
|
Row() {
|
|
Image($rawfile("images/home/total_warn.png")).width(48).margin({ right: 6 })
|
|
Text(this.warnRing[0].count.toString()).fontSize(24).fontColor(0xFF3A48)
|
|
}.margin({ bottom: 6 })
|
|
|
|
Text("总预警异常事件个数").fontSize(14).fontColor(0xffffff)
|
|
}.height("100%").layoutWeight(1).justifyContent(FlexAlign.SpaceAround).alignItems(HorizontalAlign.Center)
|
|
|
|
|
|
Stack({ alignContent: Alignment.Center }) {
|
|
RingProgress({
|
|
option: this.warnRing,
|
|
style: { height: 72, width: 72 },
|
|
strokeWidth: 10
|
|
})
|
|
Column() {
|
|
Text(this.warnRing[0].count === 0 ? "0%" :
|
|
(this.warnRing[1].count / this.warnRing[0].count * 100).toFixed(0) + "%")
|
|
.fontColor(0xffffff)
|
|
.fontSize(16)
|
|
Text("已处理").fontColor(0xffffff).fontSize(14)
|
|
}
|
|
}.layoutWeight(1).height("100%")
|
|
}.margin({ bottom: 12 }).height(80)
|
|
|
|
List({ space: 12 }) {
|
|
ForEach(this.warn, (item: API.InspectAlarmItemVo, index: number) => {
|
|
ListItem() {
|
|
WarnCard({
|
|
onDetail: () => {
|
|
router.pushUrl({
|
|
url: "pages/alarm/Detail",
|
|
params: {
|
|
data: item,
|
|
line: this.line[this.select]?.id,
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}.width("100%").height(100)
|
|
})
|
|
}.width("100%").layoutWeight(1).scrollBar(BarState.Off)
|
|
}
|
|
|
|
}.layoutWeight(1).width("100%")
|
|
|
|
Footer()
|
|
}.layoutWeight(1).width("100%").padding(24)
|
|
}
|
|
.width("100%")
|
|
.height("100%")
|
|
.backgroundImage($rawfile("images/home/background.png"))
|
|
.backgroundImageSize({ width: "100%", height: "100%" })
|
|
}
|
|
} |