From d4a6aa1cb207d8179e93ff654e005f55207704df Mon Sep 17 00:00:00 2001
From: joylink_cuiweidong <364937672@qq.com>
Date: Thu, 18 Mar 2021 15:01:13 +0800
Subject: [PATCH] =?UTF-8?q?demo=20=E4=BB=A3=E7=A0=81=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/permission.js                             |  18 +-
 src/views/demo/index.vue                      | 308 ++++++++++++------
 .../components/menus/gernaratePlanTrain.vue   |   1 -
 3 files changed, 222 insertions(+), 105 deletions(-)

diff --git a/src/permission.js b/src/permission.js
index cbe99cd26..45d906e97 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -7,7 +7,7 @@ import 'nprogress/nprogress.css';
 import { setToken, getToken, removeToken, getSessionStorage } from '@/utils/auth';
 import localStore from 'storejs';
 
-const whiteList = ['/login', '/design/login', '/gzzbxy/relay', '/authorization', '/AUSline', '/AUStool']; // 不重定向白名单
+const whiteList = ['/login', '/design/login', '/gzzbxy/relay', '/authorization', '/AUSline', '/AUStool', '/demo']; // 不重定向白名单
 
 for (const val in loginInfo) {
     if (loginInfo[val].loginPath && !whiteList.includes(loginInfo[val].loginPath)) {
@@ -67,15 +67,15 @@ router.beforeEach((to, from, next) => {
     document.title = loginInfo[project || 'login'].browserTitle || loginInfo[project || 'login'].title;
     NProgress.start();
     const loginPath = getRouteInfo(to);
-	const token = to.query.token
+    const token = to.query.token;
 
-	if (/demoTraining/.test(to.path) && token) {
-		const header = { group: to.query.group, 'X-Token': token };
-		setToken(token);
-		store.commit('SET_TOKEN', token)
-		store.commit('SUBSCRIBE', { header, type: '' });
-		next();
-	} else if (getToken()) {
+    if (/demoTraining/.test(to.path) && token) {
+        const header = { group: to.query.group, 'X-Token': token };
+        setToken(token);
+        store.commit('SET_TOKEN', token);
+        store.commit('SUBSCRIBE', { header, type: '' });
+        next();
+    } else if (getToken()) {
         if (to.path === loginPath) {
             // 登录页面不拦截
             next();
diff --git a/src/views/demo/index.vue b/src/views/demo/index.vue
index d387508d3..da4bccc16 100644
--- a/src/views/demo/index.vue
+++ b/src/views/demo/index.vue
@@ -3,6 +3,8 @@
     <div class="demoPage">
       <div class="demoTop">
         <div class="demoTopTitle">教学系统</div>
+        <div v-if="!userId" class="loginButton" @click="demoLogin">登录</div>
+        <div v-else class="loginButton">{{ nickName }}</div>
       </div>
       <div class="demoBottom">
         <div class="demoBottomL">
@@ -26,21 +28,67 @@
         </div>
       </div>
     </div>
+    <el-dialog
+      title="登录系统"
+      :visible.sync="dialogVisible"
+      width="400px"
+      :before-close="handleClose"
+      :center="true"
+    >
+      <el-form id="login-form_demo" ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left">
+        <el-form-item prop="username" class="item_form_box">
+          <span class="svg-container svg-container_login">
+            <svg-icon icon-class="user" />
+          </span>
+          <el-input v-model="loginForm.username" name="username" type="text" :placeholder="this.$t('login.mobilePhoneNumberOrEmail')" />
+          <!-- @keyup.enter.native="goToNext"  -->
+        </el-form-item>
+        <el-form-item prop="password" class="item_form_box item_form_password">
+          <span class="svg-container">
+            <svg-icon icon-class="password" />
+          </span>
+          <el-input
+            ref="password"
+            v-model="loginForm.password"
+            name="password"
+            :type="pwdType"
+            :placeholder="this.$t('login.password')"
+          />
+          <!-- @keyup.enter.native="handleLogin" -->
+          <span class="show-pwd" @click="showPwd">
+            <svg-icon v-if="pwdDisplay" icon-class="eye" />
+            <svg-icon v-else icon-class="eye-open" />
+          </span>
+        </el-form-item>
+        <div class="tip-message">{{ tipsMsg }}</div>
+        <el-form-item>
+          <el-button type="primary" style="width:100%;" :loading="loginLoading" @click.native.prevent="handleLogin">
+            {{ $t('login.login') }}
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
     <iframe class="dialog" :style="{display:show?'block': 'none'}" :src="src" width="100%" height="100%" />
   </div>
 </template>
 
 <script>
 import { getToken } from '@/utils/auth';
-
+import md5 from 'js-md5';
 export default {
     data() {
         return {
             // src: `http://localhost:9527/cbtc/trainingPlatform`,
             src:'',
+            token:'',
             // demoTraining/teach?lessonId=101&mapId=49&lineCode=02&prdType=01&noPreLogout=true&trainingId=4994993&token=${getToken()}
             show: false,
+            dialogVisible:false,
             loading:false,
+            loginLoading:false,
+            pwdType: 'password',
+            tipsMsg: '',
+            pwdDisplay: true,
             trainingList: [
                 {
                     title: '区段设置限速(TA1006E)',
@@ -54,10 +102,34 @@ export default {
                     title: '进路选排(S0916-S0901)',
                     id: '4991607'
                 }
-            ]
+            ],
+            loginForm: {
+                username: '',
+                password: ''
+            }
         };
     },
+    computed: {
+        loginRules() {
+            const loginRules = {
+                username: [{ required: true, trigger: 'blur', validator: this.validateUsername }],
+                password: [{ required: true, trigger: 'blur', validator: this.validatePass }]
+            };
+            return loginRules;
+        },
+        userId() {
+            return this.$store.state.user.id;
+        },
+        nickName() {
+            return this.$store.state.user.nickname;
+        }
+    },
     mounted() {
+        this.token = getToken();
+        if (this.token) {
+            this.$store.dispatch('GetInfo', getToken()).then(res => {
+            });
+        }
         window.addEventListener('message', (e) => {
             const result = e.data;
             if (result.type == 'DEMO_MAP_LOADED') {
@@ -88,118 +160,164 @@ export default {
     },
     methods: {
         doClick(el) {
-            // &noPreLogout=true
-            this.src = `http://localhost:9527/cbtc/demoTraining/teach?lessonId=101&mapId=49&lineCode=02&prdType=01&trainingId=${el.id}&token=${getToken()}`;
-            this.loading = true;
-            setTimeout(()=>{
-                this.show = true;
-            }, 300);
+            if (this.token && this.userId) {
+                // &noPreLogout=true
+                this.src = `http://localhost:9527/cbtc/demoTraining/teach?lessonId=101&mapId=49&lineCode=02&prdType=01&trainingId=${el.id}&token=${this.token}`;
+                this.loading = true;
+                setTimeout(()=>{
+                    this.show = true;
+                }, 300);
+            } else {
+                this.dialogVisible = true;
+            }
+
+        },
+        handleClose() {
+            this.dialogVisible = false;
+        },
+        handleLogin() {
+            // account: "18502924948"
+            // clientId: "1"
+            // password: "e10adc3949ba59abbe56e057f20f883e"
+            // project: "DEFAULT"
+            // secret: "joylink"
+            this.$refs.loginForm.validate(valid => {
+                if (valid) {
+                    const model = Object.assign({}, this.loginForm);
+                    model.password = md5(model.password);
+                    model.type = 'class';
+                    model.project = 'DEFAULT';
+                    // model.deviceCode = this.$route.query.projectDevice;
+                    this.loginLoading = true;
+                    this.$store.dispatch('Login', model).then(() => {
+                        this.$store.dispatch('SetAccount', model.username);
+                        this.$store.dispatch('GetInfo', getToken()).then(res => {
+                            this.loginLoading = false;
+                            this.dialogVisible = false;
+                            this.token = getToken();
+                        });
+                    }).catch(error => {
+                        if (error.code == '40003') {
+                            this.tipsMsg = this.$t('login.accountOrPasswordIsIncorrect');
+                        } else if (error.code == '10013' || error.code == '10014') {
+                            this.tipsMsg = '该账号权限不足';
+                        } else {
+                            this.tipsMsg = error.message;
+                        }
+                        this.loading = false;
+                        setTimeout(() => { this.tipsMsg = ''; }, 5000);
+                    });
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        demoLogin() {
+            this.dialogVisible = true;
+        },
+        validateUsername(rule, value, callback) {
+            if (value) {
+                return callback();
+            } else {
+                return callback(new Error('请输入用户名'));
+            }
+        },
+        validatePass(rule, value, callback) {
+            if (value.length < 5) {
+                return callback(new Error(this.$t('login.passwordHint')));
+            } else {
+                return callback();
+            }
+        },
+        goToNext() {
+            if (this.loginForm.username.length < 5) {
+                return;
+            } else {
+                this.$refs['password'].focus();
+            }
+        },
+        showPwd() {
+            if (this.pwdType === 'password') {
+                this.pwdDisplay = false;
+                this.pwdType = '';
+            } else {
+                this.pwdType = 'password';
+                this.pwdDisplay = true;
+            }
         }
     }
 };
 
 </script>
 <style scoped lang="scss">
-	.dialog {
-		background: #fff;
-		position: absolute;
-		top: 0;
-		right: 0;
-		left: 0;
-		bottom: 0;
-        border: none;
-        width:100%;
-        height:100%;
-	}
-	.demoContainer{
-		width:100%;
-		height: 100%;
-	}
-    .eachTraining{
-        cursor: pointer;
+	.dialog {background: #fff;position: absolute;top: 0;right: 0;left: 0;bottom: 0;border: none;width:100%;height:100%;}
+	.demoContainer{width:100%;height: 100%;}
+    .eachTraining{cursor: pointer;margin-top:10px;margin-left: 8px;font-size: 15px;
         &:hover{
             text-decoration: underline;
         }
-        margin-top:10px;
-        margin-left: 8px;
-        font-size: 15px;
     }
-    .traingList{
-
-    }
-    .demoPage{
-        width: 100%;
-        height: 100%;
-    }
-    .demoTop{
-        position:absolute;
-        width: 100%;
-        height: 60px;
-        left:0;
-        top:0;
-        border-bottom: 1px #ccc solid;
-    }
-    .demoBottom{
-        padding-top: 60px;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: row;
-    }
-    .demoBottomL{
-        width: 200px;
-        border-right: 1px #ccc solid;
-        padding: 30px 10px;
-        background: #f2f2f2;
-    }
-    .demoBottomC{
-        flex: 1;
-        padding: 20px;
-    }
-    .demoBottomRT{
-        font-size:16px;
-    }
-    .demoBottomR{
-        width: 300px;
-        border-left: 1px #ccc solid;
-        padding: 15px;
-    }
-    .demoBottomCT{
-        font-size: 15px;
-    }
-    .video_container{
-        width: 600px;
-        height: 400px;
-        border: 1px #ccc solid;
-        margin-top: 80px;
-        margin-left: 50%;
-        transform: translateX(-50%);
-    }
-    .demoMenuList{
-        background:#fff;
-        box-shadow: 1px 3px 5px #dedede;
-    }
-    .eachDemoMenu{
-        padding-left: 20px;
-        font-size: 15px;
-        padding-top: 10px;
-        cursor: pointer;
-        padding-bottom: 10px;
-        border-bottom: 1px #f5f5f5 solid;
-        color:#000;
+    .demoPage{width: 100%;height: 100%;}
+    .demoTop{position:absolute;width: 100%;height: 60px;left:0;top:0;border-bottom: 1px #ccc solid;}
+    .demoBottom{padding-top: 60px;width: 100%;height: 100%;display: flex;flex-direction: row;}
+    .demoBottomL{width: 200px;border-right: 1px #ccc solid;padding: 30px 10px;background: #f2f2f2;}
+    .demoBottomC{flex: 1;padding: 20px;}
+    .demoBottomRT{font-size:16px;}
+    .demoBottomR{width: 300px;border-left: 1px #ccc solid;padding: 15px;}
+    .demoBottomCT{font-size: 15px;}
+    .video_container{width: 600px;height: 400px;border: 1px #ccc solid;margin-top: 80px;margin-left: 50%;transform: translateX(-50%);}
+    .demoMenuList{background:#fff;box-shadow: 1px 3px 5px #dedede;}
+    .eachDemoMenu{padding-left: 20px;font-size: 15px;padding-top: 10px;cursor: pointer;padding-bottom: 10px;border-bottom: 1px #f5f5f5 solid;color:#000;
         &.active{
             background:#64a3f5;
             color:#fff;
         }
     }
-    .demoTopTitle{
-        font-size: 22px;
-        font-weight: bold;
-        padding: 15px 10px 15px 30px
+    .demoTopTitle{font-size: 22px;font-weight: bold;padding: 15px 10px 15px 30px;width: 500px;display: inline-block;}
+    .loginButton{float: right;display: inline-block;margin-right: 30px;margin-top: 10px;padding: 10px 20px;border: 1px #ccc solid;border-radius: 5px;
+    font-size: 14px;cursor: pointer;}
+    .item_form_box {
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        color: #454545;
     }
+    .svg-container {padding-left: 14px;color: #889aa4;vertical-align: middle;width: 30px;display: inline-block;
+        &_login {
+            font-size: 16px;
+        }
+    }
+    .show-pwd {position: absolute;right: 10px;top: 3px;font-size: 16px;color: #889aa4;cursor: pointer;user-select: none;}
+    .tip-message {color: #F56C61;padding: 5px;font-size: 12px;height: 23px;margin-bottom: 10px;}
 </style>
 <style lang="scss">
     .demoContainer .el-loading-mask{
         background-color:rgba(255,255,255,1);
     }
+    #login-form_demo {
+        width: 340px;
+        padding: 0 50px;
+		.el-form-item{
+			background: #fff !important;
+			border: 1px solid rgba(0, 0, 0, 0.1) !important;
+			.el-input {
+				height: 40px;
+				width: 85%;
+				background: #fff;
+                input {
+                    background: #fff !important;
+                    border: 0px;
+                    -webkit-appearance: none;
+                    border-radius: 0px;
+                    padding: 8px 9px 7px 5px;
+                    color: #000;
+                    height: 100%;
+                    &:-webkit-autofill {
+                        box-shadow: 0 0 0px 1000px #fff inset !important;
+                        -webkit-text-fill-color: #000 !important;
+                    }
+                }
+			}
+		}
+    }
 </style>
diff --git a/src/views/planMonitor/components/menus/gernaratePlanTrain.vue b/src/views/planMonitor/components/menus/gernaratePlanTrain.vue
index 0fd95de8c..105708202 100644
--- a/src/views/planMonitor/components/menus/gernaratePlanTrain.vue
+++ b/src/views/planMonitor/components/menus/gernaratePlanTrain.vue
@@ -331,7 +331,6 @@ export default {
         },
         doClose() {
             this.loading = false;
-            debugger;
             // this.$refs.dataform.validateField('runningRouting');
             this.$refs.dataform.resetForm();
             // this.$refs.dataform.clearValidate();