Browse Source

模型文件管理新增组件路由拦截,优化加载条颜色,去掉定时刷新

YaolongHan 5 years ago
parent
commit
810b607343

+ 5 - 0
src/api/scan/request.js

@@ -1222,4 +1222,9 @@ export function manageUpdateFloor(param, success) {
 export function createRelationInFloor(param, success) {
     let url = `${baseUrl}/datacenter/fl-through-fl/link-or`;
     http.postJson(url, param, success)
+}
+//查询底图
+export function queryBaseGraphy(param, success) {
+    let url = `/modelapi/base-graph/query`;
+    http.postJson(url, param, success)
 }

+ 81 - 20
src/views/model/file/index.vue

@@ -23,8 +23,17 @@
             <div class="head">模型文件夹</div>
             <ul class="lists">
               <el-scrollbar style="height:100%;">
-                <li @click="openFolder(index,item)" v-for="(item,index) in navigationModel" :key="index" :class="[choiceIndex == index + 1 ? 'li-active' : '']" >
-                  <i :class="[choiceIndex == index + 1 ?  'el-icon-folder-opened':'el-icon-folder','icon_font']" width="40" height="40" ></i>
+                <li
+                  @click="openFolder(index,item)"
+                  v-for="(item,index) in navigationModel"
+                  :key="index"
+                  :class="[choiceIndex == index + 1 ? 'li-active' : '']"
+                >
+                  <i
+                    :class="[choiceIndex == index + 1 ?  'el-icon-folder-opened':'el-icon-folder','icon_font']"
+                    width="40"
+                    height="40"
+                  ></i>
                   <span>{{item.Name}}</span>
                 </li>
               </el-scrollbar>
@@ -48,7 +57,7 @@
           @openModelLog="queryModelLog"
           @replaceModel="repliaceModel"
           @closeUpdateFile="removePersentList"
-          @percentFinish ="queryFloorFile(currentFolderId)"
+          @percentFinish="queryFloorFile(currentFolderId)"
           :persentList="persentList"
         ></floorTable>
       </el-card>
@@ -98,7 +107,6 @@
 <script>
 import { mapGetters } from "vuex";
 import request from "@/api/model/file.js";
-
 import dasBoard from "@/views/dasboard/index";
 import modelLog from "@/components/model/file/modelLog"; //模型日志弹窗
 import repliceModel from "@/components/model/file/replaceModelDialog"; //替换模型弹窗
@@ -107,6 +115,29 @@ import addFolder from "@/components/model/file/addFolder"; //新增文件夹
 import changeFolderName from "@/components/model/file/changeFolderName"; //编辑名字
 import floorTable from "@/components/model/file/floorTable"; //右侧list表
 export default {
+  // 离开此页面前要判断是是否有下载
+  beforeRouteLeave: function(to, from, next) {
+    console.log(this.uploadClassList);
+    if (this.uploadClassList.length) {
+      this.$alert(
+        "当前页有下载内容,切换到其他页面下载将会失败。您确定要切换页面吗?",
+        "提示",
+        {
+          confirmButtonText: "确定",
+          callback: action => {
+            console.log(action);
+            if (action == "confirm") {
+              next();
+            } else {
+              next(false);
+            }
+          }
+        }
+      );
+    } else {
+      next();
+    }
+  },
   computed: {
     ...mapGetters("layout", ["projectId", "userInfo", "userId", "secret"])
   },
@@ -150,6 +181,7 @@ export default {
       },
       persentList: [], //请求进度列表
       uploadClassList: [], //请求list 用与缓存多个请求问题
+      isJump: true //是否可以调整页面
     };
   },
   methods: {
@@ -231,7 +263,7 @@ export default {
             if (item.Status == 3) {
               Object.assign(item, { isDown: false, precent: 0 });
             } else {
-               Object.assign(item, { isDown: true, precent: 100 });
+              Object.assign(item, { isDown: true, precent: 100 });
               if (this.persentList.length != 0) {
                 this.persentList.forEach(pItem => {
                   if (item.Id == pItem.Id) {
@@ -327,7 +359,10 @@ export default {
                     that.persentList.forEach((item, index) => {
                       if (item.Id == data.FloorModelId) {
                         item.precent = 101;
-                        that.persentList.splice(index, 0);
+                        setTimeout(() => {
+                          that.persentList.splice(index, 1);
+                          that.uploadClassList.splice(index, 1);
+                        }, 100);
                         return;
                       }
                     });
@@ -336,12 +371,17 @@ export default {
                     message: "文件上传成功",
                     type: "success"
                   });
+                  //  刷新list列表
+                  that.queryFloorFile(that.currentFolderId);
                 } else {
                   if (that.persentList.length != 0) {
                     that.persentList.forEach((item, index) => {
                       if (item.Id == data.FloorModelId) {
                         item.precent = 101;
-                        that.persentList.splice(index, 0);
+                        setTimeout(() => {
+                          that.persentList.splice(index, 1);
+                          that.uploadClassList.splice(index, 1);
+                        }, 100);
                         return;
                       }
                     });
@@ -350,6 +390,8 @@ export default {
                     message: val.data.Message,
                     type: "error"
                   });
+                  //  刷新list列表
+                  that.queryFloorFile(that.currentFolderId);
                 }
               }
             );
@@ -411,7 +453,10 @@ export default {
                   that.persentList.forEach((item, index) => {
                     if (item.Id == data.replaceModelItem.Id) {
                       item.precent = 101;
-                      that.persentList.splice(index, 0);
+                      setTimeout(() => {
+                        that.persentList.splice(index, 1);
+                        that.uploadClassList.splice(index, 1);
+                      }, 100);
                       return;
                     }
                   });
@@ -420,12 +465,17 @@ export default {
                   message: "文件上传成功",
                   type: "success"
                 });
+                //  刷新list列表
+                that.queryFloorFile(that.currentFolderId);
               } else {
                 if (that.persentList.length != 0) {
                   that.persentList.forEach((item, index) => {
                     if (item.Id == data.FloorModelId) {
                       item.precent = 101;
-                      that.persentList.splice(index, 0);
+                      setTimeout(() => {
+                        that.persentList.splice(index, 1);
+                        that.uploadClassList.splice(index, 1);
+                      }, 100);
                       return;
                     }
                   });
@@ -434,6 +484,8 @@ export default {
                   message: val.data.Message,
                   type: "error"
                 });
+                //  刷新list列表
+                that.queryFloorFile(that.currentFolderId);
               }
             }
           );
@@ -458,8 +510,8 @@ export default {
     removePersentList(item) {
       this.uploadClassList.forEach((i, index) => {
         if (item.Id == i.Id) {
-          this.$delete(this.uploadClassList, index);
-          //  this.uploadClassList.splice(index,0)
+          // this.$delete(this.uploadClassList, index);
+          this.uploadClassList.splice(index, 1);
           return;
         }
       });
@@ -469,19 +521,28 @@ export default {
           return;
         }
       });
-      this.queryFloorFile(this.currentFolderId);
       this.$message({
         message: "中止上传!",
         type: "success"
       });
+      //  刷新list列表
+      that.queryFloorFile(that.currentFolderId);
+    }
+  },
+  watch: {
+    uploadClassList: {
+      deep: true,
+      handler: function(val) {
+        console.log(val);
+      }
     }
   },
   mounted() {
     this.queryModel();
     // 十秒刷新次楼层列表
-    setInterval(()=>{
-       this.queryFloorFile(this.currentFolderId) 
-    },10000)
+    // setInterval(()=>{
+    //    this.queryFloorFile(this.currentFolderId)
+    // },10000)
   }
 };
 </script>
@@ -490,14 +551,14 @@ export default {
   width: 100%;
   height: 100%;
   overflow: hidden !important;
-  .col_left{
-    height:  100%;
+  .col_left {
+    height: 100%;
   }
-  .grid-content{
-    height:100%;
+  .grid-content {
+    height: 100%;
   }
   .box-card {
-    height:100%;
+    height: 100%;
   }
   .grid-left {
     padding-right: 10px;

+ 64 - 36
src/views/ready/buildfloor/drawGraphy/checkGraphy.vue

@@ -7,14 +7,7 @@
     :before-close="handleClose"
   >
     <div class="bodys">
-      <el-select v-model="value" placeholder="请选择" size="mini">
-        <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        ></el-option>
-      </el-select>
+      <el-cascader :props="props" :show-all-levels="false"  @change="handleChange"></el-cascader>
       <div>
         <el-button type="text">上传图片</el-button>
@@ -28,7 +21,7 @@
           :point="point"
           :pointWidth="pointWidth"
           :cadWidth="720"
-          :cadHeight='300'
+          :cadHeight="300"
           :isScale="true"
         ></drawFloor>
       </div>
@@ -40,43 +33,64 @@
   </el-dialog>
 </template>
 <script>
+let id = 0;
 import drawFloor from "./drawFloor";
+import { mapGetters, mapActions } from "vuex";
+import request from "@/api/model/file.js";
 export default {
   components: {
     drawFloor
   },
   props: {
-    checkGraphyVisible: Boolean
+    checkGraphyVisible: Boolean,
+    jsonKey: {
+      type: String,
+      default: "",
+      required: false
+    }
+  },
+  computed: {
+    ...mapGetters("layout", ["projectId"])
   },
   data() {
     return {
-      options: [
-        {
-          value: "选项1",
-          label: "黄金糕"
-        },
-        {
-          value: "选项2",
-          label: "双皮奶"
-        },
-        {
-          value: "选项3",
-          label: "蚵仔煎"
-        },
-        {
-          value: "选项4",
-          label: "龙须面"
-        },
-        {
-          value: "选项5",
-          label: "北京烤鸭"
-        }
-      ],
       value: "",
-      dataKey:  "/image-service/common/file_get/Fl4201050001c72ff970d2ba11e8a57543fa3e79672520181120041440bim.jsonz?systemId=revit", // key
+      dataKey:'',
       point: [40703.54760591985, 42678.14510522981], //坐标
       pointWidth: 2000,
-      findGraphyItemId: "" //高亮的id
+      findGraphyItemId: "", //高亮的id
+      props: {                 //联级框
+        lazy: true,
+        lazyLoad(node, resolve) {
+          const { level } = node;
+          if (level == 0) {
+            request.queryModel("", res => {
+              const nodes = Array.from(res.Content).map(item => ({
+                value: item.Id,
+                label: item.Name,
+                leaf: level >= 1
+              }));
+              // 通过调用resolve将子节点数据返回,通知组件数据加载完成
+              resolve(nodes);
+            });
+          } else {
+            // 查询楼层文件
+            let data = {
+              FolderId: node.value,
+              ProjectId: this.projectId
+            };
+            request.queryFloorList(data, res => {
+                const nodes = Array.from(res.Content).map(item => ({
+                  value: item.Url,
+                  label: item.FloorName,
+                  leaf: level >= 1
+                }));
+                // 通过调用resolve将子节点数据返回,通知组件数据加载完成
+                resolve(nodes);
+            });
+          }
+        }
+      },
     };
   },
   methods: {
@@ -84,10 +98,24 @@ export default {
       this.$emit("handleCloseCGraphy");
     },
     // 绑定图片
-    bindGraphy() {}
+    bindGraphy() {},
+    initOption() {
+      // let data = {
+      //   FloorName: item.FloorLocalName,
+      //   ProjectId: this.projectId
+      // };
+    },
+    queryModel() {
+      return new Promose((resolve, reject) => {});
+    },
+    // 点击多级联动
+    handleChange(val){
+     this.dataKey = val[1];
+    }
   },
   mounted() {
-  },
+    this.initOption();
+  }
 };
 </script>
 <style lang="less">

+ 2 - 1
src/views/ready/buildfloor/drawGraphy/drawFloor.vue

@@ -116,7 +116,8 @@ export default {
       this.drawMainScene = new mainScene(null);
       this.drawMainScene
         .urlGetData(
-          "/image-service/common/file_get/Fl4201050001c72ff970d2ba11e8a57543fa3e79672520181120041440bim.jsonz?systemId=revit"
+          // "/image-service/common/file_get/Fl4201050001c72ff970d2ba11e8a57543fa3e79672520181120041440bim.jsonz?systemId=revit", ///////////测试路径
+          this.dataKey       //开发url 
         )
         .then(() => {
           //  将场景赋给view对图进行绘制

+ 62 - 0
src/views/ready/buildfloor/drawGraphy/operateGraphyItem.vue

@@ -0,0 +1,62 @@
+<template>
+  <div id="operateGraphyItem">
+    <div class="div-box">
+      <i class="el-icon-rank"></i>
+    </div>
+    <div class="div-box">
+      <i class="el-icon-rank"></i>
+    </div>
+    <div class="div-box">
+      <i class="el-icon-download"></i>
+    </div>
+    <div class="div-box">
+      <i class="el-icon-circle-plus-outline"></i>
+    </div>
+    <div class="line">
+      <el-slider tooltip-class="tooltip-class" v-model="value1"></el-slider>
+    </div>
+    <div class="div-box">
+      <i class="el-icon-remove-outline"></i>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      value1: ""
+    };
+  }
+};
+</script>
+<style lang="less">
+#operateGraphyItem {
+  display: flex;
+  position: relative;
+  border: 1px #ddd solid;
+  border-radius: 5px;
+  overflow: hidden;
+  .div-box {
+    font-size: 24px;
+    width: 40px;
+    height: 40px;
+    background: #67c23a;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    border-right: 1px #ddd solid;
+  }
+  .line {
+    width: 200px;
+    font-size: 12px;
+    display: block;
+    background: #67c23a;
+    border-right: 1px #ddd solid;
+    .tooltip-class {
+      width: 100%;
+      background-color: #409eff;
+    }
+  }
+}
+</style>

+ 26 - 18
src/views/ready/buildfloor/index.vue

@@ -51,7 +51,10 @@
             </el-table-column>
             <el-table-column prop="Datasource" label="平面图">
               <template slot-scope="scope">
-                <p v-if="scope.row.StructureInfo&&scope.row.StructureInfo.FloorMap" @click="checfDrawImg(scope.row,1)">
+                <p
+                  v-if="scope.row.StructureInfo&&scope.row.StructureInfo.FloorMap"
+                  @click="checfDrawImg(scope.row,1)"
+                >
                   <i class="iconfont icon-floorplan"></i>
                   查看平面图
                 </p>
@@ -133,7 +136,10 @@
     <!-- 添加贯通关系弹窗 -->
     <addConnectivity ref="addConnectivity" @refresh="refresh"></addConnectivity>
     <!-- 查看图片弹窗 -->
-    <checkGraphy :checkGraphyVisible="checkGraphyVisible"  @handleCloseCGraphy="checkGraphyVisible=false"></checkGraphy>
+    <checkGraphy
+      :checkGraphyVisible="checkGraphyVisible"
+      @handleCloseCGraphy="checkGraphyVisible=false"
+    ></checkGraphy>
   </div>
 </template>
 
@@ -182,7 +188,8 @@ export default {
       },
       loading: false, //列表loading
       curBuildId: "", //当前选中的建筑id
-      curFloorId: "" //当前选中的楼层id
+      curFloorId: "", //当前选中的楼层id
+      jsonKey: ""
     };
   },
   computed: {
@@ -218,21 +225,21 @@ export default {
     },
     //add build
     addBuild() {
-      this.$message.warning('开发中...')
-      return
-      this.$refs.addBuildDialog.showDialog()
+      this.$message.warning("开发中...");
+      return;
+      this.$refs.addBuildDialog.showDialog();
     },
     //delete build
     delBuild() {
-      this.$message.warning('开发中...')
-      return
-      this.delText = '建筑';
-      this.delDialogVis = true
+      this.$message.warning("开发中...");
+      return;
+      this.delText = "建筑";
+      this.delDialogVis = true;
     },
     //edit build
     editBuild() {
-      this.$message.warning('开发中...')
-      return
+      this.$message.warning("开发中...");
+      return;
     },
     //delete floor
     handleDelete(floor) {
@@ -291,14 +298,15 @@ export default {
       this.$refs.addConnectivity.floor = row;
     },
     // 查看平面图
-    checfDrawImg(item,index) {
-      if (1 == index) {
+    checfDrawImg(item, index) {
+      if (3 == index) {
         // 查看
+        this.jsonKey = "";
         this.checkGraphyVisible = true;
-        this.repetitionGraphyVisible = false;
-      } else{
-         this.$router.push({ name: 'repetitionGraphy', query:{item}})
-      } 
+      } else {
+        this.jsonKey = item.StructureInfo.FloorMap;
+        this.$router.push({ name: "repetitionGraphy",query:{jsonKey:this.jsonKey}});
+      }
     }
   },
   watch: {

+ 20 - 32
src/views/ready/buildfloor/repetitionGraphy.vue

@@ -13,8 +13,8 @@
         :dataKey="dataKey"
         :point="point"
         :pointWidth="pointWidth"
-        :cadWidth="1500"
-        :cadHeight="800"
+        :cadWidth="1400"
+        :cadHeight="700"
         :isScale="false"
         indexs="repetion"
       ></drawFloor>
@@ -24,36 +24,28 @@
       :checkGraphyVisible="checkGraphyVisible"
       @handleCloseCGraphy="checkGraphyVisible=false"
     ></checkGraphy>
-    <!-- 操作列表 -->
-    <div class="operateList">
-      <el-button-group>
-        <el-button icon="el-icon-rank"></el-button>
-        <el-button icon="el-icon-download"></el-button>
-      </el-button-group>
-      <div class="slider">
-        <el-button size="mini" icon="el-icon-circle-plus-outline"></el-button>
-        <el-slider class="slider-item" size="mini" v-model="slidervalue"></el-slider>
-        <el-button size="mini" icon="el-icon-remove-outline"></el-button>
-      </div>
+    <div id="operateList">
+      <repetitionGraphy></repetitionGraphy>
     </div>
   </div>
 </template>
 <script>
 import drawFloor from "./drawGraphy/drawFloor";
 import checkGraphy from "./drawGraphy/checkGraphy"; //查看图片
+import repetitionGraphy from "./drawGraphy/operateGraphyItem" //各个item
 export default {
   components: {
     drawFloor,
-    checkGraphy
+    checkGraphy,
+    repetitionGraphy
   },
   props: {
-    repetitionGraphyVisible: Boolean
+    repetitionGraphyVisible: Boolean,
   },
   data() {
     return {
       checkGraphyVisible: false, //查看平面图弹窗
-      dataKey:
-        "/image-service/common/file_get/Fl4201050001c72ff970d2ba11e8a57543fa3e79672520181120041440bim.jsonz?systemId=revit", // key
+      dataKey:"",
       point: [40703.54760591985, 42678.14510522981], //坐标
       pointWidth: 2000,
       findGraphyItemId: "", //高亮的id
@@ -71,33 +63,29 @@ export default {
     changeGraphy() {
       this.checkGraphyVisible = true;
     }
-  }
+  },
+  created() {
+    this.dataKey = `/image-service/common/file_get/${this.$route.query.jsonKey}?systemId=revit`;
+  },
 };
 </script>
 <style lang="less">
 #repetitionGraphy {
   width: 100%;
   margin: 0 auto;
-  height: auto;
+  height: 100%;
   background: #fff;
   position: relative;
+  padding-top: 10px;
+  padding-left: 10px;
   .drawImg {
     width: 100%;
     margin: 0 auto;
   }
-  .operateList {
-    display: flex;
-    .slider {
-      width: 200px;
-      height: 31px;
-      padding-top: -2px;
-      border: 1px solid #dcdfe6;
-      border-left: none;
-      border-radius: 2px;
-      .slider-item {
-        margin-top: -2px;
-      }
-    }
+  #operateList{
+    position: absolute;
+    right: 200px;
+    bottom: 100px;
   }
 }
 </style>