Merge remote-tracking branch 'origin/master'

jiangping

2024-11-14 03e3f933f10fb9228eef02c5699b749a501a50e7

 screen/src/views/SecurityControl.vue

@@ -28,25 +28,26 @@
              </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 v-if="data.inParkCarTotal && data.parkingLotTotal" class="num">{{ ((data.inParkCarTotal /
                    data.parkingLotTotal) * 100).toFixed(0) }}%</span>
                </div>
                <div class="val">
                  <Percent :rate="50" />
                  <Percent :rate="((data.inParkCarTotal / data.parkingLotTotal) * 100).toFixed(0)" />
                </div>
              </div>
            </div>
@@ -58,24 +59,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 +89,61 @@
            <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.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-if="showJk" class="jiankong">
            <img class="jk_bg" src="@/assets/images/SecurityControl/jiankong_bg@2x.png" alt="">
            <div class="content">
              <div class="video"></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" @input="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.name)" v-for="item in menu.childen">
                        <img v-if="activeMenu == item.name" 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 == item.name }">{{ item.name }}</span>
                      </div>
                    </div> -->
                  </div>

                </div>

              </div>
            </div>

          </div>
          <div v-else class="center_box_one">
            <div class="list">
              <div class="item">
                <div class="name_wrap">
@@ -125,7 +151,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 +161,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 }}</div>
                  <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
                </div>
              </div>
@@ -145,7 +171,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.deviceTotal }}</div>
                  <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
                </div>
              </div>
@@ -155,7 +181,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.errTotal }}</div>
                  <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
                </div>
              </div>
@@ -182,21 +208,24 @@
                <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" v-if="data.internalTotal && data.inParkTotal"><span>{{ data.internalTotal }}</span> |
                    {{ ((data.internalTotal / data.inParkTotal) * 100).toFixed(1) }}%</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" v-if="data.relatedTotal && data.inParkTotal"><span>{{ data.relatedTotal
                      }}</span> | {{ ((data.relatedTotal / data.inParkTotal) * 100).toFixed(1) }}%</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" v-if="data.visitTotal && data.inParkTotal"><span>{{ data.visitTotal }}</span>
                    | {{ ((data.visitTotal / data.inParkTotal) * 100).toFixed(1) }}%</div>
                </div>
              </div>
            </div>
@@ -210,15 +239,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 +255,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 +263,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,7 +279,7 @@
        </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="" />
@@ -277,7 +306,7 @@
            </div>
            <div class="separate"></div>
          </div>
        </div>
        </div> -->
        <div class="safe_warning">
          <div class="com_header">
            <div class="title">
@@ -293,42 +322,27 @@
            </div>
            <img src="@/assets/images/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="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 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>
                  <div class="have_time">已经发生<span>1</span>分钟</div>
                </div>
                <div class="wrap">
                  <div class="title">消防警告</div>
                  <div class="title">address</div>
                </div>
              </div>
            </div>
@@ -342,35 +356,31 @@
            </div>
            <img src="@/assets/images/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 +391,18 @@
                <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>
              <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>
              <template v-for="item, i in dataList2">
                <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>
              </template>

            </div>
          </div>
        </div>
@@ -414,18 +420,14 @@
              <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>
            <div class="separate"></div>
            <div class="line">
              <div>name</div>
              <div class="dept">综合管理科</div>
              <div class="dept">10:21</div>
            </div>
            <div class="separate"></div>
            <template 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>
            </template>
          </div>
        </div>
      </div>
@@ -438,9 +440,14 @@
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,afwarningEventData, getSecurityDeviceData, getVisitRetentionData, afgetVisitData, afregionTreea } from '@/api'


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

}, 1000)

const showJk = ref(true)
const activeJkIndex = ref(0)
const activeMenu = ref('')
const jkList = ref([
  {
    name: '月台区',
    childen: [
      { name: '月台1', id: 0 },
      { name: '月台2', id: 0 },
      { name: '月台3', id: 0 },
    ]
  },
  {
    name: '办公楼',
    childen: []
  },
  {
    name: '厂房',
    childen: []
  },
  {
    name: '大门',
    childen: []
  },
])
const menuClick = (val) => {
  if (val == activeJkIndex.value) {
    activeJkIndex.value = -1
  } else {
    activeJkIndex.value = val
  }
}
const menuItemClick = (val) => {
  activeMenu.value = val
}


const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
const initEnergy = () => {
@@ -513,8 +557,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 +586,7 @@
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' }
        ]
        data: temp
      }
    ]
  }
@@ -545,6 +595,8 @@
    myChart.resize()
  })
}

const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
const initEchart2 = () => {
  const myChart = echarts.init(document.getElementById('echart2'))
  const option = {
@@ -564,11 +616,7 @@
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' }
        ]
        data: dataListT2.value
      }
    ]
  }
@@ -609,6 +657,11 @@
      offset: 1,
      color: '#61d3f9'
    }])]
  const data = []
  data.push({ name: '待访问', value: data4.value.waitVisitNum, rate: data4.value.waitVisitRata })
  data.push({ name: '已登记', value: data4.value.registerVisitNum, rate: data4.value.registerVisitRata })
  data.push({ name: '已离开', value: data4.value.levelNum, rate: data4.value.levelRata })
  data.push({ name: '滞留', value: data4.value.retentionNum, rate: data4.value.retentionRata })
  const option = {
    color: colors,
    tooltip: {
@@ -632,7 +685,7 @@
        color: "#000"
      },
      itemHeight: 2,
      data: ['待访问', '已登记', '已离开', '滞留']
      data: data.map(i => i.name)
    },
    series: [
      {
@@ -654,13 +707,7 @@
          borderWidth: 0,
          borderColor: '#fff'
        },
        data: [
          { value: 100, name: '待访问', },
          { value: 50, name: '已登记' },
          { value: 20, name: '已离开' },
          { value: 30, name: '滞留' },

        ]
        data
      },
      {
        type: 'funnel',
@@ -706,13 +753,7 @@
            opacity: 1
          }
        },
        data: [
          { value: 100, name: '待访问', },
          { value: 50, name: '已登记' },
          { value: 20, name: '已离开' },
          { value: 30, name: '滞留' },

        ]
        data
      },
    ]
  }
@@ -722,10 +763,140 @@
  })
}

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

const dataList2 = ref([])
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
    dataList2.value = result.map(item => {
      online += item.onlineNum
      outline += item.offlineDeviceNum
      return item
    })
    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 getData3 = () => {
  getVisitRetentionData().then(res => {
    const result = res.data || []
    dataList3.value = result.map(i => {
      i.timeOutMinuteT = dayjs.duration(i.timeOutMinute * 60 * 1000).format('HH:mm')
      return i
    })
  })
}
const data4 = ref({})
const getData4 = () => {
  afgetVisitData().then(res => {
    const result = res.data || {}
    data4.value = result
    initEchart3()
  })
}

const warningList = ref([])
const getWarning = () => {
  afwarningEventData({type: 0}).then(res => {
    const result = res.data || []
    warningList.value = result.map(item => {
      item.haveTime = dayjs.duration(new Date().getTime() - new Date(item.createDate).getTime()).format('HH小时mm分钟')
      return item
    })
  })
}
const dataValue5 = ref('')
const data5 = ref([])
const getData5 = () => {
  afregionTreea({
    name: dataValue5.value,
    withCameras: 1
  }).then(res => {
    const result = res.data || []
    data5.value = result
  })
}

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,
    slidesPerGroup: 2,
    slidesPerColumn: 2,
    // autoplay: { delay: 500, disableOnInteraction: false },
    autoplay: autoplayFlag(dataList2.value, 2, 2000),
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
  })
}
loopFn1()
const loopFn2 = () => {
  var newSwiper1 = new Swiper('.two-swiper', {
    initialSlide: 0,
    // loop: true, // 循环模式选项
    direction: 'vertical', //竖直方向
    slidesPerView: 3,
    // autoplay: { delay: 500, disableOnInteraction: false },
    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(dataList2.value, 3, 4000),
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
  })
}



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

  // initEchart1()
})


@@ -735,11 +906,12 @@
div {
  box-sizing: border-box;
}

.swiper-wrapper {
    display: block !important;
  }
.main_content {
  display: flex;
  padding: 20px 25px 0;
  border: 1px solid;

  .left_box {
    width: 360px;
@@ -807,6 +979,13 @@
        .item {
          display: flex;
          flex-direction: column;
          align-items: center;

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

          /* align-items: center; */
          .num {
@@ -935,6 +1114,114 @@
  .center_box {
    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 {
          height: 100%;
          border: 1px solid;
        }
      }

      .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: 400px;
              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;
                  height: 34px;
                  margin-left: 10px;
                  cursor: pointer;
                  color: #D2E0FF;

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

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

    }

    .center_box_one {
      padding: 8px 60px;
@@ -1184,43 +1471,36 @@
  }

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

    /* one-swiper */
    .list {
      height: 124px;
      overflow: auto;
      margin-top: 15px;
      scrollbar-width: none;

      display: flex;
      flex-wrap: wrap;
      
      .item {
        display: flex;
        width: 366px;
        /* width: 50%; */
        height: 102px;
        font-size: 13px;
        color: #D2E0FF;

        .icon {
          width: 40px;
        .item_wrap {
          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;
        }

          .circle {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #01D9FE;
            box-shadow: 0px 0px 1px 4px #34788f;
            /* opacity: 0.52; */
          }

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

        .content {
@@ -1230,20 +1510,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 +1528,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 +1551,7 @@
    flex: 1;
    margin-right: 20px;
    position: relative;

    .content {
      display: flex;

@@ -1389,6 +1653,7 @@

    .monitoring {
      position: absolute;
      cursor: pointer;
      top: -60px;
      right: 0;
      display: flex;
@@ -1401,9 +1666,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;
@@ -1465,12 +1734,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;
    }
  }
}