终端弹窗

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: [