引入simple-uploader源文件并更新assignBrowse方法,标注页面更新,首页分页器样式更新

hanbaoshan

2020-10-28 7e1762d879fc8b360e877a5828deef42eb14cc3b

 src/pages/labelMark/components/RightSide.vue

@@ -1,13 +1,28 @@
<template>
  <div class="right-side">
    <div class="figure">
      <el-collapse v-model="actPage" @change="chnageActPage">
        <el-collapse-item title="摄像机标注" name="1">
      <div class="action-bar">
            <div class="tool-bar">
              <div>
                <!-- <input type="color" ref="colorPicker" v-model="color"> -->
                <label for>拾色器:</label>
                <el-color-picker v-model="colorPick" show-alpha size="mini"></el-color-picker>
              </div>
              <div style="width:250px;">
                <label for>笔触:</label>
                <el-slider v-model="dotSize" :min="1" :max="20"></el-slider>
              </div>
              <div>
        <el-button
          class="drawboard-trigger"
          size="small"
          @click="isEdit=!isEdit"
          :icon="isEdit?'el-icon-lock':'el-icon-edit'"
        >{{isEdit?'锁定':'编辑'}}</el-button>
              </div>
            </div>
      </div>
      <div class="drawboard">
        <div class="mask" :class="{'edit-status-mask':isEdit}" ref="editBoard">
@@ -19,7 +34,7 @@
            :style="{left:`${item.x}px`, top:`${item.y}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }"
          ></div>
        </div>
        <img :src="`/httpImage/${snapshot_url}`" alt />
            <img v-show="snapshot_url" :src="`/httpImage/${snapshot_url}`" alt />
        <div
          class="popBox"
          v-show="isShowPop"
@@ -59,17 +74,36 @@
          </div>
        </div>
      </div>
        </el-collapse-item>
        <el-collapse-item title="追踪实景坐标" name="2">
          <div class="user-upload">
            <div class="img-card">
              <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                :http-request="definedUpload"
                :on-change="onChange"
                :show-file-list="false"
              >
                <el-image
                  class="preview"
                  v-if="userImg"
                  :src="userImg"
                  fit="contain"
                  @mousemove="showCurPos"
                  @mouseout="isShowCurPos=false"
                ></el-image>
                <div class="el-upload__text">
                  将文件拖到此处，或
                  <em>点击上传</em>
    </div>
    <div class="tool-bar">
      <div>
        <!-- <input type="color" ref="colorPicker" v-model="color"> -->
        <label for>拾色器:</label>
        <el-color-picker v-model="colorPick" show-alpha size="mini"></el-color-picker>
              </el-upload>
      </div>
      <div style="width:250px;">
        <label for>笔触:</label>
        <el-slider v-model="dotSize" :min="1" :max="20"></el-slider>
            <div class="info" v-show="isShowCurPos">当前位置:{{traceX}},{{traceY}}</div>
      </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
@@ -95,7 +129,12 @@
      },
      baseUrl: '',
      snapshot_url: '',
      userImg: '',
      cameraData: [],
      traceX: 0,
      traceY: 0,
      isShowCurPos: false,
      actPage: ['1', '2']
    }
  },
  computed: {
@@ -126,6 +165,29 @@
    }
  },
  methods: {
    chnageActPage () {

    },
    showCurPos (e) {
      console.log(e);
      this.isShowCurPos = true;
      this.traceX = e.offsetX;
      this.traceY = e.offsetY;
    },
    onChange (file, fileList) {
      fileList = [file]
      //fileList.push(file)
    },
    definedUpload (params) {
      let _file = params.file
      let fileReader = new FileReader()
      fileReader.onload = () => {
        this.userImg = fileReader.result
      }
      if (_file) {
        fileReader.readAsDataURL(_file)
      }
    },
    getAllCameraData () {
      getCamerasByServer().then(res => {
        if (res.success) {
@@ -185,25 +247,29 @@
</script>

<style lang="scss">
.el-collapse-item__content{
  background: #d2dcea;
}
.figure .el-collapse-item__header{
  padding-left: 14px;
}
.right-side {
  height: 100%;
  background: #d2dcea;
  .figure{
    float: left;
  }
  .tool-bar {
    float: right;
    width: 40px;
    //width: 40px;
    height: 100%;
    padding: 10px 20px;
    padding: 10px 0 10px 20px;
    box-sizing: border-box;
    background: rgb(250, 250, 250);
    margin-bottom: 40px;
    //background: rgb(250, 250, 250);
    //margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    > div {
      cursor: pointer;
      background: rgb(245, 245, 245);
      background: rgba(245, 245, 245, 0.3);
      padding: 0 5px;
      height: 40px;
      margin: 7px;
@@ -221,7 +287,7 @@
  .action-bar {
    width: 960px;
    margin: auto;
    margin-bottom: 20px;
    //margin-bottom: 20px;
    text-align: right;
    .drawboard-trigger {
      background: transparent;
@@ -233,8 +299,10 @@
    margin: auto;
    width: 960px;
    height: 540px;
    margin-bottom: 130px;
    position: relative;
    background: #fff;
    //background: #fff;
    background: #f0ffca;
    box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1);
    .mask {
      position: absolute;
@@ -258,6 +326,7 @@
    }
    .popBox {
      position: absolute;
      z-index: 99;
      padding: 14px;
      border-radius: 3px;
      color: #fff;
@@ -302,5 +371,53 @@
      }
    }
  }
  .user-upload {
    margin: auto;
    padding: 50px;
    display: flex;
    .img-card{
      
    }
    .upload-demo,
    .el-upload {
      height: 100%;
      width: 100%;
      margin: 0 auto;
    }
    .upload-demo .el-upload__input {
      visibility: hidden;
    }
    .upload-demo .el-upload-dragger {
      width: 100%;
      height: 90%;
      width: 962px;
      height: 542px;
      margin: 20px 0 0;
      background: transparent;
      /* border: none; */
      //position: relative;
      overflow: visible;
    }
    .upload-demo .el-upload__text {
      position: absolute;
      top: -24px;
      left: 50%;
      margin-left: -91px;
    }
    .upload-demo .preview {
      object-fit: contain;
      //position: relative;
      // width: 100%;
      // height: 100%;
    }
    .upload-demo .preview img {
      // position: absolute;
      // top: 50%;
      // left: 50%;
      // transform: translate(-50%, -50%);
      // width: 100%;
      // height: 100%;
    }
  }
}
</style>