主诉分类

src/components/body-d-right/oneR.vue

@@ -1,18 +1,65 @@
 <template>
-    <div>
-        <public-title title="健康终端报警"/>
-        <div class="inner">
-
-        </div>
+  <div>
+    <public-title title="健康终端报警"/>
+    <div class="inner">
+<!--      <vue3SeamlessScroll-->
+<!--          :list="policeLists"-->
+<!--          class="scroll"-->
+<!--          :step="0.5"-->
+<!--          hover="true"-->
+<!--      >-->
+<!--        <div class="item" v-for="(item, index) in policeLists" :key="index">-->
+<!--          <span>{{ item.title }}</span>-->
+<!--          <span>{{ item.date }}</span>-->
+<!--        </div>-->
+<!--      </vue3SeamlessScroll>-->
     </div>
+  </div>
 </template>
 <script setup lang="ts">
-
+import {ref} from 'vue';
 import PublicTitle from "../publicTitle.vue";
+
+
+const policeLists = ref([
+  {
+    name:'陈天宇',
+    abnormal:'压力异常(82)',
+    time:'2023-8-25',
+  },
+  {
+    name:'陈天宇',
+    abnormal:'压力异常(82)',
+    time:'2023-8-25',
+  },
+  {
+    name:'陈天宇',
+    abnormal:'压力异常(82)',
+    time:'2023-8-25',
+  },
+  {
+    name:'陈天宇',
+    abnormal:'压力异常(82)',
+    time:'2023-8-25',
+  }
+])
 </script>
 <style scoped lang="less">
 .inner {
-    height: calc(100% - 40px);
+  height: calc(100% - 40px);
 
+  .scroll {
+    height: 200px;
+    width: 500px;
+    margin: 100px auto;
+    overflow: hidden;
+  }
+
+  .scroll .item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 3px 0;
+  }
 }
 </style>

src/components/body-d-right/twoR.vue

@@ -1,16 +1,80 @@
 <template>
     <div>
-        <public-title title="健康状况/慢病"/>
-        <div class="inner"></div>
+        <public-title title="长庆油田大病人数"/>
+        <div class="inner" ref="healthChart"></div>
     </div>
 </template>
 <script setup lang="ts">
-
+import { ref, onMounted } from 'vue';
+import * as echarts from 'echarts';
 import PublicTitle from "../publicTitle.vue";
+
+const healthChart = ref<HTMLElement>()
+onMounted(()=>{
+  let xdata = ['创伤类', '心血管', '心神类', '呼吸类' , '消化类', '肿瘤类', '其他'];
+  let ydata = [120, 200, 150, 80, 70, 110, 130];
+  initChart(xdata,ydata)
+})
+function initChart(xData,ydata){
+  let myChart = echarts.init(healthChart.value)
+  let options = {
+    title:{
+      text:'总人数\n',
+      subtext: '1980',
+      x: 'center',
+      y: 'center',
+      textStyle: {
+        fontSize:18,
+        color: '#ffffff',
+      },
+      subtextStyle: {
+        color: '#ffffff',
+        fontSize: 32,
+      },
+    },
+    color:['#0098FA','#0CD9B5','#3B72AD'],
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      bottom: '0',
+      left: 'center',
+      icon: 'circle',
+      textStyle:{
+        color:'#ffffff',
+        fontSize:18,
+      },
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['50%', '80%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: true,
+          position: 'inner',
+          formatter: '{d}%',
+          color:'#ffffff',
+          fontSize:16
+        },
+        labelLine: {
+          show: false
+        },
+        data: [
+          { value: 1048, name: '高危人数' },
+          { value: 735, name: '中危人数' },
+          { value: 580, name: '可控人数' },
+        ]
+      }
+    ]
+  }
+  myChart.setOption(options)
+}
 </script>
 <style scoped lang="less">
 .inner {
+    width: 90%;
+    margin: 0 auto;
     height: calc(100% - 40px);
-
 }
 </style>