修改提交

ebc-middle-platform/package.json

@@ -77,6 +77,9 @@
    "vuex": "^2.3.1",
    "vuex-persistedstate": "^2.5.4",
    "vuex-router-sync": "^4.1.2",
    "webpack-theme-color-replacer": "^1.2.15"
    "webpack-theme-color-replacer": "^1.2.15",
    "sockjs-client": "^1.4.0",
    "stompjs": "^2.3.3",
    "net": "1.0.2"
  }
}

ebc-middle-platform/src/assets/styles/_layout.scss

@@ -427,3 +427,26 @@ $layout-sider-collapse-width: 64px;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}
.alarm-info-container{
  display: flex;
  margin: 20px 50px 0 50px;
  padding: 10px 10px 20px 10px;
  background-color: #F5F5F5;
  .alarm-info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 40px;
    >div{
      display: flex;
    }
  }
}
.rescue{
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.modal-footer{
  justify-content: center
}

ebc-middle-platform/src/assets/styles/aid-theme/_variable.scss

@@ -1,7 +1,7 @@
/** variable.scss 是主题定制变量定义文件，请根据项目设计需求调整变量值 **/
// 品牌主色定制
$brand-primary: #147BD1;
$brand-primary: #004ea0;
// body 背景色定制
$body-bg: rgba(0,0,0,.02);

ebc-middle-platform/src/modules/layouts/BasicLayout.vue

@@ -6,6 +6,38 @@
      </keep-alive>
      <router-view v-else />
    </transition>
    <t-modal :visibled.sync="modal" :closable="false" :mask-closable="false" :width="800" title="报警">
      <div class="alarm-info-container">
        <div>
          <img src="/static/images/Alarm.png"/>
        </div>
        <div class="alarm-info">
          <div>
            <div>报警类型：</div><div>落水报警</div>
          </div>
          <div>
            <div>报警人:</div><div>张三</div>
          </div>
          <div>
            <div>报警位置：</div><div>113.445294°E  23.157791°N   1#风机附近</div>
          </div>
        </div>
      </div>
      <div class="rescue">
        <div>救援人员：</div>
        <div>
          <t-select placeholder="请选择救援人员">
            <t-option>张三(zhangsan)</t-option>
            <t-option>李四(lisi)</t-option>
          </t-select>
        </div>
      </div>
      <div slot="footer">
        <t-button @click="closeAlarmModal">直接关闭报警</t-button>
        <t-button color="success" @click="closeAlarmModal">确认并稍后指派</t-button>
        <t-button color="success" @click="closeAlarmModal">确认并立即指派</t-button>
      </div>
    </t-modal>
  </global-layout>
</template>
@@ -18,13 +50,18 @@ export default {
  },
  data () {
    return {
      modal: true
    }
  },
  computed: {
    keepAlive () {
      return this.$route.meta.keepAlive
    }
  },
  methods: {
    closeAlarmModal() {
      this.modal = false
    }
  }
}
</script>

ebc-middle-platform/src/modules/orientation/orientation.scss

@@ -1,10 +1,58 @@
.orientation-container{
    width: 92.5%;
    width: 100%;
    height: 88%;
    margin: 10px;
    margin-left: 40px;
    margin-right: 40px;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
    .top-container{
      display: flex;
      justify-content: space-between;
      line-height: 40px;
      .person-info{
        display: flex;
        font-size: 16px;
        div{
          margin-right: 10px;
          display: flex;
          .number{
            color: #2373D2;
            font-size: 24px;
            font-weight: 600;
            line-height: 30px;
            margin: 0 6px;
          }
          .normal{
            width: 10px;
            height: 10px;
            margin-top: 15px;
            background-color: #19BB20;
          }  
          .off-line{
            width: 10px;
            height: 10px;
            margin-top: 15px;
            background-color: #D5D5D5;
          } 
          .sos{
            width: 10px;
            height: 10px;
            margin-top: 15px;
            background-color:#F5222D;
          } 
        }
        .time{
          font-size: 16px;
          margin-left: 50px;
        }
      }
      .right-content{
        display: flex;
        button{
          margin-top: 5px;
          margin-right: 10px;
        }
      }
    }
    .search-container{
      width: 50%;
      margin-bottom: 10px;
@@ -18,47 +66,194 @@
      margin: auto;
      height: 60px;
    }
    .label{
      position: absolute;
      z-index: 10;
      right: 90px;
      bottom: 77px;
      background-color: #59748A;
      font-size: 12px;
      line-height: 30px;
      color: #fff;
      display: flex;
      padding: 10px 0 10px 30px;
      border-radius: 5px;
      .item{
        margin-right: 30px;
        >div{
          display: flex;
          .sos{
            width: 10px;
            height: 10px;
            background-color: #F5222D;
            margin-top: 10px;
            margin-right: 5px;
          }
          .offline{
            width: 10px;
            height: 10px;
            background-color: #2B3944;
            margin-top: 10px;
            margin-right: 5px;
          }
          .outline{
            width: 10px;
            height: 10px;
            background-color:#FAAD14;
            margin-top: 10px;
            margin-right: 5px;
          }
          .normal{
            width: 10px;
            height: 10px;
            background-color: #19BB20;
            margin-top: 10px;
            margin-right: 5px;
          }
          .fenji{
            width: 10px;
            height: 10px;
            background-size: 100% 100%;
            background-image: url('/static/images/风机.png');
            margin-top: 10px;
            margin-right: 5px;
          }
          .shengyazhan{
            width: 10px;
            height: 10px;
            background-size: 100% 100%;
            background-image: url('/static/images/升压站画面.png');
            margin-top: 10px;
            margin-right: 5px;
          }
          .chuanbo{
            width: 10px;
            height: 10px;
            background-size: 100% 100%;
            background-image: url('/static/images/船舶.png');
            margin-top: 10px;
            margin-right: 5px;
          }
          .zyqy{
            width: 10px;
            height: 10px;
            background-color: #438D65;
            margin-top: 10px;
            margin-right: 5px;
          }
          .dzwl{
            width: 10px;
            height: 10px;
            background-color: #A74B5C;
            margin-top: 10px;
            margin-right: 5px;
          }
        }
      }
    }
}
.track-modal-container{
  display: flex;
  .track-modal-left{
    border: 1px solid #E7E7E7;
    width: 200px;
    height: 500px;
    text-align: center;
    line-height: 30px;
    .active{
      color: #3BC541;
      border-color: #3BC541;
    }
  }
  .track-modal-right{
    height: 500px;
    width: 1000px;
    margin-left: 5px;
  }
}
.tabs-content{
  height: 100%;
}
.demo__slipbox .slipbox__header{
    text-align: left;
    padding:0px;
    height: 0px;
  }
  .demo__slipbox .slipbox__header span{
    margin-left: 15px;
  }
  .demo__slipbox .slipbox__body{
    border-top: 1px solid #ccc;
  }
  .span_left{display:-moz-inline-box; display:inline-block; width:150px;}
  .min_font{font-size: 12px;}
  text-align: left;
  padding:0px;
  height: 0px;
}
.demo__slipbox .slipbox__header span{
  margin-left: 15px;
}
.demo__slipbox .slipbox__body{
  border-top: 1px solid #ccc;
}
.span_left{display:-moz-inline-box; display:inline-block; width:150px;}
.min_font{font-size: 12px;}
  .selectedCss{
   border-color: #19bb20;
   border-width: 2px;
.selectedCss{
 border-color: #19bb20;
 border-width: 2px;
}
.liCss{
  border-style:solid;
  border-radius:5px;
 
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
border-style:solid;
border-radius:5px;
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
}
.normalCss{
  border-color: rgba(141, 138, 138, 0.63);
  border-width:0.5px;
border-color: rgba(141, 138, 138, 0.63);
border-width:0.5px;
}
.moveCss{
  border-color: #19bb20;
border-color: #19bb20;
}
.aimap-popup-content-wrapper{
background: #344979!important;
.aimap-popup-content{
  margin: 0;
}
}
.aimap-popup-tip-container{
.aimap-popup-tip{
  background-color: #344979;
}
} 
.point-out{
  color: #fff;
  background-color: #147BD1;
  border: 1px solid #147BD1;
  height: 25px;
  cursor: pointer;
  line-height: 25px;
  margin: 7.5px 10px 0 auto;
  border-radius: 4px;
  width: 85px;
  .btn-primary:hover, .radio-group-button .form-radio:hover:checked, .radio-group-button .form-radio[checked]:hover {
    color: #fff;
    border-color: transparent;
    background-color: #378fd8;
}
}
.close-confirm{
  color: #fff;
  background-color: #147BD1;
  border: 1px solid #147BD1;
  height: 25px;
  cursor: pointer;
  line-height: 25px;
  margin: 7.5px 15px 10px 0;
  border-radius: 4px;
  width: 85px;
}
.tips-item{
  .point-out{
    color: #fff;
    background-color: #147BD1;
    border: 1px solid #147BD1
  }
  // width: 300px;
  // margin: 10px 30px;
  // border: 1px solid #E0E0E0;
@@ -91,7 +286,7 @@
    }
    .hand-alarm{
      color: #FAAD14;
      background-color:#495571;
      background-color: #495571;
      margin: 7.5px 0 0 5px;
      padding: 0 5px;
      font-size: 8px;
@@ -114,6 +309,11 @@
      }
    }
  }
  .point-out{
    color: #fff;
    background-color: #147BD1;
    border: 1px solid #147BD1
  }
  .footer{
    height: 40px;
    border-top: 1px solid #E0E0E0;
@@ -125,6 +325,4 @@
      margin: 7.5px 10px 0 0;
    }
  }
}
  
  
}

ebc-middle-platform/src/modules/orientation/orientation.vue

@@ -1,415 +1,413 @@
<template>
  <div class="orientation-container">
    <div class="search-container">
      <t-row :gutter="16">
        <t-col>
          <t-button-group>
            <t-button color="primary">海图</t-button>
            <t-button>卫星</t-button>
          </t-button-group>
        </t-col>
        <t-col>
          <t-input
            icon="account-multiple"
            icon-placement="right"
            placeholder="请输入姓名或终端编号..."
            style="width: 220px"
          ></t-input>
        </t-col>
        <t-col>
          <t-button color="info" icon="map-marker">轨迹</t-button>
        </t-col>
        <t-col></t-col>
      </t-row>
    <div class="top-container">
      <div class="person-info">
        <div>全部<span class="number">29</span>人</div>
        <div><div class="normal"></div>正常<span class="number">26</span>人</div>
        <div><div class="off-line"></div>离线<span class="number">2</span>人</div>
        <div><div class="sos"></div>SOS<span class="number">1</span>人</div>
        <div class="time">当前时间：{{ nowDate|dateFormat }}</div>
      </div>
      <div class="right-content">
        <t-button color="success" icon="map-marker-outline" @click="()=>{trackModal=true}">轨迹</t-button>
        <div>悬浮窗<t-switch rounded></t-switch></div>
      </div>
    </div>
    <div id="div1" style="height:100%">人员定位</div>
    <div>
      <t-slipbox
        :visibled.sync="visible"
        :styles="styls"
        :shadow="shadow"
        direction="left"
        class="demo__slipbox"
      >
        <template slot="header">
          <div class="slipbox__header"></div>
        </template>
        <template>
          <t-tabs style="height:100%">
            <t-tab-panel label="全部" panel-id="tab-1" style="height:100%;">
              <t-scroll-bar style="height:100%;" :auto-hide="false">
                <ul style="padding-left: 0px;">
                  <li
                    class="liCss"
                    v-for="item in dataList"
                    :key="item.number"
                    :class="[clickActiveName==item.number?'selectedCss':'normalCss',{moveCss:moveActiveName==item.number}]"
                    @click="changeColor(item.number)"
                    @mouseover="changeMoveColor(item.number)"
                  >
                    <div style="width:350px;">
                      <div slot="head" style="height:24px;margin:5px 0 5px 0">
                        <t-icon icon="heart-outline" size="14" color="primary" class="mr-5"></t-icon>
                        <span>{{item.name}}</span>
                        <span class="min_font">{{item.type}}</span>
                        <t-button
                          color="info"
                          icon="map-marker"
                          style="float:right; width:80px;margin-right: 20px;"
                          size="sm"
                        >轨迹</t-button>
                      </div>
                      <hr />
                      <div style>
                        <div style="margin:5px 0;">
                          <span class="span_left min_font">终端编码</span>
                          <span class="min_font">{{item.number}}</span>
                        </div>
                        <div style="margin:5px 0;">
                          <span class="span_left min_font">最新定位时间</span>
                          <span class="min_font">{{item.newMarkerTime}}</span>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </t-scroll-bar>
            </t-tab-panel>
            <t-tab-panel label="在线" panel-id="tab-2" icon="home">
              <t-scroll-bar  style="height:100%" :auto-hide="false">
                <ul style="padding-left: 0px;">
                  <li
                    class="liCss"
                    v-for="item in normalData"
                    :key="item.number"
                    :class="[clickActiveName==item.number?'selectedCss':'normalCss',{moveCss:moveActiveName==item.number}]"
                    @click="changeColor(item.number)"
                    @mouseover="changeMoveColor(item.number)"
                  >
                    <div style="width:350px;">
                      <div slot="head" style="height:24px;margin:5px 0 5px 0">
                        <t-icon icon="heart-outline" size="14" color="primary" class="mr-5"></t-icon>
                        <span>{{item.name}}</span>
                        <span class="min_font">{{item.type}}</span>
                        <t-button
                          color="info"
                          icon="map-marker"
                          style="float:right; width:80px;margin-right: 20px;"
                          size="sm"
                        >轨迹</t-button>
                      </div>
                      <hr />
                      <div style>
                        <div style="margin:5px 0;">
                          <span class="span_left min_font">终端编码</span>
                          <span class="min_font">{{item.number}}</span>
                        </div>
                        <div style="margin:5px 0;">
                          <span class="span_left min_font">最新定位时间</span>
                          <span class="min_font">{{item.newMarkerTime}}</span>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </t-scroll-bar>
            </t-tab-panel>
            <t-tab-panel label="SOS" panel-id="tab-3" icon="home" style="height:100%;">
              <t-scroll-bar style="height:100%;" :auto-hide="false">
                <ul style="padding-left: 0px;">
                  <li
                    class="liCss"
                    v-for="item in alertData"
                    :key="item.number"
                    :class="[clickActiveName==item.number?'selectedCss':'normalCss',{moveCss:moveActiveName==item.number}]"
                    @click="changeColor(item.number)"
                    @mouseover="changeMoveColor(item.number)"
                  >
                    <div style="width:350px;">
                      <div slot="head" style="height:24px;margin:5px 0 5px 0">
                        <t-icon icon="heart-outline" size="14" color="primary" class="mr-5"></t-icon>
                        <span>{{item.name}}</span>
                        <span class="min_font">{{item.type}}</span>
                        <t-button
                          color="info"
                          icon="map-marker"
                          style="float:right; width:80px;margin-right: 20px;"
                          size="sm"
                        >轨迹</t-button>
                      </div>
                      <hr />
                      <div style>
                        <div style="margin:5px 0;">
                          <span class="span_left min_font">终端编码</span>
                          <span class="min_font">{{item.number}}</span>
                        </div>
                        <div style="margin:5px 0;">
                          <span class="span_left min_font">最新定位时间</span>
                          <span class="min_font">{{item.newMarkerTime}}</span>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </t-scroll-bar>
            </t-tab-panel>
            <t-tab-panel label="离线" panel-id="tab-4" icon="home" >
              <t-scroll-bar style="height:100%" :auto-hide="false">
                <ul style="padding-left: 0px;">
                  <li
                    class="liCss"
                    v-for="item in offlineData"
                    :key="item.number"
                    :class="[clickActiveName==item.number?'selectedCss':'normalCss',{moveCss:moveActiveName==item.number}]"
                    @click="changeColor(item.number)"
                    @mouseover="changeMoveColor(item.number)"
                  >
                    <div style="width:350px;">
                      <div slot="head" style="height:24px;margin:5px 0 5px 0">
                        <t-icon icon="heart-outline" size="14" color="primary" class="mr-5"></t-icon>
                        <span>{{item.name}}</span>
                        <span class="min_font">{{item.type}}</span>
                        <t-button
                          color="info"
                          icon="map-marker"
                          style="float:right; width:80px;margin-right: 20px;"
                          size="sm"
                        >轨迹</t-button>
                      </div>
                      <hr />
                      <div style>
                        <div style="margin:5px 0;">
                          <span class="span_left min_font">终端编码</span>
                          <span class="min_font">{{item.number}}</span>
                        </div>
                        <div style="margin:5px 0;">
                          <span class="span_left min_font">最新定位时间</span>
                          <span class="min_font">{{item.newMarkerTime}}</span>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </t-scroll-bar>
            </t-tab-panel>
          </t-tabs>
        </template>
      </t-slipbox>
    </div>
    <div class="oparate-btn">
      <t-button v-if="visible" color="info"  style="height:60px" icon="left-circle-outline" @click.native="hideSlip"></t-button>
      <t-button v-else color="info" icon="right-circle-outline" style="height:60px" @click.native="showSlip"></t-button>
    <div id="div1" style="height:100%"></div>
    <div class="label">
      <div class="item">
        <div>
          <div class="sos"></div><div>SOS</div>
        </div>
        <div>
          <div class="offline"></div><div>离线</div>
        </div>
        <div>
          <div class="outline"></div><div>违规</div>
        </div>
        <div>
          <div class="normal"></div><div>正常</div>
        </div>
      </div>
      <div class="item">
        <div>
          <div class="fenji"></div><div>风机</div>
        </div>
        <div>
          <div class="shengyazhan"></div><div>升压站</div>
        </div>
        <div>
          <div class="chuanbo"></div><div>船舶</div>
        </div>
      </div>
      <div class="item">
        <div>
          <div class="zyqy"></div><div>作业区域</div>
        </div>
        <div>
          <div class="dzwl"></div><div>电子围栏</div>
        </div>
      </div>
    </div>
    <t-modal :visibled.sync="trackModal" :footer-visibled="false" :mask-closable="false" :width="1200" title="历史轨迹">
      <div class="track-modal-container">
        <div class="track-modal-left">
          <t-input v-model="trackSearch" icon="search-outline" icon-placement="right" placeholder="请输入姓名或终端编号" style="width: 200px"></t-input>
          <div>
            <div>张三</div>
            <div>张三</div>
            <div>张三</div>
            <div>张三</div>
          </div>
        </div>
        <div class="track-modal-right">
          <div style="display:flex">
            <t-button-group>
              <t-button v-for="(item,index) in trackTimeList" :class="index==trackQueryCondition.currentIndex?'active':''" :key="index" @click="changeTrackTime(index)">{{ item }}</t-button>
            </t-button-group>
            <t-date-picker v-show="trackQueryCondition.currentIndex===3" v-model="rangeDate" style="width:250px" type="dateRange" placeholder="请选择时间" @date-change="onChangeDate"></t-date-picker>
            <div style="display:flex">
              <div>速度</div>
              <t-select>
                <t-option>1x</t-option>
                <t-option>2x</t-option>
              </t-select>
            </div>
            <t-button color="success" icon="video-outline">回放</t-button>
            <t-button color="secondary" icon="upload-outline" @click="toExport">导出至Excel</t-button>
          </div>
          <div id="track-map" style="height:94%">
          </div>
        </div>
      </div>
    </t-modal>
  </div>
</template>
<script>
import "./orientation.scss";
import { forEach, filter , find} from "lodash";
import './orientation.scss'
import { forEach, filter, find} from 'lodash'
export default {
  filters: {
    dateFormat(value) {
      var year = value.getFullYear()
      var month = value.getMonth() >= 10 ? value.getMonth() : '0' + value.getMonth()
      var day = value.getDate() >= 10 ? value.getDate() : '0' + value.getDate()
      var hours = value.getHours() >= 10 ? value.getHours() : '0' + value.getHours()
      var minutes = value.getMinutes() >= 10 ? value.getMinutes() : '0' + value.getMinutes()
      var seconds = value.getSeconds() >= 10 ? value.getSeconds() : '0' + value.getSeconds()
      return year + '.' + month + '.' + day + ' ' + hours + ':' + minutes + ':' + seconds
    }
  },
  data() {
    return {
      map: null,
      pointsarr:null,
      polylinearr: "122.0352 32.4444,122.0372 32.4444,122.0400 32.4366,122.2922 32.4233",
      polygonarr: "122.2302 32.5444,122.2302 32.3444, 122.4302 32.3444,122.4302 32.6044,122.2302 32.5444",
      popup:null,
      visible: true,
      pointsarr: null,
      polylinearr: '122.0352 32.4444,122.0372 32.4444,122.0400 32.4366,122.2922 32.4233',
      polygonarr: '122.2302 32.5444,122.2302 32.3444, 122.4302 32.3444,122.4302 32.6044,122.2302 32.5444',
      popup: null,
      shadow: false,
      styls: { width: "400px", height: "70%", margin: "120px 0 0 75px" },
      clickActiveName: "",
      moveActiveName: "",
      dataList: [
        {
          name: "王小明",
          number: "ZDBH0001",
          type: "落水告警",
          Longitude: "32.4233",
          latitude: "122.2922",
          alarmTime: "2020.7.10 08:21:43",
          newMarkerTime: "2020.7.10 08:21:43",
          rescuePerson: "海事局A",
          rescueTime: "2020.7.3 11:22:16",
          rescueDuration: "10小时39分钟",
          name: '王小明',
          number: 'ZDBH0001',
          type: '落水告警',
          Longitude: '32.4233',
          latitude: '122.2922',
          alarmTime: '2020.7.10 08:21:43',
          newMarkerTime: '2020.7.10 08:21:43',
          rescuePerson: '海事局A',
          rescueTime: '2020.7.3 11:22:16',
          rescueDuration: '10小时39分钟'
        },
        {
          name: "王小明1",
          number: "ZDBH0002",
          type: "正常",
          Longitude: "32.333",
          latitude: "122.0822",
          alarmTime: "2020.7.10 08:21:43",
          newMarkerTime: "2020.7.10 08:21:43",
          rescuePerson: "海事局A",
          rescueTime: "2020.7.3 11:22:16",
          rescueDuration: "10小时39分钟",
          name: '王小明1',
          number: 'ZDBH0002',
          type: '正常',
          Longitude: '32.333',
          latitude: '122.0822',
          alarmTime: '2020.7.10 08:21:43',
          newMarkerTime: '2020.7.10 08:21:43',
          rescuePerson: '海事局A',
          rescueTime: '2020.7.3 11:22:16',
          rescueDuration: '10小时39分钟'
        },
        {
          name: "王小明2",
          number: "ZDBH0003",
          type: "正常",
          Longitude: "32.4444",
          latitude: "122.0352",
          alarmTime: "2020.7.10 08:21:43",
          newMarkerTime: "2020.7.10 08:21:43",
          rescuePerson: "海事局A",
          rescueTime: "2020.7.3 11:22:16",
          rescueDuration: "10小时39分钟",
          name: '王小明2',
          number: 'ZDBH0003',
          type: '正常',
          Longitude: '32.4444',
          latitude: '122.0352',
          alarmTime: '2020.7.10 08:21:43',
          newMarkerTime: '2020.7.10 08:21:43',
          rescuePerson: '海事局A',
          rescueTime: '2020.7.3 11:22:16',
          rescueDuration: '10小时39分钟'
        },
        {
          name: "王小明3",
          number: "ZDBH0004",
          type: "离线",
          Longitude: "32.555",
          latitude: "121.0752",
          alarmTime: "2020.7.10 08:21:43",
          newMarkerTime: "2020.7.10 08:21:43",
          rescuePerson: "海事局A",
          rescueTime: "2020.7.3 11:22:16",
          rescueDuration: "10小时39分钟",
          name: '王小明3',
          number: 'ZDBH0004',
          type: '离线',
          Longitude: '32.555',
          latitude: '121.0752',
          alarmTime: '2020.7.10 08:21:43',
          newMarkerTime: '2020.7.10 08:21:43',
          rescuePerson: '海事局A',
          rescueTime: '2020.7.3 11:22:16',
          rescueDuration: '10小时39分钟'
        },
        {
          name: "王小明4",
          number: "ZDBH0005",
          type: "落水告警",
          Longitude: "32.466",
          latitude: "122.04322",
          alarmTime: "2020.7.10 08:21:43",
          newMarkerTime: "2020.7.10 08:21:43",
          rescuePerson: "海事局A",
          rescueTime: "2020.7.3 11:22:16",
          rescueDuration: "10小时39分钟",
        },
          name: '王小明4',
          number: 'ZDBH0005',
          type: '落水告警',
          Longitude: '32.466',
          latitude: '122.04322',
          alarmTime: '2020.7.10 08:21:43',
          newMarkerTime: '2020.7.10 08:21:43',
          rescuePerson: '海事局A',
          rescueTime: '2020.7.3 11:22:16',
          rescueDuration: '10小时39分钟'
        }
      ],
    };
      nowDate: new Date(),
      modal: false,
      trackModal: false,
      trackSearch: '',
      trackTimeList: [
        '-10min',
        '-1h',
        '本日',
        '自定义'
      ],
      trackQueryCondition: {
        currentIndex: 0
      },
      trackMap: null,
      rangeDate: ''
    }
  },
  computed: {
    normalData: function () {
      return filter(this.dataList, function (o) {
        return o.type == "正常";
      });
        return o.type == '正常'
      })
    },
    alertData: function () {
      return filter(this.dataList, function (o) {
        return o.type == "落水告警";
      });
        return o.type == '落水告警'
      })
    },
    offlineData: function () {
      return filter(this.dataList, function (o) {
        return o.type == "离线";
      });
    },
        return o.type == '离线'
      })
    }
  },
  mounted() {
    this.initMap("");
    this.pointsSet();
    this.polyline();
    this.polygon();
     this.map.setZoom(9);
    this.initMap('')
    this.initTrackMap('')
    this.pointsSet()
    this.polyline()
    this.polygon()
    this.map.setZoom(9)
    setInterval(() => {
      this.nowDate = new Date()
    }, 1000)
    this.loadFenji()
    this.loadchuanbo()
    this.loadshengyazhan()
  },
  methods: {
    initMap(value) {
      if (this.map != null && this.map != "") {
        this.map.remove();
      if (this.map != null && this.map != '') {
        this.map.remove()
      }
      this.map = new Ai.Map('div1', {
        ak: 'MTYwMzIMTAwMU1UWXdNekkwTmpBME1EUTFOeU14TnpRdw__',
        center: [39.915599, 122.406568]
      })
      var maplayer = null
      maplayer = Ai.TileLayer('http://192.168.74.189:9999/tdtvector')
      var la = Ai.WMTSLayer('http://192.168.74.216:5071/gisserver/dzht/dzht/wmts', {opacity: 0.5})
      this.map.addLayer(maplayer)
      this.map.addLayer(la)
      Ai.Scale({position: 'bottomright'}).addTo(this.map)
      Ai.Zoom({type: 'small'}).addTo(this.map)
    },
    initTrackMap(value) {
      if (this.trackMap != null && this.trackMap != '') {
        this.trackMap.remove()
      }
      this.map = new Ai.Map("div1", {
        ak: "MTYwMzEMTAwMU1UWXdNekU0TWprMk1EYzFOaU14TnpRdw__",
        center:[39.915599, 122.406568],
        
      });
      var maplayer = null;
      maplayer = Ai.TileLayer("http://192.168.74.189:9999/tdtvector");
      var la = Ai.WMTSLayer('http://192.168.74.216:5071/gisserver/dzht/dzht/wmts' {opacity: 0.5});
      this.map.addLayer(maplayer);
      this.map.addLayer(la);
      
      Ai.Scale({position:"bottomright"}).addTo(this.map);
      Ai.Zoom({type:"small"}).addTo(this.map);
      this.trackMap = new Ai.Map('track-map', {
        ak: 'MTYwMzIMTAwMU1UWXdNekkwTmpBME1EUTFOeU14TnpRdw__',
        center: [39.915599, 122.406568]
      })
      var maplayer = null
      maplayer = Ai.TileLayer('http://192.168.74.189:9999/tdtvector')
      var la = Ai.WMTSLayer('http://192.168.74.216:5071/gisserver/dzht/dzht/wmts', {opacity: 0.5} {opacity: 0.5})
      this.trackMap.addLayer(maplayer)
      this.trackMap.addLayer(la)
      Ai.Scale({position: 'bottomright'}).addTo(this.trackMap)
      Ai.Zoom({type: 'small'}).addTo(this.trackMap)
    },
    pointsSet() {
      var arr = [];
      this.pointsLayer= new Ai.FeatureGroup();
      var icon = (icon = Ai.IconPulse({ iconSize: [13, 13] }));
      forEach(this.dataList, (value)=>{
        var point1;
        if (value.type == "落水告警") {
          point1 = new Ai.Point([value.Longitude, value.latitude], {
            icon: icon,
          });
      var arr = []
      this.pointsLayer = new Ai.FeatureGroup()
      var icon = (icon = Ai.IconPulse({ iconSize: [13, 13] }))
      forEach(this.dataList, (value) => {
        var point1
        if (value.type == '落水告警') {
          point1 = Ai.Point([value.Longitude, value.latitude], {icon: Ai.Icon({
            // 设置图标URL路径
            iconUrl: '/static/images/worker(1).png',
            // 设置图标大小
            iconSize: [20, 20],
            // 设置点对象和图标的相对偏移量
            iconAnchor: [0, 0]
          })})
        } else {
          point1 = new Ai.Point([value.Longitude, value.latitude]);
          point1 = Ai.Point([value.Longitude, value.latitude], {icon: Ai.Icon({
            // 设置图标URL路径
            iconUrl: '/static/images/worker.png',
            // 设置图标大小
            iconSize: [20, 20],
            // 设置点对象和图标的相对偏移量
            iconAnchor: [0, 0]
          })})
        }
        this.pointsLayer.addLayer(point1);
        arr.push(point1);
        //this.pointsarr.push(point1);
      });
      this.map.addLayer(this.pointsLayer);
      this.map.fitBoundsForLayers(arr);
        point1.on('click', (e) => {
          console.log(e)
          var content = '<div class="tips-item"><div class="top"><div class="user-pic"><t-icon icon="user-outline"></t-icon></div><div>张三</div><div class="hand-alarm">救援人员</div></div><div class="middle"><div class="row">' +
           '<div>终端编号</div>' +
           '<div>ZDBH0001</div>' +
         '</div>' +
         '<div class="row">' +
           '<div>最新定位时间</div>' +
           '<div>2020.08.13 08:24:32</div>' +
         '</div></div></div>' +
         '<div style="display:flex;">' +
          '<button class="point-out" onClick="window.Vue.modal=true"><i style="font-size: 20px;" class="aidicon aidicon-user-outline"></i>指派</button>' +
          '<button class="close-confirm" onClick="window.Vue.close()"><i style="font-size: 20px;" class="aidicon aidicon-close"></i>关闭</button>' +
        '</div></div></div>'
          var popup = Ai.Popup({minWidth: 300, offset: [0, -10], autoClose: true})
          // 设置弹出框弹出位置
            .setLatLng([value.Longitude, value.latitude])
          // 设置弹出框弹出内容
            .setContent(content)
            .openOn(this.map)
        })
        this.pointsLayer.addLayer(point1)
        arr.push(point1)
        // this.pointsarr.push(point1);
      })
      this.map.addLayer(this.pointsLayer)
      this.map.fitBoundsForLayers(arr)
    },
    polyline() {
      var polylineLayer=new Ai.FeatureGroup();
      //线绘制
      var polylineLayer = new Ai.FeatureGroup()
      // 线绘制
      var lineWktStr =
        "LINESTRING ( " +this.polylinearr+")";
        'LINESTRING ( ' + this.polylinearr + ')'
      var polyline = new Ai.Polyline(lineWktStr, {
        color: "green",
        opacity: 1.0,
      });
      //this.polylinearr.arr(polyline);
      polylineLayer.addLayer(polyline);
      this.map.addLayer(polylineLayer);
        color: 'green',
        opacity: 1.0
      })
      // this.polylinearr.arr(polyline);
      polylineLayer.addLayer(polyline)
      this.map.addLayer(polylineLayer)
    },
    polygon() {
      var polygonLayer=new Ai.FeatureGroup();
      //面绘制
      var polygonLayer = new Ai.FeatureGroup()
      // 面绘制
      var coverWktStr =
        "POLYGON ((" +this.polygonarr+"))";
      var polygon = Ai.Polygon(coverWktStr, { color: "red", opacity: 1.0 });
      //this.polygonarr.arr(polygon);
      polygonLayer.addLayer(polygon);
      this.map.addLayer(polygonLayer);
        'POLYGON ((' + this.polygonarr + '))'
      var polygon = Ai.Polygon(coverWktStr, { color: 'red', opacity: 1.0, weight: 0 })
      // this.polygonarr.arr(polygon);
      polygonLayer.addLayer(polygon)
      this.map.addLayer(polygonLayer)
    },
    showSlip() {
      this.visible = true;
      this.visible = true
    },
    showPopup(number){
      if (this.popup != null && this.popup != "") {
              this.popup.closePopup();
              this.popup.remove();
    showPopup(number) {
      if (this.popup != null && this.popup != '') {
        this.popup.closePopup()
        this.popup.remove()
      }
      var data=find(this.dataList,  (o)=> {
        return o.number == number;
      });
      if(data!=null&&data!="")
      {
        var content = '<div class="tips-item"><div class="top"><div class="user-pic"><t-icon icon="user-outline"></t-icon></div><div>'+data.name+'</div><div class="hand-alarm">'+data.type+'</div></div><div class="middle"><div class="row">' +
            '<div>终端编号</div>' +
            '<div>'+data.number+'</div>' +
          '</div>' +
          '<div class="row">' +
            '<div>最新定位时间</div>' +
            '<div>'+data.newMarkerTime+'</div>' +
          '</div></div></div>'
         this.popup = Ai.Popup({minWidth: 300, offset: [0, -10], autoClose: false})
      var data = find(this.dataList, (o) => {
        return o.number == number
      })
      if (data != null && data != '') {
        var content = '<div class="tips-item"><div class="top"><div class="user-pic"><t-icon icon="user-outline"></t-icon></div><div>张三</div><div class="hand-alarm">救援人员</div></div><div class="middle"><div class="row">' +
           '<div>终端编号</div>' +
           '<div>ZDBH0001</div>' +
         '</div>' +
         '<div class="row">' +
           '<div>最新定位时间</div>' +
           '<div>2020.08.13 08:24:32</div>' +
         '</div></div></div>' +
         '<div style="display:flex;">' +
          '<button class="point-out" onClick="window.Vue.modal=true"><i style="font-size: 20px;" class="aidicon aidicon-user-outline"></i>指派</button>' +
          '<button class="close-confirm" onClick="window.Vue.close()"><i style="font-size: 20px;" class="aidicon aidicon-close"></i>关闭</button>' +
        '</div></div></div>'
        this.popup = Ai.Popup({minWidth: 300, offset: [0, -10], autoClose: false})
        // 设置弹出框弹出位置
          .setLatLng({lat: data.Longitude, lng: data.latitude})
        // 设置弹出框弹出内容
          .setContent(content)
          .openOn(this.map)
      }
    },
    hideSlip() {
      this.visible = false;
    loadFenji() {
      var point = Ai.Point([29.86089241772908, 122.09930419921876], {icon: Ai.Icon({
        // 设置图标URL路径
        iconUrl: '/static/images/风机.png',
        // 设置图标大小
        iconSize: [20, 20],
        // 设置点对象和图标的相对偏移量
        iconAnchor: [0, 0]
      })})
      this.pointsLayer.addLayer(point)
      this.map.addLayer(this.pointsLayer)
    },
    changeColor(number) {
      this.showPopup(number);
      this.clickActiveName = number;
    loadchuanbo() {
      var point = Ai.Point([29.960892, 122.09930419921876], {icon: Ai.Icon({
        // 设置图标URL路径
        iconUrl: '/static/images/船舶.png',
        // 设置图标大小
        iconSize: [20, 20],
        // 设置点对象和图标的相对偏移量
        iconAnchor: [0, 0]
      })})
      this.pointsLayer.addLayer(point)
      this.map.addLayer(this.pointsLayer)
    },
    changeMoveColor(number) {
      this.moveActiveName = number;
    loadshengyazhan() {
      var point = Ai.Point([29.86089241772908, 122.1993], {icon: Ai.Icon({
        // 设置图标URL路径
        iconUrl: '/static/images/升压站画面.png',
        // 设置图标大小
        iconSize: [20, 20],
        // 设置点对象和图标的相对偏移量
        iconAnchor: [0, 0]
      })})
      this.pointsLayer.addLayer(point)
      this.map.addLayer(this.pointsLayer)
    },
  },
};
</script>
    changeTrackTime(index) {
      this.trackQueryCondition.currentIndex = index
    },
    onChangeDate() {
    },
    toExport() {
    }
  }
}
</script>

ebc-middle-platform/src/modules/page/GlobalLayout.vue

@@ -17,11 +17,11 @@
      </layout-content>
      <!-- layout footer -->
      <layout-footer style="padding: 0px">
      <!-- <layout-footer style="padding: 0px">
        <global-footer />
      </layout-footer>
      </layout-footer> -->
    </layout>
    <setting-drawer></setting-drawer>
    <!-- <setting-drawer></setting-drawer> -->
  </layout>
</template>

ebc-middle-platform/src/modules/system-management/terminal-management.vue

@@ -103,6 +103,12 @@
          <t-form-item label="终端编号" prop="number">
            <div>ZDBH002</div>
          </t-form-item>
          <t-form-item label="关联类型" prop="type">
            <t-radio-group v-model="relevanceValidate.type">
              <t-radio value="0" label="用户"></t-radio>
              <t-radio value="1" label="船舶"></t-radio>
            </t-radio-group>
          </t-form-item>
          <t-form-item label="关联用户" prop="user">
            <div class="row">
              <div class="col-9">
@@ -201,6 +207,7 @@ export default {
      },
      relevance: false,
      relevanceValidate: {
        type: '0',
        user: ''
      },
      relevanceRuleValidate: {

ebc-middle-platform/src/routes.js

@@ -168,7 +168,7 @@ export default [
            /* webpackChunkName: "attendance" */ '@/modules/layouts/RouteView.vue'
          ),
        name: 'attendance',
        meta: { title: '报警救援', icon: 'heart-outline' },
        meta: { title: '考勤管理', icon: 'heart-outline' },
        redirect: '/attendance/attendance',
        children: [
          {