[完善] 首页基本完成

src/app/ui/home/home.component.html

@@ -16,15 +16,34 @@
     <div class="centerHeader">
       <div><input type="text" placeholder="请输入熟悉对象"></div>
       <div>
-        <input placeholder="请选择时间" matInput [matDatepicker]="dp2" readonly [formControl]="enddate">
+        <input placeholder="请选择时间" readonly [matDatepicker]="dp2" [formControl]="enddate">
         <mat-datepicker-toggle matSuffix [for]="dp2"></mat-datepicker-toggle>
-        <mat-datepicker #dp2 disabled="false"></mat-datepicker>
+        <mat-datepicker #dp2></mat-datepicker>
       </div>
       <div><button style="background: linear-gradient(337deg, #FC7045 0%, #FF4923 100%);" (click)='query()'>查询</button></div>
       <div><button style="background: #4582FC;" (click)='add()'>新增</button></div>
     </div>
     <div class="centerTable">
-      
+      <div class="table">
+        <table>
+          <tr>
+            <th class="firstContent"></th>
+            <th>熟悉对象</th>
+            <th>熟悉时间</th>
+            <th>带队领导</th>
+            <th>上传人员</th>
+            <th>操作</th>
+          </tr>
+          <tr *ngFor="let item of tableData">
+            <td class="firstContent"><mat-checkbox></mat-checkbox></td>
+            <td class="overflowText">{{item.target}}</td>
+            <td class="overflowText">{{item.time}}</td>
+            <td>{{item.leadTheTeam}}</td>
+            <td>{{item.updateStaff}}</td>
+            <td class="fontColor" (click)='viewDetails()'>查看详情</td>
+          </tr>
+        </table>
+      </div>
     </div>
   </div>
 

src/app/ui/home/home.component.scss

@@ -61,12 +61,14 @@ button.mat-menu-item { text-align: center; }
   align-items: center;
   div { margin: 0 0.097656rem }
   input {
+    width: 1.757813rem;
     height: 0.292969rem;
     line-height: 0.292969rem;
     padding-left: 0.048828rem;
     border-radius: 0.195313rem;
     outline: none;
     border: 0.009766rem solid #999;
+    font-size: 0.136719rem;
   }
   button {
     width: 0.78125rem;
@@ -78,7 +80,45 @@ button.mat-menu-item { text-align: center; }
     color: #fff;
   }
 }
-.mat-datepicker-toggle{ vertical-align: middle; }
+.mat-datepicker-toggle{ vertical-align: middle; margin: 0 0; padding: 0 0; }
 .centerTable {
   flex: 1;
+  box-sizing: border-box;
+  padding: 0.097656rem;
+  overflow: hidden;
+  .table {
+    width: 100%;
+    max-height: 100%;
+    overflow-y: auto;
+  }
+  table {
+    width: 100%;
+    border-radius: 0.244141rem;
+    background: #FD5A31;
+    text-align: center;
+    border-collapse:collapse;
+    word-break:break-all; 
+    word-wrap:break-all;
+    table-layout:fixed;
+    .firstContent { width: 0.488281rem; }
+    th {
+      height: 0.390625rem;
+      font-weight: normal;
+      font-size: 0.15625rem;
+      color: #fff;
+      // border-bottom: 1px solid rgb(211, 207, 207);
+    }
+    td {
+      height: 0.390625rem;
+      font-size: 0.136719rem;
+      background-color: #fff;
+      border-top: 1px solid rgb(211, 207, 207);
+    }
+  }
+}
+.fontColor { color: #FC7045; }
+.overflowText {
+  overflow: hidden;    
+  text-overflow:ellipsis;    
+  white-space: nowrap;
 }

src/app/ui/home/home.component.ts

@@ -22,6 +22,19 @@ export class HomeComponent implements OnInit {
   }
 
   enddate:any; //查询时间
+  tableData :any = [
+    {target: '梧州市金龙万豪酒店', time: '2020-10-29 07:19', leadTheTeam: '郑子墨', updateStaff: '赵竹林', },
+    {target: '众美光合原筑', time: '2020-11-02 07:19', leadTheTeam: '何先超', updateStaff: '何晨', },
+    {target: '凡尔赛公馆', time: '2020-11-02 11:19', leadTheTeam: '吴洁丽', updateStaff: '赵玉', },
+    {target: '西黄岛九号', time: '2020-11-03 07:19', leadTheTeam: '吴毅溪', updateStaff: '赵晓慧', },
+    {target: '首城双景', time: '2020-11-07 07:19', leadTheTeam: '周伟林', updateStaff: '李英顺', },
+    {target: '华贸国际公馆', time: '2020-11-11 07:19', leadTheTeam: '李林颖', updateStaff: '吴思怡', },
+    {target: '鸿威翡翠城', time: '2020-11-12 07:19', leadTheTeam: '李双杆', updateStaff: '钱浩宇', },
+    {target: '泽信公馆', time: '2020-11-14 11:19', leadTheTeam: '孙正荣', updateStaff: '孙正云', },
+    {target: '润泽御府', time: '2020-11-17 07:19', leadTheTeam: '赵虎林', updateStaff: '冯燕', },
+    {target: '万达广场', time: '2020-11-20 07:19', leadTheTeam: '周伟林', updateStaff: '李英顺', },
+    {target: '天悦', time: '2020-11-22 07:19', leadTheTeam: '冯燕', updateStaff: '冯靖宇', },
+  ]
 
   //退出系统
   signOut () {
@@ -42,12 +55,17 @@ export class HomeComponent implements OnInit {
 
   //查询
   query () {
-
+    console.log('查询')
   }
 
   //新增
   add () {
+    console.log('新增')
+  }
 
+  //查看详情
+  viewDetails () {
+    console.log('查看详情')
   }
 
 

src/app/ui/router-gis/router-gis.component.html

@@ -0,0 +1,3 @@
+<div class="content">
+  <div class="center" id="center"></div>
+</div>

src/app/ui/router-gis/router-gis.component.scss

@@ -0,0 +1,11 @@
+.content {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0.244141rem;
+  overflow: hidden;
+  .center {
+    width: 100%;
+    height: 100%;
+  }
+}

src/app/ui/router-gis/router-gis.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RouterGISComponent } from './router-gis.component';
+
+describe('RouterGISComponent', () => {
+  let component: RouterGISComponent;
+  let fixture: ComponentFixture<RouterGISComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RouterGISComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RouterGISComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/ui/router-gis/router-gis.component.ts

@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+declare var AMap: any;
+
+@Component({
+  selector: 'app-router-gis',
+  templateUrl: './router-gis.component.html',
+  styleUrls: ['./router-gis.component.scss']
+})
+export class RouterGISComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+
+  }
+
+  ngAfterViewInit(): void {
+    window.setTimeout(()=>{
+      this.mapInit()
+    },0)
+  }
+
+  //地图初始化
+  mapInit () {
+    //创建地图
+    let map = new AMap.Map('center', {
+      resizeEnable: true,
+      cursor: 'default',
+      zooms:[6,18],
+    });
+    //构造路线导航类 实际路线
+    let driving = new AMap.Driving({
+      map: map,
+      showTraffic: true,
+      isOutline: true,
+    });
+    driving.search( [{keyword: '广西消防总队',city:'广西'},{keyword: '万科公园里',city:'广西'},{keyword: '南宁明安医院',city:'广西'}], );
+    //构造路线导航类 导航路线
+    let drivingTwo = new AMap.Driving({
+      map: map,
+      showTraffic: false,
+    });
+    drivingTwo.search( [{keyword: '广西消防总队',city:'广西'},{keyword: '南宁明安医院',city:'广西'}], );
+    //function (status,result) { console.log(status,result) } //地图路线 匹配起始点回调函数
+    //new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719) / [{keyword: '淄博站',city:'山东'},{keyword: '淄博北站',city:'山东'}], //路线可搜索, 可用坐标
+  }
+
+}

src/app/ui/ui.module.ts

@@ -67,8 +67,9 @@ import { WorkingAreaComponent } from '../working-area/working-area.component';
 import {leftFunctionalDomainComponent,editPlaneFigureComponent,addDisposalNodeComponent,editDisposalNodeComponent} from './collection-tools/leftFunctionalDomain'
 import { saveOneDialog, saveTwoDialog } from './collection-tools/save';
 import { HomeComponent } from './home/home.component';
+import { RouterGISComponent } from './router-gis/router-gis.component';
 @NgModule({
-  declarations: [UiComponent,PersonaldataComponent, FooterComponent, UserdataComponent, ChangepasswordComponent,IsnoPipe,ConfirmpswDirective,TimePipe,EditUser,UnitInformationComponent,EditUnitInfo,AddUnitInfo,AddGroups,EditGroup,addUnitAttributeComponent,editUnitAttribute,CollectionToolsComponent,WorkingAreaComponent,CreateBuilding,EditBuilding,leftFunctionalDomainComponent,editPlaneFigureComponent,ViewDetails,saveOneDialog,saveTwoDialog,addDisposalNodeComponent,editDisposalNodeComponent,HomeComponent],
+  declarations: [UiComponent,PersonaldataComponent, FooterComponent, UserdataComponent, ChangepasswordComponent,IsnoPipe,ConfirmpswDirective,TimePipe,EditUser,UnitInformationComponent,EditUnitInfo,AddUnitInfo,AddGroups,EditGroup,addUnitAttributeComponent,editUnitAttribute,CollectionToolsComponent,WorkingAreaComponent,CreateBuilding,EditBuilding,leftFunctionalDomainComponent,editPlaneFigureComponent,ViewDetails,saveOneDialog,saveTwoDialog,addDisposalNodeComponent,editDisposalNodeComponent,HomeComponent, RouterGISComponent],
 
   imports: [
     CommonModule,