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:
13713575202 2025-05-20 10:47:29 +08:00
commit 575ec062cb
116 changed files with 43726 additions and 16726 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
main/.yarn/install-state.gz Normal file
View File

Binary file not shown.

1
main/.yarnrc.yml Normal file
View File

@ -0,0 +1 @@
nodeLinker: node-modules

17468
main/yarn.lock
View File

File diff suppressed because it is too large Load Diff

1
new-digital-agriculture-screen/components.d.ts vendored
View File

@ -43,6 +43,7 @@ declare module 'vue' {
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']

BIN
new-digital-agriculture-screen/src/assets/images/inputs/order.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
new-digital-agriculture-screen/src/assets/images/inputs/order2x.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
new-digital-agriculture-screen/src/assets/images/trace/delete.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
new-digital-agriculture-screen/src/assets/images/trace/testReport.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 417 KiB

1
new-digital-agriculture-screen/src/components/custom-echart-hyaline-cake/index.vue
View File

@ -259,6 +259,7 @@ export default {
},
},
legend: {
type: 'scroll',
show: true,
right: '5%',
top: '25%',

569
new-digital-agriculture-screen/src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue
View File

@ -4,17 +4,18 @@
<script setup>
import { ref, watch, onMounted, nextTick } from 'vue';
import { cloneDeep } from 'lodash';
import { merge, cloneDeep } from 'lodash';
import { useEcharts } from '@/hooks/useEcharts';
defineOptions({ name: 'NewHyalineCake' });
// 定义组件 props
let selectedIndex = null;
let hoveredIndex = null;
const props = defineProps({
chartData: {
type: Array,
default: () => [
// 默认示例数据
{ name: '项目一', value: 60 },
{ name: '项目二', value: 44 },
{ name: '项目三', value: 32 },
@ -23,18 +24,13 @@ const props = defineProps({
option: {
type: Object,
default: () => ({
// 控制内外径关系的系数，1 表示无内径（实心饼），值越小内径越大
k: 1,
// 扇形边缘向外偏移距离比例（用于选中效果），单位视图坐标，可调
itemGap: 0.2,
// 扇形高度（影响z轴拉伸程度）
itemHeight: 120,
// 自动计算扇形高度时使用的系数（>0时 itemHeight 失效，使用 autoItemHeight * value ）
autoItemHeight: 0,
// 透明度设置
opacity: 0.6,
// 图例后缀
legendSuffix: '',
k: 1, // 控制内外径关系的系数，1 表示无内径，值越小内径越大
itemGap: 0.1, // 扇形的间距
itemHeight: 120, // 扇形高度（影响z轴拉伸程度）
autoItemHeight: 0, // 自动计算扇形高度时使用的系数（>0时 itemHeight 失效，使用 autoItemHeight * value ）
opacity: 0.6, // 透明度设置
legendSuffix: '', // 图例后缀
// TODO series
}),
},
width: {
@ -47,20 +43,92 @@ const props = defineProps({
},
});
// 声明组件触发的事件
const emit = defineEmits(['click']);
// 绑定到DOM的容器引用
const chartRef = ref(null);
// 使用 useEcharts 钩子初始化 ECharts 实例，并获取控制方法
const { setOptions, getInstance } = useEcharts(chartRef);
// 存储当前的 ECharts 配置项
const chartOption = ref({});
// pie2d 默认配置
const defaultPie2dOption = {
center: ['50%', '50%'],
label: {
show: false,
position: 'inside',
formatter: '{c}',
color: '#fff',
distance: 0,
},
labelLine: {
show: false,
smooth: false,
length: props.option.itemGap * 500,
length2: props.option.itemGap * 800,
lineStyle: { color: '#fff', width: 1 },
},
};
// 合并父组件传入的 pie2dConfig
const pie2dOption = {
...defaultPie2dOption,
...(props.option.pie2dConfig || {}),
};
// 参数方程函数：生成每个扇形曲面的参数方程，用于 series-surface.parametricEquation
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
// 中心弧度用于计算偏移方向
// 初始化图表
function initChart() {
// 生成基础的3D饼图配置(也就是默认的配置)
const baseOption = getPie3D(props.chartData, props.option.k);
// 合并用户配置，确保不修改原始对象
const finalOption = merge({}, baseOption, cloneDeep(props.option || {}));
chartOption.value = finalOption;
// 设置图表配置
setOptions(chartOption.value);
// 等待 DOM + ECharts 初始化完成
nextTick(() => {
const chart = getInstance();
if (!chart) {
return;
}
// 避免重复绑定事件
// chart.off('click');
chart.off('mouseover');
chart.off('globalout');
// chart.on('click', handleClick);
chart.on('mouseover', handleMouseover);
chart.on('globalout', handleGlobalout);
});
}
// 组件挂载后绑定事件
onMounted(() => {
initChart();
});
// 监听数据或配置变更，重新初始化图表
watch(
[() => props.chartData, () => props.option],
() => {
if (props.chartData && props.chartData.length) {
initChart();
}
},
{ immediate: true, deep: true }
);
/**
* 获取 parametric 曲面方程
* @param {Number} startRatio 起点弧度
* @param {Number} endRatio 终点弧度
* @param {Boolean} isSelected 是否选中
* @param {Boolean} isHovered 是否高亮
* @param {Number} k 饼图内径/外径的占比
* @param {Number} h 饼图高度
* @param {Array} offsetZ 浮动系数
* @return {Object} parametric 曲面方程
*/
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h, offsetZ = 0) {
// console.log('getParametricEquation params :>> ', startRatio, endRatio, isSelected, isHovered, k, h, offsetZ);
const midRatio = (startRatio + endRatio) / 2;
const startRadian = startRatio * Math.PI * 2;
const endRadian = endRatio * Math.PI * 2;
@ -70,7 +138,7 @@ function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h
if (startRatio === 0 && endRatio === 1) {
isSelected = false;
}
// k 取默认值 1/3（环的厚度比例），如果传入 k 则使用传入值
// k 取默认值 1/3（扇形内径/外径），如果传入 k 则使用传入值
k = typeof k !== 'undefined' ? k : 1 / 3;
// 计算选中效果的偏移量（基于扇形中心角度）
@ -79,7 +147,6 @@ function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h
// 计算高亮时的放大比例（未高亮时为1）
const hoverRate = isHovered ? 1.05 : 1;
// 返回 parametric 曲面方程
return {
u: {
// u 参数控制饼的周向角度：从 -π 到 3π，可以完整绘制一圈
@ -117,167 +184,117 @@ function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h
z(u, v) {
// 在 u < -π/2 时，防止出现不必要的翻转，直接使用基本正弦
if (u < -Math.PI * 0.5) {
return Math.sin(u);
return Math.sin(u) + offsetZ * h * 0.1;
}
// 在 u > 2.5π 时，处理扇形尾部厚度
if (u > Math.PI * 2.5) {
return Math.sin(u) * h * 0.1;
return Math.sin(u) * h * 0.1 + offsetZ * h * 0.1;
}
// 正常情况下，z 根据 v 参数控制上下表面的高度差
// 当前图形的高度是Z根据h（每个value的值决定的）
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
return Math.sin(v) > 0 ? 1 * h * 0.1 + offsetZ * h * 0.1 : -1 + offsetZ * h * 0.1;
},
};
}
// 生成整个 3D 饼图的配置项
function getPie3D(pieData) {
/**
* 获取 3D 饼图的配置项
* @param {Array} pieData 饼图数据
* @param {Number} internalDiameterRatio 饼图内径/外径的占比
* @return {Object} 配置项
*/
function getPie3D(pieData, internalDiameterRatio) {
const series = [];
let sumValue = 0;
// 计算总值
pieData.forEach((item) => {
sumValue += item.value;
});
let startValue = 0;
let endValue = 0;
const legendData = [];
const k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
// k 为外径厚度系数
const k = props.option.k ?? 1;
// 构建每个扇形的 series 数据
pieData.forEach((dataItem, idx) => {
for (let i = 0; i < pieData.length; i += 1) {
sumValue += pieData[i].value;
const seriesItem = {
name: dataItem.name ?? `series${idx}`,
name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
type: 'surface',
parametric: true,
wireframe: { show: false },
pieData: dataItem,
itemStyle: {
opacity: props.option.opacity,
borderRadius: 300,
borderColor: '#fff',
borderWidth: 0,
},
pieData: pieData[i],
pieStatus: {
selected: false,
hovered: false,
k,
},
};
// 合并自定义样式（如果有）
if (dataItem.itemStyle) {
const customStyle = {};
if (dataItem.itemStyle.color !== undefined) {
customStyle.color = dataItem.itemStyle.color;
}
if (dataItem.itemStyle.opacity !== undefined) {
customStyle.opacity = dataItem.itemStyle.opacity;
}
seriesItem.itemStyle = { ...seriesItem.itemStyle, ...customStyle };
if (typeof pieData[i].itemStyle !== 'undefined') {
const { itemStyle } = pieData[i];
typeof pieData[i].itemStyle.color !== 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
typeof pieData[i].itemStyle.opacity !== 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null;
seriesItem.itemStyle = itemStyle;
}
series.push(seriesItem);
});
// 计算每个扇形的 startRatio/endRatio 和参数方程
let startValue = 0;
series.forEach((serie) => {
const endValue = startValue + serie.pieData.value;
const startRatio = startValue / sumValue;
const endRatio = endValue / sumValue;
serie.pieData.startRatio = startRatio;
serie.pieData.endRatio = endRatio;
// 初始均为未选中未高亮
serie.parametricEquation = getParametricEquation(
startRatio,
endRatio,
false,
true,
k,
// 扇形高度：根据配置自动计算或使用固定高度
props.option.autoItemHeight > 0 ? props.option.autoItemHeight * serie.pieData.value : props.option.itemHeight
);
startValue = endValue;
});
// 添加一个透明圆环，用于实现 hover 在扇形外面时取消高亮
series.push({
name: 'mouseoutSeries',
type: 'surface',
parametric: true,
wireframe: { show: false },
itemStyle: { opacity: 0 },
parametricEquation: {
u: { min: 0, max: Math.PI * 2, step: Math.PI / 20 },
v: { min: 0, max: Math.PI, step: Math.PI / 20 },
x(u, v) {
return Math.sin(v) * Math.sin(u) + Math.sin(u);
},
y(u, v) {
return Math.sin(v) * Math.cos(u) + Math.cos(u);
},
z(u, v) {
return Math.cos(v) > 0 ? 0.1 : -0.1;
},
},
});
// 基础配置：坐标轴、视角、图例、提示框等
const option = Object.assign(
{
tooltip: {
backgroundColor: 'rgba(18, 55, 85, 0.8)',
borderColor: '#35d0c0',
color: '#fff',
position: (point, params, dom, rect, size) => {
// 动态调整 tooltip 位置，避免溢出
let x = point[0],
y = point[1];
const [viewW, viewH] = size.viewSize;
const [boxW, boxH] = size.contentSize;
if (x + boxW > viewW) x -= boxW;
if (y + boxH > viewH) y -= boxH;
if (x < 0) x = 0;
if (y < 0) y = 0;
return [x, y];
},
formatter: (params) => {
// 只对非透明环（实际扇形）显示信息
if (params.seriesName !== 'mouseoutSeries') {
return `
<span style="color:#FFF">
${params.seriesName}<br/>
<span style="
display:inline-block;
margin-right:5px;
border-radius:10px;
width:10px;
height:10px;
background-color:${params.color};"></span>
${chartOption.value.series[params.seriesIndex].pieData.value}
</span>`;
}
return '';
},
},
xAxis3D: { min: -1, max: 1 },
yAxis3D: { min: -1, max: 1 },
zAxis3D: { min: -1, max: 1 },
grid3D: {
show: false,
boxHeight: 5,
top: '0',
left: '-20%',
viewControl: {
// 3D 视角设置
alpha: 60, // 俯仰角度
distance: 240, // 视角距离
rotateSensitivity: 10,
zoomSensitivity: 10,
panSensitivity: 10,
autoRotate: true,
autoRotateAfterStill: 2,
},
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
// console.log(series);
for (let i = 0; i < series.length; i += 1) {
endValue = startValue + series[i].pieData.value;
const z = series[i]?.pieData?.floatZ ?? 0;
series[i].pieData.startRatio = startValue / sumValue;
series[i].pieData.endRatio = endValue / sumValue;
series[i].parametricEquation = getParametricEquation(
series[i].pieData.startRatio,
series[i].pieData.endRatio,
series[i].pieStatus.selected,
series[i].pieStatus.hovered,
k,
props.option.autoItemHeight > 0 ? props.option.autoItemHeight * series[i].pieData.value : props.option.itemHeight,
z
);
startValue = endValue;
legendData.push(series[i].name);
}
// 3. 构造透明的 2D pie，用于 legend/label
const outerPercent = 50;
const innerPercent =
internalDiameterRatio != null ? Math.round(internalDiameterRatio * outerPercent) : Math.round(((1 - k) / (1 + k)) * outerPercent);
const pie2dData = [];
for (let i = 0; i < pieData.length; i++) {
pie2dData.push({
name: pieData[i].name,
value: pieData[i].value,
// itemStyle: { opacity: 1 },
});
}
series.push({
name: 'pie2d',
type: 'pie',
data: pie2dData,
radius: [`${innerPercent}%`, `${outerPercent}%`],
center: pie2dOption.center,
startAngle: props.option.startAngle || 90,
clockwise: false,
itemStyle: {
color: 'transparent',
},
avoidLabelOverlap: false,
label: pie2dOption.label,
labelLine: pie2dOption.labelLine,
});
// 基础配置：坐标轴、视角、图例、提示框等
// 准备待返回的配置项，把准备好的 legendData、series 传入。
const option = {
legend: {
type: 'scroll',
show: true,
selectedMode: false,
right: '5%',
top: '25%',
orient: 'vertical',
@ -290,48 +307,114 @@ function getPie3D(pieData) {
fontSize: 14,
fontWeight: '400',
},
// 图例标签显示名称和数值
formatter: (name) => {
const item = props.chartData.find((d) => d.name === name);
return item ? ` ${name} ${item.value}${props.option.legendSuffix || ''}` : name;
if (props.chartData.length) {
const item = props.chartData.filter((item) => item.name === name)[0];
return ` ${name} ${item.value}${props.option.legendSuffix ?? ''}`;
}
},
},
// animation: false,
tooltip: {
formatter: (params) => {
// 只针对 3D surface 系列
if (params.seriesType === 'surface') {
// params.seriesIndex 是扇区的索引
const serie = chartOption.value.series[params.seriesIndex];
const realValue = serie.pieData.value;
return `${params.seriesName}：${realValue}`;
}
return '';
},
},
xAxis3D: {
min: -1,
max: 1,
},
yAxis3D: {
min: -1,
max: 1,
},
zAxis3D: {
min: -1,
max: 1,
},
grid3D: {
show: true,
boxHeight: 5,
top: '-20%',
viewControl: {
// 3d效果可以放大、旋转等，请自己去查看官方配置
alpha: 35,
// beta: 30,
rotateSensitivity: 1,
zoomSensitivity: 0,
panSensitivity: 0,
autoRotate: true,
distance: 150,
},
},
series,
},
// 将外部配置项覆盖基础配置
props.option
);
};
return option;
}
// 初始化图表
function initChart() {
// 生成基础的3D饼图配置
const baseOption = getPie3D(props.chartData);
// 合并用户配置，确保不修改原始对象
const finalOption = Object.assign({}, baseOption, cloneDeep(props.option || {}));
chartOption.value = finalOption;
// 设置图表配置
// 监听 mouseover，近似实现高亮（放大）效果
function handleMouseover(params) {
// console.log('mouseover');
const idx = params.seriesIndex;
const series = chartOption.value.series;
// 如果当前扇形已经高亮，不做任何操作
if (hoveredIndex === idx) return;
// 1. 取消上一个高亮
if (hoveredIndex !== null && hoveredIndex >= 0 && series[hoveredIndex]) {
updateSeriesHover(hoveredIndex, false);
}
// 2. 设置当前扇形高亮（排除辅助环）
if (params.seriesName !== 'mouseoutSeries' && series[idx]) {
updateSeriesHover(idx, true);
hoveredIndex = idx;
} else {
hoveredIndex = null;
}
// 3. 重新渲染
setOptions(chartOption.value);
// 等待 DOM + ECharts 初始化完成
nextTick(() => {
const chart = getInstance();
if (!chart) {
console.warn('ECharts 实例未初始化，事件绑定失败');
return;
}
// 避免重复绑定事件
chart.off('click');
chart.off('mouseover');
chart.off('globalout');
chart.on('click', handleClick);
chart.on('mouseover', handleMouseover);
chart.on('globalout', handleGlobalout);
});
function handleGlobalout() {
const idx = hoveredIndex;
if (idx !== null && idx >= 0 && chartOption.value.series[idx]) {
updateSeriesHover(idx, false);
hoveredIndex = null;
setOptions(chartOption.value);
}
}
// 抽取高亮／取消高亮的公共逻辑
function updateSeriesHover(index, toHover) {
const item = chartOption.value.series[index];
// 安全取 pieStatus，fallback 到空对象
const status = item.pieStatus || {};
const isSelected = !!status.selected;
const start = item.pieData?.startRatio ?? 0;
const end = item.pieData?.endRatio ?? 1;
const k = typeof status.k === 'number' ? status.k : 1 / 3;
// 计算 newHeight：如果 hover，则加 5，否则按原 height
const baseHeight = props.option.autoItemHeight > 0 ? props.option.autoItemHeight : props.option.itemHeight;
const newHeight = toHover ? baseHeight + 80 : baseHeight;
// 更新 parametricEquation
item.parametricEquation = getParametricEquation(start, end, isSelected, toHover, k, newHeight);
// 更新状态
item.pieStatus = {
...status,
hovered: toHover,
};
}
function handleClick(params) {
// 如果点击的是透明辅助环，则忽略
if (params.seriesName === 'mouseoutSeries') return;
@ -367,124 +450,10 @@ function handleClick(params) {
series[idx].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h);
series[idx].pieStatus.selected = isSelected;
// 更新记录选中的系列索引
selectedIndex = isSelected ? idx : null;
// 更新图表配置
setOptions(optionVal);
// 触发组件 click 事件供父组件使用
emit('click', params);
}
// 在函数顶部声明（确保作用域覆盖所有需要的地方）
window.debugZValues = {
current: null,
history: [],
};
function handleMouseover(params) {
if (params.seriesName === 'mouseoutSeries') return;
const chart = getInstance();
const optionVal = chart.getOption(); // 改用实时获取最新配置
const series = optionVal.series;
const idx = params.seriesIndex;
const hh = series[idx].parametricEquation.z();
window.debugZValues.current = hh;
window.debugZValues.history.push({
event: 'mouseover',
series: series[idx].name,
zValue: hh,
time: new Date().toISOString(),
});
console.log('当前Z值:', hh, '历史记录:', window.debugZValues.history);
// 打印移入前的完整状态（调试用）
console.log(
'[移入] 当前所有扇形状态',
series.map((s) => ({
name: s.name,
hovered: s.pieStatus?.hovered,
selected: s.pieStatus?.selected,
height: s.parametricEquation?.z(Math.PI, Math.PI),
}))
);
// 取消之前的高亮（确保只修改状态，不破坏参数方程）
if (hoveredIndex !== null && hoveredIndex !== idx) {
const prev = series[hoveredIndex];
prev.pieStatus.hovered = false; // 仅修改状态
prev.parametricEquation = getParametricEquation(
// 重新生成正确方程
prev.pieData.startRatio,
prev.pieData.endRatio,
prev.pieStatus.selected,
false, // isHovered=false
prev.pieStatus.k,
prev.pieData.value
);
}
// 设置新高亮
const current = series[idx];
current.pieStatus.hovered = true;
current.parametricEquation = getParametricEquation(
current.pieData.startRatio,
current.pieData.endRatio,
current.pieStatus.selected,
true, // isHovered=true
current.pieStatus.k,
current.pieData.value
);
hoveredIndex = idx;
chart.setOption({ series }); // 仅更新series部分
}
function handleGlobalout() {
if (hoveredIndex !== null) {
const chart = getInstance();
const optionVal = chart.getOption();
const series = optionVal.series;
const prev = series[hoveredIndex];
// 打印修复前的错误状态（调试用）
console.warn('[修复前] 异常状态', {
name: prev.name,
z: prev.parametricEquation.z(Math.PI, Math.PI),
equation: prev.parametricEquation,
});
// 重置状态并重新生成方程
prev.pieStatus.hovered = false;
prev.parametricEquation = getParametricEquation(
prev.pieData.startRatio,
prev.pieData.endRatio,
prev.pieStatus.selected,
false, // isHovered=false
prev.pieStatus.k,
prev.pieData.value
);
hoveredIndex = null;
chart.setOption({ series }, { replaceMerge: 'series' }); // 强制替换series
}
}
// 记录当前选中和高亮的系列索引
let selectedIndex = null;
let hoveredIndex = null;
// 组件挂载后绑定事件
onMounted(() => {
initChart();
});
// 监听数据或配置变更，重新初始化图表
watch(
[() => props.chartData, () => props.option],
() => {
if (props.chartData && props.chartData.length) {
initChart();
}
},
{ immediate: true, deep: true }
);
</script>
<style scoped>

114
new-digital-agriculture-screen/src/components/custom-echart-hyaline-cake/new-pie.vue Normal file
View File

@ -0,0 +1,114 @@
<template>
<div ref="chartRef" class="chart-container" />
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
import { useEcharts } from '@/hooks/useEcharts';
const props = defineProps({
chartData: {
type: Array,
default: () => [],
},
// 内外半径百分比，比如 ['30%', '50%']
radius: {
type: Array,
default: () => ['30%', '50%'],
},
// 初始俯视角度
alpha: {
type: Number,
default: 30,
},
// 初始水平旋转角
beta: {
type: Number,
default: 0,
},
// 是否自动旋转
autoRotate: {
type: Boolean,
default: false,
},
height: {
type: String,
default: '300px',
},
});
const chartRef = ref(null);
const { setOptions } = useEcharts(chartRef);
function buildOption(data) {
return {
tooltip: {
trigger: 'item',
formatter: '{b}：{c} ({d}%)',
},
legend: {
orient: 'vertical',
right: 20,
top: 'center',
textStyle: { color: '#fff' },
},
series: [
{
type: 'pie3D',
name: '3D 饼图',
data,
radius: props.radius,
center: ['50%', '50%'],
label: {
show: true,
formatter: '{b}\n{c}',
},
shading: 'realistic', // 光照效果
itemStyle: {
opacity: 1,
borderWidth: 1,
borderColor: '#333',
},
emphasis: {
label: { fontSize: 16, color: '#fff' },
itemStyle: { opacity: 1 },
},
viewControl: {
alpha: props.alpha, // 俯仰角
beta: props.beta, // 水平旋转角
autoRotate: props.autoRotate,
distance: 120,
zoomSensitivity: 0,
panSensitivity: 0,
},
},
],
};
}
let option = buildOption(props.chartData);
onMounted(() => {
setOptions(option);
});
watch(
() => props.chartData,
(v) => {
option = buildOption(v);
setOptions(option);
},
{ deep: true }
);
</script>
<style scoped>
.chart-container {
width: 100%;
height: var(--chart-height);
}
/* 传递 height 到局部变量 */
:root {
--chart-height: 300px;
}
</style>

48
new-digital-agriculture-screen/src/components/custom-echart-line/index.vue
View File

@ -108,35 +108,31 @@ export default {
}
let typeArr = Array.from(new Set(props.chartData.map((item) => item.type)));
let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
let seriesData = [];
typeArr.forEach((type, index) => {
let obj = {
name: type,
type: props.type,
smooth: true,
// 1. 优先使用外部传入的series配置（如果存在）
const externalSeries = props.option?.series || [];
option.series = typeArr.map((type, index) => {
// 2. 合并外部配置（按type匹配）
const externalConfig = externalSeries.find((s) => s.name === type) || {};
// 3. 动态生成数据
const data = xAxisData.map((x) => {
const item = props.chartData.find((item) => item.type === type && item.name === x);
return item ? item.value : null;
});
// 4. 合并配置（外部配置优先，内部生成配置补充）
return {
type: props.type, // 默认类型
name: type, // 必须字段
data, // 动态生成的数据
smooth: true, // 默认平滑
...externalConfig, // 外部配置覆盖内部默认值
// 特殊处理areaStyle（保留您的颜色逻辑）
areaStyle: externalConfig.areaStyle || (props.option?.color ? setAreaStyle(props.option.color[index]) : undefined),
};
if (props.option?.color) {
obj.areaStyle = setAreaStyle(props.option?.color[index]);
}
const findItem = props.chartData.find((item) => item.type == type);
if (findItem && findItem.color) {
obj.color = findItem.color;
obj.areaStyle = setAreaStyle(findItem.color[index]);
}
let data = [];
xAxisData.forEach((x) => {
let dataArr = props.chartData.filter((item) => type === item.type && item.name == x);
if (dataArr && dataArr.length > 0) {
data.push(dataArr[0].value);
} else {
data.push(null);
}
});
obj['data'] = data;
seriesData.push(obj);
});
option.series = seriesData;
option.xAxis.data = xAxisData;
// console.log(option.series);
setOptions(option);
startAutoPlay({
interval: 2000,

74
new-digital-agriculture-screen/src/components/custom-echart-triangle/index.vue
View File

@ -29,6 +29,10 @@ export default {
type: String,
default: 'calc(100vh - 78px)',
},
activeIndex: {
type: Number,
default: 1,
},
},
emits: ['click'],
setup(props, { emit }) {
@ -56,13 +60,16 @@ export default {
zlevel: 1,
name: '漏斗图',
type: 'funnel',
animation: true, // 开启动画
animationDuration: 500, // 过渡时间（毫秒）
animationEasing: 'cubicOut', // 缓动效果
top: '11%',
left: 'center',
width: '25%',
sort: 'ascending',
gap: 0,
label: {
show: true,
show: false,
position: 'outside',
width: '200px',
align: 'right',
@ -79,9 +86,8 @@ export default {
padding: [5, 6], // 增加标签内边距
},
labelLine: {
show: true,
length: 10,
length2: 50,
show: false,
length: 30,
smooth: true,
lineStyle: {
width: 1,
@ -90,28 +96,6 @@ export default {
type: 'solid',
},
},
// 添加第二段折线
// markLine: {
// symbol: 'none', // 隐藏端点
// lineStyle: {
// type: 'solid',
// color: '#fff',
// width: 1,
// },
// data: [
// // 从默认 labelLine 的终点到自定义位置
// [
// {
// coord: [50, 50], // 第一段线的终点（需动态计算）
// name: 'Label1',
// },
// {
// coord: [80, 50], // 第二段线的终点
// name: 'Label1',
// },
// ],
// ],
// },
itemStyle: {
show: false,
borderColor: '#fff',
@ -141,12 +125,50 @@ export default {
}
);
watch(
() => props.activeIndex,
(newVal) => {
showLabel(newVal);
}
);
function initCharts() {
if (props.option) {
Object.assign(option, cloneDeep(props.option));
}
option.series[0].data = props.chartData;
setOptions(option);
showLabel(props.activeIndex);
}
// 动态生成带label状态的option
function getOption(activeIndex) {
// 浅拷贝数据（保留原始引用关系）
let myData = props.chartData.map((item, idx) => ({
...item,
label: {
show: idx === activeIndex, // 只显示当前选中层级的标签
},
labelLine: {
show: idx === activeIndex, // 只显示当前选中层级的引导线
},
}));
let myOption = {
...option,
series: [
{
...option.series[0],
data: myData,
},
],
};
return myOption;
}
// 切换显示层级
function showLabel(activeIndex) {
const newOption = getOption(activeIndex);
setOptions(newOption);
}
function onClick(params) {

2
new-digital-agriculture-screen/src/components/custom-scroll-title/index.vue
View File

@ -176,7 +176,7 @@ function handleTitleClick(val) {
position: relative;
width: 31%;
height: 100%;
overflow: hidden;
// overflow: hidden;
line-height: 90px;
.title_content {
position: absolute;

2
new-digital-agriculture-screen/src/router/modules/v2.js
View File

@ -50,7 +50,7 @@ export default {
meta: { title: '生产经营主体', icon: '' },
},
{
path: '/new-digital-agriculture-screen/trace',
path: '/new-digital-agriculture-screen/v2/trace',
name: 'trace',
component: () => import('@/views/trace/index.vue'),
meta: { title: '农产品溯源', icon: '' },

2
new-digital-agriculture-screen/src/utils/echarts.js
View File

@ -11,6 +11,7 @@ import {
GaugeChart,
ScatterChart,
EffectScatterChart,
FunnelChart,
} from 'echarts/charts';
import 'echarts-gl';
import 'echarts-liquidfill';
@ -70,6 +71,7 @@ echarts.use([
MarkPointComponent,
MarkLineComponent,
MarkAreaComponent,
FunnelChart,
]);
export default echarts;

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

@ -20,10 +20,10 @@ const state = reactive({
option: {
// 数据
dataset: [],
type: 'column',
type: 'row',
rowNum: 6,
isAnimation: true,
waitTime: 5,
waitTime: 12,
unit: '万元',
sort: true,
height: 12,
@ -32,9 +32,9 @@ const state = reactive({
borderRadius: '12px',
carousel: 'single',
indexPrefix: 'TOP',
indexFontSize: 12,
leftFontSize: 14,
rightFontSize: 14,
indexFontSize: 22,
leftFontSize: 16,
rightFontSize: 16,
valueFormatter: (item) => {
return item.value;
},

36
new-digital-agriculture-screen/src/views/business/components/businessFour.vue
View File

@ -44,7 +44,28 @@ const state = reactive({
radius: '80%',
center: ['50%', '50%'],
backgroundStyle: {
color: 'transparent',
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: 'rgba(220, 255, 255, 0.3)', // 中心半透明白
},
{
offset: 0.7,
color: 'rgba(0, 231, 240, 0.2)', // 中间荧光青
},
{
offset: 1,
color: 'rgba(0, 150, 200, 0.3)', // 外围高饱和科技青
},
],
globalCoord: false,
},
blur: 10, // 模糊半径
},
data: [],
amplitude: 12, //水波振幅
@ -57,6 +78,7 @@ const state = reactive({
},
},
outline: {
// 圆圈配置
borderDistance: 2,
itemStyle: {
borderWidth: 2,
@ -85,6 +107,8 @@ const state = reactive({
},
},
itemStyle: {
opacity: 1, //水的透明度
// 水波配置
color: {
type: 'linear', // 线性渐变
x: 0,
@ -92,8 +116,9 @@ const state = reactive({
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(13, 204, 163, 0.6)' },
{ offset: 1, color: 'rgba(71, 202, 219, 1)' },
{ offset: 0, color: '#6af7e8' }, // 更亮的蓝色
// { offset: 0.7, color: '#5fcbc1' },
{ offset: 1, color: '#55e7ff' },
],
global: false, // 默认为 false
},
@ -107,8 +132,9 @@ watch(
() => props.data,
(val) => {
if (!isEmpty(val)) {
state.option.series[0].data = [0, val.percent];
state.option.series[0].label.formatter = val.percent * 100 + '%';
// 设置水波纹位置
state.option.series[0].data = [val.percent + 0.05, val.percent]; //设置水的数量
state.option.series[0].label.formatter = val.percent * 100 + '%'; //显示文本
}
},
{

34
new-digital-agriculture-screen/src/views/business/components/businessSix.vue
View File

@ -193,20 +193,19 @@ function getPie3D(pieData, internalDiameterRatio) {
},
title: {
text: '',
x: '35%',
y: '30%',
x: '34%', //文本的位置
y: '32%',
itemGap: 4,
textAlign: 'center',
textStyle: {
rich: {
a: {
fontSize: 20,
color: '#fff',
},
c: {
fontSize: 12,
color: '#fff',
padding: [15, 0],
},
color: '#ffffff',
fontSize: '26px',
fontWeight: 'bold',
},
subtext: '',
subtextStyle: {
color: '#02FD94',
fontSize: '18px',
},
},
xAxis3D: {
@ -224,14 +223,14 @@ function getPie3D(pieData, internalDiameterRatio) {
grid3D: {
show: false,
boxHeight: boxHeight,
left: '-10%',
left: '-15%',
top: -20,
viewControl: {
alpha: 55, //角度(这个很重要 调节角度的)
alpha: 40, //角度(这个很重要 调节角度的)
distance: 150, //调整视角到主体的距离，类似调整zoom(这是整体大小)
rotateSensitivity: 1, //设置为0无法旋转
zoomSensitivity: 0, //设置为0无法缩放
panSensitivity: 0, //设置为0无法平移
zoomSensitivity: 10, //设置为0无法缩放
panSensitivity: 10, //设置为0无法平移
autoRotate: true, //自动旋转
},
},
@ -243,7 +242,8 @@ function getPie3D(pieData, internalDiameterRatio) {
const initData = (pieData = []) => {
const option = getPie3D(pieData, 0.8);
const { name, value } = option.series[0].pieData;
option.title.text = `{a|${value}%}{c|\n${name}}`;
option.title.text = value + '%'; //中心默认展示数据
option.title.subtext = name; //中心默认展示数据
state.option = option;
state.data = option.series;
};

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

@ -15,7 +15,7 @@
:down-title="'农资企业'"
:label-field="'label'"
:value-field="'value'"
:down-width="'130px'"
:down-width="''"
:options="[
{ value: 1, label: '农企/合作社' },
{ value: 2, label: '农资企业' },

8
new-digital-agriculture-screen/src/views/entities/components/hotCharts.vue
View File

@ -5,7 +5,7 @@
<span class="right_btn" @click="handleChange(1)"></span>
{{ current.info.name }}
</section>
<custom-echart-triangle :chart-data="data" height="100%" :option="option" />
<custom-echart-triangle :chart-data="data" height="100%" :option="option" :active-index="current.info.level - 1" />
</div>
</template>
<script setup>
@ -23,14 +23,17 @@ const list = ref([
{
name: '茶叶',
value: '1',
level: 1,
},
{
name: '核桃',
value: '2',
level: 2,
},
{
name: '玉米',
value: '3',
level: 3,
},
]);
const current = reactive({
@ -38,7 +41,8 @@ const current = reactive({
length: list.value.length - 1,
info: {
name: '茶叶',
value: '20',
value: '1',
level: 1,
},
});
function handleChange(n) {

311
new-digital-agriculture-screen/src/views/inputs/components/inputsFive.vue
View File

@ -1,116 +1,235 @@
<template>
<custom-echart-line :chart-data="state.data" height="100%" :option="state.option" />
<custom-echart-line :chart-data="chartData" :option="chartOption" height="100%" />
</template>
<script setup>
import { reactive, watch } from 'vue';
import { isEmpty, sleep } from '@/utils';
import { ref } from 'vue';
const props = defineProps({
data: {
type: Array,
default: () => [],
},
query: {
type: String,
default: '',
},
});
// 1. 数据生成（12个月完整数据）
const chartData = ref(
(() => {
// 定义波动参数
const waveConfig = {
// [月份索引]: 调整系数 (1.0为基础值)
peaks: { 3: 1.6, 9: 1.5 }, // 4月和10月高峰 (数组索引从0开始)
valleys: { 0: 0.7, 6: 0.8, 11: 0.6 }, // 1月、7月、12月低谷
};
const state = reactive({
option: {
color: ['#35D0C0'],
grid: {
left: '5%',
right: '5%',
bottom: '5%',
top: '10%',
containLabel: true,
// 生成符合波动要求的数据
const generateWaveData = (baseVal) => {
return Array.from({ length: 12 }, (_, i) => {
if (waveConfig.peaks[i]) return baseVal * waveConfig.peaks[i];
if (waveConfig.valleys[i]) return baseVal * waveConfig.valleys[i];
// 平滑过渡值（在基础值附近波动）
return baseVal * (0.9 + Math.random() * 0.2);
}).map((v) => parseFloat(v.toFixed(1)));
};
// 各品类基础值
return [
{ type: '种子种苗', values: generateWaveData(15) },
{ type: '化肥', values: generateWaveData(20) },
{ type: '农药', values: generateWaveData(10) },
].flatMap(({ type, values }) =>
values.map((value, i) => ({
type,
name: `${i + 1}月`,
value,
}))
);
})()
);
function hexToRGBA(hex, alpha = 1) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
// 2. 图表配置
const chartOption = ref({
color: ['#02FD94', '#FEF906', '#01FEFD'],
legend: {
data: ['种子种苗', '化肥', '农药'],
top: 8,
itemWidth: 12, // 矩形宽度
itemHeight: 12, // 矩形高度
icon: 'rect',
itemGap: 20,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
backgroundColor: 'rgba(18, 55, 85, 0.8);',
backgroundColor: 'rgba(0,0,0,0.5);',
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)',
},
borderRadius: 8,
formatter: (params) => `
<div style="font-weight:bold;margin-bottom:5px;color:#fff">${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;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);',
},
grid: {
left: '3%',
right: '5%',
bottom: '5%',
top: '20%',
containLabel: true,
},
yAxis: {
type: 'value',
// name: '',
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
interval: 0,
margin: 15,
align: 'center',
},
axisTick: {
show: false, // 隐藏刻度线
},
},
data: [],
series: [
{
name: '种子种苗',
type: 'line',
smooth: true,
symbol: 'none',
lineStyle: {
width: 2,
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: hexToRGBA('#02FD94', 0) },
{ offset: 0.2, color: hexToRGBA('#02FD94', 1) },
{ offset: 0.8, color: hexToRGBA('#02FD94', 1) },
{ offset: 1, color: hexToRGBA('#02FD94', 0) },
],
},
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: hexToRGBA('#02FD94', 1) }, // 底部较实
{ offset: 1, color: hexToRGBA('#02FD94', 0) }, // 顶部较透明
],
},
},
emphasis: {
focus: 'series',
},
},
{
name: '化肥',
type: 'line',
smooth: true,
symbol: 'none', // 关键配置：隐藏数据点标记
lineStyle: {
width: 2,
color: {
// 线条首尾渐淡
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: hexToRGBA('#E0A21C', 0) },
{ offset: 0.2, color: hexToRGBA('#E0A21C', 1) },
{ offset: 0.8, color: hexToRGBA('#E0A21C', 1) },
{ offset: 1, color: hexToRGBA('#E0A21C', 0) },
],
},
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: hexToRGBA('#FEF906', 1) },
{ offset: 1, color: hexToRGBA('#FEF906', 0) },
],
},
},
emphasis: {
focus: 'series',
},
},
{
name: '农药',
type: 'line',
smooth: true,
symbol: 'none', // 关键配置：隐藏数据点标记
lineStyle: {
width: 2,
color: {
// 线条首尾渐淡
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: hexToRGBA('#01FEFD', 0) },
{ offset: 0.2, color: hexToRGBA('#01FEFD', 1) },
{ offset: 0.8, color: hexToRGBA('#01FEFD', 1) },
{ offset: 1, color: hexToRGBA('#01FEFD', 0) },
],
},
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: hexToRGBA('#01FEFD', 1) },
{ offset: 1, color: hexToRGBA('#01FEFD', 0) },
],
},
},
emphasis: {
focus: 'series',
},
},
// 其他系列同理...
],
});
const loadData = async (code = '') => {
state.loading = true;
// GetInputsInfo()
// .then((res) => {
// if (res.code === 200) {
// state.data = res.data;
// }
// })
// .catch((err) => {
// app.$message.error(err.msg);
// });
await sleep(500);
state.data = [
{ value: 5, name: '2020' },
{ value: 36, name: '2021' },
{ value: 70, name: '2022' },
{ value: 56, name: '2023' },
{ value: 70, name: '2024' },
{ value: 20, name: '2025' },
];
};
watch(
() => props.data,
(val) => {
if (!isEmpty(val)) {
state.data = val;
}
},
{
deep: true,
immediate: true,
}
);
watch(
() => props.query,
(val) => {
if (!isEmpty(val)) {
loadData(val);
}
},
{
deep: true,
immediate: true,
}
);
</script>
<style scoped>
/* 调整倾斜月份标签的间距 */
:deep(.echarts-axis-x .echarts-axis-tick) {
margin-top: 10px;
}
</style>

340
new-digital-agriculture-screen/src/views/inputs/components/inputsFour.vue
View File

@ -1,272 +1,84 @@
<template>
<custom-echart-pie-3d :chart-data="state.data" height="100%" :option="state.option" @click="handleClick" />
<div class="order-stats">
<el-row :gutter="20">
<el-col v-for="item in state.list" :key="item.label" :span="12">
<div class="order-stats-item flex-column">
<div class="order-stats-value">
{{ item.value }}<span>{{ item.unit }}</span>
</div>
<div class="order-stats-label">{{ item.label }}</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { reactive, watch } from 'vue';
import { isEmpty } from '@/utils';
const props = defineProps({
data: {
type: Array,
default: () => [],
},
});
<script setup>
import { reactive } from 'vue';
const state = reactive({
option: {},
data: [],
text: '',
});
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
// 计算
let midRatio = (startRatio + endRatio) / 2;
let startRadian = startRatio * Math.PI * 2;
let endRadian = endRatio * Math.PI * 2;
let midRadian = midRatio * Math.PI * 2;
// 如果只有一个扇形，则不实现选中效果。
if (startRatio === 0 && endRatio === 1) {
isSelected = false;
}
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
k = typeof k !== 'undefined' ? k : 1 / 3;
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
// 计算高亮效果的放大比例（未高亮，则比例为 1）
let hoverRate = isHovered ? 1.05 : 1;
// 返回曲面参数方程
return {
u: {
min: -Math.PI,
max: Math.PI * 3,
step: Math.PI / 32,
},
v: {
min: 0,
max: Math.PI * 2,
step: Math.PI / 20,
},
x: function (u, v) {
if (u < startRadian) {
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
if (u > endRadian) {
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
},
y: function (u, v) {
if (u < startRadian) {
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
if (u > endRadian) {
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
},
z: function (u, v) {
if (u < -Math.PI * 0.5) {
return Math.sin(u);
}
if (u > Math.PI * 2.5) {
return Math.sin(u) * h * 0.1;
}
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
},
};
}
function fomatFloat(num, n) {
var f = parseFloat(num);
if (isNaN(f)) {
return false;
}
f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
var s = f.toString();
var rs = s.indexOf('.');
if (rs < 0) {
rs = s.length;
s += '.';
}
while (s.length <= rs + n) {
s += '0';
}
return s;
}
function getHeight3D(series, height) {
series.sort((a, b) => {
return b.pieData.value - a.pieData.value;
});
return (height * 20) / series[0].pieData.value;
}
function getPie3D(pieData, internalDiameterRatio) {
let series = [];
let sumValue = 0;
let startValue = 0;
let endValue = 0;
let legendData = [];
let legendBfb = [];
let k = 1 - internalDiameterRatio;
pieData.sort((a, b) => {
return b.value - a.value;
});
for (let i = 0; i < pieData.length; i++) {
sumValue += pieData[i].value;
let seriesItem = {
//名称
name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
type: 'surface',
//是否为参数曲面（是）
parametric: true,
//曲面图网格线（否）上面一根一根的
wireframe: {
show: false,
},
pieData: pieData[i],
pieStatus: {
selected: false,
hovered: false,
k: k,
},
//设置饼图在容器中的位置(目前没发现啥用)
// center: ['50%', '100%']
};
//曲面的颜色、不透明度等样式。
if (typeof pieData[i].itemStyle != 'undefined') {
let itemStyle = {};
typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
typeof pieData[i].itemStyle.opacity != 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null;
seriesItem.itemStyle = itemStyle;
}
series.push(seriesItem);
}
legendData = [];
legendBfb = [];
for (let i = 0; i < series.length; i++) {
endValue = startValue + series[i].pieData.value * 1;
series[i].pieData.startRatio = startValue / sumValue;
series[i].pieData.endRatio = endValue / sumValue;
series[i].parametricEquation = getParametricEquation(
series[i].pieData.startRatio,
series[i].pieData.endRatio,
false,
false,
k,
series[i].pieData.value
);
startValue = endValue;
let bfb = fomatFloat(series[i].pieData.value / sumValue, 4);
legendData.push({
name: series[i].name,
value: bfb,
});
legendBfb.push({
name: series[i].name,
value: bfb,
});
}
let boxHeight = getHeight3D(series, 15);
let option = {
legend: {
data: legendData,
color: ['#8FD7FC', '#466BE7', '#F4BB29', '#49C384', '#8FD7FC', '#466BE7', '#F4BB29', '#49C384'],
bottom: 10,
itemGap: 20,
show: true,
icon: 'rect',
itemHeight: 10,
itemWidth: 10,
textStyle: {
fontSize: 12,
color: '#B8DDFF',
lineHeight: 20,
},
},
title: {
text: '',
x: 'center',
y: 'center',
textStyle: {
rich: {
a: {
fontSize: 20,
color: '#fff',
},
c: {
fontSize: 12,
color: '#fff',
padding: [15, 0],
},
},
},
},
xAxis3D: {
min: -1,
max: 1,
},
yAxis3D: {
min: -1,
max: 1,
},
zAxis3D: {
min: -1,
max: 1,
},
grid3D: {
show: false,
boxHeight: boxHeight,
left: 0,
top: -30,
viewControl: {
alpha: 55, //角度(这个很重要 调节角度的)
distance: 150, //调整视角到主体的距离，类似调整zoom(这是整体大小)
rotateSensitivity: 1, //设置为0无法旋转
zoomSensitivity: 0, //设置为0无法缩放
panSensitivity: 0, //设置为0无法平移
autoRotate: true, //自动旋转
},
},
series: series,
};
return option;
}
const initData = (pieData = []) => {
const option = getPie3D(pieData, 0.8);
const { name, value } = option.series[0].pieData;
option.title.text = `{a|${value}%}{c|\n${name}}`;
state.option = option;
state.data = option.series;
};
const handleClick = (params) => {
const findItem = state.data.find((el) => el.name === params.seriesName);
state.option.title.text = `{a|${findItem?.pieData?.value}%}{c|\n${params.seriesName}}`;
};
watch(
() => props.data,
(val) => {
if (!isEmpty(val)) {
const pieData = val.map((row) => {
return {
name: row.category,
value: row.percentage,
};
});
initData(pieData);
}
list: [
{
label: '订单金额',
value: '548.86',
unit: '万元',
},
{
deep: true,
immediate: true,
}
);
label: '订单数量',
value: '110554',
unit: '笔',
},
],
});
</script>
<style lang="scss" scoped>
.order-stats {
padding: 20px;
&-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
&-value {
width: 160px;
height: 160px;
line-height: 100px;
text-align: center;
margin: 0 auto;
background-image: url('@/assets/images/inputs/order.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
font-size: 24px;
font-weight: 400;
color: #fff;
position: relative;
border-radius: 8px;
overflow: hidden;
span {
font-size: 16px;
}
}
&-label {
width: 120px;
height: 24px;
line-height: 24px;
margin: 10px auto 0;
font-size: 16px;
color: #fff;
text-align: center;
background: url('@/assets/images/inputs/bg_label.png') center center no-repeat;
text-shadow:
0 0 10px #01eeff,
0 0 20px #01eeff,
0 0 30px #01eeff;
}
}
</style>

128
new-digital-agriculture-screen/src/views/inputs/components/inputsMap.vue
View File

@ -2,16 +2,22 @@
<centerMap :dialog-title="'投入品'" @mapclick="doMapclick">
<template #header>
<div class="land-map-pop-header">
<div class="title">{{ currentRegion && currentRegion.name ? currentRegion.name : '投入品' }}</div>
<div class="title">{{ currentRegion?.name || '投入品' }}</div>
<a class="view-case" @click.prevent="handleViewCase">查看案件 &gt;</a>
</div>
</template>
<template #dialogContent>
<div class="land-map-pop-content">
<div v-for="(n, index) in list" :key="index" class="list-item">
<div class="title">
<span class="title-val"> {{ n.title }}</span>
<div class="section-title">投入品管控情况：</div>
<div class="main-content">
<div class="item">
<div class="label">巡检次数</div>
<div class="value green">562次</div>
</div>
<div class="item">
<div class="label">案件次数</div>
<div class="value red">22次</div>
</div>
<div class="value">{{ n.value }}{{ n.unit }}</div>
</div>
</div>
</template>
@ -19,85 +25,75 @@
</template>
<script setup>
import { ref, reactive } from 'vue';
const unit = ref('家');
const list = reactive([
{ title: '监管机构', value: '1', color: '#01FEFD', unit: '家' },
{ title: '监管人员', value: '2', color: '#FEF906', unit: '人' },
{ title: '村级监管员', value: '5', color: '#02FD94', unit: '人' },
{ title: '农资经营单位', value: '42', color: '#FE7F03', unit: '家' },
{ title: '生产主体', value: '2', color: '#41BDFC', unit: '家' },
{ title: '投入品规模', value: '3000', color: '#FC0003', unit: '万元' },
]);
import { ref } from 'vue';
let currentRegion = ref(null);
const doMapclick = (data) => {
currentRegion.value = data;
list.forEach((v) => {
v.value = Number(v.value) + 1 * (Math.floor(Math.random() * (6 - 2 + 1)) + 2.12).toFixed(0);
});
};
const handleViewCase = () => {
// 跳转查看案件逻辑
};
</script>
<style lang="scss" scoped>
.land-map-pop-header {
display: inline-flex;
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
padding: 0 6px;
margin-top: 3px;
.title,
.value {
display: inline-block;
vertical-align: middle;
color: $color-white;
}
.title {
font-size: 18px;
font-weight: bold;
color: #00f9ff;
}
.value {
font-size: 14px;
}
}
.land-map-pop-content {
width: 100%;
gap: 10px;
display: inline-flex;
justify-content: flex-start;
flex-wrap: wrap;
.list-item {
width: calc((100% - 10px) / 2);
display: inline-flex;
justify-content: space-between;
padding: 6px 0;
.title {
display: inline-flex;
justify-content: flex-start;
.before {
display: inline-flex;
flex-direction: column;
justify-content: center;
}
.b-content {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.before,
.title-val {
display: inline-block;
vertical-align: middle;
padding: 0 5px 0 2px;
color: $color-custom-main;
.view-case {
font-size: 16px;
color: #00ff99;
text-decoration: none;
cursor: pointer;
}
}
.land-map-pop-content {
width: 100%;
padding: 4px 10px;
color: #ffffff;
.section-title {
margin-bottom: 12px;
font-size: 15px;
text-align: left;
}
.main-content {
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
.item {
display: flex;
justify-content: space-between;
font-size: 16px;
.label {
color: #ffffff;
}
.value {
display: inline-block;
text-align: right;
color: $color-white;
font-size: 12px;
&.green {
color: #01ffb1;
}
&.red {
color: #ff4242;
}
}
}
}
}

154
new-digital-agriculture-screen/src/views/inputs/components/inputsOne.vue
View File

@ -1,74 +1,108 @@
<template>
<el-row :gutter="20">
<el-col v-for="(item, index) in state.list" :key="item.label" :span="12">
<div class="inputs-item flex-row">
<span class="inputs-item-icon">
<img :src="getAssetsFile(`images/inputs/${index + 1}.png`)" />
</span>
<div class="inputs-item-info flex-column">
<b>{{ item.label }}</b>
<div class="inputs-item-value flex-row">
<em>{{ item.value }}</em>
<span>{{ item.unit }}</span>
<div class="inputs">
<h2 class="inputs-title">全县投入品数量：291.85万吨</h2>
<new-hyaline-cake :chart-data="state.data" :option="state.option" :width="'100%'" :height="'188px'" />
</div>
</div>
</div>
</el-col>
</el-row>
</template>
<script setup>
import { reactive, watch } from 'vue';
import { getAssetsFile } from '@/utils';
import { isEmpty } from '@/utils';
const props = defineProps({
data: {
type: Array,
default: () => [],
},
});
const state = reactive({
list: [],
});
watch(
() => props.data,
(val) => {
if (!isEmpty(val)) {
state.list = val;
}
option: {
k: 0,
opacity: 0.8,
itemGap: 0.1,
// legendSuffix: '万吨',
itemHeight: 200,
startAngle: 60,
grid3D: {
show: false,
boxHeight: 2,
top: '-20',
bottom: '10',
// left: '-20%',
viewControl: {
//3d效果可以放大、旋转等，请自己去查看官方配置
alpha: 40, //角度(这个很重要 调节角度的)
beta: -40,
distance: 260, //调整视角到主体的距离，类似调整zoom(这是整体大小)
rotateSensitivity: 0, //设置旋转灵敏度，为0无法旋转
zoomSensitivity: 0, //设置缩放灵敏度，为0无法缩放
panSensitivity: 0, //设置平移灵敏度，0无法平移
autoRotate: false, //自动旋转
autoRotateAfterStill: 2, //在鼠标静止操作后恢复自动旋转的时间间隔,在开启 autoRotate 后有效
},
{
deep: true,
immediate: true,
}
);
},
legend: {
show: true,
top: 'bottom',
orient: 'horizontal',
itemWidth: 12, // 矩形宽度
itemHeight: 12, // 矩形高度
itemGap: 20,
icon: 'rect',
left: 'center',
textStyle: {
color: '#fff',
fontSize: 16,
},
formatter: (name) => name,
},
pie2dConfig: {
center: ['50%', '40%'],
label: {
show: true,
position: 'outside',
formatter: (params) => {
const total = 221.8 + 70.01; // 或动态计算
const percent = ((params.value / total) * 100).toFixed(0);
return `{name|${params.name}}\n{value|${params.value} 万吨\n（${percent}%）}`;
},
rich: {
name: {
fontSize: 16,
fontWeight: 'bold',
color: '#ffffff',
lineHeight: 20,
align: 'center',
},
value: {
fontSize: 16,
color: '#79F5AF',
lineHeight: 18,
align: 'center',
},
},
color: '#fff',
},
labelLine: {
show: true,
length: 40,
length2: 40,
lineStyle: { color: '#fff', width: 2 },
},
},
},
data: [
{ value: 221.8, name: '产业运营平台' },
{ value: 70.01, name: '其它', floatZ: 1 },
],
});
</script>
<style lang="scss" scoped>
.inputs {
&-item {
align-items: center;
&-title {
width: 270px;
height: 40px;
line-height: 40px;
margin: 24px auto 0;
background-image: url('@/assets/images/inputs/bg_title.png');
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100%;
font-size: 20px;
font-weight: 400;
color: #fff;
padding: 10px 0;
&-icon {
margin-right: 16px;
}
&-info {
font-size: 16px;
font-weight: bold;
}
&-value {
margin-top: 10px;
justify-content: space-between;
em {
color: #02fd94;
font-style: normal;
}
}
text-align: center;
}
}
</style>

246
new-digital-agriculture-screen/src/views/inputs/components/inputsSix.vue
View File

@ -1,93 +1,195 @@
<template>
<div class="board">
<custom-scroll-board v-if="state.loading" :chart-config="state.options" />
<div height="100%">
<custom-scroll-board :chart-config="chartConfig" />
<div class="announcement-bar">
<!-- 喇叭图标 -->
<div class="horn-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 10V14C3 15.1 3.9 16 5 16H6L9 19V5L6 8H5C3.9 8 3 8.9 3 10Z" fill="#34f9b7" />
<path d="M16.5 12C16.5 10.23 15.48 8.71 14 7.97V16.02C15.48 15.29 16.5 13.77 16.5 12Z" fill="#34f9b7" />
<path
d="M14 3.23V5.29C16.89 6.15 19 8.83 19 12C19 15.17 16.89 17.85 14 18.71V20.77C18.01 19.86 21 16.28 21 12C21 7.72 18.01 4.14 14 3.23Z"
fill="#34f9b7"
/>
</svg>
</div>
<!-- 滚动内容容器 -->
<div class="scroll-container" ref="scrollContainer">
<div class="scroll-content" :style="{ transform: `translateX(${scrollPosition}px)` }">
<span class="text-content">
距今产业运营平台已为全县投入品花费节省约
<span class="highlight">¥1256.8 万元</span>
（截至{{ currentDate }}）
</span>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, watch } from 'vue';
import { isEmpty } from '@/utils';
const props = defineProps({
data: {
type: Array,
default: () => [],
},
});
import { ref, onMounted, onUnmounted } from 'vue';
const header = ['白名单企业', '产品名称', '黑名单企业', '产品名称'];
const len = header.length;
const state = reactive({
loading: false,
options: {
attr: { w: 200, h: 240 },
// 表格配置
const chartConfig = ref({
attr: {
w: 200, // 容器宽度
h: 192, // 容器高度
},
option: {
header,
header: ['投入品种类', '平台价格', '市场价格'],
dataset: [
// ['富农种源', '京科824', '南方农业', '京科824'],
// ['富农种源', '京科824', '南方农业', '京科824'],
// ['富农种源', '京科824', '南方农业', '京科824'],
// ['富农种源', '京科824', '南方农业', '京科824'],
// ['富农种源', '京科824', '南方农业', '京科824'],
// ['富农种源', '京科824', '南方农业', '京科824'],
// ['富农种源', '京科824', '南方农业', '京科824'],
['圆茄种苗', '0.3元/棵', '0.4元/棵'],
['高氮复合肥', '1850元/吨', '1980元/吨'],
['硫酸钾', '1250元/吨', '1380元/吨'],
['高氮复合肥', '1850元/吨', '1980元/吨'],
['西红柿种苗', '0.3元/棵', '0.4元/棵'],
],
index: false,
columnWidth: [100, 100, 100, 100],
align: new Array(len).fill('center'),
rowNum: 5,
waitTime: 5,
headerHeight: 40,
carousel: 'single',
headerBGC: 'rgba(53, 208, 192, 0.4)',
oddRowBGC: 'rgba(0, 59, 81, 0.1)',
evenRowBGC: 'rgba(10, 39, 50, 0.1)',
},
// 样式配置
headerBGC: 'rgba(53, 208, 192, 0.4)', // 表头背景
oddRowBGC: 'rgba(0, 59, 81, 0.1)', // 奇数行背景
evenRowBGC: 'rgba(10, 39, 50, 0.1)', // 偶数行背景
headerHeight: 40, // 表头高度
columnWidth: [300, 200, 200], // 列宽分配
align: ['left', 'center', 'center'], // 列对齐方式
rowNum: 4, // 可视行数
waitTime: 3, // 滚动间隔(秒)
carousel: 'single', // 滚动方式
hoverPause: true, // 悬停暂停
},
});
const genBlankAndWihteList = (data = []) => {
const rList = data.filter((row) => row.currentRating === 'r');
const bList = data.filter((row) => row.currentRating === 'b');
const len = rList.length >= bList.length ? rList.length : bList.length;
let list = new Array(len).fill(['', '', '', '']);
rList.forEach((item, index) => {
let temp = new Array(4).fill('');
temp[0] = item.belongCompany;
temp[1] = item.comName;
list[index] = temp;
});
bList.forEach((item, index) => {
list[index][2] = item.belongCompany;
list[index][3] = item.comName;
});
return list;
// 动态数据
const currentDate = ref('2023年12月15日');
const scrollPosition = ref(0);
const scrollContainer = ref(null);
let animationFrameId = null;
// 滚动控制
const startScrolling = () => {
const scrollSpeed = -60; // px/s
let lastTime = 0;
const scroll = (timestamp) => {
if (!lastTime) lastTime = timestamp;
const delta = (timestamp - lastTime) / 1000; // 秒
lastTime = timestamp;
scrollPosition.value += scrollSpeed * delta;
// 循环逻辑
const containerWidth = scrollContainer.value?.clientWidth || 0;
const contentWidth = scrollContainer.value?.scrollWidth || 0;
if (Math.abs(scrollPosition.value) > contentWidth + 50) {
scrollPosition.value = containerWidth;
}
animationFrameId = requestAnimationFrame(scroll);
};
watch(
() => props.data,
(val) => {
if (!isEmpty(val)) {
state.options.option.dataset = genBlankAndWihteList(val);
state.loading = true;
}
},
{
deep: true,
immediate: true,
}
);
</script>
<style scoped lang="scss">
.board {
padding: 10px 0px;
animationFrameId = requestAnimationFrame(scroll);
};
&:deep(.row-item) {
onMounted(() => {
// 获取真实日期
const now = new Date();
currentDate.value = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
startScrolling();
});
onUnmounted(() => {
cancelAnimationFrame(animationFrameId);
});
</script>
<style scoped lang="scss">
/* 自定义样式 */
.dv-scroll-board {
font-family: 'PingFang SC', 'PingFang SC-Regular', sans-serif;
color: #ffffff;
font-size: 16px;
:deep(.header-item) {
text-align: left;
font-weight: 700;
padding-left: 16px;
}
:deep(.row-item) {
transition: all 0.5s ease;
font-weight: 400;
.ceil {
&:nth-child(3),
&:nth-child(4) {
color: $color-danger;
text-align: left;
padding-left: 16px;
}
}
}
.announcement-bar {
$primary-color: #0e6965;
$secondary-color: #34f9b7;
$text-color: #b5f5ff;
$bg-color: rgba(0, 60, 107, 0.8);
display: flex;
align-items: center;
padding: 0.75rem 1.25rem;
background: $bg-color;
border-radius: 0.5rem;
border-left: 0.25rem solid $secondary-color;
box-shadow: 0 0.25rem 1rem rgba($primary-color, 0.2);
overflow: hidden;
position: relative;
&::after {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 3rem;
background: linear-gradient(90deg, rgba($bg-color, 0) 0%, $bg-color 100%);
z-index: 1;
}
.horn-icon {
flex-shrink: 0;
margin-right: 1rem;
color: $secondary-color;
svg {
width: 1.5rem;
height: 1.5rem;
filter: drop-shadow(0 0 0.25rem rgba($secondary-color, 0.5));
}
}
.scroll-container {
flex: 1;
overflow: hidden;
position: relative;
height: 1.5rem;
.scroll-content {
position: absolute;
white-space: nowrap;
will-change: transform;
padding-right: 2rem; // 防止文字紧贴边缘
.text-content {
color: $text-color;
font-size: 1.125rem;
font-weight: 500;
text-shadow: 0 0 0.5rem rgba($primary-color, 0.3);
}
.highlight {
color: $secondary-color;
font-weight: bold;
margin: 0 0.25rem;
}
}
}

170
new-digital-agriculture-screen/src/views/inputs/components/inputsThere.vue
View File

@ -1,94 +1,120 @@
<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" :is-series="true" />
</template>
<script setup>
import { reactive, watch } from 'vue';
import { isEmpty } from '@/utils';
const props = defineProps({
data: {
type: Array,
default: () => [],
<script setup>
import { reactive } from 'vue';
const rawData = [
{ name: '勐撒镇', type: '种子农药', value: 15 },
{ name: '勐撒镇', type: '化肥', value: 30 },
{ name: '勐撒镇', type: '农药', value: 22 },
{ name: '勐永镇', type: '种子农药', value: 18 },
{ name: '勐永镇', type: '化肥', value: 28 },
{ name: '勐永镇', type: '农药', value: 20 },
{ name: '孟定镇', type: '种子农药', value: 21 },
{ name: '孟定镇', type: '化肥', value: 25 },
{ name: '孟定镇', type: '农药', value: 24 },
{ name: '勐简乡', type: '种子农药', value: 13 },
{ name: '勐简乡', type: '化肥', value: 20 },
{ name: '勐简乡', type: '农药', value: 15 },
{ name: '贺派乡', type: '种子农药', value: 17 },
{ name: '贺派乡', type: '化肥', value: 18 },
{ name: '贺派乡', type: '农药', value: 16 },
{ name: '芒洪乡', type: '种子农药', value: 14 },
{ name: '芒洪乡', type: '化肥', value: 23 },
{ name: '芒洪乡', type: '农药', value: 21 },
{ name: '大兴乡', type: '种子农药', value: 12 },
{ name: '大兴乡', type: '化肥', value: 17 },
{ name: '大兴乡', type: '农药', value: 14 },
{ name: '耿马镇', type: '种子农药', value: 19 },
{ name: '耿马镇', type: '化肥', value: 26 },
{ name: '耿马镇', type: '农药', value: 23 },
];
const towns = ['勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '芒洪乡', '大兴乡', '耿马镇'];
const types = ['种子农药', '化肥', '农药'];
const colors = ['#15EB90', '#F3F70F', '#08DFE4'];
const series = types.map((type, idx) => {
return {
name: type,
type: 'bar',
barWidth: 16,
stack: 'total',
itemStyle: {
color: colors[idx],
barBorderRadius: 8,
shadowColor: colors[idx],
// shadowBlur: 8,
shadowOffsetY: -16,
},
z: 10 - idx,
data: towns.map((town) => {
const found = rawData.find((d) => d.name === town && d.type === type);
return found ? found.value : 0;
}),
};
});
const state = reactive({
data: rawData,
option: {
legend: {
show: false,
},
grid: {
left: '5%',
right: '5%',
top: '20%',
left: '3%',
right: '4%',
bottom: '5%',
top: '10%',
containLabel: true,
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
opacity: 1,
width: 0,
},
},
axisLabel: {
margin: 8,
},
axisTick: {
show: false,
interval: 0,
},
data: towns,
},
yAxis: {
type: 'value',
},
color: colors,
series,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
backgroundColor: 'rgba(18, 55, 85, 0.8);',
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;
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);',
},
},
barStyle: {
barWidth: 15,
itemStyle: {
borderRadius: [8, 8, 0, 0],
},
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#35D0C0' },
{ offset: 1, color: '#35D0C0' },
],
global: false,
},
},
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: '面积(万亩)',
},
},
data: [],
});
watch(
() => props.data,
(val) => {
if (!isEmpty(val)) {
state.data = val;
}
},
{
deep: true,
immediate: true,
}
);
</script>

4
new-digital-agriculture-screen/src/views/inputs/components/inputsTwo.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="inputs">
<h2 class="inputs-title">检测批次：{{ state.counts }}次</h2>
<h2 class="inputs-title">巡检次数：{{ state.counts }}次</h2>
<el-row>
<el-col v-for="item in state.list" :key="item.label" :span="12">
<div class="inputs-item flex-column">
@ -31,7 +31,7 @@ const state = reactive({
},
{
label: '检测覆盖率',
value: '99.98%',
value: '25.46%',
},
],
});

49
new-digital-agriculture-screen/src/views/inputs/index.vue
View File

@ -2,21 +2,21 @@
<el-row class="data-home-index">
<el-col :span="6" class="left-charts">
<div class="left-charts-item">
<customBack top-title="投入品监管体系建设" :top-postion="'left'">
<customBack top-title="全县投入品数量占比" :top-postion="'left'">
<template #back>
<inputsOne :data="state.data.one" />
</template>
</customBack>
</div>
<div class="left-charts-item">
<customBack top-title="投入品检测监管" :top-postion="'left'">
<customBack top-title="产业运营平台投入品数量" :top-postion="'left'">
<template #back>
<inputsTwo :data="state.data.InputDetector" />
<inputsFive ref="fiveRef" :data="state.data.five" :query="state.queryCode" />
</template>
</customBack>
</div>
<div class="left-charts-item">
<customBack top-title="投入品金额对比" :top-postion="'left'">
<customBack top-title="全县投入品使用情况" :top-postion="'left'">
<template #back>
<inputsThere :data="state.data.there" />
</template>
@ -29,43 +29,38 @@
<el-col :span="6" class="right-charts">
<div class="right-charts-item">
<customBack top-title="生产主体统计" :top-postion="'right'">
<customBack top-title="今日投入品价格" :top-postion="'right'">
<template #back>
<inputsFour :data="state.data.ProductEntity" />
<inputsSix :data="state.data.BlackWhite" />
</template>
</customBack>
</div>
<div class="right-charts-item">
<customBack top-title="投入品管控情况" :top-postion="'right'">
<template #back>
<inputsTwo :data="state.data.InputDetector" />
</template>
</customBack>
</div>
<div class="right-charts-item">
<customBack
top-title="历年投入品规模对比"
top-title="产业运营平台订单统计"
:top-postion="'right'"
:down-title="'全县'"
:down-title="'按日'"
:label-field="'label'"
:value-field="'value'"
:down-width="'100px'"
:options="[
{ label: '全县', value: '530926' },
{ label: '耿马镇', value: '42611' },
{ label: '勐撒镇', value: '9259' },
{ label: '勐永镇', value: '17787' },
{ label: '孟定镇', value: '42610' },
{ label: '勐简乡', value: '17788' },
{ label: '贺派乡', value: '40161' },
{ label: '四排山乡', value: '40163' },
{ label: '大兴乡', value: '40159' },
{ label: '按日', value: '0' },
{ label: '按月', value: '1' },
{ label: '按季度', value: '2' },
{ label: '按年', value: '3' },
]"
:is-down="true"
@command="handleCommand"
command="handleCommand"
>
<template #back>
<inputsFive ref="fiveRef" :data="state.data.five" :query="state.queryCode" />
</template>
</customBack>
</div>
<div class="right-charts-item">
<customBack top-title="投入品白名单/黑名单" :top-postion="'right'">
<template #back>
<inputsSix :data="state.data.BlackWhite" />
<inputsFour :data="state.data.ProductEntity" />
</template>
</customBack>
</div>
@ -140,7 +135,7 @@ const loadData = async () => {
unit: '家',
},
],
InputDetector: [{ JCFGL: 33.33, JCYPPC: 15, zero_count: 13, JCHGL: 86.67, counts: 45 }],
InputDetector: [{ JCFGL: 33.33, JCYPPC: 15684, zero_count: 13, JCHGL: 86.67, counts: 45 }],
there: [
{ value: 530, name: '种子' },
{ value: 1215, name: '化肥' },

2
new-digital-agriculture-screen/src/views/land/components/landFive.vue
View File

@ -23,13 +23,13 @@ const state = reactive({
containLabel: true,
},
tooltip: {
className: 'custom-tooltip-container',
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
backgroundColor: 'rgba(0,0,0,0.6);',
borderColor: '#35d0c0',
borderRadius: 8,
formatter: (data) => {
const params = data[0];
let str = `<div class="custom-echarts-tips" >

91
new-digital-agriculture-screen/src/views/land/components/landFour.vue
View File

@ -4,7 +4,7 @@
<section class="_circle">{{ _circleNum }}</section>
<section class="_text">{{ allNum }}万亩</section>
</section>
<section class="_right _scroll">
<section ref="scrollRef" class="_right _scroll">
<section
v-for="(item, i) in list"
:key="`right_${i}`"
@ -23,23 +23,26 @@
</template>
<script setup>
import { ref, watch, computed } from 'vue';
import { ref, watch, computed, nextTick, onMounted, onBeforeUnmount } from 'vue';
const props = defineProps({
data: {
type: Array,
default: () => {
return [];
},
default: () => [],
},
});
const list = ref([]);
const ac = ref(0);
const allNum = ref(0);
const currNum = ref(0);
const scrollRef = ref(null);
let timer = null;
watch(
() => props.data,
() => {
allNum.value = 0;
list.value = props.data.map((v, i) => {
allNum.value += v.value;
return {
@ -49,29 +52,74 @@ watch(
};
});
list.value.sort((a, b) => b.value - a.value);
if (list.value.length) {
ac.value = list.value[0].id;
currNum.value = list.value[0].value;
scrollToActive();
startAutoScroll();
}
},
{
immediate: true,
}
{ immediate: true }
);
function randomColor() {
let obj = {
r: 0,
g: 0,
b: 0,
};
Object.keys(obj).forEach((key) => {
obj[key] = Math.floor(Math.random() * 256);
});
return `rgb(${obj.r},${obj.g},${obj.b})`;
return `rgb(${rand255()},${rand255()},${rand255()})`;
}
function rand255() {
return Math.floor(Math.random() * 256);
}
function handleAc(val) {
ac.value = val;
currNum.value = list.value.find((v) => v.id == val).value ?? 0;
const target = list.value.find((v) => v.id == val);
currNum.value = target?.value ?? 0;
scrollToActive();
}
function scrollToActive() {
nextTick(() => {
const container = scrollRef.value;
const activeEl = container?.querySelector('.list_item.active');
if (container && activeEl) {
const containerTop = container.scrollTop;
const containerHeight = container.clientHeight;
const elTop = activeEl.offsetTop;
const elHeight = activeEl.offsetHeight;
if (elTop < containerTop || elTop + elHeight > containerTop + containerHeight) {
container.scrollTop = elTop - containerHeight / 2 + elHeight / 2;
}
}
});
}
const _circleNum = computed(() => {
let s = ((currNum.value / allNum.value) * 100).toFixed(1);
return s + '%';
if (!allNum.value) return '0%';
return ((currNum.value / allNum.value) * 100).toFixed(1) + '%';
});
function startAutoScroll() {
stopAutoScroll();
let index = list.value.findIndex((item) => item.id === ac.value);
timer = setInterval(() => {
index = (index + 1) % list.value.length;
handleAc(list.value[index].id);
}, 2000);
}
function stopAutoScroll() {
if (timer) {
clearInterval(timer);
timer = null;
}
}
onMounted(() => {
startAutoScroll();
});
onBeforeUnmount(() => {
stopAutoScroll();
});
</script>
@ -156,5 +204,8 @@ const _circleNum = computed(() => {
}
}
}
._right::-webkit-scrollbar {
display: none;
}
}
</style>

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

@ -22,13 +22,13 @@ const state = reactive({
containLabel: true,
},
tooltip: {
className: 'custom-tooltip-container', // 自定义父容器类名
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
backgroundColor: 'rgba(0,0,0,0.5);',
borderColor: '#35d0c0',
borderRadius: 8,
formatter: (data) => {
const params = data[0];
let str = `<div class="custom-echarts-tips" >
@ -42,7 +42,7 @@ const state = reactive({
barStyle: {
barWidth: 16,
itemStyle: {
borderRadius: 8, // 设置柱子的圆角半径
borderRadius: 8,
},
color: {
type: 'linear',

4
new-digital-agriculture-screen/src/views/land/components/landSix.vue
View File

@ -15,14 +15,14 @@ const props = defineProps({
const state = reactive({
option: {
k: 0.5,
k: 0,
opacity: 1,
itemGap: 0.1,
legendSuffix: '万亩',
itemHeight: 200,
grid3D: {
show: false,
boxHeight: 1,
boxHeight: 3,
top: '0',
left: '-20%',
viewControl: {

2
new-digital-agriculture-screen/src/views/land/components/landThere.vue
View File

@ -27,13 +27,13 @@ const state = reactive({
containLabel: true,
},
tooltip: {
className: 'custom-tooltip-container',
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
backgroundColor: 'rgba(0,0,0,0.6);',
borderColor: '#35d0c0',
borderRadius: 8,
formatter: (data) => {
const params = data[0];
let str = `<div class="custom-echarts-tips">

344
new-digital-agriculture-screen/src/views/land/components/lsh.txt
View File

@ -1,344 +0,0 @@
let selectedIndex = '';
let hoveredIndex = '';
option = getPie3D(
[
{
name: 'cc',
value: 47,
itemStyle: {
color: '#f77b66',
},
},
{
name: 'aa',
value: 44,
itemStyle: {
color: '#3edce0',
},
},
{
name: 'bb',
value: 32,
itemStyle: {
color: '#f94e76',
},
},
{
name: 'ee',
value: 16,
itemStyle: {
color: '#018ef1',
},
},
{
name: 'dd',
value: 23,
itemStyle: {
color: '#9e60f9',
},
},
],
0.59
);
// 生成扇形的曲面参数方程
function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
// 计算
const midRatio = (startRatio + endRatio) / 2;
const startRadian = startRatio * Math.PI * 2;
const endRadian = endRatio * Math.PI * 2;
const midRadian = midRatio * Math.PI * 2;
// 如果只有一个扇形，则不实现选中效果。
if (startRatio === 0 && endRatio === 1) {
// eslint-disable-next-line no-param-reassign
isSelected = false;
}
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
// eslint-disable-next-line no-param-reassign
k = typeof k !== 'undefined' ? k : 1 / 3;
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
// 计算高亮效果的放大比例（未高亮，则比例为 1）
const hoverRate = isHovered ? 1.05 : 1;
// 返回曲面参数方程
return {
u: {
min: -Math.PI,
max: Math.PI * 3,
step: Math.PI / 32,
},
v: {
min: 0,
max: Math.PI * 2,
step: Math.PI / 20,
},
x(u, v) {
if (u < startRadian) {
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
if (u > endRadian) {
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
},
y(u, v) {
if (u < startRadian) {
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
if (u > endRadian) {
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
},
z(u, v) {
if (u < -Math.PI * 0.5) {
return Math.sin(u);
}
if (u > Math.PI * 2.5) {
return Math.sin(u) * h * 0.1;
}
// 当前图形的高度是Z根据h（每个value的值决定的）
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
},
};
}
// 生成模拟 3D 饼图的配置项
function getPie3D(pieData, internalDiameterRatio) {
const series = [];
// 总和
let sumValue = 0;
let startValue = 0;
let endValue = 0;
const legendData = [];
const k =
typeof internalDiameterRatio !== 'undefined'
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
: 1 / 3;
// 为每一个饼图数据，生成一个 series-surface 配置
for (let i = 0; i < pieData.length; i += 1) {
sumValue += pieData[i].value;
const seriesItem = {
name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
type: 'surface',
parametric: true,
wireframe: {
show: false,
},
pieData: pieData[i],
pieStatus: {
selected: false,
hovered: false,
k,
},
};
if (typeof pieData[i].itemStyle !== 'undefined') {
const { itemStyle } = pieData[i];
// eslint-disable-next-line no-unused-expressions
typeof pieData[i].itemStyle.color !== 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
// eslint-disable-next-line no-unused-expressions
typeof pieData[i].itemStyle.opacity !== 'undefined'
? (itemStyle.opacity = pieData[i].itemStyle.opacity)
: null;
seriesItem.itemStyle = itemStyle;
}
series.push(seriesItem);
}
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
console.log(series);
for (let i = 0; i < series.length; i += 1) {
endValue = startValue + series[i].pieData.value;
series[i].pieData.startRatio = startValue / sumValue;
series[i].pieData.endRatio = endValue / sumValue;
series[i].parametricEquation = getParametricEquation(
series[i].pieData.startRatio,
series[i].pieData.endRatio,
false,
false,
k,
// 我这里做了一个处理，使除了第一个之外的值都是10
series[i].pieData.value === series[0].pieData.value ? 35 : 10
);
startValue = endValue;
legendData.push(series[i].name);
}
// 准备待返回的配置项，把准备好的 legendData、series 传入。
const option = {
// animation: false,
tooltip: {
formatter: (params) => {
if (params.seriesName !== 'mouseoutSeries') {
return `${
params.seriesName
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
params.color
};"></span>${option.series[params.seriesIndex].pieData.value}`;
}
return '';
},
},
xAxis3D: {
min: -1,
max: 1,
},
yAxis3D: {
min: -1,
max: 1,
},
zAxis3D: {
min: -1,
max: 1,
},
grid3D: {
show: false,
boxHeight: 5,
top: '-20%',
viewControl: {
// 3d效果可以放大、旋转等，请自己去查看官方配置
alpha: 35,
// beta: 30,
rotateSensitivity: 1,
zoomSensitivity: 0,
panSensitivity: 0,
autoRotate: true,
distance: 150,
},
// 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
postEffect: {
// 配置这项会出现锯齿，请自己去查看官方配置有办法解决
enable: false,
bloom: {
enable: true,
bloomIntensity: 0.1,
},
SSAO: {
enable: true,
quality: 'medium',
radius: 2,
},
// temporalSuperSampling: {
// enable: true,
// },
},
},
series,
};
return option;
}
// 修正取消高亮失败的 bug
// 监听 mouseover，近似实现高亮（放大）效果
myChart.on('mouseover', function (params) {
// 准备重新渲染扇形所需的参数
let isSelected;
let isHovered;
let startRatio;
let endRatio;
let k;
let i;
// 如果触发 mouseover 的扇形当前已高亮，则不做操作
if (hoveredIndex === params.seriesIndex) {
return;
// 否则进行高亮及必要的取消高亮操作
} else {
// 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
if (hoveredIndex !== '') {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
isSelected = option.series[hoveredIndex].pieStatus.selected;
isHovered = false;
startRatio = option.series[hoveredIndex].pieData.startRatio;
endRatio = option.series[hoveredIndex].pieData.endRatio;
k = option.series[hoveredIndex].pieStatus.k;
i = option.series[hoveredIndex].pieData.value === option.series[0].pieData.value ? 35 : 10;
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
option.series[hoveredIndex].parametricEquation = getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
i
);
option.series[hoveredIndex].pieStatus.hovered = isHovered;
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
hoveredIndex = '';
}
// 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
if (params.seriesName !== 'mouseoutSeries') {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
isSelected = option.series[params.seriesIndex].pieStatus.selected;
isHovered = true;
startRatio = option.series[params.seriesIndex].pieData.startRatio;
endRatio = option.series[params.seriesIndex].pieData.endRatio;
k = option.series[params.seriesIndex].pieStatus.k;
// 对当前点击的扇形，执行高亮操作（对 option 更新）
option.series[params.seriesIndex].parametricEquation = getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
option.series[params.seriesIndex].pieData.value + 5
);
option.series[params.seriesIndex].pieStatus.hovered = isHovered;
// 记录上次高亮的扇形对应的系列号 seriesIndex
hoveredIndex = params.seriesIndex;
}
// 使用更新后的 option，渲染图表
myChart.setOption(option);
}
});
// 修正取消高亮失败的 bug
myChart.on('globalout', function () {
if (hoveredIndex !== '') {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
isSelected = option.series[hoveredIndex].pieStatus.selected;
isHovered = false;
k = option.series[hoveredIndex].pieStatus.k;
startRatio = option.series[hoveredIndex].pieData.startRatio;
endRatio = option.series[hoveredIndex].pieData.endRatio;
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
i = option.series[hoveredIndex].pieData.value === option.series[0].pieData.value ? 35 : 10;
option.series[hoveredIndex].parametricEquation = getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
i
);
option.series[hoveredIndex].pieStatus.hovered = isHovered;
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
hoveredIndex = '';
}
// 使用更新后的 option，渲染图表
myChart.setOption(option);
});

194
new-digital-agriculture-screen/src/views/trace/components/codeNumCharts.vue
View File

@ -1,11 +1,10 @@
<template>
<custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" />
<custom-echart-bar :chart-data="dataList" height="100%" :option="state.option" />
</template>
<script setup>
import { reactive } from 'vue';
import { onMounted, reactive } from 'vue';
const state = reactive({
data: [
const dataList = reactive([
{
name: '其他',
value: 3500,
@ -26,7 +25,47 @@ const state = reactive({
name: '茶叶',
value: 12000,
},
],
]);
let titles = reactive([]);
let values = reactive([]);
const max = Math.max(...dataList);
const maxData = dataList.map((item, index) => {
return {
value: [max, index],
name: titles[index],
};
});
const barData = dataList.map((item, index) => {
return {
value: [item, index],
name: titles[index],
};
});
const getValue = () => {
let arr = [];
for (let i = 0; i < dataList.length; i++) {
arr.push(dataList[i].value);
}
return arr;
};
const getName = () => {
let arr = [];
for (let i = 0; i < dataList.length; i++) {
arr.push(dataList[i].name);
}
return arr;
};
onMounted(() => {
titles = getName();
values = getValue();
console.log(titles);
console.log(values);
});
const state = reactive({
option: {
grid: {
left: '5%',
@ -36,11 +75,13 @@ const state = reactive({
containLabel: true,
},
tooltip: {
show: false,
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
backgroundColor: 'rgba(18, 55, 85, 0.8);',
className: 'custom-tooltip-container', // 自定义父容器类名
backgroundColor: 'rgba(0,0,0,0.5)',
borderColor: '#35d0c0',
formatter: (data) => {
const params = data[0];
@ -53,19 +94,20 @@ const state = reactive({
},
barStyle: {
barWidth: 14,
showBackground: true,
itemStyle: {
borderWidth: 14,
borderRadius: [8, 8, 8, 8], // 设置柱子的圆角半径
borderRadius: [10, 10, 10, 10], // 设置柱子的圆角半径
},
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
x2: 1,
y2: 0,
colorStops: [
{ offset: 0, color: '#35D0C0' },
{ offset: 1, color: '#35D0C0' },
{ offset: 0, color: 'rgba(1,254,253,0)' },
{ offset: 1, color: '#01fefd' },
],
global: false,
},
@ -76,13 +118,13 @@ const state = reactive({
show: false,
lineStyle: {
type: 'dashed',
color: '#E5E5E5',
color: '#eee',
},
},
axisLabel: {
show: false,
textStyle: {
color: '#424242',
color: '#ffffff',
},
},
show: false,
@ -93,11 +135,16 @@ const state = reactive({
show: false,
},
},
yAxis: {
yAxis: [
{
// 左侧title
type: 'category',
data: ['茶叶', '核桃', '甘蔗', '烟叶', '其他'],
axisLabel: {
color: '#fff',
textStyle: {
color: '#ffffff',
fontSize: '16',
},
},
axisTick: {
show: false,
@ -109,12 +156,123 @@ const state = reactive({
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],
},
],
series: [
{
name: '值',
type: 'bar',
// barWidth: '40%', // 设置柱的宽度
// barMinHeight: 2, // 设置柱的最小高度
// barGap: '20%', // 设置柱之间的间隙
zlevel: 1,
barBorderRadius: 10,
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: maxData,
barBorderRadius: 30,
itemStyle: {
normal: {
color: 'rgba(105,131,242,.3)',
borderRadius: 10,
},
},
label: {
show: false,
},
barMaxWidth: 40,
markLine: {
label: {
color: '#26a69a',
},
},
},
{
name: '内圆',
type: 'scatter',
hoverAnimation: false,
data: barData,
yAxisIndex: 0,
symbolSize: 22,
itemStyle: {
normal: {
color: '#26a69a',
opacity: 1,
},
},
zlevel: 2,
label: {
show: false,
},
},
{
name: '外圆',
type: 'scatter',
hoverAnimation: false,
data: barData,
yAxisIndex: 0,
symbolSize: 28,
symbol: `path://M512 960C264.576 960 64 759.424 64 512S264.576 64 512 64s448 200.576 448 448-200.576 448-448 448z m0-268.8a179.2 179.2 0 1 0 0-358.4 179.2 179.2 0 0 0 0 358.4z`,
itemStyle: {
color: 'rgb(255, 255, 255)',
opacity: 1,
borderColor: 'rgba(44, 111, 226, 0.2)',
borderWidth: 2,
},
zlevel: 3,
label: {
show: false,
},
},
],
},

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

@ -20,7 +20,7 @@
</div>
</div>
<section class="line_info" :style="{ '--top': info.show ? '18vh' : '140vh' }">
<i class="el-icon-close" @click="handleCloseInfo">X</i>
<i class="el-icon-close" @click="handleCloseInfo"></i>
<section>
<section class="info_box">
<div>
@ -59,8 +59,8 @@
<div class="_time">{{ item.time }}</div>
</div>
<div style="text-align: center">
<!-- <img src="../../../assets/1.png" style="width: 30%" /> -->
<div>监测报告</div>
<img src="../../../assets/images/trace/testReport.png" style="width: 30%" />
<div>检测报告</div>
</div>
</section>
</section>
@ -104,7 +104,7 @@ function handleCloseInfo() {
display: grid;
grid-template-columns: 25% 40% 18% 17%;
background-color: rgba(53, 208, 192, 0.3);
color: #c5d0d4;
color: #ffffff;
height: 30px;
line-height: 30px;
border-radius: 4px;
@ -149,10 +149,10 @@ function handleCloseInfo() {
}
.line_info {
position: fixed;
padding: 32px 10px 20px 20px;
left: 30%;
padding: 24px 10px 16px 16px;
right: 30%;
top: var(--top);
max-height: 74vh;
max-height: 85vh;
width: 400px;
color: #fff;
background-color: rgba(0, 0, 0, 0.2);
@ -167,14 +167,18 @@ function handleCloseInfo() {
}
.el-icon-close {
position: absolute;
right: 8px;
top: 8px;
right: -40px;
top: 0px;
cursor: pointer;
font-size: 16px;
width: 30px;
height: 30px;
background-image: url(../../../assets/images/trace/delete.png);
background-size: contain;
}
> section {
padding-right: 10px;
max-height: calc(74vh - 100px);
max-height: calc(85vh - 100px);
overflow-y: auto;
&::-webkit-scrollbar {
width: 6px;

2
new-digital-agriculture-screen/src/views/trace/components/mainPartCharts.vue
View File

@ -51,7 +51,7 @@ onMounted(() => {});
}
._value {
> span {
font-size: 24px;
font-size: 20px;
}
}
img {

2
new-digital-agriculture-screen/src/views/trace/components/principalTypeCharts.vue
View File

@ -36,7 +36,7 @@ const option = reactive({
autoItemHeight: 2,
grid3D: {
show: false,
boxHeight: 5,
boxHeight: 3,
top: '0',
left: '-20%',
viewControl: {

2
new-digital-agriculture-screen/src/views/trace/components/productTypeCharts.vue
View File

@ -51,7 +51,7 @@ import { ref } from 'vue';
._left {
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: flex-start;
align-items: center;
color: #fff;
font-size: 18px;

84
new-digital-agriculture-screen/src/views/trace/components/traceMap.vue
View File

@ -8,6 +8,7 @@
<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import * as echarts from 'echarts';
import geoJsonData from './china.json'; // 根据实际情况调整路径;
const route = useRoute();
const props = defineProps({
@ -26,6 +27,33 @@ const chinaGeoCoordMap = ref({
香港: [114.133834, 22.381374],
四川: [104.063707, 30.658753],
河北: [114.511072, 38.054693],
北京: [116.46, 39.92],
浙江: [120.19, 30.26],
山东: [117, 36.65],
福建: [119.3, 26.08],
上海: [121.48, 31.22],
重庆: [106.54, 29.59],
江西: [115.89, 28.68],
山西: [112.53, 37.87],
黑龙江: [126.63, 45.75],
陕西: [108.95, 34.27],
辽宁: [123.38, 41.8],
海南: [110.35, 20.02],
湖南: [113, 28.21],
宁夏: [106.27, 38.47],
湖北: [114.31, 30.52],
内蒙古: [111.65, 40.82],
天津: [117.2, 39.13],
贵州: [106.71, 26.57],
甘肃: [103.73, 36.03],
江苏: [118.78, 32.04],
吉林: [125.35, 43.88],
河南: [113.65, 34.76],
青海: [101.74, 36.56],
安徽: [117.27, 31.86],
广西: [108.33, 22.84],
西藏: [91.11, 29.97],
新疆: [87.68, 43.77],
});
const chinaDatas = ref([
[{ name: '云南', value: 382 }],
@ -33,7 +61,35 @@ const chinaDatas = ref([
[{ name: '香港', value: 9256 }],
[{ name: '四川', value: 1256 }],
[{ name: '河北', value: 382 }],
[{ name: '北京', value: 88 }],
[{ name: '浙江', value: 87 }],
[{ name: '山东', value: 87 }],
[{ name: '福建', value: 87 }],
[{ name: '上海', value: 87 }],
[{ name: '重庆', value: 87 }],
[{ name: '江西', value: 86 }],
[{ name: '山西', value: 84 }],
[{ name: '黑龙江', value: 83 }],
[{ name: '陕西', value: 83 }],
[{ name: '辽宁', value: 82 }],
[{ name: '海南', value: 82 }],
[{ name: '湖南', value: 82 }],
[{ name: '宁夏', value: 82 }],
[{ name: '湖北', value: 81 }],
[{ name: '内蒙古', value: 81 }],
[{ name: '天津', value: 80 }],
[{ name: '贵州', value: 80 }],
[{ name: '甘肃', value: 80 }],
[{ name: '江苏', value: 80 }],
[{ name: '吉林', value: 80 }],
[{ name: '河南', value: 79 }],
[{ name: '青海', value: 79 }],
[{ name: '广西', value: 78 }],
[{ name: '安徽', value: 77 }],
[{ name: '新疆', value: 76 }],
[{ name: '西藏', value: 76 }],
]);
// 设置扩散中心
const convertData = (data) => {
var res = [];
for (var i = 0; i < data.length; i++) {
@ -73,6 +129,10 @@ const getSeries = () => {
width: 1, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: 0.3, //尾迹线条曲直度
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#0096FF' },
{ offset: 1, color: '#00FF00' },
]),
},
},
data: convertData(item[1]),
@ -180,7 +240,8 @@ const chartsData = reactive({
},
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(18, 55, 85, 0.8);',
className: 'custom-tooltip-container', // 自定义父容器类名
backgroundColor: 'rgba(0,0,0,0.5)',
borderColor: '#35d0c0',
showDelay: 0,
hideDelay: 0,
@ -189,6 +250,7 @@ const chartsData = reactive({
extraCssText: 'z-index:100',
formatter: function (params, ticket, callback) {
let val = 0;
let str = `<div class="custom-echarts-tips"></div>`;
if (typeof params.value == 'number') {
val = params.value;
} else {
@ -197,7 +259,7 @@ const chartsData = reactive({
//根据业务自己拓展要显示的内容
var res = '';
var name = params.name;
res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + val;
res = `<span style='color:#fff;'> ${name}<br/>数据：${val}</span>`;
return res;
},
},
@ -211,15 +273,27 @@ const chartsData = reactive({
show: false,
},
},
roam: true, //是否允许缩放
roam: false, //是否允许缩放
itemStyle: {
normal: {
color: 'rgba(75,255,180,0.3)', //地图背景色
color: 'rgba(75,255,180,0.5)', //地图背景色
borderColor: '#4bffb4', //省市边界线00fcff 516a89
borderWidth: 1,
areaColor: {
type: 'radial', // 径向渐变
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{ offset: 0, color: 'rgba(17,217,245,0.2)' },
{ offset: 1, color: 'rgba(10,209,231,0.6)' },
],
},
shadowColor: '#182f68',
shadowOffsetY: 2,
},
emphasis: {
color: 'rgba(75,255,180,0.5)', //悬浮背景
color: 'rgba(10,209,231,0.6)', //悬浮背景
borderWidth: 2,
},
},

2
new-digital-agriculture-screen/src/views/trace/index.vue
View File

@ -23,7 +23,7 @@
:down-title="'1号仓库'"
:label-field="'label'"
:value-field="'value'"
:down-width="'100px'"
:down-width="''"
:options="[
{ label: '1号仓库', value: '530926' },
{ label: '2号仓库', value: '42611' },

115
new-digital-agriculture-screen/vite.config.js.timestamp-1747702358990-b2871da6ea6b8.mjs Normal file
View File

File diff suppressed because one or more lines are too long

16986
new-digital-agriculture-screen/yarn.lock
View File

File diff suppressed because it is too large Load Diff

1
sub-operation-service/.yarnrc.yml Normal file
View File

@ -0,0 +1 @@
nodeLinker: node-modules

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

@ -23,6 +23,7 @@
"axios": "^1.6.5",
"echarts": "^5.6.0",
"element-plus": "^2.7.2",
"hls.js": "^1.6.2",
"js-base64": "^3.7.6",
"lodash": "^4.17.21",
"moment": "^2.30.1",

18532
sub-operation-service/src/assets/530926geo.json Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
sub-operation-service/src/assets/images/brand/1 (1).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
sub-operation-service/src/assets/images/brand/1 (2).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
sub-operation-service/src/assets/images/brand/1 (3).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
sub-operation-service/src/assets/images/brand/1 (4).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
sub-operation-service/src/assets/images/brand/1 (5).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
sub-operation-service/src/assets/images/brand/1 (6).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
sub-operation-service/src/assets/images/brand/2 (1).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
sub-operation-service/src/assets/images/brand/2 (2).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
sub-operation-service/src/assets/images/brand/2 (3).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
sub-operation-service/src/assets/images/brand/p (1).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
sub-operation-service/src/assets/images/brand/p (3).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
sub-operation-service/src/assets/images/brand/sqzs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 388 KiB

BIN
sub-operation-service/src/assets/images/brand/生产管理控制.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
sub-operation-service/src/assets/images/brand/用户信息.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
sub-operation-service/src/assets/images/brand/组 1532.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
sub-operation-service/src/assets/images/brand/组 1533.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
sub-operation-service/src/assets/images/brand/识别二维码.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
sub-operation-service/src/assets/images/closing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
sub-operation-service/src/assets/images/down_1@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/bell.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/danger.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/fall.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/goDown.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/goUp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/location.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/normal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/rainy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/rise.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/sunny.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/sunnyToCloudy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/testPic1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/thunderRain.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/windy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/产能预测.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 602 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/传感器.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/光照传感器.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/分光器.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/土壤温度.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/土壤湿度.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/悬浮物.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/排风.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/水质溶解氧.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/水质电导率.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/浊度.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/温度.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/监控.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/空气.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/蒸腾.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
sub-operation-service/src/assets/images/smartFarm/酸碱度.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

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

@ -59,9 +59,21 @@ export const constantRoutes = [
},
{
path: '/sub-operation-service/smartFarm/fieldInspection',
component: () => import('@/views/smartFarm/fieldInspection/index.vue'),
component: () => import('@/views/smartFarm/inspection/fieldInspection.vue'),
name: 'fieldInspection',
meta: { title: '田间检测' },
meta: { title: '田间监测' },
},
{
path: '/sub-operation-service/smartFarm/waterInspection',
component: () => import('@/views/smartFarm/inspection/waterInspection.vue'),
name: 'waterInspection',
meta: { title: '水质监测' },
},
{
path: '/sub-operation-service/smartFarm/bugInspection',
component: () => import('@/views/smartFarm/inspection/bugInspection.vue'),
name: 'bugInspection',
meta: { title: '病虫害监测' },
},
],
},

67
sub-operation-service/src/views/brand/components/ApplyManagement.vue Normal file
View File

@ -0,0 +1,67 @@
<template>
<el-page-header>
<template #breadcrumb>
<el-breadcrumb separator="·">
<el-breadcrumb-item :to="{ path: './page-header.html' }"> 使用申请 </el-breadcrumb-item>
<el-breadcrumb-item>我要申请</el-breadcrumb-item>
</el-breadcrumb>
</template>
</el-page-header>
<el-space class="content-box" wrap>
<el-card v-for="o in 12" :key="o" class="box-card">
<div style="height: 100%" class="flex-clomn">
<img :src="url" alt="" class="img" />
<p>耿马绿色蔬菜</p>
<el-button class="button">我要申请</el-button>
</div>
</el-card>
</el-space>
</template>
<script setup>
const goBack = () => {
console.log('go back');
};
</script>
<style scoped lang="scss">
.content-box {
margin: 0;
padding: 0;
box-sizing: border-box;
.box-card {
box-shadow: none;
width: 224px;
height: 334px;
background: #ffffff;
border-radius: 16px;
padding: 8;
.flex-clomn {
display: flex;
flex-direction: column;
gap: 8;
}
p {
text-align: center;
font-size: 20px;
font-weight: 700;
}
.img {
width: 182px;
height: 182px;
}
.button {
width: 96px;
height: 40px;
background: #25bf82;
border-radius: 8px;
align-self: center;
color: #fff;
}
}
// .content-box::-webkit-scrollbar {
// display: none; /* 隐藏滚动条 */
// }
}
</style>

202
sub-operation-service/src/views/brand/components/AuthManagement.vue Normal file
View File

@ -0,0 +1,202 @@
<template>
<div class="auth-management">
<!-- 统计卡片 -->
<el-row :gutter="20" class="mb-24">
<el-col :span="12">
<el-card shadow="hover" class="stat-card">
<div class="stat-icon green-bg">✔</div>
<div>
<div class="stat-number">999 件</div>
<div class="stat-label">授权产品</div>
</div>
</el-card>
</el-col>
<el-col :span="12">
<el-card shadow="hover" class="stat-card">
<div class="stat-icon red-bg">⚠</div>
<div>
<div class="stat-number text-warning">199 件</div>
<div class="stat-label">临期产品</div>
</div>
</el-card>
</el-col>
</el-row>
<!-- 状态筛选 -->
<el-tabs v-model="activeStatus" class="mb-24">
<el-tab-pane label="已授权" name="authorized" />
<el-tab-pane label="审批中" name="approving" />
<el-tab-pane label="已失效" name="expired" />
</el-tabs>
<!-- 产品列表 -->
<el-card shadow="never">
<div v-for="(product, index) in products" :key="product.id" class="product-item" :class="{ 'border-top': index > 0 }">
<img class="product-img" src="https://via.placeholder.com/80" alt="product" />
<div class="product-info">
<div class="product-header">
<el-tag :type="statusMap[product.status]">{{ product.statusLabel }}</el-tag>
<span class="product-name">{{ product.name }}</span>
</div>
<div class="product-details">
<div class="detail-item">
<label>检测批次：</label>
<span>{{ product.batch }}</span>
</div>
<div class="detail-item">
<label>授权期限：</label>
<span>{{ product.duration }}</span>
</div>
<div class="detail-item">
<label>到期时间：</label>
<span class="text-expire">{{ product.expireDate }}</span>
</div>
</div>
</div>
<el-button type="primary" plain size="small" @click="handleCertificate(product)"> 授权证书 </el-button>
</div>
</el-card>
</div>
</template>
<script setup>
import { ref } from 'vue';
const activeStatus = ref('authorized');
const statusMap = {
authorized: 'success',
approving: 'warning',
expired: 'danger',
};
const products = ref([
{
id: 1,
name: '耿马镇沙疆西红柿',
batch: '10021',
duration: '6个月',
expireDate: '2025.01.01',
status: 'authorized',
statusLabel: '已授权',
},
{
id: 2,
name: '孟弄乡沙地土豆',
batch: '10022',
duration: '6个月',
expireDate: '2025.01.02',
status: 'authorized',
statusLabel: '已授权',
},
{
id: 3,
name: '芒洪乡水果彩椒',
batch: '10021',
duration: '6个月',
expireDate: '2025.01.01',
status: 'authorized',
statusLabel: '已授权',
},
]);
const handleCertificate = (product) => {
console.log('查看证书:', product);
};
</script>
<style lang="scss" scoped>
.auth-management {
padding: 20px;
.stat-card {
display: flex;
align-items: center;
padding: 20px;
.stat-icon {
width: 50px;
height: 50px;
font-size: 24px;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16px;
}
.green-bg {
background-color: #67c23a;
}
.red-bg {
background-color: #f56c6c;
}
.stat-number {
font-size: 20px;
font-weight: 600;
&.text-warning {
color: #e6a23c;
}
}
.stat-label {
color: #606266;
}
}
.product-item {
display: flex;
align-items: center;
padding: 20px 0;
&.border-top {
border-top: 1px solid #ebeef5;
}
.product-img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 12px;
margin-right: 20px;
}
.product-info {
flex: 1;
.product-header {
display: flex;
align-items: center;
margin-bottom: 12px;
.product-name {
margin-left: 12px;
font-weight: 500;
font-size: 16px;
}
}
.product-details {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
.detail-item {
label {
color: #909399;
}
.text-expire {
color: #e6a23c;
}
}
}
}
.el-button {
align-self: flex-end;
margin-left: 20px;
}
}
.mb-24 {
margin-bottom: 24px;
}
}
</style>

180
sub-operation-service/src/views/brand/components/UsageMonitor.vue Normal file
View File

@ -0,0 +1,180 @@
<template>
<div class="usage-monitor">
<!-- 状态筛选 -->
<el-tabs v-model="activeStatus" class="mb-24">
<el-tab-pane label="在售中" name="onSale" />
<el-tab-pane label="未上架" name="notListed" />
<el-tab-pane label="已失效" name="expired" />
</el-tabs>
<!-- 商品列表 -->
<el-row :gutter="16">
<el-col v-for="product in filteredProducts" :key="product.id" :xs="24" :sm="12" :md="8" :lg="6" class="mb-16">
<el-card class="product-card">
<!-- 商品状态 -->
<div class="status-tag">
<el-tag :type="statusMap[product.status]" size="small">
{{ product.statusLabel }}
</el-tag>
</div>
<!-- 商品信息 -->
<div class="product-content">
<h4 class="product-name">{{ product.name }}</h4>
<div class="sales-info">
<div class="data-item">
<span class="label">月售</span>
<span class="value">{{ product.monthlySales }}</span>
</div>
<div class="data-item">
<span class="label">库存</span>
<span class="value">{{ product.stock }}</span>
</div>
</div>
<div class="price">
{{ product.price }}
</div>
</div>
<!-- 操作按钮 -->
<div class="product-actions">
<el-button v-if="product.status !== 'expired'" size="small" @click="handleInspect(product)">抽查</el-button>
<el-button v-if="product.status === 'onSale'" size="small" type="danger" plain @click="handleRevoke(product)">取消授权</el-button>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const activeStatus = ref('onSale');
// 状态映射配置，用于 el-tag 的样式
const statusMap = {
onSale: 'success',
notListed: 'info',
expired: 'danger',
};
// 商品数据，这里保持与原型图中的展示一致
const products = ref([
{
id: 1,
name: '耿马镇沙瓢西红柿',
monthlySales: 999,
stock: 10000,
price: '￥3.0/kg',
status: 'onSale',
statusLabel: '在售中',
},
{
id: 2,
name: '昭通乡土黄瓜',
monthlySales: 750,
stock: 8500,
price: '￥2.5/kg',
status: 'onSale',
statusLabel: '在售中',
},
{
id: 3,
name: '昆明有机苹果',
monthlySales: 450,
stock: 5000,
price: '￥6.0/kg',
status: 'notListed', // 修改为 notListed，对应“未上架”
statusLabel: '未上架',
},
{
id: 4,
name: '楚雄散养鸡蛋',
monthlySales: 1200,
stock: 20000,
price: '￥8.0/斤',
status: 'onSale',
statusLabel: '在售中',
},
]);
// 根据当前选择状态过滤商品列表
const filteredProducts = computed(() => {
return products.value.filter((item) => item.status === activeStatus.value);
});
// 操作处理逻辑
const handleInspect = (product) => {
console.log('抽查商品:', product);
};
const handleRevoke = (product) => {
console.log('取消授权:', product);
};
</script>
<style lang="scss" scoped>
.usage-monitor {
padding: 20px;
.mb-24 {
margin-bottom: 24px;
}
.product-card {
position: relative;
margin-bottom: 16px;
transition: box-shadow 0.3s;
&:hover {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.status-tag {
position: absolute;
top: 12px;
right: 12px;
}
.product-content {
.product-name {
margin: 0 0 12px;
font-size: 16px;
color: #303133;
}
.sales-info {
display: flex;
gap: 20px;
margin-bottom: 12px;
.data-item {
.label {
color: #909399;
margin-right: 4px;
}
.value {
font-weight: 500;
}
}
}
.price {
color: #f56c6c;
font-size: 18px;
font-weight: 600;
}
}
.product-actions {
margin-top: 16px;
display: flex;
gap: 8px;
justify-content: flex-end;
}
}
}
</style>

Some files were not shown because too many files have changed in this diff Show More