副屏

src/views/index.vue

@@ -150,4 +150,4 @@
         background: url('../assets/images/bottom-b.png') no-repeat;
         background-size: 100% 100%;
     }
-</style>
+</style>

src/views/indexSon.vue

@@ -14,8 +14,8 @@
         </div>
         <div class="body-d">
             <div class="body-d-left">
-                <template v-for="(item, index) in dataList" :key="`list${data}`">
-                    <item-d :title="item" :data="[]" />
+                <template v-for="(item, index) in dataList" :key="`list${index}`">
+                    <item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color" />
                 </template>
             </div>
             <div class="body-d-middle">
@@ -33,17 +33,59 @@
 <script setup lang="ts">
     import { RollbackOutlined } from '@ant-design/icons-vue';
     import { ref } from 'vue';
-    import OneR from '../components/body-d-right/oneR.vue';
-    import TwoR from '../components/body-d-right/twoR.vue';
-    import ThreeR from '../components/body-d-right/threeR.vue';
-    import ChinaMap from '../components/chinaMap/chinaMap.vue';
+    import OneR from '/@/components/secondaryScreen/screen-right/oneR.vue';
+    import TwoR from '/@/components/secondaryScreen/screen-right/twoR.vue';
+    import ThreeR from '/@/components/secondaryScreen/screen-right/threeR.vue';
+    import ChinaMap from '/@/components/secondaryScreen/chinaMap/chinaMap.vue';
     import * as dayjs from 'dayjs';
     import router from '/@/router';
     import ItemD from '/@/components/item-d/item-d.vue';
 
     const dayTimeO = ref();
     const dayTimeT = ref();
-    const dataList = ref(['心率', '血氧', '压力', '体温']);
+    const dataList = ref([
+        {
+            title: '心率',
+            data: [
+                { name: '正常', value: 234 },
+                { name: '警戒', value: 204 },
+                { name: '危险', value: 34 },
+            ],
+            color: ['#0098FA', '#FF6648', '#FB466C'],
+            tips: '正常范围60~100次/分',
+        },
+        {
+            title: '血氧',
+            data: [
+                { name: '正常', value: 234 },
+                { name: '警戒', value: 204 },
+                { name: '危险', value: 34 },
+            ],
+            color: ['#0098FA', '#FF6648', '#FB466C'],
+            tips: '血氧饱和度范围95%~100%',
+        },
+        {
+            title: '压力',
+            data: [
+                { name: '正常', value: 234 },
+                { name: '放松', value: 204 },
+                { name: '中等', value: 34 },
+                { name: '偏高', value: 78 },
+            ],
+            color: ['#1DCC79', '#0098FA', '#0CD9B5', '#6C63F0'],
+            tips: '',
+        },
+        {
+            title: '体温',
+            data: [
+                { name: '37.2', value: 234 },
+                { name: '37.2-38', value: 204 },
+                { name: '>38', value: 34 },
+            ],
+            color: ['#0098FA', '#0CD9B5', '#3B72AD'],
+            tips: '',
+        },
+    ]);
 
     function init() {
         getTime();
@@ -146,12 +188,25 @@
         }
 
         .body-d-right {
-            > :nth-child(n) {
+            > :nth-child(1) {
                 width: 100%;
-                height: calc(100% / 3);
+                height: calc(100% / 4);
+                padding: 10px;
+            }
+
+            > :nth-child(2) {
+                width: 100%;
+                height: calc(100% / 4);
+                padding: 10px;
+            }
+
+            > :nth-child(3) {
+                width: 100%;
+                height: calc(100% / 2);
                 padding: 10px;
             }
         }
+
         .body-d-left {
             > :nth-child(n) {
                 width: 100%;