large-vue/src/views/screen/service/main.vue

<template>
  <div class="main-data data-service">
    <div class="left">
      <div class="left-cont" v-if="leftTopShow || leftMidShow || leftBotShow">
        <div
          class="left-top"
          @click="showDialog(1)"
          @mouseover="showDialog(1, 1)"
          v-if="leftTopShow"
        >
          <div class="cont-title-area">
            <img
              class="cont-title-bg"
              src="@/assets/images/main/cont_title_bg.png"
              alt=""
            />
            <div class="cont-title">员工概况</div>
          </div>
          <div class="components-item">
            <employee-profile :appOrg="appOrg"></employee-profile>
          </div>
        </div>
        <div
          class="left-middle"
          @click="showDialog(2)"
          @mouseover="showDialog(2, 1)"
          v-if="leftMidShow"
        >
          <div class="cont-title-area">
            <img
              class="cont-title-bg"
              src="@/assets/images/main/cont_title_bg.png"
              alt=""
            />
            <div class="cont-title">员工健康</div>
          </div>
          <div class="components-item">
            <employee-health :appOrg="appOrg"></employee-health>
          </div>
        </div>
        <div
          class="left-bottom"
          @click="showDialog(3)"
          @mouseover="showDialog(3, 1)"
          v-if="leftBotShow"
        >
          <div class="cont-title-area">
            <img
              class="cont-title-bg"
              src="@/assets/images/main/cont_title_bg.png"
              alt=""
            />
            <div class="cont-title">绿智食堂</div>
          </div>
          <div class="components-item">
            <canteen :appOrg="appOrg"></canteen>
          </div>
        </div>
      </div>
    </div>
    <div class="middle">
      <province
        v-if="showMap"
        ref="province"
        @mapClick="onMapClick"
        height="920px"
      ></province>
      <img
        v-if="showLocal"
        class="build"
        src="@/assets/images/build.png"
        alt=""
      />
      <!-- 返回按钮 -->
      <div class="bottom-area flex-row align-items-center space-between">
        <div class="bottom-left flex-row align-items-center" style="display: flex;">
          <div class="left-item">
            <el-cascader
              v-model="curCompany"
              :options="company"
              @change="handleCompanyChange"
              placeholder="单位"
              :show-all-levels="false"
            >
              <template slot-scope="{ node, data }">
                <div style="display: flex; align-items: center">
                  <img
                    v-if="data.label == '山西省公司(本部)'"
                    src="../../../assets/images/main/tiaozhuanlouyu.png"
                    style="width: 15px; margin-right: 10px"
                  />
                  <span
                    v-else-if="data.value == '1A001' || data.value == '1A002' || data.value == '1A004' || data.value == '1A005'"
                    style="
                      display: inline-block;
                      width: 10px;
                      height: 10px;
                      border-radius: 50%;
                      margin-right: 10px;
                      background: rgb(255, 180, 74);
                    "
                  ></span>
                  <span
                    v-else-if="data.value.length == 5 && data.value != '10001'"
                    style="
                      display: inline-block;
                      width: 10px;
                      height: 10px;
                      border-radius: 50%;
                      margin-right: 10px;
                      background: rgb(74, 194, 29);
                    "
                  ></span>
                  <span
                    v-else-if="data.value.length == 7"
                    style="
                      display: inline-block;
                      width: 10px;
                      height: 10px;
                      border-radius: 50%;
                      margin-right: 10px;
                      background: rgb(99, 235, 255);
                    "
                  ></span>
                  <span>{{ data.label }}</span>
                </div>
                <!-- <div
                    v-if="data.level == 2"
                    style="width: 1.5vh;height: 1.5vh;background-color: red;border-radius: 60%;margin-top:10px;margin-left:10px;float:right"
                  ></div> -->
              </template>
            </el-cascader>
          </div>
          <div class="office" disabled>办公区</div>
        </div>
        <div class="bottom-right">
          <img
            v-if="showBack"
            @click="onBack"
            src="@/assets/images/main/back.png"
            class="back"
          />
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-cont" v-if="rightShow">
        <div
          class="right-top"
          @click="showDialog(4)"
          @mouseover="showDialog(4, 1)"
        >
          <div class="cont-title-area">
            <img
              class="cont-title-bg"
              src="@/assets/images/main/cont_title_bg.png"
              alt=""
            />
            <div class="cont-title">共享驿站</div>
          </div>
          <div class="components-item">
            <share-station :key="appOrg" :appOrg="appOrg"></share-station>
          </div>
        </div>
        <div
          class="right-middle"
          @click="showDialog(5)"
          @mouseover="showDialog(5, 1)"
        >
          <div class="cont-title-area">
            <img
              class="cont-title-bg"
              src="@/assets/images/main/cont_title_bg.png"
              alt=""
            />
            <div class="cont-title">物业服务</div>
          </div>
          <div class="components-item">
            <property :appOrg="appOrg"></property>
          </div>

        </div>
        <div
          class="right-bottom"
          @click="showDialog(6)"
          @mouseover="showDialog(6, 1)"
        >
        <div class="cont-title-area">
            <img
              class="cont-title-bg"
              src="@/assets/images/main/cont_title_bg.png"
              alt=""
            />
            <div class="cont-title">基础运行数据</div>
          </div>
          <div class="components-item">
            <basic-operation :appOrg="appOrg"></basic-operation>
          </div>
        </div>
      </div>
    </div>

    <!--弹出层-->
    <div
      :class="dialogType < 4 ? 'dialog' : 'dialog-r'"
      v-if="dialogShow"
      @click="closeDialog"
    >
      <employee-profile-dialog
        v-if="dialogType === 1"
        @closeDialog="closeDialog"
        :appOrg="appOrg"
      ></employee-profile-dialog>
      <employee-health-dialog
        v-if="dialogType === 2"
        @closeDialog="closeDialog"
        :appOrg="appOrg"
      ></employee-health-dialog>
      <canteen-dialog
        v-if="dialogType === 3"
        @foodsClick="onFoodsClick"
        @closeDialog="closeDialog"
        :appOrg="appOrg"
      ></canteen-dialog>
      <share-station-dialog
        v-if="dialogType === 4"
        @closeDialog="closeDialog"
        :appOrg="appOrg"
      ></share-station-dialog>
      <property-dialog
        v-if="dialogType === 5"
        @closeDialog="closeDialog"
        :appOrg="appOrg"
      ></property-dialog>
      <basic-operation-dialog
        v-if="dialogType === 6"
        @closeDialog="closeDialog"
        :appOrg="appOrg"
      ></basic-operation-dialog>
    </div>

    <!-- 菜谱区域 -->
    <div v-if="showCenter" class="dialog-2">
      <div class="dialog-center">
        <week-foods
          v-if="showType === 1"
          @closeFoods="onCloseFoods"
          @chooseFoods="onChooseFoods"
          :appOrg="appOrg"
          :week="week"
        ></week-foods>
        <day-foods
          v-if="showType === 2"
          @closeFoods="onCloseFoods2"
          :appOrg="appOrg"
          :week="week"
        ></day-foods>
      </div>
    </div>
  </div>
</template>

<script>
import EmployeeProfile from "./employeeProfile.vue";
import EmployeeHealth from "./employeeHealth.vue";
import Canteen from "./canteen.vue";
import ShareStation from "./shareStation.vue";
import Property from "./property.vue";
import BasicOperation from "./basicOperation.vue";
import Province from "../map/province.vue";
import EmployeeProfileDialog from "./employeeProfileDialog.vue";
import ShareStationDialog from "./shareStationDialog.vue";
import PropertyDialog from "./propertyDialog.vue";
import EmployeeHealthDialog from "./employeeHealthDialog.vue";
import CanteenDialog from "./canteenDialog.vue";
import BasicOperationDialog from "./basicOperationDialog.vue";
import WeekFoods from "./weekFoods.vue";
import DayFoods from "./dayFoods.vue";

// 引入json数据
import company from "../data/company.json";
var weeks = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];

export default {
  name: "ServiceMain",
  components: {
    EmployeeProfile,
    EmployeeHealth,
    Canteen,
    ShareStation,
    Property,
    BasicOperation,
    Province,
    EmployeeProfileDialog,
    ShareStationDialog,
    PropertyDialog,
    EmployeeHealthDialog,
    CanteenDialog,
    BasicOperationDialog,
    WeekFoods,
    DayFoods,
  },
  props: {},
  data() {
    return {
      leftTopShow: true,
      leftMidShow: true,
      leftBotShow: true,
      rightShow: true,
      dialogShow: false,
      dialogType: 0,
      curDeep: 1,
      showBack: false,
      showCenter: false,
      showType: 0,
      curCompany: [],
      company: company,
      week: 0, //当前选择的周日情况
      showMap: true,
      showLocal: false,
      appOrg: "0000",
    };
  },
  created() {
    let weekIndex = new Date().getDay();
    if(weekIndex == 0){//周日
      this.week = '周日'
    }else{
      this.week = weeks[weekIndex - 1]
    }
  },
  destroyed() {},
  beforeDestroy() {},
  mounted() {},
  methods: {
    showDialog(type, index = 0) {
      setTimeout(() => {
        if (type < 4) {
          if (type === 2) {
            this.leftTopShow = true;
            this.leftMidShow = false;
            this.leftBotShow = false;
            this.rightShow = true;
          } else {
            this.leftTopShow = false;
            this.leftMidShow = false;
            this.leftBotShow = false;
            this.rightShow = true;
          }
        } else {
          this.leftTopShow = true;
          this.leftMidShow = true;
          this.leftBotShow = true;
          this.rightShow = false;
        }
        this.dialogShow = true;
        this.dialogType = type;
      }, index * 200);
    },
    closeDialog() {
      this.leftTopShow = true;
      this.leftMidShow = true;
      this.leftBotShow = true;
      this.rightShow = true;
      this.dialogShow = false;
    },

    //点击地图事件
    onMapClick(e) {
      this.curDeep = e.deep;
      if (e.deep > 1) {
        this.showBack = true;
      } else {
        this.showBack = false;
      }
      //点击山西省本部
      if (e.name == "山西省公司(本部)") {
        this.showMap = false;
        this.showLocal = true;
        this.curCompany = ["10001", "10001"];
        this.appOrg = "10001";
      } else {
        this.showMap = true;
        this.showLocal = false;
        this.curCompany = e.curCompany;

      }
      //判断是否点击了子单位
      if (e.curCompany && e.curCompany.length > 0) {
        let appOrg = e.curCompany[e.curCompany.length - 1];
        this.appOrg = appOrg;
      }
    },

    //点击菜谱
    onFoodsClick(e) {
      // this.leftShow = true;
      // this.rightShow = true;
      // this.dialogShow = false;
      this.showCenter = true;
      if (e === 0) {
        this.showType = 1;
      } else {
        this.showType = 2;
      }
      // else if (e === 1) {
      //   this.showType = 2;
      // }
    },

    //关闭菜谱
    onCloseFoods() {
      // this.leftShow = true;
      // this.rightShow = true;
      // this.dialogShow = false;
      this.showCenter = false;
    },

    //关闭菜谱
    onCloseFoods2() {
      // this.leftShow = true;
      // this.rightShow = true;
      // this.dialogShow = false;
      // this.showType = 1;
      this.showCenter = false;
    },

    //选择周菜谱 日期
    onChooseFoods(week) {
      // this.showType = 2;
      // this.week = week;

      // this.showCenter = false;
    },

    //返回操作
    onBack() {
      this.curDeep--;
      if (this.curDeep <= 1) {
        this.showBack = false;
        this.showMap = true;
        this.showLocal = false;
        this.curCompany = [];
      }
      this.appOrg = "0000";
      this.$refs.province.reloadMap(this.curDeep);
    },

    //选择公司
    handleCompanyChange(e) {
      if (e && e.length > 0) {
        if (e[1] == "10001") {
          this.showMap = false;
          this.showLocal = true;
          this.showBack = true;
        } else {
          this.showMap = true;
          this.showLocal = false;
        }
        let appOrg = e[e.length - 1];
        this.appOrg = appOrg;
      }
      if(e[1] == "1A001" || e[1] == "1A002" || e[1] == "1A004" || e[1] == "1A005"){
        this.showMap = true;
        this.showLocal = false;
        this.showBack = true;
        // return;
      }
      this.$refs.province.chooseUnit(e);
    },
  },
};
</script>

<style lang="scss">
.el-popper {
  border: 1px solid #00ffff;
  .el-cascader-node:hover,
  .el-cascader-node:visited {
    background: #15696b !important;
  }
  .el-cascader-menu {
    background: #15696b !important;
    color: #fff !important;
    border-right: solid 1px #00ffff !important;
  }
  .el-cascader-node.in-active-path,
  .el-cascader-node.is-selectable.in-checked-path,
  .el-cascader-node.is-active {
    color: #00ffff;
    background: #15696b !important;
  }
  .el-cascader-node__label {
    font-size: 12px;
  }
  .el-cascader-node {
    padding: 0 20px 0 0 !important;
  }
  .el-cascader-node__prefix {
    display: none !important;
  }
  .el-popper .el-cascader-node {
    height: 28px !important;
    line-height: 28px !important;
  }
  .el-cascader-node {
    height: 28px !important;
    line-height: 28px !important;
  }
  .el-cascader-menu__wrap {
    height: 250px  !important;
  }
}

.data-service {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  // background-image: url("../../../assets/images/service_guarantee/bg.jpg");
  // background-size: cover;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .left {
    margin: 125px 0 0 40px;
    width: 580px;
    .left-cont {
      width: 100%;
      height: 920px;
      padding-top: 19px;
      background: url("../../../assets/images/main/main_bg.png") no-repeat;
      background-size: cover;
    }
    .components-item {
      width: 550px;
      height: 237px;
      background: url("../../../assets/images/main/components_bg.png") no-repeat;
      background-size: cover;
      margin-bottom: 28px;
      margin-left: 15px;
      overflow: hidden;
    }

    .left-top {
      // width: 550px;
      // height: 288px;
      // background: url("../../../assets/images/service_new/left_top.png")
      //   no-repeat;
      // background-size: cover;
      // margin-bottom: 21px;
    }
    .left-middle {
      // width: 550px;
      // height: 288px;
      // background: url("../../../assets/images/service_new/left_top.png")
      //   no-repeat;
      // background-size: cover;
      // margin-bottom: 21px;
    }
    .left-bottom {
      // width: 550px;
      // height: 288px;
      // background: url("../../../assets/images/service_new/left_top.png")
      //   no-repeat;
      // background-size: cover;
    }
  }
  .middle {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 125px 0 0 0px;
    position: relative;
    .bottom-area {
      position: absolute;
      right: 50px;
      left: 50px;
      bottom: 50px;

      .bottom-left {
        .left-item {
          width: 180px;
          height: 30px;
          background: url("../../../assets/images/main/choose_bg_long.png")
            no-repeat;
          background-size: cover;
          input {
            background: rgba(255, 255, 255, 0);
            border: none;
            color: #00ffff;
          }
          .el-input__icon {
            color: #00ffff;
          }
        }
        .office {
          margin-left: 10px;
          width: 180px;
          height: 30px;
          line-height: 30px;
          padding-left: 15px;
          color: #898989;
          background: url("../../../assets/images/main/choose_bg_long.png")
            no-repeat;
          background-size: cover;
          font-size: 14px;
        }
      }

      .bottom-right {
        .back {
          width: 34px;
          height: 30px;
          cursor: pointer;
        }
      }
    }
  }
  .right {
    margin: 125px 40px 0 0px;
    width: 580px;
    .right-cont {
      width: 100%;
      height: 920px;
      padding-top: 19px;
      background: url("../../../assets/images/main/main_bg.png") no-repeat;
      background-size: cover;
    }
    .components-item {
      width: 550px;
      height: 237px;
      background: url("../../../assets/images/main/components_bg.png") no-repeat;
      background-size: cover;
      margin-bottom: 28px;
      margin-left: 15px;
      overflow: hidden;
    }
    .right-top {
      // width: 550px;
      // height: 288px;
      // background: url("../../../assets/images/service_new/left_top.png")
      //   no-repeat;
      // background-size: cover;
      // margin-bottom: 21px;
    }
    .right-middle {
      // width: 550px;
      // height: 288px;
      // background: url("../../../assets/images/service_new/left_top.png")
      //   no-repeat;
      // background-size: cover;
      // margin-bottom: 21px;
    }
    .right-bottom {
      // width: 550px;
      // height: 288px;
      // background: url("../../../assets/images/service_new/left_top.png")
      //   no-repeat;
      // background-size: cover;
    }
  }

  .dialog {
    position: fixed;
    top: 125px;
    left: 40px;
    z-index: 1000;
    width: 100%;
  }
  .dialog-r {
    position: fixed;
    top: 125px;
    right: 40px;
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .dialog-2 {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
  }
  .build {
    margin: 0 auto;
    width: 90%;
    height: auto;
    object-fit: contain;
  }

  .slide-fade-enter-active {
    animation: bounce-in 5s ease;
  }
  .slide-fade-leave-active {
    animation: bounce-in 5s reverse;
  }

  .cont-title-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 10px;
    img {
      width: 284px;
      height: 32px;
    }
    .cont-title {
      font-size: 20px;
      font-weight: 900;
      font-family: "PingFangSC";
      width: 100%;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      top: -5px;
      color: #fff;
    }
  }

  @keyframes bounce-in {
    0% {
      width: 0;
    }
    100% {
      width: 200px;
    }
  }

  ::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }

  ::-webkit-scrollbar-thumb {
    //滑块部分
    // border-radius: 5px;
    background-color: #58cbbb;
  }

  ::-webkit-scrollbar-track {
    //轨道部分
    // box-shadow: inset 0 0 5px #ddd;
    background: #ddd;
    // border-radius: 5px;
  }
}
</style>