diff --git a/src/api/gis/index.ts b/src/api/gis/index.ts index b77fafa..f14d3e1 100644 --- a/src/api/gis/index.ts +++ b/src/api/gis/index.ts @@ -1,6 +1,6 @@ import request from '@/utils/request'; import { AxiosPromise } from 'axios'; -import { QualityVO, Query, ConstructionUserVO, MachineryrVO, MaterialsVO } from './type'; +import { QualityVO, Query, ConstructionUserVO, MachineryrVO, MaterialsVO, projectNewsVO, safetyInspectionVO, projectNewsDetailVO } from './type'; /** * 查询大屏质量信息 * @param query @@ -15,6 +15,47 @@ export const getQualityList = (query?: Query): AxiosPromise => { }); }; +/** + * 查询大屏项目新闻列表 + * @param query + * @returns {*} + */ + +export const getprojectNewsList = (query?: Query): AxiosPromise => { + return request({ + url: '/project/projectNews/list/gis', + method: 'get', + params: query + }); +}; + +/** + * 获取项目新闻详细信息 + * @param query + * @returns {*} + */ + +export const getprojectNewsDetailList = (id: number): AxiosPromise => { + return request({ + url: '/project/projectNews/' + id, + method: 'get' + }); +}; + +/** + * 查询大屏安全信息 + * @param query + * @returns {*} + */ + +export const getsafetyInspectionList = (query?: Query): AxiosPromise => { + return request({ + url: '/safety/safetyInspection/gis', + method: 'get', + params: query + }); +}; + /** * 查询施工人员大屏数据 * @param query diff --git a/src/api/gis/type.ts b/src/api/gis/type.ts index 8b91c63..8da562f 100644 --- a/src/api/gis/type.ts +++ b/src/api/gis/type.ts @@ -41,3 +41,35 @@ export interface MaterialsVO { outCount: string; value: number; } + +export interface projectNewsVO { + id: string; + title: string; + + show?: boolean; +} + +export interface projectNewsDetailVO { + id: string; + title: string; + content: string; + file: string; +} + +export interface safetyInspectionVO { + //站班会总数 + teamMeetingCount: string; + //安全巡检总数 + safetyInspectionCount: string; + //整改情况 + correctSituationCount: string; + //站班会列表 + teamMeetingList: safetyInspectionlist[]; +} + +export interface safetyInspectionlist { + id: string; + teamName: string; + name: string; + meetingDate: string; +} diff --git a/src/assets/images/bg-shaow.png b/src/assets/images/bg-shaow.png new file mode 100644 index 0000000..ee09c8d Binary files /dev/null and b/src/assets/images/bg-shaow.png differ diff --git a/src/plugins/scrollEcharts.ts b/src/plugins/scrollEcharts.ts new file mode 100644 index 0000000..05ebb64 --- /dev/null +++ b/src/plugins/scrollEcharts.ts @@ -0,0 +1,75 @@ +import * as echarts from 'echarts'; + +/** + * 为 ECharts 实例添加自动滚动功能（精确固定窗口项数 + 用户操作暂停） + * @param chartInstance ECharts 实例 + * @param totalItems x轴总项数 + * @param windowSize 显示窗口项数，默认 6 + * @param interval 滚动间隔，默认 1500ms + * @returns 停止函数 + */ +export function enableEchartsAutoScroll( + chartInstance: echarts.ECharts, + totalItems: number, + windowSize: number = 6, + interval: number = 1500 +): () => void { + let index = 0; + let isUserInteracting = false; + let lastInteractionTime = Date.now(); + let currentWindowSize = windowSize; + + // 主动初始化窗口大小（如果设置了 dataZoom） + const option = chartInstance.getOption(); + const zoom = option?.dataZoom?.[0]; + if (zoom && zoom.start != null && zoom.end != null) { + const startIndex = Math.round((zoom.start / 100) * totalItems); + const endIndex = Math.round((zoom.end / 100) * totalItems); + currentWindowSize = endIndex - startIndex; + } + + // 监听用户操作 + const dataZoomHandler = (params: any) => { + const zoom = params.batch ? params.batch[0] : params; + const startIndex = Math.round((zoom.start / 100) * totalItems); + const endIndex = Math.round((zoom.end / 100) * totalItems); + currentWindowSize = endIndex - startIndex; + + isUserInteracting = true; + lastInteractionTime = Date.now(); + }; + + chartInstance.on('dataZoom', dataZoomHandler); + + // 自动滚动定时器 + const timer = setInterval(() => { + const now = Date.now(); + if (isUserInteracting && now - lastInteractionTime < 1000) return; + + isUserInteracting = false; + + if (index + currentWindowSize > totalItems) { + index = 0; + } + + const startPercent = (index / totalItems) * 100; + const endPercent = ((index + currentWindowSize) / totalItems) * 100; + + chartInstance.setOption({ + dataZoom: [ + { + start: startPercent, + end: endPercent + } + ] + }); + + index++; + }, interval); + + // 返回停止方法 + return () => { + clearInterval(timer); + chartInstance.off('dataZoom', dataZoomHandler); + }; +} diff --git a/src/views/gisHome/component/autoScroller.vue b/src/views/gisHome/component/autoScroller.vue index d094745..671bd35 100644 --- a/src/views/gisHome/component/autoScroller.vue +++ b/src/views/gisHome/component/autoScroller.vue @@ -1,62 +1,55 @@ - diff --git a/src/views/gisHome/component/carousel.vue b/src/views/gisHome/component/carousel.vue index 3142729..2cc1203 100644 --- a/src/views/gisHome/component/carousel.vue +++ b/src/views/gisHome/component/carousel.vue @@ -47,6 +47,7 @@ console.log(window.innerWidth); bottom: vh(31); left: vw(507); padding-top: vh(10); + z-index: 2; } .carousellist { diff --git a/src/views/gisHome/component/leftMain.vue b/src/views/gisHome/component/leftMain.vue index 4c0c8e3..77402b9 100644 --- a/src/views/gisHome/component/leftMain.vue +++ b/src/views/gisHome/component/leftMain.vue @@ -22,8 +22,7 @@

总人数

- {{ constructionUserData?.peopleCount }}人 + {{ constructionUserData?.peopleCount + ' ' }} 人
@@ -32,8 +31,7 @@

出勤人

- {{ constructionUserData?.attendanceCount }}人 + {{ constructionUserData?.attendanceCount + ' ' }} 人
@@ -42,8 +40,7 @@

出勤率

- {{ constructionUserData?.attendanceRate }}% + {{ constructionUserData?.attendanceRate + ' ' }} %
@@ -88,6 +85,7 @@ import { getConstructionUserList, getMachineryrList, getMaterialsList } from '@/ import { ConstructionUserVO, MachineryrVO, MaterialsVO } from '@/api/gis/type'; import * as echarts from 'echarts'; import { useUserStoreHook } from '@/store/modules/user'; +import { enableEchartsAutoScroll } from '@/plugins/scrollEcharts'; const userStore = useUserStoreHook(); //echarts节点 const myMachineryChart = ref(null); @@ -97,6 +95,8 @@ type EChartsOption = echarts.EChartsOption; const constructionUserData = ref(null); const machineryOption = ref([]); //机械 const orderOption = ref([]); //材料 +const stopMachineryScroll = ref(null); +const stopOrderScroll = ref(null); const machineryDataAxis = computed(() => machineryOption.value.map((item) => item.machineryName)); //x轴数据 const machineryData = computed(() => machineryOption.value.map((item) => item.machineryCount)); //柱状图数据 const orderDataAxis = computed(() => orderOption.value.map((item) => item.materialsName)); //材料x轴数据 @@ -148,7 +148,10 @@ const initMachinerycharts = () => { data: machineryDataAxis.value, axisLabel: { // inside: true, - color: 'rgba(202, 218, 226, 1)' + color: 'rgba(202, 218, 226, 1)', + + fontSize: 10, + interval: 0 }, axisTick: { show: false @@ -167,11 +170,11 @@ const initMachinerycharts = () => { show: false }, axisLabel: { - color: '#999' + color: '#999', + fontSize: 12 }, - min: 0, - max: 40, - interval: 10, + interval: 1, + splitNumber: 5, splitLine: { show: true, lineStyle: { @@ -256,6 +259,7 @@ const initMachinerycharts = () => { }; option && myMachineryChart.value.setOption(option); + stopMachineryScroll.value = enableEchartsAutoScroll(myMachineryChart.value, machineryDataAxis.value.length, 6, 2000); }; const initOrderChart = () => { @@ -500,6 +504,7 @@ const initOrderChart = () => { ] }; option && myOrderChart.value.setOption(option); + stopOrderScroll.value = enableEchartsAutoScroll(myOrderChart.value, orderDataAxis.value.length, 5, 2000); }; // 防抖函数 @@ -528,6 +533,12 @@ onMounted(() => { getMachineryData(); window.addEventListener('resize', debouncedHandleResize); //监听窗口变化重新生成echarts }); + +onUnmounted(() => { + window.removeEventListener('resize', debouncedHandleResize); + stopMachineryScroll.value(); + stopOrderScroll.value(); +}); diff --git a/src/views/gisHome/component/rightMain.vue b/src/views/gisHome/component/rightMain.vue index 59cdac9..21b88f9 100644 --- a/src/views/gisHome/component/rightMain.vue +++ b/src/views/gisHome/component/rightMain.vue @@ -17,22 +17,16 @@
-
    - -
- -