中建四局-进度管理：完成进度任务待办事项和底部步骤条的接口的对接

src/assets/js/api/zhongjianFourth.js

@@ -10,5 +10,18 @@ export const qualityManagement = params => get('xmgl/qualityInspectionRecord/get
 // 质量管理-质量问题库
 export const listQualityManagement = params => get('xmgl/dangerTypeRecord/getBigList', params);
 
+/* --------------指挥中心------------ */
+// 安全巡检-安全隐患
+export const getSafetyPerilInfo = params => get('xmgl/hiddenDangerInspectRecord/getRectificationNoNum', params);
 
+// 安全巡检-今日巡检
+export const getTodayInspectionInfo = params => get('xmgl/inspectTaskRecord/getTodayInfo', params);
 
+/* --------------进度管理------------ */
+/**
+ * 进度任务-代办事项-底部步骤条
+ * @param {string} projectSn 
+ * @param {boolean} isNoStart true: 代办事项 false: 步骤条
+ * @returns 
+ */
+export const listProgressOfTheTask = params => get('xmgl/progressItem/getScheduleList', params);

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

@@ -3,10 +3,17 @@
     <div class="top">
       <div class="left">
         <div class="left1">
-          <div class="video">摄像头1</div>
+          <el-select v-model="firstValue" placeholder="请选择" style="transform: translate(10px, 10px);width: 100px;height: 30px;position: absolute;border-radius: 4px;">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          </el-select>
+          <img src="../assets/images/common/triangle.png" style="transform: translate(20px, 18px);" >
         </div>
+        
         <div class="left2">
-          <div class="project">工程1</div>
+          <el-select v-model="secondValue" placeholder="请选择" style="transform: translate(10px, 10px);width: 100px;height: 30px;position: absolute;border-radius: 4px;">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          </el-select>
+          <img src="../assets/images/common/triangle.png" style="transform: translate(20px, 18px);" >
         </div>
       </div>
       <div class="right">
@@ -14,7 +21,7 @@
       </div>
     </div>
     <div class="bottom">
-      <div class="progress-item" :class="{ success: i < 6 }" v-for="(v, i) in progress" :key="i">
+      <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>
@@ -23,25 +30,57 @@
 </template>
 
 <script>
-import TopRight from "./topRight.vue";
+import { listProgressOfTheTask } from '@/assets/js/api/zhongjianFourth'
+import TopRight from './topRight.vue'
+import { mapState } from 'vuex'
+
 export default {
   components: { TopRight },
   data() {
     return {
-      progress: [
+      // 完工的数量
-        { name: "基础工程", date: "2022-02-02" },
+      numberOfCompleted: 2,
-        { name: "主体结构施工", date: "2022-02-02" },
+      // 步骤条
-        { name: "屋面工程", date: "2022-02-02" },
+      progress: [],
-        { name: "机械设备安拆工程", date: "2022-02-02" },
+      // 设备列表
-        { name: "室内装饰装修工程", date: "2022-02-02" },
+      options: [],
-        { name: "室内装饰装修工程", date: "2022-02-02" },
+      firstValue: undefined,
-        { name: "室内装饰装修工程", date: "2022-02-02" },
+      secondValue: undefined,
-        { name: "室内装饰装修工程", date: "2022-02-02" },
+    }
-        { name: "室内装饰装修工程", date: "2022-02-02" }
+  },
-      ]
+  created() {
-    };
+    this.getList()
+  },
+  computed: {
+    ...mapState(['projectSn'])
+  },
+  methods: {
+    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>
@@ -60,32 +99,14 @@ export default {
       display: flex;
       justify-content: center;
       align-items: center;
-      .left1,.left2 {
+      .left1,
+      .left2 {
         width: 50%;
         height: 100%;
         background-image: url(../assets/temp/bgc_video2.png);
         background-repeat: no-repeat;
         background-size: 100%;
         color: #fafbfa;
-        .video , .project{
-          position: relative;
-          width: 100px;
-          height: 30px;
-          text-align: center;
-          line-height: 30px;
-          background-color: #506173;
-          margin-left: 15px;
-          margin-top: 10px;
-        }
-        .video::before,.project::before{
-        content: '';
-        top: 25%;
-        left: 10%;
-        position: absolute;
-        border: 8px solid transparent;
-        border-left: 8px solid white;
-        display: inline-block;
-      }
       }
       .left2 {
         background-image: url(../assets/temp/bgc_video1.png);
@@ -108,7 +129,9 @@ export default {
       flex-direction: column;
       align-items: center;
       &::before {
-        content: "";
+        content: '';
+        position: relative;
+        z-index: 9;
         width: 8px;
         height: 8px;
         background-color: #fff;
@@ -116,8 +139,9 @@ export default {
         border-radius: 50%;
       }
       &:not(:last-child)::after {
-        content: "";
+        content: '';
         position: absolute;
+        top: 5px;
         left: 50%;
         bottom: calc(100% - 5px);
         width: 100%;
@@ -135,4 +159,20 @@ export default {
     }
   }
 }
+
+::v-deep .el-input__suffix {
+  display: none;
+  height: 30px;
+}
+
+::v-deep .el-input--suffix .el-input__inner {
+  border: 0;
+  border-radius: 4px;
+  height: 30px;
+  padding-left: 30px;
+  padding-right: 0px;
+  color: #fff;
+  background: #506173;
+  // background-image: url('../assets/images/common/triangle.png');
+}
 </style>

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

@@ -1,41 +1,65 @@
 <template>
   <Card title="进度任务">
     <div class="tabs">
-      <div class="tab checked">待办事项</div>
+      <div :class="['tab', { checked: activeTab == 0 }]" @click="handleTabClick(0)">待办事项</div>
-      <div class="tab">未来提醒</div>
+      <div :class="['tab', { checked: activeTab == 1 }]" @click="handleTabClick(1)">未来提醒</div>
     </div>
-    <div class="list">
+    <div class="list" style="position: relative;">
-      <vue-scroll>
+      <vue-scroll v-if="todoList.length">
-        <div class="list-item" v-for="(v, i) in todos" :key="i">
+        <div class="list-item" v-for="(item, i) in todoList" :key="i">
-          <div class="todo">{{ v.todo }}</div>
+          <div class="todo">{{ item.subitemProjectName }}</div>
           <div class="startTime">
-            <span class="grey">计划开始时间：</span><span class="blue">{{ v.startTime }}</span>
+            <span class="grey">计划开始时间：</span><span class="blue">{{ item.startTime }}</span>
           </div>
           <div class="endTime">
-            <span class="grey">计划结束时间：</span><span class="blue">{{ v.endTime }}</span>
+            <span class="grey">计划结束时间：</span><span class="blue">{{ item.endTime }}</span>
           </div>
-          <div class="delay orange">已延期{{ v.delay }}天</div>
+          <div class="delay orange" v-if="item.deferreddays > 0">已延期 {{ item.deferreddays }} 天</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 { listProgressOfTheTask } from '@/assets/js/api/zhongjianFourth'
+import { mapState } from 'vuex'
+
 import Card from '../components/Card.vue'
 export default {
   components: { Card },
   data() {
     return {
-      todos: [
+      // 激活的tab
-        { todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 },
+      activeTab: 0,
-        { todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 },
+      // 待办事项列表
-        { todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 },
+      todoList: [],
-        { todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 },
-        { todo: '大罗勒密河', startTime: '2022-02-01', endTime: '2022-02-01', delay: 2 }
-      ]
-    }
     }
+  },
+  created() {
+    this.getList()
+  },
+  computed: {
+    ...mapState(['projectSn'])
+  },
+  methods: {
+    /** 查询待办事项列表 */
+    getList() {
+      listProgressOfTheTask({ projectSn: this.projectSn, isNoStart: true }).then(res => {
+        console.log('查询待办事项列表: ', res);
+        this.todoList = res.result;
+      })
+    },
+    /** tab点击事件 */
+    handleTabClick(index) {
+      if (this.activeTab == index) return
+      this.activeTab = index;
+    },
+  },
 }
 </script>
 

src/views/projectAdmin/zjsj/security/leftTop.vue

@@ -4,9 +4,9 @@
       <div class="dllm">
         <div class="woria">
           <JRingChart
-            :title="{ text: '安全隐患', subTitle: '987条件', fontSize: 14 }"
+            :title="{ text: '安全隐患', subTitle: `${todayInspection.totalNum}条件`, fontSize: 14 }"
             :color="['#6EE4F0', '#E7622A']"
-            :data="[{ value: 2314,name:'已处理' }, { value: 987,name:'未处理' }]"
+            :data="[{ value: safetyPeril.rectificationNum, name:'已处理' }, { value: safetyPeril.noRectificationNum, name:'未处理' }]"
             :radius="['60%', '85%']"
             :legend="false"
           />
@@ -17,8 +17,8 @@
             <span>占比</span>
           </div>
           <div class="row">
-            <span>123456</span>
+            <span>{{ safetyPeril.rectificationNum || 0 }}</span>
-            <span>20%</span>
+            <span>{{ safetyPeril.rectificationRatio || 0 }}%</span>
           </div>
         </div>
         <div class="legend">
@@ -27,17 +27,17 @@
             <span>占比</span>
           </div>
           <div class="row">
-            <span>123456</span>
+            <span>{{ safetyPeril.noRectificationNum || 0 }}</span>
-            <span>20%</span>
+            <span>{{ safetyPeril.noRectificationRatio || 0 }}%</span>
           </div>
         </div>
       </div>
       <div class="dllm">
         <div class="woria">
           <JRingChart
-            :title="{ text: '今日巡检', subTitle: '4400条件', fontSize: 14 }"
+            :title="{ text: '今日巡检', subTitle: `${todayInspection.totalNum}条件`, fontSize: 14 }"
             :color="['#6EE4F0', '#E7622A']"
-            :data="[{ value: 2314,name:'已巡检' }, { value: 987,name:'未巡检' }]"
+            :data="[{ value: todayInspection.rectificationNum, name:'已巡检' }, { value: todayInspection.noRectificationNum, name:'未巡检' }]"
             :radius="['60%', '85%']"
             :legend="false"
           />
@@ -48,8 +48,8 @@
             <span>占比</span>
           </div>
           <div class="row">
-            <span>123456</span>
+            <span>{{ todayInspection.rectificationNum || 0 }}</span>
-            <span>20%</span>
+            <span>{{ todayInspection.rectificationRatio || 0 }}%</span>
           </div>
         </div>
         <div class="legend">
@@ -58,8 +58,8 @@
             <span>占比</span>
           </div>
           <div class="row">
-            <span>123456</span>
+            <span>{{ todayInspection.noRectificationNum || 0 }}</span>
-            <span>20%</span>
+            <span>{{ todayInspection.noRectificationRatio || 0 }}%</span>
           </div>
         </div>
       </div>
@@ -86,22 +86,68 @@
 </template>
 
 <script>
+import { getSafetyPerilInfo, getTodayInspectionInfo } from '@/assets/js/api/zhongjianFourth'
+import { mapState } from 'vuex'
+
 import Card from '../components/Card.vue'
 import JRingChart from '../../common/jChart/pie/JRingChart.vue'
 export default {
   components: { Card, JRingChart },
   data() {
     return {
+      // 安全隐患
+      safetyPeril: {
+        rectificationNum: undefined,
+        rectificationRatio: undefined,
+        noRectificationNum: undefined,
+        noRectificationRatio: undefined,
+        totalNum: undefined,
+      },
+      // 今日巡检
+      todayInspection: {
+        rectificationNum: undefined,
+        rectificationRatio: undefined,
+        noRectificationNum: undefined,
+        noRectificationRatio: undefined,
+        totalNum: undefined,
+      },
+      // 事件列表
       list: [
         { type: 1, datetime: '2022-02-02 13:39:09', status: 1 },
         { type: 2, datetime: '2022-02-02 13:39:09', status: 2 },
         { type: 3, datetime: '2022-02-02 13:39:09', status: 3 },
         { type: 1, datetime: '2022-02-02 13:39:09', status: 1 },
-        // { type: 2, datetime: '2022-02-02 13:39:09', status: 2 },
+      ],
-      ]
     }
   },
+  created() {
+    this.getSafetyPerilInfo()
+    this.getTodayInspectionInfo()
+  },
+  computed: {
+    ...mapState(['projectSn']),
+  },
   methods: {
+    /** 查询安全隐患数据 */
+    getSafetyPerilInfo() {
+      getSafetyPerilInfo({ projectSn: this.projectSn }).then(res => {
+        console.log('查询安全隐患数据: ', res);
+        const safetyPeril = this.safetyPeril;
+        Object.keys(safetyPeril).forEach(key => {
+          safetyPeril[key] = res.result[key];
+        })
+      }) 
+    },
+    /** 查询今日巡检数据 */
+    getTodayInspectionInfo() {
+      getTodayInspectionInfo({ projectSn: this.projectSn }).then(res => {
+        console.log('查询今日巡检数据: ', res);
+        const todayInspection = this.todayInspection;
+        Object.keys(todayInspection).forEach(key => {
+          todayInspection[key] = res.result[key];
+        })
+      }) 
+    },
     fmtType(type) {
       return type === 1 ? '物料堆放' : type === 2 ? '未戴安全帽' : type === 3 ? '未穿反光衣' : '--'
     },