diff --git a/src/app/pages/home-page/home-page.component.html b/src/app/pages/home-page/home-page.component.html new file mode 100644 index 0000000..d61d5ae --- /dev/null +++ b/src/app/pages/home-page/home-page.component.html @@ -0,0 +1,288 @@ +
+
+
+ + 26 + 今日预警 +
+
+ + +
+
+
    +
  • +
    + + 您有一条新的预警信息！员工服务：加油员未穿工作服加油或顾客自行加油。 +
    +
    + 查看 + 忽略 +
    +
    • +
  • +
    + + 您有一条新的预警信息！员工服务：加油员未穿工作服加油或顾客自行加油。 +
    +
    + 查看 + 忽略 +
    +
    • +
  • +
    + + 您有一条新的预警信息！员工服务：加油员未穿工作服加油或顾客自行加油。 +
    +
    + 查看 + 忽略 +
    +
    • +
  • +
    + + 您有一条新的预警信息！员工服务：加油员未穿工作服加油或顾客自行加油。 +
    +
    + 查看 + 忽略 +
    +
    • +
  • +
    + + 您有一条新的预警信息！员工服务：加油员未穿工作服加油或顾客自行加油。 +
    +
    + 查看 + 忽略 +
    +
    • +
+
    +
+
+
+
+
+
+
+
+ +
+
+
+
+

312

+ 预警总数 +
+ + +
+
+ 区域排名 +
+
+
+ + + TOP {{key + 1}} + + + {{item.name}} + + + + + {{item.num}} + +
+
+
+
+
+
+
+
+
+
+
+
+
+ 事件排名 +
+
+
+
+ + {{'0' + (key + 1)}} + + + {{key + 1}} + + + +
+ {{item.name}} +
+
+
+
+
+
+
+
+ {{item.num}} +
+
+
+
+
+
+
+
+
+ 站点排名 +
+
+
+
+ + {{'0' + (key + 1)}} + + + {{key + 1}} + +
+ {{item.name}} +
+
+ 北京-朝阳 +
+
+ {{item.num}} +
+
+
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+ 设备总数 + 312 +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 206 + 总数 +
+
+
+
01
+ 员工服务 + 20 +
+
+
01
+ 员工服务 + 20 +
+
+
01
+ 员工服务 + 20 +
+
+
+ + +
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 206 + 总数 +
+ +
+ +
+
+ +
+
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/src/app/pages/home-page/home-page.component.scss b/src/app/pages/home-page/home-page.component.scss new file mode 100644 index 0000000..1fd0995 --- /dev/null +++ b/src/app/pages/home-page/home-page.component.scss @@ -0,0 +1,579 @@ +.homepagebox { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; +} + +.informbox { + width: 100%; + height: 50px; + margin: 12px 0; + display: flex; + box-sizing: border-box; + padding: 0 24px; + align-items: center; + justify-content: space-between; + + .warningnumber { + width: 250px; + display: flex; + align-items: center; + + img { + width: 66px; + } + + .num { + font-size: 40px; + text-shadow: 0px 0px 6px #8df; + color: white; + font-weight: 600; + margin: 0 7px; + } + + .today { + font-size: 20px; + font-family: titlefont; + color: #D0EAFF; + margin-bottom: 13px; + margin-left: 4px; + + } + + + } + + .inform { + flex: 1; + border: 1px solid rgba(54, 162, 255, 0.4); + height: 48px; + display: flex; + align-items: center; + justify-content: space-between; + + .infologo { + img { + width: 32px; + } + + height: 32px; + line-height: 32px; + color: #91CCFF; + font-size: 14px; + margin-left: 16px; + margin-right: 40px; + } + + #container { + flex: 1; + position: relative; + height: 46px; + overflow: hidden; + } + + #list-wrapper { + position: relative; + } + + ul { + list-style: none; + } + .info { + flex: 1; + display: flex; + height: 46px; + line-height: 46px; + color: #fff; + display: flex; + align-items: center; + justify-content: space-between; + .infoitem { + flex: 1; + display: flex; + align-items: center; + img { + width: 40px; + } + color: #fff; + } + + .btn { + color: #36A2FF; + + span { + cursor: pointer; + } + + span:nth-child(1) { + margin-right: 24px; + } + + span:nth-child(2) { + margin-right: 40px; + } + } + + } + } +} + +.centerbox { + height: 460px; + width: 100%; + display: flex; + + .leftbox { + height: 100%; + width: 90%; + display: flex; + flex-direction: column; + + .title { + box-sizing: border-box; + padding: 0 20PX; + width: 100%; + height: 48px; + } + + .leftboxcontent { + flex: 1; + display: flex; + box-sizing: border-box; + padding: 16px; + padding-right: 6px; + + .leftitem { + position: relative; + flex: 1; + border: 1px solid rgba(54, 162, 255, 0.3); + margin: 0 8px; + box-sizing: border-box; + padding: 12px 16px; + display: flex; + flex-direction: column; + + .progress { + height: 4px; + width: 100%; + background: rgba(54, 162, 255, 0.2); + position: relative; + + .colorbar { + height: 4px; + // position: absolute; + left: 0; + top: 0; + } + + .red { + color: #FF4B65; + background: linear-gradient(90deg, rgba(255, 75, 101, 0) 0%, #FF4B65 100%); + } + + .yellow { + color: #FF9963; + background: linear-gradient(90deg, rgba(255, 153, 99, 0) 0%, #FF9963 100%); + } + + .blue { + color: #36A2FF; + background: linear-gradient(90deg, rgba(54, 162, 255, 0) 0%, #36A2FF 100%); + } + } + + .itemname { + font-size: 15px; + color: #fff; + margin-bottom: 8px; + font-size: 15px; + } + + .box { + flex: 1; + width: 100%; + } + + .areabox { + display: flex; + flex-direction: column; + justify-content: space-around; + + .areaboxitemtop { + display: flex; + justify-content: space-between; + align-items: center; + color: #FFFFFF; + font-size: 14px; + margin-bottom: 12px; + + .red { + color: #FF4B65; + } + + .yellow { + color: #FF9963; + } + + .blue { + color: #36A2FF; + } + } + } + + .eventbox { + display: flex; + flex-direction: column; + justify-content: space-around; + + .eventboxitem { + display: flex; + align-items: center; + color: #fff; + font-size: 12px; + + .eventname { + display: inline-block; + width: 30%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + .block { + display: inline-block; + width: 14px; + height: 14px; + line-height: 12px; + font-size: 8px; + color: #fff; + } + + .yellow { + background-color: #FF9963; + } + + .blue { + background-color: #36A2FF; + + } + } + + .progressbox { + flex: 1; + } + } + } + + .stationbox { + display: flex; + flex-direction: column; + justify-content: space-around; + + .stationboxitem { + display: flex; + align-items: center; + color: #fff; + font-size: 12px; + + .stationname { + display: inline-block; + width: 50%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + .block { + display: inline-block; + width: 14px; + height: 14px; + line-height: 12px; + font-size: 8px; + color: #fff; + } + + .yellow { + background-color: #FF9963; + // background-image: url(../../../assets/images/yellowbg.png); + } + + .blue { + background-color: #36A2FF; + // background-image: url(../../../assets/images/bluebg.png); + + } + } + + .area { + flex: 1; + + .yellow { + color: #FF9963; + } + + .blue { + color: #36A2FF; + + } + } + } + } + + } + + .leftitem:nth-child(1) { + flex: .8; + position: relative; + border: 0; + + .warningnum { + position: absolute; + left: 43%; + top: 20%; + color: white; + text-align: center; + + h1 { + text-shadow: 0px 0px 6px #8df; + color: white; + font-weight: 600; + font-size: 48px; + margin-bottom: 0; + } + } + + img { + position: absolute; + } + + .bucket { + left: 13%; + top: 14%; + + } + + .circle { + left: 16%; + top: 3%; + } + } + } + } + + .rightbox { + width: 20%; + height: 100%; + display: flex; + flex-direction: column; + + .title { + box-sizing: border-box; + padding: 0 8PX; + width: 100%; + height: 48px; + } + + .rightboxcontent { + + flex: 1; + box-sizing: border-box; + padding: 16px; + padding-left: 0; + + .rightitem { + position: relative; + height: 100%; + border: 1px solid rgba(54, 162, 255, 0.3); + + .equipmentechart { + height: 100%; + } + + .equipmentnum { + position: absolute; + display: flex; + flex-direction: column; + align-items: center; + left: 39%; + top: 25%; + + .equipment { + font-size: 20px; + font-family: titlefont; + color: #D0EAFF; + } + + .num { + font-size: 40px; + text-shadow: 0px 0px 6px #8df; + color: white; + font-weight: 600; + line-height: 35px; + } + + + } + } + } + } +} + +.bottombox { + flex: 1; + display: flex; + + .title { + box-sizing: border-box; + width: 100%; + height: 48px; + } + + .bottomitem { + flex: 1; + height: 100%; + display: flex; + flex-direction: column; + + .bottomitemcontent { + flex: 1; + box-sizing: border-box; + padding: 16px 0; + + .bottomitemchartbox { + position: relative; + height: 100%; + border: 1px solid rgba(54, 162, 255, 0.3); + display: flex; + position: relative; + + .numbox { + position: absolute; + left: 8.5%; + top: 28%; + z-index: 9999; + display: flex; + flex-direction: column; + align-items: center; + + .name { + font-size: 20px; + font-family: titlefont; + color: #D0EAFF; + } + + .num { + font-size: 36px; + text-shadow: 0px 0px 6px #8df; + color: white; + font-weight: 600; + line-height: 28px; + + } + } + + .numlistbox { + position: absolute; + left: 5%; + bottom: 6%; + display: flex; + flex-direction: column; + + .numlistboxitem { + display: flex; + color: #fff; + align-items: center; + margin: 3px 0; + + span { + font-size: 12px; + } + + .top { + display: inline-block; + width: 15px; + height: 15px; + line-height: 15px; + text-align: center; + font-size: 8px; + border-radius: 2px; + } + + .top1 { + background: #FF4B65; + } + + .top2 { + background: #FF9963; + } + + .top3 { + background: #36A2FF; + } + + .name { + margin: 0 16px; + } + } + } + + .eventechartpie, + .oilechartpie { + height: 100%; + width: 23%; + position: relative; + } + + .eventechartline, + .oilechartline { + height: 100%; + flex: 1; + } + } + } + + .bottomitemcontent1 { + + padding-left: 30px; + padding-right: 4px; + } + + .bottomitemcontent2 { + padding-left: 15px; + padding-right: 16px; + } + } +} + + +.angle-border { + position: absolute; + width: 8px; + height: 8px; +} + +.left-top-border { + top: 0; + left: 0; + border-left: 2px solid #FFFFFF; + border-top: 2px solid #FFFFFF; +} + +.right-top-border { + top: 0; + right: -2px; + border-right: 2px solid #FFFFFF; + border-top: 2px solid #FFFFFF; +} + +.left-bottom-border { + bottom: 0; + left: 0; + border-bottom: 2px solid #FFFFFF; + border-left: 2px solid #FFFFFF; +} + +.right-bottom-border { + bottom: 0; + right: -2px; + border-right: 2px solid #FFFFFF; + border-bottom: 2px solid #FFFFFF; +} diff --git a/src/app/pages/home-page/home-page.component.ts b/src/app/pages/home-page/home-page.component.ts new file mode 100644 index 0000000..36beb69 --- /dev/null +++ b/src/app/pages/home-page/home-page.component.ts @@ -0,0 +1,479 @@ +import { Component, OnInit } from '@angular/core'; +import * as echarts from 'echarts'; +@Component({ + selector: 'app-home-page', + templateUrl: './home-page.component.html', + styleUrls: ['./home-page.component.scss'] +}) +export class HomePageComponent implements OnInit { + + constructor() { } + + equipmentechart//设备饼图 + equipmentechartdata = [ + { name: '接入油站', value: '100' }, + { name: '摄像头', value: '100' }, + { name: '加油站模型', value: '100' } + ] + equipmentechartOption = { + color: ['#91CCFF', '#46DFFF', '#36A2FF'], + tooltip: { + trigger: 'item'//触发类型 + }, + legend: { + bottom: '8%', + left: 'center', + orient: 'vertical', + itemGap: 20, + itemWidth: 6, + itemHeight: 6, + formatter: (name) => { + let data = this.equipmentechartdata + let value + for (var i = 0, l = data.length; i < l; i++) { + if (data[i].name == name) { + value = data[i].value; + } + } + return '{a|' + name + '}' + '{b|' + value + '}'; + }, + textStyle: { + color: '#fff', + rich: { + a: { + width: 70 + }, + b: { + // align: 'right', + } + } + } + }, + series: [ + { + type: 'pie', + radius: ['55%', '70%'], + bottom: '30%', + avoidLabelOverlap: false,//防止标签重叠策略 + label: {//每一个标签外网延伸的引导说明 + show: false, + position: 'outside' + }, + labelLine: {//引导线 + show: true, + showAbove: true + }, + emphasis: {//中间高亮区域 + label: { + show: false, + fontSize: '40', + fontWeight: 'bold' + } + }, + data: this.equipmentechartdata, + tooltip: {//鼠标移入提示 + position: 'left', + padding: [14, 19], + backgroundColor: 'rgba(28, 129, 218, 0.4)', + textStyle: { + color: '#fff', + fontSize: 12 + } + } + } + ] + }; + + warningechartpie//预警饼图 + warningechartpieOption = { + color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'], + tooltip: { + trigger: 'item'//触发类型 + }, + series: [ + { + type: 'pie', + radius: ['65%', '80%'], + bottom: '30%', + avoidLabelOverlap: false,//防止标签重叠策略 + label: {//每一个标签外网延伸的引导说明 + show: false, + position: 'outside' + }, + labelLine: {//引导线 + show: true, + showAbove: true + }, + emphasis: {//中间高亮区域 + label: { + show: false, + fontSize: '40', + fontWeight: 'bold' + } + }, + data: [ + { name: '员工服务', value: '100' }, + { name: '监控设备检测', value: '100' }, + { name: '安全隐患', value: '100' }, + { name: '员工服务2', value: '100' }, + { name: '监控设备检测2', value: '100' }, + { name: '安全隐患2', value: '100' } + ], + tooltip: {//鼠标移入提示 + position: 'right', + padding: [14, 19], + backgroundColor: 'rgba(28, 129, 218, 0.4)', + textStyle: { + color: '#fff', + fontSize: 12 + } + } + } + ] + }; + + + oilchartpie//卸油饼图 + oilchartpieData = [ + { name: '事前准备', value: '100' }, + { name: '事中操作', value: '100' }, + { name: '全程监测', value: '100' } + ] + oilchartpieOption = { + color: ['#91CCFF', '#46DFFF', '#36A2FF', '#FF6181', '#B4C3FF', '#FF9963', '#5A9CFF', '#4BFFD4', '#46DFFF', '#91CCFF'], + tooltip: { + trigger: 'item'//触发类型 + }, + legend: { + bottom: '8%', + left: 'center', + orient: 'vertical', + itemGap: 10, + itemWidth: 6, + itemHeight: 6, + formatter: (name) => { + let data = this.oilchartpieData + let value + for (var i = 0, l = data.length; i < l; i++) { + if (data[i].name == name) { + value = data[i].value; + } + } + return '{a|' + name + '}' + '{b|' + value + '}'; + }, + textStyle: { + color: '#fff', + rich: { + a: { + width: 60 + }, + b: { + // align: 'right', + } + } + } + }, + series: [ + { + type: 'pie', + radius: ['65%', '80%'], + bottom: '30%', + avoidLabelOverlap: false,//防止标签重叠策略 + label: {//每一个标签外网延伸的引导说明 + show: false, + position: 'outside' + }, + labelLine: {//引导线 + show: true, + showAbove: true + }, + emphasis: {//中间高亮区域 + label: { + show: false, + fontSize: '40', + fontWeight: 'bold' + } + }, + data: this.oilchartpieData, + tooltip: {//鼠标移入提示 + position: 'right', + padding: [14, 19], + backgroundColor: 'rgba(28, 129, 218, 0.4)', + textStyle: { + color: '#fff', + fontSize: 12 + } + } + } + ] + }; + + warningechartbar//预警折线图 + warningechartbarOption = { + xAxis: { + type: 'category', + data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30], + axisLine: { + show: false, + lineStyle: { + color: '#91CCFF' + } + }, + axisTick: {//刻度线 + show: false + }, + inverse: true + + }, + yAxis: { + type: 'value', + nameTextStyle: { + color: '#C4E2FC' + }, + splitLine: {//分割线 + lineStyle: { + color: ['#0f4374'], + width: 2 + } + }, + axisTick: {//刻度线 + show: false + }, + axisLine: {//轴线 + show: false, + lineStyle: { + color: '#C4E2FC' + } + } + }, + series: [ + { + data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 16, 15, 14, 13, 12, 11, 10, 8, 7, 6, 3, 2, 1], + type: 'line', + smooth: true, + showSymbol: false, + label: { + show: true, + position: 'top' + }, + lineStyle: { + color: '#46DFFF', + width: 1 + }, + areaStyle: { + opacity: 0.8, + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, color: '#46DFFF' // 0% 处的颜色 + }, + { + offset: 0.3, color: '#46DFFF' // 0% 处的颜色 + }, + { + offset: 1, color: 'rgba(0, 13, 33, 0)' // 100% 处的颜色 + }], + global: false // 缺省为 false + } + }, + } + ], + grid: { + left: '36px', + right: '30px', + bottom: '38px', + top: '50px' + } + }; + + oilchartbar//卸油折线图 + oilchartbarOption = { + xAxis: { + type: 'category', + data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30], + axisLine: { + show: false, + lineStyle: { + color: '#91CCFF' + } + }, + axisTick: {//刻度线 + show: false + }, + inverse: true + + }, + yAxis: { + type: 'value', + nameTextStyle: { + color: '#C4E2FC' + }, + splitLine: {//分割线 + lineStyle: { + color: ['#0f4374'], + width: 2 + } + }, + axisTick: {//刻度线 + show: false + }, + axisLine: {//轴线 + show: false, + lineStyle: { + color: '#C4E2FC' + } + } + }, + series: [ + { + data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 16, 15, 14, 13, 12, 11, 10, 8, 7, 6, 3, 2, 1], + type: 'line', + smooth: true, + showSymbol: false, + label: { + show: true, + position: 'top' + }, + lineStyle: { + color: '#36A2FF', + width: 1 + }, + areaStyle: { + opacity: 0.8, + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, color: '#36A2FF' // 0% 处的颜色 + }, + { + offset: 0.3, color: '#36A2FF' // 0% 处的颜色 + }, + { + offset: 1, color: 'rgba(0, 13, 33, 0)' // 100% 处的颜色 + }], + global: false // 缺省为 false + } + }, + } + ], + grid: { + left: '36px', + right: '30px', + bottom: '38px', + top: '50px' + } + }; + ngOnInit(): void { + // 饼图 + this.equipmentechart = echarts.init(document.getElementById('equipmentechart')); + this.equipmentechart.setOption(this.equipmentechartOption); + // 预警饼图 + this.warningechartpie = echarts.init(document.getElementById('eventechartpie')); + this.warningechartpie.setOption(this.warningechartpieOption); + // 预警线图 + this.warningechartbar = echarts.init(document.getElementById('eventechartline')); + this.warningechartbar.setOption(this.warningechartbarOption); + // 卸油饼图 + this.oilchartpie = echarts.init(document.getElementById('oilechartpie')); + this.oilchartpie.setOption(this.oilchartpieOption); + // 卸油线图 + this.oilchartbar = echarts.init(document.getElementById('oilechartline')); + this.oilchartbar.setOption(this.oilchartbarOption); + + + window.onresize = () => { + setTimeout(() => { + this.warningechartpie.resize(); + this.warningechartbar.resize(); + this.oilchartpie.resize(); + this.oilchartbar.resize(); + }, 200); + + }; + + this.rollStart() + } + + timer + rollStart() { + var ROLL_SPEED = 100 + var noticeList1 = document.getElementById('notice-list'); + var noticeList2 = document.getElementById('notice-list-2'); + var listWrapper = document.getElementById('list-wrapper'); + noticeList2.innerHTML = noticeList1.innerHTML; + this.timer = setInterval(rollStart, ROLL_SPEED); + + function rollStart() { + if (Math.abs(_subStr(listWrapper.style.top)) >= noticeList1.clientHeight) { + listWrapper.style.top = '0px' + } else { + var top = listWrapper.style.top + listWrapper.style.top = _subStr(top) - 1 + 'px' + } + } + // 截取px前数值 + function _subStr(str) { + var index = str.indexOf('px'); + if (index > -1) { + return parseFloat(str.substr(0, index + 1)) + } + } + } + mouseEnter() { + // console.log('进入了') + window.clearInterval(this.timer); + } + mouseleave() { + // console.log('离开了') + this.rollStart() + } + + + areaList: any = [ + { name: '加油区', num: 92 }, + { name: '油罐区', num: 81 }, + { name: '出入口', num: 66 }, + { name: '便利店', num: 34 }, + { name: '办公区', num: 20 }, + { name: '其他区域', num: 17 } + ] + eventList: any = [ + { name: '员工服务', num: 92 }, + { name: '监控设备监测', num: 81 }, + { name: '安全隐患', num: 77 }, + { name: '车流调查', num: 34 }, + { name: '员工服务', num: 92 }, + { name: '监控设备监测', num: 81 }, + { name: '安全隐患', num: 77 }, + { name: '车流调查', num: 34 }, + { name: '安全隐患', num: 77 }, + { name: '车流调查', num: 34 } + ] + stationList: any = [ + { name: '北京市第十九加油站', num: 92 }, + { name: '北京市第十九加油站', num: 81 }, + { name: '北京市第十九加油站', num: 77 }, + { name: '北京市第十九加油站', num: 34 }, + { name: '北京市第十九加油站', num: 92 }, + { name: '北京市第十九加油站', num: 81 }, + { name: '北京市第十九加油站', num: 77 }, + { name: '北京市第十九加油站', num: 34 }, + { name: '北京市第十九加油站', num: 77 }, + { name: '北京市第十九加油站', num: 34 } + ] + width(width) { + let style: any = {} + style.width = width + '%'; + return style + } +} diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index f8c1dbb..5a6cfa9 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -6,25 +6,33 @@
-
  • - 数字油站 -
    • -
  • - 今日预警 -
    • -
  • - 预警记录 -
    • +
    +
  • + 首页 +
    • +
  • + 数字油站 +
    • +
  • + 今日预警 +
    • +
  • + 预警记录 +
    • +
    +
    +
  • + 数字油站 +
    • +
  • + 今日预警 +
    • +
  • + 预警记录 +
    • +
    + -
  • - 数字油站 -
    • -
  • - 今日预警 -
    • -
  • - 预警记录 -
    • diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss index 7b1a7bc..0df94dc 100644 --- a/src/app/pages/home/home.component.scss +++ b/src/app/pages/home/home.component.scss @@ -19,16 +19,20 @@ background: url('../../../assets/images/navbg.png') no-repeat; background-size: 100% 115%; position: relative; - - li { - width: 10%; - height: 52px; - line-height: 52px; - text-align: center; - cursor: pointer; - font-family: sybold; - color: #EBFAFF; + .libox{ + width: 33%; + display: flex; + li { + flex: 1; + height: 52px; + line-height: 52px; + text-align: center; + cursor: pointer; + font-family: sybold; + color: #EBFAFF; + } } + } diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts index bd1ba89..0986da5 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/src/app/pages/pages-routing.module.ts @@ -9,8 +9,10 @@ import { CriminalRecordsAdminComponent } from './criminal-records-admin/criminal import { OilStationInfoComponent } from './oil-station-info/oil-station-info.component'; import { EquipmentInfoComponent } from './equipment-info/equipment-info.component'; import { PlanAdminComponent } from './plan-admin/plan-admin.component'; +import { HomePageComponent } from './home-page/home-page.component'; const routes: Routes = [ + { path: 'homepage', component: HomePageComponent }, { path: 'plan', component: PlanAdminComponent }, { path: 'plan/petrolStation', component: PlanComponent }, { path: 'warning', component: TodayWarningAdminComponent }, diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index 70eb8c1..63f41d2 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -51,11 +51,12 @@ import { GetOutOfLineDetailsComponent } from './today-warning/get-out-of-line-de import { NzNotificationModule } from 'ng-zorro-antd/notification'; import { DispositionComponent } from './disposition/disposition.component'; import { OilUnloadingProcessComponent } from './oil-unloading-process/oil-unloading-process.component'; +import { HomePageComponent } from './home-page/home-page.component'; @NgModule({ declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent, TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent, - AddequipmentComponent, EditequipmentComponent,PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent], + AddequipmentComponent, EditequipmentComponent,PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent], imports: [ diff --git a/src/assets/images/bluebg.png b/src/assets/images/bluebg.png new file mode 100644 index 0000000..89ab55d Binary files /dev/null and b/src/assets/images/bluebg.png differ diff --git a/src/assets/images/bucket.png b/src/assets/images/bucket.png new file mode 100644 index 0000000..1819177 Binary files /dev/null and b/src/assets/images/bucket.png differ diff --git a/src/assets/images/circle.png b/src/assets/images/circle.png new file mode 100644 index 0000000..8199d7d Binary files /dev/null and b/src/assets/images/circle.png differ diff --git a/src/assets/images/inform.png b/src/assets/images/inform.png new file mode 100644 index 0000000..1418551 Binary files /dev/null and b/src/assets/images/inform.png differ diff --git a/src/assets/images/yellowbg.png b/src/assets/images/yellowbg.png new file mode 100644 index 0000000..38f6bdf Binary files /dev/null and b/src/assets/images/yellowbg.png differ