方奕卓-场景设置-新增场景下载功能

src/page/down/style.css

@@ -1,166 +1,161 @@
-.order-check-body {
-  width: 100%;
-  float: left;
-  /*  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  -moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);*/
-  /*border: 1px solid #ebeef5;*/
-}
-
-.order_check_row {
-  display: flex;
-  width: 100%;
-}
-
-.product_info {
-  width: 50%;
-  flex-direction: column;
-  display: flex;
-  padding: 20px;
-  background: #fff;
-}
-
-.order_info {
-  width: 50%;
-  padding: 20px;
-  margin-left: 20px;
-  background: #fff;
-}
-
-.product_info_title {
-  text-align: left;
-  font-weight: 700;
-}
-
-.product_info_body {
-  margin-left: 30px;
-  display: flex;
-  margin-top: 20px;
-}
-
-.product_info_body_img {
-  width: 110px;
-  height: 110px;
-  border: 1px solid #ddd;
-}
-
-.product_img {
-  margin: 5px auto;
-  width: 100px;
-  height: 100px;
-}
-
-.product_info_body_info {
-  margin-left: 50px;
-}
-
-.product_info_body_info_item {
-  line-height: 27px;
-  text-align: left;
-}
-
-.product_info_body_info_item_title {
-  width: 100px;
-  display: inline-block;
-  margin-right: 20px;
-  font-weight: 700;
-}
-
-.order_info_title {
-  text-align: left;
-  font-weight: 700;
-  margin-bottom: 20px;
-}
-
-.order_info_body {
-  margin-left: 30px;
-  text-align: left;
-}
-
-.order_info_body_info_item {
-  line-height: 23px;
-  padding: 10px 0;
-  border-bottom: 1px solid #f5f5f5;
-  text-align: left;
-}
-
-.order_info_body_info_item_title {
-  width: 100px;
-  display: inline-block;
-  margin-right: 20px;
-  font-weight: 700;
-  vertical-align: top;
-}
-
-.fix-order_info_body_info_item_content {
-  width: 70%;
-  display: inline-block;
-}
-
-.order-management-body {
-  width: 100%;
-  margin: 30px 0 20px 0;
-  float: left;
-}
-
-.order-management-inner {
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  -moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  /*border: 1px solid #ebeef5;*/
-  padding: 30px 20px;
-  background: #fff;
-  border-radius: 5px;
-}
-
-.base-info {
-  margin: 20px 0;
-}
-
-.order-check_bottom {
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  -moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  /*border: 1px solid #ebeef5;*/
-  margin-top: 30px;
-  background: #fff;
-  border-radius: 5px;
-  padding: 20px 0;
-}
-
-.order-check_tab {
-  margin: 0 0 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.order-check_tab ul {
-  display: inline-block;
-}
-
-.order-check_tab li {
-  display: inline-block;
-  cursor: pointer;
-  color: #999;
-  line-height: 1;
-}
-
-.order-check_tab_li_active {
-  color: #000 !important;
-  font-weight: bold;
-}
-
-.order-management-table {
-  margin: 0 20px;
-}
-
-.order-management-pagination {
-  padding: 20px 20px 0;
-  position: relative;
-  text-align: right;
-}
-
-.el-input {
-  width: 220px;
-}
+.scene-management-body {
+    width: 100%;
+    float: left;
+    /*  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);*/
+    /*border: 1px solid #ebeef5;*/
+  }
+  
+  .order_check_row {
+    display: flex;
+    width: 100%;
+  }
+  
+  .product_info {
+    width: 50%;
+    flex-direction: column;
+    display: flex;
+    padding: 20px;
+    background: #fff;
+  }
+  
+  .order_info {
+    width: 50%;
+    padding: 20px;
+    margin-left: 20px;
+    background: #fff;
+  }
+  
+  .product_info_title {
+    text-align: left;
+    font-weight: 700;
+    margin-bottom: 20px;
+  }
+  
+  .product_info_body {
+    margin-left: 30px;
+    display: flex;
+  }
+  
+  .product_info_body_img {
+    width: 110px;
+    height: 110px;
+    border: 1px solid #ddd;
+  }
+  
+  .product_img {
+    margin: 5px auto;
+    width: 100px;
+    height: 100px;
+  }
+  
+  .product_info_body_info {
+    margin-left: 50px;
+  }
+  
+  .product_info_body_info_item {
+    line-height: 27px;
+    text-align: left;
+  }
+  
+  .product_info_body_info_item_title {
+    width: 100px;
+    display: inline-block;
+    margin-right: 20px;
+    font-weight: 700;
+  }
+  
+  .order_info_title {
+    text-align: left;
+    font-weight: 700;
+    margin-bottom: 20px;
+  }
+  
+  .order_info_body {
+    margin-left: 30px;
+    text-align: left;
+  }
+  
+  .order_info_body_info_item {
+    line-height: 23px;
+    padding: 10px 0;
+    border-bottom: 1px solid #f5f5f5;
+    text-align: left;
+  }
+  
+  .order_info_body_info_item_title {
+    width: 100px;
+    display: inline-block;
+    margin-right: 20px;
+    font-weight: 700;
+  }
+  
+  .order-management-body {
+    width: 100%;
+    margin: 30px 0 20px 0;
+    float: left;
+  }
+  
+  .order-management-inner {
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    /*border: 1px solid #ebeef5;*/
+    padding: 20px;
+    background: #fff;
+    border-radius: 5px;
+  }
+  
+  .base-info {
+    margin: 20px 0;
+  }
+  
+  .scene-management_bottom {
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    /*border: 1px solid #ebeef5;*/
+    margin-top: 30px;
+    background: #fff;
+    border-radius: 5px;
+    padding: 20px 0;
+  }
+  
+  .scene-management_tab {
+    margin: 0 0 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .scene-management_tab ul {
+    display: inline-block;
+  }
+  
+  .scene-management_tab li {
+    display: inline-block;
+    cursor: pointer;
+    color: #999;
+    line-height: 1;
+  }
+  
+  .scene-management_tab_li_active {
+    color: #000!important;
+    font-weight: bold;
+  }
+  
+  .order-management-table {
+    margin: 0 20px;
+  }
+  
+  .order-management-pagination {
+    padding: 20px 20px 0;
+    position: relative;
+    text-align: right;
+  }
+  
+  .el-input {
+    width: 220px;
+  }
+  

src/page/scene/index.vue

@@ -4,70 +4,103 @@
       <div class="order-management-inner">
         <div class="base-info">
           <span>关键词：</span>
-          <el-input  @keyup.enter.native="currentPage=1&&_getSceneData()" v-model="searchKey" placeholder="关键词"></el-input>
-          <el-button type="primary" @click="currentPage=1&&_getSceneData()" color='red'>搜索</el-button>
+          <el-input
+            @keyup.enter.native="currentPage=1&&_getSceneData()"
+            v-model="searchKey"
+            placeholder="关键词"
+          ></el-input>
+          <el-button type="primary" @click="currentPage=1&&_getSceneData()" color="red">搜索</el-button>
         </div>
       </div>
       <!-- 全部 -->
-      <div  class="scene-management_bottom" v-if="tabIndex==0">
+      <div class="scene-management_bottom" v-if="tabIndex==0">
         <div class="order-management-table">
           <div class="scene-management_tab">
             <ul>
-              <li v-for="(item,index) in tabs" :key="index" :class="{'scene-management_tab_li_active':item.idx==tabIndex}" @click="clickTabItem(item.idx)">{{item.name}}<span v-if="item.idx != -2" style="margin:0 10px;color: #999;font-weight: normal;">/</span></li>
+              <li
+                v-for="(item,index) in tabs"
+                :key="index"
+                :class="{'scene-management_tab_li_active':item.idx==tabIndex}"
+                @click="clickTabItem(item.idx)"
+              >
+                {{item.name}}
+                <span
+                  v-if="item.idx != -2"
+                  style="margin:0 10px;color: #999;font-weight: normal;"
+                >/</span>
+              </li>
             </ul>
             <!-- <div style="float: right;vertical-align: middle;">
               <el-button type="primary" icon="el-icon-upload" @click="" color='red'>恢复</el-button>
               <el-button type="danger" icon="el-icon-delete" @click="" color='red'>删除</el-button>
-            </div> -->
+            </div>-->
           </div>
-          <el-table key="order_table" ref="order_table" class='e-table' :data="scenes" style="width: 100%">
+
+          <!-- fyz 下载弹窗 -->
+
+          <el-table
+            key="order_table"
+            ref="order_table"
+            class="e-table"
+            :data="scenes"
+            style="width: 100%"
+          >
             <el-table-column label="场景封面" width="120">
               <template slot-scope="scope">
                 <a :href="scope.row.webSite" target="_blank" style="cursor: pointer;">
-                  <img :src="scope.row.thumb" width="100%" height="" />
+                  <img :src="scope.row.thumb" width="100%" height />
                 </a>
               </template>
             </el-table-column>
-            <el-table-column prop="sceneType" label="分类">
-            </el-table-column>
-            <el-table-column prop="sceneName" width="200" label="标题">
-            </el-table-column>
+            <el-table-column prop="sceneType" label="分类"></el-table-column>
+            <el-table-column prop="sceneName" width="200" label="标题"></el-table-column>
             <el-table-column label="拍摄时间" width="200">
               <template slot-scope="scope">
                 <div>{{new Date(scope.row.createTime).format('yyyy-MM-dd hh:mm:ss')}}</div>
               </template>
             </el-table-column>
-            <el-table-column  label="经纬度" width="200">
+            <el-table-column label="经纬度" width="200">
               <template slot-scope="scope">
                 <div v-if="scope.row.longitude">经度:{{scope.row.longitude}}</div>
                 <div v-if="scope.row.latitude">维度:{{scope.row.latitude }}</div>
                 <span v-if="!scope.row.latitude&&!scope.row.longitude">/</span>
               </template>
             </el-table-column>
-            <el-table-column prop="childName" label="设备ID" width="150">
-            </el-table-column>
-            <el-table-column prop="userName" label="用户名" width="150">
-            </el-table-column>
-            <el-table-column prop="scenekey" label="权限">
-            </el-table-column>
-            <el-table-column prop="viewCount" label="浏览数">
-            </el-table-column>
+            <el-table-column prop="childName" label="设备ID" width="150"></el-table-column>
+            <el-table-column prop="userName" label="用户名" width="150"></el-table-column>
+            <el-table-column prop="scenekey" label="权限"></el-table-column>
+            <el-table-column prop="viewCount" label="浏览数"></el-table-column>
             <el-table-column prop="sceneType" label="平台展示">
               <template slot-scope="scope">
-                <el-switch @change="_updateSceneStatus(scope.row.id,scope.row.status)" v-model="scope.row.statusBoo" active-color="#13ce66" inactive-color="#ff4949">
-                </el-switch>
+                <el-switch
+                  @change="_updateSceneStatus(scope.row.id,scope.row.status)"
+                  v-model="scope.row.statusBoo"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                ></el-switch>
               </template>
             </el-table-column>
             <el-table-column prop="status" label="操作">
               <template slot-scope="scope">
+                <el-button
+                  type="text"
+                  @click="_downloadScene(scope.row.num);"
+                  class="download_btn"
+                >下载</el-button>
                 <el-button type="text" @click="_deleScene(scope.row.id)" class="delete_btn">删除</el-button>
+                <!-- v-if="scope.row.sceneScheme>4" -->
               </template>
             </el-table-column>
           </el-table>
         </div>
         <div class="order-management-pagination">
-          <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
-          </el-pagination>
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page.sync="currentPage"
+            :page-size="pageSize"
+            layout="total, prev, pager, next, jumper"
+            :total="total"
+          ></el-pagination>
         </div>
       </div>
       <!-- 展示中 -->
@@ -75,49 +108,64 @@
         <div class="order-management-table">
           <div class="scene-management_tab">
             <ul>
-              <li v-for="(item,index) in tabs" :key="index" :class="{'scene-management_tab_li_active':item.idx==tabIndex}" @click="clickTabItem(item.idx)">{{item.name}}<span v-if="item.idx != -2" style="margin:0 10px;color: #999;font-weight: normal;">/</span></li>
+              <li
+                v-for="(item,index) in tabs"
+                :key="index"
+                :class="{'scene-management_tab_li_active':item.idx==tabIndex}"
+                @click="clickTabItem(item.idx)"
+              >
+                {{item.name}}
+                <span
+                  v-if="item.idx != -2"
+                  style="margin:0 10px;color: #999;font-weight: normal;"
+                >/</span>
+              </li>
             </ul>
             <!-- <div style="float: right;vertical-align: middle;">
               <el-button type="primary" icon="el-icon-upload" @click="" color='red'>恢复</el-button>
               <el-button type="danger" icon="el-icon-delete" @click="" color='red'>删除</el-button>
-            </div> -->
+            </div>-->
           </div>
-          <el-table key="order_table1" ref="order_table1" class='e-table' :data="scenes" style="width: 100%">
+          <el-table
+            key="order_table1"
+            ref="order_table1"
+            class="e-table"
+            :data="scenes"
+            style="width: 100%"
+          >
             <el-table-column label="场景封面" width="120">
               <template slot-scope="scope">
                 <a :href="scope.row.webSite" target="_blank" style="cursor: pointer;">
-                  <img :src="scope.row.thumb" width="100%" height="" />
+                  <img :src="scope.row.thumb" width="100%" height />
                 </a>
               </template>
             </el-table-column>
-            <el-table-column prop="sceneType" label="分类">
-            </el-table-column>
-            <el-table-column prop="sceneName" width="200" label="标题">
-            </el-table-column>
+            <el-table-column prop="sceneType" label="分类"></el-table-column>
+            <el-table-column prop="sceneName" width="200" label="标题"></el-table-column>
             <el-table-column label="拍摄时间" width="200">
               <template slot-scope="scope">
                 <div>{{new Date(scope.row.createTime).format('yyyy-MM-dd hh:mm:ss')}}</div>
               </template>
             </el-table-column>
-              <el-table-column  label="经纬度" width="200">
+            <el-table-column label="经纬度" width="200">
               <template slot-scope="scope">
                 <div v-if="scope.row.longitude">经度:{{scope.row.longitude}}</div>
                 <div v-if="scope.row.latitude">维度:{{scope.row.latitude }}</div>
                 <span v-if="!scope.row.latitude&&!scope.row.longitude">/</span>
               </template>
             </el-table-column>
-            <el-table-column prop="childName" width="150" label="设备ID">
-            </el-table-column>
-            <el-table-column prop="userName" width="150" label="用户名">
-            </el-table-column>
-            <el-table-column prop="scenekey" label="权限">
-            </el-table-column>
-            <el-table-column prop="viewCount" label="浏览数">
-            </el-table-column>
+            <el-table-column prop="childName" width="150" label="设备ID"></el-table-column>
+            <el-table-column prop="userName" width="150" label="用户名"></el-table-column>
+            <el-table-column prop="scenekey" label="权限"></el-table-column>
+            <el-table-column prop="viewCount" label="浏览数"></el-table-column>
             <el-table-column prop="sceneType" label="平台展示">
               <template slot-scope="scope">
-                <el-switch @change="_updateSceneStatus(scope.row.id,scope.row.status)" v-model="scope.row.statusBoo" active-color="#13ce66" inactive-color="#ff4949">
-                </el-switch>
+                <el-switch
+                  @change="_updateSceneStatus(scope.row.id,scope.row.status)"
+                  v-model="scope.row.statusBoo"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                ></el-switch>
               </template>
             </el-table-column>
             <el-table-column prop="status" label="操作">
@@ -128,58 +176,78 @@
           </el-table>
         </div>
         <div class="order-management-pagination">
-          <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next, jumper" :total="total">
-          </el-pagination>
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page.sync="currentPage"
+            :page-size="10"
+            layout="total, prev, pager, next, jumper"
+            :total="total"
+          ></el-pagination>
         </div>
       </div>
       <!-- 已隐藏 -->
       <div class="scene-management_bottom" v-if="tabIndex==-2">
-                  <div class="order-management-table">
+        <div class="order-management-table">
           <div class="scene-management_tab">
             <ul>
-              <li v-for="(item,index) in tabs" :key="index" :class="{'scene-management_tab_li_active':item.idx==tabIndex}" @click="clickTabItem(item.idx)">{{item.name}}<span v-if="item.idx != -2" style="margin:0 10px;color: #999;font-weight: normal;">/</span></li>
+              <li
+                v-for="(item,index) in tabs"
+                :key="index"
+                :class="{'scene-management_tab_li_active':item.idx==tabIndex}"
+                @click="clickTabItem(item.idx)"
+              >
+                {{item.name}}
+                <span
+                  v-if="item.idx != -2"
+                  style="margin:0 10px;color: #999;font-weight: normal;"
+                >/</span>
+              </li>
             </ul>
             <!-- <div style="float: right;vertical-align: middle;">
               <el-button type="primary" icon="el-icon-upload" @click="" color='red'>恢复</el-button>
               <el-button type="danger" icon="el-icon-delete" @click="" color='red'>删除</el-button>
-            </div> -->
+            </div>-->
           </div>
-          <el-table key="order_table2" ref="order_table2" class='e-table' :data="scenes" style="width: 100%">
+          <el-table
+            key="order_table2"
+            ref="order_table2"
+            class="e-table"
+            :data="scenes"
+            style="width: 100%"
+          >
             <el-table-column label="场景封面" width="120">
               <template slot-scope="scope">
                 <a :href="scope.row.webSite" target="_blank" style="cursor: pointer;">
-                  <img :src="scope.row.thumb" width="100%" height="" />
+                  <img :src="scope.row.thumb" width="100%" height />
                 </a>
               </template>
             </el-table-column>
-            <el-table-column prop="sceneType" label="分类">
-            </el-table-column>
-            <el-table-column prop="sceneName" width="200" label="标题">
-            </el-table-column>
+            <el-table-column prop="sceneType" label="分类"></el-table-column>
+            <el-table-column prop="sceneName" width="200" label="标题"></el-table-column>
             <el-table-column label="拍摄时间" width="200">
               <template slot-scope="scope">
                 <div>{{new Date(scope.row.createTime).format('yyyy-MM-dd hh:mm:ss')}}</div>
               </template>
             </el-table-column>
-              <el-table-column  label="经纬度" width="200">
+            <el-table-column label="经纬度" width="200">
               <template slot-scope="scope">
                 <div v-if="scope.row.longitude">经度:{{scope.row.longitude}}</div>
                 <div v-if="scope.row.latitude">维度:{{scope.row.latitude }}</div>
                 <span v-if="!scope.row.latitude&&!scope.row.longitude">/</span>
               </template>
             </el-table-column>
-            <el-table-column prop="childName" width="150" label="设备ID">
-            </el-table-column>
-            <el-table-column prop="userName" width="150" label="用户名">
-            </el-table-column>
-            <el-table-column prop="scenekey" label="权限">
-            </el-table-column>
-            <el-table-column prop="viewCount" label="浏览数">
-            </el-table-column>
+            <el-table-column prop="childName" width="150" label="设备ID"></el-table-column>
+            <el-table-column prop="userName" width="150" label="用户名"></el-table-column>
+            <el-table-column prop="scenekey" label="权限"></el-table-column>
+            <el-table-column prop="viewCount" label="浏览数"></el-table-column>
             <el-table-column prop="sceneType" label="平台展示">
               <template slot-scope="scope">
-                <el-switch @change="_updateSceneStatus(scope.row.id,scope.row.status)" v-model="scope.row.statusBoo" active-color="#13ce66" inactive-color="#ff4949">
-                </el-switch>
+                <el-switch
+                  @change="_updateSceneStatus(scope.row.id,scope.row.status)"
+                  v-model="scope.row.statusBoo"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                ></el-switch>
               </template>
             </el-table-column>
             <el-table-column prop="status" label="操作">
@@ -190,199 +258,380 @@
           </el-table>
         </div>
         <div class="order-management-pagination">
-          <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next, jumper" :total="total">
-          </el-pagination>
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page.sync="currentPage"
+            :page-size="10"
+            layout="total, prev, pager, next, jumper"
+            :total="total"
+          ></el-pagination>
         </div>
       </div>
-
     </div>
+
+    <el-dialog
+      width="500px"
+      title="下载场景"
+      :visible.sync="download.showSta"
+      :before-close="_handleClose"
+    >
+      <el-form v-if="download.showSta" label-width="100px">
+        <div id="progressText" class>
+          <span>{{download.downloadSta}}</span>
+        </div>
+        <div>
+          <span id="downloadDataName">{{download.downloadDataName}}</span>
+          <span id="percent">{{download.percent}}%</span>
+          <el-progress :percentage="download.percent" :color="progressColor" :show-text="false"></el-progress>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="_handleClose" class="cancle-download-btn">取消下载</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
 const _sceneTypeName = {
-  0: '其他',
-  1: '文博',
-  2: '地产',
-  3: '电商',
-  4: '餐饮',
-  5: '家居'
-}
+  0: "其他",
+  1: "文博",
+  2: "地产",
+  3: "电商",
+  4: "餐饮",
+  5: "家居"
+};
 export default {
-  data () {
+  data() {
     return {
-      getRowKeys (row) {
-        return row.number
+      getRowKeys(row) {
+        return row.number;
+      },
+      download: {
+        showSta: false,
+        downloadSta: "正在拉取数据",
+        downloadDataName: "场景数据.zip",
+        percent: 0,
+        timer: 0
       },
-      tabs: [{ name: '全部', idx: 0 }, { name: '展示中', idx: 1 }, { name: '已隐藏', idx: -2 }],
+      downloadDialogVisible: false,
+      progressColor: "#09e1c0",
+      tabs: [
+        { name: "全部", idx: 0 },
+        { name: "展示中", idx: 1 },
+        { name: "已隐藏", idx: -2 }
+      ],
       expands: [],
       expandedArr: [],
       scenes: [],
       currentPage: 1,
-      key_input: '',
+      key_input: "",
       fullscreenLoading: false,
       total: 0,
       // expressNum_input: "",
       searchDate: [],
-      searchKey: '',
-      searchOrderNumber: '',
-      searchPhone: '',
-      searchExpressNum: '',
+      searchKey: "",
+      searchOrderNumber: "",
+      searchPhone: "",
+      searchExpressNum: "",
       hasClickSearch: false,
       tabIndex: 0,
       pageSize: 10,
       value2: true
-    }
+    };
   },
   watch: {
-    currentPage () {
-      this._getSceneData()
+    currentPage() {
+      this._getSceneData();
     },
-    tabIndex () {
-      this._getSceneData()
+    tabIndex() {
+      this._getSceneData();
     }
   },
   methods: {
-    handleCurrentChange (val) {
-      let page = val
+    handleCurrentChange(val) {
+      let page = val;
       // console.log(`当前页: ${val}`)
       if (this.total > 0 && !this.hasClickSearch) {
-        this._getSceneData(page)
+        this._getSceneData(page);
       } else {
-        this._searchOrderByPage(page)
+        this._searchOrderByPage(page);
       }
     },
-    clickTabItem (idx) {
+    clickTabItem(idx) {
       // console.log(idx)
-      this.tabIndex = idx
-      this.total = 0
-      this.hasClickSearch = false
-      this.currentPage = 0
-      this.$refs.searchKey.currentValue = this.key_input = ''
-      this._getSceneData(1)
+      this.tabIndex = idx;
+      this.total = 0;
+      this.hasClickSearch = false;
+      this.currentPage = 0;
+      this.$refs.searchKey.currentValue = this.key_input = "";
+      this._getSceneData(1);
     },
-    async _getSceneData () {
-      this.fullscreenLoading = true
-      let status = this.tabIndex === 0 ? null : this.tabIndex
+    async _getSceneData() {
+      this.fullscreenLoading = true;
+      let status = this.tabIndex === 0 ? null : this.tabIndex;
 
-      let res = await this.$http.post('/manager/scene/list', {
+      let res = await this.$http.post("/manager/scene/list", {
         type: status,
         searchKey: this.searchKey,
         pageNum: this.currentPage,
         pageSize: this.pageSize
-      })
+      });
 
-      this.fullscreenLoading = false
+      this.fullscreenLoading = false;
 
       if (res.code === 0) {
-        let temp = res.data.list
+        let temp = res.data.list;
         for (var i = 0; i < temp.length; i++) {
-          temp[i].sceneType = _sceneTypeName[temp[i].sceneType]
-          temp[i].scenekey = temp[i].scenekey ? '私密' : '公开'
-          temp[i]['userName'] = temp[i]['userName'] ? temp[i]['userName'] : '未绑定'
-          let gpsStr = temp[i].gps || ''
+          temp[i].sceneType = _sceneTypeName[temp[i].sceneType];
+          temp[i].scenekey = temp[i].scenekey ? "私密" : "公开";
+          temp[i]["userName"] = temp[i]["userName"]
+            ? temp[i]["userName"]
+            : "未绑定";
+          let gpsStr = temp[i].gps || "";
 
           if (gpsStr instanceof Object) {
             JSON.parse(gpsStr, (k, v) => {
-              if (k && k === 'latitude') {
-                temp[i].latitude = this.formatDegree(v)
-              } else if (k && k === 'longitude') {
-                temp[i].longitude = this.formatDegree(v)
+              if (k && k === "latitude") {
+                temp[i].latitude = this.formatDegree(v);
+              } else if (k && k === "longitude") {
+                temp[i].longitude = this.formatDegree(v);
               }
-            })
+            });
           }
 
           if (temp[i].status === 1) {
-            temp[i].statusBoo = true
+            temp[i].statusBoo = true;
           } else if (temp[i].status === -2) {
-            temp[i].statusBoo = false
+            temp[i].statusBoo = false;
           } else {
-            temp[i].statusBoo = ''
+            temp[i].statusBoo = "";
           }
         }
-        this.scenes = temp
-        this.total = res.data.total ? res.data.total : this.total
+        this.scenes = temp;
+        this.total = res.data.total ? res.data.total : this.total;
       }
     },
 
-    formatDegree (value) {
-      value = Math.abs(value)
-      var v1 = Math.floor(value)// 度
-      var v2 = Math.floor((value - v1) * 60)// 分
-      var v3 = Math.round((value - v1) * 3600 % 60)// 秒
-      return v1 + '°' + v2 + '\'' + v3 + '"'
+    formatDegree(value) {
+      value = Math.abs(value);
+      var v1 = Math.floor(value); // 度
+      var v2 = Math.floor((value - v1) * 60); // 分
+      var v3 = Math.round(((value - v1) * 3600) % 60); // 秒
+      return v1 + "°" + v2 + "'" + v3 + '"';
     },
-    async _updateSceneStatus (num, status) {
-      let tempStatus
+    async _updateSceneStatus(num, status) {
+      let tempStatus;
       if (status === 1) {
-        tempStatus = -2
+        tempStatus = -2;
       } else if (status === -2) {
-        tempStatus = 1
+        tempStatus = 1;
       } else {
         this.$notify.error({
-          title: '错误',
-          message: '切换失败'
-        })
-        return
+          title: "错误",
+          message: "切换失败"
+        });
+        return;
       }
-      this.fullscreenLoading = true
-      await this.$http.post('/manager/scene/updateStatus', {
+      this.fullscreenLoading = true;
+      await this.$http.post("/manager/scene/updateStatus", {
         type: tempStatus,
         sceneId: num
-      })
+      });
 
-      this._getSceneData()
-      this.fullscreenLoading = false
+      this._getSceneData();
+      this.fullscreenLoading = false;
     },
 
-    _deleScene (num) {
-      this.$confirm('此操作将删除该场景, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(async () => {
-        this.fullscreenLoading = true
-        let res = await this.$http.post('/manager/scene/delete', {
-          sceneId: num
-        })
-        if (res.code === 0) {
-          this.$message({
-            type: 'success',
-            message: '删除成功!'
+    _downloadScene(sceneCode) {
+      this.fullscreenLoading = true;
+      let promise = this.$http.get(
+        `/scene/getInfo?num=${sceneCode}&t=${new Date().getTime()}`
+      ); // 请求sceneData.json数据
+      promise.then(resp => {
+        this.fullscreenLoading = false;
+        resp.data.sceneScheme = 1; // 禁止本地端放大缩小
+        this.$http
+          .post("https://test.4dkankan.com/downloadData/", {
+            sceneCode: sceneCode,
+            sceneInfo: JSON.stringify(resp)
           })
-          this._getSceneData()
-        } else {
-          this.$message({
-            type: 'error',
-            message: res.msg
-          })
-          this._getSceneData()
-        }
-        this.fullscreenLoading = false
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消删除'
+          .then(resp => {
+            // 将请求发送至服务器后再轮询
+            if (resp["sta"] === 1003) {
+              // 文件已存在
+              this._browserDownload(resp["data"]["url"]); // 调用浏览器下载文件
+            } else {
+              this.download.showSta = true;
+              this.download.downloadDataName = `${sceneCode}.zip`;
+              if (resp["sta"] === 1000 || resp["sta"] === 1002) {
+                this._downloadHandler(resp);
+              }
+              if (resp["sta"] === 1001) {
+                this._compressHandler(resp);
+              }
+              this.download.timer = setInterval(() => {
+                this.$http
+                  .get(
+                    `https://test.4dkankan.com/downloadData/process?sceneCode=${sceneCode}`
+                  )
+                  .then(resp => {
+                    console.log(resp);
+                    if (resp["sta"] === 1000) {
+                      this._downloadHandler(resp);
+                    }
+                    if (resp["sta"] === 1001) {
+                      this._compressHandler(resp);
+                    }
+                  });
+              }, 1000);
+            }
+          });
+      });
+    },
+
+    _handleClose() {
+      this.$confirm("取消下载？", "提示")
+        .then(() => {
+          this.download.showSta = false;
+          clearInterval(this.download.timer);
         })
-        this.fullscreenLoading = false
+        .catch(_ => {});
+    },
+
+    _downloadHandler(resp) {
+      this.download.downloadSta = "正在拉取数据";
+      this.download.percent = parseInt(resp["data"]["percent"]);
+      let percent = parseInt(resp["data"]["percent"]);
+      this.download.percent = percent;
+    },
+
+    _compressHandler(resp) {
+      this.download.downloadSta = "正在压缩数据";
+      let percent = parseInt(resp["data"]["percent"]);
+      this.download.percent = percent;
+      if (percent === 100) {
+        this.download.showSta = false;
+        clearInterval(this.download.timer);
+        this._browserDownload(resp["data"]["url"]);
+      }
+    },
+
+    _browserDownload(url) {
+      let a = document.createElement("a");
+      let urlArr = url.split("/");
+      let fileName = urlArr[urlArr.length - 1];
+      a.href = url;
+      a.download = fileName;
+      a.style.display = "none";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    },
+
+    _deleScene(num) {
+      this.$confirm("此操作将删除该场景, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
       })
+        .then(async () => {
+          this.fullscreenLoading = true;
+          let res = await this.$http.post("/manager/scene/delete", {
+            sceneId: num
+          });
+          if (res.code === 0) {
+            this.$message({
+              type: "success",
+              message: "删除成功!"
+            });
+            this._getSceneData();
+          } else {
+            this.$message({
+              type: "error",
+              message: res.msg
+            });
+            this._getSceneData();
+          }
+          this.fullscreenLoading = false;
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除"
+          });
+          this.fullscreenLoading = false;
+        });
     }
   },
-  created () {
-    this._getSceneData()
+  created() {
+    this._getSceneData();
   }
-}
-
+};
 </script>
 <style lang="css" scoped>
-@import './style.css';
+@import "./style.css";
 </style>
 <style type="text/css">
-.el-table__expand-icon>i {
+.el-table__expand-icon > i {
   display: none !important;
 }
 
 .delete_btn span {
-  color: #f56c6c
+  color: #f56c6c;
+}
+
+.download_btn span {
+  color: #09e1c0;
 }
 
+.el-dialog__body {
+  padding: 10px 20px;
+}
+
+.el-dialog__title {
+  font-weight: 700;
+}
+
+.el-progress-bar {
+  margin-top: 10px;
+}
+
+.el-dialog {
+  border-radius: 7px;
+}
+
+.cancle-download-btn {
+  background: #09e1c0;
+  color: white;
+  width: 120px;
+  font-size: 16px;
+  font-weight: 100;
+  letter-spacing: 1px;
+  border: none;
+}
+
+.cancle-download-btn:hover {
+  background: #09e1c0;
+  color: white;
+}
+
+.cancle-download-btn:focus {
+  color: white;
+}
+
+#progressText {
+  padding: 0 0 20px 0;
+  font-weight: 100;
+}
+
+#downloadDataName,
+#percent {
+  font-size: 16px;
+  font-weight: 200;
+  color: black;
+}
+
+#percent {
+  float: right;
+}
 </style>