HorFloorSpace.vue 16 KB

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