zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lcw

Browse Source
This commit is contained in:
lcw
2025-09-24 18:10:41 +08:00
parent 63cd5ba2a3
commit 16d05358d1
178 changed files with 5957 additions and 1293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
src/views/backOfficeSystem/JudgmentHome/tsypHome/components/ypHome.vue
View File

@ -11,48 +11,72 @@
<div ref="searchBox">
<Search :searchArr="searchConfiger" @submit="onSearch"> </Search>
</div>
<ul class="cntlsit mb10" v-if="show" v-infinite-scroll="load" :style="{ height: listHeight + 'px' }" v-loading="loading">
<li class="cntItem" v-for="(it, idx) in 10" :key="idx">
<div class="ww100" @click.stop="openAddModel('detail', it)"><img class="ww100" style="height: 168px;" src="@/assets/images/mxbg.jpg" alt=""></div>
<div class="foot">
<span class="ml10 pointer" style="color:#027ff0 ;" @click="openAddRule"><el-icon style="top: 2px;">
<Document />
</el-icon>查看规则</span>
<span class="ml10 pointer" style="color:#027ff0 ;" @click="openAddModel('edit', it)"><el-icon
style="top: 2px;">
<Edit />
</el-icon>编辑</span>
<span class="ml10 pointer" style="color:#f4ac47 ;"><el-icon style="top: 2px;">
<Files />
</el-icon>删除</span>
<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="openAddModel('detail', 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="ww100 flex just-center">
<div class="empty-container">
<MOSTY.Empty :show="!loading && list.length <= 0"></MOSTY.Empty>
</div>
<div class="tc ww100 mb4" style="color: #a29f9f;" v-if="total == list.length && total > 0">暂时没有数据了！</div>
<div class="no-more-data" v-if="total == list.length && total > 0">暂时没有数据了！</div>
</ul>
</div>
<AddModel ref="addModel" />
<Regulation ref="regulation" />
<AddModel ref="addModel" :dict="{ D_MXGL_MXLX }" @getLits="getLits" />
</template>
<script setup>
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import { getPageList, deleteEntity } 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 { qcckPost } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance, watch, defineEmits } from "vue";
import AddModel from "./addModel.vue";
import Regulation from "./regulation.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: "ypMc", placeholder: "请输入模型名称", showType: "input" },
{ label: "模型类型", prop: "ypLx", placeholder: "请输入模型类型", showType: "input" },
{ label: "模型名称", prop: "mxmc", placeholder: "请输入模型名称", showType: "input" },
{
label: "模型类型",
prop: "mxlx",
placeholder: "请选择模型类型",
showType: "select",
options: D_MXGL_MXLX
},
]);
const PaginationConfig = reactive({
pageCurrent: 1,
@ -86,7 +110,7 @@ const getLits = () => {
}
loading.value = true;
qcckPost(params, '/mosty-gsxt/tsyp/selectPage').then(res => {
getPageList(params).then(res => {
let arr = res.records || [];
list.value = PaginationConfig.pageCurrent == 1 ? arr : list.value.concat(arr);
total.value = res.total;
@ -105,16 +129,44 @@ const tabHeightFn = () => {
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 regulation = ref(null)
const openAddRule = (type, row) => {
regulation.value.init(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:'预警列表'})
}
</script>
@ -124,7 +176,7 @@ const openAddRule = (type, row) => {
height: 100%;
margin-top: 20px;
margin-left: 10px;
border-radius: 4px;
border-radius: 8px;
box-sizing: border-box;
.btnsBox {
@ -138,29 +190,134 @@ const openAddRule = (type, row) => {
display: flex;
flex-wrap: wrap;
align-content: start;
gap: 18px;
gap: 20px;
overflow: hidden;
overflow-y: auto;
background: #fff;
padding: 4px;
padding: 16px;
box-sizing: border-box;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.cntItem {
width: 300px;
border: 1px solid #ccc;
color: #787878;
border-radius: 4px;
overflow: hidden;
// 模型卡片样式
.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);
.foot {
text-align: right;
margin-top: 4px;
border-top: 1px solid #ccc;
padding: 4px;
box-sizing: border-box;
&: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>