修改首页
This commit is contained in:
@ -92,6 +92,24 @@ export function getSingleSiteBaseInfo(data) {
|
||||
})
|
||||
}
|
||||
|
||||
//单站监控 首页 总累计运行数据
|
||||
export function getDzjkHomeView(data) {
|
||||
return request({
|
||||
url: `/ems/siteMonitor/homeView`, //?siteId=${siteId}
|
||||
method: 'get',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 电价报表（收益数据）
|
||||
export function getAmmeterRevenueData(params) {
|
||||
return request({
|
||||
url: `/ems/statsReport/getAmmeterRevenueData`,
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 一周冲放曲线
|
||||
export function getSevenChargeData(data) {
|
||||
return request({
|
||||
|
||||
17
pages.json
17
pages.json
@ -12,9 +12,7 @@
|
||||
}, {
|
||||
"path": "pages/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "工单列表",
|
||||
"navigationStyle": "custom",
|
||||
"onReachBottomDistance": 100
|
||||
"navigationBarTitleText": "首页"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/work/index",
|
||||
@ -72,6 +70,14 @@
|
||||
"navigationBarTitleText": "浏览文本"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/ticket/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "工单列表",
|
||||
"navigationStyle": "custom",
|
||||
"onReachBottomDistance": 100
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/ticket/index",
|
||||
"style": {
|
||||
@ -121,6 +127,11 @@
|
||||
"iconPath": "static/images/tabbar/home.png",
|
||||
"selectedIconPath": "static/images/tabbar/home_.png",
|
||||
"text": "首页"
|
||||
}, {
|
||||
"pagePath": "pages/ticket/list",
|
||||
"iconPath": "static/images/tabbar/ticket.png",
|
||||
"selectedIconPath": "static/images/tabbar/ticket_.png",
|
||||
"text": "工单"
|
||||
}, {
|
||||
"pagePath": "pages/work/index",
|
||||
"iconPath": "static/images/tabbar/work.png",
|
||||
|
||||
526
pages/index.vue
526
pages/index.vue
@ -1,229 +1,403 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="status-bar"></view>
|
||||
<view class="btn-list">
|
||||
<uni-row>
|
||||
<uni-col :span="12">
|
||||
<button type="default" class="btns" :class="{'active-btn' : active === 'undone'}"
|
||||
@click="changeTab('undone')">待处理</button>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<button type="default" class="btns" :class="{'active-btn' : active === 'done'}"
|
||||
@click="changeTab('done')">已处理</button>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
<view class="home-container">
|
||||
<view class="site-sections-list">
|
||||
<view class="site-title">站点选择</view>
|
||||
<checkbox-group class="site-radio" @change="onSiteChange">
|
||||
<label v-for="item in siteOptions" :key="item.value" class="radio-item"
|
||||
:class="{ active: selectedSiteIds.includes(item.value), disabled: item.disable }">
|
||||
<checkbox class="radio" :value="item.value" :disabled="item.disable"
|
||||
:checked="selectedSiteIds.includes(item.value)" color="#547ef4" />
|
||||
<text class="radio-text">{{ item.text }}</text>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<view v-if="list.length===0" class="no-data">暂无数据</view>
|
||||
<view class="content scroll-y" v-else>
|
||||
<view class="item-list" v-for="item in list" :key="item.ticketNo+'ticket'" @click="toDetail(item.id)">
|
||||
<view class="item-title" :class="item.status === 3 ? 'done' : item.status === 2 ? 'doing' : 'undone'">
|
||||
工单号：{{item.ticketNo}}
|
||||
<view class="item-status">{{ticketStatusOptions[item.status]}}</view>
|
||||
</view>
|
||||
<view class="item-content">
|
||||
<view class="item-info">工单标题:
|
||||
<text class="info-value">{{item.title}}</text>
|
||||
</view>
|
||||
<view class="item-info">问题描述:
|
||||
<text class="info-value">{{item.content}}</text>
|
||||
</view>
|
||||
<view class="item-info">预期完成时间:
|
||||
<text class="info-value">{{item.expectedCompleteTime || '-'}}</text>
|
||||
</view>
|
||||
<view class="item-info">处理人:
|
||||
<text class="info-value">
|
||||
{{item.workName || '-'}}
|
||||
</text>
|
||||
|
||||
<view class="base-info">
|
||||
<view class="total-card">
|
||||
<view class="total-header">
|
||||
<view class="title">总累计运行数据</view>
|
||||
<view class="total-revenue">
|
||||
<text class="label">总收入</text>
|
||||
<text class="value">{{ format2(runningInfo.totalRevenue) }}</text>
|
||||
<text class="unit">元</text>
|
||||
</view>
|
||||
</view>
|
||||
<uni-grid :column="2" :showBorder="false" :square="false" :highlight="false">
|
||||
<uni-grid-item v-for="(item, index) in sjglData" :key="index + 'sjglData'">
|
||||
<view class="grid-item-box">
|
||||
<view class="title">{{ item.title }}</view>
|
||||
<view class="text" :style="{ color: item.color }">
|
||||
{{ format2(runningInfo[item.attr]) }}
|
||||
</view>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view>
|
||||
|
||||
<uni-section title="收入曲线" type="line" class="sections-list">
|
||||
<view style="width:100%;height: 220px;">
|
||||
<qiun-data-charts type="line" :chartData="revenueChartData" :optsWatch='false'
|
||||
:inScrollView="true" :pageScrollTop="pageScrollTop" :opts="revenueOptions" :ontouch="true" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState
|
||||
mapGetters
|
||||
} from 'vuex'
|
||||
import {
|
||||
listTicket
|
||||
} from 'api/ems/ticket'
|
||||
formatDate
|
||||
} from '@/utils/filters'
|
||||
import {
|
||||
getAllSites,
|
||||
getDzjkHomeView,
|
||||
getAmmeterRevenueData
|
||||
} from '@/api/ems/site.js'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
ticketStatusOptions: (state) => state.ems.ticketStatusOptions
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 'undone',
|
||||
total: 0,
|
||||
list: [],
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
pageScrollTop: 0,
|
||||
siteOptions: [],
|
||||
selectedSiteIds: [],
|
||||
runningInfo: {},
|
||||
revenueChartData: {},
|
||||
revenueOptions: {
|
||||
padding: [10, 5, 0, 10],
|
||||
dataLabel: false,
|
||||
enableScroll: false,
|
||||
xAxis: {
|
||||
scrollShow: false,
|
||||
itemCount: 5,
|
||||
disableGrid: true
|
||||
},
|
||||
yAxis: {
|
||||
disabled: false,
|
||||
splitNumber: 4
|
||||
},
|
||||
extra: {
|
||||
line: {
|
||||
type: "curve",
|
||||
width: 2
|
||||
},
|
||||
area: {
|
||||
type: "curve",
|
||||
opacity: 0.2,
|
||||
addLine: true,
|
||||
gradient: true
|
||||
}
|
||||
}
|
||||
},
|
||||
sjglData: [{
|
||||
title: "今日充电量（kWh）",
|
||||
attr: "dayChargedCap",
|
||||
color: '#4472c4'
|
||||
},
|
||||
{
|
||||
title: "今日放电量（kWh）",
|
||||
attr: "dayDisChargedCap",
|
||||
color: '#70ad47'
|
||||
},
|
||||
{
|
||||
title: "总充电量（kWh）",
|
||||
attr: "totalChargedCap",
|
||||
color: '#4472c4'
|
||||
},
|
||||
{
|
||||
title: "今日实时收入（元）",
|
||||
attr: "dayRevenue",
|
||||
color: '#f67438'
|
||||
},
|
||||
{
|
||||
title: "昨日充电量（kWh）",
|
||||
attr: "yesterdayChargedCap",
|
||||
color: '#4472c4'
|
||||
},
|
||||
{
|
||||
title: "昨日放电量（kWh）",
|
||||
attr: "yesterdayDisChargedCap",
|
||||
color: '#70ad47'
|
||||
},
|
||||
{
|
||||
title: "总放电量（kWh）",
|
||||
attr: "totalDischargedCap",
|
||||
color: '#70ad47'
|
||||
},
|
||||
{
|
||||
title: "昨日实时收入（元）",
|
||||
attr: "yesterdayRevenue",
|
||||
color: '#f67438'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['belongSite'])
|
||||
},
|
||||
methods: {
|
||||
changeTab(active) {
|
||||
if (active === this.active) return
|
||||
this.active = active
|
||||
this.reset()
|
||||
this.init()
|
||||
format2(value) {
|
||||
const num = Number(value || 0)
|
||||
return Number.isFinite(num) ? num.toFixed(2) : '0.00'
|
||||
},
|
||||
init() {
|
||||
//1: '待处理', 2: '处理中', 3: '已处理'
|
||||
let url = `/ticket/list?pageNum=${this.pageNum}&pageSize=${this.pageSize}`
|
||||
if (this.active === 'done') {
|
||||
url += `&status=3`
|
||||
} else {
|
||||
url += `&status=1&status=2`
|
||||
getLastDaysRange(days = 7) {
|
||||
const end = new Date()
|
||||
const start = new Date(end.getTime() - (days - 1) * 24 * 60 * 60 * 1000)
|
||||
return [formatDate(start), formatDate(end)]
|
||||
},
|
||||
buildDateList(start, end) {
|
||||
const list = []
|
||||
const startTime = new Date(start).getTime()
|
||||
const endTime = new Date(end).getTime()
|
||||
const dayMs = 24 * 60 * 60 * 1000
|
||||
for (let t = startTime; t <= endTime; t += dayMs) {
|
||||
list.push(formatDate(t))
|
||||
}
|
||||
uni.showLoading()
|
||||
return listTicket(url).then(response => {
|
||||
const data = JSON.parse(JSON.stringify(response?.rows || []))
|
||||
this.list = this.list.concat(data)
|
||||
this.total = response?.total || 0
|
||||
}).finally(() => {
|
||||
uni.hideLoading()
|
||||
return list
|
||||
},
|
||||
onSiteChange(e) {
|
||||
const values = e.detail.value || []
|
||||
this.selectedSiteIds = values
|
||||
this.updateSiteInfo()
|
||||
},
|
||||
updateSiteInfo() {
|
||||
if (!this.selectedSiteIds || this.selectedSiteIds.length === 0) {
|
||||
this.runningInfo = {}
|
||||
this.revenueChartData = {}
|
||||
return
|
||||
}
|
||||
this.getRunningInfo()
|
||||
this.getRevenueChartData()
|
||||
},
|
||||
getSiteList() {
|
||||
getAllSites().then(response => {
|
||||
const data = response?.data || []
|
||||
this.siteOptions = data.map(item => {
|
||||
return {
|
||||
text: item.siteName,
|
||||
value: item.siteId,
|
||||
disable: !this.belongSite || this.belongSite.length === 0 || this.belongSite.includes('all') ? false : !this
|
||||
.belongSite.includes(item.siteId)
|
||||
}
|
||||
})
|
||||
const defaultSite = this.siteOptions.find(item => !item.disable)?.value || ''
|
||||
this.selectedSiteIds = defaultSite ? [defaultSite] : []
|
||||
this.selectedSiteIds.length > 0 && this.updateSiteInfo()
|
||||
})
|
||||
},
|
||||
toDetail(id) {
|
||||
this.$tab.navigateTo(`/pages/ticket/index?id=${id}`)
|
||||
getRunningInfo() {
|
||||
const sumFields = ['totalRevenue', ...this.sjglData.map(item => item.attr)]
|
||||
const requests = this.selectedSiteIds.map(siteId => getDzjkHomeView({
|
||||
siteId
|
||||
}).then(response => response?.data || {}))
|
||||
Promise.all(requests).then(list => {
|
||||
const result = {}
|
||||
sumFields.forEach(key => {
|
||||
result[key] = list.reduce((sum, item) => {
|
||||
const value = Number(item?.[key] || 0)
|
||||
return sum + (Number.isFinite(value) ? value : 0)
|
||||
}, 0)
|
||||
})
|
||||
this.runningInfo = result
|
||||
})
|
||||
},
|
||||
reset() {
|
||||
this.list = []
|
||||
this.total = 0
|
||||
this.pageNum = 1
|
||||
getRevenueChartData() {
|
||||
const [startTime, endTime] = this.getLastDaysRange(7)
|
||||
const dateList = this.buildDateList(startTime, endTime)
|
||||
const requests = this.selectedSiteIds.map(siteId => getAmmeterRevenueData({
|
||||
siteId,
|
||||
startTime,
|
||||
endTime,
|
||||
pageSize: 200,
|
||||
pageNum: 1
|
||||
}).then(response => ({
|
||||
siteId,
|
||||
rows: response?.rows || []
|
||||
})))
|
||||
Promise.all(requests).then(list => {
|
||||
const categories = dateList.map(day => day.slice(5))
|
||||
const series = list.map(item => {
|
||||
const sumMap = {}
|
||||
dateList.forEach(day => {
|
||||
sumMap[day] = 0
|
||||
})
|
||||
item.rows.forEach(row => {
|
||||
const day = row.dataTime || row.statisDate || row.date
|
||||
if (!day) return
|
||||
if (!Object.prototype.hasOwnProperty.call(sumMap, day)) {
|
||||
sumMap[day] = 0
|
||||
}
|
||||
const value = Number(row.actualRevenue || row.revenue || 0)
|
||||
sumMap[day] += Number.isFinite(value) ? value : 0
|
||||
})
|
||||
const name = this.siteOptions.find(opt => opt.value === item.siteId)?.text || item.siteId
|
||||
return {
|
||||
name,
|
||||
data: dateList.map(day => Number((sumMap[day] || 0).toFixed(2)))
|
||||
}
|
||||
})
|
||||
this.revenueChartData = JSON.parse(JSON.stringify({
|
||||
categories,
|
||||
series
|
||||
}))
|
||||
})
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.list.length >= this.total) {
|
||||
return console.log('数据已经加载完成')
|
||||
}
|
||||
this.pageNum += 1;
|
||||
this.init().catch(() => {
|
||||
this.pageNum -= 1
|
||||
onLoad() {
|
||||
this.$nextTick(() => {
|
||||
this.getSiteList()
|
||||
})
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.reset()
|
||||
this.init()
|
||||
onPageScroll(e) {
|
||||
this.pageScrollTop = e.scrollTop
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
position: relative;
|
||||
background-color: #f5f6f7;
|
||||
|
||||
.no-data {
|
||||
padding-top: 180rpx;
|
||||
}
|
||||
}
|
||||
|
||||
uni-button:after {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-list {
|
||||
position: fixed;
|
||||
top: var(--status-bar-height);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
padding: 20rpx 30rpx;
|
||||
background: #ffffff;
|
||||
|
||||
.btns {
|
||||
border: none;
|
||||
border-radius: 40rpx;
|
||||
width: 90%;
|
||||
font-size: 26rpx;
|
||||
line-height: 64rpx;
|
||||
color: #19242d;
|
||||
background: #d9e7fc;
|
||||
|
||||
&.active-btn {
|
||||
background: #4c7af3;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 80px 30rpx 120rpx 30rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// 工单列表
|
||||
.item-list {
|
||||
color: #4b4951;
|
||||
border-radius: 14rpx;
|
||||
box-shadow: 0 0 20rpx rgba(0, 0, 0, .1), 0 0 0 rgba(0, 0, 0, .5);
|
||||
<style lang="scss" scoped>
|
||||
/* #ifndef APP-NVUE */
|
||||
page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 30rpx;
|
||||
border: 1px solid #eee;
|
||||
background: #ffffff;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
// 标题
|
||||
.item-title {
|
||||
border-radius: 14rpx 14rpx 0 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 20rpx 30rpx;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
view {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.item-status {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 2rpx 20rpx;
|
||||
color: #ffffff;
|
||||
font-size: 22rpx;
|
||||
/* #endif */
|
||||
|
||||
.home-container {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.site-sections-list {
|
||||
background: linear-gradient(to right, #547ef4, #679ff5);
|
||||
padding: 30rpx 30rpx 100rpx;
|
||||
color: #fff;
|
||||
|
||||
.site-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.site-radio {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12rpx 20rpx;
|
||||
border-radius: 28rpx;
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.active {
|
||||
background: #ffffff;
|
||||
color: #233157;
|
||||
box-shadow: 0 12rpx 22rpx rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
&.done {
|
||||
.item-status {
|
||||
background-color: #30be95;
|
||||
}
|
||||
&.disabled {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
&.doing {
|
||||
.item-status {
|
||||
background-color: #3c68e7;
|
||||
}
|
||||
.radio {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.undone {
|
||||
.item-status {
|
||||
background-color: #ed7876;
|
||||
}
|
||||
.radio-text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 内容
|
||||
.item-content {
|
||||
padding: 20rpx 30rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
.base-info {
|
||||
margin-top: -80rpx;
|
||||
border-radius: 80rpx 80rpx 0 0;
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.total-card {
|
||||
margin-top: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
padding: 20rpx;
|
||||
|
||||
.total-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.info-value {
|
||||
padding-left: 10rpx;
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.total-revenue {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6rpx;
|
||||
font-size: 22rpx;
|
||||
color: #19242d;
|
||||
|
||||
.value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #f67438;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-item-box {
|
||||
padding-top: 6rpx;
|
||||
padding-bottom: 6rpx;
|
||||
text-align: left;
|
||||
|
||||
.title {
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 10rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-content .item-info:last-child {
|
||||
margin-bottom: 0;
|
||||
.sections-list {
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
::v-deep &>.uni-section-header {
|
||||
font-weight: 700;
|
||||
font-size: 26rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sections-list:not(:first-child) {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content .item-list:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
@ -97,7 +97,7 @@
|
||||
duration: 2000
|
||||
});
|
||||
uni.switchTab({
|
||||
url: '/pages/index'
|
||||
url: '/pages/ticket/list'
|
||||
});
|
||||
}
|
||||
}).finally(() => this.loading = false)
|
||||
|
||||
229
pages/ticket/list.vue
Normal file
229
pages/ticket/list.vue
Normal file
@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="status-bar"></view>
|
||||
<view class="btn-list">
|
||||
<uni-row>
|
||||
<uni-col :span="12">
|
||||
<button type="default" class="btns" :class="{'active-btn' : active === 'undone'}"
|
||||
@click="changeTab('undone')">待处理</button>
|
||||
</uni-col>
|
||||
<uni-col :span="12">
|
||||
<button type="default" class="btns" :class="{'active-btn' : active === 'done'}"
|
||||
@click="changeTab('done')">已处理</button>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</view>
|
||||
<view v-if="list.length===0" class="no-data">暂无数据</view>
|
||||
<view class="content scroll-y" v-else>
|
||||
<view class="item-list" v-for="item in list" :key="item.ticketNo+'ticket'" @click="toDetail(item.id)">
|
||||
<view class="item-title" :class="item.status === 3 ? 'done' : item.status === 2 ? 'doing' : 'undone'">
|
||||
工单号：{{item.ticketNo}}
|
||||
<view class="item-status">{{ticketStatusOptions[item.status]}}</view>
|
||||
</view>
|
||||
<view class="item-content">
|
||||
<view class="item-info">工单标题:
|
||||
<text class="info-value">{{item.title}}</text>
|
||||
</view>
|
||||
<view class="item-info">问题描述:
|
||||
<text class="info-value">{{item.content}}</text>
|
||||
</view>
|
||||
<view class="item-info">预期完成时间:
|
||||
<text class="info-value">{{item.expectedCompleteTime || '-'}}</text>
|
||||
</view>
|
||||
<view class="item-info">处理人:
|
||||
<text class="info-value">
|
||||
{{item.workName || '-'}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
import {
|
||||
listTicket
|
||||
} from 'api/ems/ticket'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
ticketStatusOptions: (state) => state.ems.ticketStatusOptions
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 'undone',
|
||||
total: 0,
|
||||
list: [],
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTab(active) {
|
||||
if (active === this.active) return
|
||||
this.active = active
|
||||
this.reset()
|
||||
this.init()
|
||||
},
|
||||
init() {
|
||||
//1: '待处理', 2: '处理中', 3: '已处理'
|
||||
let url = `/ticket/list?pageNum=${this.pageNum}&pageSize=${this.pageSize}`
|
||||
if (this.active === 'done') {
|
||||
url += `&status=3`
|
||||
} else {
|
||||
url += `&status=1&status=2`
|
||||
}
|
||||
uni.showLoading()
|
||||
return listTicket(url).then(response => {
|
||||
const data = JSON.parse(JSON.stringify(response?.rows || []))
|
||||
this.list = this.list.concat(data)
|
||||
this.total = response?.total || 0
|
||||
}).finally(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
toDetail(id) {
|
||||
this.$tab.navigateTo(`/pages/ticket/index?id=${id}`)
|
||||
},
|
||||
reset() {
|
||||
this.list = []
|
||||
this.total = 0
|
||||
this.pageNum = 1
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.list.length >= this.total) {
|
||||
return console.log('数据已经加载完成')
|
||||
}
|
||||
this.pageNum += 1;
|
||||
this.init().catch(() => {
|
||||
this.pageNum -= 1
|
||||
})
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.reset()
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
position: relative;
|
||||
background-color: #f5f6f7;
|
||||
|
||||
.no-data {
|
||||
padding-top: 180rpx;
|
||||
}
|
||||
}
|
||||
|
||||
uni-button:after {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-list {
|
||||
position: fixed;
|
||||
top: var(--status-bar-height);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
padding: 20rpx 30rpx;
|
||||
background: #ffffff;
|
||||
|
||||
.btns {
|
||||
border: none;
|
||||
border-radius: 40rpx;
|
||||
width: 90%;
|
||||
font-size: 26rpx;
|
||||
line-height: 64rpx;
|
||||
color: #19242d;
|
||||
background: #d9e7fc;
|
||||
|
||||
&.active-btn {
|
||||
background: #4c7af3;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 80px 30rpx 120rpx 30rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// 工单列表
|
||||
.item-list {
|
||||
color: #4b4951;
|
||||
border-radius: 14rpx;
|
||||
box-shadow: 0 0 20rpx rgba(0, 0, 0, .1), 0 0 0 rgba(0, 0, 0, .5);
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 30rpx;
|
||||
border: 1px solid #eee;
|
||||
background: #ffffff;
|
||||
|
||||
// 标题
|
||||
.item-title {
|
||||
border-radius: 14rpx 14rpx 0 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 20rpx 30rpx;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
|
||||
.item-status {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 2rpx 20rpx;
|
||||
color: #ffffff;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
&.done {
|
||||
.item-status {
|
||||
background-color: #30be95;
|
||||
}
|
||||
}
|
||||
|
||||
&.doing {
|
||||
.item-status {
|
||||
background-color: #3c68e7;
|
||||
}
|
||||
}
|
||||
|
||||
&.undone {
|
||||
.item-status {
|
||||
background-color: #ed7876;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 内容
|
||||
.item-content {
|
||||
padding: 20rpx 30rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
.item-info {
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.info-value {
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-content .item-info:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content .item-list:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
BIN
static/images/tabbar/ticket.png
Normal file
BIN
static/images/tabbar/ticket.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 B |
BIN
static/images/tabbar/ticket_.png
Normal file
BIN
static/images/tabbar/ticket_.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 169 B |
Reference in New Issue
Block a user