U 测试修改

he wei

2024-11-06 32250f9a1db456b706e52ffb2664d738a2650678

 src/views/dev/list.vue

@@ -1,29 +1,40 @@
<script setup name="devList">
import { ref, reactive, onMounted } from "vue";
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: "canDownload",
    prop: "devIdcode",
    label: "设备编号",
    width: "",
  },
  {
    prop: "canDownload",
    prop: "devModel",
    label: "设备型号",
    width: "",
  },
  {
    prop: "canDownload",
    prop: "devIp",
    label: "IP地址",
    width: "",
  },
  {
    prop: "canDownload",
    prop: "state",
    label: "通讯状态",
    width: "",
  },
@@ -35,91 +46,72 @@
];
const pageCurr = ref(1);
const pageSize = ref(10);
const total = ref(0);
const addEditVisible = ref(false);
const devType = ref(0);
const dateStart = ref("");
const dateEnd = ref("");
const devType = ref(1);
const devOnline = ref(-1);
const startTime = ref("");
const endTime = ref("");
const dialogTitle = ref("");
const datas = reactive({
  tableData: [],
  userInfo: {},

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 };
  }
});
// const tableData = reactive([]);
// const userInfo = reactive({});

// const userStore = useUserStore();
// const { uid, uname } = storeToRefs(userStore);

function getList() {
  let loading = $loading();
  // getAllUser(pageCurr.value, pageSize.value)
  //   .then((res) => {
  //     let { code, data, data2 } = res.data;
  //     let list = [];
  //     let _total = 0;
  //     if (code && data) {
  //       // console.log(data);
  //       list = data2.list.map((v) => {
  //         v.canDownload = v.udownloadRole ? "有" : "无";
  //         return v;
  //       });
  //       _total = data2.total;
  //     }
  //     loading.close();
  //     // tableData.length = 0;
  //     // tableData.push(...list);
  //     datas.tableData = list;
  //     total.value = _total;
  //   })
  //   .catch((err) => {
  //     console.log(err);
  //     loading.close();
  //   });
}

// 展示数据数量
function handleSizeChange(val) {
  pageSize.value = val;
  getList();
}
// 翻页
function handleCurrentChange(val) {
  pageCurr.value = val;
  getList();
}
function addUser() {
  dialogTitle.value = "添加用户";
  datas.userInfo = undefined;
function add() {
  dialogTitle.value = "添加设备";
  devInfo = undefined;
  addEditVisible.value = true;
}
function edit(record) {
  dialogTitle.value = "编辑用户";
function edit(params) {
  dialogTitle.value = "编辑设备";
  devInfo = params;
  addEditVisible.value = true;
  datas.userInfo = record;
}
function confirmRemove(record) {
  // $confirm("删除该用户", () => {
  //   remove(record.uid);
  // });
  $confirm("删除该设备", () => {
    remove(record.devId);
  });
}
function remove(uid) {
function remove(devId) {
  let loading = $loading();
  // deleteUser(uid)
  //   .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);
  //   });
  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;
@@ -128,59 +120,61 @@
function onCanel() {
  addEditVisible.value = false;
}
function improveRolefn(record) {
  let loading = $loading();
  // improveRole(record.uid)
  //   .then((res) => {
  //     let { code, data, msg } = res.data;
  //     loading.close();
  //     if (code && data) {
  //       $message.success(msg);
  //       getList();
  //     } else {
  //       $message.error(msg);
  //     }
  //   })
  //   .catch((err) => {
  //     console.log(err);
  //     loading.close();
  //   });

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 dropRolefn(record) {
  let loading = $loading();
  // dropRole(record.uid)
  //   .then((res) => {
  //     let { code, data, msg } = res.data;
  //     loading.close();
  //     if (code && data) {
  //       $message.success(msg);
  //       getList();
  //     } else {
  //       $message.error(msg);
  //     }
  //   })
  //   .catch((err) => {
  //     loading.close();
  //     console.log(err);
  //   });
function handleSizeChange(val) {
  pageSize.value = val;
  sendMessage();
}
function resetSnIdfn(record) {
  // $confirm("重置该用户密码", () => {
  //   let loading = $loading();
  //   resetSnId(record.uid).then((res) => {
  //     let { code, data, msg } = res.data;
  //     if (code && data) {
  //       $message.success(msg);
  //     } else {
  //       $message.error(msg);
  //     }
  //     loading.close();
  //   });
  // });
// 翻页
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(() => {
  // getList();
  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>

@@ -192,20 +186,25 @@
        <div class="item">
          <div class="label">设备类型</div>
          <div class="value select-wrap">
            <el-select v-model="devType" class="yc-select" placeholder="Select">
              <el-option label="全部" value="" />
              <el-option label="充放电一体机" :value="0" />
              <el-option label="锂电均衡仪" :value="1" />
            <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="devType" class="yc-select" placeholder="Select">
              <el-option label="全部" value="" />
              <el-option label="在线" :value="0" />
              <el-option label="离线" :value="1" />
            <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>
@@ -214,92 +213,71 @@
          <div class="value">
            <el-date-picker
              class="yc-datepicker"
              v-model="dateStart"
              v-model="startTime"
              type="date"
              @change="sendMessage"
              value-format="YYYY-MM-DD"
              placeholder="请选择"
            />
            至
            <el-date-picker
              class="yc-datepicker"
              v-model="dateEnd"
              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">添加设备</div>
        <!-- <div class="btn">查询</div> -->
        <div class="btn" @click="add">添加设备</div>
      </div>
      <!-- 切换按钮 -->
      <div class="btn-change-type"></div>
      <div class="btn-change-type" @click="toggle" title="跳转到视图页"></div>
    </div>
    <div class="p-content">
      <!-- 用户列表 -->
      <div class="table-wrap">
        <el-table
          class="yc-table"
          stripe
          height="100%"
          size="small"
          :data="datas.tableData"
          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="360" align="center">
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                :disabled="scope.row.uid == uid"
                @click="edit(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="primary"
                size="small"
                :disabled="scope.row.uid == uid"
                @click="resetSnIdfn(scope.row)"
                >重置密码</el-button
              >
              <el-button
                type="danger"
                size="small"
                :disabled="scope.row.uid == uid"
                @click="confirmRemove(scope.row)"
                >删除</el-button
              >
              <el-button
                type="success"
                v-if="scope.row.uid > 1000"
                size="small"
                @click="improveRolefn(scope.row)"
                >加入管理员组</el-button
              >
              <el-button
                type="danger"
                v-else
                :disabled="scope.row.uid == uid"
                size="small"
                @click="dropRolefn(scope.row)"
                >移出管理员组</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      <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>
@@ -313,9 +291,26 @@
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :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>

@@ -328,6 +323,7 @@
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    .filter {
      display: flex;
      font-size: 14px;
@@ -361,13 +357,14 @@
        background: #0ff;
        border-radius: 6px;
        color: #333;
        &+.btn {
        & + .btn {
          margin-left: 1em;
        }
      }
    }
    .btn-change-type {
      background: #090;
      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;
    }