1.0
高金旭
5 years ago
parent
bfb23e2524
commit
59dd26dc92
@ -0,0 +1,23 @@
|
||||
.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?
|
||||
@ -0,0 +1,54 @@
|
||||
# vue-webtopo-svgeditor
|
||||
|
||||
> 纯vue3实现的svg可视化web组态编辑器。主要用于物联网mqtt实时系统图
|
||||
|
||||
## 预览地址
|
||||
|
||||
[https://svg.yaolunmao.top](https://svg.yaolunmao.top)
|
||||
|
||||
## 如何使用
|
||||
|
||||
```
|
||||
# 克隆项目
|
||||
git clone https://github.com/yaolunmao/vue-webtopo-svgeditor.git
|
||||
|
||||
# 进入项目目录
|
||||
cd vue-webtopo-svgeditor
|
||||
|
||||
# 安装依赖
|
||||
yarn install
|
||||
|
||||
# 启动服务
|
||||
yarn serve
|
||||
|
||||
```
|
||||
|
||||
## 操作
|
||||
|
||||
点击载入模板 进入预览页点击模拟硬件 等待两秒钟即可看到动态效果
|
||||
|
||||
- 鼠标左键选中组件 按住可拖动至画布
|
||||
- 鼠标双击画布取消选中组件
|
||||
- 右侧工具栏调整选中组件样式
|
||||
- 键盘↑↓←→可移动选中组件
|
||||
- ctrl+c复制当前选中组件
|
||||
- deleted删除当前选中组件
|
||||
- 鼠标滚轮放大缩小选中组件
|
||||
|
||||
## Todo
|
||||
|
||||
- 鼠标框选批量选中
|
||||
- 画布绑定mqtt平台
|
||||
- 组件旋转
|
||||
- 画布缩放
|
||||
- 编辑器撤销、重做
|
||||
|
||||
## 截图
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
|
||||
[MIT](http://opensource.org/licenses/MIT)
|
||||
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
{
|
||||
"name": "vue-webtopo-svgeditor",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons-vue": "^6.0.1",
|
||||
"ant-design-vue": "^2.0.0-rc.7",
|
||||
"axios": "^0.21.1",
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^3.0.0",
|
||||
"vue-router": "^4.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^7.0.0-0",
|
||||
"less": "^4.0.0",
|
||||
"less-loader": "^7.2.1",
|
||||
"node-sass": "^5.0.0",
|
||||
"sass-loader": "^11.0.1"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<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>
|
||||
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,539 @@
|
||||
/* Logo 字体 */
|
||||
@font-face {
|
||||
font-family: "iconfont logo";
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: "iconfont logo";
|
||||
font-size: 160px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* tabs */
|
||||
.nav-tabs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-more {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#tabs li {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
border-bottom: 2px solid transparent;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: -1px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
#tabs .active {
|
||||
border-bottom-color: #f00;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.tab-container .content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 页面布局 */
|
||||
.main {
|
||||
padding: 30px 100px;
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.main .logo {
|
||||
color: #333;
|
||||
text-align: left;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1;
|
||||
height: 110px;
|
||||
margin-top: -50px;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
font-size: 160px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.helps {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.helps pre {
|
||||
padding: 20px;
|
||||
margin: 10px 0;
|
||||
border: solid 1px #e7e1cd;
|
||||
background-color: #fffdef;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.icon_lists {
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.icon_lists li {
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
list-style: none !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon_lists li .code-name {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.icon_lists .icon {
|
||||
display: block;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
font-size: 42px;
|
||||
margin: 10px auto;
|
||||
color: #333;
|
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
transition: font-size 0.25s linear, width 0.25s linear;
|
||||
}
|
||||
|
||||
.icon_lists .icon:hover {
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.icon_lists .svg-icon {
|
||||
/* 通过设置 font-size 来改变图标大小 */
|
||||
width: 1em;
|
||||
/* 图标和文字相邻时，垂直对齐 */
|
||||
vertical-align: -0.15em;
|
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||
fill: currentColor;
|
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||
normalize.css 中也包含这行 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon_lists li .name,
|
||||
.icon_lists li .code-name {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* markdown 样式 */
|
||||
.markdown {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
color: #404040;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown h4,
|
||||
.markdown h5,
|
||||
.markdown h6 {
|
||||
color: #404040;
|
||||
margin: 1.6em 0 0.6em 0;
|
||||
font-weight: 500;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.markdown h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.markdown h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.markdown h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.markdown h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: #e9e9e9;
|
||||
margin: 16px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown>p,
|
||||
.markdown>blockquote,
|
||||
.markdown>.highlight,
|
||||
.markdown>ol,
|
||||
.markdown>ul {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.markdown ul>li {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
.markdown>ul li,
|
||||
.markdown blockquote ul>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown>ul li p,
|
||||
.markdown>ol li p {
|
||||
margin: 0.6em 0;
|
||||
}
|
||||
|
||||
.markdown ol>li {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.markdown>ol li,
|
||||
.markdown blockquote ol>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
margin: 0 3px;
|
||||
padding: 0 5px;
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.markdown strong,
|
||||
.markdown b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0px;
|
||||
empty-cells: show;
|
||||
border: 1px solid #e9e9e9;
|
||||
width: 95%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
white-space: nowrap;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table th,
|
||||
.markdown>table td {
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
font-size: 90%;
|
||||
color: #999;
|
||||
border-left: 4px solid #e9e9e9;
|
||||
padding-left: 0.8em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown .anchor {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.markdown .waiting {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.markdown h1:hover .anchor,
|
||||
.markdown h2:hover .anchor,
|
||||
.markdown h3:hover .anchor,
|
||||
.markdown h4:hover .anchor,
|
||||
.markdown h5:hover .anchor,
|
||||
.markdown h6:hover .anchor {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.markdown>br,
|
||||
.markdown>p>br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
background: white;
|
||||
padding: 0.5em;
|
||||
color: #333333;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-meta {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-strong,
|
||||
.hljs-emphasis,
|
||||
.hljs-quote {
|
||||
color: #df5000;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-type {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.hljs-literal,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-attribute {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-name {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-attr,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 代码高亮 */
|
||||
/* PrismJS 1.15.0
|
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection,
|
||||
pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection,
|
||||
code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection,
|
||||
pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection,
|
||||
code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre)>code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre)>code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
@font-face {font-family: "iconfont";
|
||||
src: url('iconfont.eot?t=1614996937660'); /* IE9 */
|
||||
src: url('iconfont.eot?t=1614996937660#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATQAAsAAAAACoAAAASEAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqIJIZ2ATYCJAMQCwoABCAFhG0HXRv9CFGULUqa7IsCu7HY6LCpwyvKo719j2XzqgZTe+OkFXm0NIKn/WjzdvdENLlU0Sqa7xALhRBJEDLNQyUVslr+83+uFdD2BRdNsxTsfl53xiUWpQ12A7ylOcuIhVyEGcopwge0xfSKlwJq/cL9T3afbxaH2ZPQgqUGh0C7cSXOD3SoFmd3SSWxTuk+s+s29//v5+q0eVzTG9JiW1toX+7+5L2JOWrpp30alSReOZwuop1EqVAiiRAyGmOLfSXmiZHxMoFGo0jw3vn5DV0FPysQjxyhQdcRUyKmhnqhNuDGIp5R1acn6Q6Ap/Tz8RXW4UFSk/ELj+6cTNh+yLwuD5WAJZoMFpfB7TYy5kAKcS8wd60hfHNEGoNGN22A1EuZRFG7Cq+rKuHuCqk/E1n/8RJRi5NmqNcGMh8yFd6ihYgI0DpMkmCB3FCPCVDcAYjnuGbYfg3C1G9AXlLZzy8s/Jzx9vbCh3cACIxOIuTSUHt4GpnOQLOZfC4dzdAMNpuJxAQ6k4aml4RiTBoBBGVAzF2lae0QAuPcJKmBEp4v3RyKMSVJVUjJ+WuwmJlpn5tDvedOntnjc+VJnDLytNr3+vNEdfTZrv4HRT6nH8WoQ49LfU89jCb4pCksTSOaqT2Uw4EOQr2za+yTQQS52EwT9Mwka+2OlcaY44/t8rn2LEEde17re/VpvDL8ZPf4mTCl52yy79T5SLX3XErzSdsVyp12SwQRc807zbF99TkNZxA2yYPtBOvrJBhMc60xBDknAmHG/MF9XBzEab/3jsEY1YFRxnUKRuYhyphhANUZpwz07c0xWS4GFmuDnvQLHQYG41QF41Bm/lxKwrMvbd4e012Vj4LVOfCFcik/ZAB7w8r8vR4mPPTyx0UlRVAsrxi+WF8fNRylhi6K06TCHA8qhgX1GKYLp0LtvoDfBoUH3y6uxZcAL2TQ6fKCPHtS5P1LiQ6C5CPzv/7w0jqqauhdnLZEzV+zvrd8Z3/dooN/vDQuQfyd2QH+PTsuY7bfr+P/wKDA75DHl57htyFpPU2aD1uCWNn4tv7KPzcGwz7ofByEANXP3JV9qIblD/IKNtgnf5X1w/ckU4PH91gT5X+9tv5WvF9fe6AFVZ8C+TbAMYiJ8WDFhH3lK/B4KW+Pwv8mFy9EgLb6lEaNOESH6fQtItCTuEOod+ANkjojkNUbkxf1HNRosga16m1Co1nm7U26tBqiNGDGmkFot4Gk1TvI2l3kRf2BGr1+UKs9ZGh0EcQDm0zE+r4ak5aSiW6FicHSkpNp35j6SSLztdgukPmX4sRpIpeT5x66kKS4iEu6XKz71MIw5gAN9jryfcY6ZpeMdB6nabhhco2gT5p7HEDfrhjRpIgJuSooYWCSpS2f6nu+/xMRMj5NHCH6cfxFYgln74hDYxPIL0QmEm3K7E5OWOtPHQsKb5NZABmnDPGlHkN18HEuYkjNxRk6oQ3mtFiYlMyrDwRzeAM04k8okSJHiRq1jx2TpZj2f0cpHVnZWIpo8sUYYdeRZssZV1jssSXjgCqvIAg=') format('woff2'),
|
||||
url('iconfont.woff?t=1614996937660') format('woff'),
|
||||
url('iconfont.ttf?t=1614996937660') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
|
||||
url('iconfont.svg?t=1614996937660#iconfont') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-yidong:before {
|
||||
content: "\e633";
|
||||
}
|
||||
|
||||
.icon-icon_xinyong_xianxing_jijin-135:before {
|
||||
content: "\e648";
|
||||
}
|
||||
|
||||
.icon-suoxiao1:before {
|
||||
content: "\e62b";
|
||||
}
|
||||
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,30 @@
|
||||
{
|
||||
"id": "2399064",
|
||||
"name": "svg画图",
|
||||
"font_family": "iconfont",
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "9039260",
|
||||
"name": "移动",
|
||||
"font_class": "yidong",
|
||||
"unicode": "e633",
|
||||
"unicode_decimal": 58931
|
||||
},
|
||||
{
|
||||
"icon_id": "16483269",
|
||||
"name": "展开",
|
||||
"font_class": "icon_xinyong_xianxing_jijin-135",
|
||||
"unicode": "e648",
|
||||
"unicode_decimal": 58952
|
||||
},
|
||||
{
|
||||
"icon_id": "4641127",
|
||||
"name": "缩小",
|
||||
"font_class": "suoxiao1",
|
||||
"unicode": "e62b",
|
||||
"unicode_decimal": 58923
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<!--
|
||||
2013-9-30: Created.
|
||||
-->
|
||||
<svg>
|
||||
<metadata>
|
||||
Created by iconfont
|
||||
</metadata>
|
||||
<defs>
|
||||
|
||||
<font id="iconfont" horiz-adv-x="1024" >
|
||||
<font-face
|
||||
font-family="iconfont"
|
||||
font-weight="500"
|
||||
font-stretch="normal"
|
||||
units-per-em="1024"
|
||||
ascent="896"
|
||||
descent="-128"
|
||||
/>
|
||||
<missing-glyph />
|
||||
|
||||
<glyph glyph-name="yidong" unicode="" d="M542.86 765.24m0-32l0-178.14q0-32-32-32l0 0q-32 0-32 32l0 178.14q0 32 32 32l0 0q32 0 32-32ZM556.118955 735.892121m-22.627417-22.627417l-87.094342-87.094342q-22.627417-22.627417-45.254834 0l0 0q-22.627417 22.627417 0 45.254834l87.094342 87.094342q22.627417 22.627417 45.254834 0l0 0q22.627417-22.627417 0-45.254834ZM600.233636 603.54153m-22.627417 22.627417l-87.094343 87.094343q-22.627417 22.627417 0 45.254834l0 0q22.627417 22.627417 45.254834 0l87.094343-87.094343q22.627417-22.627417 0-45.254834l0 0q-22.627417-22.627417-45.254834 0ZM481.14 2.67m0 32l0 178.14q0 32 32 32l0 0q32 0 32-32l0-178.14q0-32-32-32l0 0q-32 0-32 32ZM467.892409 32.024243m22.627417 22.627417l87.094342 87.094342q22.627417 22.627417 45.254834 0l0 0q22.627417-22.627417 0-45.254834l-87.094342-87.094342q-22.627417-22.627417-45.254834 0l0 0q-22.627417 22.627417 0 45.254834ZM423.756172 164.376005m22.627417-22.627417l87.094342-87.094342q22.627417-22.627417 0-45.254834l0 0q-22.627417-22.627417-45.254834 0l-87.094342 87.094342q-22.627417 22.627417 0 45.254834l0 0q22.627417 22.627417 45.254834 0ZM130.71 414.82m32 0l178.14 0q32 0 32-32l0 0q0-32-32-32l-178.14 0q-32 0-32 32l0 0q0 32 32 32ZM160.06595 428.05947m22.627417-22.627417l87.094342-87.094343q22.627417-22.627417 0-45.254834l0 0q-22.627417-22.627417-45.254834 0l-87.094342 87.094343q-22.627417 22.627417 0 45.254834l0 0q22.627417 22.627417 45.254834 0ZM292.417834 472.185514m-22.627417-22.627417l-87.094343-87.094342q-22.627417-22.627417-45.254834 0l0 0q-22.627417 22.627417 0 45.254834l87.094343 87.094342q22.627417 22.627417 45.254834 0l0 0q22.627417-22.627417 0-45.254834ZM893.29 353.1m-32 0l-178.14 0q-32 0-32 32l0 0q0 32 32 32l178.14 0q32 0 32-32l0 0q0-32-32-32ZM863.924221 339.843288m-22.627417 22.627417l-87.094342 87.094342q-22.627417 22.627417 0 45.254834l0 0q22.627417 22.627417 45.254834 0l87.094342-87.094342q22.627417-22.627417 0-45.254834l0 0q-22.627417-22.627417-45.254834 0ZM731.582359 295.718364m22.627417 22.627417l87.094342 87.094343q22.627417 22.627417 45.254834 0l0 0q22.627417-22.627417 0-45.254834l-87.094342-87.094343q-22.627417-22.627417-45.254834 0l0 0q-22.627417 22.627417 0 45.254834ZM510.83 383.27m-64 0a64 64 0 1 1 128 0 64 64 0 1 1-128 0Z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="icon_xinyong_xianxing_jijin-135" unicode="" d="M848 864H176C96.8 864 32 799.2 32 720v-672c0-79.2 64.8-144 144-144h672c79.2 0 144 64.8 144 144V720c0 79.2-64.8 144-144 144z m96-816c0-52.8-43.2-96-96-96H176c-52.8 0-96 43.2-96 96V720c0 52.8 43.2 96 96 96h672c52.8 0 96-43.2 96-96v-672zM776 696H584c-13.2 0-24-10.8-24-24s10.8-24 24-24h158.4L567.2 472.8c-9.6-9.6-9.6-24 0-33.6 4.8-4.8 10.8-7.2 16.8-7.2s12 2.4 16.8 7.2L776 614.4V456c0-13.2 10.8-24 24-24s24 10.8 24 24V648c0 26.4-21.6 48-48 48zM456.8 328.79999999999995c-9.6 9.6-24 9.6-33.6 0L248 153.60000000000002V312c0 13.2-10.8 24-24 24s-24-10.8-24-24v-192c0-26.4 21.6-48 48-48h192c13.2 0 24 10.8 24 24s-10.8 24-24 24H281.6l175.2 175.2c9.6 9.6 9.6 24 0 33.6z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="suoxiao1" unicode="" d="M868.80711111-100.23822222000001H155.19288889c-70.26915555 0-127.43111111 57.16195555-127.43111111 127.43111111V740.80711111c0 70.26915555 57.16195555 127.43111111 127.43111111 127.43111111h713.61422222c70.26915555 0 127.43111111-57.16195555 127.43111111-127.43111111v-713.61422222c0-70.26915555-57.16195555-127.43111111-127.43111111-127.43111111zM155.19288889 817.26577778c-42.11294815 0-76.45866667-34.34571852-76.45866667-76.45866667v-713.61422222c0-42.11294815 34.34571852-76.45866667 76.45866667-76.45866667h713.61422222c42.11294815 0 76.45866667 34.34571852 76.45866667 76.45866667V740.80711111c0 42.11294815-34.34571852 76.45866667-76.45866667 76.45866667H155.19288889zM636.15431111 482.78945185c-6.5536 0-12.98583703 2.54862222-17.96171852 7.40314074-9.95176297 9.95176297-10.07312592 26.09303703-0.12136296 36.0448l188.11259259 189.0834963c9.95176297 9.95176297 26.09303703 9.95176297 36.0448 0.12136296 9.95176297-9.95176297 10.07312592-26.09303703 0.12136296-36.0448l-188.11259259-189.0834963c-4.97588148-4.97588148-11.52948148-7.5245037-18.08308148-7.5245037zM180.67911111 27.314251850000005c-6.5536 0-12.98583703 2.42725925-17.96171852 7.40314074-9.95176297 9.95176297-10.07312592 26.09303703-0.12136296 36.0448l188.11259259 189.0834963c9.95176297 9.95176297 26.09303703 10.07312592 36.0448 0.12136296 9.95176297-9.95176297 10.07312592-26.09303703 0.12136296-36.0448l-188.11259259-189.0834963c-4.97588148-5.09724445-11.52948148-7.5245037-18.08308148-7.5245037zM409.08420741 256.32616297000004h-152.91733333c-14.0781037 0-25.48622222 11.40811852-25.48622223 25.48622221s11.40811852 25.48622222 25.48622223 25.48622223h152.91733333c14.0781037 0 25.48622222-11.40811852 25.48622222-25.48622223s-11.40811852-25.48622222-25.48622222-25.48622221zM409.08420741 103.40882963000001c-14.0781037 0-25.48622222 11.40811852-25.48622223 25.48622222v152.91733333c0 14.0781037 11.40811852 25.48622222 25.48622223 25.48622223s25.48622222-11.40811852 25.48622222-25.48622223v-152.91733333c0-14.0781037-11.40811852-25.48622222-25.48622222-25.48622222zM756.7890963 449.29327408h-152.91733333c-14.0781037 0-25.48622222 11.40811852-25.48622222 25.48622222s11.40811852 25.48622222 25.48622222 25.48622222h152.91733333c14.0781037 0 25.48622222-11.40811852 25.48622222-25.48622222s-11.40811852-25.48622222-25.48622222-25.48622222zM603.87176297 449.29327408c-14.0781037 0-25.48622222 11.40811852-25.48622222 25.48622222v152.91733333c0 14.0781037 11.40811852 25.48622222 25.48622222 25.48622222s25.48622222-11.40811852 25.48622221-25.48622222v-152.91733333c0-14.0781037-11.40811852-25.48622222-25.48622221-25.48622222z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
|
||||
|
||||
</font>
|
||||
</defs></svg>
|
||||
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,16 @@
|
||||
@font-face {
|
||||
font-family: 'svgfont';
|
||||
src: url('iconfont/iconfont.eot');
|
||||
src: url('iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('iconfont/iconfont.woff2') format('woff2'),
|
||||
url('iconfont/iconfont.woff') format('woff'),
|
||||
url('iconfont/iconfont.ttf') format('truetype'),
|
||||
url('iconfont/iconfont.svg#iconfont') format('svg');
|
||||
}
|
||||
.svgfont {
|
||||
font-family: "svgfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="components-layout-left">
|
||||
|
||||
<a-input-search placeholder="搜索组件" @search="onSearch" />
|
||||
<a-collapse v-model:activeKey="activeKey" accordion>
|
||||
<a-collapse-panel key="1" header="基本形状">
|
||||
<ul class="svg-nav-list">
|
||||
<li><div class="title">断路器</div><img title="断路器" @mousedown="Mousedown('CircuitBreakerSvg','断路器','#00FF00',40,0,'',2)" src="../assets/CircuitBreakerSvg.png" draggable="true"></li>
|
||||
<li><div class="title">竖线</div><img title="竖线" @mousedown="Mousedown('VerticalLineSvg','竖线','#FF0000',150,0,'',2)" src="../assets/VerticalLineSvg.png" draggable="true"></li>
|
||||
<li><div class="title">文字</div><img title="文字" @mousedown="Mousedown('TextSvg','文字','#FF0000',0,50,'文字')" src="../assets/TextSvg.png" draggable="true"></li>
|
||||
<li><div class="title">隔离开关</div><img title="隔离开关" @mousedown="Mousedown('IsolatingSwitchSvg','隔离开关','#00FF00',20,0,'',2)" src="../assets/IsolatingSwitchSvg.png" draggable="true"></li>
|
||||
<li><div class="title">避雷器</div><img title="避雷器" @mousedown="Mousedown('LightningArresterSvg','避雷器','#FF0000',7,0,'',2)" src="../assets/LightningArresterSvg.png" draggable="true"></li>
|
||||
<li><div class="title">标准电容器</div><img title="标准电容器" @mousedown="Mousedown('StandardCapacitorSvg','标准电容器','#FF0000',3,0,'',2)" src="../assets/StandardCapacitorSvg.png" draggable="true"></li>
|
||||
<li><div class="title">电线开关</div><img title="电线开关" @mousedown="Mousedown('WireBreakOffSvg','电线开关','#00FF00',5,0,'',2)" src="../assets/WireBreakOffSvg.png" draggable="true"></li>
|
||||
<li><div class="title">表格</div><img title="表格" @mousedown="Mousedown('TableSvg','表格','#CCCC33')" src="../assets/TableSvg.png" draggable="true"></li>
|
||||
<li><div class="title">横线</div><img title="横线" @mousedown="Mousedown('HorizontalLineSvg','横线','#FF0000',150,0,'',2)" src="../assets/HorizontalLineSvg.png" draggable="true"></li>
|
||||
<li><div class="title">多段向上折线</div><img title="多段向上折线" @mousedown="Mousedown('PolylineUpSvg','多段向上折线','#FF0000',7,0,'',2)" src="../assets/PolylineUpSvg.png" draggable="true"></li>
|
||||
<li><div class="title">多段向下折线</div><img title="多段向下折线" @mousedown="Mousedown('PolylineDownSvg','多段向下折线','#FF0000',7,0,'',2)" src="../assets/PolylineDownSvg.png" draggable="true"></li>
|
||||
<li><div class="title">箭头向上</div><img title="箭头向上" @mousedown="Mousedown('ArrowUpSvg','箭头向上','#FF0000',2,0,'',2)" src="../assets/ArrowUpSvg.png" draggable="true"></li>
|
||||
<li><div class="title">箭头向下</div><img title="箭头向下" @mousedown="Mousedown('ArrowDownSvg','箭头向下','#FF0000',2,0,'',2)" src="../assets/ArrowDownSvg.png" draggable="true"></li>
|
||||
<li><div class="title">接地灰白</div><img title="接地灰白" @mousedown="Mousedown('GroundGraySvg','接地灰白','#CCCCCC',3,0,'',2)" src="../assets/GroundGraySvg.png" draggable="true"></li>
|
||||
<li><div class="title">信号灯</div><img title="信号灯" @mousedown="Mousedown('SignalLamp','信号灯','#FF0000',3,0,'',2)" src="../assets/SignalLamp.png" draggable="true"></li>
|
||||
<li><div class="title">长方形</div><img title="长方形" @mousedown="Mousedown('RectSvg','长方形','#FF0000',30,0,'',2)" src="../assets/RectSvg.png" draggable="true"></li>
|
||||
<li><div class="title">双圆</div><img title="双圆" @mousedown="Mousedown('TwoCircleSvg','双圆','#FF0000',3,0,'',2)" src="../assets/TwoCircleSvg.png" draggable="true"></li>
|
||||
<li><div class="title">电流互感器y</div><img title="电流互感器y" @mousedown="Mousedown('TransformerYSvg','电流互感器y','#FF0000',5,0,'',2)" src="../assets/TransformerY.png" draggable="true"></li>
|
||||
<li><div class="title">三相互感器开口</div><img title="三相互感器开口" @mousedown="Mousedown('TransformerTriphaseOpenSvg','三相互感器开口','#FF0000',2,0,'',2)" src="../assets/TransformerTriphaseOpen.png" draggable="true"></li>
|
||||
<li><div class="title">双绕组变压器</div><img title="双绕组变压器" @mousedown="Mousedown('DoubleWindingSvg','双绕组变压器','#FF0000',5,0,'',2)" src="../assets/DoubleWindingSvg.png" draggable="true"></li>
|
||||
<li><div class="title">双绕组变压器B</div><img title="双绕组变压器B" @mousedown="Mousedown('DoubleWindingSvgB','双绕组变压器B','#FF0000',5,0,'',2)" src="../assets/DoubleWindingSvgB.png" draggable="true"></li>
|
||||
<li><div class="title">电容柜</div><img title="电容柜" @mousedown="Mousedown('GGJSvg','电容柜','#FF6600',1,0,'',2)" src="../assets/GGJ.png" draggable="true"></li>
|
||||
<li><div class="title">标准电抗</div><img title="标准电抗" @mousedown="Mousedown('StandardReactanceSvg','标准电抗','#CCCC00',3,0,'',2)" src="../assets/StandardReactance.png" draggable="true"></li>
|
||||
<li><div class="title">发电机</div><img title="发电机" @mousedown="Mousedown('AlternatorSvg','发电机','#FF0000',5,0,'',2)" src="../assets/Alternator.png" draggable="true"></li>
|
||||
</ul>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="2" header="拓扑图" :disabled="false">
|
||||
<ul class="svg-nav-list two-item">
|
||||
<li><div class="title">智慧终端</div><img title="智慧终端" @mousedown="Mousedown('SmartTerminalSvg','智慧终端','',140,0,'',0)" src="../assets/SmartTerminalSvg.png" draggable="true"></li>
|
||||
</ul>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="3" header="物联网">
|
||||
<p>{{ text }}</p>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import global from '@/global/global.js';//全局变量
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: ['1'],//当前激活的key
|
||||
text: `这里是预留位置.`,
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
Mousedown(type,title,color,height,fontSize,text,width){
|
||||
global.CurrentlySelectedToolBarType=type;
|
||||
global.CurrentlySelectedToolBarTypeName=title;
|
||||
global.CurrentlySelectedToolBarTitle=title;
|
||||
global.CurrentlySelectedToolBarColor=color;
|
||||
global.CurrentlySelectedToolBarHeight=height;
|
||||
global.CurrentlySelectedToolBarFontSize=fontSize;
|
||||
global.CurrentlySelectedToolBarText=text;
|
||||
global.CurrentlySelectedToolBarWidth=width;
|
||||
// alert(this.$UCore.GenUUid());
|
||||
},}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.components-layout-left .ant-input-search-icon{
|
||||
font-size: 20px !important;
|
||||
color: #1890ff !important;
|
||||
}
|
||||
.components-layout-left .ant-collapse,
|
||||
.components-layout-left .ant-collapse-content,
|
||||
.components-layout-left .ant-collapse > .ant-collapse-item{
|
||||
border-color: #eee !important;
|
||||
}
|
||||
.components-layout-left .ant-collapse-content > .ant-collapse-content-box{
|
||||
padding: 16px 0;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.ant-input-affix-wrapper{
|
||||
height:45px;
|
||||
line-height: 45px;
|
||||
border: none;
|
||||
}
|
||||
.svg-nav-list{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li{
|
||||
position: relative;
|
||||
width: calc(33.33% - 30px);
|
||||
height: 56px;
|
||||
margin: 0 15px 15px 15px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
box-shadow: 1px 1px 5px #ddd;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover{
|
||||
box-shadow: 1px 1px 5px #0090ff;
|
||||
}
|
||||
|
||||
img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title{
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
color: #fff;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.two-item{
|
||||
li{
|
||||
width: calc(50% - 30px);
|
||||
height: 100px;
|
||||
margin-bottom: 25px;
|
||||
border-radius: 10px;
|
||||
|
||||
img{
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<a-tabs type="card" class="components-layout-right">
|
||||
<a-tab-pane key="1" tab="外观">
|
||||
<a-form layout="horizontal">
|
||||
<a-form-item label="id">
|
||||
<p>{{svgInfo.id}}</p>
|
||||
</a-form-item>
|
||||
<a-form-item label="类型">
|
||||
<p>{{selectSvgInfo.typeName}}</p>
|
||||
</a-form-item>
|
||||
<a-form-item label="名称">
|
||||
<a-input v-model:value="selectSvgInfo.title" placeholder="请输入组件名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="X轴坐标">
|
||||
<a-input-number v-model:value="selectSvgInfo.svgPositionX" :min="0" :max="1920"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="Y轴坐标">
|
||||
<a-input-number v-model:value="selectSvgInfo.svgPositionY" :min="0" :max="1080"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="颜色">
|
||||
<input type="color" v-model="selectSvgInfo.svgColor">
|
||||
</a-form-item>
|
||||
<a-form-item label="大小">
|
||||
<a-input-number v-model:value="selectSvgInfo.height" :min="1" :max="3000"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="宽度">
|
||||
<a-input-number v-model:value="selectSvgInfo.width" :min="1" :max="3000"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="旋转">
|
||||
<a-input-number v-model:value="selectSvgInfo.angle" :min="0" :max="360"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="文本">
|
||||
<a-input v-model:value="selectSvgInfo.svgText" placeholder="请输入文本" />
|
||||
</a-form-item>
|
||||
<a-form-item label="字体大小">
|
||||
<a-input-number v-model:value="selectSvgInfo.fontSize" :min="1" :max="500"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="表格行数">
|
||||
<a-input-number v-model:value="selectSvgInfo.tableRowCount" :min="1" :max="500"/>
|
||||
</a-form-item>
|
||||
<a-form-item label="表格列数">
|
||||
<a-input-number v-model:value="selectSvgInfo.tableColCount" :min="1" :max="500"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button type="primary" class="btn-sure">
|
||||
确定
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="数据">
|
||||
<div class="bg-code">{{selectSvgInfo}}</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['svgInfo'],
|
||||
computed:{
|
||||
selectSvgInfo(){
|
||||
return this.svgInfo;
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
'selectSvgInfo.tableRowCount':function(newVal){
|
||||
this.$emit('setTableAttr', this.selectSvgInfo.id,newVal,this.selectSvgInfo.tableColCount)
|
||||
},
|
||||
'selectSvgInfo.tableColCount':function(newVal){
|
||||
this.$emit('setTableAttr', this.selectSvgInfo.id,this.selectSvgInfo.tableRowCount,newVal)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.components-layout-right{
|
||||
.ant-tabs-bar{
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.ant-form-item-label{
|
||||
width: 100px !important;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ant-input-number,input{
|
||||
width: 160px;
|
||||
border-radius: 4px;
|
||||
border-color: #ddd;
|
||||
}
|
||||
.ant-form-item-control{
|
||||
line-height: 24px !important;
|
||||
|
||||
p{
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.ant-form-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-flow: nowrap;
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
padding: 8px 0;
|
||||
|
||||
&:after{
|
||||
content:"";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
&:last-child::after{
|
||||
content:unset
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="less">
|
||||
.btn-sure{
|
||||
width: 260px;
|
||||
margin: 20px;
|
||||
}
|
||||
.bg-code{
|
||||
background: #444;
|
||||
color: #fff;
|
||||
width: calc(100% - 20px);
|
||||
margin: 20px 10px;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,63 @@
|
||||
<!-- 箭头向下svg组件 -->
|
||||
<template>
|
||||
<CircuitBreakerSvg :height = height :color= color :width= width v-if="type=='CircuitBreakerSvg'"></CircuitBreakerSvg>
|
||||
<VerticalLineSvg :height = height :color= color :width= width v-else-if="type=='VerticalLineSvg'"></VerticalLineSvg>
|
||||
<TextSvg :fontSize= fontSize :color= color :text= svgText v-else-if="type=='TextSvg'"></TextSvg>
|
||||
<IsolatingSwitchSvg :height = height :color= color :width= width v-else-if="type=='IsolatingSwitchSvg'"></IsolatingSwitchSvg>
|
||||
<LightningArresterSvg :height = height :color= color :width= width v-else-if="type=='LightningArresterSvg'"></LightningArresterSvg>
|
||||
<StandardCapacitorSvg :height = height :color= color :width= width v-else-if="type=='StandardCapacitorSvg'"></StandardCapacitorSvg>
|
||||
<WireConnectionSvg :height = height :color= color :width= width v-else-if="type=='WireConnectionSvg'"></WireConnectionSvg>
|
||||
<WireBreakOffSvg :height = height :color= color :width= width v-else-if="type=='WireBreakOffSvg'"></WireBreakOffSvg>
|
||||
<TableSvg :tableDataList = tableData :editable= editable v-else-if="type=='TableSvg'"></TableSvg>
|
||||
<HorizontalLineSvg :height = height :color= color :width= width v-else-if="type=='HorizontalLineSvg'"></HorizontalLineSvg>
|
||||
<PolylineUpSvg :height = height :color= color :width= width v-else-if="type=='PolylineUpSvg'"></PolylineUpSvg>
|
||||
<PolylineDownSvg :height = height :color= color :width= width v-else-if="type=='PolylineDownSvg'"></PolylineDownSvg>
|
||||
<ArrowUpSvg :height = height :color= color :width= width v-else-if="type=='ArrowUpSvg'"></ArrowUpSvg>
|
||||
<ArrowDownSvg :height = height :color= color :width= width v-else-if="type=='ArrowDownSvg'"></ArrowDownSvg>
|
||||
<GroundGraySvg :height = height :color= color :width= width v-else-if="type=='GroundGraySvg'"></GroundGraySvg>
|
||||
<SignalLamp :height = height :color= color :width= width v-else-if="type=='SignalLamp'"></SignalLamp>
|
||||
<RectSvg :height = height :color= color :width= width v-else-if="type=='RectSvg'"></RectSvg>
|
||||
<TwoCircleSvg :height = height :color= color :width= width v-else-if="type=='TwoCircleSvg'"></TwoCircleSvg>
|
||||
<TransformerY :height = height :color= color :width= width v-else-if="type=='TransformerYSvg'"></TransformerY>
|
||||
<TransformerTriphaseOpen :height = height :color= color :width= width v-else-if="type=='TransformerTriphaseOpenSvg'"></TransformerTriphaseOpen>
|
||||
<DoubleWindingSvg :height = height :color= color :width= width v-else-if="type=='DoubleWindingSvg'"></DoubleWindingSvg>
|
||||
<DoubleWindingSvgB :height = height :color= color :width= width v-else-if="type=='DoubleWindingSvgB'"></DoubleWindingSvgB>
|
||||
<GGJ :height = height :color= color :width= width v-else-if="type=='GGJSvg'"></GGJ>
|
||||
<StandardReactance :height = height :color= color :width= width v-else-if="type=='StandardReactanceSvg'"></StandardReactance>
|
||||
<Alternator :height = height :color= color :width= width v-else-if="type=='AlternatorSvg'"></Alternator>
|
||||
<SmartTerminalSvg :height = height :color= color :width= width v-else-if="type=='SmartTerminalSvg'"></SmartTerminalSvg>
|
||||
</template>
|
||||
<script>
|
||||
import CircuitBreakerSvg from '@/components/svgCpt/CircuitBreakerSvg.vue';//断路器svg
|
||||
import VerticalLineSvg from '@/components/svgCpt/VerticalLineSvg.vue';//竖线svg
|
||||
import TextSvg from '@/components/svgCpt/TextSvg.vue';//文字svg
|
||||
import IsolatingSwitchSvg from '@/components/svgCpt/IsolatingSwitchSvg.vue';//隔离开关svg
|
||||
import LightningArresterSvg from '@/components/svgCpt/LightningArresterSvg.vue';//避雷器svg
|
||||
import StandardCapacitorSvg from '@/components/svgCpt/StandardCapacitorSvg.vue';//标准电容器svg
|
||||
import WireConnectionSvg from '@/components/svgCpt/WireConnectionSvg.vue';//电线连接svg
|
||||
import WireBreakOffSvg from '@/components/svgCpt/WireBreakOffSvg.vue';//电线断开svg
|
||||
import TableSvg from '@/components/svgCpt/TableSvg.vue';//表格svg
|
||||
import HorizontalLineSvg from '@/components/svgCpt/HorizontalLineSvg.vue';//横线svg
|
||||
import PolylineUpSvg from '@/components/svgCpt/PolylineUpSvg.vue';//多段向上折线
|
||||
import PolylineDownSvg from '@/components/svgCpt/PolylineDownSvg.vue';//多段向下折线
|
||||
import ArrowUpSvg from '@/components/svgCpt/ArrowUpSvg.vue';//箭头向上
|
||||
import ArrowDownSvg from '@/components/svgCpt/ArrowDownSvg.vue';//箭头向下
|
||||
import GroundGraySvg from '@/components/svgCpt/GroundGraySvg.vue';//接地灰白
|
||||
import SignalLamp from '@/components/svgCpt/SignalLamp.vue';//接地灰白
|
||||
import RectSvg from '@/components/svgCpt/RectSvg.vue';//长方形
|
||||
import TwoCircleSvg from '@/components/svgCpt/TwoCircleSvg.vue';//双圆
|
||||
import TransformerY from '@/components/svgCpt/TransformerY.vue';//电流互感器y
|
||||
import TransformerTriphaseOpen from '@/components/svgCpt/TransformerTriphaseOpen.vue';//三相互感器开口
|
||||
import DoubleWindingSvg from '@/components/svgCpt/DoubleWindingSvg.vue';//双绕组变压器
|
||||
import DoubleWindingSvgB from '@/components/svgCpt/DoubleWindingSvgB.vue';//双绕组变压器
|
||||
import GGJ from '@/components/svgCpt/GGJ.vue';//电容柜
|
||||
import StandardReactance from '@/components/svgCpt/StandardReactance.vue';//标准电抗
|
||||
import Alternator from '@/components/svgCpt/Alternator.vue';//发电机
|
||||
import SmartTerminalSvg from '@/components/svgCpt/SmartTerminalSvg.vue';//发电站
|
||||
export default {
|
||||
props: ['height','color','width','type','fontSize','tableData','svgText','editable'],
|
||||
components: {CircuitBreakerSvg ,VerticalLineSvg,TextSvg,IsolatingSwitchSvg,LightningArresterSvg,StandardCapacitorSvg,WireConnectionSvg,WireBreakOffSvg,TableSvg
|
||||
,HorizontalLineSvg,PolylineUpSvg,PolylineDownSvg,ArrowUpSvg,ArrowDownSvg,GroundGraySvg,SignalLamp,RectSvg,TwoCircleSvg,TransformerY,TransformerTriphaseOpen,DoubleWindingSvg,DoubleWindingSvgB,GGJ
|
||||
,StandardReactance,Alternator,SmartTerminalSvg},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,10 @@
|
||||
<!-- 发电机类型svg组件 -->
|
||||
<template>
|
||||
<ellipse id="c1" cx="50" cy="50" rx="35" ry="35" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-10*height)+','+(-10*height)+') scale('+height/5+')'"></ellipse>
|
||||
<path id="l1" d="M30,50 C30,44 34,40 40,40 46,40 50,44 50,50 M50,50 C50,56 54,60 60,60 66,60 70,56 70,50 " fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-10*height)+','+(-10*height)+')scale('+height/5+')'"></path>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,9 @@
|
||||
<!-- 箭头向下svg组件 -->
|
||||
<template>
|
||||
<polygon points="0,-8 5,0 10,-8" :fill="color" :stroke="color" :stroke-width="height" :transform="'translate('+(-5)+','+0+')'"></polygon>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,9 @@
|
||||
<!-- 箭头向上svg组件 -->
|
||||
<template>
|
||||
<polygon points="0,8 5,0 10,8" :fill="color" :stroke="color" :stroke-width="height" :transform="'translate('+(-5)+','+0+')'"></polygon>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,9 @@
|
||||
<!-- 充电站svg组件 -->
|
||||
<template>
|
||||
<image :x="-height/4" :y="-height/2" :width="height/2" :height="height" xlink:href="../../assets/ChargingStationSvg.png"></image>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,9 @@
|
||||
<!-- 断路器svg组件 -->
|
||||
<template>
|
||||
<rect :x="-(height/4)" :y="-(height/2)" :width="height/2" :height="height" :fill="color" stroke="#000000" :stroke-width="width" ></rect>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,15 @@
|
||||
<!-- 双绕组变压器svg组件 -->
|
||||
<template>
|
||||
<ellipse cx="0" :cy="-height*4" :rx="height*5" :ry="height*5" fill="none" :stroke="color" :stroke-width="width" ></ellipse>
|
||||
<ellipse cx="0" :cy="height*4" :rx="height*5" :ry="height*5" fill="none" :stroke="color" :stroke-width="width" ></ellipse>
|
||||
<polygon :points="height*2+','+(-(height*6))+' '+0+','+(-height*2)+' '+(-height*2)+','+(-height*6)" fill="none" :stroke="color" :stroke-width="width"></polygon>
|
||||
<line x1="0" :y1="height*4" x2="0" :y2="height*7" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
<line x1="0" :y1="height*4" :x2="-(height*2)" :y2="height*2" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
<line x1="0" :y1="height*4" :x2="height*2" :y2="height*2" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,15 @@
|
||||
<!-- 双绕组变压器B类型svg组件 -->
|
||||
<template>
|
||||
<ellipse cx="0" :cy="-height*4" :rx="height*5" :ry="height*5" fill="none" :stroke="color" :stroke-width="width" ></ellipse>
|
||||
<ellipse cx="0" :cy="height*4" :rx="height*5" :ry="height*5" fill="none" :stroke="color" :stroke-width="width" ></ellipse>
|
||||
<polygon :points="height*2+','+height*6+' '+0+','+height*2 +''+(-height*2)+','+height*6" fill="none" :stroke="color" :stroke-width="width" ></polygon>
|
||||
<line x1="0" :y1="-height*4" x2="0" :y2="-height*7" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line x1="0" :y1="-height*4" :x2="height*2" :y2="-height*2" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line x1="0" :y1="-height*4" :x2="-height*2" :y2="-height*2" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,20 @@
|
||||
<!-- 电容柜类型svg组件 -->
|
||||
<template>
|
||||
<line :x1="0.5*height" :y1="-25*height" :x2="-9.5*height" :y2="-13*height" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line :x1="-0.5*height" :y1="-26*height" :x2="9.5*height" :y2="-13*height" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line :x1="-12*height" :y1="-17*height" :x2="-6*height" :y2="-8*height" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
<line :x1="-15*height" :y1="-12*height" :x2="-11*height" :y2="-3*height" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
<polyline :points="(-13*height)+','+(-8*height)+' '+(-22*height)+','+(3*height)+' '+(-22*height)+','+(5*height)" fill="none" :stroke="color" :stroke-width="width" ></polyline>
|
||||
<line :x1="-21*height" :y1="4*height" :x2="-4*height" :y2="4*height" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line :x1="-5*height" :y1="-2*height" :x2="-5*height" :y2="11*height" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line :x1="3*height" :y1="-2*height" :x2="3*height" :y2="11*height" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line :x1="4*height" :y1="4*height" :x2="21*height" :y2="4*height" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<polyline :points="(13*height)+','+(-8*height)+' '+(22*height)+','+(3*height)+' '+(22*height)+','+(5*height)" fill="none" :stroke="color" :stroke-width="width" ></polyline>
|
||||
<line :x1="14*height" :y1="-12*height" :x2="8*height" :y2="-3*height" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
<line :x1="12*height" :y1="-17*height" :x2="6*height" :y2="-8*height" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,12 @@
|
||||
<!-- 接地灰白svg组件 -->
|
||||
<template>
|
||||
<line :x1="3*height" :y1="3*height" :x2="3*height" y2="0" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-height*3)+','+(-height*2)+')'"></line>
|
||||
<line x1="0" :y1="3*height" :x2="6*height" :y2="3*height" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-height*3)+','+(-height*2)+')'"></line>
|
||||
<line :x1="height" :y1="5*height" :x2="5*height" :y2="5*height" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-height*3)+','+(-height*2)+')'"></line>
|
||||
<line :x1="2*height" :y1="7*height" :x2="4*height" :y2="7*height" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-height*3)+','+(-height*2)+')'"></line>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,9 @@
|
||||
<!-- 横线svg组件 -->
|
||||
<template>
|
||||
<line :x1="-height/2" :y1="0" :x2="(height)-height/2" :y2="0" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,12 @@
|
||||
<!-- 隔离开关svg组件 -->
|
||||
<template>
|
||||
<line :x1="0" :y1="0-(height)" :x2="0" :y2="0" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line :x1="0-(height/2)" :y1="0" :x2="height/3" :y2="0" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line :x1="0" :y1="height" :x2="-(height/2)" :y2="height/4" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
<line :x1="0" :y1="height*2" :x2="0" :y2="height" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,12 @@
|
||||
<!-- 避雷器svg组件 -->
|
||||
<template>
|
||||
<rect :x="-height" :y="-(height*2)" :width="(height*2+1)" :height="height*5" fill="none" :stroke="color" :stroke-width="width" />
|
||||
<line :x1="0" :y1="-(height*3)" :x2="0" :y2="0" fill="none" :stroke="color" :stroke-width="width" />
|
||||
<line :x1="0" :y1="(height*3)" :x2="0" :y2="(4*height)" fill="none" :stroke="color" :stroke-width="width" />
|
||||
<polyline :points="(-1)+','+(-7)+' '+(0)+','+(0)+' '+(1)+','+(-7)" fill="none" :stroke="color" :stroke-width="width"/>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,10 @@
|
||||
<!-- 多段线向下svg组件 -->
|
||||
<template>
|
||||
<polyline :points="'0,'+height+' '+(2*height-1)+','+(3*height+1)+' '+(4*height-2)+','+height" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-(2*height-1))+','+0+')'" ></polyline>
|
||||
<polyline :points="'0,'+height+' '+(2*height-1)+','+(3*height+1)+' '+(4*height-2)+','+height" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-(2*height-1))+','+(height+1)+')'" ></polyline>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,10 @@
|
||||
<!-- 多段线向上svg组件 -->
|
||||
<template>
|
||||
<polyline :points="'0,'+height+' '+(2*height-1)+','+(-height)+' '+(4*height-2)+','+height" fill="none" :stroke="color" :stroke-width="width" :transform ="'translate('+(-(2*height-1))+','+0+')'"></polyline>
|
||||
<polyline :points="'0,'+height+' '+(2*height-1)+','+(-height)+' '+(4*height-2)+','+height" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-(2*height-1))+','+(height+1)+')'"></polyline>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,9 @@
|
||||
<!-- 长方形svg组件 -->
|
||||
<template>
|
||||
<rect :x="-(height/6)" :y="-(height/2)" :width="height/3" :height="height" fill="none" :stroke="color" :stroke-width="width" stroke-linecap="round"></rect>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,11 @@
|
||||
<!-- 信号灯svg组件 -->
|
||||
<template>
|
||||
<ellipse :cx="2*height+1" :cy="7*height+1" :rx="4*height" :ry="4*height" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-(2*height+1))+','+(-(7*height+1))+')'" ></ellipse>
|
||||
<line :x1="(-height+3)" :y1="10*height" :x2="5*height" :y2="5*height" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-(2*height+1))+','+(-(7*height+1))+')'" ></line>
|
||||
<line :x1="5*height" :y1="10*height" :x2="(-height+3)" :y2="5*height" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-(2*height+1))+','+(-(7*height+1))+')'"></line>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,9 @@
|
||||
<!-- 智慧终端svg组件 -->
|
||||
<template>
|
||||
<image :x="-height/4" :y="-height/2" :width="height/2" :height="height" xlink:href="../../assets/SmartTerminalSvg.png"></image>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,12 @@
|
||||
<!-- 标准电容器svg组件 -->
|
||||
<template>
|
||||
<line :x1="0" :y1="-(height*4)" :x2="0" :y2="-height" fill="none" :stroke="color" :stroke-width="width" />
|
||||
<line :x1="-(height*3)" :y1="-height" :x2="height*3" :y2="-height" fill="none" :stroke="color" :stroke-width="width" />
|
||||
<line :x1="-(height*3)" :y1="height" :x2="height*3" :y2="height" fill="none" :stroke="color" :stroke-width="width" />
|
||||
<line :x1="0" :y1="(height*4)" :x2="0" :y2="height" fill="none" :stroke="color" :stroke-width="width" />
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,9 @@
|
||||
<!-- 标准电抗类型svg组件 -->
|
||||
<template>
|
||||
<path d="M18,63 V36 H33 C33,42 27,51 18,51 9,51 3,42 3,36 3,27 9,21 18,21 V6 V21" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-6*height)+','+(-12*height)+') scale('+height/3+')'"></path>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,86 @@
|
||||
<!-- 表格svg组件 -->
|
||||
<template>
|
||||
<foreignObject :x="0" :y="0">
|
||||
<div id="divtable" class="svgfont" :style="editable?'':'display:none'"></div>
|
||||
<table border="0" cellpadding="0" cellspacing="0" style="pointer-events: none">
|
||||
<tr v-for="(tableDataRowItem,index) in tableDataList" :key="index" >
|
||||
<td v-for="(tableDataColItem) in tableDataRowItem.cols " :key="tableDataColItem.id" class="tdsvg">
|
||||
<div class="add-tag">
|
||||
<span>{{ tableDataColItem.val }}</span>
|
||||
<a-input :disabled="!editable" v-model:value="tableDataColItem.val" class="ainput" size="small"/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</foreignObject>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['tableDataList','x','y','editable'],
|
||||
methods:{
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
foreignObject{
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
// position:absolute;
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
}
|
||||
.add-tag {
|
||||
color: #333;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.ainput {
|
||||
pointer-events: auto;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
caret-color: #426BF2;
|
||||
::-webkit-input-placeholder {
|
||||
color: #aaa;
|
||||
}
|
||||
border-style: none;
|
||||
padding: 0 32px;
|
||||
color: rgb(255, 255, 0);
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
foreignObject #divtable{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
line-height: 20px;
|
||||
z-index: 111;
|
||||
color: #fff;
|
||||
// pointer-events: auto;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
}
|
||||
foreignObject:hover #divtable {
|
||||
pointer-events: none;
|
||||
display:block;
|
||||
}
|
||||
.tdsvg{
|
||||
border:1px solid rgb(255, 255, 0);
|
||||
white-space:nowrap;
|
||||
background:#fff;
|
||||
color:#999;
|
||||
text-align:center;
|
||||
font-size:16px;
|
||||
background-color: lawngreen;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,10 @@
|
||||
|
||||
<!-- 文字svg组件 -->
|
||||
<template>
|
||||
<text :x="0-(fontSize*text.length/2)" :y="fontSize/2" :font-size="fontSize" :fill="color">{{text}}</text>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['fontSize','color','text'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,12 @@
|
||||
<!-- 电流互感器三相开口 svg组件 -->
|
||||
<template>
|
||||
<ellipse cx="0" cy="0" :rx="height*5" :ry="height*5" fill="none" :stroke="color" :stroke-width="width" ></ellipse>
|
||||
<line :x1="-height" :y1="-height*3" :x2="-height" :y2="height*3" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
<line :x1="-height" :y1="-height*3" :x2="height*2" y2="0" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
<line :x1="height*2" :y1="height" :x2="-height" :y2="height*3" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,12 @@
|
||||
<!-- 电流互感器y svg组件 -->
|
||||
<template>
|
||||
<ellipse cx="0" cy="0" :rx="height*2" :ry="height*2" fill="none" :stroke="color" :stroke-width="width" ></ellipse>
|
||||
<line :x1="height" :y1="-height" x2="0" y2="0" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line :x1="-height" :y1="-height" x2="0" y2="0" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line x1="0" y1="0" x2="0" :y2="height" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,10 @@
|
||||
<!-- 双圆svg组件 -->
|
||||
<template>
|
||||
<ellipse cx="0" :cy="-height-(height/2)" :rx="height*2" :ry="height*2" fill="none" :stroke="color" :stroke-width="width"></ellipse>
|
||||
<ellipse cx="0" :cy="height+height/2" :rx="height*2" :ry="height*2" fill="none" :stroke="color" :stroke-width="width"></ellipse>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,9 @@
|
||||
<!-- 竖线svg组件 -->
|
||||
<template>
|
||||
<line x1="0" :y1="0-height/2" x2="0" :y2="(0+height)-height/2" fill="none" :stroke="color" :stroke-width="width" />
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,11 @@
|
||||
<!-- 电线断开svg组件 -->
|
||||
<template>
|
||||
<line :x1="0" :y1="-(height*8)" :x2="0" :y2="-(3*height)" fill="none" stroke="#00ff00" :stroke-width="width"></line>
|
||||
<line :x1="0" :y1="3*height" :x2="-(2*height)" :y2="-(3*height)" fill="none" stroke="#00ff00" :stroke-width="width"></line>
|
||||
<line :x1="0" :y1="9*height" :x2="0" :y2="3*height" fill="none" stroke="#00ff00" :stroke-width="width"></line>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,11 @@
|
||||
<!-- 电线连接svg组件 -->
|
||||
<template>
|
||||
<line :x1="0" :y1="-(height*8)" :x2="0" :y2="-(3*height)" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
<line :x1="0" :y1="height*3" :x2="0" :y2="-(3*height)" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
<line :x1="0" :y1="height*9" :x2="0" :y2="3*height" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,14 @@
|
||||
import { createApp } from 'vue'
|
||||
import Antd from 'ant-design-vue';
|
||||
import App from './App.vue'
|
||||
import 'ant-design-vue/dist/antd.css';
|
||||
import UCore from './util/UCore.js'
|
||||
import './assets/css/index.css';
|
||||
import router from './router';
|
||||
import axios from 'axios';
|
||||
const app = createApp(App);
|
||||
app.use(router);
|
||||
app.config.globalProperties.$UCore = UCore;
|
||||
app.config.globalProperties.$axios = axios;
|
||||
app.use(Antd).mount('#app');
|
||||
|
||||
@ -0,0 +1,46 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
// import mineRouter from "./mineRouter";
|
||||
// import JsBridge from "../utils/jsbridge";
|
||||
const routerHistory = createWebHistory();
|
||||
|
||||
let routes = [
|
||||
// route -> routes
|
||||
// 首页
|
||||
{
|
||||
path: '/',
|
||||
name: '/',
|
||||
component: () =>
|
||||
import ('../views/CircuitEdit.vue'),
|
||||
},
|
||||
// 编辑器页面
|
||||
{
|
||||
path: '/CircuitEdit',
|
||||
name: 'CircuitEdit',
|
||||
component: () =>
|
||||
import ('../views/CircuitEdit.vue'),
|
||||
},
|
||||
// 预览页页面
|
||||
{
|
||||
path: '/CircuitPreview',
|
||||
name: 'CircuitPreview',
|
||||
component: () =>
|
||||
import ('../views/CircuitPreview.vue'),
|
||||
}
|
||||
|
||||
|
||||
]
|
||||
|
||||
// routes = routes.concat(mineRouter)
|
||||
|
||||
const router = createRouter({
|
||||
history: routerHistory,
|
||||
routes
|
||||
});
|
||||
|
||||
// // 路由守卫
|
||||
router.beforeEach((to, from, next) => {
|
||||
console.log(to);
|
||||
next();
|
||||
});
|
||||
|
||||
export default router
|
||||
@ -0,0 +1,19 @@
|
||||
/**
|
||||
* 生成uuid
|
||||
*/
|
||||
function GenUUid() {
|
||||
let s = [];
|
||||
let hexDigits = "0123456789abcdef";
|
||||
for (let i = 0; i < 36; i++) {
|
||||
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
|
||||
}
|
||||
s[14] = "4";
|
||||
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
|
||||
s[8] = s[13] = s[18] = s[23] = "-";
|
||||
|
||||
let uuid = s.join("");
|
||||
return uuid;
|
||||
}
|
||||
export default {
|
||||
GenUUid
|
||||
}
|
||||
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div style="overflow:auto;position: relative;">
|
||||
<div class="svg-contain">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:#000000" viewBox="0 0 1920 1080" width="100%" height="100%">
|
||||
<defs/>
|
||||
<g v-for="item in svgLists" :key="item" :id= item.id :title=item.title :transform="'translate('+(item.svgPositionX)+','+(item.svgPositionY)+')' +'rotate('+item.angle+')'" >
|
||||
<SvgComponents :height = item.height :color= item.svgColor :width= item.width :type= item.type :tableData= item.tableData :fontSize= item.fontSize :svgText= item.svgText :editable= editable></SvgComponents>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="btns-content">
|
||||
<a-button type="primary" @click="testF">模拟硬件</a-button>
|
||||
<a-button type="primary" @click="testG">取消模拟硬件</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SvgComponents from '@/components/SvgComponents.vue';
|
||||
export default {
|
||||
components: {SvgComponents},
|
||||
data(){
|
||||
return{
|
||||
svgLists:[],
|
||||
analogDataTimer:'',//模拟数据定时器
|
||||
userInfo:'',
|
||||
editable:false
|
||||
}},
|
||||
methods:{
|
||||
testF(){
|
||||
//找出所有断路器
|
||||
let anyCircuitBreakerList=this.svgLists.filter(f=>f.type=='CircuitBreakerSvg');
|
||||
//找出所有的电线开关
|
||||
let anyWireBreakList=this.svgLists.filter(f=>f.type=='WireConnectionSvg'||f.type=='WireBreakOffSvg');
|
||||
//查找所有表格值
|
||||
let anyTable=this.svgLists.filter(f=>f.type=='TableSvg')[0];
|
||||
let anyTableList;
|
||||
if(anyTable=='undefined'||anyTable==null){
|
||||
anyTableList=[];
|
||||
}
|
||||
else{
|
||||
anyTableList=anyTable.tableData.map(m=>m.cols);
|
||||
}
|
||||
this.analogDataTimer= setInterval(function() {
|
||||
anyCircuitBreakerList.forEach(anyCircuitBreaker=>{
|
||||
//生成一个随机数
|
||||
let random=Math.round(Math.random()*10);
|
||||
if(random<5){
|
||||
anyCircuitBreaker.svgColor='#00FF00';
|
||||
}
|
||||
else{
|
||||
anyCircuitBreaker.svgColor='#FF0000';
|
||||
}
|
||||
});
|
||||
anyWireBreakList.forEach(anyWireBreak=>{
|
||||
//生成一个随机数
|
||||
let random=Math.round(Math.random()*10);
|
||||
if(random<5){
|
||||
anyWireBreak.type='WireConnectionSvg';
|
||||
anyWireBreak.svgColor="#FF0000"
|
||||
}
|
||||
else{
|
||||
anyWireBreak.type='WireBreakOffSvg';
|
||||
}
|
||||
});
|
||||
anyTableList.forEach(anyTables=>{
|
||||
anyTables.forEach(anyTable=>{
|
||||
if(anyTable.type=='ff85bc7f-3b69-454f-8cf8-21c9f1903dd6'||anyTable.id=='f8271273-d07d-4033-8b6c-6b52c04fe3e5'
|
||||
||anyTable.id=='dc5931bc-7e8e-47f4-b28e-5bc42fb207da'||anyTable.id=='560f5404-6539-422f-8fb9-77bac641e72b'){
|
||||
//生成一个随机数
|
||||
let random=Math.round(Math.random()*100);
|
||||
anyTable.val=random;
|
||||
}
|
||||
});
|
||||
});
|
||||
},2000)
|
||||
|
||||
},
|
||||
testG(){
|
||||
clearInterval(this.analogDataTimer);
|
||||
},
|
||||
},
|
||||
created(){
|
||||
let _this=this;
|
||||
_this.svgLists=JSON.parse(localStorage.getItem('svginfo'));
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.svg-contain{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.btns-content{
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
button{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue