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

<template>
  <div id="hdsj">
    <div class="panel-left">
      <div class="pl-b1">
        <span class="title1-left">水深管理</span>
        <div v-for="item,index in data_ssgl.value" class="plb1-item" :class="{'highlight': index===1}">
          <img :src="item.iconUrl" alt="">
          <div>
            <span>{{ item.title }}</span>
            <div>
              <span>{{ item.value }}</span>
              <span>{{ item.unit }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="pl-b2">
        <span class="title1-left">工程管理</span>
        <span class="title2-left">工程信息</span>
        <ul class="plb2-main">
          <li class="plb2-item" v-for="item,index in listData_gcxx.value">
            <img :src="require('@/assets/imgs/page_hdsj/icon-gcxx.png')" alt="">
            <div>
              <div :class="{'highlight': index===1}"><span>{{ item.name }}</span></div>
              <div>
                <span>{{ item.date }}</span>
                <span
                  :class="{'status-wks': item.status==='未开始','status-jxz': item.status==='进行中','status-ywc': item.status==='已完成'}"
                >{{ item.status }}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="pl-b3">
        <span class="title2-left">工程统计</span>
        <div class="plb3-main">
          <div v-for="item in data_gctj.value">
            <div>
              <span>{{ item.year }}:</span>
              <span>{{ item.value }}</span>
              <span>个</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-right">
      <div class="pr-b1 pr">
        <span class="title1-right">疏浚监控</span>
        <span class="title2-right">工程概况</span>
        <div class="part1-item" v-for="item in data_gcgk.sta">
          <img :src="item.iconUrl" alt="">
          <div>
            <span>{{ item.title }}</span>
            <div>
              <span>{{ item.value }}</span>
              <span>{{ item.unit }}</span>
            </div>
          </div>
        </div>
        <div class="part2">
          <div @click="toggleShujunState('before')" :class="{'highlight': shujunState==='before'}">
            <span class="text-emp1">疏浚前</span><span>地形</span>
          </div>
          <div @click="toggleShujunState('after')" :class="{'highlight': shujunState==='after'}">
            <span class="text-emp2">疏浚后</span><span>地形</span>
          </div>
        </div>
      </div>
      <div class="pr-b2 pr">
        <span class="title2-right">分时统计</span>
        <div id="chart_fstj" v-show="!fstjListShow"></div>
        <div class="fstj-list table-carousel" v-show="fstjListShow">
          <div class="fl-btns">
            <i class="flb-play" @click="handlePlaySjByDay"></i>
            <i class="flb-back" @click="handleCloseList"></i>
          </div>
          <div class="head coloumn">
            <span>挖泥船</span><span>运泥船</span><span>运量</span><span>时间</span>
          </div>
          <el-carousel
            v-if="fstjListLen>0"
            trigger="click"
            indicator-position="outside"
            arrow="never"
            :autoplay="false"
          >
            <el-carousel-item v-for="page in fstjListLen" :key="page">
              <ul class="tc-list">
                <li
                  v-for="item,index in fstjListData.value.slice((page-1)*4, (page-1)*4+4)"
                  class="coloumn"
                  :class="{'highlight': fstjCurrentId===item.ID}"
                  @click="handlePickFstjCurrent(item)"
                >
                  <span>{{ item.WNNAME }}</span>
                  <span>{{ item.YNNAME }}</span>
                  <span>{{ item.TONNAGE }}</span>
                  <span>{{ item.WORKTIME }}</span>
                </li>
              </ul>
            </el-carousel-item>
          </el-carousel>
          <div v-else class="no-data">
            <span>无数据</span>
          </div>
        </div>
      </div>
      <div class="pr-b3 pr">
        <span class="title2-right">越界预警</span>
        <ul class="prb3-main" >
          <li v-for="item in data_yuejie.value" class="prb3-item2">
            <img :src="require('@/assets/imgs/page_hdsj/icon-wgyj-list.png')" alt="">
            <span>{{ item.SHIPNAME }}</span>
            <span>{{ useDateFormat(item.TIME, 'MM-DD  HH:mm').value }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

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

<script setup>
  import { onMounted, reactive, ref, computed, onBeforeUnmount } from 'vue';
  import { setSjjk } from '../../echarts/options'
  import { ElCarousel, ElCarouselItem } from 'element-plus'
  import 'element-plus/es/components/carousel/style/css'
  import 'element-plus/es/components/carousel-item/style/css'
  import { GetBoatNum, GetFstj, GetFstjByDay, GetYjWarning } from '@/apis/hdsj'
  import { useDateFormat } from '@vueuse/core';
  import {
    ueCallInitShujun, ueCallClickShujun, ueCallRunShujun, ueCallBeforeShujun, ueCallClearShujun, ueCallAfterShujun, ueCallBackShujun, ueCallInitWaterShujun
  } from '@/utils/UIInteractions'
  import bus from '@/utils/bus';

  onMounted(() => {
    setSjjk(document.getElementById('chart_fstj'), chartData_fstj.value)
    getData()
  })

  function getData() {
    getBoatNum()
    getFstj()
    getYjWarning()
  }

  
  const data_ssgl = reactive({value: [
    { title: '维护水深', value:  8, unit: '米', iconUrl: require('@/assets/imgs/page_hdsj/logo-whss.png') },
    { title: '淤积预警', value:  1, unit: '处', iconUrl: require('@/assets/imgs/page_hdsj/logo-yjyj.png') },
  ]})

  const listData_gcxx = reactive({value: [
    { name: '2022年董家渡弯道疏浚项目', date:'2022-11', status: '已完成' },
    { name: '2022年陆家嘴弯道疏浚项目', date:'2022-10', status: '已完成' },
    { name: '2021-2022年黄浦江深水航道疏浚项目', date:'2021-07', status: '已完成' },
  ]})
  
  const data_gctj = reactive({value: [
    { year: '2019', value: 3 },
    { year: '2020', value: 5 },
    { year: '2021', value: 2 },
    { year: '2022', value: 3 },
    { year: '2023', value: 1 },
  ]})
  
  const data_gcgk = reactive({
    sta: [
      { title: '河道总长', value: '-', unit: 'km', iconUrl: require('@/assets/imgs/page_hdsj/logo-hdzc.png') },
      { title: '疏浚船舶', value: '-', unit: '艘', iconUrl: require('@/assets/imgs/page_hdsj/logo-sjcb.png') },
    ],
    cata: [
      { name: '工区', value: '-' },
      { name: '排泥场', value: '-' },
      { name: '固化场', value: '-' },
    ]
  })

  function getBoatNum() {
    GetBoatNum().then(res => {
      data_gcgk.sta[0].value = 22.15
      data_gcgk.sta[1].value = res.data || '-'
      data_gcgk.cata[0].value = 6
      data_gcgk.cata[1].value = 17
      data_gcgk.cata[2].value = 3
    })
  }

  const shujunState = ref(null)
  function toggleShujunState(type) {
    if(type===shujunState.value) {
      shujunState.value = null
      ueCallInitWaterShujun()
    }else {
      if(type==='before') {
        ueCallBeforeShujun()
      } else if(type==='after') {
        ueCallAfterShujun()
      }
      shujunState.value = type
    }
  }
  
  const chartData_fstj = reactive({value: [
    { TIME: '-/-', TOTAL: 0, SUM: 0 },
		{ TIME: '-/-', TOTAL: 0, SUM: 0 },
		{ TIME: '-/-', TOTAL: 0, SUM: 0 },
		{ TIME: '-/-', TOTAL: 0, SUM: 0 },
		{ TIME: '-/-', TOTAL: 0, SUM: 0 },
		{ TIME: '-/-', TOTAL: 0, SUM: 0 },
  ]})
  
  function getFstj() {
    GetFstj().then(res => {
      chartData_fstj.value = res.data.Rows.slice(-6)
      let chartFstj = setSjjk(document.getElementById('chart_fstj'), chartData_fstj.value)
      chartFstj.on('click', (params)=> {
        fstjListShow.value = true
        GetFstjByDay(params.name).then(res => {
          fstjListData.value = res.data.Rows
        })
      })
    })
  }
  
  const fstjListShow = ref(false)
  const fstjListData = reactive({value: []})

  const fstjListLen = computed(() => {
    return Math.ceil(fstjListData.value.length/4)
  })

  const fstjCurrentId = ref('')

  const shujunRunTime = ref(1)

  function handlePickFstjCurrent(item) {
    ueCallClearShujun()
    setTimeout(() => {
      fstjCurrentId.value = item.ID
      shujunRunTime.value = 1
      ueCallInitShujun()
    }, 1000);
  }

  function handlePlaySjByDay() {
    ueCallClearShujun()
    setTimeout(() => {
      fstjCurrentId.value = ''
      shujunRunTime.value = fstjListData.value.length
      ueCallInitShujun()
    }, 1000);
  }

  function handleCloseList() {
    fstjListShow.value = false
    ueCallClearShujun()
  }

  bus.on('ueRec_InitShujun', (data) => {
    if(data.isOk=='true') {
      ueCallClickShujun()
    }
  })

  bus.on('ueRec_ClickShujun', (data) => {
    if(data.isOk=='true') {
      ueCallRunShujun()
      shujunRunTime.value -= 1
    }
  })

  bus.on('ueRec_RunShujun', (data) => {
    if(data.isOk=='true' && shujunRunTime.value>0) {
      ueCallBackShujun()
    }
  })

  bus.on('ueRec_BackShujun', (data) => {
    if(data.isOk=='true' && shujunRunTime.value>0) {
      ueCallRunShujun()
      shujunRunTime.value -= 1
    }
  })
  
  const data_yuejie = reactive({value: [
    { SHIPNAME: '-', TIME: '-' },
    { SHIPNAME: '-', TIME: '-' },
    { SHIPNAME: '-', TIME: '-' },
    { SHIPNAME: '-', TIME: '-' },
  ]})

  function getYjWarning() {
    GetYjWarning().then(res => {
      data_yuejie.value = res.data.Rows.sort((a,b) => b.TIME - a.TIME).slice(0,4)
    })
  }

  onBeforeUnmount(() => {
    bus.off('ueRec_InitShujun')
    bus.off('ueRec_ClickShujun')
    bus.off('ueRec_RunShujun')
    bus.off('ueRec_BackShujun')
    ueCallClearShujun()
  })
</script>

<style lang="scss" scoped>
#hdsj {
  
  .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;
  }
  .panel-left {
    left: 0;
    padding: 0 30px 10px;
  }

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

  .pl-b1 {
    .plb1-item {
      display: flex;
      align-items: center;
      &.highlight {
        &>div>span {
          background: url('@/assets/imgs/page_hdsj/bg-ssgl-text2.png') no-repeat;
          background-size: contain;
        }
      }
      &>img {
        width: 105px;
        height: 95px;
      }
      &>div {
        display: flex;
        flex-direction: column;
        &>span {
          display: block;
          box-sizing: border-box;
          width: 174px;
          height: 27px;
          margin: 6px 0 5px;
          padding-left: 15px;
          background: url('@/assets/imgs/page_hdsj/bg-ssgl-text.png') no-repeat;
          background-size: contain;
          font-size: 24px;
          font-family: YSBTH;
          color: #FFFFFF;
          line-height: 25px;
          text-shadow: 1px 2px 0px rgba(17,20,22,0.22);
        }
        &>div {
          padding-left: 15px;
          display: flex;
          align-items:flex-end;
          span:nth-child(1) {
            margin-right: 9px;
            font-size: 34px;
            line-height: 34px;
            font-family: BarlowBold;
            color: transparent;
            background: linear-gradient(0deg, rgba(29,128,224,0.9) 0%, rgba(255,255,255,0.9) 70%);
            -webkit-background-clip: text;
          }
          span:nth-child(2) {
            font-size: 14px;
            line-height: 22px;
            color: #FFFFFF;
            text-shadow: 1px 2px 0px rgba(17,20,22,0.22);
          }
        }
      }
    }
    .plb1-item:nth-last-child(1) {
      &>div>div>span:nth-child(1) {
        background: linear-gradient(0deg, rgba(224,159,29,0.9) 0%, rgba(255,255,255,0.9) 70%);
        -webkit-background-clip: text;
      }
    }
  }

  .pl-b2 {
    .plb2-main {

      .plb2-item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        &>img {
          width: 62px;
          height: 67px;
        }
        &>div {
          margin-left: 5px;
          &>div:nth-child(1) {
            width: 220px;
            height: 24px;
            background: url('@/assets/imgs/page_hdsj/bg-gcxx-title.png') no-repeat;
            background-size: contain;
            margin-bottom: 5px;
            span {
              display: block;
              width: 100%;
              height: 100%;
              font-size: 16px;
              font-weight: bold;
              font-style: italic;
              color: transparent;
              line-height: 24px;
              background: linear-gradient(0deg, #ACDDFF 0%, #FFFFFF 90%);
              -webkit-background-clip: text;
            }
            &.highlight {
              background: url('@/assets/imgs/page_hdsj/bg-gcxx-title2.png') no-repeat;
              background-size: contain;
              &>span {
                background: linear-gradient(0deg, #f0d60d 0%, #FFFFFF 90%);
                -webkit-background-clip: text;
              }
            }
          }
          &>div:nth-child(2) {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 18px;
            span:nth-child(1) {
              font-size: 14px;
              font-family: BarlowBold;
              color: rgba($color: #fff, $alpha: 0.6);
            }
            span:nth-child(2) {
              display: block;
              width: 66px;
              height: 31px;
              font-size: 13px;
              font-weight: bold;
              font-style: italic;
              color: #FFFFFF;
              line-height: 31px;
              text-align: center;
              &.status-wks {
                background: url('@/assets/imgs/page_hdsj/gcxx-wks.png') no-repeat;
                background-size: contain;
              }
              &.status-jxz {
                background: url('@/assets/imgs/page_hdsj/gcxx-jxz.png') no-repeat;
                background-size: contain;
              }
              &.status-ywc {
                background: url('@/assets/imgs/page_hdsj/gcxx-ywc.png') no-repeat;
                background-size: contain;
              }
              
            }
          }
        }
      }
    }
  }

  .pl-b3 {
    .plb3-main {
      position: relative;
      width: 254px;
      height: 279px;
      background: url('@/assets/imgs/page_hdsj/bg-gctj.png') no-repeat;
      background-size: 100% 100%;
      &::after {
        content: '工程统计';
        position: absolute;
        left: 37%;
        bottom: 37%;
        transform: rotateZ(4deg);
      }
      &>div {
        position: absolute;
        width: 94px;
        height: 32px;
        background: url('@/assets/imgs/page_hdsj/bg-gctj-text.png') no-repeat;
        background-size: contain;
        &>div {
          height: 100%;
          transform: rotateZ(5deg);
          display: flex;
          align-items: center;
          span:nth-child(1) {
            margin-left: 7px;
            font-size: 14px;
            font-family: BarlowBold;
            color: #A5E4FF;
          }
          span:nth-child(2) {
            margin: 0 3px 0 5px;
            font-size: 18px;
            font-family: BarlowBold;
            color: #CCE6FF;
          }
          span:nth-child(3) {
            font-size: 12px;
            color: #CCE6FF;
          }
        }
        
      }
      &>div:nth-child(1) {
        top: 15%;
        right: 5%;
      }
      &>div:nth-child(2) {
        top: 43%;
        right: -8%;
      }
      &>div:nth-child(3) {
        bottom: 17%;
        right: 5%;
      }
      &>div:nth-child(4) {
        bottom: 32%;
        left: 5%;
      }
      &>div:nth-child(5) {
        top: 26%;
        left: 5%;
      }
    }
  }

  .pr-b1 {
    .part1-item {
      width: 80%;
      display: flex;
      align-items: center;
      &:not(:last-child) {
        margin-bottom: 15px;
      }
      &>img {
        width: 89px;
        height: 95px;
      }
      &>div {
        margin-left: 17px;
        &>span {
          font-size: 20px;
          font-style: italic;
          color: rgba($color: #EAF2FF, $alpha: 0.7);
        }
        &>div {
          margin-top: 8px;
          span:nth-child(1) {
            margin-right: 11px;
            font-size: 32px;
            font-family: BarlowBold;
            color: #FFFFFF;
            line-height: 32px;
          }
          span:nth-child(2) {
            font-size: 16px;
            color: rgba($color: #A6C8FF, $alpha: 0.54);
          }
        }
      }
    }

    .part2 {
      width: 90%;
      display: flex;
      justify-content: space-between;
      &>div {
        width: 140px;
        height: 49px;
        background: url('../../assets/imgs/page_hdsj/bg-sj-btn.png');
        background-size: contain;
        cursor: pointer;
        text-align: center;
        &>span {
          font-size: 18px;
          font-family: YSBTH;
          color: #eee;
          line-height: 49px;
        }
        .text-emp1 {
          color: #fcd049;
        }
        .text-emp2 {
          color: #46c6fe;
        }
        &.highlight {
          filter: brightness(130%);
          transform: scale(1.1);
        }
      }
    }
  }

  .pr-b2 {
    #chart_fstj {
      width: 90%;
      height: 23vh;
    }
    .fstj-list {
      // margin-top: 0.5vh;
      height: 23vh;
      width: 90%;
      position: relative;

      .fl-btns {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 10px;
        &>i {
          display: block;
          width: 20px;
          height: 20px;
          margin-left: 10px;
          cursor: pointer;
        }
        .flb-back {
          background: url('@/assets/imgs/page_hdsj/btn-back.png');
          background-size: contain;
        }
        .flb-play {
          background: url('@/assets/imgs/page_hdsj/btn-play.png');
          background-size: contain;
        }
      }

      .coloumn {
        span:nth-child(1) {
          width: 30%;
        }
        span:nth-child(2) {
          width: 30%;
        }
        span:nth-child(3) {
          width: 20%;
        }
        span:nth-child(4) {
          width: 20%;
        }
      }

      .el-carousel {
        height: calc(100% - 50px);
      }

      .tc-list {
        &>li {
          height: 30px;
          margin-top: 10px;
          cursor: pointer;
          &.highlight>span {
            color: #f0d60d;
          }
        }
      }
    }
  }

  .pr-b3 {
    .prb3-main {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      width: 100%;
      // height: 20vh;
      margin: 10px 0 25px;

      .prb3-item2 {
        width: 85%;
        height: 24px;
        display: flex;
        align-items: center;
        margin: 14px 0;
        background: url('@/assets/imgs/page_hdsj/bg-wgyj-list.png') no-repeat;
        background-size: 100% 100%;
        span:nth-child(2) {
          display: block;
          width: 51%;
          font-size: 14px;
          font-weight: 700;
          font-style: italic;
          color: transparent;
          background: linear-gradient(0deg, #ACDDFF 0%, #FFFFFF 100%);
          -webkit-background-clip: text;
        }
        span:nth-child(3) {
          display: block;
          font-size: 14px;
          font-family: BarlowBold;
          color: rgba($color: #fff, $alpha: 0.6);
        }
      }
    }
  }
}
</style>