TALL
/
plugin-store
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: project created

master
wally 4 years ago
parent
f8c235487a
commit
0f1e55e2d4
8 changed files with 1 additions and 811 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      index.html
  2. 192
      src/config/chart.js
  3. 164
      src/config/config.js
  4. 110
      src/config/log.js
  5. 19
      src/hooks/useDeviceCreate.js
  6. 128
      src/utils/overview.js
  7. 181
      src/utils/statistical.js
  8. 16
      src/utils/time.js

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>时物链条插件商城</title></title>
<title>时物链条插件商城</title>
</head>
<body>
<div id="app"></div>

192
src/config/chart.js
View File

@ -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,
},
];
}

164
src/config/config.js
View File

@ -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',
},
};

110
src/config/log.js
View File

@ -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: '人工上报',
},
};

19
src/hooks/useDeviceCreate.js
View File

@ -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,
};
}

128
src/utils/overview.js
View File

@ -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 },
},
],
},
],
};
}

181
src/utils/statistical.js
View File

@ -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;
}

16
src/utils/time.js
View File

@ -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');
}
Write Preview
Loading…
Cancel
Save