<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2022-08-10 08:44:28
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2022-08-16 16:32:50
|
* @FilePath: \zhny-dsj\src\views\v.vue
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
-->
|
<template>
|
<div class="container" v-wechat-title="title">
|
<clickMap ref="ClickMap" :longitude="longitude" :latitude="latitude" />
|
|
<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, 'parent')"
|
>
|
<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, 'parent')"
|
>
|
<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" @click="goToPlotDetailPage">
|
进入地块
|
<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 wx from 'weixin-js-sdk'
|
import clickMap from '@/components/clickMap.vue'
|
import { getLandIsAreaStatistic, getList, getLandList,getFarmDetail } from "@/api/index"
|
export default {
|
name: 'clickmap',
|
components: {
|
clickMap
|
},
|
data () {
|
return {
|
title: "农场",
|
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: {},
|
farmDetail:{},
|
isShowLandDetails: false,
|
isShowFooter: true,
|
farmId: null,
|
longitude:"",
|
latitude:"",
|
currentPlot: null
|
}
|
},
|
created () {
|
this.farmId = this.getQueryString('farmId')
|
this.longitude = this.getQueryString("longitude")
|
this.latitude = this.getQueryString("latitude")
|
// 获取有无轮廓地块数量
|
this.getLandIsAreaStatistic()
|
// 获取农产品列表
|
this.getFarmPlantList(this.page)
|
//获取地块列表
|
this.getLandList(this.pageLand)
|
//获取农场信息
|
this.getFarmDetail()
|
},
|
methods: {
|
// 获取url信息
|
getQueryString (name) {
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i")
|
var r = window.location.search.substr(1).match(reg)
|
if (r != null) {
|
return unescape(r[2])
|
}
|
return null
|
},
|
//获取地块轮廓统计信息
|
getLandIsAreaStatistic () {
|
getLandIsAreaStatistic(this.farmId).then(res => {
|
this.landIsAreaStatistic = res.data.data
|
})
|
},
|
//获取种养品列表
|
getFarmPlantList (page, params = {}) {
|
params['farmId'] = this.farmId
|
getList(
|
page.currentPage,
|
page.pageSize,
|
Object.assign(params)
|
).then((res) => {
|
const data = res.data.data
|
this.page.total = data.total
|
this.farmPlantList = 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 = {}) {
|
const that = this
|
params['farmId'] = this.farmId
|
params['tenantId'] = '000000'
|
getLandList(
|
page.currentPage,
|
page.pageSize,
|
Object.assign(params)
|
).then((res) => {
|
const data = res.data.data
|
|
data.records.forEach((item, index) => {
|
|
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(' '))
|
})
|
|
// const center = this.getCenter(brr)
|
const center = [this.longitude,this.latitude]
|
item.positionCenter = center
|
|
that.$refs.ClickMap.addPolygon(brr, item)
|
|
}
|
})
|
|
this.pageLand.total = data.total
|
this.landList = data.records
|
})
|
},
|
|
// 获取对应地块农产品
|
goTODetails (page, plotDetail, type, params = {}) {
|
this.isShowFooter = false
|
this.isShowLandDetails = true
|
params['farmId'] = 1
|
params['landId'] = plotDetail.id
|
|
getList(
|
page.currentPage,
|
page.pageSize,
|
Object.assign(params)
|
).then((res) => {
|
this.farmPlantList = res.data.data.records
|
})
|
|
this.landList.forEach(item => {
|
if (item.id == plotDetail.id) {
|
this.landDetails = Object.assign({}, this.landDetails, { landName: item.landName, landSize: item.landArea + item.dica, dic: item.dic })
|
}
|
})
|
|
this.currentPlot = plotDetail
|
|
if (type == 'parent') this.$refs.ClickMap.showPlotDetails(plotDetail)
|
},
|
|
// 关闭按钮
|
closeLandDetail () {
|
this.isShowLandDetails = false
|
this.isShowFooter = true
|
|
this.$refs.ClickMap.closePlotDetails()
|
},
|
|
//获取农场信息
|
getFarmDetail(){
|
var params = {
|
id:this.farmId
|
}
|
getFarmDetail(params).then((res)=>{
|
this.farmDetail = res.data.data
|
this.title = this.farmDetail.farmName
|
})
|
},
|
|
|
/**
|
* 根据经纬度范围计算中心点位置
|
* @param {*} arr 记录经纬度信息的数组
|
*/
|
getCenter (arr) {
|
let centerLonLat = []
|
if (arr.length) {
|
const lon = []
|
const lat = []
|
const poly = []
|
for (let i = 0, len = arr.length; i < len; i++) {
|
lon.push(arr[i][0])
|
lat.push(arr[i][1])
|
}
|
for (let i = 0, len = lon.length; i < len; i++) {
|
poly.push({
|
x: parseFloat(lon[i]),
|
y: parseFloat(lat[i]),
|
z: 0
|
})
|
}
|
const sortedLongitudeArray = poly.map(item => item.x).sort()
|
const sortedLatitudeArray = poly.map(item => item.y).sort()
|
const centerLongitude = ((parseFloat(sortedLongitudeArray[0]) + parseFloat(sortedLongitudeArray[sortedLongitudeArray.length - 1])) / 2).toFixed(14)
|
const centerLatitude = ((parseFloat(sortedLatitudeArray[0]) + parseFloat(sortedLatitudeArray[sortedLatitudeArray.length - 1])) / 2).toFixed(14)
|
centerLonLat = [Number(centerLongitude), Number(centerLatitude)]
|
}
|
return centerLonLat
|
},
|
|
/**
|
* 微信小程序中跳转至地块详情页
|
*/
|
goToPlotDetailPage () {
|
wx.miniProgram.navigateTo({
|
url: '/pages/plotDetails/plotDetails?data=' + JSON.stringify(this.currentPlot)
|
})
|
}
|
}
|
}
|
|
</script>
|
<style lang="scss" scoped>
|
.container {
|
.current-header {
|
display: flex;
|
position: fixed;
|
top: 150px;
|
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;
|
z-index: 99;
|
|
& > div {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
}
|
|
.hasOutline-count {
|
color: #52aa6e;
|
}
|
.noOutline-count {
|
color: #d89d48;
|
}
|
}
|
|
.current-footer {
|
position: fixed;
|
bottom: 0;
|
width: 100%;
|
height: 435px;
|
background: #2d6d3f;
|
border-radius: 4px 4px 0px 0px;
|
opacity: 0.8;
|
z-index: 99;
|
|
.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: fixed;
|
bottom: 0px;
|
width: 100%;
|
height: 435px;
|
background: #2d6d3f;
|
border-radius: 4px 4px 0px 0px;
|
opacity: 0.8;
|
z-index: 99;
|
|
.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: 36px;
|
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>>
|
|
d
|
