Merge branch 'dev_kdl' into develop (10dcb296) · Commits · 融通安全管理系统 / rongtong-app · GitLab

src/views/drawCanvas/riskView.vue

+205 −73

Original line number	Diff line number	Diff line
		<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,12 +24,18 @@
		: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>
		<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>重大风险
		@@ -45,11 +44,34 @@
		<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)
		})
		},
		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})`;
		//保存房间名称
		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)
		},
		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