system-clients 3.2.20 → 3.2.21

package/SystemClient.iml

@@ -1,9 +1,9 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module external.linked.project.id="SystemClient" external.linked.project.path="$MODULE_DIR$" external.root.project.path="$MODULE_DIR$" external.system.id="GRADLE" type="JAVA_MODULE" version="4">
-  <component name="NewModuleRootManager" inherit-compiler-output="true">
-    <exclude-output />
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
+<?xml version="1.0" encoding="UTF-8"?>
+<module external.linked.project.id="SystemClient" external.linked.project.path="$MODULE_DIR$" external.root.project.path="$MODULE_DIR$" external.system.id="GRADLE" type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
 </module>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "system-clients",
-  "version": "3.2.20",
+  "version": "3.2.21",
   "description": "系统基础框架",
   "main": "src/index.js",
   "directories": {

package/src/App.vue

@@ -1,24 +1,24 @@
-<template>
-  <app-base class="bg">
-    <div class='flex'>
-      <article>
-        <!--<route :comp="{name: 'check-model'}"></route>-->
-        <!--<route :comp="{name: 'vender-management'}"></route>-->
-        <route :comp="{name: 'login'}"></route>
-        <!-- <route :comp="{name: 'load-data'}"></route> -->
-        <!-- <route  :comp="{name: 'load-params', props: {componentName: 'login'}}"></route> -->
-        <!-- <route :comp="{name: 'load-params', props: {dataUrl: ['rs/sql/getMeterBrand','rs/sql/getPriceType','rs/sql/getMeterStyle'], componentName: 'login'}}"></route> -->
-      </article>
-    </div>
-  </app-base>
-</template>
-
-<script>
-// import cardListen from './plugins/CardListen'
-
-export default {
-  // ready () {
-  //   cardListen.startListen()
-  // }
-}
-</script>
+<template>
+  <app-base class="bg">
+    <div class='flex'>
+      <article>
+        <!--<route :comp="{name: 'check-model'}"></route>-->
+        <!--<route :comp="{name: 'vender-management'}"></route>-->
+        <route :comp="{name: 'login'}"></route>
+        <!-- <route :comp="{name: 'load-data'}"></route> -->
+        <!-- <route  :comp="{name: 'load-params', props: {componentName: 'login'}}"></route> -->
+        <!-- <route :comp="{name: 'load-params', props: {dataUrl: ['rs/sql/getMeterBrand','rs/sql/getPriceType','rs/sql/getMeterStyle'], componentName: 'login'}}"></route> -->
+      </article>
+    </div>
+  </app-base>
+</template>
+
+<script>
+// import cardListen from './plugins/CardListen'
+
+export default {
+  // ready () {
+  //   cardListen.startListen()
+  // }
+}
+</script>

package/src/components/server/LoginPage.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="login-box">
+    <div class="login-title" >
+      <div class="row auto">
+        <div style="width:80%;margin-top:25px;">
+          <span style="font-size: 0.8rem;color: white;">{{notice}}</span>
+        </div>
+        <div class="login-title-chi" style="white-space: nowrap;">
+          <span style="font-size: 1.2rem;"><b>关于我们</b></span>
+        </div>
+      </div>
+
+      <div class="row auto">
+        <div style="width: 30%;float: right;margin-top: 13rem;margin-right: 12.5rem;">
+
+          <div style="color: white;font-size: 2.5rem;text-align: center;">
+            <span>智 慧 燃 气 SaaS 云 平 台</span>
+          </div>
+
+          <div class="pt-1" style="color: white;font-size: 1.2rem;text-align: center;">
+            <span>燃气行业数字化解决方案</span>
+          </div>
+
+          <div style="margin-top: 2.7rem;padding-left: 7rem;">
+
+            <div class="pt-1" style="width: 82%;">
+              <div class="login_input">
+                <div @mouseenter="changeImageSrc(1, 'hover')"
+                     @mouseleave="changeImageSrc(1, '')">
+                  <img :src="enameImg">
+                  <span :class="enameShow ? 'color2' : 'color1'">|</span>
+                  <input type="text" placeholder=" 请输入登录账号" v-model="model.ename"/>
+                </div>
+              </div>
+            </div>
+
+            <div class="pt-1" style="width: 82%;">
+              <div class="login_input">
+                <div @mouseenter="changeImageSrc(2, 'hover')"
+                     @mouseleave="changeImageSrc(2, '')">
+                  <img :src="passwordImg">
+                  <span :class="passwordShow ? 'color2' : 'color1'">|</span>
+                  <input type="text" placeholder=" 请输入登录密码" v-model="model.password"/>
+                </div>
+              </div>
+            </div>
+
+
+            <div class="pt-1" style="width: 82%;">
+              <div class="login_input">
+                <div @mouseenter="changeImageSrc(3, 'hover')"
+                     @mouseleave="changeImageSrc(3, '')">
+                  <img :src="verificationCodeImg">
+                  <span :class="verificationCodeShow ? 'color2' : 'color1'">|</span>
+                  <input type="text" placeholder=" 请输入验证码" v-model="model.verificationCode"/>
+                  <span class="color2" style="float: right;padding-right: 2rem;" @click.native="createCode()">{{checkCode}}</span>
+                </div>
+              </div>
+            </div>
+            <div class="pt-1" style="width: 82%;padding-left: .667rem;color: white;font-size: 1rem">
+              <input type="checkbox" name="type">&nbsp;记住密码
+            </div>
+          </div>
+
+          <div class="pt-1" style="color: white;font-size: 1.2rem;text-align: center;">
+            <button class="btn_login" style="width: 20rem;" @click.native="confirm()">立即登录</button>
+          </div>
+
+        </div>
+
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  title: '登录',
+  data () {
+    return {
+      enameImg: '../../../static/guangxi/ename.png',
+      passwordImg: '../../../static/guangxi/password.png',
+      verificationCodeImg: '../../../static/guangxi/verificationCode.png',
+      enameShow: false,
+      passwordShow: false,
+      verificationCodeShow: false,
+      notice: '',
+      model: {
+        ename: '',
+        password: '',
+        verificationCode: ''
+      },
+      checkCode: ''
+    }
+  },
+  created () {
+    this.createCode()
+  },
+  methods: {
+    changeImageSrc (key, way) {
+      switch (key) {
+        case 1:
+          if (way) {
+            this.enameShow = true
+            this.enameImg = require(`../../../static/guangxi/enameCopy.png`)
+          } else if (!this.model.ename){
+            this.enameShow = false
+            this.enameImg = require(`../../../static/guangxi/ename.png`)
+          }
+          break
+        case 2:
+          if (way) {
+            this.passwordShow = true
+            this.passwordImg = require(`../../../static/guangxi/passwordCopy.png`)
+          } else if (!this.model.password){
+            this.passwordShow = false
+            this.passwordImg = require(`../../../static/guangxi/password.png`)
+          }
+          break
+        case 3:
+          if (way) {
+            this.verificationCodeShow = true
+            this.verificationCodeImg = require(`../../../static/guangxi/verificationCodeCopy.png`)
+          } else if (!this.model.verificationCode){
+            this.verificationCodeShow = false
+            this.verificationCodeImg = require(`../../../static/guangxi/verificationCode.png`)
+          }
+          break
+      }
+    },
+    createCode(){
+      let code = "";
+      //验证码的长度
+      let codeLength = 4;
+      //随机数
+      let random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
+        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
+      //循环操作
+      for (let i = 0; i < codeLength; i++) {
+        //取得随机数的索引（0~35）
+        let index = Math.floor(Math.random() * 36);
+        //根据索引取得随机数加到code上
+        code += random[index];
+      }
+      //把code值赋给验证码
+      this.checkCode = code;
+    },
+    confirm () {
+      console.log('点击登录')
+      if (!this.model.ename) {
+        this.$showMessage("请输入登录账号")
+      }
+      if (!this.model.password) {
+        this.$showMessage("请输入登录密码")
+      }
+      if (!this.model.verificationCode) {
+        this.$showMessage("请输入验证码")
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.login-box{
+  overflow: hidden;
+  background-image: url("../../../static/guangxi/backgroundImage.png");
+  background-size:100% 100%;
+  background-repeat:no-repeat;
+  font-family: PINGFANG-MEDIUM;
+}
+.pt-1 {
+  padding-top: 1rem;
+}
+.color1 {
+  color: #c9c9c9;
+}
+.color2 {
+  color: #4190f6;
+}
+.btn_login {
+  width: 100%;
+  height: 40px;
+  background-color: #4292f7;
+  border-radius: 3rem;
+  border:none;
+  font-family: PingFang,serif;
+  font-size: 16px;
+  color: #ffffff;
+}
+.btn_login:hover{background-color: #3171f4;}
+.login_input {
+  line-height: 4.3rem;
+  box-sizing: border-box;
+  border-radius: 0.8rem;
+  background: #fff;
+  input{
+    border: none;
+    outline: none;
+  }
+  input::-webkit-input-placeholder {
+    color: #c9c9c9;
+  }
+}
+</style>

package/src/components/server/LoginView.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="login-box">
+    <div class="login-title" >
+
+      <div class="row auto">
+        <div style="width:80%;margin-top:25px;">
+          <span style="font-size: 0.8rem;color: white;">{{notice}}</span>
+        </div>
+        <div class="login-title-chi" style="white-space: nowrap;">
+          <span style="font-size: 1.2rem;"><b>关于我们</b></span>
+        </div>
+      </div>
+
+      <div class="row auto">
+        <div style="margin-top: 8rem;text-align: center">
+
+          <div style="color: white;font-size: 2.5rem;">
+            <span>智 慧 燃 气 SaaS 云 平 台</span>
+          </div>
+
+          <div class="pt-1" style="color: white;font-size: 1.2rem;">
+            <span>燃气行业数字化解决方案</span>
+          </div>
+
+          <div style="margin-top: 3rem;">
+            <span @mouseenter="changeImageSrc(1, 'hover')"
+                  @mouseleave="changeImageSrc(1, '')">
+              <img :src="gasImg1" width="200">
+            </span>
+            <span @mouseenter="changeImageSrc(2, 'hover')"
+                  @mouseleave="changeImageSrc(2, '')">
+              <img :src="gasImg2" width="200">
+            </span>
+            <span @mouseenter="changeImageSrc(3, 'hover')"
+                  @mouseleave="changeImageSrc(3, '')">
+              <img :src="gasImg3" width="200">
+            </span>
+            <span @mouseenter="changeImageSrc(4, 'hover')"
+                  @mouseleave="changeImageSrc(4, '')">
+              <img :src="gasImg4" width="200">
+            </span>
+            <span @mouseenter="changeImageSrc(5, 'hover')"
+                  @mouseleave="changeImageSrc(5, '')">
+              <img :src="gasImg5" width="200">
+            </span>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  title: '登录',
+  data () {
+    return {
+      gasImg1: '../../../static/guangxi/gasProduction.png',
+      gasImg2: '../../../static/guangxi/gasCustomerService.png',
+      gasImg3: '../../../static/guangxi/gasLargeScreen.png',
+      gasImg4: '../../../static/guangxi/gasSupervise.png',
+      gasImg5: '../../../static/guangxi/gasAnalysis.png'
+    }
+  },
+  methods: {
+    changeImageSrc (key, way) {
+      switch (key) {
+        case 1:
+          if (way) {
+            this.gasImg1 = require(`../../../static/guangxi/gasProduction1.png`)
+          } else {
+            this.gasImg1 = require(`../../../static/guangxi/gasProduction.png`)
+          }
+          break
+        case 2:
+          if (way) {
+            this.gasImg2 = require(`../../../static/guangxi/gasCustomerService1.png`)
+          } else {
+            this.gasImg2 = require(`../../../static/guangxi/gasCustomerService.png`)
+          }
+          break
+        case 3:
+          if (way) {
+            this.gasImg3 = require(`../../../static/guangxi/gasLargeScreen1.png`)
+          } else {
+            this.gasImg3 = require(`../../../static/guangxi/gasLargeScreen.png`)
+          }
+          break
+        case 4:
+          if (way) {
+            this.gasImg4 = require(`../../../static/guangxi/gasSupervise1.png`)
+          } else {
+            this.gasImg4 = require(`../../../static/guangxi/gasSupervise.png`)
+          }
+          break
+        case 5:
+          if (way) {
+            this.gasImg5 = require(`../../../static/guangxi/gasAnalysis1.png`)
+          } else {
+            this.gasImg5 = require(`../../../static/guangxi/gasAnalysis.png`)
+          }
+          break
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.login-box{
+  overflow: hidden;
+  background-image: url("../../../static/guangxi/backgroundImage.png");
+  background-size:100% 100%;
+  background-repeat:no-repeat;
+}
+</style>