Newer
Older
Nanping_sponge_HHDP / src / views / Sponge_screen / DialogTabs / component / ZhongheFenXi_component / operationAnaly.vue
@liyingjing liyingjing on 25 Oct 2 KB 海绵大屏
<template>
  <!-- 运维分析统计 -->
  <div class="operationAnaly">
    <!-- 表格 -->
    <div class="tableBox animate__animated animate__zoomIn">
      <el-table v-loading="tableLoading" :data="tableData" height="490">
        <el-table-column label="序号" prop="xh" />
        <el-table-column label="养护类型" prop="type" />
        <el-table-column label="计划养护时间" prop="date1" />
        <el-table-column label="实际养护时间" prop="date2" />
        <el-table-column label="实施人" prop="user1" />
        <el-table-column label="责任人" prop="user2" />
        <el-table-column label="养护单位" prop="unit" />
        <el-table-column label="行为分析" prop="xwfx">
          <template #default="scope">
            <span class="red">{{ scope.row.xwfx }}</span>
          </template>
        </el-table-column>
        <el-table-column label="评价" prop="pj" />
        <el-table-column label="轨迹" prop="gj">
          <template #default="scope">
            <el-icon><LocationInformation /></el-icon>
          </template>
        </el-table-column>
        <el-table-column label="报告" prop="report">
          <template #default="scope">
            <el-icon><Files /></el-icon>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>
<script setup>
import {} from "@/api/dataAnalysis/syntherticData";

const props = defineProps({
  searchDate: Array,
  stationCode: String,
});
const { proxy } = getCurrentInstance();

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  start: props.searchDate ? props.searchDate[0] : "",
  end: props.searchDate ? props.searchDate[1] : "",
});
const total = ref(2);
const tableData = ref([
  {
    xh: "1",
    type: "设备巡查",
    date1: "2023年3月",
    date2: "2023年4月",
    user1: "何庆功",
    user2: "朱方仁",
    unit: "新烽光电",
    xwfx: "定位异常",
    pj: "4星",
  },
  {
    xh: "2",
    type: "设备巡查",
    date1: "2023年5月",
    date2: "2023年6月",
    user1: "明亮",
    user2: "朱方仁",
    unit: "新烽光电",
    xwfx: "运维滞后",
    pj: "4星",
  },
]);
const tableLoading = ref(false);

// 获取列表数据
function getList(code) {
  console.log("运维分析统计---", code);
}

// 初始化
onMounted(() => {
  getList(props.stationCode);
});
defineExpose({
  getList,
});
onBeforeUnmount(() => {});
</script>
<style lang="scss" scoped>
.operationAnaly {
  width: 100%;
  .el-pagination {
    right: 25%;
  }
  .red {
    color: #ee6666;
  }
  .tableBox {
    .el-icon {
      cursor: pointer;
      font-size: 25px;
      color: #73c0de;
    }
    .el-scrollbar {
      height: calc(100vh - 495px);
    }
  }
}
</style>