From bf3323fcbe32918dda7099f05be56aa7151b1e26 Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期四, 14 一月 2021 15:56:11 +0800
Subject: [PATCH] 细节
---
src/components/panel/RightSearchPanel.vue | 330 ++++++++++--------------------------------------------
1 files changed, 64 insertions(+), 266 deletions(-)
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;
}
--
Gitblit v1.8.0