skyeyesystem/frontend/Skyeye-sys-ui/src/views/home/components/device1-manage/index.vue

<template>
  <!--  资源列表  -->
  <dt-card
    class="resource-list card-light"
    icon="iconfont icon-left_icon_remote"
    :title="$t('device1Manage.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"
        >{{ $t('device1Manage.add') }}{{ 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="$t('device1Manage.radarName')">
        </el-table-column>
        <el-table-column prop="type" :label="$t('device1Manage.radarType')">
        </el-table-column>
        <el-table-column prop="ip" :label="$t('device1Manage.ip')">
        </el-table-column>
      </template>
      <template v-else>
        <el-table-column prop="name" :label="$t('device1Manage.uavName')">
        </el-table-column>
        <el-table-column prop="code" :label="$t('device1Manage.uavCode')">
        </el-table-column>
        <el-table-column prop="ip" :label="$t('device1Manage.ip')">
        </el-table-column>
        <el-table-column
          prop="createTime"
          :label="$t('device1Manage.createTime')"
        >
        </el-table-column>
      </template>

      <el-table-column :label="$t('device1Manage.operation')" width="200">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="light"
            :content="$t('device1Manage.edit')"
            placement="top"
            :hide-after="1000"
          >
            <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="$t('device1Manage.manualPowerOn')"
              placement="top"
              :hide-after="1000"
            >
              <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="$t('device1Manage.endAllTasks')"
              placement="top"
            >
              <el-button
                type="danger"
                icon="el-icon-close"
                size="mini"
                circle
                :hide-after="1000"
                @click="handleRadar(scope.row, 2)"
              ></el-button>
            </el-tooltip>
          </template> -->
          <el-tooltip
            class="item"
            effect="light"
            :content="$t('device1Manage.delete')"
            placement="top"
            :hide-after="1000"
          >
            <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="rules"
          label-position="right"
          label-width="110px"
          class="change-password-form"
        >
          <template v-if="queryForm.type === 'uav'">
            <el-form-item :label="$t('device1Manage.uavName')" prop="name1">
              <el-input
                v-model="device.form.name1"
                :placeholder="$t('device1Manage.uavNamePlaceholder')"
                clearable
                size="mini"
              ></el-input>
            </el-form-item>

            <el-form-item :label="$t('device1Manage.uavCode')" prop="code">
              <el-input
                v-model="device.form.code"
                :placeholder="$t('device1Manage.uavCodePlaceholder')"
                clearable
                size="mini"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('device1Manage.ip')" prop="ip1">
              <el-input
                v-model="device.form.ip1"
                :placeholder="$t('device1Manage.ipPlaceholder')"
                clearable
                size="mini"
              ></el-input>
            </el-form-item>
          </template>
          <template v-else>
            <el-form-item :label="$t('device1Manage.radarName')" prop="name2">
              <el-input
                v-model="device.form.name2"
                :placeholder="$t('device1Manage.radarNamePlaceholder')"
                clearable
                size="mini"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('device1Manage.radarType')" prop="type">
              <el-input
                v-model="device.form.type"
                :placeholder="$t('device1Manage.radarTypePlaceholder')"
                clearable
                size="mini"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="IP" prop="ip2">
              <el-input
                v-model="device.form.ip2"
                :placeholder="$t('device1Manage.ipPlaceholder')"
                clearable
                size="mini"
              ></el-input>
            </el-form-item>
          </template>
        </el-form>
      </div>
      <div class="btns" slot="footer">
        <el-button @click="close" size="mini">{{
          $t('common.cancel')
        }}</el-button>
        <el-button type="primary" size="mini" @click="submitDevice">{{
          $t('common.confirm')
        }}</el-button>
      </div>
    </dt-dialog>
  </dt-card>
</template>
<script src="./index.js"></script>
<style src="./index.scss" lang="scss" scoped></style>