main
parent
23e081053f
commit
a8ba8139a6
Binary file not shown.
|
After Width: | Height: | Size: 308 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
|
|
@ -5,7 +5,8 @@ const bimStore = defineStore(
|
|||
activateIndex: 0,
|
||||
activateTree: {},
|
||||
activateDevice: {},
|
||||
activateApplication: {}
|
||||
activateApplication: {},
|
||||
deviceNum: ''
|
||||
}),
|
||||
actions: {
|
||||
// 菜单
|
||||
|
|
@ -23,6 +24,10 @@ const bimStore = defineStore(
|
|||
// 应用树选中
|
||||
setActivateApplicationTree(item) {
|
||||
this.activateApplication = item;
|
||||
},
|
||||
// 资产详情num
|
||||
setDeviceNum(item) {
|
||||
this.deviceNum = item;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ const getPie3D = (pieData, internalDiameterRatio, rateName) => {
|
|||
// const newColor = _.cloneDeep(color)
|
||||
// newColor.splice(0, 1)
|
||||
|
||||
const newColor = [color[0], color[1], color[5]]
|
||||
const newColor = [color[0], color[1], color[5],color[6]]
|
||||
|
||||
series.push({
|
||||
type: 'pie',
|
||||
|
|
@ -87,8 +87,8 @@ const getPie3D = (pieData, internalDiameterRatio, rateName) => {
|
|||
const option = {
|
||||
color: newColor,
|
||||
legend: {
|
||||
show: false,
|
||||
color: '#FFFFFF',
|
||||
show: true,
|
||||
textStyle: { color: '#ffffff' },
|
||||
left: 'center',
|
||||
top: 'bottom',
|
||||
itemGap: 20,
|
||||
|
|
@ -121,7 +121,7 @@ const getPie3D = (pieData, internalDiameterRatio, rateName) => {
|
|||
show: true,
|
||||
formatter: params => {
|
||||
if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
|
||||
console.log(option.series[params.seriesIndex].pieData)
|
||||
// console.log(option.series[params.seriesIndex].pieData)
|
||||
// let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
|
||||
// 100).toFixed(2)
|
||||
// if (bfb === 'NaN') {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div class="baseInfo-div">
|
||||
<div class="left-div">
|
||||
<div v-for="(item, index) of listData" :key="index">
|
||||
<span class="name">{{ item.name }}：</span>
|
||||
|
||||
<span class="value" v-if="item.name == '设备二维码'">
|
||||
<img src="@/assets/images/qcode.png" alt="">
|
||||
</span>
|
||||
<span class="value" v-else>{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-div">
|
||||
<img src="@/assets/images/device.png" alt="" width="400">
|
||||
<span>设备图片</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
const props = defineProps({
|
||||
infoList: {
|
||||
default: {},
|
||||
type: Object
|
||||
}
|
||||
})
|
||||
|
||||
const listData = props.infoList.detail;
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.baseInfo-div {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left-div {
|
||||
width: 69%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
>div {
|
||||
width: 48%;
|
||||
line-height: 24px;
|
||||
height: 48px;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.name {
|
||||
width: 40%;
|
||||
text-align: right;
|
||||
}
|
||||
.value {
|
||||
width: 59%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right-div {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -25,16 +25,7 @@
|
|||
import bimStore from '@/store/modules/bim';
|
||||
import TopDiv from "./TopDiv.vue";
|
||||
|
||||
const data = reactive({
|
||||
buildInfo: {
|
||||
name: '原料糖化车间一',
|
||||
area: '5236 ㎡',
|
||||
status:'启用',
|
||||
desc: '原料糖化车间一，负责原料糖化，启用于2011年'
|
||||
}
|
||||
});
|
||||
|
||||
const { buildInfo } = toRefs(data);
|
||||
const buildInfo = computed(() => bimStore().activateTree.info);
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.buildDiv {
|
||||
|
|
|
|||
|
|
@ -1,18 +1,26 @@
|
|||
<template>
|
||||
<div class="treeDiv">
|
||||
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
|
||||
<el-select v-model="buildValue" class="m-2" placeholder="Select" size="large">
|
||||
<el-option v-for="item in buildOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<el-tree ref="myTree" :data="treeData" :props="defaultProps" node-key="id" highlight-current default-expand-all
|
||||
:current-node-key="checkedkeys" @node-click="handleNodeClick" />
|
||||
</dv-border-box-10>
|
||||
<el-select v-model="buildValue" class="m-2" placeholder="Select" size="large">
|
||||
<el-option v-for="item in buildOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<el-tree ref="myTree" :data="treeData" :props="defaultProps" node-key="id" check-strictly="true"
|
||||
highlight-current default-expand-all :current-node-key="checkedkeys" @node-click="handleNodeClick" />
|
||||
</dv-border-box-10>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import bimStore from '@/store/modules/bim';
|
||||
import { nextTick } from "vue";
|
||||
const myTree = ref("myTree");
|
||||
|
||||
const props = defineProps({
|
||||
isSetTree: { //
|
||||
default: false,
|
||||
type: Boolean
|
||||
},
|
||||
|
||||
})
|
||||
const buildOptions = [
|
||||
{
|
||||
value: '0',
|
||||
|
|
@ -29,19 +37,106 @@ const data = reactive({
|
|||
buildValue: '0',
|
||||
treeData: [
|
||||
{
|
||||
label: '酿造车间',
|
||||
label: '原料糖化车间',
|
||||
id: '0',
|
||||
url: '/jz/glb/jz.gltf',
|
||||
info: {
|
||||
name: '原料糖化车间',
|
||||
area: '9436 ㎡',
|
||||
status: '启用',
|
||||
desc: '原料糖化车间，负责原料糖化，启用于2011年'
|
||||
},
|
||||
deviceInfo: [
|
||||
{
|
||||
type: '生产设备',
|
||||
name: '立仓',
|
||||
value: 45
|
||||
},
|
||||
{
|
||||
type: '空调设备',
|
||||
name: '新风机组',
|
||||
value: 130
|
||||
},
|
||||
{
|
||||
type: '安防设备',
|
||||
name: '摄像头',
|
||||
value: 180
|
||||
},
|
||||
{
|
||||
type: '消防设备',
|
||||
name: '烟感',
|
||||
value: 100
|
||||
}
|
||||
],
|
||||
children: [
|
||||
{
|
||||
label: '原料糖化车间一',
|
||||
id: '0-1',
|
||||
url: '/jz/glb/jz.gltf'
|
||||
|
||||
url: '/jz/glb/jz.gltf',
|
||||
children: [],
|
||||
info: {
|
||||
name: '原料糖化车间一',
|
||||
area: '5200 ㎡',
|
||||
status: '启用',
|
||||
desc: '原料糖化车间一，负责原料糖化，启用于2011年'
|
||||
},
|
||||
deviceInfo: [
|
||||
{
|
||||
type: '生产设备',
|
||||
name: '立仓',
|
||||
value: 15
|
||||
},
|
||||
{
|
||||
type: '空调设备',
|
||||
name: '新风机组',
|
||||
value: 50
|
||||
},
|
||||
{
|
||||
type: '安防设备',
|
||||
name: '摄像头',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
type: '消防设备',
|
||||
name: '烟感',
|
||||
value: 50
|
||||
}
|
||||
],
|
||||
|
||||
},
|
||||
{
|
||||
label: '原料糖化车间二',
|
||||
id: '0-2',
|
||||
url: '/seraphine/scene.gltf'
|
||||
url: '/jz/glb/jz.gltf',
|
||||
children: [],
|
||||
info: {
|
||||
name: '原料糖化车间二',
|
||||
area: '4236 ㎡',
|
||||
status: '启用',
|
||||
desc: '原料糖化车间二，负责原料糖化，启用于2013年'
|
||||
},
|
||||
deviceInfo: [
|
||||
{
|
||||
type: '生产设备',
|
||||
name: '立仓',
|
||||
value: 30
|
||||
},
|
||||
{
|
||||
type: '空调设备',
|
||||
name: '新风机组',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
type: '安防设备',
|
||||
name: '摄像头',
|
||||
value: 100
|
||||
},
|
||||
{
|
||||
type: '消防设备',
|
||||
name: '烟感',
|
||||
value: 50
|
||||
}
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
@ -52,15 +147,16 @@ const { buildValue, treeData, checkedkeys } = toRefs(data);
|
|||
const emit = defineEmits(['handleNodeClick'])
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
checkedkeys.value = treeData.value[0].children[0].id;
|
||||
// myTree.setCurrentKey(checkedkeys.value);
|
||||
bimStore().setActivateTree(treeData.value[0].children[0]);
|
||||
handleNodeClick(treeData.value[0].children[0]);
|
||||
checkedkeys.value = treeData.value[0].id;
|
||||
handleNodeClick(treeData.value[0]);
|
||||
})
|
||||
});
|
||||
const handleNodeClick = (value) => {
|
||||
bimStore().setActivateTree(value);
|
||||
emit('handleNodeClick', value)
|
||||
if(props.isSetTree) {// 是否存值
|
||||
bimStore().setActivateTree(value);
|
||||
}
|
||||
const isParent = value.children.length > 0;
|
||||
emit('handleNodeClick', value, isParent)
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -77,16 +173,18 @@ const handleNodeClick = (value) => {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.el-tree {
|
||||
width: 224px;
|
||||
margin: 0 10px;
|
||||
background: transparent;
|
||||
color: #3cbfdf;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background: transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,169 @@
|
|||
<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"></BasicInfo>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import bimStore from '@/store/modules/bim';
|
||||
import BasicInfo from './BasicInfo.vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
const deviceData = {
|
||||
'EQ0001': {
|
||||
name: '过滤槽',
|
||||
imgUlr: '',
|
||||
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'
|
||||
},
|
||||
]
|
||||
},
|
||||
'EQ0002': {
|
||||
name: '新风机组',
|
||||
imgUlr: '',
|
||||
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') {
|
||||
ElMessage.warning('暂未开发');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.detail-div {
|
||||
height: 700px;
|
||||
.title-div {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
width: 100%;
|
||||
border: 1px solid #ddd;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -51,7 +51,7 @@ const data = reactive({
|
|||
content: '设备保养周期剩余3天',
|
||||
time: '上午',
|
||||
timestamp: '11:46',
|
||||
color: '#0bbd87',
|
||||
color: '#31bdb4',
|
||||
icon: MoreFilled,
|
||||
type: 'primary',
|
||||
size: 'large'
|
||||
|
|
|
|||
|
|
@ -4,15 +4,15 @@
|
|||
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
|
||||
<div>
|
||||
<span class="name">名称</span>
|
||||
<span class="text">{{ deviceInfo.name }}</span>
|
||||
<span class="text">{{ deviceInfo && deviceInfo.name }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="name">类型</span>
|
||||
<span class="text">{{ deviceInfo.type }}</span>
|
||||
<span class="text">{{ deviceInfo && deviceInfo.type }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="name">状态</span>
|
||||
<span class="text">{{ deviceInfo.status }}</span>
|
||||
<span class="text">{{ deviceInfo && deviceInfo.status }}</span>
|
||||
</div>
|
||||
</dv-border-box-10>
|
||||
</div>
|
||||
|
|
@ -21,14 +21,11 @@
|
|||
import TopDiv from "./TopDiv.vue";
|
||||
import bimStore from '@/store/modules/bim';
|
||||
const data = reactive({
|
||||
deviceInfo: {
|
||||
name: '立仓',
|
||||
type: '生产设备',
|
||||
status:'启用',
|
||||
}
|
||||
deviceInfo: {}
|
||||
});
|
||||
|
||||
const { deviceInfo } = toRefs(data);
|
||||
watch(() => bimStore().activateDevice.info, value => deviceInfo.value = value);
|
||||
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
|
|
@ -42,20 +39,23 @@ const { deviceInfo } = toRefs(data);
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #3cbfdf;
|
||||
|
||||
:deep(.border-box-content) {
|
||||
padding: 10px;
|
||||
|
||||
>div {
|
||||
line-height: 48px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 75%;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
|
|
@ -1,8 +1,11 @@
|
|||
<template>
|
||||
<div class="deviceInfoDialog">
|
||||
<div class="left-div">
|
||||
<el-tree :data="treedata" show-checkbox node-key="id" :default-expanded-keys="[1]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<el-select v-model="buildValue" class="m-2" placeholder="Select" size="large">
|
||||
<el-option v-for="item in buildOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<el-tree ref="myTree" :data="treeData" :props="defaultProps" node-key="id" check-strictly="true"
|
||||
highlight-current default-expand-all :current-node-key="checkedkeys" @node-click="handleNodeClick" />
|
||||
</div>
|
||||
<div class="right-div">
|
||||
<div class="top-div">
|
||||
|
|
@ -27,7 +30,151 @@
|
|||
</template>
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
import bimStore from '@/store/modules/bim';
|
||||
const buildOptions = [
|
||||
{
|
||||
value: '0',
|
||||
label: '漳州工厂',
|
||||
}
|
||||
]
|
||||
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'label',
|
||||
}
|
||||
const data = reactive({
|
||||
buildValue: '0',
|
||||
treeData: [
|
||||
{
|
||||
label: '原料糖化车间',
|
||||
id: '0',
|
||||
url: '/jz/glb/jz.gltf',
|
||||
info: {
|
||||
name: '原料糖化车间',
|
||||
area: '9436 ㎡',
|
||||
status: '启用',
|
||||
desc: '原料糖化车间，负责原料糖化，启用于2011年'
|
||||
},
|
||||
deviceInfo: [
|
||||
{
|
||||
type: '生产设备',
|
||||
name: '立仓',
|
||||
num: 'EQ0001',
|
||||
value: 45,
|
||||
id: "echartDiv0"
|
||||
},
|
||||
{
|
||||
type: '空调设备',
|
||||
name: '新风机组',
|
||||
num: 'EQ0002',
|
||||
value: 130,
|
||||
id: "echartDiv1"
|
||||
},
|
||||
{
|
||||
type: '安防设备',
|
||||
name: '摄像头',
|
||||
num: 'EQ0001',
|
||||
value: 180,
|
||||
id: "echartDiv2"
|
||||
},
|
||||
{
|
||||
type: '消防设备',
|
||||
name: '烟感',
|
||||
num: 'EQ0001',
|
||||
value: 100,
|
||||
id: "echartDiv3"
|
||||
}
|
||||
],
|
||||
children: [
|
||||
{
|
||||
label: '原料糖化车间一',
|
||||
id: '0-1',
|
||||
url: '/jz/glb/jz.gltf',
|
||||
children: [],
|
||||
info: {
|
||||
name: '原料糖化车间一',
|
||||
area: '5200 ㎡',
|
||||
status: '启用',
|
||||
desc: '原料糖化车间一，负责原料糖化，启用于2011年'
|
||||
},
|
||||
deviceInfo: [
|
||||
{
|
||||
type: '生产设备',
|
||||
name: '立仓',
|
||||
num: 'EQ0001',
|
||||
value: 15,
|
||||
id: "echartDiv0"
|
||||
},
|
||||
{
|
||||
type: '空调设备',
|
||||
name: '新风机组',
|
||||
num: 'EQ0002',
|
||||
value: 50,
|
||||
id: "echartDiv1"
|
||||
},
|
||||
{
|
||||
type: '安防设备',
|
||||
name: '摄像头',
|
||||
num: 'EQ0001',
|
||||
value: 80,
|
||||
id: "echartDiv2"
|
||||
},
|
||||
{
|
||||
type: '消防设备',
|
||||
name: '烟感',
|
||||
num: 'EQ0001',
|
||||
value: 50,
|
||||
id: "echartDiv3"
|
||||
}
|
||||
],
|
||||
|
||||
},
|
||||
{
|
||||
label: '原料糖化车间二',
|
||||
id: '0-2',
|
||||
url: '/jz/glb/jz.gltf',
|
||||
children: [],
|
||||
info: {
|
||||
name: '原料糖化车间二',
|
||||
area: '4236 ㎡',
|
||||
status: '启用',
|
||||
desc: '原料糖化车间二，负责原料糖化，启用于2013年'
|
||||
},
|
||||
deviceInfo: [
|
||||
{
|
||||
type: '生产设备',
|
||||
name: '立仓',
|
||||
num: 'EQ0001',
|
||||
value: 30,
|
||||
id: "echartDiv0"
|
||||
},
|
||||
{
|
||||
type: '空调设备',
|
||||
name: '新风机组',
|
||||
num: 'EQ0002',
|
||||
value: 80,
|
||||
id: "echartDiv1"
|
||||
},
|
||||
{
|
||||
type: '安防设备',
|
||||
name: '摄像头',
|
||||
num: 'EQ00011',
|
||||
value: 100,
|
||||
id: "echartDiv2"
|
||||
},
|
||||
{
|
||||
type: '消防设备',
|
||||
name: '烟感',
|
||||
num: 'EQ0002',
|
||||
value: 50,
|
||||
id: "echartDiv3"
|
||||
}
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
],
|
||||
checkedkeys: "",
|
||||
deviceList: [
|
||||
{
|
||||
name: '设备A',
|
||||
|
|
@ -47,97 +194,28 @@ const data = reactive({
|
|||
{
|
||||
name: '设备D',
|
||||
num: 36,
|
||||
|
||||
id: "echartDiv3"
|
||||
}
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
name: '立仓',
|
||||
num: 'EQ001',
|
||||
type: '生产设备'
|
||||
},
|
||||
{
|
||||
name: '粉碎机',
|
||||
num: 'EQ001',
|
||||
type: '生产设备'
|
||||
},
|
||||
{
|
||||
name: '摄像头',
|
||||
num: 'EQ001',
|
||||
type: '生产设备'
|
||||
},
|
||||
{
|
||||
name: '空调机组',
|
||||
num: 'EQ001',
|
||||
type: '生产设备'
|
||||
},
|
||||
{
|
||||
name: '立仓',
|
||||
num: 'EQ001',
|
||||
type: '生产设备'
|
||||
},
|
||||
{
|
||||
name: '立仓',
|
||||
num: 'EQ001',
|
||||
type: '生产设备'
|
||||
},
|
||||
{
|
||||
name: '粉碎机',
|
||||
num: 'EQ001',
|
||||
type: '生产设备'
|
||||
},
|
||||
{
|
||||
name: '摄像头',
|
||||
num: 'EQ001',
|
||||
type: '生产设备'
|
||||
},
|
||||
{
|
||||
name: '空调机组',
|
||||
num: 'EQ001',
|
||||
type: '生产设备'
|
||||
},
|
||||
{
|
||||
name: '立仓',
|
||||
num: 'EQ001',
|
||||
type: '生产设备'
|
||||
}
|
||||
],
|
||||
treedata: [{
|
||||
id: 1,
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
id: 4,
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
id: 9,
|
||||
label: '三级 1-1-1'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: 2,
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
id: 5,
|
||||
label: '二级 2-1'
|
||||
}, {
|
||||
id: 6,
|
||||
label: '二级 2-2'
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
tableData: []
|
||||
});
|
||||
const { deviceList, tableData, treedata, defaultProps } = toRefs(data);
|
||||
const { buildValue, treeData, checkedkeys, deviceList, tableData } = toRefs(data);
|
||||
const emit = defineEmits(['viewDetail'])
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
deviceList.value.forEach(ele => {
|
||||
getCharts(ele);
|
||||
})
|
||||
checkedkeys.value = treeData.value[0].id;
|
||||
handleNodeClick(treeData.value[0]);
|
||||
})
|
||||
})
|
||||
|
||||
const handleNodeClick = (value) => {
|
||||
value.deviceInfo.forEach(ele => {
|
||||
getCharts(ele);
|
||||
})
|
||||
tableData.value = value.deviceInfo;
|
||||
}
|
||||
|
||||
const getCharts = (ele) => {
|
||||
var dom = document.getElementById(ele.id);
|
||||
if (dom) {
|
||||
|
|
@ -325,7 +403,7 @@ const getCharts = (ele) => {
|
|||
},
|
||||
|
||||
data: [{
|
||||
value: 50,
|
||||
value: ele.value,
|
||||
name: ele.name
|
||||
},]
|
||||
}]
|
||||
|
|
@ -336,6 +414,8 @@ const getCharts = (ele) => {
|
|||
}
|
||||
|
||||
const viewDetail = (val) => {
|
||||
bimStore().setDeviceNum(val.num);
|
||||
emit('viewDetail', val);
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -348,6 +428,13 @@ const viewDetail = (val) => {
|
|||
width: 20%;
|
||||
height: 100%;
|
||||
border: 1px solid #3cbfdf;
|
||||
|
||||
.el-tree {
|
||||
margin: 0 10px;
|
||||
}
|
||||
.el-select {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-div {
|
||||
|
|
|
|||
|
|
@ -21,32 +21,35 @@ import "echarts-gl"
|
|||
import TopDiv from "./TopDiv.vue";
|
||||
import bimStore from '@/store/modules/bim';
|
||||
const emit = defineEmits(['openDialog'])
|
||||
const data = reactive({
|
||||
optionsData: [
|
||||
{ value: 34, name: "A类设备" },
|
||||
{ value: 200, name: "B类设备" },
|
||||
{ value: 16, name: "C类设备" },
|
||||
{ value: 50, name: "D类设备" }]
|
||||
});
|
||||
|
||||
const { optionsData } = toRefs(data);
|
||||
|
||||
const optionData = optionsData.value.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
rate: ((item.value / 300).toFixed(1)) *100,
|
||||
};
|
||||
});
|
||||
const deviceInfo = computed(() =>
|
||||
bimStore().activateTree.deviceInfo
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
getCharts();
|
||||
})
|
||||
initData();
|
||||
})
|
||||
|
||||
const getCharts = () => {
|
||||
|
||||
watch(deviceInfo, (value) => {
|
||||
console.log(34, value);
|
||||
if (value) {
|
||||
initData();
|
||||
}
|
||||
},)
|
||||
|
||||
const initData = () => {
|
||||
const optionData = deviceInfo.value.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
rate: ((item.value / 300).toFixed(1)) * 100,
|
||||
};
|
||||
});
|
||||
nextTick(() => {
|
||||
getCharts(optionData);
|
||||
})
|
||||
}
|
||||
const getCharts = (optionData) => {
|
||||
var dom = document.getElementById('charts');
|
||||
if (dom) {
|
||||
// 手动移除该属性
|
||||
|
|
|
|||
|
|
@ -32,17 +32,32 @@ const data = reactive({
|
|||
{
|
||||
label: '生产设备',
|
||||
id: '0',
|
||||
info: {
|
||||
name: '生产设备',
|
||||
type: '生产设备',
|
||||
status: '启用'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
label: '立仓',
|
||||
id: '0-1',
|
||||
url: '/jz/glb/jz.gltf'
|
||||
url: '/jz/glb/jz.gltf',
|
||||
info: {
|
||||
name: '立仓',
|
||||
type: '生产设备',
|
||||
status: '启用'
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
label: '糖浆罐',
|
||||
id: '0-2',
|
||||
url: '/seraphine/scene.gltf'
|
||||
url: '/seraphine/scene.gltf',
|
||||
info: {
|
||||
name: '糖浆罐',
|
||||
type: '生产设备',
|
||||
status: '启用'
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
@ -54,8 +69,6 @@ const emit = defineEmits(['handleNodeClick'])
|
|||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
checkedkeys.value = treeData.value[0].children[0].id;
|
||||
// myTree.setCurrentKey(checkedkeys.value);
|
||||
bimStore().setActivateDeviceTree(treeData.value[0].children[0]);
|
||||
handleNodeClick(treeData.value[0].children[0]);
|
||||
})
|
||||
});
|
||||
|
|
@ -84,6 +97,7 @@ const handleNodeClick = (value) => {
|
|||
background: transparent;
|
||||
color: #3cbfdf;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
margin: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,18 @@
|
|||
<template>
|
||||
<div class="realInfoDialog">
|
||||
<div class="top-div">
|
||||
<div>
|
||||
<span class="name">名称:</span>
|
||||
<span class="text">{{ deviceInfo && deviceInfo.name }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="name">类型:</span>
|
||||
<span class="text">{{ deviceInfo && deviceInfo.type }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="name">状态:</span>
|
||||
<span class="text">{{ deviceInfo && deviceInfo.status }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="bottom-div">
|
||||
|
|
@ -14,10 +26,15 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import bimStore from '@/store/modules/bim';
|
||||
const data = reactive({
|
||||
|
||||
});
|
||||
|
||||
const deviceInfo = computed(() =>
|
||||
bimStore().activateDevice.info
|
||||
);
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.realInfoDialog {
|
||||
|
|
@ -30,6 +47,23 @@ const data = reactive({
|
|||
width: 100%;
|
||||
height: 25%;
|
||||
border: 1px solid #3cbfdf;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
> div {
|
||||
display: flex;
|
||||
line-height: 48px;
|
||||
width: 240px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.name {
|
||||
width: 45%;
|
||||
text-align: right;
|
||||
}
|
||||
.text {
|
||||
width: 45%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-div {
|
||||
|
|
@ -43,6 +77,7 @@ const data = reactive({
|
|||
height: 100%;
|
||||
border: 1px solid #3cbfdf;
|
||||
}
|
||||
|
||||
.right-div {
|
||||
width: 79%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 场景模型 -->
|
||||
<ThreeView background="#353535" light="0xffffff" :sceneUrl="sceneUrl"></ThreeView>
|
||||
<ThreeView background="#353535" light="0xffffff" :sceneUrl="sceneUrl" v-if="sceneUrl !== ''"></ThreeView>
|
||||
<!-- 底部菜单 -->
|
||||
<MenuTab @changeMenu="changeMenu"></MenuTab>
|
||||
<!-- 左侧建筑菜单 -->
|
||||
<BuildTree v-if="activateIndex == 0" @handleNodeClick="handleBuildClick"></BuildTree>
|
||||
<BuildTree v-if="activateIndex == 0" isSetTree="true" @handleNodeClick="handleBuildClick"></BuildTree>
|
||||
<!-- 建筑信息 -->
|
||||
<BuildInfo v-if="activateIndex == 0"></BuildInfo>
|
||||
<BuildInfo v-if="buildInfo && activateIndex == 0"></BuildInfo>
|
||||
<!-- 资产信息 -->
|
||||
<DevicePie v-if="activateIndex == 0" @openDialog="openDialog"></DevicePie>
|
||||
<DevicePie v-if="deviceInfo && activateIndex == 0" @openDialog="openDialog"></DevicePie>
|
||||
<!-- 左侧资产菜单 -->
|
||||
<DeviceTree v-if="activateIndex == 1" @handleNodeClick="handleDeviceClick"></DeviceTree>
|
||||
<!-- 资产信息 -->
|
||||
<DeviceInfo v-if="activateIndex == 1"></DeviceInfo>
|
||||
<DeviceInfo v-if="equimentInfo && activateIndex == 1"></DeviceInfo>
|
||||
<!-- 资产事件 -->
|
||||
<DeviceEvent v-if="activateIndex == 1" @openDialog="openDialog1"></DeviceEvent>
|
||||
<!-- 左侧应用菜单 -->
|
||||
|
|
@ -23,22 +23,16 @@
|
|||
<!-- 实时数据 -->
|
||||
<RealData v-if="activateIndex == 2" @openDialog="openDialog1"></RealData>
|
||||
<!-- 资产信息弹出框 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
title="资产信息"
|
||||
width="1200px"
|
||||
append-to-body
|
||||
>
|
||||
<DeviceInfoDialog></DeviceInfoDialog>
|
||||
<el-dialog v-model="dialogVisible" title="资产信息" width="1200px" append-to-body>
|
||||
<DeviceInfoDialog @viewDetail="viewDetail"></DeviceInfoDialog>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
v-model="dialogVisible1"
|
||||
title="实时数据"
|
||||
width="1200px"
|
||||
append-to-body
|
||||
>
|
||||
<el-dialog v-model="dialogVisible1" title="实时数据" width="1200px" append-to-body>
|
||||
<RealInfoDialog></RealInfoDialog>
|
||||
</el-dialog>
|
||||
<!-- 资产详情 -->
|
||||
<el-dialog v-model="dialogVisible2" v-if="dialogVisible2" title="资产详情" width="1500px" append-to-body>
|
||||
<DeviceDetial></DeviceDetial>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -56,19 +50,33 @@ import RealData from './components/RealData.vue';
|
|||
import ThreeView from './components/ThreeView.vue';
|
||||
import DeviceInfoDialog from './components/DeviceInfoDialog.vue';
|
||||
import RealInfoDialog from './components/RealInfoDialog.vue';
|
||||
import DeviceDetial from './components/DeviceDetial.vue';
|
||||
import bimStore from '@/store/modules/bim';
|
||||
import { computed } from 'vue';
|
||||
const data = reactive({
|
||||
sceneUrl: '/jz/glb/jz.gltf'
|
||||
sceneUrl: '',
|
||||
equimentInfo: {},
|
||||
});
|
||||
|
||||
const { sceneUrl } = toRefs(data);
|
||||
const { sceneUrl,equimentInfo} = toRefs(data);
|
||||
const dialogVisible = ref(false);
|
||||
const dialogVisible1 = ref(false);
|
||||
const dialogVisible2 = ref(false);
|
||||
|
||||
const activateIndex = computed(() =>
|
||||
bimStore().activateIndex
|
||||
);
|
||||
|
||||
const buildInfo = computed(() =>
|
||||
bimStore().activateTree.info
|
||||
);
|
||||
|
||||
const deviceInfo = computed(() =>
|
||||
bimStore().activateTree.deviceInfo
|
||||
);
|
||||
|
||||
|
||||
|
||||
const onReady = () => {
|
||||
}
|
||||
|
||||
|
|
@ -78,22 +86,25 @@ const onError = () => {
|
|||
const onProgress = () => {
|
||||
}
|
||||
|
||||
const handleBuildClick = (value) => {
|
||||
sceneUrl.value = value.url;
|
||||
console.log(sceneUrl.value);
|
||||
const handleBuildClick = (value, isParent) => {
|
||||
// 点击父级，加载/切换场景
|
||||
if (isParent) {
|
||||
sceneUrl.value = value.url;
|
||||
console.log(sceneUrl.value);
|
||||
return;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const handleDeviceClick = (value) => {
|
||||
console.log(value);
|
||||
equimentInfo.value = bimStore().activateDevice.info;
|
||||
}
|
||||
|
||||
const handleApplicationClick = (value) => {
|
||||
console.log(value);
|
||||
}
|
||||
|
||||
const changeMenu = () => {
|
||||
|
||||
const changeMenu = (index) => {
|
||||
}
|
||||
|
||||
const openDialog = () => {
|
||||
|
|
@ -103,6 +114,11 @@ const openDialog = () => {
|
|||
const openDialog1 = () => {
|
||||
dialogVisible1.value = true;
|
||||
}
|
||||
|
||||
const viewDetail = (val) => {
|
||||
console.log(val);
|
||||
dialogVisible2.value = true;
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.app-container {
|
||||
|
|
|
|||
Loading…
Reference in New Issue