|
@@ -0,0 +1,715 @@
|
|
|
+<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="textCont">
|
|
|
+ <span class="value"
|
|
|
+ >{{ totalAvgValues }}{{ selIndicator.unit }}</span
|
|
|
+ ><br /><span class="name"
|
|
|
+ >平均{{ selIndicator.name }}</span
|
|
|
+ >
|
|
|
+ </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();
|
|
|
+ const allData = reactive({
|
|
|
+ selectColor: selectColor,
|
|
|
+ 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) => {
|
|
|
+ // 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();
|
|
|
+ })
|
|
|
+ .catch(function (res) {
|
|
|
+ // loading.close();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getTimeFloorParam() {
|
|
|
+ //第一屏的参数 第二屏的参数
|
|
|
+ var floorparam =
|
|
|
+ allData.nowPage == 1
|
|
|
+ ? allData.firstPageParams
|
|
|
+ : allData.secondPageParams;
|
|
|
+
|
|
|
+ allData.fqueryParam(floorparam).then(() => {
|
|
|
+ var 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"); //todo
|
|
|
+ clearTimeout(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();
|
|
|
+ }, 2000);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ 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();
|
|
|
+ });
|
|
|
+ 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: 5px;
|
|
|
+ // .bar {
|
|
|
+ // // background: #46ccf6;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .imageDiv {
|
|
|
+ height: 32px;
|
|
|
+ margin: 0 32px;
|
|
|
+ text-align: center;
|
|
|
+ img {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .textCont {
|
|
|
+ color: #f7e6cd;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 16px;
|
|
|
+ .value {
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.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: 62%;
|
|
|
+ padding: 10px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .img {
|
|
|
+ height: 100%;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ color: #f7ecdb;
|
|
|
+ font-size: 24px;
|
|
|
+ font-size: 1.3vw;
|
|
|
+ height: 18%;
|
|
|
+ }
|
|
|
+ .textCont {
|
|
|
+ color: #f7ecdb;
|
|
|
+ font-size: 20px;
|
|
|
+ font-size: 1.1vw;
|
|
|
+ line-height: 1;
|
|
|
+ height: 20%;
|
|
|
+ .value {
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ 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: Persagy;
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 43px;
|
|
|
+ color: #f7ecdb;
|
|
|
+ width: 90px;
|
|
|
+ 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;
|
|
|
+ height: 100%;
|
|
|
+ min-width: 20px;
|
|
|
+ border-radius: 8px;
|
|
|
+ color: #f7ecdb;
|
|
|
+
|
|
|
+ background: rgba(34, 139, 81, 0.76);
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.verFloorClass {
|
|
|
+ height: auto;
|
|
|
+ display: block;
|
|
|
+ .floorWrap {
|
|
|
+ padding-top: 14px;
|
|
|
+ height: 700px;
|
|
|
+ }
|
|
|
+ .buildName {
|
|
|
+ top: -55px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|