Skip to content

Commit 006d0dc

Browse files
icssoaicssoa
committed
添加 cl-process 定位处理，更新 vue-echarts@6
1 parent d0b5aca commit 006d0dc

File tree

9 files changed

+61
-64
lines changed

9 files changed

+61
-64
lines changed

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"inspect": "vue inspect --mode=production > output.js"
1010
},
1111
"dependencies": {
12+
"@vue/composition-api": "^1.0.0-rc.5",
1213
"axios": "^0.21.1",
1314
"cl-admin": "^1.5.1",
1415
"cl-admin-crud": "^1.6.4",
@@ -17,7 +18,7 @@
1718
"codemirror": "^5.59.4",
1819
"core-js": "^3.6.5",
1920
"dayjs": "^1.10.4",
20-
"echarts": "^4.5.0",
21+
"echarts": "^5.0.2",
2122
"element-ui": "^2.15.1",
2223
"js-beautify": "^1.13.5",
2324
"mockjs": "^1.1.0",
@@ -30,7 +31,7 @@
3031
"vue": "^2.6.11",
3132
"vue-codemirror": "^4.0.6",
3233
"vue-cron": "^1.0.9",
33-
"vue-echarts": "^5.0.0-beta.0",
34+
"vue-echarts": "^6.0.0-rc.3",
3435
"vue-router": "^3.2.0",
3536
"vuedraggable": "^2.24.3",
3637
"vuex": "^3.4.0"

‎src/cool/modules/base/common/resize.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ const lock = {
66
};
77

88
function resize() {
9+
// 更新数据
10+
store.commit("SET_BROWSER");
11+
912
const { browser, menuCollapse, app } = store.getters;
1013

1114
if (browser.isMini) {
@@ -41,8 +44,6 @@ function resize() {
4144
lock.menuCollapse = null;
4245
}
4346
}
44-
45-
store.commit("SET_BROWSER");
4647
}
4748

4849
window.onload = function() {

‎src/cool/modules/base/components/process/index.vue

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,20 @@
44
<i class="el-icon-arrow-left"></i>
55
</div>
66

7-
<div class="app-process__scroller">
7+
<div class="app-process__scroller" ref="scroller">
88
<div
9-
class="block"
9+
class="app-process__item"
1010
v-for="(item, index) in processList"
1111
:key="index"
12+
:ref="`item-${index}`"
1213
:class="{ active: item.active }"
1314
:data-index="index"
14-
@click="onTap(item)"
15+
@click="onTap(item, index)"
1516
@contextmenu.stop.prevent="openCM($event, item)"
1617
>
1718
<span>{{ item.label }}</span>
1819

19-
<i
20-
class="el-icon-close"
21-
v-if="index > 0"
22-
:class="{ active: index > 0 }"
23-
@click.stop="onDel(index)"
24-
></i>
20+
<i class="el-icon-close" v-if="index > 0" @click.stop="onDel(index)"></i>
2521
</div>
2622
</div>
2723

@@ -43,10 +39,17 @@ export default {
4339
...mapGetters(["processList"])
4440
},
4541
42+
watch: {
43+
"$route.path"(val) {
44+
this.adScroll(this.processList.findIndex(e => e.value === val) || 0);
45+
}
46+
},
47+
4648
methods: {
4749
...mapMutations(["ADD_PROCESS", "DEL_PROCESS", "SET_PROCESS"]),
4850
49-
onTap(item) {
51+
onTap(item, index) {
52+
this.adScroll(index);
5053
this.$router.push(item.value);
5154
},
5255
@@ -100,9 +103,23 @@ export default {
100103
}
101104
},
102105
106+
adScroll(index) {
107+
const el = this.$refs[`item-${index}`][0];
108+
109+
if (el) {
110+
this.scrollTo(el.offsetLeft + el.clientWidth - this.$refs["scroller"].clientWidth);
111+
}
112+
},
113+
103114
toScroll(f) {
104-
const scroller = this.$el.querySelector(".app-process__scroller");
105-
scroller.scrollTo(scroller.scrollLeft + (f ? -100 : 100), 0);
115+
this.scrollTo(this.$refs["scroller"].scrollLeft + (f ? -100 : 100));
116+
},
117+
118+
scrollTo(left) {
119+
this.$refs["scroller"].scrollTo({
120+
left,
121+
behavior: "smooth"
122+
});
106123
}
107124
}
108125
};
@@ -149,7 +166,7 @@ export default {
149166
}
150167
}
151168
152-
.block {
169+
&__item {
153170
display: inline-flex;
154171
align-items: center;
155172
border-radius: 3px;

‎src/main.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import Vue from "vue";
2-
import App from "./App.vue";
2+
import VueECharts from "vue-echarts";
33
import { bootstrap } from "cl-admin";
4+
import { app } from "@/config/env";
5+
import App from "./App.vue";
46
import "./element";
57

68
// 路由
@@ -12,12 +14,16 @@ import store from "@/store";
1214
// mock
1315
import "@/mock";
1416

17+
// echarts 可视图表
18+
Vue.component("v-chart", VueECharts);
19+
1520
// 阻止显示生产模式的消息
1621
Vue.config.productionTip = false;
1722

1823
// 配置
1924
bootstrap()
2025
.then(() => {
26+
// 加载菜单、用户信息
2127
store.dispatch("appLoad");
2228

2329
new Vue({
@@ -27,5 +33,5 @@ bootstrap()
2733
}).$mount("#app");
2834
})
2935
.catch(err => {
30-
console.error("COOL-ADMIN 启动失败", err);
36+
console.error(`${app.name} 启动失败`, err);
3137
});

‎src/views/home/components/category-ratio.vue

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,16 @@
55
</div>
66

77
<div class="category-ratio__container">
8-
<vue-echarts :options="chartOptions" autoresize></vue-echarts>
8+
<v-chart :option="chartOption" autoresize></v-chart>
99
</div>
1010
</div>
1111
</template>
1212

1313
<script>
14-
import VueEcharts from "vue-echarts";
15-
import "echarts";
16-
1714
export default {
18-
components: {
19-
VueEcharts
20-
},
21-
2215
data() {
2316
return {
24-
chartOptions: {
17+
chartOption: {
2518
tooltip: {
2619
trigger: "item",
2720
formatter: "{a} <br/>{b}: {c} ({d}%)"

‎src/views/home/components/count-paid.vue

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</div>
88

99
<div class="card__container">
10-
<vue-echarts :options="chartOptions" autoresize></vue-echarts>
10+
<v-chart :option="chartOption" autoresize></v-chart>
1111
</div>
1212

1313
<div class="card__footer">
@@ -19,16 +19,10 @@
1919
</template>
2020

2121
<script>
22-
import VueEcharts from "vue-echarts";
23-
2422
export default {
25-
components: {
26-
VueEcharts
27-
},
28-
2923
data() {
3024
return {
31-
chartOptions: {
25+
chartOption: {
3226
grid: {
3327
left: "10%",
3428
top: 0,

‎src/views/home/components/count-views.vue

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</div>
88

99
<div class="card__container">
10-
<vue-echarts :options="chartOptions" autoresize></vue-echarts>
10+
<v-chart :option="chartOption" autoresize></v-chart>
1111
</div>
1212

1313
<div class="card__footer">
@@ -19,17 +19,12 @@
1919
</template>
2020

2121
<script>
22-
import VueEcharts from "vue-echarts";
23-
import echarts from "echarts";
22+
import * as echarts from "echarts";
2423
2524
export default {
26-
components: {
27-
VueEcharts
28-
},
29-
3025
data() {
3126
return {
32-
chartOptions: {
27+
chartOption: {
3328
grid: {
3429
left: 0,
3530
top: 0,

‎src/views/home/components/hot-search.vue

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
</div>
2020
</div>
2121

22-
<vue-echarts :options="chartOptions" autoresize></vue-echarts>
22+
<v-chart :option="chartOption" autoresize></v-chart>
2323
</div>
2424
</el-col>
2525

@@ -36,7 +36,7 @@
3636
</div>
3737
</div>
3838

39-
<vue-echarts :options="chartOptions" autoresize></vue-echarts>
39+
<v-chart :option="chartOption" autoresize></v-chart>
4040
</div>
4141
</el-col>
4242
</el-row>
@@ -89,17 +89,12 @@
8989
</template>
9090

9191
<script>
92-
import VueEcharts from "vue-echarts";
93-
import echarts from "echarts";
92+
import * as echarts from "echarts";
9493
9594
export default {
96-
components: {
97-
VueEcharts
98-
},
99-
10095
data() {
10196
return {
102-
chartOptions: {
97+
chartOption: {
10398
grid: {
10499
left: 0,
105100
top: 0,

‎src/views/home/components/tab-chart.vue

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,18 @@
1010
</div>
1111

1212
<div class="tab-chart__container">
13-
<vue-echarts :options="chartOptions" autoresize></vue-echarts>
13+
<v-chart :option="chartOption" autoresize></v-chart>
1414
</div>
1515
</div>
1616
</template>
1717

1818
<script>
19-
import VueEcharts from "vue-echarts";
2019
import { mapGetters } from "vuex";
2120
2221
export default {
23-
components: {
24-
VueEcharts
25-
},
26-
2722
data() {
2823
return {
29-
chartOptions: {
24+
chartOption: {
3025
grid: {
3126
top: "20px",
3227
bottom: "30px",
@@ -113,19 +108,19 @@ export default {
113108
"browser.isMini": {
114109
immediate: true,
115110
handler(v) {
116-
this.chartOptions.series.map(e => {
111+
this.chartOption.series.map(e => {
117112
e.barWidth = v ? 15 : 25;
118113
});
119114
}
120115
}
121116
},
122117
123118
created() {
124-
this.chartOptions.xAxis.data = new Array(12).fill(1).map((e, i) => i + 1 + "月");
125-
this.chartOptions.series[0].data = new Array(12)
119+
this.chartOption.xAxis.data = new Array(12).fill(1).map((e, i) => i + 1 + "月");
120+
this.chartOption.series[0].data = new Array(12)
126121
.fill(1)
127122
.map(() => parseInt(Math.random() * 100));
128-
this.chartOptions.series[1].data = new Array(12).fill(100);
123+
this.chartOption.series[1].data = new Array(12).fill(100);
129124
}
130125
};
131126
</script>

0 commit comments

Comments
 (0)