From ee79818c766d7665b0848851aed10b8eee766e96 Mon Sep 17 00:00:00 2001
From: haha <lj7788@126.com>
Date: Sun, 16 Jun 2024 22:03:02 +0800
Subject: [PATCH] update code

---
 src/api/video/aiBoxVideo.js               |   19 +-
 src/components/project-overview-chart.js  |   27 +-
 src/components/project-overview-chart.vue |    5 +-
 src/pages/toAIVideoProject.vue            | 1235 +++++----------------
 vue.config.js                             |    4 +-
 5 files changed, 341 insertions(+), 949 deletions(-)

diff --git a/src/api/video/aiBoxVideo.js b/src/api/video/aiBoxVideo.js
index a8f37cc..33389fe 100644
--- a/src/api/video/aiBoxVideo.js
+++ b/src/api/video/aiBoxVideo.js
@@ -7,6 +7,14 @@ const listView=(deptId,projectId)=> {
   })
 }
 
+const list=(data,pageNum,pageSize)=> {
+  return request({
+    url: `/bgscreen/aiBoxVideo/list?pageNum=${pageNum}&pageSize=${pageSize}`,
+    data:data,
+    method: 'post'
+  })
+}
+
 const getVideoPassage=(deptId,projectId,passageType,importance)=> {
   return request({
     url: `/bgscreen/aiBoxVideo/getVideoPassage?deptId=${deptId||0}&projectId=${projectId||0}&passageType=${passageType}&importance=${importance}`,
@@ -21,6 +29,13 @@ const groupCountByAlarmType=(deptId,projectId,now)=> {
   })
 }
 
+const groupCountByProject=(deptId,projectId)=> {
+  return request({
+    url: `/bgscreen/aiBoxVideo/groupCountByProject?deptId=${deptId||0}&projectId=${projectId||0}`,
+    method: 'get'
+  })
+}
+
 // 查询视频分布汇总
 const selectGroupCountVideoConfig=(deptId,projectId)=> {
   return request({
@@ -31,8 +46,10 @@ const selectGroupCountVideoConfig=(deptId,projectId)=> {
 
 
 export default{
+    list,
     listView,
     getVideoPassage,
     groupCountByAlarmType,
-    selectGroupCountVideoConfig 
+    selectGroupCountVideoConfig,
+    groupCountByProject
 }
\ No newline at end of file
diff --git a/src/components/project-overview-chart.js b/src/components/project-overview-chart.js
index 5559f0c..8ed17a2 100644
--- a/src/components/project-overview-chart.js
+++ b/src/components/project-overview-chart.js
@@ -2,7 +2,7 @@ import Vue from 'vue'
 Vue.component("project-overview-chart", {
     template: `
         <div class='project-overview-chart' style="position: relative" @click="doClick">
-            <div :style="{'height': height+'px'}" ref="warningPieChart">
+             <div :style="'height:'+height+'px;'+(width?('width:'+width+'px;'):'')" ref="warningPieChart">
  
             </div>
             <div class="chart-gif chart-overview-gif" style="{'top':gifTop}"></div>
@@ -19,6 +19,9 @@ Vue.component("project-overview-chart", {
         typedata:{
             type: Array,
         },
+        width:{
+            type:Number
+        },
         height:{
             type:Number
         },
@@ -94,20 +97,20 @@ Vue.component("project-overview-chart", {
 
                     orient: "vertical",
                     icon: "circle",
-                    itemWidth: 12,
-                    itemGap: 8,
+                   
+                    itemGap: 0,
                     textStyle: {
                         color: "#c3dbfd",
-                        fontSize: 14,
+                        fontSize: 6,
                         rich: {                           
                             name: {
                                 color: "#c3dbfd",
-                                padding: [10, 5, 20, 5],                                
+                                padding: [0, 0, 0, 0],                                
                             },
                             percent: {
                                 color: "#18DB9F",
-                                fontSize: 16,
-                                padding: [0, 5, 0, 5],                                
+                                fontSize: 6,
+                                padding: [0, 0, 0, 0],                                
                             },
                         },
                     },
@@ -117,7 +120,7 @@ Vue.component("project-overview-chart", {
                         if(total_datas==0){
                             percent=0;
                         }
-                        return "{name| " + name + "}"+this.sp+"{val|" + res[0].value + "}   {percent|" + percent + "%}";
+                        return "{name| " + name + "}"+this.sp+" {val|" + res[0].value + "}   {percent|" + percent + "%}";
                     },
                 };                
                 let opt={...legendOption,...(this.legendOpt||{})};
@@ -130,7 +133,7 @@ Vue.component("project-overview-chart", {
                         itemGap :10,
                         textStyle: {
                             color: "#0dd2fd",
-                            fontSize: 24,
+                            fontSize: 14,
                             fontWeight: "bold",
                             align: "center",                           
                         },
@@ -160,8 +163,8 @@ Vue.component("project-overview-chart", {
                     series: [
                         {
                             name: "品类金额占比",
-                            type: "pie",
-                            center: ["25%", "50%"],
+                            type: "pie",                            
+                            center: ["0%", "50%"],
                             radius: ["46%", "63%"],
                             data: data,
                             label: {
@@ -180,7 +183,7 @@ Vue.component("project-overview-chart", {
                             type: "pie",
                             clockWise: false, //顺时加载
                             hoverAnimation: false, //鼠标移入变大
-                            center: ["25%", "50%"],
+                            center: ["0%", "50%"],
                             radius: ["70%", "70%"],
                             label: {
                                 normal: {
diff --git a/src/components/project-overview-chart.vue b/src/components/project-overview-chart.vue
index c8f7794..dcc60c8 100644
--- a/src/components/project-overview-chart.vue
+++ b/src/components/project-overview-chart.vue
@@ -1,6 +1,6 @@
 <template>
    <div class='project-overview-chart' style="position: relative" @click="doClick">
-            <div :style="{'height': height+'px'}" ref="warningPieChart">
+           <div :style="'height:'+height+'px;'+(width?('width:'+width+'px;'):'')" ref="warningPieChart">
  
             </div>
             <div class="chart-gif chart-overview-gif" :style="'top:'+gifTop"></div>
@@ -26,6 +26,9 @@ export default {
         typedata:{
             type: Array,
         },
+        width:{
+            type:Number
+        },
         height:{
             type:Number
         },
diff --git a/src/pages/toAIVideoProject.vue b/src/pages/toAIVideoProject.vue
index e499248..30fef86 100644
--- a/src/pages/toAIVideoProject.vue
+++ b/src/pages/toAIVideoProject.vue
@@ -3,306 +3,131 @@
     <div class="screen-content">
       <el-row>
         <el-col :span="6">
-          <module-one-2-1 label="预警概况">
-            <div class="labour-warning-title">
-              <div class="labour-warning-img">
-                <div class="labour-warning-bgd">
-                  <img src="images/labour_warning_icon.png" />
-                </div>
-              </div>
-              <div class="labour-warning-data">
-                <p>今日预警</p>
-                <div class="labour-warning-number">
-                  <span>{{ overviewTotalDay }}</span> 次
-                </div>
-              </div>
-              <div class="labour-warning-data">
-                <p>累计预警</p>
-                <div class="labour-warning-number">
-                  <span>{{ overviewTotal }}</span> 次
-                </div>
-              </div>
-            </div>
-            <project-overview-chart
-              :key="'ai1' + overviewDay"
-              :sp="''"
-              txtTop="12"
-              gifTop="70px"
-              :maintitle="overviewTotalDay"
-              :legend-opt="legendOpt2"
-              :typedata="typeDistributionDataDay"
-              :text="overviewTextDay"
-              :height="250"
-            ></project-overview-chart>
+          <module-one-1-1 label="预警概况" style="position: relative;">
+            <div style="transform: scale(0.8);position: relative;top: -40px;left:-70px;">
+              <project-overview-chart :key="'ai1' + overviewDay" :sp="''" txtTop="12" gifTop="8px"
+                :maintitle="overviewTotalDay" :legend-opt="legendOpt2" :typedata="typeDistributionDataDay"
+                :text="overviewTextDay" :height="180" :width="580" :fn="changeChart1"></project-overview-chart>
 
-            <project-overview-chart
-              :key="'ai2' + overview"
-              :sp="''"
-              txtTop="12"
-              gifTop="70px"
-              :maintitle="overviewTotal"
-              :legend-opt="legendOpt1"
-              :typedata="typeDistributionData"
-              :text="overviewText"
-              :height="250"
-            ></project-overview-chart>
-          </module-one-2-1>
-          <module-one-1-1 label="预警分布">
-            <rank-chart
-              :data="availabilityData"
-              :showval="true"
-              :height="300"
-            ></rank-chart>
+              <project-overview-chart :key="'ai2' + overview" :sp="''" txtTop="12" gifTop="8px"
+                :maintitle="overviewTotal" :legend-opt="legendOpt1" :typedata="typeDistributionData"
+                :text="overviewText" :height="180" :width="580" :fn="changeChart1"></project-overview-chart>
+            </div>
           </module-one-1-1>
+          <module-one-2-1 label="预警排名" style="position: relative;">
+            <div class="scroll" style="max-height: 580px;overflow-y: auto;margin-top: 20px;">
+              <table class="tb-list1">
+                <tr>
+                  <th>排名</th>
+                  <th>项目名称</th>
+                  <th>预警数量</th>
+                  <th>预警占比</th>
+                </tr>
+                <tr v-for="(it, idx) in orderList" :key="idx" class="tr-cmd" @click="doStandardDlg(it)">
+                  <td>{{ it.ord }}</td>
+                  <td>{{ it.projectName }}</td>
+                  <td>{{ it.value }}</td>
+                  <td>{{ it.percent.toFixed(2) }}%</td>
+                </tr>
+              </table>
+            </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-content-nav-max" style="width: 100%">
-                <div
-                  class="ai-content-nav-min"
-                  v-for="(alertorType, index) in alertorTypeList"
-                  :key="index"
-                >
-                  <div class="ai-content-nav-con">
-                    <div
-                      :class="nav == index ? 'ai-content-nav active' : 'ai-content-nav'"
-                      @click="aiNav(index, alertorType.dictValue)"
-                      v-html="alertorType.dictLabel"
-                    ></div>
+        <el-col :span="18">
+          <module-one-1-3 label="今日预警" :key="todayKey" style="position: relative;">
+            <div class="today-list ai-list"  v-if="todayList.length > 0">
+              <div v-for="(it, idx) in todayList" :key="idx" class="today-item ai-item">
+                <div class="item-left">
+                  <el-image style="width: 180px; height: 100px" :src="it.imageUrl + '.min.jpg'"
+                    :preview-src-list="[it.imageUrl]">
+                  </el-image>
+                </div>
+                <div class="item-right">
+                  <div class="item-row">
+                    <span>单位名称:</span>
+                    <span>{{ it.deptName }}</span>
+                  </div>
+                  <div class="item-row">
+                    <span>预警名称:</span>
+                    <span>{{ it.alarmTypeName }}</span>
+                  </div>
+                  <div class="item-row">
+                    <span>预警时间:</span>
+                    <span style="color:rgba(1, 169, 255, 1)">{{ it.createTime }}</span>
                   </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"
-                  :key="index"
-                >
-                  <div class="ai-content-info-min">
-                    <div
-                      class="ai-content-videos"
-                      :class="video.state ? 'active-video' : 'videobo'"
-                    >
-                      <div v-if="video.state" :id="'vd0' + index"></div>
-                      <div
-                        class="ai-video-name"
-                        style="
-                          position: absolute;
-                          height: 35px;
-                          line-height: 35px;
-                          padding: 0px 15px;
-                          z-index: 99999;
-                          bottom: 8px;
-                          font-size: 13px;
-                        "
-                      >
-                        <span v-if="video.state"
-                          >{{ video.videoName }}（{{ video.passageName }}）</span
-                        >
-                      </div>
-                      <div v-if="video.state" class="style-con style-red"></div>
-                      <div v-if="video.state" class="style-con style-green"></div>
-                    </div>
+            <el-pagination v-if="todayList.length > 0" layout="total,prev, pager, next" :hide-on-single-page="false"
+            @current-change="handleTodayCurrentChange" :total="todayPage.total" :page-size="todayPage.pageSize" :current-page.sync="todayPage.pageIndex"
+            class="bg-pagination"></el-pagination>
+            <div v-if="todayList.length == 0"  style="text-align: center;margin-top: 20px;">
+                <img src="images/nodata.png" style="width: 240px;">
+                <div style="text-align: center;">暂无数据</div>
+            </div>
+
+          </module-one-1-3>
+          <module-one-2-3 label="预警明细" style="position: relative;">
+            <div style="position: absolute;right:0px;top:4px;">
+                            <el-date-picker class="bg-date-picker" v-model="selDate" type="daterange"
+                                popper-class="bg-date-picker-pop" :editable="false" @change="dtChange"
+                                :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期"
+                                end-placeholder="结束日期"></el-date-picker>
+                        </div>
+            <div class="ai-nav">
+              <div class="nav-item ai-content-nav-con ai-content-nav" :class="selType==0?'active':''" @click="doSelType(0)">全部</div>
+              <div class="nav-item ai-content-nav-con ai-content-nav" :class="selType==it.dictValue?'active':''" @click="doSelType(it.dictValue)" v-for="(it,idx) in aiTypes" :key="idx">{{ it.dictLabel }}</div>
+            </div>
+            <div class="data-list">
+              <div class=" ai-list"  v-if="listDatas.length > 0">
+              <div v-for="(it, idx) in listDatas" :key="idx" class="today-item ai-item">
+                <div class="item-left">
+                  <el-image style="width: 180px; height: 100px" :src="it.imageUrl + '.min.jpg'"
+                    :preview-src-list="[it.imageUrl]">
+                  </el-image>
+                </div>
+                <div class="item-right">
+                  <div class="item-row">
+                    <span>单位名称:</span>
+                    <span>{{ it.deptName }}</span>
                   </div>
-                </el-col>
-              </el-row>
-            </div>
-          </div>
-          <div class="ai-content-padding">
-            <div class="ai-key-videos">
-              <div class="ai-video-title">
-                <div>重点视频</div>
-                <div class="ai-video-number">重点关注 视频（{{ majorVideoSize }}）</div>
-              </div>
-              <div class="ai-key-videos-info">
-                <!-- <div class="ai-slip">
-                                    <img src="/images/ai/left_slip.png" id="leftSlip">
-                                </div> -->
-                <div class="ai-key-videos-content" id="videosContent">
-                  <div
-                    class="ai-key-videos-max"
-                    style="position: relative"
-                    v-for="(video, index) in majorVideoList"
-                    :key="index"
-                  >
-                    <div
-                      class="ai-key-videos-min"
-                      :class="video.state ? 'imp-video' : 'videobo'"
-                    >
-                      <!-- <H265Player v-if="video.state" :url="getVideoUrl(video)"/> -->
-                      <div v-if="video.state" :id="'wVd0' + index"></div>
-                      <div
-                        class="ai-video-name"
-                        style="
-                          position: absolute;
-                          height: 35px;
-                          line-height: 35px;
-                          padding: 0px 15px;
-                          z-index: 1;
-                          bottom: 8px;
-                          font-size: 13px;
-                        "
-                      >
-                        <span v-if="video.state"
-                          >{{ video.videoName }}（{{ video.passageName }}）</span
-                        >
-                      </div>
-                      <div v-if="video.state" class="style-con style-red"></div>
-                      <div v-if="video.state" class="style-con style-green"></div>
-                    </div>
+                  <div class="item-row">
+                    <span>预警名称:</span>
+                    <span>{{ it.alarmTypeName }}</span>
+                  </div>
+                  <div class="item-row">
+                    <span>预警时间:</span>
+                    <span style="color:rgba(1, 169, 255, 1)">{{ it.createTime }}</span>
                   </div>
                 </div>
-                <!-- <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="analyse-map">
-            <div class="analyse-title">
-              <div class="analyse-text">最近预警</div>
-            </div>
-            <div class="afoot-content safe-afoot-content">
-              <div
-                class="afoot-overflow safe-afoot-overflow"
-                id="afootOverflow"
-                @mouseout="warningListMinMouseout"
-                @mouseover="warningListMinMouseover"
-              >
-                <div v-if="warningList.length == 0" class="not-data">暂无预警数据</div>
-                <div
-                  v-if="warningList.length > 0"
-                  class="afoot-con-for"
-                  style="height: 180px"
-                  v-for="item in warningList"
-                >
-                  <div class="project-expect-con">
-                    <div class="project-expect-title">
-                      <div class="project-expect-title-No">
-                        {{ item.projectName }}
-                      </div>
-                    </div>
-                    <div class="project-expect-info">
-                      <el-image
-                        :src="getImageUrl(item)"
-                        :preview-src-list="[$apiPath + item.imageUrl]"
-                      ></el-image>
-                    </div>
-                    <div class="project-expect-info">
-                      <div class="el-row" style="padding-top: 5px">
-                        单位名称：{{ item.deptName }}
-                      </div>
-                      <div class="el-row" style="padding-top: 5px">
-                        预警类型：{{ item.alarmTypeName }}
-                      </div>
-                      <div class="el-row" style="padding-top: 5px">
-                        预警时间：<span class="project-expect-time">{{
-                          item.createTime
-                        }}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- <div class="ai-content-padding">
-            <div class="ai-warning-list">
-              <div class="ai-video-title">
-                <div>
-                  最新预警
-                  <span class="ai-video-number"
-                    >（<span v-html="warningList.length"></span>）</span
-                  >
-                </div>
-              </div>
-              <div class="ai-warning-list-content">
-                <div
-                  class="ai-warning-list-max scroll"
-                  id="warningListMax"
-                  style="overflow-y: auto"
-                >
-                  <div id="warningListMin">
-                    <div
-                      class="project-expect-list active"
-                      v-for="(item, idx) in warningList"
-                      v-if="idx < 50"
-                      :key="idx"
-                    >
-                      <div class="project-expect-con">
-                        <div class="project-expect-title">
-                          <div class="project-expect-title-No">
-                            {{ item.projectName }}
-                          </div>
-                        </div>
-                        <div class="project-expect-info">
-                          <el-image
-                            :src="getImageUrl(item)"
-                            :preview-src-list="[$apiPath + item.imageUrl]"
-                          ></el-image>
-                        </div>
-                        <div class="project-expect-info">
-                          <div class="el-row" style="padding-top: 5px">
-                            单位名称：{{ item.deptName }}
-                          </div>
-                          <div class="el-row" style="padding-top: 5px">
-                            预警类型：{{ item.alarmTypeName }}
-                          </div>
-                          <div class="el-row" style="padding-top: 5px">
-                            预警时间：<span class="project-expect-time">{{
-                              item.createTime
-                            }}</span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div> -->
+            <el-pagination v-if="listDatas.length > 0" layout="total,prev, pager, next" :hide-on-single-page="false"
+            @current-change="handleListCurrentChange" :total="listPage.total" :page-size="listPage.pageSize" :current-page.sync="listPage.pageIndex"
+            class="bg-pagination"></el-pagination>
+            <div v-if="listDatas.length == 0"  style="text-align: center;margin-top: 100px;">
+                <img src="images/nodata.png" style="width: 240px;">
+                <div style="text-align: center;">暂无数据</div>
+            </div>
+            </div>
+          </module-one-2-3>
         </el-col>
+
       </el-row>
     </div>
   </div>
 </template>
 
 <script>
+import "../components/module/module-one-1-3";
 import "../components/module/module-one-2-1";
-import "../components/module/module-one-3-1";
-import "../components/module/module-one-0-5";
-import "../components/module/module-one-video";
-import "../components/staff-survey-chart";
-import "../components/classify-bar";
-import "../components/amplify/shipinguanli/amplify-spjk";
-import "../components/rank-chart";
-
+import "../components/module/module-one-1-1";
+import "../components/module/module-one-2-3";
 import debounce from "lodash.debounce";
-import gsap from "gsap";
 export default {
   data() {
     return {
-      active: 3,
-      scrollLeft: "",
-      nav: 0,
-      alertorId: 0,
-      videoList: [],
-      scaleData: [],
-      majorVideoList: [],
-      alertorTypeList: [],
-      warningList: [],
-      distributeData: {},
-      ptz: false,
-      autoPlay: true,
-      popupUrl: "",
-      popupShow: false,
-      majorVideoSize: 0,
       //预警概况
       overview: 0,
       overviewDay: 0,
@@ -310,13 +135,15 @@ export default {
       overviewTotal: 0,
       legendOpt1: {
         icon: "rect",
+        padding: [0, 0, 0, 0],
+        itemHeight: 10,
         textStyle: {
-          fontSize: 14,
+          fontSize: 9,
           color: "#c3dbfd",
           rich: {
             name: {
               color: "#c3dbfd",
-              padding: [0, 20, 0, 0],
+              padding: [0, 0, 0, 0],
             },
             percent: {
               color: "#4676FD",
@@ -325,26 +152,19 @@ export default {
         },
       },
       overviewText: "累计预警",
-      //原因类型分析
-      availabilityData: [],
-      projectCategoryWidth: 200,
       //预警概况
-      typeDistributionData: [
-        { name: "未戴安全帽", value: "0" },
-        { name: "未穿工服", value: "0" },
-        { name: "反光衣/带检测", value: "0" },
-      ],
+      typeDistributionData: [],
       overviewTextDay: "今日预警",
       overviewTotalDay: 0,
       legendOpt2: {
         icon: "rect",
         textStyle: {
-          fontSize: 14,
+          fontSize: 9,
           color: "#c3dbfd",
           rich: {
             name: {
               color: "#c3dbfd",
-              padding: [0, 20, 0, 0],
+              padding: [0, 0, 0, 0],
             },
             percent: {
               color: "#f73647",
@@ -352,448 +172,176 @@ export default {
           },
         },
       },
-      typeDistributionDataDay: [
-        { name: "未戴安全帽", value: "0" },
-        { name: "未穿工服", value: "0" },
-        { name: "反光衣/带检测", value: "0" },
-      ],
-      initfunc: null,
-      players: [],
-      wPlayers: [],
-      warningInterval: undefined,
-      forIndex: 0,
+      typeDistributionDataDay: [],
+      orderList: [],
+      todayPage: {
+        pageSize: 6,
+        pageIndex: 1,
+        total: 0
+      },
+      listPage:{
+        pageSize: 12,
+        pageIndex: 1,
+        total: 0
+      },
+      todayList: [],
+      todayKey:0,
+      listDatas:[],
+      listKey:0,
+      selDate: [],
+      aiTypes:[],
+      selType:0,
+      pickerOptions: {
+                shortcuts: [{
+                    text: '最近一周',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+                        picker.$emit('pick', [start, end]);
+                    }
+                }, {
+                    text: '最近一个月',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                        picker.$emit('pick', [start, end]);
+                    }
+                }, {
+                    text: '最近三个月',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                        picker.$emit('pick', [start, end]);
+                    }
+                }]
+            },
     };
   },
   beforeDestroy() {
-    this.players.forEach((p) => {
-      if (p) {
-        try {
-          p.stop();
-        } catch (e) {}
-      }
-    });
-    this.wPlayers.forEach((wp) => {
-      if (wp) {
-        try {
-          wp.stop();
-        } catch (e) {}
-      }
-    });
-    clearInterval(this.warningInterval);
-    this.forIndex = 0;
   },
   mounted() {
-    this.$bus.$on("projectChange",debounce((res) => {
-        this.projectInfo = res;
-        this.dept = this.$root.dept||this.dept||{};
-        this.projectInfos = this.$root.projects||this.projectInfos||[];        
-        this.init();
-      })
-    );    
+    this.$api.dict("aibox_alarm_type").then((d) => {
+      this.aiTypes=d||[];
+    });
+    let dt1=this.$dt((+new Date())-30*24*3600*1000);
+        let dt2=this.$dt(new Date());
+        this.selDate=[dt1,dt2];
+    this.$bus.$on("projectChange", debounce((res) => {
+      this.projectInfo = res;
+      this.dept = this.$root.dept || this.dept || {};
+      this.projectInfos = this.$root.projects || this.projectInfos || [];
+      this.init();
+    })
+    );
     if (this.$root.hasInitHeader) {
       this.initMe();
     }
   },
-  created() {
-    //this.init()
-  },
-  computed: {
-    playDivCss() {
-      return {
-        width: (this.width + "").replace("px", "") + "px",
-        height: (this.height + "").replace("px", "") + "px",
-        position: "relative",
-      };
-    },
-    exStyle() {
-      return {
-        textAlign: "center",
-        width: (this.width + "").replace("px", "") + "px",
-        height: (this.height + "").replace("px", "") + "px",
-      };
-    },
-    PTZDiv() {
-      let W = parseInt((this.width + "").replace("px", ""));
-      let H = parseInt((this.height + "").replace("px", ""));
-      if (W < 400) {
-        W = "100px";
-        H = "100px";
-      } else {
-        W = "150px";
-        H = "150px";
-      }
-      return {
-        backgroundImage: "url('https://video.makalu.cc/img/jt.png')",
-        width: W,
-        height: H,
-        backgroundSize: "100%",
-        position: "relative",
-      };
-    },
-    PTZTop() {
-      return {
-        width: "33%",
-        height: "25%",
-        position: "absolute",
-        top: "0px",
-        left: "33%",
-        cursor: "pointer",
-      };
-    },
-    PTZBottom() {
-      return {
-        width: "33%",
-        height: "25%",
-        position: "absolute",
-        bottom: "0px",
-        left: "33%",
-        cursor: "pointer",
-      };
-    },
-    PTZLeft() {
-      return {
-        width: "25%",
-        height: "33%",
-        position: "absolute",
-        top: "33%",
-        left: "0px",
-        cursor: "pointer",
-      };
-    },
-    PTZRight() {
-      return {
-        width: "25%",
-        height: "33%",
-        position: "absolute",
-        top: "33%",
-        right: "0px",
-        cursor: "pointer",
-      };
-    },
-    VIBtnCss() {
-      return {
-        width: "30px",
-        height: "30px",
-        background: "#38314b",
-        border: "1px solid #38314b",
-        fontSize: "20px",
-        outline: "0",
-        color: "#FFFFFF",
-      };
-    },
-    zoomViewCss() {
-      return {
-        width: "75px",
-        height: "30px",
-        color: "#dddddd",
-        background: "rgba(65, 63, 70, 0.5)",
-        textAlign: "center",
-        border: "0px solid rgba(65, 63, 70, 0.5)",
-        outline: "0",
-        fontSize: "14px",
-      };
-    },
-  },
   methods: {
+    doSelType(n){
+      if(this.selType!=n){
+        this.selType=n;
+        this.listPage.pageIndex=1;
+        this.loadList();
+      }
+    },
+    dtChange(init) {
+      this.listPage.pageIndex=1;
+      this.loadList();
+    },
+    changeChart1(opt) {
+      opt.title.padding = [60, 0, 0, 145];
+      return opt;
+    },
     initMe() {
       this.projectInfo = this.$root.project;
       this.dept = this.$root.dept;
       this.projectInfos = this.$root.projects;
-      console.log("initMe");
       this.init();
     },
     init() {
-      clearTimeout(this.initfunc);
-      clearInterval(this.warningInterval);
-      //最近预警 定时器
-      this.warningInterval = setInterval(this.safeAutomaticRoll, 5000);
-      this.players.forEach((p) => {
-        if (p) {
-          try {
-            p.stop();
-          } catch (e) {}
+      this.getAiVideoAlertorTypeCount();
+      this.groupCountByProject();
+      this.todayPage.pageIndex=1;
+      this.loadTodayList();
+      this.listPage.pageIndex=1;
+      this.selType=0;
+      this.loadList();
+    },
+    handleTodayCurrentChange(n){
+      this.todayPage.pageIndex=n;
+      this.loadTodayList();
+    },
+    handleListCurrentChange(n){
+      this.listPage.pageIndex=n;
+      this.loadList();
+    },
+    loadList(){
+      let postData = {
+        projectDeptId: this.dept?.id || 0,
+        projectId: this.projectInfo?.id,
+        params: {
+          beginTime:this.selDate[0],
+          endTime:this.selDate[1]
         }
-      });
-      this.wPlayers.forEach((wp) => {
-        if (wp) {
-          try {
-            wp.stop();
-          } catch (e) {}
-        }
-      });
-      let initfunc = () => {
-        this.getAlertorTypeList();
-        this.getAiVideoInfoList("", "");
-        this.getMajorAiVideoInfoList();
-        this.getAnalysisDetailList();
-        this.getAiVideoAlertorTypeCount();
-        this.initAiVideoAlertorTypeDistribution();
       };
-      this.initfunc = setTimeout(initfunc, 100); // 定时时间
-    },
-    //正在发生
-    safeAutomaticRoll() {
-      var height = $(".safe-afoot-overflow").innerHeight();
-      if (this.forIndex == this.warningList.length) {
-        this.forIndex = 0;
-      } else {
-        this.forIndex = parseFloat(this.forIndex + 0.22221);
+      if (postData.projectDeptId == 0) {
+        delete postData.projectDeptId
       }
-      $("#afootOverflow").animate({ scrollTop: parseInt(height * this.forIndex) + "px" });
-    },
-    warningListMinMouseover() {
-      clearInterval(this.warningInterval);
-    },
-    warningListMinMouseout() {
-      this.warningInterval = setInterval(this.safeAutomaticRoll, 5000);
-    },
-    //head选择项目返回值
-    onItemData(e) {
-      if (e.type == 1) {
-        location.href = "/weixin/screen/toVideo";
-      } else {
-        location.href = "/weixin/screen/toVideoProject";
+      if (postData.projectId == 0) {
+        delete postData.projectId
       }
-    },
-    amplify(url) {
-      this.popupUrl = url;
-      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;
-
-      //     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 || [];
-        if (this.alertorTypeList && this.alertorTypeList[0].dictValue != "") {
-          this.alertorTypeList.unshift({ dictLabel: "全部", dictValue: "" });
-        }
+      if(this.selType!=0){
+        postData.alarmType=this.selType;
+      }
+      this.$api.aiBoxVideo.list(postData, this.listPage.pageIndex, this.listPage.pageSize).then(d => {
+        this.listPage.total = d.total || 0;
+        this.listDatas = d.rows || [];
+        this.listKey++;        
       });
     },
-    getVideoUrl(it) {
-      if (it.state) {
-        return (
-          "http://111.21.209.230:7086/live/cameraid/" +
-          it.videoDvrNumber +
-          "$" +
-          it.passageValue +
-          "/substream/2.m3u8"
-        );
-      } else {
-        return null;
+    loadTodayList() {
+      let postData = {
+        projectDeptId: this.dept?.id || 0,
+        projectId: this.projectInfo?.id,
+        params: {
+          date: new Date()
+        }
+      };
+      if (postData.projectDeptId == 0) {
+        delete postData.projectDeptId
       }
-    },
-    getAiVideoInfoList(passageType, importance) {
-      // axios.post(Host + "/api/video/getAiVideoInfoList", {
-      //     projectId:JSON.parse(localStorage.getItem("data")).aqzg,
-      //     alertorId: this.alertorId
-      // }).then(res => {
-      //     var data = res.data;
-      //     if(data.length < 6){
-      //         var len = 6 - data.length
-      //         for (let i = 0; i < len ; i++) {
-      //             data.push({})
-      //         }
-      //     }
-      //     this.videoList = data;
-      // }).catch(err => {
-      // })
-      let that = this;
-      this.players.forEach((p) => {
-        if (p) {
-          try {
-            p.stop();
-          } catch (e) {}
-        }
+      if (postData.projectId == 0) {
+        delete postData.projectId
+      }
+      this.$api.aiBoxVideo.list(postData, this.todayPage.pageIndex, this.todayPage.pageSize).then(d => {
+        this.todayPage.total = d.total || 0;
+        this.todayList = d.rows || [];
+        this.todayKey++;
       });
-      this.$api.aiBoxVideo
-        .getVideoPassage(
-          this.dept?.id || 0,
-          this.projectInfo?.id || 0,
-          passageType,
-          importance
-        )
-        .then((response) => {
-          let list = [];
-          if (response.data) {
-            response.data.forEach((it) => {
-              it.surProjectVideoPassageList.forEach((v) => {
-                list.push({
-                  videoName: it.videoName,
-                  passageName: v.passageName,
-                  videoDvrNumber: v.videoDvrNumber,
-                  passageValue: v.passageValue,
-                  state: true,
-                });
-              });
-            });
-            let vList = list;
-            //补全
-            let len = 6 - list.length;
-            for (let i = 0; i < len; i++) {
-              list.push({ state: false });
-            }
-            this.videoList = list;
-            setTimeout(() => {
-              if (vList.length > 0) {
-                vList.forEach((v, vidx) => {
-                  if (v.state) {
-                    let player = new WasmPlayer(null, "vd0" + vidx, null, {
-                      Height: true,
-                    });
-                    that.players.push(player);
-                  }
-                });
-              }
-            }, 400);
-            setTimeout(() => {
-              if (vList.length > 0) {
-                vList.forEach((v, vidx) => {
-                  if (v.state) {
-                    let url =
-                      "https://szgc.jhncidg.com/video/live/cameraid/" +
-                      v.videoDvrNumber +
-                      "$" +
-                      v.passageValue +
-                      "/substream/2.m3u8";
-                    that.players[vidx].play(url, 1);
-                  }
-                });
-              }
-            }, 600);
-          } else {
-            for (let i = 0; i < 6; i++) {
-              list.push({ state: false });
-            }
-            this.videoList = list;
-          }
-        });
     },
-    getMajorAiVideoInfoList() {
-      // axios.post(Host + "/api/video/getAiVideoInfoList", {
-      //     projectId: JSON.parse(localStorage.getItem("data")).aqzg,
-      //     majorState: "1",
-      //     alertorId: this.alertorId
-      // }).then(res => {
-      //     var data = res.data;
-      //     /*if(data.length < 4){
-      //         var len = 4 - data.length
-      //         for (let i = 0; i < len ; i++) {
-      //             data.push({})
-      //         }
-      //     }*/
-      //     this.majorVideoList = data;
-      // }).catch(err => {
-      // })
-      let that = this;
-      this.wPlayers.forEach((wp) => {
-        if (wp) {
-          try {
-            wp.stop();
-          } catch (e) {}
-        }
-      });
+    groupCountByProject() {
       this.$api.aiBoxVideo
-        .getVideoPassage(this.dept?.id || 0, this.projectInfo?.id || 0, "", "Y")
-        .then((response) => {
-          let list = [];
-          if (response.data) {
-            response.data.forEach((it) => {
-              it.surProjectVideoPassageList.forEach((v) => {
-                list.push({
-                  videoName: it.videoName,
-                  passageName: v.passageName,
-                  videoDvrNumber: v.videoDvrNumber,
-                  passageValue: v.passageValue,
-                  state: true,
-                });
-              });
-            });
-            let zdVList = list;
-            that.majorVideoSize = list.length;
-            //补全
-            let len = 3 - list.length;
-            for (let i = 0; i < len; i++) {
-              list.push({ state: false });
-            }
-            that.majorVideoList = list;
-            setTimeout(() => {
-              if (zdVList.length > 0) {
-                zdVList.forEach((zdv, zdidx) => {
-                  if (zdv.state) {
-                    let player = new WasmPlayer(null, "wVd0" + zdidx, null, {
-                      Height: true,
-                    });
-                    that.wPlayers.push(player);
-                  }
-                });
-              }
-            }, 400);
-            setTimeout(() => {
-              if (zdVList.length > 0) {
-                zdVList.forEach((zdv, zdidx) => {
-                  if (zdv.state) {
-                    let url =
-                      "https://szgc.jhncidg.com/video/live/cameraid/" +
-                      zdv.videoDvrNumber +
-                      "$" +
-                      zdv.passageValue +
-                      "/substream/2.m3u8";
-                    that.wPlayers[zdidx].play(url, 1);
-                  }
-                });
-              }
-            }, 600);
-          } else {
-            this.majorVideoSize = 0;
-            for (let i = 0; i < 6; i++) {
-              list.push({ state: false });
-            }
-            this.majorVideoList = list;
-          }
-        });
-    },
-    getAnalysisDetailList() {
-      this.$api.aiBoxVideo
-        .listView(this.dept?.id || 0, this.projectInfo?.id)
-        .then((response) => {
-          this.warningList = response.data || [];
+        //.groupCountByProject(this.dept?.id || 0, this.projectInfo?.id)
+        .groupCountByProject( 0, null)
+        .then((d) => {
+          let sum = 0;
+          let tmps = (d.data || []).map((it, idx) => {
+            it.ord = idx + 1;
+            it.percent = 0;
+            sum += it.value;
+            return it;
+          });
+          tmps.forEach(it => {
+            it.percent = it.value * 100.0 / sum;
+          })
+          this.orderList = tmps;
         });
     },
     getAiVideoAlertorTypeCount() {
-      // axios.post(Host + "/api/video/getAiVideoAlertorTypeCount", {
-      //     projectId: JSON.parse(localStorage.getItem("data")).aqzg
-      // }).then(res => {
-      //     var data = res.data;
-      //     var num = 0;
-      //     data.forEach(item =>{
-      //         num += item.value;
-      //     })
-      //     data.forEach(item =>{
-      //         item.percent = (item.value/num*100)
-      //     })
-      //     this.scaleData = data;
-      // }).catch(err => {
-      // })
 
       //今日视图
       this.$api.aiBoxVideo
@@ -825,246 +373,67 @@ export default {
           }
         });
     },
-    initAiVideoAlertorTypeDistribution() {
-      this.$api.aiBoxVideo
-        .selectGroupCountVideoConfig(this.dept?.id || 0, this.projectInfo?.id)
-        .then((response) => {
-          let list = [];
-          if (response.data) {
-            let sum = 0;
-            response.data.forEach((datum) => {
-              sum += datum.value;
-            });
-            response.data.forEach((datum) => {
-              datum.text = datum.name;
-              if (sum == 0) {
-                datum.prop = 0.0;
-              } else {
-                datum.prop = ((datum.value / sum) * 100).toFixed(1);
-              }
-              list.push(datum);
-            });
-            this.availabilityData = list;
-          }
-        });
-    },
-    getAiVideoAlertorTypeWarningCount() {
-      axios
-        .post(Host + "/api/video/getAiVideoAlertorTypeWarningCount", {
-          projectId: JSON.parse(localStorage.getItem("data")).aqzg,
-        })
-        .then((res) => {
-          //预警分布
-          var distributeData = {
-            legend: ["接入视频", "预警路数"],
-            color: [],
-            yAxis: [],
-            data: [],
-          };
-          var data = res.data;
-          var data1 = [];
-          var data2 = [];
-          data.forEach((item) => {
-            distributeData.yAxis.push(item.alertor_type_name);
-            data1.push(item.total);
-            data2.push(item.yjTotal);
-          });
-          var color1 = ["#183e65", "#4bbcff"];
-          var color2 = ["#225254", "#5cd6ad"];
-          distributeData.data.push(data1);
-          distributeData.data.push(data2);
-          distributeData.color.push(color1);
-          distributeData.color.push(color2);
-          this.distributeData = distributeData;
-        })
-        .catch((err) => {});
-    },
-    aiNav(n, id) {
-      this.nav = n;
-      this.alertorId = id;
-      this.getAiVideoInfoList(this.alertorId, "");
-    },
-    getImageUrl(it) {
-      return "/jhapi" + it.imageUrl + ".min.jpg";
-    },
-    //预警概况  Echart
-    warningChart(data, id) {
-      let newPromise = new Promise((resolve) => {
-        resolve();
-      });
-      //然后异步执行echarts的初始化函数
-      newPromise.then(() => {
-        var myChart = echarts.init(document.getElementById(id));
-        option = {
-          color: [
-            "#00fff1",
-            "#04c8fa",
-            "#aa01fe",
-            "#4e84fe",
-            "#ff7b79",
-            "#edae5e",
-            "#fe4101",
-            "#14d18f",
-          ],
-          series: [
-            // 主要展示层的
-            {
-              radius: ["45%", "60%"],
-              center: ["50%", "50%"],
-              type: "pie",
-              label: {
-                normal: {
-                  show: true,
-                  formatter: function (params) {
-                    return (
-                      params.value +
-                      "  " +
-                      params.percent +
-                      "%\n{white|" +
-                      params.name +
-                      "}"
-                    );
-                  },
-                  rich: {
-                    white: {
-                      color: "#c5d9fe",
-                      align: "center",
-                      padding: [0, 0, 5],
-                    },
-                  },
-                  textStyle: {
-                    fontSize: 14,
-                  },
-                  position: "outside",
-                },
-                emphasis: {
-                  show: true,
-                },
-              },
-              labelLine: {
-                normal: {
-                  show: true,
-                  length: 20,
-                  length2: 25,
-                },
-                emphasis: {
-                  show: true,
-                },
-              },
-              data: data,
-            },
-            {
-              name: "外边框",
-              type: "pie",
-              clockWise: false, //顺时加载
-              hoverAnimation: false, //鼠标移入变大
-              center: ["50%", "50%"],
-              radius: ["70%", "70%"],
-              label: {
-                normal: {
-                  show: false,
-                },
-              },
-              data: [
-                {
-                  value: 1,
-                  name: "",
-                  itemStyle: {
-                    normal: {
-                      borderWidth: 3,
-                      borderColor: "#57639d",
-                    },
-                  },
-                },
-              ],
-            },
-          ],
-        };
-        myChart.setOption(option);
-        window.onresize = myChart.resize;
-      });
-    },
-    goVideoPage() {
-      location.href = "/weixin/screen/toVideoProject";
-    },
   },
 };
 </script>
 
 <style lang="less">
-.style-green {
-  background: #00c240;
-}
+.project-aivideo {
+  .chart-overview-gif {
+    top: 37px !important;
+    left: 93px;
+  }
 
-.style-con {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  background: #00c240;
-  border-radius: 50%;
-  top: 15px;
-  right: 15px;
-  z-index: 1;
-}
-.active-video {
-  border: 1px solid #ddcd04;
-}
-.imp-video {
-  border: 2px solid aqua;
-}
-.videobo {
-  border: 1px solid #655f5f;
-}
-.project-expect-list {
-  width: 100%;
-  margin-bottom: 10px;
-}
-.project-expect-title-No {
-  min-width: 100px;
-  text-align: left;
-}
-.project-video {
-}
-.project-expect-info {
-  width: 50%;
-  float: left;
-}
-.project-expect-info img {
-  width: 90%;
-}
-.my-svg-icon {
-  width: 40px;
-  height: 40px;
-  margin-bottom: 20px;
-}
+  .tb-list1 {
+    margin: 12px;
+    width: calc(100% - 24px);
+    border-collapse: collapse;
+    border: solid 1px #ffffff52;
 
-.my-svg-icon * {
-  fill: #389de3;
-}
+    th {
+      font-size: 14px;
+      border: solid 1px #ffffff52;
+      line-height: 60px;
+    }
 
-.people-number-con div.is-split {
-  background: none;
-}
-
-.labour-education .number-unit {
-  position: relative;
-  bottom: -8px;
-}
-
-.number-unit {
-  word-break: keep-all;
-}
-
-.cost-out {
-  .labour-education {
-    height: 70px;
-
-    .people-number-con {
-      padding: 0px;
+    td {
+      font-size: 12px;
+      text-align: center;
+      border: solid 1px #ffffff52;
+      line-height: 40px;
+    }
+  }
+  .ai-list{
+    padding:0px 24px 8px;
+    .ai-item{
+      display: inline-flex;
+      margin:12px 12px 0px 0px;
+      width: calc(33% - 12px);
+      color:#ccc;
+      line-height: 24px;
+      .item-right{
+        padding-left:12px;
+      }
+    }
+  }
+  .data-list{
+    .ai-list{
+      .ai-item{
+        margin-bottom: 8px;
+      }
+    }
+  }
+  .ai-nav{
+    padding:12px;
+    .nav-item{
+      display: inline-block;
+      margin-left: 12px;
+      text-align: center;
+      padding:0px 8px;
+      &:first-child{
+        margin-left: 0px;
+      }
     }
   }
 }
-.safe-afoot-overflow {
-  height: 900px !important;
-}
 </style>
diff --git a/vue.config.js b/vue.config.js
index 1d6c37e..6a80e09 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -37,8 +37,8 @@ module.exports = defineConfig({
         }
       },
       '/jhapi':{
-        target: `http://62.234.3.186/jhapi/`,
-        //target: `http://127.0.0.1:8090/jhapi/`,
+        //target: `http://62.234.3.186/jhapi/`,
+        target: `http://127.0.0.1:8090/jhapi/`,
         //target: `http://szgc.jhncidg.com/jhapi/`,
         changeOrigin: true,
         pathRewrite: {