管道基础大数据平台系统开发-【前端】-新系統界面
王旭
2023-05-09 93c0e388bc3fe955c223e1b23a1f4257b1d60d11
src/components/Screen/left.vue
@@ -1,32 +1,59 @@
<template>
  <div class="current">
    <div class="leftarrow">
      <img :src="leftImg" @click="ChangeLeft" />
      <img
        :src="leftImg"
        @click="ChangeLeft"
      />
    </div>
    <div class="leftContainer" v-if="currentDisplay == '大屏' && ChartDisplay">
      <div class="current1" id="leftCurrent1">
    <div
      class="leftContainer"
      v-if="currentDisplay == '大屏' && ChartDisplay"
    >
      <div
        class="current1 current1-1"
        id="leftCurrent1"
      >
        <div class="aside-title">数据申请次数</div>
        <count-data-apply></count-data-apply>
      </div>
      <div class="current1" id="leftCurrent2">
      <div
        class="current1 current1-2"
        id="leftCurrent2"
      >
        <div class="aside-title">用户访问量</div>
        <service-type></service-type>
      </div>
      <div class="current1" id="leftCurrent3">
      <div
        class="current1 current1-3"
        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="leftContainer"
      v-if="currentDisplay == '项目'"
    >
      <div
        class="current1"
        id="leftCurrent1"
      >
        <div class="aside-title">数据总览</div>
        <div class="wrapper">
          <div class="title">{{ currentProject }}</div>
          <dv-digital-flop style="height: 40px" :config="xmCountConfig" />
          <dv-digital-flop
            style="height: 40px"
            :config="xmCountConfig"
          />
        </div>
      </div>
      <div class="current1" id="leftCurrent2">
      <div
        class="current1"
        id="leftCurrent2"
      >
        <div class="aside-title">存储信息</div>
        <base-line-chart
          :requsetFn="requsetFn"
@@ -34,21 +61,36 @@
          title="数据存储量"
        ></base-line-chart>
      </div>
      <div class="current1" id="leftCurrent3">
      <div
        class="current1"
        id="leftCurrent3"
      >
        <div class="aside-title">数据存储量</div>
        <data-storage-type></data-storage-type>
      </div>
    </div>
    <!-- 全球、全国管网图 -->
    <div class="leftContainer" v-if="currentDisplay == '管网'">
      <div class="current1" id="leftCurrent1">
    <div
      class="leftContainer"
      v-if="currentDisplay == '管网'"
    >
      <div
        class="current1"
        id="leftCurrent1"
      >
        <div class="aside-title">数据总览</div>
        <div class="wrapper">
          <div class="title">{{ currentProject }}</div>
          <dv-digital-flop style="height: 40px" :config="xmCountConfig" />
          <dv-digital-flop
            style="height: 40px"
            :config="xmCountConfig"
          />
        </div>
      </div>
      <div class="current1" id="leftCurrent2">
      <div
        class="current1"
        id="leftCurrent2"
      >
        <div class="aside-title">管网长度</div>
        <base-line-chart
          :requsetFn="requsetFn"
@@ -58,13 +100,19 @@
        <!-- <base-pie-chart :project="currentProject"></base-pie-chart> -->
        <!-- <service-type></service-type> -->
      </div>
      <div class="current1" id="leftCurrent3">
      <div
        class="current1"
        id="leftCurrent3"
      >
        <div class="aside-title">数据存储量</div>
        <data-storage-type></data-storage-type>
      </div>
    </div>
    <!-- 单个工程展示 -->
    <div class="leftContainer" v-if="currentDisplay == '工程'">
    <div
      class="leftContainer"
      v-if="currentDisplay == '工程'"
    >
      <div class="current1">
        <div class="aside-title">工程简介</div>
        <projectintroduction></projectintroduction>
@@ -161,6 +209,11 @@
          ...this.xmCountConfig,
        }
      }
    })
    this.$bus.$on("closeLeftAndRightMenu", (res) => {
      this.ChartDisplay = res;
      this.ProjectreeDisplay = res;
      this.ChangeLeft();
    })
  },
  methods: {
@@ -448,7 +501,7 @@
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
            dataAxis[
              Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
            Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
            ],
        })
      })
@@ -700,4 +753,16 @@
    }
  }
}
@media (max-width: 1400px) {
  .current .leftContainer .current1-1 {
    height: 28%;
  }
  .current .leftContainer .current1-2 {
     height: 42%;
  }
  .current .leftContainer .current1-3 {
   height: 28%;
  }
}
</style>