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 = { export const styleConfig = {
titleText: '实时报警', titleText: '实时报警',
titleOption: { titleOption: {
color: '#ffffff',
fontSize: '17px',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'CustomFont',
}, },
headerOption: { headerOption: {
paddingLeft: 0, 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 key: string = FiniteSpatialDistributionConfig.key
public chartConfig = cloneDeep(FiniteSpatialDistributionConfig) public chartConfig = cloneDeep(FiniteSpatialDistributionConfig)
public option = echartOptionProfixHandle(option, includes) 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 { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components' import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
import dataJson from './data.json' import dataJson from './data.json'
import { getPie3D } from './3dPie' import { getPie3D } from './3dPie'
import axiosInstance from '@/api/axios'; import axiosInstance from '@/api/axios';
const props = defineProps({ const props = defineProps({
@ -55,12 +55,12 @@ const initializeChartData = () => {
// 使用 dataJson 中的 source 数据初始化图表 // 使用 dataJson 中的 source 数据初始化图表
if (dataJson && dataJson.source) { if (dataJson && dataJson.source) {
props.chartConfig.option.dataset = { ...dataJson } props.chartConfig.option.dataset = { ...dataJson }
// 计算总数并更新标题 // 计算总数并更新标题
const totalValue = dataJson.source.reduce((total: number, item: any) => { const totalValue = dataJson.source.reduce((total: number, item: any) => {
return total + (item.value || 0) return total + (item.value || 0)
}, 0) }, 0)
// 更新图表标题中的总数 // 更新图表标题中的总数
if (props.chartConfig.option.title && props.chartConfig.option.title[0]) { if (props.chartConfig.option.title && props.chartConfig.option.title[0]) {
props.chartConfig.option.title[0].text = totalValue props.chartConfig.option.title[0].text = totalValue
@ -68,8 +68,8 @@ const initializeChartData = () => {
const series = getPie3D(dataJson.source, 0.8); const series = getPie3D(dataJson.source, 0.8);
props.chartConfig.option.series=series props.chartConfig.option.series = series
console.log('图表数据已初始化:', props.chartConfig.option.dataset) console.log('图表数据已初始化:', props.chartConfig.option.dataset)
} }
} }
@ -79,11 +79,11 @@ const updateChartData = (newData: any) => {
// 确保数据被正确设置到图表配置中 // 确保数据被正确设置到图表配置中
props.chartConfig.option.dataset = newData props.chartConfig.option.dataset = newData
const totalValue = newData.source.reduce((total: number, item: any) => { const totalValue = newData.source.reduce((total: number, item: any) => {
return total + (item.value || 0) return total + (item.value || 0)
}, 0) }, 0)
// 更新图表标题中的总数 // 更新图表标题中的总数
if (props.chartConfig.option.title && props.chartConfig.option.title[0]) { if (props.chartConfig.option.title && props.chartConfig.option.title[0]) {
props.chartConfig.option.title[0].text = totalValue props.chartConfig.option.title[0].text = totalValue
@ -158,13 +158,14 @@ onMounted(async () => {
top: 0; top: 0;
height: 45px; height: 45px;
line-height: 45px; line-height: 45px;
left: 80px; left: 70px;
font-size: 16px;
font-weight: bold;
color: #eee;
font-style: italic;
text-shadow: 0 0 10px #00E5FF;
white-space: nowrap; 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: '报警统计', titleText: '报警统计',
titleOption: { titleOption: {
color: '#ffffff',
fontSize: '17px',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'CustomFont',
}, },
headerOption: { headerOption: {
paddingLeft: 0, paddingLeft: 0,

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

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

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

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

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

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

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

@ -104,7 +104,14 @@ const getStatusColor = (status: string) => {
height: 35px; height: 35px;
display: flex; display: flex;
align-items: center; 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, itemHeight: 28,
fontSize: 12, fontSize: 12,
title: '近60分钟报警信息', title: '近60分钟报警信息',
titleSize: 17, titleSize: 16,
titleColor: '#ffffff', titleColor: '#ffffff',
iconColor: '#00E5FF',
fontWeight: 'normal', fontWeight: 'normal',
fontStyle: 'normal', fontStyle: 'italic',
paddingX: 40, paddingX: 45,
paddingY: -30, paddingY: -25,
letterSpacing: 1, letterSpacing: 0.5,
isShowButton: false isShowButton: false
} }

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

@ -179,6 +179,13 @@ onUnmounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 20px 0 20px; 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{ .header-title {
position: absolute; position: absolute;
top: 0; height: 45px;
height: 45px; line-height: 45px;
line-height: 45px; left: 80px;
left: 80px; white-space: nowrap;
font-size: 16px; font-family: 'CustomFont';
font-weight: bold; font-style: italic;
color: #eee; letter-spacing: 0.5px;
font-style: italic; color: #eee;
text-shadow: 0 0 10px #00E5FF; text-shadow: 1px 3px 10px #000000;
white-space: nowrap; font-size: 16px;
} }
// 新增风险级别下拉框样式 // 新增风险级别下拉框样式

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

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

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

@ -1,6 +1,6 @@
<template> <template>
<div class="go-text-box"> <div class="go-text-box">
<div class="content" > <div class="content">
{{ option.dataset }} {{ option.dataset }}
</div> </div>
<svg width="1920" height="94" class="svg" viewBox="0 0 1920 94" fill="none" <svg width="1920" height="94" class="svg" viewBox="0 0 1920 94" fill="none"
@ -286,7 +286,7 @@ const { fontColor,
writingMode, writingMode,
backgroundColor, backgroundColor,
fontWeight, fontWeight,
fontStyle, fontShadowColor } = toRefs(props.chartConfig.option) fontStyle, fontShadowColor, fontFamily } = toRefs(props.chartConfig.option)
const option = shallowReactive({ const option = shallowReactive({
dataset: configOption.dataset dataset: configOption.dataset
@ -333,7 +333,8 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
font-weight: v-bind('fontWeight'); font-weight: v-bind('fontWeight');
font-style: v-bind('fontStyle'); font-style: v-bind('fontStyle');
background-color: v-bind('backgroundColor'); 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 { .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; height: 45px;
line-height: 45px; line-height: 45px;
left: 80px; left: 80px;
font-size: 16px;
font-weight: bold;
color: #eee;
font-style: italic;
text-shadow: 0 0 10px #00E5FF;
white-space: nowrap; 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; // z-index: 2;
width: 100%; width: 100%;
height: 12%; height: 12%;
.svg{
.svg {
width: 100%; width: 100%;
} }
// background-color: antiquewhite; // background-color: antiquewhite;
& .svg { & .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 { TopAlarmsConfig } from './index'
import dataJson from './data.json' import dataJson from './data.json'
export const option = { export const option = {
dateTime: { dateTime: {
selectValue: 'day', selectValue: 'day',
dataset: [ dataset: [
{ {
@ -29,26 +29,26 @@ export const option = {
] ]
}, },
dataset: dataJson.source, dataset: dataJson.source,
title: '未处置报警数TOP5', title: '未处置报警数TOP5',
titleColor: '#ffffff', titleColor: '#ffffff',
titleSize: 17, titleSize: 16,
rankColor: '#5AA1AD', rankColor: '#5AA1AD',
nameColor: '#eeeeee', nameColor: '#eeeeee',
valueColor: '#eeeeee', valueColor: '#eeeeee',
barColorStart: '#2f72b5', barColorStart: '#2f72b5',
barColorEnd: '#99C6E6', barColorEnd: '#99C6E6',
dropdownOptions: ['当日', '当月', '当年'], dropdownOptions: ['当日', '当月', '当年'],
dropdownDefault: '当日', dropdownDefault: '当日',
iconColor: '#00E5FF', iconColor: '#00E5FF',
letterSpacing: 1, letterSpacing: 0.5,
paddingX: 40, paddingX: 45,
paddingY: -5, paddingY: -5,
isShowButton: false isShowButton: false
} }
export default class Config extends PublicConfigClass implements CreateComponentType { export default class Config extends PublicConfigClass implements CreateComponentType {
public key = TopAlarmsConfig.key public key = TopAlarmsConfig.key
public chartConfig = TopAlarmsConfig public chartConfig = TopAlarmsConfig
public option = option public option = option
} }

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

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