2 changed files with 354 additions and 10 deletions
@ -1,24 +1,363 @@ |
|||
<template> |
|||
<div class="app-container row-container"> |
|||
架位3D地图定位 |
|||
<div class="app-container" style="position: relative; height: 784px; background-color: #fff;"> |
|||
<div class="position-top" style="display: flex; justify-content: space-between;"> |
|||
<div class="position-top-left"> |
|||
<el-select |
|||
ref="selectRef" |
|||
v-model="selectedValue" |
|||
placeholder="请选择" |
|||
style="width: 250px;" |
|||
@visible-change="handleVisibleChange" |
|||
> |
|||
<i slot="prefix" class="el-input__icon el-icon-location" /> |
|||
<el-option value="" style="display: none;" /> |
|||
<div class="tree-dropdown"> |
|||
<el-tree |
|||
ref="treeRef" |
|||
:data="regionTreeData" |
|||
:props="treeProps" |
|||
node-key="id" |
|||
default-expand-all |
|||
:expand-on-click-node="false" |
|||
@node-click="handleTreeNodeClick" |
|||
> |
|||
<span slot-scope="{ node, data }" class="custom-tree-node"> |
|||
<span v-if="data.fondsId" style="font-weight: bold;"> |
|||
<i class="iconfont icon-gongsi" /> |
|||
{{ data.label }} |
|||
</span> |
|||
<span v-else-if="data.floorId"> |
|||
<i class="iconfont icon-duolouceng" /> |
|||
{{ data.label }} |
|||
</span> |
|||
<span v-else> |
|||
<i class="iconfont icon-hangzhengquyuguanli" /> |
|||
{{ data.label }} |
|||
</span> |
|||
</span> |
|||
</el-tree> |
|||
</div> |
|||
</el-select> |
|||
<el-card class="box-card shelf-bind-card"> |
|||
<ul class="shelf-bind-tab"> |
|||
<li class="active">已绑定（136）</li> |
|||
<li>未绑定（2）</li> |
|||
</ul> |
|||
<ul class="shelf-bind-list"> |
|||
<li v-for="(item,index) in 8" :key="index"> |
|||
<span>{{ index+1 }}</span> |
|||
<p>FTZN-03-001-A-01-1</p> |
|||
</li> |
|||
</ul> |
|||
</el-card> |
|||
</div> |
|||
<div class="position-top-middle"> |
|||
<el-card class="box-card"> |
|||
<el-form ref="form" :model="form" label-width="100px"> |
|||
<el-form-item label="架位筛选" prop="name"> |
|||
<el-select v-model="form.code1" style="width: 190px;"> |
|||
<el-option |
|||
v-for="(item,index) in options1" |
|||
:key="index" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
<el-select v-model="form.code2"> |
|||
<el-option |
|||
v-for="(item,index) in selectList" |
|||
:key="index" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
<el-select v-model="form.toward" style="width: 80px;"> |
|||
<el-option |
|||
v-for="(item,index) in abOptions" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
<el-select v-model="form.code4"> |
|||
<el-option |
|||
v-for="(item,index) in selectList" |
|||
:key="index" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
<el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="filter-shelf-list"> |
|||
<el-tag type="success">FTZN-03-001-A-01-1</el-tag> |
|||
<el-tag type="success">FTZN-03-001-A-01-2</el-tag> |
|||
<el-tag type="success">FTZN-03-001-A-01-3</el-tag> |
|||
<el-tag type="success">FTZN-03-001-A-01-4</el-tag> |
|||
<el-tag type="success">FTZN-03-001-A-01-5</el-tag> |
|||
<el-tag type="success">FTZN-03-001-A-01-6</el-tag> |
|||
<el-tag type="success">FTZN-03-001-A-01-7</el-tag> |
|||
<el-tag type="success">FTZN-03-001-A-01-8</el-tag> |
|||
</div> |
|||
<div class="filter-model-select"> |
|||
<div class="model-select-style">已选定位：模型ID【7069947319919185920】</div> |
|||
<div class="model-select-style">已选架位：<span>6</span></div> |
|||
<el-button class="filter-item filter-search" size="mini" type="success"><i class="iconfont icon-bangding" />绑定</el-button> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
<div class="position-top-right"> |
|||
<el-card class="box-card"> |
|||
<div class="inquiry-machine-bind-top"> |
|||
<h4>查询机绑定</h4> |
|||
<div class="inquiry-machine-bind-params"> |
|||
<span style="color: rgb(3, 72, 243); font-weight: bold;">已绑 1</span> |
|||
<span>/</span> |
|||
<span style="color: rgb(237, 74, 65); font-weight: bold;">未绑 1</span> |
|||
</div> |
|||
</div> |
|||
<ul class="shelf-bind-list" style="height: 190px;"> |
|||
<li v-for="(item,index) in 8" :key="index"> |
|||
<span>{{ index+1 }}</span> |
|||
<p>查询机001</p> |
|||
<span style="color: rgb(3, 72, 243); cursor: pointer;">绑定</span> |
|||
<!-- <span style="color: #2ecaac; cursor: pointer;">定位</span> --> |
|||
</li> |
|||
</ul> |
|||
</el-card> |
|||
</div> |
|||
</div> |
|||
<PreviewMap ref="map" :map-data="mapData" :to-shlef="true" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchRegionTree } from '@/api/deviceVI/index' |
|||
import PreviewMap from '../map3d/map' |
|||
export default { |
|||
name: 'Shelf3dPosition', |
|||
components: { |
|||
PreviewMap |
|||
}, |
|||
data() { |
|||
return { |
|||
selectedValue: '', |
|||
regionTreeData: [], |
|||
treeProps: { label: 'label', children: 'children' }, |
|||
form: { |
|||
code1: null, |
|||
code2: null, |
|||
toward: 0, |
|||
code4: null |
|||
}, |
|||
selectList: [], |
|||
options1: [ |
|||
{ value: 0, label: '按 “排-单面-架” 筛选' }, |
|||
{ value: 1, label: '按 “排-双面-架” 筛选' }, |
|||
{ value: 2, label: '按 “排-单面” 筛选' }, |
|||
{ value: 3, label: '按 “排-双面” 筛选' } |
|||
], |
|||
abOptions: [ |
|||
{ value: 0, name: '双面' }, |
|||
{ value: 1, name: 'A面' }, |
|||
{ value: 2, name: 'B面' } |
|||
], |
|||
mapData: {} |
|||
} |
|||
}, |
|||
watch: { |
|||
}, |
|||
created() { |
|||
FetchRegionTree().then(res => { |
|||
this.regionTreeData = [this.transformData(res)] |
|||
console.log(this.regionTreeData) |
|||
}).catch(() => { |
|||
}) |
|||
}, |
|||
mounted() { |
|||
this.mapData = { |
|||
'id': 1, |
|||
'libcode': '1201', |
|||
'appName': '武汉东西湖图书馆', |
|||
'appId': '1572162706543931393', |
|||
'mapKey': 'd0ebc0507c72e6fb8598a3e58517f9d3', |
|||
'isOnline': true |
|||
} |
|||
this.$nextTick(() => { |
|||
this.$refs.map.level = 1 |
|||
this.$refs.map.initMap() |
|||
}) |
|||
}, |
|||
methods: { |
|||
// tree 数据转换 |
|||
transformData(data) { |
|||
return { |
|||
id: data.fondsId, |
|||
fondsId: data.fondsId, |
|||
label: data.fondsName, |
|||
children: data.floors.map(floor => ({ |
|||
id: floor.id, |
|||
floorId: floor.id, |
|||
label: floor.floorName, |
|||
children: floor.regions.map(region => ({ |
|||
id: region.id, |
|||
regionId: region.id, |
|||
label: region.regionName, |
|||
parentFloorId: floor.id |
|||
})) |
|||
})) |
|||
} |
|||
}, |
|||
handleTreeNodeClick(nodeData) { |
|||
const currentNode = this.$refs.treeRef.getNode(nodeData) |
|||
console.log(currentNode) |
|||
|
|||
if (currentNode.level === 1) { |
|||
return |
|||
} |
|||
|
|||
const parentNode = currentNode.parent |
|||
const parentLabel = parentNode && parentNode.data && parentNode.data.label |
|||
? parentNode.data.label |
|||
: '' |
|||
|
|||
this.selectedValue = parentLabel |
|||
? `${parentLabel} - ${nodeData.label}` |
|||
: nodeData.label |
|||
this.$refs.selectRef.blur() |
|||
}, |
|||
handleVisibleChange(visible) { |
|||
// 下拉关闭时的额外逻辑（可选） |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
<style lang="scss" scoped> |
|||
.tree-dropdown { |
|||
width: 250px; |
|||
max-height: 300px; |
|||
overflow-y: auto; |
|||
} |
|||
.position-top{ |
|||
position: absolute; |
|||
top: 10px; |
|||
left: 20px; |
|||
width: calc(100% - 40px); |
|||
z-index: 999; |
|||
} |
|||
::v-deep .el-tree{ |
|||
.el-tree-node__children{ |
|||
font-size: 14px; |
|||
.iconfont{ |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.position-top-left, |
|||
.position-top-right{ |
|||
width: 250px; |
|||
} |
|||
|
|||
.shelf-bind-card{ |
|||
width: 250px; |
|||
margin-top: 20px; |
|||
font-size: 14px; |
|||
.shelf-bind-tab{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
text-align: center; |
|||
align-items: center; |
|||
li{ |
|||
width: 50%; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
cursor: pointer; |
|||
background: #f5f5f5; |
|||
&.active{ |
|||
background: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.shelf-bind-list{ |
|||
font-size: 12px; |
|||
margin-top: 8px; |
|||
height: 155px; |
|||
overflow-y: scroll; |
|||
li{ |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
line-height: 30px; |
|||
padding: 4px 10px; |
|||
span{ |
|||
display: block; |
|||
width: 30px; |
|||
text-align: center; |
|||
} |
|||
p{ |
|||
flex: 1; |
|||
padding-left: 20px; |
|||
} |
|||
&:hover{ |
|||
background: #f5f5f5; |
|||
cursor: default; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.position-top-middle{ |
|||
width: 916px; |
|||
.el-card{ |
|||
padding:20px 0 10px 0; |
|||
} |
|||
} |
|||
.filter-shelf-list{ |
|||
border-top: 1px solid #edeff3; |
|||
padding: 10px 10px 0 10px; |
|||
height: 96px; |
|||
overflow-y: scroll; |
|||
} |
|||
.filter-model-select{ |
|||
border-top: 1px solid #edeff3; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 10px 10px 0 10px; |
|||
margin-top: 10px; |
|||
.model-select-style{ |
|||
font-weight: bold; |
|||
&:first-child{ |
|||
flex: 1; |
|||
} |
|||
span{ |
|||
display: inline-block; |
|||
width: 32px; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
background-color: #2ecaac; |
|||
color: #fff; |
|||
text-align: center; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
.el-button{ |
|||
margin-left: 20px; |
|||
} |
|||
} |
|||
|
|||
.inquiry-machine-bind-top{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
color: #0c0e1e; |
|||
border-bottom: 1px solid #edeff3; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
padding: 0 10px; |
|||
.inquiry-machine-bind-params{ |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue