iot-wap/src/pages/device/list/Index.vue

<template>
  <div style="display: flex; flex-direction:column;height: 100vh;">
    
    <!-- 店铺名称 -->
    <div style="padding: 10px 16px 10px 16px;">
      <div style="display: flex; 
        justify-content:space-between; 
        align-items:center;">
        <div style="display: flex; align-items: flex-end;">
          <div style="font-size: 20px; font-weight: bold;">
            <span>设备</span>
          </div>
          <div style="font-size: 0.9rem; margin-left: 5px;">
            <span>共{{ page.total }}台</span>
          </div>
        </div>
        <div style="background-color: #eee; border-radius: 2.5rem; width: 0px; flex-grow: 1; margin: 0px 5px;">
          <van-field style="padding: 6px 16px;" v-model="keyWord" size="normal" clearable />
        </div>
        <div style="line-height: 0px;" @click="onRefresh">
          <van-icon name="static/images/icon-search-black.png" size="1.7rem" />
        </div>
      </div>
    </div>

    
    <div class="container" style="overflow-y: auto; flex-grow: 1;">
      <van-pull-refresh style="min-height: 100%;" v-model="refreshing" @refresh="onRefresh">
        <van-swipe-cell v-for="item in dataList" style="background-color: #fff; margin-bottom: 10px;">
          <template #right>
            <div style="width: 50px; height: 100%; background-color: red; 
              display: flex; justify-content:center; align-items: center;">
              <div>
                <div style="color: #fff; font-weight: bold;">
                  <span>删除</span>
                </div>
              </div>
            </div>
          </template>
          <van-cell clickable :to="'/device/detail/'+item.mac">
            <div style="text-align: left;">
              <!-- 第一行 -->
              <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                <div style=" font-size: 0.9rem;">
                  <span v-if="item.username" style="color: #000;">{{item.username}}</span>
                  <span v-else>未知用户</span>
                </div>
                <div style="font-size: 0.9rem;">{{ item.productName }}</div>
              </div>
              <!-- 第二行 -->
              <div style="display: flex; align-items: flex-end;">
                <div style="color: #000; font-weight: bold; font-size: 1.1rem;">
                  <span>{{ item.mac }}</span>
                </div>
                <div style="margin-left: 5px; margin-bottom: 2px;">
                  <template v-if="getTimeSpan(item.modifytime) < 1200">
                    <van-tag round size="medium" type="success">在线</van-tag>
                  </template>
                  <template v-else>
                    <van-tag round size="medium" type="danger">离线</van-tag>
                  </template>
                </div>
              </div>
              <!-- 第三行 -->
              <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                <div style="font-size: 0.9rem; margin-left: 0px;">
                  <span>{{ item.createtime }}</span>
                </div>
                <div style="font-size: 0.9rem; margin-left: 0px;">
                  <span>{{item.modifytime}}</span>
                </div>
              </div>
              <!-- 第四行 -->
              <div style="display: flex; justify-content: space-between;">
                <div v-if="JSON.parse(item.data).lat" style="display: flex; color: #000;" @click.stop="onLocation(item.mac)">
                  <div>
                    <van-icon name="static/images/icon-location2.png" size="1.5rem" />
                  </div>
                  <div style="margin-left: 3px;">位置</div>
                </div>
                <div v-else>暂无定位</div>
                <div></div>
                <div style="display: flex; color: #000;" @click.stop="onLog(item.mac)">
                  <div>
                    <van-icon name="static/images/icon-log.png" size="1.5rem" />
                  </div>
                  <div style="margin-left: 3px;">传输日志</div>
                </div>
                <!-- <div style="display: flex; color: #000;">
                  <div>
                    <van-icon name="static/images/icon-edit.png" size="1.5rem" />
                  </div>
                  <div style="margin-left: 3px;">编辑</div>
                </div> -->
              </div>
              
            </div>
          </van-cell>
        </van-swipe-cell>

        <!-- 数据提示 -->
        <div>
          <div v-if="refreshing"></div>
          <div v-else-if="dataList.length == 0" style="text-align: center; padding: 20px; color: #ccc;">
            <span>暂无数据</span>
          </div>
          <div v-else-if="isLoading" style="text-align: center; padding: 20px;">
            <van-loading type="spinner" color="#1989fa" />
          </div>
          <div v-else-if="page.pages <= page.pageNum" style="text-align: center; padding: 20px; color: #ccc;">
            <span>没有更多了</span>
          </div>
          <div v-else style="text-align: center; padding: 20px;">
            <span @click="clickLoading">点击加载</span>
          </div>
        </div>
        <div style="height: 60px; "></div>

      </van-pull-refresh>
      <!-- 返回顶部 -->
      <van-back-top target=".container" right="5vw" bottom="80px" />
    </div>
  </div>

</template>

<script setup lang="ts">
  import { onMounted, reactive, ref } from 'vue';
  import { useRouter } from 'vue-router'
  import { post_promise } from '@/network/axios';
  import 'vant/es/toast/style';
  // 路由
  const router = useRouter();
  const onLocation = (deviceId: string) => {
    console.log(deviceId)
    // 跳转到定位
    router.push('/device/location/' + deviceId)
  }

  // 跳转到日志
  const onLog = (deviceId: string) => {
    console.log(deviceId)
    // 跳转到定位
    router.push('/device/log/' + deviceId)
  }

  // 搜索关键字
  const keyWord = ref('');

  // 分页
  const page = reactive({
    total: 0,
    pageNum: 1,
    pageSize: 10,
    pages: 0,
  })
  const dataList = ref<any[]>([]);
  const refreshing = ref(false);
  const isLoading = ref(false);
  const finished = ref(false);

  // 获取数据
  const getData = () => {
    console.log('onload.....')

    post_promise({url: '/device/search', data: {
      size: page.pageSize,
      page: page.pageNum,
      sort: "createtime",
      order: "desc",
      keyWord: keyWord.value,
      mac: ''
    }})
    .then((result) => {
      console.log(result)
      // 刷新结束
      isLoading.value = false;
      refreshing.value = false;
      // 处理成功结果
      if(result.code == 0){
        // 下拉刷新时清空列表
        const dataArr:any[] = result.data;
        const total = result.total;
        const pages = Math.ceil(total / page.pageSize);
        console.log(pages);
        console.log(dataArr)
        
        if(page.pageNum == 1){
          dataList.value.splice(0, dataList.value.length);
        }
        dataList.value.push(...dataArr);
        page.pages = pages
        page.total = total
        console.log(dataList.value, pages)
      }
    },(result) => {
        console.log(result)
      isLoading.value = false;
      refreshing.value = false;
          // 跳转到首页
    }).catch((ex) => {
      console.log(ex)
      isLoading.value = false;
      refreshing.value = false;
        // 跳转到首页
    })


  };
  const onRefresh = () => {
    console.log('onrefresh...')
    console.log(refreshing.value)
    page.pageNum = 1;
    // 清空列表数据
    finished.value = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    isLoading.value = true;
    getData();
  };

  const getTimeSpan = (time: string) => {
    const before = Date.parse(time);
    const now = new Date().getTime();

    return (now - before) / 1000;
  }

  // 生命周期
  onMounted(() => {
    console.log('onMounted');
    // const before = Date.parse("2011-10-10 14:48:00");
    // const now = Date.parse("2011-10-10 15:08:00");
    // console.log(before)
    // console.log(now)
    // console.log(now - before)
    getData();
  })


  // 点击加载
  const clickLoading = () => {
    console.log('clickLoading');
    page.pageNum++
    isLoading.value = true
    getData();
  }

</script>

<style scoped>


</style>