From 83b1f5ccd0c425dc0dfff922347e9ec136bac430 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Mon, 15 Aug 2022 14:12:45 +0800
Subject: [PATCH] 小程序地图页面
---
src/views/v/index.vue | 639 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 638 insertions(+), 1 deletions(-)
diff --git a/src/views/v/index.vue b/src/views/v/index.vue
index 80f303c..134013b 100644
--- a/src/views/v/index.vue
+++ b/src/views/v/index.vue
@@ -7,9 +7,646 @@
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
- <div></div>
+ <div class="container">
+ <div class="current-header">
+ <div class="hasOutline">
+ 有轮廓的地块：
+ <span
+ class="hasOutline-count"
+ >{{landIsAreaStatistic.length > 0 ? landIsAreaStatistic[0] : 0}}</span>
+ </div>
+ <div class="noOutline">
+ 无轮廓的地块：
+ <span
+ class="noOutline-count"
+ >{{landIsAreaStatistic.length > 1 ? landIsAreaStatistic[1] : 0}}</span>
+ </div>
+ </div>
+ <div class="current-footer" v-show="isShowFooter">
+ <div class="tab-btn">
+ <div>
+ <div :class="{on: zydksb == 'zy'}" @click="choosedk = -1">
+ <div @click="zydksb = 'zy'" class="title">品种</div>
+ <span></span>
+ </div>
+ </div>
+
+ <div>
+ <div :class="{on: zydksb == 'dk'}" @click="choosepz = -1">
+ <div @click="zydksb = 'dk'" class="title">地块</div>
+ <span></span>
+ </div>
+ </div>
+ </div>
+ <div v-show="zydksb == 'zy'" class="list-box">
+ <div class="transverse">
+ <div v-for="(item,index) in plotPlantBreed" :key="index">
+ <div
+ v-if="index < Math.ceil(plotPlantBreed.length/2)"
+ class="item"
+ @click="choosepz = index"
+ :class="{choose: choosepz == index}"
+ >
+ <div class="tupian">
+ <img :src="item.url" alt />
+ </div>
+ <div class="pz-name">{{item.strainName}}</div>
+ </div>
+ </div>
+ </div>
+ <div class="transverse">
+ <div v-for="(item,index) in plotPlantBreed" :key="index">
+ <div
+ v-if="index >= Math.ceil(plotPlantBreed.length/2)"
+ class="item"
+ @click="choosepz = index"
+ :class="{choose: choosepz == index}"
+ >
+ <div class="tupian">
+ <img :src="item.url" alt />
+ </div>
+ <div class="pz-name">{{item.strainName}}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div v-show="zydksb == 'dk'" class="list-box">
+ <div class="transverse">
+ <div
+ v-for="(item,index) in landList"
+ :key="index"
+ @click="goTODetails(page,item.id)"
+ >
+ <div
+ v-if="index < Math.ceil(landList.length/2)"
+ class="item"
+ @click="choosedk = index"
+ :class="{choose: choosedk == index}"
+ >
+ <div class="tupian">
+ <img :src="item.url" alt />
+ </div>
+ <div class="dk-data">
+ <div class="dk-name">{{item.landName}}</div>
+ <div class="dk-state" :class="{dkstateon:dkState == item.type}">
+ <span v-if="item.type == 1">闲置中</span>
+ <span v-if="item.type == 0">使用中</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="transverse">
+ <div
+ v-for="(item,index) in landList"
+ :key="index"
+ @click="goTODetails(page,item.id)"
+ >
+ <div
+ v-if="index >= Math.ceil(landList.length/2)"
+ class="item"
+ @click="choosedk = index"
+ :class="{choose: choosedk == index}"
+ >
+ <div class="tupian">
+ <img :src="item.url" alt />
+ </div>
+ <div class="dk-data">
+ <div class="dk-name">{{item.landName}}</div>
+ <div class="dk-state" :class="{dkstateon:dkState == item.type}">
+ <span v-if="item.type == 1">闲置中</span>
+ <span v-if="item.type == 0">使用中</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="landDetail" v-show="isShowLandDetails">
+ <div class="landDetail-header">
+ <div class="close" @click="closeLandDetail">
+ <span>×</span>
+ </div>
+ <div class="title">
+ <div class="landName">{{landDetails.landName}}</div>
+ <div class="landContent">
+ <div class="landArea">占地面积：{{landDetails.landSize}}</div>
+ <div class="landtype">{{landDetails.dic}}</div>
+ </div>
+ </div>
+ <div class="inLand">
+ 进入地块
+ <i class="el-icon-arrow-right in-plot"></i>
+ </div>
+ </div>
+ <div class="landDetail-show">
+ <div v-for="(item,index) in farmPlantList" :key="index" class="item">
+ <div class="tupian">
+ <img :src="item.url" alt />
+ </div>
+ <div class="itemContent">
+ <div class="name">{{item.strainName}}</div>
+ <div class="pinzhong">品种:{{item.varieties?item.varieties:'空'}}</div>
+ <div class="time">{{item.transplanTime}}移栽</div>
+ </div>
+ </div>
+ <div v-show="farmPlantList.length == 0" class="landNoUse">该地块暂未使用</div>
+ </div>
+ </div>
+ </div>
</template>
<script>
+import { getLandIsAreaStatistic, getList, getLandList } from "@/api/v/index"
+export default {
+ data () {
+ return {
+ zydksb: 'zy',
+ choosepz: -1,
+ choosedk: -1,
+ dkState: 0,
+ landIsAreaStatistic: [],
+ page: {
+ pageSize: 20,
+ currentPage: 1,
+ total: 0,
+ },
+ pageLand: {
+ pageSize: 20,
+ currentPage: 1,
+ total: 0,
+ },
+ plotPlantBreed: [],
+ landList: [],
+ farmPlantList: [],
+ landDetails: {},
+ isShowLandDetails: false,
+ isShowFooter: true
+ }
+ },
+ created () {
+ // 获取有无轮廓地块数量
+ this.getLandIsAreaStatistic()
+ // 获取农产品列表
+ this.getFarmPlantList(this.page)
+ //获取地块列表
+ this.getLandList(this.pageLand)
+ },
+ methods: {
+ //获取地块轮廓统计信息
+ getLandIsAreaStatistic () {
+ getLandIsAreaStatistic(1).then(res => {
+ this.landIsAreaStatistic = res.data.data
+ })
+ },
+ //获取种养品列表
+ getFarmPlantList (page, params = {}) {
+ params['farmId'] = 1
+ getList(
+ page.currentPage,
+ page.pageSize,
+ Object.assign(params)
+ ).then((res) => {
+ const data = res.data.data
+ this.page.total = data.total
+ this.farmPlantList = data.records
+ console.log('records:', data.records)
+ let arr = []
+ this.farmPlantList.forEach(item => {
+ if (arr.length > 0) {
+ let result = arr.some(it => {
+ if (item.strainName == it.strainName) {
+ it.area += Number(item.area)
+
+ return true
+ }
+ })
+
+ if (!result) {
+ arr.push({
+ strainName: item.strainName,
+ area: Number(item.area),
+ url: item.url
+ })
+ }
+ } else {
+ arr.push({
+ strainName: item.strainName,
+ area: Number(item.area),
+ url: item.url
+ })
+ }
+ })
+
+ this.plotPlantBreed = arr
+
+ })
+ },
+ //获取地块列表
+ getLandList (page, params = {}) {
+ params['farmId'] = 1
+ params['tenantId'] = '000000'
+ getLandList(
+ page.currentPage,
+ page.pageSize,
+ Object.assign(params)
+ ).then((res) => {
+ const data = res.data.data
+
+ data.records.forEach(item => {
+ if (item.landRange != '' || item.landRange != null) {
+ item.landRange = item.landRange.replace(/POLYGON\(\(/g, '')
+ item.landRange = item.landRange.replace(/\)\)/g, '')
+
+ const arr = item.landRange.split(',')
+ var brr = []
+ arr.forEach(it => {
+ brr.push(it.split(' '))
+ })
+ }
+ })
+
+ this.pageLand.total = data.total
+ this.landList = data.records
+ })
+ },
+ // 获取对应地块农产品
+ goTODetails (page, id, params = {}) {
+ this.isShowFooter = false
+ this.isShowLandDetails = true
+ console.log(page, id)
+ params['farmId'] = 1
+ params['landId'] = id
+ getList(
+ page.currentPage,
+ page.pageSize,
+ Object.assign(params)
+ ).then((res) => {
+ this.farmPlantList = res.data.data.records
+ console.log('records:', this.farmPlantList)
+ })
+ this.landList.forEach(item => {
+ if (item.id == id) {
+ this.landDetails = Object.assign({}, this.landDetails, { landName: item.landName, landSize: item.landArea + item.dica, dic: item.dic })
+ }
+ })
+ },
+ // 关闭按钮
+ closeLandDetail () {
+ this.isShowLandDetails = false
+ this.isShowFooter = true
+ }
+
+
+
+ }
+}
</script>
+<style lang="scss" scoped>
+.container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ background-image: url(https://img.zcool.cn/community/01ab145b840a2ba8012190f26e8bd2.jpg@1280w_1l_2o_100sh.jpg);
+ background-size: 100% 100%;
+ width: 100%;
+ height: 100%;
+ .current-header {
+ display: flex;
+ position: absolute;
+ top: 149px;
+ left: 40px;
+ width: calc(100% - 80px);
+ height: 60px;
+ line-height: 60px;
+
+ box-sizing: border-box;
+ background: rgba(0, 0, 0, 0.5);
+ color: #fff;
+ border-radius: 61px;
+ font-size: 24px;
+
+ & > div {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ }
+
+ .hasOutline-count {
+ color: #52aa6e;
+ }
+ .noOutline-count {
+ color: #d89d48;
+ }
+ }
+
+ .current-footer {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 435px;
+ background: #2d6d3f;
+ border-radius: 4px 4px 0px 0px;
+ opacity: 0.8;
+
+ .tab-btn {
+ height: 80px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ border-bottom: 2px solid #1c522d;
+ box-sizing: border-box;
+
+ & > div:first-child {
+ margin-right: 110px;
+ justify-content: flex-end;
+ }
+
+ & > div:last-child {
+ justify-content: flex-start;
+ }
+
+ & > div {
+ flex: 1;
+ display: flex;
+ height: 100%;
+ font-size: 26px;
+ background: #2d6d3f;
+
+ & > div {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ width: 66px;
+ height: 100%;
+ }
+ .title {
+ cursor: pointer;
+ }
+
+ .on {
+ color: #fff;
+
+ span {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ border-radius: 4px;
+ background: #fff;
+ }
+ }
+ }
+ }
+ .list-box {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: calc(100% - 80px);
+ box-sizing: border-box;
+ overflow: scroll;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
+ .transverse {
+ margin: 30px;
+ flex: 1;
+ display: flex;
+ // flex-wrap: wrap;
+
+ .item {
+ margin-right: 30px;
+ width: 278px;
+ height: 100%;
+ background: rgba(6, 43, 15, 0.3);
+ border-radius: 10px 10px 10px 10px;
+ opacity: 1;
+ border: 1px solid #074818;
+ box-sizing: border-box;
+ padding: 15px;
+ display: flex;
+
+ .pz-name {
+ color: #fff;
+ font-size: 26px;
+ margin-left: 30px;
+ margin-top: 23px;
+ }
+
+ .dk-data {
+ margin-left: 30px;
+ .dk-name {
+ color: #fff;
+ font-size: 26px;
+ font-weight: 700;
+ margin-top: 5px;
+ overflow: hidden;
+ max-width: 140px;
+ text-overflow: ellipsis;
+ }
+ .dk-state {
+ font-size: 24px;
+ color: #89ad8e;
+ margin-top: 11px;
+ }
+ .dkstateon {
+ margin-top: 11px;
+ font-size: 24px;
+ color: #ffff54;
+ }
+ }
+ .tupian {
+ width: 82px;
+ height: 82px;
+ border-radius: 50%;
+ overflow: hidden;
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+ .choose {
+ flex-shrink: 0;
+ width: 278px;
+ height: 100%;
+ background: rgba(6, 43, 15, 0.3);
+ border-radius: 10px 10px 10px 10px;
+ opacity: 1;
+ border: 2px solid #ffffff;
+ box-shadow: inset 0px 0px 30px 1px #ffffff;
+ box-sizing: border-box;
+ padding: 15px;
+ margin-right: 30px;
+ display: flex;
+ }
+ }
+
+ .transverse:first-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+ .landDetail {
+ position: absolute;
+ bottom: 0px;
+ width: 100%;
+ height: 435px;
+ background: #2d6d3f;
+ border-radius: 4px 4px 0px 0px;
+ opacity: 0.8;
+
+ .landDetail-header {
+ width: 100%;
+ height: 120px;
+ display: flex;
+ justify-content: space-between;
+ border-bottom: 2px solid #1c522d;
+ box-sizing: border-box;
+ color: #fff;
+ flex-shrink: 0;
+
+ .close {
+ flex: 1;
+ display: flex;
+ align-items: center;
+
+ span {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: 22px;
+ width: 48px;
+ height: 48px;
+ background: rgba(29, 81, 42, 1);
+ font-size: 24px;
+ border-radius: 50%;
+ }
+ }
+ .title {
+ width: 392px;
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+
+ .landName {
+ margin-top: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 38px;
+ font-size: 26px;
+ }
+ .landContent {
+ margin-top: 10px;
+ display: flex;
+ align-items: center;
+ height: 34px;
+ font-size: 24px;
+ opacity: 0.5;
+
+ .landArea {
+ font-size: 24px;
+ // flex: 4;
+ }
+ .landtype {
+ // flex: 1;
+ margin-left: 40px;
+ // width: 48px;
+ padding: 0 18px;
+ height: 33px;
+ line-height: 33px;
+ // opacity: 0.8;
+ background: #0a130c;
+ border-radius: 33px;
+ }
+ }
+ }
+ .inLand {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ font-size: 26px;
+
+ .in-plot {
+ margin-left: 20px;
+ margin-right: 30px;
+ }
+ }
+ }
+
+ .landDetail-show {
+ height: calc(100% - 120px);
+ padding: 30px;
+ display: flex;
+ overflow-x: auto;
+ overflow-y: hidden;
+ box-sizing: border-box;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
+ .item {
+ margin-right: 30px;
+ width: 470px;
+ height: 100%;
+ display: flex;
+ flex-shrink: 0;
+ background: rgba(6, 43, 15, 0.3);
+ border-radius: 10px 10px 10px 10px;
+ opacity: 1;
+ border: 2px solid #074818;
+ box-sizing: border-box;
+ padding: 30px;
+
+ .tupian {
+ width: 160px;
+ height: 160px;
+ border-radius: 50%;
+ overflow: hidden;
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .itemContent {
+ margin-left: 40px;
+ color: #fff;
+ flex-direction: column;
+ justify-content: space-between;
+ display: flex;
+ .name {
+ font-size: 26px;
+ }
+ .pinzhong {
+ font-size: 24px;
+ opacity: 0.5;
+ }
+ .time {
+ font-size: 24px;
+ opacity: 0.5;
+ }
+ }
+ }
+
+ .item:nth-last-child(2) {
+ margin-right: 0;
+ }
+
+ .landNoUse {
+ text-align: center;
+ font-size: 40px;
+ margin: 60px 0 0 200px;
+ }
+ }
+ }
+}
+</style>>
+
--
Gitblit v1.9.3