ghjg-digital-twin/src/views/yyjg/Index.vue

<template>
  <div id="yyjg">
    <EntInfo 
      v-if="entInfoShow" 
      :ent-data="currentEnt.value" 
      @closeEntInfo="handleCloseEntInfo"
      @closeUnitVedio="ue_closeUnitVedio"
      @onVideoShow="handleOnVideoShow"
    />
    <danger-list v-if="dangerListShow" @close="dangerListShow=false"/>
    <div class="panel-left" :class="{'is-hide': aside_hide}">
      <div class="pl-b1">
        <span class="title1-left">企业概况</span>
        <ul class="plb1-content">
          <li v-for="item in listData_qygk.data" @click="handleOpenEntList(item)">
            <img :src="item.icon" alt="">
            <div>
              <span>{{ item.showName||item.name }}</span>
              <span>{{item.count}}</span>
            </div>
          </li>
        </ul>
      </div>
      <EntInfoList
        :list-data="listData_entInfo.current"
        :is-warning="false"
        :has-detail="isEntListHasDetail"
        v-show="entInfoListShow"
        @closeEntList="handleCloseEntList"
        @pickedEnt="ent => handlePickedEnt(ent)"
       />
      <div class="pl-b2">
        <span class="title1-left">港口作业申报</span>
        <span class="title2-left">危货监测</span>
        <div v-for="item in listData_zysb.danger" class="list-item-danger">
          <img src="@/assets/imgs/page_yyjg/box-weihuo.png" alt="">
          <div>
            <div>
              <span>{{ item.count }}</span>
              <span>{{ item.unit }}</span>
            </div>
            <span>{{ item.name }}</span>
          </div>
        </div>
        <span class="title2-left">普货监测</span>
        <div v-for="item in listData_zysb.normal" class="list-item-normal">
          <img src="@/assets/imgs/page_yyjg/box-puhuo.png" alt="">
          <div>
            <div>
              <span>{{ item.count }}</span>
              <span>{{ item.unit }}</span>
            </div>
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-right" :class="{'is-hide': aside_hide}">
      <EntInfoList
        :list-data="listData_cdjkb.ent"
        :is-warning="true"
        v-show="entWarningListShow"
        :has-detail="true"
        @closeEntList="handleCloseWarningEnt"
        @pickedEnt="ent => handlePickWarningEnt(ent)"
      />
      <WarningShipList v-show="shipWarningListShow" :list-data="listData_cdjkb.ship" @close-list="handleCloseWarningShip" />

      <div class="pr pr-b1">
        <span class="title1-right">港口危货作业监测</span>
        <div class="prb1-option">
          <label><input type="radio" name="isFinish" :value="0" v-model="dangerIsFinish"/>未完工</label>
          <label><input type="radio" name="isFinish" :value="1" v-model="dangerIsFinish"/>已完工</label>
          <span @click="showDangerList">查看全部</span>
        </div>
        <div class="prb1-main">
          <ul class="prb1-list" id="prb1List" v-show="listData_zxjc.data.length>2">
            <li v-for="item,index in listData_zxjc.data" class="prb1-main-item">
              <i></i>
              <div>
                <div>
                  <span>{{ item.shipName }}</span>
                  <!-- <span>{{ item.state }}</span> -->
                </div>
                <span>{{ item.startTime.slice(5,16) + ' ~ ' + item.endTime.slice(5,16) }}</span>
                <div>
                  <div>
                    <span>货物: </span>
                    <span :title="item.cargoName">{{ item.cargoName }}</span>
                  </div>
                  <div>
                    <span>申报量(吨): </span>
                    <span>{{ item.declareTon }}</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <ul class="prb1-list" v-show="listData_zxjc.data.length!==0&&listData_zxjc.data.length<3">
            <li v-for="item,index in listData_zxjc.data" class="prb1-main-item">
              <i></i>
              <div>
                <div>
                  <span>{{ item.shipName }}</span>
                </div>
                <span>{{ item.startTime.slice(5,16) + ' ~ ' + item.endTime.slice(5,16) }}</span>
                <div>
                  <div>
                    <span>货物: </span>
                    <span :title="item.cargoName">{{ item.cargoName }}</span>
                  </div>
                  <div>
                    <span>申报量(吨): </span>
                    <span>{{ item.declareTon }}</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <span v-show="listData_zxjc.data.length===0" class="prb1-empty">无数据</span>
        </div>
      </div>
      <div class="pr pr-b2">
        <span class="title1-right">运行动态</span>
        <div class="prb2-main">
          <div v-for="item in cataData_yxdt.data">
            <span>{{ item.value }}</span>
            <span>艘次</span>
            <i></i>
            <div><i></i><span>{{ item.title }}</span></div>
          </div>
        </div>
      </div>
      <div class="pr pr-b3">
        <span class="title1-right">违规告警</span>
        <div class="prb3-item" v-for="item in listData_wggj.data">
          <i></i>
          <div>
            <span>{{ item.type }}</span>
            <div v-if="'value_ent' in item">
              <span>船舶</span>
              <span class="value-boat" @click="handleOpenWarningShip">{{ item.value }}</span>
              <span>企业</span>
              <span class="value-ent" @click="handleOpenWarningEnt">{{ item.value_ent }}</span>
            </div>
            <span v-else class="value-boat">{{ item.value }}</span>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'YyjgHome',
}
</script>

<script setup>
  import { onMounted, reactive, nextTick, ref, computed, onBeforeUnmount, watch } from 'vue';
  import EntInfoList from './cpns/EntInfoList'
  import EntInfo from './cpns/EntInfo'
  import { GetQygk, GetYxdt, GetZysb, GetZxjc, GetWggj, GetQylb, GetQywggj, GetCbwgyj } from '@/apis/yyjg'
  import WarningShipList from './cpns/WarningShipList.vue';
  import DangerList from './cpns/DangerList.vue'
  import bus from '@/utils/bus';
  import {
    ueCallCloseUnitWiget, ueCallCloseUnitVedio, ueCallClickUnitWiget, ueCallOpenUnitWiget, ueCallBreathGetPoint, ueCallClickBreth, ueCallClearAllBreth,
    ueCallShowSuperLevelBoat, ueCallCloseSuperLevelBoat
  } from '@/utils/UIInteractions'
  import { useRafFn } from '@vueuse/core'
  import { asideShow } from '@/store/index'

  const aside_hide = asideShow().isHide

  let timer

  bus.on('ueRec_closeUnitVideo', (data) => {
    if(data.isOk=='true') {
      entInfoListShow.value=true
      entInfoShow.value=true
    }
  })

  onMounted(() => {
    getData()
  })

  onBeforeUnmount(() => {
    clearInterval(timer)
    bus.off('ueRec_closeUnitVideo')
  })

  function getData() {
    getData_qygk()
    getData_yxdt()
    getData_zysb()
    getData_wggj()
    getData_zxjc(dangerIsFinish.value, 999, 1)
    timer = setInterval(() => {
      getData_zxjc(dangerIsFinish.value, 999, 1)
    }, 120000);
  }

  const listData_qygk = reactive({data: [
    { name: '港口经营企业', count: 0, icon: require('../../assets/imgs/page_yyjg/icon-gkjy.png') },
    { name: '港口经营备案企业', count: 0, icon: require('../../assets/imgs/page_yyjg/icon-gkjy.png') },
  ]})

  function getData_qygk() {
    GetQygk().then(res => {
      res.data.Rows.forEach(i => {
        listData_qygk.data.forEach(j => {
          if(i.certtype === j.name) {
            j.count = i.id
          }
        })
      })
    })
  }

  const entInfoListShow = ref(false)

  function handleCloseEntList() {
    entInfoListShow.value=false
    if(!entInfoShow.value) {
      // ue_closeUnitVedio()
      ue_closeUnitWiget()
    }
  }

  function handleCloseEntInfo() {
    entInfoShow.value=false
    if(!entInfoListShow.value) {
      // ue_closeUnitVedio()
      ue_closeUnitWiget()
    }
  }

  function handleOnVideoShow() {
    setTimeout(() => {
      entInfoListShow.value=false
      entInfoShow.value=false
    }, 500);
  }

  function ue_closeUnitWiget() {
    ueCallCloseUnitWiget()
  }

  function ue_closeUnitVedio() {
    ueCallCloseUnitVedio()
  }

  function getData_qylb(companyType, id, type) {
    GetQylb(companyType, id).then(res => {
      listData_entInfo.current = listData_entInfo[type] = res.data.Rows
    })
  }

  const entInfoShow = ref(false)

  const currentEnt = reactive({value: {}})

  function handlePickedEnt(ent) {
    // console.log(ent)
    entInfoShow.value = false
    currentEnt.value = ent
    ueCallClickUnitWiget(ent.objectId)
    setTimeout(() => {
      entInfoShow.value = true
    }, 1000);
  }

  const isEntListHasDetail = ref(false)

  const listData_entInfo = reactive({
    current: [],
    '港口经营企业': [],
    '港口经营备案企业': [],
    '水路运输管理企业': []
  })

  function handleOpenEntList(item) {
    if(listData_entInfo[item.name].length===0) {
      let companyType; let id
      switch(item.name) {
        case '港口经营企业':
          id=1; companyType=1
          break
        case '港口经营备案企业':
          id=10; companyType=1
          break
        case '水路运输管理企业':
          id=5; companyType=2
          break
      }
      getData_qylb(companyType, id, item.name)
    } else {
      listData_entInfo.current = listData_entInfo[item.name]
    }
    if(item.name==="港口经营企业") {
      ueCallOpenUnitWiget()
      isEntListHasDetail.value = true
    } else {
      isEntListHasDetail.value = false
    }
    entInfoListShow.value = true
  }


  function getData_zysb() {
    GetZysb().then(res => {
      listData_zysb.normal[0].count = res.data['commonCount']
      listData_zysb.danger[0].count = res.data['dangerCount']
      if(Math.round(+res.data['commonTon']).toString().length<5) {
        listData_zysb.normal[1].count = res.data['commonTon']
        listData_zysb.normal[1].unit = '吨'
      } else {
        listData_zysb.normal[1].count = (+res.data['commonTon']/10000).toFixed(2)
        listData_zysb.normal[1].unit = '万吨'
      }
      if(Math.round(+res.data['dangerTon']).toString().length<5) {
        listData_zysb.danger[1].count = res.data['dangerTon']
        listData_zysb.danger[1].unit = '吨'
      } else {
        listData_zysb.danger[1].count = (+res.data['dangerTon']/10000).toFixed(2)
        listData_zysb.danger[1].unit = '万吨'
      }
    })
  }

  const listData_zysb = reactive({
    normal: [
      { name: '当天货物装卸申报数', count: 0, unit: '艘' },
      { name: '当天散货装卸吞吐量', count: 0, unit: '吨' }
    ],
    danger: [
      { name: '当天危货装卸申报数', count: 0, unit: '艘' },
      { name: '当天危货装卸吞吐量', count: 0, unit: '吨' },
    ]
  })

  let isDangerScrolling = false
  let dangerPauseFn
  let dangerResumeFn
  function dangerListScroll() {
    const dangerList = document.getElementById('prb1List')
    let itemH = dangerList.clientHeight / Math.ceil(listData_zxjc.data.length) * 2
    const { pause, resume } = useRafFn(() => {
      if(Math.abs(dangerList.style.top.slice(0, -2)) >= itemH) {
        dangerList.style.top = 0
        let dangerListTemp = [...listData_zxjc.data]
        for(let i=0; i<2; i++) {
          dangerListTemp.push(dangerListTemp.shift())
        }
        listData_zxjc.data = dangerListTemp
      }
      dangerList.style.top = (Number(dangerList.style.top.slice(0, -2)) - 0.7) + 'px'
    })
    dangerList.onmouseenter = pause
    dangerList.onmouseleave = resume
    dangerPauseFn = pause
    dangerResumeFn = resume
  }

  function getData_zxjc(isFinish, size, index) {
    GetZxjc(isFinish, size, index).then(res => {
      listData_zxjc.data = res.data?.Rows || []
      if(isDangerScrolling) {
        if(listData_zxjc.data.length<3) {
          dangerPauseFn()
        }else {
          dangerResumeFn()
        }
      } else {
        if(listData_zxjc.data.length===0) { return }
        nextTick(() => {
          dangerListScroll()
          isDangerScrolling = true
        })
      }


    })
  }

  const dangerIsFinish = ref(0)

  watch(dangerIsFinish, (val)=> {
    getData_zxjc(dangerIsFinish.value, 999, 1)
  })

  const dangerListShow = ref(false)

  function showDangerList() {
    dangerListShow.value = !dangerListShow.value
  }

  const listData_zxjc = reactive({data: []})

  function getData_yxdt() {
    GetYxdt().then(res => {
      cataData_yxdt.data.forEach(i => {
        i.value = res.data[i.fieldName]
      })
    })
  }

  const cataData_yxdt = reactive({data: [
    { title: '即将作业船舶数', fieldName: 'willWorkCount', value: 0 },
    { title: '作业完成船舶数', fieldName: 'finishWorkCount', value: 0 },
    { title: '作业中船舶数', fieldName: 'workingCount', value: 0 },
  ]})

  function getData_wggj() {
    GetWggj().then(res => {
      listData_wggj.data.forEach(i => {
        i.value = res.data[i.fieldName]
        if('value_ent' in i) {
          i.value_ent = res.data['overGradeUnit']
        }
      })
    })
  }

  const listData_wggj = reactive({data: [
    { type: '超等级靠泊', fieldName: 'overGradeShip', value: 0, value_ent: 0 },
    { type: '港口经营许可证即将到期', fieldName: 'portExpire', value: 0 },
    { type: '危险货物作业附证即将到期', fieldName: 'dangerExpire', value: 0 },
  ]})

  const entWarningListShow = ref(false)
  const shipWarningListShow = ref(false)

  const listData_cdjkb = reactive({
    ent: [],
    ship: []
  })

  function handleOpenWarningEnt() {
    ueCallBreathGetPoint()
    GetQywggj().then(res => {
      listData_cdjkb.ent = res.data.Rows
    })
    shipWarningListShow.value = false
    entWarningListShow.value = true
  }

  function handlePickWarningEnt(ent) {
    ueCallClickBreth(ent.objectId)
  }

  function handleCloseWarningEnt() {
    entWarningListShow.value = false
    ueCallClearAllBreth()
  }

  function handleCloseWarningShip() {
    shipWarningListShow.value = false
    ueCallCloseSuperLevelBoat()
  }

  function handleOpenWarningShip() {
    ueCallShowSuperLevelBoat()
    GetCbwgyj().then(res => {
      listData_cdjkb.ship = res.data.Rows
    })
    if(entWarningListShow.value===true) {
      handleCloseWarningEnt()
    }
    shipWarningListShow.value = true
  }

</script>

<style lang="scss" scoped>
#yyjg {
  
  .panel-left, .panel-right {
    box-sizing: border-box;
    position: absolute;
    top: 105px;
    width: 380px;
    height: calc(100vh - 105px);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.5s ease;
  }
  .panel-left {
    left: 0;
    padding: 0 30px 60px;
    &.is-hide {
      left: -380px;
    }
  }

  .panel-right {
    right: 0;
    padding: 0 30px 30px;
    &.is-hide {
      right: -380px;
    }
    .pr {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
  }

  .pl-b1 {
    .plb1-content {
      .title2-left {
        margin: 15px 0;
      }
      li {
        width: fit-content;
        display: flex;
        align-items: center;
        margin: 30px 0 40px;
        cursor: pointer;
        &>img {
          width: 97px;
          height: 89px;
          margin: 0 20px 0 -10px;
        }
        &>div {
          display: flex;
          flex-direction: column;
          span:nth-child(1) {
            position: relative;
            display: inline-block;
            width: 153px;
            height: 26px;
            margin-top: 12px;
            font-size: 16px;
            font-weight: bold;
            font-style: italic;
            color: transparent;
            line-height: 26px;
            background: linear-gradient(0deg, #ACDDFF 0%, #FFFFFF 100%);
            -webkit-background-clip: text;
            &::after {
              content: '';
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              background: url('@/assets/imgs/page_yyjg/bg-text1.png') no-repeat;
              background-size: 100% 100%;
              z-index: -1;
            }

          }
          span:nth-child(2) {
            font-size: 30px;
            font-family: BarlowBold;
            font-style: italic;
            color: transparent;
            background: linear-gradient(180deg, #FFFFFF 30%, #47D5F7 100%);
            -webkit-background-clip: text;
          }
        }
      }
    }
  }

  .pl-b2 {
    .title2-left {
      margin: 3vh 0;
    }
    .list-item-normal, .list-item-danger {
      display: flex;
      align-items: center;
      &>div {
        &>div {
          margin: 3px 0 8px;
          span:first-child {
            box-sizing: border-box;
            display: inline-block;
            padding: 0 5px;
            flex: 1;
            text-align: right;
            font-size: 22px;
            line-height: 22px;
            font-family: BarlowBold;
            color: transparent;
            background: linear-gradient(180deg, #08D8BC 0%, #10ECDE 100%);
            -webkit-background-clip: text;
          }
          span:last-child {
            font-size: 16px;
            line-height: 14px;
            color: #ddd;
          }
        }
        &>span {
          padding-left: 4px;
          font-size: 16px;
          line-height: 16px;
          color: #ddd;
        }
      }

    }
    .list-item-normal {
      align-items: flex-start;
      &:not(:last-child) {
        margin-bottom: 20px;
      }
      &>img {
        width: 103px;
        height: 77px;
      }
      &>div {
        margin-top: 4px;
      }
    }
    .list-item-danger {
      &>img {
        width: 103px;
        height: 93px;
      }
    }
  }

  .pr-b1 {
    .title1-right {
      letter-spacing: 1px;
    }
    .prb1-option {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 80%;
      margin-bottom: 10px;
      font-size: 16px;
      color: #349ed8;
      &>label {
        display: flex;
        align-items: center;
        cursor: pointer;
        &>input {
          margin-right: 3px;
          width: 13px;
          height: 13px;
        }
      }
      &>span {
        cursor: pointer;
        &:hover {
          filter: brightness(1.2);
        }
      }
    }
    .prb1-main {
      width: 300px;
      height: 19vh;
      overflow: hidden;
      position: relative;
      .prb1-list {
        position: absolute;
        top: 0;
      }
      .prb1-empty {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 8vh;
        font-size: 16px;
        color: #aaa;
      }
    }
    .prb1-main-item {
      display: flex;
      align-items: center;
      margin: 10px 0 20px;
      &>i {
        display: flex;
        width: 73px;
        height: 86px;
        background: url('@/assets/imgs/common/icon-lshb.png') no-repeat;
        background-size: 100% 100%;
      }
      &>div {
        &>div:nth-child(1) {
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 5px;
          width: 222px;
          height: 24px;
          background: url('@/assets/imgs/common/bg-text1.png') no-repeat;
          background-size: 100% 100%;
          span:nth-child(1) {
            padding-right: 4px;
            font-size: 18px;
            font-weight: bold;
            font-style: italic;
            color: transparent;
            background: linear-gradient(0deg, #ACDDFF 0%, #FFFFFF 100%);
            -webkit-background-clip: text;
          }
          span:nth-child(2) {
            font-size: 16px;
            font-weight: 400;
            font-style: italic;
            color: #FF0000;
          }
        }
        &>span:nth-child(2) {
          box-sizing: border-box;
          padding: 0 5px;
          display: block;
          margin: 10px 0;
          font-size: 16px;
          font-family: BarlowBold;
          color: rgba($color: #fff, $alpha: 0.6);
        }
        &>div:nth-child(3) {
          box-sizing: border-box;
          padding: 0 5px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          &>div {
            display: flex;
            align-items: center;
          }
          div>span:nth-child(1) {
            font-size: 16px;
            font-weight: 400;
            color: #FFFFFF;
          }
          div:nth-child(1)>span:nth-child(2) {
            display: inline-block;
            max-width: 57px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 16px;
            color: #66E6FF;
          }
          div:nth-child(2)>span:nth-child(2) {
            font-size: 16px;
            font-family: BarlowBold;
            color: #66E6FF;
          }
        }
      }
    }
  }

  .pr-b2 {
    .prb2-main {
      position: relative;
      width: 95%;
      height: 25vh;
      &>div {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        &>span:nth-child(1) {
          font-size: 24px;
          font-family: BarlowBold;
          color: #A5D2FF;
        }
        &>span:nth-child(2) {
          font-size: 14px;
          font-weight: 400;
          color: rgba($color: #FAFCFF, $alpha: 0.8);
        }
        &>i {
          display: block;
          width: 98px;
          height: 98px;
          background: url('@/assets/imgs/page_yyjg/icon-yxdt2.png') no-repeat;
          background-size: 100% 100%;
          margin-top: -30px;
        }
        &>div:nth-child(4) {
          position: relative;
          width: 70px;
          text-align: center;
          span {
            font-size: 16px;
            font-weight: 400;
            color: #FFFFFF;
          }
          i {
            position: absolute;
            left: -15px;
            top: 2px;
            display: inline-block;
            width: 13px;
            height: 13px;
            transform: translateY(2px);
            margin-right: 3px;
            background: url('@/assets/imgs/page_yyjg/dot-blue.png') no-repeat;
            background-size: 100% 100%;
          }
        }
      }
      &>div:nth-child(1) {
        top: 30px;
        left: 0;
      }
      &>div:nth-child(2) {
        top: 30px;
        right: 0;
      }
      &>div:nth-child(3) {
        top: 90px;
        left: 50%;
        transform: translateX(-50%);
        &>i {
          background: url('@/assets/imgs/page_yyjg/icon-yxdt1.png') no-repeat;
          background-size: 100% 100%;
          margin-top: -20px;
        }
        &>div:nth-child(4) {
          width: fit-content;
          i {
            background: url('@/assets/imgs/page_yyjg/dot-green.png') no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
  }

  .pr-b3 {
    .prb3-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      i {
        display: block;
        width: 83px;
        height: 81px;
        background: url('@/assets/imgs/page_yyjg/icon-wg.png') no-repeat;
        background-size: 100% 100%;
      }
      &>div {
        margin-right: 20px;
        &>span:nth-child(1) {
          position: relative;
          display: block;
          width: 180px;
          height: 26px;
          margin-bottom: 10px;
          padding-left: 8px;
          font-size: 16px;
          font-weight: bold;
          font-style: italic;
          color: transparent;
          line-height: 26px;
          background: linear-gradient(0deg, #ACDDFF 0%, #FFFFFF 100%);
          -webkit-background-clip: text;
          &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('@/assets/imgs/page_yyjg/bg-wggj.png') no-repeat;
            background-size: 100% 100%;
            z-index: -1;
          }
        }
        &>div {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          &>span {
            font-size: 18px;
          }
        }

        .value-boat, .value-ent {
          display: block;
          width: fit-content;
          padding: 0 5px 0 3px;
          font-size: 26px;
          line-height: 26px;
          font-family: BarlowBold;
          font-style: italic;
          color: transparent;
          -webkit-background-clip: text;
          cursor: pointer;
        }

        .value-boat {
          background: linear-gradient(180deg, #FFFFFF 30%, #47D5F7 100%);
          -webkit-background-clip: text;
        }

        .value-ent {
          background: linear-gradient(180deg, #FFFFFF 30%, #fafa49 100%);
          -webkit-background-clip: text;
        }
      }
    }
  }

}
</style>