| | |
|---|
| | | <template> |
|---|
| | | <el-dialog |
|---|
| | | :title="title" |
|---|
| | | :modal-append-to-body="false" |
|---|
| | | :append-to-body="true" |
|---|
| | | :close-on-click-modal="false" |
|---|
| | | width="60%" |
|---|
| | | :visible.sync="visible" |
|---|
| | | > |
|---|
| | | <avue-form ref="form" v-model="form" :option="option" @submit="submit"> |
|---|
| | | <!-- 地图插入 --> |
|---|
| | | <template slot-scope="{ type, disabled }" slot="line"> |
|---|
| | | <getMapDataInThere ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere> |
|---|
| | | </template> |
|---|
| | | </avue-form> |
|---|
| | | </el-dialog> |
|---|
| | | <el-dialog |
|---|
| | | :title="title" |
|---|
| | | :modal-append-to-body="false" |
|---|
| | | :append-to-body="true" |
|---|
| | | :close-on-click-modal="false" |
|---|
| | | width="80%" |
|---|
| | | :visible.sync="visible" |
|---|
| | | top="10vh" |
|---|
| | | > |
|---|
| | | <avue-form ref="form" v-model="form" :option="option" @submit="submit"> |
|---|
| | | <!-- 地图插入 --> |
|---|
| | | <template slot-scope="{ type, disabled }" slot="line"> |
|---|
| | | <!-- <getMapDataInThere ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere> --> |
|---|
| | | </template> |
|---|
| | | </avue-form> |
|---|
| | | <div class="map"> |
|---|
| | | <iframe :src="url" frameborder="0" width="100%" height="100%"></iframe> |
|---|
| | | </div> |
|---|
| | | </el-dialog> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | |
|---|
| | | import { mapGetters } from "vuex" |
|---|
| | | import { getFarmList } from "@/api/farm/farm" |
|---|
| | | import { getDeptTree } from "@/api/system/dept" |
|---|
| | | import { add } from "@/api/land/land" |
|---|
| | | import website from '@/config/website' |
|---|
| | | import getMapDataInThere from "./getMapDataInThere.vue" |
|---|
| | | import { mapGetters } from "vuex"; |
|---|
| | | import { getFarmList,getDetail } from "@/api/farm/farm"; |
|---|
| | | import { getDeptTree } from "@/api/system/dept"; |
|---|
| | | import { add } from "@/api/land/land"; |
|---|
| | | import website from "@/config/website"; |
|---|
| | | import domtoimage from "dom-to-image"; |
|---|
| | | import h2 from "html2canvas"; |
|---|
| | | import getMapDataInThere from "./getMapDataInThere.vue"; |
|---|
| | | import { number } from "echarts"; |
|---|
| | | // import canvas2Image from 'canvas2Image' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components: { |
|---|
| | | getMapDataInThere |
|---|
| | | }, |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | title: "新增地块", |
|---|
| | | form: {}, |
|---|
| | | option: { |
|---|
| | | emptyBtn: false, |
|---|
| | | submitText: "保存", |
|---|
| | | gutter: 30, |
|---|
| | | column: [ |
|---|
| | | { |
|---|
| | | label: "地块名称", |
|---|
| | | prop: "landName", |
|---|
| | | rules: [{ |
|---|
| | | required: true, |
|---|
| | | message: "请输入地块名称", |
|---|
| | | trigger: "blur" |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: "所属农场", |
|---|
| | | prop: "farmId", |
|---|
| | | type: "tree", |
|---|
| | | value:"", |
|---|
| | | dicData: [], |
|---|
| | | props: { |
|---|
| | | label: "farmName", |
|---|
| | | value: "id" |
|---|
| | | }, |
|---|
| | | disabled:true, |
|---|
| | | slot: true, |
|---|
| | | rules: [{ |
|---|
| | | required: true, |
|---|
| | | message: "请选择所属农场", |
|---|
| | | trigger: "click" |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: "地块类型", |
|---|
| | | type: "select", |
|---|
| | | prop: "landType", |
|---|
| | | dicUrl: "/api/blade-system/dict-biz/dictionary?code=land", |
|---|
| | | props: { |
|---|
| | | label: "dictValue", |
|---|
| | | value: "dictKey" |
|---|
| | | }, |
|---|
| | | dataType: "number", |
|---|
| | | rules: [{ |
|---|
| | | required: true, |
|---|
| | | message: "请选择地块类型", |
|---|
| | | trigger: "blur" |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: "面积单位", |
|---|
| | | prop: "landUnit", |
|---|
| | | value: "0", |
|---|
| | | type: "select", |
|---|
| | | dicUrl: "/api/blade-system/dict-biz/dictionary?code=landunit", |
|---|
| | | props: { |
|---|
| | | label: "dictValue", |
|---|
| | | value: "dictKey" |
|---|
| | | }, |
|---|
| | | rules: [{ |
|---|
| | | required: true, |
|---|
| | | message: "请选择面积单位", |
|---|
| | | trigger: "click" |
|---|
| | | }], |
|---|
| | | dataType: "number", |
|---|
| | | span: 6, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: "地块展示", |
|---|
| | | labelWidth: "0", |
|---|
| | | prop: "line", |
|---|
| | | className: "mapClass", |
|---|
| | | span: 24, |
|---|
| | | formslot: true, |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | components: { |
|---|
| | | getMapDataInThere, |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | title: "新增地块", |
|---|
| | | form: {}, |
|---|
| | | option: { |
|---|
| | | emptyBtn: false, |
|---|
| | | submitText: "保存", |
|---|
| | | submitBtn: false, |
|---|
| | | gutter: 30, |
|---|
| | | column: [ |
|---|
| | | { |
|---|
| | | label: "地块名称", |
|---|
| | | prop: "landName", |
|---|
| | | rules: [ |
|---|
| | | { |
|---|
| | | required: true, |
|---|
| | | message: "请输入地块名称", |
|---|
| | | trigger: "blur", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: "所属农场", |
|---|
| | | prop: "farmId", |
|---|
| | | type: "tree", |
|---|
| | | value: "", |
|---|
| | | dicData: [], |
|---|
| | | props: { |
|---|
| | | label: "farmName", |
|---|
| | | value: "id", |
|---|
| | | }, |
|---|
| | | visible: false, |
|---|
| | | disabled: true, |
|---|
| | | slot: true, |
|---|
| | | rules: [ |
|---|
| | | { |
|---|
| | | required: true, |
|---|
| | | message: "请选择所属农场", |
|---|
| | | trigger: "click", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: "地块类型", |
|---|
| | | type: "select", |
|---|
| | | prop: "landType", |
|---|
| | | dicUrl: "/api/blade-system/dict-biz/dictionary?code=land", |
|---|
| | | props: { |
|---|
| | | label: "dictValue", |
|---|
| | | value: "dictKey", |
|---|
| | | }, |
|---|
| | | dataType: "number", |
|---|
| | | rules: [ |
|---|
| | | { |
|---|
| | | required: true, |
|---|
| | | message: "请选择地块类型", |
|---|
| | | trigger: "blur", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: "面积", |
|---|
| | | prop: "landArea", |
|---|
| | | rules: [ |
|---|
| | | { |
|---|
| | | required: true, |
|---|
| | | message: "请输入面积", |
|---|
| | | trigger: "click", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | span: 6, |
|---|
| | | type: "number", |
|---|
| | | controls: false, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: "面积单位", |
|---|
| | | prop: "landUnit", |
|---|
| | | value: "0", |
|---|
| | | type: "select", |
|---|
| | | dicUrl: "/api/blade-system/dict-biz/dictionary?code=landunit", |
|---|
| | | props: { |
|---|
| | | label: "dictValue", |
|---|
| | | value: "dictKey", |
|---|
| | | }, |
|---|
| | | rules: [ |
|---|
| | | { |
|---|
| | | required: true, |
|---|
| | | message: "请选择面积单位", |
|---|
| | | trigger: "click", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | dataType: "number", |
|---|
| | | span: 6, |
|---|
| | | }, |
|---|
| | | // { |
|---|
| | | // label: "地块展示", |
|---|
| | | // labelWidth: "0", |
|---|
| | | // prop: "line", |
|---|
| | | // className: "mapClass", |
|---|
| | | // span: 24, |
|---|
| | | // formslot: true, |
|---|
| | | // } |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | url: "", |
|---|
| | | landUrl: "", |
|---|
| | | polygon: [], |
|---|
| | | area: "", |
|---|
| | | farmInfo:{}, |
|---|
| | | visible: false, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | ...mapGetters([ |
|---|
| | | "userInfo", |
|---|
| | | "permission", |
|---|
| | | "polygons", |
|---|
| | | "$farmId", |
|---|
| | | "drawMapUrlBase", |
|---|
| | | ]), |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | landUrl: { |
|---|
| | | handler(newVal, oldVal) { |
|---|
| | | if (newVal) { |
|---|
| | | this.$refs.form.submit(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | ...mapGetters(["userInfo", "permission", "polygons","$farmId"]), |
|---|
| | | "form.landName": { |
|---|
| | | handler(newVal, oldVal) { |
|---|
| | | this.landUrl = ""; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | mounted () { |
|---|
| | | this.initData(this.userInfo.tenant_id) |
|---|
| | | "form.landType": { |
|---|
| | | handler(newVal, oldVal) { |
|---|
| | | this.landUrl = ""; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | initData (tenantId) { |
|---|
| | | getFarmList().then(res => { |
|---|
| | | const column = this.findObject(this.option.column, "farmId") |
|---|
| | | column.dicData = res.data.data |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | //初始化 |
|---|
| | | init () { |
|---|
| | | //清空面的数据 |
|---|
| | | this.$store.commit('clear_polygon') |
|---|
| | | //计算当前时间 |
|---|
| | | this.visible = true |
|---|
| | | this.form.farmId = this.$farmId |
|---|
| | | }, |
|---|
| | | // 表单提交 |
|---|
| | | submit (row, done) { |
|---|
| | | row['deptId'] = this.userInfo.dept_id |
|---|
| | | // row.farmId = this.farm.id |
|---|
| | | var that = this |
|---|
| | | if (this.polygons.length == 0) { |
|---|
| | | //没有面的数据 |
|---|
| | | // this.$refs.getMapData.isCheck = true |
|---|
| | | // loading() |
|---|
| | | } else { |
|---|
| | | //如果有值，空间坐标转换 |
|---|
| | | let pol = this.polygons |
|---|
| | | let polLength = this.polygons.length - 1 |
|---|
| | | let usePolygons = "" |
|---|
| | | for (let k in pol) { |
|---|
| | | usePolygons += pol[k].lng + "," + pol[k].lat |
|---|
| | | if (k != polLength) { |
|---|
| | | usePolygons += ";" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | //设置坐标点 |
|---|
| | | row.userId = this.userInfo.user_id |
|---|
| | | row.landRange = usePolygons |
|---|
| | | } |
|---|
| | | add(row).then(() => { |
|---|
| | | that.$emit("refreshOnLoad") |
|---|
| | | that.$refs.form.resetFields() |
|---|
| | | that.form.landUnit = "0" |
|---|
| | | that.visible = false |
|---|
| | | this.$message({ |
|---|
| | | type: "success", |
|---|
| | | message: "操作成功!" |
|---|
| | | }) |
|---|
| | | done() |
|---|
| | | }, error => { |
|---|
| | | // loading() |
|---|
| | | window.console.log(error) |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | setMapData (val) { |
|---|
| | | this.LineData = val[0] |
|---|
| | | this.PointData = val[1] |
|---|
| | | }, |
|---|
| | | "form.landArea": { |
|---|
| | | handler(newVal, oldVal) { |
|---|
| | | this.landUrl = ""; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | "form.landUnit": { |
|---|
| | | handler(newVal, oldVal) { |
|---|
| | | this.landUrl = ""; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.initData(this.userInfo.tenant_id); |
|---|
| | | window.addEventListener("message", this.handleMessage); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | handleMessage(event) { |
|---|
| | | if (Number.isFinite(event.data)) { |
|---|
| | | this.form.landArea = (event.data * 0.0015).toFixed(2); |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (Object.prototype.toString.call(event.data) === "[object Object]") { |
|---|
| | | var obj = event.data; |
|---|
| | | this.polygon = obj.polygons; |
|---|
| | | this.landUrl = obj.url; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | initData(tenantId) { |
|---|
| | | getFarmList().then((res) => { |
|---|
| | | const column = this.findObject(this.option.column, "farmId"); |
|---|
| | | column.dicData = res.data.data; |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | //初始化 |
|---|
| | | init() { |
|---|
| | | //清空面的数据 |
|---|
| | | this.$store.commit("clear_polygon"); |
|---|
| | | this.form.landArea = 0 |
|---|
| | | this.visible = true; |
|---|
| | | this.form.farmId = this.$farmId; |
|---|
| | | |
|---|
| | | getDetail(this.form.farmId).then(res=>{ |
|---|
| | | this.farmInfo = res.data.data |
|---|
| | | this.url = this.drawMapUrlBase + "/base?type=1&lng=112&lat=24&status=manage&longitude="+this.farmInfo.longitude+"&latitude="+this.farmInfo.latitude; |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | }, |
|---|
| | | // 表单提交 |
|---|
| | | submit(row, done) { |
|---|
| | | row["deptId"] = this.userInfo.dept_id; |
|---|
| | | // row.farmId = this.farm.id |
|---|
| | | |
|---|
| | | var that = this; |
|---|
| | | var poly = []; |
|---|
| | | if (this.polygon.length != 0) { |
|---|
| | | this.polygon.forEach((e) => { |
|---|
| | | poly.push({ |
|---|
| | | lng: e[0], |
|---|
| | | lat: e[1], |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | this.polygon = poly; |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (this.polygon.length == 0) { |
|---|
| | | //没有面的数据 |
|---|
| | | // this.$refs.getMapData.isCheck = true |
|---|
| | | // loading() |
|---|
| | | } else { |
|---|
| | | //如果有值，空间坐标转换 |
|---|
| | | let pol = this.polygon; |
|---|
| | | let polLength = this.polygon.length - 1; |
|---|
| | | let usePolygons = ""; |
|---|
| | | for (let k in pol) { |
|---|
| | | usePolygons += pol[k].lng + "," + pol[k].lat; |
|---|
| | | if (k != polLength) { |
|---|
| | | usePolygons += ";"; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | //设置坐标点 |
|---|
| | | row.userId = this.userInfo.user_id; |
|---|
| | | row.landRange = usePolygons; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // if (this.polygons.length == 0) { |
|---|
| | | // //没有面的数据 |
|---|
| | | // // this.$refs.getMapData.isCheck = true |
|---|
| | | // // loading() |
|---|
| | | // } else { |
|---|
| | | // //如果有值，空间坐标转换 |
|---|
| | | // let pol = this.polygons |
|---|
| | | // let polLength = this.polygons.length - 1 |
|---|
| | | // let usePolygons = "" |
|---|
| | | // for (let k in pol) { |
|---|
| | | // usePolygons += pol[k].lng + "," + pol[k].lat |
|---|
| | | // if (k != polLength) { |
|---|
| | | // usePolygons += ";" |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // //设置坐标点 |
|---|
| | | // row.userId = this.userInfo.user_id |
|---|
| | | // row.landRange = usePolygons |
|---|
| | | // console.log(row.landRange) |
|---|
| | | // } |
|---|
| | | |
|---|
| | | row["url"] = this.landUrl; |
|---|
| | | // row['landArea'] = this.area |
|---|
| | | |
|---|
| | | if (row.landArea < 0) { |
|---|
| | | this.$message.warning("地块面积不能为负数"); |
|---|
| | | done(); |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | |
|---|
| | | add(row).then( |
|---|
| | | () => { |
|---|
| | | that.$emit("refreshOnLoad"); |
|---|
| | | that.$refs.form.resetFields(); |
|---|
| | | that.form.landUnit = "0"; |
|---|
| | | that.visible = false; |
|---|
| | | this.$message({ |
|---|
| | | type: "success", |
|---|
| | | message: "操作成功!", |
|---|
| | | }); |
|---|
| | | done(); |
|---|
| | | }, |
|---|
| | | (error) => { |
|---|
| | | // loading() |
|---|
| | | window.console.log(error); |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | setMapData(val) { |
|---|
| | | this.LineData = val[0]; |
|---|
| | | this.PointData = val[1]; |
|---|
| | | }, |
|---|
| | | |
|---|
| | | showMap() { |
|---|
| | | this.mapVisible = true; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .mapClass div label { |
|---|
| | | display: none; |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #getMapData { |
|---|
| | | width: 90%; |
|---|
| | | position: relative; |
|---|
| | | height: 400px; |
|---|
| | | top: 10px; |
|---|
| | | left: 90px; |
|---|
| | | width: 90%; |
|---|
| | | position: relative; |
|---|
| | | height: 400px; |
|---|
| | | top: 10px; |
|---|
| | | left: 90px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .map { |
|---|
| | | height: 450px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
