优化物联概览

src/views/iot/alarm/list/index.vue

@@ -0,0 +1,167 @@
+<template>
+	<div class="home-container">
+		<el-row :gutter="15" class="home-card-three">
+			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+				<div class="home-card-item" style="height: auto">
+					<div class="home-card-item-title">
+						<span>告警消息</span>
+						<el-button size="small" text type="primary" @click="toMore()">更多信息</el-button>
+					</div>
+					<el-table :data="tableData.data" style="width: 100%" v-loading="loading">
+						<el-table-column label="ID" align="center" prop="id" width="100" v-col="'ID'" />
+						<el-table-column label="告警类型" width="120" prop="type" align="center" show-overflow-tooltip v-col="'type'">
+							<template #default="scope">
+								<span v-if="scope.row.type == 1">规则告警</span>
+								<span v-else-if="scope.row.type == 2">设备自主告警</span>
+								<span v-else-if="scope.row.type == 3">规侧告警升级</span>
+								<span v-else>设备自主告警</span>
+							</template>
+						</el-table-column>
+						<el-table-column label="规则级别" width="120" align="center" prop="alarmLevel.name" show-overflow-tooltip v-col="'alarmLevel'" />
+						<el-table-column label="规则名称" prop="ruleName" show-overflow-tooltip v-col="'ruleName'" />
+						<el-table-column label="产品标识" prop="productKey" show-overflow-tooltip v-col="'productKey'" />
+						<el-table-column label="设备标识" prop="deviceKey" show-overflow-tooltip v-col="'deviceKey'" />
+
+						<el-table-column prop="status" label="告警状态" width="100" align="center" v-col="'status'">
+							<template #default="scope">
+								<el-tag type="success" size="small" v-if="scope.row.status">已处理</el-tag>
+								<el-tag type="info" size="small" v-else>未处理</el-tag>
+							</template>
+						</el-table-column>
+						<el-table-column prop="createdAt" label="告警时间" align="center" width="170" v-col="'createdAt'"></el-table-column>
+						<el-table-column label="操作" width="130" align="center" fixed="right" v-col="'handle'">
+							<template #default="scope">
+								<el-button v-auth="'detail'" size="small" text type="primary" @click="onOpenDetailDic(scope.row)">详情</el-button>
+								<el-button v-auth="'edit'" size="small" text type="warning" @click="onOpenEditDic(scope.row)" v-if="scope.row.status == 0"
+									>处理</el-button
+								>
+							</template>
+						</el-table-column>
+					</el-table>
+				</div>
+			</el-col>
+		</el-row>
+
+		<EditDic ref="editDicRef" @dataList="getAlarmList" />
+		<DetailDic ref="detailRef" @dataList="getAlarmList" />
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, reactive, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import api from '/@/api/datahub'
+import EditDic from '../log/component/edit.vue'
+import DetailDic from '../log/component/detail.vue'
+
+const editDicRef = ref()
+const detailRef = ref()
+const router = useRouter()
+const state = reactive({
+	loading: false,
+	tableData: {
+		data: [],
+		total: 0,
+		loading: false,
+		param: {
+			pageNum: 1,
+			pageSize: 20,
+			status: '',
+			dateRange: [],
+		},
+	},
+})
+
+const { loading, tableData } = toRefs(state)
+
+const getAlarmList = () => {
+	api.iotManage.getAlarmList(state.tableData.param).then((res: any) => {
+		state.tableData.data = res.list
+		state.tableData.total = res.Total
+	})
+}
+//打开详情页
+const onOpenDetailDic = (row: any) => {
+	detailRef.value.openDialog(row)
+}
+// 打开修改产品弹窗
+const onOpenEditDic = (row: any) => {
+	editDicRef.value.openDialog(row)
+}
+// 告警信息-更多信息
+const toMore = () => {
+	router.push({ path: '/iotmanager/alarm/log' })
+}
+// 页面加载时
+onMounted(() => {
+	getAlarmList()
+})
+</script>
+
+<style scoped lang="scss">
+
+.home-container {
+	overflow: hidden;
+
+	.home-card-one,
+	.home-card-two,
+	.home-card-three {
+		.icoimg {
+			width: 75px;
+			height: 75px;
+		}
+
+		.title_status {
+			width: 7px;
+			height: 7px;
+			background: #c1bbbb;
+			border-radius: 50px;
+			margin-right: 5px;
+		}
+
+		.home-card-item,
+		.home-card-top {
+			width: 100%;
+			border-radius: 8px;
+			transition: all ease 0.3s;
+			padding: 10px 20px;
+			overflow: hidden;
+			background: var(--el-color-white);
+			color: var(--el-text-color-primary);
+
+			// border: 1px solid var(--next-border-color-light);
+			&:hover {
+				// box-shadow: 0 2px 12px var(--next-color-dark-hover);
+				transition: all ease 0.3s;
+			}
+
+			&-icon {
+				width: 70px;
+				height: 70px;
+				border-radius: 100%;
+				flex-shrink: 1;
+
+				i {
+					color: var(--el-text-color-placeholder);
+				}
+			}
+
+			&-title {
+				font-size: 15px;
+				font-weight: bold;
+				height: 30px;
+			}
+		}
+	}
+
+	.home-card-three {
+		.home-card-item-title {
+			display: flex;
+			justify-content: space-between;
+			// span:nth-child(2) {
+			// 	color: #409eff;
+			// }
+		}
+	}
+}
+</style>

src/views/iot/iotmanager/dashboard.vue

@@ -1,16 +1,7 @@
 <template>
 	<div class="home-container">
 		<el-row :gutter="15" class="home-card-one mb15">
-			<el-col
-				:xs="24"
-				:sm="12"
-				:md="12"
-				:lg="6"
-				:xl="6"
-				v-for="(v, k) in homeOne"
-				:key="k"
-				:class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }"
-			>
+			<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(v, k) in homeOne" :key="k">
 				<div class="home-card-top-part">
 					<div class="top">
 						<img :src="'/imgs/' + v.icoimg" class="icoimg" />
@@ -48,50 +39,7 @@
 				<VueUiDonut :dataset="pieDataset" :config="pieConfig" />
 			</div>
 		</div>
-		<el-row :gutter="15" class="home-card-three">
-			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-				<div class="home-card-item" style="height: auto">
-					<div class="home-card-item-title">
-						<span>告警消息</span>
-						<el-button size="small" text type="primary" @click="toMore()">更多信息</el-button>
-					</div>
-					<el-table :data="tableData.data" style="width: 100%" v-loading="loading">
-						<el-table-column label="ID" align="center" prop="id" width="100" v-col="'ID'" />
-						<el-table-column label="告警类型" width="120" prop="type" align="center" show-overflow-tooltip v-col="'type'">
-							<template #default="scope">
-								<span v-if="scope.row.type == 1">规则告警</span>
-								<span v-else-if="scope.row.type == 2">设备自主告警</span>
-								<span v-else-if="scope.row.type == 3">规侧告警升级</span>
-								<span v-else>设备自主告警</span>
-							</template>
-						</el-table-column>
-						<el-table-column label="规则级别" width="120" align="center" prop="alarmLevel.name" show-overflow-tooltip v-col="'alarmLevel'" />
-						<el-table-column label="规则名称" prop="ruleName" show-overflow-tooltip v-col="'ruleName'" />
-						<el-table-column label="产品标识" prop="productKey" show-overflow-tooltip v-col="'productKey'" />
-						<el-table-column label="设备标识" prop="deviceKey" show-overflow-tooltip v-col="'deviceKey'" />
-
-						<el-table-column prop="status" label="告警状态" width="100" align="center" v-col="'status'">
-							<template #default="scope">
-								<el-tag type="success" size="small" v-if="scope.row.status">已处理</el-tag>
-								<el-tag type="info" size="small" v-else>未处理</el-tag>
-							</template>
-						</el-table-column>
-						<el-table-column prop="createdAt" label="告警时间" align="center" width="170" v-col="'createdAt'"></el-table-column>
-						<el-table-column label="操作" width="130" align="center" fixed="right" v-col="'handle'">
-							<template #default="scope">
-								<el-button v-auth="'detail'" size="small" text type="primary" @click="onOpenDetailDic(scope.row)">详情</el-button>
-								<el-button v-auth="'edit'" size="small" text type="warning" @click="onOpenEditDic(scope.row)" v-if="scope.row.status == 0"
-									>处理</el-button
-								>
-							</template>
-						</el-table-column>
-					</el-table>
-				</div>
-			</el-col>
-		</el-row>
-
-		<EditDic ref="editDicRef" @dataList="getAlarmList" />
-		<DetailDic ref="detailRef" @dataList="getAlarmList" />
+		<AlarmList></AlarmList>
 	</div>
 </template>
 
@@ -103,8 +51,7 @@ import 'vue-data-ui/style.css'
 import { getLineData, getPieData } from '/@/utils/dataUiOptions'
 import api from '/@/api/datahub'
 import dayjs from 'dayjs'
-import EditDic from '../alarm/log/component/edit.vue'
-import DetailDic from '../alarm/log/component/detail.vue'
+import AlarmList from '/@/views/iot/alarm/list/index.vue'
 import { useThemeChange } from '/@/hooks/useCommon'
 
 // 页面是显示状态