245 lines
7.5 KiB
Vue
245 lines
7.5 KiB
Vue
<template>
|
|
<!-- 资源列表 -->
|
|
<dt-card
|
|
class="resource-list card-light"
|
|
icon="iconfont icon-left_icon_remote"
|
|
title="可用资源"
|
|
:visible.sync="visibleLocale"
|
|
:scroll="false"
|
|
:showClose="false"
|
|
:showDivider="false"
|
|
>
|
|
<template v-slot:header>
|
|
<el-form
|
|
class="query-form"
|
|
:model="queryForm"
|
|
inline
|
|
size="small"
|
|
label-width="100px"
|
|
>
|
|
<!-- <el-form-item label="设备名称">
|
|
<el-input
|
|
v-model="queryForm.name"
|
|
placeholder="请输入设备名称"
|
|
clearable
|
|
></el-input>
|
|
</el-form-item> -->
|
|
<el-form-item label="">
|
|
<el-select v-model="queryForm.type" popper-class="select-light">
|
|
<el-option
|
|
v-for="item in deviceTypes"
|
|
:key="item.value"
|
|
:value="item.value"
|
|
:label="item.label"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<!-- <el-form-item class="query-btn">
|
|
<el-button>查询</el-button>
|
|
</el-form-item> -->
|
|
</el-form>
|
|
</template>
|
|
<template v-slot:command>
|
|
<el-button size="mini" icon="el-icon-plus" @click="addDevice"
|
|
>新增{{ deviceMap[queryForm.type] }}</el-button
|
|
>
|
|
</template>
|
|
<!-- <div class="resource-list__content">
|
|
<div
|
|
v-for="item in resourceList.data"
|
|
:key="item.id"
|
|
class="resource-item"
|
|
@click.stop="resourceClick(item)"
|
|
>
|
|
<span
|
|
class="device-status"
|
|
:class="item.status ? 'device-status__online' : ''"
|
|
></span>
|
|
<span class="icon"><i class="ri-dv-line"></i></span>
|
|
<span class="device-name">{{ item.name }}</span>
|
|
<span
|
|
class="battery"
|
|
:class="getDeviceBatteryClass(item.battery)"
|
|
style="opacity: 0"
|
|
><i class="ri-battery-saver-line"></i>{{ item.battery }}%</span
|
|
>
|
|
<span class="fly-height"
|
|
><i class="ri-expand-vertical-line"></i>{{ item.flyHeight }}m</span
|
|
>
|
|
<span class="device-location"
|
|
><i class="ri-map-pin-line"></i>{{ item.lon }},{{ item.lat }}</span
|
|
>
|
|
<i
|
|
class="iconfont icon-zhuizong device-lock"
|
|
@click.stop="flyToTarget(item.lon, item.lat, item.flyHeight)"
|
|
></i>
|
|
</div>
|
|
</div> -->
|
|
<el-table
|
|
v-if="isShowTable"
|
|
:data="deviceData"
|
|
stripe
|
|
style="width: 100%"
|
|
height="100%"
|
|
>
|
|
<template v-if="queryForm.type === 'payload'">
|
|
<el-table-column prop="name" label="雷达名称"> </el-table-column>
|
|
<el-table-column prop="type" label="雷达类型"> </el-table-column>
|
|
<el-table-column prop="ip" label="IP"> </el-table-column>
|
|
</template>
|
|
<template v-else>
|
|
<el-table-column prop="name" label="无人机名称"> </el-table-column>
|
|
<el-table-column prop="code" label="无人机码"> </el-table-column>
|
|
<el-table-column prop="ip" label="IP"> </el-table-column>
|
|
<el-table-column prop="createTime" label="创建时间"> </el-table-column>
|
|
</template>
|
|
|
|
<el-table-column label="操作" width="200">
|
|
<template slot-scope="scope">
|
|
<el-tooltip
|
|
class="item"
|
|
effect="light"
|
|
content="修改"
|
|
placement="top"
|
|
>
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-edit"
|
|
size="mini"
|
|
circle
|
|
@click="editDevice(scope.row)"
|
|
></el-button>
|
|
</el-tooltip>
|
|
<template v-if="queryForm.type === 'payload'">
|
|
<el-tooltip
|
|
class="item"
|
|
effect="light"
|
|
content="手动开机"
|
|
placement="top"
|
|
>
|
|
<el-button
|
|
icon="el-icon-switch-button"
|
|
size="mini"
|
|
circle
|
|
@click="handleRadar(scope.row, 1)"
|
|
></el-button>
|
|
</el-tooltip>
|
|
|
|
<el-tooltip
|
|
class="item"
|
|
effect="light"
|
|
content="结束所有任务"
|
|
placement="top"
|
|
>
|
|
<el-button
|
|
type="danger"
|
|
icon="el-icon-close"
|
|
size="mini"
|
|
circle
|
|
@click="handleRadar(scope.row, 2)"
|
|
></el-button>
|
|
</el-tooltip>
|
|
</template>
|
|
<el-tooltip
|
|
class="item"
|
|
effect="light"
|
|
content="删除"
|
|
placement="top"
|
|
>
|
|
<el-button
|
|
type="danger"
|
|
icon="el-icon-delete"
|
|
size="mini"
|
|
circle
|
|
@click="deleteDevice(scope.row)"
|
|
></el-button>
|
|
</el-tooltip>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<dt-dialog
|
|
class="dialog-light"
|
|
:title="device.title"
|
|
:visible.sync="device.visible"
|
|
top="20vh"
|
|
width="22%"
|
|
append-to-body
|
|
:close-on-click-modal="false"
|
|
>
|
|
<div>
|
|
<el-form
|
|
ref="form"
|
|
:model="device.form"
|
|
:rules="device.rules"
|
|
label-position="right"
|
|
label-width="110px"
|
|
class="change-password-form"
|
|
>
|
|
<template v-if="queryForm.type === 'uav'">
|
|
<el-form-item label="无人机名称" prop="name1">
|
|
<el-input
|
|
v-model="device.form.name1"
|
|
placeholder="请输入无人机名称"
|
|
clearable
|
|
size="mini"
|
|
></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="无人机码" prop="code">
|
|
<el-input
|
|
v-model="device.form.code"
|
|
placeholder="请输入无人机码"
|
|
clearable
|
|
size="mini"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="IP" prop="ip1">
|
|
<el-input
|
|
v-model="device.form.ip1"
|
|
placeholder="请输入无人机IP"
|
|
clearable
|
|
size="mini"
|
|
></el-input>
|
|
</el-form-item>
|
|
</template>
|
|
<template v-else>
|
|
<el-form-item label="雷达名称" prop="name2">
|
|
<el-input
|
|
v-model="device.form.name2"
|
|
placeholder="请输入雷达名称"
|
|
clearable
|
|
size="mini"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="雷达类型" prop="type">
|
|
<el-input
|
|
v-model="device.form.type"
|
|
placeholder="请输入雷达类型"
|
|
clearable
|
|
size="mini"
|
|
disabled
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="IP" prop="ip2">
|
|
<el-input
|
|
v-model="device.form.ip2"
|
|
placeholder="请输入雷达IP"
|
|
clearable
|
|
size="mini"
|
|
></el-input>
|
|
</el-form-item>
|
|
</template>
|
|
</el-form>
|
|
</div>
|
|
<div class="btns" slot="footer">
|
|
<el-button @click="close" size="mini">取 消</el-button>
|
|
<el-button type="primary" size="mini" @click="submitDevice"
|
|
>确 定</el-button
|
|
>
|
|
</div>
|
|
</dt-dialog>
|
|
</dt-card>
|
|
</template>
|
|
<script src="./index.js"></script>
|
|
<style src="./index.scss" lang="scss" scoped></style>
|