fixed
This commit is contained in:
@ -20,7 +20,7 @@
|
||||
<div class="b">暂无</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightBox">
|
||||
<!-- <div class="rightBox">
|
||||
<div class="head">
|
||||
<div class="a">领域</div>
|
||||
<div class="b">需求数量</div>
|
||||
@ -36,92 +36,65 @@
|
||||
<div class="a">暂无</div>
|
||||
<div class="b">暂无</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineComponent, getCurrentInstance, onMounted, reactive } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import {
|
||||
countDemandByProvince,
|
||||
countDemandByCity,
|
||||
countDemandByArea,
|
||||
} from "@/api/website/home/index";
|
||||
// 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({});
|
||||
let treeData = [];
|
||||
const snapTree = shallowRef([]);
|
||||
|
||||
function searchRegionData(code) {
|
||||
// console.log(code, treeData,'searchRegionData')
|
||||
return deepFindTree(code, treeData);
|
||||
}
|
||||
const searchRegionData = async (code, level) => {
|
||||
if (level == "province") {
|
||||
const provcode = code.substring(0, 2) + "0000";
|
||||
let data = {};
|
||||
if (
|
||||
snapTree.value.length &&
|
||||
snapTree.value[0].code.substring(0, 2) == code.substring(0, 2) &&
|
||||
snapTree.value[0].code.substring(2, 4) != code.substring(2, 4)
|
||||
) {
|
||||
data = snapTree.value;
|
||||
} else {
|
||||
const resp = await countDemandByCity(provcode);
|
||||
snapTree.value = resp.data;
|
||||
data = resp.data;
|
||||
}
|
||||
return data.find((item) => item.code == code) || false;
|
||||
} else if (level == "city") {
|
||||
const ctcode = code.substring(0, 4) + "00";
|
||||
let data = {};
|
||||
if (
|
||||
snapTree.value.length &&
|
||||
snapTree.value[0].code.substring(0, 4) == code.substring(0, 4) &&
|
||||
snapTree.value[0].code.substring(4, 6) != code.substring(4, 6)
|
||||
) {
|
||||
data = snapTree.value;
|
||||
} else {
|
||||
const resp = await countDemandByArea(ctcode);
|
||||
snapTree.value = resp.data;
|
||||
data = resp.data;
|
||||
}
|
||||
return data.find((item) => item.code == code) || false;
|
||||
} else {
|
||||
if (treeData.length) {
|
||||
return treeData.find((item) => item.code == code) || false;
|
||||
} else {
|
||||
const { data } = await countDemandByProvince();
|
||||
return data.find((item) => item.code == code) || false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function deepFindTree(code, tree) {
|
||||
let snap = false;
|
||||
@ -201,13 +174,11 @@ const state = reactive({
|
||||
onMounted(() => {
|
||||
// 数据接口
|
||||
const res = { code: 200, message: "ok", data: {} };
|
||||
// demand().then((res) => {
|
||||
// if (200 == res.code) {
|
||||
treeData = res.data;
|
||||
snapTree.value = res.data;
|
||||
loading.value = false;
|
||||
// }
|
||||
// });
|
||||
countDemandByProvince().then((res) => {
|
||||
treeData = res.data;
|
||||
snapTree.value = res.data;
|
||||
loading.value = false;
|
||||
});
|
||||
// let echartsDomList = document.querySelectorAll('.echartsDom');
|
||||
// // 兼容echarts
|
||||
// echartsDomList.forEach(element => {
|
||||
@ -249,15 +220,15 @@ onMounted(() => {
|
||||
function goBack() {
|
||||
state.isShowGoBack = false;
|
||||
loading.value = true;
|
||||
state.district.search("中国", (status, result) => {
|
||||
state.district.search("中国", async (status, result) => {
|
||||
if (status == "complete") {
|
||||
getData(result.districtList[0], "", 100000);
|
||||
await getData(result.districtList[0], "", 100000);
|
||||
snapTree.value = treeData;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function echartsMapClick(params) {
|
||||
async function echartsMapClick(params) {
|
||||
//地图点击事件
|
||||
if (params.data.cityCode == "710000") {
|
||||
return;
|
||||
@ -267,11 +238,11 @@ function echartsMapClick(params) {
|
||||
}
|
||||
if (params.data.level == "street") return; //此处的params.data为state.mapData里的数据
|
||||
|
||||
let snap = searchRegionData(params.data.cityCode);
|
||||
snapTree.value = {};
|
||||
if (snap) {
|
||||
snapTree.value = snap["children"];
|
||||
}
|
||||
await searchRegionData(params.data.cityCode, params.data.level);
|
||||
// snapTree.value = {};
|
||||
// if (snap) {
|
||||
// snapTree.value = snap["children"];
|
||||
// }
|
||||
state.cityCode = params.data.cityCode;
|
||||
state.cityName = params.data.name;
|
||||
state.district.setLevel(params.data.level); //行政区级别
|
||||
@ -291,7 +262,7 @@ function echartsMapClick(params) {
|
||||
});
|
||||
}
|
||||
|
||||
function getData(data, level, adcode) {
|
||||
async function getData(data, level, adcode) {
|
||||
//处理获取出来的边界数据
|
||||
var subList = data.districtList;
|
||||
if (subList) {
|
||||
@ -306,7 +277,7 @@ function getData(data, level, adcode) {
|
||||
}
|
||||
}
|
||||
state.mapData = [];
|
||||
let item = searchRegionData(cityCode);
|
||||
let item = await searchRegionData(cityCode, level);
|
||||
if (item) {
|
||||
console.log("1 searchRegionData(cityCode)", item);
|
||||
}
|
||||
@ -327,7 +298,7 @@ function getData(data, level, adcode) {
|
||||
var name = subList[i].name;
|
||||
var cityCode = subList[i].adcode;
|
||||
//这个mapData里包含每个区域的code、名称、对应的等级,实现第三步功能时能用上
|
||||
let item = searchRegionData(cityCode);
|
||||
let item = await searchRegionData(cityCode, level);
|
||||
|
||||
if (item) {
|
||||
console.log("2 searchRegionData(cityCode)", item);
|
||||
|
Reference in New Issue
Block a user