pms-app/pages/realTimeData/index.vue

<template>
  <z-paging class="page" ref="paging" v-model="dataList" :default-page-size="20" @query="queryList">
    <!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
    <!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
    <template #top>
      <uni-row class="search-row flex-row align-center justify-between">
        <uni-col :span="18">
          <uni-easyinput
            v-model="keywords"
            :styles="inputStyles"
            :placeholderStyle="placeholderStyle"
            :placeholder="$t('common.searchHint')" />
        </uni-col>
        <uni-col :span="6" class="flex-row justify-end">
          <button class="mini-btn" type="primary" size="mini" @click="searchList">
            {{ $t('operation.search') }}
          </button>
        </uni-col>
      </uni-row>
    </template>
    <view style="margin-top: 10px">
      <template v-for="(item, index) of dataList" :key="index">
        <view :class="item.ifInline === 3 ? 'item-online' : 'item-offline'" @click="viewDetail(item)">
          <uni-row class="flex-row">
            <image v-if="item.ifInline === 3" src="~@/static/realTimeData/online.png" style="width: 32px; height: 32px"/>
            <image v-else src="~@/static/realTimeData/offline.png" style="width: 32px; height: 32px"/>
            <uni-col style="color: #333333">
              <view class="flex-row align-center" style="justify-content: space-between; margin-left: 10px">
                <view class="flex-row align-center">
                  <text style="font-size: 14px">{{ item.deviceName }}</text>
                  <text class="max-content" style="margin: 0 10px; font-size: 10px">{{ item.lastInlineTime }}</text>
                </view>
                <view
                    v-if="item.ifInline === 3"
                    class="flex-row align-center max-content"
                    style="font-size: 12px; color: #00AF77"
                >
                  <view class="dot-green" />
                  {{ $t('realTimeData.status.online') }}
                </view>
                <view
                    v-else
                    class="flex-row align-center max-content"
                    style="font-size: 12px; color: #FB0000"
                >
                  <view class="dot-red" />
                  {{ $t('realTimeData.status.offline') }}
                </view>
              </view>
              <uni-row style="margin-left: 10px; margin-top: 4px; font-size: 12px">
                <uni-col :span="12">{{ $t('realTimeData.number') }}<span style="margin-left: 10px">{{ item.deviceCode }}</span></uni-col>
                <uni-col :span="12">{{ $t('realTimeData.type') }}<span style="margin-left: 10px">{{ item.assetClassName }}</span></uni-col>
              </uni-row>
            </uni-col>
          </uni-row>
        </view>
      </template>
    </view>
  </z-paging>
</template>

<script setup>
import {
  ref,
  reactive
} from 'vue'
import { getDeviceRealTimeDataList } from "@/api/realTimeData";

const keywords = ref('')
const placeholderStyle = ref('color:#797979; font-weight:500; font-size:16px')
const inputStyles = reactive({
  backgroundColor: '#FFFFFF',
  color: '#797979',
})
const paging = ref(null)
// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
const dataList = ref([])

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = (pageNo, pageSize) => {
  // 此处请求仅为演示，请替换为自己项目中的请求
  getDeviceRealTimeDataList({
    pageNo,
    pageSize,
    commonParam: keywords.value,
  }).then(res => {
    // console.log('res', res)
    // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
    paging.value.complete(res.data.list);
  }).catch(() => {
    // 如果请求失败写paging.value.complete(false);
    // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
    // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
    paging.value.complete(false);
  })
}
const searchList = () => {
  paging.value.reload()
}

const viewDetail = (row) => {
  const { id, deviceCode, deviceName,	ifInline, lastInlineTime } = row
  const json = JSON.stringify({ id, deviceCode, deviceName,	ifInline, lastInlineTime })
  uni.navigateTo({ url: '/pages/realTimeData/detail/index?info=' + json })
}
</script>

<style lang="scss" scoped>
.page {
  box-sizing: border-box;
  padding: 10px !important;
}

.search-row {
  height: 35px;
  width: 100%;
  background: #F3F5F9;
  z-index: 10;

  .mini-btn {
    height: 35px;
    line-height: 35px;
    width: calc(100% - 10px);
    margin-left: 10px;
  }
}

.item {
  width: 100%;
  background: #FFFFFF;
  border-radius: 6px;
  margin-top: 10px;
  padding: 14px 20px;
  font-size: 14px;
}

.item-module {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  padding: 10px 15px 10px 10px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(270deg, #FFFFFF 0%, #8EBEFF 100%);

  &.tobeFilled {
    background: linear-gradient(270deg, #FFFFFF 0%, #FFF0F0 100%);
  }

  .module-status {
    // min-width: 60px;
    height: 23px;
    padding: 0 6px;
    background: #FFEBEB;
    border-radius: 3px;
    border: 1px solid #FFFFFF;
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
    color: #E7000D;
  }
}

.item-content {
  width: 100%;
  height: calc(100% - 42px - 32px - 15px);
  box-sizing: border-box;
  padding: 15px 20px 15px 10px;

  font-weight: 500;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
}

.item-title {
  width: 100%;
  margin-bottom: 15px;
}

.item-title-width {
  min-width: 70px;
}
.max-content{
	min-width: max-content;
}
.item-online {
  padding: 10px 10px 10px 14px;
  background: linear-gradient( 180deg, #92C0FF 0%, rgba(245,245,245,0) 100%);
  border-radius: 6px;
  margin-bottom: 10px;
}

.item-offline {
  padding: 10px 10px 10px 14px;
  background: linear-gradient( 180deg, #FFE8E8 0%, rgba(245,245,245,0) 100%);
  border-radius: 6px;
  margin-bottom: 10px;
}

.dot-red {
  width: 6px;
  height: 6px;
  background: #FB0000;
  border-radius: 3px;
  margin-right: 5px;
}

.dot-green {
  width: 6px;
  height: 6px;
  background: #00BD80;
  border-radius: 3px;
  margin-right: 5px;
}
</style>