haojianlong 5 роки тому
батько
коміт
33223d6601

+ 4 - 0
src/assets/scss/point/point_config/reset.scss

@@ -478,4 +478,8 @@ input::-webkit-inner-spin-button {
 }
 input[type="number"]{
     -moz-appearance: textfield;
+}
+
+canvas:focus{
+    outline: none;
 }

+ 136 - 0
src/components/business_space/newGraphy/graphy.vue

@@ -0,0 +1,136 @@
+<template>
+  <div id="graphy">
+    <div class="canvas-box">
+      <canvas id="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
+    </div>
+    <!-- 初始两个按钮 -->
+    <div class="buttons-box">
+      <div>
+        <el-autocomplete popper-class="my-autocomplete" v-model="search" :fetch-suggestions="querySearch" placeholder="输入平面图中已有的业务空间名称进行查找"
+          width="180px" @select="handleSelect">
+          <i class="el-icon-search el-input__icon" slot="suffix" @click="handleIconClick"></i>
+          <template slot-scope="{ item }">
+            <div class="name" style="position: relative;">
+              {{ item.infos.RoomLocalName | cutString(8) }}
+              <span class="addr" style="position: absolute;right:10px;color:#409EFF;">定位</span>
+            </div>
+          </template>
+        </el-autocomplete>
+      </div>
+      <div>
+        <!-- 默认操作模式 -->
+        <div v-show="type==1">
+          <el-button @click="1">创建业务空间</el-button>
+        </div>
+        <!-- 点击已经关联的业务空间 -->
+        <div v-show="type==2">
+          <el-button type="primary" plain>重新划分业务空间</el-button>
+          <el-button type="primary">编辑空间详情</el-button>
+          <el-button plain>取 消</el-button>
+        </div>
+        <!-- 点击未关联的业务空间 -->
+        <div v-show="type==3">
+          <el-button plain>创建业务空间</el-button>
+          <el-button type="primary">从未关联元空间的业务空间中选择</el-button>
+        </div>
+        <!-- 重新划分业务空间 -->
+        <div v-show="type==4">
+          <el-button type="primary" plain>从未关联元空间的业务空间中选择</el-button>
+          <el-button plain>取 消</el-button>
+          <el-button type="primary">保存</el-button>
+        </div>
+      </div>
+      <el-button style="position: absolute;top: 10px;right: 10px;" type="text">未关联元空间的业务空间 {{num}} 条</el-button>
+    </div>
+    <!-- 底部操作按钮 -->
+    <el-row class="canvas-actions-box">
+      <div>
+        <i class="el-icon-rank"></i>
+      </div>
+      <div>
+        <i class="el-icon-rank"></i>
+      </div>
+      <div>
+        <i class="el-icon-download"></i>
+      </div>
+      <div>
+        <i class="el-icon-remove-outline"></i>
+      </div>
+      <div class="line">
+        <el-slider tooltip-class="tooltip-class" :max="0.02" :min="0.004"></el-slider>
+      </div>
+      <div>
+        <i class="el-icon-circle-plus-outline"></i>
+      </div>
+    </el-row>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      canvasWidth: 800,
+      canvasHeight: 600,
+      type: 1, // 默认操作模式
+      search: '',//搜索
+    }
+  },
+  created() {
+
+  },
+  methods: {
+    // 搜索
+    querySearch() { },
+    // 选中
+    handleSelect() { }
+  },
+  filters: {
+    cutString: function (str, len) {
+      //length属性读出来的汉字长度为1
+      if (!!str && typeof str == "string" && str.length > len) {
+        return str.substring(0, len) + "...";
+      } else {
+        return str || "--";
+      }
+    }
+  },
+}
+</script>
+<style lang="less" scoped>
+#graphy {
+  position: relative;
+  width: 100%;
+  height: calc(100% - 56px);
+  .canvas-box {
+    width: 100%;
+    height: 100%;
+  }
+  .buttons-box {
+    position: absolute;
+    .my-autocomplete {
+      li {
+        line-height: normal;
+        padding: 7px;
+        .name {
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+        .addr {
+          font-size: 12px;
+          color: #b4b4b4;
+        }
+        .highlighted .addr {
+          color: #ddd;
+        }
+      }
+    }
+  }
+  .canvas-actions-box {
+    position: absolute;
+    bottom:20px;
+    &>div{
+      float: left;
+    }
+  }
+}
+</style>

+ 4 - 8
src/views/ledger/spacelist/index.vue

@@ -35,7 +35,7 @@
           <el-button size="small">批量创建业务空间</el-button>
         </div>
       </el-row>
-      <div v-show="isMyTab == 1">
+      <div v-show="isMyTab == 1" style="width:100%;height:100%">
         <graphy @getSp="checkSpace" @dimension="checkSpace" @businessDetails="getBuinessDetails" ref="graphy"></graphy>
       </div>
       <div v-show="isMyTab == 2">
@@ -50,7 +50,8 @@ import influenceDialog from "@/components/business_space/dialogs/influenceDialog
 import detailsDialog from "@/components/business_space/dialogs/detailsDialog";
 import notRelated from "@/components/business_space/dialogs/notRelated";
 import facilityDialog from "@/components/business_space/dialogs/facilityDialog";
-import graphy from "@/components/business_space/graphy/business";
+// import graphy from "@/components/business_space/graphy/business";
+import graphy from "@/components/business_space/newGraphy/graphy";
 import handsontableMain from "@/components/business_space/business/handsontable";
 import {
   getDataDictionary,
@@ -342,13 +343,8 @@ export default {
     }
   }
   .saga-business-sapce-main {
-    flex: 1;
-    top: 40px;
-    left: 0;
-    right: 0;
-    bottom: 0;
     overflow: hidden;
-    overflow-y: auto;
+    height: 100%;
     background: #fff;
     padding: 10px;
     /deep/ .el-tabs__item.is-top {