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

信访大屏前端1.2

main
不爱学习的石同学 1 year ago
parent
b4e097a02d
commit
6cad3a3d6f
7 changed files with 22420 additions and 94 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. 2
      package.json
  2. 18
      src/api/datav.ts
  3. 22097
      src/assets/data/changsha.json
  4. 155
      src/components/datav/chart-bar-mail.vue
  5. 3
      src/components/datav/chart-bar.vue
  6. 1
      src/components/datav/date-picker.vue
  7. 198
      src/views/datav/MailVisits.vue

2
package.json
Unescape View File

@ -40,10 +40,12 @@
"lodash": "^4.17.21", "lodash": "^4.17.21",
"moment": "^2.30.1", "moment": "^2.30.1",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"perfect-scrollbar": "^1.5.6",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"typescript": "^5.3.3", "typescript": "^5.3.3",
"vue": "^3.3.11", "vue": "^3.3.11",
"vue-echarts": "^6.6.8", "vue-echarts": "^6.6.8",
"vue-perfect-scrollbar": "^0.2.1",
"vue-router": "^4.2.5" "vue-router": "^4.2.5"
}, },
"devDependencies": { "devDependencies": {

18
src/api/datav.ts
Unescape View File

@ -12,10 +12,24 @@ export function getMailVisitsData(times) {
}); });
} }
export function getRightsComfortData(times) { export function getRightsComfortData(times) {
return request.get({ return request.get({
url: `/datav/rightsComfort?beginTime=${times[0]}&endTime=${times[1]}` url: `/datav/rightsComfort?beginTime=${times[0]}&endTime=${times[1]}`
}); });
} }
export function getRecentlyMailTrend(query) {
// alert(days + activeMailTrend.value)
return request.get({
url: `/datav/mailVisits/getRecentlyMailTrend`,
query
});
/* return request.post({
url: '/datav/mailVisits/getRecentlyMailTrend',
body
});*/
}

22097
src/assets/data/changsha.json
View File

File diff suppressed because one or more lines are too long

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

@ -0,0 +1,155 @@
<template>
<div class="flex between v-center mb-10">
<span class="bar-title">{{ title }}</span>
<span class="bar-sub-title">{{ subTitle }}</span>
</div>
<el-scrollbar height="300px">
<div>
<div
class="flex v-center bar-item between"
v-for="item in data"
:size="size"
>
<span class="bar-item-name 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 ),
}"
></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>
</el-scrollbar>
</template>
<script setup>
import {onMounted} 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: "",
},
});
const isMouseOver = ref(false);
const handleMouseEnter = () => {
isMouseOver.value = true;
};
const handleMouseLeave = () => {
isMouseOver.value = false;
};
const max = ref(100);
watch(
() => props.data,
(arr) => {
getMax()
}
);
function getMax() {
if (props.unit !== "%") {
max.value = Math.max(...props.data.map((item) => item.value));
}
}
onMounted(() => {
getMax()
})
function getColor(val) {
if (val > 0.8) {
return "linear-gradient( 270deg, #FB002D 0%, #822232 100%)";
}
if (val >= 0.6) {
return "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)";
}
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;
height: 32px;
&[size="large"] {
height: 42px;
.bar-item_content {
.bar-item_content-bar {
height: 13px;
}
}
}
.bar-item-name {
width: 19%;
text-align: right;
}
.bar-item_content {
width: 55%;
.bar-item_content-bar {
width: 0;
height: 9px;
background: linear-gradient(270deg, #63e700 0%, #19674c 100%);
box-shadow: 1px 0 0px 0px #020b5f;
transition: width 0.3s;
}
}
.bar-item_remark {
font-size: 14px;
.text-success {
color: #09c700;
}
}
}
</style>

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

@ -6,7 +6,7 @@
<div> <div>
<div <div
class="flex v-center bar-item between" class="flex v-center bar-item between"
v-for="item in data.sort((a, b) => b.value - a.value)" v-for="item in data"
:size="size" :size="size"
> >
<span class="bar-item-name mr-10">{{ item.label }}</span> <span class="bar-item-name mr-10">{{ item.label }}</span>
@ -130,6 +130,7 @@ function getColor(val) {
width: 0; width: 0;
height: 9px; height: 9px;
background: linear-gradient(270deg, #63e700 0%, #19674c 100%); background: linear-gradient(270deg, #63e700 0%, #19674c 100%);
box-shadow: 1px 0 0px 0px #020b5f;
transition: width 0.3s; transition: width 0.3s;
} }
} }

1
src/components/datav/date-picker.vue
Unescape View File

@ -12,7 +12,6 @@
:clearable="false" :clearable="false"
@change="handleChange" @change="handleChange"
style="--el-input-bg-color: transparent; box-shadow: none; --el-text-color-regular: #fff; --el-text-color-primary: #fff" style="--el-input-bg-color: transparent; box-shadow: none; --el-text-color-regular: #fff; --el-text-color-primary: #fff"
/> />
</div> </div>
</template> </template>

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

@ -38,7 +38,6 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<datav-card> <datav-card>
<datav-tabs v-model="activeTab"> <datav-tabs v-model="activeTab">
<datav-tab-item label="分县市局" name="1"> <datav-tab-item label="分县市局" name="1">
@ -47,61 +46,65 @@
type="bottom-button" type="bottom-button"
> >
<datav-tab-item label="初信初访" name="1"> <datav-tab-item label="初信初访" name="1">
<datav-chart-bar <datav-chart-bar-mail
:data="fxsjFirstMailList" :data="fxsjFirstMailList"
size="large" size="large"
:max="11"
/> />
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="重复信访" name="2"> <datav-tab-item label="重复信访" name="2">
<datav-chart-bar <datav-chart-bar-mail
:data="fxsjRepeatMailList" :data="fxsjRepeatMailList"
:max="11" :max="11"
size="large" size="large"
/> />
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="领导接访" name="3"> <datav-tab-item label="领导接访" name="3">
<datav-chart-bar <datav-chart-bar-mail
:data="fxsjLeaderViewMailList" :data="fxsjLeaderViewMailList"
:max="11" :max="11"
size="large" size="large"
/> />
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="部委支队" name="2"> <datav-tab-item label="部委支队" name="2">
<datav-tabs <datav-tabs
v-model="activeTab" v-model="bwzdActiveTab"
type="bottom-button" type="bottom-button"
> >
<datav-tab-item label="初信初访" name="1"> <datav-tab-item label="初信初访" name="1">
<div style="height: 300px; overflow: auto">
<datav-chart-bar <datav-chart-bar
:data="bwzdFirstMailList" :data="bwzdFirstMailList"
size="large" size="large"
/> />
</div>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="重复信访" name="2"> <datav-tab-item label="重复信访" name="2">
<div style="height: 300px; overflow: auto">
<datav-chart-bar <datav-chart-bar
:data="bwzdRepeatMailList" :data="bwzdRepeatMailList"
:max="11" :max="11"
size="large" size="large"
/> />
</div>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="领导接访" name="3"> <datav-tab-item label="领导接访" name="3">
<div style="height: 300px; overflow: auto">
<datav-chart-bar <datav-chart-bar
:data="bwzdLeaderViewMailList" :data="bwzdLeaderViewMailList"
:max="11" :max="11"
size="large" size="large"
/> />
</div>
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>
</datav-card> </datav-card>
</datav-card> </datav-card>
<datav-card title="信访问题类型"> <datav-card title="信访问题类型">
@ -112,10 +115,10 @@
/> />
</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> <datav-date-picker v-model="time"/>
<span>2024年01月01日 - 2024年08月30日</span>
</div> </div>
<div class="flex gap-42"> <div class="flex gap-42">
<datav-statistic <datav-statistic
@ -144,19 +147,59 @@
style="width: 20%" style="width: 20%"
/> />
</div> </div>
<v-charts <v-charts
style="height: 450px" style="height: 450px"
:option="option" :option="option"
autoresize autoresize
/> />
<datav-card title="信访趋势"> <datav-card title="信访趋势">
<datav-tabs v-model="activeMailTrend">
<datav-tab-item label="国家信访" name="1">
<v-charts <v-charts
style="height: 300px" style="height: 300px"
:option="option1" :option="option1"
autoresize autoresize
/> />
</datav-tab-item>
<datav-tab-item label="公安部信访" name="2">
<v-charts
style="height: 300px"
:option="option1"
autoresize
/>
</datav-tab-item>
<datav-tab-item label="局长信箱" name="3">
<v-charts
style="height: 300px"
:option="option1"
autoresize
/>
</datav-tab-item>
<datav-tab-item label="12337信访" name="4">
<v-charts
style="height: 300px"
:option="option1"
autoresize
/>
</datav-tab-item>
</datav-tabs>
<div class="dropdown-container">
<el-dropdown @command="handleCommand" placement="top-start">
<span class="el-dropdown-link">{{ selectedOption }}</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="15">近15天</el-dropdown-item>
<el-dropdown-item command="30">近30天</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 title="缠访集访情况"> <datav-card title="缠访集访情况">
<el-row class="mb-32"> <el-row class="mb-32">
@ -191,12 +234,6 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<!-- <datav-chart-bar-->
<!-- sub-title="数量"-->
<!-- :data="data3"-->
<!-- :max="7"-->
<!-- />-->
<datav-card> <datav-card>
<datav-tabs v-model="activeTabRight"> <datav-tabs v-model="activeTabRight">
<datav-tab-item label="分县市局" name="1"> <datav-tab-item label="分县市局" name="1">
@ -205,28 +242,27 @@
type="bottom-button" type="bottom-button"
> >
<datav-tab-item label="领导督办" name="1"> <datav-tab-item label="领导督办" name="1">
<datav-chart-bar <datav-chart-bar-mail
:data="fxsjFirstMailList" :data="xx"
size="large" size="large"
/> />
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="缠访闹访" name="2"> <datav-tab-item label="缠访闹访" name="2">
<datav-chart-bar <datav-chart-bar-mail
:data="fxsjEntanglementMailList" :data="xx"
:max="11" :max="11"
size="large" size="large"
/> />
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="群体集访" name="3"> <datav-tab-item label="群体集访" name="3">
<datav-chart-bar <datav-chart-bar-mail
:data="fxsjMassMailList" :data="xx"
:max="11" :max="11"
size="large" size="large"
/> />
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="部委支队" name="2"> <datav-tab-item label="部委支队" name="2">
<datav-tabs <datav-tabs
@ -234,28 +270,27 @@
type="bottom-button" type="bottom-button"
> >
<datav-tab-item label="领导督办" name="1"> <datav-tab-item label="领导督办" name="1">
<datav-chart-bar <datav-chart-bar-mail
:data="fxsjFirstMailList" :data="xx"
size="large" size="large"
/> />
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="缠访闹访" name="2"> <datav-tab-item label="缠访闹访" name="2">
<datav-chart-bar <datav-chart-bar-mail
:data="bwzdEntanglementMailList" :data="xx"
:max="11" :max="11"
size="large" size="large"
/> />
</datav-tab-item> </datav-tab-item>
<datav-tab-item label="群体集访" name="3"> <datav-tab-item label="群体集访" name="3">
<datav-chart-bar <datav-chart-bar-mail
:data="bwzdMassMailList" :data="xx"
:max="11" :max="11"
size="large" size="large"
/> />
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>
</datav-tab-item> </datav-tab-item>
</datav-tabs> </datav-tabs>
</datav-card> </datav-card>
@ -268,6 +303,7 @@
/> />
</datav-card> </datav-card>
</el-col> </el-col>
</el-row> </el-row>
</main> </main>
</div> </div>
@ -279,7 +315,7 @@
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} from "@/api/datav"; import {getMailVisitsData, getRecentlyMailTrend} from "@/api/datav";
import moment from "moment/moment.js"; import moment from "moment/moment.js";
echarts.registerMap("changsha", changshaMap); echarts.registerMap("changsha", changshaMap);
@ -327,26 +363,12 @@ const option = {
}, },
], ],
}; };
const option1 = ref({ const option1 = ref({
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",
@ -380,13 +402,11 @@ const option1 = ref({
}, },
]), ]),
}, },
data: [ data: [],
521, 321, 561, 312, 411, 123, 121, 312, 312, 311,
111, 121, 211, 321,
],
}, },
], ],
}); });
const option2 = { const option2 = {
series: [ series: [
{ {
@ -396,12 +416,12 @@ const option2 = {
color: "#fff", color: "#fff",
}, },
data: [ data: [
{value: 311, name: "慢作为"}, // {value: 311, name: "慢作为"},
{value: 735, name: "意见建议"}, // {value: 735, name: "意见建议"},
{value: 580, name: "违法违纪违规"}, // {value: 580, name: "违法违纪违规"},
{value: 484, name: "乱作为"}, // {value: 484, name: "乱作为"},
{value: 300, name: "其他"}, // {value: 300, name: "其他"},
{value: 300, name: "不作为"}, // {value: 300, name: "不作为"},
], ],
}, },
], ],
@ -415,19 +435,19 @@ const option3 = {
color: "#fff", color: "#fff",
}, },
data: [ data: [
{value: 21, name: "其他"}, // {value: 21, name: "其他"},
{value: 33, name: "通报批评"}, // {value: 33, name: "通报批评"},
{value: 56, name: "责令检查"}, // {value: 56, name: "责令检查"},
{value: 31, name: "考核降级"}, // {value: 31, name: "考核降级"},
{value: 120, name: "组织处理"}, // {value: 120, name: "组织处理"},
{value: 32, name: "党纪处分"}, // {value: 32, name: "党纪处分"},
], ],
}, },
], ],
}; };
const activeTab = ref("1"); const activeTab = ref("1");
const bwzdActiveTab = ref("1"); // 部委支队初重信tab
const activeMailTrend = ref("1"); // 信访趋势tab
const activeMailTab = ref("1"); const activeMailTab = ref("1");
const activeTabRight = ref("1"); const activeTabRight = ref("1");
const activeMailTabRight = ref("1"); const activeMailTabRight = ref("1");
@ -445,7 +465,6 @@ const overview = ref({
tangleMail: 0, tangleMail: 0,
massMail: 0, massMail: 0,
}); });
// 分局初重领信 // 分局初重领信
const fxsjFirstMailList = ref([]); const fxsjFirstMailList = ref([]);
const fxsjRepeatMailList = ref([]); const fxsjRepeatMailList = ref([]);
@ -457,15 +476,30 @@ const bwzdLeaderViewMailList = ref([]);
// 分局缠闹 // 分局缠闹
const fxsjEntanglementMailList = ref([]); const fxsjEntanglementMailList = ref([]);
const fxsjMassMailList = ref([]); const fxsjMassMailList = ref([]);
// 部委缠闹 // 部委缠闹
const bwzdEntanglementMailList = ref([]); const bwzdEntanglementMailList = ref([]);
const bwzdMassMailList = ref([]); const bwzdMassMailList = ref([]);
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 selectedOption = ref('近15天'); // 下拉框选择
const handleCommand = async (command) => {
selectedOption.value = `近${command}天`;
const recentlyMailTrend = await getRecentlyMailTrend({
sourcesCode: activeMailTab.value,
days: command,
startTime: time.value[0],
endTime: time.value[1]
}); // 获取最近信访趋势
// 更新图表的 xAxis 和 series 数据
option1.value.xAxis.data = recentlyMailTrend.dayList;
option1.value.series[0].data = recentlyMailTrend.totalList;
};
let timer;
function getData() { function getData() {
getMailVisitsData(time.value).then((data) => { getMailVisitsData(time.value).then((data) => {
overview.value = data.overview; overview.value = data.overview;
@ -482,16 +516,42 @@ function getData() {
}); });
} }
function initRecentlyMailTrend() {
getRecentlyMailTrend({
sourcesCode: "1",
days: "15",
startTime: time.value[0],
endTime: time.value[1]
}).then((data) => {
// 更新图表的 xAxis 和 series 数据
option1.value.xAxis.data = data.dayList;
option1.value.series[0].data = data.totalList;
});
}
watch(time, () => { watch(time, () => {
getData(); getData();
}) })
onMounted(() => { onMounted(() => {
getData(); getData();
initRecentlyMailTrend();
// timer = setInterval(() => {
// activeMailTab.value = (parseInt(activeMailTab.value) % 3 + 1).toString();
// console.log("Active Tab: ", activeMailTab.value);
// }, 3000); // 每3秒切换一次
}); });
// 在组件卸载前清除定时器
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/style/datav.scss"; @import "@/style/datav.scss";
.dropdown-container {
position: absolute;
right: 30px;
top: 65px;
}
</style> </style>
Write Preview
Loading…
Cancel
Save