|
|
@@ -1,139 +1,257 @@
|
|
|
<template>
|
|
|
- <custom-header v-if="isExpert" name="飞鸟管家"></custom-header>
|
|
|
- <div class="home-index" :style="{ height: isExpert ? `calc(100vh - 40px)` : `calc(100vh - ${tabBarHeight}px - 50px)` }">
|
|
|
- <!-- 地图 -->
|
|
|
- <div class="map-container" ref="mapContainer"></div>
|
|
|
- <!-- 新建按钮 -->
|
|
|
- <div class="add-button" v-show="showAddButton && !isExpert" @click="toSubPage">
|
|
|
- <el-icon class="add-button-icon"><CircleCloseFilled /></el-icon>
|
|
|
- <span>创建我的农场</span>
|
|
|
+ <div class="home-index" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
|
|
|
+ <div class="banner-wrap">
|
|
|
+ <img class="banner-img" @click="handleBannerClick" :src="bannerObj?.media?.[0]" alt="" />
|
|
|
+ <div class="banner-title">
|
|
|
+ <span class="van-multi-ellipsis--l2">{{ bannerObj?.title }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 天气遮罩 -->
|
|
|
- <div class="weather-mask" v-show="isExpanded"></div>
|
|
|
+ <div class="weather-mask" v-show="isExpanded" @click="handleMaskClick"></div>
|
|
|
<!-- 天气 -->
|
|
|
- <weather-info class="weather-info" @weatherExpanded="weatherExpanded"></weather-info>
|
|
|
- <!-- 操作按钮 -->
|
|
|
- <div class="operation-button">
|
|
|
- <div class="button-group">
|
|
|
- <div class="button-item" @click="toFarmInfo">
|
|
|
- <img class="button-icon" src="@/assets/img/tab_bar/home-active.png" alt="">
|
|
|
- <span>基本信息</span>
|
|
|
+ <weather-info
|
|
|
+ ref="weatherInfoRef"
|
|
|
+ class="weather-info"
|
|
|
+ @weatherExpanded="weatherExpanded"
|
|
|
+ :isGarden="false"
|
|
|
+ @changeGarden="changeGarden"
|
|
|
+ ></weather-info>
|
|
|
+ <div class="farm-monitor-container" :class="{ 'container-role': curRole == 2 }">
|
|
|
+ <div class="farm-monitor-left" @click="handleCardClick(monitorCards.left)">
|
|
|
+ <div class="title">
|
|
|
+ <span>{{ monitorCards.left.title }}</span>
|
|
|
+ <el-icon v-if="curRole == 2" class="icon"><ArrowRightBold /></el-icon>
|
|
|
</div>
|
|
|
- <div class="button-item" @click="toFarmPhoto">
|
|
|
- <img class="button-icon" src="@/assets/img/home/photo-icon.png" alt="">
|
|
|
- <span>农场相册</span>
|
|
|
+ <div class="content">{{ monitorCards.left.content }}</div>
|
|
|
+ <div class="arrow" v-if="curRole != 2">
|
|
|
+ <el-icon class="icon"><ArrowRightBold /></el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="add-farm-button" v-show="!isExpert">
|
|
|
- <el-icon class="icon"><CircleCloseFilled /></el-icon>
|
|
|
- <span>新增农场</span>
|
|
|
+ <div class="farm-monitor-right">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in monitorCards.right"
|
|
|
+ :key="index"
|
|
|
+ class="right-item"
|
|
|
+ :class="{ expert: index === 1 }"
|
|
|
+ @click="handleCardClick(item)"
|
|
|
+ >
|
|
|
+ <div class="title">
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ <el-icon class="icon"><ArrowRightBold /></el-icon>
|
|
|
+ </div>
|
|
|
+ <div class="content">{{ item.content }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- 浮动面板 -->
|
|
|
- <home-floating-panel
|
|
|
- :isExpert="isExpert"
|
|
|
- class="home-floating-panel"
|
|
|
- :style="{ zIndex: zIndex }"
|
|
|
- @heightChange="heightChange"
|
|
|
- ></home-floating-panel>
|
|
|
- <!-- 问题提醒 -->
|
|
|
- <problem-reminder></problem-reminder>
|
|
|
- <!-- 农场信息 -->
|
|
|
- <farm-info-popup ref="farmInfoRef"></farm-info-popup>
|
|
|
+ <AgriculturalDynamics />
|
|
|
</div>
|
|
|
+ <!-- 创建农场弹窗 -->
|
|
|
+ <tip-popup
|
|
|
+ v-model:show="showFarmPopup"
|
|
|
+ :type="farmPopupType"
|
|
|
+ :text="farmPopupType === 'create' ? ['您当前还没有农场', '请先创建农场'] : '农场创建成功'"
|
|
|
+ @confirm="handleBtn"
|
|
|
+ />
|
|
|
+ <!-- 问题提醒 -->
|
|
|
+ <problem-reminder></problem-reminder>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import IndexMap from "./map/index.js";
|
|
|
-import { onMounted, computed, ref } from "vue";
|
|
|
+import { ref, computed, onActivated } from "vue";
|
|
|
import { useStore } from "vuex";
|
|
|
-import { useRouter,useRoute } from "vue-router";
|
|
|
-import customHeader from "@/components/customHeader.vue";
|
|
|
import weatherInfo from "@/components/weatherInfo.vue";
|
|
|
-import homeFloatingPanel from "./components/homeFloatingPanel.vue";
|
|
|
+import AgriculturalDynamics from "./components/AgriculturalDynamics.vue";
|
|
|
+import { useRouter, useRoute } from "vue-router";
|
|
|
+import wx from "weixin-js-sdk";
|
|
|
import problemReminder from "./components/problemReminder.vue";
|
|
|
-import farmInfoPopup from "./components/farmInfoPopup.vue";
|
|
|
-const router = useRouter();
|
|
|
-const route = useRoute();
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
+import tipPopup from "@/components/popup/tipPopup.vue";
|
|
|
+
|
|
|
+const curRole = localStorage.getItem("SET_USER_CUR_ROLE");
|
|
|
const store = useStore();
|
|
|
const tabBarHeight = computed(() => store.state.home.tabBarHeight);
|
|
|
-const farmInfoRef = ref(null);
|
|
|
-const indexMap = new IndexMap();
|
|
|
-const mapContainer = ref(null);
|
|
|
+const router = useRouter();
|
|
|
+const route = useRoute();
|
|
|
|
|
|
-const isExpert = ref(false);
|
|
|
-if (route.query.type) {
|
|
|
- isExpert.value = true;
|
|
|
-}
|
|
|
-onMounted(() => {
|
|
|
- const point = store.state.home.miniUserLocationPoint
|
|
|
- indexMap.initMap(point, mapContainer.value);
|
|
|
+const showFarmPopup = ref(false);
|
|
|
+const farmPopupType = ref("create");
|
|
|
+
|
|
|
+const gardenId = ref(null);
|
|
|
+
|
|
|
+const isGarden = ref(false);
|
|
|
+const changeGarden = ({ id }) => {
|
|
|
+ gardenId.value = id;
|
|
|
+ getExpertByFarmId();
|
|
|
+};
|
|
|
+
|
|
|
+const expertInfo = ref({});
|
|
|
+const getExpertByFarmId = () => {
|
|
|
+ VE_API.home.getExpertByFarmId({ farmId: gardenId.value }).then(({ data }) => {
|
|
|
+ expertInfo.value = data || {};
|
|
|
+ sessionStorage.setItem("expertId", data.appUserId);
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 监测卡片数据
|
|
|
+const monitorCards = ref({
|
|
|
+ left: {
|
|
|
+ title: "农场监测",
|
|
|
+ content: "实时监测农场状态",
|
|
|
+ route: "/monitor",
|
|
|
+ },
|
|
|
+ right: [
|
|
|
+ {
|
|
|
+ title: "病虫识别",
|
|
|
+ content: "精准识别病虫",
|
|
|
+ route: "/pest",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "专家咨询",
|
|
|
+ content: "专家多年经验指导",
|
|
|
+ route: "/chat_frame",
|
|
|
+ },
|
|
|
+ ],
|
|
|
});
|
|
|
|
|
|
-const isExpanded = ref(false);
|
|
|
-const weatherExpanded = (isExpandedValue) => {
|
|
|
- isExpanded.value = isExpandedValue;
|
|
|
+// 卡片点击事件
|
|
|
+const handleCardClick = (card) => {
|
|
|
+ if (curRole == 0) {
|
|
|
+ if (!isGarden.value) {
|
|
|
+ showFarmPopup.value = true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (card.route === "/pest") {
|
|
|
+ // ElMessage.warning("该功能正在升级中，敬请期待");
|
|
|
+ // if (curRole == 2) {
|
|
|
+ // ElMessage.warning("该功能正在升级中，敬请期待");
|
|
|
+ // } else {
|
|
|
+ const dropdownGardenItem = ref({
|
|
|
+ organId: 766,
|
|
|
+ periodId: 1,
|
|
|
+ wktVal: "wktVal",
|
|
|
+ address: "address",
|
|
|
+ district: "district",
|
|
|
+ name: "荔博园",
|
|
|
+ });
|
|
|
+ wx.miniProgram.navigateTo({
|
|
|
+ url: `/pages/subPages/new_recognize/index?gardenData=${JSON.stringify(dropdownGardenItem.value)}`,
|
|
|
+ });
|
|
|
+ // }
|
|
|
+ } else {
|
|
|
+ if (card.route === "/chat_frame") {
|
|
|
+ router.push("/agri_services?active=1");
|
|
|
+ // router.push(`/chat_frame?userId=${expertInfo.value.appUserId}`);
|
|
|
+ } else {
|
|
|
+ router.push(card.route);
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
-const zIndex = ref(1);
|
|
|
-const showAddButton = ref(true);
|
|
|
-const heightChange = (height) => {
|
|
|
- zIndex.value = 1;
|
|
|
- showAddButton.value = true;
|
|
|
- if (height === 0) {
|
|
|
- showAddButton.value = false;
|
|
|
- } else if (height > 310 + tabBarHeight.value) {
|
|
|
- zIndex.value = 3;
|
|
|
+const handleBtn = () => {
|
|
|
+ if (farmPopupType.value === "create") {
|
|
|
+ router.push("/create_farm?isReload=true&from=home");
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-function toSubPage() {
|
|
|
- router.push("/create_farm?isFromHome=true");
|
|
|
-}
|
|
|
+onActivated(() => {
|
|
|
+ getBannerList();
|
|
|
+ isGarden.value = Boolean(localStorage.getItem("isGarden"));
|
|
|
+ // 检测是否从创建农场页面成功返回
|
|
|
+ if (route.query.showSuccess === "true") {
|
|
|
+ farmPopupType.value = "success";
|
|
|
+ showFarmPopup.value = true;
|
|
|
+
|
|
|
+ // 清除URL参数，避免刷新页面时再次显示弹窗
|
|
|
+ router.replace({
|
|
|
+ path: "/home",
|
|
|
+ query: { reload: route.query.reload },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (curRole == 2) {
|
|
|
+ monitorCards.value.left = {
|
|
|
+ title: "新增客户",
|
|
|
+ content: "实时监测农场状态",
|
|
|
+ route: "/create_farm?type=client&isReload=true&from=home",
|
|
|
+ };
|
|
|
+ monitorCards.value.right = [
|
|
|
+ {
|
|
|
+ title: "病虫识别",
|
|
|
+ content: "精准识别病虫",
|
|
|
+ route: "/pest",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ }
|
|
|
+});
|
|
|
|
|
|
-function toFarmPhoto() {
|
|
|
- router.push({
|
|
|
- path: "/farm_photo",
|
|
|
+const bannerObj = ref({});
|
|
|
+const getBannerList = () => {
|
|
|
+ const params = {
|
|
|
+ page: 1,
|
|
|
+ limit: 1,
|
|
|
+ topicId: 5,
|
|
|
+ };
|
|
|
+ VE_API.home.warningPageList(params).then(({ data }) => {
|
|
|
+ bannerObj.value = data[0] || {};
|
|
|
});
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
-function toFarmInfo() {
|
|
|
- farmInfoRef.value.handleShow();
|
|
|
-}
|
|
|
+const isExpanded = ref(false);
|
|
|
+const weatherInfoRef = ref(null);
|
|
|
+const weatherExpanded = (isExpandedValue) => {
|
|
|
+ isExpanded.value = isExpandedValue;
|
|
|
+};
|
|
|
+
|
|
|
+// 点击遮罩时收起天气
|
|
|
+const handleMaskClick = () => {
|
|
|
+ if (weatherInfoRef.value && weatherInfoRef.value.toggleExpand) {
|
|
|
+ weatherInfoRef.value.toggleExpand();
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const handleBannerClick = () => {
|
|
|
+ router.push(`/warning_detail?id=${bannerObj.value.id}`);
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
+<style scoped lang="scss">
|
|
|
.home-index {
|
|
|
- position: relative;
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
- .map-container {
|
|
|
+ height: 100vh;
|
|
|
+ overflow: auto;
|
|
|
+ position: relative;
|
|
|
+ .banner-wrap {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .add-button {
|
|
|
- position: absolute;
|
|
|
- bottom: 20px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- z-index: 2;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: #fff;
|
|
|
- background-image: linear-gradient(180deg, #70bffe 0%, #2199f8 100%);
|
|
|
- border-radius: 25px;
|
|
|
- padding: 12px 0;
|
|
|
- width: 187px;
|
|
|
- .add-button-icon {
|
|
|
- font-size: 20px;
|
|
|
- margin-right: 5px;
|
|
|
- transform: rotate(45deg);
|
|
|
+ height: 200px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ .banner-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ .banner-title {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px 12px 34px 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: linear-gradient(
|
|
|
+ 180deg,
|
|
|
+ rgba(102, 102, 102, 0) -64.3%,
|
|
|
+ rgba(0, 0, 0, 0.0074) -1.43%,
|
|
|
+ rgba(0, 0, 0, 0.684747) 39.67%,
|
|
|
+ rgba(0, 0, 0, 0.74) 40.09%,
|
|
|
+ rgba(0, 0, 0, 0.74) 83.2%
|
|
|
+ );
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bold;
|
|
|
+ backdrop-filter: blur(2px);
|
|
|
}
|
|
|
}
|
|
|
.weather-mask {
|
|
|
- position: absolute;
|
|
|
+ position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
@@ -142,68 +260,86 @@ function toFarmInfo() {
|
|
|
z-index: 2;
|
|
|
}
|
|
|
.weather-info {
|
|
|
+ width: calc(100% - 20px);
|
|
|
position: absolute;
|
|
|
- top: 12px;
|
|
|
- left: 12px;
|
|
|
- width: calc(100% - 24px);
|
|
|
- z-index: 2;
|
|
|
+ top: calc(200px - 28px);
|
|
|
+ left: 10px;
|
|
|
+ z-index: 3;
|
|
|
}
|
|
|
- .operation-button{
|
|
|
- position: absolute;
|
|
|
- top: 117px;
|
|
|
- left: 12px;
|
|
|
- width: calc(100% - 24px);
|
|
|
- z-index: 1;
|
|
|
+ .farm-monitor-container {
|
|
|
+ padding-top: 60px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 500;
|
|
|
- .button-group{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- .button-item{
|
|
|
+ gap: 7px;
|
|
|
+ margin: 10px;
|
|
|
+ height: 170px;
|
|
|
+ .farm-monitor-left,
|
|
|
+ .farm-monitor-right {
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #1d2129;
|
|
|
+ font-weight: 500;
|
|
|
+ .icon {
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ margin-top: 6px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(29, 33, 41, 0.5);
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+ .arrow {
|
|
|
+ border-radius: 5px;
|
|
|
+ background: #fff;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- gap: 4px;
|
|
|
- color: rgba(0, 0, 0, 0.8);
|
|
|
- background-color: #fff;
|
|
|
- .button-icon{
|
|
|
- width: 13px;
|
|
|
- height: 13px;
|
|
|
- }
|
|
|
- }
|
|
|
- .button-item:first-child{
|
|
|
- margin-right: 10px;
|
|
|
+ width: 34px;
|
|
|
+ height: 25px;
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 11px;
|
|
|
}
|
|
|
}
|
|
|
- .add-farm-button{
|
|
|
+ .farm-monitor-left {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ padding: 25px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: url("@/assets/img/home/farm-bg-1.png") no-repeat center center / 100% 100%;
|
|
|
+ }
|
|
|
+ .farm-monitor-right {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- gap: 4px;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.5);
|
|
|
- color: #fff;
|
|
|
- .icon{
|
|
|
- font-size: 16px;
|
|
|
- transform: rotate(45deg);
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 7px;
|
|
|
+ .right-item {
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ flex: 1;
|
|
|
+ background: url("@/assets/img/home/farm-bg-2.png") no-repeat center center / 100% 100%;
|
|
|
+ }
|
|
|
+ .expert {
|
|
|
+ background: url("@/assets/img/home/farm-bg-3.png") no-repeat center center / 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
- .button-item,
|
|
|
- .add-farm-button{
|
|
|
- border-radius: 25px;
|
|
|
- padding: 8px 12px;
|
|
|
+
|
|
|
+ &.container-role {
|
|
|
+ height: 104px;
|
|
|
+ .farm-monitor-left {
|
|
|
+ background: url("@/assets/img/home/farm-bg-4.png") no-repeat center center / 100% 100%;
|
|
|
+ }
|
|
|
+ .farm-monitor-right {
|
|
|
+ .right-item {
|
|
|
+ background: url("@/assets/img/home/farm-bg-5.png") no-repeat center center / 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .home-floating-panel {
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
}
|
|
|
</style>
|
wangsisi
