8 changed files with 1 additions and 811 deletions
@ -1,192 +0,0 @@ |
|||||
/* eslint-disable max-len */ |
|
||||
export const colors = ['#EAB308', '#F97316', '#EC4899', '#F43F5E', '#D946EF', '#06B6D4', '#B45309', '#1E40AF', '#166534']; |
|
||||
|
|
||||
export const itemColor = { |
|
||||
'钢腐蚀电流(nA)': colors[5], |
|
||||
'铜腐蚀电流(nA)': colors[6], |
|
||||
'铝腐蚀电流(nA)': colors[7], |
|
||||
'锌腐蚀电流(nA)': colors[8], |
|
||||
'SO2(ppb)': colors[0], |
|
||||
'盐分阻抗(Ω)': colors[1], |
|
||||
'盐分温度(℃)': colors[2], |
|
||||
'环境温度(℃)': colors[3], |
|
||||
'环境湿度(RH%)': colors[4], |
|
||||
}; |
|
||||
|
|
||||
export const legendData = [ |
|
||||
{ |
|
||||
name: 'SO2(ppb)', |
|
||||
itemStyle: { color: colors[0] }, |
|
||||
listStyle: { color: colors[0] }, |
|
||||
}, |
|
||||
{ |
|
||||
name: '盐分阻抗(Ω)', |
|
||||
itemStyle: { color: colors[1] }, |
|
||||
listStyle: { color: colors[1] }, |
|
||||
}, |
|
||||
{ |
|
||||
name: '盐分温度(℃)', |
|
||||
itemStyle: { color: colors[2] }, |
|
||||
listStyle: { color: colors[2] }, |
|
||||
}, |
|
||||
{ |
|
||||
name: '环境温度(℃)', |
|
||||
itemStyle: { color: colors[3] }, |
|
||||
listStyle: { color: colors[3] }, |
|
||||
}, |
|
||||
{ |
|
||||
name: '环境湿度(RH%)', |
|
||||
itemStyle: { color: colors[4] }, |
|
||||
listStyle: { color: colors[4] }, |
|
||||
}, |
|
||||
{ |
|
||||
name: '锌腐蚀电流(nA)', |
|
||||
itemStyle: { color: colors[5] }, |
|
||||
listStyle: { color: colors[5] }, |
|
||||
}, |
|
||||
{ |
|
||||
name: '铜腐蚀电流(nA)', |
|
||||
itemStyle: { color: colors[6] }, |
|
||||
listStyle: { color: colors[6] }, |
|
||||
}, |
|
||||
{ |
|
||||
name: '铝腐蚀电流(nA)', |
|
||||
itemStyle: { color: colors[7] }, |
|
||||
listStyle: { color: colors[7] }, |
|
||||
}, |
|
||||
{ |
|
||||
name: '钢腐蚀电流(nA)', |
|
||||
itemStyle: { color: colors[8] }, |
|
||||
listStyle: { color: colors[8] }, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
// y轴定义
|
|
||||
export const yAxisData = [ |
|
||||
{ |
|
||||
type: 'value', |
|
||||
name: '腐蚀电流(nA)', |
|
||||
offset: 0, |
|
||||
position: 'left', |
|
||||
axisLine: { |
|
||||
show: true, |
|
||||
lineStyle: { color: colors[7] }, |
|
||||
}, |
|
||||
axisLabel: { formatter: '{value}' }, |
|
||||
axisPointer: { show: false }, |
|
||||
}, |
|
||||
{ |
|
||||
type: 'value', |
|
||||
name: '温度(℃)', |
|
||||
offset: 0, |
|
||||
position: 'right', |
|
||||
axisLine: { |
|
||||
show: true, |
|
||||
lineStyle: { color: colors[3] }, |
|
||||
}, |
|
||||
axisLabel: { formatter: '{value}' }, |
|
||||
axisPointer: { show: false }, |
|
||||
}, |
|
||||
{ |
|
||||
type: 'value', |
|
||||
name: '湿度(RH%)', |
|
||||
offset: 70, |
|
||||
position: 'right', |
|
||||
axisLine: { |
|
||||
show: true, |
|
||||
lineStyle: { color: colors[4] }, |
|
||||
}, |
|
||||
axisLabel: { formatter: '{value}' }, |
|
||||
axisPointer: { show: false }, |
|
||||
}, |
|
||||
{ |
|
||||
type: 'value', |
|
||||
name: 'SO2(ppb)', |
|
||||
position: 'right', |
|
||||
show: false, |
|
||||
offset: 150, |
|
||||
axisLine: { |
|
||||
show: true, |
|
||||
lineStyle: { color: colors[0] }, |
|
||||
}, |
|
||||
axisLabel: { formatter: '{value}' }, |
|
||||
axisPointer: { show: false }, |
|
||||
}, |
|
||||
{ |
|
||||
type: 'value', |
|
||||
name: '盐分阻抗(Ω)', |
|
||||
show: false, |
|
||||
position: 'right', |
|
||||
offset: 220, |
|
||||
axisLine: { |
|
||||
show: true, |
|
||||
lineStyle: { color: colors[1] }, |
|
||||
}, |
|
||||
axisLabel: { formatter: '{value}' }, |
|
||||
axisPointer: { show: false }, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
/** |
|
||||
* 生成默认数据 |
|
||||
* @param {Object} data |
|
||||
* @returns {[{data: (number|[]|string|*), name: string, type: string},{data: (number|[]|BufferSource|string|*), name: string, type: string, yAxisIndex: number},{data: ([]|string|*), name: string, type: string, yAxisIndex: number},{data: ([]|string|*), name: string, type: string, yAxisIndex: number},{data: [], name: string, type: string, yAxisIndex: number},null,null,null]} |
|
||||
*/ |
|
||||
export function generateDefaultSeries(data) { |
|
||||
return [ |
|
||||
{ |
|
||||
name: '锌腐蚀电流(nA)', |
|
||||
type: 'line', |
|
||||
yAxisIndex: 0, |
|
||||
data: data.corrosionXIN, |
|
||||
}, |
|
||||
{ |
|
||||
name: '铜腐蚀电流(nA)', |
|
||||
type: 'line', |
|
||||
yAxisIndex: 0, |
|
||||
data: data.corrosionTONG, |
|
||||
}, |
|
||||
{ |
|
||||
name: '铝腐蚀电流(nA)', |
|
||||
type: 'line', |
|
||||
yAxisIndex: 0, |
|
||||
data: data.corrosionLV, |
|
||||
}, |
|
||||
{ |
|
||||
name: '钢腐蚀电流(nA)', |
|
||||
type: 'line', |
|
||||
yAxisIndex: 0, |
|
||||
data: data.corrosionGANG, |
|
||||
}, |
|
||||
{ |
|
||||
name: '环境温度(℃)', |
|
||||
type: 'line', |
|
||||
yAxisIndex: 1, |
|
||||
data: data.environmentTemperature, |
|
||||
}, |
|
||||
{ |
|
||||
name: '盐分温度(℃)', |
|
||||
type: 'line', |
|
||||
yAxisIndex: 1, |
|
||||
data: data.saltT, |
|
||||
}, |
|
||||
{ |
|
||||
name: '环境湿度(RH%)', |
|
||||
type: 'line', |
|
||||
yAxisIndex: 2, |
|
||||
data: data.environmentHumidity, |
|
||||
}, |
|
||||
{ |
|
||||
name: 'SO2(ppb)', |
|
||||
type: 'line', |
|
||||
yAxisIndex: 3, |
|
||||
data: data.so2, |
|
||||
}, |
|
||||
{ |
|
||||
name: '盐分阻抗(Ω)', |
|
||||
type: 'line', |
|
||||
yAxisIndex: 4, |
|
||||
data: data.saltR, |
|
||||
}, |
|
||||
]; |
|
||||
} |
|
||||
@ -1,164 +0,0 @@ |
|||||
// 网络参数设置
|
|
||||
export const networkConfig = { |
|
||||
ip1: '', |
|
||||
port1: '', |
|
||||
ip2: '', |
|
||||
port2: '', |
|
||||
ip3: '', |
|
||||
port3: '', |
|
||||
ipBackup: '', |
|
||||
portBackup: '', |
|
||||
account: '', |
|
||||
password: '', |
|
||||
apn: '', |
|
||||
status: '', |
|
||||
}; |
|
||||
|
|
||||
// 功能参数设置
|
|
||||
export const functionConfig = { |
|
||||
frequency: { |
|
||||
so2: 0, // SO2采样频率
|
|
||||
metal: 0, // 金属腐蚀采样频率
|
|
||||
th: 0, // 温湿度 采样频率
|
|
||||
salt: 0, // 盐雾 采样频率
|
|
||||
}, // 采样频率
|
|
||||
count: 0, // 采集个数
|
|
||||
time: Date.now(), // 设置时间
|
|
||||
batteryLow: 0, // 电池电压低阈值
|
|
||||
batteryHigh: 0, // 电池电压高阈值
|
|
||||
sunHigh: 0, // 太阳能电压高阈值
|
|
||||
humidityHigh: 0, // 湿度高阈值
|
|
||||
temperatureLow: 0, // 温度低阈值
|
|
||||
temperatureHigh: 0, // 温度高阈值
|
|
||||
securityMode: 'OPEN', // 安全模式 OPEN->不加密 ENCRYPTION->加密
|
|
||||
report: { |
|
||||
type: 'CYCLE', // 上报周期类型 0->时间点 1->周期
|
|
||||
timePoints: [''], // 设置时间点
|
|
||||
cycle: 240, // 上报周期分钟数
|
|
||||
}, |
|
||||
status: '', |
|
||||
}; |
|
||||
|
|
||||
// 金属腐蚀类型
|
|
||||
export const corrosiveTypes = [ |
|
||||
{ |
|
||||
value: 'XIN', |
|
||||
type: '锌', |
|
||||
}, |
|
||||
{ |
|
||||
value: 'LV', |
|
||||
type: '铝', |
|
||||
}, |
|
||||
{ |
|
||||
value: 'TONG', |
|
||||
type: '铜', |
|
||||
}, |
|
||||
{ |
|
||||
value: 'GANG', |
|
||||
type: '钢', |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
// 添加设备
|
|
||||
export const deviceData = { |
|
||||
deviceId: '', // 设备id
|
|
||||
deviceFullId: '', // 设备完整id
|
|
||||
deviceDirection: '', // 设备朝向
|
|
||||
area: '', // 地区
|
|
||||
address: '', // 站点名称
|
|
||||
contact: '', // 联系人
|
|
||||
phone: '', // 联系人电话
|
|
||||
lon: '', // 经度
|
|
||||
lat: '', // 纬度
|
|
||||
head: '', // 负责人
|
|
||||
installLocation: '', // 安装位置
|
|
||||
installTime: '', // 安装时间
|
|
||||
runTime: '', // 正式运行时间
|
|
||||
linkAddress: '', // 链路地址
|
|
||||
probNo: '', // 探头编号
|
|
||||
simple: '', // 试样
|
|
||||
sim1: '', // sim卡1
|
|
||||
protocolVersion: '', // 协议版本
|
|
||||
joint: '', // 主站后台联调情况
|
|
||||
operationRecord: '', // 维修记录
|
|
||||
remark: '', // 备注
|
|
||||
type: 'IACD', // 产品类型
|
|
||||
}; |
|
||||
|
|
||||
// 设备添加编辑 规则
|
|
||||
export const deviceRules = { |
|
||||
deviceId: [ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入设备ID号', |
|
||||
trigger: 'blur', |
|
||||
}, |
|
||||
{ |
|
||||
len: 6, |
|
||||
message: '请输入6位设备ID号', |
|
||||
trigger: 'blur', |
|
||||
}, |
|
||||
], |
|
||||
address: [ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入站点名称', |
|
||||
trigger: 'blur', |
|
||||
}, |
|
||||
], |
|
||||
}; |
|
||||
|
|
||||
// 下发类型
|
|
||||
export const PEND_TYPE = { |
|
||||
PENDING: { |
|
||||
type: 'primary', |
|
||||
text: '待下发', |
|
||||
}, |
|
||||
FAIL: { |
|
||||
type: 'danger', |
|
||||
text: '配置失败', |
|
||||
}, |
|
||||
SUCCESS: { |
|
||||
type: 'success', |
|
||||
text: '配置成功', |
|
||||
}, |
|
||||
}; |
|
||||
|
|
||||
// 上报类型
|
|
||||
export const REPORT_TYPE = { |
|
||||
CYCLE: '周期上报', |
|
||||
POINT: '定时上报', |
|
||||
}; |
|
||||
|
|
||||
// 下发类型
|
|
||||
export const PENDING_TYPE = { |
|
||||
DATA: { text: '业务上报' }, |
|
||||
EVENT: { text: '事件上报' }, |
|
||||
}; |
|
||||
|
|
||||
// 实时查询数据的轮询时间 1分钟
|
|
||||
export const REALTIME_DATA_INTERVAL = 60000 * 5; |
|
||||
|
|
||||
// 设备状态 情景
|
|
||||
export const STATUS_COLOR = { |
|
||||
BROKEN: { |
|
||||
text: '故障', |
|
||||
color: '#FCA5A5', |
|
||||
}, |
|
||||
WARNING: { |
|
||||
text: '报警', |
|
||||
color: '#FCD34D', |
|
||||
}, |
|
||||
NORMAL: { |
|
||||
text: '正常', |
|
||||
color: '#BEF264', |
|
||||
}, |
|
||||
OFFLINE: { |
|
||||
text: '离线', |
|
||||
color: '#CBD5E1', |
|
||||
}, |
|
||||
ONLINE: { |
|
||||
text: '在线', |
|
||||
color: '#6EE7B7', |
|
||||
}, |
|
||||
}; |
|
||||
@ -1,110 +0,0 @@ |
|||||
// 功能码
|
|
||||
export const CODE = { |
|
||||
BUSINESS_REPORT: { |
|
||||
text: '业务上报', |
|
||||
code: 0, |
|
||||
}, |
|
||||
EVENT_REPORT: { |
|
||||
text: '事件上报', |
|
||||
code: 1, |
|
||||
}, |
|
||||
NET_PARAM_SETTING_OR_READING: { |
|
||||
code: 2, |
|
||||
text: '联网参数设置或读取', |
|
||||
}, |
|
||||
FUNC_PARAM_SETTING_OR_READING: { |
|
||||
code: 3, |
|
||||
text: '功能参数设置或读取', |
|
||||
}, |
|
||||
READ_HISTORY_DATA: { |
|
||||
code: 4, |
|
||||
text: '读取历史日志记录', |
|
||||
}, |
|
||||
READ_HISTORY_EVENT: { |
|
||||
code: 5, |
|
||||
text: '读取历史事件记录', |
|
||||
}, |
|
||||
UPGRADE: { |
|
||||
code: 6, |
|
||||
text: '升级启动、传输、结束', |
|
||||
}, |
|
||||
ACK: { |
|
||||
code: 7, |
|
||||
text: '应答帧（固定帧）', |
|
||||
}, |
|
||||
OVER: { |
|
||||
code: 8, |
|
||||
text: '结束帧', |
|
||||
}, |
|
||||
RESERVED: { |
|
||||
code: 9, |
|
||||
text: '保留', |
|
||||
}, |
|
||||
}; |
|
||||
|
|
||||
// 传输方向
|
|
||||
export const DIRECTION = { |
|
||||
IACD2SERVER: '上行', |
|
||||
SERVER2IACD: '下行', |
|
||||
}; |
|
||||
|
|
||||
// 传输启动
|
|
||||
export const PRM = { |
|
||||
ACK: '传输结束', |
|
||||
REQ: '传输启动', |
|
||||
}; |
|
||||
|
|
||||
// 流控
|
|
||||
export const DFC = { |
|
||||
CONTINUE: '有后续包', |
|
||||
OVER: '无后续包', |
|
||||
}; |
|
||||
|
|
||||
// 安全方式
|
|
||||
export const SER = { |
|
||||
OPEN: '不加密', |
|
||||
ENCRYPTION: '加密', |
|
||||
}; |
|
||||
|
|
||||
// 类型标识
|
|
||||
export const ASDU_TYPE = { |
|
||||
IACD: { |
|
||||
code: 1, |
|
||||
text: '大气腐蚀', |
|
||||
}, |
|
||||
OTHER: { |
|
||||
code: 2, |
|
||||
text: '其他', |
|
||||
}, |
|
||||
}; |
|
||||
|
|
||||
// 信息体序
|
|
||||
export const INFO_ORDER = { |
|
||||
NoOrder: '无序', |
|
||||
HasOrder: '有序', |
|
||||
None: '无', |
|
||||
}; |
|
||||
|
|
||||
// 传输原因
|
|
||||
export const REASON = { |
|
||||
None: { |
|
||||
code: 0, |
|
||||
text: '无', |
|
||||
}, |
|
||||
ReportData: { |
|
||||
code: 1, |
|
||||
text: '业务主动上报', |
|
||||
}, |
|
||||
ReportEvent: { |
|
||||
code: 2, |
|
||||
text: '事件主动上报', |
|
||||
}, |
|
||||
History: { |
|
||||
code: 3, |
|
||||
text: '历史数据记录或程序数据', |
|
||||
}, |
|
||||
HumanOperator: { |
|
||||
code: 4, |
|
||||
text: '人工上报', |
|
||||
}, |
|
||||
}; |
|
||||
@ -1,19 +0,0 @@ |
|||||
import { ref } from 'vue'; |
|
||||
|
|
||||
export default function useDeviceCreate() { |
|
||||
const display = ref(false); |
|
||||
|
|
||||
function hide() { |
|
||||
display.value = false; |
|
||||
} |
|
||||
|
|
||||
function show() { |
|
||||
display.value = true; |
|
||||
} |
|
||||
|
|
||||
return { |
|
||||
display, |
|
||||
hide, |
|
||||
show, |
|
||||
}; |
|
||||
} |
|
||||
@ -1,128 +0,0 @@ |
|||||
import { STATUS_COLOR } from '@/config/config'; |
|
||||
|
|
||||
/** |
|
||||
* 生成设备概览 数量数据 |
|
||||
* @param {object} count |
|
||||
* @param {number} count.online 在线数量 |
|
||||
* @param {number} count.offline 离线数量 |
|
||||
* @param {number} count.fault 故障数量 |
|
||||
* @param {number} count.warning 报警数量 |
|
||||
* @param {number} count.total 总设备数 |
|
||||
* @returns {object} {} |
|
||||
*/ |
|
||||
// eslint-disable-next-line import/prefer-default-export
|
|
||||
export function generateChartOption(count) { |
|
||||
return { |
|
||||
tooltip: { trigger: 'item' }, |
|
||||
title: { |
|
||||
text: '设备总数', |
|
||||
top: '45%', |
|
||||
left: '50%', |
|
||||
textAlign: 'center', |
|
||||
textVerticalAlign: 'middle', |
|
||||
textStyle: { fontSize: 22 }, |
|
||||
subtext: count.total, |
|
||||
subtextStyle: { fontSize: 18 }, |
|
||||
}, |
|
||||
|
|
||||
series: [ |
|
||||
{ |
|
||||
name: '设备统计', |
|
||||
type: 'pie', |
|
||||
radius: ['70%', '95%'], |
|
||||
avoidLabelOverlap: false, |
|
||||
itemStyle: { |
|
||||
borderRadius: 10, |
|
||||
borderColor: '#fff', |
|
||||
borderWidth: 2, |
|
||||
}, |
|
||||
label: { |
|
||||
show: true, |
|
||||
position: 'inside', |
|
||||
fontSize: 17, |
|
||||
color: '#323232', |
|
||||
// formatter: '{b}\n{c}',
|
|
||||
lineHeight: 40, |
|
||||
}, |
|
||||
emphasis: { |
|
||||
label: { |
|
||||
show: true, |
|
||||
fontSize: 19, |
|
||||
fontWeight: 'bold', |
|
||||
}, |
|
||||
}, |
|
||||
labelLine: { show: false }, |
|
||||
data: [ |
|
||||
{ |
|
||||
value: count.online, |
|
||||
name: STATUS_COLOR.ONLINE.text, |
|
||||
itemStyle: { color: STATUS_COLOR.ONLINE.color }, |
|
||||
label: { show: count.online }, |
|
||||
}, |
|
||||
{ |
|
||||
value: count.offline, |
|
||||
name: STATUS_COLOR.OFFLINE.text, |
|
||||
itemStyle: { color: STATUS_COLOR.OFFLINE.color }, |
|
||||
label: { show: count.offline }, |
|
||||
}, |
|
||||
], |
|
||||
}, |
|
||||
{ |
|
||||
name: '设备统计', |
|
||||
type: 'pie', |
|
||||
radius: ['35%', '60%'], |
|
||||
avoidLabelOverlap: false, |
|
||||
itemStyle: { |
|
||||
borderRadius: 10, |
|
||||
borderColor: '#fff', |
|
||||
borderWidth: 2, |
|
||||
}, |
|
||||
label: { |
|
||||
show: true, |
|
||||
position: 'inside', |
|
||||
fontSize: 14, |
|
||||
color: '#323232', |
|
||||
// formatter: '{b}\n{c}',
|
|
||||
lineHeight: 40, |
|
||||
}, |
|
||||
emphasis: { |
|
||||
label: { |
|
||||
show: true, |
|
||||
fontSize: 16, |
|
||||
fontWeight: 'bold', |
|
||||
}, |
|
||||
}, |
|
||||
labelLine: { show: false }, |
|
||||
data: [ |
|
||||
{ |
|
||||
value: count.fault, |
|
||||
name: STATUS_COLOR.BROKEN.text, |
|
||||
itemStyle: { color: STATUS_COLOR.BROKEN.color }, |
|
||||
label: { show: count.fault }, |
|
||||
}, |
|
||||
{ |
|
||||
value: count.warning, |
|
||||
name: STATUS_COLOR.WARNING.text, |
|
||||
itemStyle: { color: STATUS_COLOR.WARNING.color }, |
|
||||
label: { show: count.warning }, |
|
||||
}, |
|
||||
{ |
|
||||
value: count.normal, |
|
||||
name: STATUS_COLOR.NORMAL.text, |
|
||||
itemStyle: { color: STATUS_COLOR.NORMAL.color }, |
|
||||
label: { show: count.normal }, |
|
||||
}, |
|
||||
{ |
|
||||
value: count.offline, |
|
||||
name: STATUS_COLOR.OFFLINE.text, |
|
||||
itemStyle: { |
|
||||
color: STATUS_COLOR.OFFLINE.color, |
|
||||
opacity: 0, |
|
||||
}, |
|
||||
label: { show: count.offline }, |
|
||||
}, |
|
||||
], |
|
||||
}, |
|
||||
], |
|
||||
}; |
|
||||
} |
|
||||
@ -1,181 +0,0 @@ |
|||||
/* eslint-disable max-len,object-curly-newline */ |
|
||||
import dayjs from 'dayjs'; |
|
||||
import max from 'lodash/max'; |
|
||||
import isNaN from 'lodash/isNaN'; |
|
||||
import { colors, generateDefaultSeries, itemColor, legendData, yAxisData } from '@/config/chart'; |
|
||||
|
|
||||
/** |
|
||||
* 生成chart所需参数 |
|
||||
* @param {Object[]} data 服务端返回数据 |
|
||||
* @param {string} data[].time 时间 ms |
|
||||
* @param {string} data[].so2 SO2 |
|
||||
* @param {string} data[].saltR 盐阻 |
|
||||
* @param {string} data[].saltT 盐温 |
|
||||
* @param {string} data[].environmentTemperature 环温 |
|
||||
* @param {string} data[].environmentHumidity 环湿 |
|
||||
* @param {string} data[].corrosion1 锌 |
|
||||
* @param {string} data[].corrosion2 铜 |
|
||||
* @param {string} data[].corrosion3 铝 |
|
||||
* @param {string} data[].corrosion4 钢 |
|
||||
* @returns {{environmentTemperature: *[], corrosionXIN: *[], corrosionGANG: *[], corrosionTONG: *[], so2: *[], corrosionLV: *[], time: *[], saltT: *[], saltR: *[], environmentHumidity: *[]}} |
|
||||
*/ |
|
||||
function generateParams(data) { |
|
||||
const result = { |
|
||||
time: [], |
|
||||
so2: [], |
|
||||
saltR: [], |
|
||||
saltT: [], |
|
||||
environmentTemperature: [], |
|
||||
environmentHumidity: [], |
|
||||
corrosionXIN: [], |
|
||||
corrosionTONG: [], |
|
||||
corrosionLV: [], |
|
||||
corrosionGANG: [], |
|
||||
}; |
|
||||
data.forEach(item => { |
|
||||
result.time.push(dayjs(new Date(+item.time)).format('YY/MM/DD HH:mm')); |
|
||||
!isNaN(+item.so2) ? result.so2.push(+item.so2) : result.so2.push(''); |
|
||||
!isNaN(+item.saltR) ? result.saltR.push(+item.saltR) : result.saltR.push(''); |
|
||||
!isNaN(+item.saltT) ? result.saltT.push(+item.saltT) : result.saltT.push(''); |
|
||||
!isNaN(+item.environmentTemperature) |
|
||||
? result.environmentTemperature.push(+item.environmentTemperature) |
|
||||
: result.environmentTemperature.push(''); |
|
||||
!isNaN(+item.environmentHumidity) ? result.environmentHumidity.push(+item.environmentHumidity) : result.environmentHumidity.push(''); |
|
||||
!isNaN(+item.corrosion1) ? result.corrosionXIN.push(+item.corrosion1) : result.corrosionXIN.push(''); |
|
||||
!isNaN(+item.corrosion2) ? result.corrosionTONG.push(+item.corrosion2) : result.corrosionTONG.push(''); |
|
||||
!isNaN(+item.corrosion3) ? result.corrosionLV.push(+item.corrosion3) : result.corrosionLV.push(''); |
|
||||
!isNaN(+item.corrosion4) ? result.corrosionGANG.push(+item.corrosion4) : result.corrosionGANG.push(''); |
|
||||
}); |
|
||||
return result; |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 计算Y轴的显示 |
|
||||
* @param {string} yName Y轴的name |
|
||||
* @param {Object} selectedLegend legends |
|
||||
* @returns {boolean} |
|
||||
*/ |
|
||||
export function computeYAxisShow(yName, selectedLegend) { |
|
||||
// eslint-disable-next-line guard-for-in,no-restricted-syntax
|
|
||||
for (const key in selectedLegend) { |
|
||||
if (key.includes(yName) && selectedLegend[key]) { |
|
||||
return true; |
|
||||
} |
|
||||
} |
|
||||
return false; |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 生产y轴内容 |
|
||||
* @param {Object} selectedLegend |
|
||||
* @returns {({axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string})[]} |
|
||||
*/ |
|
||||
export function generateYAxis(selectedLegend) { |
|
||||
let leftIndex = 0; |
|
||||
let rightIndex = 0; |
|
||||
yAxisData.forEach(item => { |
|
||||
item.show = computeYAxisShow(item.name, selectedLegend); |
|
||||
if (item.show) { |
|
||||
if (item.position === 'left') { |
|
||||
item.offset = 100 * leftIndex; |
|
||||
leftIndex += 1; |
|
||||
} else { |
|
||||
item.offset = 80 * rightIndex; |
|
||||
rightIndex += 1; |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
return yAxisData; |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 生成series数据 |
|
||||
* @param {Object} data |
|
||||
* @param {Object[]} yAxis |
|
||||
* @returns {({data: ([]|number|string|*), name: string, type: string}|{data: ([]|number|BufferSource|string|*), name: string, type: string, yAxisIndex: number}|{data: ([]|string|*), name: string, type: string, yAxisIndex: number}|{data: ([]|string|*), name: string, type: string, yAxisIndex: number}|{data: [], name: string, type: string, yAxisIndex: number})[]|*[]} |
|
||||
*/ |
|
||||
function generateSeries(data, yAxis) { |
|
||||
const seriesArr = generateDefaultSeries(data); |
|
||||
const showArr = seriesArr.filter(item => yAxis.find(y => y.name === item.name)); |
|
||||
const hideArr = seriesArr.filter(item => !yAxis.find(y => y.name === item.name)); |
|
||||
const result = [...showArr, ...hideArr]; |
|
||||
result.forEach(item => { |
|
||||
item.itemStyle = { color: itemColor[item.name] }; |
|
||||
if (item.name.includes('电流')) { |
|
||||
item.yAxisIndex = 0; |
|
||||
} else if (item.name.includes('温度')) { |
|
||||
item.yAxisIndex = 1; |
|
||||
} else if (item.name.includes('湿度')) { |
|
||||
item.yAxisIndex = 2; |
|
||||
} else if (item.name.includes('SO2')) { |
|
||||
item.yAxisIndex = 3; |
|
||||
} else if (item.name.includes('阻抗')) { |
|
||||
item.yAxisIndex = 4; |
|
||||
} |
|
||||
}); |
|
||||
return result || []; |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 计算图表grid left right值 |
|
||||
* @param {Object[]} yAxis |
|
||||
* @returns {{left: number, right: number}} |
|
||||
*/ |
|
||||
function generateGrid(yAxis) { |
|
||||
const left = []; |
|
||||
const right = []; |
|
||||
yAxis.forEach(item => { |
|
||||
if (item.show) { |
|
||||
if (item.position === 'left') { |
|
||||
left.push(item.offset || 0); |
|
||||
} else { |
|
||||
right.push(item.offset || 0); |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
return { |
|
||||
left: max(left) + 100, |
|
||||
right: max(right) + 80, |
|
||||
}; |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 生成chart参数 |
|
||||
* @param {Object[]} rawData 返回段返回的data数据 |
|
||||
* @param {Object} selected 选中的legend |
|
||||
* @returns {{yAxis: ({axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string})[], xAxis: [{data: *[], axisTick: {alignWithLabel: boolean}, type: string}], color: [string,string,string,string,string,string,string,string,string], grid: {left: number, right: number}, legend: {data: [string,string,string,string,string,string,string,string,string], type: string, selected}, series: (({data: ([]|number|string|*), name: string, type: string}|{data: ([]|number|BufferSource|string|*), name: string, type: string, yAxisIndex: number}|{data: ([]|string|*), name: string, type: string, yAxisIndex: number}|{data: [], name: string, type: string, yAxisIndex: number})[]|*[]), tooltip: {axisPointer: {type: string, snap: boolean}, trigger: string}, dataZoom: [{type: string},{type: string}]}} |
|
||||
*/ |
|
||||
export function generateChartOption(rawData, selected) { |
|
||||
const data = generateParams(rawData); |
|
||||
const yAxis = generateYAxis(selected); |
|
||||
const series = generateSeries(data, yAxis); |
|
||||
const grid = generateGrid(yAxis); |
|
||||
const option = { |
|
||||
color: colors, |
|
||||
tooltip: { |
|
||||
trigger: 'axis', |
|
||||
axisPointer: { |
|
||||
type: 'cross', |
|
||||
snap: true, |
|
||||
}, |
|
||||
}, |
|
||||
grid, |
|
||||
legend: { |
|
||||
type: 'scroll', |
|
||||
right: 140, |
|
||||
selected, |
|
||||
data: legendData, |
|
||||
}, |
|
||||
dataZoom: [{ type: 'inside' }, { type: 'slider' }], |
|
||||
xAxis: [ |
|
||||
{ |
|
||||
type: 'category', |
|
||||
axisTick: { alignWithLabel: true }, |
|
||||
data: data.time, |
|
||||
}, |
|
||||
], |
|
||||
yAxis, |
|
||||
series, |
|
||||
}; |
|
||||
return option; |
|
||||
} |
|
||||
@ -1,16 +0,0 @@ |
|||||
import dayjs from 'dayjs'; |
|
||||
|
|
||||
/** |
|
||||
* 格式化时间 |
|
||||
* @param {string | number} time 时间戳字符串或数字 |
|
||||
* @param {string} formatStyle |
|
||||
* @returns |
|
||||
*/ |
|
||||
export function formatMsTime(time, formatStyle = 'YYYY-MM-DD HH:mm:ss') { |
|
||||
return dayjs(new Date(+time)).format(formatStyle); |
|
||||
} |
|
||||
|
|
||||
// 图表时间轴的时间格式化
|
|
||||
export function formatChartTime(time) { |
|
||||
return formatMsTime(time, 'MM/DD HH:mm'); |
|
||||
} |
|
||||
Loading…
Reference in new issue