318 lines
10 KiB
Vue
318 lines
10 KiB
Vue
<template>
|
||
<div class="screen-container-new">
|
||
<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>
|
||
<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>
|