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