opt:一期内容优化；
This commit is contained in:
@@ -71,6 +71,19 @@ export const constantRouterMap = [
|
||||
meta: { title: i18n.t('auto.common.Personal_center') }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/acs/history/taskRecord',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
component: (resolve) => require(['@/views/acs/history/taskRecord/index'], resolve),
|
||||
name: 'TaskRecord',
|
||||
meta: { title: '任务历史记录' }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@@ -475,6 +475,27 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 处理从任务统计页面跳转过来的查询参数
|
||||
const { startPoint, endPoint, timeIndex, car_no, createTime, end_time, ...rest } = this.$route.query
|
||||
if (startPoint) {
|
||||
this.$set(this.crud.query, 'start_point_code', startPoint)
|
||||
}
|
||||
if (endPoint) {
|
||||
this.$set(this.crud.query, 'next_point_code', endPoint)
|
||||
}
|
||||
if (timeIndex) {
|
||||
this.$set(this.crud.query, 'timeIndex', timeIndex)
|
||||
}
|
||||
if (car_no) {
|
||||
this.$set(this.crud.query, 'car_no', car_no)
|
||||
}
|
||||
// 处理日期范围参数 - 使用数组格式 [开始时间, 结束时间]
|
||||
if (createTime && end_time) {
|
||||
this.$set(this.crud.query, 'createTime', [createTime, end_time])
|
||||
}
|
||||
// 合并其他查询参数
|
||||
Object.assign(this.crud.query, rest)
|
||||
|
||||
deviceCrud.selectDeviceList().then(data => {
|
||||
this.deviceList = data
|
||||
})
|
||||
@@ -484,6 +505,12 @@ export default {
|
||||
getDicts().then(data => {
|
||||
this.dicts = data
|
||||
})
|
||||
// 如果有从任务统计页面跳转过来的查询参数，自动刷新查询
|
||||
if (startPoint || endPoint || timeIndex || car_no || createTime) {
|
||||
this.$nextTick(() => {
|
||||
this.crud.toQuery()
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 钩子：在获取表格数据之前执行，false 则代表不获取数据
|
||||
@@ -526,6 +553,10 @@ export default {
|
||||
material_type: this.crud.query.material_type,
|
||||
status: this.crud.query.status,
|
||||
point_code: this.crud.query.point_code,
|
||||
start_point_code: this.crud.query.start_point_code,
|
||||
next_point_code: this.crud.query.next_point_code,
|
||||
car_no: this.crud.query.car_no,
|
||||
timeIndex: this.crud.query.timeIndex,
|
||||
createTime: formatDateTime(timeRange[0]),
|
||||
end_time: formatDateTime(timeRange[1])
|
||||
}
|
||||
|
||||
@@ -35,10 +35,26 @@
|
||||
>
|
||||
<el-table-column prop="startPoint" label="起点" align="center" />
|
||||
<el-table-column prop="endPoint" label="终点" align="center" />
|
||||
<el-table-column prop="item1" label="1-3分钟" align="center" />
|
||||
<el-table-column prop="item2" label="3-5分钟" align="center" />
|
||||
<el-table-column prop="item3" label="5-8分钟" align="center" />
|
||||
<el-table-column prop="item4" label="8分钟以上" align="center" />
|
||||
<el-table-column label="1-3分钟" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<a class="clickable-link" @click="handleClick(row.item1Key, row.item1)">{{ row.item1 }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="3-5分钟" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<a class="clickable-link" @click="handleClick(row.item2Key, row.item2)">{{ row.item2 }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="5-8分钟" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<a class="clickable-link" @click="handleClick(row.item3Key, row.item3)">{{ row.item3 }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="8分钟以上" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<a class="clickable-link" @click="handleClick(row.item4Key, row.item4)">{{ row.item4 }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
@@ -55,10 +71,48 @@
|
||||
>
|
||||
<el-table-column prop="startPoint" label="起点" align="center" />
|
||||
<el-table-column prop="endPoint" label="终点" align="center" />
|
||||
<el-table-column prop="item1" label="1-3分钟" align="center" />
|
||||
<el-table-column prop="item2" label="3-5分钟" align="center" />
|
||||
<el-table-column prop="item3" label="5-8分钟" align="center" />
|
||||
<el-table-column prop="item4" label="8分钟以上" align="center" />
|
||||
<el-table-column label="1-3分钟" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<a class="clickable-link" @click="handleClick(row.item1Key, row.item1)">{{ row.item1 }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="3-5分钟" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<a class="clickable-link" @click="handleClick(row.item2Key, row.item2)">{{ row.item2 }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="5-8分钟" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<a class="clickable-link" @click="handleClick(row.item3Key, row.item3)">{{ row.item3 }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="8分钟以上" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<a class="clickable-link" @click="handleClick(row.item4Key, row.item4)">{{ row.item4 }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 稼动率统计 -->
|
||||
<div class="table-section">
|
||||
<div class="table-title">稼动率统计</div>
|
||||
<el-table
|
||||
:data="carData"
|
||||
border
|
||||
style="width: 100%"
|
||||
:header-cell-style="carHeaderCellStyle"
|
||||
>
|
||||
<el-table-column label="车辆" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<a class="clickable-link" @click="handleCarClick(row.carNo)">{{ row.carNo }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="actualTime" label="实际运行总时长" align="center" />
|
||||
<el-table-column prop="standardTime" label="标准工作时间" align="center" />
|
||||
<el-table-column prop="totalTasks" label="总任务数" align="center" />
|
||||
<el-table-column prop="utilizationRate" label="稼动率(总时长/工作时间)" align="center" />
|
||||
<el-table-column prop="avgTime" label="平均耗时(总时长/总任务数)" align="center" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -75,18 +129,20 @@ export default {
|
||||
query: {
|
||||
dateRange: []
|
||||
},
|
||||
// 入库数据
|
||||
// 入库数据 (AA->AB/AD/AC)
|
||||
inboundData: [
|
||||
{ startPoint: 'AA/缓存区', endPoint: 'AB', item1: '', item2: '', item3: '', item4: '' },
|
||||
{ startPoint: 'AA/缓存区', endPoint: 'AD', item1: '', item2: '', item3: '', item4: '' },
|
||||
{ startPoint: 'AA/缓存区', endPoint: 'AC', item1: '', item2: '', item3: '', item4: '' }
|
||||
{ startPoint: 'AA', endPoint: 'AB', item1: '', item2: '', item3: '', item4: '', item1Key: '', item2Key: '', item3Key: '', item4Key: '' },
|
||||
{ startPoint: 'AA', endPoint: 'AD', item1: '', item2: '', item3: '', item4: '', item1Key: '', item2Key: '', item3Key: '', item4Key: '' },
|
||||
{ startPoint: 'AA', endPoint: 'AC', item1: '', item2: '', item3: '', item4: '', item1Key: '', item2Key: '', item3Key: '', item4Key: '' }
|
||||
],
|
||||
// 出库数据
|
||||
// 出库数据 (AB/AD/AC->AA)
|
||||
outboundData: [
|
||||
{ startPoint: 'AB', endPoint: 'AA/缓存区', item1: '', item2: '', item3: '', item4: '' },
|
||||
{ startPoint: 'AD', endPoint: 'AA/缓存区', item1: '', item2: '', item3: '', item4: '' },
|
||||
{ startPoint: 'AC', endPoint: 'AA/缓存区', item1: '', item2: '', item3: '', item4: '' }
|
||||
]
|
||||
{ startPoint: 'AB', endPoint: 'AA', item1: '', item2: '', item3: '', item4: '', item1Key: '', item2Key: '', item3Key: '', item4Key: '' },
|
||||
{ startPoint: 'AD', endPoint: 'AA', item1: '', item2: '', item3: '', item4: '', item1Key: '', item2Key: '', item3Key: '', item4Key: '' },
|
||||
{ startPoint: 'AC', endPoint: 'AA', item1: '', item2: '', item3: '', item4: '', item1Key: '', item2Key: '', item3Key: '', item4Key: '' }
|
||||
],
|
||||
// 稼动率数据 (动态从后端获取)
|
||||
carData: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -101,27 +157,173 @@ export default {
|
||||
}
|
||||
queryTaskSheet(params).then(res => {
|
||||
if (res) {
|
||||
this.fillData(res)
|
||||
this.fillData(res[0])
|
||||
}
|
||||
})
|
||||
},
|
||||
fillData(data) {
|
||||
// 入库数据填充 (item1-item12)
|
||||
// 入库数据填充 (AA-AB-X-Y, AA-AD-X-Y, AA-AC-X-Y)
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const baseIndex = i * 4
|
||||
this.inboundData[i].item1 = data[0][`item${baseIndex + 1}`] ? data[0][`item${baseIndex + 1}`] + '%' : '0%'
|
||||
this.inboundData[i].item2 = data[0][`item${baseIndex + 2}`] ? data[0][`item${baseIndex + 2}`] + '%' : '0%'
|
||||
this.inboundData[i].item3 = data[0][`item${baseIndex + 3}`] ? data[0][`item${baseIndex + 3}`] + '%' : '0%'
|
||||
this.inboundData[i].item4 = data[0][`item${baseIndex + 4}`] ? data[0][`item${baseIndex + 4}`] + '%' : '0%'
|
||||
const start = this.inboundData[i].startPoint
|
||||
const end = this.inboundData[i].endPoint
|
||||
|
||||
// 时间段1-3分钟 (timeIndex=1)
|
||||
this.inboundData[i].item1Key = `${start}-${end}-1`
|
||||
this.inboundData[i].item1 = this.getValue(data, start, end, 1)
|
||||
|
||||
// 时间段3-5分钟 (timeIndex=2)
|
||||
this.inboundData[i].item2Key = `${start}-${end}-2`
|
||||
this.inboundData[i].item2 = this.getValue(data, start, end, 2)
|
||||
|
||||
// 时间段5-8分钟 (timeIndex=3)
|
||||
this.inboundData[i].item3Key = `${start}-${end}-3`
|
||||
this.inboundData[i].item3 = this.getValue(data, start, end, 3)
|
||||
|
||||
// 时间段8分钟以上 (timeIndex=4)
|
||||
this.inboundData[i].item4Key = `${start}-${end}-4`
|
||||
this.inboundData[i].item4 = this.getValue(data, start, end, 4)
|
||||
}
|
||||
// 出库数据填充 (item13-item24)
|
||||
|
||||
// 出库数据填充 (AB-AA-X-Y, AD-AA-X-Y, AC-AA-X-Y)
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const baseIndex = 12 + i * 4
|
||||
this.outboundData[i].item1 = data[0][`item${baseIndex + 1}`] ? data[0][`item${baseIndex + 1}`] + '%' : '0%'
|
||||
this.outboundData[i].item2 = data[0][`item${baseIndex + 2}`] ? data[0][`item${baseIndex + 2}`] + '%' : '0%'
|
||||
this.outboundData[i].item3 = data[0][`item${baseIndex + 3}`] ? data[0][`item${baseIndex + 3}`] + '%' : '0%'
|
||||
this.outboundData[i].item4 = data[0][`item${baseIndex + 4}`] ? data[0][`item${baseIndex + 4}`] + '%' : '0%'
|
||||
const start = this.outboundData[i].startPoint
|
||||
const end = this.outboundData[i].endPoint
|
||||
|
||||
this.outboundData[i].item1Key = `${start}-${end}-1`
|
||||
this.outboundData[i].item1 = this.getValue(data, start, end, 1)
|
||||
|
||||
this.outboundData[i].item2Key = `${start}-${end}-2`
|
||||
this.outboundData[i].item2 = this.getValue(data, start, end, 2)
|
||||
|
||||
this.outboundData[i].item3Key = `${start}-${end}-3`
|
||||
this.outboundData[i].item3 = this.getValue(data, start, end, 3)
|
||||
|
||||
this.outboundData[i].item4Key = `${start}-${end}-4`
|
||||
this.outboundData[i].item4 = this.getValue(data, start, end, 4)
|
||||
}
|
||||
|
||||
// 稼动率数据填充 (car-X-Y)
|
||||
this.fillCarData(data)
|
||||
},
|
||||
// 填充稼动率数据
|
||||
fillCarData(data) {
|
||||
const carData = []
|
||||
// 后端格式: car-{车辆号}-{列号}，如 car-2-1 表示车辆2的第1列(车辆编号)
|
||||
const carMap = new Map()
|
||||
|
||||
Object.keys(data).forEach(key => {
|
||||
if (key.startsWith('car-')) {
|
||||
const parts = key.split('-')
|
||||
if (parts.length >= 3) {
|
||||
const carNo = parts[1]
|
||||
const colIndex = parseInt(parts[2])
|
||||
if (!carMap.has(carNo)) {
|
||||
carMap.set(carNo, {})
|
||||
}
|
||||
carMap.get(carNo)[colIndex] = data[key]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 按车辆编号排序并构建数据
|
||||
const sortedCarNos = Array.from(carMap.keys()).sort((a, b) => parseInt(a) - parseInt(b))
|
||||
|
||||
sortedCarNos.forEach(carNo => {
|
||||
const carInfo = carMap.get(carNo)
|
||||
// 列1: 车辆编号, 列2: 实际运行总时长, 列3: 标准工作时间, 列4: 总任务数, 列5: 稼动率, 列6: 平均耗时
|
||||
carData.push({
|
||||
carNo: carInfo[1] || carNo, // 车辆编号
|
||||
actualTime: carInfo[2] || '0', // 实际运行总时长
|
||||
standardTime: carInfo[3] || '0', // 标准工作时间
|
||||
totalTasks: carInfo[4] || '0', // 总任务数
|
||||
utilizationRate: carInfo[5] ? carInfo[5] + '%' : '0%', // 稼动率
|
||||
avgTime: carInfo[6] || '0' // 平均耗时
|
||||
})
|
||||
})
|
||||
|
||||
this.carData = carData
|
||||
},
|
||||
// 获取百分比值
|
||||
getValue(data, start, end, timeIndex) {
|
||||
// 查找匹配的key，格式: start-end-timeIndex-index
|
||||
for (let index = 1; index <= 30; index++) {
|
||||
const key = `${start}-${end}-${timeIndex}-${index}`
|
||||
if (data[key] !== undefined) {
|
||||
return data[key] + '%'
|
||||
}
|
||||
}
|
||||
return '0%'
|
||||
},
|
||||
// 获取日期范围参数
|
||||
getDateRangeParams() {
|
||||
let startDate, endDate
|
||||
if (this.query.dateRange && this.query.dateRange.length === 2) {
|
||||
startDate = this.query.dateRange[0]
|
||||
endDate = this.query.dateRange[1]
|
||||
} else {
|
||||
// 如果没有选择日期范围，使用今天日期
|
||||
const today = new Date()
|
||||
const year = today.getFullYear()
|
||||
const month = String(today.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(today.getDate()).padStart(2, '0')
|
||||
startDate = `${year}-${month}-${day}`
|
||||
endDate = startDate
|
||||
}
|
||||
return {
|
||||
createTime: `${startDate} 00:00:00`,
|
||||
end_time: `${endDate} 23:59:59`
|
||||
}
|
||||
},
|
||||
// 点击百分比跳转到任务历史记录页面
|
||||
handleClick(key, value) {
|
||||
if (!key || value === '0%') {
|
||||
return
|
||||
}
|
||||
// 解析key，如 "AA-AB-1" 或 "car-1"
|
||||
const parts = key.split('-')
|
||||
const query = {}
|
||||
|
||||
if (parts.length >= 3) {
|
||||
// 格式: AA-AB-1-X 或 car-1-X
|
||||
if (parts[0] === 'car') {
|
||||
// car-1-X 格式 -> car_type=1
|
||||
query.car_no = parts[1]
|
||||
} else {
|
||||
// AA-AB-1-X 格式 -> startPoint=AA, endPoint=AB, timeIndex=1
|
||||
query.startPoint = parts[0]
|
||||
query.endPoint = parts[1]
|
||||
query.timeIndex = parts[2]
|
||||
}
|
||||
}
|
||||
|
||||
// 添加日期范围参数
|
||||
const dateParams = this.getDateRangeParams()
|
||||
query.createTime = dateParams.createTime
|
||||
query.end_time = dateParams.end_time
|
||||
|
||||
// 跳转到任务历史记录页面
|
||||
this.$router.push({
|
||||
path: '/acs/history/taskRecord',
|
||||
query: query
|
||||
})
|
||||
},
|
||||
// 点击车辆跳转到任务历史记录页面
|
||||
handleCarClick(carNo) {
|
||||
if (!carNo) {
|
||||
return
|
||||
}
|
||||
// 构建查询参数
|
||||
const query = { car_no: carNo }
|
||||
// 添加日期范围参数
|
||||
const dateParams = this.getDateRangeParams()
|
||||
query.createTime = dateParams.createTime
|
||||
query.end_time = dateParams.end_time
|
||||
|
||||
// 跳转到任务历史记录页面
|
||||
this.$router.push({
|
||||
path: '/acs/history/taskRecord',
|
||||
query: query
|
||||
})
|
||||
},
|
||||
// 导出所有表格
|
||||
exportAll() {
|
||||
@@ -132,44 +334,33 @@ export default {
|
||||
const data = []
|
||||
|
||||
// 添加入库统计数据
|
||||
data.push(['入库统计']) // 添加入库统计标题
|
||||
data.push(header) // 添加表头
|
||||
data.push(['入库统计'])
|
||||
data.push(header)
|
||||
this.inboundData.forEach(item => {
|
||||
data.push([
|
||||
item.startPoint,
|
||||
item.endPoint,
|
||||
item.item1,
|
||||
item.item2,
|
||||
item.item3,
|
||||
item.item4
|
||||
])
|
||||
data.push([item.startPoint, item.endPoint, item.item1, item.item2, item.item3, item.item4])
|
||||
})
|
||||
data.push([]) // 空行分隔
|
||||
data.push([])
|
||||
|
||||
// 添加出库统计数据
|
||||
data.push(['出库统计']) // 添加出库统计标题
|
||||
data.push(header) // 添加表头
|
||||
data.push(['出库统计'])
|
||||
data.push(header)
|
||||
this.outboundData.forEach(item => {
|
||||
data.push([
|
||||
item.startPoint,
|
||||
item.endPoint,
|
||||
item.item1,
|
||||
item.item2,
|
||||
item.item3,
|
||||
item.item4
|
||||
])
|
||||
data.push([item.startPoint, item.endPoint, item.item1, item.item2, item.item3, item.item4])
|
||||
})
|
||||
data.push([])
|
||||
|
||||
// 添加稼动率统计数据
|
||||
data.push(['稼动率统计'])
|
||||
data.push(['车辆', '实际运行总时长', '标准工作时间', '总任务数', '稼动率', '平均耗时'])
|
||||
this.carData.forEach(item => {
|
||||
data.push([item.carNo, item.actualTime, item.standardTime, item.totalTasks, item.utilizationRate, item.avgTime])
|
||||
})
|
||||
|
||||
const worksheet = XLSX.utils.aoa_to_sheet(data)
|
||||
|
||||
// 设置列宽
|
||||
worksheet['!cols'] = [
|
||||
{ wch: 15 },
|
||||
{ wch: 15 },
|
||||
{ wch: 12 },
|
||||
{ wch: 12 },
|
||||
{ wch: 12 },
|
||||
{ wch: 15 }
|
||||
{ wch: 15 }, { wch: 15 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 15 }
|
||||
]
|
||||
|
||||
// 设置样式
|
||||
@@ -180,16 +371,13 @@ export default {
|
||||
const cellAddress = XLSX.utils.encode_cell({ r: R, c: C })
|
||||
if (!worksheet[cellAddress]) continue
|
||||
|
||||
// 设置"入库统计"和"出库统计"标题样式（第1行和第6行）
|
||||
if (R === 0 || R === 5) {
|
||||
worksheet[cellAddress].s = {
|
||||
fill: { fgColor: { rgb: "FFFFFF" } },
|
||||
font: { bold: true, sz: 14 },
|
||||
alignment: { horizontal: "center", vertical: "center" }
|
||||
}
|
||||
}
|
||||
// 设置表头样式（第2行和第7行）
|
||||
else if (R === 1 || R === 6) {
|
||||
} else if (R === 1 || R === 6) {
|
||||
worksheet[cellAddress].s = {
|
||||
fill: { fgColor: { rgb: "F5F7FA" } },
|
||||
font: { bold: true },
|
||||
@@ -200,10 +388,8 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
// 添加工作表到工作簿
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
|
||||
|
||||
// 生成文件名
|
||||
let filename = '任务统计'
|
||||
if (this.query.dateRange && this.query.dateRange.length === 2) {
|
||||
filename = `${filename}_${this.query.dateRange[0]}至${this.query.dateRange[1]}`
|
||||
@@ -215,7 +401,6 @@ export default {
|
||||
// 入库表格合并方法 - 合并起点列
|
||||
inboundSpanMethod({ rowIndex, columnIndex }) {
|
||||
if (columnIndex === 0) {
|
||||
// 起点列，第一行合并3行
|
||||
if (rowIndex === 0) {
|
||||
return { rowspan: 3, colspan: 1 }
|
||||
} else {
|
||||
@@ -226,7 +411,6 @@ export default {
|
||||
// 出库表格合并方法 - 合并终点列
|
||||
outboundSpanMethod({ rowIndex, columnIndex }) {
|
||||
if (columnIndex === 1) {
|
||||
// 终点列，第一行合并3行
|
||||
if (rowIndex === 0) {
|
||||
return { rowspan: 3, colspan: 1 }
|
||||
} else {
|
||||
@@ -241,14 +425,18 @@ export default {
|
||||
return {}
|
||||
},
|
||||
headerCellStyle({ columnIndex }) {
|
||||
// 时间列头背景色: 5-8分钟黄色, 8分钟以上红色
|
||||
if (columnIndex === 4) {
|
||||
return { backgroundColor: '#ffff00', color: '#000' }
|
||||
} else if (columnIndex === 5) {
|
||||
return { backgroundColor: '#f46262', color: '#000' }
|
||||
}
|
||||
return { backgroundColor: '#f5f7fa', color: '#000' }
|
||||
}
|
||||
},
|
||||
// 稼动率表格表头样式（普通颜色，无黄红标记）
|
||||
carHeaderCellStyle() {
|
||||
return { backgroundColor: '#f5f7fa', color: '#000' }
|
||||
},
|
||||
// 点击车辆跳转到任务历史记录页面
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -263,4 +451,12 @@ export default {
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.clickable-link {
|
||||
color: #409EFF;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.clickable-link:hover {
|
||||
color: #66b1ff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,6 +4,26 @@
|
||||
<div class="head-container">
|
||||
<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
|
||||
<crudOperation :permission="permission" />
|
||||
<el-button
|
||||
slot="right"
|
||||
class="filter-item"
|
||||
type="success"
|
||||
icon="el-icon-position"
|
||||
size="mini"
|
||||
@click="divOpen"
|
||||
>
|
||||
配置自动充电
|
||||
</el-button>
|
||||
<el-button
|
||||
slot="right"
|
||||
class="filter-item"
|
||||
type="primary"
|
||||
icon="el-icon-position"
|
||||
size="mini"
|
||||
@click="divOpenStation"
|
||||
>
|
||||
充电桩管理
|
||||
</el-button>
|
||||
<!--表单组件-->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
@@ -58,6 +78,8 @@
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
</div>
|
||||
<tube-dialog2 :dialog-show.sync="showView2" @AddChanged="querytable" />
|
||||
<station-dialog :dialog-show.sync="showStation" @AddChanged="querytable" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -67,7 +89,8 @@ import CRUD, { presenter, header, form, crud } from '@crud/crud'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import udOperation from '@crud/UD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
|
||||
import TubeDialog2 from '@/views/system/param/tubeDialog2.vue'
|
||||
import StationDialog from '@/views/system/param/stationDialog.vue'
|
||||
const defaultForm = {
|
||||
id: null,
|
||||
code: null,
|
||||
@@ -78,7 +101,7 @@ const defaultForm = {
|
||||
}
|
||||
export default {
|
||||
name: 'Param',
|
||||
components: { pagination, crudOperation, udOperation },
|
||||
components: { pagination, crudOperation, udOperation, TubeDialog2, StationDialog },
|
||||
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||||
cruds() {
|
||||
return CRUD({ title: 'menu.table_title.SystemParam', url: 'api/param', idField: 'id', sort: 'id,desc', crudMethod: { ...crudParam },
|
||||
@@ -98,7 +121,8 @@ export default {
|
||||
edit: ['admin', 'param:edit'],
|
||||
del: ['admin', 'param:del']
|
||||
},
|
||||
|
||||
showView2: false,
|
||||
showStation: false,
|
||||
rules: {
|
||||
id: [
|
||||
{ required: true, message: this.$t('SysParam.rules.NotNull'), trigger: 'blur' }
|
||||
@@ -130,6 +154,12 @@ export default {
|
||||
[CRUD.HOOK.beforeRefresh]() {
|
||||
return true
|
||||
},
|
||||
divOpen() {
|
||||
this.showView2 = true
|
||||
},
|
||||
divOpenStation() {
|
||||
this.showStation = true
|
||||
},
|
||||
webSocket() {
|
||||
const that = this
|
||||
if (typeof (WebSocket) === 'undefined') {
|
||||
|
||||
@@ -30,5 +30,43 @@ export function getValueByCode(code) {
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
export function queryParam() {
|
||||
return request({
|
||||
url: '/api/param/queryParam',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export default { add, edit, del, getValueByCode }
|
||||
export function setParam(data) {
|
||||
return request({
|
||||
url: 'api/param/setParam',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function showDetail2(params) {
|
||||
return request({
|
||||
url: 'api/dict/showDetail2',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function showDetail3(params) {
|
||||
return request({
|
||||
url: 'api/dict/showDetail3',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function initDict(data) {
|
||||
return request({
|
||||
url: 'api/dict/initDict',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export default { add, edit, del, getValueByCode, setParam, showDetail2, initDict, showDetail3 }
|
||||
|
||||
150
acs/nladmin-ui/src/views/system/param/stationDialog.vue
Normal file
150
acs/nladmin-ui/src/views/system/param/stationDialog.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<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>
|
||||
136
acs/nladmin-ui/src/views/system/param/tubeDialog2.vue
Normal file
136
acs/nladmin-ui/src/views/system/param/tubeDialog2.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
append-to-body
|
||||
title="自动充电配置"
|
||||
:visible.sync="dialogVisible"
|
||||
destroy-on-close
|
||||
width="800px"
|
||||
@close="close"
|
||||
@open="open"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" size="mini" :inline-message="true" label-width="150px">
|
||||
<el-form-item label="白班充电阈值(%):" prop="electric">
|
||||
<el-input-number v-model="form.electric" size="medium" :min="1" :max="100" :step="1" step-strictly></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="晚班充电阈值(%):" prop="electric2">
|
||||
<el-input-number v-model="form.electric2" size="medium" :min="1" :max="100" step-strictly></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="白班开始时间:" prop="electric_begin">
|
||||
<el-time-select
|
||||
v-model="form.electric_begin"
|
||||
size="medium"
|
||||
:picker-options="{
|
||||
start: '06:00',
|
||||
step: '00:15',
|
||||
end: '12:00'
|
||||
}"
|
||||
placeholder="白班开始时间">
|
||||
</el-time-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="白班结束时间:" prop="electric_end">
|
||||
<el-time-select
|
||||
v-model="form.electric_end"
|
||||
size="medium"
|
||||
:picker-options="{
|
||||
start: '18:00',
|
||||
step: '00:15',
|
||||
end: '23:45'
|
||||
}"
|
||||
placeholder="白班结束时间">
|
||||
</el-time-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="close">取消</el-button>
|
||||
<el-button type="primary" @click="save">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import crudParam from '@/views/system/param/param'
|
||||
import CRUD, { crud } from '@crud/crud'
|
||||
|
||||
export default {
|
||||
name: 'TubeDialog2',
|
||||
components: { },
|
||||
mixins: [crud()],
|
||||
props: {
|
||||
dialogShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
rules: {
|
||||
electric: [
|
||||
{ required: true, message: '请输入白班充电阈值(%)', trigger: 'blur' }
|
||||
],
|
||||
electric2: [
|
||||
{ required: true, message: '请输入晚班充电阈值(%)', trigger: 'blur' }
|
||||
],
|
||||
electric_begin: [
|
||||
{ required: true, message: '请输入白班开始时间', trigger: 'blur' }
|
||||
],
|
||||
electric_end: [
|
||||
{ required: true, message: '请输入白班结束时间', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
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.form.electric = 0
|
||||
this.form.electric2 = 0
|
||||
this.form.electric_begin = '06:00'
|
||||
this.form.electric_end = '18:00'
|
||||
this.$emit('AddChanged')
|
||||
},
|
||||
save() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.save_my()
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
save_my() {
|
||||
crudParam.setParam(this.form).then(res => {
|
||||
this.crud.notify('保存成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||||
this.close()
|
||||
})
|
||||
},
|
||||
queryTableDtl() {
|
||||
crudParam.queryParam().then(res => {
|
||||
this.form.electric = res.electric
|
||||
this.form.electric2 = res.electric2
|
||||
this.form.electric_begin = res.electric_begin
|
||||
this.form.electric_end = res.electric_end
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
Reference in New Issue
Block a user