You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
2.7 KiB
Vue
98 lines
2.7 KiB
Vue
2 months ago
|
<!--
|
||
|
|
* @Author: qinzhenpen qzp1807@126.com
|
||
|
|
* @Date: 2025-05-05 16:42:18
|
||
|
|
* @LastEditors: qinzhenpen qzp1807@126.com
|
||
|
|
* @LastEditTime: 2025-05-21 18:08:10
|
||
|
|
* @FilePath: \e-commerce-internet\src\views\assessment\diagnosis.vue
|
||
|
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<div class="diagnosis app-container">
|
||
|
|
<div class="top_item">
|
||
|
|
<template v-for="(item, index) in tablist" :key="item">
|
||
|
|
<el-button :class="active == index ? 'active' : ''" :style="{ background: `url(${getAssetsFile(item.img)})`, backgroundSize: '100% 100%' }" @click="onClick(index)">
|
||
|
|
{{ item.name }}
|
||
|
|
</el-button>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
<div class="centent ptb10">
|
||
|
|
<component v-if="component" :is="component"></component>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
const { proxy } = getCurrentInstance();
|
||
|
|
import { getAssetsFile, isModuleUnique } from "@/utils/index.js";
|
||
|
|
const tablist = ref([
|
||
|
|
{
|
||
|
|
id: 0,
|
||
|
|
name: "五维四率法",
|
||
|
|
img: "11.png",
|
||
|
|
com: defineAsyncComponent(() => import("./five.vue")),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
name: "KANO模型",
|
||
|
|
img: "22.png",
|
||
|
|
com: defineAsyncComponent(() => import("./kano.vue")),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 2,
|
||
|
|
name: "市场机会矩阵",
|
||
|
|
img: "33.png",
|
||
|
|
com: defineAsyncComponent(() => import("./market.vue")),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 3,
|
||
|
|
name: "流量数据分析法",
|
||
|
|
img: "44.png",
|
||
|
|
com: defineAsyncComponent(() => import("./traffic.vue")),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 4,
|
||
|
|
name: "用户评论分析",
|
||
|
|
img: "55.png",
|
||
|
|
com: defineAsyncComponent(() => import("../digitalMarketingAlgorithms/components/emotion-analysis.vue")),
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
const active = ref(0);
|
||
|
|
const component = ref(tablist.value[0]?.com);
|
||
|
|
const onClick = (idx) => {
|
||
|
|
if (tablist.value[idx]?.status) return proxy.$modal.msgError("该模块暂未开放");
|
||
|
|
active.value = idx;
|
||
|
|
component.value = tablist.value[idx]?.com;
|
||
|
|
};
|
||
|
|
onMounted(() => {
|
||
|
|
tablist.value.forEach((item) => {
|
||
|
|
if (!isModuleUnique([item.name])) {
|
||
|
|
item.status = true;
|
||
|
|
} else {
|
||
|
|
item.status = false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
console.log(tablist.value.filter((item) => !item.status)[0]);
|
||
|
|
active.value = tablist.value.filter((item) => !item.status)[0]?.id;
|
||
|
|
component.value = tablist.value.filter((item) => !item.status)[0]?.com;
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
.diagnosis {
|
||
|
|
.top_item {
|
||
|
|
.el-button {
|
||
|
|
width: 170px;
|
||
|
|
height: 50px;
|
||
|
|
color: #ffffff;
|
||
|
|
border: none;
|
||
|
|
padding-left: 3vw;
|
||
|
|
}
|
||
|
|
.active {
|
||
|
|
transform: scale(1.1);
|
||
|
|
transition: all 0.3s ease-in-out;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.centent {
|
||
|
|
height: calc(100vh - 170px);
|
||
|
|
padding-bottom: 0px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|