feat:更细一次

This commit is contained in:
2025-12-12 21:08:46 +08:00
parent 8b56e84690
commit e26bacab0a
3 changed files with 444 additions and 0 deletions

View File

@ -0,0 +1,83 @@
<template>
<div class="dialog" v-if="dialogForm">
<div class="head_box">
<span class="title">积分排名{{ title }} </span>
<div>
<el-button size="small" @click="close">关闭</el-button>
</div>
</div>
<div class="form_cnt">
<FormMessage :formList="formData" v-model="listQuery" ref="elform">
</FormMessage>
</div>
</div>
</template>
<script setup>
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { jfpmSelectList } from "@/api/yj.js";
import { ref, defineExpose, reactive, defineEmits, getCurrentInstance, watch } from "vue";
const emit = defineEmits(["updateDate"]);
const props = defineProps({
dict: {
type: Object,
default: () => { }
}
});
const { proxy } = getCurrentInstance();
const dialogForm = ref(false);
const formData = ref([])
watch(() => props.dict, (res) => {
if (res) {
formData.value = [
{ label: "排名", prop: "pm", type: "input" },
{ label: "姓名", prop: "xm", type: "input" },
{ label: "部门", prop: "bm", type: "input" },
{ label: "积分", prop: "jf", type: "input", lx: "number" },
{ label: "身份类型", prop: "sflx", type: "input" },
{ label: "标签颜色", prop: "bqys", type: "select", options: props.dict.D_GS_SSYJ },
{ label: "处置状态", prop: "czzt", type: "select", options: props.dict.D_GSXT_YJXX_CZZT },
{ label: "所属部门", prop: "ssbm", type: "input" },
{ label: "所属县局", prop: "ssxgaj", type: "input" },
{ label: "所属市局", prop: "sssgaj", type: "input" },
{ label: "积分时间", prop: "jfsj", type: "input" },
{ label: "积分分值", prop: "jffz", type: "input", lx: "number" },
]
}
}, { deep: true, immediate: true })
const listQuery = ref({});
const loading = ref(false);
const elform = ref();
const title = ref("详情");
const init = (type, row) => {
dialogForm.value = true;
jfpmSelectList(row.id).then(res => {
listQuery.value = {
...res,
jffz: res.jffz
}
})
};
// 关闭
const close = () => {
listQuery.value = {};
loading.value = false;
dialogForm.value = false;
listQuery.value = {}
};
defineExpose({ init });
</script>
<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
::v-deep {
.el-form-item__content {
align-items: normal;
}
}
</style>

View File

@ -0,0 +1,57 @@
<template>
<el-dialog :title="`积分详情(${pageData.tableData.length}`" v-model="dialogVisible" width="60%">
<MyTable
:tableData="pageData.tableData"
:tableColumn="pageData.tableColumn"
:tableHeight="pageData.tableHeight"
:key="pageData.keyCount"
:tableConfiger="pageData.tableConfiger"
>
</MyTable>
</el-dialog>
</template>
<script setup>
import { qcckGet } from "@/api/qcckApi.js";
import MyTable from "@/components/aboutTable/MyTable.vue";
import { ref , reactive , defineExpose} from 'vue'
const dialogVisible = ref(false)
const pageData = reactive({
tableData: [{jfbh:'JFBH-43',xm:'张三',bm:'刑侦支队',jf:'95',sflx:'重点人员',bqys:'红',czzt:'01',jfsj:'2023-08-24 15:00:00',jffz:'95'}], //表格数据
keyCount: 0,
tableConfiger: {
rowHieght: 61,
loading: false,
haveControls: false,
},
tableHeight:600,
total: 0,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
}, //分页
tableColumn: [
{ label: "积分编号", prop: "jfbh"},
{ label: "积分时间", prop: "jfsj"},
{ label: "积分内容", prop: "jfnr"},
{ label: "积分分值", prop: "jffz"},
{ label: "积分类型", prop: "jflx"},
{ label: "操作员", prop: "czy"},
]
});
const init = (row) => {
dialogVisible.value = true;
pageData.tableConfiger.loading = true;
pageData.tableData = []
qcckGet({jfid:row.id},'/mosty-gsxt/jfpm/jfmx/selectList').then((res)=>{
pageData.tableData = res || [];
pageData.tableConfiger.loading = false;
}).catch(()=>{
pageData.tableConfiger.loading = false;
})
}
defineExpose({
init
})
</script>

View File

@ -0,0 +1,304 @@
<template>
<div>
<div class="titleBox">
<PageTitle title="积分排名">
<el-button type="success" @click="openSearch">
<Search style="width: 1em; height: 1em; margin-right: 8px" />
<span style="vertical-align: middle" v-if="!search">搜索</span>
<span style="vertical-align: middle" v-else>关闭搜索</span>
</el-button>
</PageTitle>
</div>
<!-- 搜索 -->
<div ref="searchBox" v-if="search">
<Searchs :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
<template #defaultSlot>
<el-form-item label="预警类型" prop="yjlx">
<el-select v-model="listQuery.yjlx" placeholder="请选择预警类型">
<el-option v-for="item in D_BZ_YJLX" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<!-- <el-select @change="gettbGsxtBqglSelectList" v-model="queryFrom.sfdl" placeholder="请选择身份类型"
style="width: 100%">
<el-option :label="item.label" :value="item.value" v-for="(item, index) in bqLbData.bqDl" :key="index" />
</el-select> -->
</template>
<!-- <template #nameSlot>
<el-select v-model="queryFrom.sfxl" placeholder="请选择身份类型" style="width: 100%">
<el-option :label="item.label" :value="item.value" v-for="(item, index) in bqLbData.bqXl" :key="index" />
</el-select>
</template> -->
</Searchs>
</div>
<!-- 表格 -->
<div class="tabBox" :style="{ height: (pageData.tableHeight + 40) + 'px' }">
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
<template #sfcs="{ row }">
<span style="color: #0072ff;" @click="handleClick(row)">{{ row.sfcs }}</span>
</template>
<template #yjjb="{ row }">
<DictTag :value="row.yjjb" :tag="false" :color="bqYs(row.yjjb)" :options="D_BZ_YJJB" />
</template>
<template #yjlx="{ row }">
<DictTag :value="row.yjlx" :tag="false" :options="D_GS_ZDQT_YJLB" />
</template>
<template #yjlb="{ row }">
<DictTag :value="row.yjlb" :options="D_BZ_YJLX" />
</template>
<!-- <template #yjjb="{ row }">
<DictTag :value="row.yjjb" :tag="false" :color="bqYs(row.yjjb)" :options="D_BZ_YJJB" />
</template> -->
<template #yjtp="{ row }">
<template v-if="!row.yjtp || row.yjtp.includes('baidu')">
<img src="@/assets/images/car.png" width="30" height="30" />
</template>
<el-image style="width: 30px; height:30px" :src="row.yjtp" :preview-src-list="[row.yjtp]" show-progress>
<template #error>
<div class="image-slot error">
<img src="@/assets/images/car.png" width="30" height="30" />
</div>
</template>
</el-image>
</template>
<template #hplx="{ row }">
<DictTag :value="row.hplx" :options="D_BZ_HPZL" />
</template>
<template #controls="{ row }">
<el-link type="success" @click="handleQsFk(row, '签收')" v-if="row.czzt == '01'">签收</el-link>
<!-- <el-link type="primary" @click="openAddFrom(row)">详情</el-link> -->
</template>
</MyTable>
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
...pageData.pageConfiger,
total: pageData.total
}"></Pages>
</div>
</div>
<!-- <Detail ref="detailRef" /> -->
<!-- <HolographicArchive v-model="assessShow" :dataList="dataList" /> -->
<!-- <FkDialog @change="getList" lx="03" /> -->
<!-- <AddFrom ref="addModelRef" :dict="{D_BZ_YJLX, D_BZ_YJJB,D_GS_SSYJ}"/> -->
</template>
<script setup>
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import Searchs from "@/components/aboutTable/Search.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import DictTag from "@/components/DictTag/index.vue";
import { bqYs } from '@/utils/tools'
// import FkDialog from "@/views/backOfficeSystem/fourColorManage/warningControl/centerHome/components/fkDialog.vue";
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import { yjzxSfyjSelectList } from "@/api/yj.js";
import { tbGsxtBqglSelectList } from '@/api/zdr'
// import Detail from './components/detail.vue'
import { watch } from "vue";
import emitter from "@/utils/eventBus.js";
import { holographicProfileJump } from "@/utils/tools.js"
const { proxy } = getCurrentInstance();
const searchBox = ref();
const { D_BZ_YJLX, D_BZ_HPZL, D_GS_SSYJ, D_GS_ZDQT_YJLB } = proxy.$dict("D_BZ_YJLX", "D_BZ_HPZL", "D_GS_SSYJ", "D_GS_ZDQT_YJLB")
// 搜索配置
const searchConfiger = ref([
{ label: "姓名", prop: 'ryxm', placeholder: "请输入姓名", showType: "input" },
{ label: "身份证号码", prop: 'rysfzh', placeholder: "请输入身份证号码", showType: "input" },
{ label: "车牌号", prop: 'cph', placeholder: "请输入车牌号", showType: "input" },//yjClcph
{ label: "预警类型", prop: 'yjlb', placeholder: "请选择预警类型", showType: "select", options: [] },
{ label: "号牌类型", prop: 'hplx', placeholder: "请选择号牌类型", showType: "select", options: [] },
]);
const queryFrom = ref({});
const bqLbData = ref({});
const pageData = reactive({
tableData: [], //表格数据
keyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "null",
loading: false,
haveControls: true
},
total: 0,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
}, //分页
controlsWidth: 300, //操作栏宽度
tableColumn: [
// { label: "预警图片", prop: "yjtp", showSlot: true, width: 100 },
// { label: "预警时间", prop: "yjsj", showOverflowTooltip: true, width: 150 },
{ label: "姓名", prop: "ryxm", showOverflowTooltip: true },
{ label: "车牌号", prop: "cph", showOverflowTooltip: true },
// { label: "号牌类型", prop: "hplx", showOverflowTooltip: true },
// { label: "身份证号", prop: "rysfzh", showOverflowTooltip: true },
// { label: "部门名称", prop: "ssbm", showOverflowTooltip: true },
// { label: "预警地址", prop: "yjdz", showOverflowTooltip: true },
{ label: "预警标签", prop: "yjbq", showOverflowTooltip: true },
{ label: "预警级别", prop: "yjjb", showSolt: true, showOverflowTooltip: true },
{ label: "预警类型", prop: "yjlb", showSolt: true },
// { label: "身份次数", prop: "sfcs", showSlot: true },
{ label: "身份分值", prop: "sffz", showSolt: true },
{ label: "预警内容", prop: "yjnr", showOverflowTooltip: true },
]
});
onMounted(() => {
tabHeightFn();
// 初始化搜索配置的选项
searchConfiger.value[3].options = D_BZ_YJLX;
searchConfiger.value[4].options = D_BZ_HPZL;
getList()
});
const changeNo = (val) => {
pageData.pageConfiger.pageCurrent = val;
getList()
}
const changeSize = (val) => {
pageData.pageConfiger.pageSize = val;
getList()
}
// 获取标签大类数据
const gettbGsxtBqglSelectList = (val) => {
tbGsxtBqglSelectList({ sflx: val }).then(res => {
bqLbData.value.bqXl = res
})
}
// 获取数据
const getList = (val) => {
pageData.tableConfiger.loading = true;
const promes = {
...val,
...queryFrom.value,
pageCurrent: pageData.pageConfiger.pageCurrent,
pageSize: pageData.pageConfiger.pageSize
}
qcckPost(promes, '/mosty-gsxt/tbYjxx/selectYjxxFzPage').then((res) => {
pageData.tableData = res.records || [];
pageData.total = res.total;
pageData.tableConfiger.loading = false;
}).catch(() => {
pageData.tableConfiger.loading = false;
})
}
// 处理签收
const handleQsFk = (val, type) => {
proxy.$confirm("是否确定转重点人?", "警告", { type: "warning" }).then(() => {
// qcckPost({ id: val.id }, "/mosty-gsxt/jfpm/yjqs").then(() => {
// proxy.$message({ type: "success", message: "转重点人成功" });
// getList()
// });
})
}
// 发送指令
const showDialog = ref(false)
const itemData = ref()
const semdFqzlRef = ref()
const tacitly = {
title: 'jfbt',
instructionContent: 'jfnr'
}
const submit = () => {
semdFqzlRef.value.getsendFqzl()
}
const closeFszl = () => {
semdFqzlRef.value.close()
}
const addModelRef = ref()
const openAddFrom = (row) => {
emitter.emit('openAddFrom', row)
}
const handleClick = (row) => {
console.log('点击了身份:', row);
}
// 根据身份分值设置行样式
const getRowClassName = (row) => {
if (!row.row.sffz) return '';
const score = Number(row.row.sffz);
if (score >= 90) return 'score-level-high';
if (score >= 70) return 'score-level-medium';
if (score >= 50) return 'score-level-low';
return '';
};
// 搜索栏
const search = ref(false)
const openSearch = () => {
search.value = !search.value
nextTick(() => {
tabHeightFn()
})
}
// 表格高度计算
const tabHeightFn = () => {
if (search.value) {
pageData.tableHeight = window.innerHeight - (searchBox.value?.offsetHeight || 0) - 250;
} else {
pageData.tableHeight = window.innerHeight - 250;
}
window.onresize = function() {
tabHeightFn();
};
};
// 搜索
const onSearch = () => {
getList()
}
defineExpose({
getList
})
</script>
<style>
.el-loading-mask {
background: rgba(0, 0, 0, 0.5) !important;
}
/* 积分级别的行样式 */
.score-level-high {
background-color: rgba(255, 215, 0, 0.1) !important;
}
.score-level-high:hover {
background-color: rgba(255, 215, 0, 0.15) !important;
}
.score-level-medium {
background-color: rgba(100, 149, 237, 0.1) !important;
}
.score-level-medium:hover {
background-color: rgba(100, 149, 237, 0.15) !important;
}
.score-level-low {
background-color: rgba(255, 193, 7, 0.1) !important;
}
.score-level-low:hover {
background-color: rgba(255, 193, 7, 0.15) !important;
}
/* 确保行样式应用到所有单元格 */
.score-level-high td,
.score-level-medium td,
.score-level-low td {
background-color: transparent !important;
}
</style>