|
@@ -11,6 +11,12 @@
|
|
|
:src="activeGarden === 'current' ? require('@/assets/img/common/farm-active.png') : require('@/assets/img/common/farm.png')"
|
|
:src="activeGarden === 'current' ? require('@/assets/img/common/farm-active.png') : require('@/assets/img/common/farm.png')"
|
|
|
alt="">
|
|
alt="">
|
|
|
<span class="current-name van-ellipsis">{{ farmName }}</span>
|
|
<span class="current-name van-ellipsis">{{ farmName }}</span>
|
|
|
|
|
+ <el-icon
|
|
|
|
|
+ v-if="activeGarden === 'current'"
|
|
|
|
|
+ class="farm-edit-icon"
|
|
|
|
|
+ >
|
|
|
|
|
+ <Edit />
|
|
|
|
|
+ </el-icon>
|
|
|
</div>
|
|
</div>
|
|
|
<img class="title-block" v-show="activeGarden === 'current'"
|
|
<img class="title-block" v-show="activeGarden === 'current'"
|
|
|
src="@/assets/img/common/title-block.png" alt="">
|
|
src="@/assets/img/common/title-block.png" alt="">
|
|
@@ -59,11 +65,14 @@
|
|
|
|
|
|
|
|
<div v-if="!hasWeather" class="report-tabs">
|
|
<div v-if="!hasWeather" class="report-tabs">
|
|
|
<div
|
|
<div
|
|
|
- v-for="item in reportTabs"
|
|
|
|
|
|
|
+ v-for="(item, index) in reportTabs"
|
|
|
:key="item.key"
|
|
:key="item.key"
|
|
|
class="report-tab-item"
|
|
class="report-tab-item"
|
|
|
@click="emit('reportTabClick', item)"
|
|
@click="emit('reportTabClick', item)"
|
|
|
- >{{ item.label }}</div>
|
|
|
|
|
|
|
+ >
|
|
|
|
|
+ <img class="report-tab-icon" :src="getReportTabIcon(index)" alt="" />
|
|
|
|
|
+ <span class="report-tab-label">{{ item.label }}</span>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<!-- <div class="weather-icon" v-else>
|
|
<!-- <div class="weather-icon" v-else>
|
|
@@ -77,14 +86,6 @@
|
|
|
</div>
|
|
</div>
|
|
|
<weather-chart class="weather-chart" :weather-data="weatherData"></weather-chart>
|
|
<weather-chart class="weather-chart" :weather-data="weatherData"></weather-chart>
|
|
|
</div>
|
|
</div>
|
|
|
- <div
|
|
|
|
|
- v-if="!hasWeather && activeGarden === 'current'"
|
|
|
|
|
- class="report-maintain-btn"
|
|
|
|
|
- @click="handleFarmInfoMaintain"
|
|
|
|
|
- >
|
|
|
|
|
- <img class="report-maintain-icon" src="@/assets/img/common/info.png" alt="" />
|
|
|
|
|
- <span>{{ t("weather.farmInfoMaintain") }}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
<!-- 农场筛选 -->
|
|
<!-- 农场筛选 -->
|
|
|
<div class="farm-filter" v-show="activeGarden === 'list'">
|
|
<div class="farm-filter" v-show="activeGarden === 'list'">
|
|
|
<div class="filter-l">
|
|
<div class="filter-l">
|
|
@@ -109,7 +110,7 @@ import { ref, onActivated, computed } from "vue";
|
|
|
import weatherChart from "./weatherChart.vue";
|
|
import weatherChart from "./weatherChart.vue";
|
|
|
import { useRouter } from "vue-router";
|
|
import { useRouter } from "vue-router";
|
|
|
import { useStore } from "vuex";
|
|
import { useStore } from "vuex";
|
|
|
-import { Search } from '@element-plus/icons-vue';
|
|
|
|
|
|
|
+import { Edit, Search } from '@element-plus/icons-vue';
|
|
|
import { convertPointToArray } from "@/utils/index";
|
|
import { convertPointToArray } from "@/utils/index";
|
|
|
import { useI18n } from "@/i18n";
|
|
import { useI18n } from "@/i18n";
|
|
|
|
|
|
|
@@ -132,9 +133,9 @@ const props = defineProps({
|
|
|
reportTabs: {
|
|
reportTabs: {
|
|
|
type: Array,
|
|
type: Array,
|
|
|
default: () => [
|
|
default: () => [
|
|
|
- { key: "historyRisk", label: "历史风险报告" },
|
|
|
|
|
- { key: "soilImprovement", label: "土壤改良" },
|
|
|
|
|
- { key: "rotationAdvice", label: "轮作建议" },
|
|
|
|
|
|
|
+ { key: "historyRisk", label: "历史气象灾害" },
|
|
|
|
|
+ { key: "soilImprovement", label: "土壤问题研判" },
|
|
|
|
|
+ { key: "rotationAdvice", label: "种植轮作建议" },
|
|
|
],
|
|
],
|
|
|
},
|
|
},
|
|
|
from: {
|
|
from: {
|
|
@@ -158,8 +159,16 @@ const typeOptions = ref([{
|
|
|
value: '1'
|
|
value: '1'
|
|
|
}]);
|
|
}]);
|
|
|
|
|
|
|
|
|
|
+const REPORT_TAB_ICONS = [
|
|
|
|
|
+ require("@/assets/img/common/header-icon-1.png"),
|
|
|
|
|
+ require("@/assets/img/common/header-icon-2.png"),
|
|
|
|
|
+ require("@/assets/img/common/header-icon-3.png"),
|
|
|
|
|
+];
|
|
|
|
|
+
|
|
|
|
|
+const getReportTabIcon = (index) => REPORT_TAB_ICONS[index] || REPORT_TAB_ICONS[0];
|
|
|
|
|
+
|
|
|
// 定义emit事件
|
|
// 定义emit事件
|
|
|
-const emit = defineEmits(['weatherExpanded', 'changeGarden', 'changeGardenTab', 'closeTabMask', 'reportTabClick', 'farmInfoMaintain']);
|
|
|
|
|
|
|
+const emit = defineEmits(['weatherExpanded', 'changeGarden', 'changeGardenTab', 'closeTabMask', 'reportTabClick']);
|
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
|
|
|
|
|
|
const isExpanded = ref(false);
|
|
const isExpanded = ref(false);
|
|
@@ -206,11 +215,6 @@ const handleGardenClick = (type) => {
|
|
|
emit("changeGardenTab", type);
|
|
emit("changeGardenTab", type);
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-const handleFarmInfoMaintain = () => {
|
|
|
|
|
- if (!farmId.value) return;
|
|
|
|
|
- emit('farmInfoMaintain', farmId.value);
|
|
|
|
|
-};
|
|
|
|
|
-
|
|
|
|
|
const locationName = ref("");
|
|
const locationName = ref("");
|
|
|
const weatherData = ref(null);
|
|
const weatherData = ref(null);
|
|
|
const currentWeather = ref({ temp: "--", text: "--", iconDay: "" });
|
|
const currentWeather = ref({ temp: "--", text: "--", iconDay: "" });
|
|
@@ -351,30 +355,6 @@ defineExpose({
|
|
|
&.no-weather {
|
|
&.no-weather {
|
|
|
height: auto;
|
|
height: auto;
|
|
|
position: relative;
|
|
position: relative;
|
|
|
-
|
|
|
|
|
- .report-maintain-btn {
|
|
|
|
|
- position: fixed;
|
|
|
|
|
- right: -5px;
|
|
|
|
|
- bottom: 10px;
|
|
|
|
|
- z-index: 13;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- gap: 4px;
|
|
|
|
|
- padding: 7px 10px;
|
|
|
|
|
- background: #2199F8;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- border-radius: 20px 0 0 20px;
|
|
|
|
|
- font-size: 11px;
|
|
|
|
|
- line-height: 1;
|
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
-
|
|
|
|
|
- .report-maintain-icon {
|
|
|
|
|
- width: 14px;
|
|
|
|
|
- height: 14px;
|
|
|
|
|
- filter: brightness(0) invert(1);
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&.no-farm {
|
|
&.no-farm {
|
|
@@ -520,19 +500,33 @@ defineExpose({
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- gap: 4px;
|
|
|
|
|
- padding: 10px 9px 6px;
|
|
|
|
|
|
|
+ gap: 7px;
|
|
|
|
|
+ padding: 8px 10px 10px;
|
|
|
background: #fff;
|
|
background: #fff;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
.report-tab-item {
|
|
.report-tab-item {
|
|
|
- padding: 5px 7px;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ gap: 5px;
|
|
|
|
|
+ padding: 5px 8px;
|
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
|
- color: #777777;
|
|
|
|
|
- background: rgba(255, 255, 255, 0.1);
|
|
|
|
|
|
|
+ color: #5A5A5A;
|
|
|
border: 0.5px solid rgba(180, 180, 180, 0.4);
|
|
border: 0.5px solid rgba(180, 180, 180, 0.4);
|
|
|
- border-radius: 2px;
|
|
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+
|
|
|
|
|
+ .report-tab-icon {
|
|
|
|
|
+ width: 14px;
|
|
|
|
|
+ height: 14px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .report-tab-label {
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -567,6 +561,15 @@ defineExpose({
|
|
|
// background: linear-gradient(180deg, #89CBFF 0%, #2199F8 100%);
|
|
// background: linear-gradient(180deg, #89CBFF 0%, #2199F8 100%);
|
|
|
&.left-item {
|
|
&.left-item {
|
|
|
padding-left: 10px;
|
|
padding-left: 10px;
|
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
|
+
|
|
|
|
|
+ .farm-edit-icon {
|
|
|
|
|
+ width: 16px;
|
|
|
|
|
+ height: 16px;
|
|
|
|
|
+ color: #2199F8;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ margin-left: 2px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&.right-item {
|
|
&.right-item {
|