| | |
| | | </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="content"> |
| | | <div class="sa_static"> |
| | | <div class="echart_wrap"> |
| | | <div class="pie_text"> |
| | | <div class="fs30"><strong>300</strong></div> |
| | | <div>总计</div> |
| | | </div> |
| | | <div class="echart" id="echart2"></div> |
| | | </div> |
| | | <div class="list"> |
| | | <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> |
| | | </div> |
| | | </div> |
| | | <div class="table"> |
| | | <div class="line header"> |
| | | <div class="driver">设备类型</div> |
| | | <div>总数</div> |
| | | <div>在线数</div> |
| | | <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> |
| | | </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> |
| | | <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> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </v-scale-screen> |
| | | </template> |
| | |
| | | myChart.resize() |
| | | }) |
| | | } |
| | | 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: [ |
| | | { value: 1048, name: 'Search Engine' }, |
| | | { value: 735, name: 'Direct' }, |
| | | { value: 580, name: 'Email' } |
| | | ] |
| | | } |
| | | ] |
| | | } |
| | | myChart.setOption(option) |
| | | window.addEventListener('resize', function () { // 执行 |
| | | myChart.resize() |
| | | }) |
| | | } |
| | | |
| | | onMounted(() => { |
| | | // initEnergy() |
| | | initEchart1() |
| | | initEchart2() |
| | | }) |
| | | |
| | | |
| | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | padding: 20px; |
| | | |
| | | .item { |
| | | font-size: 12px; |
| | | color: #D2E0FF; |
| | |
| | | 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; |
| | |
| | | } |
| | | } |
| | | |
| | | .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: 147px; |
| | | 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; |
| | | |
| | | .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; |
| | | border: 1px dashed rgba(1, 217, 254, 0.7); |
| | | 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; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | | .visitor_warning { |
| | | width: 360px; |
| | | .table{ |
| | | .line{ |
| | | div{ |
| | | .dept{ |
| | | flex: 5; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .com_header { |
| | | height: 40px; |
| | | display: flex; |
| | |
| | | } |
| | | } |
| | | |
| | | .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; |
| | |
| | | height: 960px; |
| | | /* width: 100%; |
| | | height: 100vh; */ |
| | | background: #0b2539; |
| | | color: #FFFFFF; |
| | | position: relative; |
| | | z-index: -2; |
| | | font-size: 14px; |
| | | |
| | | .main_bg { |