|
|
@@ -0,0 +1,302 @@
|
|
|
+<template>
|
|
|
+ <div class="page-detail">
|
|
|
+ <page-detail-layout :tabs="tabs" :steps-data="stepsData" v-model:tab-active-key="tabActiveKey"
|
|
|
+ :index-config="indexConfig" title="华东电力二期水治理项目">
|
|
|
+ <template #titleRight>
|
|
|
+ <!-- <img src="/@/assets/images/page-detail-layout/customer/SS_user.png" alt="" /> -->
|
|
|
+ <a-tag color="green">服务商</a-tag>
|
|
|
+ <a-tag color="blue">赢单 34%</a-tag>
|
|
|
+ <a-tag color="red">危险 74.9分</a-tag>
|
|
|
+ </template>
|
|
|
+ <template #toolBtn>
|
|
|
+ <a-button ghost type="primary" size="small">项目登记</a-button>
|
|
|
+ <a-button ghost type="primary" size="small">转移</a-button>
|
|
|
+ <a-button ghost type="primary" size="small">预进场</a-button>
|
|
|
+ <a-button ghost danger type="primary" size="small">释放公海</a-button>
|
|
|
+ <a-button type="primary" danger size="small">放弃跟踪</a-button>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #titleBottom>
|
|
|
+ <a-tag color="#f0f4fe" v-for="(tagItem, tagIndex) in tagList" :key="tagIndex">
|
|
|
+ <div class="tag-stl">
|
|
|
+ <img :src="tagItem.icon" alt="" />
|
|
|
+ <span class="title-render">{{ tagItem.title }}</span>
|
|
|
+ </div>
|
|
|
+ </a-tag>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #basicInfo>
|
|
|
+ <BasicInfo :data="descData" />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #marketingActivityGuide>
|
|
|
+ <!-- <RetentionTransformation :id="id" /> -->
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #followUpDetails>
|
|
|
+ <!-- <ServiceMember :id="id" /> -->
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #TaskBoard>
|
|
|
+ <!-- <ActivityInfo :id="id" /> -->
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #serviceMember>
|
|
|
+ <!-- <ActivitySummary :id="id" /> -->
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #projectDecisionChain>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #competitionManage>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #performanceManage>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #quotationManage>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #riskManage>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #dataManage>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #updateHistory>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </page-detail-layout>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { onMounted, ref } from 'vue';
|
|
|
+import { useRoute } from 'vue-router';
|
|
|
+import PageDetailLayout from '/@/components/business/page-detail-layout/index.vue';
|
|
|
+import selectedIcon from '/@/assets/images/page-detail-layout/selectedIcon.png';
|
|
|
+import unSelectedIcon from '/@/assets/images/page-detail-layout/unSelectedIcon.png';
|
|
|
+import BasicInfo from './components/basic-info/index.vue'
|
|
|
+// import RetentionTransformation from './components/retention-transformation/index.vue'
|
|
|
+// import ServiceMember from './components/service-member/index.vue'
|
|
|
+// import ActivityInfo from './components/activity-info/index.vue'
|
|
|
+// import ActivitySummary from './components/activity-summary/index.vue'
|
|
|
+// import { getActivityDetail } from '/@/api/market-manage/activity-manage';
|
|
|
+const route = useRoute()
|
|
|
+const { id } = route.query
|
|
|
+const descData = ref(null)
|
|
|
+onMounted(() => {
|
|
|
+
|
|
|
+})
|
|
|
+const tabActiveKey = ref('0');
|
|
|
+
|
|
|
+const tabs = ref([
|
|
|
+ {
|
|
|
+ title: '基本信息',
|
|
|
+ key: '0',
|
|
|
+ slotName: 'basicInfo',
|
|
|
+ selectedIcon: selectedIcon,
|
|
|
+ unSelectedIcon: unSelectedIcon,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '营销活动指引',
|
|
|
+ key: '1',
|
|
|
+ slotName: 'marketingActivityGuide',
|
|
|
+ selectedIcon: selectedIcon,
|
|
|
+ unSelectedIcon: unSelectedIcon,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '跟进情况',
|
|
|
+ key: '2',
|
|
|
+ slotName: 'followUpDetails',
|
|
|
+ selectedIcon: selectedIcon,
|
|
|
+ unSelectedIcon: unSelectedIcon,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '任务看板',
|
|
|
+ key: '3',
|
|
|
+ slotName: 'TaskBoard',
|
|
|
+ selectedIcon: selectedIcon,
|
|
|
+ unSelectedIcon: unSelectedIcon,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '服务成员',
|
|
|
+ key: '4',
|
|
|
+ slotName: 'serviceMember',
|
|
|
+ selectedIcon: selectedIcon,
|
|
|
+ unSelectedIcon: unSelectedIcon,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '项目决策链',
|
|
|
+ key: '5',
|
|
|
+ slotName: 'projectDecisionChain',
|
|
|
+ selectedIcon: selectedIcon,
|
|
|
+ unSelectedIcon: unSelectedIcon,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '竞争管理',
|
|
|
+ key: '6',
|
|
|
+ slotName: 'competitionManage',
|
|
|
+ selectedIcon: selectedIcon,
|
|
|
+ unSelectedIcon: unSelectedIcon,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '绩效管理',
|
|
|
+ key: '7',
|
|
|
+ slotName: 'performanceManage',
|
|
|
+ selectedIcon: selectedIcon,
|
|
|
+ unSelectedIcon: unSelectedIcon,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '报价管理',
|
|
|
+ key: '8',
|
|
|
+ slotName: 'quotationManage',
|
|
|
+ selectedIcon: selectedIcon,
|
|
|
+ unSelectedIcon: unSelectedIcon,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '风险管理',
|
|
|
+ key: '9',
|
|
|
+ slotName: 'riskManage',
|
|
|
+ selectedIcon: selectedIcon,
|
|
|
+ unSelectedIcon: unSelectedIcon,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '资料管理',
|
|
|
+ key: '10',
|
|
|
+ slotName: 'dataManage',
|
|
|
+ selectedIcon: selectedIcon,
|
|
|
+ unSelectedIcon: unSelectedIcon,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '更新记录',
|
|
|
+ key: '11',
|
|
|
+ slotName: 'updateHistory',
|
|
|
+ selectedIcon: selectedIcon,
|
|
|
+ unSelectedIcon: unSelectedIcon,
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+const tagList = ref([
|
|
|
+ {
|
|
|
+ title: 'XM20250011200001',
|
|
|
+ // icon: getImgUrl('icon-tianyancha'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '华东电力集团',
|
|
|
+ // icon: getImgUrl('icon-xiansuodengji'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '地址',
|
|
|
+ // icon: getImgUrl('icon-biaoqianguanli'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '项目类',
|
|
|
+ // icon: getImgUrl('icon-biaoqianguanli'),
|
|
|
+ },
|
|
|
+])
|
|
|
+const indexConfig = ref({
|
|
|
+ sourceData: [
|
|
|
+ {
|
|
|
+ label: '预计合同额',
|
|
|
+ value: '3,433,443.89',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '招标方式',
|
|
|
+ value: '公开',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '预计开工日期',
|
|
|
+ value: '2025.09.12',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '预计完工日期',
|
|
|
+ value: '2025.09.12',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '联系人',
|
|
|
+ value: 'xxxx',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '联系电话',
|
|
|
+ value: 'xxxxx',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '操作人',
|
|
|
+ value: 'xxxx',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ labelKey: 'label',
|
|
|
+ valueKey: 'value',
|
|
|
+})
|
|
|
+const stepsData = ref([
|
|
|
+ {
|
|
|
+ title: '标段',
|
|
|
+ time: '2024-09-18',
|
|
|
+ status: 'completed',
|
|
|
+ number: 1,
|
|
|
+ lineTopNum: 9,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '商机管理',
|
|
|
+ time: '2024-09-20',
|
|
|
+ status: 'current',
|
|
|
+ number: 2,
|
|
|
+ lineTopNum: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '项目立项',
|
|
|
+ time: '2024-10-11',
|
|
|
+ status: 'todo',
|
|
|
+ number: 3,
|
|
|
+ lineTopNum: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '投标评审',
|
|
|
+ status: 'todo',
|
|
|
+ number: 4,
|
|
|
+ lineTopNum: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '投标管理',
|
|
|
+ status: 'todo',
|
|
|
+ number: 5,
|
|
|
+ lineTopNum: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '中标捷报',
|
|
|
+ status: 'todo',
|
|
|
+ number: 6,
|
|
|
+ lineTopNum: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '合同签订',
|
|
|
+ status: 'todo',
|
|
|
+ number: 7,
|
|
|
+ lineTopNum: 0,
|
|
|
+ },
|
|
|
+])
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page-detail {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .tag-stl {
|
|
|
+ display: flex;
|
|
|
+ gap: 5px;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .title-render {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|