sgxt_web/src/views/backOfficeSystem/JudgmentHome/tsypHome/components/ypHome.vue

<template>
  <!-- 研判类型 -->
  <div class="content">

    <div ref="searchBox" class="mt10">
      <Search :searchArr="searchConfiger" @submit="onSearch"> </Search>
    </div>
    <PageTitle :malginLeft="10" :height="35" backgroundColor="#ffff" :marginBottom="5" :marginTop="5">
      <template #left>
        <el-button  size="small" type="primary" @click="openAddModel('add')" :icon="CirclePlus">
          新增模型
        </el-button>
      </template>
      </PageTitle>
    <ul class="cntlsit mb10" v-if="show" v-infinite-scroll="load" :style="{ height: listHeight + 'px' }"
      v-loading="loading">
      <li class="model-card" v-for="(it, idx) in list" :key="idx">
        <div class="model-info">
          <div class="model-name">
            <strong>模型名称：</strong>{{ it.mxmc }}
          </div>
          <div class="model-type flex">
            <strong>模型类型：</strong>
            <DictTag :tag="false" :value="it.mxlx" :options="D_MXGL_MXLX" />
          </div>
        </div>
        <div class="model-image-container" @click="openYjList(it)">
          <img class="model-image" src="@/assets/images/mxbg.jpg" alt="">
        </div>
        <div class="model-actions">
          <span class="action-btn action-btn-view" @click.stop="openAddRule('', it)">
            <el-icon class="action-icon">
              <Document />
            </el-icon>查看规则
          </span>
          <span class="action-btn action-btn-edit" @click.stop="openAddModel('edit', it)">
            <el-icon class="action-icon">
              <ChatDotSquare />
            </el-icon>编辑
          </span>
          <span class="action-btn action-btn-edit" @click.stop="operationRule(it)">
            <el-icon class="action-icon">
              <Edit />
            </el-icon>执行
          </span>
          <span class="action-btn action-btn-delete" @click.stop="delDictItem(it.id)">
            <el-icon class="action-icon">
              <Files />
            </el-icon>删除
          </span>
        </div>
      </li>
      <div class="empty-container">
        <MOSTY.Empty :show="!loading && list.length <= 0"></MOSTY.Empty>
      </div>
      <div class="no-more-data" v-if="total == list.length && total > 0">暂时没有数据了！</div>
    </ul>
  </div>
  <AddModel ref="addModel" :dict="{ D_MXGL_MXLX }" @getLits="getLits" />

</template>

<script setup>
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import { getPageList, deleteEntity, getSsyjpzMxgzxl, SsyjselectList, getYjgzpzSelectList, getYjgzpzMxgzxl } from '@/api/model.js'
import emitter from "@/utils/eventBus.js";
import { CirclePlus } from '@element-plus/icons-vue'
import * as MOSTY from "@/components/MyComponents/index";
import Search from "@/components/aboutTable/Search.vue";
import { reactive, ref, onMounted, getCurrentInstance, watch, defineEmits } from "vue";
import AddModel from "../components/AddModel/addModel";
const emit = defineEmits(['change'])
const { proxy } = getCurrentInstance();
const { D_MXGL_MXLX, D_BZ_RYBQ } = proxy.$dict("D_MXGL_MXLX", "D_BZ_RYBQ")
const searchBox = ref(); //搜索框
const show = ref(false)
const listHeight = ref()
const SSYJ = '02'
const YJGZ = '01'
const searchConfiger = ref([
  { label: "模型名称", prop: "mxmc", placeholder: "请输入模型名称", showType: "input" },
  {
    label: "模型类型",
    prop: "mxlx",
    placeholder: "请选择模型类型",
    showType: "select",
    options: D_MXGL_MXLX
  },
]);
const PaginationConfig = reactive({
  pageCurrent: 1,
  pageSize: 8,
});
const total = ref(0)
const list = ref([])
const loading = ref(false);
const formData = ref({})
onMounted(() => {
  show.value = true;
  tabHeightFn();
  getLits()
})


const onSearch = (val) => {
  formData.value = { ...formData.value, ...val, };
  PaginationConfig.pageCurrent = 1;
  getLits();
}
const load = () => {
  if (total.value == list.value.length) return;
  PaginationConfig.pageCurrent++;
  // getLits();
}
const getLits = () => {
  let params = {
    ...PaginationConfig,
    ...formData.value
  }
  loading.value = true;

  getPageList(params).then(res => {
    let arr = res.records || [];
    list.value = PaginationConfig.pageCurrent == 1 ? arr : list.value.concat(arr);
    total.value = res.total;
    loading.value = false;
  }).catch(() => {
    loading.value = false;
  })
}



// 表格高度计算
const tabHeightFn = () => {
  listHeight.value = window.innerHeight - searchBox.value.offsetHeight - 230;
  window.onresize = function () {
    tabHeightFn();
  };
};
const delDictItem = (id) => {
  proxy.$confirm('是否删除该模型, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteEntity({ ids: [id] }).then(res => {
      proxy.$message.success("删除成功！")
      getLits()
    })
  }).catch(() => {
    proxy.$message({
      type: 'info',
      message: '已取消删除'
    });
  });

}
// 打开弹窗
const addModel = ref(null)
const openAddModel = (type, row) => {
  addModel.value.init(type, row)
}
// 打开规则弹窗
const openAddRule = (type, row) => {
  switch (row.mxlx) {
    case SSYJ:
      emitter.emit('changeModel', { row, name: '四色预警规则' })
      break;
    case YJGZ:
      emitter.emit('changeModel', { row, name: '预警规则' })
      break;
    default:
      break;
  }
}
const openYjList = (row) => {
  emitter.emit('changeModel', { row, name: '预警列表' })
}
const operationRule = async (row) => {
  if (row.mxlx == SSYJ) {
    try {
      const data = await SsyjselectList({ mxid: row.id })
      if (data.length > 0) {
        await getSsyjpzMxgzxl({ id: data[0].id })
        proxy.$message.success('运行成功')
      } else {
        proxy.$message.warning('未配置预警规则')
      }
    } catch (error) {
      console.log(error);
      proxy.$message.error('运行失败')
    }
  }
  if (row.mxlx == YJGZ) {
    try {
      const data = await getYjgzpzSelectList({ mxid: row.id })
      if (data.length > 0) {
        await getYjgzpzMxgzxl({ id: data[0].id })
        proxy.$message.success('运行成功')
      } else {
        proxy.$message.warning('未配置预警规则')
      }
    } catch (error) {
      console.log(error);

      proxy.$message.error('运行失败')
    }


  }


}



</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  margin-left: 10px;
  border-radius: 8px;
  box-sizing: border-box;

  .btnsBox {
    background: #fff;
    padding: 10px 5px;
    border-radius: 4px;
    margin-bottom: 10px;
  }

  .cntlsit {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: 20px;
    overflow: hidden;
    overflow-y: auto;
    background: #fff;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  // 模型卡片样式
  .model-card {
    width: 300px;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
      border-color: #409eff;
    }

    // 模型信息区域
    .model-info {
      padding: 16px;
      background-color: #fafafa;
      border-bottom: 1px solid #f0f0f0;

      .model-name,
      .model-type {
        margin-bottom: 8px;
        font-size: 14px;
        color: #606266;

        strong {
          color: #303133;
          font-weight: 500;
        }
      }

      .model-type {
        margin-bottom: 0;
      }
    }

    // 模型图片区域
    .model-image-container {
      cursor: pointer;
      overflow: hidden;
      transition: all 0.3s ease;

      .model-image {
        width: 100%;
        height: 168px;
        object-fit: cover;
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.05);
        }
      }
    }

    // 操作按钮区域
    .model-actions {
      text-align: right;
      padding: 12px 0px;
      border-top: 1px solid #f0f0f0;
      background-color: #fafafa;

      .action-btn {
        // margin-left: 12px;
        justify-content: space-between;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        padding: 4px 8px;
        border-radius: 4px;

        .action-icon {
          margin-right: 4px;
          font-size: 14px;
        }

        &:hover {
          opacity: 0.8;
        }
      }

      .action-btn-view,
      .action-btn-edit {
        color: #409eff;

        &:hover {
          background-color: #ecf5ff;
        }
      }

      .action-btn-delete {
        color: #f4ac47;

        &:hover {
          background-color: #fff7e6;
        }
      }
    }
  }

  // 空状态和无更多数据样式
  .empty-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 0;
  }

  .no-more-data {
    width: 100%;
    text-align: center;
    margin-bottom: 16px;
    color: #a29f9f;
    font-size: 13px;
  }
}
</style>