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