更新展现方式和人员定位页面

ebc-middle-platform/src/defaultConfig.js

@@ -11,7 +11,7 @@
export default {
  primaryColor: '#147BD1', // primary color of ant design
  navTheme: 'dark', // theme for nav menu
  layout: 'sidemenu',
  layout: 'topmenu',
  sidebarOpen: true,
  storageOptions: {
    namespace: 'pro__', // key prefix

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

@@ -1,5 +1,6 @@
.orientation-container{
    width: 92.5%;
    height: 88%;
    margin: 10px;
    margin-left: 40px;
    margin-right: 40px;
@@ -8,16 +9,47 @@
      width: 50%;
      margin-bottom: 10px;
    }
    .oparate-btn{
      position: absolute;
      float: left;
      margin-top: -450px;
      z-index: 10;
    }
}
.demo__slipbox .slipbox__header{
    text-align: left;
    padding: 16px;
    padding:0px;
    height: 0px;
  }
  .demo__slipbox .slipbox__header span{
    margin-left: 15px;
  }
  .demo__slipbox .slipbox__body{
    padding: 20px 20px 100px;
    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;
}
.liCss{
  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;
  }
  .moveCss{
    border-color: #19bb20;
  }
  

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

@@ -17,120 +17,299 @@
          ></t-input>
        </t-col>
        <t-col>
          <t-button color="info" icon="delete-outline">轨迹</t-button>
          <t-button color="info" icon="map-marker">轨迹</t-button>
        </t-col>
        <t-col></t-col>
      </t-row>
    </div>
    <div id="div1">人员定位</div>
    <div id="div1" style="height:100%">人员定位</div>
    <div>
      <t-slipbox :visibled.sync="visible" :styles="styls" direction="left" class="demo__slipbox" >
      <t-slipbox
        :visibled.sync="visible"
        :styles="styls"
        :shadow="shadow"
        direction="left"
        class="demo__slipbox"
      >
        <template slot="header">
          <t-button
            type="outline-secondary"
            size="sm"
            icon="format-align-left"
            @click.native="hideSlip"
          ></t-button>
          <span>自定义头部</span>
          <div class="slipbox__header"></div>
        </template>
        <template>
          <t-form :model="formItem">
            <t-form-item label="输入框">
              <t-input v-model="formItem.input" placeholder="请输入"></t-input>
            </t-form-item>
            <t-form-item label="选择器">
              <t-select v-model="formItem.select" placeholder="请选择">
                <t-option value="beijing">北京市</t-option>
                <t-option value="shanghai">上海市</t-option>
                <t-option value="shenzhen">深圳市</t-option>
              </t-select>
            </t-form-item>
            <t-form-item label="日期控件">
              <div class="row">
                <div class="col-12">
                  <t-form-item>
                    <t-date-picker
                      v-model="formItem.rangeDate"
                      type="dateTimeRange"
                      placeholder="请选择日期时间"
                    ></t-date-picker>
                  </t-form-item>
                </div>
                <div class="col-12">
                  <t-form-item>
                    <t-date-picker v-model="formItem.singleYearVal" type="year" placeholder="请选择年份"></t-date-picker>
                  </t-form-item>
                </div>
              </div>
            </t-form-item>
            <t-form-item label="性别" prop="gender">
              <t-radio-group v-model="formItem.gender">
                <t-radio label="male">男</t-radio>
                <t-radio label="female">女</t-radio>
              </t-radio-group>
            </t-form-item>
            <t-form-item label="爱好" prop="interest">
              <t-checkbox-group v-model="formItem.interest">
                <t-checkbox label="吃饭"></t-checkbox>
                <t-checkbox label="睡觉"></t-checkbox>
                <t-checkbox label="跑步"></t-checkbox>
                <t-checkbox label="看电影"></t-checkbox>
              </t-checkbox-group>
            </t-form-item>
            <t-form-item>
              <t-button type="primary">提交</t-button>
              <t-button class="ml-2">取消</t-button>
            </t-form-item>
          </t-form>
          <t-tabs>
            <t-tab-panel label="全部" panel-id="tab-1">
              <t-scroll-bar style="height:550px;" :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:550px;" :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">
              <t-scroll-bar style="height:550px;" :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:550px;" :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 class="oparate__btn--group">
        <t-button type="primary" @click.native="showSlip">点击显示滑出块</t-button>
        <small>（从右侧出现）</small>
      </div>
    </div>
    <div class="oparate-btn">
      <t-button v-if="visible" color="info" icon="left-circle-outline" @click.native="hideSlip"></t-button>
      <t-button v-else color="info" icon="right-circle-outline" @click.native="showSlip"></t-button>
    </div>
  </div>
</template>
<script>
import "./orientation.scss";
import { filter } from "lodash";
export default {
  data() {
    return {
      map: null,
      visible: true,
      shadow: false,
      styls: { width: "400px", height:"80%",margin:"80px 0 0 0",},
      formItem: {
        input: "",
        select: "",
        rangeDate: [],
        singleYearVal: "",
        interest: [],
        gender: "",
      },
      styls: { width: "400px", height: "600px", margin: "120px 0 0 75px" },
      clickActiveName: "",
      moveActiveName: "",
      dataList: [
        {
          name: "王小明",
          number: "ZDBH0001",
          type: "落水告警",
          address: "113.445294°E 23.157791°N",
          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: "正常",
          address: "113.445294°E 23.157791°N",
          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: "正常",
          address: "113.445294°E 23.157791°N",
          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: "离线",
          address: "113.445294°E 23.157791°N",
          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: "落水告警",
          address: "113.445294°E 23.157791°N",
          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分钟",
        },
      ],
    };
  },
  computed: {
    normalData: function () {
      return filter(this.dataList, function(o){return o.type=="正常"});
    },
    alertData: function () {
      return filter(this.dataList,function(o){return o.type=="落水告警"});
    },
    offlineData: function () {
      return filter(this.dataList,function(o){return o.type=="离线"});
    },
  },
  mounted() {
    this.initMap("");
  },
  methods: {
    initMap(value) {
      this.map = new Ai.Map("div1", {
        ak: "MTYwMDcMTAwMU1UWXdNRGMxTmpnME1USXpOU014TnpRdw__",
        ak: "MTYwMDgMTAwMU1UWXdNRGd5T1RZMk1UZzVPQ014TnpRdw__",
      });
      var maplayer = null;
      maplayer = Ai.TileLayer("http://192.168.74.189:9999/tdtimg");
      this.map.addLayer(maplayer);
      this.map.setView([39.915599, 116.406568], 5); //地图定位
    },
     showSlip() {
    showSlip() {
      this.visible = true;
    },
    hideSlip() {
      this.visible = false;
    },
    changeColor(number) {
      this.clickActiveName = number;
    },
    changeMoveColor(number) {
      this.moveActiveName = number;
    },
  },
};
</script>

ebc-middle-platform/static/conf/defaultConfig.js

@@ -11,7 +11,7 @@
const APP_DEFAULT_CONFIG = {
  primaryColor: '#147BD1', // primary color of ant design
  navTheme: 'dark', // theme for nav menu
  layout: 'sidemenu',
  layout: 'topmenu',
  sidebarOpen: true,
  fixedHeader: false,
  scrollHideHeader: false,