Merge branch 'main' of http://61.139.16.27:26684/zy_oyj/sgxt_web
This commit is contained in:
@ -221,7 +221,7 @@ const delDictItem = (id) =>{
|
|||||||
.list-item {
|
.list-item {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
height: 270px;
|
height: 296px;
|
||||||
width: 380px;
|
width: 380px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
@ -253,8 +253,11 @@ const delDictItem = (id) =>{
|
|||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
background-color: rgb(242, 242, 242);
|
background-color: rgb(242, 242, 242);
|
||||||
width: 260px;
|
width: 260px;
|
||||||
height: calc(100% - 25px);
|
height: 80px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
.mid {
|
.mid {
|
||||||
border: 1px dashed rgb(124, 195, 253);
|
border: 1px dashed rgb(124, 195, 253);
|
||||||
|
|||||||
@ -1,158 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="dialog" v-if="showDialog">
|
|
||||||
<div class="head_box">
|
|
||||||
<span class="title">查看详情 </span>
|
|
||||||
<div>
|
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="listBox">
|
|
||||||
<div ref="searchBox">
|
|
||||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
|
|
||||||
</div>
|
|
||||||
<!-- 表格 -->
|
|
||||||
<div class="tabBox">
|
|
||||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
|
||||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
|
||||||
<template #jqlbdm="{ row }">
|
|
||||||
<DictTag :tag="false" :value="row.jqlbdm" :options="dict.JQLB" />
|
|
||||||
</template>
|
|
||||||
<template #controls="{ row }">
|
|
||||||
<el-link type="primary" @click="addEdit( row)">详情</el-link>
|
|
||||||
</template>
|
|
||||||
</MyTable>
|
|
||||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
|
||||||
...pageData.pageConfiger,
|
|
||||||
total: pageData.total
|
|
||||||
}"></Pages>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<Particulars ref="particulars" :dic="dict"/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
|
||||||
import Pages from "@/components/aboutTable/Pages.vue";
|
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
|
||||||
import Particulars from "./particulars.vue";
|
|
||||||
import { qcckPost } from "@/api/qcckApi.js";
|
|
||||||
import { ref, reactive, nextTick, getCurrentInstance } from 'vue';
|
|
||||||
import { useRouter, useRoute } from 'vue-router'
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
const showDialog = ref(false)
|
|
||||||
const searchBox = ref(); //搜索框
|
|
||||||
const searchConfiger = ref(
|
|
||||||
[
|
|
||||||
{ label: "研判名称", prop: 'ypmc', placeholder: "请输入研判名称", showType: "input" },
|
|
||||||
]);
|
|
||||||
const props=defineProps({
|
|
||||||
dict: {
|
|
||||||
type: Object,
|
|
||||||
default: ()=>{}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const emit = defineEmits(['getData'])
|
|
||||||
const ypPremsess = ref()
|
|
||||||
const onSearch = (val) => {
|
|
||||||
ypPremsess.value = val
|
|
||||||
getList()
|
|
||||||
}
|
|
||||||
const router = useRouter()
|
|
||||||
const route = useRoute()
|
|
||||||
const pageData = reactive({
|
|
||||||
tableData: [{ypmc:"xxx"}], //表格数据
|
|
||||||
keyCount: 0,
|
|
||||||
tableConfiger: {
|
|
||||||
rowHieght: 61,
|
|
||||||
showSelectType: "null",
|
|
||||||
loading: false,
|
|
||||||
},
|
|
||||||
total: 0,
|
|
||||||
pageConfiger: {
|
|
||||||
pageSize: 20,
|
|
||||||
pageCurrent: 1
|
|
||||||
}, //分页
|
|
||||||
controlsWidth: 160, //操作栏宽度
|
|
||||||
tableColumn: [
|
|
||||||
{ label: "研判名称", prop: "ypmc" },
|
|
||||||
{ label: "报警时间", prop: "bjsj" },
|
|
||||||
{ label: "报警地址", prop: "bjdz" },
|
|
||||||
{ label: "警情类型", prop: "jqlbdm",showSolt:true },
|
|
||||||
{ label: "报警内容", prop: "bjnr", showOverflowTooltip: true },
|
|
||||||
{ label: "报警电话", prop: "bjdh" },
|
|
||||||
{ label: "报警时间", prop: "bjsj" },
|
|
||||||
|
|
||||||
]
|
|
||||||
});
|
|
||||||
const item = ref({})
|
|
||||||
const sjlx = ref([])
|
|
||||||
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 280;
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeNo = (val) => {
|
|
||||||
pageData.pageConfiger.pageCurrent = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
const changeSize = (val) => {
|
|
||||||
pageData.pageConfiger.pageSize = val;
|
|
||||||
getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
const getList = () => {
|
|
||||||
let params = {
|
|
||||||
ypid: item.value.id,
|
|
||||||
ypmc:ypPremsess.value,
|
|
||||||
pageCurrent: pageData.pageConfiger.pageCurrent,
|
|
||||||
pageSize: pageData.pageConfiger.pageSize,
|
|
||||||
}
|
|
||||||
pageData.tableConfiger.loading = true;
|
|
||||||
qcckPost(params, '/mosty-gsxt/jjdbYp/getPageList').then(res => {
|
|
||||||
pageData.tableConfiger.loading = false;
|
|
||||||
pageData.tableData = res.records || []
|
|
||||||
pageData.total = res.total;
|
|
||||||
}).catch(() => {
|
|
||||||
pageData.tableConfiger.loading = false;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const close = () => {
|
|
||||||
pageData.tableData = [];
|
|
||||||
showDialog.value = false;
|
|
||||||
router.replace(route.query)
|
|
||||||
// emit("getData")
|
|
||||||
}
|
|
||||||
|
|
||||||
const init = (val, lxs) => {
|
|
||||||
showDialog.value = true;
|
|
||||||
item.value = val;
|
|
||||||
sjlx.value = lxs;
|
|
||||||
getList()
|
|
||||||
nextTick(() => {
|
|
||||||
tabHeightFn()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const particulars=ref()
|
|
||||||
const addEdit = (row) => {
|
|
||||||
particulars.value.init(row)
|
|
||||||
}
|
|
||||||
|
|
||||||
defineExpose({ init })
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.listBox {
|
|
||||||
height: calc(100% - 50px);
|
|
||||||
|
|
||||||
::v-deep .searchBox {
|
|
||||||
margin-bottom: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,13 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="dialog" v-if="dialogForm">
|
<div class="dialog" v-if="dialogForm">
|
||||||
<div class="head_box">
|
<div class="head_box">
|
||||||
<div></div>
|
<div>详情</div>
|
||||||
<div>
|
<div><el-button @click="close">关闭</el-button></div>
|
||||||
<el-button @click="close">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form_cnt">
|
<div class="form_cnt">
|
||||||
<FormMessage v-model="listQuery" :formList="formData" ref="elform" />
|
<FormMessage v-model="listQuery" disabled :formList="formData" ref="elform" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -15,41 +13,30 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||||
import { qcckGet } from "@/api/qcckApi.js";
|
import { qcckGet } from "@/api/qcckApi.js";
|
||||||
import {
|
import { ref, defineExpose, onMounted, getCurrentInstance } from "vue";
|
||||||
ref,
|
const { proxy } = getCurrentInstance();
|
||||||
defineExpose,
|
const { JQCLJG,JQLB,D_BZ_JQLY,JQLX,JQXL ,JQZL} = proxy.$dict( 'JQCLJG',"JQLB","D_BZ_JQLY","JQLX",'JQXL','JQZL' ); //获取字典数据
|
||||||
reactive,
|
|
||||||
onMounted,
|
|
||||||
defineEmits,
|
|
||||||
} from "vue";
|
|
||||||
const emit = defineEmits(["change"]);
|
|
||||||
const props = defineProps({
|
|
||||||
dic: Object
|
|
||||||
});
|
|
||||||
const dialogForm = ref(false); //弹窗
|
const dialogForm = ref(false); //弹窗
|
||||||
const formData = ref([
|
const formData = ref([
|
||||||
{ label: "报警电话", prop: "bjdh", type: "input" },
|
{ label: "报警电话", prop: "bjdh", type: "input" },
|
||||||
{ label: "报警地址", prop: "bjdz", type: "input" },
|
{ label: "报警地址", prop: "bjdz", type: "input" },
|
||||||
{ label: "报警内容", prop: "bjnr", type: "input" },
|
{ label: "报警内容", prop: "bjnr", type: "input" },
|
||||||
{ label: "报警人名称", prop: "bjrmc", type: "input" },
|
{ label: "报警人名称", prop: "bjrmc", type: "input" },
|
||||||
{ label: "报警人证件号码", prop: "bjrzjhm", type: "input" },
|
{ label: "报警人证件号码", prop: "bjrzjhm", type: "input" },
|
||||||
{ label: "报警时间", prop: "bjsj", type: "input" },
|
{ label: "报警时间", prop: "bjsj", type: "input" },
|
||||||
{ label: "接警完成时间", prop: "jjwcsj", type: "input" },
|
{ label: "接警完成时间", prop: "jjwcsj", type: "input" },
|
||||||
{ label: "警情子类", prop: "jqzldm", type: "select", options: props.dic.JQZL },
|
{ label: "警情子类", prop: "jqzldm", type: "select", options: JQZL },
|
||||||
{ label: "警情细类", prop: "jqxldm", type: "select", options: props.dic.JQXL },
|
{ label: "警情细类", prop: "jqxldm", type: "select", options: JQXL },
|
||||||
{ label: "警情类型", prop: "jqlxdm", type: "select",options: props.dic.JQLX },
|
{ label: "警情类型", prop: "jqlxdm", type: "select",options: JQLX },
|
||||||
{ label: "警情来源", prop: "jqlyfs", type: "select",options: props.dic.D_BZ_JQLY },
|
{ label: "警情来源", prop: "jqlyfs", type: "select",options: D_BZ_JQLY },
|
||||||
{ label: "警情类别", prop: "jqlbdm", type: "select", options: props.dic.JQLB },
|
{ label: "警情类别", prop: "jqlbdm", type: "select", options: JQLB },
|
||||||
// { label: "警情等级", prop: "jqdjdm", type: "select", options: props.dic.JQXL },
|
{ label: "警情处理状态", prop: "jqclztdm", type: "select",options: JQCLJG },
|
||||||
{ label: "警情处理状态", prop: "jqclztdm", type: "select",options: props.dic.JQCLJG },
|
|
||||||
]);
|
]);
|
||||||
const listQuery = ref({}); //表单
|
const listQuery = ref({}); //表单
|
||||||
const elform = ref();
|
const elform = ref();
|
||||||
const pageForm = reactive({});
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
tabHeightFn();
|
|
||||||
});
|
});
|
||||||
//
|
|
||||||
// 初始化数据
|
// 初始化数据
|
||||||
const init = (row) => {
|
const init = (row) => {
|
||||||
dialogForm.value = true;
|
dialogForm.value = true;
|
||||||
@ -59,22 +46,12 @@ const init = (row) => {
|
|||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 关闭
|
// 关闭
|
||||||
const close = () => {
|
const close = () => {
|
||||||
listQuery.value = {};
|
listQuery.value = {};
|
||||||
dialogForm.value = false;
|
dialogForm.value = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
pageForm.tableHeight = window.innerHeight - 720;
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
defineExpose({ init });
|
defineExpose({ init });
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,135 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="titleBox">
|
||||||
|
<PageTitle title="查看详情">
|
||||||
|
<el-button size="small" @click="goback">返回</el-button>
|
||||||
|
</PageTitle>
|
||||||
|
</div>
|
||||||
|
<!-- 搜索 -->
|
||||||
|
<div ref="searchBox">
|
||||||
|
<Search :searchArr="searchConfiger" @submit="onSearch"></Search>
|
||||||
|
</div>
|
||||||
|
<!-- 表格 -->
|
||||||
|
<div class="tabBox">
|
||||||
|
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
|
||||||
|
<template #jqlbdm="{ row }">
|
||||||
|
<DictTag :tag="false" :value="row.jqlbdm" :options="JQLB" />
|
||||||
|
</template>
|
||||||
|
<template #controls="{ row }">
|
||||||
|
<el-link type="primary" @click="addEdit( row)">详情</el-link>
|
||||||
|
</template>
|
||||||
|
</MyTable>
|
||||||
|
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{ ...pageData.pageConfiger, total: pageData.total }"></Pages>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Particulars ref="particulars" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import Particulars from "./particulars.vue";
|
||||||
|
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||||
|
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||||
|
import Pages from "@/components/aboutTable/Pages.vue";
|
||||||
|
import Search from "@/components/aboutTable/Search.vue";
|
||||||
|
import { qcckPost } from "@/api/qcckApi.js";
|
||||||
|
import { reactive, ref,defineProps, onMounted, defineEmits,getCurrentInstance } from "vue";
|
||||||
|
const props = defineProps({
|
||||||
|
item: {
|
||||||
|
type: Object,
|
||||||
|
default: {}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
const { JQLB } = proxy.$dict( "JQLB" ); //获取字典数据
|
||||||
|
const emit = defineEmits(['change']);
|
||||||
|
const particulars = ref()
|
||||||
|
const searchBox = ref(); //搜索框
|
||||||
|
const searchConfiger = ref([
|
||||||
|
{ label: "研判名称", prop: 'ypmc', placeholder: "请输入研判名称", showType: "input" },
|
||||||
|
]);
|
||||||
|
const queryFrom = ref({});
|
||||||
|
const pageData = reactive({
|
||||||
|
tableData: [], //表格数据
|
||||||
|
keyCount: 0,
|
||||||
|
tableConfiger: {
|
||||||
|
rowHieght: 61,
|
||||||
|
showSelectType: "null",
|
||||||
|
loading: false
|
||||||
|
},
|
||||||
|
total: 0,
|
||||||
|
pageConfiger: {
|
||||||
|
pageSize: 20,
|
||||||
|
pageCurrent: 1
|
||||||
|
}, //分页
|
||||||
|
controlsWidth: 160, //操作栏宽度
|
||||||
|
tableColumn: [
|
||||||
|
{ label: "研判名称", prop: "ypmc" },
|
||||||
|
{ label: "报警时间", prop: "bjsj" },
|
||||||
|
{ label: "报警地址", prop: "bjdz" },
|
||||||
|
{ label: "警情类型", prop: "jqlbdm",showSolt:true },
|
||||||
|
{ label: "报警内容", prop: "bjnr", showOverflowTooltip: true },
|
||||||
|
{ label: "报警电话", prop: "bjdh" },
|
||||||
|
{ label: "报警时间", prop: "bjsj" },
|
||||||
|
]
|
||||||
|
});
|
||||||
|
onMounted(() => {
|
||||||
|
tabHeightFn();
|
||||||
|
getList();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 搜索
|
||||||
|
const onSearch = (val) => {
|
||||||
|
queryFrom.value = { ...queryFrom.value,...val };
|
||||||
|
pageData.pageConfiger.pageCurrent = 1;
|
||||||
|
getList();
|
||||||
|
};
|
||||||
|
|
||||||
|
const changeNo = (val) => {
|
||||||
|
pageData.pageConfiger.pageCurrent = val;
|
||||||
|
getList();
|
||||||
|
};
|
||||||
|
const changeSize = (val) => {
|
||||||
|
pageData.pageConfiger.pageSize = val;
|
||||||
|
getList();
|
||||||
|
};
|
||||||
|
|
||||||
|
const getList = () => {
|
||||||
|
pageData.tableConfiger.loading = true;
|
||||||
|
let data = {
|
||||||
|
yjid:props.item.id,
|
||||||
|
...queryFrom.value,
|
||||||
|
pageCurrent: pageData.pageConfiger.pageCurrent,
|
||||||
|
pageSize: pageData.pageConfiger.pageSize
|
||||||
|
}
|
||||||
|
qcckPost(data, '/mosty-gsxt/jjdbYp/getPageList').then(res => {
|
||||||
|
pageData.tableData = res.records;
|
||||||
|
pageData.total = res.total;
|
||||||
|
pageData.tableConfiger.loading = false;
|
||||||
|
}).catch(() => {
|
||||||
|
pageData.tableConfiger.loading = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const addEdit = (row) => {
|
||||||
|
particulars.value.init(row)
|
||||||
|
}
|
||||||
|
|
||||||
|
const goback = () => {
|
||||||
|
emit('change', { type: '态势预警列表', data: null })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表格高度计算
|
||||||
|
const tabHeightFn = () => {
|
||||||
|
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||||
|
window.onresize = function () {
|
||||||
|
tabHeightFn();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.el-loading-mask {
|
||||||
|
background: rgba(0, 0, 0, 0.5) !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,328 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="titleBox">
|
||||||
|
<PageTitle title="态势预警列表">
|
||||||
|
<el-button size="small" @click="goback">返回</el-button>
|
||||||
|
</PageTitle>
|
||||||
|
</div>
|
||||||
|
<!-- 搜索 -->
|
||||||
|
<div ref="searchBox">
|
||||||
|
<Search :searchArr="searchConfiger" @submit="onSearch"></Search>
|
||||||
|
</div>
|
||||||
|
<!-- 表格 -->
|
||||||
|
<div class="tabBox">
|
||||||
|
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn"
|
||||||
|
:tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
|
||||||
|
:controlsWidth="pageData.controlsWidth">
|
||||||
|
<template #jqlbdm="{ row }">
|
||||||
|
<DictTag :tag="false" :value="row.jqlbdm" :options="JQLB" />
|
||||||
|
</template>
|
||||||
|
<template #jqzldm="{ row }">
|
||||||
|
<DictTag :tag="false" :value="row.jqzldm" :options="JQZL" />
|
||||||
|
</template>
|
||||||
|
<!-- 操作 -->
|
||||||
|
<template #controls="{ row }">
|
||||||
|
<el-link type="primary" @click="viewDetails(row)">详情</el-link>
|
||||||
|
<el-link type="primary" @click="generateReport(row.id)">研判报告</el-link>
|
||||||
|
</template>
|
||||||
|
</MyTable>
|
||||||
|
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||||
|
...pageData.pageConfiger,
|
||||||
|
total: pageData.total
|
||||||
|
}"></Pages>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<YjDetail ref="yjDetail"></YjDetail>
|
||||||
|
<YpModel v-model="showModel" @SaveReport="SaveReport" :heightNumber="436" v-model:textContent="textContent"></YpModel>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { timeValidate } from '@/utils/tools.js'
|
||||||
|
import YpModel from '@/components/ypModel/index.vue'
|
||||||
|
import { getItem } from '@/utils/storage.js'
|
||||||
|
import YjDetail from './yjDetail.vue'
|
||||||
|
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||||
|
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||||
|
import Pages from "@/components/aboutTable/Pages.vue";
|
||||||
|
import Search from "@/components/aboutTable/Search.vue";
|
||||||
|
import { jqypDywdtj, jqypfxbgJqlxtj, jqypfxbgYdfx, jqypfxbgJqlytj, jqypfxbgTj, jqypfxbgCljgf, jqypfxbgCzlfx, getDictItem } from '@/api/semanticAnalysis'
|
||||||
|
import { textStyle, Firstlevelheading, Subheading, BiheadlinegTitle, BigTitle, headTitle, report, signature } from './content.js'
|
||||||
|
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||||
|
import { reactive, ref, onMounted,defineProps, getCurrentInstance, defineEmits } from "vue";
|
||||||
|
const props = defineProps({
|
||||||
|
item: {
|
||||||
|
type: Object,
|
||||||
|
default: {}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const showModel = ref(false)
|
||||||
|
const sortingRatioValue = ref({})
|
||||||
|
const textContent = ref('');
|
||||||
|
|
||||||
|
const emit = defineEmits(['change']);
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
const { JQLB,JQZL} = proxy.$dict( "JQLB",'JQZL' ); //获取字典数据
|
||||||
|
const searchBox = ref(); //搜索框
|
||||||
|
const searchConfiger = ref([
|
||||||
|
{
|
||||||
|
label: "预警名称",
|
||||||
|
prop: "yjMc",
|
||||||
|
placeholder: "预警名称",
|
||||||
|
showType: "input"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "预警时间",
|
||||||
|
prop: "timeRange",
|
||||||
|
placeholder: "预警时间",
|
||||||
|
showType: "datetimerange"
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
const yjDetail = ref();
|
||||||
|
const queryFrom = ref({});
|
||||||
|
const pageData = reactive({
|
||||||
|
tableData: [], //表格数据
|
||||||
|
keyCount: 0,
|
||||||
|
tableConfiger: {
|
||||||
|
rowHieght: 61,
|
||||||
|
showSelectType: "null",
|
||||||
|
loading: false
|
||||||
|
},
|
||||||
|
total: 0,
|
||||||
|
pageConfiger: {
|
||||||
|
pageSize: 20,
|
||||||
|
pageCurrent: 1
|
||||||
|
}, //分页
|
||||||
|
controlsWidth: 160, //操作栏宽度
|
||||||
|
tableColumn: [
|
||||||
|
{ label: "预警类型", prop: "ypmc" },
|
||||||
|
{ label: "预警时间", prop: "yjsj" },
|
||||||
|
{ label: "预警名称大类", prop: "jqlbdm" ,showSolt: true },
|
||||||
|
{ label: "预警名称细类", prop: "jqzldm" ,showSolt: true}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
const timeDate = ref()
|
||||||
|
const endYears = ref()
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
tabHeightFn();
|
||||||
|
getList();
|
||||||
|
Time()
|
||||||
|
});
|
||||||
|
|
||||||
|
const Time = () => {
|
||||||
|
const currentYear = new Date().getFullYear();
|
||||||
|
const startOfYear = new Date(currentYear, 0, 1); // 今年1月1日
|
||||||
|
const endOfYear = new Date(currentYear, 11, 31, 23); // 今年12月31日23:59:59.999
|
||||||
|
const year = startOfYear.getFullYear();
|
||||||
|
const month = String(startOfYear.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(startOfYear.getDate()).padStart(2, '0');
|
||||||
|
const endYear = endOfYear.getFullYear();
|
||||||
|
const endMonth = String(endOfYear.getMonth() + 1).padStart(2, '0');
|
||||||
|
const endDay = String(endOfYear.getDate()).padStart(2, '0');
|
||||||
|
timeDate.value = `${endYear}年${endMonth}月${endDay}日`
|
||||||
|
endYears.value = year
|
||||||
|
return `${year}年${month}月${day}日 至${endYear}年${endMonth}月${endDay}日`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 搜索
|
||||||
|
const onSearch = (val) => {
|
||||||
|
queryFrom.value = { ...queryFrom.value,...val };
|
||||||
|
queryFrom.value.startTime = val.timeRange ? val.timeRange[0] : '';
|
||||||
|
queryFrom.value.endTime = val.timeRange ? val.timeRange[1] : '';
|
||||||
|
pageData.pageConfiger.pageCurrent = 1;
|
||||||
|
getList();
|
||||||
|
};
|
||||||
|
|
||||||
|
const changeNo = (val) => {
|
||||||
|
pageData.pageConfiger.pageCurrent = val;
|
||||||
|
getList();
|
||||||
|
};
|
||||||
|
const changeSize = (val) => {
|
||||||
|
pageData.pageConfiger.pageSize = val;
|
||||||
|
getList();
|
||||||
|
};
|
||||||
|
|
||||||
|
const getList = () => {
|
||||||
|
pageData.tableConfiger.loading = true;
|
||||||
|
let data = {
|
||||||
|
yjid:props.item.id,
|
||||||
|
...queryFrom.value,
|
||||||
|
pageCurrent: pageData.pageConfiger.pageCurrent,
|
||||||
|
pageSize: pageData.pageConfiger.pageSize
|
||||||
|
}
|
||||||
|
delete data.timeRange;
|
||||||
|
qcckPost(data, "/mosty-gsxt/jjdbYp/yjPageList").then((res) => {
|
||||||
|
pageData.tableData = res.records;
|
||||||
|
pageData.total = res.total;
|
||||||
|
pageData.tableConfiger.loading = false;
|
||||||
|
}).catch(() => {
|
||||||
|
pageData.tableConfiger.loading = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 查看详情
|
||||||
|
const viewDetails = (row) => {
|
||||||
|
emit('change', { type: '预警详情', data: row })
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生成研判报告
|
||||||
|
const generateReport = (val) => {
|
||||||
|
const dev = getItem('deptId')[0]
|
||||||
|
sortingRatioValue.value = {}
|
||||||
|
textContent.value = BigTitle(`${endYears.value}年度西藏公安执法数据分析`) + headTitle({
|
||||||
|
orgName: dev.deptName,
|
||||||
|
serialNumber: timeValidate("", "mm"),
|
||||||
|
time: timeValidate(),
|
||||||
|
})
|
||||||
|
const data = `为全面、客观、准确掌握全区公安机关的执法状况，自治区公安厅基于数据统计，对全区公安机关${endYears.value}年度的执法状况作了客观分析。`
|
||||||
|
textContent.value += BiheadlinegTitle('1.接处预警况') + textStyle(data) + Firstlevelheading('一、执法状况总体分析')
|
||||||
|
getfxbgYdfx(val)
|
||||||
|
getfxbgTj(val)
|
||||||
|
getfxbgJqlxtj(val)
|
||||||
|
getfxbgJqlytj(val)
|
||||||
|
getfxbgDywdtj(val)
|
||||||
|
getfxgbCljgf(val)
|
||||||
|
getfxgbCzlfx(val)
|
||||||
|
showModel.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
//分析报告-时间维度-月分析
|
||||||
|
const getfxbgYdfx = (val) => {
|
||||||
|
jqypfxbgYdfx({ yjid: val }).then(res => {
|
||||||
|
const model = sortingRatio(res)
|
||||||
|
const data = `我们将所有预警按照月份划分进行统计发现，每月预警分布较为平均。最高月份为${model[0].month}月，占到${model[0].number}；最低月份为${model[res.length - 1].month}月，占到${model[res.length - 1].number}。考虑是因为${model[0].month}月为我区传统旅游旺季，进藏人员较多。 ${model[res.length - 1].month}月一般春节及藏历新年期间，在藏人员较少。`
|
||||||
|
sortingRatioValue.value.ydfx = Subheading('1.1.4时间维度') + textStyle(data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const getfxbgTj = (val) => {
|
||||||
|
jqypfxbgTj({ yjid: val }).then(res => {
|
||||||
|
const data = `${Time()} ，全区公安机关共接报各类预警${res.total}起,同比上升 ${res.tbbsb}%,同比上升${res.hbbsb}%`
|
||||||
|
textContent.value += BiheadlinegTitle('1.1接报预警') + textStyle(data)
|
||||||
|
dataList.XsfxTj = res
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 预警类型统计
|
||||||
|
const getfxbgJqlxtj = (val) => {
|
||||||
|
let params = {
|
||||||
|
...pageData.parameter,
|
||||||
|
yjid: val
|
||||||
|
}
|
||||||
|
jqypfxbgJqlxtj(params).then(res => {
|
||||||
|
const model = sortingRatio(res)
|
||||||
|
const data = `按预警类型来看，${model[0].name}最多，占到${model[0].ratio}；其次为${model[1].name}最多，占到${model[1].ratio}。`
|
||||||
|
sortingRatioValue.value.jqlx = Subheading('1.1.1类型维度') + textStyle(data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 预警来源统计
|
||||||
|
const getfxbgJqlytj = (val) => {
|
||||||
|
jqypfxbgJqlytj({ yjid: val }).then(res => {
|
||||||
|
const model = sortingRatio(res)
|
||||||
|
const data = `按预警来源来看，${model[0].name}最多，占到${model[0].ratio}；其次为${model[1].name}最多，占到${model[1].ratio}。`
|
||||||
|
sortingRatioValue.value.jqly = Subheading('1.1.2来源维度') + textStyle(data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 地域统计
|
||||||
|
const getfxbgDywdtj = (val) => {
|
||||||
|
jqypDywdtj({ yjid: val }).then(res => {
|
||||||
|
dataList.dyTj.xAxisData = res.map(it => it.ssbm)
|
||||||
|
dataList.dyTj.seriesData = [];
|
||||||
|
for (let i = 0; i < res.length; i++) {
|
||||||
|
dataList.dyTj.seriesData[i] = [];
|
||||||
|
for (let j = 0; j < res.length; j++) {
|
||||||
|
dataList.dyTj.seriesData[i][j] = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let i = 0; i < dataList.dyTj.seriesData.length; i++) {
|
||||||
|
dataList.dyTj.seriesData[i][i] = res[i].number
|
||||||
|
}
|
||||||
|
const model = sortingRatio(res)
|
||||||
|
let data
|
||||||
|
if (model.length > 1) {
|
||||||
|
data = `从地市分布地市来看，${model[0].ssbm}预警量最大，占到全区预警总量的${model[0].number}。其次为${model[1].ssbm}和${model[2].ssbm}，两市预警量较为接近。预警量最少的为${model[model.length - 1].ssbm}。`
|
||||||
|
} else {
|
||||||
|
data = `从地市分布地市来看，${model[0].ssbm}预警量最大，占到全区预警总量的${model[0].number}。`
|
||||||
|
}
|
||||||
|
sortingRatioValue.value.dywd = Subheading('1.1.3地域维度') + textStyle(data)
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分析报告-处理结果分析
|
||||||
|
const getfxgbCljgf = (val) => {
|
||||||
|
jqypfxbgCljgf({ yjid: val }).then(res => {
|
||||||
|
// sortingRatioValue.Cljgf =
|
||||||
|
const model = sortingRatio(res)
|
||||||
|
|
||||||
|
let czjgfx = `从预警处置结果来看，`
|
||||||
|
model.forEach(item => {
|
||||||
|
czjgfx += `${item.name}，占到${item.ratio};`
|
||||||
|
})
|
||||||
|
sortingRatioValue.value.xlwdfx = BiheadlinegTitle('1.2预警处置') + Firstlevelheading('1.2.1结果维度') + textStyle(czjgfx)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分析报告-处置率分析
|
||||||
|
const getfxgbCzlfx = (val) => {
|
||||||
|
|
||||||
|
jqypfxbgCzlfx({ yjid: val }).then(res => {
|
||||||
|
dataList.withinTj = [{
|
||||||
|
name: "超时分流(超过24小时)",
|
||||||
|
value: res.within24h ? res.within24h : 0
|
||||||
|
}, {
|
||||||
|
name: "按时分流(24小时内)",
|
||||||
|
value: res.over24h ? res.over24h : 0
|
||||||
|
}]
|
||||||
|
const data = `从处警效率来看，24小时以内处警的，占到${res.over24h}%。表明我区公安机关在接警之后能够在第一时间处警。`
|
||||||
|
sortingRatioValue.value.czjgfx = Subheading('1.2.2效率维度') + textStyle(data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const SaveReport = (val) => {
|
||||||
|
ElMessageBox.prompt('请输入名称', '提示', {
|
||||||
|
confirmButtonText: '确认',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
// inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
|
||||||
|
// inputErrorMessage: 'Invalid Email',
|
||||||
|
})
|
||||||
|
.then(({ value }) => {
|
||||||
|
const promes = {
|
||||||
|
bgmc:value,
|
||||||
|
bgnr: val,
|
||||||
|
yjid:chageData.value
|
||||||
|
}
|
||||||
|
qcckPost( promes , "/mosty-gsxt/gsxtYpbg/addEntity")
|
||||||
|
.then(() => {
|
||||||
|
ElMessage.success("保存成功");
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
ElMessage({
|
||||||
|
type: 'info',
|
||||||
|
message: '取消保存',
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch(() => { });
|
||||||
|
}
|
||||||
|
|
||||||
|
const goback = () => {
|
||||||
|
emit('change', { type: '研判首页', data: null })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表格高度计算
|
||||||
|
const tabHeightFn = () => {
|
||||||
|
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||||
|
window.onresize = function () {
|
||||||
|
tabHeightFn();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.el-loading-mask {
|
||||||
|
background: rgba(0, 0, 0, 0.5) !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,417 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 研判类型 -->
|
||||||
|
<div class="content">
|
||||||
|
<div class="btnsBox" ref="refBtn">
|
||||||
|
<CheckBox :data="checkData.yplxBtn" @changeData="changeData_yplx"></CheckBox>
|
||||||
|
</div>
|
||||||
|
<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" @click.stop="lookDeatl(it)" v-for="(it, idx) in list" :key="idx">
|
||||||
|
<div class="ww100"><img class="ww100" style="height: 168px;" src="@/assets/images/mxbg.jpg" alt=""></div>
|
||||||
|
<div class="f14 lh24 pl4 pr4 one_text_detail">名称：{{ it.ypMc }}</div>
|
||||||
|
<div class="flex ww100 f14 lh24 pl4 pr4 one_text_detail">类型：
|
||||||
|
<DictTag :value="it.ypLx" :tag="false" :options="D_SG_TSYPGZ" />
|
||||||
|
</div>
|
||||||
|
<div class="f14 lh24 pl4 pr4 one_text_detail">数量：{{ it.num }}</div>
|
||||||
|
<div class="foot">
|
||||||
|
<span class="ml10 pointer" @click.stop="openHistoricalReport(it.id)" style="color:#027ff0 ;"><el-icon style="top: 2px;"><Document /></el-icon>历史报告</span>
|
||||||
|
<span class="ml10 pointer" @click.stop="funAll(it.id)" style="color:#027ff0 ;"><el-icon style="top: 2px;"><Document /></el-icon>报告</span>
|
||||||
|
<span class="ml10 pointer" @click="handleHs(it)" style="color:#f4ac47 ;"><el-icon style="top: 2px;"><Files /></el-icon>会商</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<div class="ww100 flex just-center">
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<YpModel v-model="showModel" @SaveReport="SaveReport" :heightNumber="436" v-model:textContent="textContent"></YpModel>
|
||||||
|
<HistoricalReport v-model="showHistoricalReport" @choosed="getHistory" :chageData="chageData"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import CheckBox from '@/components/checkBox/index.vue'
|
||||||
|
import YpModel from '@/components/ypModel/index.vue'
|
||||||
|
import HistoricalReport from './historicalReport.vue'
|
||||||
|
import * as MOSTY from "@/components/MyComponents/index";
|
||||||
|
import Search from "@/components/aboutTable/Search.vue";
|
||||||
|
import { qcckPost } from "@/api/qcckApi.js";
|
||||||
|
import { timeValidate } from '@/utils/tools.js'
|
||||||
|
import { getItem } from '@/utils/storage.js'
|
||||||
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
|
import { reactive, ref, onMounted, getCurrentInstance, watch, defineEmits } from "vue";
|
||||||
|
import { jqypDywdtj, jqypfxbgJqlxtj, jqypfxbgYdfx, jqypfxbgJqlytj, jqypfxbgTj, jqypfxbgCljgf, jqypfxbgCzlfx, getDictItem } from '@/api/semanticAnalysis'
|
||||||
|
import { textStyle, Firstlevelheading, Subheading, BiheadlinegTitle, BigTitle, headTitle, report, signature } from './content.js'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
const router = useRouter();
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
const emit = defineEmits(['change'])
|
||||||
|
const { D_SG_SJLY, D_SG_TSYPGZ, JQLB, JQLX, JQXL, JQZL, D_BZ_JQLY, D_BZ_JQFL, JQCLJG } = proxy.$dict("D_SG_SJLY", "D_SG_TSYPGZ", "JQLB", "JQLX", "JQXL", "JQZL", "D_BZ_JQLY", "D_BZ_JQFL", "JQCLJG"); //获取字典数据
|
||||||
|
const searchBox = ref(); //搜索框
|
||||||
|
const showModel = ref(false);
|
||||||
|
const textContent = ref('');
|
||||||
|
const refBtn = ref();
|
||||||
|
const show = ref(false)
|
||||||
|
const listHeight = ref()
|
||||||
|
const searchConfiger = ref([
|
||||||
|
{ label: "研判名称", prop: "ypMc", placeholder: "请输入研判名称", showType: "input" },
|
||||||
|
]);
|
||||||
|
const checkData = reactive({
|
||||||
|
yplxBtn: {
|
||||||
|
hasChoose: [],
|
||||||
|
list: []
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const page = ref(1);
|
||||||
|
const total = ref(0)
|
||||||
|
const list = ref([])
|
||||||
|
const loading = ref(false);
|
||||||
|
const formData = ref({})
|
||||||
|
const chageData=ref()
|
||||||
|
watch(() => D_SG_TSYPGZ.value, val => {
|
||||||
|
checkData.yplxBtn.list = val.map(v => v.zdmc);
|
||||||
|
checkData.yplxBtn.hasChoose = val.map(v => v.zdmc);
|
||||||
|
}, { immediate: true, deep: true });
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
show.value = true;
|
||||||
|
Time()
|
||||||
|
tabHeightFn();
|
||||||
|
getLits()
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
// 研判类型
|
||||||
|
const changeData_yplx = (val) => {
|
||||||
|
checkData.yplxBtn.hasChoose = val;
|
||||||
|
let dms = [];
|
||||||
|
D_SG_TSYPGZ.value.forEach(item => {
|
||||||
|
if (val.includes(item.zdmc)) dms.push(item.dm);
|
||||||
|
});
|
||||||
|
formData.value.ypLx = dms;
|
||||||
|
page.value = 1;
|
||||||
|
getLits();
|
||||||
|
}
|
||||||
|
|
||||||
|
const onSearch = (val) => {
|
||||||
|
formData.value = { ...formData.value, ...val, };
|
||||||
|
page.value = 1;
|
||||||
|
getLits();
|
||||||
|
}
|
||||||
|
|
||||||
|
const load = () => {
|
||||||
|
if (total.value == list.value.length) return;
|
||||||
|
page.value++;
|
||||||
|
getLits();
|
||||||
|
}
|
||||||
|
|
||||||
|
const getLits = () => {
|
||||||
|
let params = {
|
||||||
|
pageCurrent: page.value,
|
||||||
|
pageSize: 8,
|
||||||
|
...formData.value
|
||||||
|
}
|
||||||
|
loading.value = true;
|
||||||
|
|
||||||
|
qcckPost(params, '/mosty-gsxt/tsyp/selectPage').then(res => {
|
||||||
|
let arr = res.records || [];
|
||||||
|
list.value = page.value == 1 ? arr : list.value.concat(arr);
|
||||||
|
total.value = res.total;
|
||||||
|
loading.value = false;
|
||||||
|
}).catch(() => {
|
||||||
|
loading.value = false;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleHs = (val) => {
|
||||||
|
router.push({ path: '/MeetingRoom', query: { tsypid: val.id } })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查看详情
|
||||||
|
const lookDeatl = (val) => {
|
||||||
|
emit('change', { data:val, type:'态势预警列表' })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表格高度计算
|
||||||
|
const tabHeightFn = () => {
|
||||||
|
listHeight.value = window.innerHeight - searchBox.value.offsetHeight - refBtn.value.offsetHeight - 182;
|
||||||
|
window.onresize = function () {
|
||||||
|
tabHeightFn();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const dataList = reactive({
|
||||||
|
dyTj: {
|
||||||
|
xAxisData: [],
|
||||||
|
seriesData: [],
|
||||||
|
},
|
||||||
|
jqlxTj: [],
|
||||||
|
jqlyTj: [],
|
||||||
|
CljgfTj: [],
|
||||||
|
XsfxTj: [],
|
||||||
|
})
|
||||||
|
const sortingRatioValue = ref({
|
||||||
|
jqlx: "",
|
||||||
|
jqly: "",
|
||||||
|
dywd: "",
|
||||||
|
ydfx: "",
|
||||||
|
xlwdfx: "",
|
||||||
|
czjgfx: "",
|
||||||
|
})
|
||||||
|
const sortingRatio = (data) => {
|
||||||
|
// 提取所有number值
|
||||||
|
// 计算总数
|
||||||
|
const total = data.reduce((sum, item) => sum + item.number, 0);
|
||||||
|
// 找出第一大和第二大的值及其对应的name
|
||||||
|
const sortedData = [...data].sort((a, b) => b.number - a.number);
|
||||||
|
const dataValue = sortedData.map(item => {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
ratio: total > 0 ? (item.number / total * 100).toFixed(2) + '%' : '0%',
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return dataValue
|
||||||
|
}
|
||||||
|
const pageData = reactive({
|
||||||
|
parameter: { bjlbList: '' }
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
const getDictItemList = () => {
|
||||||
|
const promes = {
|
||||||
|
dictCode: "00000000"
|
||||||
|
}
|
||||||
|
getDictItem(promes).then(res => {
|
||||||
|
pageData.parameter.bjlbList = res.map(item => item.dm).join(',')
|
||||||
|
console.log(pageData.parameter.bjlbList);
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
getDictItemList()
|
||||||
|
const funAll = (val) => {
|
||||||
|
const dev = getItem('deptId')[0]
|
||||||
|
sortingRatioValue.value = {}
|
||||||
|
textContent.value = BigTitle(`${endYears.value}年度西藏公安执法数据分析`) + headTitle({
|
||||||
|
orgName: dev.deptName,
|
||||||
|
serialNumber: timeValidate("", "mm"),
|
||||||
|
time: timeValidate(),
|
||||||
|
})
|
||||||
|
const data = `为全面、客观、准确掌握全区公安机关的执法状况，自治区公安厅基于数据统计，对全区公安机关${endYears.value}年度的执法状况作了客观分析。`
|
||||||
|
textContent.value += BiheadlinegTitle('1.接处警情况') + textStyle(data) + Firstlevelheading('一、执法状况总体分析')
|
||||||
|
getfxbgYdfx(val)
|
||||||
|
getfxbgTj()
|
||||||
|
getfxbgJqlxtj(val)
|
||||||
|
getfxbgJqlytj(val)
|
||||||
|
getfxbgDywdtj(val)
|
||||||
|
getfxgbCljgf(val)
|
||||||
|
getfxgbCzlfx(val)
|
||||||
|
showModel.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(() => sortingRatioValue.value, (val) => {
|
||||||
|
if (val.jqlx && val.jqly && val.dywd && val.ydfx && val.xlwdfx && val.czjgfx) {
|
||||||
|
textContent.value += val.jqlx + val.jqly + val.dywd + val.ydfx + val.xlwdfx + val.czjgfx + report() + signature()
|
||||||
|
}
|
||||||
|
}, { deep: true })
|
||||||
|
const getfxbgTj = (val) => {
|
||||||
|
jqypfxbgTj({ ypid: val }).then(res => {
|
||||||
|
const data = `${Time()} ，全区公安机关共接报各类警情${res.total}起,同比上升 ${res.tbbsb}%,同比上升${res.hbbsb}%`
|
||||||
|
textContent.value += BiheadlinegTitle('1.1接报警情') + textStyle(data)
|
||||||
|
dataList.XsfxTj = res
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 警情类型统计
|
||||||
|
const getfxbgJqlxtj = (val) => {
|
||||||
|
let params = {
|
||||||
|
...pageData.parameter,
|
||||||
|
ypid: val
|
||||||
|
}
|
||||||
|
jqypfxbgJqlxtj(params).then(res => {
|
||||||
|
const model = sortingRatio(res)
|
||||||
|
const data = `按警情类型来看，${model[0].name}最多，占到${model[0].ratio}；其次为${model[1].name}最多，占到${model[1].ratio}。`
|
||||||
|
sortingRatioValue.value.jqlx = Subheading('1.1.1类型维度') + textStyle(data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 警情来源统计
|
||||||
|
const getfxbgJqlytj = (val) => {
|
||||||
|
jqypfxbgJqlytj({ ypid: val }).then(res => {
|
||||||
|
const model = sortingRatio(res)
|
||||||
|
const data = `按警情来源来看，${model[0].name}最多，占到${model[0].ratio}；其次为${model[1].name}最多，占到${model[1].ratio}。`
|
||||||
|
sortingRatioValue.value.jqly = Subheading('1.1.2来源维度') + textStyle(data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 地域统计
|
||||||
|
const getfxbgDywdtj = (val) => {
|
||||||
|
jqypDywdtj({ ypid: val }).then(res => {
|
||||||
|
dataList.dyTj.xAxisData = res.map(it => it.ssbm)
|
||||||
|
dataList.dyTj.seriesData = [];
|
||||||
|
for (let i = 0; i < res.length; i++) {
|
||||||
|
dataList.dyTj.seriesData[i] = [];
|
||||||
|
for (let j = 0; j < res.length; j++) {
|
||||||
|
dataList.dyTj.seriesData[i][j] = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let i = 0; i < dataList.dyTj.seriesData.length; i++) {
|
||||||
|
dataList.dyTj.seriesData[i][i] = res[i].number
|
||||||
|
}
|
||||||
|
const model = sortingRatio(res)
|
||||||
|
let data
|
||||||
|
if (model.length > 1) {
|
||||||
|
data = `从地市分布地市来看，${model[0].ssbm}警情量最大，占到全区警情总量的${model[0].number}。其次为${model[1].ssbm}和${model[2].ssbm}，两市警情量较为接近。警情量最少的为${model[model.length - 1].ssbm}。`
|
||||||
|
} else {
|
||||||
|
data = `从地市分布地市来看，${model[0].ssbm}警情量最大，占到全区警情总量的${model[0].number}。`
|
||||||
|
}
|
||||||
|
sortingRatioValue.value.dywd = Subheading('1.1.3地域维度') + textStyle(data)
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//分析报告-时间维度-月分析
|
||||||
|
const getfxbgYdfx = (val) => {
|
||||||
|
jqypfxbgYdfx({ ypid: val }).then(res => {
|
||||||
|
const model = sortingRatio(res)
|
||||||
|
const data = `我们将所有警情按照月份划分进行统计发现，每月警情分布较为平均。最高月份为${model[0].month}月，占到${model[0].number}；最低月份为${model[res.length - 1].month}月，占到${model[res.length - 1].number}。考虑是因为${model[0].month}月为我区传统旅游旺季，进藏人员较多。 ${model[res.length - 1].month}月一般春节及藏历新年期间，在藏人员较少。`
|
||||||
|
sortingRatioValue.value.ydfx = Subheading('1.1.4时间维度') + textStyle(data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 分析报告-处理结果分析
|
||||||
|
const getfxgbCljgf = (val) => {
|
||||||
|
jqypfxbgCljgf({ ypid: val }).then(res => {
|
||||||
|
// sortingRatioValue.Cljgf =
|
||||||
|
const model = sortingRatio(res)
|
||||||
|
|
||||||
|
let czjgfx = `从警情处置结果来看，`
|
||||||
|
model.forEach(item => {
|
||||||
|
czjgfx += `${item.name}，占到${item.ratio};`
|
||||||
|
})
|
||||||
|
sortingRatioValue.value.xlwdfx = BiheadlinegTitle('1.2警情处置') + Firstlevelheading('1.2.1结果维度') + textStyle(czjgfx)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 分析报告-处置率分析
|
||||||
|
const getfxgbCzlfx = (val) => {
|
||||||
|
|
||||||
|
jqypfxbgCzlfx({ ypid: val }).then(res => {
|
||||||
|
dataList.withinTj = [{
|
||||||
|
name: "超时分流(超过24小时)",
|
||||||
|
value: res.within24h ? res.within24h : 0
|
||||||
|
}, {
|
||||||
|
name: "按时分流(24小时内)",
|
||||||
|
value: res.over24h ? res.over24h : 0
|
||||||
|
}]
|
||||||
|
const data = `从处警效率来看，24小时以内处警的，占到${res.over24h}%。表明我区公安机关在接警之后能够在第一时间处警。`
|
||||||
|
sortingRatioValue.value.czjgfx = Subheading('1.2.2效率维度') + textStyle(data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const timeDate = ref()
|
||||||
|
const endYears = ref()
|
||||||
|
const Time = () => {
|
||||||
|
const currentYear = new Date().getFullYear();
|
||||||
|
const startOfYear = new Date(currentYear, 0, 1); // 今年1月1日
|
||||||
|
const endOfYear = new Date(currentYear, 11, 31, 23); // 今年12月31日23:59:59.999
|
||||||
|
const year = startOfYear.getFullYear();
|
||||||
|
const month = String(startOfYear.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(startOfYear.getDate()).padStart(2, '0');
|
||||||
|
const endYear = endOfYear.getFullYear();
|
||||||
|
const endMonth = String(endOfYear.getMonth() + 1).padStart(2, '0');
|
||||||
|
const endDay = String(endOfYear.getDate()).padStart(2, '0');
|
||||||
|
timeDate.value = `${endYear}年${endMonth}月${endDay}日`
|
||||||
|
endYears.value = year
|
||||||
|
return `${year}年${month}月${day}日 至${endYear}年${endMonth}月${endDay}日`
|
||||||
|
}
|
||||||
|
|
||||||
|
const showHistoricalReport = ref(false)
|
||||||
|
|
||||||
|
const openHistoricalReport = (val) => {
|
||||||
|
chageData.value = val
|
||||||
|
showHistoricalReport.value = true
|
||||||
|
}
|
||||||
|
// const
|
||||||
|
const getHistory = (val) => {
|
||||||
|
|
||||||
|
textContent.value = val
|
||||||
|
showHistoricalReport.value = false
|
||||||
|
showModel.value = true
|
||||||
|
}
|
||||||
|
const SaveReport = (val) => {
|
||||||
|
|
||||||
|
ElMessageBox.prompt('请输入名称', '提示', {
|
||||||
|
confirmButtonText: '确认',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
// inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
|
||||||
|
// inputErrorMessage: 'Invalid Email',
|
||||||
|
})
|
||||||
|
.then(({ value }) => {
|
||||||
|
const promes = {
|
||||||
|
bgmc:value,
|
||||||
|
bgnr: val,
|
||||||
|
ypid:chageData.value
|
||||||
|
}
|
||||||
|
qcckPost( promes , "/mosty-gsxt/gsxtYpbg/addEntity")
|
||||||
|
.then(() => {
|
||||||
|
ElMessage.success("保存成功");
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
ElMessage({
|
||||||
|
type: 'info',
|
||||||
|
message: '取消保存',
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
.catch(() => { });
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-left: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
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: 18px;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: #fff;
|
||||||
|
padding: 4px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.cntItem {
|
||||||
|
width: 300px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
color: #787878;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.foot {
|
||||||
|
text-align: right;
|
||||||
|
margin-top: 4px;
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
padding: 4px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,512 +1,37 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="statistical-analysis">
|
<div>
|
||||||
<!-- 数据类型 -->
|
<YpHome v-if="showModel == '研判首页'" @change="changeModel"></YpHome>
|
||||||
<!-- 左侧树形菜单 -->
|
<YjList v-if="showModel == '态势预警列表'" :item="itemYj" @change="changeModel"></YjList>
|
||||||
<!-- <div class="left-menu">
|
<YjDetail v-if="showModel == '预警详情'" :item="itemDetail" @change="changeModel"></YjDetail>
|
||||||
<CheckBox :data="checkData.sjlxBtn" customClass="all" @changeData="changeData_sjly"></CheckBox>
|
|
||||||
</div> -->
|
|
||||||
<!-- 右侧内容区 -->
|
|
||||||
<!-- 研判类型 -->
|
|
||||||
|
|
||||||
<div class="right-content">
|
|
||||||
<div class="btnsBox" ref="refBtn">
|
|
||||||
<CheckBox :data="checkData.yplxBtn" @changeData="changeData_yplx"></CheckBox>
|
|
||||||
</div>
|
|
||||||
<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" @click.stop="lookDeatl(it)" v-for="(it, idx) in list" :key="idx">
|
|
||||||
<div class="ww100"><img class="ww100" style="height: 168px;" src="@/assets/images/mxbg.jpg" alt=""></div>
|
|
||||||
<div class="f14 lh24 pl4 pr4 one_text_detail">名称：{{ it.ypMc }}</div>
|
|
||||||
<div class="flex ww100 f14 lh24 pl4 pr4 one_text_detail">类型：
|
|
||||||
<DictTag :value="it.ypLx" :tag="false" :options="D_SG_TSYPGZ" />
|
|
||||||
</div>
|
|
||||||
<div class="f14 lh24 pl4 pr4 one_text_detail">数量：{{ it.num }}</div>
|
|
||||||
<div class="foot">
|
|
||||||
<span class="ml10 pointer" @click.stop="openHistoricalReport(it.id)" style="color:#027ff0 ;"><el-icon
|
|
||||||
style="top: 2px;">
|
|
||||||
<Document />
|
|
||||||
</el-icon>历史报告</span>
|
|
||||||
<span class="ml10 pointer" @click.stop="funAll(it.id)" style="color:#027ff0 ;"><el-icon style="top: 2px;">
|
|
||||||
<Document />
|
|
||||||
</el-icon>报告</span>
|
|
||||||
<span class="ml10 pointer" @click="handleHs(it)" style="color:#f4ac47 ;"><el-icon style="top: 2px;">
|
|
||||||
<Files />
|
|
||||||
</el-icon>会商</span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<div class="ww100 flex just-center">
|
|
||||||
<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>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 详情 -->
|
|
||||||
<Detail ref="detailForm" @getData="getLits" :dict="{ JQLB, JQLX, JQXL, JQZL, D_BZ_JQLY, D_BZ_JQFL, JQCLJG }"></Detail>
|
|
||||||
<YpModel v-model="showModel" @SaveReport="SaveReport" :heightNumber="650" v-model:textContent="textContent"></YpModel>
|
|
||||||
<HistoricalReport v-model="showHistoricalReport" @choosed="getHistory" :chageData="chageData"/>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import YpModel from '@/components/ypModel/index.vue'
|
import YpHome from "./components/ypHome.vue";
|
||||||
import HistoricalReport from './components/historicalReport.vue'
|
import YjList from "./components/yjList.vue";
|
||||||
import Detail from './components/detail.vue'
|
import YjDetail from "./components/yjDetail.vue";
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
import { onMounted, ref } from "vue";
|
||||||
import CheckBox from "@/components/checkBox/index.vue";
|
const showModel = ref('研判首页')
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
const itemYj = ref({})
|
||||||
import { qcckPost } from "@/api/qcckApi.js";
|
const itemDetail = ref({})
|
||||||
import { timeValidate } from '@/utils/tools.js'
|
onMounted(()=>{
|
||||||
import { getItem } from '@/utils/storage.js'
|
// route.query.id ? lookDeatl(route.query.id): getLits();
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
|
||||||
import { reactive, ref, onMounted, getCurrentInstance, watch, nextTick } from "vue";
|
|
||||||
import { jqypDywdtj, jqypfxbgJqlxtj, jqypfxbgYdfx, jqypfxbgJqlytj, jqypfxbgTj, jqypfxbgCljgf, jqypfxbgCzlfx, getDictItem } from '@/api/semanticAnalysis'
|
|
||||||
import { textStyle, Firstlevelheading, Subheading, BiheadlinegTitle, BigTitle, headTitle, report, signature } from './components/content.js'
|
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
||||||
const router = useRouter();
|
|
||||||
const { proxy } = getCurrentInstance();
|
|
||||||
|
|
||||||
const { D_SG_SJLY, D_SG_TSYPGZ, JQLB, JQLX, JQXL, JQZL, D_BZ_JQLY, D_BZ_JQFL, JQCLJG } = proxy.$dict("D_SG_SJLY", "D_SG_TSYPGZ", "JQLB", "JQLX", "JQXL", "JQZL", "D_BZ_JQLY", "D_BZ_JQFL", "JQCLJG"); //获取字典数据
|
|
||||||
const searchBox = ref(); //搜索框
|
|
||||||
const showModel = ref(false);
|
|
||||||
const textContent = ref('');
|
|
||||||
const refBtn = ref();
|
|
||||||
const show = ref(false)
|
|
||||||
const detailForm = ref()
|
|
||||||
const listHeight = ref()
|
|
||||||
const searchConfiger = ref([
|
|
||||||
{ label: "研判名称", prop: "ypMc", placeholder: "请输入研判名称", showType: "input" },
|
|
||||||
]);
|
|
||||||
const checkData = reactive({
|
|
||||||
sjlxBtn: {
|
|
||||||
hasChoose: [],
|
|
||||||
list: []
|
|
||||||
},
|
|
||||||
yplxBtn: {
|
|
||||||
hasChoose: [],
|
|
||||||
list: []
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const page = ref(1);
|
|
||||||
const total = ref(0)
|
|
||||||
const list = ref([])
|
|
||||||
const loading = ref(false);
|
|
||||||
const formData = ref({})
|
|
||||||
const chageData=ref()
|
|
||||||
watch(() => [D_SG_SJLY.value, D_SG_TSYPGZ.value], val => {
|
|
||||||
checkData.sjlxBtn.list = val[0].map(v => v.zdmc);
|
|
||||||
checkData.yplxBtn.list = val[1].map(v => v.zdmc);
|
|
||||||
checkData.yplxBtn.hasChoose = val[1].map(v => v.zdmc);
|
|
||||||
}, { immediate: true, deep: true });
|
|
||||||
const route = useRoute();
|
|
||||||
onMounted(() => {
|
|
||||||
show.value = true;
|
|
||||||
Time()
|
|
||||||
tabHeightFn();
|
|
||||||
if (route.query.id) {
|
|
||||||
lookDeatl(route.query)
|
|
||||||
} else {
|
|
||||||
getLits()
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
function changeModel(val){
|
||||||
// 数据类型
|
showModel.value = val.type ;
|
||||||
const changeData_sjly = (val) => {
|
if(val.data){
|
||||||
checkData.sjlxBtn.hasChoose = val;
|
if(val.type == '态势预警列表'){
|
||||||
let dms = [];
|
itemYj.value = val.data
|
||||||
D_SG_SJLY.value.forEach(item => {
|
}else if(val.type == '预警详情'){
|
||||||
if (val.includes(item.zdmc)) dms.push(item.dm);
|
itemDetail.value = val.data
|
||||||
});
|
|
||||||
formData.value.sjLx = dms;
|
|
||||||
page.value = 1;
|
|
||||||
getLits();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 研判类型
|
|
||||||
const changeData_yplx = (val) => {
|
|
||||||
checkData.yplxBtn.hasChoose = val;
|
|
||||||
let dms = [];
|
|
||||||
D_SG_TSYPGZ.value.forEach(item => {
|
|
||||||
if (val.includes(item.zdmc)) dms.push(item.dm);
|
|
||||||
});
|
|
||||||
formData.value.ypLx = dms;
|
|
||||||
page.value = 1;
|
|
||||||
getLits();
|
|
||||||
}
|
|
||||||
|
|
||||||
const onSearch = (val) => {
|
|
||||||
formData.value = { ...formData.value, ...val, };
|
|
||||||
page.value = 1;
|
|
||||||
getLits();
|
|
||||||
}
|
|
||||||
|
|
||||||
const load = () => {
|
|
||||||
if (total.value == list.value.length) return;
|
|
||||||
page.value++;
|
|
||||||
getLits();
|
|
||||||
}
|
|
||||||
|
|
||||||
const getLits = () => {
|
|
||||||
let params = {
|
|
||||||
pageCurrent: page.value,
|
|
||||||
pageSize: 8,
|
|
||||||
...formData.value
|
|
||||||
}
|
|
||||||
loading.value = true;
|
|
||||||
|
|
||||||
qcckPost(params, '/mosty-gsxt/tsyp/selectPage').then(res => {
|
|
||||||
let arr = res.records || [];
|
|
||||||
list.value = page.value == 1 ? arr : list.value.concat(arr);
|
|
||||||
total.value = res.total;
|
|
||||||
loading.value = false;
|
|
||||||
}).catch(() => {
|
|
||||||
loading.value = false;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleHs = (val) => {
|
|
||||||
router.push({ path: '/MeetingRoom', query: { tsypid: val.id } })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 查看详情
|
|
||||||
const lookDeatl = (val) => {
|
|
||||||
nextTick(() => {
|
|
||||||
detailForm.value.init(val, formData.value.sjLx)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 表格高度计算
|
|
||||||
const tabHeightFn = () => {
|
|
||||||
listHeight.value = window.innerHeight - searchBox.value.offsetHeight - refBtn.value.offsetHeight - 182;
|
|
||||||
window.onresize = function () {
|
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const dataList = reactive({
|
|
||||||
dyTj: {
|
|
||||||
xAxisData: [],
|
|
||||||
seriesData: [],
|
|
||||||
},
|
|
||||||
jqlxTj: [],
|
|
||||||
jqlyTj: [],
|
|
||||||
CljgfTj: [],
|
|
||||||
XsfxTj: [],
|
|
||||||
})
|
|
||||||
const sortingRatioValue = ref({
|
|
||||||
jqlx: "",
|
|
||||||
jqly: "",
|
|
||||||
dywd: "",
|
|
||||||
ydfx: "",
|
|
||||||
xlwdfx: "",
|
|
||||||
czjgfx: "",
|
|
||||||
})
|
|
||||||
const sortingRatio = (data) => {
|
|
||||||
// 提取所有number值
|
|
||||||
// 计算总数
|
|
||||||
const total = data.reduce((sum, item) => sum + item.number, 0);
|
|
||||||
// 找出第一大和第二大的值及其对应的name
|
|
||||||
const sortedData = [...data].sort((a, b) => b.number - a.number);
|
|
||||||
const dataValue = sortedData.map(item => {
|
|
||||||
return {
|
|
||||||
...item,
|
|
||||||
ratio: total > 0 ? (item.number / total * 100).toFixed(2) + '%' : '0%',
|
|
||||||
}
|
}
|
||||||
})
|
|
||||||
return dataValue
|
|
||||||
}
|
|
||||||
const pageData = reactive({
|
|
||||||
parameter: { bjlbList: '' }
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
const getDictItemList = () => {
|
|
||||||
const promes = {
|
|
||||||
dictCode: "00000000"
|
|
||||||
}
|
}
|
||||||
getDictItem(promes).then(res => {
|
|
||||||
pageData.parameter.bjlbList = res.map(item => item.dm).join(',')
|
|
||||||
console.log(pageData.parameter.bjlbList);
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
getDictItemList()
|
|
||||||
const funAll = (val) => {
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
console.log(chageData.value);
|
|
||||||
const dev = getItem('deptId')[0]
|
|
||||||
sortingRatioValue.value = {}
|
|
||||||
textContent.value = BigTitle(`${endYears.value}年度西藏公安执法数据分析`) + headTitle({
|
|
||||||
orgName: dev.deptName,
|
|
||||||
serialNumber: timeValidate("", "mm"),
|
|
||||||
time: timeValidate(),
|
|
||||||
})
|
|
||||||
const data = `为全面、客观、准确掌握全区公安机关的执法状况，自治区公安厅基于数据统计，对全区公安机关${endYears.value}年度的执法状况作了客观分析。`
|
|
||||||
textContent.value += BiheadlinegTitle('1.接处警情况') + textStyle(data) + Firstlevelheading('一、执法状况总体分析')
|
|
||||||
getfxbgYdfx(val)
|
|
||||||
getfxbgTj()
|
|
||||||
getfxbgJqlxtj(val)
|
|
||||||
getfxbgJqlytj(val)
|
|
||||||
getfxbgDywdtj(val)
|
|
||||||
getfxgbCljgf(val)
|
|
||||||
getfxgbCzlfx(val)
|
|
||||||
showModel.value = true;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(() => sortingRatioValue.value, (val) => {
|
|
||||||
if (val.jqlx && val.jqly && val.dywd && val.ydfx && val.xlwdfx && val.czjgfx) {
|
|
||||||
textContent.value += val.jqlx + val.jqly + val.dywd + val.ydfx + val.xlwdfx + val.czjgfx + report() + signature()
|
|
||||||
}
|
|
||||||
}, { deep: true })
|
|
||||||
const getfxbgTj = (val) => {
|
|
||||||
jqypfxbgTj({ ypid: val }).then(res => {
|
|
||||||
const data = `${Time()} ，全区公安机关共接报各类警情${res.total}起,同比上升 ${res.tbbsb}%,同比上升${res.hbbsb}%`
|
|
||||||
textContent.value += BiheadlinegTitle('1.1接报警情') + textStyle(data)
|
|
||||||
dataList.XsfxTj = res
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 警情类型统计
|
|
||||||
const getfxbgJqlxtj = (val) => {
|
|
||||||
let params = {
|
|
||||||
...pageData.parameter,
|
|
||||||
ypid: val
|
|
||||||
}
|
|
||||||
jqypfxbgJqlxtj(params).then(res => {
|
|
||||||
const model = sortingRatio(res)
|
|
||||||
const data = `按警情类型来看，${model[0].name}最多，占到${model[0].ratio}；其次为${model[1].name}最多，占到${model[1].ratio}。`
|
|
||||||
sortingRatioValue.value.jqlx = Subheading('1.1.1类型维度') + textStyle(data)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 警情来源统计
|
|
||||||
const getfxbgJqlytj = (val) => {
|
|
||||||
jqypfxbgJqlytj({ ypid: val }).then(res => {
|
|
||||||
const model = sortingRatio(res)
|
|
||||||
const data = `按警情来源来看，${model[0].name}最多，占到${model[0].ratio}；其次为${model[1].name}最多，占到${model[1].ratio}。`
|
|
||||||
sortingRatioValue.value.jqly = Subheading('1.1.2来源维度') + textStyle(data)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 地域统计
|
|
||||||
const getfxbgDywdtj = (val) => {
|
|
||||||
jqypDywdtj({ ypid: val }).then(res => {
|
|
||||||
dataList.dyTj.xAxisData = res.map(it => it.ssbm)
|
|
||||||
dataList.dyTj.seriesData = [];
|
|
||||||
for (let i = 0; i < res.length; i++) {
|
|
||||||
dataList.dyTj.seriesData[i] = [];
|
|
||||||
for (let j = 0; j < res.length; j++) {
|
|
||||||
dataList.dyTj.seriesData[i][j] = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (let i = 0; i < dataList.dyTj.seriesData.length; i++) {
|
|
||||||
dataList.dyTj.seriesData[i][i] = res[i].number
|
|
||||||
}
|
|
||||||
const model = sortingRatio(res)
|
|
||||||
let data
|
|
||||||
if (model.length > 1) {
|
|
||||||
data = `从地市分布地市来看，${model[0].ssbm}警情量最大，占到全区警情总量的${model[0].number}。其次为${model[1].ssbm}和${model[2].ssbm}，两市警情量较为接近。警情量最少的为${model[model.length - 1].ssbm}。`
|
|
||||||
} else {
|
|
||||||
data = `从地市分布地市来看，${model[0].ssbm}警情量最大，占到全区警情总量的${model[0].number}。`
|
|
||||||
}
|
|
||||||
sortingRatioValue.value.dywd = Subheading('1.1.3地域维度') + textStyle(data)
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
//分析报告-时间维度-月分析
|
|
||||||
const getfxbgYdfx = (val) => {
|
|
||||||
jqypfxbgYdfx({ ypid: val }).then(res => {
|
|
||||||
const model = sortingRatio(res)
|
|
||||||
const data = `我们将所有警情按照月份划分进行统计发现，每月警情分布较为平均。最高月份为${model[0].month}月，占到${model[0].number}；最低月份为${model[res.length - 1].month}月，占到${model[res.length - 1].number}。考虑是因为${model[0].month}月为我区传统旅游旺季，进藏人员较多。 ${model[res.length - 1].month}月一般春节及藏历新年期间，在藏人员较少。`
|
|
||||||
sortingRatioValue.value.ydfx = Subheading('1.1.4时间维度') + textStyle(data)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 分析报告-处理结果分析
|
|
||||||
const getfxgbCljgf = (val) => {
|
|
||||||
jqypfxbgCljgf({ ypid: val }).then(res => {
|
|
||||||
// sortingRatioValue.Cljgf =
|
|
||||||
const model = sortingRatio(res)
|
|
||||||
|
|
||||||
let czjgfx = `从警情处置结果来看，`
|
|
||||||
model.forEach(item => {
|
|
||||||
czjgfx += `${item.name}，占到${item.ratio};`
|
|
||||||
})
|
|
||||||
sortingRatioValue.value.xlwdfx = BiheadlinegTitle('1.2警情处置') + Firstlevelheading('1.2.1结果维度') + textStyle(czjgfx)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 分析报告-处置率分析
|
|
||||||
const getfxgbCzlfx = (val) => {
|
|
||||||
|
|
||||||
jqypfxbgCzlfx({ ypid: val }).then(res => {
|
|
||||||
dataList.withinTj = [{
|
|
||||||
name: "超时分流(超过24小时)",
|
|
||||||
value: res.within24h ? res.within24h : 0
|
|
||||||
}, {
|
|
||||||
name: "按时分流(24小时内)",
|
|
||||||
value: res.over24h ? res.over24h : 0
|
|
||||||
}]
|
|
||||||
const data = `从处警效率来看，24小时以内处警的，占到${res.over24h}%。表明我区公安机关在接警之后能够在第一时间处警。`
|
|
||||||
sortingRatioValue.value.czjgfx = Subheading('1.2.2效率维度') + textStyle(data)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const timeDate = ref()
|
|
||||||
const endYears = ref()
|
|
||||||
const Time = () => {
|
|
||||||
const currentYear = new Date().getFullYear();
|
|
||||||
const startOfYear = new Date(currentYear, 0, 1); // 今年1月1日
|
|
||||||
const endOfYear = new Date(currentYear, 11, 31, 23); // 今年12月31日23:59:59.999
|
|
||||||
const year = startOfYear.getFullYear();
|
|
||||||
const month = String(startOfYear.getMonth() + 1).padStart(2, '0');
|
|
||||||
const day = String(startOfYear.getDate()).padStart(2, '0');
|
|
||||||
const endYear = endOfYear.getFullYear();
|
|
||||||
const endMonth = String(endOfYear.getMonth() + 1).padStart(2, '0');
|
|
||||||
const endDay = String(endOfYear.getDate()).padStart(2, '0');
|
|
||||||
timeDate.value = `${endYear}年${endMonth}月${endDay}日`
|
|
||||||
endYears.value = year
|
|
||||||
return `${year}年${month}月${day}日 至${endYear}年${endMonth}月${endDay}日`
|
|
||||||
}
|
|
||||||
|
|
||||||
const showHistoricalReport = ref(false)
|
|
||||||
|
|
||||||
const openHistoricalReport = (val) => {
|
|
||||||
chageData.value = val
|
|
||||||
showHistoricalReport.value = true
|
|
||||||
}
|
|
||||||
// const
|
|
||||||
const getHistory = (val) => {
|
|
||||||
|
|
||||||
textContent.value = val
|
|
||||||
showHistoricalReport.value = false
|
|
||||||
showModel.value = true
|
|
||||||
}
|
|
||||||
const SaveReport = (val) => {
|
|
||||||
|
|
||||||
ElMessageBox.prompt('请输入名称', '提示', {
|
|
||||||
confirmButtonText: '确认',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
// inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
|
|
||||||
// inputErrorMessage: 'Invalid Email',
|
|
||||||
})
|
|
||||||
.then(({ value }) => {
|
|
||||||
const promes = {
|
|
||||||
bgmc:value,
|
|
||||||
bgnr: val,
|
|
||||||
ypid:chageData.value
|
|
||||||
}
|
|
||||||
qcckPost( promes , "/mosty-gsxt/gsxtYpbg/addEntity")
|
|
||||||
.then(() => {
|
|
||||||
ElMessage.success("保存成功");
|
|
||||||
})
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
ElMessage({
|
|
||||||
type: 'info',
|
|
||||||
message: '取消保存',
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
.catch(() => { });
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.statistical-analysis {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.left-menu {
|
|
||||||
float: left;
|
|
||||||
width: 280px;
|
|
||||||
height: calc(100% - 10px);
|
|
||||||
padding: 20px 4px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: #fff;
|
|
||||||
border-right: 1px solid #e8e8e8;
|
|
||||||
color: #333;
|
|
||||||
line-height: 32px;
|
|
||||||
|
|
||||||
::v-deep .checkBox {
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.checkall {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-checkbox-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .is-checked {
|
|
||||||
background: rgb(242, 249, 255);
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-checkbox {
|
|
||||||
padding-left: 8px;
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.all {
|
|
||||||
width: calc(100% - 4px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-content {
|
|
||||||
float: left;
|
|
||||||
// width: calc(100% - 290px);
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-left: 10px;
|
|
||||||
border-radius: 4px;
|
|
||||||
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: 18px;
|
|
||||||
overflow: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
background: #fff;
|
|
||||||
padding: 4px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.cntItem {
|
|
||||||
width: 300px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
color: #787878;
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.foot {
|
|
||||||
text-align: right;
|
|
||||||
margin-top: 4px;
|
|
||||||
border-top: 1px solid #ccc;
|
|
||||||
padding: 4px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -52,12 +52,7 @@ const getList = () =>{
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
const onClickPush = (val) => {
|
const onClickPush = (val) => {
|
||||||
router.push({
|
router.push({ path: '/tsypHome', query: { id: val.id } })
|
||||||
path: '/tsypHome',
|
|
||||||
query: {
|
|
||||||
id: val.id,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user