chore:统一小标题css:
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:
parent
c2eb638f78
commit
97a7efab9f
@ -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,
|
||||
|
@ -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 }
|
||||
}
|
@ -68,7 +68,7 @@ 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)
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
@ -45,11 +45,6 @@ const otherConfig = {
|
||||
},
|
||||
titleText: '报警统计',
|
||||
titleOption: {
|
||||
color: '#ffffff',
|
||||
fontSize: '17px',
|
||||
fontStyle: 'normal',
|
||||
fontWeight: 'normal',
|
||||
fontFamily: 'CustomFont',
|
||||
},
|
||||
headerOption: {
|
||||
paddingLeft: 0,
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -29,11 +29,6 @@ export const option = {
|
||||
isOldStyle: true,
|
||||
titleText: '视频巡查',
|
||||
titleOption: {
|
||||
color: '#ffffff',
|
||||
fontSize: '17px',
|
||||
fontStyle: 'normal',
|
||||
fontWeight: 'normal',
|
||||
fontFamily: 'CustomFont',
|
||||
},
|
||||
headerOption: {
|
||||
paddingLeft: 0,
|
||||
|
@ -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
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -371,18 +371,18 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.header-title{
|
||||
.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;
|
||||
font-family: 'CustomFont';
|
||||
font-style: italic;
|
||||
letter-spacing: 0.5px;
|
||||
color: #eee;
|
||||
text-shadow: 1px 3px 10px #000000;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
// 新增风险级别下拉框样式
|
||||
|
@ -7,11 +7,8 @@
|
||||
</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'
|
||||
@ -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>
|
||||
|
@ -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'
|
||||
}
|
||||
|
@ -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
|
||||
@ -334,6 +334,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
|
||||
font-style: v-bind('fontStyle');
|
||||
background-color: v-bind('backgroundColor');
|
||||
text-shadow: 0px 4px 3px v-bind('fontShadowColor');
|
||||
font-family: v-bind('fontFamily');
|
||||
}
|
||||
|
||||
.go-text-box .svg {
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -32,7 +32,7 @@ export const option = {
|
||||
dataset: dataJson.source,
|
||||
title: '未处置报警数TOP5',
|
||||
titleColor: '#ffffff',
|
||||
titleSize: 17,
|
||||
titleSize: 16,
|
||||
rankColor: '#5AA1AD',
|
||||
nameColor: '#eeeeee',
|
||||
valueColor: '#eeeeee',
|
||||
@ -41,8 +41,8 @@ export const option = {
|
||||
dropdownOptions: ['当日', '当月', '当年'],
|
||||
dropdownDefault: '当日',
|
||||
iconColor: '#00E5FF',
|
||||
letterSpacing: 1,
|
||||
paddingX: 40,
|
||||
letterSpacing: 0.5,
|
||||
paddingX: 45,
|
||||
paddingY: -5,
|
||||
isShowButton: false
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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="{
|
||||
<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"
|
||||
/>
|
||||
}" 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{
|
||||
.header-title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: 3px;
|
||||
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;
|
||||
}
|
||||
|
||||
.svg {
|
||||
|
Loading…
Reference in New Issue
Block a user