临时提交
This commit is contained in:
磷叶
parent
0cd182b219
commit
48b391a208
44
src/api/ss/billEleRecord.js
Normal file
44
src/api/ss/billEleRecord.js
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 查询订单电量记录列表
|
||||||
|
export function listBillEleRecord(query) {
|
||||||
|
return request({
|
||||||
|
url: '/ss/billEleRecord/list',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询订单电量记录详细
|
||||||
|
export function getBillEleRecord(id) {
|
||||||
|
return request({
|
||||||
|
url: '/ss/billEleRecord/' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增订单电量记录
|
||||||
|
export function addBillEleRecord(data) {
|
||||||
|
return request({
|
||||||
|
url: '/ss/billEleRecord',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改订单电量记录
|
||||||
|
export function updateBillEleRecord(data) {
|
||||||
|
return request({
|
||||||
|
url: '/ss/billEleRecord',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除订单电量记录
|
||||||
|
export function delBillEleRecord(id) {
|
||||||
|
return request({
|
||||||
|
url: '/ss/billEleRecord/' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -12,9 +12,19 @@ const filters = {
|
||||||
}
|
}
|
||||||
return num.toFixed(3);
|
return num.toFixed(3);
|
||||||
},
|
},
|
||||||
|
fix2(num) {
|
||||||
|
if (num == null) {
|
||||||
|
return num;
|
||||||
|
}
|
||||||
|
return num.toFixed(2);
|
||||||
|
},
|
||||||
// 缺省值
|
// 缺省值
|
||||||
defaultValue(data) {
|
defaultValue(data) {
|
||||||
return data == null ? '--' : data;
|
return data == null ? '--' : data;
|
||||||
|
},
|
||||||
|
// 缺省值
|
||||||
|
dv(data) {
|
||||||
|
return filters.defaultValue(data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export default (vm) => {
|
export default (vm) => {
|
||||||
|
|
|
||||||
|
|
@ -184,7 +184,7 @@ export const $recharge = {
|
||||||
},
|
},
|
||||||
canRefund() {
|
canRefund() {
|
||||||
return (row) => {
|
return (row) => {
|
||||||
return row.status === '2';
|
return ['2', '3'].includes(row.status);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
canClose() {
|
canClose() {
|
||||||
|
|
|
||||||
363
src/views/ss/billEleRecord/index.vue
Normal file
363
src/views/ss/billEleRecord/index.vue
Normal file
|
|
@ -0,0 +1,363 @@
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||||
|
<el-form-item label="订单编号" prop="billNo">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.billNo"
|
||||||
|
placeholder="请输入订单编号"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<!-- <el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
icon="el-icon-plus"
|
||||||
|
size="mini"
|
||||||
|
@click="handleAdd"
|
||||||
|
v-hasPermi="['ss:billEleRecord:add']"
|
||||||
|
>新增</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
type="success"
|
||||||
|
plain
|
||||||
|
icon="el-icon-edit"
|
||||||
|
size="mini"
|
||||||
|
:disabled="single"
|
||||||
|
@click="handleUpdate"
|
||||||
|
v-hasPermi="['ss:billEleRecord:edit']"
|
||||||
|
>修改</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
plain
|
||||||
|
icon="el-icon-delete"
|
||||||
|
size="mini"
|
||||||
|
:disabled="multiple"
|
||||||
|
@click="handleDelete"
|
||||||
|
v-hasPermi="['ss:billEleRecord:remove']"
|
||||||
|
>删除</el-button>
|
||||||
|
</el-col> -->
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
type="warning"
|
||||||
|
plain
|
||||||
|
icon="el-icon-download"
|
||||||
|
size="mini"
|
||||||
|
@click="handleExport"
|
||||||
|
v-hasPermi="['ss:billEleRecord:export']"
|
||||||
|
>导出</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-table v-loading="loading" :data="billEleRecordList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="onSortChange">
|
||||||
|
<el-table-column type="selection" width="55" align="center" />
|
||||||
|
<template v-for="column of showColumns">
|
||||||
|
<el-table-column
|
||||||
|
:key="column.key"
|
||||||
|
:label="column.label"
|
||||||
|
:prop="column.key"
|
||||||
|
:align="column.align"
|
||||||
|
:min-width="column.minWidth"
|
||||||
|
:sort-orders="orderSorts"
|
||||||
|
:sortable="column.sortable"
|
||||||
|
:show-overflow-tooltip="column.overflow"
|
||||||
|
:width="column.width"
|
||||||
|
>
|
||||||
|
<template slot-scope="d">
|
||||||
|
<template v-if="column.key === 'id'">
|
||||||
|
{{d.row[column.key]}}
|
||||||
|
</template>
|
||||||
|
<template v-else-if="['totalEle', 'usedEle'].includes(column.key)">
|
||||||
|
{{d.row[column.key] | fix2 | dv}} 度
|
||||||
|
</template>
|
||||||
|
<template v-else-if="['price', 'totalPrice'].includes(column.key)">
|
||||||
|
{{d.row[column.key] | fix2 | dv}} 元
|
||||||
|
</template>
|
||||||
|
<template v-else-if="column.key === 'time'">
|
||||||
|
起始:{{d.row.timeStart | dv}}<br/>
|
||||||
|
结束:{{d.row.timeEnd | dv}}
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
{{d.row[column.key]}}
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</template>
|
||||||
|
<!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
@click="handleUpdate(scope.row)"
|
||||||
|
v-hasPermi="['ss:billEleRecord:edit']"
|
||||||
|
>修改</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
@click="handleDelete(scope.row)"
|
||||||
|
v-hasPermi="['ss:billEleRecord:remove']"
|
||||||
|
>删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column> -->
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<pagination
|
||||||
|
v-show="total>0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNum"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 添加或修改订单电量记录对话框 -->
|
||||||
|
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
|
<el-form-item label="订单ID" prop="billId">
|
||||||
|
<el-input v-model="form.billId" placeholder="请输入订单ID" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="记录时的总用电量(度)" prop="totalEle">
|
||||||
|
<el-input v-model="form.totalEle" placeholder="请输入记录时的总用电量(度)" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="当前时间段用电量(度)" prop="usedEle">
|
||||||
|
<el-input v-model="form.usedEle" placeholder="请输入当前时间段用电量(度)" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="当前时间段电价(元/度)" prop="price">
|
||||||
|
<el-input v-model="form.price" placeholder="请输入当前时间段电价(元/度)" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="当前时间段总电价(元)" prop="totalPrice">
|
||||||
|
<el-input v-model="form.totalPrice" placeholder="请输入当前时间段总电价(元)" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="记录时间段(起始)" prop="timeStart">
|
||||||
|
<el-date-picker clearable
|
||||||
|
v-model="form.timeStart"
|
||||||
|
type="date"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
placeholder="请选择记录时间段(起始)">
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="记录时间段(结束)" prop="timeEnd">
|
||||||
|
<el-date-picker clearable
|
||||||
|
v-model="form.timeEnd"
|
||||||
|
type="date"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
placeholder="请选择记录时间段(结束)">
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||||
|
<el-button @click="cancel">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { listBillEleRecord, getBillEleRecord, delBillEleRecord, addBillEleRecord, updateBillEleRecord } from "@/api/ss/billEleRecord";
|
||||||
|
import { $showColumns } from '@/utils/mixins';
|
||||||
|
|
||||||
|
// 默认排序字段
|
||||||
|
const defaultSort = {
|
||||||
|
prop: "createTime",
|
||||||
|
order: "descending"
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "BillEleRecord",
|
||||||
|
mixins: [$showColumns],
|
||||||
|
props: {
|
||||||
|
query: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 字段列表
|
||||||
|
columns: [
|
||||||
|
{key: 'id', visible: true, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
|
||||||
|
{key: 'billNo', visible: true, label: '订单号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||||
|
{key: 'totalEle', visible: true, label: '抄表电量', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||||
|
{key: 'usedEle', visible: true, label: '用电量', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||||
|
{key: 'price', visible: true, label: '电价', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||||
|
{key: 'totalPrice', visible: true, label: '总价', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||||
|
{key: 'time', visible: true, label: '记录时间段', minWidth: null, sortable: false, overflow: false, align: 'center', width: "200"},
|
||||||
|
{key: 'recordTime', visible: true, label: '记录时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: "100"},
|
||||||
|
{key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: "100"},
|
||||||
|
|
||||||
|
],
|
||||||
|
// 排序方式
|
||||||
|
orderSorts: ['ascending', 'descending', null],
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 选中数组
|
||||||
|
ids: [],
|
||||||
|
// 非单个禁用
|
||||||
|
single: true,
|
||||||
|
// 非多个禁用
|
||||||
|
multiple: true,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 订单电量记录表格数据
|
||||||
|
billEleRecordList: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
defaultSort,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
orderByColumn: defaultSort.prop,
|
||||||
|
isAsc: defaultSort.order,
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
billId: [
|
||||||
|
{ required: true, message: "订单ID不能为空", trigger: "blur" }
|
||||||
|
],
|
||||||
|
createTime: [
|
||||||
|
{ required: true, message: "创建时间不能为空", trigger: "blur" }
|
||||||
|
],
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.queryParams = {
|
||||||
|
...this.queryParams,
|
||||||
|
...this.query
|
||||||
|
}
|
||||||
|
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 当排序按钮被点击时触发 **/
|
||||||
|
onSortChange(column) {
|
||||||
|
if (column.order == null) {
|
||||||
|
this.queryParams.orderByColumn = defaultSort.prop;
|
||||||
|
this.queryParams.isAsc = defaultSort.order;
|
||||||
|
} else {
|
||||||
|
this.queryParams.orderByColumn = column.prop;
|
||||||
|
this.queryParams.isAsc = column.order;
|
||||||
|
}
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 查询订单电量记录列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
listBillEleRecord(this.queryParams).then(response => {
|
||||||
|
this.billEleRecordList = response.rows;
|
||||||
|
this.total = response.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 取消按钮
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
// 表单重置
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
id: null,
|
||||||
|
billId: null,
|
||||||
|
totalEle: null,
|
||||||
|
usedEle: null,
|
||||||
|
price: null,
|
||||||
|
totalPrice: null,
|
||||||
|
createTime: null,
|
||||||
|
timeStart: null,
|
||||||
|
timeEnd: null
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNum = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm("queryForm");
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
// 多选框选中数据
|
||||||
|
handleSelectionChange(selection) {
|
||||||
|
this.ids = selection.map(item => item.id)
|
||||||
|
this.single = selection.length!==1
|
||||||
|
this.multiple = !selection.length
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = "添加订单电量记录";
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const id = row.id || this.ids
|
||||||
|
getBillEleRecord(id).then(response => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改订单电量记录";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs["form"].validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
if (this.form.id != null) {
|
||||||
|
updateBillEleRecord(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
addBillEleRecord(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const ids = row.id || this.ids;
|
||||||
|
this.$modal.confirm('是否确认删除订单电量记录编号为"' + ids + '"的数据项？').then(function() {
|
||||||
|
return delBillEleRecord(ids);
|
||||||
|
}).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
}).catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
this.download('ss/billEleRecord/export', {
|
||||||
|
...this.queryParams
|
||||||
|
}, `billEleRecord_${new Date().getTime()}.xlsx`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
55
src/views/system/device/components/DeviceActions.vue
Normal file
55
src/views/system/device/components/DeviceActions.vue
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
<template>
|
||||||
|
<div class="device-actions">
|
||||||
|
<el-button-group>
|
||||||
|
<el-button size="small" type="primary" plain icon="el-icon-plus" @click="$emit('add-time')">
|
||||||
|
增加时长
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
size="small"
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
icon="el-icon-plus"
|
||||||
|
v-if="showAddEle"
|
||||||
|
@click="$emit('add-ele')">
|
||||||
|
增加电量
|
||||||
|
</el-button>
|
||||||
|
</el-button-group>
|
||||||
|
|
||||||
|
<el-dropdown trigger="click" @command="handleCommand">
|
||||||
|
<el-button size="small" type="primary" plain>
|
||||||
|
更多操作<i class="el-icon-arrow-down el-icon--right"></i>
|
||||||
|
</el-button>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item command="reset">时长归零</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="resetEle" v-if="showAddEle">电量归零</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="switch">
|
||||||
|
{{isOpen ? '强制关闭' : '强制开启'}}
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="refresh">刷新设备</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="qrcode">设备二维码</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DeviceActions',
|
||||||
|
props: {
|
||||||
|
isOpen: Boolean,
|
||||||
|
showAddEle: Boolean
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleCommand(command) {
|
||||||
|
this.$emit(command)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.device-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
67
src/views/system/device/components/DeviceInfoCard.vue
Normal file
67
src/views/system/device/components/DeviceInfoCard.vue
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
<template>
|
||||||
|
<el-card class="device-info" shadow="hover">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span>设备信息</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<el-descriptions :column="3" border>
|
||||||
|
<el-descriptions-item label="MAC-1">
|
||||||
|
<div class="desc-content">
|
||||||
|
{{device.mac | defaultValue}}
|
||||||
|
<dict-tag :options="dict.type.sm_device_online_status" :value="device.onlineStatus1" size="mini"/>
|
||||||
|
</div>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="MAC-2">
|
||||||
|
<div class="desc-content">
|
||||||
|
{{device.mac2 | defaultValue}}
|
||||||
|
<template v-if="!isEmpty(device.mac2)">
|
||||||
|
<dict-tag :options="dict.type.sm_device_online_status" :value="device.onlineStatus2" size="mini"/>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="设备型号">
|
||||||
|
{{device.model | defaultValue}}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="产品ID">
|
||||||
|
{{device.productId | defaultValue}}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="型号功能">
|
||||||
|
<dict-tag :options="dict.type.sm_model_tag" :value="device.modelTags" size="mini"/>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="设备状态">
|
||||||
|
<dict-tag :options="dict.type.sm_device_status" :value="device.status" size="mini"/>
|
||||||
|
</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { isEmpty } from '@/utils'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'DeviceInfoCard',
|
||||||
|
props: {
|
||||||
|
device: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dicts: ['sm_device_online_status', 'sm_model_tag', 'sm_device_status'],
|
||||||
|
methods: {
|
||||||
|
isEmpty
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.device-info {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
.desc-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
101
src/views/system/device/components/DeviceOverview.vue
Normal file
101
src/views/system/device/components/DeviceOverview.vue
Normal file
|
|
@ -0,0 +1,101 @@
|
||||||
|
<template>
|
||||||
|
<el-card class="device-overview" shadow="hover">
|
||||||
|
<el-row type="flex" align="middle" justify="space-between">
|
||||||
|
<el-col :span="16">
|
||||||
|
<div class="device-header">
|
||||||
|
<div class="device-title">
|
||||||
|
<span class="name">{{device.deviceName || device.deviceNo || '未命名设备'}}</span>
|
||||||
|
<el-tag size="small" :type="isOpen ? 'success' : 'info'" class="status-tag">
|
||||||
|
{{isOpen ? '运行中' : '已关闭'}}
|
||||||
|
</el-tag>
|
||||||
|
<dict-tag
|
||||||
|
:options="dict.type.sm_device_online_status"
|
||||||
|
:value="device.onlineStatus"
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="device-meta">
|
||||||
|
<span class="meta-item">
|
||||||
|
<i class="el-icon-cpu"></i>
|
||||||
|
SN: {{device.deviceNo}}
|
||||||
|
</span>
|
||||||
|
<span class="meta-item">
|
||||||
|
<i class="el-icon-connection"></i>
|
||||||
|
MAC: {{device.mac}}
|
||||||
|
</span>
|
||||||
|
<span class="meta-item">
|
||||||
|
<i class="el-icon-timer"></i>
|
||||||
|
最后在线: {{device.lastOnlineTime | defaultValue}}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<div class="action-group">
|
||||||
|
<slot name="actions"></slot>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DeviceOverview',
|
||||||
|
props: {
|
||||||
|
device: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
isOpen: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dicts: ['sm_device_online_status']
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.device-overview {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
.device-header {
|
||||||
|
.device-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #303133;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tag {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-meta {
|
||||||
|
color: #909399;
|
||||||
|
font-size: 13px;
|
||||||
|
|
||||||
|
.meta-item {
|
||||||
|
margin-right: 24px;
|
||||||
|
|
||||||
|
i {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-group {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
88
src/views/system/device/components/DeviceOwnerCard.vue
Normal file
88
src/views/system/device/components/DeviceOwnerCard.vue
Normal file
|
|
@ -0,0 +1,88 @@
|
||||||
|
<template>
|
||||||
|
<el-card class="device-owner" shadow="hover">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span>归属信息</span>
|
||||||
|
<div class="header-actions">
|
||||||
|
<el-button-group v-if="device.agentId">
|
||||||
|
<el-button size="small" type="danger" plain icon="el-icon-link" @click="$emit('unbind-agent')">
|
||||||
|
解绑代理商
|
||||||
|
</el-button>
|
||||||
|
</el-button-group>
|
||||||
|
<bind-agent-button v-else :device-id="device.deviceId" @success="$emit('refresh')"/>
|
||||||
|
|
||||||
|
<el-button-group v-if="device.userId" style="margin-left: 8px">
|
||||||
|
<el-button size="small" type="danger" plain icon="el-icon-link" @click="$emit('unbind-mch')">
|
||||||
|
解绑商户
|
||||||
|
</el-button>
|
||||||
|
</el-button-group>
|
||||||
|
<bind-mch-button v-else :device-id="device.deviceId" @success="$emit('refresh')"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<el-descriptions :column="2" border>
|
||||||
|
<el-descriptions-item label="设备名称">
|
||||||
|
{{device.deviceName | defaultValue}}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="服务模式">
|
||||||
|
<dict-tag :options="dict.type.device_service_mode" :value="device.serviceMode" size="small"/>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="所属代理" v-if="device.serviceMode === DeviceServiceMode.AGENT">
|
||||||
|
<user-link :name="device.agentName" :id="device.agentId"/>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="所属商户">
|
||||||
|
<user-link :name="device.userName" :id="device.userId"/>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="店铺名称">
|
||||||
|
<store-link :name="device.storeName" :id="device.storeId"/>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="月费">
|
||||||
|
{{device.monthFee | money | defaultValue}} 元/月
|
||||||
|
（到期时间：{{device.rentTime | defaultValue}}）
|
||||||
|
</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { DeviceServiceMode } from '@/utils/constants'
|
||||||
|
import UserLink from '@/components/Business/SmUser/UserLink'
|
||||||
|
import StoreLink from '@/components/Business/Store/StoreLink'
|
||||||
|
import BindAgentButton from './BindAgentButton'
|
||||||
|
import BindMchButton from './BindMchButton'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'DeviceOwnerCard',
|
||||||
|
components: {
|
||||||
|
UserLink,
|
||||||
|
StoreLink,
|
||||||
|
BindAgentButton,
|
||||||
|
BindMchButton
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
device: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dicts: ['device_service_mode'],
|
||||||
|
computed: {
|
||||||
|
DeviceServiceMode() {
|
||||||
|
return DeviceServiceMode
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.device-owner {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
73
src/views/system/device/components/DeviceStatusCard.vue
Normal file
73
src/views/system/device/components/DeviceStatusCard.vue
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
<template>
|
||||||
|
<el-card class="device-status" shadow="hover">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span>实时状态</span>
|
||||||
|
<span class="update-time">{{updateTime}}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="status-list">
|
||||||
|
<div v-for="(item, index) in statusItems" :key="index" class="status-item">
|
||||||
|
<span class="item-label">{{item.label}}</span>
|
||||||
|
<span class="item-value" :class="item.class">{{item.value}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DeviceStatusCard',
|
||||||
|
props: {
|
||||||
|
updateTime: String,
|
||||||
|
statusItems: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.device-status {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.update-time {
|
||||||
|
color: #909399;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-list {
|
||||||
|
.status-item {
|
||||||
|
padding: 12px 0;
|
||||||
|
border-bottom: 1px solid #EBEEF5;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-label {
|
||||||
|
display: block;
|
||||||
|
color: #909399;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-value {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #303133;
|
||||||
|
|
||||||
|
&.warning {
|
||||||
|
color: #E6A23C;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -178,6 +178,9 @@
|
||||||
<el-tab-pane label="支付信息" lazy>
|
<el-tab-pane label="支付信息" lazy>
|
||||||
<pay-bill :query="{bstId: detail.billId}" :view="views.recharge"/>
|
<pay-bill :query="{bstId: detail.billId}" :view="views.recharge"/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="电量记录" lazy>
|
||||||
|
<bill-ele-record :query="{billId: detail.billId}" :view="views.recharge"/>
|
||||||
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
||||||
|
|
@ -210,11 +213,12 @@ import RefundDialog from '@/views/system/recharge/components/RefundDialog.vue'
|
||||||
import { toDescriptionFromSecond } from '@/utils/date'
|
import { toDescriptionFromSecond } from '@/utils/date'
|
||||||
import BooleanTag from '@/components/BooleanTag/index.vue'
|
import BooleanTag from '@/components/BooleanTag/index.vue'
|
||||||
import SuitTimePrice from '@/views/ss/suit/component/SuitTimePrice.vue'
|
import SuitTimePrice from '@/views/ss/suit/component/SuitTimePrice.vue'
|
||||||
|
import BillEleRecord from '@/views/ss/billEleRecord/index.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Recharge/:billId',
|
name: 'Recharge/:billId',
|
||||||
mixins: [$recharge],
|
mixins: [$recharge],
|
||||||
components: { SuitTimePrice, BooleanTag, RefundDialog, Bonus, PayBill, UserLink, DeviceLink, Refund },
|
components: { SuitTimePrice, BooleanTag, RefundDialog, Bonus, PayBill, UserLink, DeviceLink, Refund, BillEleRecord },
|
||||||
dicts: [
|
dicts: [
|
||||||
'channel_type',
|
'channel_type',
|
||||||
'sm_transaction_bill_status',
|
'sm_transaction_bill_status',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user