967 lines
26 KiB
Vue
967 lines
26 KiB
Vue
<template>
|
|
<ContentWrap>
|
|
<div v-loading="loading">
|
|
<div class="new-top-box">
|
|
<div class="new-top-box-left">
|
|
<div class="new-top-box-left-title"> 车辆看板 </div>
|
|
<div
|
|
class="new-top-box-left-statistics"
|
|
@click="changeRobotStatisticsType(undefined)"
|
|
:style="{
|
|
background: queryParams.robotStatisticsType == undefined ? '#ebf1ff' : 'none'
|
|
}"
|
|
>
|
|
总数 {{ carStatistics.total || 0 }}
|
|
</div>
|
|
<div class="grey-line"> </div>
|
|
<div style="display: flex; align-items: center" v-if="carStatistics">
|
|
<div
|
|
class="new-top-box-left-item"
|
|
@click="changeRobotStatisticsType('inTask')"
|
|
style="color: #00329f"
|
|
:style="{ background: queryParams.robotStatisticsType == 'inTask' ? '#ebf1ff' : '' }"
|
|
>
|
|
<div class="new-top-box-left-item-name">工作</div>
|
|
<div class="new-top-box-left-item-value">{{ carStatistics.inTask || 0 }}</div>
|
|
</div>
|
|
<div class="grey-line"> </div>
|
|
<div
|
|
class="new-top-box-left-item"
|
|
@click="changeRobotStatisticsType('charge')"
|
|
style="color: #e07300"
|
|
:style="{ background: queryParams.robotStatisticsType == 'charge' ? '#ebf1ff' : '' }"
|
|
>
|
|
<div class="new-top-box-left-item-name">充电</div>
|
|
<div class="new-top-box-left-item-value">{{ carStatistics.charge || 0 }}</div>
|
|
</div>
|
|
<div class="grey-line"> </div>
|
|
<div
|
|
class="new-top-box-left-item"
|
|
@click="changeRobotStatisticsType('fault')"
|
|
style="color: #c60606"
|
|
:style="{ background: queryParams.robotStatisticsType == 'fault' ? '#ebf1ff' : '' }"
|
|
>
|
|
<div class="new-top-box-left-item-name">异常</div>
|
|
<div class="new-top-box-left-item-value">{{ carStatistics.fault || 0 }}</div>
|
|
</div>
|
|
<div class="grey-line"> </div>
|
|
<div
|
|
class="new-top-box-left-item"
|
|
@click="changeRobotStatisticsType('doLock')"
|
|
style="color: #f1cd0b"
|
|
:style="{ background: queryParams.robotStatisticsType == 'doLock' ? '#ebf1ff' : '' }"
|
|
>
|
|
<div class="new-top-box-left-item-name">锁定</div>
|
|
<div class="new-top-box-left-item-value">{{ carStatistics.doLock || 0 }}</div>
|
|
</div>
|
|
<div class="grey-line"> </div>
|
|
<div
|
|
class="new-top-box-left-item"
|
|
@click="changeRobotStatisticsType('standby')"
|
|
style="color: #4dc606"
|
|
:style="{ background: queryParams.robotStatisticsType == 'standby' ? '#ebf1ff' : '' }"
|
|
>
|
|
<div class="new-top-box-left-item-name">待命</div>
|
|
<div class="new-top-box-left-item-value">{{ carStatistics.standby || 0 }}</div>
|
|
</div>
|
|
<div class="grey-line"> </div>
|
|
<div
|
|
class="new-top-box-left-item"
|
|
@click="changeRobotStatisticsType('offline')"
|
|
style="color: #ccc"
|
|
:style="{ background: queryParams.robotStatisticsType == 'offline' ? '#ebf1ff' : '' }"
|
|
>
|
|
<div class="new-top-box-left-item-name">离线</div>
|
|
<div class="new-top-box-left-item-value">{{ carStatistics.offline || 0 }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="new-top-box-right">
|
|
<div class="new-top-box-right-input-box">
|
|
<el-input
|
|
clearable
|
|
type="text"
|
|
v-model="queryParams.robotNo"
|
|
placeholder="请输入车辆编号"
|
|
class="new-top-box-right-input"
|
|
@clear="getCarList"
|
|
>
|
|
<template #append>
|
|
<el-button icon="Search" @click="getCarList" />
|
|
</template>
|
|
</el-input>
|
|
</div>
|
|
<el-button
|
|
class="new-top-box-right-button"
|
|
@click="openForm('create')"
|
|
v-hasPermi="['carBoard:index:add']"
|
|
>新增车辆</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ContentWrap>
|
|
<div class="new-list-box-all">
|
|
<div class="new-list-box">
|
|
<div
|
|
class="item"
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
:style="{ background: item.robotEssenceStatus == 2 ? '#FFDFDF' : '#ffffff' }"
|
|
>
|
|
<div class="item-top">
|
|
<div
|
|
class="item-inner-left-status"
|
|
:style="{ backgroundColor: item.onlineStatus == 0 ? '#CCCCCC' : '#52C41A' }"
|
|
>
|
|
</div>
|
|
<div class="item-inner-left-name">
|
|
<div
|
|
class="item-inner-left-name-inner"
|
|
:style="{ color: item.onlineStatus == 0 ? '#CCCCCC' : '#0D162A' }"
|
|
>
|
|
{{ item.robotNo }}
|
|
</div>
|
|
</div>
|
|
<div class="item-inner-right-top">
|
|
<div class="swiper-item-box-top-msg">
|
|
<el-popover placement="bottom" trigger="click" width="160">
|
|
<template #reference>
|
|
<div style="flex-shrink: 0; cursor: pointer">
|
|
<el-icon size="20px"><MoreFilled /></el-icon>
|
|
</div>
|
|
</template>
|
|
<div class="popover-menu">
|
|
<div
|
|
class="popover-menu-item"
|
|
@click="openForm('update', item.id)"
|
|
v-hasPermi="['carBoard:index:edit']"
|
|
>编辑</div
|
|
>
|
|
<div
|
|
class="popover-menu-item"
|
|
@click="clockCar(item)"
|
|
v-hasPermi="['carBoard:index:lock']"
|
|
>{{ item.robotTaskModel == 0 ? '解锁' : '锁定' }}</div
|
|
>
|
|
<div
|
|
class="popover-menu-item"
|
|
@click="deleteCar(item.id)"
|
|
v-hasPermi="['carBoard:index:delete']"
|
|
>删除</div
|
|
>
|
|
<div
|
|
class="popover-menu-item"
|
|
@click="clearCar(item.robotNo)"
|
|
v-hasPermi="['carBoard:index:clear']"
|
|
>清除交管</div
|
|
>
|
|
<div
|
|
class="popover-menu-item"
|
|
@click="recoveryTask(item.robotNo)"
|
|
v-hasPermi="['carBoard:index:recovery']"
|
|
>恢复任务</div
|
|
>
|
|
<div
|
|
class="popover-menu-item"
|
|
v-if="item.isStop != 1"
|
|
@click="stopCar(item.robotNo)"
|
|
v-hasPermi="['carBoard:index:stop']"
|
|
>暂停车辆</div
|
|
>
|
|
<div
|
|
class="popover-menu-item"
|
|
v-if="item.isStop === 1"
|
|
@click="recoveryCar(item.robotNo)"
|
|
v-hasPermi="['carBoard:index:recoveryCar']"
|
|
>恢复车辆</div
|
|
>
|
|
</div>
|
|
</el-popover>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item-inner">
|
|
<div class="item-inner-left">
|
|
<div class="item-inner-left-img-box">
|
|
<!-- <el-image style="width: 100%; height: 100%" :src="item.url" :fit="'fill'" /> -->
|
|
<el-tooltip
|
|
class="box-item"
|
|
effect="dark"
|
|
placement="bottom-start"
|
|
v-if="item.robotCodeLevel == 1"
|
|
>
|
|
<template #content>
|
|
<span style="font-size: 14px; color: #fff">{{ item.robotCodeMsg || '' }} </span>
|
|
<span
|
|
style="cursor: pointer; margin-left: 24px; color: #ff4d4f; font-size: 14px"
|
|
@click="goMoreError(item)"
|
|
>
|
|
查看更多
|
|
</span>
|
|
</template>
|
|
<img src="@/assets/imgs/gaojing1.png" alt="" class="item-inner-left-img-box-icon" />
|
|
</el-tooltip>
|
|
<el-tooltip
|
|
class="box-item"
|
|
effect="dark"
|
|
placement="bottom-start"
|
|
v-if="item.robotCodeLevel == 2"
|
|
>
|
|
<template #content>
|
|
<span style="font-size: 14px; color: #fff">{{ item.robotCodeMsg || '' }} </span>
|
|
<span
|
|
style="cursor: pointer; margin-left: 24px; color: #ff4d4f; font-size: 14px"
|
|
@click="goMoreError(item)"
|
|
>
|
|
查看更多
|
|
</span>
|
|
</template>
|
|
<img src="@/assets/imgs/gaojing2.png" alt="" class="item-inner-left-img-box-icon" />
|
|
</el-tooltip>
|
|
<el-tooltip
|
|
class="box-item"
|
|
effect="dark"
|
|
placement="bottom-start"
|
|
v-if="item.robotCodeLevel == 3"
|
|
>
|
|
<template #content>
|
|
<span style="font-size: 14px; color: #fff">{{ item.robotCodeMsg || '' }} </span>
|
|
<span
|
|
style="cursor: pointer; margin-left: 24px; color: #ff4d4f; font-size: 14px"
|
|
@click="goMoreError(item)"
|
|
>
|
|
查看更多
|
|
</span>
|
|
</template>
|
|
<img src="@/assets/imgs/gaojing3.png" alt="" class="item-inner-left-img-box-icon" />
|
|
</el-tooltip>
|
|
<el-tooltip
|
|
class="box-item"
|
|
effect="dark"
|
|
placement="bottom-start"
|
|
v-if="item.robotCodeLevel == 4"
|
|
>
|
|
<template #content>
|
|
<span style="font-size: 14px; color: #fff">{{ item.robotCodeMsg || '' }} </span>
|
|
<span
|
|
style="cursor: pointer; margin-left: 24px; color: #ff4d4f; font-size: 14px"
|
|
@click="goMoreError(item)"
|
|
>
|
|
查看更多
|
|
</span>
|
|
</template>
|
|
<img src="@/assets/imgs/gaojing.png" alt="" class="item-inner-left-img-box-icon" />
|
|
</el-tooltip>
|
|
</div>
|
|
<div class="item-inner-left-bottom">
|
|
<div
|
|
class="item-inner-left-bottom-btn"
|
|
@click="goMap(item)"
|
|
:style="{ color: item.onlineStatus == 0 ? '#CCCCCC' : '#0D162A' }"
|
|
>
|
|
地图定位
|
|
</div>
|
|
<div
|
|
class="item-inner-left-bottom-btn"
|
|
:style="{ color: item.onlineStatus == 0 ? '#CCCCCC' : '#0D162A' }"
|
|
@click="viewDeviceLog"
|
|
>
|
|
日志查看
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item-inner-right-msg" v-if="item.onlineStatus != 0">
|
|
<div class="item-inner-right-msg-item m-b-10">
|
|
<div class="item-inner-right-msg-item-name">电量</div>
|
|
<div
|
|
class="item-inner-right-msg-item-value"
|
|
:style="{ color: item.electricity > 20 ? '#4DC606' : '#C60606' }"
|
|
v-if="item.electricity"
|
|
>{{ item.electricity || '' }} %</div
|
|
>
|
|
</div>
|
|
<div class="item-inner-right-msg-item m-b-10">
|
|
<div class="item-inner-right-msg-item-name">车辆状态</div>
|
|
<div class="item-inner-right-msg-item-value">
|
|
<span v-if="item.robotEssenceStatus == 2" style="color: #c60606">异常</span>
|
|
<span v-if="item.robotEssenceStatus == 0" style="color: #f1cd0b">锁定</span>
|
|
<span v-if="item.robotEssenceStatus == 1" style="color: #4dc606">空闲</span>
|
|
</div>
|
|
</div>
|
|
<div class="item-inner-right-msg-item m-b-10">
|
|
<div class="item-inner-right-msg-item-name">任务状态</div>
|
|
<div class="item-inner-right-msg-item-value">
|
|
<span v-if="item.robotTaskStatus == 1" style="color: #f1cd0b">工作中</span>
|
|
<span v-if="item.robotTaskStatus == 0" style="color: #4dc606">待命中</span>
|
|
<span v-if="item.robotTaskStatus == 2" style="color: #e07300">充电中</span>
|
|
</div>
|
|
</div>
|
|
<div class="item-inner-right-msg-item m-b-10">
|
|
<div class="item-inner-right-msg-item-name">楼层</div>
|
|
<div class="item-inner-right-msg-item-value" v-if="item.floor !== null"
|
|
>{{ item.floor || '' }}
|
|
</div>
|
|
</div>
|
|
<div class="item-inner-right-msg-item m-b-10">
|
|
<div class="item-inner-right-msg-item-name">区域</div>
|
|
<div class="item-inner-right-msg-item-value" v-if="item.area !== null"
|
|
>{{ item.area || '' }}
|
|
</div>
|
|
</div>
|
|
<div class="item-inner-right-msg-item m-b-10">
|
|
<div class="item-inner-right-msg-item-name">信息</div>
|
|
<div class="item-inner-right-msg-item-value" v-if="item.msg !== null"
|
|
>{{ item.msg || '' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item-inner-right-msg" v-if="item.onlineStatus == 0">
|
|
<div class="item-inner-right-msg-item m-b-10" style="align-items: center">
|
|
<div class="item-inner-right-msg-item-name">电量</div>
|
|
<div style="width: 14px; height: 2px; background-color: #ccc; margin-left: 10px">
|
|
</div>
|
|
</div>
|
|
<div class="item-inner-right-msg-item m-b-10" style="align-items: center">
|
|
<div class="item-inner-right-msg-item-name">车辆状态</div>
|
|
<div style="width: 14px; height: 2px; background-color: #ccc; margin-left: 10px">
|
|
</div>
|
|
</div>
|
|
<div class="item-inner-right-msg-item m-b-10" style="align-items: center">
|
|
<div class="item-inner-right-msg-item-name">任务状态</div>
|
|
<div style="width: 14px; height: 2px; background-color: #ccc; margin-left: 10px">
|
|
</div>
|
|
</div>
|
|
<div class="item-inner-right-msg-item m-b-10" style="align-items: center">
|
|
<div class="item-inner-right-msg-item-name">楼层</div>
|
|
<div style="width: 14px; height: 2px; background-color: #ccc; margin-left: 10px">
|
|
</div>
|
|
</div>
|
|
<div class="item-inner-right-msg-item m-b-10" style="align-items: center">
|
|
<div class="item-inner-right-msg-item-name">区域</div>
|
|
<div style="width: 14px; height: 2px; background-color: #ccc; margin-left: 10px">
|
|
</div>
|
|
</div>
|
|
<div class="item-inner-right-msg-item m-b-10" style="align-items: center">
|
|
<div class="item-inner-right-msg-item-name">信息</div>
|
|
<div style="width: 14px; height: 2px; background-color: #ccc; margin-left: 10px">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<createEditDialog ref="createEditDialogRef" @success="getCarList" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
|
|
import * as CarApi from '@/api/car/index'
|
|
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
|
|
import createEditDialog from './createEditDialog.vue'
|
|
|
|
defineOptions({ name: 'BoardCarBoard' })
|
|
|
|
const message = useMessage() // 消息弹窗
|
|
const route = useRoute() // 路由
|
|
const router = useRouter() // 路由对象
|
|
const createEditDialogRef = ref(null)
|
|
const list = ref([])
|
|
const queryParams = reactive({
|
|
robotNo: undefined,
|
|
robotStatisticsType: undefined //车辆状态类型(待命:standby, 任务中:inTask, 锁定:doLock, 离线:offline, 充电中:charge, 故障:fault)
|
|
})
|
|
|
|
const timerRef = ref(null)
|
|
const loading = ref(false)
|
|
|
|
// 使用Promise.all并发请求数据
|
|
const fetchData = async () => {
|
|
if (loading.value) return
|
|
|
|
try {
|
|
loading.value = true
|
|
const [listRes, statsRes] = await Promise.all([
|
|
CarApi.getRobotInformationList(queryParams),
|
|
CarApi.robotInformationStatistics({})
|
|
])
|
|
|
|
list.value = listRes.list
|
|
carStatistics.value = statsRes || {
|
|
standby: 0,
|
|
inTask: 0,
|
|
doLock: 0,
|
|
offline: 0,
|
|
fault: 0,
|
|
charge: 0,
|
|
total: 0
|
|
}
|
|
} catch (error) {
|
|
message.error('获取数据失败：' + error.message)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// 启动定时刷新
|
|
const startPolling = () => {
|
|
stopPolling()
|
|
fetchData()
|
|
timerRef.value = setInterval(fetchData, 10000)
|
|
}
|
|
|
|
// 停止定时刷新
|
|
const stopPolling = () => {
|
|
if (timerRef.value) {
|
|
clearInterval(timerRef.value)
|
|
timerRef.value = null
|
|
}
|
|
}
|
|
|
|
// 查询车辆列表
|
|
const getCarList = () => {
|
|
startPolling()
|
|
}
|
|
|
|
const carStatistics = ref({
|
|
standby: 0,
|
|
inTask: 0,
|
|
doLock: 0,
|
|
offline: 0,
|
|
fault: 0,
|
|
charge: 0,
|
|
total: 0
|
|
})
|
|
|
|
const goMoreError = (item) => {
|
|
router.push({
|
|
path: '/carError',
|
|
query: {
|
|
robotNo: item.robotNo
|
|
}
|
|
})
|
|
}
|
|
|
|
//清除交管
|
|
const clearCar = (robotNo) => {
|
|
ElMessageBox.confirm('您确定要清除交管吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
CarApi.cleanTrafficManagement({ robotNo }).then((res) => {
|
|
getCarList()
|
|
fetchData()
|
|
message.success('清除成功')
|
|
})
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
|
|
// 恢复任务
|
|
const recoveryTask = (robotNo) => {
|
|
ElMessageBox.confirm('您确定要恢复任务吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
CarApi.doTaskContinue({ robotNo }).then((res) => {
|
|
getCarList()
|
|
fetchData()
|
|
message.success('恢复成功')
|
|
})
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
// 暂停车辆
|
|
const stopCar = (robotNo) => {
|
|
ElMessageBox.confirm('您确定要暂停车辆吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
CarApi.stopCar({ robotNo }).then((res) => {
|
|
if (res) {
|
|
getCarList()
|
|
fetchData()
|
|
message.success('暂停成功')
|
|
}
|
|
})
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
// 恢复车辆
|
|
const recoveryCar = (robotNo) => {
|
|
ElMessageBox.confirm('您确定要恢复车辆吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
CarApi.recoveryCar({ robotNo }).then((res) => {
|
|
if (res) {
|
|
getCarList()
|
|
fetchData()
|
|
message.success('恢复成功')
|
|
}
|
|
})
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
|
|
const changeRobotStatisticsType = (type) => {
|
|
queryParams.robotStatisticsType = type
|
|
getCarList()
|
|
}
|
|
|
|
//新建编辑车辆
|
|
const openForm = (type, id) => {
|
|
createEditDialogRef.value.open(type, id ? id : null)
|
|
}
|
|
|
|
//删除车辆
|
|
const deleteCar = (id) => {
|
|
ElMessageBox.confirm('您确定要删除此车辆吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
CarApi.deleteRobotInformation(id).then((res) => {
|
|
getCarList()
|
|
message.success('删除成功')
|
|
})
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
|
|
const clockCar = (item) => {
|
|
let valueStr = item.robotTaskModel == 1 ? '锁定' : '解锁'
|
|
let data = JSON.parse(JSON.stringify(item))
|
|
data.robotTaskModel = item.robotTaskModel == 1 ? 0 : 1
|
|
ElMessageBox.confirm(`您确定要${valueStr}此车辆吗?`, '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
CarApi.robotInformationUpdate(data).then((res) => {
|
|
getCarList()
|
|
message.success(`${valueStr}成功`)
|
|
})
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
|
|
//地图定位
|
|
const goMap = (item) => {
|
|
if (!item.floor || !item.area) {
|
|
message.warning('该车辆未配置地图信息')
|
|
return
|
|
}
|
|
router.push({
|
|
name: 'MapPageRealTimeMap',
|
|
query: {
|
|
floor: item.floor,
|
|
area: item.area
|
|
}
|
|
})
|
|
}
|
|
|
|
const viewDeviceLog = () => {
|
|
router.push({
|
|
name: 'MapLogQueriesList',
|
|
query: {
|
|
activeTab: 2 // 指定打开车辆日志标签页
|
|
}
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (route.query.robotNo) {
|
|
queryParams.robotNo = route.query.robotNo
|
|
}
|
|
startPolling()
|
|
})
|
|
|
|
onBeforeUnmount(stopPolling)
|
|
|
|
onBeforeRouteLeave((to, from, next) => {
|
|
stopPolling()
|
|
next()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.swiper-container {
|
|
width: calc(100% - 60px);
|
|
padding: 0 30px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
|
|
.swiperBox {
|
|
width: 100%;
|
|
}
|
|
|
|
.swiper-item-box {
|
|
width: 100%;
|
|
padding-bottom: 30px;
|
|
border: 1px solid #f5f5f5;
|
|
}
|
|
|
|
.swiper-item-img-box {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.swiper-item-img {
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
|
|
.swiper-item-box-top {
|
|
width: calc(100% - 20px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 20px 0;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.swiper-item-box-top-name {
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.swiper-item-box-msg {
|
|
width: calc(100% - 20px);
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.swiper-item-box-msg-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.swiper-item-box-msg-item-left {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.swiper-item-box-msg-item-right {
|
|
font-size: 13px;
|
|
margin-left: 40px;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
.swiper-button-prev-custome {
|
|
position: absolute;
|
|
left: -30px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
cursor: pointer;
|
|
z-index: 999;
|
|
}
|
|
|
|
.swiper-button-next-custome {
|
|
position: absolute;
|
|
right: -30px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
cursor: pointer;
|
|
z-index: 999;
|
|
}
|
|
|
|
.letter-data-box {
|
|
width: calc(100% - 60px);
|
|
padding: 0 30px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
|
|
.letter-data-item {
|
|
width: calc(25% - 20px);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.car-statistics-box {
|
|
width: 100%;
|
|
margin-top: 40px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.car-statistics-item {
|
|
width: calc(15% - 20px);
|
|
padding: 0 10px;
|
|
height: 60px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.top-box {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.new-top-box {
|
|
width: 100%;
|
|
display: flex;
|
|
|
|
/* padding: 25px 0; */
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.new-top-box-left {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.new-top-box-left-title {
|
|
font-family: PingFangSC, 'PingFang SC';
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
color: #0d162a;
|
|
}
|
|
|
|
.new-top-box-left-statistics {
|
|
padding: 5px 7px;
|
|
margin-left: 4px;
|
|
font-family: PingFangSC, 'PingFang SC';
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #0d162a;
|
|
flex-shrink: 0;
|
|
background: #ebf1ff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.grey-line {
|
|
width: 1px;
|
|
height: 13px;
|
|
background: #ccc;
|
|
}
|
|
|
|
.new-top-box-left-item {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
font-family: PingFangSC, 'PingFang SC';
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.new-top-box-left-item-name {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.new-top-box-left-item-value {
|
|
flex-shrink: 0;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.new-top-box-right {
|
|
display: flex;
|
|
}
|
|
|
|
.new-top-box-right-input-box {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.new-top-box-right-input {
|
|
width: 225px;
|
|
font-size: 13px;
|
|
height: 36px;
|
|
}
|
|
|
|
/* 兼容不同浏览器的写法 */
|
|
input::input-placeholder {
|
|
/* Chrome/Safari/Opera */
|
|
color: #a4afca;
|
|
}
|
|
|
|
.new-top-box-right-button {
|
|
width: 104px;
|
|
height: 36px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.new-list-box {
|
|
margin-top: 20px;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr); /* 创建三列等宽 */
|
|
gap: 12px; /* 设置元素间间隔为12像素 */
|
|
width: 100%; /* 容器宽度根据需要调整 */
|
|
}
|
|
|
|
.item {
|
|
/* background: red; */
|
|
padding: 20px 22px 26px;
|
|
margin-bottom: 12px;
|
|
height: 230px;
|
|
background: #fff;
|
|
}
|
|
|
|
.item-inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
|
|
/* background: #0d162a; */
|
|
}
|
|
|
|
.item-inner-left {
|
|
width: 124px;
|
|
flex-shrink: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.item-inner-left-name {
|
|
flex: 1;
|
|
margin-right: 5px;
|
|
font-family: PingFangSC, 'PingFang SC';
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
width: 0;
|
|
}
|
|
|
|
.item-inner-left-name-inner {
|
|
white-space: nowrap; /* 防止文本换行 */
|
|
overflow: hidden; /* 隐藏超出容器的部分 */
|
|
text-overflow: ellipsis; /* 显示省略号来表示被截断的文本 */
|
|
}
|
|
|
|
.item-inner-left-img-box {
|
|
width: 124px;
|
|
height: 124px;
|
|
background: #eee;
|
|
position: relative;
|
|
}
|
|
|
|
.item-inner-left-bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.item-inner-left-bottom-btn {
|
|
font-family: PingFangSC, 'PingFang SC';
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #1677ff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.new-list-box-all {
|
|
width: 100%;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.item-inner-right {
|
|
margin-left: 39px;
|
|
flex: 1;
|
|
height: 100%;
|
|
}
|
|
|
|
.item-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.item-inner-right-top {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.item-inner-right-msg {
|
|
margin-left: 35px;
|
|
flex: 1;
|
|
}
|
|
|
|
.item-inner-right-msg-item {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.item-inner-right-msg-item-name {
|
|
font-family: PingFangSC, 'PingFang SC';
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
width: 60px;
|
|
text-align: end;
|
|
}
|
|
|
|
.item-inner-right-msg-item-value {
|
|
flex: 1;
|
|
margin-left: 8px;
|
|
font-size: 14px;
|
|
color: #0d162a;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis; /* 超出宽度200px后显示省略号 */
|
|
white-space: nowrap; /* 限制不允许换行 */
|
|
width: 0;
|
|
}
|
|
|
|
.m-b-10 {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.item-inner-left-status {
|
|
width: 12px;
|
|
height: 12px;
|
|
flex-shrink: 0;
|
|
border-radius: 50%;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.item-inner-left-img-box-icon {
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 5px;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.popover-menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 120px;
|
|
padding: 4px 0;
|
|
}
|
|
.popover-menu-item {
|
|
padding: 8px 16px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
color: #333;
|
|
transition: background 0.2s;
|
|
}
|
|
.popover-menu-item:hover {
|
|
background-color: #f5f7fa;
|
|
color: #1677ff;
|
|
}
|
|
</style>
|