ZZJ
2021-12-07 f79f33c6e02ddcfa72bc35020bf68e465e42bced
地图改版
3个文件已修改
151 ■■■■ 已修改文件
src/pages/internetEquipment/module/mapIndex.vue 135 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/internetEquipment/module/realTimeModule.vue 6 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/internetEquipment/views/helemetEquipment.vue 10 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/internetEquipment/module/mapIndex.vue
@@ -29,7 +29,7 @@
      class="video_icon"
      @click="hiddenVideo()"
    />
    <a v-else href="#" title="实时监控" @click="aClick()">
    <a v-if="myNode && isHidden" href="#" title="实时监控" @click="aClick()">
      <img
        src="/images/map/监控.png"
        alt=""
@@ -38,14 +38,16 @@
      />
    </a>
    <div class="video_box" v-if="myNode" :class="{ hidden: isHidden }">
    <div class="video_box" v-show="myNode" :class="{ hidden: isHidden }">
      <div class="title">
        <div class="left">
          <span class="ball"></span>
          <span class="left_info">实时监控</span>
        </div>
        <div class="right">设备编码: {{ myNode.values_.id }}</div>
        <div class="right">
          设备编码: {{ myNode && myNode.values && myNode.values_.id }}
        </div>
      </div>
      <video controls="controls" loop="loop">
@@ -53,12 +55,18 @@
      </video>
    </div>
    <div class="helmet_box" v-show="myNode">
    <div class="helmet_box" v-show="myNodeHover">
      <div class="icon_close iconfont" @click="close">&#xe729;</div>
      <div class="sn" v-if="myNode">{{ myNode.values_.lat.id }}</div>
      <div class="location" v-if="myNode">经度: {{ myNode.values_.lat }}</div>
      <div class="location" v-if="myNode">纬度: {{ myNode.values_.lng }}</div>
      <div class="info" v-if="myNode">电量: {{ myNode.values_.battery }}</div>
      <div class="sn" v-if="myNodeHover">{{ myNodeHover.values_.lat.id }}</div>
      <div class="location" v-if="myNodeHover">
        经度: {{ myNodeHover.values_.lat }}
      </div>
      <div class="location" v-if="myNodeHover">
        纬度: {{ myNodeHover.values_.lng }}
      </div>
      <div class="info" v-if="myNodeHover">
        电量: {{ myNodeHover.values_.battery }}
      </div>
      <div class="button">
        <img
          src="/images/InternetData/视频.png"
@@ -129,10 +137,11 @@
let myModify = {};
let myPolygon = {};
let mySelect = {};
let mySelect2 = {};
let overlay = {};
let overlay2 = {};
let voiceText = "";
let drawFeature = [];
export default {
  data() {
    return {
@@ -153,6 +162,7 @@
      polygonInfo: "",
      nodeFeature: [],
      myNode: null,
      myNodeHover: null,
      commentContent: "",
    };
  },
@@ -233,11 +243,8 @@
          } else if (feature.type && feature.type == "polygon") {
            myPolygon = feature;
            this.myNode = null;
            this.nodeId = "";
            return true;
          } else {
            this.myNode = null;
            return false;
          }
        },
        style: (feature) => {
@@ -267,6 +274,7 @@
        condition: pointerMove,
        filter: (feature, layer) => {
          if (feature.values_ && feature.values_.type == "node") {
            this.myNodeHover = feature;
            return true;
          } else {
            return false;
@@ -290,11 +298,16 @@
      map.addInteraction(select);
      map.addInteraction(select2);
      mySelect = select;
      mySelect2 = select2;
      select.on("select", function (e) {
        e.stopPropagation();
        overlay2.setPosition(undefined);
        //   e.stopPropagation();
        console.log("--------------");
        overlay.setPosition(undefined);
        if (e.selected.length == 0) {
          console.log("999999");
          that.polygonInfo = "";
          that.nodeId = "";
          that.myNode = null;
@@ -303,7 +316,6 @@
        if (e.selected[0].values_.type == "node") {
          that.isHidden = false;
          that.polygonInfo = "";
          that.nodeId = e.selected[0].values_.id;
          return false;
        }
@@ -313,7 +325,11 @@
        } else {
          that.polygonInfo = "新区域";
        }
        overlay.setPosition(e.mapBrowserEvent.coordinate);
        if (e.mapBrowserEvent) {
          console.log(e.mapBrowserEvent.coordinate);
          overlay.setPosition(e.mapBrowserEvent.coordinate);
        }
        return false;
      });
@@ -321,8 +337,8 @@
        if (
          e.selected.length &&
          e.selected[0].values_.type == "node" &&
          that.myNode &&
          that.myNode.values_.id == e.selected[0].values_.id
          that.myNodeHover &&
          that.myNodeHover.values_.id == e.selected[0].values_.id
        ) {
          overlay2.setPosition(e.mapBrowserEvent.coordinate);
        } else {
@@ -367,6 +383,7 @@
        feature.id = item.id;
        feature.type = "polygon";
        feature.polygonName = item.name;
        feature.data1 = item.data[1];
        this.polyFeature.push(feature);
      });
    },
@@ -424,8 +441,20 @@
      view.setCenter(transform(this.center, "EPSG:4326", "EPSG:3857"));
    },
    drawPolygon() {
      this.rangeArr = [];
      this.myNodeHover = null;
      //   this.myNode = null;
      //   this.nodeId = "";
      mySelect2.getFeatures().clear();
      mySelect.dispatchEvent({
        type: "select",
        selected: [],
      });
      this.resetMap();
      mySelect.setActive(false);
      mySelect2.setActive(false);
      this.showBtn = true;
      const draw = new Draw({
        source: myVectorSource,
@@ -459,6 +488,7 @@
          id,
          data: event.feature.getGeometry().getCoordinates()[0],
        });
        drawFeature.push(event.feature);
      });
      const modify = new Modify({ source: myVectorSource });
@@ -472,8 +502,10 @@
      myMap.addInteraction(draw);
    },
    resetMap() {
      drawFeature = [];
      this.polygonInfo = "";
      mySelect.setActive(true);
      mySelect2.setActive(true);
      this.initPolygonArr();
      const vectorSource = new VectorSource({
        features: this.polyFeature,
@@ -495,6 +527,7 @@
    },
    async savePoly() {
      mySelect.setActive(true);
      mySelect2.setActive(true);
      myMap.removeInteraction(myDraw);
      myMap.removeInteraction(myModify);
      this.showBtn = false;
@@ -525,8 +558,43 @@
          id: +item.id,
        };
      });
      await createZones({ dots_arr: arrData });
      const res = await getHelemtData();
      const res = await createZones({ dots_arr: arrData });
      if (res.status == 200) {
        this.$message({
          type: "success",
          message: "保存成功!",
        });
      } else {
        this.$message({
          type: "info",
          message: "保存失败",
        });
      }
      const res2 = await getZones();
      if (res2.data && res2.data.items && res2.data.items.length > 0) {
        this.polygonArr = res2.data.items.map((obj) => {
          obj.data = obj.dots.map((item) => {
            return transform([item[0], item[1]], "EPSG:4326", "EPSG:3857");
          });
          return obj;
        });
      }
      if (drawFeature.length > 0) {
        this.polyFeature.forEach((item) => {
          myVectorSource.removeFeature(item);
        });
        this.initPolygonArr();
        this.polyFeature.forEach((item) => {
          myVectorSource.addFeature(item);
        });
      }
      //   ;
      /*  const res = await getHelemtData();
      this.nodeArr = [];
      res.data.items.forEach((item) => {
        this.nodeArr.push({
@@ -539,7 +607,7 @@
        myVectorSource.removeFeature(item);
      });
      this.initNode();
      this.initAllNode();
      this.initAllNode(); */
    },
    delPoly() {
      this.$confirm("此操作将删除该区域, 是否继续?", "提示", {
@@ -713,10 +781,30 @@
            this.rangeArr = [];
          }
          return;
          return false;
        }
        const res = await getHelemtData({ sn: val });
        if (res.msg == "zone") {
          mySelect.getFeatures().clear();
          const polyArr = this.polyFeature.filter((item) => {
            return item.id == res.data.ID;
          });
          myPolygon = polyArr[0];
          mySelect.getFeatures().push(polyArr[0]);
          mySelect.dispatchEvent({
            type: "select",
            selected: [polyArr[0]],
            mapBrowserEvent: {
              coordinate: polyArr[0].data1,
            },
          });
          return;
        }
        const arr = [];
        if (res.data.items && res.data.items.length > 0) {
          res.data.items.forEach((obj) => {
@@ -978,6 +1066,7 @@
  }
  #polygonInfo {
    position: absolute;
    padding: 10px;
    border: 1px solid;
    color: black;
src/pages/internetEquipment/module/realTimeModule.vue
@@ -7,7 +7,11 @@
        v-for="(item, index) in boundArr"
        :key="index"
      >
        <img :src="item.snap_shot" alt="" class="warnArea" />
        <img
          :src="'http://192.168.8.10:9000' + item.snap_shot"
          alt=""
          class="warnArea"
        />
        <warnDescription
          :warnDes="{
            code: item.device_sn,
src/pages/internetEquipment/views/helemetEquipment.vue
@@ -53,6 +53,7 @@
}
.helmet-equipment {
  position: relative;
  padding: 20px;
  width: 100%;
  height: 100%;
@@ -63,20 +64,27 @@
  }
  .footer {
    height: 292px;
    position: absolute;
    top: 540px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: flex;
    justify-content: start;
    color: #4f4f4f;
    .real-time-module {
      flex: 2.35;
      height: 100%;
    }
    .elec-module {
      flex: 1;
      margin: 0 20px;
      height: 100%;
    }
    .history-module {
      flex: 1;
      height: 100%;
    }
  }
}