detection-business/pages/manage/NewdeviceManage.vue

<template>
  <view class="">


    <headersVue :titles="titles">
      <u-icon name="arrow-left" color="#fff" size="18"></u-icon>
    </headersVue>
    <view class="content">

      <view class="box_">
        <view class="box_list" v-for="(item, index) in tabList">
          <view class="" @click="gettap(item)">
            <image :src=iconArr[index] mode=""></image>
            <view class="name_">{{ item.categoryName }}</view>
            <view class="">{{ item.count }}</view>
          </view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
import headersVue from '../../components/header/headers.vue';
import {getDictDataByType} from "@/utils/utils";
import request from "@/utils/request";

export default {
  data() {
    return {
      titles: "设备管理",
      List: [],
      show: false,
      status: 'loading',
      tabList:[],
      iconArr:["/static/imgs/s1.png","/static/imgs/s2.png","/static/imgs/s3.png","/static/imgs/s4.png"]
    }
  },
  components: {
    headersVue
  },
  onLoad() {
    // this.getTab()
    this.getCount()
  },
  methods: {
    gettap(value) {
      uni.navigateTo({
        url: `/pages/manage/informationManage?value=${value.categoryId}`
      })
    },
    async getTab() {
      const data = await getDictDataByType("ins_equ_type");
      this.tabList = [...this.tabList, ...data];
    },
    getCount() {
      const data = request({
        url: '/system/equInfo/queryEquipmentCountByCategory',
        method: 'get'
      });
      this.tabList = data.then(res => {
        this.tabList = res.data
      })
    },
  },
}
</script>


<style scoped lang="scss">
.content {
  background: #F7F8FC;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 30rpx;
  padding-top: 200rpx;
}

.box_ {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 40rpx;
}

.box_list {
  width: 328rpx;
  height: 396rpx;
  background: #fff;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 30rpx;

  image {
    width: 130rpx;
    height: 130rpx;
  }
}

.name_ {
  font-size: 28rpx;
  color: #000000;
}

.num_ {
  font-size: 36rpx;
  color: #000000;
}
</style>