commit
f8c235487a
39 changed files with 22899 additions and 0 deletions
@ -0,0 +1,8 @@ |
|||||
|
[*.{js,jsx,ts,tsx,vue}] |
||||
|
indent_style = space |
||||
|
indent_size = 2 |
||||
|
end_of_line = lf |
||||
|
trim_trailing_whitespace = true |
||||
|
insert_final_newline = true |
||||
|
max_line_length = 140 |
||||
|
root = true |
||||
@ -0,0 +1 @@ |
|||||
|
VITE_API_URL=http://localhost:4001 |
||||
@ -0,0 +1 @@ |
|||||
|
VITE_API_URL=http://139.196.27.233:29001 |
||||
@ -0,0 +1 @@ |
|||||
|
VITE_API_URL=https://test.tall.wiki |
||||
@ -0,0 +1,9 @@ |
|||||
|
node_modules |
||||
|
dist/ |
||||
|
test |
||||
|
build/ |
||||
|
babel.config.js |
||||
|
package.json |
||||
|
postcss.config.js |
||||
|
.eslintrc.js |
||||
|
vite.config.js |
||||
@ -0,0 +1,56 @@ |
|||||
|
module.exports = { |
||||
|
env: { |
||||
|
browser: true, |
||||
|
es2021: true, |
||||
|
}, |
||||
|
extends: ['plugin:vue/essential', 'airbnb-base', 'plugin:prettier/recommended'], |
||||
|
parserOptions: { |
||||
|
ecmaVersion: 12, |
||||
|
sourceType: 'module', |
||||
|
}, |
||||
|
plugins: ['vue'], |
||||
|
rules: { |
||||
|
'import/no-unresolved': 0, |
||||
|
'import/extensions': 0, |
||||
|
'import/no-extraneous-dependencies': 0, |
||||
|
'no-plusplus': 0, |
||||
|
'no-use-before-define': [ |
||||
|
'error', |
||||
|
{ |
||||
|
functions: false, |
||||
|
classes: true, |
||||
|
variables: true, |
||||
|
}, |
||||
|
], |
||||
|
'consistent-return': 0, |
||||
|
'vue/html-self-closing': 'off', |
||||
|
'no-unused-expressions': 'off', |
||||
|
'vue/no-mutating-props': 'off', |
||||
|
'vue/no-multiple-template-root': 'off', |
||||
|
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', |
||||
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', |
||||
|
'no-param-reassign': 'off', |
||||
|
'max-len': [ |
||||
|
'error', |
||||
|
{ |
||||
|
code: 140, |
||||
|
tabWidth: 2, |
||||
|
}, |
||||
|
], |
||||
|
'object-curly-newline': ['error', { multiline: true }], |
||||
|
'arrow-parens': ['error', 'as-needed'], |
||||
|
'linebreak-style': 'off', |
||||
|
'vue/attributes-order': 'off', |
||||
|
'vue/singleline-html-element-content-newline': 'off', |
||||
|
'vue/max-attributes-per-line': 'off', |
||||
|
'vue/multiline-html-element-content-newline': 'off', |
||||
|
'vue/html-indent': 'off', |
||||
|
'vue/html-closing-bracket-newline': [ |
||||
|
'error', |
||||
|
{ |
||||
|
singleline: 'never', |
||||
|
multiline: 'always', |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
@ -0,0 +1,8 @@ |
|||||
|
node_modules |
||||
|
.DS_Store |
||||
|
dist |
||||
|
dist-ssr |
||||
|
*.local |
||||
|
.eslintcache |
||||
|
.idea |
||||
|
.vscode |
||||
@ -0,0 +1,4 @@ |
|||||
|
#!/bin/sh |
||||
|
. "$(dirname "$0")/_/husky.sh" |
||||
|
|
||||
|
npx lint-staged |
||||
@ -0,0 +1 @@ |
|||||
|
registry=https://registry.npm.taobao.org |
||||
@ -0,0 +1,13 @@ |
|||||
|
{ |
||||
|
"printWidth": 140, |
||||
|
"singleQuote": true, |
||||
|
"semi": true, |
||||
|
"trailingComma": "all", |
||||
|
"arrowParens": "avoid", |
||||
|
"tabWidth": 2, |
||||
|
"useTabs": false, |
||||
|
"bracketSpacing": true, |
||||
|
"jsxBracketSameLine": false, |
||||
|
"proseWrap": "always", |
||||
|
"endOfLine": "lf" |
||||
|
} |
||||
@ -0,0 +1,7 @@ |
|||||
|
# Vue 3 + Vite |
||||
|
|
||||
|
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. |
||||
|
|
||||
|
## Recommended IDE Setup |
||||
|
|
||||
|
- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) |
||||
@ -0,0 +1,18 @@ |
|||||
|
const path = require('path'); |
||||
|
|
||||
|
const resolve = dir => path.join(__dirname, dir); |
||||
|
|
||||
|
module.exports = { |
||||
|
resolve: { |
||||
|
alias: { |
||||
|
'~': __dirname, |
||||
|
'@': resolve('src'), |
||||
|
views: resolve('src/views'), |
||||
|
components: resolve('src/components'), |
||||
|
assets: resolve('src/assets'), |
||||
|
utils: resolve('src/utils'), |
||||
|
store: resolve('src/store'), |
||||
|
apis: resolve('src/apis'), |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
@ -0,0 +1 @@ |
|||||
|
module.exports = {extends: ['@commitlint/config-angular']}; |
||||
@ -0,0 +1,13 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8" /> |
||||
|
<link rel="icon" href="/favicon.ico" /> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
|
<title>时物链条插件商城</title></title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div id="app"></div> |
||||
|
<script type="module" src="/src/main.js"></script> |
||||
|
</body> |
||||
|
</html> |
||||
File diff suppressed because it is too large
@ -0,0 +1,74 @@ |
|||||
|
{ |
||||
|
"name": "vue3-vite-template", |
||||
|
"version": "0.0.0", |
||||
|
"scripts": { |
||||
|
"dev": "vite --mode test", |
||||
|
"dev:prod": "vite --mode production", |
||||
|
"dev-test": "vite --mode development", |
||||
|
"build:test": "vite build --mode test", |
||||
|
"build": "vite build --mode production", |
||||
|
"serve": "vite preview", |
||||
|
"cz": "git add . && git cz", |
||||
|
"format": "prettier --write ./src", |
||||
|
"lint": "eslint ./src --ext .vue,.js,.ts", |
||||
|
"fix": "eslint --fix ./src --ext .vue,.js,.ts", |
||||
|
"prepare": "husky install" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"@vitejs/plugin-vue": "^1.9.3", |
||||
|
"axios": "^0.23.0", |
||||
|
"dayjs": "^1.10.7", |
||||
|
"echarts": "^5.2.2", |
||||
|
"element-plus": "^1.1.0-beta.24", |
||||
|
"lodash": "^4.17.21", |
||||
|
"vite": "^2.6.4", |
||||
|
"vite-plugin-compression": "^0.3.5", |
||||
|
"vite-plugin-windicss": "^1.4.11", |
||||
|
"vue": "^3.2.16", |
||||
|
"vue-router": "^4.0.12", |
||||
|
"vuex": "^4.0.2", |
||||
|
"windicss": "^3.1.9" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@commitlint/cli": "^13.2.1", |
||||
|
"@commitlint/config-angular": "^13.2.0", |
||||
|
"commitizen": "^4.2.4", |
||||
|
"cz-conventional-changelog": "^3.3.0", |
||||
|
"eslint": "^7.32.0", |
||||
|
"eslint-config-airbnb-base": "^14.2.1", |
||||
|
"eslint-config-prettier": "^8.3.0", |
||||
|
"eslint-plugin-html": "^6.2.0", |
||||
|
"eslint-plugin-import": "^2.25.2", |
||||
|
"eslint-plugin-prettier": "^4.0.0", |
||||
|
"eslint-plugin-vue": "^7.19.1", |
||||
|
"husky": "^7.0.2", |
||||
|
"lint-staged": "^11.2.3", |
||||
|
"prettier": "^2.4.1", |
||||
|
"unplugin-vue-components": "^0.15.6", |
||||
|
"vite-plugin-linter": "^1.0.1", |
||||
|
"vite-plugin-pwa": "^0.11.6" |
||||
|
}, |
||||
|
"browserslist": [ |
||||
|
"Android >= 4", |
||||
|
"ios >= 8" |
||||
|
], |
||||
|
"config": { |
||||
|
"commitizen": { |
||||
|
"path": "./node_modules/cz-conventional-changelog" |
||||
|
} |
||||
|
}, |
||||
|
"lint-staged": { |
||||
|
"src/**/*.{js,ts,jsx,json,css,vue}": [ |
||||
|
"eslint --fix", |
||||
|
"git add" |
||||
|
], |
||||
|
"*.js": "eslint --cache --fix" |
||||
|
}, |
||||
|
"husky": { |
||||
|
"hooks": { |
||||
|
"prepare-commit-msg": "exec < /dev/tty && git cz --hook || true", |
||||
|
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS", |
||||
|
"pre-commit": "lint-staged" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,44 @@ |
|||||
|
<template> |
||||
|
<el-config-provider :locale="local"> |
||||
|
<el-container> |
||||
|
<router-view></router-view> |
||||
|
</el-container> |
||||
|
</el-config-provider> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { useStore } from 'vuex'; |
||||
|
import { useRouter } from 'vue-router'; |
||||
|
|
||||
|
const store = useStore(); |
||||
|
const router = useRouter(); |
||||
|
const userString = sessionStorage.getItem('user'); |
||||
|
|
||||
|
if (userString) { |
||||
|
const user = JSON.parse(userString); |
||||
|
store.commit('user/setUser', user); |
||||
|
} else { |
||||
|
router.push({ name: 'signin' }); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
html, |
||||
|
body, |
||||
|
#app, |
||||
|
#app > section { |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.el-menu { |
||||
|
min-height: 100%; |
||||
|
} |
||||
|
|
||||
|
.el-form--label-top .el-form-item__label { |
||||
|
padding-bottom: 0 !important; |
||||
|
} |
||||
|
|
||||
|
.el-form-item { |
||||
|
margin-bottom: 10px !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,15 @@ |
|||||
|
// noinspection SpellCheckingInspection
|
||||
|
|
||||
|
import http from 'utils/axios'; |
||||
|
|
||||
|
const apiUrl = import.meta.env.VITE_API_URL; |
||||
|
const users = `${apiUrl}/gateway/tall3/v3.0/users`; |
||||
|
|
||||
|
// 根据userId 获取token
|
||||
|
export const getToken = userId => http.get(`${users}/userId`, { params: { userId } }); |
||||
|
|
||||
|
// 登录
|
||||
|
export const signIn = params => http.post(`${users}/signin`, params); |
||||
|
|
||||
|
// 修改密码
|
||||
|
export const changePassword = params => http.post(`${users}/password/account`, params); |
||||
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 71 KiB |
@ -0,0 +1,56 @@ |
|||||
|
<template> |
||||
|
<div class="flex items-center justify-between pr-5 shadow-sm"> |
||||
|
<h1 class="text-lg font-medium py-3 px-6"> |
||||
|
<i |
||||
|
v-if="menu.show" |
||||
|
:class="{ 'text-gray-800': !menu.collapse, 'text-gray-400': menu.collapse }" |
||||
|
class="el-icon-guide mr-2" |
||||
|
@click="toggleCollapse" |
||||
|
></i> |
||||
|
智能大气腐蚀监测平台【{{ $route.meta.title }}】 |
||||
|
</h1> |
||||
|
|
||||
|
<el-dropdown> |
||||
|
<span class="flex items-center"> |
||||
|
<el-avatar class="mr-2" size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar> |
||||
|
<div class="mr-3">{{ account }}</div> |
||||
|
<el-icon class="el-icon--right"> |
||||
|
<ArrowDown /> |
||||
|
</el-icon> |
||||
|
</span> |
||||
|
<template #dropdown> |
||||
|
<el-dropdown-menu> |
||||
|
<el-dropdown-item @click="openChangePassword">修改密码</el-dropdown-item> |
||||
|
<el-dropdown-item @click="signOut">退出登录</el-dropdown-item> |
||||
|
</el-dropdown-menu> |
||||
|
</template> |
||||
|
</el-dropdown> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { computed } from 'vue'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
import { useRouter } from 'vue-router'; |
||||
|
import { ArrowDown } from '@element-plus/icons'; |
||||
|
|
||||
|
const store = useStore(); |
||||
|
const router = useRouter(); |
||||
|
const toggleCollapse = () => { |
||||
|
console.log('Toggle Collapse'); |
||||
|
store.commit('toggleCollapse'); |
||||
|
}; |
||||
|
const menu = computed(() => store.state.menu); |
||||
|
const account = computed(() => store.getters['user/account']); |
||||
|
|
||||
|
// 打开修改密码的页面 |
||||
|
function openChangePassword() { |
||||
|
router.push({ name: 'pw-change' }); |
||||
|
} |
||||
|
|
||||
|
// 退出登录 |
||||
|
function signOut() { |
||||
|
store.commit('user/setUser', null); |
||||
|
router.push({ name: 'signin' }); |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,192 @@ |
|||||
|
/* 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, |
||||
|
}, |
||||
|
]; |
||||
|
} |
||||
@ -0,0 +1,164 @@ |
|||||
|
// 网络参数设置
|
||||
|
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', |
||||
|
}, |
||||
|
}; |
||||
@ -0,0 +1,110 @@ |
|||||
|
// 功能码
|
||||
|
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: '人工上报', |
||||
|
}, |
||||
|
}; |
||||
@ -0,0 +1,19 @@ |
|||||
|
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, |
||||
|
}; |
||||
|
} |
||||
@ -0,0 +1,11 @@ |
|||||
|
import 'virtual:windi.css'; |
||||
|
import 'element-plus/dist/index.css'; |
||||
|
|
||||
|
import { createApp } from 'vue'; |
||||
|
import App from './App.vue'; |
||||
|
import router from './routers/index'; |
||||
|
import store from './store/index'; |
||||
|
|
||||
|
const app = createApp(App); |
||||
|
|
||||
|
app.use(router).use(store).mount('#app'); |
||||
@ -0,0 +1,52 @@ |
|||||
|
import { createRouter, createWebHistory } from 'vue-router'; |
||||
|
// 还有 createWebHashHistory 和 createMemoryHistory
|
||||
|
|
||||
|
export const routes = [ |
||||
|
// {
|
||||
|
// path: '/store/overview',
|
||||
|
// name: 'overview',
|
||||
|
// meta: {
|
||||
|
// title: '设备概览',
|
||||
|
// icon: 'el-icon-data-board',
|
||||
|
// },
|
||||
|
// component: () => import('@/views/overview.vue'),
|
||||
|
// },
|
||||
|
]; |
||||
|
|
||||
|
export const user = [ |
||||
|
{ |
||||
|
path: '/store/user/signin', |
||||
|
name: 'signin', |
||||
|
meta: {}, |
||||
|
component: () => import('views/user/sign-in.vue'), |
||||
|
}, |
||||
|
{ |
||||
|
path: '/store/user/pw-change', |
||||
|
name: 'pw-change', |
||||
|
meta: {}, |
||||
|
component: () => import('views/user/pw-change.vue'), |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const router = createRouter({ |
||||
|
history: createWebHistory(), |
||||
|
routes: [ |
||||
|
{ |
||||
|
path: '/', |
||||
|
redirect: '/store/user/signin', |
||||
|
}, |
||||
|
{ |
||||
|
path: '/store', |
||||
|
redirect: '/store/user/signin', |
||||
|
}, |
||||
|
{ |
||||
|
path: '/store/home', |
||||
|
name: 'home', |
||||
|
component: () => import('views/Index.vue'), |
||||
|
children: routes, |
||||
|
}, |
||||
|
...user, |
||||
|
], |
||||
|
}); |
||||
|
|
||||
|
export default router; |
||||
@ -0,0 +1,14 @@ |
|||||
|
import { createStore } from 'vuex'; |
||||
|
import user from './user'; |
||||
|
|
||||
|
export default createStore({ |
||||
|
modules: { user }, |
||||
|
state: { menu: { show: true, collapse: false } }, |
||||
|
getters: {}, |
||||
|
mutations: { |
||||
|
toggleCollapse(state) { |
||||
|
state.menu.collapse = !state.menu.collapse; |
||||
|
}, |
||||
|
}, |
||||
|
actions: {}, |
||||
|
}); |
||||
@ -0,0 +1,61 @@ |
|||||
|
import { getToken } from 'apis/index'; |
||||
|
|
||||
|
export default { |
||||
|
namespaced: true, |
||||
|
|
||||
|
state: { user: null }, |
||||
|
|
||||
|
getters: { |
||||
|
token({ user }) { |
||||
|
if (!user) return null; |
||||
|
return user.token; |
||||
|
}, |
||||
|
userId({ user }) { |
||||
|
if (!user) return null; |
||||
|
return user.id; |
||||
|
}, |
||||
|
account({ user }) { |
||||
|
if (!user) return null; |
||||
|
return user.account; |
||||
|
}, |
||||
|
isAdmin({ user }) { |
||||
|
if (!user) return false; |
||||
|
return user.account === 'iacdadmin'; |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
mutations: { |
||||
|
/** |
||||
|
* 设置state.user |
||||
|
* @param {*} state |
||||
|
* @param {object|null} user 用户信息 |
||||
|
*/ |
||||
|
setUser(state, user) { |
||||
|
state.user = user; |
||||
|
if (user) { |
||||
|
sessionStorage.setItem('token', user.token); |
||||
|
sessionStorage.setItem('user', JSON.stringify(user)); |
||||
|
} else { |
||||
|
sessionStorage.removeItem('token'); |
||||
|
sessionStorage.removeItem('user'); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
actions: { |
||||
|
/** |
||||
|
* 根据userId获取token级user信息 |
||||
|
* @param {*} param0 |
||||
|
* @param {string} userId 用户id |
||||
|
*/ |
||||
|
async getTokenByUserId({ commit }, userId) { |
||||
|
try { |
||||
|
const data = await getToken(userId); |
||||
|
commit('setUser', data || null); |
||||
|
return data; |
||||
|
} catch (error) { |
||||
|
throw new Error(error); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
@ -0,0 +1,51 @@ |
|||||
|
import Axios from 'axios'; |
||||
|
import { ElMessage } from 'element-plus'; |
||||
|
import store from 'store'; |
||||
|
|
||||
|
const baseUrl = '/gateway'; |
||||
|
|
||||
|
const instance = Axios.create({ |
||||
|
baseUrl, |
||||
|
timeout: 20000, |
||||
|
}); |
||||
|
|
||||
|
// request
|
||||
|
instance.interceptors.request.use( |
||||
|
config => { |
||||
|
const token = store.getters['user/token'] || sessionStorage.getItem('token'); |
||||
|
if (token) { |
||||
|
config.headers.Authorization = `Bearer ${token}`; |
||||
|
} |
||||
|
return config; |
||||
|
}, |
||||
|
error => { |
||||
|
return Promise.reject(error); |
||||
|
}, |
||||
|
); |
||||
|
|
||||
|
// response
|
||||
|
instance.interceptors.response.use( |
||||
|
response => { |
||||
|
if (response.status !== 200 || !response.data) { |
||||
|
return Promise.reject(response.statusText); |
||||
|
} |
||||
|
const { code, data, msg } = response.data; |
||||
|
if (code === 200) { |
||||
|
return data; |
||||
|
} |
||||
|
return Promise.reject(msg); |
||||
|
}, |
||||
|
error => { |
||||
|
if (error.response && error.response.data) { |
||||
|
const code = error.response.status; |
||||
|
const msg = error.response.data.message; |
||||
|
ElMessage.error(`Code: ${code}, Message: ${msg}`); |
||||
|
console.error(`[Axios Error]`, error.response); |
||||
|
} else { |
||||
|
// ElMessage.error(`${error}`);
|
||||
|
} |
||||
|
return Promise.reject(error); |
||||
|
}, |
||||
|
); |
||||
|
|
||||
|
export default instance; |
||||
@ -0,0 +1,128 @@ |
|||||
|
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 }, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
} |
||||
@ -0,0 +1,181 @@ |
|||||
|
/* 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; |
||||
|
} |
||||
@ -0,0 +1,16 @@ |
|||||
|
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'); |
||||
|
} |
||||
@ -0,0 +1,3 @@ |
|||||
|
<template> |
||||
|
index.vue |
||||
|
</template> |
||||
@ -0,0 +1,114 @@ |
|||||
|
<template> |
||||
|
<div class="wrap"> |
||||
|
<div class="content border rounded-md"> |
||||
|
<h1 class="text-2xl text-center font-bold mb-10 text-gray-700">智能大气腐蚀监测云平台</h1> |
||||
|
<el-form ref="passwordChangeFormRef" :model="passwordChangeForm" :rules="rules" label-width="70px" status-icon> |
||||
|
<el-form-item class="mb-3" label="账号" prop="account" style="margin-bottom: 22px !important"> |
||||
|
<el-input v-model="passwordChangeForm.account" type="text"></el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="旧密码" prop="passwordOld" style="margin-bottom: 22px !important"> |
||||
|
<el-input v-model="passwordChangeForm.passwordOld" type="password"></el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="新密码" prop="passwordNew" style="margin-bottom: 22px !important"> |
||||
|
<el-input v-model="passwordChangeForm.passwordNew" type="password"></el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item> |
||||
|
<el-button class="float-left" style="display: block; margin-bottom: 22px !important" type="primary" @click="onSubmit"> |
||||
|
确认修改 |
||||
|
</el-button> |
||||
|
<el-button class="float-right" type="text"> |
||||
|
<router-link to="signin">返回登录</router-link> |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { reactive, ref } from 'vue'; |
||||
|
import { changePassword } from 'apis'; |
||||
|
import { ElMessage } from 'element-plus'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
import { useRouter } from 'vue-router'; |
||||
|
|
||||
|
const store = useStore(); |
||||
|
const router = useRouter(); |
||||
|
const passwordChangeFormRef = ref(null); |
||||
|
const passwordChangeForm = reactive({ |
||||
|
account: '', |
||||
|
passwordOld: '', |
||||
|
passwordNew: '', |
||||
|
}); |
||||
|
|
||||
|
const rules = reactive({ |
||||
|
account: [ |
||||
|
{ |
||||
|
required: true, |
||||
|
message: '请输入账号', |
||||
|
trigger: 'blur', |
||||
|
}, |
||||
|
], |
||||
|
passwordOld: [ |
||||
|
{ |
||||
|
required: true, |
||||
|
message: '请输入旧密码', |
||||
|
trigger: 'blur', |
||||
|
}, |
||||
|
], |
||||
|
passwordNew: [ |
||||
|
{ |
||||
|
required: true, |
||||
|
message: '请输入新密码', |
||||
|
trigger: 'blur', |
||||
|
}, |
||||
|
], |
||||
|
}); |
||||
|
|
||||
|
// 提交 |
||||
|
function onSubmit() { |
||||
|
passwordChangeFormRef.value.validate(async valid => { |
||||
|
if (valid) { |
||||
|
try { |
||||
|
const params = { ...passwordChangeForm }; |
||||
|
const resData = await changePassword(params); |
||||
|
store.commit('user/setUser', resData); |
||||
|
ElMessage.success('修改成功'); |
||||
|
setTimeout(() => { |
||||
|
// 跳转到首页 |
||||
|
router.push({ name: 'signin' }); |
||||
|
}, 1000); |
||||
|
} catch (error) { |
||||
|
ElMessage.error(error); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.wrap { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
background: url('@/assets/u1.jpg') no-repeat center center; |
||||
|
background-size: cover; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
width: 480px; |
||||
|
padding: 30px; |
||||
|
background: #fff; |
||||
|
} |
||||
|
|
||||
|
.content :deep(.el-form-item) { |
||||
|
display: flex; |
||||
|
margin-bottom: 22px !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,106 @@ |
|||||
|
<template> |
||||
|
<div class="wrap"> |
||||
|
<div class="content border rounded-md"> |
||||
|
<h1 class="text-2xl text-center font-bold mb-10 text-gray-700">时物链条插件商城</h1> |
||||
|
<el-form ref="signInFormRef" :model="signInForm" :rules="rules" label-width="60px" status-icon> |
||||
|
<el-form-item class="mb-3" label="账号" prop="username" style="margin-bottom: 22px !important"> |
||||
|
<el-input v-model="signInForm.username" type="text"></el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="密码" prop="password" style="margin-bottom: 22px !important"> |
||||
|
<el-input v-model="signInForm.password" type="password"></el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item> |
||||
|
<el-button class="float-left" style="display: block; margin-bottom: 22px !important" type="primary" @click="onSubmit"> |
||||
|
立即登录 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { reactive, ref } from 'vue'; |
||||
|
import { signIn } from 'apis'; |
||||
|
import { ElMessage } from 'element-plus'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
import { useRouter } from 'vue-router'; |
||||
|
|
||||
|
const store = useStore(); |
||||
|
const router = useRouter(); |
||||
|
const signInFormRef = ref(null); |
||||
|
const signInForm = reactive({ |
||||
|
username: '', |
||||
|
password: '', |
||||
|
}); |
||||
|
|
||||
|
const rules = reactive({ |
||||
|
username: [ |
||||
|
{ |
||||
|
required: true, |
||||
|
message: '请输入账号', |
||||
|
trigger: 'blur', |
||||
|
}, |
||||
|
], |
||||
|
password: [ |
||||
|
{ |
||||
|
required: true, |
||||
|
message: '请输入密码', |
||||
|
trigger: 'blur', |
||||
|
}, |
||||
|
], |
||||
|
}); |
||||
|
|
||||
|
// 提交 |
||||
|
function onSubmit() { |
||||
|
signInFormRef.value.validate(async valid => { |
||||
|
if (valid) { |
||||
|
try { |
||||
|
const params = { |
||||
|
client: 1, |
||||
|
data: { |
||||
|
identifier: signInForm.username, |
||||
|
credential: signInForm.password, |
||||
|
}, |
||||
|
type: 3, |
||||
|
}; |
||||
|
const resData = await signIn(params); |
||||
|
store.commit('user/setUser', resData); |
||||
|
ElMessage.success('登录成功， 欢迎回来'); |
||||
|
setTimeout(() => { |
||||
|
// 跳转到首页 |
||||
|
router.push({ name: 'home' }); |
||||
|
}, 1000); |
||||
|
} catch (error) { |
||||
|
ElMessage.error(error); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.wrap { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
background: url('@/assets/u1.jpg') no-repeat center center; |
||||
|
background-size: cover; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
width: 480px; |
||||
|
padding: 30px; |
||||
|
background: #fff; |
||||
|
} |
||||
|
|
||||
|
.content :deep(.el-form-item) { |
||||
|
display: flex; |
||||
|
margin-bottom: 22px !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,39 @@ |
|||||
|
import Components from 'unplugin-vue-components/vite'; |
||||
|
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'; |
||||
|
import { VitePWA } from 'vite-plugin-pwa'; |
||||
|
import WindiCSS from 'vite-plugin-windicss'; |
||||
|
import { defineConfig } from 'vite'; |
||||
|
import path from 'path'; |
||||
|
import viteCompression from 'vite-plugin-compression'; |
||||
|
import vue from '@vitejs/plugin-vue'; |
||||
|
|
||||
|
const resolve = dir => path.join(__dirname, dir); |
||||
|
|
||||
|
// https://vitejs.dev/config/
|
||||
|
export default defineConfig({ |
||||
|
base: '/store/', |
||||
|
plugins: [vue(), VitePWA(), WindiCSS(), Components({ resolvers: [ElementPlusResolver()] }), viteCompression()], |
||||
|
resolve: { |
||||
|
alias: { |
||||
|
'~': __dirname, |
||||
|
'@': resolve('src'), |
||||
|
views: resolve('src/views'), |
||||
|
components: resolve('src/components'), |
||||
|
assets: resolve('src/assets'), |
||||
|
utils: resolve('src/utils'), |
||||
|
store: resolve('src/store'), |
||||
|
apis: resolve('src/apis'), |
||||
|
}, |
||||
|
}, |
||||
|
build: { |
||||
|
rollupOptions: { |
||||
|
output: { |
||||
|
manualChunks(id) { |
||||
|
if (id.includes('node_modules')) { |
||||
|
return id.toString().split('node_modules/')[1].split('/')[0].toString(); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}); |
||||
File diff suppressed because it is too large
Loading…
Reference in new issue