index.vue 58 KB

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