U 测试修改

he wei

2024-11-06 32250f9a1db456b706e52ffb2664d738a2650678

 src/views/dev/list.vue

@@ -1,13 +1,386 @@
<script setup>
import { ref } from "vue";
<script setup name="devList">
import { ref, reactive, onMounted, computed, onActivated } from "vue";

import addEdit from "./addEdit.vue";

import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import useElement from "@/hooks/useElement.js";
import { delDev } from "./api";

import useWebSocket from "@/hooks/useWebSocket";
const { sendData, message: message1 } = useWebSocket("dinfSocket");

const { $loading, $message, $confirm } = useElement();

const $route = useRoute();
const $router = useRouter();
let devInfo;

const headers = [
  {
    prop: "devIdcode",
    label: "设备编号",
    width: "",
  },
  {
    prop: "devModel",
    label: "设备型号",
    width: "",
  },
  {
    prop: "devIp",
    label: "IP地址",
    width: "",
  },
  {
    prop: "state",
    label: "通讯状态",
    width: "",
  },
  {
    prop: "canDownload",
    label: "设备添加时间",
    width: "",
  },
];
const pageCurr = ref(1);
const pageSize = ref(10);
const addEditVisible = ref(false);
const devType = ref(1);
const devOnline = ref(-1);
const startTime = ref("");
const endTime = ref("");
const dialogTitle = ref("");

const rtdata = computed(() => {
  if (message1.value) {
    const {
      code,
      data2: {
        onlineMap,
        pageInfo: { list, total },
        type,
        devSum,
      },
    } = JSON.parse(message1.value);

    list.forEach((v) => {
      v.state = v.devOnline ? "在线" : "离线";
    });

    return { onlineMap, list, total, type, devSum };
  } else {
    let onlineMap = {},
      list = [],
      total = 0,
      type = {},
      devSum = 0;
    return { onlineMap, list, total, type, devSum };
  }
});

function add() {
  dialogTitle.value = "添加设备";
  devInfo = undefined;
  addEditVisible.value = true;
}
function edit(params) {
  dialogTitle.value = "编辑设备";
  devInfo = params;
  addEditVisible.value = true;
}
function confirmRemove(record) {
  $confirm("删除该设备", () => {
    remove(record.devId);
  });
}
function remove(devId) {
  let loading = $loading();
  delDev(devId)
    .then((res) => {
      let { code, data } = res.data;
      loading.close();
      if (code && data) {
        $message.success("操作成功");
        handleCurrentChange(1);
      } else {
        $message.success("操作失败");
      }
    })
    .catch((err) => {
      loading.close();
      console.log(err);
    });
}
function onOk() {
  addEditVisible.value = false;
  handleCurrentChange(1);
}
function onCanel() {
  addEditVisible.value = false;
}

function sendMessage() {
  // {"pageNum":1,"pageSize":10,"devType":1,"devOnline":1,"startTime":"2024-01-01","endTime":"2025-01-01"}
  sendData(
    JSON.stringify({
      pageNum: pageCurr.value,
      pageSize: pageSize.value,
      devType: devType.value || undefined,
      devOnline: -1 == devOnline.value  ? undefined : devOnline.value,
      startTime: startTime.value || undefined,
      endTime: endTime.value || undefined,
    })
  );
}
function handleSizeChange(val) {
  pageSize.value = val;
  sendMessage();
}
// 翻页
function handleCurrentChange(val) {
  pageCurr.value = val;
  sendMessage();
}

function toggle() {
  // 跳转到list页面  带页码信息
  $router.push({
    path: "/dev/normal",
    query: {
      pageCurr: pageCurr.value,
      pageSize: pageSize.value,
      devType: devType.value,
    },
  });
}

onMounted(() => {
  let { query } = $route;
  if (query.pageCurr) {
    pageCurr.value = query.pageCurr * 1;
    pageSize.value = query.pageSize * 1;
    devType.value = query.devType * 1;
  }
  // console.log('active', $route, '=============');
  sendMessage();
});
onActivated(() => {
  let { query } = $route;
  if (query.pageCurr) {
    pageCurr.value = query.pageCurr * 1;
    pageSize.value = query.pageSize * 1;
    devType.value = query.devType * 1;
  }
  // console.log('active', $route, '=============');
  sendMessage();
});
</script>

<template>
设备列表
  <!-- 设备列表 -->
  <div class="page">
    <div class="p-header">
      <div class="filter">
        <div class="item">
          <div class="label">设备类型</div>
          <div class="value select-wrap">
            <el-select
              v-model="devType"
              class="yc-select"
              @change="sendMessage"
              placeholder="Select"
            >
              <!-- <el-option label="全部" value="" /> -->
              <el-option label="充放电测试仪" :value="1" />
              <el-option label="锂电均衡仪" :value="2" />
            </el-select>
          </div>
        </div>
        <div class="item">
          <div class="label">通讯状态</div>
          <div class="value select-wrap">
            <el-select v-model="devOnline" class="yc-select" @change="sendMessage" placeholder="Select">
              <el-option label="全部" :value="-1" />
              <el-option label="在线" :value="1" />
              <el-option label="离线" :value="0" />
            </el-select>
          </div>
        </div>
        <div class="item">
          <div class="label">设备添加时间</div>
          <div class="value">
            <el-date-picker
              class="yc-datepicker"
              v-model="startTime"
              type="date"
              @change="sendMessage"
              value-format="YYYY-MM-DD"
              placeholder="请选择"
            />
            至
            <el-date-picker
              class="yc-datepicker"
              v-model="endTime"
              type="date"
              @change="sendMessage"
              value-format="YYYY-MM-DD"
              placeholder="请选择"
            />
          </div>
        </div>
      </div>
      <div class="btn-list">
        <!-- <div class="btn">查询</div> -->
        <div class="btn" @click="add">添加设备</div>
      </div>
      <!-- 切换按钮 -->
      <div class="btn-change-type" @click="toggle" title="跳转到视图页"></div>
    </div>
    <div class="p-content">
      <!-- 用户列表 -->
      <div class="table-wrap posR">
        <div class="pos-full">
          <el-table
            class="yc-table"
            stripe
            height="100%"
            size="small"
            :data="rtdata.list"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              width="80"
            ></el-table-column>
            <el-table-column
              v-for="header in headers"
              :key="header.prop"
              :prop="header.prop"
              :label="header.label"
              :min-width="header.width"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" width="160" align="center">
              <template #default="scope">
                <el-button type="primary" size="small" @click="edit(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  @click="confirmRemove(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 底部 -->
    </div>
    <div class="p-footer">
      <!-- 底部分页 -->
      <el-pagination
        class="yc-pagination"
        :current-page="pageCurr"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="rtdata.total"
      ></el-pagination>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      :title="dialogTitle"
      v-model="addEditVisible"
      top="0"
      :close-on-click-modal="false"
      class="dialog-center"
      width="580px"
      center
    >
      <add-edit
        v-if="addEditVisible"
        @success="onOk"
        :info="devInfo"
        @cancel="onCanel"
      ></add-edit>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">

</style>
.page {
  height: 100%;
  display: flex;
  flex-direction: column;
  .p-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    .filter {
      display: flex;
      font-size: 14px;
      .item {
        display: flex;
        align-items: center;
        & ~ .item {
          margin-left: 2em;
        }
      }
      .label {
        color: #0ff;
        margin-right: 0.6em;
        &::after {
          content: ":";
        }
      }
      .value {
        color: #fff;
        font-weight: bold;
        &.select-wrap {
          width: 160px;
        }
      }
    }
    .btn-list {
      display: flex;
      .btn {
        cursor: pointer;
        padding: 4px 2em;
        background: #0ff;
        border-radius: 6px;
        color: #333;
        & + .btn {
          margin-left: 1em;
        }
      }
    }
    .btn-change-type {
      cursor: pointer;
      background: url('data:image/svg+xml,%3csvg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="%23ffffff"%3e%3cpath d="M334.186667 554.666667c74.666667 0 135.146667 60.501333 135.146666 135.146666v199.04a135.146667 135.146667 0 0 1-135.146666 135.168h-199.04A135.146667 135.146667 0 0 1 0 888.874667v-199.061334A135.125333 135.125333 0 0 1 135.146667 554.666667z m554.666666 0c74.666667 0 135.146667 60.501333 135.146667 135.146666v199.04a135.146667 135.146667 0 0 1-135.146667 135.168h-199.04A135.146667 135.146667 0 0 1 554.666667 888.874667v-199.061334A135.125333 135.125333 0 0 1 689.813333 554.666667z m-554.666666 85.333333h-199.04A49.792 49.792 0 0 0 85.333333 689.834667v199.04a49.813333 49.813333 0 0 0 49.813334 49.834666h199.04A49.813333 49.813333 0 0 0 384 888.874667v-199.061334A49.792 49.792 0 0 0 334.186667 640z m554.666666 0h-199.04A49.792 49.792 0 0 0 640 689.834667v199.04a49.813333 49.813333 0 0 0 49.813333 49.834666h199.04A49.813333 49.813333 0 0 0 938.666667 888.874667v-199.061334A49.792 49.792 0 0 0 888.853333 640z m-554.666666-640C408.853333 0 469.333333 60.522667 469.333333 135.168v199.04a135.146667 135.146667 0 0 1-135.146666 135.168h-199.04A135.146667 135.146667 0 0 1 0 334.208V135.146667A135.125333 135.125333 0 0 1 135.146667 0z m554.666666 0C963.52 0 1024 60.522667 1024 135.168v199.04a135.146667 135.146667 0 0 1-135.146667 135.168h-199.04A135.146667 135.146667 0 0 1 554.666667 334.208V135.146667A135.125333 135.125333 0 0 1 689.813333 0z m-554.666666 85.333333h-199.04A49.792 49.792 0 0 0 85.333333 135.168v199.04a49.813333 49.813333 0 0 0 49.813334 49.834667h199.04A49.813333 49.813333 0 0 0 384 334.208V135.146667A49.792 49.792 0 0 0 334.186667 85.333333z m554.666666 0h-199.04A49.792 49.792 0 0 0 640 135.168v199.04a49.813333 49.813333 0 0 0 49.813333 49.834667h199.04A49.813333 49.813333 0 0 0 938.666667 334.208V135.146667A49.792 49.792 0 0 0 888.853333 85.333333z" /%3e%3c/svg%3e');
      width: 30px;
      height: 30px;
    }
  }
  .p-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    .table-wrap {
      flex: 1;
      margin-top: 6px;
      margin-bottom: 6px;
    }
  }
  .p-footer {
    padding: 6px;
  }
}
</style>