|
|
@@ -1,7 +1,8 @@
|
|
|
<template>
|
|
|
<div class="page animate__animated animate__faster animate__fadeInLeft">
|
|
|
<more title="车位使用情况" nomore></more>
|
|
|
- <operateList @save="save" @search="search" ref="operateList" @initDone="initDone"></operateList>
|
|
|
+ <operateList @save="save" @search="search" @changeParking='changeParking' ref="operateList" @initDone="initDone">
|
|
|
+ </operateList>
|
|
|
|
|
|
<div v-show="$isNotEmpty(parkingLotObj)" class="parking-layout" @click="activedIndex=-1;closePopover"
|
|
|
id="parkingLayout"
|
|
|
@@ -13,11 +14,14 @@
|
|
|
<i class="el-icon-circle-plus-outline" style="color: #3b8ff4;font-size: 3.125rem;"></i>
|
|
|
<span>添加区域</span>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 可拖拽区域begin -->
|
|
|
<VueDragResize class="animate__animated animate__faster animate__zoomIn" v-if="item.show&&!enlarge"
|
|
|
:isDraggable="disabled" :isResizable="disabled" v-for="(item, index) in parkingAreaList" :key="index"
|
|
|
:w="item.width" :h="item.height" :x="item.x" :y="item.y" :z="(index+1)" :parentW="listWidth"
|
|
|
:parentH="listHeight" :parentLimitation="true" :snapToGrid="true" :gridX="10" :gridY="10"
|
|
|
@resizestop="rectStop($event, index)" @dragstop="rectStop($event, index)">
|
|
|
+
|
|
|
<div @click.stop="activedIndex=index"
|
|
|
style="width: 100%;height: 100%;position: relative;z-index: 9999999999999999;">
|
|
|
<el-button class="delLayoutClass" @click.stop="delLayout(item)" v-if="delLayoutShow" type="danger"
|
|
|
@@ -26,25 +30,40 @@
|
|
|
@click.stop="enlarge=true;enlargeItem=item;" type="primary" icon="el-icon-zoom-in" size="mini"
|
|
|
style="padding: 0.26rem;" circle></el-button>
|
|
|
|
|
|
- <div id="parkingBox" class="parking-box" style="position:relative;">
|
|
|
+ <div id="parkingBox" @click="editPopoverShow" class="parking-box" style="position:relative;">
|
|
|
<div class="watermark">
|
|
|
{{item.name}}
|
|
|
</div>
|
|
|
<div @click.stop="showPopover(item1)" v-if="$isNotEmpty(item.parkingSpaceList)" class="car"
|
|
|
:style="changeParkingSpaceParams(item)" v-for="(item1,index1) in item.parkingSpaceList" :key="index1">
|
|
|
- <el-popover placement="bottom" title="" width="230" v-model="item1.popoverShow" trigger="manual">
|
|
|
+
|
|
|
+ <el-popover placement="bottom" title="" :width="260" v-model="item1.popoverShow" trigger="manual">
|
|
|
<div class="tips" style="position: relative;">
|
|
|
<div style="position: absolute;right: 0rem;top: -10px">
|
|
|
- <i class="el-icon-delete" style="font-weight: 800;"></i>
|
|
|
- <i class="el-icon-edit-outline" style="margin-left: 0.25rem;font-weight: 800;"></i>
|
|
|
+ <i class="el-icon-delete" style="font-weight: 800;color:red"
|
|
|
+ @click="delParkingSpace(item.parkingSpaceList,index1)"></i>
|
|
|
+ </div>
|
|
|
+ <div v-if="item1.id">
|
|
|
+ <label>id：</label>
|
|
|
+ {{item1.id}}
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <label>id：</label>
|
|
|
+ <span style="color:red">未保存</span>
|
|
|
</div>
|
|
|
<div>
|
|
|
<label>停车场：</label>
|
|
|
{{parkingLotObj.parkName}}
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <label>车位编号：</label>
|
|
|
- {{item1.number}}
|
|
|
+ <div style="justify-conetnt:flex-start;padding-top:0" class="">
|
|
|
+ <div class="center">
|
|
|
+ <label>车位编号：</label>
|
|
|
+ </div>
|
|
|
+ <el-input v-model="parkingSpaceNumber" placeholder="请输入车位编号" size="mini">
|
|
|
+ <div slot="append" class="numberClass">
|
|
|
+ <el-button icon="el-icon-check" size="mini" @click="updateParkingspace(item1)"></el-button>
|
|
|
+ </div>
|
|
|
+ </el-input>
|
|
|
</div>
|
|
|
<div style="display: flex;">
|
|
|
<label>车牌号码：</label>
|
|
|
@@ -67,7 +86,7 @@
|
|
|
|
|
|
<div class="car" :style="changeParkingSpaceParams(item)">
|
|
|
<i class="el-icon-circle-plus-outline" @click.stop="addParkingSpace(item)"></i>
|
|
|
- <el-popover placement="bottom" title="" width="270" trigger="hover">
|
|
|
+ <el-popover placement="bottom" title="" width="190" trigger="hover">
|
|
|
<div class="popoverContent" style="justify-content: center;">
|
|
|
<el-button style="margin:0.25rem" v-for="(item2,index2) in tipsBtnList" :key="index2"
|
|
|
@click="popoverClick(item,item2)" type="primary" size="mini" plain>{{item2.name}}</el-button>
|
|
|
@@ -80,6 +99,9 @@
|
|
|
</div>
|
|
|
</VueDragResize>
|
|
|
|
|
|
+ <!-- 可拖拽区域end -->
|
|
|
+
|
|
|
+ <!-- 放大区域 begin-->
|
|
|
<VueDragResize class="animate__animated animate__faster "
|
|
|
:class="enlargeAreaShow()?'animate__zoomIn':'animate__zoomOut'" v-if="enlargeAreaShow()" :isDraggable="false"
|
|
|
:isResizable="false" :w="(listWidth - 20)" :h="(listHeight - 20)" :x="10" :y="10" :parentW="listWidth"
|
|
|
@@ -92,11 +114,11 @@
|
|
|
<div v-if="$isNotEmpty(enlargeItem.parkingSpaceList)" class="car"
|
|
|
:style="changeParkingSpaceParams(enlargeItem)" v-for="(item1,index1) in enlargeItem.parkingSpaceList"
|
|
|
:key="index1">
|
|
|
- <el-popover placement="bottom" title="" width="230" trigger="hover">
|
|
|
+ <el-popover placement="bottom" title="" width="250" trigger="hover">
|
|
|
<div class="tips" style="position: relative;">
|
|
|
- <div style="position: absolute;right: 0rem;top: -10px">
|
|
|
- <i class="el-icon-delete" style="font-weight: 800;"></i>
|
|
|
- <i class="el-icon-edit-outline" style="margin-left: 0.25rem;font-weight: 800;"></i>
|
|
|
+ <div>
|
|
|
+ <label>id：</label>
|
|
|
+ {{item1.id}}
|
|
|
</div>
|
|
|
<div>
|
|
|
<label>停车场：</label>
|
|
|
@@ -109,11 +131,9 @@
|
|
|
<div style="display: flex;">
|
|
|
<label>车牌号码：</label>
|
|
|
<span v-if="item1.carNo">{{item1.carNo}}
|
|
|
- <span v-if="item1.id" class="bind" @click="parkingSpaceItem=item1;tableShow=true">换绑</span>
|
|
|
</span>
|
|
|
<span style="color: red;justify-content: center;display: flex;align-items: center;" v-else>
|
|
|
车位为空
|
|
|
- <span v-if="item1.id" class="bind" @click="parkingSpaceItem=item1;tableShow=true">绑定</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -125,7 +145,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</VueDragResize>
|
|
|
-
|
|
|
+ <!-- 放大区域 end-->
|
|
|
</div>
|
|
|
|
|
|
<el-dialog style="z-index: 99999;" :close-on-click-modal="false" :append-to-body="true"
|
|
|
@@ -156,8 +176,6 @@
|
|
|
:close-on-click-modal="false" :visible.sync="tableShow">
|
|
|
<car-table ref="car" @bindCar="bindCar"></car-table>
|
|
|
</el-dialog>
|
|
|
-
|
|
|
-
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -167,8 +185,13 @@
|
|
|
} from '@/util/util.js'
|
|
|
import {
|
|
|
saveLayout,
|
|
|
- getLayout
|
|
|
+ getLayout,
|
|
|
+ update as updateParkingarea,
|
|
|
} from '@/api/estate/parkingarea.js'
|
|
|
+ import {
|
|
|
+ saveOrUpdate as updateParkingspace,
|
|
|
+ removeParkingSpace,
|
|
|
+ } from '@/api/estate/parkingspace.js'
|
|
|
import VueDragResize from 'vue-drag-resize';
|
|
|
import operateList from "./operate-list.vue"
|
|
|
import more from "@/components/more.vue"
|
|
|
@@ -191,6 +214,14 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ //延时器
|
|
|
+ timer1: null,
|
|
|
+ timer2: null,
|
|
|
+ timer3: null,
|
|
|
+
|
|
|
+ //修改车位编号
|
|
|
+ parkingSpaceNumber: '',
|
|
|
+
|
|
|
//搜索匹配的项
|
|
|
searchList: [],
|
|
|
//绑定车辆
|
|
|
@@ -257,12 +288,12 @@
|
|
|
this.operateDialogShow = true
|
|
|
}
|
|
|
},
|
|
|
- {
|
|
|
- name: '修改宽高',
|
|
|
- event: () => {
|
|
|
- this.$message.success('操作成功')
|
|
|
- }
|
|
|
- },
|
|
|
+ // {
|
|
|
+ // name: '修改宽高',
|
|
|
+ // event: () => {
|
|
|
+ // this.$message.success('操作成功')
|
|
|
+ // }
|
|
|
+ // },
|
|
|
{
|
|
|
name: '车位翻转',
|
|
|
event: () => {
|
|
|
@@ -295,18 +326,61 @@
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
+ changeParking(data) {
|
|
|
+ if (this.parkingLotObj.id != data.id) {
|
|
|
+ this.parkingLotObj = deepClone(data)
|
|
|
+ this.getParkingArealist()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fullLoading(text = 'loading') {
|
|
|
+ const loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text,
|
|
|
+ spinner: 'el-icon-loading',
|
|
|
+ background: 'rgba(0, 0, 0, 0.7)'
|
|
|
+ })
|
|
|
+ return loading
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 更新车位信息
|
|
|
+ */
|
|
|
+ updateParkingspace(data) {
|
|
|
+ let tmp = deepClone(data)
|
|
|
+ tmp.number = this.parkingSpaceNumber
|
|
|
+ updateParkingspace(tmp).then(res => {
|
|
|
+ if (res.data.success) {
|
|
|
+ this.$message.success('操作成功')
|
|
|
+ data.number = this.parkingSpaceNumber
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.editPopoverShow()
|
|
|
+ },
|
|
|
+ delParkingSpace(arr, index) {
|
|
|
+ let data = arr[index]
|
|
|
+ if (this.$isEmpty(data.id)) {
|
|
|
+ arr.splice(index, 1)
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$confirm('确定删除该车位？').then(() => {
|
|
|
+ removeParkingSpace(data.id).then(async (res) => {
|
|
|
+ if (res.data.success) {
|
|
|
+ arr.splice(index, 1)
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
editPopoverShow() {
|
|
|
this.parkingAreaList.forEach(item => {
|
|
|
item.parkingSpaceList.forEach(item1 => item1.popoverShow = false)
|
|
|
})
|
|
|
},
|
|
|
showPopover(data) {
|
|
|
+ this.parkingSpaceNumber = data.number
|
|
|
let flag = data.popoverShow
|
|
|
this.editPopoverShow()
|
|
|
data.popoverShow = !flag
|
|
|
- setTimeout(() => {
|
|
|
- data.popoverShow = false
|
|
|
- }, 5000)
|
|
|
},
|
|
|
search(searchKey) {
|
|
|
this.searchList = []
|
|
|
@@ -370,34 +444,41 @@
|
|
|
})
|
|
|
},
|
|
|
async getParkingArealist() {
|
|
|
- let res=await getLayout(this.parkingLotObj.id)
|
|
|
- if (this.$isNotEmpty(res.data.data)) {
|
|
|
- let tmp = res.data.data
|
|
|
- tmp.forEach(item => {
|
|
|
- item.show = true
|
|
|
- item.width=digital.floatMul(this.listWidth,item.width)
|
|
|
- item.height=digital.floatMul(this.listHeight,item.height)
|
|
|
- item.x=digital.floatMul(this.listWidth,item.x)
|
|
|
- item.y=digital.floatMul(this.listHeight,item.y)
|
|
|
- })
|
|
|
- this.parkingAreaList=tmp
|
|
|
- }
|
|
|
+ let res = await getLayout(this.parkingLotObj.id)
|
|
|
+ let tmp = res.data.data
|
|
|
+ tmp.forEach(item => {
|
|
|
+ item.show = true
|
|
|
+ item.width = digital.floatMul(this.listWidth, item.width)
|
|
|
+ item.height = digital.floatMul(this.listHeight, item.height)
|
|
|
+ item.x = digital.floatMul(this.listWidth, item.x)
|
|
|
+ item.y = digital.floatMul(this.listHeight, item.y)
|
|
|
+ })
|
|
|
+ this.parkingAreaList = tmp
|
|
|
},
|
|
|
save() {
|
|
|
- let tmp=deepClone(this.parkingAreaList)
|
|
|
- tmp.forEach(item=>{
|
|
|
- item.width =digital.keepTwoDecimalFull(item.width / this.listWidth)
|
|
|
- item.height=digital.keepTwoDecimalFull(item.height / this.listHeight)
|
|
|
- item.x=digital.keepTwoDecimalFull(item.x / this.listWidth)
|
|
|
- item.y=digital.keepTwoDecimalFull(item.y / this.listHeight)
|
|
|
+ if (this.$isEmpty(this.parkingAreaList)) {
|
|
|
+ this.$message.success('保存成功')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let loading = this.fullLoading("布局保存中...")
|
|
|
+ let tmp = deepClone(this.parkingAreaList)
|
|
|
+ tmp.forEach(item => {
|
|
|
+ item.width = digital.keepTwoDecimalFull(item.width / this.listWidth)
|
|
|
+ item.height = digital.keepTwoDecimalFull(item.height / this.listHeight)
|
|
|
+ item.x = digital.keepTwoDecimalFull(item.x / this.listWidth)
|
|
|
+ item.y = digital.keepTwoDecimalFull(item.y / this.listHeight)
|
|
|
})
|
|
|
- saveLayout(tmp).then(res => {
|
|
|
+ saveLayout(tmp).then(async (res) => {
|
|
|
if (res.data.success) {
|
|
|
this.$message.success('保存成功')
|
|
|
- this.getParkingArealist()
|
|
|
+ await this.getParkingArealist()
|
|
|
+ this.disabled = true
|
|
|
} else {
|
|
|
this.$message.success('保存失败')
|
|
|
}
|
|
|
+ loading.close()
|
|
|
+ }).catch(() => {
|
|
|
+ loading.close()
|
|
|
})
|
|
|
},
|
|
|
delLayout(item) {
|
|
|
@@ -422,6 +503,9 @@
|
|
|
tmp.number = guid(8)
|
|
|
item.parkingSpaceList.push(tmp)
|
|
|
},
|
|
|
+ /**
|
|
|
+ * flag true 主动修改
|
|
|
+ */
|
|
|
changeParkingSpaceParams(item, flag = false) {
|
|
|
let arr = item.parkingSpaceParams.split(',')
|
|
|
if (flag) {
|
|
|
@@ -429,11 +513,22 @@
|
|
|
arr[0] = arr[1]
|
|
|
arr[1] = tmp
|
|
|
item.parkingSpaceParams = arr.join(',')
|
|
|
+ this.remoteChangeParkingSpaceParams(item)
|
|
|
}
|
|
|
let flexStyle = arr[0] > arr[1] ? 'flex-direction: row' : 'flex-direction: column'
|
|
|
let parkingSpaceStyle = `width:${arr[0]}px;height:${arr[1]}px;${flexStyle}`
|
|
|
return parkingSpaceStyle
|
|
|
},
|
|
|
+ remoteChangeParkingSpaceParams(data) {
|
|
|
+ if (this.$isEmpty(data.id)) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let params = {
|
|
|
+ id: data.id,
|
|
|
+ parkingSpaceParams: data.parkingSpaceParams
|
|
|
+ }
|
|
|
+ updateParkingarea(params)
|
|
|
+ },
|
|
|
popoverClick(item, item2) {
|
|
|
this.operatePopoverItem = item
|
|
|
item2.event(item)
|
|
|
@@ -474,6 +569,12 @@
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
+ .center {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
.watermark {
|
|
|
width: 100%;
|
|
|
height: 30px;
|
|
|
@@ -490,6 +591,10 @@
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
|
|
|
+ .numberClass:active {
|
|
|
+ transform: scale(1.05);
|
|
|
+ }
|
|
|
+
|
|
|
.addParkingArea {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
