设备

shuishen

2022-07-16 9983b8634a8689f2daee0433f01cfbce9cf5a79a

 src/views/farm/index.vue

@@ -2,7 +2,7 @@
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-07-13 16:05:48
 * @Last Modified time: 2022-07-14 19:48:03
* 驾驶舱
*/
<template>
@@ -17,7 +17,7 @@
            </div>
            <div class="title">{{currentDetails.farmName}}</div>
            <div class="btn-grounp">
                <el-button type="primary" icon="el-icon-my-sb">物联网设备总览</el-button>
                <el-button type="primary" icon="el-icon-my-sb" @click="goToEquipment">物联网设备总览</el-button>
                <el-button type="primary" icon="el-icon-my-sy" @click="tracePopupFlag = true">农产品溯源</el-button>
            </div>
        </div>
@@ -75,7 +75,7 @@
                    <div class="t-border"></div>
                    <div class="t-item">
                        <div>{{item.typeName}}</div>
                        <div></div>
                        <div class="manure" v-show="item.type == 0">{{item.agriculturalName}}</div>
                        <div>{{item.createTime.substr(0,10)}}</div>
                    </div>
                    <div class="b-item">
@@ -184,12 +184,14 @@
                            class="search"
                            type="primary"
                            icon="el-icon-search"
                            @click="traceSelectList"
                        >查询</el-button>
                        <el-button
                            size="small"
                            class="reset"
                            type="info"
                            icon="el-icon-refresh-right"
                            @click="traceResetList"
                        >重置</el-button>
                    </div>
                </div>
@@ -229,6 +231,74 @@
            </template>
        </public-box>

        <public-nape-box
            v-show="napePlotPopupFlag"
            :closeFlag="'napePlotPopupFlag'"
            :className="'public-nape-plot-details'"
        >
            <template slot="public-box-header">
                <div
                    @click="plotDetailsClick('zypz')"
                    :class="{on: plotDetailsNape == 'zypz'}"
                    class="nav"
                >种养品种</div>
                <div
                    @click="plotDetailsClick('nscz')"
                    :class="{on: plotDetailsNape == 'nscz'}"
                    class="nav"
                >农事操作</div>
                <div
                    @click="plotDetailsClick('base')"
                    :class="{on: plotDetailsNape == 'base'}"
                    class="nav"
                >基础信息</div>
            </template>
            <template slot="public-box-content">
                <div v-show="plotDetailsNape == 'zypz'" class="box zypz-box">
                    <div v-for="(item, index) in plotDetailsPlantList" :key="index">
                        <img class="logo" :src="item.url" alt />
                        <div class="titles-box">
                            <div class="title">{{item.strainName}}</div>
                            <div
                                class="time"
                            >{{item.createTime}} {{item.plantingWay == 0 ? '移摘' : item.plantingWay == 1 ? '直播' : '秧苗'}}</div>
                        </div>
                    </div>
                </div>
                <div v-show="plotDetailsNape == 'nscz'" class="box nscz-box">
                    <div v-for="(item, index) in plotDetailsRecordList" :key="index">
                        <div class="t-border"></div>
                        <div class="t-item">
                            <div class="type">{{item.typeName}}</div>
                            <div class="manure" v-show="item.type == 0">{{item.agriculturalName}}</div>
                            <div class="date">{{item.time}}</div>
                        </div>
                        <div class="b-item">
                            <div class="variety">{{item.strainName}}</div>
                            <div class="pel">{{item.realName}}</div>
                            <div class="plot">{{item.landName}}</div>
                        </div>
                    </div>
                </div>
                <div v-show="plotDetailsNape == 'base'" class="box base-box">
                    <div class="plot-name">
                        <div class="sub-title">地块名称</div>
                        <div class="current-val">{{currentClickPlot.landName}}</div>
                    </div>
                    <div class="plot-area">
                        <div class="sub-title">地块面积</div>
                        <div
                            class="current-val"
                        >{{currentClickPlot.landArea}} {{currentClickPlot.landUnit}}</div>
                    </div>
                    <div class="plot-type">
                        <div class="sub-title">地块类型</div>
                        <div class="current-val">{{currentClickPlot.landType}}</div>
                    </div>
                </div>
            </template>
        </public-nape-box>

        <el-dialog
            title="溯源码"
            custom-class="dialog-fixed"
@@ -252,18 +322,27 @@
export default {
    data () {
        return {
            currentDetails: null,
            ncjscz: 'cz',
            zydksb: 'sb',
            currentDetails: {},
            ncjscz: 'ncjs',
            zydksb: 'zy',
            dialogVisible: false,
            currentUrl: '',
            tracePopupFlag: false,
            // 地块详情
            napePlotPopupFlag: false,
            sourceList: [],
            farmRecordList: [],
            farmPlantList: [],
            plotLists: [],
            // 溯源码编号
            sourceCode: ''
            sourceCode: '',
            // 地块详情弹框默认选中
            plotDetailsNape: 'zypz',
            // 地块详情中的种养品种
            plotDetailsPlantList: [],
            // 地块详情中的农事操作
            plotDetailsRecordList: [],
            currentClickPlot: {}
        }
    },
    created () {
@@ -272,13 +351,56 @@
    mounted () {
        this.$nextTick(() => {
            this.setView()
            this.getSourceList()
            this.getSourceList({ code: '' })
            this.getFarmingRecordList()
            this.getFarmPlantList()
            this.getLandList()
        })
    },
    methods: {
        // 跳转到物联网设备页面
        goToEquipment () {
            this.$router.push({
                path: '/equipmentDetails',
                query: {
                    ...this.currentDetails
                }
            })
        },

        // 溯源码搜索
        traceSelectList () {
            this.getSourceList({ code: this.sourceCode })
        },

        // 溯源码重置
        traceResetList () {
            this.sourceCode = ''
            this.getSourceList({ code: this.sourceCode })
        },

        // 地图地块点击
        plotDetailsPopupShow (params) {
            this.plotDetailsNape = 'zypz'
            this.currentClickPlot = params
            this.plotDetailsPlantList = []
            this.plotDetailsRecordList = []
            getFarmPlantList({ farmId: this.currentDetails.id, landId: params.id }).then(res => {
                this.plotDetailsPlantList = res.data.data
            })

            getFarmingRecordList({ farmId: this.currentDetails.id, landId: params.id }).then(res => {
                this.plotDetailsRecordList = res.data.data
            })

            this.napePlotPopupFlag = true
        },

        // 地块详情弹框中切换
        plotDetailsClick (type) {
            this.plotDetailsNape = type
        },

        setCenter (item) {
            this.ncListShow = false
            this.$refs.modalForm.setPlotCenter(item.landName)
@@ -315,8 +437,8 @@
            this.$refs.modalForm.setCenter(this.currentDetails.farmName)
        },

        getSourceList () {
            getSourceList({ farmId: this.currentDetails.id }).then(res => {
        getSourceList (param) {
            getSourceList({ farmId: this.currentDetails.id, code: param.code }).then(res => {
                this.sourceList = res.data.data
            })
        },