..

package.json

@@ -21,9 +21,10 @@
     "@vueuse/core": "9.5.0",
     "axios": "0.27.2",
     "dayjs": "^1.11.10",
-    "element-plus": "2.2.27",
     "echarts": "^5.2.2",
     "echarts-gl": "^2.0.9",
+    "echarts-liquidfill": "^3.1.0",
+    "element-plus": "2.2.27",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",
     "js-cookie": "3.0.1",

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

@@ -17,24 +17,166 @@
         </div>
         <div class="bottom-div">
             <div class="left-div">
-
+                <div id="echartDiv"></div>
+                <div class="span-div">健康度</div>
             </div>
             <div class="right-div">
-                <img src="@/assets/images/1.png" alt="" width="100%">
+                <div class="select-date">
+                    <el-date-picker v-model="value" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间"
+                        :default-time="defaultTime" />
+                </div>
+                <div class="time-line">
+                    <el-timeline class="timeline">
+                        <el-timeline-item v-for="(activity, index) in activities" :key="index" placement="top"
+                            :icon="activity.icon" :type="activity.type" :size="activity.size"
+                            :class="{ 'isoodClass': index % 2 == 0 }">
+                            <slot name="timestamp">
+                                <div class="timestamp">
+                                    <span class="time">{{ activity.time }}</span>
+                                    <span class="time-stamp">{{ activity.timestamp }}</span>
+                                </div>
+
+                            </slot>
+                            <el-card :style="{ 'background': activity.color }">
+                                {{ activity.content }}
+                            </el-card>
+
+                        </el-timeline-item>
+                    </el-timeline>
+                </div>
             </div>
         </div>
     </div>
 </template>
 <script setup>
+import * as echarts from "echarts";
+import 'echarts-liquidfill/src/liquidFill.js';
 import bimStore from '@/store/modules/bim';
+import { MoreFilled, Warning } from '@element-plus/icons-vue';
+const value = ref(["2023-11-30T16:00:00.000Z", "2023-12-31T15:59:59.000Z"])
+const defaultTime = ref([
+    new Date(2000, 1, 1, 0, 0, 0),
+    new Date(2000, 2, 1, 23, 59, 59),
+])
 const data = reactive({
-
+    activities: [
+        {
+            content: '设备完成巡检计划',
+            time: '2023年',
+            timestamp: '12月3日',
+            color: '#0bbd87',
+            icon: MoreFilled,
+            type: 'primary',
+            size: 'large'
+        },
+        {
+            content: '设备发生故障：电流过大',
+            time: '2023年',
+            timestamp: '12月5日',
+            color: '#e54c44',
+            type: 'danger',
+            icon: Warning,
+            size: 'large'
+        },
+        {
+            content: '设备保养周期剩余3天',
+            time: '2023年',
+            timestamp: '12月6日',
+            color: '#31bdb4',
+            icon: MoreFilled,
+            type: 'primary',
+            size: 'large'
+        },
+        {
+            content: '设备完成巡检计划',
+            time: '2023年',
+            timestamp: '12月20日',
+            color: '#0bbd87',
+            icon: MoreFilled,
+            type: 'primary',
+            size: 'large'
+        },
+        {
+            content: '设备发生故障：电流过大',
+            time: '2023年',
+            timestamp: '12月23日',
+            color: '#e54c44',
+            type: 'danger',
+            icon: Warning,
+            size: 'large'
+        },
+    ]
 });
+const { activities } = toRefs(data);
 
 const deviceInfo = computed(() =>
     bimStore().activateDevice.info
 );
 
+onMounted(() => {
+    nextTick(() => {
+        getEchart();
+    })
+})
+
+
+const getEchart = () => {
+    var dom = document.getElementById('echartDiv');
+    if (dom) {
+        var myChart = echarts.init(dom);
+        const series = [
+            {
+                type: 'liquidFill',
+                shape: 'circle',
+                radius: '80%',
+                center: ['50%', '50%'],
+                data: [0.6, 0.5, 0.4],
+                // 球体配置
+                outline: {
+                    borderDistance: 0,
+                    itemStyle: {
+                        borderWidth: 2,
+                        borderColor: '#3dfff6',
+                        shadowBlur: 20,
+                        shadowColor: '#12786f'
+                    }
+                },
+                color: ['rgba(50, 255, 238, .6)', 'rgba(154, 255, 247, .6)'],
+                backgroundStyle: {
+                    color: 'transparent',
+                },
+
+                label: {
+                    show: true,
+                    textStyle: {
+                        color: '#12786f',
+                        insideColor: '#12786f',
+                        fontSize: 28
+                    }
+                },
+                label: {
+                    show: true,
+                    textStyle: {
+                        color: '#12786f',
+                        insideColor: '#12786f',
+                        fontSize: 40
+                    },
+                    formatter: params => {
+                        return `${(params.value * 100).toFixed(0)}%`
+                    },
+                    rich: {
+                        a: {
+                            fontSize: 24,
+                        }
+                    }
+                }
+            },
+        ]
+        const option = { series, backgroundColor: '#ffffff' }
+        option && myChart.setOption(option);
+    }
+}
+
 </script>
 <style lang="scss" scoped>
 .realInfoDialog {
@@ -50,16 +192,19 @@ const deviceInfo = computed(() =>
         display: flex;
         flex-direction: column;
         align-items: center;
+
         >div {
             display: flex;
             line-height: 48px;
             width: 240px;
             justify-content: space-between;
         }
+
         .name {
             width: 45%;
             text-align: right;
         }
+
         .text {
             width: 45%;
             text-align: left;
@@ -76,14 +221,84 @@ const deviceInfo = computed(() =>
             width: 20%;
             height: 100%;
             border: 1px solid #3cbfdf;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            #echartDiv {
+                height: 60%;
+                width:95%;
+            }
+            .span-div {
+                padding: 5px 25px;
+                background: #3cbfdf;
+                border-radius: 15px;
+                color:#fff;
+            }
         }
 
         .right-div {
             width: 79%;
             height: 100%;
             border: 1px solid #3cbfdf;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+
+            >div {
+                padding: 10px;
+            }
+
+            .select-date {
+                height: 10%;
+                text-align: right;
+            }
+
+            .time-line {
+                height: 88%;
+
+                .timeline {
+                    display: flex;
+                    width: 95%;
+                    margin: 150px auto;
+
+                    .lineitem {
+                        transform: translateX(50%);
+                        width: 25%;
                     }
                 }
 
+                :deep(.el-timeline-item__tail) {
+                    border-left: none;
+                    border-top: 2px solid #e4e7ed;
+                    width: 100%;
+                    // position: absolute;
+                    top: 6px;
                 }
-</style>
+
+                :deep(.el-timeline-item__wrapper) {
+                    padding-left: 0;
+                    // position: absolute;
+                    top: 20px;
+                    transform: translateX(-50%);
+                    text-align: center;
+                    width: 150px;
+                    margin: 0 10px;
+                }
+
+                .isoodClass {
+                    :deep(.el-timeline-item__wrapper) {
+                        top: -120px !important;
+                    }
+                }
+
+
+                :deep(.el-timeline-item__timestamp) {
+                    font-size: 14px;
+                }
+
+            }
+        }
+    }
+
+}</style>