目录
公益宣传片（视频MP4）， 火灾启示录（视频MP4），消防宣教员（视频MP4），消防设施原理（视频MP4）
一、项目需求
项目名称：【消防安全宣传】。
功能模块（共6个模块）：公益宣传片（视频MP4）， 火灾启示录（视频MP4），消防宣教员（视频MP4），消防设施原理（视频MP4），消防标识识别（大图标宣传展示），消防体验游戏（互动游戏）。
功能说明：各个模块图片，视频，音乐等素材可动态配置，实时生效；
游戏问题数量可定义N个，程序自动随机选择不重复的问题；
项目工期：15个工作日。
二、效果展示
1、动态视频
2、切片效果图
主页
公益宣传片（视频MP4）， 火灾启示录（视频MP4），消防宣教员（视频MP4），消防设施原理（视频MP4）
视频播放页 - 自动播放 + 循环播放
消防标识识别模块
点击图标后放大效果
游戏问答模块
开始页
问题页
答案提示页
问答结束页
三、项目架构
- 触摸屏 Windows系统，分辨率 1920*1080px；（代码支持运行环境Windows，Linux类系统。）
- 可执行程序exe 开机自启动，自动全屏最大化；
- B/S架构，支持Chrome，IE，QQ等主流浏览器；
- http服务器：go 语言。
四、项目分析
1、http服务器：go 语言
http 服务器代码
func main() {
go browser()
r := gin.Default()
r.StaticFS("/static", http.Dir("./static"))
r.Run(":" + strconv.Itoa(http_port)) //默认在本地8080端口启动服务
}打开浏览器命令代码
func browser(){
cmd := exec.Command("./Browser/chrome.exe", "--kiosk", "http://127.0.0.1:" + strconv.Itoa(http_port) + "/static/index.html")
err := cmd.Run()
fmt.Printf("%s, error:%v \n", "cmd", err)
}2、前端技术 html + javascript；
<div id="base" class="">
<!-- 背景 (Image) -->
<div id="u1" class="ax_default image">
<img id="u1_img" class="img " src="images/index/u1.png" />
<div id="u1_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- 1 公益 (Image) -->
<div id="u2" class="ax_default image" onclick="play_video('gongyi')">
<img id="u2_img" class="img " src="images/index/u2.png" />
<div id="u2_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- 2 启示 anli (Image) -->
<div id="u3" class="ax_default image" onclick="play_video('qishi')">
<img id="u3_img" class="img " src="images/index/u3.png" />
<div id="u3_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- 3 宣教 (Image) -->
<div id="u4" class="ax_default image" onclick="play_video('xuanjiao')">
<img id="u4_img" class="img " src="images/index/u4.png" />
<div id="u4_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- 4 设施 (Image) -->
<div id="u5" class="ax_default image" onclick="play_video('sheshi')">
<img id="u5_img" class="img " src="images/index/u5.png" />
<div id="u5_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- 5 标识 (Image) -->
<div id="u6" class="ax_default image">
<img id="u6_img" class="img " src="images/index/u6.png" />
<div id="u6_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
<!-- 6 游戏 (Image) -->
<div id="u7" class="ax_default image">
<img id="u7_img" class="img " src="images/index/u7.png" />
<div id="u7_text" class="text " style="display:none; visibility: hidden">
<p></p>
</div>
</div>
</div>3、动态配置项
[
{
"question": "下面哪个是119火警电话标识？",
"answer": "u111.png",
"answer_list": {
"A": "u131.png",
"B": "u161.png",
"C": "u111.png",
"D": "u151.png"
}
},
{
"question": "下面哪个是消防栓标识？",
"answer": "u171.png",
"answer_list": {
"A": "u161.png",
"B": "u311.png",
"C": "u171.png",
"D": "u151.png"
}
},
{
"question": "下面哪个是安全通道标识？",
"answer": "u131.png",
"answer_list": {
"A": "u111.png",
"B": "u131.png",
"C": "u181.png",
"D": "u141.png"
}
},
{
"question": "下面哪个是禁止堆放杂物标识？",
"answer": "u331.png",
"answer_list": {
"A": "u371.png",
"B": "u321.png",
"C": "u341.png",
"D": "u331.png"
}
},
{
"question": "下面哪个是消防通道标识？",
"answer": "u221.png",
"answer_list": {
"A": "u361.png",
"B": "u351.png",
"C": "u331.png",
"D": "u221.png"
}
}
]五、更多案例
YYDatav的数据可视化大屏《精彩案例汇总》（Python&Echarts源码）_YYDataV数据可视化的博客-CSDN博客_datav案例
本次分享结束，欢迎交流，需要定制项目请私聊~