Skip to content

bdc / bdcsjsb-web

Go to a project
Toggle navigation
Toggle navigation pinning
a72d18e9 by renchao@pashanhoo.com
Options

style:办事效率监控样式修改

1 parent 1c379ff5
Inline Side-by-side
Showing 2 changed files with 259 additions and 259 deletions
/*
* @Description :路由配置
* @Autor : miaofang
* @LastEditTime: 2023-06-08 14:24:36
* @LastEditTime: 2023-06-09 09:21:27
*/
import Vue from 'vue'
import Router from 'vue-router'
......@@ -214,7 +214,7 @@ export const asyncRoutes = [
children: [
{
path: 'dictionaries',
component: () => import('@/views/system/dictionaries/dictionaries.vue'),
component: () => import('@/views/system/dictionaries/dictionaries'),
name: 'dictionaries',
meta: { title: '字典管理' }
},
......
<!--
* @Description :监控日志
* @Autor : miaofang
* @LastEditTime : 2023-05-17 15:31:58
* @LastEditTime: 2023-06-09 09:24:08
-->
<template>
<!-- 监控日志 -->
......@@ -44,300 +44,300 @@
</div>
</template>
<script>
import { mapGetters } from "vuex";
import efficient from "@/api/efficient";
import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
export default {
name: "jktj",
data () {
return {
// 开始日期限制
pickerOptionsStart: {
disabledDate: (time) => {
if (this.form.endTime) {
return time.getTime() > new Date(this.form.endTime).getTime();
}
import { mapGetters } from "vuex";
import efficient from "@/api/efficient";
import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
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();
}
// 结束日期限制
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.form.startTime) {
return time.getTime() < new Date(this.form.startTime).getTime();
}
},
},
},
form: {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
},
// 搜索表单
pieChartsData: [],
};
},
created () { },
mounted () {
this.getProcessCounts();
},
computed: {
...mapGetters(["dicData"]),
},
methods: {
endTimeChange (val) {
this.form.endTime = timeFormat(new Date(val), true);
},
//查询各区县办件数量
async getProcessCounts () {
this.pieChartsData = [];
let { result: res } = await efficient.getProcessCounts(
this.form.startTime,
this.form.endTime
);
//获取图表配置项需要的数据
res.length > 0 &&
res.forEach((item) => {
this.pieChartsData.push({
//登记数量
value: item.counts,
//登记数量
name: item.recTypeName,
//登记类型代码
groupId: item.recType,
});
});
res.length &&
this.$nextTick(() => {
// 初始化图表
this.echartInit();
this.barChartInit(res[0].recType);
});
},
// 重置
resetForm () {
this.form = {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
form: {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
},
// 搜索表单
pieChartsData: [],
};
},
created () { },
mounted () {
this.getProcessCounts();
},
//玫瑰图初始化
echartInit () {
let _this = this;
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
legend: {
bottom: "-1%",
left: "center",
textStyle: {
color: this.BASE_API.echartTextColor,
},
},
tooltip: {
trigger: "item",
formatter: "{b} : {c}",
},
label: {
color: 'inherit',
},
series: [
{
name: "各业务类型办理数量",
type: "pie",
radius: [0, 250],
center: ["50%", "32%"],
roseType: "area",
itemStyle: {
borderRadius: 8,
computed: {
...mapGetters(["dicData"]),
},
methods: {
endTimeChange (val) {
this.form.endTime = timeFormat(new Date(val), true);
},
//查询各区县办件数量
async getProcessCounts () {
this.pieChartsData = [];
let { result: res } = await efficient.getProcessCounts(
this.form.startTime,
this.form.endTime
);
//获取图表配置项需要的数据
res.length > 0 &&
res.forEach((item) => {
this.pieChartsData.push({
//登记数量
value: item.counts,
//登记数量
name: item.recTypeName,
//登记类型代码
groupId: item.recType,
});
});
res.length &&
this.$nextTick(() => {
// 初始化图表
this.echartInit();
this.barChartInit(res[0].recType);
});
},
// 重置
resetForm () {
this.form = {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
};
this.getProcessCounts();
},
//玫瑰图初始化
echartInit () {
let _this = this;
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
legend: {
bottom: "-1%",
left: "center",
textStyle: {
color: this.BASE_API.echartTextColor,
},
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;
tooltip: {
trigger: "item",
formatter: "{b} : {c}",
},
label: {
color: 'inherit',
},
series: [
{
name: "各业务类型办理数量",
type: "pie",
radius: [0, 250],
center: ["50%", "46%"],
roseType: "area",
itemStyle: {
borderRadius: 8,
},
data: this.pieChartsData,
},
],
});
//添加点击事件
myChart.on("click", function (param) {
_this.barChartInit(param.data.groupId);
});
//默认选中第一个
let index = 1;
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex,
dataIndex: 0,
});
});
},
//柱图初始化
async barChartInit (recType) {
//请求recType对应业务的各区县数据
let { result: res } = await efficient.getProcessDays(
recType,
this.form.startTime,
this.form.endTime
);
//行政区数组
let xzqArr = [];
this.dicData["A20"].forEach((item) => {
xzqArr.push(item.DNAME);
let tempArr = res.filter((i) => {
return i.qxdm == item.DCODE;
myChart.on("mouseover", function (e) {
if (e.dataIndex != index) {
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: index,
});
}
});
if (tempArr.length) {
item.avgDay = tempArr[0].avgDay;
item.maxDay = tempArr[0].maxDay;
item.minDay = tempArr[0].minDay;
} else {
item.avgDay = 0;
item.maxDay = 0;
item.minDay = 0;
}
});
//补全无数据行政区后的结果数组
let dealArr = [...this.dicData["A20"]];
let myChartBar = this.$echarts.init(
document.getElementById("myChart-bar")
);
myChartBar.setOption({
color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
tooltip: {
show: true,
trigger: "axis",
textStyle: {
fontSize: 16, // 字体大小
},
extraCssText: "width:220px;height:160px;", // 背景色
},
grid: {
top: 120,
},
legend: {
data: ["最短用时", "平均用时", "最长用时"],
top: 20,
textStyle: {
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.form.startTime,
this.form.endTime
);
//行政区数组
let xzqArr = [];
this.dicData["A20"].forEach((item) => {
xzqArr.push(item.DNAME);
let tempArr = res.filter((i) => {
return i.qxdm == item.DCODE;
});
if (tempArr.length) {
item.avgDay = tempArr[0].avgDay;
item.maxDay = tempArr[0].maxDay;
item.minDay = tempArr[0].minDay;
} else {
item.avgDay = 0;
item.maxDay = 0;
item.minDay = 0;
}
});
//补全无数据行政区后的结果数组
let dealArr = [...this.dicData["A20"]];
let myChartBar = this.$echarts.init(
document.getElementById("myChart-bar")
);
myChartBar.setOption({
color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
tooltip: {
show: true,
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
},
xAxis: [
{
type: "category",
data: xzqArr,
axisLabel: {
interval: 0,
textStyle: {
show: true,
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
trigger: "axis",
textStyle: {
fontSize: 16, // 字体大小
},
extraCssText: "width:220px;height:160px;", // 背景色
},
],
yAxis: [
{
type: "value",
name: "单位：天",
nameTextStyle: {
color: this.BASE_APIechartTextColor,
grid: {
top: 120,
},
legend: {
data: ["最短用时", "平均用时", "最长用时"],
top: 20,
textStyle: {
show: true,
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
axisLabel: {
textStyle: {
show: true,
color: this.BASE_API.echartTextColor,
},
xAxis: [
{
type: "category",
data: xzqArr,
axisLabel: {
interval: 0,
textStyle: {
show: true,
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
},
},
],
yAxis: [
{
type: "value",
name: "单位：天",
nameTextStyle: {
color: this.BASE_APIechartTextColor,
fontSize: "16",
},
axisLabel: {
textStyle: {
show: true,
color: this.BASE_API.echartTextColor,
fontSize: "16",
},
},
},
],
label: {
color: 'inherit',
},
],
label: {
color: 'inherit',
},
series: [
{
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
series: [
{
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
},
},
barMaxWidth: "60",
name: "最短用时",
data: dealArr.map((item) => item.minDay),
},
barMaxWidth: "60",
name: "最短用时",
data: dealArr.map((item) => item.minDay),
},
{
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
{
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
},
},
barMaxWidth: "60",
name: "平均用时",
data: dealArr.map((item) => item.avgDay),
},
barMaxWidth: "60",
name: "平均用时",
data: dealArr.map((item) => item.avgDay),
},
{
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
{
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
},
},
barMaxWidth: "60",
name: "最长用时",
data: dealArr.map((item) => item.maxDay),
},
barMaxWidth: "60",
name: "最长用时",
data: dealArr.map((item) => item.maxDay),
},
],
});
],
});
},
},
},
};
};
</script>
<style scoped lang="scss">
.jktjDetail {
flex-direction: column;
.jktjDetail {
flex-direction: column;
.rows {
margin-left: 100px;
}
.rows {
margin-left: 100px;
}
.center {
line-height: 50vh;
text-align: center;
color: #b6b5b5;
.center {
line-height: 50vh;
text-align: center;
color: #b6b5b5;
}
}
}
</style>
......