|
@@ -36,96 +36,114 @@
|
|
|
>
|
|
|
<!-- border:none-->
|
|
|
<!--<div class="mask"></div>-->
|
|
|
- <p class="relation-title">
|
|
|
- {{relation.RelationTypeName}}
|
|
|
- <span class="asc">边类型编码:{{relation.RelationTypeCode}}</span>
|
|
|
+ <div style="overflow: hidden">
|
|
|
<el-tooltip
|
|
|
- :content="relation.Note"
|
|
|
+ :content="relation.RelationTypeName"
|
|
|
placement="top"
|
|
|
- style="z-index: 3;position:relative;"
|
|
|
>
|
|
|
- <i class="iconfont icon-warn icon"/>
|
|
|
+ <p class="relation-title reset-test reset-title">{{relation.RelationTypeName}}</p>
|
|
|
</el-tooltip>
|
|
|
- </p>
|
|
|
- <article>
|
|
|
- <el-col
|
|
|
- :span="13"
|
|
|
- class="main-object "
|
|
|
- >
|
|
|
- <p class="object">主要连接对象</p>
|
|
|
- <p class="group">{{relation.ConneObject}}</p>
|
|
|
- </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="启动计算"
|
|
|
+ :content="relation.RelationTypeCode"
|
|
|
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>
|
|
|
+ <p class="asc reset-title reset-test">边类型编码:{{relation.RelationTypeCode}}</p>
|
|
|
</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"
|
|
|
+ <p class="relation-title-icon reset-test fr">
|
|
|
+ <el-tooltip
|
|
|
+ :content="relation.Note"
|
|
|
+ placement="top"
|
|
|
+ style="z-index: 3;position:relative;"
|
|
|
>
|
|
|
- </el-button>
|
|
|
+ <i class="iconfont icon-warn icon"/>
|
|
|
+ </el-tooltip>
|
|
|
+ </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>
|
|
@@ -187,7 +205,7 @@
|
|
|
downloadFile: ' 下载报告文件'
|
|
|
},
|
|
|
isComputed: {}, // 当前要计算的对象
|
|
|
- ManualMaintenance:{},//手动编辑对象
|
|
|
+ ManualMaintenance: {},//手动编辑对象
|
|
|
}
|
|
|
},
|
|
|
computed: {},
|
|
@@ -197,7 +215,7 @@
|
|
|
// alert('explain click')
|
|
|
},
|
|
|
RelationType() {
|
|
|
- this.$emit('RelationType',this.isComputed.RelationType, this.isComputed.ZoneType)
|
|
|
+ this.$emit('RelationType', this.isComputed.RelationType, this.isComputed.ZoneType)
|
|
|
|
|
|
},
|
|
|
computed(relation) {
|
|
@@ -218,16 +236,16 @@
|
|
|
manual(relation) {
|
|
|
let {Manual, Prompting, RelationTypeName, ComputingTime} = relation;
|
|
|
let device = Prompting && Prompting.split(','),
|
|
|
- tips= `请前往以下功能页面维护 <${RelationTypeName}>`,
|
|
|
- optionTips= `请下载最新最新 <${RelationTypeName}> 数据进行手动维护`,
|
|
|
- lastTime=`最后更新时间为 ${ComputingTime ? ComputingTime : ''}`
|
|
|
+ tips = `请前往以下功能页面维护 <${RelationTypeName}>`,
|
|
|
+ optionTips = `请下载最新最新 <${RelationTypeName}> 数据进行手动维护`,
|
|
|
+ lastTime = `最后更新时间为 ${ComputingTime ? ComputingTime : ''}`
|
|
|
|
|
|
if (Manual === 2) {
|
|
|
- this.values={...this.values,device,tips}
|
|
|
+ this.values = {...this.values, device, tips}
|
|
|
this.$refs.maintain.dialogManualTip = true
|
|
|
}
|
|
|
if (Manual === 3) {
|
|
|
- this.values={...this.values,optionTips,lastTime}
|
|
|
+ this.values = {...this.values, optionTips, lastTime}
|
|
|
this.$refs.maintain.dialogManualOption = true
|
|
|
}
|
|
|
this.ManualMaintenance = relation
|
|
@@ -252,6 +270,7 @@
|
|
|
@pos-absolute: absolute;
|
|
|
@pos-zero: 0;
|
|
|
@5px: 5px;
|
|
|
+
|
|
|
.slave-relation-title {
|
|
|
color: @font-code;
|
|
|
font-weight: 600;
|
|
@@ -260,15 +279,75 @@
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
+ @media (max-width: 1366px) {
|
|
|
+ .relation-title {
|
|
|
+ max-width: 160px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .group {
|
|
|
+ white-space: normal !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .asc {
|
|
|
+ max-width: 108px;
|
|
|
+ }
|
|
|
+ .thread{
|
|
|
+ margin-left: 5px !important;
|
|
|
+ }
|
|
|
+ /deep/.el-card__body {
|
|
|
+ padding: 18px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-row {
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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 {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
.el-card {
|
|
|
- /*border: 1px solid #000;*/
|
|
|
margin: 10px 0;
|
|
|
}
|
|
|
|
|
|
- /*.el-button {*/
|
|
|
- /* border: 1px solid #000;*/
|
|
|
- /*}*/
|
|
|
-
|
|
|
.relation-text {
|
|
|
overflow: hidden;
|
|
|
margin-top: 10px;
|
|
@@ -303,11 +382,20 @@
|
|
|
.relation-title {
|
|
|
font-size: 20px;
|
|
|
font-weight: @font-big;
|
|
|
+ margin-right: 10px;
|
|
|
|
|
|
- .asc {
|
|
|
- font-size: @font-small;
|
|
|
- color: @font-code;
|
|
|
+ .icon {
|
|
|
+ display: block;
|
|
|
+ float: right;
|
|
|
+ color: #555;
|
|
|
+ font-size: 18px;
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .relation-title-icon {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: @font-big;
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
.icon {
|
|
|
display: block;
|
|
@@ -317,34 +405,40 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .main-object {
|
|
|
- margin: 15px 0;
|
|
|
- padding-left: 0 !important;
|
|
|
+ .asc {
|
|
|
+ font-size: @font-small;
|
|
|
+ color: @font-code;
|
|
|
+ }
|
|
|
+ .object {
|
|
|
+ font-size: @font-small;
|
|
|
+ color: @font-code;
|
|
|
+ font-weight: @font-big;
|
|
|
+ }
|
|
|
|
|
|
- &: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;
|
|
|
}
|