Merge branch 'dev' of http://47.109.205.240:3000/Web/daimp-front into dev

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/components/custom-echart-bar/index.vue

@@ -2,8 +2,8 @@
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script>
-import { ref, reactive, watchEffect } from 'vue';
+import { ref, reactive, watchEffect, toRefs } from 'vue';
-import { cloneDeep } from 'lodash';
+import { merge, cloneDeep } from 'lodash';
 import { useEcharts } from '@/hooks/useEcharts';
 export default {
   name: 'CustomEchartBar',
@@ -33,12 +33,16 @@ export default {
       type: Boolean,
       default: false,
     },
+    showMarkPoint: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['click'],
   setup(props, { emit }) {
     const chartRef = ref(null);
     const { setOptions, getInstance, startAutoPlay } = useEcharts(chartRef);
-    const option = reactive({
+    let option = reactive({
       tooltip: {
         trigger: 'axis',
         axisPointer: {
@@ -63,6 +67,10 @@ export default {
         type: 'value',
       },
       series: [],
+      isHorizontal: {
+        type: Boolean,
+        default: false,
+      },
     });
 
     watchEffect(() => {
@@ -92,15 +100,24 @@ export default {
         if (props.option?.color) {
           obj.color = props.option?.color[index];
         }
+        if (props.option.series && props.option.series.length > 0) {
+          obj.stack = props.option.series[index].stack ? props.option.series[index].stack : '';
+        }
         seriesData.push(obj);
       });
       option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData;
-      option.xAxis.data = xAxisData;
+      if (props.isHorizontal) {
+        option.yAxis.data = xAxisData;
+      } else {
+        option.xAxis.data = [];
+      }
+      console.log(option);
       setOptions(option);
       startAutoPlay({
         interval: 2000,
         seriesIndex: 0,
         showTooltip: true,
+        showMarkPoint: props.showMarkPoint,
       });
       getInstance()?.off('click', onClick);
       getInstance()?.on('click', onClick);

new-digital-agriculture-screen/src/views/business/components/businessFive.vue

@@ -23,7 +23,7 @@ const state = reactive({
     type: 'row',
     rowNum: 6,
     isAnimation: true,
-    waitTime: 12,
+    waitTime: 2,
     unit: '万元',
     sort: true,
     height: 12,

new-digital-agriculture-screen/src/views/business/components/businessOne.vue

@@ -194,7 +194,8 @@ function getPie3D(pieData, internalDiameterRatio) {
       formatter: (name) => {
         if (state.data.length) {
           const item = state.data.filter((item) => item.name === name)[0];
-          return `${name} ${item.pieData.value}${state.option.legendSuffix ?? ''}`;
+          console.log(item);
+          return `${name} ${item.pieData.value}${state.option.legendSuffix ?? ''}` + `\n` + `${item.pieData.quantity}家`;
         }
       },
     },
@@ -291,6 +292,7 @@ watch(
         return {
           name: row.name,
           value: row.value,
+          quantity: row.quantity,
         };
       });
       initData(pieData);

new-digital-agriculture-screen/src/views/business/components/businessThere.vue

@@ -1,9 +1,9 @@
 <template>
-  <custom-echart-line :chart-data="state.data" height="100%" :option="state.option" />
+  <custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" :is-horizontal="true" :show-mark-point="false" />
 </template>
 <script setup>
 import { reactive, watch } from 'vue';
-import { isEmpty } from '@/utils';
+import * as echarts from 'echarts';
 
 const props = defineProps({
   data: {
@@ -11,69 +11,136 @@ const props = defineProps({
     default: () => [],
   },
 });
+const rawData = [
+  { name: '勐撒镇', type: '农户', value: 150 },
+  { name: '勐撒镇', type: '企业/合作社', value: 300 },
+
+  { name: '勐永镇', type: '农户', value: 280 },
+  { name: '勐永镇', type: '企业/合作社', value: 200 },
+
+  { name: '孟定镇', type: '农户', value: 250 },
+  { name: '孟定镇', type: '企业/合作社', value: 240 },
+
+  { name: '大兴乡', type: '农户', value: 170 },
+  { name: '大兴乡', type: '企业/合作社', value: 140 },
+
+  { name: '耿马镇', type: '农户', value: 260 },
+  { name: '耿马镇', type: '企业/合作社', value: 230 },
+];
+
+const towns = ['勐撒镇', '勐永镇', '孟定镇', '大兴乡', '耿马镇'];
+const types = ['农户', '企业/合作社'];
+const colors = [
+  // 蓝色渐变
+  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+    { offset: 0, color: 'rgba(53,208,192,0.2)' },
+    { offset: 1, color: '#35d0c0' },
+  ]),
+  // 绿色渐变
+  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+    { offset: 0, color: 'rgba(21,235,144,0.2)' }, // 起始颜色
+    { offset: 1, color: '#15EB90' }, // 结束颜色
+  ]),
+  // 黄色渐变
+  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+    { offset: 0, color: '#F3F70F' },
+    { offset: 1, color: '#D4D70A' },
+  ]),
+];
+
+const series = types.map((type, idx) => {
+  return {
+    name: type,
+    type: 'bar',
+    barWidth: 16,
+    stack: 'total',
+    barGap: '0%', // 强制堆叠布局
+    itemStyle: {
+      color: colors[idx],
+      barBorderRadius: 8,
+      shadowColor: colors[idx],
+      // shadowBlur: 8,
+      shadowOffsetY: -16,
+    },
+    label: {
+      // 添加标签配置
+      show: true,
+      position: 'inside',
+      color: '#000', // 黑色文字确保可见
+      backgroundColor: 'rgba(255,255,255,0.7)', // 白色背景
+      padding: [2, 4],
+      borderRadius: 4,
+      formatter: '{@value}万亩',
+      z: 100,
+    },
+    emphasis: {
+      focus: 'series',
+    },
+    z: 100 - idx,
+    data: towns.map((town) => {
+      const found = rawData.find((d) => d.name === town && d.type === type);
+      return found ? found.value : 0;
+    }),
+  };
+});
+console.log(series);
 
 const state = reactive({
+  data: rawData,
   option: {
-    color: ['#35D0C0'],
+    legend: {
+      data: types,
+      textStyle: {
+        color: '#ccc',
+      },
+    },
     grid: {
-      left: '5%',
+      top: '15%',
-      right: '5%',
+      left: '3%',
+      right: '10%',
       bottom: '5%',
-      top: '10%',
       containLabel: true,
     },
+    xAxis: {
+      type: 'value', // 数值轴（横向条形图的长度）
+      axisLine: { lineStyle: { opacity: 1, width: 0 } },
+      axisTick: { show: false },
+      axisLabel: {
+        margin: 8,
+        formatter: (value) => `${value}万亩`, // X轴也显示万亩单位
+      },
+    },
+    yAxis: {
+      type: 'category', // 分类轴（横向条形图的标签）
+      data: towns, // 分类数据放在 yAxis
+      axisTick: { show: false }, // 隐藏刻度线
+    },
+    color: colors,
+    series,
     tooltip: {
+      show: false,
       trigger: 'axis',
       axisPointer: {
         type: 'shadow',
       },
-      // tooltip样式调整添加这个类名
+      backgroundColor: 'rgba(0,0,0,0.6);',
-      className: 'custom-tooltip-container', // 自定义父容器类名
-      backgroundColor: 'rgba(0,0,0,0.5)',
       borderColor: '#35d0c0',
-      formatter: (data) => {
+      borderRadius: 8,
-        const params = data[0];
+      formatter: (params) => `
-        let str = `<div class="custom-echarts-tips">
+      <div style="font-weight:700;margin-bottom:5px;color:#fff;font-size: 16px;">${params[0].name}</div>
-          <span>${params.name}</span><br/>
+      ${params
-          <span>${params.marker} ${params.data} 万亩</span>
+        .map(
-        </div>`;
+          (p) => `
-        return str;
+        <div style="display:flex;align-items:center;margin:3px 0;color:#fff">
-      },
+          <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${p.color};margin-right:6px;color:#fff"></span>
-    },
+          ${p.seriesName}: <span style="font-weight:bold;margin-left:5px;color:#fff">${p.value} 吨</span>
-    xAxis: {
+        </div>
-      type: 'category',
+      `
-      // name: '年份',
+        )
-      axisTick: {
+        .join('')}
-        show: false,
+    `,
-        alignWithLabel: false,
+      extraCssText: 'backdrop-filter: blur(8px);',
-        interval: 'auto',
-        inside: false,
-        length: 5,
-        lineStyle: {
-          type: 'solid',
-          width: 1,
-          color: 'rgba(28, 158, 222, 1)',
-        },
-      },
-    },
-    yAxis: {
-      type: 'value',
-      // name: '',
     },
   },
-  data: [],
 });
-
-watch(
-  () => props.data,
-  (val) => {
-    if (!isEmpty(val)) {
-      state.data = val;
-    }
-  },
-  {
-    deep: true,
-    immediate: true,
-  }
-);
 </script>

new-digital-agriculture-screen/src/views/business/components/businessTwo.vue

@@ -1,5 +1,5 @@
 <template>
-  <custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" />
+  <custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" :show-mark-point="true" />
 </template>
 <script setup>
 import { reactive, watch } from 'vue';
@@ -26,6 +26,7 @@ const state = reactive({
       containLabel: true,
     },
     tooltip: {
+      show: true,
       trigger: 'axis',
       axisPointer: {
         type: 'shadow',
@@ -38,7 +39,7 @@ const state = reactive({
         const params = data[0];
         let str = `<div class="custom-echarts-tips">
           <span>${params.name}</span><br/>
-          <span>${params.marker} ${params.data} 个</span>
+          <span>${params.marker} ${params.data} 家</span>
         </div>`;
         return str;
       },
@@ -56,7 +57,7 @@ const state = reactive({
         y2: 1,
         colorStops: [
           { offset: 0, color: '#35D0C0' },
-          { offset: 1, color: '#35D0C0' },
+          { offset: 1, color: 'rgba(53,208,192,0.2)' },
         ],
         global: false,
       },

new-digital-agriculture-screen/src/views/business/index.vue

@@ -100,11 +100,11 @@ const loadData = async () => {
   await sleep(500);
   state.data = {
     one: [
-      { value: 13.8, name: '农企/合作社' },
+      { value: 13.8, name: '农企/合作社', quantity: 202 },
-      { value: 23.8, name: '农资企业' },
+      // { value: 23.8, name: '农资企业' },
-      { value: 24.1, name: '种源企业' },
+      // { value: 24.1, name: '种源企业' },
-      { value: 29.8, name: '生产加工企业' },
+      // { value: 29.8, name: '生产加工企业' },
-      { value: 8.5, name: '农户' },
+      { value: 8.5, name: '农户', quantity: 180 },
     ],
     two: [
       { name: '耿马镇', value: 870 },
@@ -117,11 +117,11 @@ const loadData = async () => {
       { name: '芒洪乡', value: 682 },
     ],
     there: [
-      { value: 66, name: '2021' },
+      { name: '耿马镇', value: 870, value2: 455 },
-      { value: 100, name: '2022' },
+      { name: '勐撒镇', value: 603, value2: 555 },
-      { value: 50, name: '2023' },
+      { name: '勐永镇', value: 854, value2: 322 },
-      { value: 150, name: '2024' },
+      { name: '孟定镇', value: 635, value2: 298 },
-      { value: 80, name: '2025' },
+      { name: '大兴乡', value: 795, value2: 382 },
     ],
     four: {
       percent: 0.3998,

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;