Skip to content

V
V3-TailingPond
Commit 4dc1e2eb authored by lei's avatar lei
Browse files
Options

fix：普通用户不可以解除警报、浸润线的tootip非共享显示

parent b58506ca
Hide whitespace changes
Inline Side-by-side
Showing with 2726 additions and 1639 deletions
src/assets/js/chartTemplates.js
View file @ 4dc1e2eb
...@@ -7,98 +7,98 @@ import Highcharts3D from 'highcharts/highcharts-3d.js'; ...@@ -7,98 +7,98 @@ import Highcharts3D from 'highcharts/highcharts-3d.js';
HTreemap(Highcharts); // treemap 类型 HTreemap(Highcharts); // treemap 类型
Highcharts3D(Highcharts); // 3D 类型 Highcharts3D(Highcharts); // 3D 类型
var Highchart = function(){ var Highchart = function () {
/** /**
* 图表数据格式化 * 图表数据格式化
* @param: {Array} list * @param: {Array} list
* @param: {Object} opts [standOut(突出最大值)] * @param: {Object} opts [standOut(突出最大值)]
* @example1: qf.UI.showFloatMenu({top:y,left:x, eventOutClose:}, html); * @example1: qf.UI.showFloatMenu({top:y,left:x, eventOutClose:}, html);
* @return: * @return:
* @author: Kimber * @author: Kimber
* @updatetime: 2021/12/25 * @updatetime: 2021/12/25
* @createtime: 2021/12/25 * @createtime: 2021/12/25
*/ */
var formatChartData = function(list, opts){ var formatChartData = function (list, opts) {
var sdata = [], sum = 0, maxVal = 0, mark = 0; var sdata = [], sum = 0, maxVal = 0, mark = 0;
var len = list.length; var len = list.length;
for(var i=0; i<len; i++){ for (var i = 0; i < len; i++) {
var item = list[i]; var item = list[i];
var value = item[opts.value] * 1; var value = item[opts.value] * 1;
value > maxVal && (maxVal = value, mark = i); value > maxVal && (maxVal = value, mark = i);
sdata.push({name:item[opts.name], y:value, 'color':item.color || void 0}); sdata.push({ name: item[opts.name], y: value, 'color': item.color || void 0 });
sum += value; sum += value;
}; };
if(opts.standOut){ if (opts.standOut) {
sdata[mark].sliced = true; sdata[mark].sliced = true;
sdata[mark].selected = true; sdata[mark].selected = true;
}; };
return {seriesData:sdata, sum:sum}; return { seriesData: sdata, sum: sum };
}; };
/** /**
* series数据格式化 * series数据格式化
* @param: {Array} list * @param: {Array} list
* @param: {Object} opts [standOut(突出最大值)] * @param: {Object} opts [standOut(突出最大值)]
* @example1: qf.UI.showFloatMenu({top:y,left:x, eventOutClose:}, html); * @example1: qf.UI.showFloatMenu({top:y,left:x, eventOutClose:}, html);
* @return: * @return:
* @author: Kimber * @author: Kimber
* @updatetime: 2022/12/28 * @updatetime: 2022/12/28
* @createtime: 2022/12/28 * @createtime: 2022/12/28
*/ */
var seriesDataFormat = function(data, opts){ var seriesDataFormat = function (data, opts) {
var names = data.names || [], list = data.list || data.lists, series = [], categories = [], var names = data.names || [], list = data.list || data.lists, series = [], categories = [],
maxVal = 0; maxVal = 0;
if(names[0] && list){ if (names[0] && list) {
var colors = ['#7CB5EC', '#90ED7D', '#F7A35C', '#8085E9', '#F15C80', '#E4D354', '#2B908F', '#F45B5B', '#91E8E1', '#0769CB', '#00ABBD', '#ffd886', "#9F2E61", "#4D670C"]; var colors = ['#7CB5EC', '#90ED7D', '#F7A35C', '#8085E9', '#F15C80', '#E4D354', '#2B908F', '#F45B5B', '#91E8E1', '#0769CB', '#00ABBD', '#ffd886', "#9F2E61", "#4D670C"];
var len = names.length; var len = names.length;
for(var i=0; i<len; i++){ for (var i = 0; i < len; i++) {
var item = names[i]; var item = names[i];
var serie = {name:item.name, data:[], key:item.key, type:data.chartType, color:colors[i]}; var serie = { name: item.name, data: [], key: item.key, type: data.chartType, color: colors[i] };
opts && serie.type && (serie.type = opts.type); opts && serie.type && (serie.type = opts.type);
series.push(serie); series.push(serie);
}; };
for(var item of list){ for (var item of list) {
var values = item.values; var values = item.values;
//var datetime = item[opts.datekey || 'dateUnit']; //var datetime = item[opts.datekey || 'dateUnit'];
//var time = datetime.indexOf(' ') > 0 ? datetime.split(' ')[1] : datetime; //var time = datetime.indexOf(' ') > 0 ? datetime.split(' ')[1] : datetime;
var timestamp = item['date']; var timestamp = item['date'];
//categories.push(timestamp); //categories.push(timestamp);
for(var serie of series){ for (var serie of series) {
var value = values[serie.key] * 1; var value = values[serie.key] * 1;
Math.abs(value) > maxVal && (maxVal = Math.abs(value)); Math.abs(value) > maxVal && (maxVal = Math.abs(value));
serie.data.push([timestamp, value]); serie.data.push([timestamp, value]);
}; };
}; };
}; };
return {series:series, categories:categories, maxVal:maxVal} return { series: series, categories: categories, maxVal: maxVal }
}; };
/** /**
* 递归继承, 新对象在先, 原对象在后, 节省运行效率 * 递归继承, 新对象在先, 原对象在后, 节省运行效率
* @param: {Object} inherit // 继承者 * @param: {Object} inherit // 继承者
* @param: {Object} give // 传承者 * @param: {Object} give // 传承者
* @param: {Function} call // 方法回调, 于在在特殊情况自定义 * @param: {Function} call // 方法回调, 于在在特殊情况自定义
* @example1: var options = reversExtends(option, opts); * @example1: var options = reversExtends(option, opts);
* @return: * @return:
* @author: Kimber * @author: Kimber
* @updatetime: 2022/1/12 * @updatetime: 2022/1/12
* @createtime: 2022/1/12 * @createtime: 2022/1/12
*/ */
var reversExtends = function(inherit, give, fn){ var reversExtends = function (inherit, give, fn) {
return (function run(main, assist){ return (function run(main, assist) {
var keys = Object.keys(assist), i = 0; var keys = Object.keys(assist), i = 0;
return (function loop(){ return (function loop() {
var key = keys[i]; i++; var key = keys[i]; i++;
if(key){ if (key) {
fn && fn(key, main, assist); fn && fn(key, main, assist);
return typeof main[key] === 'object' ? run(main[key], assist[key]) : (main[key] = assist[key]), loop(); return typeof main[key] === 'object' ? run(main[key], assist[key]) : (main[key] = assist[key]), loop();
}else{ } else {
return inherit; return inherit;
}; };
})(); })();
...@@ -106,64 +106,66 @@ var Highchart = function(){ ...@@ -106,64 +106,66 @@ var Highchart = function(){
}; };
/** /**
* 根据报警级别识别近两条报警线 * 根据报警级别识别近两条报警线
* @param: {Number} level * @param: {Number} level
* @param: {Object} value * @param: {Object} value
* @example1: series = discernValidAlarmValue(data.alarm, data.lists, series); * @example1: series = discernValidAlarmValue(data.alarm, data.lists, series);
* @return: * @return:
* @author: Kimber * @author: Kimber
* @updatetime: 2022/4/18(周一) * @updatetime: 2022/4/18(周一)
* @createtime: 2022/4/18(周一) * @createtime: 2022/4/18(周一)
*/ */
var discernValidAlarmValue = function(alarms, list, series, direction, opts){ var discernValidAlarmValue = function (alarms, list, series, direction, opts) {
var xLength = (list || []).length, maxAlarm = 0, opts = opts || {}; var xLength = (list || []).length, maxAlarm = 0, opts = opts || {};
if(alarms && xLength){ if (alarms && xLength) {
var value = alarms.value; var value = alarms.value;
// discern // discern
var levelDist = [ var levelDist = [
{color:'red', name:'红色报警线'}, { color: 'red', name: '红色报警线' },
{color:'orange', name:'橙色报警线'}, { color: 'orange', name: '橙色报警线' },
{color:'yellow', name:'黄色报警线'}, { color: 'yellow', name: '黄色报警线' },
{color:'blue', name:'蓝色报警线'}], { color: 'blue', name: '蓝色报警线' }],
alarmLine = {}, setAlarmSerie = function(value, name, color){ alarmLine = {}, setAlarmSerie = function (value, name, color) {
// 修改蓝色色值 // 修改蓝色色值
(color === 'blue') && (color = '#3BAFFB'); (color === 'blue') && (color = '#3BAFFB');
var sx = list[0].date, ex = list[xLength-1].date; var sx = list[0].date, ex = list[xLength - 1].date;
var serie = {name:name, type:'spline', data:[{x:sx, y:value}, {x:ex, y:value}], var serie = {
color:color, name: name, type: 'spline', data: [{ x: sx, y: value }, { x: ex, y: value }],
enableMouseTracking:false, color: color,
legend:false, enableMouseTracking: false,
showInLegend:false, legend: false,
dashStyle:'ShortDot', showInLegend: false,
lineWidth:opts.lineWidth || 1, dashStyle: 'ShortDot',
states:{ lineWidth: opts.lineWidth || 1,
inactive:{ states: {
opacity:opts.opacity inactive: {
opacity: opts.opacity
}, },
}, },
dataLabels:{ dataLabels: {
enabled:opts.valEnabled || false, // 数据值, 2022/11/11(周五) 因多条报警线暂时关闭 enabled: opts.valEnabled || false, // 数据值, 2022/11/11(周五) 因多条报警线暂时关闭
//backgroundColor:'red', //backgroundColor:'red',
verticalAlign:'middle', verticalAlign: 'middle',
padding:0, padding: 0,
defer:false, defer: false,
allowOverlap:true, allowOverlap: true,
color:color, color: color,
style:{ style: {
textOutline:'none', textOutline: 'none',
}, },
}, },
tooltip:{ tooltip: {
//footerFormat:'', //footerFormat:'',
//pointFormat:'', //pointFormat:'',
headerFormat:'', headerFormat: '',
//nullFormat:'', //nullFormat:'',
}, },
marker:{ marker: {
enabled:false enabled: false
}, },
zIndex:-10, zIndex: -10,
}; };
series.push(serie); series.push(serie);
}; };
...@@ -179,54 +181,55 @@ var Highchart = function(){ ...@@ -179,54 +181,55 @@ var Highchart = function(){
alarm.value = value[alarm.color]; alarm.value = value[alarm.color];
alarmLine[alarm.color] = alarm; alarmLine[alarm.color] = alarm;
}; */ }; */
// 多条报警线 // 多条报警线
for(var item of levelDist){ for (var item of levelDist) {
item.value = value[item.color]; item.value = value[item.color];
alarmLine[item.color] = item; alarmLine[item.color] = item;
}; };
// add // add
for(var key in alarmLine){ for (var key in alarmLine) {
var line = alarmLine[key]; var line = alarmLine[key];
line.value > maxAlarm && (maxAlarm = line.value); line.value > maxAlarm && (maxAlarm = line.value);
setAlarmSerie(line.value, line.name, line.color); setAlarmSerie(line.value, line.name, line.color);
direction && setAlarmSerie(0-line.value, line.name, line.color); direction && setAlarmSerie(0 - line.value, line.name, line.color);
}; };
}; };
return {series, maxAlarm}; return { series, maxAlarm };
}; };
var addAlarmLine = function(alarms, list, series, direction){ var addAlarmLine = function (alarms, list, series, direction) {
var xLength = (list || []).length; var xLength = (list || []).length;
if(alarms && xLength){ if (alarms && xLength) {
var value = alarms.value; var value = alarms.value;
// discern // discern
var levelDist = [ var levelDist = [
{color:'red', name:'红色报警线'}, { color: 'red', name: '红色报警线' },
{color:'orange', name:'橙色报警线'}, { color: 'orange', name: '橙色报警线' },
{color:'yellow', name:'黄色报警线'}, { color: 'yellow', name: '黄色报警线' },
{color:'blue', name:'蓝色报警线'}], { color: 'blue', name: '蓝色报警线' }],
alarmLine = {}, setAlarmSerie = function(value, name, color){ alarmLine = {}, setAlarmSerie = function (value, name, color) {
var serie = {name:name, type:'spline', data:[{x:0, y:value}, {x:xLength, y:value}], color:color, var serie = {
name: name, type: 'spline', data: [{ x: 0, y: value }, { x: xLength, y: value }], color: color,
//enableMouseTracking:false, //enableMouseTracking:false,
legend:false, legend: false,
showInLegend:false, showInLegend: false,
dashStyle:'ShortDot', dashStyle: 'ShortDot',
states:{ states: {
inactive:{ inactive: {
opacity:1 opacity: 1
}, },
}, },
}; };
series.push(serie); series.push(serie);
}; };
for(var item of levelDist){ for (var item of levelDist) {
var value = alarms[item.color] * 1; var value = alarms[item.color] * 1;
if(value){ if (value) {
setAlarmSerie(value, item.name, item.color); setAlarmSerie(value, item.name, item.color);
direction && setAlarmSerie(0-value, item.name, item.color); direction && setAlarmSerie(0 - value, item.name, item.color);
}; };
}; };
}; };
...@@ -234,37 +237,38 @@ var Highchart = function(){ ...@@ -234,37 +237,38 @@ var Highchart = function(){
}; };
var template = { var template = {
pie: function(el, data, opts){ pie: function (el, data, opts) {
var chartData = formatChartData(data, opts); var chartData = formatChartData(data, opts);
var seriesData = chartData.seriesData; var seriesData = chartData.seriesData;
return new Highcharts.chart(el, { return new Highcharts.chart(el, {
chart: { chart: {
backgroundColor:'transparent', backgroundColor: 'transparent',
//spacing:[0, 0 , 0, 0] //spacing:[0, 0 , 0, 0]
}, },
title: { title: {
floating:true, floating: true,
text: '总数<br/>'+chartData.sum, text: '总数<br/>' + chartData.sum,
verticalAlign: 'middle', verticalAlign: 'middle',
y:22, y: 22,
floating: true, floating: true,
style:{ style: {
color:'#00f6ff', color: '#00f6ff',
} }
}, },
tooltip: { tooltip: {
shared: false, // 添加此属性关闭共享提示框
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
}, },
plotOptions: { plotOptions: {
pie: { pie: {
allowPointSelect: true, allowPointSelect: true,
borderWidth: 0, borderWidth: 0,
minSize:130, minSize: 130,
//size:200, //size:200,
cursor: 'pointer', cursor: 'pointer',
dataLabels: { dataLabels: {
enabled: true, enabled: true,
distance:10, distance: 10,
format: '<b>{point.name}</b>: {point.percentage:.1f} %', format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: { style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
...@@ -281,7 +285,7 @@ var Highchart = function(){ ...@@ -281,7 +285,7 @@ var Highchart = function(){
name: '设备数量', name: '设备数量',
data: seriesData data: seriesData
}] }]
}, function(c) { // 图表初始化完毕后的会掉函数 }, function (c) { // 图表初始化完毕后的会掉函数
/* // 环形图圆心 /* // 环形图圆心
var centerY = c.series[0].center[1], var centerY = c.series[0].center[1],
titleHeight = parseInt(c.title.styles.fontSize); titleHeight = parseInt(c.title.styles.fontSize);
...@@ -291,28 +295,28 @@ var Highchart = function(){ ...@@ -291,28 +295,28 @@ var Highchart = function(){
y:centerY y:centerY
}); */ }); */
}); });
}, },
/** /**
* 浮动菜单容器 * 浮动菜单容器
* @param: {Dom} el * @param: {Dom} el
* @param: {Object} data * @param: {Object} data
* @param: {Object} opts {chartConfig:{}, callback:Function} * @param: {Object} opts {chartConfig:{}, callback:Function}
* @example1: * @example1:
* @return: * @return:
* @author: Kimber * @author: Kimber
* @updatetime: 2022/1/11 * @updatetime: 2022/1/11
* @createtime: 2022/1/11 * @createtime: 2022/1/11
*/ */
high: function(el, data, opts){ high: function (el, data, opts) {
var list = data.list; var list = data.list;
data.chartType = data.range === 'month' ? 'line' : 'column'; data.chartType = data.range === 'month' ? 'line' : 'column';
var chartConfig = opts.chartConfig || {}; var chartConfig = opts.chartConfig || {};
var chartData, categories = [], series = [], maxVal = null; var chartData, categories = [], series = [], maxVal = null;
if(opts.isSeriesData){ if (opts.isSeriesData) {
}else{ } else {
chartData = seriesDataFormat(data, {}); chartData = seriesDataFormat(data, {});
categories = chartData.categories; categories = chartData.categories;
series = chartData.series; series = chartData.series;
...@@ -327,10 +331,10 @@ var Highchart = function(){ ...@@ -327,10 +331,10 @@ var Highchart = function(){
var option = { var option = {
chart: { chart: {
type: data.chartType, type: data.chartType,
backgroundColor:'transparent', backgroundColor: 'transparent',
//marginTop:30, //marginTop:30,
marginBottom:22, marginBottom: 22,
marginLeft:30, marginLeft: 30,
}, },
title: { title: {
text: '' text: ''
...@@ -341,17 +345,17 @@ var Highchart = function(){ ...@@ -341,17 +345,17 @@ var Highchart = function(){
xAxis: { xAxis: {
type: 'datetime' || 'category', type: 'datetime' || 'category',
labels: { labels: {
rotation:0, // 设置轴标签旋转角度 rotation: 0, // 设置轴标签旋转角度
style:{ style: {
color:'#fff' color: '#fff'
}, },
y:15, y: 15,
}, },
categories: categories[0] && categories, categories: categories[0] && categories,
lineWidth:0, lineWidth: 0,
//lineColor:'#ff0000', //lineColor:'#ff0000',
gridLineColor:'#aaa', gridLineColor: '#aaa',
tickLength:0, // 刻度线 tickLength: 0, // 刻度线
dateTimeLabelFormats: { dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L', millisecond: '%H:%M:%S.%L',
...@@ -368,16 +372,16 @@ var Highchart = function(){ ...@@ -368,16 +372,16 @@ var Highchart = function(){
title: { title: {
text: '' text: ''
}, },
labels:{ labels: {
style:{ style: {
color:'#fff' color: '#fff'
}, },
x:-6, x: -6,
}, },
gridLineColor:'#0F5680', gridLineColor: '#0F5680',
//minorGridLineWidth: 5, //minorGridLineWidth: 5,
//gridLineWidth: 5, //gridLineWidth: 5,
max:opts.maxValDev ? maxVal + maxVal * opts.maxValDev : null, max: opts.maxValDev ? maxVal + maxVal * opts.maxValDev : null,
}, },
plotOptions: { plotOptions: {
column: { column: {
...@@ -385,7 +389,7 @@ var Highchart = function(){ ...@@ -385,7 +389,7 @@ var Highchart = function(){
//y:50, //y:50,
//itemMarginTop:50, //itemMarginTop:50,
}, },
bar:{ bar: {
borderWidth: 0, borderWidth: 0,
}, },
}, },
...@@ -395,22 +399,22 @@ var Highchart = function(){ ...@@ -395,22 +399,22 @@ var Highchart = function(){
layout: 'horizontal', // 水平布局:“horizontal”, 垂直布局:“vertical” layout: 'horizontal', // 水平布局:“horizontal”, 垂直布局:“vertical”
floating: false, // 图列是否浮动 floating: false, // 图列是否浮动
align: 'right', align: 'right',
// 图例容器 // 图例容器
//width:'100%', // number || String //width:'100%', // number || String
padding:2, // 内边距 padding: 2, // 内边距
margin:2, margin: 2,
borderRadius:5, borderRadius: 5,
//borderWidth:1, //borderWidth:1,
verticalAlign: 'top', verticalAlign: 'top',
// 图例项 // 图例项
//itemWidth:120, // 宽度 //itemWidth:120, // 宽度
itemDistance:10, // 间距 20 itemDistance: 10, // 间距 20
y:-10, y: -10,
itemMarginTop:2, itemMarginTop: 2,
itemStyle:{color:'#fff',}, itemStyle: { color: '#fff', },
itemHoverStyle:{color:'#fff',}, itemHoverStyle: { color: '#fff', },
}, },
credits: { credits: {
enabled: false enabled: false
...@@ -419,6 +423,7 @@ var Highchart = function(){ ...@@ -419,6 +423,7 @@ var Highchart = function(){
/* formatter: function (e) { /* formatter: function (e) {
return this.series.name + "："+ this.key +'<br/>'+ this.y.toFixed(3)+' ' + data.unit; return this.series.name + "："+ this.key +'<br/>'+ this.y.toFixed(3)+' ' + data.unit;
}, */ }, */
shared: false,
pointFormat: '{series.name}：{point.y} ' + data.unit, pointFormat: '{series.name}：{point.y} ' + data.unit,
dateTimeLabelFormats: { dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L', millisecond: '%H:%M:%S.%L',
...@@ -441,46 +446,46 @@ var Highchart = function(){ ...@@ -441,46 +446,46 @@ var Highchart = function(){
}); });
var options; var options;
if(opts.isSeriesData){ if (opts.isSeriesData) {
options = reversExtends(option, chartConfig, opts.callback); options = reversExtends(option, chartConfig, opts.callback);
if(opts.type === "t_10"){ if (opts.type === "t_10") {
delete options.legend; delete options.legend;
delete options.xAxis; delete options.xAxis;
delete options.yAxis; delete options.yAxis;
}; };
}else{ } else {
options = reversExtends(option, chartConfig, opts.callback); options = reversExtends(option, chartConfig, opts.callback);
}; };
return new Highcharts.chart(el, options); return new Highcharts.chart(el, options);
}, },
rich: function(el, data, opts){ rich: function (el, data, opts) {
var list = data.list; var list = data.list;
var chartConfig = opts.chartConfig || {}; var chartConfig = opts.chartConfig || {};
var chartData, categories = [], series = [], maxVal = null, unit = data.danwei; var chartData, categories = [], series = [], maxVal = null, unit = data.danwei;
if(opts.isSeriesData){ if (opts.isSeriesData) {
}else{ } else {
chartData = seriesDataFormat(data, {datekey:'date'}); chartData = seriesDataFormat(data, { datekey: 'date' });
categories = chartData.categories; categories = chartData.categories;
series = chartData.series; series = chartData.series;
}; };
var warningLine = this.form.config.warningLine; var warningLine = this.form.config.warningLine;
// add alarm line // add alarm line
var option = { var option = {
valEnabled: true, valEnabled: true,
opacity:1, opacity: 1,
lineWidth:3, lineWidth: 3,
}; };
var alarmData = discernValidAlarmValue(data.alarm, data.lists, series, warningLine, option); var alarmData = discernValidAlarmValue(data.alarm, data.lists, series, warningLine, option);
var option = { var option = {
chart: { chart: {
//type: '', //type: '',
backgroundColor:'transparent', backgroundColor: 'transparent',
//marginTop:30, //marginTop:30,
//marginBottom:30, //marginBottom:30,
//marginLeft:30, //marginLeft:30,
...@@ -492,17 +497,18 @@ var Highchart = function(){ ...@@ -492,17 +497,18 @@ var Highchart = function(){
subtitle: { subtitle: {
text: '' text: ''
}, },
tooltip:{ tooltip: {
enabled:false, enabled: false,
borderWidth:10, shared: false, // 添加此属性关闭共享提示框
borderWidth: 10,
}, },
xAxis: { xAxis: {
type: 'datetime', type: 'datetime',
categories: categories[0] && categories, categories: categories[0] && categories,
lineWidth:0, lineWidth: 0,
//lineColor:'#ff0000', //lineColor:'#ff0000',
gridLineColor:'#aaa', gridLineColor: '#aaa',
dateTimeLabelFormats: { dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L', millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S', second: '%H:%M:%S',
...@@ -518,11 +524,11 @@ var Highchart = function(){ ...@@ -518,11 +524,11 @@ var Highchart = function(){
title: { title: {
text: '' text: ''
}, },
labels:{ labels: {
x:-6, x: -6,
}, },
gridLineColor:'#aaa', gridLineColor: '#aaa',
max:null, max: null,
}, },
plotOptions: { plotOptions: {
column: { column: {
...@@ -530,7 +536,7 @@ var Highchart = function(){ ...@@ -530,7 +536,7 @@ var Highchart = function(){
//y:50, //y:50,
//itemMarginTop:50, //itemMarginTop:50,
}, },
bar:{ bar: {
borderWidth: 0, borderWidth: 0,
}, },
}, },
...@@ -538,9 +544,9 @@ var Highchart = function(){ ...@@ -538,9 +544,9 @@ var Highchart = function(){
// {point.y:.4f} // 保留4位小数 // {point.y:.4f} // 保留4位小数
//headerFormat: '<span style="font-size:10px">{point.key}</span><table>', //headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}:</td>' + pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}:</td>' +
'<td style="padding:0"><b>{point.y}'+unit+'</b> </td></tr>', '<td style="padding:0"><b>{point.y}' + unit + '</b> </td></tr>',
footerFormat: '</table>', footerFormat: '</table>',
shared: true, shared: false,
useHTML: true, useHTML: true,
dateTimeLabelFormats: { dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L', millisecond: '%H:%M:%S.%L',
...@@ -559,22 +565,22 @@ var Highchart = function(){ ...@@ -559,22 +565,22 @@ var Highchart = function(){
layout: 'horizontal', // 水平布局:“horizontal”, 垂直布局:“vertical” layout: 'horizontal', // 水平布局:“horizontal”, 垂直布局:“vertical”
floating: false, // 图列是否浮动 floating: false, // 图列是否浮动
align: 'right', align: 'right',
// 图例容器 // 图例容器
//width:'100%', // number || String //width:'100%', // number || String
padding:2, // 内边距 padding: 2, // 内边距
margin:2, margin: 2,
borderRadius:5, borderRadius: 5,
//borderWidth:1, //borderWidth:1,
verticalAlign: 'top', verticalAlign: 'top',
// 图例项 // 图例项
//itemWidth:120, // 宽度 //itemWidth:120, // 宽度
itemDistance:10, // 间距 20 itemDistance: 10, // 间距 20
y:-10, y: -10,
itemMarginTop:2, itemMarginTop: 2,
itemStyle:{}, itemStyle: {},
itemHoverStyle:{}, itemHoverStyle: {},
}, },
credits: { credits: {
enabled: false enabled: false
...@@ -586,41 +592,41 @@ var Highchart = function(){ ...@@ -586,41 +592,41 @@ var Highchart = function(){
global: { global: {
useUTC: false useUTC: false
}, },
lang:{ lang: {
resetZoom:'重置缩放比例', resetZoom: '重置缩放比例',
}, },
}); });
var options; var options;
if(opts.isSeriesData){ if (opts.isSeriesData) {
options = reversExtends(option, chartConfig, opts.callback); options = reversExtends(option, chartConfig, opts.callback);
if(opts.type === "t_10"){ if (opts.type === "t_10") {
delete options.legend; delete options.legend;
delete options.xAxis; delete options.xAxis;
delete options.yAxis; delete options.yAxis;
}; };
}else{ } else {
options = reversExtends(option, chartConfig, opts.callback); options = reversExtends(option, chartConfig, opts.callback);
}; };
return new Highcharts.chart(el, options); return new Highcharts.chart(el, options);
}, },
}; };
var getRandomColor = function(random){ var getRandomColor = function (random) {
if(random === true){ if (random === true) {
return 'rgb(' + [Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(',') + ')'; return 'rgb(' + [Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(',') + ')';
}else{ } else {
var colors = ['#7CB5EC', '#434348', '#90ED7D', '#F7A35C', '#8085E9', '#F15C80', '#E4D354', '#2B908F', '#F45B5B', '#91E8E1', '#0769CB', '#00ABBD', '#ffd886', "#9F2E61", "#4D670C"]; var colors = ['#7CB5EC', '#434348', '#90ED7D', '#F7A35C', '#8085E9', '#F15C80', '#E4D354', '#2B908F', '#F45B5B', '#91E8E1', '#0769CB', '#00ABBD', '#ffd886', "#9F2E61", "#4D670C"];
if(typeof random === 'number'){ if (typeof random === 'number') {
return colors[~~random]; return colors[~~random];
}else{ } else {
return colors[~~(Math.random()*colors.length)]; return colors[~~(Math.random() * colors.length)];
}; };
}; };
}; };
return { return {
template:template, getRandomColor:getRandomColor template: template, getRandomColor: getRandomColor
} }
}; };
......
src/layout/components/MainNavbar.vue
View file @ 4dc1e2eb
<template> <template>
<div class="mian-navbar"> <div class="mian-navbar">
<div class="title-ctn"> <div class="title-ctn">
<h2 v-if="!!pondName">{{pondName}}<!-- 安全监测系统 --></h2> <h2 v-if="!!pondName">
</div> {{ pondName
}}<!-- 安全监测系统 -->
</h2>
</div>
<div class="navbar"> <div class="navbar">
<div class="right"> <div class="right">
<div class="right-menu"> <div class="right-menu">
<div> <div>
<el-tooltip content="三维大屏" v-if="d3_screnn" effect="dark" placement="bottom"> <el-tooltip
<a class="el-icon-monitor" href="/3d/index.html" target="_blank" ></a> content="三维大屏"
</el-tooltip> v-if="d3_screnn"
<el-tooltip content="风险大屏" v-if="risk_entrance" effect="dark" placement="bottom"> effect="dark"
<a class="el-icon-data-line" href="/edge/ScreenFX" target="_blank" ></a> placement="bottom"
</el-tooltip> >
<el-tooltip content="可视化大屏" effect="dark" placement="bottom"> <a
<a class="el-icon-s-platform" href="/edge/Screen" target="_blank" ></a> class="el-icon-monitor"
</el-tooltip> href="/3d/index.html"
</div> target="_blank"
<!-- <template > ></a>
</el-tooltip>
<el-tooltip
content="风险大屏"
v-if="risk_entrance"
effect="dark"
placement="bottom"
>
<a
class="el-icon-data-line"
href="/edge/ScreenFX"
target="_blank"
></a>
</el-tooltip>
<el-tooltip content="可视化大屏" effect="dark" placement="bottom">
<a
class="el-icon-s-platform"
href="/edge/Screen"
target="_blank"
></a>
</el-tooltip>
</div>
<!-- <template >
<el-tooltip content="全屏缩放" effect="dark" placement="bottom"> <el-tooltip content="全屏缩放" effect="dark" placement="bottom">
<screenfull id="screenfull" class="right-menu-item hover-effect" /> <screenfull id="screenfull" class="right-menu-item hover-effect" />
</el-tooltip> </el-tooltip>
</template> --> </template> -->
</div> </div>
<div class="navbar-line"> <div class="navbar-line">
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click"> <el-dropdown
<div class="avatar-wrapper el-icon-caret-bottom"> class="avatar-container right-menu-item hover-effect"
<img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar"> trigger="click"
<span>{{user.nickName}}</span> >
</div> <div class="avatar-wrapper el-icon-caret-bottom">
<el-dropdown-menu slot="dropdown"> <img
<!-- <span style="display:block;" @click="show = true"> :src="
user.avatarName
? baseApi + '/avatar/' + user.avatarName
: Avatar
"
class="user-avatar"
/>
<span>{{ user.nickName }}</span>
</div>
<el-dropdown-menu slot="dropdown">
<!-- <span style="display:block;" @click="show = true">
<el-dropdown-item> <el-dropdown-item>
布局设置 布局设置
</el-dropdown-item> </el-dropdown-item>
</span> --> </span> -->
<router-link to="/user/center"> <router-link to="/user/center">
<el-dropdown-item> <el-dropdown-item>
个人中心 个人中心
</el-dropdown-item> </el-dropdown-item>
</router-link> </router-link>
<span style="display:block;" @click="open"> <span style="display:block;" @click="open">
<el-dropdown-item divided> <el-dropdown-item divided>
退出登录 退出登录
</el-dropdown-item> </el-dropdown-item>
</span> </span>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from "vuex";
//import Screenfull from '@/components/Screenfull' //import Screenfull from '@/components/Screenfull'
import { reqApi} from '@/assets/js/httpApi.js'; import { reqApi } from "@/assets/js/httpApi.js";
export default { export default {
//components: {Screenfull}, //components: {Screenfull},
data() { data() {
return { return {
dialogVisible: false, dialogVisible: false,
pondName:'', pondName: "",
risk_entrance:0, risk_entrance: 0,
d3_screnn:1, d3_screnn: 1
} };
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(["user", "baseApi", "device"]),
'user', show: {
'baseApi', get() {
'device', return this.$store.state.settings.showSettings;
]), },
show: { set(val) {
get() { this.$store.dispatch("settings/changeSetting", {
return this.$store.state.settings.showSettings key: "showSettings",
}, value: val
set(val) { });
this.$store.dispatch('settings/changeSetting', { }
key: 'showSettings', }
value: val },
}) created() {
} var self = this;
} reqApi.common
}, .requstEdge("get", "tab/tailpondinfor/dryinfo", {})
created() { .then(function(res) {
var self = this; var body = res.body || {};
reqApi.common.requstEdge('get', 'tab/tailpondinfor/dryinfo', {}).then(function(res){ var tailingname = body.tailingname;
var body = res.body || {}; //self.pondName = tailingname.indexOf('尾矿库') > -1 ? tailingname : (tailingname||'') + '尾矿库';
var tailingname = body.tailingname; self.pondName = tailingname;
//self.pondName = tailingname.indexOf('尾矿库') > -1 ? tailingname : (tailingname||'') + '尾矿库'; self.risk_entrance = body.risk_entrance;
self.pondName = tailingname; self.d3_screnn = !body.d3_screnn;
self.risk_entrance = body.risk_entrance;
self.d3_screnn = !body.d3_screnn;
//var $appMain = self.$parent.$el.querySelector(".app-main").__vue__; //var $appMain = self.$parent.$el.querySelector(".app-main").__vue__;
//var $cmPage = $appMain.$children[0]; //var $cmPage = $appMain.$children[0];
}); });
}, },
methods: { methods: {
open() { open() {
this.$confirm('确定注销并退出系统吗？', '提示', { this.$confirm("确定注销并退出系统吗？", "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning"
}).then(() => { }).then(() => {
this.logout() this.logout();
}) });
}, },
logout() { logout() {
this.$store.dispatch('LogOut').then(() => { this.$store.dispatch("LogOut").then(() => {
location.reload() location.reload();
}) });
} }
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.mian-navbar{ .mian-navbar {
position:relative;height:.65rem;width:100%;line-height:.65rem; position: relative;
background-image:linear-gradient(to right, #071C6B, #0C5AAF, #138FE7); height: 0.65rem;
display:flex; width: 100%;
line-height: 0.65rem;
background-image: linear-gradient(to right, #071c6b, #0c5aaf, #138fe7);
display: flex;
.title-ctn{ .title-ctn {
height:100%;display:flex;align-items:center;margin-left:1.093vw; height: 100%;
h2{ display: flex;
font-size:.29rem;background-image:-webkit-linear-gradient(top, white, white, #b5cbfa); align-items: center;
-webkit-background-clip:text; margin-left: 1.093vw;
-webkit-text-fill-color:transparent; h2 {
} font-size: 0.29rem;
} background-image: -webkit-linear-gradient(top, white, white, #b5cbfa);
-webkit-background-clip: text;
.navbar{ -webkit-text-fill-color: transparent;
flex:1;height:100%; }
background:no-repeat left bottom url('~@/assets/images/layout/title_3.png'); }
background-size:100% auto;
.right{ .navbar {
display:flex;align-items:center;justify-content:flex-end;user-select:none;cursor:normal; flex: 1;
position:absolute;top:0;right:1.2vw;height:100%; height: 100%;
&>div{ background: no-repeat left bottom url("~@/assets/images/layout/title_3.png");
display:flex;align-items:center; background-size: 100% auto;
a{font-size:24px;margin-right:.10rem;}
}
}
.avatar-wrapper{ .right {
&:before{position:absolute;right:0;height:auto;width:12px;} display: flex;
align-items: center;
position:relative;display:flex;align-items:center;padding-right:15px;color:#51dbff;font-size:13px; justify-content: flex-end;
img{height:26px;width:26px;border-radius:4px;margin-right:4px;border:0;} user-select: none;
span{display:block;max-width:55px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;} cursor: normal;
} position: absolute;
top: 0;
right: 1.2vw;
height: 100%;
& > div {
display: flex;
align-items: center;
a {
font-size: 24px;
margin-right: 0.1rem;
}
}
}
&:focus { .avatar-wrapper {
outline: none; &:before {
} position: absolute;
right: 0;
height: auto;
width: 12px;
}
.right-menu{ position: relative;
flex:1;color:#ADCBBC;margin-right:.20rem; display: flex;
&>div:last-child{ align-items: center;
display:flex;margin-left:10px; padding-right: 15px;
&:not(rect){ color: #51dbff;
font-size:18px; font-size: 13px;
} img {
} height: 26px;
} width: 26px;
} border-radius: 4px;
margin-right: 4px;
border: 0;
}
span {
display: block;
max-width: 55px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-wrap: normal;
}
}
.errLog-container { &:focus {
display: inline-block; outline: none;
vertical-align: top; }
}
}
.right-menu {
flex: 1;
color: #adcbbc;
margin-right: 0.2rem;
& > div:last-child {
display: flex;
margin-left: 10px;
&:not(rect) {
font-size: 18px;
}
}
}
}
.errLog-container {
display: inline-block;
vertical-align: top;
}
}
</style> </style>
src/views/Screen/index.vue
View file @ 4dc1e2eb
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/system/user/login.vue
View file @ 4dc1e2eb
<template> <template>
<div class="login" :style="'background-image:url('+ Background +');'"> <div class="login" :style="'background-image:url(' + Background + ');'">
<div class="headder"> <div class="headder">
<h2>尾矿库数据在线监测系统</h2> <h2>尾矿库数据在线监测系统</h2>
<h4>ONLINE MONITORING SYSTEM FOR TAILINGS POND DATA</h4> <h4>ONLINE MONITORING SYSTEM FOR TAILINGS POND DATA</h4>
<!-- <h2>边坡数据在线监测系统</h2> <!-- <h2>边坡数据在线监测系统</h2>
<h4>ONLINE MONITORING SYSTEM FOR SIDE SLOPE DATA</h4> --> <h4>ONLINE MONITORING SYSTEM FOR SIDE SLOPE DATA</h4> -->
</div> </div>
<div class="logo-place"> <div class="logo-place">
<div class="logo-title">登录窗口</div> <div class="logo-title">登录窗口</div>
<h3 class="subtitle">欢迎登录后台系统</h3> <h3 class="subtitle">欢迎登录后台系统</h3>
<div class="ctn-place"> <div class="ctn-place">
<div class="inbox-range"> <div class="inbox-range">
<div class="ctn-fix"> <div class="ctn-fix">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form"> <el-form
<el-form-item prop="username"> ref="loginForm"
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号"> :model="loginForm"
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> :rules="loginRules"
</el-input> label-position="left"
</el-form-item> label-width="0px"
<el-form-item prop="password"> class="login-form"
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin"> >
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> <el-form-item prop="username">
</el-input> <el-input
</el-form-item> v-model="loginForm.username"
<!-- type="text"
auto-complete="off"
placeholder="账号"
>
<svg-icon
slot="prefix"
icon-class="user"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
auto-complete="off"
placeholder="密码"
@keyup.enter.native="handleLogin"
>
<svg-icon
slot="prefix"
icon-class="password"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<!--
<el-form-item prop="code"> <el-form-item prop="code">
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin"> <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
...@@ -33,235 +59,320 @@ ...@@ -33,235 +59,320 @@
</div> </div>
</el-form-item> </el-form-item>
--> -->
<el-form-item style="width:100%;"> <el-form-item style="width:100%;">
<el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin"> <el-button
<span v-if="!loading">登 录</span> :loading="loading"
<span v-else>登 录 中...</span> size="medium"
</el-button> type="primary"
</el-form-item> style="width:100%;"
</el-form> @click.native.prevent="handleLogin"
</div> >
</div> <span v-if="!loading">登 录</span>
</div> <span v-else>登 录 中...</span>
</div> </el-button>
<!-- 底部 --> </el-form-item>
<div v-if="$store.state.settings.showFooter" id="el-login-footer"> </el-form>
<span v-html="$store.state.settings.footerTxt" /> </div>
<span> ⋅ </span> </div>
<!-- <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ $store.state.settings.caseNumber }}</a> --> </div>
<span class="">技术支持：威海晶合数字矿山技术有限公司</span> </div>
</div> <!-- 底部 -->
</div> <div v-if="$store.state.settings.showFooter" id="el-login-footer">
<span v-html="$store.state.settings.footerTxt" />
<span> ⋅ </span>
<!-- <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ $store.state.settings.caseNumber }}</a> -->
<span class="">技术支持：威海晶合数字矿山技术有限公司</span>
</div>
</div>
</template> </template>
<script> <script>
import Config from '@/settings' import Config from "@/settings";
import { getCodeImg } from '@/api/login' import { getCodeImg } from "@/api/login";
import Cookies from 'js-cookie' import Cookies from "js-cookie";
import qs from 'qs' import qs from "qs";
import Background from '@/assets/images/login_bg.png'; import Background from "@/assets/images/login_bg.png";
import { encrypt } from '@/utils/rsaEncrypt' import { encrypt } from "@/utils/rsaEncrypt";
import '@/assets/icons' // icon import "@/assets/icons"; // icon
export default { export default {
name: 'Login', name: "Login",
data() { data() {
return { return {
Background: Background, Background: Background,
//Background:'', //Background:'',
codeUrl: '', codeUrl: "",
cookiePass: '', cookiePass: "",
loginForm: { loginForm: {
username: '', username: "",
password: '', password: "",
rememberMe: false, rememberMe: false,
code: '', code: "",
uuid: '', uuid: ""
}, },
loginRules: { loginRules: {
username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }], username: [
password: [{ required: true, trigger: 'blur', message: '密码不能为空' }], { required: true, trigger: "blur", message: "用户名不能为空" }
code: [{ required: true, trigger: 'change', message: '验证码不能为空' }], ],
}, password: [
loading: false, { required: true, trigger: "blur", message: "密码不能为空" }
redirect: undefined ],
} code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
}, },
watch: { loading: false,
$route: { redirect: undefined
handler: function(route) { };
const data = route.query },
if (data && data.redirect) { watch: {
this.redirect = data.redirect $route: {
delete data.redirect handler: function(route) {
if (JSON.stringify(data) !== '{}') { const data = route.query;
this.redirect = this.redirect + '&' + qs.stringify(data, { indices: false }) if (data && data.redirect) {
} this.redirect = data.redirect;
} delete data.redirect;
}, if (JSON.stringify(data) !== "{}") {
immediate: true this.redirect =
} this.redirect + "&" + qs.stringify(data, { indices: false });
}, }
created() { }
// 获取验证码 },
this.getCode() immediate: true
// 获取用户名密码等Cookie }
this.getCookie() },
// token 过期提示 created() {
this.point() // 获取验证码
}, this.getCode();
methods: { // 获取用户名密码等Cookie
getCode() { this.getCookie();
getCodeImg().then(res => { // token 过期提示
this.codeUrl = res.img this.point();
this.loginForm.uuid = res.uuid },
}) methods: {
}, getCode() {
getCookie() { getCodeImg().then(res => {
const username = Cookies.get('username') this.codeUrl = res.img;
let password = Cookies.get('password') this.loginForm.uuid = res.uuid;
const rememberMe = Cookies.get('rememberMe') });
// 保存cookie里面的加密后的密码 },
this.cookiePass = password === undefined ? '' : password getCookie() {
password = password === undefined ? this.loginForm.password : password const username = Cookies.get("username");
this.loginForm = { let password = Cookies.get("password");
username: username === undefined ? this.loginForm.username : username, const rememberMe = Cookies.get("rememberMe");
password: password, // 保存cookie里面的加密后的密码
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe), this.cookiePass = password === undefined ? "" : password;
code: '', password = password === undefined ? this.loginForm.password : password;
} this.loginForm = {
}, username: username === undefined ? this.loginForm.username : username,
handleLogin() { password: password,
this.$refs.loginForm.validate(valid => { rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
const user = { code: ""
username: this.loginForm.username, };
password: this.loginForm.password, },
rememberMe: this.loginForm.rememberMe, handleLogin() {
code: this.loginForm.code, this.$refs.loginForm.validate(valid => {
uuid: this.loginForm.uuid, const user = {
} username: this.loginForm.username,
if (user.password !== this.cookiePass) { password: this.loginForm.password,
user.password = encrypt(user.password); rememberMe: this.loginForm.rememberMe,
}; code: this.loginForm.code,
uuid: this.loginForm.uuid
};
if (user.password !== this.cookiePass) {
user.password = encrypt(user.password);
}
if (valid) { if (valid) {
this.loading = true this.loading = true;
if (user.rememberMe) { if (user.rememberMe) {
Cookies.set('username', user.username, { expires: Config.passCookieExpires }) Cookies.set("username", user.username, {
Cookies.set('password', user.password, { expires: Config.passCookieExpires }) expires: Config.passCookieExpires
Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires }) });
} else { Cookies.set("password", user.password, {
Cookies.remove('username') expires: Config.passCookieExpires
Cookies.remove('password') });
Cookies.remove('rememberMe') Cookies.set("rememberMe", user.rememberMe, {
} expires: Config.passCookieExpires
this.$store.dispatch('Login', user).then((res) => { });
this.loading = false } else {
if(/* res.head.code !== '0000' */ res.code){ Cookies.remove("username");
return this.$notify({ Cookies.remove("password");
title: '提示', Cookies.remove("rememberMe");
message: res.msg, Cookies.remove("roles");
type: 'warning', }
duration: 5000 this.$store
}) .dispatch("Login", user)
}; .then(res => {
//this.$router.push({ path: this.redirect || '/' }) this.loading = false;
window.location.href = this.redirect || '/'; if (/* res.head.code !== '0000' */ res.code) {
}).catch((err) => { return this.$notify({
this.loading = false title: "提示",
this.getCode() message: res.msg,
}) type: "warning",
} else { duration: 5000
console.log('error submit!!') });
return false }
}
}) // let decodedData = decodeURIComponent(res.user);
}, // let userData = JSON.parse(decodedData);
point() {
const point = Cookies.get('point') !== undefined Cookies.set("roles", res.user.user.roles[0].name);
if (point) { //this.$router.push({ path: this.redirect || '/' })
this.$notify({ window.location.href = this.redirect || "/";
title: '提示', })
message: '当前登录状态已过期，请重新登录！', .catch(err => {
type: 'warning', this.loading = false;
duration: 5000 this.getCode();
}) });
Cookies.remove('point') } else {
} console.log("error submit!!");
} return false;
} }
} });
},
point() {
const point = Cookies.get("point") !== undefined;
if (point) {
this.$notify({
title: "提示",
message: "当前登录状态已过期，请重新登录！",
type: "warning",
duration: 5000
});
Cookies.remove("point");
}
}
}
};
</script> </script>
<style rel="stylesheet/scss" lang="scss" scope> <style rel="stylesheet/scss" lang="scss" scope>
.login { .login {
display:flex;justify-content:center;align-items:center;flex-direction:column; display: flex;
height:100%;background-size:cover;position:relative; justify-content: center;
align-items: center;
.headder{ flex-direction: column;
margin-bottom:.48rem;text-align:center; height: 100%;
h2, h4{ background-size: cover;
margin:0;padding:0;line-height:1;background-image:-webkit-linear-gradient(top, #fff, #a2deff, #23a5f9); position: relative;
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
} .headder {
h2{font-size:.66rem;letter-spacing:.06rem;} margin-bottom: 0.48rem;
h4{margin-top:.20rem;font-size:.285rem;} text-align: center;
} h2,
h4 {
margin: 0;
padding: 0;
line-height: 1;
background-image: -webkit-linear-gradient(top, #fff, #a2deff, #23a5f9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h2 {
font-size: 0.66rem;
letter-spacing: 0.06rem;
}
h4 {
margin-top: 0.2rem;
font-size: 0.285rem;
}
}
.logo-place{ .logo-place {
position:relative;width:9.68rem;height:5.56rem;/* margin:2.01rem auto 0; */ position: relative;
background:no-repeat top center url('~@/assets/images/login_adorn1.png');background-size:100% 100%; width: 9.68rem;
} height: 5.56rem; /* margin:2.01rem auto 0; */
background: no-repeat top center url("~@/assets/images/login_adorn1.png");
background-size: 100% 100%;
}
.ctn-place{ .ctn-place {
position:absolute;top:1.61rem;right:.06rem;height:auto;width:4.79rem; position: absolute;
flex:1;display:flex; top: 1.61rem;
right: 0.06rem;
.inbox-range{ height: auto;
flex:1; width: 4.79rem;
.ctn-fix{width:3.8rem;margin:0 auto;} flex: 1;
} display: flex;
.login-form { .inbox-range {
.el-input { flex: 1;
height:.58rem;min-height:38px; .ctn-fix {
input { width: 3.8rem;
height:.58rem;padding-left:.40rem; margin: 0 auto;
background-color:#1042a1 !important;color:#fff;border-color:#085fa2; }
} }
}
.input-icon{
height:.58rem;width:.24rem;margin-left:.02rem;
}
.el-form-item__content{ .login-form {
line-height:.58rem; .el-input {
} height: 0.58rem;
min-height: 38px;
.el-form-item{ input {
margin-bottom:.25rem; height: 0.58rem;
&:last-child{margin-bottom:0} padding-left: 0.4rem;
.el-select{width:100%;} background-color: #1042a1 !important;
} color: #fff;
} border-color: #085fa2;
} }
}
.logo-title{ .input-icon {
position:absolute;top:.15rem;left:0;height:auto;width:100%;text-align:center;cursor:default;font-size:.26rem;line-height:1;letter-spacing:10px;color: rgb(56, 230, 255);text-shadow:0px 0px 2px rgb(56 230 255); height: 0.58rem;
} width: 0.24rem;
.subtitle{ margin-left: 0.02rem;
position:absolute;top:.91rem;left:0;height:auto;width:100%;text-align:center;cursor:default;font-size:.34rem;line-height:1;letter-spacing:10px;color:#b1edf8; }
}
} .el-form-item__content {
line-height: 0.58rem;
.login-code { }
width: 33%;
display: inline-block; .el-form-item {
height: 38px; margin-bottom: 0.25rem;
float: right; &:last-child {
img{ margin-bottom: 0;
cursor: pointer; }
vertical-align:middle .el-select {
} width: 100%;
} }
}
}
}
.logo-title {
position: absolute;
top: 0.15rem;
left: 0;
height: auto;
width: 100%;
text-align: center;
cursor: default;
font-size: 0.26rem;
line-height: 1;
letter-spacing: 10px;
color: rgb(56, 230, 255);
text-shadow: 0px 0px 2px rgb(56 230 255);
}
.subtitle {
position: absolute;
top: 0.91rem;
left: 0;
height: auto;
width: 100%;
text-align: center;
cursor: default;
font-size: 0.34rem;
line-height: 1;
letter-spacing: 10px;
color: #b1edf8;
}
}
.login-code {
width: 33%;
display: inline-block;
height: 38px;
float: right;
img {
cursor: pointer;
vertical-align: middle;
}
}
</style> </style>
vue.config.js
View file @ 4dc1e2eb
...@@ -5,10 +5,10 @@ const Mode = 'src'; // 'src' 'src-neuter'(中性) ...@@ -5,10 +5,10 @@ const Mode = 'src'; // 'src' 'src-neuter'(中性)
// copy-webpack-plugin@4.5.2 // copy-webpack-plugin@4.5.2
const CopyWebpackPlugin = require('copy-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin');
//var HtmlWebpackPlugin = require('html-webpack-plugin'); //var HtmlWebpackPlugin = require('html-webpack-plugin');
const defaultSettings = require('./'+Mode+'/settings.js'); const defaultSettings = require('./' + Mode + '/settings.js');
function resolve(dir) { function resolve(dir) {
return path.join(__dirname, dir) return path.join(__dirname, dir)
}; };
const name = defaultSettings.title; // 网址标题 const name = defaultSettings.title; // 网址标题
...@@ -26,10 +26,10 @@ module.exports = { ...@@ -26,10 +26,10 @@ module.exports = {
productionSourceMap: false, productionSourceMap: false,
//indexPath: 'index3.html', //indexPath: 'index3.html',
//integrity:true, //integrity:true,
lintOnSave:false, // 关闭代码核查 lintOnSave: false, // 关闭代码核查
pages:{ pages: {
index: { index: {
entry: Mode+'/main.js', entry: Mode + '/main.js',
// 模板来源 // 模板来源
template: './public/index.html', template: './public/index.html',
// 在 dist/index.html 的输出 // 在 dist/index.html 的输出
...@@ -45,35 +45,35 @@ module.exports = { ...@@ -45,35 +45,35 @@ module.exports = {
}, },
edge: { edge: {
// 页面的入口文件 // 页面的入口文件
entry: Mode+'/edge.js', entry: Mode + '/edge.js',
// 页面的模板文件 // 页面的模板文件
template: './public/edge.html', template: './public/edge.html',
// build 生成的文件名称 例： dist/index.html // build 生成的文件名称 例： dist/index.html
filename: 'edge.html', filename: 'edge.html',
chunks:["edge", "runtime", "chunk-libs", "chunk-elementUI"], chunks: ["edge", "runtime", "chunk-libs", "chunk-elementUI"],
} }
}, },
devServer: { devServer: {
port: port, port: port,
host: VUE_APP_BASE_API && VUE_APP_BASE_API.split(/\/\/|:/).slice(-2)[0], host: '',
open: false, open: false,
overlay: { overlay: {
warnings: false, warnings: false,
errors: true errors: true
}, },
proxy: { proxy: {
'/api': { '/api': {
target: process.env.VUE_APP_BASE_API, target: process.env.VUE_APP_BASE_API,
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/api': 'api' '^/api': 'api'
} }
}, },
'/auth': { '/auth': {
target: process.env.VUE_APP_BASE_API, target: process.env.VUE_APP_BASE_API,
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/auth': 'auth' '^/auth': 'auth'
} }
}, },
// 天气接口 // 天气接口
...@@ -97,21 +97,21 @@ module.exports = { ...@@ -97,21 +97,21 @@ module.exports = {
// provide the app's title in webpack's name field, so that // provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title. // it can be accessed in index.html to inject the correct title.
plugins: [ plugins: [
new CopyWebpackPlugin([{ new CopyWebpackPlugin([{
from: "./static", from: "./static",
to: 'static' to: 'static'
}]), }]),
new CopyWebpackPlugin([{ new CopyWebpackPlugin([{
from: "./config", from: "./config",
to: 'config' to: 'config'
}]) }])
], ],
name: name, name: name,
resolve: { resolve: {
alias: { alias: {
'@': resolve(Mode+''), '@': resolve(Mode + ''),
'@crud': resolve(Mode+'/components/Crud') '@crud': resolve(Mode + '/components/Crud')
} }
} }
}, },
chainWebpack(config) { chainWebpack(config) {
...@@ -120,76 +120,76 @@ module.exports = { ...@@ -120,76 +120,76 @@ module.exports = {
// set svg-sprite-loader // set svg-sprite-loader
config.module config.module
.rule('svg') .rule('svg')
.exclude.add(resolve(Mode+'/assets/icons')) .exclude.add(resolve(Mode + '/assets/icons'))
.end() .end()
config.module config.module
.rule('icons') .rule('icons')
.test(/\.svg$/) .test(/\.svg$/)
.include.add(resolve(Mode+'/assets/icons')) .include.add(resolve(Mode + '/assets/icons'))
.end() .end()
.use('svg-sprite-loader') .use('svg-sprite-loader')
.loader('svg-sprite-loader') .loader('svg-sprite-loader')
.options({ .options({
symbolId: 'icon-[name]' symbolId: 'icon-[name]'
}) })
.end() .end()
// set preserveWhitespace // set preserveWhitespace
config.module config.module
.rule('vue') .rule('vue')
.use('vue-loader') .use('vue-loader')
.loader('vue-loader') .loader('vue-loader')
.tap(options => { .tap(options => {
options.compilerOptions.preserveWhitespace = true options.compilerOptions.preserveWhitespace = true
return options return options
}) })
.end() .end()
config config
// https://webpack.js.org/configuration/devtool/#development // https://webpack.js.org/configuration/devtool/#development
.when(process.env.NODE_ENV === 'development', .when(process.env.NODE_ENV === 'development',
config => config.devtool('cheap-source-map') config => config.devtool('cheap-source-map')
) )
config config
.when(process.env.NODE_ENV !== 'development', .when(process.env.NODE_ENV !== 'development',
config => { config => {
config config
.plugin('ScriptExtHtmlWebpackPlugin') .plugin('ScriptExtHtmlWebpackPlugin')
.after('html') .after('html')
.use('script-ext-html-webpack-plugin', [{ .use('script-ext-html-webpack-plugin', [{
// `runtime` must same as runtimeChunk name. default is `runtime` // `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/ inline: /runtime\..*\.js$/
}]) }])
.end() .end()
config config
.optimization.splitChunks({ .optimization.splitChunks({
chunks: 'all', chunks: 'all',
cacheGroups: { cacheGroups: {
libs: { libs: {
name: 'chunk-libs', name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/, test: /[\\/]node_modules[\\/]/,
priority: 10, priority: 10,
chunks: 'initial' // only package third parties that are initially dependent chunks: 'initial' // only package third parties that are initially dependent
}, },
elementUI: { elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
}, },
commons: { commons: {
name: 'chunk-commons', name: 'chunk-commons',
test: resolve(Mode+'/components'), // can customize your rules test: resolve(Mode + '/components'), // can customize your rules
minChunks: 3, // minimum common number minChunks: 3, // minimum common number
priority: 5, priority: 5,
reuseExistingChunk: true reuseExistingChunk: true
} }
} }
}) })
config.optimization.runtimeChunk('single') config.optimization.runtimeChunk('single')
} }
); );
}, },
transpileDependencies: [ transpileDependencies: [
//'vue-echarts', //'vue-echarts',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment