From fce89affcbc15073f2e41b647239b3fff777006b Mon Sep 17 00:00:00 2001
From: TreeWish <1131093754@qq.com>
Date: 星期一, 27 二月 2023 14:20:27 +0800
Subject: [PATCH] 修改切换逻辑
---
src/components/Screen/top.vue | 7 +
src/components/chart/BaseBarChart.vue | 82 ++++++++++++-------
src/components/Screen/left.vue | 53 ++++++++----
src/components/Screen/right.vue | 39 +++++----
4 files changed, 109 insertions(+), 72 deletions(-)
diff --git a/src/components/Screen/left.vue b/src/components/Screen/left.vue
index f643744..1faf631 100644
--- a/src/components/Screen/left.vue
+++ b/src/components/Screen/left.vue
@@ -4,45 +4,46 @@
<img :src="leftImg" @click="ChangeLeft" />
</div>
<div class="leftContainer" v-if="ChartDisplay">
- <div class="current1" id="leftCurrent1">
+ <div class="current1" id="leftCurrent1">
<div class="aside-title">鏁版嵁鐢宠娆℃暟</div>
- <count-data-apply ></count-data-apply>
+ <count-data-apply></count-data-apply>
</div>
- <div class="current1" id="leftCurrent2">
+ <div class="current1" id="leftCurrent2">
<div class="aside-title">鐢ㄦ埛璁块棶閲�</div>
<service-type></service-type>
</div>
- <div class="current1" id="leftCurrent3">
+ <div class="current1" id="leftCurrent3">
<div class="aside-title">椤圭洰瀛樺偍淇℃伅</div>
<data-storage></data-storage>
</div>
</div>
<!-- 鍏ㄧ悆缁熻娆℃暟 -->
<div class="leftContainer" v-if="GlobleChartDisplay">
- <div class="current1" id="leftCurrent1">
+ <div class="current1" id="leftCurrent1">
<div class="aside-title">鏁版嵁鐢宠娆℃暟</div>
- <count-data-apply ></count-data-apply>
+ <base-bar-chart :project="currProject"></base-bar-chart>
+ <!-- <count-data-apply></count-data-apply> -->
</div>
- <div class="current1" id="leftCurrent2">
+ <div class="current1" id="leftCurrent2">
<div class="aside-title">鐢ㄦ埛璁块棶閲�</div>
<service-type></service-type>
</div>
- <div class="current1" id="leftCurrent3">
+ <div class="current1" id="leftCurrent3">
<div class="aside-title">椤圭洰瀛樺偍淇℃伅</div>
<data-storage></data-storage>
</div>
</div>
-<!-- 鍏ㄥ浗椤圭洰缁熻娆℃暟 -->
+ <!-- 鍏ㄥ浗椤圭洰缁熻娆℃暟 -->
<div class="leftContainer" v-if="CountryChartDisplay">
- <div class="current1" id="leftCurrent1">
+ <div class="current1" id="leftCurrent1">
<div class="aside-title">鏁版嵁鐢宠娆℃暟</div>
- <count-data-apply ></count-data-apply>
+ <count-data-apply></count-data-apply>
</div>
- <div class="current1" id="leftCurrent2">
+ <div class="current1" id="leftCurrent2">
<div class="aside-title">鐢ㄦ埛璁块棶閲�</div>
<service-type></service-type>
</div>
- <div class="current1" id="leftCurrent3">
+ <div class="current1" id="leftCurrent3">
<div class="aside-title">椤圭洰瀛樺偍淇℃伅</div>
<data-storage></data-storage>
</div>
@@ -57,26 +58,43 @@
import countDataApply from "@/components/chart/CountDataApply.vue"
import ServiceType from "../chart/ServiceType.vue"
import DataStorage from "../chart/DataStorage.vue"
+import BaseBarChart from "../chart/BaseBarChart.vue"
export default {
components: {
ProjectTree,
countDataApply,
ServiceType,
DataStorage,
+ BaseBarChart,
},
data() {
return {
leftMessage: "init",
ChartDisplay: true,
ProjectreeDisplay: false,
- GlobleChartDisplay:false,
- CountryChartDisplay:false,
+ GlobleChartDisplay: false,
+ CountryChartDisplay: false,
leftImg: require("../../assets/img/Screen/rightArrow.png"),
+ currProject: "鍏ㄧ悆椤圭洰",
}
},
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
+
+ // }
+ })
},
methods: {
ChangeLeft() {
@@ -107,10 +125,7 @@
this.leftMessage = "init"
// this.OpenLeftInitChart();
this.$parent.ChangeWidth("leftView")
-
- this.$bus.$on("changeProject", name => {
-
- })
+ this.GlobleChartDisplay = false
},
//鎵撳紑宸ョ▼鏍�
diff --git a/src/components/Screen/right.vue b/src/components/Screen/right.vue
index 47b45a5..6b74147 100644
--- a/src/components/Screen/right.vue
+++ b/src/components/Screen/right.vue
@@ -17,12 +17,11 @@
</div>
<div class="current1">
<div class="aside-title">鏈嶅姟璁块棶娆℃暟</div>
-
<Service-Get></Service-Get>
</div>
</div>
- <!-- <div
+ <div
class="rightContainer2"
v-if="CourtyDisplay && currentProject =='鍏ㄧ悆椤圭洰'"
>
@@ -46,7 +45,7 @@
<div class="aside-title">椤圭洰鏁伴噺楗肩姸鍥�</div>
<province-dimension-pie ref="pieRef"></province-dimension-pie>
</div>
- </div> -->
+ </div>
<div class="rightarrow">
<img :src="RightImg" @click="ChangeRight" />
</div>
@@ -93,6 +92,8 @@
mounted() {
this.$bus.$on("changeProject", name => {
this.currentProject = name
+ this.CourtyDisplay = true
+ this.ChartDisplay = false
})
},
methods: {
@@ -172,23 +173,23 @@
background-repeat: no-repeat;
}
}
- // .rightContainer2 {
- // height: 100%;
- // width: calc(100% - 45px);
+ .rightContainer2 {
+ height: 100%;
+ width: calc(100% - 45px);
- // display: flex;
- // flex-direction: column;
- // align-items: center;
- // .current1 {
- // margin-top: 10px;
- // margin-bottom: 30px;
- // height: 30%;
- // width: 100%;
- // background: url(../../assets/img/Screen/chartbg.png);
- // background-size: 100% 100%;
- // background-repeat: no-repeat;
- // }
- // }
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ .current1 {
+ margin-top: 10px;
+ margin-bottom: 30px;
+ height: 30%;
+ width: 100%;
+ background: url(../../assets/img/Screen/chartbg.png);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ }
+ }
.content {
width: 100%;
background: url(../../assets/img/Screen/contentBg.png);
diff --git a/src/components/Screen/top.vue b/src/components/Screen/top.vue
index 8355adb..e10734b 100644
--- a/src/components/Screen/top.vue
+++ b/src/components/Screen/top.vue
@@ -1,7 +1,7 @@
<template>
<div class="top">
<div class="topleft">
- <!-- <div
+ <div
class="topleft1"
:class="currView == 'chart' ? 'active' : ''"
@click="OpenInitChart"
@@ -9,7 +9,7 @@
<img src="../../assets/img/Screen/bigST.png" />
<span>澶у睆瑙嗗浘</span>
</div>
- <div
+ <!-- <div
class="topleft1"
@click="OpenProjectree"
:class="currView == 'tree' ? 'active' : ''"
@@ -87,7 +87,7 @@
display: flex;
flex-direction: row;
align-items: flex-end;
- justify-content: space-around;
+ // justify-content: space-around;
cursor: pointer;
.topleft1 {
width: 127px;
@@ -99,6 +99,7 @@
background-size: 100% 100%;
display: flex;
align-items: center;
+ margin-left: 10%;
}
.active {
background-image: url(../../assets/img/Screen/btnc.png);
diff --git a/src/components/chart/BaseBarChart.vue b/src/components/chart/BaseBarChart.vue
index 6a6cbfc..af16c00 100644
--- a/src/components/chart/BaseBarChart.vue
+++ b/src/components/chart/BaseBarChart.vue
@@ -4,20 +4,20 @@
<script>
import * as echarts from "echarts"
-import { countCountryDimension } from "@/api/screen.js"
+import { countCountryDimension, countProvinceDimension } from "@/api/screen.js"
export default {
props: {
width: {
type: String,
- default: '100%'
+ default: "100%",
},
height: {
type: String,
- default: '100%'
+ default: "100%",
},
autoResize: {
type: Boolean,
- default: true
+ default: true,
},
// option: {
// type: Object,
@@ -25,13 +25,17 @@
// },
type: {
type: String,
- default: 'canvas'
- }
+ default: "canvas",
+ },
+ project: {
+ type: String,
+ default: "鍏ㄥ浗椤圭洰",
+ },
},
data() {
return {
chart: null,
- dataList: []
+ dataList: [],
}
},
computed: {
@@ -89,7 +93,8 @@
data = this.dataList
}
data.forEach(item => {
- xAxisData.push(item.country)
+ let name = item.province || item.country
+ xAxisData.push(name)
yAxisData.push(item.count)
})
let option = {
@@ -234,28 +239,42 @@
},
],
}
+
return option
- }
+ },
},
watch: {
- // option: {
- // deep: true,
- // handler(newVal) {
- // this.setOptions(newVal)
- // }
- // },
- currentProject: {
+ option: {
deep: true,
handler(newVal) {
- this.initData()
+ this.setOptions(newVal)
+ },
+ },
+ project: {
+ deep: true,
+ handler(newVal) {
+ let requsetFn = null
+ switch (newVal) {
+ case "鍏ㄧ悆椤圭洰":
+ requsetFn = countCountryDimension
+ break
+ case "鍏ㄥ浗椤圭洰":
+ requsetFn = countProvinceDimension
+ break
+
+ default:
+ break
+ }
+ this.initData(requsetFn)
this.setOptions(this.option)
- }
- }
+ },
+ },
},
mounted() {
+ this.initData()
this.initChart()
if (this.autoResize) {
- window.addEventListener('resize', this.resizeHandler)
+ window.addEventListener("resize", this.resizeHandler)
}
},
beforeDestroy() {
@@ -263,7 +282,7 @@
return
}
if (this.autoResize) {
- window.removeEventListener('resize', this.resizeHandler)
+ window.removeEventListener("resize", this.resizeHandler)
}
this.chart.dispose()
this.chart = null
@@ -273,14 +292,14 @@
this.chart.resize()
},
initChart() {
- this.chart = echarts.init(this.$refs.chart, '', {
- renderer: this.type
+ this.chart = echarts.init(this.$refs.chart, "", {
+ renderer: this.type,
})
this.chart.setOption(this.option)
- this.chart.on('click', this.handleClick)
+ this.chart.on("click", this.handleClick)
},
handleClick(params) {
- this.$emit('click', params)
+ this.$emit("click", params)
},
setOptions(option) {
this.clearChart()
@@ -294,12 +313,13 @@
},
clearChart() {
this.chart && this.chart.clear()
- }
- },
- methods: {
- async initData() {
-
-
+ },
+ async initData(requsetFn = countCountryDimension) {
+ const res = await requsetFn()
+ if (res.code == 200) {
+ this.dataList = res.result
+ console.log("requsetFn", res)
+ }
},
},
}
--
Gitblit v1.9.3