batch import cameer

heyujie

2022-07-25 0759348a3064698ed79e00d2abe0748d9391d409

 src/components/CameraLeft.vue

@@ -108,8 +108,7 @@
                    placement="bottom"
                    popper-class="atooltip"
                  >
                    <button @click="importCameras('0')">
                      <!-- <i class="el-icon-video-camera"></i> -->
                    <button @click="openBatchImport">
                      <span class="iconfont" style="font-size: 16px"
                        >&#xe643;</span
                      >
@@ -372,13 +371,68 @@
        </div>
      </transition>
    </div>
    <el-dialog
      title="批量导入摄像机"
      :visible.sync="showSettingBox"
      width="30%"
      custom-class="batch-import-dialog"
    >
      <div class="fuck-basic">
        <el-input placeholder="" v-model="input2">
          <template slot="append">
            <span
              class="iconfont"
              style="font-size: 16px"
              @click="importCameras('0')"
              >&#xe643;</span
            ></template
          >
        </el-input>
        <div class="download-excel" @click="downLoadExcel">下载模板文件</div>
      </div>
      <div class="desc">
        支持导入总记录数5万条以内，文件大小在50 MB以内的xlsx、xls格式文件
      </div>
      <div class="info1" v-if="progress == 'loading'">数据校验中…</div>
      <div class="info1" v-if="progress == 'unload'">
        选择文件后将自动上传并进行数据校验
      </div>
      <div class="info1" v-if="progress == 'loaded'">校验完成</div>
      <div class="info2" v-if="progress == 'loaded'">
        全部校验通过，共 {{ succeed }} 条数据
      </div>
      <div class="info2">
        <div class="line1" v-if="progress == 'loading'">
          已校验数据量：{{ succeed }} 数据总量：{{ dataNum }}
        </div>
        <div class="line1" v-if="progress == 'loading'">
          已花费时间：{{ passTime }} s 预计时间：1 s
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showSettingBox = false">取消</el-button>
        <el-button type="primary" @click="importCams">导入</el-button>
      </span>
    </el-dialog>
    <!-- <div class="settingBox" v-if="showSettingBox">
      <div class="title">配置提示</div>
      <div class="control">
        <div class="label">启用算法仓管理</div>
        <el-switch v-model="setting" active-color="#D4E3FA" :width="44">
        </el-switch>
      </div>
      <div class="des">启用后算法管理页面配置生效，否则不生效</div>
      <div class="btns">
        <div class="confirm button" @click="closeSettingBox">确定</div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { changeEnable, deleteLocalFile, updateStatus } from "@/api/localVedio";

import { createCamera } from "@/api/camera";
import { createCamera, downloadFile } from "@/api/camera";

import bus from "@/plugin/bus";
// import TreeMenu from "@/components/treeMenu/index";
@@ -408,7 +462,6 @@
      default: 0,
    },
  },

  computed: {
    showTab() {
      return true;
@@ -464,6 +517,12 @@
  data() {
    return {
      openeds: ["0"],
      input2: "",
      dataNum: 0,
      passTime: 0,
      promiseArr: [],
      succeed: 0,
      showSettingBox: false,
      dataStack: "videoMonitor:dataStack",
      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
      installedApps: sessionStorage.getItem("apps") || [],
@@ -494,6 +553,7 @@
      menuLoading: false,
      clusterName: "",
      cluster: "",
      progress: "unload",
    };
  },
  created() {
@@ -582,6 +642,21 @@
        }
      }, 500);
    },
    downLoadExcel() {
      downloadFile().then(function (res) {
        let blobUrl = window.URL.createObjectURL(
          new Blob([res], {
            type: "application/vnd.ms-excel",
          })
        );
        const a = document.createElement("a");
        a.style.display = "none";
        a.download = "批量导入模板.xlsx";
        a.href = blobUrl;
        a.click();
        document.body.removeChild(a);
      });
    },
    handleClick(event) {
      if (event.name == "dataStack") {
        this.DataStackPool.fetchFiles();
@@ -665,11 +740,17 @@
    },

    importCameras(area) {
      this.progress = "unload";
      this.importAreaId = area;
      this.$refs["import-btn"].click();
    },

    openBatchImport() {
      // importCameras('0')
      this.showSettingBox = true;
    },
    async uploadFile(params) {
      const curSec = new Date().getTime() / 1000;
      this.progress = "loading";
      const _file = params.file;
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
@@ -687,10 +768,10 @@
            if (sheetArray.length == 0) {
              continue;
            }

            this.dataNum = sheetArray.length;
            let succeed = 0;
            let failed = 0;
            let promiseArr = [];
            this.promiseArr = [];
            for (let item in sheetArray) {
              let camera = this.newCamera();
              camera.areaid = this.importAreaId;
@@ -708,33 +789,37 @@
              tem.camera.enable = false;
              delete tem.camera.sensors;

              promiseArr.push(createCamera(tem));
              this.promiseArr.push(createCamera(tem));
            }
            this.progress = "loaded";
            let _this = this;
            Promise.allSettled(promiseArr)
              .then((res) => {
                res.forEach((item) => {
                  if (item.status === "fulfilled") {
                    succeed++;
                  } else {
                    failed++;
                  }
                });
                _this.menuLoading = false;
                _this.$message({
                  type: "success",
                  message:
                    "操作完成, 导入成功:" +
                    succeed +
                    "个 失败:" +
                    failed +
                    "个",
                });
                _this.TreeDataPool.fetchTreeData();
              })
              .catch((e) => {
                console.log(e);
              });
            this.passTime = new Date().getTime() / 1000 - curSec;

            // Promise.allSettled(promiseArr)
            //   .then((res) => {
            //     res.forEach((item) => {
            //       if (item.status === "fulfilled") {
            //         succeed++;
            //         this.succeed++;
            //       } else {
            //         failed++;
            //       }
            //     });
            //     _this.menuLoading = false;
            //     _this.$message({
            //       type: "success",
            //       message:
            //         "操作完成, 导入成功:" +
            //         succeed +
            //         "个 失败:" +
            //         failed +
            //         "个",
            //     });
            //     _this.TreeDataPool.fetchTreeData();
            //   })
            //   .catch((e) => {
            //     console.log(e);
            //   });
          }
        } catch (e) {
          this.menuLoading = false;
@@ -742,6 +827,29 @@
        }
      };
      fileReader.readAsBinaryString(_file);
    },
    importCams() {
      Promise.allSettled(this.promiseArr)
        .then((res) => {
          res.forEach((item) => {
            if (item.status === "fulfilled") {
              succeed++;
              this.succeed++;
            } else {
              failed++;
            }
          });
          this.menuLoading = false;
          this.$message({
            type: "success",
            message:
              "操作完成, 导入成功:" + succeed + "个 失败:" + failed + "个",
          });
          this.TreeDataPool.fetchTreeData();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    exceed() {
      this.$message.error("最多只能上传1个xls文件");
@@ -774,6 +882,42 @@
</style>

<style lang="scss">
.el-dialog.batch-import-dialog {
  .fuck-basic {
    display: flex;
    align-items: center;

    .download-excel {
      font-size: 14px;
      letter-spacing: 0px;
      color: #0065ff;
      cursor: pointer;
      width: 115px;
      height: 20px;
      line-height: 20px;
      margin-left: 12px;
    }
  }
  .desc {
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0px;
    color: #999999;
  }
  .info1 {
    font-size: 14px;
    font-weight: bold;
    line-height: 22px;
    letter-spacing: 0px;
    color: #666666;
  }
  .info2 {
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0px;
    color: #666666;
  }
}
.left-tree-box {
  float: left;
  width: 100%;