desc: 调整登陆页面样式

This commit is contained in:
zyy 2019-10-10 18:05:26 +08:00
parent a8e491ea6e
commit f7cf33a5e2
9 changed files with 347 additions and 314 deletions

View File

@ -1,72 +1,81 @@
<template> <template>
<el-dialog class="chengdou-03__systerm notice-info" :title="title" :visible.sync="show" width="360px" <el-dialog
:before-close="doClose" :zIndex="2000" :modal="false" :close-on-click-modal="false" append-to-body v-dialogDrag> v-dialogDrag
<div class="context"> class="chengdou-03__systerm notice-info"
<template v-for="message in messages"> :title="title"
<span>{{message}}</span><br> :visible.sync="show"
</template> width="360px"
</div> :before-close="doClose"
<el-row justify="center" class="button-group"> :z-index="2000"
<el-col :span="10" :offset="8"> :modal="false"
<el-button :id="domIdSure" type="primary" @click="commit">确定</el-button> :close-on-click-modal="false"
</el-col> append-to-body
</el-row> >
</span> <span class="context">
</el-dialog> <template v-for="(message, index) in messages">
<span :key="index">{{ message }}</span>
</template>
</span>
<el-row justify="center" class="button-group">
<el-col :span="10" :offset="8">
<el-button :id="domIdSure" type="primary" @click="commit">确定</el-button>
</el-col>
</el-row>
</el-dialog>
</template> </template>
<script> <script>
import { MapDeviceType, OperationEvent } from '@/scripts/ConstDic'; import { OperationEvent } from '@/scripts/ConstDic';
export default { export default {
name: 'NoticeInfo', name: 'NoticeInfo',
data() { data() {
return { return {
dialogShow: false, dialogShow: false,
messages: ['命令下达失败'], messages: ['命令下达失败'],
operate: null operate: null
} };
}, },
computed: { computed: {
show() { show() {
return this.dialogShow && !this.$store.state.menuOperation.break; return this.dialogShow && !this.$store.state.menuOperation.break;
}, },
title() { title() {
return '提示'; return '提示';
}, },
domIdSure() { domIdSure() {
return this.dialogShow ? OperationEvent.Command.close.notice.domId : ''; return this.dialogShow ? OperationEvent.Command.close.notice.domId : '';
} }
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.$store.dispatch('training/tipReload'); this.$store.dispatch('training/tipReload');
}) });
}, },
methods: { methods: {
doShow(operate, messages) { doShow(operate, messages) {
this.operate = operate || {}; this.operate = operate || {};
this.dialogShow = true; this.dialogShow = true;
this.messages = ['命令下达失败']; this.messages = ['命令下达失败'];
if (messages) { if (messages) {
this.messages = messages; this.messages = messages;
} }
this.$nextTick(function () { this.$nextTick(function () {
this.$store.dispatch('training/emitTipFresh'); this.$store.dispatch('training/emitTipFresh');
}); });
}, },
doClose() { doClose() {
this.dialogShow = false; this.dialogShow = false;
this.$store.dispatch('training/emitTipFresh'); this.$store.dispatch('training/emitTipFresh');
}, },
commit() { commit() {
this.doClose(); this.doClose();
}, },
cancel() { cancel() {
this.doClose(); this.doClose();
} }
} }
} };
</script> </script>
<style> <style>

View File

@ -1,163 +1,173 @@
<template> <template>
<el-dialog class="chengdou-03__systerm confirm-control" :title="title" :visible.sync="show" width="360px" <el-dialog
:before-close="doClose" :zIndex="2000" :modal="false" :close-on-click-modal="false" append-to-body v-dialogDrag> v-dialogDrag
<div class="context"> class="chengdou-03__systerm confirm-control"
<template v-for="message in messages"> :title="title"
<span>{{message}}</span> :visible.sync="show"
</template> width="360px"
</div> :before-close="doClose"
<el-row justify="center" class="button-group"> :z-index="2000"
<el-col :span="10" :offset="2"> :modal="false"
<el-button :id="domIdConfirm" type="primary" :loading="loading" @click="commit">确定</el-button> :close-on-click-modal="false"
</el-col> append-to-body
<el-col :span="8" :offset="4"> >
<el-button :id="domIdCancel" @click="cancel"> </el-button> <div class="context">
</el-col> <template v-for="(message, index) in messages">
</el-row> <span :key="index">{{ message }}</span>
<notice-info ref="noticeInfo"></notice-info> </template>
</el-dialog> </div>
<el-row justify="center" class="button-group">
<el-col :span="10" :offset="2">
<el-button :id="domIdConfirm" type="primary" :loading="loading" @click="commit">确定</el-button>
</el-col>
<el-col :span="8" :offset="4">
<el-button :id="domIdCancel" @click="cancel"> </el-button>
</el-col>
</el-row>
<notice-info ref="noticeInfo" />
</el-dialog>
</template> </template>
<script> <script>
import { MapDeviceType, OperationEvent } from '@/scripts/ConstDic'; import { OperationEvent } from '@/scripts/ConstDic';
import NoticeInfo from './childDialog/noticeInfo' import NoticeInfo from './childDialog/noticeInfo';
export default { export default {
name: 'ConfirmTrain', name: 'ConfirmTrain',
data() { components: {
return { NoticeInfo
dialogShow: false, },
loading: false, data() {
operate: {}, return {
messages: '', dialogShow: false,
operation: null loading: false,
} operate: {},
}, messages: '',
components: { operation: null
NoticeInfo };
}, },
computed: { computed: {
show() { show() {
return this.dialogShow && !this.$store.state.menuOperation.break; return this.dialogShow && !this.$store.state.menuOperation.break;
}, },
title() { title() {
if (this.operation === OperationEvent.Train.addTrainId.menu.operation) { if (this.operation === OperationEvent.Train.addTrainId.menu.operation) {
return '添加列车识别号'; return '添加列车识别号';
} else if (this.operation === OperationEvent.Train.editTrainId.menu.operation) { } else if (this.operation === OperationEvent.Train.editTrainId.menu.operation) {
return '修改列车识别号'; return '修改列车识别号';
} else if (this.operation === OperationEvent.Train.delTrainId.menu.operation) { } else if (this.operation === OperationEvent.Train.delTrainId.menu.operation) {
return '删除列车识别号'; return '删除列车识别号';
} else if (this.operation === OperationEvent.Train.moveTrainId.menu.operation) { } else if (this.operation === OperationEvent.Train.moveTrainId.menu.operation) {
return '移动列车识别号'; return '移动列车识别号';
} else if (this.operation === OperationEvent.Train.switchTrainId.menu.operation) { } else if (this.operation === OperationEvent.Train.switchTrainId.menu.operation) {
return '交换列车识别号'; return '交换列车识别号';
} else if (this.operation === OperationEvent.Train.editTrainNo.menu.operation) { } else if (this.operation === OperationEvent.Train.editTrainNo.menu.operation) {
return '修改车组号' return '修改车组号';
} }
}, return '';
domIdCancel() { },
return this.dialogShow ? OperationEvent.Command.cancel.menu.domId : ''; domIdCancel() {
}, return this.dialogShow ? OperationEvent.Command.cancel.menu.domId : '';
domIdConfirm() { },
if (this.dialogShow) { domIdConfirm() {
if (this.operation === OperationEvent.Train.addTrainId.menu.operation) { if (this.operation === OperationEvent.Train.addTrainId.menu.operation) {
/** 添加列车识别号*/ /** 添加列车识别号*/
return OperationEvent.Train.addTrainId.confirm.domId return OperationEvent.Train.addTrainId.confirm.domId;
} else if (this.operation === OperationEvent.Train.editTrainId.menu.operation) { } else if (this.operation === OperationEvent.Train.editTrainId.menu.operation) {
/** 修改列车识别号*/ /** 修改列车识别号*/
return OperationEvent.Train.editTrainId.confirm.domId return OperationEvent.Train.editTrainId.confirm.domId;
} else if (this.operation === OperationEvent.Train.delTrainId.menu.operation) { } else if (this.operation === OperationEvent.Train.delTrainId.menu.operation) {
/** 删除列车识别号*/ /** 删除列车识别号*/
return OperationEvent.Train.delTrainId.confirm.domId return OperationEvent.Train.delTrainId.confirm.domId;
} else if (this.operation === OperationEvent.Train.moveTrainId.menu.operation) { } else if (this.operation === OperationEvent.Train.moveTrainId.menu.operation) {
/** 移动列车识别号*/ /** 移动列车识别号*/
return OperationEvent.Train.moveTrainId.confirm.domId return OperationEvent.Train.moveTrainId.confirm.domId;
} else if (this.operation === OperationEvent.Train.switchTrainId.menu.operation) { } else if (this.operation === OperationEvent.Train.switchTrainId.menu.operation) {
/** 交换列车识别号*/ /** 交换列车识别号*/
return OperationEvent.Train.switchTrainId.confirm.domId return OperationEvent.Train.switchTrainId.confirm.domId;
} else if (this.operation === OperationEvent.Train.editTrainNo.menu.operation) { } else if (this.operation === OperationEvent.Train.editTrainNo.menu.operation) {
/** 修改车组号*/ /** 修改车组号*/
return OperationEvent.Train.editTrainNo.confirm.domId return OperationEvent.Train.editTrainNo.confirm.domId;
} }
} return '';
}, }
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.$store.dispatch('training/tipReload'); this.$store.dispatch('training/tipReload');
}) });
}, },
methods: { methods: {
doShow(operate) { doShow(operate) {
if (!this.dialogShow) { if (!this.dialogShow) {
this.loading = false; this.loading = false;
this.operate = operate || {}; this.operate = operate || {};
this.messages = operate.messages; this.messages = operate.messages;
this.operation = operate.operation; this.operation = operate.operation;
} }
this.dialogShow = true; this.dialogShow = true;
this.$nextTick(function () { this.$nextTick(function () {
this.$store.dispatch('training/emitTipFresh'); this.$store.dispatch('training/emitTipFresh');
}); });
}, },
doClose() { doClose() {
this.loading = false; this.loading = false;
this.dialogShow = false; this.dialogShow = false;
this.$store.dispatch('map/setTrainWindowShow', false); this.$store.dispatch('map/setTrainWindowShow', false);
this.$store.dispatch('training/emitTipFresh'); this.$store.dispatch('training/emitTipFresh');
}, },
commit() { commit() {
if (this.operation === OperationEvent.Train.addTrainId.menu.operation) { if (this.operation === OperationEvent.Train.addTrainId.menu.operation) {
this.routeSetting(); this.routeSetting();
} else if (this.operation === OperationEvent.Train.editTrainId.menu.operation) { } else if (this.operation === OperationEvent.Train.editTrainId.menu.operation) {
this.routeSetting(); this.routeSetting();
} else if (this.operation === OperationEvent.Train.delTrainId.menu.operation) { } else if (this.operation === OperationEvent.Train.delTrainId.menu.operation) {
this.routeSetting(); this.routeSetting();
} else if (this.operation === OperationEvent.Train.moveTrainId.menu.operation) { } else if (this.operation === OperationEvent.Train.moveTrainId.menu.operation) {
this.routeSetting(); this.routeSetting();
} else if (this.operation === OperationEvent.Train.switchTrainId.menu.operation) { } else if (this.operation === OperationEvent.Train.switchTrainId.menu.operation) {
this.routeSetting(); this.routeSetting();
} else if (this.operation === OperationEvent.Train.editTrainNo.menu.operation) { } else if (this.operation === OperationEvent.Train.editTrainNo.menu.operation) {
this.routeSetting(); this.routeSetting();
} }
}, },
// //
routeSetting() { routeSetting() {
let operate = { const operate = {
send: true, send: true,
type: this.operate.type, type: this.operate.type,
operation: OperationEvent.Train.addTrainId.confirm.operation, operation: OperationEvent.Train.addTrainId.confirm.operation
} };
this.loading = true; this.loading = true;
this.$store.dispatch('training/next', operate).then(({ valid }) => { this.$store.dispatch('training/next', operate).then(({ valid }) => {
this.loading = false; this.loading = false;
if (valid) { if (valid) {
this.doClose(); this.doClose();
} }
}).catch((error) => { }).catch(() => {
this.loading = false; this.loading = false;
this.doClose(); this.doClose();
this.$refs.noticeInfo.doShow(operate); this.$refs.noticeInfo.doShow(operate);
}) });
}, },
cancel() { cancel() {
let operate = { const operate = {
type: this.operate.type, type: this.operate.type,
operation: OperationEvent.Command.cancel.menu.operation, operation: OperationEvent.Command.cancel.menu.operation
} };
this.$store.dispatch('training/next', operate).then(({ valid }) => { this.$store.dispatch('training/next', operate).then(({ valid }) => {
if (valid) { if (valid) {
this.doClose(); this.doClose();
} }
}).catch(error => { }).catch(() => {
this.doClose(); this.doClose();
}); });
} }
} }
} };
</script> </script>
<style> <style>

View File

@ -1,85 +1,94 @@
<template> <template>
<el-dialog class="chengdou-03__systerm popup-alarm" :title="title" :visible.sync="show" width="500px" <el-dialog
:before-close="doClose" :zIndex="2000" :modal="false" :close-on-click-modal="false" append-to-body v-dialogDrag> v-dialogDrag
<el-row> class="chengdou-03__systerm popup-alarm"
<el-col :offset="2"> :title="title"
<span v-for="message in messages">{{message}}</span><br> :visible.sync="show"
</el-col> width="500px"
</el-row> :before-close="doClose"
<el-row justify="center" class="button-group"> :z-index="2000"
<el-col :span="10" :offset="8"> :modal="false"
<el-button :id="domIdSure" type="primary" @click="commit">确定</el-button> :close-on-click-modal="false"
</el-col> append-to-body
</el-row> >
</span> <el-row>
</el-dialog> <el-col :offset="2">
<span v-for="(message, index) in messages" :key="index">{{ message }}</span>
</el-col>
</el-row>
<el-button justify="center" class="button-group">
<el-col :span="10" :offset="8">
<el-button :id="domIdSure" type="primary" @click="commit">确定</el-button>
</el-col>
</el-button>
</el-dialog>
</template> </template>
<script> <script>
import { MapDeviceType, OperationEvent } from '@/scripts/ConstDic'; import { OperationEvent } from '@/scripts/ConstDic';
export default { export default {
name: 'Popup-Alarm', name: 'PopupAlarm',
data() { data() {
return { return {
dialogShow: false, dialogShow: false,
messages: [], messages: [],
operate: null, operate: null,
operation: '', operation: ''
} };
}, },
computed: { computed: {
show() { show() {
return this.dialogShow && !this.$store.state.menuOperation.break; return this.dialogShow && !this.$store.state.menuOperation.break;
}, },
title() { title() {
return '弹出式告警'; return '弹出式告警';
}, },
domIdSure() { domIdSure() {
return this.dialogShow ? OperationEvent.Command.close.alarm.domId : ''; return this.dialogShow ? OperationEvent.Command.close.alarm.domId : '';
} }
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.$store.dispatch('training/tipReload'); this.$store.dispatch('training/tipReload');
}) });
}, },
methods: { methods: {
doShow(operate, messages) { doShow(operate, messages) {
this.operate = operate || {}; this.operate = operate || {};
this.operation = operate.operation; this.operation = operate.operation;
this.dialogShow = true; this.dialogShow = true;
this.messages = messages || []; this.messages = messages || [];
this.$nextTick(function () { this.$nextTick(function () {
this.$store.dispatch('training/emitTipFresh'); this.$store.dispatch('training/emitTipFresh');
}); });
}, },
doClose() { doClose() {
this.dialogShow = false; this.dialogShow = false;
this.$store.dispatch('training/emitTipFresh'); this.$store.dispatch('training/emitTipFresh');
}, },
commit() { commit() {
if (this.operation == OperationEvent.Section.alxeEffective.menu.operation) { if (this.operation == OperationEvent.Section.alxeEffective.menu.operation) {
// //
this.alxeEffective(); this.alxeEffective();
} }
}, },
alxeEffective() { alxeEffective() {
let operate = { const operate = {
type: this.operate.type, type: this.operate.type,
operation: OperationEvent.Command.close.alarm.operation, operation: OperationEvent.Command.close.alarm.operation
} };
this.$store.dispatch('training/next', operate).then(({ valid }) => { this.$store.dispatch('training/next', operate).then(({ valid }) => {
if (valid) { if (valid) {
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true }); this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
this.doClose(); this.doClose();
} }
}) });
} }
} }
} };
</script> </script>
<style> <style>

View File

@ -14,7 +14,7 @@
> >
<div class="context"> <div class="context">
<template v-for="(message,index) in messages"> <template v-for="(message,index) in messages">
<span :key="index">{{ message }}</span><br> <span :key="index">{{ message }}</span>
</template> </template>
</div> </div>
<el-row class="button-group"> <el-row class="button-group">

View File

@ -3,9 +3,9 @@ export function getBaseUrl() {
let BASE_API; let BASE_API;
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === 'development') {
// BASE_API = 'https://joylink.club/jlcloud'; // BASE_API = 'https://joylink.club/jlcloud';
BASE_API = 'https://test.joylink.club/jlcloud'; // BASE_API = 'https://test.joylink.club/jlcloud';
// BASE_API = 'http://192.168.3.5:9000'; // 袁琪 // BASE_API = 'http://192.168.3.5:9000'; // 袁琪
// BASE_API = 'http://192.168.3.6:9000'; // 旭强 BASE_API = 'http://192.168.3.6:9000'; // 旭强
// BASE_API = 'http://192.168.3.41:9000'; // 王兴杰 // BASE_API = 'http://192.168.3.41:9000'; // 王兴杰
} else { } else {
BASE_API = process.env.VUE_APP_BASE_API; BASE_API = process.env.VUE_APP_BASE_API;

View File

@ -37,7 +37,7 @@
</span> </span>
<el-input v-model="loginForm.username" name="username" type="text" placeholder="手机号/邮箱" /> <el-input v-model="loginForm.username" name="username" type="text" placeholder="手机号/邮箱" />
</el-form-item> </el-form-item>
<el-form-item prop="password" class="item_form_box"> <el-form-item prop="password" class="item_form_box item_form_password">
<span class="svg-container"> <span class="svg-container">
<svg-icon icon-class="password" /> <svg-icon icon-class="password" />
</span> </span>
@ -61,7 +61,7 @@
content="请在琏课堂小程序助手,完善个人信息,设置登陆密码,手机号或邮箱。" content="请在琏课堂小程序助手,完善个人信息,设置登陆密码,手机号或邮箱。"
class="popover_box" class="popover_box"
> >
<div slot="reference">无法登陆</div> <div slot="reference">无法登陆?</div>
</el-popover> </el-popover>
<el-form-item> <el-form-item>
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin"> <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
@ -247,11 +247,16 @@ export default {
color: #454545; color: #454545;
} }
.item_form_password{
margin-bottom: 10px;
}
.tip-message { .tip-message {
color: #F56C61; color: #F56C61;
padding: 5px; padding: 5px;
font-size: 12px; font-size: 12px;
height: 23px; height: 23px;
margin-bottom: 10px;
} }
} }
</style> </style>
@ -265,9 +270,9 @@ export default {
.popover_box { .popover_box {
position: absolute; position: absolute;
right: 80px; right: 80px;
bottom: 97px; bottom: 106px;
cursor: pointer; cursor: pointer;
color: #6c6c6c; color: #225592;
font-size: 14px; font-size: 14px;
} }

View File

@ -37,7 +37,7 @@
</span> </span>
<el-input v-model="loginForm.username" name="username" type="text" placeholder="Mobile phone number/email" /> <el-input v-model="loginForm.username" name="username" type="text" placeholder="Mobile phone number/email" />
</el-form-item> </el-form-item>
<el-form-item prop="password" class="item_form_box"> <el-form-item prop="password" class="item_form_box item_form_password">
<span class="svg-container"> <span class="svg-container">
<svg-icon icon-class="password" /> <svg-icon icon-class="password" />
</span> </span>
@ -61,7 +61,7 @@
content="Please in lian classroom small program assistant, perfect personal information, set login password, mobile phone number or email." content="Please in lian classroom small program assistant, perfect personal information, set login password, mobile phone number or email."
class="popover_box" class="popover_box"
> >
<div slot="reference">unable to login</div> <div slot="reference">unable to login?</div>
</el-popover> </el-popover>
<el-form-item> <el-form-item>
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin"> <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
@ -211,7 +211,7 @@ export default {
Cookies.set('user_lang', 'en'); Cookies.set('user_lang', 'en');
}); });
}).catch(() => { }).catch(() => {
this.tipsMsg = 'Incorrect user name or password, please retype.'; this.tipsMsg = 'Incorrect user name or password.';
this.loading = false; this.loading = false;
setTimeout(() => { this.tipsMsg = ''; }, 5000); setTimeout(() => { this.tipsMsg = ''; }, 5000);
}); });
@ -235,9 +235,9 @@ export default {
.popover_box { .popover_box {
position: absolute; position: absolute;
right: 80px; right: 80px;
bottom: 97px; bottom: 113px;
cursor: pointer; cursor: pointer;
color: #6c6c6c; color: #225592;
font-size: 14px; font-size: 14px;
} }

View File

@ -37,7 +37,7 @@
</span> </span>
<el-input v-model="loginForm.username" name="username" type="text" placeholder="手机号/邮箱" /> <el-input v-model="loginForm.username" name="username" type="text" placeholder="手机号/邮箱" />
</el-form-item> </el-form-item>
<el-form-item prop="password" class="item_form_box"> <el-form-item prop="password" class="item_form_box item_form_password">
<span class="svg-container"> <span class="svg-container">
<svg-icon icon-class="password" /> <svg-icon icon-class="password" />
</span> </span>
@ -61,7 +61,7 @@
content="请在琏课堂小程序助手,完善个人信息,设置登陆密码,手机号或邮箱。" content="请在琏课堂小程序助手,完善个人信息,设置登陆密码,手机号或邮箱。"
class="popover_box" class="popover_box"
> >
<div slot="reference">无法登陆</div> <div slot="reference">无法登陆?</div>
</el-popover> </el-popover>
<el-form-item> <el-form-item>
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin"> <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
@ -228,9 +228,9 @@ export default {
.popover_box { .popover_box {
position: absolute; position: absolute;
right: 80px; right: 80px;
bottom: 97px; bottom: 106px;
cursor: pointer; cursor: pointer;
color: #6c6c6c; color: #225592;
font-size: 14px; font-size: 14px;
} }

View File

@ -37,7 +37,7 @@
</span> </span>
<el-input v-model="loginForm.username" name="username" type="text" placeholder="手机号/邮箱" /> <el-input v-model="loginForm.username" name="username" type="text" placeholder="手机号/邮箱" />
</el-form-item> </el-form-item>
<el-form-item prop="password" class="item_form_box"> <el-form-item prop="password" class="item_form_box item_form_password">
<span class="svg-container"> <span class="svg-container">
<svg-icon icon-class="password" /> <svg-icon icon-class="password" />
</span> </span>
@ -61,7 +61,7 @@
content="请在琏课堂小程序助手,完善个人信息,设置登陆密码,手机号或邮箱。" content="请在琏课堂小程序助手,完善个人信息,设置登陆密码,手机号或邮箱。"
class="popover_box" class="popover_box"
> >
<div slot="reference">无法登陆</div> <div slot="reference">无法登陆?</div>
</el-popover> </el-popover>
<el-form-item> <el-form-item>
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin"> <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
@ -228,9 +228,9 @@ export default {
.popover_box { .popover_box {
position: absolute; position: absolute;
right: 80px; right: 80px;
bottom: 97px; bottom: 106px;
cursor: pointer; cursor: pointer;
color: #6c6c6c; color: #225592;
font-size: 14px; font-size: 14px;
} }