From 9983b8634a8689f2daee0433f01cfbce9cf5a79a Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 16 Jul 2022 08:46:59 +0800
Subject: [PATCH] 设备
---
public/img/icon/sd-icon.png | 0
src/components/publicNapeBox/index.vue | 45 +++
public/img/icon/echarts-close.png | 0
public/img/icon/plot-type.png | 0
public/img/icon/ph-icon.png | 0
public/img/icon/equipment-logo.png | 0
public/img/icon/plot-popup-close.png | 0
public/img/icon/popup-nav-btn.png | 0
public/img/icon/wd-icon.png | 0
public/img/icon/video-logo.png | 0
public/img/icon/monitor-bg.png | 0
src/styles/publicNapeBox/nape-plot-details.scss | 219 +++++++++++++++
public/img/icon/dd-icon.png | 0
src/styles/index.scss | 2
src/router/page/index.js | 9
src/views/equipment/index.vue | 398 ++++++++++++++++++++++++++++
public/img/icon/popup-nav-btn-sel.png | 0
public/img/icon/nh4-icon.png | 0
public/img/icon/plot-area.png | 0
src/components/map/index.vue | 8
public/img/icon/no3-icon.png | 0
src/components/publicBox/index.vue | 2
public/img/icon/plot-name.png | 0
src/views/farm/index.vue | 142 +++++++++
src/views/home/index.vue | 6
public/img/icon/k+icon.png | 0
26 files changed, 815 insertions(+), 16 deletions(-)
diff --git a/public/img/icon/dd-icon.png b/public/img/icon/dd-icon.png
new file mode 100644
index 0000000..a687797
--- /dev/null
+++ b/public/img/icon/dd-icon.png
Binary files differ
diff --git a/public/img/icon/echarts-close.png b/public/img/icon/echarts-close.png
new file mode 100644
index 0000000..44ff176
--- /dev/null
+++ b/public/img/icon/echarts-close.png
Binary files differ
diff --git a/public/img/icon/equipment-logo.png b/public/img/icon/equipment-logo.png
new file mode 100644
index 0000000..cf84597
--- /dev/null
+++ b/public/img/icon/equipment-logo.png
Binary files differ
diff --git a/public/img/icon/k+icon.png b/public/img/icon/k+icon.png
new file mode 100644
index 0000000..d5b384e
--- /dev/null
+++ b/public/img/icon/k+icon.png
Binary files differ
diff --git a/public/img/icon/monitor-bg.png b/public/img/icon/monitor-bg.png
new file mode 100644
index 0000000..0983044
--- /dev/null
+++ b/public/img/icon/monitor-bg.png
Binary files differ
diff --git a/public/img/icon/nh4-icon.png b/public/img/icon/nh4-icon.png
new file mode 100644
index 0000000..f5ed6ba
--- /dev/null
+++ b/public/img/icon/nh4-icon.png
Binary files differ
diff --git a/public/img/icon/no3-icon.png b/public/img/icon/no3-icon.png
new file mode 100644
index 0000000..2e73088
--- /dev/null
+++ b/public/img/icon/no3-icon.png
Binary files differ
diff --git a/public/img/icon/ph-icon.png b/public/img/icon/ph-icon.png
new file mode 100644
index 0000000..975a240
--- /dev/null
+++ b/public/img/icon/ph-icon.png
Binary files differ
diff --git a/public/img/icon/plot-area.png b/public/img/icon/plot-area.png
new file mode 100644
index 0000000..c39fbbd
--- /dev/null
+++ b/public/img/icon/plot-area.png
Binary files differ
diff --git a/public/img/icon/plot-name.png b/public/img/icon/plot-name.png
new file mode 100644
index 0000000..70d1c19
--- /dev/null
+++ b/public/img/icon/plot-name.png
Binary files differ
diff --git a/public/img/icon/plot-popup-close.png b/public/img/icon/plot-popup-close.png
new file mode 100644
index 0000000..2b8c03b
--- /dev/null
+++ b/public/img/icon/plot-popup-close.png
Binary files differ
diff --git a/public/img/icon/plot-type.png b/public/img/icon/plot-type.png
new file mode 100644
index 0000000..cf23c37
--- /dev/null
+++ b/public/img/icon/plot-type.png
Binary files differ
diff --git a/public/img/icon/popup-nav-btn-sel.png b/public/img/icon/popup-nav-btn-sel.png
new file mode 100644
index 0000000..f9765b8
--- /dev/null
+++ b/public/img/icon/popup-nav-btn-sel.png
Binary files differ
diff --git a/public/img/icon/popup-nav-btn.png b/public/img/icon/popup-nav-btn.png
new file mode 100644
index 0000000..f4a0423
--- /dev/null
+++ b/public/img/icon/popup-nav-btn.png
Binary files differ
diff --git a/public/img/icon/sd-icon.png b/public/img/icon/sd-icon.png
new file mode 100644
index 0000000..d10c4f3
--- /dev/null
+++ b/public/img/icon/sd-icon.png
Binary files differ
diff --git a/public/img/icon/video-logo.png b/public/img/icon/video-logo.png
new file mode 100644
index 0000000..2ab9376
--- /dev/null
+++ b/public/img/icon/video-logo.png
Binary files differ
diff --git a/public/img/icon/wd-icon.png b/public/img/icon/wd-icon.png
new file mode 100644
index 0000000..13d5e7a
--- /dev/null
+++ b/public/img/icon/wd-icon.png
Binary files differ
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 8bde44f..906da51 100644
--- a/src/components/map/index.vue
+++ b/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 })
},
diff --git a/src/components/publicBox/index.vue b/src/components/publicBox/index.vue
index 7a54763..31603e8 100644
--- a/src/components/publicBox/index.vue
+++ b/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>
diff --git a/src/components/publicNapeBox/index.vue b/src/components/publicNapeBox/index.vue
new file mode 100644
index 0000000..0645925
--- /dev/null
+++ b/src/components/publicNapeBox/index.vue
@@ -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>
diff --git a/src/router/page/index.js b/src/router/page/index.js
index 6ae75a2..5baff92 100644
--- a/src/router/page/index.js
+++ b/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'),
diff --git a/src/styles/index.scss b/src/styles/index.scss
index d9fec30..10fdd17 100644
--- a/src/styles/index.scss
+++ b/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;
diff --git a/src/styles/publicNapeBox/nape-plot-details.scss b/src/styles/publicNapeBox/nape-plot-details.scss
new file mode 100644
index 0000000..50c4663
--- /dev/null
+++ b/src/styles/publicNapeBox/nape-plot-details.scss
@@ -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;
+ }
+ }
+
+
+ }
+}
\ No newline at end of file
diff --git a/src/views/equipment/index.vue b/src/views/equipment/index.vue
new file mode 100644
index 0000000..91cfd60
--- /dev/null
+++ b/src/views/equipment/index.vue
@@ -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>
diff --git a/src/views/farm/index.vue b/src/views/farm/index.vue
index 854f69d..1efff3c 100644
--- a/src/views/farm/index.vue
+++ b/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
})
},
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 94d473e..a78d1a8 100644
--- a/src/views/home/index.vue
+++ b/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>
--
Gitblit v1.9.3