优化
This commit is contained in:
墨大叔
parent
9f3f0a5c59
commit
cdb432a0bf
83
src/components/Business/Model/ModelSimpleSelect.vue
Normal file
83
src/components/Business/Model/ModelSimpleSelect.vue
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<el-select
|
||||
v-model="computedValue"
|
||||
filterable
|
||||
:placeholder="placeholder"
|
||||
:multiple="multiple"
|
||||
remote
|
||||
:remote-method="getOptions"
|
||||
@change="onChange"
|
||||
:clearable="clearable"
|
||||
:loading="loading"
|
||||
>
|
||||
<el-option v-for="item in options" :key="item.modelId" :label="item.modelName" :value="item.modelId" >
|
||||
<span style="float: left">{{ item.modelName }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.model }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listModel } from '@/api/system/model'
|
||||
|
||||
export default {
|
||||
name: "ModelSimpleSelect",
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Array],
|
||||
default: null,
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "请输入或选择型号",
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
computedValue: {
|
||||
get() {
|
||||
return this.value;
|
||||
},
|
||||
set(val) {
|
||||
this.$emit("input", val);
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 100
|
||||
},
|
||||
options: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getOptions(null);
|
||||
},
|
||||
methods: {
|
||||
getOptions(keyword) {
|
||||
this.queryParams.keyword = keyword;
|
||||
this.loading = true;
|
||||
listModel(this.queryParams).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.options = res.rows;
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
})
|
||||
},
|
||||
onChange(val) {
|
||||
this.$emit('change', val);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="app-container" v-loading="loading" >
|
||||
<div v-if="deviceData">
|
||||
<el-card class="box-card" >
|
||||
<el-descriptions title="设备详情" :column="4">
|
||||
<el-descriptions title="设备信息" :column="4">
|
||||
<template slot="extra">
|
||||
<el-dropdown style="margin-right: 1em">
|
||||
<el-button>
|
||||
|
|
@ -42,36 +42,55 @@
|
|||
<el-button slot="reference" type="primary" icon="el-icon-picture">设备二维码</el-button>
|
||||
</el-popover>
|
||||
</template>
|
||||
<el-descriptions-item label="MAC">{{deviceData.mac | defaultValue}}
|
||||
<el-descriptions-item label="MAC-1">
|
||||
{{deviceData.mac | defaultValue}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="MAC-2">
|
||||
{{deviceData.mac2 | defaultValue}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="SN">
|
||||
{{deviceData.deviceNo | defaultValue}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="设备状态">
|
||||
<dict-tag :options="dict.type.sm_device_status" :value="deviceData.status" size="mini"/>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="SN">{{deviceData.deviceNo | defaultValue}}</el-descriptions-item>
|
||||
<el-descriptions-item label="设备到期时间">{{deviceData.rentTime | defaultValue}}</el-descriptions-item>
|
||||
<el-descriptions-item label="型号">{{deviceData.model | defaultValue}}</el-descriptions-item>
|
||||
<el-descriptions-item label="型号功能" :span="2">
|
||||
<dict-tag :options="dict.type.sm_model_tag" :value="deviceData.modelTags" size="mini"/>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="限制充值时间">
|
||||
{{deviceData.limitRechargeTime | defaultValue}}
|
||||
<boolean-tag v-if="deviceData.limitRechargeTime != null" :value="!isLimitRecharge" size="small" true-text="限制充值中" false-text="已解封"/>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="限制充值原因">
|
||||
{{deviceData.limitRechargeReason | defaultValue}}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card">
|
||||
<el-descriptions :column="4" title="物联网信息">
|
||||
<el-descriptions-item label="在线状态">
|
||||
<dict-tag :options="dict.type.sm_device_online_status" :value="deviceData.onlineStatus" size="mini"/>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="最后在线时间">
|
||||
{{deviceData.lastOnlineStatus | defaultValue}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="开关状态">
|
||||
<el-tag :type="isOpen ? 'success' : 'danger'" size="mini">{{isOpen ? '已开启' : '已关闭'}}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="型号">{{deviceData.model | defaultValue}}</el-descriptions-item>
|
||||
<el-descriptions-item label="型号功能">
|
||||
<dict-tag :options="dict.type.sm_model_tag" :value="deviceData.modelTags" size="mini"/>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="设备租期">{{deviceData.rentTime | defaultValue}}</el-descriptions-item>
|
||||
<el-descriptions-item label="WIFI">{{deviceData.wifi | defaultValue}}</el-descriptions-item>
|
||||
<el-descriptions-item label="剩余时长">{{surplusTimeDesc(surplusTime).text}}</el-descriptions-item>
|
||||
<el-descriptions-item label="设备剩余时长/电量" :span="2">
|
||||
{{surplusTimeDesc(deviceData.remainTime).text}} / {{deviceData.surplusEle | defaultValue}} 度
|
||||
<span class="remark-text">最近更新时间：{{deviceData.lastPullTime}}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="设备总用电量">
|
||||
<el-descriptions-item label="电压">{{deviceData.voltage | money | defaultValue }} V</el-descriptions-item>
|
||||
<el-descriptions-item label="电流">{{deviceData.electricity | money | defaultValue }} A</el-descriptions-item>
|
||||
<el-descriptions-item label="功率">{{deviceData.realTimePower | money | defaultValue }} KW</el-descriptions-item>
|
||||
<el-descriptions-item label="总用电量">
|
||||
{{deviceData.totalElectriQuantity | money | defaultValue}} 度
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="限制充值时间">
|
||||
{{deviceData.limitRechargeTime | defaultValue}}
|
||||
<boolean-tag :value="!isLimitRecharge" size="small" true-text="限制充值中" false-text="已解封"/>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="限制充值原因">
|
||||
{{deviceData.limitRechargeReason | defaultValue}}
|
||||
<el-descriptions-item label="剩余时长">{{surplusTimeDesc(surplusTime).text}}</el-descriptions-item>
|
||||
<el-descriptions-item label="剩余时长/电量" :span="2">
|
||||
{{surplusTimeDesc(deviceData.remainTime).text}} / {{deviceData.surplusEle | defaultValue}} 度
|
||||
<span class="remark-text">最近更新时间：{{deviceData.lastPullTime}}</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
|
|
|
|||
|
|
@ -9,21 +9,16 @@
|
|||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="MAC" prop="mac">
|
||||
<el-form-item label="MAC" prop="likeAnyMac">
|
||||
<el-input
|
||||
v-model="queryParams.mac"
|
||||
placeholder="请输入设备Mac"
|
||||
v-model="queryParams.likeAnyMac"
|
||||
placeholder="请输入设备MAC-1或MAC-2"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="型号" prop="model">
|
||||
<el-input
|
||||
v-model="queryParams.model"
|
||||
placeholder="请输入型号"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
<el-form-item label="型号" prop="modelIds">
|
||||
<model-simple-select v-model="queryParams.modelIds" multiple @change="handleQuery" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备名称" prop="deviceName">
|
||||
<el-input
|
||||
|
|
@ -129,7 +124,7 @@
|
|||
|
||||
<el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="设备ID" align="center" prop="deviceId" width="100"/>
|
||||
<!-- <el-table-column label="设备ID" align="center" prop="deviceId" width="100"/>-->
|
||||
<el-table-column label="图片" align="center" prop="picture" width="100">
|
||||
<template slot-scope="scope">
|
||||
<image-preview v-if="isEmpty(scope.row.customPicture)" :src="scope.row.picture" :width="50" :height="50"/>
|
||||
|
|
@ -150,9 +145,12 @@
|
|||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备Mac" align="center" prop="mac" min-width="100">
|
||||
<el-table-column label="MAC-1" align="center" prop="mac" min-width="100">
|
||||
<device-link slot-scope="d" :text="d.row.mac" :id="d.row.deviceId"/>
|
||||
</el-table-column>
|
||||
<el-table-column label="MAC-2" align="center" prop="mac2" min-width="100">
|
||||
<device-link slot-scope="d" :text="d.row.mac2" :id="d.row.deviceId"/>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备SN" align="center" prop="deviceNo" min-width="100">
|
||||
<template slot-scope="d">
|
||||
<el-link type="danger" v-if="d.row.deviceNo == null" @click="handleBindSn(d.row)">点击绑定</el-link>
|
||||
|
|
@ -189,8 +187,9 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180"/>
|
||||
<el-table-column label="设备租期" align="center" prop="rentTime" width="180"/>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="100"/>
|
||||
<el-table-column label="到期时间" align="center" prop="rentTime" width="100"/>
|
||||
<el-table-column label="最后在线" align="center" prop="lastOnlineTime" width="100"/>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
|
|
@ -240,19 +239,22 @@
|
|||
<el-form ref="form" :model="form" :rules="rules" label-width="6em">
|
||||
<el-row :gutter="gutter">
|
||||
<form-col :span="span" label="自定义图片" prop="customPicture">
|
||||
<image-upload v-model="form.customPicture" :limit="1"/>
|
||||
<image-upload v-model="form.customPicture" :limit="1"/>
|
||||
</form-col>
|
||||
<form-col :span="span" label="型号" prop="modelId">
|
||||
<model-select v-model="form.modelId" :show-value.sync="form.model" @submit="onSubmitModel"/>
|
||||
<model-select v-model="form.modelId" :show-value.sync="form.model" @submit="onSubmitModel"/>
|
||||
</form-col>
|
||||
<form-col :span="span" label="设备MAC" prop="mac">
|
||||
<el-input v-model="form.mac" placeholder="请输入设备MAC" :disabled="isEdit"/>
|
||||
<form-col :span="span" label="MAC-1" prop="mac">
|
||||
<el-input v-model="form.mac" placeholder="请输入设备MAC-1" :disabled="isEdit"/>
|
||||
</form-col>
|
||||
<form-col :span="span" label="MAC-2" prop="mac2">
|
||||
<el-input v-model="form.mac2" placeholder="请输入设备MAC-2" :disabled="isEdit"/>
|
||||
</form-col>
|
||||
<form-col :span="span" label="设备SN" prop="deviceNo">
|
||||
<el-input v-model="form.deviceNo" placeholder="请输入设备SN" />
|
||||
<el-input v-model="form.deviceNo" placeholder="请输入设备SN" />
|
||||
</form-col>
|
||||
<form-col :span="span" label="设备名称" prop="deviceName">
|
||||
<el-input v-model="form.deviceName" placeholder="请输入设备名称" />
|
||||
<form-col :span="span * 2" label="设备名称" prop="deviceName">
|
||||
<el-input v-model="form.deviceName" placeholder="请输入设备名称" />
|
||||
</form-col>
|
||||
<form-col :span="span * 2" label="服务费" prop="serviceRate">
|
||||
<el-input v-model="form.serviceRate" placeholder="请输入服务费" type="number">
|
||||
|
|
@ -270,7 +272,7 @@
|
|||
</el-input>
|
||||
</form-col>
|
||||
<form-col :span="span * 2" label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
|
||||
</form-col>
|
||||
<form-col :span="10" label="限制充值至" prop="limitRechargeTime">
|
||||
<el-date-picker type="datetime" v-model="form.limitRechargeTime" placeholder="请选择限制充值时间" value-format="yyyy-MM-dd HH:mm:ss" :clearable="false"/>
|
||||
|
|
@ -347,11 +349,12 @@ import UserLink from '@/components/Business/SmUser/UserLink.vue'
|
|||
import StoreLink from '@/components/Business/Store/StoreLink.vue'
|
||||
import DeviceLink from '@/components/Business/Device/DeviceLink.vue'
|
||||
import { $serviceType, $view } from '@/utils/mixins'
|
||||
import ModelSimpleSelect from '@/components/Business/Model/ModelSimpleSelect.vue'
|
||||
|
||||
export default {
|
||||
name: "Device",
|
||||
mixins: [$serviceType, $view],
|
||||
components: { DeviceLink, StoreLink, UserLink, ModelDialog, UserInput, StoreInput, SnInput, QrCode, SmUserSelect, ModelSelect},
|
||||
components: { ModelSimpleSelect, DeviceLink, StoreLink, UserLink, ModelDialog, UserInput, StoreInput, SnInput, QrCode, SmUserSelect, ModelSelect},
|
||||
dicts: ['sm_device_online_status', 'sm_device_status', 'sm_device_outage_way','sm_device_notice_way', 'service_type', 'time_unit'],
|
||||
props: {
|
||||
query: {
|
||||
|
|
@ -398,7 +401,8 @@ export default {
|
|||
status: null,
|
||||
userName: null,
|
||||
tenantName: null,
|
||||
isArrears: null
|
||||
isArrears: null,
|
||||
modelIds: []
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
|
|
|
|||
|
|
@ -210,13 +210,16 @@
|
|||
<form-col :span="span" label="用户名称" prop="userName">
|
||||
<el-input v-model="form.userName" placeholder="请输入用户名称" :maxlength="20" ></el-input>
|
||||
</form-col>
|
||||
<form-col :span="span" label="用户昵称" prop="nickName">
|
||||
<el-input v-model="form.nickName" placeholder="请输入用户昵称" :maxlength="20" ></el-input>
|
||||
</form-col>
|
||||
<!-- <form-col :span="span" label="用户昵称" prop="nickName">-->
|
||||
<!-- <el-input v-model="form.nickName" placeholder="请输入用户昵称" :maxlength="20" ></el-input>-->
|
||||
<!-- </form-col>-->
|
||||
<form-col :span="span" label="手机号" prop="phonenumber">
|
||||
<el-input v-model="form.phonenumber" placeholder="请输入手机号" :maxlength="11" show-word-limit
|
||||
clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
|
||||
</form-col>
|
||||
<form-col :span="span" label="密码" prop="password">
|
||||
<el-input v-model="form.password" placeholder="请输入密码，为空则不修改" type="password" :maxlength="32" show-word-limit show-password/>
|
||||
</form-col>
|
||||
<form-col :span="span * 2" label="充值服务费" prop="serviceRate" label-width="7em">
|
||||
<el-input v-model="form.serviceRate" placeholder="请输入充值服务费" type="number">
|
||||
<template #prepend>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user