Skip to content

Z
zh-baseversion-project
Commit f471396f authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

Merge branch 'jzl'

parents 470f2906 74e71829
Hide whitespace changes
Inline Side-by-side
Showing with 1378 additions and 683 deletions
zh-baseversion-web/src/components/bigWindow/Cz.vue
View file @ f471396f
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-01-26 20:07:52 * @Date: 2022-01-26 20:07:52
* @LastEditTime: 2022-03-23 15:19:40 * @LastEditTime: 2024-07-25 17:39:36
* @LastEditors: Please set LastEditors * @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/components/deviceA.vue * @FilePath: /test/hello-world/src/views/components/deviceA.vue
...@@ -16,112 +16,128 @@ ...@@ -16,112 +16,128 @@
</div> </div>
<div class="close" @click="close"> <div class="close" @click="close">
<!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> --> <!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> -->
<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> </div>
<p style="background-image: linear-gradient(to right, #5dfefe, #071738); width:100%;height:1px;"></p> <div class="line"></div>
<div> <div>
<div class="top flex"> <div class="top flex">
<div class="top-left"> <div class="top-left">
<div class="group"> <div class="group">
<div class="left">所属公司：</div> <div class="left">所属公司：</div>
<div class="right zzz">{{ companyType[deviceData.companyType] }}</div> <div class="right zzz">
</div> {{ companyType[deviceData.companyType] }}
</div>
</div>
<div class="group"> <div class="group">
<div class="left">备注：</div> <div class="left">备注：</div>
<div class="right zzz">{{ profile }}</div> <div class="right zzz">{{ profile }}</div>
</div>
</div>
<div class="top-center">
<div class="group">
<div class="left">设备类型：</div>
<div class="right zzz">
{{ deviceType[deviceData.iconType] }}
</div> </div>
</div> </div>
<div class="group"> <div class="top-center">
<div class="left last">设备地址：</div> <div class="group">
<div <div class="left">设备类型：</div>
v-if="deviceData.address" <div class="right zzz">
:title="deviceData.address" {{ deviceType[deviceData.iconType] }}
class="right last zzz" </div>
>
{{ deviceData.address || "-" }}
</div> </div>
<div <div class="group">
v-else-if="deviceData.stationAddr" <div class="left last">设备地址：</div>
:title="deviceData.stationAddr" <div
class="right last zzz" v-if="deviceData.address"
> :title="deviceData.address"
{{ deviceData.stationAddr || "-" }} class="right last zzz"
>
{{ deviceData.address || "-" }}
</div>
<div
v-else-if="deviceData.stationAddr"
:title="deviceData.stationAddr"
class="right last zzz"
>
{{ deviceData.stationAddr || "-" }}
</div>
<div class="right last zzz" v-else>-</div>
</div> </div>
<div class="right last zzz" v-else>-</div> </div>
<div class="top-right">
<div class="left last">照片：</div>
<el-image
v-if="deviceData.pictureAddress"
style="width: 80px; height: 50px"
:src="deviceData.pictureAddress"
:preview-src-list="[deviceData.pictureAddress]"
:z-index="999999"
>
</el-image>
<div class="imgtext" v-else>无</div>
</div> </div>
</div> </div>
<div class="top-right">
<div class="left last">照片：</div>
<el-image
v-if="deviceData.pictureAddress"
style="width: 80px; height: 50px"
:src="deviceData.pictureAddress"
:preview-src-list="[deviceData.pictureAddress ]"
:z-index="999999"
>
</el-image>
<div class="imgtext" v-else>暂无图片</div>
</div>
</div>
<!-- <div class="middle">{{ profile }}</div> --> <!-- <div class="middle">{{ profile }}</div> -->
<div class="foot"> <div class="foot">
<div class="thead flex" v-if="list.length > 0"> <div class="thead flex" v-if="list.length > 0">
<div class="first">设备类型</div> <div class="first">设备类型</div>
<div>设备数量</div> <div>设备数量</div>
<div>在线设备</div> <div>在线设备</div>
<div>离线设备</div> <div>离线设备</div>
<!-- <div>历史报警</div> <!-- <div>历史报警</div>
<div>已处理报警</div> --> <div>已处理报警</div> -->
<div class="last">报警中</div> <div class="last">报警中</div>
</div> </div>
<template v-if="list.length > 0"> <template v-if="list.length > 0">
<div <div
class="tbody flex" class="tbody flex"
v-for="deviceData in list" v-for="deviceData in list"
:key="deviceData.inAlarm + Math.random()" :key="deviceData.inAlarm + Math.random()"
> >
<div v-unValue class="first zzz"> <div v-unValue class="first zzz">
{{ typeList[deviceData.dataType] }} {{ typeList[deviceData.dataType] }}
</div> </div>
<div v-unValue class="">{{ deviceData.numberPressureGauges }}</div> <div v-unValue class="">{{ deviceData.numberPressureGauges }}</div>
<div v-unValue class=""> <div v-unValue class="">
{{ deviceData.onlineEquipment }} {{ deviceData.onlineEquipment }}
</div> </div>
<div v-unValue class=""> <div v-unValue class="">
{{ deviceData.offlineEquipment }} {{ deviceData.offlineEquipment }}
</div> </div>
<!-- <div v-unValue class=""> <!-- <div v-unValue class="">
{{ deviceData.historicalAlarm }} {{ deviceData.historicalAlarm }}
</div> </div>
<div v-unValue class=""> <div v-unValue class="">
{{ deviceData.alarmProcessed }} {{ deviceData.alarmProcessed }}
</div> --> </div> -->
<div v-unValue class="last"> <div v-unValue class="last">
{{ deviceData.inAlarm }} {{ deviceData.inAlarm }}
</div>
</div> </div>
</div> </template>
</template> </div>
</div>
</div> </div>
<div style="width:100%;display: flex;" v-if="list.length > 0"> <div style="width: 100%; display: flex" v-if="list.length > 0">
<div class="btn"> <div class="btn">
<div>感知设备</div> <div>感知设备</div>
</div> </div>
<p style="width:83%;height:10px;background-color: #022346;margin-top: 22px;margin-left: -10px;"></p> <p
style="
width: 83%;
height: 10px;
background-color: #022346;
margin-top: 22px;
margin-left: -10px;
"
></p>
<div @click="btnClick"> <div @click="btnClick">
<img @click="flag = !flag" src="../../assets/second/box-down.png" :class="{ 'arrowTransform': !flag, 'arrowTransformReturn': flag}" alt="" style="width:30px;height:30px;margin-top: 12px;cursor: pointer;"> <img
</div> @click="flag = !flag"
src="../../assets/second/box-down.png"
:class="{ arrowTransform: !flag, arrowTransformReturn: flag }"
alt=""
style="width: 30px; height: 30px; margin-top: 12px; cursor: pointer"
/>
</div>
</div> </div>
<OtherCenter <OtherCenter
:title="centerTitle" :title="centerTitle"
...@@ -137,9 +153,7 @@ ...@@ -137,9 +153,7 @@
</template> </template>
<script> <script>
import { import { getTcqDevice } from "@/api/bigWindow/getDevice";
getTcqDevice,
} from "@/api/bigWindow/getDevice";
import { companyType, deviceType } from "@/utils/mapClass/config.js"; import { companyType, deviceType } from "@/utils/mapClass/config.js";
import { getCzDevice } from "@/api/bigWindow/getDevice.js"; import { getCzDevice } from "@/api/bigWindow/getDevice.js";
import OtherCenter from "@/components/bigWindow/OtherCenter.vue"; import OtherCenter from "@/components/bigWindow/OtherCenter.vue";
...@@ -151,7 +165,7 @@ export default { ...@@ -151,7 +165,7 @@ export default {
data() { data() {
return { return {
flag: true, flag: true,
isShow: true , isShow: true,
centerTitle: "", centerTitle: "",
companyType, companyType,
deviceType, deviceType,
...@@ -214,10 +228,8 @@ export default { ...@@ -214,10 +228,8 @@ export default {
this.companyType[item.conpanyId] = item.companyName; this.companyType[item.conpanyId] = item.companyName;
}); });
} }
this.myHttp() this.myHttp();
console.log(this.deviceData); console.log(this.deviceData);
}, },
methods: { methods: {
// 调压箱，阀门，场站睇下的设备 // 调压箱，阀门，场站睇下的设备
...@@ -241,7 +253,6 @@ export default { ...@@ -241,7 +253,6 @@ export default {
// } // }
// 传递回去 // 传递回去
return res.code; return res.code;
}); });
}, },
close() { close() {
...@@ -255,14 +266,21 @@ export default { ...@@ -255,14 +266,21 @@ export default {
: this.deviceData.stationName; : this.deviceData.stationName;
this.getTcqDevice( this.getTcqDevice(
{ devId: this.deviceData.siteStationId, relationDeviceType: 2,pageNum: 1, pageSize: 5, }, {
devId: this.deviceData.siteStationId,
relationDeviceType: 2,
pageNum: 1,
pageSize: 5,
},
title title
); );
}, },
myHttp() { myHttp() {
getCzDevice({ deviceId: this.deviceData.siteStationId }).then((res) => { getCzDevice({ deviceId: this.deviceData.siteStationId }).then((res) => {
this.list = res.data[0].subordinateEquipmentList.filter(item=>item.numberPressureGauges>0); this.list = res.data[0].subordinateEquipmentList.filter(
console.log("resresres222222222",this.list) (item) => item.numberPressureGauges > 0
);
console.log("resresres222222222", this.list);
}); });
}, },
}, },
...@@ -271,8 +289,9 @@ export default { ...@@ -271,8 +289,9 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.devicea-wrapper { .devicea-wrapper {
box-shadow: 0px 0px 10px #54e0ef inset; background: rgba(2, 26, 51, 0.9);
background-color: #071738; border: 1px solid #127bd1;
box-shadow: inset 0px 0px 10px 0px #164db2;
padding: 10px; padding: 10px;
position: relative; position: relative;
width: 670px; width: 670px;
...@@ -283,6 +302,20 @@ export default { ...@@ -283,6 +302,20 @@ export default {
font-size: 14px; font-size: 14px;
line-height: 14px; line-height: 14px;
color: #ffffff; color: #ffffff;
padding-left: 5px;
}
.line {
width: 50%;
height: 2px;
margin-top: 10px;
background: linear-gradient(
90deg,
rgba(29, 33, 41, 0) 0%,
#568ef6 38%,
#19d1ed 49%,
rgba(29, 33, 41, 0) 109%
);
// border: 2px solid;
} }
.close { .close {
position: absolute; position: absolute;
...@@ -318,7 +351,7 @@ export default { ...@@ -318,7 +351,7 @@ export default {
text-align: right; text-align: right;
} }
.right { .right {
flex:2; flex: 2;
} }
} }
} }
...@@ -345,7 +378,7 @@ export default { ...@@ -345,7 +378,7 @@ export default {
text-align: right; text-align: right;
} }
.right { .right {
flex:2; flex: 2;
} }
} }
} }
...@@ -354,16 +387,21 @@ export default { ...@@ -354,16 +387,21 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
div { div {
width: 50px; width: 50px;
font-size: 14px; font-size: 14px;
color: #ffffff; color: #ffffff;
&.last { &.last {
border-bottom: none; border-bottom: none;
}
} }
}
.imgtext { .imgtext {
color: #ffffff; color: #0055AE;
font-size: 10px; font-size: 20px;
box-sizing: border-box;
border: 1px solid #0055ae;
display: flex;
justify-content: center;
align-items: center;
} }
} }
} }
...@@ -379,7 +417,7 @@ export default { ...@@ -379,7 +417,7 @@ export default {
.foot { .foot {
font-size: 14px; font-size: 14px;
color: #ffffff; color: #ffffff;
background: url('../../assets/second/box-bg.png'); background: url("../../assets/second/box-bg.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 1px; padding: 1px;
...@@ -415,7 +453,7 @@ export default { ...@@ -415,7 +453,7 @@ export default {
div { div {
font-size: 14px; font-size: 14px;
color: #ffffff; color: #ffffff;
background: url('../../assets/second/boxbtn-bg.png'); background: url("../../assets/second/boxbtn-bg.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 7px 15px; padding: 7px 15px;
......
zh-baseversion-web/src/components/bigWindow/CzOld.vue 0 → 100644
View file @ f471396f
<!--
* @Author: your name
* @Date: 2022-01-26 20:07:52
* @LastEditTime: 2024-07-25 17:21:38
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/components/deviceA.vue
-->
<template>
<div class="devicea-wrapper">
<div class="title">
{{
deviceData.deviceName ? deviceData.deviceName : deviceData.stationName
}}
</div>
<div class="close" @click="close">
<!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> -->
<i class="el-icon-close" style="font-size: 20px; color: #5dfefe"></i>
</div>
<div class="line"></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">{{ profile }}</div>
</div>
</div>
<div class="top-center">
<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.address"
:title="deviceData.address"
class="right last zzz"
>
{{ deviceData.address || "-" }}
</div>
<div
v-else-if="deviceData.stationAddr"
:title="deviceData.stationAddr"
class="right last zzz"
>
{{ deviceData.stationAddr || "-" }}
</div>
<div class="right last zzz" v-else>-</div>
</div>
</div>
<div class="top-right">
<div class="left last">照片：</div>
<el-image
v-if="deviceData.pictureAddress"
style="width: 80px; height: 50px"
:src="deviceData.pictureAddress"
:preview-src-list="[deviceData.pictureAddress]"
:z-index="999999"
>
</el-image>
<div class="imgtext" v-else>暂无图片</div>
</div>
</div>
<!-- <div class="middle">{{ profile }}</div> -->
<div class="foot">
<div class="thead flex" v-if="list.length > 0">
<div class="first">设备类型</div>
<div>设备数量</div>
<div>在线设备</div>
<div>离线设备</div>
<!-- <div>历史报警</div>
<div>已处理报警</div> -->
<div class="last">报警中</div>
</div>
<template v-if="list.length > 0">
<div
class="tbody flex"
v-for="deviceData in list"
:key="deviceData.inAlarm + Math.random()"
>
<div v-unValue class="first zzz">
{{ typeList[deviceData.dataType] }}
</div>
<div v-unValue class="">{{ deviceData.numberPressureGauges }}</div>
<div v-unValue class="">
{{ deviceData.onlineEquipment }}
</div>
<div v-unValue class="">
{{ deviceData.offlineEquipment }}
</div>
<!-- <div v-unValue class="">
{{ deviceData.historicalAlarm }}
</div>
<div v-unValue class="">
{{ deviceData.alarmProcessed }}
</div> -->
<div v-unValue class="last">
{{ deviceData.inAlarm }}
</div>
</div>
</template>
</div>
</div>
<div style="width: 100%; display: flex" v-if="list.length > 0">
<div class="btn">
<div>感知设备</div>
</div>
<p
style="
width: 83%;
height: 10px;
background-color: #022346;
margin-top: 22px;
margin-left: -10px;
"
></p>
<div @click="btnClick">
<img
@click="flag = !flag"
src="../../assets/second/box-down.png"
:class="{ arrowTransform: !flag, arrowTransformReturn: flag }"
alt=""
style="width: 30px; height: 30px; margin-top: 12px; cursor: pointer"
/>
</div>
</div>
<OtherCenter
:title="centerTitle"
:show="otherCenterShow"
ref="otherCenter"
:detcetorList="detcetorList"
:userId="centerUserId"
:total="centerTotal"
:pageSize="5"
v-show="!isShow"
/>
</div>
</template>
<script>
import { getTcqDevice } from "@/api/bigWindow/getDevice";
import { companyType, deviceType } from "@/utils/mapClass/config.js";
import { getCzDevice } from "@/api/bigWindow/getDevice.js";
import OtherCenter from "@/components/bigWindow/OtherCenter.vue";
export default {
components: {
OtherCenter,
},
data() {
return {
flag: true,
isShow: true,
centerTitle: "",
companyType,
deviceType,
otherCenterShow: false,
userCenterShow: false,
detcetorList: [],
centerUserId: null,
centerTotal: null,
profile: "暂无备注",
typeList: {
// 1压力表 2流量计 3探测器
1: "压力表",
2: "流量计",
3: "工业探测器",
},
list: [
// {
// numberPressureGauges: "-",
// onlineEquipment: "-",
// offlineEquipment: "-",
// historicalAlarm: "-",
// alarmProcessed: "-",
// inAlarm: "-",
// dataType: 1,
// },
// {
// numberPressureGauges: "-",
// onlineEquipment: "-",
// offlineEquipment: "-",
// historicalAlarm: "-",
// alarmProcessed: "-",
// inAlarm: "-",
// dataType: 2,
// },
// {
// numberPressureGauges: "-",
// onlineEquipment: "-",
// offlineEquipment: "-",
// historicalAlarm: "-",
// alarmProcessed: "-",
// inAlarm: "-",
// dataType: 3,
// },
],
};
},
computed: {
prodTest() {
return this.vueRoot.$store.state.user.systemSetting.prod_test;
},
company() {
return this.vueRoot.$store.state.bigWindowCompany.company;
},
},
mounted() {
// 如果不是测试，而是真数据，就要用帧数据的东西
if (this.prodTest != "test") {
this.companyType = {};
this.company.forEach((item) => {
this.companyType[item.conpanyId] = item.companyName;
});
}
this.myHttp();
console.log(this.deviceData);
},
methods: {
// 调压箱，阀门，场站睇下的设备
getTcqDevice(queryParams, title) {
console.log(queryParams);
return getTcqDevice(queryParams).then((res) => {
// console.log("queryParams", res);
console.log("resresresresreszzzzzzzzzzzzzzz", res);
this.detcetorList = res;
this.centerUserId = queryParams.devId;
// 总数据
this.centerTotal = res.length;
// this.$refs.userCenter.fade = "fade";
this.userCenterShow = false;
this.otherCenterShow = true;
this.centerTitle = title;
// if (res.detectorStatus === "在线"){
// return {'color':'red'}
// }
// 传递回去
return res.code;
});
},
close() {
this.mapClass.infowindowClose();
},
btnClick() {
this.isShow = !this.isShow;
// this.vueRoot.centerDataFunc(this.deviceData.pressureFlows);
const title = this.deviceData.deviceName
? this.deviceData.deviceName
: this.deviceData.stationName;
this.getTcqDevice(
{
devId: this.deviceData.siteStationId,
relationDeviceType: 2,
pageNum: 1,
pageSize: 5,
},
title
);
},
myHttp() {
getCzDevice({ deviceId: this.deviceData.siteStationId }).then((res) => {
this.list = res.data[0].subordinateEquipmentList.filter(
(item) => item.numberPressureGauges > 0
);
console.log("resresres222222222", this.list);
});
},
},
};
</script>
<style lang="scss" scoped>
.devicea-wrapper {
background: rgba(2, 26, 51, 0.9);
border: 1px solid #127bd1;
box-shadow: inset 0px 0px 10px 0px #164db2;
padding: 10px;
position: relative;
width: 670px;
border-radius: 7px;
.title {
// padding-top: 10px;
// padding-left: 10px;
font-size: 14px;
line-height: 14px;
color: #ffffff;
padding-left: 5px;
}
.line {
width: 50%;
height: 2px;
margin-top: 10px;
background: linear-gradient(
90deg,
rgba(29, 33, 41, 0) 0%,
#568ef6 38%,
#19d1ed 49%,
rgba(29, 33, 41, 0) 109%
);
// border: 2px solid;
}
.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;
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;
}
}
}
.top-center {
flex: 1.8;
.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: 2;
}
}
}
.top-right {
flex: 1;
display: flex;
justify-content: center;
div {
width: 50px;
font-size: 14px;
color: #ffffff;
&.last {
border-bottom: none;
}
}
.imgtext {
color: #ffffff;
font-size: 12px;
}
}
}
.middle {
width: 100%;
padding: 5px;
box-sizing: border-box;
font-size: 14px;
color: #ffffff;
text-indent: 2em;
margin-bottom: 10px;
}
.foot {
font-size: 14px;
color: #ffffff;
background: url("../../assets/second/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;
}
// .first {
// flex: 2;
// }
// .last {
// border-right: none;
// }
}
.tbody {
border-top: none;
}
// .thead {
// div {
// background-color: rgba(255, 255, 255, 0.1);
// }
// }
}
.btn {
position: relative;
margin-top: 10px;
div {
font-size: 14px;
color: #ffffff;
background: url("../../assets/second/boxbtn-bg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 7px 15px;
}
}
.flex {
display: flex;
justify-content: space-between;
}
}
</style>
zh-baseversion-web/src/components/bigWindow/Device.vue
View file @ f471396f
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-01-26 20:07:52 * @Date: 2022-01-26 20:07:52
* @LastEditTime: 2022-03-23 15:23:34 * @LastEditTime: 2024-07-25 17:13:32
* @LastEditors: Please set LastEditors * @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/components/deviceA.vue * @FilePath: /test/hello-world/src/views/components/deviceA.vue
...@@ -11,20 +11,22 @@ ...@@ -11,20 +11,22 @@
<div class="devicea-wrapper"> <div class="devicea-wrapper">
<div class="title"> <div class="title">
{{ {{
deviceData.deviceName ? deviceData.deviceName : deviceData.stationName deviceData.deviceName ? deviceData.deviceName : deviceData.stationName
}} }}
</div> </div>
<div class="close" @click="close"> <div class="close" @click="close">
<!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> --> <!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> -->
<i class="el-icon-close" style="font-size:20px;color:#5dfefe;"></i> <i class="el-icon-close" style="font-size: 20px; color: #49d8ff"></i>
</div> </div>
<p style="background-image: linear-gradient(to right, #5dfefe, #071738); width:100%;height:1px;"></p> <div class="line"></div>
<div> <div>
<div class="top flex"> <div class="top flex">
<div class="top-left"> <div class="top-left">
<div class="group"> <div class="group">
<div class="left">所属公司：</div> <div class="left">所属公司：</div>
<div class="right zzz">{{ companyType[deviceData.companyType] }}</div> <div class="right zzz">
{{ companyType[deviceData.companyType] }}
</div>
</div> </div>
<div class="group"> <div class="group">
...@@ -64,11 +66,11 @@ ...@@ -64,11 +66,11 @@
v-if="deviceData.iconUrl" v-if="deviceData.iconUrl"
style="width: 80px; height: 50px" style="width: 80px; height: 50px"
:src="deviceData.iconUrl" :src="deviceData.iconUrl"
:preview-src-list="[deviceData.iconUrl ]" :preview-src-list="[deviceData.iconUrl]"
:z-index="999999" :z-index="999999"
> >
</el-image> </el-image>
<div class="imgtext" v-else>暂无图片</div> <div class="imgtext" v-else>无</div>
</div> </div>
</div> </div>
...@@ -114,13 +116,27 @@ ...@@ -114,13 +116,27 @@
</div> </div>
</div> </div>
<div style="width:100%;display: flex;"> <div style="width: 100%; display: flex" v-if="detcetorList.length > 0">
<div class="btn" v-if="list.length > 0"> <div class="btn" v-if="list.length > 0">
<div>感知设备</div> <div>感知设备</div>
</div> </div>
<p style="width:83%;height:10px;background-color: #022346;margin-top: 22px;margin-left: -10px;"></p> <p
style="
width: 97%;
height: 10px;
background-color: #022346;
margin-top: 22px;
margin-left: -10px;
"
></p>
<div @click="btnClick"> <div @click="btnClick">
<img @click="flag = !flag" src="../../assets/second/box-down.png" :class="{ 'arrowTransform': !flag, 'arrowTransformReturn': flag}" alt="" style="width:30px;height:30px;margin-top: 12px;cursor: pointer;"> <img
@click="flag = !flag"
src="../../assets/second/box-down.png"
:class="{ arrowTransform: !flag, arrowTransformReturn: flag }"
alt=""
style="width: 30px; height: 30px; margin-top: 12px; cursor: pointer"
/>
</div> </div>
</div> </div>
...@@ -138,94 +154,92 @@ ...@@ -138,94 +154,92 @@
</template> </template>
<script> <script>
import { import { getTcqDevice } from "@/api/bigWindow/getDevice";
getTcqDevice, import { companyType, deviceType } from "@/utils/mapClass/config.js";
} from "@/api/bigWindow/getDevice"; import { getTyxDevice, getFmDevice } from "@/api/bigWindow/getDevice.js";
import { companyType, deviceType } from "@/utils/mapClass/config.js"; import OtherCenter from "@/components/bigWindow/OtherCenter.vue";
import { getTyxDevice, getFmDevice } from "@/api/bigWindow/getDevice.js"; export default {
import OtherCenter from "@/components/bigWindow/OtherCenter.vue"; components: {
export default { OtherCenter,
components: { },
OtherCenter, data() {
}, return {
data() { flag: true,
return { isShow: true,
flag: true, centerTitle: "",
isShow: true , otherCenterShow: false,
centerTitle: "", alarmTimer: null,
otherCenterShow: false, detcetorList: [],
alarmTimer: null, centerUserId: null,
detcetorList: [], centerTotal: null,
centerUserId: null, userCenterShow: false,
centerTotal: null, companyType,
userCenterShow: false, deviceType,
companyType, profile: "暂无备注",
deviceType, typeList: {
profile: "暂无备注", // 1压力表 2流量计 3探测器
typeList: { 1: "压力表",
// 1压力表 2流量计 3探测器 2: "流量计",
1: "压力表", 3: "工业探测器",
2: "流量计",
3: "工业探测器",
},
list: [
// {
// numberPressureGauges: "-",
// onlineEquipment: "-",
// offlineEquipment: "-",
// historicalAlarm: "-",
// alarmProcessed: "-",
// inAlarm: "-",
// dataType: 1,
// },
// {
// numberPressureGauges: "-",
// onlineEquipment: "-",
// offlineEquipment: "-",
// historicalAlarm: "-",
// alarmProcessed: "-",
// inAlarm: "-",
// dataType: 2,
// },
// {
// numberPressureGauges: "-",
// onlineEquipment: "-",
// offlineEquipment: "-",
// historicalAlarm: "-",
// alarmProcessed: "-",
// inAlarm: "-",
// dataType: 3,
// },
],
};
},
computed: {
prodTest() {
return this.vueRoot.$store.state.user.systemSetting.prod_test;
},
company() {
return this.vueRoot.$store.state.bigWindowCompany.company;
}, },
list: [
// {
// numberPressureGauges: "-",
// onlineEquipment: "-",
// offlineEquipment: "-",
// historicalAlarm: "-",
// alarmProcessed: "-",
// inAlarm: "-",
// dataType: 1,
// },
// {
// numberPressureGauges: "-",
// onlineEquipment: "-",
// offlineEquipment: "-",
// historicalAlarm: "-",
// alarmProcessed: "-",
// inAlarm: "-",
// dataType: 2,
// },
// {
// numberPressureGauges: "-",
// onlineEquipment: "-",
// offlineEquipment: "-",
// historicalAlarm: "-",
// alarmProcessed: "-",
// inAlarm: "-",
// dataType: 3,
// },
],
};
},
computed: {
prodTest() {
return this.vueRoot.$store.state.user.systemSetting.prod_test;
}, },
mounted() { company() {
// 如果不是测试，而是真数据，就要用帧数据的东西 return this.vueRoot.$store.state.bigWindowCompany.company;
if (this.prodTest != "test") {
this.companyType = {};
this.company.forEach((item) => {
this.companyType[item.conpanyId] = item.companyName;
});
}
// 当点开infowindow的时候，重新调接口
this.myHttp();
console.log(this.deviceData);
}, },
methods: { },
// 调压箱，阀门，场站睇下的设备 mounted() {
getTcqDevice(queryParams, title) { // 如果不是测试，而是真数据，就要用帧数据的东西
console.log(queryParams); if (this.prodTest != "test") {
return getTcqDevice(queryParams).then((res) => { this.companyType = {};
// console.log("queryParams", res); this.company.forEach((item) => {
console.log("resresresresreszzzzzzzzzzzzzzz", res); this.companyType[item.conpanyId] = item.companyName;
});
}
// 当点开infowindow的时候，重新调接口
this.myHttp();
console.log(this.deviceData);
},
methods: {
// 调压箱，阀门，场站睇下的设备
getTcqDevice(queryParams, title) {
console.log(queryParams);
return getTcqDevice(queryParams).then((res) => {
// console.log("queryParams", res);
console.log("resresresresreszzzzzzzzzzzzzzz", res);
this.detcetorList = res; this.detcetorList = res;
this.centerUserId = queryParams.devId; this.centerUserId = queryParams.devId;
...@@ -241,214 +255,243 @@ ...@@ -241,214 +255,243 @@
// } // }
// 传递回去 // 传递回去
return res.code; return res.code;
}); });
}, },
close() { close() {
this.mapClass.infowindowClose(); this.mapClass.infowindowClose();
}, },
btnClick() { btnClick() {
this.isShow = !this.isShow; this.isShow = !this.isShow;
// this.vueRoot.centerDataFunc(this.deviceData.pressureFlows); // this.vueRoot.centerDataFunc(this.deviceData.pressureFlows);
const title = this.deviceData.deviceName const title = this.deviceData.deviceName
? this.deviceData.deviceName ? this.deviceData.deviceName
: this.deviceData.stationName; : this.deviceData.stationName;
this.getTcqDevice( this.getTcqDevice(
{ devId: this.deviceData.deviceId, relationDeviceType: 1,pageNum: 1, pageSize: 5, }, {
title devId: this.deviceData.deviceId,
); relationDeviceType: 1,
}, pageNum: 1,
myHttp() { pageSize: 5,
console.log(this.deviceData.iconType); },
title
);
},
myHttp() {
console.log(this.deviceData.iconType);
if (this.deviceData.iconType == 2) { if (this.deviceData.iconType == 2) {
getTyxDevice({ deviceId: this.deviceData.deviceId }).then((res) => { getTyxDevice({ deviceId: this.deviceData.deviceId }).then((res) => {
// 过滤设备数为0的 // 过滤设备数为0的
this.list = res.data[0].subordinateEquipmentList.filter( this.list = res.data[0].subordinateEquipmentList.filter(
(item) => item.numberPressureGauges > 0 (item) => item.numberPressureGauges > 0
); );
console.log("this.list333333333",this.list); console.log("this.list333333333", this.list);
}); });
} else { } else {
getFmDevice({ deviceId: this.deviceData.deviceId }).then((res) => { getFmDevice({ deviceId: this.deviceData.deviceId }).then((res) => {
// 过滤设备数为0的 // 过滤设备数为0的
this.list = res.data[0].subordinateEquipmentList.filter( this.list = res.data[0].subordinateEquipmentList.filter(
(item) => item.numberPressureGauges > 0 (item) => item.numberPressureGauges > 0
); );
}); });
} }
},
}, },
}; },
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.arrowTransform { .devicea-wrapper {
transition: 0s; // box-shadow: 0px 0px 10px #54e0ef inset;
transform-origin: center; // background-color: #071738;
transform: rotateZ(180deg); background: rgba(2, 26, 51, 0.9);
border: 1px solid #127bd1;
box-shadow: inset 0px 0px 10px 0px #164db2;
padding: 10px;
position: relative;
width: 670px;
border-radius: 7px;
.title {
// padding-top: 10px;
// padding-left: 10px;
font-size: 14px;
line-height: 14px;
color: #ffffff;
padding-left:10px;
} }
.line {
width: 50%;
height: 2px;
.arrowTransformReturn { margin-top:10px;
transition: 0s; background: linear-gradient(
transform-origin: center; 90deg,
transform: rotateZ(0deg); rgba(29, 33, 41, 0) 0%,
#568ef6 38%,
#19d1ed 49%,
rgba(29, 33, 41, 0) 109%
);
// border: 2px solid;
}
.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 { .top {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
box-sizing: border-box; box-sizing: border-box;
.top-left { .top-left {
flex: 1.8; flex: 1.8;
.group { .group {
height: 30px; height: 30px;
flex: 1;
display: flex;
justify-content: space-between;
box-sizing: border-box;
div {
flex: 1; flex: 1;
display: flex;
justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
div { font-size: 14px;
flex: 1; color: #ffffff;
box-sizing: border-box; line-height: 30px;
font-size: 14px; padding: 0 5px;
color: #ffffff; &.last {
line-height: 30px; border-bottom: none;
padding: 0 5px;
&.last {
border-bottom: none;
}
}
.left {
text-align: right;
}
.right {
flex:2;
} }
} }
} .left {
.top-center { text-align: right;
flex: 1.8; }
.group { .right {
height: 30px; flex: 2;
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;
}
} }
} }
.top-right { }
.top-center {
flex: 1.8;
.group {
height: 30px;
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: center; justify-content: space-between;
box-sizing: border-box;
div { div {
width: 50px; flex: 1;
box-sizing: border-box;
font-size: 14px; font-size: 14px;
color: #ffffff; color: #ffffff;
line-height: 30px;
padding: 0 5px;
&.last { &.last {
border-bottom: none; border-bottom: none;
} }
} }
.imgtext { .left {
color: #ffffff; text-align: right;
font-size: 30px; }
.right {
flex: 2;
} }
} }
} }
// .middle { .top-right {
// width: 100%; flex: 1;
// padding: 5px; display: flex;
// box-sizing: border-box; justify-content: center;
// font-size: 14px; box-sizing: border-box;
// color: #ffffff; padding-top: 5px;
// text-indent: 2em; div {
// margin-bottom: 10px; width: 50px;
// } font-size: 14px;
.foot { color: #ffffff;
font-size: 14px; &.last {
color: #ffffff; border-bottom: none;
background: url('../../assets/second/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;
} }
// .first {
// flex: 2;
// }
// .last {
// border-right: none;
// }
} }
.tbody { .imgtext {
border-top: none; color: #0055AE;
font-size: 20px;
box-sizing: border-box;
border: 1px solid #0055ae;
display: flex;
justify-content: center;
align-items: center;
} }
// .thead {
// div {
// background-color: rgba(255, 255, 255, 0.1);
// }
// }
} }
}
.btn { // .middle {
position: relative; // width: 100%;
margin-top: 10px; // padding: 5px;
// box-sizing: border-box;
// font-size: 14px;
// color: #ffffff;
// text-indent: 2em;
// margin-bottom: 10px;
// }
.foot {
font-size: 14px;
color: #ffffff;
background: url("../../assets/second/box-bg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 1px;
.thead,
.tbody {
div { div {
font-size: 14px; flex: 1;
color: #ffffff; text-align: left;
background: url('../../assets/second/boxbtn-bg.png'); box-sizing: border-box;
background-size: 100% 100%; text-align: center;
background-repeat: no-repeat; border: 1px solid #1b365d;
padding: 7px 15px;
} }
// .first {
// flex: 2;
// }
// .last {
// border-right: none;
// }
} }
.flex { .tbody {
display: flex; border-top: none;
justify-content: space-between;
} }
// .thead {
// div {
// background-color: rgba(255, 255, 255, 0.1);
// }
// }
} }
.btn {
position: relative;
margin-top: 10px;
div {
font-size: 14px;
color: #ffffff;
background: url("../../assets/second/boxbtn-bg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 7px 15px;
}
}
.flex {
display: flex;
justify-content: space-between;
}
}
.arrowTransform {
transition: 0s;
transform-origin: center;
transform: rotateZ(180deg);
}
.arrowTransformReturn {
transition: 0s;
transform-origin: center;
transform: rotateZ(0deg);
}
</style> </style>
zh-baseversion-web/src/components/bigWindow/Line.vue
View file @ f471396f
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-01-27 14:25:45 * @Date: 2022-01-27 14:25:45
* @LastEditTime: 2022-02-28 11:35:31 * @LastEditTime: 2024-07-25 17:13:31
* @LastEditors: Please set LastEditors * @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /hello-world/src/views/components/User.vue * @FilePath: /hello-world/src/views/components/User.vue
--> -->
...@@ -11,15 +11,16 @@ ...@@ -11,15 +11,16 @@
<div class="title">{{ companyType[deviceData.companyType] }}</div> <div class="title">{{ companyType[deviceData.companyType] }}</div>
<div class="close" @click="close"> <div class="close" @click="close">
<!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> --> <!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> -->
<i class="el-icon-close" style="font-size:20px;color:#5dfefe;"></i> <i class="el-icon-close" style="font-size: 20px; color: #49d8ff"></i>
</div> </div>
<div class="line"></div>
<div class="group flex first"> <div class="group flex first">
<div class="first once left">管道名称：</div> <div class="first once left">管道名称：</div>
<div class="right pipeAddr right zzz">{{ deviceData.pipeName }}</div> <div class="right pipeAddr right zzz">{{ deviceData.pipeName }}</div>
</div> </div>
<div class="group flex "> <div class="group flex">
<div class="left first">管道长度：</div> <div class="left first">管道长度：</div>
<div class="right zzz">{{ deviceData.pipeLength }}米</div> <div class="right zzz">{{ deviceData.pipeLength }}米</div>
<div class="left">管径：</div> <div class="left">管径：</div>
...@@ -48,7 +49,9 @@ ...@@ -48,7 +49,9 @@
<div class="group flex"> <div class="group flex">
<div class="left first">管道走向：</div> <div class="left first">管道走向：</div>
<div class="right zzz" :title="deviceData.pipeTrend">{{ deviceData.pipeTrend }}</div> <div class="right zzz" :title="deviceData.pipeTrend">
{{ deviceData.pipeTrend }}
</div>
<div class="left">权属单位：</div> <div class="left">权属单位：</div>
<div :title="deviceData.powerCompany" class="right last zzz"> <div :title="deviceData.powerCompany" class="right last zzz">
{{ deviceData.powerCompany }} {{ deviceData.powerCompany }}
...@@ -58,7 +61,9 @@ ...@@ -58,7 +61,9 @@
<div class="first left">建设年代：</div> <div class="first left">建设年代：</div>
<div class="right">{{ deviceData.buildyear }}</div> <div class="right">{{ deviceData.buildyear }}</div>
<div class="left">建设单位：</div> <div class="left">建设单位：</div>
<div class="last right zzz" :title="deviceData.buildCompany">{{ deviceData.buildCompany }}</div> <div class="last right zzz" :title="deviceData.buildCompany">
{{ deviceData.buildCompany }}
</div>
</div> </div>
<div class="group flex"> <div class="group flex">
...@@ -83,22 +88,21 @@ export default { ...@@ -83,22 +88,21 @@ export default {
pipePressure, pipePressure,
}; };
}, },
computed:{ computed: {
prodTest(){ prodTest() {
return this.vueRoot.$store.state.user.systemSetting.prod_test return this.vueRoot.$store.state.user.systemSetting.prod_test;
},
company() {
return this.vueRoot.$store.state.bigWindowCompany.company;
}, },
company(){
return this.vueRoot.$store.state.bigWindowCompany.company;
}
}, },
mounted(){ mounted() {
// 如果不是测试，而是真数据，就要用帧数据的东西 // 如果不是测试，而是真数据，就要用帧数据的东西
if(this.prodTest !="test"){ if (this.prodTest != "test") {
this.companyType={}; this.companyType = {};
this.company.forEach(item=>{ this.company.forEach((item) => {
this.companyType[item.conpanyId] = item.companyName; this.companyType[item.conpanyId] = item.companyName;
}) });
} }
}, },
methods: { methods: {
...@@ -111,17 +115,35 @@ export default { ...@@ -111,17 +115,35 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.user-wrapper { .user-wrapper {
box-shadow: 0px 0px 10px #54e0ef inset; // box-shadow: 0px 0px 10px #54e0ef inset;
background-color: #071738; // background-color: #071738;
background: rgba(2, 26, 51, 0.9);
border: 1px solid #127bd1;
box-shadow: inset 0px 0px 10px 0px #164db2;
padding: 10px; padding: 10px;
position: relative; position: relative;
width: 500px; width: 500px;
border-radius: 7px; border-radius: 7px;
.title { .title {
padding-left: 5px;
font-size: 14px; font-size: 14px;
line-height: 14px; line-height: 14px;
color: #ffffff; color: #ffffff;
} }
.line {
width: 50%;
height: 2px;
margin-top: 10px;
background: linear-gradient(
90deg,
rgba(29, 33, 41, 0) 0%,
#568ef6 38%,
#19d1ed 49%,
rgba(29, 33, 41, 0) 109%
);
// border: 2px solid;
}
.close { .close {
position: absolute; position: absolute;
right: 10px; right: 10px;
......
zh-baseversion-web/src/components/bigWindow/MediumPressureLine.vue
View file @ f471396f
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-01-27 14:25:45 * @Date: 2022-01-27 14:25:45
* @LastEditTime: 2022-02-28 11:35:31 * @LastEditTime: 2024-07-25 17:04:48
* @LastEditors: Please set LastEditors * @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /hello-world/src/views/components/User.vue * @FilePath: /hello-world/src/views/components/User.vue
--> -->
...@@ -11,8 +11,10 @@ ...@@ -11,8 +11,10 @@
<div class="title">{{ companyType[deviceData.companyType] }}</div> <div class="title">{{ companyType[deviceData.companyType] }}</div>
<div class="close" @click="close"> <div class="close" @click="close">
<!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> --> <!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> -->
<i class="el-icon-close" style="font-size:20px;color:#5dfefe;"></i> <i class="el-icon-close" style="font-size: 20px; color: #49d8ff"></i>
</div> </div>
<div class="line"></div>
<div class="group flex first"> <div class="group flex first">
<div class="first once left">管道名称：</div> <div class="first once left">管道名称：</div>
...@@ -36,7 +38,9 @@ ...@@ -36,7 +38,9 @@
{{ deviceData.pipePressure }} {{ deviceData.pipePressure }}
</div> </div>
<div class="left">所属公司：</div> <div class="left">所属公司：</div>
<div class="right last zzz">{{ companyType[deviceData.companyType] }}</div> <div class="right last zzz">
{{ companyType[deviceData.companyType] }}
</div>
</div> </div>
<div class="group flex"> <div class="group flex">
...@@ -48,7 +52,9 @@ ...@@ -48,7 +52,9 @@
<div class="group flex"> <div class="group flex">
<div class="left first">管道走向：</div> <div class="left first">管道走向：</div>
<div class="right zzz" :title="deviceData.pipeTrend">{{ deviceData.pipeTrend }}</div> <div class="right zzz" :title="deviceData.pipeTrend">
{{ deviceData.pipeTrend }}
</div>
<div class="left">权属单位：</div> <div class="left">权属单位：</div>
<div :title="deviceData.powerCompany" class="right last zzz"> <div :title="deviceData.powerCompany" class="right last zzz">
{{ deviceData.powerCompany }} {{ deviceData.powerCompany }}
...@@ -58,7 +64,9 @@ ...@@ -58,7 +64,9 @@
<div class="first left">建设年代：</div> <div class="first left">建设年代：</div>
<div class="right">{{ deviceData.buildyear }}</div> <div class="right">{{ deviceData.buildyear }}</div>
<div class="left">建设单位：</div> <div class="left">建设单位：</div>
<div class="last right zzz" :title="deviceData.buildCompany">{{ deviceData.buildCompany }}</div> <div class="last right zzz" :title="deviceData.buildCompany">
{{ deviceData.buildCompany }}
</div>
</div> </div>
<div class="group flex"> <div class="group flex">
...@@ -71,7 +79,7 @@ ...@@ -71,7 +79,7 @@
{{ deviceData.pipeAddr }} {{ deviceData.pipeAddr }}
</div> </div>
</div> </div>
<div class="group flex" v-show="isVisibleMethod"> <div class="group flex" v-show="isVisibleMethod">
<div class="left">详细地址：</div> <div class="left">详细地址：</div>
<div class="right pipeAddr last zzz">{{ deviceData.detaildAddress }}</div> <div class="right pipeAddr last zzz">{{ deviceData.detaildAddress }}</div>
...@@ -84,7 +92,6 @@ ...@@ -84,7 +92,6 @@
<div class="right last zzz">{{ deviceData.indRegAuthPer }}</div> <div class="right last zzz">{{ deviceData.indRegAuthPer }}</div>
</div> </div>
<div class="group flex" v-show="isVisibleMethod"> <div class="group flex" v-show="isVisibleMethod">
<div class="first left">主管负责电话：</div> <div class="first left">主管负责电话：</div>
<div class="right zzz">{{ deviceData.indRegAuthPerCon }}</div> <div class="right zzz">{{ deviceData.indRegAuthPerCon }}</div>
...@@ -92,7 +99,6 @@ ...@@ -92,7 +99,6 @@
<div class="right last zzz">{{ deviceData.keyAreasGasUsage }}</div> <div class="right last zzz">{{ deviceData.keyAreasGasUsage }}</div>
</div> </div>
<div class="group flex" v-show="isVisibleMethod"> <div class="group flex" v-show="isVisibleMethod">
<div class="first left">燃气公司：</div> <div class="first left">燃气公司：</div>
<div class="right zzz">{{ deviceData.affGasCom }}</div> <div class="right zzz">{{ deviceData.affGasCom }}</div>
...@@ -123,43 +129,45 @@ export default { ...@@ -123,43 +129,45 @@ export default {
return { return {
companyType, companyType,
pipePressure, pipePressure,
isClose: false isClose: false,
}; };
}, },
computed:{ computed: {
prodTest(){ prodTest() {
return this.vueRoot.$store.state.user.systemSetting.prod_test return this.vueRoot.$store.state.user.systemSetting.prod_test;
},
company() {
return this.vueRoot.$store.state.bigWindowCompany.company;
}, },
company(){
return this.vueRoot.$store.state.bigWindowCompany.company;
}
}, },
mounted(){ mounted() {
// 如果不是测试，而是真数据，就要用帧数据的东西 // 如果不是测试，而是真数据，就要用帧数据的东西
if(this.prodTest !="test"){ if (this.prodTest != "test") {
this.companyType={}; this.companyType = {};
this.company.forEach(item=>{ this.company.forEach((item) => {
this.companyType[item.conpanyId] = item.companyName; this.companyType[item.conpanyId] = item.companyName;
}) });
} }
}, },
methods: { methods: {
close() { close() {
// 关闭前先把颜色改回来 // 关闭前先把颜色改回来
this.mapClass.infowindowClose(); this.mapClass.infowindowClose();
}, },
isVisibleMethod(){ isVisibleMethod() {
return deviceData.pipePressure == "中压" return deviceData.pipePressure == "中压";
} },
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.user-wrapper { .user-wrapper {
box-shadow: 0px 0px 10px #54e0ef inset; // box-shadow: 0px 0px 10px #54e0ef inset;
background-color: #071738; // background-color: #071738;
background: rgba(2, 26, 51, 0.9);
border: 1px solid #127bd1;
box-shadow: inset 0px 0px 10px 0px #164db2;
padding: 10px; padding: 10px;
position: relative; position: relative;
width: 500px; width: 500px;
...@@ -168,6 +176,20 @@ export default { ...@@ -168,6 +176,20 @@ export default {
font-size: 14px; font-size: 14px;
line-height: 14px; line-height: 14px;
color: #ffffff; color: #ffffff;
padding-left: 5px;
}
.line {
width: 50%;
height: 1px;
margin-top: 10px;
background: linear-gradient(
90deg,
rgba(29, 33, 41, 0) 0%,
#568ef6 38%,
#19d1ed 49%,
rgba(29, 33, 41, 0) 109%
);
// border: 2px solid;
} }
.close { .close {
position: absolute; position: absolute;
......
zh-baseversion-web/src/components/bigWindow/PipeColor.vue
View file @ f471396f
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-01-26 10:52:10 * @Date: 2022-01-26 10:52:10
* @LastEditTime: 2022-02-17 10:11:35 * @LastEditTime: 2024-07-25 17:33:10
* @LastEditors: Please set LastEditors * @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/components/PipeColor.vue * @FilePath: /test/hello-world/src/components/PipeColor.vue
--> -->
<template> <template>
<div> <div>
<!-- <div class="pipePressure"> --> <!-- <div class="pipePressure"> -->
<!-- <!--
<div style="float: left;margin-right: 5px;"> <div style="float: left;margin-right: 5px;">
<div class="hasColorBox"> <div class="hasColorBox">
<img src="../../assets/image/bigtyx.svg" alt=""> <img src="../../assets/image/bigtyx.svg" alt="">
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
监控 监控
</div> </div>
</div> --> </div> -->
<!-- <div> <!-- <div>
<div class="hasColorBox" :style="{ color: pipeColor[`1`] }"> <div class="hasColorBox" :style="{ color: pipeColor[`1`] }">
<div :style="{ backgroundColor: pipeColor[`1`] }"></div> <div :style="{ backgroundColor: pipeColor[`1`] }"></div>
低压管线 低压管线
...@@ -63,23 +63,23 @@ ...@@ -63,23 +63,23 @@
import { pipeColor } from "@/utils/mapClass/config.js"; import { pipeColor } from "@/utils/mapClass/config.js";
export default { export default {
data() { data() {
downIcon: true; downIcon: true;
return { return {
pipeColor, pipeColor,
mapStyle:true, mapStyle: true,
}; };
}, },
methods: { methods: {
// 更改卫星图 // 更改卫星图
mapChange(num) { mapChange(num) {
if (num == 1) { if (num == 1) {
this.mapStyle = false; this.mapStyle = false;
} else { } else {
this.mapStyle = true; this.mapStyle = true;
} }
this.$parent.map.changeMap(this.mapStyle); this.$parent.map.changeMap(this.mapStyle);
},
}, },
},
}; };
</script> </script>
...@@ -108,32 +108,47 @@ export default { ...@@ -108,32 +108,47 @@ export default {
} }
} }
} }
.hasColorBox>img{ .hasColorBox > img {
width: 14px; width: 14px;
} }
.mapChange { .mapChange {
left: 10px; left: 10px;
top: 55px; top: 50px;
color: #fff; color: #fff;
padding: 5px; padding: 5px;
position: absolute; position: absolute;
display: flex; display: flex;
z-index: 9999; z-index: 9999;
div { div {
border: 1px solid #339CC9; width: 128px;
padding: 3px 6px; height: 32px;
text-align: center;
line-height: 3px;
background: url("~@/assets/firstimage/btm-item.png") no-repeat bottom center;
line-height: 34px;
// background-color: #053b6a;
// border: 1px solid #339CC9;
// padding: 3px 6px;
margin-left: 8px; margin-left: 8px;
color: #339CC9; color: #ffffff;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
&.active, transition: all 0.2s linear;
&:hover &.active {
{ background: url("~@/assets/firstimage/btm-item-active.png") no-repeat
background-color: #053B6A ; bottom center;
color: #2CD5DB; &:hover {
background: url("~@/assets/firstimage/btm-item-active.png") no-repeat
bottom center;
opacity: 1;
}
}
&:hover {
background: url("~@/assets/firstimage/btm-item-active.png") no-repeat
bottom center;
opacity: 0.7;
} }
} }
} }
</style> </style>
zh-baseversion-web/src/components/bigWindow/User.vue
View file @ f471396f
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-01-26 20:07:52 * @Date: 2022-01-26 20:07:52
* @LastEditTime: 2022-03-17 09:05:30 * @LastEditTime: 2024-07-25 17:13:33
* @LastEditors: Please set LastEditors * @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/components/deviceA.vue * @FilePath: /test/hello-world/src/views/components/deviceA.vue
...@@ -14,30 +14,31 @@ ...@@ -14,30 +14,31 @@
</div> </div>
<div class="close" @click="close"> <div class="close" @click="close">
<!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> --> <!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> -->
<i class="el-icon-close" style="font-size:20px;color:#5dfefe;"></i> <i class="el-icon-close" style="font-size: 20px; color: #49d8ff"></i>
</div> </div>
<p style="background-image: linear-gradient(to right, #5dfefe, #071738); width:100%;height:1px;"></p> <div class="line"></div>
<div> <div>
<div class="top flex top-top"> <div class="top flex top-top">
<div class="group" style="width:20%"> <div class="group" style="width: 20%">
<div class="left">联系人：</div> <div class="left">联系人：</div>
<div class="right zzz">{{ deviceData.linkman }}</div> <div class="right zzz">{{ deviceData.linkman }}</div>
</div>
<div class="group" style="width:30%">
<div class="left">联系电话:</div>
<div v-unValue class="right zzz">
{{ deviceData.phone }}
</div> </div>
</div> <div class="group" style="width: 30%">
<div class="group" style="width:30%"> <div class="left">联系电话:</div>
<div class="left">联系地址：</div> <div v-unValue class="right zzz">
<div :title="deviceData.address" class="right last zzz"> {{ deviceData.phone }}
{{ deviceData.address || "-" }} </div>
</div>
<div class="group" style="width: 30%">
<div class="left">联系地址：</div>
<div :title="deviceData.address" class="right last zzz">
{{ deviceData.address || "-" }}
</div>
</div> </div>
</div> </div>
</div>
<!-- <div class="top flex top-bottom"> <!-- <div class="top flex top-bottom">
<div class="group"> <div class="group">
<div class="left">联系地址：</div> <div class="left">联系地址：</div>
<div :title="deviceData.address" class="right last zzz"> <div :title="deviceData.address" class="right last zzz">
...@@ -46,55 +47,68 @@ ...@@ -46,55 +47,68 @@
</div> </div>
</div> --> </div> -->
<template v-if="deviceData.detectorCountList"> <template v-if="deviceData.detectorCountList">
<div class="foot"> <div class="foot">
<div class="thead flex"> <div class="thead flex">
<div class="first">设备类型</div> <div class="first">设备类型</div>
<div>设备数量</div> <div>设备数量</div>
<div>在线设备</div> <div>在线设备</div>
<div>离线设备</div> <div>离线设备</div>
<!-- <div>历史报警</div> <!-- <div>历史报警</div>
<div>已处理报警</div> --> <div>已处理报警</div> -->
<div class="last">报警中</div> <div class="last">报警中</div>
</div>
<div
v-for="data in deviceData.detectorCountList"
:key="data.userId"
class="tbody flex"
>
<div v-unValue class="first zzz">{{ data.detectorType }}</div>
<div class="">{{ data.detectorCount }}</div>
<div v-unValue class="">
{{ data.onLineNum }}
</div> </div>
<div v-unValue class=""> <div
{{ data.offLineNum }} v-for="data in deviceData.detectorCountList"
</div> :key="data.userId"
<!-- <div v-unValue class=""> class="tbody flex"
>
<div v-unValue class="first zzz">{{ data.detectorType }}</div>
<div class="">{{ data.detectorCount }}</div>
<div v-unValue class="">
{{ data.onLineNum }}
</div>
<div v-unValue class="">
{{ data.offLineNum }}
</div>
<!-- <div v-unValue class="">
{{ data.historyAlarmNum }} {{ data.historyAlarmNum }}
</div> </div>
<div v-unValue class=""> <div v-unValue class="">
{{ data.cancelAlarmNum }} {{ data.cancelAlarmNum }}
</div> --> </div> -->
<div v-unValue class="last zzz"> <div v-unValue class="last zzz">
{{ data.processingAlarmNum }} {{ data.processingAlarmNum }}
</div>
</div> </div>
</div> </div>
</div> </template>
</template>
</div> </div>
<div style="width:100%;display: flex;"> <div style="width: 100%; display: flex" v-if="detcetorList>0">
<div class="btn"> <div class="btn">
<div>感知设备</div> <div>感知设备</div>
</div> </div>
<p style="width:85%;height:10px;background-color: #022346;margin-top: 22px;margin-left: -10px;"></p> <p
style="
width: 85%;
height: 10px;
background-color: #022346;
margin-top: 22px;
margin-left: -10px;
"
></p>
<div @click="btnClick"> <div @click="btnClick">
<img @click="flag = !flag" src="../../assets/second/box-down.png" :class="{ 'arrowTransform': !flag, 'arrowTransformReturn': flag}" alt="" style="width:30px;height:30px;margin-top: 12px;cursor: pointer;"> <img
</div> @click="flag = !flag"
src="../../assets/second/box-down.png"
:class="{ arrowTransform: !flag, arrowTransformReturn: flag }"
alt=""
style="width: 30px; height: 30px; margin-top: 12px; cursor: pointer"
/>
</div>
</div> </div>
<UserCenter <UserCenter
:title="centerTitle" :title="centerTitle"
:show="userCenterShow" :show="userCenterShow"
ref="userCenter" ref="userCenter"
...@@ -104,14 +118,11 @@ ...@@ -104,14 +118,11 @@
:pageSize="5" :pageSize="5"
v-show="!isShow" v-show="!isShow"
/> />
</div> </div>
</template> </template>
<script> <script>
import { import { getUser } from "@/api/bigWindow/getDevice";
getUser,
} from "@/api/bigWindow/getDevice";
import { companyType, deviceType } from "@/utils/mapClass/config.js"; import { companyType, deviceType } from "@/utils/mapClass/config.js";
import { listDetectorInfo } from "@/api/detector/detectorInfo"; import { listDetectorInfo } from "@/api/detector/detectorInfo";
import { detectorUserList } from "@/api/detector/detectorUser"; import { detectorUserList } from "@/api/detector/detectorUser";
...@@ -124,7 +135,7 @@ export default { ...@@ -124,7 +135,7 @@ export default {
data() { data() {
return { return {
flag: true, flag: true,
isShow: true , isShow: true,
companyType, companyType,
deviceType, deviceType,
centerTitle: "", centerTitle: "",
...@@ -181,7 +192,7 @@ export default { ...@@ -181,7 +192,7 @@ export default {
// this.vueRoot.centerDataFunc(this.deviceData.pressureFlows); // this.vueRoot.centerDataFunc(this.deviceData.pressureFlows);
this.getDetectorInfoList( this.getDetectorInfoList(
listDetectorInfo, listDetectorInfo,
{ userId: this.deviceData.userId,pageNum: 1, pageSize: 5, }, { userId: this.deviceData.userId, pageNum: 1, pageSize: 5 },
this.deviceData.nickName this.deviceData.nickName
); );
}, },
...@@ -201,19 +212,20 @@ export default { ...@@ -201,19 +212,20 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.arrowTransform { .arrowTransform {
transition: 0s; transition: 0s;
transform-origin: center; transform-origin: center;
transform: rotateZ(180deg); transform: rotateZ(180deg);
} }
.arrowTransformReturn { .arrowTransformReturn {
transition: 0s; transition: 0s;
transform-origin: center; transform-origin: center;
transform: rotateZ(0deg); transform: rotateZ(0deg);
} }
.devicea-wrapper { .devicea-wrapper {
box-shadow: 0px 0px 10px #54e0ef inset; background: rgba(2, 26, 51, 0.9);
background-color: #071738; border: 1px solid #127bd1;
box-shadow: inset 0px 0px 10px 0px #164db2;
padding: 10px; padding: 10px;
position: relative; position: relative;
width: 740px; width: 740px;
...@@ -223,6 +235,21 @@ export default { ...@@ -223,6 +235,21 @@ export default {
font-size: 14px; font-size: 14px;
line-height: 14px; line-height: 14px;
color: #ffffff; color: #ffffff;
padding-left: 5px;
}
.line {
width: 50%;
height: 2px;
margin-top: 10px;
background: linear-gradient(
90deg,
rgba(29, 33, 41, 0) 0%,
#568ef6 38%,
#19d1ed 49%,
rgba(29, 33, 41, 0) 109%
);
// border: 2px solid;
} }
.close { .close {
position: absolute; position: absolute;
...@@ -285,7 +312,7 @@ export default { ...@@ -285,7 +312,7 @@ export default {
.foot { .foot {
font-size: 14px; font-size: 14px;
color: #ffffff; color: #ffffff;
background: url('../../assets/second/box-bg.png'); background: url("../../assets/second/box-bg.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 1px; padding: 1px;
...@@ -308,11 +335,11 @@ export default { ...@@ -308,11 +335,11 @@ export default {
.tbody { .tbody {
border-top: none; border-top: none;
} }
// .thead { // .thead {
// div { // div {
// background-color: rgba(255, 255, 255, 0.1); // background-color: rgba(255, 255, 255, 0.1);
// } // }
// } // }
} }
.btn { .btn {
...@@ -321,7 +348,7 @@ export default { ...@@ -321,7 +348,7 @@ export default {
div { div {
font-size: 14px; font-size: 14px;
color: #ffffff; color: #ffffff;
background: url('../../assets/second/boxbtn-bg.png'); background: url("../../assets/second/boxbtn-bg.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 7px 15px; padding: 7px 15px;
......
zh-baseversion-web/src/components/bigWindow/VideoView.vue
View file @ f471396f
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-01-26 22:44:02 * @Date: 2022-01-26 22:44:02
* @LastEditTime: 2022-01-27 10:12:46 * @LastEditTime: 2024-07-25 17:07:09
* @LastEditors: Please set LastEditors * @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/components/videoView.vue * @FilePath: /test/hello-world/src/views/components/videoView.vue
--> -->
...@@ -11,10 +11,13 @@ ...@@ -11,10 +11,13 @@
<div class="title">{{ deviceData.videoName }}</div> <div class="title">{{ deviceData.videoName }}</div>
<div class="close" @click="close"> <div class="close" @click="close">
<!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> --> <!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> -->
<i class="el-icon-close" style="font-size:20px;color:#5dfefe;"></i> <i class="el-icon-close" style="font-size: 20px; color: #49d8ff"></i>
</div> </div>
<div class="line"></div>
<div class="box videoBox"> <div class="box videoBox">
<div id="player" ></div> <div id="player"></div>
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<!-- <el-button type="primary" @click="dialogVisible = false" <!-- <el-button type="primary" @click="dialogVisible = false"
...@@ -26,39 +29,38 @@ ...@@ -26,39 +29,38 @@
</template> </template>
<script> <script>
import WasmPlayer from "@easydarwin/easywasmplayer"; //导入WasmPlayer.js import WasmPlayer from "@easydarwin/easywasmplayer"; //导入WasmPlayer.js
import { getPreviewURLs } from "@/api/video/artemis" import { getPreviewURLs } from "@/api/video/artemis";
//const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备 //const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
const IS_MOVE_DEVICE = true; const IS_MOVE_DEVICE = true;
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse const MSE_IS_SUPPORT = !!window.MediaSource; // 是否支持mse
export default { export default {
data() { data() {
return { return {
// dialogVisible: true, // dialogVisible: true,
// AfterClose: true, // AfterClose: true,
queryParam: { queryParam: {
cameraIndexCode: "" cameraIndexCode: "",
}, },
player: null, player: null,
videoOpenNum: -1, videoOpenNum: -1,
queryParam: { queryParam: {
cameraIndexCode: "" cameraIndexCode: "",
}, },
}; };
}, },
watch: {}, watch: {},
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
if(!window.JSPlugin){ if (!window.JSPlugin) {
this.loadScript("/h5player/h5player.min.js").then(() =>{ this.loadScript("/h5player/h5player.min.js").then(() => {
this.createPlayer(); this.createPlayer();
this.init() this.init();
}) });
} else {
}else{
this.createPlayer(); this.createPlayer();
this.init() this.init();
} }
}); });
// setTimeout(() => { // setTimeout(() => {
// this.player = new WasmPlayer(null, "video", this.callBack, { // this.player = new WasmPlayer(null, "video", this.callBack, {
// Height: true, // Height: true,
...@@ -77,48 +79,53 @@ export default { ...@@ -77,48 +79,53 @@ export default {
// }, // },
init() { init() {
// 设置播放容器的宽高并监听窗口大小变化 // 设置播放容器的宽高并监听窗口大小变化
window.addEventListener('resize', () => { window.addEventListener("resize", () => {
this.player.JS_Resize() this.player.JS_Resize();
}) });
}, },
createPlayer() { createPlayer() {
this.player = new window.JSPlugin({ this.player = new window.JSPlugin({
szId: 'player', szId: "player",
szBasePath: "/h5player", szBasePath: "/h5player",
iMaxSplit: 4, iMaxSplit: 4,
iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2, iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
openDebug: true, openDebug: true,
oStyle: { oStyle: {
borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00', borderSelect: IS_MOVE_DEVICE ? "#000" : "#FFCC00",
} },
}) });
this.open(); this.open();
}, },
open(){ open() {
this.queryParam.cameraIndexCode = this.deviceData.resourceId; this.queryParam.cameraIndexCode = this.deviceData.resourceId;
getPreviewURLs(this.queryParam).then(response =>{ getPreviewURLs(this.queryParam).then((response) => {
if(response.data.code == '0'){ if (response.data.code == "0") {
this.videoOpenNum++; this.videoOpenNum++;
let url = response.data.data.url; let url = response.data.data.url;
//let index = this.player.currentWindowIndex; //let index = this.player.currentWindowIndex;
this.player.JS_Play(url,{playURL: url, mode:"0" }, this.videoOpenNum%4).then(() => { this.player
console.log('realplay success') .JS_Play(url, { playURL: url, mode: "0" }, this.videoOpenNum % 4)
.then(
() => {
console.log("realplay success");
}, },
e => { console.error(e) } (e) => {
) console.error(e);
} }
);
}
}); });
}, },
loadScript(src){ loadScript(src) {
return new Promise(reslove =>{ return new Promise((reslove) => {
let scpritE1 = document.createElement("script"); let scpritE1 = document.createElement("script");
scpritE1.type = "text/javascript"; scpritE1.type = "text/javascript";
scpritE1.src = src; scpritE1.src = src;
scpritE1.onload = () => { scpritE1.onload = () => {
reslove(); reslove();
} };
document.body.appendChild(scpritE1); document.body.appendChild(scpritE1);
}) });
}, },
callBack() {}, callBack() {},
close() { close() {
...@@ -130,12 +137,15 @@ export default { ...@@ -130,12 +137,15 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.sub-wnd{ .sub-wnd {
text-align: center !important; text-align: center !important;
} }
.box-wrapper { .box-wrapper {
box-shadow: 0px 0px 10px #54e0ef inset; // box-shadow: 0px 0px 10px #54e0ef inset;
background-color: #071738; // background-color: #071738;
background: rgba(2, 26, 51, 0.9);
border: 1px solid #127bd1;
box-shadow: inset 0px 0px 10px 0px #164db2;
padding: 10px; padding: 10px;
position: relative; position: relative;
// width: 670px; // width: 670px;
...@@ -145,6 +155,19 @@ export default { ...@@ -145,6 +155,19 @@ export default {
font-size: 14px; font-size: 14px;
line-height: 14px; line-height: 14px;
color: #ffffff; color: #ffffff;
}
.line {
width: 50%;
height: 1px;
margin-top: 10px;
background: linear-gradient(
90deg,
rgba(29, 33, 41, 0) 0%,
#568ef6 38%,
#19d1ed 49%,
rgba(29, 33, 41, 0) 109%
);
// border: 2px solid;
} }
.close { .close {
position: absolute; position: absolute;
...@@ -163,4 +186,3 @@ export default { ...@@ -163,4 +186,3 @@ export default {
} }
} }
</style> </style>
zh-baseversion-web/src/components/bigWindow/yhqUser.vue
View file @ f471396f
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-01-26 20:07:52 * @Date: 2022-01-26 20:07:52
* @LastEditTime: 2022-03-17 09:05:30 * @LastEditTime: 2024-07-25 17:11:56
* @LastEditors: Please set LastEditors * @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/components/deviceA.vue * @FilePath: /test/hello-world/src/views/components/deviceA.vue
...@@ -14,30 +14,31 @@ ...@@ -14,30 +14,31 @@
</div> </div>
<div class="close" @click="close"> <div class="close" @click="close">
<!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> --> <!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> -->
<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> </div>
<p style="background-image: linear-gradient(to right, #5dfefe, #071738); width:100%;height:1px;"></p> <div class="line"></div>
<div> <div>
<!--<div class="top flex top-top">--> <!--<div class="top flex top-top">-->
<!--<div class="group" style="width:20%">--> <!--<div class="group" style="width:20%">-->
<!--<div class="left">联系人：</div>--> <!--<div class="left">联系人：</div>-->
<!--<div class="right zzz">{{ deviceData.linkman }}</div>--> <!--<div class="right zzz">{{ deviceData.linkman }}</div>-->
<!--</div>--> <!--</div>-->
<!--<div class="group" style="width:30%">--> <!--<div class="group" style="width:30%">-->
<!--<div class="left">联系电话:</div>--> <!--<div class="left">联系电话:</div>-->
<!--<div v-unValue class="right zzz">--> <!--<div v-unValue class="right zzz">-->
<!--{{ deviceData.phone }}--> <!--{{ deviceData.phone }}-->
<!--</div>--> <!--</div>-->
<!--</div>--> <!--</div>-->
<!--<div class="group" style="width:30%">--> <!--<div class="group" style="width:30%">-->
<!--<div class="left">联系地址：</div>--> <!--<div class="left">联系地址：</div>-->
<!--<div :title="deviceData.address" class="right last zzz">--> <!--<div :title="deviceData.address" class="right last zzz">-->
<!--{{ deviceData.address || "-" }}--> <!--{{ deviceData.address || "-" }}-->
<!--</div>--> <!--</div>-->
<!--</div>-->
<!--</div>--> <!--</div>-->
<!--</div>-->
<!-- <div class="top flex top-bottom"> <!-- <div class="top flex top-bottom">
<div class="group"> <div class="group">
<div class="left">联系地址：</div> <div class="left">联系地址：</div>
<div :title="deviceData.address" class="right last zzz"> <div :title="deviceData.address" class="right last zzz">
...@@ -46,55 +47,68 @@ ...@@ -46,55 +47,68 @@
</div> </div>
</div> --> </div> -->
<template v-if="deviceData.detectorCountList"> <template v-if="deviceData.detectorCountList">
<div class="foot"> <div class="foot">
<div class="thead flex"> <div class="thead flex">
<div class="first">设备类型</div> <div class="first">设备类型</div>
<div>设备数量</div> <div>设备数量</div>
<div>在线设备</div> <div>在线设备</div>
<div>离线设备</div> <div>离线设备</div>
<!-- <div>历史报警</div> <!-- <div>历史报警</div>
<div>已处理报警</div> --> <div>已处理报警</div> -->
<div class="last">报警中</div> <div class="last">报警中</div>
</div>
<div
v-for="data in deviceData.detectorCountList"
:key="data.userId"
class="tbody flex"
>
<div v-unValue class="first zzz">{{ data.detectorType }}</div>
<div class="">{{ data.detectorCount }}</div>
<div v-unValue class="">
{{ data.onLineNum }}
</div> </div>
<div v-unValue class=""> <div
{{ data.offLineNum }} v-for="data in deviceData.detectorCountList"
</div> :key="data.userId"
<!-- <div v-unValue class=""> class="tbody flex"
>
<div v-unValue class="first zzz">{{ data.detectorType }}</div>
<div class="">{{ data.detectorCount }}</div>
<div v-unValue class="">
{{ data.onLineNum }}
</div>
<div v-unValue class="">
{{ data.offLineNum }}
</div>
<!-- <div v-unValue class="">
{{ data.historyAlarmNum }} {{ data.historyAlarmNum }}
</div> </div>
<div v-unValue class=""> <div v-unValue class="">
{{ data.cancelAlarmNum }} {{ data.cancelAlarmNum }}
</div> --> </div> -->
<div v-unValue class="last zzz"> <div v-unValue class="last zzz">
{{ data.processingAlarmNum }} {{ data.processingAlarmNum }}
</div>
</div> </div>
</div> </div>
</div> </template>
</template>
</div> </div>
<div style="width: 100%; display: flex">
<div style="width:100%;display: flex;">
<div class="btn"> <div class="btn">
<div>感知设备</div> <div>感知设备</div>
</div> </div>
<p style="width:85%;height:10px;background-color: #022346;margin-top: 22px;margin-left: -10px;"></p> <p
style="
width: 85%;
height: 10px;
background-color: #022346;
margin-top: 22px;
margin-left: -10px;
"
></p>
<div @click="btnClick"> <div @click="btnClick">
<img @click="flag = !flag" src="../../assets/second/box-down.png" :class="{ 'arrowTransform': !flag, 'arrowTransformReturn': flag}" alt="" style="width:30px;height:30px;margin-top: 12px;cursor: pointer;"> <img
</div> @click="flag = !flag"
src="../../assets/second/box-down.png"
:class="{ arrowTransform: !flag, arrowTransformReturn: flag }"
alt=""
style="width: 30px; height: 30px; margin-top: 12px; cursor: pointer"
/>
</div>
</div> </div>
<yhqUserCenter <yhqUserCenter
:title="centerTitle" :title="centerTitle"
:show="yhquserCenterShow" :show="yhquserCenterShow"
ref="yhquserCenter" ref="yhquserCenter"
...@@ -104,7 +118,6 @@ ...@@ -104,7 +118,6 @@
:pageSize="5" :pageSize="5"
v-show="!isShow" v-show="!isShow"
/> />
</div> </div>
</template> </template>
...@@ -113,7 +126,7 @@ import { ...@@ -113,7 +126,7 @@ import {
getYhq, getYhq,
getyhqUser, getyhqUser,
deviceUser, deviceUser,
deviceUserList deviceUserList,
} from "@/api/bigWindow/getDevice"; } from "@/api/bigWindow/getDevice";
import { companyType, deviceType } from "@/utils/mapClass/config.js"; import { companyType, deviceType } from "@/utils/mapClass/config.js";
import { yhqlistDetectorInfo } from "@/api/detector/detectorInfo"; import { yhqlistDetectorInfo } from "@/api/detector/detectorInfo";
...@@ -127,7 +140,7 @@ export default { ...@@ -127,7 +140,7 @@ export default {
data() { data() {
return { return {
flag: true, flag: true,
isShow: true , isShow: true,
companyType, companyType,
deviceType, deviceType,
centerTitle: "", centerTitle: "",
...@@ -155,7 +168,7 @@ export default { ...@@ -155,7 +168,7 @@ export default {
} }
//this.myHttp(); //this.myHttp();
// console.log(this.deviceData); // console.log(this.deviceData);
this.btnClick() this.btnClick();
}, },
methods: { methods: {
//用户的设备center //用户的设备center
...@@ -185,7 +198,7 @@ export default { ...@@ -185,7 +198,7 @@ export default {
// this.vueRoot.centerDataFunc(this.deviceData.pressureFlows); // this.vueRoot.centerDataFunc(this.deviceData.pressureFlows);
this.getDetectorInfoList( this.getDetectorInfoList(
deviceUserList, deviceUserList,
{ township: this.deviceData.township,pageNum: 1, pageSize: 5, }, { township: this.deviceData.township, pageNum: 1, pageSize: 5 },
this.deviceData.nickName this.deviceData.nickName
); );
}, },
...@@ -205,19 +218,20 @@ export default { ...@@ -205,19 +218,20 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.arrowTransform { .arrowTransform {
transition: 0s; transition: 0s;
transform-origin: center; transform-origin: center;
transform: rotateZ(180deg); transform: rotateZ(180deg);
} }
.arrowTransformReturn { .arrowTransformReturn {
transition: 0s; transition: 0s;
transform-origin: center; transform-origin: center;
transform: rotateZ(0deg); transform: rotateZ(0deg);
} }
.devicea-wrapper { .devicea-wrapper {
box-shadow: 0px 0px 10px #54e0ef inset; background: rgba(2, 26, 51, 0.9);
background-color: #071738; border: 1px solid #127bd1;
box-shadow: inset 0px 0px 10px 0px #164db2;
padding: 10px; padding: 10px;
position: relative; position: relative;
width: 740px; width: 740px;
...@@ -227,6 +241,20 @@ export default { ...@@ -227,6 +241,20 @@ export default {
font-size: 14px; font-size: 14px;
line-height: 14px; line-height: 14px;
color: #ffffff; color: #ffffff;
padding-left:5px;
}
.line {
width: 50%;
height: 2px;
margin-top: 10px;
background: linear-gradient(
90deg,
rgba(29, 33, 41, 0) 0%,
#568ef6 38%,
#19d1ed 49%,
rgba(29, 33, 41, 0) 109%
);
// border: 2px solid;
} }
.close { .close {
position: absolute; position: absolute;
...@@ -289,7 +317,7 @@ export default { ...@@ -289,7 +317,7 @@ export default {
.foot { .foot {
font-size: 14px; font-size: 14px;
color: #ffffff; color: #ffffff;
background: url('../../assets/second/box-bg.png'); background: url("../../assets/second/box-bg.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 1px; padding: 1px;
...@@ -312,11 +340,11 @@ export default { ...@@ -312,11 +340,11 @@ export default {
.tbody { .tbody {
border-top: none; border-top: none;
} }
// .thead { // .thead {
// div { // div {
// background-color: rgba(255, 255, 255, 0.1); // background-color: rgba(255, 255, 255, 0.1);
// } // }
// } // }
} }
.btn { .btn {
...@@ -325,7 +353,7 @@ export default { ...@@ -325,7 +353,7 @@ export default {
div { div {
font-size: 14px; font-size: 14px;
color: #ffffff; color: #ffffff;
background: url('../../assets/second/boxbtn-bg.png'); background: url("../../assets/second/boxbtn-bg.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 7px 15px; padding: 7px 15px;
......
zh-baseversion-web/src/utils/mapClass/map.js
View file @ f471396f
/* /*
* @Author: your name * @Author: your name
* @Date: 2022-01-11 13:45:12 * @Date: 2022-01-11 13:45:12
* @LastEditTime: 2024-07-19 14:59:20 * @LastEditTime: 2024-07-25 16:20:02
* @LastEditors: 纪泽龙 jizelong@qq.com * @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/utils/mapClass.js * @FilePath: /test/hello-world/src/utils/mapClass.js
...@@ -589,7 +589,7 @@ export class EditorMap { ...@@ -589,7 +589,7 @@ export class EditorMap {
} }
filterSelectPipe(id, mediumComponent, lng, lat) { filterSelectPipe(id, mediumComponent, lng, lat) {
this.pipeArr[6].forEach((pipe) => { this.pipeArr[1].forEach((pipe) => {
const deviceExtData = pipe.getExtData(); const deviceExtData = pipe.getExtData();
if (deviceExtData.pipeId === id) { if (deviceExtData.pipeId === id) {
//设置颜色 //设置颜色
...@@ -1349,7 +1349,7 @@ export class EditorMap { ...@@ -1349,7 +1349,7 @@ export class EditorMap {
const color = pipeColor[pipePressure]; const color = pipeColor[pipePressure];
this.pipeArr[6].forEach((pipe) => { this.pipeArr[1].forEach((pipe) => {
const deviceExtData = pipe.getExtData(); const deviceExtData = pipe.getExtData();
if (deviceExtData.pipeId === id) { if (deviceExtData.pipeId === id) {
//设置颜色 //设置颜色
...@@ -1364,10 +1364,13 @@ export class EditorMap { ...@@ -1364,10 +1364,13 @@ export class EditorMap {
} }
// 设备以及公司过滤 // 设备以及公司过滤
allfilter(companyArr, typeArr) { allfilter(companyArr, typeArr) {
console.log(typeArr,this.pipeArr)
for (let pipeItem in this.pipeArr) { for (let pipeItem in this.pipeArr) {
this.pipeArr[pipeItem].forEach((pipe) => { this.pipeArr[pipeItem].forEach((pipe) => {
const data = pipe.getExtData(); const data = pipe.getExtData();
if (companyArr.indexOf(data.companyType + "") >= 0) { console.log(typeArr.indexOf(1))
if (companyArr.indexOf(data.companyType + "") >= 0 && typeArr.indexOf(1)>=0 ) {
pipe.show(); pipe.show();
} else { } else {
pipe.hide(); pipe.hide();
......
zh-baseversion-web/src/views/bigWindow/components/Top.vue
View file @ f471396f
...@@ -66,7 +66,7 @@ export default { ...@@ -66,7 +66,7 @@ export default {
name: "", name: "",
data() { data() {
return { return {
selarr1: [], selarr1: [1],
searchShow: false, searchShow: false,
searchItemShow: false, searchItemShow: false,
searchVal: "", searchVal: "",
...@@ -83,12 +83,6 @@ export default { ...@@ -83,12 +83,6 @@ export default {
9: "管道 :", 9: "管道 :",
}, },
arr: [ arr: [
{
val: 2,
ischeck: false,
imgurl: require("@/assets/firstimage/tiaoyaxiang.png"),
name: "调压箱",
},
{ {
val: 3, val: 3,
ischeck: false, ischeck: false,
...@@ -102,16 +96,16 @@ export default { ...@@ -102,16 +96,16 @@ export default {
name: "场 站", name: "场 站",
}, },
{ {
val: 6, val: 2,
ischeck: false, ischeck: false,
imgurl: require("@/assets/firstimage/user.png"), imgurl: require("@/assets/firstimage/tiaoyaxiang.png"),
name: "居民用户", name: "调压箱",
}, },
{ {
val: 61, val: 1,
ischeck: false, ischeck: false,
imgurl: require("@/assets/firstimage/syUser.png"), imgurl: require("@/assets/firstimage/guandao.png"),
name: "商业用户", name: "管道",
}, },
{ {
val: 5, val: 5,
...@@ -119,11 +113,23 @@ export default { ...@@ -119,11 +113,23 @@ export default {
imgurl: require("@/assets/firstimage/jiankong.png"), imgurl: require("@/assets/firstimage/jiankong.png"),
name: "监 控", name: "监 控",
}, },
{
val: 6,
ischeck: false,
imgurl: require("@/assets/firstimage/user.png"),
name: "居民用户",
},
{
val: 61,
ischeck: false,
imgurl: require("@/assets/firstimage/syUser.png"),
name: "商业用户",
},
{ {
val: 18, val: 18,
ischeck: false, ischeck: false,
imgurl: require("@/assets/firstimage/yhq.png"), imgurl: require("@/assets/firstimage/yhq.png"),
name: "餐饮单位液化气用户", name: "餐饮用户",
}, },
], ],
}; };
...@@ -150,7 +156,7 @@ export default { ...@@ -150,7 +156,7 @@ export default {
searchDeviceDetail({ type: item.type, id: item.id }).then((res) => { searchDeviceDetail({ type: item.type, id: item.id }).then((res) => {
if (res.code == 200) { if (res.code == 200) {
let dataArr = null; let dataArr = null;
console.log(res) console.log(res);
// 1.阀井 // 1.阀井
// 2.调压箱 // 2.调压箱
// 3.场站 // 3.场站
...@@ -192,13 +198,13 @@ export default { ...@@ -192,13 +198,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.typelist-div { .typelist-div {
transition: all 0.2s linear; transition: all 0.2s linear;
width: 800px; width: 840px;
// height: 96px; // height: 96px;
// height: 56px; // height: 56px;
z-index: 9999; z-index: 9999;
position: fixed; position: fixed;
top: 90px; top: 90px;
margin-left: calc((100% - 755px) / 2); margin-left: calc((100% - 840px) / 2);
background: rgba(2, 41, 81, 0.25); background: rgba(2, 41, 81, 0.25);
border: 1px solid #275275; border: 1px solid #275275;
box-sizing: border-box; box-sizing: border-box;
...@@ -254,12 +260,12 @@ export default { ...@@ -254,12 +260,12 @@ export default {
height: 20px; height: 20px;
} }
.device-btn-wrapper { .device-btn-wrapper {
width: 755px; width: 780px;
margin-right: 5px; margin-right: 5px;
flex-wrap: wrap; flex-wrap: wrap;
} }
.search { .search {
width: 755px; width: 785px;
position: absolute; position: absolute;
top: 40px; top: 40px;
.input-wrapper { .input-wrapper {
......
zh-baseversion-web/src/views/bigWindow/index.vue
View file @ f471396f
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2022-01-11 13:44:17 * @Date: 2022-01-11 13:44:17
* @LastEditTime: 2024-07-19 16:18:43 * @LastEditTime: 2024-07-25 17:36:25
* @LastEditors: 纪泽龙 jizelong@qq.com * @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/Home.vue * @FilePath: /test/hello-world/src/views/Home.vue
...@@ -502,7 +502,7 @@ export default { ...@@ -502,7 +502,7 @@ export default {
console.log("管道", res.data); console.log("管道", res.data);
if (res.data && !res.data[0].iconType) { if (res.data && !res.data[0].iconType) {
res.data.forEach((item) => { res.data.forEach((item) => {
item.iconType = 6; item.iconType = 1;
}); });
} }
// 根据数据格式不同，赋值不同，如果是个数组，就用res，如果不是就用res.data // 根据数据格式不同，赋值不同，如果是个数组，就用res，如果不是就用res.data
...@@ -765,14 +765,21 @@ export default { ...@@ -765,14 +765,21 @@ export default {
top: 50px; top: 50px;
right: 20px; right: 20px;
font-size: 14px; font-size: 14px;
color: #3cc4ff; color: #ffffff;
cursor: pointer; cursor: pointer;
padding: 3px 10px; // background: #12268e33;
border: 1px solid rgb(57, 68, 124); background: url("~@/assets/firstimage/btm-item.png") no-repeat bottom center;
background: #12268e33; width: 128px;
/* &:hover { height: 28px;
color: #00ffff; line-height: 28px;
} */ text-align: center;
transition: all 0.2s linear;
&:hover {
background: url("~@/assets/firstimage/btm-item-active.png") no-repeat bottom
center;
opacity: 0.7;
}
} }
#map { #map {
position: absolute; position: absolute;
......
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