151 lines
4.2 KiB
Vue
151 lines
4.2 KiB
Vue
<template>
|
|
<el-dialog
|
|
append-to-body
|
|
v-loading.fullscreen.lock="fullscreenLoading"
|
|
title="充电桩管理"
|
|
:visible.sync="dialogVisible"
|
|
destroy-on-close
|
|
width="1200px"
|
|
@close="close"
|
|
@open="open"
|
|
>
|
|
<div class="grid-container">
|
|
<el-table
|
|
ref="table2"
|
|
:data="tableDtl"
|
|
style="width: 100%;"
|
|
size="mini"
|
|
:cell-style="cellStyle"
|
|
border
|
|
:highlight-current-row="true"
|
|
:header-cell-style="{background:'#f5f7fa',color:'#606266'}"
|
|
>
|
|
<el-table-column v-if="false" prop="dict_id" label="uuid" align="center" />
|
|
<el-table-column min-width="60" prop="label" label="充电桩名称" align="center" />
|
|
<el-table-column prop="value" label="是否分配车辆(1是0否)" align="center" width="150" />
|
|
<el-table-column min-width="60" prop="para1" label="充电桩站点" align="center" />
|
|
<el-table-column min-width="50" prop="para2" label="当前车号" align="center" />
|
|
<el-table-column min-width="60" prop="use_time" label="充电时长(H)" align="center" :formatter="Myduration" />
|
|
<el-table-column min-width="60" prop="para3" label="充电状态" align="center" />
|
|
<el-table-column prop="update_time" label="修改时间" align="center" />
|
|
<el-table-column prop="update_name" label="修改人" align="center" />
|
|
<el-table-column
|
|
fixed="right"
|
|
label="操作"
|
|
width="150">
|
|
<template slot-scope="scope">
|
|
<el-button @click="handleClick(scope.row)" type="danger" size="small">初始化充电桩信息</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import crudParam, {updateDict} from '@/views/system/param/param'
|
|
import { crud } from '@crud/crud'
|
|
|
|
export default {
|
|
name: 'StationDialog',
|
|
components: { },
|
|
mixins: [crud()],
|
|
props: {
|
|
dialogShow: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
dialogVisible: false,
|
|
fullscreenLoading: false,
|
|
tableDtl: [],
|
|
form: {
|
|
electric: 0,
|
|
electric2: 0,
|
|
electric_begin: '06:00',
|
|
electric_end: '18:00'
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
dialogShow: {
|
|
handler(newValue) {
|
|
this.dialogVisible = newValue
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
open() {
|
|
this.queryTableDtl()
|
|
},
|
|
close() {
|
|
this.$emit('update:dialogShow', false)
|
|
this.tableDtl = []
|
|
this.$emit('AddChanged')
|
|
},
|
|
Myduration(row, column) {
|
|
const start = new Date(row.update_time)
|
|
const end = new Date()
|
|
const diffTime = Math.abs(end - start)
|
|
let diffDays = 0
|
|
if (row.para2 && row.para2 !== null) {
|
|
diffDays = Math.ceil(diffTime / (1000 * 60 * 60)) // 转换为H
|
|
}
|
|
return diffDays
|
|
},
|
|
handleClick(row) {
|
|
this.$confirm('此操作将初始化充电桩信息, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.fullscreenLoading = true
|
|
debugger
|
|
crudParam.initDict(row).then(res => {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '初始化成功!'
|
|
})
|
|
this.fullscreenLoading = false
|
|
this.queryTableDtl()
|
|
}).catch(() => {
|
|
this.fullscreenLoading = false
|
|
})
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消操作'
|
|
})
|
|
})
|
|
},
|
|
cellStyle({ row, column, rowIndex, columnIndex }) {
|
|
if (column.property === 'use_time') {
|
|
const start = new Date(row.update_time)
|
|
const end = new Date()
|
|
const diffTime = Math.abs(end - start)
|
|
let diffDays = 0
|
|
if (row.para2 && row.para2 !== null) {
|
|
diffDays = Math.ceil(diffTime / (1000 * 60 * 60)) // 转换为H
|
|
}
|
|
|
|
if (diffDays > 0 && diffDays <= 3) {
|
|
return 'background: #13ce66'
|
|
} else if (diffDays > 3) {
|
|
return 'background: red'
|
|
}
|
|
}
|
|
},
|
|
queryTableDtl() {
|
|
crudParam.showDetail2({ 'name': 'station' }).then(res => {
|
|
this.tableDtl = res
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|