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

审计大屏 11/17/ 1:08 现场督察 审计监督

main
不爱学习的石同学 1 year ago
parent
f57b0720df
commit
b3734bfaa0
8 changed files with 795 additions and 716 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. 8
      src/api/data/supervisionNotify.ts
  2. 2
      src/api/datav.ts
  3. 5
      src/components/datav/chart-bar.vue
  4. 10
      src/views/datav/AuditSuper.vue
  5. 5
      src/views/datav/Gobal.vue
  6. 16
      src/views/datav/MailVisits.vue
  7. 794
      src/views/datav/RightsComfort.vue
  8. 671
      src/views/datav/SceneInsp.vue

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

@ -14,4 +14,12 @@ export function getChangedRank(times, groupType) {
return request.get({ return request.get({
url: `/datav/supervisonNotify/rank?beginTime=${times[0]}&endTime=${times[1]}&groupType=${groupType}` url: `/datav/supervisonNotify/rank?beginTime=${times[0]}&endTime=${times[1]}&groupType=${groupType}`
}); });
}
/**
* 获取问题趋势数据
*/
export function getSupervisionTrend(year) {
return request.get({
url: `/datav/supervisonNotify/getSupervisionTrend?year=${year}`
});
} }

2
src/api/datav.ts
Unescape View File

@ -38,3 +38,5 @@ export function getRecentlyMailTrend12337(query) {

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

@ -23,7 +23,7 @@
}" }"
></div> ></div>
</div> </div>
<span>{{ item.value }}</span> <span >{{ item.value + props.unit }}</span>
<span <span
class="bar-item_remark text-right ml-8" class="bar-item_remark text-right ml-8"
v-if="item.denominator" v-if="item.denominator"
@ -72,6 +72,7 @@ const props = defineProps({
type: String, type: String,
default: "left", default: "left",
}, },
}); });
const max = ref(100); const max = ref(100);
@ -82,6 +83,8 @@ watch(
} }
); );
function getMax() { function getMax() {
if (props.unit !== "%") { if (props.unit !== "%") {
max.value = Math.max(...props.data.map((item) => item.value)); max.value = Math.max(...props.data.map((item) => item.value));

10
src/views/datav/AuditSuper.vue
Unescape View File

@ -33,29 +33,29 @@
</div> </div>
<div class="flex gap-42"> <div class="flex gap-42">
<datav-statistic <datav-statistic
:value="86" :value="462"
title="审计单位/项目" title="审计单位/项目"
style="width: 20%" style="width: 20%"
/> />
<datav-statistic <datav-statistic
:value="437" :value="79224.59"
:title="`审计总金额\n（万元）`" :title="`审计总金额\n（万元）`"
:isDecimal="true" :isDecimal="true"
style="width: 20%" style="width: 20%"
/> />
<datav-statistic <datav-statistic
:value="54" :value="3544.01"
:title="`审减金额\n（万元）`" :title="`审减金额\n（万元）`"
:isDecimal="true" :isDecimal="true"
style="width: 20%" style="width: 20%"
/> />
<datav-statistic <datav-statistic
:value="21" :value="1192"
title="查出问题数" title="查出问题数"
style="width: 20%" style="width: 20%"
/> />
<datav-statistic <datav-statistic
:value="10" :value="389"
title="追责问责数" title="追责问责数"
style="width: 20%" style="width: 20%"
/> />

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

@ -216,13 +216,10 @@ const option = ref({
// shadowOffsetY: 0, // 设置垂直阴影位移量为6像素 // shadowOffsetY: 0, // 设置垂直阴影位移量为6像素
}, },
visualMap: { visualMap: {
type: "piecewise", type: "piecewise",
bottom: 10, bottom: 10,
pieces: [ pieces: [
{gte: 0, lte: 10, label: "问题数低于500"}, { min: 0, max: 500, label: "问题数低于500" }, { min: 501, max: 1000, label: "问题数介于500-1000" }, { min: 1001, label: "问题数高于1000" },
{gte: 10, lte: 20, label: "问题数介于500-1000"},
{gte: 30, label: "问题数高于1000"},
], ],
right: 10, right: 10,
realtime: false, realtime: false,

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

@ -183,13 +183,7 @@
autoresize autoresize
/> />
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="局长信箱" name="3">
<v-charts
style="width: 105%; height: 300px; "
:option="option1"
autoresize
/>
</datav-tab-item>
<datav-tab-item label="12337信访" name="4"> <datav-tab-item label="12337信访" name="4">
<v-charts <v-charts
style="width: 105%; height: 300px; " style="width: 105%; height: 300px; "
@ -805,5 +799,13 @@ const colors = [
} }
/*
<!-- <datav-tab-item label="局长信箱" name="3">-->
<!-- <v-charts-->
<!-- style="width: 105%; height: 300px; "-->
<!-- :option="option1"-->
<!-- autoresize-->
<!-- />-->
<!-- </datav-tab-item>-->*/
</style> </style>

794
src/views/datav/RightsComfort.vue
Unescape View File

@ -1,146 +1,137 @@
<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="维权案件情况">
<!-- <datav-chart-bar--> <datav-chart-bar
<!-- sub-title="案件数"--> sub-title="案件数"
<!-- :data="data1"--> :data="data1"
<!-- :max="31"--> :max="31"
<!-- size="large"--> size="large"
<!-- />--> :color="colors"
<!-- <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">--> />
<!-- <div class="tab-title-item active">--> <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
<!--&lt;!&ndash; 分县市局&ndash;&gt;--> <div class="tab-title-item active">
<!-- 暂无数据--> <!-- 分县市局-->
<!-- </div>--> </div>
<!--&lt;!&ndash; <div class="tab-title-item">局属单位</div>&ndash;&gt;--> <!-- <div class="tab-title-item">局属单位</div>-->
<!-- </div>--> </div>
<!-- </datav-card>--> </datav-card>
<datav-card title="维权案件情况">
<v-charts <datav-card title="案件类别占比">
style="height: 300px" <v-charts
:option="option6" style="height: 350px"
autoresize :option="option2"
/> autoresize
<div class="flex tab-title flex center mt-20" style="margin-bottom: 20px"> />
<div class="tab-title-item active"> <!-- <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">-->
<!-- 受伤人数--> <!-- <div class="tab-title-item active">-->
暂无数据 <!-- &lt;!&ndash; 刑事案件&ndash;&gt;-->
</div> <!-- 暂无数据-->
<!-- <div class="tab-title-item">受伤类别</div>--> <!-- </div>-->
</div> <!-- &lt;!&ndash; <div class="tab-title-item">行政案件</div>&ndash;&gt;-->
</datav-card> <!-- </div>-->
<datav-card title="案件类别占比"> </datav-card>
<v-charts </el-col>
style="height: 300px"
:option="option2" <el-col :span="12">
autoresize <datav-date-picker v-model="time"/>
/> <div class="flex gap-42">
<div class="flex tab-title flex center mt-20" style="margin-bottom: 20px"> <datav-statistic
<div class="tab-title-item active"> :value="171"
<!-- 刑事案件--> title="维权案件总数"
暂无数据 style="width: 20%"
</div> />
<!-- <div class="tab-title-item">行政案件</div>--> <datav-statistic
</div> :value="121"
</datav-card> title="受侵害人数"
</el-col> style="width: 20%"
<el-col :span="12"> />
<datav-date-picker v-model="time" /> <datav-statistic
<div class="flex gap-42"> :value="114"
<datav-statistic title="抚慰人数"
:value="136" style="width: 20%"
title="维权案件总数" />
style="width: 20%" <datav-statistic
/> :value="205"
<datav-statistic title="打击处理人数"
:value="112" style="width: 20%"
title="受侵害人数" />
style="width: 20%" <datav-statistic
/> :value="28.1"
<datav-statistic :title="`抚慰金额\n（万元）`"
:value="comfortPersonNumber" :isDecimal="true"
title="抚慰人数" style="width: 20%"
style="width: 20%" />
/> </div>
<datav-statistic <v-charts
:value="hitPersonNumber" style="height: 360px"
title="打击处理人数" :option="option"
style="width: 20%" autoresize
/> />
<datav-statistic <el-row :gutter="20">
:value="comfortMoney" <el-col :span="12">
:title="`抚慰金额\n（万元）`" <datav-card title="打处情况">
:isDecimal="true" <v-charts
style="width: 20%" style="height: 300px"
/> :option="data10"
</div> autoresize
<v-charts />
style="height: 450px" </datav-card>
:option="option" </el-col>
autoresize <el-col :span="12">
/> <datav-card title="抚慰情况">
<el-row :gutter="20"> <v-charts
<el-col :span="12"> style="height: 300px"
<datav-card title="打处情况"> :option="option4"
<v-charts autoresize
style="height: 300px" />
:option="option3" </datav-card>
autoresize </el-col>
/> </el-row>
</datav-card> </el-col>
</el-col>
<el-col :span="12"> <el-col :span="6">
<datav-card title="抚慰情况"> <datav-card title="民辅警受伤情况">
<v-charts <v-charts
style="height: 300px" style="height: 400px"
:option="option4" :option="option6"
autoresize autoresize
/> />
</datav-card> <!-- <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">-->
</el-col> <!-- <div class="tab-title-item active">-->
</el-row> <!-- &lt;!&ndash; 受伤人数&ndash;&gt;-->
</el-col> <!-- 暂无数据-->
<el-col :span="6"> <!-- </div>-->
<datav-card title="民辅警受伤情况"> <!-- &lt;!&ndash; <div class="tab-title-item">受伤类别</div>&ndash;&gt;-->
<v-charts <!-- </div>-->
style="height: 300px" </datav-card>
:option="option6"
autoresize <datav-card title="发案情况占比">
/> <v-charts
<div class="flex tab-title flex center mt-20" style="margin-bottom: 20px"> style="height: 350px"
<div class="tab-title-item active"> :option="option5"
<!-- 受伤人数--> autoresize
暂无数据 />
</div> <!-- <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">-->
<!-- <div class="tab-title-item">受伤类别</div>--> <!-- <div class="tab-title-item active">-->
</div> <!-- 暂无数据-->
</datav-card> <!-- &lt;!&ndash; 发案环节&ndash;&gt;-->
<datav-card title="发案情况占比"> <!-- </div>-->
<v-charts <!-- &lt;!&ndash; <div class="tab-title-item">发案警种</div>&ndash;&gt;-->
style="height: 300px" <!-- &lt;!&ndash; <div class="tab-title-item">发案单位</div>&ndash;&gt;-->
:option="option5" <!-- </div>-->
autoresize </datav-card>
/> </el-col>
<div class="flex tab-title flex center mt-20" style="margin-bottom: 20px"> </el-row>
<div class="tab-title-item active"> </main>
暂无数据 </div>
<!-- 发案环节--> </el-scrollbar>
</div>
<!-- <div class="tab-title-item">发案警种</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";
@ -153,22 +144,23 @@ 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 comfortPersonNumber = ref(0); const comfortPersonNumber = ref(114);
const hitPersonNumber = ref(0); const hitPersonNumber = ref(28.1);
const comfortMoney = ref(0.0); const comfortMoney = ref(0.0);
const punishmentSituationList = ref([]); const punishmentSituationList = ref([]);
const comfortSituationList = ref([]); const comfortSituationList = ref([]);
function getData() { function getData() {
getRightsComfortData(time.value).then((data) => { // getRightsComfortData(time.value).then((data) => {
console.log('Received data:', data); // 添加日志输出 // console.log('Received data:', data); // 添加日志输出
comfortPersonNumber.value = data.comfortPersonNumber; // comfortPersonNumber.value = data.comfortPersonNumber;
hitPersonNumber.value = data.hitPersonNumber; // hitPersonNumber.value = data.hitPersonNumber;
comfortMoney.value = data.comfortMoney; // comfortMoney.value = data.comfortMoney;
punishmentSituationList.value = data.punishmentSituation; // punishmentSituationList.value = data.punishmentSituation;
comfortSituationList.value = data.comfortSituation; // comfortSituationList.value = data.comfortSituation;
}); // });
} }
watch(time, () => { watch(time, () => {
getData(); getData();
}) })
@ -176,207 +168,228 @@ onMounted(() => {
getData(); getData();
}); });
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: "数据数高于1000"},
{ gte: 65, lte: 85, label: "问题数低于1000" }, {gte: 65, lte: 85, label: "问题数低于1000"},
{ gte: 0, lte: 65, label: "问题数低于1000" }, {gte: 0, lte: 65, label: "问题数低于500"},
], ],
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: ["#4987F6", "#F6A149", "#D34343"],
type: "map", },
map: "changsha", },
hoverAnimation: true, series: [
{
label: { name: "长沙",
show: true, type: "map",
color: "white", map: "changsha",
}, hoverAnimation: true,
itemStyle: { emphasis: {
normal: { areaColor: "#FFD700", // 高亮时区域颜色
areaColor: "#02215E", // 这里将地图区域的颜色修改为红色 borderColor: "#FF0000", // 高亮时边框颜色
}, borderWidth: 4 // 高亮时边框宽度
}, },
label: {
show: true,
color: "white",
},
itemStyle: {
normal: {
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 = [
// { {
// name: "开福分局", label: "岳麓分局",
// value: 31 value: 23
// }, },
// { {
// name: "芙蓉分局", label: "芙蓉分局",
// value: 30 value: 20
// }, },
// { {
// name: "岳麓分局", label: "天心分局",
// value: 22 value: 20
// }, },
// { {
// name: "雨花分局", label: "雨花分局",
// value: 20 value: 19
// }, },
// { {
// name: "望城分局", label: "浏阳市局",
// value: 15 value: 17
// }, },
// { {
// name: "浏阳市局", label: "宁乡市局",
// value: 9 value: 11
// }, },
// { {
// name: "长沙县局", label: "开福分局",
// value: 9 value: 11
// }, },
{
label: "望城分局",
value: 9
},
{
label: "长沙县局",
value: 9
},
{
label: "高新分局",
value: 4
},
]; ];
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: [ series: [
// { {
// type: "pie", type: "pie",
// radius: ["40%", "70%"], radius: ["40%", "70%"],
// label: { label: {
// color: "#fff", color: "#fff",
// }, },
// data: [ data: [
// { value: 311, name: "故意伤害" }, {value: 2, name: "故意伤害"},
// { value: 735, name: "袭警罪" }, {value: 42, name: "袭警罪"},
// { value: 580, name: "寻衅滋事" }, {value: 2, name: "寻衅滋事"},
// { value: 484, name: "妨碍公务" } {value: 28, name: "妨碍公务"}
// ], ],
// }, },
// ], ],
tooltip: {
trigger: "item",
},
}; };
const option3 = computed(() => { const option3 = computed(() => {
return { return {
series: [ series: [
{ {
type: "pie", type: "pie",
radius: ["40%", "70%"], radius: ["40%", "70%"],
label: { label: {
color: "#fff", color: "#fff",
}, },
data: punishmentSituationList.value, data: punishmentSituationList.value,
},
],
tooltip: {
trigger: "item",
}, },
}; ],
tooltip: {
trigger: "item",
},
};
}); });
const option4 = computed(() => { const option4 = computed(() => {
@ -388,7 +401,12 @@ const option4 = computed(() => {
label: { label: {
color: "#fff", color: "#fff",
}, },
data: comfortSituationList.value, // data: comfortSituationList.value,
data: [
{value: 61, name: "民警"},
{value: 51, name: "辅警"},
{value: 2, name: "协警"},
]
}, },
], ],
tooltip: { tooltip: {
@ -398,42 +416,90 @@ const option4 = computed(() => {
}); });
const option6 = { const option6 = {
series: [ series: [
// { {
// type: "pie", type: "pie",
// radius: ["40%", "70%"], radius: ["40%", "70%"],
// label: { label: {
// color: "#fff", color: "#fff",
// }, },
// data: [ tooltip: {
// { value: 211, name: "民警" }, trigger: "item",
// { value: 655, name: "辅警" }, },
// { value: 666, name: "协警" }, data: [
// { value: 312, name: "巡防队员" } {value: 68, name: "民警"},
// ], {value: 50, name: "辅警"},
// }, {value: 3, name: "协警"},
], ],
},
],
tooltip: {
trigger: "item",
},
}; };
const option5 = { const option5 = {
series: [ series: [
// { {
// type: "pie", type: "pie",
// radius: ["40%", "70%"], radius: ["40%", "70%"],
// label: { label: {
// color: "#fff", color: "#fff",
// }, },
// data: [ data: [
// { value: 211, name: "其它" }, {value: 127, name: "110警情"},
// { value: 655, name: "网络侵权" }, {value: 32, name: "执勤处室"},
// { value: 666, name: "110警情" }, {value: 2, name: "组织调解"},
// { value: 321, name: "安保维稳" }, {value: 3, name: "传唤抓捕"},
// { value: 211, name: "执勤处室" }, {value: 2, name: "安保维稳"},
// { value: 421, name: "组织调解" }, {value: 2, name: "网络侵权"},
// ], {value: 2, name: "医闹纠纷"},
// }, {value: 1, name: "其它"},
], ],
},
],
tooltip: {
trigger: "item",
},
}; };
const data10 = {
series: [
{
type: "pie",
radius: ["40%", "70%"],
label: {
color: "#fff",
},
data: [
{value: 71, name: "刑事追究"},
{value: 97, name: "行政处理"},
],
},
],
tooltip: {
trigger: "item",
},
};
const colors = [
{
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
percentage: 80,
},
{
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
percentage: 60,
},
{
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
percentage: 40,
},
];
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/style/datav.scss"; @import "@/style/datav.scss";

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

@ -11,7 +11,7 @@
<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">
{{rankOverview.proTotal}} {{ rankOverview.proTotal }}
</div> </div>
<div class="descriptions_label"> <div class="descriptions_label">
问题数 问题数
@ -21,7 +21,7 @@
<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">
{{rankOverview.changing}} {{ rankOverview.changing }}
</div> </div>
<div class="descriptions_label"> <div class="descriptions_label">
整改中 整改中
@ -63,13 +63,14 @@
:size="small" :size="small"
title="整改率排名" title="整改率排名"
sub-title="已整改/问题数" sub-title="已整改/问题数"
unit="%"
/> />
</el-scrollbar> </el-scrollbar>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="局属单位" name="4"> <datav-tab-item label="局属单位" name="4">
<el-scrollbar height="350px"> <el-scrollbar height="350px">
<datav-chart-bar <datav-chart-bar
:data="jsdwBarList" :data="data1"
:max="11" :max="11"
size="large" size="large"
:color="colors" :color="colors"
@ -85,7 +86,7 @@
<datav-card title="问题类型占比"> <datav-card title="问题类型占比">
<v-charts <v-charts
style="height: 300px" style="height: 300px"
:option="option2" :option="wtlxPieOption"
autoresize autoresize
/> />
</datav-card> </datav-card>
@ -134,106 +135,28 @@
<datav-card title="问题趋势"> <datav-card title="问题趋势">
<v-charts <v-charts
style="height: 280px" style="height: 280px"
:option="option1" :option="proTrend"
autoresize autoresize
/> />
<div class="gobal-dropdown-container">
<el-dropdown class="test" @command="handleCommand">
<span class="el-dropdown-link my-gobal-yearselect">
{{ selectedYear + " 年" }}
</span>
<template #dropdown>
<el-dropdown-menu style="width: 90px">
<el-dropdown-item v-for="year in years" :key="year" :command="year">{{ year + " 年" }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</datav-card> </datav-card>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<datav-card> <datav-card>
<!-- <datav-tabs v-model="activeTabRight" size="small"> <datav-tabs v-model="activeTabRight" size="small">
<datav-tab-item label="枪支管理" name="1">
<datav-tabs
v-model="activeMailTabRight"
type="bottom-button"
>
<el-row class="mb-32">
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
42
</div>
<div class="descriptions_label">
问题数
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
2
</div>
<div class="descriptions_label">
整改中
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
40
</div>
<div class="descriptions_label">
已整改
</div>
</div>
</el-col>
<el-col :span="6">
<div class="descriptions_cell text-center">
<div class="descriptions_content">
95%
</div>
<div class="descriptions_label">
整改率
</div>
</div>
</el-col>
</el-row>
<datav-tab-item label="分县市局" name="1">
<el-scrollbar height="300px">
<datav-chart-bar-mail
:data="xx"
size="large"
/>
</el-scrollbar>
</datav-tab-item>
<datav-tab-item label="局属单位" name="2">
<el-scrollbar height="300px">
<datav-chart-bar-mail
:data="xx"
:max="11"
size="large"
/>
</el-scrollbar>
</datav-tab-item>
</datav-tabs>
</datav-tab-item>
<datav-tab-item label="涉企问题" name="2">
<datav-tabs
v-model="activeMailTabRight"
type="bottom-button"
>
<datav-tab-item label="分县市局" name="1">
<el-scrollbar height="300px">
<datav-chart-bar-mail
:data="xx"
size="large"
/>
</el-scrollbar>
</datav-tab-item>
<datav-tab-item label="局属单位" name="2">
<el-scrollbar height="300px">
<datav-chart-bar-mail
:data="xx"
:max="11"
size="large"
/>
</el-scrollbar>
</datav-tab-item>
</datav-tabs>
</datav-tab-item>
<datav-tab-item label="黄赌毒" name="3"> <datav-tab-item label="黄赌毒" name="3">
<datav-tabs <datav-tabs
v-model="activeMailTabRight" v-model="activeMailTabRight"
@ -241,75 +164,16 @@
> >
<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
:data="xx" :data="hddList"
size="large" size="large"
/> />
</el-scrollbar> </el-scrollbar>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="局属单位" name="2">
<el-scrollbar height="300px">
<datav-chart-bar-mail
:data="xx"
:max="11"
size="large"
/>
</el-scrollbar>
</datav-tab-item>
</datav-tabs>
</datav-tab-item>
<datav-tab-item label="执法办案" name="4">
<datav-tabs
v-model="activeMailTabRight"
type="bottom-button"
>
<datav-tab-item label="分县市局" name="1">
<el-scrollbar height="300px">
<datav-chart-bar-mail
:data="xx"
size="large"
/>
</el-scrollbar>
</datav-tab-item>
<datav-tab-item label="局属单位" name="2">
<el-scrollbar height="300px">
<datav-chart-bar-mail
:data="xx"
:max="11"
size="large"
/>
</el-scrollbar>
</datav-tab-item>
</datav-tabs>
</datav-tab-item>
<datav-tab-item label="工作日测酒" name="5">
<datav-tabs
v-model="activeMailTabRight"
type="bottom-button"
>
<datav-tab-item label="分县市局" name="1">
<el-scrollbar height="300px">
<datav-chart-bar-mail
:data="xx"
size="large"
/>
</el-scrollbar>
</datav-tab-item>
<datav-tab-item label="局属单位" name="2">
<el-scrollbar height="300px">
<datav-chart-bar-mail
:data="xx"
:max="11"
size="large"
/>
</el-scrollbar>
</datav-tab-item>
</datav-tabs> </datav-tabs>
</datav-tab-item> </datav-tab-item>
</datav-tabs>--> </datav-tabs>
<!-- <datav-chart-bar <!-- <datav-chart-bar
title="问题数排名" title="问题数排名"
@ -366,74 +230,45 @@ 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 {getAllSupervisionNotifyCount, getChangedRank} from "@/api/data/supervisionNotify.ts"; import {getAllSupervisionNotifyCount, getChangedRank, getSupervisionTrend} from "@/api/data/supervisionNotify.ts";
import {getGobalRecentlyTrendByMonth} from "@/api/data/basicScreen.ts";
const data1= ref([]);
const activeTabLeft = ref("3");
const overview = ref({
supervisionNotifyTotal: 0,
supervisionNotifyOrgTotal: 0,
supervisionNotifyPreTotal: 0,
supervisionNotifyChangingTotal: 0,
supervisionNotifyChangedTotal: 0,
correctionRate: 0,
});
const rankOverview = ref({
proTotal: 0,
changing: 0,
changed: 0,
correctionRate: 0,
});
const wtlxList = ref([])
const hddList = ref([])
echarts.registerMap("changsha", changshaMap); echarts.registerMap("changsha", changshaMap);
const option = {
geo: {
// 是上面注册时的名字哦，registerMap（'名字保持一致'）
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", // 文字颜色
},
calculable: true,
inRange: {
color: ["#D34343", "#F6A149", "#4987F6"],
},
},
series: [
{
name: "长沙",
type: "map",
map: "changsha",
hoverAnimation: true,
label: { // region 问题趋势线状图
show: true,
color: "white",
},
itemStyle: {
normal: {
areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
},
},
},
],
};
const option1 = ref({ const proTrend = ref({
grid: {
left: '10%', // 图表距离容器左边的距离
right: '10%', // 图表距离容器右边的距离
top: '10%', // 图表距离容器上边的距离
bottom: '20%', // 图表距离容器下边的距离
containLabel: false // 是否包含坐标轴的标签
},
xAxis: { xAxis: {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
data: [ data: [],
"9/10",
"9/11",
"9/12",
"9/13",
"9/14",
"9/15",
"9/16",
"9/17",
"9/18",
"9/19",
"9/20",
"9/21",
"9/22",
"9/23",
],
}, },
yAxis: { yAxis: {
type: "value", type: "value",
@ -476,166 +311,202 @@ const option1 = ref({
}, },
]), ]),
}, },
data: [ data: [],
2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310,
3000, 3100, 3100, 3100,
],
}, },
], ],
}); });
const data1 = ref([ const years = ref(['2024', '2023', '2022']); // 年份列表
/*{ const selectedYear = ref('2024'); // 当前选中的年份
label: "开福分局", const handleCommand = (year) => {
value: 90, selectedYear.value = year; // 更新当前选中的年份
unit: "%", getSupervisionTrend(year).then(res => {
numerator: 16, const supervisionTrend = res.supervisionTrend;
denominator: 17, const categories = supervisionTrend.map(item => item.name);
}, const values = supervisionTrend.map(item => item.value);
{ // 更新图表数据
label: "芙蓉分局", proTrend.value.xAxis.data = categories;
value: 90, proTrend.value.series[0].data = values;
unit: "%", });
numerator: 11, };
denominator: 11, // endregion
},
{
label: "岳麓分局",
value: 80,
unit: "%",
numerator: 10,
denominator: 10,
},
{
label: "雨花分局",
value: 70,
unit: "%",
numerator: 9,
denominator: 9,
},
{
label: "望城分局",
value: 60,
unit: "%",
numerator: 4,
denominator: 4,
},
{
label: "浏阳市局",
value: 50,
unit: "%",
numerator: 3,
denominator: 3,
},
{
label: "长沙县局",
value: 40,
unit: "%",
numerator: 3,
denominator: 3,
},*/
]);
const data2 = [
{ // region 问题类型占比
name: "开福分局", const wtlxPieOption = computed(() => {
value: 9700 return {
}, tooltip: {
{ trigger: "item",
name: "芙蓉分局", },
value: 9021 series: [
}, {
{ type: "pie",
name: "岳麓分局", radius: ["40%", "70%"],
value: 8512 label: {
}, color: "#fff",
{ },
name: "雨花分局", data: wtlxList.value,
value: 8021
}, },
{ ],
name: "望城分局", };
value: 7111 });
}, // endregion
// region 地图相关
let superviseTempMapVoList = [
{ {
name: "浏阳市局", "name": "天心分局",
value: 6622 "totalPro": 11,
"changing": 11,
"changed": 11,
"relationOrg": 11,
"changedRate": 11
}
];
echarts.registerMap("changsha", changshaMap);
const option = ref({
geo: {
map: "changsha",
}, },
{ tooltip: {
name: "长沙县局", trigger: 'item',
value: 6221 formatter: function (params) {
console.log(params)
const dataItem = superviseTempMapVoList.find(item => item.name.includes(params.name.substring(0, 2)));
if (dataItem) {
return `
<div class="tooltip">
<div class="tooltip-title">${dataItem.name}</div>
<div class="tooltip-content">
<ul class="tooltip-ul" >
<li>通报问题数 <span>${dataItem.totalPro}</span></li>
<li>整改中 <span>${dataItem.changing}</span></li>
<li>已整改 <span>${dataItem.changed}</span></li>
<li>涉及单位数 <span>${dataItem.relationOrg}</span></li>
<li>整改率 <span>${dataItem.changedRate}</span></li>
</ul>
</div>
</div>`;
} else {
return `<div class="tooltip">
<div class="tooltip-title">${dataItem.name}</div>
<div class="tooltip-content">
<ul class="tooltip-ul"">
<li>通报问题数 <span>0</span></li>
<li>整改中 <span>0</span></li>
<li>已整改 <span>0</span></li>
<li>涉及单位数 <span>0</span></li>
<li>整改率 <span>0</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: {
const option2 = { type: "piecewise",
tooltip: { bottom: 10,
trigger: "item", pieces: [
{gte: 0, lte: 10, label: "问题数低于500"},
{gte: 10, lte: 20, label: "问题数介于500-1000"},
{gte: 30, label: "问题数高于1000"},
],
right: 10,
realtime: false,
orient: "horizontal",
textStyle: {
color: "#fff",
},
calculable: true,
inRange: {
color: ["#4987F6", "#F6A149", "#D34343",],
},
}, },
series: [ series: [
{ {
type: "pie", name: "长沙",
radius: ["40%", "70%"], type: "map",
map: "changsha",
hoverAnimation: true,
label: { label: {
color: "#fff", show: true,
color: "white",
}, },
data: [ itemStyle: {
{value: 18.6, name: "执法办案"}, normal: {
{value: 15.5, name: "训练执勤"}, areaColor: "#02215E",
{value: 1.9, name: "纪律作风"}, borderColor: "#1773c3",
{value: 2.5, name: "专项工作"}, },
{value: 30, name: "整改核查"}, },
{value: 31, name: "其他类型"}, emphasis: {
], areaColor: "#FFD700", // 高亮时区域颜色
}, borderColor: "#FF0000", // 高亮时边框颜色
borderWidth: 4 // 高亮时边框宽度
},
data: []
}
], ],
}; })
// endregion
// region 初始化数据
const activeTabLeft = ref("3");
const overview = ref({
supervisionNotifyTotal: 0,
supervisionNotifyOrgTotal: 0,
supervisionNotifyPreTotal: 0,
supervisionNotifyChangingTotal: 0,
supervisionNotifyChangedTotal: 0,
correctionRate: 0,
});
const rankOverview = ref({
proTotal: 0,
changing: 0,
changed: 0,
correctionRate: 0,
});
// region 初始化数据
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"),
]); ]);
// 地图临时测试数据
function getData() { function getData() {
getAllSupervisionNotifyCount(time.value).then((res) => { getAllSupervisionNotifyCount(time.value).then((res) => {
overview.value = res.overview; overview.value = res.overview;
wtlxList.value = res.wtlxList
hddList.value = res.hddList;
superviseTempMapVoList = res.superviseTempMapVoList;
}); });
getChangedRank(time.value, 3).then((res) => { getChangedRank(time.value, 3).then((res) => {
rankOverview.value = res.rankOverview; rankOverview.value = res.rankOverview;
data1.value = res.changedRankList; data1.value = res.changedRankList;
option2.series[0].data = res.wtlxList;
});
getSupervisionTrend(new Date().getFullYear()).then((res) => {
const supervisionTrend = res.supervisionTrend;
const categories = supervisionTrend.map(item => item.name);
const values = supervisionTrend.map(item => item.value);
// 更新图表数据
proTrend.value.xAxis.data = categories;
proTrend.value.series[0].data = values;
}); });
} }
watch(time, () => { watch(time, () => {
getData(); getData();
}); });
watch(activeTabLeft, () => { watch(activeTabLeft, () => {
alert(activeTabLeft.value) // alert(activeTabLeft.value)
getChangedRank(time.value, activeTabLeft.value).then((res) => { getChangedRank(time.value, activeTabLeft.value).then((res) => {
rankOverview.value = res.rankOverview; rankOverview.value = res.rankOverview;
data1.value = res.changedRankList;
}); });
}); });
onMounted(() => { onMounted(() => {
getData(); getData();
}); });
@ -657,6 +528,37 @@ const colors = [
// endregion // endregion
const data2 = [
{
name: "开福分局",
value: 9700
},
{
name: "芙蓉分局",
value: 9021
},
{
name: "岳麓分局",
value: 8512
},
{
name: "雨花分局",
value: 8021
},
{
name: "望城分局",
value: 7111
},
{
name: "浏阳市局",
value: 6622
},
{
name: "长沙县局",
value: 6221
},
];
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -684,4 +586,103 @@ const colors = [
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
:deep() {
// 弹框整体
.tooltip {
position: relative;
width: 169.88px;
height: 198px;
background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
border: 1px solid #4E8FFF;
margin: -10px -10px -10px -10px;
}
//浏阳市局
.tooltip-title {
width: 169.88px;
height: 43px;
background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
text-align: center; /* 水平居中 */
font-weight: 400;
font-size: 16px;
color: #FFFFFF;
line-height: 22px;
border-bottom: 1px solid #253755; /* 设置下边框 */
}
.tooltip-content {
width: 170px;
height: 155.8px;
//font-size: 11px;
margin-top: -12px;
background: linear-gradient(180deg, #010457 0%, #031577 100%);
}
.tooltip-content ul {
list-style-type: none; /* 移除默认的小圆点 */
padding: 0;
}
.tooltip-content ul li {
margin-left: 5px;
height: 25px;
color: #597AE9;
font-size: 13px;
}
// 数字的span
.tooltip-ul span {
float: right;
width: 50px;
text-align: right;
margin-right: 35px;
color: #fff;
font-size: 13px;
}
/* 小尖角 */
.tooltip::before {
content: '';
position: absolute;
top: 90px; /* 调整尖角的垂直位置 */
left: -10px; /* 调整尖角的水平位置 */
width: 0;
height: 0;
//border-top: 10px solid red; /* 顶边颜色 */
//border-bottom: 10px solid green; /* 底边颜色 */
//border-right: 10px solid blue; /* 右边颜色，与背景颜色相同 */
}
}
.test {
width: 95px;
height: 25px;
background: #1C3472;
}
.gobal-dropdown-container {
position: absolute;
right: 20px;
top: 15px;
}
.my-gobal-yearselect {
font-size: 14px;
padding-top: 6px;
padding-left: 20px;
width: 90px;
color: #fff;
}
</style> </style>
Write Preview
Loading…
Cancel
Save