| | |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- <el-form-item >--> |
| | | <el-input v-model="form.key" size="mini" |
| | | <el-input v-model="form.keyword" size="mini" |
| | | placeholder="在此输入关键字搜索"> |
| | | <!-- <el-button slot="append" icon="el-icon-search" size="mini"></el-button>--> |
| | | <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i>--> |
| | |
| | | <!-- </el-form-item>--> |
| | | </el-form> |
| | | </el-card> |
| | | <el-card class="search-result" style="height:271px;"> |
| | | <el-card class="search-result" > |
| | | <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>运单号:</span>--> |
| | | <span id="waybillNumber" class="" |
| | | :title="item.properties.pipename"> |
| | | <span class="location-btn" @click="handleLocation(item)">{{ item.properties.pipename }}</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 class="B-TMD-table-list-title-c">--> |
| | | <!-- {{ labelList[0] }}:--> |
| | | <!-- <span id="plateNumber_p">--> |
| | | <!-- <span id="plateNumber_n"><a href="#">{{ item.properties.item.p1 }}</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 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 v-for="itm in labelList" :key="itm.label"> |
| | | <span>{{ itm.label }}:</span> |
| | | <span id="b_twe_loan" :title="item.properties[itm.key] ">{{ item.properties[itm.key] }}</span> |
| | | </div> |
| | | <div> |
| | | <span>承 运 商:</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><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 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> |
| | | |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { PipelineTypeOptions, OutletOptions, AttachOptions, PipelineOptions, EnvironmentOptions, SurroundingsOptions } from '@/conf/LayerSewers' |
| | | import { PipelineTypeOptions } from '@/conf/LayerSewers' |
| | | |
| | | import WfsHelper from '@components/helpers/WfsHelper' |
| | | import AjaxUtils from '@utils/AjaxUtils' |
| | | export default { |
| | | name: 'SewersSearch', |
| | | data () { |
| | | return { |
| | | gdVisible: true, |
| | | list: [], |
| | | labelList: PipelineTypeOptions[0].labelList, |
| | | total: 0, |
| | | pipelineTypeOptions: PipelineTypeOptions, |
| | | outletOptions: OutletOptions, |
| | | dataTypeOptions: PipelineTypeOptions, |
| | | |
| | | attachOptions: AttachOptions, |
| | | pipelineOptions: PipelineOptions, |
| | | environmentOptions: EnvironmentOptions, |
| | | surroundingsOptions: SurroundingsOptions, |
| | | dataTypeOptions: PipelineTypeOptions[0].options, |
| | | form: { |
| | | |
| | | pipelineType: PipelineTypeOptions[0].label, |
| | | dataType: PipelineOptions[0].label, |
| | | // transNo: null, |
| | | // carrierName: null, |
| | | // transMode: null, |
| | | // vehicleNo: null, |
| | | // orderState: null, |
| | | size: 10, |
| | | current: 1 |
| | | dataType: PipelineTypeOptions[0].options[0].label, |
| | | query: PipelineTypeOptions[0].options[0], |
| | | keyword: '研究院01路YS000001' |
| | | // , |
| | | // size: 10, |
| | | // current: 1 |
| | | }, |
| | | pageSize: 10, |
| | | current: 1, |
| | | // pageSize: 10, |
| | | // current: 1, |
| | | isWaybillHover: true, |
| | | isRouteHover: false |
| | | } |
| | | }, |
| | | props: ['title'], |
| | | methods: { |
| | | handlePipelineType (item) { |
| | | console.log(item) |
| | | if (item === '2') { |
| | | this.dataTypeOptions = this.outletOptions |
| | | } else if (item === '1') { |
| | | this.dataTypeOptions = this.pipelineOptions |
| | | } else if (item === '3') { |
| | | this.dataTypeOptions = this.attachOptions |
| | | } else if (item === '4') { |
| | | this.dataTypeOptions = this.environmentOptions |
| | | } else if (item === '5') { |
| | | this.dataTypeOptions = this.surroundingsOptions |
| | | } |
| | | this.form.pipelineType = this.pipelineTypeOptions[item - 1].label |
| | | handlePipelineType (val) { |
| | | this.pipelineTypeOptions.forEach((itm) => { |
| | | if (val === itm.value) { |
| | | this.dataTypeOptions = itm.options |
| | | this.form.pipelineType = itm.label |
| | | this.form.labelList = itm.labelList |
| | | } |
| | | }) |
| | | this.form.dataType = this.dataTypeOptions[0].label |
| | | this.form.key = this.dataTypeOptions[0].key |
| | | }, |
| | | handleDataType (item) { |
| | | |
| | | handleDataType (val) { |
| | | this.dataTypeOptions.forEach((itm) => { |
| | | if (val === itm.value) { |
| | | this.form.query = itm |
| | | } |
| | | }) |
| | | }, |
| | | handleSearch () { |
| | | const param = { |
| | |
| | | dataType: this.form.dataType |
| | | } |
| | | console.log(param) |
| | | var wfsHelper = new WfsHelper() |
| | | wfsHelper.addTypeName(this.form.query.layerName) |
| | | wfsHelper.addLike(this.form.query.key, this.form.keyword) |
| | | // const _this = this |
| | | AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}, (res) => { |
| | | console.log(res) |
| | | this.list = res.features |
| | | }) |
| | | }, |
| | | handleLocation (val) { |
| | | console.log(val) |
| | | const bound = this.L.geoJSON([val], {}).getBounds() |
| | | console.log(bound) |
| | | var layer = window.serviceLayerHelper.getByLayerId(val.id) |
| | | console.log(layer) |
| | | layer && layer.openPopup() |
| | | this.$store.state.map.map.flyToBounds(bound) |
| | | } |
| | | } |
| | | } |