|
@@ -1,591 +1,316 @@
|
|
|
<template>
|
|
|
- <view class="banner-wrap banner-five">
|
|
|
- <view class="title-wrap">
|
|
|
- <view class="title">标准农事体系</view>
|
|
|
- <view class="sub-title">看见营养好投入,见证安全高品质</view>
|
|
|
- </view>
|
|
|
- <view class="box-wrap" v-if="isFram">
|
|
|
- <view class="box-name">标准农事指数</view>
|
|
|
- <view class="circle-list">
|
|
|
- <view class="circle-item" v-for="(item, index) in boxList" :key="index">
|
|
|
- <qiun-data-charts
|
|
|
- :key=index
|
|
|
- type="arcbar"
|
|
|
- :opts="opts"
|
|
|
- :chartData="chartData"
|
|
|
- />
|
|
|
- <!-- <el-progress
|
|
|
- type="circle"
|
|
|
- :percentage="index ? baseData.yyAuthScore : baseData.stAuthScore"
|
|
|
- :stroke-width="8"
|
|
|
- :color="gradientColor"
|
|
|
- :width="85"
|
|
|
- >
|
|
|
- <template #default="{ percentage }">
|
|
|
- <view class="percentage-value">{{ percentage }}<span class="unit">分</span></view>
|
|
|
- <span class="percentage-label">{{ item.title }}</span>
|
|
|
- </template>
|
|
|
- </el-progress> -->
|
|
|
- </view>
|
|
|
- <view class="tips">注:生态认证体现生物药剂的使用情况,营养认证则反映有机肥和叶面肥等的使用情况</view>
|
|
|
- </view>
|
|
|
- <view class="box-list">
|
|
|
- <view class="box-item">
|
|
|
- <view class="box-title">
|
|
|
- <image class="title-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/box-icon.png" alt="" />
|
|
|
- <view class="text">
|
|
|
- <span>农事认证列表</span>
|
|
|
- <!-- <view class="more" @click="handleAll">
|
|
|
- <span>查看全部</span>
|
|
|
- <el-icon><ArrowRightBold /></el-icon>
|
|
|
- </view> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="tabs">
|
|
|
- <view
|
|
|
- class="tabs-item"
|
|
|
- :class="{ active: active === index }"
|
|
|
- v-for="(item, index) in baseData.periodList"
|
|
|
- :key="index"
|
|
|
- @click="handleActive(index)"
|
|
|
- >
|
|
|
- {{ item }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <farm-table :tableData="tableData"></farm-table>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="box-wrap" v-else>
|
|
|
- <view class="no-data">
|
|
|
- <span>您暂且没有认证<br />农事,请立即认证</span>
|
|
|
- <view class="btn">去认证</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="banner-wrap banner-five">
|
|
|
+ <view class="title-wrap">
|
|
|
+ <view class="title">标准农事体系</view>
|
|
|
+ <view class="sub-title">看见营养好投入,见证安全高品质</view>
|
|
|
+ </view>
|
|
|
+ <view class="box-wrap" v-if="isFram">
|
|
|
+ <view class="box-name">标准农事指数</view>
|
|
|
+ <view class="circle-list" v-if="chartData2">
|
|
|
+ <view class="circle-item">
|
|
|
+ <qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
|
|
|
+ </view>
|
|
|
+ <view class="circle-item">
|
|
|
+ <qiun-data-charts type="arcbar" :opts="opts2" :chartData="chartData2" />
|
|
|
+ </view>
|
|
|
+ <view class="tips">注:生态认证体现生物药剂的使用情况,营养认证则反映有机肥和叶面肥等的使用情况</view>
|
|
|
+ </view>
|
|
|
+ <view class="box-list">
|
|
|
+ <view class="box-item">
|
|
|
+ <view class="box-title">
|
|
|
+ <image class="title-img"
|
|
|
+ src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/box-icon.png" alt="" />
|
|
|
+ <view class="text">
|
|
|
+ <text>农事认证列表</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tabs" v-if="baseData?.periodList">
|
|
|
+ <view class="tabs-item" :class="{ active: active === index }"
|
|
|
+ v-for="(item, index) in baseData.periodList" :key="index" @click="handleActive(index)">
|
|
|
+ {{ item }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <farm-table :tableData="tableData"></farm-table>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="box-wrap" v-else>
|
|
|
+ <view class="no-data">
|
|
|
+ <text>您暂且没有认证<br />农事,请立即认证</text>
|
|
|
+ <view class="btn">去认证</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, watch } from "vue";
|
|
|
-import farmTable from "./farmTable.vue";
|
|
|
+ import {
|
|
|
+ ref,
|
|
|
+ watch
|
|
|
+ } from "vue";
|
|
|
+ import farmTable from "./farmTable.vue";
|
|
|
|
|
|
-const baseData = ref([
|
|
|
- {
|
|
|
- "authId": "714567289264934912",
|
|
|
- "images": [
|
|
|
- "https://birdseye-img.sysuimars.com/birdseye-look-mini/temp/1750693336419.jpg"
|
|
|
- ],
|
|
|
- "serviceMain": "广州泽秾丰农资有限公司",
|
|
|
- "stln": "有机无机搭配,促养分高效",
|
|
|
- "targetText": "促进果实膨大,提升商品品质。",
|
|
|
- "whjc": "膨果期",
|
|
|
- "farmId": 766,
|
|
|
- "farmWorkLibId": "708734452146114560",
|
|
|
- "farmWorkLibName": "壮果营养",
|
|
|
- "periodName": "果期",
|
|
|
- "score": 20,
|
|
|
- "shortName": "有机肥",
|
|
|
- "standard": "有机肥营养",
|
|
|
- "evidenceImgs": "123.png",
|
|
|
- "prescriptionObj": [
|
|
|
- {
|
|
|
- "brand": "未知",
|
|
|
- "name": "硝酸铵钙",
|
|
|
- "pfParam": "",
|
|
|
- "typeName": "营养",
|
|
|
- "usageMode": ""
|
|
|
- },
|
|
|
- {
|
|
|
- "brand": "未知",
|
|
|
- "name": "氯化钾",
|
|
|
- "pfParam": "",
|
|
|
- "typeName": "营养",
|
|
|
- "usageMode": ""
|
|
|
- },
|
|
|
- {
|
|
|
- "brand": "未知",
|
|
|
- "name": "硝酸镁",
|
|
|
- "pfParam": "",
|
|
|
- "typeName": "营养",
|
|
|
- "usageMode": ""
|
|
|
- }
|
|
|
- ],
|
|
|
- "status": 1,
|
|
|
- "isAuth": null,
|
|
|
- "farmName": "",
|
|
|
- "condition": "",
|
|
|
- "expertName": "韦帮稳",
|
|
|
- "expertPic": "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
|
|
|
- "nzName": "广州泽秾丰农资有限公司",
|
|
|
- "nfName": "飞鸟种植助手",
|
|
|
- "executeDate": "2025-05-01",
|
|
|
- "executeDate2": "2025-05-01"
|
|
|
- },
|
|
|
- {
|
|
|
- "authId": "714567288828727296",
|
|
|
- "images": [
|
|
|
- "https://birdseye-img.sysuimars.com/birdseye-look-mini/temp/1750693337787.jpg"
|
|
|
- ],
|
|
|
- "serviceMain": "广州泽秾丰农资有限公司",
|
|
|
- "stln": "压低虫口基数,降后期用药需求",
|
|
|
- "targetText": "精准防治害虫,减轻幼果受害",
|
|
|
- "whjc": "谢花期",
|
|
|
- "farmId": 766,
|
|
|
- "farmWorkLibId": "708734452141920262",
|
|
|
- "farmWorkLibName": "果期防治I",
|
|
|
- "periodName": "果期",
|
|
|
- "score": 20,
|
|
|
- "shortName": "纯天然生物药剂",
|
|
|
- "standard": "生态防治",
|
|
|
- "evidenceImgs": "123.png",
|
|
|
- "prescriptionObj": [
|
|
|
- {
|
|
|
- "brand": "诺普信稼炫",
|
|
|
- "name": "氯虫苯甲酰胺",
|
|
|
- "pfParam": "",
|
|
|
- "typeName": "病虫",
|
|
|
- "usageMode": ""
|
|
|
- },
|
|
|
- {
|
|
|
- "brand": "广东立威立犀",
|
|
|
- "name": "立威立犀",
|
|
|
- "pfParam": "",
|
|
|
- "typeName": "病虫",
|
|
|
- "usageMode": ""
|
|
|
- },
|
|
|
- {
|
|
|
- "brand": "济南中科翠剑",
|
|
|
- "name": "吡唑醚菌酯",
|
|
|
- "pfParam": "",
|
|
|
- "typeName": "病虫",
|
|
|
- "usageMode": ""
|
|
|
- }
|
|
|
- ],
|
|
|
- "status": 1,
|
|
|
- "isAuth": null,
|
|
|
- "farmName": "",
|
|
|
- "condition": "",
|
|
|
- "expertName": "韦帮稳",
|
|
|
- "expertPic": "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
|
|
|
- "nzName": "广州泽秾丰农资有限公司",
|
|
|
- "nfName": "飞鸟种植助手",
|
|
|
- "executeDate": "2025-04-26",
|
|
|
- "executeDate2": "2025-04-26"
|
|
|
- },
|
|
|
- {
|
|
|
- "authId": "714567288606429184",
|
|
|
- "images": [
|
|
|
- "https://birdseye-img.sysuimars.com/birdseye-look-mini/temp/1750693209854.jpg"
|
|
|
- ],
|
|
|
- "serviceMain": "广州泽秾丰农资有限公司",
|
|
|
- "stln": "高效吸收配方,减养分流失",
|
|
|
- "targetText": "补充关键营养,提高坐果率",
|
|
|
- "whjc": "谢花期",
|
|
|
- "farmId": 766,
|
|
|
- "farmWorkLibId": "708734452141920261",
|
|
|
- "farmWorkLibName": "保果营养",
|
|
|
- "periodName": "果期",
|
|
|
- "score": 20,
|
|
|
- "shortName": "中微量元素肥",
|
|
|
- "standard": "叶面肥营养",
|
|
|
- "evidenceImgs": "123.png",
|
|
|
- "prescriptionObj": [
|
|
|
- {
|
|
|
- "brand": "广州大炎",
|
|
|
- "name": "钙镁叶面肥",
|
|
|
- "pfParam": "",
|
|
|
- "typeName": "营养",
|
|
|
- "usageMode": ""
|
|
|
- },
|
|
|
- {
|
|
|
- "brand": "广州大炎",
|
|
|
- "name": "佳果天成",
|
|
|
- "pfParam": "",
|
|
|
- "typeName": "营养",
|
|
|
- "usageMode": ""
|
|
|
- },
|
|
|
- {
|
|
|
- "brand": "四川国光",
|
|
|
- "name": "果动力",
|
|
|
- "pfParam": "",
|
|
|
- "typeName": "调节",
|
|
|
- "usageMode": ""
|
|
|
- },
|
|
|
- {
|
|
|
- "brand": "芸乐收",
|
|
|
- "name": "芸乐收",
|
|
|
- "pfParam": "",
|
|
|
- "typeName": "营养",
|
|
|
- "usageMode": ""
|
|
|
- }
|
|
|
- ],
|
|
|
- "status": 1,
|
|
|
- "isAuth": null,
|
|
|
- "farmName": "",
|
|
|
- "condition": "",
|
|
|
- "expertName": "韦帮稳",
|
|
|
- "expertPic": "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
|
|
|
- "nzName": "广州泽秾丰农资有限公司",
|
|
|
- "nfName": "飞鸟种植助手",
|
|
|
- "executeDate": "2025-04-17",
|
|
|
- "executeDate2": "2025-04-17"
|
|
|
- }
|
|
|
-])
|
|
|
-const tableData = ref([
|
|
|
- {
|
|
|
- "authId": "714567289264934912",
|
|
|
- "images": [
|
|
|
- "https://birdseye-img.sysuimars.com/birdseye-look-mini/temp/1750693336419.jpg"
|
|
|
- ],
|
|
|
- "serviceMain": "广州泽秾丰农资有限公司",
|
|
|
- "stln": "有机无机搭配,促养分高效",
|
|
|
- "targetText": "促进果实膨大,提升商品品质。",
|
|
|
- "whjc": "膨果期",
|
|
|
- "farmId": 766,
|
|
|
- "farmWorkLibId": "708734452146114560",
|
|
|
- "farmWorkLibName": "壮果营养",
|
|
|
- "periodName": "果期",
|
|
|
- "score": 20,
|
|
|
- "shortName": "有机肥",
|
|
|
- "standard": "有机肥营养",
|
|
|
- "evidenceImgs": "123.png",
|
|
|
- "prescriptionObj": [
|
|
|
- {
|
|
|
- "brand": "未知",
|
|
|
- "name": "硝酸铵钙",
|
|
|
- "pfParam": "",
|
|
|
- "typeName": "营养",
|
|
|
- "usageMode": ""
|
|
|
- },
|
|
|
- {
|
|
|
- "brand": "未知",
|
|
|
- "name": "氯化钾",
|
|
|
- "pfParam": "",
|
|
|
- "typeName": "营养",
|
|
|
- "usageMode": ""
|
|
|
- },
|
|
|
- {
|
|
|
- "brand": "未知",
|
|
|
- "name": "硝酸镁",
|
|
|
- "pfParam": "",
|
|
|
- "typeName": "营养",
|
|
|
- "usageMode": ""
|
|
|
- }
|
|
|
- ],
|
|
|
- "status": 1,
|
|
|
- "isAuth": null,
|
|
|
- "farmName": "",
|
|
|
- "condition": "",
|
|
|
- "expertName": "韦帮稳",
|
|
|
- "expertPic": "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
|
|
|
- "nzName": "广州泽秾丰农资有限公司",
|
|
|
- "nfName": "飞鸟种植助手",
|
|
|
- "executeDate": "2025-05-01",
|
|
|
- "executeDate2": "2025-05-01"
|
|
|
- },
|
|
|
- {
|
|
|
- "authId": "714567288828727296",
|
|
|
- "images": [
|
|
|
- "https://birdseye-img.sysuimars.com/birdseye-look-mini/temp/1750693337787.jpg"
|
|
|
- ],
|
|
|
- "serviceMain": "广州泽秾丰农资有限公司",
|
|
|
- "stln": "压低虫口基数,降后期用药需求",
|
|
|
- "targetText": "精准防治害虫,减轻幼果受害",
|
|
|
- "whjc": "谢花期",
|
|
|
- "farmId": 766,
|
|
|
- "farmWorkLibId": "708734452141920262",
|
|
|
- "farmWorkLibName": "果期防治I",
|
|
|
- "periodName": "果期",
|
|
|
- "score": 20,
|
|
|
- "shortName": "纯天然生物药剂",
|
|
|
- "standard": "生态防治",
|
|
|
- "evidenceImgs": "123.png",
|
|
|
- "prescriptionObj": [
|
|
|
- {
|
|
|
- "brand": "诺普信稼炫",
|
|
|
- "name": "氯虫苯甲酰胺",
|
|
|
- "pfParam": "",
|
|
|
- "typeName": "病虫",
|
|
|
- "usageMode": ""
|
|
|
- },
|
|
|
- {
|
|
|
- "brand": "广东立威立犀",
|
|
|
- "name": "立威立犀",
|
|
|
- "pfParam": "",
|
|
|
- "typeName": "病虫",
|
|
|
- "usageMode": ""
|
|
|
- },
|
|
|
- {
|
|
|
- "brand": "济南中科翠剑",
|
|
|
- "name": "吡唑醚菌酯",
|
|
|
- "pfParam": "",
|
|
|
- "typeName": "病虫",
|
|
|
- "usageMode": ""
|
|
|
- }
|
|
|
- ],
|
|
|
- "status": 1,
|
|
|
- "isAuth": null,
|
|
|
- "farmName": "",
|
|
|
- "condition": "",
|
|
|
- "expertName": "韦帮稳",
|
|
|
- "expertPic": "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
|
|
|
- "nzName": "广州泽秾丰农资有限公司",
|
|
|
- "nfName": "飞鸟种植助手",
|
|
|
- "executeDate": "2025-04-26",
|
|
|
- "executeDate2": "2025-04-26"
|
|
|
- },
|
|
|
- {
|
|
|
- "authId": "714567288606429184",
|
|
|
- "images": [
|
|
|
- "https://birdseye-img.sysuimars.com/birdseye-look-mini/temp/1750693209854.jpg"
|
|
|
- ],
|
|
|
- "serviceMain": "广州泽秾丰农资有限公司",
|
|
|
- "stln": "高效吸收配方,减养分流失",
|
|
|
- "targetText": "补充关键营养,提高坐果率",
|
|
|
- "whjc": "谢花期",
|
|
|
- "farmId": 766,
|
|
|
- "farmWorkLibId": "708734452141920261",
|
|
|
- "farmWorkLibName": "保果营养",
|
|
|
- "periodName": "果期",
|
|
|
- "score": 20,
|
|
|
- "shortName": "中微量元素肥",
|
|
|
- "standard": "叶面肥营养",
|
|
|
- "evidenceImgs": "123.png",
|
|
|
- "prescriptionObj": [
|
|
|
- {
|
|
|
- "brand": "广州大炎",
|
|
|
- "name": "钙镁叶面肥",
|
|
|
- "pfParam": "",
|
|
|
- "typeName": "营养",
|
|
|
- "usageMode": ""
|
|
|
- },
|
|
|
- {
|
|
|
- "brand": "广州大炎",
|
|
|
- "name": "佳果天成",
|
|
|
- "pfParam": "",
|
|
|
- "typeName": "营养",
|
|
|
- "usageMode": ""
|
|
|
- },
|
|
|
- {
|
|
|
- "brand": "四川国光",
|
|
|
- "name": "果动力",
|
|
|
- "pfParam": "",
|
|
|
- "typeName": "调节",
|
|
|
- "usageMode": ""
|
|
|
- },
|
|
|
- {
|
|
|
- "brand": "芸乐收",
|
|
|
- "name": "芸乐收",
|
|
|
- "pfParam": "",
|
|
|
- "typeName": "营养",
|
|
|
- "usageMode": ""
|
|
|
- }
|
|
|
- ],
|
|
|
- "status": 1,
|
|
|
- "isAuth": null,
|
|
|
- "farmName": "",
|
|
|
- "condition": "",
|
|
|
- "expertName": "韦帮稳",
|
|
|
- "expertPic": "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
|
|
|
- "nzName": "广州泽秾丰农资有限公司",
|
|
|
- "nfName": "飞鸟种植助手",
|
|
|
- "executeDate": "2025-04-17",
|
|
|
- "executeDate2": "2025-04-17"
|
|
|
- }
|
|
|
-])
|
|
|
+ const props = defineProps({
|
|
|
+ baseData: {
|
|
|
+ type: Object,
|
|
|
+ defalut: {},
|
|
|
+ },
|
|
|
+ });
|
|
|
|
|
|
-const isFram = ref(true);
|
|
|
-const active = ref(0);
|
|
|
-const handleActive = (index) =>{
|
|
|
- active.value = index
|
|
|
- tableData.value = baseData.value.farmWorkAuths.filter(item =>item.periodName === baseData.value.periodList[index])
|
|
|
- // tableData.value = farmWorkAuths.value.filter(item =>item.periodName === props.baseData.periodList[index])
|
|
|
-}
|
|
|
+ const isFram = ref(true);
|
|
|
+ const active = ref(0);
|
|
|
+ const handleActive = (index) => {
|
|
|
+ active.value = index
|
|
|
+ tableData.value = props.baseData.farmWorkAuths.filter(item => item.periodName === props.baseData.periodList[
|
|
|
+ index])
|
|
|
+ }
|
|
|
|
|
|
-const gradientColor = [
|
|
|
- { color: "#FFD887", percentage: 0 },
|
|
|
- { color: "#FFAF2E", percentage: 100 },
|
|
|
-];
|
|
|
-const boxList = ref([
|
|
|
- {
|
|
|
- value: 0,
|
|
|
- title: "生态认证",
|
|
|
- },
|
|
|
- {
|
|
|
- value: 0,
|
|
|
- title: "营养认证",
|
|
|
- },
|
|
|
-]);
|
|
|
+ const gradientColor = [{
|
|
|
+ color: "#FFD887",
|
|
|
+ percentage: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ color: "#FFAF2E",
|
|
|
+ percentage: 100
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const boxList = ref([{
|
|
|
+ value: 0,
|
|
|
+ title: "生态认证",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 0,
|
|
|
+ title: "营养认证",
|
|
|
+ },
|
|
|
+ ]);
|
|
|
|
|
|
-const opts = {
|
|
|
- color: ["#FFD887", "#FFAF2E"],
|
|
|
- padding: [0, 0, 0, 0],
|
|
|
- title: {
|
|
|
- name: "91分",
|
|
|
- fontSize: 18,
|
|
|
- color: "#FF8400"
|
|
|
- },
|
|
|
- subtitle: {
|
|
|
- name: "生态认证",
|
|
|
- fontSize: 12,
|
|
|
- color: "#999999"
|
|
|
- },
|
|
|
- extra: {
|
|
|
- arcbar: {
|
|
|
- type: "circle",
|
|
|
- width: 8,
|
|
|
- backgroundColor: "#EDEDED",
|
|
|
- startAngle: 0.75,
|
|
|
- endAngle: 0.25,
|
|
|
- gap: 2,
|
|
|
- customColor: ["#FF8400", "#FFAF37"]
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const chartData = {
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "生态认证",
|
|
|
- data: 0.8
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
+
|
|
|
+ const tableData = ref([])
|
|
|
+ watch(() => props.baseData, (newValue) => {
|
|
|
+ tableData.value = newValue.farmWorkAuths.filter(item => item.periodName === newValue.periodList[0])
|
|
|
+ opts.value = {
|
|
|
+ color: ["#FFAF2E", "#FFAF2E"],
|
|
|
+ padding: [0, 0, 0, 0],
|
|
|
+ title: {
|
|
|
+ name: props.baseData.yyAuthScore + "分",
|
|
|
+ fontSize: 18,
|
|
|
+ color: "#FF8400"
|
|
|
+ },
|
|
|
+ subtitle: {
|
|
|
+ name: "生态认证",
|
|
|
+ fontSize: 12,
|
|
|
+ color: "#999999"
|
|
|
+ },
|
|
|
+ extra: {
|
|
|
+ arcbar: {
|
|
|
+ type: "circle",
|
|
|
+ width: 8,
|
|
|
+ backgroundColor: "#EDEDED",
|
|
|
+ startAngle: 0.75,
|
|
|
+ endAngle: 0.25,
|
|
|
+ gap: 2,
|
|
|
+ customColor: ["#FFAF2E", "#FFAF2E"]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ chartData.value = {
|
|
|
+ series: [{
|
|
|
+ name: "生态认证",
|
|
|
+ data: props.baseData.yyAuthScore / 100
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ opts2.value = {
|
|
|
+ color: ["#FFAF2E", "#FFAF2E"],
|
|
|
+ padding: [0, 0, 0, 0],
|
|
|
+ title: {
|
|
|
+ name: props.baseData.stAuthScore + "分",
|
|
|
+ fontSize: 18,
|
|
|
+ color: "#FF8400"
|
|
|
+ },
|
|
|
+ subtitle: {
|
|
|
+ name: "营养认证",
|
|
|
+ fontSize: 12,
|
|
|
+ color: "#999999"
|
|
|
+ },
|
|
|
+ extra: {
|
|
|
+ arcbar: {
|
|
|
+ type: "circle",
|
|
|
+ width: 8,
|
|
|
+ backgroundColor: "#EDEDED",
|
|
|
+ startAngle: 0.75,
|
|
|
+ endAngle: 0.25,
|
|
|
+ gap: 2,
|
|
|
+ customColor: ["#FFAF2E", "#FFAF2E"]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ chartData2.value = {
|
|
|
+ series: [{
|
|
|
+ name: "营养认证",
|
|
|
+ data: props.baseData.stAuthScore / 100
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const opts = ref(null)
|
|
|
+ const opts2 = ref(null)
|
|
|
+
|
|
|
+ const chartData = ref(null)
|
|
|
+ const chartData2 = ref(null)
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.banner-wrap {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-size: 100% 100%;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center center;
|
|
|
- .title {
|
|
|
- font-size: 36px;
|
|
|
- letter-spacing: 4px;
|
|
|
- font-family: "jiangxizhuokai";
|
|
|
- }
|
|
|
- &.banner-five {
|
|
|
- background-image: url("https://birdseye-img.sysuimars.com/youwei-uniapp/home/report-banner-5.png");
|
|
|
- padding: 60px 14px;
|
|
|
- box-sizing: border-box;
|
|
|
- .sub-title {
|
|
|
- letter-spacing: 3px;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- .box-wrap {
|
|
|
- margin-top: 12px;
|
|
|
- background: rgba(255, 255, 255, 0.94);
|
|
|
- padding: 30px 13px 13px 13px;
|
|
|
- border-radius: 12px;
|
|
|
- position: relative;
|
|
|
- .no-data {
|
|
|
- color: #999;
|
|
|
- width: 112px;
|
|
|
- text-align: center;
|
|
|
- margin: auto;
|
|
|
- .btn {
|
|
|
- background-image: linear-gradient(120deg, #ffd887, #ed9e1e);
|
|
|
- color: #ffffff;
|
|
|
- font-size: 12px;
|
|
|
- padding: 6px 33px;
|
|
|
- border-radius: 20px;
|
|
|
- margin-top: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
- .box-name {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: calc(50% - 173px / 2);
|
|
|
- font-size: 16px;
|
|
|
- padding: 5px 0 7px 0;
|
|
|
- text-align: center;
|
|
|
- width: 173px;
|
|
|
- color: #000;
|
|
|
- font-family: "jiangxizhuokai";
|
|
|
- background: url("https://birdseye-img.sysuimars.com/youwei-uniapp/home/box-name.png") no-repeat center center / 100% 100%;
|
|
|
- }
|
|
|
- .circle-list {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-around;
|
|
|
- padding: 0 12px;
|
|
|
- .circle-item {
|
|
|
- width: 90px;
|
|
|
- height: 100px;
|
|
|
+ .banner-wrap {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 36px;
|
|
|
+ letter-spacing: 4px;
|
|
|
+ font-family: "jiangxizhuokai";
|
|
|
+ }
|
|
|
+
|
|
|
+ &.banner-five {
|
|
|
+ background-image: url("https://birdseye-img.sysuimars.com/youwei-uniapp/home/report-banner-5.png");
|
|
|
+ padding: 60px 14px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .sub-title {
|
|
|
+ letter-spacing: 3px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-wrap {
|
|
|
+ margin-top: 12px;
|
|
|
+ background: rgba(255, 255, 255, 0.94);
|
|
|
+ padding: 30px 13px 13px 13px;
|
|
|
+ border-radius: 12px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .no-data {
|
|
|
+ color: #999;
|
|
|
+ width: 112px;
|
|
|
+ text-align: center;
|
|
|
+ margin: auto;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ background-image: linear-gradient(120deg, #ffd887, #ed9e1e);
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 6px 33px;
|
|
|
+ border-radius: 20px;
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-name {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: calc(50% - 173px / 2);
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 5px 0 7px 0;
|
|
|
+ text-align: center;
|
|
|
+ width: 173px;
|
|
|
+ color: #000;
|
|
|
+ font-family: "jiangxizhuokai";
|
|
|
+ background: url("https://birdseye-img.sysuimars.com/youwei-uniapp/home/box-name.png") no-repeat center center / 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .circle-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding: 0 12px;
|
|
|
+
|
|
|
+ .circle-item {
|
|
|
+ width: 90px;
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .percentage-value {
|
|
|
+ color: #ff8400;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: "jiangxizhuokai";
|
|
|
+ margin-bottom: 5px;
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .percentage-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(0, 0, 0, 0.4);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tips {
|
|
|
+ font-size: 11px;
|
|
|
+ color: rgba(51, 51, 51, 0.5);
|
|
|
+ text-align: center;
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-list {
|
|
|
+ .box-item {
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .box-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #000;
|
|
|
+ font-size: 15px;
|
|
|
+
|
|
|
+ .title-img {
|
|
|
+ width: 15px;
|
|
|
+ height: 9px;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ width: 100%;
|
|
|
+ font-family: "jiangxizhuokai";
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .more {
|
|
|
+ color: #bbbbbb;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabs {
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #666666;
|
|
|
+
|
|
|
+ .tabs-item {
|
|
|
+ padding: 3px 23px;
|
|
|
+ border-radius: 20px;
|
|
|
+ background: rgba(0, 0, 0, 0.09);
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: #fff;
|
|
|
+ background-image: linear-gradient(90deg, #FFD887, #ED9E1E);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabs-item+.tabs-item {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .percentage-value {
|
|
|
- color: #ff8400;
|
|
|
- font-size: 20px;
|
|
|
- font-family: "jiangxizhuokai";
|
|
|
- margin-bottom: 5px;
|
|
|
- .unit {
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
- }
|
|
|
- .percentage-label {
|
|
|
- font-size: 12px;
|
|
|
- color: rgba(0, 0, 0, 0.4);
|
|
|
- }
|
|
|
- .tips {
|
|
|
- font-size: 11px;
|
|
|
- color: rgba(51, 51, 51, 0.5);
|
|
|
- text-align: center;
|
|
|
- margin: 10px 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .box-list {
|
|
|
- .box-item {
|
|
|
- margin-top: 10px;
|
|
|
- .box-title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: #000;
|
|
|
- font-size: 15px;
|
|
|
- .title-img {
|
|
|
- width: 15px;
|
|
|
- height: 9px;
|
|
|
- margin-right: 6px;
|
|
|
- }
|
|
|
- .text {
|
|
|
- width: 100%;
|
|
|
- font-family: "jiangxizhuokai";
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- .more {
|
|
|
- color: #bbbbbb;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: 13px;
|
|
|
- span {
|
|
|
- margin-right: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .tabs {
|
|
|
- margin-top: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- font-size: 13px;
|
|
|
- color: #666666;
|
|
|
- .tabs-item {
|
|
|
- padding: 3px 23px;
|
|
|
- border-radius: 20px;
|
|
|
- background: rgba(0, 0, 0, 0.09);
|
|
|
- &.active {
|
|
|
- color: #fff;
|
|
|
- background-image: linear-gradient(90deg, #ffd887, #ed9e1e);
|
|
|
- }
|
|
|
- }
|
|
|
- .tabs-item + .tabs-item {
|
|
|
- margin-left: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|