extend.vue 63 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894
  1. <template>
  2. <div class="app-container">
  3. <div class="org-extend">
  4. <div class="extend_mod">
  5. <div class="info-box">
  6. <el-descriptions class="margin-top" :column="3" size="medium" border>
  7. <template #title>
  8. <h3 class="title">
  9. <i class="el-icon-collection-tag"></i>
  10. 基础信息
  11. </h3>
  12. </template>
  13. <el-descriptions-item
  14. v-for="v in dataInfo"
  15. :label="v.label"
  16. :key="v.key"
  17. labelClassName="gx_info_label"
  18. >{{ v.value }}
  19. </el-descriptions-item
  20. >
  21. <el-descriptions-item labelClassName="gx_info_label" label="机构组织类型" v-if="false">{{
  22. getLabel(dict.type.reality_org_type, orgType)
  23. }}
  24. </el-descriptions-item>
  25. <el-descriptions-item labelClassName="gx_info_label" label="是否停用">{{
  26. isLock == 1 ? "是" : "否"
  27. }}
  28. </el-descriptions-item>
  29. <el-descriptions-item labelClassName="gx_info_label" label="机构类型">{{
  30. getLabel(dict.type.sys_org_type, type)
  31. }}
  32. </el-descriptions-item>
  33. </el-descriptions>
  34. </div>
  35. </div>
  36. <div class="extend_mod" v-if="canShowGA38()">
  37. <div class="info-box">
  38. <h3 class="title">
  39. <i class="el-icon-collection-tag"></i>
  40. 安全防范设施建设达标信息
  41. <el-button style="float: right;" @click="handleOrgAdd" type="primary" icon="el-icon-plus" size="small">
  42. 新增
  43. </el-button>
  44. </h3>
  45. <el-table
  46. border
  47. size="small"
  48. style="width: 98%;margin-top: 20px"
  49. v-loading="orgloading"
  50. :data="constructionList"
  51. @selection-change="handleOrgSelectionChange"
  52. >
  53. <el-table-column
  54. type="selection"
  55. width=""
  56. align="center"
  57. v-if="false"
  58. />
  59. <el-table-column type="index" width="70" label="序号" align="center"/>
  60. <el-table-column label="机构类型" align="center" prop="type">
  61. <template v-slot="scope">
  62. <dict-tag
  63. :options="dict.type.org_extend_type"
  64. :value="scope.row.type"
  65. />
  66. </template>
  67. </el-table-column>
  68. <el-table-column label="GA38标准" align="center" prop="standard">
  69. <template slot-scope="r"
  70. >{{ getLabel(dict.type.org_extend_standard, `${r.row.standard}`) }}
  71. </template>
  72. </el-table-column>
  73. <el-table-column
  74. label="达标日期/计划达标日期"
  75. align="center"
  76. prop="dateOfCompliance"
  77. width="220"
  78. >
  79. <template slot-scope="scope">
  80. <span> {{
  81. scope.row.standard === '3' ? formatTime(scope.row.dateOfComplete, "YYYY-MM-DD") : formatTime(scope.row.dateOfCompliance, "YYYY-MM-DD")
  82. }}</span>
  83. </template>
  84. </el-table-column>
  85. <el-table-column v-if="false"
  86. label="备注"
  87. align="center"
  88. prop="reason"
  89. width="280"
  90. >
  91. </el-table-column>
  92. <el-table-column
  93. v-if="false"
  94. label="机构id"
  95. align="center"
  96. prop="orgId"
  97. />
  98. <el-table-column
  99. label="操作"
  100. align="center"
  101. class-name="small-padding fixed-width"
  102. >
  103. <template slot-scope="scope">
  104. <el-button
  105. v-if="scope.row.certificate"
  106. size="mini"
  107. type="text"
  108. icon="el-icon-search"
  109. @click="downBusiness(scope.row.certificate)"
  110. >查看证书
  111. </el-button
  112. >
  113. <el-button
  114. size="mini"
  115. type="text"
  116. icon="el-icon-edit-outline"
  117. @click="handleOrgUpdate(scope.row)"
  118. >编辑
  119. </el-button
  120. >
  121. <el-button
  122. size="mini"
  123. type="text"
  124. icon="el-icon-delete"
  125. @click="handleOrgDelete(scope.row)"
  126. >删除
  127. </el-button
  128. >
  129. </template>
  130. </el-table-column>
  131. </el-table>
  132. </div>
  133. </div>
  134. <!--补充信息-->
  135. <div class="extend_mod ">
  136. <div class="info-box">
  137. <h3 class="title">
  138. <i class="el-icon-collection-tag"></i>
  139. 补充信息
  140. </h3>
  141. </div>
  142. <!--监控中心的补充信息-->
  143. <div class="info-box">
  144. <el-descriptions class="margin-top" :column="3" size="medium" border>
  145. <el-descriptions-item labelClassName="info_label_required" :contentStyle='contentStyle' :labelStyle='labelStyle' label="气象行政区域">
  146. <el-cascader
  147. clearable
  148. v-model="weatherAreaCode"
  149. :options="areaList"
  150. @change="selectArea"
  151. placeholder="请选择气象行政区域"
  152. ></el-cascader>
  153. </el-descriptions-item>
  154. <el-descriptions-item v-if="type === org_type.hangse" labelClassName="info_label_required" :contentStyle='contentStyle' :labelStyle='labelStyle' label="是否设置安全保卫独立机构">
  155. <el-radio-group v-model="aloneDept">
  156. <el-radio
  157. v-for="dict in dict.type.sys_yes_no"
  158. :key="`${dict.value}`"
  159. :label="dict.value"
  160. >{{ dict.label }}</el-radio
  161. >
  162. </el-radio-group>
  163. </el-descriptions-item>
  164. <el-descriptions-item v-if="type === org_type.yewd" labelClassName="info_label_required" label="产权类型" :contentStyle='contentStyle' :labelStyle='labelStyle'>
  165. <el-select
  166. clearable
  167. v-model="ownership"
  168. placeholder="请选择产权类型"
  169. >
  170. <el-option
  171. v-for="dict in dict.type.property_situation"
  172. :key="dict.value"
  173. :label="dict.label"
  174. :value="dict.value"
  175. ></el-option>
  176. </el-select>
  177. </el-descriptions-item>
  178. <el-descriptions-item v-if="type === org_type.yewd" labelClassName="info_label_required" label="所在位置" >
  179. <el-select
  180. clearable
  181. v-model="outsideArea"
  182. placeholder="请选择所在位置"
  183. >
  184. <el-option
  185. v-for="dict in dict.type.org_extend_is"
  186. :key="dict.value"
  187. :label="dict.label"
  188. :value="dict.value"
  189. ></el-option>
  190. </el-select>
  191. </el-descriptions-item>
  192. <el-descriptions-item v-if="type === org_type.yewd" labelClassName="info_label_required" label="是否设立保管箱库" :contentStyle='contentStyle' :labelStyle='labelStyle'>
  193. <el-radio-group v-model="safeBox">
  194. <el-radio :label="1">是</el-radio>
  195. <el-radio :label="0">否</el-radio>
  196. </el-radio-group>
  197. </el-descriptions-item>
  198. </el-descriptions>
  199. <el-descriptions v-if="type === org_type.yewd" class="margin-top" :column="3" size="medium" border>
  200. <el-descriptions-item label="是否设立在行式自助银行" :contentStyle='contentStyle' :labelStyle='labelStyle' labelClassName="info_label_required">
  201. <el-radio-group v-model="selfServiceBank">
  202. <el-radio :label="1">是</el-radio>
  203. <el-radio :label="0">否</el-radio>
  204. </el-radio-group>
  205. </el-descriptions-item>
  206. </el-descriptions>
  207. <el-descriptions v-if="type === org_type.yewd || type === org_type.lhzz" class="margin-top" :column="3" size="medium" border>
  208. <el-descriptions-item label="穿墙式设备" labelClassName="info_label_required" :contentStyle='contentStyle' :labelStyle='labelStyle'>
  209. <el-input-number
  210. v-model="wallPenetratingEquipment"
  211. controls-position="right"
  212. @change="handleChange"
  213. :min="0"
  214. :max="999"
  215. ></el-input-number>
  216. </el-descriptions-item>
  217. <el-descriptions-item label="大堂式设备"
  218. labelClassName="info_label_required" :contentStyle='contentStyle' :labelStyle='labelStyle'>
  219. <el-input-number
  220. v-model="lobbyEquipment"
  221. controls-position="right"
  222. @change="handleChange"
  223. :min="0"
  224. :max="999"
  225. ></el-input-number>
  226. </el-descriptions-item>
  227. </el-descriptions>
  228. <!-- <el-descriptions v-if="type === org_type.lhzz" class="margin-top" :column="3" size="medium" border>
  229. <el-descriptions-item label="穿墙式设备" labelClassName="info_label_required" :contentStyle='contentStyle' :labelStyle='labelStyle'>
  230. <el-input-number
  231. v-model="wallPenetratingEquipment"
  232. controls-position="right"
  233. @change="handleChange"
  234. :min="0"
  235. :max="999"
  236. ></el-input-number>
  237. </el-descriptions-item>
  238. <el-descriptions-item label="大堂式设备" labelClassName="info_label_required" :contentStyle='contentStyle' :labelStyle='labelStyle'>
  239. <el-input-number
  240. v-model="lobbyEquipment"
  241. controls-position="right"
  242. @change="handleChange"
  243. :min="0"
  244. :max="999"
  245. ></el-input-number>
  246. </el-descriptions-item>
  247. </el-descriptions> -->
  248. <el-descriptions class="margin-top" :column="3" v-if="(type === org_type.yewd || type === org_type.zxywk)" size="medium" border>
  249. <el-descriptions-item label="是否设立业务库" v-if="(type === org_type.yewd)" :contentStyle='contentStyle' :labelStyle='labelStyle' labelClassName="info_label_required">
  250. <el-radio-group v-model="businessLibrary">
  251. <el-radio :label="1">是</el-radio>
  252. <el-radio :label="0">否</el-radio>
  253. </el-radio-group>
  254. </el-descriptions-item>
  255. <el-descriptions-item label="业务库类型" v-if="this.businessLibrary==1" :contentStyle='contentStyle' :labelStyle='labelStyle' labelClassName="info_label_required">
  256. <el-select clearable v-model="businessLibraryType" placeholder="请选择业务库类型" >
  257. <el-option
  258. v-for="dict in dict.type.business_library_type"
  259. :key="dict.value"
  260. :label="dict.label"
  261. :value="dict.value"
  262. ></el-option>
  263. </el-select>
  264. </el-descriptions-item>
  265. <el-descriptions-item v-if="this.businessLibrary==1 && (type === org_type.yewd || type === org_type.zxywk)" :labelStyle='labelStyle' labelClassName="info_label_required" label="业务库值守方式" >
  266. <el-select
  267. clearable
  268. v-model="dutyMode"
  269. placeholder="请选择业务库值守方式"
  270. >
  271. <el-option
  272. v-for="dict in dict.type.duty_options"
  273. :key="dict.value"
  274. :label="dict.label"
  275. :value="dict.value"
  276. ></el-option>
  277. </el-select>
  278. </el-descriptions-item>
  279. </el-descriptions>
  280. <!-- <el-descriptions class="margin-top" v-if="this.businessLibrary==1" :column="3" size="medium" border>
  281. </el-descriptions> -->
  282. <el-descriptions class="margin-top" :column="3" v-if="type === org_type.yewd" size="medium" border>
  283. <el-descriptions-item label="是否配备保安人员" :contentStyle='contentStyle' :labelStyle='labelStyle' labelClassName="info_label_required" >
  284. <el-radio-group v-model="askari">
  285. <el-radio :label="1">是</el-radio>
  286. <el-radio :label="0">否</el-radio>
  287. </el-radio-group>
  288. </el-descriptions-item>
  289. </el-descriptions>
  290. <el-descriptions class="margin-top" :column="3" v-if="this.askari==1" size="medium" border>
  291. <el-descriptions-item labelClassName="info_label_required" label="内部保安人数" :contentStyle='contentStyle' :labelStyle='labelStyle'>
  292. <el-input-number
  293. v-model="innerCount"
  294. controls-position="right"
  295. @change="handleChange"
  296. :min="0"
  297. :max="999"
  298. ></el-input-number>
  299. </el-descriptions-item>
  300. <el-descriptions-item labelClassName="info_label_required" label="外聘保安人数" :contentStyle='contentStyle' :labelStyle='labelStyle'>
  301. <el-input-number
  302. v-model="outsideCount"
  303. controls-position="right"
  304. @change="handleChange"
  305. :min="0"
  306. :max="999"
  307. ></el-input-number>
  308. </el-descriptions-item>
  309. <el-descriptions-item labelClassName="info_label_required" label="是否取得保安证书">
  310. <el-radio-group v-model="isAskariCertificate">
  311. <el-radio :label="1">是</el-radio>
  312. <el-radio :label="0">否</el-radio>
  313. </el-radio-group>
  314. </el-descriptions-item>
  315. <el-descriptions-item v-if="isAskariCertificate==1" labelClassName="info_label_required" label="上传保安证" :contentStyle='contentStyle' :labelStyle='labelStyle'>
  316. <image-upload
  317. v-model="askariCertificate"
  318. :limit="5"
  319. :value="askariCertificate"
  320. @input="getImgUrl"
  321. ></image-upload>
  322. </el-descriptions-item>
  323. </el-descriptions>
  324. <el-descriptions class="margin-top" :column="3" size="medium" border>
  325. <el-descriptions-item v-if="type === org_type.jkzx" labelClassName="info_label_required" label="建设时间">
  326. <el-date-picker
  327. clearable
  328. v-model="constructionTime"
  329. type="date"
  330. value-format="yyyy-MM-dd HH:mm:ss"
  331. placeholder="请选择建设时间"
  332. >
  333. </el-date-picker>
  334. </el-descriptions-item>
  335. <el-descriptions-item v-if="type === org_type.jkzx" labelClassName="info_label_required" label="最近一次改造时间">
  336. <el-date-picker
  337. clearable
  338. v-model="lastUpdateTime"
  339. type="date"
  340. value-format="yyyy-MM-dd HH:mm:ss"
  341. placeholder="请选择最近一次改造时间"
  342. >
  343. </el-date-picker>
  344. </el-descriptions-item>
  345. <el-descriptions-item v-if="type === org_type.jkzx" labelClassName="info_label_required" label="系统平台品牌">
  346. <el-select
  347. clearable
  348. v-model="platformBrand"
  349. placeholder="请选择系统平台品牌"
  350. >
  351. <el-option
  352. v-for="dict in dict.type.org_platform_brand"
  353. :key="dict.value"
  354. :label="dict.label"
  355. :value="dict.value"
  356. ></el-option>
  357. </el-select>
  358. </el-descriptions-item>
  359. <el-descriptions-item v-if="type === org_type.jkzx" :contentStyle='contentStyle' :labelStyle='labelStyle'
  360. labelClassName="info_label_required" label="全辖离行式加钞间出入口数量">
  361. <el-input-number
  362. v-model="cashAddingRoom"
  363. controls-position="right"
  364. @change="handleChange"
  365. :min="0"
  366. :max="999"
  367. ></el-input-number>
  368. </el-descriptions-item>
  369. <el-descriptions-item v-if="type === org_type.jkzx" :contentStyle='contentStyle' :labelStyle='labelStyle'
  370. labelClassName="info_label_required" label="可远程控制和实时授权出入口数量(离行式)">
  371. <el-input-number
  372. v-model="cashAddingRoomControlCount"
  373. controls-position="right"
  374. @change="handleChange"
  375. :min="0"
  376. :max="cashAddingRoom"
  377. ></el-input-number>
  378. </el-descriptions-item>
  379. <el-descriptions-item v-if="type === org_type.jkzx" labelClassName="info_label_required" label="全辖摄像头总路数">
  380. <el-input-number
  381. v-model="totalCameraCount"
  382. controls-position="right"
  383. @change="handleChange"
  384. :min="0"
  385. :max="999999"
  386. ></el-input-number>
  387. </el-descriptions-item>
  388. <!-- <el-descriptions-item label="出入口远程控制与授权" v-if="(type === org_type.jkzx)" labelClassName="info_label_required" >
  389. <el-radio-group v-model="remoteControl">
  390. <el-radio :label="1">是</el-radio>
  391. <el-radio :label="0">否</el-radio>
  392. </el-radio-group>
  393. </el-descriptions-item>-->
  394. <el-descriptions-item label="全辖业务库防控隔离门出入口数量" v-if="type === org_type.jkzx" labelClassName="info_label_required" >
  395. <el-input-number
  396. v-model="remoteCount"
  397. controls-position="right"
  398. @change="handleChange"
  399. :min="0"
  400. :max="999"
  401. ></el-input-number>
  402. </el-descriptions-item>
  403. <el-descriptions-item label="可远程控制和实时授权出入口数量(业务库)" v-if="type === org_type.jkzx" labelClassName="info_label_required" >
  404. <el-input-number
  405. v-model="remoteControlCount"
  406. controls-position="right"
  407. @change="handleChange"
  408. :min="0"
  409. :max="remoteCount"
  410. ></el-input-number>
  411. </el-descriptions-item>
  412. <el-descriptions-item v-if="type === org_type.jkzx" labelClassName="info_label_required" label="全辖高清摄像头路数">
  413. <el-input-number
  414. v-model="hdCameraCount"
  415. controls-position="right"
  416. @change="handleChange"
  417. :min="0"
  418. :max="999999"
  419. ></el-input-number>
  420. </el-descriptions-item>
  421. </el-descriptions>
  422. </div>
  423. </div>
  424. <div style="
  425. line-height: 50px;
  426. width: 100%;
  427. height: 55px;
  428. text-align: center;
  429. background: #ffffff;
  430. z-index: 9999;">
  431. <el-button type="primary" @click="saveExtend"
  432. >提交
  433. </el-button
  434. >
  435. <el-button type="primary" @click="nosaveExtend"
  436. >取消
  437. </el-button
  438. >
  439. </div>
  440. </div>
  441. <DialogCom
  442. :title="orgtitle"
  443. :visible.sync="orgopen"
  444. @Close="closePictrue"
  445. width="500px"
  446. append-to-body
  447. >
  448. <el-form
  449. ref="orgform"
  450. :model="orgform"
  451. label-width="140px"
  452. @close="orgcancel"
  453. :rules="rules"
  454. >
  455. <el-form-item label="机构类型" prop="type">
  456. <el-select
  457. prop="type"
  458. label="机构类型"
  459. v-model="orgform.type"
  460. placeholder="请选择机构类型"
  461. clearable
  462. >
  463. <el-option
  464. v-for="dict in getGA38TypeByOrgType"
  465. :key="dict.value"
  466. :label="dict.label"
  467. :value="dict.value"
  468. />
  469. </el-select>
  470. <!-- v-for="dict in dict.type.org_extend_type" -->
  471. </el-form-item>
  472. <el-form-item label="GA38标准" prop="standard">
  473. <el-select
  474. prop="planType"
  475. label="标准"
  476. v-model="orgform.standard"
  477. placeholder="请选择标准"
  478. clearable
  479. >
  480. <el-option
  481. v-for="dict in dict.type.org_extend_standard"
  482. :key="dict.value"
  483. :label="dict.label"
  484. :value="dict.value"
  485. />
  486. </el-select>
  487. </el-form-item>
  488. <el-form-item v-show="orgform.standard === '2' || orgform.standard === '1'" label="达标日期"
  489. prop="dateOfCompliance">
  490. <el-date-picker
  491. clearable
  492. v-model="orgform.dateOfCompliance"
  493. type="date"
  494. value-format="yyyy-MM-dd HH:mm:ss"
  495. placeholder="请选择达标日期"
  496. >
  497. </el-date-picker>
  498. </el-form-item>
  499. <el-form-item v-show="orgform.standard === '3'" label="计划达标日期">
  500. <el-date-picker
  501. clearable
  502. v-model="orgform.dateOfComplete"
  503. type="date"
  504. value-format="yyyy-MM-dd"
  505. placeholder="请选择计划达标日期"
  506. >
  507. </el-date-picker>
  508. </el-form-item>
  509. <el-form-item v-show="orgform.standard === '3'" label="未达标部位或项目">
  510. <k-textarea
  511. v-model="orgform.reason"
  512. :length="200"
  513. :row="10"
  514. show-word-limit
  515. placeholder="请输入未达GA38-2021标准的部位或者项目"
  516. />
  517. </el-form-item>
  518. <el-form-item label="上传证书" v-show="orgform.standard !== '3'" prop="certificate" class="is-required">
  519. <div class="image-container" style="margin-left: 20px">
  520. <p style="font-size: 12px; color: #999">上传安全防范设施合格证</p>
  521. <!-- <image-upload
  522. :limit="5"
  523. :fileSize="5"
  524. :value="orgform.certificate"
  525. @input="uploadorgSuccess"
  526. ></image-upload> -->
  527. <imgs-upload :limit="5" v-model="orgform.certificate" :fileSize="5"></imgs-upload>
  528. </div>
  529. </el-form-item>
  530. <el-form-item v-if="false" label="机构id" prop="orgId">
  531. <el-input v-model="orgform.orgId" placeholder="请输入机构id"/>
  532. </el-form-item>
  533. </el-form>
  534. <div slot="footer" class="dialog-footer">
  535. <el-button type="primary" @click="submitOrgForm">确 定</el-button>
  536. <el-button @click="orgcancel">取 消</el-button>
  537. </div>
  538. </DialogCom>
  539. <div slot="footer" class="dialog-footer" style="height: 50px"></div>
  540. <el-image-viewer
  541. v-if="imageViewer"
  542. :on-close="closeImgViewer"
  543. :url-list="srcList"
  544. />
  545. </div>
  546. </template>
  547. <script>
  548. import ImgsUpload from "@/components/ImgsUpload";
  549. import uploadpng from "@/assets/images/upload.png";
  550. import uplpng from "@/assets/images/upl.png";
  551. import request from "@/utils/request";
  552. import {statusOptions, getLabel} from "./../../commonOption";
  553. import {
  554. listExtend,
  555. getExtend,
  556. addExtend,
  557. updateExtend,
  558. delExtend,
  559. getExtendByOrgId,
  560. getExtendByOrgIdNoCache,
  561. uploadFile,
  562. } from "@/api/system/extend";
  563. import {
  564. listDept,
  565. getDept,
  566. delDept,
  567. addDept,
  568. updateDept,
  569. listDeptExcludeChild,
  570. } from "@/api/system/dept";
  571. import {
  572. listOrgPhysicalDefenseConstruction,
  573. getOrgPhysicalDefenseConstruction,
  574. addOrgPhysicalDefenseConstruction,
  575. updateOrgPhysicalDefenseConstruction,
  576. delOrgPhysicalDefenseConstruction,
  577. } from "@/api/system/OrgPhysicalDefenseConstruction";
  578. import {selectCityInfoVoList} from "@/api/core/weather";
  579. import TreeNodeDialogVue from "../../tool/build/TreeNodeDialog.vue";
  580. import KTextarea from "@/components/common/textarea.vue";
  581. export default {
  582. dicts: [
  583. "duty_options",
  584. "sys_org_type",
  585. "org_platform_brand",
  586. "org_platform_supplier_brand",
  587. "org_extend_type",
  588. "business_library_type",
  589. "reality_org_type",
  590. "org_extend_standard",
  591. "org_extend_business_library_standard",
  592. "org_extend_self_service_bank_standard",
  593. "org_extend_detached_standard",
  594. "org_extend_is",
  595. "property_situation",
  596. 'sys_yes_no',
  597. ],
  598. fillter: {},
  599. components: {
  600. KTextarea,
  601. ImgsUpload,
  602. "el-image-viewer": () =>
  603. import("element-ui/packages/image/src/image-viewer"),
  604. },
  605. props: [],
  606. data() {
  607. let formatRule = function (rule, value, callback) {
  608. console.log(value, "value");
  609. if (!value.length) {
  610. callback(new Error("证书为必填项"));
  611. } else {
  612. callback();
  613. }
  614. };
  615. return {
  616. //内容样式
  617. contentStyle: {
  618. 'text-align': 'left',
  619. 'width': '300px'
  620. },
  621. //label样式
  622. labelStyle: { 'width': '200px' }
  623. ,
  624. org_type: {
  625. jkzx: '10',
  626. yewd: '4',
  627. lhzz: '5',
  628. zxywk: '6',
  629. hangse: '3',
  630. },
  631. reqmsg: false,
  632. imageViewer: false,
  633. //表单验证
  634. rules: {
  635. type: [{required: true, message: "请选择机构类型", trigger: "change"}],
  636. standard: [{required: true, message: "请选择标准", trigger: "change"}],
  637. //certificate: [{required: true, message: "请选择上传证书", trigger: "change"}],
  638. },
  639. remoteCountoptions: [
  640. {label: "0", value: 0},
  641. {label: "1", value: 1},
  642. {label: "2", value: 2},
  643. {label: "3", value: 3},
  644. ],
  645. cashAddingRoomoptions: [
  646. {label: "0", value: 0},
  647. {label: "1", value: 1},
  648. {label: "2", value: 2},
  649. {label: "3", value: 3},
  650. ],
  651. //基础信息key
  652. infoKeys: [
  653. {label: "机构名称", key: "name"},
  654. {label: "机构简称", key: "shortName"},
  655. {label: "机构地址", key: "address"},
  656. {label: "排序号", key: "sort"},
  657. {label: "更新时间", key: "updateTime"},
  658. {label: "同步时间", key: "createTime"},
  659. ],
  660. innerCount: 0,
  661. outsideCount: 0,
  662. safeBox: null,
  663. remoteCount: 0,
  664. remoteControlCount: 0,
  665. cashAddingRoom: 0,
  666. cashAddingRoomControlCount: 0,
  667. type: null,
  668. isLock: null,
  669. dataInfo: [],
  670. //机构补充信息
  671. extendId: null,
  672. orgType: null,
  673. weatherAreaCode: null,
  674. premisesArea: null,
  675. ownership: null,
  676. aloneDept:null,
  677. outsideArea: null,
  678. askari: null,
  679. businessLibrary: null,
  680. businessLibraryType: null,
  681. dutyMode: null,
  682. //remoteControl: null,
  683. selfServiceBank: null,
  684. lobbyEquipment: 0,
  685. wallPenetratingEquipment: 0,
  686. platformBrand: null,
  687. platformSupplierBrand: null,
  688. constructionTime: null,
  689. lastUpdateTime: null,
  690. detachedLobbyEquipment: null,
  691. detachedWallPenetratingEquipment: null,
  692. cashAddingRoomRemoteControl: null,
  693. source: null,
  694. //是否取得保安证书
  695. isAskariCertificate: null,
  696. askariCertificate: null,
  697. hdCameraCount: 0,
  698. totalCameraCount: 0,
  699. certificate: null,
  700. //机构建设数据
  701. // 遮罩层
  702. orgloading: true,
  703. businessloading: true,
  704. // 选中数组
  705. orgids: [],
  706. // 选中数组
  707. Bankids: [],
  708. Businessids: [],
  709. // 非单个停用
  710. single: true,
  711. // 非多个停用
  712. multiple: true,
  713. // 显示搜索条件
  714. showSearch: true,
  715. // 总条数
  716. total: 0,
  717. // 机构物防建设表格数据
  718. constructionList: [],
  719. // 银行物防建设表格数据
  720. BankPhysicalDefenseConstructionList: [],
  721. detachedPhysicalDefenseConstructionList: [],
  722. BusinessPhysicalDefenseConstructionList: [],
  723. // 弹出层标题
  724. orgtitle: "",
  725. Businesstitle: "",
  726. // 弹出层标题
  727. Banktitle: "",
  728. detachedtitle: "",
  729. detachedloading: false,
  730. // 是否显示弹出层
  731. Bankopen: false,
  732. detachedopen: false,
  733. //图片预览
  734. openUrl: null,
  735. srcList: [],
  736. openTitle: null,
  737. openVisible: false,
  738. // 表单参数
  739. Bankform: {},
  740. detachedform: {},
  741. Businessform: {},
  742. // 是否显示弹出层
  743. Businessopen: false,
  744. orgopen: false,
  745. // 表单参数
  746. orgform: {},
  747. //2个图片信息
  748. uploadp: uploadpng,
  749. uplp: uplpng,
  750. //下拉框生成信息
  751. orgTypes: [
  752. {label: "营业网点", value: 0},
  753. {label: "在行式自助银行", value: 1},
  754. {label: "离行式自助银行", value: 2},
  755. {label: "中心业务库", value: 3},
  756. {label: "网点业务库", value: 4},
  757. {label: "保管箱库", value: 5},
  758. {label: "监控中心", value: 6},
  759. ],
  760. businessLibraryTypes: {
  761. businessLibraryTyp1: {label: "1类业务库", value: 1},
  762. businessLibraryTyp2: {label: "2类业务库", value: 2},
  763. businessLibraryTyp3: {label: "3类业务库", value: 3},
  764. },
  765. platformBrands: {
  766. platformBrand1: {label: "品牌1", value: 0},
  767. platformBrand2: {label: "品牌2", value: 1},
  768. },
  769. platformSupplierBrands: {
  770. platformSupplierBrand1: {label: "品牌1", value: 0},
  771. platformSupplierBrand2: {label: "品牌2", value: 1},
  772. },
  773. prop: "",
  774. propItem: "",
  775. row: "",
  776. areaList: [],
  777. imgs: [],
  778. Businessimgs: [],
  779. Bankimgs: [],
  780. orgimgs: [],
  781. detachedimgs: [],
  782. };
  783. },
  784. computed: {
  785. getLabels() {
  786. return function (value) {
  787. const option = this.orgTypes.filter((item) => item.value == value);
  788. // console.log(option[0].label,"option")
  789. return option ? option[0].label : "";
  790. };
  791. },
  792. getGA38TypeByOrgType() {
  793. let tempArry = [];
  794. // 上传GA38的机构的机构类型是 营业网点
  795. if(this.type=="4")
  796. {
  797. this.dict.type.org_extend_type.forEach(x=>{
  798. if (x.value == 1 || x.value == 2 || x.value == 5 || x.value == 6) {
  799. tempArry.push(x);
  800. }
  801. });
  802. }
  803. // 上传GA38的机构的机构类型是 离行自助银行
  804. else if(this.type=="5")
  805. {
  806. this.dict.type.org_extend_type.forEach(x=>{
  807. if (x.value == 3) {
  808. tempArry.push(x);
  809. }
  810. });
  811. }
  812. // 上传GA38的机构的机构类型是 中心业务库
  813. else if(this.type=="6")
  814. {
  815. this.dict.type.org_extend_type.forEach(x=>{
  816. if (x.value == 4) {
  817. tempArry.push(x);
  818. }
  819. });
  820. }
  821. // 上传GA38的机构的机构类型是 监控中心
  822. else if(this.type=="10")
  823. {
  824. this.dict.type.org_extend_type.forEach(x=>{
  825. if (x.value == 7) {
  826. tempArry.push(x);
  827. }
  828. });
  829. }
  830. else{
  831. tempArry=this.dict.type.org_extend_type;
  832. }
  833. // console.log("computed getUserOrgType",tempArry);
  834. return tempArry;
  835. },
  836. switchModel: {
  837. get() {
  838. return this.switchValue === 1; // 将0转换为false,1转换为true
  839. },
  840. set(value) {
  841. this.switchValue = value ? 1 : 0; // 将false转换为0,true转换为1
  842. },
  843. },
  844. },
  845. watch: {
  846. "detachedform.certificateEvidence"(newValue) {
  847. if (
  848. newValue === 1 &&
  849. this.detachedform.certificate == null &&
  850. this.detachedimgs.length == 0
  851. ) {
  852. this.reqmsg = true;
  853. }
  854. if (newValue === 0) {
  855. this.reqmsg = false;
  856. }
  857. },
  858. "Bankform.certificateEvidence"(newValue) {
  859. // console.log(this.Bankimgs.length,"this.imgs")
  860. // console.log(this.Bankform.certificate,"Bankform.certificate")
  861. if (
  862. newValue === 1 &&
  863. this.Bankform.certificate == null &&
  864. this.Bankimgs.length == 0
  865. ) {
  866. this.reqmsg = true;
  867. }
  868. if (newValue === 0) {
  869. this.reqmsg = false;
  870. }
  871. },
  872. "Businessform.certificateEvidence"(newValue) {
  873. if (
  874. newValue === 1 &&
  875. this.Businessform.certificate == null &&
  876. this.Businessimgs.length === 0
  877. ) {
  878. this.reqmsg = true;
  879. }
  880. if (newValue === 0) {
  881. this.reqmsg = false;
  882. }
  883. },
  884. "orgform.certificateEvidence"(newValue) {
  885. if (
  886. newValue === 1 &&
  887. this.orgform.certificate == null &&
  888. this.orgimgs.length === 0
  889. ) {
  890. this.reqmsg = true;
  891. }
  892. if (newValue === 0) {
  893. this.reqmsg = false;
  894. }
  895. },
  896. // selfServiceBank(newValue){
  897. // if (newValue==0){
  898. // this.wallPenetratingEquipment=null;
  899. // this.lobbyEquipment=null;
  900. // }
  901. // },
  902. businessLibrary(newValue){
  903. if (newValue==0){
  904. this.businessLibraryType=null;
  905. this.dutyMode=null;
  906. }
  907. },
  908. askari(newValue){
  909. console.log("askari1",newValue)
  910. if (newValue==0){
  911. console.log("askari2",newValue)
  912. this.innerCount=null;
  913. this.outsideCount=null;
  914. this.isAskariCertificate=null;
  915. this.askariCertificate=null;
  916. }
  917. },
  918. isAskariCertificate(newValue)
  919. {
  920. if(!newValue){
  921. this.askariCertificate=null;
  922. }
  923. }
  924. },
  925. created() {
  926. this.getOrgInfo();
  927. this.getExtendInfo();
  928. this.getOrgPhysicalDefenseConstructionInfo();
  929. this.getBankPhysicalDefenseConstructionInfo();
  930. this.getBusinessPhysicalDefenseConstructionInfo();
  931. this.getdetachedPhysicalDefenseConstructionInfo();
  932. this.getAreaList();
  933. },
  934. mounted() {
  935. },
  936. methods: {
  937. closePictrue() {
  938. this.orgform.certificate = null;
  939. },
  940. closeImgViewer() {
  941. this.imageViewer = false;
  942. this.srcList = [];
  943. },
  944. isreq(rule, value, callback) {
  945. if (this.reqmsg) {
  946. callback(new Error("证书为必填项"));
  947. } else {
  948. callback();
  949. }
  950. },
  951. getImgUrl(img) {
  952. this.imgs.push(img);
  953. console.log(this.imgs, "imgs");
  954. },
  955. getAreaList() {
  956. selectCityInfoVoList({}).then((response) => {
  957. this.areaList = response.data;
  958. });
  959. },
  960. selectArea(value) {
  961. this.weatherAreaCode = value[1];
  962. },
  963. downBusiness(file) {
  964. let array = file.split(",");
  965. this.openTitle = "证书";
  966. this.openUrl = array[0];
  967. this.srcList = array;
  968. this.openVisible = true;
  969. this.imageViewer = true;
  970. // for (let i = 0; i < array.length; i++) {
  971. // window.open(array[i]);
  972. // }
  973. },
  974. //证书上传
  975. uploadBusinessSuccess(img) {
  976. this.Businessimgs.push(img);
  977. this.reqmsg = false;
  978. },
  979. uploadBankSuccess(img) {
  980. this.Bankimgs.push(img);
  981. this.reqmsg = false;
  982. },
  983. uploadorgSuccess(img) {
  984. this.orgimgs.push(img);
  985. this.reqmsg = false;
  986. },
  987. uploaddetachedSuccess(img) {
  988. this.detachedimgs.push(img);
  989. this.reqmsg = false;
  990. },
  991. handleInput() {
  992. // 使用正则表达式过滤输入,只保留数字和小数点
  993. // this.premisesArea = this.premisesArea.replace(/[^0-9.]/g, "");
  994. // 限制只能输入1到999999之间的数字
  995. let value = parseInt(this.premisesArea, 10); // 将输入的值转为整数
  996. if (isNaN(value) || value < 1 || value > 999999) {
  997. // 判断是否在范围内
  998. this.premisesArea = ""; // 不在范围内则清空输入的值
  999. } else {
  1000. this.premisesArea = value.toString(); // 在范围内则保留输入的值
  1001. }
  1002. },
  1003. handleInput2() {
  1004. // 使用正则表达式过滤输入,只保留数字和小数点
  1005. this.weatherAreaCode = this.weatherAreaCode.replace(/[^a-zA-Z0-9]/g, "");
  1006. },
  1007. request() {
  1008. },
  1009. handleChange(value) {
  1010. },
  1011. getOrgInfo() {
  1012. getDept(this.$route.params.id).then((data) => {
  1013. // console.log(data.data);
  1014. if (!data.data) return;
  1015. let res = data.data;
  1016. this.dataInfo = this.infoKeys.map((v, i) => {
  1017. // console.log(v, res[v.key], "vvvvv");
  1018. v.value = res[v.key];
  1019. return v;
  1020. });
  1021. this.type = data.data.type;
  1022. this.isLock = data.data.isLock;
  1023. this.source = data.data.source;
  1024. // console.log(this.dataInfo, "info");
  1025. });
  1026. },
  1027. getExtendInfo() {
  1028. getExtendByOrgIdNoCache(this.$route.params.id).then((data) => {
  1029. if (this.type === this.org_type.zxywk) {
  1030. this.businessLibrary = 1;
  1031. }
  1032. if (data.data != null) {
  1033. this.safeBox = data.data.safeBox;
  1034. this.innerCount = data.data.innerCount;
  1035. this.outsideCount = data.data.outsideCount;
  1036. this.cashAddingRoom = data.data.cashAddingRoom;
  1037. this.cashAddingRoomControlCount = data.data.cashAddingRoomControlCount;
  1038. this.remoteCount = data.data.remoteCount;
  1039. this.remoteControlCount = data.data.remoteControlCount;
  1040. this.orgType = data.data.orgType;
  1041. this.weatherAreaCode = data.data.weatherAreaCode;
  1042. this.premisesArea = data.data.premisesArea;
  1043. this.ownership = data.data.ownership;
  1044. this.outsideArea = data.data.outsideArea;
  1045. this.askari = data.data.askari;
  1046. //this.remoteControl = data.data.remoteControl;
  1047. this.selfServiceBank = data.data.selfServiceBank;
  1048. this.businessLibrary = data.data.businessLibrary;
  1049. this.lobbyEquipment = data.data.lobbyEquipment;
  1050. this.wallPenetratingEquipment = data.data.wallPenetratingEquipment;
  1051. this.askariCertificate = data.data.askariCertificate;
  1052. if (this.askariCertificate){
  1053. this.isAskariCertificate=1;
  1054. }else {
  1055. this.isAskariCertificate=0;
  1056. }
  1057. this.extendId = data.data.id;
  1058. this.aloneDept = data.data.aloneDept;
  1059. this.constructionTime = data.data.constructionTime;
  1060. this.lastUpdateTime = data.data.lastUpdateTime;
  1061. this.platformBrand = data.data.platformBrand;
  1062. this.platformSupplierBrand = data.data.platformSupplierBrand;
  1063. this.businessLibraryType = data.data.businessLibraryType;
  1064. this.dutyMode = data.data.dutyMode;
  1065. this.detachedLobbyEquipment = data.data.detachedLobbyEquipment;
  1066. this.detachedWallPenetratingEquipment =
  1067. data.data.detachedWallPenetratingEquipment;
  1068. this.cashAddingRoomRemoteControl =
  1069. data.data.cashAddingRoomRemoteControl;
  1070. this.hdCameraCount = data.data.hdCameraCount ? data.data.hdCameraCount : 0;
  1071. this.totalCameraCount = data.data.totalCameraCount ? data.data.totalCameraCount : 0;
  1072. // if (
  1073. // this.askariCertificate &&
  1074. // this.askariCertificate.trim() &&
  1075. // this.askariCertificate.includes(",")
  1076. // ) {
  1077. // this.imgs = this.askariCertificate.split(",");
  1078. // } else if (
  1079. // this.askariCertificate &&
  1080. // this.askariCertificate.trim() &&
  1081. // this.askariCertificate.includes(".")
  1082. // ) {
  1083. // this.imgs.push(this.askariCertificate);
  1084. // }
  1085. // console.log(this.extendId);
  1086. }
  1087. });
  1088. },
  1089. getLabel(options, value) {
  1090. return getLabel(options, value);
  1091. },
  1092. getOrgPhysicalDefenseConstructionInfo() {
  1093. this.orgloading = true;
  1094. let dat = {orgId: this.$route.params.id};
  1095. listOrgPhysicalDefenseConstruction(dat).then((data) => {
  1096. console.log("机构信息获取成功");
  1097. this.constructionList = data.rows;
  1098. this.orgloading = false;
  1099. });
  1100. },
  1101. getBankPhysicalDefenseConstructionInfo() {
  1102. this.bankloading = true;
  1103. let dat = {orgId: this.$route.params.id, type: 3};
  1104. listOrgPhysicalDefenseConstruction(dat).then((data) => {
  1105. // console.log(data);
  1106. this.BankPhysicalDefenseConstructionList = data.rows;
  1107. this.bankloading = false;
  1108. });
  1109. },
  1110. getdetachedPhysicalDefenseConstructionInfo() {
  1111. this.detachedloading = true;
  1112. let dat = {orgId: this.$route.params.id, type: 4};
  1113. listOrgPhysicalDefenseConstruction(dat).then((data) => {
  1114. // console.log(data);
  1115. this.detachedPhysicalDefenseConstructionList = data.rows;
  1116. this.detachedloading = false;
  1117. });
  1118. },
  1119. getBusinessPhysicalDefenseConstructionInfo() {
  1120. this.businessloading = true;
  1121. let dat = {orgId: this.$route.params.id, type: 2};
  1122. listOrgPhysicalDefenseConstruction(dat).then((data) => {
  1123. // console.log(data);
  1124. this.BusinessPhysicalDefenseConstructionList = data.rows;
  1125. this.businessloading = false;
  1126. });
  1127. },
  1128. // 取消按钮
  1129. Businesscancel() {
  1130. this.Businessopen = false;
  1131. this.Businessreset();
  1132. },
  1133. // 表单重置
  1134. Businessreset() {
  1135. this.Businessform = {
  1136. id: null,
  1137. standard: null,
  1138. dateOfCompliance: null,
  1139. certificateEvidence: null,
  1140. certificate: null,
  1141. evidence: null,
  1142. createTime: null,
  1143. updateTime: null,
  1144. createBy: null,
  1145. updateBy: null,
  1146. orgId: null,
  1147. };
  1148. this.reqmsg = false;
  1149. this.resetForm("Businessform");
  1150. },
  1151. // 多选框选中数据
  1152. handleBusinessSelectionChange(selection) {
  1153. this.Businessids = selection.map((item) => item.id);
  1154. this.single = selection.length !== 1;
  1155. this.multiple = !selection.length;
  1156. },
  1157. /** 新增按钮操作 */
  1158. handleBusinessAdd() {
  1159. this.Businessreset();
  1160. this.Businessopen = true;
  1161. this.Businesstitle = "新增安全防范设施建设达标信息";
  1162. },
  1163. /** 编辑按钮操作 */
  1164. handleBusinessUpdate(row) {
  1165. this.Businessreset();
  1166. const id = row.id || this.Businessids;
  1167. getOrgPhysicalDefenseConstruction(id).then((response) => {
  1168. // console.log(response.data,"response.data")
  1169. this.Businessform = response.data;
  1170. // this.Businessform.certificateEvidence=parseInt(response.data.certificateEvidence);
  1171. this.Businessopen = true;
  1172. this.Businesstitle = "编辑安全防范设施建设达标信息";
  1173. });
  1174. },
  1175. /** 提交按钮 */
  1176. submitBusinessForm() {
  1177. if (this.Businessimgs.length > 0) {
  1178. this.Businessform.certificate =
  1179. this.Businessimgs[this.Businessimgs.length - 1].toString(",");
  1180. }
  1181. this.$refs.Businessform.validate((valid) => {
  1182. if (valid) {
  1183. // 表单验证通过,提交数据或执行其他操作
  1184. this.Businessform.orgId = this.$route.params.id;
  1185. this.Businessform.type = 2;
  1186. if (this.Businessform.id != null) {
  1187. // console.log(this.Businessform,"this.Businessform")
  1188. updateOrgPhysicalDefenseConstruction(this.Businessform).then(
  1189. (response) => {
  1190. this.$modal.msgSuccess("编辑成功");
  1191. this.Businessopen = false;
  1192. this.getBusinessPhysicalDefenseConstructionInfo();
  1193. }
  1194. );
  1195. } else {
  1196. addOrgPhysicalDefenseConstruction(this.Businessform).then(
  1197. (response) => {
  1198. this.$modal.msgSuccess("新增成功");
  1199. this.Businessopen = false;
  1200. this.getBusinessPhysicalDefenseConstructionInfo();
  1201. }
  1202. );
  1203. }
  1204. this.Businessimgs = [];
  1205. } else {
  1206. // 表单验证未通过,显示错误信息
  1207. }
  1208. });
  1209. // this.$refs["Businessform"].validate((valid) => {
  1210. // if (valid) {
  1211. // }
  1212. // });
  1213. },
  1214. /** 删除按钮操作 */
  1215. handleBusinessDelete(row) {
  1216. const Businessids = row.id || this.Businessids;
  1217. this.$modal
  1218. .confirm("确认删除?")
  1219. .then(function () {
  1220. return delOrgPhysicalDefenseConstruction(Businessids);
  1221. })
  1222. .then(() => {
  1223. this.getBusinessPhysicalDefenseConstructionInfo();
  1224. this.$modal.msgSuccess("删除成功");
  1225. })
  1226. .catch(() => {
  1227. });
  1228. },
  1229. // resetimg(certificate){
  1230. // this.Bankform.certificate=0;
  1231. // },
  1232. // 取消按钮
  1233. Bankcancel() {
  1234. this.Bankopen = false;
  1235. this.Bankreset();
  1236. },
  1237. // 表单重置
  1238. Bankreset() {
  1239. this.Bankform = {
  1240. id: null,
  1241. standard: null,
  1242. dateOfCompliance: null,
  1243. certificateEvidence: null,
  1244. certificate: null,
  1245. evidence: null,
  1246. createTime: null,
  1247. updateTime: null,
  1248. createBy: null,
  1249. updateBy: null,
  1250. orgId: null,
  1251. };
  1252. this.reqmsg = false;
  1253. this.resetForm("Bankform");
  1254. },
  1255. // 多选框选中数据
  1256. handleBankSelectionChange(selection) {
  1257. this.Bankids = selection.map((item) => item.id);
  1258. this.single = selection.length !== 1;
  1259. this.multiple = !selection.length;
  1260. },
  1261. /** 新增按钮操作 */
  1262. handleBankAdd() {
  1263. this.Bankreset();
  1264. this.Bankopen = true;
  1265. this.Banktitle = "新增安全防范设施建设达标信息";
  1266. },
  1267. /** 编辑按钮操作 */
  1268. handleBankUpdate(row) {
  1269. this.Bankreset();
  1270. const id = row.id || this.Bankids;
  1271. getOrgPhysicalDefenseConstruction(id).then((response) => {
  1272. this.Bankform = response.data;
  1273. // this.Bankform.certificateEvidence=parseInt(response.data.certificateEvidence);
  1274. this.Bankopen = true;
  1275. this.Banktitle = "编辑安全防范设施建设达标信息";
  1276. });
  1277. },
  1278. /** 提交按钮 */
  1279. submitBankForm() {
  1280. if (this.Bankimgs.length > 0) {
  1281. this.Bankform.certificate =
  1282. this.Bankimgs[this.Bankimgs.length - 1].toString(",");
  1283. }
  1284. this.$refs.Bankform.validate((valid) => {
  1285. if (valid) {
  1286. // 表单验证通过,提交数据或执行其他操作
  1287. this.Bankform.orgId = this.$route.params.id;
  1288. this.Bankform.type = 3;
  1289. if (this.Bankform.id != null) {
  1290. updateOrgPhysicalDefenseConstruction(this.Bankform).then(
  1291. (response) => {
  1292. this.$modal.msgSuccess("编辑成功");
  1293. this.Bankopen = false;
  1294. this.getBankPhysicalDefenseConstructionInfo();
  1295. }
  1296. );
  1297. } else {
  1298. addOrgPhysicalDefenseConstruction(this.Bankform).then(
  1299. (response) => {
  1300. this.$modal.msgSuccess("新增成功");
  1301. this.Bankopen = false;
  1302. this.getBankPhysicalDefenseConstructionInfo();
  1303. }
  1304. );
  1305. }
  1306. this.Bankimgs = [];
  1307. } else {
  1308. // 表单验证未通过,显示错误信息
  1309. }
  1310. });
  1311. // this.$refs["Bankform"].validate((valid) => {
  1312. // if (valid) {
  1313. // }
  1314. // });
  1315. },
  1316. /** 删除按钮操作 */
  1317. handleBankDelete(row) {
  1318. const Bankids = row.id || this.Bankids;
  1319. this.$modal
  1320. .confirm("确认删除?")
  1321. .then(function () {
  1322. return delOrgPhysicalDefenseConstruction(Bankids);
  1323. })
  1324. .then(() => {
  1325. this.getBankPhysicalDefenseConstructionInfo();
  1326. this.$modal.msgSuccess("删除成功");
  1327. })
  1328. .catch(() => {
  1329. });
  1330. },
  1331. // 取消按钮
  1332. detachedcancel() {
  1333. this.detachedopen = false;
  1334. this.detachedreset();
  1335. },
  1336. // 表单重置
  1337. detachedreset() {
  1338. this.detachedform = {
  1339. id: null,
  1340. standard: null,
  1341. dateOfCompliance: null,
  1342. certificateEvidence: null,
  1343. certificate: null,
  1344. evidence: null,
  1345. createTime: null,
  1346. updateTime: null,
  1347. createBy: null,
  1348. updateBy: null,
  1349. orgId: null,
  1350. };
  1351. this.reqmsg = false;
  1352. this.resetForm("detachedform");
  1353. },
  1354. // 多选框选中数据
  1355. handledetachedSelectionChange(selection) {
  1356. this.detachedids = selection.map((item) => item.id);
  1357. this.single = selection.length !== 1;
  1358. this.multiple = !selection.length;
  1359. },
  1360. /** 新增按钮操作 */
  1361. handledetachedAdd() {
  1362. this.detachedreset();
  1363. this.detachedopen = true;
  1364. this.detachedtitle = "新增安全防范设施建设达标信息";
  1365. },
  1366. /** 编辑按钮操作 */
  1367. handledetachedUpdate(row) {
  1368. this.detachedreset();
  1369. const id = row.id || this.detachedids;
  1370. getOrgPhysicalDefenseConstruction(id).then((response) => {
  1371. this.detachedform = response.data;
  1372. // this.detachedform.certificateEvidence=parseInt(response.data.certificateEvidence);
  1373. this.detachedopen = true;
  1374. this.detachedtitle = "编辑安全防范设施建设达标信息";
  1375. });
  1376. },
  1377. canShowGA38() {
  1378. // console.log("canShowGA38",this.type ,this.type == '4' || this.type == '10' || this.type == '5')
  1379. // 4: 网点,5:离行 6 中心业务库 10 监控中心
  1380. if (this.type == '4' || this.type == '5'|| this.type=='6' || this.type == '10' ) {
  1381. return true;
  1382. }
  1383. return false;
  1384. },
  1385. /** 提交按钮 */
  1386. submitdetachedForm() {
  1387. if (this.detachedimgs.length > 0) {
  1388. this.detachedform.certificate =
  1389. this.detachedimgs[this.detachedimgs.length - 1].toString(",");
  1390. }
  1391. this.$refs.detachedform.validate((valid) => {
  1392. if (valid) {
  1393. // 表单验证通过,提交数据或执行其他操作
  1394. this.detachedform.orgId = this.$route.params.id;
  1395. this.detachedform.type = 4;
  1396. if (this.detachedform.id != null) {
  1397. updateOrgPhysicalDefenseConstruction(this.detachedform).then(
  1398. (response) => {
  1399. this.$modal.msgSuccess("编辑成功");
  1400. this.detachedopen = false;
  1401. this.getdetachedPhysicalDefenseConstructionInfo();
  1402. }
  1403. );
  1404. } else {
  1405. addOrgPhysicalDefenseConstruction(this.detachedform).then(
  1406. (response) => {
  1407. this.$modal.msgSuccess("新增成功");
  1408. this.detachedopen = false;
  1409. this.getdetachedPhysicalDefenseConstructionInfo();
  1410. }
  1411. );
  1412. }
  1413. this.detachedimgs = [];
  1414. } else {
  1415. // 表单验证未通过,显示错误信息
  1416. }
  1417. });
  1418. // this.$refs["detachedform"].validate((valid) => {
  1419. // if (valid) {
  1420. // }
  1421. // });
  1422. },
  1423. /** 删除按钮操作 */
  1424. handledetachedDelete(row) {
  1425. const detachedids = row.id || this.detachedids;
  1426. this.$modal
  1427. .confirm("确认删除?")
  1428. .then(function () {
  1429. return delOrgPhysicalDefenseConstruction(detachedids);
  1430. })
  1431. .then(() => {
  1432. this.getdetachedPhysicalDefenseConstructionInfo();
  1433. this.$modal.msgSuccess("删除成功");
  1434. })
  1435. .catch(() => {
  1436. });
  1437. },
  1438. // 表单重置
  1439. orgreset() {
  1440. this.orgform = {
  1441. id: null,
  1442. standard: null,
  1443. dateOfCompliance: null,
  1444. dateOfComplete: null,
  1445. certificateEvidence: 0,
  1446. certificate: null,
  1447. evidence: null,
  1448. createTime: null,
  1449. updateTime: null,
  1450. createBy: null,
  1451. updateBy: null,
  1452. orgId: null,
  1453. };
  1454. this.reqmsg = false;
  1455. this.resetForm("orgform");
  1456. },
  1457. // 取消按钮
  1458. orgcancel() {
  1459. console.log(this.orgform.certificate, 123123);
  1460. console.log(this.orgimgs, '123123');
  1461. this.orgopen = false;
  1462. this.orgform.certificate = null;
  1463. this.orgimgs = null;
  1464. this.orgreset();
  1465. },
  1466. // 多选框选中数据
  1467. handleOrgSelectionChange(selection) {
  1468. this.orgids = selection.map((item) => item.id);
  1469. this.single = selection.length !== 1;
  1470. this.multiple = !selection.length;
  1471. },
  1472. /** 新增按钮操作 */
  1473. handleOrgAdd() {
  1474. this.orgreset();
  1475. this.orgopen = true;
  1476. this.orgtitle = "新增安全防范设施建设达标信息";
  1477. },
  1478. /** 编辑按钮操作 */
  1479. handleOrgUpdate(row) {
  1480. this.orgreset();
  1481. const id = row.id || this.orgids;
  1482. getOrgPhysicalDefenseConstruction(id).then((response) => {
  1483. this.orgform = response.data;
  1484. this.orgopen = true;
  1485. this.orgtitle = "编辑安全防范设施建设达标信息";
  1486. });
  1487. },
  1488. /** 提交按钮 */
  1489. submitOrgForm() {
  1490. console.log(this.orgform.certificate, 'this.orgform.certificate')
  1491. if (this.orgform.certificate > 0) {
  1492. //this.orgform.certificate = this.orgimgs[this.orgimgs.length - 1].toString(",");
  1493. }
  1494. // if(!this.orgform.certificate && this.orgform.standard !== '3'){
  1495. // this.$modal.alertError("请上传证书");
  1496. // return;
  1497. // }
  1498. //certificate
  1499. this.$refs.orgform.validate((valid) => {
  1500. if (valid) {
  1501. if (this.orgform.standard !== '3' && (this.orgform.certificate == null || this.orgform.certificate == 0)) {
  1502. this.$modal.alertError("请上传证书");
  1503. return;
  1504. }
  1505. // 表单验证通过,提交数据或执行其他操作
  1506. this.orgform.orgId = this.$route.params.id;
  1507. // this.orgform.type = 1;
  1508. if (this.orgform.id != null) {
  1509. updateOrgPhysicalDefenseConstruction(this.orgform).then(
  1510. (response) => {
  1511. this.$modal.msgSuccess("编辑成功");
  1512. this.orgopen = false;
  1513. this.getOrgPhysicalDefenseConstructionInfo();
  1514. }
  1515. );
  1516. } else {
  1517. addOrgPhysicalDefenseConstruction(this.orgform).then((response) => {
  1518. this.$modal.msgSuccess("新增成功");
  1519. this.orgopen = false;
  1520. this.getOrgPhysicalDefenseConstructionInfo();
  1521. });
  1522. }
  1523. this.orgimgs = [];
  1524. } else {
  1525. // 表单验证未通过,显示错误信息
  1526. }
  1527. });
  1528. },
  1529. /** 删除按钮操作 */
  1530. handleOrgDelete(row) {
  1531. const orgids = row.id || this.orgids;
  1532. this.$modal
  1533. .confirm("确认删除?")
  1534. .then(function () {
  1535. return delOrgPhysicalDefenseConstruction(orgids);
  1536. })
  1537. .then(() => {
  1538. this.getOrgPhysicalDefenseConstructionInfo();
  1539. this.$modal.msgSuccess("删除成功");
  1540. })
  1541. .catch(() => {
  1542. });
  1543. },
  1544. saveExtend() {
  1545. if (!this.validBeforeSaveExtend()) {
  1546. return;
  1547. }
  1548. let dat = {
  1549. safeBox: this.safeBox ? 1 : 0,
  1550. innerCount: this.innerCount,
  1551. outsideCount: this.outsideCount,
  1552. cashAddingRoom: this.cashAddingRoom,
  1553. cashAddingRoomControlCount: this.cashAddingRoomControlCount,
  1554. orgType: this.orgType,
  1555. remoteCount: this.remoteCount,
  1556. remoteControlCount: this.remoteControlCount,
  1557. weatherAreaCode: this.weatherAreaCode,
  1558. askariCertificate:this.askariCertificate,
  1559. // this.imgs.length > 0
  1560. // ? this.imgs[this.imgs.length - 1].toString(",")
  1561. // : null,
  1562. premisesArea: this.premisesArea,
  1563. ownership: this.ownership,
  1564. outsideArea: this.outsideArea,
  1565. askari: this.askari ? 1 : 0,
  1566. businessLibraryType: this.businessLibraryType,
  1567. dutyMode: this.dutyMode,
  1568. //remoteControl: this.remoteControl ? 1 : 0,
  1569. selfServiceBank: this.selfServiceBank ? 1 : 0,
  1570. businessLibrary: this.businessLibrary ? 1 : 0,
  1571. lobbyEquipment: this.lobbyEquipment,
  1572. wallPenetratingEquipment: this.wallPenetratingEquipment,
  1573. platformBrand: this.platformBrand,
  1574. platformSupplierBrand: this.platformSupplierBrand,
  1575. constructionTime: this.constructionTime,
  1576. lastUpdateTime: this.lastUpdateTime,
  1577. orgId: this.$route.params.id,
  1578. id: this.extendId,
  1579. detachedLobbyEquipment: this.detachedLobbyEquipment,
  1580. detachedWallPenetratingEquipment: this.detachedWallPenetratingEquipment,
  1581. cashAddingRoomRemoteControl: this.cashAddingRoomRemoteControl,
  1582. hdCameraCount: this.hdCameraCount,
  1583. totalCameraCount: this.totalCameraCount,
  1584. aloneDept: this.aloneDept,
  1585. };
  1586. // console.log(dat);
  1587. if (this.extendId) {
  1588. updateExtend(dat).then((res) => {
  1589. this.$modal.msgSuccess("保存成功");
  1590. // this.$router.go(-1);
  1591. this.$tab.closePageAndPushPrev();
  1592. });
  1593. } else {
  1594. addExtend(dat).then((res) => {
  1595. this.$modal.msgSuccess("保存成功");
  1596. // this.$router.go(-1);
  1597. this.$tab.closePageAndPushPrev();
  1598. });
  1599. }
  1600. },
  1601. validBeforeSaveExtend() {
  1602. if (this.weatherAreaCode == null) {
  1603. this.$modal.msgError("气象行政区域不能为空,请选择气象行政区域");
  1604. return false;
  1605. }
  1606. if(this.type === this.org_type.hangse && this.aloneDept == null){
  1607. this.$modal.msgError("是否独立部门不能为空,请选择是否独立部门");
  1608. return false;
  1609. }
  1610. if (this.type === this.org_type.yewd && this.ownership == null) {
  1611. this.$modal.msgError("产权类型不能为空,请选择产权类型");
  1612. return false;
  1613. }
  1614. if (this.type === this.org_type.yewd && this.outsideArea == null) {
  1615. this.$modal.msgError("所在位置不能为空,请选择所在位置");
  1616. return false;
  1617. }
  1618. if (this.type === this.org_type.yewd && this.safeBox == null) {
  1619. this.$modal.msgError("是否设立保管箱库不能为空,请选择是否设立保管箱库");
  1620. return false;
  1621. }
  1622. if (this.type === this.org_type.yewd && this.selfServiceBank == null) {
  1623. this.$modal.msgError("是否设立在行式自助银行不能为空,请选择是否设立在行式自助银行");
  1624. return false;
  1625. }
  1626. if (this.type === this.org_type.yewd && this.wallPenetratingEquipment==null) {
  1627. this.$modal.msgError("穿墙式设备数量不能为空,请输入穿墙式设备数量");
  1628. return false;
  1629. }
  1630. if (this.type === this.org_type.yewd && this.lobbyEquipment==null) {
  1631. this.$modal.msgError("大堂设备数量不能为空,请输入大堂设备数量");
  1632. return false;
  1633. }
  1634. if ((this.type === this.org_type.yewd || this.type === this.org_type.zxywk) &&this.businessLibrary==null) {
  1635. this.$modal.msgError("是否设立网点业务库不能为空,请设置是否设立网点业务库");
  1636. return false;
  1637. }
  1638. if ((this.type === this.org_type.yewd || this.type === this.org_type.zxywk) && this.businessLibrary===1&&this.businessLibraryType==null) {
  1639. this.$modal.msgError("业务库类型不能为空,请选择业务库类型");
  1640. return false;
  1641. }
  1642. if ((this.type === this.org_type.yewd || this.type === this.org_type.zxywk)&& this.businessLibrary===1&& this.dutyMode == null) {
  1643. this.$modal.msgError("业务库值守不能为空,请选择业务库值守方式");
  1644. return false;
  1645. }
  1646. // if ((this.type === this.org_type.jkzx)&&this.businessLibrary===1&&this.remoteControl==null) {
  1647. // this.$modal.msgError("出入口远程控制与授权不能为空,请选择出入口远程控制与授权");
  1648. // return false;
  1649. // }
  1650. if ((this.type === this.org_type.jkzx)&&this.cashAddingRoom==null) {
  1651. this.$modal.msgError("离行式加钞间出入口数量不能为空,请输入离行式加钞间出入口数量");
  1652. return false;
  1653. }
  1654. if ((this.type === this.org_type.jkzx)&&this.cashAddingRoomControlCount==null) {
  1655. this.$modal.msgError("可远程控制和实时授权出入口数量(离行式)不能为空,请输入可远程控制和实时授权出入口数量(离行式)");
  1656. return false;
  1657. }
  1658. if ((this.type === this.org_type.jkzx )&&this.cashAddingRoom<this.cashAddingRoomControlCount) {
  1659. this.$modal.msgError("\"全辖离行式加钞间出入口数量\" 必须大于等于 \"可远程控制和实时授权出入口数量(离行式)\"");
  1660. return false;
  1661. }
  1662. if ((this.type === this.org_type.jkzx )&&this.remoteCount==null) {
  1663. this.$modal.msgError("业务库防控隔离门出入口数量不能为空,请输入业务库防控隔离门出入口数量");
  1664. return false;
  1665. }
  1666. if ((this.type === this.org_type.jkzx )&&this.remoteControlCount==null) {
  1667. this.$modal.msgError("可远程控制和实时授权出入口数量(业务库)不能为空,请输入可远程控制和实时授权出入口数量(业务库)");
  1668. return false;
  1669. }
  1670. if ((this.type === this.org_type.jkzx )&&this.remoteCount<this.remoteControlCount) {
  1671. this.$modal.msgError("\"全辖业务库防控隔离门出入口数量\" 必须大于等于 \"可远程控制和实时授权出入口数量(业务库)\"");
  1672. return false;
  1673. }
  1674. if ((this.type === this.org_type.yewd)&&this.askari==null) {
  1675. this.$modal.msgError("是否配备保安人员不能为空,请选择是否配备保安人员");
  1676. return false;
  1677. }
  1678. if ((this.type === this.org_type.yewd)&&this.askari==1&& !this.innerCount && !this.outsideCount) {
  1679. this.$modal.msgError("网点配备保安人员为“是”,内部保安人数与外聘保安人数不可均为0,请修改");
  1680. return false;
  1681. }
  1682. // if ((this.type === this.org_type.yewd)&&this.askari==1&&this.innerCount==null) {
  1683. // this.$modal.msgError("内部保安人数不能为空,请输入内部保安人数");
  1684. // return false;
  1685. // }
  1686. // if ((this.type === this.org_type.yewd)&&this.askari==1&&this.outsideCount==null) {
  1687. // this.$modal.msgError("外聘保安人数不能为空,请输入外聘保安人数");
  1688. // return false;
  1689. // }
  1690. if ((this.type === this.org_type.yewd)&&this.askari==1&& this.isAskariCertificate==null) {
  1691. this.$modal.msgError("是否取得保安证书不能为空,请选择是否取得保安证书");
  1692. return false;
  1693. }
  1694. if ((this.type === this.org_type.yewd)&&this.askari==1&&this.isAskariCertificate==1&&this.askariCertificate==null) {
  1695. this.$modal.msgError("保安人员证书不能为空,请上传保安人员证书");
  1696. return false;
  1697. }
  1698. return true;
  1699. },
  1700. nosaveExtend() {
  1701. // this.$router.go(-1);
  1702. this.$tab.closePageAndPushPrev();
  1703. },
  1704. triggerFileInput() {
  1705. this.$refs.fileInput.click();
  1706. },
  1707. async handleFileChange(event) {
  1708. const file = event.target.files[0];
  1709. if (!file) return;
  1710. // // 发送文件到您的文件上传 API
  1711. try {
  1712. uploadFile(file, "org").then((res) => {
  1713. console.log(res);
  1714. // this.orgform.certificateEvidence = res.data;
  1715. });
  1716. // 处理上传成功的逻辑
  1717. console.log("上传成功");
  1718. } catch (error) {
  1719. // 处理上传失败的逻辑
  1720. console.log("上传失败");
  1721. }
  1722. event.target.value = "";
  1723. },
  1724. }
  1725. };
  1726. </script>
  1727. <style scoped lang="scss">
  1728. /*.org-extend{
  1729. background-color: #fff;
  1730. padding: 10px;
  1731. }*/
  1732. .title {
  1733. font-size: 18px;
  1734. text-align: left;
  1735. color: #008cd6;
  1736. height: 36px;
  1737. line-height: 36px;
  1738. padding-left: 8px;
  1739. margin: 0;
  1740. }
  1741. .info-box {
  1742. margin: 20px;
  1743. }
  1744. .demo-form-inline {
  1745. }
  1746. .dialog-footer {
  1747. }
  1748. .container {
  1749. }
  1750. .zoom-image {
  1751. transition: transform 0.3s ease;
  1752. }
  1753. .zoom-image:hover {
  1754. transform: scale(1.02);
  1755. }
  1756. .border-color-change {
  1757. border: 1px solid #ccc;
  1758. transition: border-color 0.3s ease;
  1759. }
  1760. .border-color-change:hover {
  1761. border-color: #1ea8e9;
  1762. /* 您可以将此颜色更改为所需的颜色 */
  1763. }
  1764. .extend_mod {
  1765. background-color: #fff;
  1766. padding: 1px 15px 1px 15px;
  1767. margin-bottom: 2px;
  1768. -webkit-box-shadow: 0 2px 8px #ccc;
  1769. box-shadow: 0 2px 8px #ccc;
  1770. }
  1771. .el-table thead > tr > th {
  1772. background-color: #fafafa !important;
  1773. }
  1774. .el-row {
  1775. margin-bottom: 20px;
  1776. &:last-child {
  1777. margin-bottom: 0;
  1778. }
  1779. }
  1780. .el-col {
  1781. border-radius: 4px;
  1782. }
  1783. .bg-purple-dark {
  1784. background: #99a9bf;
  1785. }
  1786. .bg-purple {
  1787. background: #d3dce6;
  1788. }
  1789. .bg-purple-light {
  1790. background: #e5e9f2;
  1791. }
  1792. .grid-content {
  1793. border-radius: 4px;
  1794. min-height: 36px;
  1795. }
  1796. .row-bg {
  1797. padding: 10px 0;
  1798. background-color: #f9fafc;
  1799. }
  1800. ::v-deep .el-upload-list__item-preview{
  1801. margin-right: 30px;
  1802. }
  1803. </style>