https://gitee.com/star_ring/product_architecture.git[跳转](https://gitee.com/star_ring/product_architecture.git)

|—— public
    |—— baseConfig.json // 接本配置
|—— src
    |—— assets
    |—— exports  // 导出web组件文件夹
    |—— plugins // 插件、接口等
    |—— router // 路由
    |—— store
        |—— baseData.ts // 基本数据
    |—— views
    | App.vue

<template>
    <div class="index"></div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import {
  InspectItemResultApi,
  RewriteResultDto,
  InspectItemResultDto,
  ImportanceLevel
} from "@/plugins/api";
import {
  AssetPropertyCustomeFieldApi,
  AssetCustomFieldDto
} from "@/plugins/AssetApi";
import { _axios } from "vue-kst-auth";
interface State {
  /** 数据状态 */
  loading: boolean;
}
@Component
export default class Index extends Vue {
  /** 组件传值 */
  /** 数据 */
  state: State = {
    loading: false
  };
  /** 生命周期 */
  /** 方法 */
  /** 监听 */
  /** 计算属性 */
}
</script>
<style lang="scss" scoped>
.index {}
</style>

<script>
   document.write(`<script type="text/javascript" src="/auth/components/auth.min.js?v=${Date.now()}""><\/script>`);
</script>

<link rel="stylesheet" href="/aliIcon/t/font_1553133_dqtivxe1pvj.css">

  /**
   * 定时执行
   * 入参是目标时间的小时数，取值0-23，当然可以根据需要拓展成分钟数，这里主要是提供思路所以从简
   * 初次进入的时候，计算当前时间和目标时间的距离，执行一次setTimeout(func,距离时间)，第二次开始，把setTimeOut的时候设置成24小时
   * targetHour: 小时，minutes： 分钟
   */
  setRegular(targetHour: number, minutes: number | undefined = 0) {
    /** 判断是否已超过今日目标小时，若超过，时间间隔设置为距离明天目标小时的距离 */
    let timeInterval = 0;
    /** 当前时间 */
    const nowTime = new Date();
    /** 计算当前时间的秒数 */
    let nowSeconds = 0;
    /** 计算目标时间对应的秒数 */
    let targetSeconds = 0;
    nowSeconds =
      nowTime.getHours() * 3600 +
      nowTime.getMinutes() * 60 +
      nowTime.getSeconds();
    targetSeconds = targetHour * 3600 + minutes * 60;
    timeInterval =
      targetSeconds > nowSeconds
        ? targetSeconds - nowSeconds
        : targetSeconds + 24 * 3600 - nowSeconds;
    setTimeout(this.updateDate, timeInterval * 1000);
  }
  /** 每天定时刷新日期更新数据 */
  updateDate() {
    this.reloadLayout();
    //之后每天调用一次
    setTimeout(this.updateDate, 24 * 3600 * 1000);
  }

ts代码
/** 获取两个日期间，每天的日期 */
function formatEveryDay(start: any, end: any) {
  let dateList = [];
  var startTime = getDate(start);
  var endTime = getDate(end);

  while (endTime.getTime() - startTime.getTime() >= 0) {
    var year = startTime.getFullYear();
    var month =
      startTime.getMonth() + 1 < 10
        ? "0" + (startTime.getMonth() + 1)
        : startTime.getMonth() + 1;
    var day =
      startTime.getDate().toString().length == 1
        ? "0" + startTime.getDate()
        : startTime.getDate();
    dateList.push(year + "-" + month + "-" + day);
    startTime.setDate(startTime.getDate() + 1);
  }
  return dateList;
}

function getDate(datestr: any) {
  var temp = datestr.split("-");
  var date = new Date(temp[0], temp[1] - 1, temp[2]);
  return date;
}

export { formatEveryDay };

import { _axios, baseConfig } from "vue-kst-auth";

    <el-upload
      class="upload-demo"
      :action="`/files/api/****`"
      :show-file-list="false"
      :headers="headers"
      :on-success="handleAvatarSuccess"
    >
      <el-button size="medium" type="primary">上传数据</el-button>
    </el-upload>
  /** 文件上传成功 */
  handleAvatarSuccess() {}
  /** 计算属性 */
  /** 获取headers */
  get headers() {
    return {
      __tenant: baseConfig.getCookie("__tenant"),
      Authorization: "Bearer " + baseConfig.getCookie("Abp.AuthToken")
    };
  }

/** 创建下载链接 */
const downloadHref = "";
 
/** 创建a标签并为其添加属性 */
let downloadLink = document.createElement("a");
downloadLink.href = downloadHref;
downloadLink.download = "资产与3D视图模板.xlsx";
/** 触发点击事件执行下载 */
downloadLink.click();
/** 下载完成进行释放 */
window.URL.revokeObjectURL(downloadHref);

  /** 下载导入模板 */
  downloadfileTem() {
    var xhr = new XMLHttpRequest();
    var formData = new FormData();
    xhr.open("get", "/tai-zhang/api/asset-management/download-asset-template"); //url填写后台的接口地址，如果是post，在formData append参数（参考原文地址）
    xhr.setRequestHeader("__tenant", baseConfig.getCookie("__tenant"));
    xhr.setRequestHeader(
      "Authorization",
      "Bearer " + baseConfig.getCookie("Abp.AuthToken")
    );
    xhr.responseType = "blob";
    xhr.onload = function(e) {
      if (this.status == 200) {
        var blob = this.response;
        /** 创建下载链接 */
        // const downloadHref =
        //   "/tai-zhang/api/asset-management/download-asset-template";
        const downloadHref = window.URL.createObjectURL(blob);
        /** 创建a标签并为其添加属性 */
        let downloadLink = document.createElement("a");
        downloadLink.href = downloadHref;
        downloadLink.download = `台帐模板${Date.now()}.xlsx`;
        /** 触发点击事件执行下载 */
        downloadLink.click();
        /** 下载完成进行释放 */
        window.URL.revokeObjectURL(downloadHref);
      }
    };
    xhr.send(formData);
  }

// 动态加载引用文件
    let files = this.$store.getters.getBaseData("files");
    let files_keys = Object.keys(files);
    let heatStr = document.getElementsByTagName("head")[0].innerHTML;
    files_keys.forEach((cur, index) => {
      let src = files[cur];
      if (src && /\.css$/.test(src.toString())) {
        heatStr += `<link rel="stylesheet" href="${src}?v=${Date.now()}" />`;
      }
      if (src && /\.ico$/.test(src.toString())) {
        heatStr += `<link rel="icon" href="${src}">`;
      }
    });
    document.getElementsByTagName("head")[0].innerHTML = heatStr;

  /** 获取二级域名 */
  getOrginName() {
    /** 获取当前域名切割 */
    const hostnameList: string[] = window.location.hostname
      .split(".")
      .reverse();
    if (
      hostnameList.length > 2 &&
      this.state.kpiList.includes(hostnameList[2])
    ) {
      this.state.kpiName = hostnameList[2];
    } else {
      this.state.kpiName = "ebc";
    }
  }

const resComponents: any = {};
const FormComponents = require.context(
  "@/components/FormList",
  false,
  /\.vue$/
);
FormComponents.keys().forEach(fileName => {
  const comp = FormComponents(fileName);
  resComponents[fileName.replace(/^\.\/(.*)\.\w+$/, "$1")] = comp.default;
});

@Component({
  components: {
    ...resComponents
  }
})

document.write(
        `<script type="text/javascript" src="/common_data/components/common.min.js?v=${Date.now()}""><\/script>`
      );
<div is="common-datas" @commonDatas="commonDatas" @error="error"></div>

commonDatas(msg: any) {
    const [res] = msg.detail;
    /** 授权 */
    if (
      res.SessionState &&
      res.SessionState.auth &&
      res.SessionState.auth.grantedPolicies
    ) {
      this.$store.commit("setDataApi", {
        key: "grantedPolicies",
        value: res.SessionState.auth.grantedPolicies
      });
    }
    /** 部门人员数据 */
    if (res.organizationUsers) {
      this.$store.commit("setDataApi", {
        key: "organizationUsers",
        value: res.organizationUsers.items
      });
    }
    /** 部门数据 */
    if (res.organizationUnit) {
      this.$store.commit("setDataApi", {
        key: "organizationUnit",
        value: res.organizationUnit
      });
    }
    /** 人员数据 */
    if (res.users) {
      this.$store.commit("setDataApi", {
        key: "users",
        value: res.users.items
      });
    }
    /** 严重等级 */
    if (res.severityLevel) {
      this.$store.commit("setDataApi", {
        key: "severityLevel",
        value: res.severityLevel
      });
    }
    /** 基础数据 */
    if (res.baseData && res.baseData.items) {
      const data: any[] = res.baseData.items;
      // 资产分类
      const assetTypes = data.filter(val => val.category == "AssetCategory");
      this.$store.commit("setDataApi", {
        key: "assetTypes",
        value: assetTypes
      });
      // 位置
      const positions = data.filter(val => val.category == "positions");
      this.$store.commit("setDataApi", {
        key: "positions",
        value: positions
      });
      // 分组
      const grids = data.filter(val => val.category == "AlertGroup");
      this.$store.commit("setDataApi", {
        key: "grids",
        value: grids
      });
    }
  }
  error() {}

<div is="common-asset-model" :code-id="" @change="getCommonData"></div>
/** 方法 */
/** 基础数据返回 */
  getCommonData(res: {
    [key: string]: any;
    detail: { [key: string]: any }[];
  }) {
  }

<div is="common-filter-data" json-key="" init-data="" default-layout="" @change="" @refresh=""></div>
示例：json-key="设备台账高级查询"
init-data: 查询初始化字符串，json-key不传情况下，页面有提醒
default-layout: 没有自定义数据情况下，默认布局字符串

<div is="common-datas-info" @change="getCommonData"></div>

import { HubConnectionBuilder, HubConnection } from "@microsoft/signalr";
/** 定时器 */
timer: HubConnection | undefined = undefined;

/** 实时数据 */
connection: undefined | any = undefined;
/** 资产标签实时数据 */
  initTagData() {
    // 注销实时数据
    this.connection?.stop();
    const tags = [];

    this.connection = new HubConnectionBuilder()
      .withUrl(
        `/asset-tag/signalr/realtime-data?group=data/realtime&heartbeat=1000&tags=${tags.join(
          ","
        )}&access_token=${baseConfig.getCookie("Abp.AuthToken")}`
      )
      .build();
    // 实时数据(资产标签)
    if (this.timer) {
      clearInterval(this.timer);
    }
    this.connection
      ?.start()
      .then(() => {})
      .catch(() => {
        this.signaleState();
      });
    this.connection?.on("GetRealtime", (res: ITagData) => {
      /** 资产标签实时数据缓存 */
      let tagDataList: ITagData[] =
        this.$store.getters.getBaseData("tagDataList") || [];
      // res.data = JSON.parse(res.data);
      /** 格式化新接收到的实时数据 */
      const body: ITagData = res;
      /** 缓存中是否有新来的数据 */
      // 历史数据（缓存）
      this.saveTagData(body);
      this.filterTagData(res);
    });
    // 长链接关闭操作
    this.connection?.onclose(() => {
      this.signaleState();
    });
  }
  /** 定时查看长连接状态 */
  signaleState() {
    this.timer = setInterval(() => {
      if (this.connection?.state != "Connected") {
        this.initTagData();
      }
    }, 1000 * 3);
  }
  /** 缓存实时数据, */
  saveTagData(data?: ITagData) {
    /** 资产标签实时数据缓存，历史数据 */
    let tagDataListHistory: ITagData[] =
      this.$store.getters.getBaseData("tagDataListHistory") || [];
    if (tagDataListHistory.length > 1000) {
      tagDataListHistory.shift();
    }
    if (data) {
      tagDataListHistory.push(data);
    }
    window.sessionStorage.setItem(
      "资产实时数据缓存",
      JSON.stringify(tagDataListHistory)
    );
    this.$store.commit("setBaseDataApi", {
      key: "tagDataListHistory",
      value: tagDataListHistory
    });
  }
  /** 获取临时缓存数据 */
  getTagData() {
    /** 资产标签实时数据缓存，历史数据 */
    let tagDataListHistory: ITagData[] = [];
    if (window.sessionStorage.getItem("资产实时数据缓存")) {
      tagDataListHistory = JSON.parse(
        window.sessionStorage.getItem("资产实时数据缓存") || "[]"
      );
    }
    this.$store.commit("setBaseDataApi", {
      key: "tagDataList",
      value: tagDataListHistory
    });
    this.state.factoryData.forEach(item => {
      if (!Number.isNaN(Number(item.value))) {
        item.value = this.NumberFormat(Number(item.value).toFixed(2));
      }
      /** 历史数据 */
      let historyData = tagDataListHistory.find(val => val.Key == item.tag);
      if (historyData) {
        if (Number.isNaN(Number(historyData.Value))) {
          item.value = historyData.Value;
        } else {
          item.value = this.NumberFormat(Number(historyData.Value).toFixed(2));
        }
      }
    });
  }

1、引入相关js
    <script src="/kpi/browser/jquery.min.js"></script>
    <script src="/kpi/browser/jquery.signalR.min.js"></script>
2、
/** 实时数据 */
  connection = $.hubConnection(this.htjnYb, {
    useDefaultPath: false
  });
    // 注销实时数据
    this.connection.stop();
    this.connection.start().done(function() {
      console.log("链接成功");
    });
    var contosoChatHubProxy = this.connection.createHubProxy("MessagingHub");
    contosoChatHubProxy.on("receive", (res: ITagData) => {
        //接收数据
    })
    // this.$message.success("开始连接");
    // 实时数据(资产标签)
    this.connection
      .start({ transport: ["webSockets", "longPolling"] })
      .done((res: any) => {
        // this.$message.success("连接成功");
      });