From 6a0a093dba38d4c9e819a45a70aec8e340da9ca0 Mon Sep 17 00:00:00 2001
From: wangqi <magical1908@outlook.com>
Date: 星期三, 31 三月 2021 19:28:30 +0800
Subject: [PATCH] 图表不显示问题
---
src/components/panel/RightSearchPanel.vue | 329 +++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 223 insertions(+), 106 deletions(-)
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index fdbaae2..d8e296b 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -1,25 +1,54 @@
<template>
- <div id="right-panel">
+ <div class="panel-right" v-show="isShow">
<div class="panel-tab">
- <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 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="container">
+ <ul v-for="item in topicList" :key="item.name" :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" @click="()=>{selected(item)}" >
+ <el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left">
+ <li style=" ">
+<!-- <span>{{item.name}}</span>-->
-<!-- <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 >-->
+ <img src="../../assets/images/map-pages/icon/sl.png" class="icon">
+<!-- </div>-->
+ </li>
+ </el-tooltip>
+ </ul>
+ </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 :class="'search-container map-background'">
+ <div class="el-message-box__content" style="padding:6px;font-size: 13px;">
+ <div class="search-title">
+ 姹￠洦姘�
+ </div>
+ <component :title="title" :is="gcComp"></component>
+ </div>
+ </div>
</div>
</div>
</template>
<script>
-import $ from 'jquery'
import EnvProtectSearch from './topicSearch/EnvProtectSearch'
import DischargeSearch from './topicSearch/DischargeSearch'
import { TopicList } from '../../conf/Topic'
@@ -30,6 +59,7 @@
components: { EnvProtectSearch, DischargeSearch },
data () {
return {
+ isShow: true,
topicMenu: [],
topicList: TopicList,
topicCheckedList: [],
@@ -41,8 +71,8 @@
pkVisible: false,
toggleMonitorStyle: 'right:0px',
- title: '姹￠洦姘寸缃�'
-
+ title: '姹￠洦姘寸缃�',
+ isCollapse: true
}
},
computed: {},
@@ -55,7 +85,6 @@
this.topicList.forEach((item) => {
this.topicCheckedList.forEach((itm) => {
if (item.name === itm) {
- // item.checked = tr
this.topicMenu.push(item)
}
})
@@ -66,45 +95,56 @@
handleClose (done) {
console.log(done)
},
-
+ selected (val) {
+ console.log(val)
+ this.topicList.forEach((itm) => {
+ itm.checked = val.name === itm.name
+ })
+ },
handlePage (page) {
},
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 = $('#panel-right')
+ // var rightControl = document.getElementById('#panel-right')
+ // 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 () {
@@ -113,35 +153,81 @@
</script>
<style lang="less">
-@import '@assets/css/map/_map-variable';
-#right-panel {
- width: 322px;
- //height: 573px;
- height: 100%;
+.search-title{
+ color: rgb(255, 255, 255);
+ font-size: 16px;
+ margin: 5px;
+}
+.search-container {
+ position: relative;
+ width: 1.79167rem;
+ height: 3.4375rem;
+ overflow: hidden;
+}
+.module-wrap{
+ width: 0.15rem;
+ height: 0.15rem;
+ padding: .04167rem;
+ //padding: .00521rem;
+ background: rgba(0,16,30,.5);
+ border-radius: .03125rem;
+ border: .00521rem solid rgba(255,247,0,.5);
+ margin: .04167rem 0;
+ font-size: .08333rem;
+ -webkit-transition: all .2s linear;
+ transition: all .2s linear;
+ cursor: pointer;
+ position: relative;
+ line-height: 0.15rem;
+ li{
+ margin: 0.00521rem 0;
+ text-align: center;
+ img{
+ width: 0.1rem;
+ height: 0.1rem;
+
+ }
+ }
+}
+.panel-right {
+ display: inline-flex;
+ //width: 322px;
+ //height: 100%;
+ //position: absolute;
+ //right: 10px;
+ //top: 10px;
+ height: 0;
position: absolute;
- right: 10px;
- top: 10px;
+ top: .4rem;
+ right: .08333rem;
+ z-index: 501;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
- .el-card__body {
- padding: 7px;
- }
-
- .el-form-item__content {
- color: rgb(52, 224, 255);
- }
-
- .el-picker-panel {
- background-color: #061e51 !important;
- }
-
- .el-input__inner {
- border-radius: 0 !important;
- background-color: #061e51 !important;
- border: solid 1px #0e639e !important;
- }
+ //.el-card__body {
+ // padding: 7px;
+ //}
+ //.el-form-item__content {
+ // color: rgb(52, 224, 255);
+ //}
+ //
+ //.el-picker-panel {
+ // background-color: #061e51 !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);
+ color: @color;
}
.el-input__inner::placeholder {
@@ -221,11 +307,11 @@
.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;
@@ -233,14 +319,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;
@@ -253,8 +354,8 @@
}
.tab-item {
- width: 32px;
- height: 30px;
+ //width: .2rem;
+ //height: .2rem;
color: @color;
font-size: 12px;
background-color: #0B3B6D;
@@ -263,27 +364,33 @@
cursor: pointer;
}
.panel-tab {
- position: absolute;
- left: 0;
- //height: 120px;
- top: 0;
- width: 32px;
+ position: relative;
z-index: 500;
- background: url('../../assets/images/map-pages/icon/caidan.png') no-repeat;
+ margin-right: .025rem;
+ .container{
+ max-height: 3.125rem;
+ overflow: hidden;
+ position: relative;
+ position: relative;
+ }
+
}
.right-control {
- width: 290px;
+ /*width: 290px;*/
//height: 573px;
height: 100%;
- position: absolute;
- top: 0;
- right: 0;
- z-index: 999;
- background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
- background-size: 100% 98%;
+ position: relative;
+ //top: 0;
+ //right: 0;
+ z-index: 500;
+ //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;
@@ -291,13 +398,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;
}
@@ -307,7 +414,8 @@
}
.search-form .el-form-item {
- margin: 0px;
+ /*margin: 0px;*/
+ margin-bottom: 8px;
}
.search-form .el-icon-search {
@@ -316,16 +424,16 @@
font-size: 18px;
}
- .search-panel {
- border: #07325B;
- background-color: #07325B !important;
- margin-top: 0px;
-
- .el-input__inner {
- border-radius: 0px !important;
- background-color: #061e51 !important;
- }
- }
+ //.search-panel {
+ // border: #07325B;
+ // background-color: #07325B !important;
+ // margin-top: 0px;
+ //
+ // .el-input__inner {
+ // border-radius: 0px !important;
+ // background-color: #061e51 !important;
+ // }
+ //}
input::-webkit-input-placeholder {
color: #569ee1;
@@ -349,7 +457,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;
@@ -451,7 +560,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;
}
@@ -480,5 +589,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