Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in
Toggle navigation
H
huaxin-rq
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
耿迪迪
huaxin-rq
Commits
ed08a356
Commit
ed08a356
authored
Sep 24, 2026
by
纪泽龙
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'jzl'
parents
1cc420b1
f6381874
Hide whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
595 additions
and
321 deletions
+595
-321
index.html
huaxin-web/public/index.html
+40
-30
cjz.png
huaxin-web/src/assets/indexImg/cjz.png
+0
-0
cz2.png
huaxin-web/src/assets/indexImg/cz2.png
+0
-0
deviceIconTypeConfig.js
huaxin-web/src/utils/mapClass/deviceIconTypeConfig.js
+13
-5
newMap.js
huaxin-web/src/utils/mapClass/newMap.js
+55
-4
Left.vue
huaxin-web/src/views/bigWindow/Ind/components/Left.vue
+39
-17
Ind.vue
huaxin-web/src/views/bigWindow/Ind3/Ind.vue
+225
-75
Bottom.vue
huaxin-web/src/views/bigWindow/Ind3/components/Bottom.vue
+2
-1
Null.vue
huaxin-web/src/views/bigWindow/Ind3/components/Null.vue
+21
-0
StationInfo.vue
...n-web/src/views/bigWindow/Ind3/components/StationInfo.vue
+198
-188
vue.config.js
huaxin-web/vue.config.js
+2
-1
No files found.
huaxin-web/public/index.html
View file @
ed08a356
<!DOCTYPE html>
<html>
<head>
<meta
charset=
"utf-8"
>
<meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge,chrome=1"
>
<meta
name=
"renderer"
content=
"webkit"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
>
<link
rel=
"icon"
href=
"<%= BASE_URL %>favicon.ico"
>
<title><
%=
webpackConfig
.
name
%
></title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<script>
window
.
_AMapSecurityConfig
=
{
securityJsCode
:
'd4bb6c4d7a074701457bc9721eb7754a'
,
}
</script>
<script
src=
"https://webapi.amap.com/maps?v=2.0&key=49fcb156d466062435d7d33437099582&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.ControlBar,AMap.CircleEditor,AMap.PolyEditor"
></script>
<script
src=
"<%= BASE_URL %>h5player/h5player.min.js"
></script>
<script
src=
"<%= BASE_URL %>cesium/Cesium.js"
></script>
<link
rel=
"stylesheet"
href=
"<%= BASE_URL %>cesium/Widgets/widgets.css"
>
<style>
<head>
<meta
charset=
"utf-8"
>
<meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge,chrome=1"
>
<meta
name=
"renderer"
content=
"webkit"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
>
<link
rel=
"icon"
href=
"<%= BASE_URL %>favicon.ico"
>
<title>
<
%=
webpackConfig
.
name
%
>
</title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<script>
window
.
_AMapSecurityConfig
=
{
securityJsCode
:
'd4bb6c4d7a074701457bc9721eb7754a'
,
}
</script>
<script
src=
"https://webapi.amap.com/maps?v=2.0&key=49fcb156d466062435d7d33437099582&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.ControlBar,AMap.CircleEditor,AMap.PolyEditor"
></script>
<script
src=
"https://webapi.amap.com/loca?v=2.0.0&key=49fcb156d466062435d7d33437099582"
></script>
<script
src=
"<%= BASE_URL %>h5player/h5player.min.js"
></script>
<script
src=
"<%= BASE_URL %>cesium/Cesium.js"
></script>
<link
rel=
"stylesheet"
href=
"<%= BASE_URL %>cesium/Widgets/widgets.css"
>
<style>
html
,
body
,
#app
{
...
...
@@ -25,6 +30,7 @@
margin
:
0px
;
padding
:
0px
;
}
.chromeframe
{
margin
:
0.2em
0
;
background
:
#ccc
;
...
...
@@ -101,6 +107,7 @@
-ms-transform
:
rotate
(
0deg
);
transform
:
rotate
(
0deg
);
}
100
%
{
-webkit-transform
:
rotate
(
360deg
);
-ms-transform
:
rotate
(
360deg
);
...
...
@@ -114,6 +121,7 @@
-ms-transform
:
rotate
(
0deg
);
transform
:
rotate
(
0deg
);
}
100
%
{
-webkit-transform
:
rotate
(
360deg
);
-ms-transform
:
rotate
(
360deg
);
...
...
@@ -203,15 +211,17 @@
opacity
:
0.5
;
}
</style>
</head>
<body>
<div
id=
"app"
>
<div
id=
"loader-wrapper"
>
<div
id=
"loader"
></div>
<div
class=
"loader-section section-left"
></div>
<div
class=
"loader-section section-right"
></div>
<div
class=
"load_title"
>
正在加载系统资源，请耐心等待
</div>
</div>
</div>
</body>
</html>
</head>
<body>
<div
id=
"app"
>
<div
id=
"loader-wrapper"
>
<div
id=
"loader"
></div>
<div
class=
"loader-section section-left"
></div>
<div
class=
"loader-section section-right"
></div>
<div
class=
"load_title"
>
正在加载系统资源，请耐心等待
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
huaxin-web/src/assets/indexImg/cjz.png
0 → 100644
View file @
ed08a356
5.83 KB
huaxin-web/src/assets/indexImg/cz2.png
0 → 100644
View file @
ed08a356
2.2 KB
huaxin-web/src/utils/mapClass/deviceIconTypeConfig.js
View file @
ed08a356
...
...
@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-06-17 16:54:14
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-0
8-01 09:28:41
* @LastEditTime: 2026-0
9-22 16:12:29
* @FilePath: /huaxin-web/src/utils/mapClass/deviceIconTypeConfig.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
...
...
@@ -22,18 +22,26 @@ export const deviceIcon = {
2
:
require
(
"@/assets/indexImg/newFm.png"
),
// 3: require("@/assets/indexImg/mapCz.png"),
3
:
require
(
"@/assets/indexImg/newCz.png"
),
31
:
require
(
"@/assets/indexImg/cz2.png"
),
4
:
require
(
"@/assets/indexImg/monitorDeviceAlarm.gif"
),
// 5: require("@/assets/indexImg/gongye.png")
5
:
require
(
"@/assets/indexImg/newGsUser.png"
)
5
:
require
(
"@/assets/indexImg/newGsUser.png"
),
// 特殊气站
6
:
require
(
"@/assets/indexImg/cjz.png"
)
}
export
const
pipeColor
=
{
1
:
"#
52E6F8
"
,
2
:
"#
FFFFFF
"
,
3
:
"#
DE67FA
"
,
1
:
"#
8B3A62
"
,
2
:
"#
ff0000
"
,
3
:
"#
3FA0DC
"
,
4
:
"#B7791F"
,
// 运行监控-巡检巡查的线条颜色
5
:
"#18FF0F"
,
};
// 1: "#8B3A62",
// 2: "#ff0000",
// 3: "#3FA0DC",
// 4: "#009E5E",
huaxin-web/src/utils/mapClass/newMap.js
View file @
ed08a356
/*
* @Author: your name
* @Date: 2022-01-11 13:45:12
* @LastEditTime: 2026-0
7-15 11:31:0
9
* @LastEditTime: 2026-0
9-23 10:12:2
9
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/utils/mapClass.js
...
...
@@ -16,6 +16,8 @@ import { townsData } from "./xiangzhen";
export
class
EditorMap
{
// 地图的对象实例
map
=
null
;
// 可视化
loca
=
null
;
// 外部传进来的中心店
center
=
null
;
// 父vue的实例
...
...
@@ -71,7 +73,10 @@ export class EditorMap {
zooms
:
[
3
,
20
],
...
config
,
});
const
{
center
}
=
config
;
const
{
center
,
pipeFeatures
}
=
config
;
this
.
addLocalPipe
(
pipeFeatures
);
this
.
center
=
center
;
this
.
vue
=
vue
;
// 将从外部传进来的图片路径挂载到对象中
...
...
@@ -134,6 +139,52 @@ export class EditorMap {
}
});
}
addLocalPipe
(
json
)
{
this
.
loca
=
new
Loca
.
Container
({
map
:
this
.
map
,
});
var
geo
=
new
Loca
.
GeoJSONSource
({
data
:
json
,
// url: "https://a.amap.com/Loca/static/loca-v2/demos/mock_data/bj_bus.json",
});
console
.
log
(
"geo"
,
geo
);
let
layer
=
new
Loca
.
PulseLineLayer
({
// loca,
zIndex
:
10
,
opacity
:
1
,
visible
:
true
,
zooms
:
[
2
,
22
],
});
var
headColors
=
[
"rgb(239, 187, 81)"
,
"#7F3CFF"
,
"rgb(24, 255, 15)"
,
"#0B5D74"
,
"#E06AC4"
,
"rgb(34, 63, 155)"
,
"rgb(241, 92, 26)"
,
"#7A0FA6"
,
];
layer
.
setSource
(
geo
);
layer
.
setStyle
({
altitude
:
0
,
lineWidth
:
8
,
// 脉冲头颜色
headColor
:
(
_
,
feature
)
=>
{
return
headColors
[
0
];
},
// 脉冲尾颜色
trailColor
:
"rgba(239, 187, 81, .2)"
,
// 脉冲长度，0.25 表示一段脉冲占整条路的 1/4
interval
:
0.25
,
// 脉冲线的速度，几秒钟跑完整段路
duration
:
5000
,
});
this
.
loca
.
add
(
layer
);
this
.
loca
.
animate
.
start
();
}
frbj
()
{
townsData
.
forEach
((
item
)
=>
{
console
.
log
(
item
);
...
...
@@ -343,9 +394,9 @@ export class EditorMap {
* @return {*}
*/
addDevice
(
deviceData
,
compontent
,
showBool
=
true
)
{
const
{
longitude
:
lng
,
latitude
:
lat
,
iconType
}
=
deviceData
;
const
{
longitude
:
lng
,
latitude
:
lat
,
iconType
,
picIcon
}
=
deviceData
;
// const icon = svgUrl[iconType];
const
icon
=
this
.
devicePicData
[
iconType
];
const
icon
=
this
.
devicePicData
[
picIcon
]
||
this
.
devicePicData
[
iconType
];
// console.log("icon", icon);
let
device
=
this
.
createMarker
({
map
:
this
.
map
,
...
...
huaxin-web/src/views/bigWindow/Ind/components/Left.vue
View file @
ed08a356
...
...
@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:31:30
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-0
1-15 14:32:30
* @LastEditTime: 2026-0
9-24 14:11:08
* @FilePath: /test-ranqi/src/views/Ind/components/Left.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
...
...
@@ -24,8 +24,8 @@
<div
class=
"box-a"
>
设备统计
</div>
<div
class=
"box-b"
>
<div
class=
"fa"
>
<div
class=
"faa"
>
{{
deviceTotal
}}
</div>
<div
class=
"fab"
>
总量
</div>
<div
class=
"faa
op0
"
>
{{
deviceTotal
}}
</div>
<div
class=
"fab
op0
"
>
总量
</div>
<div
class=
"fac"
></div>
</div>
<div
class=
"fb"
>
...
...
@@ -91,30 +91,49 @@ export default {
this
.
getTotalNumInfo
();
},
methods
:
{
getTotalNumInfo
(){
totalNumStatisticByType
().
then
(
res
=>
{
if
(
res
.
code
==
200
){
getTotalNumInfo
()
{
totalNumStatisticByType
().
then
((
res
)
=>
{
console
.
log
(
"res"
,
res
);
if
(
res
.
code
==
200
)
{
let
data
=
res
.
data
;
//管线
let
pipeLengthInfo
=
data
.
pipeLengthInfo
;
if
(
pipeLengthInfo
)
{
pipeLengthInfo
.
forEach
(
item
=>
{
let
info
=
this
.
itemArr
[
item
.
type
-
1
];
if
(
info
){
if
(
pipeLengthInfo
)
{
pipeLengthInfo
.
forEach
(
(
item
)
=>
{
let
info
=
this
.
itemArr
[
item
.
type
-
1
];
if
(
info
)
{
info
.
num
=
item
.
totalLength
;
}
})
})
;
}
//设备
let
deviceNumInfo
=
data
.
deviceNumInfo
;
if
(
deviceNumInfo
)
this
.
pressureData
=
deviceNumInfo
;
this
.
deviceTotal
=
this
.
pressureData
?
this
.
pressureData
.
map
(
item
=>
item
.
value
).
reduce
((
sum
,
num
)
=>
sum
+
num
,
0
)
:
0
;
let
deviceNumInfo
=
data
.
deviceNumInfo
;
deviceNumInfo
.
forEach
((
item
)
=>
{
if
(
item
.
beyondCompany
==
"唐山华鑫天然气有限公司"
)
{
item
.
name
=
"华鑫"
+
item
.
name
;
}
else
if
(
item
.
beyondCompany
==
"唐山鸿海科技有限公司"
)
{
item
.
name
=
"鸿海"
+
item
.
name
;
}
});
if
(
deviceNumInfo
)
this
.
pressureData
=
deviceNumInfo
;
console
.
log
(
"this.pressureData"
,
this
.
pressureData
);
this
.
deviceTotal
=
this
.
pressureData
?
this
.
pressureData
.
map
((
item
)
=>
item
.
value
)
.
reduce
((
sum
,
num
)
=>
sum
+
num
,
0
)
:
0
;
console
.
log
(
this
.
deviceTotal
);
//场站
let
stationNumInfo
=
data
.
stationNumInfo
;
if
(
stationNumInfo
)
this
.
pressureData2
=
stationNumInfo
;
this
.
stationTotal
=
this
.
pressureData2
?
this
.
pressureData2
.
map
(
item
=>
item
.
value
).
reduce
((
sum
,
num
)
=>
sum
+
num
,
0
)
:
0
;
if
(
stationNumInfo
)
this
.
pressureData2
=
stationNumInfo
;
this
.
stationTotal
=
this
.
pressureData2
?
this
.
pressureData2
.
map
((
item
)
=>
item
.
value
)
.
reduce
((
sum
,
num
)
=>
sum
+
num
,
0
)
:
0
;
}
})
})
;
},
},
};
...
...
@@ -211,4 +230,7 @@ export default {
}
}
}
.op0
{
opacity
:
0
;
}
</
style
>
huaxin-web/src/views/bigWindow/Ind3/Ind.vue
View file @
ed08a356
...
...
@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2025-12-20 09:20:39
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-0
8-01 09:10:48
* @LastEditTime: 2026-0
9-23 10:01:11
* @FilePath: /test-ranqi/src/views/Index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
...
...
@@ -11,13 +11,15 @@
<div
id=
"gao-map-index"
></div>
<!--
<Left
/>
-->
<!--
<Right
/>
-->
<div
@
click=
"$emit('imgClick', 'index')"
class=
"backindex"
>
返回首页概览
</div>
<div
@
click=
"$emit('imgClick', 'index')"
class=
"backindex"
>
返回首页概览
</div>
<div
class=
"mapChange"
>
<div
:class=
"
{ active: mapStyle }" @click="mapChange(2)">全景地图
</div>
<div
:class=
"
{ active: !mapStyle }" @click="mapChange(1)">三维地图
</div>
</div>
<Bottom
@
change=
"change"
/>
<Bottom
@
change=
"change"
/>
</div>
</
template
>
...
...
@@ -27,12 +29,13 @@ import Right from "./components/Right.vue";
import
Bottom
from
"./components/Bottom.vue"
;
import
{
EditorMap
}
from
"@/utils/mapClass/newMap"
;
import
{
deviceInfoList
}
from
"@/api/baseinfo/deviceInfo"
;
import
DeviceInfo
from
"./components/DeviceInfo"
import
StationInfo
from
".//components/StationInfo"
;
import
DeviceInfo
from
"./components/DeviceInfo"
;
import
StationInfo
from
"./components/StationInfo"
;
import
Null
from
"./components/Null"
;
import
GyInfo
from
".//components/GyInfo"
;
import
{
stationInfoList
}
from
"@/api/baseinfo/stationInfo.js"
;
import
{
listIndustry
}
from
"@/api/baseinfo/industry"
;
import
{
pipeInfoList
,
pointList
}
from
"@/api/baseinfo/pipeInfo"
;
import
{
listIndustry
}
from
"@/api/baseinfo/industry"
;
import
{
pipeInfoList
,
pointList
}
from
"@/api/baseinfo/pipeInfo"
;
import
PipeInfo
from
"./components/PipeInfo"
;
import
{
deviceType
,
...
...
@@ -50,12 +53,76 @@ export default {
DeviceInfo
,
StationInfo
,
GyInfo
,
PipeInfo
PipeInfo
,
Null
,
},
data
()
{
return
{
pipeArr
:
[
0
,
1
,
2
],
pipeArr
:
[
0
,
1
,
2
],
mapStyle
:
true
,
qz
:
[
{
latitude
:
39.757741
,
longitude
:
118.111626
,
siteStationName
:
"国家官网唐山加气站"
,
iconType
:
6
,
},
{
latitude
:
39.627445
,
longitude
:
117.924165
,
siteStationName
:
"国家官网唐山站"
,
iconType
:
6
,
},
],
pipeFeatures
:
{
type
:
"FeatureCollection"
,
features
:
[
{
type
:
"Feature"
,
geometry
:
{
type
:
"LineString"
,
coordinates
:
[
[
118.11052471
,
39.75601726
],
[
118.11038163
,
39.75512706
],
[
118.11232324
,
39.75500372
],
[
118.11319832
,
39.75567859
],
[
118.11405096
,
39.75575662
],
],
},
properties
:
{
pipeId
:
"P001"
},
},
{
type
:
"Feature"
,
geometry
:
{
type
:
"LineString"
,
coordinates
:
[
[
117.92374179
,
39.62671893
],
[
117.9235366
,
39.62671997
],
[
117.9235366
,
39.62553621
],
[
117.92585408
,
39.62555597
],
[
117.92583822
,
39.62748179
],
[
117.9261069
,
39.62992436
],
[
117.92606705
,
39.63323436
],
[
117.92643758
,
39.63455078
],
[
117.92670342
,
39.6357638
],
[
117.92784691
,
39.63702095
],
[
117.92810998
,
39.6372939
],
[
117.92959723
,
39.63923734
],
[
117.92993018
,
39.6400847
],
[
117.93124561
,
39.64065211
],
[
117.93192118
,
39.64165054
],
[
117.9325676
,
39.64304469
],
[
117.93272255
,
39.64394462
],
[
117.93275669
,
39.64443365
],
[
117.93303967
,
39.64619228
],
[
117.93311745
,
39.6464649
],
[
117.93380946
,
39.64631826
],
],
},
properties
:
{
pipeId
:
"P002"
},
},
],
},
};
},
computed
:
{},
...
...
@@ -70,15 +137,17 @@ export default {
this
.
gaoMap
=
new
EditorMap
(
"gao-map-index"
,
{
center
:
[
117.96713
,
39.730938
],
center
:
[
117.96713
,
39.730938
],
// mapStyle: "amap://styles/806fa63f07c70b043867bd1f9a600981",
mapStyle
:
"amap://styles/f71d3a3d73e14f5b2bf5508bf1411758"
,
zoom
:
11.3
,
devicePicData
:
deviceIcon
,
pipeColor
:
pipeColor
,
pipeFeatures
:
this
.
pipeFeatures
,
},
this
);
this
.
initMapDeviceInfo
();
},
//设备上图
...
...
@@ -87,46 +156,106 @@ export default {
this
.
getDeviceInfo
();
//场站
this
.
getStationInfo
();
// 气站上图
this
.
getQz
();
//工业用户
this
.
getList
();
this
.
getpipe
();
this
.
getPointList
();
this
.
gaoMap
.
addLocalPipe
(
this
.
pipeFeatures
);
setInterval
(()
=>
{
this
.
gaoMap
.
pipeArrold
=
this
.
gaoMap
.
pipeArr2
;
this
.
gaoMap
.
pipeArr2
=
[];
console
.
log
(
this
.
gaoMap
.
pipeArrold
)
console
.
log
(
this
.
gaoMap
.
pipeArrold
)
;
this
.
getPointList
();
setTimeout
(()
=>
{
this
.
gaoMap
.
clearPipe
()},
1000
)
},
60000
)
setTimeout
(()
=>
{
this
.
gaoMap
.
clearPipe
();
},
1000
);
},
60000
);
},
addLocalPipe
()
{
console
.
log
(
123
);
var
loca
=
new
Loca
.
Container
({
map
:
this
.
gaoMap
,
});
console
.
log
(
"loca"
,
loca
);
var
geo
=
new
Loca
.
GeoJSONSource
({
url
:
"https://a.amap.com/Loca/static/loca-v2/demos/mock_data/bj_bus.json"
,
});
var
layer
=
new
Loca
.
PulseLineLayer
({
// loca,
zIndex
:
10
,
opacity
:
1
,
visible
:
true
,
zooms
:
[
2
,
22
],
});
var
headColors
=
[
"#EFBB51"
,
"#7F3CFF"
,
"#4CC19B"
,
"#0B5D74"
,
"#E06AC4"
,
"#223F9B"
,
"#F15C1A"
,
"#7A0FA6"
,
];
getpipe
(){
console
.
log
(
"geo"
,
geo
);
layer
.
setSource
(
geo
);
layer
.
setStyle
({
altitude
:
0
,
lineWidth
:
2
,
// 脉冲头颜色
headColor
:
(
_
,
feature
)
=>
{
return
headColors
[
feature
.
properties
.
type
-
1
];
},
// 脉冲尾颜色
trailColor
:
"rgba(128, 128, 128, 0.5)"
,
// 脉冲长度，0.25 表示一段脉冲占整条路的 1/4
interval
:
0.25
,
// 脉冲线的速度，几秒钟跑完整段路
duration
:
5000
,
});
loca
.
add
(
layer
);
loca
.
animate
.
start
();
},
getpipe
()
{
pipeInfoList
().
then
((
res
)
=>
{
if
(
res
.
code
==
200
&&
res
.
data
)
{
if
(
res
.
code
==
200
&&
res
.
data
)
{
res
.
data
.
forEach
((
item
)
=>
{
item
.
path
=
eval
(
item
.
coordinates
);
item
.
pipePressure
=
item
.
pipeType
;
item
.
strokeWeight
=
4
;
this
.
gaoMap
.
addPipeLine
(
item
,
PipeInfo
);
});
item
.
pipePressure
=
item
.
pipeType
;
// item.strokeWeight = 4;
if
(
item
.
pipeType
==
1
)
{
item
.
strokeWeight
=
5
;
}
else
if
(
item
.
pipeType
==
2
)
{
item
.
strokeWeight
=
4
;
}
else
{
item
.
strokeWeight
=
3
;
}
this
.
gaoMap
.
addPipeLine
(
item
,
PipeInfo
);
});
}
});
//加载本地管线
this
.
getLocationPipe
();
},
getPointList
(){
getPointList
()
{
pointList
().
then
((
res
)
=>
{
if
(
res
.
code
==
200
&&
res
.
data
)
{
res
.
data
.
forEach
((
item
)
=>
{
item
.
path
=
item
.
coordinates
;
item
.
pipePressure
=
5
;
item
.
strokeWeight
=
2
;
if
(
this
.
pipeArr
.
includes
(
item
.
pipeType
-
1
))
{
item
.
ishidden
=
0
}
else
{
item
.
ishidden
=
1
item
.
strokeWeight
=
5
;
if
(
this
.
pipeArr
.
includes
(
item
.
pipeType
-
1
))
{
item
.
ishidden
=
0
;
}
else
{
item
.
ishidden
=
1
;
}
this
.
gaoMap
.
addPipeLine
(
item
,
PipeInfo
);
});
...
...
@@ -135,50 +264,66 @@ export default {
},
/** 查询工业用户列表 */
getList
()
{
listIndustry
({
pageNum
:
1
,
pageSize
:
1000
}).
then
(
response
=>
{
listIndustry
({
pageNum
:
1
,
pageSize
:
1000
}).
then
((
response
)
=>
{
//this.industryList = response.rows;
this
.
gaoMap
.
labelsLayerMarksDetectorUserList
(
response
.
rows
,
GyInfo
,
false
);
});
this
.
gaoMap
.
labelsLayerMarksDetectorUserList
(
response
.
rows
,
GyInfo
,
false
);
});
},
//调压箱
getDeviceInfo
()
{
deviceInfoList
().
then
((
res
)
=>
{
if
(
res
.
code
&&
res
.
data
)
{
let
typeA
=
[];
let
typeB
=
[];
res
.
data
.
forEach
((
item
)
=>
{
item
.
iconType
=
item
.
deviceType
;
if
(
item
.
deviceType
===
'1'
)
{
typeA
.
push
(
item
);
}
else
if
(
item
.
deviceType
===
'2'
)
{
typeB
.
push
(
item
);
}
//this.gaoMap.addDevice(item, DeviceInfo, false);
});
let
typeA
=
[];
let
typeB
=
[];
res
.
data
.
forEach
((
item
)
=>
{
item
.
iconType
=
item
.
deviceType
;
if
(
item
.
deviceType
===
"1"
)
{
typeA
.
push
(
item
);
}
else
if
(
item
.
deviceType
===
"2"
)
{
typeB
.
push
(
item
);
}
//this.gaoMap.addDevice(item, DeviceInfo, false);
});
this
.
gaoMap
.
labelsLayerMarksFmjGoMap
(
typeB
,
DeviceInfo
,
false
);
this
.
gaoMap
.
labelsLayerMarksTysGoMap
(
typeA
,
DeviceInfo
,
false
);
}
});
this
.
gaoMap
.
labelsLayerMarksFmjGoMap
(
typeB
,
DeviceInfo
,
false
);
this
.
gaoMap
.
labelsLayerMarksTysGoMap
(
typeA
,
DeviceInfo
,
false
);
}
});
},
//场站
getStationInfo
()
{
stationInfoList
().
then
((
res
)
=>
{
if
(
res
.
code
&&
res
.
data
)
{
console
.
log
(
deviceType
.
station
)
res
.
data
.
forEach
((
item
)
=>
{
item
.
iconType
=
deviceType
.
station
;
this
.
gaoMap
.
addDevice
(
item
,
StationInfo
,
false
);
console
.
log
(
deviceType
.
station
);
res
.
data
.
forEach
((
item
)
=>
{
item
.
iconType
=
deviceType
.
station
;
if
(
item
.
siteStationName
==
"张秀庄调压站"
||
item
.
siteStationName
==
"华鑫母站"
)
{
item
.
picIcon
=
"31"
;
}
console
.
log
(
"场站"
,
item
);
this
.
gaoMap
.
addDevice
(
item
,
StationInfo
,
false
);
});
}
});
},
getQz
()
{
this
.
qz
.
forEach
((
item
)
=>
{
this
.
gaoMap
.
addDevice
(
item
,
Null
,
false
);
});
}
});
},
showMarker
(
val
)
{
let
markerList
=
this
.
gaoMap
.
allDevice
[
val
];
if
(
markerList
)
{
markerList
.
forEach
((
marker
)
=>
{
marker
.
show
();
});
});
}
},
hideMarker
(
val
)
{
...
...
@@ -186,16 +331,16 @@ export default {
if
(
markerList
)
{
markerList
.
forEach
((
marker
)
=>
{
marker
.
hide
();
});
});
}
},
mapChange
(
num
)
{
if
(
num
==
1
)
{
this
.
mapStyle
=
false
;
this
.
gaoMap
.
changeMap
(
this
.
mapStyle
)
this
.
gaoMap
.
changeMap
(
this
.
mapStyle
)
;
}
else
{
this
.
mapStyle
=
true
;
this
.
gaoMap
.
changeMap
(
this
.
mapStyle
)
this
.
gaoMap
.
changeMap
(
this
.
mapStyle
)
;
}
},
// sel1(index, item) {
...
...
@@ -209,53 +354,57 @@ export default {
// this.showMarker(item.val);
// }
// },
change
(
ind
,
val
,
arr
)
{
change
(
ind
,
val
,
arr
)
{
this
.
pipeArr
=
arr
;
if
(
val
<
3
)
{
this
.
gaoMap
.
pipefilter
(
ind
,
val
);
if
(
val
<
3
)
{
this
.
gaoMap
.
pipefilter
(
ind
,
val
);
}
if
(
ind
>=
0
)
{
if
(
val
==
3
)
{
if
(
ind
>=
0
)
{
if
(
val
==
3
)
{
this
.
gaoMap
.
tyxlabelsLayer
.
hide
();
}
else
if
(
val
==
4
)
{
}
else
if
(
val
==
4
)
{
this
.
gaoMap
.
fmjlabelLayer
.
hide
();
}
else
if
(
val
==
5
)
{
}
else
if
(
val
==
5
)
{
this
.
hideMarker
(
3
);
}
else
if
(
val
==
6
)
{
}
else
if
(
val
==
6
)
{
this
.
gaoMap
.
businessDetectorUserlabelsLayer
.
hide
();
}
else
if
(
val
==
7
)
{
this
.
hideMarker
(
6
);
}
}
else
{
if
(
val
==
3
)
{
}
else
{
if
(
val
==
3
)
{
this
.
gaoMap
.
tyxlabelsLayer
.
show
();
}
else
if
(
val
==
4
)
{
}
else
if
(
val
==
4
)
{
this
.
gaoMap
.
fmjlabelLayer
.
show
();
}
else
if
(
val
==
5
)
{
}
else
if
(
val
==
5
)
{
//this.map.czlabelLayer.show();
this
.
showMarker
(
3
);
}
else
if
(
val
==
6
)
{
}
else
if
(
val
==
6
)
{
this
.
gaoMap
.
businessDetectorUserlabelsLayer
.
show
();
}
else
if
(
val
==
7
)
{
this
.
showMarker
(
6
);
}
}
},
getLocationPipe
(){
getLocationPipe
()
{
axios
.
get
(
"../geo_json/pipe.json"
).
then
((
res
)
=>
{
if
(
res
.
data
)
{
if
(
res
.
data
)
{
//let lines = res.data.split(/\r?\n|\r/);
res
.
data
.
forEach
((
line
,
index
)
=>
{
let
locations
=
line
.
coordinates
.
split
(
";"
);
let
pipe
=
[];
locations
.
forEach
(
location
=>
{
pipe
.
push
(
location
.
split
(
","
));
})
locations
.
forEach
(
(
location
)
=>
{
pipe
.
push
(
location
.
split
(
","
));
})
;
line
.
path
=
eval
(
pipe
);
line
.
pipeLength
=
parseFloat
(
line
.
pipeLength
).
toFixed
(
2
);
line
.
pipePressure
=
3
;
line
.
strokeWeight
=
4
;
line
.
strokeWeight
=
3
;
this
.
gaoMap
.
addPipeLine
(
line
,
PipeInfo
);
});
}
})
}
})
;
}
,
},
};
</
script
>
...
...
@@ -278,7 +427,8 @@ export default {
position
:
fixed
;
right
:
548px
;
top
:
144px
;
background
:
url("~@/assets/bigwindowImg/index/backIndex.png")
no-repeat
center
center
;
background
:
url("~@/assets/bigwindowImg/index/backIndex.png")
no-repeat
center
center
;
line-height
:
48px
;
z-index
:
999
;
cursor
:
pointer
;
...
...
huaxin-web/src/views/bigWindow/Ind3/components/Bottom.vue
View file @
ed08a356
...
...
@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2026-01-12 14:23:40
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2026-0
4-07 10:24:39
* @LastEditTime: 2026-0
9-22 16:16:10
* @FilePath: /huaxindd-web/src/views/Ind2/components/Bottom.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
...
...
@@ -66,6 +66,7 @@ export default {
{
name
:
"阀门井"
,
val
:
4
},
{
name
:
"场站"
,
val
:
5
},
{
name
:
"工业户"
,
val
:
6
},
{
name
:
"气站"
,
val
:
7
},
],
activeArr1
:
[
0
,
1
,
2
],
activeArr2
:
[],
...
...
huaxin-web/src/views/bigWindow/Ind3/components/Null.vue
0 → 100644
View file @
ed08a356
<!--
* @Author: your name
* @Date: 2022-03-22 10:31:50
* @LastEditTime: 2025-03-07 11:26:33
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/components/bigWindow/Nulll.vue
-->
<
template
>
<div></div>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
com
:
null
};
},
};
</
script
>
<
style
></
style
>
huaxin-web/src/views/bigWindow/Ind3/components/StationInfo.vue
View file @
ed08a356
...
...
@@ -4,9 +4,15 @@
{{
deviceData
.
siteStationName
}}
</div>
<div
class=
"close"
@
click=
"close"
>
<i
class=
"el-icon-close"
style=
"font-size:
20px;color:#5dfefe;
"
></i>
<i
class=
"el-icon-close"
style=
"font-size:
20px; color: #5dfefe
"
></i>
</div>
<p
style=
"background-image: linear-gradient(to right, #5dfefe, #071738); width:100%;height:1px;"
></p>
<p
style=
"
background-image: linear-gradient(to right, #5dfefe, #071738);
width: 100%;
height: 1px;
"
></p>
<div>
<div
class=
"top flex"
>
<div
class=
"top-left"
>
...
...
@@ -17,10 +23,7 @@
<div
class=
"group"
>
<div
class=
"left last"
>
厂站用途：
</div>
<div
:title=
"deviceData.stationDetail"
class=
"right last zzz"
>
<div
:title=
"deviceData.stationDetail"
class=
"right last zzz"
>
{{
deviceData
.
stationDetail
}}
</div>
</div>
...
...
@@ -42,30 +45,31 @@
<div
class=
"group"
>
<div
class=
"left"
>
危险源级别：
</div>
<div
class=
"right zzz"
>
{{
dangerousLevelFormatte
(
deviceData
)
}}
</div>
<div
class=
"right zzz"
>
{{
dangerousLevelFormatte
(
deviceData
)
}}
</div>
</div>
<div
class=
"group"
>
<div
class=
"left"
>
储罐容积：
</div>
<div
class=
"right zzz"
>
{{
deviceData
.
volume
}}
</div>
</div>
<div
class=
"group"
>
<div
class=
"left"
>
工艺名称：
</div>
<div
class=
"right zzz"
>
{{
deviceData
.
technologyProcess
}}
</div>
</div>
</div>
<div
class=
"top-center"
>
<div
class=
"group"
>
<div
class=
"left"
>
场站类型：
</div>
<div
class=
"right zzz"
>
{{
siteStationFormatte
(
deviceData
)
}}
</div>
</div>
<div
class=
"left"
>
场站类型：
</div>
<div
class=
"right zzz"
>
{{
siteStationFormatte
(
deviceData
)
}}
</div>
</div>
<div
class=
"group"
>
<div
class=
"left"
>
详细地址：
</div>
<div
:title=
"deviceData.address"
class=
"right zzz"
>
<div
:title=
"deviceData.address"
class=
"right zzz"
>
{{
deviceData
.
address
}}
</div>
</div>
...
...
@@ -89,7 +93,20 @@
<div
class=
"left"
>
危险源名称：
</div>
<div
class=
"right zzz"
>
{{
deviceData
.
dangerousName
}}
</div>
</div>
<div
class=
"group"
>
<div
class=
"left"
>
工艺照片：
</div>
<div
class=
"right zzz"
>
<el-image
v-if=
"deviceData.processRelationList"
style=
"width: 80px; height: 80px"
:src=
"deviceData.processRelationList"
:preview-src-list=
"[deviceData.processRelationList]"
:z-index=
"999999"
>
</el-image>
<div
class=
"imgtext"
v-else
>
暂无图片
</div>
</div>
</div>
</div>
<div
class=
"top-right"
>
<div
class=
"left last"
>
照片：
</div>
...
...
@@ -97,7 +114,7 @@
v-if=
"deviceData.pictureAddress"
style=
"width: 80px; height: 80px"
:src=
"deviceData.pictureAddress"
:preview-src-list=
"[deviceData.pictureAddress
]"
:preview-src-list=
"[deviceData.pictureAddress]"
:z-index=
"999999"
>
</el-image>
...
...
@@ -148,203 +165,196 @@
</template>
<
script
>
export
default
{
name
:
"device-info"
,
data
(){
return
{
stationType
:
[],
gasSource
:
[],
dangerousLevel
:
[]
}
},
created
(){
this
.
getStationType
();
this
.
getGasSource
();
this
.
getDangerousType
();
},
methods
:{
close
()
{
this
.
mapClass
.
infowindowClose
();
},
//场站类型
getStationType
(){
this
.
getDicts
(
"t_station_type"
).
then
((
response
)
=>
{
this
.
stationType
=
response
.
data
;
});
},
//气源中类
getGasSource
(){
this
.
getDicts
(
"t_gas_source"
).
then
((
response
)
=>
{
this
.
gasSource
=
response
.
data
;
});
},
//危险源级别
getDangerousType
(){
this
.
getDicts
(
"t_dangerous_level"
).
then
((
response
)
=>
{
this
.
dangerousLevel
=
response
.
data
;
});
},
//场站类型格式化
siteStationFormatte
(
row
){
return
this
.
selectDictLabel
(
this
.
stationType
,
row
.
siteStationType
);
},
//气体种类
gasSourceFormatte
(
row
){
return
this
.
selectDictLabel
(
this
.
gasSource
,
row
.
gasSource
);
},
//危险源级别
dangerousLevelFormatte
(
row
){
return
this
.
selectDictLabel
(
this
.
dangerousLevel
,
row
.
dangerousLevel
);
},
}
}
export
default
{
name
:
"device-info"
,
data
()
{
return
{
stationType
:
[],
gasSource
:
[],
dangerousLevel
:
[],
};
},
created
()
{
this
.
getStationType
();
this
.
getGasSource
();
this
.
getDangerousType
();
},
mounted
()
{
console
.
log
(
this
.
deviceData
);
},
methods
:
{
close
()
{
this
.
mapClass
.
infowindowClose
();
},
//场站类型
getStationType
()
{
this
.
getDicts
(
"t_station_type"
).
then
((
response
)
=>
{
this
.
stationType
=
response
.
data
;
});
},
//气源中类
getGasSource
()
{
this
.
getDicts
(
"t_gas_source"
).
then
((
response
)
=>
{
this
.
gasSource
=
response
.
data
;
});
},
//危险源级别
getDangerousType
()
{
this
.
getDicts
(
"t_dangerous_level"
).
then
((
response
)
=>
{
this
.
dangerousLevel
=
response
.
data
;
});
},
//场站类型格式化
siteStationFormatte
(
row
)
{
return
this
.
selectDictLabel
(
this
.
stationType
,
row
.
siteStationType
);
},
//气体种类
gasSourceFormatte
(
row
)
{
return
this
.
selectDictLabel
(
this
.
gasSource
,
row
.
gasSource
);
},
//危险源级别
dangerousLevelFormatte
(
row
)
{
return
this
.
selectDictLabel
(
this
.
dangerousLevel
,
row
.
dangerousLevel
);
},
},
};
</
script
>
<
style
scoped
lang=
"scss"
>
.devicea-wrapper
{
box-shadow
:
0px
0px
10px
#54e0ef
inset
;
background-color
:
#071738
;
padding
:
10px
;
position
:
relative
;
width
:
670px
;
border-radius
:
7px
;
.title
{
// padding-top: 10px;
// padding-left: 10px;
font-size
:
14px
;
line-height
:
14px
;
color
:
#ffffff
;
}
.close
{
position
:
absolute
;
right
:
10px
;
top
:
5px
;
cursor
:
pointer
;
}
.devicea-wrapper
{
box-shadow
:
0px
0px
10px
#54e0ef
inset
;
background-color
:
#071738
;
padding
:
10px
;
position
:
relative
;
width
:
670px
;
border-radius
:
7px
;
.title
{
// padding-top: 10px;
// padding-left: 10px;
font-size
:
14px
;
line-height
:
14px
;
color
:
#ffffff
;
}
.close
{
position
:
absolute
;
right
:
10px
;
top
:
5px
;
cursor
:
pointer
;
}
.top
{
margin-top
:
10px
;
margin-bottom
:
10px
;
box-sizing
:
border-box
;
.top-left
{
flex
:
1
.8
;
.group
{
height
:
30px
;
.top
{
margin-top
:
10px
;
margin-bottom
:
10px
;
box-sizing
:
border-box
;
.top-left
{
flex
:
1
.8
;
.group
{
height
:
30px
;
flex
:
1
;
display
:
flex
;
justify-content
:
space-between
;
box-sizing
:
border-box
;
div
{
flex
:
1
;
display
:
flex
;
justify-content
:
space-between
;
box-sizing
:
border-box
;
div
{
flex
:
1
;
box-sizing
:
border-box
;
font-size
:
14px
;
color
:
#ffffff
;
line-height
:
30px
;
padding
:
0
5px
;
&
.last
{
border-bottom
:
none
;
}
}
.left
{
text-align
:
right
;
}
.right
{
flex
:
2
;
font-size
:
14px
;
color
:
#ffffff
;
line-height
:
30px
;
padding
:
0
5px
;
&
.last
{
border-bottom
:
none
;
}
}
}
.top-center
{
flex
:
1
.2
;
.group
{
height
:
30px
;
flex
:
1
;
display
:
flex
;
justify-content
:
space-between
;
box-sizing
:
border-box
;
div
{
flex
:
1
;
box-sizing
:
border-box
;
font-size
:
14px
;
color
:
#ffffff
;
line-height
:
30px
;
padding
:
0
5px
;
&
.last
{
border-bottom
:
none
;
}
}
.left
{
text-align
:
right
;
}
.right
{
flex
:
0
.9
;
}
.left
{
text-align
:
right
;
}
.right
{
flex
:
2
;
}
}
.top-right
{
}
.top-center
{
flex
:
1
.2
;
.group
{
height
:
30px
;
flex
:
1
;
display
:
flex
;
justify-content
:
center
;
justify-content
:
space-between
;
box-sizing
:
border-box
;
div
{
width
:
50px
;
flex
:
1
;
box-sizing
:
border-box
;
font-size
:
14px
;
color
:
#ffffff
;
line-height
:
30px
;
padding
:
0
5px
;
&
.last
{
border-bottom
:
none
;
}
}
.imgtext
{
color
:
#ffffff
;
font-size
:
30px
;
.left
{
text-align
:
right
;
}
.right
{
flex
:
0
.9
;
}
}
}
.foot
{
font-size
:
14px
;
color
:
#ffffff
;
background
:
url(~@/assets/firstimage/box-bg.png)
;
background-size
:
100%
100%
;
background-repeat
:
no-repeat
;
padding
:
1px
;
.thead
,
.tbody
{
div
{
flex
:
1
;
text-align
:
left
;
box-sizing
:
border-box
;
text-align
:
center
;
border
:
1px
solid
#1b365d
;
.top-right
{
flex
:
1
;
display
:
flex
;
justify-content
:
center
;
div
{
width
:
50px
;
font-size
:
14px
;
color
:
#ffffff
;
&
.last
{
border-bottom
:
none
;
}
}
.tbody
{
border-top
:
none
;
.imgtext
{
color
:
#ffffff
;
font-size
:
30px
;
}
}
.btn
{
position
:
relative
;
margin-top
:
10px
;
}
.foot
{
font-size
:
14px
;
color
:
#ffffff
;
background
:
url(~@/assets/firstimage/box-bg.png)
;
background-size
:
100%
100%
;
background-repeat
:
no-repeat
;
padding
:
1px
;
.thead
,
.tbody
{
div
{
font-size
:
14px
;
color
:
#ffffff
;
background
:
url(~@/assets/firstimage/boxbtn-bg.png)
;
background-size
:
100%
100%
;
background-repeat
:
no-repeat
;
padding
:
7px
15px
;
flex
:
1
;
text-align
:
left
;
box-sizing
:
border-box
;
text-align
:
center
;
border
:
1px
solid
#1b365d
;
}
}
.flex
{
display
:
flex
;
justify-content
:
space-between
;
.tbody
{
border-top
:
none
;
}
}
.btn
{
position
:
relative
;
margin-top
:
10px
;
div
{
font-size
:
14px
;
color
:
#ffffff
;
background
:
url(~@/assets/firstimage/boxbtn-bg.png)
;
background-size
:
100%
100%
;
background-repeat
:
no-repeat
;
padding
:
7px
15px
;
}
}
.flex
{
display
:
flex
;
justify-content
:
space-between
;
}
}
</
style
>
huaxin-web/vue.config.js
View file @
ed08a356
...
...
@@ -35,7 +35,8 @@ module.exports = {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[
process
.
env
.
VUE_APP_BASE_API
]:
{
//target: `http://localhost:8909/huaxin`,
target
:
`http://36.139.135.138:8089/huaxin`
,
// target: `http://36.139.135.138:8089/huaxin`,
target
:
`http://36.138.180.82:8089/huaxin`
,
changeOrigin
:
true
,
pathRewrite
:
{
[
'^'
+
process
.
env
.
VUE_APP_BASE_API
]:
''
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment
