usky-web-mobile/src/pages/business/common/videoMonitor/videoList.vue

<template>
  <oa-scroll
    customClass="repairManage-container scroll-height"
    :pageSize="state.pageSize"
    :total="state.total"
    :isSticky="false"
    :refresherLoad="true"
    :refresherEnabled="true"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    @load="load"
    @refresh="refresh"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <view class="menu-list m0">
        <view class="list-cell list-cell-arrow" style="line-height: 25px" v-for="(base, index) in state.dataList" :key="index" @click="handleToDetails(base)">
          <view class="menu-item">
            <image v-if="base.deviceStatus == 1" class="image-bg" style="width: 80rpx; height: 80rpx; margin: auto 10px auto 0" src="@/static/images/videoMonitor/video-icon-on.png"></image>
            <image v-if="base.deviceStatus == 2" class="image-bg" style="width: 80rpx; height: 80rpx; margin: auto 10px auto 0" src="@/static/images/videoMonitor/video-icon-off.png"></image>
            <view style="width: calc(100% - 51px); display: flex; justify-content: space-between; padding-right: 10px">
              <view class="deviceHeader">
                <view class="deviceName text-ellipsis">{{ base.deviceName }}</view>
              </view>
              <view class="" v-if="base.deviceStatus == 1" style="color: #16bf00; margin-right: 10px"> 在线 </view>
              <view class="" v-if="base.deviceStatus == 2" style="color: #333; margin-right: 10px"> 离线 </view>
            </view>
          </view>
        </view>
      </view>
    </template>
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { pageQuery } from "@/api/business/videoMonitor.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const commonStore = commonStores();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  dataList: [],
  pageSize: 20,
  current: 1,
  total: 0,
});

/**
 * @页面初始化
 */
function init() {
  selectListApi();
}

/**
 * @列表查询
 * @api接口查询
 */
function selectListApi() {
  pageQuery({
    current: state.current,
    size: state.pageSize,
  }).then((requset) => {
    if (requset.status === "SUCCESS") {
      state.dataList = requset.data.records;
      state.total = requset.data.total;
    }
  });
}

/**
 * @跳转详情事件
 */
function handleToDetails(e) {
  proxy.$tab.navigateTo(`/pages/business/common/videoMonitor/videoDetail?deviceName=${e.deviceName}`);
  if (e.deviceStatus == 1) {
  }
}

/**
 * @scrollView加载数据
 */
function load() {
  state.pageSize += 10;
  init();
}

/**
 * @scrollView刷新数据
 */
function refresh() {
  state.pageSize = 20;
  init();
}

onReady(() => {});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});

onLoad((options) => {
  init();
});
</script>

<style lang="scss" scoped>
.repairManage-container {
  .content-area {
    &-top {
      padding-right: 10px;
      font-size: 16px;
      font-weight: 600;
      color: #000000;

      &-time {
        max-width: 70%;
        margin: auto 0;
        font-size: 14px;
        color: rgb(102, 102, 102);
      }

      &-name {
        max-width: 70%;
        color: #000;
      }

      &-status {
        max-width: 30%;
        margin: auto 0 auto auto;
        font-size: 12px;
        color: #ffffff;
        padding: 0 5px;
        border-radius: 20px;
        line-height: 20px;
      }
    }

    &-row_wrap {
      padding-right: 10px;
      font-size: 13px;
      flex-flow: row wrap;

      &-view {
        display: flex;
        min-width: 50%;
        > .iconfont {
          font-size: 14px;
          color: #909399;
          margin-left: 5px;
        }
      }
    }
  }
}
</style>