主诉分类

package.json

@@ -11,16 +11,17 @@
   "dependencies": {
     "dayjs": "^1.11.10",
     "path": "^0.12.7",
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "vue3-seamless-scroll": "^2.0.1"
   },
   "devDependencies": {
     "@ant-design/colors": "^7.0.0",
     "@ant-design/icons-vue": "^6.1.0",
     "@vitejs/plugin-vue": "^4.2.3",
+    "ant-design-vue": "^3.2.20",
     "echarts": "^5.4.3",
     "less": "^4.2.0",
     "typescript": "^5.0.2",
-    "ant-design-vue": "^3.2.20",
     "vite": "^4.4.5",
     "vue-tsc": "^1.8.5"
   }

src/components/body-d-left/twoL.vue

@@ -8,12 +8,15 @@
             </div>
             <div>全部数据</div>
           </div>
+          <div class="line-chart" ref="chiefChart"></div>
         </div>
     </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref,onMounted } from 'vue';
 import PublicTitle from "../publicTitle.vue";
+import * as echarts from 'echarts';
+
 const typeTime = ref([
   {
     name:'男',
@@ -24,10 +27,70 @@ const typeTime = ref([
   },
 ])
 const selectIndex = ref(0)
+const chiefChart = 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(chiefChart.value)
+  let options = {
+    grid:{
+      top: '10%',
+      left:'8%',
+      right:'8%',
+      bottom: '14%'
+    },
+    xAxis: {
+      type: 'category',
+      data: xData,
+      axisLabel: {
+        color: '#FFFFFF',
+        fontSize:16,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        color: '#FFFFFF',
+        fontSize:16,
+      },
+      splitLine: {
+        show: true,
+        lineStyle:{
+          type:'dashed',
+          color:'rgba(217, 231, 255, 0.2)'
+        }
+      }
+    },
+    series: [
+      {
+        data:ydata ,
+        type: 'bar',
+        barWidth: '20%',
+        itemStyle:{
+          color:new echarts.graphic.LinearGradient(
+              0, 0, 0, 1,
+              [
+                { offset: 0, color: '#008CFF' },
+                { offset: 1, color: '#33CBFE' }
+              ]
+          )
+        }
+      }
+    ]
+  }
+  myChart.setOption(options)
+}
 </script>
 <style scoped lang="less">
 .inner {
     height: calc(100% - 40px);
-
+    .line-chart{
+      margin: 0 auto;
+      width: 96%;
+      height: 80%;
+    }
 }
 </style>

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

@@ -2,17 +2,64 @@
   <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);
 
+  .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="健康状况/慢病"/>
+        <public-title title="长庆油田大病人数"/>
-        <div class="inner"></div>
+        <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>