Web/daimp-front
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
姚俊旭 2025-05-22 16:14:04 +08:00
commit 92cf909ee6
27 changed files with 2130 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
new-digital-agriculture-screen/auto-imports.d.ts vendored Normal file
View 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
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 215 KiB

124
new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue
View File

@ -2,8 +2,8 @@
<div ref="chartRef" :style="{ height, width }"></div> <div ref="chartRef" :style="{ height, width }"></div>
</template> </template>
<script> <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'; import { useEcharts } from '@/hooks/useEcharts';
export default { export default {
name: 'CustomEchartBar', name: 'CustomEchartBar',
@ -33,36 +33,50 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
// 是否展示高亮圈圈
showMarkPoint: {
type: Boolean,
default: false,
},
// 是否堆叠展示
isHorizontal: {
type: Boolean,
default: false,
},
}, },
emits: ['click'], emits: ['click'],
setup(props, { emit }) { setup(props, { emit }) {
const chartRef = ref(null); const chartRef = ref(null);
const { setOptions, getInstance, startAutoPlay } = useEcharts(chartRef); const { setOptions, getInstance, startAutoPlay } = useEcharts(chartRef);
const option = reactive({ let option = reactive({
tooltip: { // tooltip: {
trigger: 'axis', // trigger: 'axis',
axisPointer: { // axisPointer: {
type: 'shadow', // type: 'shadow',
label: { // label: {
show: true, // show: true,
backgroundColor: '#333', // backgroundColor: '#333',
}, // },
}, // },
}, // },
legend: { // legend: {
top: 30, // top: 30,
}, // },
grid: { // grid: {
top: 60, // top: 60,
}, // },
xAxis: { // xAxis: {
type: 'category', // type: 'category',
data: [], // data: [],
}, // },
yAxis: { // yAxis: {
type: 'value', // type: 'value',
}, // },
series: [], // series: [],
// isHorizontal: {
// type: Boolean,
// default: false,
// },
}); });
watchEffect(() => { watchEffect(() => {
@ -70,37 +84,49 @@ export default {
}); });
function initCharts() { function initCharts() {
if (props.option) { if (props.option && props.option.grid.top == '15%') {
Object.assign(option, cloneDeep(props.option)); Object.assign(option, cloneDeep(props.option));
} } else {
let typeArr = Array.from(new Set(props.chartData.map((item) => item.type))); Object.assign(option, cloneDeep(props.option));
let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name))); let typeArr = Array.from(new Set(props.chartData.map((item) => item.type)));
let seriesData = []; let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
typeArr.forEach((type, index) => { let seriesData = [];
const barStyle = props.option?.barStyle ?? {}; typeArr.forEach((type, index) => {
let obj = { name: type, type: props.type, ...barStyle }; const barStyle = props.option?.barStyle ?? {};
let data = []; let obj = { name: type, type: props.type, ...barStyle };
xAxisData.forEach((x) => { let data = [];
let dataArr = props.chartData.filter((item) => type === item.type && item.name == x); xAxisData.forEach((x) => {
if (dataArr && dataArr.length > 0) { let dataArr = props.chartData.filter((item) => type === item.type && item.name == x);
data.push(dataArr[0].value); if (dataArr && dataArr.length > 0) {
} else { data.push(dataArr[0].value);
data.push(null); } else {
data.push(null);
}
});
obj['data'] = data;
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);
}); });
obj['data'] = data; option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData;
if (props.option?.color) { if (props.isHorizontal) {
obj.color = props.option?.color[index]; option.yAxis.data = xAxisData;
option.xAxis.data = [];
} else {
option.xAxis.data = xAxisData;
} }
seriesData.push(obj); }
}); console.log(option);
option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData;
option.xAxis.data = xAxisData;
setOptions(option); setOptions(option);
startAutoPlay({ startAutoPlay({
interval: 2000, interval: 2000,
seriesIndex: 0, seriesIndex: 0,
showTooltip: true, showTooltip: true,
showMarkPoint: props.showMarkPoint,
}); });
getInstance()?.off('click', onClick); getInstance()?.off('click', onClick);
getInstance()?.on('click', onClick); getInstance()?.on('click', onClick);

2
new-digital-agriculture-screen/src/styles/common/define.scss
View File

@ -11,8 +11,6 @@
.custom-tooltip-container{ .custom-tooltip-container{
border-radius: 8px !important; border-radius: 8px !important;
padding: 6px 16px 6px 8px !important;
background-color: rgba(0,0,0,0.7) !important;
backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
& span{ & span{
width: 8px !important; width: 8px !important;

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

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

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

@ -194,7 +194,8 @@ function getPie3D(pieData, internalDiameterRatio) {
formatter: (name) => { formatter: (name) => {
if (state.data.length) { if (state.data.length) {
const item = state.data.filter((item) => item.name === name)[0]; 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 { return {
name: row.name, name: row.name,
value: row.value, value: row.value,
quantity: row.quantity,
}; };
}); });
initData(pieData); initData(pieData);

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

@ -1,9 +1,9 @@
<template> <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> </template>
<script setup> <script setup>
import { reactive, watch } from 'vue'; import { reactive, watch } from 'vue';
import { isEmpty } from '@/utils'; import * as echarts from 'echarts';
const props = defineProps({ const props = defineProps({
data: { data: {
@ -11,69 +11,145 @@ const props = defineProps({
default: () => [], 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: 0,
shadowColor: colors[idx],
// shadowBlur: 8,
shadowOffsetY: 0,
},
label: {
// 添加标签配置
show: true,
position: 'inside',
color: '#000', // 黑色文字确保可见
backgroundColor: 'rgba(255,255,255,0.7)', // 白色背景
padding: [2, 4],
borderRadius: 4,
z: 100,
normal: {
show: true,
position: 'inside',
formatter: '{c}万亩',
},
},
silent: true, // 禁用所有交互效果
animation: false, // 禁用动画
emphasis: {
focus: 'series',
disabled: true, // 禁用高亮效果
},
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({ const state = reactive({
data: rawData,
option: { option: {
color: ['#35D0C0'], legend: {
data: types,
textStyle: {
color: '#fff',
},
selectedMode: false, // 禁用图例切换功能
inactiveColor: '#fff', // 设置非激活状态颜色（保持原色）
},
grid: { grid: {
left: '5%', top: '15%',
right: '5%', left: '3%',
right: '10%',
bottom: '5%', bottom: '5%',
top: '10%',
containLabel: true, 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: { tooltip: {
show: false,
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow', type: 'shadow',
}, },
// tooltip样式调整添加这个类名 backgroundColor: 'rgba(0,0,0,0);',
className: 'custom-tooltip-container', // 自定义父容器类名
backgroundColor: 'rgba(0,0,0,0.5)',
borderColor: '#35d0c0', 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> </script>

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

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

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

@ -100,11 +100,11 @@ const loadData = async () => {
await sleep(500); await sleep(500);
state.data = { state.data = {
one: [ 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: [ two: [
{ name: '耿马镇', value: 870 }, { name: '耿马镇', value: 870 },
@ -117,11 +117,11 @@ const loadData = async () => {
{ name: '芒洪乡', value: 682 }, { name: '芒洪乡', value: 682 },
], ],
there: [ 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: { four: {
percent: 0.3998, percent: 0.3998,

119
new-digital-agriculture-screen/src/views/entities/components/valueCharts.vue
View File

@ -16,6 +16,15 @@ const props = defineProps({
}, },
}); });
let values = reactive([]);
const getValue = (dataList) => {
let arr = [];
for (let i = 0; i < dataList.length; i++) {
arr.push(dataList[i].value);
}
return arr;
};
const state = reactive({ const state = reactive({
data: [], data: [],
option: { option: {
@ -45,10 +54,10 @@ const state = reactive({
extraCssText: 'backdrop-filter: blur(8px);', extraCssText: 'backdrop-filter: blur(8px);',
}, },
barStyle: { barStyle: {
barWidth: 10, barWidth: 14,
itemStyle: { itemStyle: {
borderWidth: 10, borderWidth: 14,
borderRadius: [8, 8, 8, 8], // 设置柱子的圆角半径 borderRadius: [10, 10, 10, 10], // 设置柱子的圆角半径
}, },
color: { color: {
type: 'linear', type: 'linear',
@ -86,25 +95,100 @@ const state = reactive({
show: false, show: false,
}, },
}, },
yAxis: { yAxis: [
type: 'category', {
data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'], type: 'category',
axisTick: { data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'],
show: false, axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLine: {
show: false,
},
}, },
splitLine: { {
show: false, // 右侧数量
type: 'category',
inverse: true,
offset: 10,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
textStyle: {
color: '#ffffff',
fontSize: '16',
},
formatter: function (value) {
let str = '{title|' + value + '吨}';
return str;
},
rich: {
title: {
color: '#fff',
fontSize: 16,
},
},
},
data: [12000, 8000, 6000, 4000, 3500],
}, },
axisLine: { ],
show: false,
},
},
series: [ series: [
{ {
name: '值',
type: 'bar', type: 'bar',
// barWidth: '40%', // 设置柱的宽度 zlevel: 1,
// barMinHeight: 2, // 设置柱的最小高度 barBorderRadius: 10,
// barGap: '20%', // 设置柱之间的间隙 itemStyle: {
borderRadius: [10, 10, 10, 10],
color: 'rgba(100, 200, 255, 0.3)',
},
backgroundStyle: {
color: 'rgba(100, 200, 255, 0.3)',
borderRadius: [10, 10, 10, 10], // 必须与barBorderRadius保持一致
},
barWidth: 20,
data: values,
label: {
position: [0, -16],
align: 'left',
show: true,
formatter: (params) => {
return params.name;
},
},
barMaxWidth: 40,
markLine: {
label: {
color: '#26a69a',
},
},
},
{
name: '背景',
type: 'bar',
barWidth: 20,
barGap: '-100%',
data: [],
barBorderRadius: 30,
itemStyle: {
normal: {
color: 'rgba(105,131,242,.3)',
borderRadius: 10,
},
},
label: {
show: false,
},
barMaxWidth: 40,
markLine: {
label: {
color: '#26a69a',
},
},
}, },
], ],
}, },
@ -148,6 +232,7 @@ const loadData = (val) => {
} }
} }
} }
values = getValue(state.data);
console.log(val); console.log(val);
}; };
</script> </script>

11
new-digital-agriculture-screen/src/views/land/components/basicInfo.vue
View File

@ -33,26 +33,27 @@ const props = defineProps({
.basic { .basic {
width: 100%; width: 100%;
margin-top: 10px; margin-top: 10px;
height: 100%; height: 95%;
border: 2px solid #01fefd; border: 2px solid #01fefd;
border-radius: 16px; border-radius: 16px;
backdrop-filter: blur(2px); backdrop-filter: blur(2px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: flex-start;
color: #ffffff; color: #ffffff;
padding: 20px; padding: 20px;
.line { .line {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
text-align: left; text-align: left;
line-height: 20px; line-height: 50px;
.title { .title {
font-size: 16px; font-size: 14px;
width: 40%; width: 40%;
color: #ddd;
} }
.values { .values {
font-size: 20px; font-size: 16px;
width: 60%; width: 60%;
} }
} }

1
new-digital-agriculture-screen/src/views/land/components/landOne.vue
View File

@ -23,6 +23,7 @@ const state = reactive({
containLabel: true, containLabel: true,
}, },
tooltip: { tooltip: {
show: true,
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow', type: 'shadow',

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

@ -22,45 +22,59 @@
<section class="line_info" :style="{ '--top': info.show ? '18vh' : '140vh' }"> <section class="line_info" :style="{ '--top': info.show ? '18vh' : '140vh' }">
<i class="el-icon-close" @click="handleCloseInfo"></i> <i class="el-icon-close" @click="handleCloseInfo"></i>
<section> <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"> <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> </div>
</section> </section>
<section class="route_box"> <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="_circle"></div>
<div class="_name">{{ item.name }}</div> <div class="_name">{{ item.name }}</div>
<div class="_time">{{ item.time }}</div> <div class="_time">{{ item.time }}</div>
</div> </div> -->
<div style="text-align: center"> <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> </div>
</section> </section>
</section> </section>
@ -82,6 +96,44 @@ onMounted(() => {
}); });
let list = ref([]); 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 = { const classOptions = {
singleHeight: 48, singleHeight: 48,
}; };
@ -103,7 +155,7 @@ function handleCloseInfo() {
.label { .label {
display: grid; display: grid;
grid-template-columns: 25% 40% 18% 17%; 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; color: #ffffff;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
@ -162,6 +214,58 @@ function handleCloseInfo() {
z-index: 9999; z-index: 9999;
transition: all 0.8s cubic-bezier(0.58, 0.15, 0.4, 1.42); transition: all 0.8s cubic-bezier(0.58, 0.15, 0.4, 1.42);
font-size: 18px; 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 { ._label {
color: #01fefd; color: #01fefd;
} }
@ -207,7 +311,6 @@ function handleCloseInfo() {
} }
} }
.route_box { .route_box {
padding: 0 34px;
> div { > div {
position: relative; position: relative;
padding-bottom: 16px; padding-bottom: 16px;

7
sub-government-affairs-service/src/layouts/component/Header/index.vue
View File

@ -1,10 +1,3 @@
<!--
* @Description:
* @Author: zenghua.wang
* @Date: 2023-06-20 14:29:45
* @LastEditors: zenghua.wang
* @LastEditTime: 2025-01-24 15:11:22
-->
<template> <template>
<div class="layout-header-placeholder" :style="stylePlaceholder()"></div> <div class="layout-header-placeholder" :style="stylePlaceholder()"></div>
<div <div

24
sub-government-affairs-service/src/router/modules/resource.js
View File

@ -7,29 +7,35 @@ import dictRoutes from './dict';
export default [ export default [
{ {
path: '/sub-government-affairs-service/resource', path: '/sub-government-affairs-service/resource',
name: 'resource', name: 'resourceManagement',
component: Layout, component: Layout,
redirect: '/sub-government-affairs-service/grid', redirect: '/sub-government-affairs-service/grid',
meta: { title: '土地资源管理', icon: 'icon-test' }, meta: { title: '土地资源管理', icon: 'icon-test' },
children: [ children: [
{ {
redirect: '/sub-government-affairs-service/grid', redirect: '/sub-government-affairs-service/add-grid',
path: '/sub-government-affairs-service/grid', path: '/sub-government-affairs-service/grid',
component: () => import('@/views/resource/grid/index.vue'), // component: () => import('@/views/resource/grid/index.vue'),
name: 'grid', name: 'grid',
meta: { title: '网格化管理', icon: 'Memo' }, meta: { title: '网格化管理', icon: 'Memo' },
children: [ children: [
{ {
path: '/sub-government-affairs-service/grid', path: '/sub-government-affairs-service/add-grid',
component: () => import('@/views/resource/grid/index.vue'), component: () => import('@/views/resource/grid/index.vue'),
name: 'grid1', name: 'add',
meta: { title: '新增网格', icon: '' }, meta: { title: '新增网格', icon: '' },
}, },
{ {
path: '/sub-government-affairs-service/grid', path: '/sub-government-affairs-service/add--grid-member',
component: () => import('@/views/resource/grid/index.vue'), component: () => import('@/views/resource/grid/AddGridMember.vue'),
name: 'grid2', name: 'member',
meta: { title: '网格化地图', icon: '' }, meta: { title: '新增网格员', icon: '' },
},
{
path: '/sub-government-affairs-service/grid--management',
component: () => import('@/views/resource/grid/GridManagement.vue'),
name: 'management',
meta: { title: '网格化管理', icon: '' },
}, },
], ],
}, },

375
sub-government-affairs-service/src/views/resource/grid/AddGrid.vue Normal file
View File

@ -0,0 +1,375 @@
<template>
<div class="custom-page">
<avue-crud
ref="crudRef"
v-model="state.form"
v-model:search="state.query"
v-model:page="state.pageData"
:table-loading="state.loading"
:data="state.data"
:option="state.options"
@refresh-change="refreshChange"
@search-reset="searchChange"
@search-change="searchChange"
@selection-change="selectionChange"
@current-change="currentChange"
@size-change="sizeChange"
@row-save="rowSave"
@row-update="rowUpdate"
@row-del="rowDel"
>
<template #menu-left>
<el-button type="success" icon="download" @click="onExport">导出</el-button>
</template>
<template #menu="scope">
<custom-table-operate :actions="state.options.actions" :data="scope" />
</template>
</avue-crud>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { useApp } from '@/hooks';
import { CRUD_OPTIONS } from '@/config';
import { isEmpty, downloadFile } from '@/utils';
import { useUserStore } from '@/store/modules/user';
import { compact } from 'lodash';
import { GetEntityList, AddEntity, UpdateEntity, DeleteEntity, ExportEntity } from '@/apis/resource/grid';
const { VITE_APP_BASE_API } = import.meta.env;
const app = useApp();
const UserStore = useUserStore();
const crudRef = ref(null);
const state = reactive({
loading: false,
query: {
current: 1,
size: 10,
},
form: {},
selection: [],
options: {
...CRUD_OPTIONS,
// addBtnText: '添加网格',
column: [
{
label: '网格区',
prop: 'gridArea',
search: true,
width: 200,
addDisplay: false,
editDisplay: false,
viewDisplay: true,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '网格名称',
prop: 'gridName',
search: true,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '网格区域',
prop: 'gridAreaName',
width: 300,
display: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '网格区域',
prop: 'cities',
type: 'cascader',
hide: true,
addDisplay: true,
editDisplay: true,
viewDisplay: false,
// multiple: true,
// checkStrictly: true,
// collapseTags: true,
// emitPath: false,
// checkDescendants: false,
props: {
label: 'areaName',
value: 'areaCode',
children: 'areaChildVOS',
},
dicUrl: `${VITE_APP_BASE_API}/system/area/region?areaCode=530000`,
dicHeaders: {
authorization: UserStore.token,
},
dicFormatter: (res) => res.data ?? [],
rules: {
required: true,
message: '请选择',
trigger: 'blur',
},
},
{
label: '网格管理员',
prop: 'gridManager',
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '联系方式',
prop: 'contactInfo',
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '省',
prop: 'provinceCode',
hide: true,
display: false,
},
{
label: '市',
prop: 'cityCode',
hide: true,
display: false,
},
{
label: '县/区',
prop: 'gridAreaCode',
hide: true,
display: false,
},
{
label: '乡镇',
prop: 'townCode',
hide: true,
display: false,
},
{
label: '乡镇',
prop: 'village',
hide: true,
display: false,
},
{
label: '备注',
prop: 'note',
type: 'textarea',
span: 24,
rows: 4,
overHidden: true,
width: 200,
},
{
label: '创建时间',
prop: 'createTime',
width: 200,
hide: true,
display: false,
},
],
actions: [
{
name: '查看',
icon: 'view',
event: ({ row }) => rowView(row),
},
{
name: '编辑',
icon: 'edit',
event: ({ row }) => rowEdit(row),
},
{
type: 'danger',
name: '删除',
icon: 'delete',
event: ({ row }) => rowDel(row),
},
],
},
pageData: {
total: 0,
currentPage: 1,
pageSize: 10,
},
data: [],
currentRow: {},
});
// 加载
const loadData = () => {
state.loading = true;
GetEntityList(state.query)
.then((res) => {
if (res.code === 200) {
const { current, size, total, records } = res.data;
state.data = records;
state.pageData = {
currentPage: current || 1,
pageSize: size || 10,
total: total,
};
}
})
.catch((err) => {
app.$message.error(err.msg);
state.data = [];
})
.finally(() => {
state.loading = false;
});
};
loadData();
// 页数
const currentChange = (current) => {
state.query.current = current;
loadData();
};
// 条数
const sizeChange = (size) => {
state.query.size = size;
loadData();
};
// 搜索
const searchChange = (params, done) => {
if (done) done();
state.query = params;
state.query.current = 1;
loadData();
};
// 刷新
const refreshChange = () => {
loadData();
app.$message.success('刷新成功');
};
// 选择
const selectionChange = (rows) => {
state.selection = rows;
};
// 查看
const rowView = (row) => {
crudRef.value.rowView(row);
};
const setCity = (row) => {
if (!isEmpty(row.cities)) {
row.provinceCode = row?.cities[0] ?? null;
row.cityCode = row?.cities[1] ?? null;
row.gridAreaCode = row?.cities[2] ?? null;
row.townCode = row?.cities[3] ?? null;
row.village = row?.cities[4] ?? null;
// row.village = row?.cities.join(',');
}
};
// 新增
const rowSave = (row, done, loading) => {
setCity(row);
AddEntity(row)
.then((res) => {
if (res.code === 200) {
app.$message.success('添加成功！');
done();
loadData();
}
})
.catch((err) => {
app.$message.error(err.msg);
})
.finally(() => {
loading();
});
};
// 编辑
const rowEdit = (row) => {
const village = !isEmpty(row.village) ? row.village : [];
row.cities = compact([row.provinceCode, row.cityCode, row.gridAreaCode ?? '', row.townCode ?? '', ...village]);
crudRef.value.rowEdit(row);
};
const rowUpdate = (row, index, done, loading) => {
setCity(row);
UpdateEntity(row)
.then((res) => {
if (res.code === 200) {
app.$message.success('更新成功！');
done();
loadData();
}
})
.catch((err) => {
app.$message.error(err.msg);
})
.finally(() => {
loading();
});
};
// 删除
const rowDel = (row, index, done) => {
if (isEmpty(row)) return;
app
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
DeleteEntity({ id: row.id })
.then((res) => {
if (res.code === 200) {
app.$message.success('删除成功！');
loadData();
}
})
.catch((err) => {
app.$message.error(err.msg);
});
})
.catch(() => {});
};
// 导出
const onExport = () => {
if (isEmpty(state.data)) {
app.$message.error('当前暂时没有可供导出的数据！');
return;
}
state.loading = true;
const fileName = '网格明细表';
ExportEntity(state.query)
.then((res) => {
if (res.status === 200) {
downloadFile(res.data, `${fileName}.xlsx`, 'blob');
app.$message.success('导出成功！');
}
})
.catch((err) => {
app.$message.error('导出失败！');
})
.finally(() => {
state.loading = false;
});
};
</script>

375
sub-government-affairs-service/src/views/resource/grid/AddGridMember.vue Normal file
View File

@ -0,0 +1,375 @@
<template>
<div class="custom-page">
<avue-crud
ref="crudRef"
v-model="state.form"
v-model:search="state.query"
v-model:page="state.pageData"
:table-loading="state.loading"
:data="state.data"
:option="state.options"
@refresh-change="refreshChange"
@search-reset="searchChange"
@search-change="searchChange"
@selection-change="selectionChange"
@current-change="currentChange"
@size-change="sizeChange"
@row-save="rowSave"
@row-update="rowUpdate"
@row-del="rowDel"
>
<template #menu-left>
<el-button type="success" icon="download" @click="onExport">导出</el-button>
</template>
<template #menu="scope">
<custom-table-operate :actions="state.options.actions" :data="scope" />
</template>
</avue-crud>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { useApp } from '@/hooks';
import { CRUD_OPTIONS } from '@/config';
import { isEmpty, downloadFile } from '@/utils';
import { useUserStore } from '@/store/modules/user';
import { compact } from 'lodash';
import { GetEntityList, AddEntity, UpdateEntity, DeleteEntity, ExportEntity } from '@/apis/resource/grid';
const { VITE_APP_BASE_API } = import.meta.env;
const app = useApp();
const UserStore = useUserStore();
const crudRef = ref(null);
const state = reactive({
loading: false,
query: {
current: 1,
size: 10,
},
form: {},
selection: [],
options: {
...CRUD_OPTIONS,
// addBtnText: '添加网格',
column: [
{
label: '网格区',
prop: 'gridArea',
search: true,
width: 200,
addDisplay: false,
editDisplay: false,
viewDisplay: true,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '网格名称',
prop: 'gridName',
search: true,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '网格区域',
prop: 'gridAreaName',
width: 300,
display: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '网格区域',
prop: 'cities',
type: 'cascader',
hide: true,
addDisplay: true,
editDisplay: true,
viewDisplay: false,
// multiple: true,
// checkStrictly: true,
// collapseTags: true,
// emitPath: false,
// checkDescendants: false,
props: {
label: 'areaName',
value: 'areaCode',
children: 'areaChildVOS',
},
dicUrl: `${VITE_APP_BASE_API}/system/area/region?areaCode=530000`,
dicHeaders: {
authorization: UserStore.token,
},
dicFormatter: (res) => res.data ?? [],
rules: {
required: true,
message: '请选择',
trigger: 'blur',
},
},
{
label: '网格管理员',
prop: 'gridManager',
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '联系方式',
prop: 'contactInfo',
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '省',
prop: 'provinceCode',
hide: true,
display: false,
},
{
label: '市',
prop: 'cityCode',
hide: true,
display: false,
},
{
label: '县/区',
prop: 'gridAreaCode',
hide: true,
display: false,
},
{
label: '乡镇',
prop: 'townCode',
hide: true,
display: false,
},
{
label: '乡镇',
prop: 'village',
hide: true,
display: false,
},
{
label: '备注',
prop: 'note',
type: 'textarea',
span: 24,
rows: 4,
overHidden: true,
width: 200,
},
{
label: '创建时间',
prop: 'createTime',
width: 200,
hide: true,
display: false,
},
],
actions: [
{
name: '查看',
icon: 'view',
event: ({ row }) => rowView(row),
},
{
name: '编辑',
icon: 'edit',
event: ({ row }) => rowEdit(row),
},
{
type: 'danger',
name: '删除',
icon: 'delete',
event: ({ row }) => rowDel(row),
},
],
},
pageData: {
total: 0,
currentPage: 1,
pageSize: 10,
},
data: [],
currentRow: {},
});
// 加载
const loadData = () => {
state.loading = true;
GetEntityList(state.query)
.then((res) => {
if (res.code === 200) {
const { current, size, total, records } = res.data;
state.data = records;
state.pageData = {
currentPage: current || 1,
pageSize: size || 10,
total: total,
};
}
})
.catch((err) => {
app.$message.error(err.msg);
state.data = [];
})
.finally(() => {
state.loading = false;
});
};
loadData();
// 页数
const currentChange = (current) => {
state.query.current = current;
loadData();
};
// 条数
const sizeChange = (size) => {
state.query.size = size;
loadData();
};
// 搜索
const searchChange = (params, done) => {
if (done) done();
state.query = params;
state.query.current = 1;
loadData();
};
// 刷新
const refreshChange = () => {
loadData();
app.$message.success('刷新成功');
};
// 选择
const selectionChange = (rows) => {
state.selection = rows;
};
// 查看
const rowView = (row) => {
crudRef.value.rowView(row);
};
const setCity = (row) => {
if (!isEmpty(row.cities)) {
row.provinceCode = row?.cities[0] ?? null;
row.cityCode = row?.cities[1] ?? null;
row.gridAreaCode = row?.cities[2] ?? null;
row.townCode = row?.cities[3] ?? null;
row.village = row?.cities[4] ?? null;
// row.village = row?.cities.join(',');
}
};
// 新增
const rowSave = (row, done, loading) => {
setCity(row);
AddEntity(row)
.then((res) => {
if (res.code === 200) {
app.$message.success('添加成功！');
done();
loadData();
}
})
.catch((err) => {
app.$message.error(err.msg);
})
.finally(() => {
loading();
});
};
// 编辑
const rowEdit = (row) => {
const village = !isEmpty(row.village) ? row.village : [];
row.cities = compact([row.provinceCode, row.cityCode, row.gridAreaCode ?? '', row.townCode ?? '', ...village]);
crudRef.value.rowEdit(row);
};
const rowUpdate = (row, index, done, loading) => {
setCity(row);
UpdateEntity(row)
.then((res) => {
if (res.code === 200) {
app.$message.success('更新成功！');
done();
loadData();
}
})
.catch((err) => {
app.$message.error(err.msg);
})
.finally(() => {
loading();
});
};
// 删除
const rowDel = (row, index, done) => {
if (isEmpty(row)) return;
app
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
DeleteEntity({ id: row.id })
.then((res) => {
if (res.code === 200) {
app.$message.success('删除成功！');
loadData();
}
})
.catch((err) => {
app.$message.error(err.msg);
});
})
.catch(() => {});
};
// 导出
const onExport = () => {
if (isEmpty(state.data)) {
app.$message.error('当前暂时没有可供导出的数据！');
return;
}
state.loading = true;
const fileName = '网格明细表';
ExportEntity(state.query)
.then((res) => {
if (res.status === 200) {
downloadFile(res.data, `${fileName}.xlsx`, 'blob');
app.$message.success('导出成功！');
}
})
.catch((err) => {
app.$message.error('导出失败！');
})
.finally(() => {
state.loading = false;
});
};
</script>

15
sub-government-affairs-service/src/views/resource/grid/GridManagement.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<div>
<h1>网格化管理</h1>
</div>
</template>
<script setup>
// 组件逻辑可在此添加
</script>
<style scoped>
h1 {
color: #2c3e50;
}
</style>

1
sub-operation-service/package.json
View File

@ -31,6 +31,7 @@
"hls.js": "^1.6.2", "hls.js": "^1.6.2",
"js-base64": "^3.7.6", "js-base64": "^3.7.6",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"marked": "^15.0.12",
"moment": "^2.30.1", "moment": "^2.30.1",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"path-browserify": "^1.0.1", "path-browserify": "^1.0.1",

42
sub-operation-service/src/router/index.js
View File

@ -7,6 +7,7 @@
*/ */
import { createRouter, createWebHistory } from 'vue-router'; import { createRouter, createWebHistory } from 'vue-router';
import Layout from '@/layouts/index.vue'; import Layout from '@/layouts/index.vue';
import BrandLayout from '@/views/brand/index.vue';
import Views from '@/layouts/Views.vue'; import Views from '@/layouts/Views.vue';
import userCentre from '@/layouts/userCentre.vue'; import userCentre from '@/layouts/userCentre.vue';
@ -236,43 +237,38 @@ export const constantRoutes = [
meta: { title: '公共品牌' }, meta: { title: '公共品牌' },
children: [ children: [
{ {
path: 'apply', path: '',
component: () => import('@/views/brand/index.vue'), component: BrandLayout,
redirect: '/sub-operation-service/brand/apply',
children: [ children: [
{ {
path: '', path: 'apply',
component: () => import('@/views/brand/components/ApplyList.vue'),
name: 'brandApplyList', name: 'brandApplyList',
component: () => import('@/views/brand/components/ApplyList.vue'),
meta: { title: '使用申请' }, meta: { title: '使用申请' },
}, },
{ {
path: ':id', path: 'apply/:id',
component: () => import('@/views/brand/components/ApplyDetail.vue'),
name: 'brandApplyDetail', name: 'brandApplyDetail',
component: () => import('@/views/brand/components/ApplyDetail.vue'),
meta: { title: '产品申请' }, meta: { title: '产品申请' },
}, },
],
},
{
path: 'auth',
component: () => import('@/views/brand/index.vue'),
children: [
{ {
path: '', path: 'auth/record',
component: () => import('@/views/brand/components/Auth.vue'),
name: 'brandAuth', name: 'brandAuth',
meta: { title: '授权管理' }, component: () => import('@/views/brand/components/Auth.vue'),
meta: { title: '授权记录' },
}, },
],
},
{
path: 'monitor',
component: () => import('@/views/brand/index.vue'),
children: [
{ {
path: '', path: 'auth/system',
component: () => import('@/views/brand/components/Monitor.vue'), name: 'brandSystem',
component: () => import('@/views/brand/components/BrandSystem.vue'),
meta: { title: '品牌制度' },
},
{
path: 'monitor',
name: 'brandMonitor', name: 'brandMonitor',
component: () => import('@/views/brand/components/Monitor.vue'),
meta: { title: '使用监管' }, meta: { title: '使用监管' },
}, },
], ],

23
sub-operation-service/src/views/brand/components/ApplyList.vue
View File

@ -28,13 +28,34 @@ getApplyList().then((res) => {
products.value = res.data; products.value = res.data;
}); });
const applyData = [
{ id: 1, name: '耿马绿色蔬菜', imageUrl: 'images/brand/11.png' },
{ id: 2, name: '云南高山茶', imageUrl: 'images/brand/12.png' },
{ id: 3, name: '新疆大枣', imageUrl: 'images/brand/13.png' },
{ id: 4, name: '东北大米', imageUrl: 'images/brand/14.png' },
{ id: 5, name: '山东苹果', imageUrl: 'images/brand/15.png' },
{ id: 6, name: '四川泡菜', imageUrl: 'images/brand/16.png' },
{ id: 7, name: '江苏阳澄湖大闸蟹', imageUrl: 'images/brand/11.png' },
{ id: 8, name: '海南椰子', imageUrl: 'images/brand/12.png' },
{ id: 9, name: '广东早茶', imageUrl: 'images/brand/13.png' },
{ id: 10, name: '北京烤鸭', imageUrl: 'images/brand/14.png' },
{ id: 11, name: '西藏青稞酒', imageUrl: 'images/brand/15.png' },
{ id: 12, name: '青海牦牛肉', imageUrl: 'images/brand/16.png' },
];
function gotoApplication(id) { function gotoApplication(id) {
router.push(`/sub-operation-service/brand/apply/${id}`); router.push(`/sub-operation-service/brand/apply/${id}`);
} }
// TODO: 对接口需要删除这个方法
function data() {
products.value = applyData;
}
// 组件挂载时获取数据 // 组件挂载时获取数据
onMounted(() => { onMounted(() => {
getApplyList; // getApplyList;
data();
}); });
</script> </script>

4
sub-operation-service/src/views/brand/components/Auth.vue
View File

@ -63,7 +63,7 @@
</div> </div>
</div> </div>
<div class="product-action"> <div class="product-action">
<el-tag :class="statusClass(activeTab)" :type="statusTypeMap[product.status]">{{ product.statusLabel }}</el-tag> <el-tag :class="statusClass(activeStatus)" :type="statusTypeMap[product.status]">{{ product.statusLabel }}</el-tag>
<el-button <el-button
v-if="product.status === 'authorized'" v-if="product.status === 'authorized'"
type="primary" type="primary"
@ -204,7 +204,7 @@ const handleCertificate = (product) => {
height: 100%; height: 100%;
} }
.product-list { .product-list {
height: 100%; height: calc(100% - 40px);
overflow: auto; overflow: auto;
} }

504
sub-operation-service/src/views/brand/components/BrandSystem.vue Normal file
View File

@ -0,0 +1,504 @@
<template>
<div class="brand-system">
<!-- 搜索与筛选 -->
<div class="system-header">
<el-input v-model="searchQuery" placeholder="搜索制度名称/编号" prefix-icon="el-icon-search" />
<el-select v-model="filterType" placeholder="分类筛选">
<el-option v-for="type in filterTypes" :key="type.value" :label="type.label" :value="type.value" />
</el-select>
</div>
<!-- 制度列表 -->
<div class="system-list">
<div v-for="(item, index) in filteredList" :key="index" class="system-card" @click="showDetail(item)">
<div class="card-header">
<div class="card-title">
<i class="el-icon-document"></i>
{{ item.title }}
</div>
<div class="card-meta">
<span>编号：{{ item.code }}</span>
<span>版本：v{{ item.version }}</span>
</div>
</div>
<div class="card-content">
<p>{{ item.desc }}</p>
</div>
<div class="card-footer">
<span :class="`status-tag ${item.status === '生效中' ? 'active' : 'inactive'}`">{{ item.status }}</span>
<span>生效日期：{{ item.effectiveDate }}</span>
</div>
</div>
</div>
<!-- 浮层弹窗 -->
<transition name="fade">
<div v-if="showDialog" class="dialog-mask" @click.self="hideDetail">
<div class="dialog-container" :style="{ width: dialogWidth }">
<div class="dialog-header">
<div class="header-left">
<h3>{{ currentDetail.title }}</h3>
<div class="dialog-meta">
<span>编号：{{ currentDetail.code }}</span>
<span>版本：v{{ currentDetail.version }}</span>
<span :class="`status-tag ${currentDetail.status === '生效中' ? 'active' : 'inactive'}`">{{ currentDetail.status }}</span>
</div>
</div>
<div class="dialog-actions">
<el-button icon="el-icon-download" @click.stop="downloadDoc(currentDetail)">下载</el-button>
<el-button icon="el-icon-printer" @click.stop="printDoc">打印</el-button>
<i class="el-icon-close" @click="hideDetail"></i>
</div>
</div>
<div class="dialog-content">
<!-- 使用Markdown-it渲染的HTML内容 -->
<div class="doc-preview" v-html="compiledMarkdown"></div>
</div>
<div class="dialog-footer">
<div class="footer-info">
<p>制定部门：{{ currentDetail.department }}</p>
<p>发布日期：{{ currentDetail.publishDate }}</p>
</div>
<el-button @click="hideDetail">关闭</el-button>
</div>
</div>
</div>
</transition>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
import { ElMessage, ElButton } from 'element-plus';
// 筛选类型
const filterTypes = [
{ label: '全部', value: '' },
{ label: '管理规范', value: 'management' },
{ label: '推广制度', value: 'promotion' },
{ label: '评估体系', value: 'evaluation' },
];
// 状态管理
const searchQuery = ref('');
const filterType = ref('');
const showDialog = ref(false);
const currentDetail = ref({});
const dialogWidth = ref('800px');
// 增强型数据集
const systemList = ref([
{
title: '品牌管理规范V2.0',
code: 'BRM-2023-001',
desc: '包含品牌标识、使用规范、VI应用等内容的最新版本',
content:
'# 品牌管理规范 V2.0\n\n## 第一章 总则\n第一条 本规范适用于集团所有子品牌管理...\n\n## 第二章 标识使用\n第五条 品牌标识不得在以下场景使用：\n1. 非官方宣传材料\n2. 竞品对比文档\n3. 未经审批的第三方平台\n\n## 第三章 数字资产\n第九条 数字资源库包含：\n- 官方LOGO矢量文件\n- 品牌色卡（CMYK/RGB/HEX）\n- 字体库授权文件\n\n## 第四章 附则\n第十二条 本规范自2023年9月1日起生效，原有版本自动废止。',
type: 'management',
file: 'BRM-2023-001.docx',
version: '2.0',
effectiveDate: '2023-09-01',
status: '生效中',
department: '品牌管理中心',
publishDate: '2023-08-25',
},
{
title: '品牌推广制度V1.3',
code: 'BRP-2023-005',
desc: '包含线上线下推广策略、预算分配及效果评估标准',
content:
'# 品牌推广制度 V1.3\n\n## 第一章 推广策略\n\n### 第五条 渠道配置\n- 数字媒体：占比40%\n- 户外广告：占比25%\n- 活动营销：占比20%\n- 公关传播：占比15%\n\n## 第二章 预算管理\n\n### 第十条 预算审批流程\n市场部提交方案 → 财务部审核 → 副总裁审批 → 执行备案\n\n## 第三章 效果评估\n\n### 第十六条 KPI指标\n| 指标 | 目标值 | 评估周期 |\n|-------|-------|---------|\n| 品牌认知度 | ≥75% | 季度 |\n| 媒体曝光量 | ≥500万次 | 月度 |\n| 转化率 | ≥3.5% | 月度 |',
type: 'promotion',
file: 'BRP-2023-005.docx',
version: '1.3',
effectiveDate: '2023-07-15',
status: '生效中',
department: '市场推广部',
publishDate: '2023-07-10',
},
{
title: '品牌评估体系V1.0',
code: 'BRA-2023-003',
desc: '基于市场反馈和财务数据的品牌价值评估方法与指标',
content:
'# 品牌评估体系 V1.0\n\n## 一、评估维度\n\n### 1.1 市场维度\n- 市场份额增长率\n- 客户满意度评分\n- 行业影响力指数\n\n### 1.2 财务维度\n- 品牌溢价率\n- ROI计算公式\n- 资产回报率\n\n## 二、评估周期\n\n| 级别 | 评估频率 |\n|------|---------|\n| 核心品牌 | 月度 |\n| 重点品牌 | 双月度 |\n| 新兴品牌 | 季度 |\n## 三、数据采集\n- CRM系统数据\n- 财务报表\n- 第三方调研报告',
type: 'evaluation',
file: 'BRA-2023-003.docx',
version: '1.0',
effectiveDate: '2023-06-01',
status: '生效中',
department: '战略发展部',
publishDate: '2023-05-28',
},
]);
// 过滤列表
const filteredList = computed(() => {
return systemList.value.filter((item) => {
const matchSearch =
item.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
item.desc.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
item.code.toLowerCase().includes(searchQuery.value.toLowerCase());
const matchFilter = filterType.value ? item.type === filterType.value : true;
return matchSearch && matchFilter;
});
});
// 显示详情
const showDetail = (item) => {
currentDetail.value = item;
showDialog.value = true;
};
// 隐藏详情
const hideDetail = () => {
showDialog.value = false;
};
// 下载文档
const downloadDoc = (item) => {
ElMessage.success({
message: `开始下载 ${item.file} (${item.code})`,
duration: 1500,
});
// 实际开发中可替换为真实的下载逻辑
// window.open(`/api/download/${item.id}`);
};
// 打印功能
const printDoc = () => {
ElMessage.info('准备打印文档...');
// 实际开发中可集成打印功能
// window.print();
};
// 在setup函数中
// 恢复 marked 导入
import { marked } from 'marked';
// 恢复 computed 属性
const compiledMarkdown = computed(() => {
return marked.parse(currentDetail.value.content);
});
// 在 setup 函数中配置 editor
const editorConfig = {
readOnly: true,
placeholder: '暂无内容',
showToolbar: false,
// 启用 Markdown 解析
parseMarkdown: true,
};
</script>
<style lang="scss" scoped>
$color-primary: #25bf82;
$color-bg: #f5f7fa;
$color-border: #e4e4e4;
$color-text: #333;
$color-meta: #666;
$color-success: #67c23a;
$color-danger: #ff4949;
.brand-system {
padding: 20px;
background: #fff;
border-radius: 16px;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.system-header {
display: flex;
gap: 20px;
margin-bottom: 24px;
.el-input {
width: 240px;
.el-input__inner {
border-radius: 8px;
border-color: $color-border;
&:focus {
border-color: $color-primary;
box-shadow: 0 0 0 2px rgba(37, 191, 130, 0.2);
}
}
}
.el-select {
width: 160px;
.el-input__inner {
border-radius: 8px;
border-color: $color-border;
}
}
}
.system-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
flex: 1;
overflow-y: auto;
}
.system-card {
background: #fff;
border-radius: 12px;
border: 1px solid $color-border;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
overflow: hidden;
&:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.1);
.card-header {
background-color: lighten($color-primary, 40%);
}
}
}
.card-header {
padding: 16px;
background-color: $color-bg;
transition: background-color 0.3s;
}
.card-title {
font-size: 16px;
font-weight: bold;
color: $color-text;
display: flex;
align-items: center;
margin-bottom: 8px;
.el-icon-document {
margin-right: 8px;
color: $color-primary;
font-size: 18px;
}
}
.card-meta {
display: flex;
gap: 12px;
font-size: 12px;
color: $color-meta;
}
.card-content {
padding: 16px;
font-size: 14px;
color: $color-text;
line-height: 1.5;
min-height: 80px;
}
.card-footer {
padding: 12px 16px;
border-top: 1px solid $color-border;
display: flex;
justify-content: space-between;
align-items: center;
background-color: $color-bg;
font-size: 12px;
color: $color-meta;
}
.status-tag {
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
&.active {
background-color: rgba(103, 194, 58, 0.1);
color: $color-success;
}
&.inactive {
background-color: rgba(255, 73, 73, 0.1);
color: $color-danger;
}
}
// 弹窗样式
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.dialog-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
.dialog-container {
background: white;
min-width: 500px;
max-width: 90vw;
border-radius: 12px;
overflow: auto;
display: flex;
flex-direction: column;
box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
}
.dialog-header {
padding: 20px;
border-bottom: 1px solid $color-border;
display: flex;
justify-content: space-between;
align-items: flex-start;
background-color: #f9fbfc;
.header-left {
h3 {
margin: 0;
font-size: 20px;
font-weight: bold;
color: $color-text;
margin-bottom: 8px;
}
}
}
.dialog-meta {
display: flex;
gap: 16px;
font-size: 14px;
color: $color-meta;
margin-top: 4px;
.status-tag {
padding: 3px 8px;
font-size: 12px;
}
}
.dialog-actions {
display: flex;
gap: 12px;
.el-button {
padding: 10px;
border-radius: 8px;
&:hover {
background-color: lighten($color-primary, 35%);
}
}
.el-icon-close {
font-size: 20px;
cursor: pointer;
margin-left: 12px;
&:hover {
color: $color-primary;
}
}
}
.dialog-content {
padding: 20px;
flex: 1;
overflow-y: hidden;
background-color: #f9fbfc;
}
.doc-preview {
white-space: pre-wrap;
line-height: 1.5;
background: #ffffff;
padding: 20px;
border-radius: 8px;
border: 1px solid $color-border;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
font-family: 'Microsoft Yahei', SimSun, sans-serif;
font-size: 15px;
color: #333;
height: calc(100vh - 300px);
overflow: auto;
/* 恢复 Markdown 元素样式 */
h1,
h2,
h3 {
border-bottom: 1px solid #eee;
padding-bottom: 0.3em;
margin-top: 2em;
}
ul,
ol {
padding-left: 1.5em;
margin: 0.5em 0;
}
li {
margin: 0.3em 0;
}
pre {
background-color: #f8f8f8;
padding: 1em;
border-radius: 4px;
overflow-x: auto;
}
code {
background-color: #eee;
padding: 0.2em 0.4em;
border-radius: 3px;
}
table {
border-collapse: collapse;
width: 100%;
margin: 1em 0;
th,
td {
border: 1px solid #ddd;
padding: 0.5em;
text-align: left;
}
th {
background-color: #f5f7fa;
}
}
}
/* 新增 WangEditor 样式覆盖 */
.w-e-text-container {
background-color: #ffffff !important;
border-radius: 8px 8px 0 0;
padding: 20px;
max-height: 400px;
overflow-y: auto;
}
.w-e-scroll {
height: 400px;
}
.dialog-footer {
padding: 20px;
border-top: 1px solid $color-border;
background-color: #f9fbfc;
.footer-info {
margin-bottom: 16px;
p {
margin: 4px 0;
font-size: 14px;
color: $color-meta;
}
}
}
</style>

157
sub-operation-service/src/views/brand/components/Monitor.vue
View File

@ -26,12 +26,89 @@
{{ tabLabels[activeTab] }} {{ tabLabels[activeTab] }}
</div> </div>
<div class="item-actions"> <div class="item-actions">
<el-button size="large" class="button" @click="onInspect(p)">抽查</el-button> <el-button size="large" class="button" @click="onInspect(p.id)">抽查</el-button>
<el-button size="large" class="button" type="danger" @click="onRevoke(p)">取消授权</el-button> <el-button size="large" class="button" type="danger" @click="onRevoke(p)">取消授权</el-button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 抽查弹窗 -->
<el-dialog v-model="dialogVisible" width="720px" top="20px" modal="false" :before-close="() => (dialogVisible = false)" title="追溯记录">
<div v-if="traceData" class="trace-record">
<!-- 基本信息 -->
<section class="section">
<h3>基本信息</h3>
<el-row :gutter="12">
<el-col :span="6">产品名称：</el-col><el-col :span="18">{{ traceData.productName }}</el-col> <el-col :span="6">产品数量：</el-col
><el-col :span="18">{{ traceData.quantity }}</el-col> <el-col :span="6">生产经营主体：</el-col
><el-col :span="18">{{ traceData.producer }}</el-col> <el-col :span="6">原产地：</el-col
><el-col :span="18">{{ traceData.origin }}</el-col> <el-col :span="6">生产日期：</el-col
><el-col :span="18">{{ traceData.productionDate }}</el-col> <el-col :span="6">追溯码：</el-col
><el-col :span="18">{{ traceData.traceCode }}</el-col> <el-col :span="6">追溯次数：</el-col
><el-col :span="18">{{ traceData.traceCount }} 次</el-col>
</el-row>
</section>
<!-- 基地信息 -->
<section class="section">
<h3>基地信息</h3>
<el-row :gutter="12">
<el-col :span="6">基地地址：</el-col><el-col :span="18">{{ traceData.base.address }}</el-col> <el-col :span="6">地理位置：</el-col
><el-col :span="18">{{ traceData.base.location }}</el-col> <el-col :span="6">面积：</el-col
><el-col :span="18">{{ traceData.base.area }} 亩</el-col> <el-col :span="6">气候条件：</el-col
><el-col :span="18">{{ traceData.base.climate }}</el-col> <el-col :span="6">土壤类型：</el-col
><el-col :span="18">{{ traceData.base.soil }}</el-col>
</el-row>
</section>
<!-- 农事信息 -->
<section class="section">
<h3>农事信息</h3>
<el-table :data="traceData.farmingRecords" stripe border style="width: 100%">
<el-table-column prop="date" label="日期" width="120" />
<el-table-column prop="operation" label="操作" />
<el-table-column prop="operator" label="作业人" width="120" />
</el-table>
</section>
<!-- 包装信息 -->
<section class="section">
<h3>分拣包装</h3>
<el-row :gutter="12">
<el-col :span="6">包装企业：</el-col><el-col :span="18">{{ traceData.packaging.company }}</el-col> <el-col :span="6">包装类型：</el-col
><el-col :span="18">{{ traceData.packaging.type }}</el-col> <el-col :span="6">包装人：</el-col
><el-col :span="18">{{ traceData.packaging.person }}</el-col> <el-col :span="6">包装时间：</el-col
><el-col :span="18">{{ traceData.packaging.time }}</el-col>
</el-row>
</section>
<!-- 仓储物流 -->
<section class="section">
<h3>仓储物流信息</h3>
<el-row :gutter="12">
<el-col :span="6">存储类型：</el-col><el-col :span="18">{{ traceData.logistics.storageType }}</el-col>
<el-col :span="6">存储温度：</el-col><el-col :span="18">{{ traceData.logistics.temperature }}</el-col>
<el-col :span="6">发货地址：</el-col><el-col :span="18">{{ traceData.logistics.shipFrom }}</el-col> <el-col :span="6">收货地址：</el-col
><el-col :span="18">{{ traceData.logistics.shipTo }}</el-col>
</el-row>
</section>
<!-- 交易信息 -->
<section class="section">
<h3>交易信息</h3>
<el-row :gutter="12">
<el-col :span="6">交易时间：</el-col><el-col :span="18">{{ traceData.trade.time }}</el-col> <el-col :span="6">买家：</el-col
><el-col :span="18">{{ traceData.trade.buyer }}</el-col>
</el-row>
</section>
<!-- 右侧图片 -->
<div class="trace-img">
<img :src="getAssetsFile(traceData.img)" alt="产品图" />
</div>
</div>
</el-dialog>
</div> </div>
</template> </template>
@ -41,6 +118,8 @@ import { getAssetsFile } from '@/utils/index.js';
import { getMonitorList } from '@/apis/brand'; import { getMonitorList } from '@/apis/brand';
const activeTab = ref('onSale'); const activeTab = ref('onSale');
const dialogVisible = ref(false);
const traceData = ref(null);
const tabLabels = { const tabLabels = {
onSale: '在售中', onSale: '在售中',
@ -83,10 +162,52 @@ const products = ref([
// 根据当前 Tab 过滤 // 根据当前 Tab 过滤
const filteredProducts = computed(() => products.value.filter((p) => p.status === activeTab.value)); const filteredProducts = computed(() => products.value.filter((p) => p.status === activeTab.value));
// 操作回调 // 点击抽查后，根据 id 单独拉取或赋值 traceData
const onInspect = (p) => { function onInspect(id) {
console.log('抽查商品', p); console.log('查看产品:', id);
}; // 这里用硬编码模拟请求，实际中可换成接口调用：getTraceById(id).then(res=> traceData.value = res)
const mock = {
productName: '无土栽培土豆',
quantity: '200KG',
producer: '北大荒技术有限公司',
origin: '耿马县孟定镇下坝村',
productionDate: '2025-1-2',
traceCode: '10.5487542154785XSE254.1040201',
traceCount: 30,
base: {
address: '耿马县孟定镇下坝村',
location: '东经102° · 北纬24°',
area: 12000,
climate: '亚热带高原季风型，温和多雨',
soil: '红壤',
},
farmingRecords: [
{ date: '2024/1/2', operation: '播种 20250102批土豆种', operator: '张小东' },
{ date: '2024/2/2', operation: '施肥 氮肥', operator: '张小东' },
{ date: '2024/3/2', operation: '浇水', operator: '张小东' },
{ date: '2024/4/2', operation: '采摘', operator: '张小东' },
],
packaging: {
company: '瑞禾农产品包装公司',
type: '纸箱',
person: '王大福',
time: '2025-1-2 14:00:47',
},
logistics: {
storageType: '冷藏',
temperature: '2°C',
shipFrom: '北京市朝阳区解放路24号',
shipTo: '上海市黄浦区南京路36号',
},
trade: {
time: '2025-1-2 14:00:47',
buyer: '刘小花',
},
img: 'images/brand/product6.png',
};
traceData.value = mock;
dialogVisible.value = true;
}
const onRevoke = (p) => { const onRevoke = (p) => {
console.log('取消授权', p); console.log('取消授权', p);
}; };
@ -191,5 +312,31 @@ const statusClass = (tab) => {
} }
} }
} }
.trace-record {
position: relative;
padding-right: 160px; /* 给图片预留空间 */
}
.trace-record .section {
margin-bottom: 16px;
}
.trace-record h3 {
margin-bottom: 8px;
font-size: 18px;
color: #409eff;
border-left: 4px solid #409eff;
padding-left: 8px;
}
.trace-img {
position: absolute;
top: 16px;
right: 16px;
width: 128px;
text-align: center;
}
.trace-img img {
width: 100%;
border-radius: 4px;
}
} }
</style> </style>

92
sub-operation-service/src/views/brand/index.vue
View File

@ -3,16 +3,20 @@
<el-container class="brand-layout-container"> <el-container class="brand-layout-container">
<el-aside class="brand-aside-menu"> <el-aside class="brand-aside-menu">
<!-- 菜单部分 --> <!-- 菜单部分 -->
<el-menu :default-active="activeMenu" class="aside-menu" @select="handleSelect"> <el-menu v-model:open="openMenus" :default-active="activeMenu" class="brand-aside-menu" @select="handleSelect">
<el-menu-item index="apply"> <el-menu-item index="apply">
<img :src="getAssetsFile('images/brand/Apply.png')" class="menu-icon" alt="申请图标" /> <img :src="getAssetsFile('images/brand/Apply.png')" class="menu-icon" alt="申请图标" />
<span>使用申请</span> <span>使用申请</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="auth"> <el-sub-menu index="auth">
<img :src="getAssetsFile('images/brand/autho.png')" class="menu-icon" alt="" /> <template #title>
<span>授权管理</span> <img :src="getAssetsFile('images/brand/autho.png')" class="menu-icon" />
</el-menu-item> <span>授权管理</span>
</template>
<el-menu-item index="auth/record"> 授权记录 </el-menu-item>
<el-menu-item index="auth/system"> 品牌制度 </el-menu-item>
</el-sub-menu>
<el-menu-item index="monitor"> <el-menu-item index="monitor">
<img :src="getAssetsFile('images/brand/supervision.png')" class="menu-icon" alt="" /> <img :src="getAssetsFile('images/brand/supervision.png')" class="menu-icon" alt="" />
@ -29,20 +33,27 @@
</template> </template>
<script setup> <script setup>
import { computed } from 'vue'; import { ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { getAssetsFile } from '@/utils/index.js'; import { getAssetsFile } from '@/utils/index.js';
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
// 激活菜单项 const openMenus = ref(['auth']);
const menuMap = {
apply: ['brandApplyList'],
'auth/record': ['brandAuth'],
'auth/system': ['brandSystem'],
monitor: ['brandMonitor'],
};
// 获取当前菜单激活项
const activeMenu = computed(() => { const activeMenu = computed(() => {
const path = route.path; const matched = Object.entries(menuMap).find(([key, names]) => names.includes(route.name));
if (path.includes('/apply')) return 'apply'; console.log(matched[0]);
if (path.includes('/auth')) return 'auth'; return matched ? matched[0] : '';
if (path.includes('/monitor')) return 'monitor';
return '';
}); });
// 菜单切换处理 // 菜单切换处理
function handleSelect(index) { function handleSelect(index) {
@ -60,39 +71,40 @@ function handleSelect(index) {
width: $width-main; width: $width-main;
margin: auto; margin: auto;
.brand-aside-menu { .brand-aside-menu {
width: 240px; background-color: #fff;
background-color: $color-fff; border-radius: 16px;
border-radius: 8px; border-right: 0;
.aside-menu { :deep(.el-menu-item),
border-right: none; :deep(.el-sub-menu__title) {
font-size: 18px !important;
margin: 8px 12px;
span {
margin-left: 8px;
}
.menu-icon {
width: 24px;
height: 24px;
}
}
:deep(.el-sub-menu) {
.el-menu-item { .el-menu-item {
height: 48px; font-size: 16px !important;
line-height: 48px; margin: 4px 12px;
margin: 4px 8px; line-height: 40px;
border-radius: 4px;
font-size: 20px;
font-weight: 400;
text-align: left;
&:hover {
background-color: #f5f7fa;
}
.el-icon {
color: #666;
margin-right: 12px;
font-size: 18px;
vertical-align: middle;
}
.menu-icon {
width: 1.5em;
height: 1.5em;
margin-right: 8px;
vertical-align: -0.15em;
}
span { span {
vertical-align: middle; margin-left: 12px;
} }
} }
} }
:deep(.is-active) {
> .el-sub-menu__title,
&.el-menu-item {
color: #409eff !important;
background-color: #f5f7fa;
}
}
} }
.brand-main { .brand-main {
width: calc(100% - 240px - 16px); width: calc(100% - 240px - 16px);

5
sub-operation-service/yarn.lock
View File

@ -4188,6 +4188,11 @@ markdown-table@^1.1.0:
resolved "https://registry.npmmirror.com/markdown-table/-/markdown-table-1.1.3.tgz#9fcb69bcfdb8717bfd0398c6ec2d93036ef8de60" resolved "https://registry.npmmirror.com/markdown-table/-/markdown-table-1.1.3.tgz#9fcb69bcfdb8717bfd0398c6ec2d93036ef8de60"
integrity sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q== integrity sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q==
marked@^15.0.12:
version "15.0.12"
resolved "https://registry.npmmirror.com/marked/-/marked-15.0.12.tgz#30722c7346e12d0a2d0207ab9b0c4f0102d86c4e"
integrity sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==
math-intrinsics@^1.1.0: math-intrinsics@^1.1.0:
version "1.1.0" version "1.1.0"
resolved "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9" resolved "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"