企业指标统计右侧

wangqi

2021-03-15 f2c8563d7f3bcc3131524214456464a512e2624a

 src/components/panel/RightSearchPanel.vue

@@ -1,10 +1,19 @@
<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>-->
@@ -44,7 +53,7 @@
      topicList: TopicList,
      topicCheckedList: [],
      isPanelVisible: false,
      gcComp: 'sewersSearch',
      gcComp: SewersSearch,

      gdVisible: true,
      hbVisible: false,
@@ -56,10 +65,21 @@
      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: {
@@ -79,8 +99,8 @@
      // 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')
      // 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
@@ -120,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);
  }
@@ -148,7 +177,7 @@

  .el-form-item__label {
    color: rgb(52, 224, 255);
    /*<!--color: @color;-->*/
    color: @color;
  }

  .el-input__inner::placeholder {
@@ -292,6 +321,13 @@
    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 {
@@ -299,11 +335,11 @@
    //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%;
    //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);