tall4-pc/src/views/device-list.vue

<template>
  <SearchBar @search="onSearch" />

  <div class="my-3">
    <el-button type="primary" @click="$router.push({ name: 'device-create' })">添加设备</el-button>
  </div>

  <template v-if="devicesAll && devicesAll.data">
    <el-table :data="devicesAll.data" style="width: 100%" border stripe :style="{ 'max-height': contentHeight + 'px' }">
      <el-table-column type="expand">
        <template #default="props">
          <el-row :gutter="20" class="px-6 text-gray-400">
            <el-col :span="9">链路地址：{{ props.row.linkAddress }}</el-col>
            <el-col :span="9">探头编号：{{ props.row.probNo }}</el-col>
            <el-col :span="9">设备朝向：{{ props.row.deviceDirection }}</el-col>
            <el-col :span="9">试样：{{ props.row.simple }}</el-col>
            <el-col :span="9">安装位置：{{ props.row.installLocation }}</el-col>
            <el-col :span="9">sim1：{{ props.row.sim1 }}</el-col>
            <el-col :span="18">与主站后台联调情况：{{ props.row.joint }}</el-col>
            <el-col :span="18">备注：{{ props.row.remark }}</el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="ID" prop="deviceId" min-min-width="100" align="center" />
      <el-table-column label="完整ID" prop="deviceFullId" min-width="150" align="center" />
      <el-table-column label="地点" prop="address" min-width="150" align="left" header-align="center" />
      <el-table-column label="地区" prop="area" min-width="120" align="left" header-align="center" />
      <el-table-column label="联系人" prop="contact" min-width="100" align="center" />
      <el-table-column label="联系电话" prop="phone" min-width="150" align="center" />
      <el-table-column label="安装时间" prop="installTime" min-width="200" align="center" />
      <el-table-column label="正式运行时间" prop="runTime" min-width="200" align="center" />
      <el-table-column fixed="right" label="操作" min-width="200" align="center">
        <template #default="props">
          <el-tooltip class="item" effect="dark" content="网络参数配置" placement="top">
            <i class="el-icon-setting text-base text-yellow-600 mx-1" @click="openPage(props.row, 'network-config')"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="功能参数配置" placement="top">
            <i class="el-icon-set-up text-base text-yellow-600 mx-1" @click="openPage(props.row, 'function-config')"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="实时数据统计" placement="top">
            <i class="el-icon-stopwatch text-base text-green-600 mx-1" @click="openPage(props.row, 'statistical-realtime')"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="数据查看及导出" placement="top">
            <i class="el-icon-tickets text-base text-green-600 mx-1" @click="openPage(props.row, 'data-history')"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="数据统计" placement="top">
            <i class="el-icon-data-line text-base text-green-600 mx-1" @click="openPage(props.row, 'statistical-history')"></i>
          </el-tooltip>
          <el-popconfirm title="确定要删除此设备吗?" @confirm="handleDelete(props.row.deviceId)">
            <template #reference>
              <i class="el-icon-delete text-base text-red-600 mx-1"></i>
              <!-- <el-button type="text" plain size="mini" icon="el-icon-delete"></el-button> -->
            </template>
          </el-popconfirm>

          <el-tooltip class="item" effect="dark" content="编辑设备信息" placement="top">
            <i class="el-icon-edit text-base text-blue-600 mx-1" @click="handleEdit(props.row)"></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      :current-page="devicesAll.page.page"
      :page-size="devicesAll.page.size"
      :default-page-size="50"
      :page-count="devicesAll.page.count"
      :total="devicesAll.page.total"
      class="my-3 float-right"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[1, 10, 20, 50, 100]"
      @size-change="onSizeChange"
      @current-change="onCurrentPageChange"
    ></el-pagination>
  </template>

  <!-- 编辑设备信息 -->
  <DeviceEdit :show="editting" @toggle-mdoal="editting = false" />
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import SearchBar from 'components/search-bar.vue';
import DeviceEdit from 'components/device-edit.vue';
import deepClone from 'lodash/cloneDeep';
import { deleteDevice } from 'apis/index';
import { ElMessage } from 'element-plus';

let timer = null;
const store = useStore();
const router = useRouter();
const token = computed(() => store.getters['user/token']);
const devicesAll = computed(() => {
  const devices = deepClone(store.state.device.devicesAll);
  if (devices && devices.data && devices.data.length) {
    for (let i = 0; i < devices.data.length; i++) {
      devices.data[i].installTime = new Date(+devices.data[i].installTime).toLocaleString();
      devices.data[i].runTime = new Date(+devices.data[i].runTime).toLocaleString();
    }
  }
  return devices;
});
const currentDeviceId = computed(() => store.state.device.currentDeviceId);
let contentHeight = 600;
const editting = ref(false);

// 获取设备完整信息列表
const getDevicesAllData = () => {
  try {
    if (token) {
      store.dispatch('device/getDevicesAll');
      timer && clearTimeout(timer);
      timer = null;
    } else {
      timer = setTimeout(() => {
        getDevicesAllData();
      });
    }
  } catch (error) {
    throw new Error(error);
  }
};

getDevicesAllData();

// 设置表格高度
onMounted(() => {
  const winHeight = document.documentElement.clientHeight;
  contentHeight = winHeight - 150;
});

/**
 * 删除
 * @param {number} page 页码
 * @param {number} size 每页条数
 */
function onSearch(page, size = 50) {
  const deviceId = currentDeviceId.value;
  const params = {
    deviceId,
    page,
    size,
  };
  store.dispatch('device/getDevicesAll', params);
}

// 当前页码变化
const onCurrentPageChange = page => {
  onSearch(page, devicesAll.value.page.size || 50);
};

// 每页条数变化
const onSizeChange = size => {
  onSearch(1, size);
};

/**
 * 删除某设备
 * @param {string} deviceId 设备id
 */
const handleDelete = async deviceId => {
  try {
    await deleteDevice(deviceId);
    store.commit('device/deleteDevice', deviceId);
  } catch (error) {
    ElMessage.error('删除失败, 请稍后重试');
    throw new Error(error);
  }
};

// 编辑设备信息
const handleEdit = item => {
  store.commit('device/setCurrentDeviceId', item.deviceId);
  editting.value = true;
};

/**
 * 打开页面
 * @param {object} item 设备对象
 * @param {string} pageName 页面name
 */
const openPage = (item, pageName) => {
  store.commit('device/setCurrentDeviceId', item.deviceId);
  router.push({ name: pageName });
};
</script>