<template>
|
<div class='app'>
|
<scale-view center :data='{a:1}'>
|
<div slot='content' class='content'>
|
<div class='container'>
|
|
<!-- 第一栏-->
|
<div class='flex' style='box-sizing: border-box;width: 1500px;height: 420px;'>
|
<div class='flex' style='box-sizing: border-box;width: 360px;height: 420px;'>
|
<room-block @edit='edit' class='mr1' :model='model1' :data='roomFindByNo(36)'></room-block>
|
<room-block @edit='edit' class='mr1' :model='model1' :data='roomFindByPosition(423)'></room-block>
|
<room-block @edit='edit' class='mr1' :model='model1' :data='roomFindByNo(1)'></room-block>
|
|
</div>
|
<div class='flex flex-direction justify-between'
|
style='width: 300px;height: 420px;'>
|
<div class='flex'>
|
<room-block @edit='edit' class='mr1' :model='model0' :data='roomFindByNo(2)'></room-block>
|
<room-block @edit='edit' class='mr1' :model='model0' :data='roomFindByNo(3)'></room-block>
|
</div>
|
<div>
|
<div class='flex justify-between margin-bot-1' >
|
<room-block @edit='edit' :model='model2' :data='roomFindByNo(5)'></room-block>
|
<room-block @edit='edit' :model='model2' :data='roomFindByNo(7)'></room-block>
|
</div>
|
<div class='flex justify-between'>
|
<room-block @edit='edit' :model='model2' :data='roomFindByNo(6)'></room-block>
|
<room-block @edit='edit' :model='model2' :data='roomFindByNo(8)'></room-block>
|
</div>
|
|
</div>
|
|
</div>
|
<div class='flex' style='width: 600px;height: 420px;'>
|
<div class='solid' style='width: 300px;height: 420px' :style='`background-color:${room4.bgColor}`' @contextmenu.prevent="onContextmenu($event,room4)">
|
<div class='room-item flex justify-between flex2' style='width: 100%;height: 5%'>
|
<div class='item-left'>{{ room4.no }}</div>
|
<div class='item-right' v-if='room4.position'>{{ room4.position }}</div>
|
</div>
|
<div class='flex align-center justify-center wm' style='width: 100%;height: 100%;margin-top: -25px;white-space: pre-wrap;' v-html='room4.name'>
|
|
</div>
|
</div>
|
|
<div class='flex flex-direction ' style='width: 300px ;height: 420px'>
|
<div class='solid-top solid-right solid-bot flex justify-center align-center'
|
style='width: 100%;height: 40px;'>
|
洽谈区
|
</div>
|
<div class='flex' style='width: 300px ;height: 380px'>
|
<div style='width: 50px;height: 380px'>
|
<div style='width: 50px;height: 80px;'>
|
|
</div>
|
<div class='solid-top solid-right solid-bot wm flex justify-center align-center'
|
style='width: 50px;height: 300px'>
|
文件柜
|
</div>
|
|
</div>
|
|
<div style='width: 120px;height: 380px;margin-left: 10px'>
|
<div style='width: 120px;height: 20px'>
|
|
</div>
|
<div class='flex flex-direction justify-end' style='width: 120px;height: 360px'>
|
<room-block @edit='edit' class='margin-bot-1' :model='model2' :data='roomFindByNo(17)'></room-block>
|
<room-block @edit='edit' class='margin-bot-1' :model='model2' :data='roomFindByNo(18)'></room-block>
|
<room-block @edit='edit' :model='model2' :data='roomFindByNo(19)'></room-block>
|
</div>
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='flex flex-direction justify-between'
|
style='width: 240px;height: 420px;'>
|
<div class='flex'>
|
<room-block @edit='edit' class='' :model='model1' :data='roomFindByNo(22)'></room-block>
|
<room-block @edit='edit' class='' :model='model1' :data='roomFindByNo(23)'></room-block>
|
</div>
|
|
<div class='flex'>
|
<room-block @edit='edit' class='' :model='model2' :data='roomFindByNo(24)'></room-block>
|
<room-block @edit='edit' class='' :model='model2' :data='roomFindByNo(25)'></room-block>
|
</div>
|
|
<div class='flex flex-direction justify-center align-center'>
|
<div class='solid flex flex-direction justify-center align-center' style='width: 50%;height: 40px'>
|
文件柜
|
</div>
|
<div style='width: 50%;height: 40px'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 第二栏-->
|
<div class='flex' style='box-sizing: border-box;width: 1500px;height: 300px;'>
|
<div class='flex ' style='box-sizing: border-box;width: 360px;height: 300px;'>
|
|
|
</div>
|
|
<div class='flex flex-direction justify-end' style='width: 300px;height: 300px;'>
|
<div>
|
<div class='flex justify-between margin-bot-1'>
|
<room-block @edit='edit' :model='model2' :data='roomFindByNo(9)'></room-block>
|
<room-block @edit='edit' class='' :model='model2' :data='roomFindByNo(11)'></room-block>
|
</div>
|
<div class='flex justify-between'>
|
<room-block @edit='edit' :model='model2' :data='roomFindByNo(10)'></room-block>
|
<room-block @edit='edit' class='' :model='model2' :data='roomFindByNo(12)'></room-block>
|
</div>
|
|
</div>
|
</div>
|
<div class='flex align-end' style='width: 360px;height: 300px;'>
|
<div style='width: 360px'>
|
<div class='flex justify-between margin-bot-1'>
|
<room-block @edit='edit' :model='model2' :data='roomFindByNo(13)'></room-block>
|
<room-block @edit='edit' class='' :model='model2' :data='roomFindByNo(15)'></room-block>
|
</div>
|
<div class='flex justify-between'>
|
<room-block @edit='edit' :model='model2' :data='roomFindByNo(14)'></room-block>
|
<room-block @edit='edit' class='' :model='model2' :data='roomFindByNo(16)'></room-block>
|
</div>
|
|
</div>
|
|
</div>
|
<div class='flex align-end' style='width: 240px;height: 300px;'>
|
<div style='width: 240px'>
|
<div class='flex justify-between margin-bot-1 '>
|
<room-block @edit='edit' :model='model2' :data='roomFindByNo(20)'></room-block>
|
<div class='flex1'></div>
|
</div>
|
<div class='flex justify-between'>
|
<room-block @edit='edit' :model='model2' :data='roomFindByNo(21)'></room-block>
|
<div class='flex1'></div>
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style='width: 240px;height: 300px;'>
|
<div class='flex'>
|
<room-block @edit='edit' :model='model2' :data='roomFindByNo(26)'></room-block>
|
<room-block @edit='edit' class='' :model='model2' :data='roomFindByNo(27)'></room-block>
|
</div>
|
<div class='solid-left solid-right solid-bot' style='width: 240px;height: 180px' :style='`background-color:${room28.bgColor}`' @contextmenu.prevent="onContextmenu($event,room28)">
|
<div class='room-item flex justify-between flex2' style='width: 100%;height: 24px'>
|
<div class='item-left'>{{ room28.no }}</div>
|
<div class='item-right'>{{ room28.position }}</div>
|
</div>
|
<div class='flex align-center justify-center' style='width: 100%;height: 156px;white-space: pre-wrap;' v-html='room28.name'>
|
|
</div>
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 第三栏-->
|
<div class='flex' style='box-sizing: border-box;width: 1500px;height: 300px;'>
|
<div class='flex ' style='box-sizing: border-box;width: 240px;height: 300px;;'>
|
|
</div>
|
|
<div style='width: 900px;height: 300px;'>
|
<div class='flex' style='width: 900px;height: 100px;'>
|
<div class='flex flex-direction' style='width: 120px;height: 100%'>
|
<div style='width: 80px;' class='flex3 solid flex justify-center align-center margin-bot-1'>茶水间</div>
|
<div style='width: 80px;' class='flex2 solid flex justify-center align-center'>打印机</div>
|
|
</div>
|
|
<div class='room solid' style='width: 300px;height: 100px' :style='`background-color:${room29.bgColor}`' @contextmenu.prevent="onContextmenu($event,room29)">
|
<div class='room-item flex justify-between flex2'>
|
<div class='item-left'>{{ room29.no }}</div>
|
<div class='item-right'>{{ room29.position }}</div>
|
</div>
|
<div class='room-item flex justify-center align-center flex3'>
|
<div></div>
|
|
</div>
|
<div class='room-item flex justify-center align-center flex2'>
|
<div style='white-space: pre-wrap;' v-html='room29.name'></div>
|
|
</div>
|
<div class='room-item flex justify-center align-center flex2'>
|
<div></div>
|
|
</div>
|
<div class='flex1'>
|
<div></div>
|
|
</div>
|
</div>
|
|
<div class='solid-top solid flex justify-center align-center'
|
style='width: 240px;height: 80px'>
|
重点实验室
|
</div>
|
<div class='room solid ' style='width: 120px;height: 80px' :style='`background-color:${room412.bgColor}`' @contextmenu.prevent="onContextmenu($event,room412)">
|
<div class='room-item flex justify-between flex2'>
|
<div></div>
|
<div class='item-right'>{{ room412.position }}</div>
|
</div>
|
<div class='room-item flex justify-center align-center flex3'>
|
<div></div>
|
|
</div>
|
<div class='room-item flex justify-center align-center flex2'>
|
<div style='white-space: pre-wrap;' v-html='room412.name'></div>
|
|
</div>
|
<div class='room-item flex justify-center align-center flex2'>
|
<div></div>
|
|
</div>
|
<div class='flex1'>
|
<div></div>
|
|
</div>
|
</div>
|
|
<div class='room solid' style='width: 120px;height: 80px' :style='`background-color:${room414.bgColor}`' @contextmenu.prevent="onContextmenu($event,room414)">
|
<div class='room-item flex justify-between flex2'>
|
<div></div>
|
<div class='item-right'>{{ room414.position }}</div>
|
</div>
|
<div class='room-item flex justify-center align-center flex3'>
|
<div></div>
|
|
</div>
|
<div class='room-item flex justify-center align-center flex2'>
|
<div style='white-space: pre-wrap;' v-html='room414.name'></div>
|
|
</div>
|
<div class='room-item flex justify-center align-center flex2'>
|
<div></div>
|
|
</div>
|
<div class='flex1'>
|
<div></div>
|
|
</div>
|
</div>
|
|
|
</div>
|
<div class='flex' style='width: 900px;height: 80px;'>
|
|
|
</div>
|
<div class='flex' style='width: 900px;height: 120px;'>
|
|
<div class='room flex flex-direction solid' style='width: 120px;height: 120px' :style='`background-color:${room35.bgColor}`' @contextmenu.prevent="onContextmenu($event,room35)">
|
|
<div class='room-item flex justify-between flex2'>
|
<div style='font-size: 10px;'>
|
<div>{{ findDataBySeat(room35.userList, '1', 'realname') }}</div>
|
<div>{{ findDataBySeat(room35.userList, '1', 'seatPhone') }}</div>
|
</div>
|
<div>{{ room35.no }}</div>
|
<div>
|
<div style='font-size: 10px;'>
|
<div>{{ findDataBySeat(room35.userList, '2', 'realname') }}</div>
|
<div>{{ findDataBySeat(room35.userList, '2', 'seatPhone') }}</div>
|
</div>
|
|
</div>
|
</div>
|
<div class='flex align-center justify-center flex3'>
|
<div style='white-space: pre-wrap;' v-html='room35.name'></div>
|
</div>
|
<div class='room-item flex justify-between flex2'>
|
<div style='font-size: 10px;'>
|
<div>{{ findDataBySeat(room35.userList, '3', 'realname') }}</div>
|
<div>{{ findDataBySeat(room35.userList, '3', 'seatPhone') }}</div>
|
</div>
|
<div style='font-size: 10px;'>
|
<div>{{ findDataBySeat(room35.userList, '4', 'realname') }}</div>
|
<div>{{ findDataBySeat(room35.userList, '4', 'seatPhone') }}</div>
|
</div>
|
</div>
|
|
</div>
|
|
|
<div class='room solid ' style='width: 130px;height: 120px' :style='`background-color:${room34.bgColor}`' @contextmenu.prevent="onContextmenu($event,room34)">
|
<div class='room-item flex justify-between flex2'>
|
<div class='item-left'>{{ room34.no }}</div>
|
<div class='item-right'>{{ room34.position }}</div>
|
</div>
|
<div class='room-item flex justify-center align-center flex3'>
|
<div style='white-space: pre-wrap;' v-html='room34.name'></div>
|
</div>
|
<div class='room-item flex justify-center align-center flex2'>
|
<div>{{ findDataBySeat(room34.userList, '1', 'realname') }}</div>
|
|
</div>
|
<div class='room-item flex justify-center align-center flex2'>
|
<div>{{ findDataBySeat(room34.userList, '1', 'seatPhone') }}</div>
|
|
</div>
|
<div class='flex1'>
|
<div></div>
|
|
</div>
|
</div>
|
|
<div class='room solid ' style='width: 130px;height: 120px' :style='`background-color:${room33.bgColor}`' @contextmenu.prevent="onContextmenu($event,room33)">
|
<div class='room-item flex justify-between flex2'>
|
<div class='item-left'>{{ room33.no }}</div>
|
<div class='item-right'>{{ room33.position }}</div>
|
</div>
|
<div class='room-item flex justify-center align-center flex3'>
|
<div style='white-space: pre-wrap;' v-html='room33.name'></div>
|
|
</div>
|
<div class='room-item flex justify-center align-center flex2'>
|
<div>{{ findDataBySeat(room33.userList, '1', 'realname') }}</div>
|
|
</div>
|
<div class='room-item flex justify-center align-center flex2'>
|
<div>{{ findDataBySeat(room33.userList, '1', 'seatPhone') }}</div>
|
|
</div>
|
<div class='flex1'>
|
<div></div>
|
|
</div>
|
</div>
|
|
<div class='room solid ' style='width: 130px;height: 120px' :style='`background-color:${room32.bgColor}`' @contextmenu.prevent="onContextmenu($event,room32)">
|
<div class='room-item flex justify-between flex2'>
|
<div class='item-left'>{{ room32.no }}</div>
|
<div class='item-right'>{{ room32.position }}</div>
|
</div>
|
<div class='room-item flex justify-center align-center flex3'>
|
<div style='white-space: pre-wrap;' v-html='room32.name'></div>
|
|
</div>
|
<div class='room-item flex justify-center align-center flex2'>
|
<div>{{ findDataBySeat(room32.userList, '1', 'realname') }}</div>
|
|
</div>
|
<div class='room-item flex justify-center align-center flex2'>
|
<div>{{ findDataBySeat(room32.userList, '1', 'seatPhone') }}</div>
|
|
</div>
|
<div class='flex1'>
|
<div></div>
|
|
</div>
|
</div>
|
|
<div class='room solid ' style='width: 280px;height: 160px;margin-top:-40px' :style='`background-color:${room31.bgColor}`' @contextmenu.prevent="onContextmenu($event,room31)">
|
<div class='room-item flex justify-between flex2'>
|
<div class='item-left'>{{ room31.no }}</div>
|
<div class='item-right'>{{ room31.position }}</div>
|
</div>
|
<div class='room-item flex justify-center align-center flex3'>
|
<div style='white-space: pre-wrap;' v-html='room31.name'></div>
|
|
</div>
|
<div class='room-item flex justify-center align-center flex2'>
|
<div>{{ findDataBySeat(room31.userList, '1', 'realname') }}</div>
|
|
</div>
|
<div class='room-item flex justify-center align-center flex2'>
|
<div>{{ findDataBySeat(room31.userList, '1', 'seatPhone') }}</div>
|
|
</div>
|
<div class='flex1'>
|
<div></div>
|
|
</div>
|
</div>
|
|
<div class='room flex flex-direction solid' style='width: 120px;height: 160px;margin-top:-40px' :style='`background-color:${room30.bgColor}`' @contextmenu.prevent="onContextmenu($event,room30)">
|
<div class='room-item flex justify-between' style='height: 24px'>
|
<div class='item-left'>{{ room30.no }}</div>
|
<div class='item-right'>{{ room30.position }}</div>
|
</div>
|
|
<div class='room-item flex justify-between flex2'>
|
<div style='font-size: 10px;'>
|
<div>{{ findDataBySeat(room30.userList, '1', 'realname') }}</div>
|
<div>{{ findDataBySeat(room30.userList, '1', 'seatPhone') }}</div>
|
</div>
|
<div style='white-space: pre-wrap;' v-html='room30.name'></div>
|
<div>
|
<div style='font-size: 10px;'>
|
<div>{{ findDataBySeat(room30.userList, '2', 'realname') }}</div>
|
<div>{{ findDataBySeat(room30.userList, '2', 'seatPhone') }}</div>
|
</div>
|
|
</div>
|
</div>
|
<div class='room-item flex justify-between flex2'>
|
<div style='font-size: 10px;'>
|
<div>{{ findDataBySeat(room30.userList, '3', 'realname') }}</div>
|
<div>{{ findDataBySeat(room30.userList, '3', 'seatPhone') }}</div>
|
</div>
|
<div style='font-size: 10px;'>
|
<div>{{ findDataBySeat(room30.userList, '4', 'realname') }}</div>
|
<div>{{ findDataBySeat(room30.userList, '4', 'seatPhone') }}</div>
|
</div>
|
</div>
|
<div class='room-item flex justify-between flex2'>
|
<div style='font-size: 10px;'>
|
<div>{{ findDataBySeat(room30.userList, '5', 'realname') }}</div>
|
<div>{{ findDataBySeat(room30.userList, '5', 'seatPhone') }}</div>
|
</div>
|
<div style='font-size: 10px;'>
|
<div>{{ findDataBySeat(room30.userList, '6', 'realname') }}</div>
|
<div>{{ findDataBySeat(room30.userList, '6', 'seatPhone') }}</div>
|
</div>
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='flex ' style='box-sizing: border-box;width: 360px;height: 300px;'>
|
<div style='width:120px'></div>
|
<div class='solid-left solid-right solid-bot' style='width:240px'>
|
<div style='margin: 10px 0'>合计{{total}}人</div>
|
<div>
|
<div style='text-align: left;margin: 4px 0' v-for="(coll, index) in collectList" :key="index">
|
{{index + 1}}. {{coll.name}} : {{coll.value}} 人
|
</div>
|
|
</div>
|
</div>
|
|
</div>
|
</div>
|
|
|
</div>
|
</div>
|
</scale-view>
|
|
|
<room-seat-modal ref='roomSeatModal' @ok='roomSeatOk'></room-seat-modal>
|
</div>
|
</template>
|
|
<script>
|
import ScaleView from '@comp/ZmTreeOrg/components/tree-org/scale-view'
|
import RoomBlock from '@views/hrm/modules/RoomBlock'
|
import { getAction } from '@api/manage'
|
import RoomSeatModal from '@views/hrm/modules/RoomSeatModal'
|
|
export default {
|
components: { RoomSeatModal, RoomBlock, ScaleView },
|
data() {
|
return {
|
basic_width: 100,
|
basic_height: 100,
|
basic_gap: 80,
|
basic_aisle: 80,
|
roomList: [],
|
collectList: [],
|
model0: {
|
type: 0
|
},
|
model1: {
|
type: 1
|
},
|
model2: {
|
type: 2
|
}
|
}
|
},
|
mounted() {
|
this.queryRoomUserList()
|
},
|
methods: {
|
roomSeatOk() {
|
this.queryRoomUserList()
|
},
|
edit(item){
|
console.info(item)
|
this.$refs.roomSeatModal.add(item)
|
},
|
queryRoomUserList() {
|
let params = { pageNo: 1, pageSize: 1000 }
|
getAction('hrm/room/list', params).then((res) => {
|
if (res.success) {
|
this.roomList = res.result.records
|
this.collectUserByDep()
|
}
|
console.info(res)
|
|
})
|
},
|
collectUserByDep(){
|
const roomList = this.roomList.filter(item=>item.departName != null)
|
const groupedData = roomList.reduce((result, obj) => {
|
const fieldValue = obj.departName;
|
if (!result[fieldValue]) {
|
result[fieldValue] = [];
|
}
|
result[fieldValue].push(obj);
|
return result;
|
}, {});
|
let res = []
|
Object.keys(groupedData).forEach(function (key) {
|
let item = {}
|
item.name = key
|
item.value = groupedData[key].reduce((accumulator, obj) => {
|
return accumulator + obj.userList.length;
|
}, 0);
|
item.sort = groupedData[key][0].sort
|
res.push(item);
|
});
|
res.sort((a, b) => a.sort - b.sort);
|
this.collectList = res
|
|
},
|
|
|
roomFindByNo(no) {
|
const res = this.roomList.find(item => item.no == no)
|
return res ? res : {}
|
},
|
roomFindByPosition(position) {
|
const res = this.roomList.find(item => item.position == position)
|
return res ? res : {}
|
},
|
findDataBySeat(userList, seatNo, colmun) {
|
if (userList) {
|
const res = userList.find(item => item.seatNo == seatNo)
|
return res ? res[colmun] : ''
|
}
|
},
|
onContextmenu(event,data) {
|
this.$contextmenu({
|
items: [
|
{
|
label: "编辑",
|
divided: true,
|
icon:"el-icon-edit",
|
onClick: () => {
|
this.edit(data);
|
}
|
},
|
{ label: "重新加载(R)", icon: "el-icon-refresh" },
|
|
],
|
event,
|
//x: event.clientX,
|
//y: event.clientY,
|
customClass: "custom-class",
|
zIndex: 3,
|
minWidth: 230
|
});
|
return false;
|
}
|
|
},
|
computed: {
|
room4() {
|
return this.roomFindByNo(4)
|
},
|
room28() {
|
return this.roomFindByNo(28)
|
},
|
room29() {
|
return this.roomFindByNo(29)
|
},
|
room30() {
|
return this.roomFindByNo(30)
|
},
|
room31() {
|
return this.roomFindByNo(31)
|
},
|
room32() {
|
return this.roomFindByNo(32)
|
},
|
room33() {
|
return this.roomFindByNo(33)
|
},
|
room34() {
|
return this.roomFindByNo(34)
|
},
|
room35() {
|
return this.roomFindByNo(35)
|
},
|
|
room412() {
|
return this.roomFindByPosition(412)
|
},
|
room414() {
|
return this.roomFindByPosition(414)
|
},
|
total(){
|
return this.collectList.reduce((accumulator, obj) => {
|
return accumulator + obj.value;
|
}, 0);
|
}
|
}
|
}
|
</script>
|
|
<style lang='less' scoped>
|
@import "./modules/seat";
|
// 定义变量
|
@div-width: 200px;
|
.app {
|
width: 100%;
|
height: 1200px;
|
}
|
|
.content {
|
}
|
|
.container {
|
display: flex;
|
flex-direction: column;
|
}
|
|
|
</style>
|
|
