zhang_nuo
8 天以前 d420578cb8bc076be2f0c7dd5a4dbfca335d7cdb
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 } 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,33 @@
// 用户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
const dataDashboardRefreshTick = ref(0)
provide('dataDashboardRefreshTick', dataDashboardRefreshTick)
let dashboardPollTimer = null
// 计算缩放比例
const calculateScale = () => {
@@ -140,9 +183,17 @@
  window.addEventListener('fullscreenchange', handleFullscreenChange)
  window.addEventListener('webkitfullscreenchange', handleFullscreenChange)
  window.addEventListener('MSFullscreenChange', handleFullscreenChange)
  dashboardPollTimer = setInterval(() => {
    dataDashboardRefreshTick.value++
  }, DASHBOARD_REFRESH_MS)
})
onBeforeUnmount(() => {
  if (dashboardPollTimer) {
    clearInterval(dashboardPollTimer)
    dashboardPollTimer = null
  }
  window.removeEventListener('resize', handleResize)
  window.removeEventListener('fullscreenchange', handleFullscreenChange)
  window.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
@@ -223,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 {