| import{_ as r,r as s,o as d,c as p,a as e,b as a,w as c,d as l,p as i,e as u}from"./index-N9uXFhy4.js";const h={},t=o=>(i("data-v-80d1ee2a"),o=o(),u(),o),m={class:"nopage"},f=t(()=>e("span",{style:{color:"#0074D9"}},"4",-1)),v=t(()=>e("span",{style:{color:"#67C23A"}},"0",-1)),x=t(()=>e("span",{style:{color:"#0074D9"}},"4",-1)),y=t(()=>e("p",null,"你页面走丢了~",-1));function b(o,k){const n=s("a-button"),_=s("router-link");return d(),p("div",m,[f,v,x,e("div",null,[y,e("p",null,[a(_,{to:"/job/home"},{default:c(()=>[a(n,{type:"primary"},{default:c(()=>[l("返回首页")]),_:1})]),_:1})])])])}const w=r(h,[["render",b],["__scopeId","data-v-80d1ee2a"]]);export{w as default}; | |||||
| import{_ as r,r as s,o as d,c as p,a as e,b as a,w as c,d as l,p as i,e as u}from"./index-HS7lw29o.js";const h={},t=o=>(i("data-v-80d1ee2a"),o=o(),u(),o),m={class:"nopage"},f=t(()=>e("span",{style:{color:"#0074D9"}},"4",-1)),v=t(()=>e("span",{style:{color:"#67C23A"}},"0",-1)),x=t(()=>e("span",{style:{color:"#0074D9"}},"4",-1)),y=t(()=>e("p",null,"你页面走丢了~",-1));function b(o,k){const n=s("a-button"),_=s("router-link");return d(),p("div",m,[f,v,x,e("div",null,[y,e("p",null,[a(_,{to:"/job/home"},{default:c(()=>[a(n,{type:"primary"},{default:c(()=>[l("返回首页")]),_:1})]),_:1})])])])}const w=r(h,[["render",b],["__scopeId","data-v-80d1ee2a"]]);export{w as default}; |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||||
| <script src="https://map.qq.com/api/gljs?v=1.exp&key=MPBBZ-HUICZ-EGRXB-7AHZI-R4GQZ-QWBSO"></script> | <script src="https://map.qq.com/api/gljs?v=1.exp&key=MPBBZ-HUICZ-EGRXB-7AHZI-R4GQZ-QWBSO"></script> | ||||
| <title>菊城人才网</title> | <title>菊城人才网</title> | ||||
| <script type="module" crossorigin src="/assets/index-N9uXFhy4.js"></script> | |||||
| <link rel="stylesheet" crossorigin href="/assets/index-G25Ml6HQ.css"> | |||||
| <script type="module" crossorigin src="/assets/index-HS7lw29o.js"></script> | |||||
| <link rel="stylesheet" crossorigin href="/assets/index-T1Q0jmCH.css"> | |||||
| </head> | </head> | ||||
| <body> | <body> | ||||
| <div id="app"></div> | <div id="app"></div> |
| </a-descriptions-item> | </a-descriptions-item> | ||||
| </a-descriptions> | </a-descriptions> | ||||
| </div> | </div> | ||||
| <div style="margin-top: 30px;"> | |||||
| <div style="margin-top: 30px;" v-if="detail"> | |||||
| <a-descriptions :column="1" title="地图"> | <a-descriptions :column="1" title="地图"> | ||||
| <a-descriptions-item :span="24"> | <a-descriptions-item :span="24"> | ||||
| <div ref="mapJob" class="map-container"></div> | |||||
| <!-- <map-marker></map-marker> --> | |||||
| </a-descriptions-item> | </a-descriptions-item> | ||||
| </a-descriptions> | </a-descriptions> | ||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script setup lang="ts"> | <script setup lang="ts"> | ||||
| import { ref, computed, onMounted, defineProps, watch, createVNode } from 'vue'; | |||||
| import { ref, computed, onMounted, defineProps, watch, createVNode, nextTick } from 'vue'; | |||||
| import { GetJobDetail, GetJobAuthDetail, PostJobseekAddfavorite, PostJobseekDelfavorite, PostJobseekAddapplication } from '@/apis/models'; | import { GetJobDetail, GetJobAuthDetail, PostJobseekAddfavorite, PostJobseekDelfavorite, PostJobseekAddapplication } from '@/apis/models'; | ||||
| import MapMarker from '@/components/map/marker.vue' | |||||
| import { useCommon } from '@/hooks/useCommon'; | import { useCommon } from '@/hooks/useCommon'; | ||||
| import { warnToast, successToast } from '@/utils/toastHelper'; | import { warnToast, successToast } from '@/utils/toastHelper'; | ||||
| let { store, commomParams, dayjs, richOption, ExclamationCircleOutlined, Modal, showOtherModal1 } = useCommon(); | let { store, commomParams, dayjs, richOption, ExclamationCircleOutlined, Modal, showOtherModal1 } = useCommon(); | ||||
| let detail = ref<Object>(null) | let detail = ref<Object>(null) | ||||
| let token = ref(sessionStorage.getItem('token') ? sessionStorage.getItem('token') : '') | let token = ref(sessionStorage.getItem('token') ? sessionStorage.getItem('token') : '') | ||||
| let role = ref(sessionStorage.getItem('role') ? sessionStorage.getItem('role') : '') | let role = ref(sessionStorage.getItem('role') ? sessionStorage.getItem('role') : '') | ||||
| const mapJob = ref(null); | |||||
| onMounted(() => { | |||||
| }) | |||||
| const getDetail = () => { | const getDetail = () => { | ||||
| if (sessionStorage.getItem('token')) { | if (sessionStorage.getItem('token')) { | ||||
| GetJobAuthDetail({ id: job_id.value }).then(res => { | |||||
| GetJobAuthDetail({ id: job_id.value }).then(res => { | |||||
| detail.value = res.data; | detail.value = res.data; | ||||
| if (mapJob.value && detail.value.contact.latitude && detail.value.contact.longitude) { | |||||
| initMap() | |||||
| } else { | |||||
| console.error('地图容器元素未找到'); | |||||
| } | |||||
| }) | }) | ||||
| } else { | } else { | ||||
| GetJobDetail({ id: job_id.value }).then(res => { | GetJobDetail({ id: job_id.value }).then(res => { | ||||
| detail.value = res.data; | detail.value = res.data; | ||||
| detail.value.latitude = '' | |||||
| detail.value.longitude = '' | |||||
| if (mapJob.value && detail.value.latitude && detail.value.longitude) { | |||||
| initMap() | |||||
| } else { | |||||
| console.error('地图容器元素未找到'); | |||||
| } | |||||
| }) | }) | ||||
| } | } | ||||
| } | } | ||||
| const initMap = () => { | |||||
| let center = new TMap.LatLng(detail.value.contact.latitude,detail.value.contact.longitude);//设置中心点坐标 | |||||
| //初始化地图 | |||||
| let map = new TMap.Map(mapJob.value, { | |||||
| center: center | |||||
| }); | |||||
| //创建并初始化MultiMarker | |||||
| let markerLayer = new TMap.MultiMarker({ | |||||
| map: map, //指定地图容器 | |||||
| //样式定义 | |||||
| styles: { | |||||
| //创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId) | |||||
| "myStyle": new TMap.MarkerStyle({ | |||||
| "width": 25, // 点标记样式宽度(像素) | |||||
| "height": 35, // 点标记样式高度(像素) | |||||
| "src": '../img/marker.png', //图片路径 | |||||
| //焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点 | |||||
| "anchor": { x: 16, y: 32 } | |||||
| }) | |||||
| }, | |||||
| //点标记数据数组 longitude | |||||
| geometries: [{ | |||||
| "id": "1", //点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id | |||||
| "styleId": 'myStyle', //指定样式id && | |||||
| "position": new TMap.LatLng(detail.value.contact.latitude,detail.value.contact.longitude), //点标记坐标位置 | |||||
| "properties": {//自定义属性 | |||||
| "title": "marker1" | |||||
| } | |||||
| } | |||||
| ] | |||||
| }); | |||||
| } | |||||
| const toLogin = () => { | const toLogin = () => { | ||||
| showOtherModal1() | showOtherModal1() | ||||
| watch(() => props.id, (newVal) => { | watch(() => props.id, (newVal) => { | ||||
| job_id.value = newVal | job_id.value = newVal | ||||
| if (job_id.value) { | if (job_id.value) { | ||||
| mapJob.value = null | |||||
| getDetail() | getDetail() | ||||
| } | } | ||||
| }, { immediate: true }) | }, { immediate: true }) |
| <a-divider /> | <a-divider /> | ||||
| <a-space direction="vertical"> | <a-space direction="vertical"> | ||||
| <a-flex justify="space-between" style="width: 100%;"> | <a-flex justify="space-between" style="width: 100%;"> | ||||
| <div style="font-weight: 600;">{{item.full_name}}</div> | |||||
| <div style="font-weight: 600;" @click="toCompanyDetail(item.company_id)">{{item.full_name}}</div> | |||||
| <a-button type="primary" size="small" @click="toDetail(item.id, item.company_id)">查看详情</a-button> | <a-button type="primary" size="small" @click="toDetail(item.id, item.company_id)">查看详情</a-button> | ||||
| </a-flex> | </a-flex> | ||||
| <a-flex style="width: 100%;color: #bebebe;"> | <a-flex style="width: 100%;color: #bebebe;"> |
| <template> | |||||
| <div ref="mapContainer" class="map-container"></div> | |||||
| </template> | |||||
| <script lang="ts" setup> | |||||
| import { ref, onMounted, computed, watch, onBeforeUnmount, defineProps } from 'vue'; | |||||
| import vMap from '@/components/map/map-iframe.vue' | |||||
| let props = defineProps({ | |||||
| lat: { | |||||
| type: String, | |||||
| default: 22.680964 | |||||
| }, | |||||
| lng: { | |||||
| type: String, | |||||
| default: 113.247185 | |||||
| } | |||||
| }) | |||||
| const mapContainer = ref(null); | |||||
| let lat = ref<any>(props.lat) | |||||
| let lng = ref<any>(props.lng) | |||||
| let map = ref<any>(null) | |||||
| const initMap = () => { | |||||
| console.log(lat.value, lng.value) | |||||
| let center = new TMap.LatLng(lat.value, lng.value);//设置中心点坐标 | |||||
| let map = new TMap.Map(mapContainer.value, { | |||||
| center: center | |||||
| }); | |||||
| let markerLayer = new TMap.MultiMarker({ | |||||
| map: map, //指定地图容器 | |||||
| //样式定义 | |||||
| styles: { | |||||
| //创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId) | |||||
| "myStyle": new TMap.MarkerStyle({ | |||||
| "width": 25, // 点标记样式宽度(像素) | |||||
| "height": 35, // 点标记样式高度(像素) | |||||
| "src": '../img/marker.png', //图片路径 | |||||
| "anchor": { x: 16, y: 32 } | |||||
| }) | |||||
| }, | |||||
| //点标记数据数组 longitude | |||||
| geometries: [{ | |||||
| "id": "1", //点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id | |||||
| "styleId": 'myStyle', //指定样式id | |||||
| "position": new TMap.LatLng(lat.value, lng.value), //点标记坐标位置 | |||||
| "properties": {//自定义属性 | |||||
| "title": "marker1" | |||||
| } | |||||
| } | |||||
| ] | |||||
| }) | |||||
| } | |||||
| watch(() => [props.lat, props.lng], (newVal) => { | |||||
| lat.value = newVal[0] | |||||
| lng.value = newVal[1] | |||||
| }) | |||||
| onMounted(() => { | |||||
| initMap() | |||||
| }) | |||||
| </script> | |||||
| <style scoped> | |||||
| .map-container { | |||||
| width: 100%; | |||||
| height: 600px; | |||||
| } | |||||
| </style> |
| <div style="margin: 20px 0; padding: 20px;background-color: #ffffff;border-radius: 8px;"> | <div style="margin: 20px 0; padding: 20px;background-color: #ffffff;border-radius: 8px;"> | ||||
| <a-descriptions :column="1" title="地图位置" layout="vertical"> | <a-descriptions :column="1" title="地图位置" layout="vertical"> | ||||
| <a-descriptions-item span="24"> | <a-descriptions-item span="24"> | ||||
| <div ref="mapContainer" class="map-container"></div> | |||||
| <map-marker v-if="companyDetail.latitude && companyDetail.longitude" :lat="companyDetail.latitude" :lng="companyDetail.longitude"></map-marker> | |||||
| </a-descriptions-item> | </a-descriptions-item> | ||||
| </a-descriptions> | </a-descriptions> | ||||
| </div> | </div> | ||||
| import JobCard from '@/components/job/card/index.vue' | import JobCard from '@/components/job/card/index.vue' | ||||
| import JobList from '@/components/job/list/index.vue' | import JobList from '@/components/job/list/index.vue' | ||||
| import JobInternship from '@/components/job/internship/index.vue' | import JobInternship from '@/components/job/internship/index.vue' | ||||
| import vMap from '@/components/map/map-iframe.vue' | |||||
| import MapMarker from '@/components/map/marker.vue' | |||||
| import { PostCompanyInfo, GetJobCompanyjobs } from '@/apis/models'; | import { PostCompanyInfo, GetJobCompanyjobs } from '@/apis/models'; | ||||
| import { ArrowLeftOutlined } from '@ant-design/icons-vue'; | import { ArrowLeftOutlined } from '@ant-design/icons-vue'; | ||||
| import { router } from '@/router'; | import { router } from '@/router'; | ||||
| let total = ref<Number>(0) | let total = ref<Number>(0) | ||||
| let job_id = ref<Number>(0) | let job_id = ref<Number>(0) | ||||
| let mode = ref<String>(sessionStorage.getItem('mode')) | let mode = ref<String>(sessionStorage.getItem('mode')) | ||||
| const mapContainer = ref(null); | |||||
| const toDetail = (data) => { | const toDetail = (data) => { | ||||
| job_id.value = data.id; | job_id.value = data.id; | ||||
| getJobCompanyjobs(current.value) | getJobCompanyjobs(current.value) | ||||
| } | } | ||||
| } | } | ||||
| const initMap = () => { | |||||
| console.log(companyDetail.value.latitude, companyDetail.value.longitude) | |||||
| var center = new TMap.LatLng(companyDetail.value.latitude, companyDetail.value.longitude);//设置中心点坐标 | |||||
| //初始化地图 | |||||
| var map = new TMap.Map(mapContainer.value, { | |||||
| center: center | |||||
| }); | |||||
| //创建并初始化MultiMarker | |||||
| var markerLayer = new TMap.MultiMarker({ | |||||
| map: map, //指定地图容器 | |||||
| //样式定义 | |||||
| styles: { | |||||
| //创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId) | |||||
| "myStyle": new TMap.MarkerStyle({ | |||||
| "width": 25, // 点标记样式宽度(像素) | |||||
| "height": 35, // 点标记样式高度(像素) | |||||
| "src": '../img/marker.png', //图片路径 | |||||
| //焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点 | |||||
| "anchor": { x: 16, y: 32 } | |||||
| }) | |||||
| }, | |||||
| //点标记数据数组 longitude | |||||
| geometries: [{ | |||||
| "id": "1", //点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id | |||||
| "styleId": 'myStyle', //指定样式id | |||||
| "position": new TMap.LatLng(companyDetail.value.latitude, companyDetail.value.longitude), //点标记坐标位置 | |||||
| "properties": {//自定义属性 | |||||
| "title": "marker1" | |||||
| } | |||||
| } | |||||
| ] | |||||
| }); | |||||
| } | |||||
| if (sessionStorage.getItem('pubilc_id') != 0 || sessionStorage.getItem('id') != 0) { | if (sessionStorage.getItem('pubilc_id') != 0 || sessionStorage.getItem('id') != 0) { | ||||
| PostCompanyInfo({ id: pubilc_id.value ? pubilc_id.value : sessionStorage.getItem('id') }).then(res => { | PostCompanyInfo({ id: pubilc_id.value ? pubilc_id.value : sessionStorage.getItem('id') }).then(res => { | ||||
| companyDetail.value = res.data; | companyDetail.value = res.data; | ||||
| initMap() | |||||
| }) | |||||
| companyDetail.value.latitude= 22.680964 | |||||
| companyDetail.value.longitude=113.247185 | |||||
| }) | |||||
| getJobCompanyjobs(current.value) | getJobCompanyjobs(current.value) | ||||
| } | } | ||||
| } | } | ||||
| padding: 0 !important; | padding: 0 !important; | ||||
| } | } | ||||
| .map-container { | |||||
| width: 100%; | |||||
| height: 600px; | |||||
| } | |||||
| :deep(.ant-card) { | :deep(.ant-card) { | ||||
| padding: 0 !important; | padding: 0 !important; |