zc

src/router/index.js

@@ -49,10 +49,10 @@ export const constantRoutes = [
       /*
       前端测试用
       */
-      // {
-      //   path: '/demo',
-      //   component: (resolve) => require(['@/views/comprehensive/laboratoryManagement/subject/index'], resolve),
-      // },
+      {
+        path: '/demo',
+        component: (resolve) => require(['@/views/medicUniversity-3_1/chemicalManagement/alarmRecord/detailsPage'], resolve),
+      },
     ]
   },
   {

src/views/medicUniversity-3_1/chemicalManagement/alarmRecord/detailsPage.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="infoPage">
+    <div class="title-box">
+      <p>详情</p>
+      <p class="inquire-button-one">处理</p>
+      <p class="reset-button-one" @click="backPage">返回</p>
+    </div>
+    <div class="bottom-max-bug-box scrollbar-box">
+      <div class="left-max-big-box scrollbar-box">
+        <div class="text-box">
+          <p>报警时间：</p>
+          <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
+        </div>
+        <div class="text-box">
+          <p>报警内容：</p>
+          <p></p>
+        </div>
+        <div class="text-box">
+          <p>学院：</p>
+          <p></p>
+        </div>
+        <div class="text-box">
+          <p>位置：</p>
+          <p></p>
+        </div>
+        <div class="text-box">
+          <p>报警方式：</p>
+          <p></p>
+        </div>
+        <div class="text-box">
+          <p>处理状态：</p>
+          <p></p>
+        </div>
+        <div class="text-box">
+          <p>报警短信号码：</p>
+          <p></p>
+        </div>
+        <div class="img-max-box">
+          <img src="https://img2.baidu.com/it/u=3596352791,3086982929&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800">
+          <img src="https://img2.baidu.com/it/u=3596352791,3086982929&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800">
+          <img src="https://img2.baidu.com/it/u=3596352791,3086982929&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800">
+          <img src="https://img2.baidu.com/it/u=3596352791,3086982929&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800">
+        </div>
+      </div>
+      <div class="right-max-big-box">
+        <div class="right-top-max-big-box">
+          <p class="right-title-p">查看监控</p>
+          <div class="right-top-button-box">
+            <p :class="topButtonIndex == index?'buttonColorA':'buttonColorB'"
+               @click="topButtonClick(index)"
+               v-for="(item,index) in topButton" :key="index">{{item.name}}</p>
+          </div>
+        </div>
+        <div class="right-bottom-max-big-box">
+          <p class="right-title-p">查看监控</p>
+          <div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { handle } from "@/api/medicUniversity-3_1/index";
+  export default {
+    name: "infoPage",
+    props:{
+      propsInfoData:{},
+    },
+    data() {
+      return {
+        topButtonIndex:0,
+        topButton:[{id:'1',name:'走廊摄像头1'},{id:'2',name:'走廊摄像头2'},{id:'3',name:'走廊摄像头3'},],
+        bottomButtonIndex:0,
+        bottomButton:[{id:'1',name:'喇叭1'},{id:'2',name:'喇叭2'},{id:'3',name:'喇叭3'},],
+      }
+    },
+    created() {
+
+    },
+    mounted(){
+
+    },
+    methods:{
+      // 监控选择
+      topButtonClick(type){
+        if(this.topButtonIndex != type){
+          this.topButtonIndex = type;
+        }
+      },
+      //处理报警记录
+      handle(){
+        let self = this;
+        if(self.propsInfoData.buttonType != 1){
+          self.msgError('只有该实验室负责人可以处理')
+          return
+        }
+        this.$confirm('确定要处理吗?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          handle({id:self.propsInfoData.id}).then(response => {
+            self.msgSuccess(response.msg);
+            self.$set(self.propsInfoData,'handlingStatus',2);
+            self.$set(self.propsInfoData,'operate','已处理');
+          })
+        }).then(() => {
+        }).catch(() => {});
+      },
+      backPage(){
+        this.$parent.pageToggle(1);
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .infoPage{
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border:1px solid #dedede;
+    p{
+      margin:0;
+      padding:0;
+    }
+    .title-box{
+      display: flex;
+      height:90px;
+      border-bottom: 1px solid #D8D8D8;
+      p:nth-child(1){
+        flex:1;
+        font-size:16px;
+        line-height:90px;
+        margin-left:18px;
+        color:#0045AF;
+      }
+      p:nth-child(2),p:nth-child(3){
+        margin:25px 25px 0 0;
+      }
+    }
+    .bottom-max-bug-box{
+      font-weight: 500;
+      flex:1;
+      padding:20px 79px;
+      .left-max-big-box{
+        width:559px;
+        height:750px;
+        display: inline-block;
+        margin-right:22px;
+        border-radius:10px;
+        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
+        padding:28px 28px 0 28px;
+        .text-box{
+          display: flex;
+          font-size:14px;
+          line-height:20px;
+          margin-bottom:28px;
+          p:nth-child(1){
+            width:100px;
+            text-align: right;
+            color:#333;
+          }
+          p:nth-child(2){
+            flex: 1;
+            color:#666;
+            margin-left:6px;
+          }
+        }
+        .img-max-box{
+          img{
+            cursor: pointer;
+            display: inline-block;
+            width:240px;
+            height:160px;
+            margin-bottom:14px;
+          }
+          img:nth-child(odd){
+            margin-right:18px;
+          }
+        }
+      }
+      .right-max-big-box{
+        width:839px;
+        display: inline-block;
+        .right-top-max-big-box{
+          height:402px;
+          overflow: hidden;
+          border-radius:10px;
+          box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
+          .right-title-p{
+            font-size:16px;
+            color:#333;
+            line-height:24px;
+            margin:18px 0 12px 24px;
+          }
+          .right-top-button-box{
+            margin:0 25px 0 7px;
+            p{
+              display: inline-block;
+              margin:0 0 18px 18px;
+              padding:0 10px;
+              line-height:30px;
+              border-radius:6px;
+              font-size:14px;
+              cursor: pointer;
+            }
+            .buttonColorA{
+              border:1px solid #0183FA;
+              background:#0183FA;
+              color:#fff;
+            }
+            .buttonColorB{
+              border:1px solid #E0E0E0;
+              color:#333;
+            }
+          }
+        }
+        .right-bottom-max-big-box{
+          margin-top:20px;
+          height:316px;
+          overflow: hidden;
+          border-radius:10px;
+          box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
+        }
+      }
+    }
+  }
+</style>