|
|
@@ -0,0 +1,331 @@
|
|
|
+<template>
|
|
|
+ <el-button type="primary" @click="$router.push('/')" class="back-home-btn">返回首页</el-button>
|
|
|
+ <ItemWrap class="contetn_left-bottom contetn_lr-item" title="消息中心">
|
|
|
+ <!-- <el-button type="primary" class="back-home-btn btn-add" @click="showAddUser">添加用户</el-button> -->
|
|
|
+ <div class="demo-datetime-picker">
|
|
|
+ <div class="block">
|
|
|
+ <el-date-picker class="date-picker" v-model="datatime" type="datetimerange" range-separator="至"
|
|
|
+ start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-input class="input-search" placeholder="请输入内容" v-model="input" />
|
|
|
+ <el-button type="primary" class="btn-search" @click="showAddUser">搜索</el-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="btngroup">
|
|
|
+ <el-button type="primary" class="btntype" @click="showAddUser">报警信息</el-button>
|
|
|
+ <el-button type="primary" class="btntype" @click="showAddUser">库存情况</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="user_skills" style="margin-top:20px;">
|
|
|
+ <el-table :data="tableData" class="eltables">
|
|
|
+ <el-table-column prop="warntype" label="报警类型" />
|
|
|
+ <el-table-column prop="detail" label="报警详情" />
|
|
|
+ <el-table-column prop="address" label="设备地址" />
|
|
|
+ <el-table-column prop="date" label="报警时间" />
|
|
|
+ <el-table-column prop="state" label="通知状态" />
|
|
|
+ <!-- <el-table-column label="操作">
|
|
|
+ <el-button type="primary" size="mini" @click="">编辑</el-button>
|
|
|
+ <el-button type="danger" size="mini" @click="">删除</el-button>
|
|
|
+ </el-table-column> -->
|
|
|
+ </el-table>
|
|
|
+ <el-pagination class="pagination" background layout="prev, pager, next" :total="totalItems"
|
|
|
+ :page-size="pageSize" :current-page="currentPage" @current-change="handleCurrentChange" />
|
|
|
+ </div>
|
|
|
+ </ItemWrap>
|
|
|
+</template>
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, reactive } from "vue";
|
|
|
+import CapsuleChart from "@/components/datav/capsule-chart";
|
|
|
+import { ranking } from "@/api";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
+import Adduser from "./adduser.vue";
|
|
|
+
|
|
|
+const tableData = [
|
|
|
+ {
|
|
|
+ warntype: '断电报警',
|
|
|
+ date: '2016-05-03',
|
|
|
+ detail: '设备断电报警',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ state: 'No',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ warntype: '断电报警',
|
|
|
+ date: '2016-05-03',
|
|
|
+ detail: '设备断电报警',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ state: 'No',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ warntype: '断电报警',
|
|
|
+ date: '2016-05-03',
|
|
|
+ detail: '设备断电报警',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ state: 'No',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ warntype: '断电报警',
|
|
|
+ date: '2016-05-03',
|
|
|
+ detail: '设备断电报警',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ state: 'No',
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+const tableDatas = [
|
|
|
+ {
|
|
|
+ warntype: '断电报警',
|
|
|
+ date: '2016-05-03',
|
|
|
+ detail: '设备断电报警',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ state: 'No',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ warntype: '断电报警',
|
|
|
+ date: '2016-05-03',
|
|
|
+ detail: '设备断电报警',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ state: 'No',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ warntype: '断电报警',
|
|
|
+ date: '2016-05-03',
|
|
|
+ detail: '设备断电报警',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ state: 'No',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ warntype: '断电报警',
|
|
|
+ date: '2016-05-03',
|
|
|
+ detail: '设备断电报警',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ state: 'No',
|
|
|
+ },
|
|
|
+]
|
|
|
+const datatime = ref('')
|
|
|
+const input = ref('')
|
|
|
+const isAddUserVisible = ref(false);
|
|
|
+const showAddUser = () => {
|
|
|
+ isAddUserVisible.value = true;
|
|
|
+};
|
|
|
+// 分页相关状态
|
|
|
+const pageSize = ref(10); // 每页显示的条目数
|
|
|
+const currentPage = ref(1); // 当前页码
|
|
|
+const totalItems = ref(tableData.length); // 总条目数
|
|
|
+
|
|
|
+// 根据当前页码和每页大小计算显示的数据
|
|
|
+// const displayedTableData = computed(() => {
|
|
|
+// const start = (currentPage.value - 1) * pageSize.value;
|
|
|
+// const end = start + pageSize.value;
|
|
|
+// return tableData.slice(start, end);
|
|
|
+// });
|
|
|
+
|
|
|
+// 当前页码改变时触发的方法
|
|
|
+const handleCurrentChange = (val: number) => {
|
|
|
+ currentPage.value = val;
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.contetn_lr-item {
|
|
|
+ font-size: 30px;
|
|
|
+ margin-top: 80px;
|
|
|
+ height: 800px;
|
|
|
+}
|
|
|
+
|
|
|
+.eltables {
|
|
|
+ width: 100%;
|
|
|
+ font-size: large;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-search,
|
|
|
+.back-home-btn {
|
|
|
+ background-color: transparent;
|
|
|
+ position: absolute;
|
|
|
+ margin-top: 30px;
|
|
|
+ top: 10px;
|
|
|
+ left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-search {
|
|
|
+ margin-top: 37px;
|
|
|
+ margin-left: 690px;
|
|
|
+ height: 45px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .input-search {
|
|
|
+ background: none;
|
|
|
+ background-color: transparent !important;
|
|
|
+ border: none;
|
|
|
+ width: 200px;
|
|
|
+ height: 50px;
|
|
|
+ font-size: 30px;
|
|
|
+ margin-top: 10px;
|
|
|
+ top: -60px;
|
|
|
+ left: 450px;
|
|
|
+ padding: auto;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-input {
|
|
|
+ background: none;
|
|
|
+ background-color: transparent !important;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
|
|
+.btntype {
|
|
|
+ background-color: transparent;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 50px;
|
|
|
+ font-size: large
|
|
|
+}
|
|
|
+
|
|
|
+.btngroup {
|
|
|
+ margin-left: 44%;
|
|
|
+}
|
|
|
+
|
|
|
+.user_skills {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: larger;
|
|
|
+}
|
|
|
+
|
|
|
+.user_skills ::v-deep .el-table--fit {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.user_skills ::v-deep .el-table,
|
|
|
+.el-table__expanded-cell {
|
|
|
+ background-color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.user_skills ::v-deep .el-table tr {
|
|
|
+ background-color: transparent !important;
|
|
|
+}
|
|
|
+
|
|
|
+.user_skills ::v-deep .el-table--enable-row-transition .el-table__body td,
|
|
|
+.el-table .cell {
|
|
|
+ background-color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-table::before {
|
|
|
+ content: "";
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 0px;
|
|
|
+ background-color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-dialog__body {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.user_skills ::v-deep .el-table__body tr:hover>td {
|
|
|
+ background-color: rgba(255, 255, 255, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+.user_skills ::v-deep .el-table thead th {
|
|
|
+ background-color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.user_skills ::v-deep .el-table__body tr:hover>td {
|
|
|
+ background-color: rgba(255, 255, 255, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-table {
|
|
|
+ border: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-table::before,
|
|
|
+::v-deep .el-table::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ border-bottom: none !important;
|
|
|
+ height: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+.user_skills ::v-deep .el-table td,
|
|
|
+.user_skills ::v-deep .el-table th {
|
|
|
+ text-align: center;
|
|
|
+ vertical-align: middle;
|
|
|
+ color: #006ff0;
|
|
|
+ border: none;
|
|
|
+ height: 0px;
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.user_skills ::v-deep .el-table th {
|
|
|
+ color: #00beed;
|
|
|
+}
|
|
|
+
|
|
|
+.user_skills ::v-deep .el-table,
|
|
|
+.user_skills ::v-deep .el-table * {
|
|
|
+ border: none !important;
|
|
|
+ box-shadow: none !important;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .pagination {
|
|
|
+ display: flex;
|
|
|
+ justify-content: right;
|
|
|
+ align-items: center;
|
|
|
+ background-color: transparent;
|
|
|
+ margin-right: 15px;
|
|
|
+ margin-top: 260px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-dialog {
|
|
|
+ position: relative;
|
|
|
+ /* 确保伪元素定位正确 */
|
|
|
+ background-color: rgba(255, 255, 255, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-dialog::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: -1;
|
|
|
+ /* 确保伪元素在内容之下 */
|
|
|
+ background-color: inherit;
|
|
|
+ /* 继承父元素的背景色 */
|
|
|
+ backdrop-filter: blur(5px);
|
|
|
+ -webkit-backdrop-filter: blur(10px);
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-table__body-wrapper {
|
|
|
+ overflow-x: hidden;
|
|
|
+ /* 隐藏水平滚动条 */
|
|
|
+ scrollbar-width: none;
|
|
|
+ /* Firefox专用 */
|
|
|
+ -ms-overflow-style: none;
|
|
|
+ /* IE 和 Edge */
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
|
|
+ /* Chrome, Safari 和 Opera */
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .date-picker {
|
|
|
+ background-color: transparent;
|
|
|
+ height: 50px;
|
|
|
+ font-size: 30px;
|
|
|
+ left: 20px;
|
|
|
+ border-width: 1px;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: blue;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+</style>
|
