ll

liukangdong

2024-10-31 a030368330d5a6bf1d0ed42b6121b53d13b587d0

 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,20 +59,23 @@
            </div>
            <div class="private_car">
              <div class="item">
                <img src="" class="icon" alt="">
                <div class="num">20</div>
                <div class="name">员工车辆</div>
                <div class="num">{{ data.internalCarTotal }}</div>
              </div>
              <div class="item">
                <img src="" class="icon" alt="">
                <div class="num">20</div>
                <div class="name">相关方车辆</div>
                <div class="num num2">{{ data.relatedCarTotal }}</div>
              </div>
              <div class="item">
                <img src="" class="icon" alt="">
                <div class="num">20</div>

                <div class="name">来访车辆</div>
                <div class="num num3">{{ data.visitCarTotal }}</div>
              </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">
@@ -82,32 +86,19 @@
            <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>
@@ -122,7 +113,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>
@@ -132,7 +123,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>
@@ -142,7 +133,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>
@@ -152,7 +143,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>
@@ -179,21 +170,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>
@@ -236,12 +230,180 @@
                </div>
              </div>
            </div>
            <div class="echart3" id="echart3"></div>
          </div>
          <div class="right_box_two">

          </div>
          <div class="right_box_three">

          </div>
        </div>
      </div>
      <div class="main_footer">
        <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="" />
          </div>
          <div class="table">
            <div class="line header">
              <div>车牌</div>
              <div class="dept">拜访部门</div>
              <div class="time">超时时长</div>
            </div>
            <div class="line">
              <div>皖A33234</div>
              <div class="dept">综合管理科</div>
              <div class="time">10:21</div>
            </div>
            <div class="separate"></div>
            <div class="line">
              <div>皖A33234</div>
              <div class="dept">综合管理科</div>
              <div class="time">10:21</div>
            </div>
            <div class="separate"></div>
          </div>
        </div>
        <div class="safe_warning">
          <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="separate"></div>
              <div class="tab">区域告警</div>
              <div class="separate"></div>
              <div class="tab">行为告警</div>
            </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>
                  <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>
          </div>
        </div>
        <div class="garden_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="" />
          </div>
          <div class="monitoring">
            <img src="@/assets/images/SecurityControl/jiankong.png" class="icon" alt="">
            <div>监控列表</div>
            <img 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 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" v-for="item, i in dataListT2">
                  <div class="line">
                    <div :style="{ background: colors[i] }" class="icon"></div>
                    <div class="text">{{ item.name }}</div>
                  </div>
                  <div :style="{ color: colors[i] }" class="num">{{ item.value }} | {{ item.rate }}%</div>
                </div>

              </div>
            </div>
            <div class="table">
              <div class="line header">
                <div class="driver">设备类型</div>
                <div>总数</div>
                <div>在线数</div>
                <div>离线数</div>
                <div>在线率</div>
              </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 v-if="item.onlineNum && item.totalNum">{{ ((item.onlineNum / item.totalNum) * 100).toFixed(0) }}%
                  </div>
                </div>
                <div class="separate"></div>
              </template>

            </div>
          </div>
        </div>
        <div class="visitor_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="" />
          </div>
          <div class="table">
            <div class="line header">
              <div>姓名</div>
              <div class="dept">拜访部门</div>
              <div class="dept">超时时长</div>
            </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>
@@ -254,9 +416,12 @@
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 { getEnergyCenterData, getSecurityDeviceData, getVisitRetentionData } from '@/api'


const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
const date = ref(dayjs().format('YYYY.MM.DD'))
const week = ref(weekMap[new Date().getDay()])
@@ -329,8 +494,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: [
      {
@@ -348,11 +523,7 @@
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' }
        ]
        data: temp
      }
    ]
  }
@@ -362,9 +533,232 @@
  })
}

const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
const initEchart2 = () => {
  const myChart = echarts.init(document.getElementById('echart2'))
  const option = {
    series: [
      {
        type: 'pie',
        radius: ['86%', '100%'],
        label: {
          show: false,
          position: 'center'
        },
        padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        color: colors,
        labelLine: {
          show: false
        },
        data: dataListT2.value
      }
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // 执行
    myChart.resize()
  })
}
const initEchart3 = () => {
  const myChart = echarts.init(document.getElementById('echart3'))
  var colors = [
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: '#7fe3fc'
    },
    {
      offset: 1,
      color: '#9ce9fc'
    }]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
      offset: 0,
      color: '#64d7fa'
    }, {
      offset: 1,
      color: '#7de3fc'
    }]),
    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 option = {
    color: colors,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "red"
        },
        lineStyle: {
          color: "#9eb2cb"
        }
      }
    },

    legend: {
      show: false,
      top: "top",
      left: "2%",
      textStyle: {
        color: "#000"
      },
      itemHeight: 2,
      data: ['待访问', '已登记', '已离开', '滞留']
    },
    series: [
      {
        type: 'funnel',
        left: '15%',
        right: '45%',
        top: '10%',
        bottom: '10%',
        minSize: '20%',
        maxSize: '80%',
        gap: 4,
        label: {
          show: false,
        },
        tooltip: {
          trigger: 'none', // 当鼠标悬浮在某个数据项上时触发
        },
        itemStyle: {  //去掉默认白色边框线
          borderWidth: 0,
          borderColor: '#fff'
        },
        data: [
          { value: 100, name: '待访问', },
          { value: 50, name: '已登记' },
          { value: 20, name: '已离开' },
          { value: 30, name: '滞留' },

        ]
      },
      {
        type: 'funnel',
        left: '15%',
        right: '45%',
        top: '10%',
        bottom: '10%',
        minSize: '80%',
        maxSize: '80%',
        gap: 4,
        z: 1,
        label: {
          show: true,
          position: 'outside',
          formatter: '{a|{b}}  {a|{c}%}',
          rich: {
            a: {
              color: '#869CC9',
              fontSize: 13
            },
          }
        },
        labelLine: {
          show: true,
          normal: {
            length: 80,
            position: 'right',
            lineStyle: {
              width: 1,
              type: 'dashed',
              color: 'rgba(102, 160, 239,.5)'
            }
          },
        },
        itemStyle: {  //去掉默认白色边框线
          borderWidth: 0,
          borderColor: '#fff'
        },
        itemStyle: {
          normal: {
            color: 'transparent',
            borderWidth: 0,
            opacity: 1
          }
        },
        data: [
          { value: 100, name: '待访问', },
          { value: 50, name: '已登记' },
          { value: 20, name: '已离开' },
          { value: 30, name: '滞留' },

        ]
      },
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // 执行
    myChart.resize()
  })
}

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 => {
    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
    })
  })
}

onMounted(() => {
  // initEnergy()
  initEchart1()
  getData1()
  getData2()
  getData3()
  initEchart3()
  // initEchart1()
})


@@ -378,6 +772,7 @@
.main_content {
  display: flex;
  padding: 20px 25px 0;
  border: 1px solid;

  .left_box {
    width: 360px;
@@ -396,7 +791,7 @@

      .stall_static {
        display: flex;
        margin-bottom: 40px;
        margin-bottom: 60px;
        padding: 0 20px;

        .residue {
@@ -437,31 +832,60 @@
      }

      .private_car {
        padding: 4px 32px;
        padding: 4px 20px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 36px;
        margin-bottom: 10px;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;

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

          /* align-items: center; */
          .num {
            line-height: 28px;
            height: 28px;
            margin-bottom: 2px;
            margin-top: 4px;
            font-weight: bold;
            font-size: 18px;
            color: #01D9FE;
          }

          .num2 {
            color: #FEAF01;
          }

          .num3 {
            color: #09FACD;
          }

        }
      }

      .section {
        margin: 0 auto;
        display: flex;
        align-items: center;
        width: 320px;
        height: 20px;
        background: rgba(255, 255, 255, 0.1);
        padding: 0 4px;
        margin-bottom: 60px;

        .item {
          height: 10px;
          margin-right: 1px;
          background-color: #63d6fa;
          flex: 1;

          &:nth-of-type(2) {
            background-color: #f2b23e;
          }

          &:nth-last-child(1) {
            margin-right: 0;
            background-color: #73f6cf;
          }
        }
      }

@@ -639,7 +1063,8 @@
      .visitor_list {
        display: flex;
        justify-content: space-between;
        padding: 20px;
        padding: 20px 20px 16px;

        .item {
          font-size: 12px;
          color: #D2E0FF;
@@ -648,19 +1073,26 @@
            display: flex;
            align-items: flex-end;
            margin-top: 8px;
            .num{

            .num {
              font-size: 22px;
              line-height: 22px;
              color: #FFFFFF;
            }
          }
        }
        .spacing{

        .spacing {
          width: 1px;
          height: 40px;
          background-color: #405173;
          margin: 0 24px;
        }
      }

      .echart3 {
        width: 100%;
        height: 140px;
      }
    }

@@ -704,15 +1136,14 @@
    align-items: center;

    .time {
      width: 180px;
      width: 130px;
      display: flex;
      justify-content: flex-end;
      padding-bottom: 10px;
      font-size: 36px;
      font-size: 30px;
    }

    .week {
      margin-left: 36px;
      margin-left: 20px;
    }
  }

@@ -724,6 +1155,312 @@
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
}

.main_footer {
  /* margin-top: 20px; */
  display: flex;
  padding: 20px 25px 0;

  .car_warning {
    width: 360px;

    .table {
      margin-top: 15px;

      .line {
        display: flex;
        align-items: center;
        font-size: 14px;
        height: 32px;

        div {
          flex: 3;
          height: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .dept {
          flex: 5;
        }

        .time {
          flex: 4;
        }
      }

      .header {
        background: rgba(134, 156, 201, 0.1);
        font-weight: 500;

        div {
          border-right: 1px solid rgba(255, 255, 255, 0.2);

          &:nth-last-child(1) {
            border: none;
          }
        }
      }

      .separate {
        width: 100%;
        height: 2px;
        background-color: rgba(255, 255, 255, 0.2);
        /* background-color: red; */
        border-right: 4px solid #00F2F3;
        border-left: 4px solid #00F2F3;
      }
    }
  }

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

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

      .item {
        display: flex;
        font-size: 13px;
        color: #D2E0FF;

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

        .content {
          flex: 1;

          .header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .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;
              }
            }

            .have_time {
              font-size: 12px;
              color: #D2E0FF;

              span {
                color: #FEAF01;
              }
            }
          }

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

            .title {
              flex: 4;
              font-weight: bold;
              font-size: 15px;
              color: #FFFFFF;
            }

            .address {
              flex: 6;
            }
          }
        }
      }
    }
  }

  .garden_warning {
    flex: 1;
    margin-right: 20px;
    position: relative;

    .content {
      display: flex;

      .sa_static {
        width: 285px;
        margin-top: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 16px 24px;

        .echart_wrap {
          position: relative;

          .pie_text {
            width: 82px;
            height: 82px;
            box-shadow: inset 0px 0px 8px 0px #01D9FE;
            border-radius: 50%;
            position: absolute;

            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 12px;

            .fs30 {
              font-weight: bold;
              font-size: 18px;
              margin-bottom: 4px;
            }
          }
        }

        .echart {
          width: 110px;
          height: 110px;
        }

        .list {
          margin-left: 36px;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 110px;

          .item {
            width: 100%;
            font-size: 14px;

            .line {
              display: flex;
              align-items: center;
              margin-bottom: 6px;

              .icon {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                margin-right: 10px;
                background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%);
              }
            }

            .num {
              margin-left: 20px;
            }
          }
        }
      }

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

          .driver {
            flex: 4;
            justify-content: center;
          }
        }

        .header {
          div {
            justify-content: center;
            padding-right: 0;
          }
        }
      }
    }

    .monitoring {
      position: absolute;
      top: -60px;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      font-size: 15px;
      width: 134px;
      height: 40px;
      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;
      }

      .top {
        width: 12px;
        height: 12px;
        margin-left: 8px;
      }
    }

  }

  .visitor_warning {
    width: 360px;

    .table {
      .line {
        div {
          .dept {
            flex: 5;
          }
        }
      }
    }
  }
}

@@ -774,6 +1511,56 @@
  }
}

.table {
  margin-top: 15px;
  flex: 1;

  .line {
    display: flex;
    align-items: center;
    font-size: 14px;
    height: 32px;

    div {
      flex: 3;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .dept {
      flex: 5;
    }

    .time {
      flex: 4;
    }
  }

  .header {
    background: rgba(134, 156, 201, 0.1);
    font-weight: 500;

    div {
      border-right: 1px solid rgba(255, 255, 255, 0.2);

      &:nth-last-child(1) {
        border: none;
      }
    }
  }

  .separate {
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.2);
    /* background-color: red; */
    border-right: 4px solid #00F2F3;
    border-left: 4px solid #00F2F3;
  }
}

.second_title {
  height: 24px;
  display: flex;
@@ -816,10 +1603,8 @@
  height: 960px;
  /* width: 100%;
  height: 100vh; */
  background: #0b2539;
  color: #FFFFFF;
  position: relative;
  z-index: -2;
  font-size: 14px;

  .main_bg {