H5/pzhgt.git - Gitblit

<template>
  <div class="grid_watch">
    <div class="map">
      <v-poi :map="map"></v-poi>
      <div id="map-grid"></div>
      <transition name="moveright">
        <div class="f">
          <v-m
            @on-value="onSetPoly"
            :area="area"
            :edit="item"
            v-if="+type !== 2"
          >
            <button
              class="m_btn small bgc_green"
              v-if="+type === 1"
              @click="onResetModel"
            >
              重新绘制网格区域
            </button>
          </v-m>
          <v-m2 v-else :item="item"></v-m2>
        </div>
      </transition>
    </div>
    <p class="desc">
      点击鼠标左键在地图上进行标点绘制，标记3个点自动生成网格面，可拖动网格边缘上的圆点，进行多边绘制，绘制完成后可在弹出的编辑框里进行网格基本信息编辑，为防止误操作，该页面最多可创建1个网格，若还需绘制新的网格，请在点击确定添加后，在跳转后的页面里再次点击添加后重新进入此页面再次绘制即可。
    </p>
    <div class="flex">
      <button class="m_btn" @click="onAdd" v-if="+type === 0">确认添加</button>
      <button class="m_btn" v-else-if="+type === 1" @click="onEdit">
        保存修改
      </button>
      <button
        class="m_btn"
        @click="$router.back()"
        v-if="+type === 1 || +type === 0"
      >
        取消
      </button>
      <button class="m_btn" @click="$router.back()" v-if="+type === 2">
        返回
      </button>
    </div>
  </div>
</template>
 
<script>
import vM from "./_m";
import vM2 from "./_m2";
import vPoi from "com/map/poi";
export default {
  props: {
    type: { type: [String, Number], default: 0 },
    item: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  components: { vM, vM2, vPoi },
  data() {
    return {
      map: null,
      $map: null,
      modelId: "",
      path: [],
      area: "",
      child: {}
    };
  },
  watch: {
    item: {
      handler() {
        this.setItem();
      },
      deep: true
    }
  },
  inject: ["appObject"],
  methods: {
    init() {
      let ts = this;
      this.$api.post(
        "eventgridmember/event/list",
        { pageNum: 1, pageSize: 60 },
        e => {
          let m = e.records.map(r => {
            let os = {
              path: [],
              poyConfig: {
                color: r.fillColor || "",
                lineWidth: r.lineBroadband || 1,
                line: r.lineColor,
                opacity: r.opacity || 0.5
              },
              ext: r
            };
            try {
              os.path = JSON.parse(r.data);
            } catch (e) {}
            return ts.appObject(os, {});
          });
          m = m
            .filter(r => {
              return r.path.length >= 3;
            })
            .forEach(v => {
              ts.map.polygon(
                v,
                res => {
                  let dv = res.data;
                  dv.edit.close();
                  dv.event.on("click", () => {
                    ts.childData = dv.data.ext;
                  });
                },
                1
              );
            });
        }
      );
    },
    onEdit() {
      if (!this.child.id) return demo.toast("请先绘制网格");
      if (!this.child.title) return demo.toast("请输入网格名称");
      if (!this.child.ids.length) return demo.toast("请选择网格员");
      if (this.path.length === 0) return demo.toast("请绘制网格");
      let v = this.child;
      let os = {
        area: v.area,
        data: JSON.stringify(
          this.path.map(r => {
            return [r.lng, r.lat];
          })
        ),
        gridCommunityId: v.gridCommunityId,
        lcGridId: v.lcGridId,
        fillColor: v.color,
        gridName: v.title,
        lineBroadband: v.px,
        lineColor: v.color2,
        memberIds: v.ids,
        remarks: v.desc,
        gridId: v.id
      };
      let ts = this;
      ts.$model.model("20", "", v => {
        if (v) {
          ts.$api.post("eventgridmember/event/edit", os, () => {
            demo.toast("编辑成功");
            setTimeout(() => {
              ts.$router.back();
            }, 300);
          });
        }
      });
    },
    onResetModel() {
      this.$model.model("21", "", e => {
        if (e) {
          this.map.polygonDel({ id: this.modelId });
          this.path = [];
          this.modelId = "";
          this.onCreated();
        }
      });
    },
    onAdd() {
      if (!this.child.id) return demo.toast("请先绘制网格");
      if (!this.child.title) return demo.toast("请输入网格名称");
      if (!this.child.ids.length) return demo.toast("请选择网格员");
      let v = this.child;
      let os = {
        area: v.area,
        data: JSON.stringify(
          this.path.map(r => {
            return [r.lng, r.lat];
          })
        ),
        gridCommunityId: v.gridCommunityId,
        lcGridId: v.lcGridId,
        lcGridName: v.lcGridName,
        fillColor: v.color,
        gridName: v.title,
        lineBroadband: v.px,
        lineColor: v.color2,
        memberIds: v.ids,
        remarks: v.desc
      };
      let ts = this;
      ts.$model.model("25", "", v => {
        if (v) {
          ts.$api.post("eventgridmember/event/add", os, () => {
            demo.toast("添加成功");
            setTimeout(() => {
              ts.$router.back();
            }, 300);
          });
        }
      });
    },
    onSetPoly(v) {
      console.log(v);
      this.area = v.area;
      this.child = v;
      if (this.modelId) {
        this.map.polygonOption({
          id: this.modelId,
          config: {
            color: v.color,
            bgcOpacity: v.opacity / 100,
            lineWidth: v.px,
            line: v.color2
          }
        });
      }
    },
    setItem() {
      if (!this.item.id) return 0;
      let v = this.item;
      let ts = this;
      console.log(v);
      try {
        ts.path = JSON.parse(v.data);
      } catch (e) {
        ts.path = [];
      }
      // ts.area = v.area;
      ts.map.polygon(
        {
          path: ts.path,
          poyConfig: {
            line: v.lineColor,
            color: v.fillColor,
            lineWidth: +v.lineBroadband,
            bgcOpacity: 0.5
          }
        },
        e => {
          ts.modelId = e.data.id;
          ts.area = e.data.area;
          ts.path = e.data.path;
          ts.map.polygonGets(ts.modelId, r => {
            if (r.code) {
              ts.area = r.data.area;
              ts.path = r.data.path;
            }
          });
        }
      );
    },
    onCreated() {
      let t = this;
      t.map.polygon(
        { poyConfig: { line: "#38f", color: "rgba(0, 0, 0, 0)" } },
        e => {
          t.modelId = e.data.id;
          t.area = e.data.area;
          t.path = e.data.path;
          t.map.polygonGets(t.modelId, r => {
            if (r.code) {
              t.area = r.data.area;
              t.path = r.data.path;
            }
          });
        }
      );
    }
  },
  mounted() {
    let t = this;
    t.init();
    // t.map = new DemoAMap("#map-grid", { zoom: 15, layer: [2] });
    t.map = new DemoAMap("#map-grid", {}, e => {
      if (e.code) {
        this.$map = e.data.map;
      }
    });
    t.map.style("blue");
    t.map.center(101.640511, 26.601773);
    if (+t.type === 0) {
      t.onCreated();
    } else {
      t.setItem();
    }
  }
};
</script>
<style lang="less" scoped>
.grid_watch {
  padding: 10px;
  .map {
    height: 500px;
    background-color: #eee;
    position: relative;
    margin-bottom: 15px;
    .f {
      position: absolute;
      right: 10px;
      top: 10px;
      height: calc(100% - 50px);
      width: 250px;
      background: rgba(34, 34, 34, 0.3);
      color: #fff;
    }
    #map-grid {
      width: 100%;
      height: 100%;
    }
  }
  .desc {
    font-size: 15px;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: 2px;
  }
  .m_btn {
    margin-right: 15px;
  }
}
</style>