dvcp_v2_webapp/project/sass/apps/grid/AppGridBlock/components/add.vue

<template>
  <div class="add-block">
    <ai-detail>
      <template #title>
        <ai-title
            :title="pageTitle"
            :isShowBack="true"
            :isShowBottomBorder="true"
            @onBackClick="cancel(false)"
        />
      </template>
      <template #content>
        <el-form ref="rules" :model="forms" :rules="formRules" size="small" label-suffix="：" label-width="120px">
          <ai-card title="基础信息">
            <template slot="content">
              <el-form-item label="网格名称" prop="girdName">
                <el-input v-model="forms.girdName" placeholder="请输入…" :maxlength="50" show-word-limit clearable/>
              </el-form-item>
              <el-form-item label="网格长" prop="girdMemberManageList">
                <AiUserGet :instance="instance" v-model="forms.girdMemberManageList" isShowUser :props="{label:'wxUserId'}"/>
              </el-form-item>
              <el-form-item label="网格员" prop="girdMemberList">
                <AiUserGet :instance="instance" v-model="forms.girdMemberList" isShowUser :props="{label:'wxUserId'}"/>
              </el-form-item>
            </template>
          </ai-card>
          <ai-card title="其他信息">
            <template slot="content">
              <el-row type="flex">
                <div class="fill">
                  <el-form-item label="初始日期" prop="startDate">
                    <el-date-picker
                        v-model="forms.startDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                        style="width: 100%;"/>
                  </el-form-item>
                  <el-form-item label="终止日期" prop="endDate">
                    <el-date-picker v-model="forms.endDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 100%;"/>
                  </el-form-item>
                </div>
                <div class="fill">
                  <el-form-item label="面积" prop="area">
                    <el-input v-model="forms.area" placeholder="面积㎡" clearable/>
                  </el-form-item>
                </div>
              </el-row>
              <el-form-item label="网格地址" prop="address">
                <el-input v-model="forms.address" placeholder="限200字" maxlength="200"></el-input>
              </el-form-item>
              <el-form-item label="网格范围" prop="enclosure">
                <el-button size="small" @click="showMap = true">地图标绘</el-button>
              </el-form-item>
            </template>
          </ai-card>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="cancel(false)" class="delete-btn footer-btn">
          取 消
        </el-button>
        <el-button type="primary" @click="save()" class="footer-btn">
          提 交
        </el-button>
      </template>
    </ai-detail>
    <ai-dialog
        title="网格范围"
        :visible.sync="showMap"
        :customFooter="true"
        :destroyOnClose="true"
        @opened="beforeSelectMap"
        border
        width="850px"
    >
      <div class="map">
        <div class="tipinput">
          <el-input
              v-model="searchAddress"
              @change="addressChange"
              clearable
              placeholder="请输入关键字"
              id="tipinput"
              size="medium"
              style="width: 200px"
          />
        </div>
        <div id="panel"/>
        <div class="container" id="container"></div>
        <el-button-group style="margin-top: 8px" v-if="forms.plottingStatus==1">
          <el-button type="primary" size="mini" @click="polyEditor.open()">开始编辑</el-button>
          <el-button size="mini" @click="polyEditor.close()">结束编辑</el-button>
        </el-button-group>
        <el-button-group
            style="margin-top: 8px"
            v-if="forms.plottingStatus == 0"
        >
          <el-button size="mini" @click="draw('polygon')">开始绘制多边形</el-button>
          <!-- <el-button  size="mini" @click="close()">关闭绘制</el-button> -->
          <el-button size="mini" @click="clear()">清除绘制</el-button>
        </el-button-group>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button size="medium" @click="showMap = false">取消</el-button>
        <el-button type="primary" size="medium" @click="surePotting()">确认</el-button>
      </div>
    </ai-dialog>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import {mapState} from "vuex";

export default {
  name: "addBlock",
  props: {
    instance: Function,
    dict: Object,
    params: Object,
  },
  data() {
    return {
      forms: {
        girdMemberManageList: [],
        girdMemberList: []
      },
      showMap: false,
      map: "",
      mouseTool: "",
      searchAddress: "",
      placeSearch: "",
      overlays: [],
      options: [],
      path: [],
      location: {},
      polyEditor: "",
      title: "添加网格区块",
      parentGirdInfo: {},
    };
  },
  computed: {
    ...mapState(["user"]),
    formRules() {
      return {
        girdName: [
          {required: true, message: "请输入网格名称", trigger: "change"},
        ],
        girdLevel: [
          {required: true, message: "请选择网格层级", trigger: "change"},
        ],
        girdCode: [
          {required: true, message: "请输入网格编号"},
          {pattern: /^\d+$/g, message: "请输入数字"},
        ]
      };
    },
    unitProps() {
      return {
        value: "id",
        checkStrictly: true,
        emitPath: false,
      };
    },
    unitOps() {
      let initData = JSON.parse(JSON.stringify(this.options)),
          ops = initData.filter((e) => !e.parentId);
      ops.map((e) => this.addChild(e, initData));
      return ops;
    },
    pageTitle() {
      return this.isEdit ? "编辑网格区块" : "添加网格区块"
    },
    isEdit() {
      return !!this.$route.query.id;
    }
  },
  created() {
    this.getCorpLocation()
    if (this.isEdit) {
      this.searchDetail();
    } else {
      this.forms = this.$route.query
    }
  },
  methods: {
    cancel() {
      this.$router.push({})
    },
    // 获取所有单位
    getAllUnit(data) {
      this.options = [];
      this.instance.post("/admin/sysunit/getAll", null, {
        params: {areaId: data},
      }).then((res) => {
        if (res?.data) {
          res.data = res.data.map((a) => {
            return {...a, label: a.name}
          });
          this.options = res.data.filter((e) => !e.parentId);
          this.options.map((t) => this.addChild(t, res.data));
        }
      });
    },
    beforeSelectMap() {
      AMapLoader.load({
        key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.MouseTool", "AMap.PlaceSearch", "AMap.PolygonEditor"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: {
          // 是否加载 AMapUI，缺省不加载
          version: "1.1", // AMapUI 缺省 1.1
          plugins: [], // 需要加载的 AMapUI ui插件
        },
      })
      .then((AMap) => {
        this.map = new AMap.Map("container", {
          resizeEnable: true,
        });
        if (this.forms.plottingStatus == 1) {
          let path = [];
          this.forms.points.map((e, index) => {
            path[index] = [e.lng, e.lat];
          });
          let polygon = new AMap.Polygon({
            path: path,
            strokeColor: "#FF33FF",
            strokeWeight: 6,
            strokeOpacity: 0.2,
            fillOpacity: 0.4,
            fillColor: "#1791fc",
            zIndex: 50,
            bubble: true,
          });
          this.map.add([polygon]);
          this.map.setFitView();
          this.polyEditor = new AMap.PolygonEditor(this.map, polygon);
        } else {
          this.mouseTool = new AMap.MouseTool(this.map);
          // this.map.add(new AMap.Marker({
          //     position:this.map.getCenter()
          // }));
          this.placeSearch = new AMap.PlaceSearch({
            pageSize: 3, // 单页显示结果条数
            pageIndex: 1, // 页码
            city: "", // 兴趣点城市
            citylimit: false, //是否强制限制在设置的城市内搜索
            map: this.map, // 展现结果的地图实例
            panel: "panel", // 结果列表将在此容器中进行展示。
            autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
          });
          // this.map.setZoomAndCenter(14, [this.location.lng, this.location.lat], false, 600);
          this.eventOn();
        }
      })
    },
    getCorpLocation() {
      this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
        if (res?.data) {
          this.location = res.data
        }
      })
    },
    //地图事件绑定
    eventOn() {
      this.path = [];
      this.overlays = [];
      this.map.on("mousemove", null, this);
      this.mouseTool.on("draw", ({obj}) => {
        obj.getPath().map((e) => {
          this.path.push({lat: e.getLat(), lng: e.getLng()});
        });
        this.overlays.push(obj);
      })
    },
    //map搜索
    addressChange(val) {
      this.placeSearch.search(val);
    },
    close() {
      this.mouseTool.close(true);
    },
    clear() {
      this.map.remove(this.overlays);
      this.overlays = [];
      this.path = [];
    },
    draw(type) {
      switch (type) {
        case "marker": {
          this.mouseTool.marker({
            //同Marker的Option设置
          });
          break;
        }
        case "polyline": {
          this.mouseTool.polyline({
            strokeColor: "#80d8ff",
            //同Polyline的Option设置
          });
          break;
        }
        case "polygon": {
          this.mouseTool.polygon({
            fillColor: "#00b0ff",
            strokeColor: "#80d8ff",
            borderWeight: 2,
            strokeWeight: 4,
            //同Polygon的Option设置
          });
          break;
        }
        case "rectangle": {
          this.mouseTool.rectangle({
            fillColor: "#00b0ff",
            strokeColor: "#80d8ff",
            //同Polygon的Option设置
          });
          break;
        }
        case "circle": {
          this.mouseTool.circle({
            fillColor: "#00b0ff",
            strokeColor: "#80d8ff",
            //同Circle的Option设置
          });
          break;
        }
      }
    },
    surePotting() {
      this.forms.points = [];
      // this.forms.eventReportUnit = this.$refs.cascader.getCheckedNodes().label;
      if (this.forms.plottingStatus == 1) {
        this.polyEditor
        .getTarget()
        .getPath()
        .map((e) => {
          this.forms.points.push({lng: e.lng, lat: e.lat});
        });
      } else {
        this.forms.points = [...this.path];
      }
      this.showMap = false;
    },
    save() {
      this.$refs["rules"].validate((valid) => {
        if (valid) {
          this.instance
          .post(
              `/app/appgirdinfo/addOrUpdate`,
              {
                ...this.forms,
              },
              null
          )
          .then((res) => {
            if (res.code == 0) {
              this.cancel(true)
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    searchDetail() {
      let {id} = this.$route.query
      this.instance.post(`/app/appgirdinfo/queryDetailById`, null, {
        params: {id},
      }).then((res) => {
        if (res?.data) {
          this.forms = {...res.data};
          this.parentGirdInfo = res.data.parentGirdInfo;
          this.forms.parentGirdName = res.data.parentGirdInfo && res.data.parentGirdInfo.girdName;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.add-block {
  width: 100%;
  height: 100%;

  ::v-deep .amap-copyright {
    display: none !important;
  }

  ::v-deep .amap-logo {
    display: none !important;
  }

  .footer-btn {
    width: 92px;
  }

  .map {
    width: 780px;
    position: relative;
    overflow: hidden;

    .container {
      width: 760px;
      height: 420px;
      border-radius: 2px;
      border: 1px solid #d0d4dc;
    }

    #panel {
      position: absolute;
      height: 400px;
      right: 30px;
      top: 20px;
      width: 280px;
      overflow: hidden;
      z-index: 10000;
    }

    .tipinput {
      position: absolute;
      width: 200px;
      height: 38px;
      left: 20px;
      top: 20px;
      z-index: 10000;
    }
  }
}
</style>