|
|
@@ -1,128 +1,123 @@
|
|
|
<template>
|
|
|
- <div class="chart-list">
|
|
|
- <div class="chart-item weather-item">
|
|
|
- <chart-box name="气象预警">
|
|
|
- <template #title-right>
|
|
|
- <div class="button-group">
|
|
|
- <div class="button" style="width: auto;" @click="deepseek">AI大脑</div>
|
|
|
- <div class="button" style="width: auto;" @click="syxcx">溯源小程序</div>
|
|
|
- <div class="button" style="width: auto;" @click="sypt">溯源平台</div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <div class="base-wrap">
|
|
|
- <div class="base-item" v-for="(item, index) in baseData.labels" :key="index">
|
|
|
- <div class="label">{{ item }}风险</div>
|
|
|
- <div class="value">{{ baseData.valueMaxList[index].toFixed(0) }}<span>%</span></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- <one-line-chart class="line-chart" :yData="lineYdata" :minData="minData"></one-line-chart> -->
|
|
|
- <weatherChart class="line-chart"></weatherChart>
|
|
|
- </chart-box>
|
|
|
+ <div class="chart-list">
|
|
|
+ <div class="chart-item weather-item">
|
|
|
+ <chart-box name="气象预警">
|
|
|
+ <template #title-right>
|
|
|
+ <div class="button" @click="gybg">溯源报告</div>
|
|
|
+ </template>
|
|
|
+ <div class="base-wrap">
|
|
|
+ <div class="base-item" v-for="(item, index) in baseData.labels" :key="index">
|
|
|
+ <div class="label">{{ item }}风险</div>
|
|
|
+ <div class="value">{{ baseData.valueMaxList[index].toFixed(0) }}<span>%</span></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <!-- <div class="chart-item phenology">-->
|
|
|
- <!-- <chart-box name="基本指标">-->
|
|
|
- <!-- <template #title-right>-->
|
|
|
- <!-- <tabs :list="btnGroup"></tabs>-->
|
|
|
- <!-- </template>-->
|
|
|
- <!-- <!– <bar-chart class="bar-chart" styleName="styleName3" :xData="phenologyXData" :yData="phenologyYData"></bar-chart>-->
|
|
|
- <!-- <div class="tips box-bg">-->
|
|
|
- <!-- <div class="text" v-for="item in 3" :key="item">-->
|
|
|
- <!-- 桂味：<span>占比30％，分布在2区、5区</span>-->
|
|
|
- <!-- </div>-->
|
|
|
- <!-- </div> –>-->
|
|
|
- <!-- <div class="box-flex">-->
|
|
|
- <!-- <div class="box-card">-->
|
|
|
- <!-- <div class="box-desc">当前分区无品种信息，请确权</div>-->
|
|
|
- <!-- <div class="box-button" @click="handlePage">立即确权</div>-->
|
|
|
- <!-- </div>-->
|
|
|
- <!-- </div>-->
|
|
|
- <!-- </chart-box>-->
|
|
|
- <!-- </div>-->
|
|
|
- <!-- <div class="chart-item phenology">
|
|
|
- <chart-box name="物候指标">
|
|
|
- <template #title-right>
|
|
|
- <tabs :list="phenologyObj.btnGroup" keyStr="物候指标" :active="activeKey"></tabs>
|
|
|
- </template>
|
|
|
- <bar-chart
|
|
|
- class="bar-chart"
|
|
|
- styleName="styleName1"
|
|
|
- :xData="phenologyObj.xData"
|
|
|
- :yData="phenologyObj.yData"
|
|
|
- ></bar-chart>
|
|
|
- <div class="tips box-bg">
|
|
|
- <div class="text" v-for="(item, index) in phenologyObj.text" :key="index">
|
|
|
- {{ item[0] }}：<span>{{ item[1] }}{{ item[2] }}，占比{{ item[3] }}％</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </chart-box>
|
|
|
- </div> -->
|
|
|
- <div class="chart-item phenology">
|
|
|
- <chart-box name="生态指标">
|
|
|
- <template #title-right>
|
|
|
- <tabs :list="ecologyObj.btnGroup" keyStr="生态指标" :active="activeKey"></tabs>
|
|
|
- </template>
|
|
|
- <bar-chart
|
|
|
- class="bar-chart"
|
|
|
- styleName="styleName1"
|
|
|
- :xData="ecologyObj.xData"
|
|
|
- :yData="ecologyObj.yData"
|
|
|
- ></bar-chart>
|
|
|
- <div class="tips box-bg">
|
|
|
- <div class="text" v-for="(item, index) in ecologyObj.text" :key="index">
|
|
|
- {{ item.key }}：<span>{{ item.val }}</span>
|
|
|
- </div>
|
|
|
+ <!-- <one-line-chart class="line-chart" :yData="lineYdata" :minData="minData"></one-line-chart> -->
|
|
|
+ <weatherChart class="line-chart"></weatherChart>
|
|
|
+ </chart-box>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="chart-item phenology">-->
|
|
|
+ <!-- <chart-box name="基本指标">-->
|
|
|
+ <!-- <template #title-right>-->
|
|
|
+ <!-- <tabs :list="btnGroup"></tabs>-->
|
|
|
+ <!-- </template>-->
|
|
|
+ <!-- <!– <bar-chart class="bar-chart" styleName="styleName3" :xData="phenologyXData" :yData="phenologyYData"></bar-chart>-->
|
|
|
+ <!-- <div class="tips box-bg">-->
|
|
|
+ <!-- <div class="text" v-for="item in 3" :key="item">-->
|
|
|
+ <!-- 桂味：<span>占比30％，分布在2区、5区</span>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div> –>-->
|
|
|
+ <!-- <div class="box-flex">-->
|
|
|
+ <!-- <div class="box-card">-->
|
|
|
+ <!-- <div class="box-desc">当前分区无品种信息，请确权</div>-->
|
|
|
+ <!-- <div class="box-button" @click="handlePage">立即确权</div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </chart-box>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="chart-item phenology">
|
|
|
+ <chart-box name="物候指标">
|
|
|
+ <template #title-right>
|
|
|
+ <tabs :list="phenologyObj.btnGroup" keyStr="物候指标" :active="activeKey"></tabs>
|
|
|
+ </template>
|
|
|
+ <bar-chart
|
|
|
+ class="bar-chart"
|
|
|
+ styleName="styleName1"
|
|
|
+ :xData="phenologyObj.xData"
|
|
|
+ :yData="phenologyObj.yData"
|
|
|
+ ></bar-chart>
|
|
|
+ <div class="tips box-bg">
|
|
|
+ <div class="text" v-for="(item, index) in phenologyObj.text" :key="index">
|
|
|
+ {{ item[0] }}：<span>{{ item[1] }}{{ item[2] }}，占比{{ item[3] }}％</span>
|
|
|
</div>
|
|
|
- </chart-box>
|
|
|
+ </div>
|
|
|
+ </chart-box>
|
|
|
+ </div> -->
|
|
|
+ <div class="chart-item phenology">
|
|
|
+ <chart-box name="生态指标">
|
|
|
+ <template #title-right>
|
|
|
+ <tabs :list="ecologyObj.btnGroup" keyStr="生态指标" :active="activeKey"></tabs>
|
|
|
+ </template>
|
|
|
+ <bar-chart
|
|
|
+ class="bar-chart"
|
|
|
+ styleName="styleName1"
|
|
|
+ :xData="ecologyObj.xData"
|
|
|
+ :yData="ecologyObj.yData"
|
|
|
+ ></bar-chart>
|
|
|
+ <div class="tips box-bg">
|
|
|
+ <div class="text" v-for="(item, index) in ecologyObj.text" :key="index">
|
|
|
+ {{ item.key }}：<span>{{ item.val }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="chart-item evaluate">
|
|
|
- <chart-box name="生长指标">
|
|
|
- <template #title-right>
|
|
|
- <tabs :list="growObj.btnGroup" keyStr="生长指标" :active="activeKey"></tabs>
|
|
|
- </template>
|
|
|
- <div class="content">
|
|
|
- <bar-chart
|
|
|
- style="width: 52%"
|
|
|
- styleName="styleName1"
|
|
|
- :xData="growObj.xData"
|
|
|
- :yData="growObj.yData"
|
|
|
- ></bar-chart>
|
|
|
- <div class="box-bg text" v-for="(item, index) in growObj.text" :key="index">
|
|
|
- <div class="txt">
|
|
|
- {{ item.key }}：<span>{{ item.val }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- <div class="text-list box-bg">
|
|
|
- <div class="text-item" v-for="(item, index) in growObj.text" :key="index">
|
|
|
- <div class="circle"></div>
|
|
|
- <div class="txt">
|
|
|
- {{ item.key }}：<span>{{ item.val }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
- </chart-box>
|
|
|
+ </chart-box>
|
|
|
+ </div>
|
|
|
+ <div class="chart-item evaluate">
|
|
|
+ <chart-box name="生长指标">
|
|
|
+ <template #title-right>
|
|
|
+ <tabs :list="growObj.btnGroup" keyStr="生长指标" :active="activeKey"></tabs>
|
|
|
+ </template>
|
|
|
+ <div class="content">
|
|
|
+ <bar-chart
|
|
|
+ style="width: 52%"
|
|
|
+ styleName="styleName1"
|
|
|
+ :xData="growObj.xData"
|
|
|
+ :yData="growObj.yData"
|
|
|
+ ></bar-chart>
|
|
|
+ <div class="box-bg text" v-for="(item, index) in growObj.text" :key="index">
|
|
|
+ <div class="txt">
|
|
|
+ {{ item.key }}：<span>{{ item.val }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="chart-item phenology">
|
|
|
- <chart-box name="病虫指标">
|
|
|
- <template #title-right>
|
|
|
- <tabs :list="diseasesObj.btnGroup" keyStr="病虫指标" :active="activeKey"></tabs>
|
|
|
- </template>
|
|
|
- <bar-chart
|
|
|
- class="bar-chart"
|
|
|
- styleName="styleName1"
|
|
|
- :xData="diseasesObj.xData"
|
|
|
- :yData="diseasesObj.yData"
|
|
|
- ></bar-chart>
|
|
|
- <div class="tips box-bg">
|
|
|
- <div class="text" v-for="(item, index) in diseasesObj.text" :key="index">
|
|
|
- {{ item.key }}：<span>{{ item.val }}</span>
|
|
|
- </div>
|
|
|
+ <!-- <div class="text-list box-bg">
|
|
|
+ <div class="text-item" v-for="(item, index) in growObj.text" :key="index">
|
|
|
+ <div class="circle"></div>
|
|
|
+ <div class="txt">
|
|
|
+ {{ item.key }}：<span>{{ item.val }}</span>
|
|
|
</div>
|
|
|
- </chart-box>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ </chart-box>
|
|
|
+ </div>
|
|
|
+ <div class="chart-item phenology">
|
|
|
+ <chart-box name="病虫指标">
|
|
|
+ <template #title-right>
|
|
|
+ <tabs :list="diseasesObj.btnGroup" keyStr="病虫指标" :active="activeKey"></tabs>
|
|
|
+ </template>
|
|
|
+ <bar-chart
|
|
|
+ class="bar-chart"
|
|
|
+ styleName="styleName1"
|
|
|
+ :xData="diseasesObj.xData"
|
|
|
+ :yData="diseasesObj.yData"
|
|
|
+ ></bar-chart>
|
|
|
+ <div class="tips box-bg">
|
|
|
+ <div class="text" v-for="(item, index) in diseasesObj.text" :key="index">
|
|
|
+ {{ item.key }}：<span>{{ item.val }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <ImageDialog></ImageDialog>
|
|
|
- <PhoneIframe @close="phoneIframeShow=false" :h5PageUrl="'https://feiniao-mini-h5-dev.sysuimars.cn/youwei-mini/#/ecology_report?token=69bc8bc3-bf34-46ab-b2c4-420c65265895&farmId=80865&isNyt=1&&point=113.11703233506944%2C31.0088427734375'" v-if="phoneIframeShow"></PhoneIframe>
|
|
|
+ </chart-box>
|
|
|
</div>
|
|
|
+ <ImageDialog></ImageDialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
@@ -136,123 +131,121 @@ import eventBus from "@/api/eventBus";
|
|
|
import { useStore } from "vuex";
|
|
|
import { useRouter } from "vue-router";
|
|
|
import ImageDialog from "../../../components/ImageDialog";
|
|
|
-import PhoneIframe from "./phone_iframe/PhoneIframe.vue";
|
|
|
const store = useStore();
|
|
|
const router = useRouter();
|
|
|
|
|
|
const baseData = ref({});
|
|
|
const minData = ref([]);
|
|
|
const lineYdata = ref([]);
|
|
|
-const phoneIframeShow = ref(false);
|
|
|
|
|
|
const getBaseData = () => {
|
|
|
- const point = sessionStorage.getItem("point");
|
|
|
- const farmId = sessionStorage.getItem("farmId");
|
|
|
- VE_API.mini_farm.weather_warning_land_check({ farmId,point }).then((res) => {
|
|
|
- baseData.value = res.data || {};
|
|
|
- });
|
|
|
+ const point = sessionStorage.getItem("point");
|
|
|
+ const farmId = sessionStorage.getItem("farmId");
|
|
|
+ VE_API.mini_farm.weather_warning_land_check({ farmId,point }).then((res) => {
|
|
|
+ baseData.value = res.data || {};
|
|
|
+ });
|
|
|
|
|
|
- // 获取气象图表数据
|
|
|
- // VE_API.mini_farm.gardenItemChart({point}).then(res =>{
|
|
|
- // console.log('tq', res.data)
|
|
|
- // minData.value = res.data.weatherData.map(item =>item.tempMin)
|
|
|
- // lineYdata.value = res.data.weatherData.map(item =>item.tempMax)
|
|
|
- // })
|
|
|
+ // 获取气象图表数据
|
|
|
+ // VE_API.mini_farm.gardenItemChart({point}).then(res =>{
|
|
|
+ // console.log('tq', res.data)
|
|
|
+ // minData.value = res.data.weatherData.map(item =>item.tempMin)
|
|
|
+ // lineYdata.value = res.data.weatherData.map(item =>item.tempMax)
|
|
|
+ // })
|
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
|
- //选项子项监听事件
|
|
|
- eventBus.on("handleTabItem", handleTabItem);
|
|
|
- eventBus.on("handleActive", handleActive);
|
|
|
- eventBus.on("area:id", areaId);
|
|
|
+ //选项子项监听事件
|
|
|
+ eventBus.on("handleTabItem", handleTabItem);
|
|
|
+ eventBus.on("handleActive", handleActive);
|
|
|
+ eventBus.on("area:id", areaId);
|
|
|
});
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
- eventBus.off("handleTabItem", handleTabItem);
|
|
|
- eventBus.off("handleActive", handleActive);
|
|
|
- eventBus.off("area:id", areaId);
|
|
|
+ eventBus.off("handleTabItem", handleTabItem);
|
|
|
+ eventBus.off("handleActive", handleActive);
|
|
|
+ eventBus.off("area:id", areaId);
|
|
|
});
|
|
|
|
|
|
const reportData = ref([]);
|
|
|
|
|
|
const curIndex = ref(0);
|
|
|
const handleActive = ({ index, key, isFile }) => {
|
|
|
- if (index === -1) return;
|
|
|
- if (isFile) return
|
|
|
- curIndex.value = index;
|
|
|
- if (key === "物候指标") {
|
|
|
- phenologyObj.value = handleData("物候指标");
|
|
|
- }
|
|
|
- if (key === "病虫指标") {
|
|
|
- diseasesObj.value = handleData("病虫指标");
|
|
|
- }
|
|
|
- if (key === "生长指标") {
|
|
|
- growObj.value = handleData("生长指标");
|
|
|
- }
|
|
|
- if (key === "生态指标") {
|
|
|
- ecologyObj.value = handleData("生态指标");
|
|
|
- }
|
|
|
+ if (index === -1) return;
|
|
|
+ if (isFile) return
|
|
|
+ curIndex.value = index;
|
|
|
+ if (key === "物候指标") {
|
|
|
+ phenologyObj.value = handleData("物候指标");
|
|
|
+ }
|
|
|
+ if (key === "病虫指标") {
|
|
|
+ diseasesObj.value = handleData("病虫指标");
|
|
|
+ }
|
|
|
+ if (key === "生长指标") {
|
|
|
+ growObj.value = handleData("生长指标");
|
|
|
+ }
|
|
|
+ if (key === "生态指标") {
|
|
|
+ ecologyObj.value = handleData("生态指标");
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
const menuList = ref([]);
|
|
|
function handleData(name, isChange = true) {
|
|
|
- console.log('handleData', name);
|
|
|
- const arr = reportData.value.filter((item) => item.key === name);
|
|
|
- const source = arr[0].obj;
|
|
|
+ console.log('handleData', name);
|
|
|
+ const arr = reportData.value.filter((item) => item.key === name);
|
|
|
+ const source = arr[0].obj;
|
|
|
|
|
|
- let nameArr = [];
|
|
|
- let valueArr = [];
|
|
|
- const statItem = source.geoHashSampleStat[curIndex.value];
|
|
|
- nameArr = source.legendList.find((legendSubItem) => legendSubItem.key === statItem.key);
|
|
|
- valueArr = nameArr.list.map((legendSubItem) => statItem.obj[legendSubItem.val] || 0);
|
|
|
+ let nameArr = [];
|
|
|
+ let valueArr = [];
|
|
|
+ const statItem = source.geoHashSampleStat[curIndex.value];
|
|
|
+ nameArr = source.legendList.find((legendSubItem) => legendSubItem.key === statItem.key);
|
|
|
+ valueArr = nameArr.list.map((legendSubItem) => statItem.obj[legendSubItem.val] || 0);
|
|
|
|
|
|
- const obj = {
|
|
|
- // btnGroup: source.titleList,
|
|
|
- btnGroup: source.geoHashSampleStat.map((item) => item.key),
|
|
|
- xData: nameArr.list.map((item) => item.name),
|
|
|
- yData: valueArr,
|
|
|
- text: [source.list2[curIndex.value]],
|
|
|
- content: source.text,
|
|
|
- };
|
|
|
- menuList.value.push({
|
|
|
- name,
|
|
|
- btnGroup: source.geoHashSampleStat.map((item) => item.key),
|
|
|
- legend: source.geoHashSampleList.find((sample) => sample.key === statItem.key),
|
|
|
- colorObj: nameArr
|
|
|
- });
|
|
|
- if (isChange) {
|
|
|
- eventBus.emit("changePointType", {legend: source.geoHashSampleList.find((sample) => sample.key === statItem.key), colorObj: nameArr})
|
|
|
- eventBus.emit("changePointLegend", {legend: source.geoHashSampleList.find((sample) => sample.key === statItem.key), colorObj: nameArr})
|
|
|
- console.log(' menuList.value', menuList.value);
|
|
|
- }
|
|
|
- return obj;
|
|
|
+ const obj = {
|
|
|
+ // btnGroup: source.titleList,
|
|
|
+ btnGroup: source.geoHashSampleStat.map((item) => item.key),
|
|
|
+ xData: nameArr.list.map((item) => item.name),
|
|
|
+ yData: valueArr,
|
|
|
+ text: [source.list2[curIndex.value]],
|
|
|
+ content: source.text,
|
|
|
+ };
|
|
|
+ menuList.value.push({
|
|
|
+ name,
|
|
|
+ btnGroup: source.geoHashSampleStat.map((item) => item.key),
|
|
|
+ legend: source.geoHashSampleList.find((sample) => sample.key === statItem.key),
|
|
|
+ colorObj: nameArr
|
|
|
+ });
|
|
|
+ if (isChange) {
|
|
|
+ eventBus.emit("changePointType", {legend: source.geoHashSampleList.find((sample) => sample.key === statItem.key), colorObj: nameArr})
|
|
|
+ eventBus.emit("changePointLegend", {legend: source.geoHashSampleList.find((sample) => sample.key === statItem.key), colorObj: nameArr})
|
|
|
+ console.log(' menuList.value', menuList.value);
|
|
|
+ }
|
|
|
+ return obj;
|
|
|
}
|
|
|
|
|
|
function areaId({ areaId, farmId }) {
|
|
|
- menuList.value = []
|
|
|
- getReoprt(areaId, farmId);
|
|
|
- getBaseData();
|
|
|
+ menuList.value = []
|
|
|
+ getReoprt(areaId, farmId);
|
|
|
+ getBaseData();
|
|
|
}
|
|
|
|
|
|
const getReoprt = (areaId, farmId) => {
|
|
|
- VE_API.home.farmIndexReport({ farmId, regionId: areaId }).then((res) => {
|
|
|
- reportData.value = res.data || [];
|
|
|
- // phenologyObj.value = handleData("物候指标");
|
|
|
- diseasesObj.value = handleData("病虫指标", false);
|
|
|
- growObj.value = handleData("生长指标", false);
|
|
|
- ecologyObj.value = handleData("生态指标", false);
|
|
|
- store.commit("home/SET_MAIN_MENU", menuList.value);
|
|
|
- console.log('commitcommitcommit', menuList.value);
|
|
|
- });
|
|
|
+ VE_API.home.farmIndexReport({ farmId, regionId: areaId }).then((res) => {
|
|
|
+ reportData.value = res.data || [];
|
|
|
+ // phenologyObj.value = handleData("物候指标");
|
|
|
+ diseasesObj.value = handleData("病虫指标", false);
|
|
|
+ growObj.value = handleData("生长指标", false);
|
|
|
+ ecologyObj.value = handleData("生态指标", false);
|
|
|
+ store.commit("home/SET_MAIN_MENU", menuList.value);
|
|
|
+ console.log('commitcommitcommit', menuList.value);
|
|
|
+ });
|
|
|
};
|
|
|
|
|
|
const handlePage = () => {
|
|
|
- router.push("/variety_map");
|
|
|
+ router.push("/variety_map");
|
|
|
};
|
|
|
|
|
|
const activeKey = ref("");
|
|
|
function handleTabItem(e) {
|
|
|
- activeKey.value = e;
|
|
|
+ activeKey.value = e;
|
|
|
}
|
|
|
|
|
|
//基本指标
|
|
|
@@ -264,12 +257,12 @@ const phenologyObj = ref({});
|
|
|
// 病虫测报
|
|
|
const diseasesObj = ref({});
|
|
|
const phenologyYData1 = [
|
|
|
- {
|
|
|
- startNum: 0,
|
|
|
- endNum: 0,
|
|
|
- startColor: "#c6ab6b",
|
|
|
- endColor: "#4e442e",
|
|
|
- },
|
|
|
+ {
|
|
|
+ startNum: 0,
|
|
|
+ endNum: 0,
|
|
|
+ startColor: "#c6ab6b",
|
|
|
+ endColor: "#4e442e",
|
|
|
+ },
|
|
|
];
|
|
|
|
|
|
// 生长指标
|
|
|
@@ -279,204 +272,189 @@ const growObj = ref({});
|
|
|
const ecologyObj = ref({});
|
|
|
|
|
|
const gybg = () => {
|
|
|
- VE_API.farm_files.last({ farmId: sessionStorage.getItem("farmId"), key: "qcode" }).then(({ data }) => {
|
|
|
- eventBus.emit("homePage:image", { filename: data.path, title: "溯源报告" });
|
|
|
- });
|
|
|
+ VE_API.farm_files.last({ farmId: sessionStorage.getItem("farmId"), key: "qcode" }).then(({ data }) => {
|
|
|
+ eventBus.emit("homePage:image", { filename: data.path, title: "溯源报告" });
|
|
|
+ });
|
|
|
};
|
|
|
-const sypt = () => {
|
|
|
- window.open("https://foster-pc-vue.sysuimars.cn/#/auto_login");
|
|
|
-}
|
|
|
-const deepseek = () => {
|
|
|
- window.open("https://yuntan-pc.feiniaotech.com/#/auto_login");
|
|
|
-}
|
|
|
-const syxcx = () => {
|
|
|
- phoneIframeShow.value = true;
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.chart-list {
|
|
|
- width: calc(100% - 54px - 10px);
|
|
|
- height: 100%;
|
|
|
- padding: 8px 8px 8px 0;
|
|
|
- box-sizing: border-box;
|
|
|
- position: relative;
|
|
|
- overflow-y: auto;
|
|
|
+ width: calc(100% - 54px - 10px);
|
|
|
+ height: 100%;
|
|
|
+ padding: 8px 8px 8px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ overflow-y: auto;
|
|
|
|
|
|
- .chart-item {
|
|
|
- width: 100%;
|
|
|
- // height: calc(100% / 4.15);
|
|
|
- height: 228px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-bottom: 10px;
|
|
|
- &.weather-item {
|
|
|
- height: 260px;
|
|
|
- }
|
|
|
- .box-flex {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- .box-card {
|
|
|
- background: rgba(255, 255, 255, 0.1);
|
|
|
- border-radius: 5px;
|
|
|
- width: 292px;
|
|
|
- height: 92px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
- .box-desc {
|
|
|
- font-size: 16px;
|
|
|
- font-family: "PangMenZhengDao";
|
|
|
- margin-bottom: 8px;
|
|
|
- }
|
|
|
- .box-button {
|
|
|
- font-size: 13px;
|
|
|
- border-radius: 20px;
|
|
|
- padding: 3px 27px;
|
|
|
- cursor: pointer;
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.45);
|
|
|
- background: linear-gradient(180deg, #ffd887, #ed9e1e);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .button-group{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ .chart-item {
|
|
|
+ width: 100%;
|
|
|
+ // height: calc(100% / 4.15);
|
|
|
+ height: 228px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ &.weather-item {
|
|
|
+ height: 260px;
|
|
|
+ }
|
|
|
+ .box-flex {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .box-card {
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border-radius: 5px;
|
|
|
+ width: 292px;
|
|
|
+ height: 92px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ .box-desc {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: "PangMenZhengDao";
|
|
|
+ margin-bottom: 8px;
|
|
|
}
|
|
|
- .button {
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
- border-radius: 4px;
|
|
|
- padding: 2px 2px;
|
|
|
- margin-left: 2px;
|
|
|
- cursor: pointer;
|
|
|
+ .box-button {
|
|
|
+ font-size: 13px;
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 3px 27px;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.45);
|
|
|
+ background: linear-gradient(180deg, #ffd887, #ed9e1e);
|
|
|
}
|
|
|
- &.chart-item:last-child {
|
|
|
- margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .button {
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 2px 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ &.chart-item:last-child {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .base-wrap {
|
|
|
+ width: 100%;
|
|
|
+ height: 56px;
|
|
|
+ margin-top: 4px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ .base-item {
|
|
|
+ width: 110px;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #f3c11d;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 12px;
|
|
|
+ background: url("@/assets/images/home/scale-bg.png") no-repeat center center / 100% 100%;
|
|
|
+ .label {
|
|
|
+ width: 85px;
|
|
|
+ height: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ color: #fff;
|
|
|
+ background: url("@/assets/images/home/label-bg.png") no-repeat center center / 100% 100%;
|
|
|
}
|
|
|
- .base-wrap {
|
|
|
- width: 100%;
|
|
|
- height: 56px;
|
|
|
- margin-top: 4px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-evenly;
|
|
|
- .base-item {
|
|
|
- width: 110px;
|
|
|
- height: 100%;
|
|
|
- font-size: 12px;
|
|
|
- text-align: center;
|
|
|
- box-sizing: border-box;
|
|
|
- color: #f3c11d;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- margin: 0 12px;
|
|
|
- background: url("@/assets/images/home/scale-bg.png") no-repeat center center / 100% 100%;
|
|
|
- .label {
|
|
|
- width: 85px;
|
|
|
- height: 16px;
|
|
|
- line-height: 16px;
|
|
|
- color: #fff;
|
|
|
- background: url("@/assets/images/home/label-bg.png") no-repeat center center / 100% 100%;
|
|
|
- }
|
|
|
- .value {
|
|
|
- font-size: 18px;
|
|
|
- font-family: "PangMenZhengDao";
|
|
|
- span {
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .value {
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: "PangMenZhengDao";
|
|
|
+ span {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
}
|
|
|
- .line-chart {
|
|
|
- height: calc(100% - 56px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .line-chart {
|
|
|
+ height: calc(100% - 56px);
|
|
|
+ }
|
|
|
+ .box-bg {
|
|
|
+ border-radius: 2px 2px 0 0;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 3px 6px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: Arial, Helvetica, sans-serif;
|
|
|
+ overflow-y: auto;
|
|
|
+ background: linear-gradient(180deg, rgb(85, 85, 85, 0.4) 0%, rgb(35, 35, 35, 1) 100%);
|
|
|
+ .text {
|
|
|
+ position: relative;
|
|
|
+ padding-left: 10px;
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 8px;
|
|
|
+ width: 3px;
|
|
|
+ height: 3px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #fff;
|
|
|
}
|
|
|
- .box-bg {
|
|
|
- border-radius: 2px 2px 0 0;
|
|
|
- font-size: 12px;
|
|
|
- padding: 3px 6px;
|
|
|
- box-sizing: border-box;
|
|
|
- font-family: Arial, Helvetica, sans-serif;
|
|
|
- overflow-y: auto;
|
|
|
- background: linear-gradient(180deg, rgb(85, 85, 85, 0.4) 0%, rgb(35, 35, 35, 1) 100%);
|
|
|
- .text {
|
|
|
- position: relative;
|
|
|
- padding-left: 10px;
|
|
|
- &::before {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 8px;
|
|
|
- width: 3px;
|
|
|
- height: 3px;
|
|
|
- border-radius: 50%;
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
- span {
|
|
|
- color: rgba(255, 255, 255, 0.4);
|
|
|
- line-height: 1.7;
|
|
|
- }
|
|
|
- }
|
|
|
+ span {
|
|
|
+ color: rgba(255, 255, 255, 0.4);
|
|
|
+ line-height: 1.7;
|
|
|
}
|
|
|
- &.phenology {
|
|
|
- .bar-chart {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 75px);
|
|
|
- }
|
|
|
- .tips {
|
|
|
- margin-top: 10px;
|
|
|
- width: 100%;
|
|
|
- height: 65px;
|
|
|
- }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.phenology {
|
|
|
+ .bar-chart {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 75px);
|
|
|
+ }
|
|
|
+ .tips {
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: 65px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.evaluate {
|
|
|
+ height: 220px;
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 10px);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 10px;
|
|
|
+ .text {
|
|
|
+ font-weight: 400;
|
|
|
+ padding: 8px 0 4px 5px;
|
|
|
+ text-indent: 2em;
|
|
|
+ margin-left: 8px;
|
|
|
+ span {
|
|
|
+ color: #ffd489;
|
|
|
+ }
|
|
|
}
|
|
|
- &.evaluate {
|
|
|
- height: 220px;
|
|
|
- .content {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 10px);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 10px;
|
|
|
- .text {
|
|
|
- font-weight: 400;
|
|
|
- padding: 8px 0 4px 5px;
|
|
|
- text-indent: 2em;
|
|
|
- margin-left: 8px;
|
|
|
- span {
|
|
|
- color: #ffd489;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .text-list {
|
|
|
- width: 100%;
|
|
|
- height: 33px;
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: space-between;
|
|
|
- .text-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ }
|
|
|
+ .text-list {
|
|
|
+ width: 100%;
|
|
|
+ height: 33px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ .text-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .circle {
|
|
|
- width: 4px;
|
|
|
- height: 4px;
|
|
|
- background: rgba(255, 255, 255, 0.44);
|
|
|
- border-radius: 50%;
|
|
|
- margin-right: 6px;
|
|
|
- }
|
|
|
- .txt {
|
|
|
- font-size: 12px;
|
|
|
- span {
|
|
|
- color: #ffd489;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .circle {
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ background: rgba(255, 255, 255, 0.44);
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ .txt {
|
|
|
+ font-size: 12px;
|
|
|
+ span {
|
|
|
+ color: #ffd489;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
