From 74deb02c39383fdad17240a23602d49ab44f5ae3 Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期五, 15 一月 2021 18:03:01 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/components/panel/RightSearchPanel.vue | 330 +++---------------
src/components/panel/ToolBoxPanel.vue | 97 +++++
src/assets/images/map-pages/icon/toolbox/polygon.png | 0
src/views/MapTemplate.vue | 52 +-
src/components/panel/DischargeSearch.vue | 170 ++++++++++
src/assets/images/map-pages/icon/toolbox/circle.png | 0
src/assets/images/map-pages/icon/toolbox/location.png | 0
src/components/panel/TopEnterprisePanel.vue | 24 +
src/assets/images/map-pages/icon/toolbox/legend.png | 0
src/assets/images/map-pages/icon/toolbox/square.png | 0
src/assets/images/map-pages/icon/tab_item.png | 0
src/assets/images/map-pages/icon/toolbox/fullscreen.png | 0
/dev/null | 154 ---------
src/assets/images/map-pages/icon/panel/pk.png | 0
src/components/panel/EnvProtectSearch.vue | 180 ++++++++++
src/assets/images/map-pages/icon/panel/hb.png | 0
src/assets/images/map-pages/icon/panel/gd.png | 0
17 files changed, 560 insertions(+), 447 deletions(-)
diff --git a/src/assets/images/map-pages/icon/panel/gd.png b/src/assets/images/map-pages/icon/panel/gd.png
new file mode 100644
index 0000000..144dcb9
--- /dev/null
+++ b/src/assets/images/map-pages/icon/panel/gd.png
Binary files differ
diff --git a/src/assets/images/map-pages/icon/panel/hb.png b/src/assets/images/map-pages/icon/panel/hb.png
new file mode 100644
index 0000000..bfb6b88
--- /dev/null
+++ b/src/assets/images/map-pages/icon/panel/hb.png
Binary files differ
diff --git a/src/assets/images/map-pages/icon/panel/pk.png b/src/assets/images/map-pages/icon/panel/pk.png
new file mode 100644
index 0000000..ac5277b
--- /dev/null
+++ b/src/assets/images/map-pages/icon/panel/pk.png
Binary files differ
diff --git a/src/assets/images/map-pages/icon/tab_item.png b/src/assets/images/map-pages/icon/tab_item.png
new file mode 100644
index 0000000..69c703b
--- /dev/null
+++ b/src/assets/images/map-pages/icon/tab_item.png
Binary files differ
diff --git a/src/assets/images/map-pages/icon/toolbox/circle.png b/src/assets/images/map-pages/icon/toolbox/circle.png
new file mode 100644
index 0000000..f03cf36
--- /dev/null
+++ b/src/assets/images/map-pages/icon/toolbox/circle.png
Binary files differ
diff --git a/src/assets/images/map-pages/icon/toolbox/fullscreen.png b/src/assets/images/map-pages/icon/toolbox/fullscreen.png
new file mode 100644
index 0000000..f24bec5
--- /dev/null
+++ b/src/assets/images/map-pages/icon/toolbox/fullscreen.png
Binary files differ
diff --git a/src/assets/images/map-pages/icon/toolbox/legend.png b/src/assets/images/map-pages/icon/toolbox/legend.png
new file mode 100644
index 0000000..43f6416
--- /dev/null
+++ b/src/assets/images/map-pages/icon/toolbox/legend.png
Binary files differ
diff --git a/src/assets/images/map-pages/icon/toolbox/location.png b/src/assets/images/map-pages/icon/toolbox/location.png
new file mode 100644
index 0000000..4f0f9be
--- /dev/null
+++ b/src/assets/images/map-pages/icon/toolbox/location.png
Binary files differ
diff --git a/src/assets/images/map-pages/icon/toolbox/polygon.png b/src/assets/images/map-pages/icon/toolbox/polygon.png
new file mode 100644
index 0000000..e2c5ff0
--- /dev/null
+++ b/src/assets/images/map-pages/icon/toolbox/polygon.png
Binary files differ
diff --git a/src/assets/images/map-pages/icon/toolbox/square.png b/src/assets/images/map-pages/icon/toolbox/square.png
new file mode 100644
index 0000000..91373ad
--- /dev/null
+++ b/src/assets/images/map-pages/icon/toolbox/square.png
Binary files differ
diff --git a/src/components/panel/DischargeSearch.vue b/src/components/panel/DischargeSearch.vue
new file mode 100644
index 0000000..0b14697
--- /dev/null
+++ b/src/components/panel/DischargeSearch.vue
@@ -0,0 +1,170 @@
+<template>
+ <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-input v-model="form.key" size="mini"
+ placeholder="鍦ㄦ杈撳叆鍏抽敭瀛�"></el-input>
+ </el-form-item>
+ <el-form-item>
+ <input type="button" class="btn-ok" @click="handleSearch" value="鏌ヨ">
+ <input type="button" class="btn-reset" @click="handleSearch" value="閲嶇疆">
+ </el-form-item>
+ </el-form>
+ </el-card>
+ <el-card class="search-result" style="height:271px;">
+ <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
+ <div class="B-TMD-table-list-title">
+ <div class="B-TMD-table-list-head">
+ <div class="B-TMD-table-list-title-y"
+ :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]">
+ <span>杩愬崟鍙凤細</span>
+ <span id="waybillNumber" class="B-TMD-table-list-title-y-num"
+ :title="item.transNo">
+ <span class="B-TMD-table-list-title-y-alarm">{{ item.transNo }}</span>
+ </span>
+ </div>
+ <div class="B-TMD-table-list-title-c">
+ 杞藉叿鍙凤細
+ <span id="plateNumber_p">
+ <span id="plateNumber_n"><a href="#">{{ item.vehicleNo }}</a></span>
+ </span>
+ </div>
+ </div>
+ <div class="B-TMD-table-icons" style="float:right">
+ <ul>
+ <li class="B-TMD-table-list-title-y-adress"
+ @click="handleLocation(item)"></li>
+ <li :class="[{'B-TMD-table-list-title-y-car': item.vehicleStatus ==='910002', 'B-TMD-table-list-title-y-car-offline': item.vehicleStatus ==='910001','B-TMD-table-list-title-y-car-warning': item.vehicleStatus==='910003' }]"></li>
+ </ul>
+ </div>
+ </div>
+ <div class="B-TMD-table-list-content">
+ <div>
+ <span>鍙戣揣浼佷笟锛�</span>
+ <span id="b_twe_consignment" :title="item.outWarehouseName">{{
+ item.outWarehouseName == null ? "鏆傛棤" : item.outWarehouseName
+ }}</span>
+ </div>
+ <div>
+ <span>鎵� 杩� 鍟嗭細</span>
+ <span id="b_twe_loan" :title="item.carrierName">{{ item.carrierName }}</span>
+ </div>
+ <div><span>鏀惰揣浼佷笟锛�</span> <span
+ id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span></div>
+ </div>
+ <div class="B-TMD-table-list-bottom">
+ <div class="B-TMD-table-list-bottom-name">
+ 璐х墿鍚嶇О锛�<span :title="item.materialName">{{ item.materialName }}</span></div>
+ </div>
+ </div>
+ </el-card>
+
+ <el-card class="footer-page" v-if="total > 10">
+ <el-pagination
+ small
+ @current-change="handlePage"
+ :page-size=pageSize
+ layout="prev, pager, next"
+ :total=total
+ :current-page=current
+ class="warnPagination"
+ >
+ </el-pagination>
+ </el-card>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'MonitorAreaTips',
+ components: {},
+ data () {
+ return {
+ isPanelVisible: false,
+ total: 0,
+ list: [],
+ form: {
+ name: '',
+ region: '',
+ date1: '',
+ date2: '',
+ delivery: false,
+ type: [],
+ resource: '',
+ desc: ''
+ }
+ }
+ },
+ methods: {
+ handleClose (done) {
+ console.log(done)
+ },
+ handleClick (tab, event) {
+ console.log(tab, event)
+ },
+ handleSearch () {
+
+ }
+ },
+ mounted () {
+ this.handleSearch()
+ }
+}
+</script>
+
+<style lang="less">
+.monitorHz {
+ .el-message-box__content {
+ background-color: #030D2E;
+ }
+
+ .search-form .el-form-item {
+ margin: 0px;
+ }
+
+ .search-form .el-icon-search {
+ display: grid;
+ line-height: 30px;
+ font-size: 18px;
+ }
+
+ .search-panel {
+ border: #07325B;
+ background-color: #07325B;
+ }
+
+ .search-result {
+ margin: 5px 0px 0px 0px;
+ padding: 0px;
+ border: #051842;
+ overflow-y: scroll;
+ background-color: #051842;
+ }
+
+ .B-TMD-table-list {
+ margin-top: 10px;
+ text-align: left;
+ padding-left: 10px;
+ color: #328EB5;
+ width: 100%;
+ line-height: 25px;
+ background-color: #0B3B6D;
+ }
+
+ .footer-page {
+ position: absolute;
+ bottom: 5px;
+ }
+}
+</style>
diff --git a/src/components/panel/EnvProtectSearch.vue b/src/components/panel/EnvProtectSearch.vue
new file mode 100644
index 0000000..99ac50f
--- /dev/null
+++ b/src/components/panel/EnvProtectSearch.vue
@@ -0,0 +1,180 @@
+<template>
+ <div>
+ <el-card class="search-panel">
+ <el-form ref="form" :model="form" label-width="90px" class="search-form">
+ <el-form-item label="绫诲瀷锛�">
+ <el-select v-model="form.pipelineType" @change="handlePipelineType">
+ <el-option
+ v-for="item in pipelineTypeOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鏁版嵁绫诲瀷锛�">
+ <el-select v-model="form.dataType">
+ <el-option
+ v-for="item in dataTypeOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="妯＄硦鎼滅储锛�">
+ <el-input v-model="form.key" size="mini"
+ placeholder="鍦ㄦ杈撳叆鍏抽敭瀛�"></el-input>
+ </el-form-item>
+ <el-form-item>
+ <input type="button" class="btn-ok" @click="handleSearch" value="鏌ヨ">
+ <input type="button" class="btn-reset" @click="handleSearch" value="閲嶇疆">
+ </el-form-item>
+ </el-form>
+ </el-card>
+ <el-card class="search-result" style="height:271px;">
+ <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
+ <div class="B-TMD-table-list-title">
+ <div class="B-TMD-table-list-head">
+ <div class="B-TMD-table-list-title-y"
+ :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]">
+ <span>杩愬崟鍙凤細</span>
+ <span id="waybillNumber" class="B-TMD-table-list-title-y-num"
+ :title="item.transNo">
+ <span class="B-TMD-table-list-title-y-alarm">{{ item.transNo }}</span>
+ </span>
+ </div>
+ <div class="B-TMD-table-list-title-c">
+ 杞藉叿鍙凤細
+ <span id="plateNumber_p">
+ <span id="plateNumber_n"><a href="#">{{ item.vehicleNo }}</a></span>
+ </span>
+ </div>
+ </div>
+ <div class="B-TMD-table-icons" style="float:right">
+ <ul>
+ <li class="B-TMD-table-list-title-y-adress"
+ @click="handleLocation(item)"></li>
+ <li :class="[{'B-TMD-table-list-title-y-car': item.vehicleStatus ==='910002', 'B-TMD-table-list-title-y-car-offline': item.vehicleStatus ==='910001','B-TMD-table-list-title-y-car-warning': item.vehicleStatus==='910003' }]"></li>
+ </ul>
+ </div>
+ </div>
+ <div class="B-TMD-table-list-content">
+ <div>
+ <span>鍙戣揣浼佷笟锛�</span>
+ <span id="b_twe_consignment" :title="item.outWarehouseName">{{
+ item.outWarehouseName == null ? "鏆傛棤" : item.outWarehouseName
+ }}</span>
+ </div>
+ <div>
+ <span>鎵� 杩� 鍟嗭細</span>
+ <span id="b_twe_loan" :title="item.carrierName">{{ item.carrierName }}</span>
+ </div>
+ <div><span>鏀惰揣浼佷笟锛�</span> <span
+ id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span></div>
+ </div>
+ <div class="B-TMD-table-list-bottom">
+ <div class="B-TMD-table-list-bottom-name">
+ 璐х墿鍚嶇О锛�<span :title="item.materialName">{{ item.materialName }}</span></div>
+ </div>
+ </div>
+ </el-card>
+
+ <el-card class="footer-page" v-if="total > 10">
+ <el-pagination
+ small
+ @current-change="handlePage"
+ :page-size=pageSize
+ layout="prev, pager, next"
+ :total=total
+ :current-page=current
+ class="warnPagination"
+ >
+ </el-pagination>
+ </el-card>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'MonitorAreaTips',
+ components: {},
+ data () {
+ return {
+ isPanelVisible: false,
+ total: 0,
+ list: [],
+ form: {
+ name: '',
+ region: '',
+ date1: '',
+ date2: '',
+ delivery: false,
+ type: [],
+ resource: '',
+ desc: ''
+ }
+ }
+ },
+ methods: {
+ handleClose (done) {
+ console.log(done)
+ },
+ handleClick (tab, event) {
+ console.log(tab, event)
+ },
+ handleSearch () {
+
+ }
+ },
+ mounted () {
+ this.handleSearch()
+ }
+}
+</script>
+
+<style lang="less">
+.monitorHz {
+ .el-message-box__content {
+ background-color: #030D2E;
+ }
+
+ .search-form .el-form-item {
+ margin: 0px;
+ }
+
+ .search-form .el-icon-search {
+ display: grid;
+ line-height: 30px;
+ font-size: 18px;
+ }
+
+ .search-panel {
+ border: #07325B;
+ background-color: #07325B;
+ }
+
+ .search-result {
+ margin: 5px 0px 0px 0px;
+ padding: 0px;
+ border: #051842;
+ overflow-y: scroll;
+ background-color: #051842;
+ }
+
+ .B-TMD-table-list {
+ margin-top: 10px;
+ text-align: left;
+ padding-left: 10px;
+ color: #328EB5;
+ width: 100%;
+ line-height: 25px;
+ background-color: #0B3B6D;
+ }
+
+ .footer-page {
+ position: absolute;
+ bottom: 5px;
+ }
+}
+</style>
diff --git a/src/components/panel/MonitorHZ.vue b/src/components/panel/MonitorHZ.vue
deleted file mode 100644
index 547a4b5..0000000
--- a/src/components/panel/MonitorHZ.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<template>
- <div class="monitorHz">
- <el-card class="search-panel" style="background: #07325b;">
- <el-form ref="form" :model="form" label-width="80px" class="search-form">
- <el-form-item label="杞藉叿鍙凤細">
- <el-input v-model="form.name" placeholder="鍦ㄦ杈撳叆杞藉叿鍙�"></el-input>
- </el-form-item>
- <el-row :gutter="20">
- <el-col :span="4">
- <el-row>
- <el-form-item label="鏃堕棿锛�">
- <el-date-picker
- v-model="form.name"
- type="date"
- style="width: 118px;"
- placeholder="閫夋嫨鏃ユ湡">
- </el-date-picker>
- </el-form-item>
- </el-row>
- <el-row>
- <el-form-item>
- <el-date-picker
- v-model="form.name"
- type="date"
- style="width: 118px;"
- placeholder="閫夋嫨鏃ユ湡"
- >
- </el-date-picker>
- </el-form-item>
- </el-row>
- </el-col>
- <el-col :span="2">
- <div class="B-TMD-inp-button" @click="handleSearch"></div>
- </el-col>
- </el-row>
- </el-form>
- </el-card>
- <el-card class="search-result" style="height:360px;">
- <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
- <el-row :gutter="20">
- <el-col :span="2" style="padding-left: 15px">
- {{ index + 1 }}銆�
- </el-col>
- <el-col :span="15" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
- {{ item.processorName }}
- <br/>
- {{ item.startAddress }}
- </el-col>
- <el-col :span="6">
- <a class="el-icon-location" style="font-size: 18px;margin-left:5px"
- @click="handleLocation(item.dispatchNo,item.vno,item.eid,item.lng,item.lat)"></a>
- <a class="el-icon-connection" style="font-size: 18px;margin-left:5px"></a>
- </el-col>
- </el-row>
- </div>
- </el-card>
- <el-card class="footer-page" v-if="total > 10">
- <el-pagination
- small
- :current-page.sync="currentPage1"
- @current-change="handleSearch"
- :page-size="10"
- layout="prev, pager, next"
- :total="1000"
- class="warnPagination"
- >
- </el-pagination>
- </el-card>
- </div>
-</template>
-
-<script>
-export default {
- name: 'MonitorAreaTips',
- components: {},
- data () {
- return {
- isPanelVisible: false,
- total: 0,
- list: [],
- form: {
- name: '',
- region: '',
- date1: '',
- date2: '',
- delivery: false,
- type: [],
- resource: '',
- desc: ''
- }
- }
- },
- methods: {
- handleClose (done) {
- console.log(done)
- },
- handleClick (tab, event) {
- console.log(tab, event)
- },
- handleSearch () {
-
- }
- },
- mounted () {
- this.handleSearch()
- }
-}
-</script>
-
-<style lang="less">
-.monitorHz {
- .el-message-box__content {
- background-color: #030D2E;
- }
-
- .search-form .el-form-item {
- margin: 0px;
- }
-
- .search-form .el-icon-search {
- display: grid;
- line-height: 30px;
- font-size: 18px;
- }
-
- .search-panel {
- border: #07325B;
- background-color: #07325B;
- }
-
- .search-result {
- margin: 5px 0px 0px 0px;
- padding: 0px;
- border: #051842;
- overflow-y: scroll;
- background-color: #051842;
- }
-
- .B-TMD-table-list {
- margin-top: 10px;
- text-align: left;
- padding-left: 10px;
- color: #328EB5;
- width: 100%;
- line-height: 25px;
- background-color: #0B3B6D;
- }
-
- .footer-page {
- position: absolute;
- bottom: 5px;
- }
-}
-</style>
diff --git a/src/components/panel/MonitorPanel.vue b/src/components/panel/RightSearchPanel.vue
similarity index 65%
rename from src/components/panel/MonitorPanel.vue
rename to src/components/panel/RightSearchPanel.vue
index d4901e9..4a59e18 100644
--- a/src/components/panel/MonitorPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -1,31 +1,22 @@
<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 class="btn-stretch" @click="toggleMonitorPanel"></div>
+ <div class="tab-gd" @click="handleGd" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}"></div>
+ <div class="tab-hb" @click="handleHb" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>
+ <div class="tab-pk" @click="handlePk" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></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 class="el-message-box__title panel_title"><!----><span>{{ title }}</span>
</div>
</div>
<div class="el-message-box__content" style="padding:6px;font-size: 13px;">
- <div class="monitor1" v-if="wayBillVisible">
+ <div class="monitor1" v-if="gdVisible">
<div>
<el-card class="search-panel">
<el-form ref="form" :model="form" label-width="90px" class="search-form">
- <el-form-item label="绠＄嚎绫诲瀷锛�">
+ <el-form-item label="绫诲瀷锛�">
<el-select v-model="form.pipelineType" @change="handlePipelineType">
<el-option
v-for="item in pipelineTypeOptions"
@@ -50,8 +41,8 @@
placeholder="鍦ㄦ杈撳叆鍏抽敭瀛�"></el-input>
</el-form-item>
<el-form-item>
+ <input type="button" class="btn-ok" @click="handleSearch" value="鏌ヨ">
<input type="button" class="btn-reset" @click="handleSearch" value="閲嶇疆">
- <input type="button" class="btn-ok" @click="handleSearch" value="纭畾">
</el-form-item>
</el-form>
</el-card>
@@ -117,8 +108,11 @@
</el-card>
</div>
</div>
- <div class="monitor2" v-if="hzVisible">
- <monitor-h-z></monitor-h-z>
+ <div class="monitor2" v-if="hbVisible">
+ <env-protect-search></env-protect-search>
+ </div>
+ <div class="monitor2" v-if="pkVisible">
+ <discharge-search></discharge-search>
</div>
</div>
</div>
@@ -127,21 +121,21 @@
<script>
import $ from 'jquery'
-import MonitorHZ from './MonitorHZ'
-import mapApi from '@/api/mapApi'
-import { mapState } from 'vuex'
+import EnvProtectSearch from './EnvProtectSearch'
+import DischargeSearch from './DischargeSearch'
export default {
name: 'MonitorPanel',
- components: { MonitorHZ },
+ components: { EnvProtectSearch, DischargeSearch },
data () {
return {
isPanelVisible: false,
- wayBillVisible: true,
- hzVisible: false,
+ gdVisible: true,
+ hbVisible: false,
+ pkVisible: false,
toggleMonitorStyle: 'right:0px',
list: [],
- total: 0,
+ title: '绠￠亾淇℃伅鏌ヨ',
pipelineTypeOptions: [{
value: '1',
label: '绠＄嚎鏈綋'
@@ -212,53 +206,8 @@
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
- }
- },
+ computed: {},
+ watch: {},
methods: {
handleClose (done) {
console.log(done)
@@ -271,27 +220,25 @@
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
+ handlePage (page) {
},
- handleLocation (item) {
- window.vectorLayerHelper.vectorLayerMap.cheliang.showGeometryByXY(item.transNo, item.vehicleNo, item.lng, item.lat)
+ handleGd () {
+ this.gdVisible = true
+ this.hbVisible = false
+ this.pkVisible = false
+ this.title = '绠￠亾淇℃伅鏌ヨ'
+ },
+ handleHb () {
+ this.gdVisible = false
+ this.hbVisible = true
+ this.pkVisible = false
+ this.title = '鐜繚璁炬柦鏌ヨ'
+ },
+ handlePk () {
+ this.gdVisible = false
+ this.hbVisible = false
+ this.pkVisible = true
+ this.title = '鎺掑彛淇℃伅鏌ヨ'
},
toggleMonitorPanel () {
const el = $('.btn-stretch')
@@ -317,91 +264,16 @@
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;
+ width: 322px;
height: 573px;
position: absolute;
right: 10px;
@@ -468,21 +340,19 @@
}
.btn-ok {
- float: right;
margin-right: 10px;
width: 4rem;
- background-color: lightblue;
+ background-color: #0B89B5;
color: white;
- border: 1px solid white;
+ border: 0;
}
.btn-reset {
- float: right;
margin-right: 10px;
width: 4rem;
background-color: orange;
color: white;
- border: 1px solid white;
+ border: 0;
}
.component-fade-enter-active, .component-fade-leave-active {
@@ -520,40 +390,8 @@
white-space: nowrap;
}
- .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 {
- 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-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-warning {
- background: url('../../assets/images/map-pages/icon/icon.png') no-repeat 0 0;
- width: 38px;
- height: 38px;
- display: block;
- margin-top: 2px !important;
- }
-
.btn-stretch {
- width: 20px;
+ width: 15px;
height: 28px;
background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 0;
margin-left: 10px;
@@ -565,8 +403,22 @@
transition: transform 1s linear;
}
- .btn-stretch-active {
- background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -440px 0;
+ .tab-gd {
+ width: 32px;
+ height: 30px;
+ background-color: #0B3B6D;
+ }
+
+ .tab-hb {
+ width: 32px;
+ height: 30px;
+ background-color: #545454;
+ }
+
+ .tab-pk {
+ width: 32px;
+ height: 30px;
+ background-color: #83a6c4;
}
.panel-tab {
@@ -574,63 +426,9 @@
left: 0;
height: 120px;
top: 0;
- width: 40px;
+ width: 32px;
z-index: 500;
- background-color: #030D2E;
background: url('../../assets/images/map-pages/icon/caidan.png') no-repeat;
- }
-
- .B-TMT-tab-div {
- width: 29px;
- height: 29px;
- margin-left: 3px;
- margin-top: 10px;
- cursor: pointer;
-
- :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 {
@@ -690,7 +488,7 @@
color: #569ee1;
}
- input::-moz-input-placeholder {
+ input::-moz-placeholder {
color: #569ee1;
}
@@ -735,7 +533,7 @@
position: absolute;
bottom: 8px;
right: 16px;
- background: url('/assets/images/map-pages/icon/icon.png') no-repeat -481px 0;
+ background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -481px 0;
cursor: pointer;
}
diff --git a/src/components/panel/ToolBoxPanel.vue b/src/components/panel/ToolBoxPanel.vue
new file mode 100644
index 0000000..8f90ff8
--- /dev/null
+++ b/src/components/panel/ToolBoxPanel.vue
@@ -0,0 +1,97 @@
+<template>
+ <div class="lefttop-toolbox-panel">
+ <ul>
+ <li v-for="(item,i) in imgList" :key="i" @click="toggleActive(i)" :value="total"
+ :class="{'active':activeTools[i]}">
+ <img :src="item"/>
+ </li>
+ </ul>
+ </div>
+</template>
+
+<script>
+import circle from '@/assets/images/map-pages/icon/toolbox/circle.png'
+import fullscreen from '@/assets/images/map-pages/icon/toolbox/fullscreen.png'
+import legend from '@/assets/images/map-pages/icon/toolbox/legend.png'
+import location from '@/assets/images/map-pages/icon/toolbox/location.png'
+import polygon from '@/assets/images/map-pages/icon/toolbox/polygon.png'
+import square from '@/assets/images/map-pages/icon/toolbox/square.png'
+
+export default {
+ name: 'ToolBoxPanel',
+ components: {},
+ data () {
+ return {
+ isPanelVisible: false,
+ total: 0,
+ activeTools: {},
+ imgList: {
+ circle: circle,
+ square: square,
+ polygon: polygon,
+ legend: legend,
+ location: location,
+ fullscreen: fullscreen
+ },
+ form: {
+ regionType: '',
+ enterprise: ''
+ }
+ }
+ },
+ methods: {
+ handleClose (done) {
+ console.log(done)
+ },
+ handleClick (tab, event) {
+ console.log(tab, event)
+ },
+ toggleActive (k) {
+ this.total++
+ this.activeTools[k] = !this.activeTools[k]
+ },
+ loadData () {
+
+ }
+ },
+ mounted () {
+ this.loadData()
+ },
+ created () {
+ }
+}
+</script>
+
+<style lang="less">
+.lefttop-toolbox-panel {
+ position: absolute;
+ left: 5px;
+ top: 5px;
+ z-index: 1000;
+ width: 175px;
+ height: 35px;
+ line-height: 30px;
+ background: #07325b;
+ border: 1px solid #5EF2FF;
+ border-radius: 3px;
+ text-align: center;
+
+ ul {
+ list-style: none;
+ margin: 0;
+ padding: 5px;
+
+ li {
+ float: left;
+ width: 23px;
+ height: 23px;
+ margin: 0 1px;
+ border: 1px solid #073C4F;
+ }
+ }
+
+ .active {
+ border: 1px solid #5EF2FF;
+ }
+}
+</style>
diff --git a/src/components/panel/TopEnterprisePanel.vue b/src/components/panel/TopEnterprisePanel.vue
index d9c43db..1f75308 100644
--- a/src/components/panel/TopEnterprisePanel.vue
+++ b/src/components/panel/TopEnterprisePanel.vue
@@ -2,7 +2,7 @@
<div class="top-enterprise-panel">
<el-form :inline="true" ref="form" style="margin-left:5px" size="mini">
<el-form-item label="鍒嗙被锛�">
- <el-select v-model="form.regionType" @change="handlePipelineType">
+ <el-select v-model="form.regionType" @change="handlePipelineType" style="width: 100px">
<el-option
v-for="item in regionOptions"
:key="item.value"
@@ -12,7 +12,7 @@
</el-select>
</el-form-item>
<el-form-item label="浼佷笟鍚嶇О锛�">
- <el-select v-model="form.enterprise">
+ <el-select v-model="form.enterprise" style="width: 100px">
<el-option
v-for="item in enterpriseOptions"
:key="item.value"
@@ -22,7 +22,7 @@
</el-select>
</el-form-item>
<el-form-item label="妯＄硦鎼滅储锛�">
- <el-input v-model="form.name" placeholder="璇疯緭鍏ュ叧閿瓧鎼滅储"></el-input>
+ <el-input v-model="form.name" placeholder="璇疯緭鍏ュ叧閿瓧鎼滅储" style="width: 100px"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">鏌ヨ</el-button>
@@ -90,14 +90,24 @@
top: 0;
bottom: 0;
z-index: 1000;
- width: 940px;
- height: 50px;
- padding-top: 15px;
+ width: 640px;
+ height: 40px;
+ padding-top: 10px;
background: #07325b;
- border: 2px solid #2A8FD4;
+ border: 1px solid #2A8FD4;
border-radius: 10px;
text-align: center;
+ .el-button {
+ border-radius: 0;
+ }
+
+ .el-input__inner {
+ border-radius: 0;
+ border: 1px solid #0e639e;
+ background-color: #061e51;
+ }
+
.el-form-item__label {
color: #ffffff;
}
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index d628efa..8b3b26c 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -1,14 +1,15 @@
<template>
<div class="full-screen">
- <div id="map" ref="rootmap"></div>
- <sgis-layer-controller :preset="'warningPreset'">
- <lc-basemap></lc-basemap>
-<!-- <div class="barline"></div>-->
- <lc-service-layer class="barline"></lc-service-layer>
- </sgis-layer-controller>
- <lc-service-layer-filter v-show="showServiceLayerFilter" ref="serviceLayerFilter"></lc-service-layer-filter>
- <monitor-panel></monitor-panel>
- <top-enterprise-panel></top-enterprise-panel>
+ <div id="map" ref="rootmap"></div>
+ <sgis-layer-controller :preset="'warningPreset'">
+ <lc-basemap></lc-basemap>
+ <!-- <div class="barline"></div>-->
+ <lc-service-layer class="barline"></lc-service-layer>
+ </sgis-layer-controller>
+ <lc-service-layer-filter v-show="showServiceLayerFilter" ref="serviceLayerFilter"></lc-service-layer-filter>
+ <monitor-panel></monitor-panel>
+ <top-enterprise-panel></top-enterprise-panel>
+ <tool-box-panel></tool-box-panel>
</div>
</template>
@@ -20,12 +21,21 @@
import LcBasemap from '@components/LayerController/modules/LcBaseMap'
import LcServiceLayer from '@components/LayerController/modules/LcServiceLayer'
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'
-import MonitorPanel from '@components/panel/MonitorPanel'
+import MonitorPanel from '@components/panel/RightSearchPanel'
import TopEnterprisePanel from '@components/panel/TopEnterprisePanel'
+import ToolBoxPanel from '@components/panel/ToolBoxPanel'
export default {
name: 'MapTemplate',
- components: { TopEnterprisePanel, SgisLayerController, MonitorPanel, LcBasemap, LcServiceLayer, LcServiceLayerFilter },
+ components: {
+ ToolBoxPanel,
+ TopEnterprisePanel,
+ SgisLayerController,
+ MonitorPanel,
+ LcBasemap,
+ LcServiceLayer,
+ LcServiceLayerFilter
+ },
data () {
return {
basemapHelper: {},
@@ -78,21 +88,23 @@
<style lang="less">
-.full-screen{
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- position: absolute;
- #map{
+.full-screen {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+
+ #map {
height: 100%;
width: 100%;
}
- .barline{
+
+ .barline {
//width: 100%;
//height: 1px;
//background-color: #0661AE;
- border-top: 1px solid #0661AE;
+ border-top: 1px solid #0661AE;
}
}
</style>>
--
Gitblit v1.8.0