first commit
This commit is contained in:
ylj20011123
parent
c8f020d72e
commit
41d431011b
@ -56,33 +56,37 @@
|
||||
|
||||
<!-- 统计汇总卡片 -->
|
||||
<view class="summaryCards" v-if="attendanceStatisticsData.length > 0">
|
||||
<view class="summaryCard">
|
||||
<view class="summaryCard clickable" @click="showDetailModal('schedule')">
|
||||
<view class="cardIcon scheduleIcon">📋</view>
|
||||
<view class="cardContent">
|
||||
<text class="cardNumber">{{ getSummaryData().totalSchedule }}</text>
|
||||
<text class="cardLabel">总排班</text>
|
||||
</view>
|
||||
<view class="cardArrow">›</view>
|
||||
</view>
|
||||
<view class="summaryCard">
|
||||
<view class="summaryCard clickable" @click="showDetailModal('attend')">
|
||||
<view class="cardIcon attendIcon">✅</view>
|
||||
<view class="cardContent">
|
||||
<text class="cardNumber">{{ getSummaryData().totalAttend }}</text>
|
||||
<text class="cardLabel">总出勤</text>
|
||||
</view>
|
||||
<view class="cardArrow">›</view>
|
||||
</view>
|
||||
<view class="summaryCard">
|
||||
<view class="summaryCard clickable" @click="showDetailModal('late')">
|
||||
<view class="cardIcon lateIcon">⏰</view>
|
||||
<view class="cardContent">
|
||||
<text class="cardNumber">{{ getSummaryData().totalLate }}</text>
|
||||
<text class="cardLabel">迟到次数</text>
|
||||
</view>
|
||||
<view class="cardArrow">›</view>
|
||||
</view>
|
||||
<view class="summaryCard">
|
||||
<view class="summaryCard clickable" @click="showDetailModal('early')">
|
||||
<view class="cardIcon earlyIcon">🏃</view>
|
||||
<view class="cardContent">
|
||||
<text class="cardNumber">{{ getSummaryData().totalEarly }}</text>
|
||||
<text class="cardLabel">早退次数</text>
|
||||
</view>
|
||||
<view class="cardArrow">›</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -184,6 +188,47 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<view class="detailModal" v-if="showDetailPopup" @click="closeDetailModal">
|
||||
<view class="modalContent" @click.stop="">
|
||||
<view class="modalHeader">
|
||||
<text class="modalTitle">{{ getModalTitle() }}</text>
|
||||
<view class="closeBtn" @click="closeDetailModal">×</view>
|
||||
</view>
|
||||
|
||||
<view class="modalBody">
|
||||
<view class="summaryInfo">
|
||||
<text class="totalText">总计：{{ getCurrentModalTotal() }}</text>
|
||||
<text class="countText">{{ attendanceStatisticsData.length }}人</text>
|
||||
</view>
|
||||
|
||||
<view class="employeeRankList">
|
||||
<view class="rankHeader">
|
||||
<text class="rankTitle">人员排名</text>
|
||||
</view>
|
||||
|
||||
<view class="rankScrollArea">
|
||||
<view class="rankItem" v-for="(item, index) in getSortedData()" :key="index">
|
||||
<view class="rankNumber"
|
||||
:class="index === 0 ? 'rank-1' : index === 1 ? 'rank-2' : index === 2 ? 'rank-3' : ''">
|
||||
{{ index + 1 }}</view>
|
||||
<view class="employeeInfo">
|
||||
<view class="employeeText">
|
||||
<text class="name">{{ item.userName || "-" }}</text>
|
||||
<text class="phone">{{ item.phone || item.userCode || "-" }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rankValue">
|
||||
<text class="numberWithUnit">{{ getCurrentValue(item) }}{{ getCurrentUnit()
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日历组件 -->
|
||||
<uni-calendar ref="calendar" :insert="false" :mask-closable="true" @confirm="onCalendarConfirm"
|
||||
@close="onCalendarClose" />
|
||||
@ -207,7 +252,10 @@ export default {
|
||||
seatInfo: {},
|
||||
loading: false,
|
||||
hasLoaded: false, // 是否已经完成过初始加载
|
||||
retryCount: 0
|
||||
retryCount: 0,
|
||||
// 详情弹窗相关
|
||||
showDetailPopup: false,
|
||||
currentDetailType: 'schedule' // 'schedule', 'attend', 'late', 'early'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
@ -266,6 +314,75 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
// 显示详情弹窗
|
||||
showDetailModal(type) {
|
||||
this.currentDetailType = type
|
||||
this.showDetailPopup = true
|
||||
this.showPopup = true // 禁止页面滚动
|
||||
},
|
||||
|
||||
// 关闭详情弹窗
|
||||
closeDetailModal() {
|
||||
this.showDetailPopup = false
|
||||
this.showPopup = false // 恢复页面滚动
|
||||
},
|
||||
|
||||
// 获取弹窗标题
|
||||
getModalTitle() {
|
||||
const titles = {
|
||||
schedule: '排班情况详情',
|
||||
attend: '出勤情况详情',
|
||||
late: '迟到情况详情',
|
||||
early: '早退情况详情'
|
||||
}
|
||||
return titles[this.currentDetailType] || '详情'
|
||||
},
|
||||
|
||||
// 获取当前模态总数
|
||||
getCurrentModalTotal() {
|
||||
const summary = this.getSummaryData()
|
||||
const totals = {
|
||||
schedule: summary.totalSchedule + '天',
|
||||
attend: summary.totalAttend + '天',
|
||||
late: summary.totalLate + '次',
|
||||
early: summary.totalEarly + '次'
|
||||
}
|
||||
return totals[this.currentDetailType] || '0'
|
||||
},
|
||||
|
||||
// 获取单位
|
||||
getCurrentUnit() {
|
||||
const units = {
|
||||
schedule: '天',
|
||||
attend: '天',
|
||||
late: '次',
|
||||
early: '次'
|
||||
}
|
||||
return units[this.currentDetailType] || '天'
|
||||
},
|
||||
|
||||
// 获取当前项的值
|
||||
getCurrentValue(item) {
|
||||
const values = {
|
||||
schedule: item.scheduleTotal || 0,
|
||||
attend: item.attendTotal || 0,
|
||||
late: item.lateTotal || 0,
|
||||
early: item.earlyTotal || 0
|
||||
}
|
||||
return values[this.currentDetailType] || 0
|
||||
},
|
||||
|
||||
// 获取排序后的数据
|
||||
getSortedData() {
|
||||
const data = [...this.attendanceStatisticsData]
|
||||
return data.sort((a, b) => {
|
||||
const valueA = this.getCurrentValue(a)
|
||||
const valueB = this.getCurrentValue(b)
|
||||
return valueB - valueA // 从大到小排序
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
// 显示日历
|
||||
showCalendar() {
|
||||
this.$refs.calendar.open()
|
||||
@ -599,6 +716,17 @@ export default {
|
||||
box-shadow: @shadow;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
&.clickable {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
background: #f8f9fa;
|
||||
}
|
||||
}
|
||||
|
||||
.cardIcon {
|
||||
font-size: 40rpx;
|
||||
@ -640,6 +768,13 @@ export default {
|
||||
color: @muted;
|
||||
}
|
||||
}
|
||||
|
||||
.cardArrow {
|
||||
font-size: 32rpx;
|
||||
color: #ccc;
|
||||
font-weight: bold;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -955,5 +1090,217 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 详情弹窗样式
|
||||
.detailModal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: 60rpx 40rpx;
|
||||
|
||||
.modalContent {
|
||||
width: calc(100vw - 64rpx);
|
||||
max-height: 80vh;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
|
||||
|
||||
.modalHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 40rpx;
|
||||
border-bottom: 2rpx solid #f5f5f5;
|
||||
background: linear-gradient(135deg, @primary, @primary2);
|
||||
|
||||
.modalTitle {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.closeBtn {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modalBody {
|
||||
padding: 32rpx 40rpx;
|
||||
max-height: 60vh;
|
||||
|
||||
.summaryInfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
.totalText {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.countText {
|
||||
font-size: 24rpx;
|
||||
color: @muted;
|
||||
background: #fff;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.employeeRankList {
|
||||
.rankHeader {
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.rankTitle {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
}
|
||||
|
||||
.rankScrollArea {
|
||||
max-height: 40vh;
|
||||
overflow-y: auto;
|
||||
|
||||
/* 隐藏滚动条 */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 兼容其他浏览器 */
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.rankItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx 20rpx;
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 16rpx;
|
||||
border: 2rpx solid #f5f5f5;
|
||||
|
||||
&:nth-child(1) {
|
||||
// 第一名
|
||||
border-color: #ffd700;
|
||||
background: linear-gradient(135deg, #fff9e6, #fff);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
// 第二名
|
||||
border-color: #c0c0c0;
|
||||
background: linear-gradient(135deg, #f8f8f8, #fff);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
// 第三名
|
||||
border-color: #cd7f32;
|
||||
background: linear-gradient(135deg, #fdf2e9, #fff);
|
||||
}
|
||||
|
||||
.rankNumber {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
background: @primary;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.rank-1 {
|
||||
background: linear-gradient(135deg, #ffd700, #ffed4e);
|
||||
color: #333;
|
||||
box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3);
|
||||
}
|
||||
|
||||
&.rank-2 {
|
||||
background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
|
||||
color: #333;
|
||||
box-shadow: 0 4rpx 12rpx rgba(192, 192, 192, 0.3);
|
||||
}
|
||||
|
||||
&.rank-3 {
|
||||
background: linear-gradient(135deg, #cd7f32, #daa560);
|
||||
color: #fff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(205, 127, 50, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.employeeInfo {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.employeeText {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.phone {
|
||||
font-size: 24rpx;
|
||||
color: @muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rankValue {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.numberWithUnit {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: @primary;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,43 +1,38 @@
|
||||
<!-- 应急事件 -->
|
||||
<template>
|
||||
<view class="main">
|
||||
<view class="emergencyList pad15">
|
||||
<view class="emergencyItem" v-for="(item, index) in showList" :key="index" @click="handleShowDetail(item)"
|
||||
:style="{
|
||||
marginBottom: index + 1 === showList.length ? '0' : '',
|
||||
border: item.state === '完成' ? '2rpx solid #f4db9c' : item.state === '处理中' ? '2rpx solid #d3d3d3' : ''
|
||||
<view class="emergencyList">
|
||||
<view class="eventCard" v-for="(item, index) in showList" :key="index" @click="handleShowDetail(item)">
|
||||
<!-- 事件头部信息 -->
|
||||
<view class="cardHeader">
|
||||
<view class="eventTitle">{{ type === 1 ? item.title || "" : type === 2 ? item.type || "" : "" }}
|
||||
</view>
|
||||
<view class="eventStatus" v-if="item.state" :class="{
|
||||
'status-completed': item.state === '完成',
|
||||
'status-processing': item.state === '处理中'
|
||||
}">
|
||||
<view class="emergencyItemTitle">
|
||||
<view class="emergencyItemTitleLeft">
|
||||
{{ type === 1 ? item.title || "" : type === 2 ? item.type || "" : "" }}
|
||||
{{ item.state }}
|
||||
</view>
|
||||
<view class="emergencyItemTitleRight">
|
||||
<view class="emergencyItemStatus" v-if="item.state" :style="{
|
||||
background: item.state === '完成' ? '#ecbd44' : item.state === '处理中' ? '#d3d3d3' : '',
|
||||
color: item.state === '完成' ? '#fff' : item.state === '处理中' ? '#fff' : ''
|
||||
}">
|
||||
{{ item.state }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="emergencyDesc">{{ item.sceneOverview || "" }}</view>
|
||||
|
||||
<view class="line"></view>
|
||||
|
||||
<view class="otherMessageRow">
|
||||
<image class="otherMessageIcon" src="https://eshangtech.com/cyy_DIB/personIcon.png" />
|
||||
<view class="otherMessageValue">{{ item.userName || item.createUserName }}</view>
|
||||
</view>
|
||||
|
||||
<view class="otherMessageRow">
|
||||
<image class="otherMessageIcon" src="https://eshangtech.com/cyy_DIB/phoneLabelIcon.png" />
|
||||
<view class="otherMessageValue">{{ item.phone }}</view>
|
||||
</view>
|
||||
<!-- 事件描述 -->
|
||||
<view class="eventDesc" v-if="item.sceneOverview">{{ item.sceneOverview }}</view>
|
||||
|
||||
<view class="otherMessageRow" style="margin-bottom: 0;">
|
||||
<image class="otherMessageIcon" src="https://eshangtech.com/cyy_DIB/timeIcon.png" />
|
||||
<view class="otherMessageValue">{{ item.createTime }}</view>
|
||||
<!-- 详细信息区域 -->
|
||||
<view class="eventDetails">
|
||||
<view class="detailItem">
|
||||
<image class="detailIcon" src="https://eshangtech.com/cyy_DIB/personIcon.png" />
|
||||
<view class="detailValue">{{ item.userName || item.createUserName || '-' }}</view>
|
||||
</view>
|
||||
<view class="detailItem">
|
||||
<image class="detailIcon" src="https://eshangtech.com/cyy_DIB/phoneLabelIcon.png" />
|
||||
<view class="detailValue">{{ item.phone || '-' }}</view>
|
||||
</view>
|
||||
<view class="detailItem">
|
||||
<image class="detailIcon" src="https://eshangtech.com/cyy_DIB/timeIcon.png" />
|
||||
<view class="detailValue">{{ item.createTime || '-' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="noDataBox" v-if="!isLoading && !(showList && showList.length > 0)">
|
||||
<noData :type="1" :text="'暂无数据'" />
|
||||
@ -432,214 +427,126 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@bg: #f8f9fa;
|
||||
@muted: #666;
|
||||
@card: #fff;
|
||||
@shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
@primary: #27B25F;
|
||||
@primary2: #4CCC7F;
|
||||
@ok: #2ed573;
|
||||
@warn: #ff9f43;
|
||||
@danger: #ff4757;
|
||||
<style lang="scss" scoped>
|
||||
// 使用项目全局颜色变量
|
||||
$bg: #f8f9fa;
|
||||
$muted: #666;
|
||||
$card: #fff;
|
||||
$shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
$primary: #27B25F;
|
||||
$primary2: #4CCC7F;
|
||||
$success: #2ed573;
|
||||
$warning: #ff9f43;
|
||||
$danger: #ff4757;
|
||||
$info: #3742fa;
|
||||
|
||||
/* 抽屉页（特情/设施） */
|
||||
/* 重新设计的应急事件页面 */
|
||||
.main {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
.emergency-details-header {
|
||||
background: linear-gradient(135deg, @danger, #ff3838);
|
||||
color: #fff;
|
||||
padding: 40rpx;
|
||||
position: relative;
|
||||
box-shadow: @shadow;
|
||||
|
||||
&.facilities-theme {
|
||||
background: linear-gradient(135deg, #20bf6b, #0fb9b1);
|
||||
}
|
||||
|
||||
.emergency-back-btn {
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
top: 30rpx;
|
||||
background: rgba(255, 255, 255, .2);
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 36rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.h1 {
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.current-area {
|
||||
text-align: center;
|
||||
display: block;
|
||||
opacity: .9;
|
||||
}
|
||||
}
|
||||
min-height: 100vh;
|
||||
background-color: $bg;
|
||||
box-sizing: border-box;
|
||||
padding: 32rpx;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
.emergencyList {
|
||||
padding: 30rpx;
|
||||
width: 100%;
|
||||
|
||||
.noDataBox {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 60vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.emergencyItem {
|
||||
width: 100%;
|
||||
border-radius: 8rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: @shadow;
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
.eventCard {
|
||||
background: $card;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 32rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: $shadow;
|
||||
|
||||
.emergencyItemTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.emergencyItemTitleLeft {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.emergencyItemStatus {
|
||||
font-size: 24rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 32rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.emergencyDesc {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
background-color: #dad9d3;
|
||||
margin: 24rpx 0;
|
||||
|
||||
}
|
||||
|
||||
.otherMessageRow {
|
||||
width: 100%;
|
||||
margin-bottom: 8rpx;
|
||||
.cardHeader {
|
||||
padding: 32rpx 32rpx 16rpx;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
|
||||
.otherMessageIcon {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
.eventTitle {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
line-height: 1.4;
|
||||
margin-right: 16rpx;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.otherMessageValue {
|
||||
.eventStatus {
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 12rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.status-completed {
|
||||
background: #E7F8EE;
|
||||
color: $success;
|
||||
}
|
||||
|
||||
&.status-processing {
|
||||
background: #FFF3E0;
|
||||
color: $warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.eventDesc {
|
||||
padding: 0 32rpx 16rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
}
|
||||
}
|
||||
font-weight: 400;
|
||||
color: $muted;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
}
|
||||
.eventDetails {
|
||||
padding: 16rpx 32rpx 32rpx;
|
||||
background: #FAFAFA;
|
||||
|
||||
.add-event-btn {
|
||||
position: fixed;
|
||||
bottom: 160rpx;
|
||||
right: 40rpx;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
background: linear-gradient(135deg, @primary, @primary2);
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 40rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(74, 144, 226, .4);
|
||||
}
|
||||
|
||||
.promo-banner {
|
||||
margin: 30rpx;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: @shadow;
|
||||
|
||||
.promo-image {
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
.detailItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 48rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.promo-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(transparent, rgba(0, 0, 0, .7));
|
||||
padding: 40rpx 30rpx 30rpx;
|
||||
color: #fff;
|
||||
|
||||
.promo-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8rpx;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.promo-subtitle {
|
||||
.detailIcon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.detailValue {
|
||||
font-size: 24rpx;
|
||||
opacity: .9;
|
||||
font-weight: 400;
|
||||
color: #160002;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.facilities-section {
|
||||
margin: 30rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: @shadow;
|
||||
|
||||
.facilities-header {
|
||||
background: linear-gradient(135deg, #20bf6b, #0fb9b1);
|
||||
color: #fff;
|
||||
padding: 30rpx;
|
||||
font-weight: 700;
|
||||
font-size: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 弹窗样式保持不变，只是不再使用
|
||||
.eventsPopupBox {
|
||||
width: 90vw;
|
||||
height: 80vh;
|
||||
background-color: #fff;
|
||||
background-color: $card;
|
||||
border-radius: 16rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx;
|
||||
@ -689,10 +596,9 @@ export default {
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
background-color: #dad9d3;
|
||||
margin: 24rpx 0;
|
||||
|
||||
height: 1rpx;
|
||||
background-color: #f0f0f0;
|
||||
margin: 16rpx 0;
|
||||
}
|
||||
|
||||
.eventsSmallTitle {
|
||||
@ -730,7 +636,6 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,157 +1,140 @@
|
||||
<template>
|
||||
<view class="main">
|
||||
<view class="detailBox">
|
||||
<view class="pageTitle">{{ detailObj.title || "" }}</view>
|
||||
|
||||
<view class="userDetailBox" :style="{ marginTop: pageType === 1 ? '' : '0' }">
|
||||
<view class="userDetailBoxTop">
|
||||
<view class="userDetailBoxService">{{ detailObj.saName || "" }}</view>
|
||||
|
||||
<view class="userDetailBoxServiceRight">
|
||||
<view class="userDetailBoxStatus" :style="{
|
||||
background: detailObj.state === '完成' ? '#ecbd44' : detailObj.state === '处理中' ? '#d3d3d3' : '',
|
||||
color: detailObj.state === '完成' ? '#fff' : detailObj.state === '处理中' ? '#fff' : ''
|
||||
<!-- 事件头部信息 -->
|
||||
<view class="headerCard">
|
||||
<view class="eventTitle">{{ detailObj.title || detailObj.type || "-" }}</view>
|
||||
<view class="headerInfo">
|
||||
<view class="serviceName">{{ detailObj.saName || "-" }}</view>
|
||||
<view class="eventStatus" :class="{
|
||||
'status-completed': detailObj.state === '完成',
|
||||
'status-processing': detailObj.state === '处理中'
|
||||
}">
|
||||
{{ detailObj.state }}</view>
|
||||
{{ detailObj.state || "-" }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="eventsItem" style="margin-top: 24rpx;">
|
||||
<view class="eventsHaveImgLabel">
|
||||
<image class="eventsHaveImg" src="https://eshangtech.com/cyy_DIB/personIcon.png" />
|
||||
<view class="eventsHaveLabel">联系人：</view>
|
||||
<!-- 基本信息 -->
|
||||
<view class="infoCard">
|
||||
<view class="cardTitle">基本信息</view>
|
||||
<view class="infoList">
|
||||
<view class="infoItem">
|
||||
<image class="infoIcon" src="https://eshangtech.com/cyy_DIB/personIcon.png" />
|
||||
<view class="infoLabel">联系人</view>
|
||||
<view class="infoValue">{{ detailObj.userName || detailObj.createUserName || "-" }}</view>
|
||||
</view>
|
||||
<view class="eventsValue">{{ detailObj.userName || detailObj.createUserName || "" }}</view>
|
||||
<view class="infoItem">
|
||||
<image class="infoIcon" src="https://eshangtech.com/cyy_DIB/phoneLabelIcon.png" />
|
||||
<view class="infoLabel">联系电话</view>
|
||||
<view class="infoValue">{{ detailObj.phone || "-" }}</view>
|
||||
</view>
|
||||
<view class="eventsItem">
|
||||
<view class="eventsHaveImgLabel">
|
||||
<image class="eventsHaveImg" src="https://eshangtech.com/cyy_DIB/phoneLabelIcon.png" />
|
||||
<view class="eventsHaveLabel">联系电话：</view>
|
||||
<view class="infoItem">
|
||||
<image class="infoIcon" src="https://eshangtech.com/cyy_DIB/timeIcon.png" />
|
||||
<view class="infoLabel">{{ pageType === 1 ? '处理用时' : '创建时间' }}</view>
|
||||
<view class="infoValue">{{ detailObj.handlingTime || detailObj.createTime || "-" }}</view>
|
||||
</view>
|
||||
<view class="eventsValue">{{ detailObj.phone || "" }}</view>
|
||||
</view>
|
||||
<view class="eventsItem" style="margin-bottom: 0;">
|
||||
<view class="eventsHaveImgLabel">
|
||||
<image class="eventsHaveImg" src="https://eshangtech.com/cyy_DIB/timeIcon.png" />
|
||||
<view class="eventsHaveLabel">{{ pageType === 1 ? '处理用时：' : pageType === 2 ? '创建时间' : '' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="eventsValue">{{ detailObj.handlingTime || detailObj.createTime || "" }}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="pageText" v-if="pageType === 1">应急事件</view>
|
||||
<view class="pageText" v-if="pageType === 2">日常问题</view>
|
||||
|
||||
<view class="detailBox" v-if="pageType === 1">
|
||||
<view class="userDetailBox noBoxShow">
|
||||
<!-- <view class="eventsItem">
|
||||
<view class="eventsLabel">标题：</view>
|
||||
<view class="eventsValue">{{ detailObj.title || "" }}</view>
|
||||
</view> -->
|
||||
<view class="eventsItem">
|
||||
<view class="eventsLabel">事件片区：</view>
|
||||
<view class="eventsValue">{{ detailObj.belongArea || "" }}</view>
|
||||
<!-- 应急事件详情 -->
|
||||
<view class="detailCard" v-if="pageType === 1">
|
||||
<view class="cardTitle">事件详情</view>
|
||||
<view class="detailList">
|
||||
<view class="detailItem">
|
||||
<view class="detailLabel">事件片区</view>
|
||||
<view class="detailValue">{{ detailObj.belongArea || "-" }}</view>
|
||||
</view>
|
||||
<view class="detailItem">
|
||||
<view class="detailLabel">事件概况</view>
|
||||
<view class="detailValue">{{ detailObj.sceneOverview || "-" }}</view>
|
||||
</view>
|
||||
<view class="detailItem">
|
||||
<view class="detailLabel">损失情况</view>
|
||||
<view class="detailValue">{{ detailObj.lossSituation || "-" }}</view>
|
||||
</view>
|
||||
<view class="detailItem">
|
||||
<view class="detailLabel">处理结果</view>
|
||||
<view class="detailValue">{{ detailObj.handlingResult || "-" }}</view>
|
||||
</view>
|
||||
<!-- <view class="eventsItem">
|
||||
<view class="eventsLabel">事件服务区：</view>
|
||||
<view class="eventsValue">{{ detailObj.service || "" }}</view>
|
||||
</view>
|
||||
|
||||
<view class="eventsItem">
|
||||
<view class="eventsLabel">死亡人数：</view>
|
||||
<view class="eventsValue">{{ detailObj.diePerson || "" }}</view>
|
||||
</view> -->
|
||||
<view class="eventsItem">
|
||||
<view class="eventsLabel">事件概况：</view>
|
||||
<view class="eventsValue">{{ detailObj.sceneOverview || "" }}</view>
|
||||
</view>
|
||||
<view class="eventsItem">
|
||||
<view class="eventsLabel">事件损失情况：</view>
|
||||
<view class="eventsValue">{{ detailObj.lossSituation || "" }}</view>
|
||||
</view>
|
||||
<view class="eventsItem">
|
||||
<view class="eventsLabel">处理结果：</view>
|
||||
<view class="eventsValue">{{ detailObj.handlingResult || "" }}</view>
|
||||
</view>
|
||||
<view class="eventsItemPic">
|
||||
<view class="eventsLabel">事件现场照片：</view>
|
||||
<view class="eventsPic" v-if="detailObj.imgUp && detailObj.imgUp.length > 0">
|
||||
<view class="eventsPicItem" v-for="(item, index) in detailObj.imgUp" :key="index"
|
||||
<!-- 现场照片 -->
|
||||
<view class="photoSection" v-if="detailObj.imgUp && detailObj.imgUp.length > 0">
|
||||
<view class="photoTitle">事件现场照片</view>
|
||||
<view class="photoGrid">
|
||||
<view class="photoItem" v-for="(item, index) in detailObj.imgUp" :key="index"
|
||||
@click="showImg(detailObj.imgUp, index)">
|
||||
<image class="eventsPicImg"
|
||||
<image class="photoImage" mode="aspectFill"
|
||||
:src="'https://fwqznxj.yciccloud.com:9081/fileDownloadApi/bsys/document/docDownloadAction?fileId=' + item.fileID" />
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="detailBox" v-if="pageType === 2" style="padding-bottom: 24rpx;">
|
||||
<view class="userDetailBox noBoxShow">
|
||||
<view class="eventsItem">
|
||||
<view class="eventsLabel">事件片区：</view>
|
||||
<view class="eventsValue">{{ detailObj.belongArea || "" }}</view>
|
||||
<!-- 日常问题详情 -->
|
||||
<view class="detailCard" v-if="pageType === 2">
|
||||
<view class="cardTitle">问题详情</view>
|
||||
<view class="detailList">
|
||||
<view class="detailItem">
|
||||
<view class="detailLabel">事件片区</view>
|
||||
<view class="detailValue">{{ detailObj.belongArea || "-" }}</view>
|
||||
</view>
|
||||
<!-- <view class="eventsItem">
|
||||
<view class="eventsLabel">事件服务区：</view>
|
||||
<view class="eventsValue">{{ detailObj.service || "" }}</view>
|
||||
</view> -->
|
||||
<view class="eventsItem">
|
||||
<view class="eventsLabel">类型：</view>
|
||||
<view class="eventsValue">{{ detailObj.type || "" }}</view>
|
||||
<view class="detailItem">
|
||||
<view class="detailLabel">问题类型</view>
|
||||
<view class="detailValue">{{ detailObj.type || "-" }}</view>
|
||||
</view>
|
||||
<view class="detailItem">
|
||||
<view class="detailLabel">问题描述</view>
|
||||
<view class="detailValue">{{ detailObj.describe || "-" }}</view>
|
||||
</view>
|
||||
<view class="eventsItem" style="margin-bottom: 0;">
|
||||
<view class="eventsLabel">问题描述：</view>
|
||||
<view class="eventsValue">{{ detailObj.describe || "" }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 协调处理情况 -->
|
||||
<view class="detailCard" v-if="pageType === 2">
|
||||
<view class="cardTitle">协调处理情况</view>
|
||||
<view class="detailList">
|
||||
<view class="detailItem">
|
||||
<view class="detailLabel">处理结果</view>
|
||||
<view class="detailValue">{{ detailObj.coorResult || "-" }}</view>
|
||||
</view>
|
||||
|
||||
<view class="pageText" v-if="pageType === 2">协调处理情况</view>
|
||||
|
||||
<view class="detailBox" v-if="pageType === 2" style="padding-bottom: 24rpx;">
|
||||
<view class="eventsItem">
|
||||
<view class="eventsLabel">协调处理结果：</view>
|
||||
<view class="eventsValue">{{ detailObj.coorResult || "" }}</view>
|
||||
<view class="detailItem">
|
||||
<view class="detailLabel">办理人</view>
|
||||
<view class="detailValue">{{ detailObj.coorUserName || "-" }}</view>
|
||||
</view>
|
||||
<view class="eventsItem">
|
||||
<view class="eventsLabel">办理人：</view>
|
||||
<view class="eventsValue">{{ detailObj.coorUserName || "" }}</view>
|
||||
<view class="detailItem">
|
||||
<view class="detailLabel">完成时间</view>
|
||||
<view class="detailValue">{{ detailObj.coorEndTime || "-" }}</view>
|
||||
</view>
|
||||
<view class="eventsItem" style="margin-bottom: 0;">
|
||||
<view class="eventsLabel">办理完成时间：</view>
|
||||
<view class="eventsValue">{{ detailObj.coorEndTime || "" }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="pageText" v-if="pageType === 2">经营公司协调处理情况</view>
|
||||
<!-- 经营公司处理情况 -->
|
||||
<view class="detailCard" v-if="pageType === 2">
|
||||
<view class="cardTitle">经营公司处理情况</view>
|
||||
<view class="detailList">
|
||||
<view class="detailItem">
|
||||
<view class="detailLabel">处理结果</view>
|
||||
<view class="detailValue">{{ detailObj.companyResult || "-" }}</view>
|
||||
</view>
|
||||
<view class="detailItem">
|
||||
<view class="detailLabel">办理人</view>
|
||||
<view class="detailValue">{{ detailObj.companyUserName || "-" }}</view>
|
||||
</view>
|
||||
<view class="detailItem">
|
||||
<view class="detailLabel">完成时间</view>
|
||||
<view class="detailValue">{{ detailObj.companyEndTime || "-" }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="detailBox" v-if="pageType === 2" style="padding-bottom: 24rpx;">
|
||||
<view class="eventsItem">
|
||||
<view class="eventsLabel">协调处理结果：</view>
|
||||
<view class="eventsPic">{{ detailObj.companyResult || "" }}</view>
|
||||
</view>
|
||||
<view class="eventsItem">
|
||||
<view class="eventsLabel">办理人：</view>
|
||||
<view class="eventsValue">{{ detailObj.companyUserName || "" }}</view>
|
||||
</view>
|
||||
<view class="eventsItem">
|
||||
<view class="eventsLabel">办理完成时间：</view>
|
||||
<view class="eventsValue">{{ detailObj.companyEndTime || "" }}</view>
|
||||
</view>
|
||||
<view class="eventsItemPic" style="margin-bottom: 0;">
|
||||
<view class="eventsLabel">事件现场照片：</view>
|
||||
<view class="eventsPic" v-if="detailObj.fileUp && detailObj.fileUp.length > 0">
|
||||
<view class="eventsPicItem" v-for="(item, index) in detailObj.fileUp" :key="index"
|
||||
<!-- 现场照片 -->
|
||||
<view class="photoSection" v-if="detailObj.fileUp && detailObj.fileUp.length > 0">
|
||||
<view class="photoTitle">事件现场照片</view>
|
||||
<view class="photoGrid">
|
||||
<view class="photoItem" v-for="(item, index) in detailObj.fileUp" :key="index"
|
||||
@click="showImg(detailObj.fileUp, index)">
|
||||
<image class="eventsPicImg"
|
||||
<image class="photoImage" mode="aspectFill"
|
||||
:src="'https://fwqznxj.yciccloud.com:9081/fileDownloadApi/bsys/document/docDownloadAction?fileId=' + item.fileID" />
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -205,115 +188,202 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
// 使用项目全局颜色变量
|
||||
$bg: #f8f9fa;
|
||||
$muted: #666;
|
||||
$card: #fff;
|
||||
$shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
$primary: #27B25F;
|
||||
$primary2: #4CCC7F;
|
||||
$success: #2ed573;
|
||||
$warning: #ff9f43;
|
||||
$danger: #ff4757;
|
||||
$info: #3742fa;
|
||||
|
||||
.main {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
background-color: #f0f2f3;
|
||||
background-color: $bg;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
/* 兼容旧版 iOS */
|
||||
padding: 32rpx;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
/* 兼容新版 */
|
||||
.detailBox {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx 24rpx 48rpx;
|
||||
background-color: #fff;
|
||||
// 事件头部信息卡片
|
||||
.headerCard {
|
||||
background: $card;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
box-shadow: $shadow;
|
||||
|
||||
.pageTitle {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
.eventTitle {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
margin-bottom: 16rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.userDetailBox {
|
||||
width: calc(100% - 32rpx);
|
||||
margin-top: 24rpx;
|
||||
margin-left: 16rpx;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
padding: 16rpx 24rpx;
|
||||
|
||||
.userDetailBoxTop {
|
||||
width: 100%;
|
||||
.headerInfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.userDetailBoxService {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.userDetailBoxStatus {
|
||||
display: inline-block;
|
||||
.serviceName {
|
||||
font-size: 24rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 32rpx;
|
||||
font-weight: 400;
|
||||
color: $muted;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.eventStatus {
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 12rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.status-completed {
|
||||
background: #E7F8EE;
|
||||
color: $success;
|
||||
}
|
||||
|
||||
&.status-processing {
|
||||
background: #FFF3E0;
|
||||
color: $warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 基本信息卡片
|
||||
.infoCard {
|
||||
background: $card;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 32rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: $shadow;
|
||||
|
||||
.eventsItem {
|
||||
width: 100%;
|
||||
.cardTitle {
|
||||
padding: 32rpx 32rpx 16rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.infoList {
|
||||
padding: 16rpx 32rpx 32rpx;
|
||||
background: #FAFAFA;
|
||||
|
||||
.infoItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.infoIcon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.infoLabel {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
width: 120rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.infoValue {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #160002;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 详情卡片
|
||||
.detailCard {
|
||||
background: $card;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 32rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: $shadow;
|
||||
|
||||
.cardTitle {
|
||||
padding: 32rpx 32rpx 16rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.detailList {
|
||||
padding: 16rpx 32rpx 0;
|
||||
|
||||
.detailItem {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 1rpx solid #f8f8f8;
|
||||
|
||||
.eventsHaveImgLabel {
|
||||
display: flex;
|
||||
width: 200rpx;
|
||||
align-items: center;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.eventsHaveImg {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
.detailLabel {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
width: 120rpx;
|
||||
flex-shrink: 0;
|
||||
margin-right: 16rpx;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.eventsHaveLabel {
|
||||
width: 154rpx;
|
||||
.detailValue {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.eventsLabel {
|
||||
width: 200rpx;
|
||||
text-align: left;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.eventsValue {
|
||||
font-weight: 400;
|
||||
color: #160002;
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.eventsItemPic {
|
||||
width: 100%;
|
||||
// 图片展示区域
|
||||
.photoSection {
|
||||
padding: 16rpx 32rpx 32rpx;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
margin-top: 16rpx;
|
||||
|
||||
.eventsLabel {
|
||||
width: 200rpx;
|
||||
text-align: left;
|
||||
.photoTitle {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.eventsPic {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
.photoGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16rpx;
|
||||
|
||||
.eventsPicItem {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-right: 8rpx;
|
||||
margin-bottom: 8rpx;
|
||||
.photoItem {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
background: #f8f8f8;
|
||||
|
||||
.eventsPicImg {
|
||||
.photoImage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@ -321,87 +391,5 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.noBoxShow {
|
||||
box-shadow: none;
|
||||
margin-top: 0;
|
||||
padding: 0 24rpx;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
.eventsItem {
|
||||
width: 100%;
|
||||
margin-bottom: 16rpx;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.eventsHaveImgLabel {
|
||||
display: flex;
|
||||
width: 200rpx;
|
||||
align-items: center;
|
||||
|
||||
.eventsHaveImg {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 16rpx;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.eventsHaveLabel {
|
||||
width: 154rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.eventsLabel {
|
||||
width: 200rpx;
|
||||
text-align: left;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.eventsValue {
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.eventsItemPic {
|
||||
width: 100%;
|
||||
|
||||
.eventsLabel {
|
||||
width: 200rpx;
|
||||
text-align: left;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.eventsPic {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
|
||||
.eventsPicItem {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-right: 8rpx;
|
||||
margin-bottom: 8rpx;
|
||||
|
||||
.eventsPicImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pageText {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 16rpx 40rpx;
|
||||
font-size: 24rpx;
|
||||
color: #8d8e8e;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -34,11 +34,17 @@
|
||||
style="width: 100%; height: 100%">
|
||||
<swiper-item v-for="(img, i) in serviceInfo.ImageLits" :key="i"
|
||||
style="width: 100%; height: 100%">
|
||||
<image style="width: 100%; height: 100%" mode="aspectFill" lazy-load="true" :src="img">
|
||||
<image style="width: 100%; height: 100%" mode="aspectFill" lazy-load="true"
|
||||
:src="img || 'https://eshangtech.com/ShopICO/ahyd-BID/service/default.png'">
|
||||
</image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<view v-else class="serviceImg">
|
||||
<image style="width: 100%; height: 100%" mode="aspectFill" lazy-load="true"
|
||||
:src="'https://eshangtech.com/ShopICO/ahyd-BID/service/default.png'">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="detailBottom">
|
||||
<view class="detailFirst">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="main">
|
||||
|
||||
<page-meta :page-style="'overflow:visible'"></page-meta>
|
||||
<view class="main" :style="{ paddingTop: (menu.bottom + 14) + 'px' }">
|
||||
<!-- 顶部固定的内容 -->
|
||||
<view class="topBox" :style="{ height: menu.bottom + 8 + 'px' }">
|
||||
<view class="topContent" :style="{ paddingTop: menu.top + 'px', height: menu.height + 'px' }">
|
||||
@ -15,7 +15,8 @@
|
||||
</view>
|
||||
|
||||
<!-- 月份的轮播框 -->
|
||||
<view class="monthListBox" :style="{ paddingTop: menu.bottom + 8 + 'px' }">
|
||||
<!-- :style="{ paddingTop: menu.bottom + 8 + 'px' }" -->
|
||||
<view class="monthListBox">
|
||||
<swiper class="swiperBox" previous-margin="40rpx" next-margin="40rpx" :current="selectIndex"
|
||||
@animationfinish="handleChangeSwiper" :disable-programmatic-animation="false" :duration="300"
|
||||
:easing-function="ease - out">
|
||||
@ -79,16 +80,10 @@
|
||||
? '#97A9C6'
|
||||
: '',
|
||||
}"></view>
|
||||
<span class="itemName">{{
|
||||
subItem.name
|
||||
}}</span>
|
||||
<span class="itemName">{{ subItem.name }}</span>
|
||||
</view>
|
||||
<view class="itemCenter">
|
||||
{{
|
||||
subItem.value
|
||||
? $util.getMoney(subItem.value / 10000)
|
||||
: ""
|
||||
}}
|
||||
{{ subItem.value ? $util.getMoney(subItem.value / 10000) : "" }}
|
||||
</view>
|
||||
<view class="itemRight" :style="{
|
||||
color:
|
||||
@ -97,33 +92,22 @@
|
||||
: subItem.addQOQ < 0
|
||||
? '#0E9976'
|
||||
: '',
|
||||
}">{{
|
||||
subItem.addQOQ ? `${subItem.addQOQ}` : ""
|
||||
}}</view>
|
||||
}">{{ subItem.addQOQ ? `${subItem.addQOQ}` : "" }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 年度标题 -->
|
||||
<view class="yearAccountItem" style="margin-bottom: 24rpx">
|
||||
<view class="itemTop">
|
||||
<view class="itemName">{{
|
||||
(Math.floor(index / 12) + 2024)
|
||||
.toString()
|
||||
.slice(2, 4)
|
||||
<view class="itemName">{{ (Math.floor(index / 12) + 2024).toString().slice(2, 4)
|
||||
}}年累计对客销售<span class="unit">/亿元</span></view>
|
||||
<!-- <view class="itemType">累计</view>-->
|
||||
</view>
|
||||
<view class="itemBottom">
|
||||
<span class="revenueNum" v-if="selectIndex === index && hasCurrentMonthData">{{
|
||||
topShowData && topShowData.MonthRevenueModel &&
|
||||
topShowData.MonthRevenueModel.YearRevenueAmount
|
||||
? $util.getMoney(
|
||||
topShowData.MonthRevenueModel.YearRevenueAmount /
|
||||
100000000
|
||||
)
|
||||
: ""
|
||||
topShowData.MonthRevenueModel.YearRevenueAmount ?
|
||||
$util.getMoney(topShowData.MonthRevenueModel.YearRevenueAmount / 100000000) : ""
|
||||
}}</span>
|
||||
<span class="revenueAdd" v-if="selectIndex === index && hasCurrentMonthData" :style="{
|
||||
color:
|
||||
@ -133,22 +117,14 @@
|
||||
? '#0E9976'
|
||||
: '',
|
||||
}">
|
||||
<span class="revenueAddNotice">{{
|
||||
<span class="revenueAddNotice">{{ topShowData && topShowData.MonthRevenueModel
|
||||
&& topShowData.MonthRevenueModel.YearRevenueAddNumber > 0 ? "增长" :
|
||||
topShowData && topShowData.MonthRevenueModel &&
|
||||
topShowData.MonthRevenueModel.YearRevenueAddNumber > 0
|
||||
? "增长"
|
||||
: topShowData && topShowData.MonthRevenueModel &&
|
||||
topShowData.MonthRevenueModel.YearRevenueAddNumber < 0 ? "下降" : "" }}</span>
|
||||
{{
|
||||
topShowData && topShowData.MonthRevenueModel &&
|
||||
topShowData.MonthRevenueModel.YearRevenueAddNumber
|
||||
? $util.getMoney(
|
||||
topShowData && topShowData.MonthRevenueModel &&
|
||||
topShowData.MonthRevenueModel.YearRevenueAddNumber /
|
||||
100000000
|
||||
)
|
||||
: ""
|
||||
}}
|
||||
{{ topShowData && topShowData.MonthRevenueModel &&
|
||||
topShowData.MonthRevenueModel.YearRevenueAddNumber ?
|
||||
$util.getMoney(topShowData && topShowData.MonthRevenueModel &&
|
||||
topShowData.MonthRevenueModel.YearRevenueAddNumber / 100000000) : "" }}
|
||||
</span>
|
||||
|
||||
<span class="revenueAdd" v-if="selectIndex === index && hasCurrentMonthData"
|
||||
@ -159,120 +135,60 @@
|
||||
: topShowData && topShowData.MonthRevenueModel && topShowData.MonthRevenueModel.YearRevenueAdd < 0
|
||||
? '#0E9976'
|
||||
: '',
|
||||
}"><span class="revenueAddNotice">{{
|
||||
topShowData && topShowData.MonthRevenueModel &&
|
||||
topShowData.MonthRevenueModel.YearRevenueAdd > 0
|
||||
? "增幅"
|
||||
: topShowData && topShowData.MonthRevenueModel &&
|
||||
}"><span class="revenueAddNotice">{{ topShowData &&
|
||||
topShowData.MonthRevenueModel
|
||||
&& topShowData.MonthRevenueModel.YearRevenueAdd > 0 ? "增幅" : topShowData
|
||||
&& topShowData.MonthRevenueModel &&
|
||||
topShowData.MonthRevenueModel.YearRevenueAdd < 0 ? "降幅" : "" }}</span>
|
||||
{{
|
||||
topShowData && topShowData.MonthRevenueModel &&
|
||||
topShowData.MonthRevenueModel.YearRevenueAdd
|
||||
? `${topShowData.MonthRevenueModel.YearRevenueAdd > 0
|
||||
? "+"
|
||||
: ""
|
||||
}${topShowData.MonthRevenueModel.YearRevenueAdd}%`
|
||||
: "-"
|
||||
}}</span>
|
||||
{{ topShowData && topShowData.MonthRevenueModel &&
|
||||
topShowData.MonthRevenueModel.YearRevenueAdd ?
|
||||
`${topShowData.MonthRevenueModel.YearRevenueAdd > 0 ? "+" :
|
||||
""}${topShowData.MonthRevenueModel.YearRevenueAdd}%` : "-" }}</span>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- <view class="swiperItemContentYear">
|
||||
年度累计
|
||||
<span class="swiperItemContentUnit">/亿元</span>
|
||||
</view>
|
||||
<view class="swiperItemContentYearRevenueBox">
|
||||
<view class="leftRevenueValue">126.32</view>
|
||||
|
||||
<view class="rightRevenueValue">
|
||||
<text class="addValue" :style="{
|
||||
color:
|
||||
showTableData.add > 0
|
||||
? '#E83944'
|
||||
: showTableData.add < 0
|
||||
? '#0E9976'
|
||||
: '',
|
||||
}">{{ showTableData.add ? showTableData.add : "-" }}%</text>
|
||||
<text class="rightNav">同比</text>
|
||||
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<!-- 即时营收 -->
|
||||
<view class="instantRevenue" style="margin-top: 24rpx;">
|
||||
<view class="revenue" @click="handlePage" style="padding-bottom: 0;">
|
||||
<view class="revenueTop">
|
||||
<view class="revenyeTopLeft">
|
||||
<image class="monthIcon"
|
||||
src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/monthIcon.svg" />
|
||||
<text class="dateText">{{
|
||||
$util.handleGetMonthDay(nowDay)
|
||||
}}</text>
|
||||
<text class="day">/{{ howDay }}</text>
|
||||
<!-- 实时数据统计 -->
|
||||
<view class="thingBox">
|
||||
<!-- 实时营收 -->
|
||||
<view class="revenue-banner" @click="handlePage">
|
||||
<view class="revenue-header">
|
||||
<view class="revenue-title">
|
||||
<text>💰 今日实时营收</text>
|
||||
</view>
|
||||
<view class="revenyeTopRight">
|
||||
<image class="right" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/goMore.svg" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="revenueMoney">
|
||||
<!-- <NumberScroll v-if="currentMoney" :number="currentMoney" /> -->
|
||||
<text class="moneyText">{{ currentMoney }}</text>
|
||||
<text class="moneyLabel">实时对客销售/元</text>
|
||||
<view
|
||||
style="width: 100%;display: flex;align-items: center;justify-content: space-between;margin-top: 8rpx;">
|
||||
<view class="revenue-content">
|
||||
<view class="revenue-amount">{{ currentMoney }}</view>
|
||||
<view class="revenue-label">元</view>
|
||||
</view>
|
||||
<view class="revenue-date">{{ $util.handleGetMonthDay(nowDay) }}/{{ howDay }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="revenue revenueOther">
|
||||
<view class="otherRealDataBox">
|
||||
<view class="revenueMoneyItem" v-for="(subItem, subIndex) in otherRealData"
|
||||
:style="{ marginTop: subIndex >= 2 ? '24rpx' : '' }">
|
||||
<view class="revenueMoneyItemLeft">
|
||||
<image class="leftIcon" :src="subItem.icon" />
|
||||
<!-- 其他实时数据 -->
|
||||
<view class="data-grid" v-if="otherRealData && otherRealData.length > 0">
|
||||
<view class="data-item" v-for="(subItem, subIndex) in otherRealData" :key="subIndex">
|
||||
<view class="data-icon">
|
||||
<image class="icon" :src="subItem.icon" />
|
||||
</view>
|
||||
|
||||
<view class="revenueMoneyItemRight">
|
||||
<view class="moneyLabel">{{ subItem.label || "" }}</view>
|
||||
<view class="moneyText">{{ subItem.value || "" }}<span class="moneyUnit">{{ subItem.unit
|
||||
|| "" }}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<!-- 实时水电、加油、尿素、充电 -->
|
||||
<view class="instantRevenue" style="margin-top: 24rpx;" v-if="otherRealData && otherRealData.length > 0">
|
||||
<view class="revenue revenueOther">
|
||||
<view class="otherRealDataBox">
|
||||
<view class="revenueMoneyItem" v-for="(subItem, subIndex) in otherRealData"
|
||||
:style="{ marginTop: subIndex >= 2 ? '24rpx' : '' }">
|
||||
<view class="revenueMoneyItemLeft">
|
||||
<image class="leftIcon" :src="subItem.icon" />
|
||||
</view>
|
||||
|
||||
<view class="revenueMoneyItemRight">
|
||||
<view class="moneyLabel">{{ subItem.label || "" }}</view>
|
||||
<view class="moneyText">
|
||||
<span class="money">{{ subItem.value || "" }}</span>
|
||||
<span class="moneyUnit">/{{ subItem.unit
|
||||
|| "" }}</span>
|
||||
<view class="data-info">
|
||||
<view class="data-label">{{ subItem.label || "" }}</view>
|
||||
<view class="data-value">
|
||||
<span class="value">{{ subItem.value || "" }}</span>
|
||||
<span class="unit">/{{ subItem.unit || "" }}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 底部的跳转 -->
|
||||
<view class="funBox">
|
||||
@ -288,35 +204,21 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="funItem" @click="handleGoAttendanceStatus">
|
||||
<view class="funItemContent">
|
||||
<view class="funIconBox">
|
||||
<image class="funIcon"
|
||||
src="https://eshangtech.com/ShopICO/ahyd-BID/warning/operateWarning.svg" />
|
||||
</view>
|
||||
<text class="funText">出勤情况</text>
|
||||
<text class="funText">人员管理</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- <view class="funItem" @click="goToRobot">
|
||||
<view class="funItemContent">
|
||||
<view class="funIconBox">
|
||||
<image class="funIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/statistics.svg" />
|
||||
</view>
|
||||
<text class="funText">数智助手</text>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
|
||||
<Tabbar ref="tabbar" :page="page"></Tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
import request from "@/util/index.js";
|
||||
import RateCharts from "./components/rateCharts.vue";
|
||||
@ -464,7 +366,6 @@ export default {
|
||||
console.log('this.singlethis.singlethis.single', this.single);
|
||||
uni.setStorageSync("lastDay", this.lastDay);
|
||||
|
||||
|
||||
console.log('useruseruseruser', this.user);
|
||||
|
||||
// 小程序进来存起来的用户信息
|
||||
@ -475,7 +376,6 @@ export default {
|
||||
|
||||
console.log('userInfouserInfo', userInfo);
|
||||
|
||||
|
||||
if (userInfo && userInfo.WeChat_UserId && userInfo.AuthorityInfo["89a1f248-2113-4d57-84b1-c2e6edb9e8ee"] === 1) {
|
||||
_this.isReturn = false;
|
||||
} else if (userInfo && userInfo.WeChat_UserId && userInfo.AuthorityInfo["89a1f248-2113-4d57-84b1-c2e6edb9e8ee"] !== 1) {
|
||||
@ -732,6 +632,10 @@ export default {
|
||||
this.swiperTransition = false;
|
||||
}, 100);
|
||||
},
|
||||
formatThousand(num) {
|
||||
if (num === null || num === undefined) return '0';
|
||||
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
},
|
||||
// 实时营收
|
||||
async handleRealRevenue() {
|
||||
try {
|
||||
@ -741,7 +645,8 @@ export default {
|
||||
};
|
||||
const res = await request.$webGet("CommercialApi/Revenue/GetCurRevenue", req);
|
||||
// this.currentMoney = res.Result_Data.CurRevenueAmount.toFixed(2);
|
||||
this.currentMoney = res.Result_Data.CurRevenueAmount.toLocaleString('zh-CN');
|
||||
// this.currentMoney = res.Result_Data.CurRevenueAmount.toLocaleString('zh-CN');
|
||||
this.currentMoney = this.formatThousand(res.Result_Data.CurRevenueAmount)
|
||||
} catch (error) {
|
||||
console.error('获取实时营收数据失败:', error);
|
||||
this.currentMoney = '暂无数据';
|
||||
@ -800,7 +705,7 @@ export default {
|
||||
resObj.BusinessTypeList.forEach((item) => {
|
||||
// 同比
|
||||
if (item.data) {
|
||||
let number = ((item.value - item.data) / item.data) * 100;
|
||||
let number = Number(item.data) ? ((item.value - item.data) / item.data) * 100 : 0;
|
||||
if (number > 0) {
|
||||
item.add = "+" + number.toFixed(2);
|
||||
} else if (number < 0) {
|
||||
@ -811,7 +716,7 @@ export default {
|
||||
}
|
||||
// 环比
|
||||
if (item.key) {
|
||||
let number = ((item.value - item.key) / item.key) * 100;
|
||||
let number = Number(item.key) ? ((item.value - item.key) / item.key) * 100 : 0;
|
||||
if (number > 0) {
|
||||
item.addQOQ = "+" + number.toFixed(2) + "%";
|
||||
} else if (number < 0) {
|
||||
@ -919,11 +824,22 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@bg: #f8f9fa;
|
||||
@muted: #666;
|
||||
@card: #fff;
|
||||
@shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
@primary: #27B25F;
|
||||
@primary2: #4CCC7F;
|
||||
@success: #2ed573;
|
||||
@warning: #ff9f43;
|
||||
@danger: #ff4757;
|
||||
@info: #3742fa;
|
||||
|
||||
<style scoped lang="scss">
|
||||
.main {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background-image: url("https://eshangtech.com/minTestImg/pageBg.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
@ -955,24 +871,24 @@ export default {
|
||||
|
||||
.topRight {
|
||||
width: 310rpx;
|
||||
height: 72rpx;
|
||||
height: 56rpx;
|
||||
background: #f6f8fa;
|
||||
border-radius: 36rpx;
|
||||
margin-left: 16rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 16rpx 20rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.searchIcon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
.searchText {
|
||||
font-family: 'PingFangSC';
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
font-size: 24rpx;
|
||||
color: #9fa1aa;
|
||||
line-height: 40rpx;
|
||||
text-align: left;
|
||||
@ -985,8 +901,8 @@ export default {
|
||||
|
||||
.monthListBox {
|
||||
width: 100%;
|
||||
// height: 600rpx;
|
||||
height: 460rpx;
|
||||
margin-top: 8rpx;
|
||||
|
||||
.swiperBox {
|
||||
width: 100%;
|
||||
@ -998,7 +914,7 @@ export default {
|
||||
|
||||
.swiperItemContent {
|
||||
height: 100%;
|
||||
padding: 0 10rpx; // 中间间距一半（两边相加=20rpx）
|
||||
padding: 0 10rpx;
|
||||
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, .06);
|
||||
|
||||
.swiperItemContentBox {
|
||||
@ -1071,7 +987,6 @@ export default {
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.monthRevenueBox {
|
||||
@ -1124,7 +1039,6 @@ export default {
|
||||
}
|
||||
|
||||
.newRightBox {
|
||||
// height: 100%;
|
||||
flex: 1;
|
||||
|
||||
.newRightItem {
|
||||
@ -1188,7 +1102,6 @@ export default {
|
||||
|
||||
.yearAccountItem {
|
||||
width: 100%;
|
||||
//background: #F9FAFC;
|
||||
box-sizing: border-box;
|
||||
margin-top: 48rpx;
|
||||
|
||||
@ -1198,20 +1111,6 @@ export default {
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8rpx;
|
||||
|
||||
.itemType {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
line-height: 24rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
padding: 4rpx 8rpx;
|
||||
background: #f2792e;
|
||||
border-radius: 4rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.itemName {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
@ -1267,90 +1166,194 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiperItemContentYear {
|
||||
margin-top: 24rpx;
|
||||
font-family: 'PingFangSC';
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #160002;
|
||||
line-height: 40rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
|
||||
.swiperItemContentUnit {
|
||||
font-family: 'PingFangSC';
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #A69E9F;
|
||||
line-height: 40rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.swiperItemContentYearRevenueBox {
|
||||
width: 100%;
|
||||
margin-top: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.leftRevenueValue {
|
||||
font-family: 'DINAlternate';
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
color: #160002;
|
||||
line-height: 40rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.rightRevenueValue {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.addValue {
|
||||
font-family: 'DINAlternate';
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.rightNav {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #A69E9F;
|
||||
line-height: 40rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.swiperItemContent.is-first {
|
||||
padding-left: 20rpx; // 左边额外+10rpx，让边距=40rpx
|
||||
}
|
||||
|
||||
.swiperItemContent.is-last {
|
||||
// padding-right: 20rpx; // 右边额外+10rpx，让边距=40rpx
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thingBox {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 32rpx;
|
||||
margin-top: 24rpx;
|
||||
|
||||
.revenue-banner {
|
||||
background: #ffffff;
|
||||
color: #160002;
|
||||
padding: 24rpx 24rpx 8rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 24rpx;
|
||||
border: 2rpx solid #f0f0f0;
|
||||
|
||||
.revenue-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.revenue-title {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #160002;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.revenue-content {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.revenue-amount {
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
margin-right: 12rpx;
|
||||
color: #27B25F;
|
||||
}
|
||||
|
||||
.revenue-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.revenue-date {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.data-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.data-item {
|
||||
background: #fff;
|
||||
padding: 24rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: @shadow;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.data-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
background: linear-gradient(135deg, #DCE6FF, #EEF3FF);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16rpx;
|
||||
|
||||
.icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.data-info {
|
||||
flex: 1;
|
||||
|
||||
.data-label {
|
||||
font-size: 24rpx;
|
||||
color: @muted;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.data-value {
|
||||
.value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 20rpx;
|
||||
color: #A69E9F;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thingBox {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 32rpx;
|
||||
margin-top: 24rpx;
|
||||
|
||||
.data-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16rpx;
|
||||
|
||||
.data-item {
|
||||
background: #fff;
|
||||
padding: 24rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.data-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
background: linear-gradient(135deg, #DCE6FF, #EEF3FF);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16rpx;
|
||||
|
||||
.icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.data-info {
|
||||
flex: 1;
|
||||
|
||||
.data-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.data-value {
|
||||
.value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 20rpx;
|
||||
color: #A69E9F;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 即时营收
|
||||
.instantRevenue {
|
||||
width: calc(100% - 80rpx);
|
||||
// height: 104px;
|
||||
box-sizing: border-box;
|
||||
padding: 2rpx;
|
||||
background: #fff;
|
||||
@ -1420,7 +1423,6 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
// margin-top: 24rpx;
|
||||
margin-top: 4rpx;
|
||||
|
||||
.moneyText {
|
||||
@ -1461,7 +1463,6 @@ export default {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
// border: 1px solid #9FA6A3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -1483,7 +1484,6 @@ export default {
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
line-height: 30rpx;
|
||||
// margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.moneyText {
|
||||
@ -1516,8 +1516,6 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1527,19 +1525,20 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.funBox {
|
||||
width: calc(100% - 64rpx);
|
||||
margin-left: 32rpx;
|
||||
margin-bottom: calc(100rpx + env(safe-area-inset-bottom));
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 32rpx 24rpx;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24rpx;
|
||||
box-shadow: @shadow;
|
||||
|
||||
.funItem {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@ -1552,7 +1551,6 @@ export default {
|
||||
.funIconBox {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
//border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
|
||||
@ -202,22 +202,35 @@ export default {
|
||||
},
|
||||
//跳转到腾讯地图
|
||||
handleGomap(item) {
|
||||
let seat = uni.getStorageSync('seatInfo')
|
||||
let key = 'STWBZ-DKCR4-J6UUF-FRD5I-3EBN2-GDBOT'
|
||||
let referer = 'goMap'
|
||||
let startPoint = {
|
||||
name: '我的位置',
|
||||
latitude: seat.latitude,
|
||||
longitude: seat.longitude
|
||||
}
|
||||
let endPoint = {
|
||||
'name': item.SERVERPART_NAME,
|
||||
latitude: item.SERVERPART_Y,
|
||||
longitude: item.SERVERPART_X
|
||||
}
|
||||
wx.navigateTo({
|
||||
url: `plugin://routePlan/index?key=${key}&referer=${referer}&endPoint=${JSON.stringify(endPoint)}&startPoint=${JSON.stringify(startPoint)}`
|
||||
let obj = item;
|
||||
uni.openLocation({
|
||||
latitude: obj.latitude ? obj.latitude * 1 : obj.SERVERPART_Y * 1,
|
||||
longitude: obj.longitude ? obj.longitude * 1 : obj.SERVERPART_X * 1,
|
||||
scale: 16, // 缩放比例
|
||||
name: obj.SERVERPART_NAME,
|
||||
// address: "", // 这个可能会影响地图的定位，所以可以选择不填
|
||||
success(data) {
|
||||
},
|
||||
fail(err) {
|
||||
},
|
||||
});
|
||||
|
||||
// let seat = uni.getStorageSync('seatInfo')
|
||||
// let key = 'STWBZ-DKCR4-J6UUF-FRD5I-3EBN2-GDBOT'
|
||||
// let referer = 'goMap'
|
||||
// let startPoint = {
|
||||
// name: '我的位置',
|
||||
// latitude: seat.latitude,
|
||||
// longitude: seat.longitude
|
||||
// }
|
||||
// let endPoint = {
|
||||
// 'name': item.SERVERPART_NAME,
|
||||
// latitude: item.SERVERPART_Y,
|
||||
// longitude: item.SERVERPART_X
|
||||
// }
|
||||
// wx.navigateTo({
|
||||
// url: `plugin://routePlan/index?key=${key}&referer=${referer}&endPoint=${JSON.stringify(endPoint)}&startPoint=${JSON.stringify(startPoint)}`
|
||||
// });
|
||||
},
|
||||
//返回上一级页面
|
||||
handleBack() {
|
||||
|
||||
@ -1,79 +1,101 @@
|
||||
<template>
|
||||
<view class="page-card" v-if="!isLoading">
|
||||
<!-- 日期筛选 -->
|
||||
<div class="uni-flex ai-center screen-box">
|
||||
<picker mode="date" @change="bindDateChange($event,0)" :value="pageData.searchTime[0]" :end="pageData.endDate" start="2018-12-01" class="screen-unit">
|
||||
<view class="main" v-if="!isLoading">
|
||||
<!-- 时间筛选卡片 -->
|
||||
<view class="filterCard">
|
||||
<view class="filterHeader">
|
||||
<view class="filterTitle">时间筛选</view>
|
||||
</view>
|
||||
|
||||
<view class="dateSelector">
|
||||
<view class="dateRange">
|
||||
<picker mode="date" @change="bindDateChange($event, 0)" :value="pageData.searchTime[0]"
|
||||
:end="pageData.endDate" start="2018-12-01" class="datePicker">
|
||||
<view class="dateInput">
|
||||
<text>{{ pageData.searchTime[0] }}</text>
|
||||
<text class="uni-icon uni-icon-arrowdown"></text>
|
||||
</view>
|
||||
</picker>
|
||||
<text class="mr20">至</text>
|
||||
<picker mode="date" @change="bindDateChange($event,1)" :value="pageData.searchTime[1]" :end="pageData.endDate" start="2018-12-01" class="screen-unit">
|
||||
|
||||
<view class="dateSeparator">至</view>
|
||||
|
||||
<picker mode="date" @change="bindDateChange($event, 1)" :value="pageData.searchTime[1]"
|
||||
:end="pageData.endDate" start="2018-12-01" class="datePicker">
|
||||
<view class="dateInput">
|
||||
<text>{{ pageData.searchTime[1] }}</text>
|
||||
<text class="uni-icon uni-icon-arrowdown"></text>
|
||||
</view>
|
||||
</picker>
|
||||
</div>
|
||||
|
||||
<!-- @tap="toTrend"-->
|
||||
<view class="head-card" v-show="pageMsg.Serverpart_Name">
|
||||
<view class="uni-flex jc-between ai-center text-strong">
|
||||
<view class=""> {{pageMsg.Serverpart_Name}} </view>
|
||||
<view class=""> ¥{{$util.fmoney(pageMsg.Serverpart_Revenue,2)}} </view>
|
||||
</view>
|
||||
<view class="uni-flex jc-between ai-center">
|
||||
<text class="" v-if="pageMsg.Serverpart_S"> {{pageMsg.Serverpart_S}} ¥{{$util.fmoney(pageMsg.Serverpart_RevenueS,2)}}</text>
|
||||
<text class="" v-if="pageMsg.Serverpart_N"> {{pageMsg.Serverpart_N}} ¥{{$util.fmoney(pageMsg.Serverpart_RevenueN,2)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="page-list" v-if="pageMsg.ShopList && pageMsg.ShopList.length>0">
|
||||
<!-- <view v-for="(dateItem,i) in pageMsg.revenueReportDetilsDates" :key="i">-->
|
||||
<!-- <text class="list-date"> {{// $util.cutDate(dateItem.Statistics_Date,'MM.DD')}}</text>-->
|
||||
<view class="cell-body uni-flex ai-center" v-for="(item,i) in pageMsg.ShopList" :key="i">
|
||||
<image :src="item.BusinessType_Logo || '/static/images/revenue/operating-shop.png'" mode="aspectFit"></image>
|
||||
<view class="">
|
||||
<view class="uni-flex ai-center jc-between">
|
||||
<text>{{item.BusinessType_Name}}</text>
|
||||
<text class="shop-total">＋ ¥{{$util.fmoney(item.BusinessType_Revenue,2)}}</text>
|
||||
</view>
|
||||
<view class="uni-flex ai-center jc-between">
|
||||
<text style="display: inline-block;width: 20%" class="type-text" :class="{'scan':item.Upload_Type==1,'port':item.Upload_Type==2}">
|
||||
<template v-if="item.Upload_Type==1">
|
||||
扫码上传
|
||||
</template>
|
||||
<template v-else-if="item.Upload_Type==2" >
|
||||
接口传输
|
||||
</template>
|
||||
<template v-else>
|
||||
自动上传
|
||||
</template>
|
||||
<!-- <text class="type-text scan" v-if="item.Upload_Type==1" >扫码上传</text>
|
||||
<text class="type-text port" >接口传输</text>
|
||||
<text v-else>自动上传</text> -->
|
||||
</text>
|
||||
<view class="uni-flex ai-center" style="display: inline-block;width: 80%">
|
||||
<div style="display: inline-block;width: 48%;text-align: left;margin-right: 4%" class="text-coast">
|
||||
<text style="display: inline-block;width: 40px;text-align: left">
|
||||
{{item.Serverpart_RevenueS===0 || item.Serverpart_RevenueS? `${item.Serverpart_S}： `:''}}
|
||||
</text>
|
||||
<text style="display: inline-block;width: calc(100% - 50px);margin-left: 10px">
|
||||
{{item.Serverpart_RevenueS===0 || item.Serverpart_RevenueS? `¥${$util.fmoney(item.Serverpart_RevenueS,2)}`:''}}
|
||||
</text>
|
||||
</div>
|
||||
<div style="display: inline-block;width: 48%;text-align: right" class="text-coast">
|
||||
<text style="display: inline-block;width: 40px;text-align: left">
|
||||
{{item.Serverpart_RevenueN===0 || item.Serverpart_RevenueN? `${item.Serverpart_N}： `:''}}
|
||||
</text>
|
||||
<text style="display: inline-block;width: calc(100% - 50px);margin-left: 10px">
|
||||
{{item.Serverpart_RevenueN===0 || item.Serverpart_RevenueN? `¥${$util.fmoney(item.Serverpart_RevenueN,2)}`:''}}
|
||||
</text>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 服务区信息卡片 -->
|
||||
<view class="serviceCard" v-show="pageMsg.Serverpart_Name">
|
||||
<view class="serviceHeader">
|
||||
<view class="serviceName">{{ pageMsg.Serverpart_Name }}</view>
|
||||
<view class="serviceRevenue">¥{{ $util.fmoney(pageMsg.Serverpart_Revenue, 2) }}</view>
|
||||
</view>
|
||||
|
||||
<view class="serviceDetails" v-if="pageMsg.Serverpart_S || pageMsg.Serverpart_N">
|
||||
<view class="detailItem" v-if="pageMsg.Serverpart_S">
|
||||
<view class="detailLabel">{{ pageMsg.Serverpart_S }}</view>
|
||||
<view class="detailValue">¥{{ $util.fmoney(pageMsg.Serverpart_RevenueS, 2) }}</view>
|
||||
</view>
|
||||
<view class="detailItem" v-if="pageMsg.Serverpart_N">
|
||||
<view class="detailLabel">{{ pageMsg.Serverpart_N }}</view>
|
||||
<view class="detailValue">¥{{ $util.fmoney(pageMsg.Serverpart_RevenueN, 2) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
<view class="" v-if="isLoading && !pageOption.Serverpart_Name">
|
||||
<!-- 商铺列表 -->
|
||||
<view class="shopList" v-if="pageMsg.ShopList && pageMsg.ShopList.length > 0">
|
||||
<view class="shopItem" v-for="(item, i) in pageMsg.ShopList" :key="i">
|
||||
<view class="shopHeader">
|
||||
<view class="shopIcon">
|
||||
<image :src="item.BusinessType_Logo || '/static/images/revenue/operating-shop.png'"
|
||||
mode="aspectFill" />
|
||||
</view>
|
||||
|
||||
<view class="shopInfo">
|
||||
<view class="shopTop">
|
||||
<view class="shopName">{{ item.BusinessType_Name }}</view>
|
||||
<view class="shopRevenue">+ ¥{{ $util.fmoney(item.BusinessType_Revenue, 2) }}</view>
|
||||
</view>
|
||||
|
||||
<view class="shopBottom">
|
||||
<view class="uploadType" :class="{
|
||||
'scan': item.Upload_Type == 1,
|
||||
'port': item.Upload_Type == 2,
|
||||
'auto': item.Upload_Type != 1 && item.Upload_Type != 2
|
||||
}">
|
||||
<view class="typeIcon"></view>
|
||||
<text class="typeText">
|
||||
<template v-if="item.Upload_Type == 1">扫码上传</template>
|
||||
<template v-else-if="item.Upload_Type == 2">接口传输</template>
|
||||
<template v-else>自动上传</template>
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="revenueDetails">
|
||||
<view class="revenueItem"
|
||||
v-if="item.Serverpart_RevenueS || item.Serverpart_RevenueS === 0">
|
||||
<text class="revenueLabel">{{ item.Serverpart_S }}:</text>
|
||||
<text class="revenueValue">¥{{ $util.fmoney(item.Serverpart_RevenueS, 2) }}</text>
|
||||
</view>
|
||||
<view class="revenueItem"
|
||||
v-if="item.Serverpart_RevenueN || item.Serverpart_RevenueN === 0">
|
||||
<text class="revenueLabel">{{ item.Serverpart_N }}:</text>
|
||||
<text class="revenueValue">¥{{ $util.fmoney(item.Serverpart_RevenueN, 2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 无数据状态 -->
|
||||
<view v-if="isLoading && !pageOption.Serverpart_Name" class="noDataContainer">
|
||||
<noFound nodata="true" :text="noDataText" />
|
||||
</view>
|
||||
</view>
|
||||
@ -159,124 +181,278 @@ import request from '@/util/index.js'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
.page-card {
|
||||
margin: 0 20rpx 30rpx;
|
||||
<style lang="scss" scoped>
|
||||
// 使用项目全局颜色变量
|
||||
$bg: #f8f9fa;
|
||||
$muted: #666;
|
||||
$card: #fff;
|
||||
$shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
$primary: #27B25F;
|
||||
$primary2: #4CCC7F;
|
||||
$success: #2ed573;
|
||||
$warning: #ff9f43;
|
||||
$danger: #ff4757;
|
||||
$info: #3742fa;
|
||||
|
||||
page {
|
||||
background-color: $bg;
|
||||
}
|
||||
.screen-box {
|
||||
background-color: #fff;
|
||||
padding: 0 20rpx;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
|
||||
.main {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
background-color: $bg;
|
||||
padding: 32rpx;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.screen-box .screen-unit {
|
||||
|
||||
// 筛选卡片
|
||||
.filterCard {
|
||||
background: $card;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
box-shadow: $shadow;
|
||||
|
||||
.filterHeader {
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.filterTitle {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
}
|
||||
}
|
||||
|
||||
.dateSelector {
|
||||
.dateRange {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 200rpx;
|
||||
padding: 0 14rpx;
|
||||
line-height: 3;
|
||||
}
|
||||
.screen-box .mr20 {
|
||||
margin-right: 20rpx;
|
||||
color: #95999C;
|
||||
justify-content: space-between;
|
||||
|
||||
.datePicker {
|
||||
flex: 1;
|
||||
|
||||
.dateInput {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16rpx 24rpx;
|
||||
background: #f8f8f8;
|
||||
border-radius: 12rpx;
|
||||
|
||||
text:first-child {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #160002;
|
||||
}
|
||||
|
||||
.uni-icon-arrowdown {
|
||||
font-size: 22rpx;
|
||||
color: #C7C7C7;
|
||||
font-size: 20rpx;
|
||||
color: $muted;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
.screen-box text {
|
||||
line-height: 3;
|
||||
}
|
||||
.screen-box image{
|
||||
width: 12rpx;
|
||||
height: 8rpx;
|
||||
margin: 0 16rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.head-card {
|
||||
padding: 30rpx 35rpx;
|
||||
background: linear-gradient(to left, #f7f6f8 0%, #eceaeb 100%);
|
||||
border-radius: 12rpx 12rpx 0 0 ;
|
||||
}
|
||||
.head-card > view+view {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.text-strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
.head-card > view>text {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
}
|
||||
.list-date {
|
||||
font-size: 22rpx;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 4rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.page-list {
|
||||
border: 1rpx solid #F0F0F0;
|
||||
border-radius: 0 0 12rpx 12rpx;
|
||||
overflow: hidden;
|
||||
|
||||
padding: 30rpx 16rpx 30rpx 16rpx;
|
||||
}
|
||||
.cell-body {
|
||||
position: relative;
|
||||
padding: 20rpx 20rpx 20rpx 0;
|
||||
}
|
||||
.cell-body image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
.cell-body>view {
|
||||
flex: 1;
|
||||
}
|
||||
.page-list text {
|
||||
font-size: 22rpx;
|
||||
color: #2E2E2E;
|
||||
}
|
||||
text.shop-total {
|
||||
.dateSeparator {
|
||||
margin: 0 24rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: $muted;
|
||||
}
|
||||
text.type-text {
|
||||
color: #DFBE9F;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 服务区信息卡片
|
||||
.serviceCard {
|
||||
background: linear-gradient(to left, #93a4ec 0%, #4b76e9 100%);
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
box-shadow: $shadow;
|
||||
|
||||
.serviceHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.serviceName {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
flex: 1;
|
||||
}
|
||||
text.type-text.scan::before,text.type-text.port::before {
|
||||
content: '';
|
||||
width: 21rpx;
|
||||
height: 23rpx;
|
||||
|
||||
.serviceRevenue {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
font-family: 'DIN Alternate', 'Arial', sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.serviceDetails {
|
||||
display: flex;
|
||||
gap: 32rpx;
|
||||
|
||||
.detailItem {
|
||||
flex: 1;
|
||||
|
||||
.detailLabel {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.detailValue {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
font-family: 'DIN Alternate', 'Arial', sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 商铺列表
|
||||
.shopList {
|
||||
.shopItem {
|
||||
background: $card;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: $shadow;
|
||||
|
||||
.shopHeader {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.shopIcon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-right: 24rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.shopInfo {
|
||||
flex: 1;
|
||||
|
||||
.shopTop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.shopName {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.shopRevenue {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: $primary;
|
||||
font-family: 'DIN Alternate', 'Arial', sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.shopBottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.uploadType {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.typeIcon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 8rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
text.type-text.scan::before {
|
||||
|
||||
.typeText {
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&.scan {
|
||||
.typeIcon {
|
||||
background: url(/static/images/revenue/scan-up.png) no-repeat center;
|
||||
background-size: contain;
|
||||
}
|
||||
text.type-text.port::before {
|
||||
|
||||
.typeText {
|
||||
color: #DFBE9F;
|
||||
}
|
||||
}
|
||||
|
||||
&.port {
|
||||
.typeIcon {
|
||||
background: url(/static/images/revenue/port.png) no-repeat center;
|
||||
background-size: contain;
|
||||
}
|
||||
text.type-text.port {
|
||||
|
||||
.typeText {
|
||||
color: #95BAF2;
|
||||
}
|
||||
text.text-coast {
|
||||
color: #848484;
|
||||
width: 184rpx;
|
||||
text-align: right;
|
||||
}
|
||||
/*text.text-coast + text.text-coast {*/
|
||||
/* text-align: right;*/
|
||||
//}
|
||||
|
||||
&.auto {
|
||||
.typeText {
|
||||
color: $muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.revenueDetails {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
|
||||
.revenueItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.revenueLabel {
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
color: $muted;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.revenueValue {
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
font-family: 'DIN Alternate', 'Arial', sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 无数据状态
|
||||
.noDataContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 400rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,14 +1,17 @@
|
||||
<template>
|
||||
<view class="summaryOfPortraitsMain">
|
||||
<view class="summaryTab" v-if="selectPortrait!==6 && selectPortrait!==7" :style="{height: (menu.bottom + 14) + 'px',background:selectPortrait===0?'':
|
||||
<view class="summaryTab" v-if="selectPortrait !== 6 && selectPortrait !== 7" :style="{
|
||||
height: (menu.bottom + 14) + 'px', background: selectPortrait === 0 ? '' :
|
||||
selectPortrait === 1 ? serviceInfo.SERVERPART_NAME === '安徽驿达' ? 'linear-gradient(180deg, #A8BFED 0%, #F0F5FF 100%)' : 'linear-gradient(180deg, #A8BFED 0%, #C3D3F4 100%)' :
|
||||
selectPortrait === 2 ? serviceInfo.SERVERPART_NAME === '安徽驿达' ? 'linear-gradient(180deg, #A0D0C1 0%, #EEF7F8 100%)' : 'linear-gradient(180deg, #A0D0C1 0%, #C0E0D7 100%)' :
|
||||
selectPortrait === 3 ? serviceInfo.SERVERPART_NAME === '安徽驿达' ? 'linear-gradient(180deg, #D9CCEF 0%, #F4F0FF 100%)' : 'linear-gradient(180deg, #D9CCEF 0%, #F4F0FF 100%)' :
|
||||
selectPortrait === 4 ? serviceInfo.SERVERPART_NAME === '安徽驿达' ? 'linear-gradient(180deg, #ECD1AF 0%, #F0DDC4 100%)' : 'linear-gradient(180deg, #ECD1AF 0%, #F0DDC4 100%)' :
|
||||
selectPortrait === 5 ? serviceInfo.SERVERPART_NAME === '安徽驿达' ? 'linear-gradient(180deg, #C5C1F0 0%, #EEF0FE 100%)' : 'linear-gradient(180deg, #C5C1F0 0%, #EEF0FE 100%)' :
|
||||
''}">
|
||||
''
|
||||
}">
|
||||
<div class="leftArrow" :style="{ top: (menu.top + ((menu.height - 24) / 2)) + 'px' }">
|
||||
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg" @click="handleBack"></image>
|
||||
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"
|
||||
@click="handleBack"></image>
|
||||
<div class="picker" :style="{ top: (menu.bottom + 24) + 'px' }" @click="handleChangeService">
|
||||
<div class="selectService">
|
||||
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
|
||||
@ -17,7 +20,8 @@
|
||||
<view class="uni-input">{{ serviceInfo.SERVERPART_NAME ? serviceInfo.SERVERPART_NAME : '' }}</view>
|
||||
<p class="area">{{ serviceInfo.SPREGIONTYPE_NAME ? serviceInfo.SPREGIONTYPE_NAME : '' }}</p>
|
||||
<text class="noticeText" v-if="serviceInfo.SERVERPART_NAME === '安徽驿达'">选择您要看的服务区</text>
|
||||
<image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
|
||||
<image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
@ -33,41 +37,50 @@
|
||||
<sliderPage :index="selectPortrait" @handleChangeIndex="handleChangeIndex"/>
|
||||
</view> -->
|
||||
|
||||
<view class="summaryOfPortraitsBox">
|
||||
<view class="swiperItem">
|
||||
<mapDetail :selectIndex="selectPortrait" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template v-if=false>
|
||||
<swiper v-if="isShowSwiper" class="summaryOfPortraitsBox" @change="handleChangeSelect" :current="selectPortrait">
|
||||
<!-- 服务区基本信息 0-->
|
||||
<swiper-item class="swiperItem">
|
||||
<mapDetail :selectIndex="selectPortrait" />
|
||||
</swiper-item>
|
||||
<!-- 车流预警 1-->
|
||||
<swiper-item class="swiperItem" >
|
||||
<swiper-item class="swiperItem" v-if=false>
|
||||
<carPortrait :selectIndex="selectPortrait" :serviceInfo="serviceInfo" />
|
||||
</swiper-item>
|
||||
<!-- 客群画像 2-->
|
||||
<swiper-item class="swiperItem">
|
||||
<swiper-item class="swiperItem" v-if=false>
|
||||
<guestPortrait :selectIndex="selectPortrait" />
|
||||
</swiper-item>
|
||||
<!-- 经营画像 3-->
|
||||
<swiper-item class="swiperItem">
|
||||
<swiper-item class="swiperItem" v-if=false>
|
||||
<managePortrait :selectIndex="selectPortrait" />
|
||||
</swiper-item>
|
||||
<!-- 交易画像 4-->
|
||||
<swiper-item class="swiperItem">
|
||||
<swiper-item class="swiperItem" v-if=false>
|
||||
<businessPortrait :selectIndex="selectPortrait" />
|
||||
</swiper-item>
|
||||
<!-- 业态品牌 5-->
|
||||
<swiper-item class="swiperItem">
|
||||
<swiper-item class="swiperItem" v-if=false>
|
||||
<formatPortraitBI v-if="serviceInfo.SERVERPART_NAME !== '安徽驿达'" :selectIndex="selectPortrait" />
|
||||
<formatPortrait v-else :selectIndex="selectPortrait" :comeType="'summaryOfPortraits'" />
|
||||
</swiper-item>
|
||||
<!-- 考评考核 6-->
|
||||
<swiper-item class="swiperItem">
|
||||
<swiper-item class="swiperItem" v-if=false>
|
||||
<newAmine :selectIndex="selectPortrait" :pageType="1" />
|
||||
</swiper-item>
|
||||
<!-- 日常巡检 7-->
|
||||
<swiper-item class="swiperItem">
|
||||
<swiper-item class="swiperItem" v-if=false>
|
||||
<newAmine :selectIndex="selectPortrait" :pageType="2" />
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</template>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
@ -162,16 +175,19 @@ export default {
|
||||
.summaryOfPortraitsMain {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.summaryTab {
|
||||
position: fixed;
|
||||
left:0;top: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
background: transparent;
|
||||
background-image: url("https://eshangtech.com/minTestImg/pageBg.png");
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 16px;
|
||||
|
||||
.leftArrow {
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
@ -179,20 +195,24 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 99999999999;
|
||||
|
||||
.img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.picker {
|
||||
.selectService {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.select {
|
||||
height: 32px;
|
||||
background: #F8F8FA;
|
||||
@ -203,9 +223,11 @@ export default {
|
||||
padding-right: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.uni-input {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
@ -214,6 +236,7 @@ export default {
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
}
|
||||
|
||||
.area {
|
||||
font-size: 12px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
@ -222,10 +245,12 @@ export default {
|
||||
line-height: 40px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.rightArrow {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.noticeText {
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
@ -241,9 +266,11 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.summaryOfPortraitsBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.swiperItem {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
@ -183,6 +183,19 @@ export default {
|
||||
summaryOfPortraits: true,
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
id: "",
|
||||
name: "人员管理",
|
||||
// homeUrl: "/pages/map/detail?come=user",
|
||||
homeUrl: "/pages/attendanceStatus/index",
|
||||
imagePath:
|
||||
"https://eshangtech.com/ShopICO/ahyd-BID/user/assessment.svg",
|
||||
isNotice: true,
|
||||
notice: 0,
|
||||
type: 0,
|
||||
summaryOfPortraits: true,
|
||||
value: 4,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user