企业指标统计右侧

wangqi

2021-03-15 f2c8563d7f3bcc3131524214456464a512e2624a

 src/components/panel/RightSearchPanel.vue

@@ -1,25 +1,44 @@
<template>
  <div id="right-panel">
  <div class="panel-right">
    <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}">
      <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 class="container">
        <ul class="module-wrap"
            style="padding-top: 0px; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
          <li class="active module-wrap__box">
            <div class="module-wrap__box-item">
              <!----><img src="../../assets/images/map-pages/icon/dd.png" class="icon">
            </div><!---->
          </li>
        </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>-->
<!--&lt;!&ndash;                <div class="btn-stretch" v-if="isCollapse"  </div>&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="btn-shrink" v-else-if="!isCollapse" ></div>&ndash;&gt;-->
<!--&lt;!&ndash;        :style = "{width:isCollapse ? '290px' : '0px'}"&ndash;&gt;-->
<!--      </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 $ from 'jquery'
import EnvProtectSearch from './topicSearch/EnvProtectSearch'
import DischargeSearch from './topicSearch/DischargeSearch'
import { TopicList } from '../../conf/Topic'
@@ -41,8 +60,9 @@
      pkVisible: false,
      toggleMonitorStyle: 'right:0px',

      title: '污雨水管网'
      title: '污雨水管网',

      isCollapse: false
    }
  },
  computed: {},
@@ -73,38 +93,44 @@
      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 () {
@@ -114,18 +140,27 @@

<style lang="less">
@import '@assets/css/map/_map-variable';
#right-panel {
.panel-right {
  width: 322px;
  //height: 573px;
  height: 100%;
  //height: 100%;
  //position: absolute;
  //right: 10px;
  //top: 10px;
  height: 0;
  position: absolute;
  right: 10px;
  top: 10px;
  top: .60417rem;
  right: .15625rem;
  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);
  }
@@ -142,6 +177,7 @@

  .el-form-item__label {
    color: rgb(52, 224, 255);
    color: @color;
  }

  .el-input__inner::placeholder {
@@ -221,11 +257,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 +269,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;
@@ -270,20 +321,30 @@
    width: 32px;
    z-index: 500;
    background: url('../../assets/images/map-pages/icon/caidan.png') no-repeat;
    .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 +352,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 +368,8 @@
  }

  .search-form .el-form-item {
    margin: 0px;
    /*margin: 0px;*/
    margin-bottom: 8px;
  }

  .search-form .el-icon-search {
@@ -349,7 +411,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 +514,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 +543,13 @@
      background-color: #061e51 !important;
    }
  }
  .unfold {
    transform: translateX(332px);
    transition: transform 0.5s linear;
  }
  .shrink {
    transform: translateX(0px);
    transition: transform 0.5s linear;
  }
}
</style>