shuiwu/src/system/IOT/iotcard/detail/index.vue

<template>
  <div>
    <detailTemplate :headData="mainAreaData" :title="'卡号:' + listData.msisdn" :tabs="['详细信息']" ownertable="w_iotcard"
                    :delParam="{id:'20230619142203',content:{w_iotcardid:router.currentRoute.value.query.id}}">
      <template #tab0>
        <div class="defaultInfo">
          <span >基本信息</span>
        </div>
        <defaultInfo :data="basicData"></defaultInfo>

      </template>
    </detailTemplate>
  </div>
</template>

<script setup>
  import detailTemplate from '@/components/detailTemplate/index.vue'
  import defaultInfo from '@/template/defaultInfo/index.vue'
  import { useRouter } from "vue-router";
  import Api from '@/api/api'
  import tool  from '@/utils/utils'
  import {onMounted, ref} from "vue";
  const router = useRouter()
  const listData = ref({})
  const mianData = async ()=>{
    const res = await Api.requested({
      "id": "20230619142003",
      "content": {
        "w_iotcardid":router.currentRoute.value.query.id
      }
    })
    listData.value = res.data
    changeDataStructure(res.data)
  }
  const mainAreaData = ref([])
  const basicData = ref([])
  const changeDataStructure = (data)=>{
    mainAreaData.value = [
      {
        label:'ICCID',
        value:data.iccid
      },
      {
        label:'绑定设备',
        value:data.devicename
      },
      {
        label:'运营商',
        value:data.telecomoperator == 'CM'?'移动':data.telecomoperator == 'CT'?'电信':data.telecomoperator == 'CU'?'联通':''
      },
      {
        label:'总流量',
        value:data.totalAmount
      },
      {
        label:'使用流量',
        value:data.useAmount
      },
      {
        label:'剩余流量',
        value:data.remainAmount
      },
      {
        label:'激活日期',
        value:data.activationdate
      },
      {
        label:'余额',
        value:data.amount
      },
      {
        label:'状态',
        value:data.status
      },
      {
        label:'站点',
        value:data.sitename
      },
    ]
    basicData.value = [
      {
        label:'ICCID',
        value:data.iccid
      },
      {
        label:'绑定设备',
        value:data.devicename
      },
      {
        label:'运营商',
        value:data.telecomoperator == 'CM'?'移动':data.telecomoperator == 'CT'?'电信':data.telecomoperator == 'CU'?'联通':''
      },
      {
        label:'状态',
        value:data.status
      },
      {
        label:'激活日期',
        value:data.activationdate
      },
      {
        label:'站点',
        value:data.sitename
      }
    ]
  }
  onMounted (()=>{
    mianData()
  })
</script>

<style scoped>

</style>