添加页面

ui/src/router/index.js

@@ -73,7 +73,7 @@ export const constantRoutes = [
   },
   {
     path: '/pptyulan',
-    name:'pptyulan',
+    name: 'pptyulan',
     component: (resolve) => require(['@/views/yulan/index'], resolve),
     hidden: true
   },
@@ -160,7 +160,8 @@ export const constantRoutes = [
         path: 'rcaudit',
         component: (resolve) => require(['@/views/ehs/rcaudit/index'], resolve),
         name: 'Rcaudit',
-        meta: { title: 'RC审计助手',
+        meta: {
+          title: 'RC审计助手',
           keepAlive: true,
           scrollTop: 0,
         }
@@ -595,6 +596,22 @@ export const constantRoutes = [
     ]
   },
 
+  //生产运行子页面
+  {
+    path: '/produce',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: 'materialChild1',
+        component: (resolve) => require(['@/views/monitor/materialChild/materialChild1.vue'], resolve),
+        name: 'model1',
+        hidden: true,
+        meta: { title: '工艺流程图' }
+      },
+    ]
+  },
+
   // 2023-02 首页重构
   {
     path: '/BCCdashboardNew',

ui/src/views/monitor/materialChild/materialChild1.vue

@@ -0,0 +1,135 @@
+<template>
+  <div id="material_child1">
+    <!-- 页面标题 -->
+    <div class="material_title">
+      <div class="d-flex">
+        <img src="@/assets/materialImg/title.png" alt="">
+      </div>
+    </div>
+    <!-- 返回按钮 -->
+    <img src="@/assets/materialImg/returnHistory.png" alt="" class="material_btn">
+
+    <!-- 图片 -->
+    <img src="@/assets/materialImg/stove.png" alt="" class="stoveImg">
+    <img src="@/assets/materialImg/quip.png" alt="" class="quipImg">
+    <img src="@/assets/materialImg/MTop.png" alt="" class="MImg1">
+    <img src="@/assets/materialImg/MTop.png" alt="" class="MImg2">
+    <img src="@/assets/materialImg/MLeft.png" alt="" class="MImg3">
+    <img src="@/assets/materialImg/MLeft.png" alt="" class="MImg4">
+    <img src="@/assets/materialImg/node.png" alt="" class="nodeImg1">
+    <img src="@/assets/materialImg/node.png" alt="" class="nodeImg2">
+    <!-- 文字 -->
+    <div class="label label_p1">石脑油进料</div>
+    <div class="label label_p2">石脑油进料</div>
+    <div class="label label_p3">900A/B/C</div>
+    <!-- 流程线及动效 -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: "material_child1",
+  data() {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+#material_child1 {
+  width: 1270px;
+  height: 750px;
+
+  .material_title {
+    position: absolute;
+    top: 31px;
+    left: 50%
+  }
+
+  .material_btn {
+    position: absolute;
+    width: 158px;
+    height: 53px;
+    top: 69px;
+    left: 54px;
+    cursor: pointer;
+  }
+
+  .stoveImg {
+    position: absolute;
+    top: 132px;
+    left: 1058px;
+  }
+
+  .quipImg {
+    position: absolute;
+    top: 389px;
+    left: 701px;
+  }
+
+  .MImg1 {
+    position: absolute;
+    top: 580px;
+    left: 437px;
+  }
+
+  .MImg2 {
+    position: absolute;
+    top: 885px;
+    left: 437px;
+  }
+
+  .MImg3 {
+    position: absolute;
+    top: 703px;
+    left: 447px;
+  }
+
+  .MImg4 {
+    position: absolute;
+    top: 836px;
+    left: 447px;
+  }
+
+  .nodeImg1 {
+    position: absolute;
+    top: 620px;
+    left: 594px;
+  }
+
+  .nodeImg2 {
+    position: absolute;
+    top: 925px;
+    left: 594px;
+  }
+
+
+  // 文字样式
+  .label {
+    position: absolute;
+    font-family: 'Source Han Sans CN';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 27px;
+    color: #002063;
+  }
+
+  .label_p1 {
+    top: 267px;
+    left: 297px;
+  }
+
+  .label_p2 {
+    top: 358px;
+    left: 395px;
+  }
+
+  .label_p3 {
+    top: 374px;
+    left: 246px;
+  }
+}
+</style>