ylst-pc/src/views/DataAnalyse/index.vue

<!--
 * @Author: your name
 * @Date: 2022-03-01 10:38:17
 * @LastEditTime: 2022-08-10 09:48:00
 * @LastEditors: rookieDj 845546633@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /planet-front-end/src/views/DataAnalyse/index.vue
-->
<template>
  <div class="datalyse-page">
    <div class="left">
      <left-menu-bar :list="menus"
                     property="name"
                     @menuCheck="checkHandle"></left-menu-bar>
    </div>
    <div class="right scrollbar">
      <router-view :key="new Date().getTime()"></router-view>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from "vuex";
import LeftMenuBar from '@/components/LeftMenuBar';
import { getCurrentInstance } from "vue";
export default defineComponent({
  name: 'analyse',
  components: {
    LeftMenuBar
  },
  setup () {
    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    const menus = ref([]);
    watch(
      () => store.state.common.surveySceneParentid,
      (val) => {
        if (+val === 2) {
          menus.value = [
            { // todo 仅标准版和快测版问卷显示该菜单
              name: '洞察报告',
              icon: '&#xe696;',
              children: [],
              path: '/survey/analyse/insight'
            },
            {
              name: '基础分析',
              icon: '&#xe696;',
              children: [],
              path: '/survey/analyse/diagram'
            },
            {
              name: "交叉分析",
              icon: "&#xe635;",
              children: [],
              path: "/survey/analyse/crosstabs",
            },
            {
              name: '高阶分析',
              icon: '&#xe62c;',
              children: [
                {
                  name: 'KANO分析',
                  icon: '&#xe808;',
                  path: '/survey/analyse/kndiagram/index'
                },
                {
                  name: 'PSM分析',
                  icon: '&#xe807;',
                  path: '/survey/analyse/kndiagram/psm'
                },
                {
                  name: 'MXD分析',
                  icon: '&#xe7a2;',
                  path: '/survey/analyse/kndiagram/mxd'
                },
                // {
                //   name: "市场模拟",
                //   path: "/survey/analyse/kndiagram/index",
                // }
                {
                  // 3D 角色
                  role: 25,
                  name: '3D场景分析',
                  icon:'&#xe7fb;',
                  path: '/survey/analyse/kndiagram/q3d'
                },
                {
                  name: 'NPS分析',
                  icon:'&#xe833;',
                  path: '/survey/analyse/kndiagram/nps'
                },
              ]
            },
            {
              name: '明细数据',
              icon: '&#xe7a7;',
              children: [
                // {
                //   name: '测试数据',
                //   icon: '&#xe7af;',
                //   path: '/survey/analyse/test-particulars'
                // },
                {
                  name: '原始数据',
                  icon: '&#xe7af;',
                  path: '/survey/analyse/data-particulars'
                },
                {
                  name: '回收站',
                  icon: '&#xe76f;',
                  path: '/survey/analyse/recycleBin/detailData'
                },
              ],
              // path: '/survey/analyse/data-particulars'
            },
            // {
            //   // 回收站
            //   name: '回收站',
            //   icon: '&#xe76f;',
            //   children: [
            //     {
            //       name: '数据明细',
            //       path: '/survey/analyse/recycleBin/detailData'
            //     },
            //   ]
            // },
            // {
            //   name: "BI",
            //   icon: "&#xe625;",
            //   children: [],
            //   path: "/survey/analyse/bi",
            // },
            // {
            //   // 市场模拟
            //   name: '市场模拟',
            //   icon: '&#xe696;',
            //   children: [],
            //   path: '/survey/analyse/pbtoAnalog'
            // },

          ];
        }else {
          menus.value = [
            {
              name: '基础分析',
              icon: '&#xe696;',
              children: [],
              path: '/survey/analyse/diagram'
            },
            {
              name: "交叉分析",
              icon: "&#xe635;",
              children: [],
              path: "/survey/analyse/crosstabs",
            },
            {
              name: '高阶分析',
              icon: '&#xe62c;',
              children: [
                {
                  name: 'NPS分析',
                  icon:'&#xe833;',
                  path: '/survey/analyse/kndiagram/nps'
                },
              ]
            },
            {
              name: '明细数据',
              icon: '&#xe7a7;',
              children: [
                // {
                //   name: '测试数据',
                //   icon: '&#xe7af;',
                //   path: '/survey/analyse/test-particulars'
                // },
                {
                  name: '原始数据',
                  icon: '&#xe7af;',
                  path: '/survey/analyse/data-particulars'
                },
                {
                  name: '回收站',
                  icon: '&#xe76f;',
                  path: '/survey/analyse/recycleBin/detailData'
                },
              ],
              // path: '/survey/analyse/data-particulars'
            },
            // {
            //   // 回收站
            //   name: '回收站',
            //   icon: '&#xe76f;',
            //   children: [
            //     {
            //       name: '数据明细',
            //       path: '/survey/analyse/recycleBin/detailData'
            //     },
            //   ]
            // },
            // {
            //   name: "BI",
            //   icon: "&#xe625;",
            //   children: [],
            //   path: "/survey/analyse/bi",
            // },
            // {
            //   // 市场模拟
            //   name: '市场模拟',
            //   icon: '&#xe696;',
            //   children: [],
            //   path: '/survey/analyse/pbtoAnalog'
            // },

          ];
        }
      },{immediate:true,deep:true})
    let { proxy } = getCurrentInstance();
    const checkHandle = (e) => {
      if (e.path) {
        // console.log('path', e.path);
        router.push(`${e.path}?sn=${route.query.sn}`);
      }
    };
    return {
      menus,
      checkHandle
    };
  }
});
</script>


<style lang="scss" scoped>
.datalyse-page {
  width: 100%;
  height: calc(100vh - 70px);
  padding:24px;
  .left {
    // margin-left: 24px;
    margin-bottom: -4px;
    &::-webkit-scrollbar {
      width: 6px;
      background-color: #ddd;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #a5b1c6;
    }
  }
  .right {
    flex: 1;
    // padding: 24px;
    // padding-top: 0;
    overflow-x: hidden;
    background-color: #ffffff;
    height: calc(100vh - 146px);
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.1);
    border-radius: 6px 6px 6px 6px;
position: relative; z-index: 99;
  }
}
</style>