|
|
@@ -1,16 +1,32 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
-
|
|
|
- <detail-template
|
|
|
- :headData="mainAreaData"
|
|
|
- :title="`${userData.devicename}(${userData.serialnumber})`"
|
|
|
- :tabs="['详情信息','物模型','日志','关联阀门','关联网关','设备固件','物联卡','告警配置','告警记录']"
|
|
|
- ownertable="w_device"
|
|
|
- :delParam="{id:'20230616134502',content:{w_deviceid:router.currentRoute.value.query.id}}"
|
|
|
+ <detail-template
|
|
|
+ :headData="mainAreaData"
|
|
|
+ :title="`${userData.devicename}(${userData.serialnumber})`"
|
|
|
+ :tabs="[
|
|
|
+ '详情信息',
|
|
|
+ '物模型',
|
|
|
+ '日志',
|
|
|
+ '关联阀门',
|
|
|
+ '关联网关',
|
|
|
+ '设备固件',
|
|
|
+ '物联卡',
|
|
|
+ '告警配置',
|
|
|
+ '告警记录',
|
|
|
+ ]"
|
|
|
+ ownertable="w_device"
|
|
|
+ :delParam="{
|
|
|
+ id: '20230616134502',
|
|
|
+ content: { w_deviceid: router.currentRoute.value.query.id },
|
|
|
+ }"
|
|
|
:disable="!utils.hasPermission('delete') || isDisabled"
|
|
|
- >
|
|
|
+ >
|
|
|
<template #operation>
|
|
|
- <Edit :disabled="!utils.hasPermission('update')" :data="userData" @onSuccess="mianData"></Edit>
|
|
|
+ <Edit
|
|
|
+ :disabled="!utils.hasPermission('update')"
|
|
|
+ :data="userData"
|
|
|
+ @onSuccess="mianData"
|
|
|
+ ></Edit>
|
|
|
<customBtn
|
|
|
:btnName="userData.isused ? '禁用' : '启用'"
|
|
|
idName="20230615110102"
|
|
|
@@ -18,8 +34,10 @@
|
|
|
:id="userData.w_deviceid"
|
|
|
type="primary"
|
|
|
size="middle"
|
|
|
- :paramData="[{key:'isused',value:userData.isused ? 0 : 1}]"
|
|
|
- :message="userData.isused ? '确定禁用当前设备吗?' : '确定启用当起设备吗?'"
|
|
|
+ :paramData="[{ key: 'isused', value: userData.isused ? 0 : 1 }]"
|
|
|
+ :message="
|
|
|
+ userData.isused ? '确定禁用当前设备吗?' : '确定启用当起设备吗?'
|
|
|
+ "
|
|
|
@onSuccess="mianData"
|
|
|
:disabled="isDisabled || !utils.hasPermission('use')"
|
|
|
/>
|
|
|
@@ -27,25 +45,61 @@
|
|
|
</template>
|
|
|
<template #tab0>
|
|
|
<p class="normal-title">基本信息</p>
|
|
|
- <defaultInfo :data="defaultInfoData" style="margin-bottom: 16px;"></defaultInfo>
|
|
|
+ <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>
|
|
|
- </template>
|
|
|
- </serveTable>
|
|
|
-
|
|
|
- <eventTab :disabled="isDisabled" :data="userData" v-else></eventTab>
|
|
|
+ <div class="line-wrapper">
|
|
|
+ <div class="line-box">
|
|
|
+ <div
|
|
|
+ :class="['line-item', modelMode == 0 ? 'active' : '']"
|
|
|
+ @click="changeMode(0)"
|
|
|
+ style="border-right: 1px solid #cccccc"
|
|
|
+ >
|
|
|
+ 网络模式
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['line-item', modelMode == 1 ? 'active' : '']"
|
|
|
+ @click="changeMode(1)"
|
|
|
+ v-if="userData.issupportbluetooth"
|
|
|
+ >
|
|
|
+ 蓝牙模式
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="line-content">
|
|
|
+ <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
|
|
|
+ :mode="modelMode"
|
|
|
+ :disabled="isDisabled"
|
|
|
+ :data="userData"
|
|
|
+ ref="attributeTab"
|
|
|
+ v-if="currentInfoModel == 'attribute'"
|
|
|
+ >
|
|
|
+ </AttributeTab>
|
|
|
+ <serveTable
|
|
|
+ :disabled="isDisabled"
|
|
|
+ :data="userData"
|
|
|
+ :mode="modelMode"
|
|
|
+ ref="serveTab"
|
|
|
+ v-else-if="currentInfoModel == 'server'"
|
|
|
+ >
|
|
|
+ <template #add> </template>
|
|
|
+ </serveTable>
|
|
|
+ <eventTab :disabled="isDisabled" :data="userData" v-else></eventTab>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<template #tab2>
|
|
|
<HistoryHandle></HistoryHandle>
|
|
|
@@ -73,136 +127,195 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import Api from '@/api/api'
|
|
|
-import utils from '@/utils/utils'
|
|
|
+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 firmwareMag from './modules/firmwareMag/index.vue'
|
|
|
-import iotcard from './modules/iotcard/index.vue'
|
|
|
+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 firmwareMag from "./modules/firmwareMag/index.vue";
|
|
|
+import iotcard from "./modules/iotcard/index.vue";
|
|
|
|
|
|
-import { message, Modal } from 'ant-design-vue'
|
|
|
-import { ExclamationCircleOutlined } from '@ant-design/icons-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([])
|
|
|
+import { onMounted, ref, createVNode, computed, provide, watch } 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})
|
|
|
+let currentInfoModel = ref("attribute");
|
|
|
+const userData = ref({});
|
|
|
+let defaultInfoData = ref([]);
|
|
|
+let systemInfoData = ref([]);
|
|
|
+provide("detailData", () => {
|
|
|
+ return userData.value;
|
|
|
+});
|
|
|
|
|
|
-const mianData = async ()=>{
|
|
|
+const mianData = async () => {
|
|
|
const res = await Api.requested({
|
|
|
- "id":20230615103902,
|
|
|
- "content": {
|
|
|
- "w_deviceid": router.currentRoute.value.query.id
|
|
|
- }
|
|
|
- })
|
|
|
- userData.value = res.data
|
|
|
+ id: 20230615103902,
|
|
|
+ content: {
|
|
|
+ w_deviceid: router.currentRoute.value.query.id,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ userData.value = res.data;
|
|
|
console.log(userData.value);
|
|
|
- changeDataStructure(res.data)
|
|
|
-}
|
|
|
+ changeDataStructure(res.data);
|
|
|
+};
|
|
|
|
|
|
let isDisabled = computed(() => {
|
|
|
- return userData.value.isOffical == 1
|
|
|
-})
|
|
|
+ return userData.value.isOffical == 1;
|
|
|
+});
|
|
|
|
|
|
-provide('isDisabled',isDisabled)
|
|
|
+provide("isDisabled", isDisabled);
|
|
|
|
|
|
const changeDataStructure = (data) => {
|
|
|
mainAreaData.value = [
|
|
|
{
|
|
|
- label:'设备编码',
|
|
|
- value:data.serialnumber
|
|
|
+ label: "设备编码",
|
|
|
+ value: data.serialnumber,
|
|
|
},
|
|
|
{
|
|
|
- label:'设备名称',
|
|
|
- value:data.devicename
|
|
|
+ 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.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.status,
|
|
|
+ style: () => {
|
|
|
+ let style = {};
|
|
|
+ style.color = utils.statusAndColor(data.status);
|
|
|
+ return style;
|
|
|
+ },
|
|
|
},
|
|
|
{
|
|
|
- label:'描述',
|
|
|
- value:data.remarks
|
|
|
+ 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.isupdate?'支持':'不支持'},
|
|
|
+ { 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.isupdate ? "支持" : "不支持" },
|
|
|
// {label:'设备数量',value:userData.value.device_count},
|
|
|
- {label:'描述',value:userData.value.remarks},
|
|
|
- ]
|
|
|
+ { 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},
|
|
|
- ]
|
|
|
-}
|
|
|
+ { 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.dashboardpath || 'baseDevice'}`,
|
|
|
+ path: `/${userData.value.dashboardpath || "baseDevice"}`,
|
|
|
query: {
|
|
|
- id:userData.value.w_deviceid
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
+ id: userData.value.w_deviceid,
|
|
|
+ },
|
|
|
+ });
|
|
|
+};
|
|
|
+let serveTab = ref(),
|
|
|
+ attributeTab = ref();
|
|
|
|
|
|
-let serveSuccess = () => {
|
|
|
- serveTab.value.param.content.ownerid = router.currentRoute.value.query.id
|
|
|
- serveTab.value.$refs.list.listData()
|
|
|
-}
|
|
|
-onMounted (()=>{
|
|
|
- mianData()
|
|
|
-})
|
|
|
+let modelMode = ref(0);
|
|
|
+
|
|
|
+let changeMode = (mode = 0) => {
|
|
|
+ if (modelMode.value == mode) return;
|
|
|
+ modelMode.value = mode;
|
|
|
+ if (currentInfoModel.value === "server") {
|
|
|
+ serveTab.value.param.content.mode = mode;
|
|
|
+ serveTab.value.getList();
|
|
|
+ } else {
|
|
|
+ attributeTab.value.param.content.mode = mode;
|
|
|
+ attributeTab.value.getList();
|
|
|
+ }
|
|
|
+};
|
|
|
+onMounted(() => {
|
|
|
+ mianData();
|
|
|
+});
|
|
|
</script>
|
|
|
<style>
|
|
|
+.line-wrapper {
|
|
|
+ border: 1px solid #cccccc;
|
|
|
+ border-top: none;
|
|
|
+}
|
|
|
+.line-content {
|
|
|
+ padding: 0 20px 0 20px;
|
|
|
+}
|
|
|
+.line-box {
|
|
|
+ width: 100%;
|
|
|
+ padding: 1px;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border: 1px solid #cccccc;
|
|
|
+ border-left: none;
|
|
|
+ border-right: none;
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+.line-box .line-item {
|
|
|
+ padding: 5px 20px;
|
|
|
+ background: #f5f5f5;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #000000;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.line-box .line-item.active {
|
|
|
+ color: #1677ff;
|
|
|
+ background: #ffffff;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.line-box .line-item.active::before {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ height: 5px;
|
|
|
+ width: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: -2px;
|
|
|
+}
|
|
|
</style>
|
xiaohaizhao