byte-sailing-new/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"
			>
				{{ data[index].content }}
			</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"
						@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>
				<div class="tabs">
					<ul>
						<li style="padding-left: 0; border: none" @click="tableTagType = 1" :class="tableTagType == 1 ? 'active' : ''">
							全部（0）
						</li>
						<li  @click="tableTagType = 2" :class="tableTagType == 2 ? 'active' : ''">待办（0）</li>
						<li  @click="tableTagType = 3" :class="tableTagType == 3 ? 'active' : ''">通知（0）</li>
					</ul>
					<div class="more">查看更多&gt;</div>
				</div>
				<el-table :data="noticeData" style="width: 100%">
					<el-table-column prop="date" label="标题内容" width="250">
					</el-table-column>
					<el-table-column prop="name" label="类型" width="120">
					</el-table-column>
					<el-table-column prop="address" label="操作">
						<template #default="scope">
							<span style="cursor: pointer">未读</span>
						</template>
					</el-table-column>
				</el-table>
				<div class="notice-btn-box" style="margin-top: 20px">
					<el-button plain disabled>点击清空</el-button>
					<el-button type="primary" disabled>全部已读</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import { ElMessageBox, ElNotification } from 'element-plus'
import {
  getToken
} from '@/utils/auth'
const { proxy } = getCurrentInstance();
defineProps({
  modelValue: {
    type: Object,
    default: false,
  },
});
const emit = defineEmits(["update:modelValue"]);
const closeNoticeTableModal = () => {
	emit("update:modelValue", false);
};
const tableTagType = ref(1)
let noticeData = ref([
	// {
	// 	date: '2016-05-02',
	// 	name: '王小虎',
	// 	address: '上海市普陀区金沙江路 1518 弄',
	// },
	// {
	// 	date: '2016-05-04',
	// 	name: '王小虎',
	// 	address: '上海市普陀区金沙江路 1517 弄',
	// },
	// {
	// 	date: '2016-05-01',
	// 	name: '王小虎',
	// 	address: '上海市普陀区金沙江路 1519 弄',
	// },
	// {
	// 	date: '2016-05-03',
	// 	name: '王小虎',
	// 	address: '上海市普陀区金沙江路 1516 弄',
	// },
])
let index = ref(0)
let data = ref([])
let value = ref(false)
const moreFn = () => {
	noticeTableModal.value = true
}

const confirm = () => {
	value.value = false
}
// proxy.post('sendMeg/page',{
// 	pageNum:1,
// 	pageSize:30,
// }).then(res=>{
// 	data.value = res.rows
// })

const socketInit = () => {
	window.ws = new WebSocket(
		'ws://'+ import.meta.env.VITE_APP_IP +':20001'+ import.meta.env.VITE_APP_WS_API +'/webStock/' +
			getToken()
		// 'ws://192.168.1.97:8300/webStock/' + window.localStorage.getItem('token')
	)
	//申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
	window.ws.onopen = function () {
		//当WebSocket创建成功时，触发onopen事件
		console.log('open')
	}
	window.ws.onmessage = function (e) {
		//当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
		//在data.value前面插入
		console.log(JSON.parse(e.data).data)
		data.value.unshift({title:"最新公告",content:JSON.parse(e.data).data})
		index.value = 0
		value.value = true
		
		
	}
	window.ws.onclose = function (e) {
		//当客户端收到服务端发送的关闭连接请求时，触发onclose事件
		console.log('close')
	}
	window.ws.onerror = function (e) {
		//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
		console.log(error)
	}
}
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>
.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>