|
|
@@ -2,7 +2,11 @@
|
|
|
<div class="home">
|
|
|
<Header v-if="!isMobile"></Header>
|
|
|
<Map />
|
|
|
-
|
|
|
+ <!-- <div style="position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ z-index: 999;">
|
|
|
+ <input type="file" @change="handleFileUpload" />
|
|
|
+ </div> -->
|
|
|
<div :class="{ 'yjdp-btn': true, isActive: yjdpShow }" @click="addyjdp" v-if="!isMobile">沿街店铺</div>
|
|
|
<div :class="{ 'kzdp-btn': true, isActive: kzdpShow }" @click="addkzdp" v-if="!isMobile">空置店铺</div>
|
|
|
<div class="yhfk-btn" @click="openYHFK" v-if="!isMobile">用户反馈</div>
|
|
|
@@ -109,7 +113,7 @@
|
|
|
|
|
|
<KDYJS ref="kdyjs" :message="parentMessage"></KDYJS>
|
|
|
|
|
|
- <div class="tips">试运行阶段服务范围：夏阳街道、盈浦街道</div>
|
|
|
+ <div class="tips">试运行阶段服务范围：夏阳街道、盈浦街道、赵巷镇</div>
|
|
|
<div class="yjdpInfoDialog" v-show="yjdpInfoDialogShow">
|
|
|
<div class="close" @click="closeYJDP">×</div>
|
|
|
<div class="content" v-if="nowPoint != null">
|
|
|
@@ -300,6 +304,8 @@ import UTIL from '@/utils/util'
|
|
|
|
|
|
import login from "@/api/login";
|
|
|
|
|
|
+import * as XLSX from 'xlsx';
|
|
|
+
|
|
|
export default {
|
|
|
name: "HomeView",
|
|
|
components: {
|
|
|
@@ -363,6 +369,8 @@ export default {
|
|
|
layerList: arr,
|
|
|
wmslayer: {},
|
|
|
|
|
|
+ curFileName:'沿街店铺-20260317.geojson',
|
|
|
+
|
|
|
heatmapPanelShow: false,
|
|
|
heatmapList: arrHeatmap,
|
|
|
heatmapLayer: {},
|
|
|
@@ -448,7 +456,7 @@ export default {
|
|
|
// }
|
|
|
// 处理接收到的消息数据
|
|
|
const data = event.data;
|
|
|
- if (data != null) {
|
|
|
+ if (data != null && data.knowledge_ids != undefined) {
|
|
|
if (data.knowledge_ids.length != 0) {
|
|
|
let pointArr = JSON.parse(data.knowledge_ids)["推荐清单"];
|
|
|
// console.log(pointArr);
|
|
|
@@ -685,51 +693,92 @@ export default {
|
|
|
return v.toString(16);
|
|
|
});
|
|
|
},
|
|
|
+ handleFileUpload(event) {
|
|
|
+ const files = event.target.files; // 获取文件列表
|
|
|
+ if (files.length === 0) return; // 确保有文件被选择
|
|
|
+ const file = files[0]; // 获取第一个文件（通常只有一个文件）
|
|
|
+ const reader = new FileReader();
|
|
|
+ reader.onload = (e) => {
|
|
|
+ const data = new Uint8Array(e.target.result);
|
|
|
+ const workbook = XLSX.read(data, { type: 'array' }); // 读取Excel文件
|
|
|
+ const sheetName = workbook.SheetNames[0]; // 获取第一个工作表的名称
|
|
|
+ const worksheet = workbook.Sheets[sheetName]; // 获取工作表数据
|
|
|
+ const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); // 转换为JSON数组，header: 1 表示第一行是标题行
|
|
|
+ this.processExcelData(jsonData); // 处理或显示数据
|
|
|
+ };
|
|
|
+ reader.readAsArrayBuffer(file); // 读取文件内容为ArrayBuffer
|
|
|
+ },
|
|
|
+ processExcelData(data) {
|
|
|
+ // 在这里处理你的数据，例如转换成自定义的JSON格式
|
|
|
+ const headers = data[0]; // 假设第一行是标题行
|
|
|
+ const rows = data.slice(1); // 剩下的行是数据行
|
|
|
+ let arr = [];
|
|
|
+ const customJson = rows.map(row => {
|
|
|
+ const obj = {};
|
|
|
+ headers.forEach((header, index) => {
|
|
|
+ obj[header] = row[index]; // 将数据转换为键值对形式，键为列标题，值为单元格内容
|
|
|
+ });
|
|
|
+ let center = [parseFloat(obj['经度']),parseFloat(obj['纬度'])]
|
|
|
+ let str = {"geometry":{"coordinates":center,"type":"Point"},"properties":{"街镇":"赵巷镇","道路名称":obj['道路名称'],"地址":obj['地址'],"uuid":this.generateUUID(),"店铺名称":obj['店铺名称'],"店铺类型":obj['大类']},"type":"Feature"}
|
|
|
+ arr.push(str)
|
|
|
+ return obj; // 返回一个对象，代表一行数据的JSON表示
|
|
|
+ });
|
|
|
+ console.log(arr); // 输出或使用转换后的JSON数据
|
|
|
+ console.log(customJson); // 输出或使用转换后的JSON数据
|
|
|
+ },
|
|
|
+
|
|
|
// 沿街店铺
|
|
|
addyjdp() {
|
|
|
let that = this;
|
|
|
this.yjdpShow = !this.yjdpShow
|
|
|
if (this.yjdpShow) {
|
|
|
-
|
|
|
- fetch("./static/data/test.geojson")
|
|
|
- .then(response => response.json())
|
|
|
- .then(function (result) {
|
|
|
- console.log(result);
|
|
|
- let feat = {type: 'FeatureCollection', features: []}
|
|
|
- let feat2 = {type: 'FeatureCollection', features: []}
|
|
|
- let feat3 = {type: 'FeatureCollection', features: []}
|
|
|
- let arr = []
|
|
|
- result.features.forEach(e => {
|
|
|
- let fet = {geometry:{},properties:{},type: "Feature"}
|
|
|
- fet.geometry = e.geometry;
|
|
|
- let prop = {}
|
|
|
- prop["街镇"]=e.properties.street;
|
|
|
- prop["道路名称"]=e.properties.road;
|
|
|
- prop["地址"]=e.properties.address;
|
|
|
- prop["uuid"]=that.generateUUID();
|
|
|
- // prop["店铺类型"]=e.properties.type == '#N/A' ? e.properties["大类"] : e.properties.type;
|
|
|
- prop["店铺名称"]=e.properties.name;
|
|
|
- // prop["大类"]=e.properties["大类"];
|
|
|
- prop["店铺类型"] =e.properties["大类"].split("、")[0];
|
|
|
- arr.push(e.properties["大类"].split("、")[0])
|
|
|
+ // fetch("./static/data/test.geojson")
|
|
|
+ // .then(response => response.json())
|
|
|
+ // .then(function (result) {
|
|
|
+ // console.log(result);
|
|
|
+ // let feat = {type: 'FeatureCollection', features: []}
|
|
|
+ // let feat2 = {type: 'FeatureCollection', features: []}
|
|
|
+ // let feat3 = {type: 'FeatureCollection', features: []}
|
|
|
+ // let arr = []
|
|
|
+ // result.features.forEach(e => {
|
|
|
+ // let fet = {geometry:{},properties:{},type: "Feature"}
|
|
|
+ // fet.geometry = e.geometry;
|
|
|
+ // let prop = {}
|
|
|
+ // prop["街镇"]=e.properties.street;
|
|
|
+ // prop["道路名称"]=e.properties.road;
|
|
|
+ // prop["地址"]=e.properties.address;
|
|
|
+ // prop["uuid"]=that.generateUUID();
|
|
|
+ // // prop["店铺类型"]=e.properties.type == '#N/A' ? e.properties["大类"] : e.properties.type;
|
|
|
+ // prop["店铺名称"]=e.properties.name;
|
|
|
+ // // prop["大类"]=e.properties["大类"];
|
|
|
+ // prop["店铺类型"] =e.properties["大类"].split("、")[0];
|
|
|
+ // arr.push(e.properties["大类"].split("、")[0])
|
|
|
|
|
|
- fet.properties= prop;
|
|
|
- feat.features.push(fet);
|
|
|
- });
|
|
|
- const uniqueArray = [...new Set(arr)]
|
|
|
- console.log(uniqueArray);
|
|
|
- console.log(feat);
|
|
|
- }
|
|
|
- )
|
|
|
+ // fet.properties= prop;
|
|
|
+ // feat.features.push(fet);
|
|
|
+ // });
|
|
|
+ // const uniqueArray = [...new Set(arr)]
|
|
|
+ // console.log(uniqueArray);
|
|
|
+ // console.log(feat);
|
|
|
+ // }
|
|
|
+ // )
|
|
|
|
|
|
// 添加
|
|
|
- fetch("./static/data/沿街店铺-20251029.geojson")
|
|
|
+ fetch("./static/data/"+this.curFileName)
|
|
|
.then(response => response.json())
|
|
|
.then(function (result) {
|
|
|
// 过滤空店铺数据
|
|
|
result=result.features.filter(person =>
|
|
|
person.properties['店铺名称'] != '空'
|
|
|
+ // (person.properties['店铺名称'] != '空' && person.properties['街镇'] != '夏阳街道' && person.properties['街镇'] != '盈浦街道')
|
|
|
);
|
|
|
+ // let arr = []
|
|
|
+ // result.forEach(element => {
|
|
|
+ // arr.push(element.properties['街镇'])
|
|
|
+ // });
|
|
|
+ // const uniqueArray = [...new Set(arr)]
|
|
|
+ // console.log(uniqueArray);
|
|
|
+
|
|
|
that.pointYJDPArr = result.map(function (pointInfo) {
|
|
|
return viewer.entities.add(new SkyScenery.Entity({
|
|
|
position: SkyScenery.Cartesian3.fromDegrees(pointInfo.geometry.coordinates[0], pointInfo.geometry.coordinates[1]),
|
|
|
@@ -769,13 +818,14 @@ export default {
|
|
|
this.kzdpShow = !this.kzdpShow
|
|
|
if (this.kzdpShow) {
|
|
|
// 添加
|
|
|
- fetch("./static/data/沿街店铺-20251029.geojson")
|
|
|
+ fetch("./static/data/"+this.curFileName)
|
|
|
.then(response => response.json())
|
|
|
.then(function (result) {
|
|
|
// 过滤空店铺数据
|
|
|
result=result.features.filter(person =>
|
|
|
person.properties['店铺名称'] == '空'
|
|
|
);
|
|
|
+ console.log('[ ddd ] >', result)
|
|
|
that.pointKZDPArr = result.map(function (pointInfo) {
|
|
|
return viewer.entities.add(new SkyScenery.Entity({
|
|
|
position: SkyScenery.Cartesian3.fromDegrees(pointInfo.geometry.coordinates[0], pointInfo.geometry.coordinates[1], 0.5),
|
|
|
@@ -986,8 +1036,10 @@ export default {
|
|
|
layers: params.layers,
|
|
|
parameters: {
|
|
|
TRANSPARENT: true,
|
|
|
- format: "image/png"
|
|
|
- }
|
|
|
+ format: "image/png",
|
|
|
+ srs:'EPSG:3857'
|
|
|
+ },
|
|
|
+ tilingScheme: new SkyScenery.WebMercatorTilingScheme()
|
|
|
})
|
|
|
)
|
|
|
this.wmslayer[params.name] = layer;
|
|
|
@@ -1001,7 +1053,7 @@ export default {
|
|
|
let that = this;
|
|
|
if (judge) {
|
|
|
// fetch(params.url)
|
|
|
- fetch("./static/data/沿街店铺-20251029.geojson")
|
|
|
+ fetch("./static/data/"+this.curFileName)
|
|
|
.then(response => response.json())
|
|
|
.then(function (result) {
|
|
|
// 过滤空店铺数据
|
mork