From 9bfd32ac0781b51d2b8479b91a9754f18060fcb9 Mon Sep 17 00:00:00 2001 From: liukangdong <898885815@qq.com> Date: 星期四, 14 十一月 2024 17:48:50 +0800 Subject: [PATCH] ll --- screen/src/views/SecurityControl.vue | 375 +++++++++++++++++++++++++++++++++-------------------- 1 files changed, 231 insertions(+), 144 deletions(-) diff --git a/screen/src/views/SecurityControl.vue b/screen/src/views/SecurityControl.vue index 4953e4a..282403c 100644 --- a/screen/src/views/SecurityControl.vue +++ b/screen/src/views/SecurityControl.vue @@ -43,11 +43,10 @@ <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> @@ -89,7 +88,7 @@ <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> @@ -111,30 +110,30 @@ <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> @@ -161,7 +160,7 @@ <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> @@ -171,7 +170,7 @@ <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> @@ -181,7 +180,7 @@ <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> @@ -208,24 +207,25 @@ <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> @@ -314,11 +314,11 @@ <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> @@ -329,17 +329,17 @@ <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 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> + <span>{{ item.addr }}</span> </div> <div class="line time"> <img class="icon" src="@/assets/images/SecurityControl/clock.png" alt=""> - <span>{{item.createDate}}</span> + <span>{{ item.createDate }}</span> </div> </div> </div> @@ -391,18 +391,23 @@ <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>{{ item.totalNum ? ((item.onlineNum / item.totalNum) * 100).toFixed(0) : 0 }}% - </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>{{ item.onlineNum }}</div> + <div>{{ item.offlineDeviceNum }}</div> + <div>{{ item.totalNum ? ((item.onlineNum / item.totalNum) * 100).toFixed(0) : 0 }}% + </div> + </div> + <div class="separate"></div> + </div> + </template> </div> - <div class="separate"></div> - </template> - + </div> </div> </div> </div> @@ -420,14 +425,19 @@ <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 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> + </div> </div> - <div class="separate"></div> - </template> + </div> + </div> </div> </div> @@ -445,7 +455,16 @@ 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 = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�',] @@ -459,41 +478,6 @@ }, 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'] @@ -608,7 +592,7 @@ show: false, position: 'center' }, - padAngle: 5, + padAngle: 3, itemStyle: { borderRadius: 10 }, @@ -658,10 +642,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: { @@ -722,7 +706,7 @@ label: { show: true, position: 'outside', - formatter: '{a|{b}} {a|{c}%}', + formatter: '{a|{b}} {a|{d}%}', rich: { a: { color: '#869CC9', @@ -766,70 +750,130 @@ const data = ref({}) const getData1 = () => { getEnergyCenterData().then(res => { - const result = res.data - data.value = result - initEchart1() + if (res.code == 200) { + const result = res.data + data.value = result + initEchart1() + } }) } const dataList2 = ref([]) +const data2 = ref(0) const dataListT2 = ref([]) const getData2 = () => { getSecurityDeviceData().then(res => { - if(res.code == 200 && res.data && res.data.length > 0){ + 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) }) - } + 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) }) + } 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 + dataListT2.value = temp } - initEchart2() + loopFn2() }) } const dataList3 = ref([]) +const data4 = ref({}) const getData3 = () => { - getVisitRetentionData().then(res => { - const result = res.data || [] + 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 => { - i.timeOutMinuteT = dayjs.duration(i.timeOutMinute * 60 * 1000).format('HH:mm') + if (i.timeOutMinute) { + i.timeOutMinute = Math.abs(i.timeOutMinute) + } + if (i.timeOutMinute > 60 * 24) { + i.timeOutMinuteT = dayjs.duration(i.timeOutMinute * 60 * 1000).format('D澶〩鏃秏鍒�') + } else if (i.timeOutMinute > 60) { + i.timeOutMinuteT = dayjs.duration(i.timeOutMinute * 60 * 1000).format('H鏃秏鍒�') + } else { + i.timeOutMinuteT = item.timeOutMinuteT + '鍒�' + } + return i }) - }) -} -const data4 = ref({}) -const getData4 = () => { - afgetVisitData().then(res => { - const result = res.data || {} - data4.value = result 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澶〩鏃秏鍒�') + // } else if (i.timeOutMinute > 60) { + // i.timeOutMinuteT = dayjs.duration(i.timeOutMinute * 60 * 1000).format('H鏃秏鍒�') + // } 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 = () => { @@ -838,7 +882,20 @@ 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 }) } @@ -851,26 +908,23 @@ } 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鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper }) } -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鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper }) } @@ -881,7 +935,7 @@ direction: 'vertical', //绔栫洿鏂瑰悜 slidesPerView: 3, // autoplay: { delay: 500, disableOnInteraction: false }, - autoplay: autoplayFlag(dataList2.value, 3, 4000), + autoplay: autoplayFlag(dataList3.value, 3, 4000), observer: true, //淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper }) } @@ -892,7 +946,7 @@ getData1() getData2() getData3() - getData4() + // getData4() getData5() getWarning() @@ -906,9 +960,11 @@ div { box-sizing: border-box; } + .swiper-wrapper { - display: block !important; - } + display: block !important; +} + .main_content { display: flex; padding: 20px 25px 0; @@ -1134,8 +1190,8 @@ padding: 16px 0px 32px 20px; .video { + width: 100%; height: 100%; - border: 1px solid; } } @@ -1174,8 +1230,9 @@ .menu_wrap { margin-top: 15px; - max-height: 400px; - overflow: auto; + max-height: 440px; + overflow: auto; + .menu { .menu_name { display: flex; @@ -1199,16 +1256,17 @@ .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 { @@ -1473,6 +1531,7 @@ .safe_warning { width: 786px; margin-right: 20px; + /* one-swiper */ .list { height: 124px; @@ -1481,13 +1540,21 @@ 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; @@ -1630,14 +1697,25 @@ } .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; } } @@ -1686,6 +1764,15 @@ width: 360px; .table { + .list { + height: 102px !important; + overflow: auto; + + .item { + height: 34px !important; + } + } + .line { div { .dept { -- Gitblit v1.9.3