|
@@ -173,7 +173,13 @@
|
|
v-for="(childItem, index) in equipList"
|
|
v-for="(childItem, index) in equipList"
|
|
>
|
|
>
|
|
<div class="open-title">
|
|
<div class="open-title">
|
|
- <span>{{ childItem.localName }}</span>
|
|
|
|
|
|
+ <div class="open-temp-box">
|
|
|
|
+ <span>{{ childItem.tempSet }}<sup>°C</sup></span>
|
|
|
|
+ <div class="text-box">
|
|
|
|
+ <img :src="parseImgUrl('ipdImages', 'hot-small.svg')" alt="" />
|
|
|
|
+ <span>制热模式</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
<Switch
|
|
<Switch
|
|
@click="changeChildItemAir('switch', childItem, 'switch')"
|
|
@click="changeChildItemAir('switch', childItem, 'switch')"
|
|
:loading="
|
|
:loading="
|
|
@@ -192,126 +198,19 @@
|
|
size="14px"
|
|
size="14px"
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
- <div
|
|
|
|
- class="adjust-box"
|
|
|
|
- :style="{
|
|
|
|
- opacity: childItem.isOpen ? '' : '0.3',
|
|
|
|
- }"
|
|
|
|
- >
|
|
|
|
- <div class="adjust-item">
|
|
|
|
- <van-icon
|
|
|
|
- name="arrow-up"
|
|
|
|
- :class="
|
|
|
|
- childItem.tempSet >= airData.maxTempSet ? 'disable-color' : ''
|
|
|
|
- "
|
|
|
|
- @click="changeChildItemAir('temp', childItem, 'up')"
|
|
|
|
- class="adjust-icon"
|
|
|
|
- />
|
|
|
|
- <div class="adjust-text">
|
|
|
|
- <div
|
|
|
|
- class="value-wrap"
|
|
|
|
- :style="{
|
|
|
|
- transform: valueHeight
|
|
|
|
- ? 'translateY(' + -childItem.sel * valueHeight + 'px)'
|
|
|
|
- : 'translateY(0px)',
|
|
|
|
- }"
|
|
|
|
- >
|
|
|
|
- <div
|
|
|
|
- class="value"
|
|
|
|
- :key="index + 'ct'"
|
|
|
|
- v-for="(titem, index) in childItem.tempArr"
|
|
|
|
- >
|
|
|
|
- {{ titem }}
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <van-icon
|
|
|
|
- name="arrow-down"
|
|
|
|
- :class="
|
|
|
|
- childItem.tempSet <= airData.minTempSet ? 'disable-color' : ''
|
|
|
|
- "
|
|
|
|
- @click="changeChildItemAir('temp', childItem, 'down')"
|
|
|
|
- class="adjust-icon"
|
|
|
|
- />
|
|
|
|
- <span class="adjust-title">温度</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="adjust-item">
|
|
|
|
- <van-icon
|
|
|
|
- name="arrow-up"
|
|
|
|
- :class="childItem.isAutoGear ? 'disable-color' : ''"
|
|
|
|
- @click="changeChildItemAir('gear', childItem, 'up')"
|
|
|
|
- class="adjust-icon"
|
|
|
|
- />
|
|
|
|
- <div class="adjust-text">
|
|
|
|
- <div
|
|
|
|
- class="value-wrap"
|
|
|
|
- :style="{
|
|
|
|
- transform: valueHeight
|
|
|
|
- ? 'translateY(' + -childItem.gIndex * valueHeight + 'px)'
|
|
|
|
- : 'translateY(0px)',
|
|
|
|
- }"
|
|
|
|
- >
|
|
|
|
- <div
|
|
|
|
- class="value"
|
|
|
|
- v-for="(gItem, index) in childItem.gearArr"
|
|
|
|
- :key="index + 'g'"
|
|
|
|
- >
|
|
|
|
- {{ gItem }}
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <van-icon
|
|
|
|
- name="arrow-down"
|
|
|
|
- :class="
|
|
|
|
- !childItem.isAutoGear && childItem.gear <= 1
|
|
|
|
- ? 'disable-color'
|
|
|
|
- : ''
|
|
|
|
- "
|
|
|
|
- @click="changeChildItemAir('gear', childItem, 'down')"
|
|
|
|
- class="adjust-icon"
|
|
|
|
- />
|
|
|
|
- <span class="adjust-title">档位</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="adjust-item">
|
|
|
|
- <van-icon
|
|
|
|
- name="arrow-up"
|
|
|
|
- :class="childItem.workMode >= 3 ? 'disable-color' : ''"
|
|
|
|
- @click="changeChildItemAir('model', childItem, 'up')"
|
|
|
|
- class="adjust-icon"
|
|
|
|
- />
|
|
|
|
- <div class="adjust-text">
|
|
|
|
- <div
|
|
|
|
- class="value-wrap"
|
|
|
|
- :style="{
|
|
|
|
- transform: valueHeight
|
|
|
|
- ? 'translateY(' + -childItem.mIndex * valueHeight + 'px)'
|
|
|
|
- : 'translateY(0px)',
|
|
|
|
- }"
|
|
|
|
- >
|
|
|
|
- <div
|
|
|
|
- class="value"
|
|
|
|
- v-for="(mItem, index) in childItem.modelArr"
|
|
|
|
- :key="index + 'm'"
|
|
|
|
- >
|
|
|
|
- {{ mItem }}
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <van-icon
|
|
|
|
- name="arrow-down"
|
|
|
|
- :class="childItem.workMode <= 1 ? 'disable-color' : ''"
|
|
|
|
- @click="changeChildItemAir('model', childItem, 'down')"
|
|
|
|
- class="adjust-icon"
|
|
|
|
- />
|
|
|
|
- <span class="adjust-title">模式</span>
|
|
|
|
|
|
+
|
|
|
|
+ <div class="control-bottom">
|
|
|
|
+ <div class="control-title">
|
|
|
|
+ {{ childItem.localName }}
|
|
</div>
|
|
</div>
|
|
|
|
+ <img
|
|
|
|
+ :style="{ opacity: childItem.isOpen ? '1' : '0.3' }"
|
|
|
|
+ :src="lightColorImg"
|
|
|
|
+ alt=""
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <!-- v-if="cotrolLoading" -->
|
|
|
|
- <!-- <div class="loading-box" v-if="cotrolLoading">
|
|
|
|
- <van-loading style="padding-top: 20px" />
|
|
|
|
- </div> -->
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -406,6 +305,7 @@ export default defineComponent({
|
|
let spaceId: any = "";
|
|
let spaceId: any = "";
|
|
const proxyData: any = reactive({
|
|
const proxyData: any = reactive({
|
|
seviceEquipmentList: props.seviceEquipmentList,
|
|
seviceEquipmentList: props.seviceEquipmentList,
|
|
|
|
+ lightColorImg: parseImgUrl("page-officehome", "lightColorControl.svg"),
|
|
navType: "all",
|
|
navType: "all",
|
|
valueDom: valueDom,
|
|
valueDom: valueDom,
|
|
spaceId: props.spaceId,
|
|
spaceId: props.spaceId,
|
|
@@ -1235,9 +1135,7 @@ export default defineComponent({
|
|
height: 0px;
|
|
height: 0px;
|
|
border-top: 1px solid rgba(232, 236, 240, 1);
|
|
border-top: 1px solid rgba(232, 236, 240, 1);
|
|
}
|
|
}
|
|
- .air-switch-box {
|
|
|
|
- display: flex;
|
|
|
|
- }
|
|
|
|
|
|
+
|
|
.active-color {
|
|
.active-color {
|
|
background: $elActiveColor !important;
|
|
background: $elActiveColor !important;
|
|
span {
|
|
span {
|
|
@@ -1246,92 +1144,92 @@ export default defineComponent({
|
|
}
|
|
}
|
|
.air-child {
|
|
.air-child {
|
|
width: 100%;
|
|
width: 100%;
|
|
- // padding: 20px;
|
|
|
|
- padding-left: 10px;
|
|
|
|
- padding-right: 10px;
|
|
|
|
- // padding-top: 10px;
|
|
|
|
|
|
+ padding-left: 12px;
|
|
|
|
+ padding-right: 12px;
|
|
|
|
+ padding-top: 16px;
|
|
|
|
+ padding-bottom: 4px;
|
|
.child-control-box {
|
|
.child-control-box {
|
|
display: inline-block;
|
|
display: inline-block;
|
|
- width: 50%;
|
|
|
|
|
|
+ width: 49%;
|
|
|
|
+ margin-right: 2%;
|
|
|
|
+ margin-bottom: 12px;
|
|
|
|
+ padding: 14px 16px;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
- padding: 10px 10px 10px 10px;
|
|
|
|
- // margin-top: 10px;
|
|
|
|
- // padding-right: 10px;
|
|
|
|
- border-top: 1px solid rgba(196, 196, 196, 0.4);
|
|
|
|
- &:nth-child(2n + 1) {
|
|
|
|
- border-right: 1px solid rgba(196, 196, 196, 0.4);
|
|
|
|
|
|
+ border-radius: 16px;
|
|
|
|
+ background: rgba(247, 249, 250, 1);
|
|
|
|
+ &:nth-child(2n) {
|
|
|
|
+ margin-right: 0;
|
|
}
|
|
}
|
|
.open-title {
|
|
.open-title {
|
|
width: 100%;
|
|
width: 100%;
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
- height: 25px;
|
|
|
|
- line-height: 25px;
|
|
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
- margin-bottom: 10px;
|
|
|
|
- span {
|
|
|
|
- font-size: 16px;
|
|
|
|
|
|
+ margin-bottom: 26px;
|
|
|
|
+ .open-temp-box {
|
|
|
|
+ position: relative;
|
|
display: inline-block;
|
|
display: inline-block;
|
|
width: calc(100% - 50px);
|
|
width: calc(100% - 50px);
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
- text-overflow: ellipsis;
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
|
+ span {
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ font-family: "Persagy";
|
|
|
|
+ font-size: 22px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ line-height: 22px;
|
|
|
|
+ letter-spacing: 0;
|
|
|
|
+ }
|
|
|
|
+ sup {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: -3px;
|
|
|
|
+ font-family: Mulish;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ text-align: left;
|
|
|
|
+ color: rgba(196, 196, 196, 1);
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
+ .text-box {
|
|
|
|
+ margin-left: -2px;
|
|
|
|
+ padding-top: 4px;
|
|
|
|
+ img {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ width: 16px;
|
|
|
|
+ height: 16px;
|
|
|
|
+ margin-right: 2px;
|
|
|
|
+ }
|
|
|
|
+ span {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ font-family: "PingFang SC";
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ color: rgba(196, 201, 207, 1);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
.child-switch {
|
|
.child-switch {
|
|
// height: 20px;
|
|
// height: 20px;
|
|
// width: 50px;
|
|
// width: 50px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .adjust-box {
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- // padding-right: 10px;
|
|
|
|
- padding-top: 10px;
|
|
|
|
|
|
+
|
|
|
|
+ .control-bottom {
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
- font-size: 19px;
|
|
|
|
- .adjust-item {
|
|
|
|
- // flex: 1;
|
|
|
|
- // width: 40px;
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: column;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- text-align: center;
|
|
|
|
- &:nth-child(2) {
|
|
|
|
- // width: 60px;
|
|
|
|
- flex: 1;
|
|
|
|
- }
|
|
|
|
- .adjust-icon {
|
|
|
|
- display: inline-block;
|
|
|
|
- flex: 1;
|
|
|
|
- }
|
|
|
|
- .adjust-text {
|
|
|
|
- // flex: 1;
|
|
|
|
- // padding: 20px 0;
|
|
|
|
- height: 50px;
|
|
|
|
- overflow: hidden;
|
|
|
|
- color: #1f2429;
|
|
|
|
- .value-wrap {
|
|
|
|
- transition: transform 1s;
|
|
|
|
- .value {
|
|
|
|
- width: 100%;
|
|
|
|
- height: 50px;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- font-weight: 400;
|
|
|
|
- justify-content: center;
|
|
|
|
- text-align: center;
|
|
|
|
- font-size: 14px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .adjust-title {
|
|
|
|
- padding-top: 10px;
|
|
|
|
- font-size: 14px;
|
|
|
|
- font-weight: 400;
|
|
|
|
- }
|
|
|
|
- .disable-color {
|
|
|
|
- color: $elDisabledColor;
|
|
|
|
- }
|
|
|
|
|
|
+ .control-title {
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-family: "PingFang SC";
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ color: #4d5262;
|
|
|
|
+ }
|
|
|
|
+ img {
|
|
|
|
+ width: 20px;
|
|
|
|
+ height: 20px;
|
|
|
|
+ cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -1411,16 +1309,7 @@ export default defineComponent({
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .temp-text {
|
|
|
|
- height: 20px;
|
|
|
|
- line-height: 20px;
|
|
|
|
- font-family: "Montserrat";
|
|
|
|
- font-style: normal;
|
|
|
|
- font-weight: 500;
|
|
|
|
- font-size: 11px;
|
|
|
|
- color: #c4c4c4;
|
|
|
|
- padding: 0 5px;
|
|
|
|
- }
|
|
|
|
|
|
+
|
|
.temp-slider {
|
|
.temp-slider {
|
|
position: relative;
|
|
position: relative;
|
|
display: flex;
|
|
display: flex;
|