Selaa lähdekoodia

Merge branch 'develop' of http://39.106.8.246:3003/web/persagy_topo_editer into develop

YaolongHan 4 vuotta sitten
vanhempi
commit
326e22e458

BIN
src/assets/images/noImg.png


+ 22 - 2
src/components/homeView/deleteDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog title="删除" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false">
+  <el-dialog title="删除" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false" custom-class="deleteDialog">
     <p>确认删除吗?</p>
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">取 消</el-button>
@@ -61,4 +61,24 @@ export default {
     }
   }
 };
-</script>
+</script>
+<style lang="less">
+.deleteDialog {
+  /deep/ .el-dialog__header {
+    border-bottom: 1px solid #f0f1f2ff;
+  }
+  /deep/ .el-dialog__body {
+    padding: 16px 60px;
+  }
+  .el-dialog__footer {
+    padding: 14px 20px 20px;
+    .el-button {
+      padding: 0;
+      width: 80px;
+      height: 32px;
+      text-align: center;
+      line-height: 1;
+    }
+  }
+}
+</style>

+ 23 - 3
src/components/homeView/move.vue

@@ -1,7 +1,7 @@
 <template>
-  <el-dialog title="移动到" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false">
+  <el-dialog title="移动到" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false" custom-class="moveDialog">
     <div>
-      <el-cascader v-model="value" :options="treeData" :props="defaultProps"></el-cascader>
+      <el-cascader v-model="value" :options="treeData" :props="defaultProps" size="small" style="width: 100%"></el-cascader>
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">取 消</el-button>
@@ -85,4 +85,24 @@ export default {
     }
   }
 };
-</script>
+</script>
+<style lang="less">
+.moveDialog {
+  /deep/ .el-dialog__header {
+    border-bottom: 1px solid #f0f1f2ff;
+  }
+  /deep/ .el-dialog__body {
+    padding: 16px 60px;
+  }
+  .el-dialog__footer {
+    padding: 14px 20px 20px;
+    .el-button {
+      padding: 0;
+      width: 80px;
+      height: 32px;
+      text-align: center;
+      line-height: 1;
+    }
+  }
+}
+</style>

+ 23 - 3
src/components/homeView/rename.vue

@@ -1,7 +1,7 @@
 <template>
-  <el-dialog title="重命名" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false">
+  <el-dialog title="重命名" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false" custom-class="renameDialog">
     <div>
-      <el-input v-model="input" placeholder="请输入名称"></el-input>
+      <el-input v-model="input" placeholder="请输入名称" size="small"></el-input>
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">取 消</el-button>
@@ -68,4 +68,24 @@ export default {
     }
   }
 };
-</script>
+</script>
+<style lang="less">
+.renameDialog {
+  /deep/ .el-dialog__header {
+    border-bottom: 1px solid #f0f1f2ff;
+  }
+  /deep/ .el-dialog__body {
+    padding: 16px 60px;
+  }
+  .el-dialog__footer {
+    padding: 14px 20px 20px;
+    .el-button {
+      padding: 0;
+      width: 80px;
+      height: 32px;
+      text-align: center;
+      line-height: 1;
+    }
+  }
+}
+</style>

+ 46 - 7
src/components/homeView/tagDialog.vue

@@ -60,7 +60,7 @@ export default {
       this.inputValue = '';
     },
     // 确认修改
-    confirm() { 
+    confirm() {
       const pa = {
         content: [{
           id: this.data.id,
@@ -93,18 +93,57 @@ export default {
   /deep/ .el-dialog__header {
     border-bottom: 1px solid #f0f1f2ff;
   }
-  .el-tag {
-    margin: 0 10px 10px 0;
-  }
   /deep/ .el-dialog__body {
     max-height: 192px;
     overflow: auto;
+    padding: 20px;
+  }
+  .el-dialog__footer {
+    padding: 14px 20px 20px;
+    .el-button {
+      padding: 0;
+      width: 80px;
+      height: 32px;
+      text-align: center;
+      line-height: 1;
+    }
+  }
+  .el-tag {
+    background: #eff0f1;
+    border-radius: 2px;
+    color: #1f2429ff;
+    margin: 0 10px 10px 0;
+    padding: 5px 6px 5px 8px;
+    font-size: 14px;
+    height: 24px;
+    line-height: 1;
+    border: none;
+    &:hover {
+      border: none;
+    }
+    .el-icon-close {
+      color: #9ca2a9ff;
+      right: 0;
+      &:hover {
+        color: #fff;
+        background-color: #ccc;
+      }
+    }
   }
   .button-new-tag {
-    height: 32px;
+    height: 24px;
     line-height: 30px;
-    padding-top: 0;
-    padding-bottom: 0;
+    margin-bottom: 8px;
+    padding: 0 8px;
+    line-height: 1;
+    border-radius: 2px;
+    border: 1px dotted #0091ff;
+    color: #0091ff;
+    &:hover {
+      background: #fff;
+      color: #0091ff;
+      border: 1px dotted #0091ff;
+    }
   }
   .input-new-tag {
     width: 90px;

+ 6 - 3
src/components/homeView/topoImageCard.vue

@@ -1,8 +1,10 @@
 <!--拓扑图缩略图卡片-->
 <template>
   <el-card :class="{'box-card': true, 'active': data.checked}" shadow="hover" :body-style="{ padding: '0px' }">
-    <img class="image"
-      :src="data.pic?`/image-service/common/image_get?systemId=dataPlatform&key=${data.pic}`:require('@/assets/images/leftImgs/EditBaseImage.png')">
+    <div class="image" v-if="!data.pic" style="line-height: 120px;text-align: center;">
+      <img :src="require('@/assets/images/noImg.png')" style="height:60px;">
+    </div>
+    <img class="image" v-else :src="`/image-service/common/image_get?systemId=dataPlatform&key=${data.pic}`">
     <div class="shadow image" v-if="!isRecycle" @click="toEdit">
       <el-checkbox v-model="data.checked" class="shadowCheck" @change="changeCheck"></el-checkbox>
     </div>
@@ -131,9 +133,10 @@ export default {
     }
   }
   .image {
+    display: block;
     width: 100%;
     height: 120px;
-    display: block;
+    background-color: #f7f9fa;
   }
   .shadow {
     display: none;

+ 21 - 14
src/views/home.vue

@@ -41,14 +41,16 @@
             <i class="el-icon-close" style="float:right;line-height: 28px;margin-right: 5px;" @click="handleCheckAllChange(false)"></i>
           </div>
         </div>
-        <div class="main-body" :class="{'no-data': !cardList.length}">
-          <template v-for="t in cardList">
-            <topoImageCard :isPub="isPub" :data="t" :key="t.id" @changeCheck="changeCheck" @rename="rename" @publishSuc="updateSuc" @moveTo="moveTo"
-              @delete="deleteGraph" @editTag="editTag"></topoImageCard>
-          </template>
-          <div v-if="!cardList.length" style="margin-top: 112px;">
-            <img src="./../assets/images/no-data.png" alt="" style="width: 116px;height:116px;">
-            <p style="font-size: 16px;margin-top: 15px;text-align:center;">暂无数据</p>
+        <div class="main-body">
+          <div class="has-data-body" v-if="cardList.length">
+            <template v-for="t in cardList">
+              <topoImageCard :isPub="isPub" :data="t" :key="t.id" @changeCheck="changeCheck" @rename="rename" @publishSuc="updateSuc" @moveTo="moveTo"
+                @delete="deleteGraph" @editTag="editTag"></topoImageCard>
+            </template>
+          </div>
+          <div class="no-data-body" v-else style="margin-top: 112px;">
+            <img src="@/assets/images/no-data.png" style="width: 116px;height:116px;">
+            <p style="font-size: 16px;margin-top: 15px;">暂无数据</p>
           </div>
         </div>
       </el-main>
@@ -269,7 +271,7 @@ export default {
   }
   .bodys {
     width: 100%;
-    height: 100%;
+    height: calc(100% - 60px);
     .aside {
       .recycle {
         line-height: 48px;
@@ -335,12 +337,17 @@ export default {
         }
       }
       .main-body {
-        display: flex;
-        flex-wrap: wrap;
+        display: block;
         height: calc(100% - 51px);
-        &.no-data {
-          justify-content: center;
-          // align-items: center;
+        overflow: auto;
+        & > div {
+          display: flex;
+          flex-wrap: wrap;
+        }
+        .no-data-body {
+          flex-direction: column;
+          // justify-content: center;
+          align-items: center;
         }
       }
     }