fix: 搬迁另外仓库的BI大屏代码

spring

6 小时以前 b28b2926a1f8c5ceb5b2ce5e1324371c0edc4fe9

fix: 搬迁另外仓库的BI大屏代码

 src/api/viewIndex.js

@@ -59,3 +59,21 @@
        method: 'get'
    })
}

// 各生产订单的完成进度统计
// /home/progressStatistics
export const getProgressStatistics = ()=>{
    return request({
        url: '/home/progressStatistics',
        method: 'get'
    })
}

//在制品周转情况
//home/workInProcessTurnover
export const getWorkInProcessTurnover= ()=>{
    return request({
        url: '/home/workInProcessTurnover',
        method: 'get'
    })
}

 src/views/reportAnalysis/dataDashboard/index.vue

@@ -1,5 +1,6 @@
<template>
    <div class="data-dashboard">
        <div class="scale-container">
            <div class="data-dashboard" :style="{ transform: `scale(${scaleRatio})` }">
      <!-- 全屏按钮 - 移动到左上角 -->
      <button class="fullscreen-btn" @click="toggleFullscreen" :title="isFullscreen ? '退出全屏' : '全屏显示'">
        <svg v-if="!isFullscreen" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -174,13 +175,13 @@
        </div>
                
                <div class="financial-header">
                    <span class="financial-title">近4月财务分析</span>
                    <span class="financial-title">各生产订单的完成进度统计</span>
                </div>
                <div class="main-panel">
                    <div class="panel-item-customers">
                        <div class="event-header">
                            <img src="@/assets/BI/shijianmingxiicon@2x.png" alt="图标" class="event-icon" />
                            <span class="event-title">经营成果分析</span>
                            <span class="event-title">经营分析</span>
                        </div>
                        <Echarts ref="chart"
                                         :chartStyle="chartStyle"
@@ -191,7 +192,7 @@
                                         :xAxis="xAxis3"
                                         :yAxis="yAxis3"
                                         :options="{backgroundColor: 'transparent', textStyle: {color: '#B8C8E0'}}"
                                         style="height: 300px"></Echarts>
                                         style="height: 170px"></Echarts>
                    </div>
                </div>
      </div>
@@ -234,12 +235,13 @@
                </div>
      </div>
      </div>
      </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'
import autofit from 'autofit.js'
import Echarts from "@/components/Echarts/echarts.vue";
import useUserStore from '@/store/modules/user'
@@ -247,7 +249,9 @@
    analysisCustomerContractAmounts, getAmountHalfYear,
    homeTodos,
    qualityStatistics,
    statisticsReceivablePayable
    statisticsReceivablePayable,
    getProgressStatistics,
      getWorkInProcessTurnover
} from "@/api/viewIndex.js";
import {staffOnJobListPage} from "@/api/personnelManagement/employeeRecord.js";
import {listCustomer} from "@/api/basicData/customerFile.js";
@@ -260,6 +264,12 @@

// 全屏相关状态
const isFullscreen = ref(false);

// 缩放比例
const scaleRatio = ref(1)
// 设计尺寸（基准尺寸）- 根据实际设计稿调整
const designWidth = 1920
const designHeight = 1080

// 用户store
const userStore = useUserStore()
@@ -415,75 +425,52 @@
    data: ['原材料合格数', '过程合格数', '出不合格数']
}
const barLegend1 = {
    show: true,
    show: false,
    textStyle: { color: '#B8C8E0' },
    data: ['总收入', '总支出', '净收入']
    data: []
}
const barSeries11 = ref([
    {
        name: '总收入',
        name: '生产订单统计',
        type: 'bar',
        barGap: 0,
        emphasis: {
            focus: 'series'
        },
        itemStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    { offset: 1, color: '#00A4ED' },
                    { offset: 0, color: '#4EE4FF' }
            // 使用函数根据数据索引返回不同颜色
            color: function(params) {
                const colorStops = [
                    [
                        { offset: 1, color: '#00A4ED' },
                        { offset: 0, color: '#4EE4FF' }
                    ],
                    [
                        { offset: 1, color: '#3378FF' },
                        { offset: 0, color: '#4E8AFF' }
                    ],
                    [
                        { offset: 1, color: '#FF6B6B' },
                        { offset: 0, color: '#FF8E8E' }
                    ],
                    [
                        { offset: 1, color: '#537EF5' },
                        { offset: 0, color: '#9061F8' }
                    ]
                ]
                const stops = colorStops[params.dataIndex] || colorStops[0]
                return {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: stops
                }
            }
        },
        data: []
    },
    {
        name: '总支出',
        type: 'bar',
        emphasis: {
            focus: 'series'
        },
        itemStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    { offset: 1, color: '#3378FF' },
                    { offset: 0, color: '#4E8AFF' }
                ]
            }
        },
        data: []
    },
    {
        name: '净收入',
        type: 'bar',
        emphasis: {
            focus: 'series'
        },
        itemStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    { offset: 1, color: '#537EF5' },
                    { offset: 0, color: '#9061F8' }
                ]
            }
        },
        data: []
    },
    }
])
const barSeries1 = ref([
    {
@@ -595,13 +582,35 @@
// 待办事项
const todoList = ref([])

// 窗口大小变化处理
const handleResize = () => {
// 计算缩放比例
const calculateScale = () => {
  const container = document.querySelector('.scale-container')
  if (!container) return
  
  // 获取容器的实际尺寸
    const rect = container.getBoundingClientRect?.()
    const containerWidth = container.clientWidth || rect?.width || window.innerWidth
    const containerHeight = container.clientHeight || rect?.height || window.innerHeight
  
  // 计算宽高缩放比例，取较小值以保证内容完整显示（等比缩放）
  const scaleX = containerWidth / designWidth
  const scaleY = containerHeight / designHeight
  scaleRatio.value = Math.min(scaleX, scaleY)
  
  // 触发图表resize
  charts.value.forEach(chart => {
    if (chart && chart.resize) {
      chart.resize()
    }
  })
}

// 窗口大小变化处理
const handleResize = () => {
  // 延迟执行，确保DOM更新完成
  setTimeout(() => {
    calculateScale()
  }, 100)
}

// 销毁图表实例
@@ -640,15 +649,45 @@
        qualityStatisticsObject.value.factoryNum = res.data.factoryNum
    })
}
// 财务统计
const accountStatisticsInfo = () => {
    listPageAnalysis().then((res) => {
        xAxis3.value[0].data = res.data.days
        barSeries11.value[0].data = res.data.totalIncome
        barSeries11.value[1].data = res.data.totalExpense
        barSeries11.value[2].data = res.data.netIncome
// 各生产订单的完成进度统计
const progressStatisticsInfo = () => {
    getProgressStatistics().then((res) => {
        console.log("生产订单完成进度统计数据:", res)
		
        if (!res || !res.data) {
            console.warn('生产订单完成进度统计数据为空')
            return
        }
		
        // 设置X轴数据 - 使用分类名称
        xAxis3.value[0].data = ['已完成进度数', '总订单数', '未完成订单数', '已完成订单数']
		
        // 设置单个系列的数据 - 每个X轴分类对应一个值
        if (barSeries11.value && barSeries11.value.length > 0) {
            barSeries11.value[0].data = [
                res.data.completedProgressCount || 0,
                res.data.totalOrderCount || 0,
                res.data.uncompletedOrderCount || 0,
                res.data.completedOrderCount || 0
            ]
        }
		
        console.log('图表数据设置完成:', {
            xAxis: xAxis3.value[0].data,
            series: barSeries11.value[0]?.data
        })
		
    }).catch((error) => {
        console.error('获取生产订单完成进度统计失败:', error)
    })
}
// 财务统计
// const accountStatisticsInfo = () => {
//     listPageAnalysis().then((res) => {
//         xAxis3.value[0].data = res.data.days
//         barSeries11.value[0].data = res.data.totalIncome
//     })
// }
const getNum = () => {
    const params = {
        pageNum: -1,
@@ -881,9 +920,9 @@
  updateTime()
  timer.value = setInterval(updateTime, 1000)
}
// 全屏功能实现 - 针对data-dashboard元素
// 全屏功能实现 - 针对scale-container元素
const toggleFullscreen = () => {
    const element = document.querySelector('.data-dashboard')
    const element = document.querySelector('.scale-container')
    
    if (!element) return
    
@@ -911,7 +950,12 @@
  const fullscreenElement = document.fullscreenElement || 
                           document.webkitFullscreenElement || 
                           document.msFullscreenElement
  isFullscreen.value = fullscreenElement && fullscreenElement.classList.contains('data-dashboard')
  isFullscreen.value = fullscreenElement && fullscreenElement.classList.contains('scale-container')
  
  // 全屏状态变化时，延迟重新计算缩放比例（确保DOM更新完成）
  setTimeout(() => {
    calculateScale()
  }, 200)
}

// 生命周期钩子
@@ -919,8 +963,11 @@
  initTime()
  // 使用nextTick确保DOM完全渲染后再初始化图表
  nextTick(() => {
    // 初始化autofit自适应
    autofit.init({ dh: 800, dw: 1280, el: '.data-dashboard', resize: true }, false)
    // 计算初始缩放比例
    calculateScale()
    
    // 初始化autofit自适应（如果需要保留autofit，可以保留，但主要缩放由scale-container控制）
    // autofit.init({ dh: 800, dw: 1280, el: '.data-dashboard', resize: true }, false)
    
    // 添加自动滚动动画效果 - 客户信息列表
    const contractList = refContractList.value
@@ -980,9 +1027,13 @@
  })
  
  window.addEventListener('resize', handleResize)
  window.addEventListener('fullscreenchange', handleFullscreenChange)
  window.addEventListener('webkitfullscreenchange', handleFullscreenChange)
  window.addEventListener('MSFullscreenChange', handleFullscreenChange)
  analysisCustomer()
  qualityStatisticsInfo()
    accountStatisticsInfo()
    // accountStatisticsInfo()
    progressStatisticsInfo()
  getNum()
  getLedgerNum()
  todoInfoS()
@@ -1045,43 +1096,58 @@
</script>

<style scoped>
/* 外部缩放容器 - 占据整个视口 */
.scale-container {
  position: relative;
    width: 100%;
    /* 页面在常规布局下（有顶栏）默认减去 84px，避免内容被裁切 */
    height: calc(100vh - 84px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
    overflow: hidden;
}

/* 内部内容区域 - 固定设计尺寸 */
.data-dashboard {
  position: relative;
  width: 100%;
    height: 100%;
  width: 1920px;
  height: 1080px;
    background-image: url("@/assets/BI/backImage@2x.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform-origin: center center;
}

/* 全屏状态的样式 */
.data-dashboard:fullscreen {
  width: 100%;
  height: 100%;
/* 全屏状态的样式 - 作用于scale-container */
.scale-container:fullscreen {
    width: 100vw;
    height: 100vh;
  margin: 0;
  padding: 0;
  background-color: inherit;
  background-color: #000;
  z-index: 9999;
}

/* Webkit浏览器前缀 */
.data-dashboard:-webkit-full-screen {
  width: 100%;
  height: 100%;
.scale-container:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: inherit;
  background-color: #000;
  z-index: 9999;
}

/* MS浏览器前缀 */
.data-dashboard:-ms-fullscreen {
  width: 100%;
  height: 100%;
.scale-container:-ms-fullscreen {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: inherit;
  background-color: #000;
  z-index: 9999;
}

@@ -1089,10 +1155,9 @@
.dashboard-header {
  position: relative;
  z-index: 1;
  height: 170px;
    height: 86px;
    background-image: url("@/assets/BI/biaoti.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  display: flex;
  align-items: center;
@@ -1103,7 +1168,7 @@
  font-weight: 600;
font-size: 52px;
color: #FFFFFF;
top: 32px;
top: 16px;
position: absolute;
}

@@ -1136,7 +1201,7 @@
  display: flex;
  gap: 30px;
  padding: 0 30px;
  height: calc(100% - 120px);
    height: calc(100% - 86px);
  overflow: hidden;
}