Skip to content

B
bill-manager-ui
Commit 3c0b176a authored by YIyiyi's avatar YIyiyi
Browse files
Options

feat:优化页面

parent 8632d44f
Show whitespace changes
Inline Side-by-side
Showing with 546 additions and 79 deletions
admin_2/src/assets/css/common.less
View file @ 3c0b176a
/* 颜色 */
:root{
--primary:#1890ff;
}
.primary {
color: #1890ff;
}
......
admin_2/src/layouts/Layouts.vue
View file @ 3c0b176a
......@@ -33,7 +33,6 @@ export default {
<style lang="less" scoped>
.not-home {
padding-left: 50px;
padding-right: 50px;
padding: 24px 50px;
}
</style>
admin_2/src/layouts/components/Header.vue
View file @ 3c0b176a
......@@ -7,10 +7,10 @@
alt="LOGO"
@click="handleGoHome"
/>
<h1 class="title cursor-pointer" @click="handleGoHome">
<h1 class="title mr-[50px] cursor-pointer" @click="handleGoHome">
{{ sysName ? sysName : systemName }}
</h1>
<HeaderSite class="mr50 ml20"></HeaderSite>
<!-- <HeaderSite class="mr50 ml20"></HeaderSite> -->
<!-- 导航 -->
<el-menu
:default-active="activeMenu"
......@@ -56,11 +56,11 @@
</template>
<script>
import HeaderSite from "./HeaderSite.vue";
// import HeaderSite from "./HeaderSite.vue";
import { mapState } from "vuex";
export default {
components: {
HeaderSite,
// HeaderSite,
},
data() {
return {
......@@ -99,6 +99,7 @@ export default {
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%;
}
......@@ -127,16 +128,16 @@ export default {
}
.el-menu-item {
height: 100% !important;
border: none !important;
// border: none !important;
display: flex;
align-items: center;
color: rgba(254, 254, 254, 0.65);
&:hover {
// background-color: transparent !important;
background-color: transparent !important;
border-bottom: 2px solid #fff !important;
// background-color: #1890ff !important;
color: #fff !important;
background-color: #1890ff !important;
// border-bottom: 2px solid #fff !important;
}
}
}
......@@ -147,12 +148,12 @@ export default {
display: flex;
align-items: center;
color: rgba(254, 254, 254, 0.65) !important;
border: none !important;
// border: none !important;
&:hover {
// background-color: transparent !important;
background-color: transparent !important;
border-bottom: 2px solid #fff !important;
color: #fff !important;
background-color: #1890ff !important;
// border-bottom: 2px solid #fff !important;
// background-color: #1890ff !important;
}
}
}
......@@ -169,16 +170,16 @@ export default {
.el-menu--horizontal .el-menu .el-menu-item.is-active {
color: #1890ff !important;
}
/deep/.is-active {
// border-bottom: 2px solid #fff !important;
:deep(.is-active) {
border-bottom: 2px solid #fff !important;
background-color: transparent !important;
color: #fff !important;
// background-color: transparent !important;
background-color: #1890ff !important;
// background-color: #1890ff !important;
.el-submenu__title {
border: none !important;
color: #fff !important;
// background-color: transparent !important;
background-color: #1890ff !important;
background-color: transparent !important;
// background-color: #1890ff !important;
}
}
</style>
admin_2/src/main.js
View file @ 3c0b176a
......@@ -33,9 +33,11 @@ Object.keys(directives).forEach((name) =>
// 引入echarts
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;
// swiper
import "swiper/css/swiper.min.css";
// 注册全局组件
// import customComponents from "@/components";
// Vue.use(customComponents);
import customComponents from "@/components";
Vue.use(customComponents);
Vue.config.productionTip = false;
new Vue({
......
admin_2/src/pages/engine/Engine.vue
View file @ 3c0b176a
<template>
<div>数据引擎</div>
<div class="engine flex h-full w-full flex-col">
<div class="top-box flex justify-between">
<div class="tab-box flex items-end gap-5">
<div
:class="[
'tab-item',
'top-radius',
{
active: active == 1,
},
]"
@click="active = 1"
>
排队取号系统
</div>
<div
:class="[
'tab-item',
'top-radius',
{
active: active == 2,
},
]"
@click="active = 2"
>
评价系统
</div>
</div>
<div class="flex gap-5">
<div class="search-box top-radius flex h-full items-center gap-5">
<div class="text-[14px] text-[#395EBF]">
统计时段：2023.08.01~2023.08.17
</div>
<el-date-picker
size="small"
v-model="value2"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
>
</el-date-picker>
<el-button size="small" type="primary">搜索</el-button>
</div>
<div class="engine-btn top-radius">
<img src="@/assets/img/engine.png" class="engine-img mr-2 w-[24px]" />
数据搜索引擎
</div>
</div>
</div>
<div class="main w-full flex-1"></div>
</div>
</template>
<script>
export default {};
export default {
data() {
return {
pickerOptions: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
},
},
],
},
value2: "",
active: 1,
};
},
};
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
@keyframes rotate {
0% {
transform: rotate(0deg);
}
95% {
transform: rotate(20turn);
}
100% {
transform: rotate(20turn);
}
}
.engine {
position: relative;
}
.top-box {
width: 100%;
height: 48px;
position: relative;
z-index: 0;
.top-radius {
border-radius: 12px 12px 0px 0px;
}
}
.tab-box {
.tab-item {
height: 70%;
padding: 0px 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
cursor: pointer;
}
.active {
height: 100%;
color: var(--primary);
font-weight: 600;
}
}
.search-box {
background-color: #fff;
padding: 0px 20px;
}
.engine-btn {
width: 220px;
color: #fff;
background: linear-gradient(
270deg,
rgba(139, 87, 249, 1) 0%,
rgba(5, 149, 253, 1) 100%
);
font-size: 18px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.main {
background: #fff;
border-radius: 0px 0px 4px 4px;
position: relative;
box-shadow: 0 -0.25rem 0.25rem rgba(204, 204, 204, 0.3);
z-index: 1000;
}
.engine-img {
// cubic-bezier(1, 0.05, 0.1, 1)
animation: rotate 5s cubic-bezier(1, -0.01, 0, 0.85) infinite;
}
</style>
admin_2/src/pages/home/Home.vue
View file @ 3c0b176a
......@@ -3,18 +3,21 @@
<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 p-[20px]">
<div class="flex flex-col 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">
<div class="flex" @click="totalData += 100">
<el-statistic
group-separator=","
:value="895671230"
:value="totalData"
suffix="条"
:value-style="{
color: '#1890ff',
......@@ -59,13 +62,27 @@
</div>
<div class="flex w-full flex-col gap-5 p-[20px]">
<div class="echarts-box">
<LineEchart ref="DataTotalEchart"></LineEchart>
<LineEchart
ref="DataTotalEchart"
title="近30日数据总量趋势"
:dataset="dataset"
></LineEchart>
</div>
<div class="echarts-box">
<LineEchart ref="DataQueueUpEchart"></LineEchart>
<LineEchart
ref="DataQueueUpEchart"
title="近30日排队数据总量趋势"
color="#36CE9E"
:dataset="dataset"
></LineEchart>
</div>
<div class="echarts-box">
<LineEchart ref="DataEvaluateEchart"></LineEchart>
<LineEchart
ref="DataEvaluateEchart"
title="近30日评价数据总量趋势"
color="#8B5CFF"
:dataset="dataset"
></LineEchart>
</div>
</div>
</div>
......@@ -73,7 +90,11 @@
<div class="b-border flex h-[50px] w-full items-center pl-[20px]">
对接站点矩阵
</div>
<div class="w-full p-[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>
......@@ -82,45 +103,113 @@
<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 {};
return {
dataset: {
dimensions: ["name", "value"],
source: [
{
name: "06-1",
value: 900000,
},
created() {},
mounted() {
let name = [
"06-1",
"06-2",
"06-3",
"06-4",
"06-5",
"06-6",
"06-7",
"06-8",
"06-9",
"06-10",
"06-11",
"06-12",
"06-13",
"06-14",
"06-15",
"06-16",
"06-17",
"06-18",
"06-19",
"06-20",
];
let data = [
900000, 800000, 700000, 900000, 500000, 900000, 80000, 200000, 100000,
90000, 80000, 70000, 900000, 50000, 40000, 900000, 20000, 10000, 80000,
];
this.$refs.DataTotalEchart.initChart("近30日数据总量趋势", name, data);
this.$refs.DataQueueUpEchart.initChart("近30日数据总量趋势", name, data);
this.$refs.DataEvaluateEchart.initChart("近30日数据总量趋势", name, data);
{
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>
......@@ -145,9 +234,18 @@ export default {
border-radius: 4px;
}
}
.top-data-total {
background: url("@/assets/img/u54.svg") no-repeat center / 100% 100%;
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%;
}
......@@ -155,6 +253,7 @@ export default {
font-size: 24px;
font-weight: 600;
}
:deep(.el-carousel--vertical) {
width: 100%;
}
......
admin_2/src/pages/home/components/Card.vue 0 → 100644
View file @ 3c0b176a
<template>
<div
:class="[
'card',
info.systemList.length ? 'cursor-pointer' : 'cursor-not-allowed',
]"
@click="handleClick"
>
<div>{{ info.name }}</div>
<el-tag
size="small"
type="danger"
color="#fff"
v-if="!info.systemList.length"
>
<i class="el-icon-link"></i>
等待对接</el-tag
>
<div class="cur flex gap-2" v-else>
<el-tag v-for="(v, i) in info.systemList" :key="i" size="small">{{
v
}}</el-tag>
</div>
<div class="card-date" v-if="info.systemList.length">
对接时间：{{ info.date }}
</div>
<div class="mask" v-else></div>
</div>
</template>
<script>
export default {
props: {
info: {
type: Object,
default() {
return {};
},
},
},
data() {
return {};
},
methods: {
handleClick() {
if (this.info.systemList.length) {
this.$emit("click", this.info);
}
},
},
};
</script>
<style lang="less" scoped>
.card {
width: 100%;
height: 100%;
color: #fff;
background: url("@/assets/img/card_bg.png") no-repeat center / 100% 100%;
border-radius: 4px;
color: #fff;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
.card-date {
width: 100%;
padding: 2px 10px;
font-size: 12px;
position: absolute;
left: 0px;
bottom: 0px;
background: rgba(0, 0, 0, 0.3);
}
.mask {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
}
</style>
admin_2/src/pages/home/components/Carousel.vue 0 → 100644
View file @ 3c0b176a
<template>
<div class="carousel">
<div class="swiper-container">
<div class="swiper-wrapper">
<img
class="swiper-slide"
v-for="(v, index) in ImageArray"
:key="index"
:src="v"
/>
</div>
</div>
</div>
</template>
<script>
import Swiper from "swiper";
export default {
props: {
ImageArray: {
type: Array,
default: () => {
return [];
},
},
speed: {
type: Number,
default: 1500,
},
},
data() {
return {
currentIndex: 0,
timer: null,
mySwiper: null,
};
},
watch: {},
mounted() {
this.initSwiper();
},
methods: {
initSwiper() {
this.mySwiper = new Swiper(".swiper-container", {
autoplay: true,
effect: "fade",
fadeEffect: true,
speed: this.speed,
loop: true,
updateOnWindowResize: true,
watchSlidesProgress: true,
});
this.mySwiper.init();
},
},
beforeDestroy() {
this.mySwiper.destroy();
},
};
</script>
<style lang="less" scoped>
.carousel {
width: 100%;
height: 100%;
.swiper-container {
width: inherit;
height: inherit;
}
.swiper-slide {
width: inherit;
height: inherit;
}
}
</style>
admin_2/src/pages/home/components/LineEchart.vue
View file @ 3c0b176a
......@@ -5,10 +5,22 @@
<script>
export default {
props: {
dataset: {
type: Object,
default: () => {},
},
title: {
type: String,
default: "",
},
endValue: {
type: Number,
default: 6,
},
color: {
type: String,
default: "#0090FF",
},
},
data() {
return {
......@@ -16,6 +28,17 @@ export default {
timer: null,
};
},
watch: {
dataset: {
handler(newVal) {
this.$nextTick(() => {
this.initChart(this.title, newVal);
});
},
deep: true,
immediate: true,
},
},
mounted() {},
methods: {
// 适配
......@@ -67,7 +90,6 @@ export default {
color: "#D9D9D9",
},
},
data: names,
},
yAxis: {
type: "value",
......@@ -103,27 +125,31 @@ export default {
// showSymbol: false,
symbolSize: 8,
lineStyle: {
color: "rgb(0, 202, 105)",
color: this.hexToRgba(this.color, 1),
},
itemStyle: {
color: this.hexToRgba(this.color, 1),
},
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(0, 202, 105,0.3)",
color: this.hexToRgba(this.color, 0.3),
},
{
offset: 1,
color: "rgba(0, 202, 105, 0.1)",
color: this.hexToRgba(this.color, 0.1),
},
],
false
),
shadowBlur: 10,
global: false,
},
global: false,
},
},
],
......@@ -162,6 +188,16 @@ export default {
}, 2000);
});
},
hexToRgba(hex, opacity) {
let rgbaColor = "";
let reg = /^#[\da-f]{6}$/i;
if (reg.test(hex)) {
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
"0x" + hex.slice(3, 5)
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
}
return rgbaColor;
},
},
beforeDestroy() {
window.removeEventListener("resize", this.adapterEcharts);
......
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