|
|
@@ -0,0 +1,233 @@
|
|
|
+<template>
|
|
|
+ <div class="completed-work">
|
|
|
+ <custom-header name="农事详情"></custom-header>
|
|
|
+ <div class="work-content">
|
|
|
+ <div class="content-status">
|
|
|
+ <div class="status-l" v-if="status === 0">
|
|
|
+ <div class="stauts-text">待执行</div>
|
|
|
+ <div class="stauts-sub-text">距离预计执行时间还差 <span class="time-text">3</span> 天</div>
|
|
|
+ </div>
|
|
|
+ <div class="status-l" v-if="status === 1">
|
|
|
+ <div class="stauts-text">
|
|
|
+ <el-icon class="status-icon"><Select /></el-icon>
|
|
|
+ 该农事已完成
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="status-r">{{ status === 0 ? "提醒执行" : "提醒复核" }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="work-wrap">
|
|
|
+ <div class="box-wrap farm-info">
|
|
|
+ <div class="info-title">
|
|
|
+ <div class="card-title">农场现状</div>
|
|
|
+ <div class="info-more">
|
|
|
+ 点击查看更多
|
|
|
+ <el-icon><ArrowRight /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-content">
|
|
|
+ 当前农场指标：当前农场指标：当前农场指标：当前农场指标：当前农场指标：当前农场指标：当前农场指标：当前农场指标：当前农场指标：当前农场指标：当前农场指标：当前农场指标：当前农场指标
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-wrap farm-photo">
|
|
|
+ <div class="photo-list">
|
|
|
+ <div class="img-item" v-for="(item, index) in 6" :key="index">
|
|
|
+ <img
|
|
|
+ class="photo-item"
|
|
|
+ src="https://birdseye-img-ali-cdn.sysuimars.com/16926861-1e20-4cbd-8bf2-90208db5a2d0/806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_202509010800_001_806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_20250901080536_0045_V_code-ws0fsmge97gh.jpeg"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list-text">点击查看更多</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="box-wrap farm-data">
|
|
|
+ <div class="card-title">秋梢防虫<span class="type-tag">标准农事</span></div>
|
|
|
+ <div class="data-content">
|
|
|
+ <div class="form-item">
|
|
|
+ <div class="item-name">农事编号</div>
|
|
|
+ <div class="item-text">BZ-YY-04-SQYY-20</div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <div class="item-name">服务亩数</div>
|
|
|
+ <div class="item-text">100亩</div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <div class="item-name">服务区域</div>
|
|
|
+ <div class="item-text">广州市从化区荔枝博览园</div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <div class="item-name">触发条件</div>
|
|
|
+ <div class="item-text">单数花带叶40％</div>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <div class="item-name">执行时间</div>
|
|
|
+ <div class="item-text">2025.02.18</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import customHeader from "@/components/customHeader.vue";
|
|
|
+import { ref } from "vue";
|
|
|
+
|
|
|
+// 0：执行， 1： 复核
|
|
|
+const status = ref(0);
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.completed-work {
|
|
|
+ height: 100vh;
|
|
|
+ position: relative;
|
|
|
+ overflow: auto;
|
|
|
+ font-size: 14px;
|
|
|
+ background: #f2f3f5;
|
|
|
+ .work-content {
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ overflow: auto;
|
|
|
+ .work-wrap {
|
|
|
+ position: relative;
|
|
|
+ z-index: 3;
|
|
|
+ padding: 0 12px;
|
|
|
+ top: -16px;
|
|
|
+ }
|
|
|
+ .card-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .type-tag {
|
|
|
+ margin-left: 5px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #000000;
|
|
|
+ padding: 0 10px;
|
|
|
+ background: rgba(119, 119, 119, 0.1);
|
|
|
+ border-radius: 20px;
|
|
|
+ font-weight: normal;
|
|
|
+ height: 26px;
|
|
|
+ line-height: 26px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-wrap {
|
|
|
+ background: #fff;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-status {
|
|
|
+ position: relative;
|
|
|
+ padding: 26px 12px 20px 12px;
|
|
|
+ color: #fff;
|
|
|
+ z-index: 2;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ z-index: -1;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ height: 136px;
|
|
|
+ background: #2199f8;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .status-l {
|
|
|
+ .stauts-text {
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+ .stauts-sub-text {
|
|
|
+ color: rgba(255, 255, 255, 0.51);
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .time-text {
|
|
|
+ color: #ffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .status-r {
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ padding: 0 16px;
|
|
|
+ color: #2199f8;
|
|
|
+ font-size: 16px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-content {
|
|
|
+ padding: 10px 0;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .farm-info {
|
|
|
+ color: rgba(0, 0, 0, 0.6);
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 14px;
|
|
|
+ .info-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: rgba(41, 41, 41, 0.3);
|
|
|
+ .info-more {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .farm-photo {
|
|
|
+ margin-top: 10px;
|
|
|
+ .photo-list {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ .photo-item {
|
|
|
+ width: 92px;
|
|
|
+ height: 92px;
|
|
|
+ border-radius: 8px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ .img-item + .img-item {
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-text {
|
|
|
+ text-align: center;
|
|
|
+ color: rgba(0, 0, 0, 0.5);
|
|
|
+ padding-top: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .farm-data {
|
|
|
+ margin-top: 10px;
|
|
|
+ .data-content {
|
|
|
+ margin-top: 8px;
|
|
|
+ border-top: 1px solid #f5f5f5;
|
|
|
+ padding: 8px 0;
|
|
|
+ }
|
|
|
+ .form-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #767676;
|
|
|
+ height: 24px;
|
|
|
+ .item-name {
|
|
|
+ width: 80px;
|
|
|
+ color: rgba(0, 0, 0, 0.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .form-item + .form-item {
|
|
|
+ padding-top: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
