175 lines
4.5 KiB
Vue
175 lines
4.5 KiB
Vue
<template>
|
|
<div class="detail-div">
|
|
<div class="title-div">{{ detailData.name }}</div>
|
|
<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
|
|
<el-tab-pane :label="item" v-for="(item, index) of tabData" :key="index" :name="index + ''">
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<BasicInfo :infoList="detailData" v-if="activeName == '0'"></BasicInfo>
|
|
<RealInfo v-if="activeName == '1'"></RealInfo>
|
|
<HistoryInfo v-if="activeName == '2'"></HistoryInfo>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import bimStore from '@/store/modules/bim';
|
|
import BasicInfo from './BasicInfo.vue';
|
|
import RealInfo from './RealInfo.vue';
|
|
import HistoryInfo from './HistoryInfo.vue';
|
|
import { ElMessage } from 'element-plus';
|
|
const deviceData = {
|
|
'set1': {
|
|
name: '立仓',
|
|
imgUrl: 'licang',
|
|
detail: [
|
|
{
|
|
name: '资产名称',
|
|
value: '立仓'
|
|
},
|
|
{
|
|
name: '资产类型',
|
|
value: '糖化设备'
|
|
},
|
|
{
|
|
name: '资产位置',
|
|
value: '漳州厂区糖化间'
|
|
},
|
|
{
|
|
name: '采购日期',
|
|
value: '2012-11-15'
|
|
},
|
|
{
|
|
name: '使用日期',
|
|
value: '2012-11-15'
|
|
},
|
|
{
|
|
name: '过保截至日期',
|
|
value: '2018-11-15'
|
|
},
|
|
{
|
|
name: '所属厂区',
|
|
value: '漳州厂区'
|
|
},
|
|
{
|
|
name: '资产编码',
|
|
value: 'TH-2304187001'
|
|
},
|
|
{
|
|
name: '资产状态',
|
|
value: '在用'
|
|
},
|
|
{
|
|
name: '累计采购天数',
|
|
value: '234天'
|
|
},
|
|
{
|
|
name: '投入使用天数',
|
|
value: '234天'
|
|
},
|
|
{
|
|
name: '距离过保天数',
|
|
value: '-34天'
|
|
},
|
|
{
|
|
name: '设备二维码',
|
|
value: '2018-11-15'
|
|
},
|
|
]
|
|
},
|
|
'set6': {
|
|
name: '过滤槽',
|
|
imgUrl: 'guolvcao',
|
|
detail: [
|
|
{
|
|
name: '资产名称',
|
|
value: '过滤槽'
|
|
},
|
|
{
|
|
name: '资产类型',
|
|
value: '糖化设备'
|
|
},
|
|
{
|
|
name: '资产位置',
|
|
value: '漳州厂区糖化间'
|
|
},
|
|
{
|
|
name: '采购日期',
|
|
value: '2012-11-15'
|
|
},
|
|
{
|
|
name: '使用日期',
|
|
value: '2012-11-15'
|
|
},
|
|
{
|
|
name: '过保截至日期',
|
|
value: '2018-11-15'
|
|
},
|
|
{
|
|
name: '所属厂区',
|
|
value: '漳州厂区'
|
|
},
|
|
{
|
|
name: '资产编码',
|
|
value: 'TH-2304187001'
|
|
},
|
|
{
|
|
name: '资产状态',
|
|
value: '在用'
|
|
},
|
|
{
|
|
name: '累计采购天数',
|
|
value: '234天'
|
|
},
|
|
{
|
|
name: '投入使用天数',
|
|
value: '234天'
|
|
},
|
|
{
|
|
name: '距离过保天数',
|
|
value: '-34天'
|
|
},
|
|
{
|
|
name: '设备二维码',
|
|
value: '2018-11-15'
|
|
},
|
|
]
|
|
}
|
|
}
|
|
|
|
const activeName = ref('0')
|
|
const tabData = [
|
|
'基本信息', '实时数据', '历史数据', '巡检记录', '保养记录', '维修记录', '事件记录', '健康分析', '效益分析', '资产对比'
|
|
]
|
|
|
|
const data = reactive({
|
|
detailData: {
|
|
name: '',
|
|
imgUlr: '',
|
|
detail: []
|
|
}
|
|
});
|
|
const { detailData } = toRefs(data);
|
|
const deviceNum = computed(() => bimStore().deviceNum);
|
|
detailData.value = deviceData[deviceNum.value];
|
|
const handleClick = (tab, event) => {
|
|
// if(activeName !== '0' && activeName !== '1' && activeName !=='2') {
|
|
// ElMessage.warning('暂未开发');
|
|
// }
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.detail-div {
|
|
height: 700px;
|
|
color: #fff;
|
|
.title-div {
|
|
height: 50px;
|
|
line-height: 50px;
|
|
width: 100%;
|
|
border: 1px solid #2E6099;
|
|
padding: 0 10px;
|
|
margin-bottom:5px;
|
|
}
|
|
}
|
|
</style> |