123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451 |
- <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>
- <p class="curtain-status">
- <!-- 窗帘已打开-->
- <span class="curtain-tip">{{ countText }}</span>
- </p>
- <div class="show-all" @click="showAll" v-if="isShowChildLight">
- <van-icon
- :name="lightIcon"
- class="light-icon"
- />
- <span>显示全部</span>
- </div>
- </div>
- <div class="curtain-right">
- <img
- :src="parseImgUrl('page-officehome','curtain-img.svg')"
- alt=""
- >
- <div class="curtain-control" v-if="!showFlag">
- <div class="control-item mr10"
- @click="handleTotal('EquipOffSet')"
- :class="{'box-active':curtainClose && count,'control-item-disabled':!userIsControl}"
- >
- <span class="timer-text" v-if="curtainClose && count">{{ count }}</span>
- <img
- v-else
- :src="parseImgUrl('page-officehome','curtain-close.png')"
- alt=""
- >
- </div>
- <div class="control-item"
- @click="handleTotal('EquipOnSet')"
- :class="{'box-active':curtainOpen && count,'control-item-disabled':!userIsControl}"
- >
- <span class="timer-text" v-if="curtainOpen && count">{{ count }}</span>
- <img
- v-else
- :src="parseImgUrl('page-officehome','curtain-open.png')"
- alt=""
- >
- </div>
- </div>
- </div>
- </div>
- <!--窗帘按钮-->
- <div class="child-curtain" v-if="showFlag"
- :key="item.id"
- v-for="(item,index) in curtainData"
- >
- <div class="child-title">{{ item.name }}</div>
- <div class="curtain-control">
- <div class="control-item mr10"
- @click="handleChild('EquipOffSet',item.id,index)"
- :class="{'box-active':item.curtainClose && count,'control-item-disabled':!userIsControl}"
- >
- <span class="timer-text" v-if="item.curtainClose && count">{{ count }}</span>
- <img
- v-else
- :src="parseImgUrl('page-officehome','curtain-close.png')"
- alt=""
- >
- </div>
- <div class="control-item"
- @click="handleChild('EquipOnSet',item.id,index)"
- :class="{'box-active':item.curtainOpen && count,'control-item-disabled':!userIsControl}"
- >
- <span class="timer-text" v-if="item.curtainOpen && count">{{ count }}</span>
- <img
- v-else
- :src="parseImgUrl('page-officehome','curtain-open.png')"
- alt=""
- >
- </div>
- </div>
- </div>
- </div>
- </template>
- <script lang="ts">
- import { computed, defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
- import { getObjectDataEqpGroupHttp, setEquipeHttp } from '@/apis/envmonitor'
- import { 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) {
- let curtainData: any = []
- let timer: any = null
- let projectId: any = props.projectId
- const proxyData = reactive({
- curtainData: curtainData,
- userIsControl: props.userIsControl,
- lightIcon: 'arrow-down',
- showFlag: false,
- projectId: projectId,
- countText: '', // 到记时文案
- count: 0, // 到记时
- curtainOpen: false,
- curtainClose: false,
- parseImgUrl: parseImgUrl,
- timer: timer,
- // 获取窗帘列表
- 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 : []
- for (let i = 0; i < proxyData.curtainData.length; i++) {
- let item = proxyData.curtainData[i]
- item.childDownFlag = false
- item.childUpFlag = false
- item.childCount = 2
- item.childCountText = ''
- }
- })
- },
- // 点击展示所有的登录
- showAll() {
- proxyData.showFlag = !proxyData.showFlag
- if (proxyData.showFlag) {
- proxyData.lightIcon = 'arrow-up'
- } else {
- proxyData.lightIcon = 'arrow-down'
- }
- },
- checkCount() {
- if (proxyData.count > 0) {
- return true
- } else {
- return false
- }
- },
- // 窗帘总开关
- handleTotal(setType: string) {
- if (proxyData.userIsControl) {
- let flag = proxyData.checkCount()
- /**
- * flag:true 代表指令正在发送中,false:代表当前没有指令在发送
- */
- if (!flag) { // 只要有一条指令在发送中,要求其它指令不能再发送
- proxyData.changeStatus(setType)
- let arr = JSON.parse(JSON.stringify(proxyData.curtainData)) // 窗帘数据
- let paramsArr = proxyData.setParams(arr, setType)
- // 更新窗帘的按钮可点击状态
- proxyData.setSwitchStatus(setType)
- // 发送窗帘指令
- setEquipeHttp(paramsArr).then(res => {
- })
- }
- } else {
- Toast('您没有当前空间的控制权限!')
- }
- },
- handleChild(setType: string, id: any, index: any) {
- if (proxyData.userIsControl) {
- let flag = proxyData.checkCount()
- /**
- * flag:true 代表指令正在发送中,false:代表当前没有指令在发送
- */
- if (!flag) { // 只要有一条指令在发送中,要求其它指令不能再发送
- let childItem: any = proxyData.curtainData[index]
- const params = {
- projectId: proxyData.projectId,
- objectId: id, // 设备ID/窗帘组ID
- equipmentCategory: 'CFSSES', // 设备编码 窗帘:CFSSES
- infoCode: setType, // 窗帘开设定:EquipOnSet 窗帘关设定:EquipOffSet
- value: 1 // 窗帘 1 移动/停止
- }
- let paramsArr = []
- paramsArr.push(params)
- // 更新窗帘的按钮可点击状态
- proxyData.changeStatus(setType, childItem)
- proxyData.setSwitchStatus(setType, childItem)
- // 发送窗帘指令
- setEquipeHttp(paramsArr).then(res => {
- })
- }
- } else {
- Toast('您没有当前空间的控制权限!')
- }
- },
- clearCurtain() {
- proxyData.curtainData.map((item: any) => {
- item.curtainClose = false
- item.curtainOpen = false
- proxyData.curtainClose = false
- proxyData.curtainOpen = false
- })
- },
- changeStatus(setType: any, item: any = null) {
- proxyData.clearCurtain()
- if (setType === 'EquipOffSet') {
- if (item) {
- item.curtainClose = true
- } else {
- proxyData.curtainClose = true
- }
- } else {
- if (item) {
- item.curtainOpen = true
- } else {
- proxyData.curtainOpen = true
- }
- }
- },
- // 窗帘状态数据
- setSwitchStatus(setType: any, item: any = null) {
- proxyData.count = 2 // 恢复count
- proxyData.countText = '指令下发中'
- proxyData.timer = setInterval(() => {
- if (proxyData.count === 0) {
- proxyData.countText = ''
- clearInterval(proxyData.timer)
- proxyData.clearCurtain()
- }
- if (proxyData.count === 1) {
- proxyData.countText = '再次点击停止窗帘'
- }
- if (proxyData.count > 0) {
- proxyData.count--
- } else {
- proxyData.count = 0
- }
- }, 1000)
- },
- // 设置发送给后台的窗帘数据
- setParams(arr: any, setType: any) {
- let paramsArr = []
- for (let i = 0; i < arr.length; i++) {
- let obj = {
- objectId: arr[i].id, // 设备ID/窗帘组ID
- equipmentCategory: 'CFSSES', // 设备编码 窗帘:CFSSES
- infoCode: setType, // 窗帘开设定:EquipOnSet 窗帘关设定:EquipOffSet
- value: 1
- }
- paramsArr.push(obj)
- }
- return paramsArr
- }
- })
- const isShowChildLight = computed(() => {
- return proxyData.curtainData.length && proxyData.curtainData.length > 1
- })
- watch(
- props,
- (newProps: any) => {
- if (newProps.spaceId) {
- // 当前空间的控制权限
- proxyData.getEqpGroup()
- proxyData.userIsControl = newProps.userIsControl
- }
- }
- )
- onMounted(() => {
- // 获取空调信息
- proxyData.getEqpGroup()
- })
- return {
- isShowChildLight,
- ...toRefs(proxyData)
- }
- }
- })
- </script>
- <style lang="scss" scoped>
- .curtain {
- width: 100%;
- padding-top: 10px;
- padding-right: 10px;
- 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-left: 20px;
- min-height: 130px;
- //padding-bottom: 30px;
- display: flex;
- justify-content: space-between;
- }
- .curtain-desc {
- flex: 1 98px;
- padding-top: 10px;
- font-family: PingFang SC;
- font-size: 16px;
- line-height: 19px;
- color: #4D5262;
- flex: none;
- order: 0;
- flex-grow: 0;
- margin: 5px 0px;
- }
- .curtain-right {
- position: relative;
- width: 110px;
- text-align: center;
- img {
- width: 92px;
- height: 69px;
- }
- .curtain-control {
- position: absolute;
- right: 10px;
- bottom: 0px;
- }
- }
- .curtain-title {
- font-family: PingFang SC;
- padding-left: 5px;
- font-size: 16px;
- line-height: 19px;
- color: #4D5262;
- flex: none;
- order: 0;
- flex-grow: 0;
- margin: 5px 0px;
- }
- .curtain-status {
- font-family: PingFang SC;
- padding-left: 5px;
- font-size: 14px;
- line-height: 16px;
- color: #C4C4C4;
- flex: none;
- order: 1;
- flex-grow: 0;
- margin: 10px 0px;
- .curtain-tip {
- display: block;
- padding-top: 20px;
- }
- }
- .show-all {
- font-family: PingFang SC;
- //display: none;
- .curtain-icon {
- font-size: 12px;
- padding-right: 10px;
- }
- padding-top: 10px;
- padding-bottom: 22px;
- font-size: 14px;
- line-height: 16px;
- color: #C4C4C4;
- margin: 0px 5px;
- }
- .curtain-control {
- text-align: right;
- padding-bottom: 15px;
- width: 100px;
- padding-top: 5px;
- //padding-right: 10px;
- .control-item {
- width: 40px;
- display: inline-block;
- height: 40px;
- text-align: center;
- border-radius: 50%;
- background: rgba(196, 196, 196, 0.2);
- img {
- margin-top: 10px;
- width: 19px;
- height: 19px;
- }
- }
- .control-item-disabled {
- opacity: 0.3;
- }
- .timer-text {
- width: 40px;
- display: inline-block;
- line-height: 40px;
- font-size: 18px;
- color: #fff;
- margin: 0;
- text-align: center;
- }
- }
- .child-curtain {
- display: flex;
- justify-content: space-between;
- padding: 10px 15px 0px 28px;
- border-top: 1px solid rgba(196, 196, 196, 0.4);
- .child-title {
- flex: 1 110px;
- font-weight: 500;
- font-family: PingFang SC;
- font-size: 16px;
- height: 40px;
- line-height: 40px;
- color: #4D5262;
- }
- .curtain-control {
- text-align: right;
- padding-right: 0;
- }
- }
- </style>
|