yjxp-web/src/views/disasterRiskMonitor/easyToFloodPoint.vue

<template>
  <div class="container">
    <div class="card">
      <div class="card-header">
        <i class="icon-line" />
        <div class="text">易涝点</div>
      </div>
      <div class="card-content2">
        <el-table
          :data="detailsData.dataList"
          header-cell-class-name="common-table-header"
          :row-class-name="getTableRowClass"
          table-layout="auto"
          class="common-table"
        >
          <el-table-column prop="area" align="center">
            <template #header>
              <div class="table-line" @click="showPicker = true">
                <div>{{ !!labelData ? labelData : "所有区县" }}</div>
                <i class="icon-down" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="易涝点名称"
            prop="flood_name"
            align="center"
          />
          <el-table-column label="提供单位" prop="unit" align="center" />
          <el-table-column label="视频" prop="publicTime" align="center">
            <template #default="scope">
              <div class="btn" @click="handlePlay(scope.row)">播放</div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          v-model:page="queryParams.current"
          v-model:limit="queryParams.size"
          :total="total"
          :pager-count="3"
          size="small"
          layout="prev, pager, next"
          @pagination="getTableDetail"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElTable, ElTableColumn } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import router from "@/router";
import { getEasyFlood } from "@/api/disasterRiskMonitor/easyFlood";

let detailsData = ref({
  dataList: []
});
let showPicker = ref(false);
let labelData = ref("");
let total = ref(0);
const liveMapState = reactive({
  show: false,
  activeIndex: 0,
  speed: 1,
  playing: false,
  data: []
});
const queryParams = ref({
  query: {
    area: "",
    keyword: ""
  },
  current: 1,
  size: 10
});
const initData = () => {
  getTableDetail();
  // detailsData.value.dataList = [
  //   { area: "茂南区", name: "高山铁路桥底", data1: "城市管理和综合执法局" },
  //   { area: "茂南区", name: "油城二路桥底", data1: "城市管理和综合执法局" },
  //   { area: "茂南区", name: "榕园东北侧", data1: "城市管理和综合执法局" },
  //   { area: "茂南区", name: "人民中路", data1: "城市管理和综合执法局" },
  //   { area: "化州市", name: "橘城南路", data1: "城市管理和综合执法局" },
  //   { area: "化州市", name: "下郭大道", data1: "城市管理和综合执法局" },
  //   { area: "化州市", name: "河西沙埚村", data1: "城市管理和综合执法局" }
  // ];
};
const handlePlay = row => {
  router.push({
    name: "EasyToFloodPointView",
    query: {
      latitude: row.lat,
      longitude: row.lng,
      name: encodeURIComponent(row.flood_name)
    }
  });
};
const getTableDetail = () => {
  getEasyFlood(queryParams.value).then(res => {
    detailsData.value.dataList = res.rows;
    total.value = res.total;
  });
};
onMounted(() => {
  initData();
});
const getTableRowClass = ({ rowIndex }) => {
  return rowIndex % 2 === 0 ? "" : "common-table-tr";
};
</script>

<style scoped lang="scss">
.container {
  height: calc(100vh);
  padding: 16px;
  .card {
    background-color: #ffffff;
    border: 1px solid #eaedf7;
    box-shadow: 0 0 4px 0 #4554661a;
    border-radius: 4px;
    padding: 2px;
    margin-top: 16px;
    &:first-child {
      margin-top: 0;
    }
    .card-header {
      font-size: 16px;
      color: #414f64;
      font-weight: bold;
      line-height: 26px;
      padding: 11px 10px;
      display: flex;
      align-items: center;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      background-image: linear-gradient(180deg, #f3f7fd 0%, #ffffff 100%);
      .icon-line {
        display: inline-block;
        width: 6px;
        height: 16px;
        background: url("@/assets/images/line.jpg") no-repeat;
        background-size: 100% 100%;
        margin-right: 3px;
      }
    }
    .card-content {
      padding-bottom: 13px;
    }
  }
  .btn {
    font-size: 14px;
    color: #2c81ff;
  }
}
</style>