heyang

src/views/comprehensive/laboratoryManagement/accessAuthorization/applicationjinan.vue

@@ -0,0 +1,208 @@
+<!--授权日志-->
+<template>
+  <div class="application">
+    <div class="application-page" v-if="pageType == 1">
+      <div class="title-box">
+        <div @click="titleClick">
+          <p>门禁授权</p>
+          <p></p>
+        </div>
+        <div>
+          <p class="top-p-color">授权日志</p>
+          <p class="bottom-p-color"></p>
+        </div>
+      </div>
+      <div class="application-min">
+        <el-form :model="queryParamsData" ref="queryForm" :inline="true">
+          <el-form-item label="关键字" prop="searchValue" label-width="68px">
+            <el-input
+              maxlength="20"
+              v-model="queryParamsData.searchValue"
+              placeholder="姓名/实验室"
+              clearable
+              size="small"/>
+          </el-form-item>
+          <el-form-item label="状态" prop="status" label-width="50px">
+            <el-select v-model="queryParamsData.status" clearable placeholder="请选择状态">
+              <el-option
+                v-for="item in optionsListTwo"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
+            <p class="reset-button-one" @click="resetQuery">重置</p>
+          </el-form-item>
+        </el-form>
+        <el-table v-loading="loading" border :data="tableList">
+          <el-table-column label="所属学院" align="center" prop="college" show-overflow-tooltip/>
+          <el-table-column label="实验室" align="center" prop="subjectName" show-overflow-tooltip/>
+          <el-table-column label="位置" align="center" prop="position" show-overflow-tooltip v-if="$store.state.settings.smartAlarmType == 1"/>
+          <el-table-column label="实验室负责人" align="center" prop="subjectName" show-overflow-tooltip/>
+          <el-table-column label="门禁" align="center" prop="subjectName" show-overflow-tooltip/>
+          <el-table-column label="授权人数" align="center" prop="safeUserName"  width="160px" show-overflow-tooltip/>
+          <el-table-column label="状态" align="center" prop="applyStatus" width="180px" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span>{{scope.row.applyStatus==1?'在线':(scope.row.applyStatus==2?'离线':'')}}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination :page-sizes="[20, 30, 40, 50]"
+                    v-show="total>0"
+                    :total="total"
+                    :page.sync="queryParams.pageNum"
+                    :limit.sync="queryParams.pageSize"
+                    @pagination="getList"/>
+      </div>
+    </div>
+    <addPage v-if="pageType == 2"></addPage>
+  </div>
+</template>
+
+<script>
+  import { applyList } from "@/api/laboratory/subject";
+  import addPage from "./addPage.vue";
+  export default {
+    name: "application",
+    components: {
+      addPage
+    },
+    data(){
+      return{
+        pageType:1,
+        // table操作按钮校验
+        tableButtonType:this.hasPermiDom(['system:user_student:query','system:user_student:query']),
+        loading:false,
+        // 搜索数据
+        queryParamsData:{
+          pageNum:1,
+          pageSize:20,
+        },
+        // 搜索实际发送数据
+        queryParams:{
+          pageNum:1,
+          pageSize:20,
+        },
+        dateRange:[],
+        //数据数量
+        total:10,
+        tableList:[],
+        //审批状态
+        optionsListTwo:[{id:'0',name:'全部'},{id:'1',name:'待审核'},{id:'2',name:'已驳回'},{id:'3',name:'已授权'}],
+      }
+    },
+    created() {
+
+    },
+    mounted(){
+      this.getList();
+    },
+    methods:{
+      titleClick(){
+        this.$parent.titleClick(1);
+      },
+      //页面状态切换
+      goPageButton(type){
+        if(type == 1){
+          this.pageType = 1;
+        }else if(type == 2){
+          this.pageType = 2;
+        }else if(type == 3){
+          this.resetQuery();
+          this.pageType = 1;
+        }
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParamsData.pageNum = 1;
+        this.queryParamsData.pageSize = 20;
+        this.queryParams = JSON.parse(JSON.stringify(this.queryParamsData));
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.$set(this,'queryParamsData',{});
+        this.$set(this,'queryParams',{});
+        this.$set(this,'dateRange',[]);
+        this.handleQuery();
+      },
+      //获取数据列表
+      getList(){
+        this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
+        if(this.dateRange&&this.dateRange.length>0) {
+          this.queryParamsData.startTime = this.dateRange[0];
+          this.queryParamsData.endTime = this.dateRange[1];
+        } else {
+          this.queryParamsData.startTime = null;
+          this.queryParamsData.endTime = null;
+        }
+        applyList(this.queryParamsData).then(response => {
+          this.tableList = response.rows;
+          this.total = response.total
+        });
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .application{
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    .application-page{
+      flex:1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      .title-box{
+        display: flex;
+        border-bottom:1px solid #E0E0E0;
+        margin-bottom:20px;
+        div{
+          height:80px;
+          margin-right:20px;
+          cursor: pointer;
+          p:nth-child(1){
+            font-size:18px;
+            text-align: center;
+            padding:0 20px;
+            margin-top:26px;
+          }
+          p:nth-child(2){
+            width:40px;
+            height:4px;
+            border-radius:40px;
+            margin:12px auto;
+          }
+          .top-p-color{
+            color: #0045AF;
+          }
+          .bottom-p-color{
+            background: #0045AF;
+          }
+        }
+        .buttonTitleColorA{
+          color:#0045AF;
+        }
+        .buttonTitleColorB{
+          color:#999999;
+        }
+      }
+      .application-min{
+        flex:1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        margin:0 20px!important;
+        .button-box{
+          display: flex;
+        }
+      }
+    }
+  }
+
+</style>

src/views/comprehensive/laboratoryManagement/accessAuthorization/authorizejinan.vue

@@ -0,0 +1,212 @@
+<!--门禁授权-->
+<template>
+  <div class="authorize">
+    <div class="authorize-page" v-if="pageType == 1">
+      <div class="title-box">
+        <div>
+          <p class="top-p-color">门禁授权</p>
+          <p class="bottom-p-color"></p>
+        </div>
+        <div @click="titleClick">
+          <p>授权日志</p>
+          <p></p>
+        </div>
+      </div>
+      <div class="authorize-min">
+        <el-form :model="queryParamsData" ref="queryForm" :inline="true">
+          <el-form-item label="关键字" prop="searchValue" label-width="68px">
+            <el-input
+              maxlength="20"
+              v-model="queryParamsData.searchValue"
+              placeholder="姓名/实验室"
+              clearable
+              size="small"/>
+          </el-form-item>
+          <el-form-item label="状态" prop="status" label-width="50px">
+            <el-select v-model="queryParamsData.applyStatus" clearable placeholder="请选择状态">
+              <el-option
+                v-for="item in optionsListTwo"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
+            <p class="reset-button-one" @click="resetQuery">重置</p>
+          </el-form-item>
+        </el-form>
+        <el-table v-loading="loading" border :data="tableList">
+          <el-table-column label="所属学院" align="center" prop="college" show-overflow-tooltip/>
+          <el-table-column label="实验室" align="center" prop="subjectName" show-overflow-tooltip/>
+          <el-table-column label="位置" align="center" prop="position" show-overflow-tooltip v-if="$store.state.settings.smartAlarmType == 1"/>
+          <el-table-column label="实验室负责人" align="center" prop="subjectName" show-overflow-tooltip/>
+          <el-table-column label="门禁" align="center" prop="subjectName" show-overflow-tooltip/>
+          <el-table-column label="授权人数" align="center" prop="safeUserName"  width="160px" show-overflow-tooltip/>
+          <el-table-column label="状态" align="center" prop="applyStatus" width="180px" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span>{{scope.row.applyStatus==1?'在线':(scope.row.applyStatus==2?'离线':'')}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="120">
+            <template slot-scope="scope">
+              <div class="button-box">
+                <p class="table-min-button"
+                   v-hasPermi="['bottle:usegasAuditRecord:list']"
+                   @click="handleClick('',scope.row,'detail')"
+                >查看授权</p>
+              </div>
+
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination :page-sizes="[20, 30, 40, 50]"
+                    v-show="total>0"
+                    :total="total"
+                    :page.sync="queryParams.pageNum"
+                    :limit.sync="queryParams.pageSize"
+                    @pagination="getList"/>
+      </div>
+    </div>
+    <lookImpower v-if="pageType == 2" :pageData="pageData"></lookImpower>
+  </div>
+</template>
+
+<script>
+  import { openDoorApplyList} from "@/api/laboratory/subject";
+  import lookImpower from "./lookImpower.vue";
+  export default {
+    name: "authorize",
+    components: {
+      lookImpower
+    },
+    data(){
+      return{
+        pageType:1,
+        loading:false,
+        // 搜索数据
+        queryParamsData:{
+          pageNum:1,
+          pageSize:20,
+        },
+        // 搜索实际发送数据
+        queryParams:{
+          pageNum:1,
+          pageSize:20,
+        },
+        //数据数量
+        total:10,
+        tableList:[{}],
+        //审批状态
+        optionsListTwo:[{id:'0',name:'全部'},{id:'1',name:'待审核'},{id:'2',name:'已驳回'},{id:'3',name:'已授权'}],
+        //详情
+        pageData:{},
+      }
+    },
+    created() {
+
+    },
+    mounted(){
+      //this.getList();
+    },
+    methods:{
+      handleClick(index,row,doType){
+        console.log(1)
+        if(doType=='detail'){
+
+          this.pageType=2
+        }else if(doType=='back'){
+          this.pageType=1
+        }
+
+      },
+      //操作接口
+      goPageButton(){
+        this.pageType = 1;
+      },
+      titleClick(){
+        this.$parent.titleClick(2);
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParamsData.pageNum = 1;
+        this.queryParamsData.pageSize = 20;
+        this.queryParams = JSON.parse(JSON.stringify(this.queryParamsData));
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.$set(this,'queryParamsData',{});
+        this.$set(this,'queryParams',{});
+        this.handleQuery();
+      },
+      //获取数据列表
+      getList(){
+        this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
+        openDoorApplyList(this.queryParamsData).then(response => {
+          this.tableList = response.rows;
+          this.total = response.total
+        });
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .authorize{
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    .authorize-page{
+      flex:1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      .title-box{
+        display: flex;
+        border-bottom:1px solid #E0E0E0;
+        margin-bottom:20px;
+        div{
+          height:80px;
+          margin-right:20px;
+          cursor: pointer;
+          p:nth-child(1){
+            font-size:18px;
+            text-align: center;
+            padding:0 20px;
+            margin-top:26px;
+          }
+          p:nth-child(2){
+            width:40px;
+            height:4px;
+            border-radius:40px;
+            margin:12px auto;
+          }
+          .top-p-color{
+            color: #0045AF;
+          }
+          .bottom-p-color{
+            background: #0045AF;
+          }
+        }
+        .buttonTitleColorA{
+          color:#0045AF;
+        }
+        .buttonTitleColorB{
+          color:#999999;
+        }
+      }
+      .authorize-min{
+        flex:1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        margin:0 20px!important;
+        .button-box{
+          display: flex;
+        }
+      }
+    }
+  }
+</style>

src/views/comprehensive/laboratoryManagement/accessAuthorization/indexjinan.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="app-container accessAuthorization">
+      <!--授权-->
+      <authorize v-if="pageType == 1"></authorize>
+      <!--申请-->
+      <application v-if="pageType == 2"></application>
+    </div>
+</template>
+
+<script>
+  import authorize from "./authorizejinan.vue";
+  import application from "./applicationjinan.vue";
+  export default {
+    name: "index",
+    components: {
+      authorize,
+      application
+    },
+    data(){
+      return{
+        pageType:1,
+      }
+    },
+    created() {
+
+    },
+    mounted(){
+
+    },
+    methods:{
+      //选项卡切换
+      titleClick(type){
+        if(this.pageType != type){
+          this.pageType = type
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .accessAuthorization{
+    flex:1;
+    display: flex!important;
+    flex-direction: column;
+    overflow: hidden;
+    *{
+      margin:0;
+      font-weight:500;
+    }
+  }
+</style>

src/views/comprehensive/laboratoryManagement/accessAuthorization/lookImpower.vue

@@ -0,0 +1,378 @@
+<!--供应商管理-->
+<template>
+  <div class="supplier">
+    <div class="supplier-title">
+      <P>实验室名称-已授权列表 </P>
+      <p class="button-p reset-button-one" @click="backPage">返回</p>
+    </div>
+    <div class="supplier-page">
+      <el-form :model="queryParams" ref="queryForm" style="margin-top:20px;" :inline="true" label-width="120">
+        <el-form-item label="关键字" prop="name">
+          <el-input
+            v-model="queryParams.searchValue"
+            placeholder="名称/联系人/联系方式"
+            clearable
+            maxLength="30"
+            size="small"
+          />
+        </el-form-item>
+        <el-form-item label="类别" prop="zgType" label-width="80px">
+          <el-select v-model="queryParams.status" placeholder="请选择" clearable size="small">
+            <el-option label="学生" value="0" />
+            <el-option label="教师" value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="授权时间段" prop="dateRange" style="margin-left:10px;">
+          <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>
+          <p class="inquire-button-one" @click="handleQuery">查询</p>
+          <p class="reset-button-one" @click="resetQuery">重置</p>
+        </el-form-item>
+        <el-form-item label="" prop="title" style="float: right">
+          <p class="inquire-button-one"
+             style="width: 120px;margin-left: 10px;"
+             @click="handleClick('','','add')"
+             v-hasPermi="['airbottle:supplier:add']"
+          ><i class="el-icon-plus"></i>新增学生授权</p>
+          <p class="inquire-button-one"
+             style="width: 120px;margin-left: 10px;"
+             @click="handleClick('','','add')"
+             v-hasPermi="['airbottle:supplier:add']"
+          ><i class="el-icon-plus"></i>新增教职工授权</p>
+
+        </el-form-item>
+      </el-form>
+      <el-table border v-loading="loading" :data="tableData">
+        <el-table-column label="所属单位" align="left" prop="companyName"/>
+        <el-table-column label="姓名" align="left" prop="companyShort"></el-table-column>
+        <el-table-column label="验证方式" align="left" prop="contacts"></el-table-column>
+        <el-table-column label="类别" align="left" prop="phone"></el-table-column>
+        <el-table-column label="授权时间" align="left" prop="peopleSum"></el-table-column>
+        <el-table-column label="授权人" align="left" prop="carSum"></el-table-column>
+        <el-table-column label="失效时间" align="left" prop="status">
+          <template slot-scope="scope">
+            <el-date-picker
+              @change="switchChange(scope.row)"
+              v-model="scope.row.date+''"
+              type="date"
+              placeholder="请选择失效时间">
+            </el-date-picker>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="120">
+          <template slot-scope="scope">
+            <div class="button-box">
+              <p class="table-min-button"
+                 v-hasPermi="['bottle:usegasAuditRecord:list']"
+                 @click="handleClick('',scope.row,'delete')"
+              >删除</p>
+            </div>
+
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="display: flex;height:32px;margin-top:15px;">
+        <div style="flex:5;">
+          <pagination :page-sizes="[20, 30, 40, 50]"
+                      v-show="total>0"
+                      :total="total"
+                      style="margin:0;"
+                      :page.sync="queryParams.pageNum"
+                      :limit.sync="queryParams.pageSize"
+                      @pagination="getList"
+          />
+        </div>
+      </div>
+    </div>
+    <!--关联实验室弹框-->
+    <el-dialog :title=dialogTitle @close="handleClose" :visible.sync="dialogVisible" width="80%">
+      <el-form :model="dialogForm" ref="dialogForm" :inline="true" label-width="140px">
+        <el-form-item label="关键字" prop="name" >
+          <el-input
+            v-model="dialogForm.name"
+            placeholder="请输入名称/联系方式"
+            clearable
+            size="small"
+          />
+        </el-form-item>
+        <el-form-item>
+          <p class="inquire-button-one" style="margin-left:20px;" @click="onSearch">查询</p>
+          <p class="reset-button-one" style="margin-left:20px;" @click="resetForm">重置</p>
+        </el-form-item>
+      </el-form>
+      <div class="btn_list">
+        <i class="el-icon-warning"></i>
+        <i>已选择 {{labWhiteJoinSubList.length}} 项</i>
+        <i @click="toggleSelection(dialogTable)">全选本页</i>
+        <i></i>
+        <i @click="toggleSelection()">清除选项</i>
+        <div class="bottom-button-box">
+          <el-button class="color_99" @click="closeDialog(1)">关闭</el-button>
+          <el-button class="color_ff back_one" @click="closeDialog(2)">确定</el-button>
+        </div>
+      </div>
+      <el-table ref="multipleTable" border tooltip-effect="dark" :row-key="getRowKeys" :data="dialogTable"
+                highlight-current-row @selection-change="handleSelectionChange" style="cursor: pointer;height:500px;">
+        <el-table-column type="selection"  width="55" :reserve-selection="true" align="center"></el-table-column>
+        <el-table-column label="申请实验室名称" show-overflow-tooltip align="left" prop="name"/>
+        <el-table-column label="楼栋" align="left" prop="building" />
+        <el-table-column label="楼层" align="left" prop="buildName" />
+        <el-table-column label="学院" align="left" prop="deptName" />
+        <el-table-column label="实验室负责人" align="left" prop="adminName" />
+        <el-table-column label="安全分级" align="left" prop="levelName" >
+          <template slot-scope="scope">
+            <span :style="'color:'+scope.row.fiedColor+';'">{{scope.row.levelName}}</span>
+          </template>
+        </el-table-column>
+
+      </el-table>
+      <pagination :page-sizes="[20, 30, 40, 50]"
+                  v-show="total>0"
+                  :total="total"
+                  :page.sync="dialogForm.pageNum"
+                  :limit.sync="dialogForm.pageSize"
+                  @pagination="getUserRoleBySub"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { supplierDelete, supplierList, supplierStop } from '@/api/gasManage3_0/gasManage'
+
+export default {
+  name: "Approval",
+  components: {
+
+  },
+  data() {
+    return {
+      loading:false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize:20,
+        name:'',
+      },
+      total:0,
+      tableData:[{}],
+      dateRange:[],
+      pageData:{},
+      dialogForm:{},
+      dialogTitle:'选择学生',
+      dialogVisible:false,
+      labWhiteJoinSubList:[],
+
+    };
+
+
+  },
+  methods: {
+    //监听关联记录弹窗关闭
+    handleClose(){
+      console.log('弹窗关闭');
+    },
+    //查询
+    onSearch() {
+      this.dialogForm.pageNo = 1;
+      this.getUserRoleBySub();
+    },
+    //重置
+    resetForm() {
+      this.dialogForm.name = '';
+      this.dialogForm.floorId = '';
+      this.dialogForm.buildId = '';
+      this.floorList=[];
+      this.onSearch();
+    },
+    //取消选中
+    toggleSelection(rows) {
+      let _this=this;
+      if (rows) {
+        rows.forEach(row => {
+          this.$refs.multipleTable.toggleRowSelection(row,true);
+        });
+
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    //选中实验室
+    handleSelectionChange(val){
+      console.log(val)
+      console.log(this.labWhiteJoinSubList)
+      let _this=this;
+      this.labWhiteJoinSubList=[];
+      this.labWhiteJoinSubList=val;
+      _this.arr=this.labWhiteJoinSubList
+
+    },
+      handleClick(index,row,doType){
+        let _this=this;
+        if(doType=='add'){//新增学生授权
+          _this.dialogVisible=true;
+        }else if(doType=='add'){//新增教职工授权
+
+        }else if(doType=='delete'){//删除
+          let _this=this
+          this.$confirm('是否确认删除?', "警告", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).then(function() {
+            supplierDelete(row.id).then( response => {
+              _this.msgSuccess("删除成功");
+              _this.getList();
+            });
+          }).then(() => {
+            _this.getList();
+
+          }).catch(() => {});
+        }
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.queryParams.searchValue = "";
+        this.queryParams.status = "";
+        this.handleQuery();
+      },
+    //返回
+    backPage(){
+      this.$parent.handleClick('','','back');
+      this.$parent.getList();
+    },
+    getList(){
+      let _this=this;
+      supplierList(_this.queryParams).then( response => {
+        let res=response.rows;
+        _this.tableData=res;
+        _this.total=response.total;
+      });
+    },
+  },
+  mounted() {
+    this.getList()
+  }
+};
+</script>
+
+<style lang="scss">
+.supplier{
+  flex:1;
+  display: flex;
+  flex-direction: column;
+  /*顶部*/
+  .supplier-title{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #E0E0E0;
+    height: 90px;
+    p:nth-child(1){
+      line-height:60px;
+      color: #0045AF;
+      font-size:14px;
+      margin:0 12px 0 20px;
+    }
+    p:nth-child(2){
+      margin-right:20px;
+    }
+  }
+  .supplier-page{
+    flex:1;
+    display: flex!important;
+    flex-direction: column;
+   // box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
+    padding:20px 20px 20px!important;
+    border-radius:10px;
+  }
+  .btn_list{
+    width: 100%;
+    height: 40px;
+    background: rgba(1,131,250,0.1);
+    border-radius: 6px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 32px;
+    >i{
+      font-style: normal;
+      display: inline-block;
+      cursor: pointer;
+    }
+    >i:nth-of-type(1){
+      font-size: 20px;
+      color: #0045AF;
+      margin: 0 16px 0 14px;
+    }
+    >i:nth-of-type(2){
+      font-size: 16px;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      color: #999999;
+      line-height: 16px;
+    }
+    >i:nth-of-type(3){
+      font-size: 16px;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      color: #0045AF;
+      line-height: 16px;
+      margin: 0 28px 0 46px;
+    }
+    >i:nth-of-type(4){
+      font-size: 16px;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      color: #0045AF;
+      line-height: 16px;
+    }
+    >i:nth-of-type(5){
+      font-size: 16px;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      color: #FFA312;
+      line-height: 16px;
+      margin: 0 40px 0 28px;
+    }
+    .bottom-button-box{
+      display: flex;
+      width:220px;
+      margin: 0;
+      p{
+        font-size:14px;
+        height:30px;
+        width:100px;
+        line-height:30px;
+        text-align: center;
+        border-radius:4px;
+      }
+      p:nth-child(1){
+        border:1px solid #E0E0E0;
+        margin-right:20px;
+      }
+      p:nth-child(2){
+        border:1px solid #0045AF;
+      }
+    }
+  }
+
+}
+</style>

src/views/comprehensive/laboratoryManagement/subject/deviceListjinan.vue

@@ -0,0 +1,878 @@
+<!--物联设备配置-->
+<template>
+  <div class="deviceList scrollbar-box">
+    <div class="title-box">
+      <p class="left-title">传感器</p>
+      <p class="right-button reset-button-one" @click="backPage">返回</p>
+    </div>
+    <div class="for-max-box">
+      <div class="for-big-box" v-for="(item,index) in listCgq" :key="index">
+        <p class="for-title-p">{{subjectData.room}}-{{item.type.name}}传感器{{index+1}}</p>
+        <div class="for-text-box">
+          <p>网关编号：</p>
+          <el-tooltip class="item" effect="dark" :content="item.gatewayId" placement="top">
+            <p>{{item.gatewayId}}</p>
+          </el-tooltip>
+        </div>
+        <div class="for-button-box">
+          <p @click="editData(5,item)"><i class="el-icon-edit-outline"></i>编辑</p>
+          <p></p>
+          <p @click="delSensor(item)"><i class="el-icon-delete"></i>删除</p>
+        </div>
+      </div>
+      <p class="add-for-p" @click="addData(1)"><i class="el-icon-plus"></i>添加传感器</p>
+    </div>
+    <div class="title-box">
+      <p class="left-title">智能门禁</p>
+      <p class="right-button reset-button-one" @click="backPage">返回</p>
+    </div>
+    <div class="for-max-box">
+      <div class="for-big-box" v-for="(item,index) in listCgq" :key="index">
+        <p class="for-title-p">{{item.type.name}}</p>
+        <div class="for-text-box">
+          <p>门禁编号：</p>
+          <el-tooltip class="item" effect="dark" :content="item.gatewayId" placement="top">
+            <p>{{item.gatewayId}}</p>
+          </el-tooltip>
+        </div>
+        <div class="for-text-box">
+          <p>关联安全准入：</p>
+          <el-tooltip class="item" effect="dark" :content="item.gatewayId" placement="top">
+            <p>{{item.gatewayId}}</p>
+          </el-tooltip>
+        </div>
+        <div class="for-text-box">
+          <p>关联白名单：</p>
+          <el-tooltip class="item" effect="dark" :content="item.gatewayId" placement="top">
+            <p>{{item.gatewayId}}</p>
+          </el-tooltip>
+        </div>
+        <div class="for-button-box">
+          <p @click="editData('entrance',item)"><i class="el-icon-edit-outline"></i>编辑</p>
+          <p></p>
+          <p @click="delEntrance(item)"><i class="el-icon-delete"></i>删除</p>
+        </div>
+      </div>
+      <p class="add-for-p" @click="addData('entrance')"><i class="el-icon-plus"></i>添加智能门禁</p>
+    </div>
+    <div class="title-box">
+      <p class="left-title">一体机</p>
+    </div>
+    <div class="for-max-box">
+      <div class="for-big-box" v-for="(item,index) in listYtj" :key="index">
+        <p class="for-title-p">{{subjectData.room}}-{{item.type.name}}{{index+1}}</p>
+        <div class="for-text-box">
+          <p>一体机编号：</p>
+          <el-tooltip class="item" effect="dark" :content="item.hardwareNum" placement="top">
+            <p>{{item.hardwareNum}}</p>
+          </el-tooltip>
+        </div>
+        <div class="for-button-box">
+          <p @click="editData(6,item)"><i class="el-icon-edit-outline"></i>编辑</p>
+          <p></p>
+          <p @click="delHardware(item)"><i class="el-icon-delete"></i>删除</p>
+        </div>
+      </div>
+      <p class="add-for-p" @click="addData(2)"><i class="el-icon-plus"></i>添加一体机</p>
+    </div>
+    <div class="title-box">
+      <p class="left-title">控制设备</p>
+    </div>
+    <div class="for-max-box">
+      <div class="for-big-box-two" v-for="(item,index) in listkzsb" :key="index">
+        <p class="for-title-p">{{subjectData.room}}-{{item.type.name}}传感器{{index+1}}</p>
+        <div class="for-text-box">
+          <p>设备编号：</p>
+          <el-tooltip class="item" effect="dark" :content="item.relayCode" placement="top">
+            <p>{{item.relayCode}}</p>
+          </el-tooltip>
+        </div>
+        <div class="for-text-box">
+          <p>设备路由：</p>
+          <p>{{item.bit}}</p>
+        </div>
+        <div class="for-button-box">
+          <p @click="editData(7,item)"><i class="el-icon-edit-outline"></i>编辑</p>
+          <p></p>
+          <p @click="delHardwareTwo(item)"><i class="el-icon-delete"></i>删除</p>
+        </div>
+      </div>
+      <p class="add-for-p-two" @click="addData(3)"><i class="el-icon-plus"></i>添加控制设备</p>
+    </div>
+    <div class="title-box">
+      <p class="left-title">摄像头</p>
+    </div>
+    <div class="for-max-box">
+      <div class="for-big-box" v-for="(item,index) in listSpjk" :key="index">
+        <p class="for-title-p">{{subjectData.room}}-{{item.type.name}}{{index+1}}</p>
+        <div class="for-text-box">
+          <p>摄像头编号：</p>
+          <p></p>
+        </div>
+        <div class="for-text-box">
+          <p></p>
+          <el-tooltip class="item" effect="dark" :content="item.hardwareNum" placement="top">
+            <p>{{item.hardwareNum}}</p>
+          </el-tooltip>
+        </div>
+        <div class="for-button-box">
+          <p @click="editData(8,item)"><i class="el-icon-edit-outline"></i>编辑</p>
+          <p></p>
+          <p @click="delHardwareThree(item)"><i class="el-icon-delete"></i>删除</p>
+        </div>
+      </div>
+      <p class="add-for-p-two" @click="addData(4)"><i class="el-icon-plus"></i>添加摄像头</p>
+    </div>
+    <el-dialog :title="title" :visible.sync="addType" v-if="addType" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
+        <div v-if="upType == 1 || upType == 5">
+          <el-form-item label="传感器类型" prop="type">
+            <el-select v-model="form.type" placeholder="请选择传感器类型" style="width:320px;">
+              <el-option
+                v-for="item in sensorAddOptions"
+                :key="item.enumName"
+                :label="item.name"
+                :value="item.enumName">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="网关编号" prop="gatewayId">
+            <el-input v-model="form.gatewayId" placeholder="请输入网关编号"
+                      maxlength="30" style="width:320px;"/>
+          </el-form-item>
+          <el-form-item label="路由" prop="routeNum">
+            <el-input v-model="form.routeNum" oninput="value=value.replace(/[^0-9.]/g,'')" maxlength="2" placeholder="请输入路由" style="width:320px;"></el-input>
+          </el-form-item>
+          <el-form-item label="传感器参数" prop="configName">
+            <el-input v-model="form.configName"  placeholder="请输入传感器参数"
+                      maxlength="30" style="width:320px;"></el-input>
+          </el-form-item>
+          <el-form-item label="状态参数" prop="configStatus">
+            <el-input v-model="form.configStatus"  placeholder="请输入状态参数"
+                      maxlength="30" style="width:320px;"></el-input>
+          </el-form-item>
+        </div>
+        <div v-if="upType == 2 || upType == 6">
+          <el-form-item label="一体机名称" prop="name">
+            <el-input
+              style="width:320px;"
+              v-model="form.name"
+              placeholder="请输入一体机名称"
+              maxlength="8"
+              size="small"
+            />
+          </el-form-item>
+          <el-form-item label="一体机类型" prop="pcType">
+            <el-select v-model="form.pcType" placeholder="请选择一体机类型" style="width:320px;">
+              <el-option label="管控一体机" value="0" />
+              <el-option label="学习一体机" value="1" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="一体机编号" prop="hardwareNum">
+            <el-input
+              style="width:320px;"
+              v-model="form.hardwareNum"
+              placeholder="请输入一体机编号"
+              maxlength="30"
+              size="small"
+            />
+          </el-form-item>
+        </div>
+        <div v-if="upType == 3 || upType == 7">
+          <el-form-item label="设备类型" prop="type">
+            <el-select v-model="form.type" placeholder="请选择设备类型" style="width:320px;" :disabled="disabledType">
+              <el-option key="1" label="电源开关" value="1"></el-option>
+              <el-option key="2" label="智能通风" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="设备版本" prop="hardwareType">
+            <el-radio-group v-model="form.hardwareType">
+              <el-radio :label="1">老继电器</el-radio>
+              <el-radio :label="2">新继电器</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="设备编号" prop="relayCode">
+            <el-input v-model="form.relayCode" placeholder="请输入设备编号"
+                      maxlength="30" style="width:320px;"/>
+          </el-form-item>
+          <el-form-item label="设备路由" prop="bit">
+            <el-input v-model="form.bit" oninput="value=value.replace(/[^0-9.]/g,'')" maxlength="2" placeholder="请输入路由" style="width:320px;"></el-input>
+          </el-form-item>
+          <el-form-item label="设备参数" prop="configName" v-if="form.hardwareType == 2">
+            <el-input v-model="form.configName" maxlength="30" placeholder="请输入设备参数" style="width:320px;"></el-input>
+          </el-form-item>
+          <el-form-item label="参数状态" prop="configStatus" v-if="form.hardwareType == 2">
+            <el-input v-model="form.configStatus" maxlength="30" placeholder="请输入参数状态" style="width:320px;"></el-input>
+          </el-form-item>
+        </div>
+        <div v-if="upType == 4 || upType == 8">
+          <el-form-item label="摄像头编号" prop="hardwareNum">
+            <el-input v-model="form.hardwareNum" placeholder="摄像头编号"
+                      maxlength="30" style="width:320px;"/>
+          </el-form-item>
+        </div>
+        <div v-if="upType == 'entrance'">
+          <el-form-item label="门禁编号" prop="name">
+            <el-input
+              style="width:320px;"
+              v-model="form.name"
+              placeholder="请输入门禁编号"
+              maxlength="30"
+              size="small"
+            />
+          </el-form-item>
+          <el-form-item label="门禁名称" prop="name" >
+            <el-input
+              style="width:320px;"
+              v-model="form.name"
+              placeholder="请输入门禁名称"
+              maxlength="30"
+              size="small"
+            />
+          </el-form-item>
+          <el-form-item label="门禁权限" style="margin-bottom: 0">
+            <el-checkbox-group v-model="form.name">
+              <el-checkbox label="0" >关联安全准入</el-checkbox>
+              <el-checkbox label="1">关联白名单</el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+          <p style="margin:0 20px 0 104px;color: #FD2A2A;">关联之后申请安全准入或者白名单后自动授权门禁，不关联则需要单独授权门禁</p>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listBySubjectId,addSensor,putSensor,delSensor,addHardware,putHardware,delHardware } from "@/api/laboratory/subject";
+import { getSensorList } from "@/api/laboratory/sensor";
+export default {
+  name: "deviceList",
+  props:{
+    subjectData:{},
+  },
+  data() {
+    return {
+      title:"",
+      addType:false,
+      listCgq:[],  //传感器
+      listYtj:[],  //一体机
+      listkzsb:[],
+      listSpjk:[],   //摄像头
+      entranceList:[],//智能门禁
+      form:{},
+      // 表单校验
+      rules: {
+        name:[
+          {required: true, message: '一体机名称不能为空', trigger: 'blur'},
+          { required: true, message: "一体机名称不能为空", validator: this.spaceJudgment, trigger: "blur" }
+        ],
+        type:[
+          {required: true, message: '类型不能为空', trigger: 'blur'}
+        ],
+        gatewayId:[
+          {required: true, message: '网关不能为空', trigger: 'blur'},
+          { required: true, message: "网关不能为空", validator: this.spaceJudgment, trigger: "blur" }
+        ],
+        hardwareNum:[
+          { required: true, message: "请输入编号", trigger: "blur" },
+          { required: true, message: "请输入编号", validator: this.spaceJudgment, trigger: "blur" }
+        ],
+        pcType: [
+          { required: true, message: "请选择类型", trigger: "blur" },
+        ],
+        hardwareType: [
+          { required: true, message: "请选择设备版本", trigger: "blur" },
+        ],
+        relayCode: [
+          { required: true, message: "请输入设备编号", trigger: "blur" },
+          { required: true, message: "请输入设备编号", validator: this.spaceJudgment, trigger: "blur" }
+        ],
+        bit: [
+          { required: true, message: "请输入路由", trigger: "blur" },
+          { required: true, message: "请输入路由", validator: this.spaceJudgment, trigger: "blur" }
+        ],
+      },
+      //提交类型
+      upType:"",
+      //传感器类型
+      sensorAddOptions: [],
+    }
+  },
+  created() {
+    this.listBySubjectId();
+    this.getSensorList();
+  },
+  mounted(){
+
+  },
+  methods:{
+    // 取消按钮
+    cancel() {
+      this.addType = false;
+    },
+    // 提交
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if(this.upType == 1){
+            //新增传感器
+            this.addSensor();
+          }else if(this.upType == 5){
+            //编辑传感器
+            this.putSensor();
+          }else if(this.upType == 2){
+            //新增一体机
+            this.addHardware();
+          }else if(this.upType == 6){
+            //编辑一体机
+            this.putHardware();
+          }else if(this.upType == 3){
+            //新增控制设备
+            this.addHardwareTwo();
+          }else if(this.upType == 7){
+            //编辑控制设备
+            this.putHardwareTwo();
+          }else if(this.upType == 4){
+            //新增控制设备
+            this.addHardwareThree();
+          }else if(this.upType == 8){
+            //编辑控制设备
+            this.putHardwareThree();
+          }
+        }
+      });
+    },
+    //删除智能门禁
+    delEntrance(item){
+      this.$confirm('确认要删除该智能门禁?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        //  确定
+        delHardware(item.id).then((response) => {
+          this.msgSuccess(response.msg)
+          this.addType = false;
+          this.listBySubjectId();
+        });
+      }).catch(function() {
+        //  取消
+      });
+    },
+    //新增摄像头
+    addHardwareThree(){
+      let obj = {
+        type:4,
+        hardwareNum:this.form.hardwareNum,
+        subjectId:this.subjectData.id,
+        deptId:this.subjectData.deptId,
+        deptName:this.subjectData.deptName,
+      }
+      addHardware(obj).then(response => {
+        this.msgSuccess(response.msg)
+        this.addType = false;
+        this.listBySubjectId();
+      });
+    },
+    //编辑摄像头
+    putHardwareThree(){
+      let obj = {
+        id:this.form.id,
+        hardwareNum:this.form.hardwareNum,
+        subjectId:this.form.subjectId,
+        deptId:this.form.deptId,
+        deptName:this.form.deptName,
+      }
+      putHardware(obj).then(response => {
+        this.msgSuccess(response.msg)
+        this.addType = false;
+        this.listBySubjectId();
+      });
+    },
+    //删除摄像头
+    delHardwareThree(item){
+      this.$confirm('确认要删除该摄像头?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        //  确定
+        delHardware(item.id).then((response) => {
+          this.msgSuccess(response.msg)
+          this.addType = false;
+          this.listBySubjectId();
+        });
+      }).catch(function() {
+        //  取消
+      });
+    },
+    //新增控制设备
+    addHardwareTwo(){
+      let obj = {
+        type:this.form.type,
+        hardwareType:this.form.hardwareType,
+        relayCode:this.form.relayCode,
+        bit:this.form.bit,
+        configName:this.form.configName,
+        configStatus:this.form.configStatus,
+        subjectId:this.subjectData.id,
+        deptId:this.subjectData.deptId,
+        deptName:this.subjectData.deptName,
+      }
+      addHardware(obj).then(response => {
+        this.msgSuccess(response.msg)
+        this.addType = false;
+        this.listBySubjectId();
+      });
+    },
+    //编辑控制设备
+    putHardwareTwo(){
+      let obj = {
+        id:this.form.id,
+        hardwareType:this.form.hardwareType,
+        relayCode:this.form.relayCode,
+        bit:this.form.bit,
+        configName:this.form.configName,
+        configStatus:this.form.configStatus,
+        subjectId:this.form.subjectId,
+        deptId:this.form.deptId,
+        deptName:this.form.deptName,
+      }
+      putHardware(obj).then(response => {
+        this.msgSuccess(response.msg)
+        this.addType = false;
+        this.listBySubjectId();
+      });
+    },
+    //删除控制设备
+    delHardwareTwo(item){
+      this.$confirm('确认要删除该一体机?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        //  确定
+        delHardware(item.id).then((response) => {
+          this.msgSuccess(response.msg)
+          this.addType = false;
+          this.listBySubjectId();
+        });
+      }).catch(function() {
+        //  取消
+      });
+    },
+    //添加一体机
+    addHardware(){
+      let obj = {
+        type:0,
+        name:this.form.name,
+        pcType:this.form.pcType,
+        hardwareNum:this.form.hardwareNum,
+        subjectId:this.subjectData.id,
+        deptId:this.subjectData.deptId,
+        deptName:this.subjectData.deptName,
+      }
+      addHardware(obj).then(response => {
+        this.msgSuccess(response.msg)
+        this.addType = false;
+        this.listBySubjectId();
+      });
+    },
+    //编辑一体机
+    putHardware(){
+      let obj = {
+        id:this.form.id,
+        name:this.form.name,
+        pcType:this.form.pcType,
+        hardwareNum:this.form.hardwareNum,
+      }
+      putHardware(obj).then(response => {
+        this.msgSuccess(response.msg)
+        this.addType = false;
+        this.listBySubjectId();
+      });
+    },
+    //删除一体机
+    delHardware(item){
+      this.$confirm('确认要删除该一体机?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        //  确定
+        delHardware(item.id).then((response) => {
+          this.msgSuccess(response.msg)
+          this.addType = false;
+          this.listBySubjectId();
+        });
+      }).catch(function() {
+        //  取消
+      });
+    },
+    //添加传感器
+    addSensor(){
+      let obj = {
+        type:this.form.type,
+        gatewayId:this.form.gatewayId,
+        routeNum:this.form.routeNum,
+        configName:this.form.configName,
+        configStatus:this.form.configStatus,
+        subjectId:this.subjectData.id
+      }
+      addSensor(obj).then(response => {
+        this.msgSuccess(response.msg)
+        this.addType = false;
+        this.listBySubjectId();
+      });
+    },
+    //编辑传感器
+    putSensor(){
+      let obj = {
+        type:this.form.type,
+        id:this.form.id,
+        gatewayId:this.form.gatewayId,
+        routeNum:this.form.routeNum,
+        configName:this.form.configName,
+        configStatus:this.form.configStatus,
+      }
+      putSensor(obj).then(response => {
+        this.msgSuccess(response.msg)
+        this.addType = false;
+        this.listBySubjectId();
+      });
+    },
+    //删除传感器
+    delSensor(item){
+      this.$confirm('确认要删除该传感器?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        //  确定
+        delSensor(item.id).then((response) => {
+          this.msgSuccess(response.msg)
+          this.addType = false;
+          this.listBySubjectId();
+        });
+      }).catch(function() {
+        //  取消
+      });
+    },
+    //添加
+    addData(type){
+      // this.resetForm("form");
+      if(type == 1){
+        this.title = '新增传感器';
+        this.$set(this,'form',{
+          type:"",
+          gatewayId:"",
+          routeNum:"",
+          configName:"",
+          configStatus:"",
+        });
+      }else if(type == 2){
+        this.title = '新增一体机';
+        this.$set(this,'form',{
+          name:"",
+          pcType:"",
+          hardwareNum:"",
+        });
+      }else if(type == 3){
+        this.title = '新增控制设备';
+        this.form.hardwareType = 1;
+        this.disabledType = false;
+        this.$set(this,'form',{
+          type:"",
+          hardwareType:"",
+          relayCode:"",
+          bit:"",
+          configName:"",
+          configStatus:"",
+        });
+      }else if(type == 4){
+        this.title = '新增摄像头';
+        this.$set(this,'form',{
+          hardwareNum:"",
+        });
+      }else if(type == 'entrance'){
+        this.title = '新增智能门禁';
+        this.$set(this,'form',{
+          name:"",
+        });
+      }
+      this.addType = true;
+      this.upType = type;
+    },
+    //编辑
+    editData(type,row){
+      if(type == 5){
+        this.title = '编辑传感器';
+        this.$set(this,'form',JSON.parse(JSON.stringify(row)));
+        this.$set(this.form,'type',JSON.parse(JSON.stringify(row.type.enumName)));
+      }else if(type == 6){
+        this.title = '编辑一体机';
+        this.$set(this,'form',JSON.parse(JSON.stringify(row)));
+        this.$set(this.form,'pcType',JSON.parse(JSON.stringify(row.pcType+'')));
+      }else if(type == 7){
+        this.title = '编辑控制设备';
+        this.disabledType = true;
+        this.$set(this,'form',JSON.parse(JSON.stringify(row)));
+        this.$set(this.form,'type',JSON.parse(JSON.stringify(row.type.code+'')));
+      }else if(type == 8){
+        this.title = '编辑摄像头';
+        this.$set(this,'form',JSON.parse(JSON.stringify(row)));
+      }else if(type == 'entrance'){
+        this.title = '编辑智能门禁';
+        this.$set(this,'form',JSON.parse(JSON.stringify(row)));
+      }
+      this.addType = true;
+      this.upType = type;
+    },
+    //获取列表
+    listBySubjectId(){
+      let obj = {
+        subjectId:this.subjectData.id
+      };
+      console.log("obj",obj)
+      listBySubjectId(obj).then(response => {
+        this.$set(this,'listCgq',response.data.listCgq);
+        this.$set(this,'listYtj',response.data.listYtj);
+        this.$set(this,'listkzsb',response.data.listkzsb);
+        this.$set(this,'listSpjk',response.data.listSpjk);
+      });
+    },
+    //返回上一页
+    backPage(){
+      this.$parent.clickPage(1);
+    },
+    //传感器类型
+    getSensorList(){
+      getSensorList().then(response => {
+        this.sensorAddOptions = response.data;
+      });
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.deviceList{
+  flex:1;
+  display: flex;
+  flex-direction: column;
+  padding-bottom:20px;
+  border-radius:10px!important;
+  margin:5px 20px 20px 10px!important;
+  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
+  *{
+    margin:0;
+  }
+  .title-box{
+    display: flex;
+    margin:0 20px;
+    .left-title{
+      flex:1;
+      height:80px;
+      line-height:80px;
+      color:#0045AF;
+      font-size:18px;
+    }
+    .right-button{
+      margin:20px 0;
+    }
+  }
+  .for-max-box{
+    margin:0 40px;
+    font-weight:500;
+    .for-big-box{
+      border: 1px solid #E0E0E0;
+      display: inline-block;
+      overflow: hidden;
+      width:280px;
+      min-height:130px;
+      padding-bottom:10px;
+      border-radius: 6px;
+      margin:0 20px 20px 0;
+      .for-title-p{
+        background: rgba(182,214,254,1);
+        color:#0183FA;
+        font-size:16px;
+        line-height:40px;
+        display:block;
+        overflow:hidden;
+        text-overflow:ellipsis;
+        white-space:nowrap;
+        padding:0 16px;
+        margin-bottom:10px;
+        font-weight:700;
+      }
+      .for-text-box{
+        display: flex;
+        padding:0 23px;
+        p{
+          font-size:14px;
+          line-height:30px;
+          flex:1;
+        }
+        p:nth-child(1){
+          color:#333;
+          text-align: left;
+        }
+        p:nth-child(2){
+          color:#999;
+          text-align: right;
+          overflow:hidden;
+          text-overflow:ellipsis;
+          white-space:nowrap;
+        }
+      }
+      .for-button-box{
+        display: flex;
+        line-height:26px;
+        margin-top:10px;
+        p{
+          text-align: center;
+          font-size:14px;
+          color:#666666;
+        }
+        p:nth-child(1){
+          flex:1;
+          cursor: pointer;
+          i{
+            color:#1151b4;
+            margin-right:10px;
+          }
+        }
+        p:nth-child(2){
+          width:2px;
+          height:14px;
+          margin:6px 0;
+          background: #CCCCCC;
+        }
+        p:nth-child(3){
+          flex:1;
+          cursor: pointer;
+          i{
+            color:#ff6868;
+            margin-right:10px;
+          }
+        }
+      }
+    }
+    .for-big-box-two{
+      border: 1px solid #E0E0E0;
+      display: inline-block;
+      overflow: hidden;
+      width:280px;
+      min-height:158px;
+      padding-bottom:10px;
+      border-radius: 6px;
+      margin:0 20px 20px 0;
+      .for-title-p{
+        background: rgba(182,214,254,1);
+        color:#0183FA;
+        font-size:16px;
+        line-height:40px;
+        display:block;
+        overflow:hidden;
+        text-overflow:ellipsis;
+        white-space:nowrap;
+        padding:0 16px;
+        margin-bottom:10px;
+        font-weight:700;
+      }
+      .for-text-box{
+        display: flex;
+        padding:0 23px;
+        p{
+          font-size:14px;
+          line-height:30px;
+          flex:1;
+        }
+        p:nth-child(1){
+          text-align: left;
+          color:#333;
+        }
+        p:nth-child(2){
+          color:#999;
+          text-align: right;
+          overflow:hidden;
+          text-overflow:ellipsis;
+          white-space:nowrap;
+        }
+      }
+      .for-button-box{
+        display: flex;
+        line-height:26px;
+        margin-top:10px;
+        p{
+          text-align: center;
+          font-size:14px;
+          color:#666666;
+        }
+        p:nth-child(1){
+          flex:1;
+          cursor: pointer;
+          i{
+            color:#1151b4;
+            margin-right:10px;
+          }
+        }
+        p:nth-child(2){
+          width:2px;
+          height:14px;
+          margin:6px 0;
+          background: #CCCCCC;
+        }
+        p:nth-child(3){
+          flex:1;
+          cursor: pointer;
+          i{
+            color:#ff6868;
+            margin-right:10px;
+          }
+        }
+      }
+    }
+    .add-for-p{
+      font-size:14px;
+      border: 1px solid #E0E0E0;
+      display: inline-block;
+      overflow: hidden;
+      width:280px;
+      height:130px;
+      line-height:130px;
+      text-align: center;
+      border-radius: 6px;
+      color:#999999;
+      cursor: pointer;
+      margin:0 20px 20px 0;
+      i{
+        margin-right:10px;
+      }
+    }
+    .add-for-p-two{
+      font-size:14px;
+      border: 1px solid #E0E0E0;
+      display: inline-block;
+      overflow: hidden;
+      width:280px;
+      height:158px;
+      line-height:158px;
+      text-align: center;
+      border-radius: 6px;
+      color:#999999;
+      cursor: pointer;
+      margin:0 20px 20px 0;
+      i{
+        margin-right:10px;
+      }
+    }
+  }
+}
+</style>