master
xy 3 years ago
parent 81dec0fb22
commit 0032b68b7f

@ -1,26 +1,18 @@
import request from '@/utils/request'
export function getCounts() {
return request({
url: '/api/admin/get-counts',
method: 'get'
})
}
export function getChartsData(params) {
export function getChartsHome(params) {
return request({
url: '/api/admin/get-charts-data',
url: '/api/admin/chart/index',
method: 'get',
params: params
})
}
export function getChartsHome(params) {
export function getChartDown (params) {
return request({
url: '/api/admin/chart/home',
url: '/api/admin/chart/down',
method: 'get',
params: params
})
}

@ -171,3 +171,42 @@ export function debounce(func, delay) {
}
}
export function getAgeByIdcard(identityCard){
let len = (identityCard + "").length;
if (len == 0) {
return 0;
} else {
if ((len != 15) && (len != 18))//身份证号码只能为15位或18位其它不合法
{
return 0;
}
}
let strBirthday = "";
if (len == 18)//处理18位的身份证号码从号码中得到生日和性别代码
{
strBirthday = identityCard.substr(6, 4) + "/" + identityCard.substr(10, 2) + "/" + identityCard.substr(12, 2);
}
if (len == 15) {
strBirthday = "19" + identityCard.substr(6, 2) + "/" + identityCard.substr(8, 2) + "/" + identityCard.substr(10, 2);
}
//时间字符串里,必须是“/”
let birthDate = new Date(strBirthday);
let nowDateTime = new Date();
let age = nowDateTime.getFullYear() - birthDate.getFullYear();
//再考虑月、天的因素;.getMonth()获取的是从0开始的这里进行比较不需要加1
if (nowDateTime.getMonth() < birthDate.getMonth() || (nowDateTime.getMonth() == birthDate.getMonth() && nowDateTime.getDate() < birthDate.getDate())) {
age--;
}
return age;
}
export function getSex(idCard) {
let sexStr;
if (parseInt(idCard.slice(-2, -1)) % 2 == 1) {
sexStr = '男';
}
else {
sexStr = '女';
}
return sexStr;
}

@ -3,24 +3,18 @@
<div class="boxlist">
<div class="box box1">
<div class="boxtitle">
<span>营业统计</span>
<span>在档人数</span>
<i class="el-icon-data-line statIcon"></i>
</div>
<div class="bline"></div>
<div class="boxcontentsubtitle">服务金额</div>
<div class="boxcontentsubtitle"> </div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
{{totaldata.business.server_money_total}}
</div>
<div style="display: flex;justify-content: space-around;">
<div class="boxcontentitem-small">
<span>{{totaldata.business.nurse_money_total}}</span>
<span>护工金额</span>
</div>
<div class="boxcontentitem-small">
<span>{{totaldata.business.remain_money_total}}</span>
<span>留存金额</span>
<span>{{ data.total }} </span>
<span>在档总人数</span>
</div>
</div>
</div>
@ -29,27 +23,22 @@
<div class="box box2">
<div class="boxtitle">
<span>人效统计</span>
<span>困难人数</span>
<i class="el-icon-user statIcon"></i>
</div>
<div class="bline"></div>
<div class="boxcontentsubtitle">总服务时长</div>
<div class="boxcontentsubtitle"> </div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
{{totaldata.person_efficiency.server_time_total}}
分钟
</div>
<div style="display: flex;justify-content: space-around;">
<div class="boxcontentitem-small">
<span>{{totaldata.person_efficiency.expect}}</span>
<span> 照护人员数</span>
<span>{{ data.kunnanleixing_1 }} </span>
<span>特别困难</span>
</div>
<div class="boxcontentitem-small">
<span>{{totaldata.person_efficiency.act}} </span>
<span>天数</span>
<span>{{ data.kunnanleixing_2 }} </span>
<span>深度困难</span>
</div>
</div>
</div>
@ -58,50 +47,22 @@
<div class="box box3">
<div class="boxtitle">
<span>客户统计</span>
<i class="el-icon-s-custom statIcon"></i>
<span>困难人数</span>
<i class="el-icon-user statIcon"></i>
</div>
<div class="bline"></div>
<div class="boxcontentsubtitle">活跃客户</div>
<div class="boxcontentsubtitle"> </div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">
{{totaldata.customer.active}}
</div>
<div style="display: flex;justify-content: space-around;">
<div class="boxcontentitem-small">
<span>{{totaldata.customer.add}}</span>
<span>新增</span>
</div>
<div class="boxcontentitem-small">
<span>{{totaldata.customer.wash}}</span>
<span>流失</span>
</div>
</div>
</div>
</div>
</div>
<div class="box box4">
<div class="boxtitle">
<span>订单统计</span>
<i class="el-icon-document statIcon"></i>
</div>
<div class="bline"></div>
<div class="boxcontentsubtitle">服务订单</div>
<div class="boxcontent">
<div class="boxcontentitem">
<div class="boxcontentitem-big">{{totaldata.order.server_total}}
</div>
<div style="display: flex;justify-content: space-around;">
<div class="boxcontentitem-small">
<span>{{totaldata.order.cycle_total}}</span>
<span>周期性订单</span>
<span>{{ data.kunnanleixing_3 }} </span>
<span>相对困难</span>
</div>
<div class="boxcontentitem-small">
<span>{{totaldata.order.unit_total}}</span>
<span>单次订单</span>
<span>{{ data.kunnanleixing_4 }} </span>
<span>意外至困</span>
</div>
</div>
</div>
@ -116,35 +77,9 @@
export default {
props: {
countsData: {
data: {
type: Object
},
totaldata: {
type: Object,
default: {
"business": {
"server_money_total": 0,
"nurse_money_total": 0,
"remain_money_total": 0
},
"person_efficiency": {
"server_time_total": "0",
"expect": 0,
"act": 0
},
"customer": {
"active": 0,
"add": 0,
"wash": 0
},
"order": {
"server_total": 0,
"cycle_total": 0,
"unit_total": 0
},
}
}
},
components: {
CountTo

@ -1,212 +1,216 @@
<template>
<div>
<div class="statistics">
<panel-group :totaldata="list" />
<panel-group :data="chartData" />
</div>
<Card>
<div class="chart">
<div class="chart__title">查询下载统计</div>
<div class="chart-container">
<div class="left">
<div class="compare compare-total">
<p>累计查询下载数</p>
<div>
{{ chartData.total_down }}
</div>
</div>
<div class="compare compare-week">
<p>本周查询下载数</p>
<div>
{{ chartData.week_down }}
</div>
</div>
</div>
<div class="right">
<div class="select-panel">
<p>查询下载</p>
<DatePicker
:options="dateOptions"
:value="[select.start_date, select.end_date]"
type="daterange"
separator=" 至 "
show-week-numbers
placement="bottom-end"
placeholder="日期选择"
style="width: 210px"
@on-change="datePick"
></DatePicker>
</div>
<div id="chart-panel"></div>
</div>
</div>
</div>
</Card>
</div>
</template>
<script>
import echarts from "echarts"
import PanelGroup from './components/PanelGroup'
import {
getChartsHome
} from "../../api/dashboard.js"
export default {
components: {
PanelGroup
},
data() {
return {
col: '',
line: '',
business_data: [],
collect_data: [],
list: {},
customerArr: [],
orderArr: [],
chartData: {},
}
},
watch: {
chartData(val, newval) {
if (newval){
this.init();
}
}
},
methods: {
async loadData() {
await getChartsHome().then((res) => {
console.log(res);
this.list = res.list;
this.chartData = res;
let _business_data = [];
let _collect_data = [];
res.business_data.map(item => {
_business_data.push(item.server_money_total)
_collect_data.push(item.collect_money)
})
this.business_data = _business_data;
this.collect_data = _collect_data;
let _customerArr = [];
let _orderArr = [];
res.order_data.map(item => {
_customerArr.push(item.active_customer)
_orderArr.push(item.order_total)
})
this.customerArr = _customerArr;
this.orderArr = _orderArr;
}).catch()
import echarts from "echarts";
import PanelGroup from "./components/PanelGroup";
import { getChartsHome, getChartDown } from "@/api/dashboard";
export default {
components: {
PanelGroup,
},
data() {
return {
line: "",
chartData: {
total: 0,
kunnanleixing_1: 0,
kunnanleixing_2: 0,
kunnanleixing_3: 0,
kunnanleixing_4: 0,
total_down: 0,
week_down: 0,
},
init() {
this.col = echarts.init(document.getElementById('col-chart'))
this.col.setOption({
title: {
text: ''
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
select: {
start_date: this.$moment().startOf("week").format("YYYY-MM-DD"),
end_date: this.$moment().endOf("week").format("YYYY-MM-DD"),
},
dateOptions: {
shortcuts: [
{
text: "近一周",
value() {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
},
position: 'bottom'
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
xAxis: {
type: 'category',
data: ['第一周', '第二周', '第三周', '第四周']
},
series: [{
name: '服务金额',
type: 'bar',
data: this.business_data,
itemStyle: {
normal: {
color: 'rgb(42,182,252)'
},
},
{
text: "近一月",
value() {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
},
{
name: '收款',
type: 'bar',
data: this.collect_data,
itemStyle: {
normal: {
color: 'rgb(34,228,255)'
},
},
}
]
})
this.line = echarts.init(document.getElementById('line-chart'))
this.line.setOption({
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['活跃客户', '服务订单']
},
grid: {
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true
},
toolbox: {
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['第一周', '第二周', '第三周', '第四周']
},
yAxis: {
type: 'value',
},
series: [{
name: '活跃客户',
type: 'line',
stack: 'Total',
data: this.customerArr,
itemStyle: {
normal: {
color: 'rgb(42,182,252)'
},
},
},
{
name: '服务订单',
type: 'line',
stack: 'Total',
data: this.orderArr,
itemStyle: {
normal: {
color: 'rgb(34,228,255)'
},
},
}
]
})
],
},
};
},
watch: {
chartData(val, newval) {
if (newval) {
//this.init();
}
},
created() {
},
methods: {
datePick (e) {
this.select.start_date = e[0];
this.select.end_date = e[1];
//this.loadData();
this.init();
},
mounted() {
//this.init()
window.onresize = () => {
this.col.resize()
this.line.resize()
}
async loadData() {
await getChartsHome()
.then((res) => {
this.chartData = res;
})
.catch();
},
destroyed() {
window.onresize = null
}
}
async init() {
let res = await getChartDown(this.select);
this.line = echarts.init(document.getElementById("chart-panel"));
this.line.setOption({
color: ["rgb(116, 21, 219)"],
xAxis: {
type: "category",
boundaryGap: false,
data: res.map((i) => i.date),
},
yAxis: {
type: "value",
},
tooltip: {
trigger: "axis",
axisPointer: {
label: {
backgroundColor: "#6a7985",
},
},
},
series: [
{
name: "下载数量",
data: res.map((i) => i.total),
type: "line",
smooth: true,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(55, 162, 255)",
},
{
offset: 1,
color: "rgb(116, 21, 219)",
},
]),
},
},
],
});
},
},
created() {
this.loadData();
},
mounted() {
this.init();
window.onresize = () => {};
},
destroyed() {
window.onresize = null;
},
};
</script>
<style lang="scss" scoped>
.statistics {
display: flex;
.statistics {
display: flex;
margin-top: 20px;
margin-top: 20px;
&-title {
&-title {
padding-left: 6px;
}
padding-left: 6px;
}
&-content {
text-align: center;
font-size: 13px;
&-content {
text-align: center;
font-size: 13px;
&-top {
&__num {
font-weight: 600;
}
&-top {
&__name {
font-size: 10px;
color: rgb(140, 140, 140);
}
}
&-bottom {
display: flex;
justify-content: space-between;
&-left {
&__num {
font-weight: 600;
}
@ -217,82 +221,84 @@
}
}
&-bottom {
display: flex;
justify-content: space-between;
&-left {
&__num {
font-weight: 600;
}
&__name {
font-size: 10px;
color: rgb(140, 140, 140);
}
&-right {
&__num {
font-weight: 600;
}
&-right {
&__num {
font-weight: 600;
}
&__name {
font-size: 10px;
color: rgb(140, 140, 140);
}
&__name {
font-size: 10px;
color: rgb(140, 140, 140);
}
}
}
}
&>div {
flex: 1;
margin-right: 20px;
& > div {
flex: 1;
margin-right: 20px;
&:last-child {
margin-right: 0;
}
&:last-child {
margin-right: 0;
}
}
}
.chart {
&__title {
font-weight: 600;
font-size: 16px;
color: #333;
border-bottom: 1px solid #999;
.chart {
padding-bottom: 10px;
}
&-container {
display: flex;
margin-top: 20px;
}
.left {
flex-shrink: 0;
.compare {
& > p {
font-weight: 600;
color: #666;
.chartItem {
width: 49%;
.chartItemTitle {
font-size: 16px;
margin-bottom: 20px;
padding: 4px 0;
}
#col-chart {
background: #fff;
border-radius: 10px;
flex: 1;
margin-right: 20px;
padding: 20px;
box-sizing: border-box;
min-height: 400px;
width: 100%;
& > div {
font-weight: 900;
font-size: 18px;
}
#line-chart {
background: #fff;
border-radius: 10px;
flex: 1;
padding: 20px;
box-sizing: border-box;
min-height: 400px;
& + .compare {
margin-top: 40px;
}
}
}
.right {
flex: 1;
margin-left: 60px;
.select-panel {
display: flex;
justify-content: space-between;
padding: 4px;
& > p {
font-weight: 600;
color: #666;
padding: 0 20px;
}
}
#chart-panel {
height: 320px;
}
}
}
</style>

@ -1,56 +1,97 @@
<template>
<div class="page">
<div class="content-section">
<div class="content-section-title">个人信息</div>
<div class="content-section__title">个人信息</div>
<ul>
<li>
<div class="products">
<!-- <svg viewBox="0 0 52 52" style="border:1px solid #3291b8">-->
<!-- <g xmlns="http://www.w3.org/2000/svg">-->
<!-- <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#061e26" data-original="#393687" />-->
<!-- <path d="M12.16 39H9.28V11h9.64c2.613 0 4.553.813 5.82 2.44 1.266 1.626 1.9 3.76 1.9 6.399 0 .934-.027 1.74-.08 2.42-.054.681-.22 1.534-.5 2.561-.28 1.026-.66 1.866-1.14 2.52-.48.654-1.213 1.227-2.2 1.72-.987.494-2.16.74-3.52.74h-7.04V39zm0-12h6.68c.96 0 1.773-.187 2.44-.56.666-.374 1.153-.773 1.46-1.2.306-.427.546-1.04.72-1.84.173-.801.267-1.4.28-1.801.013-.399.02-.973.02-1.72 0-4.053-1.694-6.08-5.08-6.08h-6.52V27zM29.48 33.92l2.8-.12c.106.987.6 1.754 1.48 2.3.88.547 1.893.82 3.04.82s2.14-.26 2.98-.78c.84-.52 1.26-1.266 1.26-2.239s-.36-1.747-1.08-2.32c-.72-.573-1.6-1.026-2.64-1.36-1.04-.333-2.086-.686-3.14-1.06a7.36 7.36 0 01-2.78-1.76c-.987-.934-1.48-2.073-1.48-3.42s.54-2.601 1.62-3.761 2.833-1.739 5.26-1.739c.854 0 1.653.1 2.4.3.746.2 1.28.394 1.6.58l.48.279-.92 2.521c-.854-.666-1.974-1-3.36-1-1.387 0-2.42.26-3.1.78-.68.52-1.02 1.18-1.02 1.979 0 .88.426 1.574 1.28 2.08.853.507 1.813.934 2.88 1.28 1.066.347 2.126.733 3.18 1.16 1.053.427 1.946 1.094 2.68 2s1.1 2.106 1.1 3.6c0 1.494-.6 2.794-1.8 3.9-1.2 1.106-2.954 1.66-5.26 1.66-2.307 0-4.114-.547-5.42-1.64-1.307-1.093-1.987-2.44-2.04-4.04z" fill="#c1dbe6" data-original="#89d3ff" />-->
<!-- </g>-->
<!-- </svg>-->
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M1000.342857 877.371429H24.228571c-13.257143 0-24-10.742857-24-24V170.285714c0-13.257143 10.742857-24 24-24h976.114286c13.257143 0 24 10.742857 24 24v49.142857h-45.714286v-27.428571H45.942857v639.771429h932.685714V292.571429h45.714286v560.8c0 13.257143-10.742857 24-24 24z" p-id="4081"></path><path d="M324.8 534.971429c-66.514286 0-120.571429-54.057143-120.571429-120.571429S258.285714 293.714286 324.8 293.714286s120.571429 54.057143 120.571429 120.571428-54.057143 120.685714-120.571429 120.685715z m0-195.542858c-41.257143 0-74.857143 33.6-74.857143 74.857143s33.6 74.857143 74.857143 74.857143 74.857143-33.6 74.857143-74.857143-33.6-74.857143-74.857143-74.857143z" p-id="4082"></path><path d="M480.114286 730.285714h-310.857143c-12.8 0-23.2-10.4-23.2-23.2 0-52.914286 15.314286-106.057143 42.171428-145.828571 31.542857-46.742857 76.914286-72.457143 127.885715-72.457143 12.571429 0 22.857143 10.285714 22.857143 22.857143s-10.285714 22.857143-22.857143 22.857143c-45.142857 0-73.828571 28.457143-89.942857 52.342857-18.057143 26.857143-29.828571 61.485714-33.257143 97.714286h263.542857c-5.142857-50.857143-27.085714-98.4-58.857143-125.257143-9.6-8.114286-10.857143-22.514286-2.742857-32.228572 8.114286-9.6 22.514286-10.857143 32.228571-2.742857 47.085714 39.657143 76.228571 109.714286 76.228572 182.742857 0 12.8-10.4 23.2-23.2 23.2zM585.257143 342.628571h292.571428v45.714286h-292.571428zM585.257143 488.228571h292.571428v45.714286h-292.571428zM585.257143 635.657143h201.142857v45.714286h-201.142857z"></path></svg>
<div class="content-section__item">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M512 88.086022c121.619269 0 220.215054 98.595785 220.215054 220.215053 0 78.836989-41.427957 147.995527-103.693764 186.896516 73.970237 21.096602 140.926624 62.067613 193.866323 118.954667a33.032258 33.032258 0 0 1-48.364731 45.006452C706.725161 586.840086 612.748387 545.032258 512 545.032258c-197.637505 0-357.849462 160.211957-357.849462 357.849462a33.032258 33.032258 0 0 1-66.064516 0c0-193.706667 129.926882-357.073204 307.387182-407.695139C333.207398 456.285591 291.784946 387.132559 291.784946 308.301075c0-121.619269 98.595785-220.215054 220.215054-220.215053z m396.387097 748.731182a27.526882 27.526882 0 0 1 27.526881 27.526882v11.010753a27.526882 27.526882 0 0 1-27.526881 27.526881h-192.688172a27.526882 27.526882 0 0 1-27.526882-27.526881v-11.010753a27.526882 27.526882 0 0 1 27.526882-27.526882h192.688172z m0-115.612903a27.526882 27.526882 0 0 1 27.526881 27.526882v11.010752a27.526882 27.526882 0 0 1-27.526881 27.526882h-192.688172a27.526882 27.526882 0 0 1-27.526882-27.526882v-11.010752a27.526882 27.526882 0 0 1 27.526882-27.526882h192.688172zM512 154.150538c-85.13514 0-154.150538 69.015398-154.150538 154.150537s69.015398 154.150538 154.150538 154.150538 154.150538-69.015398 154.150538-154.150538-69.015398-154.150538-154.150538-154.150537z" fill="#333"></path></svg>
<p>姓名</p>
<div>姓名</div>
<p>{{ info.user.name }}</p>
</div>
</li>
<li>
<div class="products">
<svg viewBox="0 0 52 52" style="border:1px solid #b65a0b">
<g xmlns="http://www.w3.org/2000/svg">
<path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#261400" data-original="#6d4c13" />
<path d="M30.68 39h-3.24l-2.76-9.04h-8.32L13.72 39H10.6l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L17.12 27h6.84zM37.479 12.24c0 .453-.16.84-.48 1.16-.32.319-.7.479-1.14.479-.44 0-.827-.166-1.16-.5-.334-.333-.5-.713-.5-1.14s.166-.807.5-1.141c.333-.333.72-.5 1.16-.5.44 0 .82.16 1.14.48.321.322.48.709.48 1.162zM37.24 39h-2.88V18.96h2.88V39z" fill="#e6d2c0" data-original="#ffbd2e" />
</g>
</svg>
Illustrator
<div class="content-section__item">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M1001.798659 764.668016a42.357557 42.357557 0 0 0-51.001956-32.848718l-127.072672 27.662079-38.035358-172.88799a301.689541 301.689541 0 0 0-172.887989-577.445883 312.92726 312.92726 0 0 0-102.868354 45.815317A299.096221 299.096221 0 0 0 399.284017 7.418624a302.553981 302.553981 0 0 0-164.24359 580.039203l-58.781916 282.671863L99.323356 753.430297a43.221997 43.221997 0 0 0-59.646356-12.966599 44.086437 44.086437 0 0 0-12.9666 60.510796l137.445952 204.007827a19.882119 19.882119 0 0 0 7.779959 6.91552v5.186639a63.104116 63.104116 0 0 0 21.610999 6.91552 42.357557 42.357557 0 0 0 24.204318-7.77996l205.736708-133.123751a43.221997 43.221997 0 1 0-47.544197-71.748516l-116.699393 76.935155 60.510796-286.129622h18.153239a301.689541 301.689541 0 0 0 172.887989-53.595276l8.6444 6.051079a297.367341 297.367341 0 0 0 163.379149 52.730837 164.24359 164.24359 0 0 0 21.610999 0l38.899798 172.887989-127.072673 27.662079a43.481329 43.481329 0 0 0 9.50884 86.443994h9.508839l122.750473-32.848718 27.662078 127.072672a44.086437 44.086437 0 0 0 42.357557 33.713158h9.50884a43.221997 43.221997 0 0 0 32.848718-51.866397l-27.662079-126.208232 126.208232-27.662078a43.221997 43.221997 0 0 0 32.848718-51.866397zM443.370454 491.504993a212.652227 212.652227 0 0 1-149.54811 24.204319 216.109986 216.109986 0 0 1 86.443994-423.575574 214.381107 214.381107 0 0 1 63.104116 25.068759 218.703306 218.703306 0 0 1 106.326114 230.805465 210.058907 210.058907 0 0 1-41.493118 86.443995 202.278947 202.278947 0 0 1-64.832996 57.053036z m130.530432 0a289.587382 289.587382 0 0 0 59.646356-126.208232 299.960661 299.960661 0 0 0-59.646356-248.094264 204.007827 204.007827 0 0 1 58.781916-23.339879 220.432186 220.432186 0 0 1 50.137517-5.186639 216.109986 216.109986 0 0 1 43.221998 427.033333 212.652227 212.652227 0 0 1-152.141431-24.204319z" fill="#333"></path></svg>
<div>性别</div>
<p>{{ sex }}</p>
</div>
</li>
<li>
<div class="content-section__item">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M674.56 634.026667a347.306667 347.306667 0 0 1-77.226667-8.106667 21.333333 21.333333 0 0 1-16.64-19.2A305.493333 305.493333 0 0 1 661.76 384c75.946667-76.373333 245.76-88.746667 253.013333-89.173333a21.76 21.76 0 0 1 16.64 6.4 20.906667 20.906667 0 0 1 5.973334 16.213333c0 7.253333-12.8 177.493333-88.746667 253.44a242.346667 242.346667 0 0 1-174.08 63.146667z m-51.626667-46.506667c38.826667 5.546667 136.533333 12.8 195.413334-46.08 49.066667-48.64 67.84-152.32 73.813333-200.533333-47.786667 6.4-151.466667 24.746667-200.533333 73.813333a264.106667 264.106667 0 0 0-68.693334 172.8z" fill="#333"></path><path d="M601.173333 603.733333a397.226667 397.226667 0 0 1-128 271.36" fill="#FFFFFF00"></path><path d="M473.173333 896a21.76 21.76 0 0 1-15.786666-7.253333 20.906667 20.906667 0 0 1 0-29.866667 381.013333 381.013333 0 0 0 120.746666-256 21.333333 21.333333 0 0 1 21.333334-21.333333 23.466667 23.466667 0 0 1 21.333333 21.333333 416.853333 416.853333 0 0 1-134.826667 287.146667 21.333333 21.333333 0 0 1-12.8 5.973333z"></path><path d="M601.6 615.68a13.226667 13.226667 0 0 1-5.546667 0 11.093333 11.093333 0 0 1-3.413333-14.933333 613.12 613.12 0 0 1 198.4-192 10.666667 10.666667 0 0 1 14.506667 4.266666 11.093333 11.093333 0 0 1-4.266667 14.506667 592.213333 592.213333 0 0 0-190.293333 184.746667 11.52 11.52 0 0 1-9.386667 3.413333z"></path><path d="M486.826667 634.026667a369.92 369.92 0 0 1-264.533334-93.866667C106.24 424.106667 85.333333 161.28 85.333333 150.186667a20.906667 20.906667 0 0 1 5.973334-16.213334 20.053333 20.053333 0 0 1 17.92-5.973333c11.093333 0 273.493333 20.053333 389.546666 136.106667a466.346667 466.346667 0 0 1 123.733334 338.773333 20.906667 20.906667 0 0 1-16.213334 19.2 542.72 542.72 0 0 1-119.466666 11.946667z m114.346666-33.28z m-469.333333-426.666667c7.68 66.986667 35.84 251.733333 121.173333 337.066667 101.973333 102.4 274.773333 82.346667 327.68 73.386666A426.666667 426.666667 0 0 0 469.333333 293.546667C384 208.64 198.826667 180.48 131.413333 172.8z"></path><path d="M601.173333 611.413333a11.093333 11.093333 0 0 1-8.96-4.693333 942.506667 942.506667 0 0 0-301.226666-291.84 10.666667 10.666667 0 0 1 10.666666-18.773333 981.333333 981.333333 0 0 1 308.906667 298.666666 11.52 11.52 0 0 1-3.413333 14.933334 14.933333 14.933333 0 0 1-5.973334 1.706666z"></path></svg>
<div>年龄</div>
<p>{{ age }}</p>
</div>
</li>
<li>
<div class="content-section__item">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M874 193.286c44.112 0 80 35.888 80 80v492.283c0 44.111-35.888 80-80 80H150c-44.112 0-80-35.889-80-80V273.286c0-44.112 35.888-80 80-80h724m0-70H150c-82.843 0-150 67.157-150 150v492.283c0 82.843 67.157 150 150 150h724c82.843 0 150-67.157 150-150V273.286c0-82.843-67.157-150-150-150z" fill="#333"></path><path d="M715.5 348.311c43.05 0 78.074 35.024 78.074 78.074s-35.024 78.074-78.074 78.074-78.074-35.024-78.074-78.074 35.024-78.074 78.074-78.074m0-70c-81.779 0-148.074 66.295-148.074 148.074 0 81.779 66.295 148.074 148.074 148.074s148.074-66.295 148.074-148.074c0-81.779-66.295-148.074-148.074-148.074z" fill="#333"></path><path d="M863.574 719.354c-19.33 0-35-15.67-35-35 0-62.349-50.725-113.073-113.074-113.073s-113.074 50.725-113.074 113.073c0 19.33-15.67 35-35 35s-35-15.67-35-35c0-100.947 82.127-183.073 183.074-183.073s183.074 82.126 183.074 183.073c0 19.331-15.67 35-35 35zM457.5 405.5h-312c-19.33 0-35-15.67-35-35s15.67-35 35-35h312c19.33 0 35 15.67 35 35s-15.67 35-35 35zM457.5 556h-312c-19.33 0-35-15.67-35-35s15.67-35 35-35h312c19.33 0 35 15.67 35 35s-15.67 35-35 35zM364.5 706.5h-219c-19.33 0-35-15.67-35-35s15.67-35 35-35h219c19.33 0 35 15.67 35 35s-15.67 35-35 35z" fill="#333"></path></svg>
<div>身份证号</div>
<p>{{ info.user.idcard }}</p>
</div>
</li>
<li>
<div class="content-section__item">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M888.9 1024H135.1c-74.4 0-135-60.6-135-135V225c0-74.4 60.6-135 135-135h753.7c74.4 0 135 60.6 135 135v664c0.1 74.4-60.5 135-134.9 135zM135.1 180c-24.8 0-45 20.2-45 45v664c0 24.8 20.2 45 45 45h753.7c24.8 0 45-20.2 45-45V225c0-24.8-20.2-45-45-45H135.1z" fill="#333"></path><path d="M302.5 271c-24.9 0-45-20.1-45-45V47c0-24.9 20.1-45 45-45s45 20.1 45 45v179c0 24.9-20.1 45-45 45zM721.5 271c-24.9 0-45-20.1-45-45V47c0-24.9 20.1-45 45-45s45 20.1 45 45v179c0 24.9-20.1 45-45 45zM45 336h934v90H45z"></path><path d="M538 661h-52c-24.9 0-45-20.1-45-45s20.1-45 45-45h52c24.9 0 45 20.1 45 45s-20.1 45-45 45zM778.5 661h-52c-24.9 0-45-20.1-45-45s20.1-45 45-45h52c24.9 0 45 20.1 45 45s-20.1 45-45 45zM297.5 661h-52c-24.9 0-45-20.1-45-45s20.1-45 45-45h52c24.9 0 45 20.1 45 45s-20.1 45-45 45zM538 811h-52c-24.9 0-45-20.1-45-45s20.1-45 45-45h52c24.9 0 45 20.1 45 45s-20.1 45-45 45zM778.5 811h-52c-24.9 0-45-20.1-45-45s20.1-45 45-45h52c24.9 0 45 20.1 45 45s-20.1 45-45 45zM297.5 811h-52c-24.9 0-45-20.1-45-45s20.1-45 45-45h52c24.9 0 45 20.1 45 45s-20.1 45-45 45z" fill="#333"></path></svg>
<div>入档日期</div>
<p>{{ info.user.rudangriqi }}</p>
</div>
</li>
<li>
<div class="content-section__item">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M245.344 64h536.704a85.344 85.344 0 0 1 85.312 85.344v725.312A85.344 85.344 0 0 1 782.08 960H245.344A85.344 85.344 0 0 1 160 874.656V149.344A85.344 85.344 0 0 1 245.344 64z m-2.816 70.72v636.64h542.304V134.752H242.56z m271.168 778.112a47.168 47.168 0 1 0 0-94.304 47.168 47.168 0 0 0 0 94.304z" fill="#000000"></path></svg>
<div>手机号</div>
<p>{{ info.user.mobile }}</p>
</div>
</li>
<li>
<div class="content-section__item">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M883.341 658.766l-217.724 226.12c-58.339 49.896-131.355 67.917-189.209 0l-339.37-339.462v0.128l-0.784-0.884-16.605-19.863-2.565-4.023a123.616 123.616 0 0 1-19.959-67.949l0.132-230.367C97.698 151.951 143.694 99.365 214.21 98.8l237.075-0.132a125.96 125.96 0 0 1 68.174 19.734l2.121 1.237 17.265 13.782c0.888 0.89 1.897 1.581 2.789 2.374l-0.223 0.22 341.934 341.934c63.935 60.157 38.701 142.077-0.004 180.817z m-46.466-136.002L496.622 184.137l-0.121 0.124a60.877 60.877 0 0 0-44.107-18.279l-230.254 0.062c-34.396 0.35-57.323 24.852-57.739 59.245v228.714a61.106 61.106 0 0 0 18.193 44.018v0.12l338.62 338.623a62.13 62.13 0 0 0 43.956 18.209 62.143 62.143 0 0 0 43.949-18.209l227.757-226.127a62.11 62.11 0 0 0-0.001-87.873z" fill="#2c2c2c"></path><path d="M319.002 383.995c-35.017-0.029-63.386-28.437-63.359-63.45 0.029-35.022 28.437-63.386 63.45-63.358 35.017 0.024 63.386 28.432 63.359 63.454-0.028 35.014-28.436 63.374-63.45 63.354z" fill="#2c2c2c"></path></svg>
<div>困难类型</div>
<p>{{ type.get(info.user.kunnanleixing) }}</p>
</div>
</li>
<li>
<div class="products">
<svg viewBox="0 0 52 52" style="border: 1px solid #C75DEB">
<g xmlns="http://www.w3.org/2000/svg">
<path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#3a3375" data-original="#3a3375" />
<path d="M27.44 39H24.2l-2.76-9.04h-8.32L10.48 39H7.36l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L13.88 27h6.84zM31.48 33.48c0 2.267 1.333 3.399 4 3.399 1.653 0 3.466-.546 5.44-1.64L42 37.6c-2.054 1.254-4.2 1.881-6.44 1.881-4.64 0-6.96-1.946-6.96-5.841v-8.2c0-2.16.673-3.841 2.02-5.04 1.346-1.2 3.126-1.801 5.34-1.801s3.94.594 5.18 1.78c1.24 1.187 1.86 2.834 1.86 4.94V30.8l-11.52.6v2.08zm8.6-5.24v-3.08c0-1.413-.44-2.42-1.32-3.021-.88-.6-1.907-.899-3.08-.899-1.174 0-2.167.359-2.98 1.08-.814.72-1.22 1.773-1.22 3.16v3.199l8.6-.439z" fill="#e4d1eb" data-original="#e7adfb" />
</g>
</svg>
After Effects
<div class="content-section__item">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"width="48" height="48"><path d="M896 810.688h85.312V896H42.688v-85.312H128v-640C128 147.072 147.072 128 170.688 128h426.624c23.552 0 42.688 19.072 42.688 42.688v640h170.688V469.312h-85.376V384h128a42.688 42.688 0 0 1 42.688 42.688v384zM213.312 213.312v597.376h341.376V213.312H213.312z m85.376 256h170.624v85.376H298.688V469.312z m0-170.624h170.624V384H298.688V298.688z"></path></svg>
<div>工作单位</div>
<p>{{ info.user.suozaidanwei }}</p>
</div>
</li>
</ul>
</div>
<!-- <Card shadow :bordered="false">-->
<!-- <template>-->
<!-- </template>-->
<!-- </Card>-->
<div class="content-section" v-if="info.logs.length > 0">
<div class="content-section__title">历史查询</div>
<Table class="log-table log-table1" :max-height="300" :data="info.logs" :columns="columns" size="small"></Table>
<Table class="log-table log-table2" :max-height="300" :data="info.logs" :columns="columns1" size="small"></Table>
</div>
<div class="print-btn">
<Button size="large" type="primary" @click="toPrint"></Button>
<Button size="large" type="primary" @click="toPrint" v-if="info.childrens.length > 0"></Button>
</div>
</div>
</template>
<script>
import { getAgeByIdcard, getSex } from "@/utils";
import { getToken } from "@/utils/auth";
import { userInfo } from "@/api/h5";
export default {
@ -60,7 +101,114 @@ export default {
user: {},
logs: [],
childrens: []
}
},
type: new Map([
[1,'特别困难'],
[2,'深度困难'],
[3,'相对困难'],
[4,'意外至困']
]),
area: new Map([
[1,'姑苏区'],
[2,'吴中区'],
[3,'园区']
]),
columns: [
{
title: '日期',
key: 'created_at',
align: 'center'
},
{
title: '类型',
key: 'type',
align: 'center',
render: (h,{ row }) => {
let type = new Map([
[1,'本人证明打印'],
[2,'子女证明打印'],
[3,'二维码核验']
])
return h('span',type.get(row.type))
}
},
{
title: 'IP',
key: 'ip',
align: 'center'
},
{
title: '浏览器',
key: 'liulanqi',
align: 'center'
},
{
title: '操作人',
align: 'center',
render: (h,{ row }) => {
return h('span',row.admin?.name)
}
}
],
columns1: [
{
type: 'expand',
width: 50,
render: (h,{ row }) => {
let type = new Map([
[1,'本人证明打印'],
[2,'子女证明打印'],
[3,'二维码核验']
])
return h('div',[
h('div',{
class: 'expand-item'
},[
h('span',{
class: 'expand-item__title'
},'类型'),
h('span',{
class: 'expand-item__value'
},type.get(row.type))
]),
h('div',{
class: 'expand-item'
},[
h('span',{
class: 'expand-item__title'
},'浏览器'),
h('span',{
class: 'expand-item__value'
},row.liulanqi)
]),
h('div',{
class: 'expand-item'
},[
h('span',{
class: 'expand-item__title'
},'IP'),
h('span',{
class: 'expand-item__value'
},row.ip)
])
])
}
},
{
title: '操作人',
align: 'center',
render: (h,{ row }) => {
return h('span',row.admin?.name)
}
},
{
title: '日期',
key: 'created_at',
align: 'center',
width: 160
},
]
}
},
methods: {
@ -70,9 +218,26 @@ export default {
})
this.info = res;
},
toPrint (e,isChild = 0) {
this.$router.push({
path: '/print',
query: {
bm: window.btoa(this.info.user.bianma),
isChild: window.btoa(isChild)
}
})
},
},
computed: {
age () {
return this.info.user.idcard ? getAgeByIdcard(this.info.user.idcard) : '-';
},
sex () {
return this.info.user.idcard ? getSex(this.info.user.idcard) : '-';
}
},
computed: {},
created() {
this.getUserInfo();
}
@ -83,14 +248,26 @@ export default {
.page {
width: 100%;
height: 100%;
background: rgb(255 255 255 );
}
.content-section {
margin-top: 30px;
display: flex;
flex-direction: column;
&-title {
&__title {
color: #999ba5;
margin-bottom: 14px;
font-weight: 600;
}
&__item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
& > div {
flex: 1;
}
}
ul {
display: flex;
@ -135,17 +312,95 @@ export default {
}
}
}
::v-deep .expand-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 10px;
&__title {
flex-basis: 30%;
flex-shrink: 0;
font-weight: 600;
color: #333
}
&__value {
flex: 1;
}
}
.print-btn {
display: flex;
align-items: center;
justify-content: center;
margin-top: 40px;
padding-bottom: 20px;
& > Button {
border-radius: 12px;
& + Button {
margin-left: 40px;
}
}
}
@media (min-width: 768px) {
.page {
padding: 40px;
}
.log-table2 {
display: none;
}
}
@media (max-width: 768px) {
.page {
padding: 20px;
}
.log-table1 {
display: none;
}
.content-section {
ul {
border-radius: 10px;
li {
font-size: 14px;
padding: 2px 14px;
&:hover {
&:first-child {
border-radius: 10px 10px 0 0;
}
&:last-child {
border-radius: 0 0 10px 10px;
}
}
svg {
width: 18px;
}
}
}
}
.print-btn {
margin-top: 20px;
& > Button {
flex: 1;
font-size: 14px;
& + Button {
margin-left: 4vw;
}
}
}
}
</style>

@ -42,7 +42,7 @@ import html2canvas from "html2canvas";
import Jspdf from "jspdf";
import printJS from "print-js";
import { userInfo } from "@/api/h5";
import { updateLog, userInfo } from "@/api/h5";
export default {
data() {
return {
@ -73,9 +73,15 @@ export default {
},
creatQrCode() {
let { href } = this.$router.resolve({
path: this.$route.fullPath,
query: {
isQr: 1
}
});
let w = this.$refs['box']?.getBoundingClientRect()?.width;
new QRCode(this.$refs.qrcode, {
text: window.location.href, //
text: `${window.location.origin}${window.location.pathname}${href}`, //
width: (w * 0.14) || 74,
height: (w * 0.14) || 74,
colorDark: '#000',
@ -193,6 +199,10 @@ export default {
documentTitle: `困难职工证明-${this.info.name}`,
style: '@page{margin: 0 10mm;}'
})
updateLog({
bianma: window.atob(this.$route.query.bm),
type: window.atob(this.$route.query.isChild) == 0 ? 1 : 2
})
}).catch(err => this.isToImg = true)
}
},
@ -206,6 +216,12 @@ export default {
}
},
created() {
if (this.$route.query.isQr && this.$route.query.bm) {
updateLog({
bianma: window.atob(this.$route.query.bm),
type: 3
})
}
},
mounted() {
if (this.$route.query.bm) {

@ -262,6 +262,7 @@
>
<template #print="{ row }">
<Button size="small" type="primary" @click="toPrint(row)"></Button>
<Button v-if="row.id_childrens_record_id_relation.length > 0" size="small" type="primary" @click="toPrint(row,1)"></Button>
</template>
</xy-table>
@ -335,13 +336,13 @@ export default {
};
},
methods: {
toPrint (row,isChild = false) {
toPrint (row,isChild = 0) {
console.log(row);
const url = this.$router.resolve({
path: '/print',
query: {
bm: window.btoa(row.bianma),
isChild
isChild: window.btoa(isChild)
}
})
window.open(url.href)

Loading…
Cancel
Save