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 @@
<style>
@font-face {
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>
</head>
......
admin_2/src/App.vue
View file @ 12d94921
......@@ -17,6 +17,6 @@ export default {
<style lang="less" scoped>
.app {
background-color: #f5f5f5;
background-color: #eff0f4;
}
</style>
admin_2/src/assets/css/common.less
View file @ 12d94921
/* 颜色 */
:root{
--primary:#1890ff;
--primary:#0857E8;
}
.primary {
color: #1890ff;
color: #0857E8;
}
.delete {
......
admin_2/src/layouts/Layouts.vue
View file @ 12d94921
......@@ -6,7 +6,6 @@
'out-box',
'flex-1',
'overflow-auto',
'pb-[24px]',
{
'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 @@
<div class="left flex items-center">
<img
class="logo mr-[10px] cursor-pointer"
:src="sysLogo ? sysLogo : require('@/assets/img/logo.png')"
src="@/assets/img/logo.png"
alt="LOGO"
@click="handleGoHome"
/>
......@@ -11,46 +11,44 @@
{{ 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">
</div>
<!-- 导航 -->
<el-menu
:default-active="activeMenu"
mode="horizontal"
router
text-color="rgba(254, 254, 254, 0.65)"
background-color="#0000"
>
<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>
</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>
</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 class="flex gap-5">
<div class="page-home" @click="handleGoHome">首页</div>
<!-- 返回门户 -->
<a class="back-btn" :href="portal + (path ? path : '')"> 返回门户 </a>
</div>
</div>
</template>
......@@ -92,14 +90,13 @@ export default {
<style lang="less" scoped>
.header {
height: 64px;
height: 72px;
width: 100%;
padding: 0px 24px;
// background-color: #2681e8;
background: linear-gradient(90deg, #1845c6 0%, #2999ff 100%);
background-color: var(--primary);
color: #fff;
flex-shrink: 0;
border-bottom: 1px solid rgba(254, 254, 254, 0.35);
font-family: Source Han Sans CN;
.left {
height: 100%;
}
......@@ -109,77 +106,80 @@ export default {
object-fit: contain;
}
.title {
// max-width: 300px;
font-size: 18px;
// font-weight: bold;
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 {
a {
color: #fff;
font-size: 14px;
}
color: #fff;
font-size: 16px;
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;
border: none !important;
background-color: transparent;
i {
color: rgba(254, 254, 254, 0.65);
}
.el-menu-item {
height: 100% !important;
// border: none !important;
height: 100%;
font-size: 16px;
color: #fff;
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;
border: none !important;
letter-spacing: 1px;
i {
color: #fff;
}
}
}
/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;
background: #0000 !important;
&::after {
content: "";
display: inline-block;
height: 4px;
width: 50%;
background: #ffffff;
border-radius: 2px;
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
}
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;
.is-active {
color: #fff !important;
background-color: transparent !important;
// background-color: #1890ff !important;
background: #0000 !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>
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>
<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 class="home flex h-full w-full flex-col items-center">
<div class="top-data-total flex h-[360px] w-full justify-center pt-[66px]">
<div class="flex h-full flex-col">
<div class="mb-[53px] flex flex-col items-center">
<div class="title mb-[28px]">您好，欢迎使用数据仓库工作台</div>
<div class="area-total">累计接入站点: 64个 (含区/县、镇/街道)</div>
</div>
<div class="data-total flex justify-center">
<div class="name">累计汇聚数据:（条）</div>
<div class="flex flex-col justify-center gap-4">
<el-statistic group-separator="," :value="8888867"></el-statistic>
<div class="text-[14px] text-[#424E65]">
数仓最近汇聚时间：2024-06-26 23:59:59
</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
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
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 class="flex h-full w-full flex-col">
<div class="mb-[18px] text-[18px] text-[#232323]">
近30日数据总量趋势
</div>
<div class="echarts-box">
<LineEchart
ref="DataQueueUpEchart"
title="近30日排队数据总量趋势"
color="#36CE9E"
:dataset="dataset"
></LineEchart>
<LineEchart :dataset="dataset"></LineEchart>
</div>
</div>
<div class="flex h-full w-full flex-col">
<div class="mb-[18px] text-[18px] text-[#232323]">
近30日排队数据总量趋势
</div>
<div class="echarts-box">
<LineEchart
ref="DataEvaluateEchart"
title="近30日评价数据总量趋势"
color="#8B5CFF"
:dataset="dataset"
></LineEchart>
<LineEchart :dataset="dataset" color="#1DCFB4"></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 class="flex h-full w-full flex-col">
<div class="mb-[18px] text-[18px] text-[#232323]">
近30日评价数据总量趋势
</div>
<div class="echarts-box">
<LineEchart :dataset="dataset" color="#F57520"></LineEchart>
</div>
</div>
</div>
......@@ -103,16 +56,9 @@
<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 {
......@@ -137,8 +83,6 @@ export default {
},
],
},
imageData: [image_1, image_2, image_3],
totalData: 895671230,
areaList: [
{
name: "高新区",
......@@ -208,61 +152,62 @@ export default {
],
};
},
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;
}
background: url("@/assets/img/bg-2.png") no-repeat center bottom;
}
.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 {
padding: 20px 20px 0px 20px;
position: absolute;
left: 0px;
top: 0px;
z-index: 10;
width: 870px;
height: 100px;
background: url("@/assets/img/total-bg.png") no-repeat center / 100% 100%;
position: relative;
.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) {
.con {
justify-content: flex-start;
.number {
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 {
color: #1890ff;
.echarts-box {
width: 100%;
flex: 1;
background: #f7f7f7;
border-radius: 8px;
}
}
</style>
admin_2/src/pages/home/components/LineEchart.vue
View file @ 12d94921
......@@ -9,17 +9,13 @@ export default {
type: Object,
default: () => {},
},
title: {
type: String,
default: "",
},
endValue: {
type: Number,
default: 6,
},
color: {
type: String,
default: "#0090FF",
default: "#0857E8",
},
},
data() {
......@@ -32,7 +28,7 @@ export default {
dataset: {
handler(newVal) {
this.$nextTick(() => {
this.initChart(this.title, newVal);
this.initChart(newVal);
});
},
deep: true,
......@@ -45,20 +41,13 @@ export default {
adapterEcharts() {
this.myChart && this.myChart.resize();
},
initChart(title = "", dataset) {
initChart(dataset) {
let data = dataset.source || [];
let dom = this.$refs.MyEchart;
this.myChart = this.$echarts.init(dom);
let option = {
title: {
text: title,
top: "5%",
textStyle: {
fontSize: 14,
},
},
grid: {
top: "25%",
top: "15%",
left: "15%",
right: "5%",
bottom: "12%",
......@@ -67,6 +56,16 @@ export default {
tooltip: {
trigger: "axis",
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: [
{
......@@ -81,13 +80,27 @@ export default {
type: "category",
boundaryGap: false,
axisLabel: {
textStyle: {
color: "#333",
},
color: "#5A5C60",
},
axisLine: {
show: true,
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 {
type: "value",
splitNumber: 3, // 配置 Y 轴数值间隔
axisLabel: {
textStyle: {
color: "#666",
},
color: "#666",
},
nameTextStyle: {
color: "#666",
color: "#5A5C60",
fontSize: 12,
lineHeight: 40,
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#E9E9E9",
color: "#E0E0E0",
},
},
axisLine: {
......@@ -122,7 +133,7 @@ export default {
name: "数据量",
type: "line",
smooth: true,
// showSymbol: false,
showSymbol: false,
symbolSize: 8,
lineStyle: {
color: this.hexToRgba(this.color, 1),
......@@ -140,16 +151,18 @@ export default {
colorStops: [
{
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),
},
{
offset: 1,
color: "#0000",
},
],
global: false,
},
global: false,
},
},
],
......
admin_2/src/router/index.js
View file @ 12d94921
......@@ -31,7 +31,6 @@ const routes = [
hideChildrenInMenu: true,
component: () => import("@/pages/home/Home"),
meta: {
icon: "el-icon-house",
title: "数仓工作台",
},
},
......@@ -40,7 +39,6 @@ const routes = [
hideChildrenInMenu: true,
component: () => import("@/pages/engine/Engine"),
meta: {
icon: "el-icon-cpu",
title: "数据引擎",
},
redirect: "/engine/queueupsystem",
......@@ -72,7 +70,6 @@ const routes = [
hideChildrenInMenu: true,
component: () => import("@/pages/market/Market"),
meta: {
icon: "el-icon-office-building",
title: "数据集市",
},
redirect: "/market/queueupreport",
......@@ -102,7 +99,6 @@ const routes = [
hideChildrenInMenu: true,
component: () => import("@/pages/system/System"),
meta: {
icon: "el-icon-setting",
title: "系统设置",
},
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