设备

shuishen

2022-07-16 9983b8634a8689f2daee0433f01cfbce9cf5a79a

设备

 public/img/icon/dd-icon.png

 public/img/icon/echarts-close.png

 public/img/icon/equipment-logo.png

 public/img/icon/k+icon.png

 public/img/icon/monitor-bg.png

 public/img/icon/nh4-icon.png

 public/img/icon/no3-icon.png

 public/img/icon/ph-icon.png

 public/img/icon/plot-area.png

 public/img/icon/plot-name.png

 public/img/icon/plot-popup-close.png

 public/img/icon/plot-type.png

 public/img/icon/popup-nav-btn-sel.png

 public/img/icon/popup-nav-btn.png

 public/img/icon/sd-icon.png

 public/img/icon/video-logo.png

 public/img/icon/wd-icon.png

 src/components/map/index.vue

@@ -212,7 +212,7 @@
        },

        addPlotPolygon (positions, item) {
            // const that = this
            const that = this

            const center = this.getCenter(positions)

@@ -233,12 +233,18 @@
            // })

            const polygon = new global.DC.Polygon(positions)
            polygon.attrParams = item
            polygon.setStyle({
                material: global.DC.Namespace.Cesium.Color.fromBytes(
                    129, 255, 84,
                    200
                )
            })

            polygon.on(global.DC.MouseEventType.CLICK, (e) => {
                that.$parent.plotDetailsPopupShow(e.overlay.attrParams)
            })

            plotRegionLayer.addOverlay(polygon)
            addPlotLayers.push({ center, name: item.landName })
        },

 src/components/publicBox/index.vue

@@ -38,6 +38,6 @@
    width: 100%;
    height: 100%;
    z-index: 99;
    background: rgba(0, 0, 0, 0.5);
    background: rgba(7, 7, 7, 0.4);
}
</style>

 src/components/publicNapeBox/index.vue

New file
@@ -0,0 +1,45 @@
<template>
    <div class="current-wrapper" @click.self="close">
        <div ref="publicBox" :class="className">
            <div class="header">
                <slot name="public-box-header"></slot>

                <img @click="close" class="close" src="/img/icon/plot-popup-close.png" alt />
            </div>
            <div class="content">
                <slot name="public-box-content"></slot>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'PublicNapeBox',
    props: ['className', 'closeFlag'],
    data () {
        return {
        }
    },
    created () {
    },
    methods: {
        close () {
            this.$parent[this.closeFlag] = false
        }
    }
}
</script>

<style scoped lang='scss'>
.current-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background: rgba(7, 7, 7, 0.4);
}
</style>

 src/router/page/index.js

@@ -2,7 +2,7 @@
 * @Author: Morpheus
 * @Date: 2021-04-30 14:12:09
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-07-12 19:39:31
 * @Last Modified time: 2022-07-14 18:28:34
 */

import Vue from 'vue'
@@ -65,6 +65,13 @@
        component: () => import('../../views/farm/index.vue')
    },
    {
        path: '/equipmentDetails',
        meta: {
            title: '物联网设备总览'
        },
        component: () => import('../../views/equipment/index.vue')
    },
    {
        path: '/403',
        component: () =>
            import(/* webpackChunkName: "page" */ '@/components/error-page/403'),

 src/styles/index.scss

@@ -4,6 +4,8 @@
@import "./publicBox/trace-table.scss";
@import "./publicBox/farm-oper-table.scss";

@import "./publicNapeBox/nape-plot-details.scss";

html,
body {
    font-size: 16px;

 src/styles/publicNapeBox/nape-plot-details.scss

New file
@@ -0,0 +1,219 @@
.public-nape-plot-details {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    z-index: 99;
    font-size: 16px;
    box-shadow: inset 0px 3px 20px 1px #5BC3D1;
    border: 1px solid #58BFCD;
    background: rgba(20, 66, 104, 0.8);
    border-radius: 16px;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: relative;
        border-radius: 8px 8px 0 0;
        width: 100%;
        height: 86px;
        box-sizing: border-box;
        border: 1px solid #3F7D93;

        .nav {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 200px;
            height: 50px;
            color: #fff;
            background: url(/img/icon/popup-nav-btn.png) no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
            font-size: 18px;
        }

        .nav.on {
            background: url(/img/icon/popup-nav-btn-sel.png) no-repeat;
            background-size: 100% 100%;
        }

        .close {
            position: absolute;
            top: 0;
            right: -30px;
            transform: translate(100%, 0);
            cursor: pointer;
        }
    }

    .content {
        display: flex;
        flex-direction: column;
        clear: both;
        width: 100%;
        height: 484px;
        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;


        .box {
            margin: 20px 25px;
            height: calc(100% - 40px);
            overflow-y: auto;

            &>div {
                margin-top: 20px;
                padding: 0 20px;
            }

            &>div:first-child {
                margin: 0;
            }

        }

        .zypz-box {

            &>div {
                display: flex;
                align-items: center;
                height: 120px;
                color: #A9D1D7;
                background: #0D1E34;

                .logo {
                    width: 90px;
                    height: 90px;
                    border-radius: 50%;
                }

                .titles-box {
                    margin-left: 30px;
                    display: flex;
                    align-items: flex-start;
                    flex-direction: column;

                    .title {
                        font-size: 18px;
                        font-weight: bold;
                    }

                    .time {
                        margin-top: 15px;
                        font-size: 14px;
                    }
                }
            }

        }

        .nscz-box {
            &>div {
                position: relative;
                height: 84px;
                margin-top: 10px;
                padding: 10px 20px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                background: rgba(102, 221, 233, 0.1);
                border-radius: 8px;
                font-size: 18px;
                color: #a9d1d7;

                .t-border {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: auto;
                    margin: auto;
                    width: 80%;
                    height: 1px;
                    background: linear-gradient(89deg,
                            rgba(102, 221, 233, 0) 0%,
                            #66dde9 51%,
                            rgba(102, 221, 233, 0) 100%);
                }

                .t-item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    &>div {
                        flex: 1;
                    }

                    &>div:first-child {
                        text-align: left;
                        font-size: 18px;
                        font-weight: bold;
                        color: #66dde9;
                    }

                    &>div:last-child {
                        text-align: right;
                    }
                }

                .b-item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    &>div {
                        flex: 1;
                    }

                    &>div:first-child {
                        text-align: left;
                        color: #fff;
                    }

                    &>div:last-child {
                        text-align: right;
                    }
                }
            }
        }

        .base-box {
            &>div {
                height: 120px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: #0D1E34;

                .current-val {
                    margin-top: 12px;
                    font-size: 32px;
                }
            }

            .plot-name {
                color: #62D4E0;
            }

            .plot-area {
                color: #53B5F9;
            }

            .plot-type {
                color: #9270DE;
            }
        }


    }
}

 src/views/equipment/index.vue

New file
@@ -0,0 +1,398 @@
/*
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-07-14 18:00:40
* 驾驶舱
*/
<template>
    <div class="container">
        <div class="current-header">
            <div class="return">
                <span @click="prev">
                    <i class="el-icon-back"></i> 返回
                </span>
            </div>
            <div class="title">{{currentDetails.farmName}}</div>
        </div>

        <div class="current-body">
            <div class="current-wrapper">
                <div class="video-boxs">
                    <div class="header">
                        <img src="/img/icon/video-logo.png" alt /> 视频监控
                    </div>

                    <div class="body">
                        <div class="box">
                            <div class="nape-header">1号摄像头</div>
                            <div class="nape-body"></div>
                        </div>

                        <div class="box">
                            <div class="nape-header">2号摄像头</div>
                            <div class="nape-body"></div>
                        </div>
                    </div>
                </div>

                <div class="equipment-boxs">
                    <div class="header">
                        <img src="/img/icon/equipment-logo.png" alt />物联网设备
                    </div>

                    <div class="body">
                        <div class="btn-grounp">
                            <ul>
                                <li class="on">1号棚2号监测点</li>
                                <li>1号棚2号监测点</li>
                                <li>1号棚2号监测点</li>
                                <li>1号棚2号监测点</li>
                                <li>1号棚2号监测点</li>
                                <li>1号棚2号监测点</li>
                                <li>1号棚2号监测点</li>
                                <li>1号棚2号监测点</li>
                            </ul>
                        </div>
                        <div class="nape-boxs">
                            <div>
                                <div class="top">
                                    <div class="l">
                                        <img src="/img/icon/wd-icon.png" alt />
                                        <span>20cm土壤温度</span>
                                    </div>

                                    <div class="r">
                                        <span class="num">21.03</span>
                                        <span>℃</span>
                                    </div>
                                </div>
                                <div class="bottom">
                                    <div class="l">
                                        <i class="el-icon-time"></i>
                                        <span class="old-btn">历史数据</span>
                                    </div>

                                    <div class="r">48天前更新</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="echarts-box">
            <div class="box">
                <img class="close" src="/img/icon/echarts-close.png" alt />
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data () {
        return {
            currentDetails: {}
        }
    },
    created () {
        this.getParams()
    },
    mounted () {

    },
    methods: {
        getParams () {
            this.currentDetails = this.$route.query
        }
    }
}
</script>

<style scoped lang="scss">
@font-face {
    font-family: 'DS-Digital';
    src: url('/DS-Digital/DS-DIGI-1.ttf');
    src: url('/DS-Digital/DS-DIGIB-2.ttf');
    src: url('/DS-Digital/DS-DIGII-3.ttf');
    src: url('/DS-Digital/DS-DIGIT-4.ttf');
}

.container {
    position: relative;
    width: 100%;
    height: 100%;

    .current-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        line-height: 80px;
        background: rgba(14, 32, 54, 1);
        .return {
            margin-left: 40px;
            font-size: 16px;
            font-weight: bold;
            color: #66dde9;

            & > span {
                cursor: pointer;

                i {
                    margin-right: 4px;
                }
            }
        }

        .title {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 200px;
            font-size: 28px;
            font-weight: bold;
            color: #08f4ff;
        }
    }

    .current-body {
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        height: calc(100% - 80px);
        background: rgba(5, 18, 31, 1);

        .current-wrapper {
            padding: 20px 250px;
            height: 100%;
            box-sizing: border-box;

            .video-boxs {
                height: 388px;
                background: rgba(9, 26, 43, 1);

                .header {
                    color: rgba(104, 218, 177, 1);

                    img {
                        width: 18px;
                    }
                }

                .body {
                    display: flex;
                    justify-content: center;
                    height: calc(100% - 60px);

                    .box {
                        margin-left: 22px;
                        width: 440px;
                        height: 290px;
                        border: 1px solid #224560;

                        .nape-header {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            height: 42px;
                            color: rgba(104, 226, 251, 1);
                            font-size: 14px;
                        }

                        .nape-body {
                            height: calc(100% - 42px);
                            background: skyblue;
                        }
                    }

                    .box:first-child {
                        margin-left: 0;
                    }
                }
            }

            .equipment-boxs {
                margin-top: 20px;
                height: calc(100% - 408px);
                background: rgba(9, 26, 43, 1);

                .header {
                    color: rgba(87, 186, 202, 1);

                    img {
                        width: 22px;
                    }
                }

                .body {
                    display: flex;
                    flex-direction: column;
                    height: calc(100% - 60px);

                    .btn-grounp {
                        margin: 4px 80px;

                        ul {
                            display: flex;
                        }

                        li {
                            margin: 0 8px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 180px;
                            height: 32px;
                            font-size: 14px;
                            border-radius: 16px 16px 16px 16px;
                            background: rgba(4, 18, 34, 1);
                            color: rgba(0, 131, 143, 1);
                            cursor: pointer;
                        }

                        li.on {
                            background: rgba(0, 131, 143, 1);
                            color: rgba(104, 226, 251, 1);
                        }
                    }

                    .nape-boxs {
                        flex: 1;
                        display: flex;
                        flex-wrap: wrap;
                        align-content: flex-start;
                        justify-content: flex-start;
                        padding: 0 24px;
                        box-sizing: border-box;
                        overflow-x: hidden;
                        overflow-y: auto;

                        & > div {
                            margin: 0 2px;
                            margin-top: 16px;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            width: 338px;
                            height: 118px;
                            background: url(/img/icon/monitor-bg.png) no-repeat;
                            background-size: 100% 100%;

                            .top {
                                padding: 0 20px;
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                width: calc(100% - 10px);
                                height: 76px;
                                border-bottom: 1px solid #39818d;
                                box-sizing: border-box;
                                color: rgba(176, 189, 197, 1);

                                .l {
                                    display: flex;
                                    align-items: center;

                                    span {
                                        margin-left: 8px;
                                        font-size: 16px;
                                        font-weight: bold;
                                    }
                                }

                                .r {
                                    color: rgba(176, 189, 197, 1);
                                    .num {
                                        margin-right: 8px;
                                        font-size: 34px;
                                        font-family: 'DS-Digital';
                                        color: rgba(96, 210, 172, 1);
                                    }
                                }
                            }

                            .bottom {
                                padding: 0 20px;
                                display: flex;
                                justify-content: space-between;
                                flex: 1;
                                width: 100%;
                                color: rgba(57, 129, 141, 1);
                                font-size: 14px;
                                box-sizing: border-box;

                                .old-btn {
                                    margin-left: 5px;
                                    cursor: pointer;
                                }

                                & > div {
                                    margin-top: 8px;
                                }
                            }
                        }

                        & > div:last-child {
                            margin-bottom: 16px;
                        }
                    }
                }
            }

            .video-boxs,
            .equipment-boxs {
                .header {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 60px;

                    img {
                        margin-right: 12px;
                        vertical-align: middle;
                    }
                }
            }
        }
    }
}

.echarts-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 18, 31, 0.5);
    z-index: 99;

    .box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 914px;
        height: 328px;
        background: rgba(18, 37, 61, 1);

        .close {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 28px;
        }
    }
}
</style>

 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
            })
        },

 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-14 11:28:08
 * @Last Modified time: 2022-07-14 17:40:20
* 驾驶舱
*/
<template>
@@ -441,8 +441,8 @@
                        <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.agriculturalName}}</div>
                            <div>{{item.remarks || '--'}}</div>
                            <div>{{item.agriculturalName || '--'}}</div>
                            <div>{{item.jobWay == 0 ? '人工' : '机械'}}</div>
                            <div>{{item.time}}</div>
                            <div>{{item.createTime.substr(0,10)}}</div>