组件调整

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

@@ -13,7 +13,7 @@
 import {useSpin} from '/@/components/body-d-left/bodyLeftHooks.ts';
 import {useHealth} from '/@/components/body-d-right/bodyRightHooks.ts';
 import {screenPie} from '/@/components/item-d/pieCharts.ts';
-    import { onMounted, ref, unref, watch } from 'vue';
+import {onMounted, ref, unref, watch, defineProps} from 'vue';
 import * as echarts from 'echarts';
 
 const props = defineProps({
@@ -60,7 +60,7 @@
 
 function initChart(chartData, total, color) {
   let myChart = echarts.init(healthChart.value);
-        let options = screenPie(chartData, total, color);
+  let options = screenPie(chartData, total, color, '{d}%');
   myChart.setOption(options);
   window.addEventListener('resize', () => {
     myChart.resize();

src/components/item-d/pieCharts.ts

@@ -1,4 +1,4 @@
-export function screenPie(chartData, total, color) {
+export function screenPie(chartData, total, color, formatter) {
     return {
         title: {
             text: '总人数',
@@ -31,7 +31,7 @@ export function screenPie(chartData, total, color) {
             top: 'center',
             orient: 'vertical',
             icon: 'circle',
-            itemGap: 26,
+            itemGap: 16,
             textStyle: {
                 color: '#ffffff',
                 fontSize: 16,
@@ -46,7 +46,7 @@ export function screenPie(chartData, total, color) {
                 label: {
                     show: true,
                     position: 'inner',
-                    formatter: '{d}%',
+                    formatter: formatter,
                     color: '#ffffff',
                     fontSize: 14,
                 },

src/components/secondaryScreen/screen-left/PieCharts.vue

@@ -0,0 +1,58 @@
+<template>
+  <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>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue';
+import ItemD from '/@/components/item-d/item-d.vue';
+
+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: '',
+  },
+]);
+</script>
+
+<style scoped>
+
+</style>

src/components/secondaryScreen/screen-right/screenRightHooks.ts

@@ -6,7 +6,7 @@ export function sleepCharts() {
             top: '15%',
             left: '8%',
             right: '3%',
-            bottom: '18%',
+            bottom: '20%',
         },
         legend: {
             data: ['清醒', '浅睡', '深睡'],
@@ -68,7 +68,7 @@ export function useHealth() {
     const healthData = ref([
         {
             name: '5000以下',
-            value: '0',
+            value: '23',
             type: '1',
             type_dictText: '恶性肿瘤',
         },

src/components/secondaryScreen/screen-right/threeR.vue

@@ -9,10 +9,10 @@
           :pagination="tableInfo.pagination"
           :rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
       >
-        <template #address="{text}">
+        <template #address="{text,record}">
           <div class="police-times">
-            <span class="police-text">{{ text }}</span>
+            <span class="police-text">{{ record.address }}</span>
-            <span class="police-icon"></span>
+            <span class="police-icon" @click="handlePoliceDetail(record)"></span>
           </div>
         </template>
       </a-table>
@@ -59,7 +59,6 @@ const tableInfo = ref({
     },
     {
       title: '住址',
-      dataIndex: 'address',
       key: 'address',
       align: 'center',
       slots: {customRender: 'address'}
@@ -68,9 +67,13 @@ const tableInfo = ref({
   pagination: {
     current: 1,
     pageSize: 2,
-    total: 2,
+    total: 10,
   },
 });
+
+function handlePoliceDetail(record) {
+  console.log(record)
+}
 </script>
 <style scoped lang="less">
 .inner-screen {

src/components/secondaryScreen/screen-right/twoR.vue

@@ -32,7 +32,7 @@
     setHealth(result);
     const yData = unref(getValue);
     let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
-            initChart(unref(healthData), total);
+    initChart(unref(healthData), '89');
   } catch {
     initChart(unref(healthData), 0);
   }
@@ -40,7 +40,7 @@
 
 function initChart(chartData, total) {
   let myChart = echarts.init(healthChart.value);
-        let options = screenPie(chartData, total, color.value);
+  let options = screenPie(chartData, total, color.value, '{c}');
   myChart.setOption(options);
   window.addEventListener('resize', () => {
     myChart.resize();

src/views/indexSon.vue

@@ -14,9 +14,7 @@
     </div>
     <div class="body-d">
       <div class="body-d-left">
-                <template v-for="(item, index) in dataList" :key="`list${index}`">
+        <PieCharts/>
-                    <item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color" />
-                </template>
       </div>
       <div class="body-d-middle">
         <SecondMap>
@@ -28,7 +26,8 @@
                 :options="option"
                 :fieldNames="fieldNames"
             ></a-select>
-                        <a-select placeholder="选择时间范围" v-model:value="type" class="type-select" :options="timeRangeOption"></a-select>
+            <a-select placeholder="选择时间范围" v-model:value="type" class="type-select"
+                      :options="timeRangeOption"></a-select>
           </template>
         </SecondMap>
       </div>
@@ -48,55 +47,14 @@
 import TwoR from '/@/components/secondaryScreen/screen-right/twoR.vue';
 import ThreeR from '/@/components/secondaryScreen/screen-right/threeR.vue';
 import SecondMap from '/@/components/secondaryScreen/secondMap/secondMap';
+import PieCharts from '/@/components/secondaryScreen/screen-left/PieCharts.vue'
 import router from '/@/router';
 import ItemD from '/@/components/item-d/item-d.vue';
 import {useDepart, useTimeType} from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
 import {useTopTime} from '/@/utils/utils.ts';
 
 const dayTimeT = 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();
@@ -190,12 +148,14 @@
     > :nth-child(1) {
       width: 100%;
       height: calc(100% / 4);
+      max-height: calc(100% / 4);
       padding: 10px;
     }
 
     > :nth-child(2) {
       width: 100%;
       height: calc(100% / 4);
+      max-height: calc(100% / 4);
       padding: 10px;
     }