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

信访大屏前端2.0

main
不爱学习的石同学 1 year ago
parent
a5804c24dd
commit
b408af7843
8 changed files with 849 additions and 510 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. 18
      src/api/data/basicScreen.ts
  2. 21
      src/api/data/supervisionNotify.ts
  3. 194
      src/components/datav/chart-bar-new.vue
  4. 110
      src/components/datav/statistic.vue
  5. 12
      src/views/data/Ajhc.vue
  6. 32
      src/views/data/Mail12337.vue
  7. 840
      src/views/datav/Gobal.vue
  8. 132
      src/views/datav/SceneInsp.vue

18
src/api/data/basicScreen.ts
Unescape View File

@ -0,0 +1,18 @@
import request from "@/api/request";
/**
* 信息大屏api
* @author: sh
* @date: 2024-011-7
*/
export function getAllGobalCount(times) {
return request.get({
url: `/datav/dataGobalScreen?beginTime=${times[0]}&endTime=${times[1]}`
});
}

21
src/api/data/supervisionNotify.ts
Unescape View File

@ -0,0 +1,21 @@
import request from "@/api/request";
export function importCaseVerif(body) {
return request.post({
url: '/data/caseVerif/import',
body
});
}
export function listCaseVerif(query) {
return request.get({
url: '/data/caseVerif',
query
});
}
export function getAllSupervisionNotifyCount(times) {
return request.get({
url: `/datav/supervisonNotify?beginTime=${times[0]}&endTime=${times[1]}`
});
}

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

@ -0,0 +1,194 @@
<template>
<!-- 顶部标题和子标题 -->
<div class="flex between v-center mb-10">
<span class="bar-title">{{ title }}</span>
<span class="bar-sub-title">{{ subTitle }}</span>
</div>
<!-- 条目列表 -->
<div>
<div
class="flex v-center bar-item between wrap"
v-for="item in data"
:size="size"
:style="{ '--label-width': `${labelWidth}px` }"
:position="labelPosition"
>
<!-- 条目标签 -->
<span class="bar-item-label mr-10">
{{ item.label }}
</span>
<!-- 条目内容 -->
<div class="bar-item_content mr-16">
<div
class="bar-item_content-bar"
:style="{
width: `${(item.value / max) * 100}%`,
background: getColor((item.value / max) * 100),
}"
></div>
</div>
<!-- 条目值 -->
<span class="mr-16">{{ item.value }}</span>
<!-- 条目备注 -->
<span
class="bar-item_remark text-right"
v-if="item.denominator"
style="min-width: 40px"
>
<span class="text-success">{{ item.numerator }}</span>
<span>/</span>
<span>{{ item.denominator }}</span>
</span>
</div>
</div>
</template>
<script setup>
import {onMounted, ref, watch} from "vue";
const props = defineProps({
title: {
type: String,
default: "",
},
subTitle: {
type: String,
default: "",
},
data: {
type: Array,
default: [],
},
size: {
type: String,
default: "",
},
unit: {
type: String,
default: "",
},
color: {
type: [Object, String],
default: "linear-gradient(270deg, #63e700 0%, #19674c 100%)",
},
labelWidth: {
type: Number,
default: 80,
},
labelPosition: {
type: String,
default: "left",
},
});
const max = ref(100);
// 监听 data 变化，并更新 max 值
watch(
() => props.data,
() => {
getMax();
}
);
// 获取最大值
function getMax() {
if (props.unit !== "%") {
max.value = Math.max(...props.data.map((item) => item.value));
}
}
// 组件挂载时计算最大值
onMounted(() => {
getMax();
});
// 根据值获取对应的颜色
function getColor(val) {
if (typeof props.color === "string") {
return props.color;
}
if (Array.isArray(props.color)) {
const colors = [...props.color];
colors.sort((a, b) => b.percentage - a.percentage);
for (let i = 0; i < colors.length; i++) {
if (val > colors[0].percentage) {
return colors[0].color;
}
}
}
return "linear-gradient(270deg, #63e700 0%, #19674c 100%)";
}
</script>
<style lang="scss" scoped>
.bar-title {
font-size: 19px;
}
.bar-sub-title {
color: #597ae9;
font-size: 14px;
}
.bar-item {
font-size: 17px;
&[size="large"] {
.bar-item_content {
.bar-item_content-bar {
height: 13px;
}
}
}
&[size="small"] {
font-size: 12px;
}
.bar-item-label {
text-align: right;
width: var(--label-width);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&[position="left"] {
height: 32px;
line-height: 32px;
}
&[position="top"] {
margin-bottom: 4px;
.bar-item-label {
width: 100%;
text-align: left;
}
.bar-item_content {
width: calc(100% - 80px);
}
}
.bar-item_content {
width: calc(100% - var(--label-width) - 80px);
.bar-item_content-bar {
width: 0;
height: 9px;
background: linear-gradient(270deg, #63e700 0%, #19674c 100%);
transition: width 0.3s;
}
}
.bar-item_remark {
font-size: 14px;
.text-success {
color: #09c700;
}
}
}
</style>

110
src/components/datav/statistic.vue
Unescape View File

@ -1,77 +1,79 @@
<template> <template>
<div class="statistic"> <div class="statistic">
<div class="statistic-number"> <div class="statistic-number">
{{ isDecimal ? parseFloat(outputValue.toFixed(2)) : parseInt(outputValue) }}{{ valueUnit }} {{ isDecimal ? parseFloat(outputValue.toFixed(2)) : parseInt(outputValue) }}{{ valueUnit }}
</div>
<div class="statistic-title">{{ title }}</div>
</div> </div>
<div class="statistic-title">{{ title }}</div>
</div>
</template> </template>
<script setup> <script setup>
import { useTransition } from "@vueuse/core"; import {useTransition} from "@vueuse/core";
const props = defineProps({ const props = defineProps({
title: { title: {
type: String type: String
}, },
value: { value: {
type: Number, type: Number,
defalut: 0, default: 0,
}, },
valueUnit: { valueUnit: {
type: String, type: String,
}, },
// 是否是小数 // 是否是小数
isDecimal: { isDecimal: {
type: String, type: String,
defalut: false default: false
} }
}); });
const value = ref(0); const value = ref(props.value);
watch(() => props.value, (val) => { watch(() => props.value, (val) => {
value.value = val; value.value = val;
}) })
const outputValue = useTransition(value, { const outputValue = useTransition(value, {
duration: 1500, duration: 1500,
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.statistic { .statistic {
text-align: center; text-align: center;
.statistic-number { .statistic-number {
font-size: 39px; font-size: 39px;
font-weight: 700; font-weight: 700;
height: 64px; height: 64px;
line-height: 64px; line-height: 64px;
background: linear-gradient( background: linear-gradient(
270deg, 270deg,
rgba(3, 11, 57, 0) 0%, rgba(3, 11, 57, 0) 0%,
#00117d 49%, #00117d 49%,
rgba(3, 11, 57, 0) 100% rgba(3, 11, 57, 0) 100%
); );
margin-bottom: 14px; margin-bottom: 14px;
&::before,
&::after {
display: block;
content: "";
height: 4px;
width: 85%;
margin: auto;
background: linear-gradient(
270deg,
rgba(1, 7, 94, 0) 0%,
#213ffb 49%,
rgba(1, 7, 93, 0) 100%
);
}
}
.statistic-title {
font-size: 27px;
white-space: break-spaces;
}
.statistic-footer { &::before,
font-size: 27px; &::after {
display: block;
content: "";
height: 4px;
width: 85%;
margin: auto;
background: linear-gradient(
270deg,
rgba(1, 7, 94, 0) 0%,
#213ffb 49%,
rgba(1, 7, 93, 0) 100%
);
} }
}
.statistic-title {
font-size: 27px;
white-space: break-spaces;
}
.statistic-footer {
font-size: 27px;
}
} }
</style> </style>

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

@ -46,8 +46,8 @@
</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.distributionState"> <el-select v-model="query.distributionState" clearable>
<el-option <el-option
v-for="item in dict.distributionState" v-for="item in dict.distributionState"
:key="item.id" :key="item.id"
@ -61,9 +61,6 @@
<el-col :span="6"> <el-col :span="6">
<el-form-item label="是否属实"> <el-form-item label="是否属实">
<el-select <el-select
size="small"
style="width: 146px"
placeholder="核查情况"
clearable clearable
v-model="query.checkStatus" v-model="query.checkStatus"
> >
@ -139,12 +136,12 @@
/> />
<el-table-column <el-table-column
label="投诉人电话" label="投诉人电话"
prop="contactPhone" prop="responderPhone"
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 label="涉及单位" prop="thirdDepartName"/> <el-table-column label="涉及单位" prop="thirdDepartName"/>
<el-table-column <el-table-column
label="具体内容" label="具体内容"
@ -391,6 +388,7 @@ const dict = catchStore.getDicts([
"distributionState", "distributionState",
"timeLimit", "timeLimit",
"approvalFlow", "approvalFlow",
"inspectCase",
]); ]);
const query = ref({ const query = ref({

32
src/views/data/Mail12337.vue
Unescape View File

@ -46,6 +46,25 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row>
<el-col :span="6">
<el-form-item label="是否属实">
<el-select
clearable
v-model="query.checkStatus"
>
<el-option
v-for="item in dict.inspectCase"
:key="item.id"
:label="item.dictLabel"
:value="item.dictValue"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<div class="mb-25 flex between"> <div class="mb-25 flex between">
<div> <div>
@ -112,6 +131,14 @@
prop="wjwfProject" prop="wjwfProject"
show-overflow-tooltip 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="状态"> <el-table-column label="状态">
<template #default="{ row }"> <template #default="{ row }">
<el-tag>{{ <el-tag>{{
@ -210,13 +237,15 @@ const dict = catchStore.getDicts([
"approvalFlow", "approvalFlow",
"distributionFlow", "distributionFlow",
"distributionState", "distributionState",
"inspectCase",
]); ]);
const query = ref({ const query = ref({
size: 10, size: 10,
current: 1, current: 1,
responderKey: "name", responderKey: "name",
problemSourcesCode: ProblemSources.GABXF, problemSourcesCode: ProblemSources.XF12337,
}); });
const list = ref([]); const list = ref([]);
@ -238,6 +267,7 @@ function reset() {
}; };
getList(); getList();
} }
getList(); getList();
const show = ref(false); const show = ref(false);

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

@ -1,445 +1,455 @@
<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="机构问题排名" sub-title="问题数">
<el-row class="mb-32">
<el-col :span="6"> <datav-tabs
<div class="descriptions_cell text-center"> v-model="activeOrgTab"
<div class="descriptions_content"> type="bottom-button"
4323 >
</div> <datav-tab-item label="分县市局" name="1">
<div class="descriptions_label"> <el-scrollbar height="300px">
问题数 <datav-chart-bar
</div> :data="data1"
</div> size="large"
</el-col> :max="11"
<el-col :span="6"> :color="colors"
<div class="descriptions_cell text-center"> />
<div class="descriptions_content"> </el-scrollbar>
4323 </datav-tab-item>
</div> <datav-tab-item label="局属单位" name="2">
<div class="descriptions_label"> <el-scrollbar height="300px">
整改中 <datav-chart-bar
</div> :data="data1"
</div> :max="11"
</el-col> size="large"
<el-col :span="6"> :color="colors"
<div class="descriptions_cell text-center"> />
<div class="descriptions_content"> </el-scrollbar>
2356 </datav-tab-item>
</div> </datav-tabs>
<div class="descriptions_label"> </datav-card>
已整改 <datav-card title="警务评议">
</div> <el-row class="mb-32">
</div> <el-col :span="6">
</el-col> <div class="descriptions_cell text-center">
<el-col :span="6"> <div class="descriptions_content">
<div class="descriptions_cell text-center"> 4323
<div class="descriptions_content"> </div>
91% <div class="descriptions_label">
</div> 样本总数
<div class="descriptions_label"> </div>
整改率 </div>
</div> </el-col>
</div> <el-col :span="6">
</el-col> <div class="descriptions_cell text-center">
</el-row> <div class="descriptions_content">
<datav-chart-bar 4323
title="整改率排名" </div>
sub-title="完成数/问题数" <div class="descriptions_label">
:data="data1" 满意/共本满意数
/> </div>
<div class="flex tab-title flex center mt-16"> </div>
<div class="tab-title-item active"> </el-col>
分县市局 <el-col :span="6">
</div> <div class="descriptions_cell text-center">
<div class="tab-title-item">局属单位</div> <div class="descriptions_content">
</div> 2356
</datav-card> </div>
<datav-card title="警务评议"> <div class="descriptions_label">
<el-row class="mb-32"> 不满意数
<el-col :span="6"> </div>
<div class="descriptions_cell text-center"> </div>
<div class="descriptions_content"> </el-col>
4323 <el-col :span="6">
</div> <div class="descriptions_cell text-center">
<div class="descriptions_label"> <div class="descriptions_content">
样本总数 91%
</div> </div>
</div> <div class="descriptions_label">
</el-col> 满意率
<el-col :span="6"> </div>
<div class="descriptions_cell text-center"> </div>
<div class="descriptions_content"> </el-col>
4323 </el-row>
</div> <datav-chart-bar
<div class="descriptions_label"> title="满意率排名"
满意/共本满意数 sub-title="满意样本数/样本总数"
</div> :data="data1"
</div> />
</el-col> <div class="flex tab-title flex center mt-16">
<el-col :span="6"> <div class="tab-title-item active">
<div class="descriptions_cell text-center"> 分县市局
<div class="descriptions_content"> </div>
2356 <div class="tab-title-item">局属单位</div>
</div> </div>
<div class="descriptions_label"> </datav-card>
不满意数 </el-col>
</div> <el-col :span="12">
</div> <datav-date-picker v-model="time"/>
</el-col> <div class="flex gap-42">
<el-col :span="6"> <datav-statistic
<div class="descriptions_cell text-center"> :value="overview.totalPro"
<div class="descriptions_content"> title="问题总数"
91% style="width: 16.66%"
</div> />
<div class="descriptions_label"> <datav-statistic
满意率 :value="overview.supervisionPro"
</div> title="督察问题"
</div> style="width: 16.66%"
</el-col> />
</el-row> <datav-statistic
<datav-chart-bar :value="overview.caseVerificationPro"
title="满意率排名" title="案件核查问题"
sub-title="满意样本数/样本总数" style="width: 16.66%"
:data="data1" />
/> <datav-statistic
<div class="flex tab-title flex center mt-16"> :value="overview.mailComplaintPro"
<div class="tab-title-item active"> title="信访投诉问题"
分县市局 style="width: 16.66%"
</div> />
<div class="tab-title-item">局属单位</div> <datav-statistic
</div> :value="overview.policeValuationPro"
</datav-card> title="警务评议问题"
</el-col> style="width: 16.66%"
<el-col :span="12"> />
<div class="datav-col"> <datav-statistic
<label for="">统计周期：</label> :value="overview.reviewPro"
<span>2024年01月01日 - 2024年08月30日</span> title="审计监督问题"
</div> style="width: 16.66%"
<div class="flex gap-42"> />
<datav-statistic </div>
:value="8683" <!-- <div @click="go">-->
title="问题总数" <!-- <v-charts-->
style="width: 20%" <!-- style="height: 450px"-->
/> <!-- :option="option"-->
<datav-statistic <!-- autoresize-->
:value="4432" <!-- />-->
title="处理中" <!-- </div>-->
style="width: 20%" <datav-card title="问题趋势">
/> <v-charts
<datav-statistic style="height: 300px"
:value="801" :option="option1"
title="涉及单位" autoresize
style="width: 20%" />
/> </datav-card>
<datav-statistic </el-col>
:value="7001" <el-col :span="6">
title="涉及人员" <datav-card title="局长信箱">
style="width: 20%" <el-row class="mb-32">
/> <el-col :span="6">
<datav-statistic <div class="descriptions_cell text-center">
:value="91" <div class="descriptions_content">
value-unit="%" 4323
title="办结率" </div>
style="width: 20%" <div class="descriptions_label">
/> 信件总数
</div> </div>
<div @click="go"> </div>
<v-charts </el-col>
style="height: 450px" <el-col :span="6">
:option="option" <div class="descriptions_cell text-center">
autoresize <div class="descriptions_content">
/> 4323
</div> </div>
<datav-card title="问题趋势"> <div class="descriptions_label">
<v-charts 处理中
style="height: 300px" </div>
:option="option1" </div>
autoresize </el-col>
/> <el-col :span="6">
</datav-card> <div class="descriptions_cell text-center">
</el-col> <div class="descriptions_content">
<el-col :span="6"> 2356
<datav-card title="局长信箱"> </div>
<el-row class="mb-32"> <div class="descriptions_label">
<el-col :span="6"> 办结数
<div class="descriptions_cell text-center"> </div>
<div class="descriptions_content"> </div>
4323 </el-col>
</div> <el-col :span="6">
<div class="descriptions_label"> <div class="descriptions_cell text-center">
信件总数 <div class="descriptions_content">
</div> 96%
</div> </div>
</el-col> <div class="descriptions_label">
<el-col :span="6"> 满意率
<div class="descriptions_cell text-center"> </div>
<div class="descriptions_content"> </div>
4323 </el-col>
</div> </el-row>
<div class="descriptions_label"> <datav-chart-bar
处理中 title="满意率排名"
</div> sub-title="满意样本数/样本总数"
</div> :data="data1"
</el-col> />
<el-col :span="6"> <div class="flex tab-title flex center mt-16">
<div class="descriptions_cell text-center"> <div class="tab-title-item active">
<div class="descriptions_content"> 分县市局
2356 </div>
</div> <div class="tab-title-item">局属单位</div>
<div class="descriptions_label"> </div>
办结数 </datav-card>
</div> <datav-card title="案件核查">
</div> <el-row class="mb-32">
</el-col> <el-col :span="8">
<el-col :span="6"> <div class="descriptions_cell text-center">
<div class="descriptions_cell text-center"> <div class="descriptions_content">
<div class="descriptions_content"> 4323
96% </div>
</div> <div class="descriptions_label">
<div class="descriptions_label"> 问题数
满意率 </div>
</div> </div>
</div> </el-col>
</el-col> <el-col :span="8">
</el-row> <div class="descriptions_cell text-center">
<datav-chart-bar <div class="descriptions_content">
title="满意率排名" 4323
sub-title="满意样本数/样本总数" </div>
:data="data1" <div class="descriptions_label">
/> 问题数
<div class="flex tab-title flex center mt-16"> </div>
<div class="tab-title-item active"> </div>
分县市局 </el-col>
</div> <el-col :span="8">
<div class="tab-title-item">局属单位</div> <div class="descriptions_cell text-center">
</div> <div class="descriptions_content">
</datav-card> 91%
<datav-card title="案件核查"> </div>
<el-row class="mb-32"> <div class="descriptions_label">
<el-col :span="8"> 问题数
<div class="descriptions_cell text-center"> </div>
<div class="descriptions_content"> </div>
4323 </el-col>
</div> </el-row>
<div class="descriptions_label"> <datav-chart-bar
问题数 title="满意率排名"
</div> sub-title="满意样本数/样本总数"
</div> :data="data1"
</el-col> />
<el-col :span="8"> <div class="flex tab-title flex center mt-16">
<div class="descriptions_cell text-center"> <div class="tab-title-item active">
<div class="descriptions_content"> 分县市局
4323 </div>
</div> <div class="tab-title-item">局属单位</div>
<div class="descriptions_label"> </div>
问题数 </datav-card>
</div> </el-col>
</div> </el-row>
</el-col> </main>
<el-col :span="8"> </div>
<div class="descriptions_cell text-center"> </el-scrollbar>
<div class="descriptions_content">
91%
</div>
<div class="descriptions_label">
问题数
</div>
</div>
</el-col>
</el-row>
<datav-chart-bar
title="满意率排名"
sub-title="满意样本数/样本总数"
:data="data1"
/>
<div class="flex tab-title flex center mt-16">
<div class="tab-title-item active">
分县市局
</div>
<div class="tab-title-item">局属单位</div>
</div>
</datav-card>
</el-col>
</el-row>
</main>
</div>
</el-scrollbar>
</template> </template>
<script setup> <script setup>
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 moment from "moment/moment";
import {getCaseVerifData} from "@/api/datav";
import {getAllGobalCount} from "@/api/data/basicScreen.ts";
const router = useRouter(); const router = useRouter();
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, calculable: true,
inRange: { inRange: {
color: ["#D34343", "#F6A149", "#4987F6"], 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: {
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",
},
}, },
yAxis: { },
type: "value", series: [
splitLine: { {
show: true, type: "line",
lineStyle: { smooth: true,
color: "#193775", 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 data1 = [ const data1 = [
{ {
label: "开福分局", label: "开福分局",
value: 97, value: 97,
unit: "%", },
numerator: 97, {
denominator: 100, label: "芙蓉分局",
}, value: 90,
{ },
label: "芙蓉分局", {
value: 90, label: "岳麓分局",
unit: "%", value: 85,
numerator: 90, },
denominator: 100, {
}, label: "雨花分局",
{ value: 80,
label: "岳麓分局", },
value: 85, {
unit: "%", label: "望城分局",
numerator: 85, value: 71,
denominator: 100, },
}, {
{ label: "浏阳市局",
label: "雨花分局", value: 66,
value: 80, },
unit: "%", {
numerator: 80, label: "长沙县局",
denominator: 100, value: 62,
}, },
{
label: "望城分局",
value: 71,
unit: "%",
numerator: 71,
denominator: 100,
},
{
label: "浏阳市局",
value: 66,
unit: "%",
numerator: 66,
denominator: 100,
},
{
label: "长沙县局",
value: 62,
unit: "%",
numerator: 62,
denominator: 100,
},
]; ];
function go() { function go() {
router.push("/datav/sub1") router.push("/datav/sub1")
} }
// region 机构问题排名
const activeOrgTab = ref("1");
// endregion
// region 初始化数据
const overview = ref({
totalPro: 0,
supervisionPro: 0,
caseVerificationPro: 0,
mailComplaintPro: 0,
policeValuationPro: 0,
reviewPro: 0,
});
const time = ref([
moment().startOf("year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"),
]);
function getData() {
getAllGobalCount(time.value).then((res) => {
console.log(res);
console.log(res.overview)
overview.value = res.overview;
});
}
watch(time, () => {
getData();
});
onMounted(() => {
getData();
});
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,
},
];
// endregion
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/style/datav.scss"; @import "@/style/datav.scss";

132
src/views/datav/SceneInsp.vue
Unescape View File

@ -5,7 +5,7 @@
<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">
@ -48,17 +48,36 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<datav-chart-bar
title="整改率排名" <datav-tabs
sub-title="完成数/问题数" type="bottom-button"
:data="data1" v-model="activeTabLeft"
/> >
<div class="flex tab-title flex center mt-16"> <datav-tab-item label="分县市局" name="1">
<div class="tab-title-item active"> <el-scrollbar height="350px">
分县市局 <datav-chart-bar-new
</div> :data="data1"
<div class="tab-title-item">局属单位</div> size="large"
</div> :color="colors"
title="整改率排名"
sub-title="完成数/问题数"
/>
</el-scrollbar>
</datav-tab-item>
<datav-tab-item label="局属单位" name="2">
<el-scrollbar height="350px">
<datav-chart-bar
:data="jsdwBarList"
:max="11"
size="large"
:color="colors"
title="整改率排名"
sub-title="完成数/问题数"
/>
</el-scrollbar>
</datav-tab-item>
</datav-tabs>
</datav-card> </datav-card>
<datav-card title="问题类型占比"> <datav-card title="问题类型占比">
<v-charts <v-charts
@ -69,38 +88,35 @@
</datav-card> </datav-card>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="datav-col"> <datav-date-picker v-model="time"/>
<label for="">统计周期：</label>
<span>2024年01月01日 - 2024年08月30日</span>
</div>
<div class="flex gap-42"> <div class="flex gap-42">
<datav-statistic <datav-statistic
:value="194" :value="overview.supervisionNotifyTotal"
title="通报问题数" title="通报问题数"
style="width: 16.66%" style="width: 16.66%"
/> />
<datav-statistic <datav-statistic
:value="2" :value="overview.supervisionNotifyChangingTotal"
title="整改中" title="整改中"
style="width: 16.66%" style="width: 16.66%"
/> />
<datav-statistic <datav-statistic
:value="192" :value="overview.supervisionNotifyChangedTotal"
title="已整改" title="已整改"
style="width: 16.66%" style="width: 16.66%"
/> />
<datav-statistic <datav-statistic
:value="73" :value="overview.supervisionNotifyOrgTotal"
title="涉及单位数" title="涉及单位数"
style="width: 16.66%" style="width: 16.66%"
/> />
<datav-statistic <datav-statistic
:value="214" :value="overview.supervisionNotifyPreTotal"
title="涉及人数" title="涉及人数"
style="width: 16.66%" style="width: 16.66%"
/> />
<datav-statistic <datav-statistic
:value="99" :value="overview.correctionRate"
value-unit="%" value-unit="%"
title="整改率" title="整改率"
style="width: 16.66%" style="width: 16.66%"
@ -220,6 +236,8 @@
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 moment from "moment";
import {getAllSupervisionNotifyCount} from "@/api/data/supervisionNotify.ts";
echarts.registerMap("changsha", changshaMap); echarts.registerMap("changsha", changshaMap);
const option = { const option = {
@ -337,57 +355,57 @@ const option1 = ref({
], ],
}); });
const data1 = [ const data1 = ref([
{ {
name: "开福分局", label: "开福分局",
value: 100, value: 80,
unit: "%", unit: "%",
numerator: 16, numerator: 16,
denominator: 16, denominator: 17,
}, },
{ {
name: "芙蓉分局", label: "芙蓉分局",
value: 100, value: 100,
unit: "%", unit: "%",
numerator: 11, numerator: 11,
denominator: 11, denominator: 11,
}, },
{ {
name: "岳麓分局", label: "岳麓分局",
value: 100, value: 100,
unit: "%", unit: "%",
numerator: 10, numerator: 10,
denominator: 10, denominator: 10,
}, },
{ {
name: "雨花分局", label: "雨花分局",
value: 100, value: 100,
unit: "%", unit: "%",
numerator: 9, numerator: 9,
denominator: 9, denominator: 9,
}, },
{ {
name: "望城分局", label: "望城分局",
value: 100, value: 100,
unit: "%", unit: "%",
numerator: 4, numerator: 4,
denominator: 4, denominator: 4,
}, },
{ {
name: "浏阳市局", label: "浏阳市局",
value: 100, value: 100,
unit: "%", unit: "%",
numerator: 3, numerator: 3,
denominator: 3, denominator: 3,
}, },
{ {
name: "长沙县局", label: "长沙县局",
value: 100, value: 100,
unit: "%", unit: "%",
numerator: 3, numerator: 3,
denominator: 3, denominator: 3,
}, },
]; ]);
const data2 = [ const data2 = [
{ {
@ -442,6 +460,54 @@ const option2 = {
}, },
], ],
}; };
// region 初始化数据
const activeTabLeft = ref("1");
const overview = ref({
supervisionNotifyTotal: 0,
supervisionNotifyOrgTotal: 0,
supervisionNotifyPreTotal: 0,
supervisionNotifyChangingTotal: 0,
supervisionNotifyChangedTotal: 0,
correctionRate: 0,
});
const time = ref([
moment().startOf("year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"),
]);
function getData() {
getAllSupervisionNotifyCount(time.value).then((res) => {
overview.value = res.overview;
});
}
watch(time, () => {
getData();
});
onMounted(() => {
getData();
});
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,
},
];
// endregion
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/style/datav.scss"; @import "@/style/datav.scss";

Write Preview
Loading…
Cancel
Save