longdianningxing/acs2/nladmin-ui/src/views/system/monitor/device/index.vue

<template>
  <div style="overflow: hidden">
    <el-select v-model="stage_code" :placeholder="$t('auto.common.please')" @change="changeStage">
      <el-option
        v-for="item in Stages"
        :key="item.stage_code"
        :label="item.stage_name"
        :value="item.stage_code"
      />
    </el-select>
    <el-row>
      <div id="container" className="container" style="min-height: 100%" />
    </el-row>
    <!--点击设备显示信息-->
    <el-dialog
      id="dialogs"
      :title="$t('monitor.click.device_information')"
      class="newDialog"
      :visible.sync="dialogDeviceMsgVisible"
      width="22%"
      :top="tops"
      :show-close="false"
      :modal="false"
    >
      <el-table
        :data="arr"
        style="width: 100%"
        max-height="500px"
      >
        <el-table-column
          prop="name"
          :label="$t('monitor.click.monitor_item')"
        />
        <el-table-column
          prop="value"
          :label="$t('monitor.click.current_value')"
        />
      </el-table>
    </el-dialog>
    <!--弹窗设置设备与图标绑定与角度-->
    <el-dialog :title="$t('monitor.click.device_setup')" :visible.sync="dialogFormVisible" width="35%">
      <el-form :model="form" size="small">
        <el-form-item :label="$t('monitor.click.equipment_number')" prop="device_code" label-width="120px">
          <el-input v-model="form.device_code" :disabled="true" />
        </el-form-item>
        <el-form-item :label="$t('monitor.click.bar_code')" label-width="120px">
          <el-input v-model="form.hand_barcode" :disabled="false" />
        </el-form-item>
        <el-form-item :label="$t('monitor.click.request_flag')" prop="requireSucess" label-width="120px">
          <el-radio-group v-model="form.requireSucess">
            <el-radio-button :label="0">{{ $t('auto.common.false') }}</el-radio-button>
            <el-radio-button :label="1">{{ $t('auto.common.true') }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('auto.common.Cancel') }}</el-button>
        <el-button type="primary" @click="dialogSave">{{ $t('auto.common.Confirm') }}</el-button>
      </div>
    </el-dialog>
    <!--弹窗设置设备与图标绑定与角度-->
    <el-dialog :title="$t('monitor.click.device_setup')" :visible.sync="dialogFormVisible3" width="35%">
      <el-form :model="form" size="small">
        <el-form-item :label="$t('monitor.click.equipment_number')" prop="device_code" label-width="80px">
          <el-input v-model="form.device_code" :disabled="true" />
        </el-form-item>
        <el-form-item :label="$t('monitor.click.device_status')" label-width="80px">
          <el-radio-group v-model="form.hasGoodStatus">
            <el-radio-button :label="0">{{ $t('monitor.click.out_of_stock') }}</el-radio-button>
            <el-radio-button :label="1">{{ $t('monitor.click.with_pallets') }}</el-radio-button>
            <el-radio-button :label="2">{{ $t('monitor.click.pallets_and_goods') }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('monitor.click.material_code')" prop="material_type" label-width="80px">
          <el-input v-model="form.material_type" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">{{ $t('auto.common.Cancel') }}</el-button>
        <el-button type="primary" @click="dialogSave">{{ $t('auto.common.Confirm') }}</el-button>
      </div>
    </el-dialog>

    <!--弹窗设置设备与图标绑定与角度-->
    <el-dialog :title="$t('monitor.click.device_setup')" :visible.sync="dialogFormVisible4" width="35%">
      <el-form :model="form" size="small">
        <el-form-item :label="$t('monitor.click.equipment_number')" prop="device_code" label-width="120px">
          <el-input v-model="form.device_code" :disabled="true" />
        </el-form-item>
        <el-form-item :label="$t('monitor.click.disabled_manipulator')" prop="is_disable" label-width="120px">
          <el-radio-group v-model="form.is_disable">
            <el-radio-button :label="0">{{ $t('monitor.click.normal') }}</el-radio-button>
            <el-radio-button :label="1">{{ $t('monitor.click.forbidden') }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('monitor.click.request_flag')" prop="requireSucess" label-width="120px">
          <el-radio-group v-model="form.requireSucess">
            <el-radio-button :label="0"> {{ $t('auto.common.false') }}</el-radio-button>
            <el-radio-button :label="1">{{ $t('auto.common.true') }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible4 = false">{{ $t('auto.common.Cancel') }}</el-button>
        <el-button type="primary" @click="dialogSave">{{ $t('auto.common.Confirm') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="$t('monitor.click.device_setup')" :visible.sync="dialogFormVisible5" width="35%">
      <el-form :model="form" size="small">
        <el-form-item :label="$t('monitor.click.equipment_number')" prop="device_code" label-width="120px">
          <el-input v-model="form.device_code" :disabled="true" />
        </el-form-item>
        <el-form-item :label="$t('monitor.click.request_flag')" prop="requireSucess" label-width="120px">
          <el-radio-group v-model="form.requireSucess">
            <el-radio-button :label="0"> {{ $t('auto.common.false') }}</el-radio-button>
            <el-radio-button :label="1">{{ $t('auto.common.true') }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible5 = false">{{ $t('auto.common.Cancel') }}</el-button>
        <el-button type="primary" @click="dialogSave">{{ $t('auto.common.Confirm') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="$t('monitor.click.device_setup')" :visible.sync="dialogFormVisible7" width="35%">
      <el-form :model="form" size="small">
        <el-form-item :label="$t('monitor.click.equipment_number')" prop="device_code" label-width="120px">
          <el-input v-model="form.device_code" :disabled="true" />
        </el-form-item>
        <el-form-item :label="$t('monitor.click.bar_code')" label-width="120px">
          <el-input v-model="form.hand_barcode" :disabled="false" />
        </el-form-item>
        <el-form-item :label="$t('monitor.click.request_flag')" prop="requireSucess" label-width="120px">
          <el-radio-group v-model="form.requireSucess">
            <el-radio-button :label="0"> {{ $t('auto.common.false') }}</el-radio-button>
            <el-radio-button :label="1">{{ $t('auto.common.true') }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible7 = false">{{ $t('auto.common.Cancel') }}</el-button>
        <el-button type="primary" @click="dialogSave">{{ $t('auto.common.Confirm') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="$t('monitor.click.device_setup')" :visible.sync="dialogFormVisible6" width="35%">
      <el-form :model="form" size="small">
        <el-form-item :label="$t('monitor.click.equipment_number')" prop="device_code" label-width="120px">
          <el-input v-model="form.device_code" :disabled="true" />
        </el-form-item>
        <el-form-item label="申请指令标记" prop="requireSucess" label-width="120px">
          <el-radio-group v-model="form.requireSucess">
            <el-radio-button :label="0"> {{ $t('auto.common.false') }}</el-radio-button>
            <el-radio-button :label="1">{{ $t('auto.common.true') }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="请求任务标记" prop="applySucess" label-width="120px">
          <el-radio-group v-model="form.applySucess">
            <el-radio-button :label="0"> {{ $t('auto.common.false') }}</el-radio-button>
            <el-radio-button :label="1">{{ $t('auto.common.true') }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible5 = false">{{ $t('auto.common.Cancel') }}</el-button>
        <el-button type="primary" @click="dialogSave">{{ $t('auto.common.Confirm') }}</el-button>
      </div>
    </el-dialog>

    <!--弹窗设置设备与图标绑定与角度-->
    <el-dialog :title="$t('monitor.click.device_setup')" :visible.sync="dialogFormVisible1" width="35%">
      <el-form :model="form" size="small">
        <el-form-item :label="$t('monitor.click.equipment_number')" prop="device_code" label-width="80px">
          <el-input v-model="form.device_code" :disabled="true" />
        </el-form-item>

        <el-form-item :label="$t('monitor.click.bar_code')" prop="device_code" label-width="80px">
          <el-input v-model="form.barcode" :disabled="false" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">{{ $t('auto.common.Cancel') }}</el-button>
        <el-button type="primary" @click="saveBarcode">{{ $t('auto.common.Confirm') }}</el-button>
      </div>
    </el-dialog>

    <!--   堆垛机弹出框 -->
    <el-dialog :title="$t('monitor.click.device_setup')" :visible.sync="dialogFormVisible8" width="35%">
      <el-form :model="form" size="small">
        <el-form-item :label="$t('monitor.click.equipment_number')" prop="device_code" label-width="120px">
          <el-input v-model="form.device_code" :disabled="true" />
        </el-form-item>
        <el-form-item :label="$t('monitor.click.job_command')" prop="toCommand" label-width="120px">
          <el-radio-group v-model="form.toCommand">
            <el-radio-button :label="7">{{ $t('monitor.click.recall') }}</el-radio-button>
            <el-radio-button :label="8">{{ $t('monitor.click.scram') }}</el-radio-button>
            <el-radio-button :label="5">{{ $t('monitor.click.police_clearance') }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('monitor.click.keep_out_of_storage')" prop="prohibitInWarehouse" label-width="120px">
          <el-switch v-model="form.prohibitInWarehouse" />
        </el-form-item>
        <el-form-item :label="$t('monitor.click.no_release')" prop="prohibitOutWarehouse" label-width="120px">
          <el-switch v-model="form.prohibitOutWarehouse" />
        </el-form-item>
        <el-form-item :label="$t('monitor.click.stop_task')" prop="stopReceiveTask" label-width="120px">
          <el-switch v-model="form.stopReceiveTask" />
        </el-form-item>
        <el-form-item :label="$t('monitor.click.requireSucess')" prop="applySucess" label-width="120px">
          <el-radio-group v-model="form.requireSucess">
            <el-radio-button :label="0"> {{ $t('auto.common.false') }}</el-radio-button>
            <el-radio-button :label="1">{{ $t('auto.common.true') }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible8 = false">{{ $t('auto.common.Cancel') }}</el-button>
        <el-button type="primary" @click="dialogSave">{{ $t('auto.common.Confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import crudStage from '@/api/logicflow/stage'
import deviceCrud from '@/api/acs/device/device'
import { getDeviceByCodes } from '@/api/acs/device/deviceStageMonitor'
import '@logicflow/core/dist/style/index.css'
import '@logicflow/extension/lib/style/index.css'

import { LogicFlow } from '@logicflow/core'
import { registerCustomElement } from '@/views/system/logicflow/editor/components/node'
import i18n from '@/i18n'
import { selectStageList } from '@/api/acs/stage/stage'

let data = {}
let lf = ''
export default {
  name: 'MonitorDevice',
  data() {
    return {
      // stageParam: 'stage_code', // 舞台参数
      dialogDeviceMsgVisible: false, // 显示设备信息的dialog
      device_code: null,
      tops: '20vh', // 初始top
      stageSelectList: [],
      arr: [], // 显示数组
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogFormVisible4: false,
      dialogFormVisible5: false,
      dialogFormVisible6: false,
      dialogFormVisible7: false,
      dialogFormVisible8: false,
      dialogFormVisible9: false,
      dialogFormVisible10: false,
      Stages: [],
      stage_code: '',
      form: {
        device_code: '',
        hasGoodStatus: null,
        barcode: '',
        hand_barcode: '',
        suspended: null,
        material_type: '',
        requireSucess: '',
        fullrequireSucess: '',
        is_disable: '',
        applySucess: '',
        toCommand: null,
        prohibitInWarehouse: false,
        prohibitOutWarehouse: false,
        stopReceiveTask: false
      },
      allDeviceMsg: [],
      msgTop: '200px',
      msgLeft: '200px'
    }
  },
  created() {
    selectStageList().then(data => {
      this.Stages = data
    })
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    // js提供的clearInterval方法用来清除定时器
    console.log('定时器销毁')
    clearInterval(this.timer)
  },
  methods: {
    // 流程图初始化
    init() {
      // 初始化配置
      lf = new LogicFlow({
        overlapMode: 1,
        container: document.querySelector('#container'), // 容器
        // 画布配置
        // width: window.innerWidth, // 宽度
        height: window.innerHeight, // 高度
        grid: { // 不用格子直接显示，使用背景
          visible: false,
          type: 'mesh',
          size: 5
        },
        background: {
          backgroundImage: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2QwZDBkMCIgb3BhY2l0eT0iMC4yIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDBkMGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=")',
          backgroundRepeat: 'repeat'
        },
        isSilentMode: true,
        adjustEdge: false,
        adjustEdgeMiddle: false,
        adjustEdgeStartAndEnd: false,
        adjustNodePosition: false,
        hideAnchors: true,
        nodeTextEdit: false,
        edgeTextEdit: false
      })
      lf.setTheme(
        {
          baseEdge: { strokeWidth: 1 },
          baseNode: { strokeWidth: 1 },
          nodeText: { overflowMode: 'autoWrap', lineHeight: 1.5 },
          edgeText: { overflowMode: 'autoWrap', lineHeight: 1.5 }
        }
      )
      // 注册自定义元素
      registerCustomElement(lf)
      // 删除默认的右键菜单
      lf.extension.menu.setMenuConfig({
        nodeMenu: false
      })
      lf.on('node:click', (data, e) => { // 鼠标点击节点
        console.log('data: ', data)
        // 展开显示设备信息
        if (data.data.type !== 'pro-rect' && data.data.type !== 'pro-circle' && data.data.type !== 'triangle' && data.data.type !== 'rect-radius') {
          if (data.data.properties.device) {
            this.moveShow(data.data) // 传递节点数据，用来获取id做比对
            this.dialogDeviceMsgVisible = true
            this.device_code = data.data.properties.device
            this.tops = data.e.y + 'px'
            document.getElementsByClassName('el-dialog')[0].style.marginLeft = data.e.x + 'px'
          }
        }
      })
      lf.on('node:contextmenu', (data, e, position) => { // 右键编辑
        if (data.data.type !== 'pro-rect' && data.data.type !== 'pro-circle' && data.data.type !== 'triangle' && data.data.type !== 'rect-radius') {
          if (data.data.properties.device) {
            this.editDevice(data.data.id) // 编辑
          }
        }
      })
      // 开始渲染
      lf.render(data)
      this.initStageData()
    },
    changeStage(var1) {
      // 获取舞台数据
      this.stage_code = var1
      crudStage.getNewStageDataByCode(this.stage_code).then(res => { // 通过舞台编码获取舞台数据并且赋值到lf对象
        data = JSON.parse(res.stage_data)
        lf.render(data)
        this.initStatus() // 初始化状态
      })
      this.timer = setInterval(() => { // 定时刷新设备的状态信息
        console.log('定时器启动')
        this.initStatus()
      }, 200000)
    },
    editDevice(id) {
      let item = ''
      for (const i in this.allDeviceMsg) { // 查找点击节点的id
        if (id === this.allDeviceMsg[i].id) {
          item = this.allDeviceMsg[i]
          break // 匹对完退出
        }
      }
      const clickObj = item
      console.log('clickObj.data', clickObj.data)
      if (!item.data) {
        return
      }
      if (!clickObj.data.is_click) {
        return
      }
      if (clickObj.data.device_type === 'scanner') { // 扫码器
        this.dialogFormVisible1 = true
      } else {
        console.log(clickObj.data.driver_type)
        if (clickObj.data.driver_type === 'standard_ordinary_site') {
          this.dialogFormVisible3 = true
        } else if (clickObj.data.driver_type === 'hailiang_packer_station') {
          this.dialogFormVisible4 = true
        } else if (clickObj.data.driver_type === 'hailiang_xj_plc_test') {
          this.$refs.child1.setForm(clickObj)
        } else if (clickObj.data.driver_type === 'slit_two_manipulator') {
          this.dialogFormVisible4 = true
        } else if (clickObj.data.driver_type === 'siemens_conveyor') {
          // if (clickObj.data.device_name.includes('1016')) {
          //   this.dialogFormVisible7 = true
          // } else {
          //   this.dialogFormVisible5 = true
          // }
          this.dialogFormVisible7 = true
        } else if (clickObj.data.driver_type === 'siemens_conveyor_ckk') {
          this.dialogFormVisible7 = true
        } else if (clickObj.data.driver_type === 'standard_conveyor_control_with_scanner') {
          this.dialogFormVisible6 = true
        } else if (clickObj.data.driver_type === 'standard_stacker') {
          this.dialogFormVisible8 = true
        } else if (clickObj.data.driver_type === 'pull_head_manipulator') {
          this.dialogFormVisible9 = true
        } else {
          this.dialogFormVisible = true
        }
      }
      this.form.angle = clickObj.angle
      this.form.index = clickObj.index
      this.form.device_code = clickObj.device_code
      this.form.hasGoodStatus = clickObj.data.hasGoods
      this.form.material_type = clickObj.data.material_type
      this.form.requireSucess = clickObj.data.requireSucess
      this.form.fullrequireSucess = clickObj.data.fullrequireSucess
      this.form.is_disable = clickObj.data.is_disable1
      this.form.applySucess = clickObj.data.applySucess
      this.form.barcode = clickObj.data.barcode
      this.form.hand_barcode = clickObj.data.hand_barcode
      this.form.prohibitInWarehouse = clickObj.data.prohibitInWarehouse
      this.form.prohibitOutWarehouse = clickObj.data.prohibitOutWarehouse
      this.form.stopReceiveTask = clickObj.data.stopReceiveTask
      this.form.toCommand = null
    },
    moveShow(nodeData) { // 点击之后显示出来的数据----只需要设备信息
      let item = ''
      for (const i in this.allDeviceMsg) { // 查找点击节点的id
        if (nodeData.id === this.allDeviceMsg[i].id) {
          item = this.allDeviceMsg[i]
          break // 匹对完退出
        }
      }
      this.arr = [] // 清空
      if (item.device_code && item.data) {
        // console.log('item', item)
        this.arr = [
          { name: i18n.t('monitor.click.equipment_number'), value: item.device_code },
          { name: i18n.t('monitor.click.device_name'), value: item.device_name }
        ]
        const data = item.data
        for (const val in data) {
          if (val === 'isOnline' || val === 'isError' || val === 'hasGoods') {
            continue
          }
          if (val === 'message' && data.isError === true) {
            const obj = { name: i18n.t('monitor.click.device_information'), value: data[val] }
            this.arr.push(obj)
          }

          if (val === 'message' && data.isError === 'false') {
            const obj = { name: i18n.t('monitor.click.exception_message'), value: data[val] }
            this.arr.push(obj)
          }

          if (val === 'move') {
            const obj = { name: i18n.t('monitor.click.photoelectric_signal'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'mode') {
            const obj = { name: i18n.t('monitor.click.mode'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'error') {
            const obj = { name: i18n.t('monitor.click.alarm'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'ip') {
            const obj = { name: 'IP', value: data[val] }
            this.arr.push(obj)
          } else if (val === 'number') {
            const obj = { name: i18n.t('monitor.click.pallet_quantity'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'inst_message') {
            const obj = { name: i18n.t('monitor.click.instruction_information'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'message') {
            const obj = { name: i18n.t('monitor.click.note_information'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'inst_message') {
            const obj = { name: i18n.t('monitor.click.current_instruction_message'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'last_inst_message') {
            const obj = { name: i18n.t('monitor.click.last_instruction_message'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'barcode') {
            const obj = { name: i18n.t('monitor.click.barcode'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'barcode_length') {
            const obj = { name: i18n.t('monitor.click.barcode_length'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'last_container') {
            const obj = { name: i18n.t('monitor.click.last_container'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'instruction_code') {
            const obj = { name: i18n.t('monitor.click.current_instruction_message'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'task_code') {
            const obj = { name: i18n.t('monitor.click.task_number'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'last_instruction_code') {
            const obj = { name: i18n.t('monitor.click.last_instruction_message'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'action') {
            const obj = { name: i18n.t('monitor.click.action_signal'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'io_action') {
            const obj = { name: i18n.t('monitor.click.clearance_signal'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'material') {
            const obj = { name: i18n.t('monitor.click.materiel'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'batch') {
            const obj = { name: i18n.t('monitor.click.lot'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'requestSucess') {
            const obj = { name: i18n.t('monitor.click.request_task'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'applySucess') {
            const obj = { name: i18n.t('monitor.click.request_order'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'requireApplyLabelingSuccess') {
            const obj = { name: i18n.t('monitor.click.apply_labeling'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'requireApplyLaStrangulationSuccess') {
            const obj = { name: i18n.t('monitor.click.apply_for_bundling'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'status') {
            const obj = { name: i18n.t('monitor.click.device_status'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'weight') {
            const obj = { name: i18n.t('monitor.click.weight'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'move_1') {
            const obj = { name: i18n.t('monitor.click.front_station_photoelectric_signal'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'open') {
            const obj = { name: i18n.t('monitor.click.open'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'close') {
            const obj = { name: i18n.t('monitor.click.close'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'phase') {
            const obj = { name: i18n.t('monitor.click.AGV_phase'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'phase_name') {
            const obj = { name: i18n.t('monitor.click.description_of_the_AGV_phase'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'option') {
            const obj = { name: i18n.t('monitor.click.AGV_action'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'agv_power') {
            const obj = { name: i18n.t('monitor.click.AGV_power'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'move_2') {
            const obj = { name: i18n.t('monitor.click.station_photoelectric_signal'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'action_1') {
            const obj = { name: i18n.t('monitor.click.front_station_action_signal'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'action_2') {
            const obj = { name: i18n.t('monitor.click.back_station_action_signal'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'walk_y') {
            const obj = { name: i18n.t('monitor.click.walk_y'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'task1') {
            const obj = { name: i18n.t('monitor.click.previous_station_task'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'task2') {
            const obj = { name: i18n.t('monitor.click.back_station_task'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'task') {
            const obj = { name: i18n.t('monitor.click.task_number'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'is_disable') {
            const obj = { name: i18n.t('monitor.click.disable'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'temperature') {
            const obj = { name: i18n.t('monitor.click.current_temperature'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'finish') {
            const obj = { name: i18n.t('monitor.click.oven_finish'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'countdown_house') {
            const obj = { name: i18n.t('monitor.click.house'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'countdown_min') {
            const obj = { name: i18n.t('monitor.click.minutes'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'countdown_sec') {
            const obj = { name: i18n.t('monitor.click.seconds'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'door') {
            const obj = { name: i18n.t('monitor.click.gate_state'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'notCreateTaskMessage') {
            const obj = { name: i18n.t('monitor.click.task_creation_failure'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'notCreateInstMessage') {
            const obj = { name: i18n.t('monitor.click.failed_to_create_instruction'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'feedMessage') {
            const obj = { name: i18n.t('monitor.click.no_electrical_signal_feedback_cause'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'requireSucess') {
            const obj = { name: i18n.t('monitor.click.request_success_flag'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'applySucess') {
            const obj = { name: 'applySucess', value: data[val] }
            this.arr.push(obj)
          } else if (val === 'out_finish') {
            const obj = { name: i18n.t('monitor.click.delivery_completed'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'inventory_qty') {
            const obj = { name: i18n.t('monitor.click.inventory_quantity'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'hand_barcode') {
            const obj = { name: 'barcode', value: data[val] }
            this.arr.push(obj)
          } else if (val === 'x') {
            const obj = { name: 'X', value: data[val] }
            this.arr.push(obj)
          } else if (val === 'y') {
            const obj = { name: 'Y', value: data[val] }
            this.arr.push(obj)
          } else if (val === 'angle') {
            const obj = { name: i18n.t('monitor.click.angle'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'electricity') {
            const obj = { name: i18n.t('monitor.click.electric_quantity'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'status_name') {
            const obj = { name: i18n.t('monitor.click.status'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'fault') {
            const obj = { name: i18n.t('monitor.click.abnormal'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'map_id') {
            const obj = { name: i18n.t('monitor.click.floor'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'power') {
            const obj = { name: i18n.t('monitor.click.electric_quantity'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'pallet') {
            const obj = { name: i18n.t('monitor.click.tray'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'load') {
            const obj = { name: i18n.t('monitor.click.loading_or_not'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'alarm') {
            const obj = { name: i18n.t('monitor.click.alarm'), value: data[val] }
            this.arr.push(obj)
          } else if (val === 'task_id') {
            const obj = { name: i18n.t('monitor.click.task_number'), value: data[val] }
            this.arr.push(obj)
          }
        }
      }
      // console.log('arr:', this.arr)
    },
    initStatus() { // 初始化所有节点的设备信息，通过节点id对应设备编号
      let resion = {}
      resion = lf.getGraphData().nodes.map(item => ({ id: item.id, device_code: item.properties.device }))
      getDeviceByCodes(resion).then(res => {
        console.log(res)
        this.allDeviceMsg = res // 拿到所有节点的设备数据
        // console.log('initStatus-res', res)
        // 实时设置状态信息
        for (var item of res) { // 循环并且设置属性值
          if (item.data !== undefined) {
            if (item.data.isOnline !== undefined) {
              lf.setProperties(item.id, {
                isOnline: item.data.isOnline
              })
            }
            if (item.data.hasGoods !== undefined) {
              lf.setProperties(item.id, {
                hasGoods: item.data.hasGoods
              })
            }
            if (item.data.isError !== undefined) {
              lf.setProperties(item.id, {
                isError: item.data.isError
              })
            }
          }
        }
        // 设置动态实时显示设备信息
        const { nodes } = lf.getSelectElements() // 获取选中的节点
        // console.log(nodes)
        if (nodes.length === 1) { // 因为是定时器，没有选中则不用实时更新显示数据
          this.moveShow(nodes[0]) // 监控模式下不可能托选，因此就只有一个数据
        }
      })
    },
    dialogSave() {
      deviceCrud.changeDeviceStatus(this.form).then(res => {
        this.$notify({ title: '操作成功', message: '', type: 'success' })
        this.dialogFormVisible = false
        this.dialogFormVisible3 = false
        this.dialogFormVisible4 = false
        this.dialogFormVisible5 = false
        this.dialogFormVisible6 = false
        this.dialogFormVisible7 = false
        this.dialogFormVisible8 = false
        this.dialogFormVisible9 = false
        this.initStageData()
      }).catch(err => {
        this.dialogFormVisible = false
        this.dialogFormVisible3 = false
        this.dialogFormVisible4 = false
        this.dialogFormVisible5 = false
        this.dialogFormVisible7 = false
        this.dialogFormVisible8 = false
        this.dialogFormVisible9 = false
        console.log(err.response.data.message)
      })
    },
    saveBarcode() {
      deviceCrud.saveBarcode(this.form).then(res => {
        this.notify('操作成功', 'success')
        this.dialogFormVisible1 = false
        this.initStageData()
      }).catch(err => {
        this.dialogFormVisible1 = false
        console.log(err.response.data.message)
      })
    }
  }
}
</script>

<style>
html, body {
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
}
</style>
<style scoped>
.container {
  background-color: #f8f9fa;
  height: 100%;
}

.newDialog /deep/ .el-dialog__header {
  padding: 1vh 1vw 0 1vw;
}

.newDialog /deep/ .el-dialog__body {
  padding: 1vh 1vw;
}

.toolbar-sty {
  position: absolute;
  margin-top: 5px;
  top: 0;
  padding: 5px;
  left: 30px;
  height: 45px;
  /*width: 310px;*/
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  z-index: 10;
  background: #e5e5e5;
}

::v-deep.el-radio-button{
  margin-right: 15px;
  border-radius:4px;
}
  .el-radio-button__inner {
    width: 90px;
    height: 30px;
    background: #F7F8FA;
    color:#333;
    border: 0 !important;
  }
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: #fff;
    background-color: blue;
    border-color: blue;
    box-shadow: -1px 0 0 0 blue;
  }

</style>