From e1d9c933e8ad4c63400a1c2cec73f98faeffbdb1 Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期二, 05 一月 2021 12:06:34 +0800
Subject: [PATCH] 修改eslint配置增加mock配置

---
 src/components/panel/MonitorPanel.vue | 1448 ++++++++++++++++++++++++++++++---------------------------
 1 files changed, 758 insertions(+), 690 deletions(-)

diff --git a/src/components/panel/MonitorPanel.vue b/src/components/panel/MonitorPanel.vue
index 4edc293..d4901e9 100644
--- a/src/components/panel/MonitorPanel.vue
+++ b/src/components/panel/MonitorPanel.vue
@@ -1,775 +1,843 @@
 <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) {
+      const params = {
+        transNo: '',
+        carrierName: '',
+        transMode: '',
+        vehicleNo: '',
+        orderState: '',
+        vehicleStatus: '',
+        orgCode: this.currentCorp,
+        ownerSectorCode: val,
+        size: 10,
+        current: 1
+      }
+      const datas = await this.handleGetDatas(params)
+      console.log(datas)
+      // this.list = datas.data.records
+      // this.total = datas.data.total
+    },
+    currentCorp: async function (val) {
+      const params = {
+        transNo: '',
+        carrierName: '',
+        transMode: '',
+        vehicleNo: '',
+        orderState: '',
+        vehicleStatus: '',
+        orgCode: val,
+        ownerSectorCode: this.currentCorpType,
+        size: 10,
+        current: 1
+      }
+      const datas = await this.handleGetDatas(params)
+      console.log(datas)
+      // 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)
+      const params = {
+        transNo: '',
+        carrierName: '',
+        transMode: '',
+        vehicleNo: '',
+        orderState: '',
+        vehicleStatus: '',
+        orgCode: this.currentCorp,
+        ownerSectorCode: this.currentCorpType,
+        size: this.pageSize,
+        current: page
+      }
+      const datas = await this.handleGetDatas(params)
+      console.log(datas)
+      // 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 () {
+      const el = $('.btn-stretch')
+      // let cs = 'btn-stretch-active'
+      var rightControl = $('#right-panel')
+      const 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
+      const 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
+      }
+      const datas = await this.handleGetDatas(params)
+      console.log(datas)
+      // this.list = datas.data.pager.records
+      // this.total = datas.data.pager.total
+    },
+    async handleInit () {
+      // this.list = wayBillData.data
+      // this.total = wayBillData.data.length
+      const params = {
+        transNo: '',
+        carrierName: '',
+        transMode: '',
+        vehicleNo: '',
+        orderState: '',
+        vehicleStatus: '',
+        orgCode: this.currentCorp,
+        ownerSectorCode: this.currentCorpType,
+        size: 10,
+        current: 1
+      }
+      const datas = await this.handleGetDatas(params)
+      console.log(datas)
+      // this.list = datas.data.records
+      // this.total = datas.data.total
+    },
+    async handleSetOrgCodeStrings () {
+      const orgCodes = await this.handleGetOrgCode()
+      let orgCodesString = ''
+      for (let i = 0; i < orgCodes.data.length; i++) {
+        const org = orgCodes.data[i]
+        orgCodesString += org.orgCode + ','
+      }
+      this.orgCodeStrings = orgCodesString.substring(0, orgCodesString.length - 1)
+    },
+    async handleGetOrgCode () {
+      const params = {
+        orgSector: this.currentCorpType,
+        serviceType: ''
+      }
+      const datas = await mapApi.getOrganizationompanyList(params)
+      return datas
+    },
+    async handleGetDatas (params) {
+      // let datas = await mapApi.getTransOrderlist(params)
+
+      const datas = 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-page/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-page/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-page/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-page/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-page/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-page/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-page/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-page/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-page/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-page/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-page/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>

--
Gitblit v1.8.0