Skip to content

R
rongtong-app
You need to sign in or sign up before continuing.
Commit 019786f5 authored by yf's avatar yf
Browse files
Options

Merge branch 'develop' of http://git.censoft.com.cn/rongtong/rongtong-app into dev-yf'

parents 1b8896a3 10dcb296
Hide whitespace changes
Inline Side-by-side
Showing with 205 additions and 73 deletions
src/views/drawCanvas/riskView.vue
View file @ 019786f5
<template> <template>
<div class="wrap" ref="mapmidbox"> <div class="wrap" ref="mapmidbox">
<!-- <div class="layoutJSON"> <van-sticky>
名称<code>[x, y, w, h]</code>: <header class="header">
<div class="columns"> <span @click="close" class="iconLeft"> 关闭</span>
<div class="layoutItem" v-for="item in layout" :key="item.i"> <span>{{text}}</span>
<b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}] <span @click="confim" class="iconRight" v-show="!isView">确定</span>
</div> <span class="iconRight" v-show="isView"></span>
</div> </header>
</div> --> </van-sticky>
<div class="setBtns">
<button @click="addItem">增加</button>
<button @click="restItem">重置</button>
<!-- <input type="checkbox" v-model="draggable" /> 拖拽 -->
<!-- <input type="checkbox" v-model="resizable" /> 大小 -->
</div>
<grid-layout :layout.sync="layout" <grid-layout :layout.sync="layout"
:col-num="colNum" :col-num="colNum"
:row-height="30" :row-height="30"
:is-draggable="draggable"
:is-resizable="resizable"
:vertical-compact="false" :vertical-compact="false"
:use-css-transforms="true" :use-css-transforms="true"
:prevent-collision="false" :prevent-collision="false"
:preventCollision="true"
> >
<grid-item v-for="item in layout" <grid-item v-for="item in layout"
:static="item.static" :static="item.static"
...@@ -31,25 +24,54 @@ ...@@ -31,25 +24,54 @@
:h="item.h" :h="item.h"
:i="item.i" :i="item.i"
:key="item.i" :key="item.i"
:isDraggable="item.isDraggable"
:isResizable="item.isResizable"
@resized="resizedEvent"
@moved="movedEvent"
:style="{'backgroundColor':item.c,}" :style="{'backgroundColor':item.c,}"
> >
<span class="text">{{item.i}}</span> <span class="text">{{item.name}}</span>
<span class="remove" @click="removeItem(item.i)">x</span> <span class="remove" @click="removeItem(item.i)" v-if="!item.i">x</span>
</grid-item> </grid-item>
</grid-layout> </grid-layout>
<van-grid direction="horizontal" :column-num="2" class="footer"> <div class="setBtns">
风险等级图例: <van-button @click="addItem" type="info" size="mini" v-if="!isView">添加房间</van-button>
<span class="riskTab type1"></span>重大风险 <van-grid direction="horizontal" :column-num="2" class="footer">
<span class="riskTab type2"></span>较大风险 风险等级图例:
<span class="riskTab type3"></span>一般风险 <span class="riskTab type1"></span>重大风险
<span class="riskTab type4"></span>较小风险 <span class="riskTab type2"></span>较大风险
</van-grid> <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> </div>
</template> </template>
<script> <script>
import { GridLayout, GridItem } from "vue-grid-layout" import { GridLayout, GridItem } from "vue-grid-layout"
import screenfull from "screenfull"; import screenfull from "screenfull";
import { Toast } from 'vant';
import { getFun, postFun } from "@/service/table.js"; import { getFun, postFun } from "@/service/table.js";
// 动态添加/删除 // 动态添加/删除
export default { export default {
...@@ -60,27 +82,35 @@ export default { ...@@ -60,27 +82,35 @@ export default {
}, },
data() { data() {
return { return {
text:'房间位置绘制工具',
layout: [ layout: [
{ x: 0, y: 0, w: 2, h: 3, i: "办公室1",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",c:'#FF9800'}, // { 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",c:'#FFFF00'}, // { 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",c:'#0091EA'}, // { 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",c:'#FF4433'}, // { x: 0, y: 3, w: 2, h: 3, i: "5",name: "办公室2",c:'#FF4433',isDraggable:false,isResizable:false},
], ],
draggable: true, draggable: false,
resizable: true, resizable: true,
colNum: 16, colNum: 12,
index: 0,
isScreenFull :null, isScreenFull :null,
layOutItem:{},//新增的房间对象
show:false,
showPicker: false,
roomType:'',
roomName:'',
columns: ['办公', '餐饮', '住宅', '超市'],
colorList:['#FF4433','#FF9800','#FFFF00','#0091EA'],
isView:true,// true:查看页面； false: 添加页面
} }
}, },
mounted() { mounted() {
// this.$gridlayout.load();
this.index = this.layout.length;
// screenfull.toggle(this.$refs.mapbox); // screenfull.toggle(this.$refs.mapbox);
this.$nextTick(() => { // this.$nextTick(() => {
// this.rotateBox(); // this.rotateBox();
}); // });
this.isView = this.$route.params.isView? true : false
this.getRoomInfo()
}, },
methods: { methods: {
rotateBox() { rotateBox() {
...@@ -111,40 +141,111 @@ export default { ...@@ -111,40 +141,111 @@ export default {
} }
wrapper.style.cssText = style; 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 () { addItem: function () {
this.layout.push({ if (this.layout.find((item) => item.i == '')) {
x: (this.layout.length * 2) % (this.colNum || 12), Toast.fail({
y: this.layout.length + (this.colNum/2 || 12), // puts it at the bottom title: '提示',
w: 2, forbidClick: true,
h: 3, message: '一次只能增加一个房间',
i: '办公室' + (this.index +1), })
c: '#eee' return
}); }
this.index++; this.roomType = ''
console.log('this.layout==>>',this.layout) this.roomName = ''
}, this.show = true
// 重置
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'},
]
}, },
// 删除 // 删除
removeItem: function (val) { removeItem: function (val) {
const index = this.layout.map(item => item.i).indexOf(val); // const index = this.layout.map(item => item.i).indexOf(val);
this.layout.splice(index, 1); // 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颜色随机 onConfirm(value) {
const r = Math.floor(Math.random()*256); this.roomType = value;
const g = Math.floor(Math.random()*256); this.showPicker = false;
const b = Math.floor(Math.random()*256);
return `rgb(${r},${g},${b})`;
}, },
} }
} }
...@@ -158,9 +259,9 @@ export default { ...@@ -158,9 +259,9 @@ export default {
transform-origin: bottom left; */ transform-origin: bottom left; */
} }
.footer{ .footer{
position: fixed; /* position: fixed; */
left: 0; /* left: 0; */
bottom: 0; /* bottom: 0; */
font-size: 0.3rem; font-size: 0.3rem;
font-weight: 600; font-weight: 600;
} }
...@@ -197,13 +298,18 @@ export default { ...@@ -197,13 +298,18 @@ export default {
/*************************************/ /*************************************/
.setBtns{ .setBtns{
position: fixed;
left: 0;
bottom: 0;
font-size: 0.3rem;
padding: 10px; padding: 10px;
vertical-align: middle; vertical-align: middle;
display: flex; display: flex;
align-items: center; align-items: flex-start;
flex-direction: column;
} }
.setBtns input, .setBtns button{ .setBtns .van-button--mini{
margin-left: 15px; padding: 0 10px;
} }
.remove { .remove {
position: absolute; position: absolute;
...@@ -218,7 +324,7 @@ export default { ...@@ -218,7 +324,7 @@ export default {
container-type: inline-size; container-type: inline-size;
} }
.vue-grid-layout { .vue-grid-layout {
background: #eee; background: #f0f1f5;
} }
.vue-grid-item:not(.vue-grid-placeholder) { .vue-grid-item:not(.vue-grid-placeholder) {
...@@ -277,5 +383,31 @@ export default { ...@@ -277,5 +383,31 @@ export default {
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; 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> </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