bufen

shuishen

2022-07-18 3d246e2571ca60eb71e5060a1eee2e95e7235ca7

bufen

 src/router/page/index.js

@@ -1,92 +1,103 @@
import Layout from '@/page/index/'

export default [{
  path: '/login',
  name: '登录页',
  component: () =>
    import( /* webpackChunkName: "page" */ '@/page/login/index'),
  meta: {
    keepAlive: true,
    isTab: false,
    isAuth: false
  }
    path: '/login',
    name: '登录页',
    component: () =>
        import( /* webpackChunkName: "page" */ '@/page/login/index'),
    meta: {
        keepAlive: true,
        isTab: false,
        isAuth: false
    }
},
  {
{
    path: '/mapPattern',
    component: () =>
        import( /* webpackChunkName: "page" */ '@/page/error-page/mapPattern'),
    name: 'mapPattern',
    meta: {
        keepAlive: false,
        isTab: false,
        isAuth: false
    }
},
{
    path: '/stockInfo',
    name: '登录页',
    component: () =>
      import( /* webpackChunkName: "page" */ '@/views/stock/stockInfo'),
        import( /* webpackChunkName: "page" */ '@/views/stock/stockInfo'),
    meta: {
      keepAlive: true,
      isTab: false,
      isAuth: false
        keepAlive: true,
        isTab: false,
        isAuth: false
    }
  },
  {
},
{
    path: '/lock',
    name: '锁屏页',
    component: () =>
      import( /* webpackChunkName: "page" */ '@/page/lock/index'),
        import( /* webpackChunkName: "page" */ '@/page/lock/index'),
    meta: {
      keepAlive: true,
      isTab: false,
      isAuth: false
        keepAlive: true,
        isTab: false,
        isAuth: false
    }
  },
  {
},
{
    path: '/404',
    component: () =>
      import( /* webpackChunkName: "page" */ '@/components/error-page/404'),
        import( /* webpackChunkName: "page" */ '@/components/error-page/404'),
    name: '404',
    meta: {
      keepAlive: true,
      isTab: false,
      isAuth: false
        keepAlive: true,
        isTab: false,
        isAuth: false
    }

  },
  {
},
{
    path: '/403',
    component: () =>
      import( /* webpackChunkName: "page" */ '@/components/error-page/403'),
        import( /* webpackChunkName: "page" */ '@/components/error-page/403'),
    name: '403',
    meta: {
      keepAlive: true,
      isTab: false,
      isAuth: false
        keepAlive: true,
        isTab: false,
        isAuth: false
    }
  },
  {
},
{
    path: '/500',
    component: () =>
      import( /* webpackChunkName: "page" */ '@/components/error-page/500'),
        import( /* webpackChunkName: "page" */ '@/components/error-page/500'),
    name: '500',
    meta: {
      keepAlive: true,
      isTab: false,
      isAuth: false
        keepAlive: true,
        isTab: false,
        isAuth: false
    }
  },
  {
},
{
    path: '/',
    name: '主页',
    redirect: '/wel'
  },
  {
},
{
    path: '/myiframe',
    component: Layout,
    redirect: '/myiframe',
    children: [{
      path: ":routerPath",
      name: 'iframe',
      component: () =>
        import( /* webpackChunkName: "page" */ '@/components/iframe/main'),
      props: true
        path: ":routerPath",
        name: 'iframe',
        component: () =>
            import( /* webpackChunkName: "page" */ '@/components/iframe/main'),
        props: true
    }]

  },
  {
},
{
    path: '*',
    redirect: '/404'
  }
}
]

 src/styles/element-ui.scss

@@ -90,19 +90,51 @@
    .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%;
    }
}


.current-map-box {

    &>.el-dialog {

        width: 1200px;
        height: 620px;


        .el-dialog__header {}

        .el-dialog__body {
            position: relative;
            height: calc(100% - 54px);
            box-sizing: border-box;

            .save {
                position: absolute;
                bottom: 10px;
                right: 10px;

            }
        }

    }


}

 src/views/land/LandDetail.vue

@@ -11,6 +11,14 @@
                </div>
                <div class="dc">占地面积:{{ landArea }}{{ dica }}</div>
                <div class="dck">所属农场:{{ deptname }}</div>

                <div class="edit">
                    <el-button @click="btnGrounpShow = !btnGrounpShow" icon="el-icon-menu"></el-button>

                    <div v-show="btnGrounpShow" class="btn-grounp">
                        <el-button>删除地块</el-button>
                    </div>
                </div>
            </div>
            <div class="dv">
                <el-tabs v-model="activeName" @tab-click="handleClick">
@@ -32,8 +40,8 @@

        <el-dialog
            title="地块位置"
            class="current-map-box"
            :visible.sync="gradeBoxVisible1"
            width="width"
            :modal="true"
            :modal-append-to-body="true"
            :append-to-body="true"
@@ -42,7 +50,7 @@
            :before-close="dialogBeforeClose"
        >
            <getMapDataInThere ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere>
            <el-button>54654</el-button>
            <el-button class="save" type="success">保存</el-button>
        </el-dialog>
    </div>
</template>
@@ -94,7 +102,8 @@
                        addDisplay: true
                    }
                ],
            }
            },
            btnGrounpShow: false
        }
    },
    computed: {
@@ -215,9 +224,25 @@
}

.da {
    position: relative;
    width: 100%;
    line-height: 60px;
    background: #fff;

    .edit {
        position: absolute;
        top: 25px;
        right: 60px;

        .btn-grounp {
            padding: 0 10px;
            position: absolute;
            top: 40px;
            right: 60px;
            background: #fff;
            box-shadow: 0 0 10px 1px #ccc;
        }
    }
}

.dv {

 src/views/land/cs.vue

@@ -1,281 +1,286 @@
<template>
  <div class="wraaper-box">
    <div class="search">
      <div style="float: left">
        <div style="float: left">
          <el-select
            v-model="formInline.stype"
            placeholder="全部分类"
            size="small"
            @change="stypeChange"
          >
            <el-option label="全部分类" value=""></el-option>
            <el-option label="大田" value="0"></el-option>
            <el-option label="大棚" value="1"></el-option>
            <el-option label="果园" value="2"></el-option>
            <el-option label="鱼塘" value="3"></el-option>
            <el-option label="山地" value="4"></el-option>
            <el-option label="养殖区" value="4"></el-option>
          </el-select>
        </div>
<!--        <div style="float: left; margin-left: 15px">-->
<!--          <el-select-->
<!--            v-model="formInline.state"-->
<!--            size="small"-->
<!--            placeholder="有库存"-->
<!--            @change="stateChange"-->
<!--          >-->
<!--            <el-option label="全部" value=""></el-option>-->
<!--            <el-option label="有库存" value="0"></el-option>-->
<!--            <el-option label="无库存" value="1"></el-option>-->
<!--          </el-select>-->
<!--        </div>-->
        <div style="float: left; margin-left: 15px">
          <el-input
            v-model="formInline.keyword"
            size="small"
            placeholder="请输入名称"
            @input="keywordChange"
            clearable
          ></el-input>
        </div>
      </div>
      <div>
        <el-button size="small"
        ><span style="color: #5abf78" @click="out(row)">进入地图模式</span></el-button
        >
        <el-button type="success" size="small" @click="land" style="margin-right: 50px;width: 80px;">圈地</el-button>
      </div>
    </div>
    <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 class="wraaper-box">
        <div class="search">
            <div style="float: left">
                <div style="float: left">
                    <el-select
                        v-model="formInline.stype"
                        placeholder="全部分类"
                        size="small"
                        @change="stypeChange"
                    >
                        <el-option label="全部分类" value></el-option>
                        <el-option label="大田" value="0"></el-option>
                        <el-option label="大棚" value="1"></el-option>
                        <el-option label="果园" value="2"></el-option>
                        <el-option label="鱼塘" value="3"></el-option>
                        <el-option label="山地" value="4"></el-option>
                        <el-option label="养殖区" value="4"></el-option>
                    </el-select>
                </div>
                <!--        <div style="float: left; margin-left: 15px">-->
                <!--          <el-select-->
                <!--            v-model="formInline.state"-->
                <!--            size="small"-->
                <!--            placeholder="有库存"-->
                <!--            @change="stateChange"-->
                <!--          >-->
                <!--            <el-option label="全部" value=""></el-option>-->
                <!--            <el-option label="有库存" value="0"></el-option>-->
                <!--            <el-option label="无库存" value="1"></el-option>-->
                <!--          </el-select>-->
                <!--        </div>-->
                <div style="float: left; margin-left: 15px">
                    <el-input
                        v-model="formInline.keyword"
                        size="small"
                        placeholder="请输入名称"
                        @input="keywordChange"
                        clearable
                    ></el-input>
                </div>
            </div>
          </div>
            <div>
                <el-button size="small">
                    <span style="color: #5abf78" @click="out(row)">进入地图模式</span>
                </el-button>
                <el-button
                    type="success"
                    size="small"
                    @click="land"
                    style="margin-right: 50px;width: 80px;"
                >圈地</el-button>
            </div>
        </div>
      </div>
        <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 class="el-page">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :hide-on-single-page="value"
                :page-size="page.pageSize"
                background
                layout="total, prev, pager, next"
                :total="page.total"
            ></el-pagination>
        </div>
        <landAdd v-if="landVisible" ref="land" @refreshOnLoad="onLoad"></landAdd>
    </div>
    <div class="el-page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :hide-on-single-page="value"
        :page-size="page.pageSize"
        background
        layout="total, prev, pager, next"
        :total="page.total"
      >
      </el-pagination>
    </div>
    <landAdd v-if="landVisible" ref="land" @refreshOnLoad="onLoad"></landAdd>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {getList} from "@/api/land/land";
import landAdd from "./landAdd";
import { mapGetters } from "vuex"
import { getList } from "@/api/land/land"
import landAdd from "./landAdd"
export default {
  components: {
    landAdd,
  },
  name: "wel",
  data() {
    return {
      formInline: {
        stype: "0",
        state: "0",
        keyword: "",
      },
      query: {},
      value:false,
      farmingCount:0,
      landVisible: false,
      farmPlanList: [],
      page: {
        pageSize: 4,
        currentPage: 1,
        total: 0,
      },
      option: {
        labelWidth: 80,
        span:6,
        column: [
          {
            label: '地块类型',
            prop: 'search',
            search: true,
          }
        ]
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    this.onLoad();
  },
  methods: {
    //圈地
    land() {
      this.landVisible = true;
      this.$nextTick(() => {
        this.$refs.land.init();
      });
    components: {
        landAdd,
    },
    //农资类型select 改变事件
    stypeChange(value) {
      this.query["landType"] = value;
      this.onLoad(this.page, this.query);
    name: "wel",
    data () {
        return {
            formInline: {
                stype: "0",
                state: "0",
                keyword: "",
            },
            query: {},
            value: false,
            farmingCount: 0,
            landVisible: false,
            farmPlanList: [],
            page: {
                pageSize: 4,
                currentPage: 1,
                total: 0,
            },
            option: {
                labelWidth: 80,
                span: 6,
                column: [
                    {
                        label: '地块类型',
                        prop: 'search',
                        search: true,
                    }
                ]
            },
        }
    },
    //库存 select 改变事件
    stateChange(value) {
      this.query["state"] = value;
      this.onLoad(this.page, this.query);
    computed: {
        ...mapGetters(["userInfo"]),
    },
    //keywordChange 输入事件
    keywordChange(value) {
      this.query["landName"] = value;
      this.onLoad(this.page, this.query);
    created () {
        this.onLoad()
    },
    //分页
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.onLoad(this.page);
    },
    //改变页码
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.onLoad(this.page);
    },
    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;
    methods: {
        //圈地
        land () {
            this.landVisible = true
            this.$nextTick(() => {
                this.$refs.land.init()
            })
        },
        //农资类型select 改变事件
        stypeChange (value) {
            this.query["landType"] = value
            this.onLoad(this.page, this.query)
        },
        //库存 select 改变事件
        stateChange (value) {
            this.query["state"] = value
            this.onLoad(this.page, this.query)
        },
        //keywordChange 输入事件
        keywordChange (value) {
            this.query["landName"] = value
            this.onLoad(this.page, this.query)
        },
        //分页
        handleSizeChange (val) {
            this.page.pageSize = val
            this.onLoad(this.page)
        },
        //改变页码
        handleCurrentChange (val) {
            this.page.currentPage = val
            this.onLoad(this.page)
        },
        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;
      });
    }
  },
                this.farmPlanList = data.records
            })
        }
    },
};
</script>
<style lang="scss" scope>
.el-font-size {
  font-size: 14px;
    font-size: 14px;
}

.search {
  padding-top: 40px;
  width: 98%;
  margin: 0 auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

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

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



  }
  .search {
    padding-top: 40px;
    width: 98%;
    margin: 0 auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-top: -25px;
  }
  .el-page {
    padding-top: 30px;
    text-align: center;
  }
}

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

            .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;
                }
            }
        }
    }
    .search {
        padding-top: 40px;
        width: 98%;
        margin: 0 auto;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        margin-top: -25px;
    }
    .el-page {
        padding-top: 30px;
        text-align: center;
    }
}
</style>

 src/views/land/getMapDataInThere.vue

@@ -1,345 +1,340 @@
<template>
  <div class="getMapData" :key="Refresh">
    <MapInThere ref="getMapDataRefs" />
    <div class="notDatas" v-show="isCheck">
      <div style="color: red">*</div>
      未绘画区域
    <div class="getMapData" :key="Refresh">
        <MapInThere ref="getMapDataRefs" />
        <div class="notDatas" v-show="isCheck">
            <div style="color: red">*</div>未绘画区域
        </div>
        <div class="controlMapWindowTitle">
            <el-button-group>
                <el-button type="primary" icon="el-icon-finished" @click="drawFace">绘画区域</el-button>
                <el-button type="danger" @click="giveUp" icon="el-icon-close">取消</el-button>
            </el-button-group>
        </div>
    </div>
    <div class="controlMapWindowTitle">
      <el-button-group>
        <el-button type="primary" icon="el-icon-finished" @click="drawFace"
          >绘画区域</el-button
        >
        <el-button type="danger" @click="giveUp" icon="el-icon-close"
          >取消</el-button
        >
      </el-button-group>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import MapInThere from "@/components/map/mainInThere.vue";
import { mapGetters } from "vuex"
import MapInThere from "@/components/map/mainInThere.vue"
export default {
  name: "getMapData",
  components: {
    MapInThere,
  },
  computed: {
    ...mapGetters(["rotesData", "pointData", "polygons"]),
  },
  watch: {
    ourDatas: {
      handler(val) {
        this.checkDom("getMapDataRefs", (dom) => {
          dom.onceOnlodad(val);
        });
      },
      deep: true,
    name: "getMapData",
    components: {
        MapInThere,
    },
    polygons() {
      if (this.polygons.length > 0) {
        this.isCheck = false;
      }
    computed: {
        ...mapGetters(["rotesData", "pointData", "polygons"]),
    },
  },
  data() {
    return {
      Refresh: false,
      //动画效果
      animateName: "custom-classes-transition",
      animateEnter: "animated fadeIn",
      animateLeave: "animated fadeOut",
      //未输入动画效果
      animateName: "custom-classes-transition",
      animateEnter: "animated fadeInDown",
      animateLeave: "animated fadeOut",
      openTitle: "路径1",
      MapDataShow: false,
      fromView: false,
      ourDatas: [],
      nowId: 0,
      isCheck: false,
    };
  },
  mounted() {
   
  },
  methods: {
    draw(usePolygons) {
      this.$store.commit("setpolygon", usePolygons); //用vuex传最终数据
      this.doThat(usePolygons)
    },
    doThat(val) {
      this.checkDom("getMapDataRefs", (dom) => {
          dom.addLines(val);
          // 移动位置
          dom.move(val);
      });
    },
    drawFace() {
      this.$refs.getMapDataRefs.drawStart();
    },
    giveUp() {
      this.$refs.getMapDataRefs.closeDraw();
    },
    openDrawLineMethod() {
      let id = this.nowId++;
      this.ourDatas.push({
        label: "路径" + +id,
        value: "",
        name: "",
        notPath: false,
        isLine: true,
        id: +id,
      });
    },
    openDrawPointMethod() {
      let id = this.nowId++;
      this.ourDatas.push({
        label: "标点" + +id,
        value: "",
        name: "",
        notPath: false,
        isLine: false,
        id: +id,
      });
    },
    deleteRowOurs(index) {
      this.ourDatas.splice(index, 1);
    },
    backMapDataOurData(val, index) {
      if (val == "line") {
        this.ourDatas[index].value = this.rotesData;
      } else if (val == "point") {
        this.ourDatas[index].value = this.pointData;
      } else if (val == "notData") {
        this.ourDatas[index].value = "";
      }
      //单个验证
      this.myRules(index);
    },
    //以上是添加数据集方法
    //选择map数据
    openMap(val, num, value) {
      this.MapDataShow = true;
      this.openTitle = val;
      this.$refs.getMapDataRefs.init(val, num, value);
    },
    closeOpenedMap() {
      this.MapDataShow = false;
      // this.openTitle = "";
    },
    //下面是旧代码
    editInit(val) {
      //查看情况逆转String成为当页可使用数据,并做动作
      this.reverseMapData(val);
    },
    viewInit(val) {
      //查看情况逆转String成为当页可使用数据,并做动作
      this.reverseMapData(val);
      this.fromView = true; //查看数据不可改
    },
    reverseMapData(val, label) {
      //解释数据
      let rname = val[0][0].split(";"),
        r = val[0][1].split(";"),
        pname = val[1][0].split(";"),
        p = val[1][1].split(";");
      this.ourDatas = [];
      for (let k in r) {
        this.ourDatas.push({
          label: "路径" + (+k + 1),
          value: r[k],
          name: rname[k],
          notPath: false,
          isLine: true,
          id: this.ourDatas.length,
        });
      }
      for (let k in p) {
        let potion = p[k].split(",");
        this.ourDatas.push({
          label: "标点" + (+k + 1),
          value: [+potion[0], +potion[1]],
          name: pname[k],
          notPath: false,
          isLine: false,
          id: this.ourDatas.length,
        });
      }
      this.nowId = +this.ourDatas.length + 1;
    },
    myRules(index) {
      //单个验证
      if (this.ourDatas[index].name && this.ourDatas[index].value) {
        this.ourDatas[index].notPath = false;
      } else {
        this.ourDatas[index].notPath = 2;
      }
    },
    //自定义验证
    myRulesUse() {
      //把一个数组拆开两个来对应之前的数据
      let ourData = this.ourDatas;
      let lineBefor = [];
      let pointBefor = [];
      for (let o in ourData) {
        if (ourData[o].isLine) {
          lineBefor.push(ourData[o]);
        } else {
          pointBefor.push(ourData[o]);
        }
      }
      let line = this.changeMapData(lineBefor, "name");
      let point = this.changeMapData(pointBefor, "name");
      if (line[0] == "namenot" || point[0] == "namenot") {
        //需要显示验证失败合集
        let errorId = [];
        if (line[0] == "namenot") {
          errorId.push(...line[1]);
        }
        if (point[0] == "namenot") {
          errorId.push(...point[1]);
        }
        for (let x in this.ourDatas) {
          let flog = true;
          for (let k in errorId) {
            if (errorId[k] == this.ourDatas[x].id) {
              flog = false;
    watch: {
        ourDatas: {
            handler (val) {
                this.checkDom("getMapDataRefs", (dom) => {
                    dom.onceOnlodad(val)
                })
            },
            deep: true,
        },
        polygons () {
            if (this.polygons.length > 0) {
                this.isCheck = false
            }
          }
          if (flog) {
            this.ourDatas[x].notPath = false;
          } else {
            this.ourDatas[x].notPath = 2;
          }
        }
        return false;
      } else {
        for (let i in this.ourDatas) {
          this.ourDatas[i].notPath = false;
        }
        return [line, point];
      }
        },
    },
    //规则
    changeMapData(item, names) {
      let name = "",
        value = "",
        notData = [];
      let itemLength = item.length - 1;
      for (let k in item) {
        let inItem = item[k];
        for (let kin in inItem) {
          if (
            inItem[kin] == "" &&
            kin != "notPath" &&
            kin != "isLine" &&
            kin != "id"
          ) {
            notData.push(inItem.id);
            break;
          }
          if (kin == names) {
            name += inItem[kin];
            if (k != itemLength) {
              name += ";";
    data () {
        return {
            Refresh: false,
            //动画效果
            animateName: "custom-classes-transition",
            animateEnter: "animated fadeIn",
            animateLeave: "animated fadeOut",
            //未输入动画效果
            animateName: "custom-classes-transition",
            animateEnter: "animated fadeInDown",
            animateLeave: "animated fadeOut",
            openTitle: "路径1",
            MapDataShow: false,
            fromView: false,
            ourDatas: [],
            nowId: 0,
            isCheck: false,
        }
    },
    mounted () {

    },
    methods: {
        draw (usePolygons) {
            this.$store.commit("setpolygon", usePolygons) //用vuex传最终数据
            this.doThat(usePolygons)
        },
        doThat (val) {
            this.checkDom("getMapDataRefs", (dom) => {
                dom.addLines(val)
                // 移动位置
                dom.move(val)
            })
        },
        drawFace () {
            this.$refs.getMapDataRefs.drawStart()
        },
        giveUp () {
            this.$refs.getMapDataRefs.closeDraw()
        },
        openDrawLineMethod () {
            let id = this.nowId++
            this.ourDatas.push({
                label: "路径" + +id,
                value: "",
                name: "",
                notPath: false,
                isLine: true,
                id: +id,
            })
        },
        openDrawPointMethod () {
            let id = this.nowId++
            this.ourDatas.push({
                label: "标点" + +id,
                value: "",
                name: "",
                notPath: false,
                isLine: false,
                id: +id,
            })
        },
        deleteRowOurs (index) {
            this.ourDatas.splice(index, 1)
        },
        backMapDataOurData (val, index) {
            if (val == "line") {
                this.ourDatas[index].value = this.rotesData
            } else if (val == "point") {
                this.ourDatas[index].value = this.pointData
            } else if (val == "notData") {
                this.ourDatas[index].value = ""
            }
          }
          if (kin == "value") {
            value += inItem[kin];
            if (k != itemLength) {
              value += ";";
            //单个验证
            this.myRules(index)
        },
        //以上是添加数据集方法
        //选择map数据
        openMap (val, num, value) {
            this.MapDataShow = true
            this.openTitle = val
            this.$refs.getMapDataRefs.init(val, num, value)
        },
        closeOpenedMap () {
            this.MapDataShow = false
            // this.openTitle = "";
        },
        //下面是旧代码
        editInit (val) {
            //查看情况逆转String成为当页可使用数据,并做动作
            this.reverseMapData(val)
        },
        viewInit (val) {
            //查看情况逆转String成为当页可使用数据,并做动作
            this.reverseMapData(val)
            this.fromView = true //查看数据不可改
        },
        reverseMapData (val, label) {
            //解释数据
            let rname = val[0][0].split(";"),
                r = val[0][1].split(";"),
                pname = val[1][0].split(";"),
                p = val[1][1].split(";")
            this.ourDatas = []
            for (let k in r) {
                this.ourDatas.push({
                    label: "路径" + (+k + 1),
                    value: r[k],
                    name: rname[k],
                    notPath: false,
                    isLine: true,
                    id: this.ourDatas.length,
                })
            }
          }
        }
      }
      return notData.length > 0 ? [names + "not", notData] : [name, value];
            for (let k in p) {
                let potion = p[k].split(",")
                this.ourDatas.push({
                    label: "标点" + (+k + 1),
                    value: [+potion[0], +potion[1]],
                    name: pname[k],
                    notPath: false,
                    isLine: false,
                    id: this.ourDatas.length,
                })
            }
            this.nowId = +this.ourDatas.length + 1
        },
        myRules (index) {
            //单个验证
            if (this.ourDatas[index].name && this.ourDatas[index].value) {
                this.ourDatas[index].notPath = false
            } else {
                this.ourDatas[index].notPath = 2
            }
        },
        //自定义验证
        myRulesUse () {
            //把一个数组拆开两个来对应之前的数据
            let ourData = this.ourDatas
            let lineBefor = []
            let pointBefor = []
            for (let o in ourData) {
                if (ourData[o].isLine) {
                    lineBefor.push(ourData[o])
                } else {
                    pointBefor.push(ourData[o])
                }
            }
            let line = this.changeMapData(lineBefor, "name")
            let point = this.changeMapData(pointBefor, "name")
            if (line[0] == "namenot" || point[0] == "namenot") {
                //需要显示验证失败合集
                let errorId = []
                if (line[0] == "namenot") {
                    errorId.push(...line[1])
                }
                if (point[0] == "namenot") {
                    errorId.push(...point[1])
                }
                for (let x in this.ourDatas) {
                    let flog = true
                    for (let k in errorId) {
                        if (errorId[k] == this.ourDatas[x].id) {
                            flog = false
                        }
                    }
                    if (flog) {
                        this.ourDatas[x].notPath = false
                    } else {
                        this.ourDatas[x].notPath = 2
                    }
                }
                return false
            } else {
                for (let i in this.ourDatas) {
                    this.ourDatas[i].notPath = false
                }
                return [line, point]
            }
        },
        //规则
        changeMapData (item, names) {
            let name = "",
                value = "",
                notData = []
            let itemLength = item.length - 1
            for (let k in item) {
                let inItem = item[k]
                for (let kin in inItem) {
                    if (
                        inItem[kin] == "" &&
                        kin != "notPath" &&
                        kin != "isLine" &&
                        kin != "id"
                    ) {
                        notData.push(inItem.id)
                        break
                    }
                    if (kin == names) {
                        name += inItem[kin]
                        if (k != itemLength) {
                            name += ";"
                        }
                    }
                    if (kin == "value") {
                        value += inItem[kin]
                        if (k != itemLength) {
                            value += ";"
                        }
                    }
                }
            }
            return notData.length > 0 ? [names + "not", notData] : [name, value]
        },
        checkDom (name, fn) {
            //  声明定时器
            let that = this
            var timer = null
            //  检查dom是否执行完成
            function checkDom () {
                let dom = that.$refs[name]
                if (dom) {
                    //  执行dom加载完成后的操作
                    //  清除定时器
                    if (!timer) {
                        clearTimeout(timer)
                    }
                    if (fn) {
                        //回调函数
                        fn(dom)
                        return
                    } else {
                        return dom
                    }
                } else {
                    //  自我调用
                    timer = setTimeout(checkDom, 100)
                }
            }
            //  首次执行
            checkDom()
        },
    },
    checkDom(name, fn) {
      //  声明定时器
      let that = this;
      var timer = null;
      //  检查dom是否执行完成
      function checkDom() {
        let dom = that.$refs[name];
        if (dom) {
          //  执行dom加载完成后的操作
          //  清除定时器
          if (!timer) {
            clearTimeout(timer);
          }
          if (fn) {
            //回调函数
            fn(dom);
            return;
          } else {
            return dom;
          }
        } else {
          //  自我调用
          timer = setTimeout(checkDom, 100);
        }
      }
      //  首次执行
      checkDom();
    },
  },
};
</script>

<style lang="scss">
.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.getMapData {
  width: 100%;
  height: 100%;
  position: relative;
  .controlMapWindowTitle {
    position: absolute;
    left: calc(50% - 42px);
    top: 0;
  }
  .notPath {
    // border-bottom: 0.5px solid red;
  }
    width: 100%;
    height: 100%;
    position: relative;
    .controlMapWindowTitle {
        position: absolute;
        left: calc(50% - 102.5px);
        top: 0;
    }
    .notPath {
        // border-bottom: 0.5px solid red;
    }
}

//过度动画
.list-enter {
  opacity: 0;
  transform: translateY(10px);
    opacity: 0;
    transform: translateY(10px);
}
.list-leave-to {
  opacity: 0;
  transform: translateY(-10px);
    opacity: 0;
    transform: translateY(-10px);
}

.list-enter-to,
.list-leave {
  opacity: 1;
    opacity: 1;
}
​ .list-enter-active,
.list-leave-active {
  transition: all 0.3s;
    transition: all 0.3s;
}

.notDatas {
  width: auto;
  height: auto;
  position: absolute;
  top: 5px;
  left: 100px;
  background-color: #fff;
  border-radius: 5px;
  padding: 2px 8px;
  div {
    display: inline;
  }
    width: auto;
    height: auto;
    position: absolute;
    top: 5px;
    left: 100px;
    background-color: #fff;
    border-radius: 5px;
    padding: 2px 8px;
    div {
        display: inline;
    }
}
</style>

 src/views/mapPattern/index.vue

New file
@@ -0,0 +1,12 @@
<template>
    <div></div>
</template>

<script>
export default {

}
</script>

<style>
</style>

 src/views/wel/index.vue

@@ -1,825 +1,829 @@
<template>
  <div class="home">
    <div class="left">
      <div class="farm-info">
        <div class="farm-title">农场概览</div>
        <div class="statis">
          <div class="echarts-statis">
            <el-progress
              type="circle"
              :percentage="landInfo.rate"
              :stroke-width="15"
              :width="150"
              :color="customColor"
              :show-text="false"
            ></el-progress>
          </div>
          <div class="percentText">
            <p>地块使用率</p>
            <p style="position: relative; top: -12px">
              <span
                style="font-size: 32px; font-weight: 550; margin-top: -10px"
                >{{ landInfo.rate || 0 }}</span
              >%
            </p>
          </div>
          <div class="avue-statis">
            <!-- <avue-data-display :option="option"></avue-data-display> -->
            <div class="land-statis">
              <div class="land-title">地块总面积</div>
              <div class="land-num">
                <span>{{ landInfo.zarea }}</span
                >&nbsp;亩
              </div>
    <div class="home">
        <div class="left">
            <div class="farm-info">
                <div class="farm-title">农场概览</div>
                <div class="statis">
                    <div class="echarts-statis">
                        <el-progress
                            type="circle"
                            :percentage="landInfo.rate"
                            :stroke-width="15"
                            :width="150"
                            :color="customColor"
                            :show-text="false"
                        ></el-progress>
                    </div>
                    <div class="percentText">
                        <p>地块使用率</p>
                        <p style="position: relative; top: -12px">
                            <span
                                style="font-size: 32px; font-weight: 550; margin-top: -10px"
                            >{{ landInfo.rate || 0 }}</span>%
                        </p>
                    </div>
                    <div class="avue-statis">
                        <!-- <avue-data-display :option="option"></avue-data-display> -->
                        <div class="land-statis">
                            <div class="land-title">地块总面积</div>
                            <div class="land-num">
                                <span>{{ landInfo.zarea }}</span>&nbsp;亩
                            </div>
                        </div>
                        <div class="land-statis">
                            <div class="land-title">当前种养面积</div>
                            <div class="land-num">
                                <span>{{ landInfo.sarea }}</span>&nbsp;亩
                            </div>
                        </div>
                        <div class="land-statis">
                            <div class="land-title">当前种养品种</div>
                            <div class="land-num">
                                <span>{{ landInfo.num }}</span>&nbsp;种
                            </div>
                        </div>
                    </div>
                    <div class="map-view">
                        <img src="../../../public/img/map.png" />
                        <div class="title">农场地图→</div>
                    </div>
                </div>
            </div>
            <div class="land-statis">
              <div class="land-title">当前种养面积</div>
              <div class="land-num">
                <span>{{ landInfo.sarea }}</span
                >&nbsp;亩
              </div>
            <div class="farm-variety">
                <div class="title">当前种养品种</div>
                <div class="content">
                    <div class="farm" v-for="(item, index) in farmPlanList" :key="index">
                        <div class="farm-img" @click="recoveryDetail(item)">
                            <img :src="item.url" class="img" />
                        </div>
                        <div class="cai">{{ item.strainName }}</div>
                        <div class="area">
                            种植面积：
                            <span>{{ item.area }}</span>亩
                        </div>
                        <div class="btn">
                            <el-button plain size="small" @click="recovery(item)">
                                <span style="color: #5abf78">采收</span>
                            </el-button>
                            <el-button plain size="small" @click="over(item.id)">结束</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="land-statis">
              <div class="land-title">当前种养品种</div>
              <div class="land-num">
                <span>{{ landInfo.num }}</span
                >&nbsp;种
              </div>
            </div>
          </div>
          <div class="map-view">
            <img src="../../../public/img/map.png" />
            <div class="title">农场地图→</div>
          </div>
            <div class="farm-bottom"></div>
        </div>
      </div>
      <div class="farm-variety">
        <div class="title">当前种养品种</div>
        <div class="content">
          <div class="farm" v-for="(item, index) in farmPlanList" :key="index">
            <div class="farm-img" @click="recoveryDetail(item)"><img :src="item.url" class="img" /></div>
            <div class="cai">{{ item.strainName }}</div>
            <div class="area">种植面积：<span>{{ item.area }}</span>亩</div>
            <div class="btn">
              <el-button plain size="small" @click="recovery(item)"
                ><span style="color: #5abf78">采收</span></el-button
              >
              <el-button plain size="small" @click="over(item.id)"
                >结束</el-button
              >
        <div class="right">
            <div class="production">
                <div class="title">生产管理</div>
                <div class="btn">
                    <!-- <div class="production-button"> -->
                    <div class="button" @click="land" style="background-color: #6991f4">
                        <div class="btn-img">
                            <img src="../../../public/img/wel/tian.png" class="img" />
                        </div>
                        <div class="text">圈地</div>
                    </div>
                    <div class="button" style="background-color: #f2a560" @click="plant">
                        <div class="btn-img">
                            <img src="../../../public/img/wel/ye.png" class="img" />
                        </div>
                        <div class="text">添加种养品种</div>
                    </div>
                    <div class="button" style="background-color: #f37ba1" @click="farming">
                        <div class="btn-img">
                            <img src="../../../public/img/wel/tuo.png" class="img" />
                        </div>
                        <div class="text">农事操作</div>
                    </div>
                    <div class="button" style="background-color: #9d82f6" @click="stock">
                        <div class="btn-img">
                            <img src="../../../public/img/wel/fang.png" class="img" />
                        </div>
                        <div class="text">农资入库</div>
                    </div>
                </div>
            </div>
          </div>
            <div class="statistics">
                <div class="title">生产统计</div>
                <div class="farming-statis">
                    <div class="left">
                        <div class="farm-text">本年农事操作</div>
                        <div class="num">
                            <span>{{ total }}</span>&nbsp;次
                        </div>
                    </div>
                    <div class="right">
                        <el-link type="success" :underline="false" @click="farmPlantDetail">明细>></el-link>
                    </div>
                </div>
                <div class="farming-divider" v-if="isFarmingDetail">
                    <el-divider></el-divider>
                </div>
                <div class="farming-details" :v-if="isFarmingDetail">
                    <div
                        class="detail"
                        v-for="(item, index) in farmingList"
                        :key="index"
                        @click="farmPlantDetails(item)"
                    >
                        <div class="detail-title">{{ item.name }}</div>
                        <div class="detail-number">
                            <span>{{ item.value }}</span>次
                        </div>
                    </div>
                </div>
            </div>
            <div class="repertory">
                <div class="title">
                    <div class="repertory-title">农资库存</div>
                    <div class="detail">
                        <el-link type="success" :underline="false " @click="stockDetail">明细>></el-link>
                    </div>
                </div>
                <div class="repertory-centont">
                    <div
                        class="detail"
                        v-for="(item, index) in stockList"
                        :key="index"
                        @click="stockDetails(item)"
                    >
                        <div class="detail-title">{{ item.name}}</div>
                        <div class="detail-number">
                            剩余库存&nbsp;
                            <span>{{ item.val}}</span>公斤
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
      <div class="farm-bottom"></div>
        <!-- 弹窗, 采收 -->
        <recovery v-if="recoveryVisible" ref="recovery"></recovery>
        <!-- 圈地 -->
        <land v-if="landVisible" ref="land"></land>
        <!-- 种养品 -->
        <plant v-if="plantVisible" ref="plant" @refreshOnLoad="onLoad"></plant>
        <!-- 农事操作 -->
        <farming v-if="farmingVisible" ref="farming"></farming>
        <!-- 农资入库 -->
        <stock v-if="stockVisible" ref="stock"></stock>
    </div>
    <div class="right">
      <div class="production">
        <div class="title">生产管理</div>
        <div class="btn">
          <!-- <div class="production-button"> -->
          <div class="button" @click="land" style="background-color: #6991f4">
            <div class="btn-img">
              <img src="../../../public/img/wel/tian.png" class="img" />
            </div>
            <div class="text">圈地</div>
          </div>
          <div class="button" style="background-color: #f2a560" @click="plant">
            <div class="btn-img">
              <img src="../../../public/img/wel/ye.png" class="img" />
            </div>
            <div class="text">添加种养品种</div>
          </div>
          <div
            class="button"
            style="background-color: #f37ba1"
            @click="farming"
          >
            <div class="btn-img">
              <img src="../../../public/img/wel/tuo.png" class="img" />
            </div>
            <div class="text">农事操作</div>
          </div>
          <div class="button" style="background-color: #9d82f6" @click="stock">
            <div class="btn-img">
              <img src="../../../public/img/wel/fang.png" class="img" />
            </div>
            <div class="text">农资入库</div>
          </div>
        </div>
      </div>
      <div class="statistics">
        <div class="title">生产统计</div>
        <div class="farming-statis">
          <div class="left">
            <div class="farm-text">本年农事操作</div>
            <div class="num">
              <span>{{ total }}</span
              >&nbsp;次
            </div>
          </div>
          <div class="right">
            <el-link type="success" :underline="false" @click="farmPlantDetail"
              >明细>></el-link
            >
          </div>
        </div>
        <div class="farming-divider" v-if="isFarmingDetail">
          <el-divider></el-divider>
        </div>
        <div class="farming-details" :v-if="isFarmingDetail">
          <div class="detail" v-for="(item, index) in farmingList" :key="index" @click="farmPlantDetails(item)">
            <div class="detail-title">{{ item.name }}</div>
            <div class="detail-number">
              <span>{{ item.value }}</span
              >次
            </div>
          </div>
        </div>
      </div>
      <div class="repertory">
        <div class="title">
          <div class="repertory-title">农资库存</div>
          <div class="detail">
            <el-link type="success" :underline="false "@click="stockDetail" >明细>></el-link>
          </div>
        </div>
        <div class="repertory-centont">
          <div class="detail" v-for="(item, index) in stockList" :key="index" @click="stockDetails(item)">
            <div class="detail-title">{{ item.name}}</div>
            <div class="detail-number">剩余库存&nbsp;<span>{{ item.val}}</span>公斤</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗, 采收 -->
    <recovery v-if="recoveryVisible" ref="recovery"></recovery>
    <!-- 圈地 -->
    <land v-if="landVisible" ref="land"></land>
    <!-- 种养品 -->
    <plant v-if="plantVisible" ref="plant" @refreshOnLoad="onLoad"></plant>
    <!-- 农事操作 -->
    <farming v-if="farmingVisible" ref="farming"></farming>
    <!-- 农资入库 -->
    <stock v-if="stockVisible" ref="stock"></stock>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getList, update } from "@/api/farmplant/farmplant";
import { getFarmingCount, getFarmingStatis } from "@/api/farm/farmingrecord";
import { selectCount } from "@/api/land/land";
import {StockCount} from "@/api/stock/stock"
import recovery from "./recovery.vue";
import land from "./land.vue";
import plant from "./plant.vue";
import farming from "./farming.vue";
import stock from "./stock.vue";
import { mapGetters } from "vuex"
import { getList, update } from "@/api/farmplant/farmplant"
import { getFarmingCount, getFarmingStatis } from "@/api/farm/farmingrecord"
import { selectCount } from "@/api/land/land"
import { StockCount } from "@/api/stock/stock"
import recovery from "./recovery.vue"
import land from "./land.vue"
import plant from "./plant.vue"
import farming from "./farming.vue"
import stock from "./stock.vue"
export default {
  components: {
    recovery,
    land,
    plant,
    farming,
    stock,
  },
  name: "wel",
  data() {
    return {
      farmingList: [],
      stockList: [],
      isFarmingDetail: false,
      landInfo: {},
      customColor: "#5ABF78",
      total: 0,
      farmingCount: 0,
      farmPlanList: [],
      recoveryVisible: false,
      landVisible: false,
      plantVisible: false,
      farmingVisible: false,
      stockVisible: false,
      option: {
        span: 8,
        data: [],
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    //地块使用率统计
    this.getCountStatis();
    //采收列表
    this.onLoad();
    //本年农事操作记录
    this.getFarmingCount();
    //本年农事操作记录,分组
    this.getFarmingStatis();
    this.StockCount();
  },
  methods: {
    //本年农事操作记录
    getFarmingCount() {
      var that = this;
      getFarmingCount(this.userInfo.farmId).then((res) => {
        that.total = res.data.data;
        // that.total = 0;
        if (that.total > 0) {
          that.isFarmingDetail = true;
    components: {
        recovery,
        land,
        plant,
        farming,
        stock,
    },
    name: "wel",
    data () {
        return {
            farmingList: [],
            stockList: [],
            isFarmingDetail: false,
            landInfo: {},
            customColor: "#5ABF78",
            total: 0,
            farmingCount: 0,
            farmPlanList: [],
            recoveryVisible: false,
            landVisible: false,
            plantVisible: false,
            farmingVisible: false,
            stockVisible: false,
            option: {
                span: 8,
                data: [],
            },
        }
      });
    },
    //本年农事操作记录，分组统计
    getFarmingStatis() {
      var that = this;
      getFarmingStatis(this.userInfo.farmId).then((res) => {
        that.farmingList = res.data.data;
      });
    computed: {
        ...mapGetters(["userInfo"]),
    },
    StockCount() {
      var that = this;
      StockCount(this.userInfo.farmId).then((res) => {
        that.stockList= res.data.data;
        console.log(that.stockList)
      });
    created () {
        //地块使用率统计
        this.getCountStatis()
        //采收列表
        this.onLoad()
        //本年农事操作记录
        this.getFarmingCount()
        //本年农事操作记录,分组
        this.getFarmingStatis()
        this.StockCount()
    },
    //地块使用率统计
    getCountStatis() {
      var that = this;
      selectCount(this.userInfo.farmId).then((res) => {
        var data = res.data.data;
        that.landInfo = data;
      });
    methods: {
        //本年农事操作记录
        getFarmingCount () {
            var that = this
            getFarmingCount(this.userInfo.farmId).then((res) => {
                that.total = res.data.data
                // that.total = 0;
                if (that.total > 0) {
                    that.isFarmingDetail = true
                }
            })
        },
        //本年农事操作记录，分组统计
        getFarmingStatis () {
            var that = this
            getFarmingStatis(this.userInfo.farmId).then((res) => {
                that.farmingList = res.data.data
            })
        },
        StockCount () {
            var that = this
            StockCount(this.userInfo.farmId).then((res) => {
                that.stockList = res.data.data
                console.log(that.stockList)
            })
        },
        //地块使用率统计
        getCountStatis () {
            var that = this
            selectCount(this.userInfo.farmId).then((res) => {
                var data = res.data.data
                that.landInfo = data
            })
        },
        handleChange (val) {
            window.console.log(val)
        },
        //获取种植中的种养品
        onLoad () {
            var params = {
                status: 1,
            }
            params['tenantId'] = this.userInfo.tenant_id
            params['farmId'] = this.userInfo.farmId
            getList(1, 10, Object.assign(params)).then((res) => {
                const data = res.data.data
                this.farmPlanList = data.records
            })
        },
        //采收
        recovery (data) {
            this.recoveryVisible = true
            this.$nextTick(() => {
                this.$refs.recovery.init(data)
            })
        },
        //结束种植
        over (id) {
            var that = this
            this.$confirm("确定结束当前种植的农产品?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    const data = {
                        id: id,
                        status: 2,
                    }
                    return update(data)
                })
                .then(() => {
                    that.onLoad()
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                })
        },
        //圈地
        land () {
            this.landVisible = true
            this.$nextTick(() => {
                this.$refs.land.init()
            })
        },
        //种植
        plant () {
            this.plantVisible = true
            this.$nextTick(() => {
                this.$refs.plant.init()
            })
        },
        //农事操作
        farming () {
            this.farmingVisible = true
            this.$nextTick(() => {
                this.$refs.farming.init()
            })
        },
        //农资入库
        stock () {
            this.stockVisible = true
            this.$nextTick(() => {
                this.$refs.stock.init()
            })
        },
        //本年农事操作明细
        farmPlantDetail () {
            const data = {
                activeName: "tab2",
            }
            this.$router.push({
                path: `/farmDetail`,
                query: data,
            })
        },
        stockDetail () {
            this.$router.push({
                path: `/stockmanage`,
            })
        },
        //本年农事操作明细--有参
        farmPlantDetails (item) {
            console.log(item, 11111)
            const data = {
                type: item.value,
                activeName: "tab2",
            }
            this.$router.push({
                path: `/farmDetail`,
                query: data,
            })
        },
        //农资库存点击事件
        stockDetails (item) {
            var type
            if (item.name == "化肥") {
                type = 0
            }
            if (item.name == "有机肥") {
                type = 1
            }
            if (item.name == "杀虫剂") {
                type = 2
            }
            if (item.name == "杀菌剂") {
                type = 3
            }
            if (item.name == "饲料") {
                type = 4
            }
            const data = {
                type: type,
            }
            this.$router.push({
                path: `/stockmanage`,
                query: data,
            })
        },
        //采收记录
        recoveryDetail () {
            const data = {
                activeName: "tab1",
            }
            this.$router.push({
                path: `/farmDetail`,
                query: data,
            })
        },
    },
    handleChange(val) {
      window.console.log(val);
    },
    //获取种植中的种养品
    onLoad() {
      var params = {
        status: 1,
      };
      params['tenantId'] = this.userInfo.tenant_id;
      params['farmId'] = this.userInfo.farmId;
      getList(1, 10, Object.assign(params)).then((res) => {
        const data = res.data.data;
        this.farmPlanList = data.records;
      });
    },
    //采收
    recovery(data) {
      this.recoveryVisible = true;
      this.$nextTick(() => {
        this.$refs.recovery.init(data);
      });
    },
    //结束种植
    over(id) {
      var that = this;
      this.$confirm("确定结束当前种植的农产品?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const data = {
            id: id,
            status: 2,
          };
          return update(data);
        })
        .then(() => {
          that.onLoad();
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    //圈地
    land() {
      this.landVisible = true;
      this.$nextTick(() => {
        this.$refs.land.init();
      });
    },
    //种植
    plant() {
      this.plantVisible = true;
      this.$nextTick(() => {
        this.$refs.plant.init();
      });
    },
    //农事操作
    farming() {
      this.farmingVisible = true;
      this.$nextTick(() => {
        this.$refs.farming.init();
      });
    },
    //农资入库
    stock() {
      this.stockVisible = true;
      this.$nextTick(() => {
        this.$refs.stock.init();
      });
    },
    //本年农事操作明细
    farmPlantDetail() {
      const data = {
        activeName: "tab2",
      };
      this.$router.push({
        path: `/farmDetail`,
        query: data,
      });
    },
    stockDetail() {
      this.$router.push({
        path: `/stockmanage`,
      });
    },
    //本年农事操作明细--有参
    farmPlantDetails(item) {
      console.log(item,11111);
      const data = {
        type:item.value,
        activeName: "tab2",
      };
      this.$router.push({
        path: `/farmDetail`,
        query: data,
      });
    },
    //农资库存点击事件
    stockDetails(item) {
      var type;
      if (item.name=="化肥"){
        type=0
      }
      if (item.name=="有机肥"){
        type=1
      }
      if (item.name=="杀虫剂"){
        type=2
      }
      if (item.name=="杀菌剂"){
        type=3
      }
      if (item.name=="饲料"){
        type=4
      }
      const data = {
        type:type,
      };
      this.$router.push({
        path: `/stockmanage`,
        query: data,
      });
    },
    //采收记录
    recoveryDetail() {
      const data = {
        activeName: "tab1",
      };
      this.$router.push({
        path: `/farmDetail`,
        query: data,
      });
    },
  },
};
</script>

<style lang="scss" scope>
.el-font-size {
  font-size: 14px;
    font-size: 14px;
}

.home {
  width: 100%;
  // height: 100%;
  display: flex;
  flex-direction: row;
    width: 100%;
    // height: 100%;
    display: flex;
    flex-direction: row;

  .left {
    margin-left: 1%;
    width: 75%;
    height: 100%;
    .left {
        margin-left: 1%;
        width: 75%;
        height: 100%;

    .farm-info {
      width: 100%;
      height: 30%;
      background-color: #fff;
      border-radius: 5px;
        .farm-info {
            width: 100%;
            height: 30%;
            background-color: #fff;
            border-radius: 5px;

      .farm-title {
        padding-top: 20px;
        height: 30px;
        line-height: 30px;
        font-size: 24px;
        font-weight: 550;
        text-align: center;
      }

      .statis {
        width: 100%;
        display: flex;

        .echarts-statis {
          width: 20%;
          height: 170px;
          line-height: 170px;
          margin: 0 auto;
          margin-left: 90px;
          // text-align: center;
          padding-top: 30px;
        }

        .percentText {
          position: relative;
          left: -16%;
          top: 57px;
          width: 90px;
          font-size: 16px;
          text-align: center;
        }

        .avue-statis {
          width: 60%;
          height: 170px;
          padding-top: 50px;
          margin-left: -80px;
          display: flex;
          flex-direction: row;

          .land-statis {
            width: 33%;
            margin: 3% 8%;

            .land-num {
              margin-top: 20px;

              span {
                font-size: 30px;
            .farm-title {
                padding-top: 20px;
                height: 30px;
                line-height: 30px;
                font-size: 24px;
                font-weight: 550;
                color: #5abf78;
              }
                text-align: center;
            }
          }

            .statis {
                width: 100%;
                display: flex;

                .echarts-statis {
                    width: 20%;
                    height: 170px;
                    line-height: 170px;
                    margin: 0 auto;
                    margin-left: 90px;
                    // text-align: center;
                    padding-top: 30px;
                }

                .percentText {
                    position: relative;
                    left: -16%;
                    top: 57px;
                    width: 90px;
                    font-size: 16px;
                    text-align: center;
                }

                .avue-statis {
                    width: 60%;
                    height: 170px;
                    padding-top: 50px;
                    margin-left: -80px;
                    display: flex;
                    flex-direction: row;

                    .land-statis {
                        width: 33%;
                        margin: 3% 8%;

                        .land-num {
                            margin-top: 20px;

                            span {
                                font-size: 30px;
                                font-weight: 550;
                                color: #5abf78;
                            }
                        }
                    }
                }

                .map-view {
                    width: 20%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;

                    img {
                        width: 90px;
                        height: 66px;
                    }

                    .title {
                        font-size: 13px;
                        color: #fff;
                        z-index: 999;
                        position: relative;
                        left: -70px;
                        top: 15px;
                    }
                }
            }
        }

        .map-view {
          width: 20%;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        .farm-variety {
            margin-top: 15px;
            width: 100%;
            min-height: 600px;
            background-color: #fff;
            border-radius: 5px;

          img {
            width: 90px;
            height: 66px;
          }
            .title {
                padding-top: 20px;
                height: 30px;
                line-height: 30px;
                font-size: 24px;
                font-weight: 550;
                text-align: center;
            }

          .title {
            font-size: 13px;
            color: #fff;
            z-index: 999;
            position: relative;
            left: -70px;
            top: 15px;
          }
            .content {
                width: 99%;
                height: 630px;
                margin: 0 auto;

                word-wrap: break-word;
                word-break: break-all;

                .farm {
                    width: 168px;
                    height: 277px;
                    background-color: #f7f9fb;
                    border-radius: 5px;
                    margin-left: 30px;
                    margin-top: 30px;
                    float: left;

                    .farm-img {
                        width: 168px;
                        height: 168px;

                        .img {
                            width: 168px;
                            height: 168px;
                            border-radius: 8px 8px 0px 0px;
                        }
                    }

                    .cai {
                        text-align: center;
                        font-size: 18px;
                        font-weight: 550;
                        margin-top: 8px;
                        color: #5abf78;
                    }

                    .area {
                        text-align: center;
                        font-size: 14px;
                        margin-top: 5px;
                        color: #333333;

                        span {
                            font-size: 15px;
                            color: #333333;
                        }
                    }

                    .btn {
                        text-align: center;
                        margin-top: 8px;
                    }
                }
            }
        }
      }

        .farm-bottom {
            min-height: 50px;
        }
    }

    .farm-variety {
      margin-top: 15px;
      width: 100%;
      min-height: 600px;
      background-color: #fff;
      border-radius: 5px;
    .right {
        width: 22%;
        height: 100%;
        margin-left: 1%;

      .title {
        padding-top: 20px;
        height: 30px;
        line-height: 30px;
        font-size: 24px;
        font-weight: 550;
        text-align: center;
      }
        .production {
            width: 100%;
            height: 30%;
            background-color: #fff;
            border-radius: 5px;

      .content {
        width: 99%;
        height: 630px;
        margin: 0 auto;

        word-wrap: break-word;
        word-break: break-all;

        .farm {
          width: 168px;
          height: 277px;
          background-color: #f7f9fb;
          border-radius: 5px;
          margin-left: 30px;
          margin-top: 30px;
          float: left;

          .farm-img {
            width: 168px;
            height: 168px;

            .img {
              width: 168px;
              height: 168px;
              border-radius: 8px 8px 0px 0px;
            .title {
                padding-top: 20px;
                height: 30px;
                line-height: 30px;
                font-size: 24px;
                font-weight: 550;
                text-align: center;
            }
          }

          .cai {
            text-align: center;
            font-size: 18px;
            font-weight: 550;
            margin-top: 8px;
            color: #5abf78;
          }
            .btn {
                width: 88%;
                margin-left: 7%;
                padding-top: 20px;
                height: 200px;
                word-wrap: break-word;
                word-break: break-all;

          .area {
            text-align: center;
            font-size: 14px;
            margin-top: 5px;
            color: #333333;
                // .production-button {
                //   display: flex;
                //   padding-top: 12px;
                //   height: 100px;

            span {
              font-size: 15px;
              color: #333333;
                .button {
                    margin-left: 10px;
                    margin-top: 10px;
                    display: flex;
                    flex-direction: column;
                    float: left;
                    width: 140px;
                    height: 80px;
                    align-content: center;
                    justify-content: center;
                    border-radius: 3px;
                    cursor: pointer;
                    align-items: center;

                    .btn-img {
                        height: 32px;
                        line-height: 32px;
                        border-radius: 3px;

                        .img {
                            width: 32px;
                            height: 32px;
                        }
                    }

                    .text {
                        font-size: 18px;
                        color: #fff;
                    }
                }
                // }
            }
          }

          .btn {
            text-align: center;
            margin-top: 8px;
          }
        }
      }

        .statistics {
            margin-top: 15px;
            width: 100%;
            background-color: #fff;
            border-radius: 5px;
            height: auto;
            // white-space: nowrap;

            .title {
                padding-top: 20px;
                height: 30px;
                line-height: 30px;
                font-size: 24px;
                font-weight: 550;
                text-align: center;
            }

            .farming-statis {
                width: 94%;
                margin: 0 auto;
                height: 100px;
                display: flex;
                flex-direction: row;
                // background-color: aqua;

                .left {
                    width: 60%;
                    height: 100px;

                    .farm-text {
                        font-size: 20px;
                        margin-top: 20px;
                    }
                    .num {
                        font-size: 16px;
                        margin-top: 10px;

                        span {
                            font-size: 38px;
                            font-weight: 550;
                            color: #5abf78;
                        }
                    }
                }

                .right {
                    margin-left: 60px;
                    line-height: 100px;
                    height: 100px;
                }
            }

            .farming-divider {
                width: 94%;
                margin: 0 auto;
            }

            .farming-details {
                margin-top: -10px;
                width: 100%;
                height: auto;
                word-wrap: break-word;
                word-break: break-all;
                //自适应高度
                display: inline-block;

                .detail {
                    background-color: #eff3f8;
                    cursor: pointer;
                    float: left;
                    width: 45%;
                    border-radius: 4px;
                    margin-left: 3%;
                    margin-top: 10px;
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: space-between;
                    height: 40px;
                    line-height: 40px;

                    .detail-title {
                        color: #707070;
                        font-size: 14px;
                        margin-left: 10px;
                    }

                    .detail-number {
                        color: #707070;
                        font-size: 14px;
                        margin-right: 15px;

                        span {
                            font-size: 18px;
                            font-weight: 550;
                        }
                    }
                }

                .detail:hover {
                    background: #e3f0ff;
                }
            }
        }

        .repertory {
            margin-top: 15px;
            width: 100%;
            height: auto;
            background-color: #fff;
            border-radius: 5px;

            .title {
                padding-top: 20px;
                height: 30px;
                line-height: 30px;
                text-align: center;

                .repertory-title {
                    font-size: 24px;
                    font-weight: 550;
                    float: left;
                    padding-left: 35%;
                }

                .detail {
                }
            }

            .repertory-centont {
                width: 94%;
                margin: 0 auto;
                height: auto;
                word-wrap: break-word;
                word-break: break-all;
                //自适应高度
                display: inline-block;

                .detail:hover {
                    background: #e3f0ff;
                }

                .detail {
                    background-color: #eff3f8;
                    cursor: pointer;
                    float: left;
                    border-radius: 4px;
                    margin-left: 3%;
                    margin-top: 10px;
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: space-between;
                    height: 50px;
                    line-height: 50px;
                    width: 100%;

                    .detail-title {
                        color: #707070;
                        font-size: 16px;
                        margin-left: 10px;
                    }

                    .detail-number {
                        color: #707070;
                        font-size: 14px;
                        margin-right: 15px;

                        span {
                            font-size: 18px;
                            font-weight: 550;
                        }
                    }
                }
            }
        }
    }

    .farm-bottom {
      min-height: 50px;
    .avue-data-display .count {
        color: #000 !important;
        font-size: 28px !important;
    }
  }

  .right {
    width: 22%;
    height: 100%;
    margin-left: 1%;

    .production {
      width: 100%;
      height: 30%;
      background-color: #fff;
      border-radius: 5px;

      .title {
        padding-top: 20px;
        height: 30px;
        line-height: 30px;
        font-size: 24px;
        font-weight: 550;
        text-align: center;
      }

      .btn {
        width: 88%;
        margin-left: 7%;
        padding-top: 20px;
        height: 200px;
        word-wrap: break-word;
        word-break: break-all;

        // .production-button {
        //   display: flex;
        //   padding-top: 12px;
        //   height: 100px;

        .button {
          margin-left: 10px;
          margin-top: 10px;
          display: flex;
          flex-direction: column;
          float: left;
          width: 140px;
          height: 80px;
          align-content: center;
          justify-content: center;
          border-radius: 3px;
          cursor: pointer;
          align-items: center;

          .btn-img {
            height: 32px;
            line-height: 32px;
            border-radius: 3px;

            .img {
              width: 32px;
              height: 32px;
            }
          }

          .text {
            font-size: 18px;
            color: #fff;
          }
        }
        // }
      }
    }

    .statistics {
      margin-top: 15px;
      width: 100%;
      background-color: #fff;
      border-radius: 5px;
      height: auto;
      // white-space: nowrap;

      .title {
        padding-top: 20px;
        height: 30px;
        line-height: 30px;
        font-size: 24px;
        font-weight: 550;
        text-align: center;
      }

      .farming-statis {
        width: 94%;
        margin: 0 auto;
        height: 100px;
        display: flex;
        flex-direction: row;
        // background-color: aqua;

        .left {
          width: 60%;
          height: 100px;

          .farm-text {
            font-size: 20px;
            margin-top: 20px;
          }
          .num {
            font-size: 16px;
            margin-top: 10px;

            span {
              font-size: 38px;
              font-weight: 550;
              color: #5abf78;
            }
          }
        }

        .right {
          margin-left: 60px;
          line-height: 100px;
          height: 100px;
        }
      }

      .farming-divider {
        width: 94%;
        margin: 0 auto;
      }

      .farming-details {
        margin-top: -10px;
        width: 100%;
        height: auto;
        word-wrap: break-word;
        word-break: break-all;
        //自适应高度
        display: inline-block;

        .detail {
          background-color: #eff3f8;
          cursor: pointer;
          float: left;
          width: 45%;
          border-radius: 4px;
          margin-left: 3%;
          margin-top: 10px;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          height: 40px;
          line-height: 40px;

          .detail-title {
            color: #707070;
            font-size: 14px;
            margin-left: 10px;
          }

          .detail-number {
            color: #707070;
            font-size: 14px;
            margin-right: 15px;

            span {
              font-size: 18px;
              font-weight: 550;
            }
          }
        }

        .detail:hover {
          background: #e3f0ff;
        }
      }
    }

    .repertory {
      margin-top: 15px;
      width: 100%;
      height: auto;
      background-color: #fff;
      border-radius: 5px;

      .title {
        padding-top: 20px;
        height: 30px;
        line-height: 30px;
        text-align: center;

        .repertory-title {
          font-size: 24px;
          font-weight: 550;
          float: left;
          padding-left: 35%;
        }

        .detail {
        }
      }

      .repertory-centont {
        width: 94%;
        margin: 0 auto;
        height: auto;
        word-wrap: break-word;
        word-break: break-all;
        //自适应高度
        display: inline-block;

        .detail:hover {
          background: #e3f0ff;
        }

        .detail {
          background-color: #eff3f8;
          cursor: pointer;
          float: left;
          border-radius: 4px;
          margin-left: 3%;
          margin-top: 10px;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          height: 50px;
          line-height: 50px;
          width: 100%;

          .detail-title {
            color: #707070;
            font-size: 16px;
            margin-left: 10px;
          }

          .detail-number {
            color: #707070;
            font-size: 14px;
            margin-right: 15px;

            span {
              font-size: 18px;
              font-weight: 550;
            }
          }
        }
      }
    }
  }

  .avue-data-display .count {
    color: #000 !important;
    font-size: 28px !important;
  }
}
</style>