Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
d511ea9f by 田浩浩
Options

Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcjg-web

2 parents 1bffcee7 c1737b81
Inline Side-by-side
Showing 6 changed files with 206 additions and 84 deletions
......@@ -7,13 +7,14 @@ class business {
startDate:开始日期
endDate:结束日期
*/
async getSuucessRate(startDate,endDate) {
async getSuucessRate(startDate,endDate,qxdm) {
return request({
url: SERVER.SERVERAPI + '/rest/statistics/Business/sf',
method: 'get',
params: {
startDate:startDate,
endDate:endDate
endDate:endDate,
qxdm:qxdm
}
})
}
......
......@@ -7,13 +7,14 @@ class efficient {
startDate:开始日期
endDate:结束日期
*/
async getProcessCounts(startDate, endDate) {
async getProcessCounts(startDate, endDate,qxdm) {
return request({
url: SERVER.SERVERAPI + "/rest/statistics/Efficient/getProcessCounts",
method: "post",
params: {
startDate: startDate,
endDate: endDate,
qxdm:qxdm
},
});
}
......
......@@ -30,7 +30,7 @@
border-right: none;
text-align: center;
padding: 0;
color: #02D9FD;
color: #05bbdb;
line-height: 16px;
font-size: 12px;
margin-top: 8px !important;
......
......@@ -2,16 +2,34 @@
<!-- 监控日志 -->
<div class="jktjDetail form-clues">
<!-- 头部搜索 -->
<el-form ref="form" :model="form" :inline="true" class="from-clues-header" label-width="100px">
<div class="from-clues-header">
<el-form ref="form" :model="form" label-width="100px">
<el-form-item>
<Breadcrumb />
</el-form-item>
<el-row class="rows">
<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-row>
<el-col :span="4">
<el-form-item label="开始日期" prop="startTime">
<el-date-picker
type="datetime"
placeholder="开始日期"
:picker-options="pickerOptionsStart"
clearable
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-date-picker
type="datetime"
placeholder="结束日期"
:picker-options="pickerOptionsEnd"
clearable
v-model="form.endTime"
value-format="yyyy/MM/dd HH:mm:ss"
></el-date-picker>
</el-form-item>
</el-col>
<!-- 操作按钮 -->
......@@ -21,6 +39,7 @@
</el-col>
</el-row>
</el-form>
</div>
<!-- 表格 -->
<div class="form-clues-content echarts-box" v-if="pieChartsData.length">
<div id="myChart" class="chart"></div>
......@@ -53,16 +72,18 @@ export default {
}
},
},
form: {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
},
// 搜索表单
valueTime: [getFirstDayOfSeason(), timeFormat(new Date(), true)],
// valueTime: ["2022/01/01 00:00:00", timeFormat(new Date())],
pieChartsData: [],
};
},
created () {
created () {},
mounted() {
this.getProcessCounts();
},
mounted () { },
computed: {
...mapGetters(["dicData"]),
},
......@@ -71,8 +92,8 @@ export default {
async getProcessCounts () {
this.pieChartsData = [];
let { result: res } = await efficient.getProcessCounts(
this.valueTime[0],
this.valueTime[1]
this.form.startTime,
this.form.endTime
);
//获取图表配置项需要的数据
res.length > 0 &&
......@@ -86,13 +107,18 @@ export default {
groupId: item.recType,
});
});
this.$nextTick(() => {
// 初始化图表
this.echartInit();
this.barChartInit(res[0].recType);
});
},
// 重置
resetForm () {
this.valueTime = [getFirstDayOfSeason(), timeFormat(new Date(), true)];
this.form = {
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(), true),
};
this.getProcessCounts();
},
//玫瑰图初始化
......@@ -103,7 +129,7 @@ export default {
// 绘制图表
myChart.setOption({
legend: {
bottom: "6%",
bottom: "2%",
left: "center",
textStyle: {
color: "#fff",
......@@ -118,14 +144,11 @@ export default {
name: "各业务类型办理数量",
type: "pie",
radius: [0, 250],
center: ["50%", "30%"],
center: ["50%", "45%"],
roseType: "area",
itemStyle: {
borderRadius: 8,
},
label: {
show: false,
},
data: this.pieChartsData,
},
],
......@@ -164,19 +187,37 @@ export default {
//请求recType对应业务的各区县数据
let { result: res } = await efficient.getProcessDays(
recType,
this.valueTime[0],
this.valueTime[1]
this.form.startTime,
this.form.endTime
);
//行政区数组
let xzqArr = [];
//行政区代码过滤
res.length > 0 &&
res.forEach((item) => {
xzqArr.push(
this.dicData["A20"].filter((i) => {
return i.DCODE == item.qxdm;
})[0].DNAME
);
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"]];
// //行政区代码过滤
// 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")
);
......@@ -211,7 +252,7 @@ export default {
textStyle: {
show: true,
color: "#fff",
fontSize: "20",
fontSize: "16",
},
},
},
......@@ -236,18 +277,21 @@ export default {
series: [
{
type: "bar",
barMaxWidth: '60',
name: "最短用时",
data: res.map((item) => item.minDay),
data: dealArr.map((item) => item.minDay),
},
{
type: "bar",
barMaxWidth: '60',
name: "平均用时",
data: res.map((item) => item.avgDay),
data: dealArr.map((item) => item.avgDay),
},
{
type: "bar",
barMaxWidth: '60',
name: "最长用时",
data: res.map((item) => item.maxDay),
data: dealArr.map((item) => item.maxDay),
},
],
});
......
......@@ -8,19 +8,46 @@
<Breadcrumb />
</el-form-item>
<el-row>
<el-col :span="6">
<el-col :span="4">
<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-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>
</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-col :span="4">
<el-form-item label="开始日期" prop="startTime">
<el-date-picker
type="datetime"
placeholder="开始日期"
:picker-options="pickerOptionsStart"
clearable
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-date-picker
type="datetime"
placeholder="结束日期"
:picker-options="pickerOptionsEnd"
clearable
v-model="form.endTime"
value-format="yyyy/MM/dd HH:mm:ss"
></el-date-picker>
</el-form-item>
</el-col>
<!-- 操作按钮 -->
......@@ -63,13 +90,12 @@ export default {
}
},
},
// 搜索表单
valueTime: [getFirstDayOfSeason(), timeFormat(new Date(), true)],
recTypeArr: [],
chartData: [],
// 搜索表单
form: {
startTime: "",
endTime: "",
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(),true),
qxdm: "",
},
};
......@@ -86,8 +112,9 @@ export default {
this.recTypeArr = [];
this.chartData = [];
let { result: res } = await business.getSuucessRate(
this.valueTime[0],
this.valueTime[1]
this.form.startTime,
this.form.endTime,
this.form.qxdm
);
this.chartData = res;
//行政区代码过滤
......@@ -95,15 +122,17 @@ export default {
res.forEach((item) => {
this.recTypeArr.push(item.recTypeName);
});
this.$nextTick(() => {
// 初始化图表
this.echartInit();
});
},
// 重置
resetForm () {
this.form = {
startTime: "",
endTime: "",
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(),true),
};
this.valueTime = [getFirstDayOfSeason(), timeFormat(new Date(), true)];
this.getSuucessRate();
},
echartInit () {
......@@ -193,7 +222,7 @@ export default {
color: "#fff",
fontSize: "16",
},
interval: 5,
splitNumber:4,
axisLabel: {
formatter: "{value} %",
textStyle: {
......@@ -208,6 +237,7 @@ export default {
{
name: "成功",
type: "bar",
barMaxWidth: '60',
tooltip: {
valueFormatter: function (value) {
return value + " ml";
......@@ -220,6 +250,7 @@ export default {
{
name: "失败",
type: "bar",
barMaxWidth: '60',
tooltip: {
valueFormatter: function (value) {
return value + " ml";
......@@ -232,6 +263,7 @@ export default {
{
name: "成功率",
type: "line",
barMaxWidth: '60',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
......
......@@ -8,38 +8,68 @@
<Breadcrumb />
</el-form-item>
<el-row>
<el-col :span="6">
<el-col :span="4">
<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-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>
</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-col :span="4">
<el-form-item label="开始日期" prop="startTime">
<el-date-picker
type="datetime"
placeholder="开始日期"
:picker-options="pickerOptionsStart"
clearable
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-date-picker
type="datetime"
placeholder="结束日期"
:picker-options="pickerOptionsEnd"
clearable
v-model="form.endTime"
value-format="yyyy/MM/dd HH:mm:ss"
></el-date-picker>
</el-form-item>
</el-col>
<!-- 操作按钮 -->
<el-col :span="3" class="btnColRight">
<btn nativeType="cz" @click="resetForm">重置</btn>
<btn nativeType="cx">查询</btn>
<btn nativeType="cx" @click="getProcessCounts">查询</btn>
</el-col>
</el-row>
</el-form>
</div>
<!-- 图表 -->
<div class="form-clues-content echarts-box">
<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 efficient from "@/api/efficient";
import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
export default {
name: "jktj",
data () {
......@@ -62,21 +92,37 @@ export default {
},
// 搜索表单
valueTime: "",
// 搜索表单
form: {
startTime: "",
endTime: "",
XZQDM: "",
startTime: getFirstDayOfSeason(),
endTime: timeFormat(new Date(),true),
qxdm: "",
},
chartData:[]
};
},
mounted () {
// 初始化图表
this.echartInit();
mounted() {
// 查询业务量
this.getProcessCounts();
},
computed: {
...mapGetters(["dicData"]),
},
methods: {
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.echartInit(this.chartData)
});
},
// 重置
resetForm () {
this.form = {
......@@ -84,7 +130,8 @@ export default {
endTime: "",
};
},
echartInit () {
//图表渲染
echartInit(chartArr) {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
......@@ -96,7 +143,6 @@ export default {
textStyle: {
fontSize: 16, // 字体大小
},
extraCssText: "width:220px;height:160px;", // 背景色
},
grid: {
top: 120,
......@@ -104,14 +150,7 @@ export default {
xAxis: [
{
type: "category",
data: [
"土地所有权",
"建设用地、宅基地使用权",
"构（建）筑物所有权",
"林权",
"注销登记",
"抵押权登记",
],
data: chartArr.map(item=>item.recTypeName),
axisLabel: {
interval: 0,
formatter: function (val) {
......@@ -139,7 +178,7 @@ export default {
textStyle: {
show: true,
color: "#fff",
fontSize: "20",
fontSize: "16",
},
},
},
......@@ -163,8 +202,9 @@ export default {
],
series: [
{
data: [200, 120, 150, 80, 70, 30],
data: chartArr.map(item=>item.counts),
type: "bar",
barMaxWidth: '60',
},
],
});
......@@ -183,7 +223,11 @@ export default {
.rows {
margin-left: 100px;
}
.center {
line-height: 50vh;
text-align: center;
color:#b6b5b5
}
.echarts-box {
display: flex;
justify-content: center;
......