Skip to content

R
rongtong-app
Commit 6dc73443 authored by wei's avatar wei
Browse files
Options

Merge branch 'develop' into dev-lv

parents 3fd739cf 64add9e0
Show whitespace changes
Inline Side-by-side
Showing with 100 additions and 23 deletions
src/views/drawCanvas/riskView.vue
View file @ 6dc73443
<template>
<div class="wrap" ref="mapmidbox">
<van-sticky>
<van-sticky v-if="showHeader">
<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>
<span @click="confim" class="iconRight" v-show="!isViews">确定</span>
<span class="iconRight" v-show="isViews"></span>
</header>
</van-sticky>
<grid-layout :layout.sync="layout"
......@@ -35,8 +35,8 @@
</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">
<van-button @click="addItem" type="info" size="mini" v-if="!isViews">添加房间</van-button>
<van-grid direction="horizontal" :column-num="2" class="footer" v-if="isViews">
风险等级图例:
<span class="riskTab type1"></span>重大风险
<span class="riskTab type2"></span>较大风险
......@@ -101,44 +101,99 @@ export default {
roomName:'',
columns: ['办公', '餐饮', '住宅', '超市'],
colorList:['#FF4433','#FF9800','#FFFF00','#0091EA'],
isView:true,// true:查看页面； false: 添加页面
isViews:false,// true:查看页面； false: 添加页面
showHeader:true
}
},
props:{
isView: {
type: Boolean,
default: false,
},
},
mounted() {
// screenfull.toggle(this.$refs.mapbox);
// this.$nextTick(() => {
this.$nextTick(() => {
// this.rotateBox();
// });
this.isView = this.$route.params.isView? true : false
this.initRotate();
});
if (this._props.isView) {
console.log('作为组件传值==>>',)
this.isViews = true
this.showHeader = false
}
if (this.$route.params.isView) {
this.isViews = true
}
this.getRoomInfo()
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", this.orientationChange, false);
},
methods: {
orientationChange(){
if (window.orientation === 180 || window.orientation === 0) {
console.log('竖屏状态！');
}
if (window.orientation === 90 || window.orientation === -90 ){
console.log('横屏状态！');
}
// let width = document.documentElement.clientWidth//页面宽度
// let height = document.documentElement.clientHeight//页面高度
// console.log('width==>>',width)
// console.log('height==>>',height)
this.rotateBox()
},
initRotate(){
let width = document.documentElement.clientWidth,//页面宽度
height = document.documentElement.clientHeight,//页面高度
wrapper = this.$refs.mapmidbox,//需要横屏的块，与全屏的块要区分开，不区分全屏的块无法显示横屏效果
style = "";//样式
console.log('width==>>',width)
console.log('height==>>',height)
style += "width:" + height + "px;";
style += "height:" + width + "px;";
style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
// 注意旋转中点的处理
style +=
"-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
wrapper.style.cssText = style;
},
rotateBox() {
this.isScreenFull = !this.isScreenFull;//是否全屏状态
let width = document.documentElement.clientWidth,//页面宽度
height = document.documentElement.clientHeight,//页面高度
wrapper = this.$refs.mapmidbox,//需要横屏的块，与全屏的块要区分开，不区分全屏的块无法显示横屏效果
style = "";//样式
if (height < width) {//注意原来就是宽屏时不用横屏
return;
}
if (this.isScreenFull) {
console.log('width==>>',width)
console.log('height==>>',height)
// if (height < width) {//注意原来就是宽屏时不用横屏
// return;
// }
if (height < width) {
// 横屏
style += "width:" + height + "px;";
style += "height:" + width + "px;";
style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
style += "-webkit-transform: rotate(0deg); transform: rotate(0deg);";
// 注意旋转中点的处理
style +=
"-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
} else {
// 竖屏
// style += "width:" + height + "px;";
// style += "height:" + width + "px;";
// style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
// // 注意旋转中点的处理
// style +=
// "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
// style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
style += "width:100%";
style += "height:100%;";
style += "-webkit-transform: rotate(0); transform: rotate(0);";
style += "-webkit-transform-origin: 0 0;";
style += "transform-origin: 0 0;";
}
console.log('style==>>',style)
wrapper.style.cssText = style;
},
getRoomInfo(){
......@@ -153,14 +208,14 @@ export default {
item.position.i = item.id
item.position.isDraggable = false
item.position.isResizable = false
if (!this.isView) { //添加页面不显示颜色
if (!this.isViews) { //添加页面不显示颜色
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)
// console.log('layout==>>',this.layout)
}
}).catch((err) => {
console.log('err==>>',err)
......@@ -182,8 +237,11 @@ export default {
},
// 删除
removeItem: function (val) {
// const index = this.layout.map(item => item.i).indexOf(val);
// this.layout.splice(index, 1);
if (val == '') {
const index = this.layout.map(item => item.i).indexOf(val);
this.layout.splice(index, 1);
return
}
postFun('/ledger/room/delete/'+val).then((res) => {
if (res.code == 200) {
Toast.success('删除成功');
......@@ -211,6 +269,14 @@ export default {
},
// 确定 保存房间信息
confim(){
if (this.roomName == '') {
Toast.fail({
title: '提示',
forbidClick: true,
message: '请先添加房间！',
})
return
}
let data = {
floorId: this.$route.params.floorId ? this.$route.params.floorId : '18',
name:this.roomName,
......@@ -221,6 +287,8 @@ export default {
if (res.code == 200) {
Toast.success('提交成功');
this.getRoomInfo()
this.roomType = ''
this.roomName = ''
}
}).catch((err) => {
console.log('err==>>',err)
......@@ -235,13 +303,13 @@ export default {
h: 3,
i: '',
name: this.roomName,
c: '#eee',
c: '#0091EA',
type:this.roomType,
isDraggable:true,
isResizable:true
}
this.layout.push(this.layOutItem)
console.log('layOutItem==>>',this.layOutItem)
// console.log('layOutItem==>>',this.layOutItem)
},
onConfirm(value) {
this.roomType = value;
......@@ -252,11 +320,15 @@ export default {
</script>
<style scoped >
.router-view{
padding-bottom: 0px !important;
}
.wrap{
height: 100vh;
width: 100vw;
/* transform: rotate(90deg);
transform-origin: bottom left; */
position: relative;
}
.footer{
/* position: fixed; */
......@@ -298,9 +370,12 @@ export default {
/*************************************/
.setBtns{
position: fixed;
/* position: fixed;
top:auto;
right: auto;
left: 0;
bottom: 0;
bottom: 0; */
margin-top: 10px;
font-size: 0.3rem;
padding: 10px;
vertical-align: middle;
......@@ -342,6 +417,7 @@ export default {
.vue-grid-item .text {
writing-mode:vertical-rl;
-webkit-writing-mode: vertical-rl;
font-size: 10cqw;
display: flex;
align-items: center;
......
vue.config.js
View file @ 6dc73443
......@@ -8,9 +8,10 @@ module.exports = {
//以上的ip和端口是我们本机的;下面为需要跨域的
proxy: { //配置跨域
'/app-api': {
target: 'http://192.168.4.232:8080/', //这里是后台的地址
// target: 'http://192.168.4.232:8080/', //这里是后台的地址
// target: 'http://192.168.15.124:8080/', //这里是杨帆的地址
// target: 'http://192.168.10.137:8080/', //这里是昊哥的地址
target: 'http://192.168.10.36:8080/', //这里是昊哥的地址
// target: 'http://localhost:8080/', //这里是后台的地址
ws: true,
changOrigin: true, //允许跨域
......
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