299 lines
9.9 KiB
Vue
299 lines
9.9 KiB
Vue
<template>
|
|
<div class="screen-container">
|
|
<div class="screen-title">智联装备云控平台</div>
|
|
<div class="header">
|
|
<img class="header-img" src="@/assets/img/screen/返回.png" alt="" @click="back" />
|
|
</div>
|
|
<div class="content">
|
|
<div class="title">{{ title }}</div>
|
|
<div style="margin: 30px">
|
|
<span v-if="currentType == 8" style="margin-right: 20px"
|
|
>装备上架总时长: {{ upTotal }} 天</span
|
|
>
|
|
<span v-if="currentType == 8" style="margin-right: 20px"
|
|
>装备租赁总时长: {{ leaseTotal }} 天</span
|
|
>
|
|
<span v-if="currentType == 8">利用率: {{ rateToTal }}%</span>
|
|
<span v-if="currentType == 12" style="margin-right: 20px"
|
|
>需求发布总数: {{ publishCount }} 条</span
|
|
>
|
|
<span v-if="currentType == 12" style="margin-right: 20px"
|
|
>结单需求总数: {{ orderCount }} 条</span
|
|
>
|
|
<span v-if="currentType == 12">应答率: {{ answerRate }}%</span>
|
|
</div>
|
|
<el-table :data="tableData" style="width: 100%">
|
|
<el-table-column
|
|
label="序号"
|
|
type="index"
|
|
width="90"
|
|
align="center"
|
|
:index="indexContinuation"
|
|
/>
|
|
<el-table-column
|
|
v-for="(item, index) in columns"
|
|
:key="index"
|
|
:label="item.label"
|
|
:prop="item.prop"
|
|
align="center"
|
|
show-overflow-tooltip
|
|
>
|
|
<template #default="{ row }">
|
|
<span v-if="item.prop === 'upTotal'">{{ row.upTotal || 0 }} 天</span>
|
|
<span v-else-if="item.prop === 'leaseTotal'"
|
|
>{{ row.leaseTotal || 0 }} 天</span
|
|
>
|
|
<span v-else-if="item.prop === 'rate'">{{ row.rate || 0 }}%</span>
|
|
<span v-else-if="item.prop === 'estimateDays'"
|
|
>{{ row.estimateDays || 0 }} 天</span
|
|
>
|
|
<span v-else-if="item.prop === 'answerRate'"
|
|
>{{ row.answerRate || 0 }}%</span
|
|
>
|
|
<span v-else>{{ row[item.prop] }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<PagingComponent
|
|
@getListChange="getList"
|
|
v-model:pageSize="queryParams.pageSize"
|
|
v-model:currentPage="queryParams.pageNum"
|
|
:total="total"
|
|
style="margin-top: 20px"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import PagingComponent from 'components/PagingComponent/index.vue'
|
|
import {
|
|
getReturnDevApi,
|
|
getDevRateApi,
|
|
getLeaseOnlyInfoApi,
|
|
getLeaseTypeListApi,
|
|
getLeaseAnswerRateApi,
|
|
getTotalDevRateApi,
|
|
getTotalLeaseAnswerRateApi,
|
|
} from '@/http/api/screen/index.ts'
|
|
|
|
const router = useRouter()
|
|
const currentType = ref(router.currentRoute.value.query.type)
|
|
const title = ref(router.currentRoute.value.query.title)
|
|
// 总装备上架时长
|
|
const upTotal = ref(0)
|
|
// 总装备租赁时长
|
|
const leaseTotal = ref(0)
|
|
// 利用率
|
|
const rateToTal = ref(0)
|
|
// 总的需求发布数
|
|
const publishCount = ref(0)
|
|
// 接单需求数
|
|
const orderCount = ref(0)
|
|
// 应答率
|
|
const answerRate = ref(0)
|
|
const columns = ref([])
|
|
if (currentType.value == 7) {
|
|
columns.value = [
|
|
{ label: '机具名称', prop: 'deviceName' },
|
|
{ label: '规格型号', prop: 'modelCode' },
|
|
{ label: '唯一标识符', prop: 'identifyCode' },
|
|
{ label: '订单号', prop: 'orderCode' },
|
|
{ label: '退租人', prop: 'returnUser' },
|
|
{ label: '退租时间', prop: 'returnTime' },
|
|
]
|
|
} else if (currentType.value == 8) {
|
|
columns.value = [
|
|
{ label: '装备类型', prop: 'typeName' },
|
|
{ label: '装备名称', prop: 'deviceName' },
|
|
{ label: '装备规格', prop: 'modelCode' },
|
|
{ label: '装备上架时长', prop: 'upTotal' },
|
|
{ label: '装备租赁时长', prop: 'leaseTotal' },
|
|
{ label: '利用率', prop: 'rate' },
|
|
]
|
|
} else if (currentType.value == 9) {
|
|
columns.value = [
|
|
{ label: '标题', prop: 'deviceName' },
|
|
{ label: '租赁公司', prop: 'publishCompany' },
|
|
{ label: '联系人', prop: 'person' },
|
|
{ label: '联系电话', prop: 'phoneNumber' },
|
|
{ label: '预估数量', prop: 'estimateCount' },
|
|
{ label: '发布时间', prop: 'startTime' },
|
|
{ label: '截止时间', prop: 'endTime' },
|
|
]
|
|
} else if (currentType.value == 10) {
|
|
columns.value = [
|
|
{ label: '装备类型', prop: 'typeName' },
|
|
{ label: '装备名称', prop: 'deviceName' },
|
|
{ label: '数量', prop: 'estimateCount' },
|
|
{ label: '预估时长', prop: 'estimateDays' },
|
|
]
|
|
} else if (currentType.value == 11) {
|
|
columns.value = [
|
|
{ label: '标题', prop: 'deviceName' },
|
|
{ label: '租赁公司', prop: 'publishCompany' },
|
|
{ label: '联系人', prop: 'person' },
|
|
{ label: '联系电话', prop: 'phoneNumber' },
|
|
{ label: '预估数量', prop: 'estimateCount' },
|
|
{ label: '发布时间', prop: 'startTime' },
|
|
{ label: '截止时间', prop: 'endTime' },
|
|
]
|
|
} else if (currentType.value == 12) {
|
|
columns.value = [
|
|
{ label: '装备类型', prop: 'typeName' },
|
|
{ label: '装备名称', prop: 'deviceName' },
|
|
{ label: '发布需求数', prop: 'publishCount' },
|
|
{ label: '接单数', prop: 'orderCount' },
|
|
{ label: '应答率', prop: 'answerRate' },
|
|
]
|
|
}
|
|
|
|
const total = ref(0)
|
|
const queryParams = ref({
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
keyWord: '',
|
|
})
|
|
|
|
const tableData = ref([])
|
|
|
|
const indexContinuation = (index) => {
|
|
return index + (queryParams.value.pageNum - 1) * queryParams.value.pageSize + 1
|
|
}
|
|
|
|
const getList = async () => {
|
|
try {
|
|
const params = {
|
|
pageNum: queryParams.value.pageNum,
|
|
pageSize: queryParams.value.pageSize,
|
|
keyWord: queryParams.value.keyWord,
|
|
}
|
|
let res = null
|
|
if (currentType.value == 7) {
|
|
// 退租装备数
|
|
res = await getReturnDevApi(params)
|
|
} else if (currentType.value == 8) {
|
|
res = await getDevRateApi(params)
|
|
const res2 = await getTotalDevRateApi(params)
|
|
upTotal.value = res2.data.upTotal
|
|
leaseTotal.value = res2.data.leaseTotal
|
|
rateToTal.value = res2.data.rate
|
|
} else if (currentType.value == 9 || currentType.value == 11) {
|
|
if (currentType.value == 11) {
|
|
params.isHot = true
|
|
}
|
|
// 需求总数 / 最需装备
|
|
res = await getLeaseOnlyInfoApi(params)
|
|
} else if (currentType.value == 10) {
|
|
// 需求装备种类
|
|
res = await getLeaseTypeListApi(params)
|
|
} else if (currentType.value == 12) {
|
|
// 需求装备种类
|
|
res = await getLeaseAnswerRateApi(params)
|
|
const res2 = await getTotalLeaseAnswerRateApi(params)
|
|
publishCount.value = res2.data.publishCount
|
|
orderCount.value = res2.data.orderCount
|
|
answerRate.value = res2.data.answerRate
|
|
}
|
|
// console.log('🚀 ~ getList ~ res:', res)
|
|
if (res.code == 200) {
|
|
tableData.value = res.data.rows
|
|
total.value = res.data.total
|
|
}
|
|
} catch (error) {
|
|
console.log('🚀 ~ getList ~ error:', error)
|
|
}
|
|
}
|
|
|
|
const back = () => {
|
|
console.log('back')
|
|
router.push({
|
|
path: '/big-screen',
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
getList()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.screen-container {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: url('@/assets/img/screen/bg-2.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
font-size: 16px;
|
|
position: relative;
|
|
color: #eee;
|
|
|
|
.screen-title {
|
|
position: absolute;
|
|
top: 2%;
|
|
left: 50%;
|
|
color: #fff;
|
|
font-size: 30px;
|
|
// font-weight: bold;
|
|
transform: translateX(-50%);
|
|
letter-spacing: 3px;
|
|
// font-style: italic;
|
|
font-family: DS-TITle;
|
|
}
|
|
|
|
.header {
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
.header-img {
|
|
margin-top: 15px;
|
|
margin-right: 30px;
|
|
width: 40px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
margin: 4% 10% 0;
|
|
|
|
.title {
|
|
width: 405px;
|
|
height: 36px;
|
|
background: url('@/assets/img/screen/title_bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
line-height: 30px;
|
|
padding-left: 35px;
|
|
}
|
|
::v-deep(.el-table) {
|
|
background-color: transparent;
|
|
}
|
|
::v-deep(.el-table__header-wrapper) {
|
|
background: url('@/assets/img/screen/table-1.png') no-repeat !important;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
::v-deep(.el-table__header th) {
|
|
color: white;
|
|
background-color: transparent; /* 避免被其他背景色覆盖 */
|
|
}
|
|
|
|
::v-deep .el-table tr {
|
|
color: #eee;
|
|
background-color: transparent;
|
|
background: url('@/assets/img/screen/table-2.png') no-repeat;
|
|
}
|
|
|
|
:deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
|
background-color: #39816b;
|
|
color: #333;
|
|
}
|
|
::v-deep .el-input__wrapper {
|
|
background-color: #61b2a6;
|
|
}
|
|
}
|
|
}
|
|
</style>
|