bxztApp/packages/screen/src/views/RiskWarning/Dialog/clearanceSituationDialog.vue

<template>
  <base-dialog
    v-model:visible="props.visible"
    title="管控情况"
    :table-data="tableData"
    :table-columns="tableColumns"
    :table-height="tableHeight"
    :total="total"
    :current-page="currentPage"
    :page-size="pageSize"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    @close="handleClose"
  >
    <!-- 筛选区域 -->
    <template #filter>
      <div class="filter-row">
        <div class="filter-item">
          <span class="filter-label">影响区域</span>
          <el-select
            :teleported="false"
            v-model="filterForm.district"
            placeholder="请选择"
            class="filter-select"
            clearable
            @change="handleFilterChange"
          >
            <el-option
              v-for="item in regionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <span class="filter-label">类型</span>
          <el-select
            :teleported="false"
            v-model="filterForm.type"
            placeholder="请选择"
            class="filter-select"
            clearable
            @change="handleFilterChange"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <span class="filter-label">管控措施</span>
          <el-select
            :teleported="false"
            v-model="filterForm.roadConditionType"
            placeholder="请选择"
            class="filter-select"
            clearable
            @change="handleFilterChange"
          >
            <el-option
              v-for="item in controlMeasureOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </template>

    <!-- 起止桩号列插槽 -->
    <template #stakeNo="{ row }">
      <el-tooltip :content="row.stakeNo" placement="top" :show-after="500">
        <span class="ellipsis-text">{{ row.stakeNo }}</span>
      </el-tooltip>
    </template>

    <!-- 路况位置列插槽 -->
    <template #location="{ row }">
      <el-tooltip :content="row.location" placement="top" :show-after="500">
        <span class="ellipsis-text">{{ row.location }}</span>
      </el-tooltip>
    </template>

    <!-- 管控措施列插槽 -->
    <template #roadConditionType="{ row }">
      <span :class="['control-tag', getControlClass(row.roadConditionType)]">
        {{ row.roadConditionType }}
      </span>
    </template>

    <!-- 操作列插槽 -->
    <template #operation="{ row }">
      <span class="detail-link" @click="handleDetail(row)">详情</span>
    </template>
  </base-dialog>
</template>

<script setup>
import { ref, computed, watch, inject } from 'vue';
import { Close } from '@element-plus/icons-vue';
import { regionOptions, typeOptions, controlMeasureOptions } from '../component/index.js';
import BaseDialog from '../component/baseDialog.vue';
import { request } from '@/utils/request';
import { formatDateTime } from '../component/index.js';
0;
// 注入日期范围
// const dateRange = inject('dateRange', ref([]));
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  dateRange: {
    type: Array,
    default: () => [],
  },
  itemFilterForm: {
    type: Object,
    default: () => {},
  },
});

const emit = defineEmits(['update:visible', 'close', 'detail', 'itemdata']);

// 筛选表单
const filterForm = ref({
  district: '',
  type: '',
  roadConditionType: '',
});
watch(
  () => props.itemFilterForm,
  newVal => {
    console.log('newVal', newVal);
    filterForm.value.roadConditionType = newVal.label.substring(0, newVal.label.length - 1) || '';
    currentPage.value = 1;
    fetchData();
  }
);

// 影响区域选项
// 已从 index.js 导入

// 类型选项
// 已从 index.js 导入

// 管控措施选项
// 已从 index.js 导入

// 表格高度
const tableHeight = ref(300);

// 表格列配置
const tableColumns = ref([
  { prop: 'id', label: '序号', width: '' },
  { prop: 'district', label: '影响区域', width: '' },
  { prop: 'routeNo', label: '线路编号', width: '' },
  { prop: 'stakeNo', label: '起止桩号', width: '', slot: 'stakeNo' },
  { prop: 'location', label: '路况位置', width: '', slot: 'location' },
  { prop: 'occurrenceTime', label: '发生时间', width: '' },
  // { prop: "routeNo2", label: "线路编号", width: "" },
  { prop: 'type', label: '类型', width: '' },
  {
    prop: 'roadConditionType',
    label: '管控措施',
    width: '',
    slot: 'roadConditionType',
  },
  { prop: 'operation', label: '操作', width: '', slot: 'operation' },
]);

// 表格数据
const tableData = ref([]);

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(36);

const totalPages = computed(() => Math.ceil(total.value / pageSize.value));

const visiblePages = computed(() => {
  const pages = [];
  const maxVisible = 5;
  let start = Math.max(1, currentPage.value - Math.floor(maxVisible / 2));
  let end = Math.min(totalPages.value, start + maxVisible - 1);

  if (end - start + 1 < maxVisible) {
    start = Math.max(1, end - maxVisible + 1);
  }

  for (let i = start; i <= end; i++) {
    pages.push(i);
  }
  return pages;
});

// 获取管控措施样式类
const getControlClass = measure => {
  const classMap = {
    全幅封闭: 'control-close',
    半幅封闭: 'control-half',
    正常通行: 'control-normal',
    限制通行: 'control-limit',
    限速限车: 'control-limit',
    告警阻拦: 'control-limit',
    半幅通行: 'control-half',
    限速: 'control-limit',
    告警阻拦: 'control-limit',
  };
  return classMap[measure] || '';
};

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false);
  emit('close');
};

// 查看详情
const handleDetail = item => {
  emit('detail', item);
  emit('itemdata', item);
};

// 分页操作
const handleSizeChange = val => {
  pageSize.value = val;
  fetchData();
};

const handleCurrentChange = val => {
  currentPage.value = val;
  fetchData();
};
// 筛选条件改变时触发
const handleFilterChange = () => {
  currentPage.value = 1;
  fetchData();
};
// 获取数据
const fetchData = async () => {
  try {
    let params = {
      start: '',
      end: '',
    };
    if (props.dateRange && props.dateRange.length === 2) {
      params.start = formatDateTime(props.dateRange[0]);
      params.end = formatDateTime(props.dateRange[1]);
    }

    const res = await request({
      url: '/snow-ops-platform/sm-event/dashboard/control-list',
      method: 'GET',
      params: {
        start: params.start,
        end: params.end,
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        // measureType: measureType,
        districtCode: filterForm.value.district, // 影响区域
        roadConditionType: filterForm.value.type, // 类型
        processingMeasure: filterForm.value.roadConditionType, // 管控措施
      },
    });

    if (res.code === '00000' && res.data) {
      const data = res.data;
      // 转换数据格式
      tableData.value = data.records.map((item, index) => {
        return {
          gl1SjId: item.sjId || '-',
          id: currentPage.value * pageSize.value - (pageSize.value - index - 1),
          district: item.affectedArea || '-',
          routeNo: item.routeNo || '-',
          stakeNo: `${item.startStakeNo}-${item.endStakeNo}` || '-',
          location: item.occurLocation || '-',
          occurrenceTime: item.occurTime || '-',
          // routeNo2: item.routeNo || "-",
          type: item.roadConditionType || '-',
          roadConditionType: item.processingMeasure || '-',
          expectRecoverTime: item.expectRecoverTime || '-',
          eventStatus: item.eventStatus || '-',
        };
      });
      total.value = data.total;
    }
  } catch (error) {
    console.error('获取管控情况数据失败:', error);
  }
};

watch(
  () => filterForm.value,
  newVal => {
    console.log('filterForm.value变化:', newVal);
    if (newVal) {
      currentPage.value = 1;
      fetchData();
    }
  }
);
</script>

<style lang="scss" scoped>
// 筛选区域
.filter-section {
  margin-bottom: 16px;

  .filter-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .filter-item {
    display: flex;
    align-items: center;
    gap: 8px;

    .filter-label {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.8);
      white-space: nowrap;
    }

    .filter-select {
      width: 120px;

      :deep(.el-input__wrapper) {
        background-color: rgba(30, 70, 120, 0.4);
        border: 1px solid rgba(64, 169, 255, 0.3);
        box-shadow: none;
        border-radius: 4px;

        .el-input__inner {
          color: #fff;
          font-size: 13px;

          &::placeholder {
            color: rgba(255, 255, 255, 0.4);
          }
        }

        .el-input__suffix {
          .el-icon {
            color: rgba(255, 255, 255, 0.6);
          }
        }
      }
    }
  }
}

// 省略号文本
.ellipsis-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  cursor: pointer;
}

// 管控措施标签
.control-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;

  &.control-close {
    background-color: rgba(255, 77, 79, 0.2);
    color: #ff4d4f;
    border: 1px solid rgba(255, 77, 79, 0.4);
  }

  &.control-half {
    background-color: rgba(255, 122, 0, 0.2);
    color: #ff7a00;
    border: 1px solid rgba(255, 122, 0, 0.4);
  }

  &.control-normal {
    background-color: rgba(82, 196, 26, 0.2);
    color: #52c41a;
    border: 1px solid rgba(82, 196, 26, 0.4);
  }

  &.control-limit {
    background-color: rgba(250, 219, 20, 0.2);
    color: #fadb14;
    border: 1px solid rgba(250, 219, 20, 0.4);
  }
}

// 详情链接
.detail-link {
  color: #40a9ff;
  cursor: pointer;
  font-size: 13px;
  transition: color 0.3s;

  &:hover {
    color: #69c0ff;
    text-decoration: underline;
  }
}
</style>