代码提交

src/view/equipmentAssets.vue

@@ -333,9 +333,6 @@ export default {
     };
   },
   mounted() {
-      window.setTimeout(()=>{
-      this.menuHandelShow()
-      },3400)
   },
   methods: {
     handelBtn(index) {

src/view/index.vue

@@ -215,21 +215,22 @@
       <div class="middleBottomIcon">
       </div>
     </div>
-    <transition name="equimentAssets">
       <equipment-assets ref="equimentAssets" class="equimentAssets" v-show="equimentAssetsShow"/>
-    </transition>
+      <smartPage ref="smartPage" class="smartPage" v-show="smartPageShow"/>
   </div>
   </div>
 </template>
 
 <script>
 import equipmentAssets from "./equipmentAssets.vue";
+import smartPage from "./smartPage.vue";
 export default {
   name: "index",
   data() {
     return {
       menuShow: true, //菜单显示
       equimentAssetsShow: false, //设备资产
+      smartPageShow: false, //智慧
       hallList: [
         {
           font: "平均办理时长",
@@ -410,23 +411,50 @@ export default {
     //菜单切换
     handelBtn(index) {
       this.menuAc = index;
+        let that = this;
       if (index == 0) {
         //如果当前页面为设备资产
         if (this.equimentAssetsShow == true) {
           this.$refs.equimentAssets.menuHandel();
           window.setTimeout(() => {
-            this.equimentAssetsShow = false;
+            that.equimentAssetsShow = false;
-            this.menuShow = true;
+            that.menuShow = true;
+          }, 1500);
+        } else if (this.smartPageShow == true) {
+          this.$refs.smartPage.menuShow1();
+          window.setTimeout(() => {
+            that.smartPageShow = false;
+            that.menuShow = true;
           }, 1500);
         }
       } else if (index == 1) {
+        if (this.menuShow == true) {
+          this.menuShow = false;
+          window.setTimeout(() => {
+            that.smartPageShow = true;
+            that.$refs.smartPage.handleShow();
+          }, 1500);
+        } else if (this.equimentAssetsShow == true) {
+          this.$refs.equimentAssets.menuHandel();
+          window.setTimeout(() => {
+            that.equimentAssetsShow = false;
+            that.smartPageShow = true;
+            this.$refs.smartPage.handleShow();
+          }, 1500);
+        }
       } else if (index == 2) {
-        let that = this;
         if (this.menuShow == true) {
           this.menuShow = false;
           window.setTimeout(() => {
             that.equimentAssetsShow = true;
-            this.$refs.equimentAssets.menuHandelShow();
+            that.$refs.equimentAssets.menuHandelShow();
+          }, 1500);
+        } else if (this.smartPageShow == true) {
+          this.$refs.smartPage.menuShow1();
+          window.setTimeout(() => {
+            that.smartPageShow = false;
+            that.equimentAssetsShow = true;
+            that.$refs.equimentAssets.menuHandelShow();
           }, 1500);
         }
       }
@@ -1612,6 +1640,7 @@ export default {
   },
   components: {
     equipmentAssets,
+    smartPage,
   },
 };
 </script>
@@ -2315,4 +2344,7 @@ export default {
 .equimentAssets {
   position: absolute;
 }
+.smartPage {
+  position: absolute;
+}
 </style>

src/view/smartPage.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="container">
-        <div class="left-content">
+        <transition name="left">
+        <div class="left-content" v-if="!menuShow">
             <!-- 排班管理 -->
             <div class="work-force">
                 <div class="title">
@@ -14,7 +15,7 @@
                 </div>
                 <!-- 当前值班人员 -->
                 <div class="nowWork">
-                    <p class="titleText" text="当前值班人员" style="font-family: maleGod;">
+                    <p class="titleText" text="当前值班人员" style="font-family: maleGod;font-size: 14px;">
                         当前值班人员
                     </p>
                     <div class="work-items">
@@ -34,7 +35,7 @@
                 </div>
                 <!-- 中午值班人员 -->
                 <div class="wuWork">
-                    <p class="titleText" text="中午值班人员" style="font-family: maleGod;">
+                    <p class="titleText" text="中午值班人员" style="font-family: maleGod;font-size: 14px;">
                         中午值班人员
                     </p>
                     <div class="work-items">
@@ -57,7 +58,7 @@
                     </p>
                 </div>
                 <div style="width: 100%;height:calc(100% - 40px)">
-                    <dv-scroll-board :config="config" style="height:100%" />
+                    <dv-scroll-board :config="config" style="height:100%;width:100%" />
                 </div>
             </div>
             <!-- 学习资料 -->
@@ -69,11 +70,13 @@
                 </div>
                 <div style="width: 100%;height:calc(100% - 40px)">
 
-                    <dv-scroll-board :config="studyData" style="height:100%" />
+                    <dv-scroll-board :config="studyData" style="height:100%;width:100%" />
                 </div>
             </div>
         </div>
-        <div class="right-content">
+        </transition>
+        <transition name="right">
+        <div class="right-content" v-if="!menuShow">
             <!-- 任务通知 -->
             <div class="notice">
                 <div class="title">
@@ -83,14 +86,31 @@
                 </div>
                 <!-- 交办的任务 -->
                 <div class="my-notice">
-                    <p class="titleText" text="我交办的任务" style="font-family: maleGod">
+                    <p class="titleText" text="我交办的任务"
+                        style="font-family: maleGod;margin-bottom: 10px;font-size: 14px;">
                         我交办的任务
                     </p>
+                    <div class="myBox">
+                        <div class="noticeBg" v-for="(s, i) in myNotice1">
+                            <section>
+                                <p :class="'p' + i">{{ s.num }}</p>
+                                <p class="name1">{{ s.name }}</p>
+                            </section>
+                        </div>
+                    </div>
                 </div>
                 <div class="jiao-notice">
-                    <p class="titleText" text="我承办的任务" style="font-family: maleGod">
+                    <p class="titleText" text="我承办的任务" style="font-family: maleGod;margin:10px 0 10px;font-size: 14px;">
                         我承办的任务
                     </p>
+                    <div class="myBox">
+                        <div class="noticeBg" v-for="(s, i) in myNotice2">
+                            <section>
+                                <p :class="'p' + i">{{ s.num }}</p>
+                                <p class="name1">{{ s.name }}</p>
+                            </section>
+                        </div>
+                    </div>
                 </div>
 
 
@@ -102,10 +122,38 @@
                         服务
                     </p>
                 </div>
+                <div class="service-event">
+                    <div class="event-item" v-for="(s, i) in serviceList" :key="i">
+                        <p class="event-title">{{ s.name }}</p>
+                        <p>
+                            <span :class="'span' + i">{{ s.num }}</span>
+                            <span class="unit">件</span>
+                        </p>
+                    </div>
+                </div>
+                <p class="titleText" text="疑似不规范的行为" style="font-family: maleGod;margin:10px 0 10px;font-size: 14px;">
+                    疑似不规范的行为
+                </p>
+                <!-- 画面 -->
+                <div class="service-frame">
+                    <div class="frame-item" v-for="(s, i) in serviceFrame">
+                        <div class="frame">
 
                         </div>
+                        <div class="frame-cont">
+                            <ul>
+                                <li>{{ s.time }}</li>
+                                <li>{{ s.adress }}</li>
+                                <li style="color:#ebad22">{{ s.statu1 }}</li>
+                                <li style="color:#0e745c">{{ s.statu2 }}</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
 
         </div>
+        </transition>
     </div>
 </template>
 <script>
@@ -116,6 +164,44 @@ export default {
     },
     data() {
         return {
+            menuShow:true,
+            // 服务画面
+            serviceFrame: [
+                {
+                    time: '2023-02-03 16:23',
+                    adress: '国网雨花营业厅',
+                    statu1: '离岗异常',
+                    statu2: '已办理'
+                },
+                {
+                    time: '2023-02-03 16:23',
+                    adress: '国网雨花营业厅',
+                    statu1: '离岗异常',
+                    statu2: '已办理'
+                },
+                {
+                    time: '2023-02-03 16:23',
+                    adress: '国网雨花营业厅',
+                    statu1: '离岗异常',
+                    statu2: '已办理'
+                }
+            ],
+            // 服务情况事件
+            serviceList: [
+                {
+                    name: '已响应事件',
+                    num: 4
+                },
+                {
+                    name: '未响应事件',
+                    num: 0
+                },
+                {
+                    name: '累计未响应事件',
+                    num: 0
+                }
+            ],
+            // 
             workTime: '',
             config: {
                 header: ['排名', '业务类型', '占比'],
@@ -168,7 +254,7 @@ export default {
             // 我承办的任务
             myNotice2: [{
                 name: '任务总数',
-                num:2,
+                num: 2,
             },
             {
                 name: '已完成',
@@ -180,6 +266,16 @@ export default {
             }
             ]
         }
+    },
+    mounted(){
+    },
+    methods:{
+        handleShow(){
+            this.menuShow = false
+        },
+        menuShow1(){
+            this.menuShow = true
+        }
     }
 }
 </script>
@@ -206,7 +302,6 @@ export default {
     color: #40accd;
     font-size: 14px;
 }
-
 .container {
     width: 100%;
     height: 100%;
@@ -326,10 +421,136 @@ export default {
     // 右边内容
     .notice {
         height: 31.6%;
+
+        .my-notice,
+        .jiao-notice {
+            width: 100%;
+            height:41%;
+            .myBox {
+                display: flex;
+                justify-content: space-around;
+            }
+
+            .p0 {
+                color: #40accd;
+            }
+
+            .noticeBg>section>p:nth-child(1) {
+                font-size: 18px;
+                font-family: maleGod;
+            }
+
+            .noticeBg {
+                background-image: url(../assets/images/notice-item.png);
+                background-size: 100% 100%;
+                width: 123px;
+                height: 68px;
+                text-align: center;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .name1 {
+                    color: #f8fcfd;
+                    font-size: 14px;
+                    margin-top: 5px;
+                }
+
+                .p1 {
+                    color: #54b441
+                }
+
+                .p2 {
+                    color: #b8894b;
+                }
+            }
+        }
+
     }
 
     .service {
         height: 67.5%;
+
+        .service-event {
+            display: flex;
+            justify-content: space-around;
+
+            .event-item>p:nth-child(2) {
+                text-align: center;
+                font-size: 26px;
+
+            }
+
+            .event-item {
+                background-image: url(../assets/images/eventBg.png);
+                width: 116px;
+                height: 73px;
+                padding: 8px;
+                position: relative;
+                box-sizing: border-box;
+                font-size: 14px;
+                color: #f8fcfd;
+
+                .unit {
+                    position: absolute;
+                    bottom: 15px;
+                    right: 10px;
+                    font-size: 14px;
+                }
+
+                .span0,
+                .span1,
+                .span2 {
+                    font-family: maleGod;
+                    color: #40accd
+                }
+            }
+
+        }
+
+        .service-frame {
+            width: 100%;
+            height: calc(100% - 148px);
+
+            .frame-item {
+                background-image: url(../assets/images/undefinedBg.png);
+                background-size: 100% 100%;
+                height: 30%;
+                margin-bottom: 13px;
+                padding: 10px 15px 10px;
+                box-sizing: border-box;
+                width: 100%;
+                display: flex;
+
+                .frame {
+                    background-image: url(../assets/images/frame.png);
+                    background-size: 100% 100%;
+                    height: 100%;
+                    width: 173px;
+                }
+
+                .frame-cont {
+                    // width: calc(100% - 203px);
+                    width:calc(100% - 173px);
+                    ul {
+                        width:100%;
+                        height:100%;
+                        
+                        li{
+                            padding-left:30px;
+                            padding-top:12px;
+                            box-sizing:border-box;
+                            height:22%;
+                            display:flex;
+                            // margin-top:2px;
+                            align-items:center;
+                            font-size:14px;
+                            color:#fff;
+                        }
+                    }
+                }
+            }
+        }
     }
 }
 
@@ -349,4 +570,46 @@ export default {
     color: rgb(163, 227, 245);
     -webkit-mask: linear-gradient(to top, rgb(163, 227, 245), transparent);
 }
+//left动画
+@keyframes donghua1 {
+  from {
+    transform: translateX(0%);
+  }
+
+  to {
+    transform: translateX(-100%);
+  }
+}
+.left-leave,
+.left-leave-active,
+.left-leave-to {
+  animation: donghua1 1s linear;
+}
+
+.left-enter,
+.left-enter-active,
+.left-enter-to {
+  animation: donghua1 1s linear reverse;
+}
+//right动画
+@keyframes donghua2 {
+  from {
+    transform: translateX(0%);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+.right-leave,
+.right-leave-active,
+.right-leave-to {
+  animation: donghua2 1s linear;
+}
+
+.right-enter,
+.right-enter-active,
+.right-enter-to {
+  animation: donghua2 1s linear reverse;
+}
 </style>