feat：新增楼盘详情-下载技术资料，展示文件列表 下载时展示下载进度

feat: 新增楼盘详情-户型图一览模块，当切换到户型图时先展示户型列表 点击任意卡片跳转到该户型的详细信息
fix: 将路由中的天佑户型库改为弹出新窗口

src/assets/icons/svg/download.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1596610371757" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5226" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M504.32 46.08C244.58752 46.08 33.28 257.38752 33.28 517.12s211.30752 471.04 471.04 471.04 471.04-211.30752 471.04-471.04S764.05248 46.08 504.32 46.08z m0 842.38848c-204.76416 0-371.34848-166.58688-371.34848-371.34848S299.55584 145.77152 504.32 145.77152 875.66848 312.35584 875.66848 517.12 709.08416 888.46848 504.32 888.46848z" p-id="5227" fill="#1296db"></path><path d="M638.4256 492.3648L555.52 575.2704V291.84c0-28.27776-22.92224-51.2-51.2-51.2s-51.2 22.92224-51.2 51.2v280.8704l-80.3456-80.3456c-19.99616-19.99104-52.416-19.99104-72.4096 0-19.9936 19.99616-19.9936 52.416 0 72.4096l166.5408 166.5408a51.05152 51.05152 0 0 0 36.20608 14.99392c0.832 0 1.65888-0.07936 2.49088-0.11776 0.82944 0.04096 1.65888 0.11776 2.49088 0.11776a51.06176 51.06176 0 0 0 36.20608-14.99392l166.5408-166.5408c19.9936-19.99616 19.9936-52.416 0-72.4096-20.00128-19.99104-52.42112-19.99104-72.41472 0z" p-id="5228" fill="#1296db"></path></svg>
\ No newline at end of file

src/assets/js/api/downloadFIleWithProgress.js

+import requestFiles from "../../../plugins/axios/requestFiles";
+const axios = require('axios')
+import xhr from '@utils/http'
+export function downloadFiles(url, that, processCall, cancelTokenFlag) {
+  return requestFiles({
+    url,
+    method: 'get',
+    cancelToken: new axios.CancelToken(function executor (c) { // 设置 cancel token
+      if (that) {
+        that.sourceCnacle[cancelTokenFlag] = c
+      }
+    }),
+    onDownloadProgress: (processEvent) => {
+      processCall && processCall(processEvent)
+    }
+  })
+}
+
+export function downFilesWithProcess(params, progressCall) {
+  return xhr.downloadFileWithProcess('bnsproject/bns-project/downloadTyFile', params, processEvent => {
+     progressCall(processEvent)
+  })
+}

src/components/Layout/SidebarItem.vue

@@ -2,11 +2,16 @@
   <div v-if="!item.hidden" class="menu-wrapper">
 
     <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
-      <app-link :to="resolvePath(onlyOneChild.path)">
+      <app-link :to="resolvePath(onlyOneChild.path)" v-if="onlyOneChild.path !== '/tenioStore'">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
           <item :meta="Object.assign({},item.meta,onlyOneChild.meta)" />
         </el-menu-item>
       </app-link>
+      <a  v-else @click="toTenioStore">
+        <el-menu-item>
+          <item :meta="Object.assign({},item.meta,onlyOneChild.meta)" />
+        </el-menu-item>
+      </a>
     </template>
 
     <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
@@ -56,6 +61,9 @@ export default {
     return {}
   },
   methods: {
+    toTenioStore() {
+      window.open('http://yanfa.tenio.com:2020', '_blank')
+    },
     hasOneShowingChild(children = [], parent) {
       const showingChildren = children.filter(item => {
         if (item.hidden) {
@@ -120,7 +128,7 @@ export default {
     .svg-icon {
       margin-right: 12px;
     }
-    .submenu-title-noDropdown{
+    li {
       padding 8px 0
       line-height 40px
       i {

src/components/filelist/index.vue

+
+<template class="fileListCon">
+  <div class="fileList">
+    <div class="fileCover">
+      <img :src="fileTypeSrc" alt="" width="100%" height="100%">
+    </div>
+    <div class="fileName">
+      <span :title="fileName">{{ fileName}}</span>
+    </div>
+    <div class="fileOptions">
+      <svg-icon icon-class="download" @click="downloadEmit" style="width: 20px;height: 20px" v-if="!process || process == -1"></svg-icon>
+      <i v-else-if="process == 0" class="el-icon-loading" />
+      <span v-else>{{process + '%'}}</span>
+    </div>
+    <div class="processBar" v-if="process && Number(process) > 0">
+      <el-progress :percentage="Number(process)" :show-text="false" :stroke-width="4"></el-progress>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'FileList',
+    props: {
+      typeSrc: {
+        type: String
+      },
+      fileName: {
+        type: String
+      },
+      process: {
+        type: [Number,String],
+        default() {
+          return -1
+        }
+      }
+    },
+    data() {
+      return {
+      }
+    },
+    watch: {
+      process(val) {
+        console.log(val)
+      }
+    },
+    computed: {
+      fileTypeSrc() {
+        switch (this.typeSrc) {
+          case 'doc':
+          case 'docx':
+            return require('@assets/img/word.png')
+          case 'jpg':
+          case 'jpeg':
+          case 'gif':
+          case 'png':
+          case 'bmp':
+            return require('@assets/img/picture.png')
+          case 'pdf':
+            return require('@assets/img/pdf.png')
+          case 'xls':
+          case 'xlsx':
+            return require('@assets/img/excel.png')
+          case 'zip':
+          case 'rar':
+          case 'gz':
+            return require('@assets/img/zip.png')
+          case 'ppt':
+          case 'pptx':
+            return require('@assets/img/ppt.png')
+          case 'txt':
+            return require('@assets/img/text.png')
+        }
+      }
+    },
+    methods: {
+      downloadEmit() {
+        this.$emit('downLoadSingleFile')
+      },
+      delHide() {
+        this.isShow = false
+      },
+      delShow() {
+        this.isShow = true
+      }
+    }
+  }
+</script>
+<!--<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">-->
+<style scoped>
+  .fileList{
+    width: 395px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    position: relative;
+    flex-direction: row;
+  }
+  .fileList .fileCover {
+    width: 28px;
+    height: 30px;
+  }
+  .fileList .fileOptions {
+    text-align: center;
+    width: 60px;
+    height: 40px;
+    line-height: 40px;
+  }
+  .fileList .fileName {
+    width: 100%;
+    padding-left: 15px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    height: 40px;
+    line-height: 40px;
+  }
+  .fileList:hover{
+    cursor: pointer;
+    background:rgba(236,244,253,1);
+  }
+  .fileList .processBar {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    left: 0;
+  }
+</style>

src/components/unitCard/index.vue

 <template>
-  <div class="unitCard">
+  <div class="unitCard" @click="$emit('cardClick')">
     <div class="imgContainer">
       <viewer :images="getImgListUrl(imgList)" style="width: 100%;height: 100%">
         <img

src/plugins/axios/requestFiles.js

+import axios from 'axios'
+
+
+
+const requestFiles = axios.create({
+  baseURL: '', // api 的 base_url
+  timeout: 30000, // 请求超时时间
+  withCredentials: true,
+  headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+  responseType: 'arraybuffer'
+})
+
+requestFiles.interceptors.request.use(
+
+)
+
+// response 拦截器
+requestFiles.interceptors.response.use(
+)
+
+export default requestFiles

src/utils/http/index.js

@@ -53,3 +53,15 @@ exports.downloadFile = function (api, data) {
     data
   })
 }
+exports.downloadFileWithProcess = function (api, params, processCall,) {
+  return xhr({
+    url: api,
+    method: 'get',
+    responseType: 'blob',
+    params,
+    timeout: 0,
+    onDownloadProgress: (processEvent) => {
+      processCall(processEvent)
+    }
+  })
+}

src/views/tenioStore/index.vue

 <template>
-  <section class="storeMain">
-    <iframe src="http://yanfa.tenio.com:2020" @load="loading = false"></iframe>
+  <section class="storeMain" id="loadingMain">
+    <iframe src="http://yanfa.tenio.com:2020" id="iframe-tenioStore" @load="loadingDisppare"></iframe>
   </section>
 </template>
 
@@ -11,17 +11,23 @@
       return {
         loading: true
       }
+    },
+    beforeMount() {
+
     }
   }
 </script>
 
-<style scoped>
+<style lang="stylus">
 .storeMain{
   width: 100%;
   height: 100%;
-}
-iframe {
-  width: 100%;
-  height: 100%;
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+ .loginTop {
+   display none
+ }
 }
 </style>