bigDataApp/pages/equipList2/index.vue

<template>
	<view>
		<view class="textbox">
			<view class="inputs">
				<u-search placeholder="请输入设备名称/编号" v-model="device_id" placeholder-color="#909696" :show-action="false"
					search-icon-color="#909696" @input="searchinput">
				</u-search>
			</view>
				<view class="tab">
					<view class="tab-content">
						<view class="tab-box tab-box-top">
							<view v-for="(item,index) in menuList" :key="index" @click="change(index,item)"
								v-if="isShow(item)"
								:class="['tab-item',current==index?'active':'']">
								<image class="img-icon" :src="item.app_menu_icon" mode=""></image>
								<view class="text">{{ getSlice(item.purview_name) }}</view>
							</view>
						</view>
						<u-empty v-if="!menuList.length && !loading" :image-size="100" text="暂无设备权限,请联系工作人员添加"></u-empty>
					</view>
				</view>
				<view class="listbox" v-if="menuList.length">
					<view class="second-tab">
						<view class="tab-box">
							<view
								v-for="(item,index) in list"
								:key="index"
								@click="changeDevice(item,index)"
								v-show="!item.url"
								:class="['tab-item',currents == index?'active':'']"
							>
								<text>{{item.purview_name}}</text>
							</view>
						</view>
					</view>
				<view class="third-tab">
					<view 
            class="third-tab-item"
            @click="changeStatus('')" 
            :class="{'active-tab' : device_status == ''}"
          >总计{{ counts }}</view>
					<view 
            class="third-tab-item"
            @click="changeStatus('1')" 
            :class="{'active-tab' : device_status == '1'}"
          >在线{{ online_counts }}</view>
					<view 
            class="third-tab-item"
            @click="changeStatus('0')" 
            :class="{'active-tab' : device_status == '0'}"
          >离线{{ offline_counts }}</view>
				</view>
				<scroll-view 
          :scroll-top="0"
          :scroll-y="true"
          class="list scroll-Y"
          @scrolltoupper="upper"
					@scrolltolower="lower"
          @scroll="scroll"
        >
					<view class="list_item" v-for="(item, index) in eqlistdata" :key="index" @click="historys(item)">
						<view class="list_item_top">
							<view class="p1">
                <span class="title">{{ (item.name || '--' )}}</span>
                <span class="sub-title" @click.stop="modification(item)">信息修改</span>
              </view>
							<view class="online-status"
                v-if="item.status == 1 || item.is_online" >
								<image
                  :src="$imageURL+'/bigdata_app/newImg/home/online1.png'" 
                  mode=""
                ></image>
								<text class="status-text-online">在线</text>
							</view>
							<view
                v-else
								class="online-status"
							>
								<image
                  :src="$imageURL+'/bigdata_app/newImg/home/offline.png'"
                  mode=""
                ></image>
								<text class="status-text-offline">离线</text>
							</view>
						</view>
						<view class="list_item_text">
							<view v-if="item.imei" class="p1">
                <text class="label">IMEI</text>{{ (item.dui || item.imei) }}
              </view>
							<view class="p1">
                <text class="label">设备ID</text>{{ item.only_for_show || item.id || item.device_id }}
              </view>
							<view class="p1">
                <text class="label">上报时间</text>{{ (item.report || item.uptime || item.upload_time) | timeFormat() }}
              </view>
							<view class="p1" style="display:flex;align-items: center;">
								<text class="label">设备位置</text>
								<text class="nav-label">{{ (item.address|| '无') }}</text>
							</view>
							<view class="action-list" style="display:flex;align-items: center;" v-if="type_id == 49">
								<view class="action-item">
									<image :src="lightning" alt="" class="item-icon">
									</image>
            			<text>{{item.sensor_params.charging_vol || 0}}v</text>
								</view>
								<view class="action-item">
									<image :src="getSignal(item.sensor_params.rssl)" alt="" class="item-icon">
									</image>
            			<text>{{item.sensor_params.rssl}}</text>
								</view>
								<view class="action-item">
									<image :src="battery" alt="" class="item-icon">
									</image>
            			<text>{{item.sensor_params.kwh}}%</text>
								</view>
							</view>
							<view class="action-container" v-if="type_id == 49">
								<view class="action-container-item" :class="n.switchValue?'action-container-container-item-active':''" v-for="(n,key) in item.valve_params" :key="key">
									<view class="action-open">
										<view class="item-number" :class="{'item-number-active':n.switchValue}">{{n.name}}</view>
										<u-switch 
											:value="n.switchValue"
											active-color="#0BBC58"
											@click.native="()=>changeSwitchStatus(n.value,n,item)" 
											size="36"
										 ></u-switch>
									</view>
									<view class="action-open-value" @click.stop="editHandle(n.value,n,item)" v-if="n.value != 0">
										<image :src="openingDegree" alt="" class="item-icon">
										</image>
										<text>{{n.value}}%</text>
										<u-icon name="edit-pen" color="#0BBC58"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="loading" v-if="loadingtf">
			<image src="../../static/images/ajax-loader.gif" mode="" class="img"></image>
		</view>
		<view class="top" v-if="isTop" @click="top">
			<image :src="$imageURL+'/bigdata_app' + '/image/6209a98f0cb3b5086f2ca36152c9269.png'" mode=""></image>
		</view>
		<u-popup v-model="showPopup" mode="bottom">
			<u-form :model="form" label-width="160rpx" :label-style="{marginLeft:'20rpx'}">
				<u-form-item label="开启状态">
					<u-radio-group v-model="value" @change="radioGroupChange">
						<u-radio 
							@change="radioChange" 
							v-for="(item, index) in radioList" :key="index" 
							:name="item.value"
							active-color="#0BBC58"
						>
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="开阀时间" v-if="value == 1">
					<view @click="show1 = true" class="hour">{{hour}} 小时</view>
					<view @click="show2 = true" class="minute">{{minute}} 分钟</view>
				</u-form-item>
				<u-form-item label="开度数值">
					<view class="slider-container">
          <view class="slider-min-value">10</view>
          <view
            class="custom-progress"
            @touchstart.stop="onSliderTouchStart($event, 'openingValue', 10, 120)"
            @touchmove.stop.prevent="onSliderTouchMove($event, 10, 120)"
            @touchend.stop="onSliderTouchEnd"
            @tap.stop="onSliderTap($event, 'openingValue', 10, 120)"
          >
            <view class="progress-track">
              <view class="progress-fill" :style="{ width: getProgressWidth(equipContrlForm.openingValue, 10, 120) + '%' }"></view>
              <view class="progress-thumb" :style="{ left: getProgressWidth(equipContrlForm.openingValue, 10, 120) + '%' }"></view>
            </view>
          </view>
          <view class="slider-max-value">100</view>
        </view>
				<text style="margin-left: 20rpx">{{equipContrlForm.openingValue}}</text>
				</u-form-item>
				<u-button type="success" style="width: 94%;margin-left: 3%;margin-bottom: 40rpx" @click="submit">提交</u-button>
			</u-form>
		</u-popup>
		<u-popup v-model="showPopup2" mode="bottom">
			<u-form :model="form" label-width="160rpx" :label-style="{marginLeft:'20rpx'}">
				<u-form-item label="开度数值">
					<view class="slider-container">
          <view class="slider-min-value">10</view>
          <view
            class="custom-progress"
            @touchstart.stop="onSliderTouchStart($event, 'openingValue', 10, 120)"
            @touchmove.stop.prevent="onSliderTouchMove($event, 10, 120)"
            @touchend.stop="onSliderTouchEnd"
            @tap.stop="onSliderTap($event, 'openingValue', 10, 120)"
          >
            <view class="progress-track">
              <view class="progress-fill" :style="{ width: getProgressWidth(equipContrlForm.openingValue, 10, 120) + '%' }"></view>
              <view class="progress-thumb" :style="{ left: getProgressWidth(equipContrlForm.openingValue, 10, 120) + '%' }"></view>
            </view>
          </view>
          <view class="slider-max-value">100</view>
        </view>
				<text style="margin-left: 20rpx">{{equipContrlForm.openingValue}}</text>
				</u-form-item>
				<u-button type="success" style="width: 94%;margin-left: 3%;margin-bottom: 40rpx" @click="submit2">提交</u-button>
			</u-form>
		</u-popup>
		<u-modal v-model="show3" :content="content" @confirm="confirmClose" @cancel="cancelClose"></u-modal>
		<u-select v-model="show1" :list="hours" @confirm="changeHour"></u-select>
		<u-select v-model="show2" :list="minutes" @confirm="changeMinute"></u-select><u-popup v-model="show4" mode="center" width="80%">
		<view class="progress-container">
			<u-line-progress :percent="percentage" style="width: 90%;"></u-line-progress>
		</view>
	</u-popup>
	</view>
</template>

<script>
import lightning from '../assets/lightning.png';
import battery from '../assets/battery.png';
import signal0 from '../assets/signal0.png';
import signal1 from '../assets/signal1.png';
import signal2 from '../assets/signal2.png';
import signal3 from '../assets/signal3.png';
import signal4 from '../assets/signal4.png';
import signal5 from '../assets/signal5.png';
import openingDegree from '../assets/openingDegree.png';

	import {
		Debounce,
		Throttle
	} from '../../util/anitthro.js';
	
	export default {
		data() {
			return {
				showPopup: false,
				showPopup2: false,
				show4: false,
				percentage: 0,
				openingValue: 60,
				show1: false,
				show2: false,
				show3: false,
				content:'确认关闭当前阀吗？',
				hours: [],
				value: 0,
				minutes: [],
				sensor_params:{},
				valve_params:[],
				currentRow: {},
				lightning,
				battery,
				radioList:[{
					name:'常开',
					value:0
				},
				{
					name:'定时',
					value:1
				}],
				form:{},
				openingDegree,
				signal0,
				signal1,
				signal2,
				signal3,
				signal4,
				signal5,
				list: [],
				hour: 1,
				minute: 0,
        pur_id: '',
				loading: false,
				currentPur_id:'',
        device_status: '',
        counts:0,
        online_counts:0,
        offline_counts:0,
				accessToken: '',
				current: 0,
				currents: 0,
				total: 0,
				refreshData:'',
				page: 1,
				size: 10,
				eqlistdata: [],
				isTop: false,
				device_model: '',
				infoalter: false, // 权限设置,
				type_id: 0, //设备类型,
				imgpath: [],
				loadingtf: false,
				width: 0, //顶部搜索栏宽度
				device_id: '', //搜索设备ID
				current_device_id: '', //当前设备ID
				menuList: [],
				sliderRect: {},
				equipContrlForm: {
					openingValue: 60,
				},
				sliderField: '',
				sliderMin: 0,
				sliderMax: 0,
				timer: null,
				valve_param_key: '',
			};
		},
		methods: {
			setPercentage(msg){
				this.timer = setInterval(() => {
					this.percentage += 1;
					if(this.percentage >= 100){
						this.percentage = 100;
						uni.showToast({
							title: msg,
							icon: 'none',
						});
						clearInterval(this.timer);
						this.show4 = false;
						this.percentage = 0;
						this.eqlist();
					}
				}, 125);
			},
			getSignal(val){
				if(val < 0){
					return this.signal0;
				}
				if(val > 5){
					return this.signal5;
				}
				return this['signal' + val];
			},
			confirmClose(){
				this.closeValve();
			},
			cancelClose(){
				this.show3 = false;
			},
			editHandle(openingValue,item,device){
				this.valve_param_key = item.key;
				this.current_device_id = device.id;
				this.showPopup2 = true;
				this.equipContrlForm.openingValue = openingValue;
			},
			changeHour(e){
				this.hour = e[0].value
			},
			changeMinute(e){
				this.minute = e[0].value
			},
			getProgressWidth(value, min, max) {
				if (max === min) return 0
				return ((value - min) / (max - min)) * 100
			},
			getModel(value){
				return value == 0 ? false : true
			},
			async closeValve(){
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=irrigation_system.valvecontrol.close_valvecontrol_valve',
					method: 'POST',
					data: {
						device_id: this.current_device_id,
						valve_param_key: this.valve_param_key
					},
				});
				if(res.code == 0){
					this.show4 = true;
					this.setPercentage(res.message);
				}else{
					uni.showToast({
						title: res?.message,
						icon: 'none',
					});
				}
			},
			async setAction(data){
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=irrigation_system.valvecontrol.open_valvecontrol_valve',
					method: 'POST',
					data,
				});
				if(res.code == 0){
					this.show4 = true;
					this.setPercentage(res.message);
				}else{
					uni.showToast({
						title: res?.message,
						icon: 'none',
					});
				}
			},
			onSliderTouchStart(e, field, min, max) {
				this.sliderField = field
				this.sliderMin = min
				this.sliderMax = max
				const query = uni.createSelectorQuery().in(this)
				query.select('.custom-progress').boundingClientRect(rect => {
					this.sliderRect = rect
				}).exec()
				this.updateSliderValue(e.touches[0].clientX, field, min, max)
			},
			onSliderTouchMove(e, min, max) {
				if (!this.sliderField || !this.sliderRect) return
				this.updateSliderValue(e.touches[0].clientX, this.sliderField, min, max)
			},
			onSliderTouchEnd() {
				this.sliderField = ''
			},
			onSliderTap(e, field, min, max) {
				const query = uni.createSelectorQuery().in(this)
				query.select('.custom-progress').boundingClientRect(rect => {
					this.sliderRect = rect
					this.updateSliderValue(e.detail.x + rect.left, field, min, max)
				}).exec()
			},
			updateSliderValue(clientX, field, min, max) {
				if (!this.sliderRect) return
				let ratio = (clientX - this.sliderRect.left) / this.sliderRect.width
				ratio = Math.max(0, Math.min(1, ratio))
				const value = Math.round(min + ratio * (max - min))
				this.$set(this.equipContrlForm, field, value)
			},
			submit(){
				this.setAction({
					device_id: this.current_device_id,
					valve_param_key: this.valve_param_key,
					var_value: this.equipContrlForm.openingValue,
					valve_delayed: this.value == 0 ? 0 : Number(this.hour) * 60 + Number(this.minute)
				})
				this.showPopup = false;
			},
			submit2(){
				this.setAction({
					device_id: this.current_device_id,
					valve_param_key: this.valve_param_key,
					var_value: this.equipContrlForm.openingValue,
				})
				this.showPopup2 = false;
			},
			getHours(){
				for(let i = 0; i < 24; i++){
					this.hours.push({
						label: i + ' 时',
						value: i,
					})
				}
			},
			getMinutes(){
				for(let i = 0; i < 60; i++){
					this.minutes.push({
						label: i + ' 分',
						value: i,
					})
				}
			},
			isShow(item){
				return item.pur_id != 422
			},
			getSlice(name){
				return name.slice(0,4)
			},
			modification(item) {
				uni.navigateTo({
					url:
						'./seabox/modification?data=' +
						JSON.stringify(item) +
						'&id=' +
						this.type_id,
				});
			},
			changeSwitchStatus(status,item,device){
				this.valve_param_key = item.key;
				this.current_device_id = device.id;
				if(status == 0){
				  this.equipContrlForm.openingValue = 40;
					this.showPopup = true;
					this.currentRow = item;
				}else{
					this.show3 = true;
				}
			},
      changeStatus(status){
        this.device_status = status;
				Debounce(() => {
					this.page = 1;
					this.eqlist();
				}, 500)();
      },
			async getUserlogin() {
        this.list = [];
				this.loading = true;
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=user.login.user_login_info',
					method: 'POST',
					data: {
						is_app: 1,
					},
				});
				this.loading = false;
        res.forEach(item=>{
          item.icon = '/bigdata_app/newImg/home/sqjd.png'
        })
        const menulist = res || [];
        const menuItem = menulist.find(item => item.purview_name == '智慧物联')
        this.menuList = menuItem.children || [];
				if(this.menuList.length == 0){
					//提示暂无分配权限
					uni.showToast({
						title: '暂无分配权限，请联系工作人员',
						icon: 'none',
					});
					return
				}
				if(!this.pur_id){
					this.list = this.menuList[0].children || []
					this.pur_id = this.menuList[0].pur_id || '';
					this.current = 0;
				}else{
					this.list = this.menuList.find(item => item.pur_id == this.pur_id)?.children || []
					this.pur_id = this.menuList.find(item => item.pur_id == this.pur_id)?.pur_id || '';
					this.current = this.menuList.findIndex(item => item.pur_id == this.pur_id);
				}
				if(this.list.length > 1){
					if(this.list[0].purview_name != '全部'){
						this.list.unshift({
							device_type_id: '',
							purview_name: '全部'
						})
					}
				}
				const firstChild = this.list[0];
        this.type_id = firstChild.device_type_id;
				if(firstChild.device_type_id !== ''){
					this.device_model = firstChild?.device_model || '';
				}else{
					this.device_model = '';
				}
        this.initPage();
      },
			async eqlist(tf) {
				this.counts = 0;
				this.online_counts = 0;
				this.offline_counts = 0;
				this.loadingtf = true;
        let data = {
          device_type_id: this.type_id,
          page_num: this.page,
          page_size: this.size,
          pur_id: this.pur_id,
          device_status: this.device_status,
          device_id: this.device_id,
          device_model: this.device_model
        }
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=device.app_device.app_device_list',
					data: data,
				});
				this.loadingtf = false;
        const status = res?.status || {};
        this.online_counts = status.online || 0;
        this.offline_counts = status.offline || 0;
        this.counts = (status.online || 0) + (status.offline || 0);
				this.total = res.total || 0;
				const resData = res?.data;
				resData.forEach(item=>{
					if(item.type_id == 49 && item.valve_params.length){
						item.valve_params.forEach(param=>{
							param.switchValue = param.value == 0 ? false : true;
						})
					}
				})
				console.log(resData,'resDasadsdss')
				if (tf) {
					this.eqlistdata = this.eqlistdata.concat(resData);
				} else {
					this.eqlistdata = resData;
				}
			},
			change(index,itemData) {
        this.list = this.menuList[index].children || []
				const list = [];
				this.list.forEach(item=>{
					if(item.url){
						list.push(item)
					}
				})
				// if(list.length > 1){
				// 	if(this.list[0].purview_name != '全部'){
				// 		this.list.unshift({
				// 			device_type_id: '',
				// 			purview_name: '全部'
				// 		})
				// 	}
				// }
        this.current = index;
        const item = this.list[0];
        this.pur_id = itemData.pur_id || '';
        // this.changeDevice(item,0);
			},
      changeDevice(item,index){
				this.currents = index;
				this.currentPur_id = item.pur_id || '';
				const name = item.menu;
				if (name === 'cbd4') {
					this.device_model = 11;
				} else if(name === 'cbd1'){
					this.device_model = 12;
				} else if(name === 'cbd3'){
					this.device_model = '';
				} else if(name === 'cbd5'){
					this.device_model = 13;
				} else if(name === 'cbd6'){
					this.device_model = 14;
				}else if(name === 'gkcbd1'){
					this.device_model = 15;
				} else if(name === 'zhiCbd'){
					this.device_model = 16;
				} else {
					this.device_model = item.device_model || '';
				}
				this.page = 1;
				this.eqlistdata = [];
				this.type_id = item.device_type_id;
				Debounce(() => {
					this.eqlist();
				}, 500)();
      },
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500,
				});
			},
      initPage(){
        this.eqlistdata = [];
        this.currents = 0;
        this.page = 1;
				Debounce(() => {
					this.eqlist();
				}, 500)();
        this.width = 0;
      },
			historys(item) {
				const type_id = item.type_id;
				this.accessToken = uni.getStorageSync('session_key')
				switch (type_id) {
					// 水肥新设备
					case 49:
						return;
					case 22:
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.id;
						obj.is_online = item.status;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.name;
						obj.uptime = item.uptime;
						uni.navigateTo({
							url: '../waterandfernew/details?shebei=' + JSON.stringify(obj),
						});
						break;
						// 病虫害可视监测
					case 14:
						item.addtime = item.uptime;
						uni.navigateTo({
							url: '../cb/sy/detail?detail=' + JSON.stringify(item),
						});
						break;
					case 2:
						item.addtime = item.uptime;
						if(item.device_model == 102){
							uni.navigateTo({
								url: '../scd/detail?info=' + JSON.stringify(item),
							});
						}else{
							uni.navigateTo({
								url: '../prevention/equipmentdetails?shebei=' + JSON.stringify(item),
							});
						}
						break;
					case 38:
						uni.navigateTo({
							url: `../deviceDetails/weatherStation1/index?devBid=${item.id}&devName=${item.name}&devStatus=${item.status}&address=${item.address}&uptime=${item.uptime}&d_id=${item.d_id}&deviceType=46`,
						});
						break;
						
						// var obj = {};
						// obj.d_id = item.d_id;
						// obj.equip_id = item.id;
						// obj.is_online = item.status;
						// obj.lat = item.lat;
						// obj.lng = item.lng;
						// obj.equip_name = item.name;
						// obj.uptime = item.uptime;
						// uni.navigateTo({
						// 	url: '../environment/equipment-new?shebei=' + JSON.stringify(obj),
						// });
						break;
					case 5:
						var obj = {};
						obj.d_id = item.d_id;
						obj.equip_id = item.id;
						obj.is_online = item.status;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.name;
						obj.uptime = item.uptime;
						uni.navigateTo({
							url: '../environment/equipment?shebei=' + JSON.stringify(obj),
						});
						break;
					case 6:
						uni.navigateTo({
							url: '/pages/webview?device_id=' +
								item.id +
								'&accessToken=' +
								this.accessToken,
						});
						break;
        	case 44:
          uni.navigateTo({
            url:
              '/pages/webviewdgp?device_id=' +
              item.id +
              '&accessToken=' +
              uni.getStorageSync('session_key') +
              '&type=dgp',
          });
          break;
					case 3:
						item.addtime = item.uptime;
						item.type = item.type_id;
						uni.navigateTo({
							url: '../cbd/detail?info=' + JSON.stringify(item),
						});
						break;
					case 28:
						item.addtime = item.uptime;
						item.type = item.type_id;
						uni.navigateTo({
							url: '../cb/smallPest/smallPest?info=' + JSON.stringify(item),
						});
						break;
					case 4:
						item.addtime = item.uptime;
						item.type = item.type_id;
						uni.navigateTo({
							url: '../cb/equip-detail/equip-detail?info=' + JSON.stringify(item),
						});
						break;
					case 32:
					case 35:
						item.addtime = item.uptime;
						item.type = item.type_id;
						uni.navigateTo({
							url: '../cb/equip-detail/equip-detail-new?info=' +
								JSON.stringify(item),
						});
						break;
					case 33:
					case 34:
						item.addtime = item.uptime;
						item.type = item.type_id;
						let cmd = ''
						if(type_id == 34){
							cmd = 'sy1'
						}else if(type_id == 33){
							cmd = 'sy2'
						}
						uni.navigateTo({
							url: '../sy/detail?info=' +
								JSON.stringify(item) + '&cmd=' + cmd,
						});
						break;
					case 7:
						item.addtime = item.uptime;
						item.type = item.type_id;
						// uni.navigateTo({
						// 	url: '../bzy/detail?info=' + JSON.stringify(item),
						// });
						if(item.pur_id == 458){
							uni.navigateTo({
								url: '../bzy/detail?info=' + JSON.stringify(item),
							});
						}else{
							uni.navigateTo({
								url: '../cb/equip-detail/equip-detail?info=' + JSON.stringify(item),
							});
						}
						break;
					case 8:
						uni.navigateTo({
							url: '../cb/thxydetail/thxydetail?imei=' + item.id,
						});
						break;
					case 29:
						uni.navigateTo({
							url: `../cb/nlNewXy/nlNewXy?imei=${item.id}&showId=${item.d_id}`,
						});
						break;
					case 24:
						uni.navigateTo({
							url: '../cb/zjxydetail/thxydetail?imei=' + item.id,
						});
						break;
					case 12:
						item.addtime = item.uptime;
						uni.navigateTo({
							url: '../cb/xctdetail/xctdetail?info=' + JSON.stringify(item),
						});
						break;
					case 13:
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.id;
						obj.is_online = item.status;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.name;
						obj.uptime = item.uptime;
						uni.navigateTo({
							url: '../waterandfer/datails?shebei=' + JSON.stringify(obj),
						});
						break;
					case 15:
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.id;
						obj.is_online = item.status;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.name;
						obj.uptime = item.uptime;
						obj.address = item.address || '无';
						uni.navigateTo({
							url: '../environment/gsequipment?shebei=' + JSON.stringify(obj),
						});
						break;
					case 17:
						break;
					case 18:
						var obj = {};
						obj.device_id = item.id;
						obj.is_online = item.status;
						uni.navigateTo({
							url: '../cb/shuifeiL/shuifeiL?detail=' + JSON.stringify(obj),
						});
						break;
          case 43:
            uni.navigateTo({
              url: "/pages/fmSys/details?info=" + JSON.stringify(item)
            })
          break;
          // case 44:
          //   uni.navigateTo({
          //     url: "/pages/webviewdgp/webview?device_id=" + item.id + "&accessToken=" + this.accessToken || uni
          //       .getStorageSync('session_key') +
          //       '&type=dgp'
          //   })
          // break;
					case 11:
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.id;
						obj.is_online = item.status;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.name;
						obj.uptime = item.uptime;
						obj.location = item.address;
						obj.type = 11;
						uni.navigateTo({
							url: '../disease/cmb?shebei=' + JSON.stringify(obj),
						});
						break;
					case 19:
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.id;
						obj.is_online = item.status;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.name;
						obj.uptime = item.uptime;
						obj.location = item.address;
						obj.type = 19;
						uni.navigateTo({
							url: '../disease/cmb?shebei=' + JSON.stringify(obj),
						});
						break;
					case 20:
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.id;
						obj.is_online = item.status;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.name;
						obj.uptime = item.uptime;
						obj.location = item.address;
						obj.type = 20;
						uni.navigateTo({
							url: '../disease/cmb?shebei=' + JSON.stringify(obj),
						});
						break;
					case 21:
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.id;
						obj.is_online = item.status;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.name;
						obj.uptime = item.uptime;
						obj.location = item.address;
						obj.type = 21;
						uni.navigateTo({
							url: '../disease/cmb?shebei=' + JSON.stringify(obj),
						});
						break;
					case 26:
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.id;
						obj.is_online = item.status;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.name;
						obj.uptime = item.uptime;
						obj.location = item.address;
						obj.type = 26;
						uni.navigateTo({
							url: '../disease/cmb?shebei=' + JSON.stringify(obj),
						});
						break;
					case 27:
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.id;
						obj.is_online = item.status;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.name;
						obj.uptime = item.uptime;
						obj.location = item.address;
						obj.type = 26;
						uni.navigateTo({
							url: '../disease/mls/mls?shebei=' + JSON.stringify(obj),
						});
						break;
					case 25:
						item.addtime = item.uptime;
						uni.navigateTo({
							url: '../cb/xylps/detail?detail=' + JSON.stringify(item),
						});
						break;
					case 40:
						item.addtime = item.uptime;
						uni.navigateTo({
							url: `../cb/shuifeizs/shuifeizs?devBid=${item.d_id}&devName=${item.name}&devStatus=${item.status}`,
						});
						break;
					case 42:
						item.addtime = item.uptime;
						uni.navigateTo({
							url: `../cb/wenshizs/wenshizs?devBid=${item.d_id}&devName=${item.name}&devStatus=${item.status}`,
						});
						break;
					case 45:
						item.addtime = item.uptime;
						uni.navigateTo({
							url: `../cb/shuifeizsFirst/shuifeizs?devBid=${item.d_id}&devName=${item.name}&devStatus=${item.status}`,
						});
						break;
					case 46:
						uni.navigateTo({
							url: `../deviceDetails/weatherStation/index?devBid=${item.id}&devName=${item.name}&devStatus=${item.status}&address=${item.address}&uptime=${item.uptime}&d_id=${item.d_id}&deviceType=46`,
						});
						break;
					case 47:
						uni.navigateTo({
							url: `../cb/zhamenFirst/zhamenzs?devBid=${item.d_id}&devName=${item.name}&devStatus=${item.status}`,
						});
						break;
					default:
						item.addtime = item.uptime;
						item.type = this.type_id;
						uni.navigateTo({
							url: '../cb/xy2.0/particulars?info=' + JSON.stringify(item),
						});
						break;
				}
			},
			searchinput() {
				Debounce(() => {
					this.eqlistdata = [];
					this.page = 1;
					this.eqlist();
				}, 1000)();
			},
			scrollTop(e) {},
			upper() {},
			lower() {
				if(this.eqlistdata.length >= this.total){
					return;
				}
				Debounce(() => {
					this.page++;
					this.eqlist(true);
				}, 500)();
			},
			scroll() {},
		},
		watch:{
			pur_id(){
				setTimeout(() => {
					this.getUserlogin();
				}, 100);
			},
		},
		onLoad() {
			this.getHours();
			this.getMinutes();
			const that = this;
			uni.$on('purId', (item) => {
				that.pur_id = item.purId;
				that.menu = item.menu;
				that.device_model = item.device_model;
			});
			uni.$on('refreshData', (refreshData) => {
				this.eqlist();
			});
			this.getUserlogin();
		},
		onShow() {
			// 监听刷新数据事件
			const refreshData = uni.getStorageSync('refreshData');
			if(!this.refreshData){
				this.refreshData = refreshData;
				// 如果发生改变，刷新数据
				if(refreshData){
					Debounce(() => {
						this.getUserlogin();
					}, 500)();
				}
			}else if(this.refreshData != refreshData){
				this.refreshData = refreshData;
				Debounce(() => {
					this.getUserlogin();
				}, 500)();
			}
		},
		onTabItemTap(e) {
		},
		onReachBottom() {
			if(this.eqlistdata.length >= this.total){
				return;
			}
			Debounce(() => {
				this.page++;
				this.eqlist(true);
			}, 500)();
		},
		onPageScroll(e) {
			//nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > 200) {
				//距离大于200时显示
				this.isTop = true;
			} else {
				//距离小于200时隐藏
				this.isTop = false;
			}
		},
	};
</script>
<style lang="scss">
	page {
		background: linear-gradient(180deg, #ffffff00 0%, #F5F6FA 23.64%, #F5F6FA 100%), linear-gradient(102deg, #BFEADD 6.77%, #B8F1E7 40.15%, #B9EEF5 84.02%);
	}
	::v-deep .u-flex{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.hour,.minute{
		font-size: 28rpx;
		color: #999999;
		border-radius: 8rpx;
		border: 2rpx solid #aaa;
		padding: 4rpx 8rpx;
		margin-right: 8rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 160rpx;
	}
	/deep/.uni-icons {
		font-size: 40rpx !important;
	}
  input{
    background: transparent !important;
  }
	.textbox {
		width: 100%;
		height: calc(100vh - 82rpx);
		padding-top: 82rpx;
		box-sizing: border-box;
	}

	.inputs {
		width: 65%;
		margin-left: 12rpx;

		/deep/.u-content {
			background-color: #fff !important;
		}

		/deep/.uni-input-wrapper {
			background-color: #fff !important;
		}

	}

  .slider-container{
    position: relative;
    margin-top: 10rpx;
    .slider-min-value{
      position: absolute;
      left: 0;
      top: -60rpx;
    }
    .slider{
      width: 600rpx;
    }
    .slider-max-value{
      position: absolute;
      right: 0;
      top: -60rpx;
    }
  }
  .custom-progress{
    width: 500rpx;
    padding: 0;
    .progress-track{
      position: relative;
      height: 12rpx;
      background-color: #ebedf0;
      border-radius: 6rpx;
    }
    .progress-fill{
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background-color: #0BBC58;
      border-radius: 6rpx;
      transition: width 0.2s;
    }
    .progress-thumb{
      position: absolute;
      top: 50%;
      width: 28rpx;
      height: 28rpx;
      margin-left: -14rpx;
      margin-top: -14rpx;
      border-radius: 50%;
      background-color: #fff;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
      transition: left 0.2s;
    }
  }
	.utabs_box {
		width: 100%;
		position: fixed;
		top: 88px;
		background-color: #ffffff;
		z-index: 100;

		.utabs {
			width: 95%;
			margin: 0 auto;
		}
	}
	.opening-container{
		position: relative;
		width: 100%;
		.opening-min{
			position: absolute;
			top: 0;
			left: 0;
			font-size: 24rpx;
		}
		.opening-max{
			position: absolute;
			top: 0;
			right: 0;
			font-size: 24rpx;
		}
	}
	.loading {
		position: fixed;
		top: 440px;
		width: 95%;
		left: 2.5%;
		text-align: center;

		.img {
			width: 300rpx;
			height: 40rpx;
		}
	}

  .active-tab{
    border-radius: 8rpx;
    background: linear-gradient(0deg, #0bbc580f 0%, #0bbc580f 100%), #00000005;
  }

	.tab-box {
		font-size: 30rpx;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		overflow-y: hidden;
		overflow-x: auto;
		white-space: nowrap;
    // 去掉滚动条
    -ms-overflow-style: none;
    scrollbar-width: none;
		.tab-item {
			cursor: pointer;
			position: relative;
			text-align: center;
			display: inline-block;
			padding: 16rpx 24rpx;
			box-sizing: border-box;
			span {
				display: inline-block;
			}
		}
	}
	.tab-box-top{
		.tab-item {
			width: 140rpx;
			text-align: center;
		}
	}
	.action-list{
		display: flex;
		margin: 8px 0;
		.action-item{
			display: flex;
			align-items: center;
			margin-right: 8px;
			.item-icon{
				width: 15px;
				height: 15px;
				margin-right: 4px;
			}
		}
	}
	.action-container{
		display: flex;
		align-items: center;
		gap: 16rpx;
		.action-container-item{
			flex:1;
			height: 90rpx;
			border-radius: 8rpx;
			background: #ffffff;
			padding: 8rpx;
			border: 2rpx solid #999999;
		}
		.action-container-container-item-active{
			border: 2rpx solid #0BBC58;
		}
		.action-open{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.item-number{
			width: 30rpx;
			height: 30rpx;
			line-height: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			border: 2rpx solid #999999;
			color: #999999;
			font-size: 22rpx;
			margin-right: 8rpx;
			//超出部分省略号
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.item-number-active{
			border: 2rpx solid #0BBC58;
			color: #0BBC58;
		}
		.action-open-value{
			margin-top: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
		}
		.item-icon{
			width: 15px;
			height: 15px;
			margin-right: 4px;
		}
	}
	.progress-container{
		display: flex;
		justify-content: center;
		align-items: center;
		height:100%;
	}
	.tab {
		// background-color: #0BBC58;
		margin-top: 42rpx;
		margin-bottom: 38rpx;
		padding: 0 32rpx;
		.img-icon {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 12rpx;
		}
		
		.text {
			color: #303133;
			font-size: 24rpx;
		}
		.tab-content {
			width: 100%;
			height: 162rpx;
		}
		.tab-item.active {
			border-radius: 24rpx;
			background: linear-gradient(0deg, #0bbc580f 0%, #0bbc580f 100%), #00000005;
		}
	}
	.second-tab {
		height: 80rpx;
		.tab-item{
			font-size: 28rpx;
			color: #999999;
		}
		.tab-item.active {
			color: #303133;
			font-weight: 700;
		}
		.tab-item.active::after {
		  content: '';
		  position: absolute;
		  bottom: 0;
		  left: 50%;
		  transform: translateX(-50%);
		  width: 18px; /* 比文字略宽 */
		  height: 18px;
		  border: 3px solid #0BBC58;
		  border-radius: 50%;
			border-color: transparent; /* 隐藏其他部分 */
		  border-bottom-color: #0BBC58; /* 组合成45度角 */
		    // transform: rotate(0deg); /* 调整角度 */
		}
	}
	.third-tab {
		margin: 8rpx 0;
		height: 64rpx;
		line-height: 64rpx;
		display: flex;
		justify-content: space-between;
		.third-tab-item {
			flex: 1;
			text-align: center;
		}
	}
	.list {
		width: 100%;
		background-color: #F5F6FA;
		// margin-bottom: 100rpx;
		overflow-y: auto;
		padding: 0 32rpx;
		box-sizing: border-box;
		.list_item {
			width: 100%;
			margin: 0 auto 24rpx;
			padding: 32rpx;
			box-sizing: border-box;
			position: relative;
			background-color: #ffffff;
			border-radius: 16rpx;
			.list_item_top {
				.p1 {
					width: 86%;
					font-size: 28rpx;
					overflow: hidden;
					display: flex;
					align-items: center;
					.title{
						 max-width: 75%;
						 color: #333333;
						 font-size: 28rpx;
						 font-weight: 700;
						 margin-right: 8rpx;
						 overflow: hidden;
						 text-overflow: ellipsis;
						 white-space: nowrap;
					}
					.sub-title{
						 border-radius: 32rpx;
						 border:2rpx solid #0bbc58;
						 padding: 4rpx 12rpx;
						 font-size: 22rpx;
						 font-weight: 400;
						 overflow: hidden;
						 text-overflow: ellipsis;
						 white-space: nowrap;
						 color:#0bbc58;
						 margin-left: 20rpx;
					}
				}
			}
			.online-status{
				font-size: 28rpx;
				position: absolute;
				text-align: center;
				right: 2rpx;
				top: 2rpx;
				image{
					width: 140rpx;
					height: 56rpx;
				}
				.status-text-online{
					color: #0BBC58;
					position: absolute;
					top: 0rpx;
					right: 0rpx;
					width: 120rpx;
					height: 56rpx;
					line-height: 56rpx;
					font-size: 26rpx;
				}
				.status-text-offline{
					color: #FB4E52;
					position: absolute;
					top: 0rpx;
					right: 0rpx;
					width: 120rpx;
					height: 56rpx;
					line-height: 56rpx;
					font-size: 26rpx;
				}
			}
			// .p2 {
					
			// 	color: #0BBC58;
			// 	background: #0bbc581a;
			// }
			
			// .p_out {
					
			// 	color: #FB4E52;
			// 	background: #fb4e521a;
			// }
			.list_item_text {
				margin-top: 20rpx;
				
				.p1 {
					font-size: 24rpx;
					color: #303133;
					margin-top: 10rpx;
					word-break: break-all;
				}
				.label{
					 color: #999999;
					 text-align: left;
					 margin-right: 32rpx;
					 font-size: 24rpx;
					 min-width: 90rpx;
					 display: inline-block;
				}
				.nav-label{
					//超出隐藏
					display: inline-block;
					width: 70%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.list_item_btn {
				width: 126rpx;
				color: #42b983;
				height: 40rpx;
				text-align: center;
				border: 1rpx solid #42b983;
				border-radius: 25rpx;
				font-size: 24rpx;
				line-height: 35rpx;
				position: absolute;
				bottom: 15rpx;
				right: 20rpx;
			}
		}
	}

	.top {
		position: fixed;
		right: 30px;
		bottom: 100px;
		z-index: 100;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>