新增选项

徐旺旺

2021-01-04 b08454514a15dd66c33ce7ec54da48825545ddde

新增选项

 src/components/panel/MonitorPanel.vue

@@ -1,775 +1,836 @@
<template>
    <div id="right-panel">
        <div class="panel-tab">
            <ul>
                <li id="test" @click="toggleMonitorPanel">
                    <div class="btn-stretch"></div>
                </li>
                <li class="B-TMT-tab-div" @click="showHZ">
                    <div class="B-TMT-tab-waybill" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}"></div>
                </li>
                <li class="B-TMT-tab-div:hover" @click="showWayBill">
                    <div class="B-TMT-tab-route" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>
                </li>
            </ul>
  <div id="right-panel">
    <div class="panel-tab">
      <ul>
        <li id="test" @click="toggleMonitorPanel">
          <div class="btn-stretch"></div>
        </li>
        <li class="B-TMT-tab-div" @click="showHZ">
          <div class="B-TMT-tab-waybill" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}"></div>
        </li>
        <li class="B-TMT-tab-div:hover" @click="showWayBill">
          <div class="B-TMT-tab-route" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>
        </li>
      </ul>
    </div>
    <div class="right-control">
      <div class="el-message-box__header panel_header">
        <div class="el-message-box__title panel_title"><!----><span>管线信息查询</span>
          <div class="panel_searchTotal">共<span style="color: #f5c228;margin:0 5px">{{ total }}</span>条记录
          </div>
        </div>
        <div class="right-control">
            <div class="el-message-box__header panel_header">
                <div class="el-message-box__title panel_title"><!----><span>管线信息查询</span>
                    <div class="panel_searchTotal">共<span style="color: #f5c228;margin:0 5px">{{ total }}</span>条记录
                    </div>
                </div>
            </div>
            <div class="el-message-box__content" style="padding:6px;font-size: 13px;">
                <div class="monitor1" v-if="wayBillVisible">
                    <div>
                        <el-card class="search-panel">
                            <el-form ref="form" :model="form" label-width="90px" class="search-form">
                                <el-form-item label="管线类型：">
                                    <el-input v-model="form.transNo" size="mini" placeholder="在此输入委托单号"></el-input>
                                </el-form-item>
                                <el-form-item label="数据类型：">
                                    <el-input v-model="form.carrierName" size="mini" placeholder="在此输入承运商"></el-input>
                                </el-form-item>
                                <el-form-item label="模糊搜索：">
                                    <el-input v-model="form.vehicleNo" size="mini"
                                                          placeholder="在此输入关键字"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <input type="button" class="btn-reset" @click="handleSearch" value="重置">
                                    <input type="button" class="btn-ok" @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">
      </div>
      <div class="el-message-box__content" style="padding:6px;font-size: 13px;">
        <div class="monitor1" v-if="wayBillVisible">
          <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-reset" @click="handleSearch" value="重置">
                  <input type="button" class="btn-ok" @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">
                    </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>
                  </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="monitor2" v-if="hzVisible">
                    <monitor-h-z></monitor-h-z>
                <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>
                <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>
        </div>
        <div class="monitor2" v-if="hzVisible">
          <monitor-h-z></monitor-h-z>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import $ from 'jquery'
    import MonitorHZ from './MonitorHZ'
    import mapApi from '@/api/mapApi'
    import { mapState } from 'vuex'
import $ from 'jquery'
import MonitorHZ from './MonitorHZ'
import mapApi from '@/api/mapApi'
import {mapState} from 'vuex'

    const ysfsList = [{
        value: '全部',
        label: '全部'
    }, {
        value: '公路',
        label: '公路'
    }, {
        value: '铁路',
        label: '铁路'
    }, {
        value: '水路',
        label: '水路'
    }]
    const ztList = [{
        value: '全部',
        label: '全部'
    }, {
        value: '全部卸货',
        label: '全部卸货'
    }, {
        value: '在途',
        label: '在途'
    }]
    export default {
        name: 'MonitorPanel',
        components: { MonitorHZ },
        data() {
            return {
                isPanelVisible: false,
                wayBillVisible: true,
                hzVisible: false,
                toggleMonitorStyle: 'right:0px',
                list: [],
                total: 0,
                ysfsList,
                ztList,
                form: {
                    transNo: null,
                    carrierName: null,
                    transMode: null,
                    vehicleNo: null,
                    orderState: null,
                    size: 10,
                    current: 1
                },
                pageSize: 10,
                current: 1,
                isWaybillHover: true,
                isRouteHover: false
            }
        },
        computed: {
            ...mapState({
                currentCorpType: state => state.currentCorpType,
                currentCorp: state => state.currentCorp
            }),
            layerHelper() {
                return this.$store.layerHelper
            }
        },
        watch: {
            currentCorpType: async function(val) {
                let params = {
                    transNo: '',
                    carrierName: '',
                    transMode: '',
                    vehicleNo: '',
                    orderState: '',
                    vehicleStatus: '',
                    orgCode: this.currentCorp,
                    ownerSectorCode: val,
                    size: 10,
                    current: 1
                }
                let datas = await this.handleGetDatas(params)
                this.list = datas.data.records
                this.total = datas.data.total
            },
            currentCorp: async function(val) {
                let params = {
                    transNo: '',
                    carrierName: '',
                    transMode: '',
                    vehicleNo: '',
                    orderState: '',
                    vehicleStatus: '',
                    orgCode: val,
                    ownerSectorCode: this.currentCorpType,
                    size: 10,
                    current: 1
                }
                let datas = await this.handleGetDatas(params)
                this.list = datas.data.records
                this.total = datas.data.total
            }
        },
        methods: {
            handleClose(done) {
                console.log(done)
            },
            async handlePage(page) {
                console.log(page)
                let params = {
                    transNo: '',
                    carrierName: '',
                    transMode: '',
                    vehicleNo: '',
                    orderState: '',
                    vehicleStatus: '',
                    orgCode: this.currentCorp,
                    ownerSectorCode: this.currentCorpType,
                    size: this.pageSize,
                    current: page
                }
                let datas = await this.handleGetDatas(params)
                this.list = datas.data.records
                this.total = datas.data.total
            },
            handleLocation(item) {
                window.vectorLayerHelper.vectorLayerMap.cheliang.showGeometryByXY(item.transNo, item.vehicleNo, item.lng, item.lat)
            },
            toggleMonitorPanel() {
                let el = $('.btn-stretch')
                // let cs = 'btn-stretch-active'
                var rightControl = $('#right-panel')
                let right = rightControl.css('right')
                if (right === '10px') {
                    rightControl.animate({
                        right: '-290px'
                    })
                    el.css({
                        'transform': 'rotateY(180deg)',
                        'transform-origin': '50% 50%',
                        'transition': 'transform 1s linear'
                    })
                } else {
                    rightControl.animate({
                        right: '10px'
                    })
                    el.css({
                        'transform': 'rotateY(0deg)',
                        'transform-origin': '50% 50%',
                        'transition': 'transform 1s linear'
                    })
                }
            },
            async handleSearch() {
                // this.list = wayBillData.data
                // this.total = wayBillData.data.length
                let params = {
                    transNo: this.form.transNo,
                    carrierName: this.form.carrierName,
                    transMode: this.form.transMode,
                    vehicleNo: this.form.vehicleNo,
                    orderState: this.form.orderState,
                    vehicleStatus: '',
                    orgCode: this.orgCodeStrings,
                    size: this.pageSize,
                    current: this.current
                }
                let datas = await this.handleGetDatas(params)
                this.list = datas.data.pager.records
                this.total = datas.data.pager.total
            },
            async handleInit() {
                // this.list = wayBillData.data
                // this.total = wayBillData.data.length
                let params = {
                    transNo: '',
                    carrierName: '',
                    transMode: '',
                    vehicleNo: '',
                    orderState: '',
                    vehicleStatus: '',
                    orgCode: this.currentCorp,
                    ownerSectorCode: this.currentCorpType,
                    size: 10,
                    current: 1
                }
                let datas = await this.handleGetDatas(params)
                this.list = datas.data.records
                this.total = datas.data.total
            },
            async handleSetOrgCodeStrings() {
                let orgCodes = await this.handleGetOrgCode()
                let orgCodesString = ''
                for (let i = 0; i < orgCodes.data.length; i++) {
                    let org = orgCodes.data[i]
                    orgCodesString += org.orgCode + ','
                }
                this.orgCodeStrings = orgCodesString.substring(0, orgCodesString.length - 1)
            },
            async handleGetOrgCode() {
                let params = {
                    orgSector: this.currentCorpType,
                    serviceType: ''
                }
                let datas = await mapApi.getOrganizationompanyList(params)
                return datas
            },
            async handleGetDatas(params) {
                let datas = await mapApi.getTransOrderlist(params)
                return datas
            },
            showHZ() {
                this.wayBillVisible = true
                this.hzVisible = false
                this.isWaybillHover = true
                this.isRouteHover = false
            },
            showWayBill() {
                this.hzVisible = true
                this.wayBillVisible = false
                this.isWaybillHover = false
                this.isRouteHover = true
            }
        },
        mounted() {
            this.handleInit()
        }
export default {
  name: 'MonitorPanel',
  components: {MonitorHZ},
  data() {
    return {
      isPanelVisible: false,
      wayBillVisible: true,
      hzVisible: false,
      toggleMonitorStyle: 'right:0px',
      list: [],
      total: 0,
      pipelineTypeOptions: [{
        value: '1',
        label: '管线本体'
      }, {
        value: '2',
        label: '附属设施'
      }],
      dataTypeOptions: [],
      attachOptions: [{
        value: '1',
        label: '阀门'
      },{
        value: '2',
        label: '管廊'
      },{
        value: '3',
        label: '管架'
      },{
        value: '4',
        label: '三通'
      },{
        value: '5',
        label: '四通'
      },{
        value: '6',
        label: '弯头'
      }],
      pipelineOptions: [{
        value: '1',
        label: '管线'
      }, {
        value: '2',
        label: '雨水管段'
      }, {
        value: '3',
        label: '含盐管段'
      }, {
        value: '4',
        label: '含油管段'
      }, {
        value: '5',
        label: '事故水管段'
      }, {
        value: '6',
        label: '含碱管段'
      }, {
        value: '7',
        label: '循环水管段'
      }, {
        value: '8',
        label: '净化水管段'
      }, {
        value: '9',
        label: '生活污水管段'
      }],
      form: {
        transNo: null,
        carrierName: null,
        transMode: null,
        vehicleNo: null,
        orderState: null,
        size: 10,
        current: 1
      },
      pageSize: 10,
      current: 1,
      isWaybillHover: true,
      isRouteHover: false
    }
  },
  computed: {
    ...mapState({
      currentCorpType: state => state.currentCorpType,
      currentCorp: state => state.currentCorp
    }),
    layerHelper() {
      return this.$store.layerHelper
    }
  },
  watch: {
    currentCorpType: async function (val) {
      let params = {
        transNo: '',
        carrierName: '',
        transMode: '',
        vehicleNo: '',
        orderState: '',
        vehicleStatus: '',
        orgCode: this.currentCorp,
        ownerSectorCode: val,
        size: 10,
        current: 1
      }
      let datas = await this.handleGetDatas(params)
      this.list = datas.data.records
      this.total = datas.data.total
    },
    currentCorp: async function (val) {
      let params = {
        transNo: '',
        carrierName: '',
        transMode: '',
        vehicleNo: '',
        orderState: '',
        vehicleStatus: '',
        orgCode: val,
        ownerSectorCode: this.currentCorpType,
        size: 10,
        current: 1
      }
      let datas = await this.handleGetDatas(params)
      this.list = datas.data.records
      this.total = datas.data.total
    }
  },
  methods: {
    handleClose(done) {
      console.log(done)
    },
    handlePipelineType(item){
      console.log(item)
      if(item === '2'){
        this.dataTypeOptions = this.attachOptions
      }else if(item === '1'){
        this.dataTypeOptions = this.pipelineOptions
      }
    },
    async handlePage(page) {
      console.log(page)
      let params = {
        transNo: '',
        carrierName: '',
        transMode: '',
        vehicleNo: '',
        orderState: '',
        vehicleStatus: '',
        orgCode: this.currentCorp,
        ownerSectorCode: this.currentCorpType,
        size: this.pageSize,
        current: page
      }
      let datas = await this.handleGetDatas(params)
      this.list = datas.data.records
      this.total = datas.data.total
    },
    handleLocation(item) {
      window.vectorLayerHelper.vectorLayerMap.cheliang.showGeometryByXY(item.transNo, item.vehicleNo, item.lng, item.lat)
    },
    toggleMonitorPanel() {
      let el = $('.btn-stretch')
      // let cs = 'btn-stretch-active'
      var rightControl = $('#right-panel')
      let right = rightControl.css('right')
      if (right === '10px') {
        rightControl.animate({
          right: '-290px'
        })
        el.css({
          'transform': 'rotateY(180deg)',
          'transform-origin': '50% 50%',
          'transition': 'transform 1s linear'
        })
      } else {
        rightControl.animate({
          right: '10px'
        })
        el.css({
          'transform': 'rotateY(0deg)',
          'transform-origin': '50% 50%',
          'transition': 'transform 1s linear'
        })
      }
    },
    async handleSearch() {
      // this.list = wayBillData.data
      // this.total = wayBillData.data.length
      let params = {
        transNo: this.form.transNo,
        carrierName: this.form.carrierName,
        transMode: this.form.transMode,
        vehicleNo: this.form.vehicleNo,
        orderState: this.form.orderState,
        vehicleStatus: '',
        orgCode: this.orgCodeStrings,
        size: this.pageSize,
        current: this.current
      }
      let datas = await this.handleGetDatas(params)
      this.list = datas.data.pager.records
      this.total = datas.data.pager.total
    },
    async handleInit() {
      // this.list = wayBillData.data
      // this.total = wayBillData.data.length
      let params = {
        transNo: '',
        carrierName: '',
        transMode: '',
        vehicleNo: '',
        orderState: '',
        vehicleStatus: '',
        orgCode: this.currentCorp,
        ownerSectorCode: this.currentCorpType,
        size: 10,
        current: 1
      }
      let datas = await this.handleGetDatas(params)
      this.list = datas.data.records
      this.total = datas.data.total
    },
    async handleSetOrgCodeStrings() {
      let orgCodes = await this.handleGetOrgCode()
      let orgCodesString = ''
      for (let i = 0; i < orgCodes.data.length; i++) {
        let org = orgCodes.data[i]
        orgCodesString += org.orgCode + ','
      }
      this.orgCodeStrings = orgCodesString.substring(0, orgCodesString.length - 1)
    },
    async handleGetOrgCode() {
      let params = {
        orgSector: this.currentCorpType,
        serviceType: ''
      }
      let datas = await mapApi.getOrganizationompanyList(params)
      return datas
    },
    async handleGetDatas(params) {
      let datas = await mapApi.getTransOrderlist(params)
      return datas
    },
    showHZ() {
      this.wayBillVisible = true
      this.hzVisible = false
      this.isWaybillHover = true
      this.isRouteHover = false
    },
    showWayBill() {
      this.hzVisible = true
      this.wayBillVisible = false
      this.isWaybillHover = false
      this.isRouteHover = true
    }
  },
  mounted() {
    this.handleInit()
  }
}
</script>

<style lang="less">
        #right-panel {
            width: 323px;
            height: 573px;
            position: absolute;
            right: 10px;
            top: 10px;
#right-panel {
  width: 323px;
  height: 573px;
  position: absolute;
  right: 10px;
  top: 10px;

            .el-card__body {
                padding: 7px;
            }
  .el-card__body {
    padding: 7px;
  }

            .el-form-item__content {
                color: rgb(52, 224, 255);
            }
  .el-form-item__content {
    color: rgb(52, 224, 255);
  }

            .el-picker-panel {
                background-color: #061e51 !important;
            }
  .el-picker-panel {
    background-color: #061e51 !important;
  }

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

            .el-form-item__label {
                color: rgb(52, 224, 255);
            }
  .el-form-item__label {
    color: rgb(52, 224, 255);
  }

            .el-input__inner::placeholder {
                color: #9a9494;
            }
  .el-input__inner::placeholder {
    color: #9a9494;
  }

            /* 谷歌 */
  /* 谷歌 */

            .el-input__inner::-webkit-input-placeholder {
                color: #9a9494;
            }
  .el-input__inner::-webkit-input-placeholder {
    color: #9a9494;
  }

            /* 火狐 */
  /* 火狐 */

            .el-input__inner:-moz-placeholder {
                color: #9a9494;
            }
  .el-input__inner:-moz-placeholder {
    color: #9a9494;
  }

            /*ie*/
  /*ie*/

            .el-input__inner:-ms-input-placeholder {
                color: #9a9494;
            }
  .el-input__inner:-ms-input-placeholder {
    color: #9a9494;
  }

            .warning {
                color: #dcc805;
            }
  .warning {
    color: #dcc805;
  }

            #plateNumber_n a {
                color: rgb(52, 224, 255);
            }
  #plateNumber_n a {
    color: rgb(52, 224, 255);
  }

            .offline {
                color: #9a9494;
            }
  .offline {
    color: #9a9494;
  }

            .customInput {
                width: 118px;
            }
  .customInput {
    width: 118px;
  }

            .btn-ok{
                float:right;
                margin-right:10px;
                width: 4rem;
                background-color: lightblue;
                color: white;
                border: 1px solid white;
            }
            .btn-reset{
                float:right;
                margin-right:10px;
                width: 4rem;
                background-color: orange;
                color: white;
                border: 1px solid white;
            }
  .btn-ok {
    float: right;
    margin-right: 10px;
    width: 4rem;
    background-color: lightblue;
    color: white;
    border: 1px solid white;
  }

            .component-fade-enter-active, .component-fade-leave-active {
                transition: opacity .5s ease;
            }
  .btn-reset {
    float: right;
    margin-right: 10px;
    width: 4rem;
    background-color: orange;
    color: white;
    border: 1px solid white;
  }

            .component-fade-enter, .component-fade-leave-to
                /* .component-fade-leave-active for below version 2.1.8 */ {
                opacity: 0;
            }
  .component-fade-enter-active, .component-fade-leave-active {
    transition: opacity .5s ease;
  }

            .B-TMD-table-icons ul li {
                float: left;
                margin: 10px;
                list-style: none;
            }
  .component-fade-enter, .component-fade-leave-to
    /* .component-fade-leave-active for below version 2.1.8 */ {
    opacity: 0;
  }

            .B-TMD-table-list {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
  .B-TMD-table-icons ul li {
    float: left;
    margin: 10px;
    list-style: none;
  }

            .B-TMD-table-list-title {
                width: 100%;
                height: 50px;
            }
  .B-TMD-table-list {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

            .B-TMD-table-list-head {
                width: 160px;
                float: left;
                padding-left: 5px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
  .B-TMD-table-list-title {
    width: 100%;
    height: 50px;
  }

            .B-TMD-table-list-title-y-adress {
                width: 16px;
                height: 22px;
                display: block;
                background: url('/assets/images/map-pages/icon/icon.png') no-repeat 0 -90px;
                cursor: pointer;
            }
  .B-TMD-table-list-head {
    width: 160px;
    float: left;
    padding-left: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

            .B-TMD-table-list-title-y-car {
                background: url('/assets/images/map-pages/icon/icon.png') no-repeat -45px 0;
                width: 38px;
                height: 38px;
                display: block;
                margin-top: 2px !important;
            }
  .B-TMD-table-list-title-y-adress {
    width: 16px;
    height: 22px;
    display: block;
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat 0 -90px;
    cursor: pointer;
  }

            .B-TMD-table-list-title-y-car-offline {
                background: url('/assets/images/map-pages/icon/icon.png') no-repeat -90px 0;
                width: 38px;
                height: 38px;
                display: block;
                margin-top: 2px !important;
            }
  .B-TMD-table-list-title-y-car {
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat -45px 0;
    width: 38px;
    height: 38px;
    display: block;
    margin-top: 2px !important;
  }

            .B-TMD-table-list-title-y-car-warning {
                background: url('/assets/images/map-pages/icon/icon.png') no-repeat 0 0;
                width: 38px;
                height: 38px;
                display: block;
                margin-top: 2px !important;
            }
  .B-TMD-table-list-title-y-car-offline {
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat -90px 0;
    width: 38px;
    height: 38px;
    display: block;
    margin-top: 2px !important;
  }

            .btn-stretch {
                width: 20px;
                height: 28px;
                background: url('/assets/images/map-pages/icon/icon.png') no-repeat -408px 0;
                margin-left: 10px;
                margin-top: 3px;
                cursor: pointer;
  .B-TMD-table-list-title-y-car-warning {
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat 0 0;
    width: 38px;
    height: 38px;
    display: block;
    margin-top: 2px !important;
  }

                transform: rotateY(180deg);
                transform-origin: 50% 50%;
                transition: transform 1s linear;
            }
  .btn-stretch {
    width: 20px;
    height: 28px;
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat -408px 0;
    margin-left: 10px;
    margin-top: 3px;
    cursor: pointer;

            .btn-stretch-active {
                background: url('/assets/images/map-pages/icon/icon.png') no-repeat -440px 0;
            }
    transform: rotateY(180deg);
    transform-origin: 50% 50%;
    transition: transform 1s linear;
  }

            .panel-tab {
                position: absolute;
                left: 0;
                height: 120px;
                top: 0;
                width: 40px;
                z-index: 500;
                background-color: #030D2E;
                background: url('/assets/images/map-pages/icon/caidan.png') no-repeat;
            }
  .btn-stretch-active {
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat -440px 0;
  }

            .B-TMT-tab-div {
                width: 29px;
                height: 29px;
                margin-left: 3px;
                margin-top: 10px;
                cursor: pointer;
                :hover {
                    cursor: pointer;
                    // background: url("");
                }
            }
  .panel-tab {
    position: absolute;
    left: 0;
    height: 120px;
    top: 0;
    width: 40px;
    z-index: 500;
    background-color: #030D2E;
    background: url('/assets/images/map-pages/icon/caidan.png') no-repeat;
  }

            .B-TMT-tab-waybill {
                width: 29px !important;
                height: 29px !important;
                margin-top: 0 !important;
                margin-left: 0 !important;
                background: url('/assets/images/map-pages/icon/icon.png') no-repeat -320px 0;
            }
  .B-TMT-tab-div {
    width: 29px;
    height: 29px;
    margin-left: 3px;
    margin-top: 10px;
    cursor: pointer;

            .B-TMT-tab-route {
                width: 20px;
                height: 19px;
                margin-left: 5px;
                margin-top: 6px;
                background: url('/assets/images/map-pages/icon/icon.png') no-repeat -169px 0;
            }
    :hover {
      cursor: pointer;
      // background: url("");
    }
  }

  .B-TMT-tab-waybill {
    width: 29px !important;
    height: 29px !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat -320px 0;
  }

  .B-TMT-tab-route {
    width: 20px;
    height: 19px;
    margin-left: 5px;
    margin-top: 6px;
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat -169px 0;
  }

  .B-TMT-tab-waybill-isActive, .B-TMT-tab-waybill:hover {
    width: 29px !important;
    height: 29px !important;
    margin-top: 0 !important;
    margin-left: -1px !important;
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat -361px 0 !important;
  }

  .B-TMT-tab-route-isActive, .B-TMT-tab-route:hover {
    width: 32px !important;
    height: 29px !important;
    margin-top: 0 !important;
    margin-left: -1px !important;
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat -197px 0 !important;
  }

  .panel-tab ul {
    list-style: none;
  }

  .panel-tab ul li {
    height: 30px;
  }

  .right-control {
    width: 290px;
    height: 573px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    background: url('/assets/images/map-pages/icon/bgc.png') no-repeat;
  }

            .B-TMT-tab-waybill-isActive, .B-TMT-tab-waybill:hover {
                width: 29px !important;
                height: 29px !important;
                margin-top: 0 !important;
                margin-left: -1px !important;
                background: url('/assets/images/map-pages/icon/icon.png') no-repeat -361px 0 !important;
            }
  .panel_searchTotal {
    font-size: 12px;
    float: right;
  }

            .B-TMT-tab-route-isActive, .B-TMT-tab-route:hover {
                width: 32px !important;
                height: 29px !important;
                margin-top: 0 !important;
                margin-left: -1px !important;
                background: url('/assets/images/map-pages/icon/icon.png') no-repeat -197px 0 !important;
            }
  .panel_header {
    // background-color: #030D2E;
    padding: 7px 15px 3px 20px;
  }

            .panel-tab ul {
                list-style: none;
            }
  .panel_title {
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    color: #78c4ff;
    font-weight: bold;
  }

            .panel-tab ul li {
                height: 30px;
            }
  .el-message-box__content {
    background-color: transparent;
  }

            .right-control {
                width: 290px;
                height: 573px;
                position: absolute;
                top: 0;
                right: 0;
                z-index: 999;
                background: url('/assets/images/map-pages/icon/bgc.png') no-repeat;
            }
  .search-form .el-form-item {
    margin: 0px;
  }

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

            .panel_header {
                // background-color: #030D2E;
                padding: 7px 15px 3px 20px;
            }
  .search-panel {
    border: #07325B;
    background-color: #07325B !important;
    margin-top: 0px;

            .panel_title {
                font-size: 12px;
                margin: 0px;
                padding: 0px;
                color: #78c4ff;
                font-weight: bold;
            }
    .el-input__inner {
      border-radius: 0px !important;
      background-color: #061e51 !important;
    }
  }

            .el-message-box__content {
                background-color: transparent;
            }
  input::-webkit-input-placeholder {
    color: #569ee1;
  }

            .search-form .el-form-item {
                margin: 0px;
            }
  input::-moz-input-placeholder {
    color: #569ee1;
  }

            .search-form .el-icon-search {
                display: grid;
                line-height: 30px;
                font-size: 18px;
            }
  input::-ms-input-placeholder {
    color: #569ee1;
  }

            .search-panel {
                border: #07325B;
                background-color: #07325B !important;
                margin-top: 0px;
  input[type=text]:focus {
    outline: 1px solid #17e4f6;
    // box-shadow:  1px 0px 3px 0px #17e4f6;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  }

                .el-input__inner {
                    border-radius: 0px !important;
                    background-color: #061e51 !important;
                }
            }
  .search-result {
    margin: 5px 0px 0px 0px;
    padding: 0px;
    border: #051842;
    height: 290px;
    overflow-y: scroll;
    background-color: transparent !important;
    margin-bottom: -8px !important;
  }

            input::-webkit-input-placeholder {
                color: #569ee1;
            }
  .offline {
    color: #64778B;
  }

            input::-moz-input-placeholder {
                color: #569ee1;
            }
  .B-TMD-table-list {
    margin-top: 10px;
    text-align: left;
    padding-left: 10px;
    //color: #64778B;
    color: #34e0ff;
    width: 100%;
    line-height: 25px;
    background: url('/assets/images/map-pages/icon/dd.png') no-repeat;
  }

            input::-ms-input-placeholder {
                color: #569ee1;
            }
  .B-TMD-inp-button {
    width: 46px;
    height: 52px;
    position: absolute;
    bottom: 8px;
    right: 16px;
    background: url('/assets/images/map-pages/icon/icon.png') no-repeat -481px 0;
    cursor: pointer;
  }

            input[type=text]:focus {
                outline: 1px solid #17e4f6;
                // box-shadow:  1px 0px 3px 0px #17e4f6;
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            }
  .footer-page {
    position: absolute;
    background-color: transparent !important;
    bottom: 10px !important;
    margin-left: 0px;
    border: none;

            .search-result {
                margin: 5px 0px 0px 0px;
                padding: 0px;
                border: #051842;
                height: 290px;
                overflow-y: scroll;
                background-color: transparent !important;
                margin-bottom: -8px !important;
            }
    .warnPagination {
      .btn-quicknext, .btn-quickprev {
        color: #e4e8f1 !important;
        background-color: transparent;
        // border: 1px solid #25AECD;
        border-left: 1px solid #25AECD;
        border-bottom: 1px solid #25AECD;
        border-top: 1px solid #25AECD;
        color: #e4e8f1;
      }

            .offline {
                color: #64778B;
            }
      .el-pager li {
        color: #e4e8f1;
        background: transparent;
        // border: 1px solid #25AECD;
        border-left: 1px solid #25AECD;
        border-bottom: 1px solid #25AECD;
        border-top: 1px solid #25AECD;
      }

            .B-TMD-table-list {
                margin-top: 10px;
                text-align: left;
                padding-left: 10px;
                //color: #64778B;
                color: #34e0ff;
                width: 100%;
                line-height: 25px;
                background: url('/assets/images/map-pages/icon/dd.png') no-repeat;
            }
      .el-pager li.active {
        border-color: #25AECD;
        background-color: rgba(38, 222, 253, 0.3);
        color: #e4e8f1;
      }

            .B-TMD-inp-button {
                width: 46px;
                height: 52px;
                position: absolute;
                bottom: 8px;
                right: 16px;
                background: url('/assets/images/map-pages/icon/icon.png') no-repeat -481px 0;
                cursor: pointer;
            }
      .el-pager li:hover {
        border-color: #25AECD;
        background-color: rgba(38, 222, 253, 0.3);
        color: #34e0ff;
      }

            .footer-page {
                position: absolute;
                background-color: transparent !important;
                bottom: 10px !important;
                margin-left: 0px;
                border: none;
      .btn-prev {
        background-color: transparent;
        // border: 1px solid #25AECD;
        border-left: 1px solid #25AECD;
        border-bottom: 1px solid #25AECD;
        border-top: 1px solid #25AECD;
        color: #e4e8f1;
      }

                .warnPagination {
                    .btn-quicknext, .btn-quickprev {
                        color: #e4e8f1 !important;
                        background-color: transparent;
                       // border: 1px solid #25AECD;
                        border-left: 1px solid #25AECD;
                        border-bottom: 1px solid #25AECD;
                        border-top: 1px solid #25AECD;
                        color: #e4e8f1;
                    }
                    .el-pager li {
                        color: #e4e8f1;
                        background: transparent;
                       // border: 1px solid #25AECD;
                        border-left: 1px solid #25AECD;
                        border-bottom: 1px solid #25AECD;
                        border-top: 1px solid #25AECD;
                    }
      .btn-next {
        background-color: transparent;
        border: 1px solid #25AECD;
        color: #e4e8f1;
      }
    }
  }

                    .el-pager li.active {
                        border-color: #25AECD;
                        background-color: rgba(38, 222, 253, 0.3);
                        color: #e4e8f1;
                    }
  ::-webkit-scrollbar {
    width: 7px;
    height: 5px !important;
  }

                    .el-pager li:hover {
                        border-color: #25AECD;
                        background-color: rgba(38, 222, 253, 0.3);
                        color: #34e0ff;
                    }
  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #0661AE;
    border: 1px solid transparent;
  }

                    .btn-prev {
                        background-color: transparent;
                       // border: 1px solid #25AECD;
                        border-left: 1px solid #25AECD;
                        border-bottom: 1px solid #25AECD;
                        border-top: 1px solid #25AECD;
                        color: #e4e8f1;
                    }
                    .btn-next {
                        background-color: transparent;
                         border: 1px solid #25AECD;
                        color: #e4e8f1;
                    }
                }
            }
  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0px;
    background: #0E3565;
  }

            ::-webkit-scrollbar{
                width: 7px;
                height: 5px !important;
            }
            ::-webkit-scrollbar-thumb {
                /*滚动条里面小方块*/
                border-radius: 10px;
                box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
                background   : #0661AE;
                border: 1px solid transparent;
            }
            ::-webkit-scrollbar-track {
                /*滚动条里面轨道*/
                // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
                border-radius: 0px;
                background   : #0E3565;
            }
            .selectFrom {
                color: #061e51;
                border: 1px solid #061e51 !important;
                background: #dcc805 !important;
  .selectFrom {
    color: #061e51;
    border: 1px solid #061e51 !important;
    background: #dcc805 !important;

                .el-select-dropdown__list {
                    background: #061e51 !important;
                }
    .el-select-dropdown__list {
      background: #061e51 !important;
    }

                .el-select-dropdown__item {
                    color: #949494;
                    background: #061e51 !important;
                }
    .el-select-dropdown__item {
      color: #949494;
      background: #061e51 !important;
    }

                .el-select-dropdown__item.hover,
                .el-select-dropdown__item:hover {
                    color: #fff;
                    background: #061e51 !important;
                }
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
      color: #fff;
      background: #061e51 !important;
    }

                .popper__arrow {
                    background-color: #061e51 !important;
                }
            }
        }
    .popper__arrow {
      background-color: #061e51 !important;
    }
  }
}
</style>