soc_web/src/views/board/index.vue

<!--  -->
<template>
  <div class="body">
    <!-- 标题栏-->
    <div class="topDiv">
      <div class="logoDiv">
        <img width="160px" height="30px" src="@/assets/logo/logo.png" />
        <el-divider direction="vertical" style="margin-top: 5px"></el-divider>
        <el-cascader
          :options="orgOptions"
          v-model="selectedOrg.id"
          :props="{ checkStrictly: true, value: 'id', label: 'shortName' }"
          :show-all-levels="false"
          class="org-cascader"
          popper-class="board-org-popper"
          @change="handOrgChange"
          ref="orgCascader"
        ></el-cascader>
      </div>
      <div class="title">
        <span>移动安全保卫管理平台项目</span>
      </div>
      <div class="iconDiv">
        <span> {{ time }} {{ week }}</span>
        <span>|</span>
      </div>
    </div>
    <div class="main">
      <div>
        <div>
          <resumptionReport :orgId="selectedOrg.id" :api="api.resumption" title="日常安全履职" />
        </div>
        <div>
          <resumptionReport :orgId="selectedOrg.id"  :api="api.monitor"  title="监控调阅" />
        </div>
        <div>
          <resumptionReport :orgId="selectedOrg.id"  :api="api.safetyCheck" title="日常安全检查" />
        </div>
      </div>
      <div>
        <div>
          <div>
            <mapChart :orgId="selectedOrg.id" :orgName="selectedOrg.name" />
          </div>
          <div>
            <orgStatis :orgId="selectedOrg.id" />
          </div>
        </div>
      </div>
      <div>
        <div>
          <question :orgId="selectedOrg.id" />
        </div>
        <div>
          <resumptionReport :orgId="selectedOrg.id"  :api="api.drill"  title="预案演练" />
        </div>
        <div>
          <resumptionReport :orgId="selectedOrg.id" :api="api.edu"  title="教育培训" />
        </div>
       
        <!-- <div>
          <div>
            <safetyIndex :orgId="selectedOrg.id" />
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import resumptionReport from "./charts/resumption/report_bar.vue";
import question from "./charts/question/report.vue";
import mapChart from "./charts/map/report.vue";
import orgStatis from "./charts/org/report.vue";
import dayjs from "dayjs";
import * as api from '@/api/board/cockpit.js'

import "./board.scss";
export default {
  props: [],
  data() {
    return {
      time: "",
      week: "",
      orgTree: [], //分行下拉列表
      activeIndex: "0",
      selectedOrg: {
        id: null,
        name: null,
      },
      electricHost: undefined,
      api
    };
  },

  components: {
    resumptionReport,
    question,
    mapChart,
    orgStatis,
  },

  computed: {
    ...mapGetters(["orgId", "depTree", "orgName"]),
    orgOptions() {
      let deps = this.depTree;
      let recursion = (deps) => {
        for (let index in deps) {
          let dep = deps[index];
          if (!dep.children) {
            continue;
          }
          if (dep.children.length === 0) {
            delete dep.children;
            continue;
          }

          recursion(dep.children);
        }
      };
      recursion(deps);
      // console.info(deps);
      return deps;
    },
  },

  watch: {
    // depTree: {
    //   deep:true,
    //   immediate:true,
    //   handler(trees) {
    //   },
    // },
  },

  created() {
    this.time = dayjs().format("YYYY-MM-DD HH:mm:ss");
    // this.week = this.getweek();
  },

  mounted() {
    // getElectricUrl().then((h) => {
    //   // let h='10.87.10.105:8090';
    //   this.electricHost = h;
    //   Vue.$electricHost = h;
    //   getCurrentUserInfo().then((r) => {
    //     if (r.ret != 1) {
    //       this.$notify.error({
    //         message: "未获取到登录用户信息",
    //       });
    //       return;
    //     }
    //     const userInfo = {
    //       orgId: r.data,
    //     };

    //     Vue.$currentUserInfo = userInfo;
    //     this.getOrgList(userInfo.orgId);
    //     this.orgtimer = setInterval(() => {
    //       this.getOrgList(userInfo.orgId);
    //     }, 1 * 60 * 60 * 1000);
    //   });
    // });
    this.selectedOrg = {
      id: this.orgId,
      name: this.orgName,
    };
  },
  beforeDestroy() {
    clearInterval(this.orgtimer);
    this.orgtimer = null;
  },
  methods: {
    getweek() {
      let week = this.moment().day();
      switch (week) {
        case 1:
          return "星期一";
        case 2:
          return "星期二";
        case 3:
          return "星期三";
        case 4:
          return "星期四";
        case 5:
          return "星期五";
        case 6:
          return "星期六";
        case 0:
          return "星期日";
      }
    },
    handOrgChange(id, m, n) {
      let checked = this.$refs["orgCascader"].getCheckedNodes(true);
      if (!checked || checked.length === 0) {
        return;
      }

      this.selectedOrg = { ...checked[0].data };
    },
    // handleSelect(e) {
    //   var item = this.branchlist.find((o) => o.orgId === parseInt(e));
    //   this.activeIndex = e;
    //   this.selectedOrg = { ...item };
    // },
    // async getOrgList(currentUserOrgId) {
    //   let r = await getOrgList();
    //   if (r.ret === 2) {
    //     this.exitSys();
    //   } else if (r.ret != 1) {
    //     this.$notify.error({
    //       message: `获取机构列表错误：${r.errorMsg}`,
    //       duration: 20 * 1000,
    //     });

    //     return;
    //   }

    //   let { data } = r;
    //   Vue.prototype.$treeList = data;
    //   const tree = this.genDropdownTree(data, currentUserOrgId);
    //   if (tree && tree.length > 0) {
    //     this.selectedOrg = {
    //       orgId: tree[0].id,
    //       name: tree[0].label,
    //     };
    //   }
    //   this.orgTree = tree;

    //   let top = data.find((d) => !data.find((d2) => d2.orgId == d.parentId));
    //   if (!top) {
    //     this.$$notify.error({
    //       message: "未找到顶级机构",
    //       duration: 20 * 1000,
    //     });
    //     return;
    //   }

    //   let branchlist = [];
    //   if (
    //     top.orgType != dictionary.orgType.firstLevelBranchType &&
    //     top.orgType != dictionary.orgType.secondLevelBranchType &&
    //     top.orgType != dictionary.orgType.subBranchType
    //   ) {
    //     this.$$notify.error({
    //       message: "不支持机构类型" + top.orgType,
    //       duration: 20 * 1000,
    //     });
    //     return;
    //   }

    //   branchlist.push(top);
    //   var subOrgType =
    //     top.orgType == dictionary.orgType.firstLevelBranchType
    //       ? dictionary.orgType.secondLevelBranchType
    //       : top.orgType == dictionary.orgType.secondLevelBranchType
    //       ? dictionary.orgType.subBranchType
    //       : undefined;
    //   let subs = data.filter(
    //     (d) => d.orgId != top.orgId && d.orgType == subOrgType
    //   );

    //   this.branchlist = branchlist.concat(subs);
    //   if (!this.branchlist || this.branchlist.length === 0) {
    //     this.$notify.error({
    //       message: "机构列表为空",
    //       duration: 20 * 1000,
    //     });
    //   } else {
    //     if (!this.selectedOrg) {
    //       this.selectedOrg = {
    //         ...this.branchlist[0],
    //       };
    //     }
    //   }
    // },

    // /**生成下拉树 */
    // genDropdownTree(orgList, topOrgId) {
    //   const orgTypeConst = dictionary.orgType;
    //   const needOrgTypes = [
    //     orgTypeConst.firstLevelBranchType,
    //     orgTypeConst.secondLevelBranchType,
    //     orgTypeConst.subBranchType,
    //   ];
    //   const topOrg = orgList.find((org) => org.orgId == topOrgId);
    //   var top = { id: topOrg.orgId, label: topOrg.orgName, path: topOrg.path };
    //   var topTypeIndex = needOrgTypes.indexOf(topOrg.orgType);
    //   if (topTypeIndex < 0) {
    //     return [];
    //   }

    //   var nodes = [top];
    //   if (topTypeIndex == needOrgTypes.length - 1) {
    //     return [top];
    //   }

    //   for (var i = topTypeIndex + 1; i < needOrgTypes.length; i++) {
    //     let tmpNodes = [];
    //     nodes.forEach((item) => {
    //       var children = orgList.filter(
    //         (org) =>
    //           org.path.startsWith(item.path) && org.orgType == needOrgTypes[i]
    //       );
    //       children = children.map((c) => ({
    //         id: c.orgId,
    //         label: c.orgName,
    //         path: c.path,
    //       }));

    //       tmpNodes = tmpNodes.concat(children);
    //       item.children = children;
    //     });
    //     nodes = tmpNodes;
    //   }

    //   return [top];
    // },

    // exitSys() {
    //   this.$alert("确定退出系统吗？", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     showCancelButton: true,
    //     callback: (r) => {
    //       if (r === "confirm") {
    //         logout()
    //           .then((r) => {
    //             location.href =
    //               Vue.$electricHost + "/security/login/sysCenterMain.html";
    //           })
    //           .catch((e) => {
    //             location.href =
    //               Vue.$electricHost + "/security/login/sysCenterMain.html";
    //           });
    //       }
    //     },
    //   });
    // },
  },
};
</script>
<style lang="scss" scoped>
.body {
  background-image: url(@/assets/board/bg.png);
  background-position: 100%;
  background-color: rgba(8, 8, 8);
  color: white;
  /* text-shadow: 0 0 5px #252525; */
  font-size: 18px;
  height: calc(100vh - 86px);
  position: relative;
  overflow: hidden;
}
.topDiv {
  background-image: url(@/assets/board/title-bg.png);
  /* position: absolute; */
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  height: 65px;
  display: flex;
  background-size: 100% 65px;
  justify-content: space-between;

  .logoDiv {
    padding-top: 0;
    padding-top: 10px !important;
    display: flex;
    width: 30%;
    padding-left: 60px;
    // img {
    //   //   margin-bottom: 20px;
    // }

    // ::v-deep .el-divider--vertical {
    //   margin-left: 16px;
    // }

    // ::v-deep .el-select {
    //   //   margin-bottom: 30px;
    //   margin-top: 0;
    //   width: 120px;

    //   .el-input--suffix .el-input__inner {
    //     padding-left: 0;
    //   }
    // }
  }
  .title {
    flex: 1;
    text-align: center;
    padding-top: 10px;
  }

  .title > span:first-child {
    font-size: 1.5rem;
    letter-spacing: 0.3rem;
    color: white;
    line-height: 35px;
  }

  .title > div:last-child {
    line-height: 35px;
    /* width: 300px; */
    margin-top: -20px;
    margin-left: auto;
    margin-right: auto;
  }
  .iconDiv {
    text-align: right;
    padding-right: 2.5rem;
    padding-top: 1.5rem;
    font-size: 16px;
    width: 30%;
  }

  .iconDiv > span {
    margin-left: 5px;
    margin-right: 5px;
  }

  // .iconDiv > span .exit_btn {
  //   // background: url("../../../public/images/exit.png") no-repeat left center;
  //   // background-size: 20px 24px;
  //   padding-left: 25px;
  //   color: #fff;
  //   text-decoration: none;
  //   cursor: pointer;
  // }

  // .iconDiv > span .exit_btn:hover {
  //   text-decoration: underline;
  // }
}

.main {
  padding: 0 20px;
  padding-top: 5px;
  height: calc(100% - 65px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  ::v-deep .el-tabs__nav-wrap::after {
    height: 1 !important;
    background-color: #424040;
  }

  ::v-deep .el-tabs__item {
    color: #8e949c;
    padding: 0 5px;
    font-size: 12px;

    &:hover {
      color: #ffffff;
    }
  }

  ::v-deep .el-tabs {
    .is-active {
      color: #ffffff;
    }

    .el-tabs__header {
      margin: 0 0 8px;
    }

    .el-tabs__active-bar {
      background-color: #2754dd;
    }

    .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
    }
  }

  & > div {
    //height: calc(100% - 100px);

    & > div {
      // border: 1px solid rgba(0, 217, 255, 0.25);
      // background-color: rgba(0, 119, 255, 0.06);
      // border-radius: 8px;
      margin: 0.5rem;
      background-image: url(@/assets/board/area_border.png);
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    &:first-child {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 27%;
      & > div {
        width: calc(100% - 10px);
      }
      & > div:first-child {
        // border: none;
        // border-radius: 0px;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: calc(33% - 16px);
        // padding: 0;
        // margin-bottom: 0px;
        // padding-bottom: 10px;

        // & > div {
        //   width: 49.2%;

        //   & > div {
        //     width: 100%;
        //     height: 100%;
        //     padding: 0.5rem 1rem;
        //     border: 1px solid rgba(0, 217, 255, 0.25);
        //     background-color: rgba(0, 119, 255, 0.06);
        //     border-radius: 8px;

        //     & > p {
        //       text-align: center;
        //       font-size: 16px;
        //     }
        //   }
        // }
      }

      & > div:nth-child(2) {
        // width: 100%;
        height: calc(34% - 16px);
        display: flex;
        justify-content: space-between;
        // border: none;
        // padding: 0;
      }
      & > div:nth-child(3) {
        // width: 100%;
        height: calc(33% - 16px);
        display: flex;
        justify-content: space-between;
        // border: none;
        // padding: 0;
      }
    }

    &:nth-child(2) {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 46%;
      & > div {
        width: calc(100% - 10px);
      }
      .el-divider {
        background-color: #1c326a;
      }

      .el-divider--horizontal {
        margin: 10px 0;
      }

      & > div:first-child {
        height: calc(100%);
        display: flex;
        flex-direction: column;
        // padding: 0.5rem 1rem;
        overflow: hidden;

        & > div:first-child {
          width: 100%;
          height: 80%;
        }
        & > div:nth-child(2) {
          height: calc(20%);
        }
      }
    }

    &:nth-child(3) {
      width: 27%;

      & > div:first-child {
        width: 100%;
        height: calc(33% - 16px);

        // & > div {
        //   height: calc(100% - 21px);
        // }
      }

      & > div:nth-child(2) {
        width: 100%;
        height: calc(34% - 16px);

        // & > div {
        //   height: calc(100% - 21px);
        // }
      }
      & > div:nth-child(3) {
        width: 100%;
        height: calc(33% - 16px);

        // & > div {
        //   height: calc(100% - 21px);
        // }
      }
      // & > div:nth-child(3) {
      //   width: 100%;
      //   height: 34%;

      //   & > div {
      //     height: calc(100% - 21px);
      //   }
      // }
    }
  }
}
.org-cascader {
  margin-top: -5px;
  width: 180px;

  ::v-deep .el-input__inner {
    background-color: transparent !important;
    border: none !important;
    color: rgb(230, 230, 230);
    font-size: 16px;
  }
}
</style>