大屏二级页面
This commit is contained in:
parent
bf3d4b7c1f
commit
f39d114922
|
|
@ -38,4 +38,37 @@ export const getLeaseCountByPublishCompanyApi = (data: any = {}) => {
|
|||
return get('/material-mall/largeScreen/getLeaseCountByPublishCompany', data)
|
||||
}
|
||||
|
||||
// 退租装备数
|
||||
export const getReturnDevApi = (data: any = {}) => {
|
||||
return get('/material-mall/largeScreen/getReturnDev', data)
|
||||
}
|
||||
|
||||
// 装备利用率
|
||||
export const getDevRateApi = (data: any = {}) => {
|
||||
return get('/material-mall/largeScreen/getDevRate', data)
|
||||
}
|
||||
|
||||
// 装备总利用率
|
||||
export const getTotalDevRateApi = (data: any = {}) => {
|
||||
return get('/material-mall/largeScreen/getTotalDevRate', data)
|
||||
}
|
||||
|
||||
// 需求总数 + 最需装备
|
||||
export const getLeaseOnlyInfoApi = (data: any = {}) => {
|
||||
return get('/material-mall/largeScreen/getLeaseOnlyInfo', data)
|
||||
}
|
||||
|
||||
// 需求装备种类
|
||||
export const getLeaseTypeListApi = (data: any = {}) => {
|
||||
return get('/material-mall/largeScreen/getLeaseTypeList', data)
|
||||
}
|
||||
|
||||
// 需求应答率
|
||||
export const getLeaseAnswerRateApi = (data: any = {}) => {
|
||||
return get('/material-mall/largeScreen/getLeaseAnswerRate', data)
|
||||
}
|
||||
|
||||
// 总应答率
|
||||
export const getTotalLeaseAnswerRateApi = (data: any = {}) => {
|
||||
return get('/material-mall/largeScreen/getTotalLeaseAnswerRate', data)
|
||||
}
|
||||
|
|
@ -4,7 +4,9 @@
|
|||
<!-- 贵州 -->
|
||||
<!-- <div class="screen-title">智联装备云控平台</div> -->
|
||||
|
||||
<div class="header"></div>
|
||||
<div class="header">
|
||||
<img class="header-img" src="@/assets/img/screen/返回.png" alt="" @click="back">
|
||||
</div>
|
||||
<dv-full-screen-container class="dashboard">
|
||||
<div class="box">
|
||||
<LeftOneModel />
|
||||
|
|
@ -39,6 +41,14 @@ import RightOneModel from './model-components/right-one-model.vue'
|
|||
import RightTwoModel from './model-components/right-two-model.vue'
|
||||
import RightThreeModel from './model-components/right-three-model.vue'
|
||||
import CenterModel from './model-components/center-model.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const back = () => {
|
||||
console.log('back')
|
||||
router.push({
|
||||
path: '/home',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -69,6 +79,16 @@ import CenterModel from './model-components/center-model.vue'
|
|||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@ import {
|
|||
getDemandCountApi,
|
||||
getOrderTrackingApi,
|
||||
} from 'http/api/screen/index'
|
||||
import { column } from 'element-plus/es/components/table-v2/src/common'
|
||||
|
||||
const router = useRouter()
|
||||
const devNum = ref<any>(0)
|
||||
const devUpNum = ref<any>(0)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
<template>
|
||||
<div class="screen-container">
|
||||
<div class="screen-title">安徽机械化装备共享平台</div>
|
||||
<div class="header"></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>
|
||||
|
|
@ -38,6 +40,7 @@
|
|||
v-model:pageSize="queryParams.pageSize"
|
||||
v-model:currentPage="queryParams.pageNum"
|
||||
:total="total"
|
||||
style="margin-top: 20px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -154,6 +157,13 @@ switch (currentType.value) {
|
|||
break
|
||||
}
|
||||
|
||||
const back = () => {
|
||||
console.log('back')
|
||||
router.push({
|
||||
path: '/big-screen',
|
||||
})
|
||||
}
|
||||
|
||||
// console.log(column.value, ' column.value')
|
||||
|
||||
getList()
|
||||
|
|
@ -188,6 +198,16 @@ onMounted(async () => {
|
|||
|
||||
.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 {
|
||||
|
|
@ -225,11 +245,10 @@ onMounted(async () => {
|
|||
}
|
||||
|
||||
:deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: #f4eedc;
|
||||
background-color: #39816b;
|
||||
color: #333;
|
||||
}
|
||||
/* ::v-deep .el-table--enable-row-hover .el-table__body tr.hover-row:hover {
|
||||
background: url('@/assets/img/screen/table-3.png') no-repeat;
|
||||
background-size: cover;
|
||||
} */
|
||||
::v-deep .el-input__wrapper {
|
||||
background-color: #61b2a6;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,27 @@
|
|||
<template>
|
||||
<div class="screen-container">
|
||||
<div class="screen-title">安徽机械化装备共享平台</div>
|
||||
<div class="header"></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%" :row-class-name="setRowClass">
|
||||
<el-table-column
|
||||
label="序号"
|
||||
|
|
@ -20,7 +37,18 @@
|
|||
:prop="item.prop"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<span v-if="item.prop === 'upTotal'">{{ row.upTotal }} 天</span>
|
||||
<span v-else-if="item.prop === 'leaseTotal'">{{ row.leaseTotal }} 天</span>
|
||||
<span v-else-if="item.prop === 'rate'">{{ row.rate }}%</span>
|
||||
<span v-else-if="item.prop === 'estimateDays'"
|
||||
>{{ row.estimateDays }} 天</span
|
||||
>
|
||||
<span v-else-if="item.prop === 'answerRate'">{{ row.answerRate }}%</span>
|
||||
<span v-else>{{ row[item.prop] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<PagingComponent
|
||||
|
|
@ -28,6 +56,7 @@
|
|||
v-model:pageSize="queryParams.pageSize"
|
||||
v-model:currentPage="queryParams.pageNum"
|
||||
:total="total"
|
||||
style="margin-top: 20px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -36,53 +65,151 @@
|
|||
<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()
|
||||
console.log('🚀 ~ router:', router.currentRoute.value.query)
|
||||
|
||||
const currentType = ref(router.currentRoute.value.query.type)
|
||||
const title = ref(router.currentRoute.value.query.title)
|
||||
const columns = ref([
|
||||
{ label: '序号', prop: 'index' },
|
||||
{ label: '装备名称', prop: 'name' },
|
||||
{ label: '装备型号', prop: 'typeName' },
|
||||
{ label: '发布单位', prop: 'publishCompany' },
|
||||
{ label: '发布人', prop: 'publishUser' },
|
||||
{ label: '租赁价格', prop: 'price' },
|
||||
{ label: '租赁单位', prop: 'timeUnit' },
|
||||
])
|
||||
// 总装备上架时长
|
||||
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: 'modelCode' },
|
||||
{ label: '装备名称', prop: 'typeName' },
|
||||
{ label: '装备规格', prop: 'deviceName' },
|
||||
{ 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([
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄',
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
},
|
||||
])
|
||||
const tableData = ref([])
|
||||
|
||||
const indexContinuation = (index) => {
|
||||
return index + (queryParams.value.pageNum - 1) * queryParams.value.pageSize + 1
|
||||
}
|
||||
|
||||
const getList = () => {
|
||||
console.log('getList')
|
||||
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) {
|
||||
// 需求总数 / 最需装备
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {})
|
||||
const back = () => {
|
||||
console.log('back')
|
||||
router.push({
|
||||
path: '/big-screen',
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -110,6 +237,16 @@ onMounted(() => {})
|
|||
|
||||
.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 {
|
||||
|
|
@ -122,7 +259,6 @@ onMounted(() => {})
|
|||
background-size: 100% 100%;
|
||||
line-height: 30px;
|
||||
padding-left: 35px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -147,11 +283,10 @@ onMounted(() => {})
|
|||
}
|
||||
|
||||
:deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: #f4eedc;
|
||||
background-color: #39816B;
|
||||
color: #333;
|
||||
}
|
||||
/* ::v-deep .el-table--enable-row-hover .el-table__body tr.hover-row:hover {
|
||||
background: url('@/assets/img/screen/table-3.png') no-repeat;
|
||||
background-size: cover;
|
||||
} */
|
||||
::v-deep .el-input__wrapper {
|
||||
background-color: #61B2A6;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue