williamet/cas_tt_cloud_web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改

Browse Source
This commit is contained in:
熊丽君
2022-02-22 10:53:40 +08:00
parent 0d3ffe3619
commit ad47786aac
9 changed files with 1226 additions and 737 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/webFooter/index.vue
View File

@ -2,22 +2,23 @@
<div class="webFooter">
<div class="wrap">
<el-row>
<el-col :span="4">
<div class="tit">解决方案</div>
<p><a href="">大型企业服务</a></p>
<p><a href="">科研院所服务</a></p>
<p><a href="">政府区域服务</a></p>
</el-col>
<el-col :span="4">
<div class="tit">创新服务</div>
<p><a href="">科技快报</a></p>
<p><a href="">海外人才推荐</a></p>
<el-col :span="4" v-for="(item, index) in state.list" :key="index">
<div class="tit">{{ item.title }}</div>
<p v-for="(item2, index2) in item.children" :key="index2">
<a :href="item2.link" target="_black">{{ item2.title }}</a>
</p>
</el-col>
<el-col :span="8">
<div class="tit">联系我们</div>
<p><a href="">客服电话：400-666-8888</a></p>
<p><a href="">邮箱：zhongkeyun@163.cn</a></p>
<p><a href="">地址：安徽省合肥市科大讯飞大楼</a></p>
<p>
<a href="">客服电话：{{ state.mobile }}</a>
</p>
<p>
<a href="">邮箱：{{ state.email }}</a>
</p>
<p>
<a href="">地址：{{ state.address }}</a>
</p>
</el-col>
<!-- <el-col :span="4" style="text-align: center;">
<div class="tit">二维码</div>
@ -33,7 +34,41 @@
</template>
<script setup lang="ts">
import request from "@/utils/request";
import { onMounted, reactive, watch } from "vue";
function navigation() {
return request({
url: "/v1/sys/navigation",
});
}
function config(params) {
return request({
url: "/v1/config",
params,
});
}
const state = reactive({
list: [],
mobile: "",
email: "",
address: "",
});
function getNavigation() {
navigation().then((res) => {
if (200 == res.code) {
state.list = res.data;
}
});
}
function getConfig() {
config({ key: "mobile,email,address" }).then((res) => {
state.mobile = res.data.mobile.value;
state.email = res.data.email.value;
state.address = res.data.address.value;
});
}
getNavigation();
getConfig();
</script>
<style lang="scss" scoped>

83
src/views/website/index/comp/index2.vue
View File

@ -10,43 +10,55 @@
<div class="left">科技活动</div>
<div class="right">
<!-- @click="dialogVisible = true" -->
<div class="publish">发布活动</div>
<!-- <div class="publish">发布活动</div> -->
<div class="more" @click="handlePage">更多</div>
</div>
</div>
<div class="content">
<div class="item one">
<img
src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF"
style="width: 100%"
/>
<div
class="item"
:class="index == 0 ? 'one' : ''"
v-for="(item, index) in state.list.slice(0, 1)"
:key="item.id"
@click="handleDetail(item.id)"
>
<img :src="item.image" style="width: 100%" />
<div class="des">
<div class="left">
<div>助力工厂公辅系统数字化及节能提效</div>
<div class="time">活动时间：2021-11-01 08:00</div>
<div>1988人已观看</div>
<div>{{ item.title }}</div>
<div class="time">
活动时间：{{ parseTime(item.begin_at) }} -
{{ parseTime(item.finish_at) }}
</div>
<div>{{ item.join_count }}人已观看</div>
</div>
<div class="right">19.9元报名</div>
<div class="right">{{ item.amount }}元报名</div>
</div>
</div>
<div class="item">
<div
class="item"
v-for="item in state.list.slice(1)"
:key="item.id"
@click="handleDetail(item.id)"
>
<div class="img">
<img
src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF"
/>
<img :src="item.image" />
</div>
<div class="dess">
<div class="txt">
助力工厂公辅系统数字化及节能提效助力工厂公辅系统数字化及节能提效
{{ item.title }}
</div>
<div class="dess1">
<div class="time">活动时间：2021-11-01 08:00</div>
<div>1988人已观看</div>
<div class="time">
活动时间：{{ parseTime(item.begin_at) }}
<!-- - {{ parseTime(item.finish_at) }} -->
</div>
<div>{{ item.join_count }}人已观看</div>
</div>
<div class="enroll">19.9元报名</div>
<div class="enroll">{{ item.amount }}元报名</div>
</div>
</div>
<div class="item">
<!-- <div class="item">
<div class="img">
<img
src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF"
@ -96,21 +108,50 @@
</div>
<div class="enroll end">已结束</div>
</div>
</div>
</div> -->
</div>
</div>
</div>
</template>
<script setup lang="ts">
import request from "@/utils/request";
import { defineComponent, onMounted, reactive } from "vue";
import webReleaseActive from "@/components/webReleaseActive/index.vue";
function activity() {
return request({
url: "/v1/activity",
method: "post",
data: {
status: 2,
page_num: 1,
page_size: 5,
},
});
}
const router = useRouter();
const dialogVisible = ref(false);
const state = reactive({
list: [],
total: 0,
});
function getList() {
activity().then((res) => {
if (200 == res.code) {
state.total = res.data.count;
state.list = res.data.data;
}
});
}
function handleDetail(id) {
let routeData = router.resolve({ path: `/activity/detail/${id}` });
window.open(routeData.href, "_blank");
}
function handlePage() {
router.push("/activity");
}
getList();
</script>
<style lang="scss" scoped>

337
src/views/website/index/comp/index3.vue
View File

@ -27,7 +27,7 @@
</div>
<div
v-if="Object.keys(getIndustry(snapTree)).length > 0"
v-for="(v,k) in getIndustry(snapTree)"
v-for="(v, k) in getIndustry(snapTree)"
>
<div class="a" :title="k">{{ k }}</div>
<div class="b">{{ v }}</div>
@ -42,28 +42,96 @@
<script setup>
import { defineComponent, getCurrentInstance, onMounted, reactive } from "vue";
import echarts from 'echarts'
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 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) {
function searchRegionData(code) {
// console.log(code, treeData,'searchRegionData')
return deepFindTree(code, treeData);
}
function deepFindTree (code, tree) {
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']);
} else if (tree[key]["children"] != null) {
snap = deepFindTree(code, tree[key]["children"]);
if (snap) {
break;
}
@ -75,19 +143,19 @@ function deepFindTree (code, tree) {
return snap;
}
function getIndustry (object) {
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 (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] = 0;
}
snap[ek] += ele
snap[ek] += ele;
}
}
// for (let index = 0; index < element['industry'].length; index++) {
@ -98,42 +166,40 @@ function getIndustry (object) {
// }
}
}
}
return snap
return snap;
}
const state = reactive({
loading: false,
isShowGoBack: false,
nameType: '',
cityName: '中国',
nameType: "",
cityName: "中国",
areaCode: 10000,
AreaCodeStack: ['中国'],
geoJsonData: '',
AreaCodeStack: ["中国"],
geoJsonData: "",
echartsMap: null,
map: null,
uimap: null,
district: null,
polygons: [],
cityCode: '100000',
cityCode: "100000",
citySelect: null,
districtSelect: null,
opts: {},
areaData: {},
mapData: [],
zip: {},//打包zip
zip: {}, //打包zip
codeList: [],
isCodeListLoadComplete: false,//codeList是否全部获取完毕
downloadTips: '下载geoJson数据',//下载进度提示
isShowTips: false,//是否显示下载提示
isCodeListLoadComplete: false, //codeList是否全部获取完毕
downloadTips: "下载geoJson数据", //下载进度提示
isShowTips: false, //是否显示下载提示
});
onMounted(() => {
// 数据接口
getExpert().then(res => {
getExpert().then((res) => {
if (200 == res.code) {
treeData = res.data;
snapTree.value = res.data;
@ -153,96 +219,101 @@ onMounted(() => {
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';
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.echartsMap.on("click", echartsMapClick);
setTimeout(() => {
state.map = new AMap.Map('container', {
state.map = new AMap.Map("container", {
resizeEnable: true,
center: [116.30946, 39.937629],
zoom: 3
zoom: 3,
});
state.opts = {
subdistrict: 1, //返回下一级行政区
showbiz: false //最后一级返回街道信息
subdistrict: 1, //返回下一级行政区
showbiz: false, //最后一级返回街道信息
};
state.district = new AMap.DistrictSearch(state.opts);//注意：需要使用插件同步下发功能才能这样直接使用
state.district.search('中国', (status, result) => {
if (status == 'complete') {
getData(result.districtList[0], '', 100000);
state.district = new AMap.DistrictSearch(state.opts); //注意：需要使用插件同步下发功能才能这样直接使用
state.district.search("中国", (status, result) => {
if (status == "complete") {
getData(result.districtList[0], "", 100000);
}
});
}, 1000)
}, 1000);
});
function goBack () {
function goBack() {
state.isShowGoBack = false;
loading.value = true;
state.district.search('中国', (status, result) => {
if (status == 'complete') {
getData(result.districtList[0], '', 100000);
state.district.search("中国", (status, result) => {
if (status == "complete") {
getData(result.districtList[0], "", 100000);
snapTree.value = treeData;
}
});
}
function echartsMapClick (params) {//地图点击事件
if (params.data.cityCode == '710000') {
function echartsMapClick(params) {
//地图点击事件
if (params.data.cityCode == "710000") {
return;
}
if (params.data.level == 'district') {
if (params.data.level == "district") {
return;
}
if (params.data.level == 'street') return;//此处的params.data为state.mapData里的数据
if (params.data.level == "street") return; //此处的params.data为state.mapData里的数据
let snap = searchRegionData(params.data.cityCode);
snapTree.value = {}
snapTree.value = {};
if (snap) {
snapTree.value = snap['children']
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.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') {
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函数在前面已经定义过了
getData(result.districtList[0], params.data.level, state.cityCode); //这个getData函数在前面已经定义过了
}
});
}
function getData (data, level, adcode) {//处理获取出来的边界数据
function getData(data, level, adcode) {
//处理获取出来的边界数据
var subList = data.districtList;
if (subList) {
var curlevel = subList[0].level;
if (curlevel === 'street') {//为了配合echarts地图区县名称显示正常，这边街道级别数据需要特殊处理
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]);
mapJson["features"] = [].concat(mapJsonList[i]);
}
}
state.mapData = [];
let item = searchRegionData(cityCode)
let item = searchRegionData(cityCode);
if (item) {
console.log('1 searchRegionData(cityCode)', item);
console.log("1 searchRegionData(cityCode)", item);
}
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
state.mapData.push({ name: state.cityName, value: item ? item.count : 0, level: curlevel });
state.mapData.push({
name: state.cityName,
value: item ? item.count : 0,
level: curlevel,
});
loadMap(state.cityName, mapJson);
state.geoJsonData = mapJson;
return;
@ -254,33 +325,31 @@ function getData (data, level, adcode) {//处理获取出来的边界数据
var name = subList[i].name;
var cityCode = subList[i].adcode;
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
let item = searchRegionData(cityCode)
let item = searchRegionData(cityCode);
if (item) {
console.log('2 searchRegionData(cityCode)', item);
console.log("2 searchRegionData(cityCode)", item);
}
state.mapData.push({
name: name,
value: item ? item.count : 0,
cityCode: cityCode,
level: curlevel
level: curlevel,
});
}
loadMapData(adcode);
}
}
function loadMapData (areaCode) {
AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
function loadMapData(areaCode) {
AMapUI.loadUI(["geo/DistrictExplorer"], (DistrictExplorer) => {
//创建一个实例
var districtExplorer = window.districtExplorer = new DistrictExplorer({
var districtExplorer = (window.districtExplorer = new DistrictExplorer({
eventSupport: true, //打开事件支持
map: state.map
});
map: state.map,
}));
districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {
if (error) {
console.error(error);
return;
@ -288,91 +357,103 @@ function loadMapData (areaCode) {
let mapJson = {};
//特别注意这里哦，如果查看过正常的geojson文件，都会发现，文件都是以features 字段开头的，所以这里要记得加上
mapJson.features = areaNode.getSubFeatures();
console.log("------------------");
for (var i = 0; i < mapJson.features.length; i++) {
if (
mapJson.features[i].properties.adcode == 810000 ||
mapJson.features[i].properties.adcode == 820000
) {
mapJson.features.splice(i, 1); // 删除下标为i 的元素，i开始只删除一个就它自己了
i--; // 删除一个元素后数组长度减一了
}
}
console.log("------------------");
loadMap(state.cityName, mapJson);
});
});
}
function loadMap (mapName, data) {
function loadMap(mapName, data) {
if (data) {
echarts.registerMap(mapName, data);//把geoJson数据注入echarts
echarts.registerMap(mapName, data); //把geoJson数据注入echarts
//配置echarts的option
var option = {
visualMap: {
type: 'piecewise',
left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
type: "piecewise",
left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
bottom: "30",
orient: "horizontal", //图例排列方向
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' },
{ 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',
color: "#fff",
},
visibility: 'off',
visibility: "off",
},
tooltip: {
//提示框信息
trigger: 'item',
formatter: '{b}\n{c}人',
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: '#666666',
borderWidth: 0.5,
label: {
show: true,
textStyle: {
color: "#333333",
}
}
},
emphasis: {
areaColor: "rgb(38, 219, 11)",
borderColor: '#666666',
areaStyle: {
color: '#333333'
},
label: {
show: true,
textStyle: {
color: "#333333"
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: "#666666",
borderWidth: 0.5,
label: {
show: true,
textStyle: {
color: "#333333",
},
},
// formatter: function (value) { //标签的格式化工具。
// return value.name + '：' + value.value; // 范围标签显示内容。
// }
}
}
},
emphasis: {
areaColor: "rgb(38, 219, 11)",
borderColor: "#666666",
areaStyle: {
color: "#333333",
},
label: {
show: true,
textStyle: {
color: "#333333",
},
// formatter: function (value) { //标签的格式化工具。
// return value.name + '：' + value.value; // 范围标签显示内容。
// }
},
},
},
data: state.mapData, //这个data里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
},
data: state.mapData, //这个data里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
}]
],
};
state.echartsMap.setOption(option);
loading.value = false;
}
}
</script>
<style lang="scss" scoped>

352
src/views/website/index/comp/index4.vue
View File

@ -25,7 +25,10 @@
<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
v-if="Object.keys(getIndustry(snapTree)).length > 0"
v-for="(v, k) in getIndustry(snapTree)"
>
<div class="a" :title="k">{{ k }}</div>
<div class="b">{{ v }}</div>
</div>
@ -39,28 +42,96 @@
<script setup>
import { defineComponent, getCurrentInstance, onMounted, reactive } from "vue";
import echarts from 'echarts'
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 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) {
function searchRegionData(code) {
// console.log(code, treeData,'searchRegionData')
return deepFindTree(code, treeData);
}
function deepFindTree (code, tree) {
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']);
} else if (tree[key]["children"] != null) {
snap = deepFindTree(code, tree[key]["children"]);
if (snap) {
break;
}
@ -72,19 +143,19 @@ function deepFindTree (code, tree) {
return snap;
}
function getIndustry (object) {
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 (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] = 0;
}
snap[ek] += ele
snap[ek] += ele;
}
}
// for (let index = 0; index < element['industry'].length; index++) {
@ -95,42 +166,40 @@ function getIndustry (object) {
// }
}
}
}
return snap
return snap;
}
const state = reactive({
loading: false,
isShowGoBack: false,
nameType: '',
cityName: '中国',
nameType: "",
cityName: "中国",
areaCode: 10000,
AreaCodeStack: ['中国'],
geoJsonData: '',
AreaCodeStack: ["中国"],
geoJsonData: "",
echartsMap: null,
map: null,
uimap: null,
district: null,
polygons: [],
cityCode: '100000',
cityCode: "100000",
citySelect: null,
districtSelect: null,
opts: {},
areaData: {},
mapData: [],
zip: {},//打包zip
zip: {}, //打包zip
codeList: [],
isCodeListLoadComplete: false,//codeList是否全部获取完毕
downloadTips: '下载geoJson数据',//下载进度提示
isShowTips: false,//是否显示下载提示
isCodeListLoadComplete: false, //codeList是否全部获取完毕
downloadTips: "下载geoJson数据", //下载进度提示
isShowTips: false, //是否显示下载提示
});
onMounted(() => {
// 数据接口
laboratory().then(res => {
laboratory().then((res) => {
if (200 == res.code) {
treeData = res.data;
snapTree.value = res.data;
@ -150,95 +219,101 @@ onMounted(() => {
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';
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.echartsMap.on("click", echartsMapClick);
setTimeout(() => {
state.map = new AMap.Map('container', {
state.map = new AMap.Map("container", {
resizeEnable: true,
center: [116.30946, 39.937629],
zoom: 3
zoom: 3,
});
state.opts = {
subdistrict: 1, //返回下一级行政区
showbiz: false //最后一级返回街道信息
subdistrict: 1, //返回下一级行政区
showbiz: false, //最后一级返回街道信息
};
state.district = new AMap.DistrictSearch(state.opts);//注意：需要使用插件同步下发功能才能这样直接使用
state.district.search('中国', (status, result) => {
if (status == 'complete') {
getData(result.districtList[0], '', 100000);
state.district = new AMap.DistrictSearch(state.opts); //注意：需要使用插件同步下发功能才能这样直接使用
state.district.search("中国", (status, result) => {
if (status == "complete") {
getData(result.districtList[0], "", 100000);
}
});
}, 2000)
}, 2000);
});
function goBack () {
function goBack() {
state.isShowGoBack = false;
loading.value = true;
state.district.search('中国', (status, result) => {
if (status == 'complete') {
getData(result.districtList[0], '', 100000);
state.district.search("中国", (status, result) => {
if (status == "complete") {
getData(result.districtList[0], "", 100000);
snapTree.value = treeData;
}
});
}
function echartsMapClick (params) {//地图点击事件
if (params.data.cityCode == '710000') {
function echartsMapClick(params) {
//地图点击事件
if (params.data.cityCode == "710000") {
return;
}
if (params.data.level == 'district') {
if (params.data.level == "district") {
return;
}
if (params.data.level == 'street') return;//此处的params.data为state.mapData里的数据
if (params.data.level == "street") return; //此处的params.data为state.mapData里的数据
let snap = searchRegionData(params.data.cityCode);
snapTree.value = {}
snapTree.value = {};
if (snap) {
snapTree.value = snap['children']
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.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') {
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函数在前面已经定义过了
getData(result.districtList[0], params.data.level, state.cityCode); //这个getData函数在前面已经定义过了
}
});
}
function getData (data, level, adcode) {//处理获取出来的边界数据
function getData(data, level, adcode) {
//处理获取出来的边界数据
var subList = data.districtList;
if (subList) {
var curlevel = subList[0].level;
if (curlevel === 'street') {//为了配合echarts地图区县名称显示正常，这边街道级别数据需要特殊处理
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]);
mapJson["features"] = [].concat(mapJsonList[i]);
}
}
state.mapData = [];
let item = searchRegionData(cityCode)
let item = searchRegionData(cityCode);
if (item) {
console.log('1 searchRegionData(cityCode)', item);
console.log("1 searchRegionData(cityCode)", item);
}
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
state.mapData.push({ name: state.cityName, value: item ? item.count : 0, level: curlevel });
state.mapData.push({
name: state.cityName,
value: item ? item.count : 0,
level: curlevel,
});
loadMap(state.cityName, mapJson);
state.geoJsonData = mapJson;
return;
@ -250,33 +325,31 @@ function getData (data, level, adcode) {//处理获取出来的边界数据
var name = subList[i].name;
var cityCode = subList[i].adcode;
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
let item = searchRegionData(cityCode)
let item = searchRegionData(cityCode);
if (item) {
console.log('2 searchRegionData(cityCode)', item);
console.log("2 searchRegionData(cityCode)", item);
}
state.mapData.push({
name: name,
value: item ? item.count : 0,
cityCode: cityCode,
level: curlevel
level: curlevel,
});
}
loadMapData(adcode);
}
}
function loadMapData (areaCode) {
AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
function loadMapData(areaCode) {
AMapUI.loadUI(["geo/DistrictExplorer"], (DistrictExplorer) => {
//创建一个实例
var districtExplorer = window.districtExplorer = new DistrictExplorer({
var districtExplorer = (window.districtExplorer = new DistrictExplorer({
eventSupport: true, //打开事件支持
map: state.map
});
map: state.map,
}));
districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {
if (error) {
console.error(error);
return;
@ -284,91 +357,103 @@ function loadMapData (areaCode) {
let mapJson = {};
//特别注意这里哦，如果查看过正常的geojson文件，都会发现，文件都是以features 字段开头的，所以这里要记得加上
mapJson.features = areaNode.getSubFeatures();
console.log("------------------");
for (var i = 0; i < mapJson.features.length; i++) {
if (
mapJson.features[i].properties.adcode == 810000 ||
mapJson.features[i].properties.adcode == 820000
) {
mapJson.features.splice(i, 1); // 删除下标为i 的元素，i开始只删除一个就它自己了
i--; // 删除一个元素后数组长度减一了
}
}
console.log("------------------");
loadMap(state.cityName, mapJson);
});
});
}
function loadMap (mapName, data) {
function loadMap(mapName, data) {
if (data) {
echarts.registerMap(mapName, data);//把geoJson数据注入echarts
echarts.registerMap(mapName, data); //把geoJson数据注入echarts
//配置echarts的option
var option = {
visualMap: {
type: 'piecewise',
left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
type: "piecewise",
left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
bottom: "30",
orient: "horizontal", //图例排列方向
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' },
{ 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',
color: "#333333",
},
visibility: 'off',
visibility: "off",
},
tooltip: {
//提示框信息
trigger: 'item',
formatter: '{b}\n{c}个',
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: '#666666',
borderWidth: 0.5,
label: {
show: true,
textStyle: {
color: "#333333",
}
}
},
emphasis: {
areaColor: "rgb(38, 219, 11)",
borderColor: '#666666',
areaStyle: {
color: '#333333'
},
label: {
show: true,
textStyle: {
color: "#333333"
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: "#666666",
borderWidth: 0.5,
label: {
show: true,
textStyle: {
color: "#333333",
},
},
// formatter: function (value) { //标签的格式化工具。
// return value.name + '：' + value.value; // 范围标签显示内容。
// }
}
}
},
emphasis: {
areaColor: "rgb(38, 219, 11)",
borderColor: "#666666",
areaStyle: {
color: "#333333",
},
label: {
show: true,
textStyle: {
color: "#333333",
},
// formatter: function (value) { //标签的格式化工具。
// return value.name + '：' + value.value; // 范围标签显示内容。
// }
},
},
},
data: state.mapData, //这个data里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
},
data: state.mapData, //这个data里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
}]
],
};
state.echartsMap.setOption(option);
loading.value = false;
}
}
</script>
<style lang="scss" scoped>
@ -433,29 +518,28 @@ function loadMap (mapName, data) {
min-width: 200px;
max-height: 256px;
overflow: hidden;
border: 1px solid #DCDCDC;
border: 1px solid #dcdcdc;
color: #666666;
& > div {
display: flex;
}
.head {
border-bottom: 1px solid #DCDCDC;
border-bottom: 1px solid #dcdcdc;
color: #333333;
}
.a {
flex: 1;
border-right: 1px solid #DCDCDC;
border-right: 1px solid #dcdcdc;
text-align: center;
line-height: 42px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.b {
text-align: center;
line-height: 42px;
width: 90px;
}
}
</style>

346
src/views/website/index/comp/index5.vue
View File

@ -25,7 +25,10 @@
<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
v-if="Object.keys(getIndustry(snapTree)).length > 0"
v-for="(v, k) in getIndustry(snapTree)"
>
<div class="a" :title="k">{{ k }}</div>
<div class="b">{{ v }}</div>
</div>
@ -39,28 +42,96 @@
<script setup>
import { defineComponent, getCurrentInstance, onMounted, reactive } from "vue";
import echarts from 'echarts'
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 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) {
function searchRegionData(code) {
// console.log(code, treeData,'searchRegionData')
return deepFindTree(code, treeData);
}
function deepFindTree (code, tree) {
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']);
} else if (tree[key]["children"] != null) {
snap = deepFindTree(code, tree[key]["children"]);
if (snap) {
break;
}
@ -72,19 +143,19 @@ function deepFindTree (code, tree) {
return snap;
}
function getIndustry (object) {
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 (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] = 0;
}
snap[ek] += ele
snap[ek] += ele;
}
}
// for (let index = 0; index < element['industry'].length; index++) {
@ -95,42 +166,40 @@ function getIndustry (object) {
// }
}
}
}
return snap
return snap;
}
const state = reactive({
loading: false,
isShowGoBack: false,
nameType: '',
cityName: '中国',
nameType: "",
cityName: "中国",
areaCode: 10000,
AreaCodeStack: ['中国'],
geoJsonData: '',
AreaCodeStack: ["中国"],
geoJsonData: "",
echartsMap: null,
map: null,
uimap: null,
district: null,
polygons: [],
cityCode: '100000',
cityCode: "100000",
citySelect: null,
districtSelect: null,
opts: {},
areaData: {},
mapData: [],
zip: {},//打包zip
zip: {}, //打包zip
codeList: [],
isCodeListLoadComplete: false,//codeList是否全部获取完毕
downloadTips: '下载geoJson数据',//下载进度提示
isShowTips: false,//是否显示下载提示
isCodeListLoadComplete: false, //codeList是否全部获取完毕
downloadTips: "下载geoJson数据", //下载进度提示
isShowTips: false, //是否显示下载提示
});
onMounted(() => {
// 数据接口
achievement().then(res => {
achievement().then((res) => {
if (200 == res.code) {
treeData = res.data;
snapTree.value = res.data;
@ -150,95 +219,101 @@ onMounted(() => {
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';
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.echartsMap.on("click", echartsMapClick);
setTimeout(() => {
state.map = new AMap.Map('container', {
state.map = new AMap.Map("container", {
resizeEnable: true,
center: [116.30946, 39.937629],
zoom: 3
zoom: 3,
});
state.opts = {
subdistrict: 1, //返回下一级行政区
showbiz: false //最后一级返回街道信息
subdistrict: 1, //返回下一级行政区
showbiz: false, //最后一级返回街道信息
};
state.district = new AMap.DistrictSearch(state.opts);//注意：需要使用插件同步下发功能才能这样直接使用
state.district.search('中国', (status, result) => {
if (status == 'complete') {
getData(result.districtList[0], '', 100000);
state.district = new AMap.DistrictSearch(state.opts); //注意：需要使用插件同步下发功能才能这样直接使用
state.district.search("中国", (status, result) => {
if (status == "complete") {
getData(result.districtList[0], "", 100000);
}
});
}, 3000)
}, 3000);
});
function goBack () {
function goBack() {
state.isShowGoBack = false;
loading.value = true;
state.district.search('中国', (status, result) => {
if (status == 'complete') {
getData(result.districtList[0], '', 100000);
state.district.search("中国", (status, result) => {
if (status == "complete") {
getData(result.districtList[0], "", 100000);
snapTree.value = treeData;
}
});
}
function echartsMapClick (params) {//地图点击事件
if (params.data.cityCode == '710000') {
function echartsMapClick(params) {
//地图点击事件
if (params.data.cityCode == "710000") {
return;
}
if (params.data.level == 'district') {
if (params.data.level == "district") {
return;
}
if (params.data.level == 'street') return;//此处的params.data为state.mapData里的数据
if (params.data.level == "street") return; //此处的params.data为state.mapData里的数据
let snap = searchRegionData(params.data.cityCode);
snapTree.value = {}
snapTree.value = {};
if (snap) {
snapTree.value = snap['children']
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.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') {
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函数在前面已经定义过了
getData(result.districtList[0], params.data.level, state.cityCode); //这个getData函数在前面已经定义过了
}
});
}
function getData (data, level, adcode) {//处理获取出来的边界数据
function getData(data, level, adcode) {
//处理获取出来的边界数据
var subList = data.districtList;
if (subList) {
var curlevel = subList[0].level;
if (curlevel === 'street') {//为了配合echarts地图区县名称显示正常，这边街道级别数据需要特殊处理
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]);
mapJson["features"] = [].concat(mapJsonList[i]);
}
}
state.mapData = [];
let item = searchRegionData(cityCode)
let item = searchRegionData(cityCode);
if (item) {
console.log('1 searchRegionData(cityCode)', item);
console.log("1 searchRegionData(cityCode)", item);
}
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
state.mapData.push({ name: state.cityName, value: item ? item.count : 0, level: curlevel });
state.mapData.push({
name: state.cityName,
value: item ? item.count : 0,
level: curlevel,
});
loadMap(state.cityName, mapJson);
state.geoJsonData = mapJson;
return;
@ -250,33 +325,31 @@ function getData (data, level, adcode) {//处理获取出来的边界数据
var name = subList[i].name;
var cityCode = subList[i].adcode;
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
let item = searchRegionData(cityCode)
let item = searchRegionData(cityCode);
if (item) {
console.log('2 searchRegionData(cityCode)', item);
console.log("2 searchRegionData(cityCode)", item);
}
state.mapData.push({
name: name,
value: item ? item.count : 0,
cityCode: cityCode,
level: curlevel
level: curlevel,
});
}
loadMapData(adcode);
}
}
function loadMapData (areaCode) {
AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
function loadMapData(areaCode) {
AMapUI.loadUI(["geo/DistrictExplorer"], (DistrictExplorer) => {
//创建一个实例
var districtExplorer = window.districtExplorer = new DistrictExplorer({
var districtExplorer = (window.districtExplorer = new DistrictExplorer({
eventSupport: true, //打开事件支持
map: state.map
});
map: state.map,
}));
districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {
if (error) {
console.error(error);
return;
@ -284,91 +357,103 @@ function loadMapData (areaCode) {
let mapJson = {};
//特别注意这里哦，如果查看过正常的geojson文件，都会发现，文件都是以features 字段开头的，所以这里要记得加上
mapJson.features = areaNode.getSubFeatures();
console.log("------------------");
for (var i = 0; i < mapJson.features.length; i++) {
if (
mapJson.features[i].properties.adcode == 810000 ||
mapJson.features[i].properties.adcode == 820000
) {
mapJson.features.splice(i, 1); // 删除下标为i 的元素，i开始只删除一个就它自己了
i--; // 删除一个元素后数组长度减一了
}
}
console.log("------------------");
loadMap(state.cityName, mapJson);
});
});
}
function loadMap (mapName, data) {
function loadMap(mapName, data) {
if (data) {
echarts.registerMap(mapName, data);//把geoJson数据注入echarts
echarts.registerMap(mapName, data); //把geoJson数据注入echarts
//配置echarts的option
var option = {
visualMap: {
type: 'piecewise',
left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
type: "piecewise",
left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
bottom: "30",
orient: "horizontal", //图例排列方向
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' },
{ 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',
color: "#fff",
},
visibility: 'off',
visibility: "off",
},
tooltip: {
//提示框信息
trigger: 'item',
formatter: '{b}\n{c}个',
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: '#666666',
borderWidth: 0.5,
label: {
show: true,
textStyle: {
color: "#333333",
}
}
},
emphasis: {
areaColor: "rgb(38, 219, 11)",
borderColor: '#666666',
areaStyle: {
color: '#333333'
},
label: {
show: true,
textStyle: {
color: "#333333"
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: "#666666",
borderWidth: 0.5,
label: {
show: true,
textStyle: {
color: "#333333",
},
},
// formatter: function (value) { //标签的格式化工具。
// return value.name + '：' + value.value; // 范围标签显示内容。
// }
}
}
},
emphasis: {
areaColor: "rgb(38, 219, 11)",
borderColor: "#666666",
areaStyle: {
color: "#333333",
},
label: {
show: true,
textStyle: {
color: "#333333",
},
// formatter: function (value) { //标签的格式化工具。
// return value.name + '：' + value.value; // 范围标签显示内容。
// }
},
},
},
data: state.mapData, //这个data里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
},
data: state.mapData, //这个data里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
}]
],
};
state.echartsMap.setOption(option);
loading.value = false;
}
}
</script>
<style lang="scss" scoped>
@ -449,15 +534,14 @@ function loadMap (mapName, data) {
border-right: 1px solid #0054ff;
text-align: center;
line-height: 42px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.b {
text-align: center;
line-height: 42px;
width: 90px;
}
}
</style>

352
src/views/website/index/comp/index6.vue
View File

@ -25,7 +25,10 @@
<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
v-if="Object.keys(getIndustry(snapTree)).length > 0"
v-for="(v, k) in getIndustry(snapTree)"
>
<div class="a" :title="k">{{ k }}</div>
<div class="b">{{ v }}</div>
</div>
@ -39,28 +42,96 @@
<script setup>
import { defineComponent, getCurrentInstance, onMounted, reactive } from "vue";
import echarts from 'echarts'
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 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) {
function searchRegionData(code) {
// console.log(code, treeData,'searchRegionData')
return deepFindTree(code, treeData);
}
function deepFindTree (code, tree) {
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']);
} else if (tree[key]["children"] != null) {
snap = deepFindTree(code, tree[key]["children"]);
if (snap) {
break;
}
@ -72,19 +143,19 @@ function deepFindTree (code, tree) {
return snap;
}
function getIndustry (object) {
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 (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] = 0;
}
snap[ek] += ele
snap[ek] += ele;
}
}
// for (let index = 0; index < element['industry'].length; index++) {
@ -95,42 +166,40 @@ function getIndustry (object) {
// }
}
}
}
return snap
return snap;
}
const state = reactive({
loading: false,
isShowGoBack: false,
nameType: '',
cityName: '中国',
nameType: "",
cityName: "中国",
areaCode: 10000,
AreaCodeStack: ['中国'],
geoJsonData: '',
AreaCodeStack: ["中国"],
geoJsonData: "",
echartsMap: null,
map: null,
uimap: null,
district: null,
polygons: [],
cityCode: '100000',
cityCode: "100000",
citySelect: null,
districtSelect: null,
opts: {},
areaData: {},
mapData: [],
zip: {},//打包zip
zip: {}, //打包zip
codeList: [],
isCodeListLoadComplete: false,//codeList是否全部获取完毕
downloadTips: '下载geoJson数据',//下载进度提示
isShowTips: false,//是否显示下载提示
isCodeListLoadComplete: false, //codeList是否全部获取完毕
downloadTips: "下载geoJson数据", //下载进度提示
isShowTips: false, //是否显示下载提示
});
onMounted(() => {
// 数据接口
demand().then(res => {
demand().then((res) => {
if (200 == res.code) {
treeData = res.data;
snapTree.value = res.data;
@ -150,95 +219,101 @@ onMounted(() => {
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';
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.echartsMap.on("click", echartsMapClick);
setTimeout(() => {
state.map = new AMap.Map('container', {
state.map = new AMap.Map("container", {
resizeEnable: true,
center: [116.30946, 39.937629],
zoom: 3
zoom: 3,
});
state.opts = {
subdistrict: 1, //返回下一级行政区
showbiz: false //最后一级返回街道信息
subdistrict: 1, //返回下一级行政区
showbiz: false, //最后一级返回街道信息
};
state.district = new AMap.DistrictSearch(state.opts);//注意：需要使用插件同步下发功能才能这样直接使用
state.district.search('中国', (status, result) => {
if (status == 'complete') {
getData(result.districtList[0], '', 100000);
state.district = new AMap.DistrictSearch(state.opts); //注意：需要使用插件同步下发功能才能这样直接使用
state.district.search("中国", (status, result) => {
if (status == "complete") {
getData(result.districtList[0], "", 100000);
}
});
}, 4000)
}, 4000);
});
function goBack () {
function goBack() {
state.isShowGoBack = false;
loading.value = true;
state.district.search('中国', (status, result) => {
if (status == 'complete') {
getData(result.districtList[0], '', 100000);
state.district.search("中国", (status, result) => {
if (status == "complete") {
getData(result.districtList[0], "", 100000);
snapTree.value = treeData;
}
});
}
function echartsMapClick (params) {//地图点击事件
if (params.data.cityCode == '710000') {
function echartsMapClick(params) {
//地图点击事件
if (params.data.cityCode == "710000") {
return;
}
if (params.data.level == 'district') {
if (params.data.level == "district") {
return;
}
if (params.data.level == 'street') return;//此处的params.data为state.mapData里的数据
if (params.data.level == "street") return; //此处的params.data为state.mapData里的数据
let snap = searchRegionData(params.data.cityCode);
snapTree.value = {}
snapTree.value = {};
if (snap) {
snapTree.value = snap['children']
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.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') {
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函数在前面已经定义过了
getData(result.districtList[0], params.data.level, state.cityCode); //这个getData函数在前面已经定义过了
}
});
}
function getData (data, level, adcode) {//处理获取出来的边界数据
function getData(data, level, adcode) {
//处理获取出来的边界数据
var subList = data.districtList;
if (subList) {
var curlevel = subList[0].level;
if (curlevel === 'street') {//为了配合echarts地图区县名称显示正常，这边街道级别数据需要特殊处理
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]);
mapJson["features"] = [].concat(mapJsonList[i]);
}
}
state.mapData = [];
let item = searchRegionData(cityCode)
let item = searchRegionData(cityCode);
if (item) {
console.log('1 searchRegionData(cityCode)', item);
console.log("1 searchRegionData(cityCode)", item);
}
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
state.mapData.push({ name: state.cityName, value: item ? item.count : 0, level: curlevel });
state.mapData.push({
name: state.cityName,
value: item ? item.count : 0,
level: curlevel,
});
loadMap(state.cityName, mapJson);
state.geoJsonData = mapJson;
return;
@ -250,33 +325,31 @@ function getData (data, level, adcode) {//处理获取出来的边界数据
var name = subList[i].name;
var cityCode = subList[i].adcode;
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
let item = searchRegionData(cityCode)
let item = searchRegionData(cityCode);
if (item) {
console.log('2 searchRegionData(cityCode)', item);
console.log("2 searchRegionData(cityCode)", item);
}
state.mapData.push({
name: name,
value: item ? item.count : 0,
cityCode: cityCode,
level: curlevel
level: curlevel,
});
}
loadMapData(adcode);
}
}
function loadMapData (areaCode) {
AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
function loadMapData(areaCode) {
AMapUI.loadUI(["geo/DistrictExplorer"], (DistrictExplorer) => {
//创建一个实例
var districtExplorer = window.districtExplorer = new DistrictExplorer({
var districtExplorer = (window.districtExplorer = new DistrictExplorer({
eventSupport: true, //打开事件支持
map: state.map
});
map: state.map,
}));
districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {
if (error) {
console.error(error);
return;
@ -284,91 +357,103 @@ function loadMapData (areaCode) {
let mapJson = {};
//特别注意这里哦，如果查看过正常的geojson文件，都会发现，文件都是以features 字段开头的，所以这里要记得加上
mapJson.features = areaNode.getSubFeatures();
console.log("------------------");
for (var i = 0; i < mapJson.features.length; i++) {
if (
mapJson.features[i].properties.adcode == 810000 ||
mapJson.features[i].properties.adcode == 820000
) {
mapJson.features.splice(i, 1); // 删除下标为i 的元素，i开始只删除一个就它自己了
i--; // 删除一个元素后数组长度减一了
}
}
console.log("------------------");
loadMap(state.cityName, mapJson);
});
});
}
function loadMap (mapName, data) {
function loadMap(mapName, data) {
if (data) {
echarts.registerMap(mapName, data);//把geoJson数据注入echarts
echarts.registerMap(mapName, data); //把geoJson数据注入echarts
//配置echarts的option
var option = {
visualMap: {
type: 'piecewise',
left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
type: "piecewise",
left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
bottom: "30",
orient: "horizontal", //图例排列方向
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' },
{ 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',
color: "#333333",
},
visibility: 'off',
visibility: "off",
},
tooltip: {
//提示框信息
trigger: 'item',
formatter: '{b}\n{c}个',
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: '#666666',
borderWidth: 0.5,
label: {
show: true,
textStyle: {
color: "#333333",
}
}
},
emphasis: {
areaColor: "rgb(38, 219, 11)",
borderColor: '#666666',
areaStyle: {
color: '#333333'
},
label: {
show: true,
textStyle: {
color: "#333333"
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: "#666666",
borderWidth: 0.5,
label: {
show: true,
textStyle: {
color: "#333333",
},
},
// formatter: function (value) { //标签的格式化工具。
// return value.name + '：' + value.value; // 范围标签显示内容。
// }
}
}
},
emphasis: {
areaColor: "rgb(38, 219, 11)",
borderColor: "#666666",
areaStyle: {
color: "#333333",
},
label: {
show: true,
textStyle: {
color: "#333333",
},
// formatter: function (value) { //标签的格式化工具。
// return value.name + '：' + value.value; // 范围标签显示内容。
// }
},
},
},
data: state.mapData, //这个data里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
},
data: state.mapData, //这个data里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
}]
],
};
state.echartsMap.setOption(option);
loading.value = false;
}
}
</script>
<style lang="scss" scoped>
@ -433,29 +518,28 @@ function loadMap (mapName, data) {
min-width: 200px;
max-height: 256px;
overflow: hidden;
border: 1px solid #DCDCDC;
border: 1px solid #dcdcdc;
color: #666666;
& > div {
display: flex;
}
.head {
border-bottom: 1px solid #DCDCDC;
border-bottom: 1px solid #dcdcdc;
color: #333333;
}
.a {
flex: 1;
border-right: 1px solid #DCDCDC;
border-right: 1px solid #dcdcdc;
text-align: center;
line-height: 42px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.b {
text-align: center;
line-height: 42px;
width: 90px;
}
}
</style>

346
src/views/website/index/comp/index7.vue
View File

@ -25,7 +25,10 @@
<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
v-if="Object.keys(getIndustry(snapTree)).length > 0"
v-for="(v, k) in getIndustry(snapTree)"
>
<div class="a" :title="k">{{ k }}</div>
<div class="b">{{ v }}</div>
</div>
@ -39,28 +42,96 @@
<script setup>
import { defineComponent, getCurrentInstance, onMounted, reactive } from "vue";
import echarts from 'echarts'
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 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) {
function searchRegionData(code) {
// console.log(code, treeData,'searchRegionData')
return deepFindTree(code, treeData);
}
function deepFindTree (code, tree) {
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']);
} else if (tree[key]["children"] != null) {
snap = deepFindTree(code, tree[key]["children"]);
if (snap) {
break;
}
@ -72,19 +143,19 @@ function deepFindTree (code, tree) {
return snap;
}
function getIndustry (object) {
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 (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] = 0;
}
snap[ek] += ele
snap[ek] += ele;
}
}
// for (let index = 0; index < element['industry'].length; index++) {
@ -95,42 +166,40 @@ function getIndustry (object) {
// }
}
}
}
return snap
return snap;
}
const state = reactive({
loading: false,
isShowGoBack: false,
nameType: '',
cityName: '中国',
nameType: "",
cityName: "中国",
areaCode: 10000,
AreaCodeStack: ['中国'],
geoJsonData: '',
AreaCodeStack: ["中国"],
geoJsonData: "",
echartsMap: null,
map: null,
uimap: null,
district: null,
polygons: [],
cityCode: '100000',
cityCode: "100000",
citySelect: null,
districtSelect: null,
opts: {},
areaData: {},
mapData: [],
zip: {},//打包zip
zip: {}, //打包zip
codeList: [],
isCodeListLoadComplete: false,//codeList是否全部获取完毕
downloadTips: '下载geoJson数据',//下载进度提示
isShowTips: false,//是否显示下载提示
isCodeListLoadComplete: false, //codeList是否全部获取完毕
downloadTips: "下载geoJson数据", //下载进度提示
isShowTips: false, //是否显示下载提示
});
onMounted(() => {
// 数据接口
company().then(res => {
company().then((res) => {
if (200 == res.code) {
treeData = res.data;
snapTree.value = res.data;
@ -150,95 +219,101 @@ onMounted(() => {
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';
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.echartsMap.on("click", echartsMapClick);
setTimeout(() => {
state.map = new AMap.Map('container', {
state.map = new AMap.Map("container", {
resizeEnable: true,
center: [116.30946, 39.937629],
zoom: 3
zoom: 3,
});
state.opts = {
subdistrict: 1, //返回下一级行政区
showbiz: false //最后一级返回街道信息
subdistrict: 1, //返回下一级行政区
showbiz: false, //最后一级返回街道信息
};
state.district = new AMap.DistrictSearch(state.opts);//注意：需要使用插件同步下发功能才能这样直接使用
state.district.search('中国', (status, result) => {
if (status == 'complete') {
getData(result.districtList[0], '', 100000);
state.district = new AMap.DistrictSearch(state.opts); //注意：需要使用插件同步下发功能才能这样直接使用
state.district.search("中国", (status, result) => {
if (status == "complete") {
getData(result.districtList[0], "", 100000);
}
});
}, 5000)
}, 5000);
});
function goBack () {
function goBack() {
state.isShowGoBack = false;
loading.value = true;
state.district.search('中国', (status, result) => {
if (status == 'complete') {
getData(result.districtList[0], '', 100000);
state.district.search("中国", (status, result) => {
if (status == "complete") {
getData(result.districtList[0], "", 100000);
snapTree.value = treeData;
}
});
}
function echartsMapClick (params) {//地图点击事件
if (params.data.cityCode == '710000') {
function echartsMapClick(params) {
//地图点击事件
if (params.data.cityCode == "710000") {
return;
}
if (params.data.level == 'district') {
if (params.data.level == "district") {
return;
}
if (params.data.level == 'street') return;//此处的params.data为state.mapData里的数据
if (params.data.level == "street") return; //此处的params.data为state.mapData里的数据
let snap = searchRegionData(params.data.cityCode);
snapTree.value = {}
snapTree.value = {};
if (snap) {
snapTree.value = snap['children']
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.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') {
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函数在前面已经定义过了
getData(result.districtList[0], params.data.level, state.cityCode); //这个getData函数在前面已经定义过了
}
});
}
function getData (data, level, adcode) {//处理获取出来的边界数据
function getData(data, level, adcode) {
//处理获取出来的边界数据
var subList = data.districtList;
if (subList) {
var curlevel = subList[0].level;
if (curlevel === 'street') {//为了配合echarts地图区县名称显示正常，这边街道级别数据需要特殊处理
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]);
mapJson["features"] = [].concat(mapJsonList[i]);
}
}
state.mapData = [];
let item = searchRegionData(cityCode)
let item = searchRegionData(cityCode);
if (item) {
console.log('1 searchRegionData(cityCode)', item);
console.log("1 searchRegionData(cityCode)", item);
}
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
state.mapData.push({ name: state.cityName, value: item ? item.count : 0, level: curlevel });
state.mapData.push({
name: state.cityName,
value: item ? item.count : 0,
level: curlevel,
});
loadMap(state.cityName, mapJson);
state.geoJsonData = mapJson;
return;
@ -250,33 +325,31 @@ function getData (data, level, adcode) {//处理获取出来的边界数据
var name = subList[i].name;
var cityCode = subList[i].adcode;
//这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
let item = searchRegionData(cityCode)
let item = searchRegionData(cityCode);
if (item) {
console.log('2 searchRegionData(cityCode)', item);
console.log("2 searchRegionData(cityCode)", item);
}
state.mapData.push({
name: name,
value: item ? item.count : 0,
cityCode: cityCode,
level: curlevel
level: curlevel,
});
}
loadMapData(adcode);
}
}
function loadMapData (areaCode) {
AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
function loadMapData(areaCode) {
AMapUI.loadUI(["geo/DistrictExplorer"], (DistrictExplorer) => {
//创建一个实例
var districtExplorer = window.districtExplorer = new DistrictExplorer({
var districtExplorer = (window.districtExplorer = new DistrictExplorer({
eventSupport: true, //打开事件支持
map: state.map
});
map: state.map,
}));
districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {
if (error) {
console.error(error);
return;
@ -284,91 +357,103 @@ function loadMapData (areaCode) {
let mapJson = {};
//特别注意这里哦，如果查看过正常的geojson文件，都会发现，文件都是以features 字段开头的，所以这里要记得加上
mapJson.features = areaNode.getSubFeatures();
console.log("------------------");
for (var i = 0; i < mapJson.features.length; i++) {
if (
mapJson.features[i].properties.adcode == 810000 ||
mapJson.features[i].properties.adcode == 820000
) {
mapJson.features.splice(i, 1); // 删除下标为i 的元素，i开始只删除一个就它自己了
i--; // 删除一个元素后数组长度减一了
}
}
console.log("------------------");
loadMap(state.cityName, mapJson);
});
});
}
function loadMap (mapName, data) {
function loadMap(mapName, data) {
if (data) {
echarts.registerMap(mapName, data);//把geoJson数据注入echarts
echarts.registerMap(mapName, data); //把geoJson数据注入echarts
//配置echarts的option
var option = {
visualMap: {
type: 'piecewise',
left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
type: "piecewise",
left: "center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
bottom: "30",
orient: "horizontal", //图例排列方向
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' },
{ 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',
color: "#fff",
},
visibility: 'off',
visibility: "off",
},
tooltip: {
//提示框信息
trigger: 'item',
formatter: '{b}\n{c}个',
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: '#666666',
borderWidth: 0.5,
label: {
show: true,
textStyle: {
color: "#333333",
}
}
},
emphasis: {
areaColor: "rgb(38, 219, 11)",
borderColor: '#666666',
areaStyle: {
color: '#333333'
},
label: {
show: true,
textStyle: {
color: "#333333"
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: "#666666",
borderWidth: 0.5,
label: {
show: true,
textStyle: {
color: "#333333",
},
},
// formatter: function (value) { //标签的格式化工具。
// return value.name + '：' + value.value; // 范围标签显示内容。
// }
}
}
},
emphasis: {
areaColor: "rgb(38, 219, 11)",
borderColor: "#666666",
areaStyle: {
color: "#333333",
},
label: {
show: true,
textStyle: {
color: "#333333",
},
// formatter: function (value) { //标签的格式化工具。
// return value.name + '：' + value.value; // 范围标签显示内容。
// }
},
},
},
data: state.mapData, //这个data里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
},
data: state.mapData, //这个data里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
}]
],
};
state.echartsMap.setOption(option);
loading.value = false;
}
}
</script>
<style lang="scss" scoped>
@ -449,15 +534,14 @@ function loadMap (mapName, data) {
border-right: 1px solid #0054ff;
text-align: center;
line-height: 42px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.b {
text-align: center;
line-height: 42px;
width: 90px;
}
}
</style>

66
src/views/website/index/comp/index8.vue
View File

@ -5,52 +5,48 @@
<div class="tit">全国服务站点</div>
<div class="content">
<div>
<div class="item">
<div>安徽</div>
<p>
<a>合肥</a>
<div
class="item"
v-for="(value, key, index) in state.platformInfo"
:key="index"
>
<div>{{ value.name }}</div>
<p v-for="item in value.children" :key="item.code">
<a :href="item.domain" target="_blank" v-if="item.domain">{{
item.name
}}</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 class="more" v-if="state.platformInfo.length > 15">查看更多</div>
</div>
</div>
<webFooter style="width: 100%;"></webFooter>
<webFooter style="width: 100%"></webFooter>
</div>
</template>
<script setup lang="ts">
import request from "@/utils/request";
import { onMounted, reactive } from "vue";
import webFooter from "../../../../components/webFooter/index.vue";
import webFooter from "@/components/webFooter/index.vue";
function platform() {
return request({
url: "/v1/sys/platform",
});
}
const state = reactive({
platformInfo: {},
});
function getInfo() {
platform().then((res) => {
console.log(res);
state.platformInfo = res.data;
});
}
getInfo();
</script>
<style lang="scss" scoped>
@ -129,7 +125,7 @@ import webFooter from "../../../../components/webFooter/index.vue";
user-select: none;
cursor: pointer;
&:hover {
opacity: .7;
opacity: 0.7;
}
}
}

20
src/views/website/index/index.vue
View File

@ -125,16 +125,16 @@ let state = reactive({
},
showBox: 0,
boxList: [
// {
// comp: index1,
// zIndex: 1,
// title: "index1",
// },
// {
// comp: index2,
// zIndex: 1,
// title: "index2",
// },
{
comp: index1,
zIndex: 1,
title: "index1",
},
{
comp: index2,
zIndex: 1,
title: "index2",
},
{
comp: index3,
zIndex: 1,