-
-
+
+
@@ -105,16 +145,72 @@ div {
}
.top-content {
width: calc(100% - 400px);
- line-height: 42px;
- text-align: center;
- font-size: 18px;
- font-weight: bold;
- transform: skewX(-8deg);
- background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
- -webkit-background-clip: text;
- color: #fff;
- letter-spacing: 8px;
- text-shadow: -6px 0 0 1px #add8f1;
+ height: 100%;
+ display: inline-flex;
+ justify-content: center;
+ flex-direction: column;
+ .top-content-p {
+ width: 100%;
+ }
+ .title,
+ .b-nav-l,
+ .b-nav-r {
+ display: inline-block;
+ vertical-align: middle;
+ }
+ .b-nav-l,
+ .b-nav-r {
+ width: calc((100% - 300px) / 2);
+ }
+ .b-nav-r {
+ text-align: right;
+ }
+ .title {
+ width: 300px;
+ line-height: 38px;
+ text-align: center;
+ font-size: 18px;
+ font-weight: bold;
+ transform: skewX(-8deg);
+ background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
+ -webkit-background-clip: text;
+ color: #fff;
+ letter-spacing: 8px;
+ text-shadow: -6px 0 0 1px #add8f1;
+ max-height: unset !important;
+ }
+ }
+ .b-nav-l,
+ .b-nav-r {
+ margin: auto;
+ display: inline-flex;
+ gap: 20px;
+ .b-nav-item {
+ display: inline-block;
+ cursor: pointer;
+ min-width: 132px;
+ height: 38px;
+ text-align: center;
+ line-height: 38px;
+ span {
+ font-size: 14px;
+ font-weight: bold;
+ display: inline-flex;
+ transform: skewX(-8deg);
+ background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
+ -webkit-background-clip: text;
+
+ letter-spacing: 4px;
+ text-shadow: -2px 0 0 1px #add8f1;
+ }
+
+ &.nav-act {
+ color: rgba(255, 255, 255, 1);
+ }
+ &.nav-normal {
+ color: rgba(255, 255, 255, 0.6);
+ }
+ }
}
.top-left {
width: 200px;
@@ -163,7 +259,7 @@ div {
}
}
.content {
- height: calc(100% - 138px);
+ height: calc(100% - 60px);
}
}
}
diff --git a/sub-government-screen-service/src/layouts/index.vue b/sub-government-screen-service/src/layouts/index.vue
index 853954d..b59a745 100644
--- a/sub-government-screen-service/src/layouts/index.vue
+++ b/sub-government-screen-service/src/layouts/index.vue
@@ -9,7 +9,7 @@
diff --git a/sub-government-screen-service/src/styles/style.scss b/sub-government-screen-service/src/styles/style.scss
index 5ee6df3..609757d 100644
--- a/sub-government-screen-service/src/styles/style.scss
+++ b/sub-government-screen-service/src/styles/style.scss
@@ -15,3 +15,24 @@
height: auto;
max-height: calc(100vh - 130px);
}
+.txt-ellipsis {
+ display: -webkit-inline-box;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ word-break: break-all;
+ white-space: normal;
+}
+.clamp1 {
+ line-clamp: 1;
+ -webkit-line-clamp: 1;
+ line-height: 1.5;
+ max-height: calc(1.5em * 1);
+}
+
+.clamp2 {
+ line-clamp: 2;
+ -webkit-line-clamp: 2;
+ line-height: 1.5;
+ max-height: calc(1.5em * 2);
+}
diff --git a/sub-government-screen-service/src/views/home/index.vue b/sub-government-screen-service/src/views/home/index.vue
index 91ff902..61ec0ae 100644
--- a/sub-government-screen-service/src/views/home/index.vue
+++ b/sub-government-screen-service/src/views/home/index.vue
@@ -1,7 +1,7 @@
- {{ topTitle }}
+
+
+
+
+
+
+ {{ n.title }}
+
+
+ {{ topTitle }}
+
+
+
+
+ {{ m.title }}
+
+
+
-
-
-
+
+
@@ -59,14 +59,16 @@
-
-
@@ -110,13 +112,23 @@ let rollDataList = reactive([
top: 0;
left: 0;
width: 100%;
- padding-top: 24px;
+ height: 120px;
text-align: center;
+ padding-top: 24px;
.home-index-top {
margin: auto;
+ width: calc(100% - 400px);
+ height: 100%;
background-repeat: no-repeat;
- background-position: center 28px;
+ background-position: center bottom;
background-size: contain;
+ position: relative;
+ .home-data-p {
+ position: absolute;
+ left: 0;
+ top: -12px;
+ width: 100%;
+ }
.home-title {
display: inline-block;
font-size: 18px;
@@ -133,7 +145,7 @@ let rollDataList = reactive([
font-weight: bold;
color: #fff;
letter-spacing: 8px;
- margin: 26px 0 0 0;
+ margin-top: 9px;
}
.home-data-contrast {
.tips {
From d99a2c6af432ffd87a467928a0e25af471837a37 Mon Sep 17 00:00:00 2001
From: 13713575202 <1345916905@qq.com>
Date: Thu, 17 Apr 2025 17:13:45 +0800
Subject: [PATCH 20/21] =?UTF-8?q?echarts=E8=BD=AE=E6=92=AD=E5=8A=A8?=
=?UTF-8?q?=E7=94=BB=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/custom-echart-pie/index.vue | 7 +-
main/src/hooks/useEcharts.js | 96 ++++++++++++++++---
2 files changed, 89 insertions(+), 14 deletions(-)
diff --git a/main/src/components/custom-echart-pie/index.vue b/main/src/components/custom-echart-pie/index.vue
index 95c85da..b00c971 100644
--- a/main/src/components/custom-echart-pie/index.vue
+++ b/main/src/components/custom-echart-pie/index.vue
@@ -33,7 +33,7 @@ export default {
emits: ['click'],
setup(props, { emit }) {
const chartRef = ref(null);
- const { setOptions, getInstance, resize } = useEcharts(chartRef);
+ const { setOptions, getInstance, resize, startAutoPlay } = useEcharts(chartRef);
const option = reactive({
tooltip: {
formatter: '{b} ({c})',
@@ -74,6 +74,11 @@ export default {
}
option.series[0].data = props.chartData;
setOptions(option);
+ startAutoPlay({
+ interval: 2000,
+ seriesIndex: 0,
+ showTooltip: true,
+ });
resize();
getInstance()?.off('click', onClick);
getInstance()?.on('click', onClick);
diff --git a/main/src/hooks/useEcharts.js b/main/src/hooks/useEcharts.js
index 7a78abd..4907ca7 100644
--- a/main/src/hooks/useEcharts.js
+++ b/main/src/hooks/useEcharts.js
@@ -6,6 +6,57 @@ import { useBreakpoint } from './useBreakpoint';
import echarts from '../utils/echarts';
export const useEcharts = (elRef, theme = 'default') => {
+ // 新增轮播相关状态
+ const autoPlayTimer = ref(null);
+ const currentIndex = ref(-1);
+ const dataLength = ref(0);
+
+ // 新增方法 - 启动轮播
+ const startAutoPlay = (options = {}) => {
+ const {
+ interval = 2000, // 轮播间隔(ms)
+ seriesIndex = 0, // 默认操作第一个系列
+ showTooltip = true, // 是否显示提示框
+ } = options;
+
+ stopAutoPlay(); // 先停止已有轮播
+
+ // 获取数据长度
+ const seriesData = unref(getOptions).series?.[seriesIndex]?.data;
+ dataLength.value = seriesData?.length || 0;
+ if (dataLength.value === 0) return;
+
+ autoPlayTimer.value = setInterval(() => {
+ currentIndex.value = (currentIndex.value + 1) % dataLength.value;
+
+ // 执行轮播动作
+ chartInstance?.dispatchAction({
+ type: 'downplay',
+ seriesIndex: seriesIndex,
+ });
+ chartInstance?.dispatchAction({
+ type: 'highlight',
+ seriesIndex: seriesIndex,
+ dataIndex: currentIndex.value,
+ });
+ if (showTooltip) {
+ chartInstance?.dispatchAction({
+ type: 'showTip',
+ seriesIndex: seriesIndex,
+ dataIndex: currentIndex.value,
+ });
+ }
+ }, interval);
+ };
+
+ // 新增方法 - 停止轮播
+ const stopAutoPlay = () => {
+ if (autoPlayTimer.value) {
+ clearInterval(autoPlayTimer.value);
+ autoPlayTimer.value = null;
+ }
+ };
+
const getDarkMode = computed(() => {
return theme === 'default' ? 'dark' : theme;
});
@@ -31,23 +82,39 @@ export const useEcharts = (elRef, theme = 'default') => {
if (!el || !unref(el)) {
return;
}
+ nextTick(() => {
+ if (el.offsetWidth === 0 || el.offsetHeight === 0) {
+ console.warn('图表容器不可见，延迟初始化');
+ useTimeoutFn(() => initCharts(t), 100);
+ return;
+ }
- chartInstance = echarts.init(el, t);
- const { removeEvent } = useEventListener({
- el: window,
- name: 'resize',
- listener: resizeFn,
+ chartInstance = echarts.init(el, t);
+ const { removeEvent } = useEventListener({
+ el: window,
+ name: 'resize',
+ listener: resizeFn,
+ });
+ removeResizeFn = removeEvent;
+ const { widthRef } = useBreakpoint();
+ if (unref(widthRef) <= 768 || el.offsetHeight === 0) {
+ useTimeoutFn(() => {
+ resizeFn();
+ }, 30);
+ }
});
- removeResizeFn = removeEvent;
- const { widthRef } = useBreakpoint();
- if (unref(widthRef) <= 768 || el.offsetHeight === 0) {
- useTimeoutFn(() => {
- resizeFn();
- }, 30);
- }
}
function setOptions(options = {}, clear = true) {
+ const mergedOptions = {
+ animation: true,
+ animationDuration: 3000,
+ animationEasing: 'cubicOut',
+ ...unref(options),
+ animationThreshold: 2000, // 数据量超过2000自动关闭动画
+ animationDelayUpdate: (idx) => idx * 50, // 数据项延迟
+ };
+ cacheOptions.value = mergedOptions;
cacheOptions.value = options;
if (unref(elRef)?.offsetHeight === 0) {
useTimeoutFn(() => {
@@ -98,6 +165,7 @@ export const useEcharts = (elRef, theme = 'default') => {
);
tryOnUnmounted(() => {
+ stopAutoPlay(); // 清理定时器
if (!chartInstance) return;
removeResizeFn();
chartInstance.dispose();
@@ -115,7 +183,9 @@ export const useEcharts = (elRef, theme = 'default') => {
setOptions,
resize,
echarts,
- getInstance,
+ getInstance: () => chartInstance,
registerMap,
+ startAutoPlay, // 暴露轮播方法
+ stopAutoPlay,
};
};
From 9eac2572b6b5322d461174871c9d3f909e12636e Mon Sep 17 00:00:00 2001
From: 13713575202 <1345916905@qq.com>
Date: Fri, 18 Apr 2025 11:54:55 +0800
Subject: [PATCH 21/21] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E6=A0=87=E9=A2=98?=
=?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
sub-government-screen-service/src/components/baseBg.vue | 5 +++--
sub-government-screen-service/src/views/home/index.vue | 8 ++++----
2 files changed, 7 insertions(+), 6 deletions(-)
diff --git a/sub-government-screen-service/src/components/baseBg.vue b/sub-government-screen-service/src/components/baseBg.vue
index 5dcc201..cc41b08 100644
--- a/sub-government-screen-service/src/components/baseBg.vue
+++ b/sub-government-screen-service/src/components/baseBg.vue
@@ -28,7 +28,8 @@
耿马县农产品销售情况
-￥1284.624万
-
- 同比去年
- ￥4684.629
-
-
+
+
耿马县农产品销售情况
+￥1284.624万
+
+ 同比去年
+ ￥4684.629
+
+
+
{{ topTitle }}
+
+ {{ '农业产业政务云平台' }}
-
耿马县农产品销售情况
+￥1284.624万
同比去年
@@ -109,7 +109,7 @@ let rollDataList = reactive([
.data-home-index {
.home-index-top-warp {
position: fixed;
- top: 0;
+ top: 48px;
left: 0;
width: 100%;
height: 120px;
@@ -126,7 +126,7 @@ let rollDataList = reactive([
.home-data-p {
position: absolute;
left: 0;
- top: -12px;
+ top: 13px;
width: 100%;
}
.home-title {
@@ -145,7 +145,7 @@ let rollDataList = reactive([
font-weight: bold;
color: #fff;
letter-spacing: 8px;
- margin-top: 9px;
+ margin-bottom: 10px;
}
.home-data-contrast {
.tips {