imcs_yj_fe/imcs-ui/src/views/zuihou/developer/warnLong/components/View.vue

<template>
  <el-dialog
    :title="$t(&quot;common.view&quot;)"
    :width="width"
    :append-to-body="true"
    :visible.sync="isVisible"
    class="tenant-view"
  >
  
   <div style="height: 800px;">
   
  <el-tabs :tab-position="tabPosition" style="height: 800px">
    <el-tab-pane label="基础信息">

      <el-row :gutter="12">
      <el-col :xs="24" :sm="24">
        <div class="view-item">
          <i class="el-icon-user" />
          <span>节点名称</span>
          <h3>{{ tenant.nodeNo }}</h3>
        </div>
      </el-col>      
    </el-row>
    <el-row :gutter="12">
      <el-col :xs="24" :sm="12">
        <div class="view-item">
          <i class="el-icon-trophy" />
          <span>执行设备</span>
          <h3>{{tenant.category == '1' ? tenant.resourceName :(tenant.category== '2'? 'AGV': (tenant.category== '3'? tenant.zoneName+'机器人':'其它设备'))}}
          </h3>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12">
        <div class="view-item">
          <i class="el-icon-suitcase" />
          <span>目标设备</span>
          <h3>{{ tenant.resourceName }}</h3>
        </div>
      </el-col>     
    </el-row>
    <el-row  :gutter="12">
      <el-col :xs="24" :sm="12">
        <div class="view-item">
          <i class="el-icon-phone-outline" />
          <span>操作状态</span>
          <h3>指令{{tenant.exeStatus=='1'? "已发送":( tenant.exeStatus=='2'?'进行中':'已完成')}}</h3>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12">
        <div class="view-item">
          <i class="el-icon-phone-outline" />
          <span>结果状态</span>
          <h3>结果执行{{ tenant.exeResult=='1'?'成功':(tenant.exeResult=='0'?'失败':'响应超时') }}</h3>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="12">
      <el-col :xs="24" :sm="12">
        <div class="view-item">
          <i class="el-icon-star-off" />
          <span>异常反馈</span>
          <h3>{{ tenant.feedback }}</h3>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12">
        <div class="view-item">
          <i class="el-icon-bangzhu" />
          <span>当前工序</span>
          <h3>{{ tenant.procedureName }}</h3>          
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="12">
      <el-col :xs="24" :sm="12">
        <div class="view-item">
          <i class="el-icon-time" />
          <span>计划时间</span>
          <h3>{{ dataList[1].planTime||'无' }}</h3>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12">
        <div class="view-item">
          <i class="el-icon-brush" />
          <span>执行时间</span>
          <h3>{{ dataList[1].actualTime || '无' }}</h3>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="12">
      <el-col :xs="24" :sm="12">
        <div class="view-item">
          <i class="el-icon-time" />
          <span>执行设备状态</span>
          <h3>{{ dataList[1].resourceStatus=="1"? "设备可用": "设备不可用" }}</h3>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12">
        <div class="view-item">
          <i class="el-icon-brush" />
          <span>执行设备工作状态</span>
          <h3>{{ dataList[1].onlineStatus=="1"? "设备在线":(dataList[1].onlineStatus=='0'?'离线':(dataList[1].onlineStatus=='2')?'加工中':'报警') }}</h3>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="18">
      <el-col :xs="24" :sm="24">
        <div class="view-item">
          <i class="el-icon-date" />
          <span>情况分析</span>         
        </div>
        <div class="view-item">
          <el-alert v-if="tenant.exeResult=='0' && tenant.exeStatus=='1'" title="请求指令发送成功,执行设备操作未完成" type="error" :closable="false" effect="dark"> </el-alert>
          <el-alert v-if="tenant.exeResult=='0' && tenant.exeStatus=='3'" title="执行设备操作已完成,但返回信号未确认成功" type="error" :closable="false" effect="dark"> </el-alert>
          <el-alert v-if="tenant.exeResult==null" title="设备操作执行中返回信号中断或者丢弃" type="error" :closable="false" effect="dark"> </el-alert>
          <el-alert v-if="dataList[1].resourceStatus=='0'|| dataList[1].onlineStatus=='3'" title="执行设备状态异常，请检查设备是否故障" type="error" :closable="false" effect="dark"> </el-alert>

          <el-alert v-if="dataList[1].onlineStatus=='0'" title="执行设备工作状态异常，请检查设备是否在线" type="error" :closable="false" effect="dark"> </el-alert>

          <el-alert v-if="dataList[1].onlineStatus=='2'" title="执行设备正在工作中，请耐心等待资源释放" type="warning" :closable="false" effect="dark"> </el-alert>

        </div>
      </el-col>      
    </el-row>

    </el-tab-pane>
    <el-tab-pane label="关联信息">      
      <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>前序节点</span>
            <el-button style="float: right; padding: 3px 0" type="text"></el-button>
        </div>
        <div class="text item">
          <el-row :gutter="12" >
              <el-col :xs="24" :sm="8"  v-for="(key, index) in keys" :key="index">
                <div class="view-item">
                   <span>{{ key.value }}</span>  
                   <h3>{{ dataList[0][key.name]|| '无' }}</h3>
                </div>                   
              </el-col>
              <el-col :xs="24" :sm="8">
        <div class="view-item">
          <i class="el-icon-phone-outline" />
          <span>操作状态</span>
          <h3>指令{{dataList[0].exeStatus=='1'? "已发送":( dataList[0].exeStatus=='2'?'进行中':'已完成')}}</h3>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8">
        <div class="view-item">
          <i class="el-icon-phone-outline" />
          <span>结果状态</span>
          <h3>结果执行{{ dataList[0].exeResult=='1'?'成功':(dataList[0].exeResult=='0'?'失败':'响应超时') }}</h3>
        </div>
      </el-col>
                
          </el-row>
       </div>
      </el-card>      
      <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>后序节点</span>
            <el-button style="float: right; padding: 3px 0" type="text"></el-button>
        </div>
        <div class="text item">
          <el-row :gutter="12" >
              <el-col :xs="24" :sm="8"  v-for="(key, index) in keys" :key="index">
                <div class="view-item">
                   <span>{{ key.value }}</span>  
                   <h3>{{ dataList[2][key.name] || '无' }}</h3>
                </div>                   
              </el-col>
              <el-col :xs="24" :sm="8">
        <div class="view-item">
          <i class="el-icon-phone-outline" />
          <span>操作状态</span>
          <h3>指令{{dataList[2].exeStatus=='1'? "已发送":( dataList[2].exeStatus=='2'?'进行中':'已完成')}}</h3>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8">
        <div class="view-item">
          <i class="el-icon-phone-outline" />
          <span>结果状态</span>
          <h3>结果执行{{ dataList[2].exeResult=='1'?'成功':(dataList[2].exeResult=='0'?'失败':'响应超时') }}</h3>
        </div>
      </el-col>  
          </el-row>
       </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>资源占用</span>
            <el-button style="float: right; padding: 3px 0" type="text"></el-button>
        </div>
        <div class="text item" v-if="storageNodeList.data">
          <el-row :gutter="12" >
               <el-col :xs="24" :sm="8"  v-for="(taskNode, index) in storageNodeList.data" :key="index">
                <div class="view-item">
                   <span>占位节点及设备名</span>  
                   <h3>{{ taskNode.nodeName }}/ {{ taskNode.resourceName }}</h3>
                </div>                   
              </el-col>
          </el-row>
        </div>
        <div class="text item" v-else><h3>执行设备未处于锁定状态中</h3></div>
      </el-card>
    </el-tab-pane>
    <el-tab-pane label="解决策略">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>解决步骤</span>
            <el-button style="float: right; padding: 3px 0" type="text"></el-button>
        </div>
        <div class="text item">
          <el-steps :active="active" direction="vertical">
            <el-step class="offset" title="准备工作" @click.native="clickStep(1)" description="查看节点以及前序节点状态，检查硬件是否正常工作"></el-step>
            <el-step class="offset" title="切换手动"  @click.native="clickStep(2)" description="切换到手动模式(防止其它干扰因素的影响)"></el-step>
            <el-step class="offset" title="命令处理" @click.native="clickStep(3)" description="依据指令的状态来考虑是否重发指令或是手动验证设备反馈"></el-step>
            <el-step class="offset" title="切换自动" @click.native="clickStep(4)" description="节点异常问题解决，重新切换回自动状态"></el-step>
          </el-steps>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>数据接口</span>
            <el-button style="float: right; padding: 3px 0" type="text"></el-button>
        </div>
        <div class="text item">
          <el-row :gutter="12" >
            <el-col :xs="24" :sm="8">
        <div class="view-item">
          <i class="el-icon-time" />
          <span>日志ID</span>
          <el-input v-model="logId" :placeholder="tenant.id"></el-input>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8">
        <div class="view-item">
          <i class="el-icon-brush" />
          <span>回调ID</span>
          <el-input v-model="callbackId"  :placeholder="dataList[1].taskNodeId"></el-input>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8">
        <div class="view-item">
          <i class="el-icon-brush" />
          <span>设备ID</span>
          <el-input v-model="deviceId" :placeholder="dataList[1].deviceId"></el-input>
        </div>
      </el-col>      
       <el-col :xs="24" :sm="8">
        <div class="view-item">
          <i class="el-icon-time" />
          <span>指令重发</span>
          <div class="btn">
            <el-button type="primary" icon="el-icon-edit" :disabled="confirmDisabled" @click="resend(this.logId)">重发指令</el-button>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8">
        <div class="view-item">
          <i class="el-icon-brush" />
          <span>校验回调</span>
          <div class="btn">
            <el-button type="primary" icon="el-icon-edit" :disabled="confirmDisabled" @click="nodeCallback(this.callbackId)">检验回调</el-button>
          </div>  
        </div>
      </el-col>
      <el-col :xs="24" :sm="8">
        <div class="view-item">
          <i class="el-icon-brush" />
          <span>释放锁定设备</span>
          <div class="btn">
            <el-button type="primary" icon="el-icon-edit" :disabled="confirmDisabled" @click="freeLock(this.deviceId)">释放设备</el-button>
          </div>
        </div>
      </el-col>
      </el-row>
    </div>
  </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>求助</span>
            <el-button style="float: right; padding: 3px 0" type="text"></el-button>
        </div>
        <div class="text item">
             问题仍未解决，求助专业人员处理 
        </div>
      </el-card>  
    </el-tab-pane>
  </el-tabs>


  </div>
  </el-dialog>
</template>
<script>
import warnLogApi from "@/api/lineSideLibrary/warnLog"
export default {
  name: 'TenantView',
  filters: {
    passwordErrorLockTimeFilter (time) {
      if (time === '0') {
        return '当天23点59分'
      }
      return time
    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '70%'
    }
  },
  data () {
    return {      
      screenWidth: 0,      
      active: 1,
      dataList: [], 
      storageNodeList:[],
      confirmDisabled: false,
      taskNodeId: '',
      deviceId: '',
      logId:'',
      callbackId: '',
      keys: [{name:'nodeName', value:'节点名称'},{name:'resourceDesc', value:'执行设备'},{name:'overtimeStatus', value:'是否超时'},{name:'procedureDesc', value:'工序名称'},{name:'targetResourceDesc', value:'目标设备'},{name:'planTime', value:'计划时间'},{name:'actualTime', value:'执行时间'}],
      //robotNodes:[{label:'舱体线机器人',value:"1"},{label:'伺服舵机',value:"2"},{label:'框体线机器人',value:"3"}], 
      tabPosition: 'left',
      tenant: {
       
      }
    }
  },
  computed: {
    isVisible: {
      get () {
        return this.dialogVisible
      },
      set () {
        this.close()
      }
    }
  },
  mounted () {
    window.onresize = () => {
      return (() => {
        this.width = this.initWidth()
      })()
    }
  },
  methods: {
    initWidth () {
      this.screenWidth = document.body.clientWidth
      if (this.screenWidth < 550) {
        return '95%'
      } else if (this.screenWidth < 990) {
        return '580px'
      } else if (this.screenWidth < 1400) {
        return '600px'
      } else {
        return '650px'
      }
    },
    setTenant (val) {
      this.tenant = { ...val }
      console.log(this.tenant)
      this.taskNodeId = this.tenant.taskNodeId
      this.callbackId = this.tenant.taskNodeId 
      this.logId = this.tenant.id      
      this.fetch()
    },
    fetch(){      
        warnLogApi.connected({id: this.tenant.taskNodeId}).then(response => {
	        const res = response.data
	        if (res.isSuccess) {
	          this.dataList = res.data
            this.deviceId = this.dataList[1].deviceId
            console.log(this.dataList[1])
            warnLogApi.getStorageNode({resourceId: this.dataList[1].deviceId}).then(response => {
	              const res = response.data
	            if (res.isSuccess) {
	                this.storageNodeList = res.data
                  console.log(this.storageNodeList)
	             }	        
	          })
	        }	        
	      }).finally(() => this.loading = false)       
       
    },
    close () {
      this.$emit('close')
    },
    clickStep(e){
      if(e != '' || e != null){ this.active = e }
    },
    resend(logId){
      this.confirmDisabled = true
      warnLogApi.resend({id: logId}).then(response => {
			const res = response.data
			if (res.isSuccess) {
				this.$message({
					message: '重发成功',
					type: "success"
				})
				this.fetch()
			}
     }).finally(()=>{
       this.confirmDisabled = false
     }) 
    },
    nodeCallback(callbackId){
      this.confirmDisabled = true
      warnLogApi.nodeCallback({id: callbackId}).then(response => {
			const res = response.data
			if (res.isSuccess) {
				this.$message({
					message: '回调验证成功',
					type: "success"
				})
				this.fetch()
			}
     }).finally(()=>{
       this.confirmDisabled = false
     })
    },
    freeLog(deviceId){
      
    }
  }
}
</script>
<style lang="scss" scoped>
.tenant-view {  
  .img-wrapper {
    text-align: center;
    margin-top: -1.5rem;
    margin-bottom: 10px;
    img {
      width: 4rem;
      border-radius: 50%;
    }
  }
  .view-item {
    margin: 7px;
    i {
      font-size: 0.97rem;
    }
    span {
      margin-left: 5px;
    }
  }
  .offset{
    margin:5px 0; 
  } 
  .btn {
    text-align: center;
    margin-top: 10px;
  }
}
</style>