index_SuZhouDX.vue 52 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429
  1. <template>
  2. <div class="subject">
  3. <div class="subject-page" v-if="pageType == 1">
  4. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
  5. <el-form-item label="学院" prop="deptId" label-width="60px">
  6. <el-select v-model="queryParams.deptId" placeholder="请选择学院" clearable size="small">
  7. <el-option
  8. v-for="dict in deptOptions"
  9. :key="dict.deptId"
  10. :label="dict.deptName"
  11. :value="dict.deptId"
  12. ></el-option>
  13. </el-select>
  14. </el-form-item>
  15. <el-form-item label="实验室名称" prop="name" label-width="100px">
  16. <el-input
  17. v-model="queryParams.name"
  18. placeholder="请输入实验室名称"
  19. clearable
  20. size="small"
  21. />
  22. </el-form-item>
  23. <el-form-item style="float: right;">
  24. <el-col :span="1.5" style="margin-bottom:20px;">
  25. <p class="add-button-one-120"
  26. @click="clickPage(2)"
  27. v-hasPermi="['laboratory:subject:add']"
  28. ><i class="el-icon-plus"></i>新增实验室</p>
  29. </el-col>
  30. </el-form-item>
  31. <el-form-item style="margin-right: 20px;">
  32. <p class="inquire-button-one" style="margin-left:20px;" @click="handleQuery">查询</p>
  33. <p class="reset-button-one" style="margin-left:20px;" @click="resetQuery">重置</p>
  34. </el-form-item>
  35. </el-form>
  36. <div class="subject-page-min">
  37. <div class="left-subject-list" >
  38. <el-table ref="multipleTable" border :data="subjectList" highlight-current-row @current-change="handleCurrentChange" style="cursor: pointer;">
  39. <el-table-column label="排序" align="left" prop="id" width="80">
  40. <template slot-scope="scope">
  41. <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>
  42. </template>
  43. </el-table-column>
  44. <el-table-column label="实验室名称" align="left" prop="name" width="230" show-overflow-tooltip/>
  45. <el-table-column label="位置" align="left" prop="name" width="160" show-overflow-tooltip>
  46. <template slot-scope="scope">
  47. {{scope.row.buildName}}{{scope.row.floorName}}{{scope.row.room}}
  48. </template>
  49. </el-table-column>
  50. <!--<el-table-column label="类型" align="left" prop="moldName" width="100" show-overflow-tooltip/>-->
  51. <el-table-column label="安全分类" align="left" prop="typeName" width="100" show-overflow-tooltip/>
  52. <el-table-column label="安全分级" align="left" prop="levelName" width="80" show-overflow-tooltip>
  53. <template slot-scope="scope">
  54. <span :style="'color:'+scope.row.fiedColor+';'">{{scope.row.levelName}}</span>
  55. </template>
  56. </el-table-column>
  57. <el-table-column label="重大危险源辨识指标" align="left" prop="riskIndicator" width="150" show-overflow-tooltip/>
  58. <el-table-column label="学院" align="left" prop="deptName" width="150" show-overflow-tooltip/>
  59. <el-table-column label="实验室责任人" align="left" prop="adminName" width="120" show-overflow-tooltip/>
  60. <el-table-column label="安全责任人" align="left" prop="safeUserName" width="200" show-overflow-tooltip/>
  61. <el-table-column label="操作" align="left" width="160">
  62. <template slot-scope="scope">
  63. <div style="display: flex;height:30px;">
  64. <p class="table-min-button" style="margin-right:10px;" v-hasPermi="['laboratory:subject:query']" @click="clickPage(7,scope.row)">详情</p>
  65. <el-dropdown trigger="click" size="mini" @command="(command) => handleCommand(command, scope.row)">
  66. <p class="table-min-button">更多<i class="el-icon-d-arrow-right"></i></p>
  67. <el-dropdown-menu slot="dropdown" style="margin:0!important;">
  68. <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>
  69. <el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="2">物联配置</el-dropdown-item>
  70. <el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="3" v-hasPermi="['laboratory:subjectmaterial:add']">准入配置</el-dropdown-item>
  71. <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>
  72. <!--<el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="5"-->
  73. <!--v-hasPermi="['laboratory:subject:remove']">删除</el-dropdown-item>-->
  74. </el-dropdown-menu>
  75. </el-dropdown>
  76. </div>
  77. </template>
  78. </el-table-column>
  79. </el-table>
  80. <pagination
  81. v-show="total>0"
  82. :total="total"
  83. :page.sync="queryParams.pageNum"
  84. :limit.sync="queryParams.pageSize"
  85. @pagination="getList"
  86. />
  87. </div>
  88. <div class="right-subject-box scrollbar-box" :class="rightButtonType == 4?'overflow-box':''" v-if="checkedSubject.id">
  89. <div class="top-button-box">
  90. <div :class="rightButtonType == 1 ? 'buttonColorA' : 'buttonColorB'" @click="rightButtonClick(1)">传感器监测</div>
  91. <div :class="rightButtonType == 2 ? 'buttonColorA' : 'buttonColorB'" @click="rightButtonClick(2)">物联控制</div>
  92. <div :class="rightButtonType == 3 ? 'buttonColorA' : 'buttonColorB'" @click="rightButtonClick(3)">视频监控</div>
  93. <div :class="rightButtonType == 4 ? 'buttonColorA' : 'buttonColorB'" @click="rightButtonClick(4)">智能声光报警器</div>
  94. </div>
  95. <!--传感器-->
  96. <div class="bottom-max-box" :class="rightButtonType == 4?'overflow-box':''">
  97. <div class="bottom-sensor-box" v-if="rightButtonType == 1">
  98. <p class="top-title">当前位置:{{checkedSubject.subAddrr.buildName}}{{checkedSubject.subAddrr.floorName}}</p>
  99. <div class="sensor-for-max-box" v-if="checkedSubject.sensorFunctionStatusList[0]">
  100. <div class="sensor-for-big-box"
  101. :class="item.type == 1 ? 'sensor-color-a' : (item.type == 2 ? 'sensor-color-b' : 'sensor-color-c')"
  102. v-if="item.funNum != 'huoyan'"
  103. v-for="(item,index) in checkedSubject.sensorFunctionStatusList" :key="index_SuZhouDX">
  104. <div class="sensor-for-min-box">
  105. <img src="@/assets/ZDimages/subject/icon_bj_wd.png" v-if="item.funNum == 'wendu'">
  106. <img src="@/assets/ZDimages/subject/icon_bj_sd.png" v-if="item.funNum == 'shidu'">
  107. <img src="@/assets/ZDimages/subject/icon_bj_eyht.png" v-if="item.funNum == 'co'">
  108. <img src="@/assets/ZDimages/subject/icon_bj_jwnd.png" v-if="item.funNum == 'jiawan'">
  109. <img src="@/assets/ZDimages/subject/icon_sy_yqnd.png" v-if="item.funNum == 'o2'">
  110. <img src="@/assets/ZDimages/subject/icon_bj_yg.png" v-if="item.funNum == 'yanwu'">
  111. <img src="@/assets/ZDimages/subject/icon_sy_dqy.png" v-if="item.funNum == 'daqiya'">
  112. <img src="@/assets/ZDimages/subject/icon_syspz_voc.png" v-if="item.funNum == 'voc'">
  113. <img src="@/assets/ZDimages/subject/icon_syspz_tvoc.png" v-if="item.funNum == 'tvoc'">
  114. <img src="@/assets/ZDimages/subject/icon_sy_mcnd.png" v-if="item.funNum == 'so2'">
  115. <img src="@/assets/ZDimages/subject/icon_bj_yyhd.png" v-if="item.funNum == 'no1'">
  116. <img src="@/assets/ZDimages/subject/icon_bj_dqy.png" v-if="item.funNum == 'fenchen'">
  117. <img src="@/assets/ZDimages/subject/icon_bj_qq.png" v-if="item.funNum == 'H2'">
  118. <img src="@/assets/ZDimages/subject/guangqi.png" v-if="item.funNum == 'guangqi'">
  119. <img src="@/assets/ZDimages/subject/lvqi.png" v-if="item.funNum == 'lvqi'">
  120. <img src="@/assets/ZDimages/subject/icon_syspz_jiaquan.png" v-if="item.funNum == 'jiaquan'">
  121. <img src="@/assets/ZDimages/subject/icon_syspz_hwcw.png" v-if="item.funNum == 'hwcwy'">
  122. <div>
  123. <el-tooltip class="item" effect="dark" :content="item.describe" placement="bottom">
  124. <p>{{item.describe|ellipsis}}</p>
  125. </el-tooltip>
  126. <p>{{item.formatVal}}</p>
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. <img class="null-data-img" src="@/assets/ZDimages/null-data.png" v-if="!checkedSubject.sensorFunctionStatusList[0]">
  132. <p class="null-text-p" v-if="!checkedSubject.sensorFunctionStatusList[0]">暂无环境监测信息,请在更多操作-物联设备配置中进行添加</p>
  133. <p class="bottom-text" v-if="checkedSubject.sensorFunctionStatusList[0]">数据上报时间:{{checkedSubject.sensorFunctionStatusList[0].sendDate}}</p>
  134. </div>
  135. <div class="bottom-switch-box" v-if="rightButtonType == 2">
  136. <p class="top-title">当前位置:{{checkedSubject.subAddrr.buildName}}{{checkedSubject.subAddrr.floorName}}</p>
  137. <div class="switch-for-max-box" v-show="checkedSubject.VOlist[0]" v-hasPermi="['laboratory:subcontrol:set']">
  138. <div class="switch-for-big-box" v-for="(item,index) in checkedSubject.VOlist" :key="index_SuZhouDX" v-if="item.isPcfire != 1">
  139. <div class="switch-for-min-box" v-if="item.hardwareTypeEnum.enumName == 'SWITCH'">
  140. <p class="switch-for-min-title">{{item.hardwareName?item.hardwareName:item.hardwareTypeEnum.hardwareTypeName}}</p>
  141. <el-switch
  142. v-if="item.state.code == 3||item.state.code == 4"
  143. class="switch"
  144. @click.native="changeIsNeedCaptcha(item)"
  145. v-model="item.state.code"
  146. :active-value="3"
  147. :inactive-value="4"
  148. active-text="开"
  149. inactive-text="关"
  150. disabled>
  151. </el-switch>
  152. <p class="switch-null-p" v-else>{{item.state.name}}</p>
  153. </div>
  154. <div class="switch-for-min-box" v-if="item.hardwareTypeEnum.enumName == 'AI_VENTILATION'">
  155. <p class="switch-for-min-title">{{item.hardwareName?item.hardwareName:item.hardwareTypeEnum.hardwareTypeName}}</p>
  156. <el-switch
  157. v-if="(item.state.code == 3||item.state.code == 4) && item.pcType != 1"
  158. class="switch"
  159. @click.native="changeIsNeedCaptcha(item)"
  160. v-model="item.state.code"
  161. :active-value="3"
  162. :inactive-value="4"
  163. active-text="开"
  164. inactive-text="关"
  165. disabled>
  166. </el-switch>
  167. <p class="switch-null-p" v-if="(item.state.code != 3&&item.state.code != 4) && item.pcType != 1">{{item.state.name}}</p>
  168. <p class="switch-button-p" v-if="item.pcType == 1" @click="switchButton(item.id)">操作</p>
  169. </div>
  170. <!--<div class="switch-for-min-box" v-if="item.hardwareTypeEnum.enumName == 'ONE_MACHINE'">-->
  171. <!--<p class="switch-for-min-title">广播系统</p>-->
  172. <!--<p class="switch-for-min-button" @click="handleAdd(item.subId)">播放文字</p>-->
  173. <!--</div>-->
  174. </div>
  175. </div>
  176. <img class="null-data-img" src="@/assets/ZDimages/null-data.png" v-show="!checkedSubject.VOlist[0]">
  177. <p class="null-text-p" v-show="!checkedSubject.VOlist[0]">暂无物联控制信息,请在更多操作-物联设备配置中进行添加</p>
  178. </div>
  179. <div class="bottom-video-box" v-if="rightButtonType == 3">
  180. <p class="top-title">当前位置:{{checkedSubject.subAddrr.buildName}}{{checkedSubject.subAddrr.floorName}}</p>
  181. <div class="video-for-max-box" v-if="checkedSubject.videoData[0]">
  182. <div class="switch-for-big-box" v-for="(item,index) in checkedSubject.videoData" :key="index_SuZhouDX">
  183. <video :id="item.divId" ref="videoRef" autoplay controls :poster="videoCover"
  184. muted width="490px" height="262px"></video>
  185. <p class="el-icon-full-screen position-p" @click="videoFullScreen(index_SuZhouDX)"></p>
  186. </div>
  187. </div>
  188. <img class="null-data-img" src="@/assets/ZDimages/null-data.png" v-if="!checkedSubject.videoData[0]">
  189. <p class="null-text-p" v-if="!checkedSubject.videoData[0]">暂无视频监控信息,请在更多操作-物联设备配置中进行添加</p>
  190. </div>
  191. <div class="bottom-alarm-box" v-if="rightButtonType == 4">
  192. <div class="alarm-max-box">
  193. <img src="@/assets/ZDimages/medicUniversity-3_1/img_syslb_znsgbjzx.png" class="alarm-img">
  194. <div class="alarm-big-box" v-if="hardwareData[0]">
  195. <p>报警器编号:{{hardwareData[0].hardwareNum}}</p>
  196. <p :class="hardwareData[0].status==3||hardwareData[0].status==4?'colorTypeA':'colorTypeB'">{{hardwareData[0].status==3||hardwareData[0].status==4?'在线':'离线'}}</p>
  197. </div>
  198. <div class="alarm-big-box" v-if="!hardwareData[0]">
  199. <p>未绑定报警器</p>
  200. </div>
  201. <div class="alarm-position-box" v-if="hardwareData[0]">
  202. <el-switch
  203. v-if="hardwareData[0].status == 3||hardwareData[0].status == 4"
  204. @click.native="changeIsNeedCaptchaAlarm(hardwareData[0])"
  205. class="switch captcha-img"
  206. :active-value="3"
  207. :inactive-value="4"
  208. active-color="#FF9900"
  209. inactive-color="#999"
  210. v-model="hardwareData[0].status"
  211. active-text="报警中"
  212. inactive-text="未报警"
  213. disabled
  214. ></el-switch>
  215. </div>
  216. </div>
  217. <div class="alarm-title-box">
  218. <p>报警记录</p>
  219. <p v-hasPermi="['chemical:hxpAlarmRecord:list']" @click="goAlarmRecord">更多>></p>
  220. </div>
  221. <el-table border :data="tableList" ref="multipleTable">
  222. <el-table-column label="报警时间" align="center" prop="alarmTime"/>
  223. <el-table-column label="报警时长" align="center" prop="alarmDuration" width="110"/>
  224. <el-table-column label="处理状态" align="center" prop="operate" width="100"/>
  225. <el-table-column label="处理人" align="center" prop="handlingUserName" width="90"/>
  226. </el-table>
  227. <pagination
  228. v-show="totalTwo>0"
  229. :total="totalTwo"
  230. :page.sync="queryParamsTwo.pageNum"
  231. :limit.sync="queryParamsTwo.pageSize"
  232. @pagination="getHxpAlarmRecordNoAuthList"
  233. />
  234. </div>
  235. </div>
  236. </div>
  237. </div>
  238. </div>
  239. <add-subject v-if="pageType == 2" :subjectData="subjectData"></add-subject>
  240. <device-list v-if="pageType == 3" :subjectData="subjectData"></device-list>
  241. <admission-configuration v-if="pageType == 4" :subjectData="subjectData"></admission-configuration>
  242. <association-configuration v-if="pageType == 5" :subjectData="subjectData"></association-configuration>
  243. <info-page v-if="pageType == 6" :newData="newData"></info-page>
  244. <!--播放文字窗口-->
  245. <el-dialog title="广播系统" :visible.sync="open" width="500px" append-to-body>
  246. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  247. <el-form-item label="播放文字" prop="txt">
  248. <el-input v-model="form.txt" placeholder="请输入播放文字" />
  249. </el-form-item>
  250. <el-form-item label="播报方式" prop="type">
  251. <el-radio-group v-model="form.type">
  252. <el-radio :label="1">文字</el-radio>
  253. <el-radio :label="2">音频</el-radio>
  254. </el-radio-group>
  255. </el-form-item>
  256. </el-form>
  257. <div slot="footer" class="dialog-footer">
  258. <el-button @click="cancel">取 消</el-button>
  259. <el-button type="primary" @click="submitFormOne">确 定</el-button>
  260. </div>
  261. </el-dialog>
  262. </div>
  263. </template>
  264. <script>
  265. import mqtt from 'mqtt'
  266. import flvjs from 'flv.js'
  267. import { hardWareControl,alarmControl } from "@/api/laboratory/hardware";
  268. import {
  269. authListSubject,
  270. subjectInfo,
  271. updateSubject,
  272. mangerVoice,
  273. startUrl,
  274. } from '@/api/laboratory/subject'
  275. import { filterDept } from "@/api/medicUniversity-3_1/index";
  276. import addSubject from "./addSubject.vue";
  277. import deviceList from "./deviceList_SuZhouDX.vue";
  278. import admissionConfiguration from "./admissionConfiguration.vue";
  279. import associationConfiguration from "./associationConfiguration.vue";
  280. import infoPage from "./infoPage.vue";
  281. import { getHxpAlarmRecordNoAuthList,getEnablelist } from "@/api/medicUniversity-3_1/index";
  282. import { controlSwitch } from "@/api/laboratory/hardware";
  283. export default {
  284. filters:{
  285. ellipsis(value){
  286. if (!value) return '';
  287. if (value.length > 6) {
  288. return value.slice(0,6) + '...'
  289. }
  290. return value
  291. }
  292. },
  293. name: "subject",
  294. components: {
  295. addSubject,
  296. deviceList,
  297. admissionConfiguration,
  298. associationConfiguration,
  299. infoPage
  300. },
  301. data(){
  302. return{
  303. videoCover:window.location.href.split('://')[0]+'://' + this.judgmentNetworkReturnAddress() + "/admin/" + localStorage.getItem('videoCover'),
  304. pageType:1,
  305. // 遮罩层
  306. loading: true,
  307. // 显示搜索条件
  308. showSearch: true,
  309. // 总条数
  310. total: 0,
  311. // 查询参数
  312. queryParams: {
  313. pageNum: 1,
  314. pageSize:20,
  315. name: null,
  316. floorId: null,
  317. room: null,
  318. deptId: null,
  319. deptName: null,
  320. adminId: null,
  321. isDel: null,
  322. userId: null,
  323. diyOrder: null
  324. },
  325. // 实验室表格数据
  326. subjectList: [],
  327. //学院列表
  328. deptOptions:[],
  329. //当前选中实验室
  330. checkedSubject:{},
  331. //当前选中右侧按钮
  332. rightButtonType:1,
  333. //编辑实验室数据
  334. subjectData:{},
  335. // 临时保存排序
  336. sort:"",
  337. //播放文字的实验室id
  338. subId:"",
  339. open:false,
  340. form:{},
  341. rules:{
  342. txt:[
  343. {required: true, message: '请输入播放文字', trigger: 'blur'},
  344. { required: true, message: "请输入播放文字", validator: this.spaceJudgment, trigger: "blur" }
  345. ],
  346. type:[
  347. {required: true, message: '请选择播报方式', trigger: 'blur'}
  348. ],
  349. },
  350. newData:{
  351. },
  352. //MQTT请求参数-传感器
  353. mtopic:"lab/function/data",
  354. //MQTT请求参数-硬件
  355. mtopicOne:"lab/hardware/data",
  356. msg:"",
  357. client:{},
  358. videoList:[],
  359. //警报数据
  360. totalTwo:0,
  361. tableList:[],
  362. queryParamsTwo:{
  363. pageNum:1,
  364. pageSize:20,
  365. },
  366. hardwareData:[],
  367. //mqtt实验室id
  368. mqttIdList:[],
  369. }
  370. },
  371. created() {
  372. },
  373. mounted(){
  374. this.getDeptList();
  375. // this.subscriptionMQTT();
  376. this.getList();
  377. },
  378. methods:{
  379. goAlarmRecord(){
  380. this.$router.push({
  381. path: `/chemicalLibrary/alarmRecord`,
  382. })
  383. },
  384. //通风橱开关
  385. switchButton(id){
  386. let self = this;
  387. this.$confirm(`是否确认操作此设备`, "提示", {
  388. confirmButtonText: "确定",
  389. cancelButtonText: "取消",
  390. type: "warning"
  391. }).then(async () => {
  392. controlSwitch({id:id}).then(response => {
  393. self.msgSuccess(response.msg);
  394. });
  395. }).catch(() => {
  396. })
  397. },
  398. //报警器开启关闭方法
  399. changeIsNeedCaptchaAlarm(row){
  400. let self = this;
  401. console.log(row.status)
  402. if(row.status!=3 && row.status!=4){
  403. return
  404. }
  405. let text = row.status==3?'关闭':(row.status==4?'开启':'')
  406. this.$confirm(`是否`+text+`此设备`, "提示", {
  407. confirmButtonText: "确定",
  408. cancelButtonText: "取消",
  409. type: "warning"
  410. }).then(async () => {
  411. self.alarmControl(row)
  412. }).catch(() => {
  413. })
  414. },
  415. //开关按钮
  416. alarmControl(row){
  417. let switchData = {
  418. id:row.id,
  419. switchVal:row.status==3?'close':(row.status==4?'open':'')
  420. };
  421. alarmControl(switchData).then(response => {
  422. if(response.code==200){
  423. row.status = row.status==3?4:(row.status==4?3:'')
  424. }
  425. });
  426. },
  427. //获取实验室绑定报警器设备数据
  428. getEnablelist(){
  429. let obj = {
  430. subjectId:this.subId,
  431. type:"AI_ALARM"
  432. }
  433. getEnablelist(obj).then(response => {
  434. this.hardwareData = response.rows;
  435. });
  436. },
  437. //获取实验室报警列表数据
  438. getHxpAlarmRecordNoAuthList(){
  439. this.queryParamsTwo.subId = this.subId;
  440. getHxpAlarmRecordNoAuthList(this.queryParamsTwo).then(response => {
  441. this.totalTwo = response.total;
  442. this.tableList = response.rows;
  443. });
  444. },
  445. //播放文字
  446. handleAdd(id) {
  447. this.open = true;
  448. this.subId = id;
  449. },
  450. // 取消按钮
  451. cancel() {
  452. this.form = {};
  453. this.open = false;
  454. },
  455. /*播放文字*/
  456. submitFormOne(){
  457. this.$refs["form"].validate(valid => {
  458. if (valid) {
  459. let id = this.subId;
  460. mangerVoice(this.form,id).then(response => {
  461. this.msgSuccess("播放成功");
  462. this.open = false;
  463. this.getList();
  464. });
  465. }
  466. });
  467. },
  468. // 页面切换
  469. clickPage(type,row){
  470. if(this.pageType != type){
  471. if(type == 1){
  472. //列表页面
  473. this.pageType = type;
  474. this.getList();
  475. this.$set(this,'subjectData',{})
  476. }else if(type == 2){
  477. //新增页面
  478. this.pageType = type;
  479. }else if(type == 3){
  480. //编辑页面
  481. //this.pageType = 2;
  482. this.editFun(row);
  483. //this.$set(this,'subjectData',row)
  484. }else if(type == 4){
  485. this.pageType = 3;
  486. this.$set(this,'subjectData',row)
  487. }else if(type == 5){
  488. this.pageType = 4;
  489. this.$set(this,'subjectData',row)
  490. }else if(type == 6){
  491. this.pageType = 5;
  492. this.$set(this,'subjectData',row)
  493. }else if(type == 7){
  494. this.subjectInfoTwo(row);
  495. // this.$set(this,'subjectData',row)
  496. }
  497. }
  498. },
  499. //实验室编辑
  500. editFun(row){
  501. let self = this;
  502. let type = 0; //硬件 //0全部
  503. subjectInfo(row.id,type).then(response => {
  504. console.log(response.data)
  505. this.$set(this,'subjectData',response.data)
  506. this.pageType = 2;
  507. })
  508. },
  509. //获取实验室详情
  510. subjectInfoTwo(row){
  511. let self = this;
  512. let type = 0; //硬件 //0全部
  513. subjectInfo(row.id,type).then(response => {
  514. // console.log("获取实验室详情",response.data)
  515. this.$set(this,'newData',response.data);
  516. if(response.data.safeUserName){
  517. this.$set(this.newData,'safeUserName',response.data.safeUserName.split(','));
  518. }
  519. if(response.data.safeUserPhone){
  520. this.$set(this.newData,'safeUserPhone',response.data.safeUserPhone.split(','));
  521. }
  522. if(response.data.safeSigns){
  523. this.$set(this.newData,'safeSigns',response.data.safeSigns.split(','));
  524. }
  525. if(response.data.hazardCategory){
  526. this.$set(this.newData,'hazardCategory',response.data.hazardCategory.split(','));
  527. }
  528. if(response.data.outfire){
  529. this.$set(this.newData,'outfire',response.data.outfire.split(','));
  530. }
  531. if(response.data.riskMeasure){
  532. this.$set(this.newData,'riskMeasure',response.data.riskMeasure.split(','));
  533. }
  534. let list = [];
  535. let listTwo = [];
  536. if (response.data.labHardwareVOList){
  537. for(let i=0;i<response.data.labHardwareVOList.length;i++){
  538. if(response.data.labHardwareVOList[i].hardwareTypeEnum.enumName == 'VIDEO_MONITOR'){
  539. list.push(response.data.labHardwareVOList[i].hardwareNUM);
  540. }
  541. // if(response.data.labHardwareVOList[i].hardwareTypeEnum.enumName == 'SWITCH' || response.data.labHardwareVOList[i].hardwareTypeEnum.enumName == 'AI_VENTILATION' || response.data.labHardwareVOList[i].hardwareTypeEnum.enumName == 'ONE_MACHINE'){
  542. if(response.data.labHardwareVOList[i].hardwareTypeEnum.enumName == 'SWITCH' || response.data.labHardwareVOList[i].hardwareTypeEnum.enumName == 'AI_VENTILATION'){
  543. listTwo.push(response.data.labHardwareVOList[i])
  544. }
  545. }
  546. }
  547. this.$set(this.newData,'labHardwareVOListTwo',listTwo);
  548. if(list[0]){
  549. let obj = {
  550. count:"100",
  551. deviceIds:list.join(),
  552. page:"1",
  553. };
  554. let urlText = window.location.href;
  555. if(urlText.indexOf(localStorage.getItem('ipIdentify')) != -1){
  556. startUrl(obj).then(res => {
  557. if(res.code == 200){
  558. if(!res.data[0]){
  559. this.msgError("视频配置异常请联系管理员")
  560. this.newData.videoData = [];
  561. this.pageType = 6;
  562. }else{
  563. let newData = res.data;
  564. let videoList = [];
  565. for(let i=0;i<newData.length;i++){
  566. let obj = {
  567. name:response.data.name + response.data.subAddrr.room,
  568. videoType:"flv",
  569. divId:'divId'+i,
  570. url:newData[i].ws_flv,
  571. }
  572. videoList.push(obj)
  573. }
  574. this.$set(this.newData,'videoData',videoList);
  575. this.pageType = 6;
  576. }
  577. }
  578. });
  579. }else{
  580. startUrl(obj).then(res => {
  581. if(res.code == 200){
  582. if(!res.data[0]){
  583. this.msgError("视频配置异常请联系管理员")
  584. this.newData.videoData = [];
  585. this.pageType = 6;
  586. }else{
  587. let newData = res.data;
  588. let videoList = [];
  589. for(let i=0;i<newData.length;i++){
  590. let text = localStorage.getItem('cameraUrl');
  591. let url = newData[i].ws_flv;
  592. url = url.split("rtp/");
  593. let newUrl = text+'rtp/'+url[1];
  594. let obj = {
  595. name:response.data.name + response.data.subAddrr.room,
  596. videoType:"flv",
  597. divId:'divId'+i,
  598. url:newUrl,
  599. }
  600. videoList.push(obj)
  601. }
  602. this.$set(this.newData,'videoData',videoList);
  603. this.pageType = 6;
  604. }
  605. }
  606. });
  607. }
  608. }else{
  609. this.$set(this.newData,'videoData',[]);
  610. this.pageType = 6;
  611. }
  612. })
  613. },
  614. // 开启关闭验证
  615. async changeIsNeedCaptcha (row) {
  616. let self = this;
  617. console.log(row)
  618. if(row.state.code!=3 && row.state.code!=4){
  619. return
  620. }
  621. let text = row.state.code==3?'关闭':(row.state.code==4?'开启':'')
  622. this.$confirm(`是否`+text+`此设备`, "提示", {
  623. confirmButtonText: "确定",
  624. cancelButtonText: "取消",
  625. type: "warning"
  626. }).then(async () => {
  627. self.switchChange(row)
  628. }).catch(() => {
  629. })
  630. },
  631. //开关按钮
  632. switchChange(row){
  633. let switchData = {
  634. id:row.id,
  635. switchVal:row.state.code==3?'close':(row.state.code==4?'open':'')
  636. };
  637. hardWareControl(switchData).then(response => {
  638. console.log(response);
  639. if(response.code==200){
  640. row.state.code = row.state.code==3?4:(row.state.code==4?3:'')
  641. this.msgSuccess("操作成功")
  642. }
  643. });
  644. },
  645. //切换实验室展示数据
  646. rightButtonClick(type){
  647. let self = this;
  648. if(this.rightButtonType != type){
  649. this.rightButtonType = type;
  650. this.videoOff();
  651. if(type == 3){
  652. let self = this;
  653. let list = [];
  654. if(self.checkedSubject.labHardwareVOList){
  655. for(let i=0;i<self.checkedSubject.labHardwareVOList.length;i++){
  656. if(self.checkedSubject.labHardwareVOList[i].hardwareTypeEnum.enumName == 'VIDEO_MONITOR'){
  657. list.push(self.checkedSubject.labHardwareVOList[i].hardwareNUM);
  658. }
  659. }
  660. if(list[0]){
  661. let obj = {
  662. count:"100",
  663. deviceIds:list+'',
  664. page:"1",
  665. };
  666. let urlText = window.location.href;
  667. if(urlText.indexOf(localStorage.getItem('ipIdentify')) != -1){
  668. startUrl(obj).then(res => {
  669. console.log('res',res)
  670. if(res.code == 200){
  671. if(!res.data[0]){
  672. this.msgError("视频配置异常请联系管理员")
  673. return
  674. }
  675. let newData = res.data;
  676. let videoList = [];
  677. for(let i=0;i<newData.length;i++){
  678. let obj = {
  679. name:self.checkedSubject.name + self.checkedSubject.subAddrr.room,
  680. videoType:"flv",
  681. divId:'divId'+i,
  682. url:newData[i].ws_flv,
  683. }
  684. videoList.push(obj)
  685. }
  686. this.$set(this.checkedSubject,'videoData',videoList);
  687. if(this.rightButtonType == 3){
  688. setTimeout(function(){
  689. self.videoFunction();
  690. },1000);
  691. }
  692. }
  693. });
  694. }else{
  695. startUrl(obj).then(res => {
  696. console.log('res',res)
  697. if(res.code == 200){
  698. if(!res.data[0]){
  699. this.msgError("视频配置异常请联系管理员")
  700. return
  701. }
  702. let newData = res.data;
  703. let videoList = [];
  704. for(let i=0;i<newData.length;i++){
  705. let text = localStorage.getItem('cameraUrl');
  706. let url = newData[i].ws_flv;
  707. url = url.split("rtp/");
  708. let newUrl = text+'rtp/'+url[1];
  709. let obj = {
  710. name:self.checkedSubject.name + self.checkedSubject.subAddrr.room,
  711. videoType:"flv",
  712. divId:'divId'+i,
  713. url:newUrl,
  714. }
  715. videoList.push(obj)
  716. }
  717. this.$set(this.checkedSubject,'videoData',videoList);
  718. if(this.rightButtonType == 3){
  719. setTimeout(function(){
  720. self.videoFunction();
  721. },1000);
  722. }
  723. }
  724. });
  725. }
  726. }else{
  727. this.$set(this.checkedSubject,'videoData',[]);
  728. }
  729. }else{
  730. this.$set(this.checkedSubject,'videoData',[]);
  731. }
  732. }
  733. }
  734. },
  735. //选中实验室
  736. handleCurrentChange(val){
  737. let self = this;
  738. if(val.id != this.checkedSubject.id){
  739. this.videoOff();
  740. this.offMQTT();
  741. this.subjectInfo(val.id);
  742. this.subId = val.id;
  743. this.$set(this,'queryParamsTwo',{
  744. pageNum:1,
  745. pageSize:20,
  746. });
  747. this.getEnablelist();
  748. this.getHxpAlarmRecordNoAuthList();
  749. this.subscriptionMQTT();
  750. }
  751. },
  752. //获取实验室详情
  753. subjectInfo(id){
  754. let type = 1; //硬件 //0全部
  755. subjectInfo(id,type).then(response => {
  756. let obj = JSON.parse(JSON.stringify(response.data));
  757. obj.VOlist = [];
  758. if(response.data.labHardwareVOList){
  759. for(let i=0;i<response.data.labHardwareVOList.length;i++){
  760. if(response.data.labHardwareVOList[i].hardwareTypeEnum.enumName == 'SWITCH'||
  761. response.data.labHardwareVOList[i].hardwareTypeEnum.enumName == 'AI_VENTILATION'){
  762. obj.VOlist.push(response.data.labHardwareVOList[i]);
  763. }
  764. }
  765. }
  766. this.$set(this,'checkedSubject',obj);
  767. this.$set(this.checkedSubject,'videoData',[]);
  768. this.rightButtonType = 1;
  769. })
  770. },
  771. //编辑按钮
  772. handleCommand(command, row){
  773. switch (command) {
  774. case "1":
  775. console.log('关联配置');
  776. this.clickPage(6,row);
  777. break;
  778. case "2":
  779. console.log('物联配置');
  780. this.clickPage(4,row);
  781. break;
  782. case "3":
  783. console.log('准入配置');
  784. this.clickPage(5,row);
  785. break;
  786. case "4":
  787. console.log('编辑');
  788. this.clickPage(3,row);
  789. break;
  790. case "5":
  791. console.log('删除');
  792. break;
  793. default:
  794. break;
  795. }
  796. },
  797. //保存当前排序
  798. liveSort(row){
  799. console.log("row",row);
  800. let obj = {
  801. sort:row.diyOrder
  802. }
  803. this.sort = JSON.parse(JSON.stringify(obj));
  804. },
  805. //编辑排序
  806. editSort(row){
  807. let self = this;
  808. if(row.diyOrder != this.sort.sort){
  809. self.$confirm('是否确认修改排序?', "", {
  810. confirmButtonText: "确定",
  811. cancelButtonText: "取消",
  812. type: "warning"
  813. }).then(function() {
  814. let obj = {
  815. id:row.id,
  816. diyOrder:row.diyOrder,
  817. };
  818. updateSubject(obj).then(response => {
  819. self.msgSuccess("修改成功");
  820. self.getList();
  821. });
  822. }).then(() => {}).catch(() => {
  823. let obj = JSON.parse(JSON.stringify(self.sort));
  824. row.diyOrder = obj.sort
  825. });
  826. }
  827. },
  828. /** 搜索按钮操作 */
  829. handleQuery() {
  830. this.queryParams.pageNum = 1;
  831. this.getList();
  832. },
  833. /** 重置按钮操作 */
  834. resetQuery() {
  835. this.$set(this,'queryParams',{
  836. pageNum: 1,
  837. pageSize:20,
  838. deptId:"",
  839. name: '',
  840. });
  841. // this.resetForm("queryForm");
  842. this.handleQuery();
  843. },
  844. /** 查询实验室列表 */
  845. getList() {
  846. this.loading = true;
  847. // this.offMQTT();
  848. authListSubject(this.queryParams).then(response => {
  849. this.subjectList = response.rows;
  850. this.total = response.total;
  851. this.loading = false;
  852. if(response.rows[0]){
  853. this.$refs.multipleTable.setCurrentRow(response.rows[0]);
  854. this.subjectInfo(response.rows[0].id);
  855. }
  856. let idList = [];
  857. for(let i=0;i<response.rows.length;i++){
  858. idList.push(response.rows[i].id)
  859. }
  860. this.$set(this,'mqttIdList',idList);
  861. // this.subscriptionMQTT();
  862. });
  863. },
  864. /** 查询学院列表 */
  865. getDeptList() {
  866. filterDept().then(response => {
  867. this.$set(this, 'deptOptions', response.data)
  868. });
  869. },
  870. //MQTT订阅
  871. subscriptionMQTT(){
  872. let self = this;
  873. this.client = mqtt.connect(localStorage.getItem('mqttUrl'), {
  874. username: localStorage.getItem('mqttUser'),
  875. password:localStorage.getItem('mqttPassword')
  876. });
  877. this.client.on("connect", e =>{
  878. console.log("连接成功");
  879. this.client.subscribe(this.mtopic+self.subId, (err) => {
  880. if (!err) {
  881. console.log("订阅成功:" + this.mtopic+self.subId);
  882. }
  883. });
  884. this.client.subscribe(this.mtopicOne+self.subId, (err) => {
  885. if (!err) {
  886. console.log("订阅成功:" + this.mtopicOne+self.subId);
  887. }
  888. });
  889. // for(let i = 0; i< self.mqttIdList.length;i++){
  890. // this.client.subscribe(this.mtopic+self.mqttIdList[i], (err) => {
  891. // if (!err) {
  892. // console.log("订阅成功:" + this.mtopic+self.mqttIdList[i]);
  893. // }
  894. // });
  895. // this.client.subscribe(this.mtopicOne+self.mqttIdList[i], (err) => {
  896. // if (!err) {
  897. // console.log("订阅成功:" + this.mtopicOne+self.mqttIdList[i]);
  898. // }
  899. // });
  900. // }
  901. });
  902. this.client.on("message", (topic, message) => {
  903. // console.log('message',message)
  904. if (message){
  905. let data = JSON.parse(message)
  906. // console.log("MQTT----message",data)
  907. if(data.data.subId){
  908. //传感器
  909. console.log("传感器",data);
  910. if(self.checkedSubject.id){
  911. if(data.data.subId&&data.data.subId == self.checkedSubject.id){
  912. self.$set(self.checkedSubject,'sensorFunctionStatusList',data.data.functionStatuses);
  913. self.$set(self.checkedSubject.sensorFunctionStatusList[0],'sendDate',data.sendDate);
  914. }
  915. }
  916. if(self.newData.id){
  917. if(data.data.subId&&data.data.subId == self.newData.id){
  918. self.$set(self.newData,'sensorFunctionStatusList',data.data.functionStatuses);
  919. self.$set(self.newData.sensorFunctionStatusList[0],'sendDate',data.sendDate);
  920. }
  921. }
  922. }else{
  923. //硬件
  924. console.log("硬件",data);
  925. for (let i = 0; i < data.data.length; i++) {
  926. if (self.checkedSubject.VOlist) {
  927. for (let k = 0; k < self.checkedSubject.VOlist.length; k++) {
  928. if (self.checkedSubject.VOlist[k].id == data.data[i].num) {
  929. if (data.data[i].hardwareOperate == 'CLOSE') {
  930. self.checkedSubject.VOlist[k].state.code = 4;
  931. } else if (data.data[i].hardwareOperate == 'OPEN') {
  932. self.checkedSubject.VOlist[k].state.code = 3;
  933. } else if (data.data[i].hardwareOperate == 'OFFLINE') {
  934. self.checkedSubject.VOlist[k].state.code = 0;
  935. }
  936. }
  937. }
  938. }
  939. if(self.newData.labHardwareVOList){
  940. for(let k=0;k<self.newData.labHardwareVOList.length;k++){
  941. if(self.newData.labHardwareVOList[k].id == data.data[i].num){
  942. if(data.data[i].hardwareOperate == 'CLOSE'){
  943. self.newData.labHardwareVOList[k].state.code = 4;
  944. }else if(data.data[i].hardwareOperate == 'OPEN'){
  945. self.newData.labHardwareVOList[k].state.code = 3;
  946. }else if(data.data[i].hardwareOperate == 'OFFLINE'){
  947. self.newData.labHardwareVOList[k].state.code = 0;
  948. }
  949. }
  950. }
  951. }
  952. }
  953. }
  954. }
  955. });
  956. },
  957. //取消订阅关闭MQTT连接
  958. offMQTT(){
  959. let self = this;
  960. if (self.mqttIdList[0]){
  961. // for(let i=0;i<self.mqttIdList.length;i++){
  962. // self.client.unsubscribe(self.mtopic+self.mqttIdList[i], error => {
  963. // if (error) {
  964. // console.log('Unsubscribe error', error)
  965. // }
  966. // })
  967. // self.client.unsubscribe(self.mtopicOne+self.mqttIdList[i], error => {
  968. // if (error) {
  969. // console.log('Unsubscribe error', error)
  970. // }
  971. // })
  972. // }
  973. self.client.unsubscribe(self.mtopic+self.subId, error => {
  974. if (error) {
  975. console.log('Unsubscribe error', error)
  976. }
  977. })
  978. self.client.unsubscribe(self.mtopicOne+self.subId, error => {
  979. if (error) {
  980. console.log('Unsubscribe error', error)
  981. }
  982. })
  983. self.client.end();
  984. self.client = {};
  985. }
  986. },
  987. //视频方法
  988. videoFunction(){
  989. let self = this;
  990. // self.videoList = [];
  991. for(let i=0;i<self.checkedSubject.videoData.length;i++){
  992. let obj = {
  993. player :{},
  994. flvPlayer:{}
  995. };
  996. obj.player = document.getElementById(self.checkedSubject.videoData[i].divId);
  997. // if (flvjs.isSupported()) {
  998. obj.flvPlayer = flvjs.createPlayer(
  999. {
  1000. // isLive: true, //=> 是否为直播流
  1001. // hasAudio: false, //=> 是否开启声音
  1002. type: self.checkedSubject.videoData[i].videoType, //媒体类型 flv 或 mp4
  1003. url: self.checkedSubject.videoData[i].url //视频流地址
  1004. },
  1005. {
  1006. enableStashBuffer: true,//启用 IO 存储缓冲区。 如果您需要实时流播放(最小延迟),请设置为 false,但如果存在网络抖动,则可能会停止。
  1007. stashInitialSize: 128,//IO 存储缓冲区初始大小。 默认值为 384KB。 指示合适的大小可以改善视频加载/搜索时间。
  1008. isLive: true,//是否是直播
  1009. lazyLoadRecoverDuration: 30,//指示以秒为单位的lazyLoad 恢复时间边界。
  1010. autoCleanupSourceBuffer: true,//进行自动清理
  1011. autoCleanupMaxBackwardDuration: 3 * 60,//3 * 60 当向后缓冲持续时间超过这个值(以秒为单位)时,对 SourceBuffer 进行自动清理
  1012. autoCleanupMinBackwardDuration: 2 * 60,//2 * 60 指示在执行自动清理时为后向缓冲区保留的持续时间(以秒为单位)。
  1013. }
  1014. );
  1015. self.videoList.push(obj);
  1016. // }
  1017. console.log("i",i)
  1018. }
  1019. for(let i=0;i<self.videoList.length;i++){
  1020. self.videoList[i].flvPlayer.attachMediaElement(self.videoList[i].player);
  1021. self.videoList[i].flvPlayer.load(); //加载
  1022. self.videoList[i].flvPlayer.play(); //加载
  1023. }
  1024. },
  1025. //视屏全屏方法
  1026. videoFullScreen(index){
  1027. this.$refs.videoRef[index_SuZhouDX].webkitRequestFullScreen();
  1028. },
  1029. //断开视频流
  1030. videoOff(){
  1031. let self = this;
  1032. if(self.videoList[0]){
  1033. for(let i=0;i<self.videoList.length;i++){
  1034. self.videoList[i].flvPlayer.pause();
  1035. self.videoList[i].flvPlayer.unload();
  1036. self.videoList[i].flvPlayer.detachMediaElement();
  1037. self.videoList[i].flvPlayer.destroy();
  1038. self.videoList[i].flvPlayer = null;
  1039. }
  1040. self.videoList = [];
  1041. }
  1042. },
  1043. },
  1044. beforeDestroy() {
  1045. //清除定时器
  1046. let self = this;
  1047. self.videoOff();
  1048. self.offMQTT();
  1049. console.log("beforeDestroy");
  1050. },
  1051. }
  1052. </script>
  1053. <style scoped lang="scss">
  1054. .subject{
  1055. flex:1;
  1056. display: flex!important;
  1057. flex-direction: column;
  1058. overflow: hidden;
  1059. *{
  1060. margin:0;
  1061. }
  1062. .subject-page{
  1063. flex:1;
  1064. display: flex;
  1065. flex-direction: column;
  1066. padding:20px;
  1067. overflow: hidden;
  1068. border-radius:10px;
  1069. margin:5px 20px 20px 10px;
  1070. box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
  1071. .subject-page-min{
  1072. flex:1;
  1073. display: flex;
  1074. overflow: hidden;
  1075. }
  1076. .left-subject-list{
  1077. flex:1;
  1078. display: flex;
  1079. flex-direction: column;
  1080. margin-right:20px;
  1081. overflow: hidden ;
  1082. }
  1083. .overflow-box{
  1084. overflow: hidden;
  1085. }
  1086. .right-subject-box{
  1087. width:514px;
  1088. display: flex;
  1089. flex-direction: column;
  1090. .top-button-box{
  1091. display: flex;
  1092. div{
  1093. padding:0 10px;
  1094. height:40px;
  1095. line-height:40px;
  1096. font-size:16px;
  1097. text-align: center;
  1098. border-top-right-radius: 10px;
  1099. border-top-left-radius: 10px;
  1100. margin-right:1px;
  1101. cursor: pointer;
  1102. font-weight: 500;
  1103. }
  1104. .buttonColorA{
  1105. color:#FFFFFF;
  1106. background:#0045AF ;
  1107. }
  1108. .buttonColorB{
  1109. color:#999999;
  1110. background:#E0E0E0 ;
  1111. }
  1112. }
  1113. .bottom-max-box{
  1114. font-weight:500;
  1115. flex:1;
  1116. display: flex;
  1117. flex-direction: column;
  1118. .bottom-sensor-box{
  1119. background: #fff;
  1120. width:510px;
  1121. border: 1px solid #E0E0E0;
  1122. border-radius: 0 10px 10px 10px;
  1123. .top-title{
  1124. line-height:18px;
  1125. font-size:16px;
  1126. margin:23px 10px;
  1127. }
  1128. .null-text-p{
  1129. text-align: center;
  1130. font-size:16px;
  1131. color:#999;
  1132. line-height:50px;
  1133. margin:0 30px;
  1134. }
  1135. .sensor-for-max-box{
  1136. .sensor-for-big-box{
  1137. display: inline-block;
  1138. width:158px;
  1139. height:60px;
  1140. margin:0 0 11px 8px;
  1141. border-radius: 10px;
  1142. .sensor-for-min-box{
  1143. display: flex;
  1144. img{
  1145. width:26px;
  1146. height:26px;
  1147. margin:17px 11px;
  1148. }
  1149. div{
  1150. margin:9px 0;
  1151. p{
  1152. color:#fff;
  1153. }
  1154. p:nth-child(1){
  1155. font-size:14px;
  1156. line-height:20px;
  1157. }
  1158. p:nth-child(2){
  1159. font-size:16px;
  1160. line-height:22px;
  1161. }
  1162. }
  1163. }
  1164. }
  1165. .sensor-color-a{
  1166. background: #FF7272;
  1167. color:#fff;
  1168. }
  1169. .sensor-color-b{
  1170. background: #E0E0E0;
  1171. color:#999999;
  1172. }
  1173. .sensor-color-c{
  1174. background: #80D164;
  1175. color:#fff;
  1176. }
  1177. }
  1178. .bottom-text{
  1179. line-height:18px;
  1180. font-size:14px;
  1181. color:#999999;
  1182. margin:40px 10px 15px;
  1183. }
  1184. }
  1185. .bottom-switch-box{
  1186. background: #fff;
  1187. width:510px;
  1188. border: 1px solid #E0E0E0;
  1189. border-radius: 0 10px 10px 10px;
  1190. .top-title{
  1191. line-height:18px;
  1192. font-size:16px;
  1193. margin:23px 10px;
  1194. }
  1195. .null-text-p{
  1196. text-align: center;
  1197. font-size:16px;
  1198. color:#999;
  1199. line-height:50px;
  1200. margin:0 30px;
  1201. }
  1202. .switch-for-max-box{
  1203. .switch-for-big-box{
  1204. display: inline-block;
  1205. .switch-for-min-box{
  1206. width:210px;
  1207. height:60px;
  1208. border:1px solid #E0E0E0;
  1209. border-radius: 10px;
  1210. margin:0 0 20px 30px;
  1211. display: flex;
  1212. .switch-for-min-title{
  1213. font-size:16px;
  1214. line-height:58px;
  1215. width:113px;
  1216. margin-left:12px;
  1217. display:block;
  1218. overflow:hidden;
  1219. text-overflow:ellipsis;
  1220. white-space:nowrap;
  1221. }
  1222. .switch{
  1223. margin-top:14px;
  1224. }
  1225. .switch-null-p{
  1226. font-size:16px;
  1227. line-height:58px;
  1228. color:#999;
  1229. }
  1230. .switch-button-p{
  1231. font-size:16px;
  1232. line-height:58px;
  1233. color:#0183fa;
  1234. cursor: pointer;
  1235. }
  1236. .switch-for-min-button{
  1237. width:70px;
  1238. height:30px;
  1239. line-height:30px;
  1240. font-size:14px;
  1241. color:#0045AF;
  1242. border-radius:6px;
  1243. border: 1px solid #0045AF;
  1244. margin-top:14px;
  1245. text-align: center;
  1246. cursor: pointer;
  1247. }
  1248. }
  1249. }
  1250. }
  1251. }
  1252. .bottom-video-box{
  1253. background: #fff;
  1254. width:510px;
  1255. border: 1px solid #E0E0E0;
  1256. border-radius: 0 10px 10px 10px;
  1257. .top-title{
  1258. line-height:18px;
  1259. font-size:16px;
  1260. margin:23px 10px;
  1261. }
  1262. .null-text-p{
  1263. text-align: center;
  1264. font-size:16px;
  1265. color:#999;
  1266. line-height:50px;
  1267. margin:0 30px;
  1268. }
  1269. .video-for-max-box{
  1270. .switch-for-big-box{
  1271. width:490px;
  1272. height:262px;
  1273. margin:0 auto 14px;
  1274. position: relative;
  1275. .position-p{
  1276. width:42px;
  1277. height:42px;
  1278. text-align: center;
  1279. line-height:42px;
  1280. font-size:18px;
  1281. position: absolute;
  1282. top:0;
  1283. right:0;
  1284. color:#fff;
  1285. cursor: pointer;
  1286. }
  1287. }
  1288. }
  1289. }
  1290. .bottom-alarm-box{
  1291. flex:1;
  1292. display: flex;
  1293. flex-direction: column;
  1294. background: #fff;
  1295. width:510px;
  1296. overflow-x: hidden;
  1297. .alarm-max-box{
  1298. width:510px;
  1299. height:150px;
  1300. display: flex;
  1301. position:relative;
  1302. border: 1px solid #E0E0E0;
  1303. border-radius: 0 10px 10px 10px;
  1304. .alarm-img{
  1305. width:110px;
  1306. height:110px;
  1307. margin:20px;
  1308. }
  1309. .alarm-big-box{
  1310. p:nth-child(1){
  1311. font-size:14px;
  1312. margin:40px 0 25px 0;
  1313. }
  1314. p:nth-child(2){
  1315. width: 60px;
  1316. font-size:12px;
  1317. font-weight:700;
  1318. line-height:24px;
  1319. border-radius: 12px;
  1320. text-align: center;
  1321. }
  1322. .colorTypeA{
  1323. background: rgba(1,131,250,0.2);
  1324. color:#0183FA;
  1325. }
  1326. .colorTypeB{
  1327. background: #ECECEC;
  1328. color:#A2A2A2;
  1329. }
  1330. }
  1331. .alarm-position-box{
  1332. position:absolute;
  1333. bottom:20px;
  1334. right:15px;
  1335. width: 75px;
  1336. height: 30px;
  1337. }
  1338. }
  1339. .alarm-title-box{
  1340. display: flex;
  1341. p{
  1342. line-height:60px;
  1343. font-size:14px;
  1344. }
  1345. p:nth-child(1){
  1346. flex:1;
  1347. }
  1348. p:nth-child(2){
  1349. cursor: pointer;
  1350. }
  1351. }
  1352. }
  1353. .null-data-img{
  1354. width:137px;
  1355. height:137px;
  1356. display: block;
  1357. margin:10px auto;
  1358. }
  1359. }
  1360. }
  1361. }
  1362. }
  1363. </style>
  1364. <style lang="scss">
  1365. .alarm-position-box{
  1366. .switch .el-switch__label {
  1367. position: absolute;
  1368. display: none;
  1369. color: #fff !important;
  1370. }
  1371. .switch .el-switch__label--right {
  1372. z-index: 1;
  1373. }
  1374. .switch .el-switch__label--right span{
  1375. margin-right: 9px;
  1376. }
  1377. .switch .el-switch__label--left {
  1378. z-index: 1;
  1379. }
  1380. .switch .el-switch__label--left span{
  1381. margin-left: 9px;
  1382. }
  1383. .switch .el-switch__label.is-active {
  1384. display: block;
  1385. }
  1386. .switch.el-switch .el-switch__core,
  1387. .el-switch .el-switch__label {
  1388. width: 80px !important;
  1389. height:30px!important;
  1390. line-height:30px!important;
  1391. -webkit-border-radius: 20px!important;
  1392. -moz-border-radius: 20px!important;
  1393. border-radius: 20px!important;
  1394. margin: 0;
  1395. position: absolute;
  1396. top: 0;
  1397. }
  1398. .switch .el-switch__label--left span{
  1399. margin-left:30px!important;
  1400. }
  1401. .switch .el-switch__label--right span{
  1402. margin-left:8px!important;
  1403. }
  1404. .el-switch__core:after{
  1405. height:24px!important;
  1406. width:24px!important;
  1407. top:2px!important;
  1408. }
  1409. .el-switch.is-checked .el-switch__core::after{
  1410. margin-left: -25px!important;
  1411. }
  1412. .el-switch{
  1413. margin:10px auto 0;
  1414. display: block;
  1415. width:80px!important;
  1416. height:4px!important;
  1417. }
  1418. }
  1419. </style>