ll

liukangdong

2024-12-12 b6d0ad0e7e57a77d1983009494b09aa1da5fbfc4

 screen/src/views/SecurityControl.vue

@@ -3,7 +3,7 @@
    <div class="main_app">
      <img src="@/assets/images/SecurityControl/bg@2x.png" class="main_bg" alt="" />
      <div class="main_header">
        <img src="@/assets/images/maintitle@2x.png" class="main_header_bg" alt="" />
        <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" />
        <div class="title">安泰智慧物流园区-安防智能监测</div>
        <div class="time_wrap">
          <span class="date">{{ date }}</span>
@@ -19,7 +19,7 @@
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>实时园区车辆</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
              <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
            </div>
            <div class="second_title">
              <div class="title">
@@ -28,25 +28,25 @@
              </div>
              <div class="num_wrap">
                <div class="la">总车位：</div>
                <div class="val">100</div>
                <div class="val">{{ data.parkingLotTotal }}</div>
              </div>
            </div>
            <div class="stall_static">
              <div class="residue">
                <div class="la">剩余车位</div>
                <div class="val">50</div>
                <div class="val">{{ data.freeParkingLot }}</div>
              </div>
              <div class="total">
                <div class="la">车位总数</div>
                <div class="val">50</div>
                <div class="val">{{ data.parkingLotTotal }}</div>
              </div>
              <div class="rate">
                <div class="la">
                  <span>车位使用率</span>
                  <span class="num">50%</span>
                  <span class="num">{{ data.parkingUseRate }}%</span>
                </div>
                <div class="val">
                  <Percent :rate="50" />
                  <Percent :rate="data.parkingUseRate" />
                </div>
              </div>
            </div>
@@ -58,24 +58,27 @@
            </div>
            <div class="private_car">
              <div class="item">
                <img class="icon" src="@/assets/images/SecurityControl/car_yuangong@2x.png" alt="">
                <div class="num">{{ data.internalCarTotal }}</div>
                <div class="name">员工车辆</div>
                <div class="num">20</div>
              </div>
              <div class="item">
                <img class="icon" src="@/assets/images/SecurityControl/car_xiangguanfang@2x.png" alt="">
                <div class="num num2">{{ data.relatedCarTotal }}</div>
                <div class="name">相关方车辆</div>
                <div class="num num2">20</div>

              </div>
              <div class="item">

                <img class="icon" src="@/assets/images/SecurityControl/car_laifang@2x.png" alt="">
                <div class="num num3">{{ data.visitCarTotal }}</div>
                <div class="name">来访车辆</div>
                <div class="num num3">20</div>
              </div>
            </div>
            <div class="section">
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
            </div>
            <!-- <div class="section">
              <div class="item" :style="{ flex: data.internalCarTotal }"></div>
              <div class="item" :style="{ flex: data.relatedCarTotal }"></div>
              <div class="item" :style="{ flex: data.visitCarTotal }"></div>
            </div> -->
            <div class="second_title">
              <div class="title">
                <img src="@/assets/images/SecurityControl/ic_title_green@2x.png" class="icon" alt="" />
@@ -85,39 +88,63 @@
            <div class="car_static">
              <div class="echart_wrap">
                <div class="pie_text">
                  <div class="fs30"><strong>300</strong></div>
                  <div class="fs30"><strong v-if="data.visitJobCarTotal || data.visitJobCarTotal == 0">{{
                    data.internalJobCarTotal +
                    data.relatedJobCarTotal + data.visitJobCarTotal }}</strong></div>
                  <div>货车</div>
                </div>
                <div class="echart" id="echart1"></div>
              </div>
              <div class="list">
                <div class="item">
                <div class="item" v-for="item, i in dataList1">
                  <div class="line">
                    <div :style="{ background: colors[0] }" class="icon"></div>
                    <div class="text">内运车辆</div>
                    <div :style="{ background: colors[i] }" class="icon"></div>
                    <div class="text">{{ item.name }}</div>
                  </div>
                  <div :style="{ color: colors[0] }" class="num">100</div>
                </div>
                <div class="item">
                  <div class="line">
                    <div :style="{ background: colors[1] }" class="icon"></div>
                    <div class="text">外协运输车辆</div>
                  </div>
                  <div :style="{ color: colors[1] }" class="num">100</div>
                </div>
                <div class="item">
                  <div class="line">
                    <div :style="{ background: colors[2] }" class="icon"></div>
                    <div class="text">市公司卸货车辆</div>
                  </div>
                  <div :style="{ color: colors[2] }" class="num">100</div>
                  <div :style="{ color: colors[i] }" class="num">{{ item.value }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="center_box">
          <div class="center_box_one">
          <div v-show="showJk" class="jiankong">
            <img class="jk_bg" src="@/assets/images/SecurityControl/jiankong_bg@2x.png" alt="">
            <div class="content">
              <div class="player_bg" style="width: 100%;height: 100%;" id="playWnd"> </div>
            </div>
            <div class="right_wrap">
              <div class="menus">
                <div class="search_wrap">
                  <img class="search" src="@/assets/images/SecurityControl/ic_search@2x.png" alt="">
                  <input v-model="dataValue5" @blur="getData5" @keyup.enter="getData5" class="input" type="text"
                    placeholder="搜索监控名称">
                </div>
                <div class="menu_wrap">
                  <div class="menu" v-for="menu, i in data5">
                    <div class="menu_name" @click="menuClick(i)">
                      <div class="name">{{ menu.name }}</div>
                      <img v-if="activeJkIndex == i" class="open" src="@/assets/images/SecurityControl/ar_close@2x.png"
                        alt="">
                      <img v-else class="icon" src="@/assets/images/SecurityControl/ar_open@2x.png" alt="">
                    </div>
                    <div v-if="activeJkIndex == i" class="list">
                      <div class="item" @click="menuItemClick(item)" v-for="item in menu.carmeraList">
                        <img v-if="activeMenu.indexCode == item.indexCode" class="icon"
                          src="@/assets/images/SecurityControl/ic_jiankong_sel@2x.png" alt="">
                        <img v-else class="icon" src="@/assets/images/SecurityControl/ic_jiankon.png" alt="">
                        <span :class="{ active: activeMenu.indexCode == item.indexCode }">{{ item.name }}</span>
                      </div>
                    </div>
                  </div>

                </div>

              </div>
            </div>

          </div>
          <div v-show="!showJk" class="center_box_one">
            <div class="list">
              <div class="item">
                <div class="name_wrap">
@@ -125,7 +152,7 @@
                  <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
                </div>
                <div class="num_wrap">
                  <div class="num">200</div>
                  <div class="num">{{ data.inParkTotal }}</div>
                  <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
                </div>
              </div>
@@ -135,7 +162,7 @@
                  <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
                </div>
                <div class="num_wrap">
                  <div class="num">200</div>
                  <div class="num">{{ data.internalCarTotal }}</div>
                  <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
                </div>
              </div>
@@ -145,7 +172,7 @@
                  <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
                </div>
                <div class="num_wrap">
                  <div class="num">200</div>
                  <div class="num">{{ data2 }}</div>
                  <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
                </div>
              </div>
@@ -155,7 +182,7 @@
                  <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
                </div>
                <div class="num_wrap">
                  <div class="num">200</div>
                  <div class="num">{{ warningNum }}</div>
                  <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
                </div>
              </div>
@@ -169,7 +196,7 @@
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <div>在园人员分析</div>
              </div>
              <img src="@/assets/images/title@2x.png" class="bg" alt="" />
              <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
            </div>
            <div class="second_title">
              <div class="title">
@@ -182,21 +209,25 @@
                <img src="@/assets/images/SecurityControl/staff_ic_neibu@2x.png" alt="">
                <div class="content">
                  <div class="name">内部员工</div>
                  <div class="num"><span>1000</span> | 66.6%</div>
                  <div class="num"><span>{{ data.internalTotal || 0 }}</span> |
                    {{ data.inParkTotal ? ((data.internalTotal / data.inParkTotal) * 100).toFixed(1) : 0 }}%</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/SecurityControl/staff_ic_xiangguanfang@2x.png" alt="">
                <div class="content">
                  <div class="name">长期相关方</div>
                  <div class="num today"><span>1000</span> | 66.6%</div>
                  <div class="num today"><span>{{ data.relatedTotal || 0
                      }}</span> | {{ data.inParkTotal ? ((data.relatedTotal / data.inParkTotal) * 100).toFixed(1) : 0
                    }}%</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/SecurityControl/staff_ic_fangke@2x.png" alt="">
                <div class="content">
                  <div class="name">在园访客</div>
                  <div class="num finish"><span>1000</span> | 66.6%</div>
                  <div class="num finish"><span>{{ data.visitTotal || 0 }}</span>
                    | {{ data.inParkTotal ? ((data.visitTotal / data.inParkTotal) * 100).toFixed(1) : 0 }}%</div>
                </div>
              </div>
            </div>
@@ -210,15 +241,15 @@
              <div class="item">
                <div class="name">待访问</div>
                <div class="num_wrap">
                  <span class="num">22</span>
                  <span class="num">{{ data4.waitVisitNum }}</span>
                  <span>人</span>
                </div>
              </div>
              <div class="spacing"></div>
              <div class="item">
                <div class="name">已登机</div>
                <div class="name">已登记</div>
                <div class="num_wrap">
                  <span class="num">22</span>
                  <span class="num">{{ data4.registerVisitNum }}</span>
                  <span>人</span>
                </div>
              </div>
@@ -226,7 +257,7 @@
              <div class="item">
                <div class="name">已离开</div>
                <div class="num_wrap">
                  <span class="num">22</span>
                  <span class="num">{{ data4.levelNum }}</span>
                  <span>人</span>
                </div>
              </div>
@@ -234,7 +265,7 @@
              <div class="item">
                <div class="name">滞留</div>
                <div class="num_wrap">
                  <span class="num">22</span>
                  <span class="num">{{ data4.retentionNum }}</span>
                  <span>人</span>
                </div>
              </div>
@@ -250,13 +281,13 @@
        </div>
      </div>
      <div class="main_footer">
        <div class="car_warning">
        <!-- <div class="car_warning">
          <div class="com_header">
            <div class="title">
              <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
              <div>当前车辆滞留预警</div>
            </div>
            <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
          </div>
          <div class="table">
            <div class="line header">
@@ -277,7 +308,7 @@
            </div>
            <div class="separate"></div>
          </div>
        </div>
        </div> -->
        <div class="safe_warning">
          <div class="com_header">
            <div class="title">
@@ -285,54 +316,65 @@
              <div>安防告警</div>
            </div>
            <div class="tabs">
              <div class="tab active">全部</div>
              <div class="tab" :class="{ active: warningTab == '0' }" @click="tasClick('0')">全部</div>
              <div class="separate"></div>
              <div class="tab">区域告警</div>
              <div class="tab" :class="{ active: warningTab == '1' }" @click="tasClick('1')">区域告警</div>
              <div class="separate"></div>
              <div class="tab">行为告警</div>
              <div class="tab" :class="{ active: warningTab == '2' }" @click="tasClick('2')">行为告警</div>
            </div>
            <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
          </div>
          <div class="list">
            <div class="item">
              <div class="icon">
                <div class="circle"></div>
                <div class="line"></div>
              </div>
              <div class="content">
                <div class="header">
                  <div class="time">
                    <span>123</span>
                    <span class="status">处理中</span>
          <div class="one_swiper_wrap">
            <div class="list one-swiper">
              <div class="swiper-wrapper">
                <div class="one-swiper-slide swiper-slide item" v-for="item in warningList">
                  <div class="item_wrap">
                    <img :src="item.img" class="avatar" alt="">
                    <div class="content">
                      <div class="header">
                        <div class="name">{{ item.title }}</div>
                        <div class="have_time">已经发生{{ item.haveTime }}</div>
                      </div>
                      <div class="wrap">
                        <div class="line addr">
                          <img class="icon" src="@/assets/images/SecurityControl/xiaofang_ic_weizhi@2x.png" alt="">
                          <span>{{ item.addr }}</span>
                        </div>
                        <div class="line time">
                          <img class="icon" src="@/assets/images/SecurityControl/clock.png" alt="">
                          <span>{{ item.createDate }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="have_time">已经发生<span>1</span>分钟</div>
                  <div v-if="item.title0 && item.createDate0" class="item_wrap">
                    <img :src="item.img0" class="avatar" alt="">
                    <div class="content">
                      <div class="header">
                        <div class="name">{{ item.title0 }}</div>
                        <div class="have_time">已经发生{{ item.haveTime0 }}</div>
                      </div>
                      <div class="wrap">
                        <div class="line addr">
                          <img class="icon" src="@/assets/images/SecurityControl/xiaofang_ic_weizhi@2x.png" alt="">
                          <span>{{ item.addr0 }}</span>
                        </div>
                        <div class="line time">
                          <img class="icon" src="@/assets/images/SecurityControl/clock.png" alt="">
                          <span>{{ item.createDate0 }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="wrap">
                  <div class="title">消防警告</div>
                  <div class="title">address</div>
                <div v-if="warningList.length == 0" class="empty_wrap">
                  <img src="@/assets/images/default_empty.png" alt="">
                </div>
              </div>
            </div>
            <div class="item">
              <div class="icon">
                <div class="circle"></div>
                <div class="line"></div>
              </div>
              <div class="content">
                <div class="header">
                  <div class="time">
                    <span>123</span>
                    <span class="status">处理中</span>
                  </div>
                  <div class="have_time">已经发生<span>1</span>分钟</div>
                </div>
                <div class="wrap">
                  <div class="title">消防警告</div>
                  <div class="title">address</div>
                </div>
              </div>
            </div>

          </div>

        </div>
        <div class="garden_warning">
          <div class="com_header">
@@ -340,37 +382,33 @@
              <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
              <div>园区安防设备</div>
            </div>
            <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
          </div>
          <div class="monitoring">
            <img src="@/assets/images/SecurityControl/jiankong.png" class="icon" alt="">
          <div class="monitoring" @click="showJk = !showJk">
            <img src="@/assets/images/SecurityControl/ic_jiankong@2x.png" class="icon" alt="">
            <div>监控列表</div>
            <img src="@/assets/images/SecurityControl/jiankong_ic_open@2x.png" class="top" alt="">
            <img v-if="showJk" src="@/assets/images/SecurityControl/jiankong_ic_close@2x.png" class="top" alt="">
            <img v-else src="@/assets/images/SecurityControl/jiankong_ic_open@2x.png" class="top" alt="">
          </div>
          <div class="content">
            <div class="sa_static">
              <div class="echart_wrap">
                <div class="pie_text">
                  <div class="fs30"><strong>300</strong></div>
                  <div class="fs30"><strong v-if="dataListT2 && dataListT2.length == 2">{{ dataListT2[0].value +
                    dataListT2[1].value }}</strong></div>
                  <div>总计</div>
                </div>
                <div class="echart" id="echart2"></div>
              </div>
              <div class="list">
                <div class="item">
                <div class="item" v-for="item, i in dataListT2">
                  <div class="line">
                    <div :style="{ background: colors[1] }" class="icon"></div>
                    <div class="text">在线</div>
                    <div :style="{ background: colors[i] }" class="icon"></div>
                    <div class="text">{{ item.name }}</div>
                  </div>
                  <div :style="{ color: colors[1] }" class="num">100</div>
                  <div :style="{ color: colors[i] }" class="num">{{ item.value }} | {{ item.rate }}%</div>
                </div>
                <div class="item">
                  <div class="line">
                    <div :style="{ background: colors[2] }" class="icon"></div>
                    <div class="text">离线</div>
                  </div>
                  <div :style="{ color: colors[2] }" class="num">100</div>
                </div>

              </div>
            </div>
            <div class="table">
@@ -381,22 +419,23 @@
                <div>离线数</div>
                <div>在线率</div>
              </div>
              <div class="line">
                <div class="driver">门禁设备</div>
                <div>10</div>
                <div>10</div>
                <div>10</div>
                <div>10</div>
              <div class="list two-swiper">
                <div class="swiper-wrapper">
                  <template v-for="item, i in dataList2">
                    <div class="item two-swiper-slide swiper-slide">
                      <div class="line">
                        <div class="driver">{{ item.deviceType }}</div>
                        <div>{{ item.totalNum }}</div>
                        <div>{{ item.onlineNum }}</div>
                        <div>{{ item.offlineDeviceNum }}</div>
                        <div>{{ item.totalNum ? ((item.onlineNum / item.totalNum) * 100).toFixed(0) : 0 }}%
                        </div>
                      </div>
                      <div class="separate"></div>
                    </div>
                  </template>
                </div>
              </div>
              <div class="separate"></div>
              <div class="line">
                <div class="driver">门禁设备</div>
                <div>10</div>
                <div>10</div>
                <div>10</div>
                <div>10</div>
              </div>
              <div class="separate"></div>
            </div>
          </div>
        </div>
@@ -406,7 +445,7 @@
              <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
              <div>今日访客滞留情况</div>
            </div>
            <img src="@/assets/images/title@2x.png" class="bg" alt="" />
            <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
          </div>
          <div class="table">
            <div class="line header">
@@ -414,18 +453,21 @@
              <div class="dept">拜访部门</div>
              <div class="dept">超时时长</div>
            </div>
            <div class="line">
              <div>name</div>
              <div class="dept">综合管理科</div>
              <div class="dept">10:21</div>
            <div v-if="dataList3.length > 0" class="three-swiper list">
              <div class="swiper-wrapper">
                <div class="item swiper-slide three-swiper-slide" v-for="item in dataList3">
                  <div class="line">
                    <div>{{ item.name }}</div>
                    <div class="dept">{{ item.companyName }}</div>
                    <div class="dept">{{ item.timeOutMinuteT }}</div>
                  </div>
                  <div class="separate"></div>
                </div>
              </div>
            </div>
            <div class="separate"></div>
            <div class="line">
              <div>name</div>
              <div class="dept">综合管理科</div>
              <div class="dept">10:21</div>
            <div v-if="dataList3.length == 0" class="empty_wrap">
              <img src="@/assets/images/default_empty.png" alt="">
            </div>
            <div class="separate"></div>
          </div>
        </div>
      </div>
@@ -438,9 +480,23 @@
import VScaleScreen from 'v-scale-screen'
import Percent from '@/components/percent.vue'
import dayjs from 'dayjs'

import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)
import * as echarts from 'echarts'
const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
import 'swiper/css/swiper.min.css'
import Swiper from 'swiper'
import {
  getEnergyCenterData,
  afgetCarmeraPreviemUrl,
  afwarningEventData,
  getSecurityDeviceData,
  getVisitRetentionData,
  afgetVisitData,
  afregionTreea,
  visitSecurityData
} from '@/api'


const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
const date = ref(dayjs().format('YYYY.MM.DD'))
const week = ref(weekMap[new Date().getDay()])
@@ -451,6 +507,138 @@
  time.value = dayjs().format('HH:mm:ss')

}, 1000)


const oWebControl = ref(null)
const initCount = ref()
const pubKey = ref('')
const initPlugin = () => {
  oWebControl.value = new WebControl({
    szPluginContainer: "playWnd",                       // 指定容器id
    iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
    iServicePortEnd: 15900,
    szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",   // 用于IE10使用ActiveX的clsid
    cbConnectSuccess: function () {
      // 创建WebControl实例成功
      oWebControl.value.JS_StartService("window", {         // WebControl实例创建成功后需要启动服务
        dllPath: "./VideoPluginConnect.dll"         // 值"./VideoPluginConnect.dll"写死
      }).then(function () {
        oWebControl.value.JS_SetWindowControlCallback({   // 设置消息回调
          cbIntegrationCallBack: cbIntegrationCallBack
        })// 启动插件服务成功
        // oWebControl.value.JS_CreateWnd("playWnd", that.boxWidth, that.boxHeight).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定，boxWidth, boxHeight容器
        oWebControl.value.JS_CreateWnd("playWnd").then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定，boxWidth, boxHeight容器
          init()  // 创建播放实例成功后初始化
        })
      }, function () { // 启动插件服务失败
      })
    },
    cbConnectError: function () { // 创建WebControl实例失败
      oWebControl.value = null
      $("#playWnd").html("插件未启动，正在尝试启动，请稍候...")
      WebControl.JS_WakeUp("VideoWebPlugin://") // 程序未启动时执行error函数，采用wakeup来启动程序
      initCount.value++
      if (initCount.value < 3) {
        setTimeout(function () {
          initPlugin()
        }, 3000)
      } else {
        $("#playWnd").html("插件启动失败，请检查插件是否安装！或重新下载 <a href='./videoUrl/VideoWebPlugin.exe' target='_blank'>下载a<a>")
      }
    },
    cbConnectClose: function (bNormalClose) {
      // 异常断开：bNormalClose = false
      // JS_Disconnect正常断开：bNormalClose = true
      oWebControl.value = null
      $("#playWnd").html("插件未启动，正在尝试启动，请稍候...")
      WebControl.JS_WakeUp("VideoWebPlugin://")
      initCount.value++
      if (initCount.value < 3) {
        setTimeout(function () {
          initPlugin()
        }, 3000)
      } else {
        $("#playWnd").html("插件启动失败，请检查插件是否安装！或重新下载 <a href='https://img0.baidu.com/it/u=3867022436,608124672&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422' target='_blank'>下载b<a>")
      }
    }
  })
}
function fileDown (){
  window.open('./videoUrl/VideoWebPlugin.exe')
}
// 消息回调
const cbIntegrationCallBack = (oData) => {
  let response = oData.responseMsg
  // response.type=1  选中窗口消息  type=2 播放消息
}
// 监控




// 初始化
const init = () => {
  getPubKey(function () {
    ////////////////////////////////// 请自行修改以下变量值   ////////////////////////////////////
    let appkey = "28631222"                           //综合安防管理平台提供的appkey，必填
    let secret = setEncrypt("vRfUmiilCd4EpLmtZKoT")   //综合安防管理平台提供的secret，必填
    let ip = "112.48.8.98"                           //综合安防管理平台IP地址，必填
    let playMode = 0                                  //初始播放模式：0-预览(实时流)，1-回放(视频)
    let port = 10443                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
    let snapDir = "D:\\SnapDir"                       //抓图存储路径
    let videoDir = "D:\\VideoDir"                     //紧急录像或录像剪辑存储路径
    let layout = "4x1"                                //playMode指定模式的布局
    let enableHTTPS = 1                               //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
    let encryptedFields = 'secret'                    //加密字段，默认加密领域为secret
    let showToolbar = 1                               //是否显示工具栏，0-不显示，非0-显示
    let showSmart = 1                                 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
    let buttonIDs = "0,16,256,257,258,259,260,513,514,515,516,517,768"  //自定义工具条按钮
    oWebControl.value.JS_RequestInterface({
      funcName: "init",
      argument: JSON.stringify({
        appkey: appkey,                            //API网关提供的appkey
        secret: secret,                            //API网关提供的secret
        ip: ip,                                    //API网关IP地址
        playMode: playMode,                        //播放模式（决定显示预览还是回放界面）
        port: port,                                //端口
        snapDir: snapDir,                          //抓图存储路径
        videoDir: videoDir,                        //紧急录像或录像剪辑存储路径
        layout: layout,                            //布局
        enableHTTPS: enableHTTPS,                  //是否启用HTTPS协议
        encryptedFields: encryptedFields,          //加密字段
        showToolbar: showToolbar,                  //是否显示工具栏
        showSmart: showSmart,                      //是否显示智能信息
        buttonIDs: buttonIDs                       //自定义工具条按钮
      })
    }).then(function (oData) {
      // oWebControl.value.JS_Resize(that.boxWidth, that.boxHeight)  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
    })
  })
}

// 获取公钥
function getPubKey(callback) {
  oWebControl.value.JS_RequestInterface({
    funcName: 'getRSAPubKey',
    argument: JSON.stringify({
      keyLength: 1024,
    }),
  }).then((oData) => {
    if (oData.responseMsg.data) {
      pubKey.value = oData.responseMsg.data
      callback()
    }
  })
}

// RSA加密
function setEncrypt(value) {
  let that = this
  let encrypt = new JSEncrypt()
  encrypt.setPublicKey(pubKey.value)
  return encrypt.encrypt(value)
}


const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
const initEnergy = () => {
@@ -513,8 +701,18 @@
    myChart.resize()
  })
}

const dataList1 = ref([])
const initEchart1 = () => {
  const myChart = echarts.init(document.getElementById('echart1'))
  const temp = []
  temp.push({ name: '内运车辆', value: data.value.internalJobCarTotal })
  temp.push({ name: '外协运输车辆', value: data.value.relatedJobCarTotal })
  temp.push({ name: '市公司卸货车辆', value: data.value.visitJobCarTotal })
  temp.sort((a, b) => {
    return a.value - b.value
  })
  dataList1.value = temp
  const option = {
    series: [
      {
@@ -532,11 +730,7 @@
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' }
        ]
        data: temp
      }
    ]
  }
@@ -545,6 +739,8 @@
    myChart.resize()
  })
}

const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
const initEchart2 = () => {
  const myChart = echarts.init(document.getElementById('echart2'))
  const option = {
@@ -556,7 +752,7 @@
          show: false,
          position: 'center'
        },
        padAngle: 5,
        padAngle: 3,
        itemStyle: {
          borderRadius: 10
        },
@@ -564,11 +760,7 @@
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' }
        ]
        data: dataListT2.value
      }
    ]
  }
@@ -597,18 +789,24 @@
    }]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: '#4370f2'
    }, {
      offset: 1,
      color: '#61d3f9'
    }]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: '#4679f6'
    }, {
      offset: 1,
      color: '#4674f6'
    }]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: '#4370f2'
    }, {
      offset: 1,
      color: '#61d3f9'
    }])]
  ]
  const data = []
  data.push({ name: '待访问', value: data4.value.waitVisitNum, rate: (data4.value.waitVisitNum / data4.value.total).toFixed(1) })
  data.push({ name: '已登记', value: data4.value.registerVisitNum, rate: (data4.value.registerVisitNum / data4.value.total).toFixed(1) })
  data.push({ name: '已离开', value: data4.value.levelNum, rate: (data4.value.levelNum / data4.value.total).toFixed(1) })
  data.push({ name: '滞留', value: data4.value.retentionNum, rate: (data4.value.retentionNum / data4.value.total).toFixed(1) })
  const option = {
    color: colors,
    tooltip: {
@@ -632,7 +830,7 @@
        color: "#000"
      },
      itemHeight: 2,
      data: ['待访问', '已登记', '已离开', '滞留']
      data: data.map(i => i.name)
    },
    series: [
      {
@@ -646,6 +844,9 @@
        gap: 4,
        label: {
          show: false,
          formatter: '',
          lineHeight: 0,
          position: 'inside'
        },
        tooltip: {
          trigger: 'none', // 当鼠标悬浮在某个数据项上时触发
@@ -654,13 +855,7 @@
          borderWidth: 0,
          borderColor: '#fff'
        },
        data: [
          { value: 100, name: '待访问', },
          { value: 50, name: '已登记' },
          { value: 20, name: '已离开' },
          { value: 30, name: '滞留' },

        ]
        data
      },
      {
        type: 'funnel',
@@ -675,12 +870,16 @@
        label: {
          show: true,
          position: 'outside',
          formatter: '{a|{b}}  {a|{c}%}',
          formatter: (params) => {
            const index = params.dataIndex
            return `{color${index}|${params.data.name} ${params.data.rate}%}`
            // return `<div>${params.data.name}</div>`
          },
          rich: {
            a: {
              color: '#869CC9',
              fontSize: 13
            },
            color0: { color: 'orange', fontSize: 14 },
            color1: { color: '#869CC9', fontSize: 13 },
            color2: { color: '#869CC9', fontSize: 13 },
            color3: { color: '#869CC9', fontSize: 13 }
          }
        },
        labelLine: {
@@ -706,13 +905,7 @@
            opacity: 1
          }
        },
        data: [
          { value: 100, name: '待访问', },
          { value: 50, name: '已登记' },
          { value: 20, name: '已离开' },
          { value: 30, name: '滞留' },

        ]
        data
      },
    ]
  }
@@ -722,10 +915,224 @@
  })
}

const data = ref({})
const getData1 = () => {
  getEnergyCenterData().then(res => {
    if (res.code == 200) {
      const result = res.data
      data.value = result
      initEchart1()
    }
  })
}

const dataList2 = ref([])
const data2 = ref(0)
const dataListT2 = ref([])
const getData2 = () => {
  getSecurityDeviceData().then(res => {
    if (res.code == 200 && res.data && res.data.length > 0) {
      const result = res.data
      let temp = []
      let online = 0
      let outline = 0
      let total = 0
      dataList2.value = result.map(item => {
        total += item.totalNum
        online += item.onlineNum
        outline += item.offlineDeviceNum
        if (item.deviceType && item.deviceType.length > 6) {
          item.deviceType = item.deviceType.slice(0, 6) + '...'
        }
        return item
      })
      data2.value = total
      if (online >= outline) {
        temp.push({ name: '在线', value: online, rate: ((online / (online + outline)) * 100).toFixed(1) })
        temp.push({ name: '离线', value: outline, rate: ((outline / (online + outline)) * 100).toFixed(1) })
      } else {
        temp.push({ name: '离线', value: outline, rate: ((outline / (online + outline)) * 100).toFixed(1) })
        temp.push({ name: '在线', value: online, rate: ((online / (online + outline)) * 100).toFixed(1) })
      }

      dataListT2.value = temp
    }
    initEchart2()
  })
}

const dataList3 = ref([])
const data4 = ref({})
const getData3 = () => {
  visitSecurityData().then(res => {
    if (!res.code == 200) return
    data4.value = res.data || {}
    let obj = data4.value
    data4.value.total = obj.levelNum + obj.retentionNum + obj.registerVisitNum + obj.waitVisitNum
    const result = res.data?.visitRetentionDataList || []
    dataList3.value = result.map(i => {
      if (i.timeOutMinute) {
        i.timeOutMinute = Math.abs(i.timeOutMinute)
      }
      if (i.timeOutMinute > 60 * 24) {
        i.timeOutMinuteT = dayjs.duration(i.timeOutMinute * 60 * 1000).format('D天H时m分')
      } else if (i.timeOutMinute > 60) {
        i.timeOutMinuteT = dayjs.duration(i.timeOutMinute * 60 * 1000).format('H时m分')
      } else {
        i.timeOutMinuteT = item.timeOutMinuteT + '分'
      }

      return i
    })
    initEchart3()
  })
}

const warningTab = ref('0')
const warningNum = ref(0)
const warningList = ref([])
const getWarning = () => {
  afwarningEventData({ type: warningTab.value }).then(res => {
    if (!res.data) return
    const result = res.data.list || []
    warningNum.value = res.data.total
    warningList.value = result.map(item => {
      item.haveTime = dayjs.duration(new Date().getTime() - new Date(item.createDate).getTime()).format('HH小时mm分钟')
      return item
    })
    let temp = []
    warningList.value.forEach((item, i) => {
      // console.log(i);
      if (i == 0 || i % 2 == 0) {
        temp.push(item)
      } else {
        temp[temp.length - 1].addr0 = item.addr
        temp[temp.length - 1].createDate0 = item.createDate
        temp[temp.length - 1].haveTime0 = item.haveTime
        temp[temp.length - 1].img0 = item.img
        temp[temp.length - 1].title0 = item.title
      }
    })
    warningList.value = temp
    // console.log('temp', warningList.value);
  })
}
const tasClick = (val) => {
  warningTab.value = val
  getWarning()
}


const showJk = ref(false)
const activeJkIndex = ref(0)
const activeMenu = ref({})
const activeVideo = ref('')
const dataValue5 = ref('')
const data5 = ref([])
const getData5 = () => {
  afregionTreea({
    name: dataValue5.value,
    withCameras: 1
  }).then(res => {
    const result = res.data || []
    data5.value = result.filter(item => item.carmeraList && item.carmeraList.length > 0)
  })
}
const menuClick = (val) => {
  if (val == activeJkIndex.value) {
    activeJkIndex.value = -1
  } else {
    activeJkIndex.value = val
  }
}
const menuItemClick = (val) => {
  initPlugin()
  activeMenu.value = val
  oWebControl.value.JS_RequestInterface({
    funcName: "startPreview",
    argument: JSON.stringify({
      cameraIndexCode: val.indexCode,            //监控点编号
      streamMode: 0,                   //主子码流标识：0-主码流，1-子码流
      transMode: 1,                    //传输协议：0-UDP，1-TCP
      gpuMode: 0,                      //是否启用GPU硬解，0-不启用，1-启用
      wndId: -1                         //播放窗口序号（在2x2以上布局下可指定播放窗口）
    })
  }).then((oData) => {
    if (oData.responseMsg.code === 1) {
      console.log('success')
    }
  })
  // afgetCarmeraPreviemUrl({ indexCode: val.indexCode }).then(res => {
  //   activeVideo.value = res.data
  // })
}

const autoplayFlag = (list = [], leng = 4, time = 2000) => {
  if (list.length > leng) {
    return { delay: time, disableOnInteraction: false }
  } else {
    return false
  }
}
const loopFn1 = () => {
  var newSwiper1 = new Swiper('.one-swiper', {
    initialSlide: 0,
    // loop: true, // 循环模式选项
    direction: 'vertical', //竖直方向
    slidesPerView: 2,
    autoplay: warningList.value.length > 1 ? { delay: 4000, disableOnInteraction: false } : false,
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
  })
}
const loopFn2 = () => {
  var newSwiper1 = new Swiper('.two-swiper', {
    initialSlide: 0,
    direction: 'vertical', //竖直方向
    slidesPerView: 3,
    autoplay: autoplayFlag(dataList2.value, 3, 4000),
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
  })
}
const loopFn3 = () => {
  var newSwiper1 = new Swiper('.three-swiper', {
    initialSlide: 0,
    // loop: true, // 循环模式选项
    direction: 'vertical', //竖直方向
    slidesPerView: 3,
    // autoplay: { delay: 500, disableOnInteraction: false },
    autoplay: autoplayFlag(dataList3.value, 3, 4000),
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
  })
}




onMounted(() => {
  initEchart3()
  initEchart1()
  initEchart2()
  getData1()
  getData2()
  getData3()
  getData5()
  getWarning()


  setInterval(() => {
    getData1()
    getData2()
    getData3()
    getWarning()
  }, 1000 * 60)

  setInterval(() => {
    getData5()
  }, 1000 * 60 * 60)

  setTimeout(() => {
    loopFn1()
    loopFn2()
    loopFn3()
  }, 12000)

})


@@ -736,10 +1143,13 @@
  box-sizing: border-box;
}

.swiper-wrapper {
  display: block !important;
}

.main_content {
  display: flex;
  padding: 20px 25px 0;
  border: 1px solid;

  .left_box {
    width: 360px;
@@ -750,6 +1160,8 @@
      margin-bottom: 20px;
      font-size: 14px;
      color: #D2E0FF;
      background: rgba(0, 86, 255, 0.05);
      backdrop-filter: blur(5px);

      .second_title {
        margin-top: 24px;
@@ -807,6 +1219,13 @@
        .item {
          display: flex;
          flex-direction: column;
          align-items: center;

          .icon {
            width: 52px;
            height: 52px;
            margin-bottom: 8px;
          }

          /* align-items: center; */
          .num {
@@ -936,6 +1355,116 @@
    flex: 1;
    margin: 0 20px;

    .jiankong {
      margin: 0 48px;
      display: flex;
      height: calc(100% - 40px);
      position: relative;

      .jk_bg {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -1;
      }

      .content {
        flex: 1;
        /* height: calc( 100% - 30px ); */
        padding: 16px 0px 32px 20px;

        .video {
          width: 100%;
          height: 100%;
        }
      }

      .right_wrap {
        margin-left: 15px;
        width: 250px;
        padding: 16px 20px 32px 0;

        .menus {
          height: 100%;
          background: #002A42;
          border: 1px solid rgba(1, 171, 254, 0.8);
          padding: 15px;

          .search_wrap {
            display: flex;
            align-items: center;
            box-shadow: inset 0px 0px 6px 0px rgba(1, 171, 254, 0.5);
            border-radius: 2px;
            border: 1px solid rgba(1, 171, 254, 0.8);
            height: 34px;
            line-height: 34px;
            padding-left: 12px;

            .search {
              width: 12px;
              height: 12px;
              margin-right: 3px;
            }

            .input {
              flex: 1;
              font-size: 14px;
            }
          }

          .menu_wrap {
            margin-top: 15px;
            max-height: 440px;
            overflow: auto;

            .menu {
              .menu_name {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 34px;
                border-bottom: 2px solid rgba(210, 224, 255, 0.2);
                cursor: pointer;

                .name {}

                .icon {
                  width: 8px;
                }

                .open {
                  width: 14px;
                }
              }

              .list {
                .item {
                  display: flex;
                  /* align-items: center; */
                  margin-left: 10px;
                  cursor: pointer;
                  color: #D2E0FF;
                  margin-top: 8px;

                  .icon {
                    width: 15px;
                    height: 14px;
                    margin-right: 8px;
                    margin-top: 2px;
                  }

                  .active {
                    color: #01D9FE;
                  }
                }
              }
            }
          }
        }
      }

    }

    .center_box_one {
      padding: 8px 60px;

@@ -981,6 +1510,8 @@

    .right_box_one {
      margin-bottom: 20px;
      background: rgba(0, 86, 255, 0.05);
      backdrop-filter: blur(5px);

      .second_title {
        margin-top: 20px;
@@ -1063,9 +1594,15 @@
      }
    }

    .right_box_two {}
    .right_box_two {
      background: rgba(0, 86, 255, 0.05);
      backdrop-filter: blur(5px);
    }

    .right_box_three {}
    .right_box_three {
      background: rgba(0, 86, 255, 0.05);
      backdrop-filter: blur(5px);
    }
  }
}

@@ -1184,43 +1721,53 @@
  }

  .safe_warning {
    width: 406px;
    margin-left: 20px;
    width: 786px;
    margin-right: 20px;

    /* one-swiper */
    .one_swiper_wrap {
      height: 140px;
      overflow: hidden;
      background: rgba(0, 86, 255, 0.05);
      backdrop-filter: blur(5px);
    }

    .list {
      height: 124px;
      overflow: auto;
      height: 204px;
      overflow: hidden;
      margin-top: 15px;
      scrollbar-width: none;
      display: flex;
      flex-wrap: wrap;
      margin-left: 20px;

      .item {
        display: flex;
        width: 736px;
        height: 102px !important;
        font-size: 13px;
        color: #D2E0FF;
        display: flex;

        .icon {
          width: 40px;
        /* border: 1px solid; */
        .item_wrap {
          width: 368px;
          height: 90px;
          padding: 10px;
          background: linear-gradient(270deg, rgba(1, 217, 254, 0) 0%, rgba(1, 217, 254, 0.19) 100%);
          border: 1px solid #006E81;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-top: 3px;
          margin-right: 10px;

          .circle {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #01D9FE;
            box-shadow: 0px 0px 1px 4px #34788f;
            /* opacity: 0.52; */
          &:nth-of-type(2n) {
            margin-right: 0;
          }
        }

          .line {
            margin-top: 3px;
            width: 1px;
            height: calc(100% - 10px);
            background-color: #153947;
          }

        .avatar {
          width: 70px;
          height: 70px;
          margin-right: 10px;
        }

        .content {
@@ -1230,20 +1777,11 @@
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;

            .time {
              display: flex;
              align-items: center;

              .status {
                height: 18px;
                line-height: 18px;
                border-radius: 2px;
                padding: 2px 4px;
                border: 1px solid #869CC9;
                font-size: 12px;
                margin-left: 8px;
              }
            .name {
              font-weight: 500;
              font-size: 15px;
            }

            .have_time {
@@ -1257,26 +1795,18 @@
          }

          .wrap {
            height: 40px;
            background: linear-gradient(270deg, rgba(254, 85, 1, 0) 0%, rgba(254, 85, 1, 0.19) 100%);
            border-radius: 2px 0px 0px 2px;
            display: flex;
            align-items: center;
            border: 1px solid;
            margin-bottom: 20px;
            margin-top: 8px;
            padding: 0 10px;
            border-image: linear-gradient(270deg, rgba(254, 85, 1, 0), rgba(254, 85, 1, 0.6)) 1 1;
            font-size: 12px;
            color: #D2E0FF;

            .title {
              flex: 4;
              font-weight: bold;
              font-size: 15px;
              color: #FFFFFF;
            .line {
              display: flex;
              align-items: center;
              margin-bottom: 3px;
            }

            .address {
              flex: 6;
            .icon {
              width: 12px;
              margin-right: 8px;
            }
          }
        }
@@ -1288,6 +1818,9 @@
    flex: 1;
    margin-right: 20px;
    position: relative;
    background: rgba(0, 86, 255, 0.05);
    backdrop-filter: blur(5px);

    .content {
      display: flex;

@@ -1366,14 +1899,25 @@
      }

      .table {
        .list {
          height: 102px !important;
          overflow: hidden;

          .item {
            height: 34px !important;
          }
        }

        .line {
          height: 32px !important;

          div {
            justify-content: flex-end;
            padding-right: 10px;
          }

          .driver {
            flex: 4;
            flex: 5;
            justify-content: center;
          }
        }
@@ -1389,6 +1933,7 @@

    .monitoring {
      position: absolute;
      cursor: pointer;
      top: -60px;
      right: 0;
      display: flex;
@@ -1401,9 +1946,13 @@
      background: linear-gradient(180deg, #021F4A 0%, #054281 100%), linear-gradient(180deg, #011738 0%, rgba(5, 66, 129, 0.26) 100%), #00141F;
      border-radius: 2px;
      border: 1px solid rgba(12, 153, 236, 0.68);
      .icon{
        width: 30px;

      .icon {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }

      .top {
        width: 12px;
        height: 12px;
@@ -1415,8 +1964,19 @@

  .visitor_warning {
    width: 360px;
    background: rgba(0, 86, 255, 0.05);
    backdrop-filter: blur(5px);

    .table {
      .list {
        height: 102px !important;
        overflow: hidden;

        .item {
          height: 34px !important;
        }
      }

      .line {
        div {
          .dept {
@@ -1441,13 +2001,6 @@
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    background-image: -webkit-linear-gradient(top,
        #ffffff 0%,
        #c8ddff 66%,
        #85b4ff 72%,
        #74a9ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    .icon {
      width: 16px;
@@ -1465,12 +2018,19 @@
    .separate {
      width: 1px;
      height: 14px;
      background-color: #d2e0ff;
      /* background-color: #d2e0ff; */
      margin: 0 6px;
    }

    .tab {
      cursor: pointer;
    }

    .active {
      color: #0094eb;
      font-weight: 600;
      font-size: 15px;
      color: #FFFFFF;
      text-shadow: 0px 0px 8px #01D9FE;
    }
  }
}