瀏覽代碼

全部关系总览-设备控制关系 页面-部分交互

shaun-sheep 5 年之前
父節點
當前提交
e52f4ad37d

+ 498 - 0
src/components/relation/overview/CardList.vue

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

+ 195 - 0
src/components/relation/relationShip/Modal/addRelationShip.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="change-relation-ship">
+    <el-dialog
+      :title="values.addShip"
+      :visible.sync="addShipDialog"
+    >
+      <el-form
+        :model="ruleForm"
+        status-icon
+        :rules="rules"
+        ref="ruleForm"
+        label-width="100px"
+        class="demo-ruleForm"
+      >
+        <p class="mb-20 color-AAA">{{values.codeTip}}</p>
+        <el-form-item
+          :label="values.codeTitle"
+          prop="code"
+          class="mb-20"
+        >
+          <el-input
+            v-model="ruleForm.code"
+            autocomplete="off"
+            :placeholder="values.pleaseEnter"
+          />
+        </el-form-item>
+        <el-row class="mb-20">
+          <el-col :span="12">
+            <p class="mb-20">{{values.mainObject}}
+              <span class="fw-bold color-AAA">(包括:XXXX类型,XXXX类型)限制条件</span>
+            </p>
+            <el-form-item
+              prop="main"
+            >
+              <el-input
+                v-model="ruleForm.main"
+                autocomplete="off"
+                :placeholder="values.pleaseEnterCode"
+                :disabled="disabled"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <p class="mb-20">{{values.affiliatedObject}}
+              <span class="fw-bold color-AAA ">(包括:XXXX类型,XXXX类型)限制条件</span>
+            </p>
+            <el-form-item
+              v-for="(item,index) in ruleForm.codeList"
+              :key="index"
+              :prop="`codeList.${index}.value`"
+              :rules="rules.codeList"
+            >
+              <el-input
+                v-model="item.value"
+                :placeholder="values.pleaseEnterCode"
+                :disabled="disabled"
+
+              />
+              <el-button
+                @click.prevent="removeCode(item)"
+                icon="el-icon-circle-close"
+                type="text"
+                :disabled="disabled"
+
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button
+                @click="addCode"
+                icon="el-icon-circle-plus-outline"
+                style="width: 220px;"
+                :disabled="disabled"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item>
+          <el-button
+            type="primary"
+            class="fr ml-20"
+            @click="submitForm('ruleForm')"
+          >{{values.add}}
+          </el-button>
+          <el-button
+            class="fr"
+            @click="addShipDialog = false"
+          >{{values.cancel}}
+          </el-button>
+        </el-form-item>
+
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "addRelationShip",
+    props: ['values'],
+    data() {
+      var checkCode = (rule, value, callback) => {
+        //TODO
+        callback()
+        this.disabled = false
+      }
+      var checkMain = (rule, value, callback) => {
+        //TODO
+        callback()
+      }
+      var codeList = (rule, value, callback) => {
+        //TODO
+        callback()
+      }
+      return {
+        addShipDialog: false,
+        disabled: true,
+        ruleForm: {
+          code: '',
+          main: '',
+          codeList: [{
+            value: ''
+          }]
+        },
+        rules: {
+          code: [
+            {required: true, message: '请输入对应识别编码', trigger: 'blur'},
+            {validator: checkCode, trigger: 'blur'}
+          ],
+          main: [
+            {required: true, message: '请输入对应识别编码', trigger: 'blur'},
+            {validator: checkMain, trigger: 'blur'}
+          ],
+          codeList: [
+            {required: true, message: '请输入对应识别编码', trigger: 'blur'},
+            {validator: codeList, trigger: 'blur'}
+          ]
+        }
+      }
+    },
+    methods: {
+      addCode() {
+        this.ruleForm.codeList.push({
+          value: '',
+          key: Date.now()
+        })
+      },
+      removeCode(item) {
+        var index = this.ruleForm.codeList.indexOf(item)
+        if (index !== -1) {
+          this.ruleForm.codeList.splice(index, 1)
+        }
+      },
+      submitForm(formName) {
+        this.$refs[formName].validate(valid => {
+          if (valid) {
+            this.addShipDialog = false
+            console.log('success')
+          } else {
+            console.log('error')
+            return false
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  @color-text: #AAA;
+  .change-relation-ship {
+    /deep/ .el-form-item__label {
+      width: auto !important;
+    }
+
+    .fr {
+      float: right;
+    }
+
+    .mb-20 {
+      margin-bottom: 20px;
+    }
+
+    .ml-20 {
+      margin-left: 20px;
+    }
+
+    .color-AAA {
+      color: @color-text
+    }
+
+    .fw-bold {
+      font-weight: bold;
+    }
+  }
+</style>

+ 161 - 0
src/components/relation/relationShip/Modal/editRelationShip.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="change-relation-ship">
+    <el-dialog
+      :title="values.editShip"
+      :visible.sync="editShipDialog"
+    >
+      <el-form
+        :model="ruleForm"
+        status-icon
+        :rules="rules"
+        ref="ruleForm"
+        label-width="100px"
+        class="demo-ruleForm"
+      >
+        <p class="mb-20 color-AAA">{{values.deviceTip}}</p>
+        <el-row class="mb-20">
+          <el-col :span="12">
+            <p class="mb-20">{{values.mainObject}}
+              <span class="fw-bold color-AAA">(包括:XXXX类型,XXXX类型)限制条件</span>
+            </p>
+            <el-form-item>
+              <el-input
+                v-model="ruleForm.main"
+                autocomplete="off"
+                disabled
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <p class="mb-20">{{values.affiliatedObject}}
+              <span class="fw-bold color-AAA ">(包括:XXXX类型,XXXX类型)限制条件</span>
+            </p>
+            <el-form-item
+              v-for="(item,index) in ruleForm.codeList"
+              :key="index"
+              :prop="`codeList.${index}.value`"
+              :rules="rules.codeList"
+            >
+              <el-input
+                v-model="item.value"
+                :placeholder="values.pleaseEnterCode"
+
+              />
+              <el-button
+                @click.prevent="removeCode(item)"
+                icon="el-icon-circle-close"
+                type="text"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button
+                @click="addCode"
+                icon="el-icon-circle-plus-outline"
+                style="width: 220px;"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item>
+          <el-button>{{values.delete}}
+          </el-button>
+          <el-button
+            type="primary"
+            class="fr ml-20"
+            @click="submitForm('ruleForm')"
+          >{{values.add}}
+          </el-button>
+          <el-button
+            class="fr"
+            @click="editShipDialog = false"
+          >{{values.cancel}}
+          </el-button>
+        </el-form-item>
+
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "addRelationShip",
+    props: ['values'],
+    data() {
+      var codeList = (rule, value, callback) => {
+        //TODO
+        callback()
+      }
+      return {
+        editShipDialog: false,
+        ruleForm: {
+          code: '',
+          main: '',
+          codeList: [{
+            value: ''
+          }]
+        },
+        rules: {
+          codeList: [
+            {required: true, message: '请输入对应识别编码', trigger: 'blur'},
+            {validator: codeList, trigger: 'blur'}
+          ]
+        }
+      }
+    },
+    methods: {
+      addCode() {
+        this.ruleForm.codeList.push({
+          value: '',
+          key: Date.now()
+        })
+      },
+      removeCode(item) {
+        var index = this.ruleForm.codeList.indexOf(item)
+        if (index !== -1) {
+          this.ruleForm.codeList.splice(index, 1)
+        }
+      },
+      submitForm(formName) {
+        this.$refs[formName].validate(valid => {
+          if (valid) {
+            this.editShipDialog = false
+            console.log('success')
+          } else {
+            console.log('error')
+            return false
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  @color-text: #AAA;
+  .change-relation-ship {
+    /deep/ .el-form-item__label {
+      width: auto !important;
+    }
+
+    .fr {
+      float: right;
+    }
+
+    .mb-20 {
+      margin-bottom: 20px;
+    }
+
+    .ml-20 {
+      margin-left: 20px;
+    }
+
+    .color-AAA {
+      color: @color-text
+    }
+
+    .fw-bold {
+      font-weight: bold;
+    }
+  }
+</style>

+ 204 - 0
src/components/relation/relationShip/Modal/exportExcel.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="export-excel">
+    <el-dialog
+      :title="values.relation_maintenance"
+      :visible.sync="dialogExport"
+    >
+      <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="downloadProject('excel')">
+            <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
+        :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.relation_maintenance"
+      :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: "exportExcel",
+    props: ['values'],
+    data() {
+      return {
+        dialogExport: false,
+        dialogProcess: false,
+        activities: [{
+          content: '数据文件处理中..',
+          size: 'large',
+          type: 'primary',
+          icon: 'el-icon-check',
+          color: '#0bbd87'
+        }, {
+          content: '数据处理成功',
+          color: '#0bbd87',
+          icon: 'el-icon-check',
+          size: 'large',
+          type: 'primary',
+        }],
+      }
+    },
+    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
+        }
+      },
+    },
+    methods: {
+      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.dialogExport = true
+        this.dialogProcess = true
+
+      },
+      error(event, file, fileList) {
+        this.dialogExport = true
+        this.dialogProcess = true
+
+      },
+      errBack() {
+        this.dialogProcess = false
+      },
+      finish() {
+        this.dialogProcess = false
+        this.dialogExport = false
+      },
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .export-excel {
+    .mt-10 {
+      margin-top: 10px;
+    }
+
+    .danger {
+      color: #d9001b;
+    }
+
+    .font-big {
+      font-weight: 600;
+    }
+
+
+    .exist-title {
+      font-size: 12px;
+      color: #AAAAAA;
+    }
+
+    .option-tip {
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    .upload-demo {
+      margin: 20px 0;
+
+    }
+
+    /deep/ .el-upload-dragger {
+      width: 600px;
+      margin: 0 auto;
+    }
+  }
+</style>

+ 2 - 0
src/router/system.js

@@ -82,6 +82,7 @@ import relatedSpace from '@/views/ledger/cenotelist/relatedSpace'
 /**  关系维护并计算 */
 import maintain from '@/views/relation/maintain'
 import overView from '@/views/relation/overview'
+import relationShip from '@/views/relation/relationShip'
 import relationDetail from '@/views/relation/overview/detail'
 import data from '@/views/relation/data'
 import datatable from '@/views/relation/datatable'
@@ -487,6 +488,7 @@ export default [{
         children: [
             { path: 'maintain', name: 'maintain', component: maintain, meta: { keepAlive: false, breadcrumbs: [{ label: '关系维护' }] } },
             { path: 'overview', name: 'overView', component: overView, meta: { keepAlive: false, breadcrumbs: [{ label: '关系维护计算' },{ label: '全部关系总览' }] } },
+            { path: 'relationShip', name: 'relationShip', component: relationShip, meta: { keepAlive: false, breadcrumbs: [{ label: '关系维护计算' },{ label: '全部关系总览' }] } },
             { path: 'relationDetail', name: 'relationDetail', component: relationDetail, meta: { keepAlive: false, breadcrumbs: [{ label: '关系维护计算' },{ label: '关系详情' }] } },
             { path: 'data', name: 'data', component: data, meta: { keepAlive: false, breadcrumbs: [{ label: '项目数据转换',path:'/relation/data' },{ label: '项目数据转换',path:'/relation/data' }] } },
             { path: 'datatable', name: 'datatable', component: datatable}

+ 496 - 0
src/views/relation/relationShip/index.vue

@@ -0,0 +1,496 @@
+<template>
+  <div class="relation-ship">
+    <section style="margin-top: 20px">
+      <el-button
+        style="padding: 10px"
+        icon="el-icon-back"
+        @click="back"
+      />
+      <el-button
+        type="primary"
+        @click="addBtn"
+      >添加关系
+      </el-button>
+      <el-button
+        type="default"
+        style="float: right"
+        @click="excel"
+      >
+        Excel导出
+      </el-button>
+    </section>
+    <section>
+      <el-row>
+        <el-col :span="12">
+          <p class="border-left-8">主对象
+            <span>限制条件:对象类型的范围(包括:XXXX类型,XXXX类型)</span></p>
+          <label>所属建筑楼层:</label>
+          <el-select v-model="buildValue">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <label>类型:</label>
+          <el-cascader
+            :options="typeList"
+            :props="props"
+            collapse-tags
+            clearable
+          />
+          <el-input
+            placeholder="请输入"
+            v-model="deviceName"
+            @keyup.enter.native="queryTable"
+          >
+            <i
+              slot="suffix"
+              class="el-input__icon el-icon-search cursor"
+              @click="queryTable"
+            />
+          </el-input>
+        </el-col>
+        <el-col :span="12">
+          <p class="border-left-8">从对象
+            <span>(包括:XXXX类型,XXXX类型)</span></p>
+          <label>所属建筑楼层:</label>
+          <el-select v-model="buildValue">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <label>类型:</label>
+          <el-cascader
+            :options="typeList"
+            :props="props"
+            collapse-tags
+            clearable
+          />
+          <el-input
+            placeholder="请输入"
+            v-model="deviceName"
+            @keyup.enter.native="queryTable"
+          >
+            <i
+              slot="suffix"
+              class="el-input__icon el-icon-search cursor"
+              @click="queryTable"
+            />
+          </el-input>
+        </el-col>
+      </el-row>
+
+    </section>
+    <section class="table-list">
+      <el-table
+        :data="tableData"
+        :span-method="objectSpanMethod"
+        border
+        :header-cell-style="{background:'#eef1f6',color:'#606266', lineHeight: '30px'}"
+        :cell-style="cellStyle"
+        class="table"
+      >
+        <el-table-column
+          prop="id"
+          label="全局名称"
+          width="180"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          label="本地编码"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="amount1"
+          label="本地名称"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="amount2"
+          label="CADID"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          label="对象详情"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              size="mini"
+              @click="lookOver(scope.$index, scope.row)">查看
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="ids"
+          label="全局名称"
+          width="180"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="names"
+          align="center"
+          label="本地编码"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="amount11"
+          label="本地名称"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="amount22"
+          label="CADID"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          label="对象详情"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              size="mini"
+              @click="lookOver(scope.$index, scope.row)">查看
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              icon="el-icon-edit-outline"
+              @click="lookOver(scope.$index, scope.row)">
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </section>
+    <exportExcel
+      ref="export"
+      :values="values"
+    />
+    <addRelationShip
+      ref="addShipComponent"
+      :values="values"
+    />
+    <editRelationShip
+      ref="editShipComponent"
+      :values="values"
+    />
+  </div>
+</template>
+
+<script>
+  import {mapActions, mapGetters, mapState} from 'vuex'
+  import exportExcel from "../../../components/relation/relationShip/Modal/exportExcel";
+  import addRelationShip from "../../../components/relation/relationShip/Modal/addRelationShip";
+  import editRelationShip from "../../../components/relation/relationShip/Modal/editRelationShip";
+
+  export default {
+    name: "index",
+    data() {
+      return {
+        values: {
+          relation_maintenance: '关系维护',
+          optionTips: '请下载最新最新 xxxx 数据进行手动维护', //请下载最新最新 xxxx 数据进行手动维护
+          currentNum: '当前关系数量:',
+          download: '下载模板(含数据)',
+          lastTime: '最后更新时间为', //最后更新时间为
+          uploadTxt: '将Excel文件拖到此处,或<em>单击上传Excel文件<em>',
+          uploadTips: '上传的Excel数据将完全覆盖当前关系表(关系表先前数据不会保留)',
+          downloadFile: ' 下载报告文件',
+          back: '返回',
+          done: '完成',
+          addShip: '添加关系',
+          editShip: '编辑关系',
+          codeTip: '请填写主被控设备对象识别编码',
+          deviceTip: '请填写主被控设备对象设备号',
+          codeTitle: '识别编码对应:',
+          mainObject: '主对象:',
+          affiliatedObject: '从对象:',
+          pleaseEnter: '请输入',
+          pleaseEnterCode: '请输入识别编码',
+          add: '添加',
+          cancel: '取消',
+          delete: '删除关系'
+        },
+        options: [
+          {
+            value: 'all',
+            label: '全选'
+          }, {
+            value: '选项2',
+            label: '双皮奶'
+          }, {
+            value: '选项3',
+            label: '蚵仔煎'
+          }, {
+            value: '选项4',
+            label: '龙须面'
+          }, {
+            value: '选项5',
+            label: '北京烤鸭'
+          }],
+        buildValue: 'all',
+        props: {multiple: true},
+        typeList: [{
+          value: 1,
+          label: '东南',
+          children: [
+            {
+              value: 2,
+              label: '上海',
+            }, {
+              value: 7,
+              label: '江苏',
+            }, {
+              value: 12,
+              label: '浙江',
+            }]
+        }, {
+          value: 17,
+          label: '西北',
+          children: [{
+            value: 18,
+            label: '陕西',
+          }, {
+            value: 21,
+            label: '新疆维吾尔族自治区',
+          }]
+        }],
+        deviceName: "",
+        tableData: [
+          {
+            id: '12987122',
+            name: '王小虎',
+            amount1: '234',
+            amount2: '3.2',
+            amount3: 10,
+            ids: '12987122',
+            names: '王小虎',
+            amount11: '234',
+            amount22: '3.2',
+          }, {
+            id: '12987122',
+            name: '王小虎',
+            amount1: '234',
+            amount2: '3.2',
+            amount3: 10,
+            ids: '12987122',
+            names: '王小虎',
+            amount11: '234',
+            amount22: '3.2',
+          }, {
+            id: '12987122',
+            name: '王小虎',
+            amount1: '234',
+            amount2: '3.2',
+            amount3: 10,
+            ids: '12987122',
+            names: '王小虎',
+            amount11: '234',
+            amount22: '3.2',
+          }, {
+            id: '12987122',
+            name: '王小虎',
+            amount1: '234',
+            amount2: '3.2',
+            amount3: 10,
+            ids: '12987122',
+            names: '王小虎',
+            amount11: '234',
+            amount22: '3.2',
+          }, {
+            id: '12987122',
+            name: '王小虎',
+            amount1: '234',
+            amount2: '3.2',
+            amount3: 10,
+            ids: '12987122',
+            names: '王小虎',
+            amount11: '234',
+            amount22: '3.2',
+          }, {
+            id: '129871225',
+            name: '王小虎',
+            amount1: '621',
+            amount2: '2.2',
+            amount3: 17,
+            ids: '12987125',
+            names: '王小虎',
+            amount11: '621',
+            amount22: '2.2',
+          },
+          {
+            id: '129871225',
+            name: '王小虎',
+            amount1: '621',
+            amount2: '2.2',
+            amount3: 17,
+            ids: '12987124',
+            names: '小虎',
+            amount11: '324',
+            amount22: '1.9',
+          }, {
+            id: '1298712w25',
+            name: '小虎',
+            amount1: '621',
+            amount2: '2.2',
+            amount3: 17,
+            ids: '12987125',
+            names: '小虎',
+            amount11: '621',
+            amount22: '2.2',
+          }],
+        spanArr: [], // 一个空的数组,用于存放每一行记录的合并数
+        pos: 0, // spanArr 的索引
+      }
+    },
+    components: {exportExcel, addRelationShip, editRelationShip},
+    created() {
+      this.$store.dispatch('setBreadcrumb', [{
+        label: '全部关系总览',
+        path: '/relation/overview'
+      }, {
+        label: '全部关系总览',
+        path: '/relation/overview'
+      },
+        {
+          label: '设备控制关系',
+        },
+      ])
+    },
+    mounted() {
+      this.getSpanArr(this.tableData)
+    },
+    methods: {
+      back() {
+        this.$router.go(-1)
+      },
+      addBtn() {
+        this.$refs.addShipComponent.addShipDialog = true
+      },
+      excel() {
+        this.$refs.export.dialogExport = true
+      },
+      queryTable() {
+      },
+
+      lookOver(index, row) {
+        console.log(index, row)
+        this.$refs.editShipComponent.editShipDialog = true
+      },
+
+      cellStyle({row, column, rowIndex, columnIndex}) {
+        if (column.label === '全局名称') {
+          return {
+            background: '#f9f9f9',
+            color: '#606266',
+            lineHeight: '30px'
+          }
+        }
+      },
+      getSpanArr(data) {
+        for (let i = 0; i < data.length; i++) {
+          if (i === 0) {
+            this.spanArr.push(1);
+            this.pos = 0;
+
+          } else {
+            if (
+              data[i].id === data[i - 1].id &&
+              data[i].name === data[i - 1].name &&
+              data[i].amount2 === data[i - 1].amount2 &&
+              data[i].amount1 === data[i - 1].amount1
+
+            ) {
+              this.spanArr[this.pos] += 1;
+              this.spanArr.push(0);
+            } else {
+              this.spanArr.push(1);
+              this.pos = i;
+            }
+          }
+        }
+      },
+      objectSpanMethod({row, column, rowIndex, columnIndex}) {
+        if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3) {
+          const _row = this.spanArr[rowIndex];
+          const _col = _row > 0 ? 1 : 0;
+          return {
+            rowspan: _row,
+            colspan: _col
+          };
+        }
+
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .relation-ship {
+    .cursor {
+      cursor: pointer;
+    }
+
+    /deep/ .el-input__inner {
+      width: 220px;
+    }
+
+    /deep/ .el-input {
+      width: auto;
+    }
+
+    .table-list {
+      width: 100%;
+      display: block;
+      /*height: calc(100% - 71px);*/
+    }
+
+    .table {
+      width: 100%;
+      margin-top: 20px;
+
+      .el-button {
+        border: none;
+        background: transparent;
+
+        &:link, &:visited, &:hover, &:active {
+          background: #f5f7fa;
+        }
+      }
+    }
+
+    .border-left-8 {
+      border-left: 8px solid black;
+      margin: 10px 0;
+      font-weight: 600;
+      text-indent: 10px;
+
+      span {
+        color: #AAAAAA;
+        margin-left: 20px;
+      }
+    }
+
+  }
+</style>