123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613 |
- <template>
- <div class="curtain" v-if="curtainData && curtainData.length">
- <div class="curtain-top">
- <div class="curtain-desc">
- <p class="curtain-title">
- {{
- curtainData.length && curtainData.length == 1
- ? curtainData[0].name
- : "窗帘"
- }}
- </p>
- </div>
- <div class="curtain-right">
- <img
- v-if="
- curtainData[0].equipmentType !== 4 &&
- curtainData[0].equipmentType !== 5
- "
- :src="parseImgUrl('page-officehome', 'curtain_new.svg')"
- alt=""
- />
- <img
- v-else
- :src="parseImgUrl('page-officehome', 'curtain_roll.svg')"
- alt=""
- />
- </div>
- </div>
- <div
- class="curtain-box"
- v-if="curtainData.length && curtainData.length > 1"
- >
- <div class="top-nav">
- <span
- :class="type == 'all' ? 'nav-active' : ''"
- @click="checkNav('all')"
- >
- 总控制
- </span>
- <span
- :class="type == 'child' ? 'nav-active' : ''"
- @click="checkNav('child')"
- >
- 子设备
- </span>
- </div>
- </div>
- <template v-if="type == 'all'">
- <div
- class="line"
- v-if="curtainData.length && curtainData.length > 1"
- ></div>
- <div class="top-control">
- <div
- class="control-item"
- v-if="curtainData[0].isOpenSet"
- @click="openCurtainOpening(curtainData)"
- >
- <img
- class="curtain-opening-icon"
- :src="parseImgUrl('page-officehome', 'curtain_opening.svg')"
- alt=""
- />
- </div>
- <!--左关-下关-->
- <div
- class="control-item"
- :class="activeIndex == 1 ? 'control-item-active' : ''"
- @click="openCurtainMain(1)"
- >
- <template v-if="activeIndex !== 1">
- <img
- v-if="
- curtainData[0].equipmentType !== 4 &&
- curtainData[0].equipmentType !== 5
- "
- :src="parseImgUrl('page-officehome', 'curtain_left.svg')"
- alt=""
- />
- <img
- v-else
- :src="parseImgUrl('page-officehome', 'curtain_down.svg')"
- alt=""
- />
- </template>
- <span v-else>{{ count }}</span>
- </div>
- <!--暂停-->
- <!-- :class="activeIndex == 3 ? 'control-item-active' : ''" -->
- <div
- class="control-item"
- @click="openCurtainMain(3)"
- v-if="curtainData[0].stopSet"
- >
- <img
- :src="parseImgUrl('page-officehome', 'curtain_stop.svg')"
- alt=""
- />
- </div>
- <!--右开-->
- <div
- class="control-item"
- @click="openCurtainMain(2)"
- :class="activeIndex == 2 ? 'control-item-active' : ''"
- >
- <template v-if="activeIndex !== 2">
- <img
- v-if="
- curtainData[0].equipmentType !== 4 &&
- curtainData[0].equipmentType !== 5
- "
- :src="parseImgUrl('page-officehome', 'curtain_right.svg')"
- alt=""
- />
- <img
- v-else
- :src="parseImgUrl('page-officehome', 'curtain_up.svg')"
- alt=""
- />
- </template>
- <span v-else>{{ count }}</span>
- </div>
- </div>
- </template>
- <div class="curtain-child" v-if="type == 'child'">
- <div class="child-item" :key="item.id" v-for="item in curtainData">
- <div class="curtain-name">
- <div class="name">{{ item.name }}</div>
- <span v-if="item.isOpenSet">开度{{ item.openValue }}%</span>
- </div>
- <div class="curtain-control top-control">
- <div
- class="control-item"
- @click="openCurtainOpening([item])"
- v-if="item.isOpenSet"
- >
- <img
- :src="parseImgUrl('page-officehome', 'curtain_opening.svg')"
- alt=""
- />
- </div>
- <!--左边-->
- <div
- class="control-item"
- @click="openCurtainClid(item, 1)"
- :class="item.activeIndex == 1 ? 'control-item-active' : ''"
- >
- <template v-if="item.activeIndex != 1">
- <img
- v-if="item.equipmentType !== 4 && item.equipmentType !== 5"
- :src="parseImgUrl('page-officehome', 'curtain_left.svg')"
- alt=""
- />
- <img
- v-else
- :src="parseImgUrl('page-officehome', 'curtain_down.svg')"
- alt=""
- />
- </template>
- <span v-else>{{ item.count }}</span>
- </div>
- <!--暂停-->
- <!-- :class="item.activeIndex == 3 ? 'control-item-active' : ''" -->
- <div
- class="control-item control-stop"
- @click="openCurtainClid(item, 3)"
- v-if="item.stopSet"
- >
- <img
- :src="parseImgUrl('page-officehome', 'curtain_stop.svg')"
- alt=""
- />
- </div>
- <!-- {{ item }} -->
- <!--右边-->
- <div
- class="control-item"
- @click="openCurtainClid(item, 2)"
- :class="item.activeIndex == 2 ? 'control-item-active' : ''"
- >
- <template v-if="item.activeIndex != 2">
- <img
- v-if="item.equipmentType !== 4 && item.equipmentType !== 5"
- :src="parseImgUrl('page-officehome', 'curtain_right.svg')"
- alt=""
- />
- <img
- v-else
- :src="parseImgUrl('page-officehome', 'curtain_up.svg')"
- alt=""
- />
- </template>
- <span v-else>{{ item.count }}</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script lang="ts">
- import {
- computed,
- defineComponent,
- onBeforeUnmount,
- onMounted,
- reactive,
- toRefs,
- watch,
- } from "vue";
- import {
- getObjectDataEqpGroupHttp,
- setEquipeHttp,
- setSpaceCondtioners,
- } from "@/apis/envmonitor";
- import { formatDate, parseImgUrl } from "@/utils";
- import { Toast } from "vant";
- export default defineComponent({
- props: {
- projectId: {
- type: String,
- default: () => "",
- },
- spaceId: {
- type: String,
- default: () => "",
- },
- userIsControl: {
- type: Boolean,
- default: () => false,
- },
- },
- setup(props, contx) {
- let curtainData: any = [];
- let timer: any = null;
- let projectId: any = props.projectId;
- let type: any = "all";
- let interval: any = {};
- let oldTime: any = null;
- const proxyData = reactive({
- curtainData: curtainData,
- userIsControl: props.userIsControl,
- lightIcon: "arrow-down",
- projectId: projectId,
- type: type,
- countText: "", // 到记时文案
- count: 2, // 到记时
- curtainOpen: false,
- curtainClose: false,
- parseImgUrl: parseImgUrl,
- // 开度弹窗
- activeIndex: 0,
- // 打开开度弹窗
- openCurtainOpening(selectData: any) {
- contx.emit("showCurtainOpening", selectData);
- },
- // 导航切换
- checkNav(type: any) {
- proxyData.type = type;
- console.log("proxyData.type==", proxyData.type);
- },
- // 获取窗帘列表
- getEqpGroup() {
- const params: any = {
- criteria: {
- projectId: props.projectId,
- spaceId: props.spaceId, // 空间ID
- type: 0, // 0.窗帘
- },
- orders: [
- {
- column: "sortNum",
- asc: true,
- },
- ],
- };
- getObjectDataEqpGroupHttp(params).then((res) => {
- const resData: any = res;
- proxyData.curtainData = resData.count ? resData.content : [];
- // 初始化状态数据
- proxyData.curtainData.map((item: any) => {
- item.count = 0;
- item.activeIndex = 0;
- });
- });
- },
- // 定时器定时计算
- interval: interval,
- countInterval() {
- proxyData.interval = setInterval(() => {
- proxyData.count--;
- if (proxyData.count == 0) {
- proxyData.count = 2;
- proxyData.activeIndex = 0;
- clearInterval(proxyData.interval);
- }
- }, 1000);
- },
- countChildInterval(item: any) {
- // debugger
- proxyData.interval = setInterval(() => {
- item.count--;
- if (item.count == 0) {
- item.count = 2;
- item.activeIndex = 0;
- clearInterval(proxyData.interval);
- }
- // console.log(item.count)
- }, 1000);
- },
- // 窗帘总开关
- openCurtainMain(type: any) {
- // type=1(关) type=2(开) type=3(暂停)
- if (proxyData.activeIndex == type && proxyData.count !== 0) {
- return;
- }
- proxyData.activeIndex = type;
- proxyData.count = 2;
- proxyData.countInterval();
- proxyData.formateCurtainData(type);
- },
- formateValue(type: any) {
- let value: any = 0;
- if (type == 1) {
- value = 0;
- } else if (type == 2) {
- value = 1;
- } else {
- value = 2;
- }
- return value;
- },
- // 处理窗帘数据
- formateCurtainData(type: any) {
- let data: any = [];
- let value: any = proxyData.formateValue(type);
- proxyData.curtainData.map((item: any) => {
- let obj: any = {
- id: item.equipId,
- code: "EquipSwitchSet",
- value: value,
- };
- data.push(obj);
- });
- proxyData.changeCurtainStatus(data);
- },
- // 修改窗帘的状态
- changeCurtainStatus(data: any) {
- console.log("窗帘==", data);
- setSpaceCondtioners(data).then((res) => {
- proxyData.oldTime = formatDate("YYYY.MM.DD HH:mm:ss");
- if (!proxyData.timer) {
- proxyData.updateGroupPeing();
- }
- });
- },
- // 单个窗帘操作
- openCurtainClid(item: any, type: any) {
- // if (item.activeIndex == type && item.count !== 0) {
- // return;
- // }
- proxyData.curtainData.map((item: any) => {
- item.count = 0;
- item.activeIndex = 0;
- });
- item.activeIndex = type;
- let data: any = [];
- let obj: any = {
- id: item.equipId,
- // id: "Eq110108025995ec5bdc23fc47a0a9d8debb150d18eb",
- code: "EquipSwitchSet",
- value: proxyData.formateValue(type),
- };
- data.push(obj);
- item.count = 2;
- proxyData.countChildInterval(item);
- proxyData.changeCurtainStatus(data);
- },
- oldTime: oldTime,
- timer: timer,
- clearTimer() {
- clearInterval(proxyData.timer);
- proxyData.timer = null;
- },
- // 更新窗帘的开度
- updateGroupPeing() {
- // debugger
- proxyData.timer = setInterval(() => {
- let nowTime: any = formatDate("YYYY.MM.DD HH:mm:ss");
- if (proxyData.oldTime) {
- let secondTimeDiff: any = proxyData.getTimeDifference(
- proxyData.oldTime,
- nowTime
- );
- // console.log("secondTimeDiff==",secondTimeDiff)
- if (secondTimeDiff > 60) {
- proxyData.getEqpGroup();
- proxyData.clearTimer();
- }
- } else {
- proxyData.oldTime = formatDate("YYYY.MM.DD HH:mm:ss");
- }
- }, 1000);
- },
- //计算时间差-分钟
- getTimeDifference(Stime: any, Ttime: any) {
- // debugger
- let startDate: any = new Date(Stime);
- let stopDate: any = new Date(Ttime);
- let startTime: any = startDate.getTime();
- let stopTime: any = stopDate.getTime();
- let cTime: any = Number(stopTime) - Number(startTime);
- let secondTime: any = cTime / 1000;
- return parseInt(secondTime);
- },
- });
- watch(props, (newProps: any) => {
- if (newProps.spaceId) {
- // 当前空间的控制权限
- proxyData.getEqpGroup();
- proxyData.userIsControl = newProps.userIsControl;
- }
- });
- onBeforeUnmount(() => {
- proxyData.clearTimer();
- clearInterval(proxyData.interval);
- });
- onMounted(() => {
- // 获取窗帘信息
- proxyData.getEqpGroup();
- });
- return {
- ...toRefs(proxyData),
- };
- },
- });
- </script>
- <style lang="scss" scoped>
- .curtain {
- width: 100%;
- padding-top: 17px;
- padding-bottom: 16px;
- background: #ffffff;
- box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
- border-radius: 25px;
- margin: 15px 0px;
- }
- .curtain-top {
- padding-right: 20px;
- padding-left: 20px;
- display: flex;
- justify-content: space-between;
- padding-bottom: 20px;
- .curtain-desc {
- .curtain-title {
- padding-top: 7px;
- font-family: "PingFang SC";
- font-style: normal;
- font-weight: 600;
- font-size: 16px;
- line-height: 22px;
- /* TUI/Subtitle */
- color: #4d5262;
- }
- }
- .curtain-right {
- position: relative;
- width: 100px;
- text-align: center;
- margin-right: 33px;
- img {
- width: 100px;
- height: 62px;
- }
- }
- }
- .curtain-box {
- display: flex;
- justify-content: space-between;
- padding: 0px 20px;
- padding-bottom: 25px;
- padding-top: 10px;
- .top-nav {
- height: 28px;
- line-height: 28px;
- border-radius: 21px;
- background: #f1f4f6;
- span {
- box-sizing: border-box;
- display: inline-block;
- font-family: "PingFang SC";
- font-style: normal;
- font-weight: 400;
- font-size: 14px;
- line-height: 28px;
- padding: 0 8px;
- color: #424c59;
- }
- .nav-active {
- background: #fff;
- border: 1px solid #e1e5eb;
- border-radius: 21px;
- }
- }
- }
- .line {
- border-top: 1px solid #e8ecf0;
- }
- .top-control {
- text-align: right;
- padding: 16px 20px;
- padding-bottom: 0;
- .control-item {
- position: relative;
- display: inline-block;
- margin-left: 8px;
- width: 40px;
- height: 40px;
- background: #f1f4f6;
- border-radius: 50%;
- &:active {
- background: rgba(206, 159, 39, 0.4);
- }
- img {
- position: absolute;
- width: 16px;
- height: 16px;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- }
- .curtain-opening-icon {
- width: 20px;
- height: 20px;
- }
- }
- .control-stop {
- // &:active {
- // background: rgba(206, 159, 39, 0.4);
- // }
- }
- .control-item-active {
- background: rgba(206, 159, 39, 0.4);
- span {
- position: absolute;
- font-family: "Persagy";
- font-style: normal;
- font-weight: 400;
- font-size: 16px;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- }
- }
- }
- .curtain-child {
- .child-item {
- display: flex;
- justify-content: space-between;
- padding-top: 16px;
- padding-bottom: 16px;
- padding-left: 20px;
- padding-right: 20px;
- border-top: 1px solid #e8ecf0;
- .curtain-name {
- display: inline-block;
- vertical-align: middle;
- .name {
- font-family: "PingFang SC";
- font-style: normal;
- font-weight: 600;
- font-size: 16px;
- line-height: 22px;
- padding-top: 5px;
- color: #4d5262;
- }
- span {
- display: block;
- padding-top: 4px;
- font-family: "PingFang SC";
- font-style: normal;
- font-weight: 400;
- font-size: 14px;
- line-height: 20px;
- color: #c4c4c4;
- }
- }
- }
- .top-control {
- display: inline-block;
- vertical-align: middle;
- padding: 0;
- // padding-top: 5px;
- }
- }
- </style>
|