From fb212223fdc2f692896da5483ba2b1a8aec22d5f Mon Sep 17 00:00:00 2001 From: TreeWish <1131093754@qq.com> Date: 星期一, 27 二月 2023 19:15:20 +0800 Subject: [PATCH] 修改基础数据 --- src/components/Screen/right.vue | 131 ++++++++++++++++++++++++++++++++----------- 1 files changed, 96 insertions(+), 35 deletions(-) diff --git a/src/components/Screen/right.vue b/src/components/Screen/right.vue index fef52f4..99d9bac 100644 --- a/src/components/Screen/right.vue +++ b/src/components/Screen/right.vue @@ -1,62 +1,88 @@ <template> <div class="current"> - <div class="rightContainer" v-if="ChartDisplay"> + <div class="rightContainer" v-if="currentDisplay == '澶у睆' && ChartDisplay"> <div class="current1"> <div class="aside-title">椤圭洰缁熻</div> <project-category></project-category> </div> <div class="current1"> <div class="aside-title">鏁版嵁缁熻</div> - <!-- <div class="content" style="height:30px"> - <div class="header"> - <div>鏍煎紡</div> - <div>鏁伴噺</div> - </div> - </div> --> - <file-format></file-format> + <visit-count></visit-count> </div> <div class="current1"> <div class="aside-title">鏈嶅姟璁块棶娆℃暟</div> <Service-Get></Service-Get> </div> </div> - - <div - class="rightContainer2" - v-if="CourtyDisplay && currentProject == '鍏ㄧ悆椤圭洰'" - > + <!-- 鍏ㄧ悆銆佸叏鍥介」鐩� --> + <div class="rightContainer" v-if="currentDisplay == '椤圭洰'"> <div class="current1"> - <div class="aside-title">椤圭洰鏁伴噺鏌辩姸鍥�</div> + <div class="aside-title">绔欏満搴ф暟</div> <!-- <country-dimension-bar ref="barRef"></country-dimension-bar> --> <base-bar-chart :project="currentProject"></base-bar-chart> </div> <div class="current1"> - <div class="aside-title">椤圭洰鏁伴噺楗肩姸鍥�</div> - <country-dimension-pie ref="pieRef"></country-dimension-pie> + <div class="aside-title">闃�瀹ゅ骇鏁�</div> + <!-- <base-pie-chart :project="currentProject"></base-pie-chart> --> + <country-dimension-pie + v-if="currentProject == '鍏ㄧ悆椤圭洰'" + ref="pieRef" + ></country-dimension-pie> + <province-dimension-pie v-else ref="pieRef"></province-dimension-pie> </div> <div class="current1"> - <div class="aside-title">椤圭洰鏁伴噺楗肩姸鍥�</div> - <dv-capsule-chart - :config="config" - style="width: 300px; height: 200px" - /> + <div class="aside-title">椤圭洰鏁版嵁浣跨敤鎯呭喌</div> + <dv-capsule-chart :config="config" style="width: 360px; height: 85%" /> </div> </div> - - <div - class="rightContainer2" - v-if="CourtyDisplay && currentProject == '鍏ㄥ浗椤圭洰'" - > + <!-- 鍏ㄥ浗銆佸叏鐞冪缃� --> + <div class="rightContainer" v-if="currentDisplay == '绠$綉'"> <div class="current1"> - <div class="aside-title">椤圭洰鏁伴噺鏌辩姸鍥�</div> - <!-- <province-dimension-bar ref="barRef"></province-dimension-bar> --> + <div class="aside-title">绔欏満搴ф暟</div> + <!-- <country-dimension-bar ref="barRef"></country-dimension-bar> --> <base-bar-chart :project="currentProject"></base-bar-chart> </div> <div class="current1"> - <div class="aside-title">椤圭洰鏁伴噺楗肩姸鍥�</div> - <province-dimension-pie ref="pieRef"></province-dimension-pie> + <div class="aside-title">闃�瀹ゅ骇鏁�</div> + <dv-active-ring-chart + :config="pieconfig" + style="width: 377px; height: 85%" + /> + </div> + <div class="current1"> + <div class="aside-title">涓嶅悓杈撻�佷粙璐ㄧ閬撴潯鏁�</div> + <dv-conical-column-chart + :config="config" + style="width: 377px; height: 85%" + /> </div> </div> + <!-- 鍗曚釜宸ョ▼ --> + <div class="rightContainer" v-if="currentDisplay == '宸ョ▼'"> + <div class="current1"> + <div class="aside-title">鏁版嵁瀛樺偍閲�</div> + <base-line-chart :project="currentProject"></base-line-chart> + </div> + <div class="current1"> + <div class="aside-title">鏁版嵁涓嬭浇娆℃暟</div> + <base-pie-chart height="90%" :project="currentProject"></base-pie-chart> + </div> + <div class="current1"> + <div class="aside-title">缁熻涓嶅悓杈撻�佷粙璐ㄧ閬撴潯鏁�</div> + <div class="content" style="height: 30px"> + <div class="header"> + <div>鏍煎紡</div> + <div>鏁伴噺</div> + </div> + </div> + <file-format></file-format> + <!-- <dv-conical-column-chart + :config="config" + style="width: 377px; height: 85" + /> --> + </div> + </div> + <div class="rightarrow"> <img :src="RightImg" @click="ChangeRight" /> </div> @@ -76,7 +102,7 @@ import BaseBarChart from "../chart/BaseBarChart.vue" import BaseLineChart from "../chart/BaseLineChart.vue" import BasePieChart from "../chart/BasePieChart .vue" - +import VisitCount from "../chart/VisitCount.vue" import { countCountryDimension, countProvinceDimension } from "@/api/screen.js" export default { @@ -94,14 +120,17 @@ BaseBarChart, BaseLineChart, BasePieChart, + VisitCount, }, data() { return { ChartDisplay: true, CourtyDisplay: false, + PipeDisPlay: false, RightImg: require("../../assets/img/Screen/leftArrow.png"), leftMessage: "init", currentProject: "鍏ㄧ悆椤圭洰", + currentDisplay: "澶у睆", countryData: [], provinceData: [], config: { @@ -127,17 +156,47 @@ value: 66, }, ], - unit: "鍗曚綅", showValue: true, + }, + pieconfig: { + data: [ + { + name: "鍛ㄥ彛", + value: 55, + }, + { + name: "鍗楅槼", + value: 120, + }, + { + name: "瑗垮场", + value: 78, + }, + { + name: "椹婚┈搴�", + value: 66, + }, + { + name: "鏂颁埂", + value: 80, + }, + ], + lineWidth: 10, }, } }, mounted() { + this.OpenLeftInit() this.$bus.$on("changeProject", name => { + if (name.includes("鍏ㄧ悆绠$綉") || name.includes("鍏ㄥ浗绠$綉")) { + this.currentDisplay = "绠$綉" + } else if (name.includes("鍏ㄧ悆椤圭洰") || name.includes("鍏ㄥ浗椤圭洰")) { + this.currentDisplay = "椤圭洰" + } else { + this.currentDisplay = "宸ョ▼" + } this.currentProject = name - this.CourtyDisplay = true - this.ChartDisplay = false }) }, methods: { @@ -165,6 +224,7 @@ }, //鎵撳紑澶у睆宸︿晶鐣岄潰 OpenLeftInit() { + this.currentDisplay = "澶у睆" this.ChartDisplay = true this.CourtyDisplay = false this.leftMessage = "init" @@ -182,7 +242,7 @@ }, } </script> -<style lang="less" sc> +<style lang="less"> .current { height: 100%; width: 100%; @@ -190,6 +250,7 @@ flex-direction: row; align-items: center; justify-content: center; + .rightarrow { width: 36px; height: 100%; -- Gitblit v1.9.3