Commit cbff938b8f880d080a0f1ecc0db7f4a6c8432b76
1 parent
12260143
超哥牛批
Showing
2 changed files
with
382 additions
and
382 deletions
src/views/resume/femalestaff.vue
| 1 | 1 | <template> |
| 2 | - <div class="page"> | |
| 3 | - <div class="top-panel flex1"> | |
| 4 | - <div class="top-panel-content"> | |
| 5 | - <img class="user-head" src="/static/resume/head.png" alt="" /> | |
| 6 | - <div> | |
| 7 | - <div class="user-info"> | |
| 8 | - <h2>{{ userDetail.fullName }}</h2> | |
| 9 | - <img | |
| 10 | - style="height: 30px; margin: 0 20px" | |
| 11 | - src="/static/resume/female/resume13.png" | |
| 12 | - alt="" | |
| 13 | - /> | |
| 14 | - <div class="star-progress"> | |
| 15 | - <div style="width: 50%" class="star-progress-bar"></div> | |
| 16 | - </div> | |
| 2 | + <div class="page"> | |
| 3 | + <div class="top-panel flex1"> | |
| 4 | + <div class="top-panel-content"> | |
| 5 | + <img class="user-head" src="/static/resume/head.png" alt="" /> | |
| 6 | + <div> | |
| 7 | + <div class="user-info"> | |
| 8 | + <h2>{{ userDetail.fullName }}</h2> | |
| 9 | + <img | |
| 10 | + style="height: 30px; margin: 0 20px" | |
| 11 | + src="/static/resume/female/resume13.png" | |
| 12 | + alt="" | |
| 13 | + /> | |
| 14 | + <div class="star-progress"> | |
| 15 | + <div style="width: 50%" class="star-progress-bar"></div> | |
| 17 | 16 | </div> |
| 18 | - <ul class="user-items"> | |
| 19 | - <li v-for="item in infoList" :key="item.title"> | |
| 20 | - <img :src="'/static/resume/female/' + item.icon" alt="" /> | |
| 21 | - <span>{{ item.title }}：{{ item.value }}</span> | |
| 22 | - </li> | |
| 23 | - </ul> | |
| 24 | 17 | </div> |
| 18 | + <ul class="user-items"> | |
| 19 | + <li v-for="item in infoListComputed" :key="item.title"> | |
| 20 | + <img :src="'/static/resume/female/' + item.icon" alt="" /> | |
| 21 | + <span>{{ item.title }}：{{ item.value || '未知' }}</span> | |
| 22 | + </li> | |
| 23 | + </ul> | |
| 25 | 24 | </div> |
| 26 | - <div style="display: flex"> | |
| 27 | - <div style="flex: 1; margin-right: 30px"> | |
| 28 | - <div class="info-panel"> | |
| 29 | - <div class="info-title"> | |
| 30 | - <span>技能优势</span> | |
| 31 | - </div> | |
| 32 | - <div class="info-content"> | |
| 33 | - <ul> | |
| 34 | - <li> | |
| 35 | - <h3>英语六级</h3> | |
| 36 | - <p>资格证书：《英语六级证书》</p> | |
| 37 | - </li> | |
| 38 | - </ul> | |
| 39 | - </div> | |
| 25 | + </div> | |
| 26 | + <div style="display: flex"> | |
| 27 | + <div style="flex: 1; margin-right: 30px"> | |
| 28 | + <div class="info-panel"> | |
| 29 | + <div class="info-title"> | |
| 30 | + <span>技能优势</span> | |
| 40 | 31 | </div> |
| 41 | - <div class="info-panel"> | |
| 42 | - <div class="info-title"> | |
| 43 | - <span>教育经历</span> | |
| 44 | - </div> | |
| 45 | - <div class="info-content"> | |
| 46 | - <ul> | |
| 47 | - <li> | |
| 48 | - <h3 class="flex flex-between"> | |
| 49 | - <span>西南石油大学</span> | |
| 50 | - <span style="font-size: 16px">2014.06-2017.06</span> | |
| 51 | - </h3> | |
| 52 | - <p class="flex flex-between"> | |
| 53 | - <span>计算机科学与技术</span> | |
| 54 | - <span>本科</span> | |
| 55 | - </p> | |
| 56 | - </li> | |
| 32 | + <div class="info-content"> | |
| 33 | + <ul v-if="userDetail.skillAdvantages && userDetail.skillAdvantages.length"> | |
| 34 | + <li v-for="item in userDetail.skillAdvantages" :key="item.title"> | |
| 35 | + <h3>{{item.title}}</h3> | |
| 36 | + <p class="text-overflow2">{{item.desc}}</p> | |
| 37 | + </li> | |
| 57 | 38 | </ul> |
| 58 | - </div> | |
| 39 | + <div v-else>暂无信息</div> | |
| 59 | 40 | </div> |
| 60 | 41 | </div> |
| 61 | - <div class="info-panel" style="flex: 1"> | |
| 42 | + <div class="info-panel"> | |
| 62 | 43 | <div class="info-title"> |
| 63 | - <span>工作经历</span> | |
| 44 | + <span>教育经历</span> | |
| 64 | 45 | </div> |
| 65 | 46 | <div class="info-content"> |
| 66 | - <ul> | |
| 67 | - <li> | |
| 68 | - <h3 class="flex flex-between"> | |
| 69 | - <span>腾讯</span> | |
| 70 | - <span>前端工程师</span> | |
| 71 | - <span style="font-size: 16px">2014.06-2017.06</span> | |
| 72 | - </h3> | |
| 73 | - <p class="text-overflow2"> | |
| 74 | - 负责公司xxxxxx的工作，这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他 | |
| 75 | - 内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其 | |
| 76 | - </p> | |
| 77 | - </li> | |
| 78 | - <li> | |
| 79 | - <h3 class="flex flex-between"> | |
| 80 | - <span>腾讯</span> | |
| 81 | - <span>前端工程师</span> | |
| 82 | - <span style="font-size: 16px">2014.06-2017.06</span> | |
| 83 | - </h3> | |
| 84 | - <p class="text-overflow2"> | |
| 85 | - 负责公司xxxxxx的工作，这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他 | |
| 86 | - 内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其 | |
| 87 | - </p> | |
| 88 | - </li> | |
| 89 | - </ul> | |
| 47 | + <ul v-if="userDetail.workExperience && userDetail.workExperience.length"> | |
| 48 | + <li v-for="item in userDetail.workExperience" :key="item.date"> | |
| 49 | + <h3 class="flex flex-between"> | |
| 50 | + <span>{{ item.school }}</span> | |
| 51 | + <span style="font-size: 16px">{{item.date}}</span> | |
| 52 | + </h3> | |
| 53 | + <p class="flex flex-between"> | |
| 54 | + <span>{{item.major}}</span> | |
| 55 | + <span>{{item.degree}}</span> | |
| 56 | + </p> | |
| 57 | + </li> | |
| 58 | + </ul> | |
| 59 | + <div v-else>暂无信息</div> | |
| 90 | 60 | </div> |
| 91 | 61 | </div> |
| 92 | 62 | </div> |
| 93 | - </div> | |
| 94 | - <div class="bottom-panel flex1"> | |
| 95 | - <div class="panel"> | |
| 96 | - <div class="panel-title"> | |
| 97 | - <span>能力统计图</span> | |
| 98 | - <img src="/static/resume/female/resume11.png" alt="" /> | |
| 63 | + <div class="info-panel" style="flex: 1"> | |
| 64 | + <div class="info-title"> | |
| 65 | + <span>工作经历</span> | |
| 99 | 66 | </div> |
| 100 | - <div class="panel-body"> | |
| 101 | - <div id="echarts1"></div> | |
| 67 | + <div class="info-content"> | |
| 68 | + <ul v-if="userDetail.educationalExperience && userDetail.educationalExperience.length"> | |
| 69 | + <li v-for="item in userDetail.educationalExperience" :key="item.date"> | |
| 70 | + <h3 class="flex flex-between"> | |
| 71 | + <span>{{item.company}}</span> | |
| 72 | + <span>{{item.position}}</span> | |
| 73 | + <span style="font-size: 16px">{{item.date}}</span> | |
| 74 | + </h3> | |
| 75 | + <p class="text-overflow2"> | |
| 76 | + {{item.desc}} | |
| 77 | + </p> | |
| 78 | + </li> | |
| 79 | + </ul> | |
| 80 | + <div v-else>暂无信息</div> | |
| 102 | 81 | </div> |
| 103 | 82 | </div> |
| 104 | - <div class="panel"> | |
| 105 | - <div class="panel-title"> | |
| 106 | - <span>能力统计图</span> | |
| 107 | - <img src="/static/resume/female/resume11.png" alt="" /> | |
| 108 | - </div> | |
| 109 | - <div class="panel-body"> | |
| 110 | - <div id="echarts2"></div> | |
| 111 | - </div> | |
| 83 | + </div> | |
| 84 | + </div> | |
| 85 | + <div class="bottom-panel flex1"> | |
| 86 | + <div class="panel"> | |
| 87 | + <div class="panel-title"> | |
| 88 | + <span>能力统计图</span> | |
| 89 | + <img src="/static/resume/female/resume11.png" alt="" /> | |
| 112 | 90 | </div> |
| 113 | - <div class="panel"> | |
| 114 | - <div class="panel-title"> | |
| 115 | - <span>性格统计图</span> | |
| 116 | - <img src="/static/resume/female/resume12.png" alt="" /> | |
| 117 | - </div> | |
| 118 | - <div class="panel-body"> | |
| 119 | - <div id="echarts3"></div> | |
| 120 | - </div> | |
| 91 | + <div class="panel-body"> | |
| 92 | + <div id="echarts1"></div> | |
| 93 | + </div> | |
| 94 | + </div> | |
| 95 | + <div class="panel"> | |
| 96 | + <div class="panel-title"> | |
| 97 | + <span>能力统计图</span> | |
| 98 | + <img src="/static/resume/female/resume11.png" alt="" /> | |
| 99 | + </div> | |
| 100 | + <div class="panel-body"> | |
| 101 | + <div id="echarts2"></div> | |
| 102 | + </div> | |
| 103 | + </div> | |
| 104 | + <div class="panel"> | |
| 105 | + <div class="panel-title"> | |
| 106 | + <span>性格统计图</span> | |
| 107 | + <img src="/static/resume/female/resume12.png" alt="" /> | |
| 108 | + </div> | |
| 109 | + <div class="panel-body"> | |
| 110 | + <div id="echarts3"></div> | |
| 121 | 111 | </div> |
| 122 | 112 | </div> |
| 123 | 113 | </div> |
| 124 | - </template> | |
| 114 | + </div> | |
| 115 | +</template> | |
| 125 | 116 | <script> |
| 126 | - import * as echarts from "echarts"; | |
| 127 | - import { getOuterUserInfo } from "@/api/user"; | |
| 128 | - export default { | |
| 129 | - data() { | |
| 130 | - return { | |
| 131 | - id: "", | |
| 132 | - infoList: [ | |
| 133 | - { title: "性别", value: "男", icon: "resume17.png" }, | |
| 134 | - { title: "体重", value: "76KG", icon: "resume1.png" }, | |
| 135 | - { title: "身高", value: "181cm", icon: "resume2.png" }, | |
| 136 | - { title: "血型", value: "A型", icon: "resume3.png" }, | |
| 137 | - { title: "年龄", value: "28", icon: "resume8.png" }, | |
| 138 | - { title: "婚否", value: "未婚", icon: "resume14.png" }, | |
| 139 | - { title: "民族", value: "汉族", icon: "resume4.png" }, | |
| 140 | - { title: "政治面貌", value: "党员", icon: "resume5.png" }, | |
| 141 | - { title: "户籍所在地", value: "四川成都", icon: "resume9.png" }, | |
| 142 | - ], | |
| 143 | - echartOption1: { | |
| 144 | - grid: { | |
| 145 | - top: 30, | |
| 146 | - bottom: 20, | |
| 147 | - right: 20, | |
| 148 | - left: 20, | |
| 149 | - }, | |
| 150 | - yAxis: { | |
| 151 | - type: "value", | |
| 152 | - splitLine: { | |
| 153 | - lineStyle: { | |
| 154 | - type: "dashed", | |
| 155 | - }, | |
| 117 | +import * as echarts from "echarts"; | |
| 118 | +import { getOuterUserInfo } from "@/api/user"; | |
| 119 | +export default { | |
| 120 | + data() { | |
| 121 | + return { | |
| 122 | + id: "", | |
| 123 | + infoList: [ | |
| 124 | + { title: "性别", value: "女", icon: "resume17.png" }, | |
| 125 | + { title: "体重", value: "", icon: "resume1.png" }, | |
| 126 | + { title: "身高", value: "", icon: "resume2.png" }, | |
| 127 | + { title: "血型", value: "", icon: "resume3.png" }, | |
| 128 | + { title: "年龄", value: "", icon: "resume8.png" }, | |
| 129 | + { title: "婚否", value: "未婚", icon: "resume14.png" }, | |
| 130 | + { title: "民族", value: "汉族", icon: "resume4.png" }, | |
| 131 | + { title: "政治面貌", value: "", icon: "resume5.png" }, | |
| 132 | + { title: "户籍所在地", value: "", icon: "resume9.png" }, | |
| 133 | + ], | |
| 134 | + echartOption1: { | |
| 135 | + grid: { | |
| 136 | + top: 30, | |
| 137 | + bottom: 20, | |
| 138 | + right: 20, | |
| 139 | + left: 20, | |
| 140 | + }, | |
| 141 | + yAxis: { | |
| 142 | + type: "value", | |
| 143 | + splitLine: { | |
| 144 | + lineStyle: { | |
| 145 | + type: "dashed", | |
| 156 | 146 | }, |
| 147 | + }, | |
| 148 | + axisLabel: { | |
| 149 | + show: false, | |
| 150 | + color: "#EAEBEB", | |
| 151 | + }, | |
| 152 | + }, | |
| 153 | + xAxis: [ | |
| 154 | + { | |
| 155 | + type: "category", | |
| 157 | 156 | axisLabel: { |
| 158 | - show: false, | |
| 159 | - color: "#EAEBEB", | |
| 157 | + color: "#eaeaea", | |
| 158 | + interval: 0, | |
| 159 | + fontSize: 14, | |
| 160 | 160 | }, |
| 161 | + data: [], | |
| 161 | 162 | }, |
| 162 | - xAxis: [ | |
| 163 | - { | |
| 164 | - type: "category", | |
| 165 | - axisLabel: { | |
| 166 | - color: "#eaeaea", | |
| 167 | - interval: 0, | |
| 168 | - fontSize: 14, | |
| 169 | - }, | |
| 170 | - data: [], | |
| 163 | + ], | |
| 164 | + series: [ | |
| 165 | + { | |
| 166 | + type: "bar", | |
| 167 | + barWidth: 25, | |
| 168 | + label: { | |
| 169 | + show: true, | |
| 170 | + color: "#e9a6ff", | |
| 171 | + position: "top", | |
| 171 | 172 | }, |
| 172 | - ], | |
| 173 | - series: [ | |
| 174 | - { | |
| 175 | - type: "bar", | |
| 176 | - barWidth: 25, | |
| 177 | - label: { | |
| 178 | - show: true, | |
| 179 | - color: "#e9a6ff", | |
| 180 | - position: "top", | |
| 181 | - }, | |
| 182 | - itemStyle: { | |
| 183 | - normal: { | |
| 184 | - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |
| 185 | - { offset: 0, color: "#e9a6ffff" }, | |
| 186 | - { offset: 1, color: "#e9a6ff00" }, | |
| 187 | - ]), | |
| 188 | - barBorderRadius: [10, 10, 0, 0], | |
| 189 | - }, | |
| 173 | + itemStyle: { | |
| 174 | + normal: { | |
| 175 | + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |
| 176 | + { offset: 0, color: "#e9a6ffff" }, | |
| 177 | + { offset: 1, color: "#e9a6ff00" }, | |
| 178 | + ]), | |
| 179 | + barBorderRadius: [10, 10, 0, 0], | |
| 190 | 180 | }, |
| 191 | - data: [], | |
| 192 | - }, | |
| 193 | - { | |
| 194 | - type: "line", | |
| 195 | - color: "#e9a6ff", | |
| 196 | - data: [], | |
| 197 | 181 | }, |
| 198 | - ], | |
| 199 | - }, | |
| 200 | - echartOption2: { | |
| 201 | - grid: { | |
| 202 | - top: 30, | |
| 203 | - bottom: 20, | |
| 204 | - right: 20, | |
| 205 | - left: 20, | |
| 182 | + data: [], | |
| 206 | 183 | }, |
| 207 | - yAxis: { | |
| 208 | - type: "value", | |
| 209 | - splitLine: { | |
| 210 | - lineStyle: { | |
| 211 | - type: "dashed", | |
| 212 | - }, | |
| 184 | + { | |
| 185 | + type: "line", | |
| 186 | + color: "#e9a6ff", | |
| 187 | + data: [], | |
| 188 | + }, | |
| 189 | + ], | |
| 190 | + }, | |
| 191 | + echartOption2: { | |
| 192 | + grid: { | |
| 193 | + top: 30, | |
| 194 | + bottom: 20, | |
| 195 | + right: 20, | |
| 196 | + left: 20, | |
| 197 | + }, | |
| 198 | + yAxis: { | |
| 199 | + type: "value", | |
| 200 | + splitLine: { | |
| 201 | + lineStyle: { | |
| 202 | + type: "dashed", | |
| 213 | 203 | }, |
| 204 | + }, | |
| 205 | + axisLabel: { | |
| 206 | + show: false, | |
| 207 | + color: "#EAEBEB", | |
| 208 | + }, | |
| 209 | + }, | |
| 210 | + xAxis: [ | |
| 211 | + { | |
| 212 | + type: "category", | |
| 214 | 213 | axisLabel: { |
| 215 | - show: false, | |
| 216 | - color: "#EAEBEB", | |
| 214 | + color: "#eaeaea", | |
| 215 | + interval: 0, | |
| 216 | + fontSize: 14, | |
| 217 | 217 | }, |
| 218 | + data: [], | |
| 218 | 219 | }, |
| 219 | - xAxis: [ | |
| 220 | - { | |
| 221 | - type: "category", | |
| 222 | - axisLabel: { | |
| 223 | - color: "#eaeaea", | |
| 224 | - interval: 0, | |
| 225 | - fontSize: 14, | |
| 220 | + ], | |
| 221 | + series: [ | |
| 222 | + { | |
| 223 | + type: "bar", | |
| 224 | + barWidth: 25, | |
| 225 | + label: { | |
| 226 | + show: true, | |
| 227 | + color: "#e9a6ff", | |
| 228 | + position: "top", | |
| 229 | + }, | |
| 230 | + itemStyle: { | |
| 231 | + normal: { | |
| 232 | + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |
| 233 | + { offset: 0, color: "#e9a6ffff" }, | |
| 234 | + { offset: 1, color: "#e9a6ff00" }, | |
| 235 | + ]), | |
| 236 | + barBorderRadius: [10, 10, 0, 0], | |
| 226 | 237 | }, |
| 227 | - data: [], | |
| 228 | 238 | }, |
| 239 | + data: [], | |
| 240 | + }, | |
| 241 | + { | |
| 242 | + type: "line", | |
| 243 | + color: "#e9a6ff", | |
| 244 | + data: [], | |
| 245 | + }, | |
| 246 | + ], | |
| 247 | + }, | |
| 248 | + echartOption3: { | |
| 249 | + radar: { | |
| 250 | + indicator: [ | |
| 251 | + { name: "Sales", max: 6500 }, | |
| 252 | + { name: "Administration", max: 16000 }, | |
| 253 | + { name: "Information Technology", max: 30000 }, | |
| 254 | + { name: "Customer Support", max: 38000 }, | |
| 255 | + { name: "Development", max: 52000 }, | |
| 256 | + { name: "Marketing", max: 25000 }, | |
| 229 | 257 | ], |
| 230 | - series: [ | |
| 231 | - { | |
| 232 | - type: "bar", | |
| 233 | - barWidth: 25, | |
| 234 | - label: { | |
| 235 | - show: true, | |
| 236 | - color: "#e9a6ff", | |
| 237 | - position: "top", | |
| 238 | - }, | |
| 239 | - itemStyle: { | |
| 240 | - normal: { | |
| 241 | - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |
| 242 | - { offset: 0, color: "#e9a6ffff" }, | |
| 243 | - { offset: 1, color: "#e9a6ff00" }, | |
| 258 | + }, | |
| 259 | + series: [ | |
| 260 | + { | |
| 261 | + type: "radar", | |
| 262 | + data: [ | |
| 263 | + { | |
| 264 | + name: "", | |
| 265 | + value: [], | |
| 266 | + label: { | |
| 267 | + show: true, | |
| 268 | + formatter: function (params) { | |
| 269 | + return params.value; | |
| 270 | + }, | |
| 271 | + }, | |
| 272 | + areaStyle: { | |
| 273 | + color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [ | |
| 274 | + { | |
| 275 | + color: "#e9a6ff52", | |
| 276 | + offset: 0, | |
| 277 | + }, | |
| 278 | + { | |
| 279 | + color: "#e9a6ff00", | |
| 280 | + offset: 1, | |
| 281 | + }, | |
| 244 | 282 | ]), |
| 245 | - barBorderRadius: [10, 10, 0, 0], | |
| 246 | 283 | }, |
| 247 | 284 | }, |
| 248 | - data: [], | |
| 249 | - }, | |
| 250 | - { | |
| 251 | - type: "line", | |
| 252 | - color: "#e9a6ff", | |
| 253 | - data: [], | |
| 254 | - }, | |
| 255 | - ], | |
| 256 | - }, | |
| 257 | - echartOption3: { | |
| 258 | - radar: { | |
| 259 | - indicator: [ | |
| 260 | - { name: "Sales", max: 6500 }, | |
| 261 | - { name: "Administration", max: 16000 }, | |
| 262 | - { name: "Information Technology", max: 30000 }, | |
| 263 | - { name: "Customer Support", max: 38000 }, | |
| 264 | - { name: "Development", max: 52000 }, | |
| 265 | - { name: "Marketing", max: 25000 }, | |
| 266 | 285 | ], |
| 267 | 286 | }, |
| 268 | - series: [ | |
| 269 | - { | |
| 270 | - type: "radar", | |
| 271 | - data: [ | |
| 272 | - { | |
| 273 | - name: "", | |
| 274 | - value: [], | |
| 275 | - label: { | |
| 276 | - show: true, | |
| 277 | - formatter: function (params) { | |
| 278 | - return params.value; | |
| 279 | - }, | |
| 280 | - }, | |
| 281 | - areaStyle: { | |
| 282 | - color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [ | |
| 283 | - { | |
| 284 | - color: "#e9a6ff52", | |
| 285 | - offset: 0, | |
| 286 | - }, | |
| 287 | - { | |
| 288 | - color: "#e9a6ff00", | |
| 289 | - offset: 1, | |
| 290 | - }, | |
| 291 | - ]), | |
| 292 | - }, | |
| 293 | - }, | |
| 294 | - ], | |
| 295 | - }, | |
| 296 | - ], | |
| 297 | - }, | |
| 298 | - natureList: {}, | |
| 299 | - abilityList: [], | |
| 300 | - user: {}, | |
| 301 | - }; | |
| 302 | - }, | |
| 303 | - computed: { | |
| 304 | - userDetail(){ | |
| 305 | - return this.user; | |
| 287 | + ], | |
| 306 | 288 | }, |
| 307 | - infoListComputed(){ | |
| 308 | - let user = {...this.user}; | |
| 309 | - let infoList = [...this.infoList]; | |
| 310 | - infoList.find(t=>t.title == '民族').value = user.minzu; | |
| 311 | - } | |
| 312 | - }, | |
| 313 | - created() { | |
| 314 | - this.id = this.$route.query.id; | |
| 289 | + natureList: {}, | |
| 290 | + abilityList: [], | |
| 291 | + user: {}, | |
| 292 | + }; | |
| 293 | + }, | |
| 294 | + computed: { | |
| 295 | + userDetail() { | |
| 296 | + return this.user; | |
| 315 | 297 | }, |
| 316 | - mounted() { | |
| 317 | - this.init(); | |
| 298 | + infoListComputed() { | |
| 299 | + let user = { ...this.user }; | |
| 300 | + let infoList = [...this.infoList]; | |
| 301 | + infoList.find((t) => t.title == "民族").value = user.minzu; | |
| 302 | + infoList.find((t) => t.title == "体重").value = user.Weight; | |
| 303 | + infoList.find((t) => t.title == "身高").value = user.Height; | |
| 304 | + infoList.find((t) => t.title == "血型").value = user.BloodType; | |
| 305 | + infoList.find((t) => t.title == "年龄").value = user.age; | |
| 306 | + infoList.find((t) => t.title == "婚否").value = user.Marriage; | |
| 307 | + infoList.find((t) => t.title == "政治面貌").value = user.PoliticalOutlook; | |
| 308 | + infoList.find((t) => t.title == "户籍所在地").value = | |
| 309 | + user.RegisteredResidence; | |
| 310 | + return infoList; | |
| 318 | 311 | }, |
| 319 | - methods: { | |
| 320 | - init() { | |
| 321 | - getOuterUserInfo(this.id).then((res) => { | |
| 322 | - let { nature, ability, user } = res.data; | |
| 323 | - let natureList = []; | |
| 324 | - | |
| 325 | - nature = nature[0]; | |
| 326 | - ability = ability[0]; | |
| 327 | - | |
| 328 | - for (const key in nature) { | |
| 329 | - const val = nature[key]; | |
| 330 | - natureList.push({ | |
| 331 | - title: key, | |
| 332 | - value: val, | |
| 333 | - }); | |
| 334 | - } | |
| 335 | - let abilityList = []; | |
| 336 | - for (const key in ability) { | |
| 337 | - const val = ability[key]; | |
| 338 | - abilityList.push({ | |
| 339 | - title: key, | |
| 340 | - value: val, | |
| 341 | - }); | |
| 342 | - } | |
| 343 | - | |
| 344 | - this.natureList = natureList; | |
| 345 | - this.abilityList = this.abilityList; | |
| 346 | - this.user = user; | |
| 347 | - this.$nextTick(() => { | |
| 348 | - this.initNengliEchart(natureList); | |
| 349 | - this.initXinggeEchart(abilityList); | |
| 312 | + }, | |
| 313 | + created() { | |
| 314 | + this.id = this.$route.query.id; | |
| 315 | + }, | |
| 316 | + mounted() { | |
| 317 | + this.init(); | |
| 318 | + }, | |
| 319 | + methods: { | |
| 320 | + init() { | |
| 321 | + getOuterUserInfo(this.id).then((res) => { | |
| 322 | + let { nature, ability, user } = res.data; | |
| 323 | + let natureList = []; | |
| 324 | + | |
| 325 | + nature = nature[0]; | |
| 326 | + ability = ability[0]; | |
| 327 | + | |
| 328 | + for (const key in nature) { | |
| 329 | + const val = nature[key]; | |
| 330 | + natureList.push({ | |
| 331 | + title: key, | |
| 332 | + value: val, | |
| 350 | 333 | }); |
| 351 | - }); | |
| 352 | - }, | |
| 353 | - initEchart() { | |
| 354 | - this.initNengliEchart(); | |
| 355 | - }, | |
| 356 | - initXinggeEchart(list) { | |
| 357 | - let myChart = echarts.init(document.getElementById("echarts3")); | |
| 358 | - this.echartOption3.radar.indicator = list.map((t) => { | |
| 359 | - return { name: t.title, max: 100 }; | |
| 360 | - }); | |
| 361 | - this.echartOption3.series[0].data[0].value = list.map((t) => t.value); | |
| 362 | - myChart.setOption(this.echartOption3); | |
| 363 | - console.log("this.echartOption3", this.echartOption3); | |
| 364 | - }, | |
| 365 | - initNengliEchart(list) { | |
| 366 | - //第一个echart图 | |
| 367 | - let myChart = echarts.init(document.getElementById("echarts1")); | |
| 368 | - let list1 = list.slice(0, 6); | |
| 369 | - this.echartOption1.xAxis[0].data = list1.map((t) => t.title); | |
| 370 | - this.echartOption1.series[0].data = list1.map((t) => t.value); | |
| 371 | - this.echartOption1.series[1].data = list1.map((t) => t.value); | |
| 372 | - myChart.setOption(this.echartOption1); | |
| 373 | - | |
| 374 | - //第二个图 | |
| 375 | - if (list.length > 6) { | |
| 376 | - let myChart2 = echarts.init(document.getElementById("echarts2")); | |
| 377 | - let list2 = list.slice(6); | |
| 378 | - this.echartOption2.xAxis[0].data = list2.map((t) => t.title); | |
| 379 | - this.echartOption2.series[0].data = list2.map((t) => t.value); | |
| 380 | - this.echartOption2.series[1].data = list2.map((t) => t.value); | |
| 381 | - myChart2.setOption(this.echartOption2); | |
| 382 | 334 | } |
| 383 | - }, | |
| 335 | + let abilityList = []; | |
| 336 | + for (const key in ability) { | |
| 337 | + const val = ability[key]; | |
| 338 | + abilityList.push({ | |
| 339 | + title: key, | |
| 340 | + value: val, | |
| 341 | + }); | |
| 342 | + } | |
| 343 | + | |
| 344 | + this.natureList = natureList; | |
| 345 | + this.abilityList = this.abilityList; | |
| 346 | + this.user = user; | |
| 347 | + this.$nextTick(() => { | |
| 348 | + this.initNengliEchart(natureList); | |
| 349 | + this.initXinggeEchart(abilityList); | |
| 350 | + }); | |
| 351 | + }); | |
| 352 | + }, | |
| 353 | + initEchart() { | |
| 354 | + this.initNengliEchart(); | |
| 355 | + }, | |
| 356 | + initXinggeEchart(list) { | |
| 357 | + let myChart = echarts.init(document.getElementById("echarts3")); | |
| 358 | + this.echartOption3.radar.indicator = list.map((t) => { | |
| 359 | + return { name: t.title, max: 100 }; | |
| 360 | + }); | |
| 361 | + this.echartOption3.series[0].data[0].value = list.map((t) => t.value); | |
| 362 | + myChart.setOption(this.echartOption3); | |
| 363 | + console.log("this.echartOption3", this.echartOption3); | |
| 364 | + }, | |
| 365 | + initNengliEchart(list) { | |
| 366 | + //第一个echart图 | |
| 367 | + let myChart = echarts.init(document.getElementById("echarts1")); | |
| 368 | + let list1 = list.slice(0, 6); | |
| 369 | + this.echartOption1.xAxis[0].data = list1.map((t) => t.title); | |
| 370 | + this.echartOption1.series[0].data = list1.map((t) => t.value); | |
| 371 | + this.echartOption1.series[1].data = list1.map((t) => t.value); | |
| 372 | + myChart.setOption(this.echartOption1); | |
| 373 | + | |
| 374 | + //第二个图 | |
| 375 | + if (list.length > 6) { | |
| 376 | + let myChart2 = echarts.init(document.getElementById("echarts2")); | |
| 377 | + let list2 = list.slice(6); | |
| 378 | + this.echartOption2.xAxis[0].data = list2.map((t) => t.title); | |
| 379 | + this.echartOption2.series[0].data = list2.map((t) => t.value); | |
| 380 | + this.echartOption2.series[1].data = list2.map((t) => t.value); | |
| 381 | + myChart2.setOption(this.echartOption2); | |
| 382 | + } | |
| 384 | 383 | }, |
| 385 | - }; | |
| 386 | - </script> | |
| 384 | + }, | |
| 385 | +}; | |
| 386 | +</script> | |
| 387 | 387 | <style lang="scss" scoped> |
| 388 | - @import "style/style.scss"; | |
| 389 | - @import "style/style_famale.scss"; | |
| 390 | - </style> | |
| 391 | 388 | \ No newline at end of file |
| 389 | +@import "style/style.scss"; | |
| 390 | +@import "style/style_famale.scss"; | |
| 391 | +</style> | |
| 392 | 392 | \ No newline at end of file | ... | ... |
src/views/resume/malestaff.vue
| ... | ... | @@ -16,9 +16,9 @@ |
| 16 | 16 | </div> |
| 17 | 17 | </div> |
| 18 | 18 | <ul class="user-items"> |
| 19 | - <li v-for="item in infoList" :key="item.title"> | |
| 19 | + <li v-for="item in infoListComputed" :key="item.title"> | |
| 20 | 20 | <img :src="'/static/resume/male/' + item.icon" alt="" /> |
| 21 | - <span>{{ item.title }}：{{ item.value }}</span> | |
| 21 | + <span>{{ item.title }}：{{ item.value || "" }}</span> | |
| 22 | 22 | </li> |
| 23 | 23 | </ul> |
| 24 | 24 | </div> |
| ... | ... | @@ -30,12 +30,13 @@ |
| 30 | 30 | <span>技能优势</span> |
| 31 | 31 | </div> |
| 32 | 32 | <div class="info-content"> |
| 33 | - <ul> | |
| 34 | - <li> | |
| 35 | - <h3>英语六级</h3> | |
| 36 | - <p>资格证书：《英语六级证书》</p> | |
| 33 | + <ul v-if="userDetail.skillAdvantages && userDetail.skillAdvantages.length"> | |
| 34 | + <li v-for="item in userDetail.skillAdvantages" :key="item.title"> | |
| 35 | + <h3>{{item.title}}</h3> | |
| 36 | + <p class="text-overflow2">{{item.desc}}</p> | |
| 37 | 37 | </li> |
| 38 | 38 | </ul> |
| 39 | + <div v-else>暂无信息</div> | |
| 39 | 40 | </div> |
| 40 | 41 | </div> |
| 41 | 42 | <div class="info-panel"> |
| ... | ... | @@ -43,18 +44,19 @@ |
| 43 | 44 | <span>教育经历</span> |
| 44 | 45 | </div> |
| 45 | 46 | <div class="info-content"> |
| 46 | - <ul> | |
| 47 | - <li> | |
| 47 | + <ul v-if="userDetail.workExperience && userDetail.workExperience.length"> | |
| 48 | + <li v-for="item in userDetail.workExperience" :key="item.date"> | |
| 48 | 49 | <h3 class="flex flex-between"> |
| 49 | - <span>西南石油大学</span> | |
| 50 | - <span style="font-size: 16px">2014.06-2017.06</span> | |
| 50 | + <span>{{ item.school }}</span> | |
| 51 | + <span style="font-size: 16px">{{item.date}}</span> | |
| 51 | 52 | </h3> |
| 52 | 53 | <p class="flex flex-between"> |
| 53 | - <span>计算机科学与技术</span> | |
| 54 | - <span>本科</span> | |
| 54 | + <span>{{item.major}}</span> | |
| 55 | + <span>{{item.degree}}</span> | |
| 55 | 56 | </p> |
| 56 | 57 | </li> |
| 57 | 58 | </ul> |
| 59 | + <div v-else>暂无信息</div> | |
| 58 | 60 | </div> |
| 59 | 61 | </div> |
| 60 | 62 | </div> |
| ... | ... | @@ -63,30 +65,19 @@ |
| 63 | 65 | <span>工作经历</span> |
| 64 | 66 | </div> |
| 65 | 67 | <div class="info-content"> |
| 66 | - <ul> | |
| 67 | - <li> | |
| 68 | + <ul v-if="userDetail.educationalExperience && userDetail.educationalExperience.length"> | |
| 69 | + <li v-for="item in userDetail.educationalExperience" :key="item.date"> | |
| 68 | 70 | <h3 class="flex flex-between"> |
| 69 | - <span>腾讯</span> | |
| 70 | - <span>前端工程师</span> | |
| 71 | - <span style="font-size: 16px">2014.06-2017.06</span> | |
| 71 | + <span>{{item.company}}</span> | |
| 72 | + <span>{{item.position}}</span> | |
| 73 | + <span style="font-size: 16px">{{item.date}}</span> | |
| 72 | 74 | </h3> |
| 73 | 75 | <p class="text-overflow2"> |
| 74 | - 负责公司xxxxxx的工作，这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他 | |
| 75 | - 内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其 | |
| 76 | - </p> | |
| 77 | - </li> | |
| 78 | - <li> | |
| 79 | - <h3 class="flex flex-between"> | |
| 80 | - <span>腾讯</span> | |
| 81 | - <span>前端工程师</span> | |
| 82 | - <span style="font-size: 16px">2014.06-2017.06</span> | |
| 83 | - </h3> | |
| 84 | - <p class="text-overflow2"> | |
| 85 | - 负责公司xxxxxx的工作，这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他 | |
| 86 | - 内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其他内容这里有其 | |
| 76 | + {{item.desc}} | |
| 87 | 77 | </p> |
| 88 | 78 | </li> |
| 89 | 79 | </ul> |
| 80 | + <div v-else>暂无信息</div> | |
| 90 | 81 | </div> |
| 91 | 82 | </div> |
| 92 | 83 | </div> |
| ... | ... | @@ -131,14 +122,14 @@ export default { |
| 131 | 122 | id: "", |
| 132 | 123 | infoList: [ |
| 133 | 124 | { title: "性别", value: "男", icon: "resume17.png" }, |
| 134 | - { title: "体重", value: "76KG", icon: "resume1.png" }, | |
| 135 | - { title: "身高", value: "181cm", icon: "resume2.png" }, | |
| 136 | - { title: "血型", value: "A型", icon: "resume3.png" }, | |
| 137 | - { title: "年龄", value: "28", icon: "resume8.png" }, | |
| 125 | + { title: "体重", value: "", icon: "resume1.png" }, | |
| 126 | + { title: "身高", value: "", icon: "resume2.png" }, | |
| 127 | + { title: "血型", value: "", icon: "resume3.png" }, | |
| 128 | + { title: "年龄", value: "", icon: "resume8.png" }, | |
| 138 | 129 | { title: "婚否", value: "未婚", icon: "resume14.png" }, |
| 139 | 130 | { title: "民族", value: "汉族", icon: "resume4.png" }, |
| 140 | - { title: "政治面貌", value: "党员", icon: "resume5.png" }, | |
| 141 | - { title: "户籍所在地", value: "四川成都", icon: "resume9.png" }, | |
| 131 | + { title: "政治面貌", value: "", icon: "resume5.png" }, | |
| 132 | + { title: "户籍所在地", value: "", icon: "resume9.png" }, | |
| 142 | 133 | ], |
| 143 | 134 | echartOption1: { |
| 144 | 135 | grid: { |
| ... | ... | @@ -301,14 +292,23 @@ export default { |
| 301 | 292 | }; |
| 302 | 293 | }, |
| 303 | 294 | computed: { |
| 304 | - userDetail(){ | |
| 295 | + userDetail() { | |
| 305 | 296 | return this.user; |
| 306 | 297 | }, |
| 307 | - infoListComputed(){ | |
| 308 | - let user = {...this.user}; | |
| 298 | + infoListComputed() { | |
| 299 | + let user = { ...this.user }; | |
| 309 | 300 | let infoList = [...this.infoList]; |
| 310 | - infoList.find(t=>t.title == '民族').value = user.minzu; | |
| 311 | - } | |
| 301 | + infoList.find((t) => t.title == "民族").value = user.minzu; | |
| 302 | + infoList.find((t) => t.title == "体重").value = user.Weight; | |
| 303 | + infoList.find((t) => t.title == "身高").value = user.Height; | |
| 304 | + infoList.find((t) => t.title == "血型").value = user.BloodType; | |
| 305 | + infoList.find((t) => t.title == "年龄").value = user.age; | |
| 306 | + infoList.find((t) => t.title == "婚否").value = user.Marriage; | |
| 307 | + infoList.find((t) => t.title == "政治面貌").value = user.PoliticalOutlook; | |
| 308 | + infoList.find((t) => t.title == "户籍所在地").value = | |
| 309 | + user.RegisteredResidence; | |
| 310 | + return infoList; | |
| 311 | + }, | |
| 312 | 312 | }, |
| 313 | 313 | created() { |
| 314 | 314 | this.id = this.$route.query.id; | ... | ... |