智慧农业大数据平台
1
shuishen
2022-07-13 dd589757bd140e7196da27898668ba49d815528d
1
4 files modified
1 files added
299 ■■■■■ changed files
src/api/farm/farmingrecord.js 10 ●●●● patch | view | raw | blame | history
src/components/publicBox/index.vue 2 ●●● patch | view | raw | blame | history
src/styles/index.scss 1 ●●●● patch | view | raw | blame | history
src/styles/publicBox/farm-oper-table.scss 181 ●●●●● patch | view | raw | blame | history
src/views/home/index.vue 105 ●●●●● patch | view | raw | blame | history
src/api/farm/farmingrecord.js
@@ -135,6 +135,7 @@
        }
    })
}
export const page = (current, size, params) => {
    return request({
        url: '/farmingRecord/page',
@@ -263,15 +264,6 @@
export const getSweepRecordStatistics = (params) => {
    return request({
        url: '/sweepRecord/getSweepRecordStatistics',
        method: 'get',
        params: {
            ...params
        }
    })
}
export const getSweepRecordStatisticsByDayOrMonthOrYear = (params) => {
    return request({
        url: '/sweepRecord/getSweepRecordStatisticsByDayOrMonthOrYear',
        method: 'get',
        params: {
            ...params
src/components/publicBox/index.vue
@@ -1,5 +1,5 @@
<template>
    <div class="current-wrapper" @click="close">
    <div class="current-wrapper" @click.self="close">
        <div ref="publicBox" :class="className">
            <div class="header">
                <slot name="public-box-header"></slot>
src/styles/index.scss
@@ -2,6 +2,7 @@
@import "./publicBox/arc-nav-bar.scss";
@import "./publicBox/market-nav-bar.scss";
@import "./publicBox/trace-table.scss";
@import "./publicBox/farm-oper-table.scss";
html,
body {
src/styles/publicBox/farm-oper-table.scss
New file
@@ -0,0 +1,181 @@
.public-farm-oper-table {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1208px;
    background-color: transparent;
    z-index: 99;
    font-size: 16px;
    box-shadow: inset 0px 0px 30px 1px rgba(33, 186, 196, 0.1600);
    border: 1px solid #69E2ED;
    background: rgba(20, 66, 104, 0.8);
    .header {
        position: relative;
        border-radius: 8px 8px 0 0;
        width: 100%;
        height: 58px;
        line-height: 58px;
        background: linear-gradient(96deg, #142B4B 0%, #0F1525 100%);
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        .logo {
            position: aboslute;
            top: 0;
            left: 0;
            width: 8px;
            height: 100%;
            background: #69E2ED;
        }
        .title {
            position: absolute;
            top: 0;
            left: 25px;
            font-size: 18px;
            font-weight: bold;
            color: #66DDE9;
        }
        .close {
            position: absolute;
            right: 20px;
            top: 0;
            left: auto;
            bottom: 0;
            margin: auto;
            width: 28px;
            height: 28px;
            cursor: pointer;
            opacity: 0.6;
        }
    }
    .content {
        display: flex;
        flex-direction: column;
        clear: both;
        width: 100%;
        height: 600px;
        margin-top: 0px;
        text-align: center;
        overflow: hidden;
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border-radius: 0 0 8px 8px;
        .action-bar {
            padding: 0 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 74px;
            &>.search {
                .search-input {
                    input {
                        color: #fff;
                        background: rgba(33, 186, 196, 0.2);
                        border-color: #21BAC4;
                    }
                }
            }
            .btn-grounp {
                .search {
                    color: #fff;
                    background: #21BAC4;
                    border-color: #21BAC4;
                }
                .reset {
                    color: #fff;
                    background: rgba(255, 255, 255, .2);
                    border-color: rgba(255, 255, 255, .2);
                }
            }
        }
        .table-list {
            flex: 1;
            display: flex;
            flex-direction: column;
            .t-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 56px;
                font-size: 18px;
                font-weight: bold;
                color: #fff;
                background: linear-gradient(90deg, rgba(49, 137, 153, .5) 0%, rgba(49, 161, 168, .5) 44%, rgba(49, 137, 153, .5) 100%);
            }
            .t-body {
                flex: 1;
                overflow-y: auto;
            }
            .table-list {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                height: 94px;
                border-bottom: 1px solid #E8ECEF;
                color: #fff;
            }
            .table-list:last-child {
                border: none;
            }
            .t-header>div:first-child,
            .table-list>div:first-child {
                width: 132px;
            }
            .t-header>div:nth-child(2),
            .table-list>div:nth-child(2) {
                width: 124px;
            }
            .t-header>div:nth-child(3),
            .table-list>div:nth-child(3) {
                width: 172px;
            }
            .t-header>div:nth-child(4),
            .table-list>div:nth-child(4) {
                width: 144px;
            }
            .t-header>div:nth-child(5),
            .table-list>div:nth-child(5) {
                width: 132px;
            }
            .t-header>div:nth-child(6),
            .table-list>div:nth-child(6) {
                flex: 1;
            }
            .t-header>div:nth-child(7),
            .table-list>div:nth-child(7) {
                width: 150px;
            }
            .t-header>div:nth-child(8),
            .table-list>div:nth-child(8) {
                width: 120px;
            }
        }
    }
}
src/views/home/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:03:19
 * @Last Modified time: 2022-07-13 17:58:03
* 驾驶舱
*/
<template>
@@ -147,7 +147,12 @@
                    </div>
                    <div class="content-box" :v-if="isFarmingDetail">
                        <div class="detail" v-for="(item, index) in farmingList" :key="index">
                        <div
                            @click="farmOperClick(item)"
                            class="detail"
                            v-for="(item, index) in farmingList"
                            :key="index"
                        >
                            <div class="title">{{ item.name }}</div>
                            <div class="num-unit">
                                <div class="num">{{ item.value }}</div>
@@ -357,6 +362,84 @@
                </div>
            </template>
        </public-box>
        <public-box
            v-show="farmOperPopup"
            :closeFlag="'farmOperPopup'"
            :className="'public-farm-oper-table'"
        >
            <template slot="public-box-header">
                <div class="logo"></div>
                <div class="title">农事操作</div>
                <img
                    @click="farmOperPopup = false"
                    src="/img/icon/public-close.png"
                    alt
                    class="close"
                />
            </template>
            <template slot="public-box-content">
                <div class="action-bar">
                    <div class="search">
                        <el-select size="small" v-model="farmOperType" placeholder="选择农事类型">
                            <el-option
                                v-for="(item, index) in farmingList"
                                :key="index"
                                :label="item.name"
                                :value="item.name"
                            ></el-option>
                        </el-select>
                        <!--
                        <el-select size="small" v-model="value" placeholder="选择地块">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>-->
                    </div>
                    <div class="btn-grounp">
                        <el-button
                            size="small"
                            class="search"
                            type="primary"
                            icon="el-icon-search"
                        >查询</el-button>
                        <el-button
                            size="small"
                            class="reset"
                            type="info"
                            icon="el-icon-refresh-right"
                        >重置</el-button>
                    </div>
                </div>
                <div class="table-list">
                    <div class="t-header">
                        <div>农事类型</div>
                        <div>地块</div>
                        <div>备注</div>
                        <div>农资</div>
                        <div>作业方式</div>
                        <div>农事操作时间</div>
                        <div>创建时间</div>
                        <div>操作人</div>
                    </div>
                    <div class="t-body">
                        <div class="table-list" v-for="(item, index) in farmOperList" :key="index">
                            <div>{{item.typeName}}</div>
                            <div>{{item.landName}}</div>
                            <div>{{item.remarks == '' ? '--' : item.remarks}}</div>
                            <div>{{item.content}}</div>
                            <div>{{item.jobWay == 0 ? '人工' : '机械'}}</div>
                            <div>{{item.time}}</div>
                            <div>{{item.createTime.substr(0,10)}}</div>
                            <div>{{item.realName}}</div>
                        </div>
                    </div>
                </div>
            </template>
        </public-box>
    </div>
</template>
@@ -371,7 +454,8 @@
    selctSaletZ,
    selectMarketDistrict,
    getFarmList,
    getLandList
    getLandList,
    getFarmingRecordList
} from '@/api/farm/farmingrecord'
// eslint-disable-next-line no-unused-vars
import { selectXCount } from '@/api/land/land'
@@ -401,7 +485,13 @@
            farmProfiles: false,
            farmNumArray: [],
            plotNumArray: [],
            farmDetails: null
            farmDetails: null,
            // 农事操作记录显示
            farmOperPopup: false,
            // 农事操作记录列表
            farmOperList: [],
            // 选择的农事类型
            farmOperType: ''
        }
    },
    created () {
@@ -422,6 +512,13 @@
        this.initRightPie('EquipmentEcharts')
    },
    methods: {
        farmOperClick (item) {
            getFarmingRecordList({ type: item.type }).then(res => {
                this.farmOperList = res.data.data
                this.farmOperPopup = true
            })
        },
        showDetailPopup (params) {
            console.log(params)
            this.farmDetails = params