tba-waves/src/components/StationRightButtonGroup.vue

<script lang="ts" setup>
import {computed, onUnmounted, ref, watch} from 'vue'
import {Operate, Setting, View} from "@/utils/tdInstruction";
import {Hide, View as Elview} from '@element-plus/icons-vue'
import {getStation} from '@/utils/station'
import {useRoute} from "vue-router";
import {jumpPage} from "@/utils";
import {useAppStore} from '@/stores/app'
import {useStationStore} from '@/stores/station'
import handle from "@/assets/svg/handle.svg";
import underwater from "@/assets/svg/underwater.svg";
import horizontalContract from "@/assets/svg/horizontal-contract.svg";
import horizontalExpand from "@/assets/svg/horizontal-expand.svg";
import roam from "@/assets/svg/roam.svg";
import bus from "@/utils/bus";
import {changeWeatherByRainfall} from "@/utils/rainfall";
import play from "@/assets/svg/play2.svg";
import pause from "@/assets/svg/pause2.svg";
import stop from "@/assets/svg/stop2.svg";

const route = useRoute()
const appStore = useAppStore()
const stationStore = useStationStore()
const btnBackSrc = ref(new URL('@/assets/images/btn-back.png', import.meta.url).href)
const homeSrc = ref(new URL('@/assets/images/home.png', import.meta.url).href)
const weatherSrc = ref(new URL('@/assets/images/weather.png', import.meta.url).href)
const flagSrc = ref(new URL('@/assets/images/flag.png', import.meta.url).href)
const walkSrc = ref(new URL('@/assets/images/walk.png', import.meta.url).href)
const cultureSrc = ref(new URL('@/assets/images/culture.png', import.meta.url).href)
const backgroundSrc = ref(new URL('@/assets/images/btn-background.png', import.meta.url).href)
const waterSliderBackground = (new URL('@/assets/images/card/card01.png', import.meta.url).href)

// 河道漫游 0:结束 1:播放 2:暂停
const riverRoamStatus = ref(0)
// 测站漫游 0:结束 1:播放 2:暂停
const stationRoamStatus = ref(0)

/**
 * 测验模拟
 * @param type river:河道漫游, station:测站漫游
 * @param mode 播放、暂停、继续、结束
 */
function handleRoam(type, mode) {
  let status = (type === 'river' ? riverRoamStatus : stationRoamStatus)
  switch (mode) {
    case "play":
      if (status.value === 0) {
        Operate.roam(type, '播放')
      } else {
        Operate.roam(type, '继续')
      }
      status.value = 1
      break
    case "pause":
      Operate.roam(type, '暂停')
      status.value = 2
      break
    case "stop":
      Operate.roam(type, '结束')
      status.value = 0
      break
    default:
  }
}

// 测站信息
const station = computed(() => getStation(route.params.stcd))
// 是否显示返回按钮
const hasBack = computed(() => route.path.indexOf('/sthouse/') > -1 || route.path.indexOf('/device/') > -1)
// 是否显示模拟按钮
const hasHandle = computed(() => route.path.indexOf('/situational/') > -1)
const underwaterState = ref(false)
// 测站标签
const label1State = computed({
  get: () => stationStore.labelState['测站主页'],
  set: () => stationStore.setLabelState('测站主页')
});

// 仪器运维标签
const label2State = computed({
  get: () => stationStore.labelState['仪器运维'],
  set: () => stationStore.setLabelState('仪器运维')
});

// 模拟模式
const simulationMode = ref('无')
const waterLevel = ref(2.72)
const waterLevelStep = ref(0.01)
const waterLevelMin = ref(2.72)
const waterLevelMax = ref(4.39)
const waterLevelMarks = ref({
  2.72: {
    label: '2.72m'
  },
  4.19: {
    style: {
      color: '#E6A23C'
    },
    label: '4.19m'
  },
  4.29: {
    style: {
      color: '#F56C6C'
    },
    label: '4.29m'
  },
  4.39: '4.39m'
})

function formatWaterLevelTooltip(val: number) {
  switch (simulationMode.value) {
    case "水位":
      return (val).toFixed(2) + ' m' as string
    case "雨量":
      return val + ' mm' as string
    case "流量":
      return (val).toFixed(2) + ' m³/s' as string
  }

}

function handleHome() {
  // 跳转页面
  jumpPage(`/station/${route.params.stcd}`)
  // 关闭所有标签
  stationStore.closeLabel()
  // 切换测站远视角
  View.changeView(station.value.stnm)
}

function back() {
  if (route.path.indexOf('/device/') > -1 && appStore.hasEnterSthouse) {
    // 进过站房页面, 并且在仪器详情界面
    // 切换站房视角
    View.changeDeviceView("转跳", route.params.stcd)
    // 跳转站房页面
    jumpPage(`/sthouse/${route.params.stcd}`)
  } else {
    // 切换近视角
    View.changeView(station.value.stnm + '近')
    // 跳转上个页面
    jumpPage(`/${appStore.homePage}/${route.params.stcd}`)
    appStore.exitSthouse()
  }
}

async function handleSimulationModeChange(mode) {
  switch (mode) {
    case "水位":
      waterLevelMin.value = 2.72
      waterLevelMax.value = 4.39
      waterLevelStep.value = 0.01
      waterLevelMarks.value = {
        2.72: {
          label: '2.72m'
        },
        3: {
          style: {
            color: '#409EFF'
          },
          label: '3.00m'
        },
        3.5: {
          style: {
            color: '#409EFF'
          },
          label: '3.50m'
        },
        4: {
          style: {
            color: '#409EFF'
          },
          label: '4.00m'
        },
        4.19: {
          style: {
            color: '#E6A23C'
          },
          label: '4.19m'
        },
        4.29: {
          style: {
            color: '#F56C6C'
          },
          label: '4.29m'
        },
        4.39: '4.39m'
      }
      waterLevel.value = await stationStore.getZ()
      break
    case "雨量":
      waterLevelMin.value = 0
      waterLevelMax.value = 300
      waterLevelStep.value = 1
      waterLevelMarks.value = {
        10: {
          label: '10mm'
        },
        25: {
          style: {
            color: '#67C23A'
          },
          label: '25mm'
        },
        50: {
          style: {
            color: '#409EFF'
          },
          label: '50mm'
        },
        100: {
          style: {
            color: '#E6A23C'
          },
          label: '100mm'
        },
        250: {
          style: {
            color: '#F56C6C'
          },
          label: '250mm'
        }
      }
      waterLevel.value = await stationStore.getDrp()
      break
    case "流量":
      waterLevelMin.value = -300
      waterLevelMax.value = 300
      waterLevelStep.value = 1
      waterLevelMarks.value = {
        '-300': '-300m³/s',
        '-200': '-200m³/s',
        '-100': '-100m³/s',
        '0': '0',
        '100': '100m³/s',
        '200': '200m³/s',
        '300': '300m³/s'
      }
      waterLevel.value = await stationStore.getQ()
      break
  }
  handleWaterLevelChange()
}

function handleWaterLevelChange() {
  switch (simulationMode.value) {
    case "水位":
      Operate.setWaterLevel(route.params.stcd, waterLevel.value)
      break
    case "雨量":
      changeWeatherByRainfall(waterLevel.value)
      break
    case "流量":
      Operate.setWaterLevel(route.params.stcd, null, waterLevel.value)
      break
  }
}

bus.on('set-water-level', value => waterLevel.value = value)
watch(() => waterLevel, value => handleWaterLevelChange(), {deep: true})

// 路由监听
watch(() => route.path, path => {
  // 态势感知 近视角 仪器标签
  if (path.indexOf('/situational/') > -1 || path.indexOf('/intelloper/') > -1) {
    View.changeView(station.value.stnm + '近')
    stationStore.setLabelState2('测站主页', false)
    stationStore.setLabelState2('仪器运维', true)
  }
  if (route.path.indexOf('/situational/') === -1) {
    simulationMode.value = '无'
  }
}, {deep: true, immediate: true})

watch(() => underwaterState.value, (value) => {
  Operate.setUnderwaterState(route.params.stcd, value)
})

onUnmounted(() => {
  if (riverRoamStatus.value !== 0) {
    Operate.roam('river', '结束')
  }
  if (stationRoamStatus.value !== 0) {
    Operate.roam('station', '结束')
  }
})

// 底板回调监听
bus.on('handle_ue_response', (data) => {
  if (data.Data && data.Data.Name && data.Data.Name === '漫游结束') {
    if (riverRoamStatus.value !== 0) {
      riverRoamStatus.value = 0
    }

    if (stationRoamStatus.value !== 0) {
      stationRoamStatus.value = 0
    }
  }
})

watch(() => riverRoamStatus.value, (value) => {
  bus.emit("roam", value !== 0)
})
watch(() => stationRoamStatus.value, (value) => {
  bus.emit("roam", value !== 0)
})

</script>
<template>
  <div class="right-btn-container">
    <div v-show="hasBack" class="right-btn-item" @click="back">
      <img :src="btnBackSrc" alt="返回"/>
    </div>
    <div class="right-btn-item" @click="handleHome">
      <img :src="homeSrc" alt="主页"/>
    </div>
    <el-popover placement="left-start" trigger="hover" width="auto">
      <template #reference>
        <div class="right-btn-item">
          <img :src="walkSrc" alt="视角"/>
        </div>
      </template>
      <el-button-group>
        <el-button @click="View.changeView(station.stnm)">远</el-button>
        <el-button @click="View.changeView(station.stnm+'近')">近</el-button>
      </el-button-group>
    </el-popover>
    <el-popover placement="left-start" trigger="hover" width="auto">
      <template #reference>
        <div class="right-btn-item">
          <img :src="flagSrc" alt="标签"/>
        </div>
      </template>
      测站标签&nbsp;<el-switch v-model="label1State" :active-action-icon="Elview" :inactive-action-icon="Hide"/>
      仪器运维&nbsp;<el-switch v-model="label2State" :active-action-icon="Elview" :inactive-action-icon="Hide"/>
    </el-popover>
    <el-popover placement="left-start" trigger="hover" width="auto">
      <template #reference>
        <div class="right-btn-item">
          <img :src="weatherSrc" alt="天气"/>
        </div>
      </template>
      <el-button-group>
        <el-button v-for="item in ['晴','小雨','中雨','大雨']" :key="item"
                   @click="Setting.setWeather(item)">{{ item }}
        </el-button>
      </el-button-group>
    </el-popover>

    <el-popover placement="left-start" trigger="hover" width="auto">
      <template #reference>
        <div class="right-btn-item">
          <img :src="backgroundSrc" alt="" style="position: absolute;"/>
          <icon :data="underwater"/>
        </div>
      </template>
      水下地形&nbsp;<el-switch v-model="underwaterState" :active-action-icon="Elview" :inactive-action-icon="Hide"/>
    </el-popover>

    <el-popover placement="left-start" trigger="hover" width="auto">
      <template #reference>
        <div v-if="route.params.stcd === '63304700'" class="right-btn-item">
          <img :src="backgroundSrc" alt="" style="position: absolute;"/>
          <icon :data="roam"/>
        </div>
      </template>
      <el-row>
        <el-col :span="24"><label>河道漫游</label></el-col>
        <el-col :span="24" class="video-control-bar roam">
          <icon v-if="riverRoamStatus == 0 || riverRoamStatus == 2" :data="play" class="video-btn"
                @click="handleRoam('river','play')"/>
          <icon v-if="riverRoamStatus == 1" :data="pause" class="video-btn"
                @click="handleRoam('river','pause')"/>
          <icon v-if="riverRoamStatus != 0" :data="stop" class="video-btn" @click="handleRoam('river','stop')"/>
        </el-col>
        <el-col :span="24"><label>站内漫游</label></el-col>
        <el-col :span="24" class="video-control-bar roam">
          <icon v-if="stationRoamStatus == 0 || stationRoamStatus == 2" :data="play" class="video-btn"
                @click="handleRoam('station','play')"/>
          <icon v-if="stationRoamStatus == 1" :data="pause" class="video-btn"
                @click="handleRoam('station','pause')"/>
          <icon v-if="stationRoamStatus != 0" :data="stop" class="video-btn"
                @click="handleRoam('station','stop')"/>
        </el-col>
      </el-row>
    </el-popover>

    <el-popover placement="left-start" trigger="hover" width="auto">
      <template #reference>
        <div v-show="hasHandle" class="right-btn-item">
          <img :src="backgroundSrc" alt="" style="position: absolute;"/>
          <icon :data="handle"/>
        </div>
      </template>
      <el-radio-group v-model="simulationMode" size="large" @change="handleSimulationModeChange">
        <el-radio-button v-for="item in ['水位','雨量','流量','无']" :key="item" :label="item" :value="item"/>
      </el-radio-group>
    </el-popover>

    <div class="right-btn-item" @click="appStore.setExpand(!appStore.isExpand)">
      <img :src="backgroundSrc" alt="" style="position: absolute;"/>
      <icon :data="appStore.isExpand ? horizontalExpand : horizontalContract"/>
    </div>


    <div v-if="simulationMode !== '无'" class="slider-wrapper">
      <div :style="{'background-image': `url(${waterSliderBackground})`}" class="water-level-slider-container">
        <div class="water-level-slider-main">
          <el-slider v-model="waterLevel" :format-tooltip="formatWaterLevelTooltip" :marks="waterLevelMarks"
                     :max="waterLevelMax" :min="waterLevelMin" :step="waterLevelStep" height="90%" placement="right"
                     tooltip-class="slider-tooltip" vertical
                     @input="value => bus.emit('set-water-level', value)"/>
          <span class="water-level-slider-title">{{ simulationMode }}动态模拟</span>
        </div>
      </div>
    </div>

  </div>
</template>

<style lang="scss" scoped>
@use "@/assets/styles/video.scss";

.right-btn-container {
  display: flex;
  flex-direction: column;

  .right-btn-item {
    width: 50px;
    height: 50px;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    //background-size: 100% 100%;

    img {
      width: 100%;
      height: 100%;
    }

    svg {
      width: 1.2rem;
      height: 1.2rem;
      fill: #84b1e3;
      z-index: 1;
    }

    &:hover, &.active {
      svg {
        fill: #00cbe6;
      }

      img {
        background-color: rgba(0, 203, 230, 0.6);
        border-radius: 8px;
      }

      > .right-btn-option-list {
        display: block;
      }

    }

    .right-btn-option-list {
      display: none;
      position: absolute;
      top: 0;
      right: 2.2rem;
      width: 160px;
      padding: 0 20px;
    }

    .right-btn-option {
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 4px;
      background-color: #394139;
      text-align: center;
      color: #fff;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1rem;

      svg {
        width: 1rem;
        height: 1rem;
        margin-left: .5rem;
      }

    }

  }
}


.slider-wrapper {
  position: fixed;
  left: -150px;
  bottom: 0;

  .water-level-slider-container {
    background-size: 100% 100%;
    width: 120px;
    height: 240px;
    padding: 2%;

    .water-level-slider-main {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;

      .water-level-slider-title {
        writing-mode: vertical-lr;
        height: 60%;
        position: absolute;
        top: 50%;
        right: 8%;
        transform: translateY(-50%);
        color: #fff;
        font-weight: bold;
        font-size: 1rem;
        letter-spacing: 0.2em;
      }

    }

  }
}

.roam {
  padding: 5px 0;
}
</style>
<style>
.water-level-slider .el-slider__marks-text {
  width: 80px;
}

.slider-tooltip {
  background: #000;
  color: #fff;
}
</style>