Browse Source

新增维权抚慰大屏:抚慰相关

main
sjh 1 year ago
parent
commit
9f71d368b5
  1. 6
      src/api/datav.ts
  2. 2
      src/components/datav/statistic.vue
  3. 59
      src/views/datav/RightsComfort.vue

6
src/api/datav.ts

@ -5,3 +5,9 @@ export function getCaseVerifData(times) {
url: `/datav/caseVerif?beginTime=${times[0]}&endTime=${times[1]}` url: `/datav/caseVerif?beginTime=${times[0]}&endTime=${times[1]}`
}); });
} }
export function getRightsComfortData(times) {
return request.get({
url: `/datav/rightsComfort?beginTime=${times[0]}&endTime=${times[1]}`
});
}

2
src/components/datav/statistic.vue

@ -1,7 +1,7 @@
<template> <template>
<div class="statistic"> <div class="statistic">
<div class="statistic-number"> <div class="statistic-number">
{{ parseInt(outputValue) }}{{ valueUnit }} {{ (outputValue) }}{{ valueUnit }}
</div> </div>
<div class="statistic-title">{{ title }}</div> <div class="statistic-title">{{ title }}</div>
</div> </div>

59
src/views/datav/RightsComfort.vue

@ -34,10 +34,7 @@
</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="136" :value="136"
@ -50,17 +47,17 @@
style="width: 20%" style="width: 20%"
/> />
<datav-statistic <datav-statistic
:value="89" :value="comfortPersonNumber"
title="抚慰人数" title="抚慰人数"
style="width: 20%" style="width: 20%"
/> />
<datav-statistic <datav-statistic
:value="167" :value="hitPersonNumber"
title="打击处理人数" title="打击处理人数"
style="width: 20%" style="width: 20%"
/> />
<datav-statistic <datav-statistic
:value="21.5" :value="comfortMoney"
title="&nbsp;&nbsp;&nbsp;&nbsp;抚慰金额(万元)" title="&nbsp;&nbsp;&nbsp;&nbsp;抚慰金额(万元)"
style="width: 20%" style="width: 20%"
/> />
@ -129,8 +126,36 @@
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 {getRightsComfortData} from "@/api/datav";
import moment from "moment";
echarts.registerMap("changsha", changshaMap); echarts.registerMap("changsha", changshaMap);
const time = ref([
moment().startOf("year").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"),
]);
const comfortPersonNumber = ref(0);
const hitPersonNumber = ref(0);
const comfortMoney = ref(0.0);
const punishmentSituationList = ref([]);
const comfortSituationList = ref([]);
function getData() {
getRightsComfortData(time.value).then((data) => {
console.log('Received data:', data); //
comfortPersonNumber.value = data.comfortPersonNumber;
hitPersonNumber.value = data.hitPersonNumber;
comfortMoney.value = data.comfortMoney;
punishmentSituationList.value = data.punishmentSituation;
comfortSituationList.value = data.comfortSituation;
});
}
watch(time, () => {
getData();
})
onMounted(() => {
getData();
});
const option = { const option = {
geo: { geo: {
// registerMap'' // registerMap''
@ -317,7 +342,8 @@ const option2 = {
], ],
}; };
const option3 = { const option3 = computed(() => {
return {
series: [ series: [
{ {
type: "pie", type: "pie",
@ -325,16 +351,14 @@ const option3 = {
label: { label: {
color: "#fff", color: "#fff",
}, },
data: [ data: punishmentSituationList.value,
{ value: 311, name: "刑事追究" },
{ value: 735, name: "其他处理" },
{ value: 580, name: "行政处理" }
],
}, },
], ],
}; };
});
const option4 = { const option4 = computed(() => {
return {
series: [ series: [
{ {
type: "pie", type: "pie",
@ -342,14 +366,11 @@ const option4 = {
label: { label: {
color: "#fff", color: "#fff",
}, },
data: [ data: comfortSituationList.value,
{ value: 211, name: "民警" },
{ value: 655, name: "辅警" },
{ value: 666, name: "协警" }
],
}, },
], ],
}; };
});
const option6 = { const option6 = {
series: [ series: [

Loading…
Cancel
Save