Skip to content

bdc / bdcjg-web

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

style:监控统计样式修改完成

1 parent 7c233183
Inline Side-by-side
Showing 11 changed files with 711 additions and 709 deletions
......@@ -190,6 +190,21 @@
}
}
.complex-header {
.el-table--border th.el-table__cell {
border-bottom: 1px solid #458ACF !important;
}
.el-table--border .el-table__cell {
border-right: 1px solid #458ACF !important;
}
.el-table--group,
.el-table--border {
border: 1px solid #458ACF !important;
}
}
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next {
@extend .bgc;
......
......@@ -4,19 +4,19 @@
<!-- 头部搜索 -->
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="100px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME == 'jg'">
<Breadcrumb />
</el-form-item>
<el-row>
<el-col :span="4">
<el-form-item label="开始日期" prop="startTime">
<el-form-item label="开始日期" prop="startTime" class="d-flex">
<el-date-picker type="date" :clearable="false" class="width100" placeholder="开始日期"
:picker-options="pickerOptionsStart" v-model="form.startTime"
value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="结束日期" prop="endTime">
<el-form-item label="结束日期" prop="endTime" class="d-flex">
<el-date-picker class="width100" :clearable="false" type="date" placeholder="结束日期"
:picker-options="pickerOptionsEnd" v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss"
@change="endTimeChange"></el-date-picker>
......@@ -39,322 +39,322 @@
</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();
}
},
},
// 结束日期限制
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.form.startTime) {
return time.getTime() < new Date(this.form.startTime).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();
}
},
form: {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
},
// 结束日期限制
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.form.startTime) {
return time.getTime() < new Date(this.form.startTime).getTime();
}
},
// 搜索表单
pieChartsData: [],
};
},
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);
},
created () { },
mounted () {
this.getProcessCounts();
//查询各区县办件数量
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);
});
},
computed: {
...mapGetters(["dicData"]),
// 重置
resetForm () {
this.form = {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
};
this.getProcessCounts();
},
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: "2%",
left: "center",
textStyle: {
color: "#fff",
},
},
tooltip: {
trigger: "item",
formatter: "{b} : {c}",
//玫瑰图初始化
echartInit () {
let _this = this;
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
legend: {
bottom: "2%",
left: "center",
textStyle: {
color: "#fff",
},
label: {
color: 'inherit',
},
series: [
{
name: "各业务类型办理数量",
type: "pie",
radius: [0, 250],
center: ["50%", "45%"],
roseType: "area",
itemStyle: {
borderRadius: 8,
},
data: this.pieChartsData,
},
tooltip: {
trigger: "item",
formatter: "{b} : {c}",
},
label: {
color: 'inherit',
},
series: [
{
name: "各业务类型办理数量",
type: "pie",
radius: [0, 250],
center: ["50%", "45%"],
roseType: "area",
itemStyle: {
borderRadius: 8,
},
],
});
//添加点击事件
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;
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: "highlight",
type: "downplay",
seriesIndex: 0,
dataIndex: e.dataIndex,
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.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;
}
});
},
//柱图初始化
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;
});
//补全无数据行政区后的结果数组
let dealArr = [...this.dicData["A20"]];
let myChartBar = this.$echarts.init(
document.getElementById("myChart-bar")
);
myChartBar.setOption({
color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
tooltip: {
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: {
show: true,
trigger: "axis",
textStyle: {
fontSize: 16, // 字体大小
},
extraCssText: "width:220px;height:160px;", // 背景色
color: "#fff",
fontSize: "16",
},
grid: {
top: 120,
},
xAxis: [
{
type: "category",
data: xzqArr,
axisLabel: {
interval: 0,
textStyle: {
show: true,
color: "#fff",
fontSize: "16",
},
},
},
legend: {
data: ["最短用时", "平均用时", "最长用时"],
top: 20,
textStyle: {
show: true,
],
yAxis: [
{
type: "value",
name: "单位：天",
nameTextStyle: {
color: "#fff",
fontSize: "16",
},
},
xAxis: [
{
type: "category",
data: xzqArr,
axisLabel: {
interval: 0,
textStyle: {
show: true,
color: "#fff",
fontSize: "16",
},
},
},
],
yAxis: [
{
type: "value",
name: "单位：天",
nameTextStyle: {
axisLabel: {
textStyle: {
show: true,
color: "#fff",
fontSize: "16",
},
axisLabel: {
textStyle: {
show: true,
color: "#fff",
fontSize: "16",
},
},
},
],
label: {
color: 'inherit',
},
series: [
{
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
],
label: {
color: 'inherit',
},
series: [
{
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
},
},
barMaxWidth: "60",
name: "最短用时",
data: dealArr.map((item) => item.minDay),
},
{
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
barMaxWidth: "60",
name: "最短用时",
data: dealArr.map((item) => item.minDay),
},
{
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
},
},
barMaxWidth: "60",
name: "平均用时",
data: dealArr.map((item) => item.avgDay),
},
{
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
barMaxWidth: "60",
name: "平均用时",
data: dealArr.map((item) => item.avgDay),
},
{
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 {
height: 100%;
display: flex;
flex-direction: column;
.rows {
margin-left: 100px;
}
.jktjDetail {
height: 100%;
display: flex;
flex-direction: column;
.center {
line-height: 50vh;
text-align: center;
}
.rows {
margin-left: 100px;
}
.echarts-box {
display: flex;
justify-content: center;
.center {
line-height: 50vh;
text-align: center;
}
.chart {
width: 40%;
height: 100%;
float: left;
}
.echarts-box {
display: flex;
justify-content: center;
.chart-bar {
width: 60%;
}
.chart {
width: 40%;
height: 100%;
float: left;
}
.form-clues-content {
flex: 1;
height: 100%;
color: #b6b5b5;
.chart-bar {
width: 60%;
}
}
.form-clues-content {
flex: 1;
height: 100%;
color: #b6b5b5;
}
}
</style>
......
......@@ -3,13 +3,13 @@
<div class="jktjDetail form-clues">
<!-- 头部搜索 -->
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="100px">
<el-form-item>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item v-if="BASE_API.THEME=='jg'">
<Breadcrumb />
</el-form-item>
<el-row>
<el-col :span="4">
<el-form-item label="行政区">
<el-form-item label="行政区" class="d-flex">
<el-select v-model="form.qxdm" class="width100" clearable placeholder="行政区">
<el-option v-for="item in dicData['A20']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE">
</el-option>
......@@ -17,14 +17,14 @@
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="开始日期" prop="startTime">
<el-form-item label="开始日期" prop="startTime" class="d-flex">
<el-date-picker type="date" :clearable="false" class="width100" placeholder="开始日期"
:picker-options="pickerOptionsStart" v-model="form.startTime"
value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="结束日期" prop="endTime">
<el-form-item label="结束日期" prop="endTime" class="d-flex">
<el-date-picker type="date" :clearable="false" class="width100" placeholder="结束日期"
:picker-options="pickerOptionsEnd" v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss"
@change="endTimeChange"></el-date-picker>
......@@ -47,274 +47,274 @@
</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();
}
},
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();
}
},
recTypeArr: [],
chartData: [],
// 搜索表单
form: {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
qxdm: "",
},
// 结束日期限制
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.form.startTime) {
return time.getTime() < new Date(this.form.startTime).getTime();
}
},
interval: 50
};
},
mounted () {
// 查询成功率
this.getSuucessRate();
},
computed: {
...mapGetters(["dicData"]),
},
methods: {
endTimeChange (val) {
this.form.endTime = timeFormat(new Date(val), true)
},
async getSuucessRate () {
this.recTypeArr = [];
this.chartData = [];
let { result: res } = await business.getSuucessRate(
this.form.startTime,
this.form.endTime,
this.form.qxdm
);
this.chartData = res;
recTypeArr: [],
chartData: [],
// 搜索表单
form: {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
qxdm: "",
},
interval: 50
};
},
mounted () {
// 查询成功率
this.getSuucessRate();
},
computed: {
...mapGetters(["dicData"]),
},
methods: {
endTimeChange (val) {
this.form.endTime = timeFormat(new Date(val), true)
},
async getSuucessRate () {
this.recTypeArr = [];
this.chartData = [];
let { result: res } = await business.getSuucessRate(
this.form.startTime,
this.form.endTime,
this.form.qxdm
);
this.chartData = res;
let maxData = Math.max.apply(Math, this.chartData.map(item => { return item.failure }))
this.interval = Math.ceil(maxData / 10)
//行政区代码过滤
res.length > 0 &&
res.forEach((item) => {
this.recTypeArr.push(item.recTypeName);
});
this.$nextTick(() => {
// 初始化图表
this.chartData.length && this.echartInit();
let maxData = Math.max.apply(Math, this.chartData.map(item => { return item.failure }))
this.interval = Math.ceil(maxData / 10)
//行政区代码过滤
res.length > 0 &&
res.forEach((item) => {
this.recTypeArr.push(item.recTypeName);
});
},
// 重置
resetForm () {
this.form = {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
qxdm: "",
};
this.getSuucessRate();
},
echartInit () {
let _this = this;
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
color: ["#13E5FF", "#C99E68", "#E873B2", "#ffaf48"],
tooltip: {
trigger: "axis",
formatter: '{b}<br/>{a0}：{c0}个<br/>{a1}：{c1}个<br/>{a2}：{c2}%',
axisPointer: {
type: "cross",
crossStyle: {
color: "#fff",
},
},
},
legend: {
data: ["成功", "失败", "成功率"],
top: '16',
textStyle: {
show: true,
this.$nextTick(() => {
// 初始化图表
this.chartData.length && this.echartInit();
});
},
// 重置
resetForm () {
this.form = {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
qxdm: "",
};
this.getSuucessRate();
},
echartInit () {
let _this = this;
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
color: ["#13E5FF", "#C99E68", "#E873B2", "#ffaf48"],
tooltip: {
trigger: "axis",
formatter: '{b}<br/>{a0}：{c0}个<br/>{a1}：{c1}个<br/>{a2}：{c2}%',
axisPointer: {
type: "cross",
crossStyle: {
color: "#fff",
fontSize: "16",
},
},
label: {
color: 'inherit',
},
legend: {
data: ["成功", "失败", "成功率"],
top: '16',
textStyle: {
show: true,
color: "#fff",
fontSize: "16",
},
xAxis: [
{
type: "category",
data: _this.recTypeArr,
axisPointer: {
type: "shadow",
},
label: {
color: 'inherit',
},
xAxis: [
{
type: "category",
data: _this.recTypeArr,
axisPointer: {
type: "shadow",
},
axisLabel: {
textStyle: {
show: true,
color: "#fff",
fontSize: "16",
},
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;
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;
}
});
let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr;
return newArr.join("");
},
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: {
},
],
yAxis: [
{
type: "value",
name: "数量/个",
nameTextStyle: {
color: "#fff",
fontSize: "16",
},
// interval: this.interval,
axisLabel: {
formatter: "{value}",
textStyle: {
show: true,
color: "#fff",
fontSize: "16",
},
// interval: this.interval,
axisLabel: {
formatter: "{value}",
textStyle: {
show: true,
color: "#fff",
fontSize: "16",
},
},
},
{
type: "value",
name: "成功率",
nameTextStyle: {
},
{
type: "value",
name: "成功率",
nameTextStyle: {
color: "#fff",
fontSize: "16",
},
splitNumber: 2,
axisLabel: {
formatter: "{value} %",
textStyle: {
show: true,
color: "#fff",
fontSize: "16",
},
splitNumber: 2,
axisLabel: {
formatter: "{value} %",
textStyle: {
show: true,
color: "#fff",
fontSize: "16",
},
},
},
],
series: [
{
name: "成功",
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
},
],
series: [
{
name: "成功",
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
},
barMaxWidth: '60',
data: this.chartData.map((item) => {
return item.success;
}),
},
{
name: "失败",
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
barMaxWidth: '60',
data: this.chartData.map((item) => {
return item.success;
}),
},
{
name: "失败",
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
},
barMaxWidth: '60',
data: this.chartData.map((item) => {
return item.failure;
}),
},
{
name: "成功率",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
barMaxWidth: '60',
data: this.chartData.map((item) => {
return item.failure;
}),
},
{
name: "成功率",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
},
type: "line",
barMaxWidth: '60',
yAxisIndex: 1,
data: this.chartData.map((item) => {
return item.rate;
}),
},
],
});
},
type: "line",
barMaxWidth: '60',
yAxisIndex: 1,
data: this.chartData.map((item) => {
return item.rate;
}),
},
],
});
},
};
},
};
</script>
<style scoped lang="scss">
.jktjDetail {
height: 100%;
display: flex;
flex-direction: column;
.rows {
margin-left: 100px;
}
.jktjDetail {
height: 100%;
display: flex;
flex-direction: column;
.center {
line-height: 50vh;
text-align: center;
color: #b6b5b5;
}
.rows {
margin-left: 100px;
}
.echarts-box {
display: flex;
justify-content: center;
height: 500px;
.center {
line-height: 50vh;
text-align: center;
color: #b6b5b5;
}
.chart {
width: 100%;
height: 100%;
}
}
.echarts-box {
display: flex;
justify-content: center;
height: 500px;
.form-clues-content {
flex: 1;
.chart {
width: 100%;
height: 100%;
}
}
.form-clues-content {
flex: 1;
height: 100%;
}
}
</style>
......
......@@ -4,12 +4,12 @@
<!-- 头部搜索 -->
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="100px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME == 'jg'">
<Breadcrumb />
</el-form-item>
<el-row>
<el-col :span="4">
<el-form-item label="行政区">
<el-form-item label="行政区" class="d-flex">
<el-select v-model="form.qxdm" class="width100" clearable placeholder="行政区">
<el-option v-for="item in dicData['A20']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE">
</el-option>
......@@ -17,14 +17,14 @@
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="开始日期">
<el-form-item label="开始日期" class="d-flex">
<el-date-picker class="width100" :clearable="false" type="date" placeholder="开始日期"
:picker-options="pickerOptionsStart" v-model="form.startTime"
value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="结束日期">
<el-form-item label="结束日期" class="d-flex">
<el-date-picker class="width100" :clearable="false" type="date" placeholder="结束日期"
:picker-options="pickerOptionsEnd" v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss"
@change="endTimeChange"></el-date-picker>
......@@ -47,202 +47,202 @@
</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();
}
},
},
// 结束日期限制
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.form.startTime) {
return time.getTime() < new Date(this.form.startTime).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();
}
},
// 搜索表单
valueTime: "",
// 搜索表单
form: {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
qxdm: "",
},
// 结束日期限制
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.form.startTime) {
return time.getTime() < new Date(this.form.startTime).getTime();
}
},
chartData: []
};
},
// 搜索表单
valueTime: "",
// 搜索表单
form: {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
qxdm: "",
},
chartData: []
};
},
mounted () {
// 查询业务量
this.getProcessCounts();
},
computed: {
...mapGetters(["dicData"]),
},
methods: {
endTimeChange (val) {
this.form.endTime = timeFormat(new Date(val), true)
},
mounted () {
// 查询业务量
this.getProcessCounts();
async getProcessCounts () {
this.chartData = [];
let { result: res } = await efficient.getProcessCounts(
this.form.startTime,
this.form.endTime,
this.form.qxdm
);
//获取图表配置项需要的数据
this.chartData = res;
this.$nextTick(() => {
// 初始化图表
this.chartData.length && this.echartInit(this.chartData)
});
},
computed: {
...mapGetters(["dicData"]),
// 重置
resetForm () {
this.form = {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
qxdm: ""
};
this.getProcessCounts();
},
methods: {
endTimeChange (val) {
this.form.endTime = timeFormat(new Date(val), true)
},
async getProcessCounts () {
this.chartData = [];
let { result: res } = await efficient.getProcessCounts(
this.form.startTime,
this.form.endTime,
this.form.qxdm
);
//获取图表配置项需要的数据
this.chartData = res;
this.$nextTick(() => {
// 初始化图表
this.chartData.length && this.echartInit(this.chartData)
});
},
// 重置
resetForm () {
this.form = {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
qxdm: ""
};
this.getProcessCounts();
},
//图表渲染
echartInit (chartArr) {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
color: ["#13E5FF"],
tooltip: {
show: true,
trigger: "axis",
textStyle: {
fontSize: 16, // 字体大小
},
},
grid: {
top: 120,
bottom: 100,
},
label: {
color: 'inherit',
//图表渲染
echartInit (chartArr) {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
color: ["#13E5FF"],
tooltip: {
show: true,
trigger: "axis",
textStyle: {
fontSize: 16, // 字体大小
},
xAxis: [
{
type: "category",
data: chartArr.map(item => item.recTypeName),
axisLabel: {
interval: 0,
rotate: 40,
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;
},
grid: {
top: 120,
bottom: 100,
},
label: {
color: 'inherit',
},
xAxis: [
{
type: "category",
data: chartArr.map(item => item.recTypeName),
axisLabel: {
interval: 0,
rotate: 40,
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;
}
});
let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr;
return newArr.join("");
},
textStyle: {
show: true,
color: "#fff",
fontSize: "16",
},
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: {
textStyle: {
show: true,
color: "#fff",
fontSize: "16",
},
axisLabel: {
textStyle: {
show: true,
color: "#fff",
fontSize: "16",
},
},
},
],
yAxis: [
{
type: "value",
name: "数量/个",
nameTextStyle: {
color: "#fff",
fontSize: "16",
},
axisLabel: {
textStyle: {
show: true,
color: "#fff",
fontSize: "16",
},
},
],
},
],
series: [
{
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
series: [
{
type: "bar",
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
},
},
barMaxWidth: '60',
data: chartArr.map(item => item.counts),
},
],
});
},
barMaxWidth: '60',
data: chartArr.map(item => item.counts),
},
],
});
},
};
},
};
</script>
<style scoped lang="scss">
.jktjDetail {
height: 100%;
display: flex;
flex-direction: column;
.rows {
margin-left: 100px;
}
.jktjDetail {
height: 100%;
display: flex;
flex-direction: column;
.center {
line-height: 50vh;
text-align: center;
color: #b6b5b5;
}
.rows {
margin-left: 100px;
}
.echarts-box {
display: flex;
justify-content: center;
height: 500px;
.center {
line-height: 50vh;
text-align: center;
color: #b6b5b5;
}
.chart {
width: 100%;
height: 100%;
}
}
.echarts-box {
display: flex;
justify-content: center;
height: 500px;
.form-clues-content {
flex: 1;
.chart {
width: 100%;
height: 100%;
}
}
.form-clues-content {
flex: 1;
height: 100%;
}
}
</style>
......
/deep/.el-table--border th.el-table__cell {
border-bottom: 1px solid #458ACF !important;
}
/deep/.el-table--border .el-table__cell {
border-right: 1px solid #458ACF !important;
}
/deep/.el-table thead.is-group th.el-table__cell {
background-color: transparent !important;
}
......@@ -17,9 +9,4 @@
.export-excel-wrapper {
display: inline-block;
}
/deep/.el-table--group,
.el-table--border {
border: 1px solid #458ACF !important;
}
\ No newline at end of file
......
......@@ -4,7 +4,7 @@
<!-- 头部搜索 -->
<div class="from-clues-header">
<el-form ref="ruleForm" :model="form" label-width="100px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME == 'jg'">
<Breadcrumb />
</el-form-item>
<el-row class="mb-5">
......@@ -32,7 +32,7 @@
</el-form>
</div>
<!-- 列表区域 -->
<div class="from-clues-content">
<div class="from-clues-content complex-header">
<lb-table ref="table" :header-cell-style="headerStyle1" :calcHeight="200" :pagination="false"
:column="tableData.columns" :data="tableData.data">
</lb-table>
......@@ -171,6 +171,7 @@ export default {
</script>
<style scoped lang="scss">
@import "../css/index.scss";
/deep/th.el-table__cell {
height: 0 !important;
}
......
......@@ -4,7 +4,7 @@
<!-- 头部搜索 -->
<div class="from-clues-header">
<el-form ref="ruleForm" :model="form" label-width="100px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME == 'jg'">
<Breadcrumb />
</el-form-item>
<el-row class="mb-5">
......@@ -33,10 +33,9 @@
</el-form>
</div>
<!-- 列表区域 -->
<div class="from-clues-content">
<div class="from-clues-content complex-header">
<lb-table ref="table" :pagination="false" :calcHeight="200" :column="tableData.columns" :data="tableData.data">
</lb-table>
<down-lb-table ref="table" v-show="false" :id="'mytable'" :downExcel="true" :pagination="false"
:column="tableData.columns" :data="tableData.data" :downTitle="downTitle">
</down-lb-table>
......
......@@ -2,7 +2,7 @@
* @Author: yangwei
* @Date: 2023-02-17 16:32:50
* @LastEditors: Please set LastEditors
* @LastEditTime: 2023-03-15 10:42:21
* @LastEditTime: 2023-03-27 14:58:51
* @FilePath: \bdcjg-web\src\views\statistics\registerBookQuality\index.vue
* @Description:
*
......@@ -14,7 +14,7 @@
<!-- 头部搜索 -->
<div class="from-clues-header">
<el-form ref="ruleForm" :model="form" label-width="100px">
<el-form-item>
<el-form-item v-if="BASE_API.THEME == 'jg'">
<Breadcrumb />
</el-form-item>
<el-row class="mb-5">
......@@ -42,7 +42,7 @@
</el-form>
</div>
<!-- 列表区域 -->
<div class="from-clues-content">
<div class="from-clues-content complex-header">
<lb-table ref="table" :pagination="false" :border="true" :calcHeight="200" :header-cell-style="headerStyle"
:column="tableData.columns" :data="tableData.data">
</lb-table>
......
......@@ -11,7 +11,7 @@
<el-input v-model.trim="form.menuName" class="width100" clearable placeholder="菜单名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="3" class="btnColRight">
<el-col :span="20" class="btnColRight">
<btn nativeType="cx" @click="searchQuery">查询</btn>
<btn nativeType="cx" @click="handleAdd()">新增菜单</btn>
</el-col>
......
......@@ -11,7 +11,7 @@
<el-input v-model.trim="form.rolesName" class="width100" clearable placeholder="角色名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="3" class="btnColRight">
<el-col :span="20" class="btnColRight">
<btn nativeType="cx" @click="searchQuery">查询</btn>
<btn nativeType="cx" @click="handleAddEdit">增加角色</btn>
</el-col>
......
<template>
<div class="timedTask from-clues">
<div class="from-clues-header">
<el-form ref="ruleForm" :model="form" label-width="100px">
<el-form ref="ruleForm" :model="form" label-width="80px">
<el-form-item v-if="BASE_API.THEME == 'jg'">
<Breadcrumb />
</el-form-item>
......@@ -22,7 +22,7 @@
</el-form-item>
</el-col>
<!-- 操作按钮 -->
<el-col :span="3" class="btnColRight">
<el-col :span="12" class="btnColRight">
<btn nativeType="cx" @click="getTableList">查询</btn>
<btn nativeType="cx" @click="handleAdd">添加人员</btn>
</el-col>
......