调整瑞鹰看板

src/views/pms/stat/rykb.vue

@@ -14,6 +14,12 @@ defineOptions({
 })
 
 const company = ref('瑞鹰')
+const activePage = ref<'home' | 'production'>('home')
+
+const pageTabs = [
+  { label: '看板首页', value: 'home' },
+  { label: '生产日报', value: 'production' }
+] as const
 
 const wrapperRef = ref<HTMLDivElement>()
 const scale = ref(1)
@@ -62,6 +68,12 @@ onMounted(() => {
   window.addEventListener('resize', updateScale)
 })
 
+watch(activePage, () => {
+  nextTick(() => {
+    window.dispatchEvent(new Event('rykb:resize'))
+  })
+})
+
 onUnmounted(() => {
   resizeObserver?.disconnect()
   window.removeEventListener('resize', updateScale)
@@ -75,16 +87,35 @@ onUnmounted(() => {
       <div class="bg kb-screen" :style="targetAreaStyle">
         <header class="header">{{ company }}</header>
         <div class="kb-content">
-          <rysummary class="kb-stage-card kb-stage-card--1" />
-          <div class="kb-chart-grid">
-            <rydeviceStatus class="kb-stage-card kb-stage-card--2" />
-            <rydeviceType class="kb-stage-card kb-stage-card--6" />
-            <rydeviceList class="kb-stage-card kb-stage-card--4 kb-stage-card--list" />
-            <safeday class="kb-stage-card kb-stage-card--3" />
-            <zjStatsSwitch class="kb-stage-card kb-stage-card--5" />
-            <xjwork class="kb-stage-card kb-stage-card--7" />
+          <div class="page-tabs">
+            <button
+              v-for="tab in pageTabs"
+              :key="tab.value"
+              type="button"
+              class="page-tab"
+              :class="{ 'is-active': activePage === tab.value }"
+              @click="activePage = tab.value">
+              {{ tab.label }}
+            </button>
+          </div>
+
+          <div v-if="activePage === 'home'" class="kb-home-page">
+            <rysummary class="kb-stage-card kb-stage-card--1" />
+            <div class="kb-chart-grid">
+              <rydeviceStatus class="kb-stage-card kb-stage-card--2" />
+              <rydeviceType class="kb-stage-card kb-stage-card--6" />
+              <rydeviceList class="kb-stage-card kb-stage-card--4 kb-stage-card--list" />
+              <safeday class="kb-stage-card kb-stage-card--3" />
+              <zjStatsSwitch class="kb-stage-card kb-stage-card--5" />
+              <xjwork class="kb-stage-card kb-stage-card--7" />
+            </div>
+          </div>
+
+          <div v-else class="kb-production-page">
+            <ryProductionBriefs
+              class="kb-stage-card kb-stage-card--8 kb-stage-card--list"
+              page-mode="full" />
           </div>
-          <ryProductionBriefs class="kb-stage-card kb-stage-card--8 kb-stage-card--list" />
         </div>
       </div>
     </div>
@@ -99,16 +130,76 @@ onUnmounted(() => {
 }
 
 .kb-content {
-  padding: calc(12px * var(--kb-scale)) calc(20px * var(--kb-scale)) 0;
+  position: relative;
+  height: calc(100% - 52px * var(--kb-scale));
+  padding: calc(44px * var(--kb-scale)) calc(20px * var(--kb-scale))
+    calc(20px * var(--kb-scale));
+}
+
+.page-tabs {
+  position: absolute;
+  top: calc(10px * var(--kb-scale));
+  left: calc(20px * var(--kb-scale));
+  z-index: 3;
+  display: flex;
+  width: fit-content;
+  gap: calc(12px * var(--kb-scale));
+}
+
+.page-tab {
+  min-width: calc(82px * var(--kb-scale));
+  height: calc(28px * var(--kb-scale));
+  padding: 0 calc(14px * var(--kb-scale));
+  font-family: YouSheBiaoTiHei, sans-serif;
+  font-size: calc(15px * var(--kb-scale));
+  line-height: calc(28px * var(--kb-scale));
+  color: #f5f9ff;
+  cursor: pointer;
+  background: linear-gradient(180deg, #83bcff 0%, #2f7ee9 58%, #1762d6 100%);
+  border: 1px solid rgb(255 255 255 / 55%);
+  border-radius: calc(5px * var(--kb-scale));
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 58%),
+    0 calc(4px * var(--kb-scale)) calc(8px * var(--kb-scale)) rgb(30 89 179 / 22%);
+  transition:
+    transform 0.2s ease,
+    filter 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.page-tab:hover,
+.page-tab.is-active {
+  filter: brightness(1.08);
+  transform: translateY(calc(-1px * var(--kb-scale)));
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 72%),
+    0 calc(5px * var(--kb-scale)) calc(10px * var(--kb-scale)) rgb(30 89 179 / 28%);
+}
+
+.page-tab.is-active {
+  background: linear-gradient(180deg, #4d9cff 0%, #1f6ee7 56%, #0e4fc4 100%);
+}
+
+.kb-home-page {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
 }
 
 .kb-chart-grid {
   display: grid;
   width: 100%;
-  height: calc(592px * var(--kb-scale));
+  min-height: 0;
+  flex: 1;
   margin-top: calc(12px * var(--kb-scale));
   gap: calc(12px * var(--kb-scale));
   grid-template-rows: repeat(2, minmax(0, 1fr));
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
+
+.kb-production-page {
+  height: 100%;
+  min-height: 0;
+}
 </style>

src/views/pms/stat/rykb/ryProductionBriefs.vue

@@ -31,11 +31,22 @@ const MERGE_COLUMN_INDEXES = [0, 1]
 const COMPANY_ORDER = ['钻井', '修井']
 const DEFAULT_DATE = dayjs().format('YYYY-MM-DD')
 
+const props = withDefaults(
+  defineProps<{
+    pageMode?: 'compact' | 'full'
+  }>(),
+  {
+    pageMode: 'compact'
+  }
+)
+
 const selectedDate = ref(DEFAULT_DATE)
 const loading = ref(false)
 const list = ref<RyProductionBriefRow[]>([])
 const kbScale = inject<Ref<number>>('ryKbScale', ref(1))
-const tableHeight = computed(() => Math.round(TABLE_HEIGHT * kbScale.value))
+const tableHeight = computed<number | string>(() =>
+  props.pageMode === 'full' ? '100%' : Math.round(TABLE_HEIGHT * kbScale.value)
+)
 
 const tableData = computed(() => {
   return [...list.value].sort((a, b) => {
@@ -166,7 +177,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="panel device-list-panel w-full flex flex-col">
+  <div
+    class="panel device-list-panel production-brief-panel w-full flex flex-col"
+    :class="{ 'production-brief-panel--full': props.pageMode === 'full' }">
     <div class="panel-title flex items-center justify-between">
       <div class="kb-panel-title-text flex items-center">
         <div class="icon-decorator">
@@ -192,7 +205,8 @@ onMounted(() => {
         :data="tableData"
         :height="tableHeight"
         :span-method="tableSpanMethod"
-        class="device-list-table production-brief-table">
+        class="device-list-table production-brief-table"
+        :class="{ 'production-brief-table--full': props.pageMode === 'full' }">
         <el-table-column prop="projectClassification" label="公司" min-width="72" align="center" />
         <el-table-column prop="projectName" label="项目" min-width="150" align="center" />
         <el-table-column prop="deptName" label="队伍" min-width="94" align="center" />
@@ -244,6 +258,11 @@ onMounted(() => {
 <style lang="scss" scoped>
 @import url('@/styles/kb.scss');
 
+.device-list-panel.production-brief-panel--full {
+  height: 100%;
+  margin-top: 0;
+}
+
 .production-brief-panel__picker {
   display: flex;
   width: calc(120px * var(--kb-scale, 1));
@@ -269,6 +288,8 @@ onMounted(() => {
 }
 
 .production-brief-table {
+  width: 100%;
+
   :deep(.el-table__header-wrapper th.el-table__cell) {
     font-size: calc(16px * var(--kb-scale, 1));
     line-height: 1.2;
@@ -279,4 +300,19 @@ onMounted(() => {
     font-size: calc(14px * var(--kb-scale, 1));
   }
 }
+
+.production-brief-table--full {
+  :deep(.el-scrollbar__view) {
+    display: block;
+    height: 100%;
+  }
+
+  :deep(.el-table__body) {
+    height: 100%;
+  }
+
+  :deep(.el-table__body tbody) {
+    height: 100%;
+  }
+}
 </style>