diff --git a/public/css/sichuanTibet.css b/public/css/sichuanTibet.css
new file mode 100644
index 0000000..856c989
--- /dev/null
+++ b/public/css/sichuanTibet.css
@@ -0,0 +1,1272 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body::-webkit-scrollbar{
+    display: none;
+}
+.max{
+    position: relative;
+    width: 1920px;
+    height: 1080px;
+    color: #ffffff;
+    /*background: url("/images/ai/background.png") no-repeat center/100% 100%;*/
+}
+.ai-max{
+    position: relative;
+    width: 1920px;
+    height: 1080px;
+    color: #ffffff;
+    background:#030419;
+    font-size: 14px;
+}
+.header{
+    height: 70px;
+    background: rgba(0,0,0,0.5) url("/images/ai/head_bgd.png") no-repeat center/100% 100%;
+    display: flex;
+    font-size: 14px;
+    position: absolute;
+    width: 100%;
+    top:0;
+    left: 0;
+    z-index: 999;
+}
+.header-max{
+    height: 70px;
+}
+@font-face {
+    font-family: "HYLXTJ";
+    src:url(../fonts/HYLXTJ.eot),url(../fonts/HYLXTJ.svg),url(../fonts/HYLXTJ.ttf),url(../fonts/HYLXTJ.woff),url(../fonts/HYLXTJ.woff2)
+}
+.header-name{
+    line-height: 60px;
+    font-family: "HYLXTJ";
+    font-size:30px;
+    padding-left: 15px;
+    background-image:-webkit-linear-gradient(bottom,#3da2ff,#3ea4ff,#96f3ff);
+    -webkit-background-clip:text;
+    -webkit-text-fill-color:transparent;
+    width: 31%;
+}
+.header-btn{
+    width: 52%;
+    display: flex;
+    padding-top: 20px;
+}
+.header-time{
+    width: 17%;
+    display: flex;
+    align-items: center;
+}
+.header-time span{
+    padding: 0 8px;
+}
+.header-tab{
+    height: 40px;
+    width: 14%;
+    background: url("/images/ai/tab_btn.png") no-repeat center/100% 100%;
+    text-align: center;
+    line-height: 40px;
+    cursor: pointer;
+    color: #6183a9;
+}
+.header-tab:hover{
+    color: #ffffff;
+}
+.header-tab.active{
+    background: url("/images/ai/tab_btn_sel.png") no-repeat center/100% 100%;
+    color: #ffffff;
+}
+.header-sel{
+    width:29%;
+    height: 40px;
+    background: url("/images/ai/tab_selcet.png") no-repeat left/100% 100%;
+    position: relative;
+}
+.header-select{
+    height: 100%;
+    line-height: 40px;
+    padding:0 20px;
+    color: #6183a9;
+    cursor: pointer;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.header-option{
+    position: absolute;
+    max-height: 300px;
+    width: 100%;
+    list-style: none;
+    background: #00092a;
+    border: 2px solid #173250;
+    border-radius: 3px;
+    top: 42px;
+    color: #3da2ff;
+    overflow: auto;
+
+}
+.header-option li{
+    padding: 10px;
+    font-size: 14px;
+    cursor: pointer;
+}
+.header-option li:hover {
+    background: #031348;
+}
+.header-option::-webkit-scrollbar {
+    width:5px;
+    height: 1px;
+}
+.header-option::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: #192c64;
+}
+.header-option::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background: #010b2d;
+}
+
+.select-enter,
+.select-leave-to {
+    opacity: 0;
+    transform: translateY(-10px);
+}
+.select-enter-active,
+.select-leave-active{
+    transition: all 0.5s ease;
+}
+
+.tunnel{
+    height: 1000px;
+    width: 100%;
+    background: url("/images/ai/whole_tunnel.png") no-repeat center/100% ;
+}
+.in-left{
+    position: absolute;
+    top: 100px;
+    left: 50px;
+    z-index: 999;
+}
+.in-left-arrow{
+    position: absolute;
+    top: 500px;
+    width: 50px;
+    text-align: center;
+    cursor: pointer;
+    z-index: 999;
+}
+.in-left-content{
+    width: 350px;
+    height: 950px;
+    background: rgba(0,0,0,0.5);
+}
+.in-left-title{
+    height: 30px;
+    background: url("/images/ai/mk_title.png") no-repeat center/100% 100%;
+    line-height: 30px;
+    padding-left: 15px;
+}
+.in-left-top{
+
+}
+.in-left-top-content{
+    padding:0 15px;
+    height: 400px;
+}
+.in-left-bottom-content{
+    height: 490px;
+}
+.in-left-top-type{
+    height: 200px;
+    padding: 0 8px;
+    color: #c8d7fe;
+}
+.in-left-total{
+    height: 200px;
+    background: url("/images/ai/eq_icon.png") no-repeat left/60px;
+}
+.in-left-total-num{
+    padding-top: 70px;
+    padding-left: 65px;
+}
+.in-left-total-num p{
+    padding-bottom: 10px;
+}
+.in-left-total-num label{
+    font-size:25px;
+    font-weight: bold;
+    color:#24d1fc ;
+}
+.in-left-dist{
+    padding-top: 13px;
+}
+.in-left-dist-zj{
+    height: 55px;
+    line-height: 55px;
+    padding-left: 45px;
+    background: url("/images/ai/bgd_zy.png") no-repeat center/100% 38px;
+}
+.in-left-dist-zj span{
+    color: #01bd11;
+    padding-left: 5px;
+}
+.in-left-dist-zl{
+    height: 55px;
+    line-height: 55px;
+    padding-left: 45px;
+    background: url("/images/ai/bgd_zl.png") no-repeat center/100% 38px;
+}
+.in-left-dist-zl span{
+    color: #e4c700;
+    padding-left: 5px;
+}
+.in-left-dist-fb{
+    height: 55px;
+    line-height: 55px;
+    padding-left: 45px;
+    background: url("/images/ai/bgd_fb.png") no-repeat center/100% 38px;
+}
+.in-left-dist-fb span{
+    color: #bb33ff;
+    padding-left: 5px;
+}
+.in-left-top-type-title{
+    height: 30px;
+    line-height: 30px;
+    color: #c8d7fe;
+}
+.in-left-top-type-title i{
+    color:#dfda74 ;
+    font-size: 18px;
+}
+.in-left-top-type-prop{
+
+}
+.in-left-top-type-zy{
+    position: relative;
+    padding-left: 30px;
+    line-height: 50px;
+    height: 50px;
+    background: url("/images/ai/bgd_zy_1.png") no-repeat center/100% 30px;
+}
+.in-left-top-type-zl{
+    position: relative;
+    padding-left: 30px;
+    line-height: 50px;
+    height: 50px;
+    background: url("/images/ai/bgd_zl_1.png") no-repeat center/100% 30px;
+}
+.in-left-top-type-fb{
+    position: relative;
+    padding-left: 30px;
+    line-height: 50px;
+    height: 50px;
+    background: url("/images/ai/bgd_fb_1.png") no-repeat center/100% 30px;
+}
+.in-left-square{
+    width: 12px;
+    height: 12px;
+    background: #4f859f;
+    position: relative;
+    border: 0;
+    top: 1px;
+    margin: 0 2px;
+}
+
+.switch-icon{
+    position: absolute;
+    width: 60px;
+    height: 140px;
+    top: 100px;
+    right: 15px;
+    z-index: 999;
+}
+.switch-icon img{
+    width: 100%;
+    margin: 5px 0;
+    cursor: pointer;
+}
+.in-right{
+    position: absolute;
+    top: 150px;
+    right: 50px;
+    z-index: 999;
+}
+.in-right-content{
+    width: 250px;
+    background: rgba(0,0,0,0.5);
+}
+.in-right-arrow{
+    position: absolute;
+    top: 500px;
+    right: 0;
+    width: 50px;
+    text-align: center;
+    cursor: pointer;
+    z-index: 999;
+}
+.in-right-title{
+    height: 40px;
+    background: url("/images/ai/work_points.png") no-repeat center/100% 100%;
+    text-align: center;
+    line-height: 40px;
+}
+.in-right-screen{
+    padding:10px 10px 0;
+}
+.in-right-screen-ul{
+    margin: 15px 0;
+    padding: 0 10px;
+    list-style: none;
+    color: #c8d7fe;
+    max-height: 400px;
+    overflow: auto;
+}
+.in-right-screen-ul::-webkit-scrollbar {
+    width:5px;
+    height: 1px;
+}
+.in-right-screen-ul::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: #192c64;
+}
+.in-right-screen-ul::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background: #010b2d;
+}
+.in-right-screen-ul li{
+    height: 50px;
+    padding-left: 50px;
+    line-height: 50px;
+    cursor: pointer;
+    background: url("/images/ai/screen_bgd_d.png") no-repeat center/100% 35px;
+}
+.in-right-screen-ul li:hover{
+    background: url("/images/ai/screen_bgd.png") no-repeat center/100% 35px;
+}
+.in-right-screen-ul .active:hover{
+    background: url("/images/ai/screen_bgd_a.png") no-repeat center/100% 35px;
+}
+.in-right-screen-ul .active{
+    background: url("/images/ai/screen_bgd_a.png") no-repeat center/100% 35px;
+}
+
+
+.left-enter,
+.left-leave-to {
+    opacity: 0;
+    transform: translateX(-300px);
+}
+.left-enter-active,
+.left-leave-active{
+    transition: all 0.5s ease;
+}
+
+.right-enter,
+.right-leave-to {
+    opacity: 0;
+    transform: translateX(300px);
+}
+.right-enter-active,
+.right-leave-active{
+    transition: all 0.5s ease;
+}
+.in-btn{
+    position: absolute;
+    top: 880px;
+    padding: 10px 40px;
+    background: url("/images/ai/branch_btn_bgd.png") no-repeat center/100% 100%;
+    color: #c8d7fe;
+    cursor: pointer;
+    z-index: 999;
+}
+.in-btn:hover{
+    color: #ffffff;
+}
+.in-btn:active{
+    color:#c8d7fe;
+}
+.in-btn-one{
+    left: 200px;
+}
+.in-btn-tow{
+    left: 820px;
+}
+.in-btn-three{
+    left: 1500px;
+}
+.in-footer{
+    position: absolute;
+    width: 750px;
+    height: 70px;
+    bottom: 10px;
+    left: 650px;
+    z-index: 999;
+}
+.in-footer-max{
+    display: flex;
+}
+.in-footer-min{
+    padding: 0 10px;
+    color: #c8d7fe;
+}
+.in-footer-number{
+    padding-top:5px;
+}
+.in-footer-number span{
+    color: #87efb0;
+    font-size: 25px;
+    font-weight: bold;
+}
+.in-footer-prop{
+    padding-top: 26px;
+}
+.in-footer-prop span{
+    color: #ececec;
+    font-size: 25px;
+    font-weight: bold;
+}
+.in-footer-number-color span{
+    color: #e1d148;
+}
+.out-branch-btn{
+    height: 40px;
+    position: absolute;
+    bottom: 150px;
+    width: 150px;
+    text-align: center;
+    line-height: 40px;
+    cursor: pointer;
+    color: #9ea8bc;
+    background: url("/images/ai/branch_out_btn.png") no-repeat center/100% 100%;
+}
+.out-branch-btn:hover{
+    color: #ffffff;
+}
+.out-branch-btn_4{
+    left: 500px;
+}
+.out-branch-btn_3{
+    left: 850px;
+}
+.out-branch-btn_2{
+    left: 1200px;
+}
+.out-branch-btn_1{
+    left: 1550px;
+}
+.out-branch-btn.active{
+    color: #ffffff;
+    background: url("/images/ai/branch_out_btn_a.png") no-repeat center/100% 100%;
+}
+
+/*popup*/
+.popup-max{
+    width: 300px;
+   /* background: url("/images/ai/popup_box.png") no-repeat top/100% 100%;*/
+    font-size: 14px;
+    color: #ffffff;
+}
+.popup-new-max{
+    background: url("/images/ai/popup_box.png") no-repeat top/100% 100%;
+}
+.popup-min{
+    padding:5px 15px 20px;
+}
+.popup-top{
+    padding: 10px 0;
+    border-bottom: 2px dashed #405d89;
+    display: flex;
+    align-items: center;
+}
+.popup-machinery-img{
+    padding-right: 10px;
+}
+.popup-machinery-img img{
+    width: 70px;
+    height: 70px;
+    border-radius: 3px;
+}
+.popup-machinery{
+    display: flex;
+    align-items: center;
+    padding: 3px 0;
+}
+.popup-machinery-name{
+    font-size: 14px;
+    padding-right: 10px;
+}
+.popup-machinery-state{
+    padding: 1px 5px;
+    border-radius: 3px;
+}
+.state-yx{
+    background: rgba(0,194,64,0.3);
+    color: #00c240;
+}
+.state-ds{
+    background: rgba(255,205,52,0.3);
+    color: #ffcd34;
+}
+.state-jz{
+    background: rgba(221,221,221,0.3);
+    color: #dddddd;
+}
+.state-lx{
+    background: rgba(153,153,153,0.3);
+    color: #999999;
+}
+.popup-machinery-model{
+    padding-right: 10px;
+}
+.popup-machinery-color{
+    color: #9ea8bc;
+}
+.popup-machinery-oil{
+    color:#01c03f;
+}
+.popup-machinery-oil img{
+    position: relative;
+    top: 3px;
+}
+.red-color{
+    color: #ff0000;
+}
+.popup-content{
+    padding: 10px 0;
+}
+.popup-content-max{
+    display: flex;
+    align-items: center;
+    padding: 5px 0;
+}
+.popup-content-max div:first-child{
+    width:25%;
+    color: #9ea8bc;
+}
+.popup-bottom{
+    background: rgba(4,158,255,0.2);
+    padding: 10px;
+}
+.popup-btn{
+    text-align: center;
+    padding: 15px 0 0;
+}
+.popup-btn button{
+    width: 120px;
+    height: 35px;
+    margin: 0 5px;
+    background: url("/images/ai/popup_btn_bgd.png") no-repeat center/100% 100%;
+    border: 0;
+    outline: 0;
+    cursor: pointer;
+    color: #dddddd;
+}
+.popup-btn button:hover{
+    color: #ffffff;
+}
+.popup-btn button:active{
+    color: #dddddd;
+}
+
+/*AI视频分析*/
+.ai-popup{
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: rgba(0,0,0,0.5);
+    z-index: 9999999;
+    padding-top: 10vh;
+    text-align: center;
+}
+.ai-popup img{
+    height: 80vh;
+}
+
+/*popup*/
+.popup-max{
+    width: 360px;
+    background: url("/images/ai/popup_box.png") no-repeat top/100% 100%;
+    font-size: 14px;
+}
+
+.popup-max-two{
+    width: 320px;
+    background: url("/images/ai/popup_box.png") no-repeat top/100% 100%;
+    font-size: 14px;
+}
+
+
+.popup-map-max{
+    background:none;
+    color: #fff;
+    min-height: 150px;
+}
+.popup-min{
+    padding:5px 15px;
+}
+.popup-top{
+    padding: 10px 0;
+    border-bottom: 2px dashed #405d89;
+}
+.popup-map-top{
+    height: 75px;
+}
+.popup-map-left{
+    float: left;
+    width: 33%;
+    height: 75px;
+}
+.popup-map-right{
+    float: left;
+    width:66%;
+    height: 75px;
+}
+.popup-machinery-img{
+    padding-right: 10px;
+}
+.popup-machinery-img img{
+    width: 70px;
+    height: 70px;
+    border-radius: 3px;
+}
+.popup-machinery{
+    display: flex;
+    align-items: center;
+    padding: 2px 0;
+}
+.popup-machinery-name{
+    font-size: 16px;
+    padding-right: 10px;
+}
+.popup-machinery-state{
+    padding: 1px 5px;
+    border-radius: 3px;
+}
+
+.ai-content{
+    padding:10px 15px;
+}
+.ai-left{
+    height: 970px;
+    border: 1px solid #ffffff;
+}
+.ai-content-padding{
+    padding: 15px;
+}
+.ai-video-survey{
+    height: 150px;
+    background: url("/images/ai/bgd_video_survey.png") no-repeat center/100% 100%;
+}
+.ai-warning-survey{
+    height: 400px;
+    background: url("/images/ai/bgd_warning_survey.png") no-repeat center/100% 100%;
+}
+.ai-warning-distribution{
+    height: 465px;
+    background: url("/images/ai/bgd_warning_distribution.png") no-repeat center/100% 100%;
+}
+.ai-warning-list{
+    height: 960px;
+    background: url("/images/one/3x1.png") no-repeat center/100% 100%;
+}
+.ai-key-videos{
+    height: 310px;
+    background: url("/images/ai/bgd_key_videos.png") no-repeat center/100% 100%;
+}
+.ai-video-info{
+    height: 650px;
+}
+.ai-video-title{
+    height: 25px;
+    padding:0 10px;
+    line-height: 25px;
+    display: flex;
+    justify-content: space-between;
+}
+.ai-video-number{
+    color: #9acdde;
+    font-size: 12px;
+}
+
+/*视频概况*/
+.ai-survey-content{
+    padding:45px 30px;
+}
+.ai-survey-info{
+    padding-left: 75px;
+    height: 65px;
+    color: #c8d7ff;
+}
+.ai-survey-info p{
+    padding: 5px 0 10px;
+}
+.ai-survey-info-1{
+    background: url("/images/ai/survey_info_ren.png") no-repeat left/65px 65px
+}
+.ai-survey-info-1 span{
+    color:#88c9ff ;
+    font-size: 22px;
+    font-weight: bold;
+}
+.ai-survey-info-2{
+    background: url("/images/ai/survey_info_che.png") no-repeat left/65px 65px
+}
+.ai-survey-info-2 span{
+    color:#61f2b9 ;
+    font-size: 22px;
+    font-weight: bold;
+}
+
+/*预警列表*/
+.ai-warning-list-content{
+    padding:20px 15px 10px;
+}
+.ai-warning-list-max{
+    height: 900px;
+    overflow: hidden;
+}
+.ai-warning-list-min{
+    height: 110px;
+    background: url("/images/ai/popup_btn_bgd.png") no-repeat center/100% 95px;
+}
+.ai-warning-list-info{
+    padding:15px 20px;
+}
+.ai-warning-list-title{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 5px;
+}
+.ai-warning-list-title img{
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+}
+.ai-warning-list-details{
+    display: flex;
+}
+.ai-warning-list-details-img{
+    width:55px;
+    height: 55px;
+    background: #96f3ff;
+}
+.ai-warning-list-details-img img{
+    width: 100%;
+    height: 100%;
+}
+.ai-warning-list-details-con{
+    padding-left: 15px;
+}
+.ai-warning-list-details-con p{
+    color: #fe9000;
+    font-size: 18px;
+    padding-bottom:8px;
+}
+.ai-warning-list-details-con div{
+    color:#c8d7ff;
+    background: url("/images/ai/place.png") no-repeat left/12px;
+    padding-left: 15px;
+}
+
+/*预警概况*/
+.ai-warning-survey-content{
+    height: 245px;
+}
+/*预警分布*/
+
+/*重点视频*/
+.ai-key-videos-info{
+    display: flex;
+    padding: 15px;
+    align-items: center;
+}
+.ai-slip{
+    width: 3%;
+}
+.ai-slip img{
+    width: 100%;
+    cursor: pointer;
+}
+.ai-key-videos-content{
+    width: 100%;
+    display: flex;
+}
+.ai-key-videos-max{
+    padding: 10px;
+}
+.ai-key-videos-min{
+    width: 275px;
+    height: 240px;
+    background: #0f224a url("/images/ai/videos.png") no-repeat center/96px 70px;
+    border-radius: 5px;
+}
+/*AI视频*/
+.ai-video-info-flex{
+    display: flex;
+    align-items: center;
+    padding:0 10px;
+}
+.ai-video-info-return{
+    width: 130px;
+    height: 33px;
+    color: #5677a2;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    background: url(/images/return_btn_bgd.png) no-repeat center/90% 100%;
+}
+.ai-video-info-return:hover{
+    color: #cbdaff;
+    background: url("/images/dangerous_active.png") no-repeat center/90% 100%;
+}
+.ai-content-nav-max{
+    width: calc(100% - 140px);
+    padding: 10px 10px 5px;
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+.ai-content-nav-max::-webkit-scrollbar {
+    width:5px;
+    height:10px;
+}
+.ai-content-nav-max::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: #192c64;
+}
+.ai-content-nav-max::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background: #010b2d;
+}
+.ai-content-nav-min{
+    padding: 5px;
+}
+.ai-content-nav-con{
+    height: 40px;
+    min-width: 90px;
+    line-height: 40px;
+    cursor: pointer;
+    background:url("/images/ai/select_out.png") no-repeat center/100% 100%;
+}
+.ai-content-nav{
+    padding: 0 10px;
+    text-align: center;
+    white-space:nowrap;
+}
+.ai-content-nav.active{
+    background:url("/images/ai/select_on.png") no-repeat center/100% 100%;
+}
+.ai-content-info-max{
+    padding:5px;
+    overflow: auto;
+    height: 570px;
+}
+.ai-content-info-max::-webkit-scrollbar{
+    width:0px;
+}
+.ai-content-info-min{
+    padding: 10px;
+}
+.ai-content-videos{
+    height: 265px;
+    background: #0f224a url("/images/ai/videos.png") no-repeat center/96px 70px;
+}
+
+
+/*安全管理*/
+.sf-max{
+    padding:10px 15px;
+}
+.sf-min{
+    padding: 10px 15px;
+}
+.af-device-monitor{
+    height: 320px;
+    background: url("/images/ai/bgd_device_monitor.png") no-repeat center/100% 100%;
+}
+.af-monitor-list{
+    height: 630px;
+    background: url("/images/ai/bgd_monitor_list.png") no-repeat center/100% 100%;
+}
+.af-warning-monitor{
+    height: 450px;
+    background: url("/images/ai/bgd_warning_monitor.png") no-repeat center/100% 100%;
+}
+.sf-base-data-small{
+    height: 130px;
+    background: url("/images/ai/bgd_small_base.png") no-repeat center/100% 100%;
+}
+.sf-base-info{
+    height: 300px;
+    background: url("/images/ai/bgd_equipment_survey.png") no-repeat center/100% 100%;
+}
+.sf-base-data-big{
+    height: 180px;
+    background: url("/images/ai/bgd_big_base.png") no-repeat center/100% 100%;
+}
+.sf-base-big-info{
+    height: 300px;
+    background: url("/images/ai/bgd_real_time_warning.png") no-repeat center/100% 100%;
+}
+.title-select-max{
+    position: relative;
+}
+.title-select{
+    color: #45e9ff;
+    padding:0 15px;
+    cursor: pointer;
+    background: url("/images/ai/down.png") no-repeat right/12px;
+}
+.title-select-ul{
+    list-style: none;
+    position: absolute;
+    background: #212370;
+    width: 100%;
+    text-align: center;
+    z-index: 1;
+}
+.title-select-ul li{
+    padding: 5px 0;
+    cursor: pointer;
+}
+.title-select-ul li:hover{
+    color:#45e9ff;
+}
+.af-list-content-max{
+    padding: 15px 20px;
+}
+.af-list-content-min{
+    height: 575px;
+    overflow: auto;
+}
+.af-list-content-min::-webkit-scrollbar {
+    width:5px;
+    height: 1px;
+}
+.af-list-content-min::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: #192c64;
+}
+.af-list-content-min::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background: #010b2d;
+}
+.af-list-content-modular{
+    padding: 15px 10px 15px 0;
+    border-top: 1px dashed #3da2ff;
+}
+.af-list-content-min .af-list-content-modular:first-child{
+    border-top: none;
+}
+.af-list-content{
+    padding: 10px;
+    cursor: pointer;
+}
+.af-list-content.activation{
+    background-image: linear-gradient(to right, #040e27 , #0b1c48, #040e27);
+}
+.af-equipment-info{
+    display: flex;
+    align-items: center;
+}
+.af-equipment-img{
+    padding-right: 15px;
+}
+.af-equipment-img img{
+    width: 80px;
+    height: 80px;
+}
+.af-equipment-names{
+    padding: 5px;
+}
+.af-equipment-names span{
+    color: #88cbff;
+    font-size: 16px;
+}
+.af-equipment-state{
+    padding: 5px;
+}
+.af-equipment-state span{
+    padding: 5px;
+    font-size: 16px;
+    color: #ffb457;
+}
+.af-equipment-state .activation{
+    color: #5df3b4;
+}
+.af-personnel-info{
+    padding: 10px;
+    color: #a1d4e7;
+}
+.af-personnel-info-details{
+    padding: 5px;
+}
+.af-enable-time{
+    padding: 0 15px;
+    color: #419fff;
+}
+.sf-small-title-max{
+    padding: 0 15px;
+}
+.sf-small-title{
+    padding: 15px 20px 15px 25px;
+}
+.sf-small-title-1{
+    background: url("/images/ai/icon_1.png") no-repeat left/20px;
+}
+.sf-small-title-2{
+    background: url("/images/ai/icon_2.png") no-repeat left/20px;
+}
+.sf-small-title-3{
+    background: url("/images/ai/icon_3.png") no-repeat left/20px;
+}
+.sf-small-title-4{
+    background: url("/images/ai/icon_4.png") no-repeat left/20px;
+}
+.sf-small-info-max{
+    padding:0 10px;
+    color: #c7d9fd;
+}
+.sf-small-info{
+    text-align: center;
+}
+.sf-small-info p{
+    padding: 5px 0;
+}
+.sf-small-info i{
+    font-size: 25px;
+    font-weight: bold;
+}
+.sf-small-info .sf-data-this-month{
+    color: #5ef2b6;
+}
+.sf-small-info .sf-data-add-up{
+    color: #85cbff;
+}
+.sf-equipment-overview{
+    padding:20px 30px 0;
+    position: relative;
+}
+.sf-equipment-overview-bgd{
+    height: 240px;
+    width: 400px;
+    background: url("/images/ai/tower_crane.png") no-repeat center/100% 100%;
+    position: relative;
+    margin: auto;
+}
+.sf-legend{
+    position: absolute;
+    padding: 10px;
+    top: 3px;
+    right: 5px;
+    display: flex;
+}
+.sf-legend div{
+    padding:5px 10px;
+}
+.sf-slider-track{
+    position: absolute;
+    width: 300px;
+    height: 160px;
+    top: 40px;
+    left: 70px;
+}
+.sf-slider-track-min{
+    position: absolute;
+    width: 16px;
+}
+.sf-slider{
+    width: 16px;
+    height: 8px;
+    background:#f0b334;
+    position: absolute;
+}
+.sf-towrope{
+    width: 10px;
+    height:160px;
+    border-left: 2px solid #f0b334;
+    border-right: 2px solid #f0b334;
+    margin: auto;
+}
+.sf-hook{
+    width: 16px;
+    height: 30px;
+    background: url("/images/ai/drag_hook.png") no-repeat center/100% 100%;
+}
+.circular{
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    bottom: 15px;
+    right: 15px;
+    background: url("/images/ai/circular.png") no-repeat center/100% 100%;
+}
+.needle{
+    width: 100%;
+    height: 100%;
+    background: url("/images/ai/needle.png") no-repeat center/100% 100%;
+    transform:rotate(0deg);
+}
+.dot-track{
+    width: 35px;
+    height: 12px;
+    right: 12px;
+    position: absolute;
+    top: 54px;
+}
+.dot{
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #f0b334;
+    position: absolute;
+}
+
+.sf-legend div span{
+    color: #61f2b9;
+    font-weight: bold;
+    font-size: 16px;
+}
+.sf-personal-info-max{
+    padding: 15px 30px;
+}
+.sf-personal-info-min{
+    padding: 10px 0;
+    border-top: 1px dashed #3da2ff;
+}
+.sf-personal-info-max .sf-personal-info-min:first-child{
+    border-top:none
+}
+.sf-personal-info-list{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0;
+    font-size: 16px;
+}
+.sf-personal-info-list p{
+    color:#888fab ;
+}
+.af-warning-monitor-legend{
+    text-align: right;
+    padding:20px 30px 10px;
+    color: #c7dafb;
+}
+.af-warning-monitor-legend button{
+    width: 16px;
+    height: 16px;
+    margin-right: 5px;
+}
+.af-legend-green{
+    background:#225357 ;
+    border: 2px solid #5bd7b2;
+}
+.af-legend-red {
+    background:#6f1908 ;
+    border: 2px solid #ff5555;
+}
+.af-legend-span{
+    padding:  0 5px;
+}
+.af-warning-monitor-details{
+    padding: 0 30px;
+}
+.af-details-state{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 0;
+}
+.af-identification{
+    background:#225357 ;
+    border: 2px solid #5bd7b2;
+    width: 40px;
+    height: 16px;
+}
+.af-identification.activation{
+    background:#6f1908 ;
+    border: 2px solid #ff5555;
+}
+.sf-big-title{
+    padding: 15px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.sf-table-max{
+    padding:5px 10px;
+    color: #c2d9fb;
+}
+.sf-table-head,.sf-table-body{
+    padding: 0 15px;
+}
+.sf-table-head th{
+    padding: 10px;
+}
+.sf-table-body{
+    height:215px;
+    overflow: hidden;
+}
+.sf-table-body td{
+    padding:0 10px;
+}
+.sf-table-body tr{
+    height: 43px;
+    cursor: pointer;
+}
+.sf-table-body tr:nth-child(odd){
+    background: url("/images/ai/list_bgd.png") no-repeat left/100% 38px;
+}
+.sf-table-body td:nth-child(3){
+    color: #2f8dff;
+}
+.sf-speed-data{
+    height: 130px;
+    position: relative;
+    color: #c6d8fc;
+}
+.sf-speed-data-chart{
+    width: 40px;
+    height: 120px;
+    margin: auto;
+}
+.sf-speed-data-chart div{
+    width: 100%;
+    height: 8px;
+    margin-top: 4px;
+    background: #0b204f;
+    border-radius: 2px;
+}
+.sf-speed-data-chart .activation{
+    background: #2e8cfe;
+}
+.sf-speed-max{
+    position: absolute;
+    top: -10px;
+    left: 30px;
+    font-size: 16px;
+    width: 40px;
+    text-align: right;
+}
+.sf-speed-min{
+    position: absolute;
+    bottom: 10px;
+    left: 30px;
+    font-size: 16px;
+    width: 40px;
+    text-align: right;
+}
+.sf-speed-value{
+    position: absolute;
+    top: 38px;
+    left: 130px;
+    font-size: 20px;
+    color: #87cafe;
+}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 1c1508f..e88b950 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="https://cdn.makalu.cc/css/element-ui/index.css">
     <link rel="stylesheet" href="css/largeScreenLayout.css">
     <link rel="stylesheet" href="css/largeScreenStyle.css">
+    <link rel="stylesheet" href="css/sichuanTibet.css">
     <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=qmQNEi1qbFX628WfMt4imhdT87RbCRzK"></script>
     <script src="https://cdn.makalu.cc/js/vue/vue.js"></script>
     <script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script>
diff --git a/src/api/index.js b/src/api/index.js
index afb62c8..b518ec5 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -19,6 +19,7 @@ import checkDetection from './checkDetection/index'
 import standard from './standard/index'
 import flow from './flow/index'
 import video from './video/index'
+import aiBoxVideo from './video/aiBoxVideo'
 import plan from './plan/index'
 import periodical from './periodical/index'
 import {axios,download} from '@/utils/request'
@@ -44,6 +45,7 @@ export default {
     checkDetection,
     http:axios,
     video,
+    aiBoxVideo,
     standard,
     flow,
     plan,
diff --git a/src/api/video/aiBoxVideo.js b/src/api/video/aiBoxVideo.js
new file mode 100644
index 0000000..9f443e5
--- /dev/null
+++ b/src/api/video/aiBoxVideo.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+const listView=(deptId,projectId)=> {
+  return request({
+    url: `/bgscreen/aiBoxVideo/listView?deptId=${deptId||0}&projectId=${projectId||0}`,
+    method: 'get'
+  })
+}
+
+const getVideoPassage=(deptId,projectId,importance)=> {
+  return request({
+    url: `/bgscreen/aiBoxVideo/getVideoPassage?deptId=${deptId||0}&projectId=${projectId||0}&importance=${importance}`,
+    method: 'get'
+  })
+}
+
+export default{
+    listView,
+    getVideoPassage
+}
\ No newline at end of file
diff --git a/src/pages/projectVideo.vue b/src/pages/projectVideo.vue
index 89c7b69..329f9f4 100644
--- a/src/pages/projectVideo.vue
+++ b/src/pages/projectVideo.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="project-video">
             <div class="screen-content">
-                <div class="analyse-equipment analyse-equipment-position">视频监控</div>
+                <!-- <div class="analyse-equipment analyse-equipment-position">视频监控</div> -->
                 <el-row>
                     <el-col :span="6">
                         <module-one-1-1 label="视频概况" :amplify="true" name="amplify-spjk">
diff --git a/src/pages/toAIVideoProject.vue b/src/pages/toAIVideoProject.vue
index 45cf47a..8abb667 100644
--- a/src/pages/toAIVideoProject.vue
+++ b/src/pages/toAIVideoProject.vue
@@ -1,75 +1,80 @@
 <template>
     <div class="project-aivideo">        
-        <div class="ai-content">
+        <div class="screen-content">
             <el-row>
                 <el-col :span="6">
-                    <!--<div class="ai-content-padding">
-                        <div class="ai-video-survey">
-                            <div class="ai-video-title">
-                                <div>视频概况</div>
-                            </div>
-                            <div class="czz-number">
-                                <div class="czz-number-content">
-                                    <div class="czz-number-img czz-number-img-blue">
-                                        <img src="/images/circle_icon_12.png">
+                    <module-one-1-1 label="预警概况" :amplify="true" name="amplify-spjk">
+                        <div class="equipment-list-max">
+                            <el-row>
+                                <el-col :span="12">
+                                    <div class="equipment-list-min">
+                                        <div class="equipment-list-gif">
+                                            <img src="images/video_1.png">
+                                        </div>
+                                        <div class="equipment-list-data">
+                                            <p>项目监控</p>
+                                            <div><span v-cloak>{{ cqNum }}</span>个</div>
+                                        </div>
                                     </div>
-                                    <div class="survey_content_number">
-                                        <p>区域内人数</p>
-                                        <div class="survey_content_value"><span>1000</span> 人</div>
+                                </el-col>
+                                <el-col :span="12">
+                                    <div class="equipment-list-min">
+                                        <div class="equipment-list-gif">
+                                            <img src="images/video_2.png">
+                                        </div>
+                                        <div class="equipment-list-data">
+                                            <p>吊钩监控</p>
+                                            <div><span v-cloak>{{ dgNum }}</span>个</div>
+                                        </div>
                                     </div>
-                                </div>
-                                <div class="czz-number-content">
-                                    <div class="czz-number-img czz-number-img-green">
-                                        <img src="/images/circle_icon_13.png">
+                                </el-col>
+                                <el-col :span="12">
+                                    <div class="equipment-list-min">
+                                        <div class="equipment-list-gif">
+                                            <img src="images/video_3.png">
+                                        </div>
+                                        <div class="equipment-list-data">
+                                            <p>AI识别监控</p>
+                                            <div><span v-cloak>{{ aiNum }}</span>个</div>
+                                        </div>
                                     </div>
-                                    <div class="survey_content_number">
-                                        <p>进入车辆</p>
-                                        <div class="survey_content_value survey_content_value_color_green"><span>1000</span> 台</div>
+                                </el-col>
+                                <el-col :span="12">
+                                    <div class="equipment-list-min">
+                                        <div class="equipment-list-gif">
+                                            <img src="images/video_4.png">
+                                        </div>
+                                        <div class="equipment-list-data">
+                                            <p>离线视频</p>
+                                            <div><span v-cloak>{{ offLineNum }}</span>个</div>
+                                        </div>
                                     </div>
-                                </div>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </module-one-1-1>
+                    <module-one-2-1 label="预警分布">
+                        <div class="video-field-layout" :style="videoMapStyle">                               
+                            <div class="video-bgd-img-position" :style="{ 'top': video.x + 'px', 'left': video.y + 'px' }"
+                                v-for="video in VideoDistribution" @click="videoPlay(video)">
+                                <div :class="video.type == true ? 'video-bgd-div active' : 'video-bgd-div'"></div>
+                                <img src="/images/camera.png" class="video-bgd-img">
                             </div>
                         </div>
-                    </div>-->
-                    <div class="ai-content-padding">
-                        <div class="ai-warning-distribution">
-                            <div class="ai-video-title">
-                                <div>预警概况</div>
-                            </div>
-                            <div style="padding-top: 90px;">
-                                <project-overview-chart :typedata="scaleData" text="预警总次数" :height="230"></project-overview-chart>
-                            </div>
-
-<!--                            <cz-warning-survey :height="425" :distribute="scaleData"></cz-warning-survey>-->
-                        </div>
-                    </div>
-                    <div class="ai-content-padding">
-                        <div class="ai-warning-distribution">
-                            <div class="ai-video-title">
-                                <div>预警分布</div>
-                            </div>
-                            <cz-distribution-echart :height="455" :distribute="distributeData"></cz-distribution-echart>
-                        </div>
-                    </div>
+                    </module-one-2-1>
                 </el-col>
                 <el-col :span="12">
                     <div class="ai-video-info">
-
                         <div class="ai-video-info-flex">
-                            <!--  <div class="ai-video-info-return" @click="goVideoPage">
-                                  <img src="/images/return_icon.png"><span>返回视频管理</span>
-                              </div>-->
                             <div class="ai-content-nav-max" style="width: 100% ">
                                 <div class="ai-content-nav-min" v-for="(alertorType,index) in alertorTypeList">
                                     <div class="ai-content-nav-con">
-                                        <div :class="nav == index?'ai-content-nav active':'ai-content-nav'" @click="aiNav(index,alertorType.alertor_id)" v-html="alertorType.alertor_type_name">
+                                        <div :class="nav == index?'ai-content-nav active':'ai-content-nav'" @click="aiNav(index,alertorType.dictValue)" v-html="alertorType.dictLabel">
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-
-
-
                         <div class="ai-content-info-max">
                             <el-row>
                                 <el-col  style="position: relative;" :span="8" v-for="(video,index) in videoList">
@@ -94,9 +99,9 @@
                                 <div class="ai-video-number">重点关注 视频（<span v-html="majorVideoList.length">0</span>）</div>
                             </div>
                             <div class="ai-key-videos-info" style="height: 80%;">
-                                <!--<div class="ai-slip">
+                                <div class="ai-slip">
                                     <img src="/images/ai/left_slip.png" id="leftSlip">
-                                </div>-->
+                                </div>
                                 <div class="ai-key-videos-content" id="videosContent">
                                     <div class="ai-key-videos-max" style="position: relative;"  v-for="(video,index) in majorVideoList">
                                         <div class="ai-key-videos-min">
@@ -110,45 +115,45 @@
                                     </div>
 
                                 </div>
-                                <!--<div class="ai-slip">
+                                <div class="ai-slip">
                                     <img src="/images/ai/right_slip.png" id="rightSlip">
-                                </div>-->
+                                </div>
                             </div>
                         </div>
                     </div>
                 </el-col>
                 <el-col :span="6">
-                    <div class="ai-content-padding">
-                        <div class="ai-warning-list">
-                            <div class="ai-video-title">
-                                <div>预警列表</div>
-                                <div class="ai-video-number">预警总数（<span v-html="warningList.length">0</span>）</div>
+                    <module-one-3-1 label="预警列表">
+                        <div class="nav-info" style="padding:20px 20px 10px">
+                            <div class="company-project-introduction" @click="projectIntroduction">
+                                <span>预警总数:（0）</span>
                             </div>
-                            <div class="ai-warning-list-content">
-                                <div class="ai-warning-list-max" id="warningListMax">
-                                    <div id="warningListMin">
-                                        <div class="ai-warning-list-min" v-for="item in warningList" >
-                                            <div class="ai-warning-list-info">
-                                                <div class="ai-warning-list-title">
-                                                    <div v-html="item.dateTime"></div>
-                                                    <img src="/images/ai/open.png" @click="amplify(item.photo)">
-                                                </div>
-                                                <div class="ai-warning-list-details">
-                                                    <div class="ai-warning-list-details-img">
-                                                        <img :src="item.photo">
-                                                    </div>
-                                                    <div class="ai-warning-list-details-con">
-                                                        <p v-html="item.alertor_type_name"></p>
-                                                        <div v-html="item.stream_name"></div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
+                         </div>
+                         <div class="acceptance-item" v-for="(it,idx) in acceptanceData" :key="idx" style="cursor: pointer;">
+                            <div class="row-1">
+                                <div class="div-img">
+                                    <el-image src="getProfileImage(it.mainImage)" :preview-src-list="getBigProfileImage(it)"/></div>
+                                <div class="div-text" style="width: 65%;"  @click="doShowChecking(it)">
+                                    <div class="row-3">
+                                        <div v-if="it.checkResult=='1'" class="sp-lbl">验收合格</div>
+                                        <div v-if="it.checkResult=='2'" class="sp-err">验收不合格</div>
+                                        <div class="sp-date">{{it.checkingDate}}</div>
+                                    </div>
+                                    <div class="row-3">
+                                        <span class="sp-label">项目:</span>
+                                        <span class="sp-text">{{it.projectName}}</span>
+                                    </div>
+                                    <div class="row-3">
+                                        <span class="sp-label">区域:</span>
+                                        <span class="sp-text">{{it.checkWorkingPosition}}</span>
                                     </div>
                                 </div>
                             </div>
-                        </div>
-                    </div>
+                            <div class="row-5"  @click="doShowChecking(it)">
+                                验收描述:{{it.intro}}
+                            </div>
+                         </div>
+                    </module-one-3-1> 
                 </el-col>
             </el-row>
         </div>       
@@ -156,7 +161,6 @@
 </template>
 
 <script>
-
 import '../components/module/module-one-2-1'
 import '../components/module/module-one-3-1'
 import '../components/module/module-one-0-5'
@@ -333,27 +337,30 @@ export default {
                 this.popupShow = true
             },
             getAlertorTypeList(){
-                axios.post(Host + "/api/video/getAiVideoAlertorTypes", {
-                    projectId: JSON.parse(localStorage.getItem("data")).aqzg
-                }).then(res => {
-                    var list = [{'alertor_id': 0,'alertor_type': "", 'alertor_type_name': "全部"}];
-                    var data = res.data;
+                // axios.post(Host + "/api/video/getAiVideoAlertorTypes", {
+                //     projectId: JSON.parse(localStorage.getItem("data")).aqzg
+                // }).then(res => {
+                //     var list = [{'alertor_id': 0,'alertor_type': "", 'alertor_type_name': "全部"}];
+                //     var data = res.data;
 
-                    data.forEach(item =>{
-                        list.push(item)
-                    })
-                    if(JSON.parse(localStorage.getItem("data")).id == "98") {
-                        var newArr = [];
-                        newArr.push(list[0]);
-                        newArr.push(data[1])
-                        newArr.push(data[3])
-                        newArr.push(data[2])
-                        newArr.push(data[0])
-                        this.alertorTypeList = newArr;
-                    } else {
-                        this.alertorTypeList = list;
-                    }
-                }).catch(err => {
+                //     data.forEach(item =>{
+                //         list.push(item)
+                //     })
+                //     if(JSON.parse(localStorage.getItem("data")).id == "98") {
+                //         var newArr = [];
+                //         newArr.push(list[0]);
+                //         newArr.push(data[1])
+                //         newArr.push(data[3])
+                //         newArr.push(data[2])
+                //         newArr.push(data[0])
+                //         this.alertorTypeList = newArr;
+                //     } else {
+                //         this.alertorTypeList = list;
+                //     }
+                // }).catch(err => {
+                // })
+                this.$api.dict('aibox_alarm_type').then(d => {
+                    this.alertorTypeList = d || [];
                 })
             },
             getAiVideoInfoList(){