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

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平均温度
-export function stackAveTemp(siteId) {
+//poc温度
+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,48 +1,60 @@
 <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="/">
-        <img :src="logo" class="sidebar-logo" />
-<!--        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>-->
+      <router-link
+        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="/">
         <img :src="logo" class="sidebar-logo" />
-<!--        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>-->
+        <!--        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>-->
       </router-link>
     </transition>
   </div>
 </template>
 
 <script>
-import logoImg from '@/assets/logo/logo.png'
-import variables from '@/assets/styles/variables.scss'
-import logo from '@/assets/images/ems/logo.png'
-import logoLarge from '@/assets/images/ems/logo-large.png'
+import variables from "@/assets/styles/variables.scss";
+import logo from "@/assets/images/ems/logo.png";
+import logoSmall from "@/assets/images/ems/logo-small.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
-    }
-  }
-}
+      logo: logo,
+      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,107 +1,125 @@
-
 <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"/>
+    <div style="height: 360px" id="cnglqxChart" />
   </el-card>
 </template>
 
 <style scoped lang="scss"></style>
 <script>
-import * as echarts from 'echarts'
-import resize from '@/mixins/ems/resize'
-import {formatDate} from "@/filters/ems";
-import {storagePower} from '@/api/ems/dzjk'
+import * as echarts from "echarts";
+import resize from "@/mixins/ems/resize";
+import { formatDate } from "@/filters/ems";
+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 = null
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
-    init(siteId){
-      this.chart.showLoading()
-      const x = []
-      const data1 =[],data2 =[]
-      storagePower(siteId).then(response => {
-        const source = response?.data?.energyStoragePowList || []
-        source.forEach(item=>{
-          x.push(formatDate(item.createDate,false,true))
-          data1.push(item.pcsTotalActPower)
-          data2.push(item.pcsTotalReactivePower)
+    init(siteId) {
+      this.chart.showLoading();
+      const x = [];
+      const data1 = [],
+        data2 = [];
+      storagePower(siteId)
+        .then((response) => {
+          this.setOption(response?.data?.pcsPowerList || []);
         })
-        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',
-          top: '10',
+          left: "center",
+          top: "5",
+          itemWidth: 10,
+          itemHeight: 5,
+          textStyle: {
+            fontSize: 9,
+          },
         },
         grid: {
-          containLabel: true
+          containLabel: true,
         },
         tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
         },
-        textStyle:{
-          color:"#333333",
+        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:'PCS实时有功功率',
-            type: 'line',
-            areaStyle: {
-              color:'#FFBD00'
-            },
-            data: data1,
-          },{
-            name:'PCS实时无功功率',
-            type: 'line',
-            areaStyle: {
-              color: '#3C81FF'
-            },
-            data: data2
-          }]
-      })
-    }
-  }
-}
-
+        series,
+      });
+    },
+  },
+};
 </script>

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

@@ -1,99 +1,106 @@
-
 <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"/>
+    <div style="height: 360px" id="dcpjsocChart" />
   </el-card>
 </template>
 
 <style scoped lang="scss"></style>
 <script>
-import * as echarts from 'echarts'
-import resize from '@/mixins/ems/resize'
-import {formatDate} from "@/filters/ems";
-import {batteryAveSoc} from '@/api/ems/dzjk'
+import * as echarts from "echarts";
+import resize from "@/mixins/ems/resize";
+import { formatDate } from "@/filters/ems";
+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 = null
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
-    init(siteId){
-      this.chart.showLoading()
-      const x = []
-      const data =[]
-      batteryAveSoc(siteId).then(response => {
-        const source = response?.data?.batteryAveSOCList || []
-        source.forEach(item=>{
-          x.push(formatDate(item.createDate,false,true))
-          data.push(item.batterySOC)
+    init(siteId) {
+      this.chart.showLoading();
+      batteryAveSoc(siteId)
+        .then((response) => {
+          this.setOption(response?.data?.batteryAveSOCList || []);
         })
-        this.setOption(x,data)
-      }).finally(()=>{
-        this.chart.hideLoading()
-      })
+        .finally(() => {
+          this.chart.hideLoading();
+        });
     },
-    setOption(x,data) {
-      this.chart.setOption({
-        color:['#FFBD00','#3C81FF'],
-        // legend: {
-        //   left: 'center',
-        //   bottom: '10',
-        // },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
+    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,
+          },
         },
         grid: {
-          containLabel: true
+          containLabel: true,
         },
-        textStyle:{
-          color:"#333333",
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
         },
-        xAxis: {type:'category',data:x},
+        textStyle: {
+          color: "#333333",
+        },
+        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',
-            data: data,
-            type: 'line',
+            type: "line",
+            name: `平均SOC`,
             areaStyle: {
-              color:'#FFBD00'
-            }
-
-          }]
-      })
-    }
-  }
-}
-
+              // color:'#FFBD00'
+            },
+            data: ydata,
+          },
+        ],
+      });
+    },
+  },
+};
 </script>

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

@@ -1,99 +1,110 @@
-
 <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>
-    <div style="height: 360px" id="dcpjwdChart"/>
+    <div style="height: 360px" id="dcpjwdChart" />
   </el-card>
 </template>
 
 <style scoped lang="scss"></style>
 <script>
-import * as echarts from 'echarts'
-import resize from '@/mixins/ems/resize'
-import {formatDate} from "@/filters/ems";
-import {batteryAveTemp} from '@/api/ems/dzjk'
+import * as echarts from "echarts";
+import resize from "@/mixins/ems/resize";
+import { formatDate } from "@/filters/ems";
+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 = null
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
-    init(siteId){
-      this.chart.showLoading()
-      const x = []
-      const data1 =[],data2 =[]
-      batteryAveTemp(siteId).then(response => {
-        const source = response?.data?.batteryAveTempList || []
-        source.forEach(item=>{
-          x.push(formatDate(item.createDate,false,true))
-          data1.push(item.batteryTemp)
+    init(siteId) {
+      this.chart.showLoading();
+      const x = [];
+      const data1 = [],
+        data2 = [];
+      batteryAveTemp(siteId)
+        .then((response) => {
+          this.setOption(response?.data?.batteryAveTempList || []);
         })
-        this.setOption(x,data1,data2)
-      }).finally(()=>{
-        this.chart.hideLoading()
-      })
+        .finally(() => {
+          this.chart.hideLoading();
+        });
     },
-    setOption(x,data) {
-      this.chart.setOption({
-        color:['#3C81FF'],
-        // legend: {
-        //   left: 'center',
-        //   bottom: '10',
-        // },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
+    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,
+          },
         },
         grid: {
-          containLabel: true
+          containLabel: true,
         },
-        textStyle:{
-          color:"#333333",
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
         },
-        xAxis: {type:'category',data:x},
+        textStyle: {
+          color: "#333333",
+        },
+        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:'电池平均温度',
-            data: data,
-            type: 'line',
+            type: "line",
+            name: `电池平均温度`,
             areaStyle: {
-              color:'#3C81FF'
+              // color:'#FFBD00'
             },
-          }]
-      })
-    }
-  }
-}
-
+            data: ydata,
+          },
+        ],
+      });
+    },
+  },
+};
 </script>

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

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

src/views/login.vue

@@ -1,7 +1,18 @@
 <template>
   <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">{{title}}</h3>
+    <img :src="loginBg" alt="" srcset="" class="login-bg" />
+    <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"/>
+          <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>
@@ -62,121 +91,153 @@
 </template>
 
 <script>
-import { getCodeImg } from "@/api/login"
-import Cookies from "js-cookie"
-import { encrypt, decrypt } from '@/utils/jsencrypt'
+import { getCodeImg } from "@/api/login";
+import Cookies from "js-cookie";
+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
+      handler: function (route) {
+        this.redirect = route.query && route.query.redirect;
       },
-      immediate: true
-    }
+      immediate: true,
+    },
   },
   created() {
-    this.getCode()
-    this.getCookie()
+    this.getCode();
+    this.getCookie();
+  },
+  mounted() {
+    this.updateInterval(this.updateBgNum, 5000);
   },
   methods: {
+    updateBgNum() {
+      if (this.bgNum >= 4) this.bgNum = 0;
+      this.bgNum += 1;
+    },
     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
+          this.codeUrl = "data:image/gif;base64," + res.img;
+          this.loginForm.uuid = res.uuid;
         }
-      })
+      });
     },
     getCookie() {
-      const username = Cookies.get("username")
-      const password = Cookies.get("password")
-      const rememberMe = Cookies.get('rememberMe')
+      const username = Cookies.get("username");
+      const password = Cookies.get("password");
+      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
+          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("username", this.loginForm.username, { 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("username");
+            Cookies.remove("password");
+            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>
 
 <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 {
-  margin: 0px auto 30px auto;
-  text-align: center;
-  color: #707070;
+.login-bg {
+  position: absolute;
+  top: 0;
+  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;
-  z-index: 1;
+  padding: 0 25px 5px 25px;
+  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">
-      <h3 class="title">{{title}}</h3>
+    <img :src="loginBg" alt="" srcset="" class="login-bg" />
+    <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="账号">
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+        <el-input
+          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"/>
+          <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;">
-          <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
+        <div style="float: right">
+          <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 => {
-        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.registerForm.uuid = res.uuid
+          this.codeUrl = "data:image/gif;base64," + res.img;
+          this.registerForm.uuid = res.uuid;
         }
-      })
+      });
     },
     handleRegister() {
-      this.$refs.registerForm.validate(valid => {
+      this.$refs.registerForm.validate((valid) => {
         if (valid) {
-          this.loading = true
-          register(this.registerForm).then(res => {
-            const username = this.registerForm.username
-            this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
-              dangerouslyUseHTMLString: true,
-              type: 'success'
-            }).then(() => {
-              this.$router.push("/login")
-            }).catch(() => {})
-          }).catch(() => {
-            this.loading = false
-            if (this.captchaEnabled) {
-              this.getCode()
-            }
-          })
+          this.loading = true;
+          register(this.registerForm)
+            .then((res) => {
+              const username = this.registerForm.username;
+              this.$alert(
+                "<font color='red'>恭喜你，您的账号 " +
+                  username +
+                  " 注册成功！</font>",
+                "系统提示",
+                {
+                  dangerouslyUseHTMLString: true,
+                  type: "success",
+                }
+              )
+                .then(() => {
+                  this.$router.push("/login");
+                })
+                .catch(() => {});
+            })
+            .catch(() => {
+              this.loading = false;
+              if (this.captchaEnabled) {
+                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 {
-  margin: 0px auto 30px auto;
-  text-align: center;
-  color: #707070;
+.login-bg {
+  position: absolute;
+  top: 0;
+  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">
-          <img :src="logo" alt="logo"> Form Generator
-        </div>
+        <div class="logo"><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"
-            :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
-            draggable=".components-item" :sort="false" @end="onEnd"
+            class="components-draggable"
+            :list="layoutComponents"
+            :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 beautifier from 'js-beautify'
-import ClipboardJS from 'clipboard'
-import render from '@/utils/generator/render'
-import RightPanel from './RightPanel'
-import { inputComponents, selectComponents, layoutComponents, formConf } from '@/utils/generator/config'
-import { beautifierConf, titleCase } from '@/utils/index'
-import { 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/logo/logo.png'
-import CodeTypeDialog from './CodeTypeDialog'
-import DraggableItem from './DraggableItem'
+import draggable from "vuedraggable";
+import beautifier from "js-beautify";
+import ClipboardJS from "clipboard";
+import render from "@/utils/generator/render";
+import RightPanel from "./RightPanel";
+import {
+  inputComponents,
+  selectComponents,
+  layoutComponents,
+  formConf,
+} from "@/utils/generator/config";
+import { beautifierConf, titleCase } from "@/utils/index";
+import {
+  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 tempActiveData
+let oldActiveId;
+let tempActiveData;
 
 export default {
   components: {
@@ -160,7 +191,7 @@ export default {
     render,
     RightPanel,
     CodeTypeDialog,
-    DraggableItem
+    DraggableItem,
   },
   data() {
     return {
@@ -179,207 +210,213 @@ export default {
       dialogVisible: false,
       generateConf: null,
       showFileName: false,
-      activeData: drawingDefault[0]
-    }
+      activeData: drawingDefault[0],
+    };
   },
   created() {
     // 防止 firefox 下 拖拽 会新打卡一个选项卡
-    document.body.ondrop = event => {
-      event.preventDefault()
-      event.stopPropagation()
-    }
+    document.body.ondrop = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
   },
   watch: {
-    'activeData.label': function (val, oldVal) {
+    "activeData.label": function (val, oldVal) {
       if (
-        this.activeData.placeholder === undefined
-        || !this.activeData.tag
-        || oldActiveId !== this.activeId
+        this.activeData.placeholder === undefined ||
+        !this.activeData.tag ||
+        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', {
-      text: trigger => {
-        const codeStr = this.generateCode()
+    const clipboard = new ClipboardJS("#copyNode", {
+      text: (trigger) => {
+        const codeStr = this.generateCode();
         this.$notify({
-          title: '成功',
-          message: '代码已复制到剪切板，可粘贴。',
-          type: 'success'
-        })
-        return codeStr
-      }
-    })
-    clipboard.on('error', e => {
-      this.$message.error('代码复制失败')
-    })
+          title: "成功",
+          message: "代码已复制到剪切板，可粘贴。",
+          type: "success",
+        });
+        return codeStr;
+      },
+    });
+    clipboard.on("error", (e) => {
+      this.$message.error("代码复制失败");
+    });
   },
   methods: {
     activeFormItem(element) {
-      this.activeData = element
-      this.activeId = element.formId
+      this.activeData = element;
+      this.activeId = element.formId;
     },
     onEnd(obj, a) {
       if (obj.from !== obj.to) {
-        this.activeData = tempActiveData
-        this.activeId = this.idGlobal
+        this.activeData = tempActiveData;
+        this.activeId = this.idGlobal;
       }
     },
     addComponent(item) {
-      const clone = this.cloneComponent(item)
-      this.drawingList.push(clone)
-      this.activeFormItem(clone)
+      const clone = this.cloneComponent(item);
+      this.drawingList.push(clone);
+      this.activeFormItem(clone);
     },
     cloneComponent(origin) {
-      const clone = JSON.parse(JSON.stringify(origin))
-      clone.formId = ++this.idGlobal
-      clone.span = formConf.span
-      clone.renderKey = +new Date() // 改变renderKey后可以实现强制更新组件
-      if (!clone.layout) clone.layout = 'colFormItem'
-      if (clone.layout === 'colFormItem') {
-        clone.vModel = `field${this.idGlobal}`
-        clone.placeholder !== undefined && (clone.placeholder += clone.label)
-        tempActiveData = clone
-      } else if (clone.layout === 'rowFormItem') {
-        delete clone.label
-        clone.componentName = `row${this.idGlobal}`
-        clone.gutter = this.formConf.gutter
-        tempActiveData = clone
+      const clone = JSON.parse(JSON.stringify(origin));
+      clone.formId = ++this.idGlobal;
+      clone.span = formConf.span;
+      clone.renderKey = +new Date(); // 改变renderKey后可以实现强制更新组件
+      if (!clone.layout) clone.layout = "colFormItem";
+      if (clone.layout === "colFormItem") {
+        clone.vModel = `field${this.idGlobal}`;
+        clone.placeholder !== undefined && (clone.placeholder += clone.label);
+        tempActiveData = clone;
+      } else if (clone.layout === "rowFormItem") {
+        delete clone.label;
+        clone.componentName = `row${this.idGlobal}`;
+        clone.gutter = this.formConf.gutter;
+        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)}`]
-      this.generateConf = data
-      func && func(data)
+      const func = this[`exec${titleCase(this.operationType)}`];
+      this.generateConf = data;
+      func && func(data);
     },
     execRun(data) {
-      this.AssembleFormData()
-      this.drawerVisible = true
+      this.AssembleFormData();
+      this.drawerVisible = true;
     },
     execDownload(data) {
-      const codeStr = this.generateCode()
-      const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
-      this.$download.saveAs(blob, data.fileName)
+      const codeStr = this.generateCode();
+      const blob = new Blob([codeStr], { type: "text/plain;charset=utf-8" });
+      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))
-      clone = this.createIdAndKey(clone)
-      parent.push(clone)
-      this.activeFormItem(clone)
+      let clone = JSON.parse(JSON.stringify(item));
+      clone = this.createIdAndKey(clone);
+      parent.push(clone);
+      this.activeFormItem(clone);
     },
     createIdAndKey(item) {
-      item.formId = ++this.idGlobal
-      item.renderKey = +new Date()
-      if (item.layout === 'colFormItem') {
-        item.vModel = `field${this.idGlobal}`
-      } else if (item.layout === 'rowFormItem') {
-        item.componentName = `row${this.idGlobal}`
+      item.formId = ++this.idGlobal;
+      item.renderKey = +new Date();
+      if (item.layout === "colFormItem") {
+        item.vModel = `field${this.idGlobal}`;
+      } else if (item.layout === "rowFormItem") {
+        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
-      this.AssembleFormData()
-      const script = vueScript(makeUpJs(this.formData, type))
-      const html = vueTemplate(makeUpHtml(this.formData, type))
-      const css = cssStyle(makeUpCss(this.formData))
-      return beautifier.html(html + script + css, beautifierConf.html)
+      const { type } = this.generateConf;
+      this.AssembleFormData();
+      const script = vueScript(makeUpJs(this.formData, type));
+      const html = vueTemplate(makeUpHtml(this.formData, type));
+      const css = cssStyle(makeUpCss(this.formData));
+      return beautifier.html(html + script + css, beautifierConf.html);
     },
     download() {
-      this.dialogVisible = true
-      this.showFileName = true
-      this.operationType = 'download'
+      this.dialogVisible = true;
+      this.showFileName = true;
+      this.operationType = "download";
     },
     run() {
-      this.dialogVisible = true
-      this.showFileName = false
-      this.operationType = 'run'
+      this.dialogVisible = true;
+      this.showFileName = false;
+      this.operationType = "run";
     },
     copy() {
-      this.dialogVisible = true
-      this.showFileName = false
-      this.operationType = 'copy'
+      this.dialogVisible = true;
+      this.showFileName = false;
+      this.operationType = "copy";
     },
     tagChange(newTag) {
-      newTag = this.cloneComponent(newTag)
-      newTag.vModel = this.activeData.vModel
-      newTag.formId = this.activeId
-      newTag.span = this.activeData.span
-      delete this.activeData.tag
-      delete this.activeData.tagIcon
-      delete this.activeData.document
-      Object.keys(newTag).forEach(key => {
-        if (this.activeData[key] !== undefined
-          && typeof this.activeData[key] === typeof newTag[key]) {
-          newTag[key] = this.activeData[key]
+      newTag = this.cloneComponent(newTag);
+      newTag.vModel = this.activeData.vModel;
+      newTag.formId = this.activeId;
+      newTag.span = this.activeData.span;
+      delete this.activeData.tag;
+      delete this.activeData.tagIcon;
+      delete this.activeData.document;
+      Object.keys(newTag).forEach((key) => {
+        if (
+          this.activeData[key] !== undefined &&
+          typeof this.activeData[key] === typeof newTag[key]
+        ) {
+          newTag[key] = this.activeData[key];
         }
-      })
-      this.activeData = newTag
-      this.updateDrawingList(newTag, this.drawingList)
+      });
+      this.activeData = newTag;
+      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 => {
-          if (Array.isArray(item.children)) this.updateDrawingList(newTag, item.children)
-        })
+        list.forEach((item) => {
+          if (Array.isArray(item.children))
+            this.updateDrawingList(newTag, item.children);
+        });
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
-<style lang='scss'>
-.editor-tabs{
+<style lang="scss">
+.editor-tabs {
   background: #121315;
-  .el-tabs__header{
+  .el-tabs__header {
     margin: 0;
     border-bottom-color: #121315;
-    .el-tabs__nav{
+    .el-tabs__nav {
       border-color: #121315;
     }
   }
-  .el-tabs__item{
+  .el-tabs__item {
     height: 32px;
     line-height: 32px;
     color: #888a8e;
@@ -388,15 +425,15 @@ export default {
     margin-right: 5px;
     user-select: none;
   }
-  .el-tabs__item.is-active{
+  .el-tabs__item.is-active {
     background: #1e1e1e;
-    border-bottom-color: #1e1e1e!important;
+    border-bottom-color: #1e1e1e !important;
     color: #fff;
   }
-  .el-icon-edit{
+  .el-icon-edit {
     color: #f1fa8c;
   }
-  .el-icon-document{
+  .el-icon-document {
     color: #a95812;
   }
 }
@@ -412,24 +449,24 @@ export default {
   overflow-x: hidden !important;
   margin-bottom: 0 !important;
 }
-.center-tabs{
-  .el-tabs__header{
-    margin-bottom: 0!important;
+.center-tabs {
+  .el-tabs__header {
+    margin-bottom: 0 !important;
   }
-  .el-tabs__item{
+  .el-tabs__item {
     width: 50%;
     text-align: center;
   }
-  .el-tabs__nav{
+  .el-tabs__nav {
     width: 100%;
   }
 }
-.reg-item{
+.reg-item {
   padding: 12px 6px;
   background: #f8f8f8;
   position: relative;
   border-radius: 4px;
-  .close-btn{
+  .close-btn {
     position: absolute;
     right: -6px;
     top: -6px;
@@ -444,16 +481,16 @@ export default {
     z-index: 1;
     cursor: pointer;
     font-size: 12px;
-    &:hover{
-      background: rgba(210, 23, 23, 0.5)
+    &:hover {
+      background: rgba(210, 23, 23, 0.5);
     }
   }
-  & + .reg-item{
+  & + .reg-item {
     margin-top: 18px;
   }
 }
-.action-bar{
-  & .el-button+.el-button {
+.action-bar {
+  & .el-button + .el-button {
     margin-left: 15px;
   }
   & i {
@@ -464,37 +501,37 @@ export default {
   }
 }
 
-.custom-tree-node{
+.custom-tree-node {
   width: 100%;
   font-size: 14px;
-  .node-operation{
+  .node-operation {
     float: right;
   }
-  i[class*="el-icon"] + i[class*="el-icon"]{
+  i[class*="el-icon"] + i[class*="el-icon"] {
     margin-left: 6px;
   }
-  .el-icon-plus{
-    color: #409EFF;
+  .el-icon-plus {
+    color: #409eff;
   }
-  .el-icon-delete{
+  .el-icon-delete {
     color: #157a0c;
   }
 }
 
-.left-scrollbar .el-scrollbar__view{
+.left-scrollbar .el-scrollbar__view {
   overflow-x: hidden;
 }
 
-.el-rate{
+.el-rate {
   display: inline-block;
   vertical-align: text-top;
 }
-.el-upload__tip{
+.el-upload__tip {
   line-height: 1.2;
 }
 
 $selectedColor: #f6f7ff;
-$lighterBlue: #409EFF;
+$lighterBlue: #409eff;
 
 .container {
   position: relative;
@@ -513,14 +550,14 @@ $lighterBlue: #409EFF;
     transition: transform 0ms !important;
   }
 }
-.components-draggable{
+.components-draggable {
   padding-bottom: 20px;
 }
-.components-title{
+.components-title {
   font-size: 14px;
   color: #222;
   margin: 6px 2px;
-  .svg-icon{
+  .svg-icon {
     color: #666;
     font-size: 18px;
   }
@@ -533,7 +570,7 @@ $lighterBlue: #409EFF;
   cursor: move;
   border: 1px dashed $selectedColor;
   border-radius: 3px;
-  .svg-icon{
+  .svg-icon {
     color: #777;
     font-size: 15px;
   }
@@ -553,7 +590,7 @@ $lighterBlue: #409EFF;
   top: 0;
   height: 100vh;
 }
-.left-scrollbar{
+.left-scrollbar {
   height: calc(100vh - 42px);
   overflow: hidden;
 }
@@ -570,7 +607,7 @@ $lighterBlue: #409EFF;
   margin: 0 350px 0 260px;
   box-sizing: border-box;
 }
-.empty-info{
+.empty-info {
   position: absolute;
   top: 46%;
   left: 0;
@@ -580,27 +617,27 @@ $lighterBlue: #409EFF;
   color: #ccb1ea;
   letter-spacing: 4px;
 }
-.action-bar{
+.action-bar {
   position: relative;
   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;
+  .delete-btn {
+    color: #f56c6c;
   }
 }
-.logo-wrapper{
+.logo-wrapper {
   position: relative;
   height: 42px;
   background: #fff;
   border-bottom: 1px solid #f1e8e8;
   box-sizing: border-box;
 }
-.logo{
+.logo {
   position: absolute;
   left: 12px;
   top: 6px;
@@ -609,16 +646,16 @@ $lighterBlue: #409EFF;
   font-weight: 600;
   font-size: 17px;
   white-space: nowrap;
-  > img{
+  > img {
     width: 30px;
     height: 30px;
     vertical-align: top;
   }
-  .github{
+  .github {
     display: inline-block;
     vertical-align: sub;
     margin-left: 15px;
-    > img{
+    > img {
       height: 22px;
     }
   }
@@ -661,32 +698,33 @@ $lighterBlue: #409EFF;
     background-color: $selectedColor;
   }
   .active-from-item {
-    & > .el-form-item{
+    & > .el-form-item {
       background: $selectedColor;
       border-radius: 6px;
     }
-    & > .drawing-item-copy, & > .drawing-item-delete{
+    & > .drawing-item-copy,
+    & > .drawing-item-delete {
       display: initial;
     }
-    & > .component-name{
+    & > .component-name {
       color: $lighterBlue;
     }
   }
-  .el-form-item{
+  .el-form-item {
     margin-bottom: 15px;
   }
 }
-.drawing-item{
+.drawing-item {
   position: relative;
   cursor: move;
-  &.unfocus-bordered:not(.activeFromItem) > div:first-child  {
+  &.unfocus-bordered:not(.activeFromItem) > div:first-child {
     border: 1px dashed #ccc;
   }
-  .el-form-item{
+  .el-form-item {
     padding: 12px 10px;
   }
 }
-.drawing-row-item{
+.drawing-row-item {
   position: relative;
   cursor: move;
   box-sizing: border-box;
@@ -697,19 +735,19 @@ $lighterBlue: #409EFF;
   .drawing-row-item {
     margin-bottom: 2px;
   }
-  .el-col{
+  .el-col {
     margin-top: 22px;
   }
-  .el-form-item{
+  .el-form-item {
     margin-bottom: 0;
   }
-  .drag-wrapper{
+  .drag-wrapper {
     min-height: 80px;
   }
-  &.active-from-item{
+  &.active-from-item {
     border: 1px dashed $lighterBlue;
   }
-  .component-name{
+  .component-name {
     position: absolute;
     top: 0;
     left: 0;
@@ -719,17 +757,20 @@ $lighterBlue: #409EFF;
     padding: 0 6px;
   }
 }
-.drawing-item, .drawing-row-item{
+.drawing-item,
+.drawing-row-item {
   &:hover {
-    & > .el-form-item{
+    & > .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;
@@ -743,23 +784,23 @@ $lighterBlue: #409EFF;
     cursor: pointer;
     z-index: 1;
   }
-  & > .drawing-item-copy{
+  & > .drawing-item-copy {
     right: 56px;
     border-color: $lighterBlue;
     color: $lighterBlue;
     background: #fff;
-    &:hover{
+    &:hover {
       background: $lighterBlue;
       color: #fff;
     }
   }
-  & > .drawing-item-delete{
+  & > .drawing-item-delete {
     right: 24px;
-    border-color: #F56C6C;
-    color: #F56C6C;
+    border-color: #f56c6c;
+    color: #f56c6c;
     background: #fff;
-    &:hover{
-      background: #F56C6C;
+    &:hover {
+      background: #f56c6c;
       color: #fff;
     }
   }