NEZ-805 fix ：diagram 图表bug
This commit is contained in:
zhangyu
@@ -260,23 +260,6 @@
|
||||
@close="popDataShowUpdate('',true)">alert
|
||||
</alertTable>
|
||||
</transition>
|
||||
<!--preview-->
|
||||
<el-dialog
|
||||
:visible.sync="previewShow"
|
||||
:width="'80%'"
|
||||
:before-close="previewBeforeClose"
|
||||
>
|
||||
<div style="width: calc(80vw - 40px);height: 80vh">
|
||||
<topologyPrev
|
||||
v-if="previewShow"
|
||||
:obj="obj"
|
||||
:topoPrevDataS="topoPrevData"
|
||||
:fromOverView="false"
|
||||
:fromPrev="true"
|
||||
:topologyIndexF="1">
|
||||
</topologyPrev>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--Custom picture-->
|
||||
<el-dialog
|
||||
:title="title"
|
||||
@@ -371,7 +354,6 @@ import endpointTable from './popData/endpointTable'
|
||||
import topoTooltip from './L5/topoTooltip'
|
||||
import { getMetricTypeValue } from '../js/tools'
|
||||
import bus from '../../../libs/bus'
|
||||
import topologyPrev from './topologyPrev'
|
||||
// 注册到画布
|
||||
registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
|
||||
registerNode('myCube', myCubec, myCubeAnchors, null, null)
|
||||
@@ -517,7 +499,6 @@ export default {
|
||||
assetTable,
|
||||
endpointTable,
|
||||
topoTooltip,
|
||||
topologyPrev,
|
||||
CanvasContextMenu
|
||||
},
|
||||
props: {
|
||||
@@ -819,7 +800,6 @@ export default {
|
||||
if (!this.imgInit) {
|
||||
return
|
||||
}
|
||||
clearInterval(timer)
|
||||
const promiseArr = []
|
||||
const self = this
|
||||
for (let i = 0; i < data.pens.length; i++) {
|
||||
@@ -878,6 +858,7 @@ export default {
|
||||
})
|
||||
self.saveData = { ...data }
|
||||
resolve(data)
|
||||
clearInterval(timer)
|
||||
})
|
||||
}, 100)
|
||||
}
|
||||
@@ -2313,527 +2294,5 @@ export default {
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
/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;
|
||||
}
|
||||
}
|
||||
.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);
|
||||
.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-left: 0;
|
||||
.nz-table2{
|
||||
padding: 0 5px 10px 5px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
/deep/ .el-collapse-item__arrow{
|
||||
display: none;
|
||||
}
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
}
|
||||
@import "../project/topology.scss";
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user