371 lines
9.0 KiB
Vue
371 lines
9.0 KiB
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>
|