deviceList.vue 44 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389
  1. <!--物联设备配置-->
  2. <template>
  3. <div class="deviceList scrollbar-box">
  4. <div class="title-box">
  5. <p class="left-title">传感器</p>
  6. <p class="right-button reset-button-one" @click="backPage">返回</p>
  7. </div>
  8. <div class="for-max-box">
  9. <div class="for-big-box" v-for="(item,index) in listCgq" :key="index">
  10. <p class="for-title-p">{{subjectData.room}}-{{item.type.name}}传感器{{index+1}}</p>
  11. <div class="for-text-box">
  12. <p>网关编号:</p>
  13. <el-tooltip class="item" effect="dark" :content="item.gatewayId" placement="top">
  14. <p>{{item.gatewayId}}</p>
  15. </el-tooltip>
  16. </div>
  17. <div class="for-button-box">
  18. <p @click="editData(5,item)"><i class="el-icon-edit-outline"></i>编辑</p>
  19. <p></p>
  20. <p @click="delSensor(item)"><i class="el-icon-delete"></i>删除</p>
  21. </div>
  22. </div>
  23. <p class="add-for-p" @click="addData(1)"><i class="el-icon-plus"></i>添加传感器</p>
  24. </div>
  25. <div class="title-box" v-if="subjectData.hardwareType==1">
  26. <p class="left-title">智能门禁</p>
  27. </div>
  28. <div class="for-max-box" v-if="subjectData.hardwareType==1">
  29. <div class="for-big-box" v-for="(item,index) in listHK" :key="index" style="width: 350px">
  30. <p class="for-title-p">{{item.type.name}}-{{item.name}}</p>
  31. <div class="for-text-box">
  32. <p>门禁编号:</p>
  33. <el-tooltip class="item" effect="dark" :content="item.hardwareNum" placement="top">
  34. <p>{{item.hardwareNum}}</p>
  35. </el-tooltip>
  36. </div>
  37. <div class="for-text-box">
  38. <p>门禁授权:</p>
  39. <el-checkbox-group v-model="item.controlScope==null?[]:item.controlScope.split(',')" style="margin-top: 6px" disabled>
  40. <el-checkbox label="1" style="margin-right: 8px">关联安全准入</el-checkbox>
  41. <el-checkbox label="2">关联白名单</el-checkbox>
  42. </el-checkbox-group>
  43. </div>
  44. <div class="for-button-box">
  45. <p @click="editData('editEntrance',item)"><i class="el-icon-edit-outline"></i>编辑</p>
  46. <p></p>
  47. <p @click="delEntrance(item)"><i class="el-icon-delete"></i>删除</p>
  48. </div>
  49. </div>
  50. <p class="add-for-p" @click="addData('addEntrance')" style="width: 350px;height: 158px;" v-if="listHK.length<3"><i class="el-icon-plus"></i>添加智能门禁</p>
  51. </div>
  52. <div class="title-box">
  53. <p class="left-title">一体机</p>
  54. </div>
  55. <div class="for-max-box">
  56. <div class="for-big-box" v-for="(item,index) in listYtj" :key="index">
  57. <p class="for-title-p">{{subjectData.room}}-{{item.type.name}}{{index+1}}</p>
  58. <div class="for-text-box">
  59. <p>一体机编号:</p>
  60. <el-tooltip class="item" effect="dark" :content="item.hardwareNum" placement="top">
  61. <p>{{item.hardwareNum}}</p>
  62. </el-tooltip>
  63. </div>
  64. <div class="for-button-box">
  65. <p @click="editData(6,item)"><i class="el-icon-edit-outline"></i>编辑</p>
  66. <p></p>
  67. <p @click="delHardware(item)"><i class="el-icon-delete"></i>删除</p>
  68. </div>
  69. </div>
  70. <p class="add-for-p" @click="addData(2)"><i class="el-icon-plus"></i>添加一体机</p>
  71. </div>
  72. <div class="title-box">
  73. <p class="left-title">控制设备</p>
  74. </div>
  75. <div class="for-max-box">
  76. <div class="for-big-box-two" v-for="(item,index) in listkzsb" :key="index">
  77. <p class="for-title-p">{{subjectData.room}}-{{item.type.name}}传感器{{index+1}}</p>
  78. <div class="for-text-box">
  79. <p>设备编号:</p>
  80. <el-tooltip class="item" effect="dark" :content="item.relayCode" placement="top">
  81. <p>{{item.relayCode}}</p>
  82. </el-tooltip>
  83. </div>
  84. <div class="for-text-box">
  85. <p>设备路由:</p>
  86. <p>{{item.bit}}</p>
  87. </div>
  88. <div class="for-button-box">
  89. <p @click="editData(7,item)"><i class="el-icon-edit-outline"></i>编辑</p>
  90. <p></p>
  91. <p @click="delHardwareTwo(item)"><i class="el-icon-delete"></i>删除</p>
  92. </div>
  93. </div>
  94. <p class="add-for-p-two" @click="addData(3)"><i class="el-icon-plus"></i>添加控制设备</p>
  95. </div>
  96. <div class="title-box">
  97. <p class="left-title">摄像头</p>
  98. </div>
  99. <div class="for-max-box">
  100. <div class="for-big-box" v-for="(item,index) in listSpjk" :key="index">
  101. <p class="camera" v-if="item.isArrest">抓拍</p>
  102. <p class="for-title-p" style="background: none;color: #333;margin-top: 12px;">{{subjectData.room}}-{{item.type.name}}{{index+1}}</p>
  103. <div class="for-text-box">
  104. <p>摄像头编号:</p>
  105. <el-tooltip class="item" effect="dark" :content="item.hardwareNum" placement="top">
  106. <p>{{item.hardwareNum}}</p>
  107. </el-tooltip>
  108. </div>
  109. <!-- <div class="for-text-box">-->
  110. <!-- <p></p>-->
  111. <!-- <el-tooltip class="item" effect="dark" :content="item.hardwareNum" placement="top">-->
  112. <!-- <p>{{item.hardwareNum}}</p>-->
  113. <!-- </el-tooltip>-->
  114. <!-- </div>-->
  115. <div class="for-button-box">
  116. <p @click="editData(8,item)"><i class="el-icon-edit-outline"></i>编辑</p>
  117. <p></p>
  118. <p @click="delHardwareThree(item)"><i class="el-icon-delete"></i>删除</p>
  119. </div>
  120. </div>
  121. <p class="add-for-p-two" @click="addData(4)"><i class="el-icon-plus"></i>添加摄像头</p>
  122. </div>
  123. <div class="title-box" v-if="subjectData.hardwareType==2">
  124. <p class="left-title">电子信息牌</p>
  125. </div>
  126. <div class="for-max-box" v-if="subjectData.hardwareType==2">
  127. <div class="for-big-box" v-for="(item,index) in listXxp" :key="index">
  128. <p class="for-title-p">{{subjectData.room}}-{{item.cardName}}{{index+1}}</p>
  129. <div class="for-text-box">
  130. <p>设备编号:</p>
  131. <el-tooltip class="item" effect="dark" :content="item.cardNum" placement="top">
  132. <p>{{item.cardNum}}</p>
  133. </el-tooltip>
  134. </div>
  135. <div class="for-button-box">
  136. <p @click="editData('editSign',item)"><i class="el-icon-edit-outline"></i>编辑</p>
  137. <p></p>
  138. <p @click="delSign(item)"><i class="el-icon-delete"></i>删除</p>
  139. </div>
  140. </div>
  141. <p class="add-for-p" @click="addData('addSign')" v-if="listXxp.length<1"><i class="el-icon-plus"></i>添加信息牌</p>
  142. </div>
  143. <el-dialog :title="title" :visible.sync="addType" v-if="addType" width="500px" append-to-body>
  144. <el-form ref="form" :model="form" :rules="rules" label-width="110px">
  145. <div v-if="upType == 1 || upType == 5">
  146. <el-form-item label="传感器类型" prop="type">
  147. <el-select v-model="form.type" placeholder="请选择传感器类型" style="width:320px;">
  148. <el-option
  149. v-for="item in sensorAddOptions"
  150. :key="item.enumName"
  151. :label="item.name"
  152. :value="item.enumName">
  153. </el-option>
  154. </el-select>
  155. </el-form-item>
  156. <el-form-item label="网关编号" prop="gatewayId">
  157. <el-input v-model="form.gatewayId" placeholder="请输入网关编号"
  158. maxlength="30" style="width:320px;"/>
  159. </el-form-item>
  160. <el-form-item label="路由" prop="routeNum">
  161. <el-input v-model="form.routeNum" oninput="value=value.replace(/[^0-9.]/g,'')" maxlength="2" placeholder="请输入路由" style="width:320px;"></el-input>
  162. </el-form-item>
  163. <el-form-item label="传感器参数" prop="configName">
  164. <el-input v-model="form.configName" placeholder="请输入传感器参数"
  165. maxlength="30" style="width:320px;"></el-input>
  166. </el-form-item>
  167. <el-form-item label="状态参数" prop="configStatus">
  168. <el-input v-model="form.configStatus" placeholder="请输入状态参数"
  169. maxlength="30" style="width:320px;"></el-input>
  170. </el-form-item>
  171. </div>
  172. <div v-if="upType == 2 || upType == 6">
  173. <el-form-item label="一体机名称" prop="name">
  174. <el-input
  175. style="width:320px;"
  176. v-model="form.name"
  177. placeholder="请输入一体机名称"
  178. maxlength="8"
  179. size="small"
  180. />
  181. </el-form-item>
  182. <el-form-item label="一体机类型" prop="pcType">
  183. <el-select v-model="form.pcType" placeholder="请选择一体机类型" style="width:320px;">
  184. <el-option label="管控一体机" value="0" />
  185. <el-option label="学习一体机" value="1" />
  186. </el-select>
  187. </el-form-item>
  188. <el-form-item label="一体机编号" prop="hardwareNum">
  189. <el-input
  190. style="width:320px;"
  191. v-model="form.hardwareNum"
  192. placeholder="请输入一体机编号"
  193. maxlength="30"
  194. size="small"
  195. />
  196. </el-form-item>
  197. </div>
  198. <div v-if="upType == 3 || upType == 7">
  199. <el-form-item label="设备类型" prop="type">
  200. <el-select v-model="form.type" placeholder="请选择设备类型" style="width:320px;" :disabled="disabledType">
  201. <el-option key="1" label="电源开关" value="1"></el-option>
  202. <el-option key="2" label="智能通风" value="2"></el-option>
  203. </el-select>
  204. </el-form-item>
  205. <el-form-item label="硬件名称" prop="name">
  206. <el-input
  207. v-model="form.name"
  208. placeholder="请输入硬件名称"
  209. clearable
  210. size="small"
  211. maxLength="8"
  212. />
  213. </el-form-item>
  214. <el-form-item label="继电器类型" prop="hardwareType">
  215. <el-radio-group v-model="form.hardwareType">
  216. <el-radio :label="1">老继电器</el-radio>
  217. <el-radio :label="2">新继电器</el-radio>
  218. <el-radio :label="3">泥人继电器</el-radio>
  219. </el-radio-group>
  220. </el-form-item>
  221. <el-form-item label="绑定继电器" prop="relayCode" v-if="form.hardwareType==1 || form.hardwareType==3">
  222. <el-select v-model="form.relayCode" placeholder="请选择继电器" clearable @change="loadRelayNum" @clear="loadClear">
  223. <el-option v-for="relay in relayList"
  224. :key="relay.code"
  225. :label="relay.code"
  226. :value="relay.code">
  227. </el-option>
  228. </el-select>
  229. </el-form-item>
  230. <el-form-item label="继电器编号" prop="relayCode" v-if="form.hardwareType==2">
  231. <el-input
  232. v-model="form.relayCode"
  233. placeholder="请输入继电器编号"
  234. clearable
  235. size="small"
  236. maxlength="20"
  237. />
  238. </el-form-item>
  239. <el-form-item label="继电器位置" prop="bit" >
  240. <el-select v-model="form.bit" placeholder="请选择继电器位置" clearable >
  241. <el-option v-for="lab in relayNumList"
  242. :key="lab.name"
  243. :label="lab.name"
  244. :value="lab.name">
  245. </el-option>
  246. </el-select>
  247. </el-form-item>
  248. <el-form-item label="是否灭火主机" prop="isPcfire">
  249. <el-radio-group v-model="form.isPcfire">
  250. <el-radio :label="0">否</el-radio>
  251. <el-radio :label="1">是</el-radio>
  252. </el-radio-group>
  253. </el-form-item>
  254. <el-form-item label="配置名称" prop="configName" v-if="form.hardwareType == 2">
  255. <el-input v-model="form.configName" maxlength="30" placeholder="请输入配置名称" style="width:320px;"></el-input>
  256. </el-form-item>
  257. <el-form-item label="配置状态" prop="configStatus" v-if="form.hardwareType == 2">
  258. <el-input v-model="form.configStatus" maxlength="30" placeholder="请输入配置状态" style="width:320px;"></el-input>
  259. </el-form-item>
  260. </div>
  261. <div v-if="upType == 4 || upType == 8">
  262. <el-form-item label="硬件名称" prop="name">
  263. <el-input
  264. v-model="form.name"
  265. placeholder="请输入硬件名称"
  266. clearable
  267. size="small"
  268. maxLength="8"
  269. style="width:320px;"
  270. />
  271. </el-form-item>
  272. <el-form-item label="摄像头编号" prop="hardwareNum">
  273. <el-input v-model="form.hardwareNum" placeholder="摄像头编号"
  274. maxlength="30" style="width:320px;"/>
  275. </el-form-item>
  276. <el-form-item label="硬件IP" prop="ipAddress">
  277. <el-input
  278. v-model="form.ipAddress"
  279. placeholder="请输入硬件IP"
  280. clearable
  281. size="small"
  282. maxLength="20"
  283. style="width:320px;"
  284. />
  285. </el-form-item>
  286. <el-form-item label="类型" >
  287. <!-- <el-radio-group v-model="form.pcType">-->
  288. <!-- <el-radio :label="0">火焰算法</el-radio>-->
  289. <!-- <el-radio :label="1">穿戴识别</el-radio>-->
  290. <!-- <el-radio :label="2">违规带离抓拍</el-radio>-->
  291. <!-- </el-radio-group>-->
  292. <el-checkbox-group v-model="form.subType">
  293. <el-checkbox label="0">火焰算法</el-checkbox>
  294. <el-checkbox label="1">穿戴识别</el-checkbox>
  295. <el-checkbox label="2">违规带离抓拍</el-checkbox>
  296. </el-checkbox-group>
  297. </el-form-item>
  298. </div>
  299. <div v-if="upType == 'addEntrance'|| upType=='editEntrance'">
  300. <el-form-item label="门禁编号" prop="hardwareNum">
  301. <el-input
  302. style="width:320px;"
  303. v-model="form.hardwareNum"
  304. placeholder="请输入门禁编号"
  305. maxlength="20"
  306. size="small"
  307. />
  308. </el-form-item>
  309. <el-form-item label="门禁名称" prop="name" >
  310. <el-input
  311. style="width:320px;"
  312. v-model="form.name"
  313. placeholder="请输入门禁名称"
  314. maxlength="8"
  315. size="small"
  316. />
  317. </el-form-item>
  318. <el-form-item label="IP" prop="ipAddress" >
  319. <el-input
  320. style="width:320px;"
  321. v-model="form.ipAddress"
  322. placeholder="请输入IP"
  323. maxlength="15"
  324. size="small"
  325. />
  326. </el-form-item>
  327. <el-form-item label="端口" prop="port" >
  328. <el-input
  329. style="width:320px;"
  330. v-model="form.port"
  331. placeholder="请输入端口"
  332. maxlength="6"
  333. size="small"
  334. />
  335. </el-form-item>
  336. <el-form-item label="设备管理证号" prop="harUser" >
  337. <el-input
  338. style="width:320px;"
  339. v-model="form.harUser"
  340. placeholder="请输入设备管理证号"
  341. maxlength="30"
  342. size="small"
  343. />
  344. </el-form-item>
  345. <el-form-item label="设备管理密码" prop="harPsw" >
  346. <el-input
  347. style="width:320px;"
  348. v-model="form.harPsw"
  349. placeholder="请输入设备管理密码"
  350. maxlength="30"
  351. size="small"
  352. />
  353. </el-form-item>
  354. <el-form-item label="门禁权限" style="margin-bottom: 0">
  355. <el-checkbox-group v-model="form.controlScope">
  356. <el-checkbox label="1" >关联安全准入</el-checkbox>
  357. <el-checkbox label="2">关联白名单</el-checkbox>
  358. </el-checkbox-group>
  359. </el-form-item>
  360. <p style="margin:0 20px 0 104px;color: #FD2A2A;">关联之后申请安全准入或者白名单后自动授权门禁,不关联则需要单独授权门禁</p>
  361. </div>
  362. <div v-if="upType == 'addSign'|| upType=='editSign'">
  363. <el-form-item label="设备编号" prop="cardNum">
  364. <el-input
  365. style="width:320px;"
  366. v-model="form.cardNum"
  367. placeholder="请输入设备编号"
  368. maxlength="30"
  369. size="small"
  370. />
  371. </el-form-item>
  372. <el-form-item label="实验室">
  373. <el-input
  374. style="width:320px;"
  375. v-model="subjectData.name"
  376. placeholder="请选择实验室"
  377. maxlength="20"
  378. size="small"
  379. disabled
  380. />
  381. </el-form-item>
  382. <!-- <el-form-item label="实验室" prop="subjectId">-->
  383. <!-- <el-select-->
  384. <!-- style="width:300px;"-->
  385. <!-- v-model="form.subjectName"-->
  386. <!-- filterable-->
  387. <!-- remote-->
  388. <!-- clearable-->
  389. <!-- reserve-keyword-->
  390. <!-- @focus="selectFocus"-->
  391. <!-- @change="selectChange"-->
  392. <!-- placeholder="请选择实验地点"-->
  393. <!-- :remote-method="userSelectList"-->
  394. <!-- :loading="loading">-->
  395. <!-- <el-option-->
  396. <!-- v-for="item in laboratoryOptions"-->
  397. <!-- :key="item.id"-->
  398. <!-- :label="item.name"-->
  399. <!-- :value="item.id">-->
  400. <!-- </el-option>-->
  401. <!-- </el-select>-->
  402. <!-- </el-form-item>-->
  403. <el-form-item label="安装位置" >
  404. <el-input
  405. style="width:320px;"
  406. v-model="form.location"
  407. placeholder="请输入安装位置"
  408. maxlength="10"
  409. size="small"
  410. />
  411. </el-form-item>
  412. <el-form-item label="关联门禁">
  413. <el-radio-group v-model="form.isStart">
  414. <el-radio :label="1">是</el-radio>
  415. <el-radio :label="2">否</el-radio>
  416. </el-radio-group>
  417. </el-form-item>
  418. </div>
  419. </el-form>
  420. <div slot="footer" class="dialog-footer">
  421. <el-button @click="cancel">取 消</el-button>
  422. <el-button type="primary" @click="submitForm">确 定</el-button>
  423. </div>
  424. </el-dialog>
  425. </div>
  426. </template>
  427. <script>
  428. import {
  429. listBySubjectId,
  430. addSensor,
  431. putSensor,
  432. delSensor,
  433. addHardware,
  434. putHardware,
  435. delHardware,
  436. subjectSignAdd, subjectSignEdit, subjectSignDelete
  437. } from '@/api/laboratory/subject'
  438. import { getSensorList } from "@/api/laboratory/sensor";
  439. import { subjectList } from '@/api/gasManage3_0/gasManage'
  440. import { listRelay } from '@/api/laboratory/relay'
  441. export default {
  442. name: "deviceList",
  443. props:{
  444. subjectData:{},
  445. },
  446. data() {
  447. return {
  448. loading:false,
  449. title:"",
  450. addType:false,
  451. listCgq:[], //传感器
  452. listYtj:[], //一体机
  453. listkzsb:[],
  454. listSpjk:[], //摄像头
  455. listHK:[],//智能门禁
  456. listXxp:[],//电子信息牌
  457. form:{
  458. },
  459. relayList: [],
  460. relayNumList:[
  461. {name:1},
  462. {name:2},
  463. {name:3},
  464. {name:4},
  465. {name:5},
  466. {name:6},
  467. {name:7},
  468. {name:8},
  469. {name:9},
  470. {name:10},
  471. {name:11},
  472. {name:12}
  473. ],
  474. // 表单校验
  475. rules: {
  476. name:[
  477. {required: true, message: '请输入名称', trigger: 'blur'},
  478. { required: true, message: "请输入名称", validator: this.spaceJudgment, trigger: "blur" }
  479. ],
  480. type:[
  481. {required: true, message: '类型不能为空', trigger: 'blur'}
  482. ],
  483. gatewayId:[
  484. {required: true, message: '网关不能为空', trigger: 'blur'},
  485. { required: true, message: "网关不能为空", validator: this.spaceJudgment, trigger: "blur" }
  486. ],
  487. hardwareNum:[
  488. { required: true, message: "请输入编号", trigger: "blur" },
  489. { required: true, message: "请输入编号", validator: this.spaceJudgment, trigger: "blur" }
  490. ],
  491. pcType: [
  492. { required: true, message: "请选择类型", trigger: "blur" },
  493. ],
  494. hardwareType: [
  495. { required: true, message: "请选择设备版本", trigger: "blur" },
  496. ],
  497. relayCode: [
  498. { required: true, message: "请输入设备编号", trigger: "blur" },
  499. { required: true, message: "请输入设备编号", validator: this.spaceJudgment, trigger: "blur" }
  500. ],
  501. bit: [
  502. { required: true, message: "请输入路由", trigger: "blur" },
  503. { required: true, message: "请输入路由", validator: this.spaceJudgment, trigger: "blur" }
  504. ],
  505. ipAddress: [
  506. { required: true, message: "请输入IP", trigger: "blur" },
  507. { required: true, message: "请输入IP", validator: this.spaceJudgment, trigger: "blur" }
  508. ],
  509. port: [
  510. { required: true, message: "请输入端口", trigger: "blur" },
  511. { required: true, message: "请输入端口", validator: this.spaceJudgment, trigger: "blur" }
  512. ],
  513. harUser: [
  514. { required: true, message: "请输入设备管理证号", trigger: "blur" },
  515. { required: true, message: "请输入设备管理证号", validator: this.spaceJudgment, trigger: "blur" }
  516. ],
  517. harPsw: [
  518. { required: true, message: "请输入设备管理密码", trigger: "blur" },
  519. { required: true, message: "请输入设备管理密码", validator: this.spaceJudgment, trigger: "blur" }
  520. ],
  521. cardNum:[
  522. { required: true, message: "请输入设备编号", trigger: "blur" },
  523. { required: true, message: "请输入设备编号", validator: this.spaceJudgment, trigger: "blur" }
  524. ],
  525. subjectId: [
  526. { required: true, message: "请选择实验室", trigger: "blur" }
  527. ],
  528. },
  529. //提交类型
  530. upType:"",
  531. //传感器类型
  532. sensorAddOptions: [],
  533. }
  534. },
  535. created() {
  536. this.listBySubjectId();
  537. this.getSensorList();
  538. this.getRelayList();
  539. },
  540. mounted(){
  541. },
  542. methods:{
  543. selectFocus(){
  544. if(!this.laboratoryOptions[0]){
  545. this.userSelectList("");
  546. }
  547. },
  548. //懒加载实验室
  549. userSelectList(e){
  550. subjectList({name:e,deptId:this.form.deptId}).then(response => {
  551. this.laboratoryOptions = response.data;
  552. });
  553. },
  554. //实验室选择
  555. selectChange(e){
  556. let self = this;
  557. for(let i=0;i<self.laboratoryOptions.length;i++){
  558. if(self.laboratoryOptions[i].id == e){
  559. this.$set(this.form,"subject",self.laboratoryOptions[i]);
  560. this.$set(this.form,"subjectName",self.laboratoryOptions[i].name);
  561. }
  562. }
  563. this.$set(this.form,"subjectId",e);
  564. },
  565. // 取消按钮
  566. cancel() {
  567. this.addType = false;
  568. },
  569. // 查询继电器列表
  570. getRelayList(){
  571. listRelay({"type": 1}).then(response => {
  572. this.relayList = response.data;
  573. if(this.form.relayCode){
  574. let self = this
  575. let num = ""
  576. for(let i=0;i<self.relayList.length;i++){
  577. if(self.relayList[i].code == this.form.relayCode){
  578. num = self.relayList[i].routeNum
  579. }
  580. }
  581. let list = [];
  582. for(let i=0;i<num;i++){
  583. let obj = {
  584. name:i+1
  585. }
  586. list.push(obj);
  587. }
  588. this.relayNumList = list;
  589. }
  590. });
  591. },
  592. loadRelayNum(e){
  593. let self = this;
  594. let num = ""
  595. for(let i=0;i<self.relayList.length;i++){
  596. if(self.relayList[i].code == e){
  597. num = self.relayList[i].routeNum
  598. }
  599. }
  600. let list = [];
  601. for(let i=0;i<num;i++){
  602. let obj = {
  603. name:i+1
  604. }
  605. list.push(obj);
  606. }
  607. if(list.length>0){
  608. this.relayNumList = list;
  609. }else{
  610. this.relayNumList =[
  611. {name:1},
  612. {name:2},
  613. {name:3},
  614. {name:4},
  615. {name:5},
  616. {name:6},
  617. {name:7},
  618. {name:8},
  619. {name:9},
  620. {name:10},
  621. ]
  622. }
  623. },
  624. //清空按钮
  625. loadClear(){
  626. this.form.bit = '';
  627. },
  628. // 提交
  629. submitForm() {
  630. this.$refs["form"].validate(valid => {
  631. if (valid) {
  632. if(this.upType == 1){
  633. //新增传感器
  634. this.addSensor();
  635. }else if(this.upType == 5){
  636. //编辑传感器
  637. this.putSensor();
  638. }else if(this.upType == 2){
  639. //新增一体机
  640. this.addHardware();
  641. }else if(this.upType == 6){
  642. //编辑一体机
  643. this.putHardware();
  644. }else if(this.upType == 3){
  645. //新增控制设备
  646. this.addHardwareTwo();
  647. }else if(this.upType == 7){
  648. //编辑控制设备
  649. this.putHardwareTwo();
  650. }else if(this.upType == 4){
  651. //新增控制设备
  652. this.addHardwareThree();
  653. }else if(this.upType == 8){
  654. //编辑控制设备
  655. this.putHardwareThree();
  656. }else if(this.upType == 'addEntrance'){
  657. //新增智能门禁
  658. this.addEntrance();
  659. }else if(this.upType == 'editEntrance'){
  660. //编辑智能门禁
  661. this.editEntrance();
  662. }else if(this.upType == 'addSign'){
  663. //新增电子信息牌
  664. this.addSign();
  665. }else if(this.upType == 'editSign'){
  666. //编辑电子信息牌
  667. this.editSign();
  668. }
  669. }
  670. });
  671. },
  672. //删除电子信息牌
  673. delSign(item){
  674. this.$confirm('确认要删除该电子信息牌?', "警告", {
  675. confirmButtonText: "确定",
  676. cancelButtonText: "取消",
  677. type: "warning"
  678. }).then(() => {
  679. // 确定
  680. subjectSignDelete(item.id).then((response) => {
  681. this.msgSuccess(response.msg)
  682. this.addType = false;
  683. this.listBySubjectId();
  684. });
  685. }).catch(function() {
  686. // 取消
  687. });
  688. },
  689. //删除智能门禁
  690. delEntrance(item){
  691. this.$confirm('确认要删除该智能门禁?', "警告", {
  692. confirmButtonText: "确定",
  693. cancelButtonText: "取消",
  694. type: "warning"
  695. }).then(() => {
  696. // 确定
  697. delHardware(item.id).then((response) => {
  698. this.msgSuccess(response.msg)
  699. this.addType = false;
  700. this.listBySubjectId();
  701. });
  702. }).catch(function() {
  703. // 取消
  704. });
  705. },
  706. //新增摄像头
  707. addHardwareThree(){
  708. let obj = {
  709. type:4,
  710. name:this.form.name,
  711. hardwareNum:this.form.hardwareNum,
  712. ipAddress:this.form.ipAddress,
  713. subType:this.form.subType.toString(),
  714. subjectId:this.subjectData.id,
  715. deptId:this.subjectData.deptId,
  716. deptName:this.subjectData.deptName,
  717. }
  718. addHardware(obj).then(response => {
  719. this.msgSuccess(response.msg)
  720. this.addType = false;
  721. this.listBySubjectId();
  722. });
  723. },
  724. //编辑摄像头
  725. putHardwareThree(){
  726. let obj = {
  727. id:this.form.id,
  728. name:this.form.name,
  729. hardwareNum:this.form.hardwareNum,
  730. ipAddress:this.form.ipAddress,
  731. subType:this.form.subType.toString(),
  732. subjectId:this.form.subjectId,
  733. deptId:this.form.deptId,
  734. deptName:this.form.deptName,
  735. }
  736. putHardware(obj).then(response => {
  737. this.msgSuccess(response.msg)
  738. this.addType = false;
  739. this.listBySubjectId();
  740. });
  741. },
  742. //删除摄像头
  743. delHardwareThree(item){
  744. this.$confirm('确认要删除该摄像头?', "警告", {
  745. confirmButtonText: "确定",
  746. cancelButtonText: "取消",
  747. type: "warning"
  748. }).then(() => {
  749. // 确定
  750. delHardware(item.id).then((response) => {
  751. this.msgSuccess(response.msg)
  752. this.addType = false;
  753. this.listBySubjectId();
  754. });
  755. }).catch(function() {
  756. // 取消
  757. });
  758. },
  759. //新增控制设备
  760. addHardwareTwo(){
  761. let obj = {
  762. name:this.form.name,
  763. type:this.form.type,
  764. hardwareType:this.form.hardwareType,
  765. relayCode:this.form.relayCode,
  766. bit:this.form.bit,
  767. configName:this.form.configName,
  768. configStatus:this.form.configStatus,
  769. subjectId:this.subjectData.id,
  770. deptId:this.subjectData.deptId,
  771. deptName:this.subjectData.deptName,
  772. isPcfire:this.form.isPcfire,
  773. }
  774. addHardware(obj).then(response => {
  775. this.msgSuccess(response.msg)
  776. this.addType = false;
  777. this.listBySubjectId();
  778. });
  779. },
  780. //编辑控制设备
  781. putHardwareTwo(){
  782. let obj = {
  783. id:this.form.id,
  784. hardwareType:this.form.hardwareType,
  785. relayCode:this.form.relayCode,
  786. bit:this.form.bit,
  787. configName:this.form.configName,
  788. configStatus:this.form.configStatus,
  789. subjectId:this.form.subjectId,
  790. deptId:this.form.deptId,
  791. deptName:this.form.deptName,
  792. name:this.form.name,
  793. isPcfire:this.form.isPcfire,
  794. }
  795. putHardware(obj).then(response => {
  796. this.msgSuccess(response.msg)
  797. this.addType = false;
  798. this.listBySubjectId();
  799. });
  800. },
  801. //删除控制设备
  802. delHardwareTwo(item){
  803. this.$confirm('确认要删除该一体机?', "警告", {
  804. confirmButtonText: "确定",
  805. cancelButtonText: "取消",
  806. type: "warning"
  807. }).then(() => {
  808. // 确定
  809. delHardware(item.id).then((response) => {
  810. this.msgSuccess(response.msg)
  811. this.addType = false;
  812. this.listBySubjectId();
  813. });
  814. }).catch(function() {
  815. // 取消
  816. });
  817. },
  818. //添加一体机
  819. addHardware(){
  820. let obj = {
  821. type:0,
  822. name:this.form.name,
  823. pcType:this.form.pcType,
  824. hardwareNum:this.form.hardwareNum,
  825. subjectId:this.subjectData.id,
  826. deptId:this.subjectData.deptId,
  827. deptName:this.subjectData.deptName,
  828. }
  829. addHardware(obj).then(response => {
  830. this.msgSuccess(response.msg)
  831. this.addType = false;
  832. this.listBySubjectId();
  833. });
  834. },
  835. //编辑一体机
  836. putHardware(){
  837. let obj = {
  838. id:this.form.id,
  839. name:this.form.name,
  840. pcType:this.form.pcType,
  841. hardwareNum:this.form.hardwareNum,
  842. }
  843. putHardware(obj).then(response => {
  844. this.msgSuccess(response.msg)
  845. this.addType = false;
  846. this.listBySubjectId();
  847. });
  848. },
  849. //删除一体机
  850. delHardware(item){
  851. this.$confirm('确认要删除该一体机?', "警告", {
  852. confirmButtonText: "确定",
  853. cancelButtonText: "取消",
  854. type: "warning"
  855. }).then(() => {
  856. // 确定
  857. delHardware(item.id).then((response) => {
  858. this.msgSuccess(response.msg)
  859. this.addType = false;
  860. this.listBySubjectId();
  861. });
  862. }).catch(function() {
  863. // 取消
  864. });
  865. },
  866. //添加传感器
  867. addSensor(){
  868. let obj = {
  869. type:this.form.type,
  870. gatewayId:this.form.gatewayId,
  871. routeNum:this.form.routeNum,
  872. configName:this.form.configName,
  873. configStatus:this.form.configStatus,
  874. subjectId:this.subjectData.id
  875. }
  876. addSensor(obj).then(response => {
  877. this.msgSuccess(response.msg)
  878. this.addType = false;
  879. this.listBySubjectId();
  880. });
  881. },
  882. //编辑传感器
  883. putSensor(){
  884. let obj = {
  885. type:this.form.type,
  886. id:this.form.id,
  887. gatewayId:this.form.gatewayId,
  888. routeNum:this.form.routeNum,
  889. configName:this.form.configName,
  890. configStatus:this.form.configStatus,
  891. }
  892. putSensor(obj).then(response => {
  893. this.msgSuccess(response.msg)
  894. this.addType = false;
  895. this.listBySubjectId();
  896. });
  897. },
  898. //删除传感器
  899. delSensor(item){
  900. this.$confirm('确认要删除该传感器?', "警告", {
  901. confirmButtonText: "确定",
  902. cancelButtonText: "取消",
  903. type: "warning"
  904. }).then(() => {
  905. // 确定
  906. delSensor(item.id).then((response) => {
  907. this.msgSuccess(response.msg)
  908. this.addType = false;
  909. this.listBySubjectId();
  910. });
  911. }).catch(function() {
  912. // 取消
  913. });
  914. },
  915. //新增智能门禁
  916. addEntrance(){
  917. let obj = {
  918. type:11,
  919. subjectId:this.subjectData.id,
  920. hardwareNum:this.form.hardwareNum,
  921. name:this.form.name,
  922. ipAddress:this.form.ipAddress,
  923. port:this.form.port,
  924. harUser:this.form.harUser,
  925. harPsw:this.form.harPsw,
  926. controlScope:this.form.controlScope.join(','),
  927. }
  928. addHardware(obj).then(response => {
  929. if(response.code==200){
  930. this.msgSuccess(response.msg)
  931. this.addType = false;
  932. this.listBySubjectId();
  933. }else if(response.code==205){
  934. this.$confirm(response.msg, "警告", {
  935. confirmButtonText: "确定",
  936. cancelButtonText: "取消",
  937. type: "warning"
  938. }).then(() => {
  939. // 确定
  940. this.$router.push({ path: '/comprehensive/laboratoryManagement/accessAuthorization' });
  941. }).catch(function() {
  942. // 取消
  943. });
  944. }
  945. });
  946. },
  947. //编辑智能门禁
  948. editEntrance(){
  949. let obj = {
  950. id:this.form.id,
  951. hardwareNum:this.form.hardwareNum,
  952. name:this.form.name,
  953. ipAddress:this.form.ipAddress,
  954. port:this.form.port,
  955. harUser:this.form.harUser,
  956. harPsw:this.form.harPsw,
  957. controlScope:this.form.controlScope.join(','),
  958. subjectId:this.subjectData.id
  959. }
  960. putHardware(obj).then(response => {
  961. this.msgSuccess(response.msg)
  962. this.addType = false;
  963. this.listBySubjectId();
  964. });
  965. },
  966. //新增电子信息牌
  967. addSign(){
  968. let obj = {
  969. subjectId:this.subjectData.id,
  970. subjectName:this.subjectData.name,
  971. cardNum:this.form.cardNum,
  972. location:this.form.location,
  973. isStart:this.form.isStart,
  974. deptId:this.subjectData.deptId,
  975. deptName:this.subjectData.deptName,
  976. }
  977. subjectSignAdd(obj).then(response => {
  978. if(response.code==200){
  979. this.msgSuccess(response.msg)
  980. this.addType = false;
  981. this.listBySubjectId();
  982. }
  983. });
  984. },
  985. //编辑电子信息牌
  986. editSign(){
  987. let obj = {
  988. id:this.form.id,
  989. cardNum:this.form.cardNum,
  990. location:this.form.location,
  991. isStart:this.form.isStart,
  992. subjectId:this.subjectData.id,
  993. subjectName:this.subjectData.name,
  994. deptId:this.subjectData.deptId,
  995. deptName:this.subjectData.deptName,
  996. }
  997. subjectSignEdit(obj).then(response => {
  998. this.msgSuccess(response.msg)
  999. this.addType = false;
  1000. this.listBySubjectId();
  1001. });
  1002. },
  1003. //添加
  1004. addData(type){
  1005. // this.resetForm("form");
  1006. if(type == 1){
  1007. this.title = '新增传感器';
  1008. this.$set(this,'form',{
  1009. type:"",
  1010. gatewayId:"",
  1011. routeNum:"",
  1012. configName:"",
  1013. configStatus:"",
  1014. });
  1015. }else if(type == 2){
  1016. this.title = '新增一体机';
  1017. this.$set(this,'form',{
  1018. name:"",
  1019. pcType:"",
  1020. hardwareNum:"",
  1021. });
  1022. }else if(type == 3){
  1023. this.title = '新增控制设备';
  1024. this.disabledType = false;
  1025. this.$set(this,'form',{
  1026. name:"",
  1027. type:"",
  1028. hardwareType:1,
  1029. relayCode:"",
  1030. bit:"",
  1031. configName:"",
  1032. configStatus:"",
  1033. isPcfire:0,
  1034. });
  1035. }else if(type == 4){
  1036. this.title = '新增摄像头';
  1037. this.$set(this,'form',{
  1038. hardwareNum:"",
  1039. subType:[],
  1040. });
  1041. }else if(type == 'addEntrance'){
  1042. this.title = '新增智能门禁';
  1043. this.$set(this,'form',{
  1044. hardwareNum:"",
  1045. name:"",
  1046. ipAddress:"",
  1047. port:"",
  1048. harUser:"",
  1049. harPsw:"",
  1050. controlScope:[],
  1051. });
  1052. }else if(type == 'addSign'){
  1053. this.title = '新增电子信息牌';
  1054. this.$set(this,'form',{
  1055. cardNum:"",
  1056. subjectName:"",
  1057. subjectId:"",
  1058. location:"",
  1059. isStart:"",
  1060. deptId:"",
  1061. deptName:"",
  1062. });
  1063. }
  1064. this.addType = true;
  1065. this.upType = type;
  1066. },
  1067. //编辑
  1068. editData(type,row){
  1069. if(type == 5){
  1070. this.title = '编辑传感器';
  1071. this.$set(this,'form',JSON.parse(JSON.stringify(row)));
  1072. this.$set(this.form,'type',JSON.parse(JSON.stringify(row.type.enumName)));
  1073. }else if(type == 6){
  1074. this.title = '编辑一体机';
  1075. this.$set(this,'form',JSON.parse(JSON.stringify(row)));
  1076. this.$set(this.form,'pcType',JSON.parse(JSON.stringify(row.pcType+'')));
  1077. }else if(type == 7){
  1078. this.title = '编辑控制设备';
  1079. this.disabledType = true;
  1080. this.$set(this,'form',JSON.parse(JSON.stringify(row)));
  1081. this.$set(this.form,'type',JSON.parse(JSON.stringify(row.type.code+'')));
  1082. }else if(type == 8){
  1083. this.title = '编辑摄像头';
  1084. this.$set(this,'form',JSON.parse(JSON.stringify(row)));
  1085. if(this.form.subType!='' && this.form.subType!=null ){
  1086. this.form.subType=this.form.subType.split(',')
  1087. }else{
  1088. this.form.subType=[];
  1089. }
  1090. }else if(type == 'editEntrance'){
  1091. this.title = '编辑智能门禁';
  1092. this.$set(this,'form',JSON.parse(JSON.stringify(row)));
  1093. if(row.controlScope){
  1094. this.form.controlScope=row.controlScope.split(',')
  1095. }else{
  1096. this.form.controlScope=[]
  1097. }
  1098. }else if(type=='editSign'){
  1099. this.title = '编辑电子信息牌';
  1100. this.$set(this,'form',JSON.parse(JSON.stringify(row)));
  1101. }
  1102. this.addType = true;
  1103. this.upType = type;
  1104. },
  1105. //获取列表
  1106. listBySubjectId(){
  1107. let obj = {
  1108. subjectId:this.subjectData.id
  1109. };
  1110. listBySubjectId(obj).then(response => {
  1111. if(response.data.listCgq){
  1112. this.$set(this,'listCgq',response.data.listCgq);
  1113. }
  1114. if(response.data.listYtj){
  1115. this.$set(this,'listYtj',response.data.listYtj);
  1116. }
  1117. if(response.data.listkzsb){
  1118. this.$set(this,'listkzsb',response.data.listkzsb);
  1119. }
  1120. if(response.data.listSpjk){
  1121. //判断是否是抓拍摄像头
  1122. for(let i=0; i< response.data.listSpjk.length;i++){
  1123. response.data.listSpjk[i].isArrest=(response.data.listSpjk[i].subType!=''&& response.data.listSpjk[i].subType!=null);
  1124. }
  1125. this.$set(this,'listSpjk',response.data.listSpjk);
  1126. }
  1127. if(response.data.listHK){
  1128. this.$set(this,'listHK',response.data.listHK);
  1129. }
  1130. if(response.data.listXxp){
  1131. this.$set(this,'listXxp',response.data.listXxp);
  1132. }
  1133. });
  1134. },
  1135. //返回上一页
  1136. backPage(){
  1137. this.$parent.clickPage(1);
  1138. },
  1139. //传感器类型
  1140. getSensorList(){
  1141. getSensorList().then(response => {
  1142. this.sensorAddOptions = response.data;
  1143. });
  1144. },
  1145. }
  1146. }
  1147. </script>
  1148. <style scoped lang="scss">
  1149. .deviceList{
  1150. flex:1;
  1151. display: flex;
  1152. flex-direction: column;
  1153. padding-bottom:20px;
  1154. border-radius:10px!important;
  1155. margin:5px 20px 20px 10px!important;
  1156. box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
  1157. *{
  1158. margin:0;
  1159. }
  1160. .title-box{
  1161. display: flex;
  1162. margin:0 20px;
  1163. .left-title{
  1164. flex:1;
  1165. height:80px;
  1166. line-height:80px;
  1167. color:#0045AF;
  1168. font-size:18px;
  1169. }
  1170. .right-button{
  1171. margin:20px 0;
  1172. }
  1173. }
  1174. .for-max-box{
  1175. margin:0 40px;
  1176. font-weight:500;
  1177. .for-big-box{
  1178. border: 1px solid #E0E0E0;
  1179. display: inline-block;
  1180. overflow: hidden;
  1181. width:280px;
  1182. min-height:158px;
  1183. padding-bottom:10px;
  1184. border-radius: 6px;
  1185. margin:0 20px 20px 0;
  1186. position: relative;
  1187. .camera{
  1188. position: absolute;
  1189. right: 0;
  1190. top: 0;
  1191. width: 50px;
  1192. height: 30px;
  1193. background: #0183FA;
  1194. border-radius: 10px 0px 10px 0px;
  1195. font-size: 14px;
  1196. font-weight: 400;
  1197. color: #FFFFFF;
  1198. line-height: 30px;
  1199. text-align: center;
  1200. }
  1201. .for-title-p{
  1202. background: rgba(182,214,254,1);
  1203. color:#0183FA;
  1204. font-size:16px;
  1205. line-height:40px;
  1206. display:block;
  1207. overflow:hidden;
  1208. text-overflow:ellipsis;
  1209. white-space:nowrap;
  1210. padding:0 16px;
  1211. margin-bottom:10px;
  1212. font-weight:700;
  1213. }
  1214. .for-text-box{
  1215. display: flex;
  1216. padding:0 23px;
  1217. p{
  1218. font-size:14px;
  1219. line-height:30px;
  1220. flex:1;
  1221. }
  1222. p:nth-child(1){
  1223. color:#333;
  1224. text-align: left;
  1225. }
  1226. p:nth-child(2){
  1227. color:#999;
  1228. text-align: right;
  1229. overflow:hidden;
  1230. text-overflow:ellipsis;
  1231. white-space:nowrap;
  1232. }
  1233. }
  1234. .for-button-box{
  1235. display: flex;
  1236. line-height:26px;
  1237. margin-top:10px;
  1238. p{
  1239. text-align: center;
  1240. font-size:14px;
  1241. color:#666666;
  1242. }
  1243. p:nth-child(1){
  1244. flex:1;
  1245. cursor: pointer;
  1246. i{
  1247. color:#1151b4;
  1248. margin-right:10px;
  1249. }
  1250. }
  1251. p:nth-child(2){
  1252. width:2px;
  1253. height:14px;
  1254. margin:6px 0;
  1255. background: #CCCCCC;
  1256. }
  1257. p:nth-child(3){
  1258. flex:1;
  1259. cursor: pointer;
  1260. i{
  1261. color:#ff6868;
  1262. margin-right:10px;
  1263. }
  1264. }
  1265. }
  1266. }
  1267. .for-big-box-two{
  1268. border: 1px solid #E0E0E0;
  1269. display: inline-block;
  1270. overflow: hidden;
  1271. width:280px;
  1272. min-height:158px;
  1273. padding-bottom:10px;
  1274. border-radius: 6px;
  1275. margin:0 20px 20px 0;
  1276. .for-title-p{
  1277. background: rgba(182,214,254,1);
  1278. color:#0183FA;
  1279. font-size:16px;
  1280. line-height:40px;
  1281. display:block;
  1282. overflow:hidden;
  1283. text-overflow:ellipsis;
  1284. white-space:nowrap;
  1285. padding:0 16px;
  1286. margin-bottom:10px;
  1287. font-weight:700;
  1288. }
  1289. .for-text-box{
  1290. display: flex;
  1291. padding:0 23px;
  1292. p{
  1293. font-size:14px;
  1294. line-height:30px;
  1295. flex:1;
  1296. }
  1297. p:nth-child(1){
  1298. text-align: left;
  1299. color:#333;
  1300. }
  1301. p:nth-child(2){
  1302. color:#999;
  1303. text-align: right;
  1304. overflow:hidden;
  1305. text-overflow:ellipsis;
  1306. white-space:nowrap;
  1307. }
  1308. }
  1309. .for-button-box{
  1310. display: flex;
  1311. line-height:26px;
  1312. margin-top:10px;
  1313. p{
  1314. text-align: center;
  1315. font-size:14px;
  1316. color:#666666;
  1317. }
  1318. p:nth-child(1){
  1319. flex:1;
  1320. cursor: pointer;
  1321. i{
  1322. color:#1151b4;
  1323. margin-right:10px;
  1324. }
  1325. }
  1326. p:nth-child(2){
  1327. width:2px;
  1328. height:14px;
  1329. margin:6px 0;
  1330. background: #CCCCCC;
  1331. }
  1332. p:nth-child(3){
  1333. flex:1;
  1334. cursor: pointer;
  1335. i{
  1336. color:#ff6868;
  1337. margin-right:10px;
  1338. }
  1339. }
  1340. }
  1341. }
  1342. .add-for-p{
  1343. font-size:14px;
  1344. border: 1px solid #E0E0E0;
  1345. display: inline-block;
  1346. overflow: hidden;
  1347. width:280px;
  1348. height:130px;
  1349. line-height:130px;
  1350. text-align: center;
  1351. border-radius: 6px;
  1352. color:#999999;
  1353. cursor: pointer;
  1354. margin:0 20px 20px 0;
  1355. i{
  1356. margin-right:10px;
  1357. }
  1358. }
  1359. .add-for-p-two{
  1360. font-size:14px;
  1361. border: 1px solid #E0E0E0;
  1362. display: inline-block;
  1363. overflow: hidden;
  1364. width:280px;
  1365. height:158px;
  1366. line-height:158px;
  1367. text-align: center;
  1368. border-radius: 6px;
  1369. color:#999999;
  1370. cursor: pointer;
  1371. margin:0 20px 20px 0;
  1372. i{
  1373. margin-right:10px;
  1374. }
  1375. }
  1376. }
  1377. }
  1378. </style>