From 0f1e55e2d4562b5adba0ed1c4c492b81515691c7 Mon Sep 17 00:00:00 2001 From: wally <18603454788@163.com> Date: Wed, 5 Jan 2022 09:51:54 +0800 Subject: [PATCH] feat: project created --- index.html | 2 +- src/config/chart.js | 192 ----------------------------------- src/config/config.js | 164 ------------------------------ src/config/log.js | 110 -------------------- src/hooks/useDeviceCreate.js | 19 ---- src/utils/overview.js | 128 ----------------------- src/utils/statistical.js | 181 --------------------------------- src/utils/time.js | 16 --- 8 files changed, 1 insertion(+), 811 deletions(-) delete mode 100644 src/config/chart.js delete mode 100644 src/config/config.js delete mode 100644 src/config/log.js delete mode 100644 src/hooks/useDeviceCreate.js delete mode 100644 src/utils/overview.js delete mode 100644 src/utils/statistical.js delete mode 100644 src/utils/time.js diff --git a/index.html b/index.html index bdc8a3d..c5ec519 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - 时物链条插件商城 + 时物链条插件商城
diff --git a/src/config/chart.js b/src/config/chart.js deleted file mode 100644 index 6648ee9..0000000 --- a/src/config/chart.js +++ /dev/null @@ -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, - }, - ]; -} diff --git a/src/config/config.js b/src/config/config.js deleted file mode 100644 index 72f6c4f..0000000 --- a/src/config/config.js +++ /dev/null @@ -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', - }, -}; diff --git a/src/config/log.js b/src/config/log.js deleted file mode 100644 index 3932943..0000000 --- a/src/config/log.js +++ /dev/null @@ -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: '人工上报', - }, -}; diff --git a/src/hooks/useDeviceCreate.js b/src/hooks/useDeviceCreate.js deleted file mode 100644 index 495cd03..0000000 --- a/src/hooks/useDeviceCreate.js +++ /dev/null @@ -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, - }; -} diff --git a/src/utils/overview.js b/src/utils/overview.js deleted file mode 100644 index ada22de..0000000 --- a/src/utils/overview.js +++ /dev/null @@ -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 }, - }, - ], - }, - ], - }; -} diff --git a/src/utils/statistical.js b/src/utils/statistical.js deleted file mode 100644 index 3af791a..0000000 --- a/src/utils/statistical.js +++ /dev/null @@ -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; -} diff --git a/src/utils/time.js b/src/utils/time.js deleted file mode 100644 index 570bcf7..0000000 --- a/src/utils/time.js +++ /dev/null @@ -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'); -}