136 lines
3.1 KiB
Vue
136 lines
3.1 KiB
Vue
<!--
|
||
* @Author: gtz
|
||
* @Date: 2022-07-28 10:22:30
|
||
* @LastEditors: gtz
|
||
* @LastEditTime: 2022-08-03 13:52:32
|
||
* @Description: file content
|
||
* @FilePath: \hf-pda\src\pages\eqInspection\components\eqItem.vue
|
||
-->
|
||
<template>
|
||
<div class="eqItem">
|
||
<div class="eqItem-header">
|
||
<div class="eqItem-title">
|
||
<short-line />
|
||
{{ injectData.equipmentName }}
|
||
</div>
|
||
<div class="eqItem-user">
|
||
{{ injectData.inspectionWorker }}
|
||
</div>
|
||
</div>
|
||
<div class="eqItem-main">
|
||
<div class="eqItem-main-left">
|
||
<div class="eqItem-main-left-item">
|
||
添加时间：
|
||
<span>{{ injectData.createTime ? moment(injectData.createTime).format('YYYY-MM-DD HH:mm:ss') : '暂无' }}</span>
|
||
</div>
|
||
<div class="eqItem-main-left-item">
|
||
巡检时间：
|
||
<span>{{ injectData.inspectionStartTime ? moment(injectData.inspectionStartTime).format('YYYY-MM-DD HH:mm:ss') : '暂无' }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="eqItem-main-right" @click="toDetail">
|
||
<div class="eqItem-main-right-box">
|
||
<div style="opacity: .5;">查看详情</div>
|
||
<div>
|
||
<van-icon class-prefix="iconfont" name="jiantou" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import moment from 'moment'
|
||
import shortLine from '@/components/shortLine.vue'
|
||
|
||
export default {
|
||
name: 'eqItem',
|
||
components: { shortLine },
|
||
props: {
|
||
injectData: {
|
||
type: Object,
|
||
default: () => {}
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
moment
|
||
}
|
||
},
|
||
methods: {
|
||
toDetail () {
|
||
this.$router.push({
|
||
name: 'eqInspectionEdit',
|
||
query: {
|
||
id: this.injectData.id
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.eqItem {
|
||
width: calc(100% - .75rem);
|
||
padding: .125rem .375rem;
|
||
border-radius: .25rem;
|
||
height: 2.125rem;
|
||
background: #fff;
|
||
box-shadow: .02rem .02rem .1rem rgba($color: #000000, $alpha: .2);
|
||
margin: .125rem 0;
|
||
.eqItem-header {
|
||
line-height: .875rem;
|
||
display: flex;
|
||
font-size: .34375rem;
|
||
.eqItem-title {
|
||
font-weight: bold;
|
||
max-width: 2.75rem;
|
||
overflow:hidden;
|
||
text-overflow:ellipsis;
|
||
white-space:nowrap;
|
||
}
|
||
.eqItem-user {
|
||
padding-left: .5rem;
|
||
flex: 1;
|
||
text-align: right;
|
||
overflow:hidden;
|
||
text-overflow:ellipsis;
|
||
white-space:nowrap;
|
||
}
|
||
}
|
||
.eqItem-main {
|
||
display: flex;
|
||
.eqItem-main-left {
|
||
flex: 1;
|
||
padding-right: .1rem;
|
||
.eqItem-main-left-item {
|
||
line-height: .59375rem;
|
||
font-size: .3125rem;
|
||
overflow:hidden;
|
||
text-overflow:ellipsis;
|
||
white-space:nowrap;
|
||
span {
|
||
opacity: .5;
|
||
}
|
||
}
|
||
}
|
||
.eqItem-main-right {
|
||
font-size: .3125rem;
|
||
width: 1.6rem;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
.eqItem-main-right-box {
|
||
padding-bottom: .1rem;
|
||
.iconfont {
|
||
font-size: 0.17rem;
|
||
color: #4271FF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|