esswisdom_app/pages/strategy/index.vue

<template>
	<view class="container">
		<view class="account_number">
		 <view class="account_number_box">
		 	<view class="account_title">
		 		{{$t('strategy.name')}}:{{optionsinfo.type==1?$t('strategy.weekdays'):$t('strategy.weekends')}}
		 	</view>
			<view class="account_discharge">
				<view class="account_discharge1">
                {{$t('strategy.min')}}: 0%
				</view>
				<view class="account_discharge2">
				{{$t('strategy.max')}}: 100%
				</view>
			</view>
			<view class="account_text">
				{{$t('strategy.description')}}：{{optionsinfo.id}}-{{optionsinfo.type==1?$t('strategy.weekdays'):$t('strategy.weekends')}}
			</view>
		 </view>
		</view>
		<view class="toptabbar">
			<view class="toptabbar_box">
			 
			 <zb-table
			             :show-header="true"
			             :columns="column"
			             :stripe="true"
			             :fit="false"
						 border
			             @cellClick="cellClick"
			             :data="Arraytable"
						 @dele="buttonDele"
						 >
						 
						 </zb-table>
						 <!-- <uni-icons type="trash" size="30"></uni-icons> -->
			</view>
			<view class="addtable">
			<!-- <uni-icons type="plus" size="30" @click="Upload"></uni-icons> -->
			</view>
	</view>
	<!-- 普通弹窗-->
	<time-picker-popup ref="TimePickerPopupRef" :value="value" @confirm="confirm"></time-picker-popup>
	
	</view>
</template>
<!--    -->
<script>
	import TimePickerPopup from '@/components/jarvis-timePickerPopup/time-picker-popup.vue';
	import request from '@/utils/request';
	// import { useI18n } from 'vue-i18n'
	// const { t } = useI18n()
export default {
    components: { TimePickerPopup },
    data() {
        return {
            value: {
				numberValue:'',
				defaultValue:true,
				data:['00', '00' , '00', '00']},
			column:[  
		 { name: 'StartTime', label: this.$t('strategy.start')},
		 { name: 'EndTime', label:this.$t('strategy.end')},
		 { name: 'direction', label: this.$t('strategy.direction')},
		 { name: 'power', label: this.$t('strategy.power')},
		 
		  ],
		  Arraytable:[
		            {
		              StartTime: '00:00',
		              EndTime: '00:00',
		              direction:this.$t('strategy.standing'),
		              power: '0'
		            },{
		              StartTime: '00:00',
		              EndTime: '00:00',
		              direction:this.$t('strategy.standing'),
		              power: '0'
		            },{
		              StartTime: '00:00',
		              EndTime: '00:00',
		              direction:this.$t('strategy.standing'),
		              power: '0'
		            },{
		              StartTime: '00:00',
		              EndTime: '00:00',
		              direction:this.$t('strategy.standing'),
		              power: '0'
		            }
					
					],
				optionsinfo:'',
					muserlistObj:{}
        }
    },
	onReady() {
	},
	onLoad(options) {
	 console.log(options);	
	
	 this.optionsinfo = options
	 if(options.type==1){
	this.strategydetails()	 
	 }
	},
	onShow(){
		uni.setNavigationBarTitle({
		  title:this.$t('strategy.editing'),
		});
	},
    methods: {
		// 策略详情
		async strategydetails () {
			try {
				const response = await request({
					url: `/mqtt/selectperiodoftime`,
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data:{
						deviceId:this.optionsinfo.id
					}
				});
				console.log(response);
				// devicedata.value = response.data
				  for (let index = 0; index < response.data.length; index++) {
				    for (let i = 0; i < response.data[index].length; i++) {
				      // 将 value 转换为整数
				      response.data[index][i].value = Number(response.data[index][i].value) | 0;
				
				      const key = response.data[index][i].k; // 使用 'k' 属性作为键
				      const value = response.data[index][i].value + "";
				      const value1 = String(value).padStart(2, "0");
				
				      // 将键值对存入 muserlistObj
				      this.muserlistObj[key] = value1;
				    }
				  }
				  console.log(this.muserlistObj);
				let obj = [
		            {
		              StartTime:this.muserlistObj["Sys_Params_VPP_Charge_StartHour_1"]+':'+this.muserlistObj["Sys_Params_VPP_Charge_StartMin_1"],
		              EndTime:this.muserlistObj["Sys_Params_VPP_Charge_StopHour_1"]+':'+this.muserlistObj["Sys_Params_VPP_Charge_StopMin_1"],
		              direction: this.$t('strategy.charge'),
		              power:this.muserlistObj["Sys_Params_VPP_ChargePower_1"]
		            },
					
					{
		              StartTime:this.muserlistObj["Sys_Params_VPP_Discharge_StartHour_1"]+':'+this.muserlistObj["Sys_Params_VPP_Discharge_StartMin_1"],
		              EndTime:this.muserlistObj["Sys_Params_VPP_Discharge_StopHour_1"]+':'+this.muserlistObj["Sys_Params_VPP_Discharge_StopMin_1"],
		              direction: this.$t('strategy.discharge'),
		              power:this.muserlistObj["Sys_Params_VPP_DischargePower_1"]
		            },{
		              StartTime:this.muserlistObj["Sys_Params_VPP_Charge_StartHour_2"]+':'+this.muserlistObj["Sys_Params_VPP_Charge_StartMin_2"],
		              EndTime:this.muserlistObj["Sys_Params_VPP_Charge_StopHour_2"]+':'+this.muserlistObj["Sys_Params_VPP_Charge_StopMin_2"],
		              direction: this.$t('strategy.charge'),
		              power:this.muserlistObj["Sys_Params_VPP_ChargePower_2"]
		            },
					{
		              StartTime:this.muserlistObj["Sys_Params_VPP_Discharge_StartHour_2"]+':'+this.muserlistObj["Sys_Params_VPP_Discharge_StartMin_2"],
		              EndTime:this.muserlistObj["Sys_Params_VPP_Discharge_StopHour_2"]+':'+this.muserlistObj["Sys_Params_VPP_Discharge_StopMin_2"],
		              direction: this.$t('strategy.discharge'),
		              power:this.muserlistObj["Sys_Params_VPP_DischargePower_2"]
		            }
					
					]
			 this.Arraytable = obj
			} catch (error) {
				console.error('登录失败:', error);
			}
		},
		// 确定弹窗
        async confirm (obj) {
			this.value = obj;
			console.log(deviceid.value);
			try {
				const response = await request({
					url: `/mqtt/periodoftime`,
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
				});
				devicedata.value = response.data
			
			} catch (error) {
				console.error('登录失败:', error);
			}
        },
		open() {
			this.$refs.TimePickerPopupRef.open();
		},
		cellClick(row ,index,column){
			return
			console.log(row ,index,column);
			if(column.label=='操作'){
				return
			}
			let StartTime = row.StartTime.split(":");
			let EndTime = row.EndTime.split(":");
			const mergedArray = StartTime.concat(EndTime);
			 this.value.numberValue = row.power
			 this.value.defaultValue = row.direction == this.$t('strategy.charge')?true:false
			 this.value.data = mergedArray
			this.$refs.TimePickerPopupRef.open();
		},
		buttonDele(e){
			this.deleteItemByIndex(e.key);
		},
	   Upload(){
		   let obj = {
		     StartTime: '00:00',
		     EndTime: '00:00',
		     direction: this.$t('strategy.standing'),
		     power: '0'
		   }
		this.Arraytable.push(obj)
		   
	   },
	 
		 deleteItemByIndex(index) {
		        // 使用 filter 创建一个新数组，排除指定索引的元素
		        this.Arraytable = this.Arraytable.filter((item, i) => i !== index);
				console.log(this.Arraytable);
		    }
    }
}
	
</script>
<!--  -->
<style scoped>
	  .uni-page{
	  		width: 100%;
	  		height: 100%;
	  	}
	  .container {
	  	height: 92vh;
	    background: linear-gradient(to bottom, #007545 -40%, #f0f5f5 40%, #f0f5f5 100%);
	    box-sizing: border-box;
	  }     
	  .account_number{
	    width: 100%;
		padding: 20rpx;
		display: flex;
		justify-content: center;
		box-sizing: border-box;
	  }
	 .account_number_box{
		width: 100%;
		height: 180rpx;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #f0f5f5;
		border-radius: 10rpx;
	 }
	 .account_title{
		 font-size: 28rpx;
		 font-weight: 600;
	 }
	 
	   .toptabbar {
	     width: 100%;
	     padding: 10rpx 20rpx;
	     box-sizing: border-box;
	   }
	
	.toptabbar_box{
		display: flex;
		width: 100%;
		background-color: #f0f5f5;
		border-radius: 10rpx;
		padding: 20rpx;
		overflow: x;
		box-sizing: border-box;
	}
	.account_discharge2{
		margin-left: 40rpx;
	}
	 .account_discharge{
		 display: flex;
		 font-size: 24rpx;
		 margin-top: 30rpx;
	 }
	 .account_text{
		display: flex;
		font-size: 22rpx;
		margin-top: 10rpx;
	 }
	 .toptabbar_box1{
		 width: 100%;
		 height: 40rpx;
		 display: flex;
	 }
	 .toptabbar_box2{
		 flex: 1;
		 display: flex;
         justify-content: center;
	 }
	 .toptabbar_box11{
		 margin-top: 30rpx;
		 width: 100%;
		 height: 40rpx;
		 display: flex;
		 border-bottom: 1rpx solid #cccccc;
		 padding-bottom:10rpx;
	 }
	 .toptabbar_direction{
		 flex: 1;
		 display: flex;
		 justify-content: center;
		 color: #007545;
		 font-weight: 600;
	 }
	 .toptabbar_direction1{
		 flex: 1;
		 display: flex;
		 justify-content: center;
	 		 color: #E56E36;
			 font-weight: 600;
	 }
	
	
	 .popup-height {
	 	@include height;
	 	width: 400px;
	 }
	 	
	 .text {
	 	font-size: 12px;
	 	color: #333;
	 }
	 	
	 .popup-success {
	 	color: #fff;
	 	background-color: #e1f3d8;
	 }
	 	
	 .popup-warn {
	 	color: #fff;
	 	background-color: #faecd8;
	 }
	 	
	 .popup-error {
	 	color: #fff;
	 	background-color: #fde2e2;
	 }
	 	/* 弹出层内容样式 */
	 	.popup-content {
			height: 600rpx;
	 	  padding: 30px;
	 	  text-align: center;
	 	  border-radius: 20rpx;
		  box-sizing: border-box;
	 	}
		/* 文本样式 */
		.popuptext {
			display: flex;
			align-items: center;
		  font-size: 26rpx;
		  color: #333;
		  margin-bottom: 60rpx;
		}
		.popuptext_left{
			margin-right: 20rpx;
		}
		/* 取消按钮样式 */
		.cancel-button {
		  margin-top: 20rpx;
		  font-size: 24rpx;
		  color: #333;
		  border: 0px solid rgba(0, 0, 0, 0) !important;
		  background-color: #fff;
		}
		.uni-button:after{
			border: 0px solid rgba(0, 0, 0, 0) !important;
		}
	
		/* 确认按钮样式 */
		.confirm-button {
			width: 120rpx;
			height: 60rpx;
		  margin-top: 10rpx;
		  font-size: 24rpx;
		  background-color: #007aff;
		  color: #fff;
		}
		/* 根据设备类型调整高度 */
		.popup-height {
		  height: 200px;
		}
		.popupbutton{
			display: flex;
			justify-content: center;
		}
		.l-switch{
			overflow: hidden;
		}
		.l-switch__rail-placeholder{
			height: 100%;
		}
		.addtable{
			width: 100%;
			height: 20rpx;
			text-align: center;
		}
		.static-direction {
		  background-color: #f0f0f0; /* 静置的背景色 */
		  color: #333; /* 静置的文字颜色 */
		}
		
		.forward-direction {
		  background-color: #d4edda; /* 正向的背景色 */
		  color: #155724; /* 正向的文字颜色 */
		}
		
		.reverse-direction {
		  background-color: #f8d7da; /* 反向的背景色 */
		  color: #721c24; /* 反向的文字颜色 */
		}
</style>