任务管理画图时添加提示，修改按钮样式

guoshilong

2022-09-20 0dce54d925077001ae9cb1ed99c5b9db645e7df6

任务管理画图时添加提示，修改按钮样式

 src/components/OpenLayersMap/index.vue

@@ -1,14 +1,16 @@
<template>
  <div>
    <div id='map' style='width: 100%; height: 400px'>
      <div style="position: absolute;right:12px;top:12px;z-index: 999999">
      <div style="position: absolute;right:40%;top:-1%;z-index: 999999">
        <p style="margin-top: 10px">
          <Button type="primary" size="small" @click="point()">绘制点</Button>
          <Button type="primary" size="small" @click="polygon()">绘制面</Button>
          <Button type="warning" size="small" @click="clearDraw()">重置</Button>
          <el-button type="primary" size="small" @click="point()">绘制路线</el-button>
          <el-button type="danger" size="small" @click="clearDraw()">重置</el-button>
        </p>
      </div>

      <!--画线后的提示-->
      <div class="mapTip" v-if="showTip" :style="{ top: tipPosition.h + 'px', left: tipPosition.w + 'px' }">
        {{ tipTitle }}
      </div>
    </div>
  </div>
</template>
@@ -42,6 +44,12 @@
      lineVector: null,
      coordinates: [],// 保存绘画坐标地址   [[115.90490549080435, 28.746101718722358],[115.93151300423209, 28.741123538790717]]
      toData: null,// 保存数据库格式坐标地址
      showTip:false,
      tipPosition: {//提示的位置
        w: 200,
        h: 10,
      },
      tipTitle:null
    }
  },
  methods: {
@@ -145,6 +153,16 @@
      _this.coordinates = []
      _this.map.removeInteraction(_this.draw)
      _this.lineVector.getSource().clear()
      //提示
      if(!_this.showTip){
        _this.showTip = true
      }
      _this.tipTitle = "单击左键开始绘画";
      //提示器
      $("#map").off("mousemove").mousemove(function (e) {
        _this.setTipPosition(e.offsetX, e.offsetY, 5, 5);
      });

      _this.draw = new Draw({
        source: _this.lineVector.getSource(),
        type: 'LineString',
@@ -156,20 +174,24 @@
        }),
      })
      _this.map.addInteraction(_this.draw)

      // 点击事件
      _this.map.on('click', function (e) {
        // 将点坐标保存集合
        _this.coordinates.push(e.coordinate)
        _this.tipTitle = "可继续，或单击鼠标结束";
      })
      // 结束事件
      _this.draw.on('drawend', function () {

        _this.map.removeInteraction(_this.draw);
        _this.lineVector.setStyle(_this.styleFunction())// 路线画好之后的样式
        // 将点坐标集合转换为数据库数据
        let toData = _this.doData(_this.coordinates)
        // 传值给父组件
        _this.$emit('toData',toData)
        //隐藏提示
        _this.tipTitle = null;
        _this.showTip = false
      })
    },
    // 设置统一控制点击事件，需要画图方式在此处切换
@@ -295,7 +317,14 @@

      this.map.addLayer(clusters)
    },

    clearDraw(){
      let _this = this
      _this.coordinates = []
      _this.map.removeInteraction(_this.draw)
      _this.lineVector.getSource().clear()
      _this.showTip = false
      _this.tipTitle = null
    },
    // 获取新的 layer 图层对象
    getLayer() {
      return new VectorLayer({
@@ -316,7 +345,13 @@
        //   return style
        // }
      })
    }
    },
    //设置提示位置
    setTipPosition(x, y, n, m) {
      let _this = this
      _this.tipPosition.w = x + n;
      _this.tipPosition.h = y + m;
    },
  },
  mounted() {
    this.createMap()
@@ -326,5 +361,12 @@
</script>

<style>

.mapTip {
  background-color: rgb(168, 168, 168);
  padding: 5px;
  border: 1px solid #000;
  position: absolute;
  z-index: 10 !important;
  border-radius: 5px;
}
</style>

 src/const/taskinfo/taskinfo.js

@@ -81,6 +81,11 @@
        label: "name",
        value: "id"
      },
      rules:[{
        required: true,
        message: "请输入巡检人员",
        trigger: "blur"
      }]
    },
    {
      label: "任务状态",