提交代码

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

@@ -437,6 +437,7 @@ $layout-sider-collapse-width: 64px;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 40px;
    font-size: 20px;
    >div{
      display: flex;
    }
@@ -446,7 +447,8 @@ $layout-sider-collapse-width: 64px;
  display: flex;
  justify-content: center;
  margin-top: 40px;
  font-size: 20px;
}
.modal-footer{
  justify-content: center
}
}

ebc-middle-platform/src/conf/axios.config.js

@@ -39,7 +39,7 @@ const conf = {
  },
  root: {
    test: {
      baseURL: 'http://localhost:8087/ipu/'
      baseURL: '/ipu/'
    }
  }
}

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

@@ -13,20 +13,20 @@
        </div>
        <div class="alarm-info">
          <div>
            <div>报警类型：</div><div>落水报警</div>
            <div>报警类型：</div><div>{{ alarmObj.alarmType }}</div>
          </div>
          <div>
            <div>报警人:</div><div>张三</div>
            <div>报警人:</div><div>{{ alarmObj.userName }}</div>
          </div>
          <div>
            <div>报警位置：</div><div>113.445294°E  23.157791°N   1#风机附近</div>
            <div>报警位置：</div><div>{{ alarmObj.alarmLocation }}</div>
          </div>
        </div>
      </div>
      <div class="rescue">
        <div>救援人员：</div>
        <div>
          <t-select placeholder="请选择救援人员">
          <t-select placeholder="请选择救援人员" width="150">
            <t-option>张三(zhangsan)</t-option>
            <t-option>李四(lisi)</t-option>
          </t-select>
@@ -52,7 +52,12 @@ export default {
  },
  data () {
    return {
      modal: false
      modal: false,
      alarmObj: {
        alarmType: '',
        alarmLocation: '',
        userName: ''
      }
    }
  },
  computed: {
@@ -67,6 +72,13 @@ export default {
    callbacks.onConnected = msg => {
      console.log('连接成功：' + msg)
      client.subscribe('zhangsan', msg => {
        var obj = JSON.parse(msg.body)
        if (obj.isNewAlarm == '1') {
          this.alarmObj.alarmType = obj.alarmType
          this.alarmObj.alarmLocation = obj.longitude + ' , ' + obj.latitude
          this.alarmObj.userName = obj.userName
          this.modal = true
        }
        EventBus.$emit('person', msg)
      })
    }
@@ -75,7 +87,7 @@ export default {
    }
    client = IpuStomp(
      {
        url: 'ws://10.13.13.43:7100/stomp',
        url: 'ws://10.19.90.34:7100/stomp',
        name: 'zhangsan',
        passcode: '123456',
        UUID: 'zhangsan'

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

@@ -31,7 +31,13 @@
            width: 10px;
            height: 10px;
            margin-top: 15px;
            background-color: #D5D5D5;
            background-color: #2B3944;
          } 
          .out-line{
            width: 10px;
            height: 10px;
            margin-top: 15px;
            background-color: #FAAD14;
          } 
          .sos{
            width: 10px;

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

@@ -2,18 +2,22 @@
  <div class="orientation-container">
    <div class="top-container">
      <div class="person-info">
        <div>全部<span class="number">29</span>人</div>
        <div>全部<span class="number">{{ personStatistics.all }}</span>人</div>
        <div>
          <div class="normal"></div>
          正常<span class="number">26</span>人
          正常<span class="number">{{ personStatistics.normal }}</span>人
        </div>
        <div>
          <div class="off-line"></div>
          离线<span class="number">2</span>人
          离线<span class="number">{{ personStatistics.offLine }}</span>人
        </div>
        <div>
          <div class="out-line"></div>
          违规<span class="number">{{ personStatistics.outLine }}</span>人
        </div>
        <div>
          <div class="sos"></div>
          SOS<span class="number">1</span>人
          SOS<span class="number">{{ personStatistics.sos }}</span>人
        </div>
        <div class="time">当前时间：{{ nowDate | dateFormat }}</div>
      </div>
@@ -34,43 +38,43 @@
    <div id="div1" style="height: 100%"></div>
    <div class="label">
      <div class="item">
        <div :class="mapShow.sos?'':'cancel'" @click="showOrHide(layer.sosLayer,'sos')">
        <div :class="mapShow.sos?'':'cancel'" @click="showOrHide(layer.personLayer,'sos',['4','5'])">
          <div class="sos"></div>
          <div>SOS</div>
        </div>
        <div :class="mapShow.offLine?'':'cancel'" @click="showOrHide(layer.offLineLayer,'offLine')">
        <div :class="mapShow.offLine?'':'cancel'" @click="showOrHide(layer.personLayer,'offLine',['1'])">
          <div class="offline"></div>
          <div>离线</div>
        </div>
        <div :class="mapShow.outLine?'':'cancel'" @click="showOrHide(layer.outLineLayer,'outLine')">
        <div :class="mapShow.outLine?'':'cancel'" @click="showOrHide(layer.personLayer,'outLine',['2','3'])">
          <div class="outline"></div>
          <div>违规</div>
        </div>
        <div :class="mapShow.normal?'':'cancel'" @click="showOrHide(layer.normalLayer,'normal')">
        <div :class="mapShow.normal?'':'cancel'" @click="showOrHide(layer.personLayer,'normal',['0'])">
          <div class="normal"></div>
          <div>正常</div>
        </div>
      </div>
      <div class="item">
        <div :class="mapShow.fenji?'':'cancel'" @click="showOrHide(layer.fenjiLayer,'fenji')">
        <div :class="mapShow.fenji?'':'cancel'" @click="showOrHide(layer.equipmentLayer,'fenji',['002'])">
          <div class="fenji"></div>
          <div>风机</div>
        </div>
        <div :class="mapShow.shengyazhan?'':'cancel'" @click="showOrHide(layer.shengyazhanLayer,'shengyazhan')">
        <div :class="mapShow.shengyazhan?'':'cancel'" @click="showOrHide(layer.equipmentLayer,'shengyazhan',['003'])">
          <div class="shengyazhan"></div>
          <div>升压站</div>
        </div>
        <div :class="mapShow.chuanbo?'':'cancel'" @click="showOrHide(layer.chuanboLayer,'chuanbo')">
        <div :class="mapShow.chuanbo?'':'cancel'" @click="showOrHide(layer.equipmentLayer,'chuanbo',['001'])">
          <div class="chuanbo"></div>
          <div>船舶</div>
        </div>
      </div>
      <div class="item">
        <div :class="mapShow.zyqy?'':'cancel'" @click="showOrHide(layer.zyqyLayer,'zyqy')">
        <div :class="mapShow.zyqy?'':'cancel'" @click="showOrHide(layer.areaLayer,'zyqy',['2'])">
          <div class="zyqy"></div>
          <div>作业区域</div>
        </div>
        <div :class="mapShow.dzwl?'':'cancel'" @click="showOrHide(layer.dzwlLayer,'dzwl')">
        <div :class="mapShow.dzwl?'':'cancel'" @click="showOrHide(layer.areaLayer,'dzwl',['3'])">
          <div class="dzwl"></div>
          <div>电子围栏</div>
        </div>
@@ -162,13 +166,9 @@
<script>
import './orientation.scss'
import {GIS_SEA_LAYER_URL, GIS_SEA_URL} from '../../constants'
import services from '../../conf/services'
import EventBus from '../../bus'
import {
  GIS_CENTER,
  GIS_ZOOM
} from '@/constants'
import { GIS_CENTER, GIS_ZOOM, GIS_SEA_LAYER_URL, GIS_SEA_URL } from '@/constants'
export default {
  filters: {
    dateFormat(value) {
@@ -205,10 +205,15 @@ export default {
    return {
      map: null,
      pointsarr: null,
      personStatistics: {
        all: 0,
        offLine: 0,
        outLine: 0,
        sos: 0,
        normal: 0
      },
      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,
      dataList: [
@@ -297,15 +302,9 @@ export default {
        ]
      },
      layer: {
        dzwlLayer: new Ai.FeatureGroup(),
        zyqyLayer: new Ai.FeatureGroup(),
        fenjiLayer: new Ai.FeatureGroup(),
        chuanboLayer: new Ai.FeatureGroup(),
        shengyazhanLayer: new Ai.FeatureGroup(),
        sosLayer: new Ai.FeatureGroup(),
        offLineLayer: new Ai.FeatureGroup(),
        outLineLayer: new Ai.FeatureGroup(),
        normalLayer: new Ai.FeatureGroup()
        areaLayer: new Ai.FeatureGroup(),
        equipmentLayer: new Ai.FeatureGroup(),
        personLayer: new Ai.FeatureGroup()
      },
      mapShow: {
        dzwl: true,
@@ -346,39 +345,9 @@ export default {
    },
    changeLocation(msg) {
      var obj = JSON.parse(msg.body)
      this.layer.normalLayer.eachLayer((e) => {
        console.log(e.getAttributes().deviceNo)
      this.layer.personLayer.eachLayer((e) => {
        if (e.getAttributes().deviceId == obj.deviceId) {
          console.log(obj.latitude, obj.longitude)
          e.setLatLng([obj.latitude, obj.longitude])
          e.off()
          this.popupContent(obj, e)
        }
      })
      this.layer.offLineLayer.eachLayer((e) => {
        console.log(e.getAttributes().deviceNo)
        if (e.getAttributes().deviceId == obj.deviceId) {
          console.log(obj.latitude, obj.longitude)
          e.setLatLng([obj.latitude, obj.longitude])
          e.off()
          this.popupContent(obj, e)
        }
      })
      this.layer.outLineLayer.eachLayer((e) => {
        console.log(e.getAttributes().deviceNo)
        if (e.getAttributes().deviceId == obj.deviceId) {
          console.log(obj.latitude, obj.longitude)
          e.setLatLng([obj.latitude, obj.longitude])
          e.off()
          this.popupContent(obj, e)
        }
      })
      this.layer.sosLayer.eachLayer((e) => {
        console.log(e.getAttributes().deviceNo)
        if (e.getAttributes().deviceId == obj.deviceId) {
          console.log(obj.latitude, obj.longitude)
          e.setLatLng([obj.latitude, obj.longitude])
          e.off()
          this.popupContent(obj, e)
        }
      })
@@ -388,12 +357,37 @@ export default {
      var icon, tips
      var callHelp = ''
      var other = ''
      var attributes = point.getAttributes()
      if (e.locationStatus == '0') {
        icon = '/static/images/normalworker.png'
        tips = '<div class="normal">正常</div>'
        if (attributes.locationStatus !== e.locationStatus) {
          if (attributes.locationStatus == '1') {
            this.personStatistics.normal++
            this.personStatistics.offLine--
          } else if (attributes.locationStatus == '2' || attributes.locationStatus == '3') {
            this.personStatistics.normal++
            this.personStatistics.outLine--
          } else if (attributes.locationStatus == '4' || attributes.locationStatus == '5') {
            this.personStatistics.normal++
            this.personStatistics.sos--
          }
        }
      } else if (e.locationStatus == '1') {
        icon = '/static/images/offlineworker.png'
        tips = '<div class="offline">离线</div>'
        if (attributes.locationStatus !== e.locationStatus) {
          if (attributes.locationStatus == '0') {
            this.personStatistics.offLine++
            this.personStatistics.normal--
          } else if (attributes.locationStatus == '2' || attributes.locationStatus == '3') {
            this.personStatistics.offLine++
            this.personStatistics.outLine--
          } else if (attributes.locationStatus == '4' || attributes.locationStatus == '5') {
            this.personStatistics.offLine++
            this.personStatistics.sos--
          }
        }
      } else if (e.locationStatus == '2' || e.locationStatus == '3') {
        icon = '/static/images/outlineworker.png'
        tips = '<div class="outline">违规</div>'
@@ -408,6 +402,18 @@ export default {
                  '<div>' + e.inDate + '</div>' +
                  '</div>'
        }
        if (attributes.locationStatus !== e.locationStatus) {
          if (attributes.locationStatus == '0') {
            this.personStatistics.outLine++
            this.personStatistics.normal--
          } else if (attributes.locationStatus == '1') {
            this.personStatistics.outLine++
            this.personStatistics.offLine--
          } else if (attributes.locationStatus == '4' || attributes.locationStatus == '5') {
            this.personStatistics.outLine++
            this.personStatistics.sos--
          }
        }
      } else if (e.locationStatus == '4' || e.locationStatus == '5') {
        icon = '/static/images/sosworker.png'
        other = '<div class="row sos">' +
@@ -422,6 +428,18 @@ export default {
                  '<button class="point-out" onClick="window.Vue.rescueModal=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>'
        if (attributes.locationStatus !== e.locationStatus) {
          if (attributes.locationStatus == '0') {
            this.personStatistics.sos++
            this.personStatistics.normal--
          } else if (attributes.locationStatus == '1') {
            this.personStatistics.sos++
            this.personStatistics.offLine--
          } else if (attributes.locationStatus == '2' || attributes.locationStatus == '3') {
            this.personStatistics.sos++
            this.personStatistics.outLine--
          }
        }
      }
      point.setIcon(Ai.Icon({
        // 设置图标URL路径
@@ -431,6 +449,7 @@ export default {
        // 设置点对象和图标的相对偏移量
        iconAnchor: [0, 0]
      }))
      point.setAttributes(e)
      point.on('click', (pointE) => {
        var content =
                  '<div class="tips-item"><div class="top"><div class="user-pic"><t-icon icon="user-outline"></t-icon></div><div>' + e.userName + '</div>' + tips + '</div><div class="middle"><div class="row">' +
@@ -512,7 +531,8 @@ export default {
                opacity: 1.0,
                weight: 0
              })
              this.layer.dzwlLayer.addLayer(polygon)
              polygon.setAttributes(e)
              this.layer.areaLayer.addLayer(polygon)
              // this.fitBounds.push(polygon)
            } else if (e.MAP_TAG_TYPE === '2') { // 作业区域
              var polygon = Ai.Polygon(e.MAP_TAG_SHAPE, {
@@ -520,12 +540,12 @@ export default {
                opacity: 1.0,
                weight: 0
              })
              this.layer.zyqyLayer.addLayer(polygon)
              polygon.setAttributes(e)
              this.layer.areaLayer.addLayer(polygon)
              // this.fitBounds.push(polygon)
            }
          })
          this.map.addLayer(this.layer.dzwlLayer)
          this.map.addLayer(this.layer.zyqyLayer)
          this.map.addLayer(this.layer.areaLayer)
          // console.log(this.fitBounds)
          // this.map.fitBoundsForLayers(this.fitBounds)
        })
@@ -544,55 +564,46 @@ export default {
          // 请求成功处理...
          console.log(res.data)
          res.data.dataList.forEach((e) => {
            var icon = ''
            if (e.FACILITY_TYPE === '001') { // 船舶
              this.layer.chuanboLayer.addLayer(Ai.Point([e.LATITUDE, e.LONGITUDE], {
                icon: Ai.Icon({
                  // 设置图标URL路径
                  iconUrl: '/static/images/船舶.png',
                  // 设置图标大小
                  iconSize: [20, 20],
                  // 设置点对象和图标的相对偏移量
                  iconAnchor: [0, 0]
                })
              }))
              icon = '/static/images/船舶.png'
            } else if (e.FACILITY_TYPE === '002') { // 风机
              this.layer.fenjiLayer.addLayer(Ai.Point([e.LATITUDE, e.LONGITUDE], {
                icon: Ai.Icon({
                  // 设置图标URL路径
                  iconUrl: '/static/images/风机.png',
                  // 设置图标大小
                  iconSize: [20, 20],
                  // 设置点对象和图标的相对偏移量
                  iconAnchor: [0, 0]
                })
              }))
              icon = '/static/images/风机.png'
            } else if (e.FACILITY_TYPE === '003') { // 升压站
              this.layer.shengyazhanLayer.addLayer(Ai.Point([e.LATITUDE, e.LONGITUDE], {
                icon: Ai.Icon({
                  // 设置图标URL路径
                  iconUrl: '/static/images/升压站画面.png',
                  // 设置图标大小
                  iconSize: [20, 20],
                  // 设置点对象和图标的相对偏移量
                  iconAnchor: [0, 0]
                })
              }))
              icon = '/static/images/升压站画面.png'
            }
            var point = Ai.Point([e.LATITUDE, e.LONGITUDE], {
              icon: Ai.Icon({
                // 设置图标URL路径
                iconUrl: icon,
                // 设置图标大小
                iconSize: [20, 20],
                // 设置点对象和图标的相对偏移量
                iconAnchor: [0, 0]
              })
            })
            point.setAttributes(e)
            this.layer.equipmentLayer.addLayer(point)
          })
          this.map.addLayer(this.layer.chuanboLayer)
          this.map.addLayer(this.layer.fenjiLayer)
          this.map.addLayer(this.layer.shengyazhanLayer)
          this.map.addLayer(this.layer.equipmentLayer)
        })
        .catch((res) => {
          // 请求失败处理...
        })
    },
    loadPerson() { // 加载地图人员
      this.personStatistics = {
        all: 0,
        offLine: 0,
        outLine: 0,
        sos: 0,
        normal: 0
      }
      var params = new FormData()
      this.$test
        .post(services.organization.PERSON_LOCATION, params)
        .then((res) => {
          console.log(res.data)
          this.personStatistics.all = res.data.dataList.length
          var layer
          res.data.dataList.forEach((e) => {
            var icon, tips
@@ -601,14 +612,17 @@ export default {
              icon = '/static/images/normalworker.png'
              layer = this.layer.normalLayer
              tips = '<div class="normal">正常</div>'
              this.personStatistics.normal++
            } else if (e.locationStatus === '1') {
              icon = '/static/images/offlineworker.png'
              layer = this.layer.offLineLayer
              tips = '<div class="offline">离线</div>'
              this.personStatistics.offLine++
            } else if (e.locationStatus === '2' || e.locationStatus === '3') {
              icon = '/static/images/outlineworker.png'
              layer = this.layer.outLineLayer
              tips = '<div class="outline">违规</div>'
              this.personStatistics.outLine++
            } else if (e.locationStatus === '4' || e.locationStatus === '5') {
              icon = '/static/images/sosworker.png'
              layer = this.layer.sosLayer
@@ -617,6 +631,7 @@ export default {
                  '<button class="point-out" onClick="window.Vue.rescueModal=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>'
              this.personStatistics.sos++
            }
            var point = Ai.Point([e.latitude, e.longitude], {
              icon: Ai.Icon({
@@ -659,25 +674,38 @@ export default {
                .setContent(content)
                .openOn(this.map)
            })
            layer.addLayer(point)
            // layer.addLayer(point)
            this.layer.personLayer.addLayer(point)
          })
          this.map.addLayer(this.layer.sosLayer)
          this.map.addLayer(this.layer.outLineLayer)
          this.map.addLayer(this.layer.offLineLayer)
          this.map.addLayer(this.layer.normalLayer)
          // this.map.addLayer(this.layer.sosLayer)
          // this.map.addLayer(this.layer.outLineLayer)
          // this.map.addLayer(this.layer.offLineLayer)
          // this.map.addLayer(this.layer.normalLayer)
          this.map.addLayer(this.layer.personLayer)
        })
        .catch((res) => {
          // 请求失败处理...
        })
    },
    showOrHide(layer, type) {
      if (this.map.hasLayer(layer)) {
        this.map.removeLayer(layer)
        this.mapShow[type] = false
      } else {
        this.map.addLayer(layer)
        this.mapShow[type] = true
      }
    showOrHide(layer, type, arr) {
      layer.eachLayer((e) => {
        if (arr.indexOf(e.getAttributes().locationStatus) != -1 || arr.indexOf(e.getAttributes().FACILITY_TYPE) != -1 || arr.indexOf(e.getAttributes().MAP_TAG_TYPE) != -1) {
          if (this.map.hasLayer(e)) {
            this.map.removeLayer(e)
            this.mapShow[type] = false
          } else {
            this.map.addLayer(e)
            this.mapShow[type] = true
          }
        }
      })
      // if (this.map.hasLayer(layer)) {
      //   this.map.removeLayer(layer)
      //   this.mapShow[type] = false
      // } else {
      //   this.map.addLayer(layer)
      //   this.mapShow[type] = true
      // }
    },
    changeTrackTime(index) {
      this.trackQueryCondition.currentIndex = index