456 lines
11 KiB
Vue
456 lines
11 KiB
Vue
<template>
|
|
<div class="AppMarryAndDie">
|
|
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
|
|
|
|
<div v-show="currentTabs == 0" class="msg">
|
|
<div class="box">
|
|
<div class="card" @click="toList(0)">
|
|
<div class="imgleft">
|
|
<span class="titles">活动登记情况</span>
|
|
<span class="titlesContent">查看全部活动和本月新增</span>
|
|
</div>
|
|
|
|
<img src="./img/1.png" alt="" />
|
|
</div>
|
|
|
|
<div class="card" @click="toList(1)">
|
|
<div class="imgleft">
|
|
<span class="titles">干部参与情况</span>
|
|
<span class="titlesContent">查看全部参与操办信息和本月新增</span>
|
|
</div>
|
|
|
|
<img src="./img/2.png" alt="" />
|
|
</div>
|
|
|
|
<div class="card" @click="toList(2)">
|
|
<div class="imgleft">
|
|
<span class="titles">婚礼登记情况</span>
|
|
<span class="titlesContent">查看全部婚礼和本月新增</span>
|
|
</div>
|
|
|
|
<img src="./img/3.png" alt="" />
|
|
</div>
|
|
|
|
<div class="card" @click="toList(3)">
|
|
<div class="imgleft">
|
|
<span class="titles">丧礼登记情况</span>
|
|
<span class="titlesContent">查看全部丧礼和本月新增</span>
|
|
</div>
|
|
|
|
<img src="./img/4.png" alt="" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="line"></div>
|
|
|
|
<div class="chart">
|
|
<p>本年统计</p>
|
|
|
|
<div class="yearStatistics" id="yearStatistic"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="currentTabs == 1" class="myReport">
|
|
<template v-if="datas.length > 0">
|
|
<AiCard v-for="(item, i) in datas" :key="i">
|
|
<template #custom>
|
|
<div class="names">
|
|
<span>事主姓名</span>
|
|
<span class="right">{{ item.name }}</span>
|
|
</div>
|
|
|
|
<div class="phones">
|
|
<span>联系方式</span>
|
|
<span class="right">{{ item.phone }}</span>
|
|
</div>
|
|
|
|
<div class="times">
|
|
<span>上报时间</span>
|
|
<span class="right" v-if="item.createTime">{{ item.createTime.substring(0, item.createTime.length - 3) }}</span>
|
|
</div>
|
|
|
|
<div class="areaNames">
|
|
<span>上报地点</span>
|
|
<span class="right">{{ item.address }}</span>
|
|
</div>
|
|
|
|
<div class="contents">
|
|
<span>上报内容</span>
|
|
<span class="right">{{ item.content }}</span>
|
|
</div>
|
|
|
|
<div class="imgs">
|
|
<img :src="e.url" alt="" v-for="(e, i) in item.files" :key="i" />
|
|
</div>
|
|
|
|
<span class="types" :style="{ background: item.type == 0 ? '#FF65B8' : item.type == 1 ? '#FF883C' : '#1AAAFF' }">
|
|
{{ $dict.getLabel('marriageType', item.type) }}
|
|
</span>
|
|
</template>
|
|
|
|
<template #menu>
|
|
<div class="menu" @tap.stop="toDetele(item)">删除</div>
|
|
</template>
|
|
</AiCard>
|
|
|
|
<u-loadmore :status="loadmore" color="#999" font-size="24" margin-top="32" margin-bottom="80" />
|
|
</template>
|
|
|
|
<AiEmpty description="暂无数据" v-else></AiEmpty>
|
|
|
|
<div class="fixedBtn" @click="toAdd">我要上报</div>
|
|
|
|
<u-modal v-model="deletShow" content="您确认要删除该条信息吗？" :show-cancel-button="true" :mask-close-able="true" :show-title="false" @confirm="delet"></u-modal>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts'
|
|
import { mapState } from 'vuex'
|
|
|
|
export default {
|
|
name: 'AppMarryAndDie',
|
|
appName: '婚丧嫁娶',
|
|
components: {},
|
|
props: {},
|
|
data() {
|
|
return {
|
|
currentTabs: 0,
|
|
tabList: [
|
|
{
|
|
name: '统计信息',
|
|
},
|
|
{
|
|
name: '我的上报',
|
|
},
|
|
],
|
|
Echart: null,
|
|
datas: [],
|
|
current: 1,
|
|
deletShow: false,
|
|
deletId: '',
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user', 'global']),
|
|
|
|
loadmore() {
|
|
return this.pages <= this.current ? 'loading ' : 'nomore'
|
|
},
|
|
},
|
|
watch: {},
|
|
onLoad(o) {
|
|
if (o.indexTabs) {
|
|
this.currentTabs = o.indexTabs
|
|
}
|
|
|
|
this.$dict.load('marriageType', 'modeType').then(() => {
|
|
this.getList()
|
|
this.getEchart()
|
|
})
|
|
},
|
|
mounted() {
|
|
this.Echart = echarts.init(document.getElementById('yearStatistic'))
|
|
},
|
|
methods: {
|
|
getList() {
|
|
this.$http
|
|
.post('/app/appmarriagefuneralinfo/list', null, {
|
|
params: {
|
|
size: 6,
|
|
current: this.current,
|
|
createUserId: this.user.id,
|
|
},
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 0) {
|
|
this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
|
|
this.pages = res.data.pages
|
|
}
|
|
})
|
|
},
|
|
|
|
getEchart() {
|
|
this.$http.post(`/app/appmarriagefuneralinfo/queryDataStatistics`).then((res) => {
|
|
if (res.code === 0) {
|
|
this.initEchart(res.data.slice(0, 4))
|
|
}
|
|
})
|
|
},
|
|
|
|
initEchart(data) {
|
|
var option = {
|
|
xAxis: {
|
|
type: 'category',
|
|
data: data.map((v) => v.name.replace('数量', '').replace('和操办登记', '')),
|
|
axisLine: {
|
|
lineStyle: { color: '#157EFF' },
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
},
|
|
axisTick: {
|
|
interval: 'auto',
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#666',
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#D8DDE6',
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: true, //是否显示刻度标签
|
|
interval: 0,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
color: '#0072FF',
|
|
barWidth: 30,
|
|
data: data.map((v) => v.v1),
|
|
type: 'bar',
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
textStyle: {
|
|
color: '#919191',
|
|
fontSize: 16,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
}
|
|
|
|
option && this.Echart.setOption(option)
|
|
},
|
|
|
|
toDetele(item) {
|
|
this.deletShow = true
|
|
this.deletId = item.id
|
|
},
|
|
|
|
delet() {
|
|
this.$http.post(`/app/appmarriagefuneralinfo/delete?ids=${this.deletId}`).then((res) => {
|
|
if (res.code == 0) {
|
|
this.$u.toast('删除成功！')
|
|
this.getList()
|
|
}
|
|
})
|
|
},
|
|
|
|
toAdd() {
|
|
uni.navigateTo({ url: `./Add` })
|
|
},
|
|
|
|
toList(num) {
|
|
if (num == 0) {
|
|
console.log('全部')
|
|
uni.navigateTo({ url: `./AllActiveList` })
|
|
}
|
|
if (num == 1) {
|
|
console.log('干部')
|
|
uni.navigateTo({ url: `./CadreList` })
|
|
}
|
|
if (num == 2) {
|
|
console.log('婚礼')
|
|
uni.navigateTo({ url: `./MarryList` })
|
|
}
|
|
if (num == 3) {
|
|
console.log('丧礼')
|
|
uni.navigateTo({ url: `./FuneralList` })
|
|
}
|
|
},
|
|
|
|
change(index) {
|
|
this.currentTabs = index
|
|
this.getList()
|
|
this.getEchart()
|
|
},
|
|
},
|
|
onReachBottom() {
|
|
this.current = this.current + 1
|
|
this.getList()
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
uni-page-body {
|
|
height: 100%;
|
|
background: #f3f6f9;
|
|
}
|
|
.AppMarryAndDie {
|
|
height: 100%;
|
|
|
|
.msg {
|
|
height: 100%;
|
|
background: #fff;
|
|
.box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
padding: 32px;
|
|
.card {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 49%;
|
|
margin-top: 8px;
|
|
padding: 18px 24px 34px;
|
|
box-sizing: border-box;
|
|
background: #f6f7f8;
|
|
.imgleft {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-right: 20px;
|
|
width: 64%;
|
|
.titles {
|
|
font-size: 30px;
|
|
font-weight: 500;
|
|
}
|
|
.titlesContent {
|
|
font-size: 24px;
|
|
color: #999999;
|
|
}
|
|
}
|
|
img {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
}
|
|
|
|
.card:nth-child(-n + 2) {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.line {
|
|
height: 16px;
|
|
background: #f3f6f9;
|
|
}
|
|
|
|
.chart {
|
|
p {
|
|
padding: 26px 0 26px 32px;
|
|
font-size: 32px;
|
|
font-weight: 500;
|
|
}
|
|
.yearStatistics {
|
|
width: 100%;
|
|
height: 600px;
|
|
}
|
|
}
|
|
}
|
|
.myReport {
|
|
background: #f3f6f9;
|
|
padding-bottom: 112px;
|
|
|
|
::v-deep .AiCard {
|
|
background: #f3f6f9;
|
|
.start {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #fff;
|
|
padding: 32px 32px 36px 32px;
|
|
border-radius: 16px;
|
|
.names,
|
|
.phones,
|
|
.times,
|
|
.areaNames,
|
|
.contents {
|
|
display: flex;
|
|
margin-top: 8px;
|
|
.right {
|
|
width: 76%;
|
|
margin-left: 32px;
|
|
font-size: 26px;
|
|
color: #333333;
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
}
|
|
.contents {
|
|
.right {
|
|
-webkit-line-clamp: 3;
|
|
}
|
|
}
|
|
.imgs {
|
|
margin-top: 8px;
|
|
img {
|
|
width: 201px;
|
|
height: 204px;
|
|
margin-right: 8px;
|
|
}
|
|
img:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.types {
|
|
display: inline-block;
|
|
margin-top: 32px;
|
|
border-radius: 8px;
|
|
padding: 4px 8px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.mask {
|
|
.moreMenu {
|
|
transform: translate(-175px, 20px);
|
|
.menu {
|
|
text-align: center;
|
|
line-height: 80px;
|
|
width: 192px;
|
|
height: 80px;
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.emptyWrap {
|
|
background: #f3f6f9;
|
|
}
|
|
|
|
.u-load-more-wrap {
|
|
background: #f3f6f9 !important;
|
|
margin: 0 !important;
|
|
padding: 30px 0;
|
|
}
|
|
|
|
.fixedBtn {
|
|
position: fixed;
|
|
width: 100%;
|
|
z-index: 999;
|
|
bottom: 0;
|
|
background: #3975c6;
|
|
padding: 32px 0;
|
|
text-align: center;
|
|
font-size: 32px;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|