Просмотр исходного кода

legend 组件,添加corner角标

yunxing 4 лет назад
Родитель
Сommit
90ad8f4074
1 измененных файлов с 72 добавлено и 4 удалено
  1. 72 4
      src/components/Legend/src/legend.vue

+ 72 - 4
src/components/Legend/src/legend.vue

@@ -61,13 +61,21 @@
                 </p>
             </el-tooltip>
             <!-- 编辑分布图 -->
+
+            <!-- 有修改权限 -->
             <el-tooltip v-if='editPmt' class='bjpmt' effect='dark' :content='editTips' placement='left'>
-                <span class='edit-icon' @click='goToEditer'>
+                <span class='edit-icon corner-con' @click='goToEditer'>
                     <img src='@/assets/imgs/bjs.png' alt />
+                    <!-- 角标 -->
+                    <span v-if='draftNum' class='corner' :style='{lineHeight : draftNum > 99 ?"10px":"18px"}'>{{draftNum > 99 ? '...' : draftNum}}</span>
                 </span>
             </el-tooltip>
-            <span v-else class='edit-icon2'>
+
+            <!-- 无修改权限 -->
+            <span v-else class='edit-icon2 corner-con'>
                 <img src='@/assets/imgs/bjs.png' alt />
+                <!-- 角标 -->
+                <span v-if='draftNum' class='corner' :style='{lineHeight : draftNum > 99 ?"10px":"18px"}'>{{draftNum > 99 ? '...' : draftNum}}</span>
             </span>
         </div>
         <div class='select-floor' v-if='isFloor'>
@@ -90,7 +98,7 @@ import legendRemarks from '@/components/legendremarks'
 import lengendEdit from '@/components/editLengend'
 import { mapGetters } from 'vuex'
 import bus from '@/utils/bus.js'
-import { queryStatis, updateStatis, queryRead } from '@/api/public.js'
+import { queryStatis, updateStatis, queryRead, queryDraftNum } from '@/api/public.js'
 
 export default {
     name: 'Legend',
@@ -119,7 +127,10 @@ export default {
             floor: '', //传的楼层
             floorName: '',
             planNum: '', //主要设备房
-            typeNum: ''
+            typeNum: '',
+            draftNum: null, //草稿箱数量, 编辑器修改icon右上角显示
+            interval: 10 * 60 * 1000, //定时器时长,默认 10分钟
+            timer: null //保存定时器
         }
     },
     computed: {
@@ -151,6 +162,33 @@ export default {
     },
     components: { lengendView, legendRemarks, lengendEdit },
     methods: {
+        /**
+         * @name getDraftNum
+         * @description 查询草稿箱数量
+         */
+        async getDraftNum() {
+            let res = null,
+                floorId = this.$cookie.get('floorMapId'),
+                data = {
+                    Distinct: true,
+                    Filters: `projectId=${this.plazaId};isPub=false;floorId=${floorId}`,
+                    PageNumber: 1,
+                    PageSize: 500,
+                    Projection: ['floorId']
+                }
+            try {
+                // 调用接口
+                res = await queryDraftNum(data)
+            } catch (error) {
+                console.error(error)
+            }
+            if (!res) {
+                this.draftNum = null
+                return false
+            }
+            // 草稿箱总条数使用 res.Total, 不使用 Content数组的长度
+            this.draftNum = res.Total || null
+        },
         formatFloor() {
             this.floorSelectAble = []
             this.floorSelectAble = this.floorSelect.filter(item => {
@@ -366,10 +404,20 @@ export default {
     },
     mounted() {
         this.init()
+        // 定时查询草稿箱数量
+        this.getDraftNum() //首次查询
+        this.timer = setInterval(() => {
+            this.getDraftNum()
+        }, this.interval)
+        // 页面销毁前,清除定时器
+        this.$once('hook:beforeDestroy', () => {
+            clearInterval(this.timer)
+        })
     }
 }
 </script>
 <style lang="less" scoped>
+@red: rgb(255, 0, 0); //红色
 .legend-container {
     position: relative;
     top: -15px;
@@ -462,9 +510,29 @@ export default {
             margin-top: -4px;
         }
     }
+
     .edit-icon {
         cursor: pointer;
     }
+    /** 右下角修改,角标样式 */
+    .corner-con {
+        position: relative;
+        .corner {
+            position: absolute;
+            right: -8px;
+            top: 0;
+            display: inline-block;
+            width: 18px;
+            height: 18px;
+            background: @red;
+            border-radius: 90px;
+            font-size: 12px;
+            text-align: center;
+            line-height: 18px;
+            color: #fff;
+        }
+    }
+
     .bjtk {
         width: 40px;
         height: 40px;