|
|
@@ -1,95 +1,97 @@
|
|
|
<template>
|
|
|
<div class="subject">
|
|
|
<div class="subject-page" v-if="pageType == 1">
|
|
|
- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
|
|
|
- <el-form-item label="学院" prop="deptId" label-width="60px">
|
|
|
- <el-select v-model="queryParams.deptId" placeholder="请选择学院" clearable size="small">
|
|
|
- <el-option
|
|
|
- v-for="dict in deptOptions"
|
|
|
- :key="dict.deptId"
|
|
|
- :label="dict.deptName"
|
|
|
- :value="dict.deptId"
|
|
|
- ></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="实验室名称" prop="name" label-width="100px">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.name"
|
|
|
- placeholder="请输入实验室名称"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item style="float: right;">
|
|
|
- <el-col :span="1.5" style="margin-bottom:20px;">
|
|
|
- <p class="add-button-one-120"
|
|
|
- @click="clickPage(2)"
|
|
|
- v-hasPermi="['laboratory:subject:add']"
|
|
|
- ><i class="el-icon-plus"></i>新增实验室</p>
|
|
|
- </el-col>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item style="margin-right: 20px;">
|
|
|
- <p class="inquire-button-one" style="margin-left:20px;" @click="handleQuery">查询</p>
|
|
|
- <p class="reset-button-one" style="margin-left:20px;" @click="resetQuery">重置</p>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
<div class="subject-page-min">
|
|
|
<div class="left-subject-list" >
|
|
|
- <el-table ref="multipleTable" border :data="subjectList" highlight-current-row @current-change="handleCurrentChange" style="cursor: pointer;">
|
|
|
- <el-table-column label="排序" align="left" prop="id" width="80">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-input maxlength="4" type="text" oninput ="value=value.replace(/[^0-9.]/g,'')" v-model="scope.row.diyOrder" @focus="liveSort(scope.row)" @blur="editSort(scope.row)"></el-input>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="实验室名称" align="left" prop="name" width="230" show-overflow-tooltip/>
|
|
|
- <el-table-column label="分类/分级" align="left" prop="levelName" width="120" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">
|
|
|
- <span >{{scope.row.typeName}}/</span>
|
|
|
- <span :style="'color:'+scope.row.fiedColor+';'">{{scope.row.levelName}}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="学院" align="left" prop="deptName" width="150" show-overflow-tooltip/>
|
|
|
- <el-table-column label="实验室责任人" align="left" prop="adminName" width="120" show-overflow-tooltip/>
|
|
|
- <el-table-column label="安全责任人" align="left" prop="safeUserName" width="200" show-overflow-tooltip/>
|
|
|
- <el-table-column label="操作" align="left" width="160">
|
|
|
- <template slot-scope="scope">
|
|
|
- <div style="display: flex;">
|
|
|
- <p class="table-min-button" style="margin-right:10px;" v-hasPermi="['laboratory:subject:query']" @click="clickPage(7,scope.row)">详情</p>
|
|
|
- <el-dropdown style="height:23px;" trigger="click" size="mini" @command="(command) => handleCommand(command, scope.row)">
|
|
|
- <p class="table-min-button">更多<i class="el-icon-d-arrow-right"></i></p>
|
|
|
- <el-dropdown-menu slot="dropdown" style="margin:0!important;">
|
|
|
- <el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="1" v-hasPermiAnd="['laboratory:subject:query','laboratory:subject:edit']">关联配置</el-dropdown-item>
|
|
|
- <el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="2">物联配置</el-dropdown-item>
|
|
|
- <el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="3" v-hasPermi="['laboratory:subjectmaterial:add']">准入配置</el-dropdown-item>
|
|
|
- <el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="4" v-hasPermiAnd="['laboratory:subject:query','laboratory:subject:edit']">编辑</el-dropdown-item>
|
|
|
- <!--<el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="5"-->
|
|
|
- <!--v-hasPermi="['laboratory:subject:remove']">删除</el-dropdown-item>-->
|
|
|
- </el-dropdown-menu>
|
|
|
- </el-dropdown>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <pagination
|
|
|
- v-show="total>0"
|
|
|
- :total="total"
|
|
|
- :page.sync="queryParams.pageNum"
|
|
|
- :limit.sync="queryParams.pageSize"
|
|
|
- @pagination="getList"
|
|
|
- />
|
|
|
+ <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" style="border-bottom:1px solid #D8D8D8">
|
|
|
+ <el-form-item label="学院" prop="deptId" label-width="60px">
|
|
|
+ <el-select v-model="queryParams.deptId" placeholder="请选择学院" clearable size="small">
|
|
|
+ <el-option
|
|
|
+ v-for="dict in deptOptions"
|
|
|
+ :key="dict.deptId"
|
|
|
+ :label="dict.deptName"
|
|
|
+ :value="dict.deptId"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="实验室名称" prop="name" label-width="100px">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.name"
|
|
|
+ placeholder="请输入实验室名称"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="float: right;">
|
|
|
+ <el-col :span="1.5" style="margin-bottom:26px;margin-right: 20px">
|
|
|
+ <p class="add-button-one-120"
|
|
|
+ @click="clickPage(2)"
|
|
|
+ v-hasPermi="['laboratory:subject:add']"
|
|
|
+ ><i class="el-icon-plus"></i>新增实验室</p>
|
|
|
+ </el-col>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="margin-right: 20px;">
|
|
|
+ <p class="inquire-button-one" style="margin-left:20px;" @click="handleQuery">查询</p>
|
|
|
+ <p class="reset-button-one" style="margin-left:20px;" @click="resetQuery">重置</p>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="table_border">
|
|
|
+ <el-table ref="multipleTable" border :data="subjectList" highlight-current-row @current-change="handleCurrentChange" style="cursor: pointer;">
|
|
|
+ <el-table-column label="排序" align="left" prop="id" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input maxlength="4" type="text" oninput ="value=value.replace(/[^0-9.]/g,'')" v-model="scope.row.diyOrder" @focus="liveSort(scope.row)" @blur="editSort(scope.row)"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="实验室名称" align="left" prop="name" show-overflow-tooltip/>
|
|
|
+ <el-table-column label="房间号" align="left" prop="room" width="120" show-overflow-tooltip/>
|
|
|
+ <el-table-column label="分类/分级" align="left" prop="levelName" width="150" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span >{{scope.row.typeName}}/</span>
|
|
|
+ <span :style="'color:'+scope.row.fiedColor+';'">{{scope.row.levelName}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="实验室责任人" align="left" prop="adminName" width="130" show-overflow-tooltip/>
|
|
|
+ <el-table-column label="安全责任人" align="left" prop="safeUserName" width="200" show-overflow-tooltip/>
|
|
|
+ <el-table-column label="操作" align="left" width="160">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="display: flex;height:30px;">
|
|
|
+ <p class="table-min-button" style="margin-right:10px;" v-hasPermi="['laboratory:subject:query']" @click="clickPage(7,scope.row)">详情</p>
|
|
|
+ <el-dropdown trigger="click" size="mini" @command="(command) => handleCommand(command, scope.row)">
|
|
|
+ <p class="table-min-button">更多<i class="el-icon-d-arrow-right"></i></p>
|
|
|
+ <el-dropdown-menu slot="dropdown" style="margin:0!important;">
|
|
|
+ <el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="1" v-hasPermiAnd="['laboratory:subject:query','laboratory:subject:edit']">关联配置</el-dropdown-item>
|
|
|
+ <el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="2">物联配置</el-dropdown-item>
|
|
|
+ <el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="3" v-hasPermi="['laboratory:subjectmaterial:add']">准入配置</el-dropdown-item>
|
|
|
+ <el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="4" v-hasPermiAnd="['laboratory:subject:query','laboratory:subject:edit']">编辑</el-dropdown-item>
|
|
|
+ <!--<el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="5"-->
|
|
|
+ <!--v-hasPermi="['laboratory:subject:remove']">删除</el-dropdown-item>-->
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination
|
|
|
+ v-show="total>0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="right-subject-box scrollbar-box" :class="rightButtonType == 4?'overflow-box':''" v-if="checkedSubject.id">
|
|
|
<div class="top-button-box">
|
|
|
<div :class="rightButtonType == 1 ? 'buttonColorA' : 'buttonColorB'" @click="rightButtonClick(1)">传感器监测</div>
|
|
|
<div :class="rightButtonType == 2 ? 'buttonColorA' : 'buttonColorB'" @click="rightButtonClick(2)">物联控制</div>
|
|
|
<div :class="rightButtonType == 3 ? 'buttonColorA' : 'buttonColorB'" @click="rightButtonClick(3)">视频监控</div>
|
|
|
- <div :class="rightButtonType == 4 ? 'buttonColorA' : 'buttonColorB'" @click="rightButtonClick(4)">智能声光报警器</div>
|
|
|
+ <div :class="rightButtonType == 4 ? 'buttonColorA' : 'buttonColorB'" @click="rightButtonClick(4)">声光报警器</div>
|
|
|
<div :class="rightButtonType == 5 ? 'buttonColorA' : 'buttonColorB'" @click="rightButtonClick(5)">智能门禁</div>
|
|
|
</div>
|
|
|
<!--传感器-->
|
|
|
<div class="bottom-max-box" :class="rightButtonType == 4?'overflow-box':''">
|
|
|
<div class="bottom-sensor-box" v-if="rightButtonType == 1">
|
|
|
- <p class="top-title">当前位置：{{checkedSubject.subAddrr.buildName}}{{checkedSubject.subAddrr.floorName}}</p>
|
|
|
+ <p class="top-title"><i>{{checkedSubject.deptName}}</i><i>当前位置：{{checkedSubject.subAddrr.buildName}}{{checkedSubject.subAddrr.floorName}}</i></p>
|
|
|
<div class="sensor-for-max-box" v-if="checkedSubject.sensorFunctionStatusList[0]">
|
|
|
<div class="sensor-for-big-box"
|
|
|
:class="item.type == 1 ? 'sensor-color-a' : (item.type == 2 ? 'sensor-color-b' : 'sensor-color-c')"
|
|
|
@@ -126,50 +128,60 @@
|
|
|
<p class="bottom-text" v-if="checkedSubject.sensorFunctionStatusList[0]">数据上报时间：{{checkedSubject.sensorFunctionStatusList[0].sendDate}}</p>
|
|
|
</div>
|
|
|
<div class="bottom-switch-box" v-if="rightButtonType == 2">
|
|
|
- <p class="top-title">当前位置：{{checkedSubject.subAddrr.buildName}}{{checkedSubject.subAddrr.floorName}}</p>
|
|
|
+ <p class="top-title"><i>{{checkedSubject.deptName}}</i><i>当前位置：{{checkedSubject.subAddrr.buildName}}{{checkedSubject.subAddrr.floorName}}</i></p>
|
|
|
<div class="switch-for-max-box" v-show="checkedSubject.VOlist[0]" v-hasPermi="['laboratory:subcontrol:set']">
|
|
|
<div class="switch-for-big-box" v-for="(item,index) in checkedSubject.VOlist" :key="index">
|
|
|
<div class="switch-for-min-box" v-if="item.hardwareTypeEnum.enumName == 'SWITCH'">
|
|
|
- <p class="switch-for-min-title">{{item.hardwareName}}</p>
|
|
|
- <el-switch
|
|
|
- v-if="item.state.code == 3||item.state.code == 4"
|
|
|
- class="switch"
|
|
|
- @click.native="changeIsNeedCaptcha(item)"
|
|
|
- v-model="item.state.code"
|
|
|
- :active-value="3"
|
|
|
- :inactive-value="4"
|
|
|
- active-text="开"
|
|
|
- inactive-text="关"
|
|
|
- disabled>
|
|
|
- </el-switch>
|
|
|
- <p class="switch-null-p" v-else>{{item.state.name}}</p>
|
|
|
+ <div class="switch-for-min-box_t">
|
|
|
+ <p class="switch-for-min-title">{{item.hardwareName}}</p>
|
|
|
+ <p class="switch-null-p" v-if="item.state.code != 3 && item.state.code != 4" >{{item.state.name}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="switch-for-min-box_b">
|
|
|
+ <p class="switch-null-ventilate">预案排风</p>
|
|
|
+ <el-switch
|
|
|
+ v-if="item.state.code == 3||item.state.code == 4"
|
|
|
+ class="switch"
|
|
|
+ @click.native="changeIsNeedCaptcha(item)"
|
|
|
+ v-model="item.state.code"
|
|
|
+ :active-value="3"
|
|
|
+ :inactive-value="4"
|
|
|
+ active-text="开启"
|
|
|
+ inactive-text="关闭"
|
|
|
+ disabled>
|
|
|
+ </el-switch>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="switch-for-min-box" v-if="item.hardwareTypeEnum.enumName == 'AI_VENTILATION'">
|
|
|
- <p class="switch-for-min-title">{{item.hardwareName}}</p>
|
|
|
- <el-switch
|
|
|
- v-if="item.state.code == 3||item.state.code == 4"
|
|
|
- class="switch"
|
|
|
- @click.native="changeIsNeedCaptcha(item)"
|
|
|
- v-model="item.state.code"
|
|
|
- :active-value="3"
|
|
|
- :inactive-value="4"
|
|
|
- active-text="开"
|
|
|
- inactive-text="关"
|
|
|
- disabled>
|
|
|
- </el-switch>
|
|
|
- <p class="switch-null-p" v-else>{{item.state.name}}</p>
|
|
|
+ <div class="switch-for-min-box_t">
|
|
|
+ <p class="switch-for-min-title">{{item.hardwareName}}</p>
|
|
|
+ <p class="switch-null-p" v-if="item.state.code != 3 && item.state.code != 4">{{item.state.name}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="switch-for-min-box_b">
|
|
|
+ <p class="switch-null-ventilate">预案排风</p>
|
|
|
+ <el-switch
|
|
|
+ v-if="item.state.code == 3||item.state.code == 4"
|
|
|
+ class="switch"
|
|
|
+ @click.native="changeIsNeedCaptcha(item)"
|
|
|
+ v-model="item.state.code"
|
|
|
+ :active-value="3"
|
|
|
+ :inactive-value="4"
|
|
|
+ active-text="开启"
|
|
|
+ inactive-text="关闭"
|
|
|
+ disabled>
|
|
|
+ </el-switch>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="switch-for-min-box" v-if="item.hardwareTypeEnum.enumName == 'ONE_MACHINE'">
|
|
|
+ <p class="switch-for-min-title">广播系统</p>
|
|
|
+ <p class="switch-for-min-button" @click="handleAdd(item.subId)">播放文字</p>
|
|
|
</div>
|
|
|
- <!--<div class="switch-for-min-box" v-if="item.hardwareTypeEnum.enumName == 'ONE_MACHINE'">-->
|
|
|
- <!--<p class="switch-for-min-title">广播系统</p>-->
|
|
|
- <!--<p class="switch-for-min-button" @click="handleAdd(item.subId)">播放文字</p>-->
|
|
|
- <!--</div>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
<img class="null-data-img" src="@/assets/ZDimages/null-data.png" v-show="!checkedSubject.VOlist[0]">
|
|
|
<p class="null-text-p" v-show="!checkedSubject.VOlist[0]">暂无物联控制信息，请在更多操作-物联设备配置中进行添加</p>
|
|
|
</div>
|
|
|
<div class="bottom-video-box" v-if="rightButtonType == 3">
|
|
|
- <p class="top-title">当前位置：{{checkedSubject.subAddrr.buildName}}{{checkedSubject.subAddrr.floorName}}</p>
|
|
|
+ <p class="top-title"><i>{{checkedSubject.deptName}}</i><i>当前位置：{{checkedSubject.subAddrr.buildName}}{{checkedSubject.subAddrr.floorName}}</i></p>
|
|
|
<div class="video-for-max-box" v-if="checkedSubject.videoData[0]">
|
|
|
<div class="switch-for-big-box" v-for="(item,index) in checkedSubject.videoData" :key="index">
|
|
|
<video :id="item.divId" ref="videoRef" autoplay controls muted width="490px" height="262px"></video>
|
|
|
@@ -180,30 +192,32 @@
|
|
|
<p class="null-text-p" v-if="!checkedSubject.videoData[0]">暂无视频监控信息，请在更多操作-物联设备配置中进行添加</p>
|
|
|
</div>
|
|
|
<div class="bottom-alarm-box" v-if="rightButtonType == 4">
|
|
|
- <div class="alarm-max-box">
|
|
|
- <img src="@/assets/ZDimages/medicUniversity-3_1/img_syslb_znsgbjzx.png" class="alarm-img">
|
|
|
+ <p class="top-title"><i>{{checkedSubject.deptName}}</i><i>当前位置：{{checkedSubject.subAddrr.buildName}}{{checkedSubject.subAddrr.floorName}}</i></p>
|
|
|
+ <div class="alarm-max-box" :class="hardwareData[0]?hardwareData[0].status==3||hardwareData[0].status==4?'BGcolorTypeA':'BGcolorTypeB':''">
|
|
|
+ <img v-if="hardwareData[0]?hardwareData[0].status == 3:''" src="@/assets/ZDimages/medicUniversity-3_1/img_syslb_znsgbjzx.png" class="alarm-img">
|
|
|
<div class="alarm-big-box" v-if="hardwareData[0]">
|
|
|
<p>报警器编号：{{hardwareData[0].hardwareNum}}</p>
|
|
|
+ <div class="alarm-position-box" >
|
|
|
+ <el-switch
|
|
|
+ v-if="hardwareData[0].status == 3"
|
|
|
+ @click.native="changeIsNeedCaptchaAlarm(hardwareData[0])"
|
|
|
+ class="switch captcha-img"
|
|
|
+ :active-value="3"
|
|
|
+ :inactive-value="4"
|
|
|
+ active-color="#FF9900"
|
|
|
+ inactive-color="#999"
|
|
|
+ v-model="hardwareData[0].status"
|
|
|
+ active-text="报警中"
|
|
|
+ inactive-text="未报警"
|
|
|
+ disabled
|
|
|
+ ></el-switch>
|
|
|
+ </div>
|
|
|
<p :class="hardwareData[0].status==3||hardwareData[0].status==4?'colorTypeA':'colorTypeB'">{{hardwareData[0].status==3||hardwareData[0].status==4?'在线':'离线'}}</p>
|
|
|
</div>
|
|
|
<div class="alarm-big-box" v-if="!hardwareData[0]">
|
|
|
<p>未绑定报警器</p>
|
|
|
</div>
|
|
|
- <div class="alarm-position-box" v-if="hardwareData[0]">
|
|
|
- <el-switch
|
|
|
- v-if="hardwareData[0].status == 3||hardwareData[0].status == 4"
|
|
|
- @click.native="changeIsNeedCaptchaAlarm(hardwareData[0])"
|
|
|
- class="switch captcha-img"
|
|
|
- :active-value="3"
|
|
|
- :inactive-value="4"
|
|
|
- active-color="#FF9900"
|
|
|
- inactive-color="#999"
|
|
|
- v-model="hardwareData[0].status"
|
|
|
- active-text="报警中"
|
|
|
- inactive-text="未报警"
|
|
|
- disabled
|
|
|
- ></el-switch>
|
|
|
- </div>
|
|
|
+
|
|
|
</div>
|
|
|
<div class="alarm-title-box">
|
|
|
<p>报警记录</p>
|
|
|
@@ -211,7 +225,6 @@
|
|
|
</div>
|
|
|
<el-table border :data="tableList" ref="multipleTable">
|
|
|
<el-table-column label="报警时间" align="center" prop="alarmTime"/>
|
|
|
- <el-table-column label="报警时长" align="center" prop="alarmDuration" width="110"/>
|
|
|
<el-table-column label="处理状态" align="center" prop="operate" width="100"/>
|
|
|
<el-table-column label="处理人" align="center" prop="handlingUserName" width="90"/>
|
|
|
</el-table>
|
|
|
@@ -224,14 +237,12 @@
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="bottom-entrance-box" v-if="rightButtonType == 5">
|
|
|
- <div class="entrance" v-for="(item,index) in entranceList" v-if="item.operate">
|
|
|
- <p :class="item.operate.code==2?'entrance_l_yes':'entrance_l_no'">{{item.operate.code==2?'在线':'离线'}}</p>
|
|
|
+ <p class="top-title"><i>{{checkedSubject.deptName}}</i><i>当前位置：{{checkedSubject.subAddrr.buildName}}{{checkedSubject.subAddrr.floorName}}</i></p>
|
|
|
+ <div class="entrance" :class="item.operate.code==2?'BGentrance_l_yes':'BGentrance_l_no'" v-for="(item,index) in entranceList" v-if="item.operate">
|
|
|
<img class="entrance_c" v-if="item.operate.code==2" src="@/assets/ZDimages/icon_znmj_zx.png">
|
|
|
<img class="entrance_c" v-if="item.operate.code!=2" src="@/assets/ZDimages/icon_znmj_lx.png">
|
|
|
- <div class="entrance_r">
|
|
|
- <p>门禁名称：{{item.name}}</p>
|
|
|
- <p>门禁编号：{{item.hardwareNum}}</p>
|
|
|
- </div>
|
|
|
+ <div class="entrance_r">门禁编号：{{item.hardwareNum}}</div>
|
|
|
+ <p :class="item.operate.code==2?'entrance_l_yes':'entrance_l_no'">{{item.operate.code==2?'在线':'离线'}}</p>
|
|
|
</div>
|
|
|
<img class="null-data-img" src="@/assets/ZDimages/null-data.png" v-if="entranceList.length<=0">
|
|
|
<p class="null-text-p" v-if="entranceList.length<=0">暂无智能门禁信息，请在更多操作-物联设备配置中进行添加</p>
|
|
|
@@ -1087,37 +1098,51 @@ export default {
|
|
|
flex:1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- padding:20px;
|
|
|
overflow: hidden;
|
|
|
border-radius:10px;
|
|
|
- margin:5px 20px 20px 10px;
|
|
|
- box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
|
|
|
+ margin:5px 0px 10px 0px;
|
|
|
+ //box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
|
|
|
.subject-page-min{
|
|
|
flex:1;
|
|
|
display: flex;
|
|
|
overflow: hidden;
|
|
|
+ padding: 2px 20px 20px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
.left-subject-list{
|
|
|
flex:1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- margin-right:20px;
|
|
|
+ margin-right:12px;
|
|
|
overflow: hidden ;
|
|
|
+ box-shadow: 0px 4px 14px 0px rgba(0,0,0,0.2);
|
|
|
+ border-radius: 20px 20px 20px 20px;
|
|
|
+ padding-top: 24px;
|
|
|
+ .table_border{
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 38px 20px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
}
|
|
|
.overflow-box{
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.right-subject-box{
|
|
|
- width:514px;
|
|
|
+ width:428px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ box-shadow: 0px 4px 14px 0px rgba(0,0,0,0.2);
|
|
|
+ border-radius: 0px 0px 20px 20px;
|
|
|
.top-button-box{
|
|
|
display: flex;
|
|
|
div{
|
|
|
padding:0 10px;
|
|
|
height:40px;
|
|
|
line-height:40px;
|
|
|
- font-size:16px;
|
|
|
+ font-size:14px;
|
|
|
text-align: center;
|
|
|
border-top-right-radius: 10px;
|
|
|
border-top-left-radius: 10px;
|
|
|
@@ -1141,13 +1166,21 @@ export default {
|
|
|
flex-direction: column;
|
|
|
.bottom-sensor-box{
|
|
|
background: #fff;
|
|
|
- width:510px;
|
|
|
- border: 1px solid #E0E0E0;
|
|
|
- border-radius: 0 10px 10px 10px;
|
|
|
+ width:424px;
|
|
|
+ flex:1;
|
|
|
+ position: relative;
|
|
|
+ // border: 1px solid #E0E0E0;
|
|
|
+ //border-radius: 0 10px 10px 10px;
|
|
|
.top-title{
|
|
|
- line-height:18px;
|
|
|
- font-size:16px;
|
|
|
- margin:23px 10px;
|
|
|
+ margin:16px 26px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ >i{
|
|
|
+ font-style: normal;
|
|
|
+ line-height:18px;
|
|
|
+ font-size:16px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
}
|
|
|
.null-text-p{
|
|
|
text-align: center;
|
|
|
@@ -1159,9 +1192,9 @@ export default {
|
|
|
.sensor-for-max-box{
|
|
|
.sensor-for-big-box{
|
|
|
display: inline-block;
|
|
|
- width:158px;
|
|
|
+ width:180px;
|
|
|
height:60px;
|
|
|
- margin:0 0 11px 8px;
|
|
|
+ margin:0 0 11px 26px;
|
|
|
border-radius: 10px;
|
|
|
.sensor-for-min-box{
|
|
|
display: flex;
|
|
|
@@ -1204,18 +1237,25 @@ export default {
|
|
|
line-height:18px;
|
|
|
font-size:14px;
|
|
|
color:#999999;
|
|
|
- margin:40px 10px 15px;
|
|
|
+ margin:0 0px 0px 26px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 22px;
|
|
|
}
|
|
|
}
|
|
|
.bottom-switch-box{
|
|
|
background: #fff;
|
|
|
- width:510px;
|
|
|
- border: 1px solid #E0E0E0;
|
|
|
- border-radius: 0 10px 10px 10px;
|
|
|
+ width:424px;
|
|
|
+ flex: 1;
|
|
|
.top-title{
|
|
|
- line-height:18px;
|
|
|
- font-size:16px;
|
|
|
- margin:23px 10px;
|
|
|
+ margin:16px 26px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ >i{
|
|
|
+ font-style: normal;
|
|
|
+ line-height:18px;
|
|
|
+ font-size:16px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
}
|
|
|
.null-text-p{
|
|
|
text-align: center;
|
|
|
@@ -1228,30 +1268,55 @@ export default {
|
|
|
.switch-for-big-box{
|
|
|
display: inline-block;
|
|
|
.switch-for-min-box{
|
|
|
- width:210px;
|
|
|
- height:60px;
|
|
|
- border:1px solid #E0E0E0;
|
|
|
- border-radius: 10px;
|
|
|
- margin:0 0 20px 30px;
|
|
|
- display: flex;
|
|
|
- .switch-for-min-title{
|
|
|
- font-size:16px;
|
|
|
- line-height:58px;
|
|
|
- width:113px;
|
|
|
- margin-left:12px;
|
|
|
- display:block;
|
|
|
- overflow:hidden;
|
|
|
- text-overflow:ellipsis;
|
|
|
- white-space:nowrap;
|
|
|
- }
|
|
|
- .switch{
|
|
|
- margin-top:14px;
|
|
|
+ width:180px;
|
|
|
+ height:70px;
|
|
|
+ margin:0 0 14px 20px;
|
|
|
+ background: rgba(1,131,250,0.1);
|
|
|
+ border-radius: 10px 10px 10px 10px;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .switch-for-min-box_t{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .switch-for-min-title{
|
|
|
+ font-size:14px;
|
|
|
+ line-height:24px;
|
|
|
+ width: 84px;
|
|
|
+ color: #333333;
|
|
|
+ display:block;
|
|
|
+ overflow:hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space:nowrap;
|
|
|
+ }
|
|
|
+ .switch-null-p{
|
|
|
+ font-size:14px;
|
|
|
+ line-height:24px;
|
|
|
+ color:#999;
|
|
|
+ }
|
|
|
}
|
|
|
- .switch-null-p{
|
|
|
- font-size:16px;
|
|
|
- line-height:58px;
|
|
|
- color:#999;
|
|
|
+ .switch-for-min-box_b{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 10px;
|
|
|
+ .switch-null-ventilate{
|
|
|
+ width: 62px;
|
|
|
+ height: 18px;
|
|
|
+ border-radius: 10px 10px 10px 10px;
|
|
|
+ opacity: 1;
|
|
|
+ border: 1px solid #0183FA;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #0183FA;
|
|
|
+ line-height: 15px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .switch{
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
.switch-for-min-button{
|
|
|
width:70px;
|
|
|
height:30px;
|
|
|
@@ -1270,13 +1335,19 @@ export default {
|
|
|
}
|
|
|
.bottom-video-box{
|
|
|
background: #fff;
|
|
|
- width:510px;
|
|
|
- border: 1px solid #E0E0E0;
|
|
|
+ width:424px;
|
|
|
border-radius: 0 10px 10px 10px;
|
|
|
+ flex: 1;
|
|
|
.top-title{
|
|
|
- line-height:18px;
|
|
|
- font-size:16px;
|
|
|
- margin:23px 10px;
|
|
|
+ margin:16px 26px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ >i{
|
|
|
+ font-style: normal;
|
|
|
+ line-height:18px;
|
|
|
+ font-size:16px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
}
|
|
|
.null-text-p{
|
|
|
text-align: center;
|
|
|
@@ -1287,7 +1358,7 @@ export default {
|
|
|
}
|
|
|
.video-for-max-box{
|
|
|
.switch-for-big-box{
|
|
|
- width:490px;
|
|
|
+ width:374px;
|
|
|
height:262px;
|
|
|
margin:0 auto 14px;
|
|
|
position: relative;
|
|
|
@@ -1311,31 +1382,58 @@ export default {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
background: #fff;
|
|
|
- width:510px;
|
|
|
+ width:424px;
|
|
|
overflow-x: hidden;
|
|
|
+ padding: 0 27px 0 23px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .top-title{
|
|
|
+ margin:16px 0px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ >i{
|
|
|
+ font-style: normal;
|
|
|
+ line-height:18px;
|
|
|
+ font-size:16px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
.alarm-max-box{
|
|
|
- width:510px;
|
|
|
- height:150px;
|
|
|
+ width:374px;
|
|
|
+ height:60px;
|
|
|
display: flex;
|
|
|
position:relative;
|
|
|
- border: 1px solid #E0E0E0;
|
|
|
- border-radius: 0 10px 10px 10px;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 10px 10px 10px 10px;
|
|
|
+ margin: 10px 0 0 0;
|
|
|
.alarm-img{
|
|
|
- width:110px;
|
|
|
- height:110px;
|
|
|
- margin:20px;
|
|
|
+ width:30px;
|
|
|
+ height:30px;
|
|
|
+ margin:14px;
|
|
|
}
|
|
|
.alarm-big-box{
|
|
|
- p:nth-child(1){
|
|
|
- font-size:14px;
|
|
|
- margin:40px 0 25px 0;
|
|
|
+ p:nth-of-type(1){
|
|
|
+ position:absolute;
|
|
|
+ top:18px;
|
|
|
+ left:64px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
}
|
|
|
- p:nth-child(2){
|
|
|
- width: 60px;
|
|
|
+ .alarm-position-box{
|
|
|
+ position:absolute;
|
|
|
+ top:8px;
|
|
|
+ left:260px;
|
|
|
+ }
|
|
|
+ p:nth-of-type(2){
|
|
|
+ position:absolute;
|
|
|
+ top:0px;
|
|
|
+ right:0px;
|
|
|
+ width: 50px;
|
|
|
+ height: 20px;
|
|
|
font-size:12px;
|
|
|
font-weight:700;
|
|
|
- line-height:24px;
|
|
|
- border-radius: 12px;
|
|
|
+ line-height:20px;
|
|
|
+ border-radius: 0px 10px 0px 10px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.colorTypeA{
|
|
|
@@ -1347,13 +1445,26 @@ export default {
|
|
|
color:#A2A2A2;
|
|
|
}
|
|
|
}
|
|
|
- .alarm-position-box{
|
|
|
- position:absolute;
|
|
|
- bottom:20px;
|
|
|
- right:15px;
|
|
|
- width: 75px;
|
|
|
- height: 30px;
|
|
|
- }
|
|
|
+
|
|
|
+ }
|
|
|
+ .BGcolorTypeA{
|
|
|
+ width:374px;
|
|
|
+ height:60px;
|
|
|
+ display: flex;
|
|
|
+ position:relative;
|
|
|
+ background: rgba(1,131,250,0.1);
|
|
|
+ border-radius: 10px 10px 10px 10px;
|
|
|
+ margin: 10px 0 0 0;
|
|
|
+ }
|
|
|
+ .BGcolorTypeB{
|
|
|
+ width:374px;
|
|
|
+ height:60px;
|
|
|
+ display: flex;
|
|
|
+ position:relative;
|
|
|
+ background: #F5F5F5;
|
|
|
+ border-radius: 10px 10px 10px 10px;
|
|
|
+ margin: 10px 0 0 0;
|
|
|
+
|
|
|
}
|
|
|
.alarm-title-box{
|
|
|
display: flex;
|
|
|
@@ -1371,53 +1482,75 @@ export default {
|
|
|
}
|
|
|
/*智能门禁*/
|
|
|
.bottom-entrance-box{
|
|
|
+ flex: 1;
|
|
|
background: #fff;
|
|
|
- width:510px;
|
|
|
- border: 1px solid #E0E0E0;
|
|
|
+ width:424px;
|
|
|
border-radius: 0 10px 10px 10px;
|
|
|
+ .top-title{
|
|
|
+ margin:16px 26px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ >i{
|
|
|
+ font-style: normal;
|
|
|
+ line-height:18px;
|
|
|
+ font-size:16px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
.entrance{
|
|
|
+ width: 374px;
|
|
|
+ height: 60px;
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
- border: 1px solid #E0E0E0;
|
|
|
+ border-radius: 10px 10px 10px 10px;
|
|
|
+ margin: 10px 0 0 26px;
|
|
|
+ position: relative;
|
|
|
+ .entrance_c{
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ margin: 14px 20px 0px 14px;
|
|
|
+ }
|
|
|
+ .entrance_r{
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 60px;
|
|
|
+ }
|
|
|
.entrance_l_yes{
|
|
|
width: 60px;
|
|
|
height: 30px;
|
|
|
- background: rgba(1,131,250,0.2);
|
|
|
- border-radius: 0px 0px 20px 0px;
|
|
|
+ background: #0183FA;
|
|
|
+ border-radius: 0px 10px 0px 10px;
|
|
|
font-size: 14px;
|
|
|
font-weight: 400;
|
|
|
- color: #0183FA;
|
|
|
+ color: #fff;
|
|
|
line-height: 30px;
|
|
|
text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
}
|
|
|
.entrance_l_no{
|
|
|
width: 60px;
|
|
|
height: 30px;
|
|
|
- background: rgba(224,224,224,0.2);
|
|
|
- border-radius: 0px 0px 20px 0px;
|
|
|
+ background: #A2A2A2;
|
|
|
+ border-radius: 0px 10px 0px 10px;
|
|
|
font-size: 14px;
|
|
|
font-weight: 400;
|
|
|
- color: #666666;
|
|
|
+ color: #fff;
|
|
|
line-height: 30px;
|
|
|
text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
}
|
|
|
- .entrance_c{
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- margin: 20px 0 8px 44px;
|
|
|
- }
|
|
|
- .entrance_r{
|
|
|
- margin-left: 30px;
|
|
|
- >p{
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- color: #333333;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
- >p:nth-of-type(1){
|
|
|
- margin: 20px 0 10px 0;
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ .BGentrance_l_yes{
|
|
|
+ background: rgba(1,131,250,0.1);
|
|
|
+ }
|
|
|
+ .BGentrance_l_no{
|
|
|
+ background: #F5F5F5;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
@@ -1461,10 +1594,14 @@ export default {
|
|
|
.switch .el-switch__label.is-active {
|
|
|
display: block;
|
|
|
}
|
|
|
+ .switch.el-switch .el-switch__core{
|
|
|
+ background-color: rgba(255,196,124)!important;
|
|
|
+ border-color: rgba(255,196,124)!important;
|
|
|
+ }
|
|
|
.switch.el-switch .el-switch__core,
|
|
|
.el-switch .el-switch__label {
|
|
|
- width: 80px !important;
|
|
|
- height:30px!important;
|
|
|
+ width: 68px !important;
|
|
|
+ height:20px!important;
|
|
|
line-height:30px!important;
|
|
|
-webkit-border-radius: 20px!important;
|
|
|
-moz-border-radius: 20px!important;
|
|
|
@@ -1472,20 +1609,30 @@ export default {
|
|
|
margin: 0;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
+
|
|
|
}
|
|
|
.switch .el-switch__label--left span{
|
|
|
- margin-left:30px!important;
|
|
|
+ margin-left:22px!important;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 20px;
|
|
|
+ position: relative;
|
|
|
+ top: -5px;
|
|
|
}
|
|
|
.switch .el-switch__label--right span{
|
|
|
- margin-left:8px!important;
|
|
|
+ margin-left:5px!important;
|
|
|
+ font-size: 12px;
|
|
|
+ position: relative;
|
|
|
+ top: -5px;
|
|
|
}
|
|
|
.el-switch__core:after{
|
|
|
- height:24px!important;
|
|
|
- width:24px!important;
|
|
|
- top:2px!important;
|
|
|
+ background: #FA8A01 !important;
|
|
|
+ height:16px!important;
|
|
|
+ width:16px!important;
|
|
|
+ top:1px!important;
|
|
|
}
|
|
|
.el-switch.is-checked .el-switch__core::after{
|
|
|
- margin-left: -25px!important;
|
|
|
+ margin-left: -20px!important;
|
|
|
}
|
|
|
.el-switch{
|
|
|
margin:10px auto 0;
|
dedsudiyu