123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381 |
- <template>
- <div>
- <div class="topChange">
- <div class="allIndicator">
- <div
- class="eachItem"
- v-for="(item, index) in allIndicator"
- @click="clickIndicator(index)"
- v-bind:class="{ select: item.id == selIndicator.id }"
- >
- <span>{{ item.name }}</span
- ><span class="bar"></span>
- </div>
- </div>
- <div class="imageDiv">
- <img :src="selIndicator.img" />
- </div>
- <div class="textCont">
- 平均<span>{{ selIndicator.name }}</span
- ><span class="value">234</span
- ><span>
- {{ selIndicator.unit }}
- </span>
- </div>
- </div>
- <div class="floorWrap">
- <div
- class="floor-item"
- v-for="(item, index) in showFloors"
- :key="index"
- >
- <div class="floor-num">
- <span>{{ item.localName }}</span>
- </div>
- <div class="floor-space">
- <div
- class="space-box"
- v-for="(childItem, id) in item.dataSpaces"
- :key="id"
- v-bind:style="{ width: item.spacewidth + '%' }"
- >
- <div
- class="space-name"
- v-bind:style="{
- backgroundColor: selectColor(
- childItem.avgValues,
- selIndicator.id,
- true
- ),
- }"
- >
- {{ childItem.localName }}
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import { Loading } from "element-ui";
- import moment from "moment";
- import { selectColor } from "@/utils/publicMethod";
- export default {
- name: "FloorSpace",
- data() {
- return {
- selIndicator: {},
- nowIndicatorIndex: null, //现在选中的指标 index
- allIndicator: [
- {
- id: "temp",
- name: "温度",
- img: require("../../assets/verwendu.png"),
- unit: "℃",
- code: "Tdb",
- },
- {
- id: "humidity",
- code: "RH",
- name: "湿度",
- img: require("../../assets/vershidu.png"),
- unit: "%",
- },
- {
- id: "co2",
- code: "CO2",
- name: "CO₂",
- img: require("../../assets/verco2.png"),
- unit: "ppm",
- },
- {
- id: "methanal",
- code: "HCHO",
- name: "甲醛",
- img: require("../../assets/verjiaquan.png"),
- unit: "mg/m³",
- },
- {
- id: "pm25",
- code: "PM2d5",
- name: "PM2.5",
- img: require("../../assets/verpm25.png"),
- unit: "ug/m³",
- },
- ],
- allFloor: [],
- firstPageParams: [],
- secondPageParams: [],
- nowPage: 1, //当前哪一屏幕
- showFloors: [],
- };
- },
- watch: {
- nowIndicatorIndex(newv, oldv) {
- // debugger;
- if (newv == oldv) return;
- this.selIndicator = this.allIndicator[newv];
- this.showFloors = [];
- //第一屏的参数 第二屏的参数
- var floorparam =
- this.nowPage == 1
- ? this.firstPageParams
- : this.secondPageParams;
- this.queryParam(floorparam);
- },
- },
- mounted() {
- this.queryFs();
- },
- methods: {
- selectColor: selectColor,
- clickIndicator(index) {
- this.nowIndicatorIndex = index;
- },
- queryFs() {
- // var loading = this.$loading({ fullscreen: true });
- this.$axios
- .post(this.$api.queryFs, {
- criteria: {
- projectId: "Pj1101020002",
- },
- size: 14,//最多14层
- page: 1,
- orders: [
- {
- column: "floorSequenceId",
- asc: true,
- },
- ],
- })
- .then((res) => {
- //loading.close();
-
- var allFloor = res.data.content || [];
- allFloor = allFloor.filter(function(item) {
- return item.spaceNum > 0;
- });
- this.allFloor = allFloor;
- var allFloorNum = allFloor.length;
- //如果超过7层 就显示两屏幕 第一屏 firstPageNum
- //如果超过7层 就显示两屏幕 第二屏 secondPageNum
- var firstPageNum, secondPageNum;
- if (allFloorNum <= 7) {
- firstPageNum = allFloorNum;
- secondPageNum = 0;
- } else {
- firstPageNum = Math.ceil(allFloorNum / 2);
- secondPageNum = Math.floor(allFloorNum / 2);
- }
- this.nowPage = 1; //取第一屏
- var firstMaxSpace = this.floorHandle(firstPageNum); //第一屏 一层最多空间
- var sendMaxSpace = this.floorHandle(secondPageNum);
- var firstPageFloors = allFloor.slice(0, firstPageNum); //第一屏 所有楼层
- var secondPageFloors = allFloor.slice(firstPageNum);
- this.firstPageParams = firstPageFloors.map((item) => {
- var obj = {};
- obj.id = item.id;
- obj.projectId = "Pj1101020002";
- obj.spaceNum = firstMaxSpace;
- return obj;
- });
- this.secondPageParams = secondPageFloors.map((item) => {
- var obj = {};
- obj.id = item.id;
- obj.projectId = "Pj1101020002";
- obj.spaceNum = sendMaxSpace;
- return obj;
- });
- this.nowIndicatorIndex = 0;
- var floorparam =
- this.nowPage == 1
- ? this.firstPageParams
- : this.secondPageParams;
- this.queryParam(floorparam);
- }).catch((res) =>{
- // loading.close();
- });
- },
- queryParam(floorparam) {
- //var loading = this.$loading({ fullscreen: true });
- // Tdb 温度
- // CO2 二氧化碳
- // RH 湿度
- // HCHO甲醛
- // PM2d5 pm2.5
- var endTime = moment();
- var startTime = moment().subtract(15, "minutes");
- var startStr = startTime.format("YYYYMMDDHHmmss");
- var endStr = endTime.format("YYYYMMDDHHmmss");
- var param = this.selIndicator.code;
- this.$axios
- .post(
- `${this.$api.queryParam}?endTime=${endStr}&startTime=${startStr}¶m=${param}`,
- floorparam
- )
- .then((res) => {
- //loading.close();
-
- var showFloors = res.data.content || [];
- showFloors.forEach((ele) => {
- var filterFloorarr = this.allFloor.filter((item) => {
- return item.id == ele.id;
- });
- var filterFloor = filterFloorarr[0] || {};
- ele.name = filterFloor.name;
- ele.localId = filterFloor.localId;
- ele.localName = filterFloor.localName;
- var dataSpacesNum = (ele.dataSpaces || []).length;
- var lineNum = this.spaceHandle(dataSpacesNum); //一行的个数
- //debugger;
- ele.spacewidth = 100 / lineNum;
- });
- this.showFloors = showFloors;
-
- });
- },
- floorHandle(floorNum) {
- //返回一层 最多多少房间
- var maxFloorSpace = 1; //一层 最多显示房间数
- switch (floorNum) {
- case 1:
- maxFloorSpace = 160;
- break;
- case 2:
- maxFloorSpace = 80;
- break;
- case 3:
- maxFloorSpace = 50;
- break;
- case 4:
- maxFloorSpace = 30;
- break;
- case 5:
- case 6:
- case 7:
- maxFloorSpace = 20;
- break;
- }
- return maxFloorSpace;
- },
- spaceHandle(spaceNum) {
- //返回一层 的每一行 几个房间
- var lineNum = spaceNum; //一行的房间数
- var floorline = Math.ceil(spaceNum / 10); //20-30 3排 30-40个 4排 所以一排10个
- lineNum = Math.ceil(spaceNum / floorline);
- return lineNum;
- //debugger;
- },
- },
- };
- </script>
- <style lang="less" scoped>
- .topChange {
- height: 194px;
- // width: 1000px;
- margin: 0 auto;
- background: #ffffff;
- .allIndicator {
- padding-top: 32px;
- padding-bottom: 20px;
- display: flex;
- align-items: center;
- justify-content: center;
- .eachItem {
- cursor: pointer;
- font-size: 24px;
- color: #9b98ad;
- margin-right: 60px;
- display: flex;
- flex-direction: column;
- align-items: center;
- .bar {
- width: 24px;
- height: 6px;
- display: inline-block;
- }
- &.select {
- color: #3b3558;
- .bar {
- background: #46ccf6;
- }
- }
- }
- }
- .imageDiv {
- height: 32px;
- margin: 0 32px;
- text-align: center;
- }
- .textCont {
- color: #3b3558;
- font-size: 20px;
- font-weight: 600;
- text-align: center;
- padding-top: 16px;
- .value {
- margin-left: 4px;
- }
- }
- }
- .floorWrap {
- // width: 1000px;
- margin: 0 auto;
- background: #ffffff;
- .floor-item {
- display: flex;
- padding: 18px 0;
- box-sizing: border-box;
- background: linear-gradient(
- 161.44deg,
- rgba(50, 129, 246, 0.1) 6.16%,
- rgba(50, 129, 246, 0) 81.03%
- );
- }
- .floor-num {
- display: flex;
- justify-content: center;
- align-items: center;
- font-family: Persagy;
- font-size: 36px;
- font-weight: 700;
- line-height: 43px;
- color: #3b3558;
- width: 80px;
- flex-shrink: 0;
- }
- .floor-space {
- display: flex;
- flex: 1;
- flex-wrap: wrap;
- .space-box {
- padding: 4px;
- box-sizing: border-box;
- .space-name {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 86px;
- min-width: 80px;
- border-radius: 8px;
- background: #d9f5d6;
- text-align: center;
- }
- }
- }
- }
- </style>
|