样式修改

shuishen

2023-12-20 0fd94489f221b23e621f303d396ba9411545070a

样式修改

 src/page/index/top/top-notice.vue

@@ -1,18 +1,18 @@
<template>
  <div class="noticeBtn" @click="noticeBtn">
    <el-badge v-if="!view">
      <img src="img/notice/xiaoxi-png.png" style="width: 28px;height: 28px; display: flex;" />
    </el-badge>
    <el-badge v-if="view">
      <!-- <i class="el-icon-bell"></i> -->
      <img src="img/notice/xiaoxi-gif.gif" style="width: 28px;height: 28px; display: flex;" />
    </el-badge>
  </div>
  <!-- <el-popover placement="bottom"
    <div class="noticeBtn" @click="noticeBtn">
        <el-badge v-if="!view">
            <img src="img/notice/xiaoxi-png.png" style="width: 26px;height: 26px; display: flex;" />
        </el-badge>
        <el-badge v-if="view">
            <!-- <i class="el-icon-bell"></i> -->
            <img src="img/notice/xiaoxi-gif.gif" style="width: 26px;height: 26px; display: flex;" />
        </el-badge>
    </div>
    <!-- <el-popover placement="bottom"
              width="0"
              trigger="click"> -->

  <!-- <el-tabs v-model="activeName">
    <!-- <el-tabs v-model="activeName">
      <el-tab-pane label="邮件(1)"
                   name="first"></el-tab-pane>
      <el-tab-pane label="消息(2)"
@@ -25,141 +25,141 @@
                   :option="option"
                   @page-change="pageChange"></avue-notice>
    </el-scrollbar> -->
  <!-- <div slot="reference">
    <!-- <div slot="reference">
      <el-badge is-dot>
        <i class="el-icon-bell"></i>
      </el-badge>
    </div> -->
  <!-- </el-popover> -->
    <!-- </el-popover> -->
</template>

<script>
import { updateView, getList } from "@/api/task/reportForRepairs";
import { updateView, getList } from "@/api/task/reportForRepairs"
let list = [{
  img: '/img/bg/vip1.png',
  title: '史蒂夫·乔布斯 关注了你',
  subtitle: '05-08 15:08',
  tag: '已经开始',
  status: 0
    img: '/img/bg/vip1.png',
    title: '史蒂夫·乔布斯 关注了你',
    subtitle: '05-08 15:08',
    tag: '已经开始',
    status: 0
}, {
  img: '/img/bg/vip2.png',
  title: '斯蒂夫·沃兹尼亚克 关注了你',
  subtitle: '05-08 15:08',
  tag: '未开始',
  status: 1
    img: '/img/bg/vip2.png',
    title: '斯蒂夫·沃兹尼亚克 关注了你',
    subtitle: '05-08 15:08',
    tag: '未开始',
    status: 1
}, {
  img: '/img/bg/vip3.png',
  title: '蒂姆·库克 关注了你',
  subtitle: '05-08 15:08',
  status: 3,
  tag: '有错误'
    img: '/img/bg/vip3.png',
    title: '蒂姆·库克 关注了你',
    subtitle: '05-08 15:08',
    status: 3,
    tag: '有错误'
}, {
  img: '/img/bg/vip4.png',
  title: '比尔·费尔南德斯 关注了你',
  subtitle: '05-08 15:08',
  status: 4,
  tag: '已完成'
}];
    img: '/img/bg/vip4.png',
    title: '比尔·费尔南德斯 关注了你',
    subtitle: '05-08 15:08',
    status: 4,
    tag: '已完成'
}]
export default {
  name: "top-notice",
  data() {
    return {
      baseUrl: "https://sk.hubeishuiyi.cn",
      total: 0,
      view: false,
      activeName: 'first',
      option: {
        props: {
          img: 'img',
          title: 'title',
          subtitle: 'subtitle',
          tag: 'tag',
          status: 'status'
        },
      },
      data: list,
    }
  },
  created() {
    this.getNoticeNumber()
  },
  mounted() {
    this.createEventSource()
  },
  methods: {
    getNoticeNumber() {
      var values = {
        viewType: 2
      }
      var that = this;
      // 获取通知数量
      getList(1, 10, values).then((res) => {
        const data = res.data.data;
        that.total = data.total;
        if (that.total > 0) {
          that.view = true
        } else {
          that.view = false
    name: "top-notice",
    data () {
        return {
            baseUrl: "https://sk.hubeishuiyi.cn",
            total: 0,
            view: false,
            activeName: 'first',
            option: {
                props: {
                    img: 'img',
                    title: 'title',
                    subtitle: 'subtitle',
                    tag: 'tag',
                    status: 'status'
                },
            },
            data: list,
        }
      })

    },
    noticeBtn() {
      this.view = false
      const data = {}
      // 更新状态
      updateView(data).then((res) => {
      })
      // 菜单跳转
      this.$router.push({ path: '/task/index' });
    created () {
        this.getNoticeNumber()
    },
    createEventSource() {
      this.baseUrl = `${window.location.protocol}//${window.location.host}`
      var that = this
      if (window.EventSource) {
        this.source = new EventSource(
          this.baseUrl +
          "/api/sse/sse/connect?type=web&userId=1"
        )
        this.source.addEventListener(
          "open",
          function () {
            console.log("建立连接。。。")
          },
          false
        )
        this.source.addEventListener("message", function (e) {
          console.log("收到消息", e.data)
          // const data = JSON.parse(e.data)
          // that.number = data.count
          // 获取消息列表
          that.getNoticeNumber()
        })
        this.source.addEventListener(
          "error",
          function (e) {
            if (e.readyState === EventSource.CLOSED) {
              console.log("连接关闭")
            } else {
              console.log(e)
    mounted () {
        this.createEventSource()
    },
    methods: {
        getNoticeNumber () {
            var values = {
                viewType: 2
            }
          },
          false
        )
      } else {
        console.log("你的浏览器不支持SSE")
      }
    },
    pageChange(page, done) {
      setTimeout(() => {
        this.$message.success('页码' + page)
        this.data = this.data.concat(list);
        done();
      }, 1000)
            var that = this
            // 获取通知数量
            getList(1, 10, values).then((res) => {
                const data = res.data.data
                that.total = data.total
                if (that.total > 0) {
                    that.view = true
                } else {
                    that.view = false
                }
            })

    },
  }
};
        },
        noticeBtn () {
            this.view = false
            const data = {}
            // 更新状态
            updateView(data).then((res) => {
            })
            // 菜单跳转
            this.$router.push({ path: '/task/index' })
        },
        createEventSource () {
            this.baseUrl = `${window.location.protocol}//${window.location.host}`
            var that = this
            if (window.EventSource) {
                this.source = new EventSource(
                    this.baseUrl +
                    "/api/sse/sse/connect?type=web&userId=1"
                )
                this.source.addEventListener(
                    "open",
                    function () {
                        console.log("建立连接。。。")
                    },
                    false
                )
                this.source.addEventListener("message", function (e) {
                    console.log("收到消息", e.data)
                    // const data = JSON.parse(e.data)
                    // that.number = data.count
                    // 获取消息列表
                    that.getNoticeNumber()
                })
                this.source.addEventListener(
                    "error",
                    function (e) {
                        if (e.readyState === EventSource.CLOSED) {
                            console.log("连接关闭")
                        } else {
                            console.log(e)
                        }
                    },
                    false
                )
            } else {
                console.log("你的浏览器不支持SSE")
            }
        },
        pageChange (page, done) {
            setTimeout(() => {
                this.$message.success('页码' + page)
                this.data = this.data.concat(list)
                done()
            }, 1000)

        },
    }
}
</script>

<style lang="scss" scoped></style>