zS/go-viee-fetch-Demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(Charts): 重构折线图组件

Browse Source 
- 移除自定义标题和边框样式，使用公共组件 PublicSmallBorder
- 添加 titleText 配置项
This commit is contained in:
Free-sss 2025-09-08 13:57:40 +08:00
parent 0cad8a2b2c
commit bdeac87abd
2 changed files with 91 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/config.ts
View File

@ -8,32 +8,34 @@ export const includes = ['xAxis', 'yAxis', 'grid']
// 其它配置 // 其它配置
const otherConfig = { const otherConfig = {
dateTime: { dateTime: {
selectValue: 'day', show: true,
dataset: [ selectValue: 'day',
{ dataset: [
label: '当天', {
value: 'day' label: '当天',
}, value: 'day'
{ },
label: '本周', {
value: 'week' label: '本周',
}, value: 'week'
{ },
label: '当月', {
value: 'month' label: '当月',
}, value: 'month'
{ },
label: '本季度', {
value: 'quarter' label: '本季度',
}, value: 'quarter'
{ },
label: '当年', {
value: 'year' label: '当年',
} value: 'year'
] }
}, ]
sceneCode: '', },
sceneCode: '',
titleText: "报警趋势"
} }
export const option = { export const option = {

187
src/packages/components/Charts/HazardousChemicalsSpace/LineDropdownHaz/index.vue
View File

@ -1,28 +1,24 @@
<template> <template>
<div class="go-border-box"> <div class="go-border-box">
<img src="./assets/title.svg" class="svg" /> <PublicSmallBorder :title-text="option.titleText" :select-option="option.dateTime" @change="handleSelectChange">
<div class="header-title">报警趋势</div> <!-- <CustomSelect :options="option.dateTime.dataset" :selectedValue="option.dateTime.selectValue"
<CustomSelect @change="handleSelectChange" /> -->
:options="option.dateTime.dataset"
:selectedValue="option.dateTime.selectValue"
@change="handleSelectChange"
/>
<div class="line-dropdown-container">
<!-- 新增的风险级别下拉框 -->
<div class="risk-level-select">
<CustomSelect
:options="riskLevelOptions"
:selectedValue="selectedRiskLevel"
@change="handleRiskLevelChange"
/>
</div>
<!-- 折线图 --> <div class="line-dropdown-container">
<div class="chart-container"> <!-- 新增的风险级别下拉框 -->
<v-chart ref="vChartRef" autoresize :init-options="initOptions" :theme="themeColor" :option="option"></v-chart> <div class="risk-level-select">
<CustomSelect :options="riskLevelOptions" :selectedValue="selectedRiskLevel"
@change="handleRiskLevelChange" />
</div>
<!-- 折线图 -->
<div class="chart-container">
<v-chart ref="vChartRef" autoresize :init-options="initOptions" :theme="themeColor"
:option="option"></v-chart>
</div>
</div> </div>
</div> </PublicSmallBorder>
</div> </div>
</template> </template>
@ -39,6 +35,7 @@ import config, { includes } from './config'
import { DatasetComponent, GridComponent, TooltipComponent } from 'echarts/components' import { DatasetComponent, GridComponent, TooltipComponent } from 'echarts/components'
import CustomSelect from './select.vue' import CustomSelect from './select.vue'
import axiosInstance from '@/api/axios' import axiosInstance from '@/api/axios'
import PublicSmallBorder from '../../Public_SmallBorder/index.vue'
const props = defineProps({ const props = defineProps({
themeSetting: { themeSetting: {
@ -91,13 +88,13 @@ const fetchChartData = async (timeType: string, riskLevel: number) => {
// 数据处理函数 // 数据处理函数
const processChartData = async (timeType: string, riskLevel: number) => { const processChartData = async (timeType: string, riskLevel: number) => {
// 调用API获取数据 // 调用API获取数据
const rawData = await fetchChartData(timeType, riskLevel) const rawData = await fetchChartData(timeType, riskLevel)
// 根据时间类型处理数据格式 // 根据时间类型处理数据格式
let processedData: Array<{time: string, value: number}> = [] let processedData: Array<{ time: string, value: number }> = []
switch (timeType) { switch (timeType) {
case 'day': case 'day':
processedData = rawData.map((item: any) => ({ processedData = rawData.map((item: any) => ({
@ -128,7 +125,7 @@ const processChartData = async (timeType: string, riskLevel: number) => {
default: default:
processedData = [] processedData = []
} }
return { return {
dimensions: ['time', 'value'], dimensions: ['time', 'value'],
source: processedData source: processedData
@ -152,15 +149,15 @@ const handleDropdownChange = () => {
// 处理时间下拉选择器变化 // 处理时间下拉选择器变化
const handleSelectChange = (value: any) => { const handleSelectChange = (value: any) => {
props.chartConfig.option.dateTime.selectValue = value props.chartConfig.option.dateTime.selectValue = value
updateChartData() updateChartData()
} }
// 新增风险级别选择处理函数 // 新增风险级别选择处理函数
const handleRiskLevelChange = (value: any) => { const handleRiskLevelChange = (value: any) => {
selectedRiskLevel.value = value selectedRiskLevel.value = value
updateChartData() updateChartData()
console.log('Selected risk level:', value) console.log('Selected risk level:', value)
} }
// 组件挂载时初始化数据 // 组件挂载时初始化数据
@ -173,7 +170,7 @@ onMounted(() => {
.line-dropdown-container { .line-dropdown-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(13, 16, 22, 1); /* background: rgba(13, 16, 22, 1); */
position: relative; position: relative;
} }
@ -187,42 +184,42 @@ onMounted(() => {
/* 添加边框样式到父容器 */ /* 添加边框样式到父容器 */
border-radius: 8px; border-radius: 8px;
padding: 1px; padding: 1px;
background: linear-gradient(to bottom, background: linear-gradient(to bottom,
rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 0%,
rgba(200, 200, 200, 0.6) 25%, rgba(200, 200, 200, 0.6) 25%,
rgba(150, 150, 150, 0.5) 50%, rgba(150, 150, 150, 0.5) 50%,
rgba(100, 100, 100, 0.4) 75%, rgba(100, 100, 100, 0.4) 75%,
rgba(60, 60, 60, 0.3) 100%); rgba(60, 60, 60, 0.3) 100%);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
/* hover状态的彩色渐变边框 */ /* hover状态的彩色渐变边框 */
.dropdown-container:hover { .dropdown-container:hover {
background: linear-gradient(to bottom, background: linear-gradient(to bottom,
rgba(58, 160, 255, 1) 0%, rgba(58, 160, 255, 1) 0%,
rgba(98, 255, 198, 0.8) 25%, rgba(98, 255, 198, 0.8) 25%,
rgba(54, 110, 255, 1) 50%, rgba(54, 110, 255, 1) 50%,
rgba(28, 234, 160, 0.8) 75%, rgba(28, 234, 160, 0.8) 75%,
rgba(58, 160, 255, 1) 100%); rgba(58, 160, 255, 1) 100%);
} }
/* focus状态的增强彩色渐变边框 */ /* focus状态的增强彩色渐变边框 */
.dropdown-container:focus-within { .dropdown-container:focus-within {
background: linear-gradient(to bottom, background: linear-gradient(to bottom,
rgba(58, 160, 255, 1) 0%, rgba(58, 160, 255, 1) 0%,
rgba(98, 255, 198, 1) 25%, rgba(98, 255, 198, 1) 25%,
rgba(54, 110, 255, 1) 50%, rgba(54, 110, 255, 1) 50%,
rgba(28, 234, 160, 1) 75%, rgba(28, 234, 160, 1) 75%,
rgba(58, 160, 255, 1) 100%); rgba(58, 160, 255, 1) 100%);
} }
.custom-dropdown1 { .custom-dropdown1 {
/* 渐变背景 */ /* 渐变背景 */
background: linear-gradient(135deg, background: linear-gradient(135deg,
rgba(25, 35, 45, 0.95) 0%, rgba(25, 35, 45, 0.95) 0%,
rgba(15, 25, 35, 0.95) 50%, rgba(15, 25, 35, 0.95) 50%,
rgba(35, 45, 55, 0.95) 100%); rgba(35, 45, 55, 0.95) 100%);
/* 移除边框，因为已经移到父容器 */ /* 移除边框，因为已经移到父容器 */
border: none; border: none;
border-radius: 7px; border-radius: 7px;
@ -246,10 +243,10 @@ onMounted(() => {
box-shadow: 0 6px 20px rgba(58, 160, 255, 0.2); box-shadow: 0 6px 20px rgba(58, 160, 255, 0.2);
transform: translateY(-1px); transform: translateY(-1px);
/* 增强背景渐变 */ /* 增强背景渐变 */
background: linear-gradient(135deg, background: linear-gradient(135deg,
rgba(35, 45, 55, 0.95) 0%, rgba(35, 45, 55, 0.95) 0%,
rgba(25, 35, 45, 0.95) 50%, rgba(25, 35, 45, 0.95) 50%,
rgba(45, 55, 65, 0.95) 100%); rgba(45, 55, 65, 0.95) 100%);
} }
.custom-dropdown1:focus { .custom-dropdown1:focus {
@ -268,7 +265,7 @@ onMounted(() => {
border: none; border: none;
transition: all 0.2s ease; transition: all 0.2s ease;
cursor: pointer; cursor: pointer;
/* 添加细微的边框分隔 */ /* 添加细微的边框分隔 */
border-bottom: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05);
} }
@ -319,7 +316,7 @@ onMounted(() => {
transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg);
} }
.custom-dropdown1:focus + .dropdown-arrow { .custom-dropdown1:focus+.dropdown-arrow {
transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg);
color: rgba(58, 160, 255, 1); color: rgba(58, 160, 255, 1);
text-shadow: 0 0 8px rgba(58, 160, 255, 0.5); text-shadow: 0 0 8px rgba(58, 160, 255, 0.5);
@ -334,59 +331,6 @@ onMounted(() => {
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
@include go(border-box) {
position: relative;
border-radius: 5px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
padding: 0;
// 不渐变
// background-color: #0E121B;
// 渐变
background: linear-gradient(to top,
rgba(14, 18, 27, 1) 0%,
rgba(14, 18, 27, 0.6) 100%);
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 5px;
padding: 2px;
/* 边框宽度 */
background: linear-gradient(to top,
rgba(128, 128, 128, 0.3),
rgba(128, 128, 128, 0));
-webkit-mask:
linear-gradient(#fff, #fff) content-box,
linear-gradient(#fff, #fff);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
}
.header-title {
position: absolute;
height: 45px;
line-height: 45px;
left: 80px;
white-space: nowrap;
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
// 新增风险级别下拉框样式 // 新增风险级别下拉框样式
.risk-level-select { .risk-level-select {
position: relative; position: relative;
@ -399,7 +343,7 @@ onMounted(() => {
top: 0; top: 0;
right: 0; right: 0;
} }
:deep(.select-display) { :deep(.select-display) {
background-color: rgb(19, 22, 33); background-color: rgb(19, 22, 33);
border: 1px solid rgb(75, 83, 99); border: 1px solid rgb(75, 83, 99);
@ -410,28 +354,23 @@ onMounted(() => {
font-size: 12px; font-size: 12px;
min-width: 90px; min-width: 90px;
} }
:deep(.select-dropdown) { :deep(.select-dropdown) {
background-color: rgb(19, 22, 33); background-color: rgb(19, 22, 33);
border: 1px solid rgb(75, 83, 99); border: 1px solid rgb(75, 83, 99);
border-radius: 6px; border-radius: 6px;
} }
:deep(.select-option) { :deep(.select-option) {
color: #fff; color: #fff;
&:hover { &:hover {
background-color: rgba(75, 83, 99, 0.3); background-color: rgba(75, 83, 99, 0.3);
} }
&.selected { &.selected {
background-color: rgba(75, 83, 99, 0.5); background-color: rgba(75, 83, 99, 0.5);
} }
} }
} }
.svg {
width: 100%;
height: 45px;
}
</style> </style>