Merge branch 'dev' of http://47.109.205.240:3000/Web/daimp-front into dev
This commit is contained in:
commit
575ec062cb
BIN
main/.yarn/install-state.gz
Normal file
BIN
main/.yarn/install-state.gz
Normal file
Binary file not shown.
1
main/.yarnrc.yml
Normal file
1
main/.yarnrc.yml
Normal file
@ -0,0 +1 @@
|
||||
nodeLinker: node-modules
|
||||
17468
main/yarn.lock
17468
main/yarn.lock
File diff suppressed because it is too large
Load Diff
@ -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']
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 417 KiB |
@ -259,6 +259,7 @@ export default {
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
show: true,
|
||||
right: '5%',
|
||||
top: '25%',
|
||||
|
||||
@ -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,221 +184,237 @@ 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,
|
||||
// 使用上一次遍历时，计算出的数据和 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 * serie.pieData.value : props.option.itemHeight
|
||||
props.option.autoItemHeight > 0 ? props.option.autoItemHeight * series[i].pieData.value : props.option.itemHeight,
|
||||
z
|
||||
);
|
||||
|
||||
startValue = endValue;
|
||||
});
|
||||
|
||||
// 添加一个透明圆环，用于实现 hover 在扇形外面时取消高亮
|
||||
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: '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;
|
||||
},
|
||||
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,
|
||||
});
|
||||
|
||||
// 基础配置：坐标轴、视角、图例、提示框等
|
||||
const option = Object.assign(
|
||||
{
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(18, 55, 85, 0.8)',
|
||||
borderColor: '#35d0c0',
|
||||
// 准备待返回的配置项，把准备好的 legendData、series 传入。
|
||||
const option = {
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
show: true,
|
||||
right: '5%',
|
||||
top: '25%',
|
||||
orient: 'vertical',
|
||||
icon: 'circle',
|
||||
itemHeight: 12,
|
||||
itemWidth: 12,
|
||||
itemGap: 10,
|
||||
textStyle: {
|
||||
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 '';
|
||||
},
|
||||
fontSize: 14,
|
||||
fontWeight: '400',
|
||||
},
|
||||
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,
|
||||
},
|
||||
formatter: (name) => {
|
||||
if (props.chartData.length) {
|
||||
const item = props.chartData.filter((item) => item.name === name)[0];
|
||||
return ` ${name} ${item.value}${props.option.legendSuffix ?? ''}`;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
selectedMode: false,
|
||||
right: '5%',
|
||||
top: '25%',
|
||||
orient: 'vertical',
|
||||
icon: 'circle',
|
||||
itemHeight: 12,
|
||||
itemWidth: 12,
|
||||
itemGap: 10,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
fontWeight: '400',
|
||||
},
|
||||
// 图例标签显示名称和数值
|
||||
formatter: (name) => {
|
||||
const item = props.chartData.find((d) => d.name === name);
|
||||
return item ? ` ${name} ${item.value}${props.option.legendSuffix || ''}` : name;
|
||||
},
|
||||
},
|
||||
series,
|
||||
},
|
||||
// 将外部配置项覆盖基础配置
|
||||
props.option
|
||||
);
|
||||
|
||||
// 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,
|
||||
};
|
||||
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>
|
||||
|
||||
@ -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>
|
||||
@ -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,
|
||||
};
|
||||
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);
|
||||
}
|
||||
// 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;
|
||||
});
|
||||
obj['data'] = data;
|
||||
seriesData.push(obj);
|
||||
|
||||
// 4. 合并配置（外部配置优先，内部生成配置补充）
|
||||
return {
|
||||
type: props.type, // 默认类型
|
||||
name: type, // 必须字段
|
||||
data, // 动态生成的数据
|
||||
smooth: true, // 默认平滑
|
||||
...externalConfig, // 外部配置覆盖内部默认值
|
||||
// 特殊处理areaStyle（保留您的颜色逻辑）
|
||||
areaStyle: externalConfig.areaStyle || (props.option?.color ? setAreaStyle(props.option.color[index]) : undefined),
|
||||
};
|
||||
});
|
||||
option.series = seriesData;
|
||||
option.xAxis.data = xAxisData;
|
||||
// console.log(option.series);
|
||||
setOptions(option);
|
||||
startAutoPlay({
|
||||
interval: 2000,
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -176,7 +176,7 @@ function handleTitleClick(val) {
|
||||
position: relative;
|
||||
width: 31%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
// overflow: hidden;
|
||||
line-height: 90px;
|
||||
.title_content {
|
||||
position: absolute;
|
||||
|
||||
@ -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: '' },
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
},
|
||||
|
||||
@ -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 + '%'; //显示文本
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -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;
|
||||
};
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
:down-title="'农资企业'"
|
||||
:label-field="'label'"
|
||||
:value-field="'value'"
|
||||
:down-width="'130px'"
|
||||
:down-width="''"
|
||||
:options="[
|
||||
{ value: 1, label: '农企/合作社' },
|
||||
{ value: 2, label: '农资企业' },
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
backgroundColor: 'rgba(18, 55, 85, 0.8);',
|
||||
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;
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.5);',
|
||||
borderColor: '#35d0c0',
|
||||
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',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
margin: 15,
|
||||
align: 'center',
|
||||
},
|
||||
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)',
|
||||
axisTick: {
|
||||
show: false, // 隐藏刻度线
|
||||
},
|
||||
},
|
||||
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',
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
// name: '',
|
||||
{
|
||||
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',
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
{
|
||||
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>
|
||||
|
||||
@ -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: '',
|
||||
list: [
|
||||
{
|
||||
label: '订单金额',
|
||||
value: '548.86',
|
||||
unit: '万元',
|
||||
},
|
||||
{
|
||||
label: '订单数量',
|
||||
value: '110554',
|
||||
unit: '笔',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</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>
|
||||
|
||||
@ -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">查看案件 ></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;
|
||||
|
||||
.view-case {
|
||||
font-size: 16px;
|
||||
color: #00ff99;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
padding: 4px 10px;
|
||||
color: #ffffff;
|
||||
|
||||
.value {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
color: $color-white;
|
||||
font-size: 12px;
|
||||
.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 {
|
||||
&.green {
|
||||
color: #01ffb1;
|
||||
}
|
||||
|
||||
&.red {
|
||||
color: #ff4242;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<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>
|
||||
</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 后有效
|
||||
},
|
||||
},
|
||||
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 },
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
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>
|
||||
|
||||
@ -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 chartConfig = ref({
|
||||
attr: {
|
||||
w: 200, // 容器宽度
|
||||
h: 192, // 容器高度
|
||||
},
|
||||
option: {
|
||||
header: ['投入品种类', '平台价格', '市场价格'],
|
||||
dataset: [
|
||||
['圆茄种苗', '0.3元/棵', '0.4元/棵'],
|
||||
['高氮复合肥', '1850元/吨', '1980元/吨'],
|
||||
['硫酸钾', '1250元/吨', '1380元/吨'],
|
||||
['高氮复合肥', '1850元/吨', '1980元/吨'],
|
||||
['西红柿种苗', '0.3元/棵', '0.4元/棵'],
|
||||
],
|
||||
// 样式配置
|
||||
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 header = ['白名单企业', '产品名称', '黑名单企业', '产品名称'];
|
||||
const len = header.length;
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
options: {
|
||||
attr: { w: 200, h: 240 },
|
||||
option: {
|
||||
header,
|
||||
dataset: [
|
||||
// ['富农种源', '京科824', '南方农业', '京科824'],
|
||||
// ['富农种源', '京科824', '南方农业', '京科824'],
|
||||
// ['富农种源', '京科824', '南方农业', '京科824'],
|
||||
// ['富农种源', '京科824', '南方农业', '京科824'],
|
||||
// ['富农种源', '京科824', '南方农业', '京科824'],
|
||||
// ['富农种源', '京科824', '南方农业', '京科824'],
|
||||
// ['富农种源', '京科824', '南方农业', '京科824'],
|
||||
],
|
||||
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)',
|
||||
},
|
||||
},
|
||||
});
|
||||
// 动态数据
|
||||
const currentDate = ref('2023年12月15日');
|
||||
const scrollPosition = ref(0);
|
||||
const scrollContainer = ref(null);
|
||||
let animationFrameId = null;
|
||||
|
||||
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 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);
|
||||
};
|
||||
|
||||
animationFrameId = requestAnimationFrame(scroll);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
if (!isEmpty(val)) {
|
||||
state.options.option.dataset = genBlankAndWihteList(val);
|
||||
state.loading = true;
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
onMounted(() => {
|
||||
// 获取真实日期
|
||||
const now = new Date();
|
||||
currentDate.value = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
|
||||
|
||||
startScrolling();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.board {
|
||||
padding: 10px 0px;
|
||||
/* 自定义样式 */
|
||||
.dv-scroll-board {
|
||||
font-family: 'PingFang SC', 'PingFang SC-Regular', sans-serif;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
|
||||
&:deep(.row-item) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
},
|
||||
},
|
||||
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: '面积(万亩)',
|
||||
borderRadius: 8,
|
||||
formatter: (params) => `
|
||||
<div style="font-weight:700;margin-bottom:5px;color:#fff;font-size: 16px;">${params[0].name}</div>
|
||||
${params
|
||||
.map(
|
||||
(p) => `
|
||||
<div style="display:flex;align-items:center;margin:3px 0;color:#fff">
|
||||
<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${p.color};margin-right:6px;color:#fff"></span>
|
||||
${p.seriesName}: <span style="font-weight:bold;margin-left:5px;color:#fff">${p.value} 吨</span>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join('')}
|
||||
`,
|
||||
extraCssText: 'backdrop-filter: blur(8px);',
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
if (!isEmpty(val)) {
|
||||
state.data = val;
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
@ -1,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%',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@ -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: '化肥' },
|
||||
|
||||
@ -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" >
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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);
|
||||
});
|
||||
@ -1,32 +1,71 @@
|
||||
<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 dataList = reactive([
|
||||
{
|
||||
name: '其他',
|
||||
value: 3500,
|
||||
},
|
||||
{
|
||||
name: '烟叶',
|
||||
value: 4000,
|
||||
},
|
||||
{
|
||||
name: '甘蔗',
|
||||
value: 6000,
|
||||
},
|
||||
{
|
||||
name: '核桃',
|
||||
value: 8000,
|
||||
},
|
||||
{
|
||||
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({
|
||||
data: [
|
||||
{
|
||||
name: '其他',
|
||||
value: 3500,
|
||||
},
|
||||
{
|
||||
name: '烟叶',
|
||||
value: 4000,
|
||||
},
|
||||
{
|
||||
name: '甘蔗',
|
||||
value: 6000,
|
||||
},
|
||||
{
|
||||
name: '核桃',
|
||||
value: 8000,
|
||||
},
|
||||
{
|
||||
name: '茶叶',
|
||||
value: 12000,
|
||||
},
|
||||
],
|
||||
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,28 +135,144 @@ const state = reactive({
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['茶叶', '核桃', '甘蔗', '烟叶', '其他'],
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
yAxis: [
|
||||
{
|
||||
// 左侧title
|
||||
type: 'category',
|
||||
data: ['茶叶', '核桃', '甘蔗', '烟叶', '其他'],
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: '16',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
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],
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
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,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -51,7 +51,7 @@ onMounted(() => {});
|
||||
}
|
||||
._value {
|
||||
> span {
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
|
||||
@ -36,7 +36,7 @@ const option = reactive({
|
||||
autoItemHeight: 2,
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 5,
|
||||
boxHeight: 3,
|
||||
top: '0',
|
||||
left: '-20%',
|
||||
viewControl: {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,
|
||||
},
|
||||
},
|
||||
|
||||
@ -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' },
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
1
sub-operation-service/.yarnrc.yml
Normal file
1
sub-operation-service/.yarnrc.yml
Normal file
@ -0,0 +1 @@
|
||||
nodeLinker: node-modules
|
||||
@ -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
18532
sub-operation-service/src/assets/530926geo.json
Normal file
File diff suppressed because it is too large
Load Diff
BIN
sub-operation-service/src/assets/images/brand/1 (1).png
Normal file
BIN
sub-operation-service/src/assets/images/brand/1 (1).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
sub-operation-service/src/assets/images/brand/1 (2).png
Normal file
BIN
sub-operation-service/src/assets/images/brand/1 (2).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
sub-operation-service/src/assets/images/brand/1 (3).png
Normal file
BIN
sub-operation-service/src/assets/images/brand/1 (3).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
sub-operation-service/src/assets/images/brand/1 (4).png
Normal file
BIN
sub-operation-service/src/assets/images/brand/1 (4).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
sub-operation-service/src/assets/images/brand/1 (5).png
Normal file
BIN
sub-operation-service/src/assets/images/brand/1 (5).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
sub-operation-service/src/assets/images/brand/1 (6).png
Normal file
BIN
sub-operation-service/src/assets/images/brand/1 (6).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
sub-operation-service/src/assets/images/brand/2 (1).png
Normal file
BIN
sub-operation-service/src/assets/images/brand/2 (1).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
sub-operation-service/src/assets/images/brand/2 (2).png
Normal file
BIN
sub-operation-service/src/assets/images/brand/2 (2).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
sub-operation-service/src/assets/images/brand/2 (3).png
Normal file
BIN
sub-operation-service/src/assets/images/brand/2 (3).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
sub-operation-service/src/assets/images/brand/p (1).png
Normal file
BIN
sub-operation-service/src/assets/images/brand/p (1).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
sub-operation-service/src/assets/images/brand/p (3).png
Normal file
BIN
sub-operation-service/src/assets/images/brand/p (3).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
sub-operation-service/src/assets/images/brand/sqzs.png
Normal file
BIN
sub-operation-service/src/assets/images/brand/sqzs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 388 KiB |
BIN
sub-operation-service/src/assets/images/brand/生产管理控制.png
Normal file
BIN
sub-operation-service/src/assets/images/brand/生产管理控制.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
sub-operation-service/src/assets/images/brand/用户信息.png
Normal file
BIN
sub-operation-service/src/assets/images/brand/用户信息.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
sub-operation-service/src/assets/images/brand/组 1532.png
Normal file
BIN
sub-operation-service/src/assets/images/brand/组 1532.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
sub-operation-service/src/assets/images/brand/组 1533.png
Normal file
BIN
sub-operation-service/src/assets/images/brand/组 1533.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
sub-operation-service/src/assets/images/brand/识别二维码.png
Normal file
BIN
sub-operation-service/src/assets/images/brand/识别二维码.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
sub-operation-service/src/assets/images/closing.png
Normal file
BIN
sub-operation-service/src/assets/images/closing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
sub-operation-service/src/assets/images/down_1@2x.png
Normal file
BIN
sub-operation-service/src/assets/images/down_1@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/bell.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/bell.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/danger.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/danger.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/fall.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/fall.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/goDown.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/goDown.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/goUp.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/goUp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/location.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/location.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/normal.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/normal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/rainy.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/rainy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/rise.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/rise.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/sunny.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/sunny.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/testPic1.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/testPic1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/windy.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/windy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/产能预测.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/产能预测.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 602 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/传感器.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/传感器.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/光照传感器.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/光照传感器.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/分光器.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/分光器.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/土壤温度.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/土壤温度.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/土壤湿度.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/土壤湿度.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/悬浮物.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/悬浮物.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/排风.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/排风.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/水质溶解氧.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/水质溶解氧.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/水质电导率.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/水质电导率.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/浊度.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/浊度.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/温度.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/温度.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/监控.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/监控.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/空气.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/空气.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/蒸腾.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/蒸腾.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
sub-operation-service/src/assets/images/smartFarm/酸碱度.png
Normal file
BIN
sub-operation-service/src/assets/images/smartFarm/酸碱度.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Description:
|
||||
* @Author: zenghua.wang
|
||||
* @Date: 2023-06-20 14:29:45
|
||||
* @LastEditors: zenghua.wang
|
||||
|
||||
@ -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: '病虫害监测' },
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user