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