imcs_yj_fe/imcs-ui/src/views/zuihou/dispatchMgr/toolQuery/components/View.vue

<template>
  <el-dialog
    :title="$t(&quot;common.view&quot;)"
    :width="width"
    :append-to-body="true"
    :visible.sync="isVisible"
    class="tenant-view"
  >
    <el-row :gutter="10">
      <el-col :xs="24" :sm="3">
        <div class="view-item">  
          <span>NO</span>
        </div>     
      </el-col>
      <el-col :xs="24" :sm="3">
        <div class="view-item">  
          <span>任务ID</span>
        </div>     
      </el-col>  
      <el-col :xs="24" :sm="4">
        <div class="view-item">  
          <span>名称</span>
        </div>     
      </el-col> 
      <el-col :xs="24" :sm="2">
        <div class="view-item">  
          <span>编号</span>
        </div>     
      </el-col> 
      <el-col :xs="24" :sm="4">
        <div class="view-item">
          <span>设备</span>  
        </div>     
      </el-col> 
      <el-col :xs="24" :sm="4">
        <div class="view-item">  
          <span>开始时间</span>
        </div>     
      </el-col>
      <el-col :xs="24" :sm="4">
        <div class="view-item">  
          <span>目标设备</span>
        </div>     
      </el-col>  
    </el-row>
    <el-row :gutter="10" v-for="taskNode in workflowList " :key="taskNode.id" >
      <el-col :xs="24" :sm="3">
        <div class="view-item">          
          <span v-if="taskNode.exe_status == '2'" style="color: #f50" >{{ taskNode.id }}</span>
          <span v-else >{{ taskNode.id }}</span>           
        </div>
      </el-col>
      <el-col :xs="24" :sm="3">
        <div class="view-item">         
          <span>{{ taskNode.task_id }}</span>
        </div>
      </el-col>
      <el-col :xs="24" :sm="4">
        <div class="view-item">         
          <span>{{ taskNode.node_name }}</span>
        </div>
      </el-col>
      <el-col :xs="24" :sm="2">
        <div class="view-item">          
          <span>{{ taskNode.procedure_no }}</span>          
        </div>
      </el-col>
      <el-col :xs="24" :sm="4">
        <div class="view-item">          
          <span>{{ taskNode.ResourceName }}</span>         
        </div>
      </el-col>
      <el-col :xs="24" :sm="4">
        <div class="view-item">          
          <span>{{ taskNode.start_time }}</span>          
        </div>
      </el-col>
      <el-col :xs="24" :sm="4">
        <div class="view-item">          
          <span>{{ taskNode.targetResourceName }}</span>         
        </div>
      </el-col>      
    </el-row>    
  </el-dialog>
</template>
<script>
import toolQueryApi from "@/api/systemMgr/toolQuery"
export default {
  name: 'TenantView',
  filters: {
    passwordErrorLockTimeFilter (time) {
      if (time === '0') {
        return '当天23点59分'
      }
      return time
    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      screenWidth: 0,
      width: this.initWidth(),
      workflowList:[],
      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 '1050px'
      }
    },
    setTenant (val) {
      this.tenant = { ...val }
      toolQueryApi.getWorkflowDetail({"completeBatchNo":this.tenant.completeBatchNo}).then(response=>{
						const res = response.data
						if(res.isSuccess){
							this.workflowList = res.data.data
							console.log(this.workflowList)
						}else{
							this.$message({
              					message: res.msg,
              					type: 'warning'
            	})
						}
				}).finally(()=>{
					return true		
			})
    },
    close () {
      this.$emit('close')
    }
  }
}
</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;
    }
  }
}
</style>