feat : 完善视频巡查样式
This commit is contained in:
parent
24f0a52bee
commit
1f0e81ca7f
@ -14,7 +14,7 @@ export const styleConfig = {
|
|||||||
fontFamily: 'CustomFont',
|
fontFamily: 'CustomFont',
|
||||||
},
|
},
|
||||||
headerOption: {
|
headerOption: {
|
||||||
paddingLeft: 30,
|
paddingLeft: 0,
|
||||||
paddingRight: 0,
|
paddingRight: 0,
|
||||||
paddingTop: 0,
|
paddingTop: 0,
|
||||||
paddingBottom: 0
|
paddingBottom: 0
|
||||||
|
@ -43,6 +43,10 @@ onMounted(() => {
|
|||||||
console.error("无法访问 iframe 内的 g.active3d 对象。");
|
console.error("无法访问 iframe 内的 g.active3d 对象。");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
// 禁止聚焦,免得柱图消失
|
||||||
|
setTimeout(() => {
|
||||||
|
callIframeMethod("setProvinceFocusable", false)
|
||||||
|
}, 3000)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -55,6 +59,7 @@ watchEffect(() => {
|
|||||||
|
|
||||||
// 增加延迟,确保iframe内方法准备就绪
|
// 增加延迟,确保iframe内方法准备就绪
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|
||||||
BarOptionsData.value.forEach(barConfig => {
|
BarOptionsData.value.forEach(barConfig => {
|
||||||
// console.log(" Drawing bar with config:", barConfig);
|
// console.log(" Drawing bar with config:", barConfig);
|
||||||
callIframeMethod("createBar", barConfig);
|
callIframeMethod("createBar", barConfig);
|
||||||
|
@ -52,7 +52,7 @@ const otherConfig = {
|
|||||||
fontFamily: 'CustomFont',
|
fontFamily: 'CustomFont',
|
||||||
},
|
},
|
||||||
headerOption: {
|
headerOption: {
|
||||||
paddingLeft: 30,
|
paddingLeft: 0,
|
||||||
paddingRight: 0,
|
paddingRight: 0,
|
||||||
paddingTop: 0,
|
paddingTop: 0,
|
||||||
paddingBottom: 0
|
paddingBottom: 0
|
||||||
|
@ -224,7 +224,7 @@
|
|||||||
<span class="right-select">
|
<span class="right-select">
|
||||||
<ConsumSelect v-show="selectOption.show" :options="selectOption.dataset"
|
<ConsumSelect v-show="selectOption.show" :options="selectOption.dataset"
|
||||||
:selectedValue="selectOption.selectValue" @change="handleSelectChange"
|
:selectedValue="selectOption.selectValue" @change="handleSelectChange"
|
||||||
select-style-config="selectStyleConfig" />
|
:select-style-config="selectStyleConfig" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
|
@ -25,7 +25,21 @@ export const option = {
|
|||||||
/** 外层css缩放比例 */
|
/** 外层css缩放比例 */
|
||||||
sca: 1,
|
sca: 1,
|
||||||
showBtn: true,
|
showBtn: true,
|
||||||
isOldStyle: true
|
isOldStyle: true,
|
||||||
|
titleText: '实时报警',
|
||||||
|
titleOption: {
|
||||||
|
color: '#ffffff',
|
||||||
|
fontSize: '17px',
|
||||||
|
fontStyle: 'normal',
|
||||||
|
fontWeight: 'normal',
|
||||||
|
fontFamily: 'CustomFont',
|
||||||
|
},
|
||||||
|
headerOption: {
|
||||||
|
paddingLeft: 0,
|
||||||
|
paddingRight: 0,
|
||||||
|
paddingTop: 0,
|
||||||
|
paddingBottom: 0
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
|
@ -1,28 +1,33 @@
|
|||||||
<!-- eslint-disable vue/multi-word-component-names -->
|
<!-- eslint-disable vue/multi-word-component-names -->
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div :class="option.isOldStyle ? 'video_title' : 'video_title video_title_new'" v-if="option.showBtn">
|
<SmallBaorder01 :titleText="option.titleText" :title-option="option.titleOption"
|
||||||
<div class="title_text" v-if="option.showTree && option.showBtn">{{ option.videoTitle }}</div>
|
:headerOption="option.headerOption">
|
||||||
<n-select v-if="!option.showTree" class="video_select" placement="top-end"
|
<div :class="option.isOldStyle ? 'video_title' : 'video_title video_title_new'" v-if="option.showBtn">
|
||||||
v-model:value="option.selectedDataSource" :options="option.dataSource" :style="`width:${w / 2}px;`"
|
<div class="title_text" v-if="option.showTree && option.showBtn">{{ option.videoTitle }}</div>
|
||||||
@update:value="handleSelectDataSource" />
|
<n-select v-if="!option.showTree" class="video_select" 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;`"
|
||||||
:class="option.isOldStyle ? 'videoChangBtn' : 'videoChangBtn videoChangBtn_new'"
|
@update:value="handleSelectDataSource" />
|
||||||
@click="handleClick">切换</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'" @click="handleClick"
|
||||||
:class="option.isOldStyle ? 'videoChangBtn' : 'videoChangBtn videoChangBtn_new'"
|
class="button">切换</n-button>
|
||||||
@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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
</SmallBaorder01>
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -39,6 +44,7 @@ import { PageEnum } from '@/enums/pageEnum'
|
|||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import { getUUID, isPreview } from '@/utils'
|
import { getUUID, isPreview } from '@/utils'
|
||||||
import { useYushiVideoStore } from '@/store/modules/yushiVideoStore/yushiVideoStore'
|
import { useYushiVideoStore } from '@/store/modules/yushiVideoStore/yushiVideoStore'
|
||||||
|
import SmallBaorder01 from '../SmallBorder01Co/index.vue'
|
||||||
|
|
||||||
const yushiStore = useYushiVideoStore()
|
const yushiStore = useYushiVideoStore()
|
||||||
let selectedList = []
|
let selectedList = []
|
||||||
@ -594,6 +600,8 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (n
|
|||||||
margin: 4px 0;
|
margin: 4px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.videoChangBtn {
|
.videoChangBtn {
|
||||||
padding: 4px 4px;
|
padding: 4px 4px;
|
||||||
border: 1px solid rgb(24, 160, 219);
|
border: 1px solid rgb(24, 160, 219);
|
||||||
@ -607,6 +615,13 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (n
|
|||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-image: url('data:image/png;base64,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');
|
background-image: url('data:image/png;base64,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');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background-color: #1E5676;
|
||||||
|
border: 1px solid #2E6E89;
|
||||||
|
padding: 12px 10px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.custom-tab-modal>.n-card-header {
|
.custom-tab-modal>.n-card-header {
|
||||||
|
Loading…
Reference in New Issue
Block a user