1.润泰-BI大屏展示修改

gaoluyang

2025-12-11 c4e7a4be56f5fa865843574b6f0ad91f1861f1b9

 src/views/reportAnalysis/dataDashboard/index.vue

@@ -12,6 +12,7 @@

      <!-- 顶部标题栏 -->
      <div class="dashboard-header">
        <div class="factory-name">{{ userStore.currentFactoryName }}</div>
      </div>

      <!-- 主要内容区域 -->
@@ -98,13 +99,13 @@
      <div class="center-panel">
        <!-- 顶部统计卡片 -->
        <div class="stats-cards">
          <div class="stat-card">
          <!-- <div class="stat-card">
            <img src="@/assets/BI/icon@2x.png" alt="图标" class="card-icon" />
            <div class="card-content">
              <span class="card-label">员工总数</span>
              <span class="card-value">{{totalStaff}}</span>
            </div>
          </div>
          </div> -->
          <div class="stat-card">
            <img src="@/assets/BI/icon@2x.png" alt="图标" class="card-icon" />
            <div class="card-content">
@@ -173,14 +174,14 @@
        </div>
            
            <div class="financial-header">
               <span class="financial-title">财务分析</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>
                  </div>
<!--                  <div class="event-header">-->
<!--                     <img src="@/assets/BI/shijianmingxiicon@2x.png" alt="图标" class="event-icon" />-->
<!--                     <span class="event-title">经营成果分析</span>-->
<!--                  </div>-->
                  <Echarts ref="chart"
                               :chartStyle="chartStyle"
                               :grid="grid"
@@ -241,9 +242,10 @@
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import autofit from 'autofit.js'
import Echarts from "@/components/Echarts/echarts.vue";
import useUserStore from '@/store/modules/user'
import {
   analysisCustomerContractAmounts, getAmountHalfYear,
   homeTodos,
   homeTodos, productionStatistics,
   qualityStatistics,
   statisticsReceivablePayable
} from "@/api/viewIndex.js";
@@ -258,6 +260,9 @@

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

// 用户store
const userStore = useUserStore()

// 响应式数据
const currentTime = ref('')
@@ -412,11 +417,11 @@
const barLegend1 = {
   show: true,
   textStyle: { color: '#B8C8E0' },
   data: ['总收入', '总支出', '净收入']
   data: ['待生产', '生产中', '已生产']
}
const barSeries11 = ref([
   {
      name: '总收入',
      name: '待生产',
      type: 'bar',
      barGap: 0,
      emphasis: {
@@ -438,7 +443,7 @@
      data: []
   },
   {
      name: '总支出',
      name: '生产中',
      type: 'bar',
      emphasis: {
         focus: 'series'
@@ -459,7 +464,7 @@
      data: []
   },
   {
      name: '净收入',
      name: '已生产',
      type: 'bar',
      emphasis: {
         focus: 'series'
@@ -644,6 +649,15 @@
      barSeries11.value[2].data = res.data.netIncome
   })
}
// 财务统计
const productionStatisticsInfo = () => {
   productionStatistics().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 getNum = () => {
   const params = {
      pageNum: -1,
@@ -667,10 +681,14 @@
   getLedgerPage(params).then((res) => {
      equipmentNum.value = res.data.total
   });
   getRepairPage(params).then((res) => {
   getRepairPage({pageNum: -1,
      pageSize: -1, status: 0}).then((res) => {
         console.log(999,res)
      equipmentRepair.value = res.data.total
   });
   getUpkeepPage(params).then((res) => {
   getUpkeepPage({pageNum: -1,
      pageSize: -1, status: 0}).then((res) => {
      console.log(123,res)
      equipmentMaintain.value = res.data.total
   });
   measuringInstrumentListPage(params).then((res) => {
@@ -915,7 +933,7 @@
  // 使用nextTick确保DOM完全渲染后再初始化图表
  nextTick(() => {
    // 初始化autofit自适应
    autofit.init({ dh: 1440, dw: 2560, el: '.data-dashboard', resize: true }, false)
    autofit.init({ dh: 1080, dw: 1920, el: '.data-dashboard', resize: true }, false)
    
    // 添加自动滚动动画效果 - 客户信息列表
    const contractList = refContractList.value
@@ -977,6 +995,7 @@
  window.addEventListener('resize', handleResize)
  analysisCustomer()
  qualityStatisticsInfo()
   productionStatisticsInfo()
   accountStatisticsInfo()
  getNum()
  getLedgerNum()
@@ -1044,7 +1063,6 @@
  position: relative;
  width: 100%;
   height: 100%;
  overflow: hidden;
   background-image: url("@/assets/BI/backImage@2x.png");
   background-size: cover;
   background-position: center;
@@ -1090,6 +1108,17 @@
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.factory-name {
  font-weight: 600;
font-size: 52px;
color: #FFFFFF;
top: 32px;
position: absolute;
}

.fullscreen-btn {