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

<template>
  <SearchBar />

  <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">
            <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="10"
      :page-count="devicesAll.page.count"
      class="my-3 float-right"
      @size-change="onSizeChange"
      @current-change="onCurrentPageChange"
      @prev-click="onPrev"
      @next-click="onNext"
    ></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';

let timer = null;
const store = useStore();
const router = useRouter();
const token = computed(() => store.getters['user/token']);
const devicesAll = computed(() => store.state.device.devicesAll);
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) {
    console.log('error: ', error);
  }
};

getDevicesAllData();

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

// 当前页码变化
const onCurrentPageChange = e => {
  console.log(e);
};

// 每页条数变化
const onSizeChange = e => {
  console.log(e);
};

// 下一页
const onNext = e => {
  console.log(e);
};

// 上一页
const onPrev = e => {
  console.log(e);
};

// 删除设备
const handleDelete = () => {
  console.log('delete');
};

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

const openPage = (item, path) => {
  store.commit('device/setCurrentDeviceId', item.deviceId);
  router.push({ name: path });
};
</script>