zc

src/api/evacuation3_2/index.js

@@ -127,3 +127,101 @@ export function selectRiskPlanLeveList(data) {
     data: data
   })
 }
+//获取预案详情
+export function setPlanData(data) {
+  return request({
+    url: '/zd-laboratory/plan',
+    method: 'post',
+    data: data
+  })
+}
+//新增预案(名称)
+export function addPlan(data) {
+  return request({
+    url: '/zd-laboratory/plan/add',
+    method: 'post',
+    data:data
+  })
+}
+//修改预案(名称)
+export function putPlan(data) {
+  return request({
+    url: '/zd-laboratory/plan/update',
+    method: 'put',
+    data:data
+  })
+}
+
+//删除预案
+export function delPlanData(data) {
+  return request({
+    url: '/zd-laboratory/plan/delete/'+data,
+    method: 'delete',
+  })
+}
+
+//根据ID查询分级列表
+export function selectRiskPlanLeveListRiskPlanId(id) {
+  return request({
+    url: '/zd-laboratory/planLevel/selectRiskPlanLeveList/'+id,
+    method: 'get',
+  })
+}
+//新增预案分级数据
+export function planLevelAdd(data) {
+  return request({
+    url: '/zd-laboratory/planLevel/add',
+    method: 'post',
+    data:data
+  })
+}
+//编辑预案分级数据
+export function planLevelPut(data) {
+  return request({
+    url: '/zd-laboratory/planLevel/update',
+    method: 'put',
+    data:data
+  })
+}
+//编辑预案分级数据
+export function planLevelDel(data) {
+  return request({
+    url: '/zd-laboratory/planLevel/delete/',
+    method: 'delete',
+    data:data
+  })
+}
+
+//获取关联预案实验室列表
+export function getLabRiskPlanJoinSub(data) {
+  return request({
+    url: '/zd-laboratory/plan/getLabRiskPlanJoinSub',
+    method: 'post',
+    data: data
+  })
+}
+//获取非关联预案实验室列表
+export function getLabRiskPlanNoJoinSub(data) {
+  return request({
+    url: '/zd-laboratory/plan/getLabRiskPlanNoJoinSub',
+    method: 'post',
+    data: data
+  })
+}
+//删除关联实验室
+export function deleteRiskPlanJoinSub(data) {
+  return request({
+    url: '/zd-laboratory/plan/deleteRiskPlanJoinSub',
+    method: 'delete',
+    data: data
+  })
+}
+//新增关联实验室
+export function riskPlanJoinSub(data) {
+  return request({
+    url: '/zd-laboratory/plan/riskPlanJoinSub',
+    method: 'post',
+    data: data
+  })
+}
+

src/router/index.js

@@ -76,6 +76,11 @@ export const constantRoutes = [
     hidden: true
   },
   {
+    path: '/newEvacuationBigData',
+    component: (resolve) => require(['@/views/newEvacuationBigData'], resolve),
+    hidden: true
+  },
+  {
     path: '/learning',
     component: (resolve) => require(['@/views/safetyEducationExam/safeLearning/safeLearning/learning'], resolve),
     hidden: true

src/views/emergencyManagement/plan/index.vue

@@ -12,13 +12,13 @@
             size="small"
           />
         </el-form-item>
-        <el-form-item label="启动条件" prop="deptId" label-width="100px">
-          <el-select v-model="param.deptId" placeholder="请选择启动条件" clearable size="small">
+        <el-form-item label="启动条件" prop="startCondition" label-width="100px">
+          <el-select v-model="param.startCondition" placeholder="请选择启动条件" clearable size="small">
             <el-option
               v-for="dict in deptOptions"
-              :key="dict.deptId"
-              :label="dict.deptName"
-              :value="dict.deptId"
+              :key="dict.funNum"
+              :label="dict.describe"
+              :value="dict.funNum"
             ></el-option>
           </el-select>
         </el-form-item>
@@ -45,7 +45,7 @@
       </el-form>
       <el-table v-loading="loading" border :data="tableData">
         <el-table-column label="预案名称" align="center" prop="name" :show-overflow-tooltip="true"/>
-        <el-table-column label="启动条件" align="center" prop="funNum" :show-overflow-tooltip="true" width="340"/>
+        <el-table-column label="启动条件" align="center" prop="message" :show-overflow-tooltip="true" width="340"/>
         <el-table-column label="创建人" align="center" prop="createBy" width="180"/>
         <el-table-column label="创建时间" align="center" prop="createTime" width="200"/>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="340" v-if="tableButtonType">
@@ -68,7 +68,7 @@
       />
     </div>
      <!--添加编辑-->
-    <add-plan-page v-if="pageType == 1" :pageData="pageData"></add-plan-page>
+    <add-plan-page v-if="pageType == 1" :addPlanData="addPlanData"></add-plan-page>
      <!--  查看  -->
     <detail-plan-page v-if="pageType == 2" :pageData2="pageData2"></detail-plan-page>
     <!--关联实验室-->
@@ -79,12 +79,23 @@
         <relevance-record-page v-if="pageType == 3" :pageData3="pageData3" style="display: flex;flex-direction: column;flex:1;"></relevance-record-page>
       </div>
     </el-dialog>
+    <!--新增预案-->
+    <el-dialog title="定制预案" v-if="addFormOpen" :visible.sync="addFormOpen" width="500px" append-to-body>
+      <el-form ref="addForm" :model="addForm" :rules="rules" label-width="80px">
+        <el-form-item label="预案名称" prop="name">
+          <el-input v-model="addForm.name" placeholder="请输入预案名称" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+        <el-button style="width:100px;" type="primary" @click="submitForm">配置规则</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import {
-  addPlan,
   updatePlan,
   listPlan,
   getUserRoleBySub,
@@ -96,14 +107,14 @@ import {
 } from "@/api/laboratory/plan";
 import addPlanPage from "./newAddPlan.vue";
 import detailPlanPage from "./detailPlan.vue";
-import associationPage from "./associationPage.vue";
+import associationPage from "./newAssociatedPage.vue";
 import relevanceRecordPage from "../distribution/index";
 import {listDepartments} from "@/api/system/dept";
 import {listClassifiedAll} from "@/api/laboratory/classified";
 import {listClasstypeAll} from "@/api/laboratory/classtype";
 import {authListSubject} from "@/api/laboratory/subject";
-import { selectRiskPlanLeveList } from "@/api/evacuation3_2/index";
-
+import { selectRiskPlanLeveList, addPlan, delPlanData } from "@/api/evacuation3_2/index";
+import { optionSensor } from "@/api/laboratory/sensor";
 
 export default {
   components: {
@@ -127,15 +138,11 @@ export default {
       param: {
         pageNum: 1,
         pageSize:20,
-        name: null,
         searchValue: null,
-        createName: null,
-        beginTime: null,
-        endTime: null
+        startCondition: null,
       },
       tableData: [],
       total: 0,
-      pageData:{},
       pageData2:{},
       pageData3:{},
       //关联实验室
@@ -148,16 +155,31 @@ export default {
       checkedLabList:[],//需要选中的实验室
       joinSubOper:[],
       userId:localStorage.getItem('userId'),
+      //新增预案
+      addFormOpen:false,
+      addForm:{},
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: "请输入预案名称", trigger: "change" },
+          { required: true, message: "请输入预案名称", validator: this.spaceJudgment, trigger: "change" }
+        ],
+      },
+      //关联页面传参数据
       associationData:{},
+      addPlanData:{},
     };
   },
   methods: {
     // 操作按钮 1.关联 2.编辑 3.删除 4.新增
     tableClickButton(type,item){
+      console.log('tableClickButton',type)
+      let self = this;
       if(type == 1){
-
+        this.$set(this,'associationData',JSON.parse(JSON.stringify(item)));
+        this.$set(this,'pageType',4);
       }else if(type == 2){
-        this.$set(this,'pageData',item);
+        this.$set(this,'addPlanData',JSON.parse(JSON.stringify({id:item.id,name:item.name})));
         this.$set(this,'pageType',1);
       }else if(type == 3){
         this.$confirm('是否确认删除该预案?', "警告", {
@@ -165,39 +187,68 @@ export default {
           cancelButtonText: "取消",
           type: "warning"
         }).then(function() {
-
+          delPlanData(item.id).then(response => {
+            self.msgSuccess(response.msg)
+            self.getListPlan();
+          });
         }).then(() => {
         }).catch(() => {});
       }else if(type == 4){
-        this.$set(this,'pageData',null);
-        this.$set(this,'pageType',1);
+        this.$set(this,'addFormOpen',true);
+        this.$set(this,'addForm',{});
       }else if(type == 5){
         this.$set(this,'pageType',0);
+        this.getListPlan();
+      }else if(type == 6){
+        this.$set(this,'pageType',1);
       }
     },
+    //新增预案-关闭
+    cancel(){
+      this.$set(this,'addFormOpen',false);
+      this.$set(this,'addForm',{});
+    },
+    //新增预案-提交
+    submitForm(){
+      let self = this;
+      this.$refs["addForm"].validate(valid => {
+        if (valid) {
+          let obj = {
+            name:this.addForm.name
+          }
+          addPlan(obj).then((response) => {
+            this.msgSuccess(response.msg)
+            this.$set(this,'addFormOpen',false);
+            setTimeout(function(){
+              self.tableClickButton(2,{id:response.data,name:self.addForm.name,});
+            },500);
+            // this.tableClickButton(2,{id:response.data,name:this.addForm.name,});
+            // this.$set(this,'addPlanData',{
+            //
+            // });
+            // self.$set(this,'addForm',{});
+            // self.$set(this,'pageType',1);
+          });
+        }
+      })
+    },
     //查询
     onSearch() {
-      // this.param.pageNo = 1;
       this.getListPlan();
     },
     //重置
     resetForm() {
-      this.dateRange=[];
-      this.param.searchValue = '';
-      this.param.name = '';
-      this.param.createName = '';
-      this.param.beginTime = '';
-      this.param.endTime = '';
+      this.$set(this.param,'searchValue',null);
+      this.$set(this.param,'startCondition',null);
       this.onSearch();
     },
     //监听关联记录弹窗关闭
     handleClose(){
       this.pageType=0
     },
-    /** 查询学院列表 */
+    /** 查询启动条件 */
     getDeptListTow() {
-      listDepartments().then(response => {
-        // this.deptOptionsTwo = response.data;
+      optionSensor({}).then(response => {
         this.$set(this, 'deptOptions', response.data)
       });
     },

src/views/emergencyManagement/plan/newAddPlan.vue

@@ -3,76 +3,85 @@
     <div class="newAddPlan-title-box">
       <p>定制预案</p>
       <p class="add-button-two-90" @click="backButton">返回</p>
-      <p class="inquire-button-one">不关联仅保存</p>
-      <p class="inquire-button-one" @click="associatedDialogClick(1)">保存并关联实验室</p>
+      <!--<p class="inquire-button-one" @click="upDataButton(1)">不关联仅保存</p>-->
+      <p class="inquire-button-one" @click="associatedDialogClick">关联实验室</p>
     </div>
     <div class="plan-for-max-box scrollbar-box">
-      <el-form :model="form" ref="form" :rules="rules" :inline="true" label-width="90px" class="form-box">
-        <el-form-item label="预案名称:" prop="name" style="margin:40px 0;">
-          <el-input
-            v-model="form.name"
-            placeholder="请输入预案名称"
-            clearable
-            size="small"
-            maxLength="50"
-          />
-        </el-form-item>
-        <div class="for-plan-box" v-for="(item,index) in form.labRiskPlanLevels" :key="index">
-          <p class="position-title-type" :class="item.riskPlanLevel==1?'type-color-a':(item.riskPlanLevel==2?'type-color-b':(item.riskPlanLevel==3?'type-color-c':(item.riskPlanLevel==4?'type-color-d':'')))">
-            {{item.riskPlanLevel==1?'低风险':(item.riskPlanLevel==2?'中风险':(item.riskPlanLevel==3?'较高风险':(item.riskPlanLevel==4?'高风险':'')))}}
-          </p>
-          <div class="for-plan-img-box">
-            <p class="for-plan-img-null-p"></p>
-            <div class="for-plan-img-box-big">
-              <div class="for-plan-img-box-one">
-                <img src="@/assets/ZDimages/evacuation3_2/img_dzya_ldss.png">
-                <p>联动疏散</p>
-              </div>
-              <!--<div class="for-plan-img-box-two">-->
+        <el-form :model="form" ref="form" :rules="rules" :inline="true" label-width="90px" class="form-box">
+          <div class="plan-for-max-box-name-box">
+            <el-form-item label="预案名称:" prop="name" style="margin:40px 0;">
+              <el-input
+                v-model="form.name"
+                placeholder="请输入预案名称"
+                size="small"
+                maxLength="15"
+                :disabled="inputType"
+              />
+            </el-form-item>
+            <p v-if="inputType" class="plan-for-max-box-name-button-one add-button-two-90" @click="setNameButton(1)">编辑</p>
+            <p v-if="!inputType" class="plan-for-max-box-name-button-two reset-button-one" @click="setNameButton(2)">取消</p>
+            <p v-if="!inputType" class="plan-for-max-box-name-button-three add-button-two-90" @click="setNameButton(3)">保存</p>
+          </div>
+          <div class="for-plan-box" v-for="(item,index) in form.labRiskPlanLevels" :key="index">
+            <p class="position-title-type" :class="item.riskPlanLevel==1?'type-color-a':(item.riskPlanLevel==2?'type-color-b':(item.riskPlanLevel==3?'type-color-c':(item.riskPlanLevel==4?'type-color-d':'')))">
+              {{item.riskPlanLevel==1?'低风险':(item.riskPlanLevel==2?'中风险':(item.riskPlanLevel==3?'较高风险':(item.riskPlanLevel==4?'高风险':'')))}}
+            </p>
+            <div class="for-plan-img-box">
+              <p class="for-plan-img-null-p"></p>
+              <div class="for-plan-img-box-big">
+                <div class="for-plan-img-box-one" v-if="item.ifExit == 1">
+                  <img src="@/assets/ZDimages/evacuation3_2/img_dzya_ldss.png">
+                  <p>联动疏散</p>
+                </div>
+                <!--<div class="for-plan-img-box-two">-->
                 <!--<img src="@/assets/ZDimages/evacuation3_2/img_dzya_hzyj.png">-->
                 <!--<p>火灾预案</p>-->
-              <!--</div>-->
+                <!--</div>-->
+              </div>
+              <p class="for-plan-img-null-p"></p>
             </div>
-            <p class="for-plan-img-null-p"></p>
-          </div>
-          <div class="min-for-text-box">
-            <div class="min-for-text-box-one" v-for="(minItemOne,minIndexOne) in item.riskPlanSensorList" :key="minIndexOne">
+            <div class="min-for-text-box">
               <div>
-                <p>启动条件：</p>
-                <p>监测区间：{{minItemOne.minMonitor}}-{{minItemOne.maxMonitor}}</p>
+                <div class="min-for-text-box-one" v-for="(minItemOne,minIndexOne) in item.riskPlanSensorList" :key="minItemOne.funNum">
+                  <div>
+                    <p>启动条件：<span v-for="(sensorItem,sensorIndex) in sensorList" :key="sensorIndex" v-if="sensorItem.funNum == minItemOne.funNum">{{sensorItem.describe}}</span></p>
+                    <p>监测区间：{{minItemOne.minMonitor}}-{{minItemOne.maxMonitor}}</p>
+                  </div>
+                </div>
               </div>
-            </div>
-            <div class="min-for-text-box-two" v-for="(minItemTwo,minIndexTwo) in item.riskPlanHardwareList" :key="minIndexTwo">
               <div>
-                <p>执行动作：</p>
-                <p>执行办法：</p>
-                <p>结束操作：</p>
+                <div class="min-for-text-box-two" v-for="(minItemTwo,minIndexTwo) in item.riskPlanHardwareList" :key="minIndexTwo">
+                  <div v-for="(hardwareItem,hardwareIndex) in hardwareList" :key="hardwareIndex" v-if="hardwareItem.hardwareTypeEnum.code == minItemTwo.hardwareType">
+                    <p>执行动作：{{hardwareItem.hardwareTypeEnum.hardwareTypeName}}</p>
+                    <p>执行办法：<span v-for="(functionItem,functionIndex) in hardwareItem.functionStatusList" :key="functionIndex" v-if="functionItem.code == minItemTwo.operate">{{functionItem.code == 0?'关闭':'开启'}}</span></p>
+                    <p>结束操作：<span v-for="(functionItem,functionIndex) in hardwareItem.functionStatusList" :key="functionIndex" v-if="functionItem.code == minItemTwo.overAct">{{functionItem.code == 0?'关闭':'开启'}}</span></p>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="for-button-max-box">
-            <div @click="buttonClick(2)">
-              <img src="@/assets/ZDimages/evacuation3_2/icon_znwl_bj.png">
-              <p>编辑</p>
-            </div>
-            <div @click="buttonClick(3)">
-              <img src="@/assets/ZDimages/evacuation3_2/icon_znwl_sc.png">
-              <p>删除</p>
+            <div class="for-button-max-box">
+              <div @click="buttonClick(2,item,index)">
+                <img src="@/assets/ZDimages/evacuation3_2/icon_znwl_bj.png">
+                <p>编辑</p>
+              </div>
+              <div @click="buttonClick(3,item,index)">
+                <img src="@/assets/ZDimages/evacuation3_2/icon_znwl_sc.png">
+                <p>删除</p>
+              </div>
             </div>
           </div>
-        </div>
-      </el-form>
+        </el-form>
       <div class="plan-for-max-button-box">
         <p class="plan-for-max-button-null"></p>
-        <p class="plan-for-max-button" @click="buttonClick(1)">+ 新增预案规则</p>
+        <p class="plan-for-max-button" v-if="!form.labRiskPlanLevels[3]" @click="buttonClick(1)">+ 新增预案规则</p>
         <p class="plan-for-max-button-null"></p>
       </div>
     </div>
     <el-dialog :title='dialogTitle' v-if="dialogOpen" :visible.sync="dialogOpen" width="800px">
       <div class="scrollbar-box" style="height:600px;">
         <el-form :model="dialogForm" ref="dialogForm" :rules="rules" label-width="100px">
-          <el-form-item label="预案等级：" prop="type1">
-            <el-radio-group v-model="dialogForm.type1">
+          <el-form-item label="预案等级：" prop="riskPlanLevel">
+            <el-radio-group  v-model="dialogForm.riskPlanLevel" style="width:500px;">
               <el-radio :label="1">低风险</el-radio>
               <el-radio :label="2">中风险</el-radio>
               <el-radio :label="3">较高风险</el-radio>
@@ -80,43 +89,45 @@
             </el-radio-group>
           </el-form-item>
           <div style="display: flex">
-            <el-form-item label="执行疏散：" prop="name">
-              <el-radio-group v-model="dialogForm.type2">
-                <el-radio :label="1">否</el-radio>
-                <el-radio :label="2">是</el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="火灾预案：" prop="name" style="margin-left:220px;">
-              <el-radio-group v-model="dialogForm.type3">
-                <el-radio :label="1">否</el-radio>
-                <el-radio :label="2">是</el-radio>
+            <el-form-item label="执行疏散：" prop="ifExit">
+              <el-radio-group  v-model="dialogForm.ifExit" style="width:500px;">
+                <el-radio :label="0">否</el-radio>
+                <el-radio :label="1">是</el-radio>
               </el-radio-group>
             </el-form-item>
+            <!--<el-form-item label="火灾预案：" prop="name" style="margin-left:220px;">-->
+              <!--<el-radio-group v-model="dialogForm.type3">-->
+                <!--<el-radio :label="1">否</el-radio>-->
+                <!--<el-radio :label="2">是</el-radio>-->
+              <!--</el-radio-group>-->
+            <!--</el-form-item>-->
           </div>
           <div style="border-top:1px solid #e0e0e0;">
             <p style="line-height:60px;font-size:14px;margin-left:19px;">启动条件：</p>
-            <div style="display: flex" v-for="(item,index) in dialogForm.list1" :key="index">
+            <div style="display: flex" v-for="(item,index) in dialogForm.riskPlanSensorList" :key="index">
               <div style="flex:1;">
-                <el-form-item label="监测设备：" prop="type4">
-                  <el-select v-model="item.type4" placeholder="请选择">
+                <el-form-item label="监测设备：" :prop="'riskPlanSensorList.'+index+'.funNum'" :rules="rules.funNum">
+                  <el-select  v-model="item.funNum" placeholder="请选择监测设备">
                     <el-option
-                      v-for="item in options"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value">
+                      v-for="item in sensorList"
+                      :key="item.funNum"
+                      :label="item.describe"
+                      :value="item.funNum">
                     </el-option>
                   </el-select>
                 </el-form-item>
               </div>
               <div style="flex:1;display: flex">
-                <el-form-item label="监测区间：" prop="name">
-                  <el-input-number v-model="item.type5" style="width:90px;" :min="1" :max="999" :controls="false" label="描述文字"></el-input-number>
+                <el-form-item label="监测区间：" :prop="'riskPlanSensorList.'+index+'.minMonitor'" :rules="rules.minMonitor">
+                  <el-input-number  v-model="item.minMonitor" style="width:90px;" :min="1" :max="99999" :controls="false" placeholder="监测区间"></el-input-number>
                 </el-form-item>
                 <p style="width:30px;text-align: center;line-height:40px;">-</p>
-                <el-form-item label="" prop="name" label-width="0">
-                  <el-input-number v-model="item.type6" style="width:90px;" :min="1" :max="999" :controls="false" label="描述文字"></el-input-number>
+                <el-form-item label="" :prop="'riskPlanSensorList.'+index+'.maxMonitor'" :rules="rules.maxMonitor" label-width="0">
+                  <el-input-number  v-model="item.maxMonitor" style="width:90px;" :min="1" :max="99999" :controls="false" placeholder="监测区间"></el-input-number>
                 </el-form-item>
-                <p class="el-icon-delete" style="cursor: pointer;line-height:30px;width:30px;text-align:center;margin:5px 0 0 20px;"></p>
+                <p class="el-icon-delete"
+                   @click="delMinData(1,index)"
+                   style="cursor: pointer;line-height:30px;width:30px;text-align:center;margin:5px 0 0 20px;"></p>
               </div>
             </div>
             <p style="cursor: pointer;width:200px;line-height:30px;border-radius:4px;border: 1px dashed #E0E0E0;color:#333333;text-align: center;margin:20px auto;"
@@ -124,39 +135,41 @@
           </div>
           <div style="border-top:1px solid #e0e0e0;">
             <p style="line-height:60px;font-size:14px;margin-left:19px;">执行动作：</p>
-            <div style="display: flex" v-for="(item,index) in dialogForm.list2" :key="index">
+            <div style="display: flex" v-for="(item,index) in dialogForm.riskPlanHardwareList" :key="index">
               <div style="flex:1;display: flex">
-                <el-form-item label="执行设备：" prop="type4">
-                  <el-select v-model="item.type4" placeholder="请选择" style="width:130px;">
+                <el-form-item label="执行设备：" :prop="'riskPlanHardwareList.'+index+'.hardwareType'" :rules="rules.hardwareType">
+                  <el-select v-model="item.hardwareType" placeholder="选择执行设备" style="width:130px;" @change="(val)=>controlTypeList(val,index)">
                     <el-option
-                      v-for="item in options"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value">
+                      v-for="optionItem in hardwareList"
+                      :key="optionItem.hardwareTypeEnum.code"
+                      :label="optionItem.hardwareTypeEnum.hardwareTypeName"
+                      :value="optionItem.hardwareTypeEnum.code">
                     </el-option>
                   </el-select>
                 </el-form-item>
-                <el-form-item label="执行办法：" prop="type4">
-                  <el-select v-model="item.type4" placeholder="请选择" style="width:130px;">
+                <el-form-item label="执行办法：" :prop="'riskPlanHardwareList.'+index+'.operate'" :rules="rules.operate">
+                  <el-select  v-model="item.operate" placeholder="选择执行办法" style="width:130px;">
                     <el-option
-                      v-for="item in options"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value">
+                      v-for="optionItem in item.hardwareList"
+                      :key="optionItem.code"
+                      :label="optionItem.describe"
+                      :value="optionItem.code">
                     </el-option>
                   </el-select>
                 </el-form-item>
-                <el-form-item label="结束操作：" prop="type4">
-                  <el-select v-model="item.type4" placeholder="请选择" style="width:130px;">
+                <el-form-item label="结束操作：" :prop="'riskPlanHardwareList.'+index+'.overAct'" :rules="rules.overAct">
+                  <el-select  v-model="item.overAct" placeholder="选择结束操作" style="width:130px;">
                     <el-option
-                      v-for="item in options"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value">
+                      v-for="optionItem in item.hardwareList"
+                      :key="optionItem.code"
+                      :label="optionItem.describe"
+                      :value="optionItem.code">
                     </el-option>
                   </el-select>
                 </el-form-item>
-                <p class="el-icon-delete" style="cursor: pointer;line-height:30px;width:30px;text-align:center;margin:5px 0 0 20px;"></p>
+                <p class="el-icon-delete"
+                   @click="delMinData(2,index)"
+                   style="cursor: pointer;line-height:30px;width:30px;text-align:center;margin:5px 0 0 20px;"></p>
               </div>
             </div>
             <p style="cursor: pointer;width:200px;line-height:30px;border-radius:4px;border: 1px dashed #E0E0E0;color:#333333;text-align: center;margin:20px auto;"
@@ -173,204 +186,166 @@
         </div>
       </div>
     </el-dialog>
-    <el-dialog title='关联实验室' v-if="dialogAssociatedOpen" :visible.sync="dialogAssociatedOpen" width="1200px">
-      <div style="height: 600px;overflow: hidden;display: flex;flex-direction: column;flex:1;">
-        <el-form :model="param" ref="queryForm" :inline="true" label-width="80px">
-          <el-form-item label="关键字" prop="name">
-            <el-input
-              maxlength="10"
-              v-model="param.searchValue"
-              placeholder="实验室/危险源"
-              clearable
-              size="small"
-            />
-          </el-form-item>
-          <el-form-item label="安全分类" prop="deptId" label-width="80px">
-            <el-select v-model="param.deptId" placeholder="请选择安全分类" clearable size="small">
-              <el-option
-                v-for="dict in options"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="安全分级" prop="deptId" label-width="80px">
-            <el-select v-model="param.deptId" placeholder="请选择安全分级" clearable size="small">
-              <el-option
-                v-for="dict in options"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <p class="inquire-button-one" style="margin-right:10px;" @click="onSearch">查询</p>
-            <p class="reset-button-one" @click="resetForm">重置</p>
-          </el-form-item>
-        </el-form>
-        <div style="display: flex;background: rgb(202,229,253);height:40px;line-height:40px;font-size:16px;padding:0 82px;">
-          <p style="margin-right:24px;">已选择 <span style="color:#0183FA;">1</span> 项</p>
-          <p style="color:#0183FA;cursor: pointer;" >全选本页</p>
-          <p style="color:#0183FA;margin:0 32px 0 30px;cursor: pointer;" >选择全部</p>
-          <p style="color:#FF8F1F;cursor: pointer;" >清除选项</p>
-        </div>
-        <el-table v-loading="loading" border :data="tableData">
-          <el-table-column type="selection" width="55" align="center" />
-          <el-table-column label="实验室" width="220" align="center" prop="id" />
-          <el-table-column label="安全分类" width="100" align="center" prop="id" />
-          <el-table-column label="安全分级" width="100" align="center" prop="id" />
-          <el-table-column label="危险源" align="left">
-            <div style="margin-bottom:10px;">
-              <div style="display: inline-block;padding:0 10px;border:1px solid #E0E0E0;margin:10px 10px 0 0;">
-                <span style="line-height:40px;font-size:14px;">马弗炉 - 马弗炉温度传感器</span>
-                <span class="el-icon-circle-close" style="cursor: pointer;width:14px;height:14px;margin-left:10px;margin-top:14px;color:#666;"></span>
-              </div>
-              <p style="color:#0183FA;font-size:16px;border:1px solid #0183FA;
-              border-radius:4px;width:88px;height:30px;line-height:30px;
-              display: inline-block;margin:5px 0 0 10px;text-align: center;cursor: pointer;">新增危险源</p>
-              <div style="display: flex;margin-top:10px;">
-                <el-select v-model="param.deptId" placeholder="请选择安全分类" clearable style="width:168px;">
-                  <el-option
-                    v-for="dict in options"
-                    :key="dict.value"
-                    :label="dict.label"
-                    :value="dict.value"
-                  ></el-option>
-                </el-select>
-                <p style="width:30px;text-align: center;line-height:40px;">-</p>
-                <el-select v-model="param.deptId" placeholder="请选择安全分类" clearable style="width:168px;">
-                  <el-option
-                    v-for="dict in options"
-                    :key="dict.value"
-                    :label="dict.label"
-                    :value="dict.value"
-                  ></el-option>
-                </el-select>
-                <p style="color:#CCCCCC;font-size:16px;border:1px solid #E0E0E0;
-                border-radius:4px;width:80px;height:30px;line-height:30px;
-                display: inline-block;margin:5px 0 0 10px;text-align: center;cursor: pointer;">取消</p>
-                <p style="color:#0183FA;font-size:16px;border:1px solid #0183FA;
-                border-radius:4px;width:80px;height:30px;line-height:30px;
-                display: inline-block;margin:5px 0 0 10px;text-align: center;cursor: pointer;">确定</p>
-              </div>
-            </div>
-          </el-table-column>
-        </el-table>
-        <pagination
-          v-show="total>0"
-          :total="total"
-          :page.sync="param.pageNum"
-          :limit.sync="param.pageSize"
-          @pagination="getList"
-        />
-      </div>
-      <div slot="footer" class="dialog-footer">
-        <div style="display: flex">
-          <p style="flex:1;"></p>
-          <p style="cursor: pointer;border-radius:6px;width:70px;line-height:30px;font-size:12px;text-align:center;margin-right:17px;color:#999999;background:#E0E0E0;" @click="associatedDialogClick(2)">取消</p>
-          <p style="cursor: pointer;border-radius:6px;width:70px;line-height:30px;font-size:12px;text-align:center;color:#fff;background:#0045AF;" @click="associatedDialogClick(3)">确定</p>
-          <p style="flex:1;"></p>
-        </div>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
+  import { listClassifiedAll } from "@/api/laboratory/classified";
+  import { listClasstypeAll } from "@/api/laboratory/classtype";
   import { optionHardware } from "@/api/laboratory/hardware";
   import { optionSensor } from "@/api/laboratory/sensor";
+  import { selectRiskPlanLeveListRiskPlanId,putPlan,planLevelAdd,planLevelPut,planLevelDel,getLabRiskPlanJoinSub } from "@/api/evacuation3_2/index";
   export default {
     name: "newAddPlan",
     props:{
-      pageData:{},
+      addPlanData:{},
     },
     data() {
       return {
         form:{
-          list:[
-            {type:1},{type:2},{type:3},{type:4},
-          ],
+          name:"",
+          labRiskPlanLevels:[],
         },
         dialogTitle:'',
+        dialogIndex:null,
         dialogOpen:false,
-        dialogForm:{
-          list1:[{}],
-          list2:[{}],
-        },
+        dialogForm:{},
         // 表单校验
         rules: {
           name: [
-            { required: true, message: "请输入预案名称", trigger: "blur" },
-            { required: true, message: "请输入预案名称", validator: this.spaceJudgment, trigger: "blur" }
+            { required: true, message: "请输入预案名称", trigger: "change" },
+            { required: true, message: "请输入预案名称", validator: this.spaceJudgment, trigger: "change" }
+          ],
+          riskPlanLevel: [
+            { required: true, message: "请选择预案等级", trigger: "change" },
+          ],
+          ifExit: [
+            { required: true, message: "请选择是否执行疏散", trigger: "change" },
+          ],
+          funNum: [
+            { required: true, message: "请选择监测设备", trigger: "change" },
+          ],
+          minMonitor: [
+            { required: true, message: "请选择监测区间", trigger: "blur" },
+          ],
+          maxMonitor: [
+            { required: true, message: "请选择监测区间", trigger: "blur" },
+          ],
+          hardwareType: [
+            { required: true, message: "请选择执行设备", trigger: "change" },
+          ],
+          operate: [
+            { required: true, message: "请选择执行办法", trigger: "change" },
+          ],
+          overAct: [
+            { required: true, message: "请选择结束操作", trigger: "change" },
           ],
         },
         //检测设备列表
         options:[{value: '选项1', label: '黄金糕'},{value: '选项1', label: '黄金糕'},],
-        /***************关联危险源开始****************/
-        // 遮罩层
-        loading: false,
-        // 选中数组
-        ids: [],
-        // 非单个禁用
-        single: true,
-        // 非多个禁用
-        multiple: true,
-        // 查询数据
-        param:{},
-        total:5,
-        //关联实验室
-        dialogAssociatedOpen:false,
-        tableData:[{}],
         //选择数据
+        //传感器
         sensorList:[],
         sensorListData:[],
+        //设备
         hardwareList:[],
-        /***************关联危险源结束****************/
+        //分类
+        typeList:[],
+        //分级
+        levelList:[],
+        // 关联实验室本地数据
+        labSensorHazardRelations:[],
+        // 新增/编辑时本地数据
+        labRiskPlanLevels:[],
+        //名称修改状态锁
+        inputType:true,
+        inputName:"",
       }
     },
     created(){
-      if(this.pageData){
-        this.$set(this,'form',this.pageData);
-      }else{
-        this.$set(this,'form',{
-          name:"",
-          labRiskPlanLevels:[],
-        });
-      }
-      console.log('pageData',this.pageData)
+
     },
     mounted(){
       this.getOptionData();
     },
     methods: {
+      //修改预案名称
+      setNameButton(type){
+        if(type == 1){
+          this.$set(this,'inputType',false);
+          this.$set(this,'inputName',this.form.name);
+        }else if(type == 2){
+          this.$set(this,'inputType',true);
+          this.$set(this.form,'name',this.inputName);
+        }else if(type == 3){
+          putPlan({ id:this.addPlanData.id, name:this.form.name }).then((response) => {
+            this.msgSuccess(response.msg)
+            this.$set(this,'inputType',true);
+          });
+        }
+      },
+      //提交
+      upDataButton(){
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if(!this.form.labRiskPlanLevels[0]){
+              this.msgError('请添加至少一个预案规则')
+              return
+            }
+            setPlanData(this.form).then(response => {
+              this.msgSuccess(response.msg);
+              this.$parent.tableClickButton(5);
+            });
+          }
+        })
+      },
+      //查询设备功能
+      controlTypeList(val,index) {
+        let self = this;
+        for(let i=0;i<self.hardwareList.length;i++){
+          if(self.hardwareList[i].hardwareTypeEnum.code == val){
+            this.$set(self.dialogForm.riskPlanHardwareList[index],'hardwareList',self.hardwareList[i].functionStatusList);
+            return
+          }
+        }
+      },
+      //查询传感器/设备下啦列表
       getOptionData(){
         optionSensor({}).then(response => {
           this.sensorList = response.data;
           this.sensorListData = JSON.parse(JSON.stringify(response.data))
         });
         optionHardware({}).then(response => {
-          var allDate = new Array();
-          for(let key=0 ;key<response.data.length;key++){
-            allDate.push({"id":response.data[key].hardwareTypeEnum.code,"name":response.data[key].hardwareTypeEnum.name})
+          this.hardwareList = response.data;
+        });
+        listClassifiedAll().then(response=>{
+          if(response.code==200){
+            this.levelList=response.data
+          }
+        })
+        listClasstypeAll().then(response=>{
+          if(response.code==200){
+            this.typeList=response.data;
+          }
+        })
+        this.selectRiskPlanLeveListRiskPlanId(1);
+      },
+      selectRiskPlanLeveListRiskPlanId(type){
+        selectRiskPlanLeveListRiskPlanId(this.addPlanData.id).then((response) => {
+          if(type == 1){
+            this.$set(this.form,'name',this.addPlanData.name);
+            this.$set(this,'inputType',true);
           }
-          this.hardwareList = allDate;
+          this.$set(this.form,'labRiskPlanLevels',response.data);
         });
       },
+      //返回
       backButton(){
         this.$parent.tableClickButton(5)
       },
-      /***************关联危险源开始****************/
-      // 开关
+      //实验室关联开关
       associatedDialogClick(type){
-        if(type == 1){
-          this.$set(this,'dialogAssociatedOpen',true);
-        }else if (type == 2){
-          this.$set(this,'dialogAssociatedOpen',false);
-        }else if(type == 3){
-          //提交
-        }
+        this.$parent.tableClickButton(1,{id:this.addPlanData.id,type:1,})
       },
       //查询
       onSearch(){
@@ -380,35 +355,228 @@
       resetForm(){
 
       },
-      //勾选
-      handleSelectionChange(selection){
-        this.ids = selection.map(item => item.id)
-        this.single = selection.length!==1
-        this.multiple = !selection.length
-      },
-      /***************关联危险源结束****************/
       addMinData(type){
         if(type == 1){
-          this.dialogForm.list1.push({})
+          if(this.dialogForm.riskPlanSensorList.length>8){
+            this.msgError('新增失败，最多只能新增九条监测规则')
+            return
+          }
+          this.dialogForm.riskPlanSensorList.push({
+            funNum:null,
+          })
         }else if(type == 2){
-          this.dialogForm.list2.push({})
+          if(this.dialogForm.riskPlanHardwareList.length>8){
+            this.msgError('新增失败，最多只能新增九条处置规则')
+            return
+          }
+          this.dialogForm.riskPlanHardwareList.push({
+            hardwareType:null,
+            operate:null,
+            overAct:null,
+          })
+        }
+      },
+      delMinData(type,index){
+        if(type == 1){
+          this.dialogForm.riskPlanSensorList.splice(index,1);
+        }else if (type == 2){
+          this.dialogForm.riskPlanHardwareList.splice(index,1);
         }
       },
       //提交
       submitForm(){
-
+        let self = this;
+        if(!this.dialogForm.riskPlanSensorList[0]){
+          this.msgError('请添加至少一个启动条件')
+          return
+        }
+        //提交数据检测条件区间是否重复
+        for(let i=0;i<self.dialogForm.riskPlanSensorList.length;i++){
+          if(self.dialogForm.riskPlanSensorList[i].minMonitor >= self.dialogForm.riskPlanSensorList[i].maxMonitor){
+            self.msgError('监测区间数值异常，请重新输入');
+            return
+          }
+          for(let x=0;x<self.dialogForm.riskPlanSensorList.length;x++){
+            if(self.dialogForm.riskPlanSensorList[i].funNum == self.dialogForm.riskPlanSensorList[x].funNum && i != x){
+              if(self.dialogForm.riskPlanSensorList[i].minMonitor >= self.dialogForm.riskPlanSensorList[x].minMonitor &&
+                 self.dialogForm.riskPlanSensorList[i].minMonitor <= self.dialogForm.riskPlanSensorList[x].maxMonitor){
+                self.msgError('监测区间不能重复，请重新输入');
+                return
+              }
+              if(self.dialogForm.riskPlanSensorList[i].maxMonitor >= self.dialogForm.riskPlanSensorList[x].minMonitor &&
+                self.dialogForm.riskPlanSensorList[i].maxMonitor <= self.dialogForm.riskPlanSensorList[x].maxMonitor){
+                self.msgError('监测区间不能重复，请重新输入');
+                return
+              }
+            }
+          }
+        }
+        let num = 0;
+        let age = 0;
+        if(this.dialogIndex != null){
+          for(let i=0;i<self.labRiskPlanLevels.length;i++){
+            if(self.labRiskPlanLevels[i].riskPlanLevel == self.dialogForm.riskPlanLevel){
+              this.msgError('无法添加多个相同等级的预案.')
+              return
+            }
+          }
+          for(let x=0;x<self.dialogForm.riskPlanSensorList.length;x++){
+            for(let i=0;i<self.labRiskPlanLevels.length;i++){
+              for(let o=0;o<self.labRiskPlanLevels[i].riskPlanSensorList.length;o++){
+                if(self.dialogForm.riskPlanSensorList[x].funNum==self.labRiskPlanLevels[i].riskPlanSensorList[o].funNum){
+                  num ++
+                  if(self.dialogForm.riskPlanSensorList[x].minMonitor>=self.labRiskPlanLevels[i].riskPlanSensorList[o].minMonitor&&
+                    self.dialogForm.riskPlanSensorList[x].minMonitor<=self.labRiskPlanLevels[i].riskPlanSensorList[o].maxMonitor){
+                    age++
+                    console.log('age++');
+                  }else if(self.dialogForm.riskPlanSensorList[x].maxMonitor>=self.labRiskPlanLevels[i].riskPlanSensorList[o].minMonitor&&
+                    self.dialogForm.riskPlanSensorList[x].maxMonitor<=self.labRiskPlanLevels[i].riskPlanSensorList[o].maxMonitor){
+                    age++
+                    console.log('age++');
+                  }
+                }
+              }
+            }
+          }
+        }else{
+          for(let i=0;i<self.form.labRiskPlanLevels.length;i++){
+            if(self.form.labRiskPlanLevels[i].riskPlanLevel == self.dialogForm.riskPlanLevel){
+              this.msgError('无法添加多个相同等级的预案.')
+              return
+            }
+          }
+          for(let x=0;x<self.dialogForm.riskPlanSensorList.length;x++){
+            for(let i=0;i<self.form.labRiskPlanLevels.length;i++){
+              for(let o=0;o<self.form.labRiskPlanLevels[i].riskPlanSensorList.length;o++){
+                if(self.dialogForm.riskPlanSensorList[x].funNum==self.form.labRiskPlanLevels[i].riskPlanSensorList[o].funNum){
+                  num ++
+                  if(self.dialogForm.riskPlanSensorList[x].minMonitor>=self.form.labRiskPlanLevels[i].riskPlanSensorList[o].minMonitor&&
+                    self.dialogForm.riskPlanSensorList[x].minMonitor<=self.form.labRiskPlanLevels[i].riskPlanSensorList[o].maxMonitor){
+                    age++
+                    console.log('age++');
+                  }else if(self.dialogForm.riskPlanSensorList[x].maxMonitor>=self.form.labRiskPlanLevels[i].riskPlanSensorList[o].minMonitor&&
+                    self.dialogForm.riskPlanSensorList[x].maxMonitor<=self.form.labRiskPlanLevels[i].riskPlanSensorList[o].maxMonitor){
+                    age++
+                    console.log('age++');
+                  }
+                }
+              }
+            }
+          }
+        }
+        console.log('self.dialogForm.riskPlanSensorList.length',self.dialogForm.riskPlanSensorList.length);
+        console.log('num',num);
+        console.log('age',age);
+        //提交数据对比已存在数据 是否区间重复
+        if(self.dialogForm.riskPlanSensorList.length == num && self.dialogForm.riskPlanSensorList.length == age){
+          self.msgError('监测区间不能与其他级别检测条件完全重复重复，请重新输入');
+          return
+        }
+        this.$refs["dialogForm"].validate(valid => {
+          if (valid) {
+            if(this.dialogIndex != null){
+              //修改预案级别数据
+              let text = [];
+              for(let i=0;i<self.form.labRiskPlanLevels.length;i++){
+                if(this.dialogIndex != i){
+                  for(let o=0;o<self.form.labRiskPlanLevels[i].riskPlanSensorList.length;o++){
+                    for(let x=0;x<self.sensorList.length;x++){
+                      if(self.form.labRiskPlanLevels[i].riskPlanSensorList[o].funNum == self.sensorList[x].funNum){
+                        text.push(self.sensorList[x].describe);
+                      }
+                    }
+                  }
+                }
+              }
+              for(let i=0;i<self.dialogForm.riskPlanSensorList.length;i++){
+                for(let x=0;x<self.sensorList.length;x++){
+                  if(self.dialogForm.riskPlanSensorList[i].funNum == self.sensorList[x].funNum){
+                    text.push(self.sensorList[x].describe);
+                  }
+                }
+              }
+              text = Array.from(new Set(text));
+              text = text+''
+              text = text.replace(",","+")
+              console.log(text);
+              let obj = JSON.parse(JSON.stringify(this.dialogForm))
+              obj.startCondition = text+'';
+              planLevelPut(obj).then((response) => {
+                this.msgSuccess(response.msg)
+                this.selectRiskPlanLeveListRiskPlanId();
+                this.$set(this,'dialogOpen',false);
+              });
+            }else{
+              //新增预案级别数据
+              let text = [];
+              for(let i=0;i<self.form.labRiskPlanLevels.length;i++){
+                for(let o=0;o<self.form.labRiskPlanLevels[i].riskPlanSensorList.length;o++){
+                  for(let x=0;x<self.sensorList.length;x++){
+                    if(self.form.labRiskPlanLevels[i].riskPlanSensorList[o].funNum == self.sensorList[x].funNum){
+                      text.push(self.sensorList[x].describe);
+                    }
+                  }
+                }
+              }
+              for(let i=0;i<self.dialogForm.riskPlanSensorList.length;i++){
+                for(let x=0;x<self.sensorList.length;x++){
+                  if(self.dialogForm.riskPlanSensorList[i].funNum == self.sensorList[x].funNum){
+                    text.push(self.sensorList[x].describe);
+                  }
+                }
+              }
+              text = Array.from(new Set(text));
+              text = text+''
+              text = text.replace(",","+")
+              console.log(text);
+              let obj = JSON.parse(JSON.stringify(this.dialogForm))
+              obj.riskPlanId = this.addPlanData.id;
+              obj.startCondition = text+'';
+              planLevelAdd(obj).then((response) => {
+                this.msgSuccess(response.msg)
+                this.selectRiskPlanLeveListRiskPlanId();
+                this.$set(this,'dialogOpen',false);
+              });
+            }
+          }
+        })
       },
       //取消
       cancel(){
         this.$set(this,'dialogOpen',false);
       },
       //新增/编辑预案
-      buttonClick(type){
+      buttonClick(type,item,index){
+        let self = this;
         if(type == 1){
+          this.$set(this,'dialogIndex',null);
           this.$set(this,'dialogTitle','新增预案规则');
+          this.$set(this,'dialogForm',{
+            riskPlanLevel:null,
+            ifExit:null,
+            riskPlanSensorList:[],
+            riskPlanHardwareList:[],
+          });
           this.$set(this,'dialogOpen',true);
         }else if(type == 2){
           this.$set(this,'dialogTitle','编辑预案规则');
+          this.$set(this,'dialogIndex',index);
+          let obj = JSON.parse(JSON.stringify(item))
+          this.$set(this,'dialogForm',{
+            id:obj.id,
+            riskPlanId:obj.riskPlanId,
+            riskPlanLevel:obj.riskPlanLevel,
+            ifExit:obj.ifExit,
+            riskPlanSensorList:obj.riskPlanSensorList,
+            riskPlanHardwareList:obj.riskPlanHardwareList,
+          });
+          let list = [];
+          for(let i=0;i<self.form.labRiskPlanLevels.length;i++){
+            if(i!=index){
+              list.push(self.form.labRiskPlanLevels[i]);
+            }
+          }
+          this.$set(this,'labRiskPlanLevels',JSON.parse(JSON.stringify(list)));
           this.$set(this,'dialogOpen',true);
         }else if(type == 3){
           this.$confirm('确定要删除该预案规则吗?', "警告", {
@@ -416,7 +584,30 @@
             cancelButtonText: "取消",
             type: "warning"
           }).then(function() {
-            console.log('删除该预案规则')
+            let text = [];
+            for(let i=0;i<self.form.labRiskPlanLevels.length;i++){
+              if(index != i){
+                for(let o=0;o<self.form.labRiskPlanLevels[i].riskPlanSensorList.length;o++){
+                  for(let x=0;x<self.sensorList.length;x++){
+                    if(self.form.labRiskPlanLevels[i].riskPlanSensorList[o].funNum == self.sensorList[x].funNum){
+                      text.push(self.sensorList[x].describe);
+                    }
+                  }
+                }
+              }
+            }
+            text = Array.from(new Set(text));
+            text = text+''
+            text = text.replace(",","+")
+            let obj = {
+              id:item.id,
+              startCondition:text,
+              riskPlanId:item.riskPlanId
+            }
+            planLevelDel(obj).then((response) => {
+              self.msgSuccess(response.msg)
+              self.selectRiskPlanLeveListRiskPlanId();
+            });
           }).then(() => {
           }).catch(() => {});
         }
@@ -466,6 +657,30 @@
     .plan-for-max-box {
       flex: 1;
       padding:0 20px 20px 20px;
+      .plan-for-max-box-name-box{
+        display: flex;
+        .plan-for-max-box-name-button-one{
+          width:80px;
+          text-align: center;
+          font-size:14px;
+          line-height:40px;
+          margin:40px 0 0 40px;
+        }
+        .plan-for-max-box-name-button-two{
+          width:80px;
+          text-align: center;
+          font-size:14px;
+          line-height:40px;
+          margin:40px 0 0 40px;
+        }
+        .plan-for-max-box-name-button-three{
+          width:80px;
+          text-align: center;
+          font-size:14px;
+          line-height:40px;
+          margin:40px 0 0 20px;
+        }
+      }
       .for-plan-box{
         position: relative;
         border-radius:10px;
@@ -541,7 +756,7 @@
           width:1030px;
           padding-top:21px;
           .min-for-text-box-one{
-            width:400px;
+            width:460px;
             line-height:30px;
             margin-bottom:21px;
             margin-right:40px;
@@ -558,7 +773,7 @@
             }
           }
           .min-for-text-box-two{
-            width:400px;
+            width:460px;
             line-height:30px;
             margin-bottom:21px;
             margin-right:40px;

src/views/emergencyManagement/plan/newAssociatedPage.vue

@@ -0,0 +1,536 @@
+<template>
+    <div class="newAssociatedPage">
+      <el-form :model="queryParams" ref="queryForm" :inline="true" class="form-box">
+        <el-form-item label="关键字" prop="name">
+          <el-input
+            style="width:160px;"
+            maxlength="10"
+            v-model="queryParams.searchValue"
+            placeholder="实验室/危险源"
+            clearable
+            size="small"
+          />
+        </el-form-item>
+        <el-form-item label="安全分类" prop="typeId">
+          <el-select v-model="queryParams.typeId" placeholder="请选择安全分类" style="width:160px;">
+            <el-option
+              v-for="dict in typeList"
+              :key="dict.id"
+              :label="dict.typeName"
+              :value="dict.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="安全分级" prop="leve">
+          <el-select v-model="queryParams.leve" placeholder="请选择安全分级" style="width:160px;">
+            <el-option
+              v-for="item in levelList"
+              :key="item.id"
+              :label="item.classifiedName"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="关联时间" prop="senseState">
+          <el-date-picker
+            :clearable="false"
+            v-model="dateRange"
+            size="small"
+            style="width: 240px"
+            value-format="yyyy-MM-dd"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item style="float: right;">
+          <el-col :span="1.5">
+            <p class="reset-button-one"
+               @click="backButton"
+               style="float: right;"
+            >返回</p>
+            <p class="add-button-one-90"
+               @click="handleAdd(1)"
+               style="float: right;margin-right:20px;"
+            >新增</p>
+          </el-col>
+        </el-form-item>
+        <el-form-item>
+          <p class="inquire-button-one" style="margin-right:10px;" @click="handleQuery">查询</p>
+          <p class="reset-button-one" @click="resetQuery">重置</p>
+        </el-form-item>
+      </el-form>
+
+      <el-table v-loading="loading" border :data="tableData">
+        <el-table-column label="实验室" align="left" prop="name" width="300" show-overflow-tooltip/>
+        <el-table-column label="安全分类" align="left" prop="typeName" width="140"/>
+        <el-table-column label="安全分级" align="left" prop="leveName" width="140"/>
+        <el-table-column label="危险源" align="left" prop="labSensorHazardRelationsList" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span style="margin-right:10px;" v-for="(item,index) in scope.row.labSensorHazardRelationsList" :key="index">
+              {{item.hazardName}}-{{item.sensorName}}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="关联时间" align="left" prop="relationTime" width="200"/>
+        <el-table-column label="状态" align="left" prop="senseState" width="140"/>
+        <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="100">
+          <template slot-scope="scope">
+            <div class="button-box">
+              <p style="height: 23px;
+                      color: #0183FA;
+                      line-height: 23px;
+                      font-size: 14px;
+                      cursor: pointer;
+                      padding: 0 10px !important;
+                      margin: 0;
+                      text-align: center;"
+                 @click="handleDelete(scope.row)"
+              >移除</p>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination :page-sizes="[20, 30, 40, 50]"
+                  v-show="total>0"
+                  :total="total"
+                  layout="total, prev, pager, next, sizes, jumper"
+                  :page.sync="queryParams.pageNum"
+                  :limit.sync="queryParams.pageSize"
+                  @pagination="getList"
+      />
+      <el-dialog title='关联实验室' v-if="dialogAssociatedOpen" :visible.sync="dialogAssociatedOpen" width="1200px">
+        <div style="height: 600px;overflow: hidden;display: flex;flex-direction: column;flex:1;">
+          <el-form :model="param" ref="queryForm" :inline="true" label-width="80px">
+            <el-form-item label="关键字" prop="searchValue">
+              <el-input
+                maxlength="10"
+                v-model="param.searchValue"
+                placeholder="实验室/危险源"
+                clearable
+                size="small"
+              />
+            </el-form-item>
+            <el-form-item label="安全分类" prop="typeId" label-width="80px">
+              <el-select v-model="param.typeId" placeholder="请选择安全分类" clearable size="small">
+                <el-option
+                  v-for="dict in typeList"
+                  :key="dict.id"
+                  :label="dict.typeName"
+                  :value="dict.id"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="安全分级" prop="leve" label-width="80px">
+              <el-select v-model="param.leve" placeholder="请选择安全分级" clearable size="small">
+                <el-option
+                  v-for="dict in levelList"
+                  :key="dict.id"
+                  :label="dict.classifiedName"
+                  :value="dict.id"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <p class="inquire-button-one" style="margin-right:10px;" @click="onSearch">查询</p>
+              <p class="reset-button-one" @click="resetForm">重置</p>
+            </el-form-item>
+          </el-form>
+          <!--<div style="display: flex;background: rgb(202,229,253);height:40px;line-height:40px;font-size:16px;padding:0 82px;">-->
+            <!--<p style="margin-right:24px;">已选择 <span style="color:#0183FA;">1</span> 项</p>-->
+            <!--<p style="color:#0183FA;cursor: pointer;" >全选本页</p>-->
+            <!--<p style="color:#0183FA;margin:0 32px 0 30px;cursor: pointer;" >选择全部</p>-->
+            <!--<p style="color:#FF8F1F;cursor: pointer;" >清除选项</p>-->
+          <!--</div>-->
+          <el-table ref="table" v-loading="loading" border :data="dialogTableData" @selection-change="handleSelectionChange" :row-key="getRowKeys">
+            <el-table-column type="selection" width="55" :reserve-selection="true" align="center" />
+            <el-table-column label="实验室" width="220" align="center" prop="id" />
+            <el-table-column label="安全分类" width="100" align="center" prop="name" />
+            <el-table-column label="安全分级" width="100" align="center" prop="key" />
+            <el-table-column label="危险源" align="left">
+              <template slot-scope="scope">
+                <div style="margin-bottom:10px;">
+                  <div v-for="(item,index) in scope.row.buttonList" :key="index"
+                    style="display: inline-block;padding:0 10px;border:1px solid #E0E0E0;margin:10px 10px 0 0;">
+                    <span style="line-height:40px;font-size:14px;">{{item.sensorName}}-{{item.hazardSubjectName}}</span>
+                    <span class="el-icon-circle-close" @click="delMinObj(scope.row.buttonList,index)"
+                          style="cursor: pointer;width:14px;height:14px;margin-left:10px;margin-top:14px;color:#666;"></span>
+                  </div>
+                  <p v-if="scope.row.buttonType == 0"
+                     @click="addObjButton(1,scope.row)"
+                    style="color:#0183FA;font-size:16px;border:1px solid #0183FA;
+                border-radius:4px;width:88px;height:30px;line-height:30px;
+                display: inline-block;margin:5px 0 0 10px;text-align: center;cursor: pointer;">新增危险源</p>
+                  <div v-if="scope.row.buttonType == 1"
+                    style="display: flex;margin-top:10px;">
+                    <el-select v-model="scope.row.hazardSubjectId" placeholder="请选择危险源"
+                               @change="(val)=>hardwareChange(val,scope.row)"
+                               style="width:168px;">
+                      <el-option
+                        v-for="dict in scope.row.labHazardSubVOList"
+                        :key="dict.xyId"
+                        :label="dict.label"
+                        :value="dict.xyId"
+                      ></el-option>
+                    </el-select>
+                    <p style="width:30px;text-align: center;line-height:40px;">-</p>
+                    <el-select v-model="scope.row.sensorId" placeholder="请选择传感器"
+                               @change="(val)=>sensorChange(val,scope.row)"
+                               style="width:168px;">
+                      <el-option
+                        v-for="dict in scope.row.labSensorList"
+                        :key="dict.id"
+                        :label="dict.name"
+                        :value="dict.id"
+                      ></el-option>
+                    </el-select>
+                    <p style="color:#CCCCCC;font-size:16px;border:1px solid #E0E0E0;
+                  border-radius:4px;width:80px;height:30px;line-height:30px;
+                  display: inline-block;margin:5px 0 0 10px;text-align: center;cursor: pointer;" @click="addObjButton(2,scope.row)">取消</p>
+                    <p style="color:#0183FA;font-size:16px;border:1px solid #0183FA;
+                  border-radius:4px;width:80px;height:30px;line-height:30px;
+                  display: inline-block;margin:5px 0 0 10px;text-align: center;cursor: pointer;" @click="addObjButton(3,scope.row)">确定</p>
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination
+            v-show="dialogTotal>0"
+            :total="dialogTotal"
+            :page.sync="param.pageNum"
+            :limit.sync="param.pageSize"
+            @pagination="getList"
+          />
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <div style="display: flex">
+            <p style="flex:1;"></p>
+            <p style="cursor: pointer;border-radius:6px;width:70px;line-height:30px;font-size:12px;text-align:center;margin-right:17px;color:#999999;background:#E0E0E0;" @click="handleAdd(2)">取消</p>
+            <p style="cursor: pointer;border-radius:6px;width:70px;line-height:30px;font-size:12px;text-align:center;color:#fff;background:#0045AF;" @click="handleAdd(3)">确定</p>
+            <p style="flex:1;"></p>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+</template>
+
+<script>
+  import { optionHardware } from "@/api/laboratory/hardware";
+  import { optionSensor } from "@/api/laboratory/sensor";
+  import { listClassifiedAll } from "@/api/laboratory/classified";
+  import { listClasstypeAll } from "@/api/laboratory/classtype";
+  import { getLabRiskPlanJoinSub,getLabRiskPlanNoJoinSub,deleteRiskPlanJoinSub,riskPlanJoinSub } from "@/api/evacuation3_2/index";
+  export default {
+    name: 'newAssociatedPage',
+    props:{
+      associationData:{},
+    },
+    data() {
+      return {
+        loading:false,
+        levelList:[],
+        typeList:[],
+        // 查询参数
+        dateRange:[],
+        queryParams:{
+          pageNum: 1,
+          pageSize:20,
+          searchValue:"",
+
+        },
+        total:0,
+        tableData:[],
+        /***************关联危险源开始****************/
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 查询数据
+        param:{
+          pageNum:1,
+          pageSize:10,
+        },
+        dialogTotal:5,
+        //关联实验室
+        dialogAssociatedOpen:false,
+        dialogTableData:[],
+        //传感器
+        sensorList:[],
+        sensorListData:[],
+        //设备
+        hardwareList:[],
+        /***************关联危险源结束****************/
+      }
+    },
+    created(){
+      this.getListAll();
+    },
+    mounted(){
+      this.getList();
+    },
+    methods:{
+      getListAll(){
+        optionSensor({}).then(response => {
+          this.sensorList = response.data;
+          this.sensorListData = JSON.parse(JSON.stringify(response.data))
+        });
+        optionHardware({}).then(response => {
+          this.hardwareList = response.data;
+        });
+        listClassifiedAll().then(response=>{
+          if(response.code==200){
+            this.levelList=response.data
+          }
+        })
+        listClasstypeAll().then(response=>{
+          if(response.code==200){
+            this.typeList=response.data;
+          }
+        });
+      },
+      //新增关联实验室弹窗
+      handleAdd(type){
+        let self = this;
+        if (type == 1){
+          this.resetForm();
+          this.$set(this,'dialogAssociatedOpen',true);
+        }else if(type == 2){
+          this.$set(this,'dialogAssociatedOpen',false);
+        }else if(type == 3){
+          let list = JSON.parse(JSON.stringify(this.$refs.table.selection));
+          if(!list[0]){
+            this.msgError('请勾选需要关联的实验室');
+            return
+          }
+          let newList = [];
+          for(let i=0;i<list.length;i++){
+            let obj = {
+              riskPlanId:self.associationData.id,
+              subjectId:list[i].id,
+              labSensorHazardRelations:list[i].buttonList,
+            }
+            newList.push(obj);
+          }
+          riskPlanJoinSub(newList).then(response => {
+            this.msgSuccess(response.msg);
+            this.resetQuery();
+            this.$set(this,'dialogAssociatedOpen',false);
+          });
+        }
+      },
+      //查询
+      onSearch(){
+        this.$set(this.param,'pageNum',1);
+        this.getLabRiskPlanNoJoinSub();
+      },
+      //重置
+      resetForm(){
+        this.$set(this,'param',{
+          pageNum:1,
+          pageSize:20,
+          searchValue:"",
+          typeId:"",
+          leve:"",
+        });
+        this.$set(this,'dialogTotal',0);
+        this.$set(this,'dialogTableData',[]);
+        this.onSearch();
+      },
+      //获取未关联实验室列表
+      getLabRiskPlanNoJoinSub(){
+        this.$set(this.param,'riskPlanId',this.associationData.id);
+        getLabRiskPlanNoJoinSub(this.param).then(response => {
+          for(let i=0;i<response.rows.length;i++){
+            response.rows[i].buttonType = 0;
+            response.rows[i].buttonList = [];
+            response.rows[i].sensorId = null;
+            response.rows[i].sensorName = null;
+            response.rows[i].hazardSubjectId = null;
+            response.rows[i].hazardSubjectName = null;
+          }
+          this.dialogTableData = response.rows;
+          this.dialogTotal = response.total;
+          this.loading = false;
+        });
+      },
+      //新增对象至选中实验室
+      addObjButton(type,item){
+        if(type == 1){
+          if(item.buttonList.length>8){
+            this.msgError('最多添加9项')
+            return
+          }
+          item.buttonType = 1;
+        }else if(type == 2){
+          item.buttonType = 0;
+        }else if(type == 3){
+          if(item.sensorId == null){
+            this.msgError('请选择要添加的危险源')
+            return
+          }
+          if(item.hazardSubjectId == null){
+            this.msgError('请选择要添加的传感器')
+            return
+          }
+          let obj = {
+            sensorId:item.sensorId,
+            sensorName:item.sensorName,
+            hazardSubjectId:item.hazardSubjectId,
+            hazardSubjectName:item.hazardSubjectName,
+          };
+          for(let i=0;i<item.buttonList.length;i++){
+            if(item.buttonList[i].sensorId == item.sensorId && item.buttonList[i].hazardSubjectId == item.hazardSubjectId){
+              this.msgError('该条件已存在');
+              return
+            }
+          }
+          item.buttonList.push(obj);
+          item.sensorId = null;
+          item.sensorName = null;
+          item.hazardSubjectId = null;
+          item.hazardSubjectName = null;
+          item.buttonType = 0;
+          this.$forceUpdate();
+        }
+      },
+      //删除列表内的对象
+      delMinObj(list,index){
+        list.splice(index,1)
+        this.$forceUpdate();
+      },
+      sensorChange(val,row){
+        console.log('传感器')
+        for(let i=0;i<row.labSensorList.length;i++){
+          if(row.labSensorList[i].id == val){
+            row.sensorId = row.labSensorList[i].id;
+            row.sensorName = row.labSensorList[i].name;
+          }
+        }
+        this.$forceUpdate();
+      },
+      hardwareChange(val,row){
+        console.log('危险源')
+        for(let i=0;i<row.labHazardSubVOList.length;i++){
+          if(row.labHazardSubVOList[i].xyId == val){
+            row.hazardSubjectId = row.labHazardSubVOList[i].xyId;
+            row.hazardSubjectName = row.labHazardSubVOList[i].label;
+          }
+        }
+        this.$forceUpdate();
+      },
+      //删除关联实验室
+      handleDelete(item){
+        let self = this;
+        this.$confirm('确定要删除该预案规则吗?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          let obj = {
+            riskPlanId:self.associationData.id,
+            subjectId:item.id
+          }
+          deleteRiskPlanJoinSub(obj).then((response) => {
+            self.msgSuccess(response.msg)
+            self.resetQuery();
+          });
+        }).then(() => {
+        }).catch(() => {});
+      },
+      //查询
+      handleQuery(){
+        this.$set(this.queryParams,'pageNum',1);
+        if(this.dateRange[0]){
+          this.queryParams.startDate = this.dateRange[0]
+          this.queryParams.endDate = this.dateRange[1]
+        }else {
+          this.queryParams.startDate = null
+          this.queryParams.endDate = null
+        }
+        this.getList();
+      },
+      //重置
+      resetQuery(){
+        this.$set(this,'queryParams',{
+          pageNum:1,
+          pageSize:20,
+          searchValue:"",
+          typeId:"",
+          leve:"",
+        });
+        this.$set(this,'dateRange',[]);
+        this.$set(this,'total',0);
+        this.$set(this,'tableData',[]);
+        this.handleQuery();
+      },
+      /** 查询列表 */
+      getList() {
+        let self = this;
+        this.loading = true;
+        this.$set(this.queryParams,'riskPlanId',this.associationData.id);
+        getLabRiskPlanJoinSub(this.queryParams).then(response => {
+          for(let i=0;i<response.rows.length;i++){
+            for(let o=0;o<self.typeList.length;o++){
+              if(response.rows[i].typeId == self.typeList[o].id){
+                response.rows[i].typeName = self.typeList[o].typeName;
+              }
+            }
+            for(let o=0;o<self.levelList.length;o++){
+              if(response.rows[i].level == self.levelList[o].id){
+                response.rows[i].leveName = self.levelList[o].classifiedName;
+              }
+            }
+            response.rows[i].labSensorHazardRelationsList = [];
+            for(let o=0;o<response.rows[i].labSensorHazardRelations.length;o++){
+              let obj = {
+                hazardName:response.rows[i].labSensorHazardRelations[o].hazardName,
+                sensorName:response.rows[i].labSensorHazardRelations[o].sensorName,
+              }
+              response.rows[i].labSensorHazardRelationsList.push(obj);
+            }
+          }
+          this.tableData = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+      },
+      //返回
+      backButton(){
+        if(this.associationData.type == 1){
+          this.$parent.tableClickButton(6)
+        }else{
+          this.$parent.tableClickButton(5)
+        }
+      },
+      /*===记录勾选数据===
+        需要再el-table 添加  :row-key="getRowKeys"
+        需要在selection 添加 :reserve-selection="true"
+      */
+      getRowKeys(row) {
+        return row.id
+      },
+      //勾选
+      handleSelectionChange(selection){
+        // console.log('selection',selection)
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .newAssociatedPage{
+    flex: 1;
+    display: flex !important;
+    flex-direction: column;
+    overflow: hidden;
+    padding:20px;
+    p {
+      margin: 0;
+      font-weight: 500;
+    }
+  }
+</style>

src/views/newEvacuationBigData.vue

@@ -0,0 +1,234 @@
+<template>
+    <div class="newEvacuationBigData">
+      <div class="title-positon-box"></div>
+      <div class="left-max-big-box">
+        <div class="left-big-box-one">
+          <div class="big-title-box">
+            <img src="@/assets/ZDimages/bigData3_2/icon_znjc_tb.png">
+            <p>智能检测</p>
+          </div>
+        </div>
+        <div class="left-big-box-two">
+          <div class="big-title-box">
+            <img src="@/assets/ZDimages/bigData3_2/icon_znkz_tb.png">
+            <p>智能检测</p>
+          </div>
+        </div>
+        <div class="left-big-box-three">
+          <div class="big-title-box">
+            <img src="@/assets/ZDimages/bigData3_2/icon_yygb_wxy.png">
+            <p>智能检测</p>
+          </div>
+        </div>
+      </div>
+      <div class="center-max-big-box">
+        <div class="left-big-box-one">
+
+        </div>
+        <div class="left-big-box-two">
+
+        </div>
+        <div class="left-big-box-three">
+          <div class="big-title-box">
+            <img src="@/assets/ZDimages/bigData3_2/icon_yygb_tb.png">
+            <p>语音广播</p>
+          </div>
+          <div class="horn-max-big-box-one">
+            <div class="horn-max-big-box-one-left">
+              <p>A001内测喇叭</p>
+              <p>A001内测喇叭</p>
+              <p>A001内测喇叭</p>
+              <p>A001内测喇叭</p>
+              <p>A001内测喇叭</p>
+              <p>A001内测喇叭</p>
+              <p>A001内测喇叭</p>
+            </div>
+            <div class="horn-max-big-box-one-right">
+
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right-max-big-box">
+        <div class="left-big-box-one">
+          <div class="big-title-box">
+            <img src="@/assets/ZDimages/bigData3_2/icon_sysnry_tb.png">
+            <p>实验室内人员</p>
+          </div>
+          <div class="user-max-box">
+            <div class="user-box">
+              <div>
+                <img src="https://img1.baidu.com/it/u=3393614753,2638302835&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
+                <p>李涛</p>
+              </div>
+            </div>
+            <div class="user-box">
+              <div>
+                <img src="https://img1.baidu.com/it/u=3393614753,2638302835&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
+                <p>李涛</p>
+              </div>
+            </div>
+            <div class="user-box">
+              <div>
+                <img src="https://img1.baidu.com/it/u=3393614753,2638302835&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
+                <p>李涛</p>
+              </div>
+            </div>
+            <div class="user-box">
+              <div>
+                <img src="https://img1.baidu.com/it/u=3393614753,2638302835&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
+                <p>李涛</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="left-big-box-two">
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: 'newEvacuationBigData'
+  }
+</script>
+
+<style scoped lang="scss">
+  .newEvacuationBigData{
+    position: relative;
+    display: flex;
+    height:100%;
+    width:100%;
+    background: #011d37;
+    p{
+      margin:0;
+    }
+    .title-positon-box{
+      position: absolute;
+      height:92px;
+      width: 1920px;
+    }
+    .big-title-box{
+      width:181px;
+      height:59px;
+      background: url("../assets/ZDimages/bigData3_2/img_zjdp_bg.png");
+      background-size: 100%;
+      display: flex;
+      img{
+        width:18px;
+        height:18px;
+        margin:27px 16px 0 20px;
+      }
+      p{
+        margin-top:16px;
+        line-height:40px;
+        color:#fff;
+        font-size:16px;
+      }
+    }
+    .left-max-big-box{
+      width:462px;
+      .left-big-box-one{
+        margin-left:30px;
+        margin-top:70px;
+        height:414px;
+      }
+      .left-big-box-two{
+        margin-left:30px;
+        height:274px;
+      }
+      .left-big-box-three{
+        margin-left:30px;
+        height:322px;
+      }
+    }
+    .center-max-big-box{
+      flex:1;
+      .left-big-box-one{
+        height:137px;
+        margin-top:82px;
+      }
+      .left-big-box-two{
+        height:500px;
+      }
+      .left-big-box-three{
+        height:284px;
+        margin-top:47px;
+        .big-title-box{
+          margin-left:21px;
+        }
+        .horn-max-big-box-one{
+          margin-top:20px;
+          display: flex;
+          .horn-max-big-box-one-left{
+            width:500px;
+            p{
+              width:128px;
+              line-height:28px;
+              font-size:14px;
+              text-align: center;
+              color:#fff;
+              border: 1px solid #1E768E;
+              border-radius: 5px;
+              display: inline-block;
+              margin:0 0 20px 20px;
+              cursor: pointer;
+            }
+            p:hover{
+              color:#24D1F9;
+            }
+            .check-p{
+              color:#24D1F9;
+            }
+          }
+          .horn-max-big-box-one-right{
+
+          }
+        }
+      }
+    }
+    .right-max-big-box{
+      width:462px;
+      .left-big-box-one{
+        margin-top:70px;
+        height:365px;
+        .big-title-box{
+          margin-left:65px;
+        }
+        .user-max-box{
+          margin-left:65px;
+          margin-top:27px;
+          .user-box{
+            width:148px;
+            line-height:48px;
+            border-radius:5px;
+            border: 1px solid #24D1F9;
+            display: inline-block;
+            margin:0 33px 18px 0;
+            div{
+              display: flex;
+              img{
+                margin:7px 16px;
+                height:36px;
+                width:36px;
+                border: 1px solid #24D1F9;
+                border-radius:50%;
+                padding:2px;
+                overflow: hidden;
+                box-shadow:0 0 5px 1px #24D1F9
+              }
+              p{
+                color:#24D1F9;
+              }
+            }
+          }
+        }
+      }
+      .left-big-box-two{
+        margin-top:70px;
+        height:615px;
+      }
+    }
+  }
+</style>