管道基础大数据平台系统开发-【前端】-新系統界面
TreeWish
2023-02-28 db5aed78bc305815558e97f9a1110cc2fa993bc9
处理全国项目&单个项目数据
已修改5个文件
119 ■■■■ 文件已修改
src/api/screen.js 16 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/Screen/bottom.vue 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/Screen/right.vue 53 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/chart/BaseLineChart.vue 30 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/chart/projectintroduction.vue 18 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/screen.js
@@ -87,3 +87,19 @@
export function selectProjectInfo(params) {
  return request.get("/oneMap/selectProjectInfo", { params: params })
}
// 单个项目数据村数量
export function countStorageByProject(params) {
  return request.get("/oneMap/countStorageByProject", { params: params })
}
// 全球、全国项目
// 全国维度-按照项自类型统计不同项目个数
export function countProjectTypeNumber(params) {
  return request.get("/oneMap/countProjectTypeNumber", { params: params })
}
// 下载量统计
export function countDownloads(params) {
  return request.get("/oneMap/countDownloads", { params: params })
}
src/components/Screen/bottom.vue
@@ -242,7 +242,7 @@
          this.showPathLine(child)
          break
        case "项目展示":
          // this.DisplayCurrentProject(child)
          this.DisplayCurrentProject(child)
          this.changeProject(child)
          this.$bus.$emit("changeProjectCode", child.id)
src/components/Screen/right.vue
@@ -19,7 +19,10 @@
      <div class="current1">
        <div class="aside-title"></div>
        <!-- <country-dimension-bar ref="barRef"></country-dimension-bar> -->
        <base-bar-chart title="项目个数" :project="currentProject"></base-bar-chart>
        <base-bar-chart
          title="项目个数"
          :project="currentProject"
        ></base-bar-chart>
      </div>
      <div class="current1">
        <div class="aside-title">项目饼状图</div>
@@ -31,7 +34,7 @@
        <province-dimension-pie v-else ref="pieRef"></province-dimension-pie>
      </div>
      <div class="current1">
        <div class="aside-title">项目数据使用情况</div>
        <div class="aside-title">数据使用情况</div>
        <dv-capsule-chart
          :config="barConfig"
          style="width: 360px; height: 85%"
@@ -43,7 +46,10 @@
      <div class="current1">
        <div class="aside-title">站场座数</div>
        <!-- <country-dimension-bar ref="barRef"></country-dimension-bar> -->
        <base-bar-chart title="站场座数" :project="currentProject"></base-bar-chart>
        <base-bar-chart
          title="站场座数"
          :project="currentProject"
        ></base-bar-chart>
      </div>
      <div class="current1">
        <div class="aside-title">阀室座数</div>
@@ -53,7 +59,7 @@
        />
      </div>
      <div class="current1">
        <div class="aside-title">不同输送介质管道条数</div>
        <div class="aside-title">管道条数</div>
        <dv-conical-column-chart
          :config="config"
          style="width: 377px; height: 85%"
@@ -64,14 +70,22 @@
    <div class="rightContainer" v-if="currentDisplay == '工程'">
      <div class="current1">
        <div class="aside-title">数据存储量</div>
        <base-line-chart title="数据存储量" :project="currentProject" :params="params"></base-line-chart>
        <base-line-chart
          title="数据存储量"
          :project="currentProject"
          :params="params"
        ></base-line-chart>
      </div>
      <div class="current1">
        <div class="aside-title">数据下载次数</div>
        <base-pie-chart height="90%" :project="currentProject" :params="params"></base-pie-chart>
        <base-pie-chart
          height="90%"
          :project="currentProject"
          :params="params"
        ></base-pie-chart>
      </div>
      <div class="current1">
        <div class="aside-title">统计不同输送介质管道条数</div>
        <div class="aside-title">管道条数</div>
        <div class="content" style="height: 30px">
          <div class="header">
            <div>格式</div>
@@ -107,6 +121,7 @@
  countCountryDimension,
  countProvinceDimension,
  countZhPipeStations,
  countDownloads,
} from "@/api/screen.js"
export default {
@@ -212,11 +227,12 @@
        ],
        showValue: true,
      },
      params: {}
      params: {},
    }
  },
  created() {
    this.getZhPipeStations()
    this.getCountDownloads()
  },
  mounted() {
    this.OpenLeftInit()
@@ -230,14 +246,13 @@
      }
      this.currentProject = name
    })
    this.$bus.$on('changeProjectCode', code => {
    this.$bus.$on("changeProjectCode", code => {
      this.params = {
        projectCode: code
        projectCode: code,
      }
    })
  },
  methods: {
    ChangeRight() {
      if (this.leftMessage == "init") {
@@ -303,6 +318,20 @@
        }
      }
    },
    async getCountDownloads() {
      const res = await countDownloads()
      if (res.code == 200) {
        this.barConfig.data = res.result.map(item => {
          return {
            name: item.typename,
            value: item.count,
          }
        })
        this.barConfig = {
          ...this.barConfig,
        }
      }
    },
  },
}
</script>
src/components/chart/BaseLineChart.vue
@@ -11,7 +11,9 @@
  countZhPipeMapLength,
  countLargeCategories,
  countProjectType,
  countProjectDown
  countProjectDown,
  countProjectTypeNumber,
  countStorageByProject,
} from "@/api/screen.js"
export default {
  props: {
@@ -62,11 +64,21 @@
    option() {
      let xAxis = []
      let yAxis = []
      this.dataList.forEach(item => {
        xAxis.push(item.type)
        yAxis.push(item.count)
      })
      const proObj = this.dataList.find(item => item.项目名称 == this.project)
      if (proObj) {
        Object.keys(proObj).forEach(item => {
          if (item.toString() != '项目名称') {
            xAxis.push(item)
            yAxis.push(proObj[item])
          }
        })
      } else {
        this.dataList.forEach(item => {
          let type = item.type || item.projtype
          xAxis.push(type)
          yAxis.push(item.count)
        })
      }
      // let data = [220, 182, 191, 234, 290, 330, 310]
      // const sideData = data.map(item => {
@@ -164,10 +176,10 @@
        let requsetFn = null
        switch (newVal) {
          case "全球项目":
            requsetFn = countLargeCategories
            requsetFn = countProjectTypeNumber
            break
          case "全国项目":
            requsetFn = countLargeCategories
            requsetFn = countProjectTypeNumber
            break
          case "全球管网图":
            requsetFn = countZhPipeMapLength
@@ -176,7 +188,7 @@
            requsetFn = countZhPipeMapLength
            break
          default:
            requsetFn = GetServicesVisitsCount
            requsetFn = countStorageByProject
            break
        }
src/components/chart/projectintroduction.vue
@@ -2,11 +2,11 @@
  <div class="projectintroduction">
    <div class="item">
      <div class="itemName">项目名称:</div>
      <div class="itemValue" :title="result.projname">
      <div class="itemValue" :title="projname">
        {{
          result.projname.length > 15
            ? result.projname.substring(0, 15)
            : result.projname
          projname.length > 15
            ? projname.substring(0, 15)
            : projname
        }}
      </div>
    </div>
@@ -30,7 +30,7 @@
      <div class="itemName">工程内容:</div>
      <div class="itemValue">
        {{
          result.contents.length > 15
          result.contents && result.contents.length > 15
            ? result.contents.substring(0, 15)
            : result.contents
        }}
@@ -69,6 +69,7 @@
        remarks: "测试用,内容虚构",
        updateuser: 1,
      },
      projname: "西气东输三线(中卫-枣阳)",
    }
  },
  created() {
@@ -78,12 +79,17 @@
      }
      this.getDataList(params)
    })
    this.$bus.$on("changeProject", name => {
      this.projname = name
    })
  },
  methods: {
    async getDataList(params) {
      const res = await selectProjectInfo(params)
      if (res.code == 200) {
        this.result = res.result
        if (res.result.length > 0) {
          this.result = res.result[0]
        }
      }
    },
    //获取时间