|
@@ -0,0 +1,498 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ :key="index"
|
|
|
+ v-for="(item,index) in content"
|
|
|
+ >
|
|
|
+ <p class="slave-relation-title">{{item.GraphTypeName}}</p>
|
|
|
+ <section
|
|
|
+ :key="child.GraphTypeId"
|
|
|
+ class="container"
|
|
|
+ v-for="(child,childIndex) in item.ChildGraphicTypeList"
|
|
|
+ >
|
|
|
+ <p class="relation-text">
|
|
|
+ <span @click="toDetail(child)" style="cursor:pointer;">
|
|
|
+ {{child.GraphTypeName}}
|
|
|
+ <i class="icon-zuzhiguanxi iconfont"/></span>
|
|
|
+ <span class="pic-code">图类型编码:{{child.GraphTypeCode}}</span>
|
|
|
+ <el-tooltip
|
|
|
+ :content="child.Note"
|
|
|
+ placement="top">
|
|
|
+ <i
|
|
|
+ @click="explain"
|
|
|
+ class="icon-shuoming iconfont"
|
|
|
+ />
|
|
|
+ </el-tooltip>
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <el-row :gutter="24">
|
|
|
+ <el-col
|
|
|
+ :key="relation.Id"
|
|
|
+ :span="8"
|
|
|
+ v-for="(relation,relIndex) in child.RelationTypeProjectList"
|
|
|
+ >
|
|
|
+ <el-card
|
|
|
+ class="card"
|
|
|
+ shadow="hover"
|
|
|
+ style="position: relative;"
|
|
|
+ >
|
|
|
+ <!-- border:none-->
|
|
|
+ <!--<div class="mask"></div>-->
|
|
|
+ <div style="overflow: hidden">
|
|
|
+ <el-tooltip
|
|
|
+ :content="relation.RelationTypeName"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <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>
|
|
|
+ </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-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="2">
|
|
|
+ <div class="grid-content">
|
|
|
+ <p class="thread"></p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9">
|
|
|
+ <div class="grid-content ">
|
|
|
+ <p class="line-number">连接数量</p>
|
|
|
+ <p :class="relation.count > 0? '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-"
|
|
|
+ class="sm-button"
|
|
|
+ >
|
|
|
+ <!--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 sm-button"
|
|
|
+ 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 sm-button"
|
|
|
+ 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>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ <RelationMaintain
|
|
|
+ :values="values"
|
|
|
+ :source="source"
|
|
|
+ ref="maintain"
|
|
|
+ :isComputed="isComputed"
|
|
|
+ :ManualMaintenance="ManualMaintenance"
|
|
|
+ :TableVisibleMoreLoading="TableVisibleMoreLoading"
|
|
|
+ @openComputed="openComputed"
|
|
|
+ @RelationType="RelationType"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import RelationMaintain from './Modal/RelationMaintain'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "cardList",
|
|
|
+ props: {
|
|
|
+ content: Array,
|
|
|
+ source: Array,
|
|
|
+ TableVisibleMoreLoading: Boolean
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ values: {
|
|
|
+ title: '关系维护',
|
|
|
+ cancel: '取消',
|
|
|
+ confirm: '确定',
|
|
|
+ back: '返回',
|
|
|
+ promptly: '立即计算',
|
|
|
+ placeholder: '请选择',
|
|
|
+ download: '下载模板(含数据)',
|
|
|
+ done: '完成',
|
|
|
+ underDesign: '高级配置页面正在设计中。。。',
|
|
|
+ autoComputed: '根据现有数据自动计算',
|
|
|
+ existComputed: '根据现有数据自动计算',
|
|
|
+ existTitle: '计算方向使用的源端和末端如下:',
|
|
|
+ originEquipment: '源端设备类:',
|
|
|
+ endEquipment: '末端设备类:',
|
|
|
+ device: '', //提示引导内容
|
|
|
+ tips: '', //请前往以下功能页面维护
|
|
|
+ optionTips: '', //请下载最新最新 xxxx 数据进行手动维护
|
|
|
+ currentNum: '当前关系数量:',
|
|
|
+ lastTime: '', //最后更新时间为
|
|
|
+ uploadTxt: '将Excel文件拖到此处,或<em>单击上传Excel文件<em>',
|
|
|
+ uploadTips: '上传的Excel数据将完全覆盖当前关系表(关系表先前数据不会保留)',
|
|
|
+ inHand: '数据文件处理中...',
|
|
|
+ dataFailed: '数据文件验证失败',
|
|
|
+ allUpdateSuccess: 'xxxx全部更新成功',
|
|
|
+ portionUpdateSuccess: ' xxxx关系部分更新成功',
|
|
|
+ downloadFile: ' 下载报告文件'
|
|
|
+ },
|
|
|
+ isComputed: {}, // 当前要计算的对象
|
|
|
+ ManualMaintenance: {},//手动编辑对象
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ explain() {
|
|
|
+ // alert('explain click')
|
|
|
+ },
|
|
|
+ RelationType() {
|
|
|
+ this.$emit('RelationType', this.isComputed.RelationType, this.isComputed.ZoneType)
|
|
|
+
|
|
|
+ },
|
|
|
+ computed(relation) {
|
|
|
+ this.isComputed = relation // 当前要计算的对象
|
|
|
+ if(relation.RelationType) {
|
|
|
+ this.$emit('calcSpecial', relation)
|
|
|
+ if (relation.IsSource) {
|
|
|
+ this.values.existComputed = `根据现有数据自动计算 <${relation.RelationTypeName}>`
|
|
|
+ this.$refs.maintain.dialogTableVisibleMore = true
|
|
|
+ this.$refs.maintain.showCascader()
|
|
|
+ } else {
|
|
|
+ this.values.autoComputed = `根据现有数据自动计算 <${relation.RelationTypeName}>`
|
|
|
+ this.$refs.maintain.dialogTableVisible = true
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$message.warning("设计中")
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ equipment() {
|
|
|
+ this.$refs.maintain.dialogEquipment = true
|
|
|
+ },
|
|
|
+ manual(relation) {
|
|
|
+ let {Manual, Prompting, RelationTypeName, ComputingTime} = relation;
|
|
|
+ let device = Prompting && Prompting.split(','),
|
|
|
+ tips = `请前往以下功能页面维护 <${RelationTypeName}>`,
|
|
|
+ optionTips = `请下载当前最新 <${RelationTypeName}> 数据进行手动维护`,
|
|
|
+ lastTime = `最后更新时间为 ${ComputingTime ? ComputingTime : ''}`
|
|
|
+
|
|
|
+ if (Manual === 2) {
|
|
|
+ this.values = {...this.values, device, tips}
|
|
|
+ this.$refs.maintain.dialogManualTip = true
|
|
|
+ }
|
|
|
+ if (Manual === 3) {
|
|
|
+ if (relation.RelationType) {
|
|
|
+ this.values = {...this.values, optionTips, lastTime}
|
|
|
+ // this.$refs.maintain.dialogManualOption = true //导出excel 弹窗
|
|
|
+ this.$router.push({
|
|
|
+ path:"relationShip"
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$message.warning("设计中")
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.ManualMaintenance = relation
|
|
|
+ },
|
|
|
+
|
|
|
+ openComputed(result) {
|
|
|
+ this.$emit('openComputed', result)
|
|
|
+ },
|
|
|
+
|
|
|
+ //空间连接关系详情
|
|
|
+ toDetail(detail){
|
|
|
+ return
|
|
|
+ this.$router.push({
|
|
|
+ name: 'relationDetail',
|
|
|
+ query: {
|
|
|
+ type: detail.GraphTypeCode,
|
|
|
+ RelationTypeProjectList: detail.RelationTypeProjectList
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {RelationMaintain}
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ @color-text: #333;
|
|
|
+ @font-big: 600;
|
|
|
+ @font-small: 12px;
|
|
|
+ @font-code: #AAAAAA;
|
|
|
+ @pos-relative: relative;
|
|
|
+ @pos-absolute: absolute;
|
|
|
+ @pos-zero: 0;
|
|
|
+ @5px: 5px;
|
|
|
+
|
|
|
+ .slave-relation-title {
|
|
|
+ color: @font-code;
|
|
|
+ font-weight: 600;
|
|
|
+ border-bottom: 1px dashed @font-code;
|
|
|
+ padding-bottom: @5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ @media (max-width: 1500px) {
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sm-button {
|
|
|
+ height: 30px;
|
|
|
+ width: 30px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .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 {
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .relation-text {
|
|
|
+ overflow: hidden;
|
|
|
+ margin-top: 10px;
|
|
|
+ color: @color-text;
|
|
|
+ border-left: 8px solid @color-text;
|
|
|
+ text-indent: 10px;
|
|
|
+ font-weight: @font-big;
|
|
|
+
|
|
|
+ .pic-code {
|
|
|
+ font-size: @font-small;
|
|
|
+ color: @font-code;
|
|
|
+ margin-left: @5px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card {
|
|
|
+ position: @pos-relative;
|
|
|
+
|
|
|
+ .mask {
|
|
|
+ background: rgba(255, 255, 255, .6);
|
|
|
+ position: @pos-absolute;
|
|
|
+ top: @pos-zero;
|
|
|
+ left: @pos-zero;
|
|
|
+ right: @pos-zero;
|
|
|
+ bottom: @pos-zero;
|
|
|
+ user-select: none;
|
|
|
+ z-index: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .relation-title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: @font-big;
|
|
|
+ margin-right: 10px;
|
|
|
+
|
|
|
+ .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;
|
|
|
+ float: right;
|
|
|
+ color: #555;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .asc {
|
|
|
+ font-size: @font-small;
|
|
|
+ color: @font-code;
|
|
|
+ }
|
|
|
+
|
|
|
+ .object {
|
|
|
+ font-size: @font-small;
|
|
|
+ color: @font-code;
|
|
|
+ font-weight: @font-big;
|
|
|
+ }
|
|
|
+
|
|
|
+ .group {
|
|
|
+ color: @color-text;
|
|
|
+ font-weight: @font-big;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line-number {
|
|
|
+ font-size: @font-small;
|
|
|
+ color: @font-code;
|
|
|
+ font-weight: @font-big;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line-number-show {
|
|
|
+ color: @color-text;
|
|
|
+ font-weight: @font-big;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line-number-hide {
|
|
|
+ color: @font-code;
|
|
|
+ font-weight: @font-big;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ article {
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .last-computed {
|
|
|
+ overflow: hidden;
|
|
|
+ color: @font-code;
|
|
|
+
|
|
|
+ .float-right {
|
|
|
+ float: right;
|
|
|
+ margin-left: @5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .is-dot {
|
|
|
+ margin-top: 7px;
|
|
|
+ margin-right: @5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|