|
|
@@ -41,111 +41,109 @@
|
|
|
:content="relation.RelationTypeName"
|
|
|
placement="top"
|
|
|
>
|
|
|
- <p class="relation-title reset-test reset-title">{{relation.RelationTypeName}}</p>
|
|
|
+ <p class="relation-title reset-test reset-title">{{relation.RelationTypeName}}</p>
|
|
|
</el-tooltip>
|
|
|
<el-tooltip
|
|
|
:content="relation.RelationTypeCode"
|
|
|
placement="top"
|
|
|
>
|
|
|
- <p class="asc reset-title reset-test">边类型编码：{{relation.RelationTypeCode}}</p>
|
|
|
+ <p class="asc reset-title reset-test">边类型编码：{{relation.RelationTypeCode}}</p>
|
|
|
</el-tooltip>
|
|
|
- <p class="relation-title-icon reset-test fr">
|
|
|
- <el-tooltip
|
|
|
- :content="relation.Note"
|
|
|
- placement="top"
|
|
|
- style="z-index: 3;position:relative;"
|
|
|
- >
|
|
|
- <i class="iconfont icon-warn icon"/>
|
|
|
- </el-tooltip>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <article>
|
|
|
- <el-col
|
|
|
- :span="13"
|
|
|
- class="main-object "
|
|
|
- >
|
|
|
- <p class="object">主要连接对象</p>
|
|
|
+ <p class="relation-title-icon reset-test fr">
|
|
|
<el-tooltip
|
|
|
- :content="relation.ConneObject"
|
|
|
+ :content="relation.Note"
|
|
|
placement="top"
|
|
|
+ style="z-index: 3;position:relative;"
|
|
|
>
|
|
|
- <p
|
|
|
- class="group reset-title"
|
|
|
- :title="relation.ConneObject"
|
|
|
- >{{relation.ConneObject}}</p>
|
|
|
+ <i class="iconfont icon-warn icon"/>
|
|
|
</el-tooltip>
|
|
|
- </el-col>
|
|
|
- <el-col
|
|
|
- :span="1"
|
|
|
- class="main-object ">
|
|
|
- </el-col>
|
|
|
- <el-col
|
|
|
- :span="10"
|
|
|
- class="main-object"
|
|
|
- >
|
|
|
- <p class="line-number">连接数量</p>
|
|
|
- <p class="line-number">{{relation.count}}</p>
|
|
|
- </el-col>
|
|
|
- </article>
|
|
|
- <p class="last-computed">
|
|
|
- <span v-show="relation.ComputationalState === 3 || relation.ComputationalState === 4">关系计算中...</span>
|
|
|
- <span v-show="relation.ComputationalState === 5">计算失败</span>
|
|
|
- <span v-show="relation.ComputingTime">最后一次计算时间 {{relation.ComputingTime}}</span>
|
|
|
- <el-tooltip
|
|
|
- content="启动计算"
|
|
|
- placement="top"
|
|
|
- >
|
|
|
- <el-badge
|
|
|
- class="item float-right"
|
|
|
- :is-dot="relation.ComputationalState === 2"
|
|
|
- >
|
|
|
- <el-button
|
|
|
- @click="computed(relation)"
|
|
|
- :disabled="!relation.IsSource && !relation.IsAutomatic"
|
|
|
- circle
|
|
|
- type="primary"
|
|
|
- plain
|
|
|
- icon="iconfont icon-changyongtubiao-mianxing-"
|
|
|
-
|
|
|
- >
|
|
|
- <!--style="background: #000;color: #fff"-->
|
|
|
- </el-button>
|
|
|
- </el-badge>
|
|
|
- </el-tooltip>
|
|
|
- <el-tooltip
|
|
|
- content="手动编辑"
|
|
|
- placement="top"
|
|
|
- >
|
|
|
- <el-button
|
|
|
- :disabled="relation.Manual === 1"
|
|
|
- :style="{'border':(relation.Manual=== 1? '1px solid #DCDFE6' :'')}"
|
|
|
- @click="manual(relation)"
|
|
|
- circle
|
|
|
- class="float-right"
|
|
|
- type="primary"
|
|
|
- plain
|
|
|
- icon="iconfont icon-bianji"
|
|
|
- >
|
|
|
- </el-button>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <article>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="13" >
|
|
|
+ <div class="grid-content">
|
|
|
+ <p class="object">主要连接对象</p>
|
|
|
+ <el-tooltip
|
|
|
+ :content="relation.ConneObject"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <p class="group reset-title">{{relation.ConneObject}}</p>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1">
|
|
|
+ <div class="grid-content">
|
|
|
+ <p class="thread"></p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <div class="grid-content ">
|
|
|
+ <p class="line-number">连接数量</p>
|
|
|
+ <p :class="relation.count > 1? 'line-number-show' :'line-number-hide'">{{relation.count}}</p>
|
|
|
+ <p class="last-computed">
|
|
|
+ <span v-show="relation.ComputationalState === 3 || relation.ComputationalState === 4">关系计算中...</span>
|
|
|
+ <span v-show="relation.ComputationalState === 5">计算失败</span>
|
|
|
+ <span v-show="relation.ComputingTime">最后一次计算时间 {{relation.ComputingTime}}</span>
|
|
|
+ <el-tooltip
|
|
|
+ content="启动计算"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <el-badge
|
|
|
+ class="item float-right"
|
|
|
+ :is-dot="relation.ComputationalState === 2"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ @click="computed(relation)"
|
|
|
+ :disabled="!relation.IsSource && !relation.IsAutomatic"
|
|
|
+ circle
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ icon="iconfont icon-changyongtubiao-mianxing-"
|
|
|
|
|
|
- </el-tooltip>
|
|
|
- <el-tooltip
|
|
|
- content="设定设备对象源/末端"
|
|
|
- placement="top"
|
|
|
- v-if="relation.IsSource"
|
|
|
- >
|
|
|
- <el-button
|
|
|
- @click="equipment"
|
|
|
- type="primary"
|
|
|
- plain
|
|
|
- circle
|
|
|
- class="float-right"
|
|
|
- icon="iconfont icon-23 "
|
|
|
- style="transform: rotate(90deg);"
|
|
|
- >
|
|
|
- </el-button>
|
|
|
- </el-tooltip>
|
|
|
- </p>
|
|
|
+ >
|
|
|
+ <!--style="background: #000;color: #fff"-->
|
|
|
+ </el-button>
|
|
|
+ </el-badge>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip
|
|
|
+ content="手动编辑"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ :disabled="relation.Manual === 1"
|
|
|
+ :style="{'border':(relation.Manual=== 1? '1px solid #DCDFE6' :'')}"
|
|
|
+ @click="manual(relation)"
|
|
|
+ circle
|
|
|
+ class="float-right"
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ icon="iconfont icon-bianji"
|
|
|
+ >
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip
|
|
|
+ content="设定设备对象源/末端"
|
|
|
+ placement="top"
|
|
|
+ v-if="relation.IsSource"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ @click="equipment"
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ circle
|
|
|
+ class="float-right"
|
|
|
+ icon="iconfont icon-23 "
|
|
|
+ style="transform: rotate(90deg);"
|
|
|
+ >
|
|
|
+ </el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </article>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -282,45 +280,74 @@
|
|
|
|
|
|
.container {
|
|
|
@media (max-width: 1366px) {
|
|
|
- .relation-title,.group{
|
|
|
- max-width:150px ;
|
|
|
+ .relation-title {
|
|
|
+ max-width: 160px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .group {
|
|
|
+ white-space: normal !important;
|
|
|
}
|
|
|
- .asc{
|
|
|
- max-width: 180px;
|
|
|
+
|
|
|
+ .asc {
|
|
|
+ max-width: 108px;
|
|
|
+ }
|
|
|
+ .thread{
|
|
|
+ margin-left: 5px !important;
|
|
|
+ }
|
|
|
+ /deep/.el-card__body {
|
|
|
+ padding: 18px !important;
|
|
|
}
|
|
|
}
|
|
|
+ .el-row {
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
|
- @media (max-width: 1440px) {
|
|
|
- .relation-title,.group{
|
|
|
- max-width:150px ;
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
}
|
|
|
- .asc{
|
|
|
- max-width: 180px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-col {
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-content {
|
|
|
+ border-radius: 4px;
|
|
|
+ min-height: 36px;
|
|
|
+
|
|
|
+ .thread {
|
|
|
+ border-left: 1px solid @font-code;
|
|
|
+ margin-left: 10px;
|
|
|
+ min-height: 36px;
|
|
|
+ margin-top: 6px;
|
|
|
}
|
|
|
}
|
|
|
- .reset-title{
|
|
|
+
|
|
|
+ .row-bg {
|
|
|
+ padding: 10px 0;
|
|
|
+ background-color: #f9fafc;
|
|
|
+ }
|
|
|
+
|
|
|
+ .reset-title {
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
- .reset-test{
|
|
|
- float: left;
|
|
|
- text-align: center;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- }
|
|
|
- .fr{
|
|
|
+
|
|
|
+ .reset-test {
|
|
|
+ float: left;
|
|
|
+ text-align: center;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fr {
|
|
|
float: right;
|
|
|
}
|
|
|
+
|
|
|
.el-card {
|
|
|
- /*border: 1px solid #000;*/
|
|
|
margin: 10px 0;
|
|
|
}
|
|
|
|
|
|
- /*.el-button {*/
|
|
|
- /* border: 1px solid #000;*/
|
|
|
- /*}*/
|
|
|
-
|
|
|
.relation-text {
|
|
|
overflow: hidden;
|
|
|
margin-top: 10px;
|
|
|
@@ -356,6 +383,7 @@
|
|
|
font-size: 20px;
|
|
|
font-weight: @font-big;
|
|
|
margin-right: 10px;
|
|
|
+
|
|
|
.icon {
|
|
|
display: block;
|
|
|
float: right;
|
|
|
@@ -363,10 +391,12 @@
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.relation-title-icon {
|
|
|
font-size: 20px;
|
|
|
font-weight: @font-big;
|
|
|
overflow: hidden;
|
|
|
+
|
|
|
.icon {
|
|
|
display: block;
|
|
|
float: right;
|
|
|
@@ -374,39 +404,41 @@
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.asc {
|
|
|
font-size: @font-small;
|
|
|
color: @font-code;
|
|
|
}
|
|
|
+ .object {
|
|
|
+ font-size: @font-small;
|
|
|
+ color: @font-code;
|
|
|
+ font-weight: @font-big;
|
|
|
+ }
|
|
|
|
|
|
- .main-object {
|
|
|
- margin: 15px 0;
|
|
|
- padding-left: 0 !important;
|
|
|
-
|
|
|
- &:nth-child(even) {
|
|
|
- border-left: 1px solid @font-code;
|
|
|
- margin-top: 27px;
|
|
|
- }
|
|
|
+ .group {
|
|
|
+ color: @color-text;
|
|
|
+ font-weight: @font-big;
|
|
|
+ }
|
|
|
|
|
|
- .object {
|
|
|
- font-size: @font-small;
|
|
|
- color: @font-code;
|
|
|
- font-weight: @font-big;
|
|
|
- }
|
|
|
+ .line-number {
|
|
|
+ font-size: @font-small;
|
|
|
+ color: @font-code;
|
|
|
+ font-weight: @font-big;
|
|
|
+ }
|
|
|
|
|
|
- .group {
|
|
|
- color: @color-text;
|
|
|
- font-weight: @font-big;
|
|
|
- }
|
|
|
+ .line-number-show {
|
|
|
+ color: @color-text;
|
|
|
+ font-weight: @font-big;
|
|
|
+ }
|
|
|
|
|
|
- .line-number {
|
|
|
- font-size: @font-small;
|
|
|
- color: @font-code;
|
|
|
- font-weight: @font-big;
|
|
|
- }
|
|
|
+ .line-number-hide {
|
|
|
+ color: @font-code;
|
|
|
+ font-weight: @font-big;
|
|
|
}
|
|
|
|
|
|
|
|
|
+
|
|
|
+
|
|
|
article {
|
|
|
overflow: hidden;
|
|
|
}
|
