小程序地图页面

guanqb

2022-08-15 83b1f5ccd0c425dc0dfff922347e9ec136bac430

小程序地图页面

 public/img/icon/rice.png

 src/api/land/land.js

@@ -68,3 +68,4 @@
        }
    })
}


 src/api/v/index.js

New file
@@ -0,0 +1,36 @@
import request from '@/router/axios'

// 获取有无轮廓地块的数量
export const getLandIsAreaStatistic = (farmId) => {
    return request({
        url: '/land/land/getLandIsAreaStatistic',
        method: 'get',
        params: {
            farmId
        }
    })
}
// 获取品种列表
export const getList = (current, size, params) => {
    return request({
        url: '/farmPlant/page',
        method: 'get',
        params: {
            ...params,
            current,
            size,
        }
    })
}
//获取地块列表
export const getLandList = (current, size, params) => {
    return request({
        url: '/land/land/page',
        method: 'get',
        params: {
            ...params,
            current,
            size,
        }
    })
}

 src/router/axios.js

@@ -19,7 +19,8 @@
import * as auth from '@/utils/auth'

const service = axios.create({
    baseURL: 'http://182.106.212.58:8013/api', // 2
    // baseURL: 'http://182.106.212.58:8013/api', // 2
    baseURL: 'http://192.168.0.207:89', // 2
    timeout: 600000 // request timeout
})

@@ -51,7 +52,7 @@
    (res) => {
        const code = res.data.code

        console.log(code, 555)
        // console.log(code, 555)

        if (code == 403 && res.data.data == 'token 验证失败!') {
            sessionStorage.removeItem('token')

 src/views/farm/index.vue

@@ -130,7 +130,11 @@
            </div>

            <div v-show="zydksb == 'dk'" class="lists-box dk">
                <div v-for="(item, index) in plotLists" :key="'plotLists'+index" @click="setCenter(item)">
                <div
                    v-for="(item, index) in plotLists"
                    :key="'plotLists'+index"
                    @click="setCenter(item)"
                >
                    <div class="title">
                        <img :src="item.url" alt />
                        {{item.landName}}
@@ -248,7 +252,11 @@
                        <div>操作</div>
                    </div>
                    <div class="t-body">
                        <div class="table-list" v-for="(item, index) in sourceList" :key="'sourceList'+index">
                        <div
                            class="table-list"
                            v-for="(item, index) in sourceList"
                            :key="'sourceList'+index"
                        >
<!--                            <div class="sym-style">-->
<!--                                <div class="l">-->
<!--                                    <img src="/img/icon/sym.png" alt />-->
@@ -300,7 +308,10 @@
            </template>
            <template slot="public-box-content">
                <div v-show="plotDetailsNape == 'zypz'" class="box zypz-box">
                    <div v-for="(item, index) in plotDetailsPlantList" :key="'plotDetailsPlantList'+index">
                    <div
                        v-for="(item, index) in plotDetailsPlantList"
                        :key="'plotDetailsPlantList'+index"
                    >
                        <img class="logo" :src="item.url" alt />
                        <div class="titles-box">
                            <div class="title">{{item.strainName}}</div>
@@ -311,7 +322,10 @@
                    </div>
                </div>
                <div v-show="plotDetailsNape == 'nscz'" class="box nscz-box">
                    <div v-for="(item, index) in plotDetailsRecordList" :key="'plotDetailsRecordList'+index">
                    <div
                        v-for="(item, index) in plotDetailsRecordList"
                        :key="'plotDetailsRecordList'+index"
                    >
                        <div class="t-border"></div>
                        <div class="t-item">
                            <div class="type">{{item.typeName}}</div>
@@ -363,8 +377,11 @@
            </template>
            <template slot="public-box-content">
                <!-- 气象监测 -->
                <div class="item" v-for="(item, staListIndex) in stationData.weatherList"
                     :key="'weatherList' + staListIndex">
                <div
                    class="item"
                    v-for="(item, staListIndex) in stationData.weatherList"
                    :key="'weatherList' + staListIndex"
                >
                    <div class="itemTitle">
                        <img src="../../../public/img/icon/icon_3788.png" alt />
                        <div class="type">
@@ -392,8 +409,11 @@
                    </div>
                </div>
                <!-- 土壤监测 -->
                <div class="item" v-for="(item, staListIndex) in stationData.soliList"
                     :key="'soliList' + staListIndex">
                <div
                    class="item"
                    v-for="(item, staListIndex) in stationData.soliList"
                    :key="'soliList' + staListIndex"
                >
                    <div class="itemTitle">
                        <img src="../../../public/img/icon/icon_3788.png" alt />
                        <div class="type">
@@ -421,8 +441,11 @@
                    </div>
                </div>
                <!-- 空气监测 -->
                <div class="item" v-for="(item, staListIndex) in stationData.airList"
                     :key="'airList' + staListIndex">
                <div
                    class="item"
                    v-for="(item, staListIndex) in stationData.airList"
                    :key="'airList' + staListIndex"
                >
                    <div class="itemTitle">
                        <img src="../../../public/img/icon/icon_3788.png" alt />
                        <div class="type">
@@ -450,8 +473,11 @@
                    </div>
                </div>
                <!-- 水质监测 -->
                <div class="item" v-for="(item, staListIndex) in stationData.waterList"
                     :key="'waterList' + staListIndex">
                <div
                    class="item"
                    v-for="(item, staListIndex) in stationData.waterList"
                    :key="'waterList' + staListIndex"
                >
                    <div class="itemTitle">
                        <img src="../../../public/img/icon/icon_3788.png" alt />
                        <div class="type">
@@ -496,7 +522,7 @@
            </template>
            <template slot="public-box-content">
                <div class="video">
                    <video id="videoElement" autoplay muted width="100%" height="100%"></video>
                    <video id="videoElement" autoplay muted controls width="100%" height="100%"></video>
                </div>
            </template>
        </public-box>

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