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

chore：统一小标题css：

Browse Source 
font-family: 'CustomFont';
    font-style: italic;
    letter-spacing: 0.5px;
    color: #eee;
    text-shadow: 1px 3px 10px #000000;
    font-size: 16px;
    大标题css：font-family: 'CustomFont';
    color:#eee
This commit is contained in:
Free-sss 2025-09-01 16:45:36 +08:00
parent c2eb638f78
commit 97a7efab9f
19 changed files with 164 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/packages/components/Charts/ConfinedSpace/AlarmNowList/config.ts
View File

@ -7,11 +7,6 @@ import { chartInitConfig } from '@/settings/designSetting'
export const styleConfig = {
titleText: '实时报警',
titleOption: {
color: '#ffffff',
fontSize: '17px',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'CustomFont',
},
headerOption: {
paddingLeft: 0,

2
src/packages/components/Charts/ConfinedSpace/FiniteSpatialDistribution/config.ts
View File

@ -123,5 +123,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
public key: string = FiniteSpatialDistributionConfig.key
public chartConfig = cloneDeep(FiniteSpatialDistributionConfig)
public option = echartOptionProfixHandle(option, includes)
public attr = { ...chartInitConfig, x: 0, y: 0, w: 430, h: 300, zIndex: 1 }
public attr = { ...chartInitConfig, x: 0, y: 0, w: 420, h: 280, zIndex: 1 }
}

27
src/packages/components/Charts/ConfinedSpace/FiniteSpatialDistribution/index.vue
View File

@ -24,7 +24,7 @@ import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
import dataJson from './data.json'
import { getPie3D } from './3dPie'
import { getPie3D } from './3dPie'
import axiosInstance from '@/api/axios';
const props = defineProps({
@ -55,12 +55,12 @@ const initializeChartData = () => {
// 使用 dataJson 中的 source 数据初始化图表
if (dataJson && dataJson.source) {
props.chartConfig.option.dataset = { ...dataJson }
// 计算总数并更新标题
const totalValue = dataJson.source.reduce((total: number, item: any) => {
return total + (item.value || 0)
}, 0)
// 更新图表标题中的总数
if (props.chartConfig.option.title && props.chartConfig.option.title[0]) {
props.chartConfig.option.title[0].text = totalValue
@ -68,8 +68,8 @@ const initializeChartData = () => {
const series = getPie3D(dataJson.source, 0.8);
props.chartConfig.option.series=series
props.chartConfig.option.series = series
console.log('图表数据已初始化:', props.chartConfig.option.dataset)
}
}
@ -79,11 +79,11 @@ const updateChartData = (newData: any) => {
// 确保数据被正确设置到图表配置中
props.chartConfig.option.dataset = newData
const totalValue = newData.source.reduce((total: number, item: any) => {
return total + (item.value || 0)
}, 0)
// 更新图表标题中的总数
if (props.chartConfig.option.title && props.chartConfig.option.title[0]) {
props.chartConfig.option.title[0].text = totalValue
@ -158,13 +158,14 @@ onMounted(async () => {
top: 0;
height: 45px;
line-height: 45px;
left: 80px;
font-size: 16px;
font-weight: bold;
color: #eee;
font-style: italic;
text-shadow: 0 0 10px #00E5FF;
left: 70px;
white-space: nowrap;
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}

5
src/packages/components/Charts/ConfinedSpace/PieCircleCommen/config.ts
View File

@ -45,11 +45,6 @@ const otherConfig = {
},
titleText: '报警统计',
titleOption: {
color: '#ffffff',
fontSize: '17px',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'CustomFont',
},
headerOption: {
paddingLeft: 0,

8
src/packages/components/Charts/ConfinedSpace/SmallBorder01Co/index.vue
View File

@ -366,9 +366,11 @@ const handleSelectChange = (value: any) => {
.title {
font-family: 'CustomFont';
letter-spacing: 1px;
color: #ffffff;
font-size: 17px;
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
padding-left: 45px;
}
}

5
src/packages/components/Charts/ConfinedSpace/videoCheck/config.ts
View File

@ -29,11 +29,6 @@ export const option = {
isOldStyle: true,
titleText: '视频巡查',
titleOption: {
color: '#ffffff',
fontSize: '17px',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'CustomFont',
},
headerOption: {
paddingLeft: 0,

9
src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHaz/config.ts
View File

@ -36,14 +36,13 @@ export const option = {
itemHeight: 28,
fontSize: 12,
title: '近60分钟报警信息',
titleSize: 17,
titleSize: 16,
titleColor: '#ffffff',
iconColor: '#00E5FF',
fontWeight: 'normal',
fontStyle: 'normal',
paddingX: 40,
fontStyle: 'italic',
paddingX: 50,
paddingY: -30,
letterSpacing: 1,
letterSpacing: 0.5,
isShowButton: false
}

9
src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHaz/index.vue
View File

@ -104,7 +104,14 @@ const getStatusColor = (status: string) => {
height: 35px;
display: flex;
align-items: center;
padding: 0 20px 0 20px;
padding: 2px 20px 0 20px;
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
}

11
src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHazC/config.ts
View File

@ -37,14 +37,13 @@ export const option = {
itemHeight: 28,
fontSize: 12,
title: '近60分钟报警信息',
titleSize: 17,
titleSize: 16,
titleColor: '#ffffff',
iconColor: '#00E5FF',
fontWeight: 'normal',
fontStyle: 'normal',
paddingX: 40,
paddingY: -30,
letterSpacing: 1,
fontStyle: 'italic',
paddingX: 45,
paddingY: -25,
letterSpacing: 0.5,
isShowButton: false
}

7
src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHazC/index.vue
View File

@ -179,6 +179,13 @@ onUnmounted(() => {
display: flex;
align-items: center;
padding: 0 20px 0 20px;
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
}

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

@ -371,18 +371,18 @@ onMounted(() => {
}
}
.header-title{
position: absolute;
top: 0;
height: 45px;
line-height: 45px;
left: 80px;
font-size: 16px;
font-weight: bold;
color: #eee;
font-style: italic;
text-shadow: 0 0 10px #00E5FF;
white-space: nowrap;
.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;
}
// 新增风险级别下拉框样式

57
src/packages/components/Charts/HazardousChemicalsSpace/LineGraph01Haz/index.vue
View File

@ -1,17 +1,14 @@
<template>
<div class="go-border-box">
<img src="./assets/title.svg" class="svg" />
<div class="buttonContent">
<span class="title">报警处置情况</span>
</div>
<!-- 使用新的下拉选择器组件 -->
<CustomSelect
:options="option.dateTime.dataset"
:selectedValue="option.dateTime.selectValue"
@change="handleSelectChange"
/>
<CustomSelect :options="option.dateTime.dataset" :selectedValue="option.dateTime.selectValue"
@change="handleSelectChange" />
<div class="textContent">
<div class="textInContent">
@ -39,7 +36,7 @@
</div>
</template>
<script setup lang="ts">
import { PropType, computed, watch, ref, nextTick,onMounted } from 'vue'
import { PropType, computed, watch, ref, nextTick, onMounted } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use } from 'echarts/core'
@ -72,7 +69,7 @@ const props = defineProps({
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
const option = computed(() => {
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
@ -108,7 +105,7 @@ const convertToChineseWeekday = (dateString: string): string => {
// 数据转换函数：将API返回的数据转换为组件需要的格式
const convertApiDataToMockFormat = async (timeRange: string) => {
const dataArray = await fetchChartData(timeRange)
if (!Array.isArray(dataArray) || dataArray.length === 0) {
return {
alertTotal: 0,
@ -117,16 +114,16 @@ const convertApiDataToMockFormat = async (timeRange: string) => {
datavalues: [['时间', '数值']]
}
}
// 计算聚合数据
const alertTotal = dataArray.reduce((sum, item) => sum + (item.alarm_count || 0), 0)
const unprocessedAlert = dataArray.reduce((sum, item) => sum + (item.un_alarm_count || 0), 0)
const avgHandleTimeSum = dataArray.reduce((sum, item) => sum + (item.avg_handle_time_seconds || 0), 0)
const averageResolutionTime = Math.round(avgHandleTimeSum / dataArray.length)
// 根据不同时间范围生成datavalues
let datavalues: (string | number)[][] = [['时间', '数值']]
switch (timeRange) {
case 'day':
datavalues = [['时间', '数值'], ...dataArray.map(item => [
@ -140,12 +137,12 @@ const convertApiDataToMockFormat = async (timeRange: string) => {
const date = new Date(item.alarm_time_)
return date.getDay() === 1 // 周一
})
// 如果找到周一，则从周一开始截取数据；否则保持原数据
const filteredData = firstMondayIndex !== -1
? dataArray.slice(firstMondayIndex)
const filteredData = firstMondayIndex !== -1
? dataArray.slice(firstMondayIndex)
: dataArray
datavalues = [['时间', '数值'], ...filteredData.map(item => [
convertToChineseWeekday(item.alarm_time_),
item.avg_handle_time_seconds || 0
@ -172,7 +169,7 @@ const convertApiDataToMockFormat = async (timeRange: string) => {
default:
datavalues = [['时间', '数值']]
}
return {
alertTotal,
unprocessedAlert,
@ -198,12 +195,12 @@ const updateChartData = async () => {
// 图表配置
const chartOption = computed(() => {
const mergedOption = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
if (!mergedOption.dataset) {
mergedOption.dataset = {}
}
mergedOption.dataset.source = currentData.value.datavalues
return mergedOption
})
@ -400,13 +397,21 @@ onMounted(() => {
.buttonContent span {
font-size: 15px;
color: #ffffff;
letter-spacing: 2px;
font-weight: 500;
text-shadow: -4px -4px 10px #3B8ED4;
padding: 0;
margin: 0;
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
margin-top: -2px;
}
.title {
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
</style>

4
src/packages/components/Charts/HazardousChemicalsSpace/MaxTrimHaz/config.ts
View File

@ -3,6 +3,7 @@ import { CreateComponentType } from '@/packages/index.d'
import { MaxTrimConfig } from './index'
import cloneDeep from 'lodash/cloneDeep'
import { chartInitConfig } from '@/settings/designSetting'
import { fontFamily } from 'html2canvas/dist/types/css/property-descriptors/font-family'
export enum WritingModeEnum {
HORIZONTAL = '水平',
@ -41,10 +42,11 @@ export const option = {
paddingX: 35,
paddingY: 6,
textAlign: 'start', // 水平对齐方式
fontWeight: 'bold',
fontWeight: 'normal',
fontStyle: 'italic',
// 字间距
letterSpacing: 10,
fontFamily: 'CustomFont',
writingMode: 'horizontal-tb',
backgroundColor: '#00000000'
}

7
src/packages/components/Charts/HazardousChemicalsSpace/MaxTrimHaz/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="go-text-box">
<div class="content" >
<div class="content">
{{ option.dataset }}
</div>
<svg width="1920" height="94" class="svg" viewBox="0 0 1920 94" fill="none"
@ -286,7 +286,7 @@ const { fontColor,
writingMode,
backgroundColor,
fontWeight,
fontStyle, fontShadowColor } = toRefs(props.chartConfig.option)
fontStyle, fontShadowColor, fontFamily } = toRefs(props.chartConfig.option)
const option = shallowReactive({
dataset: configOption.dataset
@ -333,7 +333,8 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
font-weight: v-bind('fontWeight');
font-style: v-bind('fontStyle');
background-color: v-bind('backgroundColor');
text-shadow: 0px 4px 3px v-bind('fontShadowColor');
text-shadow: 0px 4px 3px v-bind('fontShadowColor');
font-family: v-bind('fontFamily');
}
.go-text-box .svg {

11
src/packages/components/Charts/HazardousChemicalsSpace/PieCenterHaz/index.vue
View File

@ -328,12 +328,13 @@ const handleSelectChange = async (value: string) => {
height: 45px;
line-height: 45px;
left: 80px;
font-size: 16px;
font-weight: bold;
color: #eee;
font-style: italic;
text-shadow: 0 0 10px #00E5FF;
white-space: nowrap;
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}

4
src/packages/components/Charts/HazardousChemicalsSpace/SmallBorder/index.vue
View File

@ -67,9 +67,11 @@ $border-gradient-end: rgba(128, 128, 128, 0);
// z-index: 2;
width: 100%;
height: 12%;
.svg{
.svg {
width: 100%;
}
// background-color: antiquewhite;
& .svg {

40
src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/config.ts
View File

@ -3,7 +3,7 @@ import { CreateComponentType } from '@/packages/index.d'
import { TopAlarmsConfig } from './index'
import dataJson from './data.json'
export const option = {
dateTime: {
dateTime: {
selectValue: 'day',
dataset: [
{
@ -29,26 +29,26 @@ export const option = {
]
},
dataset: dataJson.source,
title: '未处置报警数TOP5',
titleColor: '#ffffff',
titleSize: 17,
rankColor: '#5AA1AD',
nameColor: '#eeeeee',
valueColor: '#eeeeee',
barColorStart: '#2f72b5',
barColorEnd: '#99C6E6',
dropdownOptions: ['当日', '当月', '当年'],
dropdownDefault: '当日',
iconColor: '#00E5FF',
letterSpacing: 1,
paddingX: 40,
paddingY: -5,
isShowButton: false
dataset: dataJson.source,
title: '未处置报警数TOP5',
titleColor: '#ffffff',
titleSize: 16,
rankColor: '#5AA1AD',
nameColor: '#eeeeee',
valueColor: '#eeeeee',
barColorStart: '#2f72b5',
barColorEnd: '#99C6E6',
dropdownOptions: ['当日', '当月', '当年'],
dropdownDefault: '当日',
iconColor: '#00E5FF',
letterSpacing: 0.5,
paddingX: 45,
paddingY: -5,
isShowButton: false
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = TopAlarmsConfig.key
public chartConfig = TopAlarmsConfig
public option = option
public key = TopAlarmsConfig.key
public chartConfig = TopAlarmsConfig
public option = option
}

19
src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/index.vue
View File

@ -1,12 +1,8 @@
<template>
<SmallBorder class="SmallBorder">
<div class="go-top-alarms">
<CustomSelect
:options="option.dateTime.dataset"
:selectedValue="option.dateTime.selectValue"
@change="handleSelectChange"
class="top-select"
/>
<CustomSelect :options="option.dateTime.dataset" :selectedValue="option.dateTime.selectValue"
@change="handleSelectChange" class="top-select" />
<div class="header">
<div class="title">
<div class="title-text">
@ -143,7 +139,7 @@ onMounted(async () => {
color: #fff;
.top-select {
top:20px;
top: 20px;
}
.header {
@ -161,9 +157,16 @@ onMounted(async () => {
height: 35px;
display: flex;
align-items: center;
padding: 0 20px 0 20px;
padding: 2px 20px 0 20px;
margin-left: 0px;
clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
}

88
src/packages/components/Charts/HazardousChemicalsSpace/yushiVideoHaz/index.vue
View File

@ -5,53 +5,23 @@
<div class="header-title">实时视频</div>
<div :class="option.isOldStyle ? 'video_title' : 'video_title video_title_new'" v-if="option.showBtn">
<div class="title_text" v-if="option.showTree && option.showBtn">{{ option.videoTitle }}</div>
<n-select
v-if="!option.showTree"
class="video_select"
placement="top-end"
v-model:value="option.selectedDataSource"
:options="option.dataSource"
:style="`width:${w / 2}px;`"
@update:value="handleSelectDataSource"
/>
<n-button
tertiary
v-else-if="option.showTree && option.showBtn && option.isOldStyle"
<n-select v-if="!option.showTree" class="video_select" placement="top-end"
v-model:value="option.selectedDataSource" :options="option.dataSource" :style="`width:${w / 2}px;`"
@update:value="handleSelectDataSource" />
<n-button tertiary v-else-if="option.showTree && option.showBtn && option.isOldStyle"
:class="option.isOldStyle ? 'videoChangBtn' : 'videoChangBtn videoChangBtn_new'"
@click="handleClick"
>切换</n-button
>
<n-button
tertiary
v-else-if="option.showTree && option.showBtn && !option.isOldStyle"
@click="handleClick">切换</n-button>
<n-button tertiary v-else-if="option.showTree && option.showBtn && !option.isOldStyle"
:class="option.isOldStyle ? 'videoChangBtn' : 'videoChangBtn videoChangBtn_new'"
@click="handleClick"
></n-button>
@click="handleClick"></n-button>
<n-modal
v-model:show="showDialog"
:mask-closable="false"
preset="card"
title="选择摄像头"
:class="['custom-tab-modal']"
:draggable="{ bounds: 'none' }"
:style="{ width: '644px', height: '420px' }"
>
<n-tree-select
ref="cameraTree"
class="cameraTree"
:menu-props="{
class: 'custom-dropdown'
}"
v-model:value="option.selectedDataSource"
:options="option.dataset.list"
clearable
:default-expanded-keys="option.expandedKeys"
style="width: 615px; margin-top: 16px"
:show="isDropdownOpen"
@update:show="handleShowChange"
@update:value="handleSelectDataSource"
/>
<n-modal v-model:show="showDialog" :mask-closable="false" preset="card" title="选择摄像头"
:class="['custom-tab-modal']" :draggable="{ bounds: 'none' }" :style="{ width: '644px', height: '420px' }">
<n-tree-select ref="cameraTree" class="cameraTree" :menu-props="{
class: 'custom-dropdown'
}" v-model:value="option.selectedDataSource" :options="option.dataset.list" clearable
:default-expanded-keys="option.expandedKeys" style="width: 615px; margin-top: 16px" :show="isDropdownOpen"
@update:show="handleShowChange" @update:value="handleSelectDataSource" />
</n-modal>
</div>
<div ref="vYushiVideoRef" class="go-video" :id="uuid"></div>
@ -625,7 +595,7 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (n
}
</style>
<style lang="scss">
.custom-tab-modal > .n-card-header {
.custom-tab-modal>.n-card-header {
background-color: rgba(26, 56, 113, 1) !important;
background-image: linear-gradient(to right, rgba(8, 100, 177, 0.7), transparent) !important;
padding: 16px !important;
@ -633,7 +603,7 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (n
border-bottom-width: 0px !important;
}
.custom-tab-modal > .n-card__content {
.custom-tab-modal>.n-card__content {
background-color: rgba(26, 56, 113, 1) !important;
border: 2px solid rgba(62, 200, 244, 1);
padding-left: 12px;
@ -729,6 +699,7 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (n
box-shadow: unset !important;
width: 615px !important;
}
.custom-data-table .v-binder-follower-content {
transform: translateX(7px) translateY(104px) !important;
}
@ -773,18 +744,19 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (n
}
}
.header-title{
position: absolute;
top: 0;
height: 45px;
line-height: 45px;
left: 80px;
font-size: 16px;
font-weight: bold;
color: #eee;
font-style: italic;
text-shadow: 0 0 10px #00E5FF;
white-space: nowrap;
.header-title {
position: absolute;
top: 3px;
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;
}
.svg {