yjhtgl-web/src/views/globalMap/RightMenu/RiverMonitor.vue

<template>
  <div class="menu-content">
    <div class="gradient-text common-dialog-title2">河道监测</div>
    <div class="flex-box">
      <div class="data-box1">
        <div class="box-text1">漫坝</div>
        <div class="box-text2">{{ validateNum(riverMonitorData.statusList[0]?.value) }}</div>
      </div>
      <div class="data-box2">
        <div class="box-text1">超保证</div>
        <div class="box-text2">{{ validateNum(riverMonitorData.statusList[1]?.value) }}</div>
      </div>
      <div class="data-box3">
        <div class="box-text1">超警戒</div>
        <div class="box-text2">{{ validateNum(riverMonitorData.statusList[2]?.value) }}</div>
      </div>
    </div>
    <div class="custom-table">
      <div class="th">
        <div class="td">名称</div>
        <div class="td">所属区县</div>
        <div class="td">汛限水位(m)</div>
        <div class="td">当前水位(m)</div>
        <div class="td">差值</div>
      </div>
      <div class="table-content">
        <div v-for="(item, index) in riverMonitorData.listData" :key="index" class="tr" @click="handleShowDialog(item)">
          <div class="td">{{ item.name }}</div>
          <div class="td">{{ item.area }}</div>
          <div class="td td-text">{{ item.warningLevel }}</div>
          <div class="td td-text">{{ item.waterLevel }}</div>
          <div :class="item.warningLevel > item.waterLevel ? 'td td-text text-green' : 'td td-text text-danger'">{{ item.waterDiff }}</div>
        </div>
      </div>
    </div>
  </div>
  <Dialog v-model="showDialog" type="xl" title="河道监测" draggable hide-footer>
    <div class="flex">
      <div class="detail-container">
        <div class="flex">
          <div class="info-box">
            <div class="info-header">
              <div class="gradient-text info-title">测站名称：{{ selectRow.name }}</div>
            </div>
            <div class="info-content">
              <div class="info-item">
                <div>水系河流名称：</div>
                <div>{{ selectRow.data1 }}</div>
              </div>
              <div class="info-item">
                <div>流域名称：</div>
                <div>{{ selectRow.data2 }}</div>
              </div>
              <div class="info-item">
                <div>水系站址：</div>
                <div>{{ selectRow.data3 }}</div>
              </div>
              <div class="info-item">
                <div>超警戒水位：</div>
                <div>{{ selectRow.waterDiff }}</div>
              </div>
              <div class="info-item">
                <div>时间：</div>
                <div>{{ selectRow.data5 }}</div>
              </div>
            </div>
          </div>
          <div class="box1">
            <div class="box1-title">降雨过程实况</div>
            <Chart :option="chartOption1" style="width: 100%; flex: 1" />
          </div>
        </div>
        <div>
          <div class="box2">
            <div class="box2-title">过去24小时河流水位变化图</div>
            <Chart :option="chartOption2" style="width: 100%; height: 400px" />
          </div>
        </div>
      </div>
      <div class="right-box">
        <div style="display: flex; align-items: center">
          <div class="flex-box2">
            <div class="title2">附近视频</div>
          </div>
          <el-select v-model="queryParams2.radius" class="custom-select" popper-class="custom-popper" :teleported="false" style="width: 210px">
            <el-option v-for="item in radiusOption" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="video-box">
          <video-container :video-data="videoMonitorData" />
        </div>
      </div>
    </div>
  </Dialog>
</template>

<script lang="ts" setup name="RiverMonitor">
import { option1, option2 } from './echartOptions';
import { getRiverCourseLevel, getRiverList, getRiverWaterStatus } from '@/api/globalMap/riverMonitor';
import { parseTime, validateNum } from '@/utils/ruoyi';
import { getVideoInfo } from '@/api/globalMap';

// 请求参数
const queryParams = reactive({
  area: ''
});
// 总数量
let total = ref(0);

// 数据
const riverMonitorData = reactive({
  time: '',
  statusList: [],
  listData: []
});
// 获取数据
const initData = async () => {
  getRiverList(queryParams).then((res) => {
    riverMonitorData.listData = res.data.list;
  });
  getRiverWaterStatus().then((res) => {
    riverMonitorData.statusList = res.rows || [];
  });
};

initData();

// 弹窗数据
const detailData = reactive({
  name: '茂名',
  data1: '粤西沿海',
  data2: '粤西沿海诸河',
  data3: '广东省茂名市茂南区站',
  data4: '-1.32m',
  data5: '2024-08-23 10:00:00'
});
let chartOption1 = ref(option1);
let chartOption2 = ref(option2);
let showDialog = ref(false);
let videoMonitorData = ref([]);
const radiusOption = reactive([
  { label: '500米', value: '500' },
  { label: '1000米', value: '1000' },
  { label: '1500米', value: '1500' },
  { label: '2000米', value: '2000' }
]);
// 请求参数
const queryParams2 = reactive({
  current: 1,
  size: 9,
  location: '',
  radius: '500'
});
let selectRow = ref({
  name: '',
  waterDiff: ''
});
const handleShowDialog = (row) => {
  showDialog.value = false;
  selectRow.value = {
    name: '',
    waterDiff: ''
  };
  videoMonitorData.value = [];
  nextTick(() => {
    chartOption1.value.xAxis.data = ['12时', '15时', '18时', '21时', '0时', '3时', '6时', '9时'];
    chartOption1.value.series[0].data = [123, 232, '', '', '', '', '', ''];
    chartOption1.value.series[1].data = [123, 232, '', '', '', '', '', ''];
    chartOption1.value.series[2].data = [123, 232, '', '', '', '', '', ''];
    getRiverCourseLevel({ code: row.code }).then((res) => {
      const data = res.data.list;
      const time = [];
      const resultData = [];
      selectRow.value = data;
      data.forEach((item) => {
        time.push(parseTime(item.time, '{h}'));
        resultData.push(item.water_level);
      });
      let warning = [];
      resultData.forEach(() => {
        warning.push(resultData[0] * 1.5);
      });
      chartOption2.value.xAxis[0].data = time;
      chartOption2.value.series[0].data = resultData;
      chartOption2.value.series[1].data = warning;
      // chartOption2.value.series[0].markLine.data[0].yAxis = row.warningLevel;
    });
    queryParams2.location = `POINT(${row.longitude} ${row.latitude})`;
    getVideoInfo(queryParams2).then((res) => {
      res.data?.list.forEach((item) => {
        item.video_code = item.indexcode;
      });
      videoMonitorData.value = res.data?.list;
    });
    showDialog.value = true;
  });
};
</script>

<style lang="scss" scoped>
.menu-content {
  width: 574px;
  height: 581px;
  background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
  background-size: 100% 100%;
  padding: 60px 10px 10px 15px;
  font-size: 14px;
  position: relative;
  color: #ffffff;
}
.detail-container {
  font-size: 16px;
  padding: 0;
  .dialog-content {
    display: flex;
  }
  .info-box {
    width: 260px;
    height: 200px;
    background: url('@/assets/images/map/rightMenu/box2.png') no-repeat;
    background-size: 100% 100%;
    padding: 11px;
    .info-header {
      width: 167px;
      height: 30px;
      padding-left: 25px;
      padding-top: 5px;
      background: url(@/assets/images/map/rightMenu/titleBox1.png) no-repeat;
      background-size: 100% 100%;
      .info-title {
        font-size: 18px;
      }
    }
    .info-content {
      padding: 0 10px 6px 10px;
      font-size: 16px;
      color: #a8ccde;
    }
    .info-item {
      display: flex;
      align-items: center;
      padding: 5px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .box1 {
    width: 260px;
    height: 200px;
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    margin-right: 10px;
    .box1-title {
      height: 27px;
      background: url('@/assets/images/map/rightMenu/titleBox2.png') no-repeat;
      background-size: 135px 20px;
      padding-left: 28px;
      font-size: 16px;
      color: #f4f7fa;
    }
  }
  .box2 {
    width: 530px;
    margin-top: 10px;
    margin-right: 10px;
    .box2-title {
      height: 27px;
      background: url('@/assets/images/map/rightMenu/titleBox2.png') no-repeat;
      background-size: 135px 20px;
      padding-left: 28px;
      font-size: 16px;
      color: #f4f7fa;
    }
  }
}
.right-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  .flex-box2 {
    background: url('@/assets/images/map/rightMenu/titleBox2.png') no-repeat;
    background-size: 135px 20px;
    padding-left: 28px;

    display: flex;
    align-items: center;
    .title2 {
      font-size: 16px;
      flex-shrink: 0;
      margin-right: 10px;
      color: #f4f7fa;
      padding-bottom: 23px;
    }
  }
  .video-box {
    margin-top: 10px;
    height: 565px;
    display: flex;
    flex-wrap: wrap;
  }
}
.flex-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  .data-box1,
  .data-box2,
  .data-box3 {
    width: 186px;
    height: 58px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 20px;
    padding-left: 66px;
    padding-right: 20px;
    &:last-child {
      margin-right: 0;
    }
    .box-text1 {
      color: #fff;
      font-size: 14px;
      width: 50px;
      &::after {
        content: '';
        width: 1px;
        height: 48px;
        background: url('@/assets/images/map/rightMenu/line.png') no-repeat;
        background-size: 100% 100%;
        margin: 0 30px;
      }
    }
    .box-text2 {
      /* 设置字体透明 */
      color: transparent;
      /* 设置线性渐变，从红色渐变到蓝色 */
      background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
      /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
      -webkit-background-clip: text;
      /* 非Webkit内核浏览器需要使用标准前缀 */
      background-clip: text;
      /* 把当前元素设置为行内块，以便能够应用背景 */
      display: inline-block;
      font-family: 'YouSheBiaoTiHei';
      font-size: 16px;
    }
  }

  .data-box1 {
    background: url('@/assets/images/map/rightMenu/dataBox1.png') no-repeat;
    background-size: 100% 100%;
  }
  .data-box2 {
    background: url('@/assets/images/map/rightMenu/dataBox2.png') no-repeat;
    background-size: 100% 100%;
  }
  .data-box3 {
    background: url('@/assets/images/map/rightMenu/dataBox3.png') no-repeat;
    background-size: 100% 100%;
  }
}

.custom-table {
  width: 550px;
  .table-content {
    height: 290px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .th {
    background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    padding: 7px 12px;
    height: 32px;
  }
  .tr {
    background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    padding: 7px 12px;
    &:hover {
      background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .td {
    flex: 1;
    color: #edfaff;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .td-text {
    /* 设置字体透明 */
    color: transparent;
    /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
    -webkit-background-clip: text;
    /* 非Webkit内核浏览器需要使用标准前缀 */
    background-clip: text;
    font-family: 'YouSheBiaoTiHei';
    /* 设置线性渐变，从红色渐变到蓝色 */
    background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
    font-size: 14px;
  }
  .text-green {
    background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
  }
  .text-danger {
    background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
  }
}

//.custom-select {
//  width: 148px;
//  height: 38px;
//  line-height: 38px;
//  :deep(.el-select__wrapper) {
//    background-color: #081b41;
//    box-shadow: 0 0 0 1px #126cf7 inset;
//  }
//  :deep(.el-select__placeholder) {
//    font-size: 30px;
//    color: #eaf3fc;
//  }
//}
</style>