From d7dd4a54b16e97e8e60bf0ea28762c3952093a8b Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期二, 09 三月 2021 14:52:05 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/components/panel/RightSearchPanel.vue | 418 +++++++++++++++++++++--------------------------------------
1 files changed, 148 insertions(+), 270 deletions(-)
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index 4a59e18..587073a 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -1,269 +1,116 @@
<template>
<div id="right-panel">
<div class="panel-tab">
- <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 v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleGd" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}">
+ <img :src="item.icon" style="width: 24px;height: 24px;"></div>
+<!-- <div class="tab-item" @click="handleHb" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>-->
+<!-- <div class="tab-item" @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>{{ title }}</span>
- </div>
- </div>
- <div class="el-message-box__content" style="padding:6px;font-size: 13px;">
- <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-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>
+<!-- <div class="panel-fold-btn" >-->
+<!-- <div class="btn-stretch" @click="toggleMonitorPanel"></div>-->
+<!-- </div>-->
- <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="hbVisible">
- <env-protect-search></env-protect-search>
- </div>
- <div class="monitor2" v-if="pkVisible">
- <discharge-search></discharge-search>
- </div>
+<!-- <div class="panel-fold-btn" @click="toggleMonitorPanel" >-->
+<!-- <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>-->
+<!--<!– <div class="btn-stretch" v-if="isCollapse" </div>–>-->
+<!--<!– <div class="btn-shrink" v-else-if="!isCollapse" ></div>–>-->
+<!--<!– :style = "{width:isCollapse ? '290px' : '0px'}"–>-->
+<!-- </div>-->
+<!-- <div class="right-control" v-if="!isCollapse" >-->
+ <div class="right-control" :class="[{ 'unfold': !isCollapse },{ 'shrink': isCollapse }] " >
+ <div class="panel-fold-btn" @click="toggleMonitorPanel">
+<!-- <div class="btn-stretch" v-if="isCollapse"></div>-->
+<!-- <div class="btn-shrink" v-else-if="!isCollapse"></div>-->
+ <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>
</div>
+ <component :title="title" :is="gcComp"></component>
</div>
</div>
</template>
<script>
-import $ from 'jquery'
-import EnvProtectSearch from './EnvProtectSearch'
-import DischargeSearch from './DischargeSearch'
+// import $ from 'jquery'
+import EnvProtectSearch from './topicSearch/EnvProtectSearch'
+import DischargeSearch from './topicSearch/DischargeSearch'
+import { TopicList } from '../../conf/Topic'
+import SewersSearch from '@components/panel/topicSearch/SewersSearch'
export default {
name: 'MonitorPanel',
components: { EnvProtectSearch, DischargeSearch },
data () {
return {
+ topicMenu: [],
+ topicList: TopicList,
+ topicCheckedList: [],
isPanelVisible: false,
+ gcComp: 'sewersSearch',
+
gdVisible: true,
hbVisible: false,
pkVisible: false,
toggleMonitorStyle: 'right:0px',
- list: [],
- title: '绠￠亾淇℃伅鏌ヨ',
- 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
+
+ title: '姹￠洦姘寸缃�',
+
+ isCollapse: false
}
},
- computed: {},
- watch: {},
+ computed: {
+ topicMenu () {
+ console.log(this.$store.state.map.topic.topicCheckedList)
+ return this.$store.state.map.topic.topicCheckedList
+ }
+ },
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
- }
- },
+
handlePage (page) {
},
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')
- // 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'
- })
- }
+ this.isCollapse = !this.isCollapse
+ // const el = $('.btn-stretch')
+ // const el2 = $('.panel-fold-btn')
+ // const el = document.getElementsByClassName('.btn-stretch')
+ // const el2 = document.getElementsByClassName('.panel-fold-btn')
+ // let = 'btn-stretch-active'
+ // var rightControl = $('#right-panel')
+ // var rightControl = document.getElementById('#right-panel')
+ // const right = rightControl.css('right')
+ // const rightit = rightControl.ownerDocument.defaultView
+ // const right = rightit.getComputedStyle(rightit, null).right
+ // if (right === '10px') {
+ // rightControl.animate({
+ // right: '-322px'
+ // })
+ // el.css({
+ // transform: 'rotateY(180deg)',
+ // 'transform-origin': '50% 50%',
+ // transition: 'transform 1s linear'
+ // })
+ // el2.animate({
+ // right: '320px',
+ // speed: 1000
+ // })
+ // } else {
+ // rightControl.animate({
+ // right: '10px'
+ // })
+ // el.css({
+ // transform: 'rotateY(0deg)',
+ // 'transform-origin': '50% 50%',
+ // transition: 'transform 1s linear'
+ // })
+ // el2.animate({
+ // right: '290px',
+ // speed: 1000
+ // })
+ // }
}
},
mounted () {
@@ -272,9 +119,11 @@
</script>
<style lang="less">
+@import '@assets/css/map/_map-variable';
#right-panel {
width: 322px;
- height: 573px;
+ //height: 573px;
+ height: 100%;
position: absolute;
right: 10px;
top: 10px;
@@ -299,6 +148,7 @@
.el-form-item__label {
color: rgb(52, 224, 255);
+ /*<!--color: @color;-->*/
}
.el-input__inner::placeholder {
@@ -378,53 +228,66 @@
.B-TMD-table-list-title {
width: 100%;
- height: 50px;
+ height: 30px;
}
.B-TMD-table-list-head {
- width: 160px;
+ //width: 160px;
float: left;
padding-left: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
+ .panel-fold-btn{
+ overflow: hidden;
+ position: absolute;
+ top:45%;
+ left: -18px;
+ /*left: 0px;*/
+ //right: 320px;
+ /*right: 290px;*/
+ z-index: 1000;
+ /*right: 0px;*/
+ background-color: rgba(5,24,66,.8);
+ border-radius: 10px 0 0 10px;
+ .btn-stretch {
+ width: 20px;
+ height: 40px;
+ background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 5px;
+ cursor: pointer;
+ /*margin-left: -20px;*/
+ transform: rotateY(0deg);
+ transform-origin: 50% 50%;
+ transition: transform 1s linear;
+ /*transition: 3s linear;*/
+ }
+ .btn-shrink {
+ width: 20px;
+ height: 40px;
+ background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 5px;
+ cursor: pointer;
- .btn-stretch {
- width: 15px;
- height: 28px;
- background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 0;
- margin-left: 10px;
- margin-top: 3px;
- cursor: pointer;
-
- transform: rotateY(180deg);
- transform-origin: 50% 50%;
- transition: transform 1s linear;
+ transform: rotateY(180deg);
+ transform-origin: 50% 50%;
+ transition: transform 1s linear;
+ }
}
- .tab-gd {
+ .tab-item {
width: 32px;
height: 30px;
+ color: @color;
+ font-size: 12px;
background-color: #0B3B6D;
}
-
- .tab-hb {
- width: 32px;
- height: 30px;
- background-color: #545454;
+ .tab-item:hover{
+ cursor: pointer;
}
-
- .tab-pk {
- width: 32px;
- height: 30px;
- background-color: #83a6c4;
- }
-
.panel-tab {
position: absolute;
left: 0;
- height: 120px;
+ //height: 120px;
top: 0;
width: 32px;
z-index: 500;
@@ -432,15 +295,20 @@
}
.right-control {
- width: 290px;
- height: 573px;
- position: absolute;
+ /*width: 290px;*/
+ //height: 573px;
+ height: 100%;
+ position: relative;
top: 0;
right: 0;
z-index: 999;
background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
+ background-size: 100% 98%;
}
-
+ .a{
+ transform: translateX(328px);
+ transition: transform 3s linear;
+ }
.panel_searchTotal {
font-size: 12px;
float: right;
@@ -448,13 +316,13 @@
.panel_header {
// background-color: #030D2E;
- padding: 7px 15px 3px 20px;
+ padding: 8px 15px 3px 20px;
}
.panel_title {
font-size: 12px;
- margin: 0px;
- padding: 0px;
+ /*margin: 0px;*/
+ /*padding: 0px;*/
color: #78c4ff;
font-weight: bold;
}
@@ -464,7 +332,8 @@
}
.search-form .el-form-item {
- margin: 0px;
+ /*margin: 0px;*/
+ margin-bottom: 8px;
}
.search-form .el-icon-search {
@@ -506,7 +375,8 @@
margin: 5px 0px 0px 0px;
padding: 0px;
border: #051842;
- height: 290px;
+ //height: 290px;
+ height: calc(~"100vh - 180px");
overflow-y: scroll;
background-color: transparent !important;
margin-bottom: -8px !important;
@@ -608,7 +478,7 @@
::-webkit-scrollbar-track {
/*婊氬姩鏉￠噷闈㈣建閬�*/
- // box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
+ box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0px;
background: #0E3565;
}
@@ -637,5 +507,13 @@
background-color: #061e51 !important;
}
}
+ .unfold {
+ transform: translateX(332px);
+ transition: transform 0.5s linear;
+ }
+ .shrink {
+ transform: translateX(0px);
+ transition: transform 0.5s linear;
+ }
}
</style>
--
Gitblit v1.8.0