| | |
| | | |
| | | <!-- 顶部标题栏 --> |
| | | <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> |
| | | |
| | | <!-- 主要内容区域 --> |
| | |
| | | </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' |
| | |
| | | |
| | | // 用户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 |
| | |
| | | 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 { |