From a8c03746e6bd8ac1d46dc48c1b10bceff543664f Mon Sep 17 00:00:00 2001 From: liukangdong <898885815@qq.com> Date: 星期二, 10 十二月 2024 20:16:12 +0800 Subject: [PATCH] ll --- screen/src/views/SecurityControl.vue | 264 +++++++++++++++++++++++++++++++--------------------- 1 files changed, 157 insertions(+), 107 deletions(-) diff --git a/screen/src/views/SecurityControl.vue b/screen/src/views/SecurityControl.vue index 282403c..1ace36c 100644 --- a/screen/src/views/SecurityControl.vue +++ b/screen/src/views/SecurityControl.vue @@ -3,7 +3,7 @@ <div class="main_app"> <img src="@/assets/images/SecurityControl/bg@2x.png" class="main_bg" alt="" /> <div class="main_header"> - <img src="@/assets/images/maintitle@2x.png" class="main_header_bg" alt="" /> + <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" /> <div class="title">瀹夋嘲鏅烘収鐗╂祦鍥尯-瀹夐槻鏅鸿兘鐩戞祴</div> <div class="time_wrap"> <span class="date">{{ date }}</span> @@ -19,7 +19,7 @@ <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" /> <div>瀹炴椂鍥尯杞﹁締</div> </div> - <img src="@/assets/images/title@2x.png" class="bg" alt="" /> + <img src="@/assets/images/task/title@2x.png" class="bg" alt="" /> </div> <div class="second_title"> <div class="title"> @@ -43,7 +43,7 @@ <div class="rate"> <div class="la"> <span>杞︿綅浣跨敤鐜�</span> - <span v-if="data.inParkCarTotal && data.parkingLotTotal" class="num">{{ data.parkingUseRate }}%</span> + <span class="num">{{ data.parkingUseRate }}%</span> </div> <div class="val"> <Percent :rate="data.parkingUseRate" /> @@ -88,7 +88,8 @@ <div class="car_static"> <div class="echart_wrap"> <div class="pie_text"> - <div class="fs30"><strong v-if="data.visitJobCarTotal || data.visitJobCarTotal == 0">{{ data.internalJobCarTotal + + <div class="fs30"><strong v-if="data.visitJobCarTotal || data.visitJobCarTotal == 0">{{ + data.internalJobCarTotal + data.relatedJobCarTotal + data.visitJobCarTotal }}</strong></div> <div>璐ц溅</div> </div> @@ -116,7 +117,8 @@ <div class="menus"> <div class="search_wrap"> <img class="search" src="@/assets/images/SecurityControl/ic_search@2x.png" alt=""> - <input v-model="dataValue5" @blur="getData5" @keyup.enter="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"> @@ -194,7 +196,7 @@ <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" /> <div>鍦ㄥ洯浜哄憳鍒嗘瀽</div> </div> - <img src="@/assets/images/title@2x.png" class="bg" alt="" /> + <img src="@/assets/images/task/title@2x.png" class="bg" alt="" /> </div> <div class="second_title"> <div class="title"> @@ -285,7 +287,7 @@ <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" /> <div>褰撳墠杞﹁締婊炵暀棰勮</div> </div> - <img src="@/assets/images/title@2x.png" class="bg" alt="" /> + <img src="@/assets/images/task/title@2x.png" class="bg" alt="" /> </div> <div class="table"> <div class="line header"> @@ -320,33 +322,59 @@ <div class="separate"></div> <div class="tab" :class="{ active: warningTab == '2' }" @click="tasClick('2')">琛屼负鍛婅</div> </div> - <img src="@/assets/images/title@2x.png" class="bg" alt="" /> + <img src="@/assets/images/task/title@2x.png" class="bg" alt="" /> </div> - <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 class="one_swiper_wrap"> + <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="line time"> - <img class="icon" src="@/assets/images/SecurityControl/clock.png" alt=""> - <span>{{ item.createDate }}</span> + <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> + <div v-if="item.title0 && item.createDate0" class="item_wrap"> + <img :src="item.img0" class="avatar" alt=""> + <div class="content"> + <div class="header"> + <div class="name">{{ item.title0 }}</div> + <div class="have_time">宸茬粡鍙戠敓{{ item.haveTime0 }}</div> + </div> + <div class="wrap"> + <div class="line addr"> + <img class="icon" src="@/assets/images/SecurityControl/xiaofang_ic_weizhi@2x.png" alt=""> + <span>{{ item.addr0 }}</span> + </div> + <div class="line time"> + <img class="icon" src="@/assets/images/SecurityControl/clock.png" alt=""> + <span>{{ item.createDate0 }}</span> + </div> </div> </div> </div> </div> + <div v-if="warningList.length == 0" class="empty_wrap"> + <img src="@/assets/images/default_empty.png" alt=""> + </div> </div> </div> + </div> + </div> <div class="garden_warning"> <div class="com_header"> @@ -354,7 +382,7 @@ <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" /> <div>鍥尯瀹夐槻璁惧</div> </div> - <img src="@/assets/images/title@2x.png" class="bg" alt="" /> + <img src="@/assets/images/task/title@2x.png" class="bg" alt="" /> </div> <div class="monitoring" @click="showJk = !showJk"> <img src="@/assets/images/SecurityControl/ic_jiankong@2x.png" class="icon" alt=""> @@ -417,7 +445,7 @@ <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" /> <div>浠婃棩璁垮婊炵暀鎯呭喌</div> </div> - <img src="@/assets/images/title@2x.png" class="bg" alt="" /> + <img src="@/assets/images/task/title@2x.png" class="bg" alt="" /> </div> <div class="table"> <div class="line header"> @@ -425,7 +453,7 @@ <div class="dept">鎷滆閮ㄩ棬</div> <div class="dept">瓒呮椂鏃堕暱</div> </div> - <div class="three-swiper list"> + <div v-if="dataList3.length > 0" class="three-swiper list"> <div class="swiper-wrapper"> <div class="item swiper-slide three-swiper-slide" v-for="item in dataList3"> <div class="line"> @@ -437,7 +465,9 @@ </div> </div> </div> - + <div v-if="dataList3.length == 0" class="empty_wrap"> + <img src="@/assets/images/default_empty.png" alt=""> + </div> </div> </div> </div> @@ -629,23 +659,24 @@ }]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, + color: '#4370f2' + }, { + offset: 1, + color: '#61d3f9' + }]), + 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 data = [] - 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 }) + data.push({ name: '寰呰闂�', value: data4.value.waitVisitNum, rate: (data4.value.waitVisitNum / data4.value.total).toFixed(1) }) + data.push({ name: '宸茬櫥璁�', value: data4.value.registerVisitNum, rate: (data4.value.registerVisitNum / data4.value.total).toFixed(1) }) + data.push({ name: '宸茬寮�', value: data4.value.levelNum, rate: (data4.value.levelNum / data4.value.total).toFixed(1) }) + data.push({ name: '婊炵暀', value: data4.value.retentionNum, rate: (data4.value.retentionNum / data4.value.total).toFixed(1) }) const option = { color: colors, tooltip: { @@ -683,6 +714,9 @@ gap: 4, label: { show: false, + formatter: '', + lineHeight: 0, + position: 'inside' }, tooltip: { trigger: 'none', // 褰撻紶鏍囨偓娴湪鏌愪釜鏁版嵁椤逛笂鏃惰Е鍙� @@ -706,12 +740,16 @@ label: { show: true, position: 'outside', - formatter: '{a|{b}} {a|{d}%}', + formatter: (params) => { + const index = params.dataIndex + return `{color${index}|${params.data.name} ${params.data.rate}%}` + // return `<div>${params.data.name}</div>` + }, rich: { - a: { - color: '#869CC9', - fontSize: 13 - }, + color0: { color: 'orange', fontSize: 14 }, + color1: { color: '#869CC9', fontSize: 13 }, + color2: { color: '#869CC9', fontSize: 13 }, + color3: { color: '#869CC9', fontSize: 13 } } }, labelLine: { @@ -790,7 +828,6 @@ dataListT2.value = temp } initEchart2() - loopFn2() }) } @@ -798,10 +835,10 @@ const data4 = ref({}) const getData3 = () => { visitSecurityData().then(res => { - if( !res.code == 200) return + if (!res.code == 200) return data4.value = res.data || {} let obj = data4.value - data4.value.total = obj.levelNum + obj.retentionNum + obj.registerVisitNum + obj.waitVisitNum + data4.value.total = obj.levelNum + obj.retentionNum + obj.registerVisitNum + obj.waitVisitNum const result = res.data.visitRetentionDataList || [] dataList3.value = result.map(i => { if (i.timeOutMinute) { @@ -818,36 +855,8 @@ 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澶〩鏃秏鍒�') - // } 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) @@ -861,7 +870,21 @@ item.haveTime = dayjs.duration(new Date().getTime() - new Date(item.createDate).getTime()).format('HH灏忔椂mm鍒嗛挓') return item }) - // loopFn1() + let temp = [] + warningList.value.forEach((item, i) => { + // console.log(i); + if (i == 0 || i % 2 == 0) { + temp.push(item) + } else { + temp[temp.length - 1].addr0 = item.addr + temp[temp.length - 1].createDate0 = item.createDate + temp[temp.length - 1].haveTime0 = item.haveTime + temp[temp.length - 1].img0 = item.img + temp[temp.length - 1].title0 = item.title + } + }) + warningList.value = temp + // console.log('temp', warningList.value); }) } const tasClick = (val) => { @@ -909,13 +932,10 @@ const loopFn1 = () => { var newSwiper1 = new Swiper('.one-swiper', { initialSlide: 0, - loop: true, // 寰幆妯″紡閫夐」 + // loop: true, // 寰幆妯″紡閫夐」 direction: 'vertical', //绔栫洿鏂瑰悜 - slidesPerView: 1, - slidesPerGroup: 2, - slidesPerColumn: 2, - // autoplay: { delay: 500, disableOnInteraction: false }, - autoplay: warningList.value.length > 2 ? { delay: 500, disableOnInteraction: false } : false, + slidesPerView: 2, + autoplay: warningList.value.length > 1 ? { delay: 4000, disableOnInteraction: false } : false, observer: true, //淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper }) } @@ -924,7 +944,7 @@ initialSlide: 0, direction: 'vertical', //绔栫洿鏂瑰悜 slidesPerView: 3, - autoplay: autoplayFlag(dataList2.value, 3, 2000), + autoplay: autoplayFlag(dataList2.value, 3, 4000), observer: true, //淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper }) } @@ -946,11 +966,26 @@ getData1() getData2() getData3() - // getData4() getData5() getWarning() - // initEchart1() + setInterval(() => { + getData1() + getData2() + getData3() + getWarning() + }, 1000 * 60) + + setInterval(() => { + getData5() + }, 1000 * 60 * 60) + + setTimeout(() => { + loopFn1() + loopFn2() + loopFn3() + }, 12000) + }) @@ -978,6 +1013,8 @@ margin-bottom: 20px; font-size: 14px; color: #D2E0FF; + background: rgba(0, 86, 255, 0.05); + backdrop-filter: blur(5px); .second_title { margin-top: 24px; @@ -1326,6 +1363,8 @@ .right_box_one { margin-bottom: 20px; + background: rgba(0, 86, 255, 0.05); + backdrop-filter: blur(5px); .second_title { margin-top: 20px; @@ -1408,9 +1447,15 @@ } } - .right_box_two {} + .right_box_two { + background: rgba(0, 86, 255, 0.05); + backdrop-filter: blur(5px); + } - .right_box_three {} + .right_box_three { + background: rgba(0, 86, 255, 0.05); + backdrop-filter: blur(5px); + } } } @@ -1533,9 +1578,16 @@ margin-right: 20px; /* one-swiper */ + .one_swiper_wrap { + height: 140px; + overflow: hidden; + background: rgba(0, 86, 255, 0.05); + backdrop-filter: blur(5px); + } + .list { - height: 124px; - overflow: auto; + height: 204px; + overflow: hidden; margin-top: 15px; scrollbar-width: none; display: flex; @@ -1543,24 +1595,25 @@ margin-left: 20px; .item { - width: 366px; - /* width: 50%; */ - float: left; + width: 736px; height: 102px !important; font-size: 13px; color: #D2E0FF; - margin-right: 10px; + display: flex; - &:nth-of-type(2n) { - margin-right: 0; - } - + /* border: 1px solid; */ .item_wrap { + width: 368px; 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; + margin-right: 10px; + + &:nth-of-type(2n) { + margin-right: 0; + } } @@ -1618,6 +1671,8 @@ flex: 1; margin-right: 20px; position: relative; + background: rgba(0, 86, 255, 0.05); + backdrop-filter: blur(5px); .content { display: flex; @@ -1699,7 +1754,7 @@ .table { .list { height: 102px !important; - overflow: auto; + overflow: hidden; .item { height: 34px !important; @@ -1762,11 +1817,13 @@ .visitor_warning { width: 360px; + background: rgba(0, 86, 255, 0.05); + backdrop-filter: blur(5px); .table { .list { height: 102px !important; - overflow: auto; + overflow: hidden; .item { height: 34px !important; @@ -1797,13 +1854,6 @@ align-items: center; font-weight: bold; font-size: 16px; - background-image: -webkit-linear-gradient(top, - #ffffff 0%, - #c8ddff 66%, - #85b4ff 72%, - #74a9ff 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; .icon { width: 16px; -- Gitblit v1.9.3