管道基础大数据平台系统开发-【前端】-新系統界面
Surpriseplus
2023-02-16 be1f4296a09f907fd3218bc423d24b817a761229
src/components/Screen/right.vue
@@ -1,43 +1,52 @@
<template>
    <div class="current">
        <div class="rightContainer"  v-show="ChartDisplay">
            <div class="current1"></div>
            <div class="current1"></div>
            <div class="current1"></div>
      <div class="current1">
        <div class="aside-title">目录分布</div>
        <echart11></echart11>
      </div>
      <div class="current1">
        <div class="aside-title">数据及服务提交</div>
        <echart12></echart12>
      </div>
      <div class="current1">
        <div class="aside-title">各类数据存储分布</div>
        <echart13></echart13>
      </div>
        </div>
        <div class="rightarrow">
            <img :src="RightImg"  @click="ChangeRight" />
        </div>
    </div>
</template>
<script>
import echart11 from "@/components/echart11.vue"
import echart12 from "@/components/echart12.vue"
import echart13 from "@/components/echart13.vue"
export default{
  components: {
    echart11,
    echart12,
    echart13,
  },
    data(){
        return{
            ChartDisplay:true,
            RightImg:require("../../assets/img/Screen/leftArrow.png")
      RightImg: require("../../assets/img/Screen/leftArrow.png"),
        }
    },
    methods:{
        ChangeRight(){
            if(this.ChartDisplay){
                this.RightImg=require("../../assets/img/Screen/rightArrow.png");
        this.RightImg = require("../../assets/img/Screen/rightArrow.png")
            }else{
                this.RightImg=require("../../assets/img/Screen/leftArrow.png");
        this.RightImg = require("../../assets/img/Screen/leftArrow.png")
            }        
            this.ChartDisplay=!this.ChartDisplay;
            this.$parent.ChangeWidth("right");
      this.ChartDisplay = !this.ChartDisplay
      this.$parent.ChangeWidth("right")
    },
  },
        }
    }
}
</script>
<style lang="scss">
.current {
@@ -74,9 +83,13 @@
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
    .aside-title {
      padding-left: 30px;
      height: 27px;
      line-height: 27px;
      font-size: 16px;
      color: #fff;
    }
  }
}
</style>