💥 feat(登录): 新增drgy开发环境和drgyprod生产环境并适配、解决各个logo页面打包样式污染

.env.development

@@ -1,6 +1,22 @@
 # 开发环境配置
 ENV = 'development'
 
+# logo
+VUE_APP_LGOG_URL = 'logo/drgy/logo.png'
+/**
+ * 蓝白色登录页需要一个banner图(VUE_APP_BANNER_URL)和一个168像素的logo(VUE_APP_LGOG168_URL)
+ */
+# logo
+VUE_APP_LGOG168_URL = 'logo/drgy/logo168.png'
+# banner
+VUE_APP_BANNER_URL = 'logo/drgy/banner.png'
+# 系统名称
+VUE_APP_SYSTEM_NAME = '数字用电管理系统'
+# 系统登录页 login-green、login-blue-black、login-blue-white
+VUE_APP_LOGIN_PAGE = 'login-green'
+# 系统配色 theme-green、theme-blue-black、theme-blue-white
+VUE_APP_THEME_CLASS = 'theme-green'
+
 # 智慧用电管理系统/开发环境
 VUE_APP_BASE_API = '/dev-api'
 

.env.dr

@@ -0,0 +1,33 @@
+# 开发环境配置
+ENV = 'drgy'
+
+# logo
+VUE_APP_LGOG_URL = 'logo/dr/logo.png'
+# 系统名称
+VUE_APP_SYSTEM_NAME = '数字用电管理系统'
+# 系统登录页
+VUE_APP_LOGIN_PAGE = 'login-blue-black'
+# 系统配色
+VUE_APP_THEME_CLASS = 'theme-blue-black'
+
+# 智慧用电管理系统/开发环境
+VUE_APP_BASE_API = '/dev-api'
+
+# 路由懒加载
+VUE_CLI_BABEL_TRANSPILE_MODULES = true
+
+# 前端端口
+port= 9988
+
+# 服务端地址
+// 陈志荣 本地
+// target = http://192.168.18.140:8899
+// 黄明 本地
+// target = http://192.168.18.134:8899
+//target = http://192.168.18.139:8899
+// target = http://192.168.18.136:8899
+
+// 测试端
+// target = http://192.168.10.241:32024
+// 开发端
+ target = http://192.168.1.17:8899

.env.drgy

@@ -0,0 +1,44 @@
+# 开发环境配置
+ENV = 'drgy'
+
+# logo
+VUE_APP_LGOG_URL = 'logo/drgy/logo.png'
+/**
+ * 蓝白色登录页需要一个banner图(VUE_APP_BANNER_URL)和一个168像素的logo(VUE_APP_LGOG168_URL)
+ */
+# logo
+VUE_APP_LGOG168_URL = 'logo/drgy/logo168.png'
+# banner
+VUE_APP_BANNER_URL = 'logo/drgy/banner.png'
+# 系统名称
+VUE_APP_SYSTEM_NAME = '数字用电管理系统'
+# 系统登录页 login-green、login-blue-black、login-blue-white
+#VUE_APP_LOGIN_PAGE = 'login-green'
+#VUE_APP_LOGIN_PAGE = 'login-blue-black'
+VUE_APP_LOGIN_PAGE = 'login-blue-white'
+# 系统配色 theme-green、theme-blue-black、theme-blue-white
+#VUE_APP_THEME_CLASS = 'theme-green'
+#VUE_APP_THEME_CLASS = 'theme-blue-black'
+VUE_APP_THEME_CLASS = 'theme-blue-white'
+
+# 智慧用电管理系统/开发环境
+VUE_APP_BASE_API = '/dev-api'
+
+# 路由懒加载
+VUE_CLI_BABEL_TRANSPILE_MODULES = true
+
+# 前端端口
+port= 9988
+
+# 服务端地址
+// 陈志荣 本地
+// target = http://192.168.18.140:8899
+// 黄明 本地
+// target = http://192.168.18.134:8899
+//target = http://192.168.18.139:8899
+// target = http://192.168.18.136:8899
+
+// 测试端
+// target = http://192.168.10.241:32024
+// 开发端
+ target = http://192.168.1.17:8899

.env.drgyprod

@@ -0,0 +1,32 @@
+# 生产环境配置
+ENV = 'drgyprod'
+NODE_ENV = 'drgyprod'
+# logo
+VUE_APP_LGOG_URL = 'logo/drgy/logo.png'
+/**
+ * 蓝白色登录页需要一个banner图(VUE_APP_BANNER_URL)和一个168像素的logo(VUE_APP_LGOG168_URL)
+ */
+# logo
+VUE_APP_LGOG168_URL = 'logo/drgy/logo168.png'
+# banner
+VUE_APP_BANNER_URL = 'logo/drgy/banner.png'
+# 系统名称
+VUE_APP_SYSTEM_NAME = '数字用电管理系统'
+# 系统登录页 login-green、login-blue-black、login-blue-white
+VUE_APP_LOGIN_PAGE = 'login-green'
+#VUE_APP_LOGIN_PAGE = 'login-blue-black'
+#VUE_APP_LOGIN_PAGE = 'login-blue-white'
+# 系统配色 theme-green、theme-blue-black、theme-blue-white
+VUE_APP_THEME_CLASS = 'theme-green'
+#VUE_APP_THEME_CLASS = 'theme-blue-black'
+#VUE_APP_THEME_CLASS = 'theme-blue-white'
+
+# 智慧用电管理系统/开发环境
+VUE_APP_BASE_API = '/prod-api'
+
+
+# 前端端口
+port= 9988
+
+# 服务端地址
+target = http://power.gkiiot.com

.env.production

@@ -4,6 +4,26 @@ ENV = 'production'
 # 智慧用电管理系统/生产环境
 VUE_APP_BASE_API = '/prod-api'
 
+# logo
+VUE_APP_LGOG_URL = 'logo/drgy/logo.png'
+/**
+ * 蓝白色登录页需要一个banner图(VUE_APP_BANNER_URL)和一个168像素的logo(VUE_APP_LGOG168_URL)
+ */
+# logo
+VUE_APP_LGOG168_URL = 'logo/drgy/logo168.png'
+# banner
+VUE_APP_BANNER_URL = 'logo/drgy/banner.png'
+# 系统名称
+VUE_APP_SYSTEM_NAME = '数字用电管理系统'
+# 系统登录页 login-green、login-blue-black、login-blue-white
+#VUE_APP_LOGIN_PAGE = 'login-green'
+#VUE_APP_LOGIN_PAGE = 'login-blue-black'
+VUE_APP_LOGIN_PAGE = 'login-blue-white'
+# 系统配色 theme-green、theme-blue-black、theme-blue-white
+#VUE_APP_THEME_CLASS = 'theme-green'
+#VUE_APP_THEME_CLASS = 'theme-blue-black'
+VUE_APP_THEME_CLASS = 'theme-blue-white'
+
 # 前端端口
 port= 9988
 

package.json

@@ -6,6 +6,9 @@
   "license": "MIT",
   "scripts": {
     "dev": "vue-cli-service serve",
+    "dev:drgy": "vue-cli-service serve --mode drgy",
+    "dev:dr": "vue-cli-service serve --mode dr",
+    "build:drgyprod": "vue-cli-service build --mode drgyprod",
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",

public/js/config.js

@@ -6,3 +6,11 @@ window.dasConfig = {
   protocol: 'http://',
   wsProtocol: 'ws://'
 }
+// 手动配置的地址
+window.dasConfig = {
+  ip: '192.168.1.17',
+  port: 8899,
+  prodApi: '',
+  protocol: 'http://',
+  wsProtocol: 'ws://'
+}

src/assets/styles/sidebar.scss

@@ -1,3 +1,4 @@
+@import './variables.scss';
 #app {
 
   .main-container {

src/assets/styles/theme.scss

@@ -1,3 +1,4 @@
+@import './variables.scss';
 //theme-green主题
 .theme-green{
   //logo

src/assets/styles/variables.scss

@@ -80,6 +80,7 @@ $sideBarWidth: 200px;
   sidebarN1Title:$sidebarN1Title;
   //绿色背景
   menuGreenText:$menuGreenText;
+  menuGreenLogoBg:$menuGreenLogoBg;
   menuGreenBg:$menuGreenBg;
   menuGreenHover:$menuGreenHover;
   sidebarGreenTitle:$sidebarGreenTitle;

src/config/env.js

@@ -31,7 +31,7 @@ if (env.NODE_ENV == 'development') {
   flowIotUrl = 'http://127.0.0.1:1880/#flow/'
   // hrefHost = "power-tcore.histron.cn"
   hrefHost = "192.168.1.17"
-} else if(env.NODE_ENV == 'production') {
+} else if(env.NODE_ENV == 'production' || env.NODE_ENV == 'drgyprod') {
   // if (hrefHost.indexOf('.gkiiot.com') >= 0) {
   //   iotHost = 'iot.gkiiot.com'
   // }

src/layout/components/Sidebar/Logo.vue

@@ -34,7 +34,8 @@ export default {
       return this.$store.state.settings.sideTheme
     },
     attribute() {
-      return this.$store.getters.attributeInfo['logoTitle'] || this.title;
+      // return this.$store.getters.attributeInfo['logoTitle'] || this.title;
+      return process.env.VUE_APP_SYSTEM_NAME || this.title;
     }
   },
   data() {

src/layout/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="[classObj,themeClass]" class="app-wrapper" :style="{'--current-color': theme}">
+  <div :class="[classObj,themeClass1]" class="app-wrapper" :style="{'--current-color': theme}">
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
     <sidebar class="sidebar-container" />
     <div :class="{hasTagsView:needTagsView}" class="main-container">
@@ -37,7 +37,6 @@ export default {
     ...mapState({
       theme: state => state.settings.theme,
       sideTheme: state => state.settings.sideTheme,
-      themeClass: state => state.settings.themeClass,
       sidebar: state => state.app.sidebar,
       device: state => state.app.device,
       showSettings: state => state.settings.showSettings,
@@ -60,6 +59,9 @@ export default {
     },
     variables() {
       return variables;
+    },
+    themeClass1() {
+      return process.env.VUE_APP_THEME_CLASS;
     }
   },
   methods: {

src/router/index.js

@@ -25,6 +25,13 @@ import ParentView from '@/components/ParentView';
   }
  */
 
+// 根据环境变量动态导入组件
+function dynamicImportLoginPage(resolve) {
+  const loginPagePath = process.env.VUE_APP_LOGIN_PAGE;
+  console.log("loginPagePath",loginPagePath)
+  require([`@/views/${loginPagePath}`], resolve);
+}
+
 // 公共路由
 export const constantRoutes = [
   {
@@ -40,7 +47,7 @@ export const constantRoutes = [
   },
   {
     path: '/login',
-    component: (resolve) => require(['@/views/login-green'], resolve),
+    component: (resolve) => dynamicImportLoginPage(resolve),
     hidden: true
   },
   {

src/utils/hciot.js

@@ -5,7 +5,7 @@
  */
 import { Loading } from 'element-ui';
 
-const baseHref = process.env.NODE_ENV === "production" ?  `${window.dasConfig.protocol}${window.dasConfig.ip}${window.dasConfig.port ? ':'+window.dasConfig.port : ''}${window.dasConfig.prodApi ? window.dasConfig.prodApi : ''}` : process.env.VUE_APP_BASE_API
+const baseHref = (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "drgyprod") ?  `${window.dasConfig.protocol}${window.dasConfig.ip}${window.dasConfig.port ? ':'+window.dasConfig.port : ''}${window.dasConfig.prodApi ? window.dasConfig.prodApi : ''}` : process.env.VUE_APP_BASE_API
 
 const baseURL = process.env.VUE_APP_BASE_API
 

src/utils/request.js

@@ -9,7 +9,7 @@ axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
 const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
-  baseURL: process.env.NODE_ENV === "production" ?  `${window.dasConfig.protocol}${window.dasConfig.ip}${window.dasConfig.port ? ':'+window.dasConfig.port : ''}${window.dasConfig.prodApi ? window.dasConfig.prodApi : ''}` : process.env.VUE_APP_BASE_API,
+  baseURL: (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "drgyprod") ?  `${window.dasConfig.protocol}${window.dasConfig.ip}${window.dasConfig.port ? ':'+window.dasConfig.port : ''}${window.dasConfig.prodApi ? window.dasConfig.prodApi : ''}` : process.env.VUE_APP_BASE_API,
   // 超时
   timeout: 10000
 })

src/views/login-blue-black.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="login">
+  <div class="login login-blue-black">
     <div class="login-box">
       <div class="login-header">
-        <img src="@/assets/logo/drgy/logo168.png" alt="Logo"/>
+        <img :src="logoUrl" alt="Logo"/>
+<!--        <img :src="require('../../assets/' + logoUrl)" />-->
         <span>{{systemName}}</span>
       </div>
       <div class="form-wrap">
@@ -31,7 +32,7 @@
             <!--          </div>-->
           </div>
           <el-form-item prop="username">
-            <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+            <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" clearable>
               <svg-icon slot="prefix" icon-class="A_loginUser" class="el-input__icon input-icon" />
             </el-input>
           </el-form-item>
@@ -42,6 +43,7 @@
               auto-complete="off"
               placeholder="密码"
               @keyup.enter.native="handleLogin"
+              show-password
             >
               <svg-icon slot="prefix" icon-class="A_loginPassword" class="el-input__icon input-icon" />
             </el-input>
@@ -53,6 +55,7 @@
               placeholder="验证码"
               style="width: 63%"
               @keyup.enter.native="handleLogin"
+              clearable
             >
               <svg-icon slot="prefix" icon-class="A_loginCode" class="el-input__icon input-icon" />
             </el-input>
@@ -92,7 +95,7 @@ export default {
   name: "Login",
   data() {
     return {
-      logoUrl: '',
+      logoUrl: 'logo/drgy/logo.png',
       systemName: '',
       formTitle: {
         enter: "企业登录",
@@ -130,8 +133,13 @@ export default {
     }
   },
   created() {
-    this.logoUrl = window._SYSTEMCONFIG["logoURL"];
+    // this.logoUrl = window._SYSTEMCONFIG["logoURL"];
-    this.systemName = window._SYSTEMCONFIG["systemName"];
+    // this.systemName = window._SYSTEMCONFIG["systemName"];
+    console.log("process.env",process.env)
+    // this.logoUrl = process.env.VUE_APP_LGOG_URL;
+    this.logoUrl = require('@/assets/' + process.env.VUE_APP_LGOG_URL);
+    this.systemName = process.env.VUE_APP_SYSTEM_NAME;
+
     this.getCode();
     this.getCookie();
   },
@@ -203,7 +211,7 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-.login {
+.login-blue-black {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -398,6 +406,16 @@ export default {
   border-color: #1890FF;
 }
 
+.el-input .el-input__clear{
+  font-size: 18px;
+}
+.el-input__icon{
+  width: 40px;
+}
+.el-input--suffix .el-input__inner{
+  padding-right: 40px;
+}
+
 @media screen and (max-width: 920px) {
   /* 选择对应的元素，这里假设是body作为示例 */
   .login-box {

src/views/login-blue-white.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="login">
+  <div class="login login-blue-white">
     <div class="banner-box">
-      <img src="@/assets/images/blue-black-white/banner.png" alt="DRGYEN"/>
+      <img :src="bannerUrl" alt="DRGYEN"/>
     </div>
     <div class="login-box">
       <div class="login-header">
-        <img src="@/assets/logo/drgy/logo168.png" alt="Logo"/>
+        <img :src="logoUrl" alt="Logo"/>
         <span>{{systemName}}</span>
       </div>
       <div class="form-wrap">
@@ -34,7 +34,7 @@
             <!--          </div>-->
           </div>
           <el-form-item prop="username">
-            <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+            <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" clearable>
               <svg-icon slot="prefix" icon-class="A_loginUser" class="el-input__icon input-icon" />
             </el-input>
           </el-form-item>
@@ -45,6 +45,7 @@
               auto-complete="off"
               placeholder="密码"
               @keyup.enter.native="handleLogin"
+              show-password
             >
               <svg-icon slot="prefix" icon-class="A_loginPassword" class="el-input__icon input-icon" />
             </el-input>
@@ -56,6 +57,7 @@
               placeholder="验证码"
               style="width: 63%"
               @keyup.enter.native="handleLogin"
+              clearable
             >
               <svg-icon slot="prefix" icon-class="A_loginCode" class="el-input__icon input-icon" />
             </el-input>
@@ -96,6 +98,7 @@ export default {
   data() {
     return {
       logoUrl: '',
+      bannerUrl: '',
       systemName: '',
       formTitle: {
         enter: "企业登录",
@@ -133,8 +136,14 @@ export default {
     }
   },
   created() {
-    this.logoUrl = window._SYSTEMCONFIG["logoURL"];
+    // this.logoUrl = window._SYSTEMCONFIG["logoURL"];
-    this.systemName = window._SYSTEMCONFIG["systemName"];
+    // this.systemName = window._SYSTEMCONFIG["systemName"];
+    console.log("process.env",process.env)
+    // this.logoUrl = process.env.VUE_APP_LGOG_URL;
+    this.logoUrl = require('@/assets/' + process.env.VUE_APP_LGOG168_URL);
+    this.bannerUrl = require('@/assets/' + process.env.VUE_APP_BANNER_URL);
+    this.systemName = process.env.VUE_APP_SYSTEM_NAME;
+
     this.getCode();
     this.getCookie();
   },
@@ -206,7 +215,7 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-.login {
+.login-blue-white {
   display: flex;
   //flex-direction: column;
   justify-content: center;
@@ -404,6 +413,16 @@ export default {
   border-color: #1890FF;
 }
 
+.el-input .el-input__clear{
+  font-size: 18px;
+}
+.el-input__icon{
+  width: 40px;
+}
+.el-input--suffix .el-input__inner{
+  padding-right: 40px;
+}
+
 @media screen and (max-width: 1160px) {
   /* 选择对应的元素，这里假设是body作为示例 */
   .banner-box {

src/views/login-green.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="login">
+  <div class="login login-green">
     <div class="login-header">
-      <img src="@/assets/logo/drgy/logo.png" alt="Logo"/>
+      <img :src="logoUrl" alt="Logo"/>
       <span>{{systemName}}</span>
     </div>
     <div class="form-wrap">
@@ -30,7 +30,7 @@
 <!--          </div>-->
         </div>
         <el-form-item prop="username">
-          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" clearable>
             <svg-icon slot="prefix" icon-class="A_loginUser" class="el-input__icon input-icon" />
           </el-input>
         </el-form-item>
@@ -41,6 +41,7 @@
             auto-complete="off"
             placeholder="密码"
             @keyup.enter.native="handleLogin"
+            show-password
           >
             <svg-icon slot="prefix" icon-class="A_loginPassword" class="el-input__icon input-icon" />
           </el-input>
@@ -52,6 +53,7 @@
             placeholder="验证码"
             style="width: 63%"
             @keyup.enter.native="handleLogin"
+            clearable
           >
             <svg-icon slot="prefix" icon-class="A_loginCode" class="el-input__icon input-icon" />
           </el-input>
@@ -128,8 +130,13 @@ export default {
     }
   },
   created() {
-    this.logoUrl = window._SYSTEMCONFIG["logoURL"];
+    // this.logoUrl = window._SYSTEMCONFIG["logoURL"];
-    this.systemName = window._SYSTEMCONFIG["systemName"];
+    // this.systemName = window._SYSTEMCONFIG["systemName"];
+    console.log("process.env",process.env)
+    // this.logoUrl = process.env.VUE_APP_LGOG_URL;
+    this.logoUrl = require('@/assets/' + process.env.VUE_APP_LGOG_URL);
+    this.systemName = process.env.VUE_APP_SYSTEM_NAME;
+
     this.getCode();
     this.getCookie();
   },
@@ -201,7 +208,7 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-.login {
+.login-green {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -384,9 +391,19 @@ export default {
   border-color: #00A9AB;
 }
 
+.el-input .el-input__clear{
+  font-size: 18px;
+}
+.el-input__icon{
+  width: 40px;
+}
+.el-input--suffix .el-input__inner{
+  padding-right: 40px;
+}
+
 @media screen and (min-width: 1921px) {
   /* 选择对应的元素，这里假设是body作为示例 */
-  .login {
+  .login-green {
     background-size: 100% 59%;
   }
 }

src/views/login.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="login">
+  <div class="login login-default">
     <div class="form-wrap">
       <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
         <div class="title-tags-wrap">
@@ -193,7 +193,7 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-.login {
+.login-default {
   display: flex;
   justify-content: center;
   align-items: center;

vue.config.js

@@ -84,7 +84,7 @@ module.exports = {
       .end()
 
     config
-      .when(process.env.NODE_ENV !== 'development',
+      .when(process.env.NODE_ENV !== 'development'&&process.env.NODE_ENV !== 'drgy',
         config => {
           config
             .plugin('ScriptExtHtmlWebpackPlugin')