夏滨修改 农产品溯源，溯源列表

new-digital-agriculture-screen/auto-imports.d.ts

@@ -0,0 +1,75 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
+  const useLink: typeof import('vue-router')['useLink']
+  const useModel: typeof import('vue')['useModel']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

new-digital-agriculture-screen/components.d.ts

@@ -0,0 +1,53 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    BaseBg: typeof import('./src/components/baseBg.vue')['default']
+    CenterMap: typeof import('./src/components/centerMap.vue')['default']
+    'CenterMap copy': typeof import('./src/components/centerMap copy.vue')['default']
+    CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
+    Components: typeof import('./src/components/index.js')['default']
+    copy: typeof import('./src/components/centerMap copy.vue')['default']
+    CurrentTime: typeof import('./src/components/currentTime.vue')['default']
+    CustomBack: typeof import('./src/components/customBack.vue')['default']
+    CustomCarouselPicture: typeof import('./src/components/custom-carousel-picture/index.vue')['default']
+    CustomEchartBar: typeof import('./src/components/custom-echart-bar/index.vue')['default']
+    CustomEchartBubble: typeof import('./src/components/custom-echart-bubble/index.vue')['default']
+    CustomEchartColumnLine: typeof import('./src/components/custom-echart-column-line/index.vue')['default']
+    CustomEchartHyalineCake: typeof import('./src/components/custom-echart-hyaline-cake/index.vue')['default']
+    CustomEchartLine: typeof import('./src/components/custom-echart-line/index.vue')['default']
+    CustomEchartLineLine: typeof import('./src/components/custom-echart-line-line/index.vue')['default']
+    CustomEchartMaps: typeof import('./src/components/custom-echart-maps/index.vue')['default']
+    CustomEchartMixin: typeof import('./src/components/custom-echart-mixin/index.vue')['default']
+    CustomEchartPictorialBar: typeof import('./src/components/custom-echart-pictorial-bar/index.vue')['default']
+    CustomEchartPie: typeof import('./src/components/custom-echart-pie/index.vue')['default']
+    CustomEchartPie3d: typeof import('./src/components/custom-echart-pie-3d/index.vue')['default']
+    CustomEchartPieGauge: typeof import('./src/components/custom-echart-pie-gauge/index.vue')['default']
+    CustomEchartRadar: typeof import('./src/components/custom-echart-radar/index.vue')['default']
+    CustomEchartScatterBlister: typeof import('./src/components/custom-echart-scatter-blister/index.vue')['default']
+    CustomEchartTriangle: typeof import('./src/components/custom-echart-triangle/index.vue')['default']
+    CustomEchartWaterDroplet: typeof import('./src/components/custom-echart-water-droplet/index.vue')['default']
+    CustomEchartWordCloud: typeof import('./src/components/custom-echart-word-cloud/index.vue')['default']
+    CustomIframe: typeof import('./src/components/custom-iframe/index.vue')['default']
+    CustomImportExcel: typeof import('./src/components/custom-import-excel/index.vue')['default']
+    CustomProgress: typeof import('./src/components/customProgress.vue')['default']
+    CustomRankList: typeof import('./src/components/custom-rank-list/index.vue')['default']
+    CustomRichEditor: typeof import('./src/components/custom-rich-editor/index.vue')['default']
+    CustomScrollBoard: typeof import('./src/components/custom-scroll-board/index.vue')['default']
+    CustomScrollTitle: typeof import('./src/components/custom-scroll-title/index.vue')['default']
+    CustomTableOperate: typeof import('./src/components/custom-table-operate/index.vue')['default']
+    CustomTableTree: typeof import('./src/components/custom-table-tree/index.vue')['default']
+    NewHyalineCake: typeof import('./src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue')['default']
+    NewPie: typeof import('./src/components/custom-echart-hyaline-cake/new-pie.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SubTop: typeof import('./src/components/subTop.vue')['default']
+    SvgIcon: typeof import('./src/components/svg-icon/index.vue')['default']
+    UpFile: typeof import('./src/components/custom-rich-editor/upFile.js')['default']
+  }
+}

new-digital-agriculture-screen/src/views/trace/components/detectionCharts.vue

@@ -22,45 +22,59 @@
   <section class="line_info" :style="{ '--top': info.show ? '18vh' : '140vh' }">
     <i class="el-icon-close" @click="handleCloseInfo"></i>
     <section>
+      <div class="traceability_info">
+        <div class="_label" style="font-size: 30px">溯源信息</div>
+        <div class="traceability_info_box">
+          <div class="traceability_info_box_image">
+            <img style="width: 100%; height: 100%" src="../../../assets/images/entities/tomatoImg.png" />
+          </div>
+          <div class="traceability_info_box_title">
+            <div class="traceability_info_right">新鲜番茄</div>
+            <div class="traceability_info_right_bottom">检测通过</div>
+          </div>
+        </div>
+      </div>
+      <div class="detection_text">权威检测</div>
       <section class="info_box">
-        <div>
+        <div v-for="item in list1" :key="item.name">
-          <span class="_label">产品名称</span>
+          <span class="_label">{{ item.title }}</span>
-          <span>{{ info.productName }}</span>
+          <span>{{ item.name }}</span>
-        </div>
-        <div>
-          <span class="_label">产品批次号</span>
-          <span>{{ info.productCode }}</span>
-        </div>
-        <div>
-          <span class="_label">产品规格</span>
-          <span>{{ info.specs }}</span>
-        </div>
-        <div>
-          <span class="_label">产品类型</span>
-          <span>{{ info.productType }}</span>
-        </div>
-        <div>
-          <span class="_label">生产厂家</span>
-          <span>{{ info.info && info.info.manufacturer }}</span>
-        </div>
-        <div>
-          <span class="_label">生产时间</span>
-          <span>{{ info.info && info.info.productTime }}</span>
-        </div>
-        <div>
-          <span class="_label">终端零售店</span>
-          <span>{{ info.info && info.info.shop }}</span>
         </div>
       </section>
       <section class="route_box">
-        <div v-for="(item, i) in info.info && info.info.route" :key="`route_${i}`" class="route_item">
+        <!-- <div v-for="(item, i) in info.info && info.info.route" :key="`route_${i}`" class="route_item">
           <div class="_circle"></div>
           <div class="_name">{{ item.name }}</div>
           <div class="_time">{{ item.time }}</div>
-        </div>
+        </div> -->
         <div style="text-align: center">
-          <img src="../../../assets/images/trace/testReport.png" style="width: 30%" />
+          <img src="../../../assets/images/trace/testReport.png" style="width: 100%" />
-          <div>检测报告</div>
+          <!-- <div>检测报告</div> -->
+        </div>
+      </section>
+      <div class="detection_text">产地信息</div>
+      <div class="traceability_info">
+        <div class="traceability_info_box" style="flex-direction: column">
+          <div class="traceability_info_box_images">
+            <img style="width: 100%; height: 100%" src="../../../assets/images/trace/maprl.png" />
+          </div>
+          <div class="traceability_info_box_titles">
+            <div class="traceability_info_rights">临沧市耿马县耿马镇</div>
+          </div>
+        </div>
+      </div>
+      <div class="detection_text">仓储环节</div>
+      <section class="info_box">
+        <div v-for="item in list2" :key="item.name">
+          <span class="_label">{{ item.title }}</span>
+          <span>{{ item.name }}</span>
+        </div>
+      </section>
+      <div class="detection_text">物流环节</div>
+      <section class="info_box">
+        <div v-for="item in list3" :key="item.name">
+          <span class="_label">{{ item.title }}</span>
+          <span>{{ item.name }}</span>
         </div>
       </section>
     </section>
@@ -82,6 +96,44 @@ onMounted(() => {
 });
 let list = ref([]);
 
+let list1 = ref([
+  { title: '报告编号', name: 'H1212457' },
+  { title: '送检单位', name: '水果综合种植基地' },
+  { title: '送检日期', name: '2021-12-11' },
+  { title: '送样人', name: '李宏微' },
+  { title: '联系方式', name: '19876782134' },
+  { title: '样品数量', name: '1000克' },
+  { title: '样品名称', name: '新鲜番茄' },
+  { title: '检测单位', name: '农残检测中心' },
+  { title: '检测类型', name: '农残检测' },
+  { title: '检测方法', name: '食品快速检测法' },
+  { title: '评判标准', name: 'GB/T5009.199-2003' },
+  { title: '检测结果', name: '合格' },
+]);
+
+let list2 = ref([
+  { title: '仓库位置', name: '耿马县耿马村仓储站' },
+  { title: '仓储数量', name: '5吨' },
+  { title: '入库时间', name: '2021-12-11' },
+  { title: '仓库类型', name: '冷藏仓库' },
+  { title: '批次编号', name: 'AP20211212001' },
+  { title: '出库时间', name: '2021-12-15' },
+]);
+
+let list3 = ref([
+  { title: '运输批次', name: '第一批次' },
+  { title: '运输工具', name: '冷藏车' },
+  { title: '运输路线', name: '耿马县一昆明市' },
+  { title: '运输数量', name: '4吨' },
+  { title: '运输时间', name: '2021-12-15 5:30~12-16 8:30' },
+  { title: '', name: '' },
+  { title: '运输批次', name: '第二批次' },
+  { title: '运输工具', name: '小型运载卡车' },
+  { title: '运输路线', name: '耿马县一四排乡' },
+  { title: '运输数量', name: '1吨' },
+  { title: '运输时间', name: '2021-12-15 5:30~12-16 7:30' },
+]);
+
 const classOptions = {
   singleHeight: 48,
 };
@@ -103,7 +155,7 @@ function handleCloseInfo() {
     .label {
       display: grid;
       grid-template-columns: 25% 40% 18% 17%;
-      background-color: rgba(53, 208, 192, 0.3);
+      background-color: rgba(70, 109, 109, 0.8);
       color: #ffffff;
       height: 30px;
       line-height: 30px;
@@ -162,6 +214,58 @@ function handleCloseInfo() {
   z-index: 9999;
   transition: all 0.8s cubic-bezier(0.58, 0.15, 0.4, 1.42);
   font-size: 18px;
+  .detection_text {
+    font-size: 25px;
+    margin-bottom: 20px;
+  }
+  .traceability_info {
+    .traceability_info_box {
+      justify-content: space-evenly;
+      padding: 10px;
+      display: flex;
+      margin: 20px 0px;
+      background-color: rgba(70, 109, 109, 0.8);
+      border-radius: 10px;
+      .traceability_info_box_image {
+        width: 130px;
+        height: 75px;
+      }
+      .traceability_info_box_images {
+        width: 100%;
+        height: 150px;
+      }
+
+      .traceability_info_box_title {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        align-items: center;
+        height: 75px;
+      }
+      .traceability_info_box_titles {
+        margin-top: 10px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        align-items: start;
+      }
+      .traceability_info_right {
+        font-size: 23px;
+        color: #fff;
+      }
+      .traceability_info_rights {
+        font-size: 15px;
+        color: #fff;
+      }
+      .traceability_info_right_bottom {
+        padding: 5px 20px;
+        border-radius: 40px;
+        background-color: rgba(0, 0, 0, 0.2);
+        color: #04ed8c;
+        font-size: 17px;
+      }
+    }
+  }
   ._label {
     color: #01fefd;
   }
@@ -207,7 +311,6 @@ function handleCloseInfo() {
       }
     }
     .route_box {
-      padding: 0 34px;
       > div {
         position: relative;
         padding-bottom: 16px;