wangqiujuan0808
/
bw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

代码暂存

main
wangqiujuan0808 2023-12-15 10:42:57 +08:00
parent 17f5c92260
commit cedebdbf3c
15 changed files with 168 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
src/assets/images/licang.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 MiB

6
src/views/bim/bimHome/components/BasicInfo.vue
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: {},

4
src/views/bim/bimHome/components/DeviceDetial.vue
View File

@ -19,7 +19,7 @@ import { ElMessage } from 'element-plus';
const deviceData = { const deviceData = {
'EQ0001': { 'EQ0001': {
name: '立仓', name: '立仓',
imgUlr: '', imgUrl: 'licang',
detail: [ detail: [
{ {
name: '资产名称', name: '资产名称',
@ -77,7 +77,7 @@ const deviceData = {
}, },
'EQ0002': { 'EQ0002': {
name: '过滤槽', name: '过滤槽',
imgUlr: '', imgUrl: 'guolvcao',
detail: [ detail: [
{ {
name: '资产名称', name: '资产名称',

10
src/views/bim/bimHome/components/DeviceEvent.vue
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'

22
src/views/bim/bimHome/components/DeviceInfo.vue
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;
} }
} }

6
src/views/bim/bimHome/components/DevicePie.vue
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>

31
src/views/bim/bimHome/components/DeviceTree.vue
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,7 +49,11 @@ const data = reactive({
info: { info: {
name: '立仓', name: '立仓',
type: '生产设备', type: '生产设备',
status: '启用' status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2028-10-15'
}, },
children: [] children: []
@ -58,7 +65,10 @@ const data = reactive({
info: { info: {
name: '过滤槽', name: '过滤槽',
type: '生产设备', type: '生产设备',
status: '启用' status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2067-12-30'
}, },
children: [] children: []
@ -70,7 +80,10 @@ const data = reactive({
info: { info: {
name: '设备二', name: '设备二',
type: '生产设备', type: '生产设备',
status: '启用' status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2025-12-15'
}, },
children: [] children: []
}, },
@ -81,7 +94,10 @@ const data = reactive({
info: { info: {
name: '设备三', name: '设备三',
type: '空调设备', type: '空调设备',
status: '启用' status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2025-12-15'
}, },
children: [] children: []
}, },
@ -92,7 +108,10 @@ const data = reactive({
info: { info: {
name: '设备四', name: '设备四',
type: '安防设备', type: '安防设备',
status: '启用' status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2025-12-15'
}, },
children: [] children: []
}, },

30
src/views/bim/bimHome/components/EquipmentInfo.vue
View File

@ -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>
@ -25,8 +37,11 @@ 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>

29
src/views/bim/bimHome/components/RealInfoDialog.vue
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;
} }

11
src/views/bim/bimHome/components/ThreeView2.vue
View File

@ -396,8 +396,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;
@ -406,10 +406,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;

23
src/views/bim/bimHome/components/TopDiv.vue
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>

13
src/views/bim/bimHome/index.vue
View File

@ -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 = () => {
@ -110,9 +116,6 @@ const handleApplicationClick = (value) => {
const changeMenu = (index) => { const changeMenu = (index) => {
} }
const openDialog = () => {
dialogVisible.value = true;
}
const openDialog1 = () => { const openDialog1 = () => {
dialogVisible1.value = true; dialogVisible1.value = true;

35
src/views/components/Pie.vue
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",
}, },

8
src/views/components/xtBar.vue
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: [
{ {