usky-web-mobile/src/pages/business/mhxf/deviceManage/index.vue

<template>
  <u-sticky bgColor="#fff" style="border-bottom: 1px #ececec solid">
    <u-tabs :list="list" @click="tabsClick" :current="current" :scrollable="list.length >= 5 ? true : false"></u-tabs>
  </u-sticky>

  <view class="deviceManage" @touchstart="fingerstart" @touchend="fingerend">
    <uni-swipe-action>
      <uni-swipe-action-item style="background-color: #ffffff">
        <view class="content1">
          <view style="padding: 10px">
            <u-input style="border-radius: 50px" v-model="dataInput"  @blur="blur" prefixIcon="search" prefixIconStyle="color: #0c7bf9" placeholder="请输入设备编号"> </u-input>
          </view>
		  
		  <view style="text-align: center; padding: 10px" v-if="!dataRes">暂无数据...</view>

          <u-collapse @change="change" @close="close" @open="open" accordion v-else>
            <u-collapse-item class="uCollapseItem" v-for="da in dataList" :key="da">
              <template v-slot:title>
                <view style="display: flex">
					<view class="cu-avatar lg" style="margin: 0 10px auto 0;background-color:rgba(0,0,0,0);">
						<image class="image-bg" style=" width:80rpx;height:80rpx" src="@/static/images/deviceManage/1.png" ></image>
					</view>     
                  <view style="width: 100%">
                    <view style="display: flex; color: #000000">
                      <view>设备编号：{{ da.deviceCode }}</view>
                      <view v-if="da.deviceStatus == 0" style="margin-left: 20px; font-size: 12px; background-color: #aeaeae; color: #ffffff; padding: 0 5px; border-radius: 20px; line-height: 20px">
                        离线
                      </view>
					  <view v-else-if="da.deviceStatus == 1" style="margin-left: 20px; font-size: 12px; background-color: #12c100; color: #ffffff; padding: 0 5px; border-radius: 20px; line-height: 20px">
					    正常
					  </view>
					  <view v-else-if="da.deviceStatus == 2" style="margin-left: 20px; font-size: 12px; background-color: #FF1313; color: #ffffff; padding: 0 5px; border-radius: 20px; line-height: 20px">
					    故障
					  </view>
                      <view v-else style="margin-left: 20px; font-size: 12px; background-color: #0D88F0; color: #ffffff; padding: 0 5px; border-radius: 20px; line-height: 20px"> 告警 </view>
                    </view>
                    <view style="display: flex; font-size: 14px; color: #666666; margin: 10px 0">
                      <view style="width: 50%; word-break: break-all">监测对象：{{ da.installAddress }}</view>
                      <view style="width: 50%; word-break: break-all; padding-left: 10px">所属单位：{{ da.companyName }}</view>
                    </view>
                    <view style="display: flex; font-size: 14px; color: #666666">
                      <view style="width: 50%; word-break: break-all">负责人：{{ da.linkPerson }}</view>
                      <view style="width: 50%; word-break: break-all; padding-left: 10px">联系电话：{{ da.linkPhone }}</view>
                    </view>
                  </view>
                </view>
              </template>

              <view class="u-collapse-content">
               <!-- <view style="display: flex; flex-wrap: wrap; margin-left: 5%">
                  <view style="width: 50%; height: 30px; line-height: 30px" v-for="ch in da.dataList" :key="ch">
                    <span>{{ ch.label }}：</span>
                    <span :style="ch.value === '正常' ? 'color:#12C100' : 'color:#FF0101'">{{ ch.value }}</span>
                  </view>
                </view> -->
                <view style="display: flex; flex-wrap: wrap; margin-left: 5%">
                  <view style="width: 50%; height: 30px; line-height: 30px" v-for="ch in da.dataList" :key="ch">
                    <span>{{ ch.portName }}：</span>
                    <span >{{ ch.portData }}</span>
                  </view>
                </view>
              </view>
            </u-collapse-item>
          </u-collapse>
        </view>
      </uni-swipe-action-item>
    </uni-swipe-action>
  </view>
</template>

<script setup>
import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, watchEffect } from "vue";
import useXunJianStore from "@/store/modules/xunJian";

const myRequest = inject("$myRequest"); //全局接口请求
const settingsStore = useXunJianStore(); //全局变量值Store

const dataInput = ref("");

const dataRes = ref(0);
const systemTypeNo=ref(5)
const dataList = ref([
]); //设备管理数据存储

const current = ref(0);
const list = ref([
  {
    id: 5,
    name: "电气火灾",
  },
  {
    id: 4,
    name: "烟感",
  },
  {
    id: 3,
    name: "水系统",
    badge: {
      // isDot: true,
      // value: 5,
    },
  },
]);

const startData = ref({
  clientX: "",
  clientY: "",
});
const updDistance = ref(100);
const lrDistance = ref(50);
const topMed = ref("");
const bottomMed = ref("");
const leftMed = ref("");
const rightMed = ref("");


/**
 * @tabs点击事件
 */
function tabsClick(e) {
  current.value = e.index;
  // alert(current.value)
  dataInput.value = ''
}


/**
 * @当按下去的时候
 */
function fingerstart(e) {
  // 记录 距离可视区域左上角 左边距 和 上边距
  startData.value.clientX = e.changedTouches[0].clientX;
  startData.value.clientY = e.changedTouches[0].clientY;
}
/**
 * @当抬起来的时候
 */
function fingerend(e) {
  // 当前位置 减去 按下位置 计算 距离
  const subX = e.changedTouches[0].clientX - startData.value.clientX;
  const subY = e.changedTouches[0].clientY - startData.value.clientY;
  if (subY > updDistance.value || subY < -updDistance.value) {
    if (subY > updDistance.value) {
      bottomscroll(subY);
    } else if (subY < -updDistance.value) {
      topscroll(subY);
    }
  } else {
    if (subX > lrDistance.value) {
      rightscroll(subX);
    } else if (subX < -lrDistance.value) {
      leftscroll(subX);
    } else {
      console.log("无效操作");
    }
  }
}
/**
 * @上滑触发
 */
function topscroll(dista) {
  topMed.value ? (topMed.value = dista) : (topMed.value = null);
  console.log("触发了上滑方法!");
}
/**
 * @下滑触发
 */
function bottomscroll(dista) {
  bottomMed.value ? (bottomMed.value = dista) : (bottomMed.value = null);
  console.log("触发了下滑方法!");
}
/**
 * @右滑触发
 */
function rightscroll(dista) {
  rightMed.value ? (rightMed.value = dista) : (rightMed.value = null);
  console.log("触发了右滑方法!");
  if (current.value >= 1) {
    current.value--;
  } else {
    current.value = 0;
  }
}
/**
 * @左滑触发
 */
function leftscroll(dista) {
  leftMed.value ? (leftMed.value = dista) : (leftMed.value = null);
  console.log("触发了左滑方法!");
  if (current.value < list.value.length - 1) {
    current.value++;
  } else {
    current.value = 0;
  }
}
	function blur(e) {
		if(dataInput.value ){
			classifySearch({systemType:5,deviceCode:dataInput.value})
		}
	}

//分类信息查询 start
	async function classifySearch(params) {
		// classifyData.value = []
	
		const res = await myRequest({
			url: '/service-fire/dataRt/dataRtList',
			data: params
		})
		console.log('------')
		console.log(res.data.data.records)
		
		dataList.value=res.data.data.records
	
		
	}
	// end
	
	

watchEffect(() => {
  if (current.value == 0) {
    console.log(current.value);
	classifySearch({systemType:5,deviceCode:dataInput.value,pageNum:'',pageSize:''})
  } else if (current.value == 1) {
    console.log(current.value);
	classifySearch({systemType:1,deviceCode:dataInput.value,pageNum:'',pageSize:''})
  } else if (current.value == 2) {
    console.log(current.value);
	classifySearch({systemType:2,deviceCode:dataInput.value,pageNum:'',pageSize:''})
  }
});

function open(e) {
  // console.log('open', e)
}
function close(e) {
  // console.log('close', e)
}
function change(e) {
  // console.log('change', e)
}

// 自定义导航事件
onNavigationBarButtonTap((e) => {
  if (e.float == "right") {
    uni.navigateTo({
      url: "/pages/business/mhxf/xunJian/collect/components/collectRecord",
    });
  } else {
  }
});

onLoad((options) => {
	// classifySearch({systemType:5,deviceCode:dataInput.value})
});

onReady(() => {});

onMounted(() => {});
</script>

<style lang="scss">
	body {
	  background: #fff;
	}
.is-selected {
  color: #1989fa;
}

.deviceManage {
  height: calc(100% - 45px);
  background-color: #ffffff;

  .content1 {
    .u-row {
      .u-col {
        border: 1px #e4e3e3 solid;
        border-right: 0px;
        border-bottom: 0px;
      }

      .u-col:last-child {
        border-right: 1px #e4e3e3 solid;
      }
    }

    .u-row:last-child {
      .u-col {
        border-bottom: 1px #e4e3e3 solid;
      }
    }
  }
}
</style>

<style scoped>
body,
uni-page-body,
uni-page-refresh,
.grayBackgroundColor {
  background: rgb(241, 241, 241);
}
.whiteBackgroundColor {
  background-color: #ffffff;
  height: 100%;
}
	
</style>