政务大屏修改
This commit is contained in:
parent
2272c21814
commit
9e74b959d7
@ -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']
|
||||
|
||||
@ -49,7 +49,73 @@ const chartRef = ref(null);
|
||||
const { setOptions, getInstance } = useEcharts(chartRef);
|
||||
|
||||
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 || {}),
|
||||
};
|
||||
|
||||
// 初始化图表
|
||||
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 起点弧度
|
||||
@ -157,18 +223,10 @@ function getPie3D(pieData, internalDiameterRatio) {
|
||||
wireframe: { show: false },
|
||||
pieData: pieData[i],
|
||||
pieStatus: {
|
||||
selected: true,
|
||||
selected: false,
|
||||
hovered: false,
|
||||
k,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter: () => `${pieData[i].value}`, // 直接显示 value
|
||||
position: 'outside', // 标签位置
|
||||
distance: 10, // 距扇形边缘的距离
|
||||
color: '#fff', // 根据背景色调整
|
||||
fontSize: 14,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== 'undefined') {
|
||||
const { itemStyle } = pieData[i];
|
||||
@ -179,6 +237,7 @@ function getPie3D(pieData, internalDiameterRatio) {
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
// console.log(series);
|
||||
@ -202,6 +261,34 @@ function getPie3D(pieData, internalDiameterRatio) {
|
||||
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
// 3. 构造透明的 2D pie，用于 legend/label
|
||||
const outerPercent = 50;
|
||||
const innerPercent =
|
||||
internalDiameterRatio != null ? Math.round(internalDiameterRatio * outerPercent) : Math.round(((1 - k) / (1 + k)) * outerPercent);
|
||||
|
||||
const pie2dData = [];
|
||||
for (let i = 0; i < pieData.length; i++) {
|
||||
pie2dData.push({
|
||||
name: pieData[i].name,
|
||||
value: pieData[i].value,
|
||||
// itemStyle: { opacity: 1 },
|
||||
});
|
||||
}
|
||||
series.push({
|
||||
name: 'pie2d',
|
||||
type: 'pie',
|
||||
data: pie2dData,
|
||||
radius: [`${innerPercent}%`, `${outerPercent}%`],
|
||||
center: pie2dOption.center,
|
||||
startAngle: props.option.startAngle || 90,
|
||||
clockwise: false,
|
||||
itemStyle: {
|
||||
color: 'transparent',
|
||||
},
|
||||
avoidLabelOverlap: false,
|
||||
label: pie2dOption.label,
|
||||
labelLine: pie2dOption.labelLine,
|
||||
});
|
||||
// 基础配置：坐标轴、视角、图例、提示框等
|
||||
// 准备待返回的配置项，把准备好的 legendData、series 传入。
|
||||
const option = {
|
||||
@ -230,12 +317,12 @@ function getPie3D(pieData, internalDiameterRatio) {
|
||||
// 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}`;
|
||||
// 只针对 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 '';
|
||||
},
|
||||
@ -266,23 +353,6 @@ function getPie3D(pieData, internalDiameterRatio) {
|
||||
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,
|
||||
};
|
||||
@ -335,7 +405,7 @@ function updateSeriesHover(index, toHover) {
|
||||
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 + 5 : baseHeight;
|
||||
const newHeight = toHover ? baseHeight + 80 : baseHeight;
|
||||
// 更新 parametricEquation
|
||||
item.parametricEquation = getParametricEquation(start, end, isSelected, toHover, k, newHeight);
|
||||
// 更新状态
|
||||
@ -345,34 +415,6 @@ function updateSeriesHover(index, toHover) {
|
||||
};
|
||||
}
|
||||
|
||||
// 初始化图表
|
||||
function initChart() {
|
||||
// 生成基础的3D饼图配置(也就是默认的配置)
|
||||
const baseOption = getPie3D(props.chartData, props.option.k);
|
||||
// 合并用户配置，确保不修改原始对象
|
||||
// const finalOption = Object.assign({}, baseOption, cloneDeep(props.option || {}));
|
||||
const finalOption = merge({}, baseOption, cloneDeep(props.option || {}));
|
||||
chartOption.value = finalOption;
|
||||
// 设置图表配置
|
||||
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 handleClick(params) {
|
||||
// 如果点击的是透明辅助环，则忽略
|
||||
if (params.seriesName === 'mouseoutSeries') return;
|
||||
@ -412,22 +454,6 @@ function handleClick(params) {
|
||||
setOptions(optionVal);
|
||||
emit('click', params);
|
||||
}
|
||||
|
||||
// 组件挂载后绑定事件
|
||||
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>
|
||||
@ -47,45 +47,44 @@ const state = reactive({
|
||||
},
|
||||
formatter: (name) => name,
|
||||
},
|
||||
// series: [
|
||||
// {
|
||||
// type: 'pie3D',
|
||||
// center: ['50%', '50%'],
|
||||
// radius: ['40%', '60%'],
|
||||
// avoidLabelOverlap: false,
|
||||
// label: {
|
||||
// normal: {
|
||||
// formatter: (params) => {
|
||||
// return params.value + '%';
|
||||
// },
|
||||
// padding: [0, -100, 25, -100],
|
||||
// rich: {
|
||||
// icon: {
|
||||
// fontSize: 16,
|
||||
// },
|
||||
// name: {
|
||||
// fontSize: 14,
|
||||
// padding: [0, 10, 0, 4],
|
||||
// color: '#666666',
|
||||
// },
|
||||
// value: {
|
||||
// fontSize: 18,
|
||||
// fontWeight: 'bold',
|
||||
// color: '#333333',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// labelLine: {
|
||||
// show: false,
|
||||
// },
|
||||
// data: [],
|
||||
// },
|
||||
// ],
|
||||
pie2dConfig: {
|
||||
center: ['50%', '40%'],
|
||||
label: {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
formatter: (params) => {
|
||||
const total = 221.8 + 70.01; // 或动态计算
|
||||
const percent = ((params.value / total) * 100).toFixed(0);
|
||||
return `{name|${params.name}}\n{value|${params.value} 万吨\n（${percent}%）}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#ffffff',
|
||||
lineHeight: 20,
|
||||
align: 'center',
|
||||
},
|
||||
value: {
|
||||
fontSize: 16,
|
||||
color: '#79F5AF',
|
||||
lineHeight: 18,
|
||||
align: 'center',
|
||||
},
|
||||
},
|
||||
color: '#fff',
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 40,
|
||||
length2: 40,
|
||||
lineStyle: { color: '#fff', width: 2 },
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ value: 76, name: '产业运营平台' },
|
||||
{ value: 24, name: '其它', floatZ: 1 },
|
||||
{ value: 221.8, name: '产业运营平台' },
|
||||
{ value: 70.01, name: '其它', floatZ: 1 },
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -43,6 +43,7 @@ const chartConfig = ref({
|
||||
['圆茄种苗', '0.3元/棵', '0.4元/棵'],
|
||||
['高氮复合肥', '1850元/吨', '1980元/吨'],
|
||||
['硫酸钾', '1250元/吨', '1380元/吨'],
|
||||
['高氮复合肥', '1850元/吨', '1980元/吨'],
|
||||
['西红柿种苗', '0.3元/棵', '0.4元/棵'],
|
||||
],
|
||||
// 样式配置
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -17,7 +17,7 @@ const state = reactive({
|
||||
option: {
|
||||
k: 0,
|
||||
opacity: 1,
|
||||
itemGap: 0.2,
|
||||
itemGap: 0.1,
|
||||
legendSuffix: '万亩',
|
||||
itemHeight: 200,
|
||||
grid3D: {
|
||||
|
||||
@ -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);
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
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 |
@ -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>
|
||||
@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<div class="usage-monitor">
|
||||
<!-- 状态筛选 -->
|
||||
<el-tabs v-model="activeStatus" class="mb-24">
|
||||
<el-tab-pane label="在售中" name="onSale" />
|
||||
<el-tab-pane label="未上架" name="notListed" />
|
||||
<el-tab-pane label="已失效" name="expired" />
|
||||
</el-tabs>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<el-row :gutter="16">
|
||||
<el-col v-for="product in filteredProducts" :key="product.id" :xs="24" :sm="12" :md="8" :lg="6" class="mb-16">
|
||||
<el-card class="product-card">
|
||||
<!-- 商品状态 -->
|
||||
<div class="status-tag">
|
||||
<el-tag :type="statusMap[product.status]" size="small">
|
||||
{{ product.statusLabel }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<div class="product-content">
|
||||
<h4 class="product-name">{{ product.name }}</h4>
|
||||
|
||||
<div class="sales-info">
|
||||
<div class="data-item">
|
||||
<span class="label">月售</span>
|
||||
<span class="value">{{ product.monthlySales }}</span>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<span class="label">库存</span>
|
||||
<span class="value">{{ product.stock }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="price">
|
||||
{{ product.price }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="product-actions">
|
||||
<el-button v-if="product.status !== 'expired'" size="small" @click="handleInspect(product)">抽查</el-button>
|
||||
<el-button v-if="product.status === 'onSale'" size="small" type="danger" plain @click="handleRevoke(product)">取消授权</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
const activeStatus = ref('onSale');
|
||||
|
||||
// 状态映射配置，用于 el-tag 的样式
|
||||
const statusMap = {
|
||||
onSale: 'success',
|
||||
notListed: 'info',
|
||||
expired: 'danger',
|
||||
};
|
||||
|
||||
// 商品数据，这里保持与原型图中的展示一致
|
||||
const products = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: '耿马镇沙瓢西红柿',
|
||||
monthlySales: 999,
|
||||
stock: 10000,
|
||||
price: '￥3.0/kg',
|
||||
status: 'onSale',
|
||||
statusLabel: '在售中',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '昭通乡土黄瓜',
|
||||
monthlySales: 750,
|
||||
stock: 8500,
|
||||
price: '￥2.5/kg',
|
||||
status: 'onSale',
|
||||
statusLabel: '在售中',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '昆明有机苹果',
|
||||
monthlySales: 450,
|
||||
stock: 5000,
|
||||
price: '￥6.0/kg',
|
||||
status: 'notListed', // 修改为 notListed，对应“未上架”
|
||||
statusLabel: '未上架',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '楚雄散养鸡蛋',
|
||||
monthlySales: 1200,
|
||||
stock: 20000,
|
||||
price: '￥8.0/斤',
|
||||
status: 'onSale',
|
||||
statusLabel: '在售中',
|
||||
},
|
||||
]);
|
||||
|
||||
// 根据当前选择状态过滤商品列表
|
||||
const filteredProducts = computed(() => {
|
||||
return products.value.filter((item) => item.status === activeStatus.value);
|
||||
});
|
||||
|
||||
// 操作处理逻辑
|
||||
const handleInspect = (product) => {
|
||||
console.log('抽查商品:', product);
|
||||
};
|
||||
|
||||
const handleRevoke = (product) => {
|
||||
console.log('取消授权:', product);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.usage-monitor {
|
||||
padding: 20px;
|
||||
|
||||
.mb-24 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.product-content {
|
||||
.product-name {
|
||||
margin: 0 0 12px;
|
||||
font-size: 16px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.sales-info {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.data-item {
|
||||
.label {
|
||||
color: #909399;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.value {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #f56c6c;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.product-actions {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,19 +1,98 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div class="brand-layout">
|
||||
<el-container class="brand-layout-container">
|
||||
<el-aside class="brand-aside-menu">
|
||||
<!-- 菜单部分 -->
|
||||
<el-menu v-model:default-active="activeMenu" class="aside-menu" @select="handleMenuSelect">
|
||||
<el-menu-item index="1">
|
||||
<el-icon><Document /></el-icon>
|
||||
<span>申请</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="2">
|
||||
<el-icon><Lock /></el-icon>
|
||||
<span>授权管理</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="3">
|
||||
<el-icon><Monitor /></el-icon>
|
||||
<span>使用监管</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
<el-main class="brand-main">
|
||||
<component :is="currentComponent" />
|
||||
</el-main>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { Document, Lock, Monitor } from '@element-plus/icons-vue';
|
||||
import { ref, shallowRef } from 'vue';
|
||||
import ApplyManagement from './components/ApplyManagement.vue';
|
||||
import AuthManagement from './components/AuthManagement.vue';
|
||||
import UsageMonitor from './components/UsageMonitor.vue';
|
||||
// 响应式状态
|
||||
const activeMenu = ref('1');
|
||||
const currentComponent = shallowRef(ApplyManagement);
|
||||
|
||||
/* --------------- data --------------- */
|
||||
// #region
|
||||
|
||||
// #endregion
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
// #region
|
||||
|
||||
// #endregion
|
||||
// 菜单切换处理
|
||||
const handleMenuSelect = (index) => {
|
||||
const components = {
|
||||
1: ApplyManagement,
|
||||
2: AuthManagement,
|
||||
3: UsageMonitor,
|
||||
};
|
||||
currentComponent.value = components[index];
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.brand-layout {
|
||||
width: 100%;
|
||||
height: calc(100vh - 230px);
|
||||
|
||||
.brand-layout-container {
|
||||
height: 100%;
|
||||
width: $width-main;
|
||||
margin: auto;
|
||||
.brand-aside-menu {
|
||||
width: 240px;
|
||||
background-color: $color-fff;
|
||||
border-radius: 8px;
|
||||
.aside-menu {
|
||||
border-right: none;
|
||||
.el-menu-item {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
margin: 4px 8px;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
.el-icon {
|
||||
color: #666;
|
||||
margin-right: 12px;
|
||||
font-size: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.brand-main {
|
||||
width: calc(100% - 240px - 16px);
|
||||
margin-left: 16px;
|
||||
// background-color: #f0f0f0;
|
||||
padding: 0;
|
||||
}
|
||||
.brand-main::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user