imcs_yj_fe/imcs-ui/src/views/zuihou/lineSideLibrary/lineSideEmulate/Index.vue

<template>
  <div class="app-container">
  	<!-- 统计数据区域 -->
    <el-row :gutter="20" class="rowCls">
      <el-col :xs="12" :sm="8" :lg="5">
        <div class="blockDiv blockBg1">
          <h1><countTo :duration="3000" :end-val="topTongjiData.shelvesCount" :start-val="0"/><span class="danweiSpan">{{$t("lineSide.common.lit")}}</span></h1>
          <p>{{$t("lineSide.common.shelvesCount")}}</p>
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :lg="5">
      	<div class="blockDiv blockBg2">
  					<h1><countTo :duration="3000" :end-val="topTongjiData.storgeCount" :start-val="0"/><span class="danweiSpan">{{$t("lineSide.common.lit")}}</span></h1>
	          <p>{{$t("lineSide.common.storgeCount")}}</p>
      	</div>
      </el-col>
      <el-col :xs="12" :sm="8" :lg="5">
         <div class="blockDiv blockBg3">
  					<h1><countTo :duration="3000" :end-val="topTongjiData.instockCount" :start-val="0"/><span class="danweiSpan">{{$t("lineSide.common.lit")}}</span></h1>
      			<p>{{$t("lineSide.common.instockCount")}}</p>
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :lg="5">
        <div class="blockDiv blockBg4">
  					<h1><countTo :duration="3000" :end-val="topTongjiData.freestockCount" :start-val="0"/><span class="danweiSpan">{{$t("lineSide.common.lit")}}</span></h1>
      			<p>{{$t("lineSide.common.freestockCount")}}</p>
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :lg="4">
         <div class="blockDiv blockBg5">
          <h1><countTo :duration="3000" :end-val="topTongjiData.lockstockCount" :start-val="0"/><span class="danweiSpan">{{$t("lineSide.common.lit")}}</span></h1>
          <p>{{$t("lineSide.common.lockstockCount")}}</p>
        </div>
      </el-col>
    </el-row>

  	<!-- 货架区域 -->
  	<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.layList" :key="objIndex">
	  					<td v-for="objTd in objTr.stockList" :key="objTd.id" :class="objTd.storgeStockCount>0 ? 'blueBg' : ''" @click="editOne(objTd)">
	  						{{objTd.no}}
	  						<el-image v-if="objTd.lockStatus == '0'" class="locked" :src="resolveLogo(lockImg)" fit="contain"></el-image>
	  					</td>	  					
	  				</tr>
	  				<!--
	  				<tr>
	  					<td @click="editOne()">
	  						4-1
	  						<el-image class="locked" :src="resolveLogo(lockImg)" fit="contain"></el-image>
	  					</td>
	  					<td class="blueBg" @click="editOne()">4-2</td>
	  					<td class="blueBg" @click="editOne()">4-3</td>
	  					<td class="blueBg" @click="editOne()">4-4</td>
	  					<td @click="editOne()">4-5</td>
	  				</tr>
	  				<tr>
	  					<td class="blueBg" @click="editOne()">
	  						3-1
	  					<td class="blueBg" @click="editOne()">
	  						3-2
	  					</td>
	  					<td @click="editOne()">3-3</td>
	  					<td class="blueBg" @click="editOne()">3-4</td>
	  					<td class="blueBg" @click="editOne()">3-5</td>
	  				</tr>
	  				<tr>
	  					<td @click="editOne()">2-1</td>
	  					<td @click="editOne()">2-2</td>
	  					<td @click="editOne()">
	  						2-3
	  						<el-image class="locked" :src="resolveLogo(lockImg)" fit="contain"></el-image>
	  					</td>
	  					<td class="blueBg" @click="editOne()">2-4</td>
	  					<td class="blueBg" @click="editOne()">2-5</td>
	  				</tr>
	  				<tr>
	  					<td @click="editOne()">1-1</td>
	  					<td @click="editOne()">
	  						1-2
	  						<el-image class="locked" :src="resolveLogo(lockImg)" fit="contain"></el-image>
	  					</td>
	  					<td class="blueBg" @click="editOne()">1-3</td>
	  					<td>
	  						1-4
	  						<el-image class="locked" :src="resolveLogo(lockImg)" fit="contain"></el-image></td>
	  					</td>
	  					<td @click="editOne()">1-5</td>
	  				</tr>
	  			-->
	  			</table>
	  			<!-- 下部-货架名称编号 -->
	  			<div class="footerDiv">{{item.name}}（{{item.no}}）</div>
	  		</div>
  		</template>

  		<!--<div class="tableBlock">
  			<div class="topDiv">
  				<span class="topSpan allTongji">
  					<span>总：</span>
  					<countTo :duration="3000" :end-val="25" :start-val="0"/>
  				</span>
  				<span class="topSpan cunTongji">
  					<span>存：</span>
  					<countTo :duration="3000" :end-val="20" :start-val="0"/>
  				</span>
  				<span class="topSpan lockTongji">
  					<span>锁定：</span>
  					<countTo :duration="3000" :end-val="5" :start-val="0"/>
  				</span>
  				<span class="topSpan emptyTongji">
  					<span>空：</span>
  					<countTo :duration="3000" :end-val="0" :start-val="0"/>
  				</span>
  			</div>
  			<table class="contentDiv" border="0" cellspacing="0" cellpadding="6">
  				<tr>
  					<td class="blueBg" @click="editOne()">5-1</td>
  					<td class="blueBg" @click="editOne()">5-2</td>
  					<td class="blueBg" @click="editOne()">5-3</td>
  					<td class="blueBg" @click="editOne()">5-4</td>
  					<td class="blueBg" @click="editOne()">5-5</td>
  				</tr>
  				<tr>
  					<td @click="editOne()">
  						4-1
  						<el-image class="locked" :src="resolveLogo(lockImg)" fit="contain"></el-image>
  					</td>
  					<td class="blueBg" @click="editOne()">4-2</td>
  					<td class="blueBg" @click="editOne()">4-3</td>
  					<td class="blueBg" @click="editOne()">4-4</td>
  					<td @click="editOne()">4-5</td>
  				</tr>
  				<tr>
  					<td class="blueBg" @click="editOne()">
  						3-1
  					<td class="blueBg" @click="editOne()">
  						3-2
  					</td>
  					<td @click="editOne()">3-3</td>
  					<td class="blueBg" @click="editOne()">3-4</td>
  					<td class="blueBg" @click="editOne()">3-5</td>
  				</tr>
  				<tr>
  					<td @click="editOne()">2-1</td>
  					<td @click="editOne()">2-2</td>
  					<td @click="editOne()">
  						2-3
  						<el-image class="locked" :src="resolveLogo(lockImg)" fit="contain"></el-image>
  					</td>
  					<td class="blueBg" @click="editOne()">2-4</td>
  					<td class="blueBg" @click="editOne()">2-5</td>
  				</tr>
  				<tr>
  					<td @click="editOne()">1-1</td>
  					<td @click="editOne()">
  						1-2
  						<el-image class="locked" :src="resolveLogo(lockImg)" fit="contain"></el-image>
  					</td>
  					<td class="blueBg" @click="editOne()">1-3</td>
  					<td>
  						1-4
  						<el-image class="locked" :src="resolveLogo(lockImg)" fit="contain"></el-image></td>
  					</td>
  					<td @click="editOne()">1-5</td>
  				</tr>
  			</table>
  			<div class="footerDiv">货架A（hj34233）</div>
  		</div>-->

  	</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>
</template>

<script>
	import TenantEdit from "./components/Edit"
	import TenantView from "./components/View"
	// 【区域管理】-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: {
	  },
	  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: ''
	      },
	      tenantViewVisible: false,
	      tableKey: 0,
	      queryParams: initQueryParams({}),
	      selection: [],
	      loading: false,
	      tableData: {
	        total: 0
	      },
	      dicts: {
          NATION: {}
        },
	      enums: {
	        TenantTypeEnum: {},
	        TenantStatusEnum: {}
	      }
	    }
	  },
	  // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
	  created() {
	  	// 加载列表数据-按区域
	  	this.getTabList()
		},
	  computed: {
	    currentUser () {
	      return this.$store.state.account.user
	    },
	    nationList() {
        return convertEnum(this.dicts.NATION)
      }
	  },
	  mounted () {

	  },
	  methods: {
	  	// 加载背景颜色
	  	setBackground(color){
	  		return "background: "+ color +";"
	  	},
	  	// 加载【本地图片】
	  	resolveLogo(logo) {
        return require(`@/assets/icon/${logo}`);
      },
	    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("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);
	    },
	    edit (row) {		  
	      this.$refs.edit.setTenant(row, this.dicts)
	      this.$refs.edit.type = "edit"
	      this.dialog.title = this.$t("lineSide.common.libProd")
	      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(group){
	    	lineSideMgrApi.iconList({}).then(res => {
	    		res = res.data
	    		console.log("方块列表：", res)
	    		if(res.isSuccess){
    				// 设备的货架数据
    				this.shelvesTreeList = res.data.shelvesTreeList
    				// 统计数据
    				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;
	}
	.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;
	}
</style>