四、子向父传值，展示项目经验

简介

发布订阅消息，子向父传值，展示项目经验详细信息。⭐️ 欢迎访问个人的简历网站预览效果

本章涉及修改与新增的文件：Fifth.vue、App.vue、utils、Project.ts

一、创建项目数据

在 src 目录下新建一个 utils 文件夹 ，再创建一个 Project.ts 文件

// 项目经验的详细数据
const project: any = {
  center: {
    projectDescription: "对接不同医院线上的数据，通过统一的VO转化为SaaS兼容同步的管理后台，技术人员接口配置，字段对照，数据同步的设置平台。",
    projectDuty: "● 参与项目开发会议，召开组内会议，分配工作内容，跟进项目进度；\n● 项目框架搭建，业务逻辑梳理，技术栈选型，PC  端后台开发，PigX5.0 低代码开发；\n● 配合后端接口联调，维护线上项目的稳定性，及时处理线上bug；",
    projectEndTime: "2023-09",
    projectGit: "",
    projectName: "智慧医院数据中心管理系统",
    projectOnline: "",
    projectStack: "PigX 低代码开发框架、Vue3技术框架、Vuex、Vue-router、element UI Plus 组件库、TypeScript、钉钉报错通知等",
    projectStartTime: "2021-03"
  },
  SaaS: {
    projectDescription: "对接线下医院的互联网问诊、开方、销售、随访、对账、医生管理等功能的线上平台；提供相同的平台不同的医院操作和管理线上患者和医生，销售及财务等业务功能。",
    projectDuty: "● 参与项目开发会议，召开组内会议，分配工作内容，跟进项目进度；\n● 项目框架搭建，业务逻辑梳理，技术栈选型，PC  端后台开发，PigX 低代码开发；\n● 配合后端接口联调，维护线上项目的稳定性，及时处理线上bug；",
    projectEndTime: "2023-09",
    projectGit: "",
    projectName: "怡宁SaaS互联网智慧医院管理系统",
    projectOnline: "https://pt.yininghosp.com/dev_manager",
    projectStack: "PigX 低代码开发框架、Vue2技术框架、Vuex、Vue-router、element ui 组件库、环信IM即时通讯等",
    projectStartTime: "2021-10"
  },
  wzkn: {
    projectDescription: "患者在线问诊聊天，视频通话，开方买药，量表评测，诊疗记录等功能的小程序平台",
    projectDuty: "● 参与项目开发会议，召开组内会议，分配工作内容，跟进项目进度；\n● 项目框架搭建，业务逻辑梳理，技术栈选型，uniapp 开发，环信IM即时通讯，医保插件开发；配合后端接口联调，维护线上项目的稳定性，及时处理线上bug；",
    projectEndTime: "2023-09",
    projectGit: "",
    projectName: "温州康宁智慧医院（微信、支付宝小程序）",
    projectOnline: "",
    projectStack: "uniapp 框架，Vue2框架，uView UI库，IM即时通讯，医保插件",
    projectStartTime: "2022-12"
  },
  yining: {
    projectDescription: "患者在线问诊聊天，视频通话，开方买药，量表评测，诊疗记录等功能的小程序平台",
    projectDuty: "● 参与项目开发会议，召开组内会议，分配工作内容，跟进项目进度；\n● 项目框架搭建，业务逻辑梳理，技术栈选型，uniapp 开发，环信IM即时通讯，配合后端接口联调，维护线上项目的稳定性，及时处理线上bug；",
    projectEndTime: "2022-12",
    projectGit: "",
    projectName: "怡宁心理互联网医院（微信小程序）",
    projectOnline: "",
    projectStack: "uniapp 框架、Vue2框架、Vuex、Vue-router、grace UI库、IM即时通讯",
    projectStartTime: "2022-03",
  },
  shequ: {
    projectDescription: "社区类管理项目包含智慧充电系统、智慧门禁系统、智慧消防系统、社区服务系统\n1) 智慧充电：是立足于智慧社区的充电支付平台，针对现代化社区电动车的充电需求，为社区住户提供充电点，方便用户便捷充电。配合物业设置充电点，变相限制电动车停放点 。\n2) 智慧门禁：是立足于智慧社区的门禁管理系统，根据物业管理需求设计开发便捷门禁管理系统。为了实现小区管理的安全问题，提高小区的安全性和可查证能力。\n3) 智慧消防：是立足于智慧社区的消防管理系统，配合物业管理安全楼栋，配备消防设备，定期检查统计记录，提供消防反馈，消防意见的记录平台。提高小区的消防安全性。\n4) 社区服务：是立足于智慧社区的社区服务系统，提供社区关爱，社区就业，社区商店，社区公告，社区活动等社区人员可消费，可互动，可参与的平台。"
    , projectDuty: "技术栈选型，项目任务规划、Git代码管理、组件封装复用、需求更替、提审、发布",
    projectEndTime: "2021-10",
    projectGit: "",
    projectName: "智慧社区（后台管理系统、小程序）",
    projectOnline: "",
    projectStack: "Vue、Vuex、Vue-router、vue-element-admin、element-UI、uniapp（H5、小程序）、vant-UI、uView-UI、百度地图、eCharts、微信支付等",
    projectStartTime: "2020-11",
  },
  shike: {
    projectDescription: "一款服务淘宝、京东、拼多多等电商平台卖家推广个人产品，免费送，试用的项目。类似试客联盟，琳琅类型的试用平台。",
    projectDuty: "● 参与项目开发会议，分配工作内容，跟进项目进度；\n● 项目框架搭建，业务逻辑梳理，技术栈选型，vue-admin 开发，配合后端接口联调，维护线上项目的稳定性，及时处理线上bug、管理代码、发布；"
    , projectEndTime: "2020-10",
    projectGit: "",
    projectName: "试客秀后台管理",
    projectOnline: "",
    projectStack: "Vue2框架、Vuex、Vue-router、element UI库",
    projectStartTime: "2020-03",
  },
  xiuka: {
    projectDescription: "由试客秀衍生的项目，服务淘宝、京东、拼多多等电商平台卖家推广个人产品的刷单项目，提高用户产品竞争力",
    projectDuty: "● 参与项目开发会议，分配工作内容，跟进项目进度；\n● 项目框架搭建，业务逻辑梳理，技术栈选型，uniapp 开发，配合后端接口联调，维护线上项目的稳定性，及时处理线上bug、管理代码、发布；"
    , projectEndTime: "2020-12",
    projectGit: "",
    projectName: "秀咖（H5、微信小程序、APP）",
    projectOnline: "",
    projectStack: "uniapp 框架、Vuex、Vue-router、uView UI库",
    projectStartTime: "2020-08",
  }

}
export default project
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

二、修改工作经验组件(Fifth.vue)

给项目文字添加点击事件，使用 defineEmits 注册事件

<template>
  <div class="container">
    <div class="motto">
      <span style="font-size: 30px;">工作经验</span>
      <el-divider />
    </div>

    <div class="intr text-spacing">
      <span v-for="(item, index) of textArr" :Key="index">
        {{ item.text }}
      </span>
    </div>

    <div class="margin-top-xl flex padding-top" style="width: 60%;">
      <div class="flex flex-direction justify-around align-center padding-tb" style="width:15%;min-width: 140px;">
        <div class="sphere" style="backgroundColor: #F05D4B;">
          <span>24个月 +</span>
          <span class="text18">浙江怡宁健康</span>
        </div>
        <div class="sphere" style="backgroundColor: #1cbbb4;">
          <span>19个月</span>
          <span class="text18">杭州云号科技</span>
        </div>
      </div>

      <el-divider direction="vertical" style="height: 100%;" />
      <div class="family padding-left-xl" style="width:85%">
        <div class="square">
          <div>工作时间：2021.10 - 至 今</div>
          <div class="margin-tb-xs">担任岗位：前端开发组长</div>
          <div>工作内容：</div>
          <div class="margin-tb-xs">
            <div>·参与项目开发会议，召开组内会议，分配工作内容，跟进项目进度；</div>
            <div>·项目技术框架搭建，业务逻辑梳理，结构框架搭建，技术栈选型，研究新技术优化项目代码，不定期组内成员code review分享经验心得；</div>
            <div>
              <span>·开发维护</span>
              <el-link class="margin-left-sm text15" type="warning"
                @click="showProjectDetail('center')">智慧医院数据中心</el-link>
              <el-link class="margin-left-sm text15" type="warning"
                @click="showProjectDetail('SaaS')">怡宁SaaS智慧医院</el-link>
              <el-link class="margin-left-sm text15" type="warning" @click="showProjectDetail('wzkn')">康宁智慧医院</el-link>
              <el-link class="margin-left-sm text15" type="warning"
                @click="showProjectDetail('yining')">怡宁心理智慧医院</el-link>
            </div>
          </div>
          <!-- 公司各类项目趋于稳定，实行降本增效，只留下领导层，被动离职。 -->
          <div>离职原因：</div>
        </div>
        <div class="square margin-top-xl">
          <div>工作时间：2020.03 - 2021.10</div>
          <div class="margin-tb-sm">担任岗位：前端开发程序员</div>
          <div>工作内容：</div>
          <div class="margin-tb-xs">
            <div>·完成每日规划的项目任务，同步及跟进任务进度，按时交付项目内容；</div>
            <div>·梳理业务逻辑，结构框架搭建，技术栈选型，UI模型设计，PC端后台开发，uniapp H5开发</div>
            <div>
              <span>·开发维护</span>
              <el-link class="margin-left-sm text15" type="warning" @click="showProjectDetail('shike')">试客秀管理后台</el-link>
              <el-link class="margin-left-sm text15" type="warning" @click="showProjectDetail('xiuka')">秀咖用户端</el-link>
              <el-link class="margin-left-sm text15" type="warning" @click="showProjectDetail('shequ')">智慧社区</el-link>
            </div>
          </div>
          <div>离职原因：初创公司，灰色边缘性业务，受到各平台打压管控，最终解散倒闭。</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="Fifth">
import { reactive } from 'vue'
defineProps({
  count: {
    type: Number
  },
});
// 注册事件
const emit = defineEmits(['showProject'])
// 点击事件
const showProjectDetail = (type: string) => {
  emit('showProject', type)
}
const textArr = reactive([
  { text: '民生在勤，', checked: false },
  { text: '勤则不匮。', checked: false },
  { text: '勤劳一日，', checked: false },
  { text: '可得一夜安眠；', checked: false },
  { text: '勤劳一生，', checked: false },
  { text: '可得幸福长眠。', checked: false }
])
</script>

<style scoped>
.family {
  letter-spacing: 1px;
  line-height: 1.5;
  font-family: 'KaiTi', sans-serif;
}

.sphere {
  min-width: 130px;
  min-height: 130px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 3px 3px 3px 3px rgba(10, 10, 10, .2);
}

.square {
  position: relative;
  width: 100%;
  padding: 20px;
  border-radius: 10px;
  background-color: rgba(10, 10, 10, .3);
  box-shadow: 6px 5px 5px 5px rgba(10, 10, 10, .3);
}

.square::before {
  position: absolute;
  content: '';
  z-index: 20;
  left: -30px;
  top: 80px;
  border: 15px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 15px solid rgba(10, 10, 10, .3);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

三、App.vue 中监听展示项目详情事件

引入要展示的项目经验数据，监听组件中注册的事件，弹框形式展示详情

<template>
  <div class="app-background">
    <el-carousel height="100vh" direction="vertical" :autoplay="false">

      <el-carousel-item>
        <first />
      </el-carousel-item>
      <el-carousel-item>
        <second />
      </el-carousel-item>
      <el-carousel-item>
        <third />
      </el-carousel-item>
      <el-carousel-item>
        <fourth />
      </el-carousel-item>
      <el-carousel-item>
        <fifth @showProject="showProject" />
      </el-carousel-item>

    </el-carousel>

    <!-- 项目经验详情 -->
    <el-dialog v-model="showDialog" center>
      <div class="family">
        <div class="text18" style="text-align: center;font-weight: bold;">{{ projectInfo.projectName }}</div>
        <div class="margin-top" style="text-align: center;">
          {{ projectInfo.projectStartTime }} - {{ projectInfo.projectEndTime }}
        </div>
        <div class="flex margin-top">
          <div style="min-width: 100px;">项目描述：</div>
          <div>{{ projectInfo.projectDescription }}</div>
        </div>
        <div class="flex margin-top">
          <div style="min-width: 100px;">项目职责：</div>
          <div>{{ projectInfo.projectDuty }}</div>
        </div>
        <div class="flex margin-top">
          <div style="min-width: 100px;">技术栈：</div>
          <div>{{ projectInfo.projectStack }}</div>
        </div>
        <div class="flex margin-top" v-if="projectInfo.projectOnline">
          <div style="min-width: 100px;">线上地址：</div>
          <el-link :href="projectInfo.projectOnline" target="_blank">
            {{ projectInfo.projectOnline }}
          </el-link>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import first from './components/First.vue'
import second from './components/Second.vue'
import third from './components/Third.vue'
import fourth from './components/Fourth.vue'
import fifth from './components/Fifth.vue'
import project from './utils/Project.ts' // 引入数据
import { ref } from 'vue'
const showDialog = ref(false)
const projectInfo = ref(project['center'])

const showProject = (value: any) => {
  if (project[value]) {
    projectInfo.value = project[value]
    showDialog.value = true
  }
}
</script>

<style scoped>
.app-background {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url('./assets/bgBig.png');
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: cover;
}

.el-carousel__item {
  min-height: 100vh;
  background-color: rgba(10, 10, 10, 0.3);
}

::v-deep(.el-dialog) {
  background-color: rgb(250, 235, 215);
  animation: jackInTheBox;
  animation-duration: 1.5s;
}
</style> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

---

点赞 评论 收藏 ~~ 留言讨论，如有错误，也希望大家不吝指出。 ~~ 点赞 评论 收藏