src/assets/icons/svg/alarm-home.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="主界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.300397">
+        <g id="异常警告" transform="translate(-1468.000000, -122.000000)" fill="#000000" fill-rule="nonzero">
+            <g id="编组" transform="translate(1468.000000, 122.000000)">
+                <rect id="矩形" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <path d="M9.30923195,2.02433324 C9.77491134,1.74507539 10.3606909,1.77046228 10.8045305,2.10049178 L16.9348344,6.65833873 L17.0554341,6.75466057 C17.5620417,7.18880359 17.858553,7.83620671 17.858553,8.52258247 L17.858553,15.8725474 L17.8541939,16.0176907 C17.7819026,17.2175976 16.8194895,18.1676569 15.6429193,18.1676569 L4.35708075,18.1676569 L4.21696353,18.1631414 C3.05860736,18.088257 2.14144699,17.0913218 2.14144699,15.8725474 L2.14144699,8.52279895 L2.14667089,8.36514909 C2.19177438,7.68568874 2.52672869,7.05865465 3.06516484,6.65833926 L9.19546584,2.10049447 Z M10.0594243,2.9649471 C9.98106349,2.94811965 9.89748036,2.96494528 9.8295714,3.01542217 L3.69926285,7.57327258 L3.6053427,7.65125711 C3.36716077,7.8716339 3.22876238,8.18810985 3.22876238,8.52279895 L3.22876238,15.8725474 L3.2339275,15.9851099 C3.28860185,16.5778056 3.77058378,17.041339 4.35708075,17.041339 L9.37562475,17.0406466 L9.45894699,16.9543314 L9.45935013,12.0522655 L9.46519481,11.973647 C9.50370053,11.7169857 9.72785233,11.5189729 10,11.5189729 C10.2788031,11.5189729 10.5102651,11.7278709 10.5378921,11.998001 L10.5407652,12.056799 L10.5406137,16.9543234 L10.6239359,17.0406466 L15.6429082,17.041339 L15.7515746,17.0359886 C16.3237555,16.9793531 16.7712376,16.4800823 16.7712376,15.8725474 L16.7712376,8.52279895 L16.7648256,8.39829639 C16.7308293,8.06937748 16.5632607,7.76840693 16.3007289,7.57326642 L10.1704369,3.01542833 L10.1168893,2.98387768 Z" id="形状结合" stroke="#000000" stroke-width="0.1"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/TopNav/index.vue

@@ -206,13 +206,22 @@ export default {
 </script>
 
 <style lang="scss">
+.topmenu-container.el-menu.el-menu--horizontal {
+	border-bottom: none;
+}
+.topmenu-container.el-menu.el-menu--horizontal > .el-menu-item.is-active {
+	border-bottom: none !important;
+}
+.topmenu-container.el-menu.el-menu--horizontal > .el-submenu.is-active {
+	--theme: none !important;
+}
 .topmenu-container.el-menu--horizontal > .el-menu-item {
 	float: left;
-	height: 50px !important;
+	height: 84px !important;
-	line-height: 45px !important;
+	line-height: 84px !important;
 	color: #999093 !important;
 	padding: 0 5px !important;
-	// margin: 0 10px !important;
+	font-size: 18px;
 }
 
 .topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
@@ -224,17 +233,18 @@ export default {
 /* submenu item */
 .topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
 	float: left;
-	height: 50px !important;
+	height: 84px !important;
-	line-height: 50px !important;
+	line-height: 89px !important;
 	color: #000 !important;
 	padding: 0 5px !important;
 	margin: 0 10px !important;
+	font-size: 18px;
 }
 </style>
 <style lang="scss" scoped>
 .menu-box {
-	padding: 3px 10px 5px 10px;
+	padding: 7px 15px 9px 15px;
-	border-radius: 30px;
+	border-radius: 32px;
 	color: #000;
 }
 .active {

src/layout/components/Navbar.vue

@@ -12,7 +12,7 @@
 			v-if="!topNav" />
 		<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
 
-		<div style="padding-top: 5px; padding-right: 38px">
+		<div style="padding-top: 5px; padding-right: 24px">
 			<navbar-right :blackTitle="true" />
 		</div>
 	</div>
@@ -80,14 +80,14 @@ export default {
 
 <style lang="scss" scoped>
 .navbar {
-	height: 48px; // 56
+	height: 84px;
 	overflow: hidden;
 	position: relative;
 	background: #fff;
 	box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
 	.hamburger-container {
-		line-height: 48px;
+		line-height: 84px;
 		height: 100%;
 		float: left;
 		cursor: pointer;

src/layout/components/NavbarRight.vue

@@ -8,7 +8,7 @@
 			<svg-icon
 				icon-class="alarm"
 				style="font-size: 24px; cursor: pointer"
-				@click="toHome" />
+				@click="toAlarm" />
 		</div>
 		<!-- <div class="time-msg">
         <div class="line1">{{timeZone}}&nbsp;&nbsp;&nbsp;&nbsp;{{topTime}}</div>
@@ -20,13 +20,14 @@
 					<img
 						:src="require(`../../assets/images/choicepart/avatar.png`)"
 						alt=""
-						width="32"
+						width="42"
-						height="32" />
+						height="42"
+						style="position: relative; top: 4px" />
 					<el-dropdown-menu slot="dropdown">
-						<el-dropdown-item>
+						<!-- <el-dropdown-item>
 							<svg-icon icon-class="helpbtn" />
 							帮助文档
-						</el-dropdown-item>
+						</el-dropdown-item> -->
 						<el-dropdown-item @click.native="logout">
 							<svg-icon icon-class="exitbtn" />
 							退出登录
@@ -98,8 +99,8 @@ export default {
 				})
 				.catch(() => {});
 		},
-		toHome() {
+		toAlarm() {
-			this.$router.push({ path: '/' });
+			this.$router.push({ path: '/abnormalWarning' });
 		},
 	},
 };
@@ -117,10 +118,11 @@ export default {
 		display: inline-block;
 		margin-right: 20px;
 		vertical-align: top;
-		padding-top: 7px;
+		line-height: 84px;
 	}
 	.base-msg {
 		display: inline-block;
+		padding-top: 10px;
 		.avatar {
 			display: inline-block;
 			margin-right: 10px;

src/layout/components/Sidebar/Logo.vue

@@ -67,7 +67,7 @@ export default {
 	},
 	data() {
 		return {
-			title: '中建材智能化院',
+			title: 'MES产品化重构',
 			logo: logoImg,
 		};
 	},
@@ -87,8 +87,8 @@ export default {
 .sidebar-logo-container {
 	position: relative;
 	width: 100%;
-	height: 56px;
+	height: 84px;
-	line-height: 56px;
+	line-height: 84px;
 	background: #1445cc;
 	text-align: center;
 	overflow: hidden;

src/views/abnormalWarning/components/NavbarRight.vue

@@ -1,15 +1,11 @@
 <template>
 	<div class="right-msg" :style="blackTitle ? 'color: #000' : 'color: #fff'">
-		<div class="home-icon" v-if="blackTitle">
+		<!-- <div class="home-icon" v-if="blackTitle">
-			<!-- <svg-icon
-				icon-class="home"
-				style="font-size: 24px; cursor: pointer"
-				@click="toHome" /> -->
 			<svg-icon
 				icon-class="alarm"
 				style="font-size: 24px; cursor: pointer"
 				@click="toHome" />
-		</div>
+		</div> -->
 		<!-- <div class="time-msg">
         <div class="line1">{{timeZone}}&nbsp;&nbsp;&nbsp;&nbsp;{{topTime}}</div>
         <div class="line2">{{topDate}}</div>

src/views/abnormalWarning/components/TopNav.vue

@@ -204,6 +204,12 @@ export default {
 </script>
 
 <style lang="scss">
+.warnmenu-container.el-menu.el-menu--horizontal > .el-menu-item.is-active {
+	border-bottom: none !important;
+}
+.warnmenu-container.el-menu.el-menu--horizontal > .el-submenu.is-active {
+	--theme: none !important;
+}
 .warnmenu-container.el-menu--horizontal > .el-menu-item {
 	float: left;
 	height: 84px !important;

src/views/abnormalWarning/index.vue

@@ -2,23 +2,137 @@
 	<div class="warning-page">
 		<navbar />
 		<div class="main-box">
-			<div>异常警告</div>
+			<div class="title">
+				<span></span>
+				异常警告
+				<div class="return-home" @click="toHome">
+					<svg-icon
+						icon-class="alarm-home"
+						style="font-size: 20px; position: relative; top: 2px" />
+					返回首页
+				</div>
+			</div>
+			<search-bar
+				:formConfigs="formConfig"
+				removeBlue
+				ref="searchBarForm"
+				@headBtnClick="buttonClick" />
+			<base-table
+				:page="1"
+				:limit="100000"
+				:table-props="tableProps"
+				:table-data="list"
+				:max-height="tableH" />
 		</div>
 		<div class="footer">
 			<img src="../../assets/img/alarm-bg.png" alt="" />
+			<div>&copy; 中建材智能自动化研究院有限公司</div>
 		</div>
 	</div>
 </template>
 <script>
 import Navbar from './components/Navbar';
+import moment from 'moment';
+import tableHeightMixin from '@/mixins/tableHeightMixin';
 export default {
 	name: 'AbnormalWarning',
+	mixins: [tableHeightMixin],
 	components: { Navbar },
 	data() {
-		return {};
+		return {
+			formConfig: [
+				{
+					type: 'input',
+					label: '报警来源',
+					placeholder: '报警来源',
+					param: 'content',
+				},
+				{
+					type: 'select',
+					label: '时间段',
+					selectOptions: [],
+					labelField: 'name',
+					valueField: 'id',
+					param: 'typeId',
+					filterable: true,
+				},
+				{
+					type: 'select',
+					label: '报警级别',
+					selectOptions: [],
+					labelField: 'name',
+					valueField: 'id',
+					param: 'typeId',
+					filterable: true,
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+			],
+			heightNum: 280,
+			tableProps: [
+				{
+					prop: 'createTime',
+					label: '报警时间',
+					width: 180,
+					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				},
+				{
+					prop: 'productionLineName1',
+					label: '报警来源',
+					showOverflowtooltip: true,
+				},
+				{
+					prop: 'productionLineName2',
+					label: '报警类型',
+					showOverflowtooltip: true,
+				},
+				{
+					prop: 'productionLineName3',
+					label: '报警级别',
+					showOverflowtooltip: true,
+				},
+				{
+					prop: 'productionLineName4',
+					label: '报警原因',
+					showOverflowtooltip: true,
+				},
+				{
+					prop: 'sectionName5',
+					label: '报警详情',
+					showOverflowtooltip: true,
+				},
+			],
+			list: [
+				{ productionLineName: 1 },
+				{ productionLineName: 1 },
+				{ productionLineName: 1 },
+				{ productionLineName: 1 },
+				{ productionLineName: 1 },
+				{ productionLineName: 1 },
+				{ productionLineName: 1 },
+				{ productionLineName: 1 },
+				{ productionLineName: 1 },
+				{ productionLineName: 1 },
+				{ productionLineName: 1 },
+				{ productionLineName: 1 },
+				{ productionLineName: 1 },
+				{ productionLineName: 1 },
+				{ productionLineName: 1 },
+				{ productionLineName: 1 },
+			],
+		};
 	},
 	created() {},
-	methods: {},
+	methods: {
+		buttonClick(val) {},
+		toHome() {
+			this.$router.push({ path: '/' });
+		},
+	},
 };
 </script>
 <style lang="scss" scoped>
@@ -34,6 +148,29 @@ export default {
 		margin: 16px auto 0;
 		z-index: 10;
 		padding: 24px 32px;
+		.title {
+			font-size: 16px;
+			color: #000000;
+			position: relative;
+			cursor: pointer;
+			span {
+				display: inline-block;
+				float: left;
+				width: 4px;
+				height: 16px;
+				background-color: #0b58ff;
+				border-radius: 1px;
+				margin-right: 8px;
+				margin-top: 4px;
+			}
+			.return-home {
+				position: absolute;
+				color: rgba(0, 0, 0, 0.3);
+				font-size: 14px;
+				right: 0px;
+				top: 0px;
+			}
+		}
 	}
 	.footer {
 		position: fixed;
@@ -44,6 +181,16 @@ export default {
 			width: 100%;
 			height: 220px;
 		}
+		div {
+			width: 100%;
+			color: red;
+			position: absolute;
+			bottom: 10px;
+			text-align: center;
+			font-size: 12px;
+			color: #c7c7c7;
+			letter-spacing: 1px;
+		}
 	}
 }
 </style>

src/views/home/components/Navbar.vue

@@ -16,7 +16,7 @@
 
 		<top-nav id="homemenu-container" class="homemenu-container" v-if="topNav" />
 
-		<div style="padding-top: 5px; padding-right: 38px">
+		<div style="padding-top: 5px; padding-right: 24px">
 			<navbar-right :blackTitle="true" />
 		</div>
 	</div>

src/views/home/components/NavbarRight.vue

@@ -8,7 +8,7 @@
 			<svg-icon
 				icon-class="home-alarm-white"
 				style="font-size: 24px; cursor: pointer"
-				@click="toHome" />
+				@click="toAlarm" />
 		</div>
 		<!-- <div class="time-msg">
         <div class="line1">{{timeZone}}&nbsp;&nbsp;&nbsp;&nbsp;{{topTime}}</div>
@@ -70,9 +70,9 @@ export default {
 		this.getUserMsg();
 		// this.getTime();
 	},
-	beforeDestroy() {
+	// beforeDestroy() {
-		clearInterval(this.timer);
+	// 	clearInterval(this.timer);
-	},
+	// },
 	methods: {
 		// getTime() {
 		// 	let _this = this;
@@ -99,8 +99,8 @@ export default {
 				})
 				.catch(() => {});
 		},
-		toHome() {
+		toAlarm() {
-			this.$router.push({ path: '/' });
+			this.$router.push({ path: '/abnormalWarning' });
 		},
 	},
 };

src/views/home/components/TopNav.vue

@@ -204,6 +204,9 @@ export default {
 </script>
 
 <style lang="scss">
+.homemenu-container.el-menu.el-menu--horizontal > .el-submenu.is-active {
+	--theme: none !important;
+}
 .homemenu-container.el-menu--horizontal > .el-menu-item {
 	float: left;
 	height: 84px !important;

src/views/home/index.vue

@@ -20,8 +20,10 @@
 			</el-tabs>
 			<div class="current-date">(6.13-6.20)</div>
 			<div class="current-time">
-				<span style="display: inline-block; margin-right: 16px">03:12AM</span>
+				<span style="display: inline-block; margin-right: 16px">
-				<span>2020.12.24</span>
+					{{ topTime + timeZone }}
+				</span>
+				<span>{{ topDate }}</span>
 			</div>
 		</div>
 		<el-row class="main-top" :gutter="16">
@@ -169,6 +171,9 @@ export default {
 	data() {
 		return {
 			activeName: '日',
+			topDate: '',
+			topTime: '',
+			timeZone: '',
 			middleMenu: [
 				{ name: '工单管理', url: '', icon: 'home-work-menu' },
 				{ name: '订单管理', url: '', icon: 'home-order-menu' },
@@ -226,8 +231,23 @@ export default {
 			],
 		};
 	},
-	created() {},
+	created() {
-	methods: {},
+		this.getTime();
+	},
+	beforeDestroy() {
+		clearInterval(this.timer);
+	},
+	methods: {
+		getTime() {
+			let _this = this;
+			this.timer = setInterval(function () {
+				_this.topDate = moment().format('YYYY.MM.DD');
+				let temp = moment().format('A-hh:mm').split('-');
+				_this.timeZone = temp[0];
+				_this.topTime = temp[1];
+			}, 1000);
+		},
+	},
 };
 </script>
 
@@ -241,7 +261,7 @@ export default {
 	width: 100%;
 }
 .date-tabs {
-	padding-left: 24px;
+	padding-left: 40px;
 	padding-top: 20px;
 	position: relative;
 }
@@ -279,12 +299,12 @@ export default {
 	color: #fff;
 	font-size: 18px;
 	position: absolute;
-	right: 24px;
+	right: 38px;
 	top: 14px;
 }
 .main-top {
 	width: 100%;
-	padding: 0 8px 0 24px;
+	padding: 0 20px 0 40px;
 	.title {
 		position: absolute;
 		left: 34px;
@@ -328,7 +348,7 @@ export default {
 	background-color: #fff;
 	border-radius: 24px;
 	height: 133px;
-	margin: 16px 24px;
+	margin: 16px 38px 16px 40px;
 	padding-top: 15px;
 	.item {
 		width: 20%;
@@ -374,7 +394,7 @@ export default {
 }
 .main-bottom {
 	width: 100%;
-	padding: 0 8px 0 24px;
+	padding: 0 20px 0 40px;
 	.box {
 		background-color: #fff;
 		border-radius: 24px;