工程&管线接口对接

TreeWish

2023-02-28 234409bb4a612c5b69b78b1e844492f0a7122521

 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,40 +17,67 @@
        <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>
        <!-- <count-data-apply></count-data-apply> -->
        <div class="aside-title">数据总览</div>
        <div class="wrapper">
          <div class="title">{{ currentProject }}</div>
          <dv-digital-flop style="height: 40px" :config="xmCountConfig" />
        </div>
      </div>
      <div class="current1" id="leftCurrent2">
        <div class="aside-title">用户访问量</div>
        <service-type></service-type>
        <div class="aside-title">存储信息</div>
        <base-line-chart
          :requsetFn="requsetFn"
          :project="currentProject"
          title="数据存储量"
        ></base-line-chart>
      </div>
      <div class="current1" id="leftCurrent3">
        <div class="aside-title">项目存储信息</div>
        <data-storage></data-storage>
        <div class="aside-title">数据存储量</div>
        <data-storage-type></data-storage-type>
      </div>
    </div>
    <!-- 全国项目统计次数 -->
    <div class="leftContainer" v-if="CountryChartDisplay">
    <!-- 全球、全国管网图 -->
    <div class="leftContainer" v-if="currentDisplay == '管网'">
      <div class="current1" id="leftCurrent1">
        <div class="aside-title">数据申请次数</div>
        <count-data-apply></count-data-apply>
        <div class="aside-title">数据总览</div>
        <div class="wrapper">
          <div class="title">{{ currentProject }}</div>
          <dv-digital-flop style="height: 40px" :config="xmCountConfig" />
        </div>
      </div>
      <div class="current1" id="leftCurrent2">
        <div class="aside-title">用户访问量</div>
        <service-type></service-type>
        <div class="aside-title">管网长度</div>
        <base-line-chart
          :requsetFn="requsetFn"
          :project="currentProject"
          title="管网长度"
        ></base-line-chart>
        <!-- <base-pie-chart :project="currentProject"></base-pie-chart> -->
        <!-- <service-type></service-type> -->
      </div>
      <div class="current1" id="leftCurrent3">
        <div class="aside-title">项目存储信息</div>
        <data-storage></data-storage>
        <div class="aside-title">数据存储量</div>
        <data-storage-type></data-storage-type>
      </div>
    </div>
    <!-- <div class="leftContainer" v-if="ProjectreeDisplay">
      <project-tree></project-tree>
    </div> -->
    <!-- 单个工程展示 -->
    <div class="leftContainer" v-if="currentDisplay == '工程'">
      <div class="current1">
        <div class="aside-title">工程简介</div>
        <projectintroduction></projectintroduction>
      </div>
      <div class="current1">
        <div class="aside-title">项目状态</div>
        <projectState></projectState>
      </div>
      <div class="current1">
        <div class="aside-title">建设工期</div>
        <projectTime></projectTime>
      </div>
    </div>
  </div>
</template>
<script>
@@ -58,7 +85,28 @@
import countDataApply from "@/components/chart/CountDataApply.vue"
import ServiceType from "../chart/ServiceType.vue"
import DataStorage from "../chart/DataStorage.vue"
import DataStorageType from "../chart/DataStorageType.vue"

import BaseBarChart from "../chart/BaseBarChart.vue"
import BaseLineChart from "../chart/BaseLineChart.vue"
import BasePieChart from "../chart/BasePieChart .vue"
import projectintroduction from "../chart/projectintroduction.vue"
import projectState from "../chart/projectState.vue"
import projectTime from "../chart/projectTime.vue"
import {
  countCountryDimension,
  countProvinceDimension,
  countZhPipeStations,
  countZhPipeMapLength,
} from "@/api/screen.js"
function formatter(number) {
  const numbers = number.toString().split("").reverse()
  const segs = []

  while (numbers.length) segs.push(numbers.splice(0, 3).join(""))

  return segs.join(",").split("").reverse().join("")
}
export default {
  components: {
    ProjectTree,
@@ -66,6 +114,12 @@
    ServiceType,
    DataStorage,
    BaseBarChart,
    BaseLineChart,
    BasePieChart,
    projectintroduction,
    projectState,
    projectTime,
    DataStorageType
  },
  data() {
    return {
@@ -75,25 +129,38 @@
      GlobleChartDisplay: false,
      CountryChartDisplay: false,
      leftImg: require("../../assets/img/Screen/rightArrow.png"),
      currProject: "全球项目",
      currentProject: "全球项目",
      currentDisplay: "大屏",
      requsetFn: countZhPipeMapLength,
      xmCountConfig: {
        number: [0],
        content: "{nt}",
        formatter,
      },
    }
  },
  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
      if (name.includes("全球管网") || name.includes("全国管网")) {
        this.currentDisplay = "管网"
      } else if (name.includes("全球项目") || name.includes("全国项目")) {
        this.currentDisplay = "项目"
      } else {
        this.currentDisplay = "工程"
      }

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

      // }
      this.currentProject = name
    })
    this.$bus.$on("changeCount", count => {
      if (typeof count == "number") {
        this.xmCountConfig.number = [count]
        this.xmCountConfig = {
          ...this.xmCountConfig,
        }
      }
    })
  },
  methods: {
@@ -120,13 +187,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 +661,7 @@

  .leftContainer {
    height: 100%;
    width: calc(100% - 7px);
    width: calc(100% - 45px);
    display: flex;
    flex-direction: column;
    align-items: center;
@@ -613,6 +681,23 @@
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .wrapper {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 15px auto;
      width: 180px;
      height: 180px;
      background: url(../../assets/img/Screen/all.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      .title {
        color: #fff;
        font-size: 20px;
        width: 100%;
        text-align: center;
      }
    }
  }
}
</style>