地块管理

tangzy

2022-05-25 de1541c64ad952cf70879b0af94862b068f831b2

地块管理

 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: {}
    })
}
}

 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')
        }]
    },
]
      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')
    }]
  },
]

 src/styles/element-ui.scss

@@ -81,4 +81,28 @@

.el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #5abf78 !important;
}
}
.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%;
  }
}

 src/views/land/LandDetail.vue

New file
@@ -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>

 src/views/land/cs.vue

New file
@@ -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>

 src/views/land/landMap.vue

New file
@@ -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>