Skip to content

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

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

parent b58506ca
Show whitespace changes
Inline Side-by-side
Showing with 2726 additions and 1639 deletions
src/assets/js/chartTemplates.js
View file @ 4dc1e2eb
...@@ -7,7 +7,7 @@ import Highcharts3D from 'highcharts/highcharts-3d.js'; ...@@ -7,7 +7,7 @@ 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 () {
/** /**
* 图表数据格式化 * 图表数据格式化
...@@ -19,21 +19,21 @@ var Highchart = function(){ ...@@ -19,21 +19,21 @@ var Highchart = function(){
* @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 };
}; };
...@@ -47,35 +47,35 @@ var Highchart = function(){ ...@@ -47,35 +47,35 @@ var Highchart = function(){
* @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 }
}; };
...@@ -90,15 +90,15 @@ var Highchart = function(){ ...@@ -90,15 +90,15 @@ var Highchart = function(){
* @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;
}; };
})(); })();
...@@ -115,55 +115,57 @@ var Highchart = function(){ ...@@ -115,55 +115,57 @@ var Highchart = function(){
* @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:{ },
enabled:opts.valEnabled || false, // 数据值, 2022/11/11(周五) 因多条报警线暂时关闭 dataLabels: {
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);
}; };
...@@ -181,52 +183,53 @@ var Highchart = function(){ ...@@ -181,52 +183,53 @@ var Highchart = function(){
}; */ }; */
// 多条报警线 // 多条报警线
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);
...@@ -304,15 +308,15 @@ var Highchart = function(){ ...@@ -304,15 +308,15 @@ var Highchart = function(){
* @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,
}, },
}, },
...@@ -398,19 +402,19 @@ var Highchart = function(){ ...@@ -398,19 +402,19 @@ var Highchart = function(){
// 图例容器 // 图例容器
//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,28 +446,28 @@ var Highchart = function(){ ...@@ -441,28 +446,28 @@ 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;
}; };
...@@ -472,15 +477,15 @@ var Highchart = function(){ ...@@ -472,15 +477,15 @@ var Highchart = function(){
// 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,16 +497,17 @@ var Highchart = function(){ ...@@ -492,16 +497,17 @@ 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',
...@@ -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',
...@@ -562,19 +568,19 @@ var Highchart = function(){ ...@@ -562,19 +568,19 @@ var Highchart = function(){
// 图例容器 // 图例容器
//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">
{{ pondName
}}<!-- 安全监测系统 -->
</h2>
</div> </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="三维大屏"
v-if="d3_screnn"
effect="dark"
placement="bottom"
>
<a
class="el-icon-monitor"
href="/3d/index.html"
target="_blank"
></a>
</el-tooltip> </el-tooltip>
<el-tooltip content="风险大屏" v-if="risk_entrance" effect="dark" placement="bottom"> <el-tooltip
<a class="el-icon-data-line" href="/edge/ScreenFX" target="_blank" ></a> 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>
<el-tooltip content="可视化大屏" effect="dark" placement="bottom"> <el-tooltip content="可视化大屏" effect="dark" placement="bottom">
<a class="el-icon-s-platform" href="/edge/Screen" target="_blank" ></a> <a
class="el-icon-s-platform"
href="/edge/Screen"
target="_blank"
></a>
</el-tooltip> </el-tooltip>
</div> </div>
<!-- <template > <!-- <template >
...@@ -25,10 +50,20 @@ ...@@ -25,10 +50,20 @@
</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
class="avatar-container right-menu-item hover-effect"
trigger="click"
>
<div class="avatar-wrapper el-icon-caret-bottom"> <div class="avatar-wrapper el-icon-caret-bottom">
<img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar"> <img
<span>{{user.nickName}}</span> :src="
user.avatarName
? baseApi + '/avatar/' + user.avatarName
: Avatar
"
class="user-avatar"
/>
<span>{{ user.nickName }}</span>
</div> </div>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<!-- <span style="display:block;" @click="show = true"> <!-- <span style="display:block;" @click="show = true">
...@@ -55,40 +90,38 @@ ...@@ -55,40 +90,38 @@
</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',
'baseApi',
'device',
]),
show: { show: {
get() { get() {
return this.$store.state.settings.showSettings return this.$store.state.settings.showSettings;
}, },
set(val) { set(val) {
this.$store.dispatch('settings/changeSetting', { this.$store.dispatch("settings/changeSetting", {
key: 'showSettings', key: "showSettings",
value: val value: val
}) });
} }
} }
}, },
created() { created() {
var self = this; var self = this;
reqApi.common.requstEdge('get', 'tab/tailpondinfor/dryinfo', {}).then(function(res){ reqApi.common
.requstEdge("get", "tab/tailpondinfor/dryinfo", {})
.then(function(res) {
var body = res.body || {}; var body = res.body || {};
var tailingname = body.tailingname; var tailingname = body.tailingname;
//self.pondName = tailingname.indexOf('尾矿库') > -1 ? tailingname : (tailingname||'') + '尾矿库'; //self.pondName = tailingname.indexOf('尾矿库') > -1 ? tailingname : (tailingname||'') + '尾矿库';
...@@ -102,70 +135,115 @@ export default { ...@@ -102,70 +135,115 @@ export default {
}, },
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;
-webkit-text-fill-color: transparent;
} }
} }
.navbar{ .navbar {
flex:1;height:100%; flex: 1;
background:no-repeat left bottom url('~@/assets/images/layout/title_3.png'); height: 100%;
background-size:100% auto; background: no-repeat left bottom url("~@/assets/images/layout/title_3.png");
background-size: 100% auto;
.right{ .right {
display:flex;align-items:center;justify-content:flex-end;user-select:none;cursor:normal; display: flex;
position:absolute;top:0;right:1.2vw;height:100%; align-items: center;
&>div{ justify-content: flex-end;
display:flex;align-items:center; user-select: none;
a{font-size:24px;margin-right:.10rem;} 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;
}
} }
} }
.avatar-wrapper{ .avatar-wrapper {
&:before{position:absolute;right:0;height:auto;width:12px;} &:before {
position: absolute;
right: 0;
height: auto;
width: 12px;
}
position:relative;display:flex;align-items:center;padding-right:15px;color:#51dbff;font-size:13px; position: relative;
img{height:26px;width:26px;border-radius:4px;margin-right:4px;border:0;} display: flex;
span{display:block;max-width:55px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;} 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;
}
} }
&:focus { &:focus {
outline: none; outline: none;
} }
.right-menu{ .right-menu {
flex:1;color:#ADCBBC;margin-right:.20rem; flex: 1;
&>div:last-child{ color: #adcbbc;
display:flex;margin-left:10px; margin-right: 0.2rem;
&:not(rect){ & > div:last-child {
font-size:18px; display: flex;
margin-left: 10px;
&:not(rect) {
font-size: 18px;
} }
} }
} }
...@@ -175,6 +253,5 @@ export default { ...@@ -175,6 +253,5 @@ export default {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
} }
</style> </style>
src/views/Screen/index.vue
View file @ 4dc1e2eb
<template> <template>
<div class="Screen cm-layout"> <div class="Screen cm-layout">
<!-- 新增：原生模态框 --> <!-- 新增：原生模态框 -->
<div class="native-modal" :class="{ 'active': showUnListModal }"> <div class="native-modal" :class="{ active: showUnListModal }">
<div class="modal-mask" @click="closeModal"></div> <div class="modal-mask" @click="closeModal"></div>
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<div class="b_0"> <div class="b_0">
<header> <header>
<div class="b1_a"> <div class="b1_a">
<h2>{{title}}</h2> <h2>{{ title }}</h2>
<div class="b1_a1"> <div class="b1_a1">
<span class="font_digit" id="nowTime"></span> <span class="font_digit" id="nowTime"></span>
</div> </div>
...@@ -37,26 +37,20 @@ ...@@ -37,26 +37,20 @@
<div class="b2_a1"> <div class="b2_a1">
<div v-for="(item, i) in area.b2_a1" class="view-item"> <div v-for="(item, i) in area.b2_a1" class="view-item">
<div class="view-flx"> <div class="view-flx">
<Carousel <Carousel :ref="'view_' + item.id" />
:ref="'view_' + item.id"
/>
</div> </div>
</div> </div>
</div> </div>
<div class="b2_a2" id="b2_a2"> <div class="b2_a2" id="b2_a2">
<div class="b2a_2a view-item" v-for="(item, i) in area.b2a_2a"> <div class="b2a_2a view-item" v-for="(item, i) in area.b2a_2a">
<div class="view-flx"> <div class="view-flx">
<Center-Views <Center-Views :ref="'view_' + item.id" />
:ref="'view_' + item.id"
/>
</div> </div>
</div> </div>
<div class="b2a_2b"> <div class="b2a_2b">
<div v-for="(item, i) in area.b2a_2b" class="view-item"> <div v-for="(item, i) in area.b2a_2b" class="view-item">
<div class="view-flx"> <div class="view-flx">
<Carousel <Carousel :ref="'view_' + item.id" />
:ref="'view_' + item.id"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -64,9 +58,7 @@ ...@@ -64,9 +58,7 @@
<div class="b2_a3"> <div class="b2_a3">
<div v-for="(item, i) in area.b2_a3" class="view-item"> <div v-for="(item, i) in area.b2_a3" class="view-item">
<div class="view-flx"> <div class="view-flx">
<Carousel <Carousel :ref="'view_' + item.id" />
:ref="'view_' + item.id"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -78,236 +70,298 @@ ...@@ -78,236 +70,298 @@
</template> </template>
<script> <script>
import { Tools } from '@/assets/js/common.js'; import { Tools } from "@/assets/js/common.js";
import { reqApi, Config } from '@/assets/js/httpApi.js'; import { reqApi, Config } from "@/assets/js/httpApi.js";
import { Highchart } from '@/assets/js/chartTemplates.js'; import { Highchart } from "@/assets/js/chartTemplates.js";
//import cesium from '@/components/Cesium'; //import cesium from '@/components/Cesium';
import Carousel from '@/components/Carousel'; import Carousel from "@/components/Carousel";
import CenterViews from '@/components/CenterViews'; import CenterViews from "@/components/CenterViews";
import Cookies from "js-cookie";
// style // style
//import '@/../static/js/Cesium/Widgets/widgets.css'; //import '@/../static/js/Cesium/Widgets/widgets.css';
export default { export default {
components: {Carousel, CenterViews}, components: { Carousel, CenterViews },
data() { data() {
return { return {
area:{ area: {
b2_a1:[], b2_a1: [],
b2a_2b:[], b2a_2b: [],
b2_a3:[], b2_a3: [],
views:[], views: []
}, },
title:'', title: "",
// 原有数据保持不变 // 原有数据保持不变
showUnListModal: false, // 控制模态框显示 showUnListModal: false, // 控制模态框显示
currentUnList: [] // 当前离线设备列表 currentUnList: [] // 当前离线设备列表
} };
}, },
mounted() { mounted() {
var that = this; var that = this;
let roles = Cookies.get("roles");
this.$nextTick(() => { this.$nextTick(() => {
this.pageApi = Config.getModuleInfo(this); this.pageApi = Config.getModuleInfo(this);
// 时钟 // 时钟
var nowTimeEl = this.$el.querySelector("#nowTime"); var nowTimeEl = this.$el.querySelector("#nowTime");
var Loop1 = qf.Async.intervalLoop(1000, function(){ var Loop1 = qf.Async.intervalLoop(
var dateTime = Tools.Dates.format('yyyy年MM月dd日 HH:mm:ss'); 1000,
dateTime = dateTime.replace(/年|月|日/g, function(a){return '<span>'+a+'</span>'}); function() {
var dateTime = Tools.Dates.format("yyyy年MM月dd日 HH:mm:ss");
dateTime = dateTime.replace(/年|月|日/g, function(a) {
return "<span>" + a + "</span>";
});
nowTimeEl.innerHTML = dateTime; nowTimeEl.innerHTML = dateTime;
//Loop1.clear(); //Loop1.clear();
}, function(){ },
var dateTime = Tools.Dates.format('yyyy年MM月dd日 HH:mm:ss'); function() {
dateTime = dateTime.replace(/年|月|日/g, function(a){return '<span>'+a+'</span>'}); var dateTime = Tools.Dates.format("yyyy年MM月dd日 HH:mm:ss");
nowTimeEl.innerHTML = dateTime; dateTime = dateTime.replace(/年|月|日/g, function(a) {
return "<span>" + a + "</span>";
}); });
nowTimeEl.innerHTML = dateTime;
}
);
qf(function(){ qf(
function() {
this.initData(); this.initData();
}.bind(this)); }.bind(this)
);
//报警弹窗 //报警弹窗
(function reqAlarmsPopup(){ (function reqAlarmsPopup() {
that.pageApi.alterAbnormal('get', {}).then((res)=>{ that.pageApi.alterAbnormal("get", {}).then(res => {
var list = res.body || []; var list = res.body || [];
qf.Async.loopList.call(this, list, function(key, item, next){ qf.Async.loopList.call(
var alarmDict = ['', this,
{name:'红色报警', color:'red'}, {name:'橙色报警', color:'orange'}, list,
{name:'黄色报警', color:'#FFC900'}, {name:'蓝色报警', color:'blue'}, function(key, item, next) {
var alarmDict = [
"",
{ name: "红色报警", color: "red" },
{ name: "橙色报警", color: "orange" },
{ name: "黄色报警", color: "#FFC900" },
{ name: "蓝色报警", color: "blue" }
]; ];
var alarmItem = alarmDict[item.alarmlevel]; var alarmItem = alarmDict[item.alarmlevel];
var name = item.equipname; var name = item.equipname;
let divStr = `</div><div class="btn-groub" style="margin-top:5px;display:flex;justify-content:center;"><button data-id="0" >解除报警</button><button data-id="1" style="margin-left:30px;">关闭报警</button><button data-id="2" style="margin-left:30px;">不再提示</button></div></div>`;
if (roles == "普通用户") {
divStr = `</div><div class="btn-groub" style="margin-top:5px;display:flex;justify-content:center;"><button data-id="1" style="margin-left:30px;">关闭报警</button><button data-id="2" style="margin-left:30px;">不再提示</button></div></div>`;
}
var Notify = new qf.UI.Notify({ var Notify = new qf.UI.Notify({
type: 'warning', type: "warning",
duration: 10000, duration: 10000,
autoOpen:true, autoOpen: true,
message: '<div><div>'+name+' <span style="color:'+alarmItem.color+'">'+alarmItem.name+'</span> '+item.evalue+'('+item.unit+')</div><div>时间：'+item.time+'</div><div class="btn-groub" style="margin-top:5px;display:flex;justify-content:center;"><button data-id="0">解除报警</button><button data-id="1" style="margin-left:30px;">关闭报警</button><button data-id="2" style="margin-left:30px;">不再提示</button></div></div>', message:
onClose: function(v){ "<div><div>" +
setTimeout(function(){ name +
next() ' <span style="color:' +
}, ~~(1+Math.random()*3) * 1000); alarmItem.color +
}, '">' +
onClick: function(tag){ alarmItem.name +
if(tag.nodeName === 'BUTTON'){ "</span> " +
var self = this, id = tag.dataset.id; item.evalue +
if(id === '0'){ // 解除报警 "(" +
item.unit +
")</div><div>时间：" +
item.time +
divStr,
onClose: function(v) {
setTimeout(function() {
next();
}, ~~(1 + Math.random() * 3) * 1000);
},
onClick: function(tag) {
if (tag.nodeName === "BUTTON") {
var self = this,
id = tag.dataset.id;
if (id === "0") {
// 解除报警
Notify.pause(); Notify.pause();
that.openRelieveAlarm({equipno:item.equipno}, function(){ that.openRelieveAlarm(
{ equipno: item.equipno },
function() {
Notify.close(true); Notify.close(true);
reqAlarmsPopup(); reqAlarmsPopup();
}, function(){ },
function() {
Notify.recover(); Notify.recover();
}); }
}else if(id === '1'){ // 关闭报警 );
} else if (id === "1") {
// 关闭报警
Notify.pause(); Notify.pause();
qf.UI.popupLayer({ qf.UI.popupLayer({
title:'提示', title: "提示",
className:'confirm', className: "confirm",
closeBtnColor:'#eee', closeBtnColor: "#eee",
width:'350px', width: "350px",
html:'点击确认后，该条数据仍会处于报警状态，但是不会再提示，您确认要这么做吗？', html:
confirm: function(el){ "点击确认后，该条数据仍会处于报警状态，但是不会再提示，您确认要这么做吗？",
var parm = {id:item.id}; confirm: function(el) {
that.pageApi.alterAbnormal('put', parm).then((res)=>{ var parm = { id: item.id };
if(res.code === 200){ that.pageApi.alterAbnormal("put", parm).then(res => {
if (res.code === 200) {
Notify.close(); Notify.close();
}; }
}); });
}, },
close: function(){ close: function() {
Notify.recover(); Notify.recover();
}, }
}); });
}else if(id === '2'){ // 不再提示 } else if (id === "2") {
// 不再提示
delete this.onClose; delete this.onClose;
Notify.close(); Notify.close();
}; }
}; }
}, }
}); });
}, function(){ },
setTimeout(function(){ function() {
setTimeout(function() {
reqAlarmsPopup(); reqAlarmsPopup();
}, 15000); }, 15000);
}) }
);
}); });
}.bind(this))(); }.bind(this)());
}); });
}, },
methods: { methods: {
// 创建区域列表 // 创建区域列表
initData(list){ initData(list) {
var self = this; var self = this;
this.pageApi.getViewsConfig().then((res)=>{ this.pageApi.getViewsConfig().then(res => {
if(res.code === 200){ if (res.code === 200) {
var areas = res.body || []; var areas = res.body || [];
for(var area of areas){ for (var area of areas) {
this.area[area.areaid] = area.views; this.area[area.areaid] = area.views;
this.area.views = this.area.views.concat(area.views); this.area.views = this.area.views.concat(area.views);
}; }
// onload // onload
this.$nextTick(() => { this.$nextTick(() => {
new qf.Async.intervalLoop(600000, function(){ new qf.Async.intervalLoop(600000, function() {
// 加载数据 // 加载数据
self.loadViewData(self.area.views); self.loadViewData(self.area.views);
})
}); });
}; });
}
}); });
// 标题 // 标题
reqApi.system.moduleConfig.reqScreenTitle('get').then((res)=>{ reqApi.system.moduleConfig.reqScreenTitle("get").then(res => {
var body = res.body || {}; var body = res.body || {};
this.title = body.title || ''; this.title = body.title || "";
}); });
}, },
// 加载模块数据 // 加载模块数据
loadViewData(list){ loadViewData(list) {
//list = list.splice(0, 1); //list = list.splice(0, 1);
// 模块数据加工 // 模块数据加工
var viewDatas = {}; var viewDatas = {};
for(var item of list){ for (var item of list) {
var viewCode = 'view_'+item.id; var viewCode = "view_" + item.id;
viewDatas[viewCode] = item; viewDatas[viewCode] = item;
var view = (this.$refs[viewCode] || [])[0]; var view = (this.$refs[viewCode] || [])[0];
var slider = view && view.createViews(item).then(panels => { var slider =
view &&
view.createViews(item).then(panels => {
this.moduleInfoDistribute(panels); this.moduleInfoDistribute(panels);
}); });
}; }
}, },
// 模块信息分发 // 模块信息分发
moduleInfoDistribute(panels){ moduleInfoDistribute(panels) {
Tools.asyncLoop.call(this, panels, function(key, panel, next){ Tools.asyncLoop.call(
var item = panel.item, param = {range:item.range,subitem:item.subitem,values:item.values, deviceid:item.deviceid}, type = panel.type; this,
if(type === 't_1'){ // 干滩 panels,
reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{ function(key, panel, next) {
var item = panel.item,
param = {
range: item.range,
subitem: item.subitem,
values: item.values,
deviceid: item.deviceid
},
type = panel.type;
if (type === "t_1") {
// 干滩
reqApi.common.requstEdge("get", item.requrl, param).then(res => {
var data = res.body || {}; var data = res.body || {};
var opts = { var opts = {
chartConfig:{ chartConfig: {}
},
}; };
Highchart.template.high(panel.el, data, opts); Highchart.template.high(panel.el, data, opts);
}); });
}else if(type === 't_2'){ // 库水位 } else if (type === "t_2") {
reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{ // 库水位
reqApi.common.requstEdge("get", item.requrl, param).then(res => {
var data = res.body || {}; var data = res.body || {};
var opts = { var opts = {
chartConfig:{ chartConfig: {
plotOptions: { plotOptions: {
column: { column: {
grouping: false, grouping: false,
shadow: false, shadow: false,
borderWidth: 0 borderWidth: 0
} }
}, }
}, }
}; };
Highchart.template.high(panel.el, data, opts); Highchart.template.high(panel.el, data, opts);
}); });
}else if(type === 't_3'){ // 表面位移 } else if (type === "t_3") {
reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{ // 表面位移
reqApi.common.requstEdge("get", item.requrl, param).then(res => {
var data = res.body || {}; var data = res.body || {};
var opts = { var opts = {
chartConfig:{ chartConfig: {
xAxis: { xAxis: {
labels: { labels: {
rotation: 0, // 设置轴标签旋转角度 rotation: 0 // 设置轴标签旋转角度
}, }
}, }
}, },
warningLine:'double', warningLine: "double"
}; };
Highchart.template.high(panel.el, data, opts); Highchart.template.high(panel.el, data, opts);
}); });
}else if(type === 't_4'){ // 内部位移 } else if (type === "t_4") {
reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{ // 内部位移
reqApi.common.requstEdge("get", item.requrl, param).then(res => {
var data = res.body || {}; var data = res.body || {};
var chartType = param.values === '水平' ? 'bar' : 'column'; var chartType = param.values === "水平" ? "bar" : "column";
var opts = { var opts = {
chartConfig:{ chartConfig: {
chart:{ chart: {
type:chartType, type: chartType,
borderWidth:0, borderWidth: 0,
marginLeft:55, marginLeft: 55
}, }
}, },
warningLine:'double', warningLine: "double"
}; };
Highchart.template.high(panel.el, data, opts); Highchart.template.high(panel.el, data, opts);
}); });
}else if(type === 't_5'){ // 浸润线 } else if (type === "t_5") {
reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{ // 浸润线
reqApi.common.requstEdge("get", item.requrl, param).then(res => {
var data = res.body || {}; var data = res.body || {};
var opts = { var opts = {
chartConfig:{ chartConfig: {
chart:{type:'bar', marginLeft:55,}, chart: { type: "bar", marginLeft: 55 },
xAxis: { xAxis: {
labels: { labels: {
rotation: 0, // 设置轴标签旋转角度 rotation: 0 // 设置轴标签旋转角度
}, }
}, },
/* /*
plotOptions: { plotOptions: {
...@@ -316,52 +370,72 @@ export default { ...@@ -316,52 +370,72 @@ export default {
} }
}, */ }, */
tooltip: { tooltip: {
formatter: function () { formatter: function() {
return this.series.name + "："+ this.key +'<br/>'+ Math.abs(this.y)+' 米'; return (
this.series.name +
"：" +
this.key +
"<br/>" +
Math.abs(this.y) +
" 米"
);
}
} }
}, },
}, callback: function(key, extend, give) {
callback: function(key, extend, give){ if (
if(key === 'series' && give[key].constructor.name === 'Array'){ key === "series" &&
var mobj = extend[key], asobj = give[key]; give[key].constructor.name === "Array"
var arr = mobj[1].data, len = arr.length; ) {
for(var i=0; i<len; i++){ var mobj = extend[key],
asobj = give[key];
var arr = mobj[1].data,
len = arr.length;
for (var i = 0; i < len; i++) {
var val = arr[i]; var val = arr[i];
arr[i] = 0 - val; arr[i] = 0 - val;
}; }
}; }
} }
}; };
Highchart.template.high(panel.el, data, opts); Highchart.template.high(panel.el, data, opts);
}); });
}else if(type === 't_6'){ // 降雨量 } else if (type === "t_6") {
reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{ // 降雨量
reqApi.common.requstEdge("get", item.requrl, param).then(res => {
var data = res.body || {}; var data = res.body || {};
var opts = { var opts = {
chartConfig:{ chartConfig: {
xAxis: [{ xAxis: [
{
labels: { labels: {
rotation: -25, // 设置轴标签旋转角度 rotation: -25 // 设置轴标签旋转角度
}, }
}], }
series:[
{type:'column', color:'#1DF7F9', borderRadius:'.05rem'},
{type:'column', color:'#FAE728', borderRadius:'.05rem'}
], ],
series: [
{
type: "column",
color: "#1DF7F9",
borderRadius: ".05rem"
}, },
{ type: "column", color: "#FAE728", borderRadius: ".05rem" }
]
}
}; };
Highchart.template.high(panel.el, data, opts); Highchart.template.high(panel.el, data, opts);
}); });
}else if(type === 't_7'){ // 排流量 } else if (type === "t_7") {
reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{ // 排流量
reqApi.common.requstEdge("get", item.requrl, param).then(res => {
var data = res.body || {}; var data = res.body || {};
var opts = { var opts = {
chartConfig:{ chartConfig: {
chart: { chart: {
type: 'cylinder', type: "cylinder",
marginLeft:10, marginLeft: 10,
marginRight:-5, marginRight: -5,
options3d:{ options3d: {
enabled: true, enabled: true,
alpha: 10, alpha: 10,
beta: 5, // 左右 beta: 5, // 左右
...@@ -371,74 +445,142 @@ export default { ...@@ -371,74 +445,142 @@ export default {
}, },
plotOptions: { plotOptions: {
series: { series: {
depth: 25, depth: 25
//colorByPoint: true //colorByPoint: true
} }
}, },
series:[ series: [
{type:'column', color:'#00B2FC', showInLegend:false}, { type: "column", color: "#00B2FC", showInLegend: false }
//{type:'spline', color:'#FBC000', showInLegend:false, dashStyle:'Dash', lineWidth:1,} //{type:'spline', color:'#FBC000', showInLegend:false, dashStyle:'Dash', lineWidth:1,}
], ]
}, }
}; };
Highchart.template.high(panel.el, data, opts); Highchart.template.high(panel.el, data, opts);
}); });
}else if(type === 't_8'){ // 水质 } else if (type === "t_8") {
reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{ // 水质
reqApi.common.requstEdge("get", item.requrl, param).then(res => {
res = {
res = {"body":[{"unit":"ug/m³","svalue":"12.00","time":1723248388000,"sensroname":"气象站东PM25","sensorid":"37068520080801"},{"unit":"ug/m³","svalue":"12.00","time":1723248388000,"sensroname":"气象站东PM10","sensorid":"37068520080802"},{"unit":"db","svalue":"52.20","time":1723248389000,"sensroname":"气象站东噪音","sensorid":"37068520080803"},{"unit":"℃","svalue":"29.25","time":1723248390000,"sensroname":"气象站东温度","sensorid":"37068520080804"},{"unit":"%RH","svalue":"82.81","time":1723248391000,"sensroname":"气象站东湿度","sensorid":"37068520080805"},{"unit":"m/s","svalue":"2.80","time":1723248393000,"sensroname":"气象站东风速","sensorid":"37068520080807"},{"unit":"","svalue":"西南","time":1723248392000,"sensroname":"气象站东风向","sensorid":"37068520080808"}],"code":200,"msg":"操作成功"}; body: [
{
unit: "ug/m³",
svalue: "12.00",
time: 1723248388000,
sensroname: "气象站东PM25",
sensorid: "37068520080801"
},
{
unit: "ug/m³",
svalue: "12.00",
time: 1723248388000,
sensroname: "气象站东PM10",
sensorid: "37068520080802"
},
{
unit: "db",
svalue: "52.20",
time: 1723248389000,
sensroname: "气象站东噪音",
sensorid: "37068520080803"
},
{
unit: "℃",
svalue: "29.25",
time: 1723248390000,
sensroname: "气象站东温度",
sensorid: "37068520080804"
},
{
unit: "%RH",
svalue: "82.81",
time: 1723248391000,
sensroname: "气象站东湿度",
sensorid: "37068520080805"
},
{
unit: "m/s",
svalue: "2.80",
time: 1723248393000,
sensroname: "气象站东风速",
sensorid: "37068520080807"
},
{
unit: "",
svalue: "西南",
time: 1723248392000,
sensroname: "气象站东风向",
sensorid: "37068520080808"
}
],
code: 200,
msg: "操作成功"
};
var types = ['PM25', 'PM10','噪音','温度','湿度','风速','风向']; var types = [
"PM25",
"PM10",
"噪音",
"温度",
"湿度",
"风速",
"风向"
];
var data = res.body || {}; var data = res.body || {};
var info = document.createElement("ul"); var info = document.createElement("ul");
info.className = 'info'; info.className = "info";
//var len = data.length > 5 ? 5 : data.length, li; //var len = data.length > 5 ? 5 : data.length, li;
// 2024/1/9(周二) 去掉5个的限制 // 2024/1/9(周二) 去掉5个的限制
var len = data.length, li; var len = data.length,
for(var i=0; i<len; i++){ li;
for (var i = 0; i < len; i++) {
var item = data[i]; var item = data[i];
if(!(i%2)){ if (!(i % 2)) {
li = document.createElement("li"); li = document.createElement("li");
}; }
var div = document.createElement("div"); var div = document.createElement("div");
// 2024/8/10(周六) 为了缩减设备名称, 类型名称过长超出边界，添加对类型过滤 // 2024/8/10(周六) 为了缩减设备名称, 类型名称过长超出边界，添加对类型过滤
var name = types.find(function(val, i){ var name = types.find(function(val, i) {
if(item.sensroname.includes(val)){ if (item.sensroname.includes(val)) {
return 1; return 1;
}; }
}); });
if(i%2){ if (i % 2) {
//div.innerHTML = '<font>'+item.sensroname+'</font><span>'+item.svalue+'</span>'; //div.innerHTML = '<font>'+item.sensroname+'</font><span>'+item.svalue+'</span>';
div.innerHTML = '<font>'+name+'</font><span>'+item.svalue+'</span>'; div.innerHTML =
}else{ // 左 "<font>" + name + "</font><span>" + item.svalue + "</span>";
} else {
// 左
//div.innerHTML = '<span>'+item.svalue+'</span><font>'+item.sensroname+'</font>'; //div.innerHTML = '<span>'+item.svalue+'</span><font>'+item.sensroname+'</font>';
div.innerHTML = '<span>'+item.svalue+'</span><font>'+name+'</font>'; div.innerHTML =
}; "<span>" + item.svalue + "</span><font>" + name + "</font>";
}
li.appendChild(div); li.appendChild(div);
info.appendChild(li); info.appendChild(li);
}; }
panel.el.innerHTML = ''; panel.el.innerHTML = "";
panel.el.appendChild(info); panel.el.appendChild(info);
}); });
}else if(type === 't_9'){ // 渗流量 } else if (type === "t_9") {
reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{ // 渗流量
reqApi.common.requstEdge("get", item.requrl, param).then(res => {
var data = res.body || {}; var data = res.body || {};
var opts = { var opts = {
chartConfig:{ chartConfig: {
series:[ series: [
{type:'column', color:'#00B2FC'}, { type: "column", color: "#00B2FC" }
//{type:'spline', color:'#FBC000', dashStyle:'ShortDot',} //{type:'spline', color:'#FBC000', dashStyle:'ShortDot',}
], ]
}, }
}; };
Highchart.template.high(panel.el, data, opts); Highchart.template.high(panel.el, data, opts);
}); });
}else if(type === 't_10'){ // 设备信息 } else if (type === "t_10") {
reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{ // 设备信息
var data = res.body || {}, that = this; reqApi.common.requstEdge("get", item.requrl, param).then(res => {
var data = res.body || {},
that = this;
panel.info.sum = data.all; panel.info.sum = data.all;
panel.info.online = data.online; panel.info.online = data.online;
panel.info.offline = data.unline; panel.info.offline = data.unline;
...@@ -447,168 +589,201 @@ export default { ...@@ -447,168 +589,201 @@ export default {
this.currentUnList = data.unlineList; // 存储数据 this.currentUnList = data.unlineList; // 存储数据
this.addLastLiClickEvent(); this.addLastLiClickEvent();
var opts = { var opts = {
chartConfig:{ chartConfig: {
chart: { chart: {
backgroundColor:'transparent', backgroundColor: "transparent",
marginBottom: null, marginBottom: null,
marginLeft: null, marginLeft: null
}, },
title: { title: {
floating:true,
text: '总数<br/>'+data.all,
verticalAlign: 'middle',
y:22,
floating: true, floating: true,
style:{ text: "总数<br/>" + data.all,
color:'#00f6ff', verticalAlign: "middle",
y: 22,
floating: true,
style: {
color: "#00f6ff"
} }
}, },
tooltip: { tooltip: {
formatter: function (e) { formatter: function(e) {
return this.key +'：'+ this.y; return this.key + "：" + this.y;
} }
}, },
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.y}', format: "<b>{point.name}</b>: {point.y}",
style: { style: {
color: 'black' color: "black"
}
} }
},
} }
}, },
series: [{ series: [
type: 'pie', {
innerSize: '70%', type: "pie",
name: '设备数量', innerSize: "70%",
name: "设备数量",
data: [ data: [
{name:'在线', y:data.online, color:'#48abe1'}, { name: "在线", y: data.online, color: "#48abe1" },
{name:'离线', y:data.unline, color:'#064f94'}, { name: "离线", y: data.unline, color: "#064f94" }
], ]
}] }
]
}, },
isSeriesData:true, isSeriesData: true,
type:item.type, type: item.type
}; };
Highchart.template.high(panel.el, data, opts); Highchart.template.high(panel.el, data, opts);
}); });
}else if(type === 't_11'){ // 实时数据 } else if (type === "t_11") {
reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{ // 实时数据
var datas = res.body || {}, target = panel.el; reqApi.common.requstEdge("get", item.requrl, param).then(res => {
var datas = res.body || {},
target = panel.el;
var scrolling = target.parentNode; var scrolling = target.parentNode;
var dataList = []; var dataList = [];
for(var item of datas){ for (var item of datas) {
var data = item.data, time = item.time; var data = item.data,
if(data){ time = item.time;
for(var kitem of item.keys){ if (data) {
for (var kitem of item.keys) {
dataList.push({ dataList.push({
name:item.name+ ' ' + kitem.name, value:data[kitem.key], name: item.name + " " + kitem.name,
unit:item.eqdanwei, value: data[kitem.key],
time:time, unit: item.eqdanwei,
time: time
}); });
}; }
}; }
}; }
// 创建列表 // 创建列表
var frag = document.createDocumentFragment(); var frag = document.createDocumentFragment();
var ul = document.createElement('ul'); var ul = document.createElement("ul");
ul.calssName = 'list'; ul.calssName = "list";
for(var item of dataList){ for (var item of dataList) {
var li = document.createElement('li'); var li = document.createElement("li");
li.innerHTML = '<h5>'+item.name+'</h5><div><span>'+item.value+'</span><font>('+item.unit+')</font></div><font>'+item.time+'</font>'; li.innerHTML =
"<h5>" +
item.name +
"</h5><div><span>" +
item.value +
"</span><font>(" +
item.unit +
")</font></div><font>" +
item.time +
"</font>";
ul.appendChild(li); ul.appendChild(li);
}; }
target.firstElementChild.innerHTML = ''; target.firstElementChild.innerHTML = "";
target.firstElementChild.appendChild(ul); target.firstElementChild.appendChild(ul);
qf.UI.scrollingPreview(scrolling); qf.UI.scrollingPreview(scrolling);
}); });
}else if(type === 't_12'){ // 报警信息 } else if (type === "t_12") {
reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{ // 报警信息
var dataList = res.body || {}, target = panel.el; reqApi.common.requstEdge("get", item.requrl, param).then(res => {
var dataList = res.body || {},
target = panel.el;
var scrolling = target.parentNode; var scrolling = target.parentNode;
// 创建列表 // 创建列表
var frag = document.createDocumentFragment(); var frag = document.createDocumentFragment();
var ul = document.createElement('ul'); var ul = document.createElement("ul");
ul.calssName = 'list'; ul.calssName = "list";
for(var item of dataList){ for (var item of dataList) {
var li = document.createElement('li'); var li = document.createElement("li");
var value = item.evalue + '('+item.eqdanwei+')'; var value = item.evalue + "(" + item.eqdanwei + ")";
li.innerHTML = '<h5><i class="level'+item.alarmlevel+'"></i>'+item.equipname+'</h5><span> '+value+'</span><font>'+item.time+'</font>'; li.innerHTML =
'<h5><i class="level' +
item.alarmlevel +
'"></i>' +
item.equipname +
"</h5><span> " +
value +
"</span><font>" +
item.time +
"</font>";
ul.appendChild(li); ul.appendChild(li);
}; }
target.firstElementChild.innerHTML = ''; target.firstElementChild.innerHTML = "";
target.firstElementChild.appendChild(ul); target.firstElementChild.appendChild(ul);
qf.UI.scrollingPreview(scrolling); qf.UI.scrollingPreview(scrolling);
}); });
}else if(type === 't_13'){ // 实时天气 } else if (type === "t_13") {
// 实时天气
var city = panel.item.city_weather || "weihai"; var city = panel.item.city_weather || "weihai";
var param = {c:'code', a:'getcode', id:48, icon:1, py:city}; var param = { c: "code", a: "getcode", id: 48, icon: 1, py: city };
reqApi.getWeather(param).then((res)=>{ reqApi.getWeather(param).then(res => {
var body = document.createElement("div"); var body = document.createElement("div");
setTimeout(function(){ setTimeout(function() {
body.innerHTML = res; body.innerHTML = res;
var styles = body.querySelectorAll("link"); var styles = body.querySelectorAll("link");
for(var style of styles){ for (var style of styles) {
body.removeChild(style) body.removeChild(style);
}; }
var scripts = body.querySelectorAll("script"); var scripts = body.querySelectorAll("script");
for(var script of scripts){ for (var script of scripts) {
script.parentNode.removeChild(script) script.parentNode.removeChild(script);
}; }
// 查看图片 // 查看图片
var img = body.querySelector("#day_1 .img").firstElementChild; var img = body.querySelector("#day_1 .img").firstElementChild;
img.src = 'http://plugin.tianqistatic.com/static/' + img.src.split('static/')[1]; img.src =
"http://plugin.tianqistatic.com/static/" +
img.src.split("static/")[1];
// 修剪dom // 修剪dom
var mobile05 = body.querySelector("#mobile05"); var mobile05 = body.querySelector("#mobile05");
var mleft = mobile05.firstElementChild; var mleft = mobile05.firstElementChild;
var cityCtn = mleft.firstElementChild; var cityCtn = mleft.firstElementChild;
var cityEl = document.createElement("font"); var cityEl = document.createElement("font");
cityEl.innerText = '('+cityCtn.firstElementChild.innerText+')'; cityEl.innerText =
"(" + cityCtn.firstElementChild.innerText + ")";
mleft.nextElementSibling.firstElementChild.appendChild(cityEl); mleft.nextElementSibling.firstElementChild.appendChild(cityEl);
mobile05.removeChild(mleft); mobile05.removeChild(mleft);
mobile05.removeChild(mobile05.lastElementChild); mobile05.removeChild(mobile05.lastElementChild);
var childs = mobile05.children; var childs = mobile05.children;
for(var child of childs){ for (var child of childs) {
child.innerHTML = child.firstElementChild.innerHTML; child.innerHTML = child.firstElementChild.innerHTML;
} }
panel.el.innerHTML = '<div class="weather" style="padding-top:0.2rem">'+body.innerHTML+'</div>'; panel.el.innerHTML =
'<div class="weather" style="padding-top:0.2rem">' +
body.innerHTML +
"</div>";
}, 300); }, 300);
}); });
}else if(type === 't_14'){ // 视频监控 } else if (type === "t_14") {
// 视频监控
param.id = item.id; param.id = item.id;
reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{ reqApi.common.requstEdge("get", item.requrl, param).then(res => {
var data = res.body || {}; var data = res.body || {};
var vparam = { var vparam = {
id:data.v_id, id: data.v_id,
appKey:data.v_appkey, appKey: data.v_appkey,
appSecret:data.v_appsecret, appSecret: data.v_appsecret,
name:data.v_name, name: data.v_name,
channel:data.v_channel, channel: data.v_channel,
remark:data.v_remark, remark: data.v_remark
}; };
panel.setData(vparam) panel.setData(vparam);
}); });
}else if(type === 't_15'){ // 监测点 } else if (type === "t_15") {
// 监测点
var initModule = () => { var initModule = () => {
reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{ reqApi.common.requstEdge("get", item.requrl, param).then(res => {
var data = res.body || {}; var data = res.body || {};
panel.setData(data, Tools, this.pageApi, initModule) panel.setData(data, Tools, this.pageApi, initModule);
}); });
}; };
initModule(); initModule();
...@@ -617,70 +792,73 @@ export default { ...@@ -617,70 +792,73 @@ export default {
}, function(){ }, function(){
initModule(); initModule();
}) */ }) */
}else if(type === 't_16'){ // 外坡比 } else if (type === "t_16") {
reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{ // 外坡比
reqApi.common.requstEdge("get", item.requrl, param).then(res => {
var data = res.body || {}; var data = res.body || {};
var opts = { var opts = {
chartConfig:{ chartConfig: {
plotOptions: { plotOptions: {
column: { column: {
grouping: false, grouping: false,
shadow: false, shadow: false,
borderWidth: 0 borderWidth: 0
} }
}, }
}, }
}; };
Highchart.template.high(panel.el, data, opts); Highchart.template.high(panel.el, data, opts);
}); });
}else if(type === 't_17'){ // 浸润线剖面 } else if (type === "t_17") {
reqApi.common.requstEdge('get', item.requrl, param).then((res)=>{ // 浸润线剖面
reqApi.common.requstEdge("get", item.requrl, param).then(res => {
var data = res.body || {}; var data = res.body || {};
this.cuCharts(panel.el, data, { this.cuCharts(panel.el, data, {
axisLineWidth:2, axisLineWidth: 2,
axisColor:'pink', axisColor: "pink"
}); });
}); });
}; }
next(); next();
}, function(){}); },
function() {}
);
}, },
// 新增：为 t_10 类下最后一个 li 添加点击事件 // 新增：为 t_10 类下最后一个 li 添加点击事件
addLastLiClickEvent() { addLastLiClickEvent() {
// 定位类名为 t_10 的容器（根据实际 DOM 结构调整选择器） // 定位类名为 t_10 的容器（根据实际 DOM 结构调整选择器）
const t10Container = document.querySelector('.t_10'); const t10Container = document.querySelector(".t_10");
if (!t10Container) return; if (!t10Container) return;
// 获取容器内所有 li 元素 // 获取容器内所有 li 元素
const lis = t10Container.getElementsByTagName('li'); const lis = t10Container.getElementsByTagName("li");
if (lis.length === 0) return; if (lis.length === 0) return;
// 取最后一个 li 元素 // 取最后一个 li 元素
const lastLi = lis[lis.length - 1]; const lastLi = lis[lis.length - 1];
// 添加点击事件 // 添加点击事件
lastLi.addEventListener('click', (event)=> { lastLi.addEventListener("click", event => {
// 点击事件逻辑（示例） // 点击事件逻辑（示例）
this.showUnListModal = true; // 显示模态框 this.showUnListModal = true; // 显示模态框
this.renderUnList() this.renderUnList();
// 可在此处添加自定义业务逻辑（如弹框、数据请求等） // 可在此处添加自定义业务逻辑（如弹框、数据请求等）
}); });
}, },
// 新增：渲染离线设备列表 // 新增：渲染离线设备列表
renderUnList() { renderUnList() {
const container = document.getElementById('unListContainer'); const container = document.getElementById("unListContainer");
container.innerHTML = ''; // 清空旧内容 container.innerHTML = ""; // 清空旧内容
// 创建列表 // 创建列表
const ul = document.createElement('ul'); const ul = document.createElement("ul");
ul.style.listStyle = 'none'; ul.style.listStyle = "none";
ul.style.padding = '0 15px'; ul.style.padding = "0 15px";
this.currentUnList.forEach(item => { this.currentUnList.forEach(item => {
const li = document.createElement('li'); const li = document.createElement("li");
li.style.padding = '8px 0'; li.style.padding = "8px 0";
li.style.borderBottom = '1px solid #e5e5e5'; li.style.borderBottom = "1px solid #e5e5e5";
li.innerHTML = ` li.innerHTML = `
<span style="width: 40%; display: inline-block;">${item.equipname}</span> <span style="width: 40%; display: inline-block;">${item.equipname}</span>
`; `;
...@@ -694,57 +872,628 @@ export default { ...@@ -694,57 +872,628 @@ export default {
closeModal() { closeModal() {
this.showUnListModal = false; this.showUnListModal = false;
}, },
cuCharts(ctn, data, opts){ cuCharts(ctn, data, opts) {
// //
var cuCharts=function(ctn,data,opts){var ctn=this.ctn=typeof element==="string"?document.getElementById(ctn):ctn;if(!ctn)return console.log('%c cuCharts Error Element is a invalid param! ','color:red');var self=this,setDpr=1;var dpr=window.devicePixelRatio||qf.envir.dpr;self.dpr=dpr*setDpr;self.Cache={};!ctn.style.position&&(ctn.style.position='relative');var canvas=this.canvas=document.createElement("canvas");canvas.style.cssText='position:absolute;height:100%;width:100%;';this.ctx=canvas.getContext("2d");ctn.appendChild(canvas);var defaults=this.defaults={altitude:1000,damHeight:data.dissect.height||100,damWidth:data.dissect.width||100,axisLineWidth:6,axisColor:'red',margin:{top:14,right:0,bottom:0,left:18},};var left=defaults.margin.left*this.dpr,top=defaults.margin.top*this.dpr,right=defaults.margin.right*this.dpr,bottom=defaults.margin.bottom*this.dpr;this.ladders=data.steps||[];this.devices=this.formatDeviceParam(data.devices);var ladderInfo=this.discernDamHeight(this.ladders);this.options={damWidth:defaults.damWidth,damHeight:ladderInfo.damHeight,axisLineWidth:defaults.axisLineWidth||6,stepAverageHeight:ladderInfo.averageHeight,initX:defaults.margin.left*dpr+(defaults.axisLineWidth/2),initY:defaults.margin.top*dpr,bottomDist:defaults.margin.bottom*dpr,rightDist:defaults.margin.right*dpr,waterArea:{startAngle:data.dissect.sdeg,radius:data.dissect.diameter},alarm:data.alarm,axisLineWidth:opts.axisLineWidth||defaults.axisLineWidth,axisColor:opts.axisColor||defaults.axisColor,};this.init()};cuCharts.prototype={init:function(){this.setModule();this.onresize()},drawAxis:function(color,damHeight){var lw=this.options.axisLineWidth;var wHalf=lw/2;var initX=this.options.initX;var endX=this.options.endX;var endY=this.options.endY;var axisYSX=initX-wHalf;var axisXEY=endY+lw;var axisYEY=endY+wHalf;this.drawLiner({sx:axisYSX,sy:0,ex:axisYSX,ey:axisXEY,width:lw,color:color});var fontY=~~(this.options.damPxHeight/2+this.options.initY);var fontSize=12;var axisXText='剖面高度'+~~damHeight+'米';this.drawText({x:this.options.initY/2+2,y:fontY,size:fontSize,width:fontSize*this.dpr,text:axisXText,color:'#fff',align:'center',vertical:'center',});this.drawLiner({sx:initX,sy:axisYEY,ex:endX,ey:axisYEY,width:lw,color:color})},drawSteps:function(ladders){ladders=ladders||[0];var initX=this.options.initX,initY=this.options.initY;var cumulationX=initX,cumulationY=initY;var damLength=this.options.endX;var damDepth=this.options.endY;var pxRetioY=this.options.pxRetioY;var averageHeight=this.options.stepAverageHeight*pxRetioY;var damPxWidth=this.options.damPxWidth;var damPxHeight=this.options.damPxHeight;var len=ladders.length;var stepWidth=damPxWidth/(len+0);var stepHeight=damPxHeight/(len+0);var slopeRatio=damPxHeight/damPxWidth;var maxStepDepth={ratio:slopeRatio};this.Cache.ladders=[];for(var i=0;i<len;i++){var item=ladders[i];var setWidth=item.width*this.dpr*this.options.pxRetioX;var setHeight=item.height*pxRetioY||averageHeight;var slope=item.slope||0;var aCoord=this.byAngleAndHeightToCoord(slope,setHeight);var fEndX,fEndY;if(setWidth){fEndX=cumulationX+setWidth;stepWidth=(damLength-(cumulationX+setWidth+aCoord.x*this.dpr))/(len-(i+1))}else{fEndX=cumulationX+(stepWidth-aCoord.x*this.dpr)};if(setHeight){fEndY=cumulationY+setHeight;stepHeight=(damDepth-(cumulationY+setHeight))/(len-(i+1))}else{fEndY=cumulationY+stepHeight};var lEndX=fEndX+aCoord.x*this.dpr,lEndY=fEndY+aCoord.y*this.dpr;var stepDepthRatio=(damDepth-~~lEndY)/(damLength-lEndX);if(stepDepthRatio&&stepDepthRatio<maxStepDepth.ratio&&i<len-1){maxStepDepth={ratio:stepDepthRatio,x:lEndX,y:lEndY,}};this.drawLiner({sx:cumulationX,sy:cumulationY,ex:fEndX,ey:cumulationY,width:2,color:"#8b8b8b"});this.drawLiner({sx:fEndX,sy:cumulationY,ex:lEndX,ey:lEndY,width:2,color:"#8b8b8b"});this.Cache.ladders[i]={sx:cumulationX,sy:cumulationY,ex:fEndX,ey:cumulationY,slope:slope,slopeX:lEndX,slopeY:lEndY,xy:aCoord.xy};cumulationX=lEndX;cumulationY=lEndY};this.drawLiner({sx:cumulationX,sy:cumulationY,ex:damLength,ey:damDepth,width:2,color:"#8b8b8b"});var damHeight=(cumulationY-this.options.initY)/pxRetioY;return maxStepDepth.damHeight=damHeight,maxStepDepth},drawDevice:function(list){var lineW=4*this.dpr,deviceW=6*this.dpr,deviceH=3*this.dpr;var initX=this.options.initX;var endX=this.options.endX;var endY=this.options.endY;var ladders=this.Cache.ladders||[];var fontSize=11;var fontTopDev=fontSize*this.dpr+3;this.options.deviceCoords=[];for(var device of list){var holeX=~~(endX-device.x*this.options.pxRetioX);var depthText='埋深'+device.depth+'米';var holeDistY=device.holeDepth*this.options.pxRetioY;var deviceY=device.value*this.options.pxRetioY;var ladderSY=this.xPixelToStepsYPixel(holeX);this.drawText({x:holeX,y:ladderSY-fontTopDev,size:fontSize,text:depthText,color:'red',align:'center',});var holeEndY=ladderSY+holeDistY;holeEndY=holeEndY>endY?endY:holeEndY;this.drawLiner({sx:holeX,sy:ladderSY,ex:holeX,ey:holeEndY,width:lineW,color:"grey"});var deviceLY=ladderSY+deviceY;var deviceEY=deviceLY+(deviceH/2);var deviceSY=deviceEY-deviceH;this.drawLiner({sx:holeX,sy:deviceSY,ex:holeX,ey:deviceEY,width:deviceW,color:"#3403CB"});this.options.deviceCoords.push({x:holeX,y:deviceLY,stepY:ladderSY});var valFont=11;var valueSY=~~(deviceSY-valFont*this.dpr-6);var text='水位值'+device.waterValue+'米';this.drawText({x:holeX,y:valueSY,size:valFont,text:text,color:'white',align:'center',})}},drawAlarmLine:function(alarms,Steps){var alarmValues=alarms.value;var alarmLevel=alarms.alarmLevel;var deviceCoords=this.options.deviceCoords||[];var deviceSX=deviceCoords[0].x;var deviceSY=deviceCoords[0].y;var initX=this.options.initX;var initY=this.options.initY;var endY=this.options.endY;var endX=this.options.endX;var alarmLevelNum=['red','orange','yellow','blue']||Object.keys(alarmValues);var alarmLine={};var level=(~~alarmLevel||alarmLevelNum.length+1)-1;var nearLevel=level?level-1:level;var alarm=alarmLevelNum[level];var nearAlarm=alarmLevelNum[nearLevel];alarmLine[nearAlarm]=alarmValues[nearAlarm];if(alarm){alarmLine[alarm]=alarmValues[alarm]};var alarmRealParam=this.getAlarmRealParam(Object.values(alarmLine))||Steps.ratio;var deviceSlopeRatio=alarmRealParam.ratio;for(var key in alarmLine){var value=alarmValues[key];if(key){var ladderSY=this.xPixelToStepsYPixel(deviceSX)-initX+6;var lineSY=(value*this.options.pxRetioY+ladderSY)-(deviceSX-initX)*deviceSlopeRatio;var lineEX=(endY-lineSY)/deviceSlopeRatio;this.drawLiner({sx:initX,sy:lineSY+initY,ex:lineEX,ey:endY,width:2,color:key})}}},getCirHeightDev:function(r,x){return r-Math.sqrt(Math.pow(r,2)-Math.pow(x,2))},drawWaterArea:function(depth){depth=100;var startAngle=this.options.waterArea.startAngle;var radiusMultiple=this.options.waterArea.radius;var angleRatio=90/0.5;var initArc=startAngle/angleRatio;var ctx=this.ctx,initX=this.options.initX;var arcOrigin=1.50,arcStart=arcOrigin+initArc;var sAngle=(arcStart-arcOrigin)*angleRatio;var r1=this.options['damPxWidth']*radiusMultiple;var waterApexToAxisXDist=Math.sin(sAngle*0.017453293)*r1;var sAngleToTopSpotDist=(r1-(Math.cos(sAngle*0.017453293)*r1));var depth=(depth||30)*this.options.pxRetioY+sAngleToTopSpotDist;var firstDeviceX=this.devices[0].x*this.options.pxRetioX;var ladderSY=this.xPixelToStepsYPixel(firstDeviceX+initX)-initX+6;var deviceToAxisXDist=firstDeviceX+waterApexToAxisXDist;var deviceToAxisYDist=Math.sqrt(r1*r1-deviceToAxisXDist*deviceToAxisXDist);var deviceAreaToApexDev=r1-deviceToAxisYDist-sAngleToTopSpotDist-ladderSY;var firstDeviceY=this.options.damPxHeight-this.devices[0].value*this.options.pxRetioY;firstDeviceY+=deviceAreaToApexDev;var ry=r1+this.options.endY-sAngleToTopSpotDist-firstDeviceY;var lineToY=r1-sAngleToTopSpotDist-firstDeviceY;var eAngle=Math.acos(lineToY/r1)/0.017453293;var arcEnd=eAngle/angleRatio+arcOrigin;ctx.beginPath();ctx.arc(initX-waterApexToAxisXDist,ry,r1,arcStart*Math.PI,arcEnd*Math.PI,false);ctx.lineTo(initX,ry-lineToY);ctx.fillStyle='#00A2E8';ctx.fill()},byAngleAndHeightToCoord:function(angle,height){var devX=Math.tan(angle*0.017453293)*height;var xy=height/Math.cos(angle*0.017453293);var devY=height-devX;var yRatio=height/devX;var x=0,y=0;if(angle>50){x=height,y=devY*yRatio}else{x=devX,y=0};return{x:x,y:y,xy:xy}},discernDamHeight(list){var not=0,set=0,sum=0;for(var item of list){var height=item.height;height?(set++,sum+=height):not++};var damHeight=not?this.defaults.damHeight:sum;var averageHeight=(damHeight-sum)/not;return{averageHeight:averageHeight,damHeight:damHeight}},setModule:function(){this.ctx.clearRect(0,0,this.SumWidth,this.SumHeight);var canvas=this.canvas;var SumWidth=this.SumWidth=(this.ctn.clientWidth*this.dpr)-this.ctn.clientLeft-0;var SumHeight=this.SumHeight=this.ctn.clientHeight*this.dpr-this.ctn.clientTop-0;canvas.width=SumWidth*this.dpr;canvas.height=SumHeight*this.dpr;canvas.style.cssText='position:absolute;top:0;left:0;height:'+(SumHeight)+'px;width:'+SumWidth+'px;user-select: none;-webkit-tap-highlight-color:rgba(0,0,0,0);padding:0;margin:0;border-width:0;box-sizing: border-box;';var top=this.options.initY,left=this.options.initX,bottom=this.options.bottomDist,right=this.options.rightDist;var damPxWidth=SumWidth-(right+left),damPxHeight=SumHeight-(bottom+top+this.options.axisLineWidth),endX=SumWidth-right,endY=SumHeight-bottom-this.options.axisLineWidth;this.options['endX']=endX;this.options['endY']=endY;this.options['damPxWidth']=damPxWidth;this.options['damPxHeight']=damPxHeight;this.options['pxRetioX']=damPxWidth/this.defaults.damWidth;this.options['pxRetioY']=damPxHeight/this.options.damHeight;this.options['HWRation']=(endY-top)/(endX-left);this.drawChart()},formatDeviceParam:function(devices){var devices=devices||[];var arr=[];for(var item of devices){arr.push({x:item.jrx_coord_x,holeDepth:item.jrx_trepanning,value:item.depth,depth:item.jrx_burial,waterValue:item.stage})};return arr},getAlarmRealParam:function(aValues){var aval=aValues[0];var coords=this.options.deviceCoords||[];var valY=aval*this.options.pxRetioY;var sy=valY+coords[0].stepY,sx=coords[0].x,ey=0,ex=0;var len=coords.length;for(var i=1;i<len;i++){var item=coords[i];ey=valY+item.stepY,ex=item.x};return{ratio:(ey-sy)/(ex-sx),sy:sy,ey:ey}},drawChart:function(){var Steps=this.drawSteps(this.ladders);this.drawAxis(this.options.axisColor,Steps.damHeight);var depth=55;this.drawWaterArea(depth);this.drawDevice(this.devices);this.drawAlarmLine(this.options.alarm,Steps)},onresize:function(){qf.resize(()=>{this.setModule()})},updateData:function(data){data=data||{};this.stations=data.stations||this.stations;this.points=data.points||this.points;this.draw(this.cacheX+this.destX,true)},drawLiner:function(o){var ctx=this.ctx;ctx.beginPath();ctx.moveTo(o.sx,o.sy);ctx.lineTo(o.ex,o.ey);ctx.lineWidth=o.width;ctx.strokeStyle=o.color;ctx.stroke()},drawText:function(o){var ctx=this.ctx;var fontSize=(o.size||14)*this.dpr;var text=o.text||'';var textWidth=this.getTextWidth(text,fontSize);var width=o.width||textWidth;var align=o.align||'normal';ctx.font='normal '+fontSize+"px 'Open Sans', 'PingFang SC', Helvetica, Arial, sans-serif";var rows=[];if(width&&~~width<textWidth){var str='',texts=text.split("");for(var word of texts){var testStr=str+word;var testWidth=ctx.measureText(testStr).width;if(testWidth>width){rows.push(str);str=word}else{if(testWidth===width){rows.push(testStr);str=''}else{str=testStr}}};str&&rows.push(str)}else{rows=text.split(/\r\n|\n/g)};var rlen=rows.length,sumHeight=(rlen+1)*fontSize;var x=o.x;var y=o.vertical==='center'?o.y-(sumHeight/2):o.y;var color=o.randomColor?this.getRandomColor():o.color||'red';var lsx=x,lsy=y;for(var b=0;b<rlen;b++){if(align==='center'){var textW=this.getTextWidth(rows[b],fontSize);lsx=x-(textW/2)};lsy=(b+1)*fontSize;ctx.lineHeight=1;ctx.fillStyle=color;ctx.fillText(rows[b],~~lsx+0.5,y+(~~lsy)+0.5)}},getTextWidth:function(text,fontSize){return(this.ctx.measureText(text).width/parseInt(this.ctx.font))*fontSize},drawImg:function(img,x,y,w,h){x=x-w/2;y=y-h;ctx.drawImage(img,x,y,w,h)},getRandomColor:function(){return"#"+Math.floor(Math.random()*16777215).toString(16)},getEventTarget:function(x,y){if(y>bottomReferY-imgA.height-1&&y<bottomReferY+1){var arr=this.points;var i=arr.length-1,obj,halfW=imgA.width/2-1;while(obj=arr[i]){var ix=this.getDrawDoord(obj.x*1);if(Math.abs(ix-x)<halfW){return obj};i--}};if(y>bottomReferY-imgB.height-1&&y<bottomReferY+1){var arr=this.stations;var i=arr.length-1,obj,halfW=imgA.width/2-1;while(obj=arr[i]){var ix=this.getDrawDoord(obj.x*1);if(Math.abs(ix-x)<halfW){return obj};i--}}},xPixelToStepsYPixel:function(x){var ladders=this.Cache.ladders||[],ladderSY=0;for(var ladder of ladders){if(x>=ladder.sx&&x<ladder.slopeX){if(x<ladder.ex){ladderSY=ladder.sy}else{var slopeWidth=ladder.slopeX-ladder.ex;var slopeHeight=ladder.slopeY-ladder.ey;ladderSY=(x-ladder.ex)*(slopeHeight/slopeWidth)+ladder.ey}}};return ladderSY},};return new cuCharts(ctn,data,opts); var cuCharts = function(ctn, data, opts) {
var ctn = (this.ctn =
typeof element === "string" ? document.getElementById(ctn) : ctn);
if (!ctn)
return console.log(
"%c cuCharts Error Element is a invalid param! ",
"color:red"
);
var self = this,
setDpr = 1;
var dpr = window.devicePixelRatio || qf.envir.dpr;
self.dpr = dpr * setDpr;
self.Cache = {};
!ctn.style.position && (ctn.style.position = "relative");
var canvas = (this.canvas = document.createElement("canvas"));
canvas.style.cssText = "position:absolute;height:100%;width:100%;";
this.ctx = canvas.getContext("2d");
ctn.appendChild(canvas);
var defaults = (this.defaults = {
altitude: 1000,
damHeight: data.dissect.height || 100,
damWidth: data.dissect.width || 100,
axisLineWidth: 6,
axisColor: "red",
margin: { top: 14, right: 0, bottom: 0, left: 18 }
});
var left = defaults.margin.left * this.dpr,
top = defaults.margin.top * this.dpr,
right = defaults.margin.right * this.dpr,
bottom = defaults.margin.bottom * this.dpr;
this.ladders = data.steps || [];
this.devices = this.formatDeviceParam(data.devices);
var ladderInfo = this.discernDamHeight(this.ladders);
this.options = {
damWidth: defaults.damWidth,
damHeight: ladderInfo.damHeight,
axisLineWidth: defaults.axisLineWidth || 6,
stepAverageHeight: ladderInfo.averageHeight,
initX: defaults.margin.left * dpr + defaults.axisLineWidth / 2,
initY: defaults.margin.top * dpr,
bottomDist: defaults.margin.bottom * dpr,
rightDist: defaults.margin.right * dpr,
waterArea: {
startAngle: data.dissect.sdeg,
radius: data.dissect.diameter
}, },
alarm: data.alarm,
mapOnload(){ axisLineWidth: opts.axisLineWidth || defaults.axisLineWidth,
axisColor: opts.axisColor || defaults.axisColor
};
this.init();
};
cuCharts.prototype = {
init: function() {
this.setModule();
this.onresize();
},
drawAxis: function(color, damHeight) {
var lw = this.options.axisLineWidth;
var wHalf = lw / 2;
var initX = this.options.initX;
var endX = this.options.endX;
var endY = this.options.endY;
var axisYSX = initX - wHalf;
var axisXEY = endY + lw;
var axisYEY = endY + wHalf;
this.drawLiner({
sx: axisYSX,
sy: 0,
ex: axisYSX,
ey: axisXEY,
width: lw,
color: color
});
var fontY = ~~(this.options.damPxHeight / 2 + this.options.initY);
var fontSize = 12;
var axisXText = "剖面高度" + ~~damHeight + "米";
this.drawText({
x: this.options.initY / 2 + 2,
y: fontY,
size: fontSize,
width: fontSize * this.dpr,
text: axisXText,
color: "#fff",
align: "center",
vertical: "center"
});
this.drawLiner({
sx: initX,
sy: axisYEY,
ex: endX,
ey: axisYEY,
width: lw,
color: color
});
}, },
drawSteps: function(ladders) {
ladders = ladders || [0];
var initX = this.options.initX,
initY = this.options.initY;
var cumulationX = initX,
cumulationY = initY;
var damLength = this.options.endX;
var damDepth = this.options.endY;
var pxRetioY = this.options.pxRetioY;
var averageHeight = this.options.stepAverageHeight * pxRetioY;
var damPxWidth = this.options.damPxWidth;
var damPxHeight = this.options.damPxHeight;
var len = ladders.length;
var stepWidth = damPxWidth / (len + 0);
var stepHeight = damPxHeight / (len + 0);
var slopeRatio = damPxHeight / damPxWidth;
var maxStepDepth = { ratio: slopeRatio };
this.Cache.ladders = [];
for (var i = 0; i < len; i++) {
var item = ladders[i];
var setWidth = item.width * this.dpr * this.options.pxRetioX;
var setHeight = item.height * pxRetioY || averageHeight;
var slope = item.slope || 0;
var aCoord = this.byAngleAndHeightToCoord(slope, setHeight);
var fEndX, fEndY;
if (setWidth) {
fEndX = cumulationX + setWidth;
stepWidth =
(damLength - (cumulationX + setWidth + aCoord.x * this.dpr)) /
(len - (i + 1));
} else {
fEndX = cumulationX + (stepWidth - aCoord.x * this.dpr);
}
if (setHeight) {
fEndY = cumulationY + setHeight;
stepHeight =
(damDepth - (cumulationY + setHeight)) / (len - (i + 1));
} else {
fEndY = cumulationY + stepHeight;
}
var lEndX = fEndX + aCoord.x * this.dpr,
lEndY = fEndY + aCoord.y * this.dpr;
var stepDepthRatio = (damDepth - ~~lEndY) / (damLength - lEndX);
if (
stepDepthRatio &&
stepDepthRatio < maxStepDepth.ratio &&
i < len - 1
) {
maxStepDepth = { ratio: stepDepthRatio, x: lEndX, y: lEndY };
}
this.drawLiner({
sx: cumulationX,
sy: cumulationY,
ex: fEndX,
ey: cumulationY,
width: 2,
color: "#8b8b8b"
});
this.drawLiner({
sx: fEndX,
sy: cumulationY,
ex: lEndX,
ey: lEndY,
width: 2,
color: "#8b8b8b"
});
this.Cache.ladders[i] = {
sx: cumulationX,
sy: cumulationY,
ex: fEndX,
ey: cumulationY,
slope: slope,
slopeX: lEndX,
slopeY: lEndY,
xy: aCoord.xy
};
cumulationX = lEndX;
cumulationY = lEndY;
}
this.drawLiner({
sx: cumulationX,
sy: cumulationY,
ex: damLength,
ey: damDepth,
width: 2,
color: "#8b8b8b"
});
var damHeight = (cumulationY - this.options.initY) / pxRetioY;
return (maxStepDepth.damHeight = damHeight), maxStepDepth;
},
drawDevice: function(list) {
var lineW = 4 * this.dpr,
deviceW = 6 * this.dpr,
deviceH = 3 * this.dpr;
var initX = this.options.initX;
var endX = this.options.endX;
var endY = this.options.endY;
var ladders = this.Cache.ladders || [];
var fontSize = 11;
var fontTopDev = fontSize * this.dpr + 3;
this.options.deviceCoords = [];
for (var device of list) {
var holeX = ~~(endX - device.x * this.options.pxRetioX);
var depthText = "埋深" + device.depth + "米";
var holeDistY = device.holeDepth * this.options.pxRetioY;
var deviceY = device.value * this.options.pxRetioY;
var ladderSY = this.xPixelToStepsYPixel(holeX);
this.drawText({
x: holeX,
y: ladderSY - fontTopDev,
size: fontSize,
text: depthText,
color: "red",
align: "center"
});
var holeEndY = ladderSY + holeDistY;
holeEndY = holeEndY > endY ? endY : holeEndY;
this.drawLiner({
sx: holeX,
sy: ladderSY,
ex: holeX,
ey: holeEndY,
width: lineW,
color: "grey"
});
var deviceLY = ladderSY + deviceY;
var deviceEY = deviceLY + deviceH / 2;
var deviceSY = deviceEY - deviceH;
this.drawLiner({
sx: holeX,
sy: deviceSY,
ex: holeX,
ey: deviceEY,
width: deviceW,
color: "#3403CB"
});
this.options.deviceCoords.push({
x: holeX,
y: deviceLY,
stepY: ladderSY
});
var valFont = 11;
var valueSY = ~~(deviceSY - valFont * this.dpr - 6);
var text = "水位值" + device.waterValue + "米";
this.drawText({
x: holeX,
y: valueSY,
size: valFont,
text: text,
color: "white",
align: "center"
});
}
},
drawAlarmLine: function(alarms, Steps) {
var alarmValues = alarms.value;
var alarmLevel = alarms.alarmLevel;
var deviceCoords = this.options.deviceCoords || [];
var deviceSX = deviceCoords[0].x;
var deviceSY = deviceCoords[0].y;
var initX = this.options.initX;
var initY = this.options.initY;
var endY = this.options.endY;
var endX = this.options.endX;
var alarmLevelNum =
["red", "orange", "yellow", "blue"] || Object.keys(alarmValues);
var alarmLine = {};
var level = (~~alarmLevel || alarmLevelNum.length + 1) - 1;
var nearLevel = level ? level - 1 : level;
var alarm = alarmLevelNum[level];
var nearAlarm = alarmLevelNum[nearLevel];
alarmLine[nearAlarm] = alarmValues[nearAlarm];
if (alarm) {
alarmLine[alarm] = alarmValues[alarm];
}
var alarmRealParam =
this.getAlarmRealParam(Object.values(alarmLine)) || Steps.ratio;
var deviceSlopeRatio = alarmRealParam.ratio;
for (var key in alarmLine) {
var value = alarmValues[key];
if (key) {
var ladderSY = this.xPixelToStepsYPixel(deviceSX) - initX + 6;
var lineSY =
value * this.options.pxRetioY +
ladderSY -
(deviceSX - initX) * deviceSlopeRatio;
var lineEX = (endY - lineSY) / deviceSlopeRatio;
this.drawLiner({
sx: initX,
sy: lineSY + initY,
ex: lineEX,
ey: endY,
width: 2,
color: key
});
}
}
},
getCirHeightDev: function(r, x) {
return r - Math.sqrt(Math.pow(r, 2) - Math.pow(x, 2));
},
drawWaterArea: function(depth) {
depth = 100;
var startAngle = this.options.waterArea.startAngle;
var radiusMultiple = this.options.waterArea.radius;
var angleRatio = 90 / 0.5;
var initArc = startAngle / angleRatio;
var ctx = this.ctx,
initX = this.options.initX;
var arcOrigin = 1.5,
arcStart = arcOrigin + initArc;
var sAngle = (arcStart - arcOrigin) * angleRatio;
var r1 = this.options["damPxWidth"] * radiusMultiple;
var waterApexToAxisXDist = Math.sin(sAngle * 0.017453293) * r1;
var sAngleToTopSpotDist = r1 - Math.cos(sAngle * 0.017453293) * r1;
var depth =
(depth || 30) * this.options.pxRetioY + sAngleToTopSpotDist;
var firstDeviceX = this.devices[0].x * this.options.pxRetioX;
var ladderSY =
this.xPixelToStepsYPixel(firstDeviceX + initX) - initX + 6;
var deviceToAxisXDist = firstDeviceX + waterApexToAxisXDist;
var deviceToAxisYDist = Math.sqrt(
r1 * r1 - deviceToAxisXDist * deviceToAxisXDist
);
var deviceAreaToApexDev =
r1 - deviceToAxisYDist - sAngleToTopSpotDist - ladderSY;
var firstDeviceY =
this.options.damPxHeight -
this.devices[0].value * this.options.pxRetioY;
firstDeviceY += deviceAreaToApexDev;
var ry = r1 + this.options.endY - sAngleToTopSpotDist - firstDeviceY;
var lineToY = r1 - sAngleToTopSpotDist - firstDeviceY;
var eAngle = Math.acos(lineToY / r1) / 0.017453293;
var arcEnd = eAngle / angleRatio + arcOrigin;
ctx.beginPath();
ctx.arc(
initX - waterApexToAxisXDist,
ry,
r1,
arcStart * Math.PI,
arcEnd * Math.PI,
false
);
ctx.lineTo(initX, ry - lineToY);
ctx.fillStyle = "#00A2E8";
ctx.fill();
},
byAngleAndHeightToCoord: function(angle, height) {
var devX = Math.tan(angle * 0.017453293) * height;
var xy = height / Math.cos(angle * 0.017453293);
var devY = height - devX;
var yRatio = height / devX;
var x = 0,
y = 0;
if (angle > 50) {
(x = height), (y = devY * yRatio);
} else {
(x = devX), (y = 0);
}
return { x: x, y: y, xy: xy };
},
discernDamHeight(list) {
var not = 0,
set = 0,
sum = 0;
for (var item of list) {
var height = item.height;
height ? (set++, (sum += height)) : not++;
}
var damHeight = not ? this.defaults.damHeight : sum;
var averageHeight = (damHeight - sum) / not;
return { averageHeight: averageHeight, damHeight: damHeight };
},
setModule: function() {
this.ctx.clearRect(0, 0, this.SumWidth, this.SumHeight);
var canvas = this.canvas;
var SumWidth = (this.SumWidth =
this.ctn.clientWidth * this.dpr - this.ctn.clientLeft - 0);
var SumHeight = (this.SumHeight =
this.ctn.clientHeight * this.dpr - this.ctn.clientTop - 0);
canvas.width = SumWidth * this.dpr;
canvas.height = SumHeight * this.dpr;
canvas.style.cssText =
"position:absolute;top:0;left:0;height:" +
SumHeight +
"px;width:" +
SumWidth +
"px;user-select: none;-webkit-tap-highlight-color:rgba(0,0,0,0);padding:0;margin:0;border-width:0;box-sizing: border-box;";
var top = this.options.initY,
left = this.options.initX,
bottom = this.options.bottomDist,
right = this.options.rightDist;
var damPxWidth = SumWidth - (right + left),
damPxHeight =
SumHeight - (bottom + top + this.options.axisLineWidth),
endX = SumWidth - right,
endY = SumHeight - bottom - this.options.axisLineWidth;
this.options["endX"] = endX;
this.options["endY"] = endY;
this.options["damPxWidth"] = damPxWidth;
this.options["damPxHeight"] = damPxHeight;
this.options["pxRetioX"] = damPxWidth / this.defaults.damWidth;
this.options["pxRetioY"] = damPxHeight / this.options.damHeight;
this.options["HWRation"] = (endY - top) / (endX - left);
this.drawChart();
},
formatDeviceParam: function(devices) {
var devices = devices || [];
var arr = [];
for (var item of devices) {
arr.push({
x: item.jrx_coord_x,
holeDepth: item.jrx_trepanning,
value: item.depth,
depth: item.jrx_burial,
waterValue: item.stage
});
}
return arr;
},
getAlarmRealParam: function(aValues) {
var aval = aValues[0];
var coords = this.options.deviceCoords || [];
var valY = aval * this.options.pxRetioY;
var sy = valY + coords[0].stepY,
sx = coords[0].x,
ey = 0,
ex = 0;
var len = coords.length;
for (var i = 1; i < len; i++) {
var item = coords[i];
(ey = valY + item.stepY), (ex = item.x);
}
return { ratio: (ey - sy) / (ex - sx), sy: sy, ey: ey };
},
drawChart: function() {
var Steps = this.drawSteps(this.ladders);
this.drawAxis(this.options.axisColor, Steps.damHeight);
var depth = 55;
this.drawWaterArea(depth);
this.drawDevice(this.devices);
this.drawAlarmLine(this.options.alarm, Steps);
},
onresize: function() {
qf.resize(() => {
this.setModule();
});
},
updateData: function(data) {
data = data || {};
this.stations = data.stations || this.stations;
this.points = data.points || this.points;
this.draw(this.cacheX + this.destX, true);
},
drawLiner: function(o) {
var ctx = this.ctx;
ctx.beginPath();
ctx.moveTo(o.sx, o.sy);
ctx.lineTo(o.ex, o.ey);
ctx.lineWidth = o.width;
ctx.strokeStyle = o.color;
ctx.stroke();
},
drawText: function(o) {
var ctx = this.ctx;
var fontSize = (o.size || 14) * this.dpr;
var text = o.text || "";
var textWidth = this.getTextWidth(text, fontSize);
var width = o.width || textWidth;
var align = o.align || "normal";
ctx.font =
"normal " +
fontSize +
"px 'Open Sans', 'PingFang SC', Helvetica, Arial, sans-serif";
var rows = [];
if (width && ~~width < textWidth) {
var str = "",
texts = text.split("");
for (var word of texts) {
var testStr = str + word;
var testWidth = ctx.measureText(testStr).width;
if (testWidth > width) {
rows.push(str);
str = word;
} else {
if (testWidth === width) {
rows.push(testStr);
str = "";
} else {
str = testStr;
}
}
}
str && rows.push(str);
} else {
rows = text.split(/\r\n|\n/g);
}
var rlen = rows.length,
sumHeight = (rlen + 1) * fontSize;
var x = o.x;
var y = o.vertical === "center" ? o.y - sumHeight / 2 : o.y;
var color = o.randomColor ? this.getRandomColor() : o.color || "red";
var lsx = x,
lsy = y;
for (var b = 0; b < rlen; b++) {
if (align === "center") {
var textW = this.getTextWidth(rows[b], fontSize);
lsx = x - textW / 2;
}
lsy = (b + 1) * fontSize;
ctx.lineHeight = 1;
ctx.fillStyle = color;
ctx.fillText(rows[b], ~~lsx + 0.5, y + ~~lsy + 0.5);
}
},
getTextWidth: function(text, fontSize) {
return (
(this.ctx.measureText(text).width / parseInt(this.ctx.font)) *
fontSize
);
},
drawImg: function(img, x, y, w, h) {
x = x - w / 2;
y = y - h;
ctx.drawImage(img, x, y, w, h);
},
getRandomColor: function() {
return "#" + Math.floor(Math.random() * 16777215).toString(16);
},
getEventTarget: function(x, y) {
if (y > bottomReferY - imgA.height - 1 && y < bottomReferY + 1) {
var arr = this.points;
var i = arr.length - 1,
obj,
halfW = imgA.width / 2 - 1;
while ((obj = arr[i])) {
var ix = this.getDrawDoord(obj.x * 1);
if (Math.abs(ix - x) < halfW) {
return obj;
}
i--;
}
}
if (y > bottomReferY - imgB.height - 1 && y < bottomReferY + 1) {
var arr = this.stations;
var i = arr.length - 1,
obj,
halfW = imgA.width / 2 - 1;
while ((obj = arr[i])) {
var ix = this.getDrawDoord(obj.x * 1);
if (Math.abs(ix - x) < halfW) {
return obj;
}
i--;
}
}
},
xPixelToStepsYPixel: function(x) {
var ladders = this.Cache.ladders || [],
ladderSY = 0;
for (var ladder of ladders) {
if (x >= ladder.sx && x < ladder.slopeX) {
if (x < ladder.ex) {
ladderSY = ladder.sy;
} else {
var slopeWidth = ladder.slopeX - ladder.ex;
var slopeHeight = ladder.slopeY - ladder.ey;
ladderSY =
(x - ladder.ex) * (slopeHeight / slopeWidth) + ladder.ey;
}
}
}
return ladderSY;
}
};
return new cuCharts(ctn, data, opts);
},
mapOnload() {},
openRelieveAlarm(params, fn, close){ openRelieveAlarm(params, fn, close) {
var self = this; var self = this;
qf.UI.popupLayer({ qf.UI.popupLayer({
title:'解除报警', title: "解除报警",
className:'screenAlart', className: "screenAlart",
closeBtnColor:'#eee', closeBtnColor: "#eee",
html:'<div class="item"><span>解除时长(小时)：</span><input data-name="jchours" value=12 placeholder="请输入解除时长"/></div><div class="item"><span>报警原因：</span><input data-name="reason" placeholder="报警原因"/></div><div class="item"><span>解除报警原因：</span><input data-name="jcreason" placeholder="解除报警原因"/></div>', html:
confirm: function(el){ '<div class="item"><span>解除时长(小时)：</span><input data-name="jchours" value=12 placeholder="请输入解除时长"/></div><div class="item"><span>报警原因：</span><input data-name="reason" placeholder="报警原因"/></div><div class="item"><span>解除报警原因：</span><input data-name="jcreason" placeholder="解除报警原因"/></div>',
confirm: function(el) {
var inputs = el.querySelectorAll("input"); var inputs = el.querySelectorAll("input");
for(var el of inputs){ for (var el of inputs) {
var key = el.dataset.name; var key = el.dataset.name;
var val = el.value; var val = el.value;
if(key === 'jchours'){ if (key === "jchours") {
val = parseInt(val) || 12; val = parseInt(val) || 12;
}else{ } else {
val = val || '默认原因！'; val = val || "默认原因！";
}; }
params[key] = val; params[key] = val;
}; }
// 解除 // 解除
self.pageApi.relieveAlarm(params).then((res)=>{ self.pageApi.relieveAlarm(params).then(res => {
//if(res.code === 200){}; //if(res.code === 200){};
fn && fn() fn && fn();
}); });
}, },
close: function(){ close: function() {
close && close() close && close();
}, }
}); });
}, }
}, }
} };
</script> </script>
<style lang="scss" scope> <style lang="scss" scope>
/* 新增原生模态框样式 */ /* 新增原生模态框样式 */
.t_10{ .t_10 {
li:last-child{ li:last-child {
cursor: pointer; cursor: pointer;
} }
} }
.native-modal { .native-modal {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
...@@ -752,19 +1501,19 @@ export default { ...@@ -752,19 +1501,19 @@ export default {
height: 100%; height: 100%;
z-index: 9999; z-index: 9999;
display: none; display: none;
} }
.native-modal.active { .native-modal.active {
display: block; display: block;
} }
.modal-mask { .modal-mask {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
} }
.modal-content { .modal-content {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
...@@ -776,199 +1525,343 @@ export default { ...@@ -776,199 +1525,343 @@ export default {
max-height: 80%; max-height: 80%;
overflow-y: auto; overflow-y: auto;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
} }
.modal-header { .modal-header {
padding: 15px 20px; padding: 15px 20px;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.modal-header h3 { .modal-header h3 {
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
color: #333; color: #333;
} }
.modal-close { .modal-close {
background: none; background: none;
border: none; border: none;
font-size: 24px; font-size: 24px;
cursor: pointer; cursor: pointer;
color: #666; color: #666;
padding: 0 8px; padding: 0 8px;
} }
.modal-body { .modal-body {
padding: 20px; padding: 20px;
max-height: calc(100vh - 600px); max-height: calc(100vh - 600px);
overflow-y: auto; overflow-y: auto;
} }
@font-face { @font-face {
font-family:"diget year"; font-family: "diget year";
src: url("~@/assets/fonts/DS-Digital.ttf"); src: url("~@/assets/fonts/DS-Digital.ttf");
}; }
.font_digit{font-family:diget year;} .font_digit {
font-family: diget year;
.Screen { }
position:relative;height:100%;width:100%;overflow:hidden;background-color:#00164e;
.a_0, .b_0{position:absolute;} .Screen {
>.actv{display:block;} position: relative;
.a_0{ height: 100%;
top:0;left:0;height:100%;width:100%; width: 100%;
background:no-repeat center center url('~@/assets/images/layout/s_bg_min.png'); overflow: hidden;
background-size:100% 100%; background-color: #00164e;
.a_0,
.b_0 {
position: absolute;
} }
.b_0{ > .actv {
display:flex;width:100%;height:100%;padding-top:.65rem;background-color:rgba(0,0,0,.15); display: block;
header{
position:absolute;top:0;left:0;height:.64rem;width:100%;z-index:5;
display:flex;user-select:none;
.b1_a{
position:absolute;top:0;left:0;height:.64rem;width:100%;
background:no-repeat top left url('~@/assets/images/layout/s_hd_min.png');background-size:100% auto;
display:flex;justify-content:center;align-items:center;
h2{
font-size:.32rem;line-height:1;margin-top:-.04rem;
background-image: -webkit-linear-gradient(top, #fff, #d5f3fe, #7adbfe);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.02rem;
} }
.b1_a1{ .a_0 {
position:absolute;top:0;right:0;height:100%;width:3.5rem; top: 0;
display:flex;align-items:center;justify-content:left; left: 0;
.font_digit{ height: 100%;
margin-right:.20rem;font-size:.28rem;color:#2ef4ee; width: 100%;
span{font-family:serif;font-size:.24rem;margin:0 .05rem;} background: no-repeat center center
url("~@/assets/images/layout/s_bg_min.png");
background-size: 100% 100%;
} }
.b_0 {
display: flex;
width: 100%;
height: 100%;
padding-top: 0.65rem;
background-color: rgba(0, 0, 0, 0.15);
header {
position: absolute;
top: 0;
left: 0;
height: 0.64rem;
width: 100%;
z-index: 5;
display: flex;
user-select: none;
.b1_a {
position: absolute;
top: 0;
left: 0;
height: 0.64rem;
width: 100%;
background: no-repeat top left
url("~@/assets/images/layout/s_hd_min.png");
background-size: 100% auto;
display: flex;
justify-content: center;
align-items: center;
h2 {
font-size: 0.32rem;
line-height: 1;
margin-top: -0.04rem;
background-image: -webkit-linear-gradient(
top,
#fff,
#d5f3fe,
#7adbfe
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0.02rem;
} }
.b1_a2{ .b1_a1 {
position:absolute;top:0;left:.20rem;height:100%; position: absolute;
display:flex;align-items:center; top: 0;
&:before{ right: 0;
content:'';display:block;height:.35rem;width:1.58rem; height: 100%;
background:no-repeat top left url('~@/assets/images/logo_ks.png');background-size:100% auto; width: 3.5rem;
display: flex;
align-items: center;
justify-content: left;
.font_digit {
margin-right: 0.2rem;
font-size: 0.28rem;
color: #2ef4ee;
span {
font-family: serif;
font-size: 0.24rem;
margin: 0 0.05rem;
}
}
}
.b1_a2 {
position: absolute;
top: 0;
left: 0.2rem;
height: 100%;
display: flex;
align-items: center;
&:before {
content: "";
display: block;
height: 0.35rem;
width: 1.58rem;
background: no-repeat top left url("~@/assets/images/logo_ks.png");
background-size: 100% auto;
} }
} }
} }
} }
.b_2{ .b_2 {
flex:1;position:relative;margin:0 .08rem; flex: 1;
.b_2a{ position: relative;
position:absolute;top:0;left:0;height:100%;width:100%; margin: 0 0.08rem;
display:flex;flex-direction:column; .b_2a {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
.b2_a{ .b2_a {
flex:1;display:flex; flex: 1;
display: flex;
.b2_a1, .b2_a3{ .b2_a1,
flex:1; .b2_a3 {
>div{ flex: 1;
> div {
//background-color:pink; //background-color:pink;
flex:1; flex: 1;
}
} }
.b2_a1,
.b2_a2,
.b2_a3 {
display: flex;
flex-direction: column;
> div {
margin-bottom: 0.08rem;
} }
.b2_a1, .b2_a2, .b2_a3{
display:flex;flex-direction:column;
>div{margin-bottom:.08rem;}
} }
.b2_a2{ .b2_a2 {
width:8.84rem;margin:0 .08rem; width: 8.84rem;
>div:first-child{ margin: 0 0.08rem;
height:7.52rem; > div:first-child {
height: 7.52rem;
/* background-color:yellow; */ /* background-color:yellow; */
box-shadow: inset 0rem 0rem 0.15rem 0.24rem rgba(2,43,80, .8); box-shadow: inset 0rem 0rem 0.15rem 0.24rem rgba(2, 43, 80, 0.8);
} }
>div:last-child{ > div:last-child {
//height:2.46rem; //height:2.46rem;
flex:1; flex: 1;
display:flex; display: flex;
//height:22.777vh; //height:22.777vh;
>div{ > div {
flex:1;margin-right:.08rem; flex: 1;
margin-right: 0.08rem;
//background-color:pink; //background-color:pink;
&:last-child{ &:last-child {
margin-right:0; margin-right: 0;
} }
} }
} }
.b2a2_a{ .b2a2_a {
flex:1;position:relative; flex: 1;
position: relative;
/* background:no-repeat center center url('~@/assets/images/layout/map_min.png');background-size:100% auto; */ /* background:no-repeat center center url('~@/assets/images/layout/map_min.png');background-size:100% auto; */
>div{ > div {
display:none;position:absolute;top:0;left:0;height:100%;width:100%; display: none;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
> div.show {
display: block;
} }
>div.show{display:block;} > div:first-child {
>div:first-child{}
} }
} }
.b2_a3{ }
.b2_a3 {
} }
.view-item{ .view-item {
border:1px solid #004a8b; border: 1px solid #004a8b;
position:relative; position: relative;
box-shadow:inset 0rem 0rem .15rem .04rem rgba(10,106,180,.8); box-shadow: inset 0rem 0rem 0.15rem 0.04rem rgba(10, 106, 180, 0.8);
&:before, &:after, .view-flx:before, .view-flx:after{ &:before,
content:"";position:absolute;height:.10rem;width:.10rem;z-index:1; &:after,
border-style:solid;border-color:#02f6ff; .view-flx:before,
.view-flx:after {
content: "";
position: absolute;
height: 0.1rem;
width: 0.1rem;
z-index: 1;
border-style: solid;
border-color: #02f6ff;
} }
&:before, &:after{top:-1px;} &:before,
&:before{ &:after {
left:-1px; top: -1px;
border-width:.02rem 0 0 .02rem;
} }
&:after{ &:before {
right:-1px; left: -1px;
border-width:.02rem .02rem 0 0; border-width: 0.02rem 0 0 0.02rem;
} }
.view-flx{ &:after {
position:absolute;top:0;left:0;height:100%;width:100%; right: -1px;
background-color:rgb(1,19,70, .3); border-width: 0.02rem 0.02rem 0 0;
&:before, &:after{bottom:-1px;}
&:before{
left:-1px;
border-width:0 0 .02rem .02rem;
} }
&:after{ .view-flx {
right:-1px; position: absolute;
border-width:0 .02rem .02rem 0; top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgb(1, 19, 70, 0.3);
&:before,
&:after {
bottom: -1px;
}
&:before {
left: -1px;
border-width: 0 0 0.02rem 0.02rem;
}
&:after {
right: -1px;
border-width: 0 0.02rem 0.02rem 0;
} }
} }
} }
} }
.weather{ .weather {
font-size:11px; font-size: 11px;
.mleft{display:none;} .mleft {
.wtpath{display:none;} display: none;
.mright{flex:1;text-align:center;} }
img{display:block;width:2vw !important;height:auto !important;margin:0 auto;} .wtpath {
ul{margin:5px 0;color:#d0d2ff;} display: none;
#mobile05{ }
display:flex;position:relative;padding-top:5vh !important; .mright {
flex: 1;
text-align: center;
}
img {
display: block;
width: 2vw !important;
height: auto !important;
margin: 0 auto;
}
ul {
margin: 5px 0;
color: #d0d2ff;
} }
#mobile05>div:last-child{display:none;} #mobile05 {
#mright_1{ display: flex;
position:absolute;top:0;left:0;height:auto;width:100%;display:flex; position: relative;
ul{margin:0;color:#03d3fe;} padding-top: 5vh !important;
.wt{display:flex;align-items:center;margin-left:140px;}
.day{display:none;}
span:last-child{display:block;
position:absolute;top:4px;left:0px;height:auto;
font-size:26px;
} }
font{margin:6px 0 0 10px;color:#35ecfa} #mobile05 > div:last-child {
display: none;
} }
#mright_1 {
position: absolute;
top: 0;
left: 0;
height: auto;
width: 100%;
display: flex;
ul {
margin: 0;
color: #03d3fe;
} }
.wt {
display: flex;
align-items: center;
margin-left: 140px;
} }
.day {
display: none;
}
span:last-child {
display: block;
position: absolute;
top: 4px;
left: 0px;
height: auto;
font-size: 26px;
}
font {
margin: 6px 0 0 10px;
color: #35ecfa;
} }
} }
} }
}
}
}
}
</style> </style>
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>
...@@ -12,15 +12,41 @@ ...@@ -12,15 +12,41 @@
<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
ref="loginForm"
:model="loginForm"
:rules="loginRules"
label-position="left"
label-width="0px"
class="login-form"
>
<el-form-item prop="username"> <el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号"> <el-input
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> 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-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin"> <el-input
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> 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-input>
</el-form-item> </el-form-item>
<!-- <!--
...@@ -34,7 +60,13 @@ ...@@ -34,7 +60,13 @@
</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
:loading="loading"
size="medium"
type="primary"
style="width:100%;"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登 录</span> <span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span> <span v-else>登 录 中...</span>
</el-button> </el-button>
...@@ -55,47 +87,52 @@ ...@@ -55,47 +87,52 @@
</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: [
{ required: true, trigger: "blur", message: "密码不能为空" }
],
code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
}, },
loading: false, loading: false,
redirect: undefined redirect: undefined
} };
}, },
watch: { watch: {
$route: { $route: {
handler: function(route) { handler: function(route) {
const data = route.query const data = route.query;
if (data && data.redirect) { if (data && data.redirect) {
this.redirect = data.redirect this.redirect = data.redirect;
delete data.redirect delete data.redirect;
if (JSON.stringify(data) !== '{}') { if (JSON.stringify(data) !== "{}") {
this.redirect = this.redirect + '&' + qs.stringify(data, { indices: false }) this.redirect =
this.redirect + "&" + qs.stringify(data, { indices: false });
} }
} }
}, },
...@@ -104,32 +141,32 @@ export default { ...@@ -104,32 +141,32 @@ export default {
}, },
created() { created() {
// 获取验证码 // 获取验证码
this.getCode() this.getCode();
// 获取用户名密码等Cookie // 获取用户名密码等Cookie
this.getCookie() this.getCookie();
// token 过期提示 // token 过期提示
this.point() this.point();
}, },
methods: { methods: {
getCode() { getCode() {
getCodeImg().then(res => { getCodeImg().then(res => {
this.codeUrl = res.img this.codeUrl = res.img;
this.loginForm.uuid = res.uuid this.loginForm.uuid = res.uuid;
}) });
}, },
getCookie() { getCookie() {
const username = Cookies.get('username') const username = Cookies.get("username");
let password = Cookies.get('password') let password = Cookies.get("password");
const rememberMe = Cookies.get('rememberMe') const rememberMe = Cookies.get("rememberMe");
// 保存cookie里面的加密后的密码 // 保存cookie里面的加密后的密码
this.cookiePass = password === undefined ? '' : password this.cookiePass = password === undefined ? "" : password;
password = password === undefined ? this.loginForm.password : password password = password === undefined ? this.loginForm.password : password;
this.loginForm = { this.loginForm = {
username: username === undefined ? this.loginForm.username : username, username: username === undefined ? this.loginForm.username : username,
password: password, password: password,
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe), rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
code: '', code: ""
} };
}, },
handleLogin() { handleLogin() {
this.$refs.loginForm.validate(valid => { this.$refs.loginForm.validate(valid => {
...@@ -138,130 +175,204 @@ export default { ...@@ -138,130 +175,204 @@ export default {
password: this.loginForm.password, password: this.loginForm.password,
rememberMe: this.loginForm.rememberMe, rememberMe: this.loginForm.rememberMe,
code: this.loginForm.code, code: this.loginForm.code,
uuid: this.loginForm.uuid, uuid: this.loginForm.uuid
} };
if (user.password !== this.cookiePass) { if (user.password !== this.cookiePass) {
user.password = encrypt(user.password); 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 }) });
Cookies.set("password", user.password, {
expires: Config.passCookieExpires
});
Cookies.set("rememberMe", user.rememberMe, {
expires: Config.passCookieExpires
});
} else { } else {
Cookies.remove('username') Cookies.remove("username");
Cookies.remove('password') Cookies.remove("password");
Cookies.remove('rememberMe') Cookies.remove("rememberMe");
Cookies.remove("roles");
} }
this.$store.dispatch('Login', user).then((res) => { this.$store
this.loading = false .dispatch("Login", user)
if(/* res.head.code !== '0000' */ res.code){ .then(res => {
this.loading = false;
if (/* res.head.code !== '0000' */ res.code) {
return this.$notify({ return this.$notify({
title: '提示', title: "提示",
message: res.msg, message: res.msg,
type: 'warning', type: "warning",
duration: 5000 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 || '/' }) //this.$router.push({ path: this.redirect || '/' })
window.location.href = this.redirect || '/'; window.location.href = this.redirect || "/";
}).catch((err) => {
this.loading = false
this.getCode()
}) })
.catch(err => {
this.loading = false;
this.getCode();
});
} else { } else {
console.log('error submit!!') console.log("error submit!!");
return false return false;
} }
}) });
}, },
point() { point() {
const point = Cookies.get('point') !== undefined const point = Cookies.get("point") !== undefined;
if (point) { if (point) {
this.$notify({ this.$notify({
title: '提示', title: "提示",
message: '当前登录状态已过期，请重新登录！', message: "当前登录状态已过期，请重新登录！",
type: 'warning', type: "warning",
duration: 5000 duration: 5000
}) });
Cookies.remove('point') 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;
flex-direction: column;
height: 100%;
background-size: cover;
position: relative;
.headder{ .headder {
margin-bottom:.48rem;text-align:center; margin-bottom: 0.48rem;
h2, h4{ text-align: center;
margin:0;padding:0;line-height:1;background-image:-webkit-linear-gradient(top, #fff, #a2deff, #23a5f9); h2,
-webkit-background-clip:text;-webkit-text-fill-color:transparent; 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;
} }
h2{font-size:.66rem;letter-spacing:.06rem;}
h4{margin-top:.20rem;font-size:.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;
height: auto;
width: 4.79rem;
flex: 1;
display: flex;
.inbox-range{ .inbox-range {
flex:1; flex: 1;
.ctn-fix{width:3.8rem;margin:0 auto;} .ctn-fix {
width: 3.8rem;
margin: 0 auto;
}
} }
.login-form { .login-form {
.el-input { .el-input {
height:.58rem;min-height:38px; height: 0.58rem;
min-height: 38px;
input { input {
height:.58rem;padding-left:.40rem; height: 0.58rem;
background-color:#1042a1 !important;color:#fff;border-color:#085fa2; padding-left: 0.4rem;
background-color: #1042a1 !important;
color: #fff;
border-color: #085fa2;
} }
} }
.input-icon{ .input-icon {
height:.58rem;width:.24rem;margin-left:.02rem; height: 0.58rem;
width: 0.24rem;
margin-left: 0.02rem;
} }
.el-form-item__content{ .el-form-item__content {
line-height:.58rem; line-height: 0.58rem;
} }
.el-form-item{ .el-form-item {
margin-bottom:.25rem; margin-bottom: 0.25rem;
&:last-child{margin-bottom:0} &:last-child {
.el-select{width:100%;} 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; .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 { .login-code {
width: 33%; width: 33%;
display: inline-block; display: inline-block;
height: 38px; height: 38px;
float: right; float: right;
img{ img {
cursor: pointer; cursor: pointer;
vertical-align:middle vertical-align: middle;
}
} }
}
</style> </style>
vue.config.js
View file @ 4dc1e2eb
...@@ -5,7 +5,7 @@ const Mode = 'src'; // 'src' 'src-neuter'(中性) ...@@ -5,7 +5,7 @@ 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)
...@@ -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,17 +45,17 @@ module.exports = { ...@@ -45,17 +45,17 @@ 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,
...@@ -109,8 +109,8 @@ module.exports = { ...@@ -109,8 +109,8 @@ module.exports = {
name: name, name: name,
resolve: { resolve: {
alias: { alias: {
'@': resolve(Mode+''), '@': resolve(Mode + ''),
'@crud': resolve(Mode+'/components/Crud') '@crud': resolve(Mode + '/components/Crud')
} }
} }
}, },
...@@ -121,12 +121,12 @@ module.exports = { ...@@ -121,12 +121,12 @@ 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')
...@@ -180,7 +180,7 @@ module.exports = { ...@@ -180,7 +180,7 @@ module.exports = {
}, },
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
......
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