Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
50ab8b81 by “miaofang
Options

业务量统计

1 parent 5865588c
Inline Side-by-side
Showing 9 changed files with 1445 additions and 69 deletions
......@@ -17,6 +17,7 @@
"bpmn-js-token-simulation": "^0.10.0",
"core-js": "^3.6.5",
"diagram-js": "^6.8.2",
"echarts": "^5.4.3",
"js-cookie": "2.2.0",
"lodash": "^4.17.21",
"mxdraw": "^0.1.157",
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-08-25 08:59:04
-->
<template>
<div class="djlx">
<div class="inquire">
<el-form :model="queryForm" ref="queryForm" label-width="100px">
<el-row>
<el-col :span="6">
<el-form-item label="开始时间" class="width100">
<el-date-picker
v-model="queryForm.kssj"
class="width100"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="结束时间" class="width100">
<el-date-picker
v-model="queryForm.kssj"
class="width100"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="区域" class="width100">
<el-select
v-model="queryForm.qy"
class="width100"
clearable
placeholder="请选择权利类型"
>
<el-option
v-for="item in dictData['A8']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5" class="btnColRight">
<el-form-item>
<el-button
type="primary"
native-type="submit"
@click="handleSearch"
>查询</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="concent">
<div class="left">
<el-table
height="187"
stripe
:data="tableList"
size="mini"
border
header-cell-class-name="table-header-gray"
>
<el-table-column
label="类型"
prop="name"
minWidth="100"
align="center" />
<el-table-column
label="数量"
prop="agent"
minWidth="120"
align="center"
/></el-table>
</div>
<div class="right">
<div ref="chart" style="width: 100%; height: 200px"></div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
export default {
components: {},
computed: {
...mapGetters(["dictData", "transfer"]),
},
data () {
return {
queryForm: {},
tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
};
},
mounted() {
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
},
methods: {
getOption() {
return {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
},
series: [
{
name: "饼图名称",
type: "pie",
radius: ["20%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: "30",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 335, name: "数据1" },
{ value: 310, name: "数据2" },
{ value: 234, name: "数据3" },
{ value: 135, name: "数据4" },
{ value: 1548, name: "数据5" },
],
},
],
};
},
handleSearch() {},
},
};
</script>
<style scoped lang="scss">
/deep/.el-card__header {
padding: 8px 10px;
}
/deep/.el-card__body {
padding: 3px 10px 5px 10px;
overflow: hidden;
}
.yhjgba {
.el-col {
padding: 4px;
}
.inquire {
width: 100%;
height: 40px;
border: 1px solid rgb(184, 217, 243);
// background-color: rebeccapurple;
}
.concent {
width: 100%;
height: 300px;
display: flex;
.left {
width: 70%;
height: 200px;
}
.right {
width: 30%;
height: 200px;
}
}
}
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-08-25 08:59:04
-->
<template>
<div class="djlx">
<div class="inquire">
<el-form :model="queryForm" ref="queryForm" label-width="100px">
<el-row>
<el-col :span="6">
<el-form-item label="开始时间" class="width100">
<el-date-picker
v-model="queryForm.kssj"
class="width100"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="结束时间" class="width100">
<el-date-picker
v-model="queryForm.kssj"
class="width100"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="区域" class="width100">
<el-select
v-model="queryForm.qy"
class="width100"
clearable
placeholder="请选择权利类型"
>
<el-option
v-for="item in dictData['A8']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5" class="btnColRight">
<el-form-item>
<el-button
type="primary"
native-type="submit"
@click="handleSearch"
>查询</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="concent">
<div class="left">
<el-table
height="187"
stripe
:data="tableList"
size="mini"
border
header-cell-class-name="table-header-gray"
>
<el-table-column
label="类型"
prop="name"
minWidth="100"
align="center" />
<el-table-column
label="数量"
prop="agent"
minWidth="120"
align="center"
/></el-table>
</div>
<div class="right">
<div ref="chart" style="width: 100%; height: 200px"></div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
export default {
components: {},
computed: {
...mapGetters(["dictData", "transfer"]),
},
data () {
return {
queryForm: {},
tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
};
},
mounted() {
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
},
methods: {
getOption() {
return {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
},
series: [
{
name: "饼图名称",
type: "pie",
radius: ["20%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: "30",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 335, name: "数据1" },
{ value: 310, name: "数据2" },
{ value: 234, name: "数据3" },
{ value: 135, name: "数据4" },
{ value: 1548, name: "数据5" },
],
},
],
};
},
handleSearch() {},
},
};
</script>
<style scoped lang="scss">
/deep/.el-card__header {
padding: 8px 10px;
}
/deep/.el-card__body {
padding: 3px 10px 5px 10px;
overflow: hidden;
}
.yhjgba {
.el-col {
padding: 4px;
}
.inquire {
width: 100%;
height: 40px;
border: 1px solid rgb(184, 217, 243);
// background-color: rebeccapurple;
}
.concent {
width: 100%;
height: 300px;
display: flex;
.left {
width: 70%;
height: 200px;
}
.right {
width: 30%;
height: 200px;
}
}
}
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-08-25 08:59:04
-->
<template>
<div class="djlx">
<div class="inquire">
<el-form :model="queryForm" ref="queryForm" label-width="100px">
<el-row>
<el-col :span="6">
<el-form-item label="开始时间" class="width100">
<el-date-picker
v-model="queryForm.kssj"
class="width100"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="结束时间" class="width100">
<el-date-picker
v-model="queryForm.kssj"
class="width100"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="区域" class="width100">
<el-select
v-model="queryForm.qy"
class="width100"
clearable
placeholder="请选择权利类型"
>
<el-option
v-for="item in dictData['A8']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5" class="btnColRight">
<el-form-item>
<el-button
type="primary"
native-type="submit"
@click="handleSearch"
>查询</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="concent">
<div class="left">
<el-table
height="187"
stripe
:data="tableList"
size="mini"
border
header-cell-class-name="table-header-gray"
>
<el-table-column
label="类型"
prop="name"
minWidth="100"
align="center" />
<el-table-column
label="数量"
prop="agent"
minWidth="120"
align="center"
/></el-table>
</div>
<div class="right">
<div ref="chart" style="width: 100%; height: 200px"></div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
export default {
components: {},
computed: {
...mapGetters(["dictData", "transfer"]),
},
data () {
return {
queryForm: {},
tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
};
},
mounted() {
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
},
methods: {
getOption() {
return {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
},
series: [
{
name: "饼图名称",
type: "pie",
radius: ["20%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: "30",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 335, name: "数据1" },
{ value: 310, name: "数据2" },
{ value: 234, name: "数据3" },
{ value: 135, name: "数据4" },
{ value: 1548, name: "数据5" },
],
},
],
};
},
handleSearch() {},
},
};
</script>
<style scoped lang="scss">
/deep/.el-card__header {
padding: 8px 10px;
}
/deep/.el-card__body {
padding: 3px 10px 5px 10px;
overflow: hidden;
}
.yhjgba {
.el-col {
padding: 4px;
}
.inquire {
width: 100%;
height: 40px;
border: 1px solid rgb(184, 217, 243);
// background-color: rebeccapurple;
}
.concent {
width: 100%;
height: 300px;
display: flex;
.left {
width: 70%;
height: 200px;
}
.right {
width: 30%;
height: 200px;
}
}
}
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-08-25 08:59:04
-->
<template>
<div class="djlx">
<div class="inquire">
<el-form :model="queryForm" ref="queryForm" label-width="100px">
<el-row>
<el-col :span="6">
<el-form-item label="开始时间" class="width100">
<el-date-picker
v-model="queryForm.kssj"
class="width100"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="结束时间" class="width100">
<el-date-picker
v-model="queryForm.kssj"
class="width100"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="区域" class="width100">
<el-select
v-model="queryForm.qy"
class="width100"
clearable
placeholder="请选择权利类型"
>
<el-option
v-for="item in dictData['A8']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5" class="btnColRight">
<el-form-item>
<el-button
type="primary"
native-type="submit"
@click="handleSearch"
>查询</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="concent">
<div class="left">
<el-table
height="187"
stripe
:data="tableList"
size="mini"
border
header-cell-class-name="table-header-gray"
>
<el-table-column
label="类型"
prop="name"
minWidth="100"
align="center" />
<el-table-column
label="数量"
prop="agent"
minWidth="120"
align="center"
/></el-table>
</div>
<div class="right">
<div ref="chart" style="width: 100%; height: 200px"></div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
export default {
components: {},
computed: {
...mapGetters(["dictData", "transfer"]),
},
data () {
return {
queryForm: {},
tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
};
},
mounted() {
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
},
methods: {
getOption() {
return {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
},
series: [
{
name: "饼图名称",
type: "pie",
radius: ["20%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: "30",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 335, name: "数据1" },
{ value: 310, name: "数据2" },
{ value: 234, name: "数据3" },
{ value: 135, name: "数据4" },
{ value: 1548, name: "数据5" },
],
},
],
};
},
handleSearch() {},
},
};
</script>
<style scoped lang="scss">
/deep/.el-card__header {
padding: 8px 10px;
}
/deep/.el-card__body {
padding: 3px 10px 5px 10px;
overflow: hidden;
}
.yhjgba {
.el-col {
padding: 4px;
}
.inquire {
width: 100%;
height: 40px;
border: 1px solid rgb(184, 217, 243);
// background-color: rebeccapurple;
}
.concent {
width: 100%;
height: 300px;
display: flex;
.left {
width: 70%;
height: 200px;
}
.right {
width: 30%;
height: 200px;
}
}
}
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-08-25 08:59:04
-->
<template>
<div class="djlx">
<div class="inquire">
<el-form :model="queryForm" ref="queryForm" label-width="100px">
<el-row>
<el-col :span="6">
<el-form-item label="开始时间" class="width100">
<el-date-picker
v-model="queryForm.kssj"
class="width100"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="结束时间" class="width100">
<el-date-picker
v-model="queryForm.kssj"
class="width100"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="区域" class="width100">
<el-select
v-model="queryForm.qy"
class="width100"
clearable
placeholder="请选择权利类型"
>
<el-option
v-for="item in dictData['A8']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5" class="btnColRight">
<el-form-item>
<el-button
type="primary"
native-type="submit"
@click="handleSearch"
>查询</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="concent">
<div class="left">
<el-table
height="187"
stripe
:data="tableList"
size="mini"
border
header-cell-class-name="table-header-gray"
>
<el-table-column
label="类型"
prop="name"
minWidth="100"
align="center" />
<el-table-column
label="数量"
prop="agent"
minWidth="120"
align="center"
/></el-table>
</div>
<div class="right">
<div ref="chart" style="width: 100%; height: 200px"></div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
export default {
components: {},
computed: {
...mapGetters(["dictData", "transfer"]),
},
data () {
return {
queryForm: {},
tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
};
},
mounted() {
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
},
methods: {
getOption() {
return {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
},
series: [
{
name: "饼图名称",
type: "pie",
radius: ["20%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: "30",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 335, name: "数据1" },
{ value: 310, name: "数据2" },
{ value: 234, name: "数据3" },
{ value: 135, name: "数据4" },
{ value: 1548, name: "数据5" },
],
},
],
};
},
handleSearch() {},
},
};
</script>
<style scoped lang="scss">
/deep/.el-card__header {
padding: 8px 10px;
}
/deep/.el-card__body {
padding: 3px 10px 5px 10px;
overflow: hidden;
}
.yhjgba {
.el-col {
padding: 4px;
}
.inquire {
width: 100%;
height: 40px;
border: 1px solid rgb(184, 217, 243);
// background-color: rebeccapurple;
}
.concent {
width: 100%;
height: 300px;
display: flex;
.left {
width: 70%;
height: 200px;
}
.right {
width: 30%;
height: 200px;
}
}
}
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-08-25 08:59:04
-->
<template>
<div class="djlx">
<div class="inquire">
<el-form :model="queryForm" ref="queryForm" label-width="100px">
<el-row>
<el-col :span="6">
<el-form-item label="开始时间" class="width100">
<el-date-picker
v-model="queryForm.kssj"
class="width100"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="结束时间" class="width100">
<el-date-picker
v-model="queryForm.kssj"
class="width100"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="区域" class="width100">
<el-select
v-model="queryForm.qy"
class="width100"
clearable
placeholder="请选择权利类型"
>
<el-option
v-for="item in dictData['A8']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5" class="btnColRight">
<el-form-item>
<el-button
type="primary"
native-type="submit"
@click="handleSearch"
>查询</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="concent">
<div class="left">
<el-table
height="187"
stripe
:data="tableList"
size="mini"
border
header-cell-class-name="table-header-gray"
>
<el-table-column
label="类型"
prop="name"
minWidth="100"
align="center" />
<el-table-column
label="数量"
prop="agent"
minWidth="120"
align="center"
/></el-table>
</div>
<div class="right">
<div ref="chart" style="width: 100%; height: 200px"></div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
export default {
components: {},
computed: {
...mapGetters(["dictData", "transfer"]),
},
data () {
return {
queryForm: {},
tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
};
},
mounted() {
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
},
methods: {
getOption() {
return {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
},
series: [
{
name: "饼图名称",
type: "pie",
radius: ["20%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: "30",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 335, name: "数据1" },
{ value: 310, name: "数据2" },
{ value: 234, name: "数据3" },
{ value: 135, name: "数据4" },
{ value: 1548, name: "数据5" },
],
},
],
};
},
handleSearch() {},
},
};
</script>
<style scoped lang="scss">
/deep/.el-card__header {
padding: 8px 10px;
}
/deep/.el-card__body {
padding: 3px 10px 5px 10px;
overflow: hidden;
}
.yhjgba {
.el-col {
padding: 4px;
}
.inquire {
width: 100%;
height: 40px;
border: 1px solid rgb(184, 217, 243);
// background-color: rebeccapurple;
}
.concent {
width: 100%;
height: 300px;
display: flex;
.left {
width: 70%;
height: 200px;
}
.right {
width: 30%;
height: 200px;
}
}
}
</style>
......@@ -4,19 +4,188 @@
* @LastEditTime: 2023-08-25 08:59:04
-->
<template>
<div class='yhjgba'>
<el-empty description="正在开发"></el-empty>
<div class="yhjgba">
<el-row :gutter="8">
<el-col :span="12">
<el-card
shadow="hover"
:body-style="{ padding: '0' }"
style="height: 270px"
>
<div slot="header" class="flexst">
<h5 class="title">根据登记类型统计分析收件</h5>
</div>
<djlx/>
</el-card>
</el-col>
<el-col :span="12">
<el-card
shadow="hover"
:body-style="{ padding: '0' }"
style="height: 270px"
>
<div slot="header" class="flexst">
<h5 class="title">根据证书种类统计分析发证情况</h5>
</div>
<zszl/>
</el-card>
</el-col>
</el-row>
<el-row :gutter="8" class="marginTop10">
<el-col :span="12">
<el-card
shadow="hover"
:body-style="{ padding: '0' }"
style="height: 270px"
>
<div slot="header" class="flexst">
<h5 class="title">根据收件人统计分析收件</h5>
</div>
<djlx/>
</el-card>
</el-col>
<el-col :span="12">
<el-card
shadow="hover"
:body-style="{ padding: '0' }"
style="height: 270px"
>
<div slot="header" class="flexst">
<h5 class="title">收件日统计</h5>
</div>
<ul class="workbench flexst"></ul>
</el-card>
</el-col>
</el-row>
<el-row :gutter="8" class="marginTop10">
<el-col :span="12">
<el-card
shadow="hover"
:body-style="{ padding: '0' }"
style="height: 270px"
>
<div slot="header" class="flexst">
<h5 class="title">根据区域统计分析收件</h5>
</div>
<qytj/>
</el-card>
</el-col>
<el-col :span="12">
<el-card
shadow="hover"
:body-style="{ padding: '0' }"
style="height: 270px"
>
<div slot="header" class="flexst">
<h5 class="title">收件月统计</h5>
</div>
<ul class="workbench flexst"></ul>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import djlx from "./components/djlx.vue";
import zszl from "./components/zszl.vue";
import qytj from "./components/qytj.vue";
export default {
components: {},
data () {
export default {
components: {djlx,zszl,qytj},
computed: {
...mapGetters(["dictData", "transfer"]),
},
data() {
return {
queryForm: {},
tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
};
},
mounted() {
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
},
methods: {
getOption() {
return {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
},
series: [
{
name: "饼图名称",
type: "pie",
radius: ["20%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: "30",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 335, name: "数据1" },
{ value: 310, name: "数据2" },
{ value: 234, name: "数据3" },
{ value: 135, name: "数据4" },
{ value: 1548, name: "数据5" },
],
},
],
};
},
handleSearch() {},
},
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
/deep/.el-card__header {
padding: 8px 10px;
}
/deep/.el-card__body {
padding: 3px 10px 5px 10px;
overflow: hidden;
}
.yhjgba {
.el-col {
padding: 4px;
}
.inquire {
width: 100%;
height: 40px;
border: 1px solid rgb(184, 217, 243);
// background-color: rebeccapurple;
}
.concent {
width: 100%;
height: 300px;
display: flex;
.left {
width: 70%;
height: 200px;
}
</script>
<style scoped lang='scss'>
.right {
width: 30%;
height: 200px;
}
}
}
</style>
......
......@@ -10,7 +10,8 @@
v-show="!isLoading"
ref="processCanvas"
class="process-canvas"
style="height: 280px" />
style="height: 280px"
/>
<!-- 自定义箭头样式，用于成功状态下流程连线箭头 -->
<defs ref="customSuccessDefs">
<marker
......@@ -20,7 +21,8 @@
ref-y="10"
marker-width="10"
marker-height="10"
orient="auto">
orient="auto"
>
<path
class="success-arrow"
d="M 1 5 L 11 10 L 1 15 Z"
......@@ -28,7 +30,8 @@
stroke-width: 1px;
stroke-linecap: round;
stroke-dasharray: 10000, 1;
" />
"
/>
</marker>
<marker
id="conditional-flow-marker-white-success"
......@@ -37,7 +40,8 @@
ref-y="10"
marker-width="10"
marker-height="10"
orient="auto">
orient="auto"
>
<path
class="success-conditional"
d="M 0 10 L 8 6 L 16 10 L 8 14 Z"
......@@ -45,7 +49,8 @@
stroke-width: 1px;
stroke-linecap: round;
stroke-dasharray: 10000, 1;
" />
"
/>
</marker>
</defs>
<!-- 自定义箭头样式，用于失败状态下流程连线箭头 -->
......@@ -57,7 +62,8 @@
ref-y="10"
marker-width="10"
marker-height="10"
orient="auto">
orient="auto"
>
<path
class="fail-arrow"
d="M 1 5 L 11 10 L 1 15 Z"
......@@ -65,7 +71,8 @@
stroke-width: 1px;
stroke-linecap: round;
stroke-dasharray: 10000, 1;
" />
"
/>
</marker>
<marker
id="conditional-flow-marker-white-fail"
......@@ -74,7 +81,8 @@
ref-y="10"
marker-width="10"
marker-height="10"
orient="auto">
orient="auto"
>
<path
class="fail-conditional"
d="M 0 10 L 8 6 L 16 10 L 8 14 Z"
......@@ -82,7 +90,8 @@
stroke-width: 1px;
stroke-linecap: round;
stroke-dasharray: 10000, 1;
" />
"
/>
</marker>
</defs>
......@@ -95,7 +104,8 @@
:plain="true"
:disabled="defaultZoom <= 0.3"
icon="el-icon-zoom-out"
@click="processZoomOut()" />
@click="processZoomOut()"
/>
<el-button size="medium" type="default" style="width: 90px">{{
Math.floor(this.defaultZoom * 10 * 10) + "%"
}}</el-button>
......@@ -105,12 +115,14 @@
:plain="true"
:disabled="defaultZoom >= 3.9"
icon="el-icon-zoom-in"
@click="processZoomIn()" />
@click="processZoomIn()"
/>
<el-button
size="medium"
type="default"
icon="el-icon-c-scale-to-original"
@click="processReZoom()" />
@click="processReZoom()"
/>
<slot />
</el-button-group>
</el-row>
......@@ -123,55 +135,51 @@
v-for="item in selectOptions"
:key="item.value"
:label="item.label"
:value="item.value">
:value="item.value"
>
</el-option>
</el-select>
<div class="cutline">
<p class="cutlines">图例</p>
<div v-for="item in cutlinelist" :key="item.value" class="concent" :style="{ backgroundColor: item.backgroundColor,borderColor:item.color }">
{{item.value}}
</div>
</div>
<el-table
height="190"
:data="taskCommentList"
size="mini"
border
header-cell-class-name="table-header-gray">
header-cell-class-name="table-header-gray"
>
<el-table-column
label="序号"
header-align="center"
align="center"
type="index"
width="55px" />
<el-table-column label="流程状态" header-align="center" align="center">
<template slot-scope="scope">
<div v-if="scope.row.endTime">已完结</div>
<div v-else>正在办理</div>
</template>
</el-table-column>
<el-table-column
label="环节状态"
prop="name"
minWidth="100"
align="center" />
<el-table-column
label="办理人"
prop="agent"
minWidth="120"
align="center" />
width="55px"
/>
<el-table-column
label="转入时间"
prop="createTime"
:formatter="formatDate"
width="160"
align="center" />
align="center"
/>
<el-table-column
label="认领时间"
prop="claimTime"
:formatter="formatDate"
width="160"
align="center" />
align="center"
/>
<el-table-column
label="转出时间"
prop="endTime"
:formatter="formatDate"
width="160"
align="center" />
align="center"
/>
<el-table-column label="操作方式" prop="controls" align="center" />
<el-table-column label="意见" prop="idea" align="center" />
</el-table>
......@@ -179,17 +187,17 @@
</div>
</template>
<script>
import "@/styles/package/theme/index.scss";
import BpmnViewer from "bpmn-js/lib/Viewer";
import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
export default {
import "@/styles/package/theme/index.scss";
import BpmnViewer from "bpmn-js/lib/Viewer";
import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
export default {
props: {
formData: {
type: Object,
default: {},
},
},
data () {
data() {
return {
dlgTitle: undefined,
defaultZoom: 1,
......@@ -208,9 +216,36 @@
// 下拉
selectValue: "",
selectOptions: [],
cutlinelist:[
{
value: "完成节点",
color: "#4eb819",
backgroundColor :"rgba(78, 184, 25,0.2)"
},
{
value: "当前节点",
color: "#409EFF",
backgroundColor :"rgba(64, 158, 255,0.2)"
},
{
value: "挂起节点",
color: "#E6A23C",
backgroundColor :"rgba(230, 162, 60,0.2)"
},
{
value: "阻塞节点",
color: "#F56C6C",
backgroundColor :"rgb(245, 108, 108,0.2)"
},
{
value: "未激活节点",
color: "#000000",
backgroundColor :"none",
}
],
};
},
created () {
created() {
this.$nextTick(() => {
// 获取流程记录
this.getCommentList();
......@@ -218,7 +253,7 @@
this.importXML(this.formData.xml);
});
},
destroyed () {
destroyed() {
this.clearViewer();
},
methods: {
......@@ -228,7 +263,7 @@
* @param {*} column
* @author: renchao
*/
formatDate (row, column) {
formatDate(row, column) {
let data = row[column.property];
if (data == null) {
return null;
......@@ -252,7 +287,7 @@
* @description: processReZoom
* @author: renchao
*/
processReZoom () {
processReZoom() {
this.defaultZoom = 1;
this.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
},
......@@ -261,7 +296,7 @@
* @param {*} zoomStep
* @author: renchao
*/
processZoomIn (zoomStep = 0.1) {
processZoomIn(zoomStep = 0.1) {
const newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100;
if (newZoom > 4) {
throw new Error(
......@@ -276,7 +311,7 @@
* @param {*} zoomStep
* @author: renchao
*/
processZoomOut (zoomStep = 0.1) {
processZoomOut(zoomStep = 0.1) {
const newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100;
if (newZoom < 0.2) {
throw new Error(
......@@ -291,7 +326,7 @@
* @param {*} type
* @author: renchao
*/
getOperationTagType (type) {
getOperationTagType(type) {
return "success";
},
// 流程图预览清空
......@@ -300,7 +335,7 @@
* @param {*} e
* @author: renchao
*/
clearViewer (a) {
clearViewer(a) {
if (this.$refs.processCanvas) {
this.$refs.processCanvas.innerHTML = "";
}
......@@ -314,7 +349,7 @@
* @description: 添加自定义箭头
* @author: renchao
*/
addCustomDefs () {
addCustomDefs() {
const canvas = this.bpmnViewer.get("canvas");
const svg = canvas._svg;
const customSuccessDefs = this.$refs.customSuccessDefs;
......@@ -328,7 +363,7 @@
* @param {*} element
* @author: renchao
*/
onSelectElement (element) {
onSelectElement(element) {
this.selectTaskId = undefined;
this.dlgTitle = undefined;
let allfinishedTaskSet = [
......@@ -358,7 +393,7 @@
* @param {*} val
* @author: renchao
*/
handleSelect (val) {
handleSelect(val) {
this.taskCommentList = (this.taskList || []).filter((item) => {
return item.taskDefinitionKey === val;
});
......@@ -372,7 +407,7 @@
* @param {*} xml
* @author: renchao
*/
async importXML (xml) {
async importXML(xml) {
let xmlData = this.$x2js.xml2js(xml).definitions.process;
this.selectOptions = xmlData.userTask.map((item) => {
return { value: item._id, label: item._name };
......@@ -427,7 +462,7 @@
* @description: 获取流程记录
* @author: renchao
*/
getCommentList () {
getCommentList() {
this.formData.allCommentList.forEach(async (item, index) => {
// item.comments.forEach(element => {
// if(element.type=="COMPLETE"){
......@@ -488,7 +523,7 @@
// this.taskList =this.formData.allCommentList;
// 处理数据之后赋值
this.taskCommentList = this.taskList;
this.taskCommentList=this.taskCommentList.sort(this.sortDownDate)
this.taskCommentList = this.taskCommentList.sort(this.sortDownDate);
},
/**
* 时间排序函数
......@@ -507,7 +542,7 @@
* @param {*} processNodeInfo
* @author: renchao
*/
setProcessStatus (processNodeInfo) {
setProcessStatus(processNodeInfo) {
this.processNodeInfo = processNodeInfo;
if (
this.isLoading ||
......@@ -556,10 +591,10 @@
}
},
},
};
};
</script>
<style scoped lang="scss">
.information-list {
.information-list {
height: 220px;
margin-top: 10px;
......@@ -567,12 +602,37 @@
font-size: 16px;
line-height: 24px;
}
}
/deep/.bjs-powered-by {
}
/deep/.bjs-powered-by {
display: none;
}
// /deep/.information-list {
// height: 170px;
// overflow: visible;
// }
.cutline {
float: right;
width: 30%;
height: 30px;
display: flex;
margin-right: 30px;
justify-content: space-between;
.cutlines{
line-height: 30px;
font-weight: 600;
margin-right: 50px;
}
// /deep/.information-list {
// height: 170px;
// overflow: visible;
// }
.concent{
line-height: 30px;
line-height: 14px;
text-align: center;
align-items: center;
margin: auto;
padding: 3px;
border-radius: 4px;
border:1px solid #fff;
}
}
</style>
......