From 26125762f35c22a5bb3ea17f6bc3807991b79057 Mon Sep 17 00:00:00 2001
From: revive <1664535558@qq.com>
Date: Tue, 24 Nov 2020 14:33:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9projectItem=20ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/static/img/global.svg       |  11 ++
 public/static/img/prjManage.svg    |  11 ++
 src/views/main_web/index/index.vue |  91 ++---------
 src/views/main_web/proj-item.vue   | 242 +++++++++++++++++++++++++++--
 4 files changed, 263 insertions(+), 92 deletions(-)
 create mode 100644 public/static/img/global.svg
 create mode 100644 public/static/img/prjManage.svg

diff --git a/public/static/img/global.svg b/public/static/img/global.svg
new file mode 100644
index 00000000..52715655
--- /dev/null
+++ b/public/static/img/global.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Fill 1</title>
+    <g id="观全局" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="我的项目新版" transform="translate(-552.000000, -555.000000)" fill="#999B9D">
+            <g id="观全局备份" transform="translate(520.000000, 532.000000)">
+                <path d="M63.139526,28.8159553 C63.139526,27.8624129 62.3664056,27.0884762 61.4128632,27.0884762 C60.4585045,27.0884762 59.6862005,27.8624129 59.6862005,28.8159553 L59.6862005,55 L63.139526,55 L63.139526,28.8159553 Z M56.21818,32.5076664 C56.21818,31.554124 55.4450596,30.7810036 54.4907008,30.7810036 C53.5371585,30.7810036 52.7640381,31.554124 52.7640381,32.5076664 L52.7640381,55 L56.21818,55 L56.21818,32.5076664 Z M49.2968339,40.2241753 C49.2968339,39.270633 48.5237135,38.4975126 47.5701712,38.4975126 C46.6166288,38.4975126 45.842692,39.270633 45.842692,40.2241753 L45.842692,55 L49.2968339,55 L49.2968339,40.2241753 Z M42.3754879,24.7274791 C42.3754879,23.7731204 41.6023675,23 40.6488252,23 C39.6944664,23 38.921346,23.7731204 38.921346,24.7274791 L38.921346,55 L42.3754879,55 L42.3754879,24.7274791 Z M35.4541419,55 L32,55 L32,35.1682782 C32,34.2147358 32.7739368,33.4416154 33.7274791,33.4416154 C34.6818379,33.4416154 35.4541419,34.2147358 35.4541419,35.1682782 L35.4541419,55 Z" id="Fill-1"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/static/img/prjManage.svg b/public/static/img/prjManage.svg
new file mode 100644
index 00000000..8b3a6f17
--- /dev/null
+++ b/public/static/img/prjManage.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="34px" height="32px" viewBox="0 0 34 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Fill 1</title>
+    <g id="观全局" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="我的项目新版" transform="translate(-752.000000, -556.000000)" fill="#999B9D">
+            <g id="编辑项目备份" transform="translate(720.000000, 532.000000)">
+                <path d="M54.209074,27.4666597 L51.7778883,27.4666597 C50.4609263,27.4666597 49.3902663,28.440977 49.3902663,29.6381391 L49.3902663,39.5807001 L54.209074,39.5807001 L54.209074,38.6909967 C54.209074,37.7309213 54.9881928,36.9518025 55.9482682,36.9518025 L64.204414,36.9518025 C65.1644894,36.9518025 65.9427704,37.7309213 65.9427704,38.6909967 L65.9427704,41.3081656 C65.9427704,42.2690787 65.1644894,43.0481975 64.204414,43.0481975 L55.9482682,43.0481975 C54.9881928,43.0481975 54.209074,42.2690787 54.209074,41.3081656 L54.209074,40.4184622 L49.3902663,40.4184622 L49.3902663,50.3618609 C49.3902663,51.559023 50.4609263,52.5333403 51.7778883,52.5333403 L54.209074,52.5333403 L54.209074,51.6436369 C54.209074,50.6827238 54.9881928,49.9044428 55.9482682,49.9044428 L64.204414,49.9044428 C65.1644894,49.9044428 65.9427704,50.6827238 65.9427704,51.6436369 L65.9427704,54.2608058 C65.9427704,55.221719 65.1644894,56 64.204414,56 L55.9482682,56 C54.9881928,56 54.209074,55.221719 54.209074,54.2608058 L54.209074,53.3711024 L51.7778883,53.3711024 C49.9993193,53.3711024 48.5525041,52.0214677 48.5525041,50.3618609 L48.5525041,40.4184622 L43.7336964,40.4184622 L43.7336964,41.3081656 C43.7336964,42.2690787 42.9554153,43.0481975 41.9945022,43.0481975 L33.7391942,43.0481975 C32.7791188,43.0481975 32,42.2690787 32,41.3081656 L32,38.6909967 C32,37.7309213 32.7791188,36.9518025 33.7391942,36.9518025 L41.9945022,36.9518025 C42.9554153,36.9518025 43.7336964,37.7309213 43.7336964,38.6909967 L43.7336964,39.5807001 L48.5525041,39.5807001 L48.5525041,29.6381391 C48.5525041,27.9785323 49.9993193,26.6288976 51.7778883,26.6288976 L54.209074,26.6288976 L54.209074,25.7391942 C54.209074,24.778281 54.9881928,24 55.9482682,24 L64.204414,24 C65.1644894,24 65.9427704,24.778281 65.9427704,25.7391942 L65.9427704,28.3563631 C65.9427704,29.3164385 65.1644894,30.0955572 64.204414,30.0955572 L55.9482682,30.0955572 C54.9881928,30.0955572 54.209074,29.3164385 54.209074,28.3563631 L54.209074,27.4666597 Z" id="Fill-1"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/views/main_web/index/index.vue b/src/views/main_web/index/index.vue
index 419beb81..00c89318 100644
--- a/src/views/main_web/index/index.vue
+++ b/src/views/main_web/index/index.vue
@@ -66,84 +66,13 @@
         </div>
       </section>
       <!-- 项目列表 -->
-      <section class="yiyun_warpContent mt-20" style="height:100%; overflow:auto">
-        <div class="yiyun-rows" id="alone" v-infinite-scroll="scrollLoad" style="height: 100%">
-          <div v-show="isEmpty" class="nullproduct">
-            <img src="static\img\nopro.png" alt />
-            <span class="noprotext">暂无项目</span>
-          </div>
-          <div
-            class="yiyun-col-3 yiyun-col-md-4 yiyun-col-sm-6 yiyun-col-ty-12 mb-40"
-            v-for="projItem in projPageList"
-            :key="projItem.projID"
-          >
-            <div class="yiyun_row">
-              <div class="projectbox_item_model">
-                <div class="project_item_model">
-                  <div class="yiyun_product_item">
-                    <img
-                      class="fandatupian"
-                      @click="goFilePage(projItem)"
-                      :src="projItem.ShowImgUrl | resolveImg"
-                      alt
-                    />
-                    <div class="yiyun_product_item_top">
-                      <!--                      <div class="yiyun_product_itembarfl">
-                        <span class="btn_yiyun_cardinfo_b  mr-5" title="新文件" @click="toProjNotice(projItem)" v-show="projItem.noticeCount>0">{{projItem.noticeCount}}</span>
-                      </div>-->
-                      <div class="yiyun_product_itembarfr">
-                        <el-dropdown>
-                          <span class="el-dropdown-link">
-                            <span>
-                              <i class="icon iconfont icon_small-icon_small_wenjianshezhi setIcon"></i>
-                            </span>
-                          </span>
-                          <el-dropdown-menu slot="dropdown">
-                            <el-dropdown-item @click.native="openPrjInfo(projItem)">
-                              <span>项目概况</span>
-                            </el-dropdown-item>
-                            <!-- <el-dropdown-item
-                              @click.native="addNewFolders(projItem)"
-                              v-if="projItem.folderPerm == 2"
-                            > -->
-                            <el-dropdown-item
-                              @click.native="addNewFolders(projItem)"
-                            >
-                              <span>工作指派</span>
-                            </el-dropdown-item>
-                            <!-- <el-dropdown-item @click.native="toCloudIndex(projItem)">
-                              <span>查看云盘</span>
-                            </el-dropdown-item> -->
-                          </el-dropdown-menu>
-                        </el-dropdown>
-                        <!-- <i class="Cicon text_wirte icon font_family icon-icon_yunpan" title="去云盘" @click="toCloudIndex(projItem)"></i> -->
-                      </div>
-                    </div>
-                    <div class="clear"></div>
-                    <span class="tinyLabel biaoqianweizhi1" v-if="projItem.newProjStatus == 1">新项目</span>
-                    <h4 class="biaoqianweizhi2" :title="projItem.projName">{{ projItem.ProjName }}</h4>
-                  </div>
-                </div>
-                <div class="project_gantetubox_warp" v-show="isDistProj">
-                  <!-- <div class="gantetu_listBox">
-										<img src="static\img\progresssImg_Time.png" alt="">
-                  </div>-->
-                  <div class="project_gantetubox"></div>
-                  <!-- <el-button type="primary" round class="longBtn defualtBtnInfo" v-if="projItem.folderPerm!=2 && projItem.folderPerm!=0 ">项目管理</el-button> -->
-                  <!-- <el-button type="primary" round class="longBtn defualtBtnInfo" @click="addNewFolders(projItem)" v-if="projItem.folderPerm == 2 && projItem.allocated == 1">项目管理</el-button> -->
-                  <el-button
-                    type="primary"
-                    round
-                    class="longBtn defualtBtnInfo"
-                    @click="addNewFolders(projItem)"
-                    v-if="projItem.Allocated == 1"
-                  >请完成工作指派</el-button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
+      <ProjItem
+      :projPageList="projPageList"
+      :openPrjInfo="openPrjInfo"
+      :addNewFolders="addNewFolders"
+      >
+      </ProjItem>
+
     </div>
     <div type="button" class="yijianfankui">
       <div class="putonganniu" @click="showHelp">帮助</div>
@@ -225,6 +154,7 @@ import ProjSetting from "@/views/components_web/projSetting/projSetting";
 import { haveAccess, AccessCode } from '@/utils/access';
 import * as prjService from '@/services/project'
 import Timer from '@/views/main_web/time'
+import ProjItem from '@/views/main_web/proj-item'
 const BMap = window.BMap;
 const Velocity = window.Velocity;
 export default {
@@ -235,6 +165,7 @@ export default {
     ProjSetting,
     Timer,
     AppHeader,
+    ProjItem
   },
   data() {
     const { currentPlatform } = this.$store.state;
@@ -653,14 +584,10 @@ export default {
      * 打开项目概况
      */
     openPrjInfo(proj){
-      //const projectInfoRes= await prjService.QueryProjectInfoByProjId(proj.Id);
-      //this.isProjectManager = projectInfoRes.Data.Status;
       this.currProjId = proj.Id;
       this.isProjectManager=proj.Status;
       this.isShowProjSetting = true;
       this.isEditProjFolder = false;    
-      //this.nowProj=projectInfoRes.Data;  
-      //console.log(this.nowProj.Status)
     },
     /**
      * @description: 编辑项目概况回调
diff --git a/src/views/main_web/proj-item.vue b/src/views/main_web/proj-item.vue
index 22ee20a8..5a57fe89 100644
--- a/src/views/main_web/proj-item.vue
+++ b/src/views/main_web/proj-item.vue
@@ -1,23 +1,245 @@
 <template>
     <div>
-        <div class="prjitem_context">
-            <img src="" alt="">
-            <div class="prjitem_title"></div>
-        </div>
-        <div class="prjitem_select">
-            <div class=""></div>
-            <div class="prjmanager"></div>
-        </div>
+        <section class="yiyun_warpContent mt-20" style="height:100%; overflow:auto">
+            <div class="yiyun-rows" id="alone" v-infinite-scroll="scrollLoad" style="height: 100%">
+                <div v-show="isEmpty" class="nullproduct">
+                    <img src="static\img\nopro.png" alt />
+                    <span class="noprotext">暂无项目</span>
+                </div>                
+                <div class="prjitem"
+                v-for="projItem in projPageList"
+                :key="projItem.Id"
+                >
+                    <div class="prjitem_content" @mouseover="showSetIcon(projItem.Id)" @mouseout="hiddenSetIcon">
+                        <img 
+                        alt="" 
+                        class="prjitem_img"
+                        @click="goFilePage(projItem)"
+                        :src="projItem.ShowImgUrl | resolveImg"
+                        >
+                            <div class="yiyun_product_item_top">
+                            <div class="yiyun_product_itembarfr">
+                                <el-dropdown>
+                                <span class="el-dropdown-link" v-show="projItem.Id === focusProjId">
+                                    <span>
+                                    <i class="icon iconfont icon_small-icon_small_wenjianshezhi setIcon"></i>
+                                    </span>
+                                </span>
+                                <el-dropdown-menu slot="dropdown">
+                                    <el-dropdown-item @click.native="openPrjInfo(projItem)">
+                                    <span>项目概况</span>
+                                    </el-dropdown-item>
+                                    <el-dropdown-item
+                                    @click.native="addNewFolders(projItem)"
+                                    >
+                                    <span>工作指派</span>
+                                    </el-dropdown-item>
+                                </el-dropdown-menu>
+                                </el-dropdown>
+                            </div>
+                            </div>
+                            <div class="clear"></div>
+                            <div class="newprj_icon" v-if="projItem.newProjStatus == 1">新项目</div>
+                            <div class="prjitem_title">{{ projItem.ProjName }}</div>
+                    </div>
+                    <div class="prjitem_select">
+                        <div class="btn_whole">
+                            <img src="/static/img/global.svg" alt="" srcset="">
+                            <p>观全局</p>
+                        </div><!--
+                    --><div class="btn_manage">
+                            <img src="/static/img/prjManage.svg" alt="" srcset="">
+                            <p>项目管理</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
     </div>
     
 </template>
 
 <script>
 export default {
-    
+    data() {
+        return {
+            focusProjId: '',
+            isEmpty:false
+        }
+    },
+    props:{
+        projPageList:{
+            type: Array,
+            default() {
+                return []
+            }
+        },
+        openPrjInfo:Function,
+        addNewFolders:Function,
+
+    },
+    watch:{
+        projPageListLength: {
+            immediate: true,
+            handler(val) {
+                if(val > 0){
+                    this.isEmpty = false;
+                } else {
+                    this.isEmpty = true;
+                }
+            }              
+        }
+
+    },
+    computed: {
+        projPageListLength() {
+            return this.projPageList.length;
+        }
+    },
+    methods:{
+        // 控制设置图标显示与隐藏
+        showSetIcon(Id) {
+            this.focusProjId = Id;
+   
+        },
+        hiddenSetIcon() {
+            this.focusProjId = '';
+        },
+        /**
+         * 转到workspace工作空间
+         */
+        goFilePage: function (proj) {
+        sessionStorage.createUserID = proj.CreateUserId;
+        sessionStorage.templateID = proj.TemplateId;
+        sessionStorage.projId = proj.Id;
+        sessionStorage.nowFolderIndex = "";
+        sessionStorage.comFolderId = proj.ComFolderId;
+        sessionStorage.newProjStatus = proj.NewProjStatus;
+        if (sessionStorage.projName != proj.ProjName) {
+            sessionStorage.projName = proj.ProjName;
+        }
+        this.$router.push({
+            name: "workspace",
+        });
+        sessionStorage.pageName = "workspace";
+        },
+    }
 }
 </script>
 
-<style lang="sass" scoped>
+<style lang="scss" scoped>
+    .yiyun_warpContent{
+        text-align: center;
+    }
+    .prjitem{
+        width: 400px;
+        display: inline-block;
+        border-radius:16px ;
+        margin: 30px 30px;
+        transition: all .3s linear;
+    }
+    .prjitem:hover{
+      box-shadow:-8px 0px 10px #E0E0E0,   /*左边阴影*/
+		8px 0px 10px #E0E0E0,  /*右边阴影*/
+        0px 10px 10px #E0E0E0; /*下边阴影*/ ;
+      transform:scale(1.02);
+
+
+    }
+    .prjitem_content{
+        position:relative;
+        width: 400px;
+        height: 245px;    
+        background-color: #fff;
+        overflow:hidden;
+        border-top-left-radius: 16px;
+        border-top-right-radius: 16px;
+    }
+    .prjitem_img{
+        max-width: 100%;
+        /* max-height: 100%; */
+        transform: scale(1.1);
+        cursor: pointer;
+        margin: 0 auto;
+        display: block;
+        position: inherit!important;
+        min-height: 245px;
+        min-width: 100%;
+    }
+    .prjitem_title{
+        width: 100%;
+        height: 68px;
+        position: absolute;
+        bottom: 0px;
+        font-size: 25px;
+        padding: 16px 24px 24px 24px;
+        color: rgba(255, 255, 255, 100);
+        box-sizing: border-box;
+        font-size: 25px;
+        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+        font-weight: 500;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        text-align: left;
+        cursor: pointer;
+    }
+    .newprj_icon{
+        width: 52px;
+        height: 20px;
+        position: absolute;
+        left: 24px;
+        top: 20px;
+        line-height: 20px;
+        background-color:#D6243A;
+        color: rgba(255, 255, 255, 100);
+        font-size: 12px; 
+        border-radius: 10px;
+        text-align: center;
+
+    }
+    .btn_whole,.btn_manage{
+        width: 200px;
+        background-color: rgba(252, 252, 252, 1);
+        display: inline-block;
+        line-height: 80px;
+        font-size: 13px;  
+        position: relative;   
+        cursor: pointer;
+        height: 80px;
+
+    }
+    
+    .btn_whole p,.btn_manage p{
+        display: inline-block;
+        position: absolute;
+        right: 40px;
+    }
+    .btn_whole img,.btn_manage img{
+      top: 50%;
+      transform: translateY(-50%);
+      position:absolute;
+      left: 32px;
+
+    }
+    .prjitem_select{
+      height: 80px;
+    }
+
+    .btn_whole{
+        border-bottom-left-radius:16px;
+        border-right: 1px solid #dedede;
+        box-sizing: border-box;
+    }
+    .btn_manage{
+        border-bottom-right-radius:16px;
+    }
+    .btn_whole:hover,.btn_manage:hover{
+        background-color: rgba(50, 50, 60, 0.15);
+        transition: background-color 1s;
+    }
+    
 
 </style>
\ No newline at end of file