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

<template>
  <div class="app-container">
		<!-- 搜索模块 -->
    <div class="filter-container">
    	<!--<span>
    		<span>{{$t("lineSide.searchForm.name")}}：</span>
    		<el-input v-model="queryParams.model.name" :placeholder='$t("common.pleaseEnter")' style="width: 150px;" size="medium"/>
    	</span>-->
    	<span>
    		<span>{{$t("resource.searchForm.startEndTime")}}：</span>
    		<el-date-picker
		      v-model="queryParams.timeRange"
		      type="daterange"
		      :picker-options="pickerOptions"
		      :range-separator='$t("common.separator")'
		      :start-placeholder='$t("common.startTime")'
		      :end-placeholder='$t("common.endTime")'
		      format="yyyy-MM-dd"
			    value-format="yyyy-MM-dd"
		      align="right">
		    </el-date-picker>
    	</span>
    	<!--<span style="margin-left: 15px;">
    		<span>{{$t("lineSide.common.type")}}：</span>
    		<el-select v-model="queryParams.model.optType" :placeholder='$t("common.pleaseSelect")' size="medium" style="width: 150px;">
        	<el-option
			      v-for="item in audioStatus"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
      	</el-select>
    	</span>-->
      <span style="margin-left: 15px;">
	      <el-button plain type="primary" icon="el-icon-search" size="medium" @click="search">
	        {{ $t("table.search") }}
	      </el-button>
	      <el-button plain type="warning" icon="el-icon-refresh" size="medium" @click="reset">
	        {{ $t("table.reset") }}
	      </el-button>
      </span>
    </div>
    
    <!-- 功能按钮 -->
    <el-row class="filter-container">
    	<el-col>
    		<el-button v-has-permission="['warnLong:delete']" type="danger" icon="el-icon-delete" size="medium" @click="batchDelete">
	        {{ $t("table.delete") }}
	      </el-button>
    		<el-button v-has-permission="['warnLong:tags']" type="primary" icon="el-icon-plus" size="medium" @click="marking">{{ $t("developer.buttons.marking") }}</el-button>	        
    	</el-col>
    </el-row>
	    
		<!-- 列表数据 -->
    <el-table
      :key="tableKey"
      ref="table"
      v-loading="loading"
      :data="tableData.records"
      border
      fit
      row-key="id"
      style="width: 100%;"
      @selection-change="onSelectChange"
      @cell-click="cellClick"
    >
    	<!-- 序号 -->
    	<el-table-column :label='$t("common.serialNo")' width="55px" align="center">
	      <template slot-scope="scope">
	        <div>
	          {{scope.$index+(queryParams.current - 1) * queryParams.size + 1}}
	        </div>
	      </template>
      </el-table-column>
      <!-- CheckBox -->
      <el-table-column align="center" type="selection" width="50" :reserve-selection="true" />
      <!-- 编码 -->
      <el-table-column prop="nodeNo" :label='$t("developer.table.warnLong.no")' :show-overflow-tooltip="true" width="160">
		  <template slot-scope="{ row }">
			   <span v-if="row.nodeNo"> {{row.nodeNo}}</span>
			   <span v-else-if="!row.taskNodeId">设备状态监控</span>
		   </template>
	  </el-table-column>
      <!-- 设备 -->
      <el-table-column prop="resourceName" :label='$t("developer.table.warnLong.name")' width="180">
		   <template slot-scope="{ row }">
			   <span v-if="row.category=='2'">AGV异常</span>
			   <span v-else-if="row.resourceName"> {{row.resourceName}}</span>
			   <span v-else-if="row.robotName"> {{row.robotName}}</span>
			   <span v-else-if="!row.taskNodeId">{{row.method}}</span>
		   </template>
	  </el-table-column>
      <!-- 报警内容 -->
      <el-table-column prop="feedback" :label='$t("developer.table.warnLong.storgeId")' >
	      <template slot-scope="{ row }">
			<span v-if="row.taskNodeId"> {{row.procedureName}}-{{row.instructionName}}-{{row.feedback}}</span>
			<span v-else-if="row.feedback">{{row.feedback}}</span>			
			<span v-else>设备监控推送异常</span>			
		  </template>
	  </el-table-column>
      <!-- 报警时间 -->
      <el-table-column prop="createTime" :label='$t("developer.table.warnLong.updateTime")' width="160px"></el-table-column>
      <!-- 是否需要人员处理 -->
      <el-table-column prop="manual" :label='$t("developer.table.warnLong.num")' align="center" width="150px">
      	<template slot-scope="{ row }">
      		<el-tag v-if="row.manual == '1'" type="success">{{$t("common.yes")}}</el-tag>
	      	<el-tag v-else type="failed">{{$t("common.no")}}</el-tag>			 
		</template>
      </el-table-column>
      <!-- 处理状态 -->
      <el-table-column prop="status" :label='$t("developer.table.warnLong.goodsType")' align="center" width="120px">
      	<template slot-scope="{ row }">
      		    <el-tag v-if="row.status == '0'" type="failed">{{$t("developer.common.status.start")}}</el-tag>
	      	    <el-tag v-if="row.status == '1'" type="success">{{$t("developer.common.status.end")}}</el-tag>
					
		</template>
      </el-table-column>
      <!-- 处理时间 -->
      <el-table-column prop="updateTime" :label='$t("developer.table.warnLong.chuliTime")' width="160px">
	     <template slot-scope="{ row }">
	         <span v-if="row.status == '1'">{{row.updateTime}}</span>
	     </template>
	  </el-table-column>        
	  <el-table-column 	  		
	       :label="$t('table.operation')"
		   fixed="right"
		    align="center"
		    column-key="operation"
		    width="85px">
			<template slot-scope="{ row }">
		        	<el-tooltip class="item" content='分析处理' effect="dark" placement="top-start" v-if="row.status=='0' && (row.taskNodeId || row.method!='GlobalException')">
			          <i
			            class="el-icon-bell table-operation"
			            style="color: #87d068;"
			            @click="view(row)"
			          />
		          </el-tooltip>
		    </template>	
	  </el-table-column>
    </el-table>
    <pagination
      v-show="tableData.total > 0"
      :limit.sync="queryParams.size"
      :page.sync="queryParams.current"
      :total="Number(tableData.total)"
      @pagination="fetch"
    />
    <tenant-edit
      ref="edit"
      :dialog-visible="dialog.isVisible"
      :title="dialog.title"
      @close="editClose"
      @success="editSuccess"
    />
    <tenant-view
      ref="view"
      :dialog-visible="tenantViewVisible"
      @close="viewClose"
    />
    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      title="预览"
      width="100%"
      top="50px"
	  customClass="customWidth"
      :visible.sync="preview.isVisible"
    >
      <el-scrollbar>
        <div v-html="preview.context" />
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script>
	import Pagination from "@/components/Pagination"
	import TenantEdit from "./components/Edit"
	import TenantView from "./components/View"
	// 【锁定记录、出入库记录】-API
	//import lockingRecordApi from "@/api/lineSideLibrary/lockingRecord"
	import warnLogApi from "@/api/lineSideLibrary/warnLog"
	import elDragDialog from '@/directive/el-drag-dialog'
	import { convertEnum, initDicts, initQueryParams } from '@/utils/commons'
	export default {
	  name: "InOutRecord",
	  directives: { elDragDialog },
	  components: { Pagination, TenantEdit, TenantView },
	  props: {
	  },
	  data () {
	    return {
	    	audioStatus: [],
	      dialog: {
	        isVisible: false,
	        title: ""
	      },
	      preview: {
	        isVisible: false,
	        context: ''
	      },
	      tenantViewVisible: false,
	      tableKey: 0,
	      queryParams: initQueryParams({}),
	      selection: [],
	      loading: false,
	      tableData: {
	        total: 0
	      },
	      dicts: {
          NATION: {}
        },
	      enums: {
	        TenantTypeEnum: {},
	        TenantStatusEnum: {}
	      },
	      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
	    }
	  },
	  // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
	  created() {
	  	// 调用常量-审核状态
	  	this.audioStatus = this.$constWKS.OPTTYPE
	  	// 加载【字典】
	  	initDicts(['NATION'], this.dicts);
	  	// 加载列表数据
	  	this.fetch()
		},
	  computed: {
	    currentUser () {
	      return this.$store.state.account.user
	    },
	    nationList() {
        return convertEnum(this.dicts.NATION)
      	},
		websocketMsg() {
	      return this.$store.getters.STAFF_UPDATE.msg
	    },
	  },
	  watch: {
	  	websocketMsg(curVal, oldVal) {
	      	let obj = JSON.parse(curVal)
	      	this.openMessageTips(obj)
	    }
	},
	  mounted () {
	     // 判断长连接，是否已经开启      
	  	if(this.$store.state.websocket.websock == null){
	  		// 页面刚进入时开启长连接
    		this.$store.dispatch('STAFF_WEBSOCKET')	        
	  	}     
	  },
	  // 销毁
      destroyed() {
	  this.websocketClose()
	  },
	  methods: {
	    viewClose () {
	      this.tenantViewVisible = false
	    },
	    editClose () {
	      this.dialog.isVisible = false
	    },
	    editSuccess () {
	      this.search()
	    },
	    onSelectChange (selection) {
	      this.selection = selection
	    },
	    search () {
	      this.fetch({
	        ...this.queryParams
	      })
	    },
	    reset () {
	      this.queryParams = initQueryParams({})
	      this.$refs.table.clearSort()
	      this.$refs.table.clearFilter()
	      this.search()
	    },
	    add () {
	      this.$refs.edit.type = "add"
	      this.$refs.edit.setTenant(false, this.dicts)
	      this.dialog.title = this.$t("common.add")
	      this.dialog.isVisible = true
	    },
	    singleDelete (row) {
	      this.$refs.table.clearSelection()
	      this.$refs.table.toggleRowSelection(row, true)
	      this.batchDelete()
	    },
	    batchDelete () {
	      if (!this.selection.length) {
	        this.$message({
	          message: this.$t("tips.noDataSelected"),
	          type: "warning"
	        })
	        return
	      }
	
	      this.$confirm(this.$t("developer.tips.wareTips"), this.$t("common.tips"), {
	      	distinguishCancelAndClose: true,
	        confirmButtonText: this.$t("common.confirm"),
	        cancelButtonText: this.$t("common.cancel"),
	        type: "warning"
	      }).then(() => {
	      	const ids = []
		      this.selection.forEach(item => {
		        ids.push(item.id)
		      })
		      this.delete(ids)
	      }).catch(() => {})
	    },
	    clearSelections () {
	      this.$refs.table.clearSelection()
	    },
		view(row){
			this.$refs.view.setTenant(row)
			this.tenantViewVisible = true
		},
		marking(){
		   if (!this.selection.length) {
	        this.$message({
	          message: this.$t("tips.noDataSelected"),
	          type: "warning"
	        })
	        return false
	      }
		    const ids = []
		    this.selection.forEach(item => {
		        ids.push(item.id)
		    })
		    this.updateStatus(ids)	      		
		},
		updateStatus(ids){		   
		   warnLogApi.updateStatus({ids: ids}).then(response => {
			const res = response.data
			if (res.isSuccess) {
				this.$message({
					message: '标注成功',
					type: "success"
				})
				this.search()
			}
         })
		},
	    delete (ids) {
	      warnLogApi.remove({ ids: ids }).then(response => {
	        const res = response.data
	        if (res.isSuccess) {
	          this.$message({
	            message: this.$t("tips.deleteSuccess"),
	            type: "success"
	          })
	          this.search()
	          // 清理已经删除的数据
	          this.$refs.table.clearSelection()
	        }
	      })
	    },
	    // 【修改】表头上Btn-事件
	    editOne() {
	    	if (!this.selection.length) {
	        this.$message({
	          message: this.$t("tips.noDataSelected"),
	          type: "warning"
	        })
	        return
	      }
	    	if (this.selection.length > 1) {
	        this.$message({
	          message: this.$t("tips.mustOne"),
	          type: "warning"
	        })
	        return
	      }
	    	this.edit(this.selection[0]);
	    },
	    edit (row) {
	      this.$refs.edit.setTenant(row, this.dicts)
	      this.$refs.edit.type = "edit"
	      this.dialog.title = this.$t("common.edit")
	      this.dialog.isVisible = true
	    },
	    fetch (params = {}) {
	      this.loading = true		  
	      if (this.queryParams.timeRange) {
	        this.queryParams.map.createTime_st = this.queryParams.timeRange[0]
	        this.queryParams.map.createTime_ed = this.queryParams.timeRange[1]
	      }
		  let id = this.$route.query.id
		  if(id!=null && id!=""){
			this.queryParams.model.id = id
		  }
	
	      this.queryParams.current = params.current ? params.current : this.queryParams.current
	      this.queryParams.size = params.size ? params.size : this.queryParams.size
	      // 固定参数：dataStatus = 1-入库/出库，2-解锁/锁定
	      //this.queryParams.model.dataStatus = '1'
	      warnLogApi.page(this.queryParams).then(response => {
	        const res = response.data
	        if (res.isSuccess) {
	          this.tableData = res.data
	        }
	        // eslint-disable-next-line no-return-assign
	      }).finally(() => this.loading = false)
	     
	    },
	    cellClick (row, column) {
	      if (column['columnKey'] === "operation") {
	        return
	      }
	      let flag = false
	      this.selection.forEach((item) => {
	        if (item.id === row.id) {
	          flag = true
	          this.$refs.table.toggleRowSelection(row)
	        }
	      })
	
	      if (!flag) {
	        this.$refs.table.toggleRowSelection(row, true)
	      }
	    },
		openMessageTips(data){      //排除数字大屏         
      if(this.$route.fullPath.indexOf("/largeScreen")<0){
        //console.log("接收websocket的推送信息 == ", data)        
        if(data!=null && data.type == 'PUSH_TYPE_GLOBAL_EXCEPTION'){		  	          
          this.$nextTick(()=> {			  
              let datas = data.data.warnMap.warnData.records              
              datas.forEach((data)=>{
                  let msg = data.feedback ? data.feedback : " 响应超时 ";
                  //let url = data.taskNodeId ? "#/dispatchMgr/exception":"#/developer/warnLong";
                  let url = "#/developer/warnLong"
                  let content = "<a href='"+url+"'>"+(data.resourceName? "["+ data.resourceName +"] " : "" )+(data.procedureName? data.procedureName : "")
                   + (data.instructionName? "("+data.instructionName+")" : "") + msg+"</a>";  
                  this.$notification.error(content, { messageIsHTML: true, timer:10, title:"异常警报", showCloseIcn:true});
              })
          });
        }
      }
    },
    // 组件销毁的时候，关闭websocket连接
	  websocketClose() { 
	      this.$store.getters.STAFF_UPDATE.lockReconnect = true
	      this.$store.getters.STAFF_UPDATE.websock.close() // 离开路由之后断开websocket连接
	      clearTimeout(this.$store.getters.STAFF_UPDATE.reconnectData) // 离开清除 timeout
	      clearTimeout(this.$store.getters.STAFF_UPDATE.timeoutObj) // 离开清除 timeout
	      clearTimeout(this.$store.getters.STAFF_UPDATE.serverTimeoutObj) // 离开清除 timeout
	    },
	  	// websocket信息变更
	  onmessage() {
	      this.$store.getters.STAFF_UPDATE.websock.onmessage = function(evt) {	       
		     	console.log("websocket获取数据==="+evt)
	      }
	  }
	  }
	}
</script>
<style lang="scss" scoped>
</style>