From 80078586462a5d66221d716adca79b6173c2bc08 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期二, 09 三月 2021 17:04:33 +0800
Subject: [PATCH] 修改已知问题
---
src/components/panel/RightSearchPanel.vue | 180 +++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 119 insertions(+), 61 deletions(-)
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index 4976bac..650c599 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -1,49 +1,76 @@
<template>
<div id="right-panel">
<div class="panel-tab">
- <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleClick(item)">
+ <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="panel-fold-btn">
- <div class="btn-stretch" @click="toggleMonitorPanel"></div>
- </div>
+<!-- <div class="panel-fold-btn" >-->
+<!-- <div class="btn-stretch" @click="toggleMonitorPanel"></div>-->
+<!-- </div>-->
- <div class="right-control">
-
+<!-- <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 { TopicComp, TopicList } from '../../conf/Topic'
+// 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: TopicComp,
+ components: { EnvProtectSearch, DischargeSearch },
data () {
return {
+ topicMenu: [],
topicList: TopicList,
topicCheckedList: [],
isPanelVisible: false,
- gcComp: 'sewersSearch',
+ gcComp: SewersSearch,
gdVisible: true,
hbVisible: false,
pkVisible: false,
toggleMonitorStyle: 'right:0px',
- title: '姹￠洦姘寸缃�'
+ title: '姹￠洦姘寸缃�',
+ isCollapse: false
}
},
- computed: {
- topicMenu () {
- console.log(this.$store.state.map.topic.topicCheckedList)
- return this.$store.state.map.topic.topicCheckedList
+ computed: {},
+ watch: {
+ '$store.state.map.topic.topicCheckedList': function (newVal, oldVal) {
+ console.log(oldVal)
+ console.log(newVal)
+ this.topicCheckedList = newVal
+ this.topicMenu = []
+ this.topicList.forEach((item) => {
+ this.topicCheckedList.forEach((itm) => {
+ if (item.name === itm) {
+ // item.checked = tr
+ this.topicMenu.push(item)
+ }
+ })
+ })
}
},
methods: {
@@ -53,43 +80,48 @@
handlePage (page) {
},
- handleClick (item) {
- this.title = item.name
- this.gcComp = item.comp
+ handleGd () {
+ this.title = '绠￠亾淇℃伅鏌ヨ'
},
toggleMonitorPanel () {
- const el = $('.btn-stretch')
- const el2 = $('.panel-fold-btn')
- // let cs = 'btn-stretch-active'
- var rightControl = $('#right-panel')
- const right = rightControl.css('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
- })
- }
+ 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 () {
@@ -110,7 +142,6 @@
.el-card__body {
padding: 7px;
}
-
.el-form-item__content {
color: rgb(52, 224, 255);
}
@@ -127,6 +158,7 @@
.el-form-item__label {
color: rgb(52, 224, 255);
+ color: @color;
}
.el-input__inner::placeholder {
@@ -218,14 +250,29 @@
white-space: nowrap;
}
.panel-fold-btn{
+ overflow: hidden;
position: absolute;
top:45%;
+ left: -18px;
+ /*left: 0px;*/
//right: 320px;
- right: 290px;
+ /*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;
@@ -258,17 +305,20 @@
}
.right-control {
- width: 290px;
+ /*width: 290px;*/
//height: 573px;
height: 100%;
- position: absolute;
+ 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;
@@ -276,13 +326,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;
}
@@ -292,7 +342,7 @@
}
.search-form .el-form-item {
- margin: 0px;
+ /*margin: 0px;*/
margin-bottom: 8px;
}
@@ -438,7 +488,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;
}
@@ -467,5 +517,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