Skip to content

G
gassafety-progress
Commit 4f3670a9 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

更改infowindow样式,增加他㲏

parent 78459def
Hide whitespace changes
Inline Side-by-side
Showing with 199 additions and 87 deletions
gassafetyprogress-web/src/components/bigWindow/Cz.vue
View file @ 4f3670a9
<!--
* @Author: your name
* @Date: 2022-01-26 20:07:52
* @LastEditTime: 2022-03-10 10:33:35
* @LastEditTime: 2022-03-16 15:49:10
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
......@@ -18,7 +18,7 @@
<img src="@/assets/mapImages/closeBtn.png" alt="" />
</div>
<div class="top flex">
<!-- <div class="top flex">
<div class="group">
<div class="left">所属公司：</div>
<div class="right zzz">{{ companyType[deviceData.companyType] }}</div>
......@@ -47,6 +47,50 @@
</div>
<div v-else>-</div>
</div>
</div> -->
<div class="top flex">
<div class="top-left">
<div class="group">
<div class="left">所属公司：</div>
<div class="right zzz">{{ companyType[deviceData.companyType] }}</div>
</div>
<div class="group">
<div class="left">设备类型：</div>
<div class="right zzz">
{{ deviceType[deviceData.iconType] }}
</div>
</div>
<div class="group">
<div class="left last">设备地址：</div>
<div
v-if="deviceData.deviceAddr"
:title="deviceData.deviceAddr"
class="right last zzz"
>
{{ deviceData.deviceAddr || "-" }}
</div>
<div
v-else-if="deviceData.stationAddr"
:title="deviceData.stationAddr"
class="right last zzz"
>
{{ deviceData.stationAddr || "-" }}
</div>
<div v-else>-</div>
</div>
</div>
<div class="top-right">
<el-image
v-if="deviceData.pictureAddress"
style="width: 100px; height: 100px"
:src="deviceData.pictureAddress"
:preview-src-list="[deviceData.pictureAddress ]"
z-index=99999
>
</el-image>
<div class="imgtext" v-else>暂无图片</div>
</div>
</div>
<div class="middle">{{ profile }}</div>
......@@ -57,8 +101,8 @@
<div>设备数量</div>
<div>在线设备</div>
<div>离线设备</div>
<div>历史报警</div>
<div>已处理报警</div>
<!-- <div>历史报警</div>
<div>已处理报警</div> -->
<div class="last">报警中</div>
</div>
<template v-if="list.length > 0">
......@@ -77,12 +121,12 @@
<div v-unValue class="">
{{ deviceData.offlineEquipment }}
</div>
<div v-unValue class="">
<!-- <div v-unValue class="">
{{ deviceData.historicalAlarm }}
</div>
<div v-unValue class="">
{{ deviceData.alarmProcessed }}
</div>
</div> -->
<div v-unValue class="last">
{{ deviceData.inAlarm }}
</div>
......@@ -191,7 +235,7 @@ export default {
background-color: rgba(9, 18, 32, 0.6);
padding: 10px;
position: relative;
width: 700px;
width: 600px;
.title {
// padding-top: 10px;
// padding-left: 10px;
......@@ -211,28 +255,42 @@ export default {
margin-bottom: 10px;
border: 1px solid #cccccc;
box-sizing: border-box;
.group {
height: 30px;
.top-left {
flex: 1;
display: flex;
justify-content: space-between;
box-sizing: border-box;
div {
.group {
height: 40px;
flex: 1;
display: flex;
justify-content: space-between;
box-sizing: border-box;
border-right: 1px solid #cccccc;
text-align: center;
font-size: 14px;
color: #ffffff;
line-height: 30px;
padding: 0 5px;
&.last {
border-right: none;
div {
flex: 1;
box-sizing: border-box;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
text-align: center;
font-size: 14px;
color: #ffffff;
line-height: 40px;
padding: 0 5px;
&.last {
border-bottom: none;
}
}
.left {
text-align: right;
background-color: rgba(255, 255, 255, 0.1);
}
}
.left {
text-align: right;
background-color: rgba(255, 255, 255, 0.1);
}
.top-right {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
.imgtext {
color: #ffffff;
font-size: 30px;
}
}
}
......
gassafetyprogress-web/src/components/bigWindow/Device.vue
View file @ 4f3670a9
<!--
* @Author: your name
* @Date: 2022-01-26 20:07:52
* @LastEditTime: 2022-03-10 10:33:28
* @LastEditTime: 2022-03-16 15:49:35
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
......@@ -19,33 +19,47 @@
</div>
<div class="top flex">
<div class="group">
<div class="left">所属公司：</div>
<div class="right zzz">{{ companyType[deviceData.companyType] }}</div>
</div>
<div class="group">
<div class="left">设备类型：</div>
<div class="right zzz">
{{ deviceType[deviceData.iconType] }}
<div class="top-left">
<div class="group">
<div class="left">所属公司：</div>
<div class="right zzz">{{ companyType[deviceData.companyType] }}</div>
</div>
</div>
<div class="group">
<div class="left">设备地址：</div>
<div
v-if="deviceData.deviceAddr"
:title="deviceData.deviceAddr"
class="right last zzz"
>
{{ deviceData.deviceAddr || "-" }}
<div class="group">
<div class="left">设备类型：</div>
<div class="right zzz">
{{ deviceType[deviceData.iconType] }}
</div>
</div>
<div
v-else-if="deviceData.stationAddr"
:title="deviceData.stationAddr"
class="right last zzz"
>
{{ deviceData.stationAddr || "-" }}
<div class="group">
<div class="left last">设备地址：</div>
<div
v-if="deviceData.deviceAddr"
:title="deviceData.deviceAddr"
class="right last zzz"
>
{{ deviceData.deviceAddr || "-" }}
</div>
<div
v-else-if="deviceData.stationAddr"
:title="deviceData.stationAddr"
class="right last zzz"
>
{{ deviceData.stationAddr || "-" }}
</div>
<div v-else>-</div>
</div>
<div v-else>-</div>
</div>
<div class="top-right">
<el-image
v-if="deviceData.iconUrl"
style="width: 100px; height: 100px"
:src="deviceData.iconUrl"
:preview-src-list="[deviceData.iconUrl ]"
z-index=99999
>
</el-image>
<div class="imgtext" v-else>暂无图片</div>
</div>
</div>
......@@ -57,8 +71,8 @@
<div>设备数量</div>
<div>在线设备</div>
<div>离线设备</div>
<div>历史报警</div>
<div>已处理报警</div>
<!-- <div>历史报警</div>
<div>已处理报警</div> -->
<div class="last">报警中</div>
</div>
<template v-if="list.length > 0">
......@@ -77,12 +91,12 @@
<div v-unValue class="">
{{ deviceData.offlineEquipment }}
</div>
<div v-unValue class="">
<!-- <div v-unValue class="">
{{ deviceData.historicalAlarm }}
</div>
<div v-unValue class="">
{{ deviceData.alarmProcessed }}
</div>
</div> -->
<div v-unValue class="last">
{{ deviceData.inAlarm }}
</div>
......@@ -90,7 +104,7 @@
</template>
</div>
<div class="btn" v-if="list.length>0">
<div class="btn" v-if="list.length > 0">
<div @click="btnClick">感知设备</div>
</div>
</div>
......@@ -206,7 +220,7 @@ export default {
background-color: rgba(9, 18, 32, 0.6);
padding: 10px;
position: relative;
width: 700px;
width: 600px;
.title {
// padding-top: 10px;
// padding-left: 10px;
......@@ -226,28 +240,42 @@ export default {
margin-bottom: 10px;
border: 1px solid #cccccc;
box-sizing: border-box;
.group {
height: 30px;
.top-left {
flex: 1;
display: flex;
justify-content: space-between;
box-sizing: border-box;
div {
.group {
height: 40px;
flex: 1;
display: flex;
justify-content: space-between;
box-sizing: border-box;
border-right: 1px solid #cccccc;
text-align: center;
font-size: 14px;
color: #ffffff;
line-height: 30px;
padding: 0 5px;
&.last {
border-right: none;
div {
flex: 1;
box-sizing: border-box;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
text-align: center;
font-size: 14px;
color: #ffffff;
line-height: 40px;
padding: 0 5px;
&.last {
border-bottom: none;
}
}
.left {
text-align: right;
background-color: rgba(255, 255, 255, 0.1);
}
}
.left {
text-align: right;
background-color: rgba(255, 255, 255, 0.1);
}
.top-right {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
.imgtext {
color: #ffffff;
font-size: 30px;
}
}
}
......
gassafetyprogress-web/src/components/bigWindow/User.vue
View file @ 4f3670a9
<!--
* @Author: your name
* @Date: 2022-01-26 20:07:52
* @LastEditTime: 2022-03-07 14:02:43
* @LastEditTime: 2022-03-16 15:35:48
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
......@@ -35,6 +35,15 @@
</div>
</div>
<div class="top flex top-bottom">
<div class="group">
<div class="left">联系地址：</div>
<div :title="deviceData.address" class="right last zzz">
{{ deviceData.address || "-" }}
</div>
</div>
</div>
<template v-if="deviceData.detectorCountList">
<div class="foot">
<div class="thead flex">
......@@ -42,8 +51,8 @@
<div>设备数量</div>
<div>在线设备</div>
<div>离线设备</div>
<div>历史报警</div>
<div>已处理报警</div>
<!-- <div>历史报警</div>
<div>已处理报警</div> -->
<div class="last">报警中</div>
</div>
<div
......@@ -59,12 +68,12 @@
<div v-unValue class="">
{{ data.offLineNum }}
</div>
<div v-unValue class="">
<!-- <div v-unValue class="">
{{ data.historyAlarmNum }}
</div>
<div v-unValue class="">
{{ data.cancelAlarmNum }}
</div>
</div> -->
<div v-unValue class="last zzz">
{{ data.processingAlarmNum }}
</div>
......@@ -140,7 +149,7 @@ export default {
background-color: rgba(9, 18, 32, 0.6);
padding: 10px;
position: relative;
width: 700px;
width: 600px;
.title {
// padding-top: 10px;
// padding-left: 10px;
......@@ -184,6 +193,15 @@ export default {
background-color: rgba(255, 255, 255, 0.1);
}
}
&.top-bottom {
.left {
flex:none;
width: 192px !important;
}
.right {
flex: 1;
}
}
}
.middle {
width: 100%;
......
gassafetyprogress-web/src/utils/mapClass/map.js
View file @ 4f3670a9
/*
* @Author: your name
* @Date: 2022-01-11 13:45:12
* @LastEditTime: 2022-03-15 13:50:27
* @LastEditTime: 2022-03-16 15:06:43
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/utils/mapClass.js
......@@ -79,17 +79,25 @@ export class EditorMap {
// 获取朝阳区的边界信息
var bounds = result.districtList[0].boundaries;
var polygons = [];
console.log("boundsboundsboundsboundsbounds",bounds)
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
//生成行政区划polygon
new AMap.Polygon({
// new AMap.Polygon({
// map: this.map,
// strokeWeight: 2,
// path: bounds[i],
// fillOpacity: 1,
// fillColor: "transparent",
// strokeColor: "#09f",
// });
new AMap.Polyline({
map: this.map,
strokeWeight: 2,
path: bounds[i],
fillOpacity: 1,
fillColor: "transparent",
strokeWeight: 4,
strokeColor: "#09f",
});
path: bounds[i],
})
// polygons.push(polygon);
}
}
......
gassafetyprogress-web/vue.config.js
View file @ 4f3670a9
......@@ -34,8 +34,8 @@ module.exports = {
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
// target: `http://192.168.2.14:8903/gassafety`,
target: `http://222.223.203.154:8092/gassafety`,
target: `http://192.168.2.14:8903/gassafety`,
// target: `http://222.223.203.154:8092/gassafety`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment