37 changed files with 411 additions and 293 deletions
@ -0,0 +1,97 @@ |
|||
// residenceTime 停留时间
|
|||
// screenEntryMethod 入屏方式
|
|||
// screenOutputMethod 出屏方式
|
|||
// screenEntrySpeed 入屏速度
|
|||
// flickerSpeed 闪烁速度
|
|||
// flashingFrequency 闪烁次数
|
|||
// playbackCount 播放次数
|
|||
// xCoordinate x
|
|||
// yCoordinate y
|
|||
// displayAreaWidth 宽度
|
|||
// displayAreaHeight 高度
|
|||
// font 字体
|
|||
// fontSize 字号
|
|||
// fontStyle 字体风格
|
|||
// horizontalAlignment 水平对齐
|
|||
// verticalAlignment 垂直对齐
|
|||
// lineSpacing 行距
|
|||
// fontSpacing 字距
|
|||
// foregroundColor 前景颜色
|
|||
// backgroundColor 背景颜色
|
|||
// playSpecialEffects 播放特效
|
|||
// specialEffectsSpeed 特效速度
|
|||
// playbackDuration 播放时长
|
|||
// playbackCount 播放次数
|
|||
// textContent 文本内容
|
|||
// whetherToPlayText 是否播放文字
|
|||
// whetherToSynchronizePlayback 是否同步播放
|
|||
// setUpTheSpeaker 设置发声音人
|
|||
// volume 音量
|
|||
// speechSpeed 语速
|
|||
// intonation 语调
|
|||
export default [ |
|||
{ |
|||
"backgroundColor": "00000000", |
|||
"displayAreaHeight": "120", |
|||
"displayAreaWidth": "768", |
|||
"flashingFrequency": "5", //闪烁次数
|
|||
"flickerSpeed": "0", //闪烁速度
|
|||
"font": "微软雅黑", |
|||
"fontSize": "14", |
|||
"fontSpacing": "4", |
|||
"fontStyle": "0", |
|||
"foregroundColor": "ffff00", |
|||
"horizontalAlignment": "2", |
|||
"intonation": "0", |
|||
"lineSpacing": "0", |
|||
"playSpecialEffects": "0", |
|||
"playbackCount": "1", |
|||
"playbackDuration": "50", |
|||
"residenceTime": "18", //停留时间
|
|||
"screenEntryMethod": "1", //入屏方式
|
|||
"screenEntrySpeed": "1", //入屏速度
|
|||
"screenOutputMethod": "1", //出屏方式
|
|||
"setUpTheSpeaker": "0", |
|||
"specialEffectsSpeed": "1", |
|||
"speechSpeed": "0", |
|||
"textContent": "因改扩建施工最高限速100km/h", |
|||
"verticalAlignment": "2", |
|||
"volume": "0", |
|||
"whetherToPlayText": "0", |
|||
"whetherToSynchronizePlayback": "0", |
|||
"xCoordinate": "0", |
|||
"yCoordinate": "0" |
|||
}, |
|||
{ |
|||
"backgroundColor": "00000000", |
|||
"displayAreaHeight": "180", |
|||
"displayAreaWidth": "700", |
|||
"flashingFrequency": "5", |
|||
"flickerSpeed": "0", |
|||
"font": "微软雅黑", |
|||
"fontSize": "30", |
|||
"fontSpacing": "20", |
|||
"fontStyle": "0", |
|||
"foregroundColor": "ff0000", |
|||
"horizontalAlignment": "1", |
|||
"intonation": "0", |
|||
"lineSpacing": "10", |
|||
"playSpecialEffects": "0", |
|||
"playbackCount": "1", |
|||
"playbackDuration": "50", |
|||
"residenceTime": "50", |
|||
"screenEntryMethod": "1", |
|||
"screenEntrySpeed": "1", |
|||
"screenOutputMethod": "1", |
|||
"setUpTheSpeaker": "0", |
|||
"specialEffectsSpeed": "1", |
|||
"speechSpeed": "0", |
|||
"textContent": "因改扩建施工最高限速100km/h", |
|||
"verticalAlignment": "2", |
|||
"volume": "0", |
|||
"whetherToPlayText": "0", |
|||
"whetherToSynchronizePlayback": "0", |
|||
"xCoordinate": "0", |
|||
"yCoordinate": "0" |
|||
} |
|||
] |
|||
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 624 B After Width: | Height: | Size: 624 B |
|
Before Width: | Height: | Size: 385 B After Width: | Height: | Size: 385 B |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
@ -1,142 +0,0 @@ |
|||
<template> |
|||
<div class='RoadNetworkMonitoring2'> |
|||
<Tabs :panels="panels" :default-active="activeName" /> |
|||
|
|||
<!-- 搜索栏 --> |
|||
<div class="filter"> |
|||
<div> |
|||
<ButtonGradient> |
|||
<template #prefix> |
|||
<img src="./images/insert.svg" /> |
|||
</template> |
|||
新增 |
|||
</ButtonGradient> |
|||
<ButtonGradient> |
|||
<template #prefix> |
|||
<img src="./images/export.svg" /> |
|||
</template> |
|||
导出 |
|||
</ButtonGradient> |
|||
<ButtonGradient> |
|||
<template #prefix> |
|||
<img src="./images/refresh.svg" /> |
|||
</template> |
|||
刷新 |
|||
</ButtonGradient> |
|||
|
|||
</div> |
|||
<InputSearch style="width: 402px;" /> |
|||
</div> |
|||
|
|||
<!-- 内容 --> |
|||
<div class="body"> |
|||
<RoadStateCard v-for="(item, index) in data" :cardData="item" :key="index" |
|||
:lastBtnColor="item.state === 5 ? '#007FF4' : void 0" :lastBtnText="item.state === 5 ? '去确认' : void 0" /> |
|||
</div> |
|||
|
|||
<!-- 分页 --> |
|||
<div class="footer"> |
|||
<Pagination :total="90" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
|||
import Tabs from '@screen/components/Tabs/index.vue'; |
|||
import RoadStateCard from '@screen/components/RoadStateCard/index.vue'; |
|||
import Pagination from '@screen/components/Pagination.vue'; |
|||
import InputSearch from '@screen/components/InputSearch/index.vue'; |
|||
|
|||
export default { |
|||
name: 'RoadNetworkMonitoring2', |
|||
components: { |
|||
ButtonGradient, |
|||
Tabs, |
|||
Pagination, |
|||
RoadStateCard, |
|||
InputSearch |
|||
}, |
|||
data() { |
|||
return { |
|||
data: Array.from({ length: 15 }).map(() => ({ |
|||
time: "2023.12.22 13:00:00", |
|||
source: "视频智能识别", |
|||
location: "k100+000", |
|||
direction: "济南方向", |
|||
state: (() => { |
|||
const min = 1; |
|||
const max = 5; |
|||
return Math.floor(Math.random() * (max - min + 1)) + min; |
|||
})() |
|||
})), |
|||
|
|||
activeName: "告警事件(20)", |
|||
panels: [ |
|||
{ |
|||
label: "告警事件(20)", |
|||
key: "告警事件(20)" |
|||
}, |
|||
{ |
|||
label: "待确认事件(125)", |
|||
key: "待确认事件(125)" |
|||
}, |
|||
{ |
|||
label: "处置中事件(230)", |
|||
key: "处置中事件(230)" |
|||
}, |
|||
{ |
|||
label: "已处置事件(76)", |
|||
key: "已处置事件(76)" |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.RoadNetworkMonitoring2 { |
|||
padding: 21px; |
|||
|
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
z-index: 6; |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.filter { |
|||
height: 60px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
>div { |
|||
display: flex; |
|||
gap: 6px; |
|||
} |
|||
} |
|||
|
|||
.body { |
|||
flex: 1; |
|||
overflow: hidden; |
|||
display: grid; |
|||
grid-template-columns: repeat(4, 1fr); |
|||
grid-gap: 24px; |
|||
// grid-row-gap: 9px; |
|||
// grid-column-gap: 9px; |
|||
grid-auto-rows: min-content; |
|||
} |
|||
|
|||
.footer { |
|||
margin-top: 15px; |
|||
height: 36px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue