iot-wap/dist/wap/assets/Log-fb070c89.js

import { d as defineComponent, r as ref, a as computed, o as onMounted, z as nextTick, p as onActivated, w as watch, c as createVNode, n as reactive, b as createElementBlock, e as createBaseVNode, f as withCtx, u as useRouter, j as openBlock, F as Fragment, x as renderList, k as createBlock, t as toDisplayString, B as unref } from "./index-5e4623ce.js";
import { B as BackTop } from "./index-9e456003.js";
import { P as PullRefresh } from "./index-e8b8fc91.js";
import { S as SwipeCell } from "./index-73d5a905.js";
import { C as Cell } from "./index-8540448e.js";
import { C as CusNavigation } from "./CusNavigation-87012716.js";
import { p as post_promise } from "./index-18735c56.js";
import { t as timestampToTime } from "./index-dd255780.js";
import { u as useExpose } from "./use-scope-id-0b5b8615.js";
import { c as createNamespace, m as makeNumericProp, z as makeStringProp, O as windowWidth, w as withInstall } from "./index-487cde8c.js";
import { L as Loading } from "./index-217c49a0.js";
import "./index-eef3af38.js";
import "./on-popup-reopen-c5ca1603.js";
import "./use-route-726f0d0b.js";
import "./axios-8cd254ce.js";
import "./function-call-dc072a29.js";
import "./mount-component-2b0f7b23.js";
const [name, bem] = createNamespace("text-ellipsis");
const textEllipsisProps = {
  rows: makeNumericProp(1),
  dots: makeStringProp("..."),
  content: makeStringProp(""),
  expandText: makeStringProp(""),
  collapseText: makeStringProp(""),
  position: makeStringProp("end")
};
var stdin_default = defineComponent({
  name,
  props: textEllipsisProps,
  emits: ["clickAction"],
  setup(props, {
    emit,
    slots
  }) {
    const text = ref(props.content);
    const expanded = ref(false);
    const hasAction = ref(false);
    const root = ref();
    const actionRef = ref();
    let needRecalculate = false;
    const actionText = computed(() => expanded.value ? props.collapseText : props.expandText);
    const pxToNum = (value) => {
      if (!value)
        return 0;
      const match = value.match(/^\d*(\.\d*)?/);
      return match ? Number(match[0]) : 0;
    };
    const cloneContainer = () => {
      if (!root.value || !root.value.isConnected)
        return;
      const originStyle = window.getComputedStyle(root.value);
      const container = document.createElement("div");
      const styleNames = Array.prototype.slice.apply(originStyle);
      styleNames.forEach((name2) => {
        container.style.setProperty(name2, originStyle.getPropertyValue(name2));
      });
      container.style.position = "fixed";
      container.style.zIndex = "-9999";
      container.style.top = "-9999px";
      container.style.height = "auto";
      container.style.minHeight = "auto";
      container.style.maxHeight = "auto";
      container.innerText = props.content;
      document.body.appendChild(container);
      return container;
    };
    const calcEllipsisText = (container, maxHeight) => {
      var _a, _b;
      const {
        content,
        position,
        dots
      } = props;
      const end = content.length;
      const middle = 0 + end >> 1;
      const actionHTML = slots.action ? (_b = (_a = actionRef.value) == null ? void 0 : _a.outerHTML) != null ? _b : "" : props.expandText;
      const calcEllipse = () => {
        const tail = (left, right) => {
          if (right - left <= 1) {
            if (position === "end") {
              return content.slice(0, left) + dots;
            }
            return dots + content.slice(right, end);
          }
          const middle2 = Math.round((left + right) / 2);
          if (position === "end") {
            container.innerText = content.slice(0, middle2) + dots;
          } else {
            container.innerText = dots + content.slice(middle2, end);
          }
          container.innerHTML += actionHTML;
          if (container.offsetHeight > maxHeight) {
            if (position === "end") {
              return tail(left, middle2);
            }
            return tail(middle2, right);
          }
          if (position === "end") {
            return tail(middle2, right);
          }
          return tail(left, middle2);
        };
        return tail(0, end);
      };
      const middleTail = (leftPart, rightPart) => {
        if (leftPart[1] - leftPart[0] <= 1 && rightPart[1] - rightPart[0] <= 1) {
          return content.slice(0, leftPart[0]) + dots + content.slice(rightPart[1], end);
        }
        const leftMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
        const rightMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
        container.innerText = props.content.slice(0, leftMiddle) + props.dots + props.content.slice(rightMiddle, end);
        container.innerHTML += actionHTML;
        if (container.offsetHeight >= maxHeight) {
          return middleTail([leftPart[0], leftMiddle], [rightMiddle, rightPart[1]]);
        }
        return middleTail([leftMiddle, leftPart[1]], [rightPart[0], rightMiddle]);
      };
      return props.position === "middle" ? middleTail([0, middle], [middle, end]) : calcEllipse();
    };
    const calcEllipsised = () => {
      const container = cloneContainer();
      if (!container) {
        needRecalculate = true;
        return;
      }
      const {
        paddingBottom,
        paddingTop,
        lineHeight
      } = container.style;
      const maxHeight = Math.ceil((Number(props.rows) + 0.5) * pxToNum(lineHeight) + pxToNum(paddingTop) + pxToNum(paddingBottom));
      if (maxHeight < container.offsetHeight) {
        hasAction.value = true;
        text.value = calcEllipsisText(container, maxHeight);
      } else {
        hasAction.value = false;
        text.value = props.content;
      }
      document.body.removeChild(container);
    };
    const toggle = (isExpanded = !expanded.value) => {
      expanded.value = isExpanded;
    };
    const onClickAction = (event) => {
      toggle();
      emit("clickAction", event);
    };
    const renderAction = () => {
      const action = slots.action ? slots.action({
        expanded: expanded.value
      }) : actionText.value;
      return createVNode("span", {
        "ref": actionRef,
        "class": bem("action"),
        "onClick": onClickAction
      }, [action]);
    };
    onMounted(() => {
      calcEllipsised();
      if (slots.action) {
        nextTick(calcEllipsised);
      }
    });
    onActivated(() => {
      if (needRecalculate) {
        needRecalculate = false;
        calcEllipsised();
      }
    });
    watch([windowWidth, () => [props.content, props.rows, props.position]], calcEllipsised);
    useExpose({
      toggle
    });
    return () => createVNode("div", {
      "ref": root,
      "class": bem()
    }, [expanded.value ? props.content : text.value, hasAction.value ? renderAction() : null]);
  }
});
const TextEllipsis = withInstall(stdin_default);
const index = "";
const _hoisted_1 = { style: { "display": "flex", "flex-direction": "column", "height": "100vh" } };
const _hoisted_2 = {
  class: "container",
  style: { "overflow-y": "auto", "flex-grow": "1" }
};
const _hoisted_3 = { style: { "text-align": "left" } };
const _hoisted_4 = { style: { "display": "flex", "justify-content": "space-between", "margin-bottom": "5px" } };
const _hoisted_5 = { style: { "font-size": "0.9rem", "color": "#000", "font-weight": "bold" } };
const _hoisted_6 = { style: { "display": "flex", "align-items": "flex-end" } };
const _hoisted_7 = { style: { "width": "100%", "word-wrap": "break-word", "text-align": "justify" } };
const _hoisted_8 = { key: 0 };
const _hoisted_9 = {
  key: 1,
  style: { "text-align": "center", "padding": "20px", "color": "#ccc" }
};
const _hoisted_10 = {
  key: 2,
  style: { "text-align": "center", "padding": "20px" }
};
const _hoisted_11 = {
  key: 3,
  style: { "text-align": "center", "padding": "20px", "color": "#ccc" }
};
const _hoisted_12 = {
  key: 4,
  style: { "text-align": "center", "padding": "20px" }
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "Log",
  setup(__props) {
    const router = useRouter();
    const page = reactive({
      total: 0,
      pageNum: 1,
      pageSize: 10,
      pages: 0
    });
    const dataList = ref([]);
    const refreshing = ref(false);
    const isLoading = ref(false);
    const finished = ref(false);
    const getData = () => {
      console.log("onload.....");
      post_promise({ url: "/device/searchRecord", data: {
        size: page.pageSize,
        page: page.pageNum,
        sort: "createtime",
        order: "desc",
        keyWord: deviceId.value,
        mac: ""
      } }).then((result) => {
        console.log(result);
        isLoading.value = false;
        refreshing.value = false;
        if (result.code == 0) {
          const dataArr = result.data;
          const total = result.total;
          const pages = Math.ceil(total / page.pageSize);
          console.log(pages);
          console.log(dataArr);
          if (page.pageNum == 1) {
            dataList.value.splice(0, dataList.value.length);
          }
          dataList.value.push(...dataArr);
          page.pages = pages;
          page.total = total;
          console.log(dataList.value, pages);
        }
      }, (result) => {
        console.log(result);
        isLoading.value = false;
        refreshing.value = false;
      }).catch((ex) => {
        console.log(ex);
        isLoading.value = false;
        refreshing.value = false;
      });
    };
    const onRefresh = () => {
      console.log("onrefresh...");
      console.log(refreshing.value);
      page.pageNum = 1;
      finished.value = false;
      isLoading.value = true;
      getData();
    };
    const deviceId = ref("");
    watch(() => router.currentRoute.value.params, (newParams, oldParams) => {
      console.log("路由参数发生了变化", newParams, oldParams);
      if (newParams.deviceId) {
        deviceId.value = newParams.deviceId;
        getData();
      }
    });
    onMounted(() => {
      console.log("onMounted");
      deviceId.value = router.currentRoute.value.params.deviceId;
      getData();
    });
    const clickLoading = () => {
      console.log("clickLoading");
      page.pageNum++;
      isLoading.value = true;
      getData();
    };
    return (_ctx, _cache) => {
      const _component_CusNavigation = CusNavigation;
      const _component_van_text_ellipsis = TextEllipsis;
      const _component_van_cell = Cell;
      const _component_van_swipe_cell = SwipeCell;
      const _component_van_loading = Loading;
      const _component_van_pull_refresh = PullRefresh;
      const _component_van_back_top = BackTop;
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createVNode(_component_CusNavigation, {
          gobackabled: "",
          title: "设备日志（" + deviceId.value + "）"
        }, null, 8, ["title"]),
        createBaseVNode("div", _hoisted_2, [
          createVNode(_component_van_pull_refresh, {
            style: { "min-height": "100%" },
            modelValue: refreshing.value,
            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => refreshing.value = $event),
            onRefresh
          }, {
            default: withCtx(() => [
              (openBlock(true), createElementBlock(Fragment, null, renderList(dataList.value, (item) => {
                return openBlock(), createBlock(_component_van_swipe_cell, { style: { "background-color": "#fff", "margin-bottom": "10px" } }, {
                  default: withCtx(() => [
                    createVNode(_component_van_cell, { clickable: "" }, {
                      default: withCtx(() => [
                        createBaseVNode("div", _hoisted_3, [
                          createBaseVNode("div", _hoisted_4, [
                            createBaseVNode("div", _hoisted_5, toDisplayString(unref(timestampToTime)(item.time)), 1)
                          ]),
                          createBaseVNode("div", _hoisted_6, [
                            createBaseVNode("div", _hoisted_7, [
                              createVNode(_component_van_text_ellipsis, {
                                rows: 5,
                                content: JSON.stringify(item)
                              }, null, 8, ["content"])
                            ])
                          ])
                        ])
                      ]),
                      _: 2
                    }, 1024)
                  ]),
                  _: 2
                }, 1024);
              }), 256)),
              createBaseVNode("div", null, [
                refreshing.value ? (openBlock(), createElementBlock("div", _hoisted_8)) : dataList.value.length == 0 ? (openBlock(), createElementBlock("div", _hoisted_9, _cache[1] || (_cache[1] = [
                  createBaseVNode("span", null, "暂无数据", -1)
                ]))) : isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_10, [
                  createVNode(_component_van_loading, {
                    type: "spinner",
                    color: "#1989fa"
                  })
                ])) : page.pages <= page.pageNum ? (openBlock(), createElementBlock("div", _hoisted_11, _cache[2] || (_cache[2] = [
                  createBaseVNode("span", null, "没有更多了", -1)
                ]))) : (openBlock(), createElementBlock("div", _hoisted_12, [
                  createBaseVNode("span", { onClick: clickLoading }, "点击加载")
                ]))
              ])
            ]),
            _: 1
          }, 8, ["modelValue"]),
          createVNode(_component_van_back_top, {
            target: ".container",
            right: "5vw",
            bottom: "80px"
          })
        ])
      ]);
    };
  }
});
export {
  _sfc_main as default
};