乡村相册
This commit is contained in:
yanran200730
174
src/saas/AppCountryAlbum/components/report/Daily.vue
Normal file
174
src/saas/AppCountryAlbum/components/report/Daily.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="Daily" ref="home">
|
||||
<div class="top">
|
||||
<span>请输入汇报单位</span>
|
||||
</div>
|
||||
<div class="body">
|
||||
<h2>今日工作</h2>
|
||||
<div class="subtitle">工作拍照汇总</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="bottom-item__wrapper">
|
||||
<div class="bottom-item">
|
||||
<div class="left">
|
||||
<label>汇报人：</label>
|
||||
<span>鄢然</span>
|
||||
</div>
|
||||
<i>2022-04-14</i>
|
||||
</div>
|
||||
<div class="bottom-item">
|
||||
<label>总结：</label>
|
||||
<span>鄢鄢然鄢然鄢然鄢然鄢然鄢然鄢然鄢然鄢然鄢然然</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add">
|
||||
<div class="add-btn">
|
||||
<span>添加图片</span>
|
||||
</div>
|
||||
<div class="add-btn">
|
||||
<span>添加文字</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import html2canvas from 'html2canvas'
|
||||
export default {
|
||||
name: 'Daily',
|
||||
|
||||
label: '日报',
|
||||
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
onLoad () {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
choose () {
|
||||
html2canvas(this.$refs.home, {
|
||||
allowTaint: true,
|
||||
useCORS: true,
|
||||
backgroundColor: '#fff',
|
||||
width: this.$refs.home.offsetWidth,
|
||||
scale: 4,
|
||||
}).then((canvas) => {
|
||||
let dataURL = canvas.toDataURL("image/png");
|
||||
this.src = dataURL
|
||||
console.log(dataURL)
|
||||
}).catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Daily {
|
||||
padding: 40px 32px 0;
|
||||
background: #fff;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 0 16px;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
border-bottom: 4px solid #000;
|
||||
}
|
||||
|
||||
.body {
|
||||
margin-top: 16px;
|
||||
|
||||
h2 {
|
||||
font-size: 68px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
color: #000;
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 24px;
|
||||
|
||||
.bottom-item__wrapper {
|
||||
.bottom-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 64px;
|
||||
margin-bottom: 16px;
|
||||
padding: 0 16px;
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
background: #D84A36;
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
height: auto;
|
||||
line-height: 1.3;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 0;
|
||||
color: #D84A36;
|
||||
font-size: 28px;
|
||||
text-align: justify;
|
||||
border: 3px solid #DB6352;
|
||||
background: #fff;
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 480px;
|
||||
margin-top: 32px;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8px;
|
||||
|
||||
.add-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 232px;
|
||||
height: 80px;
|
||||
color: #FFFFFF;
|
||||
font-size: 32px;
|
||||
background: #408EF6;
|
||||
border-radius: 40px;
|
||||
|
||||
&:last-child {
|
||||
margin-top: 48px;
|
||||
color: #408EF6;
|
||||
background: #E7F5FE;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
155
src/saas/AppCountryAlbum/components/report/InspectLog.vue
Normal file
155
src/saas/AppCountryAlbum/components/report/InspectLog.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div class="InspectLog">
|
||||
<div class="top">
|
||||
</div>
|
||||
<div class="body">
|
||||
<h2>今日工作</h2>
|
||||
<div class="subtitle">工作拍照汇总</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="bottom-item__wrapper">
|
||||
<div class="bottom-item">
|
||||
<div class="left">
|
||||
<label>巡查人：</label>
|
||||
<span>鄢然</span>
|
||||
</div>
|
||||
<i>2022-04-14 晴 22℃</i>
|
||||
</div>
|
||||
<div class="bottom-item">
|
||||
<label>巡查情况：</label>
|
||||
<span>鄢鄢然鄢然鄢然鄢然鄢然鄢然鄢然鄢然鄢然鄢然然</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add">
|
||||
<div class="add-btn">
|
||||
<span>添加图片</span>
|
||||
</div>
|
||||
<div class="add-btn">
|
||||
<span>添加文字</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'InspectLog',
|
||||
|
||||
label: '巡查日志',
|
||||
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
onLoad () {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.InspectLog {
|
||||
padding: 48px 32px 0;
|
||||
background: #133CA5;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
background: url(./../../images/xc-icon.png) repeat;
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
|
||||
.body {
|
||||
margin-top: 32px;
|
||||
|
||||
h2 {
|
||||
font-size: 112px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-bottom: 32px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 24px;
|
||||
|
||||
.bottom-item__wrapper {
|
||||
.bottom-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 64px;
|
||||
margin-bottom: 16px;
|
||||
padding: 0 16px;
|
||||
color: #133CA5;
|
||||
font-size: 28px;
|
||||
background: #F9FC4D;
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
height: auto;
|
||||
line-height: 1.3;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 0;
|
||||
font-size: 28px;
|
||||
text-align: justify;
|
||||
border: 3px solid #F9FC4D;
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 480px;
|
||||
margin-top: 72px;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8px;
|
||||
|
||||
.add-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 232px;
|
||||
height: 80px;
|
||||
color: #FFFFFF;
|
||||
font-size: 32px;
|
||||
background: #408EF6;
|
||||
border-radius: 40px;
|
||||
|
||||
&:last-child {
|
||||
margin-top: 48px;
|
||||
color: #408EF6;
|
||||
background: #E7F5FE;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
151
src/saas/AppCountryAlbum/components/report/MeetingMminutes.vue
Normal file
151
src/saas/AppCountryAlbum/components/report/MeetingMminutes.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div class="MeetingMminutes">
|
||||
<table class="table" border="1" cellspacing="0" cellpadding="16px" bordercolor="#2774CE" @click="choose" ref="home">
|
||||
<tr>
|
||||
<th colspan="4" class="title">会议纪要</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="nowrap">会议日期</td>
|
||||
<td>2022-01-21 周五</td>
|
||||
<td class="nowrap">天气</td>
|
||||
<td>24℃ 晴</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="nowrap">会议主题</td>
|
||||
<td colspan="3">会议主题会议主题会议主题会议主题会议主题</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="nowrap">主持人</td>
|
||||
<td>鄢然</td>
|
||||
<td class="nowrap">记录人</td>
|
||||
<td>刘烨</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="nowrap">参与人</td>
|
||||
<td colspan="3">2022-01-21 周五</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="nowrap">会议地点</td>
|
||||
<td colspan="3">2022-01-21 周五</td>
|
||||
</tr>
|
||||
<tr colspan="2">
|
||||
<td class="nowrap">会议内容</td>
|
||||
<td colspan="3">2022-01-21 周五</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="bottom">
|
||||
<div class="add">
|
||||
<div class="add-btn" @click="choose">
|
||||
<span>添加图片</span>
|
||||
</div>
|
||||
<div class="add-btn">
|
||||
<span>添加文字</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import html2canvas from 'html2canvas'
|
||||
export default {
|
||||
name: 'MeetingMminutes',
|
||||
|
||||
label: '会议纪要',
|
||||
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
onLoad () {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
choose () {
|
||||
html2canvas(this.$refs.home, {
|
||||
allowTaint: true,
|
||||
useCORS: true,
|
||||
backgroundColor: '#fff',
|
||||
width: this.$refs.home.offsetWidth,
|
||||
scale: 2,
|
||||
}).then((canvas) => {
|
||||
let dataURL = canvas.toDataURL("image/png");
|
||||
this.src = dataURL
|
||||
console.log(dataURL)
|
||||
}).catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.MeetingMminutes {
|
||||
padding: 48px 32px 0;
|
||||
background: #fff;
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-spacing: none;
|
||||
text-align: justify;
|
||||
|
||||
.title {
|
||||
color: #2774CE;
|
||||
font-size: 58px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
color: #2774CE;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 48px;
|
||||
|
||||
.add {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 480px;
|
||||
margin-top: 72px;
|
||||
background: #F7F7F7;
|
||||
border-radius: 8px;
|
||||
|
||||
.add-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 232px;
|
||||
height: 80px;
|
||||
color: #FFFFFF;
|
||||
font-size: 32px;
|
||||
background: #408EF6;
|
||||
border-radius: 40px;
|
||||
|
||||
&:last-child {
|
||||
margin-top: 48px;
|
||||
color: #408EF6;
|
||||
background: #E7F5FE;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
245
src/saas/AppCountryAlbum/components/report/WorkReport.vue
Normal file
245
src/saas/AppCountryAlbum/components/report/WorkReport.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<div class="WorkReport" ref="report">
|
||||
<div class="top" @click="linkTo('./ReportConfig')">
|
||||
<span>{{ form.unit || '请输入汇报单位' }}</span>
|
||||
<span>{{ form.date || '请选择日期' }}</span>
|
||||
</div>
|
||||
<div class="body" @click="linkTo('./ReportConfig')">
|
||||
<h2>工作汇报</h2>
|
||||
<div class="subtitle">{{ form.title || '请输入标题' }}</div>
|
||||
<div class="partition">
|
||||
<div><i></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="bottom-item__wrapper" @click="linkTo('./ReportConfig')">
|
||||
<div class="bottom-item">
|
||||
<label>汇报人：{{ form.name || '请输入汇报人姓名' }}</label>
|
||||
</div>
|
||||
<div class="bottom-item">
|
||||
<span>备注：{{ '请输入备注' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add" data-html2canvas-ignore ref="add">
|
||||
<div class="add-btn">
|
||||
<span>添加图片</span>
|
||||
</div>
|
||||
<div class="add-btn">
|
||||
<span>添加文字</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<image v-if="waterSrc" :src="waterSrc" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import html2canvas from 'html2canvas'
|
||||
export default {
|
||||
name: 'WorkReport',
|
||||
|
||||
label: '工作汇报',
|
||||
|
||||
data () {
|
||||
return {
|
||||
waterSrc: '',
|
||||
form: {
|
||||
unit: '',
|
||||
title: '',
|
||||
date: '',
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
uni.$on('change', e => {
|
||||
console.log(e)
|
||||
e.forEach(v => {
|
||||
this.form[v.key] = v.value
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
save () {
|
||||
const height = this.$refs.report.offsetHeight - this.$refs.add.offsetHeight
|
||||
html2canvas(this.$refs.report, {
|
||||
allowTaint: true,
|
||||
useCORS: true,
|
||||
height
|
||||
}).then((canvas) => {
|
||||
let dataURL = canvas.toDataURL('image/png')
|
||||
this.waterSrc = dataURL
|
||||
}).catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
},
|
||||
|
||||
linkTo (path) {
|
||||
const data = [
|
||||
{
|
||||
type: 'text',
|
||||
key: 'unit',
|
||||
value: '',
|
||||
label: '汇报单位'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
key: 'title',
|
||||
value: '',
|
||||
label: '标题'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
key: 'name',
|
||||
value: '',
|
||||
label: '汇报人'
|
||||
},
|
||||
{
|
||||
type: 'date',
|
||||
key: 'date',
|
||||
value: '',
|
||||
label: '汇报日期'
|
||||
}
|
||||
]
|
||||
uni.navigateTo({
|
||||
url: `${path}?params=${JSON.stringify(data)}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.WorkReport {
|
||||
padding: 40px 32px 0;
|
||||
background: #F6F4F0;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
border-bottom: 4px solid #E3464B;
|
||||
}
|
||||
|
||||
.body {
|
||||
margin-top: 8px;
|
||||
|
||||
h2 {
|
||||
font-size: 112px;
|
||||
color: #E3464B;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
border-top: 2px solid #E3464B;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 10px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
border-radius: 30px;
|
||||
color: #E3464B;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
border: 3px solid #E3464B;
|
||||
}
|
||||
|
||||
.partition {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
div {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 0 6px;
|
||||
background: #F6F4F0;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #E3464B;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #E3464B;
|
||||
transform: translateY(-50%);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 6px;
|
||||
padding-top: 16px;
|
||||
border-top: 4px solid #E3464B;
|
||||
|
||||
.bottom-item__wrapper {
|
||||
.bottom-item {
|
||||
display: flex;
|
||||
line-height: 44px;
|
||||
margin-bottom: 16px;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 480px;
|
||||
margin-top: 32px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
|
||||
.add-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 232px;
|
||||
height: 80px;
|
||||
color: #FFFFFF;
|
||||
font-size: 32px;
|
||||
background: #408EF6;
|
||||
border-radius: 40px;
|
||||
|
||||
&:last-child {
|
||||
margin-top: 48px;
|
||||
color: #408EF6;
|
||||
background: #E7F5FE;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user