增加图例组件

chenzeping

2021-03-04 c992c898d962cd53630c929f937a1915ca28de38

 src/components/panel/TopEnterprisePanel.vue

@@ -1,10 +1,10 @@
<template>
  <div class="top-enterprise-panel">
    <el-form :inline="true" :model="formInline" ref="form" style="margin-left:5px">
    <el-form :inline="true" ref="form" style="margin-left:5px" size="mini">
      <el-form-item label="分类：">
        <el-select v-model="form.regionType" @change="handlePipelineType">
        <el-select v-model="form.regionType" @change="handlePipelineType" style="width: 100px">
          <el-option
              v-for="item in regionTypeOptions"
              v-for="item in regionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
@@ -12,9 +12,9 @@
        </el-select>
      </el-form-item>
      <el-form-item label="企业名称：">
        <el-select v-model="form.pipelineType" @change="handlePipelineType">
        <el-select v-model="form.enterprise" style="width: 100px">
          <el-option
              v-for="item in pipelineTypeOptions"
              v-for="item in enterpriseOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
@@ -22,7 +22,7 @@
        </el-select>
      </el-form-item>
      <el-form-item label="模糊搜索：">
        <el-input v-model="form.name" placeholder="在此输入载具号"></el-input>
        <el-input v-model="form.name" placeholder="请输入关键字搜索" style="width: 100px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
@@ -32,6 +32,9 @@
</template>

<script>
import { listRegion } from '@/api/region'
import { listEnterprise } from '@/api/enterprise'

export default {
  name: 'TopEnterprisePanel',
  components: {},
@@ -40,46 +43,11 @@
      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: '茂名润滑油'
      }],
      regionOptions: [],
      enterpriseOptions: [],
      form: {
        regionType: ''
        regionType: '',
        enterprise: ''
      }
    }
  },
@@ -90,15 +58,25 @@
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleSearch () {

    handlePipelineType (item) {
      listEnterprise({}).then((res) => {
        var data = res.data
        this.enterpriseOptions = data[item]
      })
    },
    loadData () {
      listRegion({}).then((res) => {
        this.regionOptions = res.data
      })
    },
    onSubmit () {

    }
  },
  mounted () {
    this.handleSearch()
    this.loadData()
  },
  created () {
  }
}
</script>
@@ -106,25 +84,40 @@
<style lang="less">
.top-enterprise-panel {
  position: absolute;
  margin:0 auto;
  left: 0; right: 0; top: 0;bottom: 0;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1000;
  width: 940px;
  height: 50px;
  padding-top: 15px;
  width: 640px;
  height: 40px;
  padding-top: 10px;
  background: #07325b;
  border:2px solid #2A8FD4;
  border-radius:10px;
  border: 1px solid #2A8FD4;
  border-radius: 10px;
  text-align: center;

  .el-form-item__label{
  .el-button {
    border-radius: 0;
  }

  .el-input__inner {
    border-radius: 0;
    border: 1px solid #0e639e;
    background-color: #061e51;
  }

  .el-form-item__label {
    color: #ffffff;
  }

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

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

  .search-form .el-icon-search {
@@ -139,8 +132,8 @@
  }

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