erp_fans/src/components/notice/index.vue

<template>
  <div class="commons-notice">
    <el-dialog title="消息通知" v-model="value" width="460px" :align-center="true" :before-close="handleClose">
      <div class="title">
        <!-- {{ data.length == 0 ? '暂无数据' :  data[indexCopy].title}} -->
      </div>
      <div class="text-content" v-if="data.length > 0" style="margin-top: 10px">
        <h3>{{ data[index].title }}</h3>
        {{ data[index].businessData }}
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="index--" :disabled="data.length < 2 || index == 0">上一条</el-button>
          <el-button size="small" @click="index++" :disabled="data.length == index + 1">下一条</el-button>
          <el-button type="primary" size="small" :disabled="data.length == 0 || data[index].isRead" @click="confirm">确认已读</el-button>
          <!-- <span class="more" @click="moreFn">查看更多 &gt;</span> -->
        </span>
      </template>
    </el-dialog>
    <div class="notice-table-warp" :class="modelValue ? 'notice-table-warp-open' : ''" @click.stop="closeNoticeTableModal">
      <div class="notice-table" @click.stop v-loading="loading">
        <div class="tabs">
          <ul>
            <li style="padding-left: 0; border: none" @click="
                pushInfoReq.whetherFlow = '';
                getPushInfoInit();
              " :class="pushInfoReq.whetherFlow === '' ? 'active' : ''">
              全部<span v-if="pushInfoReq.whetherFlow === ''">（{{ pushInfoReq.total }}）</span>
            </li>
            <li @click="
                pushInfoReq.whetherFlow = 1;
                getPushInfoInit();
              " :class="pushInfoReq.whetherFlow === 1 ? 'active' : ''">
              流程<span v-if="pushInfoReq.whetherFlow === 1">（{{ pushInfoReq.total }}）</span>
            </li>
            <li @click="
                pushInfoReq.whetherFlow = 0;
                getPushInfoInit();
              " :class="pushInfoReq.whetherFlow === 0 ? 'active' : ''">
              业务<span v-if="pushInfoReq.whetherFlow === 0">（{{ pushInfoReq.total }}）</span>
            </li>
          </ul>
          <div class="more" @click="toDealWith({ businessType: 'hisMsg' })">
            查看更多&gt;
          </div>
        </div>
        <el-table :data="noticeData" style="width: 100%" @row-click="rowClick">
          <el-table-column prop="title" label="标题内容" width="250">
            <template #default="scope">
              <el-tooltip class="box-item" effect="dark" :content="scope.row.title" placement="top">
                <div class="noticeData-title">{{ scope.row.title }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="businessType" label="类型" width="120">
            <template #default="scope">
              <span>{{ scope.row.businessType === 0 ? "流程" : "业务" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template #default="scope">
              <span style="cursor: pointer; color: #0084ff" @click.stop="readFn(scope)">已读</span>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-pagination style="text-align: center" :page-size="5" layout="prev, pager, next" :current-page="pushInfoReq.pageNum"
                         :total="pushInfoReq.total" @current-change="handlePageChange" />
        </div>
        <div class="notice-btn-box" style="margin-top: 20px">
          <!-- <el-button plain disabled>点击清空</el-button> -->
          <el-button type="primary" @click="allReadFn" v-if="noticeData.length != 0">全部已读</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ElMessageBox, ElNotification, ElMessage } from "element-plus";
import { getToken } from "@/utils/auth";
const { proxy } = getCurrentInstance();
defineProps({
  modelValue: {
    type: Object,
    default: false,
  },
});
const emit = defineEmits(["update:modelValue"], "changeNum");
const closeNoticeTableModal = () => {
  emit("update:modelValue", false);
};
let noticeData = ref([]);
let index = ref(0);
let data = ref([]);
let value = ref(false);
const moreFn = () => {
  noticeTableModal.value = true;
};

const rowClick = (row) => {
  commonRead([row.id]);
  toDealWith(row);
};

const toDealWith = (item) => {
  let urlConfig = {
    0: "DealWith",
    5: "Claim",
    6: "Abnormal",
    hisMsg: "HisMsg",
  };
  proxy.$router.push({
    name: urlConfig[item.businessType],
  });
};

const allReadFn = () => {
  ElMessageBox.confirm(
    "此操作将会把所有未读消息标记为已读，是否继续？",
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      let arr = [];
      noticeData.value.filter((item) => {
        arr.push(item.id);
      });
      commonRead(arr);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消操作",
      });
    });
};

const readFn = (item) => {
  commonRead([item.row.id]);
};
const commonRead = (ids, type) => {
  proxy.post("/pushInfo/read", { idList: ids }).then((res) => {
    console.log(res);
    ElMessage({
      message: "已读成功",
      type: "success",
    });
    if (type == "confirm") {
      data.value[index].isRead = true;
    } else {
      getPushInfo();
    }
  });
};
const confirm = () => {
  value.value = false;
  commonRead([data.value[index.value].id], "confirm");
};
// proxy.post('sendMeg/page',{
// 	pageNum:1,
// 	pageSize:30,
// }).then(res=>{
// 	data.value = res.rows
// })
const createNotification = (body, title = "通知") => {
  let notification = null;
  if (!("Notification" in window)) {
    // 检查浏览器是否支持通知
    alert("当前浏览器不支持桌面通知");
  } else if (Notification.permission === "granted") {
    // 检查是否已授予通知权限；如果是的话，创建一个通知
    notification = new Notification(title, {
      data: {
        originUrl: window.location.origin + "/index",
      },
      body: body, //一个表示通知正文的字符串，显示在标题下方。
      // tag: "aa", 一个表示通知的识别标签的字符串，默认值是一个空字符串。
      // image: chart, 一个包含要在通知中显示的图像的 URL 的字符串。
      // icon: chart, 一个包含要在通知中显示的图标的 URL 的字符串。
    });
    notification.onclick = function (event) {
      event.preventDefault();
      // 打开新的穿口
      // window.open("http://localhost/ehsd/dataBoard/ehsd_productAnalysis");
      // 打开页面
      window.location.href = event.currentTarget.data.originUrl;
      notification.close();
    };
    // …
  } else if (Notification.permission !== "denied") {
    // 我们需要征求用户的许可
    Notification.requestPermission().then((permission) => {
      // 如果用户接受，我们就创建一个通知
      if (permission === "granted") {
        notification = new Notification(title, {
          data: {
            originUrl: window.location.origin + "/index",
          },
          body: body, //一个表示通知正文的字符串，显示在标题下方。
          // tag: "aa", 一个表示通知的识别标签的字符串，默认值是一个空字符串。
          // image: chart, 一个包含要在通知中显示的图像的 URL 的字符串。
          // icon: chart, 一个包含要在通知中显示的图标的 URL 的字符串。
        });
        notification.onclick = function (event) {
          event.preventDefault();
          window.location.href = event.currentTarget.data.originUrl;
          notification.close();
        };
      }
    });
  }
};
const socket = ref(null);
const intervalId = ref(null);
const sendSocketMsg = () => {
  let jsonData = {
    cmd: "heartbeat",
  };
  socket.value.send(JSON.stringify(jsonData));
  console.log("Timer executed!");
};

const socketInit = () => {
  let prefix =
    window.location.protocol.indexOf("https") >= 0 ? "wss://" : "ws://";
  socket.value = new WebSocket(
    prefix +
      import.meta.env.VITE_APP_IP +
      import.meta.env.VITE_APP_WS_API +
      "/webStock/" +
      getToken()
  );
  //申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
  socket.value.onopen = function () {
    //当WebSocket创建成功时，触发onopen事件
    console.log("open");
    //立马发送一次心跳
    sendSocketMsg();
    // 设置定时器，每30秒执行一次myFunction
    intervalId.value = setInterval(sendSocketMsg, 1000 * 30);
  };
  socket.value.onmessage = function (e) {
    //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
    //在data.value前面插入
    const res = JSON.parse(e.data);
    console.log(res, "socket-message");
    if (res.type == 1) {
      index.value = 0;
      data.value = res.list;
      if (res.list.length > 0) value.value = true;
    }
    if (res.type == 2 && res.count != "0") {
      emit("changeNum", res.count * 1);
      proxy.$emit("openNotice");
      getPushInfo(true);
    }
    if (res.type == 3) {
      ElNotification({
        title: "提示",
        message: res.title,
        position: "bottom-right",
        duration: 0,
      });
      // 桌面通知
      createNotification(res.title);
    }
  };
  socket.value.onclose = function (e) {
    //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
    console.log("socket-close");
    intervalId.value && clearInterval(intervalId.value);
  };
  socket.value.onerror = function (e) {
    //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
    console.log("socket-error", e);
    intervalId.value && clearInterval(intervalId.value);
  };
};

let pushInfoReq = ref({
  pageNum: 1,
  pageSize: 5,
  pushRead: 0,
  type: "",
  total: 0,
  whetherFlow: "",
});

const handlePageChange = (val) => {
  pushInfoReq.value.pageNum = val;
  getPushInfo();
};

const loading = ref(false);
const getPushInfoInit = () => {
  pushInfoReq.value.pageNum = 1;
  getPushInfo();
};
const getPushInfo = (flag) => {
  loading.value = true;
  proxy.post("/pushInfo/page", pushInfoReq.value).then((res) => {
    noticeData.value = res.rows;
    pushInfoReq.value.total = res.total;
    // 桌面通知
    if (flag && noticeData.value.length > 0) {
      let current = noticeData.value.find((x) => x.businessType == 0);
      if (current) {
        createNotification(current.title);
        index.value = 0;
        // current.businessData = current.title;
        // current.title = "流程";
        // data.value = [current];
        // value.value = true;
      }
    }
    setTimeout(() => {
      loading.value = false;
      proxy
        .post("/pushInfo/page", {
          pageNum: 1,
          pageSize: 5,
          pushRead: 0,
          type: "",
          total: 0,
          whetherFlow: "",
        })
        .then((res) => {
          emit("changeNum", res.total * 1);
        });
    }, 550);
  });
};
socketInit();
const handleClose = () => {
  value.value = false;
};

const openBottomBar = (type) => {
  if (type == 1) {
    ElNotification({
      message: "您有一封新的邮件，请注意查收。",
      type: "warning",
      position: "bottom-right",
    });
  } else if (type == 2) {
    value.value = true;
  } else {
    noticeTableModal.value = true;
  }
};
</script>
<style lang="scss">
.notice-table-warp {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  opacity: 0;
  display: none;
}

.notice-table-warp-open {
  opacity: 1;
  display: block;
}
.notice-table {
  position: fixed;
  right: 2px;
  top: 52px;
  padding: 0 20px 20px;
  width: 500px;
  background: #fff;
  box-shadow: 0px 2px 20px 1px rgba(0, 0, 0, 0.1);
  z-index: 20;
  .notice-btn-box {
    text-align: right;
  }
  .tabs {
    display: flex;
    justify-content: space-between;
    height: 60px;
    line-height: 60px;
    font-size: 14px;
    font-weight: 400;
    ul {
      display: flex;
      margin: 23px 0;
      padding: 0;
      li {
        list-style: none;
        padding: 0 20px;
        cursor: pointer;
        height: 14px;
        line-height: 14px;
        border-left: 1px solid #dcdcdc;
      }
      .active {
        color: #0084ff;
      }
    }
    .more {
      color: #0084ff;
      cursor: pointer;
    }
  }
}
</style>
<style>
.noticeData-title {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.commons-notice .el-table__row {
  height: 50px;
}
.commons-notice .el-dialog__footer {
  text-align: left !important;
  margin-top: 24px;
}
.commons-notice .more {
  color: #0084ff;
  float: right;
  cursor: pointer;
}
.commons-notice .el-dialog__header {
  background: #eeeeee;
}
.commons-notice .el-dialog__title {
  position: relative;
  padding-left: 30px;
  color: #333333;
  font-weight: bold;
}
.commons-notice .el-dialog__title::before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAftJREFUOE+tlT9MU1EUxr9zWwgBI/D6Boh/EnbCRiImMhBCGqNhcnDQrbgRAyxGBgYICzXYDbrB4OBENIaY4GAMrmqc3DQxMrxWNGkH0Hv83m0ptvS1EHqTm/fuO+f+zjn3nHueoGYoIFju7kGXGeTrJOd1qlwqq30HdJdzCwX7GY9+7QsX/yO4Ph66gHb0+EkiUzAyRklnrcHyugirb4jKYj/YlgUcHOlVgJrxLkLMHJVSEOmLAFV/Vt2j8SzUrsh0/ncodEDnmec9BswsYV1Vu1RD6+842zmvUR6vkRcAm0Y+vxR6Ku7MVv3bMFir65nVT/gZDNNgBw1+oM7ACe9DTy0e4GHwQnS5uxedbRs8s1t1w1S7I9O5cRfJU/8j9Ybq6ll9ieLhfdFM7w1IfDsyAacFAkXonySB3gokNhuZhNMDGcLfNIGJXWZ3pDVA+z4EfiXwaouA384GzDApEpEUlzXrgI1Dhn7B4cEITOwCYob1aK40iCYMuVlS1BLAY0GMz8ssWxMNdElpVjaaJ+RZCaJ3GbIXASyXTdPC1udAcK8E8TcJvNO4sJtePfsa/bmbDvIj8QrGTDS8ei6QsDkk/Hl2mpm6zUH0bSliGaU8bBLHQ7XA832CXLDomsORxLUvgDfGTJ2pfcGuc1+6qn1VoK1ssBXoOX8B/wDYqv5bje949AAAAABJRU5ErkJggg==);
}
</style>