修改专题搜索结果面板样式

YANGDL

2021-03-02 2969ad9bc0d891a4d9ba3e6d3a62d091d7e119ff

 src/components/panel/topicSearch/SewersSearch.vue

@@ -43,52 +43,47 @@
<!--              </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>运单号：</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>
                          :title="item.properties.pipename">
                                                <span class="B-TMD-table-list-title-y-alarm">{{ 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 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>
                <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">
                  <span>{{ itm.label }}：：</span>
                  <span id="b_twe_loan" :title="item.properties[itm.key] ">{{ item.properties[itm.key] }}</span>
                </div>
                <div>
                  <span>承&nbsp;&nbsp;运&nbsp;&nbsp;商：</span>
                  <span id="b_twe_loan" :title="item.carrierName">{{ item.carrierName }}</span>
<!--                <div><span>收货企业：</span> <span-->
<!--                    id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span>-->
<!--                </div>-->
                </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>

@@ -118,7 +113,7 @@
</template>

<script>
import { PipelineTypeOptions, OutletOptions, AttachOptions, PipelineOptions, EnvironmentOptions, SurroundingsOptions } from '@/conf/LayerSewers'
import { PipelineTypeOptions, pipelineDataTest } from '@/conf/LayerSewers'

export default {
  name: 'SewersSearch',
@@ -126,49 +121,33 @@
    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
        // ,
        // 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
    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.pipelineType = this.pipelineTypeOptions[item - 1].label
      })
      this.form.dataType = this.dataTypeOptions[0].label
    },
    handleDataType (item) {
@@ -180,6 +159,7 @@
        dataType: this.form.dataType
      }
      console.log(param)
      this.list = pipelineDataTest.features
    }
  }
}