htui-yllkbz 1.1.11 → 1.1.15

package/src/router/index.ts

@@ -0,0 +1,41 @@
+import { RouteConfig } from "vue-router";
+import index from "../views/Index.vue";
+import Login from "vue-kst-auth";
+const routes: Array<RouteConfig> = [
+  {
+    path: "/login",
+    name: "登录",
+    component: Login as any
+  },
+  {
+    path: "/",
+    name: "首页",
+    component: index,
+    children: [
+      {
+        path: "",
+        name: "",
+        meta: {
+          title:"模板首页"
+        },
+        component: () =>
+          import(/* webpackChunkName: "about" */ "../views/About.vue")
+      }
+    ]
+  },
+  {
+    path: "/about",
+    name: "About",
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/About.vue")
+  }
+];
+
+// const router = new VueRouter({
+//   routes
+// });
+
+export default routes;

package/src/shims-tsx.d.ts

@@ -0,0 +1,13 @@
+import Vue, { VNode } from "vue";
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+  }
+}

package/src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module "*.vue" {
+  import Vue from "vue";
+  export default Vue;
+}

package/src/store/baseData.ts

@@ -0,0 +1,44 @@
+export default {
+  state: {
+    // "企业名称",
+    enterpriseName: "星环视界智能科技",
+    // "基本请求路径",
+    baseUrl: "",
+    /** 授权 */
+    grantedPolicies: {},
+    /** 部门人员 */
+    organizationUsers: [],
+    /** 部门 */
+    organizationUnit: [],
+    /** 人员 */
+    users: [],
+    /** 严重等级 */
+    severityLevel: [],
+    /** 资产分类 */
+    assetTypes: [],
+    /** 位置 */
+    positions: [],
+    /** 分组 */
+    grids: []
+  },
+  getters: {
+    getBaseData: (state: any) => (name: string) => state[name]
+  },
+  mutations: {
+    setBaseData(state: any, baseData: any) {
+      for (const key in baseData) {
+        if (baseData.hasOwnProperty(key) && !/(^\?)|(^？)/.test(key)) {
+          let element: string = baseData[key];
+          if (/^baseUrl/.test(key)) {
+            element = element.replace(/\/$/g, "");
+          }
+          state[key] = element;
+        }
+      }
+    },
+    setBaseDataApi(state: any, payload: { key: string; value: any }) {
+      state[payload.key] = payload.value;
+    }
+  },
+  actions: {}
+};

package/src/store/index.ts

@@ -0,0 +1,14 @@
+import Vue from "vue";
+import Vuex from "vuex";
+import baseData from "./baseData"; // 基本数据
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {},
+  mutations: {},
+  actions: {},
+  modules: {
+    baseData
+  }
+});

package/src/styles.scss

@@ -0,0 +1,6 @@
+/* theme color */
+
+/* icon font path, required */
+
+/** $--font-path: '/publicData/styles/theme/fonts'; */
+/** @import "/publicData/styles/theme/index.css"; */

package/src/views/About.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>模板框架</div>
+</template>

package/src/views/Index.vue

@@ -0,0 +1,230 @@
+<template>
+  <div id="index">
+    <el-container style="height: 100vh" class="index">
+      <el-header style="padding: 0; height: min-content">
+        <xhkj-layout02>
+          <router-link to="/login" slot="navEnd">注销</router-link>
+        </xhkj-layout02>
+      </el-header>
+      <el-container class="body">
+        <el-aside :width="state.collapsed ? '66px' : '230px'" class="left">
+          <!--导航菜单-->
+          <el-menu
+            :default-active="state.defaultIndex"
+            router
+            :collapse="state.collapsed"
+            :collapse-transition="false"
+          >
+            <el-menu-item index="/">
+              <i class="el-icon-s-check"></i>
+              <span slot="title">导航1</span>
+            </el-menu-item>
+            <el-menu-item index="/">
+              <i class="el-icon-s-promotion"></i>
+              <span slot="title">导航2</span>
+            </el-menu-item>
+            <el-menu-item index="/">
+              <i class="el-icon-s-order"></i>
+              <span slot="title">导航3</span>
+            </el-menu-item>
+          </el-menu>
+          <el-button
+            class="action-btn"
+            :title="state.collapsed ? '展开菜单' : '收起菜单'"
+            type="text"
+            size="medium"
+            :icon="state.collapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
+            @click="state.collapsed = !state.collapsed"
+            style="font-size: 16px"
+          ></el-button>
+        </el-aside>
+        <el-main style="padding: 8px 0 0 15px" class="cont">
+          <router-view v-if="state.loading"></router-view>
+        </el-main>
+      </el-container>
+    </el-container>
+    <div
+      v-if="state.isLogin"
+      is="common-datas"
+      @commonDatas="commonDatas"
+      @error="error"
+    ></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Watch } from "vue-property-decorator";
+import { baseConfig } from "vue-kst-auth";
+interface State {
+  /** 数据状态 */
+  loading: boolean;
+  /** 是否登陆 */
+  isLogin: boolean;
+  /** 默认选中导航 */
+  defaultIndex: string;
+  /** 菜单是否收缩 */
+  collapsed: boolean;
+}
+
+@Component({
+  components: {},
+})
+export default class App extends Vue {
+  /** 数据 */
+  state: State = {
+    loading: false,
+    isLogin: false,
+    defaultIndex: "/",
+    collapsed: true,
+  };
+  /** 生命周期 */
+  created() {
+    // 动态加载引用文件
+    const files = this.$store.getters.getBaseData("files");
+    const filesKeys: string[] = Object.keys(files);
+    let heatStr = document.getElementsByTagName("head")[0].innerHTML;
+    filesKeys.forEach((cur) => {
+      const 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;
+    this.state.isLogin = baseConfig.getLoginState() || false;
+  }
+  mounted() {
+    this.state.defaultIndex = this.$route.path;
+  }
+  /** 方法 */
+  /** 接收基础数据 */
+  commonDatas(msg: any) {
+    const [res] = msg.detail;
+    this.state.loading = true;
+    /** 授权 */
+    if (
+      res.SessionState &&
+      res.SessionState.auth &&
+      res.SessionState.auth.grantedPolicies
+    ) {
+      this.$store.commit("setBaseDataApi", {
+        key: "grantedPolicies",
+        value: res.SessionState.auth.grantedPolicies,
+      });
+    }
+    /** 部门人员数据 */
+    if (res.organizationUsers) {
+      this.$store.commit("setBaseDataApi", {
+        key: "organizationUsers",
+        value: res.organizationUsers.items,
+      });
+    }
+    /** 部门数据 */
+    if (res.organizationUnit) {
+      this.$store.commit("setBaseDataApi", {
+        key: "organizationUnit",
+        value: res.organizationUnit,
+      });
+    }
+    /** 人员数据 */
+    if (res.users) {
+      this.$store.commit("setBaseDataApi", {
+        key: "users",
+        value: res.users.items,
+      });
+    }
+    /** 严重等级 */
+    if (res.severityLevel) {
+      this.$store.commit("setBaseDataApi", {
+        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("setBaseDataApi", {
+    //     key: "assetTypes",
+    //     value: assetTypes
+    //   });
+    //   // 位置
+    //   const positions = data.filter(val => val.category == "positions");
+    //   this.$store.commit("setBaseDataApi", {
+    //     key: "positions",
+    //     value: positions
+    //   });
+    //   // 分组
+    //   const grids = data.filter(val => val.category == "AlertGroup");
+    //   this.$store.commit("setBaseDataApi", {
+    //     key: "grids",
+    //     value: grids
+    //   });
+    // }
+  }
+  error() {
+    this.state.loading = true;
+    // console.log("获取基础信息错误");
+  }
+  /** 监听 */
+  @Watch("$route.path", { deep: true })
+  ondata(val: string) {
+    this.state.defaultIndex = val || "/";
+  }
+}
+</script>
+
+<style lang="scss">
+body,
+html {
+  margin: 0;
+  padding: 0;
+}
+a {
+  text-decoration: none;
+  &:link {
+    color: #476ef3;
+  }
+  a:visited {
+    color: #551a8b;
+  }
+  a:hover {
+    color: #335ff7;
+  }
+  a:active {
+    color: #0000ff;
+  }
+}
+.index {
+  background: url("/publicData/images/bg.png ") center no-repeat;
+  background-size: 100% 100%;
+  font-family: "SourceHanSansCN-Normal", "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #333333;
+  font-size: 12px;
+}
+</style>
+<style lang="scss" scoped>
+.index {
+  .el-menu {
+    background: none;
+    border: none;
+  }
+  .body {
+    .left {
+      box-sizing: border-box;
+      border-right: 1px solid #e6e6e6;
+      position: relative;
+      .action-btn {
+        position: absolute;
+        bottom: 0;
+        right: 6px;
+      }
+    }
+  }
+}
+</style>