|
|
@@ -5,16 +5,22 @@ import rhsummary from './rhkb/rhsummary.vue'
|
|
|
import deviceType from './rhkb/deviceType.vue'
|
|
|
import deviceStatus from './rhkb/deviceStatus.vue'
|
|
|
import operation from './rhkb/operation.vue'
|
|
|
-import orderTrend from './rhkb/orderTrend.vue'
|
|
|
import todayGas from './rhkb/todayGas.vue'
|
|
|
import historyGas from './rhkb/historyGas.vue'
|
|
|
import deviceList from './rhkb/deviceList.vue'
|
|
|
+import rhsafeday from './rhkb/rhsafeday.vue'
|
|
|
|
|
|
defineOptions({
|
|
|
name: 'IotRhStatt'
|
|
|
})
|
|
|
|
|
|
const company = ref('瑞恒')
|
|
|
+const activePage = ref<'home' | 'device'>('home')
|
|
|
+
|
|
|
+const pageTabs = [
|
|
|
+ { label: '运行概况', value: 'home' },
|
|
|
+ { label: '生产日报', value: 'device' }
|
|
|
+] as const
|
|
|
|
|
|
const wrapperRef = ref<HTMLDivElement>()
|
|
|
const scale = ref(1)
|
|
|
@@ -63,6 +69,12 @@ onMounted(() => {
|
|
|
window.addEventListener('resize', updateScale)
|
|
|
})
|
|
|
|
|
|
+watch(activePage, () => {
|
|
|
+ nextTick(() => {
|
|
|
+ window.dispatchEvent(new Event('rhkb:resize'))
|
|
|
+ })
|
|
|
+})
|
|
|
+
|
|
|
onUnmounted(() => {
|
|
|
resizeObserver?.disconnect()
|
|
|
window.removeEventListener('resize', updateScale)
|
|
|
@@ -76,16 +88,36 @@ onUnmounted(() => {
|
|
|
<div class="bg kb-screen" id="rhkb" :style="targetAreaStyle">
|
|
|
<header class="header">{{ company }}</header>
|
|
|
<div class="kb-content">
|
|
|
- <rhsummary class="kb-stage-card kb-stage-card--1" />
|
|
|
- <div class="kb-chart-grid">
|
|
|
- <deviceStatus class="kb-stage-card kb-stage-card--2" />
|
|
|
- <deviceType class="kb-stage-card kb-stage-card--3" />
|
|
|
- <operation class="kb-stage-card kb-stage-card--4" />
|
|
|
- <orderTrend class="kb-stage-card kb-stage-card--5" />
|
|
|
- <todayGas class="kb-stage-card kb-stage-card--6" />
|
|
|
- <historyGas 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">
|
|
|
+ <rhsummary class="kb-stage-card kb-stage-card--1" />
|
|
|
+ <div class="kb-chart-grid">
|
|
|
+ <deviceStatus class="kb-stage-card kb-stage-card--1" />
|
|
|
+ <deviceType class="kb-stage-card kb-stage-card--2" />
|
|
|
+ <operation class="kb-stage-card kb-stage-card--3" />
|
|
|
+ <rhsafeday class="kb-stage-card kb-stage-card--4" />
|
|
|
+ <!-- <orderTrend class="kb-stage-card kb-stage-card--5" /> -->
|
|
|
+ <todayGas class="kb-stage-card kb-stage-card--6" />
|
|
|
+ <historyGas class="kb-stage-card kb-stage-card--7" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-else class="kb-device-page">
|
|
|
+ <deviceList
|
|
|
+ class="kb-stage-card kb-stage-card--8 kb-stage-card--list"
|
|
|
+ page-mode="full" />
|
|
|
</div>
|
|
|
- <deviceList class="kb-stage-card kb-stage-card--8 kb-stage-card--list" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -100,16 +132,75 @@ 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 {
|
|
|
+ height: calc(28px * var(--kb-scale));
|
|
|
+ min-width: calc(82px * 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-rows: repeat(3, minmax(0, 1fr));
|
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
}
|
|
|
+
|
|
|
+.kb-device-page {
|
|
|
+ height: 100%;
|
|
|
+ min-height: 0;
|
|
|
+}
|
|
|
</style>
|