map-tool-widget-net/src/components/mapTest.vue

<template>
  <div id="map_test">
    <div class="left">
      <el-table
          :data="menuListData"
          style="width: 100%;margin-bottom: 20px"
          :row-key="row => row.id"
          :expand-row-keys="keyList"
          border
          :max-height="maxHeight"
          header-cell-class-name = "table_header_class"
          :row-class-name="cellStyle"
          @row-click ="change"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          ref="dataTreeList"
      >
        <el-table-column
            prop="title"
            label="目录">
        </el-table-column>

      </el-table>
    </div>
    <div class="middle">
      <div class="input_part">
        <div class="name_part">
          <span class="input_name">功能入参：</span>
        </div>
        <textarea v-model="t_editor" placeholder="在此处输入代码" class="input_text" />
        <div class="run_part">
          <el-button class="run_method" @click="runMethod">运行</el-button>
        </div>
      </div>
      <div class="output_part">
        <div class="name_part">
          <span class="input_name">功能出参：</span>
        </div>
        <textarea v-model="t_result" placeholder="此处显示返回结果" class="input_text" />
      </div>
    </div>
    <div class="right">
      <iframe id="i_map" name="i_map" class="full_map" frameborder="0">

      </iframe>
    </div>
  </div>
</template>

<script>
import CityGIS from "@/units/CityGis.Bridge";
import menuList from "../config/basicTool.json";
import {getToken} from "@/service/Token";
export default {
  name: "mapTest",
  data(){
    return {
      bridge:"",
      t_editor:"",
      t_result:"",
      current_url:null,
      maxHeight:0,
      menuListData: [],
      mapMethod:'',
      keyList:[]
    }
  },
  mounted() {
    this.menuListData = menuList;
    if(this.$route.query.mapMethod){
      this.mapMethod = this.$route.query.mapMethod;
      this.autoChange(this.mapMethod)
    }
    this.$nextTick(() => {
      // window.innerHeight 浏览器窗口的可见高度，下面的 200 是除了table最大高度的剩余空间。
      this.maxHeight = window.innerHeight -20;
    })
    //加载地图插件
    this.bridge = new CityGIS.Bridge({
      id:"i_map",
      //url:'http://localhost:8081/#/jk_map?theme=light&type=3D',
      url:'https://cimnet.zjw.sh.gov.cn:2008/VUE-Map-Tool-Widget/#/jk_map?theme=light&type=3D',
      onReady:function (){
        // console.log("地图创建完成");
      }
    });
    this.bridge.addEventListener((arg) =>{
      switch (arg.action){
        case "MapIsReady":
          this.t_result = JSON.stringify(arg.data,null,4);
          break;
        case "LayerIsReady":
          this.t_result = JSON.stringify(arg.data,null,4);
          break;
        case "MapExtentChanged":
          this.t_result = JSON.stringify(arg.data, null, 4);
          break;
        case "MapClickResult":
          this.t_result = JSON.stringify(arg.data, null, 4);
          break;
        case "MapMoveResult":
          this.t_result = JSON.stringify(arg.data, null, 4);
          break;
        case "DrawComplete":
          this.t_result = JSON.stringify(arg.data, null, 4);
          break;
        case "Calculation":
          this.t_result = JSON.stringify(arg.data, null, 4);
          break;
        case "ReturnResult":
          this.t_result = JSON.stringify(arg.data, null, 4);
          break;
        case "PopupClickResult":
          this.t_result = JSON.stringify(arg.data, null, 4);
          break;
      }
    })
  },
  methods:{
    autoChange(id){
      for(let i=0;i<this.menuListData.length;i++){
        if(id==this.menuListData[i].id){
          this.change(this.menuListData[i])
          break;
        }else if(this.menuListData[i].children && this.menuListData[i].children.length >0){
          for(let j=0;j<this.menuListData[i].children.length;j++){
            if(id==this.menuListData[i].children[j].id){
              this.change(this.menuListData[i].children[j]);
              this.keyList.push(this.menuListData[i].id);
              break;
            }
          }
        }
      }
    },
    cellStyle(row){
      if(row.row.id.length == 4){ //一级目录
        if(row.row.chosen){
          return "row_bg_chosen"
        }else{
          return "row_bg"
        }
      }else{
        if(row.row.chosen){
          return "row_second_bg_chosen"
        }else{
          return "row_second_bg"
        }
      }
    },
    change(item){
      for(let i=0;i<this.menuListData.length;i++){
        if(this.menuListData[i].children){
          for(let j=0;j<this.menuListData[i].children.length;j++){
            if(item.id==this.menuListData[i].children[j].id){
              this.menuListData[i].children[j].chosen = true
            }else{
              this.menuListData[i].children[j].chosen = false
            }
          }
        }else{
          if(item.id==this.menuListData[i].id){
            this.menuListData[i].chosen = true
          }else{
            this.menuListData[i].chosen = false
          }
        }
      }
      let params = JSON.stringify(item.data, null, 4);
      params = JSON.parse(params);
      if(params.Parameters !== undefined && params.Parameters.url !== undefined){
        this.current_url = params.Parameters.url;
        params.Parameters.url = "***";
      }else{
        this.current_url = null;
      }
      params = JSON.stringify(params, null, 4);
      this.t_editor = params;

    },
    runMethod(){
      let params = JSON.parse(this.t_editor);
      if(this.current_url !== null){
        if(params.Parameters.url == "***"){
          params.Parameters.url =this.current_url;
        }
      }
      getToken().then(res =>{
        let token = res.msg[0].Rows[0].token;
        params.Parameters.token = token;
        this.bridge.Invoke(params);
      })
      // this.bridge.Invoke(params);
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep{
  .table_header_class{
    font-size: 18px ;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #3F3F3F;
    height: 48px ;
    border-color:#BFDFFF;
  }
  .el-table .cell{
    line-height:23px ;
  }
  .el-table .el-table__cell{
    padding: 12px 1px;
  }
  .el-table .row_bg{
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 18px;
    color: #1388fc;
    height: 48px ;
    border-color:#BFDFFF;
  }
  .el-table .row_bg_chosen{
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 18px;
    color: #d0a528;
    height: 48px ;
    border-color:#BFDFFF;
  }
  .el-table .el-table__expand-icon{
    float: right;
    font-size: 18px ;
    font-weight: 400;
    color: #1388fc;
  }

  .el-table .row_second_bg{
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 16px ;
    color: #4184c7;
    height: 30px ;
    border-color:#BFDFFF;
  }
  .el-table .row_second_bg_chosen{
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 16px ;
    color: #d0a528;
    height: 30px ;
    border-color:#BFDFFF;
  }
  .el-button{
    padding: 12px 20px ;
  }
  // 滚动条的宽度
  .el-table__body-wrapper::-webkit-scrollbar {
    width: 16px; // 横向滚动条
    height: 16px; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #BFDFFF;
    border-radius: 3px;
  }
  .el-table .el-table__body-wrapper::-webkit-scrollbar-track{
    background: #f5f1f1;
  }
  .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
    border-right: none;
  }
}

#map_test{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  .left{
    width: 12%;
    height: 100%;
    border-right:1px solid #BFDFFF;
  }
  .middle{
    width: 22%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .input_part{
      width: 100%;
      height: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      .name_part{
        width: 100%;
        display: flex;
        .input_name{
          margin: 1% 2%;
          font-size:  16px ;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #4C4C4C;
        }
      }
      .input_text{
        margin-left: 2%;
        margin-right: 2%;
        background: #F7FBFF;
        border: 1px solid #BFDFFF;
        width: 96%;
        height: 80%;
        font-size: 16px ;
      }
      .run_part{
        width: 100%;
        .run_method{
          float: right;
          margin:4px 10px;
          background: #4CA6FF;
          font-size: 16px ;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #FFFFFF;
        }
      }
    }
    .output_part{
      width: 100%;
      height: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      .name_part{
        width: 100%;
        display: flex;
        .input_name{
          margin: 1% 2%;
          font-size: 16px ;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #4C4C4C;
        }
      }
      .input_text{
        margin-left: 2%;
        margin-right: 2%;
        background: #F7FBFF;
        border: 1px solid #BFDFFF;
        width: 96%;
        height: 80%;
        font-size: 16px;
      }
    }
  }
  .right{
    width: 68%;
    height: 100%;
    .full_map{
      width: 100%;
      height: 100%;
    }
  }
}

</style>