天津_意博凯信 1.备件管理-新增独立备件出库功能入口，支持直接完成备件领用出库操作。 2.设备保养-支持按日期分组折叠展示，分组条目可展开查看明细；...

gaoluyang

2026-08-07 73d112ddc9bdfeb7eaaf3b7308cfb4dbeb470c89

 src/views/reportAnalysis/PSIDataAnalysis/index.vue

@@ -13,7 +13,22 @@

    <!-- 顶部标题栏 -->
    <div class="dashboard-header">
            <div class="header-left"></div>
      <div class="factory-name">PSI 数据分析</div>
            <div class="header-right">
               <div class="date-picker-wrapper">
                  <el-date-picker
                     v-model="psiDateRange"
                     type="daterange"
                     range-separator="至"
                     start-placeholder="开始日期"
                     end-placeholder="结束日期"
                     value-format="YYYY-MM-DD"
                     :shortcuts="dateShortcuts"
                     @change="onDateRangeChange"
                  />
               </div>
            </div>
    </div>

    <!-- 主要内容区域 -->
@@ -43,8 +58,9 @@
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, provide } from 'vue'
import { ref, onMounted, onBeforeUnmount, nextTick, provide, reactive } from 'vue'
import autofit from 'autofit.js'
import dayjs from 'dayjs'
import LeftBottom from './components/left-bottom.vue'
import CenterCenter from './components/center-center.vue'
import RightTop from '../dataDashboard/components/basic/right-top.vue'
@@ -65,6 +81,27 @@

// 用户store
const userStore = useUserStore()

// 日期范围筛选
const psiDateRange = ref([])
const psiDateRangeParams = ref({})
const dateShortcuts = [
   { text: '本月', value: () => { const start = dayjs().startOf('month').format('YYYY-MM-DD'); const end = dayjs().format('YYYY-MM-DD'); return [start, end] } },
   { text: '近7天', value: () => { const start = dayjs().subtract(6, 'day').format('YYYY-MM-DD'); const end = dayjs().format('YYYY-MM-DD'); return [start, end] } },
   { text: '近30天', value: () => { const start = dayjs().subtract(29, 'day').format('YYYY-MM-DD'); const end = dayjs().format('YYYY-MM-DD'); return [start, end] } },
   { text: '近90天', value: () => { const start = dayjs().subtract(89, 'day').format('YYYY-MM-DD'); const end = dayjs().format('YYYY-MM-DD'); return [start, end] } },
]

const onDateRangeChange = (val) => {
   if (val && val.length === 2) {
      psiDateRangeParams.value = { startDate: val[0], endDate: val[1] }
   } else {
      psiDateRangeParams.value = {}
   }
   dataDashboardRefreshTick.value++
}

provide('psiDateRange', psiDateRangeParams)

/** 与 dataDashboard 共用注入名，子组件（含复用的 right-top/right-bottom）每分钟刷新 */
const DASHBOARD_REFRESH_MS = 60 * 1000
@@ -237,15 +274,36 @@
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
   justify-content: space-between;
}

.header-left {
   width: 300px;
   padding-left: 20px;
   display: flex;
   align-items: center;
}

.header-right {
   width: 300px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding-right: 20px;
}

.date-picker-wrapper {
   /* 日期选择器在大屏上的样式 */
   --el-fill-color-blank: rgba(0, 20, 60, 0.8);
   --el-border-color: rgba(0, 212, 255, 0.3);
   --el-text-color-regular: #00d4ff;
   --el-color-primary: #00d4ff;
}

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

.fullscreen-btn {