sagacloud-new-daping/src/components/HorFloorSpace.vue

<template>
  <div
    class="floorSpace"
    :class="[screenType === 'hor' ? 'horiFloorClass ' : 'verFloorClass ']"
  >
    <div class="buildName" v-show="allBuild.length">
      {{ nowBuildName }}
    </div>
    <div class="leftChange" v-if="screenType == 'hor'">
      <div class="allIndicator">
        <div
          class="showItem"
          v-bind:style="{
            top: selIndicator.index * 16 + '%',
          }"
        >
          <div class="title">{{ selIndicator.name }}</div>
          <div class="ltextCont">
            <div class="value">{{ totalAvgValues }}{{ selIndicator.unit }}</div>
            <div class="name">平均{{ selIndicator.name }}</div>
          </div>
          <div class="other">
            <img class="img" :src="selIndicator.img" />
          </div>
        </div>
        <div
          class="eachItem"
          v-for="(item, index) in allIndicator"
          @click="clickIndicator(index)"
          v-bind:class="{ select: item.id == selIndicator.id }"
        >
          <div class="title">{{ item.name }}</div>
          <!-- <div class="textCont" v-show="item.id == selIndicator.id">
                        <span class="value"
                            >{{ totalAvgValues }}{{ selIndicator.unit }}</span
                        ><br /><span class="name"
                            >平均{{ selIndicator.name }}</span
                        >
                    </div>
                    <img
                        v-show="item.id == selIndicator.id"
                        class="img"
                        :src="selIndicator.img"
                    /> -->
        </div>
      </div>
    </div>
    <div class="topChange" v-if="screenType == 'ver'">
      <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>
          <!-- <img
                        class="bar"
                        src="@/assets/image/horImg/lastAllLight.png"
                    /> -->
        </div>
      </div>
      <div class="imageDiv">
        <img :src="selIndicator.verimg" />
      </div>
      <div class="textCont">
        平均<span>{{ selIndicator.name }}</span
        ><span class="value">{{ totalAvgValues }}</span
        ><span>
          {{ selIndicator.unit }}
        </span>
      </div>
    </div>
    <div class="floorWrap" id="floorWrap">
      <div
        class="floor-item"
        v-for="(item, index) in showFloors"
        :key="index"
        v-bind:style="{ height: item.floorHeight + 'px' }"
      >
        <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 + '%',
              height: item.spaceheight + '%',
            }"
          >
            <div
              class="space-name"
              v-bind:style="{
                backgroundColor: selectColor(
                  childItem.avgValues,
                  selIndicatorId,
                  true
                ),
              }"
            >
              {{ childItem.localName }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { ref, defineComponent, reactive, toRefs, onMounted } from "vue";
import { queryBuilding, queryFs, queryParam } from "@/api/index";
import useProjectStore from "@/store/useProjectStore";
import { dapingImage } from "@/utils/dapingImage";
import moment from "moment";
import { selectColor } from "@/utils/publicMethod";

export default defineComponent({
  props: {
    screenType: {
      type: String,
    },
    showPing: {
      type: Number,
    },
  },
  setup(props, contx) {
    const {
      floor_co2,
      floor_jiaquan,
      floor_pm25,
      floor_shidu,
      floor_wendu,
      floor_co2_ver,
      floor_jiaquan_ver,
      floor_pm25_ver,
      floor_shidu_ver,
      floor_wendu_ver,
    } = dapingImage;
    const projectStore = useProjectStore();

    let intervalNumber = 3000;

    if (projectStore.projectId === "Pj1101050057") {
      intervalNumber = 10000;
    }

    const allData = reactive({
      selectColor: selectColor,
      timeoutsign: null,
      selIndicator: {},
      selIndicatorId: "", //为了颜色用
      //              温度
      nowIndicatorIndex: null, //现在选中的指标 index
      allIndicator: [
        {
          id: "temp",
          index: 0,
          code: "Tdb",
          name: "温度",
          img: dapingImage.floor_wendu,
          verimg: dapingImage.floor_wendu_ver,
          unit: "℃",
          fixed: 1,
        },
        {
          id: "humidity",
          index: 1,
          code: "RH",
          name: "湿度",
          img: dapingImage.floor_shidu,
          verimg: dapingImage.floor_shidu_ver,
          unit: "%",
          fixed: 0,
        },
        {
          id: "co2",
          index: 2,
          code: "CO2",
          name: "CO₂",
          img: dapingImage.floor_co2,
          verimg: dapingImage.floor_co2_ver,
          unit: "ppm",
          fixed: 0,
        },
        {
          id: "methanal",
          index: 3,
          code: "HCHO",
          name: "甲醛",
          img: dapingImage.floor_jiaquan,
          verimg: dapingImage.floor_jiaquan_ver,
          unit: "mg/m³",
          fixed: 2,
        },
        {
          id: "pm25",
          index: 4,
          code: "PM2d5",
          name: "PM2.5",
          img: dapingImage.floor_pm25,
          verimg: dapingImage.floor_pm25_ver,
          unit: "ug/m³",
          fixed: 0,
        },
      ],
      allBuild: [],
      nowBuildName: "",
      nowBuildPage: 1, //目前是第几个建筑

      allFloor: [],
      firstPageParams: [],
      secondPageParams: [],
      nowPage: 1, //当前哪一屏幕
      pageNum: 0,
      showFloors: [],
      totalAvgValues: null,
      hqueryBuild() {
        queryBuilding()
          .then((res) => {
            var data = (res.data || {}).content || [];
            //debugger;
            if (projectStore.projectId == "Pj3301100002") {
              var filterdata = data.filter((item) => {
                return item.localName == "1#楼";
              });
              allData.allBuild = filterdata;
            } else {
              allData.allBuild = data;
            }

            allData.nowBuildPage = 1;

            allData.fqueryFs();
          })
          .catch((res) => {
            contx.emit("donetowpage"); // 所有建筑切换完毕
            // loading.close();
          });
      },
      fqueryFs() {
        //var loading = this.$loading({ fullscreen: true });
        //debugger;
        var buildId = (allData.allBuild[allData.nowBuildPage - 1] || {}).id; //当前的建筑id
        if (!buildId) {
          return;
        }

        queryFs({
          criteria: {
            projectId: projectStore.projectId,
            buildingId: buildId,
          },
          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;
            });

            //如果该建筑的所有楼层 没有空间 则请求下一个建筑
            if (allFloor.length == 0) {
              //换下一栋楼
              allData.nowBuildPage = allData.nowBuildPage + 1;
              if (allData.nowBuildPage > allData.allBuild.length) {
                contx.emit("donetowpage"); // 所有建筑切换完毕
                return;
              }
              allData.fqueryFs();
              return;
            }
            allData.nowBuildName =
              allData.allBuild[allData.nowBuildPage - 1].localName;

            allData.allFloor = allFloor;
            var allFloorNum = allFloor.length;
            //如果超过7层 就显示两屏幕 第一屏 firstPageNum
            //如果超过7层 就显示两屏幕 第二屏 secondPageNum
            var firstPageNum, secondPageNum;
            if (allFloorNum <= 7) {
              firstPageNum = allFloorNum;
              secondPageNum = 0;
              allData.pageNum = 1;
            } else {
              firstPageNum = Math.ceil(allFloorNum / 2);
              secondPageNum = Math.floor(allFloorNum / 2);
              allData.pageNum = 2;
            }

            var firstMaxSpace = allData.floorHandle(firstPageNum); //第一屏 一层最多空间
            var sendMaxSpace = allData.floorHandle(secondPageNum);
            var firstPageFloors = allFloor.slice(0, firstPageNum); //第一屏 所有楼层
            var secondPageFloors = allFloor.slice(firstPageNum); //第二屏 所有楼层
            //第一屏的参数 第二屏的参数
            allData.firstPageParams = firstPageFloors.map((item) => {
              var obj = {};
              obj.id = item.id;
              obj.projectId = projectStore.projectId;
              obj.spaceNum = firstMaxSpace; //最多空间数
              return obj;
            });

            allData.secondPageParams = secondPageFloors.map((item) => {
              var obj = {};
              obj.id = item.id;
              obj.projectId = projectStore.projectId;
              obj.spaceNum = sendMaxSpace;
              return obj;
            });

            allData.nowIndicatorIndex = 0;
            //debugger;
            allData.getTimeFloorParam(intervalNumber);
          })
          .catch(function (res) {
            // loading.close();
            allData.nowBuildPage = allData.nowBuildPage + 1;
            if (allData.nowBuildPage > allData.allBuild.length) {
              contx.emit("donetowpage"); // 所有建筑切换完毕
              return;
            }
            allData.fqueryFs();
          });
      },
      toplay() {
        allData.getTimeFloorParam(500);
      },
      tostop() {
        clearTimeout(allData.timeoutsign);
      },
      getTimeFloorParam(time) {
        //第一屏的参数 第二屏的参数
        var floorparam =
          allData.nowPage == 1
            ? allData.firstPageParams
            : allData.secondPageParams;

        allData
          .fqueryParam(floorparam)
          .then(() => {
            if (projectStore.stopSign) {
              return;
            }
            allData.timeoutsign = setTimeout(() => {
              //debugger;
              allData.nowIndicatorIndex = allData.nowIndicatorIndex + 1; //湿度等指标的轮询变化
              if (allData.nowIndicatorIndex == 5) {
                //如果指标轮询结束 通知切换
                if (allData.pageNum == allData.nowPage) {
                  allData.nowPage = 1;
                  if (allData.nowBuildPage == allData.allBuild.length) {
                    contx.emit("donetowpage");
                    clearTimeout(allData.timeoutsign);
                  } else {
                    //换下一个建筑
                    allData.nowBuildPage = allData.nowBuildPage + 1;
                    allData.fqueryFs();
                  }
                  return;
                }
                //如果是两页 并且nowPage是第一页
                if (allData.pageNum == 2 && allData.nowPage == 1) {
                  allData.nowPage = 2;
                  allData.nowIndicatorIndex = 0;
                }
              }
              allData.getTimeFloorParam(intervalNumber);
            }, time);
          })
          .catch(() => {
            //debugger;
          });
      },
      fqueryParam(floorparam) {
        var endTime = moment();
        var startTime = moment().subtract(30, "minutes");
        var startStr = startTime.format("YYYYMMDDHHmmss");
        var endStr = endTime.format("YYYYMMDDHHmmss");
        var newv = allData.nowIndicatorIndex;
        //debugger;
        allData.selIndicator = allData.allIndicator[newv];
        var param = allData.selIndicator.code;

        return queryParam(endStr, startStr, param, floorparam)
          .then((res) => {
            //loading.close();
            //debugger;
            var showFloors = (res.data.data || {}).floors || [];
            allData.totalAvgValues = res.data.data.avgValues || null;
            allData.totalAvgValues &&
              (allData.totalAvgValues = allData.totalAvgValues.toFixed(
                allData.selIndicator.fixed
              ));
            var wrapHeight =
              document.getElementById("floorWrap") &&
              document.getElementById("floorWrap").offsetHeight;
            showFloors.forEach((ele) => {
              var filterFloorarr = allData.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 floorParam = allData.spaceHandle(dataSpacesNum); //一行的个数

              ele.spacewidth = 100 / floorParam.lineNum;
              ele.spaceheight = 100 / floorParam.floorline; //每一行的高度
              ele.floorHeight = wrapHeight / showFloors.length; //每一层的高度
            });
            allData.showFloors = showFloors;
            allData.selIndicatorId = allData.selIndicator.id;
          })
          .catch((err) => {
            //debugger;
          });
      },
      spaceHandle(spaceNum) {
        //返回一层 的每一行 几个房间
        var lineNum = spaceNum; //一行的房间数
        var floorline = Math.ceil(spaceNum / 14); //20-30 3排 30-40个 4排 所以一排10个
        lineNum = Math.ceil(spaceNum / floorline);
        return { lineNum, floorline };
        //debugger;
      },
      floorHandle(floorNum) {
        //返回一层 最多多少房间
        var maxFloorSpace = 28; //一层 最多显示房间数
        // 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;
      },
    });

    onMounted(() => {
      allData.nowPage = 1;
      allData.hqueryBuild();
      //console.log("floorspace-mounted");
    });
    return { ...toRefs(allData) };
  },
});
</script>

<style lang="scss" scoped>
.floorSpace {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  border-radius: 16px;
  .buildName {
    position: absolute;
    top: -40px;
    left: -40px;
    background: linear-gradient(
      90deg,
      rgba(131, 195, 255, 0.16) 0%,
      rgba(131, 195, 255, 0) 100%
    );
    height: 46px;
    line-height: 46px;
    font-size: 20px;
    //min-width: 145px;
    padding: 0 20px;
    color: #f7ecdb;
    box-sizing: border-box;
  }
}

.topChange {
  height: 220px;
  width: 100%;
  margin: 0 auto;
  background: #ffffff;
  position: relative;
  background: rgba(149, 162, 194, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 20px;

  .allIndicator {
    position: relative;
    padding-top: 36px;
    padding-bottom: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    .eachItem {
      cursor: pointer;
      font-size: 28px;
      font-weight: 600;
      color: #9b98ad;
      margin-right: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 90px;

      .bar {
        width: 80px;
      }
      &.select {
        color: #f7e6cd;
        background-image: url("@/assets/image/horImg/lastAllLight.png");
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100%;
        padding-bottom: 7px;
        // .bar {
        //     // background: #46ccf6;
        // }
      }
    }
  }
  .imageDiv {
    height: 32px;
    margin: 0 32px;
    font-size: 0;
    text-align: center;
    img {
      font-size: 0;
      height: 100%;
    }
  }
  .textCont {
    color: #f7e6cd;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    padding-top: 16px;
    .value {
      margin-left: 6px;
    }
  }
}

.leftChange {
  height: 100%;
  width: 154px;
  box-sizing: border-box;
  padding: 65px 0 20px;
  margin: 0 auto;
  position: relative;
  //min-height: 730px;

  .allIndicator {
    // padding-top: 65px;
    //padding-bottom: 20px;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    position: relative;
    height: 100%;
    .showItem {
      transition: all 400ms linear;
      // height: 342px;
      height: 36%;
      box-sizing: border-box;
      padding-top: 20px;
      position: absolute;
      top: 0;
      left: 16px;
      width: 120px;
      // display: flex;
      // flex-direction: column;
      background-color: rgba(100, 108, 130, 0.2);
      backdrop-filter: blur(10px);
      background-image: url("@/assets/image/horImg/twoLight.png");
      background-repeat: no-repeat;
      background-position: center top;
      background-size: 100%;
      border-radius: 10px;
      text-align: center;
      .other {
        height: 60%;
        padding: 14px 0;
        box-sizing: border-box;
        font-size: 0;
        .img {
          height: 100%;
          padding: 0;
          margin: 0;
        }
      }
      .title {
        color: #f7ecdb;
        font-size: 24px;
        //font-size: 1.3vw;
        height: 20%;
        font-weight: 600;
      }
      .ltextCont {
        color: #f7ecdb;
        line-height: 23px;
        height: 20%;

        .value {
          font-weight: 700;
          font-size: 20px;
          font-family: PersagyBold;
        }
        .name {
          font-weight: 400;
          font-size: 14px;
        }
      }
    }
    .eachItem {
      cursor: pointer;
      //margin-bottom: 56px;
      padding-top: 20px;
      // height: 90px;
      height: 16%;
      box-sizing: border-box;
      text-align: center;
      font-family: PingFang SC;
      .title {
        color: #9b98ad;
        font-size: 24px;
        font-weight: 600;
      }
      &.select {
        // height: 350px;
        height: 36%;
      }
    }
    .eachItem:last-child {
      margin-bottom: 0;
    }
  }
}

.floorWrap {
  flex: 1;
  margin: 0 auto;
  // background: #ffffff;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;

  box-sizing: border-box;
  .floor-item {
    display: flex;
    padding: 18px 20px 18px 0;
    box-sizing: border-box;
    // background: linear-gradient(
    //     186deg,
    //     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: PersagyBold;
    font-size: 36px;
    font-weight: bold;
    line-height: 43px;
    color: #f7ecdb;
    width: 90px;
    flex-shrink: 0;
  }
  .floor-space {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    font-size: 14px;
    .space-box {
      padding: 4px;
      box-sizing: border-box;
      .space-name {
        display: flex;
        justify-content: center;
        align-items: center;
        //height: 86px;
        height: 100%;
        min-width: 20px;
        border-radius: 8px;
        color: #f7ecdb;
        backdrop-filter: blur(5px);
        background: rgba(34, 139, 81, 0.76);
        text-align: center;
        padding: 0 8px;
        box-sizing: border-box;
        font-weight: 500;
        font-family: Persagy;
      }
    }
  }
}
.verFloorClass {
  display: block;
  .floorWrap {
    padding-top: 14px;
    height: calc(100% - 220px);
  }
  .buildName {
    top: -55px;
  }
}
</style>