diff --git a/main/.env.pre b/main/.env.pre new file mode 100644 index 0000000..896c31f --- /dev/null +++ b/main/.env.pre @@ -0,0 +1,13 @@ +# 本地环境 +VITE_APP_NAME = 'daimp-front-main' +VITE_APP_TITLE = '数字农业产业管理平台' +VITE_APP_SUB_OS = '//localhost:8090/sub-operation-service/' +VITE_APP_SUB_OA = '//localhost:8090/sub-operation-admin/' +VITE_APP_SUB_GAS = '//localhost:8090/sub-government-affairs-service/' +VITE_APP_SUB_GAA = '//localhost:8090/sub-government-admin/' +VITE_APP_SUB_GSS = '//localhost:8090/sub-government-screen-service/' +# 接口 +VITE_APP_BASE_API = '/apis' +VITE_APP_BASE_URL = '' +VITE_APP_UPLOAD_API = '/uploadApis' +VITE_APP_UPLOAD_URL = '' \ No newline at end of file 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, }; }; diff --git a/sub-government-affairs-service/.env.pre b/sub-government-affairs-service/.env.pre new file mode 100644 index 0000000..47b0026 --- /dev/null +++ b/sub-government-affairs-service/.env.pre @@ -0,0 +1,9 @@ +# 本地环境 +VITE_APP_MIAN = 'daimp-front-main' +VITE_APP_MIAN_URL = 'http://localhost:8090' +VITE_APP_NAME = 'sub-government-affairs-service' +# 接口 +VITE_APP_BASE_API = '/apis' +VITE_APP_BASE_URL = '' +VITE_APP_UPLOAD_API = '/uploadApis' +VITE_APP_UPLOAD_URL = '' diff --git a/sub-government-affairs-service/.gitignore b/sub-government-affairs-service/.gitignore index bdeba94..c199e5e 100644 --- a/sub-government-affairs-service/.gitignore +++ b/sub-government-affairs-service/.gitignore @@ -69,7 +69,7 @@ web_modules/ .yarn-integrity # dotenv environment variables file -.env +# .env # parcel-bundler cache (https://parceljs.org/) .cache diff --git a/sub-government-affairs-service/package.json b/sub-government-affairs-service/package.json index aa481ec..2fa4fe3 100644 --- a/sub-government-affairs-service/package.json +++ b/sub-government-affairs-service/package.json @@ -7,7 +7,7 @@ "dev": "vite --mode development", "build": "vite build --mode production", "test": "vite build --mode test", - "local": "vite build --mode local", + "pre": "vite build --mode pre", "preview": "vite preview", "format": "prettier --write 'src/**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}'", "eslint": "npx eslint --init", diff --git a/sub-government-screen-service/.env.pre b/sub-government-screen-service/.env.pre new file mode 100644 index 0000000..c159260 --- /dev/null +++ b/sub-government-screen-service/.env.pre @@ -0,0 +1,9 @@ +# 本地环境 +VITE_APP_MIAN = 'daimp-front-main' +VITE_APP_MIAN_URL = 'http://localhost:8090' +VITE_APP_NAME = 'sub-government-screen-service' +# 接口 +VITE_APP_BASE_API = '/apis' +VITE_APP_BASE_URL = '' +VITE_APP_UPLOAD_API = '/uploadApis' +VITE_APP_UPLOAD_URL = '' diff --git a/sub-government-screen-service/.gitignore b/sub-government-screen-service/.gitignore index bdeba94..c199e5e 100644 --- a/sub-government-screen-service/.gitignore +++ b/sub-government-screen-service/.gitignore @@ -69,7 +69,7 @@ web_modules/ .yarn-integrity # dotenv environment variables file -.env +# .env # parcel-bundler cache (https://parceljs.org/) .cache diff --git a/sub-government-screen-service/components.d.ts b/sub-government-screen-service/components.d.ts index ce9cfc8..ea50d1a 100644 --- a/sub-government-screen-service/components.d.ts +++ b/sub-government-screen-service/components.d.ts @@ -8,8 +8,10 @@ export {} declare module 'vue' { export interface GlobalComponents { BaseBg: typeof import('./src/components/baseBg.vue')['default'] + 'BaseBg copy': typeof import('./src/components/baseBg copy.vue')['default'] CenterMap: typeof import('./src/components/centerMap.vue')['default'] CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default'] + copy: typeof import('./src/components/baseBg copy.vue')['default'] CurrentTime: typeof import('./src/components/currentTime.vue')['default'] CustomBack: typeof import('./src/components/customBack.vue')['default'] CustomProgress: typeof import('./src/components/customProgress.vue')['default'] diff --git a/sub-government-screen-service/package.json b/sub-government-screen-service/package.json index 0b9a15c..476dc80 100644 --- a/sub-government-screen-service/package.json +++ b/sub-government-screen-service/package.json @@ -7,7 +7,7 @@ "dev": "vite --mode development", "build": "vite build --mode production", "test": "vite build --mode test", - "local": "vite build --mode local", + "pre": "vite build --mode pre", "preview": "vite preview", "format": "prettier --write 'src/**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}'", "eslint": "npx eslint --init", diff --git a/sub-government-screen-service/src/components/baseBg copy.vue b/sub-government-screen-service/src/components/baseBg copy.vue new file mode 100644 index 0000000..ea58702 --- /dev/null +++ b/sub-government-screen-service/src/components/baseBg copy.vue @@ -0,0 +1,170 @@ + + + diff --git a/sub-government-screen-service/src/components/baseBg.vue b/sub-government-screen-service/src/components/baseBg.vue index afb1d04..cc41b08 100644 --- a/sub-government-screen-service/src/components/baseBg.vue +++ b/sub-government-screen-service/src/components/baseBg.vue @@ -4,10 +4,51 @@
-
+ +
- {{ topTitle }} +
+
+ +
+ + +
{{ '农业产业政务云平台' }}
+
+ +
+
@@ -105,16 +146,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: 22px; + 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; @@ -127,7 +224,7 @@ div { } } .bottom { - height: 98px; + height: 80px; text-align: center; .b-nav { @@ -163,7 +260,7 @@ div { } } .content { - height: calc(100% - 156px); + height: calc(100% - 60px); } } } diff --git a/sub-government-screen-service/src/layouts/component/Bottom/index.vue b/sub-government-screen-service/src/layouts/component/Bottom/index.vue index 17f2904..3e3f118 100644 --- a/sub-government-screen-service/src/layouts/component/Bottom/index.vue +++ b/sub-government-screen-service/src/layouts/component/Bottom/index.vue @@ -71,9 +71,11 @@ const itemAct = (name) => { bottom: 0; z-index: 100; .bottom { - height: 98px; + height: 80px; text-align: center; - + display: inline-flex; + justify-content: center; + flex-direction: column; .b-nav { margin: auto; display: inline-flex; 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/components/inputs.vue b/sub-government-screen-service/src/views/home/components/inputs.vue index 64c862f..ff27ae6 100644 --- a/sub-government-screen-service/src/views/home/components/inputs.vue +++ b/sub-government-screen-service/src/views/home/components/inputs.vue @@ -50,12 +50,12 @@ let topTitle = ref(''); let pos = ref(''); const datalist = reactive([ - { label: '农机使用(台)', value: 8000, icon: 'farmuse.png' }, + { label: '种子使用(吨)', value: 4800, icon: 'provenance.png' }, { label: '农药使用(吨)', value: 5000, icon: 'pesticide.png' }, - { label: '肥料使用(吨)', value: 9000, icon: 'fertilizer.png' }, - { label: '种源使用', value: 4800, icon: 'provenance.png' }, - { label: '兽药(吨)', value: 10, icon: 'animalm.png' }, + { label: '化肥使用(吨)', value: 9000, icon: 'fertilizer.png' }, { label: '饲料(吨)', value: 88943, icon: 'feeduse.png' }, + { label: '兽药(吨)', value: 10, icon: 'animalm.png' }, + { label: '农机使用(台)', value: 8000, icon: 'farmuse.png' }, ]); onMounted(() => { diff --git a/sub-government-screen-service/src/views/home/index.vue b/sub-government-screen-service/src/views/home/index.vue index 91ff902..3cd8fa7 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 @@