desc: 修改eslint 配置 保存
This commit is contained in:
zyy
parent
06003c8068
commit
d4191832fb
54
.eslintrc.js
54
.eslintrc.js
@ -10,7 +10,6 @@ module.exports = {
|
||||
es6: true,
|
||||
},
|
||||
extends: ['plugin:vue/recommended', 'eslint:recommended'],
|
||||
|
||||
// add your custom rules here
|
||||
//it is base on https://github.com/vuejs/eslint-config-vue
|
||||
rules: {
|
||||
@ -26,10 +25,7 @@ module.exports = {
|
||||
"vue/name-property-casing": ["error", "PascalCase"],
|
||||
"vue/no-v-html": "off",
|
||||
'accessor-pairs': 2,
|
||||
'arrow-spacing': [2, {
|
||||
'before': true,
|
||||
'after': true
|
||||
}],
|
||||
"arrow-spacing": 0,//=>的前/后括号
|
||||
'block-spacing': [2, 'always'],
|
||||
'brace-style': [2, '1tbs', {
|
||||
'allowSingleLine': true
|
||||
@ -47,7 +43,7 @@ module.exports = {
|
||||
'curly': [2, 'multi-line'],
|
||||
'dot-location': [2, 'property'],
|
||||
'eol-last': 2,
|
||||
'eqeqeq': ["error", "always", { "null": "ignore" }],
|
||||
// 'eqeqeq': ["error", "always", { "null": "ignore" }], // 全等
|
||||
'generator-star-spacing': [2, {
|
||||
'before': true,
|
||||
'after': true
|
||||
@ -63,10 +59,7 @@ module.exports = {
|
||||
'before': true,
|
||||
'after': true
|
||||
}],
|
||||
'new-cap': [2, {
|
||||
'newIsCap': true,
|
||||
'capIsNew': false
|
||||
}],
|
||||
"new-cap": 2,//函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用
|
||||
'new-parens': 2,
|
||||
'no-array-constructor': 2,
|
||||
'no-caller': 2,
|
||||
@ -94,7 +87,7 @@ module.exports = {
|
||||
'no-implied-eval': 2,
|
||||
'no-inner-declarations': [2, 'functions'],
|
||||
'no-invalid-regexp': 2,
|
||||
'no-irregular-whitespace': 2,
|
||||
'no-irregular-whitespace': 2, //不能有不规则的空格
|
||||
'no-iterator': 2,
|
||||
'no-label-var': 2,
|
||||
'no-labels': [2, {
|
||||
@ -102,8 +95,8 @@ module.exports = {
|
||||
'allowSwitch': false
|
||||
}],
|
||||
'no-lone-blocks': 2,
|
||||
'no-mixed-spaces-and-tabs': 2,
|
||||
'no-multi-spaces': 2,
|
||||
"no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格
|
||||
"no-multi-spaces": 1,//不能用多余的空格
|
||||
'no-multi-str': 2,
|
||||
'no-multiple-empty-lines': [2, {
|
||||
'max': 1
|
||||
@ -126,11 +119,11 @@ module.exports = {
|
||||
'no-self-compare': 2,
|
||||
'no-sequences': 2,
|
||||
'no-shadow-restricted-names': 2,
|
||||
'no-spaced-func': 2,
|
||||
'no-spaced-func': 2,//函数调用时 函数名与()之间不能有空格
|
||||
'no-sparse-arrays': 2,
|
||||
'no-this-before-super': 2,
|
||||
'no-throw-literal': 2,
|
||||
'no-trailing-spaces': 2,
|
||||
"no-trailing-spaces": 1,//一行结束后面不要有空格
|
||||
'no-undef': 2,
|
||||
'no-undef-init': 2,
|
||||
'no-unexpected-multiline': 2,
|
||||
@ -159,38 +152,37 @@ module.exports = {
|
||||
':': 'before'
|
||||
}
|
||||
}],
|
||||
'padded-blocks': [2, 'never'],
|
||||
"padded-blocks": 0,//块语句内行首行尾是否要空行
|
||||
'quotes': [2, 'single', {
|
||||
'avoidEscape': true,
|
||||
'allowTemplateLiterals': true
|
||||
}],
|
||||
'semi': [2, 'never'],
|
||||
'semi': [2, 'always'], //语句强制分号结尾
|
||||
'semi-spacing': [2, {
|
||||
'before': false,
|
||||
'after': true
|
||||
}],
|
||||
'space-before-blocks': [2, 'always'],
|
||||
'space-before-function-paren': [2, 'never'],
|
||||
'space-in-parens': [2, 'never'],
|
||||
'space-infix-ops': 2,
|
||||
"strict": 2,//使用严格模式
|
||||
'space-before-blocks': [2, 'always'], //不以新行开始的块{前面要不要有空格
|
||||
"space-before-function-paren": [0, "always"],//函数定义时括号前面要不要有空格
|
||||
"space-in-parens": [0, "never"],//小括号里面要不要有空格
|
||||
"space-infix-ops": 0,//中缀操作符周围要不要有空格
|
||||
'space-unary-ops': [2, {
|
||||
'words': true,
|
||||
'nonwords': false
|
||||
}],
|
||||
}], //一元运算符的前/后要要加空格
|
||||
'spaced-comment': [2, 'always', {
|
||||
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
|
||||
}],
|
||||
}], //注释风格要不要有空格什么的
|
||||
'template-curly-spacing': [2, 'never'],
|
||||
'use-isnan': 2,
|
||||
'valid-typeof': 2,
|
||||
'wrap-iife': [2, 'any'],
|
||||
'use-isnan': 2, //禁止比较时使用NaN，只能用isNaN()
|
||||
'valid-typeof': 2, //必须使用合法的typeof的值
|
||||
"wrap-iife": [2, "inside"],//立即执行函数表达式的小括号风格
|
||||
'yield-star-spacing': [2, 'both'],
|
||||
'yoda': [2, 'never'],
|
||||
'yoda': [2, 'never'], //禁止尤达条件
|
||||
'prefer-const': 2,
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
|
||||
'object-curly-spacing': [2, 'always', {
|
||||
objectsInObjects: false
|
||||
}],
|
||||
'array-bracket-spacing': [2, 'never']
|
||||
"object-curly-spacing": [0, "never"],//大括号内是否允许不必要的空格
|
||||
"array-bracket-spacing": [2, "never"], //是否允许非空数组里面有多余的空格
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import deviceType from "./deviceType";
|
||||
import deviceType from './deviceType';
|
||||
|
||||
const deviceModel = {};
|
||||
|
||||
/** link字段配置*/
|
||||
deviceModel[deviceType.Link] = {
|
||||
}
|
||||
};
|
||||
|
||||
export default deviceModel;
|
||||
export default deviceModel;
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import deviceType from './deviceType';
|
||||
|
||||
const deviceState = {}
|
||||
const deviceState = {};
|
||||
|
||||
/** link状态配置*/
|
||||
deviceState[deviceType.Link] = {
|
||||
status: {
|
||||
Default: '01', //01默认状态
|
||||
State01: '01', //01状态
|
||||
State02: '02', //02状态
|
||||
}
|
||||
}
|
||||
status: {
|
||||
Default: '01', // 01默认状态
|
||||
State01: '01', // 01状态
|
||||
State02: '02' // 02状态
|
||||
}
|
||||
};
|
||||
|
||||
export default deviceState;
|
||||
export default deviceState;
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
import deviceType from './deviceType';
|
||||
|
||||
const deviceStyle = {
|
||||
Global: {
|
||||
textFontSize: '8.2',
|
||||
backgroundColor: '#000000',
|
||||
}
|
||||
}
|
||||
Global: {
|
||||
textFontSize: '8.2',
|
||||
backgroundColor: '#000000'
|
||||
}
|
||||
};
|
||||
|
||||
/** link风格配置*/
|
||||
deviceStyle[deviceType.Link] = {
|
||||
linkColor: 'red',
|
||||
linkWidth: 8,
|
||||
linkTextColor: '#FFFFFF',
|
||||
}
|
||||
linkColor: 'red',
|
||||
linkWidth: 8,
|
||||
linkTextColor: '#FFFFFF'
|
||||
};
|
||||
|
||||
export default deviceStyle;
|
||||
export default deviceStyle;
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
const deviceType = {
|
||||
Link: 'Link',
|
||||
Section: 'Section',
|
||||
Signal: 'Signal',
|
||||
Station: 'Station',
|
||||
StationControl: 'StationControl',
|
||||
StationStand: 'StationStand',
|
||||
}
|
||||
Link: 'Link',
|
||||
Section: 'Section',
|
||||
Signal: 'Signal',
|
||||
Station: 'Station',
|
||||
StationControl: 'StationControl',
|
||||
StationStand: 'StationStand'
|
||||
};
|
||||
|
||||
export default deviceType;
|
||||
export default deviceType;
|
||||
|
||||
108
src/jmap/map.js
108
src/jmap/map.js
@ -4,78 +4,78 @@ import parser from './utils/parser';
|
||||
import deviceState from './config/deviceState';
|
||||
|
||||
class Jmap {
|
||||
constructor(opts) {
|
||||
// 挂载的dom节点
|
||||
this.$dom = opts.dom;
|
||||
constructor(opts) {
|
||||
// 挂载的dom节点
|
||||
this.$dom = opts.dom;
|
||||
|
||||
// 原始数据
|
||||
this.data = {};
|
||||
// 原始数据
|
||||
this.data = {};
|
||||
|
||||
// 默认初始状态
|
||||
this.defaultStateDict = this.loaddefaultState();
|
||||
// 默认初始状态
|
||||
this.defaultStateDict = this.loaddefaultState();
|
||||
|
||||
// 皮肤参数
|
||||
this.skinStyle = '';
|
||||
// 皮肤参数
|
||||
this.skinStyle = '';
|
||||
|
||||
// 皮肤风格
|
||||
this.styleDict = {};
|
||||
// 皮肤风格
|
||||
this.styleDict = {};
|
||||
|
||||
// 设备数据
|
||||
this.mapDevice = {};
|
||||
// 设备数据
|
||||
this.mapDevice = {};
|
||||
|
||||
// 设备代理数据
|
||||
this.proxyData = {};
|
||||
// 设备代理数据
|
||||
this.proxyData = {};
|
||||
|
||||
// 绘图模块
|
||||
this.$painter = new Painter(this, opts);
|
||||
}
|
||||
// 绘图模块
|
||||
this.$painter = new Painter(this, opts);
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 加载数据
|
||||
* @param {*} data
|
||||
* @param {*} data
|
||||
*/
|
||||
loadData(skinStyle, data) {
|
||||
// 保存原始数据
|
||||
this.data = data;
|
||||
loadData(skinStyle, data) {
|
||||
// 保存原始数据
|
||||
this.data = data;
|
||||
|
||||
// 解析地图数据
|
||||
this.mapDevice = parser(data, this.defaultStateDict);
|
||||
// 解析地图数据
|
||||
this.mapDevice = parser(data, this.defaultStateDict);
|
||||
|
||||
// 生成代理对象
|
||||
this.proxyData = new Proxy(this.mapDevice, new ProxyHandle(this));
|
||||
// 生成代理对象
|
||||
this.proxyData = new Proxy(this.mapDevice, new ProxyHandle(this));
|
||||
|
||||
// 初次渲染视图
|
||||
this.$painter.render(this.mapDevice);
|
||||
}
|
||||
// 初次渲染视图
|
||||
this.$painter.render(this.mapDevice);
|
||||
}
|
||||
|
||||
loaddefaultState() {
|
||||
let defaultStateDict = {};
|
||||
loaddefaultState() {
|
||||
const defaultStateDict = {};
|
||||
|
||||
Object.keys(deviceState).forEach(type => {
|
||||
defaultStateDict[type] = {};
|
||||
Object.keys(deviceState[type] || {}).forEach(state => {
|
||||
defaultStateDict[type][state] = deviceState[type][state].Default;
|
||||
})
|
||||
})
|
||||
Object.keys(deviceState).forEach(type => {
|
||||
defaultStateDict[type] = {};
|
||||
Object.keys(deviceState[type] || {}).forEach(state => {
|
||||
defaultStateDict[type][state] = deviceState[type][state].Default;
|
||||
});
|
||||
});
|
||||
|
||||
return defaultStateDict;
|
||||
}
|
||||
return defaultStateDict;
|
||||
}
|
||||
|
||||
getPainter() {
|
||||
return this.$painter;
|
||||
}
|
||||
getPainter() {
|
||||
return this.$painter;
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.$painter.clear();
|
||||
}
|
||||
clear() {
|
||||
this.$painter.clear();
|
||||
}
|
||||
|
||||
dispose() {
|
||||
this.skinStyle = '';
|
||||
this.styleDict = {};
|
||||
this.mapDevice = {};
|
||||
this.proxyData = {};
|
||||
this.$painter.dispose();
|
||||
}
|
||||
dispose() {
|
||||
this.skinStyle = '';
|
||||
this.styleDict = {};
|
||||
this.mapDevice = {};
|
||||
this.proxyData = {};
|
||||
this.$painter.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
export default Jmap;
|
||||
export default Jmap;
|
||||
|
||||
147
src/jmap/maps.js
147
src/jmap/maps.js
@ -7,97 +7,94 @@ import { getAttribute, setAttribute } from './utils/attribute';
|
||||
const DOM_ATTRIBUTE_KEY = '_emaps_instance_';
|
||||
|
||||
class Jmaps {
|
||||
constructor() {
|
||||
this._version = '4.2.1';
|
||||
constructor() {
|
||||
this._version = '4.2.1';
|
||||
|
||||
this._dependencies = { zrender: '4.0.6' };
|
||||
this._dependencies = { zrender: '4.0.6' };
|
||||
|
||||
this.instances = {}
|
||||
}
|
||||
this.instances = {};
|
||||
}
|
||||
|
||||
init(opts) {
|
||||
if (!opts) {
|
||||
throw new Error('Initialize failed: invalid params.');
|
||||
}
|
||||
init(opts) {
|
||||
if (!opts) {
|
||||
throw new Error('Initialize failed: invalid params.');
|
||||
}
|
||||
|
||||
if (__DEV__) {
|
||||
if ((zrender.version.replace('.', '') - 0) < (this._dependencies.zrender.replace('.', '') - 0)) {
|
||||
throw new Error(
|
||||
'zrender/src ' + zrender.version
|
||||
+ ' is too old for ECharts ' + version
|
||||
+ '. Current version need ZRender '
|
||||
+ this._dependencies.zrender + '+'
|
||||
);
|
||||
}
|
||||
if (__DEV__) {
|
||||
// 判断版本
|
||||
if ((zrender.version.replace('.', '') - 0) < (this._dependencies.zrender.replace('.', '') - 0)) {
|
||||
throw new Error(
|
||||
'zrender/src ' + zrender.version +
|
||||
' is too old for ECharts ' + zrender.version +
|
||||
'. Current version need ZRender ' +
|
||||
this._dependencies.zrender + '+'
|
||||
);
|
||||
}
|
||||
|
||||
if (!opts.dom && opts.id) {
|
||||
opts['dom'] = document.getElementById(opts.id);
|
||||
}
|
||||
if (!opts.dom && opts.id) {
|
||||
opts['dom'] = document.getElementById(opts.id);
|
||||
}
|
||||
|
||||
if (!opts.dom) {
|
||||
throw new Error('Initialize failed: invalid dom and id.');
|
||||
}
|
||||
}
|
||||
if (!opts.dom) {
|
||||
throw new Error('Initialize failed: invalid dom and id.');
|
||||
}
|
||||
}
|
||||
|
||||
let existInstance = this.getInstanceByDom(opts.dom);
|
||||
if (existInstance) {
|
||||
if (__DEV__) {
|
||||
console.warn('There is a chart instance already initialized on the dom.');
|
||||
}
|
||||
return existInstance;
|
||||
}
|
||||
const existInstance = this.getInstanceByDom(opts.dom);
|
||||
if (existInstance) {
|
||||
if (__DEV__) {
|
||||
console.warn('There is a chart instance already initialized on the dom.');
|
||||
}
|
||||
return existInstance;
|
||||
}
|
||||
|
||||
if (__DEV__) {
|
||||
if (zrUtil.isDom(opts.dom)
|
||||
&& opts.dom.nodeName.toUpperCase() !== 'CANVAS'
|
||||
&& (
|
||||
(!opts.dom.clientWidth && (!opts || opts.width == null))
|
||||
|| (!opts.dom.clientHeight && (!opts || opts.height == null))
|
||||
)
|
||||
) {
|
||||
console.warn('Can\'t get DOM width or height. Please check '
|
||||
+ 'dom.clientWidth and dom.clientHeight. They should not be 0.'
|
||||
+ 'For example, you may need to call this in the callback '
|
||||
+ 'of window.onload.');
|
||||
}
|
||||
}
|
||||
if (__DEV__) {
|
||||
if (zrUtil.isDom(opts.dom) &&
|
||||
opts.dom.nodeName.toUpperCase() !== 'CANVAS' &&
|
||||
((!opts.dom.clientWidth && (!opts || opts.width == null)) || (!opts.dom.clientHeight && (!opts || opts.height == null)))
|
||||
) {
|
||||
console.warn('Can\'t get DOM width or height. Please check ' +
|
||||
'dom.clientWidth and dom.clientHeight. They should not be 0.' +
|
||||
'For example, you may need to call this in the callback ' +
|
||||
'of window.onload.');
|
||||
}
|
||||
}
|
||||
|
||||
let jmap = new Jmap(opts);
|
||||
const jmap = new Jmap(opts);
|
||||
|
||||
this.instances[opts.id] = jmap;
|
||||
this.instances[opts.id] = jmap;
|
||||
|
||||
setAttribute(opts.dom, DOM_ATTRIBUTE_KEY, opts.id);
|
||||
setAttribute(opts.dom, DOM_ATTRIBUTE_KEY, opts.id);
|
||||
|
||||
return jmap;
|
||||
}
|
||||
return jmap;
|
||||
}
|
||||
|
||||
getVersion() {
|
||||
return this._version;
|
||||
}
|
||||
getVersion() {
|
||||
return this._version;
|
||||
}
|
||||
|
||||
getDependencies() {
|
||||
return this._dependencies;
|
||||
}
|
||||
getDependencies() {
|
||||
return this._dependencies;
|
||||
}
|
||||
|
||||
getInstanceByDom(dom) {
|
||||
return this.instances[getAttribute(dom, DOM_ATTRIBUTE_KEY)];
|
||||
}
|
||||
getInstanceByDom(dom) {
|
||||
return this.instances[getAttribute(dom, DOM_ATTRIBUTE_KEY)];
|
||||
}
|
||||
|
||||
getInstanceById(id) {
|
||||
return this.instances[id];
|
||||
}
|
||||
getInstanceById(id) {
|
||||
return this.instances[id];
|
||||
}
|
||||
|
||||
dispose(jmap) {
|
||||
if (typeof jmap === 'string') {
|
||||
jmap = instances[jmap];
|
||||
}
|
||||
else if (!(jmap instanceof Jmap)) {
|
||||
jmap = this.getInstanceByDom(jmap);
|
||||
}
|
||||
if ((jmap instanceof Jmap) && !jmap.isDisposed()) {
|
||||
jmap.dispose();
|
||||
}
|
||||
}
|
||||
dispose(jmap) {
|
||||
if (typeof jmap === 'string') {
|
||||
jmap = this.instances[jmap];
|
||||
} else if (!(jmap instanceof Jmap)) {
|
||||
jmap = this.getInstanceByDom(jmap);
|
||||
}
|
||||
if ((jmap instanceof Jmap) && !jmap.isDisposed()) {
|
||||
jmap.dispose();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Jmaps;
|
||||
export default Jmaps;
|
||||
|
||||
@ -8,135 +8,135 @@ const renderer = 'svg';
|
||||
const devicePixelRatio = 2;
|
||||
|
||||
class Painter {
|
||||
constructor(jamp, opts) {
|
||||
// 父级实例
|
||||
this.$jamp = jamp;
|
||||
constructor(jamp, opts) {
|
||||
// 父级实例
|
||||
this.$jamp = jamp;
|
||||
|
||||
// zrender实例
|
||||
this.$zr = null;
|
||||
// zrender实例
|
||||
this.$zr = null;
|
||||
|
||||
// 皮肤配置
|
||||
this.styleMap = {};
|
||||
// 皮肤配置
|
||||
this.styleMap = {};
|
||||
|
||||
// 图层数据
|
||||
this.viewLevelMap = {};
|
||||
// 图层数据
|
||||
this.viewLevelMap = {};
|
||||
|
||||
// 视图数据
|
||||
this.viewInstance = {};
|
||||
// 视图数据
|
||||
this.viewInstance = {};
|
||||
|
||||
// 父级图层
|
||||
this.parentLevel = new Group({ name: '__parent__' });
|
||||
// 父级图层
|
||||
this.parentLevel = new Group({ name: '__parent__' });
|
||||
|
||||
// 挂载视图
|
||||
this.mount(opts.dom, Object.assign({ renderer, devicePixelRatio, width: opts.dom.width, height: opts.dom.clientHeight }, opts.config));
|
||||
}
|
||||
// 挂载视图
|
||||
this.mount(opts.dom, Object.assign({ renderer, devicePixelRatio, width: opts.dom.width, height: opts.dom.clientHeight }, opts.config));
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 挂载视图
|
||||
* @param {*} dom
|
||||
* @param {*} config
|
||||
* @param {*} dom
|
||||
* @param {*} config
|
||||
*/
|
||||
mount(dom, config) {
|
||||
// 挂载页面视图
|
||||
this.$zr = zrender.init(dom, config);
|
||||
mount(dom, config) {
|
||||
// 挂载页面视图
|
||||
this.$zr = zrender.init(dom, config);
|
||||
|
||||
// 添加父级图层
|
||||
this.$zr.add(this.parentLevel);
|
||||
// 添加父级图层
|
||||
this.$zr.add(this.parentLevel);
|
||||
|
||||
// 添加子级图层
|
||||
Object.values(deviceType).forEach(type => {
|
||||
let level = new Group({ name: `__${type}__` })
|
||||
this.viewLevelMap[type] = level;
|
||||
this.parentLevel.add(level);
|
||||
})
|
||||
}
|
||||
// 添加子级图层
|
||||
Object.values(deviceType).forEach(type => {
|
||||
const level = new Group({ name: `__${type}__` });
|
||||
this.viewLevelMap[type] = level;
|
||||
this.parentLevel.add(level);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 初次渲染视图
|
||||
* @param {*} mapDevice
|
||||
* @param {*} mapDevice
|
||||
*/
|
||||
render(mapDevice, skinStyle) {
|
||||
// 清空视图
|
||||
this.viewInstance = {};
|
||||
render(mapDevice, skinStyle) {
|
||||
// 清空视图
|
||||
this.viewInstance = {};
|
||||
|
||||
// 加载皮肤
|
||||
this.styleMap = this.loadStyle(skinStyle);
|
||||
// 加载皮肤
|
||||
this.styleMap = this.loadStyle(skinStyle);
|
||||
|
||||
// 清空图层
|
||||
Object.values(this.viewLevelMap).forEach(level => {
|
||||
level && level.removeAll();
|
||||
})
|
||||
// 清空图层
|
||||
Object.values(this.viewLevelMap).forEach(level => {
|
||||
level && level.removeAll();
|
||||
});
|
||||
|
||||
// 创建视图
|
||||
Object.values(mapDevice).forEach(device => {
|
||||
device && this.add(device);
|
||||
})
|
||||
}
|
||||
// 创建视图
|
||||
Object.values(mapDevice).forEach(device => {
|
||||
device && this.add(device);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 加载皮肤
|
||||
* @param {*} skinStyle
|
||||
* @param {*} skinStyle
|
||||
*/
|
||||
loadStyle(skinStyle) {
|
||||
return deviceStyle;
|
||||
}
|
||||
loadStyle(skinStyle) {
|
||||
return deviceStyle;
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 添加视图
|
||||
* @param {*} device
|
||||
* @param {*} device
|
||||
*/
|
||||
add(device) {
|
||||
let type = device._type;
|
||||
let code = device._code;
|
||||
let view = shapefactory(type, device, this.styleMap);
|
||||
if (view) {
|
||||
this.viewInstance[code] = view;
|
||||
this.viewLevelMap[type].add(view);
|
||||
}
|
||||
}
|
||||
add(device) {
|
||||
const type = device._type;
|
||||
const code = device._code;
|
||||
const view = shapefactory(type, device, this.styleMap);
|
||||
if (view) {
|
||||
this.viewInstance[code] = view;
|
||||
this.viewLevelMap[type].add(view);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 删除视图
|
||||
* @param {*} device
|
||||
* @param {*} device
|
||||
*/
|
||||
delete(device) {
|
||||
let code = device._code;
|
||||
let type = device._type;
|
||||
let view = this.viewInstance[code];
|
||||
if (view) {
|
||||
this.viewLevelMap[type].remove(view);
|
||||
delete this.viewInstance[code];
|
||||
}
|
||||
}
|
||||
delete(device) {
|
||||
const code = device._code;
|
||||
const type = device._type;
|
||||
const view = this.viewInstance[code];
|
||||
if (view) {
|
||||
this.viewLevelMap[type].remove(view);
|
||||
delete this.viewInstance[code];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 更新视图
|
||||
* @param {*} device
|
||||
* @param {*} device
|
||||
*/
|
||||
update(device) {
|
||||
let code = device._code;
|
||||
let view = this.viewInstance[code];
|
||||
if (view) {
|
||||
view.setStatus(device);
|
||||
}
|
||||
}
|
||||
update(device) {
|
||||
const code = device._code;
|
||||
const view = this.viewInstance[code];
|
||||
if (view) {
|
||||
view.setStatus(device);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 清除所有对象和画布
|
||||
*/
|
||||
clear() {
|
||||
this.$zr && this.$zr.clear();
|
||||
}
|
||||
clear() {
|
||||
this.$zr && this.$zr.clear();
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 销毁 ZRender 实例
|
||||
*/
|
||||
dispose() {
|
||||
this.$zr && zrender.dispose(this.$zr);
|
||||
this.$zr = null;
|
||||
this.viewInstance = {};
|
||||
this.viewLevelMap = {};
|
||||
}
|
||||
dispose() {
|
||||
this.$zr && zrender.dispose(this.$zr);
|
||||
this.$zr = null;
|
||||
this.viewInstance = {};
|
||||
this.viewLevelMap = {};
|
||||
}
|
||||
}
|
||||
|
||||
export default Painter;
|
||||
export default Painter;
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
class ProxyHandle {
|
||||
constructor(jmap) {
|
||||
this.$jmap = jmap || {};
|
||||
this.$painter = this.$jmap.$painter;
|
||||
}
|
||||
constructor(jmap) {
|
||||
this.$jmap = jmap || {};
|
||||
this.$painter = this.$jmap.$painter;
|
||||
}
|
||||
|
||||
set(target, code, device) {
|
||||
let reflect = Reflect.set(target, code, device);
|
||||
this.$painter.update(device);
|
||||
return reflect;
|
||||
}
|
||||
set(target, code, device) {
|
||||
const reflect = Reflect.set(target, code, device);
|
||||
this.$painter.update(device);
|
||||
return reflect;
|
||||
}
|
||||
|
||||
get(target, code) {
|
||||
let reflect = Reflect.get(target, code);
|
||||
return reflect;
|
||||
}
|
||||
get(target, code) {
|
||||
const reflect = Reflect.get(target, code);
|
||||
return reflect;
|
||||
}
|
||||
|
||||
has(target, code) {
|
||||
let reflect = Reflect.has(target, code);
|
||||
this.$painter.add(device);
|
||||
return reflect;
|
||||
}
|
||||
has(target, code) {
|
||||
const reflect = Reflect.has(target, code);
|
||||
this.$painter.add(device);
|
||||
return reflect;
|
||||
}
|
||||
|
||||
deletecodeerty(target, code) {
|
||||
let reflect = Reflect.deletecodeerty(target, code);
|
||||
this.$painter.delete(device);
|
||||
return reflect;
|
||||
}
|
||||
deletecodeerty(target, code) {
|
||||
const reflect = Reflect.deletecodeerty(target, code);
|
||||
this.$painter.delete(device);
|
||||
return reflect;
|
||||
}
|
||||
}
|
||||
|
||||
export default ProxyHandle;
|
||||
export default ProxyHandle;
|
||||
|
||||
@ -1,61 +1,61 @@
|
||||
import Line from 'zrender/src/graphic/shape/Line';
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import { stat } from 'fs';
|
||||
// import { stat } from 'fs';
|
||||
|
||||
class Link extends Group {
|
||||
constructor({ _code, _type, zlevel, model, state }, style) {
|
||||
super();
|
||||
this._code = _code;
|
||||
this._type = _type;
|
||||
this.zlevel = zlevel;
|
||||
this.model = model;
|
||||
this.state = state;
|
||||
this.style = style;
|
||||
this.create();
|
||||
}
|
||||
constructor({ _code, _type, zlevel, model, state }, style) {
|
||||
super();
|
||||
this._code = _code;
|
||||
this._type = _type;
|
||||
this.zlevel = zlevel;
|
||||
this.model = model;
|
||||
this.state = state;
|
||||
this.style = style;
|
||||
this.create();
|
||||
}
|
||||
|
||||
create() {
|
||||
let model = this.model;
|
||||
let style = this.style;
|
||||
let textPosition = 'insideBottom';
|
||||
create() {
|
||||
const model = this.model;
|
||||
const style = this.style;
|
||||
let textPosition = 'insideBottom';
|
||||
|
||||
if (model.beg.x !== model.end.x && model.beg.y !== model.end.y) {
|
||||
textPosition = model.beg.y > model.end.y ? 'insideLeft' : 'insideRight';
|
||||
}
|
||||
if (model.beg.x !== model.end.x && model.beg.y !== model.end.y) {
|
||||
textPosition = model.beg.y > model.end.y ? 'insideLeft' : 'insideRight';
|
||||
}
|
||||
|
||||
this.link = new Line({
|
||||
zlevel: this.zlevel,
|
||||
shape: {
|
||||
x1: model.beg.x,
|
||||
y1: model.beg.y,
|
||||
x2: model.end.x,
|
||||
y2: model.end.y,
|
||||
},
|
||||
style: {
|
||||
lineWidth: style.Link.linkWidth,
|
||||
stroke: style.Link.linkColor,
|
||||
text: model.code,
|
||||
textDistance: style.Link.linkWidth * 2,
|
||||
textPosition: textPosition,
|
||||
textAlign: 'middle',
|
||||
fontSize: style.Global.textFontSize,
|
||||
textFill: style.Link.linkTextColor,
|
||||
textStroke: style.Global.backgroundColor,
|
||||
}
|
||||
});
|
||||
this.link = new Line({
|
||||
zlevel: this.zlevel,
|
||||
shape: {
|
||||
x1: model.beg.x,
|
||||
y1: model.beg.y,
|
||||
x2: model.end.x,
|
||||
y2: model.end.y
|
||||
},
|
||||
style: {
|
||||
lineWidth: style.Link.linkWidth,
|
||||
stroke: style.Link.linkColor,
|
||||
text: model.code,
|
||||
textDistance: style.Link.linkWidth * 2,
|
||||
textPosition: textPosition,
|
||||
textAlign: 'middle',
|
||||
fontSize: style.Global.textFontSize,
|
||||
textFill: style.Link.linkTextColor,
|
||||
textStroke: style.Global.backgroundColor
|
||||
}
|
||||
});
|
||||
|
||||
this.add(this.link);
|
||||
}
|
||||
this.add(this.link);
|
||||
}
|
||||
|
||||
setStatus() {
|
||||
}
|
||||
setStatus() {
|
||||
}
|
||||
|
||||
tipBasePoint() {
|
||||
return {
|
||||
x: (this.link.shape.x1 + this.link.shape.x2) / 2,
|
||||
y: (this.link.shape.y1 + this.link.shape.y2) / 2
|
||||
};
|
||||
}
|
||||
tipBasePoint() {
|
||||
return {
|
||||
x: (this.link.shape.x1 + this.link.shape.x2) / 2,
|
||||
y: (this.link.shape.y1 + this.link.shape.y2) / 2
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default Link;
|
||||
export default Link;
|
||||
|
||||
@ -6,10 +6,11 @@ const mapShape = {};
|
||||
mapShape[deviceType.Link] = Link;
|
||||
|
||||
function shapefactory(type, device, style) {
|
||||
let shape = mapShape[type];
|
||||
if (shape instanceof Function) {
|
||||
return new shape(device, style);
|
||||
}
|
||||
const shape = mapShape[type];
|
||||
if (shape instanceof Function) {
|
||||
return new shape(device, style);
|
||||
}
|
||||
}
|
||||
|
||||
export default shapefactory
|
||||
export default shapefactory
|
||||
;
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
export function setAttribute(dom, key, value) {
|
||||
dom.setAttribute
|
||||
? dom.setAttribute(key, value)
|
||||
: (dom[key] = value);
|
||||
dom.setAttribute
|
||||
? dom.setAttribute(key, value)
|
||||
: (dom[key] = value);
|
||||
}
|
||||
|
||||
export function getAttribute(dom, key) {
|
||||
return dom.getAttribute
|
||||
? dom.getAttribute(key)
|
||||
: dom[key];
|
||||
}
|
||||
return dom.getAttribute
|
||||
? dom.getAttribute(key)
|
||||
: dom[key];
|
||||
}
|
||||
|
||||
@ -2,15 +2,14 @@ var dev;
|
||||
|
||||
// In browser
|
||||
if (typeof window !== 'undefined') {
|
||||
dev = window.__DEV__;
|
||||
}
|
||||
// In node
|
||||
else if (typeof global !== 'undefined') {
|
||||
dev = global.__DEV__;
|
||||
dev = window.__DEV__;
|
||||
} else if (typeof global !== 'undefined') {
|
||||
// In node
|
||||
dev = global.__DEV__;
|
||||
}
|
||||
|
||||
if (typeof dev === 'undefined') {
|
||||
dev = true;
|
||||
dev = true;
|
||||
}
|
||||
|
||||
export var __DEV__ = dev;
|
||||
export var __DEV__ = dev;
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
import deviceType from '../config/deviceType';
|
||||
|
||||
function deviceFactory(type, defaultStateDict, elem, zlevel) {
|
||||
return {
|
||||
zlevel: zlevel,
|
||||
_type: type,
|
||||
_code: elem.code,
|
||||
model: elem,
|
||||
state: Object.assign({}, defaultStateDict[type])
|
||||
}
|
||||
return {
|
||||
zlevel: zlevel,
|
||||
_type: type,
|
||||
_code: elem.code,
|
||||
model: elem,
|
||||
state: Object.assign({}, defaultStateDict[type])
|
||||
};
|
||||
}
|
||||
|
||||
function parser(data, defaultStateDict) {
|
||||
let mapDevice = {};
|
||||
const mapDevice = {};
|
||||
|
||||
if (data) {
|
||||
(data.linkList || []).forEach(elem => {
|
||||
mapDevice[elem.code] = deviceFactory(deviceType.Link, defaultStateDict, elem, 1);
|
||||
});
|
||||
}
|
||||
if (data) {
|
||||
(data.linkList || []).forEach(elem => {
|
||||
mapDevice[elem.code] = deviceFactory(deviceType.Link, defaultStateDict, elem, 1);
|
||||
});
|
||||
}
|
||||
|
||||
return mapDevice;
|
||||
return mapDevice;
|
||||
}
|
||||
|
||||
export default parser;
|
||||
|
||||
@ -11,10 +11,10 @@ export default {
|
||||
name: 'AppMain',
|
||||
computed: {
|
||||
key() {
|
||||
return this.$route.fullPath
|
||||
return this.$route.fullPath;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
33
src/main.js
33
src/main.js
@ -1,36 +1,35 @@
|
||||
import Vue from 'vue'
|
||||
import Vue from 'vue';
|
||||
|
||||
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
|
||||
import 'normalize.css/normalize.css'; // A modern alternative to CSS resets
|
||||
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
|
||||
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n
|
||||
|
||||
import '@/styles/index.scss' // global css
|
||||
import '@/styles/index.scss'; // global css
|
||||
|
||||
import App from './App'
|
||||
import store from './store'
|
||||
import router from './router'
|
||||
import App from './App';
|
||||
import store from './store';
|
||||
import router from './router';
|
||||
|
||||
import '@/icons' // icon
|
||||
import '@/permission' // permission control
|
||||
import '@/scripts/GlobalPlugin'
|
||||
import '@/icons'; // icon
|
||||
import '@/permission'; // permission control
|
||||
import '@/scripts/GlobalPlugin';
|
||||
|
||||
Vue.use(ElementUI)
|
||||
Vue.use(ElementUI);
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
let name = to.fullPath;
|
||||
const name = to.fullPath;
|
||||
if (name.includes('/dp/') || name.includes('display/dp')) {
|
||||
document.title = '琏课堂-大屏系统';
|
||||
} else if (name.includes('/plan/') || name.includes('/planEdit/')) {
|
||||
@ -41,7 +40,7 @@ router.beforeEach((to, from, next) => {
|
||||
next();
|
||||
});
|
||||
|
||||
Vue.prototype.$messageBox = function (msge) {
|
||||
Vue.prototype.$messageBox = function(msge) {
|
||||
if (this.$confirm) {
|
||||
this.$confirm(`${msge || '处理失败'}！`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import * as throttleUtil from '@/utils/throttle'
|
||||
import * as throttleUtil from '@/utils/throttle';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
_clientWidth: '',
|
||||
_clientHeight: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
beforeMount() {
|
||||
// 调用节流函数限制执行频率
|
||||
@ -14,22 +14,22 @@ export default {
|
||||
'_resizeHandler',
|
||||
300,
|
||||
'debounce'
|
||||
)
|
||||
window.addEventListener('resize', fn)
|
||||
);
|
||||
window.addEventListener('resize', fn);
|
||||
},
|
||||
mounted() {
|
||||
this._resizeHandler()
|
||||
this._resizeHandler();
|
||||
},
|
||||
methods: {
|
||||
_resizeHandler() {
|
||||
this._clientWidth = document.documentElement.clientWidth
|
||||
this._clientHeight = document.documentElement.clientHeight
|
||||
this._clientWidth = document.documentElement.clientWidth;
|
||||
this._clientHeight = document.documentElement.clientHeight;
|
||||
if (this.resizeHandler) {
|
||||
this.resizeHandler()
|
||||
this.resizeHandler();
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this._resizeHandler)
|
||||
window.removeEventListener('resize', this._resizeHandler);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -28,14 +28,14 @@ function getRouteInfo(to) {
|
||||
let loginPath = '/';
|
||||
let getTokenInfo = () => { };
|
||||
let clientId = '';
|
||||
let toRoutePath = to.redirectedFrom || to.path;
|
||||
const toRoutePath = to.redirectedFrom || to.path;
|
||||
|
||||
if (/^\/dp/.test(toRoutePath) || /^\/display\/dp/.test(toRoutePath)) {
|
||||
loginPath = loginScreenPage
|
||||
loginPath = loginScreenPage;
|
||||
getTokenInfo = getScreenToken;
|
||||
clientId = LoginParams.DaPing.clientId;
|
||||
} else if (/^\/plan/.test(toRoutePath) || /^\/display\/plan/.test(toRoutePath) || /^\/planEdit/.test(toRoutePath)) {
|
||||
loginPath = loginPlanPage
|
||||
loginPath = loginPlanPage;
|
||||
getTokenInfo = getPlanToken;
|
||||
clientId = LoginParams.LianJiHua.clientId;
|
||||
} else {
|
||||
@ -44,7 +44,7 @@ function getRouteInfo(to) {
|
||||
clientId = null;
|
||||
}
|
||||
|
||||
return { clientId, loginPath, getTokenInfo }
|
||||
return { clientId, loginPath, getTokenInfo };
|
||||
}
|
||||
|
||||
function handleRoute(to, from, next, routeInfo) {
|
||||
@ -71,7 +71,7 @@ function handleRoute(to, from, next, routeInfo) {
|
||||
});
|
||||
});
|
||||
} else {
|
||||
//除没有动态改变权限的需求可直接next() 删下方权限判断
|
||||
// 除没有动态改变权限的需求可直接next() 删下方权限判断
|
||||
if (hasPermission(store.getters.roles, to.meta.roles)) {
|
||||
next();
|
||||
} else {
|
||||
@ -82,7 +82,7 @@ function handleRoute(to, from, next, routeInfo) {
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
NProgress.start();
|
||||
let routeInfo = getRouteInfo(to);
|
||||
const routeInfo = getRouteInfo(to);
|
||||
if (routeInfo.getTokenInfo()) {
|
||||
// 已登录
|
||||
if (to.path === routeInfo.loginPath) {
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Vue from 'vue';
|
||||
import Router from 'vue-router';
|
||||
|
||||
Vue.use(Router)
|
||||
Vue.use(Router);
|
||||
|
||||
/* Layout */
|
||||
import Layout from '@/layout'
|
||||
import Layout from '@/layout';
|
||||
|
||||
/**
|
||||
* Note: sub-menu only appear when route children.length >= 1
|
||||
@ -31,12 +31,11 @@ export const lessonCreater = '03'; // 课程创建权限
|
||||
export const admin = '04'; // 管理员
|
||||
export const superAdmin = '05'; // 超级管理员
|
||||
|
||||
export const userExam = '011'; // 考试系统
|
||||
export const userLesson = '012'; // 教学系统
|
||||
export const userExam = '011'; // 考试系统
|
||||
export const userLesson = '012'; // 教学系统
|
||||
export const userSimulation = '013'; // 仿真系统
|
||||
export const userScreen = '014'; // 大屏系统
|
||||
export const userPlan = '015'; // 计划系统
|
||||
|
||||
export const userScreen = '014'; // 大屏系统
|
||||
export const userPlan = '015'; // 计划系统
|
||||
|
||||
export const UrlConfig = {
|
||||
display: '/display',
|
||||
@ -85,7 +84,7 @@ export const constantRoutes = [
|
||||
meta: { title: '首页', icon: 'dashboard' }
|
||||
}]
|
||||
}
|
||||
]
|
||||
];
|
||||
|
||||
export const asyncRouter = [
|
||||
{
|
||||
@ -105,14 +104,14 @@ export const asyncRouter = [
|
||||
},
|
||||
|
||||
{ path: '*', redirect: '/404', hidden: true }
|
||||
]
|
||||
];
|
||||
|
||||
const createRouter = () => new Router({
|
||||
mode: 'history', // require service support
|
||||
scrollBehavior: () => ({ y: 0 }),
|
||||
routes: constantRoutes
|
||||
})
|
||||
});
|
||||
|
||||
const router = createRouter()
|
||||
const router = createRouter();
|
||||
|
||||
export default router
|
||||
export default router;
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
module.exports = {
|
||||
|
||||
title: '琏课堂',
|
||||
title: '琏课堂',
|
||||
|
||||
/**
|
||||
* @type {boolean} true | false
|
||||
* @description Whether fix the header
|
||||
*/
|
||||
fixedHeader: false,
|
||||
fixedHeader: false,
|
||||
|
||||
/**
|
||||
* @type {boolean} true | false
|
||||
* @description Whether show the logo in sidebar
|
||||
*/
|
||||
sidebarLogo: false
|
||||
}
|
||||
sidebarLogo: false
|
||||
};
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WindowResizeHandler from '@/mixin/WindowResizeHandler'
|
||||
import localStore from 'storejs'
|
||||
import WindowResizeHandler from '@/mixin/WindowResizeHandler';
|
||||
import localStore from 'storejs';
|
||||
|
||||
export default {
|
||||
name: 'DrapLeft',
|
||||
@ -44,52 +44,52 @@ export default {
|
||||
return {
|
||||
height: 0,
|
||||
widthLefts: 0
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const oDiv = this.$refs.drapBox
|
||||
const oDiv = this.$refs.drapBox;
|
||||
oDiv.onmousedown = () => {
|
||||
return false
|
||||
}
|
||||
return false;
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
resizeHandler: function() {
|
||||
this.height = this._clientHeight
|
||||
this.height = this._clientHeight;
|
||||
},
|
||||
mousedown(e) {
|
||||
const oDiv = this.$refs.drapBox
|
||||
const maxNum = this.max || 850
|
||||
const minNum = this.min || 150
|
||||
const oDiv = this.$refs.drapBox;
|
||||
const maxNum = this.max || 850;
|
||||
const minNum = this.min || 150;
|
||||
oDiv.onmousedown = function() {
|
||||
return false
|
||||
}
|
||||
e.stopPropagation()
|
||||
window.event.cancelBubble = true
|
||||
const odiv = e.target
|
||||
const disX = e.clientX - odiv.offsetLeft
|
||||
return false;
|
||||
};
|
||||
e.stopPropagation();
|
||||
window.event.cancelBubble = true;
|
||||
const odiv = e.target;
|
||||
const disX = e.clientX - odiv.offsetLeft;
|
||||
document.onmousemove = (e) => {
|
||||
let left = e.clientX - disX
|
||||
let left = e.clientX - disX;
|
||||
if (left > maxNum) {
|
||||
left = maxNum
|
||||
left = maxNum;
|
||||
} else if (left < minNum) {
|
||||
left = minNum
|
||||
left = minNum;
|
||||
}
|
||||
odiv.style.left = left + 'px'
|
||||
this.$emit('drapWidth', left)
|
||||
this.widthLefts = left
|
||||
}
|
||||
odiv.style.left = left + 'px';
|
||||
this.$emit('drapWidth', left);
|
||||
this.widthLefts = left;
|
||||
};
|
||||
document.onmouseup = (e) => {
|
||||
if (this.isSave) {
|
||||
if (this.widthLefts > minNum) { // 左侧菜单宽度必须大于150 才可以设置
|
||||
localStore('LeftWidth', JSON.stringify(this.widthLefts))
|
||||
localStore('LeftWidth', JSON.stringify(this.widthLefts));
|
||||
}
|
||||
}
|
||||
document.onmousemove = null
|
||||
document.onmouseup = null
|
||||
}
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.drapWidth {
|
||||
|
||||
@ -1,44 +1,45 @@
|
||||
<template>
|
||||
<div :id="id" style="background: #000;"></div>
|
||||
<div :id="id" style="background: #000;" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Jmaps from '@/jmap/maps';
|
||||
import Jmaps from '@/jmap/maps';
|
||||
|
||||
export default {
|
||||
name: 'Jmap',
|
||||
data() {
|
||||
return {
|
||||
id: '__jmap__',
|
||||
jmap: null,
|
||||
jmaps: null
|
||||
export default {
|
||||
name: 'Jmap',
|
||||
data() {
|
||||
return {
|
||||
id: '__jmap__',
|
||||
jmap: null,
|
||||
jmaps: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.jmaps = new Jmaps();
|
||||
this.jmap = this.jmaps.init({
|
||||
id: this.id,
|
||||
config: {
|
||||
renderer: 'svg',
|
||||
width: document.documentElement.clientWidth,
|
||||
height: document.documentElement.clientHeight
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.jmaps = new Jmaps();
|
||||
this.jmap = this.jmaps.init({
|
||||
id: this.id,
|
||||
config: {
|
||||
renderer: 'svg',
|
||||
width: document.documentElement.clientWidth,
|
||||
height: document.documentElement.clientHeight
|
||||
}
|
||||
});
|
||||
this.jmap.loadData('01',
|
||||
{
|
||||
linkList: [
|
||||
{ code: '1', beg: { x: 200, y: 200 }, end: { x: 400, y: 200 } },
|
||||
{ code: '2', beg: { x: 200, y: 300 }, end: { x: 400, y: 300 } }
|
||||
]
|
||||
}
|
||||
);
|
||||
},
|
||||
methods: {
|
||||
});
|
||||
console.log(this.jmap);
|
||||
this.jmap.loadData('01',
|
||||
{
|
||||
linkList: [
|
||||
{ code: '31', beg: { x: 200, y: 200 }, end: { x: 400, y: 200 } },
|
||||
{ code: '2', beg: { x: 200, y: 300 }, end: { x: 400, y: 300 } }
|
||||
]
|
||||
}
|
||||
);
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,26 +1,38 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm"
|
||||
label-position="left">
|
||||
<el-form
|
||||
ref="loginForm"
|
||||
class="login-form"
|
||||
auto-complete="on"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
label-position="left"
|
||||
>
|
||||
<h3 class="title">用户登陆</h3>
|
||||
<el-form-item prop="username">
|
||||
<span class="svg-container svg-container_login">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="username" />
|
||||
<el-input v-model="loginForm.username" name="username" type="text" auto-complete="on" placeholder="username" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password"></svg-icon>
|
||||
<svg-icon icon-class="password" />
|
||||
</span>
|
||||
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
|
||||
autoComplete="on" placeholder="password"></el-input>
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
name="password"
|
||||
:type="pwdType"
|
||||
auto-complete="on"
|
||||
placeholder="password"
|
||||
@keyup.enter.native="handleLogin"
|
||||
/>
|
||||
<span class="show-pwd" @click="showPwd">
|
||||
<svg-icon icon-class="eye" />
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<span class="svg-container"> </span>
|
||||
<span class="svg-container" />
|
||||
<el-radio>琏课堂</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
@ -33,76 +45,76 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import md5 from 'js-md5';
|
||||
import localStore from 'storejs';
|
||||
import md5 from 'js-md5';
|
||||
import localStore from 'storejs';
|
||||
|
||||
export default {
|
||||
name: 'login',
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('请输入正确的用户名'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('密码不能小于5位'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
loginRules: {
|
||||
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
||||
password: [{ required: true, trigger: 'blur', validator: validatePass }]
|
||||
},
|
||||
loading: false,
|
||||
pwdType: 'password'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.title = '琏课堂';
|
||||
},
|
||||
methods: {
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = ''
|
||||
} else {
|
||||
this.pwdType = 'password'
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
let model = Object.assign({}, this.loginForm);
|
||||
model.password = md5(model.password);
|
||||
model.type = 'class';
|
||||
//清空js的localStorage值
|
||||
localStore.clear();
|
||||
export default {
|
||||
name: 'Login',
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('请输入正确的用户名'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('密码不能小于5位'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
loginRules: {
|
||||
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
||||
password: [{ required: true, trigger: 'blur', validator: validatePass }]
|
||||
},
|
||||
loading: false,
|
||||
pwdType: 'password'
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
document.title = '琏课堂';
|
||||
},
|
||||
methods: {
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = '';
|
||||
} else {
|
||||
this.pwdType = 'password';
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
const model = Object.assign({}, this.loginForm);
|
||||
model.password = md5(model.password);
|
||||
model.type = 'class';
|
||||
// 清空js的localStorage值
|
||||
localStore.clear();
|
||||
|
||||
this.loading = true;
|
||||
this.$store.dispatch('Login', model).then(() => {
|
||||
this.$store.dispatch('GetUserConfigInfo');
|
||||
//设置路由
|
||||
this.loading = false;
|
||||
this.$router.push({ path: '/' });
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
this.loading = true;
|
||||
this.$store.dispatch('Login', model).then(() => {
|
||||
this.$store.dispatch('GetUserConfigInfo');
|
||||
// 设置路由
|
||||
this.loading = false;
|
||||
this.$router.push({ path: '/' });
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
@ -205,4 +217,4 @@
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,120 +1,127 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="qrcode-login-main">
|
||||
<div class="qrcode-main">
|
||||
<h1 class="login-title">琏课堂</h1>
|
||||
<div @click="loginRefresh">
|
||||
<qrcode-vue ref="qrcode" :value="loginUrl" :className="qrcodeClassName" :size="270"
|
||||
v-loading="loading" element-loading-text="点击刷新" element-loading-spinner="el-icon-refresh"
|
||||
element-loading-background="rgba(255, 255, 255, 0.9)"></qrcode-vue>
|
||||
</div>
|
||||
<div class="login-tip">
|
||||
<div v-if="scanSuccess">
|
||||
<div>
|
||||
<i class="el-icon-circle-check" style="color: green;"></i>扫码成功
|
||||
</div>
|
||||
<span>请在微信上进行后续操作</span>
|
||||
</div>
|
||||
<span v-else class="sub-title">使用手机微信扫码登录</span>
|
||||
</div>
|
||||
<div class="tip-info">
|
||||
<fieldset>
|
||||
<legend>推荐配置</legend>
|
||||
<span>浏览器：
|
||||
<a href="https://www.google.cn/chrome/" target="_blank">谷歌浏览器</a>
|
||||
</span>
|
||||
<br />
|
||||
<span>屏幕分辨率：1920*1080</span>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-container">
|
||||
<div class="qrcode-login-main">
|
||||
<a class="qrcode-main">
|
||||
<h1 class="login-title">琏课堂</h1>
|
||||
<div @click="loginRefresh">
|
||||
<qrcode-vue
|
||||
ref="qrcode"
|
||||
v-loading="loading"
|
||||
:value="loginUrl"
|
||||
:class-name="qrcodeClassName"
|
||||
:size="270"
|
||||
element-loading-text="点击刷新"
|
||||
element-loading-spinner="el-icon-refresh"
|
||||
element-loading-background="rgba(255, 255, 255, 0.9)"
|
||||
/>
|
||||
</div>
|
||||
<div class="login-tip">
|
||||
<div v-if="scanSuccess">
|
||||
<div>
|
||||
<i class="el-icon-circle-check" style="color: green;" />扫码成功
|
||||
</div>
|
||||
<span>请在微信上进行后续操作</span>
|
||||
</div>
|
||||
<span v-else class="sub-title">使用手机微信扫码登录</span>
|
||||
</div>
|
||||
<a class="tip-info">
|
||||
<fieldset>
|
||||
<legend>推荐配置</legend>
|
||||
<span>浏览器：
|
||||
<a href="https://www.google.cn/chrome/" target="_blank">谷歌浏览器</a>
|
||||
</span>
|
||||
<br>
|
||||
<span>屏幕分辨率：1920*1080</span>
|
||||
</fieldset>
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QrcodeVue from 'qrcode.vue';
|
||||
import localStore from 'storejs';
|
||||
import { getLoginUrl, checkLoginStatus } from '@/api/login';
|
||||
import { setToken } from '@/utils/auth';
|
||||
import { getSessionId } from '@/utils/index';
|
||||
import { LoginParams } from '@/utils/login';
|
||||
import QrcodeVue from 'qrcode.vue';
|
||||
import localStore from 'storejs';
|
||||
import { getLoginUrl, checkLoginStatus } from '@/api/login';
|
||||
import { setToken } from '@/utils/auth';
|
||||
// import { getSessionId } from '@/utils/index';
|
||||
import { LoginParams } from '@/utils/login';
|
||||
|
||||
export default {
|
||||
name: 'LoginNew',
|
||||
components: { QrcodeVue },
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
qrcodeClassName: 'login-qrcode',
|
||||
sessionId: '',
|
||||
loginUrl: '',
|
||||
checkLogin: null,
|
||||
checkTimeout: null,
|
||||
scanSuccess: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.title = '琏课堂';
|
||||
this.loginRefresh();
|
||||
},
|
||||
methods: {
|
||||
clearTimer(timer) {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
},
|
||||
loginRefresh() {
|
||||
this.loading = true;
|
||||
getLoginUrl(LoginParams.LianKeTang).then(response => {
|
||||
this.sessionId = response.data.sessionId;
|
||||
this.loginUrl = response.data.url;
|
||||
this.loading = false;
|
||||
this.clearTimer(this.checkTimeout);
|
||||
this.checkTimeout = setTimeout(() => {
|
||||
this.loading = true;
|
||||
this.loginUrl = '';
|
||||
}, 3 * 60 * 1000);
|
||||
this.checkLoginStatus();
|
||||
}).catch(error => {
|
||||
this.loading = false;
|
||||
this.$messageBox('获取登陆二维码失败，请刷新重试');
|
||||
});
|
||||
},
|
||||
checkLoginStatus() {
|
||||
let self = this;
|
||||
export default {
|
||||
name: 'LoginNew',
|
||||
components: { QrcodeVue },
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
qrcodeClassName: 'login-qrcode',
|
||||
sessionId: '',
|
||||
loginUrl: '',
|
||||
checkLogin: null,
|
||||
checkTimeout: null,
|
||||
scanSuccess: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
document.title = '琏课堂';
|
||||
this.loginRefresh();
|
||||
},
|
||||
methods: {
|
||||
clearTimer(timer) {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
},
|
||||
loginRefresh() {
|
||||
this.loading = true;
|
||||
getLoginUrl(LoginParams.LianKeTang).then(response => {
|
||||
this.sessionId = response.data.sessionId;
|
||||
this.loginUrl = response.data.url;
|
||||
this.loading = false;
|
||||
this.clearTimer(this.checkTimeout);
|
||||
this.checkTimeout = setTimeout(() => {
|
||||
this.loading = true;
|
||||
this.loginUrl = '';
|
||||
}, 3 * 60 * 1000);
|
||||
this.checkLoginStatus();
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
this.$messageBox('获取登陆二维码失败，请刷新重试');
|
||||
});
|
||||
},
|
||||
checkLoginStatus() {
|
||||
const self = this;
|
||||
|
||||
// 销毁则不再定时
|
||||
if (this && this._isDestroyed) {
|
||||
return;
|
||||
}
|
||||
// 销毁则不再定时
|
||||
if (this && this._isDestroyed) {
|
||||
return;
|
||||
}
|
||||
|
||||
//清空js的localStorage值
|
||||
localStore.clear();
|
||||
// 清空js的localStorage值
|
||||
localStore.clear();
|
||||
|
||||
//清空已存在的定时器
|
||||
//设置定时器检测
|
||||
this.clearTimer(this.checkLogin);
|
||||
this.checkLogin = setTimeout(() => {
|
||||
checkLoginStatus(self.sessionId).then(response => {
|
||||
setToken(response.data.token);
|
||||
//设置扫码登录
|
||||
self.$store.dispatch('QrLoginSetting', { key: 'SET_TOKEN', value: response.data.token }).then(() => {
|
||||
//清除定时器，设置路由
|
||||
self.clearTimer(self.checkLogin);
|
||||
self.$router.push({ path: '/' });
|
||||
});
|
||||
}).catch(error => {
|
||||
if (error.data && error.data.status == '1') {
|
||||
self.scanSuccess = true;
|
||||
}
|
||||
self.checkLoginStatus();
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 清空已存在的定时器
|
||||
// 设置定时器检测
|
||||
this.clearTimer(this.checkLogin);
|
||||
this.checkLogin = setTimeout(() => {
|
||||
checkLoginStatus(self.sessionId).then(response => {
|
||||
setToken(response.data.token);
|
||||
// 设置扫码登录
|
||||
self.$store.dispatch('QrLoginSetting', { key: 'SET_TOKEN', value: response.data.token }).then(() => {
|
||||
// 清除定时器，设置路由
|
||||
self.clearTimer(self.checkLogin);
|
||||
self.$router.push({ path: '/' });
|
||||
});
|
||||
}).catch(error => {
|
||||
if (error.data && error.data.status == '1') {
|
||||
self.scanSuccess = true;
|
||||
}
|
||||
self.checkLoginStatus();
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@ -158,7 +165,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tip-info {
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
@ -189,4 +195,4 @@
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,121 +1,127 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="qrcode-login-main">
|
||||
<div class="qrcode-main">
|
||||
<h1 class="login-title">琏计划</h1>
|
||||
<div @click="loginRefresh">
|
||||
<qrcode-vue :value="loginUrl" :className="qrcodeClassName" :size="270" v-loading="loading"
|
||||
element-loading-text="点击刷新" element-loading-spinner="el-icon-refresh"
|
||||
element-loading-background="rgba(255, 255, 255, 0.9)"></qrcode-vue>
|
||||
</div>
|
||||
<div class="login-tip">
|
||||
<div v-if="scanSuccess">
|
||||
<div>
|
||||
<i class="el-icon-circle-check" style="color: green;"></i>扫码成功
|
||||
</div>
|
||||
<span>请在微信上进行后续操作</span>
|
||||
</div>
|
||||
<span v-else class="sub-title">使用手机微信扫码登录</span>
|
||||
</div>
|
||||
<div class="tip-info">
|
||||
<fieldset>
|
||||
<legend>推荐配置</legend>
|
||||
<span>浏览器：
|
||||
<a href="https://www.google.cn/chrome/" target="_blank">谷歌浏览器</a>
|
||||
</span>
|
||||
<br />
|
||||
<span>屏幕分辨率：1920*1080</span>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-container">
|
||||
<div class="qrcode-login-main">
|
||||
<div class="qrcode-main">
|
||||
<h1 class="login-title">琏计划</h1>
|
||||
<div @click="loginRefresh">
|
||||
<qrcode-vue
|
||||
v-loading="loading"
|
||||
:value="loginUrl"
|
||||
:class-name="qrcodeClassName"
|
||||
:size="270"
|
||||
element-loading-text="点击刷新"
|
||||
element-loading-spinner="el-icon-refresh"
|
||||
element-loading-background="rgba(255, 255, 255, 0.9)"
|
||||
/>
|
||||
</div>
|
||||
<div class="login-tip">
|
||||
<div v-if="scanSuccess">
|
||||
<div>
|
||||
<i class="el-icon-circle-check" style="color: green;" />扫码成功
|
||||
</div>
|
||||
<span>请在微信上进行后续操作</span>
|
||||
</div>
|
||||
<span v-else class="sub-title">使用手机微信扫码登录</span>
|
||||
</div>
|
||||
<div class="tip-info">
|
||||
<fieldset>
|
||||
<legend>推荐配置</legend>
|
||||
<span>浏览器：
|
||||
<a href="https://www.google.cn/chrome/" target="_blank">谷歌浏览器</a>
|
||||
</span>
|
||||
<br>
|
||||
<span>屏幕分辨率：1920*1080</span>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QrcodeVue from 'qrcode.vue';
|
||||
import localStore from 'storejs';
|
||||
import { getLoginUrl, checkLoginStatus } from '@/api/login';
|
||||
import { setPlanToken } from '@/utils/auth';
|
||||
import { getSessionId } from '@/utils/index';
|
||||
import { UrlConfig } from '@/router/index';
|
||||
import { LoginParams } from '@/utils/login';
|
||||
import QrcodeVue from 'qrcode.vue';
|
||||
import localStore from 'storejs';
|
||||
import { getLoginUrl, checkLoginStatus } from '@/api/login';
|
||||
import { setPlanToken } from '@/utils/auth';
|
||||
// import { getSessionId } from '@/utils/index';
|
||||
import { UrlConfig } from '@/router/index';
|
||||
import { LoginParams } from '@/utils/login';
|
||||
|
||||
export default {
|
||||
name: 'LoginNewPlan',
|
||||
components: { QrcodeVue },
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
qrcodeClassName: 'login-qrcode',
|
||||
sessionId: '',
|
||||
loginUrl: '',
|
||||
checkLogin: null,
|
||||
checkTimeout: null,
|
||||
scanSuccess: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loginRefresh();
|
||||
document.title = '琏计划';
|
||||
},
|
||||
methods: {
|
||||
clearTimer(timer) {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
},
|
||||
loginRefresh() {
|
||||
this.loading = true;
|
||||
getLoginUrl(LoginParams.LianJiHua).then(response => {
|
||||
this.sessionId = response.data.sessionId;
|
||||
this.loginUrl = response.data.url;
|
||||
this.loading = false;
|
||||
this.clearTimer(this.checkTimeout);
|
||||
this.checkTimeout = setTimeout(() => {
|
||||
this.loading = true;
|
||||
this.loginUrl = '';
|
||||
}, 3 * 60 * 1000);
|
||||
this.checkLoginStatus();
|
||||
}).catch(error => {
|
||||
this.loading = false;
|
||||
this.$messageBox('获取登陆二维码失败，请刷新重试');
|
||||
});
|
||||
},
|
||||
checkLoginStatus() {
|
||||
let self = this;
|
||||
export default {
|
||||
name: 'LoginNewPlan',
|
||||
components: { QrcodeVue },
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
qrcodeClassName: 'login-qrcode',
|
||||
sessionId: '',
|
||||
loginUrl: '',
|
||||
checkLogin: null,
|
||||
checkTimeout: null,
|
||||
scanSuccess: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.loginRefresh();
|
||||
document.title = '琏计划';
|
||||
},
|
||||
methods: {
|
||||
clearTimer(timer) {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
},
|
||||
loginRefresh() {
|
||||
this.loading = true;
|
||||
getLoginUrl(LoginParams.LianJiHua).then(response => {
|
||||
this.sessionId = response.data.sessionId;
|
||||
this.loginUrl = response.data.url;
|
||||
this.loading = false;
|
||||
this.clearTimer(this.checkTimeout);
|
||||
this.checkTimeout = setTimeout(() => {
|
||||
this.loading = true;
|
||||
this.loginUrl = '';
|
||||
}, 3 * 60 * 1000);
|
||||
this.checkLoginStatus();
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
this.$messageBox('获取登陆二维码失败，请刷新重试');
|
||||
});
|
||||
},
|
||||
checkLoginStatus() {
|
||||
const self = this;
|
||||
|
||||
// 销毁则不再定时
|
||||
if (this && this._isDestroyed) {
|
||||
return;
|
||||
}
|
||||
// 销毁则不再定时
|
||||
if (this && this._isDestroyed) {
|
||||
return;
|
||||
}
|
||||
|
||||
//清空js的localStorage值
|
||||
localStore.clear();
|
||||
// 清空js的localStorage值
|
||||
localStore.clear();
|
||||
|
||||
//清空已存在的定时器
|
||||
//设置定时器检测
|
||||
this.clearTimer(this.checkLogin);
|
||||
this.checkLogin = setTimeout(() => {
|
||||
checkLoginStatus(self.sessionId).then(response => {
|
||||
setPlanToken(response.data.token);
|
||||
//设置扫码登录
|
||||
self.$store.dispatch('QrLoginSetting', { key: 'SET_TOKENPLAN', value: response.data.token }).then(() => {
|
||||
//清除定时器，设置路由
|
||||
self.clearTimer(self.checkLogin);
|
||||
self.$router.push({ path: `${UrlConfig.plan.prefix}/home` });
|
||||
});
|
||||
}).catch(error => {
|
||||
if (error.data && error.data.status == '1') {
|
||||
self.scanSuccess = true;
|
||||
}
|
||||
self.checkLoginStatus();
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 清空已存在的定时器
|
||||
// 设置定时器检测
|
||||
this.clearTimer(this.checkLogin);
|
||||
this.checkLogin = setTimeout(() => {
|
||||
checkLoginStatus(self.sessionId).then(response => {
|
||||
setPlanToken(response.data.token);
|
||||
// 设置扫码登录
|
||||
self.$store.dispatch('QrLoginSetting', { key: 'SET_TOKENPLAN', value: response.data.token }).then(() => {
|
||||
// 清除定时器，设置路由
|
||||
self.clearTimer(self.checkLogin);
|
||||
self.$router.push({ path: `${UrlConfig.plan.prefix}/home` });
|
||||
});
|
||||
}).catch(error => {
|
||||
if (error.data && error.data.status == '1') {
|
||||
self.scanSuccess = true;
|
||||
}
|
||||
self.checkLoginStatus();
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@ -185,4 +191,4 @@
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,121 +1,127 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="qrcode-login-main">
|
||||
<div class="qrcode-main">
|
||||
<h1 class="login-title">大屏系统</h1>
|
||||
<div @click="loginRefresh">
|
||||
<qrcode-vue :value="loginUrl" :className="qrcodeClassName" :size="270" v-loading="loading"
|
||||
element-loading-text="点击刷新" element-loading-spinner="el-icon-refresh"
|
||||
element-loading-background="rgba(255, 255, 255, 0.9)"></qrcode-vue>
|
||||
</div>
|
||||
<div class="login-tip">
|
||||
<div v-if="scanSuccess">
|
||||
<div>
|
||||
<i class="el-icon-circle-check" style="color: green;"></i>扫码成功
|
||||
</div>
|
||||
<span>请在微信上进行后续操作</span>
|
||||
</div>
|
||||
<span v-else class="sub-title">使用手机微信扫码登录</span>
|
||||
</div>
|
||||
<div class="tip-info">
|
||||
<fieldset>
|
||||
<legend>推荐配置</legend>
|
||||
<span>浏览器：
|
||||
<a href="https://www.google.cn/chrome/" target="_blank">谷歌浏览器</a>
|
||||
</span>
|
||||
<br />
|
||||
<span>屏幕分辨率：1920*1080</span>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-container">
|
||||
<div class="qrcode-login-main">
|
||||
<div class="qrcode-main">
|
||||
<h1 class="login-title">大屏系统</h1>
|
||||
<div @click="loginRefresh">
|
||||
<qrcode-vue
|
||||
v-loading="loading"
|
||||
:value="loginUrl"
|
||||
:class-name="qrcodeClassName"
|
||||
:size="270"
|
||||
element-loading-text="点击刷新"
|
||||
element-loading-spinner="el-icon-refresh"
|
||||
element-loading-background="rgba(255, 255, 255, 0.9)"
|
||||
/>
|
||||
</div>
|
||||
<div class="login-tip">
|
||||
<div v-if="scanSuccess">
|
||||
<div>
|
||||
<i class="el-icon-circle-check" style="color: green;" />扫码成功
|
||||
</div>
|
||||
<span>请在微信上进行后续操作</span>
|
||||
</div>
|
||||
<span v-else class="sub-title">使用手机微信扫码登录</span>
|
||||
</div>
|
||||
<div class="tip-info">
|
||||
<fieldset>
|
||||
<legend>推荐配置</legend>
|
||||
<span>浏览器：
|
||||
<a href="https://www.google.cn/chrome/" target="_blank">谷歌浏览器</a>
|
||||
</span>
|
||||
<br>
|
||||
<span>屏幕分辨率：1920*1080</span>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QrcodeVue from 'qrcode.vue';
|
||||
import localStore from 'storejs';
|
||||
import { getLoginUrl, checkLoginStatus } from '@/api/login';
|
||||
import { setScreenToken } from '@/utils/auth';
|
||||
import { getSessionId } from '@/utils/index';
|
||||
import { UrlConfig } from '@/router/index';
|
||||
import { LoginParams } from '@/utils/login';
|
||||
import QrcodeVue from 'qrcode.vue';
|
||||
import localStore from 'storejs';
|
||||
import { getLoginUrl, checkLoginStatus } from '@/api/login';
|
||||
import { setScreenToken } from '@/utils/auth';
|
||||
// import { getSessionId } from '@/utils/index';
|
||||
import { UrlConfig } from '@/router/index';
|
||||
import { LoginParams } from '@/utils/login';
|
||||
|
||||
export default {
|
||||
name: 'LoginNewScreen',
|
||||
components: { QrcodeVue },
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
qrcodeClassName: 'login-qrcode',
|
||||
sessionId: '',
|
||||
loginUrl: '',
|
||||
checkLogin: null,
|
||||
checkTimeout: null,
|
||||
scanSuccess: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loginRefresh();
|
||||
document.title = '大屏系统';
|
||||
},
|
||||
methods: {
|
||||
clearTimer(timer) {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
},
|
||||
loginRefresh() {
|
||||
this.loading = true;
|
||||
getLoginUrl(LoginParams.DaPing).then(response => {
|
||||
this.sessionId = response.data.sessionId;
|
||||
this.loginUrl = response.data.url;
|
||||
this.loading = false;
|
||||
this.clearTimer(this.checkTimeout);
|
||||
this.checkTimeout = setTimeout(() => {
|
||||
this.loading = true;
|
||||
this.loginUrl = '';
|
||||
}, 3 * 60 * 1000);
|
||||
this.checkLoginStatus();
|
||||
}).catch(error => {
|
||||
this.loading = false;
|
||||
this.$messageBox('获取登陆二维码失败，请刷新重试');
|
||||
});
|
||||
},
|
||||
checkLoginStatus() {
|
||||
let self = this;
|
||||
export default {
|
||||
name: 'LoginNewScreen',
|
||||
components: { QrcodeVue },
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
qrcodeClassName: 'login-qrcode',
|
||||
sessionId: '',
|
||||
loginUrl: '',
|
||||
checkLogin: null,
|
||||
checkTimeout: null,
|
||||
scanSuccess: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.loginRefresh();
|
||||
document.title = '大屏系统';
|
||||
},
|
||||
methods: {
|
||||
clearTimer(timer) {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
},
|
||||
loginRefresh() {
|
||||
this.loading = true;
|
||||
getLoginUrl(LoginParams.DaPing).then(response => {
|
||||
this.sessionId = response.data.sessionId;
|
||||
this.loginUrl = response.data.url;
|
||||
this.loading = false;
|
||||
this.clearTimer(this.checkTimeout);
|
||||
this.checkTimeout = setTimeout(() => {
|
||||
this.loading = true;
|
||||
this.loginUrl = '';
|
||||
}, 3 * 60 * 1000);
|
||||
this.checkLoginStatus();
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
this.$messageBox('获取登陆二维码失败，请刷新重试');
|
||||
});
|
||||
},
|
||||
checkLoginStatus() {
|
||||
const self = this;
|
||||
|
||||
// 销毁则不再定时
|
||||
if (this && this._isDestroyed) {
|
||||
return;
|
||||
}
|
||||
// 销毁则不再定时
|
||||
if (this && this._isDestroyed) {
|
||||
return;
|
||||
}
|
||||
|
||||
//清空js的localStorage值
|
||||
localStore.clear();
|
||||
// 清空js的localStorage值
|
||||
localStore.clear();
|
||||
|
||||
//清空已存在的定时器
|
||||
//设置定时器检测
|
||||
this.clearTimer(this.checkLogin);
|
||||
this.checkLogin = setTimeout(() => {
|
||||
checkLoginStatus(self.sessionId).then(response => {
|
||||
setScreenToken(response.data.token);
|
||||
//设置扫码登录
|
||||
self.$store.dispatch('QrLoginSetting', { key: 'SET_TOKENSCREEN', value: response.data.token }).then(() => {
|
||||
//清除定时器，设置路由
|
||||
self.clearTimer(self.checkLogin);
|
||||
self.$router.push({ path: `${UrlConfig.dp.prefix}/home` });
|
||||
});
|
||||
}).catch(error => {
|
||||
if (error.data && error.data.status == '1') {
|
||||
self.scanSuccess = true;
|
||||
}
|
||||
self.checkLoginStatus();
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 清空已存在的定时器
|
||||
// 设置定时器检测
|
||||
this.clearTimer(this.checkLogin);
|
||||
this.checkLogin = setTimeout(() => {
|
||||
checkLoginStatus(self.sessionId).then(response => {
|
||||
setScreenToken(response.data.token);
|
||||
// 设置扫码登录
|
||||
self.$store.dispatch('QrLoginSetting', { key: 'SET_TOKENSCREEN', value: response.data.token }).then(() => {
|
||||
// 清除定时器，设置路由
|
||||
self.clearTimer(self.checkLogin);
|
||||
self.$router.push({ path: `${UrlConfig.dp.prefix}/home` });
|
||||
});
|
||||
}).catch(error => {
|
||||
if (error.data && error.data.status == '1') {
|
||||
self.scanSuccess = true;
|
||||
}
|
||||
self.checkLoginStatus();
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@ -185,4 +191,4 @@
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,110 +1,127 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm"
|
||||
label-position="left">
|
||||
<h3 class="title">用户登陆</h3>
|
||||
<el-form-item prop="username">
|
||||
<span class="svg-container svg-container_login">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on"
|
||||
placeholder="username" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password"></svg-icon>
|
||||
</span>
|
||||
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
|
||||
autoComplete="on" placeholder="password"></el-input>
|
||||
<span class="show-pwd" @click="showPwd">
|
||||
<svg-icon icon-class="eye" />
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<span class="svg-container"> </span>
|
||||
<el-radio>琏计划</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
|
||||
登陆
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="login-container">
|
||||
<el-form
|
||||
ref="loginForm"
|
||||
class="login-form"
|
||||
auto-complete="on"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
label-position="left"
|
||||
>
|
||||
<h3 class="title">用户登陆</h3>
|
||||
<el-form-item prop="username">
|
||||
<span class="svg-container svg-container_login">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
name="username"
|
||||
type="text"
|
||||
auto-complete="on"
|
||||
placeholder="username"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password" />
|
||||
</span>
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
name="password"
|
||||
:type="pwdType"
|
||||
auto-complete="on"
|
||||
placeholder="password"
|
||||
@keyup.enter.native="handleLogin"
|
||||
/>
|
||||
<span class="show-pwd" @click="showPwd">
|
||||
<svg-icon icon-class="eye" />
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<span class="svg-container" />
|
||||
<el-radio>琏计划</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
|
||||
登陆
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import md5 from 'js-md5';
|
||||
import localStore from 'storejs';
|
||||
import { UrlConfig } from '@/router/index';
|
||||
import md5 from 'js-md5';
|
||||
import localStore from 'storejs';
|
||||
import { UrlConfig } from '@/router/index';
|
||||
|
||||
export default {
|
||||
name: 'LoginScreen',
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('请输入正确的用户名'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('密码不能小于5位'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
loginRules: {
|
||||
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
||||
password: [{ required: true, trigger: 'blur', validator: validatePass }]
|
||||
},
|
||||
loading: false,
|
||||
pwdType: 'password'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.title = '琏计划';
|
||||
},
|
||||
methods: {
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = ''
|
||||
} else {
|
||||
this.pwdType = 'password'
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
let model = Object.assign({}, this.loginForm);
|
||||
model.password = md5(model.password);
|
||||
model.type = 'plan';
|
||||
//清空js的localStorage值
|
||||
localStore.clear();
|
||||
this.loading = true;
|
||||
this.$store.dispatch('Login', model).then(() => {
|
||||
this.$store.dispatch('GetUserConfigInfo');
|
||||
//设置路由
|
||||
this.loading = false
|
||||
this.$router.push({ path: `${UrlConfig.plan.prefix}/home` });
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
export default {
|
||||
name: 'LoginScreen',
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('请输入正确的用户名'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('密码不能小于5位'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
loginRules: {
|
||||
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
||||
password: [{ required: true, trigger: 'blur', validator: validatePass }]
|
||||
},
|
||||
loading: false,
|
||||
pwdType: 'password'
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
document.title = '琏计划';
|
||||
},
|
||||
methods: {
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = '';
|
||||
} else {
|
||||
this.pwdType = 'password';
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
const model = Object.assign({}, this.loginForm);
|
||||
model.password = md5(model.password);
|
||||
model.type = 'plan';
|
||||
// 清空js的localStorage值
|
||||
localStore.clear();
|
||||
this.loading = true;
|
||||
this.$store.dispatch('Login', model).then(() => {
|
||||
this.$store.dispatch('GetUserConfigInfo');
|
||||
// 设置路由
|
||||
this.loading = false;
|
||||
this.$router.push({ path: `${UrlConfig.plan.prefix}/home` });
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
@ -207,4 +224,4 @@
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,110 +1,127 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm"
|
||||
label-position="left">
|
||||
<h3 class="title">用户登陆</h3>
|
||||
<el-form-item prop="username">
|
||||
<span class="svg-container svg-container_login">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on"
|
||||
placeholder="username" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password"></svg-icon>
|
||||
</span>
|
||||
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
|
||||
autoComplete="on" placeholder="password"></el-input>
|
||||
<span class="show-pwd" @click="showPwd">
|
||||
<svg-icon icon-class="eye" />
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<span class="svg-container"></span>
|
||||
<el-radio>大屏系统</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
|
||||
登陆
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="login-container">
|
||||
<el-form
|
||||
ref="loginForm"
|
||||
class="login-form"
|
||||
auto-complete="on"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
label-position="left"
|
||||
>
|
||||
<h3 class="title">用户登陆</h3>
|
||||
<el-form-item prop="username">
|
||||
<span class="svg-container svg-container_login">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
name="username"
|
||||
type="text"
|
||||
auto-complete="on"
|
||||
placeholder="username"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password" />
|
||||
</span>
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
name="password"
|
||||
:type="pwdType"
|
||||
auto-complete="on"
|
||||
placeholder="password"
|
||||
@keyup.enter.native="handleLogin"
|
||||
/>
|
||||
<span class="show-pwd" @click="showPwd">
|
||||
<svg-icon icon-class="eye" />
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<span class="svg-container" />
|
||||
<el-radio>大屏系统</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
|
||||
登陆
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import md5 from 'js-md5';
|
||||
import localStore from 'storejs';
|
||||
import { UrlConfig } from '@/router/index';
|
||||
import md5 from 'js-md5';
|
||||
import localStore from 'storejs';
|
||||
import { UrlConfig } from '@/router/index';
|
||||
|
||||
export default {
|
||||
name: 'LoginScreen',
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('请输入正确的用户名'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('密码不能小于5位'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
loginRules: {
|
||||
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
||||
password: [{ required: true, trigger: 'blur', validator: validatePass }]
|
||||
},
|
||||
loading: false,
|
||||
pwdType: 'password'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.title = '琏课堂-大屏系统';
|
||||
},
|
||||
methods: {
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = ''
|
||||
} else {
|
||||
this.pwdType = 'password'
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
let model = Object.assign({}, this.loginForm);
|
||||
model.password = md5(model.password);
|
||||
model.type = 'dp';
|
||||
//清空js的localStorage值
|
||||
localStore.clear();
|
||||
this.loading = true;
|
||||
this.$store.dispatch('Login', model).then(() => {
|
||||
this.$store.dispatch('GetUserConfigInfo');
|
||||
//设置路由
|
||||
this.loading = false
|
||||
this.$router.push({ path: `${UrlConfig.dp.prefix}/home` });
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
export default {
|
||||
name: 'LoginScreen',
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('请输入正确的用户名'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value.length < 5) {
|
||||
callback(new Error('密码不能小于5位'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
loginRules: {
|
||||
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
||||
password: [{ required: true, trigger: 'blur', validator: validatePass }]
|
||||
},
|
||||
loading: false,
|
||||
pwdType: 'password'
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
document.title = '琏课堂-大屏系统';
|
||||
},
|
||||
methods: {
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = '';
|
||||
} else {
|
||||
this.pwdType = 'password';
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
const model = Object.assign({}, this.loginForm);
|
||||
model.password = md5(model.password);
|
||||
model.type = 'dp';
|
||||
// 清空js的localStorage值
|
||||
localStore.clear();
|
||||
this.loading = true;
|
||||
this.$store.dispatch('Login', model).then(() => {
|
||||
this.$store.dispatch('GetUserConfigInfo');
|
||||
// 设置路由
|
||||
this.loading = false;
|
||||
this.$router.push({ path: `${UrlConfig.dp.prefix}/home` });
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
@ -207,4 +224,4 @@
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user