Skip to content

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

修改地图上的设备弹框的样式，头部管控设备增加管道，

parent 9a2b75e9
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1380 additions and 685 deletions
zh-baseversion-web/src/components/bigWindow/CzOld.vue 0 → 100644
View file @ 74e71829
This diff is collapsed.
zh-baseversion-web/src/components/bigWindow/Line.vue
View file @ 74e71829
<!--
* @Author: your name
* @Date: 2022-01-27 14:25:45
* @LastEditTime: 2022-02-28 11:35:31
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-07-25 17:13:31
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /hello-world/src/views/components/User.vue
-->
......@@ -11,15 +11,16 @@
<div class="title">{{ companyType[deviceData.companyType] }}</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>
<i class="el-icon-close" style="font-size: 20px; color: #49d8ff"></i>
</div>
<div class="line"></div>
<div class="group flex first">
<div class="first once left">管道名称：</div>
<div class="right pipeAddr right zzz">{{ deviceData.pipeName }}</div>
</div>
<div class="group flex ">
<div class="group flex">
<div class="left first">管道长度：</div>
<div class="right zzz">{{ deviceData.pipeLength }}米</div>
<div class="left">管径：</div>
......@@ -48,7 +49,9 @@
<div class="group flex">
<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 :title="deviceData.powerCompany" class="right last zzz">
{{ deviceData.powerCompany }}
......@@ -58,7 +61,9 @@
<div class="first left">建设年代：</div>
<div class="right">{{ deviceData.buildyear }}</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 class="group flex">
......@@ -83,22 +88,21 @@ export default {
pipePressure,
};
},
computed:{
prodTest(){
return this.vueRoot.$store.state.user.systemSetting.prod_test
computed: {
prodTest() {
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"){
this.companyType={};
this.company.forEach(item=>{
if (this.prodTest != "test") {
this.companyType = {};
this.company.forEach((item) => {
this.companyType[item.conpanyId] = item.companyName;
})
});
}
},
methods: {
......@@ -111,17 +115,35 @@ export default {
<style lang="scss" scoped>
.user-wrapper {
box-shadow: 0px 0px 10px #54e0ef inset;
background-color: #071738;
// box-shadow: 0px 0px 10px #54e0ef inset;
// background-color: #071738;
background: rgba(2, 26, 51, 0.9);
border: 1px solid #127bd1;
box-shadow: inset 0px 0px 10px 0px #164db2;
padding: 10px;
position: relative;
width: 500px;
border-radius: 7px;
.title {
padding-left: 5px;
font-size: 14px;
line-height: 14px;
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 {
position: absolute;
right: 10px;
......
zh-baseversion-web/src/components/bigWindow/MediumPressureLine.vue
View file @ 74e71829
<!--
* @Author: your name
* @Date: 2022-01-27 14:25:45
* @LastEditTime: 2022-02-28 11:35:31
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-07-25 17:04:48
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /hello-world/src/views/components/User.vue
-->
......@@ -11,8 +11,10 @@
<div class="title">{{ companyType[deviceData.companyType] }}</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>
<i class="el-icon-close" style="font-size: 20px; color: #49d8ff"></i>
</div>
<div class="line"></div>
<div class="group flex first">
<div class="first once left">管道名称：</div>
......@@ -36,7 +38,9 @@
{{ deviceData.pipePressure }}
</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 class="group flex">
......@@ -48,7 +52,9 @@
<div class="group flex">
<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 :title="deviceData.powerCompany" class="right last zzz">
{{ deviceData.powerCompany }}
......@@ -58,7 +64,9 @@
<div class="first left">建设年代：</div>
<div class="right">{{ deviceData.buildyear }}</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 class="group flex">
......@@ -71,7 +79,7 @@
{{ deviceData.pipeAddr }}
</div>
</div>
<div class="group flex" v-show="isVisibleMethod">
<div class="left">详细地址：</div>
<div class="right pipeAddr last zzz">{{ deviceData.detaildAddress }}</div>
......@@ -84,7 +92,6 @@
<div class="right last zzz">{{ deviceData.indRegAuthPer }}</div>
</div>
<div class="group flex" v-show="isVisibleMethod">
<div class="first left">主管负责电话：</div>
<div class="right zzz">{{ deviceData.indRegAuthPerCon }}</div>
......@@ -92,7 +99,6 @@
<div class="right last zzz">{{ deviceData.keyAreasGasUsage }}</div>
</div>
<div class="group flex" v-show="isVisibleMethod">
<div class="first left">燃气公司：</div>
<div class="right zzz">{{ deviceData.affGasCom }}</div>
......@@ -123,43 +129,45 @@ export default {
return {
companyType,
pipePressure,
isClose: false
isClose: false,
};
},
computed:{
prodTest(){
return this.vueRoot.$store.state.user.systemSetting.prod_test
computed: {
prodTest() {
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"){
this.companyType={};
this.company.forEach(item=>{
if (this.prodTest != "test") {
this.companyType = {};
this.company.forEach((item) => {
this.companyType[item.conpanyId] = item.companyName;
})
});
}
},
methods: {
close() {
// 关闭前先把颜色改回来
// 关闭前先把颜色改回来
this.mapClass.infowindowClose();
},
isVisibleMethod(){
return deviceData.pipePressure == "中压"
}
isVisibleMethod() {
return deviceData.pipePressure == "中压";
},
},
};
</script>
<style lang="scss" scoped>
.user-wrapper {
box-shadow: 0px 0px 10px #54e0ef inset;
background-color: #071738;
// box-shadow: 0px 0px 10px #54e0ef inset;
// background-color: #071738;
background: rgba(2, 26, 51, 0.9);
border: 1px solid #127bd1;
box-shadow: inset 0px 0px 10px 0px #164db2;
padding: 10px;
position: relative;
width: 500px;
......@@ -168,6 +176,20 @@ export default {
font-size: 14px;
line-height: 14px;
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 {
position: absolute;
......
zh-baseversion-web/src/components/bigWindow/PipeColor.vue
View file @ 74e71829
<!--
* @Author: your name
* @Date: 2022-01-26 10:52:10
* @LastEditTime: 2022-02-17 10:11:35
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-07-25 17:33:10
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/components/PipeColor.vue
-->
<template>
<div>
<!-- <div class="pipePressure"> -->
<!--
<!--
<div style="float: left;margin-right: 5px;">
<div class="hasColorBox">
<img src="../../assets/image/bigtyx.svg" alt="">
......@@ -32,7 +32,7 @@
监控
</div>
</div> -->
<!-- <div>
<!-- <div>
<div class="hasColorBox" :style="{ color: pipeColor[`1`] }">
<div :style="{ backgroundColor: pipeColor[`1`] }"></div>
低压管线
......@@ -63,23 +63,23 @@
import { pipeColor } from "@/utils/mapClass/config.js";
export default {
data() {
downIcon: true;
return {
pipeColor,
mapStyle:true,
};
},
methods: {
// 更改卫星图
mapChange(num) {
if (num == 1) {
this.mapStyle = false;
} else {
this.mapStyle = true;
}
this.$parent.map.changeMap(this.mapStyle);
},
downIcon: true;
return {
pipeColor,
mapStyle: true,
};
},
methods: {
// 更改卫星图
mapChange(num) {
if (num == 1) {
this.mapStyle = false;
} else {
this.mapStyle = true;
}
this.$parent.map.changeMap(this.mapStyle);
},
},
};
</script>
......@@ -108,32 +108,47 @@ export default {
}
}
}
.hasColorBox>img{
.hasColorBox > img {
width: 14px;
}
.mapChange {
left: 10px;
top: 55px;
top: 50px;
color: #fff;
padding: 5px;
position: absolute;
display: flex;
z-index: 9999;
div {
border: 1px solid #339CC9;
padding: 3px 6px;
width: 128px;
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;
color: #339CC9;
color: #ffffff;
cursor: pointer;
font-size: 14px;
&.active,
&:hover
{
background-color: #053B6A ;
color: #2CD5DB;
transition: all 0.2s linear;
&.active {
background: url("~@/assets/firstimage/btm-item-active.png") no-repeat
bottom center;
&: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>
zh-baseversion-web/src/components/bigWindow/User.vue
View file @ 74e71829
<!--
* @Author: your name
* @Date: 2022-01-26 20:07:52
* @LastEditTime: 2022-03-17 09:05:30
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-07-25 17:13:33
* @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
......@@ -14,30 +14,31 @@
</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>
<i class="el-icon-close" style="font-size: 20px; color: #49d8ff"></i>
</div>
<p style="background-image: linear-gradient(to right, #5dfefe, #071738); width:100%;height:1px;"></p>
<div class="line"></div>
<div>
<div class="top flex top-top">
<div class="group" style="width:20%">
<div class="left">联系人：</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 class="top flex top-top">
<div class="group" style="width: 20%">
<div class="left">联系人：</div>
<div class="right zzz">{{ deviceData.linkman }}</div>
</div>
</div>
<div class="group" style="width:30%">
<div class="left">联系地址：</div>
<div :title="deviceData.address" class="right last zzz">
{{ deviceData.address || "-" }}
<div class="group" style="width: 30%">
<div class="left">联系电话:</div>
<div v-unValue class="right zzz">
{{ deviceData.phone }}
</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 class="top flex top-bottom">
<!-- <div class="top flex top-bottom">
<div class="group">
<div class="left">联系地址：</div>
<div :title="deviceData.address" class="right last zzz">
......@@ -46,55 +47,68 @@
</div>
</div> -->
<template v-if="deviceData.detectorCountList">
<div class="foot">
<div class="thead flex">
<div class="first">设备类型</div>
<div>设备数量</div>
<div>在线设备</div>
<div>离线设备</div>
<!-- <div>历史报警</div>
<template v-if="deviceData.detectorCountList">
<div class="foot">
<div class="thead flex">
<div class="first">设备类型</div>
<div>设备数量</div>
<div>在线设备</div>
<div>离线设备</div>
<!-- <div>历史报警</div>
<div>已处理报警</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 class="last">报警中</div>
</div>
<div v-unValue class="">
{{ data.offLineNum }}
</div>
<!-- <div v-unValue class="">
<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 v-unValue class="">
{{ data.offLineNum }}
</div>
<!-- <div v-unValue class="">
{{ data.historyAlarmNum }}
</div>
<div v-unValue class="">
{{ data.cancelAlarmNum }}
</div> -->
<div v-unValue class="last zzz">
{{ data.processingAlarmNum }}
<div v-unValue class="last zzz">
{{ data.processingAlarmNum }}
</div>
</div>
</div>
</div>
</template>
</template>
</div>
<div style="width:100%;display: flex;">
<div style="width: 100%; display: flex" v-if="detcetorList>0">
<div class="btn">
<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">
<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>
<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>
<UserCenter
<UserCenter
:title="centerTitle"
:show="userCenterShow"
ref="userCenter"
......@@ -104,14 +118,11 @@
:pageSize="5"
v-show="!isShow"
/>
</div>
</template>
<script>
import {
getUser,
} from "@/api/bigWindow/getDevice";
import { getUser } from "@/api/bigWindow/getDevice";
import { companyType, deviceType } from "@/utils/mapClass/config.js";
import { listDetectorInfo } from "@/api/detector/detectorInfo";
import { detectorUserList } from "@/api/detector/detectorUser";
......@@ -124,7 +135,7 @@ export default {
data() {
return {
flag: true,
isShow: true ,
isShow: true,
companyType,
deviceType,
centerTitle: "",
......@@ -181,7 +192,7 @@ export default {
// this.vueRoot.centerDataFunc(this.deviceData.pressureFlows);
this.getDetectorInfoList(
listDetectorInfo,
{ userId: this.deviceData.userId,pageNum: 1, pageSize: 5, },
{ userId: this.deviceData.userId, pageNum: 1, pageSize: 5 },
this.deviceData.nickName
);
},
......@@ -201,19 +212,20 @@ export default {
<style lang="scss" scoped>
.arrowTransform {
transition: 0s;
transform-origin: center;
transform: rotateZ(180deg);
}
transition: 0s;
transform-origin: center;
transform: rotateZ(180deg);
}
.arrowTransformReturn {
transition: 0s;
transform-origin: center;
transform: rotateZ(0deg);
}
.arrowTransformReturn {
transition: 0s;
transform-origin: center;
transform: rotateZ(0deg);
}
.devicea-wrapper {
box-shadow: 0px 0px 10px #54e0ef inset;
background-color: #071738;
background: rgba(2, 26, 51, 0.9);
border: 1px solid #127bd1;
box-shadow: inset 0px 0px 10px 0px #164db2;
padding: 10px;
position: relative;
width: 740px;
......@@ -223,6 +235,21 @@ export default {
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;
......@@ -285,7 +312,7 @@ export default {
.foot {
font-size: 14px;
color: #ffffff;
background: url('../../assets/second/box-bg.png');
background: url("../../assets/second/box-bg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 1px;
......@@ -308,11 +335,11 @@ export default {
.tbody {
border-top: none;
}
// .thead {
// div {
// background-color: rgba(255, 255, 255, 0.1);
// }
// }
// .thead {
// div {
// background-color: rgba(255, 255, 255, 0.1);
// }
// }
}
.btn {
......@@ -321,7 +348,7 @@ export default {
div {
font-size: 14px;
color: #ffffff;
background: url('../../assets/second/boxbtn-bg.png');
background: url("../../assets/second/boxbtn-bg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 7px 15px;
......
zh-baseversion-web/src/components/bigWindow/VideoView.vue
View file @ 74e71829
<!--
* @Author: your name
* @Date: 2022-01-26 22:44:02
* @LastEditTime: 2022-01-27 10:12:46
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-07-25 17:07:09
* @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/videoView.vue
-->
......@@ -11,10 +11,13 @@
<div class="title">{{ deviceData.videoName }}</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>
<i class="el-icon-close" style="font-size: 20px; color: #49d8ff"></i>
</div>
<div class="line"></div>
<div class="box videoBox">
<div id="player" ></div>
<div id="player"></div>
</div>
<span slot="footer" class="dialog-footer">
<!-- <el-button type="primary" @click="dialogVisible = false"
......@@ -26,39 +29,38 @@
</template>
<script>
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 = true;
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
const MSE_IS_SUPPORT = !!window.MediaSource; // 是否支持mse
export default {
data() {
return {
// dialogVisible: true,
// AfterClose: true,
queryParam: {
cameraIndexCode: ""
cameraIndexCode: "",
},
player: null,
videoOpenNum: -1,
queryParam: {
cameraIndexCode: ""
cameraIndexCode: "",
},
};
},
watch: {},
mounted() {
this.$nextTick(() => {
if(!window.JSPlugin){
this.loadScript("/h5player/h5player.min.js").then(() =>{
if (!window.JSPlugin) {
this.loadScript("/h5player/h5player.min.js").then(() => {
this.createPlayer();
this.init()
})
}else{
this.init();
});
} else {
this.createPlayer();
this.init()
this.init();
}
});
});
// setTimeout(() => {
// this.player = new WasmPlayer(null, "video", this.callBack, {
// Height: true,
......@@ -77,48 +79,53 @@ export default {
// },
init() {
// 设置播放容器的宽高并监听窗口大小变化
window.addEventListener('resize', () => {
this.player.JS_Resize()
})
window.addEventListener("resize", () => {
this.player.JS_Resize();
});
},
createPlayer() {
this.player = new window.JSPlugin({
szId: 'player',
szId: "player",
szBasePath: "/h5player",
iMaxSplit: 4,
iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
openDebug: true,
oStyle: {
borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
}
})
borderSelect: IS_MOVE_DEVICE ? "#000" : "#FFCC00",
},
});
this.open();
},
open(){
open() {
this.queryParam.cameraIndexCode = this.deviceData.resourceId;
getPreviewURLs(this.queryParam).then(response =>{
if(response.data.code == '0'){
this.videoOpenNum++;
let url = response.data.data.url;
//let index = this.player.currentWindowIndex;
this.player.JS_Play(url,{playURL: url, mode:"0" }, this.videoOpenNum%4).then(() => {
console.log('realplay success')
getPreviewURLs(this.queryParam).then((response) => {
if (response.data.code == "0") {
this.videoOpenNum++;
let url = response.data.data.url;
//let index = this.player.currentWindowIndex;
this.player
.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){
return new Promise(reslove =>{
loadScript(src) {
return new Promise((reslove) => {
let scpritE1 = document.createElement("script");
scpritE1.type = "text/javascript";
scpritE1.src = src;
scpritE1.onload = () => {
reslove();
}
document.body.appendChild(scpritE1);
})
scpritE1.type = "text/javascript";
scpritE1.src = src;
scpritE1.onload = () => {
reslove();
};
document.body.appendChild(scpritE1);
});
},
callBack() {},
close() {
......@@ -130,12 +137,15 @@ export default {
</script>
<style lang="scss">
.sub-wnd{
text-align: center !important;
}
.sub-wnd {
text-align: center !important;
}
.box-wrapper {
box-shadow: 0px 0px 10px #54e0ef inset;
background-color: #071738;
// box-shadow: 0px 0px 10px #54e0ef inset;
// background-color: #071738;
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;
......@@ -145,6 +155,19 @@ export default {
font-size: 14px;
line-height: 14px;
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 {
position: absolute;
......@@ -163,4 +186,3 @@ export default {
}
}
</style>
zh-baseversion-web/src/components/bigWindow/yhqUser.vue
View file @ 74e71829
<!--
* @Author: your name
* @Date: 2022-01-26 20:07:52
* @LastEditTime: 2022-03-17 09:05:30
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-07-25 17:11:56
* @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
......@@ -14,30 +14,31 @@
</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>
<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>
<div class="line"></div>
<div>
<!--<div class="top flex top-top">-->
<!--<div class="top flex top-top">-->
<!--<div class="group" style="width:20%">-->
<!--<div class="left">联系人：</div>-->
<!--<div class="right zzz">{{ deviceData.linkman }}</div>-->
<!--<div class="left">联系人：</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 class="left">联系电话:</div>-->
<!--<div v-unValue class="right zzz">-->
<!--{{ deviceData.phone }}-->
<!--</div>-->
<!--</div>-->
<!--<div class="group" style="width:30%">-->
<!--<div class="left">联系地址：</div>-->
<!--<div :title="deviceData.address" class="right last zzz">-->
<!--{{ deviceData.address || "-" }}-->
<!--</div>-->
<!--<div class="left">联系地址：</div>-->
<!--<div :title="deviceData.address" class="right last zzz">-->
<!--{{ deviceData.address || "-" }}-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!-- <div class="top flex top-bottom">
<!-- <div class="top flex top-bottom">
<div class="group">
<div class="left">联系地址：</div>
<div :title="deviceData.address" class="right last zzz">
......@@ -46,55 +47,68 @@
</div>
</div> -->
<template v-if="deviceData.detectorCountList">
<div class="foot">
<div class="thead flex">
<div class="first">设备类型</div>
<div>设备数量</div>
<div>在线设备</div>
<div>离线设备</div>
<!-- <div>历史报警</div>
<template v-if="deviceData.detectorCountList">
<div class="foot">
<div class="thead flex">
<div class="first">设备类型</div>
<div>设备数量</div>
<div>在线设备</div>
<div>离线设备</div>
<!-- <div>历史报警</div>
<div>已处理报警</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 class="last">报警中</div>
</div>
<div v-unValue class="">
{{ data.offLineNum }}
</div>
<!-- <div v-unValue class="">
<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 v-unValue class="">
{{ data.offLineNum }}
</div>
<!-- <div v-unValue class="">
{{ data.historyAlarmNum }}
</div>
<div v-unValue class="">
{{ data.cancelAlarmNum }}
</div> -->
<div v-unValue class="last zzz">
{{ data.processingAlarmNum }}
<div v-unValue class="last zzz">
{{ data.processingAlarmNum }}
</div>
</div>
</div>
</div>
</template>
</template>
</div>
<div style="width:100%;display: flex;">
<div style="width: 100%; display: flex">
<div class="btn">
<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">
<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>
<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>
<yhqUserCenter
<yhqUserCenter
:title="centerTitle"
:show="yhquserCenterShow"
ref="yhquserCenter"
......@@ -104,7 +118,6 @@
:pageSize="5"
v-show="!isShow"
/>
</div>
</template>
......@@ -113,7 +126,7 @@ import {
getYhq,
getyhqUser,
deviceUser,
deviceUserList
deviceUserList,
} from "@/api/bigWindow/getDevice";
import { companyType, deviceType } from "@/utils/mapClass/config.js";
import { yhqlistDetectorInfo } from "@/api/detector/detectorInfo";
......@@ -127,7 +140,7 @@ export default {
data() {
return {
flag: true,
isShow: true ,
isShow: true,
companyType,
deviceType,
centerTitle: "",
......@@ -155,7 +168,7 @@ export default {
}
//this.myHttp();
// console.log(this.deviceData);
this.btnClick()
this.btnClick();
},
methods: {
//用户的设备center
......@@ -185,7 +198,7 @@ export default {
// this.vueRoot.centerDataFunc(this.deviceData.pressureFlows);
this.getDetectorInfoList(
deviceUserList,
{ township: this.deviceData.township,pageNum: 1, pageSize: 5, },
{ township: this.deviceData.township, pageNum: 1, pageSize: 5 },
this.deviceData.nickName
);
},
......@@ -205,19 +218,20 @@ export default {
<style lang="scss" scoped>
.arrowTransform {
transition: 0s;
transform-origin: center;
transform: rotateZ(180deg);
}
transition: 0s;
transform-origin: center;
transform: rotateZ(180deg);
}
.arrowTransformReturn {
transition: 0s;
transform-origin: center;
transform: rotateZ(0deg);
}
.arrowTransformReturn {
transition: 0s;
transform-origin: center;
transform: rotateZ(0deg);
}
.devicea-wrapper {
box-shadow: 0px 0px 10px #54e0ef inset;
background-color: #071738;
background: rgba(2, 26, 51, 0.9);
border: 1px solid #127bd1;
box-shadow: inset 0px 0px 10px 0px #164db2;
padding: 10px;
position: relative;
width: 740px;
......@@ -227,6 +241,20 @@ export default {
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;
......@@ -289,7 +317,7 @@ export default {
.foot {
font-size: 14px;
color: #ffffff;
background: url('../../assets/second/box-bg.png');
background: url("../../assets/second/box-bg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 1px;
......@@ -312,11 +340,11 @@ export default {
.tbody {
border-top: none;
}
// .thead {
// div {
// background-color: rgba(255, 255, 255, 0.1);
// }
// }
// .thead {
// div {
// background-color: rgba(255, 255, 255, 0.1);
// }
// }
}
.btn {
......@@ -325,7 +353,7 @@ export default {
div {
font-size: 14px;
color: #ffffff;
background: url('../../assets/second/boxbtn-bg.png');
background: url("../../assets/second/boxbtn-bg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 7px 15px;
......
zh-baseversion-web/src/utils/mapClass/map.js
View file @ 74e71829
/*
* @Author: your name
* @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
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/utils/mapClass.js
......@@ -589,7 +589,7 @@ export class EditorMap {
}
filterSelectPipe(id, mediumComponent, lng, lat) {
this.pipeArr[6].forEach((pipe) => {
this.pipeArr[1].forEach((pipe) => {
const deviceExtData = pipe.getExtData();
if (deviceExtData.pipeId === id) {
//设置颜色
......@@ -1349,7 +1349,7 @@ export class EditorMap {
const color = pipeColor[pipePressure];
this.pipeArr[6].forEach((pipe) => {
this.pipeArr[1].forEach((pipe) => {
const deviceExtData = pipe.getExtData();
if (deviceExtData.pipeId === id) {
//设置颜色
......@@ -1364,10 +1364,13 @@ export class EditorMap {
}
// 设备以及公司过滤
allfilter(companyArr, typeArr) {
console.log(typeArr,this.pipeArr)
for (let pipeItem in this.pipeArr) {
this.pipeArr[pipeItem].forEach((pipe) => {
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();
} else {
pipe.hide();
......
zh-baseversion-web/src/views/bigWindow/components/Top.vue
View file @ 74e71829
......@@ -66,7 +66,7 @@ export default {
name: "",
data() {
return {
selarr1: [],
selarr1: [1],
searchShow: false,
searchItemShow: false,
searchVal: "",
......@@ -83,12 +83,6 @@ export default {
9: "管道 :",
},
arr: [
{
val: 2,
ischeck: false,
imgurl: require("@/assets/firstimage/tiaoyaxiang.png"),
name: "调压箱",
},
{
val: 3,
ischeck: false,
......@@ -102,16 +96,16 @@ export default {
name: "场 站",
},
{
val: 6,
val: 2,
ischeck: false,
imgurl: require("@/assets/firstimage/user.png"),
name: "居民用户",
imgurl: require("@/assets/firstimage/tiaoyaxiang.png"),
name: "调压箱",
},
{
val: 61,
val: 1,
ischeck: false,
imgurl: require("@/assets/firstimage/syUser.png"),
name: "商业用户",
imgurl: require("@/assets/firstimage/guandao.png"),
name: "管道",
},
{
val: 5,
......@@ -119,11 +113,23 @@ export default {
imgurl: require("@/assets/firstimage/jiankong.png"),
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,
ischeck: false,
imgurl: require("@/assets/firstimage/yhq.png"),
name: "餐饮单位液化气用户",
name: "餐饮用户",
},
],
};
......@@ -150,7 +156,7 @@ export default {
searchDeviceDetail({ type: item.type, id: item.id }).then((res) => {
if (res.code == 200) {
let dataArr = null;
console.log(res)
console.log(res);
// 1.阀井
// 2.调压箱
// 3.场站
......@@ -192,13 +198,13 @@ export default {
<style lang="scss" scoped>
.typelist-div {
transition: all 0.2s linear;
width: 800px;
width: 840px;
// height: 96px;
// height: 56px;
z-index: 9999;
position: fixed;
top: 90px;
margin-left: calc((100% - 755px) / 2);
margin-left: calc((100% - 840px) / 2);
background: rgba(2, 41, 81, 0.25);
border: 1px solid #275275;
box-sizing: border-box;
......@@ -254,12 +260,12 @@ export default {
height: 20px;
}
.device-btn-wrapper {
width: 755px;
width: 780px;
margin-right: 5px;
flex-wrap: wrap;
}
.search {
width: 755px;
width: 785px;
position: absolute;
top: 40px;
.input-wrapper {
......
zh-baseversion-web/src/views/bigWindow/index.vue
View file @ 74e71829
<!--
* @Author: your name
* @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
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/Home.vue
......@@ -502,7 +502,7 @@ export default {
console.log("管道", res.data);
if (res.data && !res.data[0].iconType) {
res.data.forEach((item) => {
item.iconType = 6;
item.iconType = 1;
});
}
// 根据数据格式不同，赋值不同，如果是个数组，就用res，如果不是就用res.data
......@@ -765,14 +765,21 @@ export default {
top: 50px;
right: 20px;
font-size: 14px;
color: #3cc4ff;
color: #ffffff;
cursor: pointer;
padding: 3px 10px;
border: 1px solid rgb(57, 68, 124);
background: #12268e33;
/* &:hover {
color: #00ffff;
} */
// background: #12268e33;
background: url("~@/assets/firstimage/btm-item.png") no-repeat bottom center;
width: 128px;
height: 28px;
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 {
position: absolute;
......
zh-baseversion-web/vue.config.js
View file @ 74e71829
......@@ -36,8 +36,8 @@ module.exports = {
[process.env.VUE_APP_BASE_API]: {
// target: `http://localhost:8905/gassafety`,
// target: `http://192.168.2.59:8905/gassafety`,
target: ` http://36.138.180.82:8905/gassafety`,
target: `http://192.168.2.59:8905/gassafety`,
// target: ` http://36.138.180.82:8905/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