访客系统
blame | 历史 | 补丁 | 提交 | 提交对比 | 忽略空白
jiangping
2025-02-26 4e2e52b766d87fc528d02bdebc1757c3dda8c596 
 screen/src/views/SecurityControl.vue


@@ -3,8 +3,8 @@


    <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="" />


        <div class="title">安泰智慧物流园区-安防智能监测</div>


        <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" />


        <div class="title">安泰智慧物流园区-智能安防监测</div>


        <div class="time_wrap">


          <span class="date">{{ date }}</span>


          <span class="week">{{ week }}</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,65 @@


            <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">


              <Video v-if="showJk && activeMenu && activeMenu.indexCode" :href="data.videoPluginUrl"


                :indexCode="activeMenu.indexCode" />


              <!-- <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 +154,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 +164,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.inParkCarTotal || 0 }}</div>


                  <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">


                </div>


              </div>


@@ -145,7 +174,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 +184,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 +198,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 +211,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 +243,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 +259,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 +267,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 +283,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,62 +310,73 @@


            </div>


            <div class="separate"></div>


          </div>


        </div>


        </div> -->


        <div class="safe_warning">


          <Loading v-if="loading1" />


          <div class="com_header">


            <div class="title">


              <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />


              <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>


                <div class="wrap">


                  <div class="title">消防警告</div>


                  <div class="title">address</div>


                </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 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 class="have_time">已经发生<span>1</span>分钟</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>




        </div>


        <div class="garden_warning">


          <div class="com_header">


@@ -340,37 +384,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="changeMon">


            <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 +421,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.filter(i => i.totalNum > 0)">


                    <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,26 +447,29 @@


              <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">


              <div>姓名</div>


              <div class="dept">拜访部门</div>


              <div class="dept">超时时长</div>


              <div class="time">超时时长</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="time">{{ 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>


@@ -434,15 +478,29 @@


</template>




<script setup>


import { ref, onMounted } from 'vue'


import { ref, onMounted, nextTick } from 'vue'


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'


import { getEnergyCenterData, getSecurityDeviceData, getVisitRetentionData } from '@/api'


import 'swiper/css/swiper.min.css'


import Swiper from 'swiper'


import Video from './videoUrl/Video.vue'


import Loading from '@/components/Loading.vue'


import {


  getEnergyCenterData,


  afgetCarmeraPreviemUrl,


  afwarningEventData,


  getSecurityDeviceData,


  getVisitRetentionData,


  afgetVisitData,


  afregionTreea,


  visitSecurityData


} from '@/api'






const colors = ['#FEAF01', '#01ABFE', '#51F9E4']


const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]


const date = ref(dayjs().format('YYYY.MM.DD'))


const week = ref(weekMap[new Date().getDay()])


@@ -515,8 +573,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: [


      {


@@ -534,11 +602,7 @@


        labelLine: {


          show: false


        },


        data: [


          { value: 1048, name: 'Search Engine' },


          { value: 735, name: 'Direct' },


          { value: 580, name: 'Email' }


        ]


        data: temp


      }


    ]


  }


@@ -547,6 +611,8 @@


    myChart.resize()


  })


}




const colors = ['#01ABFE', '#FEAF01', '#51F9E4']


const initEchart2 = () => {


  const myChart = echarts.init(document.getElementById('echart2'))


  const option = {


@@ -558,7 +624,7 @@


          show: false,


          position: 'center'


        },


        padAngle: 5,


        padAngle: 3,


        itemStyle: {


          borderRadius: 10


        },


@@ -566,11 +632,7 @@


        labelLine: {


          show: false


        },


        data: [


          { value: 1048, name: 'Search Engine' },


          { value: 735, name: 'Direct' },


          { value: 580, name: 'Email' }


        ]


        data: dataListT2.value


      }


    ]


  }


@@ -599,18 +661,34 @@


    }]),


    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 = []


  if (data4.value.total) {


    data.push({ name: '待访问', value: data4.value.waitVisitNum, rate: (data4.value.waitVisitNum / data4.value.total).toFixed(3) })


    data.push({ name: '已登记', value: data4.value.registerVisitNum, rate: (data4.value.registerVisitNum / data4.value.total).toFixed(3) })


    data.push({ name: '已离开', value: data4.value.levelNum, rate: (data4.value.levelNum / data4.value.total).toFixed(3) })


    data.push({ name: '滞留', value: data4.value.retentionNum, rate: (data4.value.retentionNum / data4.value.total).toFixed(3) })


  } else {


    data.push({ name: '待访问', value: data4.value.waitVisitNum, rate: 0 })


    data.push({ name: '已登记', value: data4.value.registerVisitNum, rate: 0 })


    data.push({ name: '已离开', value: data4.value.levelNum, rate: 0 })


    data.push({ name: '滞留', value: data4.value.retentionNum, rate: 0 })


  }


  data.sort((a, b) => (b.value - a.value))


  // console.log('data', data);




  const option = {


    color: colors,


    tooltip: {


@@ -634,7 +712,7 @@


        color: "#000"


      },


      itemHeight: 2,


      data: ['待访问', '已登记', '已离开', '滞留']


      data: data.map(i => i.name)


    },


    series: [


      {


@@ -648,6 +726,9 @@


        gap: 4,


        label: {


          show: false,


          formatter: '',


          lineHeight: 0,


          position: 'inside'


        },


        tooltip: {


          trigger: 'none', // 当鼠标悬浮在某个数据项上时触发


@@ -656,13 +737,7 @@


          borderWidth: 0,


          borderColor: '#fff'


        },


        data: [


          { value: 100, name: '待访问', },


          { value: 50, name: '已登记' },


          { value: 20, name: '已离开' },


          { value: 30, name: '滞留' },




        ]


        data


      },


      {


        type: 'funnel',


@@ -677,12 +752,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 * 100).toFixed(1)}%}`


            // 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: {


@@ -708,13 +787,7 @@


            opacity: 1


          }


        },


        data: [


          { value: 100, name: '待访问', },


          { value: 50, name: '已登记' },


          { value: 20, name: '已离开' },


          { value: 30, name: '滞留' },




        ]


        data


      },


    ]


  }


@@ -723,14 +796,221 @@


    myChart.resize()


  })


}


const ininDate = () => {


  getEnergyCenterData()




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


      })


      console.log('dataList2', dataList2.value)




      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 = i.timeOutMinute + '分'


      }




      return i


    })


    initEchart3()


  })


}




const loading1 = ref(false)


const warningTab = ref('0')


const warningNum = ref(0)


const warningList = ref([])


const getWarning = () => {


  loading1.value = true


  afwarningEventData({ type: warningTab.value }).then(res => {


    loading1.value = false


    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);


  }, () => {


    loading1.value = false


  })


}


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 changeMon = () => {


  showJk.value = !showJk.value


  if (!showJk.value) {


    activeJkIndex.value = -1


    activeMenu.value = {}


  }


}


const menuClick = (val) => {


  if (val == activeJkIndex.value) {


    activeJkIndex.value = -1


  } else {


    activeJkIndex.value = val


  }


}


const menuItemClick = (val) => {


  activeMenu.value = val




}


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.filter(i => i.totalNum > 0), 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(() => {


  ininDate()


  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)




})






@@ -741,10 +1021,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;


@@ -755,6 +1038,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;


@@ -812,6 +1097,13 @@


        .item {


          display: flex;


          flex-direction: column;


          align-items: center;




          .icon {


            width: 52px;


            height: 52px;


            margin-bottom: 8px;


          }




          /* align-items: center; */


          .num {


@@ -941,6 +1233,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;




@@ -986,6 +1388,8 @@




    .right_box_one {


      margin-bottom: 20px;


      background: rgba(0, 86, 255, 0.05);


      backdrop-filter: blur(5px);




      .second_title {


        margin-top: 20px;


@@ -1068,9 +1472,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);


    }


  }


}




@@ -1189,43 +1599,54 @@


  }




  .safe_warning {


    width: 406px;


    margin-left: 20px;


    width: 786px;


    margin-right: 20px;


    position: relative;




    /* 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 {


@@ -1235,20 +1656,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 {


@@ -1262,26 +1674,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;


            }


          }


        }


@@ -1293,6 +1697,9 @@


    flex: 1;


    margin-right: 20px;


    position: relative;


    background: rgba(0, 86, 255, 0.05);


    backdrop-filter: blur(5px);




    .content {


      display: flex;




@@ -1302,7 +1709,8 @@


        display: flex;


        justify-content: center;


        align-items: center;


        padding: 16px 24px;


        padding-top: 16px;


        padding-left: 24px;




        .echart_wrap {


          position: relative;


@@ -1338,7 +1746,7 @@


        }




        .list {


          margin-left: 36px;


          margin-left: 32px;


          flex: 1;


          display: flex;


          flex-direction: column;


@@ -1371,14 +1779,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;


          }


        }


@@ -1394,6 +1813,7 @@




    .monitoring {


      position: absolute;


      cursor: pointer;


      top: -60px;


      right: 0;


      display: flex;


@@ -1406,9 +1826,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;


@@ -1420,8 +1844,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 {


@@ -1446,13 +1881,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;


@@ -1470,12 +1898,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;


    }


  }


}


@@ -1499,11 +1934,11 @@


    }




    .dept {


      flex: 5;


      flex: 8;


    }




    .time {


      flex: 4;


      flex: 5;


    }


  }