ll

liukangdong

2024-11-15 522877ae5bddcb27699b893c27f149d6a3c7e408

 screen/src/views/SecurityControl.vue

@@ -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">
@@ -322,24 +324,45 @@
            </div>
            <img src="@/assets/images/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>
@@ -347,6 +370,7 @@
              </div>
            </div>
          </div>

        </div>
        <div class="garden_warning">
          <div class="com_header">
@@ -425,7 +449,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 +461,9 @@
                </div>
              </div>
            </div>

            <div class="empty_wrap">
              <img v-if="dataList3.length == 0" src="@/assets/images/default_empty.png" alt="">
            </div>
          </div>
        </div>
      </div>
@@ -643,9 +669,9 @@
    }])]
  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.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: {
@@ -683,6 +709,9 @@
        gap: 4,
        label: {
          show: false,
          formatter: '',
          lineHeight: 0,
          position: 'inside'
        },
        tooltip: {
          trigger: 'none', // 当鼠标悬浮在某个数据项上时触发
@@ -798,10 +827,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) {
@@ -861,7 +890,23 @@
      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) {
        console.log(i)
        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);
    loopFn1()
  })
}
const tasClick = (val) => {
@@ -909,13 +954,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自己或子元素时，自动初始化swiper
  })
}
@@ -924,7 +966,7 @@
    initialSlide: 0,
    direction: 'vertical', //竖直方向
    slidesPerView: 3,
    autoplay: autoplayFlag(dataList2.value, 3, 2000),
    autoplay: autoplayFlag(dataList2.value, 3, 4000),
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
  })
}
@@ -1231,7 +1273,7 @@
          .menu_wrap {
            margin-top: 15px;
            max-height: 440px;
            overflow: auto;
            overflow: hidden;

            .menu {
              .menu_name {
@@ -1533,9 +1575,13 @@
    margin-right: 20px;

    /* one-swiper */
    .one_swiper_wrap{
      height: 140px;
      overflow: hidden;
    }
    .list {
      height: 124px;
      overflow: auto;
      height: 204px;
      overflow: hidden;
      margin-top: 15px;
      scrollbar-width: none;
      display: flex;
@@ -1543,24 +1589,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;
          }
        }


@@ -1699,7 +1746,7 @@
      .table {
        .list {
          height: 102px !important;
          overflow: auto;
          overflow: hidden;

          .item {
            height: 34px !important;
@@ -1766,7 +1813,7 @@
    .table {
      .list {
        height: 102px !important;
        overflow: auto;
        overflow: hidden;

        .item {
          height: 34px !important;