生产经营主体和农产品溯源调整(未完)
This commit is contained in:
2090205686@qq.com
parent
313705c4c0
commit
1986442641
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
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 417 KiB |
@ -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,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;
|
||||
|
||||
@ -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 it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user