FloorFunc.vue 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342
  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="`/glsms/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="`backgroundColor:${formatColor(tr.FillColor)};border:1px solid ${formatColor(tr.StrokeColor)};`"></div>
  84. <div v-else>{{'--'}}</div>
  85. </div>
  86. </td>
  87. </tr>
  88. </table>
  89. </div>
  90. </div>
  91. <ImagePreview :key='imgKey' :visible.sync='showImgPreview' :imgList='imgList' />
  92. </div>
  93. </template>
  94. <script>
  95. import Vue from 'vue';
  96. import { Toast } from 'vant';
  97. Vue.use(Toast);
  98. import ImagePreview from '@/components/ImagePreview'
  99. import { appGraphElementQuery, appNodeQuery, queryPic } from '@/api/public'
  100. import { mapGetters } from 'vuex'
  101. export default {
  102. name: 'FloorFunc',
  103. props: {},
  104. data() {
  105. return {
  106. floorData: [],
  107. showImgPreview: false,
  108. imgList: [], //图片列表
  109. imgKey: `img${new Date().getTime()}`,
  110. VUE_APP_BaseURL: '',
  111. }
  112. },
  113. computed: {
  114. ...mapGetters(['plazaId', 'floorsArr', 'categoryId', 'smsxt']),
  115. },
  116. components: { ImagePreview },
  117. beforeMount() { },
  118. created() {
  119. this.VUE_APP_BaseURL = process.env.VUE_APP_BaseURL
  120. this.getGraphElement();
  121. },
  122. methods: {
  123. // 请求图例信息
  124. getGraphElement() {
  125. let params = {
  126. BuildingID: '1',
  127. CategoryID: this.categoryId,
  128. ProjectID: this.plazaId,
  129. Floors: this.floorsArr.map(item => {
  130. return {
  131. FloorId: item.gname,
  132. FloorName: item.code
  133. }
  134. })
  135. }
  136. if (this.categoryId === "SCPZ") {
  137. appNodeQuery(params).then(res => {
  138. this.floorData = res.Data.map(floor => {
  139. let arr = []
  140. if (floor.Properties && floor.Properties.length) {
  141. arr = floor.Properties.filter(item => {
  142. return item.ItemExplain && item.ItemExplain !== "";
  143. })
  144. floor.Properties = arr;
  145. floor.Open = false;
  146. }
  147. return floor;
  148. });
  149. })
  150. } else {
  151. appGraphElementQuery(params).then(res => {
  152. this.floorData = res.Data.map(floor => {
  153. floor.Open = false;
  154. return floor;
  155. });
  156. })
  157. }
  158. },
  159. // 查询附加数据图片
  160. queryTable(floorId) {
  161. this.imgKey = `img${new Date().getTime()}`;
  162. let getParams = {
  163. module: '1003',
  164. floor: floorId,
  165. system: this.smsxt,
  166. plazaId: this.plazaId,
  167. }
  168. queryPic({ getParams }).then((res) => {
  169. if (res.data && res.data.length) {
  170. this.imgList = res.data.map(item => {
  171. return item.url
  172. })
  173. this.showImgPreview = true;
  174. } else {
  175. Toast.fail('暂无附加数据!');
  176. }
  177. })
  178. },
  179. // 展开楼层数据
  180. handleClickOpenFloor(floor) {
  181. if ((floor.Statistics && floor.Statistics.length) || (floor.Properties && floor.Properties.length)) {
  182. floor.Open = !floor.Open;
  183. }
  184. },
  185. goToMapView(floor) {
  186. if (floor.FloorId && floor.FloorName) {
  187. let floorObj = {
  188. FloorId: floor.FloorId,
  189. FloorName: floor.FloorName
  190. }
  191. this.$router.push({ name: 'MapView', params: { floor: floorObj } })
  192. } else {
  193. Toast.fail('缺少楼层信息!');
  194. }
  195. },
  196. // 十六进制颜色转rgba
  197. formatColor(sHex) {
  198. // 十六进制颜色值的正则表达式
  199. var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{4}|[0-9a-fA-f]{6}|[0-9a-fA-f]{8})$/
  200. /* 16进制颜色转为RGB格式 */
  201. var sColor = sHex.toLowerCase()
  202. var alpha = 1
  203. if (sColor && reg.test(sColor)) {
  204. if (sColor.length === 4 || sColor.length === 5) {
  205. var sColorNew = '#'
  206. for (var i = 1; i < sColor.length; i += 1) {
  207. sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
  208. }
  209. sColor = sColorNew
  210. }
  211. // 如果有透明度再执行
  212. if (sColor.length === 9) {
  213. alpha = (parseInt('0x' + sColor.slice(7, 9)) / 255).toFixed(2)
  214. }
  215. // 处理六位的颜色值
  216. var sColorChange = []
  217. for (var i = 1; i < 7; i += 2) {
  218. sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
  219. }
  220. return 'rgba(' + sColorChange.join(',') + ',' + alpha + ')'
  221. } else {
  222. return sColor
  223. }
  224. },
  225. },
  226. watch: {
  227. categoryId: {
  228. handler() {
  229. this.getGraphElement();
  230. }
  231. }
  232. }
  233. }
  234. </script>
  235. <style lang='less' scoped>
  236. .floor-function {
  237. width: 100%;
  238. height: calc(100% - 100px);
  239. background-color: #ffffff;
  240. box-sizing: border-box;
  241. overflow-y: auto;
  242. .floor-item {
  243. margin-bottom: 4px;
  244. .floor-item-title {
  245. padding: 0 10px;
  246. height: 44px;
  247. line-height: 44px;
  248. background: rgba(2, 91, 170, 0.1);
  249. color: #025baa;
  250. .floor-item-text {
  251. font-size: 16px;
  252. font-weight: 600;
  253. display: inline-block;
  254. .icon-disable {
  255. color: rgba(2, 91, 170, 0.3);
  256. }
  257. }
  258. .floor-item-goMap {
  259. font-size: 14px;
  260. float: right;
  261. .floor-item-arrow {
  262. position: relative;
  263. top: 2px;
  264. }
  265. }
  266. }
  267. .floor-item-table {
  268. padding: 12px 16px 16px;
  269. .table-box {
  270. width: 100%;
  271. table-layout: fixed;
  272. border-collapse: collapse;
  273. border-spacing: 0;
  274. td,
  275. th {
  276. font-size: 12px;
  277. font-weight: 500;
  278. color: #333333;
  279. padding: 8px 0;
  280. overflow: hidden;
  281. text-overflow: ellipsis;
  282. white-space: nowrap;
  283. min-width: 0;
  284. border: 1px solid #e4e6e7;
  285. box-sizing: border-box;
  286. vertical-align: middle;
  287. position: relative;
  288. text-align: center;
  289. .cell {
  290. box-sizing: border-box;
  291. overflow: hidden;
  292. text-overflow: ellipsis;
  293. white-space: normal;
  294. word-break: break-all;
  295. line-height: 23px;
  296. padding: 0 10px;
  297. }
  298. }
  299. th {
  300. padding: 3px 0;
  301. font-weight: normal;
  302. color: #666666;
  303. background: #eff0f1;
  304. }
  305. .Url-img {
  306. width: 20px;
  307. height: 22px;
  308. line-height: 20px;
  309. margin: 0 auto;
  310. img {
  311. display: block;
  312. max-width: 100%;
  313. max-height: 100%;
  314. margin: 0 auto;
  315. }
  316. }
  317. .table-note {
  318. font-size: 12px;
  319. font-family: MicrosoftYaHeiSemibold;
  320. color: #666666;
  321. line-height: 16px;
  322. display: flex;
  323. .table-note-content {
  324. text-align: left;
  325. ol {
  326. list-style: decimal;
  327. }
  328. }
  329. }
  330. }
  331. }
  332. .floor-additional-data {
  333. font-size: 14px;
  334. color: #025baa;
  335. margin-top: 10px;
  336. i {
  337. vertical-align: bottom;
  338. }
  339. }
  340. }
  341. }
  342. </style>