supervision
/
supervision-vue
4
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge remote-tracking branch 'origin/master'

main
sjh 1 year ago
parent
970b73c495 c37b8f9064
commit
59da8d6459
19 changed files with 1174 additions and 619 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      index.html
  2. BIN
      public/imgs/police.jpeg
  3. 3
      src/App.vue
  4. 11
      src/api/sensitivePerception/profileDepart.ts
  5. 28
      src/api/sensitivePerception/profilePolice.ts
  6. 2
      src/components/datav/card.vue
  7. 2
      src/components/datav/chart-bar-mail.vue
  8. 33
      src/components/datav/chart-bar.vue
  9. 6
      src/components/datav/tabs.vue
  10. 4
      src/components/description-pair.vue
  11. 15
      src/utils/util.ts
  12. 4
      src/views/data/Ajhc.vue
  13. 59
      src/views/datav/CaseVerif.vue
  14. 14
      src/views/datav/Gobal.vue
  15. 96
      src/views/datav/MailVisits.vue
  16. 640
      src/views/sensitivePerception/DepartNegative.vue
  17. 665
      src/views/sensitivePerception/PoliceNegative.vue
  18. 122
      src/views/work/Fav.vue
  19. 88
      vite.config.ts.timestamp-1730686774606-8b00c58248ca4.mjs

1
index.html
Unescape View File

@ -10,6 +10,7 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

BIN
public/imgs/police.jpeg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

3
src/App.vue
Unescape View File

@ -10,4 +10,5 @@ const elConfig = {
zIndex: 3000, zIndex: 3000,
locale: zhCn locale: zhCn
} }
</script> </script>

11
src/api/sensitivePerception/profileDepart.ts
Unescape View File

@ -7,8 +7,15 @@ export function listDepartNegative(query) {
}); });
} }
export function getDepartProfile(departId) { export function getDepartProfile(departId, query) {
return request.get({ return request.get({
url: `/profile/depart/${departId}` url: `/profile/depart/${departId}`,
query
});
}
export function listNegativeMonthly(departId) {
return request.get({
url: `/profile/depart/${departId}/month`
}); });
} }

28
src/api/sensitivePerception/profilePolice.ts
Unescape View File

@ -0,0 +1,28 @@
import request from "@/api/request";
export function listPoliceNegative(query) {
return request.get({
url: `/profile/police`,
query
});
}
export function getPoliceProfile(idCode, query) {
return request.get({
url: `/profile/police/${idCode}`,
query
});
}
export function listNegativeByPoliceIdCode(idCode, query) {
return request.get({
url: `/profile/police/${idCode}/negative`,
query
});
}
export function listNegativeMonthly(idCode) {
return request.get({
url: `/profile/police/${idCode}/month`
});
}

2
src/components/datav/card.vue
Unescape View File

@ -23,7 +23,7 @@ defineProps({
<style lang="scss" scoped> <style lang="scss" scoped>
.datav-card { .datav-card {
padding: 12px; padding: 12px;
margin-top: 20px; margin-bottom: 20px;
position: relative; position: relative;
z-index: 1; z-index: 1;
&::before { &::before {

2
src/components/datav/chart-bar-mail.vue
Unescape View File

@ -3,7 +3,6 @@
<span class="bar-title">{{ title }}</span> <span class="bar-title">{{ title }}</span>
<span class="bar-sub-title">{{ subTitle }}</span> <span class="bar-sub-title">{{ subTitle }}</span>
</div> </div>
<el-scrollbar height="300px">
<div> <div>
<div <div
class="flex v-center bar-item between" class="flex v-center bar-item between"
@ -32,7 +31,6 @@
</span> </span>
</div> </div>
</div> </div>
</el-scrollbar>
</template> </template>
<script setup> <script setup>

33
src/components/datav/chart-bar.vue
Unescape View File

@ -8,14 +8,17 @@
class="flex v-center bar-item between" class="flex v-center bar-item between"
v-for="item in data" v-for="item in data"
:size="size" :size="size"
:style="{'--label-width': `${labelWidth}px`}"
> >
<span class="bar-item-name mr-10">{{ item.label }}</span> <span class="bar-item-label mr-10">
<div class="bar-item_content mr-16"> {{ item.label }}
</span>
<div class="bar-item_content mr-16" >
<div <div
class="bar-item_content-bar" class="bar-item_content-bar"
:style="{ :style="{
width: `${(item.value / max) * 100}%`, width: `${(item.value / max) * 100}%`,
background: getColor(item.value / max), background: getColor(item.value / max * 100),
}" }"
></div> ></div>
</div> </div>
@ -59,14 +62,19 @@ const props = defineProps({
color: { color: {
type: Object, type: Object,
default: "linear-gradient(270deg, #63e700 0%, #19674c 100%)" default: "linear-gradient(270deg, #63e700 0%, #19674c 100%)"
},
labelWidth: {
type: Number,
default: 80
} }
}); });
const max = ref(100); const max = ref(100);
watch( watch(
() => props.data, () => props.data,
(arr) => { () => {
getMax() getMax()
} }
); );
@ -86,8 +94,7 @@ function getColor(val) {
} }
if (props.color instanceof Array) { if (props.color instanceof Array) {
const colors = [...props.color] const colors = [...props.color]
colors.reduce((a, b) => b.percentage - a.percentage) colors.sort((a, b) => b.percentage - a.percentage)
console.log(colors)
for (let i = 0; i < colors.length; i++) { for (let i = 0; i < colors.length; i++) {
if (val > colors[0].percentage) { if (val > colors[0].percentage) {
return colors[0].color; return colors[0].color;
@ -120,17 +127,23 @@ function getColor(val) {
} }
} }
} }
.bar-item-name { &[size="small"] {
width: 19%; height: 25px;
font-size: 12px;
}
.bar-item-label {
text-align: right; text-align: right;
width: var(--label-width);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.bar-item_content { .bar-item_content {
width: 55%; width: calc(100% - var(--label-width) - 80px);
.bar-item_content-bar { .bar-item_content-bar {
width: 0; width: 0;
height: 9px; height: 9px;
background: linear-gradient(270deg, #63e700 0%, #19674c 100%); background: linear-gradient(270deg, #63e700 0%, #19674c 100%);
box-shadow: 1px 0 0px 0px #020b5f;
transition: width 0.3s; transition: width 0.3s;
} }
} }

6
src/components/datav/tabs.vue
Unescape View File

@ -41,8 +41,10 @@ const props = defineProps({
default: "", default: "",
}, },
}); });
const slots = useSlots().default();
const emit = defineEmits(["update:modelValue"]); const emit = defineEmits(["update:modelValue"]);
const activeTab = ref(props.modelValue); const activeTab = ref(props.modelValue || slots[0].props.name);
watch(() => props.modelValue, () => { watch(() => props.modelValue, () => {
activeTab.value = props.modelValue activeTab.value = props.modelValue
}) })
@ -52,7 +54,7 @@ watch(activeTab, (val) => {
provide("activeTab", activeTab); provide("activeTab", activeTab);
const slots = useSlots().default();
function handleChangeActiveTab(name) { function handleChangeActiveTab(name) {
activeTab.value = name; activeTab.value = name;

4
src/components/description-pair.vue
Unescape View File

@ -17,7 +17,7 @@ defineProps({
default: "", default: "",
}, },
value1: { value1: {
type: String, type: Number,
default: "", default: "",
}, },
label2: { label2: {
@ -25,7 +25,7 @@ defineProps({
default: "", default: "",
}, },
value2: { value2: {
type: String, type: Number,
default: "", default: "",
}, },
size: { size: {

15
src/utils/util.ts
Unescape View File

@ -368,4 +368,19 @@ export function getInvolveProblem(json) {
return '' return ''
} }
return JSON.parse(json).map(item => item.dictLabel).join(' ') return JSON.parse(json).map(item => item.dictLabel).join(' ')
}
export function getGenderFromIdCode(idCode) {
// 检查身份证号码是否有效（长度为18位）
if (!idCode || idCode.length !== 18) {
return "";
}
// 获取第17位数字
const genderCode = parseInt(idCode.charAt(16), 10);
// 检查是否为数字
if (isNaN(genderCode)) {
return "";
}
// 根据第17位数字判断性别
return genderCode % 2 === 0 ? "女" : "男";
} }

4
src/views/data/Ajhc.vue
Unescape View File

@ -226,7 +226,7 @@
prop="discoveryTime" prop="discoveryTime"
show-overflow-tooltip show-overflow-tooltip
/> />
<el-table-column label="问题发生时间" prop="happenTime" show-overflow-tooltip /> <!-- <el-table-column label="问题发生时间" prop="happenTime" show-overflow-tooltip />-->
<el-table-column <el-table-column
label="问题来源" label="问题来源"
prop="problemSources" prop="problemSources"
@ -244,7 +244,7 @@
/> />
<el-table-column label="业务类别" prop="businessTypeName" /> <el-table-column label="业务类别" prop="businessTypeName" />
<el-table-column label="涉嫌问题" prop="involveProblem" /> <el-table-column label="涉嫌问题" prop="involveProblem" />
<el-table-column label="涉及警种" prop="policeTypeName" /> <!-- <el-table-column label="涉及警种" prop="policeTypeName" />-->
<el-table-column <el-table-column
label="涉及单位" label="涉及单位"
prop="involveDepartName" prop="involveDepartName"

59
src/views/datav/CaseVerif.vue
Unescape View File

@ -7,23 +7,27 @@
<el-col :span="6"> <el-col :span="6">
<datav-card title="分县市局排名" subTitle="案件数"> <datav-card title="分县市局排名" subTitle="案件数">
<datav-tabs <datav-tabs
v-model="activeTab"
type="bottom-button" type="bottom-button"
> >
<datav-tab-item label="分县市局" name="1"> <datav-tab-item label="分县市局" name="1">
<datav-chart-bar <el-scrollbar height="350px">
:data="fxsjBarList" <datav-chart-bar
size="large" :data="fxsjBarList"
/> size="large"
:color="colors"
/>
</el-scrollbar>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="局属单位" name="2"> <datav-tab-item label="局属单位" name="2">
<datav-chart-bar <el-scrollbar height="350px">
:data="jsdwBarList" <datav-chart-bar
:max="11" :data="jsdwBarList"
size="large" :max="11"
/> size="large"
:color="colors"
/>
</el-scrollbar>
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>
</datav-card> </datav-card>
<datav-card title="案件问题性质"> <datav-card title="案件问题性质">
@ -181,13 +185,16 @@ function getData() {
watch(time, () => { watch(time, () => {
getData(); getData();
}) });
onMounted(() => { onMounted(() => {
getData(); getData();
}); });
const zfbaPieOption = computed(() => { const zfbaPieOption = computed(() => {
return { return {
tooltip: {
trigger: "item",
},
series: [ series: [
{ {
type: "pie", type: "pie",
@ -203,6 +210,9 @@ const zfbaPieOption = computed(() => {
const fwglPieOption = computed(() => { const fwglPieOption = computed(() => {
return { return {
tooltip: {
trigger: "item",
},
series: [ series: [
{ {
type: "pie", type: "pie",
@ -218,6 +228,9 @@ const fwglPieOption = computed(() => {
const jjjgPieOption = computed(() => { const jjjgPieOption = computed(() => {
return { return {
tooltip: {
trigger: "item",
},
series: [ series: [
{ {
type: "pie", type: "pie",
@ -233,6 +246,9 @@ const jjjgPieOption = computed(() => {
const ajlyPieOption = computed(() => { const ajlyPieOption = computed(() => {
return { return {
tooltip: {
trigger: "item",
},
series: [ series: [
{ {
type: "pie", type: "pie",
@ -351,6 +367,9 @@ const option1 = ref({
}); });
const option4 = { const option4 = {
tooltip: {
trigger: "item",
},
series: [ series: [
{ {
type: "pie", type: "pie",
@ -371,7 +390,21 @@ const option4 = {
], ],
}; };
const activeTab = ref("1");
const colors = [
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
percentage: 80,
},
{
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
percentage: 60,
},
{
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
percentage: 40,
},
];
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

14
src/views/datav/Gobal.vue
Unescape View File

@ -387,49 +387,49 @@ const option1 = ref({
const data1 = [ const data1 = [
{ {
name: "开福分局", label: "开福分局",
value: 97, value: 97,
unit: "%", unit: "%",
numerator: 97, numerator: 97,
denominator: 100, denominator: 100,
}, },
{ {
name: "芙蓉分局", label: "芙蓉分局",
value: 90, value: 90,
unit: "%", unit: "%",
numerator: 90, numerator: 90,
denominator: 100, denominator: 100,
}, },
{ {
name: "岳麓分局", label: "岳麓分局",
value: 85, value: 85,
unit: "%", unit: "%",
numerator: 85, numerator: 85,
denominator: 100, denominator: 100,
}, },
{ {
name: "雨花分局", label: "雨花分局",
value: 80, value: 80,
unit: "%", unit: "%",
numerator: 80, numerator: 80,
denominator: 100, denominator: 100,
}, },
{ {
name: "望城分局", label: "望城分局",
value: 71, value: 71,
unit: "%", unit: "%",
numerator: 71, numerator: 71,
denominator: 100, denominator: 100,
}, },
{ {
name: "浏阳市局", label: "浏阳市局",
value: 66, value: 66,
unit: "%", unit: "%",
numerator: 66, numerator: 66,
denominator: 100, denominator: 100,
}, },
{ {
name: "长沙县局", label: "长沙县局",
value: 62, value: 62,
unit: "%", unit: "%",
numerator: 62, numerator: 62,

96
src/views/datav/MailVisits.vue
Unescape View File

@ -46,26 +46,31 @@
type="bottom-button" type="bottom-button"
> >
<datav-tab-item label="初信初访" name="1"> <datav-tab-item label="初信初访" name="1">
<datav-chart-bar-mail <el-scrollbar height="300px">
:data="fxsjFirstMailList" <datav-chart-bar-mail
size="large" :data="fxsjFirstMailList"
:max="11" size="large"
/> :max="11"
/>
</el-scrollbar>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="重复信访" name="2"> <datav-tab-item label="重复信访" name="2">
<datav-chart-bar-mail <el-scrollbar height="300px">
:data="fxsjRepeatMailList" <datav-chart-bar-mail
:max="11" :data="fxsjRepeatMailList"
size="large" :max="11"
/> size="large"
/>
</el-scrollbar>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="领导接访" name="3"> <datav-tab-item label="领导接访" name="3">
<datav-chart-bar-mail <el-scrollbar height="300px">
:data="fxsjLeaderViewMailList" <datav-chart-bar
:max="11" :data="fxsjLeaderViewMailList"
size="large" :max="11"
/> size="large"
/>
</el-scrollbar>
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>
</datav-tab-item> </datav-tab-item>
@ -75,33 +80,32 @@
type="bottom-button" type="bottom-button"
> >
<datav-tab-item label="初信初访" name="1"> <datav-tab-item label="初信初访" name="1">
<div style="height: 300px; overflow: auto"> <el-scrollbar height="300px">
<datav-chart-bar <datav-chart-bar-mail
:data="bwzdFirstMailList" :data="bwzdFirstMailList"
size="large" size="large"
/> />
</div> </el-scrollbar>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="重复信访" name="2"> <datav-tab-item label="重复信访" name="2">
<div style="height: 300px; overflow: auto"> <el-scrollbar height="300px">
<datav-chart-bar <datav-chart-bar-mail
:data="bwzdRepeatMailList" :data="bwzdRepeatMailList"
:max="11" :max="11"
size="large" size="large"
/> />
</div> </el-scrollbar>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="领导接访" name="3"> <datav-tab-item label="领导接访" name="3">
<div style="height: 300px; overflow: auto"> <el-scrollbar height="300px">
<datav-chart-bar <datav-chart-bar-mail
:data="bwzdLeaderViewMailList" :data="bwzdLeaderViewMailList"
:max="11" :max="11"
size="large" size="large"
/> />
</div> </el-scrollbar>
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>
</datav-card> </datav-card>
@ -242,24 +246,30 @@
type="bottom-button" type="bottom-button"
> >
<datav-tab-item label="领导督办" name="1"> <datav-tab-item label="领导督办" name="1">
<el-scrollbar height="300px">
<datav-chart-bar-mail <datav-chart-bar-mail
:data="xx" :data="xx"
size="large" size="large"
/> />
</el-scrollbar>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="缠访闹访" name="2"> <datav-tab-item label="缠访闹访" name="2">
<el-scrollbar height="300px">
<datav-chart-bar-mail <datav-chart-bar-mail
:data="xx" :data="xx"
:max="11" :max="11"
size="large" size="large"
/> />
</el-scrollbar>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="群体集访" name="3"> <datav-tab-item label="群体集访" name="3">
<el-scrollbar height="300px">
<datav-chart-bar-mail <datav-chart-bar-mail
:data="xx" :data="xx"
:max="11" :max="11"
size="large" size="large"
/> />
</el-scrollbar>
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>
@ -270,24 +280,30 @@
type="bottom-button" type="bottom-button"
> >
<datav-tab-item label="领导督办" name="1"> <datav-tab-item label="领导督办" name="1">
<el-scrollbar height="300px">
<datav-chart-bar-mail <datav-chart-bar-mail
:data="xx" :data="xx"
size="large" size="large"
/> />
</el-scrollbar>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="缠访闹访" name="2"> <datav-tab-item label="缠访闹访" name="2">
<el-scrollbar height="300px">
<datav-chart-bar-mail <datav-chart-bar-mail
:data="xx" :data="xx"
:max="11" :max="11"
size="large" size="large"
/> />
</el-scrollbar>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="群体集访" name="3"> <datav-tab-item label="群体集访" name="3">
<el-scrollbar height="300px">
<datav-chart-bar-mail <datav-chart-bar-mail
:data="xx" :data="xx"
:max="11" :max="11"
size="large" size="large"
/> />
</el-scrollbar>
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>
@ -303,11 +319,11 @@
/> />
</datav-card> </datav-card>
</el-col> </el-col>
</el-row> </el-row>
</main> </main>
</div> </div>
</el-scrollbar> </el-scrollbar>
</template> </template>
@ -363,7 +379,6 @@ const option = {
}, },
], ],
}; };
const option1 = ref({ const option1 = ref({
xAxis: { xAxis: {
type: "category", type: "category",
@ -415,8 +430,6 @@ const option1 = ref({
}, },
], ],
}); });
const option2 = { const option2 = {
series: [ series: [
{ {
@ -455,10 +468,6 @@ const option3 = {
}, },
], ],
}; };
const activeTab = ref("1"); const activeTab = ref("1");
const bwzdActiveTab = ref("1"); // 部委支队初重信tab const bwzdActiveTab = ref("1"); // 部委支队初重信tab
const activeMailTrend = ref("1"); // 信访趋势tab const activeMailTrend = ref("1"); // 信访趋势tab
@ -503,7 +512,7 @@ const time = ref([
* @type {Ref<UnwrapRef<string>, UnwrapRef<string> | string>} * @type {Ref<UnwrapRef<string>, UnwrapRef<string> | string>}
*/ */
const selectedOption = ref('2024'); const selectedOption = ref('2024');
const shihao= ref(1); const shihao = ref(1);
const handleCommand = async (command) => { const handleCommand = async (command) => {
selectedOption.value = `${command}`; selectedOption.value = `${command}`;
const recentlyMailTrend = await getRecentlyMailTrend({ const recentlyMailTrend = await getRecentlyMailTrend({
@ -531,8 +540,6 @@ function initRecentlyMailTrend() {
} }
watch(activeMailTrend, async () => { watch(activeMailTrend, async () => {
// console.log("Active Tab: ", activeMailTrend.value);
// console.log("Active Tab Right: ", selectedOption.value);
const recentlyMailTrend = await getRecentlyMailTrend({ const recentlyMailTrend = await getRecentlyMailTrend({
sourcesCode: activeMailTrend.value, sourcesCode: activeMailTrend.value,
year: selectedOption.value, year: selectedOption.value,
@ -560,6 +567,7 @@ onMounted(() => {
// console.log("Active Tab: ", activeMailTab.value); // console.log("Active Tab: ", activeMailTab.value);
// }, 3000); // 每3秒切换一次 // }, 3000); // 每3秒切换一次
}); });
function getData() { function getData() {
getMailVisitsData(time.value).then((data) => { getMailVisitsData(time.value).then((data) => {
overview.value = data.overview; overview.value = data.overview;
@ -577,8 +585,6 @@ function getData() {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/style/datav.scss"; @import "@/style/datav.scss";
@ -589,4 +595,16 @@ function getData() {
top: 65px; top: 65px;
} }
.main {
padding: 0 10px 10px;
}
.main-left,
.main-right {
float: left;
width: 25%;
padding: 0 10px;
height: 90%;
}
</style> </style>

640
src/views/sensitivePerception/DepartNegative.vue
Unescape View File

@ -4,7 +4,22 @@
<el-form :label-width="114"> <el-form :label-width="114">
<el-row> <el-row>
<el-col :span="6"> <el-col :span="6">
<el-form-item label="三级单位"> <el-form-item label="单位类型">
<el-select v-model="query.departLevel">
<el-option value="3" 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 <depart-tree-select
v-model="query.departId" v-model="query.departId"
:check-strictly="false" :check-strictly="false"
@ -12,9 +27,10 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-form-item label="统计时间"> <el-form-item label="单位简称">
<date-time-range-picker-ext <el-input
v-model="query.crtTime" v-model="query.departName"
placeholder="请输入"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -32,7 +48,7 @@
</div> </div>
</div> </div>
</header> </header>
<div class="table-container"> <div class="table-container" v-loading="mainLoading">
<el-table :data="list"> <el-table :data="list">
<el-table-column label="单位名称"> <el-table-column label="单位名称">
<template #default="{ row }"> <template #default="{ row }">
@ -67,7 +83,11 @@
align="center" align="center"
width="160" width="160"
/> />
<el-table-column label="风险指数" align="center" width="160">
<template #default="{ row }">
<span>/</span>
</template>
</el-table-column>
<el-table-column label="操作"> <el-table-column label="操作">
<template #default="{ row }"> <template #default="{ row }">
<el-button <el-button
@ -96,218 +116,280 @@
</div> </div>
</div> </div>
<el-dialog title="单位问题画像" v-model="show" width="85vw" top="2vh"> <el-dialog
title="单位问题画像"
v-model="show"
width="85vw"
top="1vh"
style="margin: 1vh auto"
>
<header class="flex center v-center gap"> <header class="flex center v-center gap">
<label>统计范围</label> <label>统计范围</label>
<div style="width: 320px"> <div style="width: 320px">
<date-time-range-picker-ext <date-time-range-picker-ext
v-model="query.crtTime" v-model="time"
@change="getProfileData"
style="width: 300px" style="width: 300px"
/> />
</div> </div>
<el-button type="primary">查询</el-button> <el-button type="primary" @click="getProfileData">查询</el-button>
</header> </header>
<main v-loading="loading"> <el-scrollbar
<el-row> max-height="calc(98vh - 120px)"
<el-col :span="8"> v-loading="loading"
<h5>单位情况</h5> element-loading-text="单位问题画像加载中..."
<div class="row"> >
<div class="col col-24"> <main>
<label>单位名称</label> <el-row class="mb-20">
<span>{{ departInfo.name }}</span> <el-col :span="8">
</div> <h5>单位情况</h5>
<div class="col col-24"> <div class="row">
<label>所长</label> <div class="col col-24">
<span>{{ departInfo.mainRole }}</span> <label>单位名称</label>
</div> <span>{{ departInfo.name }}</span>
<div class="col col-24">
<label>副所长</label>
<span>
<span
v-for="item in departInfo.deputyRole"
:key="item"
>{{ item }}</span
>
</span>
</div>
</div>
<el-row>
<el-col :span="12">
<description-pair
label1="民警总人数"
label2="问题涉及民警数"
:value1="departInfo.policeSize"
:value2="departInfo.policeSize"
size="large"
/>
</el-col>
<el-col :span="12">
<description-pair
label1="协辅警人数"
label2="问题涉及协辅警数"
:value1="departInfo.auxSize"
:value2="departInfo.policeSize"
size="large"
/>
</el-col>
</el-row>
</el-col>
<el-col :span="8">
<h5>问题情况</h5>
<el-row>
<el-col :span="6" class="text-center">
<div class="text-primary" style="font-size: 34px">
{{ activeRow.verifySize }}
</div>
<div>问题总数</div>
</el-col>
<el-col :span="18">
<el-row>
<el-col :span="12">
<description-pair
label1="110接处警量"
label2="问题数"
value1="132"
value2="21"
/>
</el-col>
<el-col :span="12">
<description-pair
label1="执法办案"
label2="问题数"
value1="132"
value2="21"
/>
</el-col>
</el-row>
</el-col>
</el-row>
</el-col>
<el-col :span="8">
<h5>风险指数</h5>
<div class="flex center">
<el-progress
type="dashboard"
:percentage="78"
:stroke-width="16"
:width="250"
color="#DC6231"
>
<div style="line-height: 64px" class="mt-40">
<span
style="
font-weight: 600;
font-size: 60px;
color: #e87749;
"
>78</span
>
<span style="font-size: 18px; color: #999"
>分</span
>
</div> </div>
<div style="font-size: 14px" class="mb-10"> <div class="col col-24">
分险指标值 <label>所长</label>
<span>{{ departInfo.mainRole }}</span>
</div> </div>
<div style="color: #e87749; font-size: 28px"> <div class="col col-24">
中风险 <label>副所长</label>
<span>
<span
v-for="item in departInfo.deputyRole"
:key="item"
class="mr-10"
>{{ item }}</span
>
</span>
</div> </div>
</el-progress> </div>
</div> <el-row>
</el-col> <el-col :span="12">
</el-row> <description-pair
<el-row> label1="民警总人数"
<el-col :span="8"> label2="问题涉及民警数"
<h5>问题来源占比</h5> :value1="departInfo.policeSize"
:value2="departInfo.policeSize"
size="large"
/>
</el-col>
<el-col :span="12">
<description-pair
label1="协辅警人数"
label2="问题涉及协辅警数"
:value1="departInfo.auxSize"
:value2="departInfo.policeSize"
size="large"
/>
</el-col>
</el-row>
</el-col>
<el-col :span="8">
<h5>问题情况</h5>
<el-row
class="flex v-center"
style="height: calc(100% - 76px)"
>
<el-col :span="6" class="text-center">
<div
class="text-primary"
style="font-size: 34px"
>
{{ activeRow.verifySize }}
</div>
<div>问题总数</div>
</el-col>
<el-col :span="18">
<el-row>
<el-col :span="12">
<description-pair
label1="110接处警量"
label2="问题数"
:value1="
negativeInfo.jcjBusinessSize
"
:value2="negativeInfo.jcjSize"
/>
</el-col>
<el-col :span="12">
<description-pair
label1="执法办案"
label2="问题数"
:value1="
negativeInfo.zfbaBusinessSize
"
:value2="negativeInfo.zfbaSize"
/>
</el-col>
</el-row>
</el-col>
</el-row>
</el-col>
<el-col :span="8">
<h5>风险指数</h5>
<div class="flex center">
<el-progress
type="dashboard"
:percentage="78"
:stroke-width="16"
:width="250"
color="#DC6231"
>
<div style="line-height: 64px" class="mt-40">
<span
style="
font-weight: 600;
font-size: 60px;
color: #e87749;
"
>78</span
>
<span style="font-size: 18px; color: #999"
>分</span
>
</div>
<div style="font-size: 14px" class="mb-10">
分险指标值
</div>
<div style="color: #e87749; font-size: 28px">
中风险
</div>
</el-progress>
</div>
</el-col>
</el-row>
<el-row class="mb-20">
<el-col :span="8">
<h5>问题来源占比</h5>
<v-charts
style="height: 320px"
:option="problemSourcesPieOptions"
autoresize
/>
</el-col>
<el-col :span="8">
<h5>业务类型占比</h5>
<v-charts
style="height: 320px"
:option="businessTypePieOptions"
autoresize
/>
</el-col>
<el-col :span="8">
<h5>风险问题构成</h5>
<v-charts
style="height: 320px"
:option="radarOption"
autoresize
/>
</el-col>
</el-row>
<el-row class="mb-20">
<el-col :span="8">
<h5>个人问题排名</h5>
<datav-chart-bar
size="small"
:data="policeBarList"
:color="colors"
/>
</el-col>
<el-col :span="8">
<h5>突出问题排名</h5>
<datav-chart-bar size="small" :data="problemTypeBarList" :color="colors" />
</el-col>
<el-col :span="8">
<h5>单位问题标签</h5>
</el-col>
</el-row>
<div style="margin-top: 60px">
<h5>问题变化趋势</h5>
<v-charts <v-charts
style="height: 320px" style="height: 320px"
:option="pieOptions" :option="barOption"
autoresize autoresize
/> />
</el-col> <div></div>
<el-col :span="8"> </div>
<h5>业务类型占比</h5> <h5>问题清单</h5>
<v-charts <el-table :data="negativeList">
style="height: 320px" <el-table-column label="发现时间" prop="discoveryTime" />
:option="pieOptions" <el-table-column label="问题来源" prop="problemSources" />
autoresize <el-table-column label="业务类别" prop="businessTypeName" />
<el-table-column
label="涉及单位"
prop="involveDepartName"
/> />
</el-col> <el-table-column
<el-col :span="8"> label="核查情况"
<h5>风险问题构成</h5> prop="checkStatusName"
<v-charts width="140"
style="height: 320px" align="center"
:option="radarOption"
autoresize
/> />
</el-col> <el-table-column label="操作" width="160">
</el-row> <template #default="{ row }">
<el-row> <el-button
<el-col :span="8"> type="primary"
<h5>个人问题排名</h5> link
<datav-chart-bar :data="barList" :color="colors" /> @click="handleAction(row)"
</el-col> >查看详情</el-button
<el-col :span="8"> >
<h5>突出问题排名</h5> </template>
<datav-chart-bar :data="barList" /> </el-table-column>
</el-col> </el-table>
<el-col :span="8"> <div class="flex end mt-8">
<h5>单位问题标签</h5> <el-pagination
<datav-chart-bar :data="barList" /> @size-change="getNegativeList"
</el-col> @current-change="getNegativeList"
</el-row> :current-page="negativeQuery.current"
<h5>问题变化趋势</h5> :page-sizes="[10, 20, 50]"
<v-charts style="height: 320px" :option="barOption" autoresize /> :page-size="negativeQuery.size"
<div></div> v-model:current-page="negativeQuery.current"
<h5>问题清单</h5> layout="total, sizes, prev, pager, next"
<el-table :data="negativeList"> :total="negativeTotal"
<el-table-column label="发现时间" prop="discoveryTime" /> >
<el-table-column label="问题来源" prop="problemSources" /> </el-pagination>
<el-table-column label="业务类别" prop="businessTypeName" /> </div>
<el-table-column label="涉及单位" prop="involveDepartName" /> </main>
<el-table-column </el-scrollbar>
label="核查情况"
prop="checkStatusName"
width="180"
align="center"
/>
</el-table>
<div class="flex end mt-8">
<el-pagination
@size-change="getNegativeList"
@current-change="getNegativeList"
:current-page="negativeQuery.current"
:page-sizes="[10, 20, 50]"
:page-size="negativeQuery.size"
v-model:current-page="negativeQuery.current"
layout="total, sizes, prev, pager, next"
:total="negativeTotal"
>
</el-pagination>
</div>
</main>
</el-dialog> </el-dialog>
<negative-dialog
v-model="negativeShow"
:id="activeNegativeId"
@close="negativeShow = false"
/>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import vCharts from "vue-echarts"; import vCharts from "vue-echarts";
import { import {
listDepartNegative, listDepartNegative,
getDepartProfile, getDepartProfile,
listNegativeMonthly,
} from "@/api/sensitivePerception/profileDepart"; } from "@/api/sensitivePerception/profileDepart";
import { listNegative } from "@/api/work/negative"; import { listNegative } from "@/api/work/negative";
import { InspectCase } from "@/enums/dictEnums"; import { InspectCase } from "@/enums/dictEnums";
import moment from "moment";
const query = ref({ const query = ref({
current: 1, current: 1,
size: 10, 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 list = ref<any[]>([]);
const total = ref(0); const total = ref(0);
const mainLoading = ref(false);
function getList() { function getList() {
mainLoading.value = true;
listDepartNegative(query.value).then((data) => { listDepartNegative(query.value).then((data) => {
list.value = data.records; list.value = data.records;
total.value = data.total; total.value = data.total;
mainLoading.value = false;
}); });
} }
@ -315,6 +397,11 @@ function reset() {
query.value = { query.value = {
current: 1, current: 1,
size: 10, size: 10,
departLevel: "3",
crtTime: [
moment().startOf("year").format("YYYY-MM-DD HH:mm:ss"),
moment().format("YYYY-MM-DD HH:mm:ss"),
],
}; };
getList(); getList();
} }
@ -326,6 +413,7 @@ onMounted(() => {
const activeRow = ref({}); const activeRow = ref({});
const show = ref(false); const show = ref(false);
const departInfo = ref({}); const departInfo = ref({});
const negativeInfo = ref({});
const loading = ref(false); const loading = ref(false);
const negativeQuery = ref({ const negativeQuery = ref({
@ -333,117 +421,131 @@ const negativeQuery = ref({
}); });
const negativeList = ref([]); const negativeList = ref([]);
const negativeTotal = ref(0); const negativeTotal = ref(0);
async function handleShowProfile(row) {
activeRow.value = row;
loading.value = true;
show.value = true;
negativeQuery.value.involveDepartId = row.departId;
getNegativeList();
const data = await getDepartProfile(row.departId);
departInfo.value = data.departInfo;
loading.value = false;
}
function getNegativeList() {
listNegative(negativeQuery.value).then((data) => {
negativeList.value = data.records;
negativeTotal.value = data.total;
});
}
const colors = [ const problemSourcesPieOptions = ref({
{ color: "#f56c6c", percentage: 20 }, tooltip: {
{ color: "#e6a23c", percentage: 40 }, trigger: "item",
{ color: "#5cb87a", percentage: 60 },
{ color: "#1989fa", percentage: 80 },
{ color: "#6f7ad3", percentage: 100 },
];
const barList = [
{
label: "张三",
value: 67,
}, },
{ series: [
label: "李四", {
value: 80, type: "pie",
}, radius: ["40%", "70%"],
{ data: [],
label: "王五", },
value: 40, ],
});
const businessTypePieOptions = ref({
tooltip: {
trigger: "item",
}, },
{ series: [
label: "王五", {
value: 40, type: "pie",
radius: ["40%", "70%"],
data: [],
},
],
});
const policeBarList = ref([]);
const barOption = ref({
xAxis: {
type: "category",
data: [],
}, },
{ yAxis: {
label: "王五", type: "value",
value: 10,
}, },
]; series: [
{
data: [],
type: "bar",
color: "#5B8FF9 ",
},
],
});
const pieOptions = computed(() => { async function handleShowProfile(row) {
return { activeRow.value = row;
series: [ show.value = true;
{ }
type: "pie",
radius: ["40%", "70%"],
data: [ watch(activeRow, async () => {
{ value: 311, name: "慢作为" }, time.value = [
{ value: 735, name: "意见建议" }, moment().startOf("year").format("YYYY-MM-DD HH:mm:ss"),
{ value: 580, name: "违法违纪违规" }, moment().format("YYYY-MM-DD HH:mm:ss"),
{ value: 484, name: "乱作为" }, ];
{ value: 300, name: "其他" }, await getProfileData();
{ value: 300, name: "不作为" }, listNegativeMonthly(activeRow.value.departId).then((data) => {
], barOption.value.xAxis.data = data.months;
}, barOption.value.series[0].data = data.values;
], });
};
}); });
const radarOption = { const time = ref([]);
const radarOption = ref({
radar: { radar: {
// shape: 'circle', indicator: [],
indicator: [
{ name: "内部管理", max: 6500 },
{ name: "涉及监督", max: 6500 },
{ name: "记录作风", max: 30000 },
{ name: "警保卫工作", max: 38000 },
{ name: "执法办案", max: 52000 },
{ name: "专项工作", max: 25000 },
],
}, },
series: [ series: [
{ {
name: "Budget vs spending",
type: "radar", type: "radar",
data: [ data: [
{ {
value: [4200, 3000, 20000, 35000, 50000, 18000], value: [],
}, },
], ],
label: {
show: true
}
}, },
], ],
}; });
const barOption = { const problemTypeBarList = ref([])
xAxis: {
type: "category", async function getProfileData() {
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], loading.value = true;
}, negativeQuery.value.involveDepartId = activeRow.value.departId;
yAxis: { getNegativeList();
type: "value", const data = await getDepartProfile(activeRow.value.departId, {
}, beginTime: time.value.length ? time.value[0] : "",
series: [ endTime: time.value.length ? time.value[1] : "",
{ });
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar", departInfo.value = data.departInfo;
}, negativeInfo.value = data.negativeInfo;
], problemSourcesPieOptions.value.series[0].data = data.problemSourcesList;
}; businessTypePieOptions.value.series[0].data = data.businessTypeList;
policeBarList.value = data.policeBarList;
radarOption.value.radar.indicator = data.problemTypeRadarIndicator
radarOption.value.series[0].data[0].value = data.problemTypeRadarData
problemTypeBarList.value = data.problemTypeBarList
loading.value = false;
}
function getNegativeList() {
listNegative(negativeQuery.value).then((data) => {
negativeList.value = data.records;
negativeTotal.value = data.total;
});
}
const colors = [
{ color: "#5AD8A6", percentage: 40 },
{ color: "#F6BD16", percentage: 60 },
{ color: "#E8684A ", percentage: 80 },
];
const negativeShow = ref(false);
const activeNegativeId = ref("");
function handleAction(row) {
negativeShow.value = true;
activeNegativeId.value = row.id;
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
</style> </style>

665
src/views/sensitivePerception/PoliceNegative.vue
Unescape View File

@ -4,17 +4,35 @@
<el-form :label-width="114"> <el-form :label-width="114">
<el-row> <el-row>
<el-col :span="6"> <el-col :span="6">
<el-form-item label="所在单位"> <el-form-item label="统计时间">
<depart-tree-select <date-time-range-picker-ext
v-model="query.departId" v-model="query.crtTime"
:check-strictly="false"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-form-item label="统计时间"> <el-form-item label="姓名">
<date-time-range-picker-ext <el-input
v-model="query.crtTime" v-model="query.name"
placeholder="请输入"
clearable
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="警号">
<el-input
v-model="query.empNo"
placeholder="请输入"
clearable
/>
</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-form-item>
</el-col> </el-col>
@ -32,22 +50,52 @@
</div> </div>
</div> </div>
</header> </header>
<div class="table-container"> <div class="table-container" v-loading="mainLoading">
<el-table :data="list"> <el-table :data="list">
<el-table-column label="姓名" prop="name" /> <el-table-column label="姓名" prop="name" />
<el-table-column label="性别" /> <el-table-column label="性别">
<el-table-column label="职务" prop="" /> <template #default="{ row }">
<span>{{ getGenderFromIdCode(row.idCode) }}</span>
</template>
</el-table-column>
<el-table-column label="职务">
<template #default="{ row }">
<span v-if="row.position">{{ row.position }}</span>
<span v-else>{{
getDictLable(dict.personType, row.personType)
}}</span>
</template>
</el-table-column>
<el-table-column label="警号" prop="empNo" /> <el-table-column label="警号" prop="empNo" />
<el-table-column label="任职年限" prop="" /> <el-table-column label="任职年限" prop="employmentDate" />
<el-table-column label="单位名称" prop="policeSize" /> <el-table-column label="所属单位" prop="departName">
<template #default="{ row }">
<span
>{{
row.parentDepartName
? row.parentDepartName + "/"
: row.parentDepartName
}}{{ row.departName }}</span
>
</template>
</el-table-column>
<el-table-column <el-table-column
label="查实问题数" label="查实问题数"
prop="verifySize" prop="verifySize"
width="120" width="120"
align="center"
/> />
<el-table-column label="风险指数" align="center" width="160">
<template #default="{ row }">
<span>/</span>
</template>
</el-table-column>
<el-table-column label="操作" width="160"> <el-table-column label="操作" width="160">
<template #default="{ row }"> <template #default="{ row }">
<el-button type="primary" link @click="show = true" <el-button
type="primary"
link
@click="handleShowProfile(row)"
>问题画像</el-button >问题画像</el-button
> >
</template> </template>
@ -70,273 +118,430 @@
</div> </div>
</div> </div>
<el-dialog title="单位问题画像" v-model="show" width="85vw" top="2vh"> <el-dialog
title="个人问题画像"
v-model="show"
width="85vw"
top="1vh"
style="margin: 1vh auto"
>
<header class="flex center v-center gap"> <header class="flex center v-center gap">
<label>统计范围</label> <label>统计范围</label>
<div style="width: 320px"> <div style="width: 320px">
<date-time-range-picker-ext v-model="query.crtTime" style="width: 300px" /> <date-time-range-picker-ext
v-model="time"
style="width: 300px"
@change="getProfileData"
/>
</div> </div>
<el-button type="primary">查询</el-button> <el-button type="primary" @click="getProfileData">查询</el-button>
</header> </header>
<main> <el-scrollbar
<el-row> max-height="calc(98vh - 120px)"
<el-col :span="8"> v-loading="loading"
<h5>单位情况</h5> element-loading-text="个人问题画像加载中..."
<div class="row"> >
<div class="col col-24"> <main>
<label>单位名称</label> <el-row class="mb-20">
<span>{{}}</span> <el-col :span="8">
</div> <h5>民警基本情况</h5>
<div class="col col-24"> <el-row>
<label>所长</label> <el-col :span="6">
<span>{{}}</span> <img src="/favicon.png" />
</div> </el-col>
<div class="col col-24"> <el-col :span="18">
<label>副所长</label> <div class="row">
<span>{{}}</span> <div class="col col-12">
</div> <label>姓名</label>
</div> <span>{{ policeInfo.name }}</span>
<el-row> </div>
<el-col :span="12"> <div class="col col-12">
<description-pair <label>性别</label>
label1="民警总人数" <span>{{
label2="问题涉及民警数" getGenderFromIdCode(
value1="132" policeInfo.idCode
value2="21" )
size="large" }}</span>
/> </div>
</el-col> <div class="col col-24">
<el-col :span="12"> <label>所属单位</label>
<description-pair <span>
label1="协辅警人数" <span
label2="问题涉及协辅警数" >{{
value1="132" activeRow.parentDepartName
value2="21" ? activeRow.parentDepartName +
size="large" "/"
/> : activeRow.parentDepartName
</el-col> }}{{
</el-row> activeRow.departName
</el-col> }}</span
<el-col :span="8"> >
<h5>问题情况</h5> </span>
<el-row> </div>
<el-col :span="6" class="text-center"> <div class="col col-12">
<div class="text-primary" style="font-size: 34px"> <label>警号</label>
51 <span>{{ policeInfo.empNo }}</span>
</div> </div>
<div>问题总数</div> <div class="col col-12">
</el-col> <label>任职年份</label>
<el-col :span="18"> <span>{{
<el-row> policeInfo.employmentDate || "/"
<el-col :span="12"> }}</span>
<description-pair </div>
label1="110接处警量" <div class="col col-12">
label2="问题数" <label>手机号</label>
value1="132" <span>{{
value2="21" policeInfo.mobile || "/"
/> }}</span>
</el-col> </div>
<el-col :span="12"> </div>
<description-pair </el-col>
label1="执法办案" </el-row>
label2="问题数" </el-col>
value1="132" <el-col :span="8">
value2="21" <h5>问题情况</h5>
/> <el-row
</el-col> class="flex v-center"
</el-row> style="height: calc(100% - 76px)"
</el-col>
</el-row>
</el-col>
<el-col :span="8">
<h5>风险指数</h5>
<div class="flex center">
<el-progress
type="dashboard"
:percentage="78"
:stroke-width="16"
:width="250"
color="#DC6231"
> >
<div> <el-col :span="6" class="text-center">
<span style="">78</span> <div
</div> class="text-primary"
<div>分险指标值</div> style="font-size: 34px"
<div>中风险</div> >
</el-progress> {{ activeRow.verifySize }}
</div> </div>
</el-col> <div>问题总数</div>
</el-row> </el-col>
<el-row> <el-col :span="18">
<el-col :span="8"> <el-row>
<h5>问题来源占比</h5> <el-col :span="12">
<v-charts <description-pair
style="height: 320px" label1="110接处警量"
:option="pieOptions" label2="问题数"
autoresize :value1="
/> negativeInfo.jcjBusinessSize
</el-col> "
<el-col :span="8"> :value2="negativeInfo.jcjSize"
<h5>业务类型占比</h5> />
<v-charts </el-col>
style="height: 320px" <el-col :span="12">
:option="pieOptions" <description-pair
autoresize label1="执法办案"
label2="问题数"
:value1="
negativeInfo.zfbaBusinessSize
"
:value2="negativeInfo.zfbaSize"
/>
</el-col>
</el-row>
</el-col>
</el-row>
</el-col>
<el-col :span="8">
<h5>风险指数</h5>
<div class="flex center">
<el-progress
type="dashboard"
:percentage="78"
:stroke-width="16"
:width="250"
color="#DC6231"
>
<div style="line-height: 64px" class="mt-40">
<span
style="
font-weight: 600;
font-size: 60px;
color: #e87749;
"
>78</span
>
<span style="font-size: 18px; color: #999"
>分</span
>
</div>
<div style="font-size: 14px" class="mb-10">
分险指标值
</div>
<div style="color: #e87749; font-size: 28px">
中风险
</div>
</el-progress>
</div>
</el-col>
</el-row>
<el-row class="mb-20">
<el-col :span="8">
<h5>问题来源占比</h5>
<v-charts
style="height: 320px"
:option="problemSourcesPieOptions"
autoresize
/>
</el-col>
<el-col :span="8">
<h5>业务类型占比</h5>
<v-charts
style="height: 320px"
:option="businessTypePieOptions"
autoresize
/>
</el-col>
<el-col :span="8">
<h5>风险问题构成</h5>
<v-charts
style="height: 320px"
:option="radarOption"
autoresize
/>
</el-col>
</el-row>
<h5>问题变化趋势</h5>
<v-charts
style="height: 320px"
:option="barOption"
autoresize
/>
<div></div>
<h5>问题清单</h5>
<el-table :data="negativeList">
<el-table-column label="发现时间" prop="discoveryTime" />
<el-table-column label="问题来源" prop="problemSources" />
<el-table-column label="业务类别" prop="businessTypeName" />
<el-table-column
label="涉及单位"
prop="involveDepartName"
/> />
</el-col> <el-table-column
<el-col :span="8"> label="核查情况"
<h5>风险问题构成</h5> prop="checkStatusName"
<v-charts width="140"
style="height: 320px" align="center"
:option="radarOption"
autoresize
/> />
</el-col> <el-table-column label="操作" width="160">
</el-row> <template #default="{ row }">
<el-row> <el-button
<el-col :span="8"> type="primary"
<h5>个人问题排名</h5> link
<datav-chart-bar :data="barList" /> @click="handleAction(row)"
</el-col> >查看详情</el-button
<el-col :span="8"> >
<h5>突出问题排名</h5> </template>
<datav-chart-bar :data="barList" /> </el-table-column>
</el-col> </el-table>
<el-col :span="8"> <div class="flex end mt-8">
<h5>单位问题标签</h5> <el-pagination
<datav-chart-bar :data="barList" /> @size-change="getNegativeList"
</el-col> @current-change="getNegativeList"
</el-row> :current-page="negativeQuery.current"
<h5>问题变化趋势</h5> :page-sizes="[10, 20, 50]"
<v-charts style="height: 320px" :option="barOption" autoresize /> :page-size="negativeQuery.size"
<div></div> v-model:current-page="negativeQuery.current"
<h5>问题清单</h5> layout="total, sizes, prev, pager, next"
<el-table> :total="negativeTotal"
<el-table-column label="发现时间" prop="" /> >
<el-table-column label="问题来源" prop="" /> </el-pagination>
<el-table-column label="业务类别" prop="" /> </div>
<el-table-column label="涉及单位" prop="" /> </main>
<el-table-column label="是否属实" prop="" width="180" /> </el-scrollbar>
<el-table-column
label="完善情况"
prop="departName"
width="120"
/>
<el-table-column
label="最后编辑人"
prop="fxzs"
width="120"
align="center"
/>
</el-table>
</main>
</el-dialog> </el-dialog>
<negative-dialog
v-model="negativeShow"
:id="activeNegativeId"
@close="negativeShow = false"
/>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import vCharts from "vue-echarts"; import vCharts from "vue-echarts";
import { listDepartNegative } from "@/api/sensitivePerception/profileDepart"; import {
import { onMounted } from "vue"; listPoliceNegative,
getPoliceProfile,
listNegativeByPoliceIdCode,
listNegativeMonthly,
} from "@/api/sensitivePerception/profilePolice";
import { InspectCase } from "@/enums/dictEnums";
import { getDictLable, getGenderFromIdCode } from "@/utils/util";
import moment from "moment";
import useCatchStore from "@/stores/modules/catch";
const catchStore = useCatchStore();
const dict = catchStore.getDicts(["personType"]);
const query = ref({ const query = ref({
current: 1, current: 1,
size: 10, size: 10,
crtTime: [
moment().startOf("year").format("YYYY-MM-DD HH:mm:ss"),
moment().format("YYYY-MM-DD HH:mm:ss"),
],
}); });
const list = ref<any[]>([]); const list = ref<any[]>([]);
const total = ref(0); const total = ref(0);
const mainLoading = ref(false);
function getList() { function getList() {
mainLoading.value = true;
listPoliceNegative(query.value).then((data) => {
list.value = data.records;
total.value = data.total;
mainLoading.value = false;
});
}
function reset() {
query.value = {
current: 1,
size: 10,
crtTime: [
moment().startOf("year").format("YYYY-MM-DD HH:mm:ss"),
moment().format("YYYY-MM-DD HH:mm:ss"),
],
};
getList();
} }
onMounted(() => { onMounted(() => {
getList(); getList();
}); });
const activeRow = ref({});
const show = ref(false); const show = ref(false);
const policeInfo = ref({});
const negativeInfo = ref({});
const loading = ref(false);
const barList = [ const negativeQuery = ref({
{ checkStatusList: [InspectCase.TRUE, InspectCase.TRUE],
label: "张三", });
value: 67, const negativeList = ref([]);
}, const negativeTotal = ref(0);
{
label: "李四", const problemSourcesPieOptions = ref({
value: 80, tooltip: {
trigger: "item",
}, },
{ series: [
label: "王五", {
value: 40, type: "pie",
radius: ["40%", "70%"],
data: [],
},
],
});
const businessTypePieOptions = ref({
tooltip: {
trigger: "item",
}, },
{ series: [
label: "王五", {
value: 40, type: "pie",
radius: ["40%", "70%"],
data: [],
},
],
});
const barOption = ref({
xAxis: {
type: "category",
data: [],
}, },
{ yAxis: {
label: "王五", type: "value",
value: 10,
}, },
]; series: [
{
data: [],
type: "bar",
color: "#5B8FF9 ",
},
],
});
const pieOptions = computed(() => { async function handleShowProfile(row) {
return { activeRow.value = row;
series: [ show.value = true;
{ }
type: "pie",
radius: ["40%", "70%"],
data: [ watch(activeRow, async () => {
{ value: 311, name: "慢作为" }, time.value = [
{ value: 735, name: "意见建议" }, moment().startOf("year").format("YYYY-MM-DD HH:mm:ss"),
{ value: 580, name: "违法违纪违规" }, moment().format("YYYY-MM-DD HH:mm:ss"),
{ value: 484, name: "乱作为" }, ];
{ value: 300, name: "其他" }, await getProfileData();
{ value: 300, name: "不作为" }, listNegativeMonthly(activeRow.value.idCode).then((data) => {
], barOption.value.xAxis.data = data.months;
}, barOption.value.series[0].data = data.values;
], });
};
}); });
const radarOption = { const time = ref([]);
const radarOption = ref({
radar: { radar: {
// shape: 'circle', indicator: [],
indicator: [
{ name: "内部管理", max: 6500 },
{ name: "涉及监督", max: 6500 },
{ name: "记录作风", max: 30000 },
{ name: "警保卫工作", max: 38000 },
{ name: "执法办案", max: 52000 },
{ name: "专项工作", max: 25000 },
],
}, },
series: [ series: [
{ {
name: "Budget vs spending",
type: "radar", type: "radar",
data: [ data: [
{ {
value: [4200, 3000, 20000, 35000, 50000, 18000], value: [],
}, },
], ],
label: {
show: true
}
}, },
], ],
}; });
const barOption = { async function getProfileData() {
xAxis: { loading.value = true;
type: "category", negativeQuery.value.idCode = activeRow.value.idCode;
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], getNegativeList();
}, const data = await getPoliceProfile(activeRow.value.idCode, {
yAxis: { beginTime: time.value.length ? time.value[0] : "",
type: "value", endTime: time.value.length ? time.value[1] : "",
}, });
series: [
{ policeInfo.value = data.policeInfo;
data: [120, 200, 150, 80, 70, 110, 130], negativeInfo.value = data.negativeInfo;
type: "bar", problemSourcesPieOptions.value.series[0].data = data.problemSourcesList;
}, businessTypePieOptions.value.series[0].data = data.businessTypeList;
],
}; radarOption.value.radar.indicator = data.problemTypeRadarIndicator
radarOption.value.series[0].data[0].value = data.problemTypeRadarData
loading.value = false;
}
function getNegativeList() {
if (time.value.length === 2) {
negativeQuery.value.beginTime = time.value[0];
negativeQuery.value.endTime = time.value[1];
}
listNegativeByPoliceIdCode(
activeRow.value.idCode,
negativeQuery.value
).then((data) => {
negativeList.value = data.records;
negativeTotal.value = data.total;
});
}
const negativeShow = ref(false);
const activeNegativeId = ref("");
function handleAction(row) {
negativeShow.value = true;
activeNegativeId.value = row.id;
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.col {
--label-width: 60px;
}
</style> </style>

122
src/views/work/Fav.vue
Unescape View File

@ -5,27 +5,44 @@
<el-row> <el-row>
<el-col :span="6"> <el-col :span="6">
<el-form-item label="问题发生时间"> <el-form-item label="问题发生时间">
<date-time-range-picker-ext v-model="query.happenTime"/> <date-time-range-picker-ext
v-model="query.happenTime"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-form-item label="问题来源"> <el-form-item label="问题来源">
<el-select v-model="query.problemSources"> <el-select v-model="query.problemSources">
<el-option v-for="item in dict.problemSources" :key="item.id" :label="item.dictLabel" :value="item.dictValue" /> <el-option
v-for="item in dict.problemSources"
:key="item.id"
:label="item.dictLabel"
:value="item.dictValue"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-form-item label="业务类别"> <el-form-item label="业务类别">
<el-select v-model="query.businessType"> <el-select v-model="query.businessType">
<el-option v-for="item in dict.businessType" :key="item.id" :label="item.dictLabel" :value="item.dictValue" /> <el-option
v-for="item in dict.businessType"
:key="item.id"
:label="item.dictLabel"
:value="item.dictValue"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-form-item label="涉嫌问题"> <el-form-item label="涉嫌问题">
<el-select> <el-select>
<el-option v-for="item in dict.suspectProblem" :key="item.id" :label="item.dictLabel" :value="item.dictValue" /> <el-option
v-for="item in dict.suspectProblem"
:key="item.id"
:label="item.dictLabel"
:value="item.dictValue"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -36,12 +53,16 @@
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-form-item label="涉及单位"> <el-form-item label="涉及单位">
<depart-tree-select v-model="query.involveDepartId" /> <depart-tree-select
v-model="query.involveDepartId"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-form-item label="办理单位"> <el-form-item label="办理单位">
<depart-tree-select v-model="query.involveDepartId" /> <depart-tree-select
v-model="query.involveDepartId"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
@ -89,7 +110,7 @@
<div class="row mt-10"> <div class="row mt-10">
<div class="col col-6"> <div class="col col-6">
<label>投诉反映人</label> <label>投诉反映人</label>
<span>{{ }}</span> <span>{{}}</span>
</div> </div>
<div class="col col-6"> <div class="col col-6">
<label>联系电话</label> <label>联系电话</label>
@ -103,7 +124,7 @@
</div> </div>
<div class="col col-6"> <div class="col col-6">
<label>涉嫌问题</label> <label>涉嫌问题</label>
<span>{{ }}</span> <span>{{}}</span>
</div> </div>
</div> </div>
<div class="row mt-10"> <div class="row mt-10">
@ -120,18 +141,36 @@
</el-table-column> </el-table-column>
<el-table-column label="问题发生时间" prop="happenTime" /> <el-table-column label="问题发生时间" prop="happenTime" />
<el-table-column label="问题来源" prop="problemSources" /> <el-table-column label="问题来源" prop="problemSources" />
<el-table-column label="业务类别" prop="" /> <el-table-column label="业务类别" prop="businessTypeName" />
<el-table-column label="涉嫌问题" prop="" /> <el-table-column label="涉嫌问题">
<el-table-column label="问题内容" prop="thingDesc" show-overflow-tooltip /> <template #default="{ row }">
<el-table-column label="办理单位" prop="" /> <span>{{ getInvolveProblem(row.involveProblem) }}</span>
<el-table-column label="办理状态" prop="" /> </template>
<el-table-column label="办理状态" prop="" /> </el-table-column>
<el-table-column
label="问题内容"
prop="thingDesc"
show-overflow-tooltip
/>
<el-table-column label="涉及单位" show-overflow-tooltip>
<template #default="{ row }">
<span>{{ row.involveDepartName }}</span>
</template>
</el-table-column>
<el-table-column label="操作"> <el-table-column label="操作">
<template #default="{ row }"> <template #default="{ row }">
<el-button type="primary" link @click="handleAction(row)" <el-button
type="primary"
link
@click="handleAction(row)"
>详情</el-button >详情</el-button
> >
<el-button type="danger" link @click="handleDelFav(row.negativeId)">取消收藏</el-button> <el-button
type="danger"
link
@click="handleDelFav(row.negativeId)"
>取消收藏</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -154,51 +193,56 @@
<negative-dialog v-model="show" :id="activeNegativeId" /> <negative-dialog v-model="show" :id="activeNegativeId" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { listFav, delFav } from '@/api/work/fav' import { listFav, delFav } from "@/api/work/fav";
import feedback from '@/utils/feedback' import feedback from "@/utils/feedback";
import useCatchStore from '@/stores/modules/catch' import useCatchStore from "@/stores/modules/catch";
import { getDictLable, getInvolveProblem } from "@/utils/util";
const dict = useCatchStore().getDicts(['problemSources', 'businessType', 'suspectProblem']) const dict = useCatchStore().getDicts([
console.log(dict) "problemSources",
"businessType",
"suspectProblem",
"processingStatus",
]);
console.log(dict);
const favs = ref([]) const favs = ref([]);
const query = ref({ const query = ref({
current: 1, current: 1,
size: 10 size: 10,
}); });
const total = ref(0); const total = ref(0);
function getList() { function getList() {
listFav().then(data => { listFav().then((data) => {
favs.value = data.records favs.value = data.records;
total.value = data.total total.value = data.total;
}) });
} }
onMounted(() => { onMounted(() => {
getList() getList();
});
})
function reset() { function reset() {
query.value = { query.value = {
current: 1, current: 1,
size: 10 size: 10,
} };
getList() getList();
} }
const show = ref(false) const show = ref(false);
const activeNegativeId = ref('') const activeNegativeId = ref("");
function handleAction(row) { function handleAction(row) {
show.value = true show.value = true;
activeNegativeId.value = row.negativeId activeNegativeId.value = row.negativeId;
} }
async function handleDelFav(negativeId) { async function handleDelFav(negativeId) {
await feedback.confirm("确定要取消收藏？"); await feedback.confirm("确定要取消收藏？");
await delFav(negativeId) await delFav(negativeId);
getList() getList();
} }
</script> </script>

88
vite.config.ts.timestamp-1730686774606-8b00c58248ca4.mjs
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save