From 3d246e2571ca60eb71e5060a1eee2e95e7235ca7 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 18 Jul 2022 11:55:42 +0800
Subject: [PATCH] bufen
---
src/router/page/index.js | 111 +-
src/views/wel/index.vue | 1554 ++++++++++++++++----------------
src/views/land/cs.vue | 511 +++++-----
src/views/land/LandDetail.vue | 31
src/views/land/getMapDataInThere.vue | 609 ++++++------
src/views/mapPattern/index.vue | 12
src/styles/element-ui.scss | 32
7 files changed, 1,472 insertions(+), 1,388 deletions(-)
diff --git a/src/router/page/index.js b/src/router/page/index.js
index 056fb1e..b7ade24 100644
--- a/src/router/page/index.js
+++ b/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'
- }
+}
]
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 42077d7..21188cf 100644
--- a/src/styles/element-ui.scss
+++ b/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;
+
+ }
+ }
+
+ }
+
+
}
\ No newline at end of file
diff --git a/src/views/land/LandDetail.vue b/src/views/land/LandDetail.vue
index f61cbc4..9accb0b 100644
--- a/src/views/land/LandDetail.vue
+++ b/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 {
diff --git a/src/views/land/cs.vue b/src/views/land/cs.vue
index 629e934..088b63e 100644
--- a/src/views/land/cs.vue
+++ b/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>
diff --git a/src/views/land/getMapDataInThere.vue b/src/views/land/getMapDataInThere.vue
index d1a0abf..e3950e0 100644
--- a/src/views/land/getMapDataInThere.vue
+++ b/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>
diff --git a/src/views/mapPattern/index.vue b/src/views/mapPattern/index.vue
new file mode 100644
index 0000000..c486356
--- /dev/null
+++ b/src/views/mapPattern/index.vue
@@ -0,0 +1,12 @@
+<template>
+ <div></div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/views/wel/index.vue b/src/views/wel/index.vue
index 63df300..6b249e4 100644
--- a/src/views/wel/index.vue
+++ b/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
- > 亩
- </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> 亩
+ </div>
+ </div>
+ <div class="land-statis">
+ <div class="land-title">当前种养面积</div>
+ <div class="land-num">
+ <span>{{ landInfo.sarea }}</span> 亩
+ </div>
+ </div>
+ <div class="land-statis">
+ <div class="land-title">当前种养品种</div>
+ <div class="land-num">
+ <span>{{ landInfo.num }}</span> 种
+ </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
- > 亩
- </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
- > 种
- </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> 次
+ </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">
+ 剩余库存
+ <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
- > 次
- </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">剩余库存 <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>
--
Gitblit v1.9.3