四色图

src/views/drawCanvas/riskView.vue

@@ -22,31 +22,58 @@
     > -->
     <!-- @click.native="changeName(item)" -->
     <!-- :static="item.static" -->
-    <vue-draggable-resizable
-      v-for="item in layout"
-      :x="(375 / 12) * item.x"
-      :y="item.y * 30"
-      :w="(375 / 12) * item.w"
-      :h="item.h * 30"
-      :i="item.i"
-      :key="item.i"
-      :draggable="item.isDraggable"
-      :resizable="item.isResizable"
-      @resized="resizedEvent"
-      @moved="movedEvent"
-      :style="{
-        backgroundColor: item.c,
-        border: item.type == 'thorough' ? 'none !important' : '',
-      }"
-    >
-      <span class="text" :class="item.w > item.h * 5 ? '' : 'rowText'">{{
-        item.name
-      }}</span>
-      <span class="remove" @click.stop="removeItem(item.i)" v-if="showHeader"
-        >x</span
+    <div :style="{ height: layoutHeight + 'px' }">
+      <vue-draggable-resizable
+        v-for="item in layout"
+        :x="(W / 12) * item.x"
+        :y="item.y * 30"
+        :w="(W / 12) * item.w"
+        :h="item.h * 30"
+        :i="item.i"
+        :key="item.i"
+        :z="item.zIndex"
+        :draggable="item.isDraggable"
+        :resizable="item.isResizable"
+        @resizestop="(x, y, w, h) => resizedEvent(item, x, y, w, h)"
+        @dragging="(x, y) => onDrag(item, x, y)"
+        @dragstop="
+          (x, y) => {
+            movedEvent(item, x, y);
+          }
+        "
+        @activated="onActivated(item)"
+        :style="{
+          backgroundColor: item.c,
+          border: item.type == 'thorough' ? 'none !important' : '',
+        }"
       >
-      <!-- <span class="remove" @click="removeItem(item.i)" v-if="item.i && isEdit">x</span> -->
-    </vue-draggable-resizable>
+        <!-- <grid-item
+        v-for="item in layout"
+        :x="item.x"
+        :y="item.y"
+        :w="item.w"
+        :h="item.h"
+        :i="item.i"
+        :key="item.i"
+        :draggable="item.isDraggable"
+        :resizable="item.isResizable"
+        @resized="resizedEvent"
+        @moved="movedEvent"
+        :style="{
+          backgroundColor: item.c,
+          border: item.type == 'thorough' ? 'none !important' : '',
+        }"
+      > -->
+        <span class="text" :class="item.w > item.h * 5 ? '' : 'rowText'"
+          >{{ item.name }}{{ item.zIndex }}</span
+        >
+        <span class="remove" @click.stop="removeItem(item.i)" v-if="showHeader"
+          >x</span
+        >
+        <!-- <span class="remove" @click="removeItem(item.i)" v-if="item.i && isEdit">x</span> -->
+        <!-- </grid-item> -->
+      </vue-draggable-resizable>
+    </div>
     <!-- </grid-layout> -->
     <div class="setBtns">
       <van-button @click="addItem" type="info" size="mini" v-if="!isViews"
@@ -181,6 +208,9 @@ export default {
   },
   data() {
     return {
+      W: 0, //当前屏幕的宽度
+      H: 0, //当前屏幕的高度
+      layoutHeight: 0,
       text: "房间位置绘制工具",
       isabled: true,
       layout: [
@@ -251,6 +281,8 @@ export default {
       );
     }
     this.getRoomInfo();
+    this.W = document.documentElement.clientWidth;
+    this.H = document.documentElement.clientWidth;
   },
   methods: {
     // 选择楼层
@@ -399,8 +431,9 @@ export default {
                 item.position.c = item.color;
               }
               this.layout.push(item.position);
+              this.updateLayoutHeight();
             });
-            // console.log('layout==>>',this.layout)
+            // console.log(res.data);
           }
         })
         .catch((err) => {
@@ -500,22 +533,54 @@ export default {
       this.isBase = true;
       this.show = true;
     },
+    updateLayoutHeight() {
+      const max = Math.max(
+        ...this.layoutData.map((x) => {
+          let data = x.position;
+          if (typeof x.position == "string") {
+            // x.position.y + x.position.h
+            data = JSON.parse(x.position);
+          }
+          return data.y + data.h;
+        })
+      );
+      console.log(this.layoutData);
+      // 设置layout高度,使页面可以滚动
+      const maxTop = max * 30;
+      this.layoutHeight = maxTop > this.H ? maxTop : this.H;
+    },
     // 移动后的事件
-    movedEvent(i, newX, newY) {
-      // console.log(this.layOutItem, "movedEvent");
-      // this.layOutItem.x = newX;
-      // this.layOutItem.y = newY;
-      // console.log('layOutItem==>>',this.layOutItem)
-      // console.log('this.layout==>>',this.layout)
+    movedEvent(item, newX, newY) {
+      item.x = (newX / this.W) * 12;
+      item.y = newY / 30;
+    },
+    // 拖动
+    onDrag(item, x, y) {
+      // 拖动时判断layoutHeight是否需要更新
+      item.x = (x / this.W) * 12;
+      item.y = y / 30;
+      this.updateLayoutHeight();
+      // if (top > this.layoutHeight) {
+      //   this.layoutHeight = top;
+      // }
+      // console.log(top, this.layoutHeight);
     },
     // 调整大小后的事件
-    resizedEvent: function (i, newH, newW) {
-      // console.log(this.layOutItem, "resizedEvent");
-      // this.layOutItem.w = newW;
-      // this.layOutItem.h = newH;
-      // console.log('layOutItem==>>',this.layOutItem)
-      // console.log('this.layout==>>',this.layout)
+    resizedEvent(item, x, y, w, h) {
+      item.w = (w / this.W) * 12;
+      item.h = h / 30;
+      console.log(this.layoutData);
     },
+    // 激活
+    onActivated(item) {
+      if (this.beforItem) {
+        this.beforItem.zIndex = 1;
+      }
+      item.zIndex = 10;
+      this.beforItem = item;
+      this.$forceUpdate();
+    },
+
     //关闭
     async close() {
       this.layoutData.forEach((item) => {
@@ -745,7 +810,7 @@ export default {
   padding-bottom: 0px !important;
 }
 .wrap {
-  /* height: 100vh; */
+  height: 100vh;
   width: 100vw;
   position: relative;
 }

src/views/login.vue

@@ -2,38 +2,58 @@
   <div class="login" :style="{ backgroundImage: `url(${bg})` }">
     <div class="title">
       <div class="login-logo">
-        <van-image width="48" height="48" :src="require('@/assets/imgs/logo.png')" />
-        <span style="margin-left: 6px;">融通危险源辨识系统</span>
+        <van-image
+          width="48"
+          height="48"
+          :src="require('@/assets/imgs/logo.png')"
+        />
+        <span style="margin-left: 6px">融通危险源辨识系统</span>
       </div>
       <!-- <div class="login-name">Enterprise Business Data Monitoring</div> -->
     </div>
 
     <div class="con" :style="{ backgroundImage: `url(${conBg})` }">
       <div class="hello">Hello!</div>
-      <div class="welcome">
-        欢迎登录<span></span>!
-      </div>
+      <div class="welcome">欢迎登录<span></span>!</div>
       <div class="login-form">
-        <van-form @submit="onSubmit" :show-error-message="false" validate-trigger="onSubmit">
+        <van-form
+          @submit="onSubmit"
+          :show-error-message="false"
+          validate-trigger="onSubmit"
+        >
           <div class="username-wrap">
             <div class="username-icon">
               <van-image :src="require('@/assets/login/login-username.png')" />
             </div>
-            <van-field v-model="username" name="username" label="" placeholder="账号"
-              :rules="[{ required: true, message: '请填写账号' }]" />
+            <van-field
+              v-model="username"
+              name="username"
+              label=""
+              placeholder="账号"
+              :rules="[{ required: true, message: '请填写账号' }]"
+            />
           </div>
           <div class="passworld-wrap">
             <div class="passworld-icon">
               <van-image :src="require('@/assets/login/login-passworld.png')" />
             </div>
-            <van-field v-model="password" type="password" name="password" placeholder="密码"
-              :rules="[{ required: true, message: '请填写密码' }]" />
+            <van-field
+              v-model="password"
+              type="password"
+              name="password"
+              placeholder="密码"
+              :rules="[{ required: true, message: '请填写密码' }]"
+            />
           </div>
-          <div style="margin: 16px 0;">
-            <van-checkbox v-model="remember" shape="square">记住密码</van-checkbox>
+          <div style="margin: 16px 0">
+            <van-checkbox v-model="remember" shape="square"
+              >记住密码</van-checkbox
+            >
           </div>
-          <div style="margin: 16px;">
-            <van-button round block type="info" native-type="submit">登录</van-button>
+          <div style="margin: 16px">
+            <van-button round block type="info" native-type="submit"
+              >登录</van-button
+            >
           </div>
         </van-form>
       </div>
@@ -42,11 +62,16 @@
 </template>
 
 <script>
-import { getFun, postFun } from '@/service/table'
-import { setToken } from '@/utils/auth'
-import { setUserInfo, getUserInfo, getLocalUserInfo, setLocalUserInfo } from '@/utils/userInfo'
+import { getFun, postFun } from "@/service/table";
+import { setToken } from "@/utils/auth";
+import {
+  setUserInfo,
+  getUserInfo,
+  getLocalUserInfo,
+  setLocalUserInfo,
+} from "@/utils/userInfo";
 //引入
-const Base64 = require("js-base64").Base64
+const Base64 = require("js-base64").Base64;
 export default {
   data() {
     return {
@@ -54,31 +79,38 @@ export default {
       conBg: require("@/assets/login/login-center.png"),
       username: "",
       password: "",
-      remember:localStorage.getItem('isRemember')&&localStorage.getItem('isRemember')!=='false'?true:false
+      remember:
+        localStorage.getItem("isRemember") &&
+        localStorage.getItem("isRemember") !== "false"
+          ? true
+          : false,
     };
   },
-  watch:{
-    remember(newVal,oldVal){
-      if(newVal){
-        localStorage.setItem('isRemember',true)
-      }else{
-        localStorage.setItem('isRemember',false)
+  watch: {
+    remember(newVal, oldVal) {
+      if (newVal) {
+        localStorage.setItem("isRemember", true);
+      } else {
+        localStorage.setItem("isRemember", false);
       }
-    }
+    },
   },
   mounted() {
     const store = window.localStorage;
-    if (store.getItem('isRemember')&&store.getItem('isRemember')!=='false') {
-      if(getLocalUserInfo()){
-        this.username = getLocalUserInfo().loginName
-        this.password =Base64.decode(getLocalUserInfo().loginPassword)
+    if (
+      store.getItem("isRemember") &&
+      store.getItem("isRemember") !== "false"
+    ) {
+      if (getLocalUserInfo()) {
+        this.username = getLocalUserInfo().loginName;
+        this.password = Base64.decode(getLocalUserInfo().loginPassword);
       }
     }
     let height = document.documentElement.clientHeight; //获取当前可视区域的高度
-    document.getElementsByClassName('login')[0].style.height = height + 'px'//给根布局设置高度
+    document.getElementsByClassName("login")[0].style.height = height + "px"; //给根布局设置高度
     // 判断localStorage中是否有用户信息
     if (getLocalUserInfo()) {
-      this.username = getLocalUserInfo().loginName
+      this.username = getLocalUserInfo().loginName;
       // 获取解密后的密码
       // console.log(Base64.decode(getLocalUserInfo().loginPassword)); // base64解密
     }
@@ -86,44 +118,48 @@ export default {
   methods: {
     onSubmit(values) {
       this.$toast.loading({
-        message: '登录中...',
+        message: "登录中...",
         forbidClick: true,
-        loadingType: 'spinner',
-        duration: 0
-      })
-      postFun('/login', values).then((Response) => {
+        loadingType: "spinner",
+        duration: 0,
+      });
+      postFun("/login", values).then((Response) => {
         if (Response.code == 200) {
-          this.$toast.clear()
+          this.$toast.clear();
           setLocalUserInfo({
             loginName: values.username,
-            loginPassword: Base64.encode(values.password)
-          })
-          setToken(Response.token)
-          getFun('/getInfo').then((Response2) => {
-            console.log('%c [ Response2 ]-89', 'font-size:13px; background:pink; color:#bf2c9f;', Response2)
+            loginPassword: Base64.encode(values.password),
+          });
+          setToken(Response.token);
+          getFun("/getInfo").then((Response2) => {
+            console.log(
+              "%c [ Response2 ]-89",
+              "font-size:13px; background:pink; color:#bf2c9f;",
+              Response2
+            );
             var userInfo = {
-              ...Response2.user
-            }
+              ...Response2.user,
+            };
             /* 存储用户信息 */
-            setUserInfo(userInfo)
+            setUserInfo(userInfo);
             // if(!Response2.data.initializePassword){
             //     this.$router.push('/save-workbench')
             // }else{
             //     this.$router.push('/reset-pas-two')
             // }
-            this.$router.push('/save-workbench')
-          })
+            this.$router.push("/save-workbench");
+          });
           /* 存储用户信息 */
         } else {
-          this.$toast.clear()
+          this.$toast.clear();
           this.$toast.fail({
             message: Response.msg,
-            duration: 2000
-          })
+            duration: 2000,
+          });
         }
-      })
-    }
-  }
+      });
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -133,7 +169,6 @@ export default {
   background-repeat: no-repeat;
   background-attachment: fixed;
   height: 100vh;
-  // overflow: hidden;
   overflow: auto;
 
   .title {

vue.config.js

@@ -9,8 +9,8 @@ module.exports = {
     proxy: {
       //配置跨域
       "/app-api": {
-        // target: "http://192.168.4.232:8080/", //这里是后台的地址
-        target: "http://localhost:8080/", //这里是后台的地址
+        target: "http://192.168.4.232:8080/", //这里是后台的地址
+        // target: "http://localhost:8080/", //这里是后台的地址
         // target: 'http://192.168.15.124:8080/', //这里是杨帆的地址
         // target: "http://192.168.10.137:8080/", //这里是周昊的地址
         // target: "http://192.168.15.230:8080/", //这里是晓静的地址