FloorSpace.vue 12 KB

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