管道基础大数据平台系统开发-【前端】-新系統界面
TreeWish
2023-02-27 fb212223fdc2f692896da5483ba2b1a8aec22d5f
src/components/Screen/left.vue
@@ -3,7 +3,7 @@
    <div class="leftarrow">
      <img :src="leftImg" @click="ChangeLeft" />
    </div>
    <div class="leftContainer" v-if="ChartDisplay">
    <div class="leftContainer" v-if="currentDisplay == '大屏' && ChartDisplay">
      <div class="current1" id="leftCurrent1">
        <div class="aside-title">数据申请次数</div>
        <count-data-apply></count-data-apply>
@@ -17,35 +17,51 @@
        <data-storage></data-storage>
      </div>
    </div>
    <!-- 全球统计次数 -->
    <div class="leftContainer" v-if="GlobleChartDisplay">
    <!-- 全球、全国统计次数 -->
    <div class="leftContainer" v-if="currentDisplay == '项目'">
      <div class="current1" id="leftCurrent1">
        <div class="aside-title">数据申请次数</div>
        <base-bar-chart :project="currProject"></base-bar-chart>
        <div class="aside-title">国内、国外</div>
      </div>
      <div class="current1" id="leftCurrent2">
        <div class="aside-title">统计地灾、洞库等专业数据存储量</div>
        <base-line-chart :project="currProject"></base-line-chart>
      </div>
      <div class="current1" id="leftCurrent3">
        <div class="aside-title">数据存储量</div>
        <data-storage></data-storage>
      </div>
    </div>
    <!-- 全球、全国管网图 -->
    <div class="leftContainer" v-if="currentDisplay == '管网'">
      <div class="current1" id="leftCurrent1">
        <div class="aside-title">管网国内、国外</div>
        <!-- <base-bar-chart :project="currProject"></base-bar-chart> -->
        <!-- <count-data-apply></count-data-apply> -->
      </div>
      <div class="current1" id="leftCurrent2">
        <div class="aside-title">用户访问量</div>
        <service-type></service-type>
        <div class="aside-title">输送介质类别统计长度</div>
        <base-line-chart :project="currProject"></base-line-chart>
        <!-- <base-pie-chart :project="currProject"></base-pie-chart> -->
        <!-- <service-type></service-type> -->
      </div>
      <div class="current1" id="leftCurrent3">
        <div class="aside-title">项目存储信息</div>
        <div class="aside-title">数据存储量</div>
        <data-storage></data-storage>
      </div>
    </div>
    <!-- 全国项目统计次数 -->
    <div class="leftContainer" v-if="CountryChartDisplay">
      <div class="current1" id="leftCurrent1">
        <div class="aside-title">数据申请次数</div>
        <count-data-apply></count-data-apply>
    <!-- 单个工程展示 -->
    <div class="leftContainer" v-if="currentDisplay == '工程'">
      <div class="current1" >
        <div class="aside-title">工程简介</div>
      </div>
      <div class="current1" id="leftCurrent2">
        <div class="aside-title">用户访问量</div>
        <service-type></service-type>
      <div class="current1" >
        <div class="aside-title">项目状态</div>
      </div>
      <div class="current1" id="leftCurrent3">
        <div class="aside-title">项目存储信息</div>
        <data-storage></data-storage>
      <div class="current1">
        <div class="aside-title">建设工期</div>
      </div>
    </div>
    <!-- <div class="leftContainer" v-if="ProjectreeDisplay">
@@ -59,6 +75,8 @@
import ServiceType from "../chart/ServiceType.vue"
import DataStorage from "../chart/DataStorage.vue"
import BaseBarChart from "../chart/BaseBarChart.vue"
import BaseLineChart from "../chart/BaseLineChart.vue"
import BasePieChart from "../chart/BasePieChart .vue"
export default {
  components: {
    ProjectTree,
@@ -66,6 +84,8 @@
    ServiceType,
    DataStorage,
    BaseBarChart,
    BaseLineChart,
    BasePieChart,
  },
  data() {
    return {
@@ -76,24 +96,22 @@
      CountryChartDisplay: false,
      leftImg: require("../../assets/img/Screen/rightArrow.png"),
      currProject: "全球项目",
      currentDisplay: "大屏",
    }
  },
  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
      // }
      if (name.includes("全球管网") || name.includes("全国管网")) {
        this.currentDisplay = "管网"
      } else if (name.includes("全球项目") || name.includes("全国项目")) {
        this.currentDisplay = "项目"
      } else {
        this.currentDisplay = '工程'
      }
      this.currentProject = name
    })
  },
  methods: {
@@ -120,13 +138,14 @@
    },
    //打开大屏左侧界面
    OpenLeftInit() {
      this.currentDisplay = "大屏"
      this.ChartDisplay = true
      this.ProjectreeDisplay = false
      this.leftMessage = "init"
      // this.OpenLeftInitChart();
      this.$parent.ChangeWidth("leftView")
      this.GlobleChartDisplay = false
    },
    //打开工程树
    OpenLeftProjectTree() {
@@ -593,7 +612,7 @@
  .leftContainer {
    height: 100%;
    width: calc(100% - 7px);
    width: calc(100% - 45px);
    display: flex;
    flex-direction: column;
    align-items: center;