代码暂存

src/views/bim/bimHome/components/BasicInfo.vue

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

src/views/bim/bimHome/components/DeviceDetial.vue

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

src/views/bim/bimHome/components/DeviceEvent.vue

@@ -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 class="box-button" @click="openDialog">
-        </div>
+        </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'

src/views/bim/bimHome/components/DeviceInfo.vue

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

src/views/bim/bimHome/components/DevicePie.vue

@@ -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 class="box-button" @click="openDialog">
-        </div>
+        </div> -->
     </div>
 </template>
 <script setup>

src/views/bim/bimHome/components/DeviceTree.vue

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

src/views/bim/bimHome/components/EquipmentInfo.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="buildDiv">
-       
+
         <TopDiv title="设备信息"></TopDiv>
         <dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
             <div>
@@ -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: {
+    equipmentInfo: {
-    name: '空调机组',
+        name: '空调机组',
-    number: 'AHU-F01-02',
+        number: 'AHU-F01-02',
-    status:'启用',
+        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>

src/views/bim/bimHome/components/RealInfoDialog.vue

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

src/views/bim/bimHome/components/ThreeView2.vue

@@ -396,8 +396,8 @@ const setBottom = () => {
 .btnGroup {
     width: 180px;
     position: absolute;
-    left: 0px;
+    left: 260px;
-    bottom: 40px;
+    top: 10px;
     z-index: 999;
     display: flex;
     flex-direction: column;
@@ -406,10 +406,11 @@ const setBottom = () => {
 
     >div {
         cursor: pointer;
-        background: #477efa;
+        // background: #0549a7;
-        width: 120px;
+        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;

src/views/bim/bimHome/components/TopDiv.vue

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

src/views/bim/bimHome/index.vue

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

src/views/components/Pie.vue

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

src/views/components/xtBar.vue

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