fix(amap):core
This commit is contained in:
parent
fd954a753a
commit
cfbcbe31a1
|
@ -1,6 +1,7 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import MapUtl from "./mapUtil";
|
||||
import { mapArrs } from "@/store/map";
|
||||
|
||||
export default function MapContainer() {
|
||||
let [amap, setmaps] = useState<any>(null);
|
||||
|
@ -16,7 +17,7 @@ export default function MapContainer() {
|
|||
const Amap = await AMapLoader.load({
|
||||
key: "d58999d072ed7e5897d3900a769cfda0", // 申请好的Web端开发者Key,首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
|
||||
plugins: ["AMap.Scale","AMap.MoveAnimation","AMap.Weather,AMap.DistrictSearch"],
|
||||
plugins: ["AMap.Scale", "AMap.MoveAnimation", "AMap.Weather"],
|
||||
});
|
||||
|
||||
amap = new Amap.Map("container", {
|
||||
|
@ -26,34 +27,47 @@ export default function MapContainer() {
|
|||
mapStyle: "amap://styles/darkblue",
|
||||
resizeEnable: true,
|
||||
});
|
||||
const district = new Amap.DistrictSearch({
|
||||
subdistrict: 3, //返回下一级行政区
|
||||
extensions: "all", //返回行政区边界坐标组等具体信息
|
||||
level: "street", //查询行政级别为 市
|
||||
// const bundler = result.districtList[0].boundaries;
|
||||
const bundler: Array<any> = [];
|
||||
mapArrs.forEach((item) => {
|
||||
let db = MapUtl.bdConvertGd(item);
|
||||
bundler.push(db);
|
||||
});
|
||||
district.search("510116", function (status,result){
|
||||
if(status === "complete"){
|
||||
const bundler = result.districtList[0].boundaries;
|
||||
const polygon = new Amap.Polygon({
|
||||
map: amap,
|
||||
path: bundler,
|
||||
strokeColor: "#ef9363", //线颜色
|
||||
strokeColor: "#85b0ec", //线颜色
|
||||
strokeOpacity: 0.8, //线透明度
|
||||
strokeWeight: 2, //线宽
|
||||
fillColor: "#ef9363", //填充色
|
||||
fillColor: "#85b0ec", //填充色
|
||||
fillOpacity: 0.3, //填充透明度
|
||||
});
|
||||
amap.add(polygon)
|
||||
amap.add(polygon);
|
||||
amap.setFitView();
|
||||
}
|
||||
})
|
||||
|
||||
setmaps(amap);
|
||||
// addMaket(Amap,amap);
|
||||
MapUtl.loadMap = Amap;
|
||||
MapUtl.amap = amap;
|
||||
|
||||
[
|
||||
{ title: "红桥微型消防站", po: [103.889435, 30.528084] },
|
||||
{ title: "桃荚微型消防站", po: [103.89066, 30.506378] },
|
||||
{ title: "文武微型消防站", po: [103.85076, 30.518194] },
|
||||
{ title: "长沟微型消防站", po: [103.9063, 30.556198] },
|
||||
{ title: "应天微型消防站", po: [103.90963, 30.530624] },
|
||||
{ title: "花龙村微型消防站", po: [103.92564, 30.45827] },
|
||||
{ title: "白塔小型消防站", po: [103.9049, 30.503006] },
|
||||
].forEach((item) => {
|
||||
MapUtl.addMakerDis({
|
||||
lng: item.po[0],
|
||||
lat: item.po[1],
|
||||
title: item.title,
|
||||
});
|
||||
});
|
||||
|
||||
var weather = new Amap.Weather();
|
||||
MapUtl.wecherInfo = weather
|
||||
MapUtl.wecherInfo = weather;
|
||||
amap.setFitView();
|
||||
};
|
||||
|
||||
|
|
|
@ -35,6 +35,33 @@ class MapUtl {
|
|||
marker: marker
|
||||
})
|
||||
}
|
||||
static addMakerDis(data: any) {
|
||||
const { lng, lat, title } = data;
|
||||
const marker = new MapUtl.loadMap.Marker({
|
||||
position: new MapUtl.loadMap.LngLat(lng, lat),
|
||||
icon: new MapUtl.loadMap.Icon({
|
||||
image:
|
||||
"https://img20.360buyimg.com/n1/jfs/t1/98676/8/28819/96905/62e1e96eE69561497/0e201e39d6d1c1e3.png",
|
||||
imageSize: [30, 30],
|
||||
}),
|
||||
title: title,
|
||||
});
|
||||
var content = [
|
||||
"<div><b>站点名称 :" + title + "</b>",
|
||||
// "职位 : " + users.pos_held,
|
||||
// "电话 : " + users.tel,
|
||||
"</div>",
|
||||
];
|
||||
var infoWindow = new MapUtl.loadMap.InfoWindow({
|
||||
offset: new MapUtl.loadMap.Pixel(0, -30),
|
||||
autoMove: true,
|
||||
content: content.join("<br/>"),
|
||||
});
|
||||
marker.on("click", (e) => {
|
||||
infoWindow.open(MapUtl.amap, e.target.getPosition());
|
||||
});
|
||||
MapUtl.amap?.add(marker);
|
||||
}
|
||||
static setMakericon = (maker) => {
|
||||
maker.setPosition([103.55, 30.342]);
|
||||
var m = MapUtl.amap;
|
||||
|
@ -79,6 +106,19 @@ class MapUtl {
|
|||
static getWecher() {
|
||||
|
||||
}
|
||||
// 百度转高德
|
||||
static bdConvertGd(coordinate) {
|
||||
var bd_lng = coordinate[0];
|
||||
var bd_lat = coordinate[1];
|
||||
var pi = 3.14159265358979324 * 3000.0 / 180.0;
|
||||
var x = bd_lng - 0.0065;
|
||||
var y = bd_lat - 0.006;
|
||||
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
|
||||
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
|
||||
var gd_lng = z * Math.cos(theta);
|
||||
var gd_lat = z * Math.sin(theta);
|
||||
return [gd_lng, gd_lat];
|
||||
}
|
||||
}
|
||||
|
||||
export default MapUtl;
|
|
@ -85,6 +85,7 @@ const OrgChartSelf = (props: Store) => {
|
|||
{v.depId === 1 ? (
|
||||
<div className="userNameCont">
|
||||
{v.users?.map((v1, _) => {
|
||||
console.log(v1);
|
||||
return (
|
||||
<div key={v1.user_name} className="userNmaeBox">
|
||||
<img
|
||||
|
@ -94,7 +95,7 @@ const OrgChartSelf = (props: Store) => {
|
|||
backgroundColor: "#fff",
|
||||
}}
|
||||
width={50}
|
||||
src="https://pic.aigexing.net/uploads/5/1253/3721116011/92968290915/8785297.jpg"
|
||||
src={v1.headImg}
|
||||
alt=""
|
||||
/>
|
||||
<span className="userNmae">{v1.user_name}</span>
|
||||
|
|
|
@ -13,6 +13,17 @@ const Turn = (props: Store) => {
|
|||
const [imageUrl, setImageUrl] = useState<any>([]);
|
||||
const [taskId, setTaskId] = useState<any>([]);
|
||||
const [folderId, setFolderId] = useState<any>([]);
|
||||
const getFileTypeFromUrl = (url) => {
|
||||
console.log(url);
|
||||
|
||||
if (url === "" || url.length === 0) return;
|
||||
// 解析URL以提取文件名
|
||||
const filename = url.split("/").pop();
|
||||
// 获取文件扩展名
|
||||
const fileExtension = filename.split(".").pop();
|
||||
// 返回文件扩展名
|
||||
return fileExtension;
|
||||
};
|
||||
|
||||
const initChart = (data) => {
|
||||
var myChart = echarts.init(document.getElementById("xunlian"));
|
||||
|
@ -45,7 +56,67 @@ const Turn = (props: Store) => {
|
|||
setImageList(folderStore.alist ?? []);
|
||||
});
|
||||
};
|
||||
const imageWidget = (item) => {
|
||||
return (
|
||||
<img
|
||||
onClick={() => {
|
||||
setImageUrl(item.file_url);
|
||||
}}
|
||||
key={item.identity}
|
||||
style={{ width: "80px", height: "80px" }}
|
||||
src={item.file_url}
|
||||
alt=""
|
||||
/>
|
||||
);
|
||||
};
|
||||
const preView = () => {
|
||||
let fileType = getFileTypeFromUrl(imageUrl);
|
||||
switch (fileType) {
|
||||
case "jpeg":
|
||||
return <img style={{ width: "100%" }} src={imageUrl} alt="" />;
|
||||
|
||||
case "jpg":
|
||||
return <img style={{ width: "100%" }} src={imageUrl} alt="" />;
|
||||
case "png":
|
||||
return <img style={{ width: "100%" }} src={imageUrl} alt="" />;
|
||||
case "pdf":
|
||||
return (
|
||||
<div style={{ width: "100%", height: "500px" }}>
|
||||
<iframe
|
||||
style={{ width: "100%", height: "500px" }}
|
||||
src={imageUrl}
|
||||
title="描述"
|
||||
></iframe>
|
||||
;
|
||||
</div>
|
||||
);
|
||||
case "mp4":
|
||||
return (
|
||||
<div style={{ width: "100%", height: "600px" }}>
|
||||
<video
|
||||
controls
|
||||
style={{ width: "100%", height: "600px" }}
|
||||
src={imageUrl}
|
||||
></video>
|
||||
</div>
|
||||
);
|
||||
case "docx":
|
||||
return (
|
||||
<div style={{ width: "100%", height: "600px" }}>
|
||||
<iframe
|
||||
style={{ width: "100%", height: "600px" }}
|
||||
src={imageUrl}
|
||||
title="描述"
|
||||
></iframe>
|
||||
;
|
||||
</div>
|
||||
);
|
||||
case "":
|
||||
return <div style={{ width: "100%", height: "600px" }}></div>;
|
||||
default:
|
||||
return <div style={{ width: "100%", height: "600px" }}></div>;
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
|
@ -56,7 +127,7 @@ const Turn = (props: Store) => {
|
|||
<Modal
|
||||
title="年度训练"
|
||||
className="owner_model"
|
||||
width={1200}
|
||||
width={1100}
|
||||
open={isModalOpen}
|
||||
afterClose={() => {}}
|
||||
onOk={() => {}}
|
||||
|
@ -68,7 +139,7 @@ const Turn = (props: Store) => {
|
|||
<>
|
||||
<Row>
|
||||
<Col span={2}>
|
||||
<div style={{ color: "#fff", margin: "10px" }}>
|
||||
<div style={{ color: "#fff" }}>
|
||||
<p>任务列表</p>
|
||||
{trainingStore.list?.map((item) => {
|
||||
return (
|
||||
|
@ -90,17 +161,18 @@ const Turn = (props: Store) => {
|
|||
</div>
|
||||
</Col>
|
||||
<Col span={2}>
|
||||
<div style={{ color: "#fff", margin: "10px" }}>
|
||||
<div style={{ color: "#fff" }}>
|
||||
<p>文件夹列表</p>
|
||||
{folderList?.map((item) => {
|
||||
return (
|
||||
<p
|
||||
key={item.identity}
|
||||
style={{
|
||||
color: folderId === item.identity ? "blue" : "#fff",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={() => {
|
||||
setFolderId(item.identity)
|
||||
setFolderId(item.identity);
|
||||
getAehandler(item.identity);
|
||||
}}
|
||||
>
|
||||
|
@ -111,29 +183,78 @@ const Turn = (props: Store) => {
|
|||
</div>
|
||||
</Col>
|
||||
<Col span={2}>
|
||||
<div style={{ color: "#fff", margin: "10px" }}>
|
||||
<div style={{ color: "#fff" }}>
|
||||
<p>档案列表</p>
|
||||
{imageList?.map((item) => {
|
||||
let fileType = getFileTypeFromUrl(item.file_url);
|
||||
switch (fileType) {
|
||||
case "png":
|
||||
return imageWidget(item);
|
||||
case "jpeg":
|
||||
return imageWidget(item);
|
||||
case "jpg":
|
||||
return imageWidget(item);
|
||||
case "pdf":
|
||||
return (
|
||||
<p
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => {
|
||||
setImageUrl(item.file_url);
|
||||
}}
|
||||
>
|
||||
{item.file_name}
|
||||
</p>
|
||||
);
|
||||
case "mp4":
|
||||
return (
|
||||
<p
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => {
|
||||
setImageUrl(item.file_url);
|
||||
}}
|
||||
>
|
||||
{item.file_name}
|
||||
</p>
|
||||
);
|
||||
case "docx":
|
||||
return (
|
||||
<p
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => {
|
||||
setImageUrl(item.file_url);
|
||||
}}
|
||||
>
|
||||
{item.file_name}
|
||||
</p>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<img
|
||||
onClick={() => {
|
||||
setImageUrl(item.file_url);
|
||||
}}
|
||||
style={{ width: "80px", height: "80px" }}
|
||||
key={item.identity}
|
||||
style={{ width: "80px" }}
|
||||
src={item.file_url}
|
||||
alt=""
|
||||
/>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={18}>
|
||||
<div style={{ color: "#fff" }}>
|
||||
<img
|
||||
style={{ width: "100%", height: "800px" }}
|
||||
src={imageUrl}
|
||||
alt=""
|
||||
/>
|
||||
<Col span={16}>
|
||||
<div
|
||||
style={{
|
||||
color: "#fff",
|
||||
margin: "10px",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
{preView()}
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
|
@ -1,17 +1,22 @@
|
|||
const bz = require("@/static/user_head/刘先良.webp")
|
||||
const jdy = require("@/static/user_head/晏巍.png")
|
||||
export const orgData = [
|
||||
{
|
||||
dep_name: "镇武装部党委",
|
||||
depId: 1,
|
||||
users: [
|
||||
{
|
||||
position: "武装部长",
|
||||
user_name: "李部长",
|
||||
userId: 1,
|
||||
},
|
||||
|
||||
{
|
||||
position: "教导员",
|
||||
user_name: "王教导",
|
||||
user_name: "晏 巍",
|
||||
userId: 2,
|
||||
headImg:jdy
|
||||
},
|
||||
{
|
||||
position: "武装部长",
|
||||
user_name: "刘先良",
|
||||
userId: 1,
|
||||
headImg:bz
|
||||
},
|
||||
],
|
||||
children: [
|
||||
|
@ -94,7 +99,7 @@ export const orgData = [
|
|||
users: [
|
||||
{
|
||||
position: "文武社区支部书记",
|
||||
user_name: "书记名称",
|
||||
user_name: "袁建强",
|
||||
userId: 3,
|
||||
},
|
||||
],
|
||||
|
@ -170,7 +175,7 @@ export const orgData = [
|
|||
users: [
|
||||
{
|
||||
position: "花龙村支部书记",
|
||||
user_name: "书记名称",
|
||||
user_name: "肖冬",
|
||||
userId: 4,
|
||||
},
|
||||
],
|
||||
|
@ -235,7 +240,7 @@ export const orgData = [
|
|||
users: [
|
||||
{
|
||||
position: "云华社区支部书记",
|
||||
user_name: "书记名称",
|
||||
user_name: "黄忠",
|
||||
userId: 5,
|
||||
},
|
||||
],
|
||||
|
|
|
@ -52,7 +52,9 @@ const PvTable = (props: Store) => {
|
|||
<tbody>
|
||||
{usrStore.list?.map((us,i) => {
|
||||
return (
|
||||
<tr onClick={(e) => {
|
||||
<tr
|
||||
key={us.id}
|
||||
onClick={(e) => {
|
||||
usrStore.setUserDetaul(us)
|
||||
usrStore.setPoverDe(true)
|
||||
}}>
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
After Width: | Height: | Size: 140 KiB |
|
@ -44,8 +44,6 @@ class BaseStore<B> implements BaseStoreInterface<B> {
|
|||
}
|
||||
// 分页
|
||||
setPages(page: Pages) {
|
||||
console.log(page);
|
||||
|
||||
this.page = page
|
||||
this.getlist()
|
||||
}
|
||||
|
@ -72,7 +70,6 @@ class BaseStore<B> implements BaseStoreInterface<B> {
|
|||
message.error(res.msg)
|
||||
return false
|
||||
}
|
||||
|
||||
this.getlist(listParam)
|
||||
return true;
|
||||
} catch (error) {
|
||||
|
@ -83,7 +80,6 @@ class BaseStore<B> implements BaseStoreInterface<B> {
|
|||
// 获取列表
|
||||
async getlist(params?: any) {
|
||||
this.listStatus = true;
|
||||
console.log(this.page);
|
||||
try {
|
||||
let res = await baseHttp.get(this.urlConfig.LIST, {
|
||||
size: this.page?.Size ?? 20,
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -6,6 +6,7 @@ class Config {
|
|||
// static ws = "ws://127.0.0.1:12214/ws?id=admin";
|
||||
// static baseUrl = "http://127.0.0.1:12214/";
|
||||
// static uploadUrl = "http://127.0.0.1:12214/";
|
||||
|
||||
}
|
||||
export default Config;
|
||||
|
||||
|
|
Loading…
Reference in New Issue