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="orgCascaderSelectedIds"
          :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 }} {{ getweek() }}</span>
      </div>
    </div>
    <div class="main">
      <div>
        <div>
          <resumptionReport
            :orgId="selectedOrg.id"
            :maxDiagram="maxDiagram"
            :orgName="selectedOrg.name"
          />
        </div>
        <div>
          <question :orgId="selectedOrg.id" />
        </div>
        <div>
          <ga38-chart
            :orgId="selectedOrg.id"
            :maxDiagram="maxDiagram"
            :orgName="selectedOrg.name"
          />
        </div>
      </div>
      <div>
        <div>
          <div>
            <mapChart :orgId="selectedOrg.id" />
          </div>
          <div>
            <comprehesive-chart :orgId="selectedOrg.id" />
          </div>
        </div>
      </div>
      <div>
        <div>
          <safety-check-chart :orgId="selectedOrg.id" />
        </div>
        <div>
          <drill-chart
            :orgId="selectedOrg.id"
            :maxDiagram="maxDiagram"
            :orgName="selectedOrg.name"
          />
        </div>
        <div>
          <eduChart
            :orgId="selectedOrg.id"
            :maxDiagram="maxDiagram"
            :orgName="selectedOrg.name"
          />
        </div>

        <!-- <div>
          <div>
            <safetyIndex :orgId="selectedOrg.id" />
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import resumptionReport from "./charts/resumption/report.vue";
import question from "./charts/question/report.vue";
import mapChart from "./charts/map/report.vue";
// import orgStatis from "./charts/org/report.vue";
import ga38Chart from "./charts/ga38/report.vue";
import comprehesiveChart from "./charts/comprehesive/report.vue";
import safetyCheckChart from "./charts/safetycheck/report.vue";
import drillChart from "./charts/drill/report.vue";
import eduChart from "./charts/edu/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,
      },
      maxDiagram: null,
      orgCascaderSelectedIds: [],
      electricHost: undefined,
      api,
    };
  },

  components: {
    resumptionReport,
    question,
    mapChart,
    ga38Chart,
    comprehesiveChart,
    safetyCheckChart,
    drillChart,
    eduChart,
  },

  computed: {
    ...mapGetters(["orgId", "depTree", "orgName","orgType"]),
    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,
    };
    this.setMaxDiagram(this.orgType)    
    this.orgCascaderSelectedIds = [this.orgId];
  },
  beforeDestroy() {
    clearInterval(this.orgtimer);
    this.orgtimer = null;
  },
  methods: {
    getweek() {
      let week = dayjs().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 = {
        id: checked[0].data.id,
        name: checked[0].data.shortName,
      };

     this. setMaxDiagram(checked[0].data.type)      
    },
    setMaxDiagram(type){
      if (type == 3) {
        this.maxDiagram = 10;
      } else {
        this.maxDiagram = null;
      }
    }
  },
};
</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: 4rem;
    padding-top: 1rem;
    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: 75%;
        }
        & > div:nth-child(2) {
          height: calc(25%);
        }
      }
    }

    &: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>
<style lang="scss">
.board-org-popper {
  .el-cascader-menu__wrap {
    height: auto !important;
  }

  .el-scrollbar__wrap {
    overflow: auto;
  }
}
</style>