add 模拟界面

src/views/bio/dashboard/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="bio-dashboard-container">
+    <h1 class="page-title">{{ pageTitle }}</h1>
+    <el-card class="content-card" shadow="hover">
+      <template #header>
+        <div class="card-header">
+          <span>模拟节目详情</span>
+        </div>
+      </template>
+      <div class="program-content">
+        <p>这里是模拟节目的主要内容区域。</p>
+        <p>
+          您可以根据需要在此处填充各种图表、数据展示、控制面板等。
+        </p>
+        <el-row :gutter="20" class="data-section">
+          <el-col :span="8">
+            <el-statistic title="今日产量" :value="generateRandomNumber(1000, 5000)" />
+          </el-col>
+          <el-col :span="8">
+            <el-statistic title="合格率" :value="generateRandomNumber(90, 99)">
+              <template #suffix>%</template>
+            </el-statistic>
+          </el-col>
+          <el-col :span="8">
+            <el-statistic title="活跃设备" :value="generateRandomNumber(10, 50)" />
+          </el-col>
+        </el-row>
+        <div class="mock-chart">
+          <p>（此处可以放置一个模拟图表）</p>
+          <el-progress :percentage="generateRandomNumber(20, 80)" :stroke-width="15" striped striped-flow :duration="10"/>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts" name="BioDashboard">
+import { ref } from 'vue';
+
+const pageTitle = ref('生物自动化生产控制台');
+
+const generateRandomNumber = (min: number, max: number) => {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+</script>
+
+<style scoped lang="scss">
+.bio-dashboard-container {
+  padding: 20px;
+  background-color: #f0f2f5;
+  min-height: calc(100vh - 50px); // 减去顶部导航栏的高度
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #303133;
+  margin-bottom: 20px;
+}
+
+.content-card {
+  .card-header {
+    font-size: 18px;
+    font-weight: 500;
+  }
+
+  .program-content {
+    font-size: 14px;
+    line-height: 1.6;
+    color: #606266;
+
+    p {
+      margin-bottom: 15px;
+    }
+  }
+
+  .data-section {
+    margin-top: 30px;
+    margin-bottom: 30px;
+  }
+
+  .mock-chart {
+    margin-top: 20px;
+    padding: 20px;
+    border: 1px dashed #dcdfe6;
+    border-radius: 4px;
+    text-align: center;
+    color: #909399;
+  }
+}
+</style>