From 12a7951be31d4c194879f1211f1aa23abf12a8b0 Mon Sep 17 00:00:00 2001 From: zhaoguoqiang <849348323@qq.com> Date: Thu, 29 Jul 2021 17:18:45 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/user.js | 3 +- src/views/Home/home.vue | 67 ++++- src/views/PerformanceData/index.vue | 3 +- src/views/cityDistribution/index.vue | 236 ++++++++++++------ src/views/dataOverview/index.vue | 352 +++++++++++++++++++++++++-- 5 files changed, 562 insertions(+), 99 deletions(-) diff --git a/src/store/user.js b/src/store/user.js index dd5390f..7d2d909 100644 --- a/src/store/user.js +++ b/src/store/user.js @@ -12,7 +12,7 @@ export default { }, clearToken(state) { state.token = '' - window.localStorage.setItem('token', '') + window.localStorage.removeItem('token') }, setUserInfo(state, userInfo) { state.userInfo = userInfo @@ -23,6 +23,7 @@ export default { async getUserInfo({ commit, state }, user) { try { const res = await user.userInfo() + console.log(res,'------res'); if (res.data.code === 0) { commit('setUserInfo', res.data.data) if (state.userInfo.status === 1) { diff --git a/src/views/Home/home.vue b/src/views/Home/home.vue index 7295d51..7c88a7f 100644 --- a/src/views/Home/home.vue +++ b/src/views/Home/home.vue @@ -1,13 +1,68 @@ - + \ No newline at end of file diff --git a/src/views/PerformanceData/index.vue b/src/views/PerformanceData/index.vue index 78f593f..f5cf5e0 100644 --- a/src/views/PerformanceData/index.vue +++ b/src/views/PerformanceData/index.vue @@ -11,7 +11,7 @@
营业额
¥{{money_count_order_money | capitalize}}
-
轻未来阻燃粉：100,000/盒
+
轻未来阻燃粉：{{order_goods_num | capitalize}}/盒
@@ -46,6 +46,7 @@ let list = res.data.month_list_money_count this.year_count_order_money = res.data.year_count_order_money this.money_count_order_money = res.data.money_count_order_money + this.order_goods_num = res.data.order_goods_num for (let key in list) { this.opinionData.push(list[key]) } diff --git a/src/views/cityDistribution/index.vue b/src/views/cityDistribution/index.vue index e7e8474..c40782e 100644 --- a/src/views/cityDistribution/index.vue +++ b/src/views/cityDistribution/index.vue @@ -7,30 +7,50 @@
-

股东：1,000

-

分公司：100,000,000

-

分公司：100,000

-

总代：1,000

+
+

{{item.name}}：{{item.value}}

+

代理城市排名

-
-

广东省

-

1,000

-
-
-

湖南省

-

100,000,00

-
-
-

上海市

-

100,000

-
-
-

四川省

-

1,000

+
+
+
+

1

+

{{item.cityName}}

+
+

{{item.counts | capitalize}}

+
+
+
+

2

+

{{item.cityName}}

+
+

{{item.counts | capitalize}}

+
+
+
+

3

+

{{item.cityName}}

+
+

{{item.counts | capitalize}}

+
+
+
+

4

+

{{item.cityName}}

+
+

{{item.counts |capitalize}}

+
+
+
+

5

+

{{item.cityName}}

+
+

{{item.counts | capitalize}}

+
@@ -46,10 +66,13 @@ return { chinachart: null, chartOption: null, - poxy_sum:'', - city:{}, - cityName:'广东', - cityInfo:{}, + poxy_sum: '', + city: {}, + cityName: '广东', + cityInfo: [], + rankArea: [], + selectArea: [], + regions: [], } }, filters: { @@ -60,16 +83,37 @@ async mounted() { await this.getData() this.drawarea(); - this.aa() + this.aa(this.cityInfo) }, methods: { async getData() { const res = await data.dataDistribution(); - console.log(res,'-----res'); this.poxy_sum = res.data.poxy_sum this.city = res.data.city - console.log(this.city, '---res'); - this.cityInfo = this.city[this.cityName] + this.city[this.cityName] + console.log(this.city[this.cityName], '---this.city[this.cityName]'); + this.cityInfo.push({ + value: this.city[this.cityName].level_id_1, + name: 'vip' + }, { + value: this.city[this.cityName].level_id_2, + name: '总代' + }, { + value: this.city[this.cityName].level_id_3, + name: '合伙人' + }, { + value: this.city[this.cityName].level_id_4, + name: '分公司' + }, { + value: this.city[this.cityName].level_id_5, + name: '股东' + }) + let top5 = res.data.top5 + for (let i in top5) { + top5[i].cityName = i + this.rankArea.push(top5[i]) + } + }, drawarea() { const _this = this @@ -77,12 +121,31 @@ _this.myChinaMap = echarts.init(this.$refs.area) _this.myChinaMap.on('click', function (param) { - console.log(param.name) + console.log(param, '--------------data'); + _this.cityInfo = [] + _this.cityName = param.name + _this.cityInfo.push({ + value: _this.city[_this.cityName].level_id_1, + name: 'vip' + }, { + value: _this.city[_this.cityName].level_id_2, + name: '总代' + }, { + value: _this.city[_this.cityName].level_id_3, + name: '合伙人' + }, { + value: _this.city[_this.cityName].level_id_4, + name: '分公司' + }, { + value: _this.city[_this.cityName].level_id_5, + name: '股东' + }) + _this.aa(_this.cityInfo) }) _this.myChinaMap.setOption({ // 进行相关配置 - backgroundColor: '#fff', - tooltip: {}, // 鼠标移到图里面的浮动提示框 + backgroundColor: '#3C3F50', + // tooltip: {}, // 鼠标移到图里面的浮动提示框 dataRange: { show: false, min: 0, @@ -93,6 +156,7 @@ color: ['orangered', 'yellow', 'lightskyblue'] }, geo: { // 这个是重点配置区 + backgroundColor: '#000', map: 'china', // 表示中国地图 roam: false, // 缩小放大 selectedMode: 'single', @@ -100,35 +164,55 @@ normal: { show: false, // 是否显示对应地名 textStyle: { - color: 'rgba(0,0,0,0.4)' + color: '#fff' } } }, + select: { + label: { + color: '#fff' + }, + itemStyle: { + areaColor: '#729EFF', + }, + }, + regions: [{ + name: "南海诸岛", + value: 0, + itemStyle: { + normal: { + opacity: 0, + label: { + show: false + } + } + } + }, { + name: "广东", + selected: true, + }], itemStyle: { normal: { - borderColor: 'rgba(0, 0, 0, 0.2)' + borderColor: 'rgba(255, 255, 255, 0.2)', + // areaColor: '#fff', + areaColor: 'rgba(255, 255, 255, 0.4)', }, - emphasis: { - areaColor: null, - shadowOffsetX: 0, - shadowOffsetY: 0, - shadowBlur: 20, - borderWidth: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)' - } } - } + }, }) }) }, - aa() { + aa(cityInfo) { var chartBar = echarts.init((this.$refs.chartBar)); var option = { - // title: { - // text: '某站点用户访问来源', - // subtext: '纯属虚构', - // x: 'center' - // }, + title: { + text: this.cityName + '数据占比', + subtext: '纯属虚构', + textStyle: { + color: "#fff", + }, + x: 'center' + }, tooltip: { trigger: 'item', formatter: "{a}
{b} : {c} ({d}%)" @@ -139,27 +223,11 @@ // data: ['直接访问', '邮件营销', '联盟广告'] // }, series: [{ - name: '访问来源', + name: '数据', type: 'pie', radius: '55%', center: ['50%', '60%'], - data: [{ - value: 335, - name: '总代' - }, - { - value: 3101, - name: '分公司' - }, - { - value: 234, - name: '分公司1' - }, - { - value: 2344, - name: '股东' - } - ], + data: cityInfo, itemStyle: { emphasis: { shadowBlur: 10, @@ -178,6 +246,7 @@ \ No newline at end of file