epmet-oper-gov/src/views/modules/visual/command/cpts/sidemenu.vue

<template>
  <div class="m-menu">
    <div class="list">
      <div
        class="item"
        :key="'menu1' + item.coverageType"
        v-for="item in menuList"
      >
        <div class="info">
          <div class="name">
            {{ item.coverageName }}
            <i v-if="item.count">（{{ item.count }}）</i>
          </div>

          <div class="i-arrow">
            <img src="@/assets/img/shuju/command/arrow-right.png" />
          </div>
        </div>

        <div
          class="granditem"
          :key="'menu3' + granditem.categoryKey"
          v-for="granditem in item.categories"
        >
          <div class="info">
            <div class="i-ico">
              <img
                v-if="grandIcoList[granditem.categoryKey]"
                :src="grandIcoList[granditem.categoryKey]"
              />
            </div>

            <div class="name">
              {{ granditem.categoryName }}
              <i v-if="granditem.count">（{{ granditem.count }}）</i>
            </div>
          </div>
        </div>

        <div
          class="subitem"
          :key="'menu2' + subitem.placeType"
          v-for="subitem in item.placeTypesInAnalysis"
        >
          <div class="info">
            <div class="i-ico">
              <img
                v-if="subitem.placeType == 'xxxxx'"
                src="@/assets/img/shuju/command/fuwusheshi.png"
              />
              <img
                v-if="subitem.placeType == 'enterprise_patrol'"
                src="@/assets/img/shuju/command/qishiyedanweixuncha.png"
              />
              <img
                v-if="subitem.placeType == 'group_rent'"
                src="@/assets/img/shuju/command/qunzufang.png"
              />
              <img
                v-if="subitem.placeType == 'community_org'"
                src="@/assets/img/shuju/command/shequzizhuzi.png"
              />
              <img
                v-if="subitem.placeType == 'superior_resource'"
                src="@/assets/img/shuju/command/youshiziyuan.png"
              />
              <img
                v-if="subitem.placeType == 'volunteer'"
                src="@/assets/img/shuju/command/zhiyuanzhe.png"
              />
              <img
                v-if="subitem.placeType == 'dangerous_chemicals'"
                src="@/assets/img/shuju/command/zhongdianweihuapinqiye.png"
              />
              <img
                v-if="subitem.placeType == 'party_unit'"
                src="@/assets/img/shuju/command/lianjiandanwei.png"
              />
            </div>

            <div class="name">
              {{ subitem.placeTypeName }}
              <i v-if="subitem.count">（{{ subitem.count }}）</i>
            </div>

            <div class="i-arrow">
              <img src="@/assets/img/shuju/command/arrow-right.png" />
            </div>
          </div>

          <div
            class="granditem"
            :key="'menu3' + granditem.categoryKey"
            v-for="granditem in subitem.categories"
          >
            <div class="info">
              <div class="i-ico">
                <img
                  v-if="grandIcoList[granditem.categoryKey]"
                  :src="grandIcoList[granditem.categoryKey]"
                />
              </div>

              <div class="name">
                {{ granditem.categoryName }}
                <i v-if="granditem.count">（{{ granditem.count }}）</i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";

export default {
  name: "sidemenu",

  props: {
    isFullScreen: {
      type: Boolean,
      default: false,
    },

    grandIcoList: {
      type: Object,
      default: () => ({}),
    },
  },

  data() {
    return {
      menuList: [],
    };
  },

  computed: {},

  mounted() {
    this.requestList();
  },

  methods: {
    //加载组织数据
    async requestList() {
      const url = "/data/aggregator/coverage/analysis/resourceCategories";
      let params = {};

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.menuList = data;
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.m-menu {
  padding-top: 10px;

  .list {
    .item {
      position: relative;
      z-index: 2;
      line-height: 60px;
      color: rgba(#fff, 0.8);

      .z-on {
        color: #ffffff;
        background-color: #041267;
        font-weight: bold;
      }

      .info {
        position: relative;
        font-size: 18px;
        width: 100%;
        padding-left: 10px;
        display: flex;
        align-items: center;
        cursor: pointer;

        .i-ico {
          position: relative;
          width: 35px;
          height: 35px;
          margin-right: 4px;

          img {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 2px;
            margin: auto;
          }
        }

        .i-arrow {
          margin-left: auto;
          margin-right: 20px;

          &.z-unfold {
            transform: rotate(90deg);
          }
        }

        &:hover {
          box-shadow: 0 0 30px 5px inset #22f;
          background-color: darken(#104ba4, 12);
        }
      }

      .subitem,
      .granditem {
        > .info {
          padding-left: 20px;
          font-size: 16px;
        }

        .granditem {
          > .info {
            padding-left: 40px;
          }
        }
      }
    }
  }
}
</style>