From de1541c64ad952cf70879b0af94862b068f831b2 Mon Sep 17 00:00:00 2001
From: tangzy <tangzy123456>
Date: Wed, 25 May 2022 08:32:57 +0800
Subject: [PATCH] 地块管理
---
src/views/land/cs.vue | 154 +++++++
src/router/views/index.js | 544 +++++++++++++-----------
src/views/land/landMap.vue | 344 +++++++++++++++
src/views/land/LandDetail.vue | 233 ++++++++++
src/api/land/land.js | 4
src/styles/element-ui.scss | 26 +
6 files changed, 1,044 insertions(+), 261 deletions(-)
diff --git a/src/api/land/land.js b/src/api/land/land.js
index 1217bda..3621dc3 100644
--- a/src/api/land/land.js
+++ b/src/api/land/land.js
@@ -2,7 +2,7 @@
export const getList = (current, size, params) => {
return request({
- url: '/api/land/land/list',
+ url: '/api/land/land/page',
method: 'get',
params: {
...params,
@@ -64,4 +64,4 @@
method: 'get',
params: {}
})
-}
\ No newline at end of file
+}
diff --git a/src/router/views/index.js b/src/router/views/index.js
index 295a5c8..63c9038 100644
--- a/src/router/views/index.js
+++ b/src/router/views/index.js
@@ -1,263 +1,291 @@
import Layout from '@/page/index/'
export default [{
- path: '/wel',
- component: Layout,
- redirect: '/wel/index',
- children: [{
- path: 'index',
- name: '首页',
- meta: {
- i18n: 'dashboard'
- },
- component: () =>
- import ( /* webpackChunkName: "views" */ '@/views/wel/index')
- }, {
- path: 'dashboard',
- name: '控制台',
- meta: {
- i18n: 'dashboard',
- menu: false,
- },
- component: () =>
- import ( /* webpackChunkName: "views" */ '@/views/wel/dashboard')
- }]
+ path: '/wel',
+ component: Layout,
+ redirect: '/wel/index',
+ children: [{
+ path: 'index',
+ name: '首页',
+ meta: {
+ i18n: 'dashboard'
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/wel/index')
+ }, {
+ path: 'dashboard',
+ name: '控制台',
+ meta: {
+ i18n: 'dashboard',
+ menu: false,
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/wel/dashboard')
+ }]
+}, {
+ path: '/test',
+ component: Layout,
+ redirect: '/test/index',
+ children: [{
+ path: 'index',
+ name: '测试页',
+ meta: {
+ i18n: 'test'
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/util/test')
+ }]
+},
+ {
+ path: '/framing',
+ redirect: '/farmplant/farmplant',
+ component: Layout,
+ children: [{
+ path: 'index',
+ name: '农事操作',
+ meta: {
+ i18n: 'index',
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/farm/farmPaper')
+ }]
+ },
+ {
+ path: '/stockrecord',
+ redirect: '/stockrecord/stockrecord',
+ component: Layout,
+ children: [{
+ path: 'stockrecord',
+ name: '农资记录',
+ meta: {
+ i18n: 'index',
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/stockrecord/stockrecord')
+ }]
+ },
+ {
+ path: '/farmingrecord',
+ redirect: '/farm/farmingrecord',
+ component: Layout,
+ children: [{
+ path: 'farmingrecord',
+ name: '农事记录',
+ meta: {
+ i18n: 'index',
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/farm/farmingrecord')
+ }]
+ },
+ {
+ path: '/soldrecord',
+ redirect: '/soldrecord/soldrecord',
+ component: Layout,
+ children: [{
+ path: 'soldrecord',
+ name: '已出库待使用农资',
+ meta: {
+ i18n: 'index',
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/soldrecord/soldrecord')
+ }]
+ },
+ {
+ path: '/farmDetail',
+ redirect: '/wel/farmDetail',
+ component: Layout,
+ children: [{
+ path: '/farmDetail',
+ name: '操作记录',
+ meta: {
+ i18n: 'index',
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/wel/farmDetail')
+ }]
+ },
+ {
+ path: '/LandDetail',
+ redirect: '/land/LandDetail',
+ component: Layout,
+ children: [{
+ path: '/LandDetail',
+ name: '地块详情',
+ meta: {
+ i18n: 'index',
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/land/LandDetail')
+ }]
+ },
+ {
+ path: '/landMap',
+ redirect: '/land/landMap',
+ component: Layout,
+ children: [{
+ path: '/landMap',
+ name: '地块位置',
+ meta: {
+ i18n: 'index',
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/land/landMap')
+ }]
+ },
+ {
+ path: '/recovery',
+ redirect: '/recovery/recovery',
+ component: Layout,
+ children: [{
+ path: 'recovery',
+ name: '采收记录',
+ meta: {
+ i18n: 'index',
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/recovery/recovery')
+ }]
+ },
+ {
+ path: '/dict-horizontal',
+ component: Layout,
+ redirect: '/dict-horizontal/index',
+ children: [{
+ path: 'index',
+ name: '字典管理',
+ meta: {
+ i18n: 'dict'
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/util/demo/dict-horizontal')
+ }]
+ }, {
+ path: '/dict-vertical',
+ component: Layout,
+ redirect: '/dict-vertical/index',
+ children: [{
+ path: 'index',
+ name: '字典管理',
+ meta: {
+ i18n: 'dict'
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/util/demo/dict-vertical')
+ }]
+ },
+ {
+ path: '/land',
+ component: Layout,
+ redirect: '/land/index',
+ children: [{
+ path: 'index',
+ name: '地块管理',
+ meta: {
+ i18n: 'land'
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/land/land')
+ }]
+ },
+ {
+ path: '/farmproductstock',
+ component: Layout,
+ redirect: '/farmproductstock/index',
+ children: [{
+ path: 'index',
+ name: '农产品库存管理',
+ meta: {
+ i18n: 'farmproductstock'
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/farmplant/farmproductstock')
+ }]
+ },
+ {
+ path: '/stockmanage',
+ component: Layout,
+ redirect: '/stockmanage/index',
+ children: [{
+ path: 'index',
+ name: '农资库存管理',
+ meta: {
+ i18n: 'stockmanage'
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/stock/stockmanage')
+ }]
+ },
+ {
+ path: '/traceability',
+ component: Layout,
+ redirect: '/traceability/index',
+ children: [{
+ path: 'index',
+ name: '溯源码管理',
+ meta: {
+ i18n: 'traceability'
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/traceability/traceability')
+ }]
+ },
+ {
+ path: '/info',
+ component: Layout,
+ redirect: '/info/index',
+ children: [{
+ path: 'index',
+ name: '个人信息',
+ meta: {
+ i18n: 'info'
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/system/userinfo')
+ }]
+ }, {
+ path: '/work/process/leave',
+ component: Layout,
+ redirect: '/work/process/leave/form',
+ children: [{
+ path: 'form/:processDefinitionId',
+ name: '请假流程',
+ meta: {
+ i18n: 'work'
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/work/process/leave/form')
}, {
- path: '/test',
- component: Layout,
- redirect: '/test/index',
- children: [{
- path: 'index',
- name: '测试页',
- meta: {
- i18n: 'test'
- },
- component: () =>
- import ( /* webpackChunkName: "views" */ '@/views/util/test')
- }]
- },
- {
- path: '/framing',
- redirect: '/farmplant/farmplant',
- component: Layout,
- children: [{
- path: 'index',
- name: '农事操作',
- meta: {
- i18n: 'index',
- },
- component: () =>
- import ( /* webpackChunkName: "views" */ '@/views/farm/farmPaper')
- }]
- },
- {
- path: '/stockrecord',
- redirect: '/stockrecord/stockrecord',
- component: Layout,
- children: [{
- path: 'stockrecord',
- name: '农资记录',
- meta: {
- i18n: 'index',
- },
- component: () =>
- import ( /* webpackChunkName: "views" */ '@/views/stockrecord/stockrecord')
- }]
- },
- {
- path: '/farmingrecord',
- redirect: '/farm/farmingrecord',
- component: Layout,
- children: [{
- path: 'farmingrecord',
- name: '农事记录',
- meta: {
- i18n: 'index',
- },
- component: () =>
- import ( /* webpackChunkName: "views" */ '@/views/farm/farmingrecord')
- }]
- },
- {
- path: '/soldrecord',
- redirect: '/soldrecord/soldrecord',
- component: Layout,
- children: [{
- path: 'soldrecord',
- name: '已出库待使用农资',
- meta: {
- i18n: 'index',
- },
- component: () =>
- import ( /* webpackChunkName: "views" */ '@/views/soldrecord/soldrecord')
- }]
- },
- {
- path: '/farmDetail',
- redirect: '/wel/farmDetail',
- component: Layout,
- children: [{
- path: '/farmDetail',
- name: '操作记录',
- meta: {
- i18n: 'index',
- },
- component: () =>
- import ( /* webpackChunkName: "views" */ '@/views/wel/farmDetail')
- }]
- },
- {
- path: '/recovery',
- redirect: '/recovery/recovery',
- component: Layout,
- children: [{
- path: 'recovery',
- name: '采收记录',
- meta: {
- i18n: 'index',
- },
- component: () =>
- import ( /* webpackChunkName: "views" */ '@/views/recovery/recovery')
- }]
- },
- {
- path: '/dict-horizontal',
- component: Layout,
- redirect: '/dict-horizontal/index',
- children: [{
- path: 'index',
- name: '字典管理',
- meta: {
- i18n: 'dict'
- },
- component: () =>
- import ( /* webpackChunkName: "views" */ '@/views/util/demo/dict-horizontal')
- }]
+ path: 'handle/:taskId/:processInstanceId/:businessId',
+ name: '处理请假流程',
+ meta: {
+ i18n: 'work'
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/work/process/leave/handle')
}, {
- path: '/dict-vertical',
- component: Layout,
- redirect: '/dict-vertical/index',
- children: [{
- path: 'index',
- name: '字典管理',
- meta: {
- i18n: 'dict'
- },
- component: () =>
- import ( /* webpackChunkName: "views" */ '@/views/util/demo/dict-vertical')
- }]
- },
- {
- path: '/land',
- component: Layout,
- redirect: '/land/index',
- children: [{
- path: 'index',
- name: '地块管理',
- meta: {
- i18n: 'land'
- },
- component: () =>
- import ( /* webpackChunkName: "views" */ '@/views/land/land')
- }]
- },
- {
- path: '/farmproductstock',
- component: Layout,
- redirect: '/farmproductstock/index',
- children: [{
- path: 'index',
- name: '农产品库存管理',
- meta: {
- i18n: 'farmproductstock'
- },
- component: () =>
- import ( /* webpackChunkName: "views" */ '@/views/farmplant/farmproductstock')
- }]
- },
- {
- path: '/stockmanage',
- component: Layout,
- redirect: '/stockmanage/index',
- children: [{
- path: 'index',
- name: '农资库存管理',
- meta: {
- i18n: 'stockmanage'
- },
- component: () =>
- import ( /* webpackChunkName: "views" */ '@/views/stock/stockmanage')
- }]
- },
- {
- path: '/traceability',
- component: Layout,
- redirect: '/traceability/index',
- children: [{
- path: 'index',
- name: '溯源码管理',
- meta: {
- i18n: 'traceability'
- },
- component: () =>
- import ( /* webpackChunkName: "views" */ '@/views/traceability/traceability')
- }]
- },
- {
- path: '/info',
- component: Layout,
- redirect: '/info/index',
- children: [{
- path: 'index',
- name: '个人信息',
- meta: {
- i18n: 'info'
- },
- component: () =>
- import ( /* webpackChunkName: "views" */ '@/views/system/userinfo')
- }]
- }, {
- path: '/work/process/leave',
- component: Layout,
- redirect: '/work/process/leave/form',
- children: [{
- path: 'form/:processDefinitionId',
- name: '请假流程',
- meta: {
- i18n: 'work'
- },
- component: () =>
- import ( /* webpackChunkName: "views" */ '@/views/work/process/leave/form')
- }, {
- path: 'handle/:taskId/:processInstanceId/:businessId',
- name: '处理请假流程',
- meta: {
- i18n: 'work'
- },
- component: () =>
- import ( /* webpackChunkName: "views" */ '@/views/work/process/leave/handle')
- }, {
- path: 'detail/:processInstanceId/:businessId',
- name: '请假流程详情',
- meta: {
- i18n: 'work'
- },
- component: () =>
- import ( /* webpackChunkName: "views" */ '@/views/work/process/leave/detail')
- }]
- },
- {
- path: '/farm',
- component: Layout,
- redirect: '/farm/index',
- children: [{
- path: 'index',
- name: '农场信息管理',
- meta: {
- i18n: 'farm'
- },
- component: () =>
- import ( /* webpackChunkName: "views" */ '@/views/farm/farm')
- }]
- },
-]
\ No newline at end of file
+ path: 'detail/:processInstanceId/:businessId',
+ name: '请假流程详情',
+ meta: {
+ i18n: 'work'
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/work/process/leave/detail')
+ }]
+ },
+ {
+ path: '/farm',
+ component: Layout,
+ redirect: '/farm/index',
+ children: [{
+ path: 'index',
+ name: '农场信息管理',
+ meta: {
+ i18n: 'farm'
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/farm/farm')
+ }]
+ },
+]
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 97a5f9f..16e8436 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -81,4 +81,28 @@
.el-pagination.is-background .el-pager li:not(.disabled):hover {
color: #5abf78 !important;
-}
\ No newline at end of file
+}
+.farming-detail-box {
+ .dv {
+ .el-tabs {
+ height: 100%;
+
+ .el-tabs__header {
+
+ .el-tabs__nav {
+ transform: translateX(60px) !important;
+ }
+ }
+
+ .el-tabs__content {
+ height: calc(100% - 75px);
+ overflow-y: auto;
+ }
+ }
+ }
+
+ .el-dialog__body {
+ position: relative;
+ height: 60%;
+ }
+}
diff --git a/src/views/land/LandDetail.vue b/src/views/land/LandDetail.vue
new file mode 100644
index 0000000..d411074
--- /dev/null
+++ b/src/views/land/LandDetail.vue
@@ -0,0 +1,233 @@
+<template>
+ <div class="wraaper-box farming-detail-box">
+ <div class="dd">
+ <div class="da">
+ <div class="land-img" @click="mod()">
+ <img :src=url class="landimg"/>
+ </div>
+ <div class="cent">
+ <div class="l">{{ landName }}</div>
+ <div class="ln">{{ dic }}</div>
+ </div>
+ <div class="dc">占地面积:{{ landArea }}{{ dica }}</div>
+ </div>
+ <div class="dv">
+ <el-tabs v-model="activeName" @tab-click="handleClick">
+ <!-- 种植记录 -->
+ <el-tab-pane label="种养品种" name="tab1">
+ <farmplant
+ ></farmplant>
+ </el-tab-pane>
+ <!-- 农事记录 -->
+ <el-tab-pane label="农事记录" name="tab2">
+ <farming
+ ></farming>
+ </el-tab-pane>
+ <!-- 采收记录 -->
+ <el-tab-pane label="采收记录" name="tab3">
+ <recovery
+ ></recovery>
+ </el-tab-pane>
+ </el-tabs>
+ </div>
+ </div>
+
+ <el-dialog
+ title="地块位置"
+ :visible.sync="gradeBoxVisible1"
+ width="width"
+ :modal="true"
+ :modal-append-to-body="true"
+ :append-to-body="true"
+ :close-on-click-modal="false"
+ :close-on-press-escape="false"
+ :before-close="dialogBeforeClose"
+ >
+ <getMapDataInThere
+ ref="getMapData"
+ id="getMapData"
+ @setMapData="setMapData"
+ ></getMapDataInThere>
+ <el-button>54654</el-button>
+ </el-dialog>
+
+
+ </div>
+
+</template>
+
+<script>
+import {mapGetters} from "vuex";
+import farmplant from "@/views/farmplant/farmplant.vue";
+import farming from "@/views/farm/farmingrecord.vue";
+import recovery from "@/views/recovery/recovery.vue";
+import getMapDataInThere from "./getMapDataInThere.vue";
+
+export default {
+ components: {
+ farmplant,
+ farming,
+ recovery,
+ getMapDataInThere
+ },
+ data() {
+ return {
+ farmId: "",
+ activeName: "tab1",
+ url: "",
+ dica: "",
+ landArea: "",
+ dic: "",
+ formC: {},
+ gradeBoxVisible1: false,
+ option2: {
+ index: true,
+ tip: false,
+ searchMenuSpan: 6,
+ height: 583,
+ menuWidth: 300,
+ border: true,
+ align: "center",
+ selection: true,
+ column: [
+ {
+ label: "路线展示",
+ labelWidth: "0",
+ prop: "line",
+ className: "mapClass",
+ hide: true,
+ display: true,
+ span: 24,
+ formslot: true,
+ addDisplay: true
+ }
+ ],
+ }
+ };
+ },
+ computed: {
+ ...mapGetters(["userInfo", "permission", "polygons"]),
+ },
+ created() {
+ this.url = this.$route.query.url;
+ this.landName = this.$route.query.landName;
+ this.dic = this.$route.query.dic;
+ this.landArea = this.$route.query.landArea;
+ this.dica = this.$route.query.dica;
+ this.form = res.data.data;
+ let usePolygons = this.$route.query.landRange
+ .split("POLYGON((")[1]
+ .split("))")[0]
+ .split(",");
+ for (let k in usePolygons) {
+ usePolygons[k] = {
+ lng: +usePolygons[k].split(" ")[0],
+ lat: +usePolygons[k].split(" ")[1],
+ };
+ }
+ this.$refs.getMapData.draw(usePolygons);
+ },
+ methods: {
+ mod() {
+ this.formC = {};
+ this.gradeBoxVisible1 = true;
+ },
+ },
+ watch: {},
+}
+</script>
+
+<style scoped lang="scss">
+#getMapData {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ width: 100%;
+ height: 100%;
+}
+.wraaper-box {
+ padding: 0 !important;
+ position: absolute;
+ top: 40px;
+ left: 0;
+ width: 100%;
+ height: calc(100% - 40px);
+}
+
+.land-img {
+ width: 200px;
+ height: 200px;
+ margin-top: 25px;
+ margin-left: 60px;
+ float: left
+}
+
+.cent {
+ width: 250px;
+ height: 40px;
+ margin-top: 25px;
+ margin-left: 40px;
+ float: left;
+ text-align: center;
+ line-height: 40px;
+}
+
+.l {
+ width: 120px;
+ height: 40px;
+ float: left;
+ text-align: center;
+ line-height: 40px;
+}
+
+.ln {
+ width: 120px;
+ height: 40px;
+ margin-left: 2px;
+ float: left;
+ text-align: center;
+ line-height: 40px;
+ display: inline-block;
+ vertical-align: 1px;
+ border-radius: 3px;
+}
+
+.dc {
+ width: 151px;
+ margin-top: 20px;
+ margin-left: 340px;
+ width: 175px;
+}
+
+.landimg {
+ width: 200px;
+ height: 200px;
+}
+
+.dd {
+ padding: 10px;
+ wdith: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+}
+
+.da {
+ width: 100%;
+ line-height: 60px;
+ background: #fff;
+}
+
+.dv {
+ flex: 1;
+ line-height: 60px;
+ background: #fff;
+ width: 100%;
+ overflow: hidden;
+}
+
+</style>
diff --git a/src/views/land/cs.vue b/src/views/land/cs.vue
new file mode 100644
index 0000000..b3340ee
--- /dev/null
+++ b/src/views/land/cs.vue
@@ -0,0 +1,154 @@
+<template>
+ <div class="wraaper-box">
+ <div class="landhome">
+ <div class="land" v-for="(item, index) in farmPlanList" :key="index" @click="landInfo(item)">
+ <div class="land-img" >
+ <img :src="item.url" class="landimg" /></div>
+ <div class="text">
+ <div class="land-name">{{ item.landName }}</div>
+ <div class="land-area">
+ <div class="box">
+ {{ item.landArea }} {{ item.dica }}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import {getList} from "@/api/land/land";
+export default {
+ components: {
+ },
+ name: "wel",
+ data() {
+ return {
+ query: {},
+ farmingCount:0,
+ farmPlanList: [],
+ option: {
+ labelWidth: 80,
+ span:6,
+ column: [
+ {
+ label: '地块类型',
+ prop: 'search',
+ search: true,
+ }
+ ]
+ },
+ };
+ },
+ computed: {
+ ...mapGetters(["userInfo"]),
+ },
+ created() {
+ this.onLoad();
+ },
+ methods: {
+ landInfo(item){
+ this.$router.push({
+ path: `/LandDetail`,
+ query: item,
+ });
+ },
+ onLoad(page, params = {}) {
+ getList(1, 10, Object.assign(params, this.query)).then(res => {
+ const data = res.data.data;
+
+ this.farmPlanList = data.records;
+ });
+ }
+ },
+};
+</script>
+<style lang="scss" scope>
+.el-font-size {
+ font-size: 14px;
+}
+
+.wraaper-box {
+ padding: 0 !important;
+ position: absolute;
+ top: 40px;
+ left: 0;
+ width: 100%;
+ height: calc(100% - 40px);
+}
+
+.landhome {
+ padding: 10px;
+ wdith: 100%;
+ height: 100%;
+ display: flex;
+ box-sizing: border-box;
+ flex-wrap: wrap;
+ overflow-y: auto;
+
+ .land {
+ margin: 10px;
+ width: 236px;
+ height: 340px;
+ border-radius: 2px 2px 0px 0px;
+ cursor: pointer;
+
+ .land-img {
+ width: 100%;
+ height: 280px;
+ margin: 0 auto;
+ text-align: center;
+ background: green;
+
+ .landimg {
+ width: 100%;
+ height:280px;
+ //border-radius: 100px;
+ //margin-top: 25px;
+ //margin-left: -25px;
+ }
+ }
+
+ .text {
+ padding: 0 10px;
+ display: flex;
+ height: 60px;
+ line-height: 60px;
+ background: #fff;
+
+ .land-name {
+ flex: 1;
+ text-align: left;
+ font-size: 14px;
+ }
+ .land-area {
+ width: 60px;
+ position: relative;
+ text-align: center;
+ font-size: 14px;
+
+ .box {
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 1;
+ bottom: 0;
+ margin: auto;
+ width: 80px;
+ height: 24px;
+ line-height: 24px;
+ border: 1px solid #64c3a4;
+ color: #64c3a4;
+ border-radius: 30px;
+ }
+ }
+ }
+
+
+
+ }
+
+}
+</style>
diff --git a/src/views/land/landMap.vue b/src/views/land/landMap.vue
new file mode 100644
index 0000000..200db54
--- /dev/null
+++ b/src/views/land/landMap.vue
@@ -0,0 +1,344 @@
+<template>
+ <basic-container>
+ <avue-crud
+ class="tablesss"
+ :before-open="beforeOpen"
+ :option="option"
+ :data="data"
+ :page.sync="page"
+ v-model="form"
+ ref="crud"
+ :permission="permissionList"
+ @on-load="onLoad"
+ :table-loading="loading"
+ @row-save="rowSave"
+ @search-change="searchChange"
+ @search-reset="searchReset"
+ @row-update="rowUpdate"
+ @row-del="rowDel"
+ @selection-change="selectionChange"
+ @refresh-change="refreshChange"
+ >
+ <template slot="menuLeft">
+ <el-button
+ type="danger"
+ size="small"
+ plain
+ icon="el-icon-delete"
+ v-if="permission.rail_delete"
+ @click="handleDelete"
+ >删 除
+ </el-button>
+ </template>
+ <!-- 地图插入 -->
+ <template slot-scope="{ type, disabled }" slot="lineForm">
+ <getMapDataInThere
+ ref="getMapData"
+ id="getMapData"
+ @setMapData="setMapData"
+ ></getMapDataInThere>
+ </template>
+ </avue-crud>
+ </basic-container>
+</template>
+
+<script>
+import {getList, add, update, remove,getDetail} from "@/api/land/land";
+import getMapDataInThere from "./getMapDataInThere.vue";
+
+import {mapGetters} from "vuex";
+
+export default {
+ components: {
+ getMapDataInThere
+ },
+ data() {
+ return {
+ loading: true,
+ selectionList: [],
+ page: {
+ pageSize: 10,
+ currentPage: 1,
+ total: 0
+ },
+ form: {},
+ query: {},
+ data: [],
+ option: {
+ index: true,
+ tip: false,
+ addBtn: true,
+ viewBtn: true,
+ searchMenuSpan: 6,
+ height: 583,
+ menuWidth: 300,
+ border: true,
+ align: "center",
+ selection: true,
+ column: [
+ {
+ label: "地块名称",
+ search: true,
+ prop: "landName",
+ rules: [{
+ required: true,
+ message: "请输入地块名称",
+ trigger: "blur"
+ }]
+ },
+ {
+ label: "地块类型",
+ type: "select",
+ prop: "landType",
+ dicUrl: "/api/blade-system/dict-biz/dictionary?code=land",
+ props: {
+ label: "dictValue",
+ value: "dictKey"
+ },
+ dataType: "number",
+ search: true,
+ rules: [{
+ required: true,
+ message: "请选择地块类型",
+ trigger: "blur"
+ }]
+ },
+ {
+ label: "地块面积",
+ span: 6,
+ addDisplay: false,
+ disabled: true,
+ gutter: 20,
+ tip: '绘制轮廓后自动计算',
+ prop: "landArea",
+ },
+ // {
+ // label: "地块范围",
+ // prop: "landRange",
+ // },
+ // {
+ // label: "状态 （0：已耕种 1：未耕种）",
+ // prop: "type",
+ // rules: [{
+ // required: true,
+ // message: "请输入状态 （0：已耕种 1：未耕种）",
+ // trigger: "blur"
+ // }]
+ // },
+ {
+ label: "面积单位",
+ prop: "landUnit",
+ type: "select",
+ dicUrl: "/api/blade-system/dict-biz/dictionary?code=landunit",
+ props: {
+ label: "dictValue",
+ value: "dictKey"
+ },
+ dataType: "number",
+ span: 6,
+ },
+ {
+ label: "路线展示",
+ labelWidth: "0",
+ prop: "line",
+ className: "mapClass",
+ hide: true,
+ display: true,
+ span: 24,
+ formslot: true,
+ addDisplay: true
+ }
+ ],
+ }
+ };
+ },
+ created() {
+ // this.getRailLazyTree();
+ },
+ computed: {
+ ...mapGetters(["userInfo", "permission", "polygons"]),
+ permissionList() {
+ return {
+ addBtn: this.vaildData(this.permission.land_add, false),
+ viewBtn: this.vaildData(this.permission.land_view, false),
+ delBtn: this.vaildData(this.permission.land_delete, false),
+ editBtn: this.vaildData(this.permission.land_edit, false)
+ };
+ },
+ ids() {
+ let ids = [];
+ this.selectionList.forEach(ele => {
+ ids.push(ele.id);
+ });
+ return ids.join(",");
+ }
+ },
+ mounted() {
+ },
+ methods: {
+ rowSave(row, done, loading) {
+ 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(() => {
+ this.onLoad(this.page);
+ this.$message({
+ type: "success",
+ message: "操作成功!"
+ });
+ done();
+ }, error => {
+ loading();
+ window.console.log(error);
+ });
+ },
+ rowUpdate(row, index, done, loading) {
+ update(row).then(() => {
+ this.onLoad(this.page);
+ this.$message({
+ type: "success",
+ message: "操作成功!"
+ });
+ done();
+ }, error => {
+ loading();
+ console.log(error);
+ });
+ },
+ rowDel(row) {
+ this.$confirm("确定将选择数据删除?", {
+ confirmButtonText: "确定",
+ cancelButtonText: "取消",
+ type: "warning"
+ })
+ .then(() => {
+ return remove(row.id);
+ })
+ .then(() => {
+ this.onLoad(this.page);
+ this.$message({
+ type: "success",
+ message: "操作成功!"
+ });
+ });
+ },
+ handleDelete() {
+ if (this.selectionList.length === 0) {
+ this.$message.warning("请选择至少一条数据");
+ return;
+ }
+ this.$confirm("确定将选择数据删除?", {
+ confirmButtonText: "确定",
+ cancelButtonText: "取消",
+ type: "warning"
+ })
+ .then(() => {
+ return remove(this.ids);
+ })
+ .then(() => {
+ this.onLoad(this.page);
+ this.$message({
+ type: "success",
+ message: "操作成功!"
+ });
+ this.$refs.crud.toggleSelection();
+ });
+ },
+ beforeOpen(done, type) {
+ if (["edit", "view"].includes(type)) {
+ // getDetail(this.form.id).then(res => {
+ // this.form = res.data.data;
+ // });
+ getDetail(this.form.id).then((res) => {
+ if (res.data.code == 200) {
+ this.form = res.data.data;
+ let usePolygons = this.form.landRange
+ .split("POLYGON((")[1]
+ .split("))")[0]
+ .split(",");
+ for (let k in usePolygons) {
+ usePolygons[k] = {
+ lng: +usePolygons[k].split(" ")[0],
+ lat: +usePolygons[k].split(" ")[1],
+ };
+ }
+ this.$refs.getMapData.draw(usePolygons);
+ }
+ });
+ }
+ done();
+ },
+ searchReset() {
+ this.query = {};
+ this.onLoad(this.page);
+ },
+ searchChange(params, done) {
+ this.query = params;
+ this.page.currentPage = 1;
+ this.onLoad(this.page, params);
+ done();
+ },
+ selectionChange(list) {
+ this.selectionList = list;
+ },
+ selectionClear() {
+ this.selectionList = [];
+ this.$refs.crud.toggleSelection();
+ },
+ currentChange(currentPage) {
+ this.page.currentPage = currentPage;
+ },
+ sizeChange(pageSize) {
+ this.page.pageSize = pageSize;
+ },
+ refreshChange() {
+ this.onLoad(this.page, this.query);
+ },
+ onLoad(page, params = {}) {
+ this.loading = true;
+ getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+ const data = res.data.data;
+ this.page.total = data.total;
+ this.data = data.records;
+ this.loading = false;
+ this.selectionClear();
+ });
+ }
+ }
+};
+</script>
+
+<style lang="scss">
+
+.mapClass div label {
+ display: none;
+}
+
+.mapClassMain {
+ padding-left: 5rem !important;
+}
+
+
+#getMapData {
+ width: calc(100% + 90px);
+ position: relative;
+ left: -90px;
+ height: 400px;
+}
+</style>
--
Gitblit v1.9.3