ibms/src/components/relation/overview/CardList.vue

<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>