newIndex.vue 79 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990
  1. <!--新版布局管理-->
  2. <template>
  3. <div class="app-container building">
  4. <div class="buildingManagement" v-if="pageType == 1">
  5. <div class="max-left-box">
  6. <div class="tree-box scrollbar-box" v-if="treeList[0]">
  7. <div class="terr-max-box" v-for="(item,index) in treeList" :key="index">
  8. <div class="max-name-box">
  9. <p class="max-name" :class="checkTreeId==item.id?'check-color':''" @click="clickCheckTree(item,1)">
  10. {{item.name}}</p>
  11. <el-dropdown @command="(command)=>handleCommand(command,item)" trigger="click">
  12. <img src="@/assets/ZDimages/evacuation3_2/icon_bjgl_gd.png"
  13. style="cursor:pointer;width:16px;height:4px;margin-top:7px;">
  14. <el-dropdown-menu slot="dropdown">
  15. <el-dropdown-item command="1">编辑</el-dropdown-item>
  16. <el-dropdown-item command="2">删除</el-dropdown-item>
  17. </el-dropdown-menu>
  18. </el-dropdown>
  19. </div>
  20. <div class="terr-big-box" v-for="(itemOne,indexOne) in item.buildFloorVoList" :key="indexOne">
  21. <div class="big-name-box">
  22. <p v-if="!itemOne.buildFloorVoList[0]" style="width:16px;"></p>
  23. <img v-if="!itemOne.onType&&itemOne.buildFloorVoList[0]"
  24. src="@/assets/ZDimages/evacuation3_2/icon_bjgl_jt.png" @click="terrClick(itemOne)">
  25. <img v-if="itemOne.onType&&itemOne.buildFloorVoList[0]"
  26. src="@/assets/ZDimages/evacuation3_2/icon_bjgl_xjt.png" @click="terrClick(itemOne)">
  27. <p class="name-p" :class="checkTreeId==itemOne.id?'check-color':''" @click="clickCheckTree(itemOne,2)">
  28. {{itemOne.name}}</p>
  29. </div>
  30. <div v-if="itemOne.onType" class="terr-min-box" v-for="(itemTwo,indexTwo) in itemOne.buildFloorVoList"
  31. :key="indexTwo">
  32. <p class="min-name" :class="checkTreeId==itemTwo.id?'check-color':''"
  33. @click="clickCheckTree(itemTwo,3)">{{itemTwo.name}}</p>
  34. </div>
  35. </div>
  36. </div>
  37. </div>
  38. <p class="tree-null-p" v-if="!treeList[0]">暂无数据</p>
  39. <p class="max-left-big-button" @click="handleCommand(3)">+ 新增校院</p>
  40. </div>
  41. <div class="max-right-box">
  42. <div class="school-box" v-if="checkTreeType == 1">
  43. <div class="max-right-button-box">
  44. <p class="null-p"></p>
  45. <p class="max-right-big-button" @click="handleCommand(4)">+ 新增楼栋</p>
  46. </div>
  47. <div class="right-big-list-box scrollbar-box">
  48. <div class="for-max-box" v-for="(item,index) in buildingList" :key="index"
  49. @dragover.prevent="dragoverPrevent(item)">
  50. <div class="for-big-box">
  51. <div class="for-big-box-left">
  52. <img src="@/assets/ZDimages/evacuation3_2/icon_bjgl_td.png" class="for-img-one"
  53. draggable="true"
  54. @dragstart="dragstartPlay($event)"
  55. @dragend="dragEnterOver($event, item)">
  56. <p class="for-text-one">{{item.name}}</p>
  57. <img src="@/assets/ZDimages/evacuation3_2/icon_bjgl_lcs.png" class="for-img-two">
  58. <div class="for-text-box-one">
  59. <p>{{item.floorNum}}</p>
  60. <p>楼层数</p>
  61. </div>
  62. <img src="@/assets/ZDimages/evacuation3_2/icon_bjgl_fj.png" class="for-img-three">
  63. <div class="for-text-box-two">
  64. <p>{{item.roomNum}}</p>
  65. <p>房间数</p>
  66. </div>
  67. </div>
  68. <div class="for-button-min-box">
  69. <div @click="handleCommand(5,item)">
  70. <img src="@/assets/ZDimages/evacuation3_2/icon_znwl_bj.png">
  71. <p>编辑</p>
  72. </div>
  73. <div @click="handleCommand(6,item)">
  74. <img src="@/assets/ZDimages/evacuation3_2/icon_znwl_sc.png">
  75. <p>删除</p>
  76. </div>
  77. </div>
  78. </div>
  79. </div>
  80. <img class="null-img" v-if="!buildingList[0]" src="@/assets/ZDimages/null-data-1.png">
  81. </div>
  82. </div>
  83. <div class="building-box" v-if="checkTreeType == 2">
  84. <div class="max-right-button-box">
  85. <p class="null-p"></p>
  86. <p class="max-right-big-button" style="margin-right:20px;" @click="handleCommand(7)">+ 新增楼层</p>
  87. <p class="max-right-big-button" @click="floorZK(1)">{{floorZkType==1?'一键收起':'一键展开'}}</p>
  88. </div>
  89. <div class="right-big-list-box scrollbar-box">
  90. <div class="for-max-box" v-for="(item,index) in buildingList" :key="index"
  91. @dragover.prevent="dragoverPrevent(item)">
  92. <div class="for-big-box">
  93. <div class="for-big-box-left">
  94. <img src="@/assets/ZDimages/evacuation3_2/icon_bjgl_td.png" class="for-img-one"
  95. draggable="true"
  96. @dragstart="dragstartPlay($event)"
  97. @dragend="dragEnterOver($event, item)">
  98. <p class="for-text-one">{{item.name}}</p>
  99. </div>
  100. <div class="for-button-min-box">
  101. <div @click="handleCommand(8,item)">
  102. <img src="@/assets/ZDimages/evacuation3_2/icon_znwl_bj.png">
  103. <p>编辑</p>
  104. </div>
  105. <div @click="handleCommand(9,item)">
  106. <img src="@/assets/ZDimages/evacuation3_2/icon_znwl_sc.png">
  107. <p>删除</p>
  108. </div>
  109. <div @click="floorZK(2,index)">
  110. <img src="@/assets/ZDimages/evacuation3_2/icon_bjgl_zk.png">
  111. <p>{{item.onType?'收起':'展开'}}</p>
  112. </div>
  113. </div>
  114. </div>
  115. <div v-if="item.onType">
  116. <div class="layout-data-max-big-box"
  117. v-if="item.layoutData">
  118. <div class="layout-data-max-big-min-box"
  119. :style="'width:'+item.width+'px;height:'+item.height+'px;transform: scale('+item.zoomData+');margin-top:-'+item.height/2+'px;margin-left:-'+item.width/2+'px;'">
  120. <div class="layout-data-max-min-box"
  121. :style="'width:'+item.width+'px;height:'+item.height+'px;'">
  122. <div class="map-max-for-box"
  123. v-for="(bigItem,index) in item.mapList" :key="index"
  124. :class="bigItem.type == 2?'for-map-box-one':''"
  125. :style="'top:'+bigItem.y+'px;left:'+bigItem.x+'px;width:'+bigItem.w+'px;height:'+bigItem.h+'px;'">
  126. <div class="map-max-for-left-box"></div>
  127. <div class="map-max-for-center-box">
  128. <div class="map-max-for-center-min-left"></div>
  129. <div class="map-max-for-center-min-center"
  130. :class="bigItem.type == 2?'for-map-box-one':(bigItem.type == 1?'for-map-box':(bigItem.type == 3?'for-map-box-two':''))">
  131. <div class="min-text-box" v-if="bigItem.type==1">{{bigItem.roomNum}}</div>
  132. <div v-if="bigItem.type == 1"
  133. :class="minItem.toward=='top'?'center-move-door-p-t':(minItem.toward=='bottom'?'center-move-door-p-b':(minItem.toward=='left'?'center-move-door-p-l':(minItem.toward=='right'?'center-move-door-p-r':'')))"
  134. v-for="(minItem,minIndex) in bigItem.doorList" :key="minIndex"
  135. :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
  136. <div v-if="bigItem.type == 3"
  137. :class="minItem.toward=='top'?'center-move-door-p-t-ss':(minItem.toward=='bottom'?'center-move-door-p-b-ss':(minItem.toward=='left'?'center-move-door-p-l-ss':(minItem.toward=='right'?'center-move-door-p-r-ss':'')))"
  138. v-for="(minItem,minIndex) in bigItem.doorList" :key="minIndex"
  139. :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
  140. <div @click="lighButton(minItem)"
  141. :class="minItem.state=='1'?'lightTop':(minItem.state=='2'?'lightBottom':(minItem.state=='3'?'lightLeft':(minItem.state=='4'?'lightRight':'')))"
  142. v-for="(minItem,minIndex) in bigItem.lightList" :key="minIndex"
  143. :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
  144. </div>
  145. <div class="map-max-for-center-min-right"></div>
  146. </div>
  147. <div class="map-max-for-right-box"></div>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. <div class="layout-data-max-big-null-box" v-else>
  153. <img src="@/assets/ZDimages/evacuation3_2/icon_wsctp.png">
  154. <div>
  155. <p></p>
  156. <p>暂未设置房间布局</p>
  157. <p @click="clickPage(2,item)">设置布局</p>
  158. <p></p>
  159. </div>
  160. </div>
  161. </div>
  162. </div>
  163. <img class="null-img" v-if="!buildingList[0]" src="@/assets/ZDimages/null-data-1.png">
  164. </div>
  165. </div>
  166. <div class="floor-box" v-if="checkTreeType == 3">
  167. <div class="map-max-big-box">
  168. <div class="layout-data-max-big-box" v-if="buildingList.layoutData">
  169. <div class="layout-data-max-big-min-box"
  170. :style="'width:'+buildingList.width+'px;height:'+buildingList.height+'px;transform: scale('+buildingList.zoomData+');margin-top:-'+buildingList.height/2+'px;margin-left:-'+buildingList.width/2+'px;'">
  171. <div class="layout-data-max-min-box"
  172. :style="'width:'+buildingList.width+'px;height:'+buildingList.height+'px;'">
  173. <div class="map-max-for-box"
  174. v-for="(item,index) in buildingList.mapList" :key="index"
  175. :class="item.type == 2?'for-map-box-one':''"
  176. :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
  177. <div class="map-max-for-left-box"></div>
  178. <div class="map-max-for-center-box">
  179. <div class="map-max-for-center-min-left"></div>
  180. <div class="map-max-for-center-min-center"
  181. :class="item.type == 2?'for-map-box-one':(item.type == 1?'for-map-box':(item.type == 3?'for-map-box-two':''))">
  182. <div class="min-text-box" v-if="item.type==1">{{item.roomNum}}</div>
  183. <div v-if="item.type == 1"
  184. :class="minItem.toward=='top'?'center-move-door-p-t':(minItem.toward=='bottom'?'center-move-door-p-b':(minItem.toward=='left'?'center-move-door-p-l':(minItem.toward=='right'?'center-move-door-p-r':'')))"
  185. v-for="(minItem,minIndex) in item.doorList" :key="minIndex"
  186. :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
  187. <div v-if="item.type == 3"
  188. :class="minItem.toward=='top'?'center-move-door-p-t-ss':(minItem.toward=='bottom'?'center-move-door-p-b-ss':(minItem.toward=='left'?'center-move-door-p-l-ss':(minItem.toward=='right'?'center-move-door-p-r-ss':'')))"
  189. v-for="(minItem,minIndex) in item.doorList" :key="minIndex"
  190. :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
  191. <div @click="lighButton(minItem)"
  192. :class="minItem.state=='1'?'lightTop':(minItem.state=='2'?'lightBottom':(minItem.state=='3'?'lightLeft':(minItem.state=='4'?'lightRight':'')))"
  193. v-for="(minItem,minIndex) in item.lightList" :key="minIndex"
  194. :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
  195. </div>
  196. <div class="map-max-for-center-min-right"></div>
  197. </div>
  198. <div class="map-max-for-right-box"></div>
  199. </div>
  200. </div>
  201. </div>
  202. </div>
  203. <div class="layout-data-max-big-null-box" v-else>
  204. <img src="@/assets/ZDimages/evacuation3_2/icon_wsctp.png">
  205. <div>
  206. <p></p>
  207. <p>暂未设置房间布局</p>
  208. <p @click="clickPage(2,buildingList)">设置布局</p>
  209. <p></p>
  210. </div>
  211. </div>
  212. <p class="position-button-p" @click="clickPage(2,buildingList)" v-if="buildingList.layoutData">设置布局</p>
  213. </div>
  214. <div class="table-box">
  215. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
  216. <el-form-item label="关键字" prop="searchValue" style="margin-right:20px;margin-bottom:20px;">
  217. <el-input
  218. v-model="queryParams.searchValue"
  219. placeholder="请输入关键字"
  220. clearable
  221. size="small"
  222. />
  223. </el-form-item>
  224. <el-form-item label="房间类型" prop="roomType" style="margin-right:20px;margin-bottom:20px;">
  225. <el-select v-model="queryParams.roomType" placeholder="请选择房间类型"
  226. style="margin-right:20px;margin-bottom:20px;">
  227. <el-option
  228. v-for="dict in roomTypeOptions"
  229. :key="dict.dictValue"
  230. :label="dict.dictLabel"
  231. :value="dict.dictValue">
  232. </el-option>
  233. </el-select>
  234. </el-form-item>
  235. <el-form-item>
  236. <p class="inquire-button-one" @click="handleQuery" style="margin-right:20px;margin-bottom:20px;">查询</p>
  237. <p class="reset-button-one" @click="resetQuery">重置</p>
  238. </el-form-item>
  239. </el-form>
  240. <el-table border :data="dataList">
  241. <el-table-column label="房间号" align="left" prop="roomNum" width="100"/>
  242. <el-table-column label="房间名称" align="left" prop="roomName">
  243. <template slot-scope="scope">
  244. <span>{{scope.row.roomType!='-99'?scope.row.subName:scope.row.roomName}}</span>
  245. <!--<span>{{scope.row.roomType}}</span>-->
  246. </template>
  247. </el-table-column>
  248. <el-table-column label="房间类型" align="left" prop="roomType" width="200">
  249. <template slot-scope="scope">
  250. <span v-for="(item,index) in roomTypeOptions" :key="index" v-if="item.dictValue == scope.row.roomType">{{item.dictLabel}}</span>
  251. </template>
  252. </el-table-column>
  253. <el-table-column label="创建人" align="left" prop="createBy" width="200"/>
  254. <el-table-column label="创建时间" align="left" prop="createTime" width="200"/>
  255. <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="100">
  256. <template slot-scope="scope">
  257. <div class="button-box" style="display: flex">
  258. <p class="table-min-button" @click="roomClick(1,scope.row)">编辑</p>
  259. </div>
  260. </template>
  261. </el-table-column>
  262. </el-table>
  263. <pagination
  264. style="margin-top:20px;"
  265. v-show="total>0"
  266. :total="total"
  267. :page.sync="queryParams.pageNum"
  268. :limit.sync="queryParams.pageSize"
  269. @pagination="getList"
  270. />
  271. </div>
  272. </div>
  273. </div>
  274. <!-- 新增/编辑院校 -->
  275. <el-dialog :title="dialogTitle" v-if="dialogOpen" :visible.sync="dialogOpen" width="600px" append-to-body>
  276. <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="110px">
  277. <el-form-item label="院校名称:" prop="nameOne">
  278. <el-input v-model="dialogForm.nameOne" maxlength="10" placeholder="请输入院校名称"
  279. :disabled="dialogType==2 || dialogType==22 || dialogType==3 || dialogType==33"/>
  280. </el-form-item>
  281. <el-form-item label="楼栋名称:" prop="nameTwo"
  282. v-if="dialogType==2 || dialogType==22 || dialogType==3 || dialogType==33">
  283. <el-input v-model="dialogForm.nameTwo" maxlength="10" placeholder="请输入楼栋名称"
  284. :disabled="dialogType==3 || dialogType==33"/>
  285. </el-form-item>
  286. <el-form-item label="楼层名称:" prop="nameThree" v-if="dialogType==3 || dialogType==33">
  287. <el-input v-model="dialogForm.nameThree" maxlength="10" placeholder="请输入楼层名称"/>
  288. </el-form-item>
  289. <el-form-item label="排序序号:" prop="sortNo" class="dialog-sort-no-form-item-box">
  290. <el-input-number v-model="dialogForm.sortNo" :min="0" :max="999" placeholder="请输入排序序号" :controls="false"
  291. style="width:450px;"></el-input-number>
  292. </el-form-item>
  293. </el-form>
  294. <div slot="footer" class="dialog-footer">
  295. <div style="display: flex">
  296. <p style="flex:1;"></p>
  297. <p
  298. style="cursor:pointer;border-radius:6px;width:70px;line-height:30px;font-size:12px;text-align:center;margin-right:17px;color:#999999;background:#E0E0E0;"
  299. @click="cancel">取消</p>
  300. <p
  301. style="cursor:pointer;border-radius:6px;width:70px;line-height:30px;font-size:12px;text-align:center;color:#fff;background:#0045AF;"
  302. @click="submitForm">确定</p>
  303. <p style="flex:1;"></p>
  304. </div>
  305. </div>
  306. </el-dialog>
  307. <el-dialog title="房间配置" v-if="dialogOpenRoom" :visible.sync="dialogOpenRoom" width="800px" append-to-body class="building-dialog-box">
  308. <el-form ref="roomDialogForm" :model="roomDialogForm" :rules="rules" label-width="110px">
  309. <el-form-item label="楼栋名称:" prop="buildName">
  310. <el-input v-model="roomDialogForm.buildName" maxlength="10" placeholder="请输入楼栋名称" disabled style="width:575px;"/>
  311. </el-form-item>
  312. <el-form-item label="楼层名称:" prop="floorName">
  313. <el-input v-model="roomDialogForm.floorName" maxlength="10" placeholder="请输入楼层名称" disabled style="width:575px;"/>
  314. </el-form-item>
  315. <el-form-item label="房间类型:" prop="roomType">
  316. <el-select v-model="roomDialogForm.roomType" placeholder="请选择房间类型" style="width:575px;">
  317. <el-option
  318. v-for="dict in roomTypeOptions"
  319. :key="dict.dictValue"
  320. :label="dict.dictLabel"
  321. :value="dict.dictValue">
  322. </el-option>
  323. </el-select>
  324. </el-form-item>
  325. <el-form-item label="房间号:" prop="roomNum">
  326. <el-input v-model="roomDialogForm.roomNum" maxlength="10" placeholder="请输入房间号" style="width:575px;"/>
  327. </el-form-item>
  328. <el-form-item label="房间名称:" prop="roomName" v-if="roomDialogForm.roomType == '-99'">
  329. <el-input v-model="roomDialogForm.roomName" maxlength="10" placeholder="请输入房间名称" style="width:575px;"/>
  330. </el-form-item>
  331. <el-form-item label="房间选择:" prop="subId" v-if="roomDialogForm.roomType != '-99'">
  332. <el-select
  333. style="width:575px;"
  334. v-model="roomDialogForm.subId"
  335. filterable
  336. remote
  337. reserve-keyword
  338. @focus="selectFocus"
  339. placeholder="请选择房间"
  340. :remote-method="userSelectList"
  341. :loading="loading">
  342. <el-option
  343. v-for="item in subjectOptions"
  344. :key="item.id"
  345. :label="item.name"
  346. :value="item.id">
  347. </el-option>
  348. </el-select>
  349. </el-form-item>
  350. <el-form-item label="房间位置:">
  351. <div class="map-max-big-box">
  352. <div class="layout-data-max-big-box">
  353. <div class="layout-data-max-big-min-box"
  354. :style="'width:'+dialogBuildingData.width+'px;height:'+dialogBuildingData.height+'px;transform: scale('+minZoomData+');margin-top:-'+dialogBuildingData.height/2+'px;margin-left:-'+dialogBuildingData.width/2+'px;'">
  355. <div class="layout-data-max-min-box"
  356. :style="'width:'+dialogBuildingData.width+'px;height:'+dialogBuildingData.height+'px;'">
  357. <div class="map-max-for-box"
  358. v-for="(item,index) in dialogBuildingData.mapList" :key="index"
  359. :class="item.type == 2?'for-map-box-one':''"
  360. :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
  361. <div class="map-max-for-left-box"></div>
  362. <div class="map-max-for-center-box">
  363. <div class="map-max-for-center-min-left"></div>
  364. <div class="map-max-for-center-min-center"
  365. :class="item.type == 2?'for-map-box-one':(item.type == 1 &&item.checkType?'for-map-box-three':(item.type == 3?'for-map-box-two':(item.type == 1?'for-map-box':'')))">
  366. <div class="min-text-box" v-if="item.type==1">{{item.roomNum}}</div>
  367. <div v-if="item.type == 1"
  368. :class="minItem.toward=='top'?'center-move-door-p-t':(minItem.toward=='bottom'?'center-move-door-p-b':(minItem.toward=='left'?'center-move-door-p-l':(minItem.toward=='right'?'center-move-door-p-r':'')))"
  369. v-for="(minItem,minIndex) in item.doorList" :key="minIndex"
  370. :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
  371. <div v-if="item.type == 3"
  372. :class="minItem.toward=='top'?'center-move-door-p-t-ss':(minItem.toward=='bottom'?'center-move-door-p-b-ss':(minItem.toward=='left'?'center-move-door-p-l-ss':(minItem.toward=='right'?'center-move-door-p-r-ss':'')))"
  373. v-for="(minItem,minIndex) in item.doorList" :key="minIndex"
  374. :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
  375. <div @click="lighButton(minItem)"
  376. :class="minItem.state=='1'?'lightTop':(minItem.state=='2'?'lightBottom':(minItem.state=='3'?'lightLeft':(minItem.state=='4'?'lightRight':'')))"
  377. v-for="(minItem,minIndex) in item.lightList" :key="minIndex"
  378. :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
  379. </div>
  380. <div class="map-max-for-center-min-right"></div>
  381. </div>
  382. <div class="map-max-for-right-box"></div>
  383. </div>
  384. </div>
  385. </div>
  386. </div>
  387. </div>
  388. </el-form-item>
  389. </el-form>
  390. <div slot="footer" class="dialog-footer">
  391. <div style="display: flex">
  392. <p style="flex:1;"></p>
  393. <p
  394. style="cursor:pointer;border-radius:6px;width:70px;line-height:30px;font-size:12px;text-align:center;margin-right:17px;color:#999999;background:#E0E0E0;"
  395. @click="roomCancel">取消</p>
  396. <p
  397. style="cursor:pointer;border-radius:6px;width:70px;line-height:30px;font-size:12px;text-align:center;color:#fff;background:#0045AF;"
  398. @click="roomSubmitForm">确定</p>
  399. <p style="flex:1;"></p>
  400. </div>
  401. </div>
  402. </el-dialog>
  403. </div>
  404. <building-details :propsData="propsData" v-if="pageType == 2"></building-details>
  405. </div>
  406. </template>
  407. <script>
  408. import {
  409. getTreeList, getTreeSonList, addBuildFloor, putBuildFloor, delBuildFloor, editSortNum, buildFloorLayoutList,
  410. getBuildFloorLayout, putBuildFloorLayout, subjectList
  411. } from '@/api/evacuation3_2/index'
  412. import buildingManagement from './buildingManagement.vue'
  413. import buildingDetails from './buildingDetails.vue'
  414. export default {
  415. name: 'newIndex',
  416. components: {
  417. buildingManagement,
  418. buildingDetails
  419. },
  420. data() {
  421. return {
  422. pageType: 1,
  423. //拖拽起始Y点(用于计算朝向)
  424. clientY: null,
  425. clientId: null,
  426. //学校/楼栋/楼层
  427. treeList: [],
  428. //选中状态
  429. checkTreeId: null,
  430. checkTreeType: 1,
  431. buildingList: [],
  432. //楼层展开/关闭状态
  433. floorZkType: null, //1.全部展开 2.全部关闭 3.有关有开
  434. //编辑弹窗开关
  435. dialogOpen: false,
  436. dialogType: null,
  437. dialogTitle: '',
  438. // 表单参数
  439. dialogForm: {},
  440. roomDialogForm: {},
  441. //院校名称
  442. yxName: null,
  443. ldName: null,
  444. lcName: null,
  445. parentId: null,
  446. // 表单校验
  447. rules: {
  448. nameOne: [
  449. { required: true, message: '请输入院校名称', trigger: 'blur' },
  450. { required: true, message: '请输入院校名称', validator: this.spaceJudgment, trigger: 'blur' }
  451. ],
  452. nameTwo: [
  453. { required: true, message: '请输入楼栋名称', trigger: 'blur' },
  454. { required: true, message: '请输入楼栋名称', validator: this.spaceJudgment, trigger: 'blur' }
  455. ],
  456. nameThree: [
  457. { required: true, message: '请输入楼层名称', trigger: 'blur' },
  458. { required: true, message: '请输入楼层名称', validator: this.spaceJudgment, trigger: 'blur' }
  459. ],
  460. sortNo: [
  461. { required: true, message: '请输入排序序号', trigger: 'blur' },
  462. { required: true, message: '请输入排序序号', validator: this.spaceJudgment, trigger: 'blur' }
  463. ]
  464. },
  465. // 显示搜索条件
  466. showSearch: true,
  467. loading: false,
  468. //楼层查询数据
  469. queryParams: {},
  470. //楼层表单数据
  471. dataList: [],
  472. total: 10,
  473. //房间配置相关
  474. dialogOpenRoom: false,
  475. //房间类型列表
  476. roomTypeOptions: [],
  477. //实验室选择列表
  478. subjectOptions: [],
  479. //传参数据
  480. propsData: {},
  481. //缩放比例
  482. zoomData: null,
  483. minZoomData: null,
  484. dialogBuildingData:[]
  485. }
  486. },
  487. created() {
  488. },
  489. mounted() {
  490. this.getTreeList()
  491. this.getDicts('layout_room_type').then(response => {
  492. this.roomTypeOptions = response.data
  493. this.roomTypeOptions.push({ dictLabel: '其他', dictValue: '-99' })
  494. })
  495. },
  496. methods: {
  497. //新增学校/楼栋/楼层数据
  498. addBuildFloor(type) {
  499. this.$refs['dialogForm'].validate(valid => {
  500. if (valid) {
  501. //1.学校 2.楼栋 3.楼层
  502. let obj = {
  503. name: type == 1 ? this.dialogForm.nameOne : (type == 2 ? this.dialogForm.nameTwo : (type == 3 ? this.dialogForm.nameThree : '')),
  504. type: type,
  505. sortNo: this.dialogForm.sortNo,
  506. parentId: type == 1 ? 0 : this.checkTreeId
  507. }
  508. addBuildFloor(obj).then(response => {
  509. this.msgSuccess(response.msg)
  510. this.cancel()
  511. this.getTreeList()
  512. })
  513. }
  514. })
  515. },
  516. //编辑学校/楼栋/楼层数据
  517. putBuildFloor(type) {
  518. this.$refs['dialogForm'].validate(valid => {
  519. if (valid) {
  520. //1.学校 2.楼栋 3.楼层
  521. let obj = {
  522. id: this.dialogForm.id,
  523. name: type == 1 ? this.dialogForm.nameOne : (type == 2 ? this.dialogForm.nameTwo : (type == 3 ? this.dialogForm.nameThree : '')),
  524. type: type,
  525. sortNo: this.dialogForm.sortNo
  526. }
  527. putBuildFloor(obj).then(response => {
  528. this.msgSuccess(response.msg)
  529. this.cancel()
  530. this.getTreeList()
  531. })
  532. }
  533. })
  534. },
  535. //删除学校/楼栋/楼层数据
  536. delBuildFloor(id) {
  537. delBuildFloor(id).then(response => {
  538. this.msgSuccess(response.msg)
  539. this.getTreeList()
  540. })
  541. },
  542. //调整排序
  543. editSortNum(data) {
  544. editSortNum(data).then(response => {
  545. this.msgSuccess(response.msg)
  546. this.getTreeList()
  547. })
  548. },
  549. roomCancel() {
  550. this.$set(this, 'dialogOpenRoom', false)
  551. },
  552. roomSubmitForm() {
  553. this.$refs['roomDialogForm'].validate(valid => {
  554. if (valid) {
  555. let obj = {
  556. id: this.roomDialogForm.id,
  557. roomNum: this.roomDialogForm.roomNum,
  558. roomType: this.roomDialogForm.roomType
  559. }
  560. if (this.roomDialogForm.roomType == '-99') {
  561. obj.roomName = this.roomDialogForm.roomName
  562. } else {
  563. obj.subId = this.roomDialogForm.subId
  564. }
  565. putBuildFloorLayout(obj).then(response => {
  566. this.$set(this, 'dialogOpenRoom', false)
  567. this.msgSuccess(response.msg)
  568. let obj = {
  569. id: this.checkTreeId ,
  570. type: this.checkTreeType,
  571. parentId: this.parentId
  572. }
  573. this.getTreeSonList(obj)
  574. this.getList()
  575. })
  576. }
  577. })
  578. },
  579. // 取消按钮
  580. cancel() {
  581. this.$set(this, 'dialogOpen', false)
  582. this.$set(this, 'dialogForm', {})
  583. this.$set(this, 'dialogType', null)
  584. },
  585. //确定按钮
  586. submitForm() {
  587. if (this.dialogType == 1) {
  588. //新增
  589. this.addBuildFloor(1)
  590. } else if (this.dialogType == 11) {
  591. //编辑
  592. this.putBuildFloor(1)
  593. } else if (this.dialogType == 2) {
  594. //新增
  595. this.addBuildFloor(2)
  596. } else if (this.dialogType == 22) {
  597. //编辑
  598. this.putBuildFloor(2)
  599. } else if (this.dialogType == 3) {
  600. //新增
  601. this.addBuildFloor(3)
  602. } else if (this.dialogType == 33) {
  603. //编辑
  604. this.putBuildFloor(3)
  605. }
  606. },
  607. //楼栋弹出下啦列表选中事件
  608. handleCommand(command, item) {
  609. let self = this
  610. if (command == 1) {
  611. //编辑院校
  612. this.$set(this, 'dialogTitle', '编辑院校')
  613. this.$set(this, 'dialogForm', {
  614. id: item.id,
  615. nameOne: item.name,
  616. sortNo: item.sortNo
  617. })
  618. this.$set(this, 'dialogType', 11)
  619. this.$set(this, 'dialogOpen', true)
  620. } else if (command == 2) {
  621. //删除院校
  622. this.$confirm('确定要删除该院校吗?', '警告', {
  623. confirmButtonText: '确定',
  624. cancelButtonText: '取消',
  625. type: 'warning'
  626. }).then(function() {
  627. self.delBuildFloor(item.id)
  628. }).then(() => {
  629. }).catch(() => {
  630. })
  631. } else if (command == 3) {
  632. //新增院校
  633. this.$set(this, 'dialogForm', {})
  634. this.$set(this, 'dialogTitle', '新增院校')
  635. this.$set(this, 'dialogType', 1)
  636. this.$set(this, 'dialogOpen', true)
  637. } else if (command == 4) {
  638. //新增楼栋
  639. this.$set(this, 'dialogForm', {
  640. nameOne: this.yxName
  641. })
  642. this.$set(this, 'dialogTitle', '新增楼栋')
  643. this.$set(this, 'dialogType', 2)
  644. this.$set(this, 'dialogOpen', true)
  645. } else if (command == 5) {
  646. //编辑楼栋
  647. this.$set(this, 'dialogForm', {
  648. id: item.id,
  649. nameOne: this.yxName,
  650. nameTwo: item.name,
  651. sortNo: item.sortNo
  652. })
  653. this.$set(this, 'dialogTitle', '编辑楼栋')
  654. this.$set(this, 'dialogType', 22)
  655. this.$set(this, 'dialogOpen', true)
  656. } else if (command == 6) {
  657. //删除楼栋
  658. this.$confirm('确定要删除该楼栋吗?', '警告', {
  659. confirmButtonText: '确定',
  660. cancelButtonText: '取消',
  661. type: 'warning'
  662. }).then(function() {
  663. self.delBuildFloor(item.id)
  664. }).then(() => {
  665. }).catch(() => {
  666. })
  667. } else if (command == 7) {
  668. //新增楼层
  669. this.$set(this, 'dialogForm', {
  670. nameOne: this.yxName,
  671. nameTwo: this.ldName
  672. })
  673. this.$set(this, 'dialogTitle', '新增楼层')
  674. this.$set(this, 'dialogType', 3)
  675. this.$set(this, 'dialogOpen', true)
  676. } else if (command == 8) {
  677. //编辑楼层
  678. this.$set(this, 'dialogForm', {
  679. id: item.id,
  680. nameOne: this.yxName,
  681. nameTwo: this.ldName,
  682. nameThree: item.name,
  683. sortNo: item.sortNo
  684. })
  685. this.$set(this, 'dialogTitle', '编辑楼层')
  686. this.$set(this, 'dialogType', 33)
  687. this.$set(this, 'dialogOpen', true)
  688. } else if (command == 9) {
  689. //删除楼层
  690. this.$confirm('确定要删除该楼层吗?', '警告', {
  691. confirmButtonText: '确定',
  692. cancelButtonText: '取消',
  693. type: 'warning'
  694. }).then(function() {
  695. self.delBuildFloor(item.id)
  696. }).then(() => {
  697. }).catch(() => {
  698. })
  699. }
  700. },
  701. //获取学校/楼栋/楼层数据
  702. getTreeList() {
  703. getTreeList().then(response => {
  704. if (response.data[0]) {
  705. for (let i = 0; i < response.data.length; i++) {
  706. for (let o = 0; o < response.data[i].buildFloorVoList.length; o++) {
  707. response.data[i].buildFloorVoList[o].onType = true
  708. }
  709. }
  710. this.$set(this, 'treeList', response.data)
  711. if (!this.checkTreeId) {
  712. this.$set(this, 'checkTreeId', response.data[0].id)
  713. this.$set(this, 'yxName', response.data[0].name)
  714. this.$set(this, 'parentId', response.data[0].parentId)
  715. }
  716. let obj = {
  717. id: this.checkTreeId ? this.checkTreeId : response.data[0].id,
  718. type: 1,
  719. parentId: this.parentId ? this.parentId : 0
  720. }
  721. this.getTreeSonList(obj)
  722. }
  723. })
  724. },
  725. //获取校区/楼栋/楼层详情数据
  726. getTreeSonList(data) {
  727. getTreeSonList(data).then(response => {
  728. if (this.checkTreeType == 1) {
  729. this.$set(this, 'buildingList', response.rows)
  730. } else if (this.checkTreeType == 2) {
  731. for (let i = 0; i < response.rows.length; i++) {
  732. response.rows[i].onType = false
  733. if (response.rows[i].layoutData) {
  734. response.rows[i].mapList = JSON.parse(response.rows[i].layoutData)
  735. let obj = this.calculateMapMax(response.rows[i].mapList,380,1180)
  736. response.rows[i].width = obj.maxWidth
  737. response.rows[i].height = obj.maxHeight
  738. response.rows[i].zoomData = obj.zoomData
  739. }
  740. }
  741. this.$set(this, 'buildingList', response.rows)
  742. this.floorZkFor()
  743. } else if (this.checkTreeType == 3) {
  744. if (response.rows[0].layoutData) {
  745. response.rows[0].mapList = JSON.parse(response.rows[0].layoutData)
  746. let obj = this.calculateMapMax(response.rows[0].mapList,380,1180)
  747. response.rows[0].width = obj.maxWidth
  748. response.rows[0].height = obj.maxHeight
  749. response.rows[0].zoomData = obj.zoomData
  750. }
  751. this.$set(this, 'queryParams', {
  752. searchValue: '',
  753. roomType: '',
  754. pageNum: 1,
  755. pageSize: 10
  756. })
  757. this.getList()
  758. this.$set(this, 'buildingList', response.rows[0])
  759. }
  760. })
  761. },
  762. //获取楼层实验室数据列表
  763. getList() {
  764. this.queryParams.floorId = this.checkTreeId
  765. buildFloorLayoutList(this.queryParams).then(response => {
  766. this.dataList = response.rows
  767. this.total = response.total
  768. })
  769. },
  770. //页面切换
  771. clickPage(type, item) {
  772. if (type == 1) {
  773. this.$set(this, 'pageType', type)
  774. } else if (type == 2) {
  775. this.$set(this, 'propsData', item)
  776. this.$set(this, 'pageType', type)
  777. }else if(type == 3){
  778. this.$set(this, 'pageType', 1)
  779. let obj = {
  780. id: this.checkTreeId ,
  781. type: this.checkTreeType,
  782. parentId: this.parentId
  783. }
  784. this.getTreeSonList(obj)
  785. }
  786. },
  787. //懒加载实验室
  788. userSelectList(e) {
  789. subjectList({ name: e }).then(response => {
  790. this.subjectOptions = response.data
  791. this.subjectOptions.push({ id: this.roomDialogForm.subId, name: this.roomDialogForm.subName })
  792. })
  793. },
  794. selectFocus() {
  795. console.log('123')
  796. },
  797. //房间操作按钮
  798. roomClick(type, item) {
  799. //查询房间实验室详情
  800. getBuildFloorLayout(item.id).then(response => {
  801. let obj = {
  802. id: response.data.id,
  803. buildName: response.data.buildName,
  804. floorName: response.data.floorName,
  805. roomNum: response.data.roomNum,
  806. roomType: response.data.roomType + '',
  807. pointName: response.data.pointName
  808. }
  809. if (response.data.roomType == '-99') {
  810. obj.roomName = response.data.roomName
  811. } else {
  812. obj.subId = response.data.subId
  813. obj.subName = response.data.subName
  814. }
  815. //根据返回实验室名称查询实验室选择列表回填
  816. this.$set(this, 'roomDialogForm', obj)
  817. this.$set(this, 'subjectOptions', [{ id: response.data.subId, name: response.data.subName }])
  818. let newData = JSON.parse(JSON.stringify(this.buildingList));
  819. for(let i=0;i<newData.mapList.length;i++){
  820. console.log('response.data.subId',response.data.subId)
  821. console.log('newData.mapList[i].subId',newData.mapList[i].subId)
  822. console.log('response.data.roomName',response.data.roomName)
  823. console.log('newData.mapList[i].roomName',newData.mapList[i].roomName)
  824. if( response.data.subId == newData.mapList[i].subId || response.data.roomName == newData.mapList[i].roomName){
  825. newData.mapList[i].checkType = true;
  826. }else{
  827. newData.mapList[i].checkType = false;
  828. }
  829. }
  830. let newObj = this.calculateMapMax(newData.mapList,260,550,'min')
  831. newData.width = newObj.maxWidth
  832. newData.height = newObj.maxHeight
  833. newData.zoomData = newObj.zoomData
  834. this.$set(this,'dialogBuildingData',newData);
  835. this.dialogOpenRoom = true
  836. })
  837. },
  838. //树状结构选中
  839. clickCheckTree(item, type) {
  840. if (item.id != this.checkTreeId) {
  841. this.$set(this, 'checkTreeId', item.id)
  842. this.$set(this, 'checkTreeType', type)
  843. if (type == 1) {
  844. this.$set(this, 'yxName', item.name)
  845. this.$set(this, 'buildingList', [])
  846. } else if (type == 2) {
  847. this.$set(this, 'ldName', item.name)
  848. this.$set(this, 'buildingList', [])
  849. } else if (type == 3) {
  850. this.$set(this, 'lcName', item.name)
  851. this.$set(this, 'buildingList', {})
  852. }
  853. let obj = {
  854. id: item.id,
  855. type: type,
  856. parentId: item.parentId
  857. }
  858. this.$set(this,'parentId',item.parentId);
  859. this.getTreeSonList(obj)
  860. }
  861. },
  862. //树状结构展开收回
  863. terrClick(itemOne) {
  864. itemOne.onType = !itemOne.onType
  865. },
  866. //展开/收起开关
  867. floorZK(type, index) {
  868. let self = this
  869. //type等于1时全部开关功能 等于2时单个开关
  870. if (type == 1) {
  871. let list = JSON.parse(JSON.stringify(self.buildingList))
  872. for (let i = 0; i < list.length; i++) {
  873. if (self.floorZkType == 1) {
  874. list[i].onType = false
  875. } else if (self.floorZkType == 2) {
  876. list[i].onType = true
  877. } else if (self.floorZkType == 3) {
  878. list[i].onType = true
  879. }
  880. }
  881. this.$set(this, 'buildingList', list)
  882. this.floorZkFor()
  883. } else if (type == 2) {
  884. this.$set(this.buildingList[index], 'onType', this.buildingList[index].onType ? false : true)
  885. this.floorZkFor()
  886. }
  887. },
  888. //层展开关闭判断
  889. floorZkFor() {
  890. let self = this
  891. let numOne = 0
  892. let numTwo = 0
  893. for (let i = 0; i < self.buildingList.length; i++) {
  894. if (self.buildingList[i].onType) {
  895. numOne++
  896. } else {
  897. numTwo++
  898. }
  899. }
  900. if (numOne == self.buildingList.length) {
  901. this.$set(this, 'floorZkType', 1)
  902. } else if (numTwo == self.buildingList.length) {
  903. this.$set(this, 'floorZkType', 2)
  904. } else {
  905. this.$set(this, 'floorZkType', 3)
  906. }
  907. console.log('self.buildingList',self.buildingList)
  908. console.log('self.buildingList.length',self.buildingList.length)
  909. console.log('numOne',numOne)
  910. console.log('numTwo',numTwo)
  911. console.log('floorZkFor',this.floorZkType)
  912. },
  913. //拖拽抓取时触发
  914. dragstartPlay(event) {
  915. this.$set(this, 'clientY', event.clientY)
  916. },
  917. //拖拽途径触发
  918. dragoverPrevent(item) {
  919. this.$set(this, 'clientId', item.id)
  920. },
  921. //拖拽释放触发
  922. dragEnterOver(event, item) {
  923. let self = this
  924. let newList = []
  925. if (this.clientId && item.id != this.clientId) {
  926. let list = []
  927. let obj = null
  928. for (let i = 0; i < self.buildingList.length; i++) {
  929. if (self.buildingList[i].id == item.id) {
  930. obj = JSON.parse(JSON.stringify(self.buildingList[i]))
  931. }
  932. }
  933. if (event.clientY > this.clientY) {
  934. for (let i = 0; i < self.buildingList.length; i++) {
  935. if (self.buildingList[i].id != item.id && self.buildingList[i].id != this.clientId) {
  936. list.push(self.buildingList[i])
  937. } else if (self.buildingList[i].id == this.clientId) {
  938. list.push(self.buildingList[i])
  939. list.push(obj)
  940. }
  941. }
  942. } else if (event.clientY < this.clientY) {
  943. for (let i = 0; i < self.buildingList.length; i++) {
  944. if (self.buildingList[i].id == this.clientId) {
  945. list.push(obj)
  946. list.push(self.buildingList[i])
  947. } else if (self.buildingList[i].id != item.id && self.buildingList[i].id != this.clientId) {
  948. list.push(self.buildingList[i])
  949. }
  950. }
  951. }
  952. for (let i = 0; i < list.length; i++) {
  953. newList.push({ id: list[i].id, sortNo: i })
  954. }
  955. // this.$set(this,'buildingList',list);
  956. this.$set(this, 'clientId', null)
  957. this.editSortNum(newList)
  958. }
  959. },
  960. /** 搜索按钮操作 */
  961. handleQuery() {
  962. this.$set(this.queryParams, 'pageNum', 1)
  963. this.getList()
  964. },
  965. /** 重置按钮操作 */
  966. resetQuery() {
  967. this.$set(this, 'queryParams', {
  968. searchValue: '',
  969. roomType: '',
  970. pageNum: 1,
  971. pageSize: 10
  972. })
  973. this.handleQuery()
  974. },
  975. //计算布局最大尺寸
  976. calculateMapMax(list, height,width,type) {
  977. //基础参数
  978. let maxWidth = 0
  979. let maxHeight = 0
  980. let zoomData = 1;
  981. //参数处理
  982. for (let i = 0; i < list.length; i++) {
  983. if ((list[i].x + list[i].w) > maxWidth) {
  984. maxWidth = list[i].x + list[i].w
  985. }
  986. if ((list[i].y + list[i].h) > maxHeight) {
  987. maxHeight = list[i].y + list[i].h
  988. }
  989. }
  990. //处理等值数据
  991. if(maxHeight == height){
  992. maxHeight++
  993. }
  994. if(maxWidth == width){
  995. maxWidth++
  996. }
  997. //缩放判断
  998. if(maxHeight>height&&maxWidth>width){
  999. if((maxHeight-height)>(maxWidth-width)){
  1000. zoomData = height/maxHeight;
  1001. this.$set(this,'zoomData',height/maxHeight);
  1002. if(type == 'min'){
  1003. this.$set(this,'minZoomData',height/maxHeight);
  1004. }
  1005. }else{
  1006. zoomData = width / maxWidth;
  1007. this.$set(this,'zoomData',width / maxWidth);
  1008. if(type == 'min'){
  1009. this.$set(this,'minZoomData',width / maxWidth);
  1010. }
  1011. }
  1012. }else if(maxHeight<height&&maxWidth<width){
  1013. if((height-maxHeight)>(width-maxWidth)){
  1014. zoomData = width / maxWidth;
  1015. this.$set(this,'zoomData',width / maxWidth);
  1016. if(type == 'min'){
  1017. this.$set(this,'minZoomData',width / maxWidth);
  1018. }
  1019. }else{
  1020. zoomData = height / maxHeight;
  1021. this.$set(this,'zoomData',height / maxHeight);
  1022. if(type == 'min'){
  1023. this.$set(this,'minZoomData',height / maxHeight);
  1024. }
  1025. }
  1026. }else if(maxHeight<height&&maxWidth>width){
  1027. zoomData = width / maxWidth;
  1028. this.$set(this,'zoomData',width / maxWidth);
  1029. if(type == 'min'){
  1030. this.$set(this,'minZoomData',width / maxWidth);
  1031. }
  1032. }else if(maxHeight>height&&maxWidth<width){
  1033. zoomData = height / maxHeight;
  1034. this.$set(this,'zoomData',height / maxHeight);
  1035. if(type == 'min'){
  1036. this.$set(this,'minZoomData',height / maxHeight);
  1037. }
  1038. }
  1039. return { maxWidth: maxWidth, maxHeight: maxHeight,zoomData:zoomData }
  1040. }
  1041. }
  1042. }
  1043. </script>
  1044. <style scoped lang="scss">
  1045. .building {
  1046. flex: 1;
  1047. display: flex !important;
  1048. flex-direction: column;
  1049. overflow: hidden;
  1050. * {
  1051. margin: 0;
  1052. font-weight: 500;
  1053. }
  1054. .buildingManagement {
  1055. flex: 1;
  1056. display: flex !important;
  1057. overflow: hidden;
  1058. padding: 22px 28px 22px 32px;
  1059. .max-left-box {
  1060. width: 281px;
  1061. border-right: 1px dashed #A2A2A2;
  1062. display: flex;
  1063. flex-direction: column;
  1064. .tree-null-p {
  1065. text-align: center;
  1066. line-height: 100px;
  1067. flex: 1;
  1068. color: #999;
  1069. }
  1070. .tree-box {
  1071. flex: 1;
  1072. .terr-max-box {
  1073. margin-top: 20px;
  1074. .max-name-box {
  1075. display: flex;
  1076. margin-right: 20px;
  1077. margin-bottom: 10px;
  1078. color: #D8D8D8;
  1079. font-size: 20px;
  1080. .max-name {
  1081. flex: 1;
  1082. margin-right: 19px;
  1083. color: #333;
  1084. font-size: 16px;
  1085. line-height: 16px;
  1086. margin-top: 3px;
  1087. cursor: pointer;
  1088. }
  1089. }
  1090. .terr-big-box {
  1091. margin-left: 30px;
  1092. .big-name-box {
  1093. cursor: pointer;
  1094. height: 40px;
  1095. line-height: 40px;
  1096. display: flex;
  1097. font-size: 16px;
  1098. color: #333;
  1099. img {
  1100. width: 16px;
  1101. height: 16px;
  1102. margin-top: 12px;
  1103. margin-right: 4px;
  1104. }
  1105. .name-p {
  1106. flex: 1;
  1107. }
  1108. }
  1109. .terr-min-box {
  1110. margin-left: 30px;
  1111. .min-name {
  1112. cursor: pointer;
  1113. height: 40px;
  1114. line-height: 40px;
  1115. display: flex;
  1116. font-size: 16px;
  1117. color: #333;
  1118. }
  1119. }
  1120. }
  1121. .check-color {
  1122. color: #0183FA !important;
  1123. }
  1124. }
  1125. }
  1126. .max-left-big-button {
  1127. color: #0183FA;
  1128. border: 1px dashed #0183FA;
  1129. -webkit-border-radius: 6px;
  1130. -moz-border-radius: 6px;
  1131. border-radius: 6px;
  1132. width: 180px;
  1133. line-height: 40px;
  1134. margin: 20px 0 20px 40px;
  1135. text-align: center;
  1136. font-size: 14px;
  1137. cursor: pointer;
  1138. }
  1139. .max-left-big-button:hover {
  1140. color: #fff;
  1141. background: #0183FA;
  1142. border: 1px solid #0183FA;
  1143. }
  1144. }
  1145. .max-right-box {
  1146. flex: 1;
  1147. display: flex;
  1148. flex-direction: column;
  1149. overflow: hidden;
  1150. .school-box {
  1151. flex: 1;
  1152. display: flex;
  1153. flex-direction: column;
  1154. overflow: hidden;
  1155. .max-right-button-box {
  1156. height: 40px;
  1157. display: flex;
  1158. margin-bottom: 22px;
  1159. .null-p {
  1160. flex: 1;
  1161. }
  1162. .max-right-big-button {
  1163. color: #fff;
  1164. background: #0045AF;
  1165. -webkit-border-radius: 6px;
  1166. -moz-border-radius: 6px;
  1167. border-radius: 6px;
  1168. width: 130px;
  1169. line-height: 40px;
  1170. text-align: center;
  1171. font-size: 14px;
  1172. cursor: pointer;
  1173. }
  1174. .max-right-big-button:hover {
  1175. color: #fff;
  1176. background: #0183FA;
  1177. }
  1178. }
  1179. .right-big-list-box {
  1180. flex: 1;
  1181. position: relative;
  1182. .for-max-box {
  1183. .for-big-box {
  1184. display: flex;
  1185. border: 1px solid #dedede;
  1186. height: 100px;
  1187. box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
  1188. margin-bottom: 30px;
  1189. margin-left: 36px;
  1190. border-radius: 6px;
  1191. .for-big-box-left {
  1192. flex: 1;
  1193. display: flex;
  1194. .for-img-one {
  1195. cursor: pointer;
  1196. height: 30px;
  1197. width: 30px;
  1198. margin: 35px 0 0 30px;
  1199. }
  1200. .for-text-one {
  1201. font-size: 16px;
  1202. line-height: 100px;
  1203. margin-left: 95px;
  1204. width: 230px;
  1205. font-weight: 500;
  1206. }
  1207. .for-img-two {
  1208. height: 48px;
  1209. width: 48px;
  1210. margin: 26px 23px 0 30px;
  1211. }
  1212. .for-text-box-one {
  1213. width: 88px;
  1214. margin-right: 73px;
  1215. p {
  1216. text-align: center;
  1217. }
  1218. p:nth-child(1) {
  1219. margin-top: 20px;
  1220. font-size: 24px;
  1221. line-height: 30px;
  1222. color: #0183FA;
  1223. }
  1224. p:nth-child(2) {
  1225. margin-top: 10px;
  1226. font-size: 16px;
  1227. line-height: 16px;
  1228. color: #333;
  1229. }
  1230. }
  1231. .for-img-three {
  1232. height: 48px;
  1233. width: 48px;
  1234. margin: 26px 23px 0 0;
  1235. }
  1236. .for-text-box-two {
  1237. width: 88px;
  1238. p {
  1239. text-align: center;
  1240. }
  1241. p:nth-child(1) {
  1242. margin-top: 20px;
  1243. font-size: 24px;
  1244. line-height: 30px;
  1245. color: #0183FA;
  1246. }
  1247. p:nth-child(2) {
  1248. margin-top: 10px;
  1249. font-size: 16px;
  1250. line-height: 16px;
  1251. color: #333;
  1252. }
  1253. }
  1254. }
  1255. .for-button-min-box {
  1256. width: 220px;
  1257. margin-top: 9px;
  1258. height: 82px;
  1259. border-left: 1px dashed rgba(0, 0, 0, 0.3);
  1260. display: flex;
  1261. line-height: 82px;
  1262. div {
  1263. margin-left: 34px;
  1264. display: flex;
  1265. width: 60px;
  1266. cursor: pointer;
  1267. img {
  1268. width: 16px;
  1269. height: 16px;
  1270. margin-right: 8px;
  1271. margin-top: 33px;
  1272. }
  1273. p {
  1274. font-size: 14px;
  1275. color: #333;
  1276. }
  1277. }
  1278. }
  1279. }
  1280. }
  1281. .null-img {
  1282. position: absolute;
  1283. top: 40%;
  1284. left: 50%;
  1285. width: 276px;
  1286. height: 321px;
  1287. margin-top: -160px;
  1288. margin-left: -138px;
  1289. }
  1290. }
  1291. }
  1292. .building-box {
  1293. flex: 1;
  1294. display: flex;
  1295. flex-direction: column;
  1296. overflow: hidden;
  1297. .max-right-button-box {
  1298. height: 40px;
  1299. display: flex;
  1300. margin-bottom: 22px;
  1301. .null-p {
  1302. flex: 1;
  1303. }
  1304. .max-right-big-button {
  1305. color: #fff;
  1306. background: #0045AF;
  1307. -webkit-border-radius: 6px;
  1308. -moz-border-radius: 6px;
  1309. border-radius: 6px;
  1310. width: 130px;
  1311. line-height: 40px;
  1312. text-align: center;
  1313. font-size: 14px;
  1314. cursor: pointer;
  1315. }
  1316. .max-right-big-button:hover {
  1317. color: #fff;
  1318. background: #0183FA;
  1319. }
  1320. }
  1321. .right-big-list-box {
  1322. flex: 1;
  1323. position: relative;
  1324. .for-max-box {
  1325. margin-bottom: 30px;
  1326. .for-big-box {
  1327. display: flex;
  1328. border: 1px solid #dedede;
  1329. height: 100px;
  1330. box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
  1331. margin-left: 36px;
  1332. border-radius: 6px;
  1333. .for-big-box-left {
  1334. flex: 1;
  1335. display: flex;
  1336. .for-img-one {
  1337. cursor: pointer;
  1338. height: 30px;
  1339. width: 30px;
  1340. margin: 35px 0 0 30px;
  1341. }
  1342. .for-text-one {
  1343. font-size: 16px;
  1344. line-height: 100px;
  1345. margin-left: 95px;
  1346. width: 230px;
  1347. font-weight: 500;
  1348. }
  1349. .for-img-two {
  1350. height: 48px;
  1351. width: 48px;
  1352. margin: 26px 23px 0 30px;
  1353. }
  1354. .for-text-box-one {
  1355. width: 88px;
  1356. margin-right: 73px;
  1357. p {
  1358. text-align: center;
  1359. }
  1360. p:nth-child(1) {
  1361. margin-top: 20px;
  1362. font-size: 24px;
  1363. line-height: 30px;
  1364. color: #0183FA;
  1365. }
  1366. p:nth-child(2) {
  1367. margin-top: 10px;
  1368. font-size: 16px;
  1369. line-height: 16px;
  1370. color: #333;
  1371. }
  1372. }
  1373. .for-img-three {
  1374. height: 48px;
  1375. width: 48px;
  1376. margin: 26px 23px 0 0;
  1377. }
  1378. .for-text-box-two {
  1379. width: 88px;
  1380. p {
  1381. text-align: center;
  1382. }
  1383. p:nth-child(1) {
  1384. margin-top: 20px;
  1385. font-size: 24px;
  1386. line-height: 30px;
  1387. color: #0183FA;
  1388. }
  1389. p:nth-child(2) {
  1390. margin-top: 10px;
  1391. font-size: 16px;
  1392. line-height: 16px;
  1393. color: #333;
  1394. }
  1395. }
  1396. }
  1397. .for-button-min-box {
  1398. width: 330px;
  1399. margin-top: 9px;
  1400. height: 82px;
  1401. border-left: 1px dashed rgba(0, 0, 0, 0.3);
  1402. display: flex;
  1403. line-height: 82px;
  1404. div {
  1405. margin-left: 34px;
  1406. display: flex;
  1407. width: 60px;
  1408. cursor: pointer;
  1409. img {
  1410. width: 16px;
  1411. height: 16px;
  1412. margin-right: 8px;
  1413. margin-top: 33px;
  1414. }
  1415. p {
  1416. font-size: 14px;
  1417. color: #333;
  1418. }
  1419. }
  1420. }
  1421. }
  1422. .layout-data-max-big-box {
  1423. width: 1195px;
  1424. height: 400px;
  1425. margin-left: 36px;
  1426. border-left: 1px solid #e0e0e0;
  1427. border-right: 1px solid #e0e0e0;
  1428. border-bottom: 1px solid #e0e0e0;
  1429. position: relative;
  1430. .layout-data-max-big-min-box {
  1431. position: absolute;
  1432. top: 50%;
  1433. left: 50%;
  1434. .layout-data-max-min-box {
  1435. position: relative;
  1436. border:1px solid #e0e0e0;
  1437. .map-max-for-box {
  1438. position: absolute;
  1439. display: flex;
  1440. flex-direction: column;
  1441. .map-max-for-left-box {
  1442. height: 2px;
  1443. }
  1444. .map-max-for-center-box {
  1445. flex: 1;
  1446. display: flex;
  1447. .map-max-for-center-min-left {
  1448. width: 2px;
  1449. }
  1450. .map-max-for-center-min-center {
  1451. flex: 1;
  1452. position: relative;
  1453. .min-text-box{
  1454. width:100%;
  1455. text-align: center;
  1456. color:#333;
  1457. word-wrap:break-word;
  1458. word-break:break-all;
  1459. overflow: hidden;
  1460. z-index:999;
  1461. margin:30% 0 0 0;
  1462. font-size:14px;
  1463. line-height:20px;
  1464. }
  1465. div {
  1466. position: absolute
  1467. }
  1468. .center-move-door-p-t {
  1469. background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
  1470. background-size: 100% !important;
  1471. transform: rotate(180deg);
  1472. }
  1473. .center-move-door-p-b {
  1474. background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
  1475. background-size: 100% !important;
  1476. }
  1477. .center-move-door-p-l {
  1478. background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
  1479. background-size: 100% !important;
  1480. transform: rotate(90deg);
  1481. }
  1482. .center-move-door-p-r {
  1483. background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
  1484. background-size: 100% !important;
  1485. transform: rotateZ(270deg);
  1486. }
  1487. .center-move-door-p-t-ss {
  1488. background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
  1489. background-size: 100% !important;
  1490. transform: rotate(180deg);
  1491. }
  1492. .center-move-door-p-b-ss {
  1493. background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
  1494. background-size: 100% !important;
  1495. }
  1496. .center-move-door-p-l-ss {
  1497. background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
  1498. background-size: 100% !important;
  1499. transform: rotate(90deg);
  1500. }
  1501. .center-move-door-p-r-ss {
  1502. background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
  1503. background-size: 100% !important;
  1504. transform: rotateZ(270deg);
  1505. }
  1506. .lightTop {
  1507. background: url("../../../../assets/ZDimages/evacuation3_2/icon_sjt.png");
  1508. background-size: 100%;
  1509. }
  1510. .lightBottom {
  1511. background: url("../../../../assets/ZDimages/evacuation3_2/icon_xjt.png");
  1512. background-size: 100%;
  1513. }
  1514. .lightLeft {
  1515. background: url("../../../../assets/ZDimages/evacuation3_2/icon_zuo.png");
  1516. background-size: 100%;
  1517. }
  1518. .lightRight {
  1519. background: url("../../../../assets/ZDimages/evacuation3_2/icon_yuo.png");
  1520. background-size: 100%;
  1521. }
  1522. }
  1523. .map-max-for-center-min-right {
  1524. width: 2px;
  1525. }
  1526. }
  1527. .map-max-for-right-box {
  1528. height: 2px;
  1529. }
  1530. .map-max-for-min-box {
  1531. position: relative;
  1532. div {
  1533. position: absolute
  1534. }
  1535. }
  1536. }
  1537. .for-map-box {
  1538. background: #CEF2FD;
  1539. }
  1540. .for-map-box-one {
  1541. background: #CEFDD5;
  1542. }
  1543. .for-map-box-two {
  1544. background: url("../../../../assets/ZDimages/evacuation3_2/icon_yjtd.png") center center no-repeat #39AE36;
  1545. background-size: 60px 60px;
  1546. }
  1547. }
  1548. }
  1549. }
  1550. .layout-data-max-big-null-box {
  1551. height: 400px;
  1552. margin-left: 36px;
  1553. border-left: 1px solid #e0e0e0;
  1554. border-right: 1px solid #e0e0e0;
  1555. border-bottom: 1px solid #e0e0e0;
  1556. position: relative;
  1557. overflow: hidden;
  1558. img {
  1559. position: absolute;
  1560. top: 50%;
  1561. left: 50%;
  1562. margin-left: -71px;
  1563. margin-top: -71px;
  1564. width: 142px;
  1565. height: 142px;
  1566. }
  1567. div {
  1568. margin-top: 300px;
  1569. height: 30px;
  1570. display: flex;
  1571. p:nth-child(1) {
  1572. flex: 1;
  1573. }
  1574. p:nth-child(2) {
  1575. margin-right: 20px;
  1576. color: #333;
  1577. font-size: 14px;
  1578. }
  1579. p:nth-child(3) {
  1580. color: #0183FA;
  1581. font-size: 14px;
  1582. cursor: pointer;
  1583. }
  1584. p:nth-child(4) {
  1585. flex: 1;
  1586. }
  1587. }
  1588. }
  1589. }
  1590. .null-img {
  1591. position: absolute;
  1592. top: 40%;
  1593. left: 50%;
  1594. width: 276px;
  1595. height: 321px;
  1596. margin-top: -160px;
  1597. margin-left: -138px;
  1598. }
  1599. }
  1600. }
  1601. .floor-box {
  1602. flex: 1;
  1603. display: flex;
  1604. flex-direction: column;
  1605. overflow: hidden;
  1606. .map-max-big-box {
  1607. height: 400px;
  1608. position: relative;
  1609. border: 1px solid #E0E0E0;
  1610. margin-bottom: 20px;
  1611. margin-left: 36px;
  1612. .layout-data-max-big-box {
  1613. width: 1195px;
  1614. height: 400px;
  1615. position: relative;
  1616. .layout-data-max-big-min-box {
  1617. position: absolute;
  1618. top: 50%;
  1619. left: 50%;
  1620. .layout-data-max-min-box {
  1621. position: relative;
  1622. border:1px solid #e0e0e0;
  1623. .map-max-for-box {
  1624. position: absolute;
  1625. display: flex;
  1626. flex-direction: column;
  1627. .map-max-for-left-box {
  1628. height: 2px;
  1629. }
  1630. .map-max-for-center-box {
  1631. flex: 1;
  1632. display: flex;
  1633. .map-max-for-center-min-left {
  1634. width: 2px;
  1635. }
  1636. .map-max-for-center-min-center {
  1637. flex: 1;
  1638. position: relative;
  1639. .min-text-box{
  1640. width:100%;
  1641. text-align: center;
  1642. color:#333;
  1643. word-wrap:break-word;
  1644. word-break:break-all;
  1645. overflow: hidden;
  1646. z-index:999;
  1647. margin:30% 0 0 0;
  1648. font-size:14px;
  1649. line-height:20px;
  1650. }
  1651. div {
  1652. position: absolute
  1653. }
  1654. .center-move-door-p-t {
  1655. background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
  1656. background-size: 100% !important;
  1657. transform: rotate(180deg);
  1658. }
  1659. .center-move-door-p-b {
  1660. background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
  1661. background-size: 100% !important;
  1662. }
  1663. .center-move-door-p-l {
  1664. background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
  1665. background-size: 100% !important;
  1666. transform: rotate(90deg);
  1667. }
  1668. .center-move-door-p-r {
  1669. background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
  1670. background-size: 100% !important;
  1671. transform: rotateZ(270deg);
  1672. }
  1673. .center-move-door-p-t-ss {
  1674. background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
  1675. background-size: 100% !important;
  1676. transform: rotate(180deg);
  1677. }
  1678. .center-move-door-p-b-ss {
  1679. background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
  1680. background-size: 100% !important;
  1681. }
  1682. .center-move-door-p-l-ss {
  1683. background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
  1684. background-size: 100% !important;
  1685. transform: rotate(90deg);
  1686. }
  1687. .center-move-door-p-r-ss {
  1688. background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
  1689. background-size: 100% !important;
  1690. transform: rotateZ(270deg);
  1691. }
  1692. .lightTop {
  1693. background: url("../../../../assets/ZDimages/evacuation3_2/icon_sjt.png");
  1694. background-size: 100%;
  1695. }
  1696. .lightBottom {
  1697. background: url("../../../../assets/ZDimages/evacuation3_2/icon_xjt.png");
  1698. background-size: 100%;
  1699. }
  1700. .lightLeft {
  1701. background: url("../../../../assets/ZDimages/evacuation3_2/icon_zuo.png");
  1702. background-size: 100%;
  1703. }
  1704. .lightRight {
  1705. background: url("../../../../assets/ZDimages/evacuation3_2/icon_yuo.png");
  1706. background-size: 100%;
  1707. }
  1708. }
  1709. .map-max-for-center-min-right {
  1710. width: 2px;
  1711. }
  1712. }
  1713. .map-max-for-right-box {
  1714. height: 2px;
  1715. }
  1716. .map-max-for-min-box {
  1717. position: relative;
  1718. div {
  1719. position: absolute
  1720. }
  1721. }
  1722. }
  1723. .for-map-box {
  1724. background: #CEF2FD;
  1725. }
  1726. .for-map-box-one {
  1727. background: #CEFDD5;
  1728. }
  1729. .for-map-box-two {
  1730. background: url("../../../../assets/ZDimages/evacuation3_2/icon_yjtd.png") center center no-repeat #39AE36;
  1731. background-size: 60px 60px;
  1732. }
  1733. }
  1734. }
  1735. }
  1736. .layout-data-max-big-null-box {
  1737. height: 400px;
  1738. position: relative;
  1739. overflow: hidden;
  1740. img {
  1741. position: absolute;
  1742. top: 50%;
  1743. left: 50%;
  1744. margin-left: -71px;
  1745. margin-top: -71px;
  1746. width: 142px;
  1747. height: 142px;
  1748. }
  1749. div {
  1750. margin-top: 300px;
  1751. height: 30px;
  1752. display: flex;
  1753. p:nth-child(1) {
  1754. flex: 1;
  1755. }
  1756. p:nth-child(2) {
  1757. margin-right: 20px;
  1758. color: #333;
  1759. font-size: 14px;
  1760. }
  1761. p:nth-child(3) {
  1762. color: #0183FA;
  1763. font-size: 14px;
  1764. cursor: pointer;
  1765. }
  1766. p:nth-child(4) {
  1767. flex: 1;
  1768. }
  1769. }
  1770. }
  1771. .position-button-p {
  1772. position: absolute;
  1773. right: 12px;
  1774. top: 13px;
  1775. width: 100px;
  1776. line-height: 40px;
  1777. font-size: 14px;
  1778. color: #fff;
  1779. background: #0045AF;
  1780. border-radius: 6px;
  1781. text-align: center;
  1782. cursor: pointer;
  1783. }
  1784. }
  1785. .table-box {
  1786. margin-left: 36px;
  1787. flex: 1;
  1788. display: flex;
  1789. flex-direction: column;
  1790. overflow: hidden;
  1791. }
  1792. }
  1793. }
  1794. }
  1795. }
  1796. </style>
  1797. <style lang="scss">
  1798. .dialog-sort-no-form-item-box input {
  1799. text-align: left !important;
  1800. }
  1801. .building-dialog-box{
  1802. .map-max-big-box {
  1803. width: 575px;
  1804. height: 286px;
  1805. position: relative;
  1806. border: 1px solid #E0E0E0;
  1807. overflow: hidden;
  1808. .layout-data-max-big-box {
  1809. width: 575px;
  1810. height: 286px;
  1811. position: relative;
  1812. .layout-data-max-big-min-box {
  1813. position: absolute;
  1814. top: 50%;
  1815. left: 50%;
  1816. .layout-data-max-min-box {
  1817. position: relative;
  1818. .map-max-for-box {
  1819. position: absolute;
  1820. display: flex;
  1821. flex-direction: column;
  1822. .map-max-for-left-box {
  1823. height: 2px;
  1824. }
  1825. .map-max-for-center-box {
  1826. flex: 1;
  1827. display: flex;
  1828. .map-max-for-center-min-left {
  1829. width: 2px;
  1830. }
  1831. .map-max-for-center-min-center {
  1832. flex: 1;
  1833. position: relative;
  1834. .min-text-box{
  1835. width:100%;
  1836. text-align: center;
  1837. color:#333;
  1838. word-wrap:break-word;
  1839. word-break:break-all;
  1840. overflow: hidden;
  1841. z-index:999;
  1842. margin:30% 0 0 0;
  1843. font-size:14px;
  1844. line-height:20px;
  1845. }
  1846. div {
  1847. position: absolute
  1848. }
  1849. .center-move-door-p-t {
  1850. background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
  1851. background-size: 100% !important;
  1852. transform: rotate(180deg);
  1853. }
  1854. .center-move-door-p-b {
  1855. background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
  1856. background-size: 100% !important;
  1857. }
  1858. .center-move-door-p-l {
  1859. background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
  1860. background-size: 100% !important;
  1861. transform: rotate(90deg);
  1862. }
  1863. .center-move-door-p-r {
  1864. background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
  1865. background-size: 100% !important;
  1866. transform: rotateZ(270deg);
  1867. }
  1868. .center-move-door-p-t-ss {
  1869. background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
  1870. background-size: 100% !important;
  1871. transform: rotate(180deg);
  1872. }
  1873. .center-move-door-p-b-ss {
  1874. background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
  1875. background-size: 100% !important;
  1876. }
  1877. .center-move-door-p-l-ss {
  1878. background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
  1879. background-size: 100% !important;
  1880. transform: rotate(90deg);
  1881. }
  1882. .center-move-door-p-r-ss {
  1883. background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
  1884. background-size: 100% !important;
  1885. transform: rotateZ(270deg);
  1886. }
  1887. .lightTop {
  1888. background: url("../../../../assets/ZDimages/evacuation3_2/icon_sjt.png");
  1889. background-size: 100%;
  1890. }
  1891. .lightBottom {
  1892. background: url("../../../../assets/ZDimages/evacuation3_2/icon_xjt.png");
  1893. background-size: 100%;
  1894. }
  1895. .lightLeft {
  1896. background: url("../../../../assets/ZDimages/evacuation3_2/icon_zuo.png");
  1897. background-size: 100%;
  1898. }
  1899. .lightRight {
  1900. background: url("../../../../assets/ZDimages/evacuation3_2/icon_yuo.png");
  1901. background-size: 100%;
  1902. }
  1903. }
  1904. .map-max-for-center-min-right {
  1905. width: 2px;
  1906. }
  1907. }
  1908. .map-max-for-right-box {
  1909. height: 2px;
  1910. }
  1911. .map-max-for-min-box {
  1912. position: relative;
  1913. div {
  1914. position: absolute
  1915. }
  1916. }
  1917. }
  1918. .for-map-box {
  1919. background: #CEF2FD;
  1920. }
  1921. .for-map-box-one {
  1922. background: #CEFDD5;
  1923. }
  1924. .for-map-box-two {
  1925. background: url("../../../../assets/ZDimages/evacuation3_2/icon_yjtd.png") center center no-repeat #39AE36;
  1926. background-size: 60px 60px;
  1927. }
  1928. .for-map-box-three {
  1929. background: #FFBBBB!important;
  1930. }
  1931. }
  1932. }
  1933. }
  1934. .layout-data-max-big-null-box {
  1935. height: 400px;
  1936. position: relative;
  1937. overflow: hidden;
  1938. img {
  1939. position: absolute;
  1940. top: 50%;
  1941. left: 50%;
  1942. margin-left: -71px;
  1943. margin-top: -71px;
  1944. width: 142px;
  1945. height: 142px;
  1946. }
  1947. div {
  1948. margin-top: 300px;
  1949. height: 30px;
  1950. display: flex;
  1951. p:nth-child(1) {
  1952. flex: 1;
  1953. }
  1954. p:nth-child(2) {
  1955. margin-right: 20px;
  1956. color: #333;
  1957. font-size: 14px;
  1958. }
  1959. p:nth-child(3) {
  1960. color: #0183FA;
  1961. font-size: 14px;
  1962. cursor: pointer;
  1963. }
  1964. p:nth-child(4) {
  1965. flex: 1;
  1966. }
  1967. }
  1968. }
  1969. .position-button-p {
  1970. position: absolute;
  1971. right: 12px;
  1972. top: 13px;
  1973. width: 100px;
  1974. line-height: 40px;
  1975. font-size: 14px;
  1976. color: #fff;
  1977. background: #0045AF;
  1978. border-radius: 6px;
  1979. text-align: center;
  1980. cursor: pointer;
  1981. }
  1982. }
  1983. }
  1984. </style>