wxc 1 year ago
parent
commit
97e92c6364
  1. 36
      src/api/data/petition12337.ts
  2. 8
      src/api/datav.ts
  3. 189
      src/components/data/distrbute12337.vue
  4. 184
      src/components/datav/header.vue
  5. 1
      src/layout/components/Aside.vue
  6. 738
      src/views/data/Ajhc.vue
  7. 271
      src/views/data/Mail12337.vue
  8. 6
      src/views/datav/AuditSuper.vue
  9. 693
      src/views/datav/CaseVerif.vue
  10. 273
      src/views/datav/MailVisits.vue
  11. 6
      src/views/datav/RightsComfort.vue
  12. 855
      src/views/datav/SceneInsp.vue

36
src/api/data/petition12337.ts

@ -0,0 +1,36 @@
import request from "@/api/request";
export function listPetitionComplaint12337(query) {
return request.get({
url: '/data/petitionComplaint12337',
query
});
}
export function importPetitionComplaint(body) {
return request.post({
url: '/data/petitionComplaint/import',
body
});
}
export function addPetitionComplaint(body) {
return request.post({
url: `/data/petitionComplaint`,
body
});
}
export function delPetitionComplaint12337(id) {
return request.del({
url: `/data/petitionComplaint12337/${id}`
});
}
export function distributePetitionComplaint12337(body) {
return request.post({
url: `/data/petitionComplaint12337/distribute`,
body
});
}

8
src/api/datav.ts

@ -24,9 +24,17 @@ export function getRecentlyMailTrend(query) {
url: `/datav/mailVisits/getRecentlyMailTrendMonth`, url: `/datav/mailVisits/getRecentlyMailTrendMonth`,
query query
}); });
}
export function getRecentlyMailTrend12337(query) {
// alert(days + activeMailTrend.value)
return request.get({
url: `/datav/mailVisits/getRecentlyMailTrendByMonth12337`,
query
});
} }

189
src/components/data/distrbute12337.vue

@ -0,0 +1,189 @@
<template>
<el-dialog title="问题分发" v-model="show" width="80vw" top="5vh">
<header>
<div class="flex v-center end mb-20">
<span class="mr-20"
>
<span class="text-primary">{{ data.length }}</span>
条数据</span
>
</div>
</header>
<div style="min-height: 500px">
<div class="table-container">
<el-table :data="data">
<el-table-column
label="案件编号"
prop="onlyId"
show-overflow-tooltip
/>
<el-table-column
label="受理时间"
prop="discoverTime"
show-overflow-tooltip
/>
<el-table-column
label="问题发生时间"
prop="happenTime"
show-overflow-tooltip
/>
<el-table-column
label="问题来源"
prop="letterSource"
show-overflow-tooltip
/>
<el-table-column
label="投诉人"
prop="name"
width="90"
/>
<el-table-column
label="投诉人电话"
prop="phone"
width="120"
/>
<el-table-column label="业务类别" prop="businessTypeName" />
<el-table-column label="涉嫌问题" prop="involveProblem" />
<el-table-column label="涉及警种" prop="policeTypeName" />
<el-table-column
label="涉及单位"
prop="thirdDepartName"
/>
<el-table-column
label="具体内容"
prop="wjwfProject"
show-overflow-tooltip
/>
<el-table-column label="操作" width="140">
<template #default="{ row }">
<el-button
type="info"
link
@click="handleRemoveDistribute(row)"
>移除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</div>
<footer class="flex end mt-20">
<el-button
type="primary"
size="large"
@click="handleShowDistributeDialog"
:disabled="data.length === 0"
>确认数据</el-button
>
</footer>
</el-dialog>
<el-dialog title="任务分发" v-model="distributeShow" width="50vw" top="5vh">
<el-form :label-width="120" ref="formRef" :model="form">
<el-form-item
label="办理时限"
prop="timeLimit"
:rules="{
required: true,
message: '请选择办理时限',
}"
>
<time-limit-select
v-model="form.timeLimit"
v-model:maxSignDuration="form.maxSignDuration"
v-model:maxHandleDuration="form.maxHandleDuration"
v-model:maxExtensionDuration="form.maxExtensionDuration"
/>
</el-form-item>
<el-form-item
label="审核流程"
prop="approvalFlow"
:rules="{
required: true,
message: '请选择审核流程',
}"
>
<el-radio-group v-model="form.approvalFlow">
<el-radio
v-for="item in dict.approvalFlow"
:key="item.dictCode"
:value="item.dictValue"
>{{ item.dictLabel
}}{{ item.remark ? `(${item.remark})` : "" }}</el-radio
>
</el-radio-group>
<div class="tips mt-10">
<p>
三级审核 在问题提交办结时需经过所队>二级机构>市局三级审核通过后方可办结
</p>
<p>
二级审核 在问题提交办结时仅需经过所队>二级机构两级审核通过后即可办结
</p>
</div>
</el-form-item>
</el-form>
<footer class="flex end mt-20">
<el-button type="primary" size="large" @click="handleSubmit"
>确认下发</el-button
>
</footer>
</el-dialog>
</template>
<script setup>
import useCatchStore from "@/stores/modules/catch";
import { distributePetitionComplaint } from "@/api/data/petitionComplaint";
import {distributePetitionComplaint12337} from "@/api/data/petition12337.ts";
const catchStore = useCatchStore();
const dict = catchStore.getDicts(["timeLimit", "approvalFlow"]);
const props = defineProps({
show: {
type: Boolean,
default: false,
},
data: {
type: Array,
default: [],
},
});
const emit = defineEmits(["update:data", "update:show", "update"]);
const show = ref(props.show);
const distributeShow = ref(false);
watch(
() => props.show,
(val) => {
show.value = val;
}
);
watch(show, (val) => {
emit("update:show", val);
});
function handleRemoveDistribute(row) {
let data = [...props.data];
data.splice(props.data.indexOf(row), 1);
emit("update:data", data);
}
const form = ref({});
const formRef = ref();
function handleShowDistributeDialog() {
distributeShow.value = true;
}
async function handleSubmit() {
await formRef.value.validate();
form.value.data = props.data;
await distributePetitionComplaint12337(form.value);
form.value = {};
distributeShow.value = false;
show.value = false;
emit("update");
emit("update:data", []);
}
</script>
<style lang="scss" scoped>
</style>

184
src/components/datav/header.vue

@ -1,49 +1,49 @@
<template> <template>
<header> <header>
<div class="flex flex v-center between relative"> <div class="flex flex v-center between relative">
<nav class="flex"> <nav class="flex">
<router-link to="/datav/videoInsp" v-slot="{ isActive }"> <router-link to="/datav/videoInsp" v-slot="{ isActive }">
<span>视频督察</span> <span>视频督察</span>
<img :src="isActive ? Img2 : Img1" alt="" /> <img :src="isActive ? Img2 : Img1" alt=""/>
</router-link> </router-link>
<router-link to="/datav/sceneInsp" v-slot="{ isActive }"> <router-link to="/datav/sceneInsp" v-slot="{ isActive }">
<span>现场督察</span> <span>现场督察</span>
<img :src="isActive ? Img2 : Img1" alt="" /> <img :src="isActive ? Img2 : Img1" alt=""/>
</router-link> </router-link>
<router-link to="/datav/caseVerif" v-slot="{ isActive }"> <router-link to="/datav/caseVerif" v-slot="{ isActive }">
<span>案件核查</span> <span>案件核查</span>
<img :src="isActive ? Img2 : Img1" alt="" /> <img :src="isActive ? Img2 : Img1" alt=""/>
</router-link> </router-link>
<router-link to="/datav/jwpy" v-slot="{ isActive }"> <router-link to="/datav/jwpy" v-slot="{ isActive }">
<span>警务评议</span> <span>警务评议</span>
<img :src="isActive ? Img2 : Img1" alt="" /> <img :src="isActive ? Img2 : Img1" alt=""/>
</router-link> </router-link>
</nav> </nav>
<h1> <h1>
<router-link to="/datav/gobal"> <router-link to="/datav/gobal">
<span>长沙公安数字督察一体化平台</span> <span>长沙公安数字督察一体化平台</span>
</router-link> </router-link>
</h1> </h1>
<nav class="flex right"> <nav class="flex right">
<router-link to="/datav/mailVisits" v-slot="{ isActive }"> <router-link to="/datav/mailVisits" v-slot="{ isActive }">
<span>信访投诉</span> <span>信访投诉</span>
<img :src="isActive ? Img2 : Img1" alt="" /> <img :src="isActive ? Img2 : Img1" alt=""/>
</router-link> </router-link>
<router-link to="/datav/rightsComfort" v-slot="{ isActive }"> <router-link to="/datav/rightsComfort" v-slot="{ isActive }">
<span>维权抚慰</span> <span>维权抚慰</span>
<img :src="isActive ? Img2 : Img1" alt="" /> <img :src="isActive ? Img2 : Img1" alt=""/>
</router-link> </router-link>
<router-link to="/datav/auditSuper" v-slot="{ isActive }"> <router-link to="/datav/auditSuper" v-slot="{ isActive }">
<span>审计监督</span> <span>审计监督</span>
<img :src="isActive ? Img2 : Img1" alt="" /> <img :src="isActive ? Img2 : Img1" alt=""/>
</router-link> </router-link>
<router-link to="/datav/lmgz" v-slot="{ isActive }"> <router-link to="/datav/lmgz" v-slot="{ isActive }">
<span>灵敏感知</span> <span>灵敏感知</span>
<img :src="isActive ? Img2 : Img1" alt="" /> <img :src="isActive ? Img2 : Img1" alt=""/>
</router-link> </router-link>
</nav> </nav>
</div> </div>
</header> </header>
</template> </template>
<script setup> <script setup>
import Img1 from '/imgs/datav/base.png' import Img1 from '/imgs/datav/base.png'
@ -51,53 +51,61 @@ import Img2 from '/imgs/datav/base_active.png'
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
header { header {
color: #fff; color: #fff;
margin-bottom: 20px; margin-bottom: 20px;
position: relative; position: relative;
&::before {
display: block; &::before {
content: ""; display: block;
position: absolute; content: "";
width: 73.5%; position: absolute;
height: 213px; width: 73.5%;
top: 0; height: 213px;
left: 50%; top: 0;
transform: translateX(-50%); left: 50%;
background-image: url("/imgs/datav/bg-1.png"); transform: translateX(-50%);
z-index: 0; background-image: url("/imgs/datav/bg-1.png");
z-index: 0;
}
h1 {
font-family: PangMenZhengDao;
font-size: 48px;
line-height: 1;
letter-spacing: 2px;
margin: 0;
white-space: nowrap;
}
nav {
a {
color: inherit;
text-decoration: none;
text-align: center;
font-size: 19px;
}
span {
display: block;
} }
h1 {
font-family: PangMenZhengDao; img {
font-size: 48px; display: block;
line-height: 1; margin-top: -12px;
letter-spacing: 2px;
margin: 0;
} }
nav {
a { &.right {
color: inherit; img {
text-decoration: none; transform: scaleX(-1);
text-align: center; }
font-size: 19px;
}
span {
display: block;
}
img {
display: block;
margin-top: -12px;
}
&.right {
img {
transform: scaleX(-1);
}
}
} }
}
} }
:deep() { :deep() {
a { a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
} }
</style> </style>

1
src/layout/components/Aside.vue

@ -85,7 +85,6 @@ function handleMenuClick(route, index) {
return; return;
} }
} }
const activeSecondMenuName = ref(null); const activeSecondMenuName = ref(null);
function handleSecondMenuClick(route) { function handleSecondMenuClick(route) {
activeSecondMenuName.value = route.name; activeSecondMenuName.value = route.name;

738
src/views/data/Ajhc.vue

@ -1,380 +1,421 @@
<template> <template>
<div class="container"> <div class="container">
<header> <header>
<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-input <el-input
placeholder="请输入" placeholder="请输入"
v-model="query.originId" v-model="query.originId"
/> />
</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="投诉人">
<div class="flex gap"> <div class="flex gap">
<el-select <el-select
v-model="query.responderKey" v-model="query.responderKey"
style="width: 160px" style="width: 160px"
@change="delete query.responderValue" @change="delete query.responderValue"
> >
<el-option value="name" label="姓名" /> <el-option value="name" label="姓名"/>
<el-option value="phone" label="电话" /> <el-option value="phone" label="电话"/>
</el-select> </el-select>
<el-input <el-input
placeholder="请输入" placeholder="请输入"
v-model="query.responderValue" v-model="query.responderValue"
clearable clearable
/>
</div>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label=" 受理时间">
<date-time-range-picker-ext
v-model="query.discoveryTime"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="具体内容">
<el-input
placeholder="请输入"
v-model="query.thingDesc"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="分发状态">
<el-select v-model="query.distributionState">
<el-option
v-for="item in dict.distributionState"
:key="item.id"
:label="item.dictLabel"
:value="item.dictValue"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="mb-25 flex between">
<div>
<el-button type="primary" @click="show = true"
>数据导入</el-button
>
<el-badge
:value="distributeList.length"
class="ml-10"
v-if="distributeList.length"
>
<el-button
type="primary"
@click="distributeListShow = true"
>问题下发</el-button
>
</el-badge>
</div>
<div>
<el-button type="primary" @click="getList">
<template #icon>
<icon name="el-icon-Search" />
</template>
查询</el-button
>
<el-button @click="reset">重置</el-button>
</div>
</div>
</header>
<div class="table-container">
<el-table :data="list">
<el-table-column
label="案件编号"
prop="originId"
show-overflow-tooltip
/>
<el-table-column
label="受理时间"
prop="discoveryTime"
show-overflow-tooltip
/>
<el-table-column
label="问题发生时间"
prop="happenTime"
show-overflow-tooltip
/>
<el-table-column
label="问题来源"
prop="problemSources"
show-overflow-tooltip
/>
<el-table-column
label="投诉人"
prop="responderName"
width="90"
/> />
<el-table-column </div>
label="投诉人电话" </el-form-item>
prop="contactPhone" </el-col>
width="120" <el-col :span="6">
<el-form-item label=" 受理时间">
<date-time-range-picker-ext
v-model="query.discoveryTime"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="具体内容">
<el-input
placeholder="请输入"
v-model="query.thingDesc"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="分发状态">
<el-select v-model="query.distributionState">
<el-option
v-for="item in dict.distributionState"
:key="item.id"
:label="item.dictLabel"
:value="item.dictValue"
/> />
<el-table-column label="业务类别" prop="businessTypeName" /> </el-select>
<el-table-column label="涉嫌问题" prop="involveProblem" /> </el-form-item>
<el-table-column label="涉及警种" prop="policeTypeName" /> </el-col>
<el-table-column label="涉及单位" prop="thirdDepartName" />
<el-table-column <el-col :span="6">
label="具体内容" <el-form-item label="是否属实">
prop="thingDesc" <el-select
show-overflow-tooltip size="small"
style="width: 146px"
placeholder="核查情况"
clearable
v-model="query.checkStatus"
>
<el-option
v-for="item in dict.inspectCase"
:key="item.id"
:label="item.dictLabel"
:value="item.dictValue"
/> />
<el-table-column label="状态"> </el-select>
<template #default="{ row }"> </el-form-item>
<el-tag>{{ </el-col>
getDictLable(
dict.distributionState, </el-row>
row.distributionState </el-form>
) <div class="mb-25 flex between">
}}</el-tag> <div>
</template> <el-button type="primary" @click="show = true"
</el-table-column> >数据导入
<el-table-column label="操作" width="200"> </el-button
<template #default="{ row }"> >
<el-badge
<template :value="distributeList.length"
v-if=" class="ml-10"
v-if="distributeList.length"
>
<el-button
type="primary"
@click="distributeListShow = true"
>问题下发
</el-button
>
</el-badge>
</div>
<div>
<el-button type="primary" @click="getList">
<template #icon>
<icon name="el-icon-Search"/>
</template>
查询
</el-button
>
<el-button @click="reset">重置</el-button>
</div>
</div>
</header>
<div class="table-container">
<el-table :data="list">
<el-table-column
label="案件编号"
prop="originId"
show-overflow-tooltip
/>
<el-table-column
label="受理时间"
prop="discoveryTime"
show-overflow-tooltip
/>
<el-table-column
label="问题发生时间"
prop="happenTime"
show-overflow-tooltip
/>
<el-table-column
label="问题来源"
prop="problemSources"
show-overflow-tooltip
/>
<el-table-column
label="投诉人"
prop="responderName"
width="90"
/>
<el-table-column
label="投诉人电话"
prop="contactPhone"
width="120"
/>
<el-table-column label="业务类别" prop="businessTypeName"/>
<el-table-column label="涉嫌问题" prop="involveProblem"/>
<el-table-column label="涉及警种" prop="policeTypeName"/>
<el-table-column label="涉及单位" prop="thirdDepartName"/>
<el-table-column
label="具体内容"
prop="thingDesc"
show-overflow-tooltip
/>
<el-table-column label="是否属实" prop="isReal">
<template v-slot="scope">
<span v-if="scope.row.isReal === 1">属实</span>
<span v-else-if="scope.row.isReal === 2">部分属实</span>
<span v-else-if="scope.row.isReal === 3">不属实</span>
<span v-else>未知状态</span>
</template>
</el-table-column>
<el-table-column label="状态">
<template #default="{ row }">
<el-tag>{{
getDictLable(
dict.distributionState,
row.distributionState
)
}}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template #default="{ row }">
<template
v-if="
row.distributionState === row.distributionState ===
DistributionState.UNDISTRIBUTED DistributionState.UNDISTRIBUTED
" "
> >
<el-button <el-button
type="primary" type="primary"
link link
@click="handleAddDistribute(row)" @click="handleAddDistribute(row)"
v-if=" v-if="
distributeList.filter( distributeList.filter(
(item) => item.originId === row.originId (item) => item.originId === row.originId
).length === 0 ).length === 0
" "
>加入问题下发</el-button >加入问题下发
> </el-button
<el-button >
type="info" <el-button
link type="info"
v-else link
@click="handleRemoveDistribute(row)" v-else
>移除</el-button @click="handleRemoveDistribute(row)"
> >移除
</template> </el-button
>
<el-button type="danger" link @click="handleDel(row)" </template>
>删除</el-button
> <el-button type="danger" link @click="handleDel(row)"
</template> >删除
</el-table-column> </el-button
</el-table>
</div>
<div class="flex end mt-8">
<el-pagination
@size-change="getList"
@current-change="getList"
:current-page="query.current"
:page-sizes="[10, 20, 50]"
v-model:page-size="query.size"
v-model:current-page="query.current"
layout="total, sizes, prev, pager, next"
:total="total"
> >
</el-pagination> </template>
</div> </el-table-column>
</el-table>
</div>
<div class="flex end mt-8">
<el-pagination
@size-change="getList"
@current-change="getList"
:current-page="query.current"
:page-sizes="[10, 20, 50]"
v-model:page-size="query.size"
v-model:current-page="query.current"
layout="total, sizes, prev, pager, next"
:total="total"
>
</el-pagination>
</div> </div>
</div>
<data-import-case <data-import-case
v-model="show" v-model="show"
title="案件核查 数据导入" title="案件核查 数据导入"
@close="show = false" @close="show = false"
@update="getList" @update="getList"
/> />
<el-dialog <el-dialog
title="问题分发" title="问题分发"
v-model="distributeListShow" v-model="distributeListShow"
width="80vw" width="80vw"
top="5vh" top="5vh"
> >
<header> <header>
<div class="flex v-center end mb-20"> <div class="flex v-center end mb-20">
<span class="mr-20" <span class="mr-20"
> >
<span class="text-primary">{{ <span class="text-primary">{{
distributeList.length distributeList.length
}}</span> }}</span>
条数据</span 条数据</span
> >
</div> </div>
</header> </header>
<div style="min-height: 500px"> <div style="min-height: 500px">
<div class="table-container"> <div class="table-container">
<el-table :data="distributeList"> <el-table :data="distributeList">
<el-table-column <el-table-column
label="案件编号" label="案件编号"
prop="originId" prop="originId"
show-overflow-tooltip show-overflow-tooltip
/> />
<el-table-column <el-table-column
label="受理时间" label="受理时间"
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"
show-overflow-tooltip show-overflow-tooltip
/> />
<el-table-column <el-table-column
label="投诉人" label="投诉人"
prop="responderName" prop="responderName"
width="90" width="90"
/> />
<el-table-column <el-table-column
label="投诉人电话" label="投诉人电话"
prop="contactPhone" prop="contactPhone"
width="120" width="120"
/> />
<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"
/> />
<el-table-column <el-table-column
label="具体内容" label="具体内容"
prop="thingDesc" prop="thingDesc"
show-overflow-tooltip show-overflow-tooltip
/> />
<el-table-column label="操作" width="140"> <el-table-column label="操作" width="140">
<template #default="{ row }"> <template #default="{ row }">
<el-button <el-button
type="info" type="info"
link link
@click="handleRemoveDistribute(row)" @click="handleRemoveDistribute(row)"
>移除</el-button >移除
> </el-button
</template> >
</el-table-column> </template>
</el-table> </el-table-column>
</div> </el-table>
</div> </div>
<footer class="flex end mt-20"> </div>
<el-button <footer class="flex end mt-20">
type="primary" <el-button
size="large" type="primary"
@click="handleShowDistributeDialog" size="large"
:disabled="distributeList.length === 0" @click="handleShowDistributeDialog"
>确认数据</el-button :disabled="distributeList.length === 0"
> >确认数据
</footer> </el-button
</el-dialog> >
</footer>
</el-dialog>
<el-dialog title="任务分发" v-model="distributeShow" width="50vw" top="5vh"> <el-dialog title="任务分发" v-model="distributeShow" width="50vw" top="5vh">
<el-form :label-width="120" ref="formRef" :model="form"> <el-form :label-width="120" ref="formRef" :model="form">
<el-form-item <el-form-item
label="办理时限" label="办理时限"
prop="timeLimit" prop="timeLimit"
:rules="{ :rules="{
required: true, required: true,
message: '请选择办理时限', message: '请选择办理时限',
}" }"
> >
<time-limit-select <time-limit-select
v-model="form.timeLimit" v-model="form.timeLimit"
v-model:maxSignDuration="form.maxSignDuration" v-model:maxSignDuration="form.maxSignDuration"
v-model:maxHandleDuration="form.maxHandleDuration" v-model:maxHandleDuration="form.maxHandleDuration"
v-model:maxExtensionDuration="form.maxExtensionDuration" v-model:maxExtensionDuration="form.maxExtensionDuration"
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="审核流程" label="审核流程"
prop="approvalFlow" prop="approvalFlow"
:rules="{ :rules="{
required: true, required: true,
message: '请选择审核流程', message: '请选择审核流程',
}" }"
> >
<el-radio-group v-model="form.approvalFlow"> <el-radio-group v-model="form.approvalFlow">
<el-radio <el-radio
v-for="item in dict.approvalFlow" v-for="item in dict.approvalFlow"
:key="item.dictCode" :key="item.dictCode"
:value="item.dictValue" :value="item.dictValue"
>{{ item.dictLabel >{{
}}{{ item.remark ? `(${item.remark})` : "" }}</el-radio item.dictLabel
> }}{{ item.remark ? `(${item.remark})` : "" }}
</el-radio-group> </el-radio
<div class="tips mt-10"> >
<p> </el-radio-group>
三级审核 在问题提交办结时需经过所队>二级机构>市局三级审核通过后方可办结 <div class="tips mt-10">
</p> <p>
<p> 三级审核 在问题提交办结时需经过所队>二级机构>市局三级审核通过后方可办结
二级审核 在问题提交办结时仅需经过所队>二级机构两级审核通过后即可办结 </p>
</p> <p>
</div> 二级审核 在问题提交办结时仅需经过所队>二级机构两级审核通过后即可办结
</el-form-item> </p>
</el-form> </div>
<footer class="flex end mt-20"> </el-form-item>
<el-button </el-form>
type="primary" <footer class="flex end mt-20">
size="large" <el-button
@click="handleSubmit" type="primary"
>确认下发</el-button size="large"
> @click="handleSubmit"
</footer> >确认下发
</el-dialog> </el-button
>
</footer>
</el-dialog>
</template> </template>
<script setup> <script setup>
import { BASE_PATH } from "@/api/request"; import {BASE_PATH} from "@/api/request";
import { import {
listCaseVerif, listCaseVerif,
delCaseVerif, delCaseVerif,
distributeCaseVerif, distributeCaseVerif,
} from "@/api/data/caseVerif"; } from "@/api/data/caseVerif";
import { DistributionState } from "@/enums/dictEnums"; import {DistributionState} from "@/enums/dictEnums";
import { getDictLable } from "@/utils/util"; import {getDictLable} from "@/utils/util";
import feedback from "@/utils/feedback"; import feedback from "@/utils/feedback";
import useCatchStore from "@/stores/modules/catch"; import useCatchStore from "@/stores/modules/catch";
const catchStore = useCatchStore(); const catchStore = useCatchStore();
const dict = catchStore.getDicts([ const dict = catchStore.getDicts([
"distributionState", "distributionState",
"timeLimit", "timeLimit",
"approvalFlow" "approvalFlow",
]); ]);
const query = ref({ const query = ref({
size: 10, size: 10,
current: 1, current: 1,
responderKey: "name", responderKey: "name",
}); });
const list = ref([]); const list = ref([]);
const total = ref(0); const total = ref(0);
function getList() { function getList() {
listCaseVerif(query.value).then((data) => { listCaseVerif(query.value).then((data) => {
list.value = data.records; list.value = data.records;
total.value = data.total; total.value = data.total;
}); });
} }
function reset() { function reset() {
query.value = { query.value = {
size: 10, size: 10,
current: 1, current: 1,
responderKey: "name", responderKey: "name",
}; };
getList(); getList();
} }
getList(); getList();
@ -382,9 +423,9 @@ getList();
const show = ref(false); const show = ref(false);
async function handleDel(row) { async function handleDel(row) {
await feedback.confirm("确定要删除该数据?"); await feedback.confirm("确定要删除该数据?");
await delCaseVerif(row.originId); await delCaseVerif(row.originId);
getList(); getList();
} }
const distributeListShow = ref(false); const distributeListShow = ref(false);
@ -392,33 +433,34 @@ const distributeList = ref([]);
const distributeShow = ref(false); const distributeShow = ref(false);
function handleAddDistribute(row) { function handleAddDistribute(row) {
distributeList.value.push(row); distributeList.value.push(row);
} }
function handleShowDistributeDialog() { function handleShowDistributeDialog() {
distributeShow.value = true; distributeShow.value = true;
} }
const form = ref({}); const form = ref({});
const formRef = ref() const formRef = ref()
function handleRemoveDistribute(row) { function handleRemoveDistribute(row) {
distributeList.value.splice( distributeList.value.splice(
distributeList.value.findIndex( distributeList.value.findIndex(
(item) => item.originId === row.originId (item) => item.originId === row.originId
), ),
1 1
); );
} }
async function handleSubmit() { async function handleSubmit() {
await formRef.value.validate() await formRef.value.validate()
form.value.data = distributeList.value form.value.data = distributeList.value
await distributeCaseVerif(form.value) await distributeCaseVerif(form.value)
form.value = {} form.value = {}
distributeShow.value = false distributeShow.value = false
distributeListShow.value = false distributeListShow.value = false
feedback.msgSuccess('下发成功') feedback.msgSuccess('下发成功')
getList() getList()
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

271
src/views/data/Mail12337.vue

@ -0,0 +1,271 @@
<template>
<div class="container">
<header>
<el-form :label-width="114">
<el-row>
<el-col :span="6">
<el-form-item label="信件编号">
<el-input
placeholder="请输入"
v-model="query.originId"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="投诉人">
<div class="flex gap">
<el-select
v-model="query.responderKey"
style="width: 160px"
@change="delete query.responderValue"
>
<el-option value="name" label="姓名"/>
<el-option value="phone" label="电话"/>
</el-select>
<el-input
placeholder="请输入"
v-model="query.responderValue"
clearable
/>
</div>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="登记时间">
<date-time-range-picker-ext
v-model="query.discoverTime"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="具体内容">
<el-input
placeholder="请输入"
v-model="query.thingDesc"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="mb-25 flex between">
<div>
<el-button type="primary" @click="show = true"
>数据导入
</el-button
>
<el-badge
:value="distributeList.length"
class="ml-10"
v-if="distributeList.length"
>
<el-button type="primary" @click="distributeShow = true">问题下发</el-button>
</el-badge>
</div>
<div>
<el-button type="primary" @click="getList">
<template #icon>
<icon name="el-icon-Search"/>
</template>
查询
</el-button
>
<el-button @click="reset">重置</el-button>
</div>
</div>
</header>
<div class="table-container">
<el-table :data="list">
<el-table-column
label="信件编号"
prop="onlyId"
show-overflow-tooltip
/>
<el-table-column
label="投诉渠道"
prop="letterSource"
/>
<el-table-column
label="登记时间"
prop="discoverTime"
show-overflow-tooltip
/>
<el-table-column
label="投诉人"
prop="name"
width="90"
/>
<el-table-column label="电话" prop="phone"/>
<el-table-column
label="被投诉机构"
show-overflow-tooltip
>
<template #default="{ row }">
<span>{{ row.secondDepartName }}</span>
<span>{{ row.thirdDepartName }}</span>
</template>
</el-table-column>
<el-table-column
label="具体内容"
prop="wjwfProject"
show-overflow-tooltip
/>
<el-table-column label="状态">
<template #default="{ row }">
<el-tag>{{
getDictLable(
dict.distributionState,
row.distributionState
)
}}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template #default="{ row }">
<template
v-if="
row.distributionState ===
DistributionState.UNDISTRIBUTED
"
>
<el-button
type="primary"
link
@click="handleAddDistribute(row)"
v-if="
distributeList.filter(
(item) => item.onlyId === row.onlyId
).length === 0
"
>加入问题下发
</el-button
>
<el-button
type="info"
link
v-else
@click="handleRemoveDistribute(row)"
>移除
</el-button
>
</template>
<el-button type="danger" link @click="handleDel(row)"
>删除
</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<div class="flex end mt-8">
<el-pagination
@size-change="getList"
@current-change="getList"
:current-page="query.current"
:page-sizes="[10, 20, 50]"
v-model:page-size="query.size"
v-model:current-page="query.current"
layout="total, sizes, prev, pager, next"
:total="total"
>
</el-pagination>
</div>
</div>
<!-- <data-import
v-model="show"
title="公安部信访投诉 数据导入"
:problemSourcesCode="ProblemSources.GABXF"
@close="show = false"
@update="getList"
/>-->
<data-distrbute-12337
v-model:show="distributeShow"
v-model:data="distributeList"
@update="getList"
/>
</template>
<script setup>
import {
delPetitionComplaint,
} from "@/api/data/petitionComplaint";
import {ProblemSources, DistributionState} from "@/enums/dictEnums";
import feedback from "@/utils/feedback";
import {getDictLable} from "@/utils/util";
import useCatchStore from "@/stores/modules/catch";
import {delPetitionComplaint12337, listPetitionComplaint12337} from "@/api/data/petition12337.ts";
const catchStore = useCatchStore();
const dict = catchStore.getDicts([
"distributionState",
"timeLimit",
"approvalFlow",
"distributionFlow",
"distributionState",
]);
const query = ref({
size: 10,
current: 1,
responderKey: "name",
problemSourcesCode: ProblemSources.GABXF,
});
const list = ref([]);
const total = ref(0);
function getList() {
listPetitionComplaint12337(query.value).then((data) => {
list.value = data.records;
total.value = data.total;
});
}
function reset() {
query.value = {
size: 10,
current: 1,
responderKey: "name",
problemSourcesCode: ProblemSources.XF12337,
};
getList();
}
getList();
const show = ref(false);
//
async function handleDel(row) {
await feedback.confirm("确定要删除该数据?");
await delPetitionComplaint12337(row.onlyId);
getList();
}
const distributeShow = ref(false)
const distributeList = ref([])
function handleAddDistribute(row) {
distributeList.value.push(row);
}
function handleRemoveDistribute(row) {
distributeList.value.splice(
distributeList.value.findIndex(
(item) => item.originId === row.originId
),
1
);
}
</script>
<style lang="scss" scoped>
</style>

6
src/views/datav/AuditSuper.vue

@ -339,6 +339,9 @@ const option2 = {
], ],
}, },
], ],
tooltip: {
trigger: "item",
},
}; };
const option3 = { const option3 = {
@ -357,6 +360,9 @@ const option3 = {
], ],
}, },
], ],
tooltip: {
trigger: "item",
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

693
src/views/datav/CaseVerif.vue

@ -1,145 +1,145 @@
<template> <template>
<el-scrollbar height="100vh"> <el-scrollbar height="100vh">
<div class="wrapper"> <div class="wrapper">
<datav-header /> <datav-header/>
<main> <main>
<el-row :gutter="16"> <el-row :gutter="16">
<el-col :span="6"> <el-col :span="6">
<datav-card title="分县市局排名" subTitle="案件数"> <datav-card title="分县市局排名" subTitle="案件数">
<datav-tabs <datav-tabs
type="bottom-button" type="bottom-button"
> >
<datav-tab-item label="分县市局" name="1"> <datav-tab-item label="分县市局" name="1">
<el-scrollbar height="350px"> <el-scrollbar height="350px">
<datav-chart-bar <datav-chart-bar
:data="fxsjBarList" :data="fxsjBarList"
size="large" size="large"
:color="colors" :color="colors"
/> />
</el-scrollbar> </el-scrollbar>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="局属单位" name="2"> <datav-tab-item label="局属单位" name="2">
<el-scrollbar height="350px"> <el-scrollbar height="350px">
<datav-chart-bar <datav-chart-bar
:data="jsdwBarList" :data="jsdwBarList"
:max="11" :max="11"
size="large" size="large"
:color="colors" :color="colors"
/> />
</el-scrollbar> </el-scrollbar>
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>
</datav-card> </datav-card>
<datav-card title="案件问题性质"> <datav-card title="案件问题性质">
<datav-tabs> <datav-tabs>
<datav-tab-item label="执法办案" name="1"> <datav-tab-item label="执法办案" name="1">
<v-charts <v-charts
style="height: 320px" style="height: 320px"
:option="zfbaPieOption" :option="zfbaPieOption"
autoresize autoresize
/> />
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="服务管理" name="2"> <datav-tab-item label="服务管理" name="2">
<v-charts <v-charts
style="height: 320px" style="height: 320px"
:option="fwglPieOption" :option="fwglPieOption"
autoresize autoresize
/> />
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="警纪警规" name="3"> <datav-tab-item label="警纪警规" name="3">
<v-charts <v-charts
style="height: 320px" style="height: 320px"
:option="jjjgPieOption" :option="jjjgPieOption"
autoresize autoresize
/> />
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>
</datav-card> </datav-card>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<datav-date-picker v-model="time" /> <datav-date-picker v-model="time"/>
<div class="flex gap-42"> <div class="flex gap-42">
<datav-statistic <datav-statistic
:value="overview.total" :value="overview.total"
title="案件总数(起)" title="案件总数(起)"
style="width: 16.66%" style="width: 16.66%"
/> />
<datav-statistic <datav-statistic
:value="overview.confirmed" :value="overview.confirmed"
title="查实案件数" title="查实案件数"
style="width: 16.66%" style="width: 16.66%"
/> />
<datav-statistic <datav-statistic
:value="overview.investigateAndPunish" :value="overview.investigateAndPunish"
title="查处问题(个)" title="查处问题(个)"
style="width: 16.66%" style="width: 16.66%"
/> />
<datav-statistic <datav-statistic
:value="overview.accountablePeopleNumber" :value="overview.accountablePeopleNumber"
title="问责人次" title="问责人次"
style="width: 16.66%" style="width: 16.66%"
/> />
<datav-statistic <datav-statistic
:value="overview.accountableDepartNumber" :value="overview.accountableDepartNumber"
title="问责单位数" title="问责单位数"
style="width: 16.66%" style="width: 16.66%"
/> />
<datav-statistic <datav-statistic
:value="overview.confirmedRate" :value="overview.confirmedRate"
value-unit="%" value-unit="%"
title="查实率" title="查实率"
style="width: 16.66%" style="width: 16.66%"
/> />
</div> </div>
<v-charts <v-charts
style="height: 420px" style="height: 420px"
:option="option" :option="option"
autoresize autoresize
/> />
<datav-card title="查处问题趋势"> <datav-card title="查处问题趋势">
<v-charts <v-charts
style="height: 320px" style="height: 320px"
:option="option1" :option="option1"
autoresize autoresize
/> />
</datav-card> </datav-card>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<datav-card> <datav-card>
<datav-tabs> <datav-tabs>
<datav-tab-item label="案件来源占比" name="1"> <datav-tab-item label="案件来源占比" name="1">
<div class="mb-40"> <div class="mb-40">
<v-charts <v-charts
style="height: 340px" style="height: 340px"
:option="ajlyPieOption" :option="ajlyPieOption"
autoresize autoresize
/> />
</div> </div>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="问责处理情况" name="2"> <datav-tab-item label="问责处理情况" name="2">
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>
</datav-card> </datav-card>
<datav-card> <datav-card>
<datav-tabs> <datav-tabs>
<datav-tab-item label="停职处理情况" name="1"> <datav-tab-item label="停职处理情况" name="1">
<div class="mb-40"> <div class="mb-40">
<v-charts <v-charts
style="height: 340px" style="height: 340px"
:option="option4" :option="option4"
autoresize autoresize
/> />
</div> </div>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="禁闭处理情况" name="2"> <datav-tab-item label="禁闭处理情况" name="2">
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>
</datav-card> </datav-card>
</el-col> </el-col>
</el-row> </el-row>
</main> </main>
</div> </div>
</el-scrollbar> </el-scrollbar>
</template> </template>
<script setup> <script setup>
@ -147,263 +147,272 @@ import vCharts from "vue-echarts";
import changshaMap from "@/assets/data/changsha.json"; import changshaMap from "@/assets/data/changsha.json";
import * as echarts from "echarts/core"; import * as echarts from "echarts/core";
import moment from "moment"; import moment from "moment";
import { getCaseVerifData } from "@/api/datav"; import {getCaseVerifData} from "@/api/datav";
const time = ref([ const time = ref([
moment().startOf("year").format("YYYY-MM-DD"), moment().startOf("year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD"),
]); ]);
const overview = ref({ const overview = ref({
total: 0, total: 0,
confirmed: 0, confirmed: 0,
investigateAndPunish: 0, investigateAndPunish: 0,
accountablePeopleNumber: 0, accountablePeopleNumber: 0,
accountableDepartNumber: 0, accountableDepartNumber: 0,
confirmedRate: 0, confirmedRate: 0,
}); });
const fxsjBarList = ref([]); const fxsjBarList = ref([]);
const jsdwBarList = ref([]); const jsdwBarList = ref([]);
const zfbaPieList = ref([]); const zfbaPieList = ref([]);
const fwglPieList = ref([]); const fwglPieList = ref([]);
const jjjgPieList = ref([]); const jjjgPieList = ref([]);
const ajlyPieList = ref([]); const ajlyPieList = ref([]);
function getData() { function getData() {
getCaseVerifData(time.value).then((data) => { getCaseVerifData(time.value).then((data) => {
overview.value = data.overview; overview.value = data.overview;
fxsjBarList.value = data.fxsjBarList; fxsjBarList.value = data.fxsjBarList;
jsdwBarList.value = data.jsdwBarList; jsdwBarList.value = data.jsdwBarList;
zfbaPieList.value = data.zfbaPieList; zfbaPieList.value = data.zfbaPieList;
fwglPieList.value = data.fwglPieList; fwglPieList.value = data.fwglPieList;
jjjgPieList.value = data.jjjgPieList; jjjgPieList.value = data.jjjgPieList;
ajlyPieList.value = data.ajlyPieList; ajlyPieList.value = data.ajlyPieList;
}); });
} }
watch(time, () => { watch(time, () => {
getData(); getData();
}); });
onMounted(() => { onMounted(() => {
getData(); getData();
}); });
const zfbaPieOption = computed(() => { const zfbaPieOption = computed(() => {
return { return {
tooltip: { tooltip: {
trigger: "item", trigger: "item",
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
}, },
series: [ data: zfbaPieList.value,
{ },
type: "pie", ],
radius: ["40%", "70%"], };
label: {
color: "#fff",
},
data: zfbaPieList.value,
},
],
};
}); });
const fwglPieOption = computed(() => { const fwglPieOption = computed(() => {
return { return {
tooltip: { tooltip: {
trigger: "item", trigger: "item",
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
}, },
series: [ data: fwglPieList.value,
{ },
type: "pie", ],
radius: ["40%", "70%"], };
label: {
color: "#fff",
},
data: fwglPieList.value,
},
],
};
}); });
const jjjgPieOption = computed(() => { const jjjgPieOption = computed(() => {
return { return {
tooltip: { tooltip: {
trigger: "item", trigger: "item",
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
}, },
series: [ data: jjjgPieList.value,
{ },
type: "pie", ],
radius: ["40%", "70%"], };
label: {
color: "#fff",
},
data: jjjgPieList.value,
},
],
};
}); });
const ajlyPieOption = computed(() => { const ajlyPieOption = computed(() => {
return { return {
tooltip: { tooltip: {
trigger: "item", trigger: "item",
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
}, },
series: [ data: ajlyPieList.value,
{ },
type: "pie", ],
radius: ["40%", "70%"], };
label: {
color: "#fff",
},
data: ajlyPieList.value,
},
],
};
}); });
echarts.registerMap("changsha", changshaMap); echarts.registerMap("changsha", changshaMap);
const option = { const option = {
geo: { geo: {
// registerMap'' // registerMap''
map: "changsha", map: "changsha",
},
visualMap: {
type: "piecewise",
bottom: 10,
pieces: [
{gte: 85, lte: 100, label: "问题数低于500"},
{gte: 65, lte: 85, label: "问题数低于1000"},
{gte: 0, lte: 65, label: "问题数低于1000"},
],
right: 10, //
realtime: false,
orient: "horizontal", //
textStyle: {
color: "#fff", //
}, },
visualMap: { calculable: true,
type: "piecewise", inRange: {
bottom: 10, color: ["#D34343", "#F6A149", "#4987F6"],
pieces: [
{ gte: 85, lte: 100, label: "问题数低于500" },
{ gte: 65, lte: 85, label: "问题数低于1000" },
{ gte: 0, lte: 65, label: "问题数低于1000" },
],
right: 10, //
realtime: false,
orient: "horizontal", //
textStyle: {
color: "#fff", //
},
calculable: true,
inRange: {
color: ["#D34343", "#F6A149", "#4987F6"],
},
}, },
series: [ },
{ series: [
name: "长沙", {
type: "map", name: "长沙",
map: "changsha", type: "map",
hoverAnimation: true, map: "changsha",
hoverAnimation: true,
label: { label: {
show: true, show: true,
color: "white", color: "white",
}, },
itemStyle: { itemStyle: {
areaColor: "#02215E", // areaColor: "#02215E", //
}, },
}, },
], ],
}; };
const option1 = ref({ const option1 = ref({
xAxis: { xAxis: {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
data: [ data: [
"9/10", "9/10",
"9/11", "9/11",
"9/12", "9/12",
"9/13", "9/13",
"9/14", "9/14",
"9/15", "9/15",
"9/16", "9/16",
"9/17", "9/17",
"9/18", "9/18",
"9/19", "9/19",
"9/20", "9/20",
"9/21", "9/21",
"9/22", "9/22",
"9/23", "9/23",
], ],
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#193775",
},
}, },
yAxis: { },
type: "value", tooltip: {
splitLine: { trigger: 'axis',
show: true, axisPointer: {
lineStyle: { type: 'line',
color: "#193775", label: {
}, backgroundColor: '#6a7985'
}, }
}
},
series: [
{
type: "line",
smooth: true,
label: {
show: false,
},
lineStyle: {
color: "#28E6FF",
width: 4,
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(40,230,255,0.47)", //
},
{
offset: 1,
color: "rgba(40,230,255,0)", //
},
]),
},
data: [
2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310,
3000, 3100, 3100, 3100,
],
}, },
series: [ ],
{
type: "line",
smooth: true,
label: {
show: false,
},
lineStyle: {
color: "#28E6FF",
width: 4,
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(40,230,255,0.47)", //
},
{
offset: 1,
color: "rgba(40,230,255,0)", //
},
]),
},
data: [
2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310,
3000, 3100, 3100, 3100,
],
},
],
}); });
const option4 = { const option4 = {
tooltip: { tooltip: {
trigger: "item", trigger: "item",
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
},
data: [
{value: 311, name: "其他"},
{value: 735, name: "违反公安部“九个一律”"},
{value: 580, name: "违反保密工作纪律"},
{value: 484, name: "涉嫌泄露国家、警务秘密"},
{value: 300, name: "违反“三个规定”"},
{value: 300, name: "违反生活纪律"},
{value: 11, name: "涉嫌违纪违法"},
],
}, },
series: [ ],
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
},
data: [
{ value: 311, name: "其他" },
{ value: 735, name: "违反公安部“九个一律”" },
{ value: 580, name: "违反保密工作纪律" },
{ value: 484, name: "涉嫌泄露国家、警务秘密" },
{ value: 300, name: "违反“三个规定”" },
{ value: 300, name: "违反生活纪律" },
{ value: 11, name: "涉嫌违纪违法" },
],
},
],
}; };
const colors = [ const colors = [
{ {
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
percentage: 80, percentage: 80,
}, },
{ {
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)", color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
percentage: 60, percentage: 60,
}, },
{ {
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)", color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
percentage: 40, percentage: 40,
}, },
]; ];
</script> </script>

273
src/views/datav/MailVisits.vue

@ -117,6 +117,11 @@
:option="option2" :option="option2"
autoresize autoresize
/> />
<div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
<div class="tab-title-item active">
暂无数据
</div>
</div>
</datav-card> </datav-card>
</el-col> </el-col>
@ -130,6 +135,11 @@
title="信访总件数" title="信访总件数"
style="width: 20%" style="width: 20%"
/> />
<datav-statistic
:value="overview.commissionerMail"
title="局长信箱"
style="width: 20%"
/>
<datav-statistic <datav-statistic
:value="overview.countryMail" :value="overview.countryMail"
title="国家信访" title="国家信访"
@ -140,11 +150,7 @@
title="公安部信访" title="公安部信访"
style="width: 20%" style="width: 20%"
/> />
<datav-statistic
:value="overview.commissionerMail"
title="局长信箱"
style="width: 20%"
/>
<datav-statistic <datav-statistic
:value="overview.numMail" :value="overview.numMail"
title="12337信访" title="12337信访"
@ -162,28 +168,28 @@
<datav-tabs v-model="activeMailTrend" @change="handleTabChange"> <datav-tabs v-model="activeMailTrend" @change="handleTabChange">
<datav-tab-item label="国家信访" name="1"> <datav-tab-item label="国家信访" name="1">
<v-charts <v-charts
style="height: 300px" style="width: 105%; height: 300px;"
:option="option1" :option="option1"
autoresize autoresize
/> />
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="公安部信访" name="2"> <datav-tab-item label="公安部信访" name="2">
<v-charts <v-charts
style="height: 300px" style="width: 105%; height: 300px; "
:option="option1" :option="option1"
autoresize autoresize
/> />
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="局长信箱" name="3"> <datav-tab-item label="局长信箱" name="3">
<v-charts <v-charts
style="height: 300px" style="width: 105%; height: 300px; "
:option="option1" :option="option1"
autoresize autoresize
/> />
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="12337信访" name="4"> <datav-tab-item label="12337信访" name="4">
<v-charts <v-charts
style="height: 300px" style="width: 105%; height: 300px; "
:option="option1" :option="option1"
autoresize autoresize
/> />
@ -247,29 +253,30 @@
> >
<datav-tab-item label="领导督办" name="1"> <datav-tab-item label="领导督办" name="1">
<el-scrollbar height="300px"> <el-scrollbar height="300px">
<datav-chart-bar-mail <datav-chart-bar-mail
:data="xx" :data="xx"
size="large" size="large"
/> />
</el-scrollbar> </el-scrollbar>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="缠访闹访" name="2"> <datav-tab-item label="缠访闹访" name="2">
<el-scrollbar height="300px"> <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> </el-scrollbar>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="群体集访" name="3"> <datav-tab-item label="群体集访" name="3">
<el-scrollbar height="300px"> <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> </el-scrollbar>
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>
@ -281,29 +288,29 @@
> >
<datav-tab-item label="领导督办" name="1"> <datav-tab-item label="领导督办" name="1">
<el-scrollbar height="300px"> <el-scrollbar height="300px">
<datav-chart-bar-mail <datav-chart-bar-mail
:data="xx" :data="xx"
size="large" size="large"
/> />
</el-scrollbar> </el-scrollbar>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="缠访闹访" name="2"> <datav-tab-item label="缠访闹访" name="2">
<el-scrollbar height="300px"> <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> </el-scrollbar>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="群体集访" name="3"> <datav-tab-item label="群体集访" name="3">
<el-scrollbar height="300px"> <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> </el-scrollbar>
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>
@ -317,6 +324,11 @@
:option="option3" :option="option3"
autoresize autoresize
/> />
<div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
<div class="tab-title-item active">
暂无数据
</div>
</div>
</datav-card> </datav-card>
</el-col> </el-col>
</el-row> </el-row>
@ -331,16 +343,74 @@
import vCharts from "vue-echarts"; import vCharts from "vue-echarts";
import changshaMap from "@/assets/data/changsha.json"; import changshaMap from "@/assets/data/changsha.json";
import * as echarts from "echarts/core"; import * as echarts from "echarts/core";
import {getMailVisitsData, getRecentlyMailTrend} from "@/api/datav"; import {getMailVisitsData, getRecentlyMailTrend, getRecentlyMailTrend12337} from "@/api/datav";
import moment from "moment/moment.js"; import moment from "moment/moment.js";
/**
* 地图渲染
*/
const getMapDataList = async () => {
try {
mapDataList = await mapCountyData(currentParams);
changsMap();
} catch (error) {}
};
echarts.registerMap("changsha", changshaMap); echarts.registerMap("changsha", changshaMap);
let mapDataList = reactive([
{name: '长沙县', value: 500},
{name: '浏阳市', value: 400},
{name: '开福区', value: 300},
{name: '浏阳市', value: 400},
{name: '望城区', value: 400},
{name: '芙蓉区', value: 400},
{name: '天心区', value: 400},
{name: '雨花区', value: 400},
{name: '岳麓区', value: 400},
{name: '宁乡市', value: 400},
]);
const option = { const option = {
geo: { geo: {
// registerMap'' // registerMap''
map: "changsha", map: "changsha",
itemStyle: {
normal: {
areaColor: "#02215E", //
},
},
},
tooltip: {
show: true,
trigger: "item",
position: "right",
formatter: function (params) {
if (typeof params.data === "undefined") {
console.log(params);
} else {
console.log(params);
return `<div class="tooltip">
<div class="tooltip-title">${params.name}</div>
<div class="tooltip-content">
<ul class="tooltip-ul">
<li>信访总件数 <span>${params.data.todaysum}</span></li>
<li>国家信访 <span>${params.data.allsum}</span>
</li>
<li>公安部信访 <span>${params.data.completed}</span>
</li>
<li>局长信箱 <span>${params.data.completedrate}</span></li>
<li>12337信访 <span>${params.data.resolvedrate}</span></li>
</ul>
</div>
</div>`;
}
},
backgroundColor: "#031577", //
borderColor: "#0A2F86",
borderWidth: 0, // 1
borderRadius: 3, // 3
shadowBlur: 0, // 8
shadowOffsetX: 0, // 0
shadowOffsetY: 0, // 6
}, },
visualMap: { visualMap: {
type: "piecewise", type: "piecewise",
bottom: 10, bottom: 10,
@ -366,18 +436,15 @@ const option = {
type: "map", type: "map",
map: "changsha", map: "changsha",
hoverAnimation: true, hoverAnimation: true,
label: { label: {
show: true, show: true,
color: "white", color: "white",
}, },
itemStyle: { data: mapDataList,
normal: {
areaColor: "#02215E", //
},
},
}, },
], ],
}; };
const option1 = ref({ const option1 = ref({
xAxis: { xAxis: {
@ -512,24 +579,71 @@ 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 handleCommand = async (command) => { const handleCommand = async (command) => {
selectedOption.value = `${command}`; selectedOption.value = `${command}`;
const recentlyMailTrend = await getRecentlyMailTrend({ if (activeMailTrend.value === "1" || activeMailTrend.value === "2") {
sourcesCode: activeMailTab.value, const recentlyMailTrend = await getRecentlyMailTrend({
year: command, sourcesCode: activeMailTab.value,
startTime: time.value[0], year: command,
endTime: time.value[1] startTime: time.value[0],
}); // 访 endTime: time.value[1]
// xAxis series }); // 访
option1.value.xAxis.data = recentlyMailTrend.monthList; // xAxis series
option1.value.series[0].data = recentlyMailTrend.totalList; option1.value.xAxis.data = recentlyMailTrend.monthList;
option1.value.series[0].data = recentlyMailTrend.totalList;
}
if (activeMailTrend.value === "3") {
}
if (activeMailTrend.value === "4") {
const recentlyMailTrend = await getRecentlyMailTrend12337({
year: selectedOption.value,
startTime: time.value[0],
endTime: time.value[1]
})
option1.value.xAxis.data = recentlyMailTrend.monthList;
option1.value.series[0].data = recentlyMailTrend.totalList;
}
}; };
// 访tab
watch(activeMailTrend, async () => {
if (activeMailTrend.value <= 2) {
const recentlyMailTrend = await getRecentlyMailTrend({
sourcesCode: activeMailTrend.value,
year: selectedOption.value,
startTime: time.value[0],
endTime: time.value[1]
});
option1.value.xAxis.data = recentlyMailTrend.monthList;
option1.value.series[0].data = recentlyMailTrend.totalList;
}
if (activeMailTrend.value === "3") {
option1.value.xAxis.data = null;
option1.value.series[0].data = null;
}
if (activeMailTrend.value === "4") {
const recentlyMailTrend = await getRecentlyMailTrend12337({
year: selectedOption.value,
startTime: time.value[0],
endTime: time.value[1]
})
option1.value.xAxis.data = recentlyMailTrend.monthList;
option1.value.series[0].data = recentlyMailTrend.totalList;
}
})
/**
* 初始化
*/
let timer;
const currentYear = new Date().getFullYear();
function initRecentlyMailTrend() { function initRecentlyMailTrend() {
getRecentlyMailTrend({ getRecentlyMailTrend({
sourcesCode: "1", sourcesCode: "1",
year: "2024", year: currentYear,
startTime: time.value[0], startTime: time.value[0],
endTime: time.value[1] endTime: time.value[1]
}).then((data) => { }).then((data) => {
@ -539,22 +653,6 @@ function initRecentlyMailTrend() {
}); });
} }
watch(activeMailTrend, async () => {
const recentlyMailTrend = await getRecentlyMailTrend({
sourcesCode: activeMailTrend.value,
year: selectedOption.value,
startTime: time.value[0],
endTime: time.value[1]
});
option1.value.xAxis.data = recentlyMailTrend.monthList;
option1.value.series[0].data = recentlyMailTrend.totalList;
})
/**
* 初始化
*/
let timer;
watch(time, () => { watch(time, () => {
getData(); getData();
// initRecentlyMailTrend() // initRecentlyMailTrend()
@ -586,6 +684,12 @@ function getData() {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/style/datav.scss"; @import "@/style/datav.scss";
@ -595,16 +699,13 @@ function getData() {
top: 65px; top: 65px;
} }
.main { .datav-tab-item {
padding: 0 10px 10px; display: flex;
justify-content: center;
align-items: center;
} }
.main-left,
.main-right {
float: left;
width: 25%;
padding: 0 10px;
height: 90%;
}
</style> </style>

6
src/views/datav/RightsComfort.vue

@ -373,6 +373,9 @@ const option3 = computed(() => {
data: punishmentSituationList.value, data: punishmentSituationList.value,
}, },
], ],
tooltip: {
trigger: "item",
},
}; };
}); });
@ -388,6 +391,9 @@ const option4 = computed(() => {
data: comfortSituationList.value, data: comfortSituationList.value,
}, },
], ],
tooltip: {
trigger: "item",
},
}; };
}); });

855
src/views/datav/SceneInsp.vue

@ -1,218 +1,220 @@
<template> <template>
<el-scrollbar height="100vh"> <el-scrollbar height="100vh">
<div class="wrapper"> <div class="wrapper">
<datav-header /> <datav-header/>
<main> <main>
<el-row :gutter="16"> <el-row :gutter="16">
<el-col :span="6"> <el-col :span="6">
<datav-card title="执勤值守情况"> <datav-card title="执勤值守情况">
<el-row class="mb-32"> <el-row class="mb-32">
<el-col :span="6"> <el-col :span="6">
<div class="descriptions_cell text-center"> <div class="descriptions_cell text-center">
<div class="descriptions_content"> <div class="descriptions_content">
56 56
</div> </div>
<div class="descriptions_label"> <div class="descriptions_label">
问题数 问题数
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="descriptions_cell text-center"> <div class="descriptions_cell text-center">
<div class="descriptions_content"> <div class="descriptions_content">
0 0
</div> </div>
<div class="descriptions_label"> <div class="descriptions_label">
整改中 整改中
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="descriptions_cell text-center"> <div class="descriptions_cell text-center">
<div class="descriptions_content"> <div class="descriptions_content">
56 56
</div> </div>
<div class="descriptions_label"> <div class="descriptions_label">
已整改 已整改
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="descriptions_cell text-center"> <div class="descriptions_cell text-center">
<div class="descriptions_content"> <div class="descriptions_content">
100% 100%
</div> </div>
<div class="descriptions_label"> <div class="descriptions_label">
整改率 整改率
</div> </div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<datav-chart-bar <datav-chart-bar
title="整改率排名" title="整改率排名"
sub-title="完成数/问题数" sub-title="完成数/问题数"
:data="data1" :data="data1"
/> />
<div class="flex tab-title flex center mt-16"> <div class="flex tab-title flex center mt-16">
<div class="tab-title-item active"> <div class="tab-title-item active">
分县市局 分县市局
</div> </div>
<div class="tab-title-item">局属单位</div> <div class="tab-title-item">局属单位</div>
</div> </div>
</datav-card> </datav-card>
<datav-card title="问题类型占比"> <datav-card title="问题类型占比">
<v-charts <v-charts
style="height: 300px" style="height: 300px"
:option="option2" :option="option2"
autoresize autoresize
/> />
</datav-card> </datav-card>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="datav-col"> <div class="datav-col">
<label for="">统计周期</label> <label for="">统计周期</label>
<span>2024年01月01日 - 2024年08月30日</span> <span>2024年01月01日 - 2024年08月30日</span>
</div> </div>
<div class="flex gap-42"> <div class="flex gap-42">
<datav-statistic <datav-statistic
:value="194" :value="194"
title="通报问题数" title="通报问题数"
style="width: 16.66%" style="width: 16.66%"
/> />
<datav-statistic <datav-statistic
:value="2" :value="2"
title="整改中" title="整改中"
style="width: 16.66%" style="width: 16.66%"
/> />
<datav-statistic <datav-statistic
:value="192" :value="192"
title="已整改" title="已整改"
style="width: 16.66%" style="width: 16.66%"
/> />
<datav-statistic <datav-statistic
:value="73" :value="73"
title="涉及单位数" title="涉及单位数"
style="width: 16.66%" style="width: 16.66%"
/> />
<datav-statistic <datav-statistic
:value="214" :value="214"
title="涉及人数" title="涉及人数"
style="width: 16.66%" style="width: 16.66%"
/> />
<datav-statistic <datav-statistic
:value="99" :value="99"
value-unit="%" value-unit="%"
title="整改率" title="整改率"
style="width: 16.66%" style="width: 16.66%"
/> />
</div> </div>
<v-charts <v-charts
style="height: 450px" style="height: 450px"
:option="option" :option="option"
autoresize autoresize
/> />
<datav-card title="问题趋势"> <datav-card title="问题趋势">
<v-charts <v-charts
style="height: 280px" style="height: 280px"
:option="option1" :option="option1"
autoresize autoresize
/> />
</datav-card> </datav-card>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<datav-card title="枪支管理"> <datav-card title="枪支管理">
<el-row class="mb-32"> <el-row class="mb-32">
<el-col :span="6"> <el-col :span="6">
<div class="descriptions_cell text-center"> <div class="descriptions_cell text-center">
<div class="descriptions_content"> <div class="descriptions_content">
42 42
</div> </div>
<div class="descriptions_label"> <div class="descriptions_label">
问题数 问题数
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="descriptions_cell text-center"> <div class="descriptions_cell text-center">
<div class="descriptions_content"> <div class="descriptions_content">
2 2
</div> </div>
<div class="descriptions_label"> <div class="descriptions_label">
整改中 整改中
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="descriptions_cell text-center"> <div class="descriptions_cell text-center">
<div class="descriptions_content"> <div class="descriptions_content">
40 40
</div> </div>
<div class="descriptions_label"> <div class="descriptions_label">
已整改 已整改
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="descriptions_cell text-center"> <div class="descriptions_cell text-center">
<div class="descriptions_content"> <div class="descriptions_content">
95% 95%
</div> </div>
<div class="descriptions_label"> <div class="descriptions_label">
整改率 整改率
</div> </div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<datav-chart-bar <datav-chart-bar
title="问题数排名" title="问题数排名"
sub-title="问题数" sub-title="问题数"
:data="data2" :data="data2"
:max="9700" :max="9700"
/> />
<div class="flex tab-title flex center mt-16"> <div class="flex tab-title flex center mt-16">
<div class="tab-title-item active"> <div class="tab-title-item active">
分县市局 分县市局
</div> </div>
<div class="tab-title-item">局属单位</div> <div class="tab-title-item">局属单位</div>
</div> </div>
</datav-card> </datav-card>
<datav-card title="督察工作动态"> <datav-card title="督察工作动态">
<el-scrollbar height="400px"> <el-scrollbar height="400px">
<div class="message"> <div class="message">
<div class="message-title">工作部署</div> <div class="message-title">工作部署</div>
<div class="message-content">关于报送2024年第二季度贯彻落实防止干预司法三个规定进展情况的通知</div> <div class="message-content">关于报送2024年第二季度贯彻落实防止干预司法三个规定进展情况的通知</div>
<div class="message-footer flex end"> <div class="message-footer flex end">
<span>2024-09-18 18:00:13</span> <span>2024-09-18 18:00:13</span>
</div> </div>
</div> </div>
<div class="message" type="warning"> <div class="message" type="warning">
<div class="message-title" >督察通报</div> <div class="message-title">督察通报</div>
<div class="message-content">自20******日起****同志担任****单位****职务期间的经济责任履行情况进行审计必要时将追溯至相关年度或延伸审计有关单位</div> <div class="message-content">
<div class="message-footer flex end"> 自20******日起****同志担任****单位****职务期间的经济责任履行情况进行审计必要时将追溯至相关年度或延伸审计有关单位
<span>2024-09-18 18:00:13</span> </div>
</div> <div class="message-footer flex end">
</div> <span>2024-09-18 18:00:13</span>
<div class="message" type="success"> </div>
<div class="message-title" >工作简报</div> </div>
<div class="message-content">关于报送2024年第二季度贯彻落实防止干预司法三个规定进展情况的通知</div> <div class="message" type="success">
<div class="message-footer flex end"> <div class="message-title">工作简报</div>
<span>2024-09-18 18:00:13</span> <div class="message-content">关于报送2024年第二季度贯彻落实防止干预司法三个规定进展情况的通知</div>
</div> <div class="message-footer flex end">
</div> <span>2024-09-18 18:00:13</span>
<div class="message"> </div>
<div class="message-title">工作部署</div> </div>
<div class="message-content">关于报送2024年第二季度贯彻落实防止干预司法三个规定进展情况的通知</div> <div class="message">
<div class="message-footer flex end"> <div class="message-title">工作部署</div>
<span>2024-09-18 18:00:13</span> <div class="message-content">关于报送2024年第二季度贯彻落实防止干预司法三个规定进展情况的通知</div>
</div> <div class="message-footer flex end">
</div> <span>2024-09-18 18:00:13</span>
</el-scrollbar> </div>
</datav-card> </div>
</el-col> </el-scrollbar>
</el-row> </datav-card>
</main> </el-col>
</div> </el-row>
</el-scrollbar> </main>
</div>
</el-scrollbar>
</template> </template>
<script setup> <script setup>
import vCharts from "vue-echarts"; import vCharts from "vue-echarts";
@ -221,232 +223,249 @@ import * as echarts from "echarts/core";
echarts.registerMap("changsha", changshaMap); echarts.registerMap("changsha", changshaMap);
const option = { const option = {
geo: { geo: {
// registerMap'' // registerMap''
map: "changsha", map: "changsha",
}, },
visualMap: { visualMap: {
type: "piecewise", type: "piecewise",
bottom: 10, bottom: 10,
pieces: [ pieces: [
{ gte: 85, lte: 100, label: "问题数低于500" }, {gte: 85, lte: 100, label: "问题数低于500"},
{ gte: 65, lte: 85, label: "问题数低于1000" }, {gte: 65, lte: 85, label: "问题数低于1000"},
{ gte: 0, lte: 65, label: "问题数低于1000" }, {gte: 0, lte: 65, label: "问题数低于1000"},
], ],
right: 10, // right: 10, //
realtime: false, realtime: false,
orient: "horizontal", // orient: "horizontal", //
textStyle: { textStyle: {
color: "#fff", // color: "#fff", //
},
calculable: true,
inRange: {
color: ["#D34343", "#F6A149", "#4987F6"],
},
}, },
series: [ calculable: true,
{ inRange: {
name: "长沙", color: ["#D34343", "#F6A149", "#4987F6"],
type: "map", },
map: "changsha", },
hoverAnimation: true, series: [
{
name: "长沙",
type: "map",
map: "changsha",
hoverAnimation: true,
label: { label: {
show: true, show: true,
color: "white", color: "white",
}, },
itemStyle: { itemStyle: {
normal: { normal: {
areaColor: "#02215E", // areaColor: "#02215E", //
},
},
}, },
], },
},
],
}; };
const option1 = ref({ const option1 = ref({
xAxis: { xAxis: {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
data: [ data: [
"9/10", "9/10",
"9/11", "9/11",
"9/12", "9/12",
"9/13", "9/13",
"9/14", "9/14",
"9/15", "9/15",
"9/16", "9/16",
"9/17", "9/17",
"9/18", "9/18",
"9/19", "9/19",
"9/20", "9/20",
"9/21", "9/21",
"9/22", "9/22",
"9/23", "9/23",
],
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#193775",
},
}
},
series: [
{
type: "line",
smooth: true,
label: {
show: false
},
lineStyle: {
color: "#28E6FF",
width: 4,
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(40,230,255,0.47)", //
},
{
offset: 1,
color: "rgba(40,230,255,0)", //
},
]),
},
data: [
2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310,
3000, 3100, 3100, 3100,
],
},
], ],
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#193775",
},
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
label: {
backgroundColor: '#6a7985'
}
}
},
series: [
{
type: "line",
smooth: true,
label: {
show: false
},
lineStyle: {
color: "#28E6FF",
width: 4,
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(40,230,255,0.47)", //
},
{
offset: 1,
color: "rgba(40,230,255,0)", //
},
]),
},
data: [
2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310,
3000, 3100, 3100, 3100,
],
},
],
}); });
const data1 = [ const data1 = [
{ {
name: "开福分局", name: "开福分局",
value: 100, value: 100,
unit: "%", unit: "%",
numerator: 16, numerator: 16,
denominator: 16, denominator: 16,
}, },
{ {
name: "芙蓉分局", name: "芙蓉分局",
value: 100, value: 100,
unit: "%", unit: "%",
numerator: 11, numerator: 11,
denominator: 11, denominator: 11,
}, },
{ {
name: "岳麓分局", name: "岳麓分局",
value: 100, value: 100,
unit: "%", unit: "%",
numerator: 10, numerator: 10,
denominator: 10, denominator: 10,
}, },
{ {
name: "雨花分局", name: "雨花分局",
value: 100, value: 100,
unit: "%", unit: "%",
numerator: 9, numerator: 9,
denominator: 9, denominator: 9,
}, },
{ {
name: "望城分局", name: "望城分局",
value: 100, value: 100,
unit: "%", unit: "%",
numerator: 4, numerator: 4,
denominator: 4, denominator: 4,
}, },
{ {
name: "浏阳市局", name: "浏阳市局",
value: 100, value: 100,
unit: "%", unit: "%",
numerator: 3, numerator: 3,
denominator: 3, denominator: 3,
}, },
{ {
name: "长沙县局", name: "长沙县局",
value: 100, value: 100,
unit: "%", unit: "%",
numerator: 3, numerator: 3,
denominator: 3, denominator: 3,
}, },
]; ];
const data2 = [ const data2 = [
{ {
name: "开福分局", name: "开福分局",
value: 9700 value: 9700
}, },
{ {
name: "芙蓉分局", name: "芙蓉分局",
value: 9021 value: 9021
}, },
{ {
name: "岳麓分局", name: "岳麓分局",
value: 8512 value: 8512
}, },
{ {
name: "雨花分局", name: "雨花分局",
value: 8021 value: 8021
}, },
{ {
name: "望城分局", name: "望城分局",
value: 7111 value: 7111
}, },
{ {
name: "浏阳市局", name: "浏阳市局",
value: 6622 value: 6622
}, },
{ {
name: "长沙县局", name: "长沙县局",
value: 6221 value: 6221
}, },
]; ];
const option2 = { const option2 = {
series: [ tooltip: {
{ trigger: "item",
type: "pie", },
radius: ["40%", "70%"], series: [
label: { {
color: "#fff", type: "pie",
}, radius: ["40%", "70%"],
data: [ label: {
{ value: 18.6, name: "执法办案" }, color: "#fff",
{ value: 15.5, name: "训练执勤" }, },
{ value: 1.9, name: "纪律作风" }, data: [
{ value: 2.5, name: "专项工作" }, {value: 18.6, name: "执法办案"},
{ value: 30, name: "整改核查" }, {value: 15.5, name: "训练执勤"},
{ value: 31, name: "其他类型" }, {value: 1.9, name: "纪律作风"},
], {value: 2.5, name: "专项工作"},
}, {value: 30, name: "整改核查"},
], {value: 31, name: "其他类型"},
],
},
],
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/style/datav.scss"; @import "@/style/datav.scss";
.message { .message {
padding: 10px; padding: 10px;
margin-bottom: 10px;
background: linear-gradient(270deg, rgba(16, 151, 255, 0.1) 0%, rgba(0, 55, 236, 0.87) 100%);
&[type=warning] {
background: linear-gradient(270deg, rgba(255, 190, 16, 0.1) 0%, rgba(236, 84, 0, 0.87) 100%);
}
&[type=success] {
background: linear-gradient(270deg, rgba(91, 216, 9, 0.14) 0%, #28813D 100%);
}
.message-title {
font-size: 14px;
margin-bottom: 10px; margin-bottom: 10px;
background: linear-gradient( 270deg, rgba(16,151,255,0.1) 0%, rgba(0,55,236,0.87) 100%); }
&[type=warning] {
background: linear-gradient( 270deg, rgba(255,190,16,0.1) 0%, rgba(236,84,0,0.87) 100%); .message-content {
} margin-bottom: 10px;
&[type=success] { }
background: linear-gradient( 270deg, rgba(91,216,9,0.14) 0%, #28813D 100%);
}
.message-title {
font-size: 14px;
margin-bottom: 10px;
}
.message-content {
margin-bottom: 10px;
}
} }
</style> </style>
Loading…
Cancel
Save