|
@@ -1,59 +1,8 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="farm-card-page">
|
|
<div class="farm-card-page">
|
|
|
- <custom-header name="农场卡片"></custom-header>
|
|
|
|
|
|
|
+ <custom-header name="农事卡片"></custom-header>
|
|
|
<div class="farm-card-content">
|
|
<div class="farm-card-content">
|
|
|
- <div class="expert-prescription">
|
|
|
|
|
- <div class="plan-menu">
|
|
|
|
|
- <el-anchor :container="containerRef" direction="vertical" type="default" @click="handleClick">
|
|
|
|
|
- <el-menu :default-active="defaultActive" class="el-menu-vertical-demo">
|
|
|
|
|
- <el-sub-menu v-for="(menu, index) in menuData" :key="index" :index="String(menu.id)">
|
|
|
|
|
- <template #title>
|
|
|
|
|
- <img class="menu-icon" :src="require(`@/assets/img/gallery/icon-${index}.png`)" />
|
|
|
|
|
- <span class="menu-text">{{ menu.name }}</span>
|
|
|
|
|
- </template>
|
|
|
|
|
- <el-menu-item
|
|
|
|
|
- v-for="item in menu.farmWorkArrangeList"
|
|
|
|
|
- :key="item.id"
|
|
|
|
|
- :index="`${menu.id}-${item.id}`"
|
|
|
|
|
- >
|
|
|
|
|
- <el-anchor-link
|
|
|
|
|
- :href="'#' + menu.name + item.farmWorkDetail?.name"
|
|
|
|
|
- :title="item.farmWorkDetail?.name || '摇花落花'"
|
|
|
|
|
- />
|
|
|
|
|
- </el-menu-item>
|
|
|
|
|
- </el-sub-menu>
|
|
|
|
|
- </el-menu>
|
|
|
|
|
- </el-anchor>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="expert-content" ref="containerRef">
|
|
|
|
|
- <div v-for="(section, index) in menuData" :key="index" class="content-section">
|
|
|
|
|
- <div
|
|
|
|
|
- class="section-item"
|
|
|
|
|
- v-for="(sub, subI) in section.farmWorkArrangeList"
|
|
|
|
|
- :key="index + '-' + subI"
|
|
|
|
|
- >
|
|
|
|
|
- <div class="section-id" :id="section.name + sub.farmWorkDetail?.name"></div>
|
|
|
|
|
- <record-item :record-item-data="sub">
|
|
|
|
|
- <template #title>
|
|
|
|
|
- <div class="box-title">
|
|
|
|
|
- <div class="title-l">
|
|
|
|
|
- {{ sub.farmWorkDetail?.name }}
|
|
|
|
|
- <span class="parent-text">{{ section.name }}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="title-r">
|
|
|
|
|
- <radio
|
|
|
|
|
- :name="`${section.id}-${sub.id}`"
|
|
|
|
|
- v-model="selectedItem"
|
|
|
|
|
- @change="handleSelectionChange"
|
|
|
|
|
- />
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </template>
|
|
|
|
|
- </record-item>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <plan-list class="plan-list" :farmId="route.query.farmId" isCheck @selectionChange="handleSelectionChange"></plan-list>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="selection-info" v-if="selectedItem">
|
|
<div class="selection-info" v-if="selectedItem">
|
|
@@ -63,112 +12,56 @@
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
import customHeader from "@/components/customHeader.vue";
|
|
import customHeader from "@/components/customHeader.vue";
|
|
|
-import { ref, onMounted } from "vue";
|
|
|
|
|
|
|
+import { ref } from "vue";
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
-import recordItem from "@/components/recordItem.vue";
|
|
|
|
|
-import { Radio } from "vant";
|
|
|
|
|
|
|
+import PlanList from "@/components/pageComponents/PlanList.vue";
|
|
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
|
|
|
|
|
const route = useRoute();
|
|
const route = useRoute();
|
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
|
-const containerRef = ref(null);
|
|
|
|
|
-const handleClick = (e) => {
|
|
|
|
|
- e.preventDefault();
|
|
|
|
|
-};
|
|
|
|
|
-// 菜单
|
|
|
|
|
-const defaultActive = ref("1-1");
|
|
|
|
|
|
|
|
|
|
-const menuData = ref([]);
|
|
|
|
|
// 选中状态
|
|
// 选中状态
|
|
|
-const selectedItem = ref("");
|
|
|
|
|
-
|
|
|
|
|
-function getWorkList() {
|
|
|
|
|
- VE_API.home
|
|
|
|
|
- .getPhenologyFarmWorkList({ farmId: 93301, containerId: route.query.containerId || 2 })
|
|
|
|
|
- .then(({ data }) => {
|
|
|
|
|
- menuData.value = data;
|
|
|
|
|
- });
|
|
|
|
|
-}
|
|
|
|
|
|
|
+const selectedItem = ref({});
|
|
|
|
|
|
|
|
-// 处理选择变化
|
|
|
|
|
-const handleSelectionChange = (value) => {
|
|
|
|
|
- selectedItem.value = value;
|
|
|
|
|
- console.log("选中项:", value);
|
|
|
|
|
-};
|
|
|
|
|
|
|
+// 本地用户头像
|
|
|
|
|
+const localUserInfoIcon = (() => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ const info = JSON.parse(localStorage.getItem("localUserInfo") || "{}");
|
|
|
|
|
+ return info?.icon || "";
|
|
|
|
|
+ } catch (e) {
|
|
|
|
|
+ return "";
|
|
|
|
|
+ }
|
|
|
|
|
+})();
|
|
|
|
|
|
|
|
// 发送功能
|
|
// 发送功能
|
|
|
const handleSend = () => {
|
|
const handleSend = () => {
|
|
|
- if (!selectedItem.value) {
|
|
|
|
|
- console.log("请先选择一项");
|
|
|
|
|
|
|
+ if (!selectedItem.value.id) {
|
|
|
|
|
+ ElMessage.warning("请先选择一项");
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- // 找到选中的项目数据
|
|
|
|
|
- let selectedData = null;
|
|
|
|
|
- for (const section of menuData.value) {
|
|
|
|
|
- for (const sub of section.farmWorkArrangeList) {
|
|
|
|
|
- if (`${section.id}-${sub.id}` === selectedItem.value) {
|
|
|
|
|
- selectedData = {
|
|
|
|
|
- sectionName: section.name,
|
|
|
|
|
- workName: sub.farmWorkDetail?.name,
|
|
|
|
|
- executeDate: sub.farmWorkDetail?.executeDate,
|
|
|
|
|
- condition: sub.farmWorkDetail?.condition,
|
|
|
|
|
- code: sub.farmWorkDetail?.code,
|
|
|
|
|
- attention: sub.attention
|
|
|
|
|
- };
|
|
|
|
|
- break;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- if (selectedData) break;
|
|
|
|
|
|
|
+ // 创建对话样式的消息
|
|
|
|
|
+ const dialogMessage = {
|
|
|
|
|
+ sender: "sent",
|
|
|
|
|
+ messageType: "report",
|
|
|
|
|
+ senderIcon: localUserInfoIcon,
|
|
|
|
|
+ title: `分享了一个${selectedItem.value.name}的农事`,
|
|
|
|
|
+ reportId:selectedItem.value.id,
|
|
|
|
|
+ reportType:'farm_card',
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- if (selectedData) {
|
|
|
|
|
- // 创建对话样式的消息
|
|
|
|
|
- const dialogMessage = createDialogMessage(selectedData);
|
|
|
|
|
-
|
|
|
|
|
- // 返回到上一页并传递数据
|
|
|
|
|
- router.back();
|
|
|
|
|
-
|
|
|
|
|
- // 可以通过事件总线或其他方式传递数据到聊天窗口
|
|
|
|
|
- // 这里使用localStorage临时存储,实际项目中可以使用事件总线
|
|
|
|
|
- localStorage.setItem('selectedFarmWork', JSON.stringify({
|
|
|
|
|
- data: selectedData,
|
|
|
|
|
- dialogMessage: dialogMessage
|
|
|
|
|
- }));
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ // 返回到上一页并传递数据
|
|
|
|
|
+ router.back();
|
|
|
|
|
+
|
|
|
|
|
+ // 可以通过事件总线或其他方式传递数据到聊天窗口
|
|
|
|
|
+ // 这里使用localStorage临时存储,实际项目中可以使用事件总线
|
|
|
|
|
+ sessionStorage.setItem('selectedFarmWork', JSON.stringify(dialogMessage));
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-// 创建对话样式的消息
|
|
|
|
|
-const createDialogMessage = (selectedData) => {
|
|
|
|
|
- return {
|
|
|
|
|
- type: 'farm_work_selection',
|
|
|
|
|
- title: '农事复核情况',
|
|
|
|
|
- content: `这是${selectedData.sectionName}${selectedData.workName}的农事复核情况,请查看~`,
|
|
|
|
|
- beforeAfter: {
|
|
|
|
|
- before: {
|
|
|
|
|
- title: '农事前',
|
|
|
|
|
- description: '农事执行前的状态',
|
|
|
|
|
- image: 'https://birdseye-img.sysuimars.com/before-image.jpg' // 实际项目中应该是真实的图片URL
|
|
|
|
|
- },
|
|
|
|
|
- after: {
|
|
|
|
|
- title: '农事后',
|
|
|
|
|
- description: '农事执行后的状态',
|
|
|
|
|
- image: 'https://birdseye-img.sysuimars.com/after-image.jpg' // 实际项目中应该是真实的图片URL
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- workDetails: {
|
|
|
|
|
- name: selectedData.workName,
|
|
|
|
|
- section: selectedData.sectionName,
|
|
|
|
|
- executeDate: selectedData.executeDate,
|
|
|
|
|
- condition: selectedData.condition,
|
|
|
|
|
- code: selectedData.code,
|
|
|
|
|
- attention: selectedData.attention
|
|
|
|
|
- }
|
|
|
|
|
- };
|
|
|
|
|
|
|
+// 处理选择变化
|
|
|
|
|
+const handleSelectionChange = (value) => {
|
|
|
|
|
+ selectedItem.value = value;
|
|
|
};
|
|
};
|
|
|
-
|
|
|
|
|
-onMounted(() => {
|
|
|
|
|
- getWorkList();
|
|
|
|
|
-});
|
|
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
@@ -178,143 +71,10 @@ onMounted(() => {
|
|
|
background: #f5f7fb;
|
|
background: #f5f7fb;
|
|
|
.farm-card-content {
|
|
.farm-card-content {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
|
|
- .expert-prescription {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: calc(100vh - 40px);
|
|
|
|
|
- padding-top: 10px;
|
|
|
|
|
- .plan-menu {
|
|
|
|
|
- width: 100px;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- overflow: auto;
|
|
|
|
|
- padding: 10px 0;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
- background: #fff;
|
|
|
|
|
- border-radius: 0 10px 10px 0;
|
|
|
|
|
- .menu-icon {
|
|
|
|
|
- width: 13px;
|
|
|
|
|
- }
|
|
|
|
|
- .menu-text {
|
|
|
|
|
- padding: 0 4px;
|
|
|
|
|
- }
|
|
|
|
|
- ::v-deep {
|
|
|
|
|
- .el-anchor {
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- background: none;
|
|
|
|
|
- }
|
|
|
|
|
- .el-anchor__marker {
|
|
|
|
|
- display: none;
|
|
|
|
|
- }
|
|
|
|
|
- .el-menu {
|
|
|
|
|
- background: none;
|
|
|
|
|
- border: none;
|
|
|
|
|
- .el-sub-menu__title {
|
|
|
|
|
- background: none;
|
|
|
|
|
- padding: 0 2px;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- }
|
|
|
|
|
- .el-sub-menu__title {
|
|
|
|
|
- height: 32px;
|
|
|
|
|
- }
|
|
|
|
|
- .el-sub-menu .el-sub-menu__icon-arrow {
|
|
|
|
|
- position: static;
|
|
|
|
|
- padding-top: 6px;
|
|
|
|
|
- }
|
|
|
|
|
- .el-sub-menu {
|
|
|
|
|
- margin-bottom: 16px;
|
|
|
|
|
- &.is-opened {
|
|
|
|
|
- .el-sub-menu__icon-arrow {
|
|
|
|
|
- padding-bottom: 6px;
|
|
|
|
|
- padding-top: 0;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .el-menu-item {
|
|
|
|
|
- height: 32px;
|
|
|
|
|
- line-height: 32px;
|
|
|
|
|
- margin: 4px 8px;
|
|
|
|
|
- padding: 0 2px;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- background: none;
|
|
|
|
|
- }
|
|
|
|
|
- .el-menu-item.is-active {
|
|
|
|
|
- background: none;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- }
|
|
|
|
|
- .el-anchor__item {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- }
|
|
|
|
|
- .el-anchor__link {
|
|
|
|
|
- color: #666666;
|
|
|
|
|
- }
|
|
|
|
|
- .el-anchor__link.is-active {
|
|
|
|
|
- background: rgba(33, 153, 248, 0.1);
|
|
|
|
|
- border-radius: 20px;
|
|
|
|
|
- color: #2199f8;
|
|
|
|
|
- border: 1px solid #2199f8;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .el-anchor__list {
|
|
|
|
|
- padding-left: 0;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .expert-content {
|
|
|
|
|
- width: calc(100% - 100px);
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- overflow: auto;
|
|
|
|
|
- padding-bottom: 80px;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
- .content-section {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- .section-item {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- }
|
|
|
|
|
- .section-id {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- // top: -6px;
|
|
|
|
|
- top: 0;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 1px;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .box-title {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
- padding-bottom: 8px;
|
|
|
|
|
- border-bottom: 1px solid #f5f5f5;
|
|
|
|
|
- margin-bottom: 8px;
|
|
|
|
|
- .title-l {
|
|
|
|
|
- font-size: 16px;
|
|
|
|
|
- font-weight: 600;
|
|
|
|
|
- color: #000;
|
|
|
|
|
- .parent-text {
|
|
|
|
|
- margin-left: 5px;
|
|
|
|
|
- font-size: 12px;
|
|
|
|
|
- font-weight: normal;
|
|
|
|
|
- padding: 4px 6px;
|
|
|
|
|
- border-radius: 14px;
|
|
|
|
|
- background: rgba(119, 119, 119, 0.1);
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .title-r {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- }
|
|
|
|
|
- .title-btn {
|
|
|
|
|
- width: 24px;
|
|
|
|
|
- height: 24px;
|
|
|
|
|
- border-radius: 50%;
|
|
|
|
|
- background: #2199f8;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ height: calc(100% - 35px);
|
|
|
|
|
+ .plan-list {
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|