|
|
@@ -5,7 +5,7 @@
|
|
|
<div class="gray">您现在所在位置：</div>
|
|
|
<el-breadcrumb separator=">>">
|
|
|
<el-breadcrumb-item :to="{ path: '/home' }"><span class="gray">首页</span></el-breadcrumb-item>
|
|
|
- <el-breadcrumb-item><span class="red">养老政策查询</span></el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item><span class="red">机构详情</span></el-breadcrumb-item>
|
|
|
</el-breadcrumb>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -21,98 +21,31 @@
|
|
|
:modules="modules"
|
|
|
ref="swiperTop"
|
|
|
class="mySwiper2">
|
|
|
- <swiper-slide>
|
|
|
- <img src="https://swiperjs.com/demos/images/nature-1.jpg"/>
|
|
|
+ <swiper-slide v-for="item in form.urlData">
|
|
|
+ <img :src="item"/>
|
|
|
</swiper-slide>
|
|
|
- <swiper-slide>
|
|
|
- <img src="https://swiperjs.com/demos/images/nature-2.jpg"/>
|
|
|
- </swiper-slide>
|
|
|
- <swiper-slide>
|
|
|
- <img src="https://swiperjs.com/demos/images/nature-3.jpg"/>
|
|
|
- </swiper-slide>
|
|
|
- <swiper-slide>
|
|
|
- <img src="https://swiperjs.com/demos/images/nature-4.jpg"/>
|
|
|
- </swiper-slide>
|
|
|
- <swiper-slide>
|
|
|
- <img src="https://swiperjs.com/demos/images/nature-5.jpg"/>
|
|
|
- </swiper-slide>
|
|
|
- <swiper-slide>
|
|
|
- <img src="https://swiperjs.com/demos/images/nature-6.jpg"/>
|
|
|
- </swiper-slide
|
|
|
- >
|
|
|
- <swiper-slide
|
|
|
- ><img
|
|
|
- src="https://swiperjs.com/demos/images/nature-7.jpg"/></swiper-slide
|
|
|
- >
|
|
|
- <swiper-slide
|
|
|
- ><img
|
|
|
- src="https://swiperjs.com/demos/images/nature-8.jpg"/></swiper-slide
|
|
|
- >
|
|
|
- <swiper-slide
|
|
|
- ><img
|
|
|
- src="https://swiperjs.com/demos/images/nature-9.jpg"/></swiper-slide
|
|
|
- >
|
|
|
- <swiper-slide
|
|
|
- ><img src="https://swiperjs.com/demos/images/nature-10.jpg"
|
|
|
- /></swiper-slide>
|
|
|
</swiper>
|
|
|
<swiper
|
|
|
@swiper="setThumbsSwiper"
|
|
|
:loop="true"
|
|
|
:spaceBetween="10"
|
|
|
- :slidesPerView="4"
|
|
|
+ :slidesPerView="6"
|
|
|
:freeMode="true"
|
|
|
:watchSlidesProgress="true"
|
|
|
:modules="modules"
|
|
|
class="mySwiper"
|
|
|
ref="swiperThumbs"
|
|
|
>
|
|
|
- <swiper-slide
|
|
|
- ><img
|
|
|
- src="https://swiperjs.com/demos/images/nature-1.jpg"/></swiper-slide
|
|
|
- >
|
|
|
- <swiper-slide
|
|
|
- ><img
|
|
|
- src="https://swiperjs.com/demos/images/nature-2.jpg"/></swiper-slide
|
|
|
- >
|
|
|
- <swiper-slide
|
|
|
- ><img
|
|
|
- src="https://swiperjs.com/demos/images/nature-3.jpg"/></swiper-slide
|
|
|
- >
|
|
|
- <swiper-slide
|
|
|
- ><img
|
|
|
- src="https://swiperjs.com/demos/images/nature-4.jpg"/></swiper-slide
|
|
|
- >
|
|
|
- <swiper-slide
|
|
|
- ><img
|
|
|
- src="https://swiperjs.com/demos/images/nature-5.jpg"/></swiper-slide
|
|
|
- >
|
|
|
- <swiper-slide
|
|
|
- ><img
|
|
|
- src="https://swiperjs.com/demos/images/nature-6.jpg"/></swiper-slide
|
|
|
- >
|
|
|
- <swiper-slide
|
|
|
- ><img
|
|
|
- src="https://swiperjs.com/demos/images/nature-7.jpg"/></swiper-slide
|
|
|
- >
|
|
|
- <swiper-slide
|
|
|
- ><img
|
|
|
- src="https://swiperjs.com/demos/images/nature-8.jpg"/></swiper-slide
|
|
|
- >
|
|
|
- <swiper-slide
|
|
|
- ><img
|
|
|
- src="https://swiperjs.com/demos/images/nature-9.jpg"/></swiper-slide
|
|
|
- >
|
|
|
- <swiper-slide
|
|
|
- ><img src="https://swiperjs.com/demos/images/nature-10.jpg"
|
|
|
- /></swiper-slide>
|
|
|
+ <swiper-slide v-for="item in form.urlData">
|
|
|
+ <img :src="item"/>
|
|
|
+ </swiper-slide>
|
|
|
</swiper>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right_box flex_center">
|
|
|
<div class="conten">
|
|
|
<div class="title">
|
|
|
- 吉林顾村和平养老院
|
|
|
+ {{form.jgmc}}
|
|
|
</div>
|
|
|
<div class="font_style1 align_center mt35">
|
|
|
<el-tooltip placement="top" effect="light">
|
|
|
@@ -141,8 +74,8 @@
|
|
|
({{selectDictLabel(CZ015,form.pddj)}})
|
|
|
</div>
|
|
|
<div class="flex mt24 font_style1">
|
|
|
- <div class="title_box font_style1">成立时间：2016-03-09</div>
|
|
|
- <div class="title_box font_style1">建筑面积：6800</div>
|
|
|
+ <div class="title_box font_style1">成立时间：{{changDate(form.czsj)}}</div>
|
|
|
+ <div class="title_box font_style1">建筑面积：{{form.zdmj}}㎡</div>
|
|
|
</div>
|
|
|
<div class="hr">
|
|
|
|
|
|
@@ -151,28 +84,28 @@
|
|
|
<div class="tb1">
|
|
|
</div>
|
|
|
<div>
|
|
|
- 机构地址：长春市朝阳区XXX路155号
|
|
|
+ 机构地址：{{form.txdz}}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="align_center font_style1 mt24">
|
|
|
<div class="tb2">
|
|
|
</div>
|
|
|
<div>
|
|
|
- 咨询电话：0431-88669933
|
|
|
+ 咨询电话：{{form.frlxfs}}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="kz_box mt24">
|
|
|
<div class="flex">
|
|
|
- <div class="title_box font_style1">床位总数： 188张</div>
|
|
|
- <div class="title_box font_style1">可用床位： <span class="color1">10</span>张</div>
|
|
|
+ <div class="title_box font_style1">床位总数： {{form.cwCount}}张</div>
|
|
|
+ <div class="title_box font_style1">可用床位： <span class="color1">{{form.cwCount}}</span>张</div>
|
|
|
</div>
|
|
|
<div class="font_style1 mt24">
|
|
|
- 参考价格：<span class="font_style2">2250-7000</span>元/月 （床位费和护理费）
|
|
|
+ 参考价格：<span class="font_style2">{{form.zd}}-{{form.zg}}</span>元/月 （床位费和护理费）
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<div class="font_style3 mt15">
|
|
|
- * 以上信息由机构提供 <span class="mr">更新时间： 2021-10-13</span> * 信息监督： 宝山区民政局
|
|
|
+ * 以上信息由机构提供 <span class="mr">更新时间： {{changDate(form.gxsj)}}</span> * 信息监督： {{form.xxjd}}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -180,14 +113,16 @@
|
|
|
|
|
|
<div class="hr"></div>
|
|
|
<div class="bt_box">
|
|
|
- <div class="map_top">
|
|
|
- <div class="align_center">
|
|
|
- <div class="block"></div>
|
|
|
- 地理位置
|
|
|
- </div>
|
|
|
- <div class="align_center">
|
|
|
- <div class="tb3"></div> 在养老地图查看</div>
|
|
|
- </div>
|
|
|
+ <div class="map_top">
|
|
|
+ <div class="align_center">
|
|
|
+ <div class="block"></div>
|
|
|
+ 地理位置
|
|
|
+ </div>
|
|
|
+ <div class="align_center">
|
|
|
+ <div class="tb3"></div>
|
|
|
+ 在养老地图查看
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="mt15" id="container" style="height: 385px;width: 100%"></div>
|
|
|
|
|
|
@@ -197,19 +132,22 @@
|
|
|
<script setup>
|
|
|
import {Swiper, SwiperSlide} from 'swiper/vue';
|
|
|
import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
- import { shallowRef } from '@vue/reactivity'
|
|
|
- window._AMapSecurityConfig = {
|
|
|
- securityJsCode: '8235942dbbc745f954849a61332fa3bc'
|
|
|
- };
|
|
|
- // Import Swiper styles
|
|
|
+ import {jcxxXq} from '@/api/home'
|
|
|
+ import {shallowRef} from '@vue/reactivity'
|
|
|
+ import {useRoute} from 'vue-router'
|
|
|
+ // window._AMapSecurityConfig = {
|
|
|
+ // securityJsCode: '8235942dbbc745f954849a61332fa3bc'
|
|
|
+ // };
|
|
|
+ // Import Swiper styles
|
|
|
import 'swiper/css';
|
|
|
import "swiper/css/free-mode"
|
|
|
import "swiper/css/navigation"
|
|
|
import "swiper/css/thumbs"
|
|
|
import {FreeMode, Navigation, Thumbs} from 'swiper';
|
|
|
- import {createApp, getCurrentInstance, onMounted, nextTick,onUnmounted} from 'vue';
|
|
|
+ import {createApp, getCurrentInstance, onMounted, nextTick, onUnmounted} from 'vue';
|
|
|
+
|
|
|
const {proxy} = getCurrentInstance();
|
|
|
- const {XZ093, XZ096, CZ015, CZ035} = proxy.useDict('XZ093', 'XZ096', 'CZ015', 'CZ035');
|
|
|
+ const {CZ015} = proxy.useDict('CZ015');
|
|
|
|
|
|
createApp({
|
|
|
components: {
|
|
|
@@ -217,14 +155,12 @@
|
|
|
SwiperSlide,
|
|
|
},
|
|
|
});
|
|
|
+
|
|
|
+ let router = useRoute();
|
|
|
let thumbsSwiper = null;
|
|
|
let modules = [FreeMode, Navigation, Thumbs];
|
|
|
const data = reactive({
|
|
|
form: {
|
|
|
- dj: 3,
|
|
|
- pddj: '01',
|
|
|
- txdz: 'xxxxxx',
|
|
|
- frlxfs: 'xxx'
|
|
|
},
|
|
|
});
|
|
|
const {form} = toRefs(data);
|
|
|
@@ -234,49 +170,71 @@
|
|
|
};
|
|
|
//首先需要引入 Vue3 的 shallowRef 方法（使用 shallowRef 进行非深度监听，因为在 Vue3 所使用的 Proxy 拦截操作会改变 JSAPI 原生对象，所以此处需要区别 Vue2 使用方式对地图对象行非深度监听，否则会出现问题，建议 JS API 相关对象采用非响应式的普通对象来存储）。
|
|
|
const map = shallowRef(null);
|
|
|
- const initMap=()=>{
|
|
|
+ const initMap = () => {
|
|
|
{
|
|
|
AMapLoader.load({
|
|
|
- key:'6c087d703e652767650a6b3208f76c40', //设置您的key
|
|
|
- version:"2.0",
|
|
|
- plugins:['AMap.ToolBar','AMap.Driving'],
|
|
|
- AMapUI:{
|
|
|
- version:"1.1",
|
|
|
- plugins:[],
|
|
|
+ key: '6c087d703e652767650a6b3208f76c40', //设置您的key
|
|
|
+ version: "2.0",
|
|
|
+ plugins: ['AMap.ToolBar', 'AMap.Driving'],
|
|
|
+ AMapUI: {
|
|
|
+ version: "1.1",
|
|
|
+ plugins: [],
|
|
|
|
|
|
},
|
|
|
- Loca:{
|
|
|
- version:"2.0.0"
|
|
|
+ Loca: {
|
|
|
+ version: "2.0.0"
|
|
|
},
|
|
|
- }).then((AMap)=>{
|
|
|
- map.value = new AMap.Map("container",{
|
|
|
- zoom:13,
|
|
|
- center:[105.602725,37.076636],
|
|
|
+ }).then((AMap) => {
|
|
|
+ let data=[ form.value.lat ,form.value.lng];
|
|
|
+ map.value = new AMap.Map("container", {
|
|
|
+ zoom: 13,
|
|
|
+ center: data,
|
|
|
});
|
|
|
let marker = new AMap.Marker({
|
|
|
- position:[105.602725,37.076636],
|
|
|
+ position: data,
|
|
|
icon: new AMap.Icon({// eslint-disable-line
|
|
|
// 引入小红车图片位置
|
|
|
- image:new URL('../../assets/images/dw.png', import.meta.url).href,
|
|
|
- size: new AMap.Size(17, 16) // eslint-disable-line
|
|
|
+ image: new URL('../../assets/images/db.png', import.meta.url).href,
|
|
|
+ size: new AMap.Size(26, 30) // eslint-disable-line
|
|
|
}),
|
|
|
// offset: new AMap.Pixel(-25, -25), // eslint-disable-line
|
|
|
});
|
|
|
marker.setLabel({
|
|
|
- offset: new AMap.Pixel(0, -5), //设置文本标注偏移量
|
|
|
- content: "<div class='info'>我是 marker 的 l1111abel 标签</div>", //设置文本标注内容
|
|
|
+ offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
|
|
|
+ content: "<div class='info'>"+form.value.jgmc+"</div>", //设置文本标注内容
|
|
|
direction: 'top' //设置文本标注方位
|
|
|
});
|
|
|
map.value.add(marker);
|
|
|
|
|
|
- }).catch(e=>{
|
|
|
+ }).catch(e => {
|
|
|
console.log(e);
|
|
|
})
|
|
|
}
|
|
|
};
|
|
|
const dd = getCurrentInstance();
|
|
|
+ function getList(){
|
|
|
+ jcxxXq(router.params.id).then(response=>{
|
|
|
+ form.value=response.data;
|
|
|
+ form.value.dj=parseInt(response.data.pddj);
|
|
|
+ form.value.zg=response.data.cwfZg>response.data.hlfZg?response.data.cwfZg:response.data.hlfZg;
|
|
|
+ form.value.zd=response.data.cwfZd>response.data.hlfZd?response.data.hlfZd:response.data.cwfZd;
|
|
|
+ form.value.urlData=response.data.jgUrl?response.data.jgUrl.split(','):[];
|
|
|
+ initMap();
|
|
|
+ })
|
|
|
+ }
|
|
|
+ function changDate(data) {
|
|
|
+ if (!data)
|
|
|
+ {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if(data.length<7)
|
|
|
+ {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return data.slice(0,4) + '-' + data.slice(4, 6) + '-' + data.slice(6,8)
|
|
|
+ }
|
|
|
onMounted(() => {
|
|
|
- initMap();
|
|
|
+ getList();
|
|
|
// console.log(dd.ctx.$refs.swiperTop,'this.$refs');
|
|
|
// const swiperTop=dd.ctx.$refs.swiperTop.$swiper;
|
|
|
// const swiperThumbs=dd.ctx.$refs.swiperThumbs.$swiper;
|
|
|
@@ -292,8 +250,8 @@
|
|
|
// swiperThumbs.controller = swiperTop.controller;
|
|
|
// })
|
|
|
});
|
|
|
- onUnmounted(()=>{
|
|
|
- //离开前要进行地图销毁，防止占有资源
|
|
|
+ onUnmounted(() => {
|
|
|
+ //离开前要进行地图销毁，防止占有资源
|
|
|
map.value && map.value.destroy();
|
|
|
console.log('销毁了')
|
|
|
})
|
|
|
@@ -305,7 +263,7 @@
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
- .swiper-slide {
|
|
|
+ :deep(.swiper-slide) {
|
|
|
text-align: center;
|
|
|
font-size: 18px;
|
|
|
background: #fff;
|
|
|
@@ -325,21 +283,14 @@
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
- .swiper-slide img {
|
|
|
+ :deep(.swiper-slide img) {
|
|
|
display: block;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
|
|
|
- .swiper {
|
|
|
- width: 100%;
|
|
|
- height: 300px;
|
|
|
- margin-left: auto;
|
|
|
- margin-right: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .swiper-slide {
|
|
|
+ :deep(.swiper-slide) {
|
|
|
background-size: cover;
|
|
|
background-position: center;
|
|
|
}
|
|
|
@@ -355,22 +306,23 @@
|
|
|
padding: 10px 0;
|
|
|
}
|
|
|
|
|
|
- .mySwiper .swiper-slide {
|
|
|
- width: 25%;
|
|
|
- height: 100%;
|
|
|
- opacity: 0.4;
|
|
|
- }
|
|
|
+ /*:deep(.mySwiper .swiper-slide) {*/
|
|
|
+ /*width: 25%;*/
|
|
|
+ /*height: 100%;*/
|
|
|
+ /*opacity: 0.4;*/
|
|
|
+ /*}*/
|
|
|
|
|
|
- .mySwiper .swiper-slide-thumb-active {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
+ /*:deep(.mySwiper .swiper-slide-thumb-active) {*/
|
|
|
+ /*opacity: 1;*/
|
|
|
+ /*}*/
|
|
|
+
|
|
|
+ /*:deep(.swiper-slide img) {*/
|
|
|
+ /*display: block;*/
|
|
|
+ /*width: 100%;*/
|
|
|
+ /*height: 100%;*/
|
|
|
+ /*object-fit: cover;*/
|
|
|
+ /*}*/
|
|
|
|
|
|
- .swiper-slide img {
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
|
|
|
.main_box2 {
|
|
|
background: #FFFFFF;
|
|
|
@@ -460,7 +412,7 @@
|
|
|
margin: 0 5px;
|
|
|
}
|
|
|
|
|
|
- .font_style3{
|
|
|
+ .font_style3 {
|
|
|
font-size: 14px;
|
|
|
font-weight: bold;
|
|
|
color: #FF706F;
|
|
|
@@ -477,6 +429,7 @@
|
|
|
.mt24 {
|
|
|
margin-top: 23px;
|
|
|
}
|
|
|
+
|
|
|
.mt15 {
|
|
|
margin-top: 15px;
|
|
|
}
|
|
|
@@ -530,26 +483,39 @@
|
|
|
.color1 {
|
|
|
color: #FF4900;
|
|
|
}
|
|
|
- .mr{
|
|
|
+
|
|
|
+ .mr {
|
|
|
margin: 0 10px;
|
|
|
}
|
|
|
- .bt_box{
|
|
|
+
|
|
|
+ .bt_box {
|
|
|
margin-left: 34px;
|
|
|
margin-top: 27px;
|
|
|
margin-right: 34px;
|
|
|
}
|
|
|
- .map_top{
|
|
|
+
|
|
|
+ .map_top {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
- .block{
|
|
|
+
|
|
|
+ .block {
|
|
|
width: 6px;
|
|
|
height: 20px;
|
|
|
background: #D80100;
|
|
|
border-radius: 3px;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
- :deep(.info){
|
|
|
-
|
|
|
+ /*地图图标上的文本样式*/
|
|
|
+ :deep(.amap-marker-label) {
|
|
|
+ background: url("../../assets/images/kuan.png") no-repeat;
|
|
|
+ height: 31px;
|
|
|
+ line-height: 23px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ border: none;
|
|
|
}
|
|
|
</style>
|
