相机标注版式更新

hanbaoshan

2020-11-02 ee3bd8d3f0818475035a68bc04b1a87f083ebbd9

相机标注版式更新

 public/index.html

@@ -423,6 +423,15 @@
      color: #f90;
      font-size: 14px;
    }
    .s-system-manage .el-tabs--border-card .el-tabs__header .el-tabs__item{
      padding: 5px 50px;
      height: 50px;
      font-family: PingFangSC-Regular;
      font-size: 15px;
      color: #222222;
      text-align: center;
      border: 0px solid transparent;
    }
  </style>

</head>

 src/pages/labelMark/components/RightSide.vue

@@ -1,79 +1,136 @@
<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 class="figure s-system-manage">
      <el-tabs
        id="e-basic-setting"
        v-model="actPage"
        v-loading="loading"
        element-loading-text="加载中"
        type="border-card"
      >
        <el-tab-pane label="摄像机标注" name="1">
          <div class>
            <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>
          <div class="drawboard">
            <div class="mask" :class="{'edit-status-mask':isEdit}" ref="editBoard">
            <div class="drawboard shadow-box">
              <div class="mask" :class="{'edit-status-mask':isEdit}" ref="editBoard">
                <div
                  class="label"
                  @click="editLabel(item)"
                  v-for="(item,index) in labels"
                  :key="index"
                  :style="{left:`${item.x}px`, top:`${item.y}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }"
                ></div>
              </div>
              <img v-show="snapshot_url" :src="`/httpImage/${snapshot_url}`" alt />
              <div
                class="label"
                @click="editLabel(item)"
                v-for="(item,index) in labels"
                :key="index"
                :style="{left:`${item.x}px`, top:`${item.y}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }"
              ></div>
            </div>
            <img v-show="snapshot_url" :src="`/httpImage/${snapshot_url}`" alt />
            <div
              class="popBox"
              v-show="isShowPop"
              :style="`top:${curLabel.y + 22}px;left:${curLabel.x}px`"
            >
              <div class="title">标注信息</div>
              <div class="details">
                <div class="detail-item">
                  <div class="left">
                    <label for>平面坐标X:</label>
                    <span class="fix-width">{{curLabel.x}}</span>
                    <i>px</i>
                class="popBox"
                v-show="isShowPop"
                :style="`top:${curLabel.y + 22}px;left:${curLabel.x}px`"
              >
                <div class="title">标注信息</div>
                <div class="details">
                  <div class="detail-item">
                    <div class="left">
                      <label for>平面坐标X:</label>
                      <span class="fix-width">{{curLabel.x}}</span>
                      <i>px</i>
                    </div>
                    <span class="devide"></span>
                    <div class="right">
                      <label for>实际坐标X:</label>
                      <el-input type="text" size="mini" style="width:90px" v-model="curLabel.posX"></el-input>
                    </div>
                  </div>
                  <span class="devide"></span>
                  <div class="right">
                    <label for>实际坐标X:</label>
                    <el-input type="text" size="mini" style="width:90px" v-model="curLabel.posX"></el-input>
                  <div class="detail-item">
                    <div class="left">
                      <label for>平面坐标Y:</label>
                      <span class="fix-width">{{curLabel.y}}</span>
                      <i>px</i>
                    </div>
                    <span class="devide"></span>
                    <div class="right">
                      <label for>实际坐标Y:</label>
                      <el-input type="text" size="mini" style="width:90px" v-model="curLabel.posY"></el-input>
                    </div>
                  </div>
                </div>
                <div class="detail-item">
                  <div class="left">
                    <label for>平面坐标Y:</label>
                    <span class="fix-width">{{curLabel.y}}</span>
                    <i>px</i>
                  <div class="btns">
                    <el-button size="mini" type="danger" @click="deleteLabel">删除</el-button>
                    <el-button size="mini" type="primary" @click="cancle">取消</el-button>
                    <el-button size="mini" type="success" @click="submitInfo">确定</el-button>
                  </div>
                  <span class="devide"></span>
                  <div class="right">
                    <label for>实际坐标Y:</label>
                    <el-input type="text" size="mini" style="width:90px" v-model="curLabel.posY"></el-input>
                  </div>
                </div>
                <div class="btns">
                  <el-button size="mini" type="danger" @click="deleteLabel">删除</el-button>
                  <el-button size="mini" type="primary" @click="cancle">取消</el-button>
                  <el-button size="mini" type="success" @click="submitInfo">确定</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="追踪实景坐标" 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>
              </el-upload>
            </div>
            <div class="info">
              <div class="input-area">
                <div>
                  <label for>空间宽:</label>
                  <el-input v-model="spaceWidth" placeholder="请输入实际空间宽" size="small"></el-input>
                </div>
                <div>
                  <label for>空间高:</label>
                  <el-input v-model="spaceHeight" placeholder="请输入实际空间高" size="small"></el-input>
                </div>
              </div>
              <div class="pos" v-show="isShowCurPos">
                当前位置:
                <b>{{traceX}}</b>,
                <b>{{traceY}}</b>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- <el-collapse v-model="actPage" @change="chnageActPage">
        <el-collapse-item title="摄像机标注" name="1">
          
        </el-collapse-item>
        <el-collapse-item title="追踪实景坐标" name="2">
          <div class="user-upload">
@@ -103,7 +160,7 @@
            <div class="info" v-show="isShowCurPos">当前位置:{{traceX}},{{traceY}}</div>
          </div>
        </el-collapse-item>
      </el-collapse>
      </el-collapse>-->
    </div>
  </div>
</template>
@@ -134,7 +191,10 @@
      traceX: 0,
      traceY: 0,
      isShowCurPos: false,
      actPage: ['1', '2']
      actPage: '1',
      loading: false,
      spaceWidth: '',
      spaceHeight: ''
    }
  },
  computed: {
@@ -176,6 +236,9 @@
    },
    onChange (file, fileList) {
      fileList = [file]
      this.isShowCurPos = false;
      // this.traceX = e.offsetX;
      // this.traceY = e.offsetY;
      //fileList.push(file)
    },
    definedUpload (params) {
@@ -247,15 +310,13 @@
</script>

<style lang="scss">
.el-collapse-item__content{
  background: #d2dcea;
}
.figure .el-collapse-item__header{
  padding-left: 14px;
}
.right-side {
  background: #d2dcea;
  .figure {
    .el-tabs__content {
      background: #d2dcea;
      height: calc(100vh - 85px);
    }
  }
  .tool-bar {
    //width: 40px;
@@ -263,13 +324,14 @@
    padding: 10px 0 10px 20px;
    box-sizing: border-box;
    //background: rgb(250, 250, 250);
    background: rgba(26, 45, 74, 0.6);
    //margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    > div {
      cursor: pointer;
      background: rgba(245, 245, 245, 0.3);
      //background: rgba(245, 245, 245, 0.3);
      padding: 0 5px;
      height: 40px;
      margin: 7px;
@@ -278,15 +340,20 @@
      label {
        margin-right: 10px;
        color: rgb(161, 161, 161);
        color: #fff;
      }
      .el-slider {
        width: 110px;
      }
    }
  }
  .shadow-box {
    box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1);
  }
  .action-bar {
    width: 960px;
    margin: auto;
    margin-top: 30px;
    //margin-bottom: 20px;
    text-align: right;
    .drawboard-trigger {
@@ -303,7 +370,7 @@
    position: relative;
    //background: #fff;
    background: #f0ffca;
    box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1);
    //box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1);
    .mask {
      position: absolute;
      background: transparent;
@@ -324,13 +391,18 @@
      height: 540px;
      background: #f0ffca;
    }
    .right-panel {
      width: 150px;
      height: 100%;
      background: rgba(26, 45, 74, 0.7);
    }
    .popBox {
      position: absolute;
      z-index: 99;
      padding: 14px;
      border-radius: 3px;
      color: #fff;
      background: rgba(0, 0, 0, 0.7);
      background: rgba(26, 45, 74, 0.7);
      .title {
        font-weight: bold;
        text-align: left;
@@ -375,8 +447,34 @@
    margin: auto;
    padding: 50px;
    display: flex;
    .img-card{
      
    .info {
      margin-left: 20px;
      margin-top: 20px;
      text-align: left;
      font-size: 15px;
      .input-area {
        width: 300px;
        label {
          width: 80px;
          color: rgba(39, 68, 111, 0.67);
        }
        > div {
          display: flex;
          align-items: center;
          height: 40px;
        }
      }
      .pos {
        margin-top: 10px;
        text-align: left;
        color: rgba(39, 68, 111, 0.67);
        b{
          font-style: italic;
        }
        //color: #4966b7
      }
    }
    .img-card {
    }
    .upload-demo,
    .el-upload {
@@ -420,4 +518,11 @@
    }
  }
}
.el-input__inner:focus {
  outline: none;
  border-color: rgba(42, 56, 93, 71%) !important;
}
.el-upload-dragger:hover {
  border-color: rgba(42, 56, 93, 71%) !important;
}
</style>