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

<template>
  <div>
    <!-- :disable="utils.isDisabled(userData.status,['ACTIVE'])" -->
    <detail-template 
      :headData="mainAreaData" 
      :title="`${userData.prodname}(${userData.prodnum})`" 
      :tabs="['详情信息','物模型','告警配置']" 
      ownertable="w_product" 
      :delParam="{id:'20230815135002',content:{w_productid:router.currentRoute.value.query.id}}"
      :disable="!utils.hasPermission('delete') || isDisabled"
      >
      <template #operation>
        <Edit :disabled="utils.isDisabled(userData.isedit,[0]) && !utils.hasPermission('update') || isDisabled" :data="userData" @onSuccess="mianData"></Edit>
        <customBtn
          :btnName="userData.isused ? '禁用' : '启用'"
          idName="20230609160002"
          keyName="w_productid"
          :id="userData.w_productid"
          type="primary"
          size="middle"
          :paramData="[{key:'isused',value:userData.isused ? 0 : 1}]"
          :message="userData.isused ? '确定禁用当前产品吗?' : '确定启用当前产品吗?'"
          @onSuccess="mianData"
          :disabled="!utils.hasPermission('use') || isDisabled"
        />
      </template>
      <template #tab0>
        <p class="normal-title">基本信息</p>
        <defaultInfo :data="defaultInfoData" style="margin-bottom: 16px;"></defaultInfo>
        <p class="normal-title">系统信息</p>
        <defaultInfo :data="systemInfoData" :column="2" :attinfos="userData.attinfos"></defaultInfo>
      </template>
      <template #tab1>
        <SelectModel 
          ref="Class" 
          @selectRowData="selectChange" 
          rowKey="w_firmwareid" 
          :param="firmwareParam" 
          :columns="utils.TBLayout('firmwareTable')" title="选择固件版本"
        >
          <template v-slot:slot1>
            <div style="display: block;margin-bottom: 10px;">
              <span style="margin-right: 10px">固件版本:</span>
              <a-input @click="$refs.Class.modeVisible=true" style="width: 200px;" placeholder="请选择固件版本" readonly v-model:value="firmware.firmwarename"></a-input>
            </div>
            
          </template>
        </SelectModel>
        <a-radio-group v-model:value="currentInfoModel" :style="{ marginBottom: '8px' }" style="margin-bottom:10px">
          <a-radio-button value="attribute">属性定义</a-radio-button>
          <a-radio-button value="server">功能定义</a-radio-button>
          <!-- <a-radio-button value="event">事件定义</a-radio-button> -->
        </a-radio-group>
        <AttributeTab :disabled="!utils.hasPermission('modelTab') || isDisabled" :data="userData" ref="attributeTab" v-if="currentInfoModel == 'attribute'">
        </AttributeTab>

        <serveTable :disabled="!utils.hasPermission('modelTab') || isDisabled" :data="userData" ref="serveTab" v-else-if="currentInfoModel == 'server'">
          <template #add>
          </template>
        </serveTable>

        <eventTab :disabled="!utils.hasPermission('modelTab') || isDisabled" :data="userData" v-else></eventTab>
      </template>
      <template #tab2>
        <warningSet :disabled="!utils.hasPermission('warningSet') || isDisabled"></warningSet>
      </template>
    </detail-template>
  </div>
</template>

<script setup>
import Api from '@/api/api'
import utils  from '@/utils/utils'
import SelectModel from '@/components/selectModel/index.vue'
import detailTemplate from '@/components/detailTemplate/index.vue'
import defaultInfo from '@/template/defaultInfo/index.vue'
import customBtn from '@/components/customHandleBtn/index.vue'
import Edit from './modules/Edit.vue'
import AddServe from './modules/serveTable/modules/Add.vue'
import AttributeTab from './modules/attributeTab/index.vue'
import serveTable from './modules/serveTable/index.vue'
import eventTab from './modules/eventTab/index.vue'
import warningSet from './modules/warningSet/index.vue'
import { message, Modal } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { useRouter } from "vue-router";
import { onMounted,ref,createVNode,computed, provide } from "vue"
const router = useRouter()
const mainAreaData = ref([])

let currentInfoModel = ref('attribute')
const userData = ref({})
let defaultInfoData = ref([])
let systemInfoData = ref([])
let serveTab = ref()

let isDisabled = computed(() => {
  return userData.value.isOffical != 1
})

provide('detailData',() => {return userData.value})
provide('isDisabled',() => {return isDisabled})

const mianData = async ()=>{
  const res = await Api.requested({
    "id":20230612152502,
    "content": {
      "w_productid": router.currentRoute.value.query.id
    }
  })
  res.data.attinfos.forEach(item => {
    item.name = item.document
  })
  userData.value = res.data
  console.log(userData.value);
  changeDataStructure(res.data)
}

const changeDataStructure = (data) => {
  mainAreaData.value = [
    {
      label:'产品编码',
      value:data.prodnum
    },
    {
      label:'产品名称',
      value:data.prodname
    },
    {
      label:'产品分类',
      value:data.prodclassname
    },
    {
      label:'连接类型',
      value:data.prodtype
    },
    {
      label:'厂商',
      value:data.enterprisename
    },
    {
      label:'状态',
      value:data.isused ? '启用':'停用',
      style:() => {
        let style = {}
        style.color = utils.statusAndColor(userData.value.isused ? '启用' : '停用')
        return style
      }
    },
    {
      label:'描述',
      value:data.remarks
    },
  ]
  defaultInfoData.value = [
    {label:'产品编码',value:userData.value.prodnum},
    {label:'产品名称',value:userData.value.prodname},
    {label:'产品分类',value:userData.value.prodclassname},
    {label:'连接类型',value:userData.value.prodtype},
    {label:'厂商',value:userData.value.enterprisename},
    {label:'状态',value:userData.value.isused ? '启用' : '停用',style:() => {
      let style = {}
      style.color = utils.statusAndColor(userData.value.isused ? '启用' : '停用')
      return style
    }},
    {label:'设备数量',value:userData.value.device_count},
    {
      label:'是否指令反馈',
      value:data.isfeedback ? '是' : '否'
    },
    {
      label:'是否支持蓝牙',
      value:data.issupportbluetooth ? '是' : '否'
    },
    {
      label:'设备时间标准',
      value:data.tsfrom ? '设备时间' : '接收时间'
    },
    {label:'描述',value:userData.value.remarks},
  ]
  systemInfoData.value = [
    {label:'创建时间',value:userData.value.createdate},
    {label:'创建人',value:userData.value.createby},
    {label:'最近编辑时间',value:userData.value.changedate},
    {label:'最近编辑人',value:userData.value.changeby},
  ]
}
//获取固件信息
let firmware = ref()
let firmwareParam = ref({
    "content": {
      "pageNumber":1,
      "pageSize":20,
      "w_productid": router.currentRoute.value.query.id
    },
    "id": "2024072313473202",
})
provide('firmware',() => firmware.value)
let getFirmwareid = async () => {
    let res = await Api.requested(firmwareParam.value)
  firmware.value = res.data[0]||{firmwarename:'',w_firmwareid:''}
  console.log(firmware,'固件');

}
let selectChange = (data) => {
  firmware.value = data[data.length - 1]
}

let serveSuccess = () => {
  serveTab.value.param.content.ownerid = router.currentRoute.value.query.id
  serveTab.value.$refs.list.listData()
}
onMounted (()=>{
  mianData()
  getFirmwareid()
})
</script>
<style>
</style>