2120 lines
66 KiB
Vue
2120 lines
66 KiB
Vue
<script setup lang="ts">
|
||
import "./index.less";
|
||
// @ts-ignore
|
||
import anhuiLine from "./component/anhuiLine";
|
||
// @ts-ignore
|
||
import yunanLine from "./component/yunanLine";
|
||
import { HeatmapLayer, LineLayer, Marker, PointLayer, Scene } from "@antv/l7";
|
||
import { GaodeMap } from "@antv/l7-maps";
|
||
import { nextTick, onMounted, reactive, ref, watch } from "vue";
|
||
import {
|
||
getFieldEnumTree,
|
||
getFieldGetFieEnumList,
|
||
handleGetBaiDuTrafficInfo,
|
||
handleGetDecryptString,
|
||
handleGetGDNearServiceList,
|
||
handleGetMapConfigByProvinceCode,
|
||
handleGetMonthlySPINCAnalysis,
|
||
handleGetNearServiceList,
|
||
handleGetPeriodWarningList,
|
||
handleGetProvinceVehicleTreeList,
|
||
handleGetServerpartList,
|
||
handleGetTransactionDetailList,
|
||
} from "./service";
|
||
import { handlegetServerConnec } from "../newService";
|
||
import { ElLoading, ElMessage } from "element-plus";
|
||
// @ts-ignore
|
||
import RobotDialogueBox from "./component/RobotDialogueBox.vue";
|
||
// @ts-ignore
|
||
import RightSearchBox from "./component/RightSearchBox.vue";
|
||
// @ts-ignore
|
||
import RightDetail from "./component/rightDetail.vue";
|
||
// @ts-ignore
|
||
import detailText from "./component/detailText";
|
||
// @ts-ignore
|
||
import RealBox from "./component/realBox.vue";
|
||
// @ts-ignore
|
||
import RevenueRate from "./component/RevenueRate.vue";
|
||
// @ts-ignore
|
||
import BusyRanking from "./component/BusyRanking.vue";
|
||
|
||
import moment from "moment";
|
||
import { useRoute } from "vue-router";
|
||
import {
|
||
formatNumber,
|
||
formatNumberData,
|
||
formatNumberTo,
|
||
parseThousandSeparatedNumber,
|
||
} from "../../options/serveice";
|
||
|
||
// 配色方案一
|
||
let colorList1 = [
|
||
"#4F83FA",
|
||
"#A39BFF",
|
||
"#63B6FC",
|
||
"#88DFB2",
|
||
"#88C3BF",
|
||
"#d9dcf3",
|
||
];
|
||
// 配色方案二
|
||
let colorList2 = [
|
||
"#627FFF",
|
||
"#F6976F",
|
||
"#FFDC84",
|
||
"#63B6FC",
|
||
"#73D6A3",
|
||
"#B4E6E3",
|
||
];
|
||
// 每个省份的 地图默认中心点位置设置
|
||
let mapCenter: any = {
|
||
"340000": [117.455467, 31.856928], // 安徽
|
||
"510000": [104.07, 30.67], // 四川
|
||
"520000": [106.71, 26.58], // 贵州
|
||
"530000": [102.8329, 24.88], // 云南
|
||
};
|
||
|
||
// 地图实例
|
||
const scene = ref<any>();
|
||
// 对话框的实例
|
||
const RobotDialogueBoxRef = ref();
|
||
// 右侧的选择实例
|
||
const RightSearchBoxRef = ref();
|
||
// 右侧详情抽屉
|
||
const RightDetailRef = ref();
|
||
// 顶部实时数据的组件
|
||
const RealBoxRef = ref();
|
||
// 营收区域的组件实例
|
||
const revenueRateRef = ref();
|
||
// 繁忙度排名的实例
|
||
const BusyRankingRef = ref();
|
||
// 悬浮框实例
|
||
const hoverPoint = ref<any>();
|
||
// 所有服务区的数据
|
||
let defaultServerPartList = reactive<any>([]);
|
||
// 服务区类型的枚举
|
||
let ServerpartTypeObj = reactive<any>({});
|
||
// 判断是否有加载效果
|
||
const isShowLoading = ref<boolean>(false);
|
||
// 当前选中的服务区
|
||
const currentServerPartDetail = ref<any>();
|
||
// 搜索选中的服务区id
|
||
let searchSelectServerPartId = reactive<any>([]);
|
||
// 当前右侧选中的查询类型
|
||
let nowSelectId = ref<string>("");
|
||
// 全部服务区的id集合
|
||
let allServerPartIdList = reactive<any>([]);
|
||
// 是否显示右侧的服务区详情
|
||
let showRightDetail = ref<boolean>(false);
|
||
// 关于省份的解密 即一些相关数据的带入
|
||
let baseInfoObj = ref<any>();
|
||
// 实时钱的数据对象
|
||
let realMoney = reactive<any>({});
|
||
// 片区对应的颜色
|
||
let SPREGIONTYPECOLOR = ref<any>();
|
||
// 机器人是否显示
|
||
let isShowAi = ref<boolean>(false);
|
||
// 服务区详情是否显示了
|
||
let isShowDetail = ref<boolean>(false);
|
||
// 显示实时营收的组件
|
||
let isShowRealData = ref<boolean>(false);
|
||
// 不同片区的标点颜色数组
|
||
let SPREGIONTYPECOLORList = reactive<any>([]);
|
||
// 实时经营数据的列表
|
||
let realRevenueList = reactive<any>([]);
|
||
// 当前到了第几批第五个
|
||
let nowFifthIndex = ref<number>(0);
|
||
// 地图的实时营收悬浮框
|
||
let mapTimer: any;
|
||
|
||
const route = useRoute();
|
||
console.log("route", route);
|
||
const pageType = ref(route.params.id); // 获取查询参数 id
|
||
// if (route.params.id === "16684D3D52B39939") {
|
||
// baseInfoObj.value.ProvinceCode = "340000";
|
||
// } else if (route.params.id === "FACB05FA9FFFC126") {
|
||
// baseInfoObj.value.ProvinceCode = "530000";
|
||
// }
|
||
// console.log("pageType", pageType);
|
||
|
||
onMounted(async () => {
|
||
const loadingInstance = ElLoading.service({
|
||
fullscreen: true,
|
||
background: "#00000080",
|
||
text: "数据加载中...",
|
||
});
|
||
// 先解密地址栏的内容
|
||
const data = await handleGetMapConfigByProvinceCode({
|
||
ProvinceCode: pageType.value,
|
||
});
|
||
baseInfoObj.value = data;
|
||
localStorage.setItem("baseInfoObj", JSON.stringify(data));
|
||
|
||
scene.value = new Scene({
|
||
id: "map",
|
||
map: new GaodeMap({
|
||
pitch: 0,
|
||
mapStyle: "amap://styles/dark",
|
||
center: mapCenter[baseInfoObj.value.ProvinceCode],
|
||
// baseInfoObj.value.ProvinceCode === "340000"
|
||
// ? [117.455467, 31.856928]
|
||
// : baseInfoObj.value.ProvinceCode === "530000"
|
||
// ? [102.8329, 24.88]
|
||
// : [117.455467, 31.856928],
|
||
zoom: 6,
|
||
minZoom: 5.5,
|
||
token: "edb93fe4f1b3d313128b82082c5b3877",
|
||
mapConfig: {
|
||
logoVisible: false,
|
||
},
|
||
}),
|
||
});
|
||
|
||
// 请求枚举
|
||
await handleGetEnumeration();
|
||
console.log("ServerpartTypeObj", ServerpartTypeObj);
|
||
|
||
// 请求到所有的服务区
|
||
await handleGetAllService();
|
||
// 给服务区标上点
|
||
handleAllServiceMarkedPoint();
|
||
// 标出安徽省的边界
|
||
handleGetAnHuiBoundary();
|
||
// 服务区实时数据
|
||
// handleGetRealServiceList();
|
||
|
||
hoverPoint.value = handlePointHover();
|
||
|
||
loadingInstance.close();
|
||
});
|
||
|
||
// 几个小方框的数据 一起调用的方法
|
||
const handleSmallBoxData = async () => {
|
||
revenueRateRef.value.handleGetData();
|
||
await BusyRankingRef.value.handleGetBusyRank();
|
||
};
|
||
|
||
// 标出安徽省的边界
|
||
const handleGetAnHuiBoundary = () => {
|
||
const blurLine = new LineLayer();
|
||
blurLine.name = "blurLine";
|
||
// 边界线数据
|
||
let provinceObj: any = anhuiLine;
|
||
let list: any = provinceObj[baseInfoObj.value.ProvinceCode];
|
||
console.log("handleGetAnHuiBoundary", list);
|
||
// let list: any =
|
||
// baseInfoObj.value.ProvinceCode === "340000"
|
||
// ? anhuiLine
|
||
// : baseInfoObj.value.ProvinceCode === "530000"
|
||
// ? yunanLine
|
||
// : [];
|
||
blurLine.source(list).size(1).style({
|
||
opacity: 0.6,
|
||
sourceColor: "#b6cad7",
|
||
targetColor: "#b6cad7",
|
||
linearDir: "horizontal",
|
||
});
|
||
scene.value.addLayer(blurLine);
|
||
};
|
||
|
||
// 请求拿到所有服务区数据
|
||
const handleGetAllService = async () => {
|
||
const req: any = {
|
||
Province_Code: baseInfoObj.value.ProvinceCode || "340000",
|
||
ShowWeather: true, // 显示天气
|
||
};
|
||
const data = await handleGetServerpartList(req);
|
||
let str: string = "";
|
||
console.log("data312312321321321", data);
|
||
if (data && data.length > 0) {
|
||
let res: any = [];
|
||
let allId: any = [];
|
||
let SPREGIONTYPETYPELIST: any = {};
|
||
// 属性值为具体的颜色
|
||
let SPREGIONTYPETYPEObj: any = {};
|
||
// 片区名称对应的 颜色数组 用于放在中间底部的
|
||
let SPREGIONTYPECOLORLIST: any = [];
|
||
let typeID: number = 0;
|
||
data.forEach((item: any) => {
|
||
if (item.SPREGIONTYPE_ID && item.SPREGIONTYPE_ID !== 89) {
|
||
if (
|
||
SPREGIONTYPETYPELIST[item.SPREGIONTYPE_ID] ||
|
||
SPREGIONTYPETYPELIST[item.SPREGIONTYPE_ID] === 0
|
||
) {
|
||
item.SPREGIONTYPETYPE = SPREGIONTYPETYPELIST[item.SPREGIONTYPE_ID];
|
||
} else {
|
||
SPREGIONTYPETYPELIST[item.SPREGIONTYPE_ID] = typeID;
|
||
item.SPREGIONTYPETYPE = typeID;
|
||
SPREGIONTYPETYPEObj[item.SPREGIONTYPE_ID] = colorList1[typeID];
|
||
SPREGIONTYPECOLORLIST.push({
|
||
label: item.SPREGIONTYPE_NAME,
|
||
value: colorList1[typeID],
|
||
});
|
||
typeID += 1;
|
||
}
|
||
|
||
if (item.SPREGIONTYPE_ID !== 89 && item.SPREGIONTYPE_ID) {
|
||
res.push(item);
|
||
allId.push(item.SERVERPART_ID.toString());
|
||
}
|
||
}
|
||
if (str) {
|
||
str += `
|
||
${item.SERVERPART_NAME} ${item.SERVERPART_ID}`;
|
||
} else {
|
||
str = `${item.SERVERPART_NAME} ${item.SERVERPART_ID}`;
|
||
}
|
||
});
|
||
defaultServerPartList = res;
|
||
allServerPartIdList = allId;
|
||
console.log("allId", allId.toString());
|
||
|
||
SPREGIONTYPECOLORList = SPREGIONTYPECOLORLIST;
|
||
SPREGIONTYPECOLOR.value = SPREGIONTYPETYPEObj;
|
||
}
|
||
return data;
|
||
};
|
||
|
||
// 给所有服务区标上圆点
|
||
const handleAllServiceMarkedPoint = async () => {
|
||
// 先判断有没有服务区 没有就去请求 有就直接拿
|
||
let list: any = [];
|
||
if (defaultServerPartList && defaultServerPartList.length > 0) {
|
||
list = defaultServerPartList;
|
||
} else {
|
||
list = await handleGetAllService();
|
||
}
|
||
|
||
// 标点
|
||
const pointLayer = new PointLayer({});
|
||
pointLayer.name = "pointLayer";
|
||
pointLayer.source(list, {
|
||
parser: {
|
||
type: "json",
|
||
x: "SERVERPART_X",
|
||
y: "SERVERPART_Y",
|
||
},
|
||
});
|
||
pointLayer.shape("circle");
|
||
pointLayer.size(8);
|
||
pointLayer.color("SPREGIONTYPETYPE", (value) => {
|
||
return colorList1[value];
|
||
// return Number(value || 0) === 65 ||
|
||
// Number(value || 0) === 45 ||
|
||
// Number(value || 0) === 47
|
||
// ? "#34B6B7"
|
||
// : "#CEF8D6";
|
||
});
|
||
pointLayer.style({
|
||
opacity: 0.6,
|
||
});
|
||
pointLayer.on("mousemove", (ev: any) => {
|
||
const detail: any = ev.feature;
|
||
console.log('detaildetaildetail', detail)
|
||
hoverPoint.value.style.top = `${ev.y + 5}px`;
|
||
hoverPoint.value.style.left = `${ev.x + 5}px`;
|
||
hoverPoint.value.style.display = "block";
|
||
hoverPoint.value.innerHTML = `<div>
|
||
<div>${detail?.SERVERPART_NAME || ""}${detail?.SERVERPART_TYPE
|
||
? `（${ServerpartTypeObj ? ServerpartTypeObj[detail?.SERVERPART_TYPE] : ""
|
||
}）`
|
||
: ""
|
||
}</div>
|
||
${
|
||
// 天气
|
||
nowSelectId.value && nowSelectId.value.indexOf("1") !== -1
|
||
? `
|
||
<div style="background-color: black; color: white; border-radius: 5px; font-size: 14px; border: none;box-shadow: none;">
|
||
<div>天气情况：</div>
|
||
<div>${"今天"}${detail.weatherModel.DAY_WEATHER}转${detail.weatherModel.NIGHT_WEATHER
|
||
}，气温${detail.weatherModel.NIGHT_AIR_TEMPERATURE}℃~${detail.weatherModel.DAY_AIR_TEMPERATURE
|
||
}℃</div>
|
||
<div>${"明天"}${detail.tmwWeatherModel.DAY_WEATHER}转${detail.tmwWeatherModel.NIGHT_WEATHER
|
||
}，气温${detail.tmwWeatherModel.NIGHT_AIR_TEMPERATURE}℃~${detail.tmwWeatherModel.DAY_AIR_TEMPERATURE
|
||
}℃</div>
|
||
</div>
|
||
`
|
||
: ``
|
||
}
|
||
${
|
||
// 路况
|
||
(nowSelectId.value && nowSelectId.value.indexOf("2") !== -1) ||
|
||
detail.roadConditions
|
||
? `
|
||
<div style="max-height: 250px;overflow-y: auto">
|
||
<div>实时路况（${moment().format("YY月DD日 HH点mm分")}）：</div>
|
||
<div>${detail?.roadConditions?.EXPRESSWAY_NAME
|
||
? detail?.roadConditions?.EXPRESSWAY_NAME + "："
|
||
: ""
|
||
}${detail?.roadConditions?.evaluation?.status === 1
|
||
? "双向畅通"
|
||
: detail?.roadConditions?.evaluation?.status === 2
|
||
? "双向缓行"
|
||
: detail?.roadConditions?.evaluation?.status === 3
|
||
? "双向拥堵"
|
||
: ""
|
||
}</div>
|
||
</div>
|
||
`
|
||
: ""
|
||
}
|
||
${
|
||
// 热力图
|
||
nowSelectId.value && nowSelectId.value.indexOf("3") !== -1
|
||
? `<div>${moment().format("YYYY年MM月")}对客销售累计：${formatNumber(
|
||
detail?.revenueData / 10000
|
||
)}万元</div>`
|
||
: ""
|
||
}
|
||
${
|
||
// 车辆归属地
|
||
nowSelectId.value &&
|
||
nowSelectId.value.indexOf("4") !== -1 &&
|
||
detail.provinceListTooltip &&
|
||
detail.provinceListTooltip.length > 0
|
||
? `<div>
|
||
${detail.provinceListTooltip
|
||
.map(
|
||
(item: any) =>
|
||
`<div>${moment(moment().startOf("y")).format(
|
||
"YYYY年MM月"
|
||
)}至${moment().format("YYYY年MM月")}${detail?.SERVERPART_NAME || ""
|
||
}总入区车流：${formatNumber(item.TotalCount || 0)}
|
||
${item.children?.length > 0
|
||
? `<div>${item.children
|
||
.map(
|
||
(subItem: any) =>
|
||
`<div>${subItem.ProvinceOrCityName
|
||
}：占比：${formatNumber(
|
||
(subItem.TotalCount / item.TotalCount) * 100
|
||
)}%， Top3：
|
||
${subItem.children && subItem.children.length > 0
|
||
? `<span>
|
||
${subItem.children
|
||
.map((thirdItem: any, thirdIndex: number) => {
|
||
return thirdItem.ProvinceOrCityName !== "其他"
|
||
? `${thirdItem.ProvinceOrCityName}、`
|
||
: "";
|
||
})
|
||
.join("")}
|
||
</span>`
|
||
: ""
|
||
}</div>`
|
||
)
|
||
.join("")}
|
||
</div>`
|
||
: ""
|
||
}
|
||
</div>`
|
||
)
|
||
.join("")}
|
||
</div>`
|
||
: ""
|
||
}
|
||
${
|
||
// 经营业态
|
||
nowSelectId.value && nowSelectId.value.indexOf("5") !== -1
|
||
? `<div>
|
||
${detail?.tradeType || ""}${detail?.shopName ? `：${detail?.shopName}` : ""
|
||
}
|
||
</div>`
|
||
: ""
|
||
}
|
||
${
|
||
// 预警类型
|
||
nowSelectId.value && nowSelectId.value.indexOf("6") !== -1
|
||
? `<div>
|
||
${detail?.waringText || ""}
|
||
</div>`
|
||
: ""
|
||
}
|
||
${
|
||
// 服务区繁忙程度
|
||
nowSelectId.value && nowSelectId.value.indexOf("8") !== -1
|
||
? `<div>对客销售：${detail.AVR_TICKET > 30
|
||
? "繁忙"
|
||
: detail.AVR_TICKET > 15 && detail.AVR_TICKET < 30
|
||
? "良好"
|
||
: "空闲"
|
||
}
|
||
</div>`
|
||
: ""
|
||
}
|
||
|
||
</div>`;
|
||
});
|
||
|
||
// 鼠标移出
|
||
pointLayer.on("mouseout", (ev: any) => {
|
||
hoverPoint.value.style.display = "none";
|
||
});
|
||
|
||
// 点击事件
|
||
pointLayer.on("click", (e) => {
|
||
console.log("e", e);
|
||
handleClickPointLayer(e.feature);
|
||
});
|
||
|
||
// 鼠标取消点击
|
||
pointLayer.on("unclick", () => {
|
||
handleChangeToDefault();
|
||
});
|
||
|
||
scene.value.addLayer(pointLayer);
|
||
};
|
||
|
||
// 点击服务区圆点触发的事件
|
||
const handleClickPointLayer = async (detail: any) => {
|
||
// 给当前选中的服务区存储值
|
||
currentServerPartDetail.value = detail;
|
||
// 地图上出现选中服务区的效果
|
||
handleAddSelect(detail);
|
||
// 先清空现有的全部图层
|
||
handleDeleteNoDefault(RightSearchBoxRef.value.selectFilterList);
|
||
// 查看右边选中了哪些 调用在新的上面
|
||
let nowSelect: string = RightSearchBoxRef.value.selectFilterList;
|
||
console.log("nowSelect", nowSelect);
|
||
|
||
await handleChangeMapShow(nowSelect, false);
|
||
// 右侧的详情抽屉
|
||
if (nowSelect.indexOf("99") !== -1) {
|
||
showRightDetail.value = false;
|
||
} else {
|
||
showRightDetail.value = true;
|
||
}
|
||
// 用户判断实时数据的右侧详情是否显示的判断
|
||
isShowDetail.value = true;
|
||
// // 对话框上方是否选中了
|
||
// let selectTab: any = RobotDialogueBoxRef.value.selectTab;
|
||
// RobotDialogueBoxRef.value.handleClickTab(selectTab);
|
||
};
|
||
|
||
// 给服务区圆点加上选中效果
|
||
const handleAddSelect = (detail: any) => {
|
||
let allLayers: any = scene.value.getLayers();
|
||
|
||
// 判断是否是预警时候的点击
|
||
let isWarning: boolean = false;
|
||
if (allLayers && allLayers.length > 0) {
|
||
allLayers.forEach((item: any) => {
|
||
if (item.name === "warningLayer") {
|
||
isWarning = true;
|
||
}
|
||
});
|
||
}
|
||
|
||
let current: any = handleGetThisLayer("lightPointLayer");
|
||
|
||
if (current) {
|
||
scene.value.removeLayer(current);
|
||
}
|
||
|
||
const lightPointLayer = new PointLayer({});
|
||
lightPointLayer.name = "lightPointLayer";
|
||
lightPointLayer.shape("circle");
|
||
lightPointLayer.size(15);
|
||
lightPointLayer.color("#efff19");
|
||
lightPointLayer.style({
|
||
opacity: 0.6,
|
||
});
|
||
lightPointLayer.source([detail], {
|
||
parser: {
|
||
type: "json",
|
||
x: "SERVERPART_X",
|
||
y: "SERVERPART_Y",
|
||
},
|
||
});
|
||
scene.value.addLayer(lightPointLayer);
|
||
|
||
if (isWarning) {
|
||
console.log("detailisWarning", detail);
|
||
RightDetailRef.value.handleScrollProjectList(detail.warningShop);
|
||
}
|
||
};
|
||
|
||
// 点击垃圾桶 清除选中效果
|
||
const handleDeleteSelect = () => {
|
||
handleDeleteLayer("lightPointLayer");
|
||
handleDeleteLayer("nearServiceList");
|
||
currentServerPartDetail.value = undefined;
|
||
};
|
||
|
||
// 取消服务区选中等效果的实现方法
|
||
const handleChangeToDefault = () => {
|
||
// 清除当前选中的服务区值
|
||
currentServerPartDetail.value = undefined;
|
||
// 取消搜索选中的服务区
|
||
searchSelectServerPartId = [];
|
||
// 取消点击时要清除的图层名称列表
|
||
const list: any = ["lightPointLayer", "searchPointLayerText"];
|
||
list.forEach((item: any) => {
|
||
let current: any = handleGetThisLayer(item);
|
||
if (current) {
|
||
scene.value.removeLayer(current);
|
||
}
|
||
});
|
||
// 将进入搜索状态的服务区正常圆点 变回正常颜色
|
||
let current: any = handleGetThisLayer("pointLayer");
|
||
current.color("SPREGIONTYPETYPE", (value: number) => {
|
||
return colorList1[value];
|
||
// return Number(value || 0) === 65 ||
|
||
// Number(value || 0) === 45 ||
|
||
// Number(value || 0) === 47
|
||
// ? "#34B6B7"
|
||
// : "#CEF8D6";
|
||
});
|
||
current.render();
|
||
};
|
||
|
||
// 鼠标移入点触发的事件
|
||
const handlePointHover = () => {
|
||
const el = document.createElement("div");
|
||
el.style.background = "#000";
|
||
el.style.color = "#fff";
|
||
el.style.position = "absolute";
|
||
el.style.padding = "10px";
|
||
el.style.borderRadius = "10px";
|
||
el.style.zIndex = "9999";
|
||
el.style.transition = "0.5s";
|
||
el.style.display = "none";
|
||
const wrap: any = document.getElementById("map");
|
||
wrap.appendChild(el);
|
||
return el;
|
||
};
|
||
|
||
// 需要调用的枚举方法
|
||
const handleGetEnumeration = async () => {
|
||
const ServerpartTypeList = await getFieldEnumTree({
|
||
FieldExplainField: "SERVERPART_TYPE",
|
||
});
|
||
console.log("ServerpartTypeList", ServerpartTypeList);
|
||
const typeObj: any = {};
|
||
if (ServerpartTypeList && ServerpartTypeList.length > 0) {
|
||
ServerpartTypeList.forEach((item: any) => {
|
||
typeObj[item.value] = item.label;
|
||
});
|
||
}
|
||
ServerpartTypeObj = typeObj;
|
||
};
|
||
|
||
// 给传入的服务区 标上高亮点
|
||
// 判断当前是否已经存在高亮图层 如果存在的话 就改变值 不用重新添加图层
|
||
const handleLightServerpart = (infoList: any) => {
|
||
let current: any = handleGetThisLayer("searchPointLayerText");
|
||
let idList: any = infoList.split(",");
|
||
// infoList.forEach((item: any) => {
|
||
// idList.push(item.SERVERPART_ID);
|
||
// });
|
||
console.log("idList", idList);
|
||
searchSelectServerPartId = idList;
|
||
let searchRes: any = [];
|
||
defaultServerPartList.forEach((item: any) => {
|
||
if (idList.indexOf(item.SERVERPART_ID.toString()) !== -1) {
|
||
searchRes.push(item);
|
||
}
|
||
});
|
||
console.log("searchRes", searchRes);
|
||
|
||
// 删除原有的 添加新的
|
||
if (current) {
|
||
scene.value.removeLayer(current);
|
||
}
|
||
|
||
let searchPointLayerText = new PointLayer({
|
||
zIndex: 9,
|
||
});
|
||
searchPointLayerText.name = "searchPointLayerText";
|
||
searchPointLayerText.source(searchRes, {
|
||
parser: {
|
||
type: "json",
|
||
x: "SERVERPART_X",
|
||
y: "SERVERPART_Y",
|
||
},
|
||
});
|
||
searchPointLayerText.shape("circle");
|
||
searchPointLayerText.size(8);
|
||
searchPointLayerText.color("#fdff3d");
|
||
searchPointLayerText.style({
|
||
opacity: 0.7, // 透明度
|
||
});
|
||
// searchPointLayerText.on("mousemove", (ev: any) => {
|
||
// const detail: any = ev.feature;
|
||
// hoverPoint.value.style.top = `${ev.y}px`;
|
||
// hoverPoint.value.style.left = `${ev.x}px`;
|
||
// hoverPoint.value.style.display = "block";
|
||
// hoverPoint.value.innerHTML = `<div>
|
||
// <div>${detail?.SERVERPART_NAME || ""}</div>
|
||
// </div>`;
|
||
// });
|
||
// // 鼠标移出
|
||
// searchPointLayerText.on("mouseout", (ev: any) => {
|
||
// hoverPoint.value.style.display = "none";
|
||
// });
|
||
scene.value.addLayer(searchPointLayerText);
|
||
};
|
||
|
||
// 传入服务区id 在地图上出现一个选中的效果 且 id只能传入一个服务区
|
||
const handleSelectedServerpart = (id: any) => {
|
||
if (defaultServerPartList && defaultServerPartList.length > 0) {
|
||
let seletObj: any = {};
|
||
defaultServerPartList.forEach((item: any) => {
|
||
if (item.SERVERPART_ID === id) {
|
||
seletObj = item;
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
// 查找当前全部图层中是否有传入的图层名称 有的话 输出图层数据
|
||
const handleGetThisLayer = (name: string) => {
|
||
let res: any;
|
||
let allLayers: any = scene.value.getLayers();
|
||
if (allLayers && allLayers.length > 0) {
|
||
allLayers.forEach((item: any) => {
|
||
if (item.name === name) {
|
||
res = item;
|
||
}
|
||
});
|
||
}
|
||
if (res) {
|
||
return res;
|
||
}
|
||
};
|
||
|
||
// 进入搜索状态 改变现在的服务区点位颜色 全部变成灰色
|
||
const handleEnterySearch = () => {
|
||
let current: any = handleGetThisLayer("pointLayer");
|
||
current.color("#dededd");
|
||
current.render();
|
||
};
|
||
|
||
// 添加天气效果
|
||
const handleAddWeather = () => {
|
||
console.log("defaultServerPartList", defaultServerPartList);
|
||
defaultServerPartList.forEach((item: any) => {
|
||
if (item.weatherModel) {
|
||
if (item.weatherModel.DAY_WEATHER_PIC) {
|
||
const el = document.createElement("div");
|
||
el.style.width = "32px";
|
||
el.style.height = "24px";
|
||
el.style.paddingBottom = "4px";
|
||
el.style.textAlign = "center";
|
||
|
||
// 创建并插入 <img> 元素
|
||
const img = document.createElement("img");
|
||
img.src = item.weatherModel.DAY_WEATHER_PIC;
|
||
img.style.width = "15px";
|
||
img.style.height = "15px";
|
||
img.style.borderRadius = "50%"; // 圆形图片（可选）
|
||
// img.title = item.DAY_WEATHER
|
||
el.appendChild(img);
|
||
const marker = new Marker({ element: el }).setLnglat([
|
||
item.SERVERPART_X,
|
||
item.SERVERPART_Y,
|
||
] as any);
|
||
if (currentServerPartDetail.value) {
|
||
if (
|
||
item.SERVERPART_ID === currentServerPartDetail.value.SERVERPART_ID
|
||
) {
|
||
scene.value.addMarker(marker);
|
||
}
|
||
} else if (
|
||
searchSelectServerPartId &&
|
||
searchSelectServerPartId.length > 0
|
||
) {
|
||
if (
|
||
searchSelectServerPartId.indexOf(item.SERVERPART_ID.toString()) !==
|
||
-1
|
||
) {
|
||
scene.value.addMarker(marker);
|
||
}
|
||
} else {
|
||
scene.value.addMarker(marker);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
// 遍历给实况车流图层的赋值
|
||
const handleSetCarData = async (
|
||
id: any,
|
||
roadTestList: any,
|
||
featuresList: any
|
||
) => {
|
||
let selectObj: any = {};
|
||
let selectRoad: any = {};
|
||
|
||
// 从服务区的道路名称的那个数组里面 取到现在的这个服务区数据
|
||
if (roadTestList && roadTestList.length > 0) {
|
||
roadTestList.forEach((item: any) => {
|
||
if (item.SERVERPART_ID.toString() === id) {
|
||
selectObj = item;
|
||
}
|
||
});
|
||
}
|
||
|
||
let data: any = {};
|
||
let roadItem: any = {};
|
||
let roadReq: any = {
|
||
RoadName: selectObj.EXPRESSWAY_NAME || "",
|
||
CityName: selectObj.SERVERPART_ADDRESS || "",
|
||
};
|
||
data = await handleGetBaiDuTrafficInfo(roadReq);
|
||
let roadRes: any = JSON.parse(data);
|
||
|
||
if (roadRes.status == 2) {
|
||
let roadReq: any = {
|
||
RoadName: selectObj.SERVERPART_NAME || "",
|
||
CityName: selectObj.SERVERPART_ADDRESS || "",
|
||
};
|
||
data = await handleGetBaiDuTrafficInfo(roadReq);
|
||
roadItem = JSON.parse(data);
|
||
} else {
|
||
roadItem = roadRes;
|
||
}
|
||
|
||
// let roadReq: any = {};
|
||
// let heightWay: any = [
|
||
// 366, 803, 381, 756, 708, 646, 805, 710, 476, 694, 714, 490, 658, 819, 659,
|
||
// 811, 716, 499, 941, 652, 943, 513, 510, 600, 707, 592, 706,
|
||
// ];
|
||
|
||
// if (heightWay.indexOf(Number(selectObj.SERVERPART_ID)) === -1) {
|
||
// roadReq = {
|
||
// RoadName: selectObj.SERVERPART_NAME || "",
|
||
// CityName: selectObj.SERVERPART_ADDRESS || "",
|
||
// };
|
||
// } else {
|
||
// roadReq = {
|
||
// RoadName: selectObj.EXPRESSWAY_NAME || "",
|
||
// CityName: selectObj.SERVERPART_ADDRESS || "",
|
||
// };
|
||
// }
|
||
|
||
// const data = await handleGetBaiDuTrafficInfo(roadReq);
|
||
// let roadItem: any = JSON.parse(data);
|
||
if (featuresList && featuresList.length > 0) {
|
||
featuresList.forEach((item: any) => {
|
||
if (item.properties.SERVERPART_ID.toString() === id) {
|
||
item.properties.expediteNumber =
|
||
roadItem.status === 0 ? roadItem.evaluation.status : null;
|
||
selectRoad = item;
|
||
}
|
||
});
|
||
}
|
||
// 给服务区的鼠标移入点位显示的内容
|
||
if (defaultServerPartList && defaultServerPartList.length > 0) {
|
||
defaultServerPartList.forEach((item: any) => {
|
||
if (item.SERVERPART_ID === selectObj.SERVERPART_ID) {
|
||
nextTick(() => {
|
||
item.roadConditions = {
|
||
...selectObj,
|
||
...roadItem,
|
||
};
|
||
let allLayers: any = scene.value.getLayers();
|
||
if (allLayers && allLayers.length > 0) {
|
||
let obj: any = {};
|
||
allLayers.forEach((item: any) => {
|
||
if (item.name === "pointLayer") {
|
||
obj = item;
|
||
}
|
||
});
|
||
if (obj) {
|
||
obj.setData(defaultServerPartList);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
if (selectRoad) {
|
||
return selectRoad;
|
||
}
|
||
return {};
|
||
};
|
||
|
||
// 拿到实况车流数据
|
||
const hanleGetRealTrafficData = async (id: any) => {
|
||
let roadList: any = JSON.parse(JSON.stringify(detailText.lineData));
|
||
roadList = roadList[baseInfoObj.value.ProvinceCode.toString()];
|
||
let roadTestList: any = JSON.parse(JSON.stringify(detailText.roadTest));
|
||
roadTestList = roadTestList[baseInfoObj.value.ProvinceCode.toString()];
|
||
|
||
let onceRoadList: any = {
|
||
type: "FeatureCollection",
|
||
features: [],
|
||
};
|
||
let featuresList: any = roadList.features;
|
||
let list: any = [];
|
||
|
||
for (let i = 0; i < id.length; i++) {
|
||
// 如果现在选择的右边查询内容 没有实时车况的选中 那就不显示
|
||
if (nowSelectId.value.indexOf("2") === -1) {
|
||
return;
|
||
}
|
||
const selectRoad = await handleSetCarData(
|
||
id[i],
|
||
roadTestList,
|
||
featuresList
|
||
);
|
||
// if (i > 0) {
|
||
// return;
|
||
// }
|
||
list.push(selectRoad);
|
||
onceRoadList.features = list;
|
||
|
||
let allLayers: any = scene.value.getLayers();
|
||
|
||
let haveList: any = allLayers.filter(
|
||
(item: any) => item.name === "lineLayerOnce"
|
||
);
|
||
|
||
if (haveList && haveList.length > 0) {
|
||
let obj: any = haveList[0];
|
||
nextTick(() => {
|
||
scene.value.removeLayer(obj);
|
||
const lineLayer = new LineLayer({
|
||
zIndex: 11,
|
||
});
|
||
lineLayer.name = `lineLayerOnce`;
|
||
lineLayer
|
||
.size(3) // 线条宽度
|
||
.shape("line") // 线条形状
|
||
.color("expediteNumber", (value) => {
|
||
// 根据 expediteNumber 动态设置颜色
|
||
if (value === 1) {
|
||
return "#35cf66"; // 绿色
|
||
} else if (value === 2) {
|
||
return "#c99c1c"; // 黄色
|
||
} else if (value === 3 || value === 4) {
|
||
return "#e64a4a"; // 红色
|
||
} else {
|
||
return "transparent"; // 灰色
|
||
}
|
||
})
|
||
.style({
|
||
opacity: 1, // 透明度
|
||
});
|
||
lineLayer.source(onceRoadList); // 设置数据源为 GeoJSON
|
||
scene.value.addLayer(lineLayer); // 将线图层添加到场景中
|
||
});
|
||
} else {
|
||
const lineLayer = new LineLayer({
|
||
zIndex: 11,
|
||
});
|
||
lineLayer.name = `lineLayerOnce`;
|
||
lineLayer
|
||
.size(3) // 线条宽度
|
||
.shape("line") // 线条形状
|
||
.color("expediteNumber", (value) => {
|
||
// 根据 expediteNumber 动态设置颜色
|
||
if (value === 1) {
|
||
return "#35cf66"; // 绿色
|
||
} else if (value === 2) {
|
||
return "#c99c1c"; // 黄色
|
||
} else if (value === 3 || value === 4) {
|
||
return "#e64a4a"; // 红色
|
||
} else {
|
||
return "transparent"; // 灰色
|
||
}
|
||
})
|
||
.style({
|
||
opacity: 1, // 透明度
|
||
});
|
||
lineLayer.source(onceRoadList); // 设置数据源为 GeoJSON
|
||
scene.value.addLayer(lineLayer); // 将线图层添加到场景中
|
||
}
|
||
}
|
||
};
|
||
|
||
// 实况车流
|
||
const handleGetRealTraffic = async () => {
|
||
let roadList: any = JSON.parse(JSON.stringify(detailText.lineData));
|
||
roadList = roadList[baseInfoObj.value.ProvinceCode.toString()];
|
||
let roadTestList: any = JSON.parse(JSON.stringify(detailText.roadTest));
|
||
roadTestList = roadTestList[baseInfoObj.value.ProvinceCode.toString()];
|
||
|
||
console.log("roadList", roadList);
|
||
console.log("roadTestList", roadTestList);
|
||
|
||
// 单个服务区查询的车流实况的最后结果 可以直接传入图层当数据
|
||
let onceRoadList: any = {
|
||
type: "FeatureCollection",
|
||
features: [],
|
||
};
|
||
let featuresList: any = roadList.features;
|
||
console.log("featuresList", featuresList);
|
||
console.log("currentServerPartDetail.value", currentServerPartDetail.value);
|
||
// 选中
|
||
if (currentServerPartDetail.value) {
|
||
await hanleGetRealTrafficData([
|
||
currentServerPartDetail.value.SERVERPART_ID.toString(),
|
||
]);
|
||
} else if (searchSelectServerPartId && searchSelectServerPartId.length > 0) {
|
||
// 查询高亮
|
||
console.log("searchSelectServerPartId", searchSelectServerPartId);
|
||
await hanleGetRealTrafficData(searchSelectServerPartId);
|
||
} else {
|
||
// 默认全部
|
||
await hanleGetRealTrafficData(allServerPartIdList);
|
||
}
|
||
};
|
||
|
||
// 传入名字清除图层
|
||
const handleDeleteLayer = (name: string) => {
|
||
let allLayers: any = scene.value.getLayers();
|
||
if (allLayers && allLayers.length > 0) {
|
||
allLayers.forEach((item: any) => {
|
||
if (item.name === name) {
|
||
scene.value.removeLayer(item);
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
// 清空一些非默认图层
|
||
const handleDeleteNoDefault = (nowSelect?: string) => {
|
||
if (nowSelect) {
|
||
if (nowSelect.indexOf("1") === -1) {
|
||
scene.value.removeAllMarkers();
|
||
}
|
||
if (nowSelect.indexOf("2") === -1) {
|
||
handleDeleteLayer("lineLayerOnce");
|
||
}
|
||
if (nowSelect.indexOf("3") === -1) {
|
||
handleDeleteLayer("heatmapLayer");
|
||
}
|
||
if (nowSelect.indexOf("4") === -1) {
|
||
handleDeleteLayer("enterCarPoint");
|
||
handleDeleteLayer("enterLine");
|
||
}
|
||
if (nowSelect.indexOf("5") === -1) {
|
||
handleDeleteLayer("BUSINESS_TRADELayer");
|
||
}
|
||
if (nowSelect.indexOf("6") === -1) {
|
||
handleDeleteLayer("warningLayer");
|
||
}
|
||
if (nowSelect.indexOf("8") === -1) {
|
||
isShowRealData.value = false;
|
||
clearInterval(mapTimer);
|
||
}
|
||
} else {
|
||
console.log("22222", defaultServerPartList);
|
||
scene.value.removeAllMarkers();
|
||
handleDeleteLayer("lineLayerOnce");
|
||
handleDeleteLayer("heatmapLayer");
|
||
handleDeleteLayer("enterCarPoint");
|
||
handleDeleteLayer("enterLine");
|
||
handleDeleteLayer("warningLayer");
|
||
handleDeleteLayer("BUSINESS_TRADELayer");
|
||
// handleChangeToDefault();
|
||
isShowRealData.value = false;
|
||
// 变回正常颜色
|
||
let current: any = handleGetThisLayer("pointLayer");
|
||
current.color("SPREGIONTYPETYPE", (value: number) => {
|
||
return colorList1[value];
|
||
});
|
||
current.render();
|
||
clearInterval(mapTimer);
|
||
}
|
||
};
|
||
|
||
// 更新服务区点数据的方法
|
||
const handleUpdateMapPoint = () => {
|
||
let allLayers: any = scene.value.getLayers();
|
||
if (allLayers && allLayers.length > 0) {
|
||
let obj: any = {};
|
||
allLayers.forEach((item: any) => {
|
||
if (item.name === "pointLayer") {
|
||
obj = item;
|
||
}
|
||
});
|
||
if (obj) {
|
||
obj.setData(defaultServerPartList);
|
||
}
|
||
}
|
||
};
|
||
|
||
// 营收热力的方法
|
||
const handleGetServerpartRevenue = async () => {
|
||
const revenueReq: any = {
|
||
calcType: 2,
|
||
pushProvinceCode: baseInfoObj.value.ProvinceCode || "340000",
|
||
curYear: moment().format("YYYY"),
|
||
compareYear: moment().subtract(1, "year").format("YYYY"),
|
||
StatisticsDate: moment().format("YYYY-MM-DD"),
|
||
StatisticsMonth: moment().format("YYYYMM"),
|
||
};
|
||
const revenueData: any = await handleGetMonthlySPINCAnalysis(revenueReq);
|
||
const revenueObj: any = {};
|
||
if (revenueData && revenueData.length > 0) {
|
||
revenueData.forEach((item: any) => {
|
||
revenueObj[item.ServerpartId] = item.RevenueINC.curYearData;
|
||
});
|
||
}
|
||
if (defaultServerPartList && defaultServerPartList.length > 0) {
|
||
nextTick(() => {
|
||
defaultServerPartList.forEach((item: any) => {
|
||
item.revenueData = revenueObj[item.SERVERPART_ID]
|
||
? revenueObj[item.SERVERPART_ID]
|
||
: "";
|
||
item.lng = item.SERVERPART_X;
|
||
item.lat = item.SERVERPART_Y;
|
||
});
|
||
handleUpdateMapPoint();
|
||
console.log("defaultServerPartList", defaultServerPartList);
|
||
let filteredData: any = [];
|
||
defaultServerPartList.forEach((item: any) => {
|
||
if (item.lng && item.lat && item.revenueData !== "") {
|
||
filteredData.push(item);
|
||
}
|
||
});
|
||
console.log("filteredData", filteredData);
|
||
|
||
const heatmapLayer = new HeatmapLayer({
|
||
zIndex: 11,
|
||
})
|
||
.source(defaultServerPartList, {
|
||
parser: {
|
||
type: "json",
|
||
x: "lng", // 指定经度字段
|
||
y: "lat", // 指定纬度字段
|
||
},
|
||
})
|
||
.size("revenueData", [0, 1]) // 根据值映射热力点大小
|
||
.shape("heatmap") // 指定热力图的形状
|
||
.style({
|
||
intensity: 5, // 控制强度
|
||
radius: 20, // 控制点半径
|
||
opacity: 0.8, // 图层透明度
|
||
rampColors: {
|
||
colors: ["#0e5a7e", "#63B8FF", "#FFF68F", "#FF6347", "#FF4500"], // 颜色梯度
|
||
positions: [0, 0.25, 0.5, 0.75, 1], // 对应颜色的位置
|
||
},
|
||
});
|
||
heatmapLayer.name = "heatmapLayer";
|
||
scene.value.addLayer(heatmapLayer);
|
||
});
|
||
}
|
||
};
|
||
|
||
// 车辆归属地
|
||
const handleGetCarComeForm = async () => {
|
||
const enterReq: any = {
|
||
serverPartId: currentServerPartDetail.value.SERVERPART_ID,
|
||
statisticsStartMonth: moment(moment().startOf("y")).format("YYYYMM"),
|
||
statisticsEndMonth: moment(moment()).format("YYYYMM"),
|
||
rankNum: 3,
|
||
};
|
||
const enterData: any = await handleGetProvinceVehicleTreeList(enterReq);
|
||
console.log("enterData", enterData);
|
||
let provinceListTooltip: any = [];
|
||
let provinceList: any = [];
|
||
if (enterData && enterData.length > 0) {
|
||
let children: any = [];
|
||
let obj: any = {};
|
||
enterData.forEach((item: any) => {
|
||
obj = JSON.parse(JSON.stringify(item));
|
||
if (item.children && item.children.length > 0) {
|
||
item.children.forEach((subItem: any, subIndex: number) => {
|
||
if (subIndex <= 4) {
|
||
provinceList.push(subItem);
|
||
children.push(subItem);
|
||
}
|
||
});
|
||
}
|
||
obj.children = children;
|
||
provinceListTooltip.push(obj);
|
||
});
|
||
}
|
||
|
||
nextTick(() => {
|
||
if (defaultServerPartList && defaultServerPartList.length > 0) {
|
||
defaultServerPartList.forEach((item: any) => {
|
||
if (
|
||
item.SERVERPART_ID.toString() ===
|
||
currentServerPartDetail.value.SERVERPART_ID.toString()
|
||
) {
|
||
item.provinceListTooltip = provinceListTooltip;
|
||
}
|
||
});
|
||
handleUpdateMapPoint();
|
||
}
|
||
});
|
||
|
||
let homeCarList: any = [];
|
||
if (provinceList && provinceList.length > 0) {
|
||
provinceList.forEach((item: any) => {
|
||
let list: any = [];
|
||
if (item.children && item.children.length > 0) {
|
||
item.children.forEach((subItem: any, subIndex: number) => {
|
||
if (subIndex <= 2) {
|
||
list.push(subItem);
|
||
}
|
||
});
|
||
}
|
||
item.children = list;
|
||
homeCarList.push(item);
|
||
});
|
||
}
|
||
let featuresList: any = [];
|
||
let enterPointList: any = [];
|
||
let cityCoordinate: any = detailText.cityCoordinate;
|
||
if (homeCarList && homeCarList.length > 0) {
|
||
homeCarList.forEach((item: any) => {
|
||
if (item.children && item.children.length > 0) {
|
||
item.children.forEach((subItem: any) => {
|
||
enterPointList.push({
|
||
label: subItem.ProvinceOrCityName + "市",
|
||
SERVERPART_X: cityCoordinate[subItem.ProvinceOrCityName + "市"]
|
||
? cityCoordinate[subItem.ProvinceOrCityName + "市"][0]
|
||
: [],
|
||
SERVERPART_Y: cityCoordinate[subItem.ProvinceOrCityName + "市"]
|
||
? cityCoordinate[subItem.ProvinceOrCityName + "市"][1]
|
||
: [],
|
||
});
|
||
|
||
featuresList.push({
|
||
type: "Feature",
|
||
geometry: {
|
||
type: "LineString",
|
||
coordinates: [
|
||
cityCoordinate[subItem.ProvinceOrCityName + "市"]
|
||
? cityCoordinate[subItem.ProvinceOrCityName + "市"]
|
||
: [], // 起点
|
||
cityCoordinate[currentServerPartDetail.value.SERVERPART_NAME]
|
||
? cityCoordinate[
|
||
currentServerPartDetail.value.SERVERPART_NAME
|
||
]
|
||
: [], // 终点
|
||
],
|
||
},
|
||
properties: {
|
||
value: subItem.TotalCount, // 可以映射成动画效果
|
||
},
|
||
});
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
const enterLineData: any = {
|
||
type: "FeatureCollection",
|
||
features: featuresList,
|
||
};
|
||
|
||
const enterLine = new LineLayer({})
|
||
.source(enterLineData)
|
||
.size(2) // 设置线条宽度
|
||
.shape("line") // 线条类型
|
||
.color("value", ["#93cdf8", "#77c0f6"]) // 根据值映射颜色// ['#a1c4fd', '#2193b0', '#1565c0']
|
||
.style({
|
||
opacity: 0.8, // 设置透明度
|
||
lineType: "dash", // 虚线样式
|
||
dashArray: [5, 5], // 虚线间隔
|
||
})
|
||
.animate({
|
||
interval: 1, // 动画间隔
|
||
duration: 2, // 每条线条动画持续时间
|
||
trailLength: 0.5, // 轨迹长度
|
||
});
|
||
enterLine.name = "enterLine";
|
||
scene.value.addLayer(enterLine);
|
||
|
||
// 给车辆的出发点 也打上圆点图层
|
||
const enterPoint = new PointLayer({
|
||
zIndex: 9,
|
||
});
|
||
enterPoint.name = "enterCarPoint";
|
||
|
||
enterPoint.source(enterPointList, {
|
||
parser: {
|
||
type: "json",
|
||
x: "SERVERPART_X",
|
||
y: "SERVERPART_Y",
|
||
},
|
||
});
|
||
enterPoint.shape("circle");
|
||
enterPoint.size(8);
|
||
enterPoint.color("#58b1f5");
|
||
scene.value.addLayer(enterPoint);
|
||
};
|
||
|
||
// 拿到经营业态
|
||
const handleGetBusinessFormat = async () => {
|
||
// await RobotDialogueBoxRef.value.handleGetBusinessTrade();
|
||
let formData: any = RightSearchBoxRef.value.form;
|
||
console.log("formData", formData);
|
||
const req: any = {
|
||
BusinessTrade: formData?.BUSINESS_TRADE.toString(),
|
||
ShowNormal: true,
|
||
PeriodState: 1,
|
||
DataType: 3,
|
||
};
|
||
const tradeData = await handleGetPeriodWarningList(req);
|
||
console.log("tradeData", tradeData);
|
||
// 拿到所有查询的业态所对应的服务区
|
||
const obj: any = {};
|
||
// 搜索的业态包含的服务区
|
||
const shopObj: any = {};
|
||
// 拿到门店的id
|
||
let shopIdObj: any = {};
|
||
if (tradeData && tradeData.length > 0) {
|
||
console.log("tradeData3232", tradeData);
|
||
|
||
tradeData.forEach((item: any) => {
|
||
if (item.children && item.children.length > 0) {
|
||
item.children.forEach((subItem: any) => {
|
||
if (subItem.children && subItem.children.length > 0) {
|
||
subItem.children.forEach((thirdItem: any) => {
|
||
if (obj[thirdItem.SERVERPART_ID]) {
|
||
const old: any = obj[thirdItem.SERVERPART_ID];
|
||
old.push(thirdItem.BUSINESS_TRADE);
|
||
obj[thirdItem.SERVERPART_ID] = old;
|
||
} else {
|
||
const list: any = [thirdItem.BUSINESS_TRADE];
|
||
obj[thirdItem.SERVERPART_ID] = list;
|
||
}
|
||
if (thirdItem.children && subItem.children.length > 0) {
|
||
let shopName: string = "";
|
||
let shopIdList: any = [];
|
||
thirdItem.children.forEach((fourthItem: any) => {
|
||
if (shopName) {
|
||
shopName += `, ${fourthItem.SERVERPARTSHOP_NAME} `;
|
||
} else {
|
||
shopName = `${fourthItem.SERVERPARTSHOP_NAME} `;
|
||
}
|
||
if (fourthItem?.SERVERPARTSHOP_ID) {
|
||
let list: any = fourthItem?.SERVERPARTSHOP_ID.split(",");
|
||
if (list && list.length > 0) {
|
||
list.forEach((item: any) => {
|
||
shopIdList.push(item);
|
||
});
|
||
}
|
||
}
|
||
});
|
||
shopObj[thirdItem.SERVERPART_ID] = shopName;
|
||
shopIdObj[thirdItem.SERVERPART_ID] = shopIdList;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
let BusinessTradeIdsObj: any =
|
||
RightSearchBoxRef.value.selectBusinessTradeIdsObj;
|
||
|
||
nextTick(() => {
|
||
defaultServerPartList.forEach((item: any) => {
|
||
if (obj[item.SERVERPART_ID] && obj[item.SERVERPART_ID].length > 0) {
|
||
const newObj: any = JSON.parse(JSON.stringify(item));
|
||
let str: string = "";
|
||
const tradeList: any = obj[item.SERVERPART_ID];
|
||
tradeList.forEach((subItem: any) => {
|
||
if (str) {
|
||
str += `、${BusinessTradeIdsObj[subItem]} `;
|
||
} else {
|
||
str = BusinessTradeIdsObj[subItem];
|
||
}
|
||
});
|
||
item.tradeType = str;
|
||
if (shopObj[item.SERVERPART_ID]) {
|
||
item.shopName = shopObj[item.SERVERPART_ID];
|
||
}
|
||
if (shopIdObj[item.SERVERPART_ID]) {
|
||
item.shopIdList = shopIdObj[item.SERVERPART_ID];
|
||
}
|
||
}
|
||
});
|
||
handleUpdateMapPoint();
|
||
});
|
||
|
||
console.log("defaultServerPartList", defaultServerPartList);
|
||
|
||
const tradeRes: any = [];
|
||
defaultServerPartList.forEach((item: any) => {
|
||
if (obj[item.SERVERPART_ID] && obj[item.SERVERPART_ID].length > 0) {
|
||
const newObj: any = JSON.parse(JSON.stringify(item));
|
||
let str: string = "";
|
||
const tradeList: any = obj[item.SERVERPART_ID];
|
||
tradeList.forEach((item: any) => {
|
||
if (str) {
|
||
str += `、${BusinessTradeIdsObj[item]} `;
|
||
} else {
|
||
str = BusinessTradeIdsObj[item];
|
||
}
|
||
});
|
||
newObj.tradeType = str;
|
||
if (shopObj[item.SERVERPART_ID]) {
|
||
newObj.shopName = shopObj[item.SERVERPART_ID];
|
||
}
|
||
if (shopIdObj[item.SERVERPART_ID]) {
|
||
newObj.shopIdList = shopIdObj[item.SERVERPART_ID];
|
||
}
|
||
tradeRes.push(newObj);
|
||
}
|
||
});
|
||
console.log("tradeRes", tradeRes);
|
||
|
||
const BUSINESS_TRADELayer = new PointLayer({
|
||
zIndex: 10,
|
||
});
|
||
BUSINESS_TRADELayer.name = "BUSINESS_TRADELayer";
|
||
BUSINESS_TRADELayer.source(tradeRes, {
|
||
parser: {
|
||
type: "json",
|
||
x: "SERVERPART_X",
|
||
y: "SERVERPART_Y",
|
||
},
|
||
});
|
||
BUSINESS_TRADELayer.shape("circle");
|
||
BUSINESS_TRADELayer.size(8);
|
||
BUSINESS_TRADELayer.color("#1890ff");
|
||
scene.value.addLayer(BUSINESS_TRADELayer);
|
||
};
|
||
|
||
// 预警类型
|
||
const handleWarningData = async () => {
|
||
console.log("currentServerPartDetail", currentServerPartDetail);
|
||
nextTick(() => {
|
||
if (currentServerPartDetail.value) {
|
||
RobotDialogueBoxRef.value.handleSelectWarning();
|
||
} else {
|
||
RobotDialogueBoxRef.value.handleSetWarningData();
|
||
}
|
||
});
|
||
};
|
||
|
||
// 对预警类型的地图进行操作
|
||
const handleWarningMap = async (warningData: any) => {
|
||
let waringObj: any = RobotDialogueBoxRef.value.descObjRef;
|
||
console.log("waringObj", waringObj);
|
||
|
||
let warningRes: any = [];
|
||
// 拿到所有查询的业态所对应的服务区
|
||
const obj: any = {};
|
||
// 拿到所有查询到的预警类型对应的门店
|
||
let shopIdObj: any = {};
|
||
console.log("warningData2", warningData);
|
||
|
||
if (warningData && warningData.length > 0) {
|
||
warningData.forEach((item: any) => {
|
||
if (obj[item.SERVERPART_ID] && obj[item.SERVERPART_ID].length > 0) {
|
||
const old: any = obj[item.SERVERPART_ID];
|
||
old.push(item);
|
||
} else {
|
||
obj[item.SERVERPART_ID] = [item];
|
||
}
|
||
|
||
if (
|
||
shopIdObj[item.SERVERPART_ID] &&
|
||
shopIdObj[item.SERVERPART_ID].length > 0
|
||
) {
|
||
const old: any = shopIdObj[item.SERVERPART_ID];
|
||
let list: any = item.SERVERPARTSHOP_ID.split(",");
|
||
if (list && list.length > 0) {
|
||
list.forEach((subItem: any) => {
|
||
old.push(subItem);
|
||
});
|
||
}
|
||
} else {
|
||
let res: any = [];
|
||
let list: any = item.SERVERPARTSHOP_ID.split(",");
|
||
if (list && list.length > 0) {
|
||
list.forEach((subItem: any) => {
|
||
res.push(subItem);
|
||
});
|
||
}
|
||
shopIdObj[item.SERVERPART_ID] = res;
|
||
}
|
||
});
|
||
}
|
||
|
||
nextTick(() => {
|
||
defaultServerPartList.forEach((item: any) => {
|
||
if (obj[item.SERVERPART_ID] && obj[item.SERVERPART_ID].length > 0) {
|
||
let str: string = "";
|
||
const tradeList: any = obj[item.SERVERPART_ID];
|
||
// tradeList 是一个服务区的全部预警数据 可能存在多个类型 文字输出时需要根据类型输出 所以要分类
|
||
let resList: any = [];
|
||
let typeList: any = [];
|
||
tradeList.forEach((item: any) => {
|
||
if (typeList.indexOf(item.WARNING_TYPE) === -1) {
|
||
typeList.push(item.WARNING_TYPE);
|
||
}
|
||
});
|
||
typeList.forEach((item: any) => {
|
||
let itemStr: string = "";
|
||
tradeList.forEach((subItem: any) => {
|
||
if (subItem.WARNING_TYPE === item) {
|
||
if (itemStr) {
|
||
itemStr += `、${subItem.SERVERPARTSHOP_NAME}`;
|
||
} else {
|
||
itemStr = `${waringObj[subItem.WARNING_TYPE]}：${subItem.SERVERPARTSHOP_NAME
|
||
} `;
|
||
}
|
||
}
|
||
});
|
||
if (str) {
|
||
str += itemStr + ";";
|
||
} else {
|
||
str = itemStr + ";";
|
||
}
|
||
});
|
||
|
||
if (
|
||
shopIdObj[item.SERVERPART_ID] &&
|
||
shopIdObj[item.SERVERPART_ID].length > 0
|
||
) {
|
||
item.warningShop = shopIdObj[item.SERVERPART_ID];
|
||
}
|
||
item.waringText = str;
|
||
}
|
||
});
|
||
handleUpdateMapPoint();
|
||
});
|
||
|
||
console.log("obj33222", obj);
|
||
console.log("defaultServerPartList333444", defaultServerPartList);
|
||
|
||
defaultServerPartList.forEach((item: any) => {
|
||
if (obj[item.SERVERPART_ID] && obj[item.SERVERPART_ID].length > 0) {
|
||
const newObj: any = JSON.parse(JSON.stringify(item));
|
||
let str: string = "";
|
||
const tradeList: any = obj[item.SERVERPART_ID];
|
||
// tradeList 是一个服务区的全部预警数据 可能存在多个类型 文字输出时需要根据类型输出 所以要分类
|
||
let resList: any = [];
|
||
let typeList: any = [];
|
||
tradeList.forEach((item: any) => {
|
||
if (typeList.indexOf(item.WARNING_TYPE) === -1) {
|
||
typeList.push(item.WARNING_TYPE);
|
||
}
|
||
});
|
||
typeList.forEach((item: any) => {
|
||
let itemStr: string = "";
|
||
tradeList.forEach((subItem: any) => {
|
||
if (subItem.WARNING_TYPE === item) {
|
||
if (itemStr) {
|
||
itemStr += `、${subItem.SERVERPARTSHOP_NAME}; `;
|
||
} else {
|
||
itemStr = `${waringObj[subItem.WARNING_TYPE]}：${subItem.SERVERPARTSHOP_NAME
|
||
} `;
|
||
}
|
||
}
|
||
});
|
||
if (str) {
|
||
str += itemStr;
|
||
} else {
|
||
str = itemStr;
|
||
}
|
||
});
|
||
|
||
if (
|
||
shopIdObj[item.SERVERPART_ID] &&
|
||
shopIdObj[item.SERVERPART_ID].length > 0
|
||
) {
|
||
newObj.warningShop = shopIdObj[item.SERVERPART_ID];
|
||
}
|
||
newObj.waringText = str;
|
||
warningRes.push(newObj);
|
||
}
|
||
});
|
||
|
||
console.log("warningRes", warningRes);
|
||
console.log("defaultServerPartList", defaultServerPartList);
|
||
|
||
const warningLayer = new PointLayer({
|
||
zIndex: 10,
|
||
});
|
||
warningLayer.name = "warningLayer";
|
||
warningLayer.source(warningRes, {
|
||
parser: {
|
||
type: "json",
|
||
x: "SERVERPART_X",
|
||
y: "SERVERPART_Y",
|
||
},
|
||
});
|
||
warningLayer.shape("circle");
|
||
warningLayer.size(8);
|
||
warningLayer.color("#ff3a02");
|
||
scene.value.addLayer(warningLayer);
|
||
};
|
||
|
||
// 根据右侧的选择列表 来对地图进行操作 onlyChange 如果true的话 只改变值 不调用方法
|
||
const handleChangeMapShow = async (nowSelect: string, onlyChange: boolean) => {
|
||
// 清空没有值的图层
|
||
handleDeleteNoDefault(nowSelect);
|
||
console.log("nowSelect", nowSelect);
|
||
nowSelectId.value = nowSelect;
|
||
if (onlyChange) {
|
||
return;
|
||
}
|
||
|
||
// 有值 根据值来判断显示的内容
|
||
if (nowSelect) {
|
||
if (nowSelect.indexOf("1") !== -1) {
|
||
// 添加天气锚点
|
||
handleAddWeather();
|
||
}
|
||
if (nowSelect.indexOf("2") !== -1) {
|
||
// 实况车流
|
||
await handleGetRealTraffic();
|
||
}
|
||
if (nowSelect.indexOf("3") !== -1) {
|
||
const loadingInstance = ElLoading.service({
|
||
fullscreen: true,
|
||
background: "#00000080",
|
||
text: "数据加载中...",
|
||
});
|
||
// 营收热力
|
||
await handleGetServerpartRevenue();
|
||
loadingInstance.close();
|
||
}
|
||
if (nowSelect.indexOf("4") !== -1) {
|
||
const loadingInstance = ElLoading.service({
|
||
fullscreen: true,
|
||
background: "#00000080",
|
||
text: "数据加载中...",
|
||
});
|
||
// 车辆归属地
|
||
await handleGetCarComeForm();
|
||
loadingInstance.close();
|
||
}
|
||
if (nowSelect.indexOf("5") !== -1) {
|
||
// 经营业态
|
||
await handleGetBusinessFormat();
|
||
}
|
||
if (nowSelect.indexOf("6") !== -1) {
|
||
const loadingInstance = ElLoading.service({
|
||
fullscreen: true,
|
||
background: "#00000080",
|
||
text: "数据加载中...",
|
||
});
|
||
// 预警类型
|
||
await handleWarningData();
|
||
loadingInstance.close();
|
||
}
|
||
if (nowSelect.indexOf("7") !== -1) {
|
||
// 清空
|
||
nowSelectId.value = "";
|
||
handleDeleteNoDefault(nowSelectId.value);
|
||
}
|
||
if (nowSelect.indexOf("8") !== -1) {
|
||
isShowRealData.value = true;
|
||
// nextTick(async () => {
|
||
// if (baseInfoObj?.value.ShowRevenueGraphic) {
|
||
// // 拿到实时营收
|
||
// await RealBoxRef.value.handleGetRealMoney(
|
||
// baseInfoObj.value.ProvinceId
|
||
// );
|
||
// // 几个小框的数据
|
||
// await handleSmallBoxData();
|
||
// }
|
||
// });
|
||
nextTick(async () => {
|
||
// 服务区繁忙
|
||
handleServiceBusy();
|
||
// 服务区实时营收数据
|
||
handleGetRealServiceList();
|
||
});
|
||
}
|
||
if (nowSelect.indexOf("99") !== -1) {
|
||
handleCloseRightDetail();
|
||
// 标记出附近的服务区
|
||
handleNearServiceList();
|
||
}
|
||
}
|
||
};
|
||
|
||
// 服务区繁忙
|
||
const handleServiceBusy = async () => {
|
||
// 是否有显示服务区繁忙的
|
||
if (baseInfoObj?.value.ShowRevenueGraphic) {
|
||
let list: any = BusyRankingRef.value.busyList;
|
||
// if (list && list.length > 0) {
|
||
// } else {
|
||
// const loadingInstance = ElLoading.service({
|
||
// fullscreen: true,
|
||
// background: "#00000080",
|
||
// text: "数据加载中...",
|
||
// });
|
||
// list = await revenueRateRef.value.handleGetBusyRank();
|
||
// loadingInstance.close();
|
||
// }
|
||
console.log("listhandleServiceBusy", list);
|
||
let obj: any = {};
|
||
if (list && list.length > 0) {
|
||
list.forEach((item: any) => {
|
||
obj[item.SERVERPART_ID] = item.AVR_TICKET;
|
||
});
|
||
}
|
||
if (defaultServerPartList && defaultServerPartList.length > 0) {
|
||
defaultServerPartList.forEach((item: any) => {
|
||
if (obj[item.SERVERPART_ID] || obj[item.SERVERPART_ID] === 0) {
|
||
item.AVR_TICKET = obj[item.SERVERPART_ID];
|
||
}
|
||
});
|
||
}
|
||
console.log("defaultServerPartList", defaultServerPartList);
|
||
|
||
// 将进入搜索状态的服务区正常圆点 变回正常颜色
|
||
let current: any = handleGetThisLayer("pointLayer");
|
||
console.log("current", current);
|
||
|
||
current.setData(defaultServerPartList);
|
||
current.color("AVR_TICKET", (value: number) => {
|
||
return value >= 30
|
||
? "#E64218"
|
||
: value > 15 && value < 30
|
||
? "#EFE271"
|
||
: "#1BAAE6";
|
||
// return value >= 30
|
||
// ? "#f53232"
|
||
// : value > 15 && value < 30
|
||
// ? "#0fdb5c"
|
||
// : "#2876EB";
|
||
});
|
||
current.render();
|
||
}
|
||
};
|
||
|
||
// 服务区巡检的实际方法
|
||
const handleAreaInspection = async (i: number) => {
|
||
let list = [];
|
||
if (defaultServerPartList && defaultServerPartList.length > 0) {
|
||
let firstObj: any = {};
|
||
let otherList: any = [];
|
||
defaultServerPartList.forEach((item: any) => {
|
||
if (item.SERVERPART_ID === 416) {
|
||
firstObj = item;
|
||
} else {
|
||
otherList.push(item);
|
||
}
|
||
});
|
||
list = otherList;
|
||
list.unshift(firstObj);
|
||
}
|
||
|
||
if (i < list.length) {
|
||
// i 为当前执行到第几项的索引
|
||
currentServerPartDetail.value = list[i];
|
||
// 先给上一次的图层 添加清除
|
||
handleDeleteNoDefault("");
|
||
// 每次巡检前 把 悬浮框先给隐藏起来
|
||
hoverPoint.value.style.display = "none";
|
||
// 给当前索引的服务区 加上选中的效果
|
||
handleAddSelect(currentServerPartDetail.value);
|
||
console.log(i, currentServerPartDetail.value);
|
||
// 图层样式添加
|
||
await handleChangeMapShow("1,2,4", false);
|
||
// 拿到 经营数据 在营商家
|
||
let answerData: any =
|
||
await RobotDialogueBoxRef.value.handleInspectionQuestions(
|
||
`${currentServerPartDetail.value.SERVERPART_NAME}经营数据`
|
||
);
|
||
let merchantData: any =
|
||
await RobotDialogueBoxRef.value.handleInspectionQuestions(
|
||
`${currentServerPartDetail.value.SERVERPART_NAME}在营商家`
|
||
);
|
||
console.log("answerData3213123", answerData);
|
||
|
||
// 其他要显示的文字
|
||
let otherObj: any = {
|
||
businessText: answerData
|
||
.replace(/"/g, "'")
|
||
.replace(/{{(.*?)}}/g, (_: any, expression: any) => {
|
||
try {
|
||
// 使用 eval 执行模板字符串中的 JavaScript 表达式
|
||
// 注意：eval 存在安全风险，实际使用中需小心。
|
||
return eval(expression.trim()); // 执行并返回结果
|
||
} catch (error) {
|
||
console.error("错误：", error);
|
||
return ""; // 出现错误时返回空字符串
|
||
}
|
||
}),
|
||
merchantText: merchantData
|
||
.replace(/"/g, "'")
|
||
.replace(/{{(.*?)}}/g, (_: any, expression: any) => {
|
||
try {
|
||
// 使用 eval 执行模板字符串中的 JavaScript 表达式
|
||
// 注意：eval 存在安全风险，实际使用中需小心。
|
||
return eval(expression.trim()); // 执行并返回结果
|
||
} catch (error) {
|
||
console.error("错误：", error);
|
||
return ""; // 出现错误时返回空字符串
|
||
}
|
||
}),
|
||
};
|
||
|
||
nextTick(async () => {
|
||
currentServerPartDetail.value = defaultServerPartList[i];
|
||
let nowDetail: any = JSON.parse(JSON.stringify(defaultServerPartList[i]));
|
||
// 对话框样式内容添加
|
||
RobotDialogueBoxRef.value.handleInspectionDialogueBox(
|
||
nowDetail,
|
||
otherObj
|
||
);
|
||
});
|
||
} else {
|
||
RobotDialogueBoxRef.value.closeInspection();
|
||
}
|
||
|
||
// for (let i = 0; i < defaultServerPartList.length; i++) {
|
||
// const loadingInstance = ElLoading.service({
|
||
// fullscreen: true,
|
||
// background: "#00000080",
|
||
// text: "数据加载中...",
|
||
// });
|
||
|
||
// loadingInstance.close();
|
||
// }
|
||
};
|
||
|
||
// 隐藏悬浮框
|
||
const handleHiddenSuspended = () => {
|
||
hoverPoint.value.style.display = "none";
|
||
};
|
||
|
||
// 关闭右侧服务区详情
|
||
const handleCloseRightDetail = () => {
|
||
showRightDetail.value = false;
|
||
};
|
||
|
||
// 机器人是否显示的状态
|
||
const handleShowAi = (value: boolean) => {
|
||
isShowAi.value = value;
|
||
};
|
||
|
||
// 右侧详情是否显示
|
||
const handleShowDetail = (value: boolean) => {
|
||
isShowDetail.value = value;
|
||
};
|
||
|
||
// 判断是不是对话框 新增了右侧的查询项
|
||
const handleChangeRightFilterInDialogue = (id?: string) => {
|
||
RightSearchBoxRef.value.handleChangeFilterNoWatch(id);
|
||
};
|
||
|
||
// 请求服务区的实时数据 每个服务区上面加个div显示的那种
|
||
const handleGetRealServiceList = async () => {
|
||
const req: any = {
|
||
ProvinceCode: baseInfoObj.value.ProvinceCode,
|
||
};
|
||
const data = await handleGetTransactionDetailList(req);
|
||
console.log("handleGetRealServiceList", data);
|
||
realRevenueList = data;
|
||
let list: any = handleShowRevenuePoint(data);
|
||
console.log("listdadasd", list);
|
||
let bigIndex: number = list.length;
|
||
|
||
// 根据顺序 显示每组五个的锚点div 每10秒更新一次
|
||
// 定时器 ID，用于清除定时器
|
||
console.log("bigIndex", bigIndex);
|
||
|
||
handleShowMapPoint(list[nowFifthIndex.value]);
|
||
nowFifthIndex.value++;
|
||
mapTimer = setInterval(() => {
|
||
if (bigIndex <= nowFifthIndex.value) {
|
||
nowFifthIndex.value = 0;
|
||
}
|
||
scene.value.removeAllMarkers();
|
||
handleShowMapPoint(list[nowFifthIndex.value]);
|
||
nowFifthIndex.value++;
|
||
}, 10000);
|
||
};
|
||
// 根据顺序 显示每组五个的锚点div 每10秒更新一次
|
||
const handleShowMapPoint = async (list: any) => {
|
||
console.log("list", list);
|
||
console.log("defaultServerPartList", defaultServerPartList);
|
||
let detailObj: any = {};
|
||
if (list && list.length > 0) {
|
||
list.forEach((item: any) => {
|
||
detailObj[item.Serverpart_ID] = item;
|
||
});
|
||
}
|
||
|
||
console.log("detailObj", detailObj);
|
||
defaultServerPartList.forEach((item: any) => {
|
||
if (detailObj[item.SERVERPART_ID]) {
|
||
let obj = detailObj[item.SERVERPART_ID];
|
||
item.realRevenueDetail = obj;
|
||
const el = document.createElement("div");
|
||
el.style.maxWidth = "20rem";
|
||
el.style.boxSizing = "border-box";
|
||
el.style.padding = "6px";
|
||
el.style.background = "rgba(56, 56, 56, 0.8)";
|
||
el.style.borderRadius = "8px";
|
||
el.style.color = "#fff";
|
||
el.style.fontSize = "1rem";
|
||
|
||
// 根据列表数据 写innerHTML的字符串
|
||
let listStr: string = "";
|
||
if (obj.TimeList && obj.TimeList.length > 0) {
|
||
if (obj.TimeList && obj.TimeList.length > 1) {
|
||
obj.TimeList = obj.TimeList.slice(0, 1);
|
||
}
|
||
|
||
obj.TimeList.forEach((subItem: any) => {
|
||
let smallStr: string = "";
|
||
if (subItem.sellList && subItem.sellList.length > 0) {
|
||
subItem.sellList.forEach((thirdItem: any) => {
|
||
if (smallStr) {
|
||
smallStr += `,${thirdItem.CommodityName}：${thirdItem.SellCount}件`;
|
||
} else {
|
||
smallStr = `${thirdItem.CommodityName}：${thirdItem.SellCount}件`;
|
||
}
|
||
});
|
||
}
|
||
let shop: string = `<div style="white-space: wrap;">${subItem.ServerpartShop_Name}：${smallStr}</div>`;
|
||
listStr += shop;
|
||
});
|
||
}
|
||
|
||
el.innerHTML = `<div style="white-space: wrap;">${obj.Serverpart_Name}</div><div style="white-space: wrap;">实时交易金额：${obj.CurRevenueAmount}元</div>${listStr}`;
|
||
const marker = new Marker({ element: el }).setLnglat([
|
||
item.SERVERPART_X,
|
||
item.SERVERPART_Y,
|
||
] as any);
|
||
scene.value.addMarker(marker);
|
||
} else {
|
||
item.realRevenueDetail = undefined;
|
||
}
|
||
});
|
||
|
||
// return;
|
||
|
||
// defaultServerPartList.forEach((item: any) => {
|
||
// if (item.weatherModel) {
|
||
// if (item.weatherModel.DAY_WEATHER_PIC) {
|
||
// const el = document.createElement("div");
|
||
// el.style.width = "32px";
|
||
// el.style.height = "24px";
|
||
// el.style.paddingBottom = "4px";
|
||
// el.style.textAlign = "center";
|
||
|
||
// // 创建并插入 <img> 元素
|
||
// const img = document.createElement("img");
|
||
// img.src = item.weatherModel.DAY_WEATHER_PIC;
|
||
// img.style.width = "15px";
|
||
// img.style.height = "15px";
|
||
// img.style.borderRadius = "50%"; // 圆形图片（可选）
|
||
// // img.title = item.DAY_WEATHER
|
||
// el.appendChild(img);
|
||
// const marker = new Marker({ element: el }).setLnglat([
|
||
// item.SERVERPART_X,
|
||
// item.SERVERPART_Y,
|
||
// ] as any);
|
||
// if (currentServerPartDetail.value) {
|
||
// if (
|
||
// item.SERVERPART_ID === currentServerPartDetail.value.SERVERPART_ID
|
||
// ) {
|
||
// scene.value.addMarker(marker);
|
||
// }
|
||
// } else if (
|
||
// searchSelectServerPartId &&
|
||
// searchSelectServerPartId.length > 0
|
||
// ) {
|
||
// if (
|
||
// searchSelectServerPartId.indexOf(item.SERVERPART_ID.toString()) !==
|
||
// -1
|
||
// ) {
|
||
// scene.value.addMarker(marker);
|
||
// }
|
||
// } else {
|
||
// scene.value.addMarker(marker);
|
||
// }
|
||
// }
|
||
// }
|
||
// });
|
||
};
|
||
// 根据当前的有了的实时营收数组 按照五个 五个一组的顺序 在地图上进行标出div
|
||
const handleShowRevenuePoint = (list: any) => {
|
||
// nowFifthIndex
|
||
if (list && list.length > 0) {
|
||
let newList: any = JSON.parse(JSON.stringify(list));
|
||
console.log("newList", newList);
|
||
// 将数组分为每5个元素为一组
|
||
let paginated = [];
|
||
for (let i = 0; i < newList.length; i += 5) {
|
||
paginated.push(newList.slice(i, i + 5));
|
||
}
|
||
return paginated;
|
||
}
|
||
};
|
||
|
||
// 标记出附近的服务区
|
||
const handleNearServiceList = async () => {
|
||
handleCloseRightDetail();
|
||
console.log("fdsjfhds");
|
||
console.log("dsadas", currentServerPartDetail);
|
||
if (currentServerPartDetail.value) {
|
||
const req: any = {
|
||
PageIndex: 1,
|
||
PageSize: 100,
|
||
SearchParameter: {
|
||
SERVERPART_IDS: currentServerPartDetail.value.SERVERPART_ID,
|
||
},
|
||
};
|
||
const data = await handleGetGDNearServiceList(req);
|
||
let current: any = handleGetThisLayer("nearServiceList");
|
||
console.log("data3212", data);
|
||
let list: any = [];
|
||
if (data && data.length > 0) {
|
||
data.forEach((item: any) => {
|
||
if (item.children && item.children.length > 0) {
|
||
item.children.forEach((subItem: any) => {
|
||
// 判断是否同省 且 id有 说明是驿达的
|
||
if (subItem.HASPROVINCE) {
|
||
if (subItem.SERVERPART_ID) {
|
||
subItem.showType = 1;
|
||
} else {
|
||
subItem.showType = 2;
|
||
}
|
||
} else {
|
||
subItem.showType = 3;
|
||
}
|
||
|
||
list.push(subItem);
|
||
});
|
||
}
|
||
list.push(item);
|
||
});
|
||
}
|
||
// 删除原有的 添加新的
|
||
if (current) {
|
||
scene.value.removeLayer(current);
|
||
}
|
||
let nearServiceList = new PointLayer({
|
||
zIndex: 100,
|
||
});
|
||
nearServiceList.name = "nearServiceList";
|
||
nearServiceList.source(list, {
|
||
parser: {
|
||
type: "json",
|
||
x: "SERVERPART_X",
|
||
y: "SERVERPART_Y",
|
||
},
|
||
});
|
||
nearServiceList.shape("circle");
|
||
nearServiceList.size(8);
|
||
// nearServiceList.color("#F70000");
|
||
nearServiceList.color("showType", (value: number) => {
|
||
// showType
|
||
// 1 同省驿达 2 同省非驿达 3 外省
|
||
return value === 1 ? "#F5F6F7" : value === 2 ? "#fdff3d" : "#F70000";
|
||
|
||
// value === null
|
||
// ? "#fdff3d"
|
||
// : value > 0 && value < 1000
|
||
// ? "#F5F6F7"
|
||
// : "#F70000";
|
||
// value > 0 && value < 1000 ? "#F5F6F7" : "#fdff3d" : "#F70000";
|
||
});
|
||
nearServiceList.style({
|
||
opacity: 0.7, // 透明度
|
||
});
|
||
|
||
nearServiceList.on("mousemove", (ev: any) => {
|
||
const detail: any = ev.feature;
|
||
hoverPoint.value.style.top = `${ev.y + 5}px`;
|
||
hoverPoint.value.style.left = `${ev.x + 5}px`;
|
||
hoverPoint.value.style.display = "block";
|
||
hoverPoint.value.innerHTML = `<div>
|
||
<div>${detail?.SERVERPART_NAME || ""}</div>
|
||
<div>直线距离：${detail.SELECT_DISTANCE || ""}km</div>
|
||
<div>路线距离：${detail.REAL_DISTANCE || ""}km</div>
|
||
</div>`;
|
||
});
|
||
nearServiceList.on("mouseout", (ev: any) => {
|
||
hoverPoint.value.style.display = "none";
|
||
});
|
||
|
||
scene.value.addLayer(nearServiceList);
|
||
} else {
|
||
ElMessage({
|
||
message: "请先选择服务区！",
|
||
type: "warning",
|
||
});
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<div id="map" class="mapBox">
|
||
<div class="RobotBox" v-if="baseInfoObj?.ShowAIQA">
|
||
<RobotDialogueBox ref="RobotDialogueBoxRef" @handleLightServerpart="handleLightServerpart"
|
||
@handleEnterySearch="handleEnterySearch" @handleWarningMap="handleWarningMap"
|
||
@handleAreaInspection="handleAreaInspection" @handleHiddenSuspended="handleHiddenSuspended"
|
||
@handleShowAi="handleShowAi" @handleChangeRightFilterInDialogue="handleChangeRightFilterInDialogue"
|
||
@handleDeleteNoDefault="handleDeleteNoDefault" :currentServerPartDetail="currentServerPartDetail"
|
||
:allServerPartIdList="allServerPartIdList" />
|
||
</div>
|
||
|
||
<div class="rightSearchBox" :style="{ right: showRightDetail ? 'calc(25% + 8px)' : '16px' }">
|
||
<RightSearchBox ref="RightSearchBoxRef" @handleChangeMapShow="handleChangeMapShow"
|
||
@handleDeleteSelect="handleDeleteSelect" @handleHiddenSuspended="handleHiddenSuspended"
|
||
@handleNearServiceList="handleNearServiceList" :currentServerPartDetail="currentServerPartDetail" />
|
||
</div>
|
||
<div class="serverpartDetail" :style="{ right: showRightDetail ? '0' : '-25%' }">
|
||
<!-- v-if="showRightDetail" -->
|
||
<RightDetail ref="RightDetailRef" :currentServerPartDetail="currentServerPartDetail"
|
||
@handleCloseRightDetail="handleCloseRightDetail" @handleShowDetail="handleShowDetail" />
|
||
</div>
|
||
|
||
<!-- 实时营收的box -->
|
||
<div class="realBox" v-show="isShowAi || isShowDetail
|
||
? false
|
||
: baseInfoObj?.ShowRevenueGraphic && isShowRealData
|
||
? true
|
||
: false
|
||
">
|
||
<!-- v-if="baseInfoObj?.ShowRevenueGraphic && isShowAi || isShowDetail" -->
|
||
<RealBox ref="RealBoxRef" :show="isShowAi || isShowDetail
|
||
? false
|
||
: baseInfoObj?.ShowRevenueGraphic && isShowRealData
|
||
? true
|
||
: false
|
||
" />
|
||
</div>
|
||
|
||
<!-- 片区图例 -->
|
||
<div class="areaListLegend" v-if="SPREGIONTYPECOLORList && SPREGIONTYPECOLORList.length > 0">
|
||
<div class="areaItem" v-for="(item, index) in SPREGIONTYPECOLORList" :key="index">
|
||
<span class="color" :style="{ background: item.value }"></span>
|
||
<span class="text">{{ item.label }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 区域营收占比 -->
|
||
<div class="revenueRate" v-show="isShowAi || isShowDetail
|
||
? false
|
||
: baseInfoObj?.ShowRevenueGraphic && isShowRealData
|
||
? true
|
||
: false
|
||
">
|
||
<RevenueRate ref="revenueRateRef" :SPREGIONTYPECOLOR="SPREGIONTYPECOLOR" :show="isShowAi || isShowDetail
|
||
? false
|
||
: baseInfoObj?.ShowRevenueGraphic && isShowRealData
|
||
? true
|
||
: false
|
||
" />
|
||
</div>
|
||
|
||
<!-- 消费金额趋势图 -->
|
||
<div class="BusyRanking" v-show="isShowAi || isShowDetail
|
||
? false
|
||
: baseInfoObj?.ShowRevenueGraphic && isShowRealData
|
||
? true
|
||
: false
|
||
">
|
||
<BusyRanking ref="BusyRankingRef" :show="isShowAi || isShowDetail
|
||
? false
|
||
: baseInfoObj?.ShowRevenueGraphic && isShowRealData
|
||
? true
|
||
: false
|
||
" @handleServiceBusy="handleServiceBusy" />
|
||
</div>
|
||
</div>
|
||
</template> |