init project

This commit is contained in:
2022-06-27 09:50:26 +08:00
parent b3fcd339ea
commit b5da790c94
644 changed files with 94073 additions and 0 deletions

View File

@@ -0,0 +1,323 @@
<template>
<div class="app-container">
<!--工具栏-->
<div class="head-container">
<div v-if="crud.props.searchToggle">
<!-- 搜索 -->
<el-form
:inline="true"
class="demo-form-inline"
label-position="right"
label-width="80px"
label-suffix=":"
>
<el-form-item label="年月">
<label slot="label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</label>
<el-date-picker
v-model="query.plan_month"
type="month"
style="width: 250px"
size="mini"
class="filter-item"
value-format="yyyyMM"
placeholder="选择年月"
/>
</el-form-item>
<el-form-item label="部门">
<label slot="label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</label>
<el-select
v-model="query.plan_org_code"
clearable
size="mini"
placeholder="请选择"
class="filter-item"
style="width: 250px;"
@change="hand"
>
<el-option
v-for="item in deptList"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="物料编码">
<el-input
v-model="query.material_code"
clearable
size="mini"
placeholder="请输入物料编码"
style="width: 250px;"
class="filter-item"
@keyup.enter.native="crud.toQuery"
/>
</el-form-item>
<el-form-item label="生产方式">
<el-select
v-model="query.product_type_name"
clearable
size="mini"
placeholder="请选择"
class="filter-item"
style="width: 250px;"
@change="hand"
>
<el-option
v-for="item in dict.product_mode"
:label="item.label"
:value="item.value"
/>
</el-select>
<rrOperation/>
</el-form-item>
</el-form>
</div>
<!--如果想在工具栏加入更多按钮可以使用插槽方式 slot = 'left' or 'right'-->
<crudOperation :permission="permission">
<el-button
slot="right"
class="filter-item"
type="success"
icon="el-icon-position"
size="mini"
@click="open"
>
棒料型配方Excel导入
</el-button>
<el-button
slot="right"
class="filter-item"
type="success"
icon="el-icon-position"
size="mini"
@click="open2"
>
矿用配方Excel导入
</el-button>
<el-button
slot="right"
class="filter-item"
type="success"
icon="el-icon-position"
size="mini"
@click="open3"
>
测试
</el-button>
<el-button
slot="right"
class="filter-item"
type="success"
icon="el-icon-position"
size="mini"
@click="send"
>
发送
</el-button>
<el-button
slot="right"
class="filter-item"
type="success"
icon="el-icon-position"
size="mini"
@click="close"
>
关闭
</el-button>
</crudOperation>
<!-- 文件上传弹出框-->
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<el-upload
ref="upload"
:limit="1"
:before-upload="beforeUpload"
:auto-upload="false"
:headers="headers"
:file-list="fileList"
:on-success="handleSuccess"
:on-error="handleError"
:on-exceed="handleExceed"
:action="nowAction"
>
<div class="eladmin-upload"><i class="el-icon-upload"/> 添加文件</div>
<div slot="tip" class="el-upload__tip">可上传任意格式文件且不超过100M</div>
</el-upload>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="upload"> </el-button>
</span>
</el-dialog>
<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" show-summary :data="crud.data" size="mini" style="width: 100%;"
@selection-change="crud.selectionChangeHandler">
<!-- <el-table-column type="selection" width="55" />-->
<el-table-column v-permission="['admin','productplanproc:edit','productplanproc:del']" fixed="right" label="操作"
width="120px" align="center">
<template slot-scope="scope">
<udOperation
:data="scope.row"
:permission="permission"
/>
</template>
</el-table-column>
<el-table-column v-if="false" prop="plan_id" label="计划标识"/>
<el-table-column v-if="false" prop="plan_code" label="计划编号"/>
<el-table-column prop="plan_org_name" label="申报单位名称"/>
<el-table-column prop="plan_month" label="年月度"/>
<el-table-column v-if="false" prop="material_id" label="物料标识"/>
<el-table-column prop="material_code" label="物料编码" min-width="120" show-overflow-tooltip/>
<el-table-column prop="product_type_name" label="生产方式"/>
<el-table-column prop="plan_finish_date" label="交货日期"/>
<el-table-column prop="plan_code" label="需求编码"/>
<el-table-column prop="input_optname" label="导入人"/>
<el-table-column prop="input_time" label="导入时间" width="150px"/>
</el-table>
<!--分页组件-->
<pagination/>
</div>
</div>
</template>
<script>
import crudProductplanproc from '@/api/wms/pcs/productplanproc'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
import AddDialog from '@/views/wms/st/core/inbill/rawassist/AddDialog'
export default {
name: 'Productplanproc',
dicts: ['product_mode'],
components: { pagination, crudOperation, rrOperation, udOperation, AddDialog },
mixins: [presenter(), header(), crud()],
cruds() {
return CRUD({
title: '月需求计划',
url: 'api/productplanproc',
idField: 'plan_id',
sort: '',
crudMethod: { ...crudProductplanproc },
optShow: {
add: false,
edit: false,
del: false,
download: false,
reset: true
}
})
},
data() {
return {
permission: {},
headers: { 'Authorization': getToken() },
dialogVisible: false,
deptList: [],
fileList: [],
nowAction: '',
form: { name: '' },
rules: {}
}
},
computed: {
...mapGetters([
'baseApi',
'fileUploadApi'
])
},
created() {
crudProductplanproc.getDept().then(res => {
this.deptList = res
})
},
methods: {
hand(value) {
this.crud.toQuery()
},
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
done()
})
.catch(_ => {
})
},
beforeUpload(file) {
let isLt2M = true
isLt2M = file.size / 1024 / 1024 < 100
if (!isLt2M) {
this.loading = false
this.$message.error('上传文件大小不能超过 100MB!')
}
this.form.name = file.name
return isLt2M
},
handleSuccess(response, file, fileList) {
this.crud.notify('导入成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
},
// 监听上传失败
handleError(e, file, fileList) {
debugger
const msg = JSON.parse(e.message)
this.$notify({
title: msg.message,
type: 'error',
duration: 2500
})
this.loading = false
},
open() {
const a = this.fileList
this.fileList = a.splice(0, 0)
this.nowAction = this.baseApi + '/api/productplanproc/pictures/1'
this.dialogVisible = true
},
open2() {
const a = this.fileList
this.fileList = a.splice(0, 0)
this.nowAction = this.baseApi + '/api/productplanproc/pictures/2'
this.dialogVisible = true
},
open3() {
request.start(true).then(connect => {
console.log(connect.url)
console.log(connect.id)
}).catch(err => {
console.log(err)
})
},
send() {
const message = {}
const lang = 'en-US'
con.send(JSON.stringify({ message, lang }))
},
close() {
con.terminate()
},
upload() {
this.$refs.upload.submit()
this.dialogVisible = false
},
handleExceed(files, fileList) {
this.$message.warning('当前限制只能选择 1 个文件')
}
}
}
</script>
<style scoped>
</style>

View File

@@ -0,0 +1,598 @@
<template>
<div class="app-container">
<div class="head-container">
<div>
<div style="display: inline-block">空载具<div style="margin-left:5px;padding-top:5px;display: inline-block;background-color: #99a9bf;width: 20px;height: 20px;border-radius: 50%;line-height: 30px;text-align: center;"></div></div>
<div style="display: inline-block">空货位<div style="margin-left:5px;display: inline-block;background-color: red;width: 20px;height: 20px;border-radius: 50%"></div></div>
<div style="display: inline-block">有货<div style="margin-left:5px;display: inline-block;background-color: green;width: 20px;height: 20px;border-radius: 50%"></div></div>
</div>
<!-- 第一行-->
<el-row>
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0101-0'+count > 10 ? count: '0'+count +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0101-0'+count+'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
1</br>{{ count }}</br>2
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0101-0'+count+'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0101-0'+count+'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
1</br>{{ count }}</br>1
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">一排
</div>
</el-col>
</el-row>
<!-- 第二行-->
<el-row>
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0102-0'+count+'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0102-0'+count+'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
2</br>{{ count }}</br>2
</div>
</el-popover>
</el-col>
</el-row>
<el-row STYLE="margin-bottom: 20px;">
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount(('0101-'+(count > 10 ? count: '0'+count) +'-02'))"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0102-0'+count+'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
2</br>{{ count }}</br>1
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">二排
</div>
</el-col>
</el-row>
<!-- 第三行-->
<el-row>
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0103-0'+count+'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0103-0'+count+'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
3</br>{{ count }}</br>2
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0103-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0103-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
3</br>{{ (count + 6) }}</br>2
</div>
</el-popover>
</el-col>
</el-row>
<el-row>
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0103-0'+count+'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0103-0'+count+'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
3</br>{{ count }}</br>1
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">三排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0103-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0103-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
3</br>{{ (count + 6) }}</br>1
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第四行-->
<el-row>
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0104-0'+count+'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0104-0'+count+'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
4</br>{{ count }}</br>2
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0104-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0104-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
4</br>{{ (count + 6) }}</br>2
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0104-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0104-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
4</br>{{ count }}</br>1
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">四排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0104-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0104-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
4</br>{{ (count + 6) }}</br>1
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第五行-->
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0105-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0105-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
5</br>{{ count }}</br>2
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0105-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0105-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
5</br>{{ (count + 12) }}</br>2
</div>
</el-popover>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0105-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0105-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
5</br>{{ count }}</br>1
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">五排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0105-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0105-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
5</br>{{ (count + 12) }}</br>1
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第六行-->
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0106-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0106-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
6</br>{{ count }}</br>2
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0106-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0106-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
6</br>{{ (count + 12) }}</br>2
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0106-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0106-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
6</br>{{ count }}</br>1
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">六排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0106-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0106-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
6</br>{{ (count + 12) }}</br>1
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第七行-->
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0107-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0107-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
7</br>{{ count }}</br>2
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0107-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0107-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
7</br>{{ (count + 12) }}</br>2
</div>
</el-popover>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0107-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0107-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
7</br>{{ count }}</br>1
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">七排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0107-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0107-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
7</br>{{ (count + 12) }}</br>1
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第八行-->
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0108-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0108-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
8</br>{{ count }}</br>2
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0108-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0108-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
8</br>{{ (count + 12) }}</br>2
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0108-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0108-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
8</br>{{ count }}</br>1
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">八排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0108-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0108-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
8</br>{{ (count + 12) }}</br>1
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第九行-->
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0109-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0109-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
9</br>{{ count }}</br>2
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0109-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0109-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
9</br>{{ (count + 12) }}</br>2
</div>
</el-popover>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0109-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0109-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
9</br>{{ count }}</br>1
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">九排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0109-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0109-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
9</br>{{ (count + 12) }}</br>1
</div>
</el-popover>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import crudProductRoute from '@/api/productprocessroute'
export default {
name: 'Test',
data() {
return {
arr: {
'0101-01-01': 'red',
'0101-01-02': 'green',
'0101-02-01': 'green',
'0101-02-02': 'green',
'0101-03-01': 'red',
'0101-03-02': 'green',
'0101-04-01': 'green',
'0101-04-02': 'red',
'0101-05-01': 'green',
'0101-05-02': 'red',
'0101-06-01': 'green',
'0101-06-02': 'green'
},
width: '2500',
div_width: '43',
div_height: '60',
row_color: '#0d3fad'
}
},
created() {
},
methods: {
divCount(data) {
const params = ['SP001', '091810', '钴粉', '500', '2022:06:10', '12', '完成']
let str = ''
str = '货位:' + data +
'<br/>载具:' + params[0]
+ '</br>' + '物料:' + params[1]
+ '<br>' + '名称:' + params[2]
+ '<br>' + '重量(kg)' + params[3]
+ '</br>' + '入库时间:' + params[4]
+ '</br>' + '静置(h)' + params[5]
+ '</br>' + '静置状态:' + params[6]
return str
}
}
}
</script>
<style>
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d5e6d3;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: red;
}
</style>

View File

@@ -0,0 +1,690 @@
<template>
<div class="app-container">
<div class="head-container">
<div>
<div style="display: inline-block">空载具<div style="margin-left:5px;padding-top:5px;display: inline-block;background-color: #99a9bf;width: 20px;height: 20px;border-radius: 50%;line-height: 30px;text-align: center;"></div></div>
<div style="display: inline-block">空货位<div style="margin-left:5px;display: inline-block;background-color: red;width: 20px;height: 20px;border-radius: 50%"></div></div>
<div style="display: inline-block">有货<div style="margin-left:5px;display: inline-block;background-color: green;width: 20px;height: 20px;border-radius: 50%"></div></div>
</div>
<!-- 第一行-->
<el-row>
<el-col :span="5" :offset="5" style="padding-left: 6.7%">
<el-popover v-for="count in 4" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0201-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0201-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
1</br>{{ count }}</br>2
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0201-'+((count+4) >= 10 ? (count+4) : '0'+(count+4)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0201-'+((count+4) >= 10 ? (count+4) : '0'+(count+4)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
1</br>{{ (count+4) }}</br>2
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="5" :offset="5" style="padding-left: 6.7%">
<el-popover v-for="count in 4" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0201-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0201-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
1</br>{{ count }}</br>1
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">一排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0201-'+((count+4) >= 10 ? (count+4) : '0'+(count+4)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0201-'+((count+4) >= 10 ? (count+4) : '0'+(count+4)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
1</br>{{ (count+4) }}</br>1
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第二行-->
<el-row>
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0202-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0202-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
2</br>{{ count }}</br>2
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0202-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0202-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
2</br>{{ (count+6) }}</br>2
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0202-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0202-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
2</br>{{ count }}</br>1
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">二排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 14" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0202-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0202-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
2</br>{{ (count+6) }}</br>1
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第三行-->
<el-row>
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0203-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0203-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
3</br>{{ count }}</br>2
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 8" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0203-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0203-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
3</br>{{ (count+6) }}</br>2
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="5" :offset="5">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0203-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0203-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
3</br>{{ count }}</br>1
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">三排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 8" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0203-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0203-'+((count+6) >= 10 ? (count+6) : '0'+(count+6)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
3</br>{{ (count+6) }}</br>1
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第四行-->
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0204-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0204-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
4</br>{{ count }}</br>2
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 8" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0204-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0204-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
4</br>{{ (count+12) }}</br>2
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0204-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0204-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
4</br>{{ count }}</br>1
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">四排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 8" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0204-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0204-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
4</br>{{ (count+12) }}</br>1
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第五行-->
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0205-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0205-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
5</br>{{ count }}</br>2
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 8" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0205-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0205-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
5</br>{{ (count+12) }}</br>2
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0205-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0205-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
5</br>{{ count }}</br>1
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">五排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 8" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0205-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0205-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
5</br>{{ (count+12) }}</br>1
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第六行-->
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0206-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0206-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
6</br>{{ count }}</br>2
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 8" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0206-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0206-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
6</br>{{ (count+12) }}</br>2
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0206-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0206-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
6</br>{{ count }}</br>1
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">六排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 8" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0206-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0206-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
6</br>{{ (count+12) }}</br>1
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第七行-->
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0207-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0207-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
7</br>{{ count }}</br>2
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0207-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0207-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
7</br>{{ (count+12) }}</br>2
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0207-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0207-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
7</br>{{ count }}</br>1
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">七排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0207-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0207-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
7</br>{{ (count+12) }}</br>1
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第八行-->
<el-row>
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0208-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0208-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
8</br>{{ count }}</br>2
</div>
</el-popover>
</el-col>
<el-col :span="12" :offset="2">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0208-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0208-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
8</br>{{ (count+12) }}</br>2
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="10">
<el-popover v-for="count in 12" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0208-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0208-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
8</br>{{ count }}</br>1
</div>
</el-popover>
</el-col>
<el-col :span="2" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">八排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0208-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0208-'+((count+12) >= 10 ? (count+12) : '0'+(count+12)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
8</br>{{ (count+12) }}</br>1
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第九行-->
<el-row>
<el-col :span="12" :offset="12">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0209-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0209-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
9</br>{{ (count) }}</br>2
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="2":offset="10" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">九排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0209-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0209-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
9</br>{{ (count) }}</br>1
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第十行-->
<el-row>
<el-col :span="12" :offset="12">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0210-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0210-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
10</br>{{ (count+12) }}</br>2
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="2":offset="10" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">十排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0210-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0210-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
10</br>{{ (count) }}</br>1
</div>
</el-popover>
</el-col>
</el-row>
<!-- 第十一行-->
<el-row>
<el-col :span="12" :offset="12">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0211-'+((count) >= 10 ? (count) : '0'+(count)) +'-02')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0211-'+((count) >= 10 ? (count) : '0'+(count)) +'-02']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
11</br>{{ (count) }}</br>2
</div>
</el-popover>
</el-col>
</el-row>
<el-row style="margin-bottom: 20px;">
<el-col :span="2":offset="10" style="height: 100%;margin-top: -25px;display: flex;justify-content: center">
<div class="grid-content bg-purple"
style="height: 50px;width: 50px;line-height: 50px;text-align: center;border-radius: 50%">十一排
</div>
</el-col>
<el-col :span="12">
<el-popover v-for="count in 6" placement="bottom" title="货位详情" trigger="hover" transition="linear"
open-delay="500">
<div v-html="divCount('0211-'+((count) >= 10 ? (count) : '0'+(count)) +'-01')"></div>
<div class="grid-content bg-purple-dark"
slot="reference"
style="border: 1px solid #d3dce6;display: inline-block;text-align: center;"
:style="'background:'+arr['0211-'+((count) >= 10 ? (count) : '0'+(count)) +'-01']+';width: '+div_width+'px;height: '+div_height+'px;'"
>
11</br>{{ (count) }}</br>1
</div>
</el-popover>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import crudProductRoute from '@/api/productprocessroute'
export default {
name: 'Test',
data() {
return {
arr: {
'0201-01-01': 'red',
'0201-01-02': 'green',
'0201-02-01': 'green',
'0201-02-02': 'green',
'0201-03-01': 'red',
'0201-03-02': 'green',
'0201-04-01': 'green',
'0201-04-02': 'red',
'0201-05-01': 'green',
'0201-05-02': 'red',
'0201-06-01': 'green',
'0201-06-02': 'green'
},
width: '2500',
div_width: '43',
div_height: '60',
row_color: '#0d3fad'
}
},
created() {
},
methods: {
divCount(data) {
const params = ['SP001', '091810', '钴粉', '500', '2022:06:10', '12', '完成']
let str = ''
str = '货位:' + data +
'<br/>载具:' + params[0]
+ '</br>' + '物料:' + params[1]
+ '<br>' + '名称:' + params[2]
+ '<br>' + '重量(kg)' + params[3]
+ '</br>' + '入库时间:' + params[4]
+ '</br>' + '静置(h)' + params[5]
+ '</br>' + '静置状态:' + params[6]
return str
}
}
}
</script>
<style>
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d5e6d3;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: red;
}
</style>

View File

@@ -0,0 +1,37 @@
<template>
<el-tabs v-model="activeName" style="padding-left: 8px;" @tab-click="tabClick">
<el-tab-pane label="库区1" name="first">
<Sect1 ref="sect1"/>
</el-tab-pane>
<el-tab-pane label="库区2" name="second">
<Sect2 ref="sect2"/>
</el-tab-pane>
</el-tabs>
</template>
<script>
import Sect1 from './index2'
import Sect2 from './index3'
export default {
name: 'Storage',
components: { Sect1, Sect2 },
data() {
return {
activeName: 'first'
}
},
methods: {
tabClick(name) {
// if (this.activeName === 'first') {
// this.$refs.local.crud.toQuery()
// } else {
// this.$refs.qiNiu.crud.toQuery()
// }
}
}
}
</script>
<style scoped>
</style>