From bb39cbe30cf530a7554c5813e21ffaba9307a035 Mon Sep 17 00:00:00 2001
From: TreeWish <1131093754@qq.com>
Date: 星期五, 24 二月 2023 15:39:29 +0800
Subject: [PATCH] 修改部分图表显示效果
---
src/components/Screen/right.vue | 133 +++++++++++++++++++++++++++++++++++++++----
1 files changed, 119 insertions(+), 14 deletions(-)
diff --git a/src/components/Screen/right.vue b/src/components/Screen/right.vue
index 090c5f5..5e9e2f5 100644
--- a/src/components/Screen/right.vue
+++ b/src/components/Screen/right.vue
@@ -1,23 +1,42 @@
<template>
<div class="current">
- <div class="rightContainer" v-show="ChartDisplay">
+ <div class="rightContainer" v-if="ChartDisplay">
<div class="current1">
<div class="aside-title">宸ョ▼绉嶇被</div>
<project-category></project-category>
</div>
- <!-- <div class="current1">
- <div class="aside-title">鏁版嵁鍙婃湇鍔℃彁浜�</div>
- <echart12></echart12>
- </div> -->
- <div class="" >
+ <div class="" style="height: 60%">
<div class="aside-title">鏂囦欢鏍煎紡</div>
- <div class="content" style="height: 542px">
+ <div class="content" style="height: calc(100% - 30px)">
<div class="header">
<div>鏍煎紡</div>
<div>鏁伴噺</div>
</div>
<file-format></file-format>
</div>
+ </div>
+ </div>
+ <div
+ class="rightContainer2"
+ v-if="CourtyDisplay && currentProject =='鍏ㄧ悆椤圭洰'"
+ >
+ <div class="current1">
+ <div class="aside-title">椤圭洰鏁伴噺鏌辩姸鍥�</div>
+ <country-dimension-bar ref="barRef"></country-dimension-bar>
+ </div>
+ <div class="current1">
+ <div class="aside-title">椤圭洰鏁伴噺楗肩姸鍥�</div>
+ <country-dimension-pie ref="pieRef"></country-dimension-pie>
+ </div>
+ </div>
+ <div class="rightContainer2" v-if="CourtyDisplay && currentProject =='鍏ㄥ浗椤圭洰'">
+ <div class="current1">
+ <div class="aside-title">椤圭洰鏁伴噺鏌辩姸鍥�</div>
+ <province-dimension-bar ref="barRef"></province-dimension-bar>
+ </div>
+ <div class="current1">
+ <div class="aside-title">椤圭洰鏁伴噺楗肩姸鍥�</div>
+ <province-dimension-pie ref="pieRef"></province-dimension-pie>
</div>
</div>
<div class="rightarrow">
@@ -31,6 +50,11 @@
import echart13 from "@/components/echart13.vue"
import FileFormat from "@/components/chart/FileFormat.vue"
import ProjectCategory from "../chart/ProjectCategory.vue"
+import CountryDimensionBar from "../chart/CountryDimensionBar.vue"
+import CountryDimensionPie from "../chart/CountryDimensionPie.vue"
+import ProvinceDimensionBar from "../chart/CountryProvinceBar.vue"
+import ProvinceDimensionPie from "../chart/CountryProvincePie.vue"
+import { countCountryDimension, countProvinceDimension } from "@/api/screen.js"
export default {
components: {
@@ -38,23 +62,87 @@
echart12,
echart13,
FileFormat,
- ProjectCategory
+ ProjectCategory,
+ CountryDimensionBar,
+ CountryDimensionPie,
+ ProvinceDimensionBar,
+ ProvinceDimensionPie
},
data() {
return {
ChartDisplay: true,
+ CourtyDisplay: false,
RightImg: require("../../assets/img/Screen/leftArrow.png"),
+ leftMessage: "init",
+ currentProject: "鍏ㄧ悆椤圭洰",
+ countryData: [],
+ provinceData: [],
}
},
+ created() {
+ // this.getCountryData()
+ // this.getProvinceData()
+ },
+ mounted() {
+ // const countryData = this.countryData
+ // const provinceData = this.provinceData
+
+ // this.$refs.barRef.initChart(countryData)
+ // this.$refs.pieRef.initChart(countryData)
+ this.$bus.$on("changeProject", name => {
+ this.currentProject = name
+ })
+ },
methods: {
- ChangeRight() {
- if (this.ChartDisplay) {
- this.RightImg = require("../../assets/img/Screen/rightArrow.png")
- } else {
- this.RightImg = require("../../assets/img/Screen/leftArrow.png")
+ async getCountryData() {
+ const res = await countCountryDimension()
+ if (res.code == 200) {
+ this.countryData = res.result
}
+ },
+ async getProvinceData() {
+ const res = await countProvinceDimension()
+ if (res.code == 200) {
+ this.provinceData = res.result
+ }
+ },
+ ChangeRight() {
+ if (this.leftMessage == "init") {
+ if (this.ChartDisplay) {
+ this.RightImg = require("../../assets/img/Screen/rightArrow.png")
+ } else {
+ this.RightImg = require("../../assets/img/Screen/leftArrow.png")
+ }
+ this.ChartDisplay = !this.ChartDisplay
+ }
+
+ if (this.leftMessage == "projectree") {
+ if (this.ProjectreeDisplay) {
+ this.RightImg = require("../../assets/img/Screen/leftArrow.png")
+ } else {
+ this.RightImg = require("../../assets/img/Screen/rightArrow.png")
+ }
+ this.ProjectreeDisplay = !this.ProjectreeDisplay
+ }
+
this.ChartDisplay = !this.ChartDisplay
this.$parent.ChangeWidth("right")
+ },
+ //鎵撳紑澶у睆宸︿晶鐣岄潰
+ OpenLeftInit() {
+ this.ChartDisplay = true
+ this.CourtyDisplay = false
+ this.leftMessage = "init"
+ // this.OpenLeftInitChart();
+ this.$parent.ChangeWidth("leftTree")
+ },
+
+ //鎵撳紑宸ョ▼鏍�
+ OpenLeftProjectTree() {
+ this.ChartDisplay = false
+ this.CourtyDisplay = true
+ this.leftMessage = "projectree"
+ this.$parent.ChangeWidth("leftTree")
},
},
}
@@ -88,7 +176,24 @@
align-items: center;
justify-content: space-around;
.current1 {
- height: 30%;
+ height: 32%;
+ width: 100%;
+ background: url(../../assets/img/Screen/chartbg.png);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ }
+ }
+ .rightContainer2 {
+ height: 100%;
+ width: calc(100% - 7px);
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ .current1 {
+ margin-top: 10px;
+ margin-bottom: 30px;
+ height: 32%;
width: 100%;
background: url(../../assets/img/Screen/chartbg.png);
background-size: 100% 100%;
--
Gitblit v1.9.3