产品进销存-前端
blame | 历史 | 补丁 | 提交 | 提交对比 | 忽略空白
spring
11 小时以前 b7604dde06685e5c42a6f7d375a26741c7b600fd 
 src/views/reportAnalysis/dataDashboard/index.vue


@@ -1,329 +1,62 @@


<template>


      <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">


          <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>


        </svg>


        <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">


          <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>


        </svg>


      </button>


  <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">


        <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>


      </svg>


      <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">


        <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>


      </svg>


    </button>




      <!-- 顶部标题栏 -->


      <div class="dashboard-header">


        <div class="factory-name">{{ userStore.currentFactoryName }}</div>


      </div>




      <!-- 主要内容区域 -->


      <div class="dashboard-content">


      <!-- 左侧区域 -->


      <div class="left-panel">


        <!-- 客户信息统计分析 -->


            <div class="panel-header">


               <span class="panel-title">在制品统计分析</span>


            </div>


        <div class="panel-item-customers">


               <div class="quality-cards">


                  <div class="quality-cardSec">


                     <div class="quality-card one"></div>


                     <div class="quality-cardTitle">


                        <div>总在制数量</div>


                        <div>{{workInProcessStatistics.totalQuantity}}件</div>


                     </div>


                  </div>


                  <div class="quality-cardSec">


                     <div class="quality-card two"></div>


                     <div class="quality-cardTitle">


                        <div>平均周转天数</div>


                        <div>{{workInProcessStatistics.avgTurnoverDays}}天</div>


                     </div>


                  </div>


                  <div class="quality-cardSec">


                     <div class="quality-card three"></div>


                     <div class="quality-cardTitle">


                        <div>周转效率</div>


                        <div>{{workInProcessStatistics.turnoverEfficiency}}%</div>


                     </div>


                  </div>


               </div>


               <!-- 工序在制品数量柱状图 -->


               <div style="height: 70%">


                  <Echarts ref="chart"


                               :chartStyle="chartStyle"


                               :grid="grid"


                               :legend="workInProcessBarLegend"


                               :series="workInProcessBarSeries"


                               :tooltip="tooltip"


                               :xAxis="workInProcessXAxis"


                               :yAxis="workInProcessYAxis"


                               :options="{backgroundColor: 'transparent', textStyle: {color: '#B8C8E0'}}"


                               style="height: 100%"></Echarts>


               </div>


        </div>




        <!-- 质量统计 -->


            <div class="panel-header">


               <span class="panel-title">近4月质量统计</span>


            </div>


            <div class="main-panel">


               <div class="panel-item-customers">


                  <div class="quality-cards">


                     <div class="quality-cardSec">


                        <div class="quality-card one"></div>


                        <div class="quality-cardTitle">


                           <div>原材料检数</div>


                           <div>{{qualityStatisticsObject.supplierNum}}件</div>


                        </div>


                     </div>


                     <div class="quality-cardSec">


                        <div class="quality-card two"></div>


                        <div class="quality-cardTitle">


                           <div>过程检数</div>


                           <div>{{qualityStatisticsObject.processNum}}件</div>


                        </div>


                     </div>


                     <div class="quality-cardSec">


                        <div class="quality-card three"></div>


                        <div class="quality-cardTitle">


                           <div>出厂检数</div>


                           <div>{{qualityStatisticsObject.factoryNum}}件</div>


                        </div>


                     </div>


                  </div>


                  <Echarts ref="chart"


                               :chartStyle="chartStyle"


                               :grid="grid"


                               :legend="barLegend"


                               :series="barSeries1"


                               :tooltip="tooltip"


                               :xAxis="xAxis1"


                               :yAxis="yAxis1"


                               :options="{backgroundColor: 'transparent', textStyle: {color: '#B8C8E0'}}"


                               style="height: 260px"></Echarts>


               </div>


            </div>


      </div>




      <!-- 中间区域 -->


      <div class="center-panel">


        <!-- 顶部统计卡片 -->


        <div class="stats-cards">


          <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 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">{{totalCustomers}}</span>


            </div>


          </div>


          <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">{{totalSuppliers}}</span>


            </div>


          </div>


        </div>




        <!-- 设备统计 -->


        <div class="equipment-stats">


          <div class="equipment-header">


                  <img src="@/assets/BI/shujutongjiicon@2x.png" alt="图标" class="equipment-icon" />


            <span class="equipment-title">设备统计</span>


          </div>


          <div class="equipment-items">


            <div class="equipment-item">


              <span class="equipment-value">{{equipmentNum}}</span>


              <span class="equipment-label">设备总数</span>


            </div>


            <div class="equipment-item">


              <span class="equipment-value">{{equipmentRepair}}</span>


              <span class="equipment-label">待维修设备</span>


            </div>


            <div class="equipment-item">


              <span class="equipment-value">{{equipmentMaintain}}</span>


              <span class="equipment-label">待保养设备</span>


            </div>


            <div class="equipment-item">


              <span class="equipment-value">{{totalMeasuring}}</span>


              <span class="equipment-label">计量器具总数</span>


            </div>


          </div>


        </div>




        <!-- 事件名称 -->


        <div class="event-info">


          <div class="event-header">


                  <img src="@/assets/BI/shijianmingxiicon@2x.png" alt="图标" class="event-icon" />


            <span class="event-title">事件名称</span>


          </div>


          <div class="event-content">


                  <ul class="todo-list" v-if="todoList.length > 0" ref="refTodoList"> 


   <li v-for="item in todoList" :key="item.id"> 


    <div style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;gap: 20px"> 


     <div style="display: flex;justify-content: space-between;align-items: center;"> 


      <div class="todo-title">待办编号：{{item.approveId}}</div> 


      <div class="todo-division">部门：{{item.approveDeptName}}</div> 


      <div class="todo-time">{{item.approveTime}}</div> 


     </div> 


     <div class="todo-division">待办事由：{{item.approveReason}}</div> 


    </div> 


   </li> 


 </ul>


                  <div v-else style="text-align: center">


                     暂无数据


                  </div>


          </div>


        </div>


				


            <div class="financial-header">


               <span class="financial-title">各生产订单的完成进度统计</span>


            </div>


            <div class="main-panel">


               <div class="panel-item-customers">


                  <div class="order-statistics-cards" style="margin-bottom: 0px;">


                     <div class="quality-cardSec">


                        <div class="quality-card four"></div>


                        <div class="quality-cardTitle">


                           <div>总订单数</div>


                           <div>{{orderStatisticsObject.totalOrderCount}}件</div>


                        </div>


                     </div>


                     <div class="quality-cardSec">


                        <div class="quality-card five"></div>


                        <div class="quality-cardTitle">


                           <div>未完成订单数</div>


                           <div>{{orderStatisticsObject.uncompletedOrderCount}}件</div>


                        </div>


                     </div>


                     <div class="quality-cardSec">


                        <div class="quality-card six"></div>


                        <div class="quality-cardTitle">


                           <div>部分完成订单数</div>


                           <div>{{orderStatisticsObject.partialCompletedOrderCount}}件</div>


                        </div>


                     </div>


                     <div class="quality-cardSec">


                        <div class="quality-card seven"></div>


                        <div class="quality-cardTitle">


                           <div>已完成订单数</div>


                           <div>{{orderStatisticsObject.completedOrderCount}}件</div>


                        </div>


                     </div>


                  </div>


                  <div class="progress-table-container" ref="progressTableRef" style="margin-top: 0px;" @scroll="handleTableScroll">


                     <table class="progress-table">


                        <thead>


                           <tr>


                              <th>生产订单号</th>


                              <th>产品名称</th>


                              <th>规格</th>


                              <th>需求数量</th>


                              <th>完成数量</th>


                              <th>完成进度</th>


                           </tr>


                        </thead>


                        <tbody>


                           <tr 


                              v-for="(item, index) in progressTableData" 


                              :key="index"


                              :ref="el => setRowRef(el, index)"


                              :class="{ 'row-under-header': isRowUnderHeader(index) }"


                           >


                              <td>{{ item.npsNo || '-' }}</td>


                              <td>{{ item.productCategory || '-' }}</td>


                              <td>{{ item.specificationModel || '-' }}</td>


                              <td>{{ item.quantity || 0 }}</td>


                              <td>{{ item.completeQuantity || 0 }}</td>


                              <td>


                                 <el-progress


                                    :percentage="calculateProgress(item)"


                                    :color="progressColor(calculateProgress(item))"


                                    :status="calculateProgress(item) >= 100 ? 'success' : ''"


                                    :stroke-width="8"


                                 />


                              </td>


                           </tr>


                        </tbody>


                     </table>


                  </div>


               </div>


            </div>


      </div>




      <!-- 右侧区域 -->


      <div class="right-panel">


        <!-- 应收应付统计 -->


            <div class="panel-header">


               <span class="panel-title">应收应付统计</span>


            </div>


            <div class="panel-item-customers">


               <div style="display: flex;justify-content: space-between;margin-bottom: 20px;">


                  <div class="section-title">应收应付统计</div>


<!--                  <el-radio-group v-model="radio1" size="large" @change="statisticsReceivable" class="custom-radio-group">-->


<!--                     <el-radio-button label="按周" :value="1" />-->


<!--                     <el-radio-button label="按月" :value="2" />-->


<!--                     <el-radio-button label="按季度" :value="3" />-->


<!--                  </el-radio-group>-->


               </div>


               <Echarts ref="chart"


                            :color="barColors2"


                            :chartStyle="chartStyle"


                            :grid="grid"


                   :legend="barLegend2"


                            :series="barSeries"


                            :tooltip="tooltip"


                            :xAxis="xAxis"


                            :yAxis="yAxis"


                            :options="{backgroundColor: 'transparent', textStyle: {color: '#B8C8E0'}}"


                            style="height: 260px"></Echarts>


            </div>




        <!-- 回款与开票分析 -->


         <div class="panel-header">


               <span class="panel-title">近一月回款与开票分析</span>


            </div>


        <div class="panel-item-customers" style="padding-top: 60px;">


               <Echarts ref="chart" :chartStyle="chartStyle" :grid="grid" :legend="lineLegend" :series="lineSeries"


                         :tooltip="tooltipLine" :xAxis="xAxis2" :yAxis="yAxis2" :options="{backgroundColor: 'transparent', textStyle: {color: '#FFFFFF'}}" style="height: 270px;"></Echarts>


            </div>


      </div>


      </div>


      </div>


    <!-- 顶部标题栏 -->


    <div class="dashboard-header">


      <div class="factory-name">{{ userStore.currentFactoryName }}</div>


    </div>




    <!-- 主要内容区域 -->


    <div class="dashboard-content">


    <!-- 左侧区域 -->


    <div class="left-panel">


      <!-- 客户信息统计分析 -->


      <LeftTop />




      <!-- 质量统计 -->


      <LeftBottom />


    </div>




    <!-- 中间区域 -->


    <div class="center-panel">


      <CenterTop />


      


      <CenterBottom />


    </div>




    <!-- 右侧区域 -->


    <div class="right-panel">


      <!-- 应收应付统计 -->


      <RightTop />




      <!-- 回款与开票分析 -->


       <RightBottom />


    </div>


    </div>


    </div>


  </div>


</template>




<script setup>


import * as echarts from 'echarts'


import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'


import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'


import autofit from 'autofit.js'


import Echarts from "@/components/Echarts/echarts.vue";


import LeftTop from './components/basic/left-top.vue'


import LeftBottom from './components/basic/left-bottom.vue'


import CenterTop from './components/basic/center-top.vue'


import CenterBottom from './components/basic/center-bottom.vue'


import RightTop from './components/basic/right-top.vue'


import RightBottom from './components/basic/right-bottom.vue'


import useUserStore from '@/store/modules/user'


import {


   analysisCustomerContractAmounts, getAmountHalfYear,


   homeTodos,


   qualityStatistics,


   statisticsReceivablePayable,


   getProgressStatistics,


     getWorkInProcessTurnover


} from "@/api/viewIndex.js";


import {staffOnJobListPage} from "@/api/personnelManagement/employeeRecord.js";


import {listCustomer} from "@/api/basicData/customerFile.js";


import {listSupplier} from "@/api/basicData/supplierManageFile.js";


import {getLedgerPage} from "@/api/equipmentManagement/ledger.js";


import {getRepairPage} from "@/api/equipmentManagement/repair.js";


import {getUpkeepPage} from "@/api/equipmentManagement/upkeep.js";


import {measuringInstrumentListPage} from "@/api/equipmentManagement/measurementEquipment.js";


import {listPageAnalysis} from "@/api/financialManagement/expenseManagement.js";


import {productOrderListPage} from "@/api/productionManagement/productionOrder.js";




// 全屏相关状态


const isFullscreen = ref(false);


@@ -337,431 +70,20 @@


// 用户store


const userStore = useUserStore()




// 响应式数据


const currentTime = ref('')


const currentDate = ref('')


const timer = ref(null)


const charts = ref([])




// 图表引用


const customerPieChartRef = ref(null)


const salesBarChartRef = ref(null)


const dataBarChartRef = ref(null)


const financialAreaChartRef = ref(null)


const realtimeLineChartRef = ref(null)


const refContractList = ref(null)


const refTodoList = ref(null)


const progressTableRef = ref(null)


const timerScroll = ref(null)


const progressTableScrollTimer = ref(null)


const isTableScrolling = ref(false)


const tableScrollTimeout = ref(null)


const tableRowRefs = ref([])


const rowsUnderHeader = ref(new Set())




const chartStylePie = {


   width: '100%',


   height: '100%' // 设置图表容器的高度


}


const materialPieSeries = ref([


   {


      type: 'pie',


      radius: ['0%', '90%'],


      avoidLabelOverlap: false,


      itemStyle: {


         borderColor: '#fff',


         borderWidth: 0


      },


      label: {


         show: false


      },


      data: []


   }


])


const pieLegend = reactive({


   show: false,


})


const sum = ref(0)


const totalStaff = ref(0)


const totalCustomers = ref(0)


const totalSuppliers = ref(0)


const yny = ref(0)


const chain = ref(0)


const equipmentNum = ref(0)


const equipmentRepair = ref(0)


const equipmentMaintain = ref(0)


const totalMeasuring = ref(0)


const pieTooltip = reactive({


   trigger: 'item',


   formatter: function (params) {


      // 动态生成提示信息，基于数据项的 name 属性


      const description = params.name === '本月回款金额' ? '本月回款金额' : '应收款金额';


      return `<div style="color: #B8C8E0">${description} ${params.value}元 ${params.percent}%</div>`;


   },


   position: 'right'


})




const qualityStatisticsObject = ref({


   supplierNum: 0,


   processNum: 0,


   factoryNum: 0,


})




// 订单统计对象


const orderStatisticsObject = ref({


   totalOrderCount: 0,


   uncompletedOrderCount: 0,


   partialCompletedOrderCount: 0,


   completedOrderCount: 0,


})




// 在制品周转统计对象


const workInProcessStatistics = ref({


   totalQuantity: 0,


   avgTurnoverDays: 0,


   turnoverEfficiency: 0,


})


const chartStyle = {


   width: '100%',


   height: '150%' // 设置图表容器的高度


}


const barSeries = ref([


   {


      name: '应付金额',


      type: 'bar',


      data: [],


      label: {


         show: true,


      },


      itemStyle: {


         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [


            { offset: 0, color: '#00A4ED' },


            { offset: 1, color: '#4EE4FF' }


         ])


      }


   },


   {


      name: '应收金额',


      type: 'bar',


      data: [],


      label: {


         show: true,


      },


      itemStyle: {


         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [


            { offset: 0, color: '#537EF5' },


            { offset: 1, color: '#9061F8' }


         ])


      }


   }


])


const radio1 = ref(1)


const barColors2 = ['#5181DB', '#D369E0', '#F2CA6D', '#60CCA8']


const grid = {


   left: '3%',


   right: '4%',


   bottom: '3%',


   containLabel: true


}


const lineLegend = {


   show: true,


  textStyle: { color: '#B8C8E0' },


   data: ['开票', '回款']


}


const lineSeries = ref([


   {


      type: 'line',


      data: [],


      label: {


         show: true


      },


      showSymbol: true, // 显示圆点


   },


])


const tooltipLine = {


   trigger: 'axis',


}


const yAxis2 = ref([


   {


      type: 'value',


   }


])


const xAxis2 = ref([


   {


      type: 'category',


      data: [],


      axisLabel: {


         interval: 0,


         formatter: function(value) {


            return value.replace(/~/g, '\n');


         },


      }


   }


])


const barLegend2 = {


   show: true,


   textStyle: { color: '#B8C8E0' },


   data: ['应付金额', '应收金额']


}


const barLegend = {


   show: true,


   textStyle: { color: '#B8C8E0' },


   data: ['原材料合格数', '过程合格数', '出不合格数']


}


const barLegend1 = {


   show: false,


   textStyle: { color: '#B8C8E0' },


   data: []


}


const barSeries11 = ref([


   {


      name: '生产订单统计',


      type: 'bar',


      barGap: 0,


      emphasis: {


         focus: 'series'


      },


      itemStyle: {


         // 使用函数根据数据索引返回不同颜色


         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: []


   }


])


const barSeries1 = ref([


   {


      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' }


            ]


         }


      },


      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 tooltip = {


   trigger: 'axis',


   axisPointer: {


      type: 'shadow'


   },


   formatter: function (params) {


      let result = params[0].axisValueLabel + '<br/>';


      params.forEach(item => {


         result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`;


      });


      return result;


   }


}


const xAxis = [{


   type: 'value',


}]


const yAxis = [{


   type: 'category',


   data: ['应收应付统计']


}]


const xAxis1 = ref([{


   type: 'category',


   axisTick: { show: false },


   axisLabel: { color: '#B8C8E0' },


   data: []


}])


const yAxis1 = [{


   type: 'value',


   axisLabel: { color: '#B8C8E0' }


}]


const xAxis3 = ref([{


   type: 'category',


   axisTick: { show: false },


   axisLabel: { color: '#B8C8E0' },


   data: []


}])


const yAxis3 = [{


   type: 'value',


   axisLabel: { color: '#B8C8E0' }


}]




// 在制品工序柱状图配置


const workInProcessXAxis = ref([{


   type: 'category',


   axisTick: { show: false },


   axisLabel: { color: '#B8C8E0' },


   data: []


}])


const workInProcessYAxis = [{


   type: 'value',


   axisLabel: { color: '#B8C8E0' },


   name: ''


}]


const workInProcessBarLegend = {


   show: false,


   textStyle: { color: '#B8C8E0' },


   data: []


}


const workInProcessBarSeries = ref([


   {


      name: '在制品数量',


      type: 'bar',


      barWidth: 25, // 固定柱状图宽度为40px


      barGap: 0,


      emphasis: {


         focus: 'series'


      },


      itemStyle: {


         color: {


            type: 'linear',


            x: 0,


            y: 0,


            x2: 0,


            y2: 1,


            colorStops: [


               { offset: 0, color: '#4EE4FF' },


               { offset: 1, color: '#00A4ED' }


            ]


         }


      },


      label: {


         show: true,


         position: 'top',


         color: '#B8C8E0'


      },


      data: []


   }


])




// 待办事项


const todoList = ref([])




// 生产订单完成进度表格数据


const progressTableData = ref([])




// 计算完成进度百分比


const calculateProgress = (item) => {


   if (!item) return 0


   // 优先使用completionStatus字段


   if (item.completionStatus !== undefined && item.completionStatus !== null) {


      const percentage = Number(item.completionStatus)


      if (isNaN(percentage)) return 0


      return Math.min(Math.max(Math.round(percentage), 0), 100)


   }


   // 如果没有completionStatus，则根据完成数量和需求数量计算


   if (!item.quantity || item.quantity === 0) return 0


   const percentage = (item.completeQuantity || 0) / item.quantity * 100


   return Math.min(Math.max(Math.round(percentage), 0), 100)


}




// 根据进度百分比返回颜色


const progressColor = (percentage) => {


   const p = percentage || 0


   if (p < 30) return "#f56c6c"


   if (p < 50) return "#e6a23c"


   if (p < 80) return "#409eff"


   return "#67c23a"


}




// 计算缩放比例


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 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()


    }


  })


}




// 窗口大小变化处理


@@ -772,529 +94,29 @@


  }, 100)


}




// 销毁图表实例


const disposeCharts = () => {


  charts.value.forEach(chart => {


    if (chart && chart.dispose) {


      chart.dispose()


    }


  })


  charts.value = []


}


// 合同金额


const analysisCustomer = () => {


   analysisCustomerContractAmounts().then((res) => {


      sum.value = res.data.sum


      yny.value = res.data.yny


      chain.value = res.data.chain


      // 为每个数据项分配随机颜色


      materialPieSeries.value[0].data = res.data.item.map(item => ({


         ...item,


         itemStyle: { color: getRandomColor() }


      }))


   })


}


// 在制品周转统计


const workInProcessTurnoverInfo = () => {


   getWorkInProcessTurnover().then((res) => {


      console.log("在制品周转统计数据:", res)


		


      if (!res || !res.data) {


         console.warn('在制品周转统计数据为空')


         return


      }


		


      // 从接口获取统计数据


      workInProcessStatistics.value = {


         totalQuantity: res.data.totalOrderCount || 0,


         avgTurnoverDays: res.data.averageTurnoverDays || 0,


         turnoverEfficiency: res.data.turnoverEfficiency || 0,


      }


		


      // 设置工序柱状图数据


      // X轴：processDetails (工序详情数组)


      // Y轴：processQuantityDetails (工序数量详情数组)


      if (res.data.processDetails && Array.isArray(res.data.processDetails)) {


         // 设置X轴数据（工序名称）


         workInProcessXAxis.value[0].data = res.data.processDetails


      } else {


         workInProcessXAxis.value[0].data = []


      }


		


      if (res.data.processQuantityDetails && Array.isArray(res.data.processQuantityDetails)) {


         // 设置Y轴数据（在制品数量）


         workInProcessBarSeries.value[0].data = res.data.processQuantityDetails


      } else {


         workInProcessBarSeries.value[0].data = []


      }


   }).catch((error) => {


      console.error('获取在制品周转统计失败:', error)


   })


}


// 质检统计


const qualityStatisticsInfo = () => {


   qualityStatistics().then((res) => {


      res.data.item.forEach(item => {


         xAxis1.value[0].data.push(item.date)


         barSeries1.value[0].data.push(item.supplierNum)


         barSeries1.value[1].data.push(item.processNum)


         barSeries1.value[2].data.push(item.factoryNum)


      })


      qualityStatisticsObject.value.supplierNum = res.data.supplierNum


      qualityStatisticsObject.value.processNum = res.data.processNum


      qualityStatisticsObject.value.factoryNum = res.data.factoryNum


   })


}


// 各生产订单的完成进度统计


const progressStatisticsInfo = () => {


   // 从统计接口获取统计数据


   getProgressStatistics().then((res) => {


      console.log("生产订单完成进度统计数据:", res)


		


      if (!res || !res.data) {


         console.warn('生产订单完成进度统计数据为空')


         return


      }


		


      // 从接口获取统计数据


      orderStatisticsObject.value = {


         totalOrderCount: res.data.totalOrderCount || 0,


         uncompletedOrderCount: res.data.uncompletedOrderCount || 0,


         partialCompletedOrderCount: res.data.partialCompletedOrderCount || 0,


         completedOrderCount: res.data.completedOrderCount || 0


      }


      progressTableData.value = res.data.completedOrderDetails || []


      // 重置行引用


      tableRowRefs.value = []


      rowsUnderHeader.value.clear()


		


      // 在获取到数据后，初始化滚动功能


      nextTick(() => {


         initProgressTableScroll()


      })


   }).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,


      pageSize: -1,


   }


   staffOnJobListPage({...params, staffState: 1}).then(res => {


      totalStaff.value = res.data.total


   })


   listCustomer(params).then((res) => {


      totalCustomers.value = res.total;


   });


   listSupplier(params).then((res) => {


      totalSuppliers.value = res.data.total


   });


}


const getLedgerNum = () => {


   const params = {


      pageNum: -1,


      pageSize: -1,


   }


   getLedgerPage(params).then((res) => {


      equipmentNum.value = res.data.total


   });


   getRepairPage({...params, status:0}).then((res) => {


      equipmentRepair.value = res.data.total


   });


   getUpkeepPage({...params, status:0}).then((res) => {


      equipmentMaintain.value = res.data.total


   });


   measuringInstrumentListPage(params).then((res) => {


      totalMeasuring.value = res.data.total


   });


}


// 待办事项


const todoInfoS = () => {


   homeTodos().then((res) => {


      todoList.value = res.data


      // 在获取到待办事项数据后，初始化滚动功能


      nextTick(() => {


         initTodoListScroll()


      })


   })


}


// 应付应收统计


const statisticsReceivable = (type) => {


   statisticsReceivablePayable({type: radio1.value}).then((res) => {


      // 设置应付金额数据


      barSeries.value[0].data = [


         { value: res.data.payableMoney }


      ]


      // 设置应收金额数据


      barSeries.value[1].data = [


         { value: res.data.receivableMoney }


      ]


   })


}


const getAmountHalfYearNum = async () => {


   const res = await getAmountHalfYear()


   console.log(res)


   const monthName = []


   const receiptAmount = []


   const invoiceAmount = []


   res.data.forEach(item => {


      monthName.push(item.month)


      receiptAmount.push(item.receiptAmount)


      invoiceAmount.push(item.invoiceAmount)


   })


   // 正确响应式赋值：创建新的 xAxis 和 series 对象


   xAxis2.value[0].data = monthName


   xAxis2.value[0].data = monthName.map(item => item.replace(/~/g, '\n~'));


   lineSeries.value = [


      {


         name: '开票',


         type: 'line',


         data: receiptAmount,


         stack: 'Total',


         areaStyle: {


            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [


               {


                  offset: 0,


                  color: 'rgba(131, 207, 255, 1)'


               },


               {


                  offset: 1,


                  color: 'rgba(186, 228, 255, 1)'


               }


            ])


         },


         itemStyle: {


            color: '#2D99FF',


            borderColor: '#2D99FF'


         },


         emphasis: {


            focus: 'series'


         },


         lineStyle: {


            width: 0


         },


         showSymbol: true,


      },


      {


         name: '回款',


         type: 'line',


         data: invoiceAmount,


         stack: 'Total',


         lineStyle: {


            width: 0


         },


         itemStyle: {


            color: '#83CFFF',


            borderColor: '#83CFFF'


         },


         showSymbol: true,


         areaStyle: {


            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [


               {


                  offset: 0,


                  color: 'rgba(54, 153, 255, 1)'


               },


               {


                  offset: 1,


                  color: 'rgba(89, 169, 254, 1)'


               }


            ])


         },


         emphasis: {


            focus: 'series'


         },


      }


   ]


}




// 自动轮换周、月、季度的定时器


const autoSwitchTimer = ref(null)




// 设置行引用


const setRowRef = (el, index) => {


   if (el) {


      tableRowRefs.value[index] = el


   }


}




// 判断行是否在表头下方


const isRowUnderHeader = (index) => {


   return rowsUnderHeader.value.has(index)


}




// 处理表格滚动事件


const handleTableScroll = () => {


   const tableContainer = progressTableRef.value


   if (!tableContainer) return


	


   const thead = tableContainer.querySelector('thead')


   if (!thead) return


	


   const theadHeight = thead.offsetHeight


   const containerRect = tableContainer.getBoundingClientRect()


   const containerTop = containerRect.top


   const theadBottom = containerTop + theadHeight


	


   // 清空之前的记录


   rowsUnderHeader.value.clear()


	


   // 检查每一行是否在表头下方（被表头遮挡）


   tableRowRefs.value.forEach((row, index) => {


      if (row) {


         const rowRect = row.getBoundingClientRect()


         const rowTop = rowRect.top


         const rowBottom = rowRect.bottom


			


         // 如果行与表头有重叠（行在表头下方被遮挡）


         // 行的顶部在表头底部下方，但行的底部在表头底部上方，说明被遮挡


         if (rowTop < theadBottom && rowBottom > containerTop) {


            rowsUnderHeader.value.add(index)


         }


      }


   })


	


   // 清除之前的定时器


   if (tableScrollTimeout.value) {


      clearTimeout(tableScrollTimeout.value)


   }


	


   // 滚动停止后清空淡化标记


   tableScrollTimeout.value = setTimeout(() => {


      rowsUnderHeader.value.clear()


   }, 150)


}




// 初始化生产订单进度表格滚动功能


const initProgressTableScroll = () => {


   const tableContainer = progressTableRef.value


   if (!tableContainer) return


	


   // 清理之前的滚动动画和定时器


   if (progressTableScrollTimer.value) {


      cancelAnimationFrame(progressTableScrollTimer.value)


      progressTableScrollTimer.value = null


   }


   if (tableContainer._pauseTimer) {


      clearInterval(tableContainer._pauseTimer)


      tableContainer._pauseTimer = null


   }


	


   const tbody = tableContainer.querySelector('tbody')


   if (!tbody) return


	


   // 清理之前可能存在的克隆行（保留原始数据行）


   // 原始数据行的数量应该等于 progressTableData.value.length


   const originalCount = progressTableData.value.length


   const allRows = Array.from(tbody.querySelectorAll('tr'))


   if (allRows.length > originalCount) {


      // 移除所有超过原始数量的行（这些是克隆的行）


      for (let i = originalCount; i < allRows.length; i++) {


         allRows[i].remove()


      }


   }


	


   const scrollItems = Array.from(tbody.querySelectorAll('tr'))


   if (scrollItems.length === 0) return


	


   // 获取原始数据项数量


   const originalItemCount = scrollItems.length


	


   // 计算容器高度和表头高度


   const thead = tableContainer.querySelector('thead')


   const theadHeight = thead ? thead.offsetHeight : 40


   const containerHeight = tableContainer.clientHeight


   const visibleHeight = containerHeight - theadHeight


	


   // 计算原始数据的总高度


   const itemHeight = scrollItems[0]?.offsetHeight || 40


   const totalContentHeight = itemHeight * originalItemCount


	


   // 如果数据量不够，容器可以完全显示所有数据，就不需要滚动和克隆


   if (totalContentHeight <= visibleHeight) {


      // 数据量少，不需要滚动，直接返回


      return


   }


	


   // 数据量足够，需要滚动，进行克隆以实现无缝滚动


   const cloneCount = Math.ceil(visibleHeight / itemHeight) + 2


	


   // 克隆前几个项目并添加到列表末尾，实现无缝滚动


   for (let i = 0; i < cloneCount; i++) {


      const clone = scrollItems[i % originalItemCount].cloneNode(true)


      tbody.appendChild(clone)


   }


	


   let scrollPosition = 0


   const scrollSpeed = 1.5


   const pauseTime = 3000


   let isPaused = false


   let lastTimestamp = 0


	


   // 连续滚动动画函数


   function scrollAnimation(timestamp) {


      if (!lastTimestamp) lastTimestamp = timestamp


      const deltaTime = timestamp - lastTimestamp


      lastTimestamp = timestamp


		


      if (!isPaused) {


         scrollPosition += scrollSpeed * (deltaTime / 16)


			


         // 计算最大滚动位置（原始内容的高度）


         const maxScroll = itemHeight * originalItemCount


			


         // 当滚动超过原始内容长度时，重置位置实现无缝滚动


         if (scrollPosition >= maxScroll) {


            scrollPosition = 0


            tableContainer.scrollTop = 0


         } else {


            tableContainer.scrollTop = scrollPosition


         }


      }


		


      progressTableScrollTimer.value = requestAnimationFrame(scrollAnimation)


   }


	


   // 启动滚动动画


   progressTableScrollTimer.value = requestAnimationFrame(scrollAnimation)


	


   // 设置滚动-暂停-滚动的循环效果


   const pauseTimer = setInterval(() => {


      isPaused = !isPaused


   }, pauseTime)


	


   // 清理定时器


   tableContainer._pauseTimer = pauseTimer


}




// 初始化待办事项列表滚动功能


const initTodoListScroll = () => {


   const todoList = refTodoList.value


   // 强制启用滚动，不检查任何条件


   if (todoList) {


      // 创建一个克隆项，用于实现无缝滚动


      const scrollItems = Array.from(todoList.querySelectorAll('li'))


      if (scrollItems.length > 0) {


         // 确保有足够的项目用于滚动


         // 如果项目太少，多复制几次以确保滚动效果


         if (scrollItems.length < 4) {


            const originalItems = [...scrollItems]


            for (let i = 0; i < 4; i++) {


               originalItems.forEach(item => {


                  const clone = item.cloneNode(true)


                  todoList.appendChild(clone)


               })


            }


            // 重新获取所有项目


            scrollItems.push(...Array.from(todoList.querySelectorAll('li')).slice(scrollItems.length));


         }


         const itemHeight = scrollItems[0]?.offsetHeight || 0


         const containerHeight = todoList.clientHeight


         const cloneCount = Math.ceil(containerHeight / itemHeight) + 2


			


         // 克隆前几个项目并添加到列表末尾，实现无缝滚动


         for (let i = 0; i < cloneCount; i++) {


            const clone = scrollItems[i % scrollItems.length].cloneNode(true)


            todoList.appendChild(clone)


         }


			


         let scrollPosition = 0


         const scrollSpeed = 1.5 // 增加滚动速度，使滚动更加明显


         const pauseTime = 3000 // 滚动暂停时间


         let isPaused = false


         let lastTimestamp = 0


			


         // 连续滚动动画函数


         function scrollAnimation(timestamp) {


            if (!lastTimestamp) lastTimestamp = timestamp


            const deltaTime = timestamp - lastTimestamp


            lastTimestamp = timestamp


				


            if (!isPaused) {


               scrollPosition += scrollSpeed * (deltaTime / 16) // 标准化为60fps的速度


					


               // 当滚动超过原始内容长度时，重置位置实现无缝滚动


               const maxScroll = Math.max(todoList.scrollHeight - containerHeight - cloneCount * itemHeight, itemHeight * scrollItems.length)


               if (scrollPosition >= maxScroll) {


                  scrollPosition = 0


                  todoList.scrollTop = 0


               } else {


                  todoList.scrollTop = scrollPosition


               }


            }


				


            todoList._animationFrame = requestAnimationFrame(scrollAnimation)


         }


			


         // 启动滚动动画


         todoList._animationFrame = requestAnimationFrame(scrollAnimation)


			


         // 设置滚动-暂停-滚动的循环效果


         const pauseTimer = setInterval(() => {


            isPaused = !isPaused


         }, pauseTime)


			


         // 清理定时器


         todoList._pauseTimer = pauseTimer


      }


   }


}


const getRandomColor = () => {


   // 生成浅色：R、G、B 分量都在 150-255 之间


   const r = Math.floor(Math.random() * 106) + 150; // 150-255


   const g = Math.floor(Math.random() * 106) + 150; // 150-255


   const b = Math.floor(Math.random() * 106) + 150; // 150-255


   // 将 RGB 转换为十六进制颜色


   return '#' + r.toString(16).padStart(2, '0') + g.toString(16).padStart(2, '0') + b.toString(16).padStart(2, '0');


}




// 更新时间


const updateTime = () => {


  const now = new Date()


  currentTime.value = now.toLocaleTimeString('zh-CN', { hour12: false })


  currentDate.value = now.toLocaleDateString('zh-CN', {


    year: 'numeric',


    month: '2-digit',


    day: '2-digit',


    weekday: 'long'


  })


}




// 初始化时间


const initTime = () => {


  updateTime()


  timer.value = setInterval(updateTime, 1000)


}


// 全屏功能实现 - 针对scale-container元素


const toggleFullscreen = () => {


   const element = document.querySelector('.scale-container')


	


   if (!element) return


	


   if (!isFullscreen.value) {


      if (element.requestFullscreen) {


         element.requestFullscreen()


      } else if (element.webkitRequestFullscreen) {


         element.webkitRequestFullscreen()


      } else if (element.msRequestFullscreen) {


         element.msRequestFullscreen()


      }


   } else {


      if (document.exitFullscreen) {


         document.exitFullscreen()


      } else if (document.webkitExitFullscreen) {


         document.webkitExitFullscreen()


      } else if (document.msExitFullscreen) {


         document.msExitFullscreen()


      }


   }


  const element = document.querySelector('.scale-container')




  if (!element) return




  if (!isFullscreen.value) {


    if (element.requestFullscreen) {


      element.requestFullscreen()


    } else if (element.webkitRequestFullscreen) {


      element.webkitRequestFullscreen()


    } else if (element.msRequestFullscreen) {


      element.msRequestFullscreen()


    }


  } else {


    if (document.exitFullscreen) {


      document.exitFullscreen()


    } else if (document.webkitExitFullscreen) {


      document.webkitExitFullscreen()


    } else if (document.msExitFullscreen) {


      document.msExitFullscreen()


    }


  }


}




// 监听全屏变化事件


@@ -1303,7 +125,7 @@


                           document.webkitFullscreenElement || 


                           document.msFullscreenElement


  isFullscreen.value = fullscreenElement && fullscreenElement.classList.contains('scale-container')


  




  // 全屏状态变化时，延迟重新计算缩放比例（确保DOM更新完成）


  setTimeout(() => {


    calculateScale()


@@ -1312,146 +134,19 @@




// 生命周期钩子


onMounted(() => {


  initTime()


  // 使用nextTick确保DOM完全渲染后再初始化图表


  // 使用nextTick确保DOM完全渲染后再初始化


  nextTick(() => {


    // 计算初始缩放比例


    calculateScale()


    


    // 初始化autofit自适应（如果需要保留autofit，可以保留，但主要缩放由scale-container控制）


    // autofit.init({ dh: 800, dw: 1280, el: '.data-dashboard', resize: true }, false)


    


    // 添加自动滚动动画效果 - 客户信息列表


    const contractList = refContractList.value


    if (contractList && contractList.scrollHeight > contractList.clientHeight) {


      // 创建一个克隆项，用于实现无缝滚动


      const scrollItems = Array.from(contractList.querySelectorAll('li'))


      const itemHeight = scrollItems[0]?.offsetHeight || 0


      const containerHeight = contractList.clientHeight


      const cloneCount = Math.ceil(containerHeight / itemHeight) + 2


      


      // 克隆前几个项目并添加到列表末尾，实现无缝滚动


      for (let i = 0; i < cloneCount; i++) {


        const clone = scrollItems[i % scrollItems.length].cloneNode(true)


        contractList.appendChild(clone)


      }


      


      let scrollPosition = 0


      const scrollSpeed = 1.5 // 增加滚动速度，使滚动更加明显


      const pauseTime = 3000 // 滚动暂停时间


      let isPaused = false


      let lastTimestamp = 0


      


      // 连续滚动动画函数


      function scrollAnimation(timestamp) {


        if (!lastTimestamp) lastTimestamp = timestamp


        const deltaTime = timestamp - lastTimestamp


        lastTimestamp = timestamp


        


        if (!isPaused) {


          scrollPosition += scrollSpeed * (deltaTime / 16) // 标准化为60fps的速度


          


          // 当滚动超过原始内容长度时，重置位置实现无缝滚动


          if (scrollPosition >= contractList.scrollHeight - containerHeight - cloneCount * itemHeight) {


            scrollPosition = 0


            contractList.scrollTop = 0


          } else {


            contractList.scrollTop = scrollPosition


          }


        }


        


        timerScroll.value = requestAnimationFrame(scrollAnimation)


      }


      


      // 启动滚动动画


      timerScroll.value = requestAnimationFrame(scrollAnimation)


      


      // 设置滚动-暂停-滚动的循环效果


      const pauseTimer = setInterval(() => {


        isPaused = !isPaused


      }, pauseTime)


      


      // 清理定时器


      contractList._pauseTimer = pauseTimer


    }


    


    // 待办事项列表滚动功能已移至todoInfoS函数中，在获取数据后初始化


  })


  




  window.addEventListener('resize', handleResize)


  window.addEventListener('fullscreenchange', handleFullscreenChange)


  window.addEventListener('webkitfullscreenchange', handleFullscreenChange)


  window.addEventListener('MSFullscreenChange', handleFullscreenChange)


  analysisCustomer()


  workInProcessTurnoverInfo()


  qualityStatisticsInfo()


   // accountStatisticsInfo()


   progressStatisticsInfo()


  getNum()


  getLedgerNum()


  todoInfoS()


   statisticsReceivable()


   getAmountHalfYearNum()


  


  // 设置自动轮换周、月、季度的定时器，每10秒切换一次


  autoSwitchTimer.value = setInterval(() => {


    // 循环切换：1(周) -> 2(月) -> 3(季度) -> 1(周)


    radio1.value = radio1.value === 3 ? 1 : radio1.value + 1


    statisticsReceivable()


  }, 10000) // 10秒切换一次


})




onBeforeUnmount(() => {


  if (timer.value) {


    clearInterval(timer.value)


  }


  if (timerScroll.value) {


    cancelAnimationFrame(timerScroll.value)


  }


  // 清理滚动列表的暂停定时器


  const contractList = refContractList.value


  if (contractList && contractList._pauseTimer) {


    clearInterval(contractList._pauseTimer)


  }


  


  // 清理待办事项列表的动画和定时器


  const todoList = refTodoList.value


  if (todoList) {


    if (todoList._animationFrame) {


      cancelAnimationFrame(todoList._animationFrame)


      todoList._animationFrame = null


    }


    if (todoList._pauseTimer) {


      clearInterval(todoList._pauseTimer)


      todoList._pauseTimer = null


    }


  }


  


  // 清理生产订单进度表格的动画和定时器


  const progressTable = progressTableRef.value


  if (progressTable) {


    if (progressTableScrollTimer.value) {


      cancelAnimationFrame(progressTableScrollTimer.value)


      progressTableScrollTimer.value = null


    }


    if (progressTable._pauseTimer) {


      clearInterval(progressTable._pauseTimer)


      progressTable._pauseTimer = null


    }


  }


  


  // 清理表格滚动定时器


  if (tableScrollTimeout.value) {


    clearTimeout(tableScrollTimeout.value)


    tableScrollTimeout.value = null


  }


  


  // 清理自动轮换周、月、季度的定时器


  if (autoSwitchTimer.value) {


    clearInterval(autoSwitchTimer.value)


    autoSwitchTimer.value = null


  }


  


  window.removeEventListener('resize', handleResize)


  window.removeEventListener('fullscreenchange', handleFullscreenChange)


  window.removeEventListener('webkitfullscreenchange', handleFullscreenChange)


@@ -1461,7 +156,6 @@


    window.removeEventListener('resize', window._autofitUpdateHandler)


    delete window._autofitUpdateHandler


  }


  disposeCharts()


  // 关闭autofit


  autofit.off()


})


@@ -1470,74 +164,74 @@


<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;


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: 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;


position: relative;


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;


}




/* 全屏状态的样式 - 作用于scale-container */


.scale-container:fullscreen {


   width: 100vw;


   height: 100vh;


  margin: 0;


  padding: 0;


  background-color: #000;


  z-index: 9999;


width: 100vw;


height: 100vh;


margin: 0;


padding: 0;


background-color: #000;


z-index: 9999;


}




/* Webkit浏览器前缀 */


.scale-container:-webkit-full-screen {


  width: 100vw;


  height: 100vh;


  margin: 0;


  padding: 0;


  background-color: #000;


  z-index: 9999;


width: 100vw;


height: 100vh;


margin: 0;


padding: 0;


background-color: #000;


z-index: 9999;


}




/* MS浏览器前缀 */


.scale-container:-ms-fullscreen {


  width: 100vw;


  height: 100vh;


  margin: 0;


  padding: 0;


  background-color: #000;


  z-index: 9999;


width: 100vw;


height: 100vh;


margin: 0;


padding: 0;


background-color: #000;


z-index: 9999;


}






.dashboard-header {


  position: relative;


  z-index: 1;


   height: 86px;


   background-image: url("@/assets/BI/biaoti.png");


   background-size: cover;


   background-repeat: no-repeat;


  display: flex;


  align-items: center;


  justify-content: center;


position: relative;


z-index: 1;


height: 86px;


background-image: url("@/assets/BI/biaoti.png");


background-size: cover;


background-repeat: no-repeat;


display: flex;


align-items: center;


justify-content: center;


}




.factory-name {


  font-weight: 600;


font-weight: 600;


font-size: 52px;


color: #FFFFFF;


top: 16px;


@@ -1545,492 +239,57 @@


}




.fullscreen-btn {


  position: absolute;


  top: 10px;


  left: 20px;


  width: 40px;


  height: 40px;


  background: rgba(0, 20, 60, 0.8);


  border: 1px solid rgba(0, 212, 255, 0.3);


  border-radius: 6px;


  color: #00d4ff;


  cursor: pointer;


  display: flex;


  align-items: center;


  justify-content: center;


  transition: all 0.3s;


  z-index: 10000;


position: absolute;


top: 10px;


left: 20px;


width: 40px;


height: 40px;


background: rgba(0, 20, 60, 0.8);


border: 1px solid rgba(0, 212, 255, 0.3);


border-radius: 6px;


color: #00d4ff;


cursor: pointer;


display: flex;


align-items: center;


justify-content: center;


transition: all 0.3s;


z-index: 10000;


}




.fullscreen-btn:hover {


  background: rgba(0, 30, 90, 0.9);


  border-color: rgba(0, 212, 255, 0.5);


background: rgba(0, 30, 90, 0.9);


border-color: rgba(0, 212, 255, 0.5);


}




.dashboard-content {


  position: relative;


  z-index: 1;


  display: flex;


  gap: 30px;


  padding: 0 30px;


   height: calc(100% - 86px);


  overflow: hidden;


position: relative;


z-index: 1;


display: flex;


gap: 30px;


padding: 0 30px;


height: calc(100% - 86px);


overflow: hidden;


}




/* 确保各面板能够正确显示 */


.left-panel, .center-panel, .right-panel {


  overflow: hidden;


overflow: hidden;


}




.left-panel,


.right-panel {


  flex: 1;


  display: flex;


  flex-direction: column;


  gap: 24px;


   width: 520px;


flex: 1;


display: flex;


flex-direction: column;


gap: 24px;


width: 520px;


}




.center-panel {


  flex: 1.5;


  display: flex;


  flex-direction: column;


  gap: 20px;


}


.panel-item-customers {


   border: 1px solid #1A58B0;


   padding: 18px;


   width: 100%;


   height: 540px;


}


.panel-title-second {


   height: 60px;


   display: flex;


   gap: 12px;


   margin-bottom: 20px;


   align-items: center;


}


.quality-cards {


   display: flex;


   gap: 12px;


   width: 100%;


   height: 54px;


   justify-content: space-between;


   align-items: center;


}


.quality-cardSec {


   display: flex;


}


.quality-cardTitle {


   font-weight: 400;


   font-size: 14px;


   color: #FFFFFF;


   display: flex;


   align-items: flex-start;


   flex-direction: column;


}


.quality-card {


   width: 80px;


   height: 60px;


   background-size: cover;


   background-position: center;


   background-repeat: no-repeat;


}


.quality-card.one {


   background-image: url("@/assets/BI/yuancailiaoyijianicon@2x.png");


}


.quality-card.two {


   background-image: url("@/assets/BI/guochengyijianicon@2x.png");


}


.quality-card.three {


   background-image: url("@/assets/BI/chuchangyijianicon@2x.png");


flex: 1.5;


display: flex;


flex-direction: column;


gap: 20px;


}




/* 订单统计卡片样式 */


.order-statistics-cards {


   display: flex;


   gap: 12px;


   width: 100%;


   height: 94px;


   justify-content: space-between;


   align-items: center;


   margin-bottom: 20px;


}




.quality-card.four {


   background-image: url("@/assets/BI/yuancailiaoyijianicon@2x.png");


}




.quality-card.five {


   background-image: url("@/assets/BI/guochengyijianicon@2x.png");


}




.quality-card.six {


   background-image: url("@/assets/BI/chuchangyijianicon@2x.png");


}




.quality-card.seven {


   background-image: url("@/assets/BI/yuancailiaoyijianicon@2x.png");


}


.panel-title-icon {


   width: 60px;


   height: 60px;


   background-image: url("@/assets/BI/hetongicon.png");


   background-size: cover;


   background-position: center;


   background-repeat: no-repeat;


}




.panel-header {


   background-image: url("@/assets/BI/kehuhetongback@2x.png");


   background-size: 100% 100%;


   background-position: center;


   background-repeat: no-repeat;


}




.panel-title {


   width: 100%;


   font-weight: 500;


   font-size: 16px;


   color: #D9ECFF;


   padding-left: 46px;


   line-height: 36px;


}


.total-customers {


   background-image: url("@/assets/BI/hetongjineback@2x.png");


   background-size: cover;


   background-position: center;


   background-repeat: no-repeat;


   width: 90%;


   height: 60px;


   display: flex;


   align-items: center;


   padding: 0 20px;


   gap: 20px;


}




.total-customers .label {


   font-weight: 500;


   font-size: 16px;


   color: #FFFFFF;


}




.total-customers .value {


   font-weight: 500;


   font-size: 40px;


   background: linear-gradient(360deg, #008BFD 0%, #FFFFFF 100%);


   -webkit-background-clip: text;


   -webkit-text-fill-color: transparent;


   background-clip: text;


}




.contract-list {


   margin-top: 16px;


   font-size: 14px;


   color: #666;


   list-style: none;


   padding: 0;


   height: 82%;


   overflow-y: auto;


   width: 460px;


   /* 隐藏滚动条但保留滚动功能 */


   scrollbar-width: none; /* Firefox */


   -ms-overflow-style: none; /* IE和Edge */


}




/* Chrome、Safari和Opera */


.contract-list::-webkit-scrollbar {


   display: none;


}


.line {


   position: relative;


   width: 230px;


}


.line::after {


   content: '';


   position: absolute;


   right: 2px;


   top: 0;


   bottom: 0;


   width: 1px;


   background-color: #C9C5C5;


   border-radius: 2px;


}


.contract-list li {


   margin-top: 10px;


}


.stats-cards {


  display: flex;


  gap: 30px;


}




.stat-card {


  flex: 1;


  display: flex;


  align-items: center;


   background-image: url("@/assets/BI/border@2x.png");


   background-size: 100% 100%;


   background-position: center;


   background-repeat: no-repeat;


  height: 142px;


}




.card-icon {


  width: 100px;


  height: 100px;


  margin: 20px 20px 0 10px;


}




.card-content {


  display: flex;


  flex-direction: column;


   gap: 10px;


}




.card-value {


   font-weight: 500;


   font-size: 40px;


  background: linear-gradient(360deg, #008BFD 0%, #FFFFFF 100%);


  -webkit-background-clip: text;


  -webkit-text-fill-color: transparent;


  background-clip: text;


}




.card-label {


   font-weight: 400;


   font-size: 19px;


   color: rgba(208,231,255,0.7);


}




.equipment-stats {


   border: 1px solid #1A58B0;


  padding: 18px;


  height: 240px;


}


.equipment-header {


   font-weight: 500;


   font-size: 21px;


   display: flex;


   border-bottom: 1px solid;


   border-image: linear-gradient( 270deg, rgba(0,126,255,0) 0%, rgba(0,126,255,0.4549) 35%, #007EFF 78%, #007EFF 100%) 1;


   padding-bottom: 2px;


}


.equipment-title {


   font-weight: 500;


   font-size: 21px;


   background: linear-gradient(360deg, #056DFF 0%, #43E8FC 100%);


   -webkit-background-clip: text;


   -webkit-text-fill-color: transparent;


   background-clip: text;


   line-height: 50px;


}


.equipment-icon {


   width: 50px;


   height: 50px;


}


.equipment-items {


  display: flex;


  justify-content: space-around;


  gap: 30px;


}




.equipment-item {


  text-align: center;


}




.equipment-value {


  display: block;


   font-weight: 500;


   font-size: 40px;


   color: #FFFFFF;


   width: 120px;


   height: 110px;


   line-height: 110px;


   background-image: url("@/assets/BI/shujutongji@2x.png");


   background-size: 100% 100%;


   background-position: center;


   background-repeat: no-repeat;


  margin-bottom: 8px;


}




.equipment-label {


   font-weight: 500;


   font-size: 21px;


   color: #FFFFFE;


}




.event-info {


   background-image: url("@/assets/BI/shijianmingchengbeijing@2x.png");


   background-size: 100% 100%;


   background-position: center;


   background-repeat: no-repeat;


  padding: 20px;


  height: 186px;


}


.event-header {


   display: flex;


   align-items: center;


}


.event-icon {


   width: 40px;


   height: 40px;


}


.event-title {


   font-weight: 500;


   font-size: 24px;


   color: #FFFFFE;


   line-height: 30px;


}


.todo-list {


  list-style: none;


  padding: 0;


  margin: 0;


  height: 120px; /* 按用户要求调整高度 */


  overflow: hidden;


  font-size: 15px;


}


.todo-list li {


   border-radius: 8px;


   margin-bottom: 12px;


   padding: 12px 40px;


   height: 74px;


   display: flex;


   justify-content: space-between;


   align-items: center;


}


.todo-title {


   font-weight: 400;


   font-size: 20px;


   color: #FFFFFE;


   position: relative;


}


.todo-title::before {


   content: ''; /* 必需，表示这里有一个内容 */


   position: absolute;


   left: -10px; /* 定位到左侧 */


   top: 50%; /* 垂直居中 */


   transform: translateY(-50%); /* 微调垂直居中 */


   width: 6px; /* 圆的直径 */


   height: 6px; /* 圆的直径 */


   background: #498CEB;


   border-radius: 50%; /* 让其变成圆形 */


}


.todo-division {


   font-weight: 400;


   font-size: 20px;


   color: #FFFFFE;


}


.todo-time {


   font-weight: 400;


   font-size: 20px;


   color: #FFFFFE;


}


.financial-header {


   background-image: url("@/assets/BI/caiwufenxiback@2x.png");


   background-size: 100% 100%;


   background-position: center;


   background-repeat: no-repeat;


}


.financial-title {


   width: 100%;


   font-weight: 500;


   font-size: 16px;


   color: #D9ECFF;


   padding-left: 46px;


   line-height: 36px;


}




/* 自定义单选按钮组样式 */


.custom-radio-group :deep(.el-radio-button__inner) {


  background-color: transparent;


  color: white;


  border-color: rgba(255, 255, 255, 0.3);


}




.custom-radio-group :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {


  background-color: rgba(255, 255, 255, 0.2);


  color: white;


  border-color: rgba(255, 255, 255, 0.5);


  box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.5);


}




/* 生产订单进度表格样式 */


.progress-table-container {


  height: 200px;


  overflow-y: auto;


  overflow-x: hidden;


  margin-top: 10px;


  scrollbar-width: none; /* Firefox */


  -ms-overflow-style: none; /* IE和Edge */


}




.progress-table-container::-webkit-scrollbar {


  display: none; /* Chrome、Safari和Opera */


}




.progress-table {


  width: 100%;


  border-collapse: collapse;


  color: #B8C8E0;


  font-size: 12px;


  table-layout: fixed;


}




.progress-table thead {


  position: sticky;


  top: 0;


  background-color: rgba(26, 88, 176, 0.9);


  z-index: 10;


}




.progress-table th {


  padding: 8px 6px;


  text-align: left;


  font-weight: 500;


  border-bottom: 1px solid rgba(184, 200, 224, 0.3);


  color: #B8C8E0;


  font-size: 12px;


  white-space: nowrap;


  overflow: hidden;


  text-overflow: ellipsis;


}




.progress-table th:nth-child(1) { width: 15%; } /* 生产订单号 */


.progress-table th:nth-child(2) { width: 15%; } /* 产品名称 */


.progress-table th:nth-child(3) { width: 15%; } /* 规格 */


.progress-table th:nth-child(4) { width: 12%; } /* 需求数量 */


.progress-table th:nth-child(5) { width: 12%; } /* 完成数量 */


.progress-table th:nth-child(6) { width: 31%; } /* 完成进度 */




.progress-table td {


  padding: 8px 6px;


  border-bottom: 1px solid rgba(184, 200, 224, 0.1);


  white-space: nowrap;


  overflow: hidden;


  text-overflow: ellipsis;


  font-size: 12px;


  transition: opacity 0.3s ease;


}




.progress-table tbody tr:hover {


  background-color: rgba(184, 200, 224, 0.1);


}




.progress-table tbody tr.row-under-header {


  opacity: 0.5;


}




/* el-progress 组件样式调整 */


.progress-table :deep(.el-progress) {


  width: 100%;


}




.progress-table :deep(.el-progress-bar__outer) {


  background-color: rgba(184, 200, 224, 0.2);


}




.progress-table :deep(.el-progress__text) {


  color: #B8C8E0;


  font-size: 11px;


}


</style>