招生

src/views/recruit/recruitstudentsignup/dormFW.vue

@@ -0,0 +1,154 @@
+<template>
+  <el-dialog
+    title="请设置住宿范围"
+    append-to-body
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+    width="90%" heigth="90%"
+  >
+  <div style="height: 100%;width:100%">
+    <el-form :model="form" :rules="rules" ref="form" label-width="120px"
+             class="demo-ruleForm">
+
+      <el-form-item label="住宿半径(米)" prop="raidus">
+        <el-input-number v-model="form.raidus" :min="0" style="width: 100%"></el-input-number>
+      </el-form-item>
+
+    </el-form>
+    <div id="container"></div>
+  </div>
+    <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dataFormSubmit">确定</el-button>
+        <el-button @click="visible = false">取消</el-button>
+      </span>
+  </el-dialog>
+</template>
+<script>
+import {BMPGL, changeMajor} from "@/api/recruit/recruitstudentsignup";
+import {putItemObj} from "@/api/admin/dict";
+import {getTypeValue} from "@/api/admin/dict";
+
+export default {
+  data() {
+    return {
+      ak: "V0ooaf2RZyEGOkD8UzZB3gvw7pCb0Kx7", // 百度的地图密钥
+      visible:false,
+      canSubmit:false,
+      circleShow:false,
+      circle:"",
+      // 地址信息
+      address: null,
+      center: { lng: 0, lat: 0 },
+      form:{
+        raidus:0,
+      },
+      dictId:"",
+      rules: {
+        raidus: [
+          {required: true, message: '住宿半径不能为空', trigger: ["blur", "change"]}
+        ],
+      },
+      circleArr : [],
+
+    };
+  },
+  watch: {
+    'form.raidus': {
+      handler(newVal) {
+        if(newVal !='' && newVal !=undefined){
+          this.circle.setRadius(newVal); //设置圆形覆盖物的半径
+        }
+      }
+    }
+  },
+  methods: {
+    init(){
+      let _this = this;
+      this.visible = true;
+      this.canSubmit = true;
+      this.circleShow = true;
+      this.$nextTick(() => {
+          getTypeValue("dorm_jw").then(data=>{
+            let arr = data.data.data;
+            arr.forEach(e=>{
+              if(e.label=='bj'){
+                _this.form.raidus=e.value;
+                _this.dictId = e.id;
+              }else if(e.label=='lng'){
+                _this.center.lng=e.value;
+              }else if(e.label=='lat'){
+                _this.center.lat=e.value;
+              }
+            });
+            BMPGL(_this.ak).then((BMapGL) => {
+              // 创建地图实例
+              let map = new BMapGL.Map("container");
+              // 创建点坐标 axios => res 获取的初始化定位坐标
+              let point = new BMapGL.Point(_this.center.lng, _this.center.lat)
+              // 初始化地图，设置中心点坐标和地图级别
+              map.centerAndZoom(point, 13)
+              //开启鼠标滚轮缩放
+              map.enableScrollWheelZoom(true)
+
+              // 绘制圆
+              this.circle = new BMapGL.Circle(new BMapGL.Point(_this.center.lng, _this.center.lat), this.form.raidus, {
+                strokeColor: 'blue',
+                strokeWeight: 2,
+                strokeOpacity: 0.5,
+                enableEditing:false
+              });
+              map.addOverlay(this.circle);
+
+            })
+          })
+
+
+
+      });
+
+
+    },
+    // 表单提交
+    dataFormSubmit() {
+      let _this = this;
+      this.$confirm("是否确认保存住宿半径" , '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function() {
+        _this.$refs['form'].validate((valid) => {
+          if (valid) {
+            _this.canSubmit = false;
+            putItemObj({id:_this.dictId,value:_this.form.raidus}).then(() => {
+              _this.$message({
+                showClose: true,
+                message: '修改成功',
+                type: 'success'
+              })
+              _this.visible = false
+              _this.canSubmit = true;
+            })
+
+          }
+        })
+      }).then(data => {
+
+      }).catch(function(err) { })
+    }
+  },
+};
+</script>
+<style scoped>
+
+#container {
+  overflow: hidden;
+  width: 100%;
+  height: 700px;
+  margin: 0;
+  font-family: "微软雅黑";
+}
+ul li {
+  list-style: none;
+}
+
+</style>