dvcp_v2_webapp/packages/2.0.5/AppGridBlock/components/add.vue

<template>
  <div class="add-block">
    <ai-detail>
      <template #title>
        <ai-title
            :title="title"
            :isShowBack="true"
            :isShowBottomBorder="true"
            @onBackClick="cancel(false)"
        ></ai-title>
      </template>
      <template #content>
        <ai-card title="层级信息">
          <template slot="content">
            <ai-wrapper label-width="120px" :columnsNumber="2" style="margin-top: 16px">
              <ai-info-item label="上级层级单位："><span>{{ forms.parentGirdName }}</span></ai-info-item>
            </ai-wrapper>
          </template>
        </ai-card>

        <el-form
            ref="rules"
            :model="forms"
            :rules="formRules"
            size="small"
            label-suffix="："
            label-width="120px"
        >
          <ai-card title="基础信息">
            <template slot="content">
              <div class="above">
                <div class="left">
                  <el-form-item label="网格名称" prop="girdName">
                    <el-input
                        v-model="forms.girdName"
                        placeholder="请输入…"
                        maxlength="10"
                        show-word-limit
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="网格类型" prop="girdType">
                    <el-select
                        v-model="forms.girdType"
                        placeholder="请选择"
                        clearable
                    >
                      <el-option
                          v-for="(item, i) in dict.getDict('girdType')"
                          :key="i"
                          :label="item.dictName"
                          :value="item.dictValue"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="是否最后一级" prop="isLastLevel">
                    <el-select
                        v-model="forms.isLastLevel"
                        placeholder="请选择"
                        :disabled="isEdit"
                        clearable
                    >
                      <el-option
                          v-for="(item, i) in dict.getDict('isLastLevel')"
                          :key="i"
                          :label="item.dictName"
                          :value="item.dictValue"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="right">
                  <el-form-item label="网格编码" prop="girdCode">
                    <el-input
                        v-model="forms.girdCode"
                        placeholder="请输入…"
                        maxlength="30"
                        show-word-limit
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="网格层级" prop="girdLevel">
                    <el-select
                        v-model="forms.girdLevel"
                        placeholder="请选择"
                        :disabled="isEdit"
                        clearable
                    >
                      <el-option
                          v-for="(item, i) in dict.getDict('girdLevel')"
                          :key="i"
                          :label="item.dictName"
                          :value="item.dictValue"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
            </template>
          </ai-card>

          <ai-card title="其他信息">
            <template slot="content">
              <div class="above">
                <div class="left">
                  <!-- <el-form-item label="事件上报主体" prop="eventReportUnitId">
                    <el-cascader
                      style="width: 100%"
                      :options="unitOps"
                      ref="cascader"
                      v-model="forms.eventReportUnitId"
                      :props="unitProps"
                      :show-all-levels="false"
                    />
                  </el-form-item> -->
                  <el-form-item label="初始日期" prop="startDate">
                    <el-date-picker
                        v-model="forms.startDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="终止日期" prop="endDate">
                    <el-date-picker
                        v-model="forms.endDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                </div>
                <div class="right">
                  <el-form-item label="面积" prop="area">
                    <el-input
                        v-model="forms.area"
                        placeholder="面积㎡"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <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"
          ></el-input>
        </div>
        <div id="panel"></div>
        <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,
    isEdit: Boolean
  },
  data() {
    return {
      forms: {
        address: "",
        area: "",
        points: [],
        endDate: "",
        eventReportUnit: "",
        eventReportUnitId: "",
        girdCode: "",
        girdLevel: "",
        girdList: [],
        girdName: "",
        girdType: "",
        isLastLevel: "",
        parentGirdId: "",
        parentGirdName: "",
        startDate: "",
        plottingStatus: "0",
      },
      showMap: false,
      map: "",
      mouseTool: "",
      searchAddress: "",
      placeSearch: "",
      overlays: [],
      options: [],
      path: [],
      polyEditor: "",
      title: "添加网格区块",
      parentGirdInfo: {},
    };
  },
  computed: {
    ...mapState(["user"]),
    formRules() {
      return {
        girdName: [
          {required: true, message: "请填写网格名称", trigger: "change"},
        ],
        girdCode: [
          {required: true, message: "请填写网格编码", trigger: "change"},
        ],
        girdType: [
          {required: true, message: "请选择网格类型", trigger: "change"},
        ],
        isLastLevel: [
          {required: true, message: "请选择是否最后一级", trigger: "change"},
        ],
        girdLevel: [
          {required: true, message: "请选择网格层级", trigger: "change"},
        ],
        eventReportUnitId: [
          {required: true, message: "请选择事件上报主体", trigger: "change"},
        ],
      };
    },
    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;
    },
  },
  created() {
    if (this.isEdit) {
      this.title = "编辑网格区块";
      this.searchDetail();
    } else {
      this.forms.parentGirdId = this.params.id;
      this.forms.parentGirdName = this.params.girdName;
      // this.forms.girdLevel = Number(this.info.girdLevel) + 1 +'';
      // this.forms.isLastLevel = ['0','1'].includes(this.forms.girdLevel)?'0':'1';
      this.title = "添加网格区块";
    }
    // this.getAllUnit(this.user.info.areaId);
  },
  methods: {
    cancel(isRefresh) {
      this.$emit('change', {
        type: 'list',
        isRefresh: !!isRefresh,
      })
    },
    // 获取所有单位
    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, [117.147097, 36.72081], false, 600);
          this.eventOn();
        }
      })
      .catch((e) => {
        console.log(e);
      });
    },
    //地图事件绑定
    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() {
      this.instance.post(`/app/appgirdinfo/queryDetailById`, null, {
        params: {id: this.params.id},
      }).then((res) => {
        if (res?.data) {
          this.forms = {...res.data};
          this.parentGirdInfo = this.forms.parentGirdInfo;
          this.forms.parentGirdName = this.parentGirdInfo.girdName;
          // this.forms.isLastLevel =this.forms.girdLevel;
        }
      });
    },
  },
};
</script>

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

  .above {
    overflow: hidden;
    padding: 8px 0;

    .left {
      width: 380px;
      float: left;
    }

    .right {
      width: 380px;
      float: right;
    }
  }

  .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>