四色图增加图例

src/views/login.vue

 <template>
   <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+    >
       <h3 class="title">融通物管安全管理平台</h3>
       <el-form-item prop="username">
         <el-input
@@ -9,7 +14,11 @@
           auto-complete="off"
           placeholder="账号"
         >
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+          <svg-icon
+            slot="prefix"
+            icon-class="user"
+            class="el-input__icon input-icon"
+          />
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
@@ -20,7 +29,11 @@
           placeholder="密码"
           @keyup.enter.native="handleLogin"
         >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+          <svg-icon
+            slot="prefix"
+            icon-class="password"
+            class="el-input__icon input-icon"
+          />
         </el-input>
       </el-form-item>
       <el-form-item prop="code" v-if="captchaEnabled">
@@ -31,26 +44,36 @@
           style="width: 63%"
           @keyup.enter.native="handleLogin"
         >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+          <svg-icon
+            slot="prefix"
+            icon-class="validCode"
+            class="el-input__icon input-icon"
+          />
         </el-input>
         <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+          <img :src="codeUrl" @click="getCode" class="login-code-img" />
         </div>
       </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-      <el-form-item style="width:100%;">
+      <el-checkbox
+        v-model="loginForm.rememberMe"
+        style="margin: 0px 0px 25px 0px"
+        >记住密码</el-checkbox
+      >
+      <el-form-item style="width: 100%">
         <el-button
           :loading="loading"
           size="medium"
           type="primary"
-          style="width:100%;"
+          style="width: 100%"
           @click.native.prevent="handleLogin"
         >
           <span v-if="!loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
-        <div style="float: right;" v-if="register">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
+        <div style="float: right" v-if="register">
+          <router-link class="link-type" :to="'/register'"
+            >立即注册</router-link
+          >
         </div>
       </el-form-item>
     </el-form>
@@ -64,7 +87,7 @@
 <script>
 import { getCodeImg } from "@/api/login";
 import Cookies from "js-cookie";
-import { encrypt, decrypt } from '@/utils/jsencrypt'
+import { encrypt, decrypt } from "@/utils/jsencrypt";
 
 export default {
   name: "Login",
@@ -72,36 +95,36 @@ export default {
     return {
       codeUrl: "",
       loginForm: {
-        username: "admin",
-        password: "admin123",
+        username: "",
+        password: "",
         rememberMe: false,
         code: "",
-        uuid: ""
+        uuid: "",
       },
       loginRules: {
         username: [
-          { required: true, trigger: "blur", message: "请输入您的账号" }
+          { required: true, trigger: "blur", message: "请输入您的账号" },
         ],
         password: [
-          { required: true, trigger: "blur", message: "请输入您的密码" }
+          { required: true, trigger: "blur", message: "请输入您的密码" },
         ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
       },
       loading: false,
       // 验证码开关
       captchaEnabled: true,
       // 注册开关
       register: false,
-      redirect: undefined
+      redirect: undefined,
     };
   },
   watch: {
     $route: {
-      handler: function(route) {
+      handler: function (route) {
         this.redirect = route.query && route.query.redirect;
       },
-      immediate: true
-    }
+      immediate: true,
+    },
   },
   created() {
     this.getCode();
@@ -109,8 +132,9 @@ export default {
   },
   methods: {
     getCode() {
-      getCodeImg().then(res => {
-        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+      getCodeImg().then((res) => {
+        this.captchaEnabled =
+          res.captchaEnabled === undefined ? true : res.captchaEnabled;
         if (this.captchaEnabled) {
           this.codeUrl = "data:image/gif;base64," + res.img;
           this.loginForm.uuid = res.uuid;
@@ -120,38 +144,46 @@ export default {
     getCookie() {
       const username = Cookies.get("username");
       const password = Cookies.get("password");
-      const rememberMe = Cookies.get('rememberMe')
+      const rememberMe = Cookies.get("rememberMe");
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
-        password: password === undefined ? this.loginForm.password : decrypt(password),
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+        password:
+          password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
       };
     },
     handleLogin() {
-      this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
           this.loading = true;
           if (this.loginForm.rememberMe) {
             Cookies.set("username", this.loginForm.username, { expires: 30 });
-            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), {
+              expires: 30,
+            });
+            Cookies.set("rememberMe", this.loginForm.rememberMe, {
+              expires: 30,
+            });
           } else {
             Cookies.remove("username");
             Cookies.remove("password");
-            Cookies.remove('rememberMe');
+            Cookies.remove("rememberMe");
           }
-          this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
-          }).catch(() => {
-            this.loading = false;
-            if (this.captchaEnabled) {
-              this.getCode();
-            }
-          });
+          this.$store
+            .dispatch("Login", this.loginForm)
+            .then(() => {
+              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+            })
+            .catch(() => {
+              this.loading = false;
+              if (this.captchaEnabled) {
+                this.getCode();
+              }
+            });
         }
       });
-    }
-  }
+    },
+  },
 };
 </script>
 

src/views/risk/drawCanvas/index.vue

 <template>
   <div class="wrap" ref="mapmidbox">
-    <div class="north" style="margin-right: 20px">
-      <img src="../../../assets/images/north.png" alt="" />
-    </div>
-    <grid-layout
-      id="gridView"
-      :layout.sync="layout"
-      :col-num="colNum"
-      :row-height="30"
-      :vertical-compact="false"
-      :use-css-transforms="true"
-      :prevent-collision="false"
-      :preventCollision="true"
-    >
-      <grid-item
-        v-for="item in layout"
-        :static="item.static"
-        :x="item.x"
-        :y="item.y"
-        :w="item.w"
-        :h="item.h"
-        :i="item.i"
-        :key="item.i"
-        :isDraggable="false"
-        :isResizable="false"
-        @resized="resizedEvent"
-        @moved="movedEvent"
-        :style="{
-          backgroundColor: item.c,
-          border: item.type == 'thorough' ? 'none !important' : '',
-        }"
+    <div id="printDiv">
+      <div class="north" style="margin-right: 20px">
+        <img src="../../../assets/images/north.png" alt="" />
+      </div>
+      <grid-layout
+        id="gridView"
+        :layout.sync="layout"
+        :col-num="colNum"
+        :row-height="30"
+        :vertical-compact="false"
+        :use-css-transforms="true"
+        :prevent-collision="false"
+        :preventCollision="true"
       >
-        <span class="text" :class="item.w > item.h * 5 ? '' : 'rowText'">{{
-          item.name
-        }}</span>
-        <!-- <span class="remove" @click="removeItem(item.i)" v-if="item.i && isEdit">x</span> -->
-      </grid-item>
-    </grid-layout>
+        <grid-item
+          v-for="item in layout"
+          :static="item.static"
+          :x="item.x"
+          :y="item.y"
+          :w="item.w"
+          :h="item.h"
+          :i="item.i"
+          :key="item.i"
+          :isDraggable="false"
+          :isResizable="false"
+          @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="removeItem(item.i)" v-if="item.i && isEdit">x</span> -->
+        </grid-item>
+      </grid-layout>
+      <el-row :gutter="5" style="margin-top: 20px; margin-left: 20px">
+        <el-col :span="2"> 风险等级图例:</el-col>
+        <el-col :span="3"> <span class="riskTab type1"></span>重大风险</el-col>
+        <el-col :span="3"> <span class="riskTab type2"></span>较大风险</el-col>
+        <el-col :span="3"> <span class="riskTab type3"></span>一般风险</el-col>
+        <el-col :span="3"> <span class="riskTab type4"></span>较小风险</el-col>
+      </el-row>
+    </div>
     <el-row style="margin-top: 20px; margin-left: 20px">
       <el-button type="primary" @click="getPdf">导 出</el-button>
       <el-button @click="cancelDraw">取 消</el-button>
@@ -121,7 +130,7 @@ export default {
       var title = "四色图";
       // html2Canvas(document.querySelector('#pdfDom'), { //这是在界面上设置一个id
       //只下载id为pdfDom的内容
-      html2Canvas(document.querySelector("#gridView"), {}).then(function (
+      html2Canvas(document.querySelector("#printDiv"), {}).then(function (
         canvas
       ) {
         console.log(canvas.width, canvas.height);