NEZ-805 fix ：diagram 图表bug
This commit is contained in:
zhangyu
@@ -317,7 +317,7 @@ import imgDefault from '@/components/common/project/L5/services/img'
|
||||
import {
|
||||
Tools,
|
||||
canvasRegister,
|
||||
imageTemp,
|
||||
imageTemp2,
|
||||
myShape,
|
||||
myAnchors,
|
||||
myIconRect2,
|
||||
@@ -340,7 +340,7 @@ import { getMetricTypeValue } from '../js/tools'
|
||||
import bus from '../../../libs/bus'
|
||||
import CanvasContextMenu from '@/components/common/project/L5/CanvasContextMenu'
|
||||
// 注册到画布
|
||||
registerNode('rectangleImg', myShape, myAnchors, myIconRect2, myTextRect2)
|
||||
registerNode('rectangleImg2', myShape, myAnchors, myIconRect2, myTextRect2)
|
||||
registerNode('myCube', myCubec, myCubeAnchors, null, null)
|
||||
|
||||
const canvasOptions = {
|
||||
@@ -616,6 +616,7 @@ export default {
|
||||
})
|
||||
Promise.all(promiseArr).then((res) => {
|
||||
getTopology(this.topologyIndex).open(data)
|
||||
console.log(data)
|
||||
getTopology(this.topologyIndex).lock(1)
|
||||
this.objChange = false
|
||||
let flag = false
|
||||
@@ -1016,6 +1017,7 @@ export default {
|
||||
/* topology 方法 */
|
||||
onDrag (event, node) {
|
||||
this.dragFlag = false
|
||||
node.data.text = ''
|
||||
setTimeout(() => {
|
||||
this.dragFlag = true
|
||||
}, 100)
|
||||
@@ -1486,9 +1488,9 @@ export default {
|
||||
const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
|
||||
if (group) {
|
||||
group.children.push({
|
||||
...imageTemp,
|
||||
...imageTemp2,
|
||||
data: {
|
||||
...imageTemp.data,
|
||||
...imageTemp2.data,
|
||||
text: res.data.imageName,
|
||||
image: data,
|
||||
imageId: res.data.id,
|
||||
@@ -1499,9 +1501,9 @@ export default {
|
||||
this.tools.push({
|
||||
group: this.uploadPic.unit,
|
||||
children: [{
|
||||
...imageTemp,
|
||||
...imageTemp2,
|
||||
data: {
|
||||
...imageTemp.data,
|
||||
...imageTemp2.data,
|
||||
text: res.data.imageName,
|
||||
image: data,
|
||||
imageId: res.data.id,
|
||||
@@ -1575,9 +1577,9 @@ export default {
|
||||
const group = this.tools.find(tool => tool.group === item.unit)
|
||||
if (group) {
|
||||
group.children.push({
|
||||
...imageTemp,
|
||||
...imageTemp2,
|
||||
data: {
|
||||
...imageTemp.data,
|
||||
...imageTemp2.data,
|
||||
text: item.imageName,
|
||||
image: res2[index],
|
||||
imageId: item.id,
|
||||
@@ -1588,9 +1590,9 @@ export default {
|
||||
this.tools.push({
|
||||
group: item.unit,
|
||||
children: [{
|
||||
...imageTemp,
|
||||
...imageTemp2,
|
||||
data: {
|
||||
...imageTemp.data,
|
||||
...imageTemp2.data,
|
||||
text: item.imageName,
|
||||
image: res2[index],
|
||||
imageId: item.id,
|
||||
@@ -1900,7 +1902,7 @@ export default {
|
||||
nodeDefaultWidth (nodeName) {
|
||||
switch (nodeName) {
|
||||
case 'myCube':
|
||||
case 'rectangleImg':
|
||||
case 'rectangleImg2':
|
||||
return 0
|
||||
default:
|
||||
return 1
|
||||
@@ -2144,534 +2146,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);
|
||||
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;
|
||||
}
|
||||
@import "../project/topology.scss";
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user