usky-web-mobile/src/pages/business/fireIot/deviceManage/components/deviceDetailsList.vue

<template>
  <oa-scroll
    customClass="scroll-height"
    :pageSize="pageSize"
    :total="total"
    :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="deviceDetailsList-container">
        <view class="flex bg-white p10" style="position: relative">
          <u--input
            style="width: 100%"
            v-model="deviceName"
            placeholder="请输入设备名称"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399"
            customStyle="height:30px;background-color:#f5f6fa;"
            @confirm="dmpDeviceInfoApi()"
            clearable
          ></u--input>
          <view class="ml10" style="margin-top: auto; margin-bottom: auto; white-space: nowrap" @click="dropdownShow = !dropdownShow">筛选</view>
        </view>

        <oa-dropdown :dropdownShow="dropdownShow" :closeOnClickOverlay="true" @close="dropdownShow = false">
          <template #content>
            <u-radio-group v-model="radioValue" placement="column" iconPlacement="right" @change="radioChange">
              <u-radio v-for="ra in radioList" :key="ra" :activeColor="proxy.$settingStore.themeColor.color" :label="ra.label" :name="ra.value"></u-radio>
            </u-radio-group>
          </template>
        </oa-dropdown>

        <view class="menu-list margin-0">
          <view class="list-cell list-cell-arrow" v-for="(base, index) in dataList" :key="index" @click="handleToDevice(base)">
            <view class="menu-item-box">
              <image class="image-bg" style="width: 80rpx; height: 80rpx; margin: auto 10px auto 0" src="@/static/images/deviceManage/1.png"></image>

              <view style="width: calc(100% - 51px); display: flex; flex-flow: row wrap; padding-right: 10px">
                <view class="deviceHeader">
                  <view class="deviceName text-ellipsis">设备编号：{{ base.deviceId }}</view>
                  <view class="deviceStatus" v-if="base.deviceStatus == 1" style="background-color: #12c100"> 在线 </view>
                  <view class="deviceStatus" v-if="base.deviceStatus == 2" style="background-color: red"> 离线 </view>
                </view>
                <view class="deviceContent">设备名称：{{ base.deviceName }}</view>
                <view class="deviceContent">安装位置：{{ base.installAddress }}</view>
                <!-- <view class="deviceContent">激活状态：{{ base.serviceStatus == 1 ? "未激活" : base.serviceStatus == 2 ? "已激活" : "禁用" }}</view> -->
              </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 { publicStores, useStores } from "@/store/modules/index";

import { dmpDeviceInfo } from "@/api/business/fireIot/deviceManage.js";

const { proxy } = getCurrentInstance();
const publicStore = publicStores();

const dataList = ref([]);
const deviceName = ref("");
const productId = ref("");
const productName = ref("");
const pageSize = ref(20);
const current = ref(1);
const total = ref(0);

const data = reactive({
  radioList: [
    {
      label: "全部",
      value: "",
    },
    {
      label: "在线",
      value: "1",
    },
    {
      label: "离线",
      value: "2",
    },
  ],
  radioValue: "",
  dropdownShow: false,
});

const { radioList, radioValue, dropdownShow } = toRefs(data);

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

/**
 * @列表查询
 * @api接口查询
 */

function dmpDeviceInfoApi() {
  dmpDeviceInfo({ productId: productId.value, deviceName: deviceName.value, current: current.value, size: pageSize.value }).then((requset) => {
    if (requset.status === "SUCCESS") {
      dataList.value = requset.data.records;
      total.value = requset.data.total;

      uni.setNavigationBarTitle({
        title: `${productName.value}（${total.value}）`,
      });
    }
  });
}

/**
 * @设备详情跳转点击事件
 */
function handleToDevice(array) {
  proxy.$tab.navigateTo("/pages/business/fireIot/deviceManage/components/deviceDetails");

  publicStore.$state.deviceDetailsArray = array;
  publicStore.$state.deviceDetailsArray.productName = productName.value;
}

/**
 * @单选change事件
 */
function radioChange(e) {
  radioValue.value = e;
  selectListApi();
}

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

/**
 * @scrollView刷新数据
 */
function refresh() {
  deviceName.value = "";
  pageSize.value = 20;
  total.value = 0;
  init();
}

onReady(() => {});

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

onLoad((options) => {
  if ("productName" in options) {
    productName.value = options.productName;
  }
  if ("id" in options) {
    productId.value = parseInt(options.id);
    init();
  }
});
</script>

<style lang="scss" scoped>
.deviceDetailsList-container {
  .menu-item-box {
  }

  .deviceHeader {
    min-width: 100%;
    font-size: 15px;
    display: flex;
    white-space: nowrap;

    .deviceName {
      width: 75%;
      color: #000;
    }

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

  .deviceContent {
    min-width: 100%;
    margin-top: 10px;
    font-size: 14px;
    color: rgb(102, 102, 102);
  }
}
</style>