FloorFunc.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  1. <template>
  2. <div class='floor-function'>
  3. <div class="floor-item" v-for="floor in floorData" :key="floor.FloorId">
  4. <div class="floor-item-title">
  5. <span class="floor-item-text">
  6. <i class="iconfont" @click="handleClickOpenFloor(floor)"
  7. :class="{'wanda-right-mini': !floor.Open, 'wanda-bottom-mini': floor.Open, 'icon-disable': !((floor.Statistics && floor.Statistics.length) || (floor.Properties && floor.Properties.length))}"></i>
  8. {{floor.FloorName}}
  9. </span>
  10. <p class="floor-item-goMap" @click='goToMapView(floor)'>
  11. <span>查看平面图 </span>
  12. <van-icon class='floor-item-arrow' name='arrow' />
  13. </p>
  14. </div>
  15. <div v-if="floor.Statistics && floor.Statistics.length && floor.Open" class="floor-item-table">
  16. <table class="table-box">
  17. <tr>
  18. <th>
  19. <div class="cell">项目</div>
  20. </th>
  21. <th>
  22. <div class="cell">数量</div>
  23. </th>
  24. <th>
  25. <div class="cell">单位</div>
  26. </th>
  27. <th>
  28. <div class="cell">图例</div>
  29. </th>
  30. </tr>
  31. <tr v-for="tr in floor.Statistics" :key="`${floor.FloorId}-${tr.GraphElementId}`" v-show="tr.Num">
  32. <td>
  33. <div class="cell">{{tr.Name||'--'}}</div>
  34. </td>
  35. <td>
  36. <div class="cell">{{tr.Num}}</div>
  37. </td>
  38. <td>
  39. <div class="cell">{{tr.Unit||'--'}}</div>
  40. </td>
  41. <td>
  42. <div class="cell">
  43. <div v-if='tr.Url' class="Url-img">
  44. <img :src="`/serve/topology-wanda/Picture/query/${tr.Url}`" alt>
  45. </div>
  46. <div v-else>{{'--'}}</div>
  47. </div>
  48. </td>
  49. </tr>
  50. <tr v-if="floor.Note">
  51. <td colspan="4">
  52. <div class="cell">
  53. <div class="table-note">
  54. <span>注:</span>
  55. <div class="table-note-content" v-html="floor.Note"></div>
  56. </div>
  57. </div>
  58. </td>
  59. </tr>
  60. </table>
  61. <h2 class="floor-additional-data" v-if="smsxt == '1003' || smsxt == '1004'" @click="queryTable(floor.FloorId)">
  62. <i class="iconfont wanda-otherData"></i>
  63. 查看附加数据
  64. </h2>
  65. </div>
  66. <div v-else-if="floor.Properties && floor.Properties.length && floor.Open" class="floor-item-table">
  67. <table class="table-box">
  68. <tr>
  69. <th colspan="3">
  70. <div class="cell">说明</div>
  71. </th>
  72. <th>
  73. <div class="cell">图例</div>
  74. </th>
  75. </tr>
  76. <tr v-for="(tr, index) in floor.Properties" :key="`${floor.FloorId}-${index}`">
  77. <td colspan="3">
  78. <div class="cell">{{tr.ItemExplain||'--'}}</div>
  79. </td>
  80. <td>
  81. <div class="cell">
  82. <div v-if='tr.FillColor && tr.StrokeColor' class="Url-img"
  83. :style='`background:${tr.FillColor};border:1px solid ${tr.StrokeColor}`'>
  84. </div>
  85. <div v-else>{{'--'}}</div>
  86. </div>
  87. </td>
  88. </tr>
  89. </table>
  90. </div>
  91. </div>
  92. <ImagePreview :key='imgKey' :visible.sync='showImgPreview' :imgList='imgList' />
  93. </div>
  94. </template>
  95. <script>
  96. import Vue from 'vue';
  97. import { Toast } from 'vant';
  98. Vue.use(Toast);
  99. import ImagePreview from '@/components/ImagePreview'
  100. import { appGraphElementQuery, appNodeQuery, queryPic } from '@/api/public'
  101. import { mapGetters } from 'vuex'
  102. export default {
  103. name: 'FloorFunc',
  104. props: {},
  105. data() {
  106. return {
  107. floorData: [],
  108. showImgPreview: false,
  109. imgList: [], //图片列表
  110. imgKey: `img${new Date().getTime()}`,
  111. }
  112. },
  113. computed: {
  114. ...mapGetters(['plazaId', 'floorsArr', 'categoryId', 'smsxt']),
  115. },
  116. components: { ImagePreview },
  117. beforeMount() { },
  118. created() {
  119. this.getGraphElement();
  120. },
  121. methods: {
  122. // 请求图例信息
  123. getGraphElement() {
  124. let params = {
  125. BuildingID: '1',
  126. CategoryID: this.categoryId,
  127. ProjectID: this.plazaId,
  128. Floors: this.floorsArr.map(item => {
  129. return {
  130. FloorId: item.gname,
  131. FloorName: item.code
  132. }
  133. })
  134. }
  135. if (this.categoryId === "SCPZ") {
  136. appNodeQuery(params).then(res => {
  137. this.floorData = res.Data.map(floor => {
  138. let arr = []
  139. if (floor.Properties && floor.Properties.length) {
  140. arr = floor.Properties.filter(item => {
  141. return item.ItemExplain && item.ItemExplain !== "";
  142. })
  143. floor.Properties = arr;
  144. floor.Open = false;
  145. }
  146. return floor;
  147. });
  148. })
  149. } else {
  150. appGraphElementQuery(params).then(res => {
  151. this.floorData = res.Data.map(floor => {
  152. floor.Open = false;
  153. return floor;
  154. });
  155. })
  156. }
  157. },
  158. // 查询附加数据图片
  159. queryTable(floorId) {
  160. let getParams = {
  161. module: '1003',
  162. floor: floorId,
  163. system: this.smsxt,
  164. plazaId: this.plazaId,
  165. }
  166. queryPic({ getParams }).then((res) => {
  167. if (res.data && res.data) {
  168. this.imgList = res.data.map(item => {
  169. return item.url
  170. })
  171. this.showImgPreview = true;
  172. } else {
  173. Toast.fail('暂无附加数据!');
  174. }
  175. })
  176. },
  177. // 展开楼层数据
  178. handleClickOpenFloor(floor) {
  179. if ((floor.Statistics && floor.Statistics.length) || (floor.Properties && floor.Properties.length)) {
  180. floor.Open = !floor.Open;
  181. }
  182. },
  183. goToMapView(floor) {
  184. if (floor.FloorId && floor.FloorName) {
  185. let floorObj = {
  186. FloorId: floor.FloorId,
  187. FloorName: floor.FloorName
  188. }
  189. this.$router.push({ name: 'MapView', params: { floor: floorObj } })
  190. } else {
  191. Toast.fail('缺少楼层信息!');
  192. }
  193. },
  194. },
  195. watch: {
  196. categoryId: {
  197. handler() {
  198. this.getGraphElement();
  199. }
  200. }
  201. }
  202. }
  203. </script>
  204. <style lang='less' scoped>
  205. .floor-function {
  206. width: 100%;
  207. height: calc(100% - 100px);
  208. background-color: #ffffff;
  209. box-sizing: border-box;
  210. overflow-y: auto;
  211. .floor-item {
  212. margin-bottom: 12px;
  213. .floor-item-title {
  214. padding: 0 10px;
  215. height: 44px;
  216. line-height: 44px;
  217. background: rgba(2, 91, 170, 0.1);
  218. color: #025baa;
  219. .floor-item-text {
  220. font-size: 16px;
  221. font-weight: 600;
  222. display: inline-block;
  223. .icon-disable {
  224. color: rgba(2, 91, 170, 0.3);
  225. }
  226. }
  227. .floor-item-goMap {
  228. font-size: 14px;
  229. float: right;
  230. .floor-item-arrow {
  231. position: relative;
  232. top: 2px;
  233. }
  234. }
  235. }
  236. .floor-item-table {
  237. padding: 12px 16px 0;
  238. .table-box {
  239. width: 100%;
  240. table-layout: fixed;
  241. border-collapse: collapse;
  242. border-spacing: 0;
  243. td,
  244. th {
  245. font-size: 12px;
  246. font-weight: 500;
  247. color: #333333;
  248. padding: 8px 0;
  249. overflow: hidden;
  250. text-overflow: ellipsis;
  251. white-space: nowrap;
  252. min-width: 0;
  253. border: 1px solid #e4e6e7;
  254. box-sizing: border-box;
  255. vertical-align: middle;
  256. position: relative;
  257. text-align: center;
  258. .cell {
  259. box-sizing: border-box;
  260. overflow: hidden;
  261. text-overflow: ellipsis;
  262. white-space: normal;
  263. word-break: break-all;
  264. line-height: 23px;
  265. padding: 0 10px;
  266. }
  267. }
  268. th {
  269. background: #eff0f1;
  270. }
  271. .Url-img {
  272. width: 20px;
  273. height: 22px;
  274. line-height: 20px;
  275. margin: 0 auto;
  276. img {
  277. display: block;
  278. max-width: 100%;
  279. max-height: 100%;
  280. margin: 0 auto;
  281. }
  282. }
  283. .table-note {
  284. font-size: 12px;
  285. font-family: MicrosoftYaHeiSemibold;
  286. color: #666666;
  287. line-height: 16px;
  288. display: flex;
  289. .table-note-content {
  290. text-align: left;
  291. ol {
  292. list-style: decimal;
  293. }
  294. }
  295. }
  296. }
  297. }
  298. .floor-additional-data {
  299. font-size: 14px;
  300. color: #025baa;
  301. margin-top: 10px;
  302. i {
  303. vertical-align: bottom;
  304. }
  305. }
  306. }
  307. }
  308. </style>