shaun-sheep 5 年之前
父节点
当前提交
2b89463ad7
共有 2 个文件被更改,包括 829 次插入690 次删除
  1. 433 329
      src/components/relation/overview/CardList.vue
  2. 396 361
      src/components/relation/overview/Modal/RelationMaintain.vue

+ 433 - 329
src/components/relation/overview/CardList.vue

@@ -1,359 +1,463 @@
 <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"
+  <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">
+          {{child.GraphTypeName}}
+          <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;"
             >
-                <p class="relation-text">
-                    {{child.GraphTypeName}}
-                    <span class="pic-code">图类型编码:{{child.GraphTypeCode}}</span>
-                    <el-tooltip
-                        :content="child.Note"
-                        placement="top">
-                        <i
-                            @click="explain"
-                            class="icon-shuoming iconfont"
-                        />
-                    </el-tooltip>
+              <!-- 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="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-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;"
+                            >
+                              <!--style="background: #000;color: #fff"-->
+                            </el-button>
+                          </el-badge>
+                        </el-tooltip>
+                        <el-tooltip
+                            content="手动编辑"
+                            placement="top"
                         >
-                            <!-- border:none-->
-                            <!--<div class="mask"></div>-->
-                            <p class="relation-title">
-                                {{relation.RelationTypeName}}
-                                <span class="asc">边类型编码:{{relation.RelationTypeCode}}</span>
-                                <el-tooltip
-                                    :content="relation.Note"
-                                    placement="top"
-                                    style="z-index: 3;position:relative;"
-                                >
-                                    <i class="iconfont icon-warn icon"/>
-                                </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 ">&nbsp;
-                                </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)"
-                                            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>
-
-                                </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>
-                        </el-card>
-                    </el-col>
+                          <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>
-            </section>
-        </div>
-        <RelationMaintain
-            :values="values"
-            :source="source"
-            ref="maintain"
-            :isComputed="isComputed"
-            :TableVisibleMoreLoading="TableVisibleMoreLoading"
-            @template="templateDown"
-            @openComputed="openComputed"
-        />
+              </article>
+            </el-card>
+          </el-col>
+        </el-row>
+      </section>
     </div>
+    <RelationMaintain
+        :values="values"
+        :source="source"
+        ref="maintain"
+        :isComputed="isComputed"
+        :ManualMaintenance="ManualMaintenance"
+        :TableVisibleMoreLoading="TableVisibleMoreLoading"
+        @template="templateDown"
+        @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: {}, // 当前要计算的对象
-            }
-        },
-        computed: {},
-
-        methods: {
-            explain() {
-                // alert('explain click')
-            },
-            computed(relation) {
-                this.isComputed = relation // 当前要计算的对象
-                this.$emit('calcSpecial', relation)
-                if (relation.IsSource) { //提示引导
-                    this.values.autoComputed = `根据现有数据自动计算 <${relation.RelationTypeName}>`
-                    this.$refs.maintain.dialogTableVisible = true
-                } else {
-                    this.values.existComputed = `根据现有数据自动计算 <${relation.RelationTypeName}>`
-                    this.$refs.maintain.dialogTableVisibleMore = true
-
-                }
-            },
-            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) {
-                    this.values={...this.values,optionTips,lastTime}
-                    this.$refs.maintain.dialogManualOption = true
-                    }
-            },
-            templateDown() { //下载模板
-                this.$emit('template')
-            },
-            openComputed(result) {
-                this.$emit('openComputed', result)
-            }
+  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: ' 下载报告文件'
         },
-        components: {RelationMaintain}
-    }
+        isComputed: {}, // 当前要计算的对象
+        ManualMaintenance: {},//手动编辑对象
+      }
+    },
+    computed: {},
+
+    methods: {
+      explain() {
+        // alert('explain click')
+      },
+      RelationType() {
+        this.$emit('RelationType', this.isComputed.RelationType, this.isComputed.ZoneType)
+
+      },
+      computed(relation) {
+        this.isComputed = relation // 当前要计算的对象
+        this.$emit('calcSpecial', relation)
+        if (relation.IsSource) { //提示引导
+          this.values.existComputed = `根据现有数据自动计算 <${relation.RelationTypeName}>`
+          this.$refs.maintain.dialogTableVisibleMore = true
+        } else {
+          this.values.autoComputed = `根据现有数据自动计算 <${relation.RelationTypeName}>`
+          this.$refs.maintain.dialogTableVisible = true
+
+        }
+      },
+      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) {
+          this.values = {...this.values, optionTips, lastTime}
+          this.$refs.maintain.dialogManualOption = true
+        }
+        this.ManualMaintenance = relation
+      },
+      templateDown() { //下载模板
+        this.$emit('template')
+      },
+      openComputed(result) {
+        this.$emit('openComputed', result)
+      },
+
+    },
+    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-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: 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 {
+      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;
-        font-weight: 600;
-        border-bottom: 1px dashed @font-code;
-        padding-bottom: @5px;
+        margin-left: @5px;
+        font-weight: 400;
+      }
     }
 
-    .container {
-        .el-card {
-            /*border: 1px solid #000;*/
-            margin: 10px 0;
-        }
+    .card {
+      position: @pos-relative;
 
-        /*.el-button {*/
-        /*    border: 1px solid #000;*/
-        /*}*/
-
-        .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;
-            }
-        }
+      .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
+      }
+    }
 
-        .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;
 
-        .relation-title {
-            font-size: 20px;
-            font-weight: @font-big;
-
-            .asc {
-                font-size: @font-small;
-                color: @font-code;
-            }
-
-            .icon {
-                display: block;
-                float: right;
-                color: #555;
-                font-size: 18px;
-            }
-        }
+      .icon {
+        display: block;
+        float: right;
+        color: #555;
+        font-size: 18px;
+      }
+    }
 
-        .main-object {
-            margin: 15px 0;
-            padding-left: 0 !important;
-
-            &:nth-child(even) {
-                border-left: 1px solid @font-code;
-                margin-top: 27px;
-            }
-
-            .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;
-            }
-        }
+    .relation-title-icon {
+      font-size: 20px;
+      font-weight: @font-big;
+      overflow: hidden;
 
+      .icon {
+        display: block;
+        float: right;
+        color: #555;
+        font-size: 18px;
+      }
+    }
 
-        article {
-            overflow: hidden;
-        }
+    .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;
+    }
 
-        .last-computed {
-            overflow: hidden;
-            color: @font-code;
+    .line-number {
+      font-size: @font-small;
+      color: @font-code;
+      font-weight: @font-big;
+    }
 
-            .float-right {
-                float: right;
-                margin-left: @5px;
-            }
+    .line-number-show {
+      color: @color-text;
+      font-weight: @font-big;
+    }
 
-            /deep/ .is-dot {
-                margin-top: 7px;
-                margin-right: @5px;
-            }
+    .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>

+ 396 - 361
src/components/relation/overview/Modal/RelationMaintain.vue

@@ -1,391 +1,426 @@
 <template>
-    <div class="relation-maintain">
-        <!--计算无需配置源末端的关系时提示-->
-        <el-dialog
-            :title="values.title"
-            :visible.sync="dialogTableVisible"
+  <div class="relation-maintain">
+    <!--计算无需配置源末端的关系时提示-->
+    <el-dialog
+        :title="values.title"
+        :visible.sync="dialogTableVisible"
+    >
+      <span class="font-big">{{values.autoComputed}}</span>
+      <footer
+          slot="footer"
+          class="dialog-footer "
+      >
+        <el-button @click="dialogTableVisible = false">{{values.cancel}}</el-button>
+        <el-button
+            type="primary"
+            @click="promptly"
+        >{{values.promptly}}
+        </el-button>
+      </footer>
+    </el-dialog>
+    <!-- 计算需配置源末端的关系且已配置时提示-->
+    <el-dialog
+        :title="values.title"
+        :visible.sync="dialogTableVisibleMore"
+    >
+      <div
+          v-loading="TableVisibleMoreLoading"
+          style="overflow:hidden"
+      >
+        <p class="font-big">{{values.existComputed}}</p>
+        <p class="exist-title">{{values.existTitle}}</p>
+        <el-row :span="24">
+          <el-col :span="8">
+            <span class="demonstration">{{values.originEquipment}}</span>
+            <el-cascader
+                :options="newOptions"
+                :key="isResouceShow"
+                v-model="ops"
+                :props="props"
+                @change="sourceOptions"
+                collapse-tags
+                clearable
+            />
+          </el-col>
+          <el-col :span="8">
+            <span class="demonstration">{{values.endEquipment}}</span>
+            <!--                                                    v-model="filterOps"
+            -->
+            <el-cascader
+                :options="disOptions"
+                :props="props"
+                collapse-tags
+                clearable
+            />
+          </el-col>
+        </el-row>
+        <footer
+            slot="footer"
+            class="dialog-footer "
+            style="float: right"
         >
-            <span class="font-big">{{values.autoComputed}}</span>
-            <footer
-                slot="footer"
-                class="dialog-footer "
+          <el-button @click="dialogTableVisibleMore = false">{{values.cancel}}</el-button>
+          <el-button
+              type="primary"
+              @click="computedUpdate"
+          >{{values.promptly}}
+          </el-button>
+        </footer>
+      </div>
+    </el-dialog>
+    <!--设定设备对象源/末端-->
+    <el-dialog
+        :title="values.title"
+        :visible.sync="dialogEquipment"
+    >
+      <span class="font-big">{{values.underDesign}}</span>
+      <footer
+          slot="footer"
+          class="dialog-footer"
+      >
+        <el-button
+            type="primary"
+            @click="dialogEquipment = false"
+        >{{values.confirm}}
+        </el-button>
+      </footer>
+    </el-dialog>
+    <!--手动编辑:提示引导-->
+    <el-dialog
+        :title="values.title"
+        :visible.sync="dialogManualTip"
+    >
+      <p class="font-big">{{values.tips}}</p>
+      <p
+          class="font-big"
+          v-for="item in values.device"
+      >{{item}}</p>
+      <footer
+          slot="footer"
+          class="dialog-footer "
+      >
+        <el-button @click="dialogManualTip = false">{{values.confirm}}
+        </el-button>
+      </footer>
+    </el-dialog>
+    <!--手动编辑:手动维护-->
+    <el-dialog
+        :title="values.title"
+        :visible.sync="dialogManualOption"
+    >
+      <p class="option-tip">{{values.optionTips}}</p>
+      <el-row :span="24">
+        <el-col :span="8">
+          <p>
+            <i class="iconfont icon-doc-line"/>
+            {{values.currentNum}} 0
+          </p>
+          <!--          <a href="/api/datacenter/graphic/template-downloads">-->
+          <a :href="downloadProject('excel')">
+            <el-button
+                type="primary"
+                class="mt-10"
             >
-                <el-button @click="dialogTableVisible = false">{{values.cancel}}</el-button>
-                <el-button
-                    type="primary"
-                    @click="promptly"
-                >{{values.promptly}}
-                </el-button>
-            </footer>
-        </el-dialog>
-        <!-- 计算需配置源末端的关系且已配置时提示-->
-        <el-dialog
-            :title="values.title"
-            :visible.sync="dialogTableVisibleMore"
-        >
-            <div
-                v-loading="TableVisibleMoreLoading"
-                style="overflow:hidden"
-            >
-                <p class="font-big">{{values.existComputed}}</p>
-                <p class="exist-title">{{values.existTitle}}</p>
-                <el-row :span="24">
-                    <el-col :span="8">
-                        <span class="demonstration">{{values.originEquipment}}</span>
-                        <el-cascader
-                            :options="newOptions"
-                            :key="isResouceShow"
-                            v-model="ops"
-                            :props="props"
-                            @change="sourceOptions"
-                            collapse-tags
-                            clearable
-                        />
-                    </el-col>
-                    <el-col :span="8">
-                        <span class="demonstration">{{values.endEquipment}}</span>
-<!--                                                    v-model="filterOps"
--->
-                        <el-cascader
-                            :options="disOptions"
-                            :props="props"
-                            collapse-tags
-                            clearable
-                        />
-                    </el-col>
-                </el-row>
-                <footer
-                    slot="footer"
-                    class="dialog-footer "
-                    style="float: right"
-                >
-                    <el-button @click="dialogTableVisibleMore = false">{{values.cancel}}</el-button>
-                    <el-button
-                        type="primary"
-                        @click="computedUpdate"
-                    >{{values.promptly}}
-                    </el-button>
-                </footer>
-            </div>
-        </el-dialog>
-        <!--设定设备对象源/末端-->
-        <el-dialog
-            :title="values.title"
-            :visible.sync="dialogEquipment"
-        >
-            <span class="font-big">{{values.underDesign}}</span>
-            <footer
-                slot="footer"
-                class="dialog-footer"
-            >
-                <el-button
-                    type="primary"
-                    @click="dialogEquipment = false"
-                >{{values.confirm}}
-                </el-button>
-            </footer>
-        </el-dialog>
-        <!--手动编辑:提示引导-->
-        <el-dialog
-            :title="values.title"
-            :visible.sync="dialogManualTip"
-        >
-            <p class="font-big">{{values.tips}}</p>
-            <p
-                class="font-big"
-                v-for="item in values.device"
-            >{{item}}</p>
-            <footer
-                slot="footer"
-                class="dialog-footer "
-            >
-                <el-button @click="dialogManualTip = false">{{values.confirm}}
-                </el-button>
-            </footer>
-        </el-dialog>
-        <!--手动编辑:手动维护-->
-        <el-dialog
-            :title="values.title"
-            :visible.sync="dialogManualOption"
-        >
-            <p class="option-tip">{{values.optionTips}}</p>
-            <el-row :span="24">
-                <el-col :span="8">
-                    <p>
-                        <i class="iconfont icon-doc-line"/>
-                        {{values.currentNum}} 0
-                    </p>
-                    <a href="/api/datacenter/graphic/template-downloads">
-                    <el-button
-                        type="primary"
-                        class="mt-10"
-                    >
-                        {{values.download}}
-                    </el-button>
-                    </a>
-                </el-col>
-                <el-col :span="10">
-                    {{values.lastTime}}
-                </el-col>
-            </el-row>
-            <el-upload
-                class="upload-demo"
-                drag
-                action="/api/datacenter/graphic/import"
-                multiple
-                name="fileName"
-                :on-progress="progress"
-                :on-success="success"
-                :on-error="error"
-            >
-                <i class="el-icon-upload"/>
-                <div
-                    class="el-upload__text"
-                    v-html="values.uploadTxt"
-                />
-                <div class="upload__tip danger" slot="tip">{{ values.uploadTips}}</div>
-            </el-upload>
-        </el-dialog>
-        <!--手动编辑:手动维护.process结束-->
-        <el-dialog
-            :title="values.title"
-            :visible.sync="dialogProcess"
-        >
-            <div class="block">
-                <el-timeline>
-                    <el-timeline-item
-                        v-for="(activity, index) in activities"
-                        :key="index"
-                        :icon="activity.icon"
-                        :type="activity.type"
-                        :color="activity.color"
-                        :size="activity.size"
-                    >
-                        {{activity.content}}
-                    </el-timeline-item>
-                </el-timeline>
-            </div>
-<!--            下载报告-->
-            <a href="/api/datacenter//graphic/report-downloads">
-                <el-button>{{values.downloadFile}}</el-button>
-            </a>
-            <footer
-                slot="footer"
-                class="dialog-footer "
-            >
-                <el-button @click="errBack">{{values.back}}</el-button>
-                <el-button
-                    type="primary"
-                    @click="finish"
-                >{{values.done}}
-                </el-button>
-            </footer>
-        </el-dialog>
-    </div>
+              {{values.download}}
+            </el-button>
+          </a>
+        </el-col>
+        <el-col :span="10">
+          {{values.lastTime}}
+        </el-col>
+      </el-row>
+      <el-upload
+          class="upload-demo"
+          drag
+          action="/api/datacenter/graphic/import"
+          multiple
+          :show-file-list='false'
+          name="file"
+          :headers="headers"
+          :data="dataId"
+          :on-progress="progress"
+          :on-success="success"
+          :on-error="error"
+          accept="xlsx,xls"
+      >
+        <i class="el-icon-upload"/>
+        <div
+            class="el-upload__text"
+            v-html="values.uploadTxt"
+        />
+        <div class="upload__tip danger" slot="tip">{{ values.uploadTips}}</div>
+      </el-upload>
+    </el-dialog>
+    <!--手动编辑:手动维护.process结束-->
+    <el-dialog
+        :title="values.title"
+        :visible.sync="dialogProcess"
+    >
+      <div class="block">
+        <el-timeline>
+          <el-timeline-item
+              v-for="(activity, index) in activities"
+              :key="index"
+              :icon="activity.icon"
+              :type="activity.type"
+              :color="activity.color"
+              :size="activity.size"
+          >
+            {{activity.content}}
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+      <!--            下载报告-->
+      <a :href="downloadProject('report')">
+        <el-button>{{values.downloadFile}}</el-button>
+      </a>
+      <footer
+          slot="footer"
+          class="dialog-footer "
+      >
+        <el-button @click="errBack">{{values.back}}</el-button>
+        <el-button
+            type="primary"
+            @click="finish"
+        >{{values.done}}
+        </el-button>
+      </footer>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
+  import {mapGetters} from 'vuex'
+  import storage from '@/framework/utils/storage'
 
-    export default {
-        name: "RelationMaintain",
-        props: ['values', 'isComputed', 'source', 'TableVisibleMoreLoading'],
-        created() {
+  export default {
+    name: "RelationMaintain",
+    props: ['values', 'isComputed', 'source', 'TableVisibleMoreLoading', 'ManualMaintenance'],
+    created() {
 
-        },
-        mounted() {
-        },
-        data() {
-            return {
-                dialogTableVisible: false,
-                dialogTableVisibleMore: false,
-                dialogEquipment: false,
-                dialogManualTip: false,
-                dialogManualOption: false,
-                dialogProcess: false,
-                originEquipment: [],
-                endEquipment: [],
-                props: {
-                    multiple: true,
-                    label: 'FamilyName',
-                    value: 'lId',
-                    children: 'Items',
+    },
+    mounted() {
+    },
+    data() {
+      return {
+        dialogTableVisible: false,
+        dialogTableVisibleMore: false,
+        dialogEquipment: false,
+        dialogManualTip: false,
+        dialogManualOption: false,
+        dialogProcess: false,
+        originEquipment: [],
+        endEquipment: [],
+        props: {
+          multiple: true,
+          label: 'FamilyName',
+          value: 'lId',
+          children: 'Items',
 
-                }, // 级联
-                activities: [{
-                    content: '数据文件处理中..',
-                    size: 'large',
-                    type: 'primary',
-                    icon: 'el-icon-check',
-                    color: '#0bbd87'
-                }, {
-                    content: '数据处理失败',
-                    color: '#0bbd87',
-                    icon: 'el-icon-check',
-                    size: 'large',
-                    type: 'primary',
-                }],
-                vals: [],
-                val: [],
-                idArr: [],//存储所有选择的id
-                secondary: [],//单独存储二级数据
-                list: [],//获取后台数据,重新组合,添加唯一标识和源端标识
-                isResouceShow: 0,
-                result: [],//最终传给后台的数据
-                ops: [],//第一个选择器model
-                filterOps: [],//为清空第二个选择器
-            }
-        },
-        computed:{
-            fileHeaders() {
-                return  {'Content-Type': 'multipart/form-data'}
-            },
-            newOptions() {
-                ++this.isResouceShow
-                let allList = []
-                this.deepCopy(this.source).forEach(item => allList.push(...item.Items))
-                this.list = allList.map((item, index) => {
-                    item = {
-                        ...item,
-                        lId: index
-                    }
-                    item.Items.map(i => {
-                        i.lId = i.Id + i.BlockId //添加唯一标识
-                        i.Source = true //判断源末端
-                        return i
-                    })
-                    return item
-                })
-                this.ops = this.list
-                return this.list
-            },
-            //    末端数据添加disabled
-            disOptions() {
-                let arr = this.deepCopy(this.list).map(item => {
-                    item.Items.map(i => {
-                        if (this.idArr.includes(i.lId)) {
-                            i.disabled = true
-                        }
-                        return i
-                    })
-                    return item
-                })
-                this.filterOps = arr
-                return arr
+        }, // 级联
+        activities: [{
+          content: '数据文件处理中..',
+          size: 'large',
+          type: 'primary',
+          icon: 'el-icon-check',
+          color: '#0bbd87'
+        }, {
+          content: '数据处理成功',
+          color: '#0bbd87',
+          icon: 'el-icon-check',
+          size: 'large',
+          type: 'primary',
+        }],
+        vals: [],
+        val: [],
+        idArr: [],//存储所有选择的id
+        secondary: [],//单独存储二级数据
+        list: [],//获取后台数据,重新组合,添加唯一标识和源端标识
+        isResouceShow: 0,
+        result: [],//最终传给后台的数据
+        ops: [],//第一个选择器model
+        filterOps: [],//为清空第二个选择器
+      }
+    },
+    computed:{
+      ...mapGetters('layout', ['projectId']),
+      headers() {
+        return {
+          'ProjectId': this.projectId,
+          'Comming': 'adm' ,
+          'Account': storage.get("user_name")
+        }
+      },
+      dataId() {
+        return {
+          relType: this.ManualMaintenance.RelationType || '',
+          zoneType: this.ManualMaintenance.ZoneType || '',
+          projectId:this.projectId
+        }
+      },
+      newOptions() {
+        ++this.isResouceShow
+        let allList = []
+        this.deepCopy(this.source).forEach(item => allList.push(...item.Items))
+        this.list = allList.map((item, index) => {
+          item = {
+            ...item,
+            lId: index
+          }
+          item.Items.map(i => {
+            i.lId = i.Id + i.BlockId //添加唯一标识
+            i.Source = true //判断源末端
+            return i
+          })
+          return item
+        })
+        this.ops = this.list
+        return this.list
+      },
+      //    末端数据添加disabled
+      disOptions() {
+        let arr = this.deepCopy(this.list).map(item => {
+          item.Items.map(i => {
+            if (this.idArr.includes(i.lId)) {
+              i.disabled = true
             }
+            return i
+          })
+          return item
+        })
+        this.filterOps = arr
+        return arr
+      }
+
+    },
+    methods: {
+      deepCopy(obj) {
+        return JSON.parse(JSON.stringify(obj))
+      },
+      downloadProject(str) {
+        let relType = this.ManualMaintenance.RelationType ? `?relType=${this.ManualMaintenance.RelationType}` : ''
+        let zoneType = this.ManualMaintenance.ZoneType ? `&zoneType=${this.ManualMaintenance.ZoneType}` : ''
+        let url;
+        if (str === 'excel') {
+          relType = this.ManualMaintenance.RelationType ? `&relType=${this.ManualMaintenance.RelationType}` : ''
+          url = `/api/datacenter/graphic/export?code=对象ID${relType}${zoneType}`
+        } else {
+          url = `/api/datacenter/graphic/report-downloads${relType}${zoneType}`
+        }
+        return url
+      },
+      progress(event, file, fileList) {
+        // console.log(event.file, fileList)
+      },
+      success(event, file, fileList) {
+        this.dialogManualOption = true
+        this.dialogProcess = true
+        console.log(event,file, fileList,' file success')
 
-        },
-        methods: {
-            deepCopy(obj) {
-                return JSON.parse(JSON.stringify(obj))
-            },
-            progress(event, file, fileList) {
-                // console.log(event.file, fileList)
-            },
-            success(event, file, fileList) {
-                this.dialogManualOption = true
-                this.dialogProcess = true
-                console.log(event.file, fileList,' file success')
+      },
+      error(event, file, fileList) {
+        this.dialogManualOption = true
+        this.dialogProcess = true
+        console.log(event,file, fileList)
 
-            },
-            error(event, file, fileList) {
-                this.dialogManualOption = true
-                this.dialogProcess = true
-                console.log(event.file, fileList)
+      },
+      errBack() {
+        this.dialogProcess = false
+      },
+      finish() {
+        this.dialogProcess = false
+        this.dialogManualOption = false
+      },
+      templateDownload() {
+        this.$emit('template')
+      },
+      promptly() {
+        if(this.isComputed.IsAutomatic && !this.isComputed.IsSource) { //需要自动计算并且不需要配置云末端
+          console.log(this.isComputed.RelationType, 'this.isComputed.RelationType')
+          this.$emit('RelationType', this.isComputed.RelationType, this.isComputed.ZoneType)
 
-            },
-            errBack() {
-                this.dialogProcess = false
-            },
-            finish() {
-                this.dialogProcess = false
-                this.dialogManualOption = false
-            },
-            templateDownload() {
-                this.$emit('template')
-            },
-            promptly() {
-                console.log(this.isComputed, 'child isComputed')
-                this.dialogTableVisible = false
-            },
-            sourceOptions(val) {
-                //把所有id组装到一个数组
-                this.idArr = val.map(item => item[1])
-                //提取后台二级数据
-                this.secondary = []
-                this.deepCopy(this.list).forEach(item => this.secondary.push(...item.Items))
-                //最终过滤
-                let filterList = this.secondary.filter(item => this.idArr.includes(item.lId))
-                //    组合成接口需要的数据格式
-                let result = []
-                filterList.forEach(item => {
-                    let {BlockId, BuildingId, Domain, Id, MepSystemType, ProjectId, Source, SourceId, Type, Statistics} = item
-                    result.push({
-                        BlockId,
-                        BuildingId,
-                        Domain,
-                        // Id,
-                        MepSystemType,
-                        ProjectId,
-                        Source,
-                        SourceId,
-                        SourceType: Type,
-                        Statistics
-                    })
-                })
-                this.result = result
+        }
+        this.dialogTableVisible = false
+      },
+      sourceOptions(val) {
+        //把所有id组装到一个数组
+        this.idArr = val.map(item => item[1])
+        //提取后台二级数据
+        this.secondary = []
+        this.deepCopy(this.list).forEach(item => this.secondary.push(...item.Items))
+        //最终过滤
+        let filterList = this.secondary.filter(item => this.idArr.includes(item.lId))
+        //组合成接口需要的数据格式
+        let result = []
+        filterList.forEach(item => {
+          let {BlockId, BuildingId, Domain, Id, MepSystemType, ProjectId, Source, SourceId, Type, Statistics} = item
+          result.push({
+            BlockId,
+            BuildingId,
+            Domain,
+            Id,
+            MepSystemType,
+            ProjectId,
+            Source,
+            SourceId,
+            SourceType: Type,
+            Statistics
+          })
+        })
+        this.result = result
 
-            },
-            computedUpdate() {
-                if (!this.result.length) {
-                    this.$message({
-                        showClose: true,
-                        message: '请选择源端设备类',
-                        type: 'warning'
-                    });
-                    return false
-                } else {
-                    this.$emit('openComputed', this.result)
-                    this.dialogTableVisibleMore = false
+      },
+      computedUpdate() {
+        if (!this.result.length) {
+          this.$message({
+            showClose: true,
+            message: '请选择源端设备类',
+            type: 'warning'
+          });
+          return false
+        } else {
+          this.$emit('openComputed', this.result)
+          this.dialogTableVisibleMore = false
 
-                }
-            }
         }
+      },
     }
+  }
 </script>
 
 <style scoped lang="less">
-    .relation-maintain {
-        .mt-10 {
-            margin-top: 10px;
-        }
+  .relation-maintain {
+    .mt-10 {
+      margin-top: 10px;
+    }
 
-        .danger {
-            color: #d9001b;
-        }
+    .danger {
+      color: #d9001b;
+    }
 
-        .font-big {
-            font-weight: 600;
-        }
+    .font-big {
+      font-weight: 600;
+    }
 
 
-        .exist-title {
-            font-size: 12px;
-            color: #AAAAAA;
-        }
+    .exist-title {
+      font-size: 12px;
+      color: #AAAAAA;
+    }
 
-        .option-tip {
-            font-size: 18px;
-            font-weight: 600;
-        }
+    .option-tip {
+      font-size: 18px;
+      font-weight: 600;
+    }
 
-        .upload-demo {
-            margin: 20px 0;
+    .upload-demo {
+      margin: 20px 0;
 
-        }
+    }
 
-        /deep/ .el-upload-dragger {
-            width: 600px;
-            margin: 0 auto;
-        }
+    /deep/ .el-upload-dragger {
+      width: 600px;
+      margin: 0 auto;
     }
+  }
 </style>