|
|
@@ -9,7 +9,12 @@
|
|
|
<div class="overview-file">
|
|
|
<div class="box-title">总体档案</div>
|
|
|
<div class="base-data">
|
|
|
- <div class="base-item" v-for="(item, index) in photoBaseData" :key="item.label" @click.stop="toggleFileItem(item.label, index)">
|
|
|
+ <div
|
|
|
+ class="base-item"
|
|
|
+ v-for="(item, index) in photoBaseData"
|
|
|
+ :key="item.label"
|
|
|
+ @click.stop="toggleFileItem(item.label, index)"
|
|
|
+ >
|
|
|
<span class="label">{{ item.label }}</span>
|
|
|
<div v-if="index === 0" class="value">
|
|
|
<el-select
|
|
|
@@ -17,7 +22,7 @@
|
|
|
size="small"
|
|
|
@change="changeSelect"
|
|
|
class="type-select"
|
|
|
- >
|
|
|
+ >
|
|
|
<el-option
|
|
|
v-for="item in selectOptions"
|
|
|
:key="item.speciesItemId"
|
|
|
@@ -52,7 +57,9 @@
|
|
|
:class="{ active: activeOuput === item.name }"
|
|
|
>
|
|
|
<div class="item-name">{{ item.name }}</div>
|
|
|
- <div class="item-val">{{ item.value }}<span>{{ item.unit }}</span></div>
|
|
|
+ <div class="item-val">
|
|
|
+ {{ item.value }}<span>{{ item.unit }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -68,7 +75,9 @@
|
|
|
:class="{ active: activeOuput === item.name }"
|
|
|
>
|
|
|
<div class="item-name">{{ item.name }}</div>
|
|
|
- <div class="item-val">{{ item.value }}<span>{{ item.unit }}</span></div>
|
|
|
+ <div class="item-val">
|
|
|
+ {{ item.value }}<span>{{ item.unit }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -79,7 +88,7 @@
|
|
|
|
|
|
<script setup>
|
|
|
import eventBus from "@/api/eventBus";
|
|
|
-import { onMounted, ref, } from "vue";
|
|
|
+import { onMounted, ref } from "vue";
|
|
|
const outputBox = ref([
|
|
|
{ id: 1, name: "产量估计", field: "cl", value: "--", unit: "斤/亩" },
|
|
|
{ id: 2, name: "高质果率", field: "spgl", value: "--", unit: "%" },
|
|
|
@@ -89,7 +98,7 @@ const outputBox = ref([
|
|
|
const qualityBox = ref([
|
|
|
{ id: 5, name: "通风率", field: "tfl", value: "--", unit: "%" },
|
|
|
{ id: 6, name: "透光率", field: "tgl", value: "--", unit: "%" },
|
|
|
- { id: 7, name: "病虫等级", value: "--", unit: "" },
|
|
|
+ { id: 7, name: "病虫等级", value: "--", unit: "级" },
|
|
|
]);
|
|
|
|
|
|
const photoBaseData = ref([
|
|
|
@@ -112,91 +121,109 @@ const photoBaseData = ref([
|
|
|
]);
|
|
|
|
|
|
const photoList = ref([
|
|
|
- {key: "物候", statement: "--"},
|
|
|
- {key: "病虫", statement: "--"},
|
|
|
- {key: "异常", statement: "--"},
|
|
|
- {key: "农事", statement: "--"},
|
|
|
+ { key: "物候", statement: "--" },
|
|
|
+ { key: "病虫", statement: "--" },
|
|
|
+ { key: "异常", statement: "--" },
|
|
|
+ { key: "农事", statement: "--" },
|
|
|
]);
|
|
|
|
|
|
const activeOuput = ref(1);
|
|
|
|
|
|
// 品种
|
|
|
-const farmId = ref(null)
|
|
|
+const farmId = ref(null);
|
|
|
onMounted(() => {
|
|
|
-eventBus.off("area:id", toggleAreaId);
|
|
|
-eventBus.on("area:id", toggleAreaId);
|
|
|
-farmId.value = sessionStorage.getItem("farmId")
|
|
|
+ eventBus.off("area:id", toggleAreaId);
|
|
|
+ eventBus.on("area:id", toggleAreaId);
|
|
|
+ farmId.value = sessionStorage.getItem("farmId");
|
|
|
|
|
|
+ eventBus.off("changePointLegend", resetActive2);
|
|
|
+ eventBus.on("changePointLegend", resetActive2);
|
|
|
+ eventBus.off("changePointType", resetActive);
|
|
|
+ eventBus.on("changePointType", resetActive);
|
|
|
+});
|
|
|
|
|
|
-})
|
|
|
-const selectOptions = ref([])
|
|
|
-const getSpeciesItemList = (farmId,regionId) =>{
|
|
|
- VE_API.farm.getSpeciesItemList({farmId,regionId}).then(res =>{
|
|
|
- selectOptions.value = res.data
|
|
|
- selectOptions.value.unshift({speciesItemId:"0",speciesItemName:"全部"})
|
|
|
- photoBaseData.value[0].speciesItemId = res.data[0].speciesItemId
|
|
|
- })
|
|
|
+function resetActive({colorObj}) {
|
|
|
+ console.log('aaaaaaaaresetActive', colorObj);
|
|
|
+ activeOuput.value = colorObj.key;
|
|
|
}
|
|
|
+function resetActive2({colorObj}) {
|
|
|
+ console.log('bbbbbbhbresetActive', colorObj);
|
|
|
+ if (colorObj.name === "产量") {
|
|
|
+ activeOuput.value = "产量估计"
|
|
|
+ } else if (colorObj.name === "高质果率") {
|
|
|
+ activeOuput.value = "高质果率"
|
|
|
+ } else {
|
|
|
+ activeOuput.value = colorObj.key
|
|
|
+ }
|
|
|
+}
|
|
|
+const selectOptions = ref([]);
|
|
|
+const getSpeciesItemList = (farmId, regionId) => {
|
|
|
+ VE_API.farm.getSpeciesItemList({ farmId, regionId }).then((res) => {
|
|
|
+ selectOptions.value = res.data;
|
|
|
+ selectOptions.value.unshift({ speciesItemId: "0", speciesItemName: "全部" });
|
|
|
+ photoBaseData.value[0].speciesItemId = res.data[0].speciesItemId;
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
function changeSelect(e) {
|
|
|
- console.log('eee', e);
|
|
|
- setFileData(e)
|
|
|
+ console.log("eee", e);
|
|
|
+ setFileData(e);
|
|
|
}
|
|
|
|
|
|
function toggleFileItem(name, index) {
|
|
|
if (index !== 0) {
|
|
|
- toggleAcitve(name)
|
|
|
+ toggleAcitve(name);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
// 产量详情
|
|
|
function toggleAcitve(name, field) {
|
|
|
activeOuput.value = name;
|
|
|
- console.log('产量详情产量详情产量详情', name);
|
|
|
+ console.log("产量详情产量详情产量详情", name);
|
|
|
// eventBus.emit("change:mapPoint", name)
|
|
|
if (name === "透光率" || name === "通风率") {
|
|
|
- eventBus.emit('handleActive',{name,key:"生态指标",index: 1})
|
|
|
+ eventBus.emit("handleTabItem", name)
|
|
|
+ eventBus.emit("handleActive", { name, key: "生态指标", index: 1, isFile: name === "通风率" ? true : false });
|
|
|
// eventBus.emit('handleTab',"透光率")
|
|
|
} else {
|
|
|
- eventBus.emit("change:mapPoint", field)
|
|
|
+ eventBus.emit("change:mapPoint", field);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const regionId = ref(null)
|
|
|
+const regionId = ref(null);
|
|
|
function toggleAreaId({ areaId, farmId }) {
|
|
|
- regionId.value = areaId
|
|
|
- getSpeciesItemList(farmId, areaId)
|
|
|
- getFileData(farmId, areaId)
|
|
|
+ regionId.value = areaId;
|
|
|
+ getSpeciesItemList(farmId, areaId);
|
|
|
+ getFileData(farmId, areaId);
|
|
|
}
|
|
|
|
|
|
-const allTypeData = ref([])
|
|
|
-function getFileData(farmId,regionId) {
|
|
|
- VE_API.farm.getFarmFiles({farmId,regionId: regionId ? regionId: undefined}).then(({data}) =>{
|
|
|
- allTypeData.value = data
|
|
|
- setFileData(photoBaseData.value[0].speciesItemId)
|
|
|
- })
|
|
|
+const allTypeData = ref([]);
|
|
|
+function getFileData(farmId, regionId) {
|
|
|
+ VE_API.farm.getFarmFiles({ farmId, regionId: regionId ? regionId : undefined }).then(({ data }) => {
|
|
|
+ allTypeData.value = data;
|
|
|
+ setFileData(photoBaseData.value[0].speciesItemId);
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
function setFileData(type_id) {
|
|
|
- const res = allTypeData.value.find(item => item.type_id == type_id)
|
|
|
- photoBaseData.value[1].value = res.meta_info.avg_crown + "平方米"
|
|
|
- photoBaseData.value[2].value = res.meta_info.avg_branch_num
|
|
|
- photoBaseData.value[3].value = res.meta_info.avg_age + "年"
|
|
|
- photoList.value[0].key = res.meta_info.phenology_info.key
|
|
|
- photoList.value[0].statement = res.meta_info.phenology_info.statement
|
|
|
- photoList.value[1].key = res.meta_info.dp_alert_info.key
|
|
|
- photoList.value[1].statement = res.meta_info.dp_alert_info.statement
|
|
|
- photoList.value[2].key = res.meta_info.grow_alert_info.key
|
|
|
- photoList.value[2].statement = res.meta_info.grow_alert_info.statement
|
|
|
- photoList.value[3].key = res.meta_info.prescription_info.key
|
|
|
- photoList.value[3].statement = res.meta_info.prescription_info.statement
|
|
|
- outputBox.value[0].value = res.production_info.production
|
|
|
- outputBox.value[1].value = res.production_info.quality.toFixed(0)
|
|
|
- outputBox.value[2].value = res.production_info.cihua_ratio.toFixed(0)
|
|
|
- qualityBox.value[0].value = res.ecology_info.ventilation
|
|
|
- qualityBox.value[1].value = res.ecology_info.transmittance
|
|
|
- qualityBox.value[2].value = res.ecology_info.dp_situation
|
|
|
+ const res = allTypeData.value.find((item) => item.type_id == type_id);
|
|
|
+ photoBaseData.value[1].value = res.meta_info.avg_crown + "平方米";
|
|
|
+ photoBaseData.value[2].value = res.meta_info.avg_branch_num;
|
|
|
+ photoBaseData.value[3].value = res.meta_info.avg_age + "年";
|
|
|
+ photoList.value[0].key = res.meta_info.phenology_info.key;
|
|
|
+ photoList.value[0].statement = res.meta_info.phenology_info.statement;
|
|
|
+ photoList.value[1].key = res.meta_info.dp_alert_info.key;
|
|
|
+ photoList.value[1].statement = res.meta_info.dp_alert_info.statement;
|
|
|
+ photoList.value[2].key = res.meta_info.grow_alert_info.key;
|
|
|
+ photoList.value[2].statement = res.meta_info.grow_alert_info.statement;
|
|
|
+ photoList.value[3].key = res.meta_info.prescription_info.key;
|
|
|
+ photoList.value[3].statement = res.meta_info.prescription_info.statement;
|
|
|
+ outputBox.value[0].value = res.production_info.production;
|
|
|
+ outputBox.value[1].value = res.production_info.quality.toFixed(0);
|
|
|
+ outputBox.value[2].value = res.production_info.cihua_ratio.toFixed(0);
|
|
|
+ qualityBox.value[0].value = res.ecology_info.ventilation;
|
|
|
+ qualityBox.value[1].value = res.ecology_info.transmittance;
|
|
|
+ qualityBox.value[2].value = res.ecology_info.dp_situation;
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -282,11 +309,11 @@ function setFileData(type_id) {
|
|
|
::v-deep {
|
|
|
.el-select__wrapper {
|
|
|
background: rgba(247, 190, 90, 0.1);
|
|
|
- box-shadow: 0 0 0 1px #F7BE5A inset;
|
|
|
- color: #FFD489;
|
|
|
+ box-shadow: 0 0 0 1px #f7be5a inset;
|
|
|
+ color: #ffd489;
|
|
|
}
|
|
|
.el-select__placeholder {
|
|
|
- color: #FFD489;
|
|
|
+ color: #ffd489;
|
|
|
}
|
|
|
}
|
|
|
}
|
刘秀芳