244 lines
8.5 KiB
Plaintext
244 lines
8.5 KiB
Plaintext
import { CusButton } from '../components/button/Index'
|
|
import { Layout } from '../components/layout/Index'
|
|
import { Title } from '../components/title/Index'
|
|
import { router } from '@kit.ArkUI'
|
|
import { Option } from '../../typings/Common'
|
|
import VideoPlayer from '../components/player/Index'
|
|
|
|
|
|
@Extend(Text)
|
|
function label() {
|
|
.fontFamily("Alimama")
|
|
.fontSize(18)
|
|
.fontColor(0xffffff)
|
|
.padding({
|
|
left: 16,
|
|
top: 6,
|
|
right: 30,
|
|
bottom: 6
|
|
})
|
|
.letterSpacing(2)
|
|
.backgroundImage($rawfile("images/alarm/label.png"))
|
|
.backgroundImageSize({ width: "100%", height: "100%" })
|
|
}
|
|
|
|
|
|
@Builder
|
|
function buildRadio(config: RadioConfiguration) {
|
|
Stack({ alignContent: Alignment.Center }) {
|
|
Circle({ width: 18, height: 18 }).stroke(0x1666d4).strokeWidth(1).fill(0xffffffff)
|
|
Circle({ width: 9, height: 9 }).fill(config.checked ? 0x1666d4 : 0xfffffffff)
|
|
}.onClick(() => {
|
|
config.triggerChange(!config.checked)
|
|
})
|
|
}
|
|
|
|
class RadioModifier implements ContentModifier<RadioConfiguration> {
|
|
applyContent(): WrappedBuilder<[RadioConfiguration]> {
|
|
return wrapBuilder(buildRadio)
|
|
}
|
|
}
|
|
|
|
@Component
|
|
@Entry
|
|
struct Detail {
|
|
@State base: Option[] = [
|
|
{ label: "预警时间", value: "2025-09-13 10:48:11" },
|
|
{ label: "预警类型", value: "车辆异常" },
|
|
{ label: "阶段", value: "等待车辆进入" },
|
|
{ label: "步骤", value: "步骤1" },
|
|
{ label: "预警内容", value: "车主长时间为办理预录入或长时间逗留场地。" },
|
|
]
|
|
@State mediaHeight: number = 0
|
|
@State deal: string = "1"
|
|
@State remark: string = ""
|
|
@State isFullScreen: boolean = false
|
|
@State url: string = ""
|
|
|
|
aboutToAppear(): void {
|
|
let data: API.InspectAlarmItemVo = router.getParams()
|
|
this.base[0].value = data.createTime || ""
|
|
this.base[1].value = data.alarmCode || ""
|
|
this.base[2].value = data.stageName || ""
|
|
this.base[3].value = data.stepName || ""
|
|
this.base[4].value = data.alarmInfo || ""
|
|
}
|
|
|
|
submit() {
|
|
|
|
}
|
|
|
|
build() {
|
|
Column() {
|
|
Layout({ mode: 2 }) {
|
|
Column() {
|
|
Row() {
|
|
Title({ title: "预警处理" })
|
|
}.margin({ bottom: 18 })
|
|
|
|
Row() {
|
|
Column() {
|
|
Row() {
|
|
Text("预警详情").fontFamily("Alimama").fontColor(0xffffff).fontSize(24)
|
|
}
|
|
.backgroundImage($rawfile("images/control/header.png"))
|
|
.backgroundImageSize({ width: "100%", height: "100%" })
|
|
.width("100%")
|
|
.height(48)
|
|
.padding({ left: 48 })
|
|
.margin({ bottom: 24 })
|
|
|
|
Scroll() {
|
|
Column() {
|
|
ForEach(this.base, (item: Option) => {
|
|
Column() {
|
|
Text(item.label).fontColor(0x103A86).fontSize(18).fontWeight(600).margin({ bottom: 10 })
|
|
Text(item.value)
|
|
.fontColor(0xD2D2D2)
|
|
.fontSize(18)
|
|
.padding({
|
|
left: 12,
|
|
top: 6,
|
|
right: 12,
|
|
bottom: 6
|
|
})
|
|
.backgroundColor(0xffffff)
|
|
.border({
|
|
width: 1,
|
|
color: 0xd2d2d2,
|
|
radius: 3
|
|
})
|
|
.width("100%")
|
|
}.width("100%").margin({ bottom: 20 }).alignItems(HorizontalAlign.Start)
|
|
})
|
|
}.width("100%").padding({ left: 24, right: 24 })
|
|
}.width("100%").layoutWeight(1)
|
|
}
|
|
.width("30%")
|
|
.height("100%")
|
|
.margin({ right: 24 })
|
|
.backgroundColor(0xf4f4f5)
|
|
.border({ width: 1, color: 0xf1f1f1 })
|
|
.borderRadius(5)
|
|
|
|
Column() {
|
|
Row() {
|
|
Stack({ alignContent: Alignment.TopStart }) {
|
|
Image($rawfile("images/vehicle/default.png")).width("100%").height("100%").objectFit(ImageFit.Contain)
|
|
Text("现场图片").label()
|
|
}.margin({ right: 6 }).layoutWeight(1)
|
|
|
|
|
|
Stack({ alignContent: Alignment.TopStart }) {
|
|
if (this.url) {
|
|
VideoPlayer({
|
|
isFullScreen: this.isFullScreen,
|
|
showPreview: true,
|
|
attribute: {
|
|
preview: $rawfile("images/vehicle/default.png"),
|
|
type: "network"
|
|
},
|
|
url: this.url
|
|
})
|
|
} else {
|
|
Image($rawfile("images/vehicle/default.png"))
|
|
.width("100%")
|
|
.height("100%")
|
|
.objectFit(ImageFit.Contain)
|
|
}
|
|
|
|
Text("现场视频").label()
|
|
}.margin({ left: 6 }).layoutWeight(1)
|
|
}.width("100%").height(this.mediaHeight).margin({ bottom: 24 })
|
|
|
|
Column() {
|
|
Row() {
|
|
Text("处理").fontSize(20).fontColor(0x103A86).margin({ right: 24 })
|
|
Row() {
|
|
Radio({ group: "deal", value: "1" })
|
|
.checked(this.deal === "1")
|
|
.contentModifier(new RadioModifier())
|
|
.onChange((checked) => {
|
|
if (checked && this.deal !== "1") {
|
|
this.deal = "1"
|
|
}
|
|
})
|
|
Text("已处理").fontSize(18).fontColor(0x989898).margin({ left: 12 }).onClick(() => {
|
|
this.deal = "1"
|
|
})
|
|
}.layoutWeight(1)
|
|
|
|
Row() {
|
|
Radio({ group: "deal", value: "2" })
|
|
.checked(this.deal === "2")
|
|
.contentModifier(new RadioModifier())
|
|
.onChange((checked) => {
|
|
if (checked && this.deal !== "2") {
|
|
this.deal = "2"
|
|
}
|
|
})
|
|
Text("不处理").fontSize(18).fontColor(0x989898).margin({ left: 12 }).onClick(() => {
|
|
this.deal = "2"
|
|
})
|
|
}.layoutWeight(1)
|
|
}.width("100%").padding({ left: 40, right: 40 }).margin({ bottom: 24 })
|
|
|
|
Row() {
|
|
Text("备注").fontSize(20).fontColor(0x103A86).margin({ right: 24 })
|
|
TextArea({ text: $$this.remark, placeholder: "请输入备注" })
|
|
.layoutWeight(1)
|
|
.padding({
|
|
left: 12,
|
|
top: 8,
|
|
right: 12,
|
|
bottom: 8
|
|
})
|
|
.fontSize(16)
|
|
.fontColor(0x000000)
|
|
.placeholderColor(0xE1E1E1)
|
|
.constraintSize({ minHeight: 100 })
|
|
.maxLines(5)
|
|
.border({
|
|
width: 1,
|
|
color: 0xd2d2d2,
|
|
radius: 2
|
|
})
|
|
}.width("100%").padding({ left: 40, right: 40 }).margin({ bottom: 24 }).alignItems(VerticalAlign.Top)
|
|
|
|
Blank()
|
|
|
|
Row() {
|
|
CusButton({
|
|
normalImage: $rawfile("images/alarm/submit.png"),
|
|
activeImage: $rawfile("images/alarm/submit_active.png"),
|
|
style: { width: 280, height: 64 }
|
|
}).onClick(() => {
|
|
this.submit()
|
|
})
|
|
CusButton({
|
|
normalImage: $rawfile("images/filing/back.png"),
|
|
activeImage: $rawfile("images/filing/back_active.png"),
|
|
style: { width: 280, height: 64 }
|
|
}).onClick(() => {
|
|
router.back()
|
|
})
|
|
}.width("100%").padding({ left: 20, right: 20 }).justifyContent(FlexAlign.SpaceBetween)
|
|
|
|
Blank()
|
|
|
|
}.width("100%").layoutWeight(1)
|
|
}
|
|
.onSizeChange((_, val) => {
|
|
this.mediaHeight = (Number(val.width) - 12) / 2 / 16 * 9
|
|
})
|
|
.layoutWeight(1)
|
|
.height("100%")
|
|
.justifyContent(FlexAlign.Start)
|
|
|
|
}.width("100%").layoutWeight(1).padding({ left: 12, right: 12 })
|
|
|
|
}.width("100%").height("100%").padding(18)
|
|
}
|
|
}.width("100%").height("100%")
|
|
}
|
|
} |