fix agv状态显示

acs/nladmin-ui/src/views/acs/monitor/device/index.vue

@@ -1,571 +0,0 @@
-<template>
-  <div class="monitor-wrap">
-    <el-row style="margin-top: 20px;margin-left: 20px;margin-bottom: 20px">
-      <el-col :span="6" />
-      <el-col :span="18">
-        <!-- 舞台:
-         <el-select v-model="stage_code" placeholder="请选择" @change="changeStage">
-           <el-option
-             v-for="item in stageSelectList"
-             :key="item.stage_code"
-             :label="item.stage_name"
-             :value="item.stage_code">
-           </el-option>
-         </el-select>
-         <el-button type="primary" @click="saveAll" :loading="saveLoading">保存</el-button>
-         <el-button type="success" @click="cleanArr2">清空</el-button>-->
-        <!-- <el-button type="info">操作</el-button>-->
-      </el-col>
-    </el-row>
-
-    <el-row>
-      <el-col :span="1" style="margin-left: 10px">
-        <div>
-          <!-- <draggable :list="arr1" animation="300"
-                      dragClass="dragClass"
-                      ghostClass="ghostClass"
-                      chosenClass="chosenClass"
-                      @start="onStart"
-                      @end="onEnd"
-                      :move="onMove"
-                      :group="{ name:'group', pull:'clone', put:false}"
-           >
-
-             &lt;!&ndash;vue中引入图片https://blog.csdn.net/qq_35393869/article/details/80333564&ndash;&gt;
-             <div v-for="(item,index) in arr1" :key="index"
-                  style="position: relative; width: 34px;height: 34px;display: inline-block;margin: 0 0 0 0 ;vertical-align:bottom;outline: 1px solid #f0f0f0;">
-               <img :src="require('../../../../assets/acs/' +item.img1+'.png')" alt="" width="34px" height="34px;"
-                    style="margin: 0 0 0 0;vertical-align:bottom;transform: rotate(0deg);"/>
-
-             </div>
-
-           </draggable>-->
-        </div>
-      </el-col>
-
-      <el-col :span="22" style="margin-left: 30px">
-        <el-scrollbar style="width:1850px;height: 1050px;">
-          <!--使用draggable组件-->
-          <draggable
-            :list="arr2"
-            group="group"
-            animation="300"
-            filter=".forbid"
-            :style="'width:'+ grid_width +'px;'"
-          >
-
-            <div
-              v-for="(item) in arr2"
-              :key="item.index"
-              class="forbid"
-              style="position: relative; width: 34px;height: 34px;display: inline-block;margin: 0 0 0 0 ;vertical-align:bottom;"
-              @click="clickDevice(item)"
-            >
-
-              <el-popover
-                v-if="currentItem == item.index"
-                :ref="'pop_'+item.index"
-                placement="bottom"
-                effect="dark"
-                trigger="manual"
-                :value="currentItem == item.index"
-                :disabled="item.device_code == ''"
-                :popper-class="isErrorColor(item)"
-              >
-                <div v-if="item.device_code !== ''" style="height: 390px;overflow-y: auto">
-                  <div style="padding: 3px;">
-                    设备信息
-                  </div>
-                  <el-table
-                    :data="moveShow(item)"
-                    style="width: 100%"
-                  >
-                    <af-table-column
-                      prop="name"
-                      label="监控项"
-                    />
-                    <af-table-column
-                      prop="value"
-                      label="当前值"
-                    />
-                  </el-table>
-                </div>
-              </el-popover>
-
-              <div v-popover="'pop_'+item.index" class="content" @mouseover="changeCurrentTime(item)">
-                <img
-                  :src="require('../../../../assets/acs/' +item.img2+'.png')"
-                  alt=""
-                  width="34px"
-                  height="34px;"
-                  :style="{ transform:' rotate('+item.angle+'deg)' }"
-                  style="outline: 1px solid #f0f0f0;"
-                >
-                <img
-                  v-if="hasGoods(item) && item.img2!='1' "
-                  :src="require('../../../../assets/acs/' +'托盘'+'.png')"
-                  style="position: absolute; top: 5px;right: 5px;width: 24px;height: 24px;"
-                >
-                <img
-                  v-if="statusPic(item) && item.img2!='1'"
-                  :src="require('../../../../assets/acs/' +'status0'+'.png')"
-                  style="position: absolute; top: 0;left: 0;"
-                >
-                <img
-                  v-if="!statusPic(item) && item.img2!='1' && item.device_code"
-                  :src="require('../../../../assets/acs/' +'status1'+'.png')"
-                  style="position: absolute; top: 0;left: 0;"
-                >
-                <img
-                  v-if="isError(item)"
-                  :src="require('../../../../assets/acs/' +'icon_alert'+'.png')"
-                  style="position: absolute; top: 5px;right: 5px;width: 23px;height: 23px;"
-                >
-              </div>
-            </div>
-          </draggable>
-        </el-scrollbar>
-      </el-col>
-    </el-row>
-
-    <!--弹窗设置设备与图标绑定与角度-->
-    <el-dialog title="设备设置" :visible.sync="dialogFormVisible" width="35%">
-      <el-form :model="form" size="small">
-        <el-form-item label="设备编号" prop="device_code" label-width="80px">
-          <el-input v-model="form.device_code" :disabled="true" />
-        </el-form-item>
-
-        <el-form-item label="设备状态" label-width="80px">
-          <el-radio-group v-model="form.option">
-            <el-radio-button :label="0">禁止进出</el-radio-button>
-            <el-radio-button :label="1">允许进入</el-radio-button>
-            <el-radio-button :label="2">允许离开</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">取 消</el-button>
-        <el-button type="primary" @click="dialogSave">确 定</el-button>
-      </div>
-    </el-dialog>
-
-    <!--弹窗设置设备与图标绑定与角度-->
-    <el-dialog title="设备设置" :visible.sync="dialogFormVisible3" width="35%">
-      <el-form :model="form" size="small">
-        <el-form-item label="设备编号" prop="device_code" label-width="80px">
-          <el-input v-model="form.device_code" :disabled="true" />
-        </el-form-item>
-        <el-form-item label="设备状态" label-width="80px">
-          <el-radio-group v-model="form.hasGoodStatus">
-            <el-radio-button :label="0">无货</el-radio-button>
-            <el-radio-button :label="1">空料斗</el-radio-button>
-            <el-radio-button :label="2">满料斗</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="物料编码" 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">取 消</el-button>
-        <el-button type="primary" @click="dialogSave">确 定</el-button>
-      </div>
-    </el-dialog>
-
-    <!--弹窗设置设备与图标绑定与角度-->
-    <el-dialog title="设备设置" :visible.sync="dialogFormVisible4" width="35%">
-      <el-form :model="form" size="small">
-        <el-form-item label="设备编号" 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">否</el-radio-button>
-            <el-radio-button :label="1">是</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="空想请求成功" prop="fullrequireSucess" label-width="120px">
-          <el-radio-group v-model="form.fullrequireSucess">
-            <el-radio-button :label="0">否</el-radio-button>
-            <el-radio-button :label="1">是</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible4 = false">取 消</el-button>
-        <el-button type="primary" @click="dialogSave">确 定</el-button>
-      </div>
-    </el-dialog>
-
-    <!--弹窗设置设备与图标绑定与角度-->
-    <el-dialog title="设备设置" :visible.sync="dialogFormVisible1" width="35%">
-      <el-form :model="form" size="small">
-        <el-form-item label="设备编号" prop="device_code" label-width="80px">
-          <el-input v-model="form.device_code" :disabled="true" />
-        </el-form-item>
-
-        <el-form-item label="条码" 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">取 消</el-button>
-        <el-button type="primary" @click="saveBarcode">确 定</el-button>
-      </div>
-    </el-dialog>
-    <XJDeviceMonitor ref="child1" />
-  </div>
-</template>
-
-<script>
-// 导入draggable组件
-import deviceCrud from '@/api/acs/device/device'
-import draggable from 'vuedraggable'
-import crud from '@/mixins/crud'
-import actorCrud from '@/api/acs/stage/actor'
-import XJDeviceMonitor from '@/views/acs/monitor/device/XJDeviceMonitor'
-
-export default {
-  name: 'MonitorDevice',
-  // 注册draggable组件
-  components: {
-    draggable, XJDeviceMonitor
-  },
-  mixins: [crud],
-  data() {
-    return {
-      stage_code: '',
-      dialogFormVisible: false,
-      dialogFormVisible1: false,
-      dialogFormVisible2: false,
-      dialogFormVisible3: false,
-      dialogFormVisible4: false,
-      arr2: [],
-      currentItem: '',
-      stageSelectList: [],
-      deviceList: [],
-      form: {
-        index: 0,
-        device_code: '',
-        angle: 0,
-        hasGoodStatus: null,
-        barcode: '',
-        suspended: null,
-        material_type: '',
-        requireSucess: '',
-        fullrequireSucess: ''
-      },
-      grid_width: 1000
-    }
-  },
-  created() {
-    this.initArr2()
-    this.webSocket()
-  },
-  methods: {
-    clickDevice(item) {
-      // debugger
-      const index = item.index
-      const clickObj = this.arr2[index]
-      console.log(clickObj.data)
-      if (!clickObj.img2 || clickObj.img2 === '1' || !item.data) {
-        return
-      }
-      if (clickObj.data.is_click !== true) {
-        return
-      }
-      if (clickObj.data.device_type === 'scanner') {
-        this.dialogFormVisible1 = true
-      } else {
-        if (clickObj.data.driver_type === 'hailiang_engraving_cache') {
-          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 {
-          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
-    },
-    hasGoods(item) {
-      if (item.data && item.data.hasGoods > 0) {
-        return true
-      }
-      return false
-    },
-    statusPic(item) {
-      if (item.data && item.data.isOnline === true) {
-        return true
-      }
-      return false
-    },
-    isError(item) {
-      if (item.data && item.data.isError === true) {
-        return true
-      }
-      return false
-    },
-    isErrorColor(item) {
-      if (item.data && item.data.isError === true) {
-        return 'error'
-      }
-      return 'normal'
-    },
-    changeCurrentTime(item) {
-      this.currentItem = item.index
-    },
-    moveShow(item) {
-      // debugger
-      if (item.device_code && item.data) {
-        const arr = [
-          { name: '设备编号', value: item.device_code },
-          { 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: '设备信息', value: data[val] }
-            arr.push(obj)
-          }
-
-          if (val === 'message' && data.isError === 'false') {
-            const obj = { name: '异常信息', value: data[val] }
-            arr.push(obj)
-          }
-
-          if (val === 'move') {
-            const obj = { name: '光电信号', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'mode') {
-            const obj = { name: '模式', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'error') {
-            const obj = { name: '报警', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'ip') {
-            const obj = { name: 'IP地址', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'number') {
-            const obj = { name: '托盘数量', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'qty') {
-            const obj = { name: '数量', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'weight') {
-            const obj = { name: '重量', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'instruction_message') {
-            const obj = { name: '指令信息', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'last_instruction_message') {
-            const obj = { name: '上次指令信息', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'container') {
-            const obj = { name: '载具号', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'last_container') {
-            const obj = { name: '上次载具号', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'instruction_code') {
-            const obj = { name: '指令号', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'last_instruction_code') {
-            const obj = { name: '上次指令号', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'action') {
-            const obj = { name: '动作信号', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'io_action') {
-            const obj = { name: '允许进出信号', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'material') {
-            const obj = { name: '物料', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'batch') {
-            const obj = { name: '批次', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'requestSucess') {
-            const obj = { name: '缺料请求成功', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'applySucess') {
-            const obj = { name: '是否申请指令', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'message') {
-            const obj = { name: '说明', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'phase') {
-            const obj = { name: 'AGV交互阶段', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'option') {
-            const obj = { name: 'AGV动作', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'temperature') {
-            const obj = { name: '当前温度', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'finish') {
-            const obj = { name: '烘箱完成', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'countdown_house') {
-            const obj = { name: '恒温倒计时(时)', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'countdown_min') {
-            const obj = { name: '恒温倒计时(分)', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'countdown_sec') {
-            const obj = { name: '恒温倒计时(秒)', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'task') {
-            const obj = { name: '任务号', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'door') {
-            const obj = { name: '门状态', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'address') {
-            const obj = { name: 'agv位置', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'phaseName') {
-            const obj = { name: 'phase', value: data[val] }
-            arr.push(obj)
-          } else if (val === 'is_disable') {
-            const obj = { name: '是否禁用', value: data[val] }
-            arr.push(obj)
-          }
-        }
-        return arr
-      }
-    },
-    dialogSave() {
-      deviceCrud.changeDeviceStatus(this.form).then(res => {
-        this.notify('操作成功', 'success')
-        this.dialogFormVisible = false
-        this.dialogFormVisible3 = false
-        this.dialogFormVisible4 = false
-        this.initArr2()
-      }).catch(err => {
-        this.dialogFormVisible = false
-        this.dialogFormVisible3 = false
-        this.dialogFormVisible4 = false
-        console.log(err.response.data.message)
-      })
-    },
-    statusSave() {
-      deviceCrud.changeFenceStatus(this.form).then(res => {
-        this.notify('操作成功', 'success')
-        this.dialogFormVisible2 = false
-        this.initArr2()
-      }).catch(err => {
-        this.dialogFormVisible2 = false
-        console.log(err.response.data.message)
-      })
-    },
-    saveBarcode() {
-      deviceCrud.saveBarcode(this.form).then(res => {
-        this.notify('操作成功', 'success')
-        this.dialogFormVisible1 = false
-        this.initArr2()
-      }).catch(err => {
-        this.dialogFormVisible1 = false
-        console.log(err.response.data.message)
-      })
-    },
-    initArr2() {
-      actorCrud.queryStageActor('SHDP').then(data => {
-        if (data.detail.length > 0) {
-          this.grid_width = data.form.grid_width
-          this.arr2 = []
-          for (let i = 0; i < data.form.grid_length; i++) {
-            const a = { 'id': i, 'name': '', device_code: '', img: '', index: i, img2: '1', angle: '0' }
-            this.arr2.push(a)
-          }
-          for (const i of data.detail) {
-            const index = i.index
-            this.arr2.splice(index, 1, i)
-          }
-        }
-      }).catch(err => {
-        console.log(err.response.data.message)
-      })
-    },
-    webSocket() {
-      const that = this
-      if (typeof (WebSocket) === 'undefined') {
-        this.$notify({
-          title: '提示',
-          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器！',
-          type: 'warning',
-          duration: 0
-        })
-      } else {
-        const id = 'device_monitor'
-        // 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改
-        // 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送
-
-        // const wsUri = process.env.VUE_APP_WS_API + '/webSocket/' + id
-        const wsUri = window.g.prod.VUE_APP_BASE_API.replace('http', 'ws') + '/webSocket/' + id
-        this.socket = new WebSocket(wsUri)
-        // 监听socket打开
-        this.socket.onopen = function() {
-          console.log('浏览器WebSocket已打开')
-          // that.socket.send('测试客户端发送消息')
-        }
-
-        // 监听socket消息接收
-        this.socket.onmessage = function(msg) {
-          const list = JSON.parse(msg.data).msg.detail
-          // console.log(list)
-
-          for (const item of list) {
-            const index = item.index
-            // that.arr2.splice(index, 1, item)
-
-            if (item.data) {
-              Object.assign(that.arr2[index].data, item.data)
-            }
-          }
-        }
-
-        // 监听socket错误
-        this.socket.onerror = function() {
-          that.$notify({
-            title: '错误',
-            message: '服务器错误，无法接收实时报警信息',
-            type: 'error',
-            duration: 0
-          })
-        }
-        // 监听socket关闭
-        this.socket.onclose = function() {
-          console.log('WebSocket已关闭')
-        }
-      }
-    }
-  }
-}
-</script>
-<style scoped>
-.normal {
-  background: #4a659c !important;
-}
-
-.error {
-  background: #95341c !important;
-}
-
-</style>
-<style>
-
-.monitor-wrap .el-popover {
-  margin-left: 35px;
-}
-</style>

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

@@ -354,11 +354,12 @@ export default {
         } 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
-          }
+          // 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') {
@@ -496,6 +497,9 @@ export default {
           } else if (val === 'phase') {
             const obj = { name: 'AGV交互阶段', value: data[val] }
             this.arr.push(obj)
+          } else if (val === 'phase_name') {
+            const obj = { name: 'AGV交互阶段说明', value: data[val] }
+            this.arr.push(obj)
           } else if (val === 'option') {
             const obj = { name: 'AGV动作', value: data[val] }
             this.arr.push(obj)
@@ -568,6 +572,24 @@ export default {
           } else if (val === 'hand_barcode') {
             const obj = { name: '手补条码', 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: '角度', value: data[val] }
+            this.arr.push(obj)
+          } else if (val === 'electricity') {
+            const obj = { name: '电量', value: data[val] }
+            this.arr.push(obj)
+          } else if (val === 'status_name') {
+            const obj = { name: '状态', value: data[val] }
+            this.arr.push(obj)
+          } else if (val === 'fault') {
+            const obj = { name: '异常', value: data[val] }
+            this.arr.push(obj)
           }
         }
       }