| New file |
| | |
|---|
| | | > 1% |
|---|
| | | last 2 versions |
|---|
| | | not dead |
|---|
| New file |
| | |
|---|
| | | .DS_Store |
|---|
| | | node_modules |
|---|
| | | /dist |
|---|
| | | |
|---|
| | | |
|---|
| | | # local env files |
|---|
| | | .env.local |
|---|
| | | .env.*.local |
|---|
| | | |
|---|
| | | # Log files |
|---|
| | | npm-debug.log* |
|---|
| | | yarn-debug.log* |
|---|
| | | yarn-error.log* |
|---|
| | | pnpm-debug.log* |
|---|
| | | |
|---|
| | | # Editor directories and files |
|---|
| | | .idea |
|---|
| | | .vscode |
|---|
| | | *.suo |
|---|
| | | *.ntvs* |
|---|
| | | *.njsproj |
|---|
| | | *.sln |
|---|
| | | *.sw? |
|---|
| New file |
| | |
|---|
| | | module.exports = { |
|---|
| | | presets: [ |
|---|
| | | '@vue/cli-plugin-babel/preset' |
|---|
| | | ] |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | { |
|---|
| | | "compilerOptions": { |
|---|
| | | "baseUrl": "./", |
|---|
| | | "paths": { |
|---|
| | | "@/*": ["src/*"] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "exclude": ["node_modules", "dist"] |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | { |
|---|
| | | "name": "admin-mw", |
|---|
| | | "version": "0.1.0", |
|---|
| | | "private": true, |
|---|
| | | "scripts": { |
|---|
| | | "serve": "vue-cli-service serve", |
|---|
| | | "build": "vue-cli-service build" |
|---|
| | | }, |
|---|
| | | "dependencies": { |
|---|
| | | "axios": "^0.19.2", |
|---|
| | | "core-js": "^3.6.5", |
|---|
| | | "element-ui": "^2.13.2", |
|---|
| | | "postcss-px2rem": "^0.3.0", |
|---|
| | | "vue": "^2.6.11", |
|---|
| | | "vue-router": "^3.2.0", |
|---|
| | | "vuex": "^3.4.0" |
|---|
| | | }, |
|---|
| | | "devDependencies": { |
|---|
| | | "@vue/cli-plugin-babel": "~4.5.0", |
|---|
| | | "@vue/cli-plugin-router": "~4.5.0", |
|---|
| | | "@vue/cli-plugin-vuex": "~4.5.0", |
|---|
| | | "@vue/cli-service": "~4.5.0", |
|---|
| | | "vue-template-compiler": "^2.6.11" |
|---|
| | | } |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8"> |
|---|
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|---|
| | | <meta name="viewport" content="width=device-width,initial-scale=1.0"> |
|---|
| | | <link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
|---|
| | | <title><%= htmlWebpackPlugin.options.title %></title> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <noscript> |
|---|
| | | <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
|---|
| | | </noscript> |
|---|
| | | <div id="app"></div> |
|---|
| | | <!-- built files will be auto injected --> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | .pageLayout { |
|---|
| | | background-color: #171350; |
|---|
| | | color: #ffffff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .pageMenu { |
|---|
| | | min-height: 100%; |
|---|
| | | padding: 15px 5px; |
|---|
| | | background-image: linear-gradient(#2a3879, #222767); |
|---|
| | | border: none; |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-menu-item, |
|---|
| | | .el-submenu__title { |
|---|
| | | color: #ffffff; |
|---|
| | | height: 38px; |
|---|
| | | line-height: 38px; |
|---|
| | | padding-left: 20px !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-submenu { |
|---|
| | | margin-bottom: 30px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-submenu .el-menu-item { |
|---|
| | | height: auto; |
|---|
| | | line-height: 1.4; |
|---|
| | | padding-left: 20px !important; |
|---|
| | | padding-top: 8px; |
|---|
| | | padding-bottom: 8px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-submenu__title { |
|---|
| | | background-color: #5257b2; |
|---|
| | | border-radius: 4px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-submenu__title:hover, |
|---|
| | | .el-submenu.is-opened .el-submenu__title { |
|---|
| | | background-color: #222767; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-submenu.is-opened .el-submenu__title::before { |
|---|
| | | content: ""; |
|---|
| | | display: block; |
|---|
| | | width: 0; |
|---|
| | | height: 0; |
|---|
| | | border-top: 6px solid transparent; |
|---|
| | | border-right: 6px solid #727ef4; |
|---|
| | | border-bottom: 6px solid transparent; |
|---|
| | | position: absolute; |
|---|
| | | right: 0; |
|---|
| | | top: 50%; |
|---|
| | | margin-top: -4px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-submenu__title i { |
|---|
| | | color: #ffffff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-menu-item i { |
|---|
| | | color: #5257b2; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-submenu .el-menu { |
|---|
| | | background-color: transparent; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-menu-item:focus, |
|---|
| | | .el-menu-item:hover, |
|---|
| | | .el-menu-item.is-active { |
|---|
| | | outline: 0; |
|---|
| | | background-color: #57f8ff; |
|---|
| | | color: #212465; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-menu-item:focus i, |
|---|
| | | .el-menu-item:hover i, |
|---|
| | | .el-menu-item.is-active i { |
|---|
| | | color: #212465; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .pageHeader { |
|---|
| | | background: url('../../src/assets/images/page-head-bg.jpg') 0 0 no-repeat; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .contentBox { |
|---|
| | | background: url('../../src/assets/images/contentBox-bg.jpg') 0 0 no-repeat; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | padding: 15px 20px; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .diagram-stc canvas, |
|---|
| | | .diagram-flush canvas { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | -o-object-fit: contain; |
|---|
| | | -webkit-object-fit: contain; |
|---|
| | | object-fit: contain; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .diagram-panel { |
|---|
| | | padding: 18px; |
|---|
| | | border: 1px solid #5d69cd; |
|---|
| | | background-color: #2c3377; |
|---|
| | | border-radius: 8px; |
|---|
| | | position: absolute; |
|---|
| | | z-index: 10; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .diagram-panel .diagram-panel-title { |
|---|
| | | width: 100%; |
|---|
| | | color: #ffff13; |
|---|
| | | text-align: center; |
|---|
| | | font-size: 18px; |
|---|
| | | margin-bottom: 12px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .diagram-panel .panel-item { |
|---|
| | | width: 100%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | margin-bottom: 12px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .diagram-panel .panel-item:last-of-type { |
|---|
| | | margin-bottom: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .diagram-panel .panel-item .label { |
|---|
| | | font-size: 12px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .diagram-panel .panel-item .input { |
|---|
| | | flex: 1; |
|---|
| | | margin-left: 8px; |
|---|
| | | margin-right: 5px; |
|---|
| | | width: 80px; |
|---|
| | | font-size: 12px; |
|---|
| | | color: #ffffff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .diagram-panel .panel-item .input .el-input__inner { |
|---|
| | | line-height: 30px; |
|---|
| | | height: 30px; |
|---|
| | | background-color: #171350; |
|---|
| | | border-color: #636fd9; |
|---|
| | | width: 100%; |
|---|
| | | color: #ffffff; |
|---|
| | | font-size: 12px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .diagram-panel .panel-item .unit { |
|---|
| | | display: block; |
|---|
| | | width: 20px; |
|---|
| | | font-weight: normal; |
|---|
| | | font-size: 12px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .batter-bg { |
|---|
| | | background: url(../../src/assets/images/batter-bg.png) 0 0 no-repeat; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .circle { |
|---|
| | | width: 108px; |
|---|
| | | height: 108px; |
|---|
| | | background-color: #57f8ff; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | flex-direction: column; |
|---|
| | | border-radius: 50%; |
|---|
| | | position: absolute; |
|---|
| | | color: #150d4c; |
|---|
| | | font-size: 12px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .circle::before { |
|---|
| | | display: block; |
|---|
| | | content: ""; |
|---|
| | | width: 120px; |
|---|
| | | height: 120px; |
|---|
| | | position: absolute; |
|---|
| | | left: -7px; |
|---|
| | | top: -7px; |
|---|
| | | border: 1px solid #57f8ff; |
|---|
| | | border-radius: 50%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .customTable { |
|---|
| | | width: 100%; |
|---|
| | | background-color: #252970; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .customTable.text-center { |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .customTable th { |
|---|
| | | font-size: 16px; |
|---|
| | | font-weight: bold; |
|---|
| | | color: #57f8ff; |
|---|
| | | padding: 20px 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .customTable tr:nth-child(2n) { |
|---|
| | | background-color: #283079; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .customTable td { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #ffffff; |
|---|
| | | padding: 8px 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tipTitle { |
|---|
| | | font-size: 28px; |
|---|
| | | color: #556df3; |
|---|
| | | padding-left: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tipTitle::before { |
|---|
| | | content: ""; |
|---|
| | | width: 10px; |
|---|
| | | height: 20px; |
|---|
| | | background-color: #ffe329; |
|---|
| | | display: inline-block; |
|---|
| | | margin-right: 10px; |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <div id="app"> |
|---|
| | | <router-view></router-view> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | #app { |
|---|
| | | box-sizing: border-box; |
|---|
| | | height: 100vh; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | /*basic.css - Written by douchaoyang in September 2015*/ |
|---|
| | | body, |
|---|
| | | h1, |
|---|
| | | h2, |
|---|
| | | h3, |
|---|
| | | h4, |
|---|
| | | h5, |
|---|
| | | h6, |
|---|
| | | hr, |
|---|
| | | p, |
|---|
| | | blockquote, |
|---|
| | | dl, |
|---|
| | | dt, |
|---|
| | | dd, |
|---|
| | | ul, |
|---|
| | | ol, |
|---|
| | | li, |
|---|
| | | pre, |
|---|
| | | form, |
|---|
| | | fieldset, |
|---|
| | | legend, |
|---|
| | | button, |
|---|
| | | input, |
|---|
| | | textarea, |
|---|
| | | th, |
|---|
| | | td { |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | body, |
|---|
| | | button, |
|---|
| | | input, |
|---|
| | | select, |
|---|
| | | textarea { |
|---|
| | | font-family: "Microsoft Yahei", arial; |
|---|
| | | } |
|---|
| | | |
|---|
| | | body { |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | em, |
|---|
| | | strong, |
|---|
| | | th, |
|---|
| | | i { |
|---|
| | | font-style: normal; |
|---|
| | | font-weight: normal; |
|---|
| | | } |
|---|
| | | |
|---|
| | | h1, |
|---|
| | | h2, |
|---|
| | | h3, |
|---|
| | | h4, |
|---|
| | | h5, |
|---|
| | | h6 { |
|---|
| | | font-size: 100%; |
|---|
| | | font-weight: normal; |
|---|
| | | } |
|---|
| | | |
|---|
| | | a { |
|---|
| | | text-decoration: none; |
|---|
| | | cursor: pointer; |
|---|
| | | outline: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | table { |
|---|
| | | border-collapse: collapse; |
|---|
| | | border-spacing: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | ol, |
|---|
| | | ul, |
|---|
| | | li { |
|---|
| | | list-style: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | fieldset, |
|---|
| | | img { |
|---|
| | | border: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .clearfix:after { |
|---|
| | | content: "."; |
|---|
| | | display: block; |
|---|
| | | height: 0; |
|---|
| | | clear: both; |
|---|
| | | visibility: hidden; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .clearfix { |
|---|
| | | *zoom: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /*basic end*/ |
|---|
| | | section::-webkit-scrollbar, |
|---|
| | | div::-webkit-scrollbar { |
|---|
| | | /* 滚动条整体样式 */ |
|---|
| | | width: 3px; |
|---|
| | | height: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | section::-webkit-scrollbar-thumb, |
|---|
| | | div::-webkit-scrollbar-thumb { |
|---|
| | | /* 滚动条里面小方块 */ |
|---|
| | | border-radius: 10px; |
|---|
| | | -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); |
|---|
| | | background: #02b0bd; |
|---|
| | | } |
|---|
| | | |
|---|
| | | section::-webkit-scrollbar-track, |
|---|
| | | div::-webkit-scrollbar-track { |
|---|
| | | /* 滚动条里面轨道 */ |
|---|
| | | -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); |
|---|
| | | border-radius: 10px; |
|---|
| | | background: #003d64; |
|---|
| | | } |
|---|
| | | |
|---|
| | | * { |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | |
|---|
| | | html, |
|---|
| | | body { |
|---|
| | | background-color: #171350; |
|---|
| | | } |
|---|
| New file |
| | |
|---|
| | | /** |
|---|
| | | * @数字计算方法 |
|---|
| | | * @author (zyk) |
|---|
| | | * @returns |
|---|
| | | */ |
|---|
| | | |
|---|
| | | // 运算符 |
|---|
| | | const operators = ['+', '-', '*', '/', '(', ')']; |
|---|
| | | // 运算符优先级 |
|---|
| | | const priority = { |
|---|
| | | ')': 30, |
|---|
| | | '*': 20, |
|---|
| | | '/': 20, |
|---|
| | | '+': 10, |
|---|
| | | '-': 10, |
|---|
| | | '(': 0, |
|---|
| | | }; |
|---|
| | | // 获取小数点位数 |
|---|
| | | const calcPos = (num) => (num.toString().indexOf('.') > -1 ? num.toString().split('.')[1].length : 0); |
|---|
| | | // 忽略小数点转为整数 |
|---|
| | | const parseNum = (num) => parseInt(num.toString().replace('.', '')); |
|---|
| | | |
|---|
| | | const FC = { |
|---|
| | | // 加 |
|---|
| | | _add: (n1, n2) => { |
|---|
| | | const p1 = calcPos(n1); |
|---|
| | | const p2 = calcPos(n2); |
|---|
| | | const m = Math.pow(10, Math.max(p1, p2)); |
|---|
| | | return (FC._mul(n1, m) + FC._mul(n2, m)) / m; |
|---|
| | | }, |
|---|
| | | add: (...nums) => { |
|---|
| | | let result = nums[0]; |
|---|
| | | for (let i = 1; i < nums.length; i++) result = FC._add(result, nums[i]); |
|---|
| | | return result; |
|---|
| | | }, |
|---|
| | | // 减 |
|---|
| | | _sub: (n1, n2) => FC.add(n1, -n2), |
|---|
| | | sub: (...nums) => { |
|---|
| | | let result = nums[0]; |
|---|
| | | for (let i = 1; i < nums.length; i++) result = FC._sub(result, nums[i]); |
|---|
| | | return result; |
|---|
| | | }, |
|---|
| | | // 乘 |
|---|
| | | _mul: (n1, n2) => { |
|---|
| | | const p1 = calcPos(n1); |
|---|
| | | const p2 = calcPos(n2); |
|---|
| | | const m = Math.pow(10, p1 + p2); |
|---|
| | | return (parseNum(n1) * parseNum(n2)) / m; |
|---|
| | | }, |
|---|
| | | mul: (...nums) => { |
|---|
| | | let result = nums[0]; |
|---|
| | | for (let i = 1; i < nums.length; i++) result = FC._mul(result, nums[i]); |
|---|
| | | return result; |
|---|
| | | }, |
|---|
| | | // 除 |
|---|
| | | _div: (n1, n2) => { |
|---|
| | | const p1 = calcPos(n1); |
|---|
| | | const p2 = calcPos(n2); |
|---|
| | | const m = Math.pow(10, p2 - p1); |
|---|
| | | return FC.mul(parseNum(n1) / parseNum(n2), m); |
|---|
| | | }, |
|---|
| | | div: (...nums) => { |
|---|
| | | let result = nums[0]; |
|---|
| | | for (let i = 1; i < nums.length; i++) result = FC._div(result, nums[i]); |
|---|
| | | return result; |
|---|
| | | }, |
|---|
| | | // 表达式计算 |
|---|
| | | calc: (expression) => { |
|---|
| | | // 转化为表达式数组 |
|---|
| | | operators.map((op) => (expression = expression.split(op).join(`,${op},`))); |
|---|
| | | const eArr = expression.split(',').filter((item) => item !== ''); |
|---|
| | | |
|---|
| | | // 中缀转后缀 |
|---|
| | | const ops = []; |
|---|
| | | const result = []; |
|---|
| | | for (const item of eArr) { |
|---|
| | | // 是操作符 |
|---|
| | | if (operators.includes(item)) { |
|---|
| | | // 操作符栈为空 直接入栈 |
|---|
| | | if (ops.length === 0) ops.push(item); |
|---|
| | | else { |
|---|
| | | // 左括号 直接入栈 |
|---|
| | | if (item === '(') ops.push(item); |
|---|
| | | // 右括号 匹配括号 |
|---|
| | | else if (item === ')') { |
|---|
| | | let top = ops.pop(); |
|---|
| | | while (top !== '(') { |
|---|
| | | result.push(top); |
|---|
| | | top = ops.pop(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // 加减乘除 |
|---|
| | | else if (priority[item] > priority[ops[ops.length - 1]]) ops.push(item); |
|---|
| | | else { |
|---|
| | | while ( |
|---|
| | | ops.length > 0 && |
|---|
| | | priority[item] <= priority[ops[ops.length - 1]] |
|---|
| | | ) { |
|---|
| | | const top = ops.pop(); |
|---|
| | | result.push(top); |
|---|
| | | } |
|---|
| | | ops.push(item); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // 是数字 |
|---|
| | | else { |
|---|
| | | result.push(item); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // 多余运算符推入结果栈 |
|---|
| | | while (ops.length > 0) result.push(ops.pop()); |
|---|
| | | |
|---|
| | | // 后缀表达式计算 |
|---|
| | | const nums = []; |
|---|
| | | // let r = 0; |
|---|
| | | for (const item of result) { |
|---|
| | | // 是运算符 |
|---|
| | | if (operators.includes(item)) { |
|---|
| | | const num2 = nums.pop(); |
|---|
| | | const num1 = nums.pop(); |
|---|
| | | if (item === '+') nums.push(FC._add(num1, num2)); |
|---|
| | | if (item === '-') nums.push(FC._sub(num1, num2)); |
|---|
| | | if (item === '*') nums.push(FC._mul(num1, num2)); |
|---|
| | | if (item === '/') nums.push(FC._div(num1, num2)); |
|---|
| | | } else { |
|---|
| | | nums.push(item); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return nums[0]; |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | |
|---|
| | | export default FC; |
|---|
| New file |
| | |
|---|
| | | function Diagram() { |
|---|
| | | this.stc = ""; // 静态层canvas |
|---|
| | | this.flush = ""; // 刷新层canvas |
|---|
| | | this.s_ctx = ""; // 静态层上下文 |
|---|
| | | this.f_ctx = ""; // 刷新层上下文 |
|---|
| | | this.width = 1500; // 默认宽度 |
|---|
| | | this.height = 750; // 默认高度 |
|---|
| | | this.options = []; // 所有配置对象 |
|---|
| | | this.flushOptions = []; // 需要刷新的对象 |
|---|
| | | this.handleObj = []; // 可以触发事件的对象 |
|---|
| | | this.opts = { // 默认配置 |
|---|
| | | lineWidth: 3, // 线宽 |
|---|
| | | onOffBase: { // 开关的基础配置 |
|---|
| | | radius: 3, |
|---|
| | | width: 16, |
|---|
| | | lineWidth: 2, |
|---|
| | | }, |
|---|
| | | moveDot: { |
|---|
| | | radius: 6, |
|---|
| | | step: 2.2, |
|---|
| | | gravity: 0.08 |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | // 显示线条的id |
|---|
| | | this.showLineId = false; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 设置canvas |
|---|
| | | Diagram.prototype.setCanvas = function (stc, flush) { |
|---|
| | | // 设置静态canvas |
|---|
| | | this.stc = document.createElement('canvas'); |
|---|
| | | stc.appendChild(this.stc); |
|---|
| | | this.stc.width = this.width; |
|---|
| | | this.stc.height = this.height; |
|---|
| | | this.s_ctx = this.stc.getContext('2d'); |
|---|
| | | |
|---|
| | | // 设置动态canvas |
|---|
| | | this.flush = document.createElement('canvas'); |
|---|
| | | flush.appendChild(this.flush); |
|---|
| | | this.flush.width = this.width; |
|---|
| | | this.flush.height = this.height; |
|---|
| | | this.f_ctx = this.flush.getContext('2d'); |
|---|
| | | |
|---|
| | | this.startState = false; |
|---|
| | | |
|---|
| | | // 启动更新 |
|---|
| | | this.start(true); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | |
|---|
| | | // 启动更新 |
|---|
| | | Diagram.prototype.start = function (start) { |
|---|
| | | if (start) { |
|---|
| | | console.log('已经启动持续更新'); |
|---|
| | | this.startState = true; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 停止更新 |
|---|
| | | if (!this.startState) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | // 更新所有的配置项 |
|---|
| | | this._update(); |
|---|
| | | // 持续更新函数 |
|---|
| | | requestAnimationFrame(() => { |
|---|
| | | this.start(); |
|---|
| | | }); |
|---|
| | | this.f_ctx.save(); |
|---|
| | | this.f_ctx.fillStyle = "rgba(0, 0, 0, 0.9)"; |
|---|
| | | this.f_ctx.globalCompositeOperation = 'destination-in'; |
|---|
| | | this.f_ctx.fillRect(0, 0, this.width, this.height); |
|---|
| | | this.f_ctx.restore(); |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 停止更新 |
|---|
| | | Diagram.prototype.stop = function () { |
|---|
| | | this.startState = false; |
|---|
| | | console.log('已经停止持续更新'); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 更新整个图表 |
|---|
| | | Diagram.prototype._update = function () { |
|---|
| | | // 清空图表 |
|---|
| | | //this.f_ctx.clearRect(0, 0, this.width, this.height); |
|---|
| | | let options = this.flushOptions; |
|---|
| | | options.forEach(option => { |
|---|
| | | this.update(option); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | // 根据配置项更新图表 |
|---|
| | | Diagram.prototype.update = function (option) { |
|---|
| | | if (option && option.method && typeof this[option.method] == 'function') { |
|---|
| | | this[option.method](option); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 检测对象是否在数组中 |
|---|
| | | * |
|---|
| | | * @param {[object]} option 需要检测的对象 |
|---|
| | | * |
|---|
| | | * @param {[Array]} options 对象数组 |
|---|
| | | * |
|---|
| | | * @return {[Boolean]} 返回对象是否在对象数组中 |
|---|
| | | */ |
|---|
| | | Diagram.prototype.checkObjInArr = function (option, options) { |
|---|
| | | // 如果未设置id |
|---|
| | | if (!option.id) { |
|---|
| | | return true; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 根据id判断 |
|---|
| | | let isIn = false; |
|---|
| | | for (let i = 0; i < options.length; i++) { |
|---|
| | | let _option = options[i]; |
|---|
| | | if (option.id == _option.id) { |
|---|
| | | isIn = true; |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // 返回结果 |
|---|
| | | return isIn; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 添加配置项 |
|---|
| | | Diagram.prototype.addOptions = function (option) { |
|---|
| | | // 检测配置项是否在配置项中 |
|---|
| | | let options = this.options; |
|---|
| | | // 检测对象不在对象中 |
|---|
| | | if (!this.checkObjInArr(option, options)) { |
|---|
| | | options.push(option); |
|---|
| | | // 可刷新,添加到刷新配置项 |
|---|
| | | if (option.flush) { |
|---|
| | | this.flushOptions.push(option); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 修改配置信息 |
|---|
| | | Diagram.prototype.changeOption = function (id, attr, value, options) { |
|---|
| | | for (let i = 0; i < options.length; i++) { |
|---|
| | | let _option = options[i]; |
|---|
| | | if (id == _option.id) { |
|---|
| | | _option[attr] = value; |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 设置配置的值(仅可以设置刷新层的内容) |
|---|
| | | Diagram.prototype.setOption = function (id, attr, value) { |
|---|
| | | let options = this.flushOptions; |
|---|
| | | this.changeOption(id, attr, value, options); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 获取option |
|---|
| | | Diagram.prototype.getOption = function (id) { |
|---|
| | | let options = this.options; |
|---|
| | | let result = false; |
|---|
| | | for (let i = 0; i < options.length; i++) { |
|---|
| | | let option = options[i]; |
|---|
| | | if (option.id == id) { |
|---|
| | | result = option; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return result; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 绘制线 |
|---|
| | | Diagram.prototype.line = function (option) { |
|---|
| | | let ctx = option.flush ? this.f_ctx : this.s_ctx; // 获取上下文 |
|---|
| | | let points = option.points; |
|---|
| | | let opts = this.opts; |
|---|
| | | ctx.beginPath(); |
|---|
| | | ctx.lineWidth = option.lineWidth ? option.lineWidth : opts.lineWidth; |
|---|
| | | ctx.strokeStyle = option.strokeStyle ? option.strokeStyle : "#b370fe"; |
|---|
| | | points.forEach((point, index) => { |
|---|
| | | if (index != 0) { |
|---|
| | | ctx.lineTo(point[0], point[1]); |
|---|
| | | } else { |
|---|
| | | ctx.moveTo(point[0], point[1]); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | if (!option.hide) { |
|---|
| | | ctx.stroke(); |
|---|
| | | } |
|---|
| | | // 控制线条id显示 |
|---|
| | | if (this.showLineId) { |
|---|
| | | let point = []; |
|---|
| | | if (points[0][0] == points[1][0]) { |
|---|
| | | // 设置x轴坐标 |
|---|
| | | point[0] = points[0][0]; |
|---|
| | | // 设置y轴坐标 |
|---|
| | | if (points[0][1] > points[1][1]) { |
|---|
| | | point[1] = points[1][1] + (points[0][1] - points[1][1]) / 2; |
|---|
| | | } else { |
|---|
| | | point[1] = points[1][1] + (points[0][1] - points[1][1]) / 2; |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | // 设置y轴坐标 |
|---|
| | | point[1] = points[0][1]; |
|---|
| | | // 设置x轴坐标 |
|---|
| | | if (points[0][0] > points[1][0]) { |
|---|
| | | point[0] = points[1][0] + (points[0][0] - points[1][0]) / 2; |
|---|
| | | } else { |
|---|
| | | point[0] = points[1][0] + (points[0][0] - points[1][0]) / 2; |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | this.text({ |
|---|
| | | text: option.id ? option.id : '', |
|---|
| | | point: point, |
|---|
| | | hide: option.hide, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // 设置执行的方法 |
|---|
| | | option.method = "line"; |
|---|
| | | // 添加配置项 |
|---|
| | | this.addOptions(option); |
|---|
| | | return points; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 绘制线 |
|---|
| | | Diagram.prototype.gradientline = function (option) { |
|---|
| | | let ctx = option.flush ? this.f_ctx : this.s_ctx; // 获取上下文 |
|---|
| | | let points = option.points; |
|---|
| | | let opts = this.opts; |
|---|
| | | ctx.beginPath(); |
|---|
| | | ctx.lineWidth = option.lineWidth ? option.lineWidth : opts.lineWidth; |
|---|
| | | let color = option.gradientColor ? option.gradientColor : ['#ffa500', '#ffff1d']; |
|---|
| | | let gnt = ctx.createLinearGradient(points[0][0], points[0][1], points[1][0], points[1][1]); //线性渐变的起止坐标 |
|---|
| | | ctx.strokeStyle = gnt; |
|---|
| | | gnt.addColorStop(0, color[0]); |
|---|
| | | gnt.addColorStop(1, color[1]); |
|---|
| | | points.forEach((point, index) => { |
|---|
| | | if (index != 0) { |
|---|
| | | ctx.lineTo(point[0], point[1]); |
|---|
| | | } else { |
|---|
| | | ctx.moveTo(point[0], point[1]); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | if (!option.hide) { |
|---|
| | | ctx.stroke(); |
|---|
| | | } |
|---|
| | | // 控制线条id显示 |
|---|
| | | if (this.showLineId) { |
|---|
| | | let point = []; |
|---|
| | | if (points[0][0] == points[1][0]) { |
|---|
| | | // 设置x轴坐标 |
|---|
| | | point[0] = points[0][0]; |
|---|
| | | // 设置y轴坐标 |
|---|
| | | if (points[0][1] > points[1][1]) { |
|---|
| | | point[1] = points[1][1] + (points[0][1] - points[1][1]) / 2; |
|---|
| | | } else { |
|---|
| | | point[1] = points[1][1] + (points[0][1] - points[1][1]) / 2; |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | // 设置y轴坐标 |
|---|
| | | point[1] = points[0][1]; |
|---|
| | | // 设置x轴坐标 |
|---|
| | | if (points[0][0] > points[1][0]) { |
|---|
| | | point[0] = points[1][0] + (points[0][0] - points[1][0]) / 2; |
|---|
| | | } else { |
|---|
| | | point[0] = points[1][0] + (points[0][0] - points[1][0]) / 2; |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | this.text({ |
|---|
| | | text: option.id ? option.id : '', |
|---|
| | | point: point, |
|---|
| | | hide: option.hide, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | // 设置执行的方法 |
|---|
| | | option.method = "line"; |
|---|
| | | // 添加配置项 |
|---|
| | | this.addOptions(option); |
|---|
| | | return points; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 获取线缩放后的具体信息 |
|---|
| | | Diagram.prototype.getZoomLineInfo = function (id) { |
|---|
| | | let option = this.getOption(id) |
|---|
| | | let points = option.points; |
|---|
| | | let Xzoom = this.stc.clientWidth / this.width; |
|---|
| | | let Yzoom = this.stc.clientHeight / this.height; |
|---|
| | | let newPoints = []; |
|---|
| | | points.map((item, index) => { |
|---|
| | | let point = [] |
|---|
| | | point.push(item[0] * Xzoom); |
|---|
| | | point.push(item[1] * Yzoom); |
|---|
| | | newPoints.push(point) |
|---|
| | | }); |
|---|
| | | return newPoints |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 绘制点线 |
|---|
| | | Diagram.prototype.dashLine = function (option) { |
|---|
| | | let ctx = option.flush ? this.f_ctx : this.s_ctx; // 获取上下文 |
|---|
| | | let opts = this.opts; |
|---|
| | | let points = option.points; |
|---|
| | | ctx.beginPath(); |
|---|
| | | // 设置间距（参数为无限数组，虚线的样式会随数组循环） |
|---|
| | | ctx.setLineDash([2, 4]); |
|---|
| | | ctx.lineWidth = option.lineWidth ? option.lineWidth : opts.lineWidth; |
|---|
| | | ctx.strokeStyle = option.strokeStyle ? option.strokeStyle : "#b370fe"; |
|---|
| | | points.forEach((point, index) => { |
|---|
| | | if (index != 0) { |
|---|
| | | ctx.lineTo(point[0], point[1]); |
|---|
| | | } else { |
|---|
| | | ctx.moveTo(point[0], point[1]); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | ctx.stroke(); |
|---|
| | | // 切回实线 |
|---|
| | | ctx.setLineDash([]); |
|---|
| | | return points; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 绘制充放电单元 |
|---|
| | | Diagram.prototype.chargeAndDischarge = function (option) { |
|---|
| | | let ctx = option.flush ? this.f_ctx : this.s_ctx; // 获取上下文 |
|---|
| | | let defaultOption = { |
|---|
| | | width: 120, |
|---|
| | | }; |
|---|
| | | let point = option.point; |
|---|
| | | let strokeStyle = '#FFFFFF'; |
|---|
| | | let lineWidth = option.lineWidth ? option.lineWidth : 2; |
|---|
| | | // 线条1 |
|---|
| | | let line1 = this.line({ |
|---|
| | | strokeStyle: strokeStyle, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | hide: option.hide, |
|---|
| | | points: [ |
|---|
| | | point, |
|---|
| | | [point[0], point[1] - defaultOption.width / 2] |
|---|
| | | ], |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 线条2 |
|---|
| | | let line2 = this.line({ |
|---|
| | | strokeStyle: strokeStyle, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | hide: option.hide, |
|---|
| | | points: [ |
|---|
| | | line1[1], |
|---|
| | | [line1[1][0] + defaultOption.width, line1[1][1]] |
|---|
| | | ], |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 线条3 |
|---|
| | | let line3 = this.line({ |
|---|
| | | strokeStyle: strokeStyle, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | hide: option.hide, |
|---|
| | | points: [ |
|---|
| | | line2[1], |
|---|
| | | [line2[1][0] + defaultOption.width, line2[1][1]] |
|---|
| | | ], |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 线条4 |
|---|
| | | let line4 = this.line({ |
|---|
| | | strokeStyle: strokeStyle, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | hide: option.hide, |
|---|
| | | points: [ |
|---|
| | | line3[1], |
|---|
| | | [line3[1][0], line3[1][1] + defaultOption.width] |
|---|
| | | ], |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 线条5 |
|---|
| | | let line5 = this.line({ |
|---|
| | | strokeStyle: strokeStyle, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | hide: option.hide, |
|---|
| | | points: [ |
|---|
| | | line4[1], |
|---|
| | | [line1[1][0], line1[1][1] + defaultOption.width] |
|---|
| | | ], |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 线条6 |
|---|
| | | let line6 = this.line({ |
|---|
| | | strokeStyle: strokeStyle, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | hide: option.hide, |
|---|
| | | points: [ |
|---|
| | | line5[1], |
|---|
| | | [line1[0][0], line1[0][1]] |
|---|
| | | ], |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 线条7 |
|---|
| | | let line7 = this.line({ |
|---|
| | | strokeStyle: strokeStyle, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | hide: option.hide, |
|---|
| | | points: [ |
|---|
| | | [line1[1][0] + defaultOption.width, line1[1][1]], |
|---|
| | | [line1[1][0] + defaultOption.width, line1[1][1] + defaultOption.width] |
|---|
| | | ], |
|---|
| | | }); |
|---|
| | | |
|---|
| | | return [ |
|---|
| | | [line1[1][0] + defaultOption.width / 2, line1[1][1]], |
|---|
| | | [line1[1][0] + defaultOption.width * 3 / 2, line1[1][1]], |
|---|
| | | [line1[1][0] + defaultOption.width * 3 / 2, line1[1][1] + defaultOption.width], |
|---|
| | | [line1[1][0] + defaultOption.width / 2, line1[1][1] + defaultOption.width], |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 绘制圆 |
|---|
| | | Diagram.prototype.arc = function (option) { |
|---|
| | | let ctx = option.flush ? this.f_ctx : this.s_ctx; // 获取上下文 |
|---|
| | | let point = option.point; //圆心坐标 |
|---|
| | | // 不隐藏绘制圆圈 |
|---|
| | | if (!option.hide) { |
|---|
| | | ctx.beginPath(); |
|---|
| | | ctx.lineWidth = option.lineWidth ? option.lineWidth : 1; |
|---|
| | | ctx.strokeStyle = option.strokeStyle; |
|---|
| | | ctx.fillStyle = option.fillStyle; |
|---|
| | | ctx.arc(point[0], point[1], option.radius, 0, 2 * Math.PI); |
|---|
| | | switch (option.type) { |
|---|
| | | case 'stroke': |
|---|
| | | ctx.stroke(); |
|---|
| | | break; |
|---|
| | | case 'fill': |
|---|
| | | ctx.fill(); |
|---|
| | | break; |
|---|
| | | default: |
|---|
| | | ctx.stroke(); |
|---|
| | | ctx.fill(); |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | let info = { |
|---|
| | | center: [point[0], point[1]], |
|---|
| | | left: [point[0] - option.radius, point[1]], |
|---|
| | | right: [point[0] + option.radius, point[1]], |
|---|
| | | top: [point[0], point[1] - option.radius], |
|---|
| | | bottom: [point[0], point[1] + option.radius], |
|---|
| | | tl: [point[0] - option.radius / 2, point[1] - option.radius / 2], |
|---|
| | | tr: [point[0] + option.radius / 2, point[1] - option.radius / 2], |
|---|
| | | bl: [point[0] - option.radius / 2, point[1] + option.radius / 2], |
|---|
| | | br: [point[0] + option.radius / 2, point[1] + option.radius / 2], |
|---|
| | | strokeStyle: option.strokeStyle, |
|---|
| | | fillStyle: option.fillStyle, |
|---|
| | | radius: option.radius |
|---|
| | | }; |
|---|
| | | // 添加配置项 |
|---|
| | | option.method = "arc"; |
|---|
| | | |
|---|
| | | this.addOptions(option); |
|---|
| | | return info; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 绘制开关 |
|---|
| | | Diagram.prototype.onOff = function (option) { |
|---|
| | | let result; |
|---|
| | | switch (option.direction) { |
|---|
| | | case 'top': |
|---|
| | | case 'bottom': |
|---|
| | | result = this.onOff_h(option); |
|---|
| | | break; |
|---|
| | | default: |
|---|
| | | result = this.onOff_v(option); |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | // 添加配置项 |
|---|
| | | option.method = "onOff"; |
|---|
| | | this.addOptions(option); |
|---|
| | | // 返回开关的信息 |
|---|
| | | return result; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 水平方向 |
|---|
| | | Diagram.prototype.onOff_v = function (option) { |
|---|
| | | let point = option.point; |
|---|
| | | let state = option.state ? true : false; |
|---|
| | | let color = option.color ? option.color : '#50cef5'; |
|---|
| | | let onOffBase = this.opts.onOffBase; |
|---|
| | | |
|---|
| | | // 开关的第一个圆 |
|---|
| | | let arc1 = this.arc({ |
|---|
| | | point: [point[0] + onOffBase.radius / 2, point[1]], |
|---|
| | | flush: option.flush, |
|---|
| | | fillStyle: color, |
|---|
| | | strokeStyle: color, |
|---|
| | | radius: onOffBase.radius, |
|---|
| | | type: 'stroke' |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 开关的第二个圆 |
|---|
| | | let arc2 = this.arc({ |
|---|
| | | point: [arc1.right[0] + onOffBase.width * 4 / 3, arc1.right[1]], |
|---|
| | | flush: option.flush, |
|---|
| | | fillStyle: arc1.fillStyle, |
|---|
| | | strokeStyle: arc1.fillStyle, |
|---|
| | | radius: arc1.radius, |
|---|
| | | type: 'stroke' |
|---|
| | | }); |
|---|
| | | let line1; |
|---|
| | | switch (option.direction) { |
|---|
| | | case 'right': |
|---|
| | | // 绘制线条 |
|---|
| | | line1 = this.line({ |
|---|
| | | points: [ |
|---|
| | | arc2.left, |
|---|
| | | [ |
|---|
| | | state ? arc1.top[0] : arc1.center[0], |
|---|
| | | state ? arc1.top[1] : arc1.center[1] - (arc1.radius + onOffBase.width * 3 / 4) |
|---|
| | | ], |
|---|
| | | ], |
|---|
| | | flush: option.flush, |
|---|
| | | strokeStyle: state ? '#50cef5' : color, |
|---|
| | | lineWidth: onOffBase.lineWidth |
|---|
| | | }); |
|---|
| | | break; |
|---|
| | | default: |
|---|
| | | // 绘制线条 |
|---|
| | | line1 = this.line({ |
|---|
| | | points: [ |
|---|
| | | arc1.right, |
|---|
| | | [ |
|---|
| | | state ? arc2.top[0] : arc2.center[0], |
|---|
| | | state ? arc2.top[1] : arc2.center[1] - (arc2.radius + onOffBase.width * 3 / 4) |
|---|
| | | ], |
|---|
| | | ], |
|---|
| | | flush: option.flush, |
|---|
| | | strokeStyle: state ? '#50cef5' : color, |
|---|
| | | lineWidth: onOffBase.lineWidth |
|---|
| | | }); |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | return { |
|---|
| | | arc1: arc1, |
|---|
| | | arc2: arc2, |
|---|
| | | line1: line1 |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | // 竖直方向 |
|---|
| | | Diagram.prototype.onOff_h = function (option) { |
|---|
| | | let point = option.point; |
|---|
| | | let state = option.state ? true : false; |
|---|
| | | let color = option.color ? option.color : '#50cef5'; |
|---|
| | | let onOffBase = this.opts.onOffBase; |
|---|
| | | |
|---|
| | | // 开关的第一个圆 |
|---|
| | | let arc1 = this.arc({ |
|---|
| | | point: [point[0], point[1] + onOffBase.radius], |
|---|
| | | flush: option.flush, |
|---|
| | | fillStyle: color, |
|---|
| | | strokeStyle: color, |
|---|
| | | radius: onOffBase.radius, |
|---|
| | | type: 'stroke' |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 开关的第二个圆 |
|---|
| | | let arc2 = this.arc({ |
|---|
| | | point: [arc1.bottom[0], arc1.right[1] + onOffBase.width * 4 / 3], |
|---|
| | | flush: option.flush, |
|---|
| | | fillStyle: arc1.fillStyle, |
|---|
| | | strokeStyle: arc1.fillStyle, |
|---|
| | | radius: arc1.radius, |
|---|
| | | type: 'stroke' |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let line1; |
|---|
| | | switch (option.direction) { |
|---|
| | | case 'top': |
|---|
| | | // 绘制线条 |
|---|
| | | line1 = this.line({ |
|---|
| | | points: [ |
|---|
| | | arc1.bottom, |
|---|
| | | [ |
|---|
| | | state ? arc2.right[0] : arc2.center[0] + (arc1.radius + onOffBase.width * 3 / 4), |
|---|
| | | state ? arc2.right[1] : arc2.center[1] |
|---|
| | | ], |
|---|
| | | ], |
|---|
| | | flush: option.flush, |
|---|
| | | strokeStyle: state ? '#50cef5' : color, |
|---|
| | | lineWidth: onOffBase.lineWidth |
|---|
| | | }); |
|---|
| | | break; |
|---|
| | | default: |
|---|
| | | // 绘制线条 |
|---|
| | | line1 = this.line({ |
|---|
| | | points: [ |
|---|
| | | arc2.top, |
|---|
| | | [ |
|---|
| | | state ? arc1.right[0] : arc1.center[0] + (arc2.radius + onOffBase.width * 3 / 4), |
|---|
| | | state ? arc1.right[1] : arc1.center[1] |
|---|
| | | ], |
|---|
| | | ], |
|---|
| | | flush: option.flush, |
|---|
| | | strokeStyle: state ? '#50cef5' : color, |
|---|
| | | lineWidth: onOffBase.lineWidth |
|---|
| | | }); |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | return { |
|---|
| | | arc1: arc1, |
|---|
| | | arc2: arc2, |
|---|
| | | line1: line1 |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // BAT |
|---|
| | | Diagram.prototype.bat = function (option) { |
|---|
| | | let ctx = option.flush ? this.f_ctx : this.s_ctx; |
|---|
| | | let point = option.point; |
|---|
| | | let bat = { |
|---|
| | | width: 14 |
|---|
| | | }; |
|---|
| | | ctx.fillStyle = option.fillStyle ? option.fillStyle : "#b370fe"; |
|---|
| | | ctx.strokeStyle = option.strokeStyle; |
|---|
| | | ctx.lineWidth = option.lineWidth ? option.lineWidth : 3; |
|---|
| | | |
|---|
| | | ctx.fillRect(point[0] - bat.width / 2, point[1] - bat.width / 2, bat.width, bat.width); |
|---|
| | | |
|---|
| | | ctx.strokeRect(point[0] - bat.width / 2, point[1] - bat.width / 2, bat.width, bat.width) |
|---|
| | | return { |
|---|
| | | top: [point[0], point[1] - bat.width / 2], |
|---|
| | | bottom: [point[0], point[1] + bat.width / 2], |
|---|
| | | left: [point[0] - bat.width / 2 - ctx.lineWidth / 2, point[1]], |
|---|
| | | right: [point[0] + bat.width / 2 + ctx.lineWidth / 2, point[1]] |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 绘制图片 |
|---|
| | | Diagram.prototype.drawImage = function (option) { |
|---|
| | | let ctx = option.flush ? this.f_ctx : this.s_ctx; |
|---|
| | | let point = option.point; |
|---|
| | | // 绘制内容 |
|---|
| | | if (!option.hide) { |
|---|
| | | let img = new Image(); |
|---|
| | | img.src = option.url; |
|---|
| | | if (option.flush) { |
|---|
| | | ctx.drawImage(img, point[0], point[1], option.width, option.height); |
|---|
| | | } else { |
|---|
| | | img.onload = function () { |
|---|
| | | ctx.drawImage(img, point[0], point[1], option.width, option.height); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 返回图片信息 |
|---|
| | | let info = { |
|---|
| | | tl: [point[0], point[1]], |
|---|
| | | tr: [point[0] + option.width, point[1]], |
|---|
| | | bl: [point[0], point[1] + option.height], |
|---|
| | | br: [point[0] + option.width, point[1] + option.height], |
|---|
| | | left: [point[0], point[1] + option.height / 2], |
|---|
| | | right: [point[0] + option.width, point[1] + option.height / 2], |
|---|
| | | top: [point[0] + option.width / 2, point[1]], |
|---|
| | | bottom: [point[0] + option.width / 2, point[1] + option.height], |
|---|
| | | width: option.width, |
|---|
| | | height: option.height, |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 设置执行的方法 |
|---|
| | | option.method = "drawImage"; |
|---|
| | | // 添加配置项 |
|---|
| | | this.addOptions(option); |
|---|
| | | return info; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 获取图片缩放后自身信息 |
|---|
| | | Diagram.prototype.getZoomImageInfo = function (id) { |
|---|
| | | let option = this.getOption(id) |
|---|
| | | let points = option.point; |
|---|
| | | let Xzoom = this.stc.clientWidth / this.width; |
|---|
| | | let Yzoom = this.stc.clientHeight / this.height; |
|---|
| | | let point = []; |
|---|
| | | point[0] = points[0] * Xzoom; |
|---|
| | | point[1] = points[1] * Yzoom; |
|---|
| | | |
|---|
| | | // 返回图片信息 |
|---|
| | | let info = { |
|---|
| | | tl: [point[0], point[1]], //左上角坐标 |
|---|
| | | tr: [point[0] + option.width, point[1]], //右上角坐标 |
|---|
| | | bl: [point[0], point[1] + option.height], //左下角坐标 |
|---|
| | | br: [point[0] + option.width, point[1] + option.height], //右下角坐标 |
|---|
| | | left: [point[0], point[1] + option.height / 2], //左侧中间点坐标 |
|---|
| | | right: [point[0] + option.width, point[1] + option.height / 2], //右侧中间点坐标 |
|---|
| | | top: [point[0] + option.width / 2, point[1]], //上侧中间点坐标 |
|---|
| | | bottom: [point[0] + option.width / 2, point[1] + option.height], //下侧中间点坐标 |
|---|
| | | width: option.width * Xzoom, //图片宽度 |
|---|
| | | height: option.height * Yzoom, //图片高度 |
|---|
| | | }; |
|---|
| | | return info; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 绘制字体 |
|---|
| | | Diagram.prototype.text = function (option) { |
|---|
| | | let ctx = option.flush ? this.f_ctx : this.s_ctx; |
|---|
| | | let point = option.point; |
|---|
| | | let fontSize = option.fontSize ? option.fontSize : 12; |
|---|
| | | let texts = option.text.split('&'); |
|---|
| | | ctx.beginPath(); |
|---|
| | | ctx.lineWidth = option.lineWidth ? option.lineWidth : 1; |
|---|
| | | ctx.font = fontSize + 'px Arial'; |
|---|
| | | ctx.textAlign = option.align ? option.align : 'start'; |
|---|
| | | ctx.textBaseline = option.baseline ? option.baseline : 'top'; |
|---|
| | | let Yzoom = this.stc.clientHeight / this.height; |
|---|
| | | let borderColor = option.borderColor ? option.borderColor : '#5a62c9'; //矩形边框颜色 |
|---|
| | | let bgColor = option.bgColor ? option.bgColor : '#191553'; //矩形填充颜色 |
|---|
| | | let radiusRectInfo; |
|---|
| | | let fontWidth = 0; |
|---|
| | | ctx.fillStyle = option.fillStyle ? option.fillStyle : '#FFFFFF'; |
|---|
| | | if (!option.hide) { |
|---|
| | | texts.forEach((text, index) => { //第一遍画文字获取文字宽度 |
|---|
| | | if (index == 0) { |
|---|
| | | ctx.fillText(text, point[0], point[1] + fontSize * index); |
|---|
| | | } else { |
|---|
| | | ctx.fillText(text, point[0], point[1] + fontSize * index + 2); |
|---|
| | | } |
|---|
| | | if (fontWidth < ctx.measureText(text).width) { |
|---|
| | | fontWidth = ctx.measureText(text).width; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | if (option.radBorder) { //画边框 |
|---|
| | | let fontHeight = fontSize * Yzoom; |
|---|
| | | let radiusRectY; |
|---|
| | | switch (ctx.textBaseline) { |
|---|
| | | case 'top': |
|---|
| | | radiusRectY = point[1] - 8 |
|---|
| | | break; |
|---|
| | | case 'bottom': |
|---|
| | | radiusRectY = point[1] - 8 - fontHeight |
|---|
| | | break; |
|---|
| | | case 'middle': |
|---|
| | | radiusRectY = point[1] - 8 - (fontHeight / 2) |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | let radiusRectData = { |
|---|
| | | point: [point[0] - 16, radiusRectY - 1], |
|---|
| | | width: fontWidth + 32, |
|---|
| | | height: fontHeight * texts.length + 16, |
|---|
| | | strokeStyle: borderColor, |
|---|
| | | fillStyle: bgColor, |
|---|
| | | r: (fontHeight * texts.length + 16) / 2, |
|---|
| | | } |
|---|
| | | radiusRectInfo = this.drawRadiusRect(radiusRectData); |
|---|
| | | ctx.fillStyle = option.fillStyle ? option.fillStyle : '#FFFFFF'; |
|---|
| | | texts.forEach((text, index) => { //第二遍画文字覆盖边框 |
|---|
| | | if (index == 0) { |
|---|
| | | ctx.fillText(text, point[0], point[1] + fontSize * index); |
|---|
| | | } else { |
|---|
| | | ctx.fillText(text, point[0], point[1] + fontSize * index + 2); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (option.radBorder) { |
|---|
| | | return radiusRectInfo |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 设置执行的方法 |
|---|
| | | option.method = "text"; |
|---|
| | | // 添加配置项 |
|---|
| | | this.addOptions(option); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 绘制可移动的点 |
|---|
| | | Diagram.prototype.moveDot = function (option) { |
|---|
| | | let ctx = this.f_ctx; |
|---|
| | | let opts = this.opts.moveDot; |
|---|
| | | let points = option.points; |
|---|
| | | let start = option.start ? option.start : [points[0][0], points[0][1]]; |
|---|
| | | let fillStyle = option.fillStyle ? option.fillStyle : "#b370fe"; |
|---|
| | | let strokeStyle = option.strokeStyle ? option.strokeStyle : "#b370fe"; |
|---|
| | | let radius = option.radius ? option.radius : opts.radius; |
|---|
| | | if (this.getOption(option.id)) { |
|---|
| | | switch (option.type) { |
|---|
| | | case 'up': |
|---|
| | | start[1] -= opts.step; |
|---|
| | | // 约束限制 |
|---|
| | | if (start[1] < points[1][1]) { |
|---|
| | | start[1] = points[0][1]; |
|---|
| | | } |
|---|
| | | break; |
|---|
| | | case 'down': |
|---|
| | | start[1] += opts.step; |
|---|
| | | // 约束限制 |
|---|
| | | if (start[1] > points[1][1]) { |
|---|
| | | start[1] = points[0][1]; |
|---|
| | | } |
|---|
| | | break; |
|---|
| | | case 'left': |
|---|
| | | start[0] += opts.step; |
|---|
| | | // 约束限制 |
|---|
| | | if (start[0] > points[1][0]) { |
|---|
| | | start[0] = points[0][0]; |
|---|
| | | } |
|---|
| | | break; |
|---|
| | | case 'right': |
|---|
| | | start[0] -= opts.step; |
|---|
| | | // 约束限制 |
|---|
| | | if (start[0] < points[1][0]) { |
|---|
| | | start[0] = points[0][0]; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | // 设置值 |
|---|
| | | this.setOption(option.id, 'start', start); |
|---|
| | | } else { |
|---|
| | | // 竖直运动 |
|---|
| | | if (points[0][0] == points[1][0]) { |
|---|
| | | // 向上运动 |
|---|
| | | if (points[0][1] > points[1][1]) { |
|---|
| | | option.type = 'up'; |
|---|
| | | } else { |
|---|
| | | option.type = 'down'; |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | // 向左运动 |
|---|
| | | if (points[0][0] < points[1][0]) { |
|---|
| | | option.type = 'left'; |
|---|
| | | } else { |
|---|
| | | option.type = 'right'; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | option.start = start; |
|---|
| | | } |
|---|
| | | this.arc({ |
|---|
| | | flush: true, |
|---|
| | | point: start, |
|---|
| | | fillStyle: fillStyle, |
|---|
| | | strokeStyle: strokeStyle, |
|---|
| | | radius: radius |
|---|
| | | }); |
|---|
| | | // 添加配置项 |
|---|
| | | option.method = "moveDot"; |
|---|
| | | this.addOptions(option); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 绘制二极管 |
|---|
| | | Diagram.prototype.diode = function (option) { |
|---|
| | | let ctx = option.flush ? this.f_ctx : this.s_ctx; |
|---|
| | | let point = option.point; |
|---|
| | | let width = 40; |
|---|
| | | let height = width * 2 / 3; |
|---|
| | | let lineWidth = 2; |
|---|
| | | // line1 |
|---|
| | | let line1 = this.line({ |
|---|
| | | strokeStyle: "#b370fe", |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | point, |
|---|
| | | [point[0], point[1] + width / 2] |
|---|
| | | ] |
|---|
| | | }); |
|---|
| | | // line2 |
|---|
| | | let line2 = this.line({ |
|---|
| | | strokeStyle: "#b370fe", |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line1[1][0] - width / 2, line1[1][1]], |
|---|
| | | [line1[1][0] + width / 2, line1[1][1]] |
|---|
| | | ] |
|---|
| | | }); |
|---|
| | | ctx.beginPath(); |
|---|
| | | ctx.moveTo(line1[1][0], line1[1][1]); |
|---|
| | | ctx.lineTo(line2[0][0], line2[0][1] + height); |
|---|
| | | ctx.lineTo(line2[1][0], line2[1][1] + height); |
|---|
| | | ctx.closePath(); |
|---|
| | | ctx.fillStyle = "#b370fe"; |
|---|
| | | ctx.fill(); |
|---|
| | | |
|---|
| | | // line3 |
|---|
| | | let line3 = this.line({ |
|---|
| | | strokeStyle: "#b370fe", |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line1[1][0], line1[1][1] + height], |
|---|
| | | [line1[1][0], line1[1][1] + height + width / 2] |
|---|
| | | ] |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 添加配置项 |
|---|
| | | option.method = "diode"; |
|---|
| | | this.addOptions(option); |
|---|
| | | return { |
|---|
| | | top: line1[0], |
|---|
| | | bottom: line3[1] |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 绘制矩形 |
|---|
| | | Diagram.prototype.drawRect = function (option) { |
|---|
| | | let ctx = option.flush ? this.f_ctx : this.s_ctx; // 获取上下文 |
|---|
| | | let defaultOption = { |
|---|
| | | width: 120, |
|---|
| | | height: 120, |
|---|
| | | }; |
|---|
| | | let point = option.point; |
|---|
| | | let strokeStyle = '#FFFFFF'; |
|---|
| | | let lineWidth = option.lineWidth ? option.lineWidth : 2; |
|---|
| | | // 线条1 |
|---|
| | | let line1 = this.line({ |
|---|
| | | strokeStyle: strokeStyle, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | hide: option.hide, |
|---|
| | | points: [ |
|---|
| | | point, |
|---|
| | | [point[0], point[1] + defaultOption.height] |
|---|
| | | ], |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 线条2 |
|---|
| | | let line2 = this.line({ |
|---|
| | | strokeStyle: strokeStyle, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | hide: option.hide, |
|---|
| | | points: [ |
|---|
| | | line1[1], |
|---|
| | | [line1[1][0] + defaultOption.width, line1[1][1]] |
|---|
| | | ], |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 线条3 |
|---|
| | | let line3 = this.line({ |
|---|
| | | strokeStyle: strokeStyle, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | hide: option.hide, |
|---|
| | | points: [ |
|---|
| | | line2[1], |
|---|
| | | [line2[1][0], line2[1][1] - defaultOption.height] |
|---|
| | | ], |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 线条4 |
|---|
| | | let line4 = this.line({ |
|---|
| | | strokeStyle: strokeStyle, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | hide: option.hide, |
|---|
| | | points: [ |
|---|
| | | line3[1], |
|---|
| | | line1[0] |
|---|
| | | ], |
|---|
| | | }); |
|---|
| | | |
|---|
| | | return { |
|---|
| | | left: [line1[0][0], line1[0][1] + defaultOption.height / 2], |
|---|
| | | bottom: [line2[0][0] + defaultOption.width / 2, line2[0][1]], |
|---|
| | | right: [line3[0][0], line3[0][1] - defaultOption.height / 2], |
|---|
| | | top: [line1[0][0] + defaultOption.width / 2, line1[0][1]] |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 绘制圆角矩形 |
|---|
| | | Diagram.prototype.drawRadiusRect = function (option) { |
|---|
| | | // (x,y):圆角矩形起始坐标; width: 矩形宽度; height: 矩形高度; r: 矩形圆角; |
|---|
| | | let ctx = option.flush ? this.f_ctx : this.s_ctx; // 获取上下文 |
|---|
| | | let point = option.point; |
|---|
| | | let x = point[0]; |
|---|
| | | let y = point[1]; |
|---|
| | | let width = option.width ? option.width : 150; |
|---|
| | | let height = option.height ? option.height : 40; |
|---|
| | | let r = option.r ? option.r : 6; |
|---|
| | | ctx.strokeStyle = option.strokeStyle ? option.strokeStyle : '#5a62c9'; //矩形填充颜色 |
|---|
| | | ctx.fillStyle = option.fillStyle ? option.fillStyle : '#191553'; //矩形填充颜色 |
|---|
| | | ctx.lineWidth = option.lineWidth ? option.lineWidth : 3; //矩形线宽; |
|---|
| | | ctx.beginPath(); |
|---|
| | | ctx.moveTo(x + r, y); |
|---|
| | | ctx.lineTo(x + width - r, y); |
|---|
| | | ctx.arc(x + width - r, y + r, r, Math.PI * 1.5, Math.PI * 2); |
|---|
| | | ctx.lineTo(x + width, y + height - r); |
|---|
| | | ctx.arc(x + width - r, y + height - r, r, 0, Math.PI * 0.5); |
|---|
| | | ctx.lineTo(x + r, y + height); |
|---|
| | | ctx.arc(x + r, y + height - r, r, Math.PI * 0.5, Math.PI); |
|---|
| | | ctx.lineTo(x, y + r); |
|---|
| | | ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5); |
|---|
| | | switch (option.type) { |
|---|
| | | case 'stroke': |
|---|
| | | ctx.stroke(); |
|---|
| | | break; |
|---|
| | | case 'fill': |
|---|
| | | ctx.fill(); |
|---|
| | | break; |
|---|
| | | default: |
|---|
| | | ctx.stroke(); |
|---|
| | | ctx.fill(); |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | // 添加配置项 |
|---|
| | | option.method = "drawRadiusRect"; |
|---|
| | | this.addOptions(option); |
|---|
| | | return { |
|---|
| | | width: width, |
|---|
| | | height: height, |
|---|
| | | radius: r, |
|---|
| | | point: point, |
|---|
| | | left: [x, y + height / 2], |
|---|
| | | bottom: [x + width / 2, y + height], |
|---|
| | | right: [x + width, y + height / 2], |
|---|
| | | top: [x + width / 2, y], |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 绘制箭头 |
|---|
| | | Diagram.prototype.drawArrow = function (option) { |
|---|
| | | let ctx = option.flush ? this.f_ctx : this.s_ctx; // 获取上下文 |
|---|
| | | let point = option.point; |
|---|
| | | ctx.strokeStyle = option.strokeStyle ? option.strokeStyle : '#5a62c9'; //填充颜色 |
|---|
| | | ctx.fillStyle = option.fillStyle ? option.fillStyle : '#5a62c9'; //填充颜色 |
|---|
| | | ctx.lineWidth = option.lineWidth ? option.lineWidth : 1; //线宽; |
|---|
| | | let direction = option.direction ? option.direction : 'right' //箭头方向 |
|---|
| | | let size = option.size ? option.size : 54;; //箭头大小 |
|---|
| | | switch (direction) { |
|---|
| | | case 'right': |
|---|
| | | ctx.moveTo(point[0], point[1]); |
|---|
| | | ctx.lineTo(point[0], point[1] - size / 9); |
|---|
| | | ctx.lineTo(point[0] + size / 1.8, point[1] - size / 9); |
|---|
| | | ctx.lineTo(point[0] + size / 1.8, point[1] - size / 9 - size / 4.5); |
|---|
| | | ctx.lineTo(point[0] + size, point[1]); |
|---|
| | | ctx.lineTo(point[0] + size / 1.8, point[1] + size / 9 + size / 4.5); |
|---|
| | | ctx.lineTo(point[0] + size / 1.8, point[1] + size / 9); |
|---|
| | | ctx.lineTo(point[0], point[1] + size / 9); |
|---|
| | | ctx.lineTo(point[0], point[1]); |
|---|
| | | break; |
|---|
| | | case 'left': |
|---|
| | | ctx.moveTo(point[0], point[1]); |
|---|
| | | ctx.lineTo(point[0], point[1] - size / 9); |
|---|
| | | ctx.lineTo(point[0] - size / 1.8, point[1] - size / 9); |
|---|
| | | ctx.lineTo(point[0] - size / 1.8, point[1] - size / 9 - size / 4.5); |
|---|
| | | ctx.lineTo(point[0] - size, point[1]); |
|---|
| | | ctx.lineTo(point[0] - size / 1.8, point[1] + size / 9 + size / 4.5); |
|---|
| | | ctx.lineTo(point[0] - size / 1.8, point[1] + size / 9); |
|---|
| | | ctx.lineTo(point[0], point[1] + size / 9); |
|---|
| | | ctx.lineTo(point[0], point[1]); |
|---|
| | | break; |
|---|
| | | case 'top': |
|---|
| | | ctx.moveTo(point[0], point[1]); |
|---|
| | | ctx.lineTo(point[0] - size / 9, point[1]); |
|---|
| | | ctx.lineTo(point[0] - size / 9, point[1] - size / 1.8); |
|---|
| | | ctx.lineTo(point[0] - size / 9 - size / 4.5, point[1] - size / 1.8); |
|---|
| | | ctx.lineTo(point[0], point[1] - size); |
|---|
| | | ctx.lineTo(point[0] + size / 9 + size / 4.5, point[1] - size / 1.8); |
|---|
| | | ctx.lineTo(point[0] + size / 9, point[1] - size / 1.8); |
|---|
| | | ctx.lineTo(point[0] + size / 9, point[1]); |
|---|
| | | ctx.lineTo(point[0], point[1]); |
|---|
| | | break; |
|---|
| | | case 'bottom': |
|---|
| | | ctx.moveTo(point[0], point[1]); |
|---|
| | | ctx.lineTo(point[0] - size / 9, point[1]); |
|---|
| | | ctx.lineTo(point[0] - size / 9, point[1] + size / 1.8); |
|---|
| | | ctx.lineTo(point[0] - size / 9 - size / 4.5, point[1] + size / 1.8); |
|---|
| | | ctx.lineTo(point[0], point[1] + size); |
|---|
| | | ctx.lineTo(point[0] + size / 9 + size / 4.5, point[1] + size / 1.8); |
|---|
| | | ctx.lineTo(point[0] + size / 9, point[1] + size / 1.8); |
|---|
| | | ctx.lineTo(point[0] + size / 9, point[1]); |
|---|
| | | ctx.lineTo(point[0], point[1]); |
|---|
| | | break; |
|---|
| | | default: |
|---|
| | | ctx.moveTo(point[0], point[1]); |
|---|
| | | ctx.lineTo(point[0], point[1] - size / 9); |
|---|
| | | ctx.lineTo(point[0] + size / 1.8, point[1] - size / 9); |
|---|
| | | ctx.lineTo(point[0] + size / 1.8, point[1] - size / 9 - size / 4.5); |
|---|
| | | ctx.lineTo(point[0] + size, point[1]); |
|---|
| | | ctx.lineTo(point[0] + size / 1.8, point[1] + size / 9 + size / 4.5); |
|---|
| | | ctx.lineTo(point[0] + size / 1.8, point[1] + size / 9); |
|---|
| | | ctx.lineTo(point[0], point[1] + size / 9); |
|---|
| | | ctx.lineTo(point[0], point[1]); |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | switch (option.type) { |
|---|
| | | case 'stroke': |
|---|
| | | ctx.stroke(); |
|---|
| | | break; |
|---|
| | | case 'fill': |
|---|
| | | ctx.fill(); |
|---|
| | | break; |
|---|
| | | default: |
|---|
| | | ctx.stroke(); |
|---|
| | | ctx.fill(); |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | switch (direction) { |
|---|
| | | case 'right': |
|---|
| | | return { |
|---|
| | | right: point, |
|---|
| | | top: [point[0] + size / 1.8, point[1] - size / 9 - size / 4.5], |
|---|
| | | left: [point[0] - size, point[1]], |
|---|
| | | bottom: [point[0] + size / 1.8, point[1] + size / 9 + size / 4.5], |
|---|
| | | } |
|---|
| | | break; |
|---|
| | | case 'left': |
|---|
| | | return { |
|---|
| | | left: point, |
|---|
| | | top: [point[0] - size / 1.8, point[1] - size / 9 - size / 4.5], |
|---|
| | | right: [point[0] + size, point[1]], |
|---|
| | | bottom: [point[0] - size / 1.8, point[1] + size / 9 + size / 4.5], |
|---|
| | | } |
|---|
| | | break; |
|---|
| | | case 'top': |
|---|
| | | return { |
|---|
| | | bottom: point, |
|---|
| | | top: [point[0], point[1] - size], |
|---|
| | | left: [point[0] - size / 9 - size / 4.5, point[1] - size / 1.8], |
|---|
| | | right: [point[0] + size / 9 + size / 4.5, point[1] - size / 1.8], |
|---|
| | | } |
|---|
| | | break; |
|---|
| | | case 'bottom': |
|---|
| | | return { |
|---|
| | | top: point, |
|---|
| | | bottom: [point[0], point[1] + size], |
|---|
| | | left: [point[0] - size / 9 - size / 4.5, point[1] - size / 1.8], |
|---|
| | | right: [point[0] + size / 9 + size / 4.5, point[1] - size / 1.8], |
|---|
| | | } |
|---|
| | | break; |
|---|
| | | default: |
|---|
| | | return { |
|---|
| | | right: point, |
|---|
| | | top: [point[0] + size / 1.8, point[1] - size / 9 - size / 4.5], |
|---|
| | | left: [point[0] - size, point[1]], |
|---|
| | | bottom: [point[0] + size / 1.8, point[1] + size / 9 + size / 4.5], |
|---|
| | | } |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 根据id正则删除内容 |
|---|
| | | Diagram.prototype.del = function (pattern) { |
|---|
| | | // 清空options配置项 |
|---|
| | | this.options = this.options.filter(item => { |
|---|
| | | if (!pattern.test(item.id)) { |
|---|
| | | return item; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 清空刷新对象 |
|---|
| | | this.flushOptions = this.flushOptions.filter(item => { |
|---|
| | | if (!pattern.test(item.id)) { |
|---|
| | | return item; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | export default Diagram; |
|---|
| New file |
| | |
|---|
| | | /* eslint-disable */ ; |
|---|
| | | (function (doc, win) { |
|---|
| | | let docEl = doc.documentElement, |
|---|
| | | resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', |
|---|
| | | recalc = function () { |
|---|
| | | let clientWidth = docEl.clientWidth; |
|---|
| | | if (!clientWidth) return; |
|---|
| | | let fontSize = 20 * (clientWidth / 1920); |
|---|
| | | docEl.style.fontSize = fontSize + 'px'; |
|---|
| | | }; |
|---|
| | | if (!doc.addEventListener) return; |
|---|
| | | win.addEventListener(resizeEvt, recalc, false); |
|---|
| | | doc.addEventListener('DOMContentLoaded', recalc, false); |
|---|
| | | })(document, window); |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <div class="pageHeader"> |
|---|
| | | <div class="headTitle">FMDS | 电机试验集中测控平台</div> |
|---|
| | | <div class="headToolsCon"> |
|---|
| | | <div class="avatar"> |
|---|
| | | <span class="avatar-icon"> |
|---|
| | | <i class="el-icon-s-home"></i> |
|---|
| | | </span> |
|---|
| | | <span class="avatar-text">退出登录</span> |
|---|
| | | </div> |
|---|
| | | <div class="avatar"> |
|---|
| | | <span class="avatar-icon"> |
|---|
| | | <i class="el-icon-user-solid"></i> |
|---|
| | | </span> |
|---|
| | | <span class="avatar-text"> |
|---|
| | | {{username}}<i class="el-icon-arrow-down el-icon--right"></i> |
|---|
| | | </span> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | username: 'superUser' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .pageHeader { |
|---|
| | | width: 100%; |
|---|
| | | height: 100px; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .headTitle { |
|---|
| | | width: 100%; |
|---|
| | | height: 86px; |
|---|
| | | line-height: 86px; |
|---|
| | | font-size: 36px; |
|---|
| | | color: #ffffff; |
|---|
| | | letter-spacing: 3px; |
|---|
| | | text-align: center; |
|---|
| | | text-indent: -40px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .headToolsCon { |
|---|
| | | width: 100%; |
|---|
| | | height: 40px; |
|---|
| | | position: absolute; |
|---|
| | | left: 0; |
|---|
| | | bottom: 0; |
|---|
| | | z-index: 2; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | flex-direction: row-reverse; |
|---|
| | | padding-right: 40px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .avatar { |
|---|
| | | display: inline-block; |
|---|
| | | margin-right: 30px; |
|---|
| | | cursor: pointer; |
|---|
| | | color: #e4e3e3; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .avatar:hover { |
|---|
| | | color: #FFFFFF; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .avatar .el-icon-arrow-down { |
|---|
| | | transform: rotate(-90deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .avatar-icon { |
|---|
| | | display: inline-flex; |
|---|
| | | width: 30px; |
|---|
| | | height: 30px; |
|---|
| | | border-radius: 50%; |
|---|
| | | justify-content: center; |
|---|
| | | background-color: #727ff3; |
|---|
| | | align-items: center; |
|---|
| | | color: #171350; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .avatar-icon .iconfont { |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .avatar-text { |
|---|
| | | color: #ffffff; |
|---|
| | | margin-left: 8px; |
|---|
| | | font-size: 16px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .avatar-text .el-icon-arrow-down { |
|---|
| | | margin-left: 4px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <el-menu :default-active="nowAcTabs" class="pageMenu"> |
|---|
| | | <template v-for="menu in menus"> |
|---|
| | | <el-submenu v-if="menu.childrens" :key="menu.name" :index="menu.name"> |
|---|
| | | <template slot="title"> |
|---|
| | | <i v-if="menu.icon" :class="menu.icon"></i> |
|---|
| | | <span>{{ menu.label }}</span> |
|---|
| | | </template> |
|---|
| | | <el-menu-item v-for="child in menu.childrens" :key="child.name" :index="child.name" |
|---|
| | | @click="select(child)"><i v-if="child.icon" :class="child.icon"></i><span |
|---|
| | | class="text">{{ child.label }}</span> |
|---|
| | | </el-menu-item> |
|---|
| | | </el-submenu> |
|---|
| | | <el-submenu v-else :index="menu.name" class="el-submenu" :key="menu.name" @click="select(menu)"> |
|---|
| | | <template slot="title"> |
|---|
| | | <i v-if="menu.icon" :class="menu.icon"></i> |
|---|
| | | <span>{{ menu.label }}</span> |
|---|
| | | </template> |
|---|
| | | </el-submenu> |
|---|
| | | </template> |
|---|
| | | </el-menu> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | acTabs: 'topoGraph', |
|---|
| | | menus: [{ |
|---|
| | | label: "主界面", |
|---|
| | | name: "index", |
|---|
| | | src: "", |
|---|
| | | icon: "el-icon-s-platform", |
|---|
| | | childrens: [{ |
|---|
| | | label: "系统拓扑图", |
|---|
| | | icon: "el-icon-s-platform", |
|---|
| | | name: "topoGraph", |
|---|
| | | src: "topoGraph", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: "UPS状态监控", |
|---|
| | | icon: "el-icon-s-platform", |
|---|
| | | name: "UPSStateMonitor", |
|---|
| | | src: "UPSStateMonitor", |
|---|
| | | }, |
|---|
| | | ] |
|---|
| | | }, { |
|---|
| | | label: "试验管理", |
|---|
| | | name: "testMag", |
|---|
| | | src: "", |
|---|
| | | icon: "el-icon-s-platform", |
|---|
| | | childrens: [{ |
|---|
| | | label: "拖动端与加载端转速设置", |
|---|
| | | icon: "el-icon-s-platform", |
|---|
| | | name: "dAndlSetSpeed", |
|---|
| | | src: "dAndlSetSpeed", |
|---|
| | | }, ] |
|---|
| | | }, ] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | select(data) { |
|---|
| | | if (data.src) { |
|---|
| | | localStorage.setItem('activeMenu', data.name) |
|---|
| | | this.$router.push({ |
|---|
| | | path: `/index/${data.src}`, |
|---|
| | | }).catch(err => { |
|---|
| | | |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | nowAcTabs() { |
|---|
| | | return localStorage.getItem('activeMenu') || this.acTabs; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() {}, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .text { |
|---|
| | | display: inline-block; |
|---|
| | | width: 100%; |
|---|
| | | white-space: normal; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <div class="diagram-panel" :style="{'left':+position[0]+'px','top':+position[1]+'px'}"> |
|---|
| | | <h4 class="diagram-panel-title">{{title}}</h4> |
|---|
| | | <slot></slot> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | position: { |
|---|
| | | type: Array, |
|---|
| | | default: [] |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | type: String, |
|---|
| | | default: '' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <div class="choiceDiv"> |
|---|
| | | <div class="lable">{{choiceData.lable}}：</div> |
|---|
| | | <div class="choiceCon"> |
|---|
| | | <div class="choiceList" v-for="(item,index) in choiceData.choicceArr" :key="index" |
|---|
| | | :class="{active:activeIndex==index}" @click="changeChoice(index)" |
|---|
| | | :style="{backgroundColor:activeColor(index)}"> |
|---|
| | | <div class="tips" :style="{borderColor:activeColor(index)}"> |
|---|
| | | {{item}} |
|---|
| | | <span class="tipsEnd" :style="{borderTopColor:activeColor(index)}"></span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | props: ["choiceData"], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | activeIndex: 0 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | activeColor(index) { |
|---|
| | | if (this.activeIndex == index) { |
|---|
| | | return this.choiceData.activeColor |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | changeChoice(index) { |
|---|
| | | this.activeIndex = index; |
|---|
| | | this.$emit("active", this.choiceData.choicceArr[this.activeIndex]); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.activeIndex = this.choiceData.choicceArr.indexOf(this.choiceData.active) |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .choiceDiv { |
|---|
| | | padding: 2px 0; |
|---|
| | | border: 1px solid #5b64cb; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .lable { |
|---|
| | | padding-left: 8px; |
|---|
| | | color: #57f8ff; |
|---|
| | | font-size: 12px; |
|---|
| | | margin-right: 8px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .choiceCon { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .choiceList { |
|---|
| | | background-color: #5282ee; |
|---|
| | | width: 22px; |
|---|
| | | height: 24px; |
|---|
| | | margin: 0 4px; |
|---|
| | | cursor: pointer; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tips { |
|---|
| | | position: absolute; |
|---|
| | | top: -50px; |
|---|
| | | left: -50%; |
|---|
| | | width: 42px; |
|---|
| | | height: 42px; |
|---|
| | | background-color: #57f8ff; |
|---|
| | | color: #1f3065; |
|---|
| | | font-size: 12px; |
|---|
| | | border-radius: 50%; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | border: 2px solid #ffe329; |
|---|
| | | display: none; |
|---|
| | | transition: 0.3s; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tips .tipsEnd { |
|---|
| | | display: block; |
|---|
| | | width: 0; |
|---|
| | | height: 0; |
|---|
| | | border-left: 4px solid transparent; |
|---|
| | | border-right: 4px solid transparent; |
|---|
| | | border-top: 12px solid #ffe329; |
|---|
| | | position: absolute; |
|---|
| | | left: 15px; |
|---|
| | | bottom: -13px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .active .tips { |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <div class="external_circle"> |
|---|
| | | <div class="inner_circle"> |
|---|
| | | <slot></slot> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .external_circle, |
|---|
| | | .inner_circle { |
|---|
| | | background: #ffe229; |
|---|
| | | background: -moz-linear-gradient(top, #ffe229 0%, #ff3829 100%); |
|---|
| | | background: -webkit-gradient(left top, left bottom, color-stop(0%, #ffe229), color-stop(100%, #ff3829)); |
|---|
| | | background: -webkit-linear-gradient(top, #ffe229 0%, #ff3829 100%); |
|---|
| | | background: -o-linear-gradient(top, #ffe229 0%, #ff3829 100%); |
|---|
| | | background: -ms-linear-gradient(top, #ffe229 0%, #ff3829 100%); |
|---|
| | | background: linear-gradient(to bottom, #ffe229 0%, #ff3829 100%); |
|---|
| | | filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffe229', endColorstr='#ff3829', GradientType=0); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .inner_circle { |
|---|
| | | background: #2c3377; |
|---|
| | | border: 1px solid #1a227e; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .external_circle { |
|---|
| | | -webkit-border-radius: 50%; |
|---|
| | | -moz-border-radius: 50%; |
|---|
| | | -ms-border-radius: 50%; |
|---|
| | | -o-border-radius: 50%; |
|---|
| | | border-radius: 50%; |
|---|
| | | -webkit-transform: rotate(90deg); |
|---|
| | | -moz-transform: rotate(90deg); |
|---|
| | | -ms-transform: rotate(90deg); |
|---|
| | | -o-transform: rotate(90deg); |
|---|
| | | transform: rotate(90deg); |
|---|
| | | filter: progid: DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=-0.59846, M12=-0.80115, M21=-0.80115, M22=-0.59846); |
|---|
| | | -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=-0.59846, M12=--0.80115, M21=-0.80115, M22=-0.59846)"; |
|---|
| | | zoom: 1; |
|---|
| | | width: 110px; |
|---|
| | | height: 110px; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .inner_circle { |
|---|
| | | -webkit-border-radius: 50%; |
|---|
| | | -moz-border-radius: 50%; |
|---|
| | | -ms-border-radius: 50%; |
|---|
| | | -o-border-radius: 50%; |
|---|
| | | border-radius: 50%; |
|---|
| | | -webkit-transform: rotate(-90deg); |
|---|
| | | -moz-transform: rotate(-90deg); |
|---|
| | | -ms-transform: rotate(-90deg); |
|---|
| | | -o-transform: rotate(-90deg); |
|---|
| | | transform: rotate(-90deg); |
|---|
| | | filter: progid: DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=-0.59846, M12=-0.80115, M21=0.80115, M22=-0.59846); |
|---|
| | | -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=-0.59846, M12=-0.80115, M21=0.80115, M22=-0.59846)"; |
|---|
| | | zoom: 1; |
|---|
| | | width: 90px; |
|---|
| | | height: 90px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <div class="markProgress"> |
|---|
| | | <el-slider class="self_slider" v-model="guideRail" :min="0" :max="max" :marks="guideMarks" disabled> |
|---|
| | | </el-slider> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | guideRail: { |
|---|
| | | type: Number, |
|---|
| | | }, |
|---|
| | | max: { |
|---|
| | | type: Number, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | guideMarks() { |
|---|
| | | let marks = {}; |
|---|
| | | let num = this.max; |
|---|
| | | for (let i = 0; i <= num; i++) { |
|---|
| | | if (i % Math.round(num / 6) == 0) { |
|---|
| | | marks[i] = i + ""; |
|---|
| | | } else if (i % Math.round(num / 30) == 0) { |
|---|
| | | marks[i] = { |
|---|
| | | style: { |
|---|
| | | color: "#ccc", |
|---|
| | | }, |
|---|
| | | label: this.$createElement("span", "|"), |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return marks; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | .markProgress { |
|---|
| | | width: 96%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .markProgress .self_slider { |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .markProgress .el-slider__runway { |
|---|
| | | height: 12px; |
|---|
| | | margin: 0; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | background: none; |
|---|
| | | border: 1px solid #ffffff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .markProgress .el-slider__runway .el-slider__bar { |
|---|
| | | height: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .markProgress .el-slider__runway .el-slider__button-wrapper { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .markProgress .el-slider__stop { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .markProgress .el-slider__marks-text { |
|---|
| | | top: 0; |
|---|
| | | color: #ffffff; |
|---|
| | | margin-top: 15px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .markProgress .el-slider__marks-text span { |
|---|
| | | display: inline-block; |
|---|
| | | height: 8px !important; |
|---|
| | | overflow: hidden; |
|---|
| | | transform: translateY(-15px); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .markProgress .el-slider__runway.disabled .el-slider__bar { |
|---|
| | | background-color: #00f7f9; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <div class="scaleBar"> |
|---|
| | | <div v-if="direction=='left'" class="scaleCon leftScale"> |
|---|
| | | <div class="line"></div> |
|---|
| | | <div class="number"> |
|---|
| | | <div class="split">{{computedMark("add",3)}}</div> |
|---|
| | | <div class="split">{{computedMark("add",2)}}</div> |
|---|
| | | <div class="split">{{computedMark("add",1)}}</div> |
|---|
| | | <div class="split active">{{value}}</div> |
|---|
| | | <div class="split">{{computedMark("sub",1)}}</div> |
|---|
| | | <div class="split">{{computedMark("sub",2)}}</div> |
|---|
| | | <div class="split">{{computedMark("sub",3)}}</div> |
|---|
| | | <div class="split">{{computedMark("sub",4)}}</div> |
|---|
| | | <div class="split">{{computedMark("sub",5)}}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-else class="scaleCon rightScale"> |
|---|
| | | <div class="number"> |
|---|
| | | <div class="split">{{computedMark("add",3)}}</div> |
|---|
| | | <div class="split">{{computedMark("add",2)}}</div> |
|---|
| | | <div class="split">{{computedMark("add",1)}}</div> |
|---|
| | | <div class="split active">{{value}}</div> |
|---|
| | | <div class="split">{{computedMark("sub",1)}}</div> |
|---|
| | | <div class="split">{{computedMark("sub",2)}}</div> |
|---|
| | | <div class="split">{{computedMark("sub",3)}}</div> |
|---|
| | | <div class="split">{{computedMark("sub",4)}}</div> |
|---|
| | | <div class="split">{{computedMark("sub",5)}}</div> |
|---|
| | | </div> |
|---|
| | | <div class="line"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import FC from "../../assets/js/FC" |
|---|
| | | export default { |
|---|
| | | props: { |
|---|
| | | direction: { |
|---|
| | | type: String, |
|---|
| | | default: 'left' |
|---|
| | | }, |
|---|
| | | value: { |
|---|
| | | type: Number |
|---|
| | | }, |
|---|
| | | splitNum: { |
|---|
| | | type: Number |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | computedMark(type, multiple) { |
|---|
| | | switch (type) { |
|---|
| | | case "add": |
|---|
| | | return FC.add(this.value, FC.mul(multiple, this.splitNum)) |
|---|
| | | break; |
|---|
| | | case "sub": |
|---|
| | | return FC.sub(this.value, FC.mul(multiple, this.splitNum)) |
|---|
| | | break; |
|---|
| | | default: |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .scaleCon { |
|---|
| | | height: 300px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .line { |
|---|
| | | width: 1px; |
|---|
| | | height: 300px; |
|---|
| | | background-color: #4b74da; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .number { |
|---|
| | | height: 300px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | flex-direction: column; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .split { |
|---|
| | | font-size: 12px; |
|---|
| | | color: #ffffff; |
|---|
| | | position: relative; |
|---|
| | | margin: 2px 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .split.active { |
|---|
| | | color: #ffe329; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .leftScale .split { |
|---|
| | | padding-left: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .rightScale .split { |
|---|
| | | padding-right: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .leftScale .split::before { |
|---|
| | | display: block; |
|---|
| | | content: ""; |
|---|
| | | width: 11px; |
|---|
| | | height: 1px; |
|---|
| | | background-color: #4b74da; |
|---|
| | | position: absolute; |
|---|
| | | left: 0; |
|---|
| | | top: 50%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .rightScale .split::before { |
|---|
| | | display: block; |
|---|
| | | content: ""; |
|---|
| | | width: 11px; |
|---|
| | | height: 1px; |
|---|
| | | background-color: #4b74da; |
|---|
| | | position: absolute; |
|---|
| | | right: 0; |
|---|
| | | top: 50%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | import Vue from 'vue' |
|---|
| | | import App from './App.vue' |
|---|
| | | import router from './router' |
|---|
| | | import store from './store' |
|---|
| | | |
|---|
| | | import ElementUI from 'element-ui' |
|---|
| | | import 'element-ui/lib/theme-chalk/index.css' |
|---|
| | | import './assets/css/basic.css' |
|---|
| | | import '../public/theme/normal.css' |
|---|
| | | |
|---|
| | | import '@/assets/js/rem.js' |
|---|
| | | |
|---|
| | | Vue.use(ElementUI, { |
|---|
| | | zIndex: 99 |
|---|
| | | }); |
|---|
| | | |
|---|
| | | Vue.config.productionTip = false |
|---|
| | | |
|---|
| | | new Vue({ |
|---|
| | | router, |
|---|
| | | store, |
|---|
| | | render: function (h) { |
|---|
| | | return h(App) |
|---|
| | | } |
|---|
| | | }).$mount('#app') |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <div class="contentBox"> |
|---|
| | | <div class="diagram-content"> |
|---|
| | | <div class="diagram-stc" ref="static"></div> |
|---|
| | | <div class="diagram-flush" ref="flush"></div> |
|---|
| | | |
|---|
| | | <diagram-panel class="inputPanel" :position="inputPanelPos" title="输入频率" ref="inputPanel"> |
|---|
| | | <div class="panel-item"> |
|---|
| | | <div> |
|---|
| | | <span class="number">{{inputPanelData.guideRail}}</span> |
|---|
| | | <span>HZ</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="panel-item"> |
|---|
| | | <mark-progress :guideRail="inputPanelData.guideRail" :max="inputPanelData.max"></mark-progress> |
|---|
| | | </div> |
|---|
| | | <div class="panel-item"><span class="label">输入电压:</span> |
|---|
| | | <el-input class="input" readonly="readonly"></el-input><span class="unit">V</span> |
|---|
| | | </div> |
|---|
| | | <div class="panel-item"><span class="label">输入额定电压:</span> |
|---|
| | | <el-input class="input" readonly="readonly"></el-input><span class="unit">V</span> |
|---|
| | | </div> |
|---|
| | | <div class="panel-item"><span class="label">输入额定功率:</span> |
|---|
| | | <el-input class="input" readonly="readonly"></el-input><span class="unit">Hz</span> |
|---|
| | | </div> |
|---|
| | | </diagram-panel> |
|---|
| | | |
|---|
| | | <diagram-panel :position="UPSPanelPos" title="UPS参数" ref="UPSPanel"> |
|---|
| | | <div class="panel-item"><span class="label">UPS温度:</span> |
|---|
| | | <el-input class="input" readonly="readonly"></el-input><span class="unit">℃</span> |
|---|
| | | </div> |
|---|
| | | <div class="panel-item"><span class="label">供电方式:</span> |
|---|
| | | <el-input class="input" readonly="readonly"></el-input> |
|---|
| | | </div> |
|---|
| | | </diagram-panel> |
|---|
| | | |
|---|
| | | <diagram-panel :position="batterPanelPos" title="电池参数" ref="batterPanel" class="batterPanel"> |
|---|
| | | <div class="panel-item"> |
|---|
| | | <div class="batter-bg"> |
|---|
| | | <span>剩余容量</span> |
|---|
| | | <span class="number">100</span> |
|---|
| | | <span>%</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="panel-item"><span class="label">电池电压:</span> |
|---|
| | | <el-input class="input" readonly="readonly"></el-input><span class="unit">V</span> |
|---|
| | | </div> |
|---|
| | | <div class="panel-item"><span class="label">电池状态:</span> |
|---|
| | | <el-input class="input" readonly="readonly"></el-input> |
|---|
| | | </div> |
|---|
| | | </diagram-panel> |
|---|
| | | |
|---|
| | | <diagram-panel class="outputPanel" :position="outputPanelPos" title="输出频率" ref="outputPanel"> |
|---|
| | | <div class="panel-item"> |
|---|
| | | <!-- 圆环组件 --> |
|---|
| | | <gradients-ring> |
|---|
| | | <div class="ringBox"> |
|---|
| | | <div>输出电压</div> |
|---|
| | | <div> |
|---|
| | | <span class="number">7.0</span> |
|---|
| | | <span>%</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </gradients-ring> |
|---|
| | | </div> |
|---|
| | | <div class="panel-item"><span class="label">输出电压:</span> |
|---|
| | | <el-input class="input" readonly="readonly"></el-input><span class="unit">V</span> |
|---|
| | | </div> |
|---|
| | | <div class="panel-item"><span class="label">输出额定电压:</span> |
|---|
| | | <el-input class="input" readonly="readonly"></el-input><span class="unit">V</span> |
|---|
| | | </div> |
|---|
| | | <div class="panel-item"><span class="label">输出额定频率:</span> |
|---|
| | | <el-input class="input" readonly="readonly"></el-input><span class="unit">Hz</span> |
|---|
| | | </div> |
|---|
| | | <div class="panel-item"><span class="label">温度过限点:</span> |
|---|
| | | <el-input class="input" readonly="readonly"></el-input><span class="unit">℃</span> |
|---|
| | | </div> |
|---|
| | | <div class="panel-item"><span class="label">负载过限点:</span> |
|---|
| | | <el-input class="input" readonly="readonly"></el-input><span class="unit">%</span> |
|---|
| | | </div> |
|---|
| | | </diagram-panel> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import gridCircuitDiagram from '@/pages/home/UPSdiagram/js/gridCircuitDiagram' |
|---|
| | | import DiagramPanel from '@/components/smallModule/DiagramPanel.vue'; |
|---|
| | | import GradientsRing from '@/components/smallModule/gradientsRing.vue'; |
|---|
| | | import MarkProgress from '@/components/smallModule/markProgress.vue'; |
|---|
| | | let diagram; |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | DiagramPanel, |
|---|
| | | GradientsRing, |
|---|
| | | MarkProgress |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | inputPanelPos: [], |
|---|
| | | UPSPanelPos: [], |
|---|
| | | batterPanelPos: [], |
|---|
| | | outputPanelPos: [], |
|---|
| | | inputPanelData: { |
|---|
| | | guideRail: 50, |
|---|
| | | max: 90 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | setPanelPos() { //设置面板位置 |
|---|
| | | //输入频率面板 |
|---|
| | | let line1 = diagram.getZoomLineInfo('line1')[0]; |
|---|
| | | let img1 = diagram.getZoomImageInfo('img1').height; |
|---|
| | | |
|---|
| | | let inputPanelInfo = [this.$refs.inputPanel.$el.clientWidth, this.$refs.inputPanel. |
|---|
| | | $el.clientHeight |
|---|
| | | ]; |
|---|
| | | this.inputPanelPos = []; |
|---|
| | | this.inputPanelPos.push(line1[0] - inputPanelInfo[0]); |
|---|
| | | this.inputPanelPos.push(line1[1] + img1 / 2 + 8); |
|---|
| | | |
|---|
| | | //UPS参数面板 |
|---|
| | | let line8 = diagram.getZoomLineInfo('line8')[1]; |
|---|
| | | let UPSPanelInfo = [this.$refs.UPSPanel.$el.clientWidth, this.$refs.UPSPanel. |
|---|
| | | $el.clientHeight |
|---|
| | | ]; |
|---|
| | | this.UPSPanelPos = []; |
|---|
| | | this.UPSPanelPos.push(line8[0] - UPSPanelInfo[0] - 30); |
|---|
| | | this.UPSPanelPos.push(line8[1] - UPSPanelInfo[1] - 18); |
|---|
| | | |
|---|
| | | //电池参数面板 |
|---|
| | | let line11 = diagram.getZoomLineInfo('line11')[1]; |
|---|
| | | let batterPanelInfo = [this.$refs.batterPanel.$el.clientWidth, this.$refs.batterPanel. |
|---|
| | | $el.clientHeight |
|---|
| | | ]; |
|---|
| | | this.batterPanelPos = []; |
|---|
| | | this.batterPanelPos.push(line11[0] - batterPanelInfo[0] / 2); |
|---|
| | | this.batterPanelPos.push(line11[1]); |
|---|
| | | |
|---|
| | | //输出频率面板 |
|---|
| | | let img4 = diagram.getZoomImageInfo('img4').right; |
|---|
| | | let outputPanelInfo = [this.$refs.outputPanel.$el.clientWidth, this.$refs.outputPanel. |
|---|
| | | $el.clientHeight |
|---|
| | | ]; |
|---|
| | | this.outputPanelPos = []; |
|---|
| | | this.outputPanelPos.push(img4[0] + 20); |
|---|
| | | this.outputPanelPos.push(img4[1] - outputPanelInfo[1] * 2 / 3); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush); |
|---|
| | | this.setPanelPos(); |
|---|
| | | window.addEventListener('resize', () => { |
|---|
| | | this.setPanelPos(); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style scoped> |
|---|
| | | .diagram-content { |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .diagram-stc { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .diagram-flush { |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | right: 0; |
|---|
| | | bottom: 0; |
|---|
| | | z-index: 9; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .outputPanel.diagram-panel, |
|---|
| | | .inputPanel.diagram-panel { |
|---|
| | | padding: 18px 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .outputPanel.diagram-panel .panel-item .label, |
|---|
| | | .inputPanel.diagram-panel .panel-item .label { |
|---|
| | | width: 110px; |
|---|
| | | text-align: right; |
|---|
| | | display: block; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .outputPanel .ringBox { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | flex-direction: column; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .outputPanel .ringBox, |
|---|
| | | .inputPanel { |
|---|
| | | font-size: 14px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .outputPanel .number, |
|---|
| | | .inputPanel .number, |
|---|
| | | .batterPanel .number { |
|---|
| | | font-weight: bold; |
|---|
| | | font-size: 26px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .batterPanel .batter-bg { |
|---|
| | | width: 177px; |
|---|
| | | height: 78px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | font-size: 14px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | import Diagram from '@/assets/js/newDiagram' |
|---|
| | | import ACImg from '../images/AC.png' |
|---|
| | | import frequencyImg from '../images/frequency.png' |
|---|
| | | import parameterImg from '../images/parameter.png' |
|---|
| | | |
|---|
| | | const lineWidth = 5; |
|---|
| | | const lineStrokeColor = '#00f6f8'; |
|---|
| | | const frequencyWidth = 96; |
|---|
| | | const ACWidth = 124; |
|---|
| | | const parameterWidth = 85; |
|---|
| | | |
|---|
| | | function girdCircuitDiagram(stc, flush) { |
|---|
| | | let diagram = new Diagram(); |
|---|
| | | diagram.setCanvas(stc, flush); |
|---|
| | | |
|---|
| | | let start = [260, 380]; |
|---|
| | | |
|---|
| | | let Image1 = diagram.drawImage({ |
|---|
| | | id: 'img1', |
|---|
| | | url: frequencyImg, |
|---|
| | | point: [start[0] - frequencyWidth, start[1] - frequencyWidth * 148 / 96 / 2], |
|---|
| | | width: frequencyWidth, |
|---|
| | | height: frequencyWidth * 148 / 96 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line1 = diagram.line({ |
|---|
| | | id: 'line1', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | start, |
|---|
| | | [start[0] + 110, start[1]] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line2 = diagram.line({ |
|---|
| | | id: 'line2', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line1[1][0], line1[1][1]], |
|---|
| | | [line1[1][0] + 100, line1[1][1]] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let Image2 = diagram.drawImage({ |
|---|
| | | id: 'img2', |
|---|
| | | url: ACImg, |
|---|
| | | point: [line2[1][0], line2[1][1] - ACWidth / 2], |
|---|
| | | width: ACWidth, |
|---|
| | | height: ACWidth |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line3 = diagram.line({ |
|---|
| | | id: 'line3', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line2[1][0] + Image2.width, line2[1][1]], |
|---|
| | | [line2[1][0] + Image2.width + 90, line2[1][1]] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let arc1 = diagram.arc({ |
|---|
| | | id: 'arc1', |
|---|
| | | point: [ |
|---|
| | | line3[1][0] + 6, line3[1][1] |
|---|
| | | ], |
|---|
| | | fillStyle: lineStrokeColor, |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | radius: 12, |
|---|
| | | type: 'fill' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line4 = diagram.line({ |
|---|
| | | id: 'line4', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line3[1][0] + arc1.radius, line3[1][1]], |
|---|
| | | [line3[1][0] + arc1.radius + 90, line3[1][1]] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let Image3 = diagram.drawImage({ |
|---|
| | | id: 'img3', |
|---|
| | | url: ACImg, |
|---|
| | | point: [line4[1][0], line4[1][1] - ACWidth / 2], |
|---|
| | | width: ACWidth, |
|---|
| | | height: ACWidth |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line5 = diagram.line({ |
|---|
| | | id: 'line5', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line4[1][0] + Image3.width, line4[1][1]], |
|---|
| | | [line4[1][0] + Image3.width + 100, line4[1][1]] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line6 = diagram.line({ |
|---|
| | | id: 'line6', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line5[1][0], line5[1][1]], |
|---|
| | | [line5[1][0] + 110, line5[1][1]] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let Image4 = diagram.drawImage({ |
|---|
| | | id: 'img4', |
|---|
| | | url: frequencyImg, |
|---|
| | | point: [line6[1][0], line6[1][1] - frequencyWidth * 148 / 96 / 2], |
|---|
| | | width: frequencyWidth, |
|---|
| | | height: frequencyWidth * 148 / 96 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line7 = diagram.line({ |
|---|
| | | id: 'line7', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line1[1][0], line1[1][1]], |
|---|
| | | [line1[1][0], line1[1][1] - 200] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line8 = diagram.line({ |
|---|
| | | id: 'line8', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line7[1][0], line7[1][1]], |
|---|
| | | [line3[1][0] + arc1.radius / 2 - parameterWidth / 2, line7[1][1]] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let Image5 = diagram.drawImage({ |
|---|
| | | id: 'img5', |
|---|
| | | url: parameterImg, |
|---|
| | | point: [line8[1][0], line8[1][1] - frequencyWidth * 141 / 85 / 2], |
|---|
| | | width: parameterWidth, |
|---|
| | | height: parameterWidth * 141 / 85 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line9 = diagram.line({ |
|---|
| | | id: 'line9', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line8[1][0] + Image5.width, line8[1][1]], |
|---|
| | | [line5[1][0], line8[1][1]], |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line10 = diagram.line({ |
|---|
| | | id: 'line10', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line9[1][0], line9[1][1]], |
|---|
| | | [line9[1][0], line5[1][1]], |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line11 = diagram.line({ |
|---|
| | | id: 'line11', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line3[1][0] + arc1.radius / 2, line3[1][1]], |
|---|
| | | [line3[1][0] + arc1.radius / 2, line3[1][1] + 110], |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | return diagram; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | export default girdCircuitDiagram; |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <div class="contentBox"> |
|---|
| | | <div class="tipTitle">系统拓扑</div> |
|---|
| | | <div class="diagram-stc" ref="static"></div> |
|---|
| | | <div class="diagram-flush" ref="flush"></div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import gridCircuitDiagram from "@/pages/home/topoGraphdiagram/js/gridCircuitDiagram" |
|---|
| | | let diagram; |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush); |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .tipTitle { |
|---|
| | | position: absolute; |
|---|
| | | left: 40px; |
|---|
| | | top: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .topoTitle::before { |
|---|
| | | display: block; |
|---|
| | | content: ""; |
|---|
| | | width: 12px; |
|---|
| | | height: 24px; |
|---|
| | | background-color: #ffe328; |
|---|
| | | position: absolute; |
|---|
| | | top: 50%; |
|---|
| | | left: 0; |
|---|
| | | padding: 0; |
|---|
| | | transform: translateY(-12px); |
|---|
| | | } |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | import Diagram from '@/assets/js/newDiagram' |
|---|
| | | import cabinet from '../images/cabinet.png' |
|---|
| | | import rectifier from '../images/rectifier.png' |
|---|
| | | import plate from '../images/plate.png' |
|---|
| | | import speedCabinet from '../images/speedCabinet.png' |
|---|
| | | import electric from '../images/electric.png' |
|---|
| | | import sensor from '../images/sensor.png' |
|---|
| | | import dynamometry from '../images/dynamometry.png' |
|---|
| | | import AFE from '../images/AFE.png' |
|---|
| | | import transformer from '../images/transformer.png' |
|---|
| | | import waterStation from '../images/waterStation.png' |
|---|
| | | import oilStation from '../images/oilStation.png' |
|---|
| | | import system from '../images/system.png' |
|---|
| | | import shock from '../images/shock.png' |
|---|
| | | const lineStrokeColor = '#ffffff'; |
|---|
| | | const lineWidth = 1; |
|---|
| | | const arrow = { |
|---|
| | | lineWidth: 4, |
|---|
| | | size: 40, |
|---|
| | | systemColor: '#00f7f9' |
|---|
| | | } |
|---|
| | | |
|---|
| | | function girdCircuitDiagram(stc, flush) { |
|---|
| | | let diagram = new Diagram(); |
|---|
| | | diagram.setCanvas(stc, flush); |
|---|
| | | |
|---|
| | | let start = [260, 60]; |
|---|
| | | |
|---|
| | | // 虚线1 |
|---|
| | | let dashPoints1 = diagram.dashLine({ |
|---|
| | | strokeStyle: '#ffffff', |
|---|
| | | points: [ |
|---|
| | | [start[0], start[1] + 20], |
|---|
| | | [start[0], start[1] + 470], |
|---|
| | | ] |
|---|
| | | }); |
|---|
| | | // 虚线2 |
|---|
| | | let dashPoints2 = diagram.dashLine({ |
|---|
| | | strokeStyle: '#ffffff', |
|---|
| | | points: [ |
|---|
| | | dashPoints1[1], |
|---|
| | | [dashPoints1[1][0] + 520, dashPoints1[1][1]], |
|---|
| | | ] |
|---|
| | | }); |
|---|
| | | // 虚线3 |
|---|
| | | let dashPoints3 = diagram.dashLine({ |
|---|
| | | strokeStyle: '#ffffff', |
|---|
| | | points: [ |
|---|
| | | dashPoints2[1], |
|---|
| | | [dashPoints2[1][0], dashPoints2[1][1] + 190], |
|---|
| | | ] |
|---|
| | | }); |
|---|
| | | // 虚线4 |
|---|
| | | let dashPoints4 = diagram.dashLine({ |
|---|
| | | strokeStyle: '#ffffff', |
|---|
| | | points: [ |
|---|
| | | dashPoints3[1], |
|---|
| | | [dashPoints3[1][0] + 680, dashPoints3[1][1]], |
|---|
| | | ] |
|---|
| | | }); |
|---|
| | | // 虚线5 |
|---|
| | | let dashPoints5 = diagram.dashLine({ |
|---|
| | | strokeStyle: '#ffffff', |
|---|
| | | points: [ |
|---|
| | | dashPoints4[1], |
|---|
| | | [dashPoints4[1][0], dashPoints4[1][1] - 640], |
|---|
| | | ] |
|---|
| | | }); |
|---|
| | | // 虚线6 |
|---|
| | | let dashPoints6 = diagram.dashLine({ |
|---|
| | | strokeStyle: '#ffffff', |
|---|
| | | points: [ |
|---|
| | | dashPoints5[1], |
|---|
| | | [dashPoints5[1][0] - 1200, dashPoints5[1][1]], |
|---|
| | | ] |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let ExternalStart = [290, 140]; |
|---|
| | | |
|---|
| | | // 绘制拓扑图母线上部 |
|---|
| | | let TopoExternal = drawTopoExternal(diagram, ExternalStart); |
|---|
| | | |
|---|
| | | // 绘制拓扑图内部主要部分 |
|---|
| | | let TopoCenter = drawTopoCenter(diagram, TopoExternal); |
|---|
| | | |
|---|
| | | // 绘制拓扑图集中操作系统 |
|---|
| | | let TopoSystem = drawTopoSystem(diagram); |
|---|
| | | |
|---|
| | | //绘制拓扑图供水站 |
|---|
| | | let Image11 = diagram.drawImage({ |
|---|
| | | id: 'img11', |
|---|
| | | url: waterStation, |
|---|
| | | point: [40, 200], |
|---|
| | | width: 89, |
|---|
| | | height: 109 |
|---|
| | | }) |
|---|
| | | // 供水站 |
|---|
| | | let text14 = diagram.text({ |
|---|
| | | text: '供水站', |
|---|
| | | baseline: 'middle', |
|---|
| | | fillStyle: '#ffff18', |
|---|
| | | fontSize: 16, |
|---|
| | | point: [Image11.top[0] - 25, Image11.top[1] - 20], |
|---|
| | | radBorder: true |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let line16 = diagram.line({ |
|---|
| | | id: 'line16', |
|---|
| | | strokeStyle: '#fb46af', |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [Image11.right[0] + 10, Image11.right[1]], |
|---|
| | | [Image11.right[0] + 70, Image11.right[1]] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | let arrow1 = diagram.drawArrow({ |
|---|
| | | id: 'arrow1', |
|---|
| | | fillStyle: '#fb46af', |
|---|
| | | size: arrow.size, |
|---|
| | | direction: 'right', |
|---|
| | | type: 'fill', |
|---|
| | | point: line16[1] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | //绘制拓扑图供油站 |
|---|
| | | let Image12 = diagram.drawImage({ |
|---|
| | | id: 'img12', |
|---|
| | | url: oilStation, |
|---|
| | | point: [30, 420], |
|---|
| | | width: 124, |
|---|
| | | height: 103 |
|---|
| | | }) |
|---|
| | | // 供油站 |
|---|
| | | let text15 = diagram.text({ |
|---|
| | | text: '供油站', |
|---|
| | | baseline: 'middle', |
|---|
| | | fillStyle: '#ffff18', |
|---|
| | | fontSize: 16, |
|---|
| | | point: [Image12.top[0] - 25, Image12.top[1] - 20], |
|---|
| | | radBorder: true |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let line17 = diagram.line({ |
|---|
| | | id: 'line17', |
|---|
| | | strokeStyle: '#fb46af', |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [Image12.right[0], Image12.right[1]], |
|---|
| | | [Image12.right[0] + 44, Image12.right[1]] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | let arrow2 = diagram.drawArrow({ |
|---|
| | | id: 'arrow2', |
|---|
| | | fillStyle: '#fb46af', |
|---|
| | | size: arrow.size, |
|---|
| | | direction: 'right', |
|---|
| | | type: 'fill', |
|---|
| | | point: line17[1] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | |
|---|
| | | return diagram; |
|---|
| | | } |
|---|
| | | |
|---|
| | | //拓扑图母线上部 |
|---|
| | | function drawTopoExternal(diagram, start) { |
|---|
| | | let KVLine = diagram.gradientline({ |
|---|
| | | id: 'KVLine', |
|---|
| | | lineWidth: 7, |
|---|
| | | points: [ |
|---|
| | | start, |
|---|
| | | [start[0] + 1140, start[1]] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 10KV母线文本 |
|---|
| | | let kvLinetext = diagram.text({ |
|---|
| | | text: '10KV母线', |
|---|
| | | baseline: 'middle', |
|---|
| | | fillStyle: '#ffff18', |
|---|
| | | fontSize: 16, |
|---|
| | | point: [KVLine[0][0], KVLine[0][1] - 30], |
|---|
| | | radBorder: true |
|---|
| | | }); |
|---|
| | | |
|---|
| | | |
|---|
| | | // 试验厂房2#开闭所 |
|---|
| | | let text1 = diagram.text({ |
|---|
| | | text: '试验厂房2#开闭所', |
|---|
| | | baseline: 'middle', |
|---|
| | | fillStyle: '#ffff18', |
|---|
| | | fontSize: 16, |
|---|
| | | point: [700, 30], |
|---|
| | | radBorder: true |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let Image1 = diagram.drawImage({ |
|---|
| | | id: 'img1', |
|---|
| | | url: cabinet, |
|---|
| | | point: [text1.right[0] + 10, text1.top[1] - 15], |
|---|
| | | width: 130 * 97 / 130, |
|---|
| | | height: 97 * 97 / 130 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line1 = diagram.line({ |
|---|
| | | id: 'line1', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | text1.bottom, |
|---|
| | | [text1.bottom[0], text1.bottom[1] + 48] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let onOff1 = diagram.onOff({ |
|---|
| | | id: 'km1', |
|---|
| | | point: [text1.bottom[0], text1.bottom[1] + 48], |
|---|
| | | direction: 'bottom', |
|---|
| | | color: '#c0becf', |
|---|
| | | state: false, |
|---|
| | | flush: false, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let line2 = diagram.line({ |
|---|
| | | id: 'line2', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | onOff1.arc2.bottom, |
|---|
| | | [onOff1.arc2.bottom[0], start[1] - 3.5] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 5000KVA开关X1 |
|---|
| | | let text2 = diagram.text({ |
|---|
| | | text: '5000KVA开关', |
|---|
| | | baseline: 'middle', |
|---|
| | | fillStyle: '#ffffff', |
|---|
| | | fontSize: 14, |
|---|
| | | point: [onOff1.line1[1][0] + 30, KVLine[0][1] - 30], |
|---|
| | | radBorder: true |
|---|
| | | }); |
|---|
| | | |
|---|
| | | return [KVLine[0][0], KVLine[0][1] + 3.5]; |
|---|
| | | } |
|---|
| | | |
|---|
| | | //拓扑图虚线内部 |
|---|
| | | function drawTopoCenter(diagram, start) { |
|---|
| | | let line3 = diagram.line({ |
|---|
| | | id: 'line3', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [start[0] + 170, start[1]], |
|---|
| | | [start[0] + 170, start[1] + 20] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let onOff2 = diagram.onOff({ |
|---|
| | | id: 'km2', |
|---|
| | | point: line3[1], |
|---|
| | | direction: 'bottom', |
|---|
| | | color: '#c0becf', |
|---|
| | | state: false, |
|---|
| | | flush: false, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let line4 = diagram.line({ |
|---|
| | | id: 'line4', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | onOff2.arc2.bottom, |
|---|
| | | [onOff2.arc2.bottom[0], onOff2.arc2.bottom[1] + 20] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 3200KVA开关 |
|---|
| | | let text4 = diagram.text({ |
|---|
| | | text: '3200KVA开关& 1250A', |
|---|
| | | baseline: 'top', |
|---|
| | | textAlign: 'center', |
|---|
| | | fillStyle: '#ffffff', |
|---|
| | | fontSize: 14, |
|---|
| | | point: [onOff2.line1[1][0] + 30, onOff2.line1[1][1]], |
|---|
| | | radBorder: true |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let line5 = diagram.line({ |
|---|
| | | id: 'line5', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [start[0] + 130, start[1]], |
|---|
| | | [start[0] + 130, start[1] + 20] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let onOff3 = diagram.onOff({ |
|---|
| | | id: 'km3', |
|---|
| | | point: line5[1], |
|---|
| | | direction: 'bottom', |
|---|
| | | color: '#c0becf', |
|---|
| | | state: false, |
|---|
| | | flush: false, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let line6 = diagram.line({ |
|---|
| | | id: 'line6', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | onOff3.arc2.bottom, |
|---|
| | | [onOff3.arc2.bottom[0], onOff3.arc2.bottom[1] + 20] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 3200KVA开关 |
|---|
| | | let text5 = diagram.text({ |
|---|
| | | text: '3200KVA开关& 1250A', |
|---|
| | | baseline: 'top', |
|---|
| | | textAlign: 'center', |
|---|
| | | fillStyle: '#ffffff', |
|---|
| | | fontSize: 14, |
|---|
| | | point: [onOff3.line1[1][0] - 140, onOff3.line1[1][1]], |
|---|
| | | radBorder: true |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 大功率整流电源 |
|---|
| | | let text3 = diagram.text({ |
|---|
| | | text: '大功率整流电源', |
|---|
| | | baseline: 'top', |
|---|
| | | textAlign: 'center', |
|---|
| | | fillStyle: '#ffffff', |
|---|
| | | fontSize: 14, |
|---|
| | | point: [line4[1][0] - 90, line4[1][1] + 10], |
|---|
| | | radBorder: true |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let Image2 = diagram.drawImage({ |
|---|
| | | id: 'img2', |
|---|
| | | url: rectifier, |
|---|
| | | point: [text3.bottom[0] - 32, text3.bottom[1] + 2], |
|---|
| | | width: 70, |
|---|
| | | height: 101, |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line7 = diagram.line({ |
|---|
| | | id: 'line7', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [Image2.bottom[0] - 6, Image2.bottom[1]], |
|---|
| | | [Image2.bottom[0] - 6, Image2.bottom[1] + 40] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 直流主配电板 |
|---|
| | | let text6 = diagram.text({ |
|---|
| | | text: '直流主配电板', |
|---|
| | | baseline: 'top', |
|---|
| | | textAlign: 'center', |
|---|
| | | fillStyle: '#ffffff', |
|---|
| | | fontSize: 14, |
|---|
| | | point: [line7[1][0] - 40, line7[1][1] + 10], |
|---|
| | | radBorder: true |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let Image3 = diagram.drawImage({ |
|---|
| | | id: 'img3', |
|---|
| | | url: plate, |
|---|
| | | point: [text6.bottom[0] - 36, text6.bottom[1] + 2], |
|---|
| | | width: 74, |
|---|
| | | height: 98, |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line8 = diagram.line({ |
|---|
| | | id: 'line8', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [Image2.bottom[0] - 6, Image3.bottom[1]], |
|---|
| | | [Image2.bottom[0] - 6, Image3.bottom[1] + 105] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 直流调速柜 |
|---|
| | | let text7 = diagram.text({ |
|---|
| | | text: '直流调速柜', |
|---|
| | | baseline: 'top', |
|---|
| | | textAlign: 'center', |
|---|
| | | fillStyle: '#ffffff', |
|---|
| | | fontSize: 14, |
|---|
| | | point: [line8[1][0] - 34, line8[1][1] + 10], |
|---|
| | | radBorder: true |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let Image4 = diagram.drawImage({ |
|---|
| | | id: 'img4', |
|---|
| | | url: speedCabinet, |
|---|
| | | point: [text7.bottom[0] - 36, text7.bottom[1] + 10], |
|---|
| | | width: 74, |
|---|
| | | height: 80, |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line9 = diagram.line({ |
|---|
| | | id: 'line9', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [Image4.right[0], Image4.right[1] - 10], |
|---|
| | | [Image4.right[0] + 120, Image4.right[1] - 10] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let Image5 = diagram.drawImage({ |
|---|
| | | id: 'img5', |
|---|
| | | url: electric, |
|---|
| | | point: [line9[1][0] - 9, line9[1][1] - 80], |
|---|
| | | width: 160, |
|---|
| | | height: 120, |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 受试推进电机 |
|---|
| | | let text8 = diagram.text({ |
|---|
| | | text: '受试推进电机', |
|---|
| | | baseline: 'top', |
|---|
| | | textAlign: 'center', |
|---|
| | | fillStyle: '#ffffff', |
|---|
| | | fontSize: 14, |
|---|
| | | point: [Image5.top[0] - 20, Image5.top[1] - 28], |
|---|
| | | radBorder: true |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let line10 = diagram.line({ |
|---|
| | | id: 'line10', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [Image5.right[0] - 8, line9[0][1]], |
|---|
| | | [Image5.right[0] + 220, line9[0][1]] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let Image7 = diagram.drawImage({ |
|---|
| | | id: 'img7', |
|---|
| | | url: sensor, |
|---|
| | | point: [line10[1][0], line10[1][1] - 44], |
|---|
| | | width: 64, |
|---|
| | | height: 68, |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 扭矩转速传感器 |
|---|
| | | let text9 = diagram.text({ |
|---|
| | | text: '扭矩转速传感器', |
|---|
| | | baseline: 'top', |
|---|
| | | textAlign: 'center', |
|---|
| | | fillStyle: '#ffffff', |
|---|
| | | fontSize: 14, |
|---|
| | | point: [Image7.top[0] - 50, Image7.top[1] - 28], |
|---|
| | | radBorder: true |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let line11 = diagram.line({ |
|---|
| | | id: 'line11', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [Image7.right[0], line9[0][1]], |
|---|
| | | [Image7.right[0] + 280, line9[0][1]] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let Image8 = diagram.drawImage({ |
|---|
| | | id: 'img8', |
|---|
| | | url: dynamometry, |
|---|
| | | point: [line11[1][0] - 5, line11[1][1] - 65], |
|---|
| | | width: 90, |
|---|
| | | height: 85, |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 测功机 |
|---|
| | | let text10 = diagram.text({ |
|---|
| | | text: '测功机', |
|---|
| | | baseline: 'top', |
|---|
| | | textAlign: 'center', |
|---|
| | | fillStyle: '#ffffff', |
|---|
| | | fontSize: 14, |
|---|
| | | point: [Image8.top[0] - 20, Image8.top[1] - 22], |
|---|
| | | radBorder: true |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let line12 = diagram.line({ |
|---|
| | | id: 'line12', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [text10.top[0], text10.top[1]], |
|---|
| | | [text10.top[0], text10.top[1] - 72], |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let Image9 = diagram.drawImage({ |
|---|
| | | id: 'img9', |
|---|
| | | url: AFE, |
|---|
| | | point: [line12[1][0] - 45, line12[1][1] - 83], |
|---|
| | | width: 70, |
|---|
| | | height: 95, |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // AFE变频驱动柜 |
|---|
| | | let text11 = diagram.text({ |
|---|
| | | text: 'AFE变频驱动柜', |
|---|
| | | baseline: 'top', |
|---|
| | | textAlign: 'center', |
|---|
| | | fillStyle: '#ffffff', |
|---|
| | | fontSize: 14, |
|---|
| | | point: [Image9.top[0] - 42, Image9.top[1] - 22], |
|---|
| | | radBorder: true |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let line13 = diagram.line({ |
|---|
| | | id: 'line13', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line12[0][0], text11.top[1]], |
|---|
| | | [line12[0][0], text11.top[1] - 67], |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let Image10 = diagram.drawImage({ |
|---|
| | | id: 'img10', |
|---|
| | | url: transformer, |
|---|
| | | point: [line13[1][0] - 55, line13[1][1] - 85], |
|---|
| | | width: 90, |
|---|
| | | height: 99, |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 升压变压器 |
|---|
| | | let text12 = diagram.text({ |
|---|
| | | text: '升压变压器', |
|---|
| | | baseline: 'top', |
|---|
| | | textAlign: 'center', |
|---|
| | | fillStyle: '#ffffff', |
|---|
| | | fontSize: 14, |
|---|
| | | point: [Image10.top[0] - 30, Image10.top[1] - 22], |
|---|
| | | radBorder: true |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let line14 = diagram.line({ |
|---|
| | | id: 'line14', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line13[0][0], text12.top[1]], |
|---|
| | | [line13[0][0], text12.top[1] - 20], |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let onOff4 = diagram.onOff({ |
|---|
| | | id: 'km4', |
|---|
| | | point: [line14[1][0], line14[1][1] - 28], |
|---|
| | | direction: 'bottom', |
|---|
| | | color: '#c0becf', |
|---|
| | | state: false, |
|---|
| | | flush: false, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let line15 = diagram.line({ |
|---|
| | | id: 'line15', |
|---|
| | | strokeStyle: lineStrokeColor, |
|---|
| | | lineWidth: lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line13[0][0], onOff4.arc1.top[1]], |
|---|
| | | [line13[0][0], onOff4.arc1.top[1] - 30], |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 5200KVA开关 |
|---|
| | | let text13 = diagram.text({ |
|---|
| | | text: '5200KVA开关& 1250A', |
|---|
| | | baseline: 'top', |
|---|
| | | textAlign: 'center', |
|---|
| | | fillStyle: '#ffffff', |
|---|
| | | fontSize: 14, |
|---|
| | | point: [onOff4.arc1.left[0] - 130, onOff4.arc1.left[1] - 9], |
|---|
| | | radBorder: true |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | //绘制拓扑图集中操作系统 |
|---|
| | | function drawTopoSystem(diagram) { |
|---|
| | | //绘制拓扑图中心系统 |
|---|
| | | let Image13 = diagram.drawImage({ |
|---|
| | | id: 'img13', |
|---|
| | | url: system, |
|---|
| | | point: [840, 200], |
|---|
| | | width: 144, |
|---|
| | | height: 161 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let radiusRect = diagram.drawRadiusRect({ |
|---|
| | | point: [824, 170], |
|---|
| | | width: 180, |
|---|
| | | height: 200, |
|---|
| | | r: 6, |
|---|
| | | strokeStyle: '#00f7f9', |
|---|
| | | lineWidth: 2, |
|---|
| | | type: 'stroke' |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 操作台 |
|---|
| | | let text13 = diagram.text({ |
|---|
| | | text: ' 操作台&(集中测控系统)', |
|---|
| | | baseline: 'top', |
|---|
| | | textAlign: 'center', |
|---|
| | | fillStyle: '#ffffff', |
|---|
| | | fontSize: 14, |
|---|
| | | point: [radiusRect.top[0] - 47, radiusRect.top[1] - 12], |
|---|
| | | radBorder: true |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let line18 = diagram.line({ |
|---|
| | | id: 'line18', |
|---|
| | | strokeStyle: arrow.systemColor, |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [radiusRect.left[0] - 290, 226], |
|---|
| | | [radiusRect.left[0] - 50, 226] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let arrow3 = diagram.drawArrow({ |
|---|
| | | id: 'arrow3', |
|---|
| | | fillStyle: arrow.systemColor, |
|---|
| | | size: arrow.size, |
|---|
| | | direction: 'right', |
|---|
| | | type: 'fill', |
|---|
| | | point: line18[1] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let arrow4 = diagram.drawArrow({ |
|---|
| | | id: 'arrow4', |
|---|
| | | fillStyle: arrow.systemColor, |
|---|
| | | size: arrow.size, |
|---|
| | | direction: 'left', |
|---|
| | | type: 'fill', |
|---|
| | | point: line18[0] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line19 = diagram.line({ |
|---|
| | | id: 'line19', |
|---|
| | | strokeStyle: arrow.systemColor, |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [radiusRect.left[0] - 260, 266], |
|---|
| | | [radiusRect.left[0] - 50, 266] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let arrow5 = diagram.drawArrow({ |
|---|
| | | id: 'arrow5', |
|---|
| | | fillStyle: arrow.systemColor, |
|---|
| | | size: arrow.size, |
|---|
| | | direction: 'right', |
|---|
| | | type: 'fill', |
|---|
| | | point: line19[1] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line20 = diagram.line({ |
|---|
| | | id: 'line20', |
|---|
| | | strokeStyle: arrow.systemColor, |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line19[0][0], line19[0][1] - arrow.lineWidth / 2], |
|---|
| | | [line19[0][0], line19[0][1] + 130] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line21 = diagram.line({ |
|---|
| | | id: 'line21', |
|---|
| | | strokeStyle: arrow.systemColor, |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line20[1][0] + arrow.lineWidth / 2, line20[1][1]], |
|---|
| | | [line20[1][0] - 30, line20[1][1]] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let arrow6 = diagram.drawArrow({ |
|---|
| | | id: 'arrow6', |
|---|
| | | fillStyle: arrow.systemColor, |
|---|
| | | size: arrow.size, |
|---|
| | | direction: 'left', |
|---|
| | | type: 'fill', |
|---|
| | | point: line21[1] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line22 = diagram.line({ |
|---|
| | | id: 'line22', |
|---|
| | | strokeStyle: arrow.systemColor, |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [radiusRect.left[0] - 220, 306], |
|---|
| | | [radiusRect.left[0] - 50, 306] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let arrow7 = diagram.drawArrow({ |
|---|
| | | id: 'arrow7', |
|---|
| | | fillStyle: arrow.systemColor, |
|---|
| | | size: arrow.size, |
|---|
| | | direction: 'right', |
|---|
| | | type: 'fill', |
|---|
| | | point: line22[1] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line23 = diagram.line({ |
|---|
| | | id: 'line23', |
|---|
| | | strokeStyle: arrow.systemColor, |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line22[0][0], line22[0][1] - arrow.lineWidth / 2], |
|---|
| | | [line22[0][0], line22[0][1] + 135] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line24 = diagram.line({ |
|---|
| | | id: 'line24', |
|---|
| | | strokeStyle: arrow.systemColor, |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line23[1][0] + arrow.lineWidth / 2, line23[1][1]], |
|---|
| | | [line23[1][0] - 55, line23[1][1]] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line25 = diagram.line({ |
|---|
| | | id: 'line25', |
|---|
| | | strokeStyle: arrow.systemColor, |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line24[1][0], line24[1][1] - arrow.lineWidth / 2], |
|---|
| | | [line24[1][0], line24[1][1] + 191] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line26 = diagram.line({ |
|---|
| | | id: 'line26', |
|---|
| | | strokeStyle: arrow.systemColor, |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line25[1][0] + arrow.lineWidth / 2, line25[1][1]], |
|---|
| | | [line25[1][0] - 30, line25[1][1]] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let arrow8 = diagram.drawArrow({ |
|---|
| | | id: 'arrow8', |
|---|
| | | fillStyle: arrow.systemColor, |
|---|
| | | size: arrow.size, |
|---|
| | | direction: 'left', |
|---|
| | | type: 'fill', |
|---|
| | | point: line26[1] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line27 = diagram.line({ |
|---|
| | | id: 'line27', |
|---|
| | | strokeStyle: arrow.systemColor, |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [radiusRect.left[0] - 150, 346], |
|---|
| | | [radiusRect.left[0] - 50, 346] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let arrow9 = diagram.drawArrow({ |
|---|
| | | id: 'arrow9', |
|---|
| | | fillStyle: arrow.systemColor, |
|---|
| | | size: arrow.size, |
|---|
| | | direction: 'right', |
|---|
| | | type: 'fill', |
|---|
| | | point: line27[1] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line28 = diagram.line({ |
|---|
| | | id: 'line28', |
|---|
| | | strokeStyle: arrow.systemColor, |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line27[0][0], line27[0][1] - arrow.lineWidth / 2], |
|---|
| | | [line27[0][0], line27[0][1] + 170] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let arrow10 = diagram.drawArrow({ |
|---|
| | | id: 'arrow10', |
|---|
| | | fillStyle: arrow.systemColor, |
|---|
| | | size: arrow.size, |
|---|
| | | direction: 'bottom', |
|---|
| | | type: 'fill', |
|---|
| | | point: line28[1] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line29 = diagram.line({ |
|---|
| | | id: 'line29', |
|---|
| | | strokeStyle: arrow.systemColor, |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [850, radiusRect.bottom[1] + 50], |
|---|
| | | [850, radiusRect.bottom[1] + 80] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let arrow11 = diagram.drawArrow({ |
|---|
| | | id: 'arrow11', |
|---|
| | | fillStyle: arrow.systemColor, |
|---|
| | | size: arrow.size, |
|---|
| | | direction: 'top', |
|---|
| | | type: 'fill', |
|---|
| | | point: line29[0] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let arrow12 = diagram.drawArrow({ |
|---|
| | | id: 'arrow12', |
|---|
| | | fillStyle: arrow.systemColor, |
|---|
| | | size: arrow.size, |
|---|
| | | direction: 'bottom', |
|---|
| | | type: 'fill', |
|---|
| | | point: line29[1] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | // 振动测试系统 |
|---|
| | | let text16 = diagram.text({ |
|---|
| | | text: '振动测试系统', |
|---|
| | | baseline: 'middle', |
|---|
| | | fillStyle: '#ffffff', |
|---|
| | | fontSize: 14, |
|---|
| | | point: [arrow12.bottom[0] - 40, arrow12.bottom[1] + 18], |
|---|
| | | radBorder: true |
|---|
| | | }); |
|---|
| | | |
|---|
| | | //绘制拓扑图中心系统 |
|---|
| | | let Image14 = diagram.drawImage({ |
|---|
| | | id: 'img14', |
|---|
| | | url: shock, |
|---|
| | | point: [text16.bottom[0] - 25, text16.bottom[1] + 3], |
|---|
| | | width: 40, |
|---|
| | | height: 65 |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line30 = diagram.line({ |
|---|
| | | id: 'line30', |
|---|
| | | strokeStyle: arrow.systemColor, |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [Image14.bottom[0], Image14.bottom[1] + 65], |
|---|
| | | [Image14.bottom[0] - 70, Image14.bottom[1] + 65] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line31 = diagram.line({ |
|---|
| | | id: 'line31', |
|---|
| | | strokeStyle: arrow.systemColor, |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line30[0][0], line30[0][1] + arrow.lineWidth / 2], |
|---|
| | | [line30[0][0], line30[0][1] - 18] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let arrow14 = diagram.drawArrow({ |
|---|
| | | id: 'arrow14', |
|---|
| | | fillStyle: arrow.systemColor, |
|---|
| | | size: arrow.size, |
|---|
| | | direction: 'left', |
|---|
| | | type: 'fill', |
|---|
| | | point: line30[1] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let arrow15 = diagram.drawArrow({ |
|---|
| | | id: 'arrow15', |
|---|
| | | fillStyle: arrow.systemColor, |
|---|
| | | size: arrow.size, |
|---|
| | | direction: 'top', |
|---|
| | | type: 'fill', |
|---|
| | | point: line31[1] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line32 = diagram.line({ |
|---|
| | | id: 'line32', |
|---|
| | | strokeStyle: arrow.systemColor, |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [980, radiusRect.bottom[1] + 50], |
|---|
| | | [980, radiusRect.bottom[1] + 180] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let arrow16 = diagram.drawArrow({ |
|---|
| | | id: 'arrow16', |
|---|
| | | fillStyle: arrow.systemColor, |
|---|
| | | size: arrow.size, |
|---|
| | | direction: 'top', |
|---|
| | | type: 'fill', |
|---|
| | | point: line32[0] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let arrow17 = diagram.drawArrow({ |
|---|
| | | id: 'arrow17', |
|---|
| | | fillStyle: arrow.systemColor, |
|---|
| | | size: arrow.size, |
|---|
| | | direction: 'bottom', |
|---|
| | | type: 'fill', |
|---|
| | | point: line32[1] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line33 = diagram.line({ |
|---|
| | | id: 'line33', |
|---|
| | | strokeStyle: arrow.systemColor, |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [radiusRect.right[0] + 50, 346], |
|---|
| | | [radiusRect.right[0] + 120, 346] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let arrow18 = diagram.drawArrow({ |
|---|
| | | id: 'arrow18', |
|---|
| | | fillStyle: arrow.systemColor, |
|---|
| | | size: arrow.size, |
|---|
| | | direction: 'left', |
|---|
| | | type: 'fill', |
|---|
| | | point: line33[0] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line34 = diagram.line({ |
|---|
| | | id: 'line34', |
|---|
| | | strokeStyle: arrow.systemColor, |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line33[1][0], line33[1][1] - arrow.lineWidth / 2], |
|---|
| | | [line33[1][0], line33[1][1] + 258] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line35 = diagram.line({ |
|---|
| | | id: 'line35', |
|---|
| | | strokeStyle: arrow.systemColor, |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line34[1][0] - arrow.lineWidth / 2, line34[1][1]], |
|---|
| | | [line34[1][0] + 110, line34[1][1]] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let arrow19 = diagram.drawArrow({ |
|---|
| | | id: 'arrow19', |
|---|
| | | fillStyle: arrow.systemColor, |
|---|
| | | size: arrow.size, |
|---|
| | | direction: 'right', |
|---|
| | | type: 'fill', |
|---|
| | | point: line35[1] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line36 = diagram.line({ |
|---|
| | | id: 'line36', |
|---|
| | | strokeStyle: arrow.systemColor, |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [radiusRect.right[0] + 50, 280], |
|---|
| | | [radiusRect.right[0] + 170, 280] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let arrow20 = diagram.drawArrow({ |
|---|
| | | id: 'arrow20', |
|---|
| | | fillStyle: arrow.systemColor, |
|---|
| | | size: arrow.size, |
|---|
| | | direction: 'left', |
|---|
| | | type: 'fill', |
|---|
| | | point: line36[0] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line37 = diagram.line({ |
|---|
| | | id: 'line37', |
|---|
| | | strokeStyle: arrow.systemColor, |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line36[1][0], line36[1][1] - arrow.lineWidth / 2], |
|---|
| | | [line36[1][0], line36[1][1] + 135] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let line38 = diagram.line({ |
|---|
| | | id: 'line38', |
|---|
| | | strokeStyle: arrow.systemColor, |
|---|
| | | lineWidth: arrow.lineWidth, |
|---|
| | | points: [ |
|---|
| | | [line37[1][0] - arrow.lineWidth / 2, line37[1][1]], |
|---|
| | | [line37[1][0] + 40, line37[1][1]] |
|---|
| | | ] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | let arrow21 = diagram.drawArrow({ |
|---|
| | | id: 'arrow21', |
|---|
| | | fillStyle: arrow.systemColor, |
|---|
| | | size: arrow.size, |
|---|
| | | direction: 'right', |
|---|
| | | type: 'fill', |
|---|
| | | point: line38[1] |
|---|
| | | }) |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | export default girdCircuitDiagram; |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <div class="pageLayout"> |
|---|
| | | <div class="pageSlideMenu"> |
|---|
| | | <page-menu></page-menu> |
|---|
| | | </div> |
|---|
| | | <div class="pageConten"> |
|---|
| | | <page-header></page-header> |
|---|
| | | <div class="viewCon"> |
|---|
| | | <!--这里的router-view用来渲染子页面--> |
|---|
| | | <router-view></router-view> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import PageMenu from '@/components/PageMenu' |
|---|
| | | import PageHeader from '@/components/PageHeader' |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | PageMenu, |
|---|
| | | PageHeader |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | beforeCreate() { //设置子路由路径 |
|---|
| | | let activeMenu = localStorage.getItem('activeMenu'); |
|---|
| | | if (activeMenu) { |
|---|
| | | this.$router.push({ |
|---|
| | | path: `/index/${activeMenu}`, |
|---|
| | | }).catch(err => { |
|---|
| | | |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | this.$router.push({ |
|---|
| | | path: '/index/topoGraph', |
|---|
| | | }).catch(err => { |
|---|
| | | |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .pageLayout { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .pageSlideMenu { |
|---|
| | | padding-left: 5px; |
|---|
| | | padding-bottom: 8px; |
|---|
| | | width: 220px; |
|---|
| | | overflow-y: auto; |
|---|
| | | overflow-x: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .pageConten { |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .viewCon { |
|---|
| | | padding: 8px 8px 0 18px; |
|---|
| | | width: 100%; |
|---|
| | | height: calc(100% - 108px); |
|---|
| | | } |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <div class=""> |
|---|
| | | login |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | <template> |
|---|
| | | <div class="dAndlSetSpeed"> |
|---|
| | | <div class="dAndlSetSpeed-left"> |
|---|
| | | <div class="dAndlSetSpeed-bg1"> |
|---|
| | | <div class="title">%POWER</div> |
|---|
| | | <div class="circle RPM"> |
|---|
| | | <div class="number">1200</div> |
|---|
| | | <div class="unit">RPM</div> |
|---|
| | | </div> |
|---|
| | | <scale-bar direction="left" :value="1200" :splitNum="200"></scale-bar> |
|---|
| | | <img src="../../assets/images/dAndlSetSpeed-img1.png" class="img"> |
|---|
| | | <scale-bar direction="right" :value="0.12" :splitNum="0.02"></scale-bar> |
|---|
| | | <div class="circle NM"> |
|---|
| | | <div class="number">0.12</div> |
|---|
| | | <div class="unit">N/M</div> |
|---|
| | | </div> |
|---|
| | | <electric-choice class="speedChoice" :choiceData="speedChoice" @active="speedChoiceActive"> |
|---|
| | | </electric-choice> |
|---|
| | | <electric-choice class="stateChoice" :choiceData="stateChoice" @active="stateChoiceActive"> |
|---|
| | | </electric-choice> |
|---|
| | | </div> |
|---|
| | | <div class="dAndlSetSpeed-bg2"> |
|---|
| | | <div class="tipTitle">步骤提示</div> |
|---|
| | | <div class="textContent"> |
|---|
| | | <div class="text"> |
|---|
| | | 电机处于<span>前进档位</span> |
|---|
| | | </div> |
|---|
| | | <div class="text"> |
|---|
| | | 电机状态为<span>电动状态</span> |
|---|
| | | </div> |
|---|
| | | <div class="text"> |
|---|
| | | 调节点击转速至<span>1800转</span> |
|---|
| | | </div> |
|---|
| | | <div class="text"> |
|---|
| | | 逐档增加负载控制条挡位，并依次记录数据 |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="dAndlSetSpeed-bg3"> |
|---|
| | | <div class="flexDiv"> |
|---|
| | | <span v-for="(item,index) in operationData" :key="index" class="btn" |
|---|
| | | :class="{active:index==activeIndex }" @click="changeTab(index)">{{item}}</span> |
|---|
| | | </div> |
|---|
| | | <table class="customTable text-center"> |
|---|
| | | <tr> |
|---|
| | | <th>转矩</th> |
|---|
| | | <th>转速</th> |
|---|
| | | <th>编辑</th> |
|---|
| | | </tr> |
|---|
| | | <tr> |
|---|
| | | <td>400</td> |
|---|
| | | <td>-0.2</td> |
|---|
| | | <td> |
|---|
| | | <el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button> |
|---|
| | | </td> |
|---|
| | | </tr> |
|---|
| | | <tr> |
|---|
| | | <td>400</td> |
|---|
| | | <td>-0.2</td> |
|---|
| | | <td> |
|---|
| | | <el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button> |
|---|
| | | </td> |
|---|
| | | </tr> |
|---|
| | | <tr> |
|---|
| | | <td>400</td> |
|---|
| | | <td>-0.2</td> |
|---|
| | | <td> |
|---|
| | | <el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button> |
|---|
| | | </td> |
|---|
| | | </tr> |
|---|
| | | <tr> |
|---|
| | | <td>400</td> |
|---|
| | | <td>-0.2</td> |
|---|
| | | <td> |
|---|
| | | <el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button> |
|---|
| | | </td> |
|---|
| | | </tr> |
|---|
| | | </table> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="dAndlSetSpeed-right"> |
|---|
| | | <div class="tipTitle">永磁同步电机-MOOEL</div> |
|---|
| | | <div class="imgCon"><img src="../../assets/images/dAndlSetSpeed-img2.png" class="img"></div> |
|---|
| | | <div class="sliderCon"> |
|---|
| | | <span class="lable">电机转速：</span> |
|---|
| | | <el-slider v-model="motorSpeed" :max="1000" class="slider" tooltip-class="sliderTooltip"></el-slider> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import scaleBar from '@/components/smallModule/scaleBar.vue' |
|---|
| | | import ElectricChoice from '@/components/smallModule/electricChoice.vue'; |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | scaleBar, |
|---|
| | | ElectricChoice |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | activeIndex: 0, |
|---|
| | | operationData: ["记录数据", "编辑数据"], |
|---|
| | | speedChoice: { |
|---|
| | | lable: '电机转速', |
|---|
| | | choicceArr: ["前进", "停止", "反转", "故障"], |
|---|
| | | active: "前进", |
|---|
| | | activeColor: '#ffe329' |
|---|
| | | }, |
|---|
| | | stateChoice: { |
|---|
| | | lable: '电机状态', |
|---|
| | | choicceArr: ["电动", "手动"], |
|---|
| | | active: "电动", |
|---|
| | | activeColor: '#ff97a4' |
|---|
| | | }, |
|---|
| | | motorSpeed: 600 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | changeTab(index) { //编辑数据点击操作 |
|---|
| | | this.activeIndex = index; |
|---|
| | | }, |
|---|
| | | speedChoiceActive(data) { |
|---|
| | | this.speedChoice.active = data; |
|---|
| | | }, |
|---|
| | | stateChoiceActive(data) { |
|---|
| | | this.stateChoice.active = data; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .dAndlSetSpeed { |
|---|
| | | display: flex; |
|---|
| | | height: calc(100vh - 120px); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-left { |
|---|
| | | flex: 1; |
|---|
| | | height: 100%; |
|---|
| | | margin-right: 13px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-left .dAndlSetSpeed-bg1 { |
|---|
| | | width: 100%; |
|---|
| | | height: 50%; |
|---|
| | | float: left; |
|---|
| | | padding: 0 92px; |
|---|
| | | background: url("../../assets/images/dAndlSetSpeed-bg1.png") 0 0 no-repeat; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | position: relative; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | padding-top: 38px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-left .dAndlSetSpeed-bg1 .img { |
|---|
| | | width: 460px; |
|---|
| | | height: 284px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-left .dAndlSetSpeed-bg1 .title { |
|---|
| | | position: absolute; |
|---|
| | | top: 32px; |
|---|
| | | left: 100px; |
|---|
| | | font-size: 28px; |
|---|
| | | color: #556df3; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-left .dAndlSetSpeed-bg2 { |
|---|
| | | width: 65%; |
|---|
| | | height: 50%; |
|---|
| | | float: left; |
|---|
| | | background: url("../../assets/images/dAndlSetSpeed-bg2.png") 0 0 no-repeat; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | position: relative; |
|---|
| | | padding: 105px 60px 50px 52px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-left .dAndlSetSpeed-bg3 { |
|---|
| | | width: 35%; |
|---|
| | | height: 50%; |
|---|
| | | float: left; |
|---|
| | | background: url("../../assets/images/dAndlSetSpeed-bg3.png") 0 0 no-repeat; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | padding: 50px 25px 50px 33px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-right { |
|---|
| | | width: 560px; |
|---|
| | | height: 100%; |
|---|
| | | background: url("../../assets/images/dAndlSetSpeed-bg4.png") 0 0 no-repeat; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | padding: 40px 50px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-right .imgCon { |
|---|
| | | width: 100%; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-right .imgCon .img { |
|---|
| | | width: 440px; |
|---|
| | | height: 360px; |
|---|
| | | margin-top: 80px; |
|---|
| | | margin-bottom: 70px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .RPM { |
|---|
| | | left: 200px; |
|---|
| | | top: 90px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .NM { |
|---|
| | | right: 180px; |
|---|
| | | top: 270px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .circle .number, |
|---|
| | | .circle .unit { |
|---|
| | | width: 100%; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .circle .number { |
|---|
| | | font-size: 33px; |
|---|
| | | font-weight: bold; |
|---|
| | | margin-top: 8px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-left .dAndlSetSpeed-bg2 .tipTitle { |
|---|
| | | position: absolute; |
|---|
| | | top: 44px; |
|---|
| | | left: 36px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-left .dAndlSetSpeed-bg2 .textContent { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | background-color: #272e76; |
|---|
| | | padding: 18px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-left .dAndlSetSpeed-bg2 .textContent .text { |
|---|
| | | font-size: 18px; |
|---|
| | | color: #ffffff; |
|---|
| | | margin-bottom: 22px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-left .dAndlSetSpeed-bg2 .textContent .text>span { |
|---|
| | | color: #ffe329; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-left .dAndlSetSpeed-bg3 .flexDiv { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | margin-bottom: 18px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-left .dAndlSetSpeed-bg3 .flexDiv .btn { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | width: 120px; |
|---|
| | | height: 30px; |
|---|
| | | background-color: #5282ee; |
|---|
| | | color: #181654; |
|---|
| | | font-size: 16px; |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-left .dAndlSetSpeed-bg3 .flexDiv .btn.active { |
|---|
| | | background-color: #57f8ff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-left .dAndlSetSpeed-bg3 .el-button--primary { |
|---|
| | | background-color: #57f8ff; |
|---|
| | | border-color: #57f8ff; |
|---|
| | | color: #181654; |
|---|
| | | padding: 2px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .speedChoice { |
|---|
| | | position: absolute; |
|---|
| | | left: 92px; |
|---|
| | | top: 345px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .stateChoice { |
|---|
| | | position: absolute; |
|---|
| | | left: 550px; |
|---|
| | | top: 345px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-right .sliderCon { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-right .sliderCon .lable { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #ffffff; |
|---|
| | | margin-right: 5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-right .sliderCon .slider { |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | <style> |
|---|
| | | .dAndlSetSpeed-right .sliderCon .slider .el-slider__runway { |
|---|
| | | margin: 0; |
|---|
| | | height: 12px; |
|---|
| | | background-color: #453c9e; |
|---|
| | | border-radius: 6px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-right .sliderCon .slider .el-slider__runway .el-slider__bar { |
|---|
| | | height: 11px; |
|---|
| | | border-radius: 6px; |
|---|
| | | background-color: #ffe329; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-right .sliderCon .slider .el-slider__runway .el-slider__button-wrapper { |
|---|
| | | top: -13px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dAndlSetSpeed-right .sliderCon .slider .el-slider__runway .el-slider__button { |
|---|
| | | width: 18px; |
|---|
| | | height: 18px; |
|---|
| | | border-color: #dabc14; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-tooltip__popper.is-dark.sliderTooltip { |
|---|
| | | background-color: #ffe329; |
|---|
| | | color: #181654; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-tooltip__popper.is-dark.sliderTooltip .popper__arrow::after { |
|---|
| | | content: ""; |
|---|
| | | display: block; |
|---|
| | | width: 0; |
|---|
| | | height: 0; |
|---|
| | | border-top: 6px solid #ffe329; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| New file |
| | |
|---|
| | | import Vue from 'vue' |
|---|
| | | import VueRouter from 'vue-router' |
|---|
| | | import routes from './routes' |
|---|
| | | |
|---|
| | | Vue.use(VueRouter); |
|---|
| | | |
|---|
| | | const router = new VueRouter({ |
|---|
| | | routes |
|---|
| | | }); |
|---|
| | | |
|---|
| | | export default router; |
|---|
| New file |
| | |
|---|
| | | export default [{ |
|---|
| | | path: '/', |
|---|
| | | redirect: '/login' |
|---|
| | | }, { |
|---|
| | | path: '/login', |
|---|
| | | name: 'login', |
|---|
| | | meta: {}, |
|---|
| | | component: (resolve) => require(['@/pages/login.vue'], resolve), |
|---|
| | | }, { |
|---|
| | | path: '/index', |
|---|
| | | name: 'index', |
|---|
| | | meta: {}, |
|---|
| | | component: (resolve) => require(['@/pages/index.vue'], resolve), |
|---|
| | | children: [{ //系统拓扑图 |
|---|
| | | path: 'topoGraph', |
|---|
| | | name: 'topoGraph', |
|---|
| | | meta: {}, |
|---|
| | | component: (resolve) => require(['@/pages/home/topoGraph.vue'], resolve), |
|---|
| | | }, { //UPS状态监控 |
|---|
| | | path: 'UPSStateMonitor', |
|---|
| | | name: 'UPSStateMonitor', |
|---|
| | | meta: {}, |
|---|
| | | component: (resolve) => require(['@/pages/home/UPSStateMonitor.vue'], resolve), |
|---|
| | | }, { //拖动端与加载端转速设置 |
|---|
| | | path: 'dAndlSetSpeed', |
|---|
| | | name: 'dAndlSetSpeed', |
|---|
| | | meta: {}, |
|---|
| | | component: (resolve) => require(['@/pages/test/dAndlSetSpeed.vue'], resolve), |
|---|
| | | }, ] |
|---|
| | | }]; |
|---|
| New file |
| | |
|---|
| | | import Vue from 'vue' |
|---|
| | | import Vuex from 'vuex' |
|---|
| | | |
|---|
| | | Vue.use(Vuex) |
|---|
| | | |
|---|
| | | export default new Vuex.Store({ |
|---|
| | | state: { |
|---|
| | | }, |
|---|
| | | mutations: { |
|---|
| | | }, |
|---|
| | | actions: { |
|---|
| | | }, |
|---|
| | | modules: { |
|---|
| | | } |
|---|
| | | }) |
|---|
| New file |
| | |
|---|
| | | const px2rem = require('postcss-px2rem') |
|---|
| | | |
|---|
| | | const postcss = px2rem({ |
|---|
| | | remUnit: 20 //基准大小 baseSize，需要和rem.js中相同 |
|---|
| | | }); |
|---|
| | | |
|---|
| | | module.exports = { |
|---|
| | | publicPath: './', |
|---|
| | | productionSourceMap: false, |
|---|
| | | css: { |
|---|
| | | loaderOptions: { |
|---|
| | | css: {}, |
|---|
| | | postcss: { |
|---|
| | | plugins: [ |
|---|
| | | postcss |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
