update

1.修改大屏副屏结构

src/App.vue

@@ -1,9 +1,6 @@
-<script setup lang="ts">
-    import index from './views/index.vue';
-</script>
-
 <template>
-    <index />
+    <router-view />
 </template>
+<script setup lang="ts"></script>
 <style lang="less" src="./assets/less/index.less"></style>
 <style lang="less" scoped></style>

src/components/item-d/item-d.vue

@@ -0,0 +1,62 @@
+<template>
+    <div>
+        <public-title :title="props.title" />
+        <div class="inner" ref="healthChart"></div>
+    </div>
+</template>
+<script setup lang="ts">
+    import PublicTitle from '/@/components/publicTitle.vue';
+    import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
+    import { ringOption, useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
+    import { onMounted, ref, unref, watch } from 'vue';
+    import * as echarts from 'echarts';
+    const props = defineProps({
+        title: {
+            type: String,
+            default: () => '',
+        },
+        data: {
+            type: Array,
+            default: () => [],
+        },
+    });
+    const healthChart = ref<HTMLElement>();
+
+    const { setSpin, spinning } = useSpin();
+
+    onMounted(() => {
+        init();
+    });
+
+    watch(
+        () => props.data,
+        () => {
+            init();
+        }
+    );
+
+    const { healthData, getValue, setHealth } = useHealth();
+
+    async function init() {
+        setHealth(props.data);
+        const yData = unref(getValue);
+        let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
+        initChart(unref(healthData), total);
+    }
+
+    function initChart(chartData, total) {
+        let myChart = echarts.init(healthChart.value);
+        let options = ringOption(chartData, total);
+        myChart.setOption(options);
+        window.addEventListener('resize', () => {
+            myChart.resize();
+        });
+    }
+</script>
+<style scoped lang="less">
+    .inner {
+        width: 90%;
+        margin: 0 auto;
+        height: calc(100% - 40px);
+    }
+</style>

src/main.ts

@@ -1,7 +1,7 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import './assets/less/index.less';
-
+import router from './router';
 import('ant-design-vue/dist/antd.less');
 import registerGlobComp from './assets/ts/antd.ts';
 import directiveMethods from './assets/ts/directive';
@@ -11,4 +11,4 @@ const app = createApp(App);
 directiveMethods(app);
 // 注册组件
 registerGlobComp(app);
-app.mount('#app');
+app.use(router).mount('#app');

src/router/index.ts

@@ -0,0 +1,21 @@
+import { createRouter, createWebHistory, Router, RouteRecordRaw } from 'vue-router';
+
+const routes: Array<RouteRecordRaw> = [
+    {
+        path: '/',
+        name: '首页',
+        component: () => import('/@/views/index.vue'),
+        // component: () => import('/@/views/mobile/index.vue'),
+    },
+    {
+        path: '/indexSon',
+        name: '副屏',
+        component: () => import('/@/views/indexSon.vue'),
+    },
+];
+
+const router: Router = createRouter({
+    history: createWebHistory('/'),
+    routes: [...routes],
+});
+export default router;

src/views/indexSon.vue

@@ -0,0 +1,174 @@
+<template>
+    <div class="outer">
+        <div class="title-d">
+            <div class="title-d-left">
+                <span style="cursor: pointer" @click="clickBack">
+                    <a-space>
+                        <rollback-outlined />
+                    </a-space>
+                    返回
+                </span>
+            </div>
+            <div class="title-d-middle"> 应急就医服务中心</div>
+            <div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
+        </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>
+            </div>
+            <div class="body-d-middle">
+                <china-map />
+            </div>
+            <div class="body-d-right">
+                <one-r />
+                <two-r />
+                <three-r />
+            </div>
+        </div>
+        <div class="bottom-d"></div>
+    </div>
+</template>
+<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 * 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(['心率', '血氧', '压力', '体温']);
+
+    function init() {
+        getTime();
+        setInterval(() => {
+            getTime();
+        }, 1000);
+    }
+
+    function getTime() {
+        dayTimeO.value = dayjs().format('YYYY年MM月DD日 HH时mm分ss秒');
+        dayTimeT.value =
+            dayjs().diff(dayjs('2018-10-01'), 'day') +
+            '天' +
+            getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD') + ' 00:00:00'), 'hours')) +
+            '时' +
+            getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD HH') + ':00:00'), 'minutes')) +
+            '分' +
+            getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD HH:mm') + ':00'), 'seconds')) +
+            '秒';
+    }
+
+    function getZero(num: any) {
+        if (num < 10) {
+            return '0' + num;
+        }
+        return num;
+    }
+
+    function clickBack() {
+        router.go(-1);
+    }
+
+    init();
+</script>
+<style lang="less" scoped>
+    .outer {
+        height: 100%;
+        box-sizing: border-box;
+        background: url('../assets/images/bg.png') no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .title-d {
+        height: 80px;
+        line-height: 80px;
+        display: flex;
+        padding-bottom: 9px;
+        background: url('../assets/images/top-title.png') no-repeat;
+        background-size: 100% 100%;
+
+        .title-d-left,
+        .title-d-middle,
+        .title-d-right {
+            font-size: 27px;
+            color: #ffffff;
+            line-height: 60px;
+            text-align: center;
+        }
+
+        .title-d-left {
+            text-align: left !important;
+            padding-left: 80px;
+        }
+
+        > :nth-child(1) {
+            width: 29%;
+        }
+
+        > :nth-child(2) {
+            width: 42%;
+            font-size: 40px;
+            font-weight: bold;
+        }
+
+        > :nth-child(3) {
+            width: 29%;
+        }
+    }
+
+    .body-d {
+        display: flex;
+        height: calc(100% - 120px);
+        padding-top: 10px;
+
+        > :nth-child(1) {
+            width: 25%;
+        }
+
+        > :nth-child(2) {
+            width: 50%;
+        }
+
+        > :nth-child(3) {
+            width: 25%;
+        }
+
+        .body-d-left,
+        .body-d-right {
+            text-align: center;
+        }
+
+        .body-d-right {
+            > :nth-child(n) {
+                width: 100%;
+                height: calc(100% / 3);
+                padding: 10px;
+            }
+        }
+        .body-d-left {
+            > :nth-child(n) {
+                width: 100%;
+                height: calc(100% / 4);
+                padding: 10px;
+            }
+        }
+
+        .body-d-middle {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+
+    .bottom-d {
+        height: 40px;
+        background: url('../assets/images/bottom-b.png') no-repeat;
+        background-size: 100% 100%;
+    }
+</style>