Skip to content

bdc / bdcdj-web

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

Merge branch 'dev' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web into dev

2 parents ac61b2de e95e2c21
Inline Side-by-side
Showing 9 changed files with 1143 additions and 460 deletions
......@@ -7,41 +7,32 @@
<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-row :gutter="20">
<el-col :span="12">
<el-form-item label="收件时间" class="width100">
<el-date-picker
v-model="queryForm.kssj"
v-model="queryForm.sj"
type="daterange"
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>
range-separator="至"
:clearable="false"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="7">
<el-form-item label="区域" class="width100">
<el-select
v-model="queryForm.qy"
class="width100"
clearable
placeholder="请选择权利类型"
placeholder="请选择区域"
>
<el-option
v-for="item in dictData['A8']"
v-for="item in dictData['A20']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
......@@ -50,7 +41,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="5" class="btnColRight">
<el-col :span="4" class="btnColRight">
<el-form-item>
<el-button
type="primary"
......@@ -74,13 +65,13 @@
header-cell-class-name="table-header-gray"
>
<el-table-column
label="类型"
label="登记类型"
prop="name"
minWidth="100"
align="center" />
<el-table-column
label="数量"
prop="agent"
label="收件数量"
prop="value"
minWidth="120"
align="center"
/></el-table>
......@@ -94,15 +85,24 @@
<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
export default {
export default {
components: {},
computed: {
...mapGetters(["dictData", "transfer"]),
},
data () {
data() {
return {
queryForm: {},
tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
tableList: [
{ name: "首次登记", value: "2" },
{ name: "变更登记", value: "12" },
{ name: "抵押登记", value: "23" },
{ name: "转移登记", value: "33" },
{ name: "预告登记", value: "13" },
{ name: "注销登记", value: "3" },
{ name: "查封登记", value: "4" },
{ name: "其他登记", value: "26" },
],
};
},
mounted() {
......@@ -114,44 +114,58 @@ import { mapGetters } from "vuex";
methods: {
getOption() {
return {
title: {
text: "统计分析图",
x: "center",
textStyle: {
//主标题文本设置
fontSize: 12, //大小
},
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
formatter: "{a} <br/>{b} : {c}个 ({d}%)",
},
grid: {
top: "4%",
left: "2%",
right: "3%",
bottom: "20%",
containLabel: true,
},
series: [
{
name: "饼图名称",
name: "统计分析图",
type: "pie",
radius: ["20%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
radius: "70%",
center: ["50%", "100%"],
data: this.tableList,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
label: {
show: true,
fontSize: "30",
fontWeight: "bold",
normal: {
formatter: "{c}/个",
position: "inside", //让文字显示在饼状图里面
textStyle: {
fontSize: 10,
color: "#fff",
},
},
labelLine: {
show: false,
},
data: [
{ value: 335, name: "数据1" },
{ value: 310, name: "数据2" },
{ value: 234, name: "数据3" },
{ value: 135, name: "数据4" },
{ value: 1548, name: "数据5" },
],
center: ["50%", "50%"], // 这个属性调整图像的位置！！！！！
},
],
};
},
handleSearch() {},
handleSearch() {
console.log(" this.queryForm", this.queryForm);
},
},
};
</script>
......@@ -171,20 +185,30 @@ import { mapGetters } from "vuex";
.inquire {
width: 100%;
height: 40px;
border: 1px solid rgb(184, 217, 243);
// background-color: rebeccapurple;
background-color: #f4f7fd;
/deep/ .el-form {
.el-form-item--small.el-form-item {
margin-bottom: 5px;
}
}
}
.concent {
width: 100%;
height: 300px;
display: flex;
//调整表头高度
/deep/.el-table__header {
height: 22px!important;
background-color: salmon;
}
.left {
width: 70%;
height: 200px;
}
.right {
width: 30%;
height: 200px;
height: 300px;
}
}
}
......
......@@ -7,50 +7,23 @@
<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-row :gutter="20">
<el-col :span="12">
<el-form-item label="收件时间" class="width100">
<el-date-picker
v-model="queryForm.kssj"
v-model="queryForm.sj"
type="daterange"
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="请选择权利类型"
range-separator="至"
:clearable="false"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
<el-option
v-for="item in dictData['A8']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
</el-option>
</el-select>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="5" class="btnColRight">
<el-col :span="4" class="btnColRight">
<el-form-item>
<el-button
type="primary"
......@@ -74,13 +47,13 @@
header-cell-class-name="table-header-gray"
>
<el-table-column
label="类型"
label="区域"
prop="name"
minWidth="100"
align="center" />
<el-table-column
label="数量"
prop="agent"
label="收件数量"
prop="value"
minWidth="120"
align="center"
/></el-table>
......@@ -93,16 +66,21 @@
</template>
<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
export default {
export default {
components: {},
computed: {
...mapGetters(["dictData", "transfer"]),
},
data () {
data() {
return {
queryForm: {},
tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
tableList: [
{ name: "首次登记", value: "2" },
{ name: "变更登记", value: "12" },
{ name: "抵押登记", value: "23" },
{ name: "转移登记", value: "33" },
{ name: "预告登记", value: "13" },
{ name: "注销登记", value: "3" },
{ name: "查封登记", value: "4" },
{ name: "其他登记", value: "26" },
],
};
},
mounted() {
......@@ -114,44 +92,58 @@ import { mapGetters } from "vuex";
methods: {
getOption() {
return {
title: {
text: "统计分析图",
x: "center",
textStyle: {
//主标题文本设置
fontSize: 12, //大小
},
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
formatter: "{a} <br/>{b} : {c}个 ({d}%)",
},
grid: {
top: "4%",
left: "2%",
right: "3%",
bottom: "20%",
containLabel: true,
},
series: [
{
name: "饼图名称",
name: "统计分析图",
type: "pie",
radius: ["20%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
radius: "70%",
center: ["50%", "100%"],
data: this.tableList,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
label: {
show: true,
fontSize: "30",
fontWeight: "bold",
normal: {
formatter: "{c}/个",
position: "inside", //让文字显示在饼状图里面
textStyle: {
fontSize: 10,
color: "#fff",
},
},
labelLine: {
show: false,
},
data: [
{ value: 335, name: "数据1" },
{ value: 310, name: "数据2" },
{ value: 234, name: "数据3" },
{ value: 135, name: "数据4" },
{ value: 1548, name: "数据5" },
],
center: ["50%", "50%"], // 这个属性调整图像的位置！！！！！
},
],
};
},
handleSearch() {},
handleSearch() {
console.log(" this.queryForm", this.queryForm);
},
},
};
</script>
......@@ -171,20 +163,30 @@ import { mapGetters } from "vuex";
.inquire {
width: 100%;
height: 40px;
border: 1px solid rgb(184, 217, 243);
// background-color: rebeccapurple;
background-color: #f4f7fd;
/deep/ .el-form {
.el-form-item--small.el-form-item {
margin-bottom: 5px;
}
}
}
.concent {
width: 100%;
height: 300px;
display: flex;
//调整表头高度
/deep/.el-table__header {
height: 22px!important;
background-color: salmon;
}
.left {
width: 70%;
height: 200px;
}
.right {
width: 30%;
height: 200px;
height: 300px;
}
}
}
......
......@@ -7,41 +7,32 @@
<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-row :gutter="20">
<el-col :span="12">
<el-form-item label="收件时间" class="width100">
<el-date-picker
v-model="queryForm.kssj"
v-model="queryForm.sj"
type="daterange"
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>
range-separator="至"
:clearable="false"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="7">
<el-form-item label="区域" class="width100">
<el-select
v-model="queryForm.qy"
class="width100"
clearable
placeholder="请选择权利类型"
placeholder="请选择区域"
>
<el-option
v-for="item in dictData['A8']"
v-for="item in dictData['A20']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
......@@ -50,7 +41,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="5" class="btnColRight">
<el-col :span="4" class="btnColRight">
<el-form-item>
<el-button
type="primary"
......@@ -74,13 +65,13 @@
header-cell-class-name="table-header-gray"
>
<el-table-column
label="类型"
label="收件人"
prop="name"
minWidth="100"
align="center" />
<el-table-column
label="数量"
prop="agent"
label="收件数量"
prop="value"
minWidth="120"
align="center"
/></el-table>
......@@ -94,15 +85,24 @@
<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
export default {
export default {
components: {},
computed: {
...mapGetters(["dictData", "transfer"]),
},
data () {
data() {
return {
queryForm: {},
tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
tableList: [
{ name: "首次登记", value: "2" },
{ name: "变更登记", value: "12" },
{ name: "抵押登记", value: "23" },
{ name: "转移登记", value: "33" },
{ name: "预告登记", value: "13" },
{ name: "注销登记", value: "3" },
{ name: "查封登记", value: "4" },
{ name: "其他登记", value: "26" },
],
};
},
mounted() {
......@@ -114,44 +114,58 @@ import { mapGetters } from "vuex";
methods: {
getOption() {
return {
title: {
text: "统计分析图",
x: "center",
textStyle: {
//主标题文本设置
fontSize: 12, //大小
},
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
formatter: "{a} <br/>{b} : {c}个 ({d}%)",
},
grid: {
top: "4%",
left: "2%",
right: "3%",
bottom: "20%",
containLabel: true,
},
series: [
{
name: "饼图名称",
name: "统计分析图",
type: "pie",
radius: ["20%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
radius: "70%",
center: ["50%", "100%"],
data: this.tableList,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
label: {
show: true,
fontSize: "30",
fontWeight: "bold",
normal: {
formatter: "{c}/个",
position: "inside", //让文字显示在饼状图里面
textStyle: {
fontSize: 10,
color: "#fff",
},
},
labelLine: {
show: false,
},
data: [
{ value: 335, name: "数据1" },
{ value: 310, name: "数据2" },
{ value: 234, name: "数据3" },
{ value: 135, name: "数据4" },
{ value: 1548, name: "数据5" },
],
center: ["50%", "50%"], // 这个属性调整图像的位置！！！！！
},
],
};
},
handleSearch() {},
handleSearch() {
console.log(" this.queryForm", this.queryForm);
},
},
};
</script>
......@@ -171,20 +185,30 @@ import { mapGetters } from "vuex";
.inquire {
width: 100%;
height: 40px;
border: 1px solid rgb(184, 217, 243);
// background-color: rebeccapurple;
background-color: #f4f7fd;
/deep/ .el-form {
.el-form-item--small.el-form-item {
margin-bottom: 5px;
}
}
}
.concent {
width: 100%;
height: 300px;
display: flex;
//调整表头高度
/deep/.el-table__header {
height: 22px!important;
background-color: salmon;
}
.left {
width: 70%;
height: 200px;
}
.right {
width: 30%;
height: 200px;
height: 300px;
}
}
}
......
......@@ -9,27 +9,14 @@
<el-form :model="queryForm" ref="queryForm" label-width="100px">
<el-row>
<el-col :span="6">
<el-form-item label="开始时间" class="width100">
<el-form-item label="统计时间" class="width100">
<el-date-picker
v-model="queryForm.kssj"
v-model="queryForm.sj"
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>
type="month"
placeholder="选择月"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
......@@ -41,7 +28,7 @@
placeholder="请选择权利类型"
>
<el-option
v-for="item in dictData['A8']"
v-for="item in dictData['A20']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
......@@ -64,45 +51,36 @@
</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 {
export default {
components: {},
computed: {
...mapGetters(["dictData", "transfer"]),
},
data () {
data() {
return {
queryForm: {},
tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
datas: [12, 23, 15, 28, 37, 11, 13, 32, 34, 56, 12, 15],
datatime: [
"1日",
"2日",
"4日",
"5日",
"7日",
"10日",
"14日",
"15日",
"17日",
"19日",
"20日",
"21日",
],
};
},
mounted() {
......@@ -114,38 +92,60 @@ import { mapGetters } from "vuex";
methods: {
getOption() {
return {
title: {
text: "2023年11月收件情况 ", // 主标题名称
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
textStyle: {
//主标题文本设置
fontSize: 18, //大小
},
series: [
{
name: "饼图名称",
type: "pie",
radius: ["20%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
itemGap: 3, //主副标题间距
x: "center", //主副标题的水平位置
y: "top", //主副标题的垂直位置
},
legend: {
data: ["转诊量"],
top: "6%",
right: "4%",
textStyle: {
color: "#747474",
},
emphasis: {
},
tooltip: {
// trigger: "item", //默认效果
//柱状图加阴影
trigger: "axis",
axisPointer: {
type: "shadow",
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" },
],
grid: {
top: "20%",
left: "2%",
right: "3%",
bottom: "20%",
containLabel: true,
},
xAxis: {
type: "category",
data: this.datatime,
},
yAxis: {
type: "value",
},
series: [
{
data: this.datas,
type: "bar",
barWidth: 15,
showBackground: true,
backgroundStyle: {
color: "rgba(220, 220, 220, 0.8)",
},
},
],
};
......@@ -178,14 +178,6 @@ import { mapGetters } from "vuex";
width: 100%;
height: 300px;
display: flex;
.left {
width: 70%;
height: 200px;
}
.right {
width: 30%;
height: 200px;
}
}
}
</style>
......
......@@ -9,27 +9,9 @@
<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 label="统计年份" class="width100">
<el-date-picker class="width100" v-model="queryForm.sj" type="year" placeholder="选择年">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
......@@ -41,7 +23,7 @@
placeholder="请选择权利类型"
>
<el-option
v-for="item in dictData['A8']"
v-for="item in dictData['A20']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
......@@ -50,7 +32,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="5" class="btnColRight">
<el-col :span="12" class="btnColRight">
<el-form-item>
<el-button
type="primary"
......@@ -64,45 +46,21 @@
</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 {
export default {
components: {},
computed: {
...mapGetters(["dictData", "transfer"]),
},
data () {
data() {
return {
queryForm: {},
tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
};
},
mounted() {
......@@ -114,38 +72,70 @@ import { mapGetters } from "vuex";
methods: {
getOption() {
return {
xAxis: {
type: "category",
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
},
yAxis: {
type: "value",
},
title: {
text: "2023年收件情况 ", // 主标题名称
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
textStyle: {
//主标题文本设置
fontSize: 18, //大小
},
series: [
{
name: "饼图名称",
type: "pie",
radius: ["20%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
itemGap: 3, //主副标题间距
x: "center", //主副标题的水平位置
y: "top", //主副标题的垂直位置
},
legend: {
data: ["转诊量"],
top: "6%",
right: "4%",
textStyle: {
color: "#747474",
},
emphasis: {
},
tooltip: {
// trigger: "item", //默认效果
//柱状图加阴影
trigger: "axis",
axisPointer: {
type: "shadow",
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" },
],
grid: {
top: "20%",
left: "2%",
right: "3%",
bottom: "20%",
containLabel: true,
},
series: [
{
name: "转诊量",
data: [38, 42, 50, 157, 40, 45, 60, 140, 36, 47, 54, 143],
barWidth: 40,
type: "bar",
},
],
};
......@@ -178,14 +168,6 @@ import { mapGetters } from "vuex";
width: 100%;
height: 300px;
display: flex;
.left {
width: 70%;
height: 200px;
}
.right {
width: 30%;
height: 200px;
}
}
}
</style>
......
......@@ -7,41 +7,32 @@
<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-row :gutter="20">
<el-col :span="12">
<el-form-item label="缮证日期" class="width100">
<el-date-picker
v-model="queryForm.kssj"
v-model="queryForm.sj"
type="daterange"
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>
range-separator="至"
:clearable="false"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :span="7">
<el-form-item label="区域" class="width100">
<el-select
v-model="queryForm.qy"
class="width100"
clearable
placeholder="请选择权利类型"
placeholder="请选择区域"
>
<el-option
v-for="item in dictData['A8']"
v-for="item in dictData['A20']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
......@@ -50,7 +41,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="5" class="btnColRight">
<el-col :span="4" class="btnColRight">
<el-form-item>
<el-button
type="primary"
......@@ -74,13 +65,13 @@
header-cell-class-name="table-header-gray"
>
<el-table-column
label="类型"
label="证书种类"
prop="name"
minWidth="100"
align="center" />
<el-table-column
label="数量"
prop="agent"
label="收件数量"
prop="value"
minWidth="120"
align="center"
/></el-table>
......@@ -94,15 +85,24 @@
<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
export default {
export default {
components: {},
computed: {
...mapGetters(["dictData", "transfer"]),
},
data () {
data() {
return {
queryForm: {},
tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
tableList: [
{ name: "首次登记", value: "2" },
{ name: "变更登记", value: "12" },
{ name: "抵押登记", value: "23" },
{ name: "转移登记", value: "33" },
{ name: "预告登记", value: "13" },
{ name: "注销登记", value: "3" },
{ name: "查封登记", value: "4" },
{ name: "其他登记", value: "26" },
],
};
},
mounted() {
......@@ -114,44 +114,58 @@ import { mapGetters } from "vuex";
methods: {
getOption() {
return {
title: {
text: "统计分析图",
x: "center",
textStyle: {
//主标题文本设置
fontSize: 12, //大小
},
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
formatter: "{a} <br/>{b} : {c}个 ({d}%)",
},
grid: {
top: "4%",
left: "2%",
right: "3%",
bottom: "20%",
containLabel: true,
},
series: [
{
name: "饼图名称",
name: "统计分析图",
type: "pie",
radius: ["20%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
radius: "70%",
center: ["50%", "100%"],
data: this.tableList,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
label: {
show: true,
fontSize: "30",
fontWeight: "bold",
normal: {
formatter: "{c}/个",
position: "inside", //让文字显示在饼状图里面
textStyle: {
fontSize: 10,
color: "#fff",
},
},
labelLine: {
show: false,
},
data: [
{ value: 335, name: "数据1" },
{ value: 310, name: "数据2" },
{ value: 234, name: "数据3" },
{ value: 135, name: "数据4" },
{ value: 1548, name: "数据5" },
],
center: ["50%", "50%"], // 这个属性调整图像的位置！！！！！
},
],
};
},
handleSearch() {},
handleSearch() {
console.log(" this.queryForm", this.queryForm);
},
},
};
</script>
......@@ -171,20 +185,30 @@ import { mapGetters } from "vuex";
.inquire {
width: 100%;
height: 40px;
border: 1px solid rgb(184, 217, 243);
// background-color: rebeccapurple;
background-color: #f4f7fd;
/deep/ .el-form {
.el-form-item--small.el-form-item {
margin-bottom: 5px;
}
}
}
.concent {
width: 100%;
height: 300px;
display: flex;
//调整表头高度
/deep/.el-table__header {
height: 22px!important;
background-color: salmon;
}
.left {
width: 70%;
height: 200px;
}
.right {
width: 30%;
height: 200px;
height: 300px;
}
}
}
......
......@@ -10,7 +10,7 @@
<el-card
shadow="hover"
:body-style="{ padding: '0' }"
style="height: 270px"
style="height: 260px"
>
<div slot="header" class="flexst">
<h5 class="title">根据登记类型统计分析收件</h5>
......@@ -22,7 +22,7 @@
<el-card
shadow="hover"
:body-style="{ padding: '0' }"
style="height: 270px"
style="height: 260px"
>
<div slot="header" class="flexst">
<h5 class="title">根据证书种类统计分析发证情况</h5>
......@@ -36,12 +36,12 @@
<el-card
shadow="hover"
:body-style="{ padding: '0' }"
style="height: 270px"
style="height: 260px"
>
<div slot="header" class="flexst">
<h5 class="title">根据收件人统计分析收件</h5>
</div>
<djlx/>
<psjr/>
</el-card>
</el-col>
......@@ -49,12 +49,12 @@
<el-card
shadow="hover"
:body-style="{ padding: '0' }"
style="height: 270px"
style="height: 260px"
>
<div slot="header" class="flexst">
<h5 class="title">收件日统计</h5>
</div>
<ul class="workbench flexst"></ul>
<sjri/>
</el-card>
</el-col>
</el-row>
......@@ -63,7 +63,7 @@
<el-card
shadow="hover"
:body-style="{ padding: '0' }"
style="height: 270px"
style="height: 260px"
>
<div slot="header" class="flexst">
<h5 class="title">根据区域统计分析收件</h5>
......@@ -75,12 +75,12 @@
<el-card
shadow="hover"
:body-style="{ padding: '0' }"
style="height: 270px"
style="height: 260px"
>
<div slot="header" class="flexst">
<h5 class="title">收件月统计</h5>
</div>
<ul class="workbench flexst"></ul>
<sjyue/>
</el-card>
</el-col>
</el-row>
......@@ -92,9 +92,12 @@ import { mapGetters } from "vuex";
import djlx from "./components/djlx.vue";
import zszl from "./components/zszl.vue";
import qytj from "./components/qytj.vue";
import sjri from "./components/sjri.vue";
import sjyue from "./components/sjyue.vue";
import psjr from "./components/sjr.vue";
export default {
components: {djlx,zszl,qytj},
components: {djlx,zszl,qytj,sjri,sjyue,psjr},
computed: {
...mapGetters(["dictData", "transfer"]),
},
......@@ -105,48 +108,13 @@ export default {
};
},
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" },
],
},
],
};
},
......
......@@ -4,19 +4,354 @@
* @LastEditTime: 2023-08-25 08:59:04
-->
<template>
<div class='yhjgba'>
<el-empty description="正在开发"></el-empty>
<div class="tjltj">
<div class="inquire">
<el-form :model="queryForm" ref="queryForm" label-width="100px">
<el-row>
<el-col :span="19">
<div class="rowAc">
<div
v-for="(item, index) in dateQuickSelection"
:key="index"
class="rowAc dateQuickItem"
@click="chooseDateQuick(index)"
>
{{ item.name }}
</div>
<el-date-picker
v-model="dateRange"
type="daterange"
value-format="yyyy-MM-dd"
end-placeholder="结束日期"
start-placeholder="开始日期"
:clearable="false"
range-separator="-"
class="dataRangePicker"
@change="chooseDateRange"
></el-date-picker>
</div>
</el-col>
<el-col :span="5" class="btnColRight">
<el-form-item>
<el-button
type="primary"
native-type="submit"
@click="handleSearch"
>查询</el-button
>
<el-button type="primary" native-type="submit" @click="derive"
>导出</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div ref="chart" style="width: 100%; height: 92%"></div>
</div>
</template>
<script>
export default {
import * as echarts from "echarts";
export default {
components: {},
data () {
data() {
return {
dateQuickSelection: [
// 日期快捷选择列表
{ code: "1", name: "今日" },
{ code: "2", name: "昨日" },
{ code: "3", name: "本周" },
{ code: "4", name: "上周" },
{ code: "5", name: "本月" },
{ code: "6", name: "上月" },
{ code: "7", name: "今年" },
{ code: "8", name: "去年" },
],
chooseIndex: 0, // 日期快捷选择项索引
dateRange: [], // 自定义列表 - 日期范围
queryForm: {},
data1: [12, 10, 15, 12, 15, 19, 15],
data2: [1, 2, 2, 3, 2, 3, 2],
data3: [],
xAxisData: [
"赵龙龙",
"刘龙龙",
"田龙龙",
"任龙龙",
"孙龙龙",
"李龙龙",
"周龙龙",
],
};
},
mounted() {
this.setdata();
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
this.chooseDateQuick(0);
},
methods: {
setdata() {
for (let i = 0; i < this.data1.length; i++) {
let sum = (this.data2[i] / this.data1[i]) * 100;
this.data3.push(Number(sum).toFixed(0));
}
},
// 导出
derive() {},
// 查询
handleSearch() {
console.log("dateRange", this.dateRange);
},
getOption() {
return {
title: {
text: "收件与超时统计情况 ", // 主标题名称
textStyle: {
//主标题文本设置
fontSize: 26, //大小
},
itemGap: 3, //主副标题间距
x: "center", //主副标题的水平位置
y: "top", //主副标题的垂直位置
},
tooltip: {
trigger: "item",
textStyle: {
fontSize: 14,
lineHeight: 22,
},
// 如果需要自定义 tooltip样式，需要使用formatter
formatter: (params) => {
console.log("paramsssssssssssssssssss", params);
return `<div font-size: 14px;line-height: 24px>
${params.seriesName}
<br>
<span font-size: 16px; font-weight: 600;"> ${params.name}: ${
Number(params.value).toFixed(2) + "%"
} </span>
</div>`;
},
},
legend: {
data: ["办件数", "超时数", "超时时间"],
bottom: "3%",
itemWidth: 20,
itemHeight: 20,
//文字样式
textStyle: {
fontSize: 17, //设置文字大小
},
},
grid: [{ right: "3%", top: "10%", bottom: "15%", left: "3%" }],
color: ["#94ae0a", "#115fa6", "#a61120"],
xAxis: {
data: this.xAxisData,
axisLabel: {
// 轴文字
fontSize: 18,
},
},
yAxis: {
axisLabel: {
// 轴文字
fontSize: 18,
},
},
series: [
{
name: "办件数",
type: "bar",
data: this.data1,
label: {
normal: {
show: true,
fontSize: 13,
position: "top",
},
},
},
{
name: "超时数",
type: "bar",
data: this.data2,
label: {
normal: {
show: true,
fontSize: 13,
position: "top",
},
},
},
{
name: "超时时间",
type: "bar",
data: this.data3,
label: {
normal: {
show: true,
fontSize: 13,
position: "top",
},
},
},
],
};
},
// 日期快捷选择事件
chooseDateQuick(index) {
this.chooseIndex = index;
var tempCode = this.dateQuickSelection.find(
(ele) => this.chooseIndex === Number(ele.code) - 1
).code;
var tempDate = new Date();
var year = tempDate.getFullYear();
var month = tempDate.getMonth();
var day = tempDate.getDate();
var week = tempDate.getDay();
this.dateRange = [];
if (tempCode === "1") {
// 今日
this.dateRange.push(
this.formatDate(tempDate),
this.formatDate(tempDate)
);
} else if (tempCode === "2") {
// 昨日
this.dateRange.push(
this.jumpNumDay(tempDate, -1, "-"),
this.jumpNumDay(tempDate, -1, "-")
);
} else if (tempCode === "3") {
// 本周
this.dateRange.push(
this.formatDate(new Date(year, month, day - week + 1)),
this.formatDate(tempDate)
);
} else if (tempCode === "4") {
// 上周
this.dateRange.push(
this.formatDate(new Date(year, month, day - week - 6)),
this.formatDate(new Date(year, month, day - week))
);
} else if (tempCode === "5") {
// 本月
this.dateRange.push(
this.formatDate(new Date(year, month, 1)),
this.formatDate(tempDate)
);
} else if (tempCode === "6") {
// 上月
this.dateRange.push(
this.formatDate(new Date(year, month - 1, 1)),
this.formatDate(new Date(year, month, 0))
);
} else if (tempCode === "7") {
// 今年
this.dateRange.push(
this.formatDate(new Date(year, 0, 1)),
this.formatDate(tempDate)
);
} else if (tempCode === "8") {
// 去年
this.dateRange.push(
this.formatDate(new Date(year - 1, 0, 1)),
this.formatDate(new Date(year - 1, 11, 31))
);
}
},
// 日期范围选择器事件
chooseDateRange() {
this.chooseIndex = null;
},
// 数字转换
changeNum(num) {
if (num >= 10) {
return num;
} else {
return "0" + num;
}
},
// 格式化日期
formatDate(date) {
var year = date.getFullYear();
var month = this.changeNum(date.getMonth() + 1);
var day = this.changeNum(date.getDate());
return `${year}-${month}-${day}`;
},
// 某日期向前/向后num天
jumpNumDay(date, num, linkStr = '-') {
date = new Date(date.getTime() + (num * 24 * 60 * 60 * 1000))
return date.getFullYear() + linkStr + this.changeNum(date.getMonth() + 1) + linkStr + this.changeNum(date.getDate())
},
},
};
</script>
<style scoped lang='scss'>
<style scoped lang="scss">
.tjltj {
width: 100%;
height: 100%;
.inquire {
width: 100%;
height: 40px;
padding-top: 3px;
background-color: #ffffff;
margin-bottom: 10px;
}
.rowAc {
margin-left: 10px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.dateQuickItem {
padding: 1px 8px;
margin-right: 16px;
color: #3c4353;
font-size: 14px;
line-height: 22px;
font-weight: 400;
border: 1px solid #dcdee0;
border-radius: 16px;
background: #ffffff;
cursor: pointer;
box-sizing: border-box;
}
.dateQuickItem:hover,
.dateQuickItem.active {
color: #1b58f4;
border: 1px solid #1b58f4;
}
.dateQuickItem.disabled {
color: #c8c9cc;
border: 1px solid #dcdee0;
background: #f7f8f9;
cursor: not-allowed; // 禁止鼠标事件
}
.dataRangePicker {
width: 240px !important;
height: 32px !important;
}
.dataRangePicker.el-date-editor .el-range-separator {
line-height: 24px;
}
.dataRangePicker.el-date-editor .el-range__icon {
margin-left: 0px;
line-height: 24px;
}
.dataRangePicker.el-date-editor .el-range-input {
width: 95px;
}
}
</style>
......
......@@ -4,19 +4,351 @@
* @LastEditTime: 2023-08-25 08:59:04
-->
<template>
<div class='yhjgba'>
<el-empty description="正在开发"></el-empty>
<div class="tjltj">
<div class="inquire">
<el-form :model="queryForm" ref="queryForm" label-width="100px">
<el-row>
<el-col :span="19">
<div class="rowAc">
<div
v-for="(item, index) in dateQuickSelection"
:key="index"
class="rowAc dateQuickItem"
@click="chooseDateQuick(index)"
>
{{ item.name }}
</div>
<el-date-picker
v-model="dateRange"
type="daterange"
value-format="yyyy-MM-dd"
end-placeholder="结束日期"
start-placeholder="开始日期"
:clearable="false"
range-separator="-"
class="dataRangePicker"
@change="chooseDateRange"
></el-date-picker>
</div>
</el-col>
<el-col :span="5" class="btnColRight">
<el-form-item>
<el-button
type="primary"
native-type="submit"
@click="handleSearch"
>查询</el-button
>
<el-button type="primary" native-type="submit" @click="derive"
>导出</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div ref="chart" style="width: 100%; height: 92%"></div>
</div>
</template>
<script>
export default {
import * as echarts from "echarts";
export default {
components: {},
data () {
data() {
return {
dateQuickSelection: [
// 日期快捷选择列表
{ code: "1", name: "今日" },
{ code: "2", name: "昨日" },
{ code: "3", name: "本周" },
{ code: "4", name: "上周" },
{ code: "5", name: "本月" },
{ code: "6", name: "上月" },
{ code: "7", name: "今年" },
{ code: "8", name: "去年" },
],
chooseIndex: 0, // 日期快捷选择项索引
dateRange: [], // 自定义列表 - 日期范围
queryForm: {},
data1: [23, 45, 23, 11, 15, 19, 35],
data2: [1, 4, 1, 3, 2, 3, 4],
data3: [],
xAxisData: [
"赵红红",
"刘红红",
"田红红",
"任红红",
"孙红红",
"李红红",
"周红红",
],
};
},
mounted() {
this.setdata();
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
this.chooseDateQuick(0);
},
methods: {
setdata() {
for (let i = 0; i < this.data1.length; i++) {
let sum = (this.data2[i] / this.data1[i]) * 100;
this.data3.push(Number(sum).toFixed(0));
}
},
// 导出
derive() {},
// 查询
handleSearch() {
console.log("dateRange", this.dateRange);
},
getOption() {
return {
title: {
text: "收件与退件统计情况 ", // 主标题名称
textStyle: {
//主标题文本设置
fontSize: 26, //大小
},
itemGap: 3, //主副标题间距
x: "center", //主副标题的水平位置
y: "top", //主副标题的垂直位置
},
tooltip: {
trigger: "item",
textStyle: {
fontSize: 14,
lineHeight: 22,
},
// 如果需要自定义 tooltip样式，需要使用formatter
formatter: (params) => {
return `<div font-size: 14px;line-height: 24px>
${params.seriesName}
<br>
<span font-size: 16px; font-weight: 600;"> ${params.name}: ${
Number(params.value).toFixed(2) + "%"
} </span>
</div>`;
},
},
legend: {
data: ["收件", "退件", "退件率"],
bottom: "3%",
itemWidth: 20,
itemHeight: 20,
//文字样式
textStyle: {
fontSize: 17, //设置文字大小
},
},
grid: [{ right: "3%", top: "10%", bottom: "15%", left: "3%" }],
color: ["#94ae0a", "#115fa6", "#a61120"],
xAxis: {
data: this.xAxisData,
axisLabel: {
// 轴文字
fontSize: 18,
},
},
yAxis: {
axisLabel: {
// 轴文字
fontSize: 18,
},
},
series: [
{
name: "收件",
type: "bar",
data: this.data1,
label: {
normal: {
show: true,
fontSize: 13,
position: "top",
},
},
},
{
name: "退件",
type: "bar",
data: this.data2,
label: {
normal: {
show: true,
fontSize: 13,
position: "top",
},
},
},
{
name: "退件率",
type: "bar",
data: this.data3,
label: {
normal: {
show: true,
fontSize: 13,
position: "top",
},
},
},
],
};
},
// 日期快捷选择事件
chooseDateQuick(index) {
this.chooseIndex = index;
var tempCode = this.dateQuickSelection.find(
(ele) => this.chooseIndex === Number(ele.code) - 1
).code;
var tempDate = new Date();
var year = tempDate.getFullYear();
var month = tempDate.getMonth();
var day = tempDate.getDate();
var week = tempDate.getDay();
this.dateRange = [];
if (tempCode === "1") {
// 今日
this.dateRange.push(
this.formatDate(tempDate),
this.formatDate(tempDate)
);
} else if (tempCode === "2") {
// 昨日
this.dateRange.push(
this.jumpNumDay(tempDate, -1, "-"),
this.jumpNumDay(tempDate, -1, "-")
);
} else if (tempCode === "3") {
// 本周
this.dateRange.push(
this.formatDate(new Date(year, month, day - week + 1)),
this.formatDate(tempDate)
);
} else if (tempCode === "4") {
// 上周
this.dateRange.push(
this.formatDate(new Date(year, month, day - week - 6)),
this.formatDate(new Date(year, month, day - week))
);
} else if (tempCode === "5") {
// 本月
this.dateRange.push(
this.formatDate(new Date(year, month, 1)),
this.formatDate(tempDate)
);
} else if (tempCode === "6") {
// 上月
this.dateRange.push(
this.formatDate(new Date(year, month - 1, 1)),
this.formatDate(new Date(year, month, 0))
);
} else if (tempCode === "7") {
// 今年
this.dateRange.push(
this.formatDate(new Date(year, 0, 1)),
this.formatDate(tempDate)
);
} else if (tempCode === "8") {
// 去年
this.dateRange.push(
this.formatDate(new Date(year - 1, 0, 1)),
this.formatDate(new Date(year - 1, 11, 31))
);
}
},
// 日期范围选择器事件
chooseDateRange() {
this.chooseIndex = null;
},
// 数字转换
changeNum(num) {
if (num >= 10) {
return num;
} else {
return "0" + num;
}
},
// 格式化日期
formatDate(date) {
var year = date.getFullYear();
var month = this.changeNum(date.getMonth() + 1);
var day = this.changeNum(date.getDate());
return `${year}-${month}-${day}`;
},
// 某日期向前/向后num天
jumpNumDay(date, num, linkStr = '-') {
date = new Date(date.getTime() + (num * 24 * 60 * 60 * 1000))
return date.getFullYear() + linkStr + this.changeNum(date.getMonth() + 1) + linkStr + this.changeNum(date.getDate())
},
},
};
</script>
<style scoped lang='scss'>
<style scoped lang="scss">
.tjltj {
width: 100%;
height: 100%;
.inquire {
width: 100%;
height: 40px;
padding-top: 3px;
background-color: #ffffff;
margin-bottom: 10px;
}
.rowAc {
margin-left: 10px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.dateQuickItem {
padding: 1px 8px;
margin-right: 16px;
color: #3c4353;
font-size: 14px;
line-height: 22px;
font-weight: 400;
border: 1px solid #dcdee0;
border-radius: 16px;
background: #ffffff;
cursor: pointer;
box-sizing: border-box;
}
.dateQuickItem:hover,
.dateQuickItem.active {
color: #1b58f4;
border: 1px solid #1b58f4;
}
.dateQuickItem.disabled {
color: #c8c9cc;
border: 1px solid #dcdee0;
background: #f7f8f9;
cursor: not-allowed; // 禁止鼠标事件
}
.dataRangePicker {
width: 240px !important;
height: 32px !important;
}
.dataRangePicker.el-date-editor .el-range-separator {
line-height: 24px;
}
.dataRangePicker.el-date-editor .el-range__icon {
margin-left: 0px;
line-height: 24px;
}
.dataRangePicker.el-date-editor .el-range-input {
width: 95px;
}
}
</style>
......