安全危害因素（第一版）
This commit is contained in:
@@ -8,10 +8,10 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="../res/lib/flex.js"></script>
|
||||
<link rel="stylesheet" href="../res/homecss/common.css?v=202512" />
|
||||
<link rel="stylesheet" href="../res/homecss/layout.css?v=202512" />
|
||||
<link rel="stylesheet" href="../res/homecss/index.css?v=20251208" />
|
||||
<%--<link rel="stylesheet" href="../res/homecss/safe.css?v=202512" />--%>
|
||||
<link rel="stylesheet" href="../res/homecss/common.css?v=202603" />
|
||||
<link rel="stylesheet" href="../res/homecss/layout.css?v=202603" />
|
||||
<link rel="stylesheet" href="../res/homecss/index.css?v=202604" />
|
||||
<%--<link rel="stylesheet" href="../res/homecss/safe.css?v=202603" />--%>
|
||||
</head>
|
||||
<body style="background-color: #001B35;">
|
||||
<div id="app">
|
||||
@@ -170,7 +170,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="map"></div>
|
||||
<%--<div id="map"></div>--%>
|
||||
<div class="map">
|
||||
<div id="map"></div>
|
||||
<div class="change-map" @click="handleChangeMap">{{mapType ? '中国地图' : '世界地图'}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="side">
|
||||
<div class="site_500" style="height: 2.7rem; margin-bottom: 0.25rem">
|
||||
@@ -282,10 +286,11 @@
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<script src="../res/lib/vue.min.js?v=20251"></script>
|
||||
<script src="../res/lib/echarts.min.js?v=20251"></script>
|
||||
<script src="../res/lib/china1.js?v=20251"></script>
|
||||
<script src="../res/lib/jquery.js?v=20251"></script>
|
||||
<script src="../res/lib/vue.min.js?v=202603"></script>
|
||||
<script src="../res/lib/echarts.min.js?v=202603"></script>
|
||||
<script src="../res/lib/china1.js?v=202603"></script>
|
||||
<script src="../res/lib/jquery.js?v=202603"></script>
|
||||
<script src="../res/lib/world.js?v=202603"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
@@ -302,7 +307,9 @@
|
||||
form: {},
|
||||
// 当前时间显示
|
||||
nowTime: '09:00:12',
|
||||
chinaData: []
|
||||
chinaData: [],
|
||||
chainaMap: null,
|
||||
mapType: true,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -331,7 +338,8 @@
|
||||
that.chinaData = [...response.d.data.chinaData]; // 更新地图数据
|
||||
//console.log("地图数据",that.chinaData);
|
||||
that.createChinaMap(that.chinaData); // 重新创建地图
|
||||
console.log("form", that.form)
|
||||
//console.log("form", that.form)
|
||||
that.createWorldMap(that.chinaData); // 重新创建地图
|
||||
} else {
|
||||
// 更新数据失败
|
||||
alert("加载数据失败：" + response.d.msg);
|
||||
@@ -369,6 +377,14 @@
|
||||
//onRefresh() {
|
||||
// this.loadData(); // 重新加载数据
|
||||
//},
|
||||
handleChangeMap() {
|
||||
this.mapType = !this.mapType
|
||||
if (this.mapType) {
|
||||
this.createWorldMap(this.chinaData)
|
||||
} else {
|
||||
this.createChinaMap(this.chinaData)
|
||||
}
|
||||
},
|
||||
// 创建中国地图
|
||||
createChinaMap(data) {
|
||||
let list = data || [];
|
||||
@@ -533,6 +549,173 @@
|
||||
// 你可以在这里添加你的逻辑代码
|
||||
});
|
||||
},
|
||||
createWorldMap(data) {
|
||||
//let data = list || [
|
||||
// { value: [116.407394, 39.904211], name: "北京" }, // 北京
|
||||
// { value: [121.473668, 31.230389], name: "上海" }, // 上海
|
||||
// { value: [113.264385, 23.129086], name: "广州" }, // 广州
|
||||
// { value: [114.057868, 22.582846], name: "深圳" }, // 深圳
|
||||
//]
|
||||
if (!this.chainaMap) {
|
||||
this.chainaMap = echarts.init(document.getElementById("map"))
|
||||
}
|
||||
// 中国地图 配置
|
||||
echarts.registerMap("china", wordJson)
|
||||
let chinaOption = {
|
||||
geo: [
|
||||
{
|
||||
// 地理坐标系组件
|
||||
map: "china",
|
||||
roam: false, // 可以缩放和平移
|
||||
aspectScale: 0.85, // 比例
|
||||
top: 200,
|
||||
zlevel: 2,
|
||||
zoom: 1.2,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
regions: [
|
||||
{
|
||||
name: "南海诸岛",
|
||||
itemStyle: {
|
||||
// 隐藏地图
|
||||
normal: {
|
||||
opacity: 0, // 为 0 时不绘制该图形
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false, // 隐藏文字
|
||||
},
|
||||
},
|
||||
],
|
||||
itemStyle: {
|
||||
// 图形上的地图区域
|
||||
normal: {
|
||||
areaColor: "#07121B",
|
||||
borderColor: "#07121B",
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
// 地理坐标系组件
|
||||
map: "china",
|
||||
roam: false, // 可以缩放和平移
|
||||
aspectScale: 0.85, // 比例
|
||||
top: 190,
|
||||
zlevel: 9,
|
||||
zoom: 1.2,
|
||||
regions: [
|
||||
{
|
||||
name: "南海诸岛",
|
||||
itemStyle: {
|
||||
// 隐藏地图
|
||||
normal: {
|
||||
opacity: 0, // 为 0 时不绘制该图形
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false, // 隐藏文字
|
||||
},
|
||||
},
|
||||
],
|
||||
itemStyle: {
|
||||
// 图形上的地图区域
|
||||
normal: {
|
||||
areaColor: "#076393",
|
||||
borderColor: "#076393",
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "rgba(0,0,0,0.7)",
|
||||
borderColor: "#fff",
|
||||
borderWidth: 1,
|
||||
padding: 10,
|
||||
formatter: function (params) {
|
||||
console.log("地图数据明细", params)
|
||||
// 自定义 tooltip 内容
|
||||
if (params.seriesType === 'effectScatter') {
|
||||
return `<div style="color: white;">
|
||||
<p><strong>${params.name}</strong></p>
|
||||
<p>工程造价： ${params.data.projectMoney}万元</p>
|
||||
<p>开工时间： ${params.data.startDate}</p>
|
||||
<p>完工时间： ${params.data.endDate}</p>
|
||||
<p>项目地址： ${params.data.address}</p>
|
||||
</div>`;
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// 地理坐标系组件
|
||||
type: "map",
|
||||
map: "china",
|
||||
roam: false, // 可以缩放和平移
|
||||
aspectScale: 0.85, // 比例
|
||||
top: 180,
|
||||
zlevel: 12,
|
||||
zoom: 1.2,
|
||||
data: data,
|
||||
regions: [
|
||||
{
|
||||
name: "南海诸岛",
|
||||
label: {
|
||||
show: false, // 隐藏文字
|
||||
},
|
||||
},
|
||||
],
|
||||
itemStyle: {
|
||||
// 图形上的地图区域
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
areaColor: "rgba(0, 221, 255, .8)",
|
||||
borderColor: "RGBA(27, 225, 255, 1)",
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "散点",
|
||||
type: "effectScatter",
|
||||
coordinateSystem: "geo",
|
||||
data: data,
|
||||
zlevel: 14,
|
||||
symbolSize: 10,
|
||||
showEffectOn: "render",
|
||||
rippleEffect: {
|
||||
brushType: "stroke",
|
||||
},
|
||||
hoverAnimation: true,
|
||||
label: {
|
||||
formatter: "{b}",
|
||||
position: "right",
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#FBE795",
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
this.chainaMap.setOption(chinaOption)
|
||||
this.chainaMap.on("click", function (params) {
|
||||
//// 控制台打印点击的地区名称
|
||||
//if (params.seriesType == "effectScatter") {
|
||||
// alert("点击了" + params.name)
|
||||
//}
|
||||
//// 你可以在这里添加你的逻辑代码
|
||||
})
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user