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>
|
||||
|
||||
@@ -50,6 +50,7 @@
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<!--metric-->
|
||||
<transition name="el-zoom-in-top">
|
||||
<div v-show="selection.pen.data.valueMappingShow">
|
||||
<el-row :key="index" class="element-item form-row-item" style=""
|
||||
v-for="(item,index) in selection.pen.data.expressArr">
|
||||
@@ -168,9 +169,9 @@
|
||||
<i class="nz-icon nz-icon-plus"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</transition>
|
||||
<!--tooltip-->
|
||||
<el-row class="form-row-title">
|
||||
<el-row class="form-row-title" :style="{'margin-top': '10px'}">
|
||||
{{$t('dashboard.panel.chartForm.tooltip')}}
|
||||
<el-form-item class="float-right" prop="type" style="height: 100%;">
|
||||
<el-switch
|
||||
@@ -181,7 +182,7 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="tooltip-box" v-show="selection.pen.data.tooltipShow">
|
||||
<!--title-->
|
||||
<el-form-item :label="$t('project.topology.title')" class="full-form-item" prop="type">
|
||||
@@ -201,16 +202,6 @@
|
||||
>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
<!-- <!–displayChart–>-->
|
||||
<!-- <el-form-item :label="$t('dashboard.panel.chartForm.displayChart')" class="half-form-item" prop="type">-->
|
||||
<!-- <el-switch-->
|
||||
<!-- v-model="selection.pen.data.displayChart"-->
|
||||
<!-- :active-value="true"-->
|
||||
<!-- :inactive-value="false"-->
|
||||
<!-- active-color="#ee9d3f"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!--chart type-->
|
||||
<el-form-item :label="$t('dashboard.panel.chartForm.type')" class="half-form-item" prop="type">
|
||||
<el-select class="right-box-row-with-btn" :placeholder="$t('el.select.placeholder')" popper-class="chart-box-dropdown-small"
|
||||
size="mini"
|
||||
@@ -221,7 +212,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!--value mapping-->
|
||||
<el-row :key="index" class="element-item form-row-item" style=""
|
||||
<el-row :key="index" class="element-item form-row-item" style="width: calc(100% - 60px);"
|
||||
v-for="(item,index) in selection.pen.data.expressAllArr">
|
||||
<promql-input
|
||||
:expression-list="selection.pen.data.expressAllArr"
|
||||
@@ -253,7 +244,8 @@
|
||||
</template>
|
||||
</el-row>
|
||||
<div class="nz-icon-minus-position">
|
||||
<span class="nz-icon-minus-medium">
|
||||
<span class="nz-icon-minus-medium" style="box-sizing: border-box;
|
||||
padding: 10px;">
|
||||
<i @click="removeExpression(index)" class="nz-icon nz-icon-minus"></i>
|
||||
</span>
|
||||
<span class="nz-icon-copy">
|
||||
@@ -265,7 +257,7 @@
|
||||
<i class="nz-icon nz-icon-plus"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</transition>
|
||||
<!-- <!–link–>-->
|
||||
<!-- <el-row class="form-row-title">-->
|
||||
<!-- {{$t('project.topology.link')}}-->
|
||||
@@ -628,7 +620,7 @@
|
||||
v-model.number="selection.pen.data.lineWidth"
|
||||
:readonly="readonly"
|
||||
required
|
||||
:min="selection.pen.type?1:(selection.pen.name==='rectangleImg' ||selection.pen.name==='myCube'?0:1)"
|
||||
:min="selection.pen.type?1:(selection.pen.name==='rectangleImg2' || selection.pen.name==='rectangleImg' || selection.pen.name==='myCube' ?0:1)"
|
||||
@change="onChange('lineWidth')"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
@@ -717,6 +709,72 @@
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<!-- 选中多个-->
|
||||
<div v-else-if="selection.pens" class="">
|
||||
<el-collapse v-model="activeNames">
|
||||
<!--对齐方式-->
|
||||
<el-collapse-item title="对齐" name="1" v-if="selection.pens">
|
||||
<label class="hover pointer mr10 iconLabel" v-for="item in nodesAlign" :title="item.desc">
|
||||
<i :class="['iconfont','iconfontSize16',`icon-align-${item.value}`]"
|
||||
@click="onNodesAlign(item.value)"></i>
|
||||
</label>
|
||||
</el-collapse-item>
|
||||
<!--排版-->
|
||||
<el-collapse-item title="排版" name="2" v-if="selection.pens">
|
||||
<div class="mt10">
|
||||
<div class="flex middle mb10">
|
||||
<label>最大宽度：</label>
|
||||
<div class="full pr10">
|
||||
<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
|
||||
v-model.number="layout.maxWidth" title="超出最大宽度换行"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex middle mb10">
|
||||
<label>节点宽度：</label>
|
||||
<div class="full pr10">
|
||||
<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
|
||||
v-model.number="layout.nodeWidth" title="固定每个节点的宽度"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex middle mb10">
|
||||
<label>节点高度：</label>
|
||||
<div class="full pr10">
|
||||
<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
|
||||
v-model.number="layout.nodeHeight" title="固定每个节点的高度"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex middle mb10">
|
||||
<label>水平个数：</label>
|
||||
<div class="full pr10">
|
||||
<el-input-number :precision="2" type="number" controls-position="right" class="input" size="small"
|
||||
v-model.number="layout.maxCount"
|
||||
title="超出最大个数，将自动计算水平间距（下面水平间距设置将无效）"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex middle mb10">
|
||||
<label>水平间距：</label>
|
||||
<div class="full pr10">
|
||||
<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
|
||||
v-model.number="layout.spaceWidth" title="节点之间水平间距（px）"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex middle mb10">
|
||||
<label>垂直间距：</label>
|
||||
<div class="full pr10">
|
||||
<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
|
||||
v-model.number="layout.spaceHeight" title="节点之间垂直间距（px）"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex middle">
|
||||
<label></label>
|
||||
<div class="full pr10">
|
||||
<button class="button primary" @click="onLayout">开始排版</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
<!-- 选中为空 -->
|
||||
<div v-else style="height: 100%">
|
||||
<div class="project-title">
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
}
|
||||
/* 自定义图片组件 */
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
<div class="scale-num-pop" style=" width: 91px;min-width: 91px">
|
||||
<div>缩放级别</div>
|
||||
@@ -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)
|
||||
|
||||
543
nezha-fronted/src/components/common/project/topology.scss
Normal file
543
nezha-fronted/src/components/common/project/topology.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -279,13 +279,13 @@
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
<!--Align-->
|
||||
<el-form-item v-if="editChart.type ==='diagram'" :label="$t('dashboard.panel.chartForm.align')" class="form-item--half-width" prop="unit">
|
||||
<!--<el-form-item v-if="editChart.type ==='diagram'" :label="$t('dashboard.panel.chartForm.align')" class="form-item--half-width" prop="unit">
|
||||
<el-select id="chart-box-statistics" v-model="editChart.param.align" placeholder="" popper-class="chart-box-dropdown-mini prevent-clickoutside" size="small" @change="$forceUpdate">
|
||||
<el-option v-for="item in alignList" :key="item.value" :label="item.label" :value="item.value">
|
||||
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form-item>-->
|
||||
<!--lock-->
|
||||
<el-form-item v-if="editChart.type ==='diagram'" :label="$t('dashboard.panel.chartForm.lock')" class="form-item--half-width" prop="unit">
|
||||
<el-select id="chart-box-statistics" v-model="editChart.param.lock" placeholder="" popper-class="chart-box-dropdown-mini prevent-clickoutside" size="small" @change="$forceUpdate">
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"baseUrl":"/", "version": "21.04"}
|
||||
{"baseUrl":"http://192.168.40.42:8080/nz-admin/", "version": "21.04"}
|
||||
|
||||
Reference in New Issue
Block a user