index
This commit is contained in:
hh
@ -1,8 +1,8 @@
|
|||||||
# 页面标题
|
# 页面标题
|
||||||
VITE_APP_TITLE = 若依管理系统
|
VITE_APP_TITLE = xxx管理系统
|
||||||
|
|
||||||
# 开发环境配置
|
# 开发环境配置
|
||||||
VITE_APP_ENV = 'development'
|
VITE_APP_ENV = 'development'
|
||||||
|
|
||||||
# 若依管理系统/开发环境
|
# xxx管理系统/开发环境
|
||||||
VITE_APP_BASE_API = '/dev-api'
|
VITE_APP_BASE_API = '/api'
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
# 页面标题
|
# 页面标题
|
||||||
VITE_APP_TITLE = 若依管理系统
|
VITE_APP_TITLE = xxx管理系统
|
||||||
|
|
||||||
# 生产环境配置
|
# 生产环境配置
|
||||||
VITE_APP_ENV = 'production'
|
VITE_APP_ENV = 'production'
|
||||||
|
|
||||||
# 若依管理系统/生产环境
|
# xxx管理系统/生产环境
|
||||||
VITE_APP_BASE_API = '/prod-api'
|
VITE_APP_BASE_API = '/prod-api'
|
||||||
|
|
||||||
# 是否在打包时开启压缩，支持 gzip 和 brotli
|
# 是否在打包时开启压缩，支持 gzip 和 brotli
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
# 页面标题
|
# 页面标题
|
||||||
VITE_APP_TITLE = 若依管理系统
|
VITE_APP_TITLE = xxx管理系统
|
||||||
|
|
||||||
# 生产环境配置
|
# 生产环境配置
|
||||||
VITE_APP_ENV = 'staging'
|
VITE_APP_ENV = 'staging'
|
||||||
|
|
||||||
# 若依管理系统/生产环境
|
# xxx管理系统/生产环境
|
||||||
VITE_APP_BASE_API = '/stage-api'
|
VITE_APP_BASE_API = '/stage-api'
|
||||||
|
|
||||||
# 是否在打包时开启压缩，支持 gzip 和 brotli
|
# 是否在打包时开启压缩，支持 gzip 和 brotli
|
||||||
|
|||||||
28
index.html
28
index.html
@ -7,7 +7,11 @@
|
|||||||
<meta name="renderer" content="webkit">
|
<meta name="renderer" content="webkit">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||||
<link rel="icon" href="/favicon.ico">
|
<link rel="icon" href="/favicon.ico">
|
||||||
<title>若依管理系统</title>
|
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.11&key=35a871e5905ecfd749bd998448b9cd03'></script>
|
||||||
|
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=35a871e5905ecfd749bd998448b9cd03&plugin=AMap.DistrictSearch"></script>
|
||||||
|
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
|
||||||
|
|
||||||
|
<title>xxx管理系统</title>
|
||||||
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
|
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
|
||||||
<style>
|
<style>
|
||||||
html,
|
html,
|
||||||
@ -179,13 +183,13 @@
|
|||||||
|
|
||||||
#loader-wrapper .load_title {
|
#loader-wrapper .load_title {
|
||||||
font-family: 'Open Sans';
|
font-family: 'Open Sans';
|
||||||
color: #FFF;
|
color: #ccc;
|
||||||
font-size: 19px;
|
font-size: 19px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
z-index: 9999999999999;
|
z-index: 9999999999999;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 60%;
|
top: 55%;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
}
|
}
|
||||||
@ -194,18 +198,28 @@
|
|||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #FFF;
|
/* color: #FFF; */
|
||||||
|
color: #ccc;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
.loading {
|
||||||
|
position: absolute;
|
||||||
|
top: 48%;
|
||||||
|
left: 50%;
|
||||||
|
width: 190px;
|
||||||
|
margin-left: -95px;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<div id="loader-wrapper">
|
<div id="loader-wrapper">
|
||||||
<div id="loader"></div>
|
<img class="loading" src="/public/loading.gif" alt="">
|
||||||
<div class="loader-section section-left"></div>
|
<!-- <div id="loader"></div> -->
|
||||||
<div class="loader-section section-right"></div>
|
<!-- <div class="loader-section section-left"></div>
|
||||||
|
<div class="loader-section section-right"></div> -->
|
||||||
<div class="load_title">正在加载系统资源，请耐心等待</div>
|
<div class="load_title">正在加载系统资源，请耐心等待</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
{
|
{
|
||||||
"name": "ruoyi",
|
"name": "ruoyi",
|
||||||
"version": "3.8.0",
|
"version": "3.8.0",
|
||||||
"description": "若依管理系统",
|
"description": "xxx管理系统",
|
||||||
"author": "若依",
|
"author": "xxx",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
@ -19,7 +19,7 @@
|
|||||||
"@vueuse/core": "6.4.1",
|
"@vueuse/core": "6.4.1",
|
||||||
"animate.css": "^4.1.1",
|
"animate.css": "^4.1.1",
|
||||||
"axios": "0.24.0",
|
"axios": "0.24.0",
|
||||||
"echarts": "5.2.1",
|
"echarts": "^4.2.0-rc.2",
|
||||||
"element-plus": "1.2.0-beta.3",
|
"element-plus": "1.2.0-beta.3",
|
||||||
"file-saver": "2.0.5",
|
"file-saver": "2.0.5",
|
||||||
"fuse.js": "6.4.6",
|
"fuse.js": "6.4.6",
|
||||||
|
|||||||
BIN
public/loading.gif
Normal file
BIN
public/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
@ -1,3 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<router-view />
|
<router-view />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { defineComponent, getCurrentInstance, onMounted, reactive } from "vue";
|
||||||
|
import DevicePixelRatio from './utils/devicePixelRatio';
|
||||||
|
onMounted(() => {
|
||||||
|
new DevicePixelRatio().init();
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|||||||
41
src/api/website/home/index.js
Normal file
41
src/api/website/home/index.js
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 分布专家信息
|
||||||
|
export function getExpert() {
|
||||||
|
return request({
|
||||||
|
url: '/v1/index/distribution/expert',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 分布实验室信息
|
||||||
|
export function laboratory() {
|
||||||
|
return request({
|
||||||
|
url: '/v1/index/distribution/laboratory',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分布需求信息
|
||||||
|
export function demand() {
|
||||||
|
return request({
|
||||||
|
url: '/v1/index/distribution/demand',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 分布技术成果信息
|
||||||
|
export function achievement() {
|
||||||
|
return request({
|
||||||
|
url: '/v1/index/distribution/achievement',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分布技术成果信息
|
||||||
|
export function company() {
|
||||||
|
return request({
|
||||||
|
url: '/v1/index/distribution/company',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -24,7 +24,7 @@ defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const title = ref('若依管理系统');
|
const title = ref('xxx管理系统');
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
const sideTheme = computed(() => store.state.settings.sideTheme);
|
const sideTheme = computed(() => store.state.settings.sideTheme);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
67
src/utils/devicePixelRatio.js
Normal file
67
src/utils/devicePixelRatio.js
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
class DevicePixelRatio {
|
||||||
|
constructor() {
|
||||||
|
//this.flag = false;
|
||||||
|
}
|
||||||
|
//获取系统类型
|
||||||
|
_getSystem () {
|
||||||
|
let flag = false;
|
||||||
|
var agent = navigator.userAgent.toLowerCase();
|
||||||
|
// var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
|
||||||
|
// if(isMac) {
|
||||||
|
// return false;
|
||||||
|
// }
|
||||||
|
//现只针对windows处理，其它系统暂无该情况，如有，继续在此添加
|
||||||
|
if (agent.indexOf("windows") >= 0) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//获取页面缩放比例
|
||||||
|
// _getDevicePixelRatio() {
|
||||||
|
// let t = this;
|
||||||
|
// }
|
||||||
|
//监听方法兼容写法
|
||||||
|
_addHandler (element, type, handler) {
|
||||||
|
if (element.addEventListener) {
|
||||||
|
element.addEventListener(type, handler, false);
|
||||||
|
} else if (element.attachEvent) {
|
||||||
|
element.attachEvent("on" + type, handler);
|
||||||
|
} else {
|
||||||
|
element["on" + type] = handler;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//校正浏览器缩放比例
|
||||||
|
_correct () {
|
||||||
|
let t = this;
|
||||||
|
//页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。
|
||||||
|
document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio;
|
||||||
|
let echartsDomList = document.querySelectorAll('.echartsDom');
|
||||||
|
// 兼容echarts
|
||||||
|
echartsDomList.forEach(element => {
|
||||||
|
element.style.zoom = window.devicePixelRatio;
|
||||||
|
element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
|
||||||
|
element.style.transformOrigin = "0%0%";
|
||||||
|
element.style.width = window.devicePixelRatio * 100 + '%';
|
||||||
|
element.style.height = window.devicePixelRatio * 100 + '%';
|
||||||
|
console.log(element.style.zoom, 'element.style.zoom')
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//监听页面缩放
|
||||||
|
_watch () {
|
||||||
|
let t = this;
|
||||||
|
t._addHandler(window, 'resize', function () { //注意这个方法是解决全局有两个window.resize
|
||||||
|
//重新校正
|
||||||
|
t._correct()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//初始化页面比例
|
||||||
|
init () {
|
||||||
|
let t = this;
|
||||||
|
if (t._getSystem()) { //判断设备，目前只在windows系统下校正浏览器缩放比例
|
||||||
|
//初始化页面校正浏览器缩放比例
|
||||||
|
t._correct();
|
||||||
|
//开启监听页面缩放
|
||||||
|
t._watch();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default DevicePixelRatio;
|
||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="register">
|
<div class="register">
|
||||||
<el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
|
<el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
|
||||||
<h3 class="title">若依后台管理系统</h3>
|
<h3 class="title">xxx后台管理系统</h3>
|
||||||
<el-form-item prop="username">
|
<el-form-item prop="username">
|
||||||
<el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
|
<el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
|
||||||
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
|
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
|
||||||
|
|||||||
BIN
src/views/website/index/comp/img/back_button.png
Normal file
BIN
src/views/website/index/comp/img/back_button.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 508 B |
BIN
src/views/website/index/comp/img/close_back.png
Normal file
BIN
src/views/website/index/comp/img/close_back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
src/views/website/index/comp/img/index8-bg1.png
Normal file
BIN
src/views/website/index/comp/img/index8-bg1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
BIN
src/views/website/index/comp/img/lightEffect.png
Normal file
BIN
src/views/website/index/comp/img/lightEffect.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
@ -13,7 +13,6 @@
|
|||||||
<img
|
<img
|
||||||
src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF"
|
src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
alt
|
|
||||||
/>
|
/>
|
||||||
<div class="des">
|
<div class="des">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
@ -81,24 +80,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, onMounted, reactive } from "vue";
|
import { defineComponent, onMounted, reactive } from "vue";
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "music",
|
|
||||||
components: {},
|
|
||||||
setup() {
|
|
||||||
let state = reactive({});
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
console.log("onmunted");
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
state,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
458
src/views/website/index/comp/index3.vue
Normal file
458
src/views/website/index/comp/index3.vue
Normal file
@ -0,0 +1,458 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box3" v-loading="loading">
|
||||||
|
<div class="tit">专家分布地图</div>
|
||||||
|
<div v-if="state.isShowGoBack" class="close-back" @click="goBack">
|
||||||
|
<img src="./img/back_button.png" />
|
||||||
|
</div>
|
||||||
|
<!-- echartsDom 兼容缩放 -->
|
||||||
|
<div ref="map" class="map echartsDom" id="map"></div>
|
||||||
|
<div class="leftBox">
|
||||||
|
<div class="head">
|
||||||
|
<div class="a">地区</div>
|
||||||
|
<div class="b">专家数量</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="Object.keys(snapTree).length > 0" v-for="v in snapTree">
|
||||||
|
<div class="a">{{ v.name }}</div>
|
||||||
|
<div class="b">{{ v.count }}</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div class="a">暂无</div>
|
||||||
|
<div class="b">暂无</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rightBox">
|
||||||
|
<div class="head">
|
||||||
|
<div class="a">领域</div>
|
||||||
|
<div class="b">专家数量</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="Object.keys(getIndustry(snapTree)).length > 0" v-for="(v,k) in getIndustry(snapTree)">
|
||||||
|
<div class="a">{{ k }}</div>
|
||||||
|
<div class="b">{{ v }}</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div class="a">暂无</div>
|
||||||
|
<div class="b">暂无</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { defineComponent, getCurrentInstance, onMounted, reactive } from "vue";
|
||||||
|
import echarts from 'echarts'
|
||||||
|
import { getExpert } from "@/api/website/home/index";
|
||||||
|
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
const loading = shallowRef(true)
|
||||||
|
let treeData = { "340000": { "code": "340000", "name": "安徽省", "count": 107, "industry": { "1-1": 2, "1-2": 1, "2-1": 3 }, "children": { "340100": { "code": "340100", "name": "合肥市", "count": 106, "industry": { "1-1": 1, "1-2": 1, "2-1": 2 }, "children": { "340111": { "code": "340111", "name": "包河区", "count": 105, "industry": { "1-1": 1, "2-1": 1 }, "children": null }, "340121": { "code": "340121", "name": "长丰县", "count": 105, "industry": { "1-2": 1, "2-1": 1 }, "children": null } } }, "340200": { "code": "340200", "name": "芜湖市", "count": 105, "industry": { "1-1": 1, "2-1": 1 }, "children": {} } } }, "500000": { "code": "500000", "name": "重庆", "count": 300, "industry": null, "children": { "500100": { "code": "500100", "name": "市辖区", "count": 300, "industry": null, "children": null } } }, "630000": { "code": "630000", "name": "青海省", "count": 1200, "industry": null, "children": { "630200": { "code": "630200", "name": "海东市", "count": 1200, "industry": null, "children": null } } } };
|
||||||
|
const snapTree = shallowRef({});
|
||||||
|
|
||||||
|
function searchRegionData (code) {
|
||||||
|
// console.log(code, treeData,'searchRegionData')
|
||||||
|
return deepFindTree(code, treeData);
|
||||||
|
}
|
||||||
|
|
||||||
|
function deepFindTree (code, tree) {
|
||||||
|
let snap = false;
|
||||||
|
for (const key in tree) {
|
||||||
|
if (Object.hasOwnProperty.call(tree, key)) {
|
||||||
|
if (code == key) {
|
||||||
|
snap = tree[code];
|
||||||
|
break;
|
||||||
|
} else if (tree[key]['children'] != null) {
|
||||||
|
snap = deepFindTree(code, tree[key]['children']);
|
||||||
|
if (snap) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
snap = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return snap;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getIndustry (object) {
|
||||||
|
let snap = {};
|
||||||
|
for (const key in object) {
|
||||||
|
if (Object.hasOwnProperty.call(object, key)) {
|
||||||
|
const element = object[key];
|
||||||
|
if (element['industry'] != null) {
|
||||||
|
for (const ek in element['industry']) {
|
||||||
|
if (Object.hasOwnProperty.call(element['industry'], ek)) {
|
||||||
|
const ele = element['industry'][ek];
|
||||||
|
if (!Object.hasOwnProperty.call(snap, ek)) {
|
||||||
|
snap[ek] = 0
|
||||||
|
}
|
||||||
|
snap[ek] += ele
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// for (let index = 0; index < element['industry'].length; index++) {
|
||||||
|
// const ele = element['industry'][index];
|
||||||
|
// if(Object.hasOwnProperty.call(snap, ele)) {
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return snap
|
||||||
|
}
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
loading: false,
|
||||||
|
isShowGoBack: false,
|
||||||
|
nameType: '',
|
||||||
|
cityName: '中国',
|
||||||
|
areaCode: 10000,
|
||||||
|
AreaCodeStack: ['中国'],
|
||||||
|
geoJsonData: '',
|
||||||
|
echartsMap: null,
|
||||||
|
map: null,
|
||||||
|
uimap: null,
|
||||||
|
district: null,
|
||||||
|
polygons: [],
|
||||||
|
cityCode: '100000',
|
||||||
|
citySelect: null,
|
||||||
|
districtSelect: null,
|
||||||
|
opts: {},
|
||||||
|
areaData: {},
|
||||||
|
mapData: [],
|
||||||
|
zip: {},//打包zip
|
||||||
|
codeList: [],
|
||||||
|
isCodeListLoadComplete: false,//codeList是否全部获取完毕
|
||||||
|
downloadTips: '下载geoJson数据',//下载进度提示
|
||||||
|
isShowTips: false,//是否显示下载提示
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
// 数据接口
|
||||||
|
await getExpert().then(res => {
|
||||||
|
if (200 == res.code) {
|
||||||
|
treeData = res.data;
|
||||||
|
snapTree.value = res.data;
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
let echartsDomList = document.querySelectorAll('.echartsDom');
|
||||||
|
// 兼容echarts
|
||||||
|
echartsDomList.forEach(element => {
|
||||||
|
element.style.zoom = window.devicePixelRatio;
|
||||||
|
element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
|
||||||
|
element.style.transformOrigin = "0%0%";
|
||||||
|
element.style.width = window.devicePixelRatio * 100 + '%';
|
||||||
|
element.style.height = window.devicePixelRatio * 100 + '%';
|
||||||
|
console.log(element.style.zoom, 'element.style.zoom')
|
||||||
|
});
|
||||||
|
|
||||||
|
let height = document.body.clientHeight;
|
||||||
|
let width = document.body.clientWidth;
|
||||||
|
let dom = proxy.$refs['map'];
|
||||||
|
dom.style.width = width + 'px';
|
||||||
|
dom.style.height = height - 80 + 'px';
|
||||||
|
state.echartsMap = echarts.init(dom);
|
||||||
|
state.echartsMap.on('click', echartsMapClick);
|
||||||
|
|
||||||
|
state.map = new AMap.Map('container', {
|
||||||
|
resizeEnable: true,
|
||||||
|
center: [116.30946, 39.937629],
|
||||||
|
zoom: 3
|
||||||
|
});
|
||||||
|
state.opts = {
|
||||||
|
subdistrict: 1, //返回下一级行政区
|
||||||
|
showbiz: false //最后一级返回街道信息
|
||||||
|
};
|
||||||
|
state.district = new AMap.DistrictSearch(state.opts);//注意：需要使用插件同步下发功能才能这样直接使用
|
||||||
|
state.district.search('中国', (status, result) => {
|
||||||
|
if (status == 'complete') {
|
||||||
|
getData(result.districtList[0], '', 100000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function goBack () {
|
||||||
|
state.isShowGoBack = false;
|
||||||
|
loading.value = true;
|
||||||
|
state.district.search('中国', (status, result) => {
|
||||||
|
if (status == 'complete') {
|
||||||
|
getData(result.districtList[0], '', 100000);
|
||||||
|
snapTree.value = treeData;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function echartsMapClick (params) {//地图点击事件
|
||||||
|
if (params.data.cityCode == '710000') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (params.data.level == 'district') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (params.data.level == 'street') return;//此处的params.data为state.mapData里的数据
|
||||||
|
|
||||||
|
let snap = searchRegionData(params.data.cityCode);
|
||||||
|
snapTree.value = {}
|
||||||
|
if (snap) {
|
||||||
|
snapTree.value = snap['children']
|
||||||
|
}
|
||||||
|
state.cityCode = params.data.cityCode;
|
||||||
|
state.cityName = params.data.name;
|
||||||
|
state.district.setLevel(params.data.level); //行政区级别
|
||||||
|
state.district.setExtensions('all');
|
||||||
|
state.isShowGoBack = true;
|
||||||
|
loading.value = true;
|
||||||
|
//行政区查询
|
||||||
|
//按照adcode进行查询可以保证数据返回的唯一性
|
||||||
|
state.district.search(state.cityCode, (status, result) => {
|
||||||
|
if (status === 'complete') {
|
||||||
|
if (params.data.level == 'district') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.AreaCodeStack.push(result.districtList[0].adcode);
|
||||||
|
getData(result.districtList[0], params.data.level, state.cityCode);//这个getData函数在前面已经定义过了
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getData (data, level, adcode) {//处理获取出来的边界数据
|
||||||
|
var subList = data.districtList;
|
||||||
|
if (subList) {
|
||||||
|
var curlevel = subList[0].level;
|
||||||
|
if (curlevel === 'street') {//为了配合echarts地图区县名称显示正常，这边街道级别数据需要特殊处理
|
||||||
|
let mapJsonList = state.geoJsonData.features;
|
||||||
|
let mapJson = {};
|
||||||
|
for (let i in mapJsonList) {
|
||||||
|
if (mapJsonList[i].properties.name == state.cityName) {
|
||||||
|
mapJson['features'] = [].concat(mapJsonList[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
state.mapData = [];
|
||||||
|
let item = searchRegionData(cityCode)
|
||||||
|
if (item) {
|
||||||
|
console.log('1 searchRegionData(cityCode)', item);
|
||||||
|
}
|
||||||
|
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
|
||||||
|
state.mapData.push({ name: state.cityName, value: item ? item.count : 0, level: curlevel });
|
||||||
|
loadMap(state.cityName, mapJson);
|
||||||
|
state.geoJsonData = mapJson;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
//街道级以上的数据处理方式
|
||||||
|
state.mapData = [];
|
||||||
|
for (var i = 0, l = subList.length; i < l; i++) {
|
||||||
|
var name = subList[i].name;
|
||||||
|
var cityCode = subList[i].adcode;
|
||||||
|
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
|
||||||
|
let item = searchRegionData(cityCode)
|
||||||
|
|
||||||
|
if (item) {
|
||||||
|
console.log('2 searchRegionData(cityCode)', item);
|
||||||
|
}
|
||||||
|
state.mapData.push({
|
||||||
|
name: name,
|
||||||
|
value: item ? item.count : 0,
|
||||||
|
cityCode: cityCode,
|
||||||
|
level: curlevel
|
||||||
|
});
|
||||||
|
}
|
||||||
|
loadMapData(adcode);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadMapData (areaCode) {
|
||||||
|
AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
|
||||||
|
|
||||||
|
//创建一个实例
|
||||||
|
var districtExplorer = window.districtExplorer = new DistrictExplorer({
|
||||||
|
eventSupport: true, //打开事件支持
|
||||||
|
map: state.map
|
||||||
|
});
|
||||||
|
|
||||||
|
districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
console.error(error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let mapJson = {};
|
||||||
|
//特别注意这里哦，如果查看过正常的geojson文件，都会发现，文件都是以features 字段开头的，所以这里要记得加上
|
||||||
|
mapJson.features = areaNode.getSubFeatures();
|
||||||
|
loadMap(state.cityName, mapJson);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadMap (mapName, data) {
|
||||||
|
if (data) {
|
||||||
|
echarts.registerMap(mapName, data);//把geoJson数据注入echarts
|
||||||
|
//配置echarts的option
|
||||||
|
var option = {
|
||||||
|
visualMap: {
|
||||||
|
type: 'piecewise',
|
||||||
|
left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
|
||||||
|
bottom: "30",
|
||||||
|
orient: "horizontal", //图例排列方向
|
||||||
|
padding: 5,
|
||||||
|
pieces: [
|
||||||
|
{ gte: 0, lte: 99, label: '99', color: '#CAE9FD' },
|
||||||
|
{ gte: 100, lte: 299, label: '100-299', color: '#7ED2F7' },
|
||||||
|
{ gte: 300, lte: 499, label: '299-499', color: '#039DDD' },
|
||||||
|
{ gte: 500, label: '500', color: '#0D4884' },
|
||||||
|
// {max: 30, label: '安全', color: '#2c9a42'},
|
||||||
|
// {min: 30, max: 60, label: '警告', color: '#d08a00'},
|
||||||
|
// {min: 60, label: '危险', color: '#c23c33'},
|
||||||
|
],
|
||||||
|
// color: '#fff',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
visibility: 'off',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
//提示框信息
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{b}\n{c}人',
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: '数据名称',
|
||||||
|
type: 'map',
|
||||||
|
roam: false,
|
||||||
|
top: "15%",
|
||||||
|
bottom: state.isShowGoBack ? '8%' : '-20%',
|
||||||
|
mapType: mapName,
|
||||||
|
selectedMode: 'single',
|
||||||
|
showLegendSymbol: false,
|
||||||
|
visibility: 'off',
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#ccc',
|
||||||
|
areaColor: '#fff',
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 0.5,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "rgb(249, 249, 249)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
areaColor: "rgb(237, 201, 216)",
|
||||||
|
borderColor: '#fff',
|
||||||
|
areaStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "rgb(249, 249, 249)"
|
||||||
|
},
|
||||||
|
// formatter: function (value) { //标签的格式化工具。
|
||||||
|
// return value.name + '：' + value.value; // 范围标签显示内容。
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: state.mapData, //这个data里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
state.echartsMap.setOption(option);
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box3 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(0deg, #010101, #041744);
|
||||||
|
position: relative;
|
||||||
|
.tit {
|
||||||
|
position: absolute;
|
||||||
|
top: 75px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36px;
|
||||||
|
font-family: Source Han Sans CN;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.map {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url(./img/lightEffect.png);
|
||||||
|
background-size: 644px 272px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-back {
|
||||||
|
background: url(img/close_back.png) no-repeat;
|
||||||
|
transition: all 0.5s;
|
||||||
|
height: 70px;
|
||||||
|
width: 85px;
|
||||||
|
color: #fff;
|
||||||
|
left: 65px;
|
||||||
|
position: absolute;
|
||||||
|
top: 100px;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1000;
|
||||||
|
&:hover {
|
||||||
|
left: 55px;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
margin: 28px auto 0;
|
||||||
|
width: 30px;
|
||||||
|
display: block;
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.leftBox {
|
||||||
|
left: 230px;
|
||||||
|
}
|
||||||
|
.rightBox {
|
||||||
|
right: 230px;
|
||||||
|
max-height: 465px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftBox,
|
||||||
|
.rightBox {
|
||||||
|
position: absolute;
|
||||||
|
top: 25%;
|
||||||
|
max-width: 280px;
|
||||||
|
min-width: 200px;
|
||||||
|
max-height: 256px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: rgba(4, 22, 65, 0.5);
|
||||||
|
border: 1px solid #0054ff;
|
||||||
|
color: rgba(161, 192, 255, 1);
|
||||||
|
& > div {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.head {
|
||||||
|
border-bottom: 1px solid #0054ff;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.a {
|
||||||
|
flex: 1;
|
||||||
|
border-right: 1px solid #0054ff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 42px;
|
||||||
|
}
|
||||||
|
.b {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 42px;
|
||||||
|
width: 90px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
456
src/views/website/index/comp/index4.vue
Normal file
456
src/views/website/index/comp/index4.vue
Normal file
@ -0,0 +1,456 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box3" v-loading="loading">
|
||||||
|
<div class="tit">实验室分布地图</div>
|
||||||
|
<div v-if="state.isShowGoBack" class="close-back" @click="goBack">
|
||||||
|
<img src="./img/back_button.png" />
|
||||||
|
</div>
|
||||||
|
<!-- echartsDom 兼容缩放 -->
|
||||||
|
<div ref="map" class="map echartsDom" id="map"></div>
|
||||||
|
<div class="leftBox">
|
||||||
|
<div class="head">
|
||||||
|
<div class="a">地区</div>
|
||||||
|
<div class="b">实验室数量</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="Object.keys(snapTree).length > 0" v-for="v in snapTree">
|
||||||
|
<div class="a">{{ v.name }}</div>
|
||||||
|
<div class="b">{{ v.count }}</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div class="a">暂无</div>
|
||||||
|
<div class="b">暂无</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rightBox">
|
||||||
|
<div class="head">
|
||||||
|
<div class="a">领域</div>
|
||||||
|
<div class="b">实验室数量</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="Object.keys(getIndustry(snapTree)).length > 0" v-for="(v,k) in getIndustry(snapTree)">
|
||||||
|
<div class="a">{{ k }}</div>
|
||||||
|
<div class="b">{{ v }}</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div class="a">暂无</div>
|
||||||
|
<div class="b">暂无</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { defineComponent, getCurrentInstance, onMounted, reactive } from "vue";
|
||||||
|
import echarts from 'echarts'
|
||||||
|
import { laboratory } from "@/api/website/home/index";
|
||||||
|
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
const loading = shallowRef(true)
|
||||||
|
let treeData = { "340000": { "code": "340000", "name": "安徽省", "count": 107, "industry": { "1-1": 2, "1-2": 1, "2-1": 3 }, "children": { "340100": { "code": "340100", "name": "合肥市", "count": 106, "industry": { "1-1": 1, "1-2": 1, "2-1": 2 }, "children": { "340111": { "code": "340111", "name": "包河区", "count": 105, "industry": { "1-1": 1, "2-1": 1 }, "children": null }, "340121": { "code": "340121", "name": "长丰县", "count": 105, "industry": { "1-2": 1, "2-1": 1 }, "children": null } } }, "340200": { "code": "340200", "name": "芜湖市", "count": 105, "industry": { "1-1": 1, "2-1": 1 }, "children": {} } } }, "500000": { "code": "500000", "name": "重庆", "count": 300, "industry": null, "children": { "500100": { "code": "500100", "name": "市辖区", "count": 300, "industry": null, "children": null } } }, "630000": { "code": "630000", "name": "青海省", "count": 1200, "industry": null, "children": { "630200": { "code": "630200", "name": "海东市", "count": 1200, "industry": null, "children": null } } } };
|
||||||
|
const snapTree = shallowRef({});
|
||||||
|
|
||||||
|
function searchRegionData (code) {
|
||||||
|
// console.log(code, treeData,'searchRegionData')
|
||||||
|
return deepFindTree(code, treeData);
|
||||||
|
}
|
||||||
|
|
||||||
|
function deepFindTree (code, tree) {
|
||||||
|
let snap = false;
|
||||||
|
for (const key in tree) {
|
||||||
|
if (Object.hasOwnProperty.call(tree, key)) {
|
||||||
|
if (code == key) {
|
||||||
|
snap = tree[code];
|
||||||
|
break;
|
||||||
|
} else if (tree[key]['children'] != null) {
|
||||||
|
snap = deepFindTree(code, tree[key]['children']);
|
||||||
|
if (snap) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
snap = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return snap;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getIndustry (object) {
|
||||||
|
let snap = {};
|
||||||
|
for (const key in object) {
|
||||||
|
if (Object.hasOwnProperty.call(object, key)) {
|
||||||
|
const element = object[key];
|
||||||
|
if (element['industry'] != null) {
|
||||||
|
for (const ek in element['industry']) {
|
||||||
|
if (Object.hasOwnProperty.call(element['industry'], ek)) {
|
||||||
|
const ele = element['industry'][ek];
|
||||||
|
if (!Object.hasOwnProperty.call(snap, ek)) {
|
||||||
|
snap[ek] = 0
|
||||||
|
}
|
||||||
|
snap[ek] += ele
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// for (let index = 0; index < element['industry'].length; index++) {
|
||||||
|
// const ele = element['industry'][index];
|
||||||
|
// if(Object.hasOwnProperty.call(snap, ele)) {
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return snap
|
||||||
|
}
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
loading: false,
|
||||||
|
isShowGoBack: false,
|
||||||
|
nameType: '',
|
||||||
|
cityName: '中国',
|
||||||
|
areaCode: 10000,
|
||||||
|
AreaCodeStack: ['中国'],
|
||||||
|
geoJsonData: '',
|
||||||
|
echartsMap: null,
|
||||||
|
map: null,
|
||||||
|
uimap: null,
|
||||||
|
district: null,
|
||||||
|
polygons: [],
|
||||||
|
cityCode: '100000',
|
||||||
|
citySelect: null,
|
||||||
|
districtSelect: null,
|
||||||
|
opts: {},
|
||||||
|
areaData: {},
|
||||||
|
mapData: [],
|
||||||
|
zip: {},//打包zip
|
||||||
|
codeList: [],
|
||||||
|
isCodeListLoadComplete: false,//codeList是否全部获取完毕
|
||||||
|
downloadTips: '下载geoJson数据',//下载进度提示
|
||||||
|
isShowTips: false,//是否显示下载提示
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
// 数据接口
|
||||||
|
await laboratory().then(res => {
|
||||||
|
if (200 == res.code) {
|
||||||
|
treeData = res.data;
|
||||||
|
snapTree.value = res.data;
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
let echartsDomList = document.querySelectorAll('.echartsDom');
|
||||||
|
// 兼容echarts
|
||||||
|
echartsDomList.forEach(element => {
|
||||||
|
element.style.zoom = window.devicePixelRatio;
|
||||||
|
element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
|
||||||
|
element.style.transformOrigin = "0%0%";
|
||||||
|
element.style.width = window.devicePixelRatio * 100 + '%';
|
||||||
|
element.style.height = window.devicePixelRatio * 100 + '%';
|
||||||
|
console.log(element.style.zoom, 'element.style.zoom')
|
||||||
|
});
|
||||||
|
|
||||||
|
let height = document.body.clientHeight;
|
||||||
|
let width = document.body.clientWidth;
|
||||||
|
let dom = proxy.$refs['map'];
|
||||||
|
dom.style.width = width + 'px';
|
||||||
|
dom.style.height = height - 80 + 'px';
|
||||||
|
state.echartsMap = echarts.init(dom);
|
||||||
|
state.echartsMap.on('click', echartsMapClick);
|
||||||
|
|
||||||
|
state.map = new AMap.Map('container', {
|
||||||
|
resizeEnable: true,
|
||||||
|
center: [116.30946, 39.937629],
|
||||||
|
zoom: 3
|
||||||
|
});
|
||||||
|
state.opts = {
|
||||||
|
subdistrict: 1, //返回下一级行政区
|
||||||
|
showbiz: false //最后一级返回街道信息
|
||||||
|
};
|
||||||
|
state.district = new AMap.DistrictSearch(state.opts);//注意：需要使用插件同步下发功能才能这样直接使用
|
||||||
|
state.district.search('中国', (status, result) => {
|
||||||
|
if (status == 'complete') {
|
||||||
|
getData(result.districtList[0], '', 100000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function goBack () {
|
||||||
|
state.isShowGoBack = false;
|
||||||
|
loading.value = true;
|
||||||
|
state.district.search('中国', (status, result) => {
|
||||||
|
if (status == 'complete') {
|
||||||
|
getData(result.districtList[0], '', 100000);
|
||||||
|
snapTree.value = treeData;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function echartsMapClick (params) {//地图点击事件
|
||||||
|
if (params.data.cityCode == '710000') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (params.data.level == 'district') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (params.data.level == 'street') return;//此处的params.data为state.mapData里的数据
|
||||||
|
|
||||||
|
let snap = searchRegionData(params.data.cityCode);
|
||||||
|
snapTree.value = {}
|
||||||
|
if (snap) {
|
||||||
|
snapTree.value = snap['children']
|
||||||
|
}
|
||||||
|
state.cityCode = params.data.cityCode;
|
||||||
|
state.cityName = params.data.name;
|
||||||
|
state.district.setLevel(params.data.level); //行政区级别
|
||||||
|
state.district.setExtensions('all');
|
||||||
|
state.isShowGoBack = true;
|
||||||
|
loading.value = true;
|
||||||
|
//行政区查询
|
||||||
|
//按照adcode进行查询可以保证数据返回的唯一性
|
||||||
|
state.district.search(state.cityCode, (status, result) => {
|
||||||
|
if (status === 'complete') {
|
||||||
|
if (params.data.level == 'district') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.AreaCodeStack.push(result.districtList[0].adcode);
|
||||||
|
getData(result.districtList[0], params.data.level, state.cityCode);//这个getData函数在前面已经定义过了
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getData (data, level, adcode) {//处理获取出来的边界数据
|
||||||
|
var subList = data.districtList;
|
||||||
|
if (subList) {
|
||||||
|
var curlevel = subList[0].level;
|
||||||
|
if (curlevel === 'street') {//为了配合echarts地图区县名称显示正常，这边街道级别数据需要特殊处理
|
||||||
|
let mapJsonList = state.geoJsonData.features;
|
||||||
|
let mapJson = {};
|
||||||
|
for (let i in mapJsonList) {
|
||||||
|
if (mapJsonList[i].properties.name == state.cityName) {
|
||||||
|
mapJson['features'] = [].concat(mapJsonList[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
state.mapData = [];
|
||||||
|
let item = searchRegionData(cityCode)
|
||||||
|
if (item) {
|
||||||
|
console.log('1 searchRegionData(cityCode)', item);
|
||||||
|
}
|
||||||
|
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
|
||||||
|
state.mapData.push({ name: state.cityName, value: item ? item.count : 0, level: curlevel });
|
||||||
|
loadMap(state.cityName, mapJson);
|
||||||
|
state.geoJsonData = mapJson;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
//街道级以上的数据处理方式
|
||||||
|
state.mapData = [];
|
||||||
|
for (var i = 0, l = subList.length; i < l; i++) {
|
||||||
|
var name = subList[i].name;
|
||||||
|
var cityCode = subList[i].adcode;
|
||||||
|
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
|
||||||
|
let item = searchRegionData(cityCode)
|
||||||
|
|
||||||
|
if (item) {
|
||||||
|
console.log('2 searchRegionData(cityCode)', item);
|
||||||
|
}
|
||||||
|
state.mapData.push({
|
||||||
|
name: name,
|
||||||
|
value: item ? item.count : 0,
|
||||||
|
cityCode: cityCode,
|
||||||
|
level: curlevel
|
||||||
|
});
|
||||||
|
}
|
||||||
|
loadMapData(adcode);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadMapData (areaCode) {
|
||||||
|
AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
|
||||||
|
|
||||||
|
//创建一个实例
|
||||||
|
var districtExplorer = window.districtExplorer = new DistrictExplorer({
|
||||||
|
eventSupport: true, //打开事件支持
|
||||||
|
map: state.map
|
||||||
|
});
|
||||||
|
|
||||||
|
districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
console.error(error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let mapJson = {};
|
||||||
|
//特别注意这里哦，如果查看过正常的geojson文件，都会发现，文件都是以features 字段开头的，所以这里要记得加上
|
||||||
|
mapJson.features = areaNode.getSubFeatures();
|
||||||
|
loadMap(state.cityName, mapJson);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadMap (mapName, data) {
|
||||||
|
if (data) {
|
||||||
|
echarts.registerMap(mapName, data);//把geoJson数据注入echarts
|
||||||
|
//配置echarts的option
|
||||||
|
var option = {
|
||||||
|
visualMap: {
|
||||||
|
type: 'piecewise',
|
||||||
|
left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
|
||||||
|
bottom: "30",
|
||||||
|
orient: "horizontal", //图例排列方向
|
||||||
|
padding: 5,
|
||||||
|
pieces: [
|
||||||
|
{ gte: 0, lte: 99, label: '99', color: '#CAE9FD' },
|
||||||
|
{ gte: 100, lte: 299, label: '100-299', color: '#7ED2F7' },
|
||||||
|
{ gte: 300, lte: 499, label: '299-499', color: '#039DDD' },
|
||||||
|
{ gte: 500, label: '500', color: '#0D4884' },
|
||||||
|
// {max: 30, label: '安全', color: '#2c9a42'},
|
||||||
|
// {min: 30, max: 60, label: '警告', color: '#d08a00'},
|
||||||
|
// {min: 60, label: '危险', color: '#c23c33'},
|
||||||
|
],
|
||||||
|
// color: '#fff',
|
||||||
|
textStyle: {
|
||||||
|
color: '#333333',
|
||||||
|
},
|
||||||
|
visibility: 'off',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
//提示框信息
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{b}\n{c}个',
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: '数据名称',
|
||||||
|
type: 'map',
|
||||||
|
roam: false,
|
||||||
|
top: "15%",
|
||||||
|
bottom: state.isShowGoBack ? '8%' : '-20%',
|
||||||
|
mapType: mapName,
|
||||||
|
selectedMode: 'single',
|
||||||
|
showLegendSymbol: false,
|
||||||
|
visibility: 'off',
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#333333',
|
||||||
|
areaColor: '#fff',
|
||||||
|
borderColor: '#333333',
|
||||||
|
borderWidth: 0.5,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#333333",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
areaColor: "rgb(237, 201, 216)",
|
||||||
|
borderColor: '#333333',
|
||||||
|
areaStyle: {
|
||||||
|
color: '#333333'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#333333"
|
||||||
|
},
|
||||||
|
// formatter: function (value) { //标签的格式化工具。
|
||||||
|
// return value.name + '：' + value.value; // 范围标签显示内容。
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: state.mapData, //这个data里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
state.echartsMap.setOption(option);
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box3 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
.tit {
|
||||||
|
position: absolute;
|
||||||
|
top: 75px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36px;
|
||||||
|
font-family: Source Han Sans CN;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.map {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
// background-image: url(./img/lightEffect.png);
|
||||||
|
background-size: 644px 272px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-back {
|
||||||
|
background: url(img/close_back.png) no-repeat;
|
||||||
|
transition: all 0.5s;
|
||||||
|
height: 70px;
|
||||||
|
width: 85px;
|
||||||
|
color: #fff;
|
||||||
|
left: 65px;
|
||||||
|
position: absolute;
|
||||||
|
top: 100px;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1000;
|
||||||
|
&:hover {
|
||||||
|
left: 55px;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
margin: 28px auto 0;
|
||||||
|
width: 30px;
|
||||||
|
display: block;
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.leftBox {
|
||||||
|
left: 230px;
|
||||||
|
}
|
||||||
|
.rightBox {
|
||||||
|
right: 230px;
|
||||||
|
max-height: 465px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftBox,
|
||||||
|
.rightBox {
|
||||||
|
position: absolute;
|
||||||
|
top: 25%;
|
||||||
|
max-width: 280px;
|
||||||
|
min-width: 200px;
|
||||||
|
max-height: 256px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid #DCDCDC;
|
||||||
|
color: #666666;
|
||||||
|
& > div {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.head {
|
||||||
|
border-bottom: 1px solid #DCDCDC;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.a {
|
||||||
|
flex: 1;
|
||||||
|
border-right: 1px solid #DCDCDC;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 42px;
|
||||||
|
}
|
||||||
|
.b {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 42px;
|
||||||
|
width: 90px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
458
src/views/website/index/comp/index5.vue
Normal file
458
src/views/website/index/comp/index5.vue
Normal file
@ -0,0 +1,458 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box3" v-loading="loading">
|
||||||
|
<div class="tit">专利与成果分布地图</div>
|
||||||
|
<div v-if="state.isShowGoBack" class="close-back" @click="goBack">
|
||||||
|
<img src="./img/back_button.png" />
|
||||||
|
</div>
|
||||||
|
<!-- echartsDom 兼容缩放 -->
|
||||||
|
<div ref="map" class="map echartsDom" id="map"></div>
|
||||||
|
<div class="leftBox">
|
||||||
|
<div class="head">
|
||||||
|
<div class="a">地区</div>
|
||||||
|
<div class="b">成果数量</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="Object.keys(snapTree).length > 0" v-for="v in snapTree">
|
||||||
|
<div class="a">{{ v.name }}</div>
|
||||||
|
<div class="b">{{ v.count }}</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div class="a">暂无</div>
|
||||||
|
<div class="b">暂无</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rightBox">
|
||||||
|
<div class="head">
|
||||||
|
<div class="a">领域</div>
|
||||||
|
<div class="b">成果数量</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="Object.keys(getIndustry(snapTree)).length > 0" v-for="(v,k) in getIndustry(snapTree)">
|
||||||
|
<div class="a">{{ k }}</div>
|
||||||
|
<div class="b">{{ v }}</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div class="a">暂无</div>
|
||||||
|
<div class="b">暂无</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { defineComponent, getCurrentInstance, onMounted, reactive } from "vue";
|
||||||
|
import echarts from 'echarts'
|
||||||
|
import { achievement } from "@/api/website/home/index";
|
||||||
|
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
const loading = shallowRef(true)
|
||||||
|
let treeData = { "340000": { "code": "340000", "name": "安徽省", "count": 107, "industry": { "1-1": 2, "1-2": 1, "2-1": 3 }, "children": { "340100": { "code": "340100", "name": "合肥市", "count": 106, "industry": { "1-1": 1, "1-2": 1, "2-1": 2 }, "children": { "340111": { "code": "340111", "name": "包河区", "count": 105, "industry": { "1-1": 1, "2-1": 1 }, "children": null }, "340121": { "code": "340121", "name": "长丰县", "count": 105, "industry": { "1-2": 1, "2-1": 1 }, "children": null } } }, "340200": { "code": "340200", "name": "芜湖市", "count": 105, "industry": { "1-1": 1, "2-1": 1 }, "children": {} } } }, "500000": { "code": "500000", "name": "重庆", "count": 300, "industry": null, "children": { "500100": { "code": "500100", "name": "市辖区", "count": 300, "industry": null, "children": null } } }, "630000": { "code": "630000", "name": "青海省", "count": 1200, "industry": null, "children": { "630200": { "code": "630200", "name": "海东市", "count": 1200, "industry": null, "children": null } } } };
|
||||||
|
const snapTree = shallowRef({});
|
||||||
|
|
||||||
|
function searchRegionData (code) {
|
||||||
|
// console.log(code, treeData,'searchRegionData')
|
||||||
|
return deepFindTree(code, treeData);
|
||||||
|
}
|
||||||
|
|
||||||
|
function deepFindTree (code, tree) {
|
||||||
|
let snap = false;
|
||||||
|
for (const key in tree) {
|
||||||
|
if (Object.hasOwnProperty.call(tree, key)) {
|
||||||
|
if (code == key) {
|
||||||
|
snap = tree[code];
|
||||||
|
break;
|
||||||
|
} else if (tree[key]['children'] != null) {
|
||||||
|
snap = deepFindTree(code, tree[key]['children']);
|
||||||
|
if (snap) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
snap = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return snap;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getIndustry (object) {
|
||||||
|
let snap = {};
|
||||||
|
for (const key in object) {
|
||||||
|
if (Object.hasOwnProperty.call(object, key)) {
|
||||||
|
const element = object[key];
|
||||||
|
if (element['industry'] != null) {
|
||||||
|
for (const ek in element['industry']) {
|
||||||
|
if (Object.hasOwnProperty.call(element['industry'], ek)) {
|
||||||
|
const ele = element['industry'][ek];
|
||||||
|
if (!Object.hasOwnProperty.call(snap, ek)) {
|
||||||
|
snap[ek] = 0
|
||||||
|
}
|
||||||
|
snap[ek] += ele
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// for (let index = 0; index < element['industry'].length; index++) {
|
||||||
|
// const ele = element['industry'][index];
|
||||||
|
// if(Object.hasOwnProperty.call(snap, ele)) {
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return snap
|
||||||
|
}
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
loading: false,
|
||||||
|
isShowGoBack: false,
|
||||||
|
nameType: '',
|
||||||
|
cityName: '中国',
|
||||||
|
areaCode: 10000,
|
||||||
|
AreaCodeStack: ['中国'],
|
||||||
|
geoJsonData: '',
|
||||||
|
echartsMap: null,
|
||||||
|
map: null,
|
||||||
|
uimap: null,
|
||||||
|
district: null,
|
||||||
|
polygons: [],
|
||||||
|
cityCode: '100000',
|
||||||
|
citySelect: null,
|
||||||
|
districtSelect: null,
|
||||||
|
opts: {},
|
||||||
|
areaData: {},
|
||||||
|
mapData: [],
|
||||||
|
zip: {},//打包zip
|
||||||
|
codeList: [],
|
||||||
|
isCodeListLoadComplete: false,//codeList是否全部获取完毕
|
||||||
|
downloadTips: '下载geoJson数据',//下载进度提示
|
||||||
|
isShowTips: false,//是否显示下载提示
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
// 数据接口
|
||||||
|
await achievement().then(res => {
|
||||||
|
if (200 == res.code) {
|
||||||
|
treeData = res.data;
|
||||||
|
snapTree.value = res.data;
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
let echartsDomList = document.querySelectorAll('.echartsDom');
|
||||||
|
// 兼容echarts
|
||||||
|
echartsDomList.forEach(element => {
|
||||||
|
element.style.zoom = window.devicePixelRatio;
|
||||||
|
element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
|
||||||
|
element.style.transformOrigin = "0%0%";
|
||||||
|
element.style.width = window.devicePixelRatio * 100 + '%';
|
||||||
|
element.style.height = window.devicePixelRatio * 100 + '%';
|
||||||
|
console.log(element.style.zoom, 'element.style.zoom')
|
||||||
|
});
|
||||||
|
|
||||||
|
let height = document.body.clientHeight;
|
||||||
|
let width = document.body.clientWidth;
|
||||||
|
let dom = proxy.$refs['map'];
|
||||||
|
dom.style.width = width + 'px';
|
||||||
|
dom.style.height = height - 80 + 'px';
|
||||||
|
state.echartsMap = echarts.init(dom);
|
||||||
|
state.echartsMap.on('click', echartsMapClick);
|
||||||
|
|
||||||
|
state.map = new AMap.Map('container', {
|
||||||
|
resizeEnable: true,
|
||||||
|
center: [116.30946, 39.937629],
|
||||||
|
zoom: 3
|
||||||
|
});
|
||||||
|
state.opts = {
|
||||||
|
subdistrict: 1, //返回下一级行政区
|
||||||
|
showbiz: false //最后一级返回街道信息
|
||||||
|
};
|
||||||
|
state.district = new AMap.DistrictSearch(state.opts);//注意：需要使用插件同步下发功能才能这样直接使用
|
||||||
|
state.district.search('中国', (status, result) => {
|
||||||
|
if (status == 'complete') {
|
||||||
|
getData(result.districtList[0], '', 100000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function goBack () {
|
||||||
|
state.isShowGoBack = false;
|
||||||
|
loading.value = true;
|
||||||
|
state.district.search('中国', (status, result) => {
|
||||||
|
if (status == 'complete') {
|
||||||
|
getData(result.districtList[0], '', 100000);
|
||||||
|
snapTree.value = treeData;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function echartsMapClick (params) {//地图点击事件
|
||||||
|
if (params.data.cityCode == '710000') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (params.data.level == 'district') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (params.data.level == 'street') return;//此处的params.data为state.mapData里的数据
|
||||||
|
|
||||||
|
let snap = searchRegionData(params.data.cityCode);
|
||||||
|
snapTree.value = {}
|
||||||
|
if (snap) {
|
||||||
|
snapTree.value = snap['children']
|
||||||
|
}
|
||||||
|
state.cityCode = params.data.cityCode;
|
||||||
|
state.cityName = params.data.name;
|
||||||
|
state.district.setLevel(params.data.level); //行政区级别
|
||||||
|
state.district.setExtensions('all');
|
||||||
|
state.isShowGoBack = true;
|
||||||
|
loading.value = true;
|
||||||
|
//行政区查询
|
||||||
|
//按照adcode进行查询可以保证数据返回的唯一性
|
||||||
|
state.district.search(state.cityCode, (status, result) => {
|
||||||
|
if (status === 'complete') {
|
||||||
|
if (params.data.level == 'district') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.AreaCodeStack.push(result.districtList[0].adcode);
|
||||||
|
getData(result.districtList[0], params.data.level, state.cityCode);//这个getData函数在前面已经定义过了
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getData (data, level, adcode) {//处理获取出来的边界数据
|
||||||
|
var subList = data.districtList;
|
||||||
|
if (subList) {
|
||||||
|
var curlevel = subList[0].level;
|
||||||
|
if (curlevel === 'street') {//为了配合echarts地图区县名称显示正常，这边街道级别数据需要特殊处理
|
||||||
|
let mapJsonList = state.geoJsonData.features;
|
||||||
|
let mapJson = {};
|
||||||
|
for (let i in mapJsonList) {
|
||||||
|
if (mapJsonList[i].properties.name == state.cityName) {
|
||||||
|
mapJson['features'] = [].concat(mapJsonList[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
state.mapData = [];
|
||||||
|
let item = searchRegionData(cityCode)
|
||||||
|
if (item) {
|
||||||
|
console.log('1 searchRegionData(cityCode)', item);
|
||||||
|
}
|
||||||
|
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
|
||||||
|
state.mapData.push({ name: state.cityName, value: item ? item.count : 0, level: curlevel });
|
||||||
|
loadMap(state.cityName, mapJson);
|
||||||
|
state.geoJsonData = mapJson;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
//街道级以上的数据处理方式
|
||||||
|
state.mapData = [];
|
||||||
|
for (var i = 0, l = subList.length; i < l; i++) {
|
||||||
|
var name = subList[i].name;
|
||||||
|
var cityCode = subList[i].adcode;
|
||||||
|
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
|
||||||
|
let item = searchRegionData(cityCode)
|
||||||
|
|
||||||
|
if (item) {
|
||||||
|
console.log('2 searchRegionData(cityCode)', item);
|
||||||
|
}
|
||||||
|
state.mapData.push({
|
||||||
|
name: name,
|
||||||
|
value: item ? item.count : 0,
|
||||||
|
cityCode: cityCode,
|
||||||
|
level: curlevel
|
||||||
|
});
|
||||||
|
}
|
||||||
|
loadMapData(adcode);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadMapData (areaCode) {
|
||||||
|
AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
|
||||||
|
|
||||||
|
//创建一个实例
|
||||||
|
var districtExplorer = window.districtExplorer = new DistrictExplorer({
|
||||||
|
eventSupport: true, //打开事件支持
|
||||||
|
map: state.map
|
||||||
|
});
|
||||||
|
|
||||||
|
districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
console.error(error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let mapJson = {};
|
||||||
|
//特别注意这里哦，如果查看过正常的geojson文件，都会发现，文件都是以features 字段开头的，所以这里要记得加上
|
||||||
|
mapJson.features = areaNode.getSubFeatures();
|
||||||
|
loadMap(state.cityName, mapJson);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadMap (mapName, data) {
|
||||||
|
if (data) {
|
||||||
|
echarts.registerMap(mapName, data);//把geoJson数据注入echarts
|
||||||
|
//配置echarts的option
|
||||||
|
var option = {
|
||||||
|
visualMap: {
|
||||||
|
type: 'piecewise',
|
||||||
|
left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
|
||||||
|
bottom: "30",
|
||||||
|
orient: "horizontal", //图例排列方向
|
||||||
|
padding: 5,
|
||||||
|
pieces: [
|
||||||
|
{ gte: 0, lte: 99, label: '99', color: '#CAE9FD' },
|
||||||
|
{ gte: 100, lte: 299, label: '100-299', color: '#7ED2F7' },
|
||||||
|
{ gte: 300, lte: 499, label: '299-499', color: '#039DDD' },
|
||||||
|
{ gte: 500, label: '500', color: '#0D4884' },
|
||||||
|
// {max: 30, label: '安全', color: '#2c9a42'},
|
||||||
|
// {min: 30, max: 60, label: '警告', color: '#d08a00'},
|
||||||
|
// {min: 60, label: '危险', color: '#c23c33'},
|
||||||
|
],
|
||||||
|
// color: '#fff',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
visibility: 'off',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
//提示框信息
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{b}\n{c}个',
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: '数据名称',
|
||||||
|
type: 'map',
|
||||||
|
roam: false,
|
||||||
|
top: "15%",
|
||||||
|
bottom: state.isShowGoBack ? '8%' : '-20%',
|
||||||
|
mapType: mapName,
|
||||||
|
selectedMode: 'single',
|
||||||
|
showLegendSymbol: false,
|
||||||
|
visibility: 'off',
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#ccc',
|
||||||
|
areaColor: '#fff',
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 0.5,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "rgb(249, 249, 249)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
areaColor: "rgb(237, 201, 216)",
|
||||||
|
borderColor: '#fff',
|
||||||
|
areaStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "rgb(249, 249, 249)"
|
||||||
|
},
|
||||||
|
// formatter: function (value) { //标签的格式化工具。
|
||||||
|
// return value.name + '：' + value.value; // 范围标签显示内容。
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: state.mapData, //这个data里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
state.echartsMap.setOption(option);
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box3 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(0deg, #010101, #041744);
|
||||||
|
position: relative;
|
||||||
|
.tit {
|
||||||
|
position: absolute;
|
||||||
|
top: 75px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36px;
|
||||||
|
font-family: Source Han Sans CN;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.map {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url(./img/lightEffect.png);
|
||||||
|
background-size: 644px 272px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-back {
|
||||||
|
background: url(img/close_back.png) no-repeat;
|
||||||
|
transition: all 0.5s;
|
||||||
|
height: 70px;
|
||||||
|
width: 85px;
|
||||||
|
color: #fff;
|
||||||
|
left: 65px;
|
||||||
|
position: absolute;
|
||||||
|
top: 100px;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1000;
|
||||||
|
&:hover {
|
||||||
|
left: 55px;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
margin: 28px auto 0;
|
||||||
|
width: 30px;
|
||||||
|
display: block;
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.leftBox {
|
||||||
|
left: 230px;
|
||||||
|
}
|
||||||
|
.rightBox {
|
||||||
|
right: 230px;
|
||||||
|
max-height: 465px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftBox,
|
||||||
|
.rightBox {
|
||||||
|
position: absolute;
|
||||||
|
top: 25%;
|
||||||
|
max-width: 280px;
|
||||||
|
min-width: 200px;
|
||||||
|
max-height: 256px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: rgba(4, 22, 65, 0.5);
|
||||||
|
border: 1px solid #0054ff;
|
||||||
|
color: rgba(161, 192, 255, 1);
|
||||||
|
& > div {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.head {
|
||||||
|
border-bottom: 1px solid #0054ff;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.a {
|
||||||
|
flex: 1;
|
||||||
|
border-right: 1px solid #0054ff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 42px;
|
||||||
|
}
|
||||||
|
.b {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 42px;
|
||||||
|
width: 90px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
456
src/views/website/index/comp/index6.vue
Normal file
456
src/views/website/index/comp/index6.vue
Normal file
@ -0,0 +1,456 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box3" v-loading="loading">
|
||||||
|
<div class="tit">需求分布地图</div>
|
||||||
|
<div v-if="state.isShowGoBack" class="close-back" @click="goBack">
|
||||||
|
<img src="./img/back_button.png" />
|
||||||
|
</div>
|
||||||
|
<!-- echartsDom 兼容缩放 -->
|
||||||
|
<div ref="map" class="map echartsDom" id="map"></div>
|
||||||
|
<div class="leftBox">
|
||||||
|
<div class="head">
|
||||||
|
<div class="a">地区</div>
|
||||||
|
<div class="b">需求数量</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="Object.keys(snapTree).length > 0" v-for="v in snapTree">
|
||||||
|
<div class="a">{{ v.name }}</div>
|
||||||
|
<div class="b">{{ v.count }}</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div class="a">暂无</div>
|
||||||
|
<div class="b">暂无</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rightBox">
|
||||||
|
<div class="head">
|
||||||
|
<div class="a">领域</div>
|
||||||
|
<div class="b">需求数量</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="Object.keys(getIndustry(snapTree)).length > 0" v-for="(v,k) in getIndustry(snapTree)">
|
||||||
|
<div class="a">{{ k }}</div>
|
||||||
|
<div class="b">{{ v }}</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div class="a">暂无</div>
|
||||||
|
<div class="b">暂无</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { defineComponent, getCurrentInstance, onMounted, reactive } from "vue";
|
||||||
|
import echarts from 'echarts'
|
||||||
|
import { demand } from "@/api/website/home/index";
|
||||||
|
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
const loading = shallowRef(true)
|
||||||
|
let treeData = { "340000": { "code": "340000", "name": "安徽省", "count": 107, "industry": { "1-1": 2, "1-2": 1, "2-1": 3 }, "children": { "340100": { "code": "340100", "name": "合肥市", "count": 106, "industry": { "1-1": 1, "1-2": 1, "2-1": 2 }, "children": { "340111": { "code": "340111", "name": "包河区", "count": 105, "industry": { "1-1": 1, "2-1": 1 }, "children": null }, "340121": { "code": "340121", "name": "长丰县", "count": 105, "industry": { "1-2": 1, "2-1": 1 }, "children": null } } }, "340200": { "code": "340200", "name": "芜湖市", "count": 105, "industry": { "1-1": 1, "2-1": 1 }, "children": {} } } }, "500000": { "code": "500000", "name": "重庆", "count": 300, "industry": null, "children": { "500100": { "code": "500100", "name": "市辖区", "count": 300, "industry": null, "children": null } } }, "630000": { "code": "630000", "name": "青海省", "count": 1200, "industry": null, "children": { "630200": { "code": "630200", "name": "海东市", "count": 1200, "industry": null, "children": null } } } };
|
||||||
|
const snapTree = shallowRef({});
|
||||||
|
|
||||||
|
function searchRegionData (code) {
|
||||||
|
// console.log(code, treeData,'searchRegionData')
|
||||||
|
return deepFindTree(code, treeData);
|
||||||
|
}
|
||||||
|
|
||||||
|
function deepFindTree (code, tree) {
|
||||||
|
let snap = false;
|
||||||
|
for (const key in tree) {
|
||||||
|
if (Object.hasOwnProperty.call(tree, key)) {
|
||||||
|
if (code == key) {
|
||||||
|
snap = tree[code];
|
||||||
|
break;
|
||||||
|
} else if (tree[key]['children'] != null) {
|
||||||
|
snap = deepFindTree(code, tree[key]['children']);
|
||||||
|
if (snap) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
snap = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return snap;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getIndustry (object) {
|
||||||
|
let snap = {};
|
||||||
|
for (const key in object) {
|
||||||
|
if (Object.hasOwnProperty.call(object, key)) {
|
||||||
|
const element = object[key];
|
||||||
|
if (element['industry'] != null) {
|
||||||
|
for (const ek in element['industry']) {
|
||||||
|
if (Object.hasOwnProperty.call(element['industry'], ek)) {
|
||||||
|
const ele = element['industry'][ek];
|
||||||
|
if (!Object.hasOwnProperty.call(snap, ek)) {
|
||||||
|
snap[ek] = 0
|
||||||
|
}
|
||||||
|
snap[ek] += ele
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// for (let index = 0; index < element['industry'].length; index++) {
|
||||||
|
// const ele = element['industry'][index];
|
||||||
|
// if(Object.hasOwnProperty.call(snap, ele)) {
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return snap
|
||||||
|
}
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
loading: false,
|
||||||
|
isShowGoBack: false,
|
||||||
|
nameType: '',
|
||||||
|
cityName: '中国',
|
||||||
|
areaCode: 10000,
|
||||||
|
AreaCodeStack: ['中国'],
|
||||||
|
geoJsonData: '',
|
||||||
|
echartsMap: null,
|
||||||
|
map: null,
|
||||||
|
uimap: null,
|
||||||
|
district: null,
|
||||||
|
polygons: [],
|
||||||
|
cityCode: '100000',
|
||||||
|
citySelect: null,
|
||||||
|
districtSelect: null,
|
||||||
|
opts: {},
|
||||||
|
areaData: {},
|
||||||
|
mapData: [],
|
||||||
|
zip: {},//打包zip
|
||||||
|
codeList: [],
|
||||||
|
isCodeListLoadComplete: false,//codeList是否全部获取完毕
|
||||||
|
downloadTips: '下载geoJson数据',//下载进度提示
|
||||||
|
isShowTips: false,//是否显示下载提示
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
// 数据接口
|
||||||
|
await demand().then(res => {
|
||||||
|
if (200 == res.code) {
|
||||||
|
treeData = res.data;
|
||||||
|
snapTree.value = res.data;
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
let echartsDomList = document.querySelectorAll('.echartsDom');
|
||||||
|
// 兼容echarts
|
||||||
|
echartsDomList.forEach(element => {
|
||||||
|
element.style.zoom = window.devicePixelRatio;
|
||||||
|
element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
|
||||||
|
element.style.transformOrigin = "0%0%";
|
||||||
|
element.style.width = window.devicePixelRatio * 100 + '%';
|
||||||
|
element.style.height = window.devicePixelRatio * 100 + '%';
|
||||||
|
console.log(element.style.zoom, 'element.style.zoom')
|
||||||
|
});
|
||||||
|
|
||||||
|
let height = document.body.clientHeight;
|
||||||
|
let width = document.body.clientWidth;
|
||||||
|
let dom = proxy.$refs['map'];
|
||||||
|
dom.style.width = width + 'px';
|
||||||
|
dom.style.height = height - 80 + 'px';
|
||||||
|
state.echartsMap = echarts.init(dom);
|
||||||
|
state.echartsMap.on('click', echartsMapClick);
|
||||||
|
|
||||||
|
state.map = new AMap.Map('container', {
|
||||||
|
resizeEnable: true,
|
||||||
|
center: [116.30946, 39.937629],
|
||||||
|
zoom: 3
|
||||||
|
});
|
||||||
|
state.opts = {
|
||||||
|
subdistrict: 1, //返回下一级行政区
|
||||||
|
showbiz: false //最后一级返回街道信息
|
||||||
|
};
|
||||||
|
state.district = new AMap.DistrictSearch(state.opts);//注意：需要使用插件同步下发功能才能这样直接使用
|
||||||
|
state.district.search('中国', (status, result) => {
|
||||||
|
if (status == 'complete') {
|
||||||
|
getData(result.districtList[0], '', 100000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function goBack () {
|
||||||
|
state.isShowGoBack = false;
|
||||||
|
loading.value = true;
|
||||||
|
state.district.search('中国', (status, result) => {
|
||||||
|
if (status == 'complete') {
|
||||||
|
getData(result.districtList[0], '', 100000);
|
||||||
|
snapTree.value = treeData;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function echartsMapClick (params) {//地图点击事件
|
||||||
|
if (params.data.cityCode == '710000') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (params.data.level == 'district') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (params.data.level == 'street') return;//此处的params.data为state.mapData里的数据
|
||||||
|
|
||||||
|
let snap = searchRegionData(params.data.cityCode);
|
||||||
|
snapTree.value = {}
|
||||||
|
if (snap) {
|
||||||
|
snapTree.value = snap['children']
|
||||||
|
}
|
||||||
|
state.cityCode = params.data.cityCode;
|
||||||
|
state.cityName = params.data.name;
|
||||||
|
state.district.setLevel(params.data.level); //行政区级别
|
||||||
|
state.district.setExtensions('all');
|
||||||
|
state.isShowGoBack = true;
|
||||||
|
loading.value = true;
|
||||||
|
//行政区查询
|
||||||
|
//按照adcode进行查询可以保证数据返回的唯一性
|
||||||
|
state.district.search(state.cityCode, (status, result) => {
|
||||||
|
if (status === 'complete') {
|
||||||
|
if (params.data.level == 'district') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.AreaCodeStack.push(result.districtList[0].adcode);
|
||||||
|
getData(result.districtList[0], params.data.level, state.cityCode);//这个getData函数在前面已经定义过了
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getData (data, level, adcode) {//处理获取出来的边界数据
|
||||||
|
var subList = data.districtList;
|
||||||
|
if (subList) {
|
||||||
|
var curlevel = subList[0].level;
|
||||||
|
if (curlevel === 'street') {//为了配合echarts地图区县名称显示正常，这边街道级别数据需要特殊处理
|
||||||
|
let mapJsonList = state.geoJsonData.features;
|
||||||
|
let mapJson = {};
|
||||||
|
for (let i in mapJsonList) {
|
||||||
|
if (mapJsonList[i].properties.name == state.cityName) {
|
||||||
|
mapJson['features'] = [].concat(mapJsonList[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
state.mapData = [];
|
||||||
|
let item = searchRegionData(cityCode)
|
||||||
|
if (item) {
|
||||||
|
console.log('1 searchRegionData(cityCode)', item);
|
||||||
|
}
|
||||||
|
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
|
||||||
|
state.mapData.push({ name: state.cityName, value: item ? item.count : 0, level: curlevel });
|
||||||
|
loadMap(state.cityName, mapJson);
|
||||||
|
state.geoJsonData = mapJson;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
//街道级以上的数据处理方式
|
||||||
|
state.mapData = [];
|
||||||
|
for (var i = 0, l = subList.length; i < l; i++) {
|
||||||
|
var name = subList[i].name;
|
||||||
|
var cityCode = subList[i].adcode;
|
||||||
|
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
|
||||||
|
let item = searchRegionData(cityCode)
|
||||||
|
|
||||||
|
if (item) {
|
||||||
|
console.log('2 searchRegionData(cityCode)', item);
|
||||||
|
}
|
||||||
|
state.mapData.push({
|
||||||
|
name: name,
|
||||||
|
value: item ? item.count : 0,
|
||||||
|
cityCode: cityCode,
|
||||||
|
level: curlevel
|
||||||
|
});
|
||||||
|
}
|
||||||
|
loadMapData(adcode);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadMapData (areaCode) {
|
||||||
|
AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
|
||||||
|
|
||||||
|
//创建一个实例
|
||||||
|
var districtExplorer = window.districtExplorer = new DistrictExplorer({
|
||||||
|
eventSupport: true, //打开事件支持
|
||||||
|
map: state.map
|
||||||
|
});
|
||||||
|
|
||||||
|
districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
console.error(error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let mapJson = {};
|
||||||
|
//特别注意这里哦，如果查看过正常的geojson文件，都会发现，文件都是以features 字段开头的，所以这里要记得加上
|
||||||
|
mapJson.features = areaNode.getSubFeatures();
|
||||||
|
loadMap(state.cityName, mapJson);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadMap (mapName, data) {
|
||||||
|
if (data) {
|
||||||
|
echarts.registerMap(mapName, data);//把geoJson数据注入echarts
|
||||||
|
//配置echarts的option
|
||||||
|
var option = {
|
||||||
|
visualMap: {
|
||||||
|
type: 'piecewise',
|
||||||
|
left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
|
||||||
|
bottom: "30",
|
||||||
|
orient: "horizontal", //图例排列方向
|
||||||
|
padding: 5,
|
||||||
|
pieces: [
|
||||||
|
{ gte: 0, lte: 99, label: '99', color: '#CAE9FD' },
|
||||||
|
{ gte: 100, lte: 299, label: '100-299', color: '#7ED2F7' },
|
||||||
|
{ gte: 300, lte: 499, label: '299-499', color: '#039DDD' },
|
||||||
|
{ gte: 500, label: '500', color: '#0D4884' },
|
||||||
|
// {max: 30, label: '安全', color: '#2c9a42'},
|
||||||
|
// {min: 30, max: 60, label: '警告', color: '#d08a00'},
|
||||||
|
// {min: 60, label: '危险', color: '#c23c33'},
|
||||||
|
],
|
||||||
|
// color: '#fff',
|
||||||
|
textStyle: {
|
||||||
|
color: '#333333',
|
||||||
|
},
|
||||||
|
visibility: 'off',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
//提示框信息
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{b}\n{c}个',
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: '数据名称',
|
||||||
|
type: 'map',
|
||||||
|
roam: false,
|
||||||
|
top: "15%",
|
||||||
|
bottom: state.isShowGoBack ? '8%' : '-20%',
|
||||||
|
mapType: mapName,
|
||||||
|
selectedMode: 'single',
|
||||||
|
showLegendSymbol: false,
|
||||||
|
visibility: 'off',
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#333333',
|
||||||
|
areaColor: '#fff',
|
||||||
|
borderColor: '#333333',
|
||||||
|
borderWidth: 0.5,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#333333",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
areaColor: "rgb(237, 201, 216)",
|
||||||
|
borderColor: '#333333',
|
||||||
|
areaStyle: {
|
||||||
|
color: '#333333'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#333333"
|
||||||
|
},
|
||||||
|
// formatter: function (value) { //标签的格式化工具。
|
||||||
|
// return value.name + '：' + value.value; // 范围标签显示内容。
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: state.mapData, //这个data里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
state.echartsMap.setOption(option);
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box3 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
.tit {
|
||||||
|
position: absolute;
|
||||||
|
top: 75px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36px;
|
||||||
|
font-family: Source Han Sans CN;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.map {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
// background-image: url(./img/lightEffect.png);
|
||||||
|
background-size: 644px 272px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-back {
|
||||||
|
background: url(img/close_back.png) no-repeat;
|
||||||
|
transition: all 0.5s;
|
||||||
|
height: 70px;
|
||||||
|
width: 85px;
|
||||||
|
color: #fff;
|
||||||
|
left: 65px;
|
||||||
|
position: absolute;
|
||||||
|
top: 100px;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1000;
|
||||||
|
&:hover {
|
||||||
|
left: 55px;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
margin: 28px auto 0;
|
||||||
|
width: 30px;
|
||||||
|
display: block;
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.leftBox {
|
||||||
|
left: 230px;
|
||||||
|
}
|
||||||
|
.rightBox {
|
||||||
|
right: 230px;
|
||||||
|
max-height: 465px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftBox,
|
||||||
|
.rightBox {
|
||||||
|
position: absolute;
|
||||||
|
top: 25%;
|
||||||
|
max-width: 280px;
|
||||||
|
min-width: 200px;
|
||||||
|
max-height: 256px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid #DCDCDC;
|
||||||
|
color: #666666;
|
||||||
|
& > div {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.head {
|
||||||
|
border-bottom: 1px solid #DCDCDC;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.a {
|
||||||
|
flex: 1;
|
||||||
|
border-right: 1px solid #DCDCDC;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 42px;
|
||||||
|
}
|
||||||
|
.b {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 42px;
|
||||||
|
width: 90px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
458
src/views/website/index/comp/index7.vue
Normal file
458
src/views/website/index/comp/index7.vue
Normal file
@ -0,0 +1,458 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box3" v-loading="loading">
|
||||||
|
<div class="tit">企业地图</div>
|
||||||
|
<div v-if="state.isShowGoBack" class="close-back" @click="goBack">
|
||||||
|
<img src="./img/back_button.png" />
|
||||||
|
</div>
|
||||||
|
<!-- echartsDom 兼容缩放 -->
|
||||||
|
<div ref="map" class="map echartsDom" id="map"></div>
|
||||||
|
<div class="leftBox">
|
||||||
|
<div class="head">
|
||||||
|
<div class="a">地区</div>
|
||||||
|
<div class="b">企业数量</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="Object.keys(snapTree).length > 0" v-for="v in snapTree">
|
||||||
|
<div class="a">{{ v.name }}</div>
|
||||||
|
<div class="b">{{ v.count }}</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div class="a">暂无</div>
|
||||||
|
<div class="b">暂无</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rightBox">
|
||||||
|
<div class="head">
|
||||||
|
<div class="a">领域</div>
|
||||||
|
<div class="b">企业数量</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="Object.keys(getIndustry(snapTree)).length > 0" v-for="(v,k) in getIndustry(snapTree)">
|
||||||
|
<div class="a">{{ k }}</div>
|
||||||
|
<div class="b">{{ v }}</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div class="a">暂无</div>
|
||||||
|
<div class="b">暂无</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { defineComponent, getCurrentInstance, onMounted, reactive } from "vue";
|
||||||
|
import echarts from 'echarts'
|
||||||
|
import { company } from "@/api/website/home/index";
|
||||||
|
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
const loading = shallowRef(true)
|
||||||
|
let treeData = { "340000": { "code": "340000", "name": "安徽省", "count": 107, "industry": { "1-1": 2, "1-2": 1, "2-1": 3 }, "children": { "340100": { "code": "340100", "name": "合肥市", "count": 106, "industry": { "1-1": 1, "1-2": 1, "2-1": 2 }, "children": { "340111": { "code": "340111", "name": "包河区", "count": 105, "industry": { "1-1": 1, "2-1": 1 }, "children": null }, "340121": { "code": "340121", "name": "长丰县", "count": 105, "industry": { "1-2": 1, "2-1": 1 }, "children": null } } }, "340200": { "code": "340200", "name": "芜湖市", "count": 105, "industry": { "1-1": 1, "2-1": 1 }, "children": {} } } }, "500000": { "code": "500000", "name": "重庆", "count": 300, "industry": null, "children": { "500100": { "code": "500100", "name": "市辖区", "count": 300, "industry": null, "children": null } } }, "630000": { "code": "630000", "name": "青海省", "count": 1200, "industry": null, "children": { "630200": { "code": "630200", "name": "海东市", "count": 1200, "industry": null, "children": null } } } };
|
||||||
|
const snapTree = shallowRef({});
|
||||||
|
|
||||||
|
function searchRegionData (code) {
|
||||||
|
// console.log(code, treeData,'searchRegionData')
|
||||||
|
return deepFindTree(code, treeData);
|
||||||
|
}
|
||||||
|
|
||||||
|
function deepFindTree (code, tree) {
|
||||||
|
let snap = false;
|
||||||
|
for (const key in tree) {
|
||||||
|
if (Object.hasOwnProperty.call(tree, key)) {
|
||||||
|
if (code == key) {
|
||||||
|
snap = tree[code];
|
||||||
|
break;
|
||||||
|
} else if (tree[key]['children'] != null) {
|
||||||
|
snap = deepFindTree(code, tree[key]['children']);
|
||||||
|
if (snap) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
snap = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return snap;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getIndustry (object) {
|
||||||
|
let snap = {};
|
||||||
|
for (const key in object) {
|
||||||
|
if (Object.hasOwnProperty.call(object, key)) {
|
||||||
|
const element = object[key];
|
||||||
|
if (element['industry'] != null) {
|
||||||
|
for (const ek in element['industry']) {
|
||||||
|
if (Object.hasOwnProperty.call(element['industry'], ek)) {
|
||||||
|
const ele = element['industry'][ek];
|
||||||
|
if (!Object.hasOwnProperty.call(snap, ek)) {
|
||||||
|
snap[ek] = 0
|
||||||
|
}
|
||||||
|
snap[ek] += ele
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// for (let index = 0; index < element['industry'].length; index++) {
|
||||||
|
// const ele = element['industry'][index];
|
||||||
|
// if(Object.hasOwnProperty.call(snap, ele)) {
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return snap
|
||||||
|
}
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
loading: false,
|
||||||
|
isShowGoBack: false,
|
||||||
|
nameType: '',
|
||||||
|
cityName: '中国',
|
||||||
|
areaCode: 10000,
|
||||||
|
AreaCodeStack: ['中国'],
|
||||||
|
geoJsonData: '',
|
||||||
|
echartsMap: null,
|
||||||
|
map: null,
|
||||||
|
uimap: null,
|
||||||
|
district: null,
|
||||||
|
polygons: [],
|
||||||
|
cityCode: '100000',
|
||||||
|
citySelect: null,
|
||||||
|
districtSelect: null,
|
||||||
|
opts: {},
|
||||||
|
areaData: {},
|
||||||
|
mapData: [],
|
||||||
|
zip: {},//打包zip
|
||||||
|
codeList: [],
|
||||||
|
isCodeListLoadComplete: false,//codeList是否全部获取完毕
|
||||||
|
downloadTips: '下载geoJson数据',//下载进度提示
|
||||||
|
isShowTips: false,//是否显示下载提示
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
// 数据接口
|
||||||
|
await company().then(res => {
|
||||||
|
if (200 == res.code) {
|
||||||
|
treeData = res.data;
|
||||||
|
snapTree.value = res.data;
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
let echartsDomList = document.querySelectorAll('.echartsDom');
|
||||||
|
// 兼容echarts
|
||||||
|
echartsDomList.forEach(element => {
|
||||||
|
element.style.zoom = window.devicePixelRatio;
|
||||||
|
element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
|
||||||
|
element.style.transformOrigin = "0%0%";
|
||||||
|
element.style.width = window.devicePixelRatio * 100 + '%';
|
||||||
|
element.style.height = window.devicePixelRatio * 100 + '%';
|
||||||
|
console.log(element.style.zoom, 'element.style.zoom')
|
||||||
|
});
|
||||||
|
|
||||||
|
let height = document.body.clientHeight;
|
||||||
|
let width = document.body.clientWidth;
|
||||||
|
let dom = proxy.$refs['map'];
|
||||||
|
dom.style.width = width + 'px';
|
||||||
|
dom.style.height = height - 80 + 'px';
|
||||||
|
state.echartsMap = echarts.init(dom);
|
||||||
|
state.echartsMap.on('click', echartsMapClick);
|
||||||
|
|
||||||
|
state.map = new AMap.Map('container', {
|
||||||
|
resizeEnable: true,
|
||||||
|
center: [116.30946, 39.937629],
|
||||||
|
zoom: 3
|
||||||
|
});
|
||||||
|
state.opts = {
|
||||||
|
subdistrict: 1, //返回下一级行政区
|
||||||
|
showbiz: false //最后一级返回街道信息
|
||||||
|
};
|
||||||
|
state.district = new AMap.DistrictSearch(state.opts);//注意：需要使用插件同步下发功能才能这样直接使用
|
||||||
|
state.district.search('中国', (status, result) => {
|
||||||
|
if (status == 'complete') {
|
||||||
|
getData(result.districtList[0], '', 100000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function goBack () {
|
||||||
|
state.isShowGoBack = false;
|
||||||
|
loading.value = true;
|
||||||
|
state.district.search('中国', (status, result) => {
|
||||||
|
if (status == 'complete') {
|
||||||
|
getData(result.districtList[0], '', 100000);
|
||||||
|
snapTree.value = treeData;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function echartsMapClick (params) {//地图点击事件
|
||||||
|
if (params.data.cityCode == '710000') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (params.data.level == 'district') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (params.data.level == 'street') return;//此处的params.data为state.mapData里的数据
|
||||||
|
|
||||||
|
let snap = searchRegionData(params.data.cityCode);
|
||||||
|
snapTree.value = {}
|
||||||
|
if (snap) {
|
||||||
|
snapTree.value = snap['children']
|
||||||
|
}
|
||||||
|
state.cityCode = params.data.cityCode;
|
||||||
|
state.cityName = params.data.name;
|
||||||
|
state.district.setLevel(params.data.level); //行政区级别
|
||||||
|
state.district.setExtensions('all');
|
||||||
|
state.isShowGoBack = true;
|
||||||
|
loading.value = true;
|
||||||
|
//行政区查询
|
||||||
|
//按照adcode进行查询可以保证数据返回的唯一性
|
||||||
|
state.district.search(state.cityCode, (status, result) => {
|
||||||
|
if (status === 'complete') {
|
||||||
|
if (params.data.level == 'district') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.AreaCodeStack.push(result.districtList[0].adcode);
|
||||||
|
getData(result.districtList[0], params.data.level, state.cityCode);//这个getData函数在前面已经定义过了
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getData (data, level, adcode) {//处理获取出来的边界数据
|
||||||
|
var subList = data.districtList;
|
||||||
|
if (subList) {
|
||||||
|
var curlevel = subList[0].level;
|
||||||
|
if (curlevel === 'street') {//为了配合echarts地图区县名称显示正常，这边街道级别数据需要特殊处理
|
||||||
|
let mapJsonList = state.geoJsonData.features;
|
||||||
|
let mapJson = {};
|
||||||
|
for (let i in mapJsonList) {
|
||||||
|
if (mapJsonList[i].properties.name == state.cityName) {
|
||||||
|
mapJson['features'] = [].concat(mapJsonList[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
state.mapData = [];
|
||||||
|
let item = searchRegionData(cityCode)
|
||||||
|
if (item) {
|
||||||
|
console.log('1 searchRegionData(cityCode)', item);
|
||||||
|
}
|
||||||
|
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
|
||||||
|
state.mapData.push({ name: state.cityName, value: item ? item.count : 0, level: curlevel });
|
||||||
|
loadMap(state.cityName, mapJson);
|
||||||
|
state.geoJsonData = mapJson;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
//街道级以上的数据处理方式
|
||||||
|
state.mapData = [];
|
||||||
|
for (var i = 0, l = subList.length; i < l; i++) {
|
||||||
|
var name = subList[i].name;
|
||||||
|
var cityCode = subList[i].adcode;
|
||||||
|
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
|
||||||
|
let item = searchRegionData(cityCode)
|
||||||
|
|
||||||
|
if (item) {
|
||||||
|
console.log('2 searchRegionData(cityCode)', item);
|
||||||
|
}
|
||||||
|
state.mapData.push({
|
||||||
|
name: name,
|
||||||
|
value: item ? item.count : 0,
|
||||||
|
cityCode: cityCode,
|
||||||
|
level: curlevel
|
||||||
|
});
|
||||||
|
}
|
||||||
|
loadMapData(adcode);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadMapData (areaCode) {
|
||||||
|
AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
|
||||||
|
|
||||||
|
//创建一个实例
|
||||||
|
var districtExplorer = window.districtExplorer = new DistrictExplorer({
|
||||||
|
eventSupport: true, //打开事件支持
|
||||||
|
map: state.map
|
||||||
|
});
|
||||||
|
|
||||||
|
districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
console.error(error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let mapJson = {};
|
||||||
|
//特别注意这里哦，如果查看过正常的geojson文件，都会发现，文件都是以features 字段开头的，所以这里要记得加上
|
||||||
|
mapJson.features = areaNode.getSubFeatures();
|
||||||
|
loadMap(state.cityName, mapJson);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadMap (mapName, data) {
|
||||||
|
if (data) {
|
||||||
|
echarts.registerMap(mapName, data);//把geoJson数据注入echarts
|
||||||
|
//配置echarts的option
|
||||||
|
var option = {
|
||||||
|
visualMap: {
|
||||||
|
type: 'piecewise',
|
||||||
|
left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
|
||||||
|
bottom: "30",
|
||||||
|
orient: "horizontal", //图例排列方向
|
||||||
|
padding: 5,
|
||||||
|
pieces: [
|
||||||
|
{ gte: 0, lte: 99, label: '99', color: '#CAE9FD' },
|
||||||
|
{ gte: 100, lte: 299, label: '100-299', color: '#7ED2F7' },
|
||||||
|
{ gte: 300, lte: 499, label: '299-499', color: '#039DDD' },
|
||||||
|
{ gte: 500, label: '500', color: '#0D4884' },
|
||||||
|
// {max: 30, label: '安全', color: '#2c9a42'},
|
||||||
|
// {min: 30, max: 60, label: '警告', color: '#d08a00'},
|
||||||
|
// {min: 60, label: '危险', color: '#c23c33'},
|
||||||
|
],
|
||||||
|
// color: '#fff',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
visibility: 'off',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
//提示框信息
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{b}\n{c}个',
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: '数据名称',
|
||||||
|
type: 'map',
|
||||||
|
roam: false,
|
||||||
|
top: "15%",
|
||||||
|
bottom: state.isShowGoBack ? '8%' : '-20%',
|
||||||
|
mapType: mapName,
|
||||||
|
selectedMode: 'single',
|
||||||
|
showLegendSymbol: false,
|
||||||
|
visibility: 'off',
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#ccc',
|
||||||
|
areaColor: '#fff',
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 0.5,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "rgb(249, 249, 249)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
areaColor: "rgb(237, 201, 216)",
|
||||||
|
borderColor: '#fff',
|
||||||
|
areaStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "rgb(249, 249, 249)"
|
||||||
|
},
|
||||||
|
// formatter: function (value) { //标签的格式化工具。
|
||||||
|
// return value.name + '：' + value.value; // 范围标签显示内容。
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: state.mapData, //这个data里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
state.echartsMap.setOption(option);
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box3 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(0deg, #010101, #041744);
|
||||||
|
position: relative;
|
||||||
|
.tit {
|
||||||
|
position: absolute;
|
||||||
|
top: 75px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36px;
|
||||||
|
font-family: Source Han Sans CN;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.map {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url(./img/lightEffect.png);
|
||||||
|
background-size: 644px 272px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-back {
|
||||||
|
background: url(img/close_back.png) no-repeat;
|
||||||
|
transition: all 0.5s;
|
||||||
|
height: 70px;
|
||||||
|
width: 85px;
|
||||||
|
color: #fff;
|
||||||
|
left: 65px;
|
||||||
|
position: absolute;
|
||||||
|
top: 100px;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1000;
|
||||||
|
&:hover {
|
||||||
|
left: 55px;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
margin: 28px auto 0;
|
||||||
|
width: 30px;
|
||||||
|
display: block;
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.leftBox {
|
||||||
|
left: 230px;
|
||||||
|
}
|
||||||
|
.rightBox {
|
||||||
|
right: 230px;
|
||||||
|
max-height: 465px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftBox,
|
||||||
|
.rightBox {
|
||||||
|
position: absolute;
|
||||||
|
top: 25%;
|
||||||
|
max-width: 280px;
|
||||||
|
min-width: 200px;
|
||||||
|
max-height: 256px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: rgba(4, 22, 65, 0.5);
|
||||||
|
border: 1px solid #0054ff;
|
||||||
|
color: rgba(161, 192, 255, 1);
|
||||||
|
& > div {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.head {
|
||||||
|
border-bottom: 1px solid #0054ff;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.a {
|
||||||
|
flex: 1;
|
||||||
|
border-right: 1px solid #0054ff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 42px;
|
||||||
|
}
|
||||||
|
.b {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 42px;
|
||||||
|
width: 90px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,19 +1,137 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<webFooter></webFooter>
|
<div class="wrap">
|
||||||
|
<div>
|
||||||
|
<div class="tit">全国服务站点</div>
|
||||||
|
<div class="content">
|
||||||
|
<div>
|
||||||
|
<div class="item">
|
||||||
|
<div>安徽</div>
|
||||||
|
<p>
|
||||||
|
<a>合肥</a>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<a>阜阳</a>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<a>淮南</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div>浙江</div>
|
||||||
|
<p>
|
||||||
|
<a>杭州</a>
|
||||||
|
</p>
|
||||||
|
<p>德清</p>
|
||||||
|
<p>
|
||||||
|
<a>瓯海</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div>湖北</div>
|
||||||
|
<p>
|
||||||
|
<a>武汉</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div>江苏</div>
|
||||||
|
<p>南京</p>
|
||||||
|
<p>昆山</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="more">查看更多</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<webFooter style="width: 100%;"></webFooter>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, reactive } from "vue";
|
import { onMounted, reactive } from "vue";
|
||||||
import webFooter from "../../../../components/webFooter/index.vue";
|
import webFooter from "../../../../components/webFooter/index.vue";
|
||||||
onMounted(() => {
|
|
||||||
console.log("onmunted");
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.box {
|
.box {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
.wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url(./img/index8-bg1.png);
|
||||||
|
background-size: 100% 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center bottom;
|
||||||
|
& > div {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 10px 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
display: -webkit-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.tit {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
display: flex;
|
||||||
|
display: -webkit-flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
& > div {
|
||||||
|
overflow: hidden;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 66px;
|
||||||
|
float: left;
|
||||||
|
a {
|
||||||
|
color: #0054ff;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.more {
|
||||||
|
width: 150px;
|
||||||
|
height: 46px;
|
||||||
|
line-height: 44px;
|
||||||
|
border: 1px solid #0054ff;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #0054ff;
|
||||||
|
text-align: center;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
opacity: .7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -22,6 +22,11 @@ import { reactive, onMounted } from "vue";
|
|||||||
|
|
||||||
import index1 from './comp/index1.vue';
|
import index1 from './comp/index1.vue';
|
||||||
import index2 from './comp/index2.vue';
|
import index2 from './comp/index2.vue';
|
||||||
|
import index3 from './comp/index3.vue';
|
||||||
|
import index4 from './comp/index4.vue';
|
||||||
|
import index5 from './comp/index5.vue';
|
||||||
|
import index6 from './comp/index6.vue';
|
||||||
|
import index7 from './comp/index7.vue';
|
||||||
import index8 from './comp/index8.vue';
|
import index8 from './comp/index8.vue';
|
||||||
|
|
||||||
let state = reactive({
|
let state = reactive({
|
||||||
@ -37,6 +42,31 @@ let state = reactive({
|
|||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
title: "index2",
|
title: "index2",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
comp: index3,
|
||||||
|
zIndex: 1,
|
||||||
|
title: "index3",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
comp: index4,
|
||||||
|
zIndex: 1,
|
||||||
|
title: "index4",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
comp: index5,
|
||||||
|
zIndex: 1,
|
||||||
|
title: "index5",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
comp: index6,
|
||||||
|
zIndex: 1,
|
||||||
|
title: "index6",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
comp: index7,
|
||||||
|
zIndex: 1,
|
||||||
|
title: "index7",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
comp: index8,
|
comp: index8,
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
@ -49,6 +79,8 @@ let state = reactive({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
function choice(i: number) {
|
function choice(i: number) {
|
||||||
|
if (i > state.showBox && i == (state.boxList.length + 1)) return false;
|
||||||
|
if(i < state.showBox && i == 0) return false;
|
||||||
if (i === state.showBox) return false;
|
if (i === state.showBox) return false;
|
||||||
|
|
||||||
// style 的 z-index 属性提升到最上面
|
// style 的 z-index 属性提升到最上面
|
||||||
@ -130,13 +162,13 @@ onMounted(() => {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.box {
|
.box {
|
||||||
height: calc(100vh - 80px);
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
backdrop-filter: blur(4rpx);
|
backdrop-filter: blur(4rpx);
|
||||||
}
|
}
|
||||||
.home {
|
.home {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: calc(100vh - 80px);
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.box {
|
.box {
|
||||||
|
|||||||
@ -20,7 +20,7 @@ import webHead from "../components/webHead/index.vue";
|
|||||||
.content {
|
.content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-top: 80px;
|
padding-top: 80px;
|
||||||
min-height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user