监控ui

heyujie

2021-10-11 ae2d855c89ca722ac7309fdf1aa6ceed370e3b95

 src/pages/panoramicView/components/LabelMark.vue

@@ -20,7 +20,7 @@
                </div>
                <div style="width:250px;">
                  <label for>笔触:</label>
                  <el-slider v-model="dotSize" :min="1" :max="20"></el-slider>
                  <el-slider v-model="dotSize" :min="1" :max="15"></el-slider>
                </div>
                <div>
                  <el-button
@@ -111,6 +111,41 @@
                </div>
              </div>
            </div>
            <div class="panorama-info">
              <div
                class="img-wrap"
                v-if="panoramaPath"
                :style="{width:fixedW+'px',height:fixedH+'px'}"
              >
                <div class="img-area" :style="{width:imgW+'px',height:imgH+'px'}">
                  <img
                    v-if="panoramaPath"
                    :style="{width:imgW+'px',height:imgH+'px'}"
                    :src="panoramaPath"
                    @mousemove="showCurPos"
                    @mouseout="isShowCurPos=false"
                  />
                  <div
                    class="label"
                    @mouseover="labelOver(item)"
                    @mouseout="item.isShow=false"
                    v-for="item in curCameraData.panoramaCoords"
                    :key="item.id"
                    :style="{left:`${item.x}px`, top:`${item.y}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }"
                  >
                    <span class="text" v-show="item.isShow">
                      <b>{{item.x}},</b>&nbsp;
                      <b>{{item.y}}</b>
                    </span>
                  </div>
                </div>
              </div>
              <div class="pos" v-show="isShowCurPos">
                当前位置:
                <b>{{traceX}}</b>,
                <b>{{traceY}}</b>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
@@ -134,8 +169,18 @@
                @mousemove="showCurPos"
                @mouseout="isShowCurPos=false"
              ></el-image>-->
              <div class="img-wrap" v-if="panoramaPath" :style="{width:fixedW+'px',height:fixedH+'px'}">
                <img v-if="panoramaPath" :style="{width:imgW+'px',height:imgH+'px'}" :src="panoramaPath" @mousemove="showCurPos" @mouseout="isShowCurPos=false">
              <div
                class="img-wrap"
                v-if="panoramaPath"
                :style="{width:fixedW+'px',height:fixedH+'px'}"
              >
                <img
                  v-if="panoramaPath"
                  :style="{width:imgW+'px',height:imgH+'px'}"
                  :src="panoramaPath"
                  @mousemove="showCurPos"
                  @mouseout="isShowCurPos=false"
                />
              </div>

              <div class="el-upload__text">
@@ -175,10 +220,9 @@
import LeftNav from "@/components/LeftNav";
export default {
  components: { LeftNav },
  data () {
  data() {
    return {
      screenHeight: 0,
      actPage: 1,
      labels: [],
      colorPick: '#79f2fb',
      dotSize: 3,
@@ -205,7 +249,7 @@
      panoramaPath: '',
      cameraData: [],
      fixedW: 960,
      fixedH: 540,
      fixedH: 700,
      imgW: 0,
      imgH: 0,
      traceX: 0,
@@ -217,11 +261,12 @@
      spaceHeight: '',
      curCameraData: {
        cameraId: '',
        coords: []
        coords: [],
        panoramaCoords: []
      },
    }
  },
  mounted () {
  mounted() {
    this.getAllCameraData();
    this.getPanorama();
    this.screenHeight = document.documentElement.clientHeight - 20;
@@ -234,7 +279,7 @@

  watch: {
    'TreeDataPool.selectedNode': {
      handler (n, o) {
      handler(n, o) {
        let curCamera = this.cameraData.find(item => item.id == n.id);
        //设置摄像机底图
        this.snapshot_url = curCamera.snapshot_url;
@@ -242,7 +287,7 @@
      },
      deep: true
    },
    isEdit (n, o) {
    isEdit(n, o) {
      if (n) {
        this.$refs['editBoard'].addEventListener('click', this.bindListen);
      } else {
@@ -251,7 +296,16 @@
    }
  },
  methods: {
    getAllCameraData () {
    labelOver(item) {
      // debugger
      this.$nextTick(() => {
        item.isShow = true;
      })
    },
    labelout(item) {
      item.isShow = false;
    },
    getAllCameraData() {
      let _this = this;
      getCamerasByServer().then(res => {
        if (res.success) {
@@ -262,10 +316,9 @@
        console.log(e)
      })
    },
    sure () {
    sure() {
      let _this = this;
      this.$refs['labelForm'].validate(valid => {
        console.log(valid)
        if (valid) {
          _this.isShowPop = false;
          //编辑确定
@@ -274,23 +327,26 @@
            _this.curCameraData.coords[editedIndex] = JSON.parse(JSON.stringify(_this.curLabel));

          }
          console.log(_this.curCameraData.coords)
          this.$refs['labelForm'].clearValidate();
        }
      });
    },
    //获取摄像机标注
    findCameraMarks (id) {
    findCameraMarks(id) {
      getCameraMarks({ cameraId: id }).then(res => {
        if (res.success) {
          this.curCameraData.cameraId = id;
          this.curCameraData.coords = res.data.map((item, index) => ({ id: 'm' + index, x0: item.x0, y0: item.y0, x1: item.x1, y1: item.y1 }));
          this.curCameraData.coords = res.data.coords.map((item, index) => ({ id: 'm' + index, x0: item.x0, y0: item.y0, x1: item.x1, y1: item.y1 }));
          this.curCameraData.panoramaCoords = res.data.panoramaCoords.map((item, index) => ({ id: 'p' + index, x: item.x, y: item.y }));
          this.curCameraData.panoramaCoords.forEach(coord => {
            this.$set(coord, 'isShow', false)
          })
        }
      }).catch(e => {
        console.log(e)
      });
    },
    editCameraData () {
    editCameraData() {
      if (!this.TreeDataPool.selectedNode.id) {
        this.$notify({
          message: '请先选择摄像机',
@@ -300,48 +356,60 @@
      }
      this.isEdit = !this.isEdit;
    },
    async submitInfo () {
    async submitInfo() {
      this.isEdit = false;

      if (this.curCameraData.coords.length > 0 && this.curCameraData.coords.length < 4) {
        this.$message({
          type: "warning",
          message: "保存失败! 至少需要标记4处!"
        })
        return
      }

      let res = await updateCameraMarks(this.curCameraData);
      if (res.success) {
        this.$message({
          type: "success",
          message: "保存成功"
        })
        this.findCameraMarks(this.curCameraData.cameraId);
      }
    },
    getPanorama () {
    getPanorama() {
      let _this = this;
      getPanoramaPic().then(res => {
        //判断长宽比
        let ratio = res.data.width/res.data.height;
        if(ratio > (_this.fixedW/_this.fixedH)){
        let ratio = res.data.width / res.data.height;
        if (ratio > (_this.fixedW / _this.fixedH)) {
          _this.imgW = _this.fixedW;
          _this.imgH = _this.imgW*res.data.height/res.data.width;
        }else{
          _this.imgH = _this.imgW * res.data.height / res.data.width;
        } else {
          _this.imgH = _this.fixedH;
          _this.imgW = res.data.width*_this.imgH/res.data.height;
          _this.imgW = res.data.width * _this.imgH / res.data.height;
        }
        _this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
      })
    },
    showCurPos (e) {
      console.log(e);
    showCurPos(e) {
      this.isShowCurPos = true;
      this.traceX = e.offsetX;
      this.traceY = e.offsetY;
    },
    onChange (file, fileList) {
    onChange(file, fileList) {
      if (file.raw.type == "image/jpeg") {
        fileList = [file]
        this.isShowCurPos = false;
      }

    },
    definedUpload (params) {
    definedUpload(params) {
      let _this = this;
      let _file = params.file;
      let param = new FormData();
      param.append('file', params.file)
      putPanoramaPic(param).then(res => {
        debugger
        // debugger
        //_this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
        _this.getPanorama()
        _this.$parent.$refs['tracePlot'] && _this.$parent.$refs['tracePlot'].getPanorama();
@@ -349,14 +417,12 @@

    },

    bindListen (e) {
    bindListen(e) {
      this.newLabel(e);
    },
    newLabel (e) {
      console.log('点击了画板')
    newLabel(e) {
      if (this.isShowPop) return;
      //获取鼠标相对于画板的定位
      console.log('获取当前定位信息');
      this.$refs['labelForm'].resetFields();
      let target = {
        id: '',
@@ -372,14 +438,14 @@
      this.isShowPop = true;
      this.isNewLabel = true;
    },
    editLabel (label) {
    editLabel(label) {
      if (!this.isEdit) return;
      this.isShowPop = true;
      this.$refs['labelForm'].clearValidate();
      this.curLabel = JSON.parse(JSON.stringify(label));

    },
    cancle () {
    cancle() {
      this.isShowPop = false;
      //如果是未保存过的label直接删除(未保存的就是labels数组中最后一个)
      if (this.curLabel.id.startsWith('n')) {
@@ -387,7 +453,7 @@
        this.curCameraData.coords.pop();
      }
    },
    deleteLabel () {
    deleteLabel() {
      if (this.curLabel.id) {
        let index = this.curCameraData.coords.findIndex(item => item.id == this.curLabel.id);
        this.curCameraData.coords.splice(index, 1);
@@ -449,7 +515,7 @@
  }
  .resize-bar:hover ~ .resize-line::after,
  .resize-bar:active ~ .resize-line::after {
    content: '';
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
@@ -466,15 +532,19 @@
    background: #d2dcea;
    padding: 0;
    height: calc(100vh - 100px);
    overflow: auto;
    //overflow: auto;
    .mark-interface {
      display: flex;
      .left-tree {
        position: relative;
        float: left;
        //float: left;
        height: calc(100vh - 20px);
        overflow: auto;
        background: #fff;
      }
      .tree-right {
        flex: 1;
        height: calc(100vh - 90px);
        overflow: auto;
      }
    }
@@ -513,7 +583,8 @@
  }
  .action-bar {
    width: 960px;
    margin: auto;
    // margin: auto;
    margin-left: 100px;
    margin-top: 30px;
    //margin-bottom: 20px;
    text-align: right;
@@ -524,7 +595,8 @@
    }
  }
  .drawboard {
    margin: auto;
    // margin: auto;
    margin-left: 100px;
    width: 960px;
    height: 540px;
    margin-bottom: 130px;
@@ -616,6 +688,28 @@
      }
    }
  }
  .panorama-info {
    width: 1070px;
    // margin: 0 auto;
    margin-left: 100px;
    display: flex;
    padding-bottom: 30px;
    .img-wrap {
      .img-area {
        position: relative;
      }
      .label {
        position: absolute;
        border-radius: 50%;
        .text {
          color: aqua;
          font-size: 14px;
          position: absolute;
          bottom: 15px;
        }
      }
    }
  }
  .user-upload {
    margin: auto;
    padding: 50px;