123
Before Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 8.8 KiB |
Before Width: | Height: | Size: 31 MiB |
|
@ -1,23 +0,0 @@
|
||||||
{
|
|
||||||
"metadata": {
|
|
||||||
"version": 4.6,
|
|
||||||
"type": "Object",
|
|
||||||
"generator": "Object3D.toJSON"
|
|
||||||
},
|
|
||||||
"object": {
|
|
||||||
"uuid": "d5126c66-4d01-4921-a537-14d53e6f1e6b",
|
|
||||||
"type": "PerspectiveCamera",
|
|
||||||
"name": "Camera",
|
|
||||||
"layers": 1,
|
|
||||||
"matrix": [-0.06562201141132419,0,-0.9978445528329212,0,-0.7132741706287389,0.6993136887478822,0.04690759260199039,0,0.6978063550385712,0.7148149164153124,-0.04589037086310866,0,155.382,155.10629237063554,-56.571004917885546,1],
|
|
||||||
"up": [0,1,0],
|
|
||||||
"fov": 50,
|
|
||||||
"zoom": 1,
|
|
||||||
"near": 0.01,
|
|
||||||
"far": 1000,
|
|
||||||
"focus": 10,
|
|
||||||
"aspect": 1.7215727948990436,
|
|
||||||
"filmGauge": 35,
|
|
||||||
"filmOffset": 0
|
|
||||||
}
|
|
||||||
}
|
|
134813
public/jz/glb/scene.gltf
Before Width: | Height: | Size: 69 KiB |
Before Width: | Height: | Size: 194 KiB |
BIN
public/jzc.7z
380058
public/jzc/scene.gltf
147286
public/jzc/scene1.gltf
141649
public/jzc/scene2.gltf
After Width: | Height: | Size: 4.9 KiB |
After Width: | Height: | Size: 4.7 KiB |
After Width: | Height: | Size: 2.4 MiB |
After Width: | Height: | Size: 3.6 MiB |
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="navbar1">
|
<div class="navbar1" :style="{'backgroundColor' : background}">
|
||||||
<!-- <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" /> -->
|
<!-- <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" /> -->
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<!-- <img src="@/assets/logo/logo.png" alt="dark" /> -->
|
<!-- <img src="@/assets/logo/logo.png" alt="dark" /> -->
|
||||||
|
@ -8,7 +8,7 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="middle">
|
<div class="middle">
|
||||||
BIM运维管理系统
|
BIM运维管理系统{{ test }}
|
||||||
</div>
|
</div>
|
||||||
<div class="right-menu">
|
<div class="right-menu">
|
||||||
<template v-if="appStore.device !== 'mobile'">
|
<template v-if="appStore.device !== 'mobile'">
|
||||||
|
@ -71,7 +71,9 @@ import useAppStore from '@/store/modules/app'
|
||||||
import useUserStore from '@/store/modules/user'
|
import useUserStore from '@/store/modules/user'
|
||||||
import useSettingsStore from '@/store/modules/settings'
|
import useSettingsStore from '@/store/modules/settings'
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
|
import { computed } from 'vue'
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
import bimStore from '@/store/modules/bim';
|
||||||
|
|
||||||
const appStore = useAppStore()
|
const appStore = useAppStore()
|
||||||
const userStore = useUserStore()
|
const userStore = useUserStore()
|
||||||
|
@ -81,9 +83,10 @@ const data = reactive({
|
||||||
interval: "",
|
interval: "",
|
||||||
currentTime: "",
|
currentTime: "",
|
||||||
time: "",
|
time: "",
|
||||||
week: ""
|
week: "",
|
||||||
|
background: ''
|
||||||
});
|
});
|
||||||
const { interval, currentTime, time, week } = toRefs(data);
|
const { interval, currentTime, time, week,background } = toRefs(data);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
interval.value = setInterval(updateTime, 1000);
|
interval.value = setInterval(updateTime, 1000);
|
||||||
|
@ -91,6 +94,9 @@ onMounted(() => {
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
clearInterval(interval.value);
|
clearInterval(interval.value);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
watch(() => bimStore().activateMenu, value => background.value = value.background);
|
||||||
function toggleSideBar() {
|
function toggleSideBar() {
|
||||||
appStore.toggleSideBar()
|
appStore.toggleSideBar()
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,12 +2,12 @@
|
||||||
<div class="treeDiv">
|
<div class="treeDiv">
|
||||||
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
|
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
|
||||||
<el-select v-model="applicationValue" class="m-2" placeholder="Select" size="large">
|
<el-select v-model="applicationValue" class="m-2" placeholder="Select" size="large">
|
||||||
<el-option v-for="item in applicationOptions" :key="item.value" :label="item.label" :value="item.value" />
|
<el-option v-for="item in applicationOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
</el-select>
|
</el-select>
|
||||||
<el-tree ref="myTree" :data="treeData" :props="defaultProps" node-key="id" highlight-current default-expand-all
|
<el-tree ref="myTree" :data="treeData" :props="defaultProps" node-key="id" highlight-current default-expand-all
|
||||||
:current-node-key="checkedkeys" @node-click="handleNodeClick" />
|
:current-node-key="checkedkeys" @node-click="handleNodeClick" />
|
||||||
</dv-border-box-10>
|
</dv-border-box-10>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
@ -37,17 +37,12 @@ const data = reactive({
|
||||||
{
|
{
|
||||||
label: '消防系统',
|
label: '消防系统',
|
||||||
id: '0-1',
|
id: '0-1',
|
||||||
url: '/jz/glb/scene.gltf'
|
url: '/jz/glb/scene.gltf',
|
||||||
|
children:[]
|
||||||
},
|
}
|
||||||
{
|
|
||||||
label: '电力系统',
|
|
||||||
id: '0-2',
|
|
||||||
url: '/seraphine/scene.gltf'
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
],
|
],
|
||||||
checkedkeys: ""
|
checkedkeys: ""
|
||||||
});
|
});
|
||||||
|
@ -55,17 +50,17 @@ const { applicationValue, treeData, checkedkeys } = toRefs(data);
|
||||||
const emit = defineEmits(['handleNodeClick'])
|
const emit = defineEmits(['handleNodeClick'])
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
checkedkeys.value = treeData.value[0].children[0].id;
|
checkedkeys.value = treeData.value[0].id;
|
||||||
// myTree.setCurrentKey(checkedkeys.value);
|
bimStore().setActivateApplicationTree(treeData.value[0]);
|
||||||
bimStore().setActivateApplicationTree(treeData.value[0].children[0]);
|
handleNodeClick(treeData.value[0]);
|
||||||
handleNodeClick(treeData.value[0].children[0]);
|
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
const handleNodeClick = (value) => {
|
const handleNodeClick = (value) => {
|
||||||
bimStore().setActivateTree(value);
|
bimStore().setActivateTree(value);
|
||||||
|
const isParent = value.children.length > 0;
|
||||||
emit('handleNodeClick', value);
|
emit('handleNodeClick', value);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
Bus.emit('clickApplication');
|
Bus.emit('clickApplication', isParent );
|
||||||
}, 100)
|
}, 100)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -86,17 +81,11 @@ const handleNodeClick = (value) => {
|
||||||
width: 224px;
|
width: 224px;
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: #3cbfdf;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-select {
|
.el-select {
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
:deep(.el-input__wrapper) {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-input__inner) {
|
|
||||||
color: #3cbfdf;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
|
@ -11,13 +11,15 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-div">
|
<div class="right-div">
|
||||||
<img src="@/assets/images/device.png" alt="" width="400">
|
<img :src="licang" alt="" width="400" v-if="infoList.imgUrl == 'licang'">
|
||||||
|
<img :src="guolvcao" alt="" width="400" v-if="infoList.imgUrl == 'guolvcao'">
|
||||||
<span>设备图片</span>
|
<span>设备图片</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import licang from '@/assets/images/licang.jpg';
|
||||||
|
import guolvcao from '@/assets/images/cao.jpg';
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
infoList: {
|
infoList: {
|
||||||
default: {},
|
default: {},
|
||||||
|
|
|
@ -10,14 +10,46 @@
|
||||||
<span class="name">面积</span>
|
<span class="name">面积</span>
|
||||||
<span class="text">{{ buildInfo.area }}</span>
|
<span class="text">{{ buildInfo.area }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="name">墙体厚度</span>
|
||||||
|
<span class="text">{{ buildInfo.qthd }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="name">材料类型</span>
|
||||||
|
<span class="text">{{ buildInfo.cllx }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="name">保温层类型</span>
|
||||||
|
<span class="text">{{ buildInfo.bwclx }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="name">饰面材料</span>
|
||||||
|
<span class="text">{{ buildInfo.smcl }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="name">承重能力</span>
|
||||||
|
<span class="text">{{ buildInfo.cznl }}</span>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="name">状态</span>
|
<span class="name">状态</span>
|
||||||
<span class="text">{{ buildInfo.status }}</span>
|
<span class="text">{{ buildInfo.status }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="name">启用日期</span>
|
||||||
|
<span class="text">{{ buildInfo.date }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="name">上次修缮日期</span>
|
||||||
|
<span class="text">{{ buildInfo.lastDate }}</span>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="name">描述</span>
|
<span class="name">描述</span>
|
||||||
<span class="text">{{ buildInfo.desc }}</span>
|
<span class="text">{{ buildInfo.desc }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <div>
|
||||||
|
<span class="name">备注</span>
|
||||||
|
<span class="text">{{ buildInfo.remark }}</span>
|
||||||
|
</div> -->
|
||||||
</dv-border-box-10>
|
</dv-border-box-10>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -35,7 +67,7 @@ const buildInfo = computed(() => bimStore().activateTree.info);
|
||||||
// background: #0a1f2e;
|
// background: #0a1f2e;
|
||||||
// border: 1px solid red;
|
// border: 1px solid red;
|
||||||
width: 360px;
|
width: 360px;
|
||||||
height: 340px;
|
// height: 420px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -43,15 +75,15 @@ const buildInfo = computed(() => bimStore().activateTree.info);
|
||||||
:deep(.border-box-content) {
|
:deep(.border-box-content) {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
>div {
|
>div {
|
||||||
line-height: 48px;
|
line-height: 36px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
.name {
|
.name {
|
||||||
width: 25%;
|
width: 40%;
|
||||||
}
|
}
|
||||||
.text {
|
.text {
|
||||||
width: 75%;
|
width: 59%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,7 +17,7 @@ import Bus from '@/utils/bus.js';
|
||||||
const myTree = ref("myTree");
|
const myTree = ref("myTree");
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
const buildOptions = [
|
const buildOptions = [
|
||||||
|
@ -42,8 +42,16 @@ const data = reactive({
|
||||||
info: {
|
info: {
|
||||||
name: '原料糖化车间',
|
name: '原料糖化车间',
|
||||||
area: '9436 ㎡',
|
area: '9436 ㎡',
|
||||||
|
qthd: '14 cm',
|
||||||
|
cllx: '砖石/混凝土/钢结构',
|
||||||
|
bwclx: '外墙保温',
|
||||||
|
smcl: '乳胶漆',
|
||||||
|
cznl: '22 kPa',
|
||||||
status: '启用',
|
status: '启用',
|
||||||
desc: '原料糖化车间,负责原料糖化,启用于2011年'
|
date: '2021年11月11日',
|
||||||
|
lastDate: '2022年2月3日',
|
||||||
|
desc: '原料糖化车间,负责原料糖化,启用于2011年',
|
||||||
|
remark: '备注'
|
||||||
},
|
},
|
||||||
deviceInfo: [
|
deviceInfo: [
|
||||||
{
|
{
|
||||||
|
@ -74,8 +82,16 @@ const data = reactive({
|
||||||
info: {
|
info: {
|
||||||
name: '糖化间',
|
name: '糖化间',
|
||||||
area: '9436 ㎡',
|
area: '9436 ㎡',
|
||||||
|
qthd: '34 cm',
|
||||||
|
cllx: '钢结构',
|
||||||
|
bwclx: '外墙保温',
|
||||||
|
smcl: '乳胶漆',
|
||||||
|
cznl: '22 kPa',
|
||||||
status: '启用',
|
status: '启用',
|
||||||
desc: '糖化间,负责原料糖化,启用于2011年'
|
date: '2021年3月11日',
|
||||||
|
lastDate: '2022年5月20日',
|
||||||
|
desc: '原料糖化车间,负责原料糖化,启用于2011年',
|
||||||
|
remark: '备注'
|
||||||
},
|
},
|
||||||
deviceInfo: [
|
deviceInfo: [
|
||||||
{
|
{
|
||||||
|
@ -106,9 +122,17 @@ const data = reactive({
|
||||||
clickName: 'yuanliao_room',
|
clickName: 'yuanliao_room',
|
||||||
info: {
|
info: {
|
||||||
name: '原料处理间',
|
name: '原料处理间',
|
||||||
area: '9436 ㎡',
|
area: '36 ㎡',
|
||||||
|
qthd: '4 cm',
|
||||||
|
cllx: '混凝土',
|
||||||
|
bwclx: '外墙保温',
|
||||||
|
smcl: '乳胶漆',
|
||||||
|
cznl: '22 kPa',
|
||||||
status: '启用',
|
status: '启用',
|
||||||
desc: '原料糖化车间,负责原料糖化,启用于2011年'
|
date: '2013年11月11日',
|
||||||
|
lastDate: '2020年12月3日',
|
||||||
|
desc: '原料糖化车间,负责原料糖化,启用于2011年',
|
||||||
|
remark: '备注'
|
||||||
},
|
},
|
||||||
deviceInfo: [
|
deviceInfo: [
|
||||||
{
|
{
|
||||||
|
@ -133,15 +157,23 @@ const data = reactive({
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
children: []
|
children: []
|
||||||
},{
|
}, {
|
||||||
label: '投料间',
|
label: '投料间',
|
||||||
id: '0-0-3',
|
id: '0-0-3',
|
||||||
clickName: 'touliao_room',
|
clickName: 'touliao_room',
|
||||||
info: {
|
info: {
|
||||||
name: '投料间',
|
name: '投料间',
|
||||||
area: '836 ㎡',
|
area: '936 ㎡',
|
||||||
|
qthd: '15 cm',
|
||||||
|
cllx: '砖石/混凝土/钢结构',
|
||||||
|
bwclx: '内墙保温',
|
||||||
|
smcl: '石材',
|
||||||
|
cznl: '12 kPa',
|
||||||
status: '启用',
|
status: '启用',
|
||||||
desc: '投料间,负责原料糖化,启用于2011年'
|
date: '20200年11月11日',
|
||||||
|
lastDate: '2022年2月3日',
|
||||||
|
desc: '原料糖化车间,负责原料糖化,启用于2011年',
|
||||||
|
remark: '备注'
|
||||||
},
|
},
|
||||||
deviceInfo: [
|
deviceInfo: [
|
||||||
{
|
{
|
||||||
|
@ -173,6 +205,23 @@ const data = reactive({
|
||||||
});
|
});
|
||||||
const { buildValue, treeData, checkedkeys } = toRefs(data);
|
const { buildValue, treeData, checkedkeys } = toRefs(data);
|
||||||
const emit = defineEmits(['handleNodeClick'])
|
const emit = defineEmits(['handleNodeClick'])
|
||||||
|
|
||||||
|
Bus.on('handleTreeClick', (obj) => {
|
||||||
|
let o = treeData.value[0].children.find(ele => {
|
||||||
|
return ele.clickName == obj.parent.name;
|
||||||
|
})
|
||||||
|
if (o) {
|
||||||
|
nextTick(() => {
|
||||||
|
checkedkeys.value = o.id;
|
||||||
|
handleNodeClick(o);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
Bus.off("handleTreeClick")// 清除监听
|
||||||
|
});
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
checkedkeys.value = treeData.value[0].id;
|
checkedkeys.value = treeData.value[0].id;
|
||||||
|
|
|
@ -17,9 +17,9 @@ import RealInfo from './RealInfo.vue';
|
||||||
import HistoryInfo from './HistoryInfo.vue';
|
import HistoryInfo from './HistoryInfo.vue';
|
||||||
import { ElMessage } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
||||||
const deviceData = {
|
const deviceData = {
|
||||||
'EQ0001': {
|
'set1': {
|
||||||
name: '立仓',
|
name: '立仓',
|
||||||
imgUlr: '',
|
imgUrl: 'licang',
|
||||||
detail: [
|
detail: [
|
||||||
{
|
{
|
||||||
name: '资产名称',
|
name: '资产名称',
|
||||||
|
@ -75,9 +75,9 @@ const deviceData = {
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
'EQ0002': {
|
'set6': {
|
||||||
name: '过滤槽',
|
name: '过滤槽',
|
||||||
imgUlr: '',
|
imgUrl: 'guolvcao',
|
||||||
detail: [
|
detail: [
|
||||||
{
|
{
|
||||||
name: '资产名称',
|
name: '资产名称',
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="deviceDiv">
|
<div class="deviceDiv">
|
||||||
<TopDiv title="资产事件"></TopDiv>
|
<TopDiv title="资产事件" showMore="true"></TopDiv>
|
||||||
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
|
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
|
||||||
<el-timeline>
|
<el-timeline>
|
||||||
<el-timeline-item v-for="(activity, index) in activities" :key="index" placement="top" :icon="activity.icon"
|
<el-timeline-item v-for="(activity, index) in activities" :key="index" placement="top" :icon="activity.icon"
|
||||||
|
@ -19,8 +19,8 @@
|
||||||
</el-timeline-item>
|
</el-timeline-item>
|
||||||
</el-timeline>
|
</el-timeline>
|
||||||
</dv-border-box-10>
|
</dv-border-box-10>
|
||||||
<div class="box-button" @click="openDialog">
|
<!-- <div class="box-button" @click="openDialog">
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
@ -33,7 +33,7 @@ const data = reactive({
|
||||||
content: '设备完成巡检计划',
|
content: '设备完成巡检计划',
|
||||||
time: '下午',
|
time: '下午',
|
||||||
timestamp: '20:46',
|
timestamp: '20:46',
|
||||||
color: '#87efd0e9',
|
color: '#08326f',
|
||||||
icon: MoreFilled,
|
icon: MoreFilled,
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
size: 'large'
|
size: 'large'
|
||||||
|
@ -51,7 +51,7 @@ const data = reactive({
|
||||||
content: '设备保养周期剩余3天',
|
content: '设备保养周期剩余3天',
|
||||||
time: '上午',
|
time: '上午',
|
||||||
timestamp: '11:46',
|
timestamp: '11:46',
|
||||||
color: '#6eebe3',
|
color: '#02a7f0',
|
||||||
icon: MoreFilled,
|
icon: MoreFilled,
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
size: 'large'
|
size: 'large'
|
||||||
|
|
|
@ -3,17 +3,29 @@
|
||||||
<TopDiv title="资产信息"></TopDiv>
|
<TopDiv title="资产信息"></TopDiv>
|
||||||
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
|
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
|
||||||
<div>
|
<div>
|
||||||
<span class="name">名称</span>
|
<span class="name">资产名称</span>
|
||||||
<span class="text">{{ deviceInfo && deviceInfo.name }}</span>
|
<span class="text">{{ deviceInfo && deviceInfo.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="name">类型</span>
|
<span class="name">资产类型</span>
|
||||||
<span class="text">{{ deviceInfo && deviceInfo.type }}</span>
|
<span class="text">{{ deviceInfo && deviceInfo.type }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="name">状态</span>
|
<span class="name">资产状态</span>
|
||||||
<span class="text">{{ deviceInfo && deviceInfo.status }}</span>
|
<span class="text">{{ deviceInfo && deviceInfo.status }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="name">资产位置</span>
|
||||||
|
<span class="text">{{ deviceInfo && deviceInfo.location }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="name">所属厂区</span>
|
||||||
|
<span class="text">{{ deviceInfo && deviceInfo.belong }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="name">过保截至日期</span>
|
||||||
|
<span class="text">{{ deviceInfo && deviceInfo.date }}</span>
|
||||||
|
</div>
|
||||||
</dv-border-box-10>
|
</dv-border-box-10>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -50,11 +62,11 @@ watch(() => bimStore().activateDevice.info, value => deviceInfo.value = value);
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
width: 25%;
|
width: 40%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
width: 75%;
|
width: 59%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -59,28 +59,28 @@ const data = reactive({
|
||||||
{
|
{
|
||||||
type: '生产设备',
|
type: '生产设备',
|
||||||
name: '立仓',
|
name: '立仓',
|
||||||
num: 'EQ0001',
|
num: 'set1',
|
||||||
value: 45,
|
value: 45,
|
||||||
id: "echartDiv0"
|
id: "echartDiv0"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: '生产设备',
|
type: '生产设备',
|
||||||
name: '过滤槽',
|
name: '过滤槽',
|
||||||
num: 'EQ0002',
|
num: 'set6',
|
||||||
value: 130,
|
value: 130,
|
||||||
id: "echartDiv1"
|
id: "echartDiv1"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: '安防设备',
|
type: '安防设备',
|
||||||
name: '摄像头',
|
name: '摄像头',
|
||||||
num: 'EQ0001',
|
num: 'set1',
|
||||||
value: 180,
|
value: 180,
|
||||||
id: "echartDiv2"
|
id: "echartDiv2"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: '消防设备',
|
type: '消防设备',
|
||||||
name: '烟感',
|
name: '烟感',
|
||||||
num: 'EQ0001',
|
num: 'set1',
|
||||||
value: 100,
|
value: 100,
|
||||||
id: "echartDiv3"
|
id: "echartDiv3"
|
||||||
}
|
}
|
||||||
|
@ -101,28 +101,28 @@ const data = reactive({
|
||||||
{
|
{
|
||||||
type: '生产设备',
|
type: '生产设备',
|
||||||
name: '立仓',
|
name: '立仓',
|
||||||
num: 'EQ0001',
|
num: 'set1',
|
||||||
value: 15,
|
value: 15,
|
||||||
id: "echartDiv0"
|
id: "echartDiv0"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: '生产设备',
|
type: '生产设备',
|
||||||
name: '过滤槽',
|
name: '过滤槽',
|
||||||
num: 'EQ0002',
|
num: 'set6',
|
||||||
value: 50,
|
value: 50,
|
||||||
id: "echartDiv1"
|
id: "echartDiv1"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: '安防设备',
|
type: '安防设备',
|
||||||
name: '摄像头',
|
name: '摄像头',
|
||||||
num: 'EQ0001',
|
num: 'set1',
|
||||||
value: 80,
|
value: 80,
|
||||||
id: "echartDiv2"
|
id: "echartDiv2"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: '消防设备',
|
type: '消防设备',
|
||||||
name: '烟感',
|
name: '烟感',
|
||||||
num: 'EQ0001',
|
num: 'set1',
|
||||||
value: 50,
|
value: 50,
|
||||||
id: "echartDiv3"
|
id: "echartDiv3"
|
||||||
}
|
}
|
||||||
|
@ -144,28 +144,28 @@ const data = reactive({
|
||||||
{
|
{
|
||||||
type: '生产设备',
|
type: '生产设备',
|
||||||
name: '立仓',
|
name: '立仓',
|
||||||
num: 'EQ0001',
|
num: 'set1',
|
||||||
value: 30,
|
value: 30,
|
||||||
id: "echartDiv0"
|
id: "echartDiv0"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: '生产设备',
|
type: '生产设备',
|
||||||
name: '过滤槽',
|
name: '过滤槽',
|
||||||
num: 'EQ0002',
|
num: 'set6',
|
||||||
value: 80,
|
value: 80,
|
||||||
id: "echartDiv1"
|
id: "echartDiv1"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: '安防设备',
|
type: '安防设备',
|
||||||
name: '摄像头',
|
name: '摄像头',
|
||||||
num: 'EQ00011',
|
num: 'set1',
|
||||||
value: 100,
|
value: 100,
|
||||||
id: "echartDiv2"
|
id: "echartDiv2"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: '消防设备',
|
type: '消防设备',
|
||||||
name: '烟感',
|
name: '烟感',
|
||||||
num: 'EQ0002',
|
num: 'set1',
|
||||||
value: 50,
|
value: 50,
|
||||||
id: "echartDiv3"
|
id: "echartDiv3"
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="deviceDiv">
|
<div class="deviceDiv">
|
||||||
<TopDiv title="资产信息"></TopDiv>
|
<TopDiv title="资产信息" showMore="true"></TopDiv>
|
||||||
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
|
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
|
||||||
<!-- <div class="container1">
|
<!-- <div class="container1">
|
||||||
|
|
||||||
|
@ -10,8 +10,8 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</dv-border-box-10>
|
</dv-border-box-10>
|
||||||
<div class="box-button" @click="openDialog">
|
<!-- <div class="box-button" @click="openDialog">
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
@ -69,10 +69,10 @@ const openDialog = () => {
|
||||||
<style lang='scss' scoped>
|
<style lang='scss' scoped>
|
||||||
.deviceDiv {
|
.deviceDiv {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 380px;
|
bottom: 20px;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
width: 360px;
|
width: 360px;
|
||||||
height: 380px;
|
height: 330px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
@ -36,7 +36,10 @@ const data = reactive({
|
||||||
info: {
|
info: {
|
||||||
name: '生产设备',
|
name: '生产设备',
|
||||||
type: '生产设备',
|
type: '生产设备',
|
||||||
status: '启用'
|
status: '启用',
|
||||||
|
location: '漳州厂区糖化间',
|
||||||
|
belong: '漳州厂区',
|
||||||
|
date: '2025-12-15'
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
|
@ -46,53 +49,111 @@ const data = reactive({
|
||||||
info: {
|
info: {
|
||||||
name: '立仓',
|
name: '立仓',
|
||||||
type: '生产设备',
|
type: '生产设备',
|
||||||
status: '启用'
|
status: '启用',
|
||||||
|
location: '漳州厂区糖化间',
|
||||||
|
belong: '漳州厂区',
|
||||||
|
date: '2028-10-15'
|
||||||
|
|
||||||
},
|
},
|
||||||
children: []
|
children: []
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '过滤槽',
|
label: '过滤槽',
|
||||||
id: '0-1',
|
id: '0-2',
|
||||||
clickName: 'set6',
|
clickName: 'set6',
|
||||||
info: {
|
info: {
|
||||||
name: '过滤槽',
|
name: '过滤槽',
|
||||||
type: '生产设备',
|
type: '生产设备',
|
||||||
status: '启用'
|
status: '启用',
|
||||||
|
location: '漳州厂区糖化间',
|
||||||
|
belong: '漳州厂区',
|
||||||
|
date: '2067-12-30'
|
||||||
},
|
},
|
||||||
children: []
|
children: []
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '设备二',
|
label: '设备二',
|
||||||
id: '0-2',
|
id: '0-3',
|
||||||
clickName: 'set2',
|
clickName: 'set2',
|
||||||
info: {
|
info: {
|
||||||
name: '设备二',
|
name: '设备二',
|
||||||
type: '生产设备',
|
type: '生产设备',
|
||||||
status: '启用'
|
status: '启用',
|
||||||
|
location: '漳州厂区糖化间',
|
||||||
|
belong: '漳州厂区',
|
||||||
|
date: '2025-12-15'
|
||||||
},
|
},
|
||||||
children: []
|
children: []
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '设备三',
|
label: '设备三',
|
||||||
id: '0-3',
|
id: '0-4',
|
||||||
clickName: 'set3',
|
clickName: 'set3',
|
||||||
info: {
|
info: {
|
||||||
name: '设备三',
|
name: '设备三',
|
||||||
type: '空调设备',
|
type: '空调设备',
|
||||||
status: '启用'
|
status: '启用',
|
||||||
|
location: '漳州厂区糖化间',
|
||||||
|
belong: '漳州厂区',
|
||||||
|
date: '2025-12-15'
|
||||||
},
|
},
|
||||||
children: []
|
children: []
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '设备四',
|
label: '设备四',
|
||||||
id: '0-4',
|
id: '0-5',
|
||||||
clickName: 'set4',
|
clickName: 'set4',
|
||||||
info: {
|
info: {
|
||||||
name: '设备四',
|
name: '设备四',
|
||||||
type: '安防设备',
|
type: '安防设备',
|
||||||
status: '启用'
|
status: '启用',
|
||||||
|
location: '漳州厂区糖化间',
|
||||||
|
belong: '漳州厂区',
|
||||||
|
date: '2025-12-15'
|
||||||
|
},
|
||||||
|
children: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '设备五',
|
||||||
|
id: '0-6',
|
||||||
|
clickName: 'set5',
|
||||||
|
info: {
|
||||||
|
name: '设备五',
|
||||||
|
type: '安防设备',
|
||||||
|
status: '启用',
|
||||||
|
location: '漳州厂区糖化间',
|
||||||
|
belong: '漳州厂区',
|
||||||
|
date: '2025-12-15'
|
||||||
|
},
|
||||||
|
children: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '设备七',
|
||||||
|
id: '0-7',
|
||||||
|
clickName: 'set7',
|
||||||
|
info: {
|
||||||
|
name: '设备七',
|
||||||
|
type: '安防设备',
|
||||||
|
status: '启用',
|
||||||
|
location: '漳州厂区糖化间',
|
||||||
|
belong: '漳州厂区',
|
||||||
|
date: '2025-12-15'
|
||||||
|
},
|
||||||
|
children: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '设备八',
|
||||||
|
id: '0-8',
|
||||||
|
clickName: 'set8',
|
||||||
|
info: {
|
||||||
|
name: '设备八',
|
||||||
|
type: '安防设备',
|
||||||
|
status: '启用',
|
||||||
|
location: '漳州厂区糖化间',
|
||||||
|
belong: '漳州厂区',
|
||||||
|
date: '2025-12-15'
|
||||||
},
|
},
|
||||||
children: []
|
children: []
|
||||||
},
|
},
|
||||||
|
@ -109,6 +170,24 @@ onMounted(() => {
|
||||||
handleNodeClick(treeData.value[0]);
|
handleNodeClick(treeData.value[0]);
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Bus.on('handleTreeClick1', (obj) => {
|
||||||
|
let o = treeData.value[0].children.find(ele => {
|
||||||
|
return ele.clickName == obj.parent.name;
|
||||||
|
})
|
||||||
|
console.log(123, obj.parent.name);
|
||||||
|
if (o) {
|
||||||
|
nextTick(() => {
|
||||||
|
checkedkeys.value = o.id;
|
||||||
|
handleNodeClick(o);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
Bus.off("handleTreeClick")// 清除监听
|
||||||
|
});
|
||||||
const handleNodeClick = (value) => {
|
const handleNodeClick = (value) => {
|
||||||
bimStore().setActivateDeviceTree(value);
|
bimStore().setActivateDeviceTree(value);
|
||||||
const isParent = value.children.length > 0;
|
const isParent = value.children.length > 0;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="buildDiv">
|
<div class="buildDiv">
|
||||||
|
|
||||||
<TopDiv title="设备信息"></TopDiv>
|
<TopDiv title="设备信息"></TopDiv>
|
||||||
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
|
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
|
||||||
<div>
|
<div>
|
||||||
|
@ -15,6 +15,18 @@
|
||||||
<span class="name">设备状态</span>
|
<span class="name">设备状态</span>
|
||||||
<span class="text">{{ equipmentInfo.status }}</span>
|
<span class="text">{{ equipmentInfo.status }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="name">设备位置</span>
|
||||||
|
<span class="text">{{ equipmentInfo.location }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="name">所属厂区:</span>
|
||||||
|
<span class="text">{{ equipmentInfo.belong }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="name">过保截至日期:</span>
|
||||||
|
<span class="text">{{ equipmentInfo.date }}</span>
|
||||||
|
</div>
|
||||||
</dv-border-box-10>
|
</dv-border-box-10>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -22,11 +34,14 @@
|
||||||
import bimStore from '@/store/modules/bim';
|
import bimStore from '@/store/modules/bim';
|
||||||
import TopDiv from "./TopDiv.vue";
|
import TopDiv from "./TopDiv.vue";
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
equipmentInfo: {
|
equipmentInfo: {
|
||||||
name: '空调机组',
|
name: '空调机组',
|
||||||
number: 'AHU-F01-02',
|
number: 'AHU-F01-02',
|
||||||
status:'启用',
|
status: '启用',
|
||||||
}
|
location: '漳州厂区糖化间',
|
||||||
|
belong: '漳州厂区',
|
||||||
|
date: '2025-12-15'
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const { equipmentInfo } = toRefs(data);
|
const { equipmentInfo } = toRefs(data);
|
||||||
|
@ -44,20 +59,23 @@ const { equipmentInfo } = toRefs(data);
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: #3cbfdf;
|
color: #3cbfdf;
|
||||||
|
|
||||||
:deep(.border-box-content) {
|
:deep(.border-box-content) {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
||||||
>div {
|
>div {
|
||||||
line-height: 48px;
|
line-height: 48px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
width: 35%;
|
width: 40%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
width: 56%;
|
width: 59%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}</style>
|
||||||
</style>
|
|
|
@ -7,6 +7,7 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import bimStore from '@/store/modules/bim';
|
import bimStore from '@/store/modules/bim';
|
||||||
import { onMounted } from 'vue';
|
import { onMounted } from 'vue';
|
||||||
|
import Bus from '@/utils/bus.js';
|
||||||
|
|
||||||
const menuList = [
|
const menuList = [
|
||||||
{
|
{
|
||||||
|
|
|
@ -2,17 +2,29 @@
|
||||||
<div class="realInfoDialog">
|
<div class="realInfoDialog">
|
||||||
<div class="top-div">
|
<div class="top-div">
|
||||||
<div>
|
<div>
|
||||||
<span class="name">名称:</span>
|
<span class="name">资产名称:</span>
|
||||||
<span class="text">{{ deviceInfo && deviceInfo.name }}</span>
|
<span class="text">{{ deviceInfo && deviceInfo.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="name">类型:</span>
|
<span class="name">资产类型:</span>
|
||||||
<span class="text">{{ deviceInfo && deviceInfo.type }}</span>
|
<span class="text">{{ deviceInfo && deviceInfo.type }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="name">状态:</span>
|
<span class="name">资产状态:</span>
|
||||||
<span class="text">{{ deviceInfo && deviceInfo.status }}</span>
|
<span class="text">{{ deviceInfo && deviceInfo.status }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="name">资产位置:</span>
|
||||||
|
<span class="text">{{ deviceInfo && deviceInfo.location }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="name">所属厂区:</span>
|
||||||
|
<span class="text">{{ deviceInfo && deviceInfo.belong }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="name">过保截至日期:</span>
|
||||||
|
<span class="text">{{ deviceInfo && deviceInfo.date }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom-div">
|
<div class="bottom-div">
|
||||||
|
@ -64,7 +76,7 @@ const data = reactive({
|
||||||
content: '设备完成巡检计划',
|
content: '设备完成巡检计划',
|
||||||
time: '2023年',
|
time: '2023年',
|
||||||
timestamp: '12月3日',
|
timestamp: '12月3日',
|
||||||
color: '#87efd0e9',
|
color: '#08326f',
|
||||||
icon: MoreFilled,
|
icon: MoreFilled,
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
size: 'large'
|
size: 'large'
|
||||||
|
@ -82,7 +94,7 @@ const data = reactive({
|
||||||
content: '设备保养周期剩余3天',
|
content: '设备保养周期剩余3天',
|
||||||
time: '2023年',
|
time: '2023年',
|
||||||
timestamp: '12月6日',
|
timestamp: '12月6日',
|
||||||
color: '#6eebe3',
|
color: '#02a7f0',
|
||||||
icon: MoreFilled,
|
icon: MoreFilled,
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
size: 'large'
|
size: 'large'
|
||||||
|
@ -91,7 +103,7 @@ const data = reactive({
|
||||||
content: '设备完成巡检计划',
|
content: '设备完成巡检计划',
|
||||||
time: '2023年',
|
time: '2023年',
|
||||||
timestamp: '12月20日',
|
timestamp: '12月20日',
|
||||||
color: '#87efd0e9',
|
color: '#08326f',
|
||||||
icon: MoreFilled,
|
icon: MoreFilled,
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
size: 'large'
|
size: 'large'
|
||||||
|
@ -191,13 +203,14 @@ const getEchart = () => {
|
||||||
height: 25%;
|
height: 25%;
|
||||||
border: 1px solid #2E6099;
|
border: 1px solid #2E6099;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
// flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
>div {
|
>div {
|
||||||
display: flex;
|
display: flex;
|
||||||
line-height: 48px;
|
line-height: 48px;
|
||||||
width: 240px;
|
width: 33%;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, ref,watch } from 'vue';
|
import { onMounted, ref, watch } from 'vue';
|
||||||
import * as THREE from 'three';
|
import * as THREE from 'three';
|
||||||
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
|
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
|
||||||
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
|
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
|
||||||
|
@ -39,6 +39,12 @@ onMounted(() => {
|
||||||
renderScene();
|
renderScene();
|
||||||
//点击模型
|
//点击模型
|
||||||
document.addEventListener('click', onMouseDown);
|
document.addEventListener('click', onMouseDown);
|
||||||
|
// 右击事件
|
||||||
|
window.addEventListener('contextmenu', function (e) {
|
||||||
|
if (e.button === 2) {
|
||||||
|
onMouseDownRight(e);
|
||||||
|
}
|
||||||
|
});
|
||||||
// document.addEventListener("mousemove", onMouseMove);
|
// document.addEventListener("mousemove", onMouseMove);
|
||||||
});
|
});
|
||||||
let scene, renderer, camera, controls, clickedObject, pointsArr = true;
|
let scene, renderer, camera, controls, clickedObject, pointsArr = true;
|
||||||
|
@ -59,7 +65,7 @@ const data = reactive({
|
||||||
isAddLabel: true,
|
isAddLabel: true,
|
||||||
isRemoveBottom: true
|
isRemoveBottom: true
|
||||||
});
|
});
|
||||||
const { isAddLabel,isRemoveBottom } = toRefs(data);
|
const { isAddLabel, isRemoveBottom } = toRefs(data);
|
||||||
// 建筑树点击
|
// 建筑树点击
|
||||||
Bus.on('clickBuild', (isParent) => {
|
Bus.on('clickBuild', (isParent) => {
|
||||||
// Todo
|
// Todo
|
||||||
|
@ -93,16 +99,19 @@ Bus.on('clickDevice', (isParent) => {
|
||||||
})
|
})
|
||||||
|
|
||||||
// 系统树点击
|
// 系统树点击
|
||||||
Bus.on('clickApplication', e => {
|
Bus.on('clickApplication', (isParent) => {
|
||||||
// Todo
|
// Todo
|
||||||
console.log('clickApplication');
|
if(!isParent) {
|
||||||
|
xiaof();
|
||||||
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(() => bimStore().activateMenu, value => {
|
watch(() => bimStore().activateMenu, value => {
|
||||||
// 更换场景颜色
|
// 更换场景颜色
|
||||||
scene.background = new THREE.Color(value.background);
|
scene.background = new THREE.Color(value.background);
|
||||||
toHomeView();
|
toHomeView();
|
||||||
},{ deep: true });
|
}, { deep: true });
|
||||||
|
|
||||||
const init = () => {
|
const init = () => {
|
||||||
// 场景
|
// 场景
|
||||||
|
@ -136,10 +145,12 @@ const loadSence = () => {
|
||||||
model.traverse(e => {
|
model.traverse(e => {
|
||||||
objArr.push(e);
|
objArr.push(e);
|
||||||
objM.push(e.material);
|
objM.push(e.material);
|
||||||
|
if (enableGroup.indexOf(e.name) != -1){
|
||||||
|
xfobj.push(e);
|
||||||
|
}
|
||||||
})
|
})
|
||||||
// 设置漫游点位
|
// 设置漫游点位
|
||||||
const objname = ['start', 'middle1', 'middle2', 'end']
|
const objname = ['start', 'middle1', 'middle2', 'end']
|
||||||
|
|
||||||
objname.forEach((item, index) => {
|
objname.forEach((item, index) => {
|
||||||
var targetModel = model.getObjectByName(item);
|
var targetModel = model.getObjectByName(item);
|
||||||
if (targetModel) romeObj.push(
|
if (targetModel) romeObj.push(
|
||||||
|
@ -147,6 +158,8 @@ const loadSence = () => {
|
||||||
)
|
)
|
||||||
console.log('targetModel', targetModel)
|
console.log('targetModel', targetModel)
|
||||||
})
|
})
|
||||||
|
// 漫游结束
|
||||||
|
|
||||||
scene.add(model);
|
scene.add(model);
|
||||||
// 将预警设备染色
|
// 将预警设备染色
|
||||||
warn();
|
warn();
|
||||||
|
@ -202,7 +215,7 @@ const isSelent = (obj) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
let selectedObjects = ref([]);
|
let selectedObjects = ref([]);
|
||||||
let selectBoxByClick, selectBoxByMouseon;
|
let selectBoxByClick, selectBoxByMouseon, pointLabel;
|
||||||
var marginLeft = 0;
|
var marginLeft = 0;
|
||||||
var marginTop = 70;
|
var marginTop = 70;
|
||||||
// 鼠标移动效果
|
// 鼠标移动效果
|
||||||
|
@ -225,6 +238,24 @@ const onMouseMove = (event) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
const emit = defineEmits(['handleRightClick'])
|
||||||
|
// 鼠标右击事件
|
||||||
|
const onMouseDownRight = (event) => {
|
||||||
|
var raycaster = new THREE.Raycaster()
|
||||||
|
mouse.x = ((event.clientX - marginLeft) / window.innerWidth) * 2 - 1;
|
||||||
|
mouse.y = -((event.clientY - marginTop) / window.innerHeight) * 2 + 1;
|
||||||
|
raycaster.setFromCamera(mouse, camera);
|
||||||
|
const intersects = raycaster.intersectObjects(scene.children, true);
|
||||||
|
console.log(123, event);
|
||||||
|
|
||||||
|
if (intersects.length > 0) {
|
||||||
|
const clickedObject = intersects[0].object;
|
||||||
|
console.log('这是我选中的模型', clickedObject);
|
||||||
|
var selectedObject = isSelent(clickedObject);
|
||||||
|
// addLabel(selectedObject, true);
|
||||||
|
emit('handleRightClick', selectedObject);
|
||||||
|
}
|
||||||
|
}
|
||||||
// 鼠标点击效果
|
// 鼠标点击效果
|
||||||
const onMouseDown = (event) => {
|
const onMouseDown = (event) => {
|
||||||
var raycaster = new THREE.Raycaster()
|
var raycaster = new THREE.Raycaster()
|
||||||
|
@ -243,6 +274,17 @@ const onMouseDown = (event) => {
|
||||||
boxLight(selectedObject);
|
boxLight(selectedObject);
|
||||||
// 染色点击的模型
|
// 染色点击的模型
|
||||||
|
|
||||||
|
if(bimStore().activateIndex == '0') {
|
||||||
|
// 联动左侧菜单
|
||||||
|
Bus.emit('handleTreeClick', clickedObject);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if(bimStore().activateIndex == '1') {
|
||||||
|
// 联动左侧菜单
|
||||||
|
Bus.emit('handleTreeClick1', clickedObject);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const changeColor = (Floor) => {
|
const changeColor = (Floor) => {
|
||||||
|
@ -332,6 +374,8 @@ const centerSelectedGroup = (obj) => {
|
||||||
// 漫游
|
// 漫游
|
||||||
const roam = () => {
|
const roam = () => {
|
||||||
if (currentIndex < romeObj.length) {
|
if (currentIndex < romeObj.length) {
|
||||||
|
console.log('----', currentIndex);
|
||||||
|
console.log('----', romeObj.length);
|
||||||
var nextPosition = romeObj[currentIndex].getWorldPosition(new THREE.Vector3());
|
var nextPosition = romeObj[currentIndex].getWorldPosition(new THREE.Vector3());
|
||||||
// 在动画完成后触发下一个漫游
|
// 在动画完成后触发下一个漫游
|
||||||
gsap.to(camera.position, {
|
gsap.to(camera.position, {
|
||||||
|
@ -368,6 +412,16 @@ const roam = () => {
|
||||||
}
|
}
|
||||||
// 返回初始值
|
// 返回初始值
|
||||||
const toHomeView = () => {
|
const toHomeView = () => {
|
||||||
|
// 清除选中框
|
||||||
|
if (selectBoxByClick) {
|
||||||
|
scene.remove(selectBoxByClick);
|
||||||
|
}
|
||||||
|
// 清除标签
|
||||||
|
if(!isAddLabel.value) {
|
||||||
|
removeLabel();
|
||||||
|
isAddLabel.value = !isAddLabel.value;
|
||||||
|
}
|
||||||
|
// 清除精灵图
|
||||||
controls.reset();
|
controls.reset();
|
||||||
}
|
}
|
||||||
// 拉近距离
|
// 拉近距离
|
||||||
|
@ -388,20 +442,19 @@ const nearCamera = (floor) => {
|
||||||
//标签
|
//标签
|
||||||
const setLabel = () => {
|
const setLabel = () => {
|
||||||
if (isAddLabel.value) {
|
if (isAddLabel.value) {
|
||||||
addLabel();
|
let obj = scene.getObjectByName('set2');
|
||||||
|
addLabel(obj, false);
|
||||||
} else {
|
} else {
|
||||||
removeLabel();
|
removeLabel();
|
||||||
toHomeView();
|
|
||||||
}
|
}
|
||||||
isAddLabel.value = !isAddLabel.value;
|
isAddLabel.value = !isAddLabel.value;
|
||||||
}
|
}
|
||||||
// 添加标签
|
// 添加标签
|
||||||
const addLabel = () => {
|
const addLabel = (obj,isShowDetail) => {
|
||||||
let obj = scene.getObjectByName('set2');
|
|
||||||
// console.log(123, obj);
|
// console.log(123, obj);
|
||||||
centerSelectedGroup(obj);
|
centerSelectedGroup(obj);
|
||||||
let text = "设备二";
|
let text = "设备二";
|
||||||
let pointLabel = createLableObj(text);
|
pointLabel = createLableObj(text,isShowDetail);
|
||||||
obj.add(pointLabel);
|
obj.add(pointLabel);
|
||||||
labelRenderer.setSize(window.innerWidth, window.innerHeight);
|
labelRenderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
labelRenderer.domElement.style.position = "absolute";
|
labelRenderer.domElement.style.position = "absolute";
|
||||||
|
@ -412,22 +465,28 @@ const addLabel = () => {
|
||||||
// 将呈现器的输出添加到HTML元素
|
// 将呈现器的输出添加到HTML元素
|
||||||
document.getElementById("dom").appendChild(renderer.domElement);
|
document.getElementById("dom").appendChild(renderer.domElement);
|
||||||
};
|
};
|
||||||
const createLableObj = (text) => {
|
const createLableObj = (text,isShowDetail) => {
|
||||||
let laberDiv = document.createElement("div"); //创建div容器
|
let laberDiv = document.createElement("div"); //创建div容器
|
||||||
laberDiv.className = "laber_name";
|
if(!isShowDetail) {
|
||||||
laberDiv.innerHTML = `<div class="arrow_outer"></div><span>设备名称:${text}</span><span>状态:启用</span><span>压力:50 Pa</span>`
|
laberDiv.className = "laber_name";
|
||||||
|
laberDiv.innerHTML = `<div class="arrow_outer"></div><span>设备名称:${text}</span><span>状态:启用</span><span>压力:50 Pa</span>`
|
||||||
|
} else {
|
||||||
|
laberDiv.className = "laber_name1";
|
||||||
|
laberDiv.innerHTML = `<div class="detail-btn">详情</div>`
|
||||||
|
}
|
||||||
let pointLabel = new CSS2DObject(laberDiv);
|
let pointLabel = new CSS2DObject(laberDiv);
|
||||||
return pointLabel;
|
return pointLabel;
|
||||||
};
|
};
|
||||||
const removeLabel = () => {
|
const removeLabel = () => {
|
||||||
document.body.removeChild(labelRenderer.domElement);
|
document.body.removeChild(labelRenderer.domElement);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 设置地板
|
// 设置地板
|
||||||
const setBottom = () => {
|
const setBottom = () => {
|
||||||
var target = scene.getObjectByName('set1');
|
var target = scene.getObjectByName('floor2F');
|
||||||
|
console.log(target);
|
||||||
if (isRemoveBottom.value) {
|
if (isRemoveBottom.value) {
|
||||||
var target = scene.getObjectByName('set1');
|
|
||||||
target.visible = false;
|
target.visible = false;
|
||||||
} else {
|
} else {
|
||||||
target.visible = true;
|
target.visible = true;
|
||||||
|
@ -435,6 +494,32 @@ const setBottom = () => {
|
||||||
isRemoveBottom.value = !isRemoveBottom.value;
|
isRemoveBottom.value = !isRemoveBottom.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 消防
|
||||||
|
const xiaof = () => {
|
||||||
|
xfobj.forEach((o)=>{
|
||||||
|
xfadd(o,Math.random() < 0.3);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let xfobj = [];
|
||||||
|
// 消防标签
|
||||||
|
const xfadd = (obj,state)=> {
|
||||||
|
const texLoader= new THREE.TextureLoader();
|
||||||
|
let texture = null;
|
||||||
|
if(state){
|
||||||
|
texture= texLoader.load("/ygr.png");
|
||||||
|
}else{
|
||||||
|
texture = texLoader.load("/yg.png");
|
||||||
|
}
|
||||||
|
const spriteMaterial = new THREE.SpriteMaterial({
|
||||||
|
map: texture,
|
||||||
|
});
|
||||||
|
const sprite = new THREE.Sprite(spriteMaterial);
|
||||||
|
// 控制精灵大小
|
||||||
|
sprite.scale.set(5, 5, 5);
|
||||||
|
sprite.position.y = 10; //标签底部箭头和空对象标注点重合
|
||||||
|
obj.add(sprite); //tag会标注在空对象obj对应的位置
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang='scss'>
|
<style lang='scss'>
|
||||||
#gltf {
|
#gltf {
|
||||||
|
@ -445,8 +530,8 @@ const setBottom = () => {
|
||||||
.btnGroup {
|
.btnGroup {
|
||||||
width: 180px;
|
width: 180px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0px;
|
left: 260px;
|
||||||
bottom: 40px;
|
top: 10px;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -455,10 +540,11 @@ const setBottom = () => {
|
||||||
|
|
||||||
>div {
|
>div {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: #477efa;
|
// background: #0549a7;
|
||||||
width: 120px;
|
border: 1px solid #3cbfdf;
|
||||||
|
width: 110px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border-radius: 0 50px 50px 0;
|
border-radius: 5px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
@ -480,4 +566,16 @@ const setBottom = () => {
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.laber_name1 {
|
||||||
|
width:100px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #00174b;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index:999;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
|
@ -1,14 +1,28 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="top-div">{{ title }}</div>
|
<div class="top-div">
|
||||||
|
<span>{{ title }}</span>
|
||||||
|
<el-icon v-if="showMore" @click="viewMore">
|
||||||
|
<MoreFilled />
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import Bus from '@/utils/bus.js';
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
title: { //
|
title: { //
|
||||||
default: '建筑信息',
|
default: '建筑信息',
|
||||||
type: String
|
type: String
|
||||||
},
|
},
|
||||||
|
showMore: {
|
||||||
|
default: false,
|
||||||
|
type: Boolean
|
||||||
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
|
const emit = defineEmits(['viewMore'])
|
||||||
|
const viewMore = () => {
|
||||||
|
Bus.emit('viewMore', props.title);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.top-div {
|
.top-div {
|
||||||
|
@ -21,6 +35,11 @@ const props = defineProps({
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
padding-left: 24px;
|
padding-left: 24px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 800
|
font-weight: 800;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.el-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<!-- 场景模型 -->
|
<!-- 场景模型 -->
|
||||||
<ThreeView light="0xfffafa" :sceneUrl="sceneUrl" v-if="sceneUrl !== ''"></ThreeView>
|
<ThreeView light="0xfffafa" :sceneUrl="sceneUrl" v-if="sceneUrl !== ''" @handleRightClick="handleRightClick"></ThreeView>
|
||||||
<!-- <ThreeModel /> -->
|
<!-- <ThreeModel /> -->
|
||||||
<!-- 底部菜单 -->
|
<!-- 底部菜单 -->
|
||||||
<MenuTab @changeMenu="changeMenu"></MenuTab>
|
<MenuTab @changeMenu="changeMenu"></MenuTab>
|
||||||
|
@ -10,13 +10,13 @@
|
||||||
<!-- 建筑信息 -->
|
<!-- 建筑信息 -->
|
||||||
<BuildInfo v-if="buildInfo && activateIndex == 0"></BuildInfo>
|
<BuildInfo v-if="buildInfo && activateIndex == 0"></BuildInfo>
|
||||||
<!-- 资产信息 -->
|
<!-- 资产信息 -->
|
||||||
<DevicePie v-if="deviceInfo && activateIndex == 0" @openDialog="openDialog"></DevicePie>
|
<DevicePie v-if="deviceInfo && activateIndex == 0"></DevicePie>
|
||||||
<!-- 左侧资产菜单 -->
|
<!-- 左侧资产菜单 -->
|
||||||
<DeviceTree v-if="activateIndex == 1" @handleNodeClick="handleDeviceClick"></DeviceTree>
|
<DeviceTree v-if="activateIndex == 1" @handleNodeClick="handleDeviceClick"></DeviceTree>
|
||||||
<!-- 资产信息 -->
|
<!-- 资产信息 -->
|
||||||
<DeviceInfo v-if="equimentInfo && activateIndex == 1"></DeviceInfo>
|
<DeviceInfo v-if="equimentInfo && activateIndex == 1"></DeviceInfo>
|
||||||
<!-- 资产事件 -->
|
<!-- 资产事件 -->
|
||||||
<DeviceEvent v-if="activateIndex == 1" @openDialog="openDialog1"></DeviceEvent>
|
<DeviceEvent v-if="activateIndex == 1"></DeviceEvent>
|
||||||
<!-- 左侧应用菜单 -->
|
<!-- 左侧应用菜单 -->
|
||||||
<ApplicationTree v-if="activateIndex == 2" @handleNodeClick="handleApplicationClick"></ApplicationTree>
|
<ApplicationTree v-if="activateIndex == 2" @handleNodeClick="handleApplicationClick"></ApplicationTree>
|
||||||
<!-- 设备信息 -->
|
<!-- 设备信息 -->
|
||||||
|
@ -56,6 +56,7 @@ import RealInfoDialog from './components/RealInfoDialog.vue';
|
||||||
import DeviceDetial from './components/DeviceDetial.vue';
|
import DeviceDetial from './components/DeviceDetial.vue';
|
||||||
import bimStore from '@/store/modules/bim';
|
import bimStore from '@/store/modules/bim';
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
|
import Bus from '@/utils/bus.js';
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
sceneUrl: '/jz/glb/scene.gltf',
|
sceneUrl: '/jz/glb/scene.gltf',
|
||||||
equimentInfo: {},
|
equimentInfo: {},
|
||||||
|
@ -78,6 +79,11 @@ const deviceInfo = computed(() =>
|
||||||
bimStore().activateTree.deviceInfo
|
bimStore().activateTree.deviceInfo
|
||||||
);
|
);
|
||||||
|
|
||||||
|
Bus.on('viewMore', (title) => {
|
||||||
|
// Todo
|
||||||
|
title === '资产信息' ? dialogVisible.value = true : dialogVisible1.value = true;;
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const onReady = () => {
|
const onReady = () => {
|
||||||
|
@ -89,6 +95,16 @@ const onError = () => {
|
||||||
const onProgress = () => {
|
const onProgress = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleRightClick = (obj) => {
|
||||||
|
console.log(1,obj.name);
|
||||||
|
if(obj.name == 'set1' || obj.name == 'set6') {
|
||||||
|
bimStore().setDeviceNum(obj.name);
|
||||||
|
dialogVisible2.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// viewDetail();
|
||||||
|
}
|
||||||
|
|
||||||
const handleBuildClick = (value, isParent) => {
|
const handleBuildClick = (value, isParent) => {
|
||||||
// 点击父级,加载/切换场景
|
// 点击父级,加载/切换场景
|
||||||
if (isParent) {
|
if (isParent) {
|
||||||
|
@ -110,16 +126,12 @@ const handleApplicationClick = (value) => {
|
||||||
const changeMenu = (index) => {
|
const changeMenu = (index) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const openDialog = () => {
|
|
||||||
dialogVisible.value = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
const openDialog1 = () => {
|
const openDialog1 = () => {
|
||||||
dialogVisible1.value = true;
|
dialogVisible1.value = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
const viewDetail = (val) => {
|
const viewDetail = (val) => {
|
||||||
console.log(val);
|
|
||||||
dialogVisible2.value = true;
|
dialogVisible2.value = true;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -23,6 +23,12 @@ const getCharts = () => {
|
||||||
dom.removeAttribute('_echarts_instance_')
|
dom.removeAttribute('_echarts_instance_')
|
||||||
var myChart = echarts.init(dom);
|
var myChart = echarts.init(dom);
|
||||||
var option = {
|
var option = {
|
||||||
|
title: {
|
||||||
|
text: '资产维修情况',
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "item",
|
trigger: "item",
|
||||||
confine: true, //浮窗限制在图表内
|
confine: true, //浮窗限制在图表内
|
||||||
|
@ -61,11 +67,12 @@ const getCharts = () => {
|
||||||
elements: [
|
elements: [
|
||||||
{
|
{
|
||||||
type: "text",
|
type: "text",
|
||||||
left: "27%",
|
left: "16%",
|
||||||
top: "middle",
|
top: "middle",
|
||||||
style: {
|
style: {
|
||||||
text: total + "\n" + "总数",
|
text: " " + total + "\n" + "总报修数",
|
||||||
fill: "#fff",
|
fill: "#fff",
|
||||||
|
fontSize: 24
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
@ -78,10 +85,10 @@ const getCharts = () => {
|
||||||
itemHeight: 5,
|
itemHeight: 5,
|
||||||
orient: "vertical",
|
orient: "vertical",
|
||||||
itemGap: 30,
|
itemGap: 30,
|
||||||
data: ["数据一"],
|
data: ["未维修"],
|
||||||
formatter: () => {
|
formatter: () => {
|
||||||
const arr = [
|
const arr = [
|
||||||
"{b|" + "数据一" + "}\xa0\xa0\xa0",
|
"{b|" + "未维修" + "}\xa0\xa0\xa0",
|
||||||
"{a|" + wei + "}\xa0\xa0\xa0\xa0",
|
"{a|" + wei + "}\xa0\xa0\xa0\xa0",
|
||||||
];
|
];
|
||||||
return arr.join("");
|
return arr.join("");
|
||||||
|
@ -106,10 +113,10 @@ const getCharts = () => {
|
||||||
itemHeight: 5,
|
itemHeight: 5,
|
||||||
orient: "vertical",
|
orient: "vertical",
|
||||||
itemGap: 30,
|
itemGap: 30,
|
||||||
data: ["数据二"],
|
data: ["已维修"],
|
||||||
formatter: () => {
|
formatter: () => {
|
||||||
const arr = [
|
const arr = [
|
||||||
"{b|" + "数据二" + "}\xa0\xa0\xa0",
|
"{b|" + "已维修" + "}\xa0\xa0\xa0",
|
||||||
"{a|" + yi + "}\xa0\xa0\xa0\xa0",
|
"{a|" + yi + "}\xa0\xa0\xa0\xa0",
|
||||||
];
|
];
|
||||||
return arr.join("");
|
return arr.join("");
|
||||||
|
@ -134,10 +141,10 @@ const getCharts = () => {
|
||||||
itemHeight: 5,
|
itemHeight: 5,
|
||||||
orient: "vertical",
|
orient: "vertical",
|
||||||
itemGap: 30,
|
itemGap: 30,
|
||||||
data: ["数据三"],
|
data: ["维修中"],
|
||||||
formatter: () => {
|
formatter: () => {
|
||||||
const arr = [
|
const arr = [
|
||||||
"{b|" + "数据三" + "}\xa0\xa0\xa0",
|
"{b|" + "维修中" + "}\xa0\xa0\xa0",
|
||||||
"{a|" + doing + "}\xa0\xa0\xa0\xa0",
|
"{a|" + doing + "}\xa0\xa0\xa0\xa0",
|
||||||
];
|
];
|
||||||
return arr.join("");
|
return arr.join("");
|
||||||
|
@ -178,7 +185,7 @@ const getCharts = () => {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: wei,
|
value: wei,
|
||||||
name: "数据一",
|
name: "未维修",
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderRadius: 10,
|
borderRadius: 10,
|
||||||
color: "#FD2525",
|
color: "#FD2525",
|
||||||
|
@ -187,7 +194,7 @@ const getCharts = () => {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: yi,
|
value: yi,
|
||||||
name: "数据二",
|
name: "已维修",
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: "#1f5189",
|
color: "#1f5189",
|
||||||
opacity: 0.6,
|
opacity: 0.6,
|
||||||
|
@ -195,7 +202,7 @@ const getCharts = () => {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: doing,
|
value: doing,
|
||||||
name: "数据三",
|
name: "维修中",
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: "#e7bf69",
|
color: "#e7bf69",
|
||||||
opacity: 0.8,
|
opacity: 0.8,
|
||||||
|
@ -221,7 +228,7 @@ const getCharts = () => {
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: wei,
|
value: wei,
|
||||||
name: "数据一",
|
name: "未维修",
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: "#aa2b3d",
|
color: "#aa2b3d",
|
||||||
},
|
},
|
||||||
|
@ -229,7 +236,7 @@ const getCharts = () => {
|
||||||
|
|
||||||
{
|
{
|
||||||
value: yi,
|
value: yi,
|
||||||
name: "数据二",
|
name: "已维修",
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: "#1f5189",
|
color: "#1f5189",
|
||||||
},
|
},
|
||||||
|
@ -237,7 +244,7 @@ const getCharts = () => {
|
||||||
|
|
||||||
{
|
{
|
||||||
value: doing,
|
value: doing,
|
||||||
name: "数据三",
|
name: "维修中",
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: "#655e64",
|
color: "#655e64",
|
||||||
},
|
},
|
||||||
|
|
|
@ -21,7 +21,10 @@ const getCharts = () => {
|
||||||
var myChart = echarts.init(dom);
|
var myChart = echarts.init(dom);
|
||||||
let option = {
|
let option = {
|
||||||
title: {
|
title: {
|
||||||
text: ''
|
text: '资产巡检间隔时长',
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
|
@ -30,6 +33,7 @@ const getCharts = () => {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
|
bottom: 0,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#ffff",
|
color: "#ffff",
|
||||||
fontFamily: "Alibaba PuHuiTi",
|
fontFamily: "Alibaba PuHuiTi",
|
||||||
|
@ -40,7 +44,7 @@ const getCharts = () => {
|
||||||
grid: {
|
grid: {
|
||||||
left: '15%',
|
left: '15%',
|
||||||
right: '4%',
|
right: '4%',
|
||||||
bottom: '5%'
|
bottom: '12%'
|
||||||
},
|
},
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
|
|