|
@@ -1,96 +1,184 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <view class="nomalNotice">
|
|
|
- <view class="nomalTitle">异常提醒</view>
|
|
|
- <view class="nomal_contain">
|
|
|
- <SwitchItem
|
|
|
- v-for="(item, index) in switchItems"
|
|
|
- :key="index"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- :timeRanges="item.timeRanges"
|
|
|
- @update:value="handleSwitchChange(index, $event)"
|
|
|
- @update:timeRanges="updateTimeRanges(index, $event)"
|
|
|
- />
|
|
|
+ <view class="home-warpTwo">
|
|
|
+ <view class="airbody">
|
|
|
+ <view class="module">
|
|
|
+ <view class="device-bottom">
|
|
|
+ <view
|
|
|
+ class="info-box"
|
|
|
+ v-for="(item, index) in modules"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <view class="info-text">
|
|
|
+ <text>{{ item.name }}</text>
|
|
|
+ <text>({{ item.width }}*{{ item.length }})cm</text>
|
|
|
+ </view>
|
|
|
+ <view class="edit_del">
|
|
|
+ <image
|
|
|
+ @click="deleteItem(index)"
|
|
|
+ src="../../static/delete.png"
|
|
|
+ alt=""
|
|
|
+ ></image>
|
|
|
+ <image
|
|
|
+ @click="editItem(index)"
|
|
|
+ style="margin-left: 10rpx"
|
|
|
+ src="../../static/edit.png"
|
|
|
+ alt=""
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="bottomTwo" @click="saveRoom">
|
|
|
+ <view class="addNewAlarm">新增设备告警计划</view>
|
|
|
+ <view class="previousTip">保存</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
-
|
|
|
<script>
|
|
|
-import SwitchItem from "./SwitchItem.vue"; // 引入 SwitchItem 组件
|
|
|
-
|
|
|
export default {
|
|
|
- name: "MyPage",
|
|
|
- components: {
|
|
|
- SwitchItem,
|
|
|
- },
|
|
|
data() {
|
|
|
- return {
|
|
|
- switchItems: [
|
|
|
- {
|
|
|
- label: "起夜频次",
|
|
|
- value: 1,
|
|
|
- timeRanges: [{ startTime: "08:00", endTime: "09:00" }],
|
|
|
- },
|
|
|
- {
|
|
|
- label: "如厕频次",
|
|
|
- value: 1,
|
|
|
- timeRanges: [{ startTime: "08:00", endTime: "09:00" }],
|
|
|
- },
|
|
|
- {
|
|
|
- label: "卫生间频次",
|
|
|
- value: 1,
|
|
|
- timeRanges: [{ startTime: "08:00", endTime: "09:00" }],
|
|
|
- },
|
|
|
- {
|
|
|
- label: "夜间如厕频次",
|
|
|
- value: 1,
|
|
|
- timeRanges: [{ startTime: "08:00", endTime: "09:00" }],
|
|
|
- },
|
|
|
- {
|
|
|
- label: "如厕频次异常",
|
|
|
- value: 1,
|
|
|
- timeRanges: [{ startTime: "08:00", endTime: "09:00" }],
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
+ return { modules: [] };
|
|
|
},
|
|
|
+ computed: {},
|
|
|
methods: {
|
|
|
- handleSwitchChange(index, newValue) {
|
|
|
- this.switchItems[index].value = newValue;
|
|
|
- },
|
|
|
- updateTimeRanges(index, newTimeRanges) {
|
|
|
- this.switchItems[index].timeRanges = newTimeRanges;
|
|
|
+ saveRoom() {
|
|
|
+ console.log("保存");
|
|
|
},
|
|
|
},
|
|
|
+ onLoad(options) {},
|
|
|
+ onShow() {},
|
|
|
};
|
|
|
</script>
|
|
|
-
|
|
|
<style lang="less" scoped>
|
|
|
-.container {
|
|
|
+.home-warpTwo {
|
|
|
+ position: relative;
|
|
|
height: 100vh;
|
|
|
- background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
|
|
|
+ background: linear-gradient(180deg, #ffdfdf 0%, #ffffff 30.3%);
|
|
|
box-sizing: border-box;
|
|
|
- padding-top: 20rpx;
|
|
|
-
|
|
|
- .nomalNotice {
|
|
|
- width: 712rpx;
|
|
|
- margin: 0 auto;
|
|
|
+ width: 750rpx;
|
|
|
+ border-bottom-left-radius: 35rpx;
|
|
|
+ border-bottom-right-radius: 35rpx;
|
|
|
+ background: linear-gradient(180deg, #faede2 0%, #ffffff 100%);
|
|
|
+ .airCantInfo {
|
|
|
+ margin: 30rpx auto 0 auto;
|
|
|
+ border: 18rpx solid #1f1f1f;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .airbody {
|
|
|
+ background: #ffffff;
|
|
|
box-sizing: border-box;
|
|
|
-
|
|
|
- .nomalTitle {
|
|
|
- padding-left: 38rpx;
|
|
|
- font-family: MiSans;
|
|
|
- color: #9d8179;
|
|
|
- font-size: 28rpx;
|
|
|
+ .header_top {
|
|
|
+ // padding: 0rpx 40rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .airTitle {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #784c41;
|
|
|
+ font-size: 32rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ }
|
|
|
+ .addfnt {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ image {
|
|
|
+ margin-top: 7rpx;
|
|
|
+ width: 25rpx;
|
|
|
+ height: 25rpx;
|
|
|
+ }
|
|
|
+ .add_btn {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .nomal_contain {
|
|
|
- padding: 10rpx 37rpx;
|
|
|
- margin-top: 18rpx;
|
|
|
+ .module {
|
|
|
+ bottom: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
background: #ffffff;
|
|
|
- border-radius: 37rpx;
|
|
|
+ border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
+ .device-bottom {
|
|
|
+ .no-data {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .info-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ // width: 620rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ height: 110rpx;
|
|
|
+ background: #f8f8f8;
|
|
|
+ border-radius: 38rpx;
|
|
|
+ border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 26rpx;
|
|
|
+ .info-text {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ image {
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ width: 75rpx;
|
|
|
+ height: 75rpx;
|
|
|
+ }
|
|
|
+ .edit_del {
|
|
|
+ margin-left: auto;
|
|
|
+ image {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-box:not(:first-child) {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottomTwo {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ background: #f3e2dd;
|
|
|
+ .addNewAlarm {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 400rpx;
|
|
|
+ height: 94rpx;
|
|
|
+ background: #ffebe4;
|
|
|
+ border-radius: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #111111;
|
|
|
+ font-size: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .previousTip {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 328rpx;
|
|
|
+ height: 94rpx;
|
|
|
+ background: linear-gradient(105.95deg, #a27867 0%, #74483d 100%);
|
|
|
+ border-radius: 28rpx;
|
|
|
+ box-shadow: 0rpx 4.69rpx 18.75rpx rgba(72, 41, 29, 0.15),
|
|
|
+ 0rpx 9.38rpx 9.38rpx rgba(154, 132, 89, 0.2),
|
|
|
+ 0rpx -4.69rpx 28.13rpx 4.69rpx #a16647 inset;
|
|
|
+ font-family: MiSans;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 32rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|