公司网站推广运营,浙江网络公司网站建设,个人在网站怎么做,做代金券的网站需求背景解决效果视频效果2dFloor.vue 需求背景
需要实线一个2d楼宇模型#xff0c;并按照租户温度渲染颜色
解决效果 视频效果
2dFloor.vue
!--/*** author: liuk* date: 2023/12/06* describe: 2d楼宇模型* CSDN:https://blog.csdn.net/hr_beginner?typeblog*/--并按照租户温度渲染颜色
解决效果 视频效果
2dFloor.vue
!--/*** author: liuk* date: 2023/12/06* describe: 2d楼宇模型* CSDN:https://blog.csdn.net/hr_beginner?typeblog*/--
templatediv classbuilding-floor-container-bg/divdiv classbuilding-floor-containerdiv classbuilding-floor-leftdiv classfloor-container reffloorDivdiv classfloor-item v-for(item, index) in floorList :keyitem.label:style{height: index floorList.length - 1 ? 235px : 297px}span classfloor-item-content{{ item.label }}/span/div/div/divdiv classbuilding-floor-centerdiv classbuilding-floor-center-unitdiv classunit-container refunitDivspan classunit-title-item v-for(_,index) in householdData :keyindex:style{width:${infoModel.building_no_info.maximum *60}px}{{ index 1 }}单元/span/div/divdiv classbuilding-floor-center-household :style{ cursor: isDragging ? move : default }refcontainerDivdiv classhousehold-container refhouseholdDivdiv classunit-item v-for(unitnums,index1) in householdData :keyindex1:style{width:${infoModel.building_no_info.maximum * 60}px}div classfloor-item v-for(floors,index2) in unitnums :keyindex2div classhousehold-item-box v-foritem in floors :keyitem.numberclick.stopclickBox(item.household_id,$event)el-tooltip effectcustom-tip-content placementbottom-start :offset3 :disabledisDragging:hide-after0 triggerhover :show-arrowfalsetemplate #contentdiv stylemin-width: 201px;height: 125px;background: #262626 !important;border: 1px solid rgba(84, 84, 84, 1);box-shadow: -10px 0px 22px 0px rgba(0, 0, 0, 0.22);border-radius: 4px;padding: 20px;user-select: none; v-ifitem.household_idspan stylefont-size: 16px{{props.props.community}}-{{ props.props.building_no }}-{{ item.unitnum }}单元-{{ item.number }}/spandiv styledisplay: flex;justify-content: space-between;margin: 20px 0 30px;divdivspan stylefont-size: 20px{{ formatToFixed(item.tt401_value) }}/spanspan stylecolor: #a5a6a6; margin-left: 8px℃/span/divspan stylecolor: #a5a6a6当前室温/span/divdivdivspan stylefont-size: 20px{{ formatToFixed(item.tt401_value_24hours) }}/spanspan stylecolor: #a5a6a6; margin-left: 8px℃/span/divspan stylecolor: #a5a6a624小时住户均温/span/div/div/div/templatediv classhousehold-item v-ifitem.status!offline:style{background: getColorByTemperature(item.status,item.temperature),opacity:item.isOpacity?0.3:1}span classhousehold-item-temperature{{item.status ! enabled ? formatToFixed(item.temperature ,1): nbsp; }}/spanspan classhousehold-item-number{{ item.number }}/span/divdiv v-else classhousehold-item offlinespan classhousehold-item-temperature{{ nbsp; }}/spanspan classhousehold-item-number{{ item.number }}/span/div/el-tooltip/div/div/div/divdiv classhousehold-mask:style{boxShadow:inset 0px 10px 10px 10px rgba(16, 16, 16, 0.8)}/div/div/divdiv classpagination-bottomdiv classbtn-pagination-bottom clickonClickNextel-icon size20 color#A5A6A6ArrowLeft//el-icon/divdiv classbtn-pagination-bottom clickonClickPreel-icon size20 color#A5A6A6ArrowRight//el-icon/div/divdiv classpagination-rightdiv classbtn-pagination-right clickonClickUpel-icon size20 color#A5A6A6ArrowUp//el-icon/divdiv classbtn-pagination-right clickonClickDownel-icon size20 color#A5A6A6ArrowDown//el-icon/div/div/div
/templatescript langts setup
import {reactive, ref, toRefs, watch, getCurrentInstance, onMounted, nextTick} from vue;
import useModelInfo from ../index
import {formatToFixed} from /utils/dictionary;const infoModel useModelInfo()
// REfs
const householdDiv ref(null)
const containerDiv ref(null)
const unitDiv ref(null)
const floorDiv ref(null)// Props
const props defineProps([props, allHouseData])
const {proxy} getCurrentInstance()
const model reactive({curItem: {number: ,temperature: },preItem: {number: ,temperature: },householdData: [],isDragging: false,proBoxId: null,//缓存上一个格子对象floorList: [],curCeill: 0,
})const {curItem, isDragging, householdData, floorList, curCeill} toRefs(model)onMounted(() {if (!props.allHouseData) returnrenderFloor()
})watch(() props.allHouseData, () {if (!props.allHouseData) returnrenderFloor()
})watch(() infoModel.household_id, (id) {if (!id) {infoModel.household_id model.householdData.forEach(unitnums {unitnums.forEach(floors {floors.forEach(item item.isOpacity false)})})proxy.$forceUpdate()} else {model.householdData.forEach(unitnums {unitnums.forEach(floors {floors.forEach(item item.isOpacity (id item.household_id ? false : true))})})model.proBoxId idproxy.$forceUpdate()}
})const renderFloor () { // 渲染楼栋const {floor, maximum, unitnum} infoModel.building_no_info // {floor:6,maximum:3,unitnum:5}// 楼层 最大户数 单元数model.householdData new Array(unitnum).fill([]).map((_, i1) new Array(floor).fill([]).map((_, i2) new Array(maximum).fill({}).map((_, i3) {const id ${String(i1 1).padStart(2, 0)}_${String(i2 1).padStart(2, 0)}${String(i3 1).padStart(2, 0)}const curData props.allHouseData.find(item item.household_id.slice(-9,-2) id) || {}return {id,unitnum: i1 1,number: (i2 1) String(i3 1).padStart(2, 0),isOpacity: false,temperature:15 Math.random()*11,status:,// temperature: curData.tt401_value || 0,// status: curData.household_id ? curData.tt401_value ? : enabled : offline,...curData}})).reverse())model.floorList new Array(Math.floor(floor / 5) 1).fill([]).map((_, i) ({label: i ? i * 5 F : 1F,})).reverse()nextTick(() {doMouseFn()})
}// 点击房间
const clickBox (id) {if (model.proBoxId id) {infoModel.household_id null} else {infoModel.household_id id}
}// 住户根据室温渲染单元格样式
const getColorByTemperature (status: string, temperature: number) {switch (true) {case status enabled:return #565656;case temperature 26:return #bd0000case temperature 24 temperature 26:return #e76200case temperature 22 temperature 24:return #eb7926case temperature 20 temperature 22:return #ee914ccase temperature 18 temperature 20:return #f2a872case temperature 18:return #2692ffdefault:return transparent}
};// 楼层单元平移事件
const doMouseFn () {let offsetX: number, offsetY: number;// 水平方向最大偏移量const MaxOffsetWidth householdDiv.value.getBoundingClientRect().width - containerDiv.value.getBoundingClientRect().width - 10;// 竖直方向最大偏移量const MaxOffsetHeight householdDiv.value.getBoundingClientRect().height - containerDiv.value.getBoundingClientRect().height;containerDiv.value.addEventListener(mousedown, (event: any) {isDragging.value true;offsetX event.clientX - householdDiv.value.offsetLeft;offsetY event.clientY - householdDiv.value.offsetTop;});containerDiv.value.addEventListener(mousemove, (event: any) {if (isDragging.value) {let x event.clientX - offsetX;let y event.clientY - offsetY;if (Math.abs(x) MaxOffsetWidth) {x -MaxOffsetWidth;} else if (x 0) {x 0;}if (Math.abs(y) MaxOffsetHeight) {y -MaxOffsetHeight;} else if (y 0) {y 0;}const bottom y -MaxOffsetHeight ? 0 : -(MaxOffsetHeight - Math.abs(y));householdDiv.value.style.left x px;householdDiv.value.style.bottom bottom px;unitDiv.value.style.left x px;floorDiv.value.style.bottom 15 bottom px;}});containerDiv.value.addEventListener(mouseup, () {isDragging.value false;});document.addEventListener(mouseup, () {isDragging.value false;});
}
// 左移按钮响应事件
const onClickPre () {const offsetLeft householdDiv.value.offsetLeft;// 水平方向最大偏移量const MaxOffsetWidth householdDiv.value.getBoundingClientRect().width - containerDiv.value.getBoundingClientRect().width - 10;if (householdDiv.value) {if (Math.abs(offsetLeft) MaxOffsetWidth offsetLeft 0) {const left Math.abs(offsetLeft - 60) MaxOffsetWidth ? -MaxOffsetWidth : offsetLeft - 60;householdDiv.value.style.left left px;unitDiv.value.style.left left px;}}
};// 右移按钮响应事件
const onClickNext () {const offsetLeft householdDiv.value.offsetLeft;if (householdDiv.value) {if (offsetLeft 0) {const left offsetLeft 60 0 ? 0 : offsetLeft 60;householdDiv.value.style.left left px;unitDiv.value.style.left left px;}}
};// 上移按钮响应事件
const onClickUp () {const offsetTop householdDiv.value.offsetTop;// 竖直方向最大偏移量const MaxOffsetHeight householdDiv.value.getBoundingClientRect().height - containerDiv.value.getBoundingClientRect().height;if (householdDiv.value) {if (offsetTop 0) {const top offsetTop 60 0 ? 0 : offsetTop 60;const bottom top 0 ? -MaxOffsetHeight : -(MaxOffsetHeight - Math.abs(top));householdDiv.value.style.bottom bottom px;floorDiv.value.style.bottom 15 bottom px;}}
};// 下移按钮响应事件
const onClickDown () {const offsetTop householdDiv.value.offsetTop;// 竖直方向最大偏移量const MaxOffsetHeight householdDiv.value.getBoundingClientRect().height - containerDiv.value.getBoundingClientRect().height;if (householdDiv.value) {if (Math.abs(offsetTop) MaxOffsetHeight offsetTop 0) {const top Math.abs(offsetTop - 60) MaxOffsetHeight ? -MaxOffsetHeight : offsetTop - 60;const bottom top -MaxOffsetHeight ? 0 : -(MaxOffsetHeight - Math.abs(top));householdDiv.value.style.bottom bottom px;floorDiv.value.style.bottom 15 bottom px;}}
};
/scriptstyle langscss scoped
.building-floor-container-bg {position: absolute;bottom: 7vh;left: 295px;width: 932px;height: 114px;background: url(/assets/heatMap/dd6bj.svg) no-repeat center/932px 114px;//background: red;}.building-floor-container {position: absolute;width: 800px; //821px;height: 780px; //775px;// top: 96px;bottom: 10vh;left: 359px;background: url(/assets/heatMap/zz.svg) no-repeat center;background-size: 105% 102%;.building-floor-center {display: flex;flex-direction: column;position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 85%;height: 93%;padding: 0 20px 20px;.building-floor-center-unit {position: relative;width: 100%;height: 10%;overflow: hidden;user-select: none;.unit-container {display: flex;align-items: center;position: absolute;left: 0;top: 10px;.unit-title-item {margin-right: 10px;font-size: 16px;text-align: center;}}}.building-floor-center-household {position: relative;width: 100%;height: 90%;overflow: hidden;-moz-user-select: none; /*火狐*/-webkit-user-select: none; /*webkit浏览器*/-ms-user-select: none; /*IE10*/-khtml-user-select: none; /*早期浏览器*/user-select: none;.household-container {display: flex;position: absolute;left: 0;bottom: 0;.unit-item {display: flex;flex-wrap: wrap;margin-right: 10px;.floor-item {display: flex;width: 100%;height: 60px;}.household-item-box {width: 60px;height: 60px;padding: 4px;.household-item {position: relative;width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;border-radius: 2px;padding: 4px;cursor: pointer;.offline::after {content: ;position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: url(/assets/icons/DW.svg) no-repeat center/cover;opacity: 0.5;}:hover {outline: 1px solid #fff;}.household-item-temperature {font-size: 16px;}.household-item-number {font-size: 12px;}}}}}.household-mask {width: 100%;height: 100%;position: absolute;top: 0;left: 0;pointer-events: none;}}}.building-floor-left {position: absolute;top: 0px;left: -30px;width: 60px;height: 90%;overflow: hidden;user-select: none;.floor-container {position: absolute;bottom: 15px;left: 0;width: 100%;.floor-item {width: 100%;display: flex;align-items: flex-end;.floor-item-content {display: flex;justify-content: center;background: rgba(255, 255, 255, 0.06);border-radius: 20px;color: #a5a6a6;padding: 2px 12px;}}}}.pagination-bottom {display: flex;align-items: center;position: absolute;bottom: 0px;left: 50%;transform: translateX(-50%);.btn-pagination-bottom {display: flex;justify-content: center;align-items: center;width: 32px;height: 32px;border-radius: 50%;border: 0.5px solid #a5a6a6;margin: 0 12px;cursor: pointer;}}.pagination-right {display: flex;flex-direction: column;align-items: center;position: absolute;right: -28px;top: 50%;transform: translateY(-50%);.btn-pagination-right {display: flex;justify-content: center;align-items: center;width: 32px;height: 32px;border-radius: 50%;border: 0.5px solid #a5a6a6;margin: 12px 0;cursor: pointer;}}
}
/style
