终端弹窗

src/assets/less/index.less

@@ -1,9 +1,9 @@
 .type-time {
-  text-align: right;
   padding-right: 4%;
-  padding-top: 5%;
+  padding-top: 3%;
-  font-size: 18px;
+  font-size: 16px;
-
+  display: flex;
+  justify-content: right;
   span {
     padding: 0 2%;
     cursor: pointer;
@@ -17,10 +17,10 @@
       content: '';
       position: absolute;
       display: block;
-      width: 70%;
+      width: 72%;
-      left: 8px;
+      left: 6px;
-      bottom: -14px;
+      bottom: -12px;
-      height: 8px;
+      height: 6px;
       background: url("../images/light.png") no-repeat;
       background-size: 100% 100%;
     }
@@ -48,4 +48,26 @@
   border-radius: 25px;
   background-clip: padding-box;
   background-color: rgba(0, 0, 0, 0.30);
+}
+/*
+  antd表格样式
+*/
+.ant-table-thead > tr > th{
+  border-bottom: 1px solid #1e73c2!important;
+}
+.ant-table-body{
+  background-color: #00152B;
+}
+.ant-modal-header{
+  border-bottom: none!important;
+}
+.ant-table-tbody > tr > td{
+  border-bottom: 1px solid #1e73c2!important;
+  background-color: #00152B;
+  color: #ffffff;
+}
+.ant-table-tbody > tr.ant-table-row:hover > td, .ant-table-tbody > tr > td.ant-table-cell-row-hover,
+.ant-table-thead > tr > th{
+  background-color: #00152B!important;
+  color: #ffffff!important;
 }

src/assets/ts/antd.ts

@@ -5,6 +5,7 @@ import {
     Button,
     Radio,
     Modal,
+    Table
 } from 'ant-design-vue';
 
 export default function registerGlobComp(app: App) {
@@ -13,4 +14,5 @@ export default function registerGlobComp(app: App) {
         .use(Input)
         .use(Radio)
         .use(Modal)
+        .use(Table)
 }

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

@@ -68,7 +68,7 @@ function handleSelect(index:number){
       display: grid;
       align-items: start;
       .server-item{
-        font-size: 18px;
+        font-size: 16px;
         span{
           display: inline-block;
           width: 50%;

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

@@ -77,12 +77,11 @@ function handleSelect(index:number){
         display: flex;
         flex-direction: column;
         span:nth-child(1){
-          font-size: 28px;
+          font-size: 22px;
           font-weight: bold;
         }
         span:nth-child(2){
-          padding-top: 6%;
+          font-size: 16px;
-          font-size: 22px;
         }
       }
       .physical-item:nth-child(1),.physical-item:nth-child(2),.physical-item:nth-child(3){

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

@@ -2,11 +2,11 @@
     <div>
         <public-title title="主诉分类"/>
         <div class="inner">
-          <div class="">
+          <div class="title">
             <div class="type-time">
               <span :class="selectIndex===index?'select':'unSelect'" v-for="(item,index) in typeTime" :key="index" @click="handleSelect(index)">{{item.name}}</span>
             </div>
-            <div>全部数据</div>
+            <div class="type-all">全部数据</div>
           </div>
           <div class="line-chart" ref="chiefChart"></div>
         </div>
@@ -47,14 +47,14 @@ function initChart(xData,ydata){
       data: xData,
       axisLabel: {
         color: '#FFFFFF',
-        fontSize:16,
+        fontSize:14,
       },
     },
     yAxis: {
       type: 'value',
       axisLabel: {
         color: '#FFFFFF',
-        fontSize:16,
+        fontSize:14,
       },
       splitLine: {
         show: true,
@@ -90,6 +90,13 @@ function initChart(xData,ydata){
 <style scoped lang="less">
 .inner {
     height: calc(100% - 40px);
+    .title{
+      display: flex;
+      justify-content: right;
+      .type-all{
+        color: #ffffff;
+      }
+    }
     .line-chart{
       margin: 0 auto;
       width: 96%;

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

@@ -8,14 +8,46 @@
           <span>{{item.abnormal}}</span>
           <div class="time-icon">
             <span>{{item.time}}</span>
-            <span class="terminal-icon"></span>
+            <span class="terminal-icon" @click="handlePolice"></span>
           </div>
         </div>
       </vue3-seamless-scroll>
     </div>
-    <Dialog :openVis="open" width="40%" title="健康终端报警列表" @close="handleClose">
+    <Dialog :openVis="open" width="65%" title="健康终端报警列表" @close="handleClose">
       <template #container>
-        <div>34534</div>
+        <div class="dialog-con">
+          <a-table :dataSource="dataSource" :columns="columns" :scroll="{y:'56vh'}" :pagination=false />
+        </div>
+      </template>
+    </Dialog>
+    <Dialog :openVis="openInfor" width="30%" title="健康报警员工信息" @close="handlePoliceClose">
+      <template #container>
+        <div class="police-con">
+          <div class="con-item">
+            <span>姓名：</span>
+            <span>{{userInfo.name}}</span>
+          </div>
+          <div class="con-item">
+            <span>二级单位：</span>
+            <span>{{userInfo.unit}}</span>
+          </div>
+          <div class="con-item">
+            <span>手机号码：</span>
+            <span>{{userInfo.iphone}}</span>
+          </div>
+          <div class="con-item">
+            <span>异常事件：</span>
+            <span>{{userInfo.abnormal}}</span>
+          </div>
+          <div class="con-item">
+            <span>发生时间：</span>
+            <span>{{userInfo.time}}</span>
+          </div>
+          <div class="con-item">
+            <span>发生地点：</span>
+            <span>{{userInfo.address}}</span>
+          </div>
+        </div>
       </template>
     </Dialog>
   </div>
@@ -58,13 +90,172 @@
     }
   ])
   const open = ref<boolean>(false);
+  const openInfor = ref<boolean>(false);
+  const userInfo = ref({
+    name:'王苗',
+    unit:'长庆油田',
+    iphone:'1897263745',
+    abnormal:'体温异常',
+    time:'2023-11-23 16:23',
+    address:'陕西省西安市'
+  });
 
+  const dataSource=ref([
+    {
+      key: '1',
+      name: '胡彦斌',
+      age: 32,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    }, {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    }, {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    }, {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    }, {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    }, {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+  ]);
+
+    const columns= ref([
+      {
+        title: '姓名',
+        dataIndex: 'name',
+        align:'center',
+        key: 'name',
+      },
+      {
+        title: '单位信息',
+        dataIndex: 'age',
+        align:'center',
+        key: 'age',
+      },
+      {
+        title: '联系电话',
+        dataIndex: 'address',
+        align:'center',
+        key: 'address',
+      },
+      {
+        title: '联系电话',
+        dataIndex: 'address1',
+        align:'center',
+        key: 'address1',
+      },
+      {
+        title: '异常事件',
+        dataIndex: 'address2',
+        align:'center',
+        key: 'address2',
+      },
+      {
+        title: '异常值',
+        dataIndex: 'address2',
+        align:'center',
+        key: 'address2',
+      },
+      {
+        title: '发生时间',
+        dataIndex: 'address2',
+        align:'center',
+        key: 'address2',
+      },
+      {
+        title: '发生地点',
+        dataIndex: 'address2',
+        align:'center',
+        key: 'address2',
+      }
+    ]);
   function handleDialog(){
     open.value = true
   }
   function handleClose(){
     open.value = false
   }
+  function handlePolice(){
+    openInfor.value = true
+  }
+  function handlePoliceClose(){
+    openInfor.value = false
+  }
 </script>
 <style scoped lang="less">
   .inner {
@@ -80,7 +271,7 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 18px 0;
+      padding: 3% 0;
       span{
         color:#ffffff;
         font-size: 16px;
@@ -96,8 +287,32 @@
         height: 18px;
         background: url("../../assets/images/terminal.png") no-repeat;
         background-size: 100% 100%;
+        cursor:pointer;
       }
     }
   }
 }
+  .dialog-con{
+    background-color: #00152B;
+    border: 1px solid #129BFF;
+  }
+  .police-con{
+    color: #ffffff;
+    background-color: #00152B;
+    border: 1px solid #129BFF;
+    padding: 2% 0 2% 5%;
+    .con-item{
+      padding: 1.3% 0;
+      span:nth-child(1){
+        font-weight: bold;
+        display: inline-block;
+        width: 20%;
+        text-align: right;
+      }
+      span:nth-child(2){
+       padding-left: 2%;
+      }
+    }
+  }
+
 </style>

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

@@ -2,7 +2,10 @@
     <div>
         <public-title title="基层医疗点远程会诊"/>
         <div class="inner">
-
+            <div class="inner-item"></div>
+            <div class="inner-item"></div>
+            <div class="inner-item"></div>
+            <div class="inner-item"></div>
         </div>
     </div>
 </template>
@@ -11,8 +14,33 @@
 import PublicTitle from "../publicTitle.vue";
 </script>
 <style scoped lang="less">
-.inner {
+  .inner {
+    width: 100%;
     height: calc(100% - 40px);
-
+    display: flex;
-}
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-content: space-around;
+    padding-top: 2%;
+    .inner-item{
+      width: 48%;
+      height: 46%;
+    }
+    .inner-item:nth-child(1){
+      background: url("../../assets/images/doctors1.png")no-repeat;
+      background-size: 100% 100%;
+    }
+    .inner-item:nth-child(2){
+      background: url("../../assets/images/doctors2.png")no-repeat;
+      background-size: 100% 100%;
+    }
+    .inner-item:nth-child(3){
+      background: url("../../assets/images/doctors3.png")no-repeat;
+      background-size: 100% 100%;
+    }
+    .inner-item:nth-child(4){
+      background: url("../../assets/images/doctors4.png")no-repeat;
+      background-size: 100% 100%;
+    }
+  }
 </style>

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

@@ -29,7 +29,7 @@ function initChart(xData,ydata){
       },
       subtextStyle: {
         color: '#ffffff',
-        fontSize: 32,
+        fontSize: 28,
       },
     },
     color:['#0098FA','#0CD9B5','#3B72AD'],
@@ -42,7 +42,7 @@ function initChart(xData,ydata){
       icon: 'circle',
       textStyle:{
         color:'#ffffff',
-        fontSize:18,
+        fontSize:16,
       },
     },
     series: [

src/components/dialog/Dialog.vue

@@ -31,24 +31,20 @@
 </script>
 
 <style lang="less">
-  .ant-modal-header{
-    position: relative;
-    background: linear-gradient(270deg, rgba(106,112,124,0.4) 0%, rgba(106,112,124,0) 70%, rgba(106,112,124,0) 100%);
-    opacity: 1;
-    border: 1px solid;
-    border-image: linear-gradient(270deg, rgba(217.0000022649765, 231.00000143051147, 255, 0.5), rgba(217.0000022649765, 231.00000143051147, 255, 0)) 1 1;
-    &:before {
-      position: absolute;
-      content: '';
-      width: 7px;
-      height: 100%;
-      top: 0;
-      left: 0;
-      background-color: #45A2FF;
-    }
-  }
   .ant-modal-title{
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 56px;
+    background: url("../../assets/images/dialog.png") no-repeat;
+    background-size: 100% 100%;
     color: #ffffff!important;
+    padding-left: 2%;
+  }
+  .ant-modal-header{
+    padding: 0!important;
+    padding-bottom: 0;
   }
   .ant-modal-header,.ant-modal-content{
     background-color: transparent!important;
@@ -56,8 +52,14 @@
   .ant-modal-body{
     padding: 0!important;
   }
-  :deep(.anticon){
+  .ant-modal-close-x,.anticon {
-    color: #999999;
+    color: #999999!important;
+  }
+  .ant-modal-footer{
+    border-top: none!important;
+  }
+  .ant-modal-wrap{
+    background-color: rgba(0,0,0,0.6);
   }
 
 </style>