2025-03-19 15:27:57 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div class="screen-container-new">
|
2025-10-14 17:24:45 +08:00
|
|
|
|
<div class="screen-title">机械化施工装备管理（共享）平台</div>
|
2025-03-19 15:27:57 +08:00
|
|
|
|
<div class="header">
|
|
|
|
|
|
<img class="header-img" src="@/assets/img/screen/返回.png" alt="" @click="back" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="content">
|
|
|
|
|
|
<div class="title">{{ title }}</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 columnList"
|
|
|
|
|
|
:key="index"
|
|
|
|
|
|
:label="item.label"
|
|
|
|
|
|
:prop="item.prop"
|
|
|
|
|
|
align="center"
|
|
|
|
|
|
show-overflow-tooltip
|
|
|
|
|
|
>
|
|
|
|
|
|
<template v-if="!item.prop == 'maStatus'" #default="{ row }">
|
|
|
|
|
|
{{ row[item.prop] }}
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<template v-else #default="{ row }">
|
|
|
|
|
|
<el-tag v-if="row.maStatus == 0" size="small" type="info">草稿状态</el-tag>
|
|
|
|
|
|
<el-tag v-if="row.maStatus == 1" size="small" type="warning">待上架</el-tag>
|
|
|
|
|
|
<el-tag v-if="row.maStatus == 2" size="small" type="success">上架</el-tag>
|
|
|
|
|
|
<el-tag v-if="row.maStatus == 3" size="small" type="danger">在租</el-tag>
|
|
|
|
|
|
</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 {
|
|
|
|
|
|
getDevNumApi,
|
|
|
|
|
|
getDevUpNumApi,
|
|
|
|
|
|
getDevTypeNumApi,
|
|
|
|
|
|
getDevQcWarningNumApi,
|
|
|
|
|
|
getMaTypeLeasingNumApi,
|
|
|
|
|
|
getDevLeasingNumApi,
|
|
|
|
|
|
} from '@/http/api/screen-f/index.ts'
|
|
|
|
|
|
|
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
|
console.log('🚀 ~ router:', router.currentRoute.value.query)
|
|
|
|
|
|
|
|
|
|
|
|
const currentType = ref(router.currentRoute.value.query.type)
|
|
|
|
|
|
const title = ref(router.currentRoute.value.query.title)
|
|
|
|
|
|
const SEND_API = ref(null)
|
|
|
|
|
|
const columnList = ref([])
|
|
|
|
|
|
// const columns1 = ref([
|
|
|
|
|
|
// { label: '机具类型', prop: 'typeName' },
|
|
|
|
|
|
// { label: '机具名称', prop: 'deviceName' },
|
|
|
|
|
|
// { label: '规格型号', prop: 'modelName' },
|
|
|
|
|
|
// { label: '唯一标识符', prop: 'identifyCode' },
|
|
|
|
|
|
// { label: '装备状态', prop: 'maStatus', slot_c: true },
|
|
|
|
|
|
// { label: '上架时间', prop: 'createTime' },
|
|
|
|
|
|
// { label: '所属公司', prop: 'comName' },
|
|
|
|
|
|
// ])
|
|
|
|
|
|
// const columns2 = ref([
|
|
|
|
|
|
// { label: '机具类型', prop: 'typeName' },
|
|
|
|
|
|
// { label: '机具名称', prop: 'deviceName' },
|
|
|
|
|
|
// { label: '规格型号', prop: 'modelName' },
|
|
|
|
|
|
// { label: '数量', prop: 'deviceCount' },
|
|
|
|
|
|
// ])
|
|
|
|
|
|
// const columns3 = ref([
|
|
|
|
|
|
// { label: '机具类型', prop: 'typeName' },
|
|
|
|
|
|
// { label: '机具名称', prop: 'deviceName' },
|
|
|
|
|
|
// { label: '规格型号', prop: 'modelName' },
|
|
|
|
|
|
// { label: '唯一标识符', prop: 'identifyCode' },
|
|
|
|
|
|
// // { label: '报警类型', prop: 'identifyCode' },
|
|
|
|
|
|
// { label: '告警时间', prop: 'createTime' },
|
|
|
|
|
|
// ])
|
|
|
|
|
|
// const columns4 = ref([
|
|
|
|
|
|
// { label: '机具名称', prop: 'deviceName' },
|
|
|
|
|
|
// { label: '规格型号', prop: 'modelName' },
|
|
|
|
|
|
// { label: '租赁单价', prop: 'dayLeasePrice' },
|
|
|
|
|
|
// { label: '租赁次数', prop: 'rentNum' },
|
|
|
|
|
|
// ])
|
|
|
|
|
|
// const columns5 = ref([
|
|
|
|
|
|
// { label: '机具名称', prop: 'deviceName' },
|
|
|
|
|
|
// { label: '规格型号', prop: 'modelName' },
|
|
|
|
|
|
// { label: '唯一标识符', prop: 'identifyCode' },
|
|
|
|
|
|
// { label: '订单号', prop: 'orderId' },
|
|
|
|
|
|
// { label: '出租方', prop: 'comName' },
|
|
|
|
|
|
// { label: '出租方联系人', prop: 'person' },
|
|
|
|
|
|
// { label: '承租方', prop: 'lessee' },
|
|
|
|
|
|
// { label: '承租方联系人', prop: 'lesseePerson' },
|
|
|
|
|
|
// { label: '订单开始时间', prop: 'startTime' },
|
|
|
|
|
|
// { label: '订单结束时间', prop: 'endTime' },
|
|
|
|
|
|
// { label: '租赁金额', prop: 'cost' },
|
|
|
|
|
|
// ])
|
|
|
|
|
|
|
|
|
|
|
|
const total = ref(0)
|
|
|
|
|
|
const queryParams = ref({
|
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const tableData = ref([])
|
|
|
|
|
|
|
|
|
|
|
|
const indexContinuation = (index) => {
|
|
|
|
|
|
return index + (queryParams.value.pageNum - 1) * queryParams.value.pageSize + 1
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (currentType.value == 1) {
|
|
|
|
|
|
SEND_API.value = getDevNumApi
|
|
|
|
|
|
columnList.value = [
|
|
|
|
|
|
{ label: '机具类型', prop: 'typeName' },
|
|
|
|
|
|
{ label: '机具名称', prop: 'deviceName' },
|
|
|
|
|
|
{ label: '规格型号', prop: 'modelName' },
|
|
|
|
|
|
{ label: '唯一标识符', prop: 'identifyCode' },
|
|
|
|
|
|
{ label: '装备状态', prop: 'maStatus' },
|
|
|
|
|
|
{ label: '上架时间', prop: 'createTime' },
|
|
|
|
|
|
{ label: '所属公司', prop: 'comName' },
|
|
|
|
|
|
]
|
|
|
|
|
|
} else if (currentType.value == 2) {
|
|
|
|
|
|
SEND_API.value = getDevUpNumApi
|
|
|
|
|
|
columnList.value = [
|
|
|
|
|
|
{ label: '机具类型', prop: 'typeName' },
|
|
|
|
|
|
{ label: '机具名称', prop: 'deviceName' },
|
|
|
|
|
|
{ label: '规格型号', prop: 'modelName' },
|
|
|
|
|
|
{ label: '唯一标识符', prop: 'identifyCode' },
|
|
|
|
|
|
{ label: '装备状态', prop: 'maStatus' },
|
|
|
|
|
|
{ label: '上架时间', prop: 'createTime' },
|
|
|
|
|
|
{ label: '所属公司', prop: 'comName' },
|
|
|
|
|
|
]
|
|
|
|
|
|
} else if (currentType.value == 3) {
|
|
|
|
|
|
SEND_API.value = getDevTypeNumApi
|
|
|
|
|
|
columnList.value = [
|
|
|
|
|
|
{ label: '机具类型', prop: 'typeName' },
|
|
|
|
|
|
{ label: '机具名称', prop: 'deviceName' },
|
|
|
|
|
|
{ label: '规格型号', prop: 'modelName' },
|
|
|
|
|
|
{ label: '数量', prop: 'deviceCount' },
|
|
|
|
|
|
]
|
|
|
|
|
|
} else if (currentType.value == 4) {
|
|
|
|
|
|
SEND_API.value = getDevQcWarningNumApi
|
|
|
|
|
|
columnList.value = [
|
|
|
|
|
|
{ label: '机具类型', prop: 'typeName' },
|
|
|
|
|
|
{ label: '机具名称', prop: 'deviceName' },
|
|
|
|
|
|
{ label: '规格型号', prop: 'modelName' },
|
|
|
|
|
|
{ label: '唯一标识符', prop: 'identifyCode' },
|
|
|
|
|
|
// { label: '报警类型', prop: 'identifyCode' },
|
|
|
|
|
|
{ label: '告警时间', prop: 'createTime' },
|
|
|
|
|
|
]
|
|
|
|
|
|
} else if (currentType.value == 5) {
|
|
|
|
|
|
SEND_API.value = getMaTypeLeasingNumApi
|
|
|
|
|
|
columnList.value = [
|
|
|
|
|
|
{ label: '机具名称', prop: 'deviceName' },
|
|
|
|
|
|
{ label: '规格型号', prop: 'modelName' },
|
|
|
|
|
|
{ label: '租赁单价', prop: 'dayLeasePrice' },
|
|
|
|
|
|
{ label: '租赁次数', prop: 'rentNum' },
|
|
|
|
|
|
]
|
|
|
|
|
|
} else {
|
|
|
|
|
|
SEND_API.value = getDevLeasingNumApi
|
|
|
|
|
|
columnList.value = [
|
|
|
|
|
|
{ label: '机具名称', prop: 'deviceName' },
|
|
|
|
|
|
{ label: '规格型号', prop: 'modelName' },
|
|
|
|
|
|
{ label: '唯一标识符', prop: 'identifyCode' },
|
|
|
|
|
|
{ label: '订单号', prop: 'orderId' },
|
|
|
|
|
|
{ label: '出租方', prop: 'comName' },
|
|
|
|
|
|
{ label: '出租方联系人', prop: 'person' },
|
|
|
|
|
|
{ label: '承租方', prop: 'lessee' },
|
|
|
|
|
|
{ label: '承租方联系人', prop: 'lesseePerson' },
|
|
|
|
|
|
{ label: '订单开始时间', prop: 'startTime' },
|
|
|
|
|
|
{ label: '订单结束时间', prop: 'endTime' },
|
|
|
|
|
|
{ label: '租赁金额', prop: 'cost' },
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// switch (currentType.value) {
|
|
|
|
|
|
// case '1':
|
|
|
|
|
|
// SEND_API.value = getDevNumApi
|
|
|
|
|
|
// column.value = [...columns1.value]
|
|
|
|
|
|
// break
|
|
|
|
|
|
// case '2':
|
|
|
|
|
|
// SEND_API.value = getDevUpNumApi
|
|
|
|
|
|
// column.value = [...columns1.value]
|
|
|
|
|
|
// break
|
|
|
|
|
|
// case '3':
|
|
|
|
|
|
// SEND_API.value = getDevTypeNumApi
|
|
|
|
|
|
// column.value = [...columns2.value]
|
|
|
|
|
|
// break
|
|
|
|
|
|
// case '4':
|
|
|
|
|
|
// SEND_API.value = getDevQcWarningNumApi
|
|
|
|
|
|
// column.value = [...columns3.value]
|
|
|
|
|
|
// break
|
|
|
|
|
|
// case '5':
|
|
|
|
|
|
// SEND_API.value = getMaTypeLeasingNumApi
|
|
|
|
|
|
// column.value = [...columns4.value]
|
|
|
|
|
|
// break
|
|
|
|
|
|
// case '6':
|
|
|
|
|
|
// SEND_API.value = getDevLeasingNumApi
|
|
|
|
|
|
// column.value = [...columns5.value]
|
|
|
|
|
|
// break
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
const getList = async () => {
|
|
|
|
|
|
const res = await SEND_API.value(queryParams.value)
|
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
|
tableData.value = res.data.rows
|
|
|
|
|
|
total.value = res.data.total
|
|
|
|
|
|
}
|
|
|
|
|
|
console.log(res, '9996')
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const back = () => {
|
|
|
|
|
|
console.log('back')
|
|
|
|
|
|
router.push({
|
|
|
|
|
|
path: '/big-screen',
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// console.log(column.value, ' column.value')
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
console.log(currentType.value, 'currentType.value')
|
|
|
|
|
|
getList()
|
|
|
|
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
.screen-container-new {
|
|
|
|
|
|
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;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
:deep .el-table {
|
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
|
}
|
|
|
|
|
|
:deep .el-table__header-wrapper {
|
|
|
|
|
|
background: url('@/assets/img/screen/table-1.png') no-repeat !important;
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
background-position: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
: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>
|
