Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
df708db4 by yangwei
Options

统计监控功能开发

1 parent 44f7ea61
Inline Side-by-side
Showing 5 changed files with 611 additions and 146 deletions
import request from '@/utils/request'
import SERVER from './config'
class business {
/*
成功率统计
startDate:开始日期
endDate:结束日期
*/
async getSuucessRate(startDate,endDate) {
return request({
url: SERVER.SERVERAPI + '/rest/statistics/Business/sf',
method: 'get',
params: {
startDate:startDate,
endDate:endDate
}
})
}
}
export default new business()
\ No newline at end of file
import request from "@/utils/request";
import SERVER from "./config";
class efficient {
/*
获取对应的业务量总数
startDate:开始日期
endDate:结束日期
*/
async getProcessCounts(startDate, endDate) {
return request({
url: SERVER.SERVERAPI + "/rest/statistics/Efficient/getProcessCounts",
method: "post",
params: {
startDate: startDate,
endDate: endDate,
},
});
}
/*
获取各区县业务对应的天数
recType:业务代码
startDate:开始日期
endDate:结束日期
*/
async getProcessDays(recType, startDate, endDate) {
return request({
url: SERVER.SERVERAPI + "/rest/statistics/Efficient/getProcessDays",
method: "post",
params: {
recType: recType,
startDate: startDate,
endDate: endDate,
},
});
}
}
export default new efficient();
......@@ -11,30 +11,37 @@
>
<el-row class="rows">
<el-col :span="8">
<el-date-picker
v-model="valueTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
<el-form-item label="开始日期">
<el-date-picker
v-model="valueTime"
value-format="yyyy/MM/dd HH:mm:ss"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
</el-col>
<!-- 操作按钮 -->
<el-col :span="3" class="btnColRight">
<btn nativeType="cz" @click="resetForm">重置</btn>
<btn nativeType="cx" @click="getProcessCounts">查询</btn>
</el-col>
<!-- 操作按钮 -->
<el-col :span="3" class="btnColRight">
<btn nativeType="cz" @click="resetForm">重置</btn>
<btn nativeType="cx">查询</btn>
</el-col>
</el-row>
</el-form>
<!-- 表格 -->
<div class="form-clues-content echarts-box">
<div class="form-clues-content echarts-box" v-if="pieChartsData.length">
<div id="myChart" class="chart"></div>
<div id="myChart-bar" class="chart-bar"></div>
</div>
<div class="form-clues-content echarts-box center" v-else>暂无数据</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import efficient from "@/api/efficient";
import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
export default {
name: "jktj",
data() {
......@@ -56,73 +63,160 @@ export default {
},
},
// 搜索表单
valueTime: "",
form: {
startTime: "",
endTime: "",
},
valueTime: [getFirstDayOfSeason(), timeFormat(new Date(),true)],
// valueTime: ["2022/01/01 00:00:00", timeFormat(new Date())],
pieChartsData: [],
};
},
mounted() {
// 初始化图表
this.echartInit();
created() {
this.getProcessCounts();
},
mounted() {},
computed: {
...mapGetters(["dicData"]),
},
methods: {
//查询各区县办件数量
async getProcessCounts() {
this.pieChartsData = [];
let { result: res } = await efficient.getProcessCounts(
this.valueTime[0],
this.valueTime[1]
);
//获取图表配置项需要的数据
res.length > 0 &&
res.forEach((item) => {
this.pieChartsData.push({
//登记数量
value: item.counts,
//登记数量
name: item.recTypeName,
//登记类型代码
groupId: item.recType,
});
});
// 初始化图表
this.echartInit();
this.barChartInit(res[0].recType);
},
// 重置
resetForm() {
this.form = {
startTime: "",
endTime: "",
};
this.valueTime = [getFirstDayOfSeason(), timeFormat(new Date(),true)];
this.getProcessCounts();
},
//玫瑰图初始化
echartInit() {
let _this = this;
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
title: {
show: true,
text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
legend: {
bottom: "6%",
left: "center",
textStyle: {
fontSize: 20,
lineHeight: 30,
height: 60,
color: "#b6b5b5",
color: "#fff",
},
},
legend: {
data: [
"接入成功数量",
"接入失败数量",
"上报成功数量",
"上报失败数量",
],
top: 80,
textStyle: {
fontSize: 20,
lineHeight: 30,
height: 60,
color: "#777",
},
tooltip: {
trigger: "item",
formatter: "{b} : {c}",
},
series: [
{
name: "各业务类型办理数量",
type: "pie",
radius: [0, 250],
center: ["50%", "30%"],
roseType: "area",
itemStyle: {
borderRadius: 8,
},
label: {
show: false,
},
data: this.pieChartsData,
},
],
});
//添加点击事件
myChart.on("click", function (param) {
_this.barChartInit(param.data.groupId);
});
//默认选中第一个
let index = 1;
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 0,
});
myChart.on("mouseover", function (e) {
if (e.dataIndex != index) {
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: index,
});
}
});
myChart.on("mouseout", function (e) {
index = e.dataIndex;
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
});
},
//柱图初始化
async barChartInit(recType) {
//请求recType对应业务的各区县数据
let { result: res } = await efficient.getProcessDays(
recType,
this.valueTime[0],
this.valueTime[1]
);
let xzqArr = [];
//行政区代码过滤
res.length > 0 &&
res.forEach((item) => {
xzqArr.push(
this.dicData["A20"].filter((i) => {
return i.DCODE == item.qxdm;
})[0].DNAME
);
});
let myChartBar = this.$echarts.init(
document.getElementById("myChart-bar")
);
myChartBar.setOption({
color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
tooltip: {
show: true,
trigger: "axis",
textStyle: {
fontSize: 20 // 字体大小
},
extraCssText: 'width:220px;height:160px;' // 背景色
textStyle: {
fontSize: 16, // 字体大小
},
extraCssText: "width:220px;height:160px;", // 背景色
},
grid: {
top: 120,
},
legend: {
data: ["最短用时", "平均用时", "最长用时"],
top: 20,
textStyle: {
show: true,
color: "#fff",
fontSize: "16",
},
},
xAxis: [
{
type: "category",
data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
data: xzqArr,
axisLabel: {
interval: 0,
textStyle: {
show: true,
color: "#fff",
......@@ -134,35 +228,35 @@ export default {
yAxis: [
{
type: "value",
name: "单位：天",
nameTextStyle: {
color: "#fff",
fontSize: "16",
},
axisLabel: {
textStyle: {
show: true,
color: "#fff",
fontSize: "20",
fontSize: "16",
},
},
},
],
series: [
{
name: "接入成功数量",
type: "bar",
data: [1000, 1500, 2000, 500, 4000],
},
{
name: "接入失败数量",
type: "bar",
data: [900, 500, 3200, 800, 4500],
name: "最短用时",
data: res.map((item) => item.minDay),
},
{
name: "上报成功数量",
type: "bar",
data: [1000, 1500, 2000, 500, 4000],
name: "平均用时",
data: res.map((item) => item.avgDay),
},
{
name: "上报失败数量",
type: "bar",
data: [900, 500, 3200, 800, 4500],
name: "最长用时",
data: res.map((item) => item.maxDay),
},
],
});
......@@ -177,24 +271,30 @@ export default {
height: 100%;
display: flex;
flex-direction: column;
.rows {
.rows {
margin-left: 100px;
}
.center {
line-height: 50vh;
text-align: center;
}
.echarts-box {
display: flex;
justify-content: center;
height: 500px;
.chart {
width: 100%;
width: 40%;
height: 100%;
float: left;
}
.chart-bar {
width: 60%;
}
}
.form-clues-content {
flex: 1;
height: 100%;
color: #b6b5b5
color: #b6b5b5;
}
}
</style>
......
<template>
<!-- 监控日志 -->
<div class="jktjDetail form-clues">
<!-- 头部搜索 -->
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="100px">
<el-row>
<el-col :span="6">
<el-form-item label="行政区">
<el-select
v-model="form.XZQDM"
class="width100"
clearable
placeholder="行政区"
>
<el-option
v-for="item in dicData['A20']"
:key="item.DCODE"
:label="item.DNAME"
:value="item.DCODE"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="开始日期">
<el-date-picker
v-model="valueTime"
value-format="yyyy/MM/dd HH:mm:ss"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
</el-col>
<!-- 操作按钮 -->
<el-col :span="3" class="btnColRight">
<btn nativeType="cz" @click="resetForm">重置</btn>
<btn nativeType="cx" @click="getSuucessRate">查询</btn>
</el-col>
</el-row>
</el-form>
</div>
<!-- 图表 -->
<div class="form-clues-content echarts-box" v-if="chartData.length">
<div id="myChart" class="chart"></div>
</div>
<div class="form-clues-content echarts-box center" v-else>暂无数据</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
import business from "@/api/business";
export default {
name: "jktj",
data() {
return {
// 开始结束日期限制
pickerOptionsStart: {
disabledDate: (time) => {
if (this.form.endTime) {
return time.getTime() >= new Date(this.form.endTime).getTime();
}
},
},
// 结束日期限制
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.form.startTime) {
return time.getTime() <= new Date(this.form.startTime).getTime();
}
},
},
// 搜索表单
valueTime: [getFirstDayOfSeason(), timeFormat(new Date(),true)],
recTypeArr: [],
chartData: [],
form: {
startTime: "",
endTime: "",
qxdm: "",
},
};
},
mounted() {
// 查询成功率
this.getSuucessRate();
},
computed: {
...mapGetters(["dicData"]),
},
methods: {
async getSuucessRate() {
this.recTypeArr = [];
this.chartData = [];
let { result: res } = await business.getSuucessRate(
this.valueTime[0],
this.valueTime[1]
);
this.chartData = res;
//行政区代码过滤
res.length > 0 &&
res.forEach((item) => {
this.recTypeArr.push(item.recTypeName);
});
this.echartInit();
},
// 重置
resetForm() {
this.form = {
startTime: "",
endTime: "",
};
this.valueTime = [getFirstDayOfSeason(), timeFormat(new Date(),true)];
this.getSuucessRate();
},
echartInit() {
let _this = this;
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
color: ["#fff", "#ff6e6e", "#3f99ff", "#ffaf48"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#fff",
},
},
},
legend: {
data: ["成功", "失败", "成功率"],
textStyle: {
show: true,
color: "#fff",
fontSize: "16",
},
},
xAxis: [
{
type: "category",
data: _this.recTypeArr,
axisPointer: {
type: "shadow",
},
axisLabel: {
textStyle: {
show: true,
color: "#fff",
fontSize: "16",
},
formatter: function (val) {
let c = document.createElement("canvas");
const ctx = c.getContext("2d");
const arr = val.split("");
arr
.map((item) => ctx.measureText(item).width)
.reduce((pre, next, index) => {
const nLen = pre + next;
if (nLen > 40) {
arr[index - 1] += "...";
return next;
} else {
return nLen;
}
});
c = null;
let ind = arr.findIndex((i) => {
return i.indexOf("...") > -1;
});
let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr;
return newArr.join("");
},
},
},
],
yAxis: [
{
type: "value",
name: "数量/个",
nameTextStyle: {
color: "#fff",
fontSize: "16",
},
interval: 50,
axisLabel: {
formatter: "{value}",
textStyle: {
show: true,
color: "#fff",
fontSize: "16",
},
},
},
{
type: "value",
name: "成功率/%",
nameTextStyle: {
color: "#fff",
fontSize: "16",
},
interval: 5,
axisLabel: {
formatter: "{value} %",
textStyle: {
show: true,
color: "#fff",
fontSize: "16",
},
},
},
],
series: [
{
name: "成功",
type: "bar",
tooltip: {
valueFormatter: function (value) {
return value + " ml";
},
},
data: this.chartData.map((item) => {
return item.success;
}),
},
{
name: "失败",
type: "bar",
tooltip: {
valueFormatter: function (value) {
return value + " ml";
},
},
data: this.chartData.map((item) => {
return item.failure;
}),
},
{
name: "成功率",
type: "line",
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + "%";
},
},
data: this.chartData.map((item) => {
return item.rate;
}),
},
],
});
},
},
};
</script>
<style scoped lang="scss">
@import "~@/styles/public.scss";
.jktjDetail {
height: 100%;
display: flex;
flex-direction: column;
.rows {
margin-left: 100px;
}
.center {
line-height: 50vh;
text-align: center;
color:#b6b5b5
}
.echarts-box {
display: flex;
justify-content: center;
height: 500px;
.chart {
width: 100%;
height: 100%;
}
}
.form-clues-content {
flex: 1;
height: 100%;
}
}
</style>
<style scoped lang="scss">
@import "~@/styles/public.scss";
</style>
......@@ -2,32 +2,48 @@
<!-- 监控日志 -->
<div class="jktjDetail form-clues">
<!-- 头部搜索 -->
<el-form
ref="form"
:model="form"
:inline="true"
class="from-clues-header"
label-width="100px"
>
<el-row class="rows">
<el-col :span="8">
<el-date-picker
v-model="valueTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-col>
<!-- 操作按钮 -->
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="100px">
<el-row>
<el-col :span="6">
<el-form-item label="行政区">
<el-select
v-model="form.XZQDM"
class="width100"
clearable
placeholder="行政区"
>
<el-option
v-for="item in dicData['A20']"
:key="item.DCODE"
:label="item.DNAME"
:value="item.DCODE"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="开始日期">
<el-date-picker
v-model="valueTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
</el-col>
<!-- 操作按钮 -->
<el-col :span="3" class="btnColRight">
<btn nativeType="cz" @click="resetForm">重置</btn>
<btn nativeType="cx">查询</btn>
</el-col>
</el-row>
</el-form>
<!-- 表格 -->
</el-row>
</el-form>
</div>
<!-- 图表 -->
<div class="form-clues-content echarts-box">
<div id="myChart" class="chart"></div>
</div>
......@@ -35,6 +51,7 @@
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "jktj",
data() {
......@@ -60,6 +77,7 @@ export default {
form: {
startTime: "",
endTime: "",
XZQDM: "",
},
};
},
......@@ -67,6 +85,9 @@ export default {
// 初始化图表
this.echartInit();
},
computed: {
...mapGetters(["dicData"]),
},
methods: {
// 重置
resetForm() {
......@@ -81,39 +102,13 @@ export default {
// 绘制图表
myChart.setOption({
color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
title: {
show: true,
text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
left: "center",
textStyle: {
fontSize: 20,
lineHeight: 30,
height: 60,
color: "#b6b5b5",
},
},
legend: {
data: [
"接入成功数量",
"接入失败数量",
"上报成功数量",
"上报失败数量",
],
top: 80,
textStyle: {
fontSize: 20,
lineHeight: 30,
height: 60,
color: "#777",
},
},
tooltip: {
show: true,
trigger: "axis",
textStyle: {
fontSize: 20 // 字体大小
},
extraCssText: 'width:220px;height:160px;' // 背景色
textStyle: {
fontSize: 16, // 字体大小
},
extraCssText: "width:220px;height:160px;", // 背景色
},
grid: {
top: 120,
......@@ -121,8 +116,38 @@ export default {
xAxis: [
{
type: "category",
data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
data: [
"土地所有权",
"建设用地、宅基地使用权",
"构（建）筑物所有权",
"林权",
"注销登记",
"抵押权登记",
],
axisLabel: {
interval: 0,
formatter: function (val) {
let c = document.createElement("canvas");
const ctx = c.getContext("2d");
const arr = val.split("");
arr
.map((item) => ctx.measureText(item).width)
.reduce((pre, next, index) => {
const nLen = pre + next;
if (nLen > 60) {
arr[index - 1] += "...";
return next;
} else {
return nLen;
}
});
c = null;
let ind = arr.findIndex((i) => {
return i.indexOf("...") > -1;
});
let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr;
return newArr.join("");
},
textStyle: {
show: true,
color: "#fff",
......@@ -134,35 +159,24 @@ export default {
yAxis: [
{
type: "value",
name: "数量/个",
nameTextStyle: {
color: "#fff",
fontSize: "16",
},
axisLabel: {
textStyle: {
show: true,
color: "#fff",
fontSize: "20",
fontSize: "16",
},
},
},
],
series: [
{
name: "接入成功数量",
type: "bar",
data: [1000, 1500, 2000, 500, 4000],
},
{
name: "接入失败数量",
type: "bar",
data: [900, 500, 3200, 800, 4500],
},
{
name: "上报成功数量",
type: "bar",
data: [1000, 1500, 2000, 500, 4000],
},
{
name: "上报失败数量",
data: [200, 120, 150, 80, 70, 30],
type: "bar",
data: [900, 500, 3200, 800, 4500],
},
],
});
......@@ -172,25 +186,22 @@ export default {
</script>
<style scoped lang="scss">
@import "~@/styles/public.scss";
.jktjDetail {
height: 100%;
display: flex;
flex-direction: column;
.rows {
.rows {
margin-left: 100px;
}
.echarts-box {
display: flex;
justify-content: center;
height: 500px;
.chart {
width: 100%;
height: 100%;
}
}
.form-clues-content {
flex: 1;
height: 100%;
......