From f3ab28fd376caec5b142145d9b779d846f9fbc10 Mon Sep 17 00:00:00 2001
From: 陈泽平 <chenzeping>
Date: 星期一, 31 五月 2021 10:23:28 +0800
Subject: [PATCH] 企业应急-事件上报布局问题修改
---
src/components/panel/RightSearchPanel.vue | 681 ++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 554 insertions(+), 127 deletions(-)
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index 11f10ad..2283ad0 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/src/components/panel/RightSearchPanel.vue
@@ -1,136 +1,396 @@
<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)">
- <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="right-control">
-
- <div class="el-message-box__header panel_header">
- <div class="el-message-box__title panel_title"><!----><span>{{ title }}</span>
+ <div class="panel-right" v-show="isShow">
+ <transition name="searchPanelChange">
+ <div style=" display: inline-flex;">
+ <div class="panel-tab">
+ <div class="container">
+ <!-- <ul>
+ <li style="text-align: right">
+ <div @click="setSearchPanelChange" type="button" class="el-button special-button el-button--default">
+ <i class=" el-icon-d-arrow-right" v-if="selectGroup"></i>
+ <i class=" el-icon-d-arrow-left" v-else ></i>
+ </div>
+ </li>
+ </ul> -->
+ <ul v-for="item in list" :key="item.name"
+ :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'"
+ @click="()=>{selected(item)}" v-show="item.isShow">
+ <el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left">
+ <li>
+ <!-- <img src="../../assets/images/map-pages/icon/sl.png" class="icon"> -->
+ <i class="icon iconfont" :class="item.icon"></i>
+ </li>
+ </el-tooltip>
+ </ul>
+ </div>
+ </div>
+ <div class="right-control" :class="[{ 'unfold': !isCollapse },{ 'shrink': isCollapse }] " v-if="gcComp!=''">
+ <div class="panel-fold-btn" @click="toggleMonitorPanel">
+ <div :class="[isCollapse? 'btn-stretch':'btn-shrink']"></div>
+ </div>
+ <div :class="'search-container map-background'" v-show="selectGroup">
+ <div @click="setSearchPanelChange" class="el-button special-button el-button--default ">
+ <i class=" el-icon-d-arrow-right" v-if="selectGroup"></i>
+ <i class=" el-icon-d-arrow-left" v-else></i>
+ </div>
+ <div class="el-message-box__content" style="padding:0;font-size: 13px;">
+ <component :title="title" :is="gcComp"></component>
+ </div>
+ </div>
</div>
</div>
- <component :title="title" :is="gcComp"></component>
- </div>
+ </transition>
+ <!-- <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鎼滅储" placement="left" v-show="!selectGroup">
+ <div :class="selectGroup === true ?'active-button':''" class="iconBtn" @click="setSearchPanelChange" style="position: absolute;top:0;right: 0" >
+ <i class="el-icon-search icon"></i>
+ </div>
+ </el-tooltip> -->
</div>
</template>
<script>
-import $ from 'jquery'
-import { TopicComp, TopicList } from '../../conf/Topic'
+import EnvRiskSearch from './topicSearch/EnvRiskSearch'
+import DischargeSearch from './topicSearch/DischargeSearch'
+import { topicList } from '../../conf/Topic'
+
+import WasteGasSearch from '@components/panel/topicSearch/WasteGasSearch'
+import WasteWaterSearch from '@components/panel/topicSearch/WasteWaterSearch'
+import SolidWasteSearch from '@components/panel/topicSearch/SolidWasteSearch'
+import SewersSearch from '@components/panel/topicSearch/SewersSearch'
+import SoilGroundWaterSearch from '@components/panel/topicSearch/SoilGroundWaterSearch.vue'
+import PipeChangesSearch from '@components/panel/topicSearch/pipeChangesSearch.vue'
+import PipeInformationSearch from '@components/panel/topicSearch/pipeInformationSearch.vue'
+import EnterpriseEmergencySearch from './topicSearch/EnterpriseEmergencySearch'
+
export default {
name: 'MonitorPanel',
- components: TopicComp,
+ components: {
+ WasteGasSearch,
+ WasteWaterSearch,
+ SolidWasteSearch,
+ EnvRiskSearch,
+ DischargeSearch,
+ EnterpriseEmergencySearch
+ },
data () {
return {
- topicList: TopicList,
+ isShow: true,
+ topicMenu: [],
+ list: topicList,
topicCheckedList: [],
isPanelVisible: false,
- gcComp: 'sewersSearch',
-
+ gcComp: SewersSearch,
gdVisible: true,
hbVisible: false,
pkVisible: false,
toggleMonitorStyle: 'right:0px',
-
- title: '姹￠洦姘寸缃�'
-
+ title: '姹￠洦姘寸缃�',
+ isCollapse: true,
+ selectGroup: false
}
},
computed: {
- topicMenu () {
- console.log(this.$store.state.map.topic.topicCheckedList)
- return this.$store.state.map.topic.topicCheckedList
+ serviceLayers () {
+ return this.$store.state.map.serviceLayers.LayerSewersLine
}
- },
+ }, /*
+ 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) {
+ this.topicMenu.push(item)
+ }
+ })
+ })
+ }
+ }, */
methods: {
handleClose (done) {
console.log(done)
},
-
- handlePage (page) {
- },
- handleClick (item) {
- this.title = item.name
- this.gcComp = item.comp
- },
- 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
+ setSearchPanelChange () {
+ // 鎼滅储闈㈡澘娌℃湁鏄剧ず鏃讹紝灏嗘墍鏈変富棰橀�夋嫨鐘舵�佽缃负false
+ this.selectGroup = !this.selectGroup
+ if (!this.selectGroup) {
+ this.list.forEach((itm) => {
+ itm.checked = false
})
}
+ },
+ unselected (val) {
+ // console.log(val)
+ this.selectGroup = true
+ this.list.forEach((itm) => {
+ if (itm.name === val.name) {
+ console.log(val.name)
+ itm.checked = false
+ itm.isShow = false
+ }
+ })
+ },
+ selected (val) {
+ // console.log(val)
+ this.selectGroup = true
+ this.list.forEach((itm) => {
+ if (itm.name === val.name) {
+ itm.isShow = true
+ itm.checked = true
+ } else {
+ itm.checked = false
+ }
+ })
+ this.setComp(val)
+ },
+ setComp (val) {
+ this.title = val.name
+ switch (val.name) {
+ case '姹℃煋婧�':
+ this.gcComp = DischargeSearch
+ break
+ case '搴熸按':
+ this.gcComp = WasteWaterSearch
+ break
+ case '搴熸皵':
+ this.gcComp = WasteGasSearch
+ break
+ case '鍥哄簾':
+ this.gcComp = SolidWasteSearch
+ break
+ case '鐜椋庨櫓':
+ this.gcComp = EnvRiskSearch
+ break
+ case '鍦熷￥鍙婂湴涓嬫按':
+ this.gcComp = SoilGroundWaterSearch
+ break
+ case '绠＄嚎':
+ this.gcComp = SewersSearch
+ break
+ case '绠￠亾鍙樻洿':
+ this.gcComp = PipeChangesSearch
+ break
+ case '绠￠亾淇℃伅':
+ this.gcComp = PipeInformationSearch
+ break
+ case '浼佷笟搴旀��':
+ this.gcComp = EnterpriseEmergencySearch
+ break
+ }
+ },
+ handlePage (page) {
+ },
+ toggleMonitorPanel () {
+ 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
+ // })
+ // }
+ },
+ containsLayer (layer) {
+ if (layer) {
+ for (let i = 0; i < layer.length; i++) {
+ const lay = layer[i]
+ const checked = lay.checked
+
+ for (let j = 0; j < this.list.length; j++) {
+ const topic = this.list[j]
+ if (lay.name === topic.name) {
+ if (lay.layers) {
+ const isChecked = this.isChecked(lay.layers)
+ if (isChecked) {
+ this.selected(topic)
+ } else {
+ this.unselected(topic)
+ }
+ } else if (checked) {
+ this.selected(topic)
+ }
+ break
+ }
+ }
+ this.containsLayer(lay.layers)
+ }
+ }
+ },
+ isChecked (layers) {
+ for (let i = 0; i < layers.length; i++) {
+ const layer = layers[i]
+ const checked = layer.checked
+ if (checked) {
+ return true
+ }
+ if (layer.layers) {
+ return this.isChecked(layer.layers)
+ }
+ }
+ return false
}
},
mounted () {
+ /* bus.$on('changeSearchBar', (obj) => {
+ const topic = this.search(this.serviceLayers, obj)
+ console.log('====' + JSON.stringify(topic))
+ }) */
+ },
+ watch: {
+ serviceLayers: {
+ handler: function (newVal, oldVal) {
+ this.containsLayer(newVal)
+ },
+ immediate: true,
+ deep: true
+ }
}
}
</script>
<style lang="less">
-@import '@assets/css/map/_map-variable';
-#right-panel {
- width: 322px;
- //height: 573px;
- height: 100%;
+.searchPanelChange-enter-active {
+ transform-origin: top right;
+ animation: bounce-in .2s;
+}
+
+.searchPanelChange-leave-active {
+ transform-origin: top right;
+ animation: bounce-in .2s reverse;
+}
+
+.search-container {
+ position: relative;
+ //width: 1.79167rem;
+ //width: 2.39167rem;
+ width: 2.3rem;
+ /* height: 5.6475rem;*/
+ 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;
+ font-size: 20px;
+
+ 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: 0.73979rem;
+ right: 0.14583rem;
+ 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-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-button--default.special-button {
+ padding: 0;
+ background: @background-color4;
+ color: @color-tool;
+ position: absolute;
+ top: 20px;
+ left: 0.02rem;
+ border: none; //1px solid @color-tool;
+ width: 0.2rem;
+ height: 0.2rem;
+ text-align: center;
+ line-height: 0.2rem;
+ margin-top: -0.1rem;
+ border-radius: 50%;
+ z-index: 999;
}
- .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-button--default.special-button:hover {
+ background: @background-color;
+ border: 1px solid @color;
+ box-shadow: 0 0 2px @color;
+ color: @color;
}
.el-form-item__label {
color: rgb(52, 224, 255);
+ color: @color;
}
.el-input__inner::placeholder {
@@ -221,15 +481,33 @@
text-overflow: ellipsis;
white-space: nowrap;
}
- .panel-fold-btn{
+
+ .panel-fold-btn {
+ overflow: hidden;
position: absolute;
- top:45%;
+ top: 45%;
+ left: -18px;
+ /*left: 0px;*/
//right: 320px;
- right: 290px;
+ /*right: 290px;*/
z-index: 1000;
- background-color: rgba(5,24,66,.8);
+ /*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;
@@ -242,35 +520,46 @@
}
.tab-item {
- width: 32px;
- height: 30px;
+ //width: .2rem;
+ //height: .2rem;
color: @color;
font-size: 12px;
background-color: #0B3B6D;
}
- .tab-item:hover{
+
+ .tab-item:hover {
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 {
@@ -280,13 +569,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;
}
@@ -296,25 +585,98 @@
}
.search-form .el-form-item {
- margin: 0px;
+ /*margin: 0px;*/
margin-bottom: 8px;
}
.search-form .el-icon-search {
display: grid;
- line-height: 30px;
font-size: 18px;
}
- .search-panel {
- border: #07325B;
- background-color: #07325B !important;
- margin-top: 0px;
+ /*input 鐐瑰嚮鎼滅储鏍峰紡*/
- .el-input__inner {
- border-radius: 0px !important;
- background-color: #061e51 !important;
+ .rightButtonSearch {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .el-input {
+ margin-right: 10px
}
+
+ .el-icon-search {
+ width: 40px;
+ border: 1px solid @color;
+ height: 28px;
+ line-height: 28px;
+ text-align: center;
+ color: #fff;
+ border-radius: 2px;
+ cursor: pointer;
+ background: rgba(0, 16, 30, .5);
+ padding: 0;
+ }
+ }
+
+ /*鍗曢�夋寜閽牱寮�*/
+
+ .levelOfRisk {
+ padding-left: 20px
+ }
+
+ .levelOfRisk .el-radio {
+ padding-bottom: 6px
+ }
+
+ .levelOfRisk-type {
+ display: inline-block;
+ position: relative;
+ padding-right: 5px;
+ color: @color-shadow;
+
+ i {
+ display: block;
+ width: 15px;
+ height: 10px;
+ position: absolute;
+ top: 50%;
+ right: -15px;
+ margin-top: -5px;
+ }
+ }
+
+ .el-radio.is-checked .levelOfRisk-type {
+ color: #409EFF
+ }
+
+ .environmental-risk-list {
+ position: relative;
+ padding-left: 50px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ color: @color-shadow;
+ border-bottom: 1px solid @background-color-split;
+ h3{ cursor: pointer;}
+ .state {
+ width: 30px;
+ height: 30px;
+ position: absolute;
+ top: 50%;
+ left: 10px;
+ margin-top: -15px;
+ border-radius: 50%;
+ box-shadow: 0 0 3px #000;
+ background: #0B3B6D;
+ }
+ }
+ .environmental-risk-list.hover,
+ .environmental-risk-list:hover{
+ background: @background-color;
+ }
+ .environmental-risk-list.hover h3,
+ .environmental-risk-list h3:hover {
+ color: @color-highlight;
}
input::-webkit-input-placeholder {
@@ -372,12 +734,16 @@
}
.footer-page {
- position: absolute;
+ // position: absolute;
background-color: transparent !important;
- bottom: 10px !important;
- margin-left: 0px;
+ // bottom: 10px !important;
+ // margin-left: 0px;
border: none;
-
+ margin: 0;
+ border-top: 1px solid rgba(0, 255, 246, 0.14);
+ .el-card__body{
+ padding: 5px;
+ }
.warnPagination {
.btn-quicknext, .btn-quickprev {
color: #e4e8f1 !important;
@@ -442,7 +808,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;
}
@@ -471,5 +837,66 @@
background-color: #061e51 !important;
}
}
+
+ .unfold {
+ transform: translateX(332px);
+ transition: transform 0.5s linear;
+ }
+
+ .shrink {
+ transform: translateX(0px);
+ transition: transform 0.5s linear;
+ }
+
+ /******************浠ヤ笅鍏叡閮ㄥ垎**********/
+
+ .sewers-search {
+ position: relative;
+ overflow: hidden;
+
+ .panel-title {
+ }
+
+ .search-panel {
+ background-color: transparent;
+ padding: 10px;
+ border-bottom: 1px solid @background-color-split;
+ // .el-input{width:calc(100% - 40px);position: relative}
+ /deep/ input {
+ border-radius: 0;
+ background-color: @background-color-split;
+ border: solid 1px @color;
+ color: @color-gray;
+ font-size: 0.01rem;
+ padding: 0 15px;
+
+ .el-select .el-input.is-focus .el-input__inner {
+ border-color: @color;
+ }
+ }
+
+ .el-input__inner {
+ background: none;
+ color: #fff;
+ font-size: 14px;
+ border-radius: 0;
+ border-color: @color;
+ background: rgba(0, 16, 30, .5);
+ }
+ }
+
+ .search-btn {
+
+ }
+
+ //location-btn{
+ //
+ //}
+ .location-btn:hover, .el-input__icon:hover {
+ color: @color;
+ cursor: pointer;
+ }
+ }
}
+
</style>
--
Gitblit v1.8.0