修改切换逻辑

TreeWish

2023-02-27 fce89affcbc15073f2e41b647239b3fff777006b

修改切换逻辑

 src/components/Screen/left.vue

@@ -4,45 +4,46 @@
      <img :src="leftImg" @click="ChangeLeft" />
    </div>
    <div class="leftContainer" v-if="ChartDisplay">
      <div class="current1"  id="leftCurrent1">
      <div class="current1" id="leftCurrent1">
        <div class="aside-title">数据申请次数</div>
        <count-data-apply ></count-data-apply>
        <count-data-apply></count-data-apply>
      </div>
      <div class="current1"   id="leftCurrent2">
      <div class="current1" id="leftCurrent2">
        <div class="aside-title">用户访问量</div>
        <service-type></service-type>
      </div>
      <div class="current1"  id="leftCurrent3">
      <div class="current1" id="leftCurrent3">
        <div class="aside-title">项目存储信息</div>
        <data-storage></data-storage>
      </div>
    </div>
    <!-- 全球统计次数 -->
    <div class="leftContainer" v-if="GlobleChartDisplay">
      <div class="current1"  id="leftCurrent1">
      <div class="current1" id="leftCurrent1">
        <div class="aside-title">数据申请次数</div>
        <count-data-apply ></count-data-apply>
        <base-bar-chart :project="currProject"></base-bar-chart>
        <!-- <count-data-apply></count-data-apply> -->
      </div>
      <div class="current1"   id="leftCurrent2">
      <div class="current1" id="leftCurrent2">
        <div class="aside-title">用户访问量</div>
        <service-type></service-type>
      </div>
      <div class="current1"  id="leftCurrent3">
      <div class="current1" id="leftCurrent3">
        <div class="aside-title">项目存储信息</div>
        <data-storage></data-storage>
      </div>
    </div>
<!-- 全国项目统计次数 -->
    <!-- 全国项目统计次数 -->
    <div class="leftContainer" v-if="CountryChartDisplay">
      <div class="current1"  id="leftCurrent1">
      <div class="current1" id="leftCurrent1">
        <div class="aside-title">数据申请次数</div>
        <count-data-apply ></count-data-apply>
        <count-data-apply></count-data-apply>
      </div>
      <div class="current1"   id="leftCurrent2">
      <div class="current1" id="leftCurrent2">
        <div class="aside-title">用户访问量</div>
        <service-type></service-type>
      </div>
      <div class="current1"  id="leftCurrent3">
      <div class="current1" id="leftCurrent3">
        <div class="aside-title">项目存储信息</div>
        <data-storage></data-storage>
      </div>
@@ -57,26 +58,43 @@
import countDataApply from "@/components/chart/CountDataApply.vue"
import ServiceType from "../chart/ServiceType.vue"
import DataStorage from "../chart/DataStorage.vue"
import BaseBarChart from "../chart/BaseBarChart.vue"
export default {
  components: {
    ProjectTree,
    countDataApply,
    ServiceType,
    DataStorage,
    BaseBarChart,
  },
  data() {
    return {
      leftMessage: "init",
      ChartDisplay: true,
      ProjectreeDisplay: false,
      GlobleChartDisplay:false,
      CountryChartDisplay:false,
      GlobleChartDisplay: false,
      CountryChartDisplay: false,
      leftImg: require("../../assets/img/Screen/rightArrow.png"),
      currProject: "全球项目",
    }
  },
  mounted() {
    this.OpenLeftInit()
    // this.OpenLeftInitChart();
    this.$bus.$on("changeProject", name => {
      this.currProject = name
      this.GlobleChartDisplay = true
      this.ChartDisplay = false
      // if (name == "全球项目") {
      //   this.GlobleChartDisplay = true
      //   this.ChartDisplay = false

      // } else {
      //   this.ChartDisplay = true
      //   this.GlobleChartDisplay = false

      // }
    })
  },
  methods: {
    ChangeLeft() {
@@ -107,10 +125,7 @@
      this.leftMessage = "init"
      // this.OpenLeftInitChart();
      this.$parent.ChangeWidth("leftView")

      this.$bus.$on("changeProject", name => {
        
      })
      this.GlobleChartDisplay = false

    },
    //打开工程树

 src/components/Screen/right.vue

@@ -17,12 +17,11 @@
      </div>
      <div class="current1">
        <div class="aside-title">服务访问次数</div>

        <Service-Get></Service-Get>
      </div>
    </div>

    <!-- <div
    <div
      class="rightContainer2"
      v-if="CourtyDisplay && currentProject =='全球项目'"
    >
@@ -46,7 +45,7 @@
        <div class="aside-title">项目数量饼状图</div>
        <province-dimension-pie ref="pieRef"></province-dimension-pie>
      </div>
    </div> -->
    </div>
    <div class="rightarrow">
      <img :src="RightImg" @click="ChangeRight" />
    </div>
@@ -93,6 +92,8 @@
  mounted() {
    this.$bus.$on("changeProject", name => {
      this.currentProject = name
      this.CourtyDisplay = true
      this.ChartDisplay = false
    })
  },
  methods: {
@@ -172,23 +173,23 @@
      background-repeat: no-repeat;
    }
  }
  // .rightContainer2 {
  //   height: 100%;
  //   width: calc(100% - 45px);
  .rightContainer2 {
    height: 100%;
    width: calc(100% - 45px);

  //   display: flex;
  //   flex-direction: column;
  //   align-items: center;
  //   .current1 {
  //     margin-top: 10px;
  //     margin-bottom: 30px;
  //     height: 30%;
  //     width: 100%;
  //     background: url(../../assets/img/Screen/chartbg.png);
  //     background-size: 100% 100%;
  //     background-repeat: no-repeat;
  //   }
  // }
    display: flex;
    flex-direction: column;
    align-items: center;
    .current1 {
      margin-top: 10px;
      margin-bottom: 30px;
      height: 30%;
      width: 100%;
      background: url(../../assets/img/Screen/chartbg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
  .content {
    width: 100%;
    background: url(../../assets/img/Screen/contentBg.png);

 src/components/Screen/top.vue

@@ -1,7 +1,7 @@
<template>
  <div class="top">
    <div class="topleft">
      <!-- <div
      <div
        class="topleft1"
        :class="currView == 'chart' ? 'active' : ''"
        @click="OpenInitChart"
@@ -9,7 +9,7 @@
        <img src="../../assets/img/Screen/bigST.png" />
        <span>大屏视图</span>
      </div>
      <div
      <!-- <div
        class="topleft1"
        @click="OpenProjectree"
        :class="currView == 'tree' ? 'active' : ''"
@@ -87,7 +87,7 @@
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-around;
    // justify-content: space-around;
    cursor: pointer;
    .topleft1 {
      width: 127px;
@@ -99,6 +99,7 @@
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      margin-left: 10%;
    }
    .active {
      background-image: url(../../assets/img/Screen/btnc.png);

 src/components/chart/BaseBarChart.vue

@@ -4,20 +4,20 @@

<script>
import * as echarts from "echarts"
import { countCountryDimension } from "@/api/screen.js"
import { countCountryDimension, countProvinceDimension } from "@/api/screen.js"
export default {
  props: {
    width: {
      type: String,
      default: '100%'
      default: "100%",
    },
    height: {
      type: String,
      default: '100%'
      default: "100%",
    },
    autoResize: {
      type: Boolean,
      default: true
      default: true,
    },
    // option: {
    //   type: Object,
@@ -25,13 +25,17 @@
    // },
    type: {
      type: String,
      default: 'canvas'
    }
      default: "canvas",
    },
    project: {
      type: String,
      default: "全国项目",
    },
  },
  data() {
    return {
      chart: null,
      dataList: []
      dataList: [],
    }
  },
  computed: {
@@ -89,7 +93,8 @@
        data = this.dataList
      }
      data.forEach(item => {
        xAxisData.push(item.country)
        let name = item.province || item.country
        xAxisData.push(name)
        yAxisData.push(item.count)
      })
      let option = {
@@ -234,28 +239,42 @@
          },
        ],
      }

      return option
    }
    },
  },
  watch: {
    // option: {
    //   deep: true,
    //   handler(newVal) {
    //     this.setOptions(newVal)
    //   }
    // },
    currentProject: {
    option: {
      deep: true,
      handler(newVal) {
        this.initData()
        this.setOptions(newVal)
      },
    },
    project: {
      deep: true,
      handler(newVal) {
        let requsetFn = null
        switch (newVal) {
          case "全球项目":
            requsetFn = countCountryDimension
            break
          case "全国项目":
            requsetFn = countProvinceDimension
            break

          default:
            break
        }
        this.initData(requsetFn)
        this.setOptions(this.option)
      }
    }
      },
    },
  },
  mounted() {
    this.initData()
    this.initChart()
    if (this.autoResize) {
      window.addEventListener('resize', this.resizeHandler)
      window.addEventListener("resize", this.resizeHandler)
    }
  },
  beforeDestroy() {
@@ -263,7 +282,7 @@
      return
    }
    if (this.autoResize) {
      window.removeEventListener('resize', this.resizeHandler)
      window.removeEventListener("resize", this.resizeHandler)
    }
    this.chart.dispose()
    this.chart = null
@@ -273,14 +292,14 @@
      this.chart.resize()
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart, '', {
        renderer: this.type
      this.chart = echarts.init(this.$refs.chart, "", {
        renderer: this.type,
      })
      this.chart.setOption(this.option)
      this.chart.on('click', this.handleClick)
      this.chart.on("click", this.handleClick)
    },
    handleClick(params) {
      this.$emit('click', params)
      this.$emit("click", params)
    },
    setOptions(option) {
      this.clearChart()
@@ -294,12 +313,13 @@
    },
    clearChart() {
      this.chart && this.chart.clear()
    }
  },
  methods: {
    async initData() {


    },
    async initData(requsetFn = countCountryDimension) {
      const res = await requsetFn()
      if (res.code == 200) {
        this.dataList = res.result
        console.log("requsetFn", res)
      }
    },
  },
}