update

src/views/Exhibition/CIFM/child.vue

@@ -1,13 +1,59 @@
 <template>
-  <div class="container">
+    <div class="container">
         <div class="header">
             <div class="title">
-                <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'床垫生产线物联管理系统'" :titleTip="[]"
+                <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'再登工况物联管理系统'" :titleTip="[]"
-                    :typeFun="['time']" :alarmType="[]"></header2>
+                    :typeFun="['time','comback']" :alarmType="[]"></header2>
             </div>
         </div>
         <div class="content">
-            
+            <div class="left">
+                <div class="ltop">
+                    <BorderView :title="'工作速度'">
+                        <div class="box-lt">
+                            <div class="pie">
+                                <span>200</span>
+                                <span>rpm/min</span>
+                            </div>
+                        </div>
+
+                    </BorderView>
+                </div>
+                <div class="lbottom">
+                    <BorderView :title="'订单完成量'">
+                        <DynamicChart style="width: 100%;height: 100%;" :optionData="optionData">
+                        </DynamicChart>
+                    </BorderView>
+                </div>
+            </div>
+            <div class="center">
+                <BorderView :title="'设备状态总览'">
+                    <ItemCard :mjxhj_data="mjxhj_data"></ItemCard>
+                </BorderView>
+            </div>
+            <div class="right">
+                <div class="rtop">
+                    <BorderView :title="'维护保养'">
+                        <ZdScrollBoard ref="devList" class="dev-list" :config="config" />
+                    </BorderView>
+                </div>
+                <div class="rbottom">
+                    <BorderView :title="'生产报警'">
+                        <div class="rb-box">
+                            <div class="svg-box">
+                                <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 1024 1024"
+                                    data-v-ea893728="" class="WarnTriangleFilled">
+                                    <path fill="currentColor"
+                                        d="M928.99 755.83 574.6 203.25c-12.89-20.16-36.76-32.58-62.6-32.58s-49.71 12.43-62.6 32.58L95.01 755.83c-12.91 20.12-12.9 44.91.01 65.03 12.92 20.12 36.78 32.51 62.59 32.49h708.78c25.82.01 49.68-12.37 62.59-32.49 12.91-20.12 12.92-44.91.01-65.03M554.67 768h-85.33v-85.33h85.33zm0-426.67v298.66h-85.33V341.32z">
+                                    </path>
+                                </svg>
+                            </div>
+                            <div>暂无报警信息</div>
+
+                        </div>
+                    </BorderView>
+                </div>
+            </div>
         </div>
         <div class="left-tip-type">
             <div class="left-tip-type-item">
@@ -28,8 +74,81 @@
 
 <script setup lang='ts'>
 import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } from 'vue'
+import ZdScrollBoard from "@/components/data-view/index.vue";
 import header2 from './components/header2.vue'
 import BorderView from './components/Border.vue'
+import DynamicChart from './components/DynamicChart.vue'
+import ItemCard from './components/ItemCard.vue'
+
+let xData = ref(['订单任务量', '任务完成量'])
+let series = ref([{
+    name: '完成量',
+    type: 'bar',
+    data: [200, 300]
+}])
+let mjxhj_data = reactive([
+    { key: '机架号', value: '102014422' },
+    { key: '设备状态', value: 2 },
+    { key: '稼动率', value: '90%' },
+    { key: '工作时长', value: '0min' },
+])
+let config = reactive({
+    header: ['序号', '类型', '日期', '状态', '操作人员'],//, '故障率'
+    headerBGC: 'transparent',
+    oddRowBGC: 'transparent',
+    evenRowBGC: 'transparent',
+    wrap: [false, false, false, false, false],
+    columnWidth: [80, 150, 145, 110, 110, 185],
+    align: ['center', 'center', 'center', 'center', 'center', 'center'],
+    rowNum: 5,
+    waitTime: 3000,
+    data: [
+        [1, '保养', '2024-03-10', '完成', '1001'],
+        [2, '机头保养', '2024-03-08', '完成', '1002'],
+        [3, '电机保养', '2024-03-01', '完成', '1003'],
+        [4, '保养', '2024-02-26', '完成', '1001'],
+        [5, '机头保养', '2024-02-20', '完成', '1002'],
+        [6, '维护', '2024-02-08', '完成', '1001'],
+    ]
+})
+let optionData = reactive({
+    backgroundColor: 'transparent',
+    legend: {
+        data: ['计划完成', '实际完成'],
+        textStyle: {
+            fontSize: 14
+        },
+
+    },
+    textStyle: {
+        fontSize: 14
+
+    },
+    grid: {
+        left: '80',
+        right: '0',
+        bottom: '40',
+    },
+    color: ['#2FC5D4', '#FEDA81'],
+    xAxis: {
+        type: 'category',
+        data: xData.value,
+        axisLabel: {
+            interval: 0, //控制X轴刻度全部显示
+            // rotate: 45, //倾斜角度
+        },
+    },
+    yAxis: [
+        {
+            type: 'value',
+            name: '产量',
+            axisLabel: {
+                fontSize: 14
+            }
+        }
+    ],
+    series: series.value
+})
 </script>
 
 <style scoped>
@@ -58,6 +177,101 @@ import BorderView from './components/Border.vue'
     box-sizing: border-box;
 }
 
+.left,
+.right {
+    height: 980px;
+    width: 520px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.center {
+    width: 830px;
+    height: 980px;
+    margin: 0 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+
+.ltop {
+    width: 100%;
+    height: 340px;
+}
+
+.box-lt {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.pie {
+    width: 160px;
+    height: 160px;
+    border: #05FCD0 30px solid;
+    border-radius: 50%;
+    color: #C6E4E2;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 30px;
+}
+
+.lbottom {
+    width: 100%;
+    height: calc(100% - 345px);
+}
+
+
+.rtop {
+    width: 100%;
+    height: 485px;
+}
+
+.rbottom {
+    width: 100%;
+    height: 470px;
+}
+
+.rb-box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 24px;
+    color: #A3DDDE;
+}
+
+.svg-box {
+    width: 205px;
+    height: 205px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: #CAD1D9 2px solid;
+    border-radius: 20px;
+    margin-bottom: 20px;
+}
+
+.WarnTriangleFilled {
+    width: 200px;
+    height: 200px;
+
+
+}
+
+.dev-list {
+    width: 100%;
+    height: 100%;
+}
+
 .left-tip-type {
     position: absolute;
     top: 50px;

src/views/Exhibition/CIFM/components/Border.vue

@@ -3,7 +3,7 @@
         <!-- <img class="borderpng" src="" alt=""> -->
         <div class="title">
             <text class="title-text">{{ title }}</text>
-            <div class="hr"></div>
+            <div class="hr" v-if="hr_show"></div>
         </div>
         
         <div class="newboder-content">
@@ -18,6 +18,10 @@ let prop = defineProps({
     title: {
         type: String,
         default: '裁剪设备'
+    },
+    hr_show: {
+        type:Boolean,
+        default: false
     }
 })
 
@@ -52,6 +56,7 @@ let prop = defineProps({
     position: relative;
     width: 100%;
     height: 16%;
+    padding-left: 10%;
     text-align: left;
     font-weight: 400;
     font-style: normal;
@@ -59,7 +64,7 @@ let prop = defineProps({
     color: rgba(0, 255, 255, 0.996078431372549);
     display: flex;
     align-items: center;
-    justify-content: center;
+    /* justify-content: center; */
     
 }
 .hr {

src/views/Exhibition/CIFM/components/DynamicChart.vue

@@ -0,0 +1,40 @@
+<template>
+    <div ref="LChartRef" class="cc"></div>
+</template>
+
+<script setup lang='ts'>
+import { ref, getCurrentInstance, onMounted, watch } from 'vue'
+
+
+const prop = defineProps({
+    optionData: {
+        type: Object,
+        default: {}
+    },
+})
+
+let LChartRef = ref(null);
+const { proxy } = getCurrentInstance() as any;
+let charts = null;
+const setCharts = () => {
+    charts = proxy.$echarts.init(LChartRef.value, 'dark')
+    let option = prop.optionData
+
+    charts.setOption(option);
+}
+
+watch(() => prop.optionData, (newVal, oldVal) => {
+    charts.setOption(newVal);
+}, { deep: true })
+
+onMounted(() => {
+    setCharts()
+})
+</script>
+
+<style scoped>
+.cc {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/Exhibition/CIFM/main.vue

@@ -2,30 +2,30 @@
   <div class="container">
         <div class="header">
             <div class="title">
-                <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'床垫生产线物联管理系统'" :titleTip="[]"
+                <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'再登工况物联管理系统'" :titleTip="[]"
                     :typeFun="['time']" :alarmType="[]"></header2>
             </div>
         </div>
         <div class="content">
             <div class="left">
-                <BorderView :title="'床垫材料缝制设备'">
+                <BorderView :title="'床笠裙边机'" @click="pushTo('床笠裙边机')">
                     <ItemCard :mjxhj_data="mjxhj_data"></ItemCard>
                 </BorderView>
             </div>
             <div class="center">
                 <div class="cc">
-                    <BorderView :title="'设备状态总览'">
+                    <BorderView :title="'电脑绗绣机'" @click="pushTo('床笠裙边机')">
                     <ItemCard :mjxhj_data="mjxhj_data"></ItemCard>
                     </BorderView>
                 </div>
                 <div class="cb">
-                    <BorderView :title="'床垫包装设备'">
+                    <BorderView :title="'电脑绣花机'" @click="pushTo('床笠裙边机')">
                     <ItemCard :mjxhj_data="mjxhj_data"></ItemCard>
                     </BorderView>
                 </div>
             </div>
             <div class="right">
-                <BorderView :title="'床垫生产线设备'">
+                <BorderView :title="'零等待皮革缝纫机'" @click="pushTo('床笠裙边机')">
                 </BorderView>
             </div>
         </div>
@@ -51,8 +51,9 @@ import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch, onUpd
 import header2 from './components/header2.vue'
 import BorderView from './components/Border.vue'
 import ItemCard from './components/ItemCard.vue'
+import {useRouter} from 'vue-router'
 
-
+let router = useRouter()
 
 
 let mjxhj_data = reactive([
@@ -61,6 +62,10 @@ let mjxhj_data = reactive([
     { key: '稼动率', value: '90%' },
     { key: '工作时长', value: '0min' },
 ])
+
+function pushTo(val){
+    router.push({path:`/CIFMExhibitionMain_${val}`})
+}
 </script>
 
 <style scoped>