|
|
@@ -1,13 +1,436 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
-农事管理
|
|
|
+ <div class="record-page" ref="containerRef">
|
|
|
+ <div class="page-l">
|
|
|
+ <el-affix :offset="42">
|
|
|
+ <el-anchor :container="containerRef" direction="vertical" type="default" @click="handleClick">
|
|
|
+ <el-anchor-link
|
|
|
+ v-for="(item, index) in farmWorkList"
|
|
|
+ :key="index"
|
|
|
+ :href="'#part' + index"
|
|
|
+ :title="item.farmWorkLibName"
|
|
|
+ >
|
|
|
+ <div class="menu-item">
|
|
|
+ <img
|
|
|
+ class="menu-icon"
|
|
|
+ :src="require('@/assets/images/records/icon-' + (index+1) + '.png')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <span>{{ item.farmWorkLibName }}</span>
|
|
|
+ </div>
|
|
|
+ </el-anchor-link>
|
|
|
+ </el-anchor>
|
|
|
+ </el-affix>
|
|
|
+ </div>
|
|
|
+ <div class="page-r">
|
|
|
+ <div v-for="(card, cardI) in farmWorkList" :key="cardI" class="done-card">
|
|
|
+ <div class="id-positon" :id="'part' + cardI"></div>
|
|
|
+ <div class="card-wrap">
|
|
|
+ <!-- :class="{
|
|
|
+ noCarousel: card.execute !== 0 && card.execute !== 2,
|
|
|
+ done: card.execute === 4 || card.execute === 5,
|
|
|
+ }" -->
|
|
|
+ <div class="card-content">
|
|
|
+ <!-- :class="{
|
|
|
+ push: card.execute === 3,
|
|
|
+ hasBg: (card.execute === 0 || card.execute === 2) && !card.hasBg,
|
|
|
+ }" -->
|
|
|
+ <div class="card-top">
|
|
|
+ <div class="card-title serve-title">
|
|
|
+ <div class="title-name">{{ card.farmWorkLibName }}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="card-desc">
|
|
|
+ <span class="desc-title">物候进程：</span>
|
|
|
+ {{ card.whjc }}
|
|
|
+ </div>
|
|
|
+ <div class="card-desc">
|
|
|
+ <span class="desc-title">执行时间：</span>
|
|
|
+ {{ card.executeDate }}
|
|
|
+ </div>
|
|
|
+ <div class="card-desc">
|
|
|
+ <span class="desc-title">生态理念：</span>
|
|
|
+ {{ card.stln }}
|
|
|
+ </div>
|
|
|
+ <div class="card-desc condition-wrap">
|
|
|
+ <div class="desc-title">农事目的：</div>
|
|
|
+ <div>
|
|
|
+ {{ card.targetText }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="card-imgs" v-if="card?.images">
|
|
|
+ <img-swipe :key="cardI" :imgsData="card.images"></img-swipe>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <div class="card-link">
|
|
|
+ <!-- <img class="expert-img" :src="card.expertPic||require('@/assets/img/guard_tree/logo.png')" /> -->
|
|
|
+ <div class="expert-name">
|
|
|
+ {{ card.expertName }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import { onMounted, ref } from "vue";
|
|
|
+// import imgSwipe from "./imgSwipe.vue";
|
|
|
+import { useRoute } from "vue-router";
|
|
|
|
|
|
+const route = useRoute();
|
|
|
+const containerRef = ref(null);
|
|
|
+const handleClick = (e) => {
|
|
|
+ e.preventDefault();
|
|
|
+ const href = e.target.getAttribute("href"); // 获取目标 hash（如 #part1）
|
|
|
+ if (href) {
|
|
|
+ const target = document.querySelector(href); // 找到目标元素
|
|
|
+ if (target) {
|
|
|
+ target.scrollIntoView({ behavior: "smooth" }); // 平滑滚动
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const farmId = ref(null)
|
|
|
+onMounted(() => {
|
|
|
+ getData()
|
|
|
+})
|
|
|
+
|
|
|
+function getData() {
|
|
|
+ VE_API.home.getFarmBuyAutoList({farmId:766}).then(({data}) => {
|
|
|
+ farmWorkList.value = data
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const farmWorkList = ref([]);
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.record-page {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ overflow: auto;
|
|
|
+ display: flex;
|
|
|
+ background: #F5F7FB;
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ .header {
|
|
|
+ position: fixed;
|
|
|
+ }
|
|
|
+ .el-affix {
|
|
|
+ width: fit-content;
|
|
|
+ }
|
|
|
+ .el-anchor.el-anchor--vertical .el-anchor__list {
|
|
|
+ padding-left: 0;
|
|
|
+ }
|
|
|
+ .el-anchor {
|
|
|
+ background: #f2f3f5;
|
|
|
+ }
|
|
|
+ .el-anchor__item {
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .el-anchor__marker {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .el-anchor__link {
|
|
|
+ width: 90px;
|
|
|
+ background: #f2f3f5;
|
|
|
+ padding: 6px 0;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #666666;
|
|
|
+ text-align: center;
|
|
|
+ &.is-active {
|
|
|
+ background: #2199f8;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-l {
|
|
|
+ height: 100%;
|
|
|
+ width: 90px;
|
|
|
+ background: #f2f3f5;
|
|
|
+ .menu-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: start;
|
|
|
+ padding-left: 10px;
|
|
|
+ .menu-icon {
|
|
|
+ width: 14px;
|
|
|
+ padding-right: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .page-r {
|
|
|
+ width: calc(100% - 90px - 22px);
|
|
|
+ height: 100%;
|
|
|
+ margin: 0 12px 10px 10px;
|
|
|
+ .done-card {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .id-positon {
|
|
|
+ position: relative;
|
|
|
+ top: -44px;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ .card-wrap {
|
|
|
+ padding-bottom: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-content {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 0 8px 8px 8px;
|
|
|
+ // border: 1px solid #2199f8;
|
|
|
+ &.push {
|
|
|
+ padding: 0 8px 12px 8px;
|
|
|
+ }
|
|
|
+ &.hasBg {
|
|
|
+ padding: 0 8px 12px 8px;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid rgba(102, 102, 102, 0.38);
|
|
|
+ .card-top {
|
|
|
+ border-bottom: none;
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-top {
|
|
|
+ position: relative;
|
|
|
+ &.noChart {
|
|
|
+ border-bottom: 0;
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+ .card-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ .serve-btn {
|
|
|
+ padding: 3px 10px;
|
|
|
+ background: #2199f8;
|
|
|
+ border-radius: 22px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .title-name {
|
|
|
+ color: #000000;
|
|
|
+ font-size: 16px;
|
|
|
+ padding-right: 8px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ }
|
|
|
|
|
|
-</style>
|
|
|
+ .status-tag {
|
|
|
+ color: #f3a302;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 2px 6px;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: rgba(243, 163, 2, 0.2);
|
|
|
+ margin-right: 10px;
|
|
|
+ &.blue {
|
|
|
+ color: #2199f8;
|
|
|
+ background: rgba(33, 153, 248, 0.2);
|
|
|
+ }
|
|
|
+ &.good-wrap {
|
|
|
+ margin-left: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .good {
|
|
|
+ margin-left: 3px;
|
|
|
+ width: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.standard {
|
|
|
+ color: #2199f8;
|
|
|
+ background: rgba(33, 153, 248, 0.2);
|
|
|
+ }
|
|
|
+ &.advice {
|
|
|
+ color: rgba(252, 167, 3, 0.9);
|
|
|
+ background: rgba(255, 220, 104, 0.38);
|
|
|
+ }
|
|
|
+ &.warning {
|
|
|
+ color: #ff4221;
|
|
|
+ background: rgba(255, 175, 160, 0.24);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.serve-title {
|
|
|
+ padding: 12px 0 8px 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ .add-btn {
|
|
|
+ position: absolute;
|
|
|
+ right: -9px;
|
|
|
+ top: -1px;
|
|
|
+ background: #2199f8;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ border-radius: 0 8px 0 8px;
|
|
|
+ padding: 2px 6px;
|
|
|
+ &.unactive {
|
|
|
+ background: #c3c3c3;
|
|
|
+ }
|
|
|
+ &.recheck {
|
|
|
+ background: #f3c11d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tag {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #ff7000;
|
|
|
+ font-size: 10px;
|
|
|
+ .desc {
|
|
|
+ position: relative;
|
|
|
+ left: -4px;
|
|
|
+ }
|
|
|
+ .photo-grid {
|
|
|
+ display: flex;
|
|
|
+ .photo {
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ width: 18px; /* 示例宽度，你可以根据需要调整 */
|
|
|
+ height: 18px;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: block; /* 去除图片底部的空白间隙 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-desc {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 18.2px;
|
|
|
+ &.van-ellipsis {
|
|
|
+ max-width: 142px;
|
|
|
+ }
|
|
|
+ &.last-desc {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .desc-title {
|
|
|
+ color: #b6b6b6;
|
|
|
+ }
|
|
|
+ &.condition-wrap {
|
|
|
+ display: flex;
|
|
|
+ .desc-title {
|
|
|
+ flex: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rescription-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .detail-text {
|
|
|
+ color: #2199f8;
|
|
|
+ padding-left: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rescription {
|
|
|
+ max-width: 170px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .expert-link {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #2199f8;
|
|
|
+ .icon {
|
|
|
+ padding-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .step-box {
|
|
|
+ position: absolute;
|
|
|
+ right: 0px;
|
|
|
+ top: 15px;
|
|
|
+ }
|
|
|
+ .card-tips {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #f5bc00;
|
|
|
+ padding: 3px;
|
|
|
+ background: rgba(243, 193, 29, 0.13);
|
|
|
+ border-radius: 5px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 8px 0;
|
|
|
+ &.check {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #2199f8;
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
+ padding: 5px;
|
|
|
+ margin-bottom: 0;
|
|
|
+ .icon {
|
|
|
+ margin-right: 6px;
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-tips-btn {
|
|
|
+ .text {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: #2199f8;
|
|
|
+ }
|
|
|
+ .card-imgs {
|
|
|
+ padding: 10px 0 4px 0;
|
|
|
+ }
|
|
|
+ .tree-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 150px;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ .card-link {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #2199f8;
|
|
|
+ font-size: 12px;
|
|
|
+ position: absolute;
|
|
|
+ right: 6px;
|
|
|
+ top: 10px;
|
|
|
+ .expert-name {
|
|
|
+ background: #d3e8ff;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 2px 6px 3px 10px;
|
|
|
+ margin-top: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ padding-right: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wangsisi
