station-test-ui/src/components/HeaderNotice/index.vue

<template>
  <div>
    <el-popover
      trigger="manual"
      v-model="isPopoverShow"
      placement="bottom-end"
      @show="fetchNotice(activeName)"
    >
      <el-badge
        :is-dot="isHadNotice"
        slot="reference"
        class="header-notice"
        @click.native="onPopoverShow"
      >
        <i class="el-icon-bell" />
      </el-badge>
      <el-tabs v-model="activeName" @tab-click="fetchNotice(activeName)" v-loading="isShowLoading">
        <el-tab-pane label="提示信息" name="alarm" class="el-tab-pane">
          <el-container v-if="tabListData.length > 0" direction="vertical">
            <el-main>
              <el-row
                v-for="(item, index) in tabListData"
                :key="index"
                class="list-row"
                @click.native="viewAlarmDetail(item)"
              >
                <el-col :span="4">
                  <el-avatar :size="avatarSize" :src="item.avatarUrl" style="background: #fff;"></el-avatar>
                </el-col>
                <el-col :span="16" style="line-height:22px;font-size: 12px;padding: 0;margin: 0;">
                  <el-row style="margin-bottom: 8px;">
                    <el-col>
                      <!-- <h4 style="margin: 0;">{{item.realname}}</h4> -->
                      <h4 style="margin: 0;">测试液压泵1</h4>
                    </el-col>
                  </el-row>
                  <el-row style="color:rgba(0,0,0,.45);line-height:1.5">
                    <!-- <el-col>设备{{item.device_number}}发生了{{item.alarm_type_name}}</el-col> -->
                    <el-col>设备1001校准有效期临近</el-col>
                    <el-col style="margin-top: 4px;margin-bottom: 4px;">{{item.createTimeAgo}}</el-col>
                  </el-row>
                </el-col>
                <el-col :span="4">
                  <!-- <i class="el-icon-close" @click="del(index)"></i> -->
                </el-col>
              </el-row>
            </el-main>
          </el-container>
          <div v-else class="empty-notice">
            <el-image style="width: 100px; height: 100px" :src="deviceEmptyUrl" fit="fill"></el-image>
            <p>无告警信息</p>
          </div>
        </el-tab-pane>
       
      </el-tabs>
      <div
        v-if="tabListData.length > 0"
        style="text-align:center;line-height: 46px;height: 46px;width:100%"
      >
        <router-link :to="viewMore">
          <el-button type="text" @click="hideAlalrmDialog()">前往处理</el-button>
        </router-link>
      </div>
    </el-popover>
    <view-alarm-dialog 
    :detailVisible="dialogFormVisible" 
    @sendVal="closeDialog" 
    :alarmInfo="alarmInfo"
    />
  </div>
</template>>
<script>
import viewAlarmDialog from "@/views/alarm/component/viewAlarmDialog"
import { formatTime } from "@/utils/index"
export default {
  name: "HeaderNotice",
   components: {
    viewAlarmDialog,
  },
  data() {
    return {
      activeName: "alarm",
      avatarSize: "medium",
      isShowLoading: false,
      isPopoverShow: false,
      isHadNotice: true,
      alarmInfo:[],
      deviceEmptyUrl:
        "https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg",
      alarmMessgeWaitReadImg:require('@/assets/alarm/noread_message.png'),
      alarmMessgeHadReadedImg:require('@/assets/alarm/read_message.png'),
      tabListData: [],
      viewMore: "",
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "120px"
    };
  },
  created: function() {
    // this.fetchNotice();
  },
  methods: {
    fetchNotice(activeName) {

      this.tabListData = [];
      this.isShowLoading = true;
      const params = {
        limit:5,
        is_read: 0,
      };
      this.$http.get("AlarmReport", { params: params }).then(response => {
        this.tabListData = response.data.map((item, index, arr) => {
          // console.log(item, index, arr);
          item.avatarUrl = this.alarmMessgeWaitReadImg;
          let rendor_item = item;
        
          //计算据当前时间的分钟数
          rendor_item.createTimeAgo = formatTime(rendor_item.alarm_time_str)
          return rendor_item;
        });
        if (this.tabListData.length > 0) {
          this.isHadNotice = true
          if (activeName == "alarm") {
            this.viewMore = {
              path: "/alarm/alarmDevice",
              params: { type: activeName }
            };
          }
         
        }
        //this.tabListData = response.data;
        setTimeout(() => {
          this.isShowLoading = false;
        }, 1000);
      });
    },
    viewAlarmDetail(item) {
      this.dialogFormVisible = true;
      this.alarmInfo = item
      item.avatarUrl = this.alarmMessgeHadReadedImg;
      console.log(item)
      //修改为已读
       this.$http.put("AlarmReport/"+item.id,{is_read:1}).then(response => {
         
       });
    },
    onPopoverShow() {
      this.isPopoverShow = !this.isPopoverShow;
    },
    closeDialog(){
      this.dialogFormVisible = false
    },
    hideAlalrmDialog(){
      this.isPopoverShow=false
    }

  }
};
</script>

<style scoped>
.header-notice {
  display: inline-block;
  transition: all 0.3s;
  line-height: 25px;
  margin-top: -5px;
}
.empty-notice {
  text-align: center;
  padding: 73px 0 88px;
}
.el-tab-pane {
  width: 336px;
  min-height: 326px;
  max-height: 400px;
  overflow: auto;
}
/*#FBFBFB #B9E1DC   #F38181  #756C83 */
.el-main {
  padding: 0px;
}
.list-row {
  border-bottom: 1px solid #e8e8e8;
  line-height: 88px;
  cursor: pointer;
  padding-top: 12px;
  padding-bottom: 12px;
}

.list-row:hover {
  background: #ecf6fd;
}

.el-icon-close {
  cursor: pointer;
}

.el-icon-close:hover {
  color: #ef5f65;
}
</style>