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

<template>
  <div>
    
    <detail-template 
      :headData="mainAreaData" 
      :title="`${userData.devicename}(${userData.serialnumber})`" 
      :tabs="['详情信息','物模型','检查项','日志','关联阀门','关联网关','告警配置','告警记录']" 
      ownertable="user" 
      :delParam="{id:'20230616134502',content:{w_deviceid:router.currentRoute.value.query.id}}" 
<<<<<<< HEAD
      :disable="!utils.hasPermission('delete')"
=======
      :disable="!utils.hasPermission('delete') || isDisabled"
>>>>>>> xiaoqin
      >
      <template #operation>
        <Edit :disabled="isDisabled || !utils.hasPermission('update')" :data="userData" @onSuccess="mianData"></Edit>
        <customBtn
          :btnName="userData.isused ? '禁用' : '启用'"
          idName="20230615110102"
          keyName="w_deviceid"
          :id="userData.w_deviceid"
          type="primary"
          size="middle"
          :paramData="[{key:'isused',value:userData.isused ? 0 : 1}]"
          :message="userData.isused ? '确定禁用当前设备吗?' : '确定启用当起设备吗?'"
          @onSuccess="mianData"
<<<<<<< HEAD
          :disabled="!utils.hasPermission('use')"
=======
          :disabled="isDisabled || !utils.hasPermission('use')"
>>>>>>> xiaoqin
        />
        <a-button @click="goControl" type="primary">设备控制</a-button>
      </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"></defaultInfo>
      </template>
      <template #tab1>
        <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="isDisabled" :data="userData" ref="attributeTab" v-if="currentInfoModel == 'attribute'">
        </AttributeTab>

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

        <eventTab :disabled="isDisabled" :data="userData" v-else></eventTab>
      </template>
      <template #tab3>
        <HistoryHandle></HistoryHandle>
      </template>
      <template #tab4>
        <AndAssets></AndAssets>
      </template>
      <template #tab5>
        <AndGateway></AndGateway>
      </template>
      <template #tab6>
        <warningSet></warningSet>
      </template>
      <template #tab7>
        <warningHistory></warningHistory>
      </template>
    </detail-template>
  </div>
</template>

<script setup>
import Api from '@/api/api'
import utils  from '@/utils/utils'

import normalTable from '@/template/normalTable/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 AddAttrite from './modules/attributeTab/modules/Add.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 HistoryHandle from './modules/historyHandle/index.vue'
import AndAssets from './modules/andAssets/index.vue'
import AndGateway from './modules/andGateway/index.vue'
import warningSet from './modules/warningSet/index.vue'
import warningHistory from './modules/warningHistory/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()
provide('detailData',() => {return userData.value})

const mianData = async ()=>{
  const res = await Api.requested({
    "id":20230615103902,
    "content": {
      "w_deviceid": router.currentRoute.value.query.id
    }
  })
  userData.value = res.data
  console.log(userData.value);
  changeDataStructure(res.data)
}

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

const changeDataStructure = (data) => {
  mainAreaData.value = [
    {
      label:'设备编码',
      value:data.serialnumber
    },
    {
      label:'设备名称',
      value:data.devicename
    },
    // {
    //   label:'区域',
    //   value:data.areaname
    // },
    {
      label:'启用状态',
      value:data.isused ? '启用':'停用',
      style:() => {
        let style = {}
        style.color = utils.statusAndColor(userData.value.isused ? '启用' : '停用')
        return style
      }
    },
    {
      label:'运行状态',
      value:data.status,
      style:() => {
        let style = {}
        style.color = utils.statusAndColor(data.status)
        return style
      }
    },
    {
      label:'描述',
      value:data.remarks
    },
  ]
  defaultInfoData.value = [
    {label:'产品编码',value:userData.value.prodnum},
    {label:'产品名称',value:userData.value.prodname},
    {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.address},
    {label:'消息协议',value:userData.value.protocolname},
    // {label:'设备数量',value:userData.value.device_count},
    {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 goControl = () => {
  router.push({
    path:`/${userData.value.prodnum}`,
    query: {
      id:userData.value.w_deviceid
    }
  })
}

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