4dkankan_back/src/page/scene/index.vue

<template>
  <div class="scene-management-body" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="order-management-body">
      <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>
        </div>
      </div>
      <!-- 全部 -->
      <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>
            </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>

          <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 />
                </a>
              </template>
            </el-table-column>
            <el-table-column label="分类">
              <template slot-scope="scope">
                <el-select v-model="scope.row.sceneType" @change="changTypeHandle(scope.row)" placeholder="请选择">
                  <el-option label='其他' :value="0"></el-option>
                  <el-option label='文博' :value="1"></el-option>
                  <el-option label='地产' :value="2"></el-option>
                  <el-option label='电商' :value="3"></el-option>
                  <el-option label='餐饮' :value="4"></el-option>
                  <el-option label='家具' :value="5"></el-option>
                </el-select>
              </template>
            </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">
              <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="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>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="操作">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.sceneScheme>4"
                  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>
              </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>
        </div>
      </div>
      <!-- 展示中 -->
      <div class="scene-management_bottom" v-if="tabIndex==1">
        <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>
            </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>
          <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 />
                </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 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">
              <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="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>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="_deleScene(scope.row.id)" class="delete_btn">删除</el-button>
              </template>
            </el-table-column>
          </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>
        </div>
      </div>
      <!-- 已隐藏 -->
      <div class="scene-management_bottom" v-if="tabIndex==-2">
        <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>
            </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>
          <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 />
                </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 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">
              <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="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>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="_deleScene(scope.row.id)" class="delete_btn">删除</el-button>
              </template>
            </el-table-column>
          </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>
        </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: "家居"
};
export default {
  data() {
    return {
      getRowKeys(row) {
        return row.number;
      },
      download: {
        showSta: false,
        downloadSta: "正在拉取数据",
        downloadDataName: "场景数据.zip",
        percent: 0,
        timer: 0
      },
      downloadDialogVisible: false,
      progressColor: "#09e1c0",
      tabs: [
        { name: "全部", idx: 0 },
        { name: "展示中", idx: 1 },
        { name: "已隐藏", idx: -2 }
      ],
      expands: [],
      expandedArr: [],
      scenes: [],
      currentPage: 1,
      key_input: "",
      fullscreenLoading: false,
      total: 0,
      // expressNum_input: "",
      searchDate: [],
      searchKey: "",
      searchOrderNumber: "",
      searchPhone: "",
      searchExpressNum: "",
      hasClickSearch: false,
      tabIndex: 0,
      pageSize: 10,
      value2: true
    };
  },
  watch: {
    currentPage() {
      this._getSceneData();
    },
    tabIndex() {
      this._getSceneData();
    }
  },
  methods: {
    async changTypeHandle(item) {
      this.fullscreenLoading = true;
      await this.$http.post("/manager/scene/updateSceneType", {
        sceneType: item.sceneType,
        sceneId: item.id
      });

      this._getSceneData();
      this.fullscreenLoading = false;

    },
    handleCurrentChange(val) {
      let page = val;
      // console.log(`当前页: ${val}`)
      if (this.total > 0 && !this.hasClickSearch) {
        this._getSceneData(page);
      } else {
        this._searchOrderByPage(page);
      }
    },
    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);
    },
    async _getSceneData() {
      this.fullscreenLoading = true;
      let status = this.tabIndex === 0 ? null : this.tabIndex;

      let res = await this.$http.post("/manager/scene/list", {
        type: status,
        searchKey: this.searchKey,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      });

      this.fullscreenLoading = false;

      if (res.code === 0) {
        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 || "";

          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 (temp[i].status === 1) {
            temp[i].statusBoo = true;
          } else if (temp[i].status === -2) {
            temp[i].statusBoo = false;
          } else {
            temp[i].statusBoo = "";
          }
        }
        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 + '"';
    },
    async _updateSceneStatus(num, status) {
      let tempStatus;
      if (status === 1) {
        tempStatus = -2;
      } else if (status === -2) {
        tempStatus = 1;
      } else {
        this.$notify.error({
          title: "错误",
          message: "切换失败"
        });
        return;
      }
      this.fullscreenLoading = true;
      await this.$http.post("/manager/scene/updateStatus", {
        type: tempStatus,
        sceneId: num
      });

      this._getSceneData();
      this.fullscreenLoading = false;
    },

    _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)
          })
          .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);
        })
        .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();
  }
};
</script>
<style lang="css" scoped>
@import "./style.css";
</style>
<style type="text/css">
.el-table__expand-icon > i {
  display: none !important;
}

.delete_btn span {
  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>