From 9eab2b740181e6b8374630aae6ea884e0c2530c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AA=86=E4=B9=90?= <342503599@qq.com>
Date: Wed, 17 Aug 2022 16:54:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E8=AE=A1=E5=88=92):=E6=B7=BB=E5=8A=A0=E5=80=92?=
 =?UTF-8?q?=E8=AE=A1=E6=97=B6=E6=A8=A1=E5=9D=97=E4=BB=A5=E5=8F=8A=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projectAdmin/jlw/planProgress/leftTop.vue | 205 ++++++++++++++----
 1 file changed, 166 insertions(+), 39 deletions(-)

diff --git a/src/views/projectAdmin/jlw/planProgress/leftTop.vue b/src/views/projectAdmin/jlw/planProgress/leftTop.vue
index bd5121fe..f6ea70a4 100644
--- a/src/views/projectAdmin/jlw/planProgress/leftTop.vue
+++ b/src/views/projectAdmin/jlw/planProgress/leftTop.vue
@@ -1,8 +1,51 @@
 <template>
-<!-- 进度总览 -->
-<div class="containerBox">
-    <div class="titleTxt">{{ title }}</div>
-    <div class="content">
+  <!-- 进度总览 -->
+  <div class="containerBox">
+    <div class="titleTxt">
+      {{ 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;
-  }
-  .content{
-    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;
+    .el-icon-s-tools {
+      margin-left: 380px;
     }
   }
-  .charts {
-    padding: 10px 30px 0;
-    display: flex;
-    justify-content: space-around;
-  .chart {
-      width: 200px;
-      height: 200px;
+  // .content{
+  //   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 {
+  //   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>