You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
249 lines
8.0 KiB
249 lines
8.0 KiB
<template> |
|
<div class="container"> |
|
<header> |
|
<el-form :label-width="114"> |
|
<el-row> |
|
<el-col :span="6"> |
|
<el-form-item label="单位类型"> |
|
<el-select v-model="query.departGroupId" clearable> |
|
<el-option |
|
value="10" |
|
label="派出所" |
|
></el-option> |
|
<el-option |
|
value="11" |
|
label="交警大队" |
|
></el-option> |
|
<el-option |
|
value="13" |
|
label="刑侦大队" |
|
></el-option> |
|
<el-option |
|
value="14" |
|
label="禁毒大队" |
|
></el-option> |
|
<el-option |
|
value="15" |
|
label="治安大队" |
|
></el-option> |
|
<el-option |
|
value="16" |
|
label="人境大队" |
|
></el-option> |
|
<el-option value="12" label="其他"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item label="统计时间"> |
|
<date-time-range-picker-ext |
|
v-model="query.crtTime" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
<el-form-item label="单位"> |
|
<depart-tree-select |
|
v-model="query.departId" |
|
:check-strictly="false" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item label="单位简称"> |
|
<el-input |
|
v-model="query.departName" |
|
placeholder="请输入" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
</el-form> |
|
<div class="mb-25 flex end"> |
|
<div> |
|
<el-button type="primary" @click="getList"> |
|
<template #icon> |
|
<icon name="el-icon-Search" /> |
|
</template> |
|
查询</el-button |
|
> |
|
<el-button @click="reset">重置</el-button> |
|
</div> |
|
</div> |
|
</header> |
|
<div class="table-container" v-loading="mainLoading"> |
|
<el-table :data="list"> |
|
<el-table-column label="单位名称"> |
|
<template #default="{ row }"> |
|
<span |
|
>{{ row.parentDepartName }}/{{ |
|
row.departName |
|
}}</span |
|
> |
|
</template> |
|
</el-table-column> |
|
<el-table-column |
|
label="民警人数" |
|
prop="policeSize" |
|
align="center" |
|
width="160" |
|
/> |
|
<el-table-column |
|
label="协辅警人数" |
|
prop="auxSize" |
|
align="center" |
|
width="160" |
|
/> |
|
<el-table-column |
|
label="查实问题涉及人数" |
|
prop="verifyPoliceSize" |
|
align="center" |
|
width="160" |
|
/> |
|
<el-table-column |
|
label="查实问题数" |
|
prop="verifySize" |
|
align="center" |
|
width="160" |
|
/> |
|
<el-table-column label="风险指数" align="center" width="160"> |
|
<template #default="{ row }"> |
|
<span |
|
:style="{ color: getColor(score) }" |
|
v-if="row.score" |
|
>{{ Math.round(row.score) }}</span |
|
> |
|
<span v-else>-</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="操作" width="240"> |
|
<template #default="{ row }"> |
|
<el-button |
|
type="primary" |
|
link |
|
@click="handleShowProfile(row)" |
|
>问题详情</el-button |
|
> |
|
<el-button |
|
type="primary" |
|
link |
|
@click="handleShowNotification(row)" |
|
>预警提醒</el-button |
|
> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
<div class="flex end mt-8"> |
|
<el-pagination |
|
@size-change="getList" |
|
@current-change="getList" |
|
:page-sizes="[9, 18, 36]" |
|
v-model:page-size="query.size" |
|
v-model:current-page="query.current" |
|
layout="total, sizes, prev, pager, next" |
|
:total="total" |
|
v-if="list.length" |
|
> |
|
</el-pagination> |
|
</div> |
|
</div> |
|
|
|
<negativeInfo-depart-dialog v-model="show" :departId="activeRow.departId" /> |
|
|
|
<alarm-dialog |
|
v-model="showNotification" |
|
:departId="activeDepartId" |
|
@close="showNotification = false" |
|
/> |
|
|
|
<negative-dialog |
|
v-model="negativeShow" |
|
:id="activeNegativeId" |
|
@close="negativeShow = false" |
|
/> |
|
</template> |
|
<script lang="ts" setup> |
|
|
|
import vCharts from "vue-echarts"; |
|
import { |
|
listDepartNegative, |
|
getDepartProfile, |
|
listNegativeMonthly, |
|
} from "@/api/sensitivePerception/profileDepart"; |
|
|
|
import moment from "moment"; |
|
|
|
const query = ref({ |
|
current: 1, |
|
size: 10, |
|
departLevel: "3", |
|
crtTime: [ |
|
moment().startOf("year").format("YYYY-MM-DD HH:mm:ss"), |
|
moment().format("YYYY-MM-DD HH:mm:ss"), |
|
], |
|
}); |
|
const list = ref<any[]>([]); |
|
const total = ref(0); |
|
|
|
const mainLoading = ref(false); |
|
function getList() { |
|
mainLoading.value = true; |
|
listDepartNegative(query.value).then((data) => { |
|
list.value = data.records; |
|
total.value = data.total; |
|
mainLoading.value = false; |
|
}); |
|
} |
|
|
|
function reset() { |
|
query.value = { |
|
current: 1, |
|
size: 10, |
|
departLevel: "3", |
|
crtTime: [ |
|
moment().startOf("year").format("YYYY-MM-DD HH:mm:ss"), |
|
moment().format("YYYY-MM-DD HH:mm:ss"), |
|
], |
|
}; |
|
getList(); |
|
} |
|
|
|
let showNotification = ref(false); |
|
const activeDepartId = ref(""); |
|
const handleShowNotification = (row) => { |
|
showNotification.value = true; |
|
activeDepartId.value = row.departId; |
|
}; |
|
|
|
onMounted(() => { |
|
getList(); |
|
}); |
|
|
|
const activeRow = ref({}); |
|
const show = ref(false); |
|
|
|
async function handleShowProfile(row) { |
|
activeRow.value = row; |
|
show.value = true; |
|
|
|
} |
|
|
|
const negativeShow = ref(false); |
|
const activeNegativeId = ref(""); |
|
function handleAction(row) { |
|
negativeShow.value = true; |
|
activeNegativeId.value = row.id; |
|
} |
|
|
|
function getColor(val) { |
|
if (val < 60) { |
|
return "var(--success-color)"; |
|
} |
|
if (val < 80) { |
|
return "#e87749"; |
|
} |
|
return "var(--danger-color)"; |
|
} |
|
</script>
|
|
|