@@ -1265,7 +1323,7 @@ export default {
selection: {
handler () {
// this.loading = false
- if (this.selection.pen && this.selection.pen.data && !this.selection.pen.data.expressAllArr) {
+ if (this.selection.pen && this.selection.pen.data && (!this.selection.pen.data.expressAllArr || this.selection.pen.data.expressAllArr.length===0)) {
this.selection.pen.data.expressAllArr = ['']
this.selection.pen.data.legendsAll = ['']
}
@@ -1943,7 +2001,7 @@ export default {
/deep/ .el-collapse-item__header {
padding: 0 10px;
- background-color: #F9F9F9;
+ background-color: #eeeeee;
height: 32px;
font-size: 14px;
color: #333333;
diff --git a/nezha-fronted/src/components/common/project/L5/services/canvas.js b/nezha-fronted/src/components/common/project/L5/services/canvas.js
index 7be869d2a..3f81eaec5 100644
--- a/nezha-fronted/src/components/common/project/L5/services/canvas.js
+++ b/nezha-fronted/src/components/common/project/L5/services/canvas.js
@@ -216,6 +216,53 @@ export const imageTemp = {
fullIconRect: { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 }
}
}
+export const imageTemp2 = {
+ name: 'rectangleImg2',
+ icon: 'icon-image',
+ data: {
+ type: 0,
+ rect: {
+ x: 922,
+ y: 406,
+ width: 100,
+ height: 100
+ },
+ imageRatio: true,
+ lineWidth: 0,
+ rotate: 0,
+ offsetRotate: 0,
+ globalAlpha: 1,
+ dash: 0,
+ strokeStyle: '#000000',
+ animatePos: 0,
+ name: 'rectangleImg2',
+ lineDashOffset: 0,
+ text: '',
+ textOffsetX: 0,
+ textOffsetY: 0,
+ visible: true,
+ zRotate: 0,
+ animateDuration: 0,
+ animateFrames: [],
+ animateFrame: 0,
+ borderRadius: 0,
+ icon: '',
+ image: '',
+ imageAlign: 'center',
+ bkType: 0,
+ gradientAngle: 0,
+ gradientRadius: 0.01,
+ paddingTop: 5,
+ paddingBottom: 5,
+ paddingLeft: 5,
+ paddingRight: 5,
+ paddingLeftNum: 5,
+ paddingRightNum: 5,
+ paddingTopNum: 5,
+ paddingBottomNum: 5,
+ fullIconRect: { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 }
+ }
+}
/* 自定义图片组件 */
export function myShape (ctx, node) { // 自定义图片组件
ctx.beginPath()
@@ -252,13 +299,13 @@ export function myIconRect2 (node) {
node.fullIconRect = node.rect
}
export function myTextRect2 (node) {
- node.data.text = ''
- node.textRect = new Rect(
- node.rect.x + node.paddingLeft,
- node.rect.y + node.rect.height - 20 - node.paddingBottom,
- 0,
- 0
- )
+ // node.textRect = new Rect(
+ // node.rect.x + node.paddingLeft,
+ // node.rect.y + node.rect.height + 10,
+ // node.rect.width - (node.paddingLeft + node.paddingRight),
+ // 20
+ // )
+ node.textRect = {}
node.fullTextRect = node.rect
}
/* 自定义图片组件 */
diff --git a/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue b/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
index 34ab51a63..da1c78049 100644
--- a/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
+++ b/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
@@ -16,7 +16,7 @@
width="111"
trigger="click"
class="scale-number-box"
- popper-class="scale-number-popover"
+ popper-class="scale-number-popover no-style-class"
>
缩放级别
@@ -106,7 +106,7 @@ export default {
}
},
mounted () {
- const dataOption = this.index == -2 ? getTopology(-1).data : getTopology(this.index).data
+ const dataOption = getTopology(this.index).data
Object.keys(this.option).forEach(key => {
if (key === 'scale') {
this.scaleNum = (JSON.stringify(dataOption[key]) ? parseInt(dataOption[key] * 100) : this.scaleNum)
diff --git a/nezha-fronted/src/components/common/project/topology.scss b/nezha-fronted/src/components/common/project/topology.scss
new file mode 100644
index 000000000..3278d3337
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/topology.scss
@@ -0,0 +1,543 @@
+/deep/ .el-collapse-item .is-active .nz-icon-caret-right{
+ transform: rotate(90deg);
+ color: #FA901C;
+}
+/deep/ .el-collapse-item .title-delete{
+ display: none;
+}
+/deep/ .el-collapse-item .nz-icon-caret-right{
+ transition: transform .3s;
+ color: #BEBEBE;
+ margin-right: 5px;
+}
+/deep/ .el-collapse-item:hover{
+ .el-collapse-item__header{
+ color: #FA901C;
+ }
+ .nz-icon-caret-right{
+ color: #FA901C;
+ }
+ .title-delete{
+ display: block;
+ color: #FA901C;
+ }
+}
+.edit-topologyLine{
+ background: rgba(196,196,196,0.4) !important;
+ box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.27);
+}
+.project-box{
+ @keyframes model-error-animation {
+ 0% {
+ transform: scale(0.7);
+ }
+ 50% {
+ transform: scale(1);
+ }
+ 100% {
+ transform: scale(0.7);
+ }
+ }
+
+ @keyframes model-icon-animation {
+ 0% {
+ transform: scale(1.2) translateX(1px);
+ }
+ 50% {
+ transform: scale(0.9) translateX(0px);
+ }
+ 100% {
+ transform: scale(1.2) translateX(1px);
+ }
+ }
+
+ .nz-icon-shuidi {
+ position: absolute;
+ font-size: 48px;
+ color: rgba(190, 233, 222, 0.45);
+ border-radius: 50%;
+ height: 48px;
+ width: 48px;
+ line-height: 48px;
+ }
+
+ .model-error.nz-icon-shuidi {
+ color: #FADED7;
+ animation: model-error-animation .6s infinite ease-in-out;
+ animation-direction: normal;
+ }
+
+ .model-error-active.nz-icon-shuidi {
+ color: #FADED7;
+ }
+
+ .nz-icon-model {
+ color: #23BF9A;
+ position: absolute;
+ top: -4px;
+ left: 15px;
+ font-size: 18px;
+ line-height: 48px;
+ }
+
+ .model-error .nz-icon-model {
+ color: #EC7F66;
+ animation: model-icon-animation .6s infinite ease-in-out;
+ animation-direction: normal;
+ }
+
+ .model-error-active .nz-icon-model {
+ color: #EC7F66;
+ }
+
+ .scaleTool-enter-active {
+ animation: scaleTool-in .15s;
+ }
+
+ .scaleTool-leave-active {
+ animation: scaleTool-in .15s reverse;
+ }
+
+ @keyframes scaleTool-in {
+ from {
+ top: 0px;
+ left: 0px;
+ transform: scale(0.5);
+ }
+ }
+
+ .moduleIdRect{
+ /*border: 4px dashed #FA901C;*/
+ }
+ .module-rect-top{
+ border-top: 4px dashed #ff8c0a;
+ position: absolute;
+ }
+ .module-rect-right{
+ border-right: 4px dashed #ff8c0a;
+ position: absolute;
+ }
+ .module-rect-bottom{
+ border-bottom: 4px dashed #ff8c0a;
+ position: absolute;
+ }
+ .module-rect-left{
+ border-left: 4px dashed #ff8c0a;
+ position: absolute;
+ }
+
+ .network-pop .nz-icon-hexagonBorder{
+ position: absolute;
+ font-size: 48px;
+ color: #84d5c2;
+ height: 48px;
+ width: 48px;
+ line-height: 48px;
+ }
+
+ .network-pop .nz-icon-hexagonBorder:hover {
+ transform: scale(1.1);
+ color: #4BB49B;
+ }
+
+ .network-pop .nz-icon-hexagonBorder.error-model-stat {
+ color: #F5BAAC;
+ }
+
+ .network-pop .nz-icon-hexagonBorder.error-model-stat:hover {
+ color: #EC7F66;
+ }
+
+ .network-pop .nz-icon-liubianxing {
+ color: #e2f3ef;
+ font-size: 44px;
+ position: absolute;
+ top: 1px;
+ left: 2px;
+ transform: scale(0.95);
+ z-index: 0;
+ }
+
+ .network-pop .error-model-stat .nz-icon-liubianxing {
+ color: #FADED7;
+ }
+
+ .network-pop .nz-icon.noMove {
+ position: absolute;
+ left: 14px;
+ font-size: 20px;
+ color: #27c09c;
+ }
+
+ .network-pop .error-model-stat .nz-icon.noMove {
+ color: #EC7F66;
+ }
+
+ .network-pop .no-selPop {
+ color: #999 !important;
+ }
+
+ .network-pop .no-selPop .nz-icon-liubianxing {
+ color: rgb(218, 218, 218);
+ }
+
+ .network-pop .no-selPop .nz-icon-chart {
+ color: #999;
+ }
+
+ .network-info {
+ position: absolute;
+ right: 0;
+ top: 50px;
+ z-index: 1;
+ }
+
+ .facade-top{
+ min-height: 138px;
+ display: flex;
+ margin: 4px 0;
+ height: calc(16% - 40px);
+ font-size: 12px;
+ z-index: 10;
+ padding-left: 15px;
+ }
+ .facade-top > div{
+ width: 18%;
+ min-width: 315px;
+ background: #FFFFFF;
+ margin-right: 9px;
+ padding: 20px;
+ border: 1px solid #FFFFFF;
+ box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 9px -1px rgba(205,205,205,0.77);
+ }
+ .facade-top-title{
+ font-size: 16px;
+ color: #333333;
+ font-weight: bold;
+ padding: 5px 0;
+ }
+ .facade-top-left{
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ }
+ .special.label{
+ margin-left: 30px;
+ }
+ .facade-top .facade-top-right{
+ width: auto;
+ min-width: 100px;
+ }
+ .facade-top-right-content{
+ display: flex;
+ justify-content: space-around;
+ justify-items: center;
+ flex-direction: column;
+ height: calc(100% - 30px);
+ align-items:flex-start;
+ }
+ .facade-top-right-content > div{
+ min-width: 84px;
+ height: 22px;
+ display: flex;
+ justify-content: space-between;
+ color: #fff;
+ text-align: center;
+ margin-bottom: 5px;
+ line-height: 22px;
+ }
+ .facade-top-right-content > div > div:last-child{
+ text-align: center;
+ border-radius: 0 4px 4px 0;
+ flex: 1;
+ height: calc(100% - 2px);
+ padding: 0 8px;
+ min-width: 40px;
+ }
+ .content-P1-title{
+ background: #F2866E;
+ border-radius: 4px 0 0 4px;
+ width: 40px;
+ height: 100%;
+ }
+ .content-P1-title + div{
+ border: 1px solid #F4907A;
+ font-size: 12px;
+ color: #F4907A;
+ }
+
+ .content-P2-title{
+ background: #F89984;
+ border-radius: 4px 0 0 4px;
+ width: 40px;
+ height: 100%;
+ }
+ .content-P2-title + div{
+ border: 1px solid #F9A28F;
+ font-size: 12px;
+ color: #F9A28F;
+ }
+
+ .content-P3-title{
+ background: #F7BA78;
+ border-radius: 4px 0 0 4px;
+ width: 40px;
+ height: 100%;
+ }
+ .content-P3-title + div{
+ border: 1px solid #F7BA78;
+ font-size: 12px;
+ color: #F7BA78;
+ }
+
+ .right-content-P1{
+ border: 1px solid ;
+ }
+ .align--center{
+ text-align: center;
+ }
+}
+.project-topology-tool {
+ display: inline-flex;
+ height: 30px;
+}
+
+.el-dropdown-title {
+ background: #FFFFFF;
+ border: 1px solid $--primary-border-color;
+ border-radius: 2px;
+ width: 66px;
+ height: 28px;
+ display: inline-block;
+ line-height: 28px;
+
+ .icon-cube {
+ margin-left: 15px;
+ }
+}
+
+.project-box {
+ width: 100%;
+ position: relative;
+ border-radius: 2px;
+ overflow: visible;
+ background: #fff;
+ .pickTime{
+ margin-right: 10px;
+ }
+ .project-title {
+ height: 55px;
+ padding-bottom: 0px;
+ }
+
+ .drag-header {
+ cursor: move;
+ background: #1a1a1a;
+ color: #fff;
+ }
+
+ .left-bottom {
+ position: absolute;
+ left: 10px;
+ bottom: 10px;
+ }
+}
+
+.page {
+ display: flex;
+ height: calc(100% - 1px);
+ width: 100%;
+ /*
+ height: calc(100% - 65px);
+ width: calc(100% - 10px);
+ margin: 5px;
+ */
+ position: relative;
+
+ .tools {
+ width: 300px;
+ height: calc(100% - 1px);
+ border: none;
+ position: absolute;
+ z-index: 1 !important;
+ left: 20px;
+ background-color: #f9f9f9;
+
+ .title {
+ float: left;
+ }
+ }
+
+ .full {
+ flex: 1;
+ overflow: unset !important;
+ }
+
+ .props {
+ width: 500px;
+ height: 100%;
+ border: none;
+ position: absolute;
+ z-index: 1 !important;
+ right: 0;
+ top: 0;
+ background: #FFFFFF;
+ box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.09);
+ border-radius: 0px;
+ }
+}
+.overview-page{
+ height: 100%;
+}
+.special-select svg {
+ width: 75px;
+ height: 30px;
+}
+
+.special-select .el-select.el-select--small {
+ width: 100%;
+}
+
+.special-select /deep/ .el-select-dropdown {
+ width: 130px !important;
+
+ .el-select-dropdown__item {
+ padding: 0 0 0 10px;
+ }
+}
+
+.special-select /deep/ .el-input.el-input--prefix.el-input--suffix, .line-width /deep/ .el-input.el-input--prefix.el-input--suffix {
+ border: 1px solid #DCDFE6;
+ height: 28px;
+}
+
+.special-select /deep/ .el-input__inner, .line-width /deep/ .el-input__inner {
+ display: none;
+}
+
+.special-select /deep/ .el-input__prefix, .line-width /deep/ .el-input__prefix {
+ height: 28px;
+ line-height: 28px;
+ color: #899FB7;
+ width: 100%;
+}
+
+.special-select /deep/ .el-input__prefix > div {
+ width: 100%;
+ height: 100%;
+}
+
+.upload-pic-row{
+ width: 420px;
+ margin-bottom: 10px;
+ .upload-pic-label{
+ text-align: right;
+ font-size: 14px;
+ color: #666666;
+ letter-spacing: 0;
+ font-weight: 400;
+ height: 30px;
+ line-height: 30px;
+ padding-right: 8px;
+ }
+ /deep/ .el-upload--text{
+ width: 100%;
+ .el-upload-dragger{
+ width: 100%;
+ }
+ }
+}
+.upload-pic-box{
+ width: 284px;
+ height: 30px;
+ text-align: center;
+ font-size: 14px;
+ color: #666666;
+ font-weight: 400;
+ line-height: 30px;
+ cursor: pointer;
+ .el-icon-plus{
+ color: #FA901C;
+ }
+}
+.top-tool-btn{
+ height: 32px;
+ width: 32px;
+ border: 1px solid $--primary-border-color;
+ outline: none;
+ border-radius: 2px;
+ background-color: #F9F9F9;
+ -webkit-transition: background-color linear .1s;
+ transition: background-color linear .1s;
+ padding: 0;
+}
+.top-tool-btn:hover{
+ background-color: #fff;
+}
+.top-tool-btn:focus{
+ background-color: #fff;
+ border-color: #FBCEA4;
+}
+.top-tool-btn:focus .nz-icon{
+ color: #FBCEA4;
+}
+.right-bottom-zoom{
+ position: absolute;
+ bottom: 30px;
+ right: 40px;
+ height: 90px;
+ width: 35px;
+ border: 1px solid #E7EAED;
+ box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+ display: flex;
+ flex-direction: column;
+ .zoom-option{
+ width: 100%;
+ height: 50%;
+ opacity: 0.42;
+ background: #FFF;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ }
+ .zoom-option:hover{
+ cursor: pointer;
+ }
+}
+.from-overview{
+ padding:0 !important;
+ width: calc(100% - 2px);
+ height: calc(100% - 2px) !important;
+ .nz-table2{
+ padding: 0 !important;
+ height: 100%;
+ }
+}
+.from-project{
+ padding: 0 !important;
+ .nz-table2{
+ padding: 0;
+ box-sizing: content-box;
+ height: calc(100% - 30px);
+ border: none;
+ }
+}
+/deep/ .el-collapse-item__arrow{
+ display: none;
+}
+.h100{
+ height: calc(100% - 30px) !important;
+}
+.context-menu {
+ position: fixed;
+ z-index: 10;
+}
+.right-bottom-zoom{
+ display: none;
+}
+
+.project-box:hover {
+ .right-bottom-zoom{
+ display: flex;
+ }
+}
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 0ba48f732..6c33526b8 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -260,23 +260,6 @@
@close="popDataShowUpdate('',true)">alert
-
-
-
-
-
-
-
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index da0ae0259..09a9ec9f1 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -279,13 +279,13 @@
-
+
diff --git a/nezha-fronted/static/config.json b/nezha-fronted/static/config.json
index 5f74f5d01..864f961ff 100644
--- a/nezha-fronted/static/config.json
+++ b/nezha-fronted/static/config.json
@@ -1 +1 @@
-{"baseUrl":"/", "version": "21.04"}
+{"baseUrl":"http://192.168.40.42:8080/nz-admin/", "version": "21.04"}