331_imcs_web/imcs-ui/src/views/zuihou/centralToolMagazine/changeToolTask/components/Index.vue

<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="title"
    :append-to-body="true"
    :visible.sync="isVisible"
    width="1000px"
    top="150px"
  >
  <div class="app-container">
  	<!-- 货架区域 -->
  	<div class="areaDiv" style="width: 100%;overflow-x: auto;">

  		<!-- 货架（单个） -->
  		<template>
	  		<div class="tableBlock" v-for="item in shelvesTreeList" :key="item.id">
	  			<!-- 上部分-是个统计数据 -->
	  			<div class="topDiv">
	  				<span class="topSpan allTongji">
	  					<span>{{$t("lineSide.common.allCount")}}：</span>
	  					<countTo :duration="3000" :end-val="parseInt(item.allCount)" :start-val="0"/>
	  				</span>
	  				<span class="topSpan cunTongji">
	  					<span>{{$t("lineSide.common.stockCount")}}：</span>
	  					<countTo :duration="3000" :end-val="parseInt(item.stockCount)" :start-val="0"/>
	  				</span>
	  				<span class="topSpan lockTongji">
	  					<span>{{$t("lineSide.common.lockCount")}}：</span>
	  					<countTo :duration="3000" :end-val="parseInt(item.lockCount)" :start-val="0"/>
	  				</span>
	  				<span class="topSpan emptyTongji">
	  					<span>{{$t("lineSide.common.freeCount")}}：</span>
	  					<countTo :duration="3000" :end-val="parseInt(item.freeCount)" :start-val="0"/>
	  				</span>
	  			</div>
	  			<!-- 中部-货架小格子 -->
	  			<table class="contentDiv" border="0" cellspacing="0" cellpadding="6">
            <tr v-for="(objTr, objIndex) in item.children" :key="objIndex">
              <td v-for="objTd in objTr.children" :key="objTd.toolId"
                  :class="{ 'blueBg': objTd.toolHandleId, 'redBg': objTd.tdBackground }"
                  @dblclick="editOne(objTd)">
                {{objTd.no}}
                <template slot-scope="scope">
                  <!-- 示例中假设 scope 中有一个属性叫 inputModel，用于绑定输入框的值 -->
                  <el-input v-model="objTd.toolHandleCode" placeholder="Input"></el-input>
                </template>

                <el-image v-if="objTd.lockStatus == '0'" class="locked" :src="resolveLogo(lockImg)" fit="contain"></el-image>
                <div>

                </div>
              </td>
            </tr>
	  			</table>

	  			<!-- 下部-货架名称编号 -->
	  			<div class="footerDiv">{{item.name}}（{{item.no}}）</div>
          <span style="font-size: 18px;">还需要放入 <span style="color: red;font-size: 30px;">{{ remainingToolCount }}</span> 把刀</span>
          <el-button  class="el-button--primary generateTask" @click="taskExcute()">确定</el-button>
	  		</div>
  		</template>


  	</div>

    <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="80%"
      top="50px"
      :visible.sync="preview.isVisible"
    >
      <el-scrollbar>
        <div v-html="preview.context" />
      </el-scrollbar>
    </el-dialog>
  </div>
  </el-dialog>
</template>

<script>
	import TenantEdit from "./Edit.vue"
	import TenantView from "./View.vue"
	// 【区域管理】-API
	import areaMgrAPI from "@/api/resourceProductMgr/areaMgr"
	// 【边线库管理】-API
	import lineSideMgrApi from "@/api/lineSideLibrary/lineSideMgr"

	import elDragDialog from '@/directive/el-drag-dialog'
	import { downloadFile, initEnums, initDicts, initQueryParams } from '@/utils/commons'
	import axios from 'axios'
	// 加载动态数字组件
	import countTo from 'vue-count-to'
	export default {
	  name: "LineSideEmulate",
	  directives: { elDragDialog },
	  components: { TenantEdit, TenantView, countTo },
	  props: {
      deviceId: {
        type: String,
        default:''
      },
      dialogVisible: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      },
      toolCategory:[]
	  },
	  data () {
	    return {
	    	url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
	    	toolsImg: 'tools.png',
	    	programImg: 'program.png',
	    	lockImg: 'locked.png',
	    	srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ],
	    	topTongjiData: {"shelvesCount": 0, "storgeCount": 0,"instockCount": 0,"freestockCount": 0,"lockstockCount": 0},
	    	shelvesTreeList: [], // 货架数据
	    	audioStatus: [],
	      dialog: {
	        isVisible: false,
	        title: ""
	      },
	      preview: {
	        isVisible: false,
	        context: ''
	      },
        toolHandleCode: '',
        toolCode: '',
	      tenantViewVisible: false,
	      tableKey: 0,
	      queryParams: initQueryParams({}),
	      selection: [],
	      loading: false,
	      tableData: {
	        total: 0
	      },
	      dicts: {
          NATION: {}
        },
	      enums: {
	        TenantTypeEnum: {},
	        TenantStatusEnum: {}
	      },
        cellSelections: [],
	    }
	  },
	  // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
	  created() {
	  	// 加载列表数据-按区域
      console.log("经过这里"+this.deviceId)
	  	this.getTabList()
		},
    watch: {
      'deviceId': {
        handler(val, oldVal) {
          console.log("经过这里2"+this.deviceId)
          // 加载列表数据
          this.getTabList()
        }
      }
    },
	  computed: {
      isVisible: {
        get () {
          return this.dialogVisible
        },
        set () {
          this.close()
          this.reset()
        },
      },
      remainingToolCount() {
        const count = this.toolCategory.length - this.cellSelections.length;
        console.log('remainingToolCount:', count);
        return count;
      },
	    currentUser () {
	      return this.$store.state.account.user
	    },
	    nationList() {
        return convertEnum(this.dicts.NATION)
      }
	  },
	  mounted () {

	  },
	  methods: {
      change(){
        this.$forceUpdate();  //强制刷新
      },
	  	// 加载背景颜色
	  	setBackground(color){
	  		return "background: "+ color +";"
	  	},
	  	// 加载【本地图片】
	  	resolveLogo(logo) {
        return require(`@/assets/icon/${logo}`);
      },
	    viewClose () {
	      this.tenantViewVisible = false
	    },
	    editClose () {
	      this.dialog.isVisible = false
	    },
	    editSuccess () {
	      //this.search()
        this.getTabList();
	    },
	    onSelectChange (selection) {
	      this.selection = selection
	    },
	    search () {
	      this.fetch({
	        ...this.queryParams
	      })
	    },
      close () {
        this.$emit('close')
      },
	    reset () {
	      this.queryParams = initQueryParams({})
	      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("lineSide.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()
	    },
	    delete (ids) {
	      areaMgrAPI.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()
	        }
	      })
	    },
	    view (row) {
	      this.$refs.view.setTenant(row)
	      this.tenantViewVisible = true
	    },
	    // 【修改】表头上Btn-事件
	    editOne(row) {
	    	this.edit(row);
	    },
      selectCell(objTd) {
        objTd.selected = !objTd.selected;
        const count = this.toolCategory.length - this.cellSelections.length;
        if(objTd.selected){
          if(count <= 0){
            return
          }
          objTd.tdBackground=true;
          this.cellSelections.push(objTd.id)
        }else{
          objTd.tdBackground=false;
          const index = this.cellSelections.indexOf(objTd.id);
          if (index !== -1) {
            this.cellSelections.splice(index, 1);
          }
        }

      },
	    edit (row) {
        console.log("row:",)
	      this.$refs.edit.setTenant(row, this.dicts)
	      this.$refs.edit.type = "edit"
        if(this.deviceId){
          this.$refs.edit.showFlag = false
        }else{
          this.$refs.edit.showFlag = true
        }


	      this.dialog.title = this.$t("lineSide.common.strogeTool")
	      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]
	      }

	      this.queryParams.current = params.current ? params.current : this.queryParams.current
	      this.queryParams.size = params.size ? params.size : this.queryParams.size
	      areaMgrAPI.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)
	      }
	    },
	    // 获取列表数据
	    getTabList(){
        console.log("deviceId:"+this.deviceId)
	    	lineSideMgrApi.iconListV2({}).then(res => {
	    		res = res.data
	    		console.log("方块列表：", res)
	    		if(res.isSuccess){
            let filteredData;
            if(this.deviceId){
               filteredData = res.data.shelvesTreeList.filter(item => item.deviceId === this.deviceId  && item.toolType === "1");
            }else{
               filteredData = res.data.shelvesTreeList.filter(item => item.toolType === "4");
            }

            console.log("filteredData：",filteredData)
            // 设备的货架数据
    				this.shelvesTreeList = filteredData
    				// 统计数据
    				this.topTongjiData = {
    					"freestockCount": res.data.freestockCount,
							"instockCount": res.data.instockCount,
							"lockstockCount": res.data.lockstockCount,
							"shelvesCount": res.data.shelvesCount,
							"storgeCount": res.data.storgeCount
    				}
	    		}
	    	})
	    }
	  }
	}
</script>
<!-- 全局样式-通过定义父DOM的calss，来只影响本组件 -->
<style type="text/css">
	.areaDiv .el-progress-bar__innerText{
		position: relative;
		top: -2px;
	}
	.areaDiv .el-card__body{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 10px;
		min-height: 190px;
	}
</style>
<!-- 本组件样式 -->
<style lang="scss" scoped>
	.blockDiv{
		position: relative;
		border: 1px solid #EEEEEE;
		padding-left: 15px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		text-align: center;
		color: white;
		-moz-box-shadow: 1px 5px 5px #c0b7b7;
		webkit-box-shadow: 1px 5px 5px #c0b7b7;
		box-shadow: 1px 5px 5px #c0b7b7;
		h1{
			margin: 20px;
			font-size: 45px;
		}
		p{
			text-align: left;
			color: #FFFFFF;
		}
	}
	.danweiSpan{
		display: inline-block;
		font-size: 16px;
		color: black;
	}
	.blockBg1{
		background: #0F79DC;
		border: 1px solid #0F79DC;
	}
	.blockBg2{
		background: #8E66E4;
		border: 1px solid #8E66E4;
	}
	.blockBg3{
		background: #3EB64B;
		border: 1px solid #3EB64B;
	}
	.blockBg4{
		background: #0BA6D5;
		border: 1px solid #0BA6D5;
	}
	.blockBg5{
		background: #E57878;
		border: 1px solid #E57878;
	}
	.blockBg6{
		background: #E37B3D;
		border: 1px solid #E37B3D;
	}
	.rowCls{
		background: white;
		box-sizing: border-box;
		border-bottom: 2px dotted #AAAAAA;
		margin-bottom: 15px;
	}
	.rowCls .el-col{
		margin-bottom: 20px;
	}
	.doubleTable{
		width: 100%;
	}
	.doubleTable h1{
		margin: 17px 0;
	}
	.el-card{
		display: inline-block;
		min-width: 290px;
		margin: 0 5px 5px 0;
	}
	.areaTitle{
		margin-bottom: 15px;
	}
	.areaTitle span{
		position: relative;
		display: inline-block;
		padding-right: 20px;
		font-weight: bold;
	}
	.areaTitle span:before{
		position: absolute;
		content: '';
		background: #42d885;
		top: 0px;
		right: 0px;
		width: 10px;
		height: 100%;
	}
	.contentView{
		background: #CCCCCC;
		text-align: center;
		padding: 3px 5px;
		margin-bottom: 5px;
		border-bottom: 4px solid red;
	}
	.hebingDiv{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		max-width: 140px;
		min-height: 60px;
		border-bottom: 8px solid red;
		word-break: break-all;
	}
	.lineBianku{
		display: flex;
		justify-content: center;
		align-items: center;
		background: #CCCCCC;
		text-align: center;
		padding: 3px 5px;
		min-height: 60px;
		max-width: 190px;
		word-break: break-all;
	}
	.eqTitle{
		width: 100%;
		max-width: 70px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 12px;
		margin-bottom: 15px;
	}
	.eqTitle2{
		width: 100%;
		max-width: 70px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 12px;
	}
	.recordSpan{
		display: inline-block;
		background: #0F79DC;
		font-size: 12px;
		padding: 2px 10px;
		color: white;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
	}
	.jinduTiao{
		margin: 5px 0;
	}
	.statusDiv{
		text-align: right;
	}
	.statusDiv span{
		display: inline-block;
		font-size: 12px;
		padding: 2px 10px;
		color: white;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
	}
	.linkLine{
		/*background: #13CE66;*/
	}
	.jianguan{
		/*background: #0A76A4;*/
	}
	.producting{
		/*background: #3888FA;*/
	}
	.footerDiv{
		text-align: center;
		width: 100%;
		padding: 7px 0;
		border: 1px solid #AAAAAA;
	}
	.footerDiv a{
		display: inline-block;
		background: #0F79DC;
		font-size: 12px;
		padding: 5px 15px;
		color: white;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
	}
	.footerDiv a:hover{
		opacity: 0.7;
	}
	.tableBlock{
		margin: 15px 30px 15px 0;
		display: inline-block;
    margin-left: 30%;
	}
	.topDiv{
		text-align: center;
	}
	.topSpan{
		display: inline-block;
		padding: 10px;
		color: white;
		border: 1px solid #FFFFFF;
		border-radius: 5px;
		margin-right: 5px;
	}
	.allTongji{
		background: #0BA6D5;
		border: 1px solid #0BA6D5;
	}
	.cunTongji{
		background: #0F79DC;
		border: 1px solid #0F79DC;
	}
	.lockTongji{
		background: #E57878;
		border: 1px solid #E57878;
	}
	.emptyTongji{
		border: 1px solid #AAAAAA;
		color: #333333;
	}
	.contentDiv{
		margin: 10px 0;
		border-left: 1px solid #AAAAAA;
		border-top: 1px solid #AAAAAA;
	}
	.contentDiv tr td{
		position: relative;
		cursor: pointer;
		padding: 10px 25px;
		border-right: 1px solid #AAAAAA;
		border-bottom: 1px solid #AAAAAA;
	}
	.blueBg{
		background: #548EC5;
		color: white;
	}
	.locked{
		position: absolute;
		right: 2px;
		top: 0;
		width: 20px;
		height: 25px;
	}
  .redBg {
    background: red;
    color: white;
  }

</style>