Merge branch 'dev' of http://47.109.205.240:3000/Web/daimp-front into dev
This commit is contained in:
commit
beb22c91f9
@ -33,44 +33,50 @@ export default {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否展示高亮圈圈
|
||||
showMarkPoint: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否堆叠展示
|
||||
isHorizontal: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['click'],
|
||||
setup(props, { emit }) {
|
||||
const chartRef = ref(null);
|
||||
const { setOptions, getInstance, startAutoPlay } = useEcharts(chartRef);
|
||||
let option = reactive({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
show: true,
|
||||
backgroundColor: '#333',
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
top: 30,
|
||||
},
|
||||
grid: {
|
||||
top: 60,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [],
|
||||
isHorizontal: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// tooltip: {
|
||||
// trigger: 'axis',
|
||||
// axisPointer: {
|
||||
// type: 'shadow',
|
||||
// label: {
|
||||
// show: true,
|
||||
// backgroundColor: '#333',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// legend: {
|
||||
// top: 30,
|
||||
// },
|
||||
// grid: {
|
||||
// top: 60,
|
||||
// },
|
||||
// xAxis: {
|
||||
// type: 'category',
|
||||
// data: [],
|
||||
// },
|
||||
// yAxis: {
|
||||
// type: 'value',
|
||||
// },
|
||||
// series: [],
|
||||
// isHorizontal: {
|
||||
// type: Boolean,
|
||||
// default: false,
|
||||
// },
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
@ -78,9 +84,10 @@ export default {
|
||||
});
|
||||
|
||||
function initCharts() {
|
||||
if (props.option) {
|
||||
if (props.option && props.option.grid.top == '15%') {
|
||||
Object.assign(option, cloneDeep(props.option));
|
||||
} else {
|
||||
Object.assign(option, cloneDeep(props.option));
|
||||
}
|
||||
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 = [];
|
||||
@ -108,8 +115,10 @@ export default {
|
||||
option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData;
|
||||
if (props.isHorizontal) {
|
||||
option.yAxis.data = xAxisData;
|
||||
} else {
|
||||
option.xAxis.data = [];
|
||||
} else {
|
||||
option.xAxis.data = xAxisData;
|
||||
}
|
||||
}
|
||||
console.log(option);
|
||||
setOptions(option);
|
||||
|
||||
@ -11,8 +11,6 @@
|
||||
|
||||
.custom-tooltip-container{
|
||||
border-radius: 8px !important;
|
||||
padding: 6px 16px 6px 8px !important;
|
||||
background-color: rgba(0,0,0,0.7) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
& span{
|
||||
width: 8px !important;
|
||||
|
||||
@ -57,10 +57,10 @@ const series = types.map((type, idx) => {
|
||||
barGap: '0%', // 强制堆叠布局
|
||||
itemStyle: {
|
||||
color: colors[idx],
|
||||
barBorderRadius: 8,
|
||||
barBorderRadius: 0,
|
||||
shadowColor: colors[idx],
|
||||
// shadowBlur: 8,
|
||||
shadowOffsetY: -16,
|
||||
shadowOffsetY: 0,
|
||||
},
|
||||
label: {
|
||||
// 添加标签配置
|
||||
@ -70,11 +70,18 @@ const series = types.map((type, idx) => {
|
||||
backgroundColor: 'rgba(255,255,255,0.7)', // 白色背景
|
||||
padding: [2, 4],
|
||||
borderRadius: 4,
|
||||
formatter: '{@value}万亩',
|
||||
z: 100,
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '{c}万亩',
|
||||
},
|
||||
},
|
||||
silent: true, // 禁用所有交互效果
|
||||
animation: false, // 禁用动画
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
disabled: true, // 禁用高亮效果
|
||||
},
|
||||
z: 100 - idx,
|
||||
data: towns.map((town) => {
|
||||
@ -91,8 +98,10 @@ const state = reactive({
|
||||
legend: {
|
||||
data: types,
|
||||
textStyle: {
|
||||
color: '#ccc',
|
||||
color: '#fff',
|
||||
},
|
||||
selectedMode: false, // 禁用图例切换功能
|
||||
inactiveColor: '#fff', // 设置非激活状态颜色（保持原色）
|
||||
},
|
||||
grid: {
|
||||
top: '15%',
|
||||
@ -123,7 +132,7 @@ const state = reactive({
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.6);',
|
||||
backgroundColor: 'rgba(0,0,0,0);',
|
||||
borderColor: '#35d0c0',
|
||||
borderRadius: 8,
|
||||
formatter: (params) => `
|
||||
|
||||
@ -16,6 +16,15 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
let values = reactive([]);
|
||||
const getValue = (dataList) => {
|
||||
let arr = [];
|
||||
for (let i = 0; i < dataList.length; i++) {
|
||||
arr.push(dataList[i].value);
|
||||
}
|
||||
return arr;
|
||||
};
|
||||
|
||||
const state = reactive({
|
||||
data: [],
|
||||
option: {
|
||||
@ -45,10 +54,10 @@ const state = reactive({
|
||||
extraCssText: 'backdrop-filter: blur(8px);',
|
||||
},
|
||||
barStyle: {
|
||||
barWidth: 10,
|
||||
barWidth: 14,
|
||||
itemStyle: {
|
||||
borderWidth: 10,
|
||||
borderRadius: [8, 8, 8, 8], // 设置柱子的圆角半径
|
||||
borderWidth: 14,
|
||||
borderRadius: [10, 10, 10, 10], // 设置柱子的圆角半径
|
||||
},
|
||||
color: {
|
||||
type: 'linear',
|
||||
@ -86,7 +95,8 @@ const state = reactive({
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'],
|
||||
axisTick: {
|
||||
@ -99,12 +109,86 @@ const state = reactive({
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
// 右侧数量
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
offset: 10,
|
||||
axisTick: 'none',
|
||||
axisLine: 'none',
|
||||
show: true,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: '16',
|
||||
},
|
||||
formatter: function (value) {
|
||||
let str = '{title|' + value + '吨}';
|
||||
return str;
|
||||
},
|
||||
rich: {
|
||||
title: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [12000, 8000, 6000, 4000, 3500],
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '值',
|
||||
type: 'bar',
|
||||
// barWidth: '40%', // 设置柱的宽度
|
||||
// barMinHeight: 2, // 设置柱的最小高度
|
||||
// barGap: '20%', // 设置柱之间的间隙
|
||||
zlevel: 1,
|
||||
barBorderRadius: 10,
|
||||
itemStyle: {
|
||||
borderRadius: [10, 10, 10, 10],
|
||||
color: 'rgba(100, 200, 255, 0.3)',
|
||||
},
|
||||
backgroundStyle: {
|
||||
color: 'rgba(100, 200, 255, 0.3)',
|
||||
borderRadius: [10, 10, 10, 10], // 必须与barBorderRadius保持一致
|
||||
},
|
||||
barWidth: 20,
|
||||
data: values,
|
||||
label: {
|
||||
position: [0, -16],
|
||||
align: 'left',
|
||||
show: true,
|
||||
formatter: (params) => {
|
||||
return params.name;
|
||||
},
|
||||
},
|
||||
barMaxWidth: 40,
|
||||
markLine: {
|
||||
label: {
|
||||
color: '#26a69a',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '背景',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
barGap: '-100%',
|
||||
data: [],
|
||||
barBorderRadius: 30,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(105,131,242,.3)',
|
||||
borderRadius: 10,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
barMaxWidth: 40,
|
||||
markLine: {
|
||||
label: {
|
||||
color: '#26a69a',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -148,6 +232,7 @@ const loadData = (val) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
values = getValue(state.data);
|
||||
console.log(val);
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -33,26 +33,27 @@ const props = defineProps({
|
||||
.basic {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
height: 100%;
|
||||
height: 95%;
|
||||
border: 2px solid #01fefd;
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(2px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
color: #ffffff;
|
||||
padding: 20px;
|
||||
.line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: left;
|
||||
line-height: 20px;
|
||||
line-height: 50px;
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
width: 40%;
|
||||
color: #ddd;
|
||||
}
|
||||
.values {
|
||||
font-size: 20px;
|
||||
font-size: 16px;
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,6 +23,7 @@ const state = reactive({
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<el-dropdown trigger="hover" placement="right-start" :show-timeout="100" @visible-change="(val) => (isDropdownOpen = val)">
|
||||
<span class="el-dropdown-link el-menu-item" @mouseenter.prevent>
|
||||
<layout-icon :size="20" :icon="item.meta?.icon" />
|
||||
<span>{{ item.meta?.title + '1' }}</span>
|
||||
<span>{{ item.meta?.title }}</span>
|
||||
<el-icon class="arrow-icon" v-if="item.children?.length">
|
||||
<component :is="isDropdownOpen ? 'arrow-left' : 'arrow-right'" />
|
||||
</el-icon>
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/logo.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="referrer" content="no-referrer" />
|
||||
<title>运营服务</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<div class="c-goods-item-warp" @click="toDetail">
|
||||
<div class="c-goods-item-warp" @click="toDetail(data.id)">
|
||||
<div class="goods-img">
|
||||
<el-image :src="getAssetsFile('images/ecommerce/' + 'pic.png')?.href ?? ''" fit="cover" />
|
||||
<img :src="data.goodUrl ? data.goodUrl : ''" alt="" style="width: 100%" />
|
||||
<!-- <el-image :src="encodeURIComponent(data.goodUrl) ? encodeURIComponent(data.goodUrl) : ''" fit="cover" @error="handleImageError" />-->
|
||||
</div>
|
||||
<div class="goods-name txt-ellipsis clamp2">{{ '遇合堂新款禽泰克家禽通用药250遇合堂新款禽泰克家禽通用药250' }}</div>
|
||||
<div class="goods-name txt-ellipsis clamp2">{{ data.title }}</div>
|
||||
<div class="goods-do">
|
||||
<div class="price txt-ellipsis clamp">25.00</div>
|
||||
<div class="price txt-ellipsis clamp">{{ data.goodPrice }}</div>
|
||||
<div class="do">
|
||||
<div class="iconfont icon-cart"></div>
|
||||
</div>
|
||||
@ -13,13 +14,25 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { encodeURL } from 'js-base64';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const toDetail = () => {
|
||||
let id = '01';
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const handleImageError = (e) => {
|
||||
console.error('图片加载失败:', e);
|
||||
};
|
||||
|
||||
const toDetail = (id) => {
|
||||
router.push('/sub-operation-service/ecommerce-agriculturalDetail?id=' + id);
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -3,15 +3,25 @@
|
||||
<common current-name="agricultural">
|
||||
<template #main>
|
||||
<banner :imglist="bannerList"></banner>
|
||||
<filtertop :list="treeList"></filtertop>
|
||||
<filtertop :list="treeList" @select="selected"></filtertop>
|
||||
<div class="goods-list-warp">
|
||||
<div class="goods-list">
|
||||
<template v-for="(n, index) in 10" :key="n.id">
|
||||
<template v-for="(n, index) in list" :key="n.id">
|
||||
<div class="goods-item">
|
||||
<goodsItem></goodsItem>
|
||||
<goodsItem :data="n"></goodsItem>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<el-pagination
|
||||
:current-page="pagination.current"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pagination.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="pagination.total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
@ -81,15 +91,49 @@ let params = reactive({
|
||||
parentId: null,
|
||||
childrenId: null,
|
||||
});
|
||||
let pagination = reactive({
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
});
|
||||
const handleSizeChange = (val) => {
|
||||
pagination.size = val;
|
||||
getList();
|
||||
};
|
||||
const handleCurrentChange = (val) => {
|
||||
pagination.current = val;
|
||||
getList();
|
||||
};
|
||||
const getList = () => {
|
||||
params.current = pagination.current;
|
||||
params.size = pagination.size;
|
||||
agriculturalList(params).then((res) => {
|
||||
if (res.code === 200) {
|
||||
console.log('res', res);
|
||||
list.splice(0, list.length, ...res.data.records);
|
||||
pagination.total = res.data.total;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner1.png']);
|
||||
|
||||
const selected = (data) => {
|
||||
// 获取所有值并转为数组
|
||||
const val = Object.values(data);
|
||||
console.log(data);
|
||||
if (val.length === 1) {
|
||||
params.parentId = val[0].id;
|
||||
} else {
|
||||
if (val[0].id === '') {
|
||||
params.childrenId = '';
|
||||
params.parentId = null;
|
||||
} else {
|
||||
params.childrenId = val[val.length - 1].id;
|
||||
params.parentId = val[val.length - 1].parentId;
|
||||
}
|
||||
}
|
||||
getList();
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.goods-list-warp {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user