| | |
| | | <div class="rate"> |
| | | <div class="la"> |
| | | <span>车位使用率</span> |
| | | <span v-if="data.inParkCarTotal && data.parkingLotTotal" class="num">{{ ((data.inParkCarTotal / |
| | | data.parkingLotTotal) * 100).toFixed(0) }}%</span> |
| | | <span v-if="data.inParkCarTotal && data.parkingLotTotal" class="num">{{ data.parkingUseRate }}%</span> |
| | | </div> |
| | | <div class="val"> |
| | | <Percent :rate="((data.inParkCarTotal / data.parkingLotTotal) * 100).toFixed(0)" /> |
| | | <Percent :rate="data.parkingUseRate" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="car_static"> |
| | | <div class="echart_wrap"> |
| | | <div class="pie_text"> |
| | | <div class="fs30"><strong v-if="data.visitJobCarTotal">{{ data.internalJobCarTotal + |
| | | <div class="fs30"><strong v-if="data.visitJobCarTotal || data.visitJobCarTotal == 0">{{ data.internalJobCarTotal + |
| | | data.relatedJobCarTotal + data.visitJobCarTotal }}</strong></div> |
| | | <div>货车</div> |
| | | </div> |
| | |
| | | <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> |
| | | <video :src="activeVideo" class="video"></video> |
| | | </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="搜索监控名称"> |
| | | <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" |
| | | <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=""> --> |
| | | <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" |
| | | <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 == item.name }">{{ item.name }}</span> |
| | | <span :class="{ active: activeMenu.indexCode == item.indexCode }">{{ item.name }}</span> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | |
| | | <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt=""> |
| | | </div> |
| | | <div class="num_wrap"> |
| | | <div class="num">{{ data.inParkCarTotal }}</div> |
| | | <div class="num">{{ data.internalCarTotal }}</div> |
| | | <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt=""> |
| | | </div> |
| | | </div> |
| | |
| | | <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt=""> |
| | | </div> |
| | | <div class="num_wrap"> |
| | | <div class="num">{{ data.deviceTotal }}</div> |
| | | <div class="num">{{ data2 }}</div> |
| | | <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt=""> |
| | | </div> |
| | | </div> |
| | |
| | | <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt=""> |
| | | </div> |
| | | <div class="num_wrap"> |
| | | <div class="num">{{ data.errTotal }}</div> |
| | | <div class="num">{{ warningNum }}</div> |
| | | <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt=""> |
| | | </div> |
| | | </div> |
| | |
| | | <img src="@/assets/images/SecurityControl/staff_ic_neibu@2x.png" alt=""> |
| | | <div class="content"> |
| | | <div class="name">内部员工</div> |
| | | <div class="num" v-if="data.internalTotal && data.inParkTotal"><span>{{ data.internalTotal }}</span> | |
| | | {{ ((data.internalTotal / data.inParkTotal) * 100).toFixed(1) }}%</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" v-if="data.relatedTotal && data.inParkTotal"><span>{{ data.relatedTotal |
| | | }}</span> | {{ ((data.relatedTotal / data.inParkTotal) * 100).toFixed(1) }}%</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" v-if="data.visitTotal && data.inParkTotal"><span>{{ data.visitTotal }}</span> |
| | | | {{ ((data.visitTotal / data.inParkTotal) * 100).toFixed(1) }}%</div> |
| | | <div class="num finish"><span>{{ data.visitTotal || 0 }}</span> |
| | | | {{ data.inParkTotal ? ((data.visitTotal / data.inParkTotal) * 100).toFixed(1) : 0 }}%</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <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="" /> |
| | | </div> |
| | |
| | | <div>离线数</div> |
| | | <div>在线率</div> |
| | | </div> |
| | | <div class="list two-swiper"> |
| | | <div class="swiper-wrapper"> |
| | | <template v-for="item, i in dataList2"> |
| | | <div class="item two-swiper-slide swiper-slide"> |
| | | <div class="line"> |
| | | <div class="driver">{{ item.deviceType }}</div> |
| | | <div>{{ item.totalNum }}</div> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="separate"></div> |
| | | </div> |
| | | </template> |
| | | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="dept">拜访部门</div> |
| | | <div class="dept">超时时长</div> |
| | | </div> |
| | | <template v-for="item in dataList3"> |
| | | <div class="three-swiper list"> |
| | | <div class="swiper-wrapper"> |
| | | <div class="item swiper-slide three-swiper-slide" v-for="item in dataList3"> |
| | | <div class="line"> |
| | | <div>{{ item.name }}</div> |
| | | <div class="dept">{{ item.companyName }}</div> |
| | | <div class="dept">{{ item.timeOutMinuteT }}</div> |
| | | </div> |
| | | <div class="separate"></div> |
| | | </template> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | import * as echarts from 'echarts' |
| | | import 'swiper/css/swiper.min.css' |
| | | import Swiper from 'swiper' |
| | | import { getEnergyCenterData,afwarningEventData, getSecurityDeviceData, getVisitRetentionData, afgetVisitData, afregionTreea } from '@/api' |
| | | import { |
| | | getEnergyCenterData, |
| | | afgetCarmeraPreviemUrl, |
| | | afwarningEventData, |
| | | getSecurityDeviceData, |
| | | getVisitRetentionData, |
| | | afgetVisitData, |
| | | afregionTreea, |
| | | visitSecurityData |
| | | } from '@/api' |
| | | |
| | | |
| | | const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',] |
| | |
| | | |
| | | }, 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'] |
| | |
| | | show: false, |
| | | position: 'center' |
| | | }, |
| | | padAngle: 5, |
| | | padAngle: 3, |
| | | itemStyle: { |
| | | borderRadius: 10 |
| | | }, |
| | |
| | | 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 }) |
| | | data.push({ name: '待访问', value: data4.value.waitVisitNum, rate: data4.value.waitVisitNum / data4.value.total }) |
| | | data.push({ name: '已登记', value: data4.value.registerVisitNum, rate: data4.value.registerVisitNum / data4.value.total }) |
| | | data.push({ name: '已离开', value: data4.value.levelNum, rate: data4.value.levelNum / data4.value.total }) |
| | | data.push({ name: '滞留', value: data4.value.retentionNum, rate: data4.value.retentionNum / data4.value.total }) |
| | | const option = { |
| | | color: colors, |
| | | tooltip: { |
| | |
| | | label: { |
| | | show: true, |
| | | position: 'outside', |
| | | formatter: '{a|{b}} {a|{c}%}', |
| | | formatter: '{a|{b}} {a|{d}%}', |
| | | rich: { |
| | | a: { |
| | | color: '#869CC9', |
| | |
| | | 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 => { |
| | |
| | | let temp = [] |
| | | let online = 0 |
| | | let outline = 0 |
| | | let total = 0 |
| | | dataList2.value = result.map(item => { |
| | | total += item.totalNum |
| | | online += item.onlineNum |
| | | outline += item.offlineDeviceNum |
| | | if (item.deviceType && item.deviceType.length > 6) { |
| | | item.deviceType = item.deviceType.slice(0, 6) + '...' |
| | | } |
| | | return item |
| | | }) |
| | | data2.value = total |
| | | if (online >= outline) { |
| | | temp.push({ name: '在线', value: online, rate: ((online / (online + outline)) * 100).toFixed(1) }) |
| | | temp.push({ name: '离线', value: outline, rate: ((outline / (online + outline)) * 100).toFixed(1) }) |
| | |
| | | |
| | | dataListT2.value = temp |
| | | } |
| | | |
| | | initEchart2() |
| | | loopFn2() |
| | | }) |
| | | } |
| | | |
| | | 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 getData3 = () => { |
| | | visitSecurityData().then(res => { |
| | | if( !res.code == 200) return |
| | | data4.value = res.data || {} |
| | | let obj = data4.value |
| | | data4.value.total = obj.levelNum + obj.retentionNum + obj.registerVisitNum + obj.waitVisitNum |
| | | const result = res.data.visitRetentionDataList || [] |
| | | dataList3.value = result.map(i => { |
| | | if (i.timeOutMinute) { |
| | | i.timeOutMinute = Math.abs(i.timeOutMinute) |
| | | } |
| | | if (i.timeOutMinute > 60 * 24) { |
| | | i.timeOutMinuteT = dayjs.duration(i.timeOutMinute * 60 * 1000).format('D天H时m分') |
| | | } else if (i.timeOutMinute > 60) { |
| | | i.timeOutMinuteT = dayjs.duration(i.timeOutMinute * 60 * 1000).format('H时m分') |
| | | } else { |
| | | i.timeOutMinuteT = item.timeOutMinuteT + '分' |
| | | } |
| | | |
| | | return i |
| | | }) |
| | | initEchart3() |
| | | loopFn3() |
| | | }) |
| | | |
| | | // getVisitRetentionData().then(res => { |
| | | // const result = res.data || [] |
| | | // dataList3.value = result.map(i => { |
| | | // if (i.timeOutMinute) { |
| | | // i.timeOutMinute = Math.abs(i.timeOutMinute) |
| | | // } |
| | | // if (i.timeOutMinute > 60 * 24) { |
| | | // i.timeOutMinuteT = dayjs.duration(i.timeOutMinute * 60 * 1000).format('D天H时m分') |
| | | // } else if (i.timeOutMinute > 60) { |
| | | // i.timeOutMinuteT = dayjs.duration(i.timeOutMinute * 60 * 1000).format('H时m分') |
| | | // } else { |
| | | // i.timeOutMinuteT = item.timeOutMinuteT + '分' |
| | | // } |
| | | |
| | | // return i |
| | | // }) |
| | | // loopFn3() |
| | | // }) |
| | | } |
| | | // const data4 = ref({}) |
| | | // const getData4 = () => { |
| | | // afgetVisitData().then(res => { |
| | | // const result = res.data || {} |
| | | // data4.value = result |
| | | // initEchart3() |
| | | // }) |
| | | // } |
| | | |
| | | const warningTab = ref('0') |
| | | const warningNum = ref(0) |
| | | const warningList = ref([]) |
| | | const getWarning = () => { |
| | | afwarningEventData({type: 0}).then(res => { |
| | | const result = res.data || [] |
| | | afwarningEventData({ type: warningTab.value }).then(res => { |
| | | if (!res.data) return |
| | | const result = res.data.list || [] |
| | | warningNum.value = res.data.total |
| | | warningList.value = result.map(item => { |
| | | item.haveTime = dayjs.duration(new Date().getTime() - new Date(item.createDate).getTime()).format('HH小时mm分钟') |
| | | return item |
| | | }) |
| | | // loopFn1() |
| | | }) |
| | | } |
| | | 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 = () => { |
| | |
| | | withCameras: 1 |
| | | }).then(res => { |
| | | const result = res.data || [] |
| | | data5.value = result |
| | | data5.value = result.filter(item => item.carmeraList && item.carmeraList.length > 0) |
| | | }) |
| | | } |
| | | const menuClick = (val) => { |
| | | if (val == activeJkIndex.value) { |
| | | activeJkIndex.value = -1 |
| | | } else { |
| | | activeJkIndex.value = val |
| | | } |
| | | } |
| | | const menuItemClick = (val) => { |
| | | activeMenu.value = val |
| | | afgetCarmeraPreviemUrl({ indexCode: val.indexCode }).then(res => { |
| | | activeVideo.value = res.data |
| | | }) |
| | | } |
| | | |
| | |
| | | } |
| | | const loopFn1 = () => { |
| | | var newSwiper1 = new Swiper('.one-swiper', { |
| | | // initialSlide: 0, |
| | | initialSlide: 0, |
| | | loop: true, // 循环模式选项 |
| | | // direction: 'vertical', //竖直方向 |
| | | slidesPerView: 2, |
| | | direction: 'vertical', //竖直方向 |
| | | slidesPerView: 1, |
| | | slidesPerGroup: 2, |
| | | slidesPerColumn: 2, |
| | | // autoplay: { delay: 500, disableOnInteraction: false }, |
| | | autoplay: autoplayFlag(dataList2.value, 2, 2000), |
| | | autoplay: warningList.value.length > 2 ? { delay: 500, disableOnInteraction: false } : false, |
| | | 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), |
| | | autoplay: autoplayFlag(dataList2.value, 3, 2000), |
| | | observer: true, //修改swiper自己或子元素时,自动初始化swiper |
| | | }) |
| | | } |
| | |
| | | direction: 'vertical', //竖直方向 |
| | | slidesPerView: 3, |
| | | // autoplay: { delay: 500, disableOnInteraction: false }, |
| | | autoplay: autoplayFlag(dataList2.value, 3, 4000), |
| | | autoplay: autoplayFlag(dataList3.value, 3, 4000), |
| | | observer: true, //修改swiper自己或子元素时,自动初始化swiper |
| | | }) |
| | | } |
| | |
| | | getData1() |
| | | getData2() |
| | | getData3() |
| | | getData4() |
| | | // getData4() |
| | | getData5() |
| | | getWarning() |
| | | |
| | |
| | | div { |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .swiper-wrapper { |
| | | display: block !important; |
| | | } |
| | | |
| | | .main_content { |
| | | display: flex; |
| | | padding: 20px 25px 0; |
| | |
| | | padding: 16px 0px 32px 20px; |
| | | |
| | | .video { |
| | | width: 100%; |
| | | height: 100%; |
| | | border: 1px solid; |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | .menu_wrap { |
| | | margin-top: 15px; |
| | | max-height: 400px; |
| | | max-height: 440px; |
| | | overflow: auto; |
| | | |
| | | .menu { |
| | | .menu_name { |
| | | display: flex; |
| | |
| | | .list { |
| | | .item { |
| | | display: flex; |
| | | align-items: center; |
| | | height: 34px; |
| | | /* 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 { |
| | |
| | | .safe_warning { |
| | | width: 786px; |
| | | margin-right: 20px; |
| | | |
| | | /* one-swiper */ |
| | | .list { |
| | | height: 124px; |
| | |
| | | scrollbar-width: none; |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | margin-left: 20px; |
| | | |
| | | .item { |
| | | width: 366px; |
| | | /* width: 50%; */ |
| | | height: 102px; |
| | | float: left; |
| | | height: 102px !important; |
| | | font-size: 13px; |
| | | color: #D2E0FF; |
| | | margin-right: 10px; |
| | | |
| | | &:nth-of-type(2n) { |
| | | margin-right: 0; |
| | | } |
| | | |
| | | .item_wrap { |
| | | height: 90px; |
| | | padding: 10px; |
| | |
| | | } |
| | | |
| | | .table { |
| | | .list { |
| | | height: 102px !important; |
| | | overflow: auto; |
| | | |
| | | .item { |
| | | height: 34px !important; |
| | | } |
| | | } |
| | | |
| | | .line { |
| | | height: 32px !important; |
| | | |
| | | div { |
| | | justify-content: flex-end; |
| | | padding-right: 10px; |
| | | } |
| | | |
| | | .driver { |
| | | flex: 4; |
| | | flex: 5; |
| | | justify-content: center; |
| | | } |
| | | } |
| | |
| | | width: 360px; |
| | | |
| | | .table { |
| | | .list { |
| | | height: 102px !important; |
| | | overflow: auto; |
| | | |
| | | .item { |
| | | height: 34px !important; |
| | | } |
| | | } |
| | | |
| | | .line { |
| | | div { |
| | | .dept { |