四色图修改

src/views/drawCanvas/riskView.vue

@@ -28,14 +28,15 @@
                        :isResizable="item.isResizable"
                        @resized="resizedEvent"
                        @moved="movedEvent"
-                       :style="{'backgroundColor':item.c,}"
+                       :style="{'backgroundColor':item.c,'border':(item.type == 'thorough'? 'none !important':'')}"
             >
-                <span class="text">{{item.name}}</span>
+                <span class="text" :class="item.w>(item.h*5) ? '': 'rowText'">{{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="!isViews">添加房间</van-button>
+            <van-button @click="addOther" 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>重大风险
@@ -44,8 +45,8 @@
                 <span class="riskTab type4"></span>较小风险
             </van-grid>
         </div>
-        <van-dialog v-model="show" title="创建房间" show-cancel-button @confirm="saveRoomName" @close = "closeDialog">
-            <van-cell-group>
+        <van-dialog v-model="show" :title="title" show-cancel-button @confirm="saveRoomName" @cancel = "cancelDialog">
+            <van-cell-group v-if="isRoom">
                <van-field v-model="roomName" label="房间名称" placeholder="请输入房间名称" />
                <van-field
                 readonly
@@ -57,6 +58,9 @@
                 />
                 
             </van-cell-group>
+            <van-cell-group v-else>
+                <van-field v-model="roomName" label="名称" placeholder="请输入名称" />
+            </van-cell-group>
         </van-dialog>
         <van-popup v-model="showPicker" round position="bottom">
             <van-picker
@@ -94,16 +98,18 @@ export default {
             draggable: false,
             resizable: true,
             colNum: 12,
-            isScreenFull :null,
+            // isScreenFull :null,
             layOutItem:{},//新增的房间对象
             show:false,
+            title:'',
             showPicker: false,
             roomType:'',
             roomName:'',
             columns: ['办公', '餐饮', '住宅', '超市'],
             colorList:['#FF4433','#FF9800','#FFFF00','#0091EA'],
             isViews:false,// true:查看页面；  false: 添加页面
-            showHeader:true
+            showHeader:true,
+            isRoom:true,//是否为添加房间
         }
     },
     props:{
@@ -160,7 +166,7 @@ export default {
                 wrapper.style.cssText = style;
         },
         rotateBox() {
-            this.isScreenFull = !this.isScreenFull;//是否全屏状态
+            // this.isScreenFull = !this.isScreenFull;//是否全屏状态
             let width = document.documentElement.clientWidth,//页面宽度
                 height = document.documentElement.clientHeight,//页面高度
                 wrapper = this.$refs.mapmidbox,//需要横屏的块，与全屏的块要区分开，不区分全屏的块无法显示横屏效果
@@ -209,8 +215,8 @@ export default {
                    item.position.i = item.id
                    item.position.isDraggable = false
                    item.position.isResizable = false
-                   if (!this.isViews) { //添加页面不显示颜色
-                        item.position.c = '#eee'
+                   if (!this.isViews || item.position.type == 'thorough') { //添加页面不显示颜色
+                        item.position.c = '#e6e5e5'
                     }else{
                         item.position.c = this.colorList[Math.floor(Math.random()*4)]
                     }
@@ -223,21 +229,39 @@ export default {
             })
         },
         // 增加
-        addItem: function () {
+        addItem () {
+            if (this.layout.find((item) => item.i == '')) {
+                Toast.fail({
+                    title: '提示',
+                    forbidClick: true,
+                    message: '请先点击确定，保存当前房间信息',
+                })
+                return
+            }
+            this.roomType = ''
+            this.roomName = ''
+            this.title = '创建房间'
+            this.isRoom = true
+            this.show = true
+        },
+        // 添加其他
+        addOther(){
             if (this.layout.find((item) => item.i == '')) {
                 Toast.fail({
                     title: '提示',
                     forbidClick: true,
-                    message: '一次只能增加一个房间',
+                    message: '请先点击确定，保存当前房间信息',
                 })
                 return
             }
+            this.isRoom = false
             this.roomType = ''
             this.roomName = ''
+            this.title = '创建其他'
             this.show = true
         },
         // 删除
-        removeItem: function (val) {
+        removeItem (val) {
             if (val == '') {
                 const index = this.layout.map(item => item.i).indexOf(val);
                 this.layout.splice(index, 1);
@@ -282,7 +306,7 @@ export default {
                 floorId: this.$route.params.floorId ? this.$route.params.floorId : '18',
                 name:this.roomName,
                 position: JSON.stringify(this.layOutItem),
-                roomType: this.roomType
+                roomType: this.isRoom ? this.roomType : '9999',
             }
             postFun('/ledger/room/save', data).then((res) => {
                 if (res.code == 200) {
@@ -297,6 +321,14 @@ export default {
         },
         //保存房间名称
         saveRoomName(){
+            if (this.roomName == '') {
+                 Toast.fail({
+                    title: '提示',
+                    forbidClick: true,
+                    message: '请输入名称！',
+                })
+                return
+            }
              this.layOutItem = {
                 x: (this.layout.length * 2) % (this.colNum || 12),
                 y: this.layout.length + (this.colNum/2 || 12),
@@ -305,14 +337,14 @@ export default {
                 i: '',
                 name: this.roomName,
                 c: '#0091EA',
-                type:this.roomType,
+                type:this.isRoom ? this.roomType : 'thorough',
                 isDraggable:true,
                 isResizable:true
             }
             this.layout.push(this.layOutItem)
-            // console.log('layOutItem==>>',this.layOutItem)
+            console.log('layOutItem==>>',this.layOutItem)
         },
-        closeDialog(){
+        cancelDialog(){
             this.roomType = ''
             this.roomName = ''
         },
@@ -329,10 +361,8 @@ export default {
     padding-bottom: 0px !important;
 }
 .wrap{
-    height: 100vh;
+    /* height: 100vh; */
     width: 100vw;
-    /* transform: rotate(90deg);
-   transform-origin: bottom left; */
    position: relative;
 }
 .footer{
@@ -386,7 +416,7 @@ export default {
     vertical-align: middle;
     display: flex;
     align-items: flex-start;
-    flex-direction: column;
+    /* flex-direction: column; */
 }
 .setBtns .van-button--mini{
     padding: 0 10px;
@@ -397,11 +427,15 @@ export default {
     top: 0;
     cursor: pointer;
 }
+::v-deep .van-dialog__header{
+    padding-top: 15px !important;
+    padding-bottom: 15px !important;
+}
 .vue-grid-item {
     -ms-touch-action: none;
     touch-action: none;
     box-sizing: border-box;
-    container-type: inline-size;
+    /* container-type: inline-size; */
 }
 .vue-grid-layout {
     background: #f0f1f5;
@@ -421,22 +455,23 @@ export default {
 }
 
 .vue-grid-item .text {
-    writing-mode:vertical-rl;
-    -webkit-writing-mode: vertical-rl;
-    font-size: 10cqw;
+    /* font-size: 6cqw; */
     display: flex;
     align-items: center;
     justify-content: center;
-    position: absolute;
+    /* position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
-    right: 0;
+    right: 0; */
     margin: auto;
     height: 100%;
     width: 100%;
 }
-
+.rowText{
+    writing-mode:vertical-rl;
+    -webkit-writing-mode: vertical-rl;
+}
 .vue-grid-item .no-drag {
     height: 100%;
     width: 100%;

src/views/riskProject/taskLedger/taskDetail.vue

@@ -129,13 +129,13 @@ export default {
 
 <style scoped>
 .wrap {
-  height: 100vh;
+  /* height: 100vh; */
   width: 100vw;
 }
 
 .section {
   width: 100%;
-  height: 100%;
+  /* height: 100%; */
   overflow-y: auto;
 }
 .quolist{