顶部表单

徐旺旺

2021-01-05 9e05dfc9ada42db45ed37dfcc79f3754cd972747

顶部表单

 src/components/panel/TopEnterprisePanel.vue

New file
@@ -0,0 +1,149 @@
<template>
  <div class="top-enterprise-panel">
    <el-form :inline="true" :model="formInline" ref="form" style="margin-left:5px">
      <el-form-item label="分类：">
        <el-select v-model="form.regionType" @change="handlePipelineType">
          <el-option
              v-for="item in regionTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="企业名称：">
        <el-select v-model="form.pipelineType" @change="handlePipelineType">
          <el-option
              v-for="item in pipelineTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模糊搜索：">
        <el-input v-model="form.name" placeholder="在此输入载具号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'TopEnterprisePanel',
  components: {},
  data() {
    return {
      isPanelVisible: false,
      total: 0,
      list: [],
      regionTypeOptions: [{
        value: '1',
        label: '长江流域'
      }, {
        value: '2',
        label: '黄河流域'
      }, {
        value: '3',
        label: '南部沿海水域'
      }, {
        value: '4',
        label: '环渤海水域'
      }, {
        value: '5',
        label: '其他地域'
      }, {
        value: '6',
        label: '催化剂公司'
      }],
      enterpriseOptions: [{
        value: '1',
        label: '北海炼化'
      }, {
        value: '2',
        label: '茂名石化'
      }, {
        value: '3',
        label: '湛江东兴'
      }, {
        value: '4',
        label: '广州石化'
      }, {
        value: '5',
        label: '海南炼化'
      }, {
        value: '6',
        label: '茂名润滑油'
      }],
      form: {
        regionType: '',
      }
    }
  },
  methods: {
    handleClose(done) {
      console.log(done)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleSearch() {

    },
    onSubmit() {

    }
  },
  mounted() {
    this.handleSearch()
  }
}
</script>

<style lang="less">
.top-enterprise-panel {
  position: absolute;
  margin:0 auto;
  left: 0; right: 0; top: 0;bottom: 0;
  z-index: 1000;
  width: 940px;
  height: 50px;
  padding-top: 15px;
  background: #07325b;
  border:2px solid #2A8FD4;
  border-radius:10px;

  .el-form-item__label{
    color: #ffffff;
  }
  .el-message-box__content {
    background-color: #030D2E;
  }

  .search-form .el-form-item {
    margin: 0px;
  }

  .search-form .el-icon-search {
    display: grid;
    line-height: 30px;
    font-size: 18px;
  }

  .search-panel {
    border: #07325B;
    background-color: #07325B;
  }

  .search-result {
    margin: 5px 0px 0px 0px;
    padding: 0px;
    border: #051842;
    overflow-y: scroll;
    background-color: #051842;
  }
}
</style>

 src/views/MapTemplate.vue

@@ -8,6 +8,7 @@
        </sgis-layer-controller>
        <lc-service-layer-filter v-show="showServiceLayerFilter" ref="serviceLayerFilter"></lc-service-layer-filter>
        <monitor-panel></monitor-panel>
        <top-enterprise-panel></top-enterprise-panel>
  </div>
</template>

@@ -21,10 +22,11 @@
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'
import MonitorPanel from '@components/panel/MonitorPanel'
import { mapMutations, mapState } from 'vuex'
import TopEnterprisePanel from "@components/panel/TopEnterprisePanel";

export default {
  name: 'MapTemplate',
  components: {SgisLayerController, MonitorPanel, LcBasemap, LcServiceLayer, LcServiceLayerFilter},
  components: {TopEnterprisePanel, SgisLayerController, MonitorPanel, LcBasemap, LcServiceLayer, LcServiceLayerFilter},
  data(){
    return {
      basemapHelper: {},