Merge branch 'dev' of http://47.109.205.240:3000/Web/daimp-front into dev
This commit is contained in:
commit
a8aef9a012
75
new-digital-agriculture-screen/auto-imports.d.ts
vendored
Normal file
75
new-digital-agriculture-screen/auto-imports.d.ts
vendored
Normal file
@ -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')
|
||||
}
|
||||
53
new-digital-agriculture-screen/components.d.ts
vendored
Normal file
53
new-digital-agriculture-screen/components.d.ts
vendored
Normal file
@ -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']
|
||||
}
|
||||
}
|
||||
BIN
new-digital-agriculture-screen/src/assets/images/trace/maprl.png
Normal file
BIN
new-digital-agriculture-screen/src/assets/images/trace/maprl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
@ -2,8 +2,8 @@
|
||||
<div ref="chartRef" :style="{ height, width }"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, reactive, watchEffect } from 'vue';
|
||||
import { cloneDeep } from 'lodash';
|
||||
import { ref, reactive, watchEffect, toRefs } from 'vue';
|
||||
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);
|
||||
|
||||
@ -23,7 +23,7 @@ const state = reactive({
|
||||
type: 'row',
|
||||
rowNum: 6,
|
||||
isAnimation: true,
|
||||
waitTime: 12,
|
||||
waitTime: 2,
|
||||
unit: '万元',
|
||||
sort: true,
|
||||
height: 12,
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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%',
|
||||
right: '5%',
|
||||
top: '15%',
|
||||
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样式调整添加这个类名
|
||||
className: 'custom-tooltip-container', // 自定义父容器类名
|
||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||
backgroundColor: 'rgba(0,0,0,0.6);',
|
||||
borderColor: '#35d0c0',
|
||||
formatter: (data) => {
|
||||
const params = data[0];
|
||||
let str = `<div class="custom-echarts-tips">
|
||||
<span>${params.name}</span><br/>
|
||||
<span>${params.marker} ${params.data} 万亩</span>
|
||||
</div>`;
|
||||
return str;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
// name: '年份',
|
||||
axisTick: {
|
||||
show: false,
|
||||
alignWithLabel: false,
|
||||
interval: 'auto',
|
||||
inside: false,
|
||||
length: 5,
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
width: 1,
|
||||
color: 'rgba(28, 158, 222, 1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
// name: '',
|
||||
borderRadius: 8,
|
||||
formatter: (params) => `
|
||||
<div style="font-weight:700;margin-bottom:5px;color:#fff;font-size: 16px;">${params[0].name}</div>
|
||||
${params
|
||||
.map(
|
||||
(p) => `
|
||||
<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>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join('')}
|
||||
`,
|
||||
extraCssText: 'backdrop-filter: blur(8px);',
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
if (!isEmpty(val)) {
|
||||
state.data = val;
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
@ -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,
|
||||
},
|
||||
|
||||
@ -100,11 +100,11 @@ const loadData = async () => {
|
||||
await sleep(500);
|
||||
state.data = {
|
||||
one: [
|
||||
{ value: 13.8, name: '农企/合作社' },
|
||||
{ value: 23.8, name: '农资企业' },
|
||||
{ value: 24.1, name: '种源企业' },
|
||||
{ value: 29.8, name: '生产加工企业' },
|
||||
{ value: 8.5, name: '农户' },
|
||||
{ value: 13.8, name: '农企/合作社', quantity: 202 },
|
||||
// { value: 23.8, name: '农资企业' },
|
||||
// { value: 24.1, name: '种源企业' },
|
||||
// { value: 29.8, 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' },
|
||||
{ value: 100, name: '2022' },
|
||||
{ value: 50, name: '2023' },
|
||||
{ value: 150, name: '2024' },
|
||||
{ value: 80, name: '2025' },
|
||||
{ name: '耿马镇', value: 870, value2: 455 },
|
||||
{ name: '勐撒镇', value: 603, value2: 555 },
|
||||
{ name: '勐永镇', value: 854, value2: 322 },
|
||||
{ name: '孟定镇', value: 635, value2: 298 },
|
||||
{ name: '大兴乡', value: 795, value2: 382 },
|
||||
],
|
||||
four: {
|
||||
percent: 0.3998,
|
||||
|
||||
@ -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>
|
||||
<span class="_label">产品名称</span>
|
||||
<span>{{ info.productName }}</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 v-for="item in list1" :key="item.name">
|
||||
<span class="_label">{{ item.title }}</span>
|
||||
<span>{{ item.name }}</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%" />
|
||||
<div>检测报告</div>
|
||||
<img src="../../../assets/images/trace/testReport.png" style="width: 100%" />
|
||||
<!-- <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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user