FloorSpace.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
  1. <template>
  2. <div class="floorCont">
  3. <div class="topChange">
  4. <div class="allIndicator">
  5. <div
  6. class="eachItem"
  7. v-for="(item, index) in allIndicator"
  8. @click="clickIndicator(index)"
  9. v-bind:class="{ select: item.id == selIndicator.id }"
  10. >
  11. <span>{{ item.name }}</span
  12. ><span class="bar"></span>
  13. </div>
  14. </div>
  15. <div class="imageDiv">
  16. <img :src="selIndicator.img" />
  17. </div>
  18. <div class="textCont">
  19. 平均<span>{{ selIndicator.name }}</span
  20. ><span class="value">{{ totalAvgValues }}</span
  21. ><span>
  22. {{ selIndicator.unit }}
  23. </span>
  24. </div>
  25. </div>
  26. <div class="floorWrap">
  27. <div
  28. class="floor-item"
  29. v-for="(item, index) in showFloors"
  30. :key="index"
  31. v-bind:style="{ height: item.floorHeight + 'px' }"
  32. >
  33. <div class="floor-num">
  34. <span>{{ item.localName }}</span>
  35. </div>
  36. <div class="floor-space">
  37. <div
  38. class="space-box"
  39. v-for="(childItem, id) in item.dataSpaces"
  40. :key="id"
  41. v-bind:style="{
  42. width: item.spacewidth + '%',
  43. height: item.spaceheight + '%',
  44. }"
  45. >
  46. <div
  47. class="space-name"
  48. v-bind:style="{
  49. backgroundColor: selectColor(
  50. childItem.avgValues,
  51. selIndicatorId,
  52. true
  53. ),
  54. }"
  55. >
  56. {{ childItem.localName }}
  57. </div>
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. </template>
  64. <script>
  65. import { Loading } from "element-ui";
  66. import moment from "moment";
  67. import { selectColor } from "@/utils/publicMethod";
  68. const { projectId } = require("/public/config2.js");
  69. export default {
  70. name: "FloorSpace",
  71. data() {
  72. return {
  73. selIndicator: {},
  74. selIndicatorId: "", //为了颜色
  75. nowIndicatorIndex: null, //现在选中的指标 index
  76. allIndicator: [
  77. {
  78. id: "temp",
  79. name: "温度",
  80. img: require("../../assets/verwendu.png"),
  81. unit: "℃",
  82. code: "Tdb",
  83. fixed: 1,
  84. },
  85. {
  86. id: "humidity",
  87. code: "RH",
  88. name: "湿度",
  89. img: require("../../assets/vershidu.png"),
  90. unit: "%",
  91. fixed: 0,
  92. },
  93. {
  94. id: "co2",
  95. code: "CO2",
  96. name: "CO₂",
  97. img: require("../../assets/verco2.png"),
  98. unit: "ppm",
  99. fixed: 0,
  100. },
  101. {
  102. id: "methanal",
  103. code: "HCHO",
  104. name: "甲醛",
  105. img: require("../../assets/verjiaquan.png"),
  106. unit: "mg/m³",
  107. fixed: 2,
  108. },
  109. {
  110. id: "pm25",
  111. code: "PM2d5",
  112. name: "PM2.5",
  113. img: require("../../assets/verpm25.png"),
  114. unit: "ug/m³",
  115. fixed: 0,
  116. },
  117. ],
  118. allFloor: [],
  119. firstPageParams: [],
  120. secondPageParams: [],
  121. nowPage: 1, //当前哪一屏幕
  122. pageNum: 0, //总页数 楼层一共几页
  123. showFloors: [],
  124. totalAvgValues: null,
  125. };
  126. },
  127. props: {
  128. showPing: {
  129. type: Number,
  130. default: () => {
  131. return 0;
  132. },
  133. },
  134. },
  135. watch: {
  136. showPing(newv, oldv) {
  137. //debugger;
  138. //当前屏幕第几屏
  139. if (newv == 2) {
  140. this.nowPage = 1;
  141. this.queryFs();
  142. }
  143. },
  144. },
  145. mounted() {},
  146. methods: {
  147. selectColor: selectColor,
  148. clickIndicator(index) {
  149. this.nowIndicatorIndex = index;
  150. },
  151. getTimeFloorParam() {
  152. //第一屏的参数 第二屏的参数
  153. var floorparam =
  154. this.nowPage == 1
  155. ? this.firstPageParams
  156. : this.secondPageParams;
  157. var _this = this;
  158. this.queryParam(floorparam).then(() => {
  159. var timeoutsign = setTimeout(() => {
  160. _this.nowIndicatorIndex = _this.nowIndicatorIndex + 1; //湿度等指标的轮询变化
  161. if (_this.nowIndicatorIndex == 5) {
  162. if (_this.pageNum == _this.nowPage) {
  163. //如果指标轮询结束
  164. _this.nowIndicatorIndex = 0;
  165. _this.$emit("donetowpage");
  166. clearTimeout(timeoutsign);
  167. return;
  168. }
  169. if (_this.pageNum == 2 && _this.nowPage == 1) {
  170. _this.nowPage = 2;
  171. _this.nowIndicatorIndex = 0;
  172. }
  173. }
  174. this.getTimeFloorParam();
  175. }, 1200);
  176. });
  177. },
  178. queryFs() {
  179. // var loading = this.$loading({ fullscreen: true });
  180. this.$axios
  181. .post(this.$api.queryFs, {
  182. criteria: {
  183. projectId: projectId,
  184. },
  185. size: 14, //最多14层
  186. page: 1,
  187. orders: [
  188. {
  189. column: "floorSequenceId",
  190. asc: true,
  191. },
  192. ],
  193. })
  194. .then((res) => {
  195. //loading.close();
  196. var allFloor = res.data.content || [];
  197. allFloor = allFloor.filter(function(item) {
  198. return item.spaceNum > 0;
  199. });
  200. this.allFloor = allFloor;
  201. var allFloorNum = allFloor.length;
  202. //如果超过7层 就显示两屏幕 第一屏 firstPageNum
  203. //如果超过7层 就显示两屏幕 第二屏 secondPageNum
  204. var firstPageNum, secondPageNum;
  205. if (allFloorNum <= 7) {
  206. firstPageNum = allFloorNum;
  207. secondPageNum = 0;
  208. this.pageNum = 1;
  209. } else {
  210. firstPageNum = Math.ceil(allFloorNum / 2);
  211. secondPageNum = Math.floor(allFloorNum / 2);
  212. this.pageNum = 2;
  213. }
  214. var firstMaxSpace = this.floorHandle(firstPageNum); //第一屏 一层最多空间
  215. var sendMaxSpace = this.floorHandle(secondPageNum);
  216. var firstPageFloors = allFloor.slice(0, firstPageNum); //第一屏 所有楼层
  217. var secondPageFloors = allFloor.slice(firstPageNum);
  218. this.firstPageParams = firstPageFloors.map((item) => {
  219. var obj = {};
  220. obj.id = item.id;
  221. obj.projectId = projectId;
  222. obj.spaceNum = firstMaxSpace;
  223. return obj;
  224. });
  225. this.secondPageParams = secondPageFloors.map((item) => {
  226. var obj = {};
  227. obj.id = item.id;
  228. obj.projectId = projectId;
  229. obj.spaceNum = sendMaxSpace;
  230. return obj;
  231. });
  232. this.nowIndicatorIndex = 0;
  233. this.getTimeFloorParam();
  234. })
  235. .catch((res) => {
  236. // loading.close();
  237. });
  238. },
  239. queryParam(floorparam) {
  240. //var loading = this.$loading({ fullscreen: true });
  241. // Tdb 温度
  242. // CO2 二氧化碳
  243. // RH 湿度
  244. // HCHO甲醛
  245. // PM2d5 pm2.5
  246. var endTime = moment();
  247. var startTime = moment().subtract(30, "minutes");
  248. var startStr = startTime.format("YYYYMMDDHHmmss");
  249. var endStr = endTime.format("YYYYMMDDHHmmss");
  250. var newv = this.nowIndicatorIndex;
  251. //debugger;
  252. this.selIndicator = this.allIndicator[newv];
  253. var param = this.selIndicator.code;
  254. return this.$axios
  255. .post(
  256. `${this.$api.queryParam}?endTime=${endStr}&startTime=${startStr}&param=${param}`,
  257. floorparam
  258. )
  259. .then((res) => {
  260. //loading.close();
  261. var showFloors = res.data.data.floors || [];
  262. this.totalAvgValues = res.data.data.avgValues || null;
  263. this.totalAvgValues &&
  264. (this.totalAvgValues = this.totalAvgValues.toFixed(
  265. this.selIndicator.fixed
  266. ));
  267. var wrapHeight =
  268. document.getElementsByTagName("body")[0].offsetHeight -
  269. 428;
  270. wrapHeight = Math.max(wrapHeight, 1000); //1000是楼层区域的最小高度
  271. showFloors.forEach((ele) => {
  272. var filterFloorarr = this.allFloor.filter((item) => {
  273. return item.id == ele.id;
  274. });
  275. var filterFloor = filterFloorarr[0] || {};
  276. ele.name = filterFloor.name;
  277. ele.localId = filterFloor.localId;
  278. ele.localName = filterFloor.localName;
  279. var dataSpacesNum = (ele.dataSpaces || []).length;
  280. var floorParam = this.spaceHandle(dataSpacesNum); //一行的个数
  281. //debugger;
  282. ele.spacewidth = 100 / floorParam.lineNum;
  283. ele.spaceheight = 100 / floorParam.floorline; //每一行的高度
  284. ele.floorHeight = wrapHeight / showFloors.length; //每一层的高度
  285. });
  286. this.showFloors = showFloors;
  287. this.selIndicatorId = this.selIndicator.id;
  288. });
  289. },
  290. floorHandle(floorNum) {
  291. //返回一层 最多多少房间
  292. var maxFloorSpace = 1; //一层 最多显示房间数
  293. switch (floorNum) {
  294. case 1:
  295. maxFloorSpace = 160;
  296. break;
  297. case 2:
  298. maxFloorSpace = 80;
  299. break;
  300. case 3:
  301. maxFloorSpace = 50;
  302. break;
  303. case 4:
  304. maxFloorSpace = 30;
  305. break;
  306. case 5:
  307. case 6:
  308. case 7:
  309. maxFloorSpace = 20;
  310. break;
  311. }
  312. return maxFloorSpace;
  313. },
  314. spaceHandle(spaceNum) {
  315. //返回一层 的每一行 几个房间
  316. var lineNum = spaceNum; //一行的房间数
  317. var floorline = Math.ceil(spaceNum / 10); //20-30 3排 30-40个 4排 所以一排10个
  318. lineNum = Math.ceil(spaceNum / floorline);
  319. return { lineNum, floorline };
  320. //debugger;
  321. },
  322. },
  323. };
  324. </script>
  325. <style lang="less" scoped>
  326. .floorCont {
  327. border-radius: 16px;
  328. overflow: hidden;
  329. }
  330. .topChange {
  331. height: 194px;
  332. // width: 1000px;
  333. margin: 0 auto;
  334. background: #ffffff;
  335. .allIndicator {
  336. padding-top: 32px;
  337. padding-bottom: 20px;
  338. display: flex;
  339. align-items: center;
  340. justify-content: center;
  341. .eachItem {
  342. cursor: pointer;
  343. font-size: 24px;
  344. color: #9b98ad;
  345. margin-right: 60px;
  346. display: flex;
  347. flex-direction: column;
  348. align-items: center;
  349. .bar {
  350. width: 24px;
  351. height: 6px;
  352. display: inline-block;
  353. }
  354. &.select {
  355. color: #3b3558;
  356. .bar {
  357. background: #46ccf6;
  358. }
  359. }
  360. }
  361. }
  362. .imageDiv {
  363. height: 32px;
  364. margin: 0 32px;
  365. text-align: center;
  366. }
  367. .textCont {
  368. color: #3b3558;
  369. font-size: 20px;
  370. font-weight: 600;
  371. text-align: center;
  372. padding-top: 16px;
  373. .value {
  374. margin-left: 4px;
  375. }
  376. }
  377. }
  378. .floorWrap {
  379. // width: 1000px;
  380. margin: 0 auto;
  381. background: #ffffff;
  382. padding-right: 16px;
  383. box-sizing: border-box;
  384. .floor-item {
  385. display: flex;
  386. padding: 18px 0;
  387. box-sizing: border-box;
  388. background: linear-gradient(
  389. 161.44deg,
  390. rgba(50, 129, 246, 0.1) 6.16%,
  391. rgba(50, 129, 246, 0) 81.03%
  392. );
  393. }
  394. .floor-num {
  395. display: flex;
  396. justify-content: center;
  397. align-items: center;
  398. font-family: Persagy;
  399. font-size: 36px;
  400. font-weight: 700;
  401. line-height: 43px;
  402. color: #3b3558;
  403. width: 80px;
  404. flex-shrink: 0;
  405. }
  406. .floor-space {
  407. display: flex;
  408. flex: 1;
  409. flex-wrap: wrap;
  410. .space-box {
  411. padding: 4px;
  412. box-sizing: border-box;
  413. .space-name {
  414. display: flex;
  415. justify-content: center;
  416. align-items: center;
  417. //height: 86px;
  418. height: 100%;
  419. min-width: 80px;
  420. border-radius: 8px;
  421. background: #d9f5d6;
  422. text-align: center;
  423. }
  424. }
  425. }
  426. }
  427. </style>