调整增加底库form的样式, 国标刷新按钮增加loading

zhangzengfei

2020-10-21 9b6707a857d91aac00ca840661eb4998eabd7e4f

调整增加底库form的样式, 国标刷新按钮增加loading

 src/components/LeftNav.vue

@@ -126,7 +126,8 @@
              <div class="tree-edit gb-refresh" v-show="!TreeDataPool.gbReadonly">
                <el-tooltip content="刷新" placement="top" popper-class="atooltip">
                  <button @click="refreshGB">
                    <i class="el-icon-refresh" style="font-size:16px"></i>
                    <i v-if="loadingGBTree" class="el-icon-loading" style="font-size:16px"></i>
                    <i v-else class="el-icon-refresh" style="font-size:16px"></i>
                  </button>
                </el-tooltip>
              </div>
@@ -334,17 +335,17 @@
  },

  computed: {
    showTab () {
    showTab() {
      return true;
    },
    showCam () {
    showCam() {
      return this.appName === "Camera" || this.appName === 'Cluster' || (this.appName === "Search" && (this.buttonAuthority.indexOf("search:camera") >= 0 || this.isAdmin));
    },
    showCluster () {
    showCluster() {
      return this.appName === "Cluster";
    },
    // 数据栈配置必须显示。 检索通过权限控制显示, 未安装数据栈也不显示
    showDataStack () {
    showDataStack() {
      if (this.appName === "DataStack") {
        return true;
      }
@@ -364,10 +365,10 @@

      return false;
    },
    showLock () {
    showLock() {
      return this.edit;
    },
    openeds () {
    openeds() {
      let arry = [];
      for (let i = 0; i < this.TreeDataPool.openeds.length; i++) {
        if (this.TreeDataPool.openeds[i]) {
@@ -378,7 +379,7 @@
      }
      return arry;
    },
    isAdmin () {
    isAdmin() {
      if (
        sessionStorage.getItem("userInfo") &&
        sessionStorage.getItem("userInfo") !== ""
@@ -389,7 +390,7 @@
      return false;
    }
  },
  data () {
  data() {
    return {
      cameraAuth: "videoMonitor:camera",
      dataStack: "videoMonitor:dataStack",
@@ -444,7 +445,7 @@
      menuLoading: false
    };
  },
  created () {
  created() {
    console.log(this.appName)
    console.log(this.showCam)
    if (this.showCam) {
@@ -462,44 +463,44 @@
    }
  },
  methods: {
    searchAreaData () {
    searchAreaData() {
      this.TreeDataPool.fetchTreeData();
    },
    searchDataStack () {
    searchDataStack() {
      this.DataStackPool.fetchFiles();
    },
    searchClusterData () {
    searchClusterData() {
      this.TreeDataPool.fetchClusterTree();
    },
    lockSwitch () {
    lockSwitch() {
      this.TreeDataPool.readonly = !this.TreeDataPool.readonly;
    },
    gbLockSwitch () {
    gbLockSwitch() {
      this.TreeDataPool.gbReadonly = !this.TreeDataPool.gbReadonly;
    },
    dataStackLockSwitch () {
    dataStackLockSwitch() {
      this.DataStackPool.readonly = !this.DataStackPool.readonly;
    },
    closeTree () {
    closeTree() {
      this.TreeDataPool.showTreeBox = false;
      bus.$emit('refreshCompareImg')
    },
    addNode (event) {
    addNode(event) {
      this.$refs.tree.addNode(event, { id: 0 });
    },
    addCamera (node) {
    addCamera(node) {
      bus.$emit("addCameraOnTree", node);
    },
    addDir (node) {
    addDir(node) {
      bus.$emit("addDirOnTree", node);
    },
    menuOpen (index) {
    menuOpen(index) {
      this.TreeDataPool.openeds[index] = true;
    },
    menuClose (index) {
    menuClose(index) {
      this.TreeDataPool.openeds[index] = false;
    },
    refreshGB () {
    refreshGB() {
      // 防止重复刷新
      if (this.loadingGBTree) {
        return;
@@ -513,7 +514,7 @@
        this.loadingGBTree = false;
      }, 1000 * 60);
    },
    querySearchAsync (type) {
    querySearchAsync(type) {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        if (type === "camera") {
@@ -524,7 +525,7 @@
        }
      }, 500);
    },
    handleClick (event) {
    handleClick(event) {
      if (event.name == 'dataStack') {
        this.DataStackPool.fetchFiles();
        this.DataStackPool.clean();
@@ -533,7 +534,7 @@
      this.TreeDataPool.treeActiveName = event.name
      console.log("当前激活name：", this.TreeDataPool.treeActiveName)
    },
    async changeEnable () {
    async changeEnable() {
      if (this.PollData.localVideo === 0) {
        this.$notify({
          title: "失败",
@@ -549,13 +550,13 @@
        console.log(res, '切换本地文件分析开关')
      }
    },
    getCheckedFiles () {
    getCheckedFiles() {
      let list1 = this.TreeDataPool.localVedioList.filter(i => {
        return i.checkStatus
      })
      return list1
    },
    async stopVedio (status) {
    async stopVedio(status) {
      // let list1 = this.getCheckedFiles();
      if (this.TreeDataPool.checkedLocalVedio.length == 0) {
        this.$notify({
@@ -578,7 +579,7 @@
        console.log(res, '开启暂停参数')
      }
    },
    async deleteLocalFiles () {
    async deleteLocalFiles() {
      let list1 = this.getCheckedFiles();
      console.log(list1, '已勾选的视频')
      if (list1.length == 0) {
@@ -600,16 +601,16 @@
      }
    },

    refrash (current, pageSize) {
    refrash(current, pageSize) {
      this.TreeDataPool.localCurrentPage = current;
    },

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

    async uploadFile (params) {
    async uploadFile(params) {
      const _file = params.file;
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
@@ -667,14 +668,14 @@
      };
      fileReader.readAsBinaryString(_file);
    },
    exceed () {
    exceed() {
      this.$message.error("最多只能上传1个xls文件");
    },
    //删除文件
    remove () {
    remove() {

    },
    newCamera () {
    newCamera() {
      return {
        latitude: 0,
        rtsp: "",
@@ -950,7 +951,7 @@
    color: #606266;
  }
}
.flex-box{
.flex-box {
  display: flex;
}
</style>

 src/pages/library/components/addBase.vue

@@ -5,7 +5,7 @@
      :model="form"
      :rules="rules"
      label-width="150px"
      class="mt50"
      class="add-base-form"
      label-position="left"
    >
      <el-row>
@@ -75,7 +75,7 @@
            required
            prop="startTime"
          >
            <el-col :span="11" class="">
            <el-col :span="11" class>
              <el-date-picker
                size="small"
                type="datetime"
@@ -121,7 +121,7 @@
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row> -->
      </el-row>-->
      <el-row>
        <el-col :span="6" :offset="15">
          <el-form-item style="margin-top:50px;text-align:right;" label-width="0px">
@@ -193,7 +193,7 @@
    baseObject: function (newVal, oldVal) {
      this.foreverChecked = false
      this.form = newVal
      console.log(this.form,'baseObject')
      console.log(this.form, 'baseObject')
      if (!newVal.endTime || newVal.endTime === undefined || newVal.endTime === null) {
        this.form.isForever = '1'
        this.foreverChecked = true
@@ -249,7 +249,7 @@
              tableName: this.form.tableName,
              startTime: this.$moment(this.form.startTime).format('YYYY-MM-DD HH:mm:ss'),
              tableType: this.form.tableType,
              isForever: this.foreverChecked ? '1':'0',
              isForever: this.foreverChecked ? '1' : '0',
              id: this.form.id,
              endTime: this.form.endTime ? this.$moment(this.form.endTime).format('YYYY-MM-DD HH:mm:ss') : '',
              bwType: this.form.bwType,
@@ -283,7 +283,7 @@
              tableName: this.form.tableName,
              startTime: this.$moment(this.form.startTime).format('YYYY-MM-DD 00:00:00'),
              tableType: this.form.tableType,
              isForever: this.foreverChecked ? '1':'0',
              isForever: this.foreverChecked ? '1' : '0',
              id: this.form.id,
              endTime: this.form.endTime ? this.$moment(this.form.endTime).format('YYYY-MM-DD 23:59:59') : '',
              bwType: this.form.bwType,
@@ -309,7 +309,7 @@
        })
      }
    },
    onCancle(){
    onCancle() {
      this.$emit('closeAdd')
    },
    forever(value) {
@@ -319,14 +319,14 @@
    },
    init() {
      console.log('添加底库表单收到的数据', this.baseObject, this.type)
      if(Object.keys(this.baseObject).length > 3){
      if (Object.keys(this.baseObject).length > 3) {
        this.form = this.baseObject
        if (!this.form.endTime) {
          this.foreverChecked = true
        } else {
          this.foreverChecked = false
        }
      }else{
      } else {
        this.$refs.baseForm.resetFields()
      }
    },
@@ -386,6 +386,9 @@
}
</script>
<style lang="scss">
.add-base-form {
  margin-top: 50px;
}
.el-radio__inner {
  border: 1px solid #dcdfe6;
  border-radius: 100%;
@@ -447,15 +450,15 @@
    line-height: 40px;
    outline: none;
    padding: 0 0 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
  }
  .el-input--prefix .el-input__inner {
    padding-left: 22px;
  }
  .el-input--suffix .el-input__inner {
      padding-right: 0;
    padding-right: 0;
  }
  .el-input__prefix {
    position: absolute;
@@ -463,7 +466,7 @@
    left: 0px;
    top: 0;
    text-align: center;
    color: #C0C4CC;
    color: #c0c4cc;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
@@ -473,7 +476,7 @@
    right: -2px;
    top: 0;
    text-align: center;
    color: #C0C4CC;
    color: #c0c4cc;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    pointer-events: none;