1129 lines
39 KiB
Vue
1129 lines
39 KiB
Vue
<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="userId" v-if="userName == 'admin'">
|
||
<el-select v-model="queryParams.userId" placeholder="选择商户" style="width: 120px;" clearable>
|
||
<el-option
|
||
v-for="item in merchantOptions"
|
||
:key="item.userId"
|
||
:label="item.deptName"
|
||
:value="item.deptId"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="MAC" prop="mac">
|
||
<el-input style="width: 120px"
|
||
v-model="queryParams.mac"
|
||
placeholder="请输入mac"
|
||
clearable
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="SN号" prop="sn">
|
||
<el-input style="width: 120px"
|
||
v-model="queryParams.sn"
|
||
placeholder="请输入SN号"
|
||
clearable
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="车牌号" prop="vehicleNum">
|
||
<el-input style="width: 120px"
|
||
v-model="queryParams.vehicleNum"
|
||
placeholder="请输入车牌号"
|
||
clearable
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="硬件版本" prop="hardwareVersion">
|
||
<el-input style="width: 120px"
|
||
v-model="queryParams.hardwareVersion"
|
||
placeholder="请输入硬件版本"
|
||
clearable
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="软件版本" prop="version">
|
||
<el-input style="width: 120px"
|
||
v-model="queryParams.version"
|
||
placeholder="请输入软件版本"
|
||
clearable
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="在线状态" prop="onlineStatus">
|
||
<el-select v-model="queryParams.onlineStatus" placeholder="请选择在线状态" style="width: 100px;" clearable>
|
||
<el-option
|
||
v-for="dict in dict.type.as_online_status"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="dict.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="状态" prop="status">
|
||
<el-select v-model="queryParams.status" placeholder="请选择状态" style="width: 100px;" clearable>
|
||
<el-option
|
||
v-for="dict in statusOptions"
|
||
:key="dict.dictValue"
|
||
:label="dict.dictLabel"
|
||
:value="dict.dictValue"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="锁状态" prop="status">
|
||
<el-select v-model="queryParams.lockStatus" placeholder="请选择锁状态" style="width: 100px;" clearable>
|
||
<el-option
|
||
v-for="dict in dict.type.et_device_lock_status"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="dict.value"
|
||
/>
|
||
</el-select>
|
||
</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="['system:device: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="['system:device:edit']"
|
||
>修改</el-button>
|
||
</el-col>
|
||
<!-- <el-col :span="1.5">-->
|
||
<!-- <el-button-->
|
||
<!-- type="success"-->
|
||
<!-- plain-->
|
||
<!-- icon="el-icon-unlock"-->
|
||
<!-- size="mini"-->
|
||
<!-- :disabled="multiple"-->
|
||
<!-- @click="oneClickOnline"-->
|
||
<!-- v-hasPermi="['system:device:edit']"-->
|
||
<!-- >一键解禁</el-button>-->
|
||
<!-- </el-col>-->
|
||
<!-- <el-col :span="1.5">-->
|
||
<!-- <el-button-->
|
||
<!-- type="info"-->
|
||
<!-- plain-->
|
||
<!-- icon="el-icon-lock"-->
|
||
<!-- size="mini"-->
|
||
<!-- :disabled="multiple"-->
|
||
<!-- @click="oneClickOffline"-->
|
||
<!-- v-hasPermi="['system:device:edit']"-->
|
||
<!-- >一键禁用</el-button>-->
|
||
<!-- </el-col>-->
|
||
<!-- <el-col :span="1.5">-->
|
||
<!-- <el-button-->
|
||
<!-- type="primary"-->
|
||
<!-- plain-->
|
||
<!-- icon="el-icon-upload"-->
|
||
<!-- size="mini"-->
|
||
<!-- :disabled="multiple"-->
|
||
<!-- @click="oneClickListing"-->
|
||
<!-- v-hasPermi="['system:device:edit']"-->
|
||
<!-- >一键出仓</el-button>-->
|
||
<!-- </el-col>-->
|
||
<!-- <el-col :span="1.5">-->
|
||
<!-- <el-button-->
|
||
<!-- type="info"-->
|
||
<!-- plain-->
|
||
<!-- icon="el-icon-download"-->
|
||
<!-- size="mini"-->
|
||
<!-- :disabled="multiple"-->
|
||
<!-- @click="oneClickWarehousing"-->
|
||
<!-- v-hasPermi="['system:device:edit']"-->
|
||
<!-- >一键入仓</el-button>-->
|
||
<!-- </el-col>-->
|
||
<!-- <el-col :span="1.5">-->
|
||
<!-- <el-button-->
|
||
<!-- type="primary"-->
|
||
<!-- plain-->
|
||
<!-- icon="el-icon-refresh"-->
|
||
<!-- size="mini"-->
|
||
<!-- :disabled="multiple"-->
|
||
<!-- @click="refresh"-->
|
||
<!-- v-hasPermi="['system:device: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="['system:device: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="['system:device:export']"
|
||
>导出</el-button>
|
||
</el-col>
|
||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
||
</el-row>
|
||
|
||
<el-table ref="tableSort" v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange" :default-sort="defaultSort"
|
||
@sort-change="handleSortChange"
|
||
class="el-table">
|
||
<el-table-column type="selection" width="55" align="center" />
|
||
<el-table-column label="商户" align="center" prop="userName" v-if="userName == 'admin' && columns[0].visible" />
|
||
<el-table-column label="运营区" align="center" prop="areaName" v-if="columns[1].visible"/>
|
||
<el-table-column label="MAC" align="center" prop="mac" v-if="columns[2].visible"/>
|
||
<el-table-column label="SN" align="center" prop="sn" sortable="custom" :sort-orders="['descending', 'ascending']" v-if="columns[3].visible"/>
|
||
<el-table-column label="车辆型号" align="center" prop="model" v-if="columns[4].visible"/>
|
||
<el-table-column label="车牌号" align="center" prop="vehicleNum" sortable="custom" :sort-orders="['descending', 'ascending']" v-if="columns[5].visible"/>
|
||
<el-table-column label="版本" align="center" prop="version" sortable="custom" :sort-orders="['descending', 'ascending']" v-if="columns[6].visible">
|
||
<template slot-scope="scope">
|
||
<span>{{ formatVersion(scope.row.hardwareVersionId)+' | '+scope.row.version }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="信号" align="center" prop="signalStrength" sortable="custom" :sort-orders="['descending', 'ascending']" v-if="columns[7].visible"/>
|
||
<el-table-column label="卫星" align="center" prop="satellites" sortable="custom" :sort-orders="['descending', 'ascending']" v-if="columns[8].visible"/>
|
||
<el-table-column label="钥匙" align="center" prop="quality" width="60" v-if="columns[9].visible"/>
|
||
<el-table-column label="定位时间" align="center" prop="lastLocationTime" v-if="columns[10].visible">
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.lastLocationTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="电压" align="center" prop="voltage" :formatter="formatVoltage" v-if="columns[11].visible"/>
|
||
<el-table-column label="电量" align="center" prop="remainingPower" sortable="custom" :sort-orders="['descending', 'ascending']" :formatter="formatPower" v-if="columns[12].visible"/>
|
||
<el-table-column label="车辆状态" align="center" prop="status" v-if="columns[13].visible">
|
||
<template slot-scope="scope">
|
||
<dict-tag :options="dict.type.as_device_status" :value="scope.row.status"/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="锁" align="center" prop="status" width="60" v-if="columns[14].visible">
|
||
<template slot-scope="scope">
|
||
<dict-tag :options="dict.type.et_device_lock_status" :value="scope.row.lockStatus"/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="网络" align="center" prop="onlineStatus" width="60" v-if="columns[15].visible">
|
||
<template slot-scope="scope">
|
||
<dict-tag :options="dict.type.as_online_status" :value="scope.row.onlineStatus"/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="二维码" align="center" v-if="columns[16].visible">
|
||
<template slot-scope="d">
|
||
<el-popover
|
||
placement="top"
|
||
width="180"
|
||
trigger="hover">
|
||
<div class="qr-code-box">
|
||
<qr-code :text="d.row.qrText" :width="150" :height="150" />
|
||
</div>
|
||
<el-button slot="reference" type="text" icon="el-icon-picture">查看</el-button>
|
||
</el-popover>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[17].visible">
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="320" align="center" class-name="small-padding fixed-width">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-view"
|
||
@click="handleView(scope.row)"
|
||
v-hasPermi="['system:fault:query']"
|
||
>详情</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-edit"
|
||
@click="handleUpdate(scope.row)"
|
||
v-hasPermi="['system:device:edit']"
|
||
>修改</el-button>
|
||
<!-- <el-button-->
|
||
<!-- size="mini"-->
|
||
<!-- type="text"-->
|
||
<!-- icon="el-icon-upload"-->
|
||
<!-- @click="handleListing(scope.row)"-->
|
||
<!-- v-hasPermi="['system:fault:edit']"-->
|
||
<!-- >{{ scope.row.status === '0' ? '出仓' : '回仓' }}</el-button>-->
|
||
<el-button v-if="scope.row.lockStatus == '0'"
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-unlock"
|
||
@click="handleUnlocking(scope.row)"
|
||
v-hasPermi="['system:device:unlocking']"
|
||
>开锁</el-button>
|
||
<el-button v-if="scope.row.lockStatus == '1'"
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-lock"
|
||
@click="handleLock(scope.row)"
|
||
v-hasPermi="['system:device:unlocking']"
|
||
>关锁</el-button>
|
||
<el-button v-if="scope.row.status!= '0'"
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-check"
|
||
@click="handleOnline(scope.row)"
|
||
v-hasPermi="['system:device:online']"
|
||
>{{ scope.row.status === '8' ? '解禁' : '禁用' }}</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-bell"
|
||
@click="ring(scope.row)"
|
||
v-hasPermi="['system:device:ring']"
|
||
>响铃</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-unlock"
|
||
@click="untie(scope.row)"
|
||
v-hasPermi="['system:device:ring']"
|
||
>解绑</el-button>
|
||
<!-- <el-button-->
|
||
<!-- size="mini"-->
|
||
<!-- type="text"-->
|
||
<!-- icon="el-icon-unlock"-->
|
||
<!-- @click="seatCushionLock(scope.row)"-->
|
||
<!-- v-hasPermi="['system:device:ring']"-->
|
||
<!-- >坐垫锁</el-button>-->
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-document"
|
||
@click="toLog(scope.row)"
|
||
v-hasPermi="['system:device:log']"
|
||
>日志</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-refresh"
|
||
@click="reboot(scope.row)"
|
||
v-hasPermi="['system:device:reboot']"
|
||
>重启</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-refresh"
|
||
@click="refresh(scope.row)"
|
||
v-hasPermi="['system:device:refresh']"
|
||
>更新</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-delete"
|
||
@click="handleDelete(scope.row)"
|
||
v-hasPermi="['system:device: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="1000px" append-to-body>
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||
<el-col :span="8">
|
||
<el-form-item label="MAC" prop="mac">
|
||
<el-input v-model="form.mac" placeholder="请输入设备MAC" :disabled="title=='修改设备'" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="SN" prop="sn">
|
||
<el-input v-model="form.sn" placeholder="请输入SN" :disabled="title=='修改设备' && userName != 'admin'"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="车牌号" prop="vehicleNum">
|
||
<el-input v-model="form.vehicleNum" placeholder="请输入车牌号" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="商户" prop="operator">
|
||
<el-select v-model="form.deptId" clearable placeholder="请选择商户">
|
||
<el-option
|
||
v-for="item in deptOptions"
|
||
:key="item.deptId"
|
||
:label="item.deptName"
|
||
:value="item.deptId"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="车辆型号" prop="modelId" >
|
||
<el-select v-model="form.modelId" clearable placeholder="请选择车辆型号">
|
||
<el-option
|
||
v-for="item in modelOptions"
|
||
:key="item.modelId"
|
||
:label="item.model"
|
||
:value="item.modelId"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="设备名称" prop="deviceName">
|
||
<el-input v-model="form.deviceName" placeholder="请输入设备名称" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="硬件版本" prop="deviceName" v-if="hardwareVersionOptions.length > 0">
|
||
<el-select v-model="form.hardwareVersionId" clearable placeholder="请选择硬件版本">
|
||
<el-option
|
||
v-for="item in hardwareVersionOptions"
|
||
:key="item.id"
|
||
:label="item.version"
|
||
:value="item.id"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<div v-if="title=='修改设备'">
|
||
<el-col :span="8">
|
||
<el-form-item label="剩余电量" prop="remainingPower">
|
||
<el-input v-model="form.remainingPower" placeholder="请输入剩余电量" disabled/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="电压" prop="voltage">
|
||
<el-input v-model="form.voltage" placeholder="请输入剩余电量" disabled/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="经度" prop="longitude">
|
||
<el-input v-model="form.longitude" placeholder="请输入经度" disabled/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="纬度" prop="latitude">
|
||
<el-input v-model="form.latitude" placeholder="请输入纬度" disabled/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</div>
|
||
<el-col :span="24">
|
||
<el-form-item label="硬件版本说明：" label-width="200">
|
||
<span style="color: red;font-weight: 600">
|
||
{{versionDescription}}
|
||
</span>
|
||
</el-form-item>
|
||
</el-col>
|
||
</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>
|
||
|
||
<!-- 设备详情对话框 -->
|
||
<el-dialog style="font-weight: bold;" title="设备详情" :close-on-click-modal="true" :visible.sync="open2" width="1300px" append-to-body>
|
||
<el-form ref="form" :model="form" label-width="100px" size="mini">
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="设备mac：">{{ form.mac }}</el-form-item>
|
||
<el-form-item label="设备SN：">{{ form.sn }}</el-form-item>
|
||
<el-form-item label="车辆状态：" style="color: #12d2ac;font-weight: 700">{{ form.statusStr }}</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="分区：" style="color:#4c97e7;font-weight: 700">{{ form.areaName }}</el-form-item>
|
||
<el-form-item label="剩余电量：" >{{ form.remainingPower }}%</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="二维码：">
|
||
<template>
|
||
<el-popover
|
||
placement="top"
|
||
width="180"
|
||
trigger="hover">
|
||
<div class="qr-code-box">
|
||
<qr-code :text="form.qrText" :width="150" :height="150" />
|
||
</div>
|
||
<el-button slot="reference" type="text" icon="el-icon-picture">查看</el-button>
|
||
</el-popover>
|
||
</template>
|
||
</el-form-item>
|
||
<el-form-item label="网络状态：" style="color: #ffcc00;font-weight: 700">{{ form.onlineStatus == 1 ? '在线' : '离线' }}</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<h2 style="font-weight: bold;font-size: 18px;padding: 0;margin: 0">定位更新</h2>
|
||
<el-col :span="6">
|
||
<el-form-item label="经度：">{{ form.longitude }}</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="纬度：">{{ form.latitude }}</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8" >
|
||
<el-form-item label="最后更新时间：" label-width="120">{{ form.lastLocationTime }}</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4" v-if="form.gps === '0'">
|
||
<span style="color: red;font-weight: 700">
|
||
当前无gps信号
|
||
</span>
|
||
</el-col>
|
||
<!-- <el-col :span="24">-->
|
||
<!-- <el-row v-if="selected != null" style="margin-bottom: 0.5em" >-->
|
||
<!-- 当前选择： {{selected.address}}, {{selected.lng}}, {{selected.lat}}-->
|
||
<!-- </el-row>-->
|
||
<!-- <location-map-->
|
||
<!-- v-if="showPlaceSearchMap"-->
|
||
<!-- ref="map"-->
|
||
<!-- height="400px"-->
|
||
<!-- :key="key"-->
|
||
<!-- @select-changed="onSelectChange"-->
|
||
<!-- @map-geo="onMapGeo"-->
|
||
<!-- :init-lat="form.latitude"-->
|
||
<!-- :init-lng="form.longitude"-->
|
||
<!-- :status="form.status"-->
|
||
<!-- :online-status="form.onlineStatus"-->
|
||
<!-- :device-sn="form.sn"-->
|
||
<!-- />-->
|
||
<!-- </el-col>-->
|
||
</el-row>
|
||
<!-- <el-row>-->
|
||
<!-- <div class="nav-container">-->
|
||
<!-- <el-menu :default-active="activeIndex" class="el-menu-demo nav-menu" mode="horizontal" @select="handleSelect">-->
|
||
<!-- <el-menu-item index="1" >使用记录</el-menu-item>-->
|
||
<!-- <el-menu-item index="2" >维修记录</el-menu-item>-->
|
||
<!-- <el-menu-item index="3" >换电记录</el-menu-item>-->
|
||
<!-- </el-menu>-->
|
||
<!-- <div class="line"></div>-->
|
||
<!-- </div>-->
|
||
<!-- </el-row>-->
|
||
<!-- <el-row>-->
|
||
<!-- <order-record v-show="activeIndex == '1'" :sn="form.sn"/>-->
|
||
<!-- <repair-record v-show="activeIndex == '2'" :sn="form.sn"/>-->
|
||
<!-- <replacement-record v-show="activeIndex == '3'" :sn="form.sn"/>-->
|
||
<!-- </el-row>-->
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="cancel2">关 闭</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
listDevice,
|
||
getDevice,
|
||
delDevice,
|
||
addDevice,
|
||
updateDevice,
|
||
handleLock,
|
||
handleUnlocking,
|
||
ring,
|
||
oneClickOnline,
|
||
oneClickOffline,
|
||
reboot,
|
||
oneClickListing,
|
||
oneClickWarehousing,
|
||
seatCushionLock, refreshDevice, untie
|
||
} from '@/api/system/device';
|
||
import QrCode from "@/components/QrCode/index.vue";
|
||
// import Map from "@/components/Map";
|
||
// import OrderRecord from "@/views/system/device/components/orderRecord.vue";
|
||
// import RepairRecord from "@/views/system/device/components/repairRecord.vue";
|
||
// import ReplacementRecord from "@/views/system/device/components/replacementRecord.vue";
|
||
// import PlaceSearchDialog from '@/components/Map/location/PlaceSearchDialog';
|
||
import { parseTime } from '../../../utils/ruoyi';
|
||
// import LocationMap from '@/components/Map/location/LocationMap.vue';
|
||
// import { getModel, listModel } from '@/api/system/model'
|
||
|
||
// import { listArea, selectAreaListByDeptId, selectDeptByAreaId } from '@/api/system/area'
|
||
// import { listDept2 } from '@/api/system/dept'
|
||
import { getHardwareVersion, listHardwareVersion } from '@/api/system/hardwareVersion'
|
||
import Treeselect from '@riophae/vue-treeselect'
|
||
// import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||
|
||
export default {
|
||
name: "Device",
|
||
dicts: ['as_online_status', 'as_device_status','et_device_lock_status'],
|
||
components: {
|
||
QrCode
|
||
},
|
||
props: {
|
||
initLng: {
|
||
type: Number,
|
||
default: 120.356031
|
||
},
|
||
initLat: {
|
||
type: Number,
|
||
default: 26.94088
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
userName: undefined,
|
||
activeIndex: '1',
|
||
// 遮罩层
|
||
loading: true,
|
||
loading2: true,
|
||
// 选中数组
|
||
ids: [],
|
||
deptOptions: [],
|
||
key: 0,
|
||
// 非单个禁用
|
||
single: true,
|
||
versionDescription: '',
|
||
// 非多个禁用
|
||
multiple: true,
|
||
statusOptions: [],
|
||
// 显示搜索条件
|
||
showSearch: true,
|
||
// 总条数
|
||
total: 0,
|
||
// 默认排序
|
||
defaultSort: {prop: 'sn', order: 'ascending'},
|
||
// 设备表格数据
|
||
deviceList: [],
|
||
// 弹出层标题
|
||
title: "",
|
||
// 是否显示弹出层
|
||
open: false,
|
||
// 详情窗口
|
||
open2: false,
|
||
// 设备型号下拉框
|
||
modelOptions: [],
|
||
hardwareVersionOptions: [],
|
||
// 运营区下拉框
|
||
areaOptions: [],
|
||
// 通过key重新渲染area-map组件
|
||
// key: 0,
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
deviceName: null,
|
||
mac: null,
|
||
sn: null,
|
||
onlineStatus: null,
|
||
status: null,
|
||
version: null,
|
||
hardwareVersion: null,
|
||
},
|
||
// 列信息
|
||
columns: [
|
||
{ key: 0, label: `商户`, visible: true },
|
||
{ key: 1, label: `运营区`, visible: true },
|
||
{ key: 2, label: `MAC`, visible: true },
|
||
{ key: 3, label: `SN`, visible: true },
|
||
{ key: 4, label: `车辆型号`, visible: true },
|
||
{ key: 5, label: `车牌号`, visible: true },
|
||
{ key: 6, label: `版本`, visible: true },
|
||
{ key: 7, label: `信号`, visible: true },
|
||
{ key: 8, label: `卫星`, visible: true },
|
||
{ key: 9, label: `钥匙`, visible: true },
|
||
{ key: 10, label: `定位时间`, visible: true },
|
||
{ key: 11, label: `电压`, visible: true },
|
||
{ key: 12, label: `电量`, visible: true },
|
||
{ key: 13, label: `车辆状态`, visible: true },
|
||
{ key: 14, label: `锁`, visible: true },
|
||
{ key: 15, label: `网络`, visible: true },
|
||
{ key: 16, label: `二维码`, visible: true },
|
||
{ key: 17, label: `创建时间`, visible: false },
|
||
],
|
||
showPlaceSearchMap: false,
|
||
selected: null,
|
||
// 表单参数
|
||
form: {},
|
||
// 表单校验
|
||
rules: {
|
||
// modelId: [
|
||
// { required: true, message: "型号不能为空", trigger: "blur" }
|
||
// ],
|
||
sn: [
|
||
{ required: true, message: "SN不能为空", trigger: "blur" }
|
||
],
|
||
mac: [
|
||
{ required: true, message: "MAC不能为空", trigger: "blur" }
|
||
],
|
||
}
|
||
};
|
||
},
|
||
mounted() { //添加监听滚动条事件
|
||
window.addEventListener('scroll', this.handleScroll, true)
|
||
},
|
||
destroyed() { //移除（跳转页面后移除）
|
||
window.removeEventListener('scroll', this.handleScroll, true)
|
||
},
|
||
created() {
|
||
if (this.userName === "admin") {
|
||
listHardwareVersion(this.queryParams).then(response => {
|
||
this.hardwareVersionOptions = response.rows;
|
||
this.loading2 = false;
|
||
});
|
||
}
|
||
console.log("当前用户信息：",this.$store.state.user.name)
|
||
const sn = this.$route.params && this.$route.params.sn;
|
||
const vehicleNum = this.$route.params && this.$route.params.vehicleNum;
|
||
console.log("sn------",sn)
|
||
console.log("vehicleNum------",vehicleNum)
|
||
// this.$eventBus.$on('close-all-dialogs', this.closeDialog);
|
||
if (sn != null) {
|
||
this.queryParams.sn = sn;
|
||
}
|
||
if (vehicleNum != null) {
|
||
this.queryParams.vehicleNum = vehicleNum;
|
||
}
|
||
this.getDicts("as_device_status").then(response => {
|
||
// console.log("response.data------",response.data)
|
||
let options = response.data;
|
||
let mergedObj = { dictValue: '34', dictLabel: '使用中' };
|
||
options = options.filter(option => {
|
||
return option.dictValue !== '3' && option.dictValue !== '4';
|
||
});
|
||
options.splice(4, 0, mergedObj);
|
||
this.statusOptions = options;
|
||
// console.log("statusOptions------",this.statusOptions)
|
||
});
|
||
this.userName = this.$store.state.user.name;
|
||
this.getList();
|
||
// if(this.userName === 'admin'){
|
||
// listDept2({status: '0',pageNum:1,pageSize:999 }).then(response => {
|
||
// this.deptOptions = response.rows;
|
||
// });
|
||
// listArea(this.queryParams).then(response => {
|
||
// this.areaOptions = response.rows;
|
||
// });
|
||
// }
|
||
},
|
||
watch: {
|
||
},
|
||
beforeDestroy() {
|
||
// this.$eventBus.$off('close-all-dialogs', this.closeDialog);
|
||
},
|
||
methods: {
|
||
untie(row){
|
||
const deviceIds = row.deviceId;
|
||
this.$modal.confirm('是否确认解绑？').then(function() {
|
||
return untie(deviceIds);
|
||
}).then(() => {
|
||
this.getList();
|
||
this.$modal.msgSuccess("解绑成功");
|
||
}).catch(() => {});
|
||
},
|
||
handleUnlocking(row) {
|
||
console.log("handleUnlocking====================")
|
||
this.reset();
|
||
const deviceId = row.deviceId || this.ids;
|
||
getDevice(deviceId).then((response) => {
|
||
let form1 = response.data;
|
||
this.$modal
|
||
.confirm("是否确认开锁吗？")
|
||
.then(function () {
|
||
return handleUnlocking(form1);
|
||
})
|
||
.then(() => {
|
||
this.getList();
|
||
this.$modal.msgSuccess("操作成功");
|
||
})
|
||
.catch(() => {});
|
||
});
|
||
},
|
||
handleLock(row) {
|
||
this.reset();
|
||
const deviceId = row.deviceId || this.ids;
|
||
getDevice(deviceId).then((response) => {
|
||
let form1 = response.data;
|
||
this.$modal
|
||
.confirm("是否确认关锁吗？")
|
||
.then(function () {
|
||
return handleLock(form1);
|
||
})
|
||
.then(() => {
|
||
this.getList();
|
||
this.$modal.msgSuccess("操作成功");
|
||
})
|
||
.catch(() => {});
|
||
});
|
||
},
|
||
handleScroll() {
|
||
let scrollTop = window.scrollY;
|
||
let heightTop = this.$refs['tableSort'].$parent.$parent.$el.offsetTop; // 距离顶部高度
|
||
const headerWrapper = document.querySelector('.el-table__header-wrapper');
|
||
// console.log("scrollTop------",scrollTop)
|
||
// console.log("heightTop------",heightTop)
|
||
if (scrollTop >= (heightTop+ 160)) { // 表头到达页面顶部固定表头
|
||
let top = scrollTop - (heightTop + 160);
|
||
// console.log("top------",top)
|
||
headerWrapper.style.position = 'relative';
|
||
headerWrapper.style.zIndex = '500';
|
||
headerWrapper.style.top = `${top}px`;
|
||
} else if (scrollTop === 0) { // 表格横向
|
||
headerWrapper.style.position = 'relative';
|
||
headerWrapper.style.zIndex = '500';
|
||
} else {
|
||
headerWrapper.style.position = '';
|
||
headerWrapper.style.top = '';
|
||
headerWrapper.style.zIndex = '';
|
||
}
|
||
},
|
||
formatVersion(versionId){
|
||
if (versionId && this.hardwareVersionOptions.length > 0) {
|
||
const versionItem = this.hardwareVersionOptions.find(item => item.id === versionId);
|
||
if (versionItem) {
|
||
return versionItem.version;
|
||
}
|
||
}
|
||
return "";
|
||
},
|
||
selectHardwareVersion(hardwareVersionId){
|
||
getHardwareVersion(hardwareVersionId).then(response => {
|
||
this.versionDescription =response.data.instructions;
|
||
});
|
||
},
|
||
closeDialog() {
|
||
this.open2 = false;
|
||
},
|
||
/** 排序触发事件 */
|
||
handleSortChange(column, prop, order) {
|
||
this.queryParams.orderByColumn = column.prop;
|
||
this.queryParams.isAsc = column.order;
|
||
this.getList();
|
||
},
|
||
formatVoltage(row){
|
||
if(row == undefined || row.voltage == null){
|
||
return "";
|
||
}
|
||
return row.voltage + 'V';
|
||
},
|
||
formatPower(row){
|
||
if(row == undefined || row.remainingPower == null){
|
||
return "";
|
||
}
|
||
return row.remainingPower + '%';
|
||
},
|
||
oneClickOnline(row){
|
||
const deviceIds = row.deviceId || this.ids;
|
||
this.$modal.confirm('确认一键解禁？').then(function() {
|
||
return oneClickOnline(deviceIds);
|
||
}).then(() => {
|
||
this.getList();
|
||
this.$modal.msgSuccess("操作成功");
|
||
}).catch(() => {});
|
||
},
|
||
oneClickOffline(row){
|
||
const deviceIds = row.deviceId || this.ids;
|
||
this.$modal.confirm('确认一键禁用？').then(function() {
|
||
return oneClickOffline(deviceIds);
|
||
}).then(() => {
|
||
this.getList();
|
||
this.$modal.msgSuccess("操作成功");
|
||
}).catch(() => {});
|
||
},
|
||
/** 一键出仓*/
|
||
oneClickListing(row){
|
||
const deviceIds = row.deviceId || this.ids;
|
||
this.$modal.confirm('确认一键出仓？').then(function() {
|
||
return oneClickListing(deviceIds);
|
||
}).then(() => {
|
||
this.getList();
|
||
this.$modal.msgSuccess("操作成功");
|
||
}).catch(() => {});
|
||
},
|
||
/** 更新*/
|
||
refresh(row){
|
||
const deviceIds = row.deviceId || this.ids;
|
||
refreshDevice(deviceIds).then(response => {
|
||
this.getList();
|
||
this.$modal.msgSuccess("操作成功");
|
||
});
|
||
},
|
||
/** 一键入仓*/
|
||
oneClickWarehousing(row){
|
||
const deviceIds = row.deviceId || this.ids;
|
||
this.$modal.confirm('确认一键入仓？').then(function() {
|
||
return oneClickWarehousing(deviceIds);
|
||
}).then(() => {
|
||
this.getList();
|
||
this.$modal.msgSuccess("操作成功");
|
||
}).catch(() => {});
|
||
},
|
||
onMapGeo(data, lat, lng) {
|
||
console.log("onMapGeo", data)
|
||
let component = data.regeocode.addressComponent;
|
||
this.selected = {
|
||
address: data.regeocode.formattedAddress,
|
||
lng: lat,
|
||
lat: lng,
|
||
province: component.province,
|
||
city: component.city === '' ? '市辖区' : component.city,
|
||
county: component.district,
|
||
name: component.street + component.streetNumber
|
||
}
|
||
},
|
||
onSelectChange(addr) {
|
||
console.log("onSelectChange", addr)
|
||
let data = addr.selected.data;
|
||
this.selected = {
|
||
address: data.pname + (data.cityname === data.pname ? '' : data.cityname) + data.adname + data.address + data.name,
|
||
lng: data.location.lng,
|
||
lat: data.location.lat,
|
||
province: data.pname,
|
||
city: data.cityname === data.pname ? '市辖区' : data.cityname,
|
||
county: data.adname,
|
||
name: data.address + data.name,
|
||
}
|
||
},
|
||
parseTime,
|
||
// onSubmitAddress(addr) {
|
||
// this.form.address = addr.name;
|
||
// this.form.lat = addr.lat;
|
||
// this.form.lng = addr.lng;
|
||
// this.form.province = addr.province;
|
||
// this.form.city = addr.city;
|
||
// this.form.county = addr.county;
|
||
// this.form.specificAddress = addr.name;
|
||
// },
|
||
handleSelect(key, keyPath) {
|
||
this.activeIndex = key;
|
||
console.log(key, keyPath);
|
||
},
|
||
/** 查询设备列表 */
|
||
getList() {
|
||
this.loading = true;
|
||
listDevice(this.queryParams).then(response => {
|
||
this.deviceList = response.rows;
|
||
this.total = response.total;
|
||
this.loading = false;
|
||
});
|
||
},
|
||
// 取消按钮
|
||
cancel() {
|
||
this.open = false;
|
||
this.reset();
|
||
},
|
||
// 取消按钮
|
||
cancel2() {
|
||
this.open2 = false;
|
||
},
|
||
// 表单重置
|
||
reset() {
|
||
this.form = {
|
||
deviceId: null,
|
||
picture: null,
|
||
deviceName: null,
|
||
mac: null,
|
||
deptId: null,
|
||
modelId: null,
|
||
activationTime: null,
|
||
onlineStatus: null,
|
||
createBy: null,
|
||
createTime: null,
|
||
updateBy: null,
|
||
updateTime: null,
|
||
remark: null,
|
||
status: null,
|
||
location: null,
|
||
remainingPower: null,
|
||
qrcode: null,
|
||
longitude: null,
|
||
latitude: null
|
||
};
|
||
this.resetForm("form");
|
||
// if(this.userName === 'admin'){
|
||
// listDept2({status: '0',pageNum:1,pageSize:999 }).then(response => {
|
||
// this.deptOptions = response.rows;
|
||
// });
|
||
// }
|
||
// listModel(this.queryParams).then(response => {
|
||
// this.modelOptions = response.rows;
|
||
// });
|
||
// listArea(this.queryParams).then(response => {
|
||
// this.areaOptions = response.rows;
|
||
// });
|
||
},
|
||
reset2() {
|
||
console.log(11111)
|
||
this.form.deptId = null;
|
||
this.form.modelId = null;
|
||
// if(this.userName === 'admin'){
|
||
// listDept2({status: '0',pageNum:1,pageSize:999 }).then(response => {
|
||
// this.deptOptions = response.rows;
|
||
// });
|
||
// }
|
||
// listModel(this.queryParams).then(response => {
|
||
// this.modelOptions = response.rows;
|
||
// });
|
||
// listArea(this.queryParams).then(response => {
|
||
// this.areaOptions = response.rows;
|
||
// });
|
||
},
|
||
/** 搜索按钮操作 */
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1;
|
||
this.getList();
|
||
},
|
||
/** 重置按钮操作 */
|
||
resetQuery() {
|
||
this.resetForm("queryForm");
|
||
this.handleQuery();
|
||
},
|
||
// 多选框选中数据
|
||
handleSelectionChange(selection) {
|
||
this.ids = selection.map(item => item.deviceId)
|
||
this.single = selection.length!==1
|
||
this.multiple = !selection.length
|
||
},
|
||
/** 新增按钮操作 */
|
||
handleAdd() {
|
||
this.reset();
|
||
this.open = true;
|
||
this.title = "添加设备";
|
||
},
|
||
/** 详情按钮 */
|
||
handleView(row) {
|
||
this.open2 = true;
|
||
this.form = row;
|
||
this.showPlaceSearchMap = true;
|
||
this.key++;
|
||
},
|
||
/** 修改按钮操作 */
|
||
handleUpdate(row) {
|
||
this.reset();
|
||
const deviceId = row.deviceId || this.ids
|
||
getDevice(deviceId).then(response => {
|
||
this.form = response.data;
|
||
this.open = true;
|
||
this.title = "修改设备";
|
||
});
|
||
},
|
||
toLog(row){
|
||
this.$router.push(`/system/commandLog/index/${row.sn}`);
|
||
},
|
||
ring(row) {
|
||
this.reset();
|
||
const deviceId = row.deviceId || this.ids
|
||
getDevice(deviceId).then(response => {
|
||
let form1 = response.data;
|
||
ring(form1).then(response => {
|
||
this.getList();
|
||
this.$modal.msgSuccess("操作成功");
|
||
});
|
||
});
|
||
},
|
||
seatCushionLock(row) {
|
||
this.reset();
|
||
const deviceId = row.deviceId || this.ids
|
||
getDevice(deviceId).then(response => {
|
||
let form1 = response.data;
|
||
seatCushionLock(form1).then(response => {
|
||
this.getList();
|
||
this.$modal.msgSuccess("操作成功");
|
||
});
|
||
});
|
||
},
|
||
reboot(row) {
|
||
this.reset();
|
||
const deviceId = row.deviceId || this.ids
|
||
getDevice(deviceId).then(response => {
|
||
let form1 = response.data;
|
||
reboot(form1).then(response => {
|
||
this.getList();
|
||
this.$modal.msgSuccess("操作成功");
|
||
});
|
||
});
|
||
},
|
||
/** 提交按钮 */
|
||
submitForm() {
|
||
this.$refs["form"].validate(valid => {
|
||
if (valid) {
|
||
if (this.form.deviceId != null) {
|
||
updateDevice(this.form).then(response => {
|
||
this.$modal.msgSuccess("修改成功");
|
||
this.open = false;
|
||
this.getList();
|
||
});
|
||
} else {
|
||
addDevice(this.form).then(response => {
|
||
this.$modal.msgSuccess("新增成功");
|
||
this.open = false;
|
||
this.getList();
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
/** 删除按钮操作 */
|
||
handleDelete(row) {
|
||
const deviceIds = row.deviceId || this.ids;
|
||
this.$modal.confirm('是否确认删除设备编号为"' + deviceIds + '"的数据项？').then(function() {
|
||
return delDevice(deviceIds);
|
||
}).then(() => {
|
||
this.getList();
|
||
this.$modal.msgSuccess("删除成功");
|
||
}).catch(() => {});
|
||
},
|
||
/** 导出按钮操作 */
|
||
handleExport() {
|
||
this.download('system/device/export', {
|
||
...this.queryParams
|
||
}, `device_${new Date().getTime()}.xlsx`)
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.el-select {
|
||
.el-input__inner{
|
||
color: red;
|
||
}
|
||
|
||
}
|
||
.el-input{
|
||
.el-input__inner{
|
||
color: red;
|
||
}
|
||
}
|
||
.nav-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.nav-menu {
|
||
/* 如果需要清除默认样式 */
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
.el-dialog__body{
|
||
padding: 10px 20px;
|
||
}
|
||
.el-dialog:not(.is-fullscreen) {
|
||
margin-top: 1vh !important;
|
||
}
|
||
.el-dialog__header {
|
||
padding: 10px 20px !important;
|
||
}
|
||
</style>
|