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 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>
</div>
</div>
</template>
<script setup>
import licang from '@/assets/images/licang.jpg';
import guolvcao from '@/assets/images/cao.jpg';
const props = defineProps({
infoList: {
default: {},

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

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

10
src/views/bim/bimHome/components/DeviceEvent.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="deviceDiv">
<TopDiv title="资产事件"></TopDiv>
<TopDiv title="资产事件" showMore="true"></TopDiv>
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
<el-timeline>
<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>
</dv-border-box-10>
<div class="box-button" @click="openDialog">
</div>
<!-- <div class="box-button" @click="openDialog">
</div> -->
</div>
</template>
<script setup>
@ -33,7 +33,7 @@ const data = reactive({
content: '设备完成巡检计划',
time: '下午',
timestamp: '20:46',
color: '#87efd0e9',
color: '#08326f',
icon: MoreFilled,
type: 'primary',
size: 'large'
@ -51,7 +51,7 @@ const data = reactive({
content: '设备保养周期剩余3天',
time: '上午',
timestamp: '11:46',
color: '#6eebe3',
color: '#02a7f0',
icon: MoreFilled,
type: 'primary',
size: 'large'

22
src/views/bim/bimHome/components/DeviceInfo.vue
View File

@ -3,17 +3,29 @@
<TopDiv title="资产信息"></TopDiv>
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
<div>
<span class="name">名称</span>
<span class="name">资产名称</span>
<span class="text">{{ deviceInfo && deviceInfo.name }}</span>
</div>
<div>
<span class="name">类型</span>
<span class="name">资产类型</span>
<span class="text">{{ deviceInfo && deviceInfo.type }}</span>
</div>
<div>
<span class="name">状态</span>
<span class="name">资产状态</span>
<span class="text">{{ deviceInfo && deviceInfo.status }}</span>
</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>
</div>
</template>
@ -50,11 +62,11 @@ watch(() => bimStore().activateDevice.info, value => deviceInfo.value = value);
}
.name {
width: 25%;
width: 40%;
}
.text {
width: 75%;
width: 59%;
color: #fff;
}
}

6
src/views/bim/bimHome/components/DevicePie.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="deviceDiv">
<TopDiv title="资产信息"></TopDiv>
<TopDiv title="资产信息" showMore="true"></TopDiv>
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
<!-- <div class="container1">
@ -10,8 +10,8 @@
</div>
</dv-border-box-10>
<div class="box-button" @click="openDialog">
</div>
<!-- <div class="box-button" @click="openDialog">
</div> -->
</div>
</template>
<script setup>

31
src/views/bim/bimHome/components/DeviceTree.vue
View File

@ -36,7 +36,10 @@ const data = reactive({
info: {
name: '生产设备',
type: '生产设备',
status: '启用'
status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2025-12-15'
},
children: [
{
@ -46,7 +49,11 @@ const data = reactive({
info: {
name: '立仓',
type: '生产设备',
status: '启用'
status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2028-10-15'
},
children: []
@ -58,7 +65,10 @@ const data = reactive({
info: {
name: '过滤槽',
type: '生产设备',
status: '启用'
status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2067-12-30'
},
children: []
@ -70,7 +80,10 @@ const data = reactive({
info: {
name: '设备二',
type: '生产设备',
status: '启用'
status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2025-12-15'
},
children: []
},
@ -81,7 +94,10 @@ const data = reactive({
info: {
name: '设备三',
type: '空调设备',
status: '启用'
status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2025-12-15'
},
children: []
},
@ -92,7 +108,10 @@ const data = reactive({
info: {
name: '设备四',
type: '安防设备',
status: '启用'
status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2025-12-15'
},
children: []
},

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

@ -15,6 +15,18 @@
<span class="name">设备状态</span>
<span class="text">{{ equipmentInfo.status }}</span>
</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>
</div>
</template>
@ -22,11 +34,14 @@
import bimStore from '@/store/modules/bim';
import TopDiv from "./TopDiv.vue";
const data = reactive({
equipmentInfo: {
name: '空调机组',
number: 'AHU-F01-02',
status:'启用',
}
equipmentInfo: {
name: '空调机组',
number: 'AHU-F01-02',
status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2025-12-15'
}
});
const { equipmentInfo } = toRefs(data);
@ -44,20 +59,23 @@ const { equipmentInfo } = toRefs(data);
flex-direction: column;
align-items: center;
color: #3cbfdf;
:deep(.border-box-content) {
padding: 10px;
>div {
line-height: 48px;
display: flex;
justify-content: space-between;
}
.name {
width: 35%;
width: 40%;
}
.text {
width: 56%;
width: 59%;
color: #fff;
}
}
}
</style>
}</style>

29
src/views/bim/bimHome/components/RealInfoDialog.vue
View File

@ -2,17 +2,29 @@
<div class="realInfoDialog">
<div class="top-div">
<div>
<span class="name">名称:</span>
<span class="name">资产名称:</span>
<span class="text">{{ deviceInfo && deviceInfo.name }}</span>
</div>
<div>
<span class="name">类型:</span>
<span class="name">资产类型:</span>
<span class="text">{{ deviceInfo && deviceInfo.type }}</span>
</div>
<div>
<span class="name">状态:</span>
<span class="name">资产状态:</span>
<span class="text">{{ deviceInfo && deviceInfo.status }}</span>
</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 class="bottom-div">
@ -64,7 +76,7 @@ const data = reactive({
content: '设备完成巡检计划',
time: '2023年',
timestamp: '12月3日',
color: '#87efd0e9',
color: '#08326f',
icon: MoreFilled,
type: 'primary',
size: 'large'
@ -82,7 +94,7 @@ const data = reactive({
content: '设备保养周期剩余3天',
time: '2023年',
timestamp: '12月6日',
color: '#6eebe3',
color: '#02a7f0',
icon: MoreFilled,
type: 'primary',
size: 'large'
@ -91,7 +103,7 @@ const data = reactive({
content: '设备完成巡检计划',
time: '2023年',
timestamp: '12月20日',
color: '#87efd0e9',
color: '#08326f',
icon: MoreFilled,
type: 'primary',
size: 'large'
@ -191,13 +203,14 @@ const getEchart = () => {
height: 25%;
border: 1px solid #2E6099;
display: flex;
flex-direction: column;
// flex-direction: column;
align-items: center;
flex-wrap: wrap;
>div {
display: flex;
line-height: 48px;
width: 240px;
width: 33%;
justify-content: space-between;
}

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

@ -396,8 +396,8 @@ const setBottom = () => {
.btnGroup {
width: 180px;
position: absolute;
left: 0px;
bottom: 40px;
left: 260px;
top: 10px;
z-index: 999;
display: flex;
flex-direction: column;
@ -406,10 +406,11 @@ const setBottom = () => {
>div {
cursor: pointer;
background: #477efa;
width: 120px;
// background: #0549a7;
border: 1px solid #3cbfdf;
width: 110px;
height: 40px;
border-radius: 0 50px 50px 0;
border-radius: 5px;
line-height: 40px;
text-align: center;
margin-top: 10px;

23
src/views/bim/bimHome/components/TopDiv.vue
View File

@ -1,14 +1,28 @@
<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>
<script setup>
import Bus from '@/utils/bus.js';
const props = defineProps({
title: { //
default: '建筑信息',
type: String
},
showMore: {
default: false,
type: Boolean
}
})
const emit = defineEmits(['viewMore'])
const viewMore = () => {
Bus.emit('viewMore', props.title);
}
</script>
<style lang="scss" scoped>
.top-div {
@ -21,6 +35,11 @@ const props = defineProps({
margin-bottom: 5px;
padding-left: 24px;
color: #fff;
font-weight: 800
font-weight: 800;
justify-content: space-between;
.el-icon {
cursor: pointer;
}
}
</style>

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

@ -10,13 +10,13 @@
<!-- 建筑信息 -->
<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>
<!-- 资产信息 -->
<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>
<!-- 设备信息 -->
@ -56,6 +56,7 @@ import RealInfoDialog from './components/RealInfoDialog.vue';
import DeviceDetial from './components/DeviceDetial.vue';
import bimStore from '@/store/modules/bim';
import { computed } from 'vue';
import Bus from '@/utils/bus.js';
const data = reactive({
sceneUrl: '/jz/glb/scene.gltf',
equimentInfo: {},
@ -78,6 +79,11 @@ const deviceInfo = computed(() =>
bimStore().activateTree.deviceInfo
);
Bus.on('viewMore', (title) => {
// Todo
title === '资产信息' ? dialogVisible.value = true : dialogVisible1.value = true;;
})
const onReady = () => {
@ -110,9 +116,6 @@ const handleApplicationClick = (value) => {
const changeMenu = (index) => {
}
const openDialog = () => {
dialogVisible.value = true;
}
const openDialog1 = () => {
dialogVisible1.value = true;

35
src/views/components/Pie.vue
View File

@ -23,6 +23,12 @@ const getCharts = () => {
dom.removeAttribute('_echarts_instance_')
var myChart = echarts.init(dom);
var option = {
title: {
text: '资产维修情况',
textStyle: {
color: "#fff",
},
},
tooltip: {
trigger: "item",
confine: true, //浮窗限制在图表内
@ -61,11 +67,12 @@ const getCharts = () => {
elements: [
{
type: "text",
left: "27%",
left: "16%",
top: "middle",
style: {
text: total + "\n" + "总数",
text: " " + total + "\n" + "总报修数",
fill: "#fff",
fontSize: 24
},
},
],
@ -78,10 +85,10 @@ const getCharts = () => {
itemHeight: 5,
orient: "vertical",
itemGap: 30,
data: ["数据一"],
data: ["未维修"],
formatter: () => {
const arr = [
"{b|" + "数据一" + "}\xa0\xa0\xa0",
"{b|" + "未维修" + "}\xa0\xa0\xa0",
"{a|" + wei + "}\xa0\xa0\xa0\xa0",
];
return arr.join("");
@ -106,10 +113,10 @@ const getCharts = () => {
itemHeight: 5,
orient: "vertical",
itemGap: 30,
data: ["数据二"],
data: ["已维修"],
formatter: () => {
const arr = [
"{b|" + "数据二" + "}\xa0\xa0\xa0",
"{b|" + "已维修" + "}\xa0\xa0\xa0",
"{a|" + yi + "}\xa0\xa0\xa0\xa0",
];
return arr.join("");
@ -134,10 +141,10 @@ const getCharts = () => {
itemHeight: 5,
orient: "vertical",
itemGap: 30,
data: ["数据三"],
data: ["维修中"],
formatter: () => {
const arr = [
"{b|" + "数据三" + "}\xa0\xa0\xa0",
"{b|" + "维修中" + "}\xa0\xa0\xa0",
"{a|" + doing + "}\xa0\xa0\xa0\xa0",
];
return arr.join("");
@ -178,7 +185,7 @@ const getCharts = () => {
data: [
{
value: wei,
name: "数据一",
name: "未维修",
itemStyle: {
borderRadius: 10,
color: "#FD2525",
@ -187,7 +194,7 @@ const getCharts = () => {
},
{
value: yi,
name: "数据二",
name: "已维修",
itemStyle: {
color: "#1f5189",
opacity: 0.6,
@ -195,7 +202,7 @@ const getCharts = () => {
},
{
value: doing,
name: "数据三",
name: "维修中",
itemStyle: {
color: "#e7bf69",
opacity: 0.8,
@ -221,7 +228,7 @@ const getCharts = () => {
data: [
{
value: wei,
name: "数据一",
name: "未维修",
itemStyle: {
color: "#aa2b3d",
},
@ -229,7 +236,7 @@ const getCharts = () => {
{
value: yi,
name: "数据二",
name: "已维修",
itemStyle: {
color: "#1f5189",
},
@ -237,7 +244,7 @@ const getCharts = () => {
{
value: doing,
name: "数据三",
name: "维修中",
itemStyle: {
color: "#655e64",
},

8
src/views/components/xtBar.vue
View File

@ -21,7 +21,10 @@ const getCharts = () => {
var myChart = echarts.init(dom);
let option = {
title: {
text: ''
text: '资产巡检间隔时长',
textStyle: {
color: "#fff",
},
},
tooltip: {
trigger: 'axis',
@ -30,6 +33,7 @@ const getCharts = () => {
}
},
legend: {
bottom: 0,
textStyle: {
color: "#ffff",
fontFamily: "Alibaba PuHuiTi",
@ -40,7 +44,7 @@ const getCharts = () => {
grid: {
left: '15%',
right: '4%',
bottom: '5%'
bottom: '12%'
},
xAxis: [
{