湖里大屏(进度计划):添加倒计时模块以及接口对接

src/views/projectAdmin/jlw/planProgress/leftTop.vue

@@ -1,8 +1,51 @@
 <template>
-<!-- 进度总览 -->
+  <!-- 进度总览 -->
-<div class="containerBox">
+  <div class="containerBox">
-    <div class="titleTxt">{{ title }}</div>
+    <div class="titleTxt">
-    <div class="content">
+      {{ title }}
+      <i class="el-icon-s-tools" @click="dialogVisible=true"></i>
+    </div>
+    <!-- 配置项目竣工日期 -->
+    <div class="blockContent">
+      <p>
+        <!-- 项目整体倒计时： -->
+        {{$t('message.dataBoard.projectCountDown')+':'}}
+      </p>
+      <div class="days">
+        <span class="num">{{endDate?leftDays:'--'}}</span>
+        <span>
+          <!-- 天 -->
+          {{$t('message.dataBoard.textList')[0]}}
+        </span>
+      </div>
+      <img src="@/assets/images/daysBG.png" class="daysBG" />
+      <p class="endDate">
+        <!-- 竣工时间： -->
+        {{$t('message.dataBoard.completeTime')+':'}}{{endDate}}
+      </p>
+    </div>
+    <el-dialog
+      :modal-append-to-body="false"
+      :title="$t('message.dataBoard.configProjectCompleteDate')"
+      :visible.sync="dialogVisible"
+      width="667px"
+    >
+      <div style="text-align:center;margin-bottom:30px">
+        <el-date-picker
+          size="medium"
+          v-model="endDate"
+          type="date"
+          :placeholder="$t('message.dataBoard.chooseDate')"
+          value-format="yyyy-MM-dd"
+        ></el-date-picker>
+        <!-- <br> -->
+        <el-button type="primary" size="medium" @click="saveDataFn" style="margin-left: 20px">
+          <!-- 保存 -->
+          {{$t('message.dataBoard.save')}}
+        </el-button>
+      </div>
+    </el-dialog>
+    <!-- <div class="content">
       <div class="num">
         679
         <p>完成任务数</p>
@@ -38,15 +81,19 @@
             { value: 6, name: '' }
           ]"/>
       </div>
-    </div>
+    </div>-->
-</div>
+  </div>
 </template>
 
 <script>
-import JRingChart from '../jChart/pie/JRingChart.vue'
+// import JRingChart from "../jChart/pie/JRingChart.vue";
+import {
+  editProjectExtendApi,
+  getProjectExtendInfoApi
+} from "@/assets/js/api/baseInfo.js";
+import {GetDateStr} from "@/assets/js/util"
 export default {
-  components: { JRingChart },
+  // components: { JRingChart },
-
   props: {
     title: {
       type: String,
@@ -55,12 +102,61 @@ export default {
   },
   data() {
     return {
-
+      endDate: "",
+      leftDays: 0,
+      dialogVisible: false
     };
   },
-
+  mounted() {
-
+    this.getDataDateils();
-}
+  },
+  methods: {
+    //获取项目详情
+    getDataDateils() {
+      let data = {
+        projectSn: this.$store.state.projectSn
+      };
+      getProjectExtendInfoApi(data).then(res => {
+        // console.log(res);
+        this.endDate = res.result.engineeringEndTime;
+        if (this.endDate) {
+          this.getDaysBetween();
+        }
+      });
+    },
+    saveDataFn() {
+      if (this.endDate == "") {
+        // 请选择日期！
+        this.$message.error(
+          this.$t("message.dataBoard.pleaseChooseDate") + "!"
+        );
+        return;
+      }
+      editProjectExtendApi({
+        projectSn: this.$store.state.projectSn,
+        engineeringEndTime: this.endDate
+      }).then(res => {
+        // '保存成功！'
+        this.$message.success(this.$t("message.dataBoard.saveSuccess") + "!");
+        this.dialogVisible = false;
+        this.getDaysBetween();
+      });
+    },
+    getDaysBetween() {
+      var startDate = Date.parse(GetDateStr(0, "-"));
+      var endDate = Date.parse(this.endDate);
+      if (startDate > endDate) {
+        return 0;
+      }
+      if (startDate == endDate) {
+        return 1;
+      }
+      var days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
+      // return  days;
+      this.leftDays = days;
+    }
+  }
+};
 </script>
 
 <style lang="less" scoped>
@@ -74,36 +170,67 @@ export default {
     color: #6ee4f0;
     margin-top: 5px;
     margin-left: 5px;
-  }
+    .el-icon-s-tools {
-  .content{
+      margin-left: 380px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top:20px;
-    margin-left: 30px;
-  }
-  .num{
-    width: 88px;
-    line-height: 38px;
-    height: 38px;
-    text-align: center;
-    margin-right: 35px;
-    color: #47b1c4;
-    background-image: url(~@/assets/images/projectImg/numBgc.png);
-    p{
-      color: #d3d5d9;
-      font-size: 14px;
     }
   }
-  .charts {
+  // .content{
-    padding: 10px 30px 0;
+  //   display: flex;
-    display: flex;
+  //   justify-content: center;
-    justify-content: space-around;
+  //   align-items: center;
-  .chart {
+  //   margin-top:20px;
-      width: 200px;
+  //   margin-left: 30px;
-      height: 200px;
+  // }
+  // .num{
+  //   width: 88px;
+  //   line-height: 38px;
+  //   height: 38px;
+  //   text-align: center;
+  //   margin-right: 35px;
+  //   color: #47b1c4;
+  //   background-image: url(~@/assets/images/projectImg/numBgc.png);
+  //   p{
+  //     color: #d3d5d9;
+  //     font-size: 14px;
+  //   }
+  // }
+
+  // .charts {
+  //   padding: 10px 30px 0;
+  //   display: flex;
+  //   justify-content: space-around;
+  // .chart {
+  //     width: 200px;
+  //     height: 200px;
+  //   }
+  // }
+  .blockContent {
+    padding: 20px 40px;
+    height: calc(100% - 20px - 24px);
+    position: relative;
+    z-index: 2;
+  }
+  .days {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    .num {
+      font-size: 46px;
     }
   }
+  .daysBG {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .endDate {
+    position: absolute;
+    right: 20px;
+    bottom: 40px;
+    // font-size: 13px;
+  }
 }
 </style>