Skip to content

R
rongtong-app
Commit 10dcb296 authored by dlkong's avatar dlkong
Browse files
Options

Merge branch 'dev_kdl' into develop

parents 5e8779c6 31876529
Hide whitespace changes
Inline Side-by-side
Showing with 205 additions and 73 deletions
src/views/drawCanvas/riskView.vue
View file @ 10dcb296
<template>
<div class="wrap" ref="mapmidbox">
<!-- <div class="layoutJSON">
名称<code>[x, y, w, h]</code>:
<div class="columns">
<div class="layoutItem" v-for="item in layout" :key="item.i">
<b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
</div>
</div>
</div> -->
<div class="setBtns">
<button @click="addItem">增加</button>
<button @click="restItem">重置</button>
<!-- <input type="checkbox" v-model="draggable" /> 拖拽 -->
<!-- <input type="checkbox" v-model="resizable" /> 大小 -->
</div>
<van-sticky>
<header class="header">
<span @click="close" class="iconLeft"> 关闭</span>
<span>{{text}}</span>
<span @click="confim" class="iconRight" v-show="!isView">确定</span>
<span class="iconRight" v-show="isView"></span>
</header>
</van-sticky>
<grid-layout :layout.sync="layout"
:col-num="colNum"
:row-height="30"
:is-draggable="draggable"
:is-resizable="resizable"
:vertical-compact="false"
:use-css-transforms="true"
:prevent-collision="false"
:preventCollision="true"
>
<grid-item v-for="item in layout"
:static="item.static"
......@@ -31,25 +24,54 @@
:h="item.h"
:i="item.i"
:key="item.i"
:isDraggable="item.isDraggable"
:isResizable="item.isResizable"
@resized="resizedEvent"
@moved="movedEvent"
:style="{'backgroundColor':item.c,}"
>
<span class="text">{{item.i}}</span>
<span class="remove" @click="removeItem(item.i)">x</span>
<span class="text">{{item.name}}</span>
<span class="remove" @click="removeItem(item.i)" v-if="!item.i">x</span>
</grid-item>
</grid-layout>
<van-grid direction="horizontal" :column-num="2" class="footer">
风险等级图例:
<span class="riskTab type1"></span>重大风险
<span class="riskTab type2"></span>较大风险
<span class="riskTab type3"></span>一般风险
<span class="riskTab type4"></span>较小风险
</van-grid>
<div class="setBtns">
<van-button @click="addItem" type="info" size="mini" v-if="!isView">添加房间</van-button>
<van-grid direction="horizontal" :column-num="2" class="footer">
风险等级图例:
<span class="riskTab type1"></span>重大风险
<span class="riskTab type2"></span>较大风险
<span class="riskTab type3"></span>一般风险
<span class="riskTab type4"></span>较小风险
</van-grid>
</div>
<van-dialog v-model="show" title="创建房间" show-cancel-button @confirm="saveRoomName">
<van-cell-group>
<van-field v-model="roomName" label="房间名称" placeholder="请输入房间名称" />
<van-field
readonly
clickable
label="房间类型"
:value="roomType"
placeholder="选择房间类型"
@click="showPicker = true"
/>
<van-popup v-model="showPicker" round position="bottom">
<van-picker
show-toolbar
:columns="columns"
@cancel="showPicker = false"
@confirm="onConfirm"
/>
</van-popup>
</van-cell-group>
</van-dialog>
</div>
</template>
<script>
import { GridLayout, GridItem } from "vue-grid-layout"
import screenfull from "screenfull";
import { Toast } from 'vant';
import { getFun, postFun } from "@/service/table.js";
// 动态添加/删除
export default {
......@@ -60,27 +82,35 @@ export default {
},
data() {
return {
text:'房间位置绘制工具',
layout: [
{ x: 0, y: 0, w: 2, h: 3, i: "办公室1",c:'#FF4433'},
{ x: 2, y: 0, w: 2, h: 3, i: "办公室2",c:'#FF9800'},
{ x: 4, y: 0, w: 2, h: 3, i: "办公室3",c:'#FFFF00'},
{ x: 6, y: 0, w: 2, h: 3, i: "办公室4",c:'#0091EA'},
{ x: 0, y: 3, w: 2, h: 3, i: "办公室5",c:'#FF4433'},
// { x: 0, y: 0, w: 2, h: 3, i: "1",name: "办公室1",c:'#FF4433',isDraggable:false,isResizable:false,},
// { x: 2, y: 0, w: 2, h: 3, i: "2",name: "办公室2",c:'#FF9800',isDraggable:false,isResizable:false},
// { x: 4, y: 0, w: 2, h: 3, i: "3",name: "办公室2",c:'#FFFF00',isDraggable:false,isResizable:false},
// { x: 6, y: 0, w: 2, h: 3, i: "4",name: "办公室2",c:'#0091EA',isDraggable:false,isResizable:false},
// { x: 0, y: 3, w: 2, h: 3, i: "5",name: "办公室2",c:'#FF4433',isDraggable:false,isResizable:false},
],
draggable: true,
draggable: false,
resizable: true,
colNum: 16,
index: 0,
colNum: 12,
isScreenFull :null,
layOutItem:{},//新增的房间对象
show:false,
showPicker: false,
roomType:'',
roomName:'',
columns: ['办公', '餐饮', '住宅', '超市'],
colorList:['#FF4433','#FF9800','#FFFF00','#0091EA'],
isView:true,// true:查看页面； false: 添加页面
}
},
mounted() {
// this.$gridlayout.load();
this.index = this.layout.length;
// screenfull.toggle(this.$refs.mapbox);
this.$nextTick(() => {
// this.$nextTick(() => {
// this.rotateBox();
});
// });
this.isView = this.$route.params.isView? true : false
this.getRoomInfo()
},
methods: {
rotateBox() {
......@@ -111,40 +141,111 @@ export default {
}
wrapper.style.cssText = style;
},
getRoomInfo(){
let data = {
floorId: this.$route.params.floorId ? this.$route.params.floorId : '18'
}
getFun('/ledger/room/list',data).then((res) => {
if (res.code == 200) {
this.layout = []
res.rows.forEach((item) => {
item.position = JSON.parse(item.position)
item.position.i = item.id
item.position.isDraggable = false
item.position.isResizable = false
if (!this.isView) { //添加页面不显示颜色
item.position.c = '#eee'
}else{
item.position.c = this.colorList[Math.floor(Math.random()*4)]
}
this.layout.push(item.position)
})
console.log('layout==>>',this.layout)
}
}).catch((err) => {
console.log('err==>>',err)
})
},
// 增加
addItem: function () {
this.layout.push({
x: (this.layout.length * 2) % (this.colNum || 12),
y: this.layout.length + (this.colNum/2 || 12), // puts it at the bottom
w: 2,
h: 3,
i: '办公室' + (this.index +1),
c: '#eee'
});
this.index++;
console.log('this.layout==>>',this.layout)
},
// 重置
restItem(){
this.layout = [
{ x: 0, y: 0, w: 2, h: 3, i: "办公室1",c:'#FF4433'},
{ x: 2, y: 0, w: 2, h: 3, i: "办公室2",c:'#FF9800'},
{ x: 4, y: 0, w: 2, h: 3, i: "办公室3",c:'#FFFF00'},
{ x: 6, y: 0, w: 2, h: 3, i: "办公室4",c:'#0091EA'},
{ x: 0, y: 2, w: 2, h: 3, i: "办公室5",c:'#FF4433'},
]
if (this.layout.find((item) => item.i == '')) {
Toast.fail({
title: '提示',
forbidClick: true,
message: '一次只能增加一个房间',
})
return
}
this.roomType = ''
this.roomName = ''
this.show = true
},
// 删除
removeItem: function (val) {
const index = this.layout.map(item => item.i).indexOf(val);
this.layout.splice(index, 1);
// const index = this.layout.map(item => item.i).indexOf(val);
// this.layout.splice(index, 1);
postFun('/ledger/room/delete/'+val).then((res) => {
if (res.code == 200) {
Toast.success('删除成功');
this.getRoomInfo()
}
}).catch((err) => {
console.log('err==>>',err)
})
},
// 移动后的事件
movedEvent(i, newX, newY){
this.layOutItem.x = newX
this.layOutItem.y = newY
console.log('layOutItem==>>',this.layOutItem)
},
// 调整大小后的事件
resizedEvent: function(i, newH, newW){
this.layOutItem.w = newW
this.layOutItem.h = newH
console.log('layOutItem==>>',this.layOutItem)
},
//关闭
close(){
history.go(-1)
},
// 确定 保存房间信息
confim(){
let data = {
floorId: this.$route.params.floorId ? this.$route.params.floorId : '18',
name:this.roomName,
position: JSON.stringify(this.layOutItem),
roomType: this.roomType
}
postFun('/ledger/room/save', data).then((res) => {
if (res.code == 200) {
Toast.success('提交成功');
this.getRoomInfo()
}
}).catch((err) => {
console.log('err==>>',err)
})
},
//保存房间名称
saveRoomName(){
this.layOutItem = {
x: (this.layout.length * 2) % (this.colNum || 12),
y: this.layout.length + (this.colNum/2 || 12),
w: 2,
h: 3,
i: '',
name: this.roomName,
c: '#eee',
type:this.roomType,
isDraggable:true,
isResizable:true
}
this.layout.push(this.layOutItem)
console.log('layOutItem==>>',this.layOutItem)
},
rgbColor(){//rgb颜色随机
const r = Math.floor(Math.random()*256);
const g = Math.floor(Math.random()*256);
const b = Math.floor(Math.random()*256);
return `rgb(${r},${g},${b})`;
onConfirm(value) {
this.roomType = value;
this.showPicker = false;
},
}
}
......@@ -158,9 +259,9 @@ export default {
transform-origin: bottom left; */
}
.footer{
position: fixed;
left: 0;
bottom: 0;
/* position: fixed; */
/* left: 0; */
/* bottom: 0; */
font-size: 0.3rem;
font-weight: 600;
}
......@@ -197,13 +298,18 @@ export default {
/*************************************/
.setBtns{
position: fixed;
left: 0;
bottom: 0;
font-size: 0.3rem;
padding: 10px;
vertical-align: middle;
display: flex;
align-items: center;
align-items: flex-start;
flex-direction: column;
}
.setBtns input, .setBtns button{
margin-left: 15px;
.setBtns .van-button--mini{
padding: 0 10px;
}
.remove {
position: absolute;
......@@ -218,7 +324,7 @@ export default {
container-type: inline-size;
}
.vue-grid-layout {
background: #eee;
background: #f0f1f5;
}
.vue-grid-item:not(.vue-grid-placeholder) {
......@@ -277,5 +383,31 @@ export default {
box-sizing: border-box;
cursor: pointer;
}
.header{
width:100%;
height:1.2rem;
background:#2980F7;
text-align: center;
line-height: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.iconLeft{
color: white;
font-size: 12px;
transform: scale(0.8);
}
.header span{
color: white;
font-size: 16px;
line-height: 1.2rem;
margin: auto;
font-family: 'Microsoft YaHei';
}
.iconRight{
color: white;
font-size: 12px;
transform: scale(0.8);
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment