fangwenqiao
/
luoyang-officialWebsite
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页地图修改

master
unknown 10 months ago
parent
6cd09884aa
commit
1d474575b5
14 changed files with 14667 additions and 164 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      public/index.html
  2. 1
      src/assets/hangzhou.json
  3. 14519
      src/assets/luoyang.json
  4. 6
      src/components/Foot.vue
  5. 170
      src/components/dstributiondMap.vue
  6. 1
      src/components/swiper.vue
  7. 2
      src/views/details/index.vue
  8. 6
      src/views/drivingMap/index.vue
  9. 8
      src/views/home/index.vue
  10. 6
      src/views/hospitalMap/index.vue
  11. 56
      src/views/layout/Wrapper.scss
  12. 48
      src/views/layout/Wrapper.vue
  13. 2
      src/views/login/index.vue
  14. 2
      src/views/product/index.vue

4
public/index.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta name="allkeywords" content="浙里学车,杭州市机动车驾驶人培训公众服务平台">
<meta name="allkeywords" content="浙里学车,洛阳市机动车驾驶人培训公众服务平台">
<meta name="alldescription" content="浙里学车官网">
<meta name="keywords" content="浙里学车">
<meta name="description" content="浙里学车官网">
@ -26,6 +26,6 @@
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- 杭州市机动车驾驶人培训公众服务平台 -->
<!-- 洛阳市机动车驾驶人培训公众服务平台 -->
</body>
</html>

1
src/assets/hangzhou.json
File diff suppressed because it is too large
View File

14519
src/assets/luoyang.json
File diff suppressed because it is too large
View File

6
src/components/Foot.vue
View File

@ -4,7 +4,7 @@
<div class="connect-we">
<div class="caption">联系我们</div>
<ul class="message">
<li class="msg-li">地址：浙江省杭州市上城区丁兰街道临丁路1190号8楼808</li>
<li class="msg-li">地址：浙江省洛阳市上城区丁兰街道临丁路1190号8楼808</li>
<li class="msg-li">电话：0571-56606030</li>
<li class="msg-li">E-Mail：helijun@jaxc.cn</li>
</ul>
@ -13,7 +13,7 @@
<div class="caption">相关站点</div>
<ul class="message">
<li class="msg-li" style="width: 359px;"><a class="connect-a" href="http://tb.hangzhou.gov.cn/" target="_blank">杭州交通信息网</a>
<!-- <a class="connect-a" href="http://www.hangzhou.gov.cn/art/2015/11/12/art_1256490_2698.html" target="_blank">杭州市机动车服务管理局</a> -->
<!-- <a class="connect-a" href="http://www.hangzhou.gov.cn/art/2015/11/12/art_1256490_2698.html" target="_blank">洛阳市机动车服务管理局</a> -->
</li>
<!-- <li class="msg-li"><a class="connect-a" href="http://zhejiang.weizhangwang.com/" target="_blank">浙江交通违章查询</a> </li> -->
</ul>
@ -37,7 +37,7 @@
</div>
<div class="foot-area">
<div class="copyright">
<span class="first"><pre><br v-if="$store.getters.mobile"/> 版权所有：杭州市机动车驾驶人培训行业协会 指导单位：杭州市交通运输管理服务中心</pre></span><br/>
<span class="first"><pre><br v-if="$store.getters.mobile"/> 版权所有：洛阳市机动车驾驶人培训行业协会 指导单位：洛阳市交通运输管理服务中心</pre></span><br/>
<span class="a-first" target="_bank" href="javascript:void(0);">技术支持：杭州钧安科技有限公司</span><br v-if="$store.getters.mobile"/>
<span class="row">
<img src="../assets/images/beian.png" alt="">

170
src/components/dstributiondMap.vue
View File

@ -20,31 +20,31 @@ import "echarts/lib/component/visualMap";
import "echarts/lib/component/title";
import { ScatterChart } from "echarts/charts";
echarts.use([ScatterChart]);
// 引入杭州市地图数据(引入方式重点)
import mapJson from "../assets/hangzhou.json";
// 引入洛阳市地图数据(引入方式重点)
import mapJson from "../assets/luoyang.json";
const regions = [
//对不同的区块进行着色
{
name: "富阳区", //区块名称
LngAndLat: [119.75, 30.030339],
name: "老城区", //区块名称
LngAndLat: [112.477298,34.682945],
itemStyle: {
normal: {
areaColor: "#b1d9e6",
areaColor: "#EC9D4B",
},
},
},
{
name: "拱墅区", //区块名称
LngAndLat: [120.14, 30.293843],
name: "西工区", //区块名称
LngAndLat: [112.443232,34.667847],
itemStyle: {
normal: {
areaColor: "#b1d9e6",
areaColor: "#FBE5F1",
},
},
},
{
name: "滨江区", //区块名称
LngAndLat: [120.21, 30.204415],
name: "瀍河回族区", //区块名称
LngAndLat: [112.491625, 34.684738],
itemStyle: {
normal: {
areaColor: "#93cadc",
@ -52,26 +52,26 @@ const regions = [
},
},
{
name: "淳安县", //区块名称
LngAndLat: [119.45, 29.559729],
name: "涧西区", //区块名称
LngAndLat: [112.399243, 34.654251],
itemStyle: {
normal: {
areaColor: "#b1d9e6",
areaColor: "#D4ECB1",
},
},
},
{
name: "建德市", //区块名称
LngAndLat: [119.0, 29.576045],
name: "孟津区", //区块名称
LngAndLat: [112.443892, 34.826485],
itemStyle: {
normal: {
areaColor: "#e6f3f7",
areaColor: "#D4ECB1",
},
},
},
{
name: "临安区", //区块名称,
LngAndLat: [119.75, 30.030339],
name: "洛龙区", //区块名称,
LngAndLat: [112.456634, 34.618557],
itemStyle: {
normal: {
areaColor: "#93cadc",
@ -79,53 +79,53 @@ const regions = [
},
},
{
name: "上城区", //区块名称,
LngAndLat: [120.3, 30.288198],
name: "新安县", //区块名称,
LngAndLat: [112.141403, 34.728679],
itemStyle: {
normal: {
areaColor: "#8ac6d9",
areaColor: "#F08B94",
},
},
},
{
name: "桐庐县", //区块名称,
LngAndLat: [119.42, 29.899843],
name: "栾川县", //区块名称,
LngAndLat: [111.618386, 33.783195],
itemStyle: {
normal: {
areaColor: "#9ccfdf",
areaColor: "#F08B94",
},
},
},
{
name: "西湖区", //区块名称,
LngAndLat: [120.06, 30.193843],
name: "嵩县", //区块名称,
LngAndLat: [112.087765, 34.131563],
itemStyle: {
normal: {
areaColor: "#e6f3f7",
areaColor: "#D4ECB1",
},
},
},
{
name: "萧山区", //区块名称,
LngAndLat: [120.44, 30.193843],
name: "汝阳县", //区块名称,
LngAndLat: [112.473789, 34.15323],
itemStyle: {
normal: {
areaColor: "#9ccfdf",
areaColor: "#F08B94",
},
},
},
{
name: "余杭区", //区块名称,
LngAndLat: [119.96, 30.323843],
name: "宜阳县", //区块名称,
LngAndLat: [112.179989, 34.516478],
itemStyle: {
normal: {
areaColor: "#8ac6d9",
areaColor: "#FBE5F1",
},
},
},
{
name: "临平区", //区块名称,
LngAndLat: [120.29, 30.419025],
name: "洛宁县", //区块名称,
LngAndLat: [111.655399, 34.387179],
itemStyle: {
normal: {
areaColor: "#93cadc",
@ -133,14 +133,24 @@ const regions = [
},
},
{
name: "钱塘区", //区块名称,
LngAndLat: [120.49, 30.322904],
name: "伊川县", //区块名称,
LngAndLat: [112.429384, 34.423416],
itemStyle: {
normal: {
areaColor: "#e6f3f7",
},
},
},
{
name: "偃师区", //区块名称,
LngAndLat: [112.787739, 34.723042],
itemStyle: {
normal: {
areaColor: "#FBE5F1",
},
},
},
];
export default {
@ -152,19 +162,20 @@ export default {
return [
// 坐标点数据，格式 {name: 'xxx', value: [经度,纬度]}
// 散点数据,地图上的数量
{ name: "富阳区", LngAndLat: [119.75, 30.030339], num: 0 },
{ name: "拱墅区", LngAndLat: [120.14, 30.293843], num: 0 },
{ name: "滨江区", LngAndLat: [120.21, 30.204415], num: 0 },
{ name: "淳安县", LngAndLat: [119.0, 29.576045], num: 0 },
{ name: "建德市", LngAndLat: [119.45, 29.559729], num: 0 },
{ name: "临安区", LngAndLat: [119.37, 30.183843], num: 0 },
{ name: "上城区", LngAndLat: [120.3, 30.288198], num: 0 },
{ name: "桐庐县", LngAndLat: [119.42, 29.899843], num: 0 },
{ name: "西湖区", LngAndLat: [120.06, 30.193843], num: 0 },
{ name: "萧山区", LngAndLat: [120.44, 30.193843], num: 0 },
{ name: "余杭区", LngAndLat: [119.91, 30.323843], num: 0 },
{ name: "临平区", LngAndLat: [120.29, 30.419025], num: 0 },
{ name: "钱塘区", LngAndLat: [120.49, 30.322904], num: 0 },
{ name: "老城区", LngAndLat: [112.477298,34.682945], num: 0 },
{ name: "西工区", LngAndLat: [112.443232,34.667847], num: 0 },
{ name: "瀍河回族区", LngAndLat: [112.491625, 34.684738], num: 0 },
{ name: "涧西区", LngAndLat: [112.399243, 34.654251], num: 0 },
{ name: "孟津区", LngAndLat: [112.443892, 34.826485], num: 0 },
{ name: "洛龙区", LngAndLat: [112.456634, 34.618557], num: 0 },
{ name: "新安县", LngAndLat: [112.141403, 34.728679], num: 0 },
{ name: "栾川县", LngAndLat: [111.618386, 33.783195], num: 0 },
{ name: "嵩县", LngAndLat: [112.087765, 34.131563], num: 0 },
{ name: "汝阳县", LngAndLat: [112.473789, 34.15323], num: 0 },
{ name: "宜阳县", LngAndLat: [112.179989, 34.516478], num: 0 },
{ name: "洛宁县", LngAndLat: [111.655399, 34.387179], num: 0 },
{ name: "伊川县", LngAndLat: [112.429384, 34.423416], num: 0 },
{ name: "偃师区", LngAndLat: [112.787739, 34.723042], num: 9 },
]
}
}
@ -236,53 +247,7 @@ export default {
regions: regions,
zoom: 1.2,
},
mapOption: {
//标题内容
title: {
text: "杭州市各区案件分布图 ",
},
//鼠标移入时显示的内容
tooltip: {
trigger: "item",
formatter: "{b}<br/>{c} (p / km2)",
},
series: [
{
type: "map", //图标类型
mapType: "hangzhou", // 自定义扩展图表类型
name: "杭州市各区案件完成数量对比",
label: {
show: true,
},
//用于修改正常显示地图颜色边框等内容
normal: {
borderWidth: 1,
borderColor: "#e1e1e1",
color: "#90c31d",
opacity: 0.8,
},
//用于修改鼠标移入时地图颜色边框等内容
emphasis: {
areaColor: "#749f83", //修改移入时地图颜色
},
data: [
{ name: "西湖区", value: 2057.34 },
{ name: "余杭区", value: 1577.48 },
{ name: "临安区", value: 386.1 },
{ name: "淳安区", value: 692.6 },
{ name: "建德市", value: 445.49 },
{ name: "桐庐县", value: 489.64 },
{ name: "富阳区", value: 376.78 },
{ name: "萧山区", value: 451.97 },
{ name: "拱墅区", value: 520.26 },
{ name: "下城区", value: 210.9 },
{ name: "江干区", value: 418.26 },
{ name: "滨江区", value: 581.84 },
{ name: "上城区", value: 418.01 },
],
},
],
},
// 地域charts实例
dismapchart: {},
};
@ -359,11 +324,13 @@ export default {
symbolSize: 40,
coordinateSystem: "geo",
data: this.convertData(this.sanData),
showEffectOn: "emphasis",
// showEffectOn: "emphasis",
rippleEffect: {
brushType: "stroke",
},
backgroundColor: "#000000",
emphasis: {
areaColor: "#EC9D4B", //修改移入时地图颜色
},
hoverAnimation: true,
label: {
normal: {
@ -372,7 +339,6 @@ export default {
return params.data["num"]; //大头针标记上显示的信息
},
position: "inside",
color: "#343006",
fontSize: 12,
},
emphasis: {
@ -383,6 +349,10 @@ export default {
normal: {
color: "#FEC006",
},
emphasis: {
label: { show: true },
areaColor: "#749f83", //修改移入时地图颜色
},
},
},
],

1
src/components/swiper.vue
View File

@ -180,6 +180,7 @@ export default {
background: #FC9934;
font-size: 24px;
color: #FEFEFE;
border-radius: 12px 0 0 12px;
cursor: pointer;
}
}

2
src/views/details/index.vue
View File

@ -14,7 +14,7 @@
<ul class="article-feature">
<li class="feature-writing">
<p class="writing-branch">发布时间：{{articleObj.createDate}}</p>
<p class="writing-branch">发布部门：{{articleObj.source ? articleObj.source : '杭州市浙里学车'}}</p>
<p class="writing-branch">发布部门：{{articleObj.source ? articleObj.source : '洛阳市浙里学车'}}</p>
</li>
<li class="feature-operate">
<p class="operate-name">字体：</p>

6
src/views/drivingMap/index.vue
View File

@ -13,7 +13,7 @@
<div class="drop-item" v-for="item in dataSheetList" :key="item.schoolId" @click="tapSheetList(item.schoolName)">
<div class="info">
<p class="info-title">{{item.schoolName}}</p>
<!-- <p class="info-address">杭州市钱江世纪城广孚联合国际中心裙楼2楼杭州市钱江世纪城广孚联合国际中心裙楼2楼</p>
<!-- <p class="info-address">洛阳市钱江世纪城广孚联合国际中心裙楼2楼洛阳市钱江世纪城广孚联合国际中心裙楼2楼</p>
<p class="info-address">电话：4000890999</p> -->
</div>
<!-- <div class="info-img">
@ -60,7 +60,7 @@ export default {
return {
markers: [],
map:{
center: {lng:120.219375416, lat:30.2592444615},//'杭州市',120.219375416,30.2592444615
center: {lng:120.219375416, lat:30.2592444615},//'洛阳市',120.219375416,30.2592444615
zoom: 12,
width:'100vw',
height:'700px'
@ -185,7 +185,7 @@ export default {
_name = item.regionName
}
})
if (_name == '全城') _name = '杭州市'
if (_name == '全城') _name = '洛阳市'
window.open(
`https://api.map.baidu.com/geocoder?address=${_name}驾校&output=html&region=杭州&src=我的位置`,
"_blank"

8
src/views/home/index.vue
View File

@ -38,13 +38,13 @@
<div class="zlxc-container" style="overflow: visible">
<div class="home-layout" v-if="censusListDate">
<div class="home-title">
<p class="title-main">杭州市驾培机构分布图</p>
<p class="title-sub">汇集杭州市所有驾校</p>
<p class="title-main">洛阳市驾培机构分布图</p>
<p class="title-sub">汇集洛阳市所有驾校</p>
</div>
<div class="home-module">
<div class="module-left">
<!-- 地图组件 -->
<dstributiond-map :sanData="sanData"></dstributiond-map>
<dstributiond-map ></dstributiond-map>
</div>
<div class="module-right">
<div class="right-top">
@ -393,7 +393,7 @@ export default {
],
score: 4.5,
map:{
center: {lng:120.219375416, lat:30.2592444615},//'杭州市',120.219375416,30.2592444615
center: {lng:120.219375416, lat:30.2592444615},//'洛阳市',120.219375416,30.2592444615
zoom: 12,
width:'100%',
height:'100%'

6
src/views/hospitalMap/index.vue
View File

@ -13,7 +13,7 @@
<div class="drop-item" v-for="item in dataSheetList" :key="item.hospitalId" @click="tapSheetList(item.hospitalName)">
<div class="info">
<p class="info-title">{{item.hospitalName}}</p>
<!-- <p class="info-address">杭州市钱江世纪城广孚联合国际中心裙楼2楼杭州市钱江世纪城广孚联合国际中心裙楼2楼</p>
<!-- <p class="info-address">洛阳市钱江世纪城广孚联合国际中心裙楼2楼洛阳市钱江世纪城广孚联合国际中心裙楼2楼</p>
<p class="info-address">电话：4000890999</p> -->
</div>
<!-- <div class="info-img">
@ -56,7 +56,7 @@ export default {
data () {
return {
map:{
center: {lng:120.219375416, lat:30.2592444615},//'杭州市',120.219375416,30.2592444615
center: {lng:120.219375416, lat:30.2592444615},//'洛阳市',120.219375416,30.2592444615
zoom: 12,
width:'100vw',
height:'700px'
@ -161,7 +161,7 @@ export default {
_name = item.regionName
}
})
if (_name == '全城') _name = '杭州市'
if (_name == '全城') _name = '洛阳市'
window.open(
`https://api.map.baidu.com/geocoder?address=${_name}体检网点&output=html&region=杭州&src=我的位置`,
"_blank"

56
src/views/layout/Wrapper.scss
View File

@ -12,13 +12,36 @@ img{
cursor: pointer;
padding: 0;
}
.loginCon {
display: flex;
align-items: center;
.line {
width: 2px;
height: 20px;
background-color: #333;
margin: 0 36px 0 18px;
}
.login {
width: 54px;
height: 24px;
border-radius: 12px;
background-color: #EC9D4B;
font-size: 14px;
color: #fff;
line-height: 24px;
text-align: center;
}
}
// @media only screen and (min-width: 1200px) {
.wrapper {
min-width: 1200px;
}
.yxj-center {
display: flex;
align-items: center;
}
.header {
height: 200px;
height: 80px;
background: #ffffff;
// position: fixed;
// top: 0;
@ -71,17 +94,16 @@ img{
.yxj-con-room{
width: 100%;
height: 80px;
background: #2670FF;
}
.box {
position: relative;
padding-bottom: 8px;
font-size: 20px;
font-size: 18px;
height: 80px;
width: 141px;
// width: 141px;
margin: 0 16px;
text-align: center;
line-height: 72px;
color: #fff;
line-height: 80px;
color: #333333;
box-sizing: border-box;
white-space: nowrap;
// overflow: hidden;
@ -93,7 +115,7 @@ img{
&::after{
position: absolute;
left: 0;
bottom: 0;
bottom: 20px;
content: '';
display: block;
height: 2px;
@ -101,19 +123,17 @@ img{
background-color: transparent;
}
&:hover{
background: #3C7FFF;
.box-select{
height: 140px;
font-size: 20px;
box-shadow: 5px 3px 8px 1px rgba(57, 57, 57, 0.62);
font-size: 18px;
&::before{
display: block;
}
}
.box-select3{
height: 210px;
font-size: 20px;
box-shadow: 5px 3px 8px 1px rgba(57, 57, 57, 0.62);
font-size: 18px;
&::before{
display: block;
}
@ -156,10 +176,10 @@ img{
color: #333;
letter-spacing: 1px;
&:hover{
color: #3C7FFF;
color: #EC9D4B;
}
&.is-active{
color: #3C7FFF;
color: #EC9D4B;
}
}
}
@ -216,9 +236,9 @@ img{
}
}
.is-active {
color: #fff;
color: #EC9D4B;
&::after{
background-color: #fff;
background-color: #EC9D4B;
}
}
div span {

48
src/views/layout/Wrapper.vue
View File

@ -4,41 +4,30 @@
class="header"
id="header"
>
<div class="yxj-title">
<router-link
tag="div"
to="/home"
class="logo-area"
></router-link>
<div class="login-area">
<router-link
tag="div"
class="app"
to="/download"
>
<img
class="app-img"
src="../../assets/zlxcimgs/home_icon_shoujixiazai.png"
>
<p class="app-text">浙里学车APP</p>
</router-link>
<!-- <div class="login" @click="tapJumpJaxc">登录</div> -->
</div>
</div>
<div class="yxj-con-room">
<div class="yxj-container header-content yxj-space">
<div
class="mobile-menu"
v-if="$store.getters.mobile"
@click.stop="$store.commit('CHANGE_OPENMENU', true)"
></div>
<div class="leftLogo">
<div class="login-area">
<router-link
tag="div"
class="app"
to="/home"
>
<!-- <img
class="app-img"
src="../../assets/zlxcimgs/home_icon_shoujixiazai.png"
> -->
<p class="app-text">LOGO</p>
</router-link>
</div>
</div>
<div
class="yxj-center mobile-menu-wrapper"
:class="{active: $store.getters.openMenu}"
@click="$store.commit('CHANGE_OPENMENU', false)"
id="mask"
>
<div class="mask"></div>
<div
class="yxj-center mobile-flex"
@click.stop
@ -153,7 +142,12 @@
to="/contact"
>投诉建议</router-link>
</div>
</div >
<div class="loginCon">
<div class="line"></div>
<div class="login" @click="tapJumpJaxc">登录</div>
</div>
</div>
</div>
</div>

2
src/views/login/index.vue
View File

@ -3,7 +3,7 @@
<div class="title-div flex ">
<img class="title-img" src="../../assets/images/logo.png" alt="">
<p class="title-p">杭州市机动车驾驶人培训公众服务平台</p>
<p class="title-p">洛阳市机动车驾驶人培训公众服务平台</p>
</div>

2
src/views/product/index.vue
View File

@ -19,7 +19,7 @@
<ul class="list-ul">
<li class="list-li" v-for="item in dataSheetList" :key="item.industryDynamicId" @click="tapJumpDetail(item.industryDynamicId)">
<p class="li-caption">{{item.title}}</p>
<p class="li-department">{{item.source ? item.source : '杭州市浙里学车'}}</p>
<p class="li-department">{{item.source ? item.source : '洛阳市浙里学车'}}</p>
<p class="li-time">{{item.createDate}}</p>
</li>
</ul>

Write Preview
Loading…
Cancel
Save