Skip to content

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

perf: 修改首页

parent e2bcfd30
Hide whitespace changes
Inline Side-by-side
Showing with 682 additions and 272 deletions
admin_2/public/index.html
View file @ 12d94921
...@@ -9,7 +9,11 @@ ...@@ -9,7 +9,11 @@
<style> <style>
@font-face { @font-face {
font-family: Source Han Sans CN ; font-family: Source Han Sans CN ;
src: url('./SourceHanSansSC-Regular-2.otf'); src: url('./SourceHanSansSC-Normal-2.otf');
}
@font-face {
font-family: FZZhengHeiS-EB-GB;
src: url('./FangZhengHeiTiJianTi-1.ttf');
} }
</style> </style>
</head> </head>
......
admin_2/src/App.vue
View file @ 12d94921
...@@ -17,6 +17,6 @@ export default { ...@@ -17,6 +17,6 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.app { .app {
background-color: #f5f5f5; background-color: #eff0f4;
} }
</style> </style>
admin_2/src/assets/css/common.less
View file @ 12d94921
/* 颜色 */ /* 颜色 */
:root{ :root{
--primary:#1890ff; --primary:#0857E8;
} }
.primary { .primary {
color: #1890ff; color: #0857E8;
} }
.delete { .delete {
......
admin_2/src/layouts/Layouts.vue
View file @ 12d94921
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
'out-box', 'out-box',
'flex-1', 'flex-1',
'overflow-auto', 'overflow-auto',
'pb-[24px]',
{ {
'not-home': $route.path != '/home', 'not-home': $route.path != '/home',
}, },
......
admin_2/src/layouts/components/Header copy.vue 0 → 100644
View file @ 12d94921
<template>
<div class="header flex items-center justify-between">
<div class="left flex items-center">
<img
class="logo mr-[10px] cursor-pointer"
:src="sysLogo ? sysLogo : require('@/assets/img/logo.png')"
alt="LOGO"
@click="handleGoHome"
/>
<h1 class="title mr-[50px] cursor-pointer" @click="handleGoHome">
{{ sysName ? sysName : systemName }}
</h1>
<!-- <HeaderSite class="mr50 ml20"></HeaderSite> -->
<!-- 导航 -->
<el-menu
:default-active="activeMenu"
mode="horizontal"
router
text-color="rgba(254, 254, 254, 0.65)"
>
<template v-for="v in menus">
<el-submenu
v-if="!v.hideChildrenInMenu && v.children && v.children.length"
:key="'a' + v.path"
:index="v.path"
>
<template slot="title">
<i v-if="v.meta && v.meta.icon" :class="v.meta.icon"></i>
{{ v.meta.title }}
</template>
<el-menu-item
v-for="item in v.children"
:key="item.path"
:index="item.path"
>
<i v-if="item.meta && item.meta.icon" :class="item.meta.icon"></i>
{{ item.meta && item.meta.title }}
</el-menu-item>
</el-submenu>
<el-menu-item v-else :key="v.path" :index="v.path">
<i v-if="v.meta && v.meta.icon" :class="v.meta.icon"></i>
{{ v.meta.title }}
</el-menu-item>
</template>
</el-menu>
</div>
<!-- 返回门户 -->
<div class="back-btn">
<el-tooltip effect="dark" content="返回门户" placement="bottom">
<a class="pointer" :href="portal + (path ? path : '')">
<i class="el-icon-s-home"></i> 返回门户
</a>
</el-tooltip>
</div>
</div>
</template>
<script>
// import HeaderSite from "./HeaderSite.vue";
import { mapState } from "vuex";
export default {
components: {
// HeaderSite,
},
data() {
return {
systemName: process.env.VUE_APP_sysName,
portal: process.env.VUE_APP_API_portal_URL + "/#",
};
},
computed: {
activeMenu() {
const route = this.$route;
const { meta, path } = route;
if (meta.activeMenu) {
return meta.activeMenu;
}
return path;
},
...mapState("user", ["menus", "sysName", "sysLogo", "path"]),
},
created() {
document.title = this.sysName ? this.sysName : this.systemName; // 设置项目标题
},
methods: {
handleGoHome() {
this.$router.push("/home");
},
},
};
</script>
<style lang="less" scoped>
.header {
height: 64px;
width: 100%;
padding: 0px 24px;
// background-color: #2681e8;
background: linear-gradient(90deg, #1845c6 0%, #2999ff 100%);
color: #fff;
flex-shrink: 0;
border-bottom: 1px solid rgba(254, 254, 254, 0.35);
.left {
height: 100%;
}
.logo {
height: 32px;
object-fit: contain;
}
.title {
// max-width: 300px;
font-size: 18px;
}
.back-btn {
a {
color: #fff;
font-size: 14px;
}
}
}
/deep/.el-menu {
height: 100% !important;
border: none !important;
background-color: transparent;
i {
color: rgba(254, 254, 254, 0.65);
}
.el-menu-item {
height: 100% !important;
// border: none !important;
display: flex;
align-items: center;
color: rgba(254, 254, 254, 0.65);
&:hover {
background-color: transparent !important;
border-bottom: 2px solid #fff !important;
// background-color: #1890ff !important;
color: #fff !important;
}
}
}
/deep/.el-submenu {
height: 100% !important;
.el-submenu__title {
height: 100% !important;
display: flex;
align-items: center;
color: rgba(254, 254, 254, 0.65) !important;
// border: none !important;
&:hover {
background-color: transparent !important;
border-bottom: 2px solid #fff !important;
color: #fff !important;
// background-color: #1890ff !important;
}
}
}
.el-menu--horizontal .el-menu .el-menu-item {
color: #909399;
&:hover {
i {
color: #1890ff;
}
color: #1890ff;
}
}
.el-menu--horizontal .el-menu .el-menu-item.is-active {
color: #1890ff !important;
}
:deep(.is-active) {
border-bottom: 2px solid #fff !important;
background-color: transparent !important;
color: #fff !important;
// background-color: #1890ff !important;
.el-submenu__title {
border: none !important;
color: #fff !important;
background-color: transparent !important;
// background-color: #1890ff !important;
}
}
</style>
admin_2/src/layouts/components/Header.vue
View file @ 12d94921
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="left flex items-center"> <div class="left flex items-center">
<img <img
class="logo mr-[10px] cursor-pointer" class="logo mr-[10px] cursor-pointer"
:src="sysLogo ? sysLogo : require('@/assets/img/logo.png')" src="@/assets/img/logo.png"
alt="LOGO" alt="LOGO"
@click="handleGoHome" @click="handleGoHome"
/> />
...@@ -11,46 +11,44 @@ ...@@ -11,46 +11,44 @@
{{ sysName ? sysName : systemName }} {{ sysName ? sysName : systemName }}
</h1> </h1>
<!-- <HeaderSite class="mr50 ml20"></HeaderSite> --> <!-- <HeaderSite class="mr50 ml20"></HeaderSite> -->
<!-- 导航 --> </div>
<el-menu <!-- 导航 -->
:default-active="activeMenu" <el-menu
mode="horizontal" :default-active="activeMenu"
router mode="horizontal"
text-color="rgba(254, 254, 254, 0.65)" router
> text-color="rgba(254, 254, 254, 0.65)"
<template v-for="v in menus"> background-color="#0000"
<el-submenu >
v-if="!v.hideChildrenInMenu && v.children && v.children.length" <template v-for="v in menus">
:key="'a' + v.path" <el-submenu
:index="v.path" v-if="!v.hideChildrenInMenu && v.children && v.children.length"
> :key="'a' + v.path"
<template slot="title"> :index="v.path"
<i v-if="v.meta && v.meta.icon" :class="v.meta.icon"></i> >
{{ v.meta.title }} <template slot="title">
</template>
<el-menu-item
v-for="item in v.children"
:key="item.path"
:index="item.path"
>
<i v-if="item.meta && item.meta.icon" :class="item.meta.icon"></i>
{{ item.meta && item.meta.title }}
</el-menu-item>
</el-submenu>
<el-menu-item v-else :key="v.path" :index="v.path">
<i v-if="v.meta && v.meta.icon" :class="v.meta.icon"></i> <i v-if="v.meta && v.meta.icon" :class="v.meta.icon"></i>
{{ v.meta.title }} {{ v.meta.title }}
</template>
<el-menu-item
v-for="item in v.children"
:key="item.path"
:index="item.path"
>
<i v-if="item.meta && item.meta.icon" :class="item.meta.icon"></i>
{{ item.meta && item.meta.title }}
</el-menu-item> </el-menu-item>
</template> </el-submenu>
</el-menu> <el-menu-item v-else :key="v.path" :index="v.path">
</div> <i v-if="v.meta && v.meta.icon" :class="v.meta.icon"></i>
<!-- 返回门户 --> {{ v.meta.title }}
<div class="back-btn"> </el-menu-item>
<el-tooltip effect="dark" content="返回门户" placement="bottom"> </template>
<a class="pointer" :href="portal + (path ? path : '')"> </el-menu>
<i class="el-icon-s-home"></i> 返回门户 <div class="flex gap-5">
</a> <div class="page-home" @click="handleGoHome">首页</div>
</el-tooltip> <!-- 返回门户 -->
<a class="back-btn" :href="portal + (path ? path : '')"> 返回门户 </a>
</div> </div>
</div> </div>
</template> </template>
...@@ -92,14 +90,13 @@ export default { ...@@ -92,14 +90,13 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.header { .header {
height: 64px; height: 72px;
width: 100%; width: 100%;
padding: 0px 24px; padding: 0px 24px;
// background-color: #2681e8; background-color: var(--primary);
background: linear-gradient(90deg, #1845c6 0%, #2999ff 100%);
color: #fff; color: #fff;
flex-shrink: 0; flex-shrink: 0;
border-bottom: 1px solid rgba(254, 254, 254, 0.35); font-family: Source Han Sans CN;
.left { .left {
height: 100%; height: 100%;
} }
...@@ -109,77 +106,80 @@ export default { ...@@ -109,77 +106,80 @@ export default {
object-fit: contain; object-fit: contain;
} }
.title { .title {
// max-width: 300px; // font-weight: bold;
font-size: 18px; font-size: 22px;
letter-spacing: 2px;
}
.page-home {
font-size: 16px;
width: 86px;
height: 44px;
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
} }
.back-btn { .back-btn {
a { color: #fff;
color: #fff; font-size: 16px;
font-size: 14px; width: 106px;
} height: 44px;
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
} }
} }
/deep/.el-menu { :deep(.el-menu) {
height: 100% !important; height: 100% !important;
border: none !important; border: none !important;
background-color: transparent;
i {
color: rgba(254, 254, 254, 0.65);
}
.el-menu-item { .el-menu-item {
height: 100% !important; height: 100%;
// border: none !important; font-size: 16px;
color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
color: rgba(254, 254, 254, 0.65); border: none !important;
letter-spacing: 1px;
&:hover { i {
background-color: transparent !important; color: #fff;
border-bottom: 2px solid #fff !important;
// background-color: #1890ff !important;
color: #fff !important;
} }
}
}
/deep/.el-submenu {
height: 100% !important;
.el-submenu__title {
height: 100% !important;
display: flex;
align-items: center;
color: rgba(254, 254, 254, 0.65) !important;
// border: none !important;
&:hover { &:hover {
background-color: transparent !important; background: #0000 !important;
border-bottom: 2px solid #fff !important; &::after {
color: #fff !important; content: "";
// background-color: #1890ff !important; display: inline-block;
} height: 4px;
} width: 50%;
} background: #ffffff;
.el-menu--horizontal .el-menu .el-menu-item { border-radius: 2px;
color: #909399; position: absolute;
&:hover { bottom: 0px;
i { left: 50%;
color: #1890ff; transform: translateX(-50%);
}
} }
color: #1890ff;
} }
} .is-active {
.el-menu--horizontal .el-menu .el-menu-item.is-active {
color: #1890ff !important;
}
:deep(.is-active) {
border-bottom: 2px solid #fff !important;
background-color: transparent !important;
color: #fff !important;
// background-color: #1890ff !important;
.el-submenu__title {
border: none !important;
color: #fff !important; color: #fff !important;
background-color: transparent !important; background: #0000 !important;
// background-color: #1890ff !important; font-weight: 600;
&::after {
content: "";
display: inline-block;
height: 4px;
width: 50%;
background: #ffffff;
border-radius: 2px;
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
} }
} }
</style> </style>
admin_2/src/pages/home/Home copy.vue 0 → 100644
View file @ 12d94921
<template>
<div class="home h-full w-full">
<div class="top-bg primary-bg h-[210px] w-full"></div>
<div class="main flex w-full flex-col gap-5">
<div class="top-data-box flex h-[100px] w-full items-center gap-5">
<div class="top-data-total h-full w-[30%] rounded-md">
<div class="h-full w-full">
<Carousel :ImageArray="imageData"></Carousel>
</div>
<div class="data-total flex h-full w-full flex-col gap-3">
<div>
<span class="mr-5"> 累计汇聚数据 </span>
<span class="text-[14px] text-[#888888]">
数仓最近汇聚时间：2024-06-26 23:59:59
</span>
</div>
<div class="flex" @click="totalData += 100">
<el-statistic
group-separator=","
:value="totalData"
suffix="条"
:value-style="{
color: '#1890ff',
fontSize: '22px',
fontWeight: 'bold',
}"
></el-statistic>
</div>
</div>
</div>
<div
class="top-data-text flex h-full flex-1 items-center rounded-md p-[20px]"
>
<el-carousel
height="26px"
direction="vertical"
indicator-position="none"
>
<el-carousel-item>
<div class="top-text primary">您好，欢迎使用数据仓库工作台。</div>
</el-carousel-item>
<el-carousel-item>
<div class="top-text primary">
累计接入站点：64个（含区/县、镇/街道）
</div>
</el-carousel-item>
<el-carousel-item>
<div class="top-text primary">您好，欢迎使用数据仓库工作台。</div>
</el-carousel-item>
<el-carousel-item>
<div class="top-text primary">
累计接入站点：64个（含区/县、镇/街道）
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
<div class="bottom-data-show-box flex w-full flex-1 gap-5">
<div class="data-echarts-box w-[30%] rounded-md bg-white">
<div class="b-border flex h-[50px] w-full items-center pl-[20px]">
主题数据分析
</div>
<div class="flex w-full flex-col gap-5 p-[20px]">
<div class="echarts-box">
<LineEchart
ref="DataTotalEchart"
title="近30日数据总量趋势"
:dataset="dataset"
></LineEchart>
</div>
<div class="echarts-box">
<LineEchart
ref="DataQueueUpEchart"
title="近30日排队数据总量趋势"
color="#36CE9E"
:dataset="dataset"
></LineEchart>
</div>
<div class="echarts-box">
<LineEchart
ref="DataEvaluateEchart"
title="近30日评价数据总量趋势"
color="#8B5CFF"
:dataset="dataset"
></LineEchart>
</div>
</div>
</div>
<div class="data-area-box flex-1 rounded-md bg-white">
<div class="b-border flex h-[50px] w-full items-center pl-[20px]">
对接站点矩阵
</div>
<div class="grid w-full grid-cols-4 gap-5 p-[20px]">
<div class="h-[130px] w-full" v-for="(v, i) in areaList" :key="i">
<Card :info="v"></Card>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import LineEchart from "./components/LineEchart.vue";
import Carousel from "./components/Carousel.vue";
import Card from "./components/Card.vue";
import image_1 from "@/assets/img/u54.svg";
import image_2 from "@/assets/img/u55.svg";
import image_3 from "@/assets/img/u56.svg";
export default {
components: {
LineEchart,
Carousel,
Card,
},
data() {
return {
dataset: {
dimensions: ["name", "value"],
source: [
{
name: "06-1",
value: 900000,
},
{
name: "06-2",
value: 800000,
},
{
name: "06-3",
value: 700000,
},
{
name: "06-4",
value: 900000,
},
],
},
imageData: [image_1, image_2, image_3],
totalData: 895671230,
areaList: [
{
name: "高新区",
systemList: ["排队系统", "评价系统"],
date: "2024-06-26",
},
{
name: "高县",
systemList: ["排队系统", "评价系统"],
date: "2024-06-26",
},
{
name: "屏山县",
systemList: ["排队系统", "评价系统"],
date: "2024-06-26",
},
{
name: "翠屏区",
systemList: ["排队系统", "评价系统"],
date: "2024-06-26",
},
{
name: "叙洲区",
systemList: ["排队系统", "评价系统"],
date: "2024-06-26",
},
{
name: "珙县",
systemList: [],
date: "2024-06-26",
},
{
name: "南溪区",
systemList: ["排队系统", "评价系统"],
date: "2024-06-26",
},
{
name: "江安县",
systemList: ["排队系统", "评价系统"],
date: "2024-06-26",
},
{
name: "长宁县",
systemList: ["排队系统", "评价系统"],
date: "2024-06-26",
},
{
name: "筠连县",
systemList: [],
date: "2024-06-26",
},
{
name: "兴文县",
systemList: ["排队系统"],
date: "2024-06-26",
},
{
name: "两海示范区",
systemList: ["排队系统", "评价系统"],
date: "2024-06-26",
},
{
name: "三江新区",
systemList: ["排队系统", "评价系统"],
date: "2024-06-26",
},
],
};
},
created() {},
mounted() {},
methods: {},
};
</script>
<style lang="less" scoped>
.home {
position: relative;
.b-border {
border-bottom: 1px solid #ccc;
}
}
.main {
height: calc(100% - 50px);
padding: 0px 50px;
position: absolute;
top: 50px;
left: 0px;
.echarts-box {
width: 100%;
height: 180px;
background: #f6fafa;
border-radius: 4px;
}
}
.top-data-total {
position: relative;
.data-total {
padding: 20px 20px 0px 20px;
position: absolute;
left: 0px;
top: 0px;
z-index: 10;
}
}
.top-data-text {
background: url("@/assets/img/card_bg_2.png") no-repeat center / 100% 100%;
}
.top-text {
font-size: 24px;
font-weight: 600;
}
:deep(.el-carousel--vertical) {
width: 100%;
}
:deep(.el-statistic) {
.con {
justify-content: flex-start;
}
.suffix {
color: #1890ff;
}
}
</style>
admin_2/src/pages/home/Home.vue
View file @ 12d94921
<template> <template>
<div class="home h-full w-full"> <div class="home flex h-full w-full flex-col items-center">
<div class="top-bg primary-bg h-[210px] w-full"></div> <div class="top-data-total flex h-[360px] w-full justify-center pt-[66px]">
<div class="main flex w-full flex-col gap-5"> <div class="flex h-full flex-col">
<div class="top-data-box flex h-[100px] w-full items-center gap-5"> <div class="mb-[53px] flex flex-col items-center">
<div class="top-data-total h-full w-[30%] rounded-md"> <div class="title mb-[28px]">您好，欢迎使用数据仓库工作台</div>
<div class="h-full w-full"> <div class="area-total">累计接入站点: 64个 (含区/县、镇/街道)</div>
<Carousel :ImageArray="imageData"></Carousel> </div>
</div> <div class="data-total flex justify-center">
<div class="data-total flex h-full w-full flex-col gap-3"> <div class="name">累计汇聚数据:（条）</div>
<div> <div class="flex flex-col justify-center gap-4">
<span class="mr-5"> 累计汇聚数据 </span> <el-statistic group-separator="," :value="8888867"></el-statistic>
<span class="text-[14px] text-[#888888]"> <div class="text-[14px] text-[#424E65]">
数仓最近汇聚时间：2024-06-26 23:59:59 数仓最近汇聚时间：2024-06-26 23:59:59
</span>
</div>
<div class="flex" @click="totalData += 100">
<el-statistic
group-separator=","
:value="totalData"
suffix="条"
:value-style="{
color: '#1890ff',
fontSize: '22px',
fontWeight: 'bold',
}"
></el-statistic>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="main w-[80%]">
<!-- 主题数据分析 -->
<div class="theme-data-analyse flex w-full flex-col items-center">
<div class="theme-data-analyse-title">主题数据分析</div>
<div <div
class="top-data-text flex h-full flex-1 items-center rounded-md p-[20px]" class="grid h-[270px] w-full grid-cols-3 gap-4 rounded-[8px] bg-white p-[20px]"
> >
<el-carousel <div class="flex h-full w-full flex-col">
height="26px" <div class="mb-[18px] text-[18px] text-[#232323]">
direction="vertical" 近30日数据总量趋势
indicator-position="none"
>
<el-carousel-item>
<div class="top-text primary">您好，欢迎使用数据仓库工作台。</div>
</el-carousel-item>
<el-carousel-item>
<div class="top-text primary">
累计接入站点：64个（含区/县、镇/街道）
</div>
</el-carousel-item>
<el-carousel-item>
<div class="top-text primary">您好，欢迎使用数据仓库工作台。</div>
</el-carousel-item>
<el-carousel-item>
<div class="top-text primary">
累计接入站点：64个（含区/县、镇/街道）
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
<div class="bottom-data-show-box flex w-full flex-1 gap-5">
<div class="data-echarts-box w-[30%] rounded-md bg-white">
<div class="b-border flex h-[50px] w-full items-center pl-[20px]">
主题数据分析
</div>
<div class="flex w-full flex-col gap-5 p-[20px]">
<div class="echarts-box">
<LineEchart
ref="DataTotalEchart"
title="近30日数据总量趋势"
:dataset="dataset"
></LineEchart>
</div> </div>
<div class="echarts-box"> <div class="echarts-box">
<LineEchart <LineEchart :dataset="dataset"></LineEchart>
ref="DataQueueUpEchart" </div>
title="近30日排队数据总量趋势" </div>
color="#36CE9E" <div class="flex h-full w-full flex-col">
:dataset="dataset" <div class="mb-[18px] text-[18px] text-[#232323]">
></LineEchart> 近30日排队数据总量趋势
</div> </div>
<div class="echarts-box"> <div class="echarts-box">
<LineEchart <LineEchart :dataset="dataset" color="#1DCFB4"></LineEchart>
ref="DataEvaluateEchart"
title="近30日评价数据总量趋势"
color="#8B5CFF"
:dataset="dataset"
></LineEchart>
</div> </div>
</div> </div>
</div> <div class="flex h-full w-full flex-col">
<div class="data-area-box flex-1 rounded-md bg-white"> <div class="mb-[18px] text-[18px] text-[#232323]">
<div class="b-border flex h-[50px] w-full items-center pl-[20px]"> 近30日评价数据总量趋势
对接站点矩阵 </div>
</div> <div class="echarts-box">
<div class="grid w-full grid-cols-4 gap-5 p-[20px]"> <LineEchart :dataset="dataset" color="#F57520"></LineEchart>
<div class="h-[130px] w-full" v-for="(v, i) in areaList" :key="i">
<Card :info="v"></Card>
</div> </div>
</div> </div>
</div> </div>
...@@ -103,16 +56,9 @@ ...@@ -103,16 +56,9 @@
<script> <script>
import LineEchart from "./components/LineEchart.vue"; import LineEchart from "./components/LineEchart.vue";
import Carousel from "./components/Carousel.vue";
import Card from "./components/Card.vue";
import image_1 from "@/assets/img/u54.svg";
import image_2 from "@/assets/img/u55.svg";
import image_3 from "@/assets/img/u56.svg";
export default { export default {
components: { components: {
LineEchart, LineEchart,
Carousel,
Card,
}, },
data() { data() {
return { return {
...@@ -137,8 +83,6 @@ export default { ...@@ -137,8 +83,6 @@ export default {
}, },
], ],
}, },
imageData: [image_1, image_2, image_3],
totalData: 895671230,
areaList: [ areaList: [
{ {
name: "高新区", name: "高新区",
...@@ -208,61 +152,62 @@ export default { ...@@ -208,61 +152,62 @@ export default {
], ],
}; };
}, },
created() {},
mounted() {},
methods: {},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.home { .home {
position: relative; background: url("@/assets/img/bg-2.png") no-repeat center bottom;
.b-border {
border-bottom: 1px solid #ccc;
}
}
.main {
height: calc(100% - 50px);
padding: 0px 50px;
position: absolute;
top: 50px;
left: 0px;
.echarts-box {
width: 100%;
height: 180px;
background: #f6fafa;
border-radius: 4px;
}
} }
.top-data-total { .top-data-total {
position: relative; background: url("@/assets/img/banner.png") no-repeat center / 100% 100%;
font-family: Source Han Sans CN;
.title {
font-family: FZZhengHeiS-EB-GB;
font-size: 34px;
color: #1541e3;
font-weight: bold;
}
.area-total {
font-weight: 500;
font-size: 34px;
color: #162b96;
font-weight: bold;
}
.data-total { .data-total {
padding: 20px 20px 0px 20px; width: 870px;
position: absolute; height: 100px;
left: 0px; background: url("@/assets/img/total-bg.png") no-repeat center / 100% 100%;
top: 0px; position: relative;
z-index: 10; .name {
position: absolute;
top: 16px;
left: 20px;
color: var(--primary);
}
} }
} }
.top-data-text {
background: url("@/assets/img/card_bg_2.png") no-repeat center / 100% 100%;
}
.top-text {
font-size: 24px;
font-weight: 600;
}
:deep(.el-carousel--vertical) {
width: 100%;
}
:deep(.el-statistic) { :deep(.el-statistic) {
.con { .number {
justify-content: flex-start; font-family: Source Han Sans CN;
font-weight: bold;
font-size: 34px;
color: var(--primary);
}
}
.main {
font-family: Source Han Sans CN;
.theme-data-analyse-title {
margin-bottom: 27px;
font-weight: bold;
font-size: 26px;
color: #232323;
} }
.suffix { .echarts-box {
color: #1890ff; width: 100%;
flex: 1;
background: #f7f7f7;
border-radius: 8px;
} }
} }
</style> </style>
admin_2/src/pages/home/components/LineEchart.vue
View file @ 12d94921
...@@ -9,17 +9,13 @@ export default { ...@@ -9,17 +9,13 @@ export default {
type: Object, type: Object,
default: () => {}, default: () => {},
}, },
title: {
type: String,
default: "",
},
endValue: { endValue: {
type: Number, type: Number,
default: 6, default: 6,
}, },
color: { color: {
type: String, type: String,
default: "#0090FF", default: "#0857E8",
}, },
}, },
data() { data() {
...@@ -32,7 +28,7 @@ export default { ...@@ -32,7 +28,7 @@ export default {
dataset: { dataset: {
handler(newVal) { handler(newVal) {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart(this.title, newVal); this.initChart(newVal);
}); });
}, },
deep: true, deep: true,
...@@ -45,20 +41,13 @@ export default { ...@@ -45,20 +41,13 @@ export default {
adapterEcharts() { adapterEcharts() {
this.myChart && this.myChart.resize(); this.myChart && this.myChart.resize();
}, },
initChart(title = "", dataset) { initChart(dataset) {
let data = dataset.source || []; let data = dataset.source || [];
let dom = this.$refs.MyEchart; let dom = this.$refs.MyEchart;
this.myChart = this.$echarts.init(dom); this.myChart = this.$echarts.init(dom);
let option = { let option = {
title: {
text: title,
top: "5%",
textStyle: {
fontSize: 14,
},
},
grid: { grid: {
top: "25%", top: "15%",
left: "15%", left: "15%",
right: "5%", right: "5%",
bottom: "12%", bottom: "12%",
...@@ -67,6 +56,16 @@ export default { ...@@ -67,6 +56,16 @@ export default {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
borderWidth: 0, borderWidth: 0,
formatter: (params) => {
return `${
params[0].value.name
}<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>`;
},
}, },
dataZoom: [ dataZoom: [
{ {
...@@ -81,13 +80,27 @@ export default { ...@@ -81,13 +80,27 @@ export default {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
axisLabel: { axisLabel: {
textStyle: { color: "#5A5C60",
color: "#333",
},
}, },
axisLine: { axisLine: {
show: true,
lineStyle: { lineStyle: {
color: "#D9D9D9", color: "#E0E0E0",
},
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#E0E0E0",
},
},
axisPointer: {
lineStyle: {
color: this.hexToRgba(this.color, 1),
}, },
}, },
}, },
...@@ -95,19 +108,17 @@ export default { ...@@ -95,19 +108,17 @@ export default {
type: "value", type: "value",
splitNumber: 3, // 配置 Y 轴数值间隔 splitNumber: 3, // 配置 Y 轴数值间隔
axisLabel: { axisLabel: {
textStyle: { color: "#666",
color: "#666",
},
}, },
nameTextStyle: { nameTextStyle: {
color: "#666", color: "#5A5C60",
fontSize: 12, fontSize: 12,
lineHeight: 40, lineHeight: 40,
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
type: "dashed", type: "dashed",
color: "#E9E9E9", color: "#E0E0E0",
}, },
}, },
axisLine: { axisLine: {
...@@ -122,7 +133,7 @@ export default { ...@@ -122,7 +133,7 @@ export default {
name: "数据量", name: "数据量",
type: "line", type: "line",
smooth: true, smooth: true,
// showSymbol: false, showSymbol: false,
symbolSize: 8, symbolSize: 8,
lineStyle: { lineStyle: {
color: this.hexToRgba(this.color, 1), color: this.hexToRgba(this.color, 1),
...@@ -140,16 +151,18 @@ export default { ...@@ -140,16 +151,18 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: this.hexToRgba(this.color, 0.3), color: this.hexToRgba(this.color, 0.4),
}, },
{ {
offset: 1, offset: 0.6,
color: this.hexToRgba(this.color, 0.1), color: this.hexToRgba(this.color, 0.1),
}, },
{
offset: 1,
color: "#0000",
},
], ],
global: false,
}, },
global: false,
}, },
}, },
], ],
......
admin_2/src/router/index.js
View file @ 12d94921
...@@ -31,7 +31,6 @@ const routes = [ ...@@ -31,7 +31,6 @@ const routes = [
hideChildrenInMenu: true, hideChildrenInMenu: true,
component: () => import("@/pages/home/Home"), component: () => import("@/pages/home/Home"),
meta: { meta: {
icon: "el-icon-house",
title: "数仓工作台", title: "数仓工作台",
}, },
}, },
...@@ -40,7 +39,6 @@ const routes = [ ...@@ -40,7 +39,6 @@ const routes = [
hideChildrenInMenu: true, hideChildrenInMenu: true,
component: () => import("@/pages/engine/Engine"), component: () => import("@/pages/engine/Engine"),
meta: { meta: {
icon: "el-icon-cpu",
title: "数据引擎", title: "数据引擎",
}, },
redirect: "/engine/queueupsystem", redirect: "/engine/queueupsystem",
...@@ -72,7 +70,6 @@ const routes = [ ...@@ -72,7 +70,6 @@ const routes = [
hideChildrenInMenu: true, hideChildrenInMenu: true,
component: () => import("@/pages/market/Market"), component: () => import("@/pages/market/Market"),
meta: { meta: {
icon: "el-icon-office-building",
title: "数据集市", title: "数据集市",
}, },
redirect: "/market/queueupreport", redirect: "/market/queueupreport",
...@@ -102,7 +99,6 @@ const routes = [ ...@@ -102,7 +99,6 @@ const routes = [
hideChildrenInMenu: true, hideChildrenInMenu: true,
component: () => import("@/pages/system/System"), component: () => import("@/pages/system/System"),
meta: { meta: {
icon: "el-icon-setting",
title: "系统设置", title: "系统设置",
}, },
redirect: "/system/parameter", redirect: "/system/parameter",
......
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