中建四局(进度管理):右边tab栏切换页面

src/views/projectAdmin/fourEngin/progress/index.vue

@@ -1,27 +1,46 @@
 <template>
   <div class="progress">
-    <div class="top">
+    <div
-      <div class="left">
+      class="changeTab"
-        <div class="left1">
+      :class="[currentIndex == index ? `show${index}` :`changeTab${index}`]"
-          <el-select v-model="firstValue" placeholder="请选择" style="transform: translate(10px, 10px);width: 100px;height: 30px;position: absolute;border-radius: 4px;">
+      v-for="(item, index) in tabList"
-            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+      :key="index"
-          </el-select>
+      @click="change(index)"
-          <img src="../assets/images/common/triangle.png" style="transform: translate(20px, 18px);" >
+    >
-        </div>
+      {{ item.name }}
-        
+    </div>
-        <div class="left2">
+    <!-- 进度管理 -->
-          <el-select v-model="secondValue" placeholder="请选择" style="transform: translate(10px, 10px);width: 100px;height: 30px;position: absolute;border-radius: 4px;">
+    <div class="top" v-show="currentIndex == 0">
-            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+      <div class="left1"></div>
-          </el-select>
-          <img src="../assets/images/common/triangle.png" style="transform: translate(20px, 18px);" >
-        </div>
-      </div>
       <div class="right">
         <TopRight />
       </div>
     </div>
-    <div class="bottom">
+    <!-- 无人机 -->
-      <div class="progress-item" :class="{ success: i + 1 < numberOfCompleted }" v-for="(v, i) in progress" :key="i">
+    <div class="left2" v-if="currentIndex == 1"></div>
+    <!-- 全景成像 -->
+    <div class="views" v-if="currentIndex == 2">
+      <div class="left">
+        <div class="leftone">
+          <LeftOne />
+        </div>
+        <div class="lefttwo">
+          <LeftTwo />
+        </div>
+        <div class="leftthree">
+          <LeftThree />
+        </div>
+      </div>
+      <div class="right">
+      </div>
+    </div>
+    <div class="bottom" v-if="currentIndex == 0">
+      <div
+        class="progress-item"
+        :class="{ success: i + 1 < numberOfCompleted }"
+        v-for="(v, i) in progress"
+        :key="i"
+      >
         <div class="date">{{ v.date }}</div>
         <div class="name">{{ v.name }}</div>
       </div>
@@ -30,93 +49,185 @@
 </template>
 
 <script>
-import { listProgressOfTheTask } from '@/assets/js/api/zhongjianFourth'
+import { listProgressOfTheTask } from "@/assets/js/api/zhongjianFourth";
-import TopRight from './topRight.vue'
+import TopRight from "./topRight.vue";
-import { mapState } from 'vuex'
+import LeftOne from "./leftOne.vue"
+import LeftTwo from "./leftTwo.vue"
+import LeftThree from "./leftThree.vue"
+import { mapState } from "vuex";
 
 export default {
-  components: { TopRight },
+  components: { TopRight,LeftOne, LeftTwo,LeftThree},
   data() {
     return {
       // 完工的数量
       numberOfCompleted: 2,
       // 步骤条
-      progress: [],
+      progress: [
+        { date: '2022-01-01', name: '基础工程', state: true ,},
+        { date: '2022-02-14', name: '主题结构施工', state: true, },
+        { date: '2022-03-25', name: '屋面工程', state: true, },
+        { date: '2022-07-31', name: '机械设备安拆工程', state: true, },
+        { date: '2022-08-31', name: '室内装饰装修工程', state: true,},
+        { date: '2022-09-01', name: '基础工程', state: true ,},
+        { date: '2022-10-14', name: '主题结构施工', state: true, },
+        { date: '2022-11-25', name: '屋面工程', state: true, },
+        { date: '2022-12-31', name: '机械设备安拆工程'},
+      ],
       // 设备列表
       options: [],
       firstValue: undefined,
       secondValue: undefined,
-    }
+      currentIndex: 0,
+      tabList: [
+        { name: "进度管理" },
+        { name: "无人机巡检" },
+        { name: "全景成像测距" },
+      ],
+    };
   },
   created() {
-    this.getList()
+    // this.getList();
   },
   computed: {
-    ...mapState(['projectSn'])
+    ...mapState(["projectSn"]),
   },
   methods: {
-    getList() {
+    change(val) {
-      listProgressOfTheTask({ projectSn: this.projectSn, isNoStart: false }).then(res => {
+      console.log("点击的", val);
-        console.log('查询步骤条列表: ', res);
+      this.currentIndex = val;
-        // state 0未开始, 1进行中, 2已完成
-        const progress = this.progress;
-        res.result.forEach(item => {
-          
-          if (item.state == 2) {
-            progress.push({
-              name: item.subitemProjectName,
-              date: item.actualEndTime
-            })
-            this.numberOfCompleted++
-            console.log('this.numberOfCompleted: ', this.numberOfCompleted);
-          } else {
-            progress.push({
-              name: item.subitemProjectName,
-              date: item.startTime
-            })
-          }
-        });
-        console.log(this.progress);
-      })
     },
+    // getList() {
+    //   listProgressOfTheTask({
+    //     projectSn: this.projectSn,
+    //     isNoStart: false,
+    //   }).then((res) => {
+    //     console.log("查询步骤条列表: ", res);
+    //     // state 0未开始, 1进行中, 2已完成
+    //     const progress = this.progress;
+    //     res.result.forEach((item) => {
+    //       if (item.state == 2) {
+    //         progress.push({
+    //           name: item.subitemProjectName,
+    //           date: item.actualEndTime,
+    //         });
+    //         this.numberOfCompleted++;
+    //         console.log("this.numberOfCompleted: ", this.numberOfCompleted);
+    //       } else {
+    //         progress.push({
+    //           name: item.subitemProjectName,
+    //           date: item.startTime,
+    //         });
+    //       }
+    //     });
+    //     console.log(this.progress);
+    //   });
+    // },
   },
-}
+};
 </script>
 
 <style lang="less" scoped>
 .progress {
   width: 100%;
   height: 100%;
+  margin-top: 20px;
+  position: relative;
   // background: url(../assets/temp/4.png) no-repeat;
   // background-size: 100% 100%;
+  .changeTab {
+    line-height: 38px;
+    text-align: center;
+    z-index: 99;
+  }
+  .changeTab0 {
+    position: absolute;
+    top: 10%;
+    left: 40%;
+    width: 212px;
+    height: 38px;
+    background-image: url(../assets/temp/untab.png);
+    background-size: 100%;
+    background-repeat: no-repeat;
+  }
+  .changeTab1 {
+    position: absolute;
+    top: 10%;
+    left: 50%;
+    width: 212px;
+    height: 38px;
+    background-image: url(../assets/temp/untab.png);
+    background-size: 100%;
+    background-repeat: no-repeat;
+  }
+  .changeTab2 {
+    position: absolute;
+    top: 10%;
+    left: 60%;
+    width: 212px;
+    height: 38px;
+    background-image: url(../assets/temp/untab.png);
+    background-size: 100%;
+    background-repeat: no-repeat;
+  }
+  .show0 {
+    position: absolute;
+    top: 10%;
+    left: 40%;
+    width: 212px;
+    height: 38px;
+    background-image: url(../assets/temp/tab.png);
+    background-size: 100%;
+    background-repeat: no-repeat;
+  }
+  .show1 {
+    position: absolute;
+    top: 10%;
+    left: 50%;
+    width: 212px;
+    height: 38px;
+    background-image: url(../assets/temp/tab.png);
+    background-size: 100%;
+    background-repeat: no-repeat;
+  }
+  .show2 {
+    position: absolute;
+    top: 10%;
+    left: 60%;
+    width: 212px;
+    height: 38px;
+    background-image: url(../assets/temp/tab.png);
+    background-size: 100%;
+    background-repeat: no-repeat;
+  }
+
+  .left2 {
+    width: 100%;
+    height: 100%;
+    background-image: url(../assets/temp/tab2.png);
+    background-repeat: no-repeat;
+    background-size: 100%;
+    color: #fafbfa;
+  }
+
   .top {
     height: 74%;
     display: flex;
     justify-content: space-between;
-    .left {
+    .left1 {
-      width: 76%;
+      width: 80%;
       height: 100%;
-      display: flex;
+      background-image: url(../assets/temp/progress.png);
-      justify-content: center;
+      background-repeat: no-repeat;
-      align-items: center;
+      background-size: 100%;
-      .left1,
+      color: #fafbfa;
-      .left2 {
-        width: 50%;
-        height: 100%;
-        background-image: url(../assets/temp/bgc_video2.png);
-        background-repeat: no-repeat;
-        background-size: 100%;
-        color: #fafbfa;
-      }
-      .left2 {
-        background-image: url(../assets/temp/bgc_video1.png);
-      }
     }
     .right {
-      width: calc(24% - 20px);
+      width: calc(20% - 25px);
       height: 100%;
     }
   }
+
   .bottom {
     height: 26%;
     color: #fff;
@@ -129,7 +240,7 @@ export default {
       flex-direction: column;
       align-items: center;
       &::before {
-        content: '';
+        content: "";
         position: relative;
         z-index: 9;
         width: 8px;
@@ -139,7 +250,7 @@ export default {
         border-radius: 50%;
       }
       &:not(:last-child)::after {
-        content: '';
+        content: "";
         position: absolute;
         top: 5px;
         left: 50%;
@@ -158,6 +269,35 @@ export default {
       }
     }
   }
+  .views{
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .left{
+      width: 23%;
+      margin-right: 1%;
+      height: 100%;
+      .leftone{
+        height: 40%;
+      }
+      .lefttwo{
+        height: 30%;
+      }
+      .leftthree{
+        height: 30%;
+      }
+    }
+    .right{
+      width: 77%;
+      height: 100%;
+      background-image: url(../assets/temp/tab3.png);
+      background-repeat: no-repeat;
+      background-size: 100%;
+      color: #fafbfa;
+    }
+  }
 }
 
 ::v-deep .el-input__suffix {

src/views/projectAdmin/fourEngin/progress/leftOne.vue

@@ -0,0 +1,77 @@
+<template>
+    <Card title="测距数据">
+     <div class="list">
+      <vue-scroll v-if="todoList.length">
+        <div class="list-item" v-for="(item, i) in todoList" :key="i">
+          <div class="todo">{{ item.subitemProjectName }}</div>
+          <div class="startTime">
+            <span class="grey">钢筋直径:</span><span class="blue">{{ item.one +'(mm)' }}</span>
+          </div>
+          <div class="endTime">
+            <span class="grey">钢筋间距:</span><span class="blue">{{ item.two+'(mm)' }}</span>
+          </div>
+          <div class="endTime">
+            <span class="grey">水泥浇筑前厚度:</span><span class="blue">{{ item.three+'(mm)' }}</span>
+          </div>
+          <div class="endTime">
+            <span class="grey">水泥浇筑厚度:</span><span class="blue">{{ item.four+'(mm)' }}</span>
+          </div>
+          <div class="orange" >浇筑厚度: {{ item.five }} mm</div>
+        </div>
+      </vue-scroll>
+      <div v-else class="empty" style="position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);">
+        <img src="@/assets/images/noData3.png">
+        <div style="text-align: center;color: #5b626b;font-size: 14px;">暂无数据</div>
+      </div>
+    </div>
+    </Card>
+</template>
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card },
+  data() {
+    return {
+        todoList:[
+            {subitemProjectName:'1号楼10层',one:'12',two:'150',three:'10196',four:'10316',five:'120'},
+            {subitemProjectName:'2号楼16层',one:'8',two:'200',three:'10196',four:'10316',five:'120'},
+        ]
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.list {
+  padding-top: 50px;
+  padding-left: 25px;
+  height: calc(100% - 65px);
+  color: #fff;
+  .list-item {
+    font-size: 16px;
+    .todo{
+      font-size: 24px;
+    }
+    &:not(:last-child) {
+      margin-bottom: 20px;
+    }
+    &:not(:first-child) {
+      margin-top: 50px;
+    }
+    div {
+      &:not(:first-child) {
+        margin-top: 6px;
+      }
+    }
+  }
+}
+
+.grey {
+  color: #FFFFFF ;
+}
+.blue {
+  color: #66D4D9 ;
+}
+.orange {
+  color: #F56C35;
+}
+</style>

src/views/projectAdmin/fourEngin/progress/leftThree.vue

@@ -0,0 +1,15 @@
+<template>
+    <Card title="测量控制" />
+</template>
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card },
+  data() {
+    return {}
+  }
+}
+</script>
+<style lang="less" scoped>
+
+</style>

src/views/projectAdmin/fourEngin/progress/leftTwo.vue

@@ -0,0 +1,15 @@
+<template>
+    <Card title="云台控制" />
+</template>
+<script>
+import Card from '../components/Card.vue'
+export default {
+  components: { Card },
+  data() {
+    return {}
+  }
+}
+</script>
+<style lang="less" scoped>
+
+</style>

src/views/projectAdmin/fourEngin/progress/topRight.vue

@@ -1,9 +1,9 @@
 <template>
   <Card title="进度任务">
-    <div class="tabs">
+    <!-- <div class="tabs">
       <div :class="['tab', { checked: activeTab == 0 }]" @click="handleTabClick(0)">待办事项</div>
       <div :class="['tab', { checked: activeTab == 1 }]" @click="handleTabClick(1)">未来提醒</div>
-    </div>
+    </div> -->
     <div class="list" style="position: relative;">
       <vue-scroll v-if="todoList.length">
         <div class="list-item" v-for="(item, i) in todoList" :key="i">
@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import { listProgressOfTheTask } from '@/assets/js/api/zhongjianFourth'
+// import { listProgressOfTheTask } from '@/assets/js/api/zhongjianFourth'
 import { mapState } from 'vuex'
 
 import Card from '../components/Card.vue'
@@ -37,7 +37,13 @@ export default {
       // 激活的tab
       activeTab: 0,
       // 待办事项列表
-      todoList: [],
+      todoList: [
+        {subitemProjectName:"1#楼10层墙体钢筋捆扎",startTime:"2022-01-26",endTime:"2022-01-26",deferreddays:"3"},
+        {subitemProjectName:"1#楼10层墙体钢筋捆扎",startTime:"2022-01-26",endTime:"2022-01-26",deferreddays:"3"},
+        {subitemProjectName:"1#楼10层墙体钢筋捆扎",startTime:"2022-01-26",endTime:"2022-01-26",deferreddays:"3"},
+        {subitemProjectName:"1#楼10层墙体钢筋捆扎",startTime:"2022-01-26",endTime:"2022-01-26",deferreddays:"3"},
+        {subitemProjectName:"1#楼10层墙体钢筋捆扎",startTime:"2022-01-26",endTime:"2022-01-26",deferreddays:"3"},
+      ],
     }
   },
   created() {
@@ -48,25 +54,25 @@ export default {
   },
   methods: {
     /** 查询待办事项列表 */
-    getList() {
+    // getList() {
-      if (this.activeTab == 0) {
+    //   if (this.activeTab == 0) {
-        listProgressOfTheTask({ projectSn: this.projectSn, state: 1 }).then(res => {
+    //     listProgressOfTheTask({ projectSn: this.projectSn, state: 1 }).then(res => {
-          console.log('查询待办事项列表: ', res);
+    //       console.log('查询待办事项列表: ', res);
-          this.todoList = res.result;
+    //       this.todoList = res.result;
-        })
+    //     })
-      } else {
+    //   } else {
-        listProgressOfTheTask({ projectSn: this.projectSn, state: 0 }).then(res => {
+    //     listProgressOfTheTask({ projectSn: this.projectSn, state: 0 }).then(res => {
-          console.log('查询未来提醒列表: ', res);
+    //       console.log('查询未来提醒列表: ', res);
-          this.todoList = res.result;
+    //       this.todoList = res.result;
-        })
+    //     })
-      }
+    //   }
-    },
+    // },
     /** tab点击事件 */
-    handleTabClick(index) {
+    // handleTabClick(index) {
-      if (this.activeTab == index) return
+    //   if (this.activeTab == index) return
-      this.activeTab = index;
+    //   this.activeTab = index;
-      this.getList()
+    //   this.getList()
-    },
+    // },
   },
 }
 </script>
@@ -87,16 +93,23 @@ export default {
   }
 }
 .list {
-  padding-left: 20px;
+  padding-top: 50px;
+  padding-left: 25px;
   height: calc(100% - 40px);
   color: #fff;
   .list-item {
+    font-size: 16px;
+    .todo{
+      font-size: 24px;
+    }
     &:not(:last-child) {
-      margin-bottom: 30px;
+      margin-bottom: 20px;
+    }
+    &:not(:first-child) {
+      margin-top: 50px;
     }
     div {
       &:not(:first-child) {
-        font-size: 12px;
         margin-top: 6px;
       }
     }
@@ -104,12 +117,12 @@ export default {
 }
 
 .grey {
-  color: #ccc;
+  color: #FFFFFF ;
 }
 .blue {
-  color: #2de1fa;
+  color: #66D4D9 ;
 }
 .orange {
-  color: #f56c36;
+  color: #F56C35;
 }
 </style>