添加企业点图层

chenyabin

2021-04-01 fd4ebe4cf55ef5ecdbbb2fab9ecc3686907770bb

 src/components/panel/topicSearch/SoilGroundWaterSearch.vue

@@ -0,0 +1,173 @@
<template>
    <div class="sewers-search">
        <div class="search-title">
            土壤及地下水
        </div>
        <el-card class="search-panel">
            <el-form ref="form" :model="form" label-width="90px" class="search-form">
                <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-select v-model="form.dataType">
                        <el-option
                                v-for="item in dataTypeOptions"
                                :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.key" size="mini"
                              placeholder="在此输入关键字"></el-input>
                </el-form-item>
                <el-form-item>
                    <input type="button" class="btn-ok" @click="handleSearch" value="查询">
                    <input type="button" class="btn-reset" @click="handleSearch" value="重置">
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="search-result" style="height:271px;">
            <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
                <div class="B-TMD-table-list-title">
                    <div class="B-TMD-table-list-head">
                        <div class="B-TMD-table-list-title-y"
                             :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]">
                            <span>运单号：</span>
                            <span id="waybillNumber" class="B-TMD-table-list-title-y-num"
                                  :title="item.transNo">
                                                <span class="B-TMD-table-list-title-y-alarm">{{ item.transNo }}</span>
                                            </span>
                        </div>
                        <div class="B-TMD-table-list-title-c">
                            载具号：
                            <span id="plateNumber_p">
                                                <span id="plateNumber_n"><a href="#">{{ item.vehicleNo }}</a></span>
                                            </span>
                        </div>
                    </div>
                    <div class="B-TMD-table-icons" style="float:right">
                        <ul>
                            <li class="B-TMD-table-list-title-y-adress"
                                @click="handleLocation(item)"></li>
                            <li :class="[{'B-TMD-table-list-title-y-car': item.vehicleStatus ==='910002', 'B-TMD-table-list-title-y-car-offline': item.vehicleStatus ==='910001','B-TMD-table-list-title-y-car-warning': item.vehicleStatus==='910003' }]"></li>
                        </ul>
                    </div>
                </div>
                <div class="B-TMD-table-list-content">
                    <div>
                        <span>发货企业：</span>
                        <span id="b_twe_consignment" :title="item.outWarehouseName">{{
                item.outWarehouseName == null ? "暂无" : item.outWarehouseName
              }}</span>
                    </div>
                    <div>
                        <span>承&nbsp;&nbsp;运&nbsp;&nbsp;商：</span>
                        <span id="b_twe_loan" :title="item.carrierName">{{ item.carrierName }}</span>
                    </div>
                    <div><span>收货企业：</span> <span
                            id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span></div>
                </div>
                <div class="B-TMD-table-list-bottom">
                    <div class="B-TMD-table-list-bottom-name">
                        货物名称：<span :title="item.materialName">{{ item.materialName }}</span></div>
                </div>
            </div>
        </el-card>

        <el-card class="footer-page" v-if="total > 10">
            <el-pagination
                    small
                    @current-change="handlePage"
                    :page-size=pageSize
                    layout="prev, pager, next"
                    :total=total
                    :current-page=current
                    class="warnPagination"
            >
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
export default {
  name: 'MonitorAreaTips',
  components: {},
  data () {
    return {
      isPanelVisible: false,
      total: 0,
      list: [],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    handleClose (done) {
      console.log(done)
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleSearch () {

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

<style lang="less">
    .sewers-search{
        position: relative;
        overflow: hidden;
        .search-panel{
            background-color: transparent;
            border: 1px solid @background-color-split;
            padding: 10px;

            /deep/ input {
                border-radius: 0;
                background-color: @background-color-split ;
                border: solid 1px @color ;
                color: @color-gray;
                font-size: 0.01rem;
                .el-select .el-input.is-focus .el-input__inner{
                    border-color: @color;
                }
            }
            /deep/ input:focus{
                border-color: @color;
            }
        }
        .search-btn{

        }
        //location-btn{
        //
        //}
        .location-btn:hover,.el-input__icon:hover{
            color: @color;
            cursor: pointer;
        }
    }
</style>