站点监控接口没有返回站点菜单时不展示

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="<%= BASE_URL %>logo-icon.png">
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
 	  <style>

src/api/ems/dzjk.js

@@ -146,10 +146,10 @@ export function storagePower(siteId) {
     method: 'get'
   })
 }
-//poc平均温度
+//poc温度
-export function stackAveTemp(siteId) {
+export function pcsMaxTemp(siteId) {
   return request({
-    url: `/ems/siteMonitor/runningGraph/stackAveTemp?siteId=${siteId}`,
+    url: `/ems/siteMonitor/runningGraph/pcsMaxTemp?siteId=${siteId}`,
     method: 'get'
   })
 }

src/layout/components/Sidebar/Logo.vue

@@ -1,8 +1,22 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div
+    class="sidebar-logo-container"
+    :class="{ collapse: collapse }"
+    :style="{
+      backgroundColor:
+        sideTheme === 'theme-dark'
+          ? variables.menuBackground
+          : variables.menuLightBackground,
+    }"
+  >
     <transition name="sidebarLogoFade">
-      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+      <router-link
-        <img :src="logo" class="sidebar-logo" />
+        v-if="collapse"
+        key="collapse"
+        class="sidebar-logo-link"
+        to="/"
+      >
+        <img :src="logoSmall" class="sidebar-logo" />
         <!--        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>-->
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
@@ -14,35 +28,33 @@
 </template>
 
 <script>
-import logoImg from '@/assets/logo/logo.png'
+import variables from "@/assets/styles/variables.scss";
-import variables from '@/assets/styles/variables.scss'
+import logo from "@/assets/images/ems/logo.png";
-import logo from '@/assets/images/ems/logo.png'
+import logoSmall from "@/assets/images/ems/logo-small.png";
-import logoLarge from '@/assets/images/ems/logo-large.png'
 export default {
-  name: 'SidebarLogo',
+  name: "SidebarLogo",
   props: {
     collapse: {
       type: Boolean,
-      required: true
+      required: true,
-    }
+    },
   },
   computed: {
     variables() {
-      return variables
+      return variables;
     },
     sideTheme() {
-      return this.$store.state.settings.sideTheme
+      return this.$store.state.settings.sideTheme;
-    }
+    },
   },
   data() {
     return {
       title: process.env.VUE_APP_TITLE,
-      // logo: logoImg
       logo: logo,
-      logoLarge:logoLarge
+      logoSmall: logoSmall,
-    }
+    };
-  }
+  },
-}
+};
 </script>
 
 <style lang="scss" scoped>

src/store/modules/permission.js

@@ -34,6 +34,12 @@ const permission = {
       return new Promise(resolve => {
         // 向后端请求路由数据
         getRouters().then(res => {    
+          let hasDzjk = false
+          if(res?.data){
+            res.data.forEach(i=>{
+              i.children && i.children.find(j=>j.path.indexOf('dzjk')>-1) && (hasDzjk=true)
+            })
+          }
           const sdata = JSON.parse(JSON.stringify(res.data))
           const rdata = JSON.parse(JSON.stringify(res.data))
           const sidebarRoutes = filterAsyncRouter(sdata)
@@ -41,6 +47,10 @@ const permission = {
           const asyncRoutes = filterDynamicRoutes(dynamicRoutes)
           rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
           router.addRoutes(asyncRoutes)
+          if(!hasDzjk){
+            const index = constantRoutes.findIndex(i=>i.path.indexOf('dzjk')>-1)
+            constantRoutes.splice(index,1)
+          }
           commit('SET_ROUTES', rewriteRoutes)
           commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
           commit('SET_DEFAULT_ROUTES', sidebarRoutes)

src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue

@@ -1,8 +1,10 @@
-
 <template>
-  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
+  <el-card
+    shadow="always"
+    class="common-card-container common-card-container-body-no-padding"
+  >
     <div slot="header">
-      <span class="card-title">储能功率曲线</span>
+      <span class="card-title">PCS有功功率/PCS无功功率</span>
     </div>
     <div style="height: 360px" id="cnglqxChart" />
   </el-card>
@@ -10,98 +12,114 @@
 
 <style scoped lang="scss"></style>
 <script>
-import * as echarts from 'echarts'
+import * as echarts from "echarts";
-import resize from '@/mixins/ems/resize'
+import resize from "@/mixins/ems/resize";
 import { formatDate } from "@/filters/ems";
-import {storagePower} from '@/api/ems/dzjk'
+import { storagePower } from "@/api/ems/dzjk";
 
 export default {
   mixins: [resize],
   data() {
     return {
-      chart: null
+      chart: null,
-    }
+    };
   },
   mounted() {
-    this.chart = echarts.init(document.querySelector('#cnglqxChart'))
+    this.chart = echarts.init(document.querySelector("#cnglqxChart"));
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
+    this.chart.dispose();
-    this.chart = null
+    this.chart = null;
   },
   methods: {
     init(siteId) {
-      this.chart.showLoading()
+      this.chart.showLoading();
-      const x = []
+      const x = [];
-      const data1 =[],data2 =[]
+      const data1 = [],
-      storagePower(siteId).then(response => {
+        data2 = [];
-        const source = response?.data?.energyStoragePowList || []
+      storagePower(siteId)
-        source.forEach(item=>{
+        .then((response) => {
-          x.push(formatDate(item.createDate,false,true))
+          this.setOption(response?.data?.pcsPowerList || []);
-          data1.push(item.pcsTotalActPower)
-          data2.push(item.pcsTotalReactivePower)
-        })
-        this.setOption(x,data1,data2)
-      }).finally(()=>{
-        this.chart.hideLoading()
         })
+        .finally(() => {
+          this.chart.hideLoading();
+        });
     },
-    setOption(x,data1,data2) {
+    setOption(data) {
+      // data=[{deviceId:'pcs1',energyStoragePowList:[{createDate,deviceId,pcsTotalActPower,pcsTotalReactivePower}]}]
+      let xdata = [],
+        series = [];
+      data.forEach((element, index) => {
+        if (index === 0) {
+          xdata = (element.energyStoragePowList || []).map((i) => i.createDate);
+        }
+        series.push(
+          {
+            type: "line",
+            name: `${element.deviceId}有功功率`,
+            areaStyle: {
+              // color:'#FFBD00'
+            },
+            data: (element.energyStoragePowList || []).map(
+              (i) => i.pcsTotalActPower
+            ),
+          },
+          {
+            type: "line",
+            name: `${element.deviceId}无功功率`,
+            areaStyle: {
+              // color:'#FFBD00'
+            },
+            data: (element.energyStoragePowList || []).map(
+              (i) => i.pcsTotalReactivePower
+            ),
+          }
+        );
+      });
       this.chart.setOption({
-        color:['#FFBD00','#3C81FF'],
         legend: {
-          left: 'center',
+          left: "center",
-          top: '10',
+          top: "5",
+          itemWidth: 10,
+          itemHeight: 5,
+          textStyle: {
+            fontSize: 9,
+          },
         },
         grid: {
-          containLabel: true
+          containLabel: true,
         },
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+          axisPointer: {
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+            // 坐标轴指示器，坐标轴触发有效
-          }
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
         },
         textStyle: {
           color: "#333333",
         },
-        xAxis: {type:'category',data:x},
+        xAxis: { type: "category", data: xdata },
         yAxis: {
-          type: 'value',
+          type: "value",
         },
         dataZoom: [
           {
-            type: 'inside',
+            type: "inside",
             start: 0,
-            end: 100
+            end: 100,
           },
           {
             start: 0,
-            end: 100
+            end: 100,
-          }
+          },
         ],
-        series: [
+        series,
-          {
+      });
-            name:'PCS实时有功功率',
-            type: 'line',
-            areaStyle: {
-              color:'#FFBD00'
     },
-            data: data1,
-          },{
-            name:'PCS实时无功功率',
-            type: 'line',
-            areaStyle: {
-              color: '#3C81FF'
   },
-            data: data2
+};
-          }]
-      })
-    }
-  }
-}
-
 </script>

src/views/ems/dzjk/sbjk/ssyx/DcpjsocChart.vue

@@ -1,8 +1,10 @@
-
 <template>
-  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
+  <el-card
+    shadow="always"
+    class="common-card-container common-card-container-body-no-padding"
+  >
     <div slot="header">
-      <span class="card-title">电池平均SOC</span>
+      <span class="card-title">平均SOC</span>
     </div>
     <div style="height: 360px" id="dcpjsocChart" />
   </el-card>
@@ -10,90 +12,95 @@
 
 <style scoped lang="scss"></style>
 <script>
-import * as echarts from 'echarts'
+import * as echarts from "echarts";
-import resize from '@/mixins/ems/resize'
+import resize from "@/mixins/ems/resize";
 import { formatDate } from "@/filters/ems";
-import {batteryAveSoc} from '@/api/ems/dzjk'
+import { batteryAveSoc } from "@/api/ems/dzjk";
 export default {
   mixins: [resize],
   data() {
     return {
-      chart: null
+      chart: null,
-    }
+    };
   },
   mounted() {
-    this.chart = echarts.init(document.querySelector('#dcpjsocChart'))
+    this.chart = echarts.init(document.querySelector("#dcpjsocChart"));
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
+    this.chart.dispose();
-    this.chart = null
+    this.chart = null;
   },
   methods: {
     init(siteId) {
-      this.chart.showLoading()
+      this.chart.showLoading();
-      const x = []
+      batteryAveSoc(siteId)
-      const data =[]
+        .then((response) => {
-      batteryAveSoc(siteId).then(response => {
+          this.setOption(response?.data?.batteryAveSOCList || []);
-        const source = response?.data?.batteryAveSOCList || []
-        source.forEach(item=>{
-          x.push(formatDate(item.createDate,false,true))
-          data.push(item.batterySOC)
-        })
-        this.setOption(x,data)
-      }).finally(()=>{
-        this.chart.hideLoading()
         })
+        .finally(() => {
+          this.chart.hideLoading();
+        });
+    },
+    setOption(data) {
+      let xdata = [],
+        ydata = [];
+      data.forEach((element) => {
+        xdata.push(element.createDate);
+        ydata.push(element.batterySOC);
+      });
+      xdata = this.chart.setOption({
+        legend: {
+          left: "center",
+          top: "5",
+          itemWidth: 10,
+          itemHeight: 5,
+          textStyle: {
+            fontSize: 9,
           },
-    setOption(x,data) {
-      this.chart.setOption({
-        color:['#FFBD00','#3C81FF'],
-        // legend: {
-        //   left: 'center',
-        //   bottom: '10',
-        // },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
         },
         grid: {
-          containLabel: true
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
         },
         textStyle: {
           color: "#333333",
         },
-        xAxis: {type:'category',data:x},
+        xAxis: { type: "category", data: xdata },
         yAxis: {
-          type: 'value',
+          type: "value",
         },
         dataZoom: [
           {
-            type: 'inside',
+            type: "inside",
             start: 0,
-            end: 100
+            end: 100,
           },
           {
             start: 0,
-            end: 100
+            end: 100,
-          }
+          },
         ],
         series: [
           {
-            name:'电池平均SOC',
+            type: "line",
-            data: data,
+            name: `平均SOC`,
-            type: 'line',
             areaStyle: {
-              color:'#FFBD00'
+              // color:'#FFBD00'
-            }
+            },
-
+            data: ydata,
-          }]
+          },
-      })
+        ],
-    }
+      });
-  }
+    },
-}
+  },
-
+};
 </script>

src/views/ems/dzjk/sbjk/ssyx/DcpjwdChart.vue

@@ -1,6 +1,8 @@
-
 <template>
-  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
+  <el-card
+    shadow="always"
+    class="common-card-container common-card-container-body-no-padding"
+  >
     <div slot="header">
       <span class="card-title">电池平均温度</span>
     </div>
@@ -10,90 +12,99 @@
 
 <style scoped lang="scss"></style>
 <script>
-import * as echarts from 'echarts'
+import * as echarts from "echarts";
-import resize from '@/mixins/ems/resize'
+import resize from "@/mixins/ems/resize";
 import { formatDate } from "@/filters/ems";
-import {batteryAveTemp} from '@/api/ems/dzjk'
+import { batteryAveTemp } from "@/api/ems/dzjk";
 
 export default {
   mixins: [resize],
   data() {
     return {
-      chart: null
+      chart: null,
-    }
+    };
   },
   mounted() {
-    this.chart = echarts.init(document.querySelector('#dcpjwdChart'))
+    this.chart = echarts.init(document.querySelector("#dcpjwdChart"));
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
+    this.chart.dispose();
-    this.chart = null
+    this.chart = null;
   },
   methods: {
     init(siteId) {
-      this.chart.showLoading()
+      this.chart.showLoading();
-      const x = []
+      const x = [];
-      const data1 =[],data2 =[]
+      const data1 = [],
-      batteryAveTemp(siteId).then(response => {
+        data2 = [];
-        const source = response?.data?.batteryAveTempList || []
+      batteryAveTemp(siteId)
-        source.forEach(item=>{
+        .then((response) => {
-          x.push(formatDate(item.createDate,false,true))
+          this.setOption(response?.data?.batteryAveTempList || []);
-          data1.push(item.batteryTemp)
-        })
-        this.setOption(x,data1,data2)
-      }).finally(()=>{
-        this.chart.hideLoading()
         })
+        .finally(() => {
+          this.chart.hideLoading();
+        });
+    },
+    setOption(data) {
+      let xdata = [],
+        ydata = [];
+      data.forEach((element) => {
+        xdata.push(element.createDate);
+        ydata.push(element.batteryTemp);
+      });
+      xdata = this.chart.setOption({
+        legend: {
+          left: "center",
+          top: "5",
+          itemWidth: 10,
+          itemHeight: 5,
+          textStyle: {
+            fontSize: 9,
           },
-    setOption(x,data) {
-      this.chart.setOption({
-        color:['#3C81FF'],
-        // legend: {
-        //   left: 'center',
-        //   bottom: '10',
-        // },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
         },
         grid: {
-          containLabel: true
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
         },
         textStyle: {
           color: "#333333",
         },
-        xAxis: {type:'category',data:x},
+        xAxis: { type: "category", data: xdata },
         yAxis: {
-          type: 'value',
+          type: "value",
         },
         dataZoom: [
           {
-            type: 'inside',
+            type: "inside",
             start: 0,
-            end: 100
+            end: 100,
           },
           {
             start: 0,
-            end: 100
+            end: 100,
-          }
+          },
         ],
         series: [
           {
-            name:'电池平均温度',
+            type: "line",
-            data: data,
+            name: `电池平均温度`,
-            type: 'line',
             areaStyle: {
-              color:'#3C81FF'
+              // color:'#FFBD00'
             },
-          }]
+            data: ydata,
-      })
+          },
-    }
+        ],
-  }
+      });
-}
+    },
-
+  },
+};
 </script>

src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue

@@ -1,8 +1,10 @@
-
 <template>
-  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
+  <el-card
+    shadow="always"
+    class="common-card-container common-card-container-body-no-padding"
+  >
     <div slot="header">
-      <span class="card-title">PCS平均温度</span>
+      <span class="card-title">PCS最高温度</span>
     </div>
     <div style="height: 360px" id="pocpjwdChart" />
   </el-card>
@@ -10,87 +12,98 @@
 
 <style scoped lang="scss"></style>
 <script>
-import * as echarts from 'echarts'
+import * as echarts from "echarts";
-import resize from '@/mixins/ems/resize'
+import resize from "@/mixins/ems/resize";
 import { formatDate } from "@/filters/ems";
-import {stackAveTemp} from '@/api/ems/dzjk'
+import { pcsMaxTemp } from "@/api/ems/dzjk";
 
 export default {
   mixins: [resize],
   data() {
     return {
-      chart: null
+      chart: null,
-    }
+    };
   },
   mounted() {
-    this.chart = echarts.init(document.querySelector('#pocpjwdChart'))
+    this.chart = echarts.init(document.querySelector("#pocpjwdChart"));
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
+    this.chart.dispose();
-    this.chart = null
+    this.chart = null;
   },
   methods: {
     init(siteId) {
-      this.chart.showLoading()
+      this.chart.showLoading();
-      const x = []
+      const x = [];
-      const data =[]
+      const data = [];
-      stackAveTemp(siteId).then(response => {
+      pcsMaxTemp(siteId)
-        const source = response?.data?.stackAveTempList || []
+        .then((response) => {
-        source.forEach(item=>{
+          this.setOption(response?.data?.pcsMaxTempList || []);
-          x.push(formatDate(item.createDate,false,true))
-          data.push(item.temp)
-        })
-        this.setOption(x,data)
-      }).finally(()=>{
-        this.chart.hideLoading()
         })
+        .finally(() => {
+          this.chart.hideLoading();
+        });
     },
-    setOption(x,data) {
+    setOption(data) {
-      this.chart.setOption({
+      let xdata = [],
-        color:['#FFBD00','#3C81FF'],
+        series = [];
-        tooltip: {
+      data.forEach((element, index) => {
-          trigger: 'axis',
+        if (index === 0) {
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+          xdata = (element.maxTempVoList || []).map((i) => i.createDate);
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
         }
+        series.push({
+          type: "line",
+          name: `${element.deviceId}最高温度`,
+          areaStyle: {
+            // color:'#FFBD00'
+          },
+          data: (element.maxTempVoList || []).map((i) => i.temp),
+        });
+      });
+      this.chart.setOption({
+        legend: {
+          left: "center",
+          top: "5",
+          itemWidth: 10,
+          itemHeight: 5,
+          textStyle: {
+            fontSize: 9,
+          },
         },
         grid: {
-          containLabel: true
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
         },
         textStyle: {
           color: "#333333",
         },
-        xAxis: {type:'category',data:x},
+        xAxis: { type: "category", data: xdata },
         yAxis: {
-          type: 'value',
+          type: "value",
         },
         dataZoom: [
           {
-            type: 'inside',
+            type: "inside",
             start: 0,
-            end: 100
+            end: 100,
           },
           {
             start: 0,
-            end: 100
+            end: 100,
-          }
+          },
         ],
-        series: [
+        series,
-          {
+      });
-            name:'PCS平均温度',
+    },
-            data: data,
+  },
-            type: 'line',
+};
-            areaStyle: {
-              color:'#FFBD00'
-            }
-
-          }]
-      })
-    }
-  }
-}
-
 </script>

src/views/login.vue

@@ -1,7 +1,18 @@
 <template>
   <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+    <img :src="loginBg" alt="" srcset="" class="login-bg" />
-      <h3 class="title">{{title}}</h3>
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+    >
+      <img
+        src="./../assets/images/ems/logo.png"
+        alt=""
+        srcset=""
+        class="login-logo"
+      />
       <el-form-item prop="username">
         <el-input
           v-model="loginForm.username"
@@ -9,7 +20,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 +35,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 +50,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" />
         </div>
       </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
+      <el-checkbox
-      <el-form-item style="width:100%;">
+        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">
+        <div style="float: right" v-if="register">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
+          <router-link class="link-type" :to="'/register'"
+            >立即注册</router-link
+          >
         </div>
       </el-form-item>
     </el-form>
@@ -62,121 +91,153 @@
 </template>
 
 <script>
-import { getCodeImg } from "@/api/login"
+import { getCodeImg } from "@/api/login";
-import Cookies from "js-cookie"
+import Cookies from "js-cookie";
-import { encrypt, decrypt } from '@/utils/jsencrypt'
+import { encrypt, decrypt } from "@/utils/jsencrypt";
+import intervalUpdate from "@/mixins/ems/intervalUpdate";
 
 export default {
   name: "Login",
+  mixins: [intervalUpdate],
+  computed: {
+    loginBg() {
+      return require(`./../assets/images/ems/loginBg/${this.bgNum}.png`);
+    },
+  },
   data() {
     return {
-      title: process.env.VUE_APP_TITLE,
+      bgNum: 1,
       codeUrl: "",
       loginForm: {
         username: "admin",
         password: "admin123",
         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) {
-        this.redirect = route.query && route.query.redirect
+        this.redirect = route.query && route.query.redirect;
+      },
+      immediate: true,
     },
-      immediate: true
-    }
   },
   created() {
-    this.getCode()
+    this.getCode();
-    this.getCookie()
+    this.getCookie();
+  },
+  mounted() {
+    this.updateInterval(this.updateBgNum, 5000);
   },
   methods: {
+    updateBgNum() {
+      if (this.bgNum >= 4) this.bgNum = 0;
+      this.bgNum += 1;
+    },
     getCode() {
-      getCodeImg().then(res => {
+      getCodeImg().then((res) => {
-        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
+        this.captchaEnabled =
+          res.captchaEnabled === undefined ? true : res.captchaEnabled;
         if (this.captchaEnabled) {
-          this.codeUrl = "data:image/gif;base64," + res.img
+          this.codeUrl = "data:image/gif;base64," + res.img;
-          this.loginForm.uuid = res.uuid
+          this.loginForm.uuid = res.uuid;
         }
-      })
+      });
     },
     getCookie() {
-      const username = Cookies.get("username")
+      const username = Cookies.get("username");
-      const password = Cookies.get("password")
+      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),
+        password:
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+          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
+          this.loading = true;
           if (this.loginForm.rememberMe) {
-            Cookies.set("username", this.loginForm.username, { expires: 30 })
+            Cookies.set("username", this.loginForm.username, { expires: 30 });
-            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 })
+            Cookies.set("password", encrypt(this.loginForm.password), {
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 })
+              expires: 30,
+            });
+            Cookies.set("rememberMe", this.loginForm.rememberMe, {
+              expires: 30,
+            });
           } else {
-            Cookies.remove("username")
+            Cookies.remove("username");
-            Cookies.remove("password")
+            Cookies.remove("password");
-            Cookies.remove('rememberMe')
+            Cookies.remove("rememberMe");
           }
-          this.$store.dispatch("Login", this.loginForm).then(() => {
+          this.$store
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{})
+            .dispatch("Login", this.loginForm)
-          }).catch(() => {
+            .then(() => {
-            this.loading = false
+              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+            })
+            .catch(() => {
+              this.loading = false;
               if (this.captchaEnabled) {
-              this.getCode()
+                this.getCode();
-            }
-          })
-        }
-      })
-    }
               }
+            });
         }
+      });
+    },
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
 .login {
+  padding-left: 50px;
   display: flex;
-  justify-content: center;
+  justify-content: left;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/images/ems/login-background.png");
-  background-size: cover;
 }
-.title {
+.login-bg {
-  margin: 0px auto 30px auto;
+  position: absolute;
-  text-align: center;
+  top: 0;
-  color: #707070;
+  left: 0;
+  z-index: 1;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+.login-logo {
+  display: block;
+  width: 70%;
+  height: auto;
+  margin: 0 auto;
 }
 
 .login-form {
   border-radius: 6px;
   background: #ffffff;
   width: 400px;
-  padding: 25px 25px 5px 25px;
+  padding: 0 25px 5px 25px;
-  z-index: 1;
+  z-index: 2;
   .el-input {
     height: 38px;
     input {

src/views/register.vue

@@ -1,10 +1,30 @@
 <template>
   <div class="register">
-    <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
+    <img :src="loginBg" alt="" srcset="" class="login-bg" />
-      <h3 class="title">{{title}}</h3>
+    <el-form
+      ref="registerForm"
+      :model="registerForm"
+      :rules="registerRules"
+      class="register-form"
+    >
+      <img
+        src="./../assets/images/ems/logo.png"
+        alt=""
+        srcset=""
+        class="login-logo"
+      />
       <el-form-item prop="username">
-        <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
+        <el-input
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+          v-model="registerForm.username"
+          type="text"
+          auto-complete="off"
+          placeholder="账号"
+        >
+          <svg-icon
+            slot="prefix"
+            icon-class="user"
+            class="el-input__icon input-icon"
+          />
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
@@ -15,7 +35,11 @@
           placeholder="密码"
           @keyup.enter.native="handleRegister"
         >
-          <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="confirmPassword">
@@ -26,7 +50,11 @@
           placeholder="确认密码"
           @keyup.enter.native="handleRegister"
         >
-          <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">
@@ -37,25 +65,31 @@
           style="width: 63%"
           @keyup.enter.native="handleRegister"
         >
-          <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="register-code">
           <img :src="codeUrl" @click="getCode" class="register-code-img" />
         </div>
       </el-form-item>
-      <el-form-item style="width:100%;">
+      <el-form-item style="width: 100%">
         <el-button
           :loading="loading"
           size="medium"
           type="primary"
-          style="width:100%;"
+          style="width: 100%"
           @click.native.prevent="handleRegister"
         >
           <span v-if="!loading">注 册</span>
           <span v-else>注 册 中...</span>
         </el-button>
-        <div style="float: right;">
+        <div style="float: right">
-          <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
+          <router-link class="link-type" :to="'/login'"
+            >使用已有账户登录</router-link
+          >
         </div>
       </el-form-item>
     </el-form>
@@ -67,106 +101,154 @@
 </template>
 
 <script>
-import { getCodeImg, register } from "@/api/login"
+import { getCodeImg, register } from "@/api/login";
+import intervalUpdate from "@/mixins/ems/intervalUpdate";
 
 export default {
   name: "Register",
+  mixins: [intervalUpdate],
+  computed: {
+    loginBg() {
+      return require(`./../assets/images/ems/loginBg/${this.bgNum}.png`);
+    },
+  },
   data() {
     const equalToPassword = (rule, value, callback) => {
       if (this.registerForm.password !== value) {
-        callback(new Error("两次输入的密码不一致"))
+        callback(new Error("两次输入的密码不一致"));
       } else {
-        callback()
+        callback();
-      }
       }
+    };
     return {
-      title: process.env.VUE_APP_TITLE,
+      bgNum: 1,
       codeUrl: "",
       registerForm: {
         username: "",
         password: "",
         confirmPassword: "",
         code: "",
-        uuid: ""
+        uuid: "",
       },
       registerRules: {
         username: [
           { required: true, trigger: "blur", message: "请输入您的账号" },
-          { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
+          {
+            min: 2,
+            max: 20,
+            message: "用户账号长度必须介于 2 和 20 之间",
+            trigger: "blur",
+          },
         ],
         password: [
           { required: true, trigger: "blur", message: "请输入您的密码" },
-          { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" },
+          {
-          { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
+            min: 5,
+            max: 20,
+            message: "用户密码长度必须介于 5 和 20 之间",
+            trigger: "blur",
+          },
+          {
+            pattern: /^[^<>"'|\\]+$/,
+            message: "不能包含非法字符：< > \" ' \\\ |",
+            trigger: "blur",
+          },
         ],
         confirmPassword: [
           { required: true, trigger: "blur", message: "请再次输入您的密码" },
-          { required: true, validator: equalToPassword, trigger: "blur" }
+          { required: true, validator: equalToPassword, trigger: "blur" },
         ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
       },
       loading: false,
-      captchaEnabled: true
+      captchaEnabled: true,
-    }
+    };
   },
   created() {
-    this.getCode()
+    this.getCode();
+  },
+  mounted() {
+    this.updateInterval(this.updateBgNum, 5000);
   },
   methods: {
+    updateBgNum() {
+      if (this.bgNum >= 4) this.bgNum = 0;
+      this.bgNum += 1;
+    },
     getCode() {
-      getCodeImg().then(res => {
+      getCodeImg().then((res) => {
-        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
+        this.captchaEnabled =
+          res.captchaEnabled === undefined ? true : res.captchaEnabled;
         if (this.captchaEnabled) {
-          this.codeUrl = "data:image/gif;base64," + res.img
+          this.codeUrl = "data:image/gif;base64," + res.img;
-          this.registerForm.uuid = res.uuid
+          this.registerForm.uuid = res.uuid;
         }
-      })
+      });
     },
     handleRegister() {
-      this.$refs.registerForm.validate(valid => {
+      this.$refs.registerForm.validate((valid) => {
         if (valid) {
-          this.loading = true
+          this.loading = true;
-          register(this.registerForm).then(res => {
+          register(this.registerForm)
-            const username = this.registerForm.username
+            .then((res) => {
-            this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
+              const username = this.registerForm.username;
+              this.$alert(
+                "<font color='red'>恭喜你，您的账号 " +
+                  username +
+                  " 注册成功！</font>",
+                "系统提示",
+                {
                   dangerouslyUseHTMLString: true,
-              type: 'success'
+                  type: "success",
-            }).then(() => {
+                }
-              this.$router.push("/login")
+              )
-            }).catch(() => {})
+                .then(() => {
-          }).catch(() => {
+                  this.$router.push("/login");
-            this.loading = false
+                })
+                .catch(() => {});
+            })
+            .catch(() => {
+              this.loading = false;
               if (this.captchaEnabled) {
-              this.getCode()
+                this.getCode();
-            }
-          })
-        }
-      })
-    }
               }
+            });
         }
+      });
+    },
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
 .register {
+  padding-left: 50px;
   display: flex;
-  justify-content: center;
+  justify-content: left;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/images/ems/login-background.png");
-  background-size: cover;
 }
-.title {
+.login-bg {
-  margin: 0px auto 30px auto;
+  position: absolute;
-  text-align: center;
+  top: 0;
-  color: #707070;
+  left: 0;
+  z-index: 1;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+.login-logo {
+  display: block;
+  width: 70%;
+  height: auto;
+  margin: 0 auto;
 }
-
 .register-form {
+  z-index: 2;
   border-radius: 6px;
   background: #ffffff;
   width: 400px;
-  padding: 25px 25px 5px 25px;
+  padding: 0 25px 5px 25px;
   .el-input {
     height: 38px;
     input {

src/views/tool/build/index.vue

@@ -2,9 +2,7 @@
   <div class="container">
     <div class="left-board">
       <div class="logo-wrapper">
-        <div class="logo">
+        <div class="logo"><img :src="logo" alt="logo" /> Form Generator</div>
-          <img :src="logo" alt="logo"> Form Generator
-        </div>
       </div>
       <el-scrollbar class="left-scrollbar">
         <div class="components-list">
@@ -21,7 +19,9 @@
             @end="onEnd"
           >
             <div
-              v-for="(element, index) in inputComponents" :key="index" class="components-item"
+              v-for="(element, index) in inputComponents"
+              :key="index"
+              class="components-item"
               @click="addComponent(element)"
             >
               <div class="components-body">
@@ -58,12 +58,18 @@
             <svg-icon icon-class="component" /> 布局型组件
           </div>
           <draggable
-            class="components-draggable" :list="layoutComponents"
+            class="components-draggable"
-            :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
+            :list="layoutComponents"
-            draggable=".components-item" :sort="false" @end="onEnd"
+            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
+            :clone="cloneComponent"
+            draggable=".components-item"
+            :sort="false"
+            @end="onEnd"
           >
             <div
-              v-for="(element, index) in layoutComponents" :key="index" class="components-item"
+              v-for="(element, index) in layoutComponents"
+              :key="index"
+              class="components-item"
               @click="addComponent(element)"
             >
               <div class="components-body">
@@ -81,10 +87,20 @@
         <el-button icon="el-icon-download" type="text" @click="download">
           导出vue文件
         </el-button>
-        <el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">
+        <el-button
+          class="copy-btn-main"
+          icon="el-icon-document-copy"
+          type="text"
+          @click="copy"
+        >
           复制代码
         </el-button>
-        <el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">
+        <el-button
+          class="delete-btn"
+          icon="el-icon-delete"
+          type="text"
+          @click="empty"
+        >
           清空
         </el-button>
       </div>
@@ -96,7 +112,12 @@
             :disabled="formConf.disabled"
             :label-width="formConf.labelWidth + 'px'"
           >
-            <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
+            <draggable
+              class="drawing-board"
+              :list="drawingList"
+              :animation="340"
+              group="componentsGroup"
+            >
               <draggable-item
                 v-for="(element, index) in drawingList"
                 :key="element.renderKey"
@@ -131,28 +152,38 @@
       :show-file-name="showFileName"
       @confirm="generate"
     />
-    <input id="copyNode" type="hidden">
+    <input id="copyNode" type="hidden" />
   </div>
 </template>
 
 <script>
-import draggable from 'vuedraggable'
+import draggable from "vuedraggable";
-import beautifier from 'js-beautify'
+import beautifier from "js-beautify";
-import ClipboardJS from 'clipboard'
+import ClipboardJS from "clipboard";
-import render from '@/utils/generator/render'
+import render from "@/utils/generator/render";
-import RightPanel from './RightPanel'
+import RightPanel from "./RightPanel";
-import { inputComponents, selectComponents, layoutComponents, formConf } from '@/utils/generator/config'
+import {
-import { beautifierConf, titleCase } from '@/utils/index'
+  inputComponents,
-import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/html'
+  selectComponents,
-import { makeUpJs } from '@/utils/generator/js'
+  layoutComponents,
-import { makeUpCss } from '@/utils/generator/css'
+  formConf,
-import drawingDefault from '@/utils/generator/drawingDefault'
+} from "@/utils/generator/config";
-import logo from '@/assets/logo/logo.png'
+import { beautifierConf, titleCase } from "@/utils/index";
-import CodeTypeDialog from './CodeTypeDialog'
+import {
-import DraggableItem from './DraggableItem'
+  makeUpHtml,
+  vueTemplate,
+  vueScript,
+  cssStyle,
+} from "@/utils/generator/html";
+import { makeUpJs } from "@/utils/generator/js";
+import { makeUpCss } from "@/utils/generator/css";
+import drawingDefault from "@/utils/generator/drawingDefault";
+import logo from "@/assets/images/ems/logo-icon.png";
+import CodeTypeDialog from "./CodeTypeDialog";
+import DraggableItem from "./DraggableItem";
 
-let oldActiveId
+let oldActiveId;
-let tempActiveData
+let tempActiveData;
 
 export default {
   components: {
@@ -160,7 +191,7 @@ export default {
     render,
     RightPanel,
     CodeTypeDialog,
-    DraggableItem
+    DraggableItem,
   },
   data() {
     return {
@@ -179,197 +210,203 @@ export default {
       dialogVisible: false,
       generateConf: null,
       showFileName: false,
-      activeData: drawingDefault[0]
+      activeData: drawingDefault[0],
-    }
+    };
   },
   created() {
     // 防止 firefox 下 拖拽 会新打卡一个选项卡
-    document.body.ondrop = event => {
+    document.body.ondrop = (event) => {
-      event.preventDefault()
+      event.preventDefault();
-      event.stopPropagation()
+      event.stopPropagation();
-    }
+    };
   },
   watch: {
-    'activeData.label': function (val, oldVal) {
+    "activeData.label": function (val, oldVal) {
       if (
-        this.activeData.placeholder === undefined
+        this.activeData.placeholder === undefined ||
-        || !this.activeData.tag
+        !this.activeData.tag ||
-        || oldActiveId !== this.activeId
+        oldActiveId !== this.activeId
       ) {
-        return
+        return;
       }
-      this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val
+      this.activeData.placeholder =
+        this.activeData.placeholder.replace(oldVal, "") + val;
     },
     activeId: {
       handler(val) {
-        oldActiveId = val
+        oldActiveId = val;
+      },
+      immediate: true,
     },
-      immediate: true
-    }
   },
   mounted() {
-    const clipboard = new ClipboardJS('#copyNode', {
+    const clipboard = new ClipboardJS("#copyNode", {
-      text: trigger => {
+      text: (trigger) => {
-        const codeStr = this.generateCode()
+        const codeStr = this.generateCode();
         this.$notify({
-          title: '成功',
+          title: "成功",
-          message: '代码已复制到剪切板，可粘贴。',
+          message: "代码已复制到剪切板，可粘贴。",
-          type: 'success'
+          type: "success",
-        })
+        });
-        return codeStr
+        return codeStr;
-      }
+      },
-    })
+    });
-    clipboard.on('error', e => {
+    clipboard.on("error", (e) => {
-      this.$message.error('代码复制失败')
+      this.$message.error("代码复制失败");
-    })
+    });
   },
   methods: {
     activeFormItem(element) {
-      this.activeData = element
+      this.activeData = element;
-      this.activeId = element.formId
+      this.activeId = element.formId;
     },
     onEnd(obj, a) {
       if (obj.from !== obj.to) {
-        this.activeData = tempActiveData
+        this.activeData = tempActiveData;
-        this.activeId = this.idGlobal
+        this.activeId = this.idGlobal;
       }
     },
     addComponent(item) {
-      const clone = this.cloneComponent(item)
+      const clone = this.cloneComponent(item);
-      this.drawingList.push(clone)
+      this.drawingList.push(clone);
-      this.activeFormItem(clone)
+      this.activeFormItem(clone);
     },
     cloneComponent(origin) {
-      const clone = JSON.parse(JSON.stringify(origin))
+      const clone = JSON.parse(JSON.stringify(origin));
-      clone.formId = ++this.idGlobal
+      clone.formId = ++this.idGlobal;
-      clone.span = formConf.span
+      clone.span = formConf.span;
-      clone.renderKey = +new Date() // 改变renderKey后可以实现强制更新组件
+      clone.renderKey = +new Date(); // 改变renderKey后可以实现强制更新组件
-      if (!clone.layout) clone.layout = 'colFormItem'
+      if (!clone.layout) clone.layout = "colFormItem";
-      if (clone.layout === 'colFormItem') {
+      if (clone.layout === "colFormItem") {
-        clone.vModel = `field${this.idGlobal}`
+        clone.vModel = `field${this.idGlobal}`;
-        clone.placeholder !== undefined && (clone.placeholder += clone.label)
+        clone.placeholder !== undefined && (clone.placeholder += clone.label);
-        tempActiveData = clone
+        tempActiveData = clone;
-      } else if (clone.layout === 'rowFormItem') {
+      } else if (clone.layout === "rowFormItem") {
-        delete clone.label
+        delete clone.label;
-        clone.componentName = `row${this.idGlobal}`
+        clone.componentName = `row${this.idGlobal}`;
-        clone.gutter = this.formConf.gutter
+        clone.gutter = this.formConf.gutter;
-        tempActiveData = clone
+        tempActiveData = clone;
       }
-      return tempActiveData
+      return tempActiveData;
     },
     AssembleFormData() {
       this.formData = {
         fields: JSON.parse(JSON.stringify(this.drawingList)),
-        ...this.formConf
+        ...this.formConf,
-      }
+      };
     },
     generate(data) {
-      const func = this[`exec${titleCase(this.operationType)}`]
+      const func = this[`exec${titleCase(this.operationType)}`];
-      this.generateConf = data
+      this.generateConf = data;
-      func && func(data)
+      func && func(data);
     },
     execRun(data) {
-      this.AssembleFormData()
+      this.AssembleFormData();
-      this.drawerVisible = true
+      this.drawerVisible = true;
     },
     execDownload(data) {
-      const codeStr = this.generateCode()
+      const codeStr = this.generateCode();
-      const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
+      const blob = new Blob([codeStr], { type: "text/plain;charset=utf-8" });
-      this.$download.saveAs(blob, data.fileName)
+      this.$download.saveAs(blob, data.fileName);
     },
     execCopy(data) {
-      document.getElementById('copyNode').click()
+      document.getElementById("copyNode").click();
     },
     empty() {
-      this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(
+      this.$confirm("确定要清空所有组件吗？", "提示", { type: "warning" }).then(
         () => {
-          this.drawingList = []
+          this.drawingList = [];
         }
-      )
+      );
     },
     drawingItemCopy(item, parent) {
-      let clone = JSON.parse(JSON.stringify(item))
+      let clone = JSON.parse(JSON.stringify(item));
-      clone = this.createIdAndKey(clone)
+      clone = this.createIdAndKey(clone);
-      parent.push(clone)
+      parent.push(clone);
-      this.activeFormItem(clone)
+      this.activeFormItem(clone);
     },
     createIdAndKey(item) {
-      item.formId = ++this.idGlobal
+      item.formId = ++this.idGlobal;
-      item.renderKey = +new Date()
+      item.renderKey = +new Date();
-      if (item.layout === 'colFormItem') {
+      if (item.layout === "colFormItem") {
-        item.vModel = `field${this.idGlobal}`
+        item.vModel = `field${this.idGlobal}`;
-      } else if (item.layout === 'rowFormItem') {
+      } else if (item.layout === "rowFormItem") {
-        item.componentName = `row${this.idGlobal}`
+        item.componentName = `row${this.idGlobal}`;
       }
       if (Array.isArray(item.children)) {
-        item.children = item.children.map(childItem => this.createIdAndKey(childItem))
+        item.children = item.children.map((childItem) =>
+          this.createIdAndKey(childItem)
+        );
       }
-      return item
+      return item;
     },
     drawingItemDelete(index, parent) {
-      parent.splice(index, 1)
+      parent.splice(index, 1);
       this.$nextTick(() => {
-        const len = this.drawingList.length
+        const len = this.drawingList.length;
         if (len) {
-          this.activeFormItem(this.drawingList[len - 1])
+          this.activeFormItem(this.drawingList[len - 1]);
         }
-      })
+      });
     },
     generateCode() {
-      const { type } = this.generateConf
+      const { type } = this.generateConf;
-      this.AssembleFormData()
+      this.AssembleFormData();
-      const script = vueScript(makeUpJs(this.formData, type))
+      const script = vueScript(makeUpJs(this.formData, type));
-      const html = vueTemplate(makeUpHtml(this.formData, type))
+      const html = vueTemplate(makeUpHtml(this.formData, type));
-      const css = cssStyle(makeUpCss(this.formData))
+      const css = cssStyle(makeUpCss(this.formData));
-      return beautifier.html(html + script + css, beautifierConf.html)
+      return beautifier.html(html + script + css, beautifierConf.html);
     },
     download() {
-      this.dialogVisible = true
+      this.dialogVisible = true;
-      this.showFileName = true
+      this.showFileName = true;
-      this.operationType = 'download'
+      this.operationType = "download";
     },
     run() {
-      this.dialogVisible = true
+      this.dialogVisible = true;
-      this.showFileName = false
+      this.showFileName = false;
-      this.operationType = 'run'
+      this.operationType = "run";
     },
     copy() {
-      this.dialogVisible = true
+      this.dialogVisible = true;
-      this.showFileName = false
+      this.showFileName = false;
-      this.operationType = 'copy'
+      this.operationType = "copy";
     },
     tagChange(newTag) {
-      newTag = this.cloneComponent(newTag)
+      newTag = this.cloneComponent(newTag);
-      newTag.vModel = this.activeData.vModel
+      newTag.vModel = this.activeData.vModel;
-      newTag.formId = this.activeId
+      newTag.formId = this.activeId;
-      newTag.span = this.activeData.span
+      newTag.span = this.activeData.span;
-      delete this.activeData.tag
+      delete this.activeData.tag;
-      delete this.activeData.tagIcon
+      delete this.activeData.tagIcon;
-      delete this.activeData.document
+      delete this.activeData.document;
-      Object.keys(newTag).forEach(key => {
+      Object.keys(newTag).forEach((key) => {
-        if (this.activeData[key] !== undefined
+        if (
-          && typeof this.activeData[key] === typeof newTag[key]) {
+          this.activeData[key] !== undefined &&
-          newTag[key] = this.activeData[key]
+          typeof this.activeData[key] === typeof newTag[key]
+        ) {
+          newTag[key] = this.activeData[key];
         }
-      })
+      });
-      this.activeData = newTag
+      this.activeData = newTag;
-      this.updateDrawingList(newTag, this.drawingList)
+      this.updateDrawingList(newTag, this.drawingList);
     },
     updateDrawingList(newTag, list) {
-      const index = list.findIndex(item => item.formId === this.activeId)
+      const index = list.findIndex((item) => item.formId === this.activeId);
       if (index > -1) {
-        list.splice(index, 1, newTag)
+        list.splice(index, 1, newTag);
       } else {
-        list.forEach(item => {
+        list.forEach((item) => {
-          if (Array.isArray(item.children)) this.updateDrawingList(newTag, item.children)
+          if (Array.isArray(item.children))
-        })
+            this.updateDrawingList(newTag, item.children);
-      }
+        });
-    }
-  }
       }
+    },
+  },
+};
 </script>
 
-<style lang='scss'>
+<style lang="scss">
 .editor-tabs {
   background: #121315;
   .el-tabs__header {
@@ -445,7 +482,7 @@ export default {
     cursor: pointer;
     font-size: 12px;
     &:hover {
-      background: rgba(210, 23, 23, 0.5)
+      background: rgba(210, 23, 23, 0.5);
     }
   }
   & + .reg-item {
@@ -474,7 +511,7 @@ export default {
     margin-left: 6px;
   }
   .el-icon-plus {
-    color: #409EFF;
+    color: #409eff;
   }
   .el-icon-delete {
     color: #157a0c;
@@ -494,7 +531,7 @@ export default {
 }
 
 $selectedColor: #f6f7ff;
-$lighterBlue: #409EFF;
+$lighterBlue: #409eff;
 
 .container {
   position: relative;
@@ -585,12 +622,12 @@ $lighterBlue: #409EFF;
   height: 42px;
   text-align: right;
   padding: 0 15px;
-  box-sizing: border-box;;
+  box-sizing: border-box;
   border: 1px solid #f1e8e8;
   border-top: none;
   border-left: none;
   .delete-btn {
-    color: #F56C6C;
+    color: #f56c6c;
   }
 }
 .logo-wrapper {
@@ -665,7 +702,8 @@ $lighterBlue: #409EFF;
       background: $selectedColor;
       border-radius: 6px;
     }
-    & > .drawing-item-copy, & > .drawing-item-delete{
+    & > .drawing-item-copy,
+    & > .drawing-item-delete {
       display: initial;
     }
     & > .component-name {
@@ -719,17 +757,20 @@ $lighterBlue: #409EFF;
     padding: 0 6px;
   }
 }
-.drawing-item, .drawing-row-item{
+.drawing-item,
+.drawing-row-item {
   &:hover {
     & > .el-form-item {
       background: $selectedColor;
       border-radius: 6px;
     }
-    & > .drawing-item-copy, & > .drawing-item-delete{
+    & > .drawing-item-copy,
+    & > .drawing-item-delete {
       display: initial;
     }
   }
-  & > .drawing-item-copy, & > .drawing-item-delete{
+  & > .drawing-item-copy,
+  & > .drawing-item-delete {
     display: none;
     position: absolute;
     top: -10px;
@@ -755,11 +796,11 @@ $lighterBlue: #409EFF;
   }
   & > .drawing-item-delete {
     right: 24px;
-    border-color: #F56C6C;
+    border-color: #f56c6c;
-    color: #F56C6C;
+    color: #f56c6c;
     background: #fff;
     &:hover {
-      background: #F56C6C;
+      background: #f56c6c;
       color: #fff;
     }
   }