增添海图测试

ebc-middle-platform/src/index.html

@@ -14,6 +14,7 @@
<div class="app" id="app"></div>
<script src="/static/conf/app-conf.js"></script>
<script src="/static/conf/defaultConfig.js"></script>
<script src="http://192.168.74.189:9999/gisapi/getscript"></script>
<!-- start:js -->
<script src="/dist/vendor-dev/base-bbc4a50d.js"></script>
<script src="/hmr/main/main.js"></script>

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

@@ -0,0 +1,23 @@
.orientation-container{
    width: 92.5%;
    margin: 10px;
    margin-left: 40px;
    margin-right: 40px;
    box-sizing: border-box;
    .search-container{
      width: 50%;
      margin-bottom: 10px;
    }
}
.demo__slipbox .slipbox__header{
    text-align: left;
    padding: 16px;
  }
  .demo__slipbox .slipbox__header span{
    margin-left: 15px;
  }
  .demo__slipbox .slipbox__body{
    padding: 20px 20px 100px;
    border-top: 1px solid #ccc;
  }

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

@@ -1,3 +1,136 @@
<template>
  <div>人员定位</div>
  <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="delete-outline">轨迹</t-button>
        </t-col>
        <t-col></t-col>
      </t-row>
    </div>
    <div id="div1">人员定位</div>
    <div>
      <t-slipbox :visibled.sync="visible" :styles="styls" 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>
        </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>
        </template>
      </t-slipbox>
      <div class="oparate__btn--group">
        <t-button type="primary" @click.native="showSlip">点击显示滑出块</t-button>
        <small>（从右侧出现）</small>
      </div>
    </div>
  </div>
</template>
<script>
import "./orientation.scss";
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: "",
      },
    };
  },
  mounted() {
    this.initMap("");
  },
  methods: {
    initMap(value) {
      this.map = new Ai.Map("div1", {
        ak: "MTYwMDcMTAwMU1UWXdNRGMxTmpnME1USXpOU014TnpRdw__",
      });
      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() {
      this.visible = true;
    },
    hideSlip() {
      this.visible = false;
    },
  },
};
</script>