wangqiujuan0808 2023-12-15 19:43:23 +08:00
commit bebbe51b73
36 changed files with 141807 additions and 662668 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 MiB

View File

@ -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
}
}

Binary file not shown.

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 194 KiB

Binary file not shown.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

BIN
public/yg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
public/ygr.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
src/assets/images/cao.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 MiB

View File

@ -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()
} }

View File

@ -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>

View File

@ -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: {},

View File

@ -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;
} }
} }

View File

@ -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;

View File

@ -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: '资产名称',

View File

@ -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'

View File

@ -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;
} }
} }

View File

@ -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"
} }

View File

@ -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;

View File

@ -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;

View File

@ -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>

View File

@ -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 = [
{ {

View File

@ -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;
} }

View File

@ -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); //tagobj
}
</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>

View File

@ -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>

View File

@ -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>

View File

@ -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",
}, },

View File

@ -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: [
{ {