|
@@ -0,0 +1,375 @@
|
|
|
|
+// 工位的设备列表
|
|
|
|
+import router from '@ohos.router'
|
|
|
|
+import EquipmentRequest from '../utils/EquipmentRequest'
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+export class HardwareModel {
|
|
|
|
+ name?: string
|
|
|
|
+ text?: string
|
|
|
|
+ type?: Resource
|
|
|
|
+ open?: Resource
|
|
|
|
+ colse?: Resource
|
|
|
|
+ select?: boolean
|
|
|
|
+ temp?: number
|
|
|
|
+ manufacturer?: string //: "厂家",
|
|
|
|
+ brand?: string //"品牌或型号,比如JBC",
|
|
|
|
+ deviceName?: string //"设备自定义名称或资产编号",
|
|
|
|
+ deviceType?: string // "类别,比如电络铁",
|
|
|
|
+ deviceNo?: string // "设备编号,唯一号",
|
|
|
|
+ devicePic?: string // "图片",
|
|
|
|
+ state?: number //"状态:0正常,-1:离线,1故障",
|
|
|
|
+ workshop?: string //"产线",
|
|
|
|
+ station?: string //"工站/工位",
|
|
|
|
+ devicePosition?: string // "空间位置,目前暂时不用",
|
|
|
|
+ data?: HardwareModel[]
|
|
|
|
+ enable?: boolean | string //是否启用了设备
|
|
|
|
+ imageSource?: ResourceStr
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+interface ImageDictModel {
|
|
|
|
+ sansedeng: ResourceStr
|
|
|
|
+ saomaqiang: ResourceStr
|
|
|
|
+ diannengbiao: ResourceStr
|
|
|
|
+ multimeter: ResourceStr
|
|
|
|
+ dukaqi: ResourceStr
|
|
|
|
+ chengkongdianyuan: ResourceStr
|
|
|
|
+ shukongdian: ResourceStr
|
|
|
|
+ diandongluosidao: ResourceStr
|
|
|
|
+ zhaomingdeng: ResourceStr
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+@Entry
|
|
|
|
+@Component
|
|
|
|
+struct StationDevicesPage {
|
|
|
|
+ //注释掉的是假数据,实际更具请求硬件获取
|
|
|
|
+ @State private items: Array<HardwareModel> = [
|
|
|
|
+ // {
|
|
|
|
+ // name: '三色灯',
|
|
|
|
+ // text: '装配工位001',
|
|
|
|
+ // type: $r('app.media.sansedeng'),
|
|
|
|
+ // open: $r('app.media.open'),
|
|
|
|
+ // colse: $r('app.media.colse'),
|
|
|
|
+ // select: true,
|
|
|
|
+ // temp: 1,
|
|
|
|
+ // deviceName: "三色灯"
|
|
|
|
+ // }
|
|
|
|
+ ]
|
|
|
|
+ imageDict: ImageDictModel = {
|
|
|
|
+ sansedeng: $r("app.media.sansedeng"),
|
|
|
|
+ saomaqiang: $r('app.media.saomaqiang'),
|
|
|
|
+ diannengbiao: $r('app.media.diannengbiao'),
|
|
|
|
+ multimeter: $r('app.media.multimeter'),
|
|
|
|
+ dukaqi: $r('app.media.dukaqi'),
|
|
|
|
+ chengkongdianyuan: $r('app.media.chengkongdianyuan'),
|
|
|
|
+ shukongdian: $r('app.media.shukongdian'),
|
|
|
|
+ diandongluosidao: $r('app.media.diandongluosidao'),
|
|
|
|
+ zhaomingdeng: $r('app.media.zhaomingdeng')
|
|
|
|
+ }
|
|
|
|
+ scroller: Scroller = new Scroller()
|
|
|
|
+ getDeviceList = async () => {
|
|
|
|
+ let res: HardwareModel = await EquipmentRequest.get('/api/v1/device/list') as HardwareModel
|
|
|
|
+ this.items = res?.data?.filter((device) => {
|
|
|
|
+ device.imageSource = Reflect.get(this.imageDict, device.devicePic!)
|
|
|
|
+ return device.enable! === true || device.enable! === "true"
|
|
|
|
+ }) ?? []
|
|
|
|
+ }
|
|
|
|
+ // 点击选择了设备之后
|
|
|
|
+ @State currentDevice: HardwareModel = {}
|
|
|
|
+ openDeviceOperationDialog = (d: HardwareModel) => {
|
|
|
|
+ this.currentDevice = d
|
|
|
|
+ if (d.deviceName == "三色灯") {
|
|
|
|
+ this.lightDController.open()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ // 三色灯dialoag
|
|
|
|
+ lightDController = new CustomDialogController({
|
|
|
|
+ builder: ThreeColorsLight({
|
|
|
|
+ device: this.currentDevice
|
|
|
|
+ }),
|
|
|
|
+ alignment: DialogAlignment.Center,
|
|
|
|
+ customStyle: true,
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ aboutToAppear(): void {
|
|
|
|
+ this.getDeviceList()
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ build() {
|
|
|
|
+
|
|
|
|
+ Column() {
|
|
|
|
+ Row() {
|
|
|
|
+ Image($r('app.media.back_white'))
|
|
|
|
+ .height(px2vp(48))
|
|
|
|
+ .width(px2vp(48))
|
|
|
|
+ .onClick(async () => {
|
|
|
|
+ router.back()
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ .width('100%')
|
|
|
|
+ .height('8%')
|
|
|
|
+ .alignItems(VerticalAlign.Center)
|
|
|
|
+ .justifyContent(FlexAlign.Start)
|
|
|
|
+
|
|
|
|
+ Column() {
|
|
|
|
+
|
|
|
|
+ // Scroll(this.scroller){
|
|
|
|
+ Grid(this.scroller) {
|
|
|
|
+ ForEach(this.items, (item: HardwareModel, index) => {
|
|
|
|
+ GridItem() {
|
|
|
|
+
|
|
|
|
+ Row() {
|
|
|
|
+ Column() {
|
|
|
|
+ Text(item.deviceName)
|
|
|
|
+ .fontColor('#FFFFFF')
|
|
|
|
+ .fontWeight(FontWeight.Medium)
|
|
|
|
+ .fontSize(24)
|
|
|
|
+ Text(item.deviceNo)
|
|
|
|
+ .fontColor('#FFFFFF')
|
|
|
|
+ .opacity(0.6)
|
|
|
|
+ .fontWeight(FontWeight.Regular)
|
|
|
|
+ .fontSize(20)
|
|
|
|
+ Row() {
|
|
|
|
+ Image(item.imageSource)
|
|
|
|
+ .width(px2vp(120))
|
|
|
|
+ .height(px2vp(120))
|
|
|
|
+ .margin({ top: 40 })
|
|
|
|
+ }.height('50%')
|
|
|
|
+ .width('100%')
|
|
|
|
+ .padding({ left: 10 })
|
|
|
|
+ }
|
|
|
|
+ .width('100%')
|
|
|
|
+ .padding(10)
|
|
|
|
+ .borderRadius(10)
|
|
|
|
+ .alignItems(HorizontalAlign.Start)
|
|
|
|
+ .height('100%')
|
|
|
|
+ }
|
|
|
|
+ .width('100%')
|
|
|
|
+ .height('30%')
|
|
|
|
+ .padding({ left: 10 })
|
|
|
|
+ .borderRadius(10)
|
|
|
|
+ .backgroundColor('#66ffffff')
|
|
|
|
+ .onClick(() => {
|
|
|
|
+ this.openDeviceOperationDialog(item)
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
|
|
|
|
+ .columnsGap(10)
|
|
|
|
+ .rowsGap(10)
|
|
|
|
+ .width('100%')
|
|
|
|
+ .height('100%')
|
|
|
|
+ .editMode(true) //设置Grid是否进入编辑模式,进入编辑模式可以拖拽Grid组件内部GridItem
|
|
|
|
+ .supportAnimation(true) //设置Grid是否开启拖拽补位动画
|
|
|
|
+ .height('80%')
|
|
|
|
+ .width('100%')
|
|
|
|
+ .padding({ top: 10 })
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .backgroundImage($r('app.media.zhihuigc'))
|
|
|
|
+ .backgroundImageSize({ width: '100%', height: '100%' })
|
|
|
|
+ .width('100%')
|
|
|
|
+ .height('100%')
|
|
|
|
+ .padding(20)
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+@Extend(Button)
|
|
|
|
+function DeviceBtnS(color: ResourceColor) {
|
|
|
|
+ .fontColor(Color.White).width(70).height(30).backgroundColor(color)
|
|
|
|
+
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+// 三色灯
|
|
|
|
+interface SSDModel {
|
|
|
|
+ uiType: "Text" | "Button",
|
|
|
|
+ textValue: string,
|
|
|
|
+ key: string
|
|
|
|
+ value: string
|
|
|
|
+ btnColor: ResourceColor
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+interface SSDParamsData {
|
|
|
|
+ lighting: string
|
|
|
|
+ buzzer: string
|
|
|
|
+ flash: string
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+interface SSDParams {
|
|
|
|
+ deviceNo: string
|
|
|
|
+ data: SSDParamsData
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+@CustomDialog
|
|
|
|
+struct ThreeColorsLight {
|
|
|
|
+ controller: CustomDialogController
|
|
|
|
+ @Prop device: HardwareModel
|
|
|
|
+ @State operations: SSDModel[][] = [
|
|
|
|
+ [{
|
|
|
|
+ uiType: 'Text',
|
|
|
|
+ textValue: "亮灯",
|
|
|
|
+ key: "lighting",
|
|
|
|
+ value: "todo",
|
|
|
|
+ btnColor: $r("app.color.red_100")
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ uiType: 'Button',
|
|
|
|
+ textValue: "红灯",
|
|
|
|
+ key: "lighting",
|
|
|
|
+ value: "red",
|
|
|
|
+ btnColor: $r("app.color.red_100")
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ uiType: 'Button',
|
|
|
|
+ textValue: "黄灯",
|
|
|
|
+ key: "lighting",
|
|
|
|
+ value: "yellow",
|
|
|
|
+ btnColor: $r("app.color.yellow_1")
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ uiType: 'Button',
|
|
|
|
+ textValue: "绿灯",
|
|
|
|
+ key: "lighting",
|
|
|
|
+ value: "green",
|
|
|
|
+ btnColor: $r("app.color.green_100")
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ uiType: 'Button',
|
|
|
|
+ textValue: "关闭",
|
|
|
|
+ key: "lighting",
|
|
|
|
+ value: "off",
|
|
|
|
+ btnColor: $r("app.color.gray_6666")
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ [{
|
|
|
|
+ uiType: 'Text',
|
|
|
|
+ textValue: "蜂鸣",
|
|
|
|
+ key: "buzzer",
|
|
|
|
+ value: "todo",
|
|
|
|
+ btnColor: $r("app.color.red_100")
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ uiType: 'Button',
|
|
|
|
+ textValue: "大声",
|
|
|
|
+ key: "buzzer",
|
|
|
|
+ value: "loud",
|
|
|
|
+ btnColor: $r("app.color.red_100")
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ uiType: 'Button',
|
|
|
|
+ textValue: "小声",
|
|
|
|
+ key: "buzzer",
|
|
|
|
+ value: "low",
|
|
|
|
+ btnColor: $r("app.color.green_100")
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ uiType: 'Button',
|
|
|
|
+ textValue: "关闭",
|
|
|
|
+ key: "buzzer",
|
|
|
|
+ value: "off",
|
|
|
|
+ btnColor: $r("app.color.gray_6666")
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ [{
|
|
|
|
+ uiType: 'Text',
|
|
|
|
+ textValue: "闪光",
|
|
|
|
+ key: "flash",
|
|
|
|
+ value: "todo",
|
|
|
|
+ btnColor: $r("app.color.red_100")
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ uiType: 'Button',
|
|
|
|
+ textValue: "闪光快",
|
|
|
|
+ key: "flash",
|
|
|
|
+ value: "fast",
|
|
|
|
+ btnColor: $r("app.color.red_100")
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ uiType: 'Button',
|
|
|
|
+ textValue: "闪光中",
|
|
|
|
+ key: "flash",
|
|
|
|
+ value: "middle",
|
|
|
|
+ btnColor: $r("app.color.yellow_1")
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ uiType: 'Button',
|
|
|
|
+ textValue: "闪光慢",
|
|
|
|
+ key: "flash",
|
|
|
|
+ value: "slow",
|
|
|
|
+ btnColor: $r("app.color.green_100")
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ uiType: 'Button',
|
|
|
|
+ textValue: "关闭",
|
|
|
|
+ key: "flash",
|
|
|
|
+ value: "off",
|
|
|
|
+ btnColor: $r("app.color.gray_6666")
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ ]
|
|
|
|
+ toOperation = (m: SSDModel) => {
|
|
|
|
+ console.log("toOperation", JSON.stringify(m))
|
|
|
|
+ let data: SSDParamsData = {
|
|
|
|
+ lighting: '',
|
|
|
|
+ buzzer: '',
|
|
|
|
+ flash: ''
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ Reflect.set(data, m.key, m.value)
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ console.log("toOperation", JSON.stringify(data))
|
|
|
|
+
|
|
|
|
+ EquipmentRequest.post("/api/v1/device/setup", {
|
|
|
|
+ deviceNo: this.device.deviceNo ?? "",
|
|
|
|
+ data: data
|
|
|
|
+ } as SSDParams)
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ build() {
|
|
|
|
+ Column() {
|
|
|
|
+
|
|
|
|
+ ForEach(this.operations, (ops: SSDModel[], index) => {
|
|
|
|
+ ListItem() {
|
|
|
|
+ Row({ space: 10 }) {
|
|
|
|
+ ForEach(ops, (op: SSDModel) => {
|
|
|
|
+ if (op.uiType === "Text") {
|
|
|
|
+ Text(op.textValue)
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ Button({ type: ButtonType.Capsule }) {
|
|
|
|
+ Text(op.textValue)
|
|
|
|
+ }.DeviceBtnS(op.btnColor)
|
|
|
|
+ .onClick(() => {
|
|
|
|
+ this.toOperation(op)
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ .justifyContent(FlexAlign.SpaceEvenly)
|
|
|
|
+ .alignItems(HorizontalAlign.Start)
|
|
|
|
+ .padding({ left: 15 })
|
|
|
|
+ .width(400)
|
|
|
|
+ .height(240)
|
|
|
|
+ .backgroundColor(Color.White)
|
|
|
|
+ .borderRadius(10)
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|