Skip to content

B
bill-manager-ui
Commit 21364fc1 authored by “yiyousong”'s avatar “yiyousong”
Browse files
Options

perf: 优化

parent daebc9b5
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1070 additions and 231 deletions
admin_2/package.json
View file @ 21364fc1
......@@ -13,7 +13,7 @@
"axios": "^1.4.0",
"core-js": "^3.8.3",
"crypto-js": "^4.1.1",
"echarts": "^5.4.3",
"echarts": "^5.5.1",
"element-ui": "^2.15.14",
"js-export-excel": "^1.1.4",
"lodash-es": "^4.17.21",
......
admin_2/src/components/autoRegister/YTable.vue
View file @ 21364fc1
......@@ -23,6 +23,7 @@
:fixed="v.fixed"
:formatter="v.formatter"
:min-width="v.minWidth"
:show-overflow-tooltip="v.showOverflowTooltip"
>
</el-table-column>
</el-table>
......
admin_2/src/layouts/Layouts.vue
View file @ 21364fc1
......@@ -22,21 +22,28 @@
</template>
<script>
import { mapMutations } from "vuex";
import { mapMutations, mapActions } from "vuex";
import Header from "./components/Header.vue";
import { getSiteTree } from "@/api/site";
import storage from "@/utils/storage";
export default {
components: {
Header,
},
data() {
return {};
return {
siteId: storage.get(2, "siteId"),
};
},
created() {
this.getSiteTree();
this.getBusiness(this.siteId);
this.getDeptList(this.siteId);
this.getWindowList(this.siteId);
},
methods: {
...mapMutations("user", ["SET_areaTree"]),
...mapActions("user", ["getBusiness", "getDeptList", "getWindowList"]),
// 获取个人站点树
async getSiteTree() {
let res = await getSiteTree({
......
admin_2/src/pages/engine/Engine.vue
View file @ 21364fc1
......@@ -57,6 +57,13 @@ export default {
],
};
},
watch: {
"$route.path"() {
this.$nextTick(() => {
this.handleDate();
});
},
},
methods: {
handleDate() {
this.$refs.Page.getDate(this.time);
......@@ -72,11 +79,11 @@ export default {
}
95% {
transform: rotate(20turn);
transform: rotate(30turn);
}
100% {
transform: rotate(20turn);
transform: rotate(30turn);
}
}
.engine {
......@@ -138,6 +145,6 @@ export default {
}
.engine-img {
// cubic-bezier(1, 0.05, 0.1, 1)
animation: rotate 5s cubic-bezier(1, -0.01, 0, 0.85) infinite;
animation: rotate 5s cubic-bezier(1, -0.01, 0, 0.97) infinite;
}
</style>
admin_2/src/pages/engine/EvaluateSystem.vue
View file @ 21364fc1
This diff is collapsed.
admin_2/src/pages/engine/QueueUpSystem.vue
View file @ 21364fc1
This diff is collapsed.
admin_2/src/pages/engine/components/DoubleTable.vue
View file @ 21364fc1
<template>
<div class="flex h-full w-full flex-col gap-2">
<div class="flex h-full w-full flex-col gap-2" v-loading="loading">
<div class="flex w-full items-center justify-between">
<div class="title">
{{ title }}
</div>
<div class="flex gap-4">
<el-button type="primary" size="small">导出</el-button>
<el-input
<el-button type="primary" size="small" @click="handleExport"
>导出</el-button
>
<el-select
v-if="type == 'business'"
size="small"
filterable
v-model="form.businessName"
placeholder="请选择业务"
clearable
>
<el-option
v-for="v in businessList"
:key="v.id"
:label="v.businessName"
:value="v.businessName"
>
</el-option>
</el-select>
<el-select
v-else-if="type == 'dept'"
size="small"
filterable
v-model="form.deptName"
placeholder="请选择部门"
clearable
>
<el-option
v-for="v in deptList"
:key="v.id"
:label="v.name"
:value="v.name"
>
</el-option>
</el-select>
<el-select
v-else-if="type == 'window'"
size="small"
filterable
v-model="form.windowNum"
placeholder="请选择窗口"
clearable
>
<el-option
v-for="v in windowList"
:key="v.id"
:label="v.name + '-' + v.fromnum"
:value="v.fromnum"
>
</el-option>
</el-select>
<el-button
type="primary"
size="small"
style="width: 250px"
:placeholder="placeholder"
v-model="searchVal"
></el-input>
<el-button type="primary" size="small">搜索</el-button>
v-if="type != 'hall'"
@click="handleSearch"
>搜索</el-button
>
</div>
</div>
<div class="grid w-full grid-cols-2">
<div
:class="[
'w-full',
'grid',
data.length > 5 ? 'grid-cols-2' : 'grid-cols-1',
]"
>
<y-table
size="small"
border
:column="column"
:column="leftColumn"
:data="letTableData"
></y-table>
<y-table
v-if="data.length > 5"
v-show="data.length > 5"
size="small"
border
:column="column"
:column="rightColumn"
:data="rightTableData"
></y-table>
</div>
......@@ -35,24 +91,44 @@
</template>
<script>
import { mapState } from "vuex";
import storage from "@/utils/storage";
export default {
props: {
data: {
required: true,
type: Array,
default: () => [],
},
type: {
required: true,
type: String,
default: "",
},
loading: {
type: Boolean,
default: false,
},
current: {
required: true,
type: Number,
default: 1,
},
size: {
required: true,
type: Number,
default: 10,
},
column: {
required: true,
type: Array,
default: () => [],
},
title: {
required: true,
type: String,
default: "",
},
placeholder: {
type: String,
default: "请输入业务名称关键字搜索",
},
border: {
type: Boolean,
default: true,
......@@ -61,24 +137,66 @@ export default {
data() {
return {
searchVal: "",
siteId: storage.get(2, "siteId"),
form: {
businessName: "",
deptName: "",
windowNum: "",
},
};
},
computed: {
...mapState("user", ["businessList", "deptList", "windowList"]),
leftColumn() {
let index = {
label: "排序",
type: "index",
lign: "center",
index: (index) => {
return (this.current - 1) * this.size + index + 1;
},
};
return [index, ...this.column];
},
rightColumn() {
let index = {
label: "排序",
type: "index",
lign: "center",
index: (index) => {
return (this.current - 1) * this.size + index + 6;
},
};
return [index, ...this.column];
},
letTableData() {
let arr = this.data.slice(0, 5);
while (arr.length < 5) {
arr.push(null);
if (arr.length) {
while (arr.length < 5) {
arr.push(null);
}
}
return arr;
},
rightTableData() {
let arr = this.data.slice(5, 10);
while (arr.length < 5) {
arr.push(null);
if (arr.length) {
while (arr.length < 5) {
arr.push(null);
}
}
return arr;
},
},
created() {},
methods: {
handleSearch() {
this.$emit("search", this.type, this.form);
},
handleExport() {
this.$emit("export", this.type, this.form);
},
},
};
</script>
......
admin_2/src/pages/home/Home.vue
View file @ 21364fc1
......@@ -17,7 +17,7 @@
:value="homeData.totalCount"
></el-statistic>
<div class="text-[14px] text-[#424E65]">
数仓最近汇聚时间：2024-06-26 23:59:59
数仓最近汇聚时间：{{ newTime }}
</div>
</div>
</div>
......@@ -37,7 +37,7 @@
近30日数据总量趋势
</div>
<div class="echarts-box">
<LineEchart :dataset="dataset"></LineEchart>
<LineEchart :dataset="totalDataset"></LineEchart>
</div>
</div>
<div class="flex h-full w-full flex-col">
......@@ -45,7 +45,7 @@
近30日排队数据总量趋势
</div>
<div class="echarts-box">
<LineEchart :dataset="dataset" color="#1DCFB4"></LineEchart>
<LineEchart :dataset="phDataset" color="#1DCFB4"></LineEchart>
</div>
</div>
<div class="flex h-full w-full flex-col">
......@@ -53,7 +53,7 @@
近30日评价数据总量趋势
</div>
<div class="echarts-box">
<LineEchart :dataset="dataset" color="#F57520"></LineEchart>
<LineEchart :dataset="pjDataset" color="#F57520"></LineEchart>
</div>
</div>
</div>
......@@ -84,26 +84,17 @@ export default {
},
data() {
return {
dataset: {
totalDataset: {
dimensions: ["name", "value"],
source: [
{
name: "06-1",
value: 900000,
},
{
name: "06-2",
value: 800000,
},
{
name: "06-3",
value: 700000,
},
{
name: "06-4",
value: 900000,
},
],
source: [],
},
phDataset: {
dimensions: ["name", "value"],
source: [],
},
pjDataset: {
dimensions: ["name", "value"],
source: [],
},
areaList: [
{
......@@ -186,16 +177,38 @@ export default {
},
],
homeData: {},
newTime: this.$moment().format("YYYY-MM-DD HH:mm:ss"),
};
},
created() {
this.getHomeData();
},
mounted() {},
methods: {
async getHomeData() {
let res = await getHomeData();
if (res.data.code == 1) {
this.homeData = res.data.data;
let { data } = res.data;
let { thirtyPhStatList, thirtyPjStatList, thirtyStatList } = data;
this.homeData = data;
this.totalDataset.source = thirtyStatList.map((item) => {
return {
name: `${item.month}-${item.day}`,
value: item.count,
};
});
this.phDataset.source = thirtyPhStatList.map((item) => {
return {
name: `${item.month}-${item.day}`,
value: item.phCount,
};
});
this.pjDataset.source = thirtyPjStatList.map((item) => {
return {
name: `${item.month}-${item.day}`,
value: item.pjCount,
};
});
}
},
},
......
admin_2/src/pages/home/components/LineEchart.vue
View file @ 21364fc1
......@@ -44,7 +44,12 @@ export default {
initChart(dataset) {
let data = dataset.source || [];
let dom = this.$refs.MyEchart;
this.myChart = this.$echarts.init(dom);
// 获取或者初始化 ECharts 实例
this.myChart = this.$echarts.getInstanceByDom(dom);
if (!this.myChart) {
this.myChart = this.$echarts.init(dom);
}
let option = {
grid: {
top: "15%",
......@@ -52,7 +57,6 @@ export default {
right: "5%",
bottom: "12%",
},
// 鼠标移入信息查看
tooltip: {
trigger: "axis",
borderWidth: 0,
......@@ -62,16 +66,17 @@ export default {
}<br/><div style='margin-top:4px;padding:4px 8px;background:${this.hexToRgba(
this.color,
0.1
)};color:${this.color}';border-radius:10px>
<span style='margin-right:10px'>${params[0].seriesName}</span>
${params[0].value.value}</div>`;
)};color:${
this.color
};border-radius:4px'><span style='margin-right:20px'>${
params[0].seriesName
}</span>${params[0].value.value}</div>`;
},
},
dataZoom: [
{
// 开启数据平移
type: "inside",
show: true,
show: false,
startValue: 0,
endValue: this.endValue - 1,
},
......@@ -106,7 +111,7 @@ export default {
},
yAxis: {
type: "value",
splitNumber: 3, // 配置 Y 轴数值间隔
splitNumber: 3,
axisLabel: {
color: "#666",
},
......@@ -168,10 +173,16 @@ export default {
],
dataset,
};
this.myChart.setOption(option);
// 适配
window.addEventListener("resize", this.adapterEcharts);
// 清除现有定时器，防止多次调用
clearInterval(this.timer);
// 定义并启动定时器
this.timer = setInterval(() => {
if (option.dataZoom[0].endValue >= data.length - 1) {
option.dataZoom[0].endValue = this.endValue - 1;
......@@ -180,15 +191,17 @@ export default {
option.dataZoom[0].endValue += 1;
option.dataZoom[0].startValue += 1;
}
option && this.myChart.setOption(option);
this.myChart.setOption(option);
}, 2000);
//鼠标移入组件时停止轮播
// 绑定鼠标移入事件
this.myChart.on("mousemove", () => {
clearInterval(this.timer); //清除循环
clearInterval(this.timer); // 清除定时器
});
//鼠标移出组件时恢复轮播
// 绑定鼠标移出事件
this.myChart.on("mouseout", () => {
clearInterval(this.timer); //清除循环
clearInterval(this.timer); // 清除定时器
this.timer = setInterval(() => {
if (option.dataZoom[0].endValue >= data.length - 1) {
option.dataZoom[0].endValue = this.endValue - 1;
......@@ -197,10 +210,11 @@ export default {
option.dataZoom[0].endValue += 1;
option.dataZoom[0].startValue += 1;
}
option && this.myChart.setOption(option);
this.myChart.setOption(option);
}, 2000);
});
},
hexToRgba(hex, opacity) {
let rgbaColor = "";
let reg = /^#[\da-f]{6}$/i;
......
admin_2/src/router/index.js
View file @ 21364fc1
......@@ -119,6 +119,7 @@ const routes = [
},
{
path: "/market/evaluatereport",
name: "evaluatereport",
hideChildrenInMenu: true,
component: () => import("@/pages/market/EvaluateReport"),
meta: {
......
admin_2/src/store/modules/user.js
View file @ 21364fc1
import { getSiteBusiness, getDepartment, getWindow } from "@/api/site";
export default {
namespaced: true,
state: {
menus: [], // 菜单
token: "",
siteId: "", // 站点id
deptList: [], // 部门列表
userInfo: {}, // 用户信息
sysName: "", // 系统名称
sysLogo: "", // 系统logo
path: "", // 门户跳转过来的路由
areaTree: [], // 个人区域树
businessList: [], // 站点业务列表
deptList: [], // 站点部门列表
windowList: [], // 站点窗口列表
},
getters: {
siteId(state) {
......@@ -38,9 +41,6 @@ export default {
SET_siteId(state, siteId) {
state.siteId = siteId;
},
SET_deptList(state, deptList) {
state.deptList = deptList;
},
SET_userInfo(state, userInfo) {
state.userInfo = userInfo;
},
......@@ -56,9 +56,55 @@ export default {
SET_areaTree(state, areaTree) {
state.areaTree = areaTree;
},
SET_businessList(state, businessList) {
state.businessList = businessList;
},
SET_deptList(state, deptList) {
state.deptList = deptList;
},
SET_windowList(state, windowList) {
state.windowList = windowList;
},
// 重置所有仓库状态
reset: () => {},
},
actions: {},
actions: {
// 获取站点业务列表
getBusiness: async (context, siteId) => {
let res = await getSiteBusiness({
page: 1,
size: -1,
siteId,
});
if (res.data.code == 1) {
let { data } = res.data.data;
context.commit("SET_businessList", data);
}
},
// 获取站点部门列表
getDeptList: async (context, siteId) => {
let res = await getDepartment({
page: 1,
size: -1,
siteId,
});
if (res.data.code == 1) {
let { data } = res.data.data;
context.commit("SET_deptList", data);
}
},
// 获取站点窗口列表
getWindowList: async (context, siteId) => {
let res = await getWindow({
page: 1,
size: -1,
siteId,
});
if (res.data.code == 1) {
let { data } = res.data.data;
context.commit("SET_windowList", data);
}
},
},
};
admin_2/yarn.lock
View file @ 21364fc1
......@@ -3109,13 +3109,13 @@ easy-stack@1.0.1:
resolved "https://registry.npmmirror.com/easy-stack/-/easy-stack-1.0.1.tgz"
integrity sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==
echarts@^5.4.3:
version "5.4.3"
resolved "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz"
integrity sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==
echarts@^5.5.1:
version "5.5.1"
resolved "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz#8dc9c68d0c548934bedcb5f633db07ed1dd2101c"
integrity sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==
dependencies:
tslib "2.3.0"
zrender "5.4.4"
zrender "5.6.0"
ee-first@1.1.1:
version "1.1.1"
......@@ -7000,9 +7000,9 @@ yorkie@^2.0.0:
normalize-path "^1.0.0"
strip-indent "^2.0.0"
zrender@5.4.4:
version "5.4.4"
resolved "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz"
integrity sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==
zrender@5.6.0:
version "5.6.0"
resolved "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz#01325b0bb38332dd5e87a8dbee7336cafc0f4a5b"
integrity sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==
dependencies:
tslib "2.3.0"
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment