Skip to content

bdc / bdcdj-web

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

Merge branch 'dev'

2 parents 78262da4 2d9b694d
Expand all
Inline Side-by-side
Showing 25 changed files with 2537 additions and 378 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",
......
{
"TITLE": "不动产登记系统",
"SERVERAPI": "/bdcdj",
"IDCARDURL": "http://127.0.0.1:33088/function=get_idcard&readnew=0"
"IDCARDURL": "http://127.0.0.1:33088/function=get_idcard&readnew=0",
"adapter": "dysqs-630222"
}
\ No newline at end of file
......
......@@ -294,16 +294,22 @@ export const asyncRoutes = [
name: 'tjfx',
children: [
{
path: 'ywltj',
component: () => import('@/views/tjfx/ywltj/index.vue'),
name: 'qyxxba',
meta: { title: '业务量统计' }
path: 'bdcdjtjfx',
component: () => import('@/views/tjfx/bdcdjtjfx/index.vue'),
name: 'bdcdjtjfx',
meta: { title: '不动产登记统计分析' }
},
{
path: 'tjltj',
component: () => import('@/views/tjfx/tjltj/index.vue'),
name: 'tjltj',
meta: { title: '退件率统计' }
},
{
path: 'gzltj',
component: () => import('@/views/tjfx/gzltj/index.vue'),
name: 'gzltj',
meta: { title: '工作量统计' }
path: 'cstj',
component: () => import('@/views/tjfx/cstj/index.vue'),
name: 'cstj',
meta: { title: '超时统计' }
}
]
},
......
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-11-16 13:58:50
* @LastEditTime: 2023-11-22 13:42:26
*/
import { mapGetters } from 'vuex'
import { defaultParameters } from "../../views/ywbl/ywsq/javascript/publicDefaultPar";
......@@ -19,7 +19,7 @@ export default {
},
mounted () {
window.addEventListener('keydown', this.handkeyCode, true)//开启监听键盘按下事件
// this.handleSearch()
this.handleSearch()
},
methods: {
/**
......
/*
* @Description: 申请书
* @Autor: renchao
* @LastEditTime: 2023-11-20 15:42:45
*/
import Vue from 'vue'
// 创建不同的适配器策略
const strategies = {
dysqs: function (data) {
return data.name;
},
default: function (data) {
return data;
}
};
// 创建适配器函数，并使用策略模式进行数据处理
export default function adapter (data) {
const type = Vue.prototype.BASE_API.adapter;
const selectedStrategy = strategies[type] || strategies['default'];
return selectedStrategy(data);
}
\ No newline at end of file
......@@ -4,57 +4,57 @@ import cookies from './util.cookies'
* @param {*} paraName
* @author: renchao
*/
export function getUrlParam (paraName) {
let url = document.location.toString();
let arrObj = url.split('?');
export function getUrlParam(paraName) {
let url = document.location.toString();
let arrObj = url.split('?');
if (arrObj.length > 1) {
let arrPara = arrObj[1].split('&');
let arr;
if (arrObj.length > 1) {
let arrPara = arrObj[1].split('&');
let arr;
for (let i = 0; i < arrPara.length; i++) {
arr = arrPara[i].split('=');
for (let i = 0; i < arrPara.length; i++) {
arr = arrPara[i].split('=');
if (arr != null && arr[0] === paraName) {
// 截取#之前的内容
let result = arr[1].endsWith('#/') ? arr[1].substr(0, arr[1].indexOf('#')) : arr[1];
return result;
}
}
return '';
} else {
return '';
if (arr != null && arr[0] === paraName) {
// 截取#之前的内容
let result = arr[1].endsWith('#/') ? arr[1].substr(0, arr[1].indexOf('#')) : arr[1];
return result;
}
}
return '';
} else {
return '';
}
}
/**
* @description: setToken
* @param {*} token
* @author: renchao
*/
export function setToken (token) {
if (token === undefined) {
if (process.env.NODE_ENV === 'development') {
sessionStorage.removeItem('token')
} else {
cookies.remove('ACCESS_TOKEN')
}
export function setToken(token) {
if (token === undefined) {
if (process.env.NODE_ENV === 'development') {
sessionStorage.removeItem('token')
} else {
cookies.remove('ACCESS_TOKEN')
}
} else {
if (process.env.NODE_ENV === 'development') {
sessionStorage.setItem('token', token);
} else {
if (process.env.NODE_ENV === 'development') {
sessionStorage.setItem('token', token);
} else {
cookies.set('ACCESS_TOKEN', token)
}
cookies.set('ACCESS_TOKEN', token)
}
}
}
/**
* @description: getToken
* @author: renchao
*/
export function getToken () {
if (process.env.NODE_ENV === 'development') {
return sessionStorage.getItem('token')
}
return cookies.get('ACCESS_TOKEN')
export function getToken() {
if (process.env.NODE_ENV === 'development') {
return sessionStorage.getItem('token')
}
return cookies.get('ACCESS_TOKEN')
}
// 获取当前时间
......@@ -63,22 +63,22 @@ export function getToken () {
* @param {*} type
* @author: renchao
*/
export function getNewDate (type = 1) {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
if (type == 1) {
return `${year}年${month}月${day}日`
} else {
return `${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒`
}
export function getNewDate(type = 1) {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
if (type == 1) {
return `${year}年${month}月${day}日`
} else {
return `${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒`
}
}
export function getNewDatesh () {
export function getNewDatesh() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
......@@ -88,3 +88,31 @@ export function getNewDatesh () {
const seconds = String(now.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
// 近一个月时间
export function getdatamonth() {
var tempDate = new Date();
var year = tempDate.getFullYear();
var month = tempDate.getMonth();
var arr = []
arr.push(
formatDate(new Date(year, month, 1)),
formatDate(tempDate)
);
return arr
}
// 格式化日期
export function formatDate(date) {
var year = date.getFullYear();
var month = changeNum(date.getMonth() + 1);
var day = changeNum(date.getDate());
return `${year}-${month}-${day}`;
}
// 数字转换
export function changeNum(num) {
if (num >= 10) {
return num;
} else {
return "0" + num;
}
}
......
<template>
<div class="jtfccx-edit">
<div class="jtfccx-edit-con">
<b class="title"></b>
<b class="title">房屋状况</b>
<lb-table :column="fwColumns" key="fwzk" :data="resultData.hdetailList" :maxHeight="200" heightNumSetting
:pagination="false">
</lb-table>
<b class="title">土地状况</b>
<lb-table :column="tdColumns" key="tdzk" :data="resultData.zdjbxxDetail" :maxHeight="200" heightNumSetting
:pagination="false">
</lb-table>
<b class="title">权属状况</b>
<lb-table :column="qszkColumns" key="qszk" :data="resultData.qsxxDetail" :maxHeight="200" heightNumSetting
:pagination="false">
</lb-table>
<b class="title">抵押登记</b>
<lb-table :column="diyaColumns" key="dydj" :data="resultData.dyaqDetail" :maxHeight="200" heightNumSetting
:pagination="false">
</lb-table>
<b class="title">预告登记</b>
<lb-table :column="ygdjColumns" key="ygdj" :data="resultData.ygdjDetail" :maxHeight="200" heightNumSetting
:pagination="false">
</lb-table>
<b class="title">查封状况</b>
<lb-table :column="cfdjColumns" key="cfdj" :data="resultData.cfdjDetail" :maxHeight="200" heightNumSetting
:pagination="false">
</lb-table>
<b class="title">异议登记</b>
<lb-table :column="yydjColumns" key="yydj" :data="resultData.yydjDetail" :maxHeight="200" heightNumSetting
:pagination="false">
</lb-table>
</div>
</div>
<div class="jtfccx-edit-con">
<b class="title"></b>
<b class="title">房屋状况</b>
<lb-table :column="fwColumns" key="fwzk" :data="resultData.hdetailList" :maxHeight="200" heightNumSetting
:pagination="false">
</lb-table>
<b class="title">土地状况</b>
<lb-table :column="tdColumns" key="tdzk" :data="resultData.zdjbxxDetail" :maxHeight="200" heightNumSetting
:pagination="false">
</lb-table>
<b class="title">权属状况</b>
<lb-table :column="qszkColumns" key="qszk" :data="resultData.qsxxDetail" :maxHeight="200" heightNumSetting
:pagination="false">
</lb-table>
<b class="title">抵押登记</b>
<lb-table :column="diyaColumns" key="dydj" :data="resultData.dyaqDetail" :maxHeight="200" heightNumSetting
:pagination="false">
</lb-table>
<b class="title">预告登记</b>
<lb-table :column="ygdjColumns" key="ygdj" :data="resultData.ygdjDetail" :maxHeight="200" heightNumSetting
:pagination="false">
</lb-table>
<b class="title">查封状况</b>
<lb-table :column="cfdjColumns" key="cfdj" :data="resultData.cfdjDetail" :maxHeight="200" heightNumSetting
:pagination="false">
</lb-table>
<b class="title">异议登记</b>
<lb-table :column="yydjColumns" key="yydj" :data="resultData.yydjDetail" :maxHeight="200" heightNumSetting
:pagination="false">
</lb-table>
</div>
</template>
<script>
import { datas, sendThis } from "./infodata";
import { getFwmxInfo } from "@/api/jtfc.js";
export default {
props: {
formData: {
type: Object,
default: () => {},
},
},
data () {
return {
ruleForm: {
cxsj: "",
bdcdyh: "",
import { datas, sendThis } from "./infodata";
import { getFwmxInfo } from "@/api/jtfc.js";
export default {
props: {
formData: {
type: Object,
default: () => { },
},
//房屋列表字段
fwColumns: datas.fwCol(),
//土地列表字段
tdColumns: datas.tdCol(),
//权属状况列表字段
qszkColumns: datas.columns(),
//抵押登记列表字段
diyaColumns: datas.diyaCol(),
//预告登记列表字段
ygdjColumns: datas.ygdjCol(),
//查封登记列表字段
cfdjColumns: datas.cfdjCol(),
//异议登记列表字段
yydjColumns: datas.yydjCol(),
form: {},
resultData: {},
};
},
mounted () {
if(this.formData){
this.getDetailInfo()
}
},
methods: {
/**
* @description: setResult
* @param {*} data
* @author: renchao
*/
setResult(data){
this.resultData = data
},
/**
* @description: getDetailInfo
* @author: renchao
*/
getDetailInfo(){
this.$startLoading();
getFwmxInfo({ sqcxBsm: this.formData.bsmSqcx }).then((res) => {
this.$endLoading();
if (res.code == 200) {
data () {
return {
ruleForm: {
cxsj: "",
bdcdyh: "",
},
//房屋列表字段
fwColumns: datas.fwCol(),
//土地列表字段
tdColumns: datas.tdCol(),
//权属状况列表字段
qszkColumns: datas.columns(),
//抵押登记列表字段
diyaColumns: datas.diyaCol(),
//预告登记列表字段
ygdjColumns: datas.ygdjCol(),
//查封登记列表字段
cfdjColumns: datas.cfdjCol(),
//异议登记列表字段
yydjColumns: datas.yydjCol(),
form: {},
resultData: {},
};
},
mounted () {
if (this.formData) {
this.getDetailInfo()
}
},
methods: {
/**
* @description: setResult
* @param {*} data
* @author: renchao
*/
setResult (data) {
this.resultData = data
},
/**
* @description: getDetailInfo
* @author: renchao
*/
getDetailInfo () {
this.$startLoading();
getFwmxInfo({ sqcxBsm: this.formData.bsmSqcx }).then((res) => {
this.$endLoading();
if (res.code == 200) {
this.resultData = res.result
}
})
}
})
}
}
}
};
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
.table1 {
border-spacing: 0;
border-collapse: collapse;
width: 100%;
}
@import "~@/styles/mixin.scss";
.jtfccx-edit-con {
max-height: 85vh;
overflow-y: scroll;
}
.table1 {
border-spacing: 0;
border-collapse: collapse;
width: 100%;
}
.table1 td {
border: 1px solid #acbed1;
height: 30px;
}
.table1 td {
border: 1px solid #acbed1;
height: 30px;
}
</style>
......
......@@ -345,7 +345,6 @@
dyjlList: [],
}
},
//加载详细信息
/**
* @description: 加载详细信息
* @author: renchao
......@@ -416,7 +415,6 @@
}
})
},
//添加申请人
/**
* @description: 添加申请人
* @author: renchao
......@@ -440,14 +438,12 @@
* @author: renchao
*/
remove (index, row, type) {
console.log(type, 'type');
if (type == "sqr") {
this.form.sqrList.splice(index, 1);
} else {
this.form.qlrList.splice(index, 1);
}
},
//电话号码校验
/**
* @description: 电话号码校验
* @param {*} row
......@@ -463,7 +459,6 @@
return true;
}
},
//打印
/**
* @description: 打印
* @author: renchao
......@@ -479,7 +474,6 @@
}
});
},
//打开打印预览
/**
* @description: 打开打印预览
* @author: renchao
......
......@@ -104,7 +104,7 @@
* @author: renchao
*/
handleAdd () {
this.$popupDialog("家庭房产查询", "sqcx/jtfc/components/addjtfc", {
this.$popupDialog("登记情况", "sqcx/jtfc/components/addjtfc", {
sqcxBsm: ''
}, '80%')
},
......@@ -114,7 +114,7 @@
* @author: renchao
*/
handleViewClick (row) {
this.$popupDialog("家庭房产查询", "sqcx/jtfc/components/addjtfc", {
this.$popupDialog("登记情况", "sqcx/jtfc/components/addjtfc", {
sqcxBsm: row.bsmSqcx
}, '80%')
}
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-09-01 08:20:51
* @LastEditTime: 2023-11-21 16:30:43
-->
<template>
<el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules">
......@@ -67,7 +67,8 @@
tmpname: '',
tmpfont: '',
tmpfontsize: '',
tmpcontent: ''
tmpcontent: '', //模板1
tmpcontent2: '', //模板2
},
rules: {
tmpno: [
......@@ -83,7 +84,6 @@
if (JSON.stringify(this.formData) != "{}") this.getDetailInfo(this.formData)
},
methods: {
//表单提交
/**
* @description: 表单提交
* @author: renchao
......@@ -104,7 +104,6 @@
}
});
},
//新增
/**
* @description: 新增
* @author: renchao
......
<!--
* @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 :gutter="24">
<el-col :span="12">
<el-form-item label="收件时间" class="width100">
<el-date-picker
v-model="queryForm.sj"
type="daterange"
class="width100"
range-separator="至"
:clearable="false"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="区域" class="width100">
<el-select
v-model="queryForm.qy"
class="width100"
clearable
placeholder="请选择区域"
>
<el-option
v-for="item in dictData['A20']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4" 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
class="tableBox"
height="187"
stripe
:data="tableList"
show-summary
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="value"
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";
import { getdatamonth } from "@/utils/util";
export default {
components: {},
computed: {
...mapGetters(["dictData", "transfer"]),
},
data() {
return {
queryForm: {
sj: [],
},
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() {
this.setdata();
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
},
methods: {
getOption() {
return {
title: {
text: "登记类型统计",
x: "center",
textStyle: {
//主标题文本设置
fontSize: 12, //大小
},
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c}个 ({d}%)",
},
grid: {
top: "4%",
left: "2%",
right: "3%",
bottom: "20%",
containLabel: true,
},
series: [
{
name: "统计分析图",
type: "pie",
radius: "70%",
center: ["50%", "100%"],
data: this.tableList,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
label: {
normal: {
formatter: "{c}/个",
position: "inside", //让文字显示在饼状图里面
textStyle: {
fontSize: 10,
color: "#fff",
},
},
},
center: ["50%", "50%"], // 这个属性调整图像的位置！！！！！
},
],
};
},
setdata() {
this.queryForm.sj = getdatamonth();
console.log("this.queryForm", this.queryForm);
},
handleSearch() {
console.log(" this.queryForm", this.queryForm);
},
},
};
</script>
<style scoped lang="scss">
/deep/.el-card__header {
padding: 8px 10px;
}
/deep/.el-card__body {
padding: 3px 10px 5px 10px;
overflow: hidden;
}
.djlx {
.el-col {
padding: 4px;
margin-right: 4px;
}
.inquire {
width: 100%;
height: 40px;
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: 300px;
}
}
/deep/.el-table th {
height: 36px !important;
font-size: 14px;
color: #4a4a4a;
}
}
</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 :gutter="20">
<el-col :span="12">
<el-form-item label="收件时间" class="width100">
<el-date-picker
v-model="queryForm.sj"
type="daterange"
class="width100"
range-separator="至"
:clearable="false"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="11" 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"
show-summary
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="value"
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 { getdatamonth } from "@/utils/util";
export default {
components: {},
data() {
return {
queryForm: {},
tableList: [
{ name: "浐灞", value: "2" },
{ name: "长安", value: "12" },
{ name: "莲湖", value: "23" },
{ name: "高新", value: "33" },
{ name: "高新", value: "33" },
],
};
},
mounted() {
this.setdata();
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
},
methods: {
getOption() {
return {
title: {
text: "区域统计分析",
x: "center",
textStyle: {
//主标题文本设置
fontSize: 12, //大小
},
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c}个 ({d}%)",
},
grid: {
top: "4%",
left: "2%",
right: "3%",
bottom: "20%",
containLabel: true,
},
series: [
{
name: "统计分析图",
type: "pie",
radius: "70%",
center: ["50%", "100%"],
data: this.tableList,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
label: {
normal: {
formatter: "{c}/个",
position: "inside", //让文字显示在饼状图里面
textStyle: {
fontSize: 10,
color: "#fff",
},
},
},
center: ["50%", "50%"], // 这个属性调整图像的位置！！！！！
},
],
};
},
setdata() {
this.queryForm.sj = getdatamonth();
console.log("this.queryForm", this.queryForm);
},
handleSearch() {
console.log(" this.queryForm", this.queryForm);
},
},
};
</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;
margin-right: 4px;
}
.inquire {
width: 100%;
height: 40px;
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 th {
height: 36px !important;
font-size: 14px;
color: #4a4a4a;
}
.left {
width: 70%;
height: 200px;
}
.right {
width: 30%;
height: 300px;
}
}
}
</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 :gutter="24">
<el-col :span="12">
<el-form-item label="收件时间" class="width100">
<el-date-picker
v-model="queryForm.sj"
type="daterange"
class="width100"
range-separator="至"
:clearable="false"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="区域" class="width100">
<el-select
v-model="queryForm.qy"
class="width100"
clearable
placeholder="请选择区域"
>
<el-option
v-for="item in dictData['A20']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4" 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
show-summary
: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="value"
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";
import { getdatamonth } from "@/utils/util";
export default {
components: {},
computed: {
...mapGetters(["dictData", "transfer"]),
},
data() {
return {
queryForm: {},
tableList: [
{ name: "小红", value: "2" },
{ name: "小张", value: "12" },
{ name: "小王", value: "23" },
],
};
},
mounted() {
this.setdata();
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
},
methods: {
getOption() {
return {
title: {
text: "登记类型统计",
x: "center",
textStyle: {
//主标题文本设置
fontSize: 12, //大小
},
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c}个 ({d}%)",
},
grid: {
top: "4%",
left: "2%",
right: "3%",
bottom: "20%",
containLabel: true,
},
series: [
{
name: "统计分析图",
type: "pie",
radius: "70%",
center: ["50%", "100%"],
data: this.tableList,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
label: {
normal: {
formatter: "{c}/个",
position: "inside", //让文字显示在饼状图里面
textStyle: {
fontSize: 10,
color: "#fff",
},
},
},
center: ["50%", "50%"], // 这个属性调整图像的位置！！！！！
},
],
};
},
setdata() {
this.queryForm.sj = getdatamonth();
console.log("this.queryForm", this.queryForm);
},
handleSearch() {
console.log(" this.queryForm", this.queryForm);
},
},
};
</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;
margin-right: 4px;
}
.inquire {
width: 100%;
height: 40px;
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 th {
height: 36px !important;
font-size: 14px;
color: #4a4a4a;
}
.left {
width: 70%;
height: 200px;
}
.right {
width: 30%;
height: 300px;
}
}
}
</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.monthValue"
class="width100"
type="month"
placeholder="选择月"
>
</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['A20']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="11" 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 ref="chart" style="width: 100%; height: 200px"></div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
export default {
components: {},
computed: {
...mapGetters(["dictData", "transfer"]),
},
data() {
return {
queryForm: {
monthValue:""
},
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日",
],
};
},
created() {
// 默认当月
var nowDate = new Date();
var date = {
year: nowDate.getFullYear(),
month: nowDate.getMonth() + 1,
day: nowDate.getDate()
};
const dayDate =
date.year + "-" + (date.month >= 10 ? date.month : "0" + date.month);
var date = new Date();
this.$set(this.queryForm, "monthValue", dayDate.toString());
console.log("this.queryForm",this.queryForm);
},
mounted() {
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
},
methods: {
getOption() {
return {
title: {
text: "2023年11月收件情况 ", // 主标题名称
textStyle: {
//主标题文本设置
fontSize: 18, //大小
},
itemGap: 3, //主副标题间距
x: "center", //主副标题的水平位置
y: "top", //主副标题的垂直位置
},
legend: {
data: ["转诊量"],
top: "6%",
right: "4%",
textStyle: {
color: "#747474",
},
},
tooltip: {
// trigger: "item", //默认效果
//柱状图加阴影
trigger: "axis",
axisPointer: {
type: "shadow",
label: {
show: true,
},
},
},
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)",
},
},
],
};
},
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;
margin-right: 4px;
}
.inquire {
width: 100%;
height: 40px;
background-color: #f4f7fd;
/deep/ .el-form {
.el-form-item--small.el-form-item {
margin-bottom: 5px;
}
}
}
.concent {
width: 100%;
height: 300px;
display: flex;
}
}
</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
class="width100"
v-model="queryForm.sj"
type="year"
placeholder="选择年"
>
</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['A20']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="11" 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 ref="chart" style="width: 100%; height: 200px"></div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
export default {
components: {},
computed: {
...mapGetters(["dictData", "transfer"]),
},
data() {
return {
queryForm: {
sj:""
},
};
},
created() {
var tempDate = new Date();
var year = tempDate.getFullYear();
console.log("year", year);
// 默认当月
this.$set(this.queryForm, "sj", year.toString());
console.log("this.queryForm",this.queryForm);
},
mounted() {
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
},
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年收件情况 ", // 主标题名称
textStyle: {
//主标题文本设置
fontSize: 18, //大小
},
itemGap: 3, //主副标题间距
x: "center", //主副标题的水平位置
y: "top", //主副标题的垂直位置
},
legend: {
data: ["转诊量"],
top: "6%",
right: "4%",
textStyle: {
color: "#747474",
},
},
tooltip: {
// trigger: "item", //默认效果
//柱状图加阴影
trigger: "axis",
axisPointer: {
type: "shadow",
label: {
show: true,
},
},
},
grid: {
top: "20%",
left: "2%",
right: "3%",
bottom: "20%",
containLabel: true,
},
series: [
{
data: [38, 42, 50, 157, 40, 45, 60, 140, 36, 47, 54, 143],
barWidth: 40,
type: "bar",
},
],
};
},
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;
margin-right: 4px;
}
.inquire {
width: 100%;
height: 40px;
background-color: #f4f7fd;
/deep/ .el-form {
.el-form-item--small.el-form-item {
margin-bottom: 5px;
}
}
}
.concent {
width: 100%;
height: 300px;
display: flex;
}
}
</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 :gutter="20">
<el-col :span="12">
<el-form-item label="缮证日期" class="width100">
<el-date-picker
v-model="queryForm.sj"
type="daterange"
class="width100"
range-separator="至"
:clearable="false"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="区域" class="width100">
<el-select
v-model="queryForm.qy"
class="width100"
clearable
placeholder="请选择区域"
>
<el-option
v-for="item in dictData['A20']"
:key="item.dcode"
:label="item.dname"
:value="item.dcode"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4" 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"
show-summary
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="value"
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";
import { getdatamonth } from "@/utils/util";
export default {
components: {},
computed: {
...mapGetters(["dictData", "transfer"]),
},
data() {
return {
queryForm: {},
tableList: [
{ name: "单一版不动产权证书", value: "459" },
{ name: "不动产登记证明", value: "164" },
],
};
},
mounted() {
this.setdata();
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
},
methods: {
getOption() {
return {
title: {
text: "证书种类统计分析发证",
x: "center",
textStyle: {
//主标题文本设置
fontSize: 12, //大小
},
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c}个 ({d}%)",
},
grid: {
top: "4%",
left: "2%",
right: "3%",
bottom: "20%",
containLabel: true,
},
series: [
{
name: "统计分析图",
type: "pie",
radius: "70%",
center: ["50%", "100%"],
data: this.tableList,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
label: {
normal: {
formatter: "{c}/个",
position: "inside", //让文字显示在饼状图里面
textStyle: {
fontSize: 10,
color: "#fff",
},
},
},
center: ["50%", "50%"], // 这个属性调整图像的位置！！！！！
},
],
};
},
setdata() {
this.queryForm.sj = getdatamonth();
console.log("this.queryForm", this.queryForm);
},
handleSearch() {
console.log(" this.queryForm", this.queryForm);
},
},
};
</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;
margin-right: 4px;
}
.inquire {
width: 100%;
height: 40px;
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 th {
height: 36px !important;
font-size: 14px;
color: #4a4a4a;
}
.left {
width: 70%;
height: 200px;
}
.right {
width: 30%;
height: 300px;
}
}
}
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-08-25 08:59:04
-->
<template>
<div class="yhjgba">
<el-row :gutter="8">
<el-col :span="12">
<el-card
shadow="hover"
:body-style="{ padding: '0' }"
style="height: 260px"
>
<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: 260px"
>
<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: 260px"
>
<div slot="header" class="flexst">
<h5 class="title">根据收件人统计分析收件</h5>
</div>
<psjr/>
</el-card>
</el-col>
<el-col :span="12">
<el-card
shadow="hover"
:body-style="{ padding: '0' }"
style="height: 260px"
>
<div slot="header" class="flexst">
<h5 class="title">收件日统计</h5>
</div>
<sjri/>
</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: 260px"
>
<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: 260px"
>
<div slot="header" class="flexst">
<h5 class="title">收件月统计</h5>
</div>
<sjyue/>
</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";
import sjri from "./components/sjri.vue";
import sjyue from "./components/sjyue.vue";
import psjr from "./components/sjr.vue";
export default {
components: {djlx,zszl,qytj,sjri,sjyue,psjr},
computed: {
...mapGetters(["dictData", "transfer"]),
},
data() {
return {
queryForm: {},
tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
};
},
mounted() {
},
methods: {
getOption() {
return {
};
},
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="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>
import * as echarts from "echarts";
export default {
components: {},
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">
.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>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-08-25 08:59:04
-->
<template>
<div class='yhjgba'>
<el-empty description="正在开发"></el-empty>
</div>
</template>
<script>
export default {
components: {},
data () {
return {
}
}
}
</script>
<style scoped lang='scss'>
</style>
\ No newline at end of file
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-08-25 08:59:04
-->
<template>
<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>
import * as echarts from "echarts";
export default {
components: {},
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">
.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>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-08-25 08:59:04
-->
<template>
<div class='yhjgba'>
<el-empty description="正在开发"></el-empty>
</div>
</template>
<script>
export default {
components: {},
data () {
return {
}
}
}
</script>
<style scoped lang='scss'>
</style>
\ No newline at end of file
......@@ -12,148 +12,150 @@
</el-tab-pane>
</el-tabs>
<el-empty description="暂无数据" v-if="headTabBdcqz.length == 0 && noData"></el-empty>
<div style="height:540px">
<el-form class="zs" :model="bdcqz" v-if="this.bdcqz.bdcqzlx==1" ref="ruleForm" label-width="100px">
<el-row>
<el-col :span="24">
<el-form-item label="权利人">
<el-input v-model="bdcqz.qlr"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="共有情况">
<el-select v-model="bdcqz.gyqk" class="width100" placeholder="请选择">
<el-option
v-for="item in gyqkList"
:key="item.dcode"
:label="item.dname"
:value="item.dcode">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="坐落">
<el-input v-model="bdcqz.zl"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="不动产单元号">
<el-input v-model="bdcqz.bdcdyh"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="权利类型">
<el-input v-model="bdcqz.qllx"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="权利性质 ">
<el-input v-model="bdcqz.qlxz"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="用途">
<el-input v-model="bdcqz.yt"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="面积">
<el-input v-model="bdcqz.mj"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="使用期限 ">
<el-input v-model="bdcqz.syqx"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="权利其他状况">
<el-input v-model="bdcqz.qlqtzk" :rows="4" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="附记">
<el-input v-model="bdcqz.fj" :rows="4" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-form :model="bdcqz" class="zm" v-else ref="ruleForm" label-width="110px">
<el-row>
<el-col :span="24">
<el-form-item label="证明权利或事项">
<el-input v-model="bdcqz.zmqlhsx"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="权利人(申请人)">
<el-input v-model="bdcqz.qlr"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="义务人">
<el-input v-model="bdcqz.ywr"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="坐落">
<el-input v-model="bdcqz.zl"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="不动产单元号">
<el-input v-model="bdcqz.bdcdyh"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="其他状况">
<el-input v-model="bdcqz.qlqtzk" :rows="6" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="附记">
<el-input v-model="bdcqz.fj" :rows="6" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div style="text-align:center">
<el-button @click="$popupCacel">取消</el-button>
<el-button type="primary" @click="handleSubmit">保存</el-button>
<div v-else>
<div style="height:540px">
<el-form class="zs" :model="bdcqz" v-if="this.bdcqz.bdcqzlx==1" ref="ruleForm" label-width="100px">
<el-row>
<el-col :span="24">
<el-form-item label="权利人">
<el-input v-model="bdcqz.qlr"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="共有情况">
<el-select v-model="bdcqz.gyqk" class="width100" placeholder="请选择">
<el-option
v-for="item in gyqkList"
:key="item.dcode"
:label="item.dname"
:value="item.dcode">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="坐落">
<el-input v-model="bdcqz.zl"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="不动产单元号">
<el-input v-model="bdcqz.bdcdyh"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="权利类型">
<el-input v-model="bdcqz.qllx"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="权利性质 ">
<el-input v-model="bdcqz.qlxz"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="用途">
<el-input v-model="bdcqz.yt"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="面积">
<el-input v-model="bdcqz.mj"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="使用期限 ">
<el-input v-model="bdcqz.syqx"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="权利其他状况">
<el-input v-model="bdcqz.qlqtzk" :rows="4" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="附记">
<el-input v-model="bdcqz.fj" :rows="4" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-form :model="bdcqz" class="zm" v-else ref="ruleForm" label-width="110px">
<el-row>
<el-col :span="24">
<el-form-item label="证明权利或事项">
<el-input v-model="bdcqz.zmqlhsx"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="权利人(申请人)">
<el-input v-model="bdcqz.qlr"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="义务人">
<el-input v-model="bdcqz.ywr"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="坐落">
<el-input v-model="bdcqz.zl"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="不动产单元号">
<el-input v-model="bdcqz.bdcdyh"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="其他状况">
<el-input v-model="bdcqz.qlqtzk" :rows="6" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="附记">
<el-input v-model="bdcqz.fj" :rows="6" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div style="text-align:center">
<el-button @click="$popupCacel">取消</el-button>
<el-button type="primary" @click="handleSubmit">保存</el-button>
</div>
</div>
</div>
</template>
......
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-11-15 11:29:32
* @LastEditTime: 2023-11-22 13:18:47
*/
import Vue from 'vue'
import { getPrintTemplateByCode } from "@/api/print";
import { uploadUndo } from "@/api/clxx";
import { getLodop } from "@/utils/LodopFuncs"
import { getLodop } from "@/utils/LodopFuncs";
import adapter from "@/utils/sqs/adapter";
import {
stepExpandInfo,
record,
......@@ -133,24 +135,37 @@ export default {
break;
case "B6":
//根据编号获取对应信息
getPrintTemplateByCode({ tmpno: 'dysqs' }).then(res => {
if (res.code == 200) {
getPrintApplicationForm(this.currentSelectProps.bsmSldy).then(infoRes => {
if (infoRes.code == 200) {
//打开模板设计
let LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
LODOP.ADD_PRINT_DATA("ProgramData", res.result.tmpcontent); //装载模板
//todo 调取后端接口获取数据 循环set
for (let key in infoRes.result) {
LODOP.SET_PRINT_STYLEA(key, "CONTENT", infoRes.result[key]);
getPrintTemplateByCode({ tmpno: Vue.prototype.BASE_API.adapter }).then(res => {
if (res.code === 200) {
getPrintTemplateByCode({ tmpno: Vue.prototype.BASE_API.adapter + '-2' }).then(res1 => {
getPrintApplicationForm(this.currentSelectProps.bsmSldy).then(infoRes => {
if (infoRes.code === 200) {
let LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
// 装载第一个模板并设置数据
LODOP.ADD_PRINT_DATA("ProgramData", res.result.tmpcontent);
for (let key in infoRes.result) {
LODOP.SET_PRINT_STYLEA(key, "CONTENT", infoRes.result[key]);
}
// 手动分页
LODOP.NewPage();
// 装载第二个模板并设置数据
LODOP.ADD_PRINT_DATA("ProgramData", res1.result.tmpcontent);
for (let key in res1.result) {
LODOP.SET_PRINT_STYLEA(key, "CONTENT", res1.result[key]);
}
// 进行预览
LODOP.PREVIEW();
} else {
this.$message.error(infoRes.message);
}
LODOP.PREVIEW();
} else {
this.$message.error(infoRes.message)
}
})
});
});
} else {
this.$message.error(res.message)
this.$message.error(res.message);
}
})
break;
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-10-18 15:46:39
* @LastEditTime: 2023-11-22 13:43:27
-->
<template>
<div class="container">
......