yangys
2025-09-06 25f146ce8920ec090a62ee89af78f35623e6fe27
src/page/index/top/top-menu.vue
@@ -6,24 +6,47 @@
        <span>{{ itemHome.name }}</span>
      </template>
    </el-menu-item>
    <el-menu-item index="0" @click="openTodo(itemHome)">
      
      <template #title>
            <el-badge :value="logsLen" :max="99" :offset="[10, 15]" class="todoItems">
              <el-tooltip
              class="box-item"
              effect="dark"
              :content="`您有${logsLen}条任务需要处理`"
              placement="top-start"
            >
             {{ itemTodo.name }}
              </el-tooltip>
            </el-badge>
          <!-- <span >{{ itemTodo.name }}</span>-->
           
           <el-dropdown>
            <span class="el-dropdown-link">
                 <el-badge ref="topbadge" :value="remindCount" :max="99" :offset="[10, 0]" :class="{'blink-badge':this.remindCount>0}">
                    <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="`您有${remindCount}条任务需要处理`"
                    placement="top-start"
                  >
                  {{ itemTodo.name }}
                    </el-tooltip>
                  </el-badge>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="item in remindItems" @click.native="handleRemindClick(item)">{{item.text}}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
      </template>
      <!--
      <el-dropdown>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>Action 1</el-dropdown-item>
            <el-dropdown-item>Action 2</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    -->
    </el-menu-item>
    <template v-for="(item, index) in items" :key="index">
@@ -44,7 +67,7 @@
</style>
<script>
import { mapGetters } from 'vuex';
import { getList } from '@/api/flow/todolist'; //任务提醒
//import { getList } from '@/api/flow/todolist'; //任务提醒
export default {
  name: 'top-menu',
  data() {
@@ -60,7 +83,10 @@
      activeIndex: '0',
      items: [],
      logsLen: 0,//任务提醒数量
      todoCount:0,
      exportCount:0,
      remindCount:0, //提醒总数量
      remindItems:[{text:'流程任务',id:"todo"},{text:'导出工控网',id:"todo1"},],
      intervalId : undefined
    };
  },
@@ -95,23 +121,74 @@
        this.items = res;
      });
    },
    handleRemindClick(item){
      console.log(item)
      if(item.id == 'todo'){
        this.$router.push({ path: '/flow/todoindex' });
      }else{
        this.$router.push({ path: '/flowmgr/programexport' });
      }
    },
    openTodo() {
        this.$router.push({ path: '/flow/todoindex' });
        //this.box = false;
    },
    getCount() {
      axios({
        url: '/blade-mdm/remind/task-count',
        method: 'get',
        params: {},
      }).then(
        res => {
          if(res.data.code == 200){
            this.todoCount = res.data.data.todoCount;
            this.exportCount = res.data.data.exportCount;
            this.remindCount = this.todoCount + this.exportCount;
            this.setRemindItems();
          }
        },
        error => {
          console.log(error);
        }
      );
      /*
      try{
        getList(1,10).then((res) => {
          this.logsLen = res.data.data.total;
        getList(1,1).then((res) => {
          this.todoCount = res.data.data.total;
          this.remindCount = this.todoCount + this.exportCount;
          this.setRemindItems();
          this.dataList = res.data.data.records;
        }).catch(e=>{
          console.log('3333',this.intervalId)
          clearInterval(this.intervalId);
        });
      }catch(e2){
        console.log('e2',e2);
      }*/
    },
    setRemindItems(){
      this.remindItems=[];
      if(this.todoCount>0){
        this.remindItems.push({text:'流程任务('+this.todoCount+")",id:'todo'})
      }
      if(this.exportCount>0){
        this.remindItems.push({text:'工控网导出('+this.exportCount+")",id:'export'})
      }
    }
  },
};
</script>
<style lang="css">
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}
.blink-badge .el-badge__content {
    animation: blink 2s infinite;
}
</style>