lint

src/views/main_web/proj-item.vue

@@ -1,244 +1,260 @@
 <template>
-    <div class="prjitem">
-        <div class="prjitem_content" ref="projitem"
-            @mouseenter="showSetIcon(projItem.Id), isMouseHover = true" 
-            @mouseleave="hiddenSetIcon, isMouseHover = false"
-            @click.stop="goFilePage(projItem)"
-            :style="showBackground(projItem.ShowImgUrl)"
-        >
-            <!-- <img class="prjitem_img"  ref="projimg" :class="{'height-full': isHeightFull && !isWidthFull, 'width-full': isWidthFull && !isHeightFull}"
+  <div class="prjitem">
+    <div
+      class="prjitem_content"
+      ref="projitem"
+      @mouseenter="showSetIcon(projItem.Id), isMouseHover = true"
+      @mouseleave="hiddenSetIcon, isMouseHover = false"
+      @click.stop="goFilePage(projItem)"
+      :style="showBackground(projItem.ShowImgUrl)"
+    >
+      <!-- <img class="prjitem_img"  ref="projimg" :class="{'height-full': isHeightFull && !isWidthFull, 'width-full': isWidthFull && !isHeightFull}"
                 :src="projItem.ShowImgUrl | resolveImg" alt="" 
             /> -->
-            <div class="newprj_icon" v-if="projItem.newProjStatus == 1">新项目</div>
-            <div class="prjitem_title" 
-                :class="{'move-item-name': focusProjId == projItem.Id && isMouseHover }"
-                :title="projItem.ProjName">{{ subProjName(projItem.ProjName) }}</div>
-            <div class="operate-bar" :class="{'show-operate-bar': isMouseHover && focusProjId == projItem.Id}">
-                <div class="bar-item" @click.stop="watchAllBtnClick">观全局</div>
-                <div class="bar-item" @click.stop="lookProjDetailClick">项目管理</div>
-            </div>
-        </div>
+      <div
+        class="newprj_icon"
+        v-if="projItem.newProjStatus == 1"
+      >新项目</div>
+      <div
+        class="prjitem_title"
+        :class="{'move-item-name': focusProjId == projItem.Id && isMouseHover }"
+        :title="projItem.ProjName"
+      >{{ subProjName(projItem.ProjName) }}</div>
+      <div
+        class="operate-bar"
+        :class="{'show-operate-bar': isMouseHover && focusProjId == projItem.Id}"
+      >
+        <div
+          class="bar-item"
+          @click.stop="watchAllBtnClick"
+        >观全局</div>
+        <div
+          class="bar-item"
+          @click.stop="lookProjDetailClick"
+        >项目管理</div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import { fetchApi } from '@/utils/request';
+import { fetchApi } from "@/utils/request";
 export default {
-    data() {
-        return {
-            focusProjId: '',
-            isEmpty:false,
-            isMouseHover: false,//鼠标是否悬浮
-        }
-    },
-    props:{
-        projItem: {
-            type: Object,
-            default() {
-                return {}
-            }
-        },
+  data() {
+    return {
+      focusProjId: "",
+      isEmpty: false,
+      isMouseHover: false, //鼠标是否悬浮
+    };
+  },
+  props: {
+    projItem: {
+      type: Object,
+      default() {
+        return {};
+      },
     },
+  },
 
-    methods:{
-        // 处理图片路径
-        showBackground(imgUrl) {
-            let resolveImg = this.$options.filters['resolveImg'];
-            const src = resolveImg(imgUrl);
-            return {
-                background: `center/cover no-repeat url(${src})`,
-            }
-        },
-        // 点击了项目管理按钮
-        lookProjDetailClick() {
-            this.$emit('lookProjDetailClick');
-        },
-        //项目管理
-        manageProj(){
-            this.$router.push('/newproject')
-        },
-        //ProjName处理
-        subProjName(name){
-            let len = name.length;
-            if(len > 13){
-                let nameArr = name.slice(0,7);
-                let _nameArr = name.slice(len-6,len);
-                return nameArr + "..." +_nameArr;
-            }
-            return name;
-        },
-        // 点击了观全局按钮
-        watchAllBtnClick() {
-            this.$emit('watchAllBtnClick');
-        },
-        // 控制设置图标显示与隐藏
-        showSetIcon(Id) {
-            this.focusProjId = Id;
-        },
-        hiddenSetIcon() {
-            this.focusProjId = '';
-        },
+  methods: {
+    // 处理图片路径
+    showBackground(imgUrl) {
+      let resolveImg = this.$options.filters["resolveImg"];
+      const src = resolveImg(imgUrl);
+      return {
+        background: `center/cover no-repeat url(${src})`,
+      };
+    },
+    // 点击了项目管理按钮
+    lookProjDetailClick() {
+      this.$emit("lookProjDetailClick");
+    },
+    //项目管理
+    manageProj() {
+      this.$router.push("/newproject");
+    },
+    //ProjName处理
+    subProjName(name) {
+      let len = name.length;
+      if (len > 13) {
+        let nameArr = name.slice(0, 7);
+        let _nameArr = name.slice(len - 6, len);
+        return nameArr + "..." + _nameArr;
+      }
+      return name;
+    },
+    // 点击了观全局按钮
+    watchAllBtnClick() {
+      this.$emit("watchAllBtnClick");
+    },
+    // 控制设置图标显示与隐藏
+    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",
-        }).catch(err => console.log(err))
-        const params={
-            API:'folder/queryNodeFolderListByProjectId',
-            Action:'打开项目',
-            CompanyName:sessionStorage.CompanyName,
-            Subject:sessionStorage.projName,
-            Source:sessionStorage.client,  
-            ProjectName:sessionStorage.projName,
-        }
-        fetchApi('operation/record',params);  
-        sessionStorage.pageName = "workspace";
-        },
-    }
-}
+    /**
+     * 转到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",
+        })
+        .catch((err) => console.log(err));
+      const params = {
+        API: "folder/queryNodeFolderListByProjectId",
+        Action: "打开项目",
+        CompanyName: sessionStorage.CompanyName,
+        Subject: sessionStorage.projName,
+        Source: sessionStorage.client,
+        ProjectName: sessionStorage.projName,
+      };
+      fetchApi("operation/record", params);
+      sessionStorage.pageName = "workspace";
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-    .prjitem{
-        display: inline-block;
-        width: 100%;
-        border-radius:16px ;
-        margin: 30px 0px;
-        transition: width .3s linear;
-        overflow: hidden;
-    }
-    .prjitem:hover{
-      box-shadow:-8px 0px 10px #E0E0E0,   /*左边阴影*/
-		8px 0px 10px #E0E0E0,  /*右边阴影*/
-        0px 10px 10px #E0E0E0; /*下边阴影*/ ;
-      transform:scale(1.02);
-    }
-    .prjitem:last-child:nth-child(3n){
-        margin-right: calc( 28% + 4% );
-    }
-    .prjitem_content{
-        position:relative;
-        width: 100%;
-        height: 245px;
-        background-color: #fff;
-        overflow: hidden;
-        border-top-left-radius: 16px;
-        border-top-right-radius: 16px;
-        cursor: pointer;
-        // height:0;
-        // padding-bottom:61%;
-    }
-    .prjitem_img{
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        min-height: 245px;
+.prjitem {
+  display: inline-block;
+  width: 100%;
+  border-radius: 16px;
+  margin: 30px 0px;
+  transition: width 0.3s linear;
+  overflow: hidden;
+}
+.prjitem:hover {
+  box-shadow: -8px 0px 10px #e0e0e0, /*左边阴影*/ 8px 0px 10px #e0e0e0,
+    /*右边阴影*/ 0px 10px 10px #e0e0e0; /*下边阴影*/
+  transform: scale(1.02);
+}
+.prjitem:last-child:nth-child(3n) {
+  margin-right: calc(28% + 4%);
+}
+.prjitem_content {
+  position: relative;
+  width: 100%;
+  height: 245px;
+  background-color: #fff;
+  overflow: hidden;
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  cursor: pointer;
+  // height:0;
+  // padding-bottom:61%;
+}
+.prjitem_img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  min-height: 245px;
 
-        // height: 100%;
-        cursor: pointer;
-        margin: 0 auto;
-    }
-    .prjitem_title{
-        position: absolute;
-        bottom: 24px;
-        box-sizing: border-box;
-        width: 100%;
-        font-size: 25px;
-        padding: 0 0 0 24px;
+  // height: 100%;
+  cursor: pointer;
+  margin: 0 auto;
+}
+.prjitem_title {
+  position: absolute;
+  bottom: 24px;
+  box-sizing: border-box;
+  width: 100%;
+  font-size: 25px;
+  padding: 0 0 0 24px;
 
-        color: #fff;
-        font-weight: 500;
-        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
-       
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 1;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        text-align: left;
-        cursor: pointer;
+  color: #fff;
+  font-weight: 500;
+  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
 
-        transition: bottom .07s ease-in;
-    }
-    .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;
-    }
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: left;
+  cursor: pointer;
+
+  transition: bottom 0.07s ease-in;
+}
+.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;
+}
 </style>
 
 <style scoped lang="scss">
-    .operate-bar {
-        position: absolute;
-        bottom: 11px;
-        display: flex;
-        justify-content: space-between;
+.operate-bar {
+  position: absolute;
+  bottom: 11px;
+  display: flex;
+  justify-content: space-between;
 
-        box-sizing: border-box;
-        width: 100%;
-        opacity: 0;
-        transition: opacity .3s ease-in;
-        
-        .bar-item {
-            flex: 1;
-            margin: 0 11px;
-            height: 52px;
-            line-height: 52px;
-            text-align: center;
-            font-size: 14px;
-            font-family: PingFangSC-Regular;
-            border-radius: 8px;
-            color: #fff;
-            background-color: rgba(50, 50, 60, 0.1);
-            cursor: pointer;
-            &:hover {
-                background-color: rgba(0, 0, 0, 0.2);
-            }
-            &:active {
-                background-color: rgba(50, 50, 60, 0.1);
-            }
-        }
-       
-    }
-    .height-full {
-        height: 100% !important;
-        min-height: 100%;
-        max-height: 100%;
-    }
-    .width-full {
-        width: 100% !important;
-        min-width: 100%;
-        max-width: 100%;
-    }
-    .move-item-name {
-        bottom: 50%;
-        transform: translate(0, 50%);
-    }
-    .show-operate-bar {
-        opacity: 1;
+  box-sizing: border-box;
+  width: 100%;
+  opacity: 0;
+  transition: opacity 0.3s ease-in;
+
+  .bar-item {
+    flex: 1;
+    margin: 0 11px;
+    height: 52px;
+    line-height: 52px;
+    text-align: center;
+    font-size: 14px;
+    font-family: PingFangSC-Regular;
+    border-radius: 8px;
+    color: #fff;
+    background-color: rgba(50, 50, 60, 0.1);
+    cursor: pointer;
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.2);
     }
-    .hide-operate-bar {
-        opacity: 0;
+    &:active {
+      background-color: rgba(50, 50, 60, 0.1);
     }
+  }
+}
+.height-full {
+  height: 100% !important;
+  min-height: 100%;
+  max-height: 100%;
+}
+.width-full {
+  width: 100% !important;
+  min-width: 100%;
+  max-width: 100%;
+}
+.move-item-name {
+  bottom: 50%;
+  transform: translate(0, 50%);
+}
+.show-operate-bar {
+  opacity: 1;
+}
+.hide-operate-bar {
+  opacity: 0;
+}
 </style>

src/views/main_web/proj-list.vue

@@ -1,99 +1,114 @@
 <template>
-    <div>
-        <section class="yiyun_warpContent">
-            <div class="yiyun-rows" id="alone">
-                <div v-show="isEmpty" class="nullproduct">
-                    <img src="static\img\nopro.png" alt />
-                    <span class="noprotext">暂无项目</span>
-                </div> 
-                <div class="prjitemList">
-                    <el-row :gutter="64">
-                        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6"
-                        v-for="(projItem, index) in projList"
-                        :key="projItem.Id"
-                        >
-                            <proj-item :projItem="projItem" 
-                                        @lookProjDetailClick="lookProjDetailClick(projItem)"
-                                        @watchAllBtnClick="watchAllBtnClick(projItem, index)"/>
-                        </el-col>
-                    </el-row>
-                </div>
-            </div>
-        </section>
+  <div>
+    <section class="yiyun_warpContent">
+      <div
+        class="yiyun-rows"
+        id="alone"
+      >
+        <div
+          v-show="isEmpty"
+          class="nullproduct"
+        >
+          <img
+            src="static\img\nopro.png"
+            alt
+          />
+          <span class="noprotext">暂无项目</span>
+        </div>
+        <div class="prjitemList">
+          <el-row :gutter="64">
+            <el-col
+              :xs="24"
+              :sm="12"
+              :md="12"
+              :lg="8"
+              :xl="6"
+              v-for="(projItem, index) in projList"
+              :key="projItem.Id"
+            >
+              <proj-item
+                :projItem="projItem"
+                @lookProjDetailClick="lookProjDetailClick(projItem)"
+                @watchAllBtnClick="watchAllBtnClick(projItem, index)"
+              />
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+    </section>
+
+  </div>
 
-    </div>
-    
 </template>
 
 <script>
-import { fetchApi } from '@/utils/request';
-import ProjItem from './proj-item';
+import { fetchApi } from "@/utils/request";
+import ProjItem from "./proj-item";
 export default {
-    data() {
-        return {
-            isEmpty:false,
+  data() {
+    return {
+      isEmpty: false,
+    };
+  },
+  components: {
+    ProjItem,
+  },
+  props: {
+    projList: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    openPrjInfo: Function,
+    addNewFolders: Function,
+  },
+  watch: {
+    projListLength: {
+      immediate: true,
+      handler(val) {
+        if (val > 0) {
+          this.isEmpty = false;
+        } else {
+          this.isEmpty = true;
         }
+      },
     },
-    components: {
-        ProjItem
+  },
+  computed: {
+    projListLength() {
+      return this.projList ? this.projList.length : 0;
     },
-    props:{
-        projList:{
-            type: Array,
-            default() {
-                return []
-            }
-        },
-        openPrjInfo:Function,
-        addNewFolders:Function,
+  },
+  methods: {
+    // 点击了项目管理按钮
+    lookProjDetailClick(projItem) {
+      this.$emit("lookProjDetailClick", projItem);
     },
-    watch:{
-        projListLength: {
-            immediate: true,
-            handler(val) {
-                if(val > 0){
-                    this.isEmpty = false;
-                } else {
-                    this.isEmpty = true;
-                }
-            }              
-        }
-
+    //项目管理
+    manageProj() {
+      this.$router.push("/newproject");
     },
-    computed: {
-        projListLength() {
-            return this.projList ? this.projList.length : 0;
-        }
+    //ProjName处理
+    subProjName(name) {
+      let len = name.length;
+      if (len > 13) {
+        let nameArr = name.slice(0, 7);
+        let _nameArr = name.slice(len - 6, len);
+        return nameArr + "..." + _nameArr;
+      }
+      return name;
     },
-    methods:{
-        // 点击了项目管理按钮
-        lookProjDetailClick(projItem) {
-            this.$emit('lookProjDetailClick', projItem);
-        },
-        //项目管理
-        manageProj(){
-            this.$router.push('/newproject')
-        },
-        //ProjName处理
-        subProjName(name){
-            let len = name.length;
-            if(len > 13){
-                let nameArr = name.slice(0,7);
-                let _nameArr = name.slice(len-6,len);
-                return nameArr + "..." +_nameArr;
-            }
-            return name;
-        },
-        // 点击了观全局按钮
-        watchAllBtnClick(projItem, i) {
-            this.$emit('watchAllBtnClick', projItem, i);
-        },
-    }
-}
+    // 点击了观全局按钮
+    watchAllBtnClick(projItem, i) {
+      this.$emit("watchAllBtnClick", projItem, i);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-    .prjitemList {
-        padding: 0 32px;
-    }
+.prjitemList {
+  padding: 0 32px;
+}
 </style>