|
|
@@ -1,15 +1,318 @@
|
|
|
-<template></template>
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <!-- 计划名称输入框 -->
|
|
|
+ <view class="input-container">
|
|
|
+ <text class="input-label">计划名称:</text>
|
|
|
+ <input
|
|
|
+ class="input-field"
|
|
|
+ type="text"
|
|
|
+ v-model="planInfo.name"
|
|
|
+ placeholder="请输入计划名称"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 事件类型选择 -->
|
|
|
+ <view class="select-container">
|
|
|
+ <text class="input-label">事件类型:</text>
|
|
|
+ <input
|
|
|
+ class="input-field"
|
|
|
+ type="text"
|
|
|
+ v-model="eventType.eventDesc"
|
|
|
+ placeholder="请输入计划类型"
|
|
|
+ disabled="true"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 计划时间 -->
|
|
|
+ <view class="time-container" style="margin-bottom: 20rpx">
|
|
|
+ <text class="input-label">计划时间:</text>
|
|
|
+ <view class="time-picker-container">
|
|
|
+ <picker
|
|
|
+ mode="date"
|
|
|
+ v-model="startDate"
|
|
|
+ start="2000-01-01"
|
|
|
+ end="2099-12-31"
|
|
|
+ @change="bindStartChange"
|
|
|
+ >
|
|
|
+ <view class="picker-content">{{ startDate }}</view>
|
|
|
+ </picker>
|
|
|
+ ~
|
|
|
+ <picker
|
|
|
+ mode="date"
|
|
|
+ v-model="stopDate"
|
|
|
+ start="2000-01-01"
|
|
|
+ end="2099-12-31"
|
|
|
+ @change="bindEndChange"
|
|
|
+ >
|
|
|
+ <view class="picker-content">{{ stopDate }}</view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 生效时段 -->
|
|
|
+ <view class="time-container">
|
|
|
+ <text class="input-label">生效时段:</text>
|
|
|
+ <view class="time-picker-container">
|
|
|
+ <picker
|
|
|
+ mode="time"
|
|
|
+ v-model="effectiveStart"
|
|
|
+ @change="bindEffectiveStartChange"
|
|
|
+ >
|
|
|
+ <view class="picker-content" style="width: 170rpx">{{
|
|
|
+ effectiveStart
|
|
|
+ }}</view>
|
|
|
+ </picker>
|
|
|
+ ~
|
|
|
+ <picker
|
|
|
+ mode="time"
|
|
|
+ v-model="effectiveEnd"
|
|
|
+ @change="bindEffectiveEndChange"
|
|
|
+ >
|
|
|
+ <view class="picker-content" style="width: 170rpx">{{
|
|
|
+ effectiveEnd
|
|
|
+ }}</view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="time-range-wrapper" v-if="timeRange.length > 0">
|
|
|
+ <view
|
|
|
+ class="time-item"
|
|
|
+ v-for="(item, index) in timeRange"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <text class="time-text"
|
|
|
+ >{{ item.start_time }} - {{ item.end_time }}</text
|
|
|
+ >
|
|
|
+ <text class="delete-btn" @click="removeTime(index)">×</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 告警提醒 -->
|
|
|
+ <view class="switch-container">
|
|
|
+ <text class="input-label">告警联动(服务号推送):</text>
|
|
|
+ <switch
|
|
|
+ v-model="isAlarmActive"
|
|
|
+ active-color="#07c160"
|
|
|
+ inactive-color="#ccc"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 是否启用 -->
|
|
|
+ <view class="switch-container">
|
|
|
+ <text class="input-label">是否启用:</text>
|
|
|
+ <switch
|
|
|
+ v-model="isEnabled"
|
|
|
+ active-color="#07c160"
|
|
|
+ inactive-color="#ccc"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 保存按钮 -->
|
|
|
+ <view class="save-button" @click="saveTemplate">
|
|
|
+ <text class="save-button-text">保存</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- planInfo: "",
|
|
|
+ planName: "",
|
|
|
+ selectedEventType: 0,
|
|
|
+ startDate: "2025-01-01",
|
|
|
+ stopDate: "2025-11-01",
|
|
|
+ effectiveStart: "00:00",
|
|
|
+ effectiveEnd: "23:59",
|
|
|
+ isAlarmActive: true,
|
|
|
+ isEnabled: true,
|
|
|
+ planInfo: {},
|
|
|
+ warmTypeList: [],
|
|
|
+ eventType: "",
|
|
|
+ timeRange: [],
|
|
|
};
|
|
|
},
|
|
|
+ methods: {
|
|
|
+ saveTemplate() {
|
|
|
+ uni.showToast({
|
|
|
+ title: "保存成功",
|
|
|
+ icon: "success",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handlePlanInfo() {
|
|
|
+ console.log(this.planInfo, 9999999);
|
|
|
+ },
|
|
|
+ getWarnType() {
|
|
|
+ this.$http.get("wap/stats/queryEventType").then((res) => {
|
|
|
+ if (res.data.data) {
|
|
|
+ this.warmTypeList = res.data.data;
|
|
|
+ this.eventType = this.warmTypeList.find(
|
|
|
+ (item) => item.eventVal == this.planInfo.eventVal
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ bindStartChange(val) {
|
|
|
+ this.startDate = val.detail.value;
|
|
|
+ this.planInfo.startDate = this.startDate + " 00:00:00";
|
|
|
+ },
|
|
|
+ bindEndChange(val) {
|
|
|
+ this.stopDate = val.detail.value;
|
|
|
+ this.planInfo.stopDate = this.stopDate + " 23:59:59";
|
|
|
+ },
|
|
|
+ bindEffectiveStartChange(val) {
|
|
|
+ this.effectiveStart = val.detail.value;
|
|
|
+ console.log(this.effectiveStart, val.detail.value, 88887);
|
|
|
+ },
|
|
|
+ bindEffectiveEndChange(val) {
|
|
|
+ this.effectiveEnd = val.detail.value;
|
|
|
+ console.log(this.effectiveEnd, 9999);
|
|
|
+ this.timeRange.push({
|
|
|
+ start_time: this.effectiveStart,
|
|
|
+ end_time: this.effectiveEnd,
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ removeTime(index) {
|
|
|
+ this.timeRange.splice(index, 1);
|
|
|
+ },
|
|
|
+ },
|
|
|
onLoad(options) {
|
|
|
this.planInfo = JSON.parse(options.planInfo);
|
|
|
- console.log(this.planInfo, 99999);
|
|
|
+ this.startDate =
|
|
|
+ this.planInfo?.alarmTimePlan.startDate?.slice(0, 10) || "";
|
|
|
+ this.stopDate =
|
|
|
+ this.planInfo?.alarmTimePlan.stopDate?.slice(0, 10) || "";
|
|
|
+ // if (this.planInfo.alarmTimePlan.timeRange) {
|
|
|
+ // const fixedTimeRange =
|
|
|
+ // this.planInfo.alarmTimePlan.timeRange.replace(/\]\[/g, "},{");
|
|
|
+ // const correctedString = "[" + fixedTimeRange + "]";
|
|
|
+ // try {
|
|
|
+ // this.timeRange = JSON.parse(correctedString);
|
|
|
+ // console.log(this.timeRange, 8870);
|
|
|
+ // } catch (e) {
|
|
|
+ // console.error("JSON解析失败：", e);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ if (this.planInfo.alarmTimePlan.timeRange) {
|
|
|
+ this.timeRange = JSON.parse(this.planInfo.alarmTimePlan.timeRange);
|
|
|
+ }
|
|
|
+ this.timeRange = JSON.parse(this.timeRange);
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getWarnType();
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
-<style lang="less"></style>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.container {
|
|
|
+ padding: 20px;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #f9eee3;
|
|
|
+ border-radius: 12px;
|
|
|
+}
|
|
|
+.input-container {
|
|
|
+ margin-bottom: 25px;
|
|
|
+}
|
|
|
+.input-label {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.time-picker-container {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.input-field {
|
|
|
+ width: 92%;
|
|
|
+ padding: 14px;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+.input-counter {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ text-align: right;
|
|
|
+ margin-top: 4px;
|
|
|
+}
|
|
|
+.select-container {
|
|
|
+ margin-bottom: 25px;
|
|
|
+}
|
|
|
+.picker-content {
|
|
|
+ padding: 14px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+.time-range-wrapper {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap; /* 多行换行显示 */
|
|
|
+ gap: 10rpx; /* 间距 */
|
|
|
+ padding: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.time-item {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ border-radius: 12rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.time-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.delete-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: -6rpx;
|
|
|
+ right: -6rpx;
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ line-height: 24rpx;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #ff4d4f;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.switch-container {
|
|
|
+ margin-bottom: 25px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+/* 新的保存按钮样式 */
|
|
|
+.save-button {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ position: fixed;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ line-height: 120rpx;
|
|
|
+ background: #f3e2dd;
|
|
|
+ border-radius: 12px;
|
|
|
+}
|
|
|
+.save-button-text {
|
|
|
+ font-size: 18px;
|
|
|
+ /* font-weight: bold; */
|
|
|
+}
|
|
|
+</style>
|
