修改首页
This commit is contained in:
@ -83,20 +83,38 @@ export function getSingleBatteryData(data) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取单个站点的基本信息
|
//获取单个站点的基本信息
|
||||||
export function getSingleSiteBaseInfo(data) {
|
export function getSingleSiteBaseInfo(data) {
|
||||||
return request({
|
return request({
|
||||||
url: `/ems/siteMap/getSingleSiteBaseInfo`, //?siteId=${siteId}`,
|
url: `/ems/siteMap/getSingleSiteBaseInfo`, //?siteId=${siteId}`,
|
||||||
method: 'get',
|
method: 'get',
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 一周冲放曲线
|
//单站监控 首页 总累计运行数据
|
||||||
export function getSevenChargeData(data) {
|
export function getDzjkHomeView(data) {
|
||||||
return request({
|
return request({
|
||||||
url: `/ems/siteMap/getSevenChargeData`, //?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
|
url: `/ems/siteMonitor/homeView`, //?siteId=${siteId}
|
||||||
method: 'get',
|
method: 'get',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 电价报表（收益数据）
|
||||||
|
export function getAmmeterRevenueData(params) {
|
||||||
|
return request({
|
||||||
|
url: `/ems/statsReport/getAmmeterRevenueData`,
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 一周冲放曲线
|
||||||
|
export function getSevenChargeData(data) {
|
||||||
|
return request({
|
||||||
|
url: `/ems/siteMap/getSevenChargeData`, //?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
|
||||||
|
method: 'get',
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -117,4 +135,4 @@ export function getSiteAllDeviceCategory(data) {
|
|||||||
method: 'get',
|
method: 'get',
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
57
pages.json
57
pages.json
@ -9,15 +9,13 @@
|
|||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "注册"
|
"navigationBarTitleText": "注册"
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
"path": "pages/index",
|
"path": "pages/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "工单列表",
|
"navigationBarTitleText": "首页"
|
||||||
"navigationStyle": "custom",
|
}
|
||||||
"onReachBottomDistance": 100
|
}, {
|
||||||
}
|
"path": "pages/work/index",
|
||||||
}, {
|
|
||||||
"path": "pages/work/index",
|
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "工作台"
|
"navigationBarTitleText": "工作台"
|
||||||
}
|
}
|
||||||
@ -71,11 +69,19 @@
|
|||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "浏览文本"
|
"navigationBarTitleText": "浏览文本"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/ticket/index",
|
"path": "pages/ticket/list",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "工单详情"
|
"navigationBarTitleText": "工单列表",
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"onReachBottomDistance": 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/ticket/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "工单详情"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -116,14 +122,19 @@
|
|||||||
"selectedColor": "#000000",
|
"selectedColor": "#000000",
|
||||||
"borderStyle": "white",
|
"borderStyle": "white",
|
||||||
"backgroundColor": "#ffffff",
|
"backgroundColor": "#ffffff",
|
||||||
"list": [{
|
"list": [{
|
||||||
"pagePath": "pages/index",
|
"pagePath": "pages/index",
|
||||||
"iconPath": "static/images/tabbar/home.png",
|
"iconPath": "static/images/tabbar/home.png",
|
||||||
"selectedIconPath": "static/images/tabbar/home_.png",
|
"selectedIconPath": "static/images/tabbar/home_.png",
|
||||||
"text": "首页"
|
"text": "首页"
|
||||||
}, {
|
}, {
|
||||||
"pagePath": "pages/work/index",
|
"pagePath": "pages/ticket/list",
|
||||||
"iconPath": "static/images/tabbar/work.png",
|
"iconPath": "static/images/tabbar/ticket.png",
|
||||||
|
"selectedIconPath": "static/images/tabbar/ticket_.png",
|
||||||
|
"text": "工单"
|
||||||
|
}, {
|
||||||
|
"pagePath": "pages/work/index",
|
||||||
|
"iconPath": "static/images/tabbar/work.png",
|
||||||
"selectedIconPath": "static/images/tabbar/work_.png",
|
"selectedIconPath": "static/images/tabbar/work_.png",
|
||||||
"text": "工作台"
|
"text": "工作台"
|
||||||
}, {
|
}, {
|
||||||
@ -138,4 +149,4 @@
|
|||||||
"navigationBarTitleText": "EMS",
|
"navigationBarTitleText": "EMS",
|
||||||
"navigationBarBackgroundColor": "#FFFFFF"
|
"navigationBarBackgroundColor": "#FFFFFF"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
632
pages/index.vue
632
pages/index.vue
@ -1,229 +1,403 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="home-container">
|
||||||
<view class="status-bar"></view>
|
<view class="site-sections-list">
|
||||||
<view class="btn-list">
|
<view class="site-title">站点选择</view>
|
||||||
<uni-row>
|
<checkbox-group class="site-radio" @change="onSiteChange">
|
||||||
<uni-col :span="12">
|
<label v-for="item in siteOptions" :key="item.value" class="radio-item"
|
||||||
<button type="default" class="btns" :class="{'active-btn' : active === 'undone'}"
|
:class="{ active: selectedSiteIds.includes(item.value), disabled: item.disable }">
|
||||||
@click="changeTab('undone')">待处理</button>
|
<checkbox class="radio" :value="item.value" :disabled="item.disable"
|
||||||
</uni-col>
|
:checked="selectedSiteIds.includes(item.value)" color="#547ef4" />
|
||||||
<uni-col :span="12">
|
<text class="radio-text">{{ item.text }}</text>
|
||||||
<button type="default" class="btns" :class="{'active-btn' : active === 'done'}"
|
</label>
|
||||||
@click="changeTab('done')">已处理</button>
|
</checkbox-group>
|
||||||
</uni-col>
|
</view>
|
||||||
</uni-row>
|
|
||||||
</view>
|
<view class="base-info">
|
||||||
<view v-if="list.length===0" class="no-data">暂无数据</view>
|
<view class="total-card">
|
||||||
<view class="content scroll-y" v-else>
|
<view class="total-header">
|
||||||
<view class="item-list" v-for="item in list" :key="item.ticketNo+'ticket'" @click="toDetail(item.id)">
|
<view class="title">总累计运行数据</view>
|
||||||
<view class="item-title" :class="item.status === 3 ? 'done' : item.status === 2 ? 'doing' : 'undone'">
|
<view class="total-revenue">
|
||||||
工单号：{{item.ticketNo}}
|
<text class="label">总收入</text>
|
||||||
<view class="item-status">{{ticketStatusOptions[item.status]}}</view>
|
<text class="value">{{ format2(runningInfo.totalRevenue) }}</text>
|
||||||
</view>
|
<text class="unit">元</text>
|
||||||
<view class="item-content">
|
</view>
|
||||||
<view class="item-info">工单标题:
|
</view>
|
||||||
<text class="info-value">{{item.title}}</text>
|
<uni-grid :column="2" :showBorder="false" :square="false" :highlight="false">
|
||||||
</view>
|
<uni-grid-item v-for="(item, index) in sjglData" :key="index + 'sjglData'">
|
||||||
<view class="item-info">问题描述:
|
<view class="grid-item-box">
|
||||||
<text class="info-value">{{item.content}}</text>
|
<view class="title">{{ item.title }}</view>
|
||||||
</view>
|
<view class="text" :style="{ color: item.color }">
|
||||||
<view class="item-info">预期完成时间:
|
{{ format2(runningInfo[item.attr]) }}
|
||||||
<text class="info-value">{{item.expectedCompleteTime || '-'}}</text>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="item-info">处理人:
|
</uni-grid-item>
|
||||||
<text class="info-value">
|
</uni-grid>
|
||||||
{{item.workName || '-'}}
|
</view>
|
||||||
</text>
|
|
||||||
</view>
|
<uni-section title="收入曲线" type="line" class="sections-list">
|
||||||
</view>
|
<view style="width:100%;height: 220px;">
|
||||||
</view>
|
<qiun-data-charts type="line" :chartData="revenueChartData" :optsWatch='false'
|
||||||
</view>
|
:inScrollView="true" :pageScrollTop="pageScrollTop" :opts="revenueOptions" :ontouch="true" />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</uni-section>
|
||||||
<script>
|
|
||||||
import {
|
</view>
|
||||||
mapState
|
</view>
|
||||||
} from 'vuex'
|
</template>
|
||||||
import {
|
|
||||||
listTicket
|
<script>
|
||||||
} from 'api/ems/ticket'
|
import {
|
||||||
export default {
|
mapGetters
|
||||||
computed: {
|
} from 'vuex'
|
||||||
...mapState({
|
import {
|
||||||
ticketStatusOptions: (state) => state.ems.ticketStatusOptions
|
formatDate
|
||||||
})
|
} from '@/utils/filters'
|
||||||
},
|
import {
|
||||||
data() {
|
getAllSites,
|
||||||
return {
|
getDzjkHomeView,
|
||||||
active: 'undone',
|
getAmmeterRevenueData
|
||||||
total: 0,
|
} from '@/api/ems/site.js'
|
||||||
list: [],
|
|
||||||
pageNum: 1,
|
export default {
|
||||||
pageSize: 20
|
data() {
|
||||||
}
|
return {
|
||||||
},
|
pageScrollTop: 0,
|
||||||
methods: {
|
siteOptions: [],
|
||||||
changeTab(active) {
|
selectedSiteIds: [],
|
||||||
if (active === this.active) return
|
runningInfo: {},
|
||||||
this.active = active
|
revenueChartData: {},
|
||||||
this.reset()
|
revenueOptions: {
|
||||||
this.init()
|
padding: [10, 5, 0, 10],
|
||||||
},
|
dataLabel: false,
|
||||||
init() {
|
enableScroll: false,
|
||||||
//1: '待处理', 2: '处理中', 3: '已处理'
|
xAxis: {
|
||||||
let url = `/ticket/list?pageNum=${this.pageNum}&pageSize=${this.pageSize}`
|
scrollShow: false,
|
||||||
if (this.active === 'done') {
|
itemCount: 5,
|
||||||
url += `&status=3`
|
disableGrid: true
|
||||||
} else {
|
},
|
||||||
url += `&status=1&status=2`
|
yAxis: {
|
||||||
}
|
disabled: false,
|
||||||
uni.showLoading()
|
splitNumber: 4
|
||||||
return listTicket(url).then(response => {
|
},
|
||||||
const data = JSON.parse(JSON.stringify(response?.rows || []))
|
extra: {
|
||||||
this.list = this.list.concat(data)
|
line: {
|
||||||
this.total = response?.total || 0
|
type: "curve",
|
||||||
}).finally(() => {
|
width: 2
|
||||||
uni.hideLoading()
|
},
|
||||||
})
|
area: {
|
||||||
},
|
type: "curve",
|
||||||
toDetail(id) {
|
opacity: 0.2,
|
||||||
this.$tab.navigateTo(`/pages/ticket/index?id=${id}`)
|
addLine: true,
|
||||||
},
|
gradient: true
|
||||||
reset() {
|
}
|
||||||
this.list = []
|
}
|
||||||
this.total = 0
|
},
|
||||||
this.pageNum = 1
|
sjglData: [{
|
||||||
}
|
title: "今日充电量（kWh）",
|
||||||
},
|
attr: "dayChargedCap",
|
||||||
onReachBottom() {
|
color: '#4472c4'
|
||||||
if (this.list.length >= this.total) {
|
},
|
||||||
return console.log('数据已经加载完成')
|
{
|
||||||
}
|
title: "今日放电量（kWh）",
|
||||||
this.pageNum += 1;
|
attr: "dayDisChargedCap",
|
||||||
this.init().catch(() => {
|
color: '#70ad47'
|
||||||
this.pageNum -= 1
|
},
|
||||||
})
|
{
|
||||||
|
title: "总充电量（kWh）",
|
||||||
},
|
attr: "totalChargedCap",
|
||||||
onShow() {
|
color: '#4472c4'
|
||||||
this.reset()
|
},
|
||||||
this.init()
|
{
|
||||||
}
|
title: "今日实时收入（元）",
|
||||||
}
|
attr: "dayRevenue",
|
||||||
</script>
|
color: '#f67438'
|
||||||
|
},
|
||||||
<style scoped lang="scss">
|
{
|
||||||
.container {
|
title: "昨日充电量（kWh）",
|
||||||
position: relative;
|
attr: "yesterdayChargedCap",
|
||||||
background-color: #f5f6f7;
|
color: '#4472c4'
|
||||||
|
},
|
||||||
.no-data {
|
{
|
||||||
padding-top: 180rpx;
|
title: "昨日放电量（kWh）",
|
||||||
}
|
attr: "yesterdayDisChargedCap",
|
||||||
}
|
color: '#70ad47'
|
||||||
|
},
|
||||||
uni-button:after {
|
{
|
||||||
border: none;
|
title: "总放电量（kWh）",
|
||||||
border-radius: 0;
|
attr: "totalDischargedCap",
|
||||||
}
|
color: '#70ad47'
|
||||||
|
},
|
||||||
.btn-list {
|
{
|
||||||
position: fixed;
|
title: "昨日实时收入（元）",
|
||||||
top: var(--status-bar-height);
|
attr: "yesterdayRevenue",
|
||||||
left: 0;
|
color: '#f67438'
|
||||||
width: 100%;
|
}
|
||||||
z-index: 2;
|
]
|
||||||
padding: 20rpx 30rpx;
|
}
|
||||||
background: #ffffff;
|
},
|
||||||
|
computed: {
|
||||||
.btns {
|
...mapGetters(['belongSite'])
|
||||||
border: none;
|
},
|
||||||
border-radius: 40rpx;
|
methods: {
|
||||||
width: 90%;
|
format2(value) {
|
||||||
font-size: 26rpx;
|
const num = Number(value || 0)
|
||||||
line-height: 64rpx;
|
return Number.isFinite(num) ? num.toFixed(2) : '0.00'
|
||||||
color: #19242d;
|
},
|
||||||
background: #d9e7fc;
|
getLastDaysRange(days = 7) {
|
||||||
|
const end = new Date()
|
||||||
&.active-btn {
|
const start = new Date(end.getTime() - (days - 1) * 24 * 60 * 60 * 1000)
|
||||||
background: #4c7af3;
|
return [formatDate(start), formatDate(end)]
|
||||||
color: #fff;
|
},
|
||||||
}
|
buildDateList(start, end) {
|
||||||
}
|
const list = []
|
||||||
}
|
const startTime = new Date(start).getTime()
|
||||||
|
const endTime = new Date(end).getTime()
|
||||||
.content {
|
const dayMs = 24 * 60 * 60 * 1000
|
||||||
padding: 80px 30rpx 120rpx 30rpx;
|
for (let t = startTime; t <= endTime; t += dayMs) {
|
||||||
z-index: 1;
|
list.push(formatDate(t))
|
||||||
}
|
}
|
||||||
|
return list
|
||||||
// 工单列表
|
},
|
||||||
.item-list {
|
onSiteChange(e) {
|
||||||
color: #4b4951;
|
const values = e.detail.value || []
|
||||||
border-radius: 14rpx;
|
this.selectedSiteIds = values
|
||||||
box-shadow: 0 0 20rpx rgba(0, 0, 0, .1), 0 0 0 rgba(0, 0, 0, .5);
|
this.updateSiteInfo()
|
||||||
font-size: 26rpx;
|
},
|
||||||
line-height: 40rpx;
|
updateSiteInfo() {
|
||||||
margin-bottom: 30rpx;
|
if (!this.selectedSiteIds || this.selectedSiteIds.length === 0) {
|
||||||
border: 1px solid #eee;
|
this.runningInfo = {}
|
||||||
background: #ffffff;
|
this.revenueChartData = {}
|
||||||
|
return
|
||||||
// 标题
|
}
|
||||||
.item-title {
|
this.getRunningInfo()
|
||||||
border-radius: 14rpx 14rpx 0 0;
|
this.getRevenueChartData()
|
||||||
border-bottom: 1px solid #eee;
|
},
|
||||||
padding: 20rpx 30rpx;
|
getSiteList() {
|
||||||
font-weight: 700;
|
getAllSites().then(response => {
|
||||||
position: relative;
|
const data = response?.data || []
|
||||||
|
this.siteOptions = data.map(item => {
|
||||||
.item-status {
|
return {
|
||||||
position: absolute;
|
text: item.siteName,
|
||||||
right: 0;
|
value: item.siteId,
|
||||||
top: 0;
|
disable: !this.belongSite || this.belongSite.length === 0 || this.belongSite.includes('all') ? false : !this
|
||||||
padding: 2rpx 20rpx;
|
.belongSite.includes(item.siteId)
|
||||||
color: #ffffff;
|
}
|
||||||
font-size: 22rpx;
|
})
|
||||||
}
|
const defaultSite = this.siteOptions.find(item => !item.disable)?.value || ''
|
||||||
|
this.selectedSiteIds = defaultSite ? [defaultSite] : []
|
||||||
&.done {
|
this.selectedSiteIds.length > 0 && this.updateSiteInfo()
|
||||||
.item-status {
|
})
|
||||||
background-color: #30be95;
|
},
|
||||||
}
|
getRunningInfo() {
|
||||||
}
|
const sumFields = ['totalRevenue', ...this.sjglData.map(item => item.attr)]
|
||||||
|
const requests = this.selectedSiteIds.map(siteId => getDzjkHomeView({
|
||||||
&.doing {
|
siteId
|
||||||
.item-status {
|
}).then(response => response?.data || {}))
|
||||||
background-color: #3c68e7;
|
Promise.all(requests).then(list => {
|
||||||
}
|
const result = {}
|
||||||
}
|
sumFields.forEach(key => {
|
||||||
|
result[key] = list.reduce((sum, item) => {
|
||||||
&.undone {
|
const value = Number(item?.[key] || 0)
|
||||||
.item-status {
|
return sum + (Number.isFinite(value) ? value : 0)
|
||||||
background-color: #ed7876;
|
}, 0)
|
||||||
}
|
})
|
||||||
}
|
this.runningInfo = result
|
||||||
}
|
})
|
||||||
|
},
|
||||||
// 内容
|
getRevenueChartData() {
|
||||||
.item-content {
|
const [startTime, endTime] = this.getLastDaysRange(7)
|
||||||
padding: 20rpx 30rpx;
|
const dateList = this.buildDateList(startTime, endTime)
|
||||||
font-size: 24rpx;
|
const requests = this.selectedSiteIds.map(siteId => getAmmeterRevenueData({
|
||||||
|
siteId,
|
||||||
.item-info {
|
startTime,
|
||||||
margin-bottom: 20rpx;
|
endTime,
|
||||||
|
pageSize: 200,
|
||||||
.info-value {
|
pageNum: 1
|
||||||
padding-left: 10rpx;
|
}).then(response => ({
|
||||||
}
|
siteId,
|
||||||
}
|
rows: response?.rows || []
|
||||||
}
|
})))
|
||||||
|
Promise.all(requests).then(list => {
|
||||||
.item-content .item-info:last-child {
|
const categories = dateList.map(day => day.slice(5))
|
||||||
margin-bottom: 0;
|
const series = list.map(item => {
|
||||||
}
|
const sumMap = {}
|
||||||
}
|
dateList.forEach(day => {
|
||||||
|
sumMap[day] = 0
|
||||||
.content .item-list:last-child {
|
})
|
||||||
margin-bottom: 0;
|
item.rows.forEach(row => {
|
||||||
}
|
const day = row.dataTime || row.statisDate || row.date
|
||||||
</style>
|
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
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getSiteList()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onPageScroll(e) {
|
||||||
|
this.pageScrollTop = e.scrollTop
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<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: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
view {
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #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);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
opacity: 0.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.5rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -96,11 +96,11 @@
|
|||||||
title: '提交成功',
|
title: '提交成功',
|
||||||
duration: 2000
|
duration: 2000
|
||||||
});
|
});
|
||||||
uni.switchTab({
|
uni.switchTab({
|
||||||
url: '/pages/index'
|
url: '/pages/ticket/list'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}).finally(() => this.loading = false)
|
}).finally(() => this.loading = false)
|
||||||
|
|
||||||
},
|
},
|
||||||
// 获取上传状态
|
// 获取上传状态
|
||||||
@ -211,4 +211,4 @@
|
|||||||
.submit-button {
|
.submit-button {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
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