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
* @Date: 2022-01-26 20:07:52
* @LastEditTime: 2022-03-23 15:19:40
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-07-25 17:39:36
* @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
......@@ -16,112 +16,128 @@
</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">
<div class="top-left">
<div class="group">
<div class="left">所属公司：</div>
<div class="right zzz">{{ companyType[deviceData.companyType] }}</div>
</div>
<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 class="group">
<div class="left">备注：</div>
<div class="right zzz">{{ profile }}</div>
</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 class="top-center">
<div class="group">
<div class="left">设备类型：</div>
<div class="right zzz">
{{ deviceType[deviceData.iconType] }}
</div>
</div>
<div
v-else-if="deviceData.stationAddr"
:title="deviceData.stationAddr"
class="right last zzz"
>
{{ deviceData.stationAddr || "-" }}
<div class="group">
<div class="left last">设备地址：</div>
<div
v-if="deviceData.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 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 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="thead flex" v-if="list.length > 0">
<div class="first">设备类型</div>
<div>设备数量</div>
<div>在线设备</div>
<div>离线设备</div>
<!-- <div>历史报警</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="">
<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 v-unValue class="last">
{{ deviceData.inAlarm }}
</div>
</div>
</div>
</template>
</div>
</template>
</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>感知设备</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">
<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>
<OtherCenter
:title="centerTitle"
......@@ -137,9 +153,7 @@
</template>
<script>
import {
getTcqDevice,
} from "@/api/bigWindow/getDevice";
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";
......@@ -151,7 +165,7 @@ export default {
data() {
return {
flag: true,
isShow: true ,
isShow: true,
centerTitle: "",
companyType,
deviceType,
......@@ -214,10 +228,8 @@ export default {
this.companyType[item.conpanyId] = item.companyName;
});
}
this.myHttp()
this.myHttp();
console.log(this.deviceData);
},
methods: {
// 调压箱，阀门，场站睇下的设备
......@@ -241,7 +253,6 @@ export default {
// }
// 传递回去
return res.code;
});
},
close() {
......@@ -255,14 +266,21 @@ export default {
: this.deviceData.stationName;
this.getTcqDevice(
{ devId: this.deviceData.siteStationId, relationDeviceType: 2,pageNum: 1, pageSize: 5, },
{
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)
this.list = res.data[0].subordinateEquipmentList.filter(
(item) => item.numberPressureGauges > 0
);
console.log("resresres222222222", this.list);
});
},
},
......@@ -271,8 +289,9 @@ export default {
<style lang="scss" scoped>
.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: 670px;
......@@ -283,6 +302,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;
......@@ -318,7 +351,7 @@ export default {
text-align: right;
}
.right {
flex:2;
flex: 2;
}
}
}
......@@ -345,7 +378,7 @@ export default {
text-align: right;
}
.right {
flex:2;
flex: 2;
}
}
}
......@@ -354,16 +387,21 @@ export default {
display: flex;
justify-content: center;
div {
width: 50px;
font-size: 14px;
color: #ffffff;
&.last {
border-bottom: none;
}
width: 50px;
font-size: 14px;
color: #ffffff;
&.last {
border-bottom: none;
}
}
.imgtext {
color: #ffffff;
font-size: 10px;
color: #0055AE;
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 {
.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;
......@@ -415,7 +453,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/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
* @Date: 2022-01-26 20:07:52
* @LastEditTime: 2022-03-23 15:23:34
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-07-25 17:13:32
* @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
......@@ -11,20 +11,22 @@
<div class="devicea-wrapper">
<div class="title">
{{
deviceData.deviceName ? deviceData.deviceName : deviceData.stationName
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>
<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">
<div class="top-left">
<div class="group">
<div class="left">所属公司：</div>
<div class="right zzz">{{ companyType[deviceData.companyType] }}</div>
<div class="right zzz">
{{ companyType[deviceData.companyType] }}
</div>
</div>
<div class="group">
......@@ -64,11 +66,11 @@
v-if="deviceData.iconUrl"
style="width: 80px; height: 50px"
:src="deviceData.iconUrl"
:preview-src-list="[deviceData.iconUrl ]"
:preview-src-list="[deviceData.iconUrl]"
:z-index="999999"
>
</el-image>
<div class="imgtext" v-else>暂无图片</div>
<div class="imgtext" v-else>无</div>
</div>
</div>
......@@ -114,13 +116,27 @@
</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>感知设备</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">
<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>
......@@ -138,94 +154,92 @@
</template>
<script>
import {
getTcqDevice,
} from "@/api/bigWindow/getDevice";
import { companyType, deviceType } from "@/utils/mapClass/config.js";
import { getTyxDevice, getFmDevice } from "@/api/bigWindow/getDevice.js";
import OtherCenter from "@/components/bigWindow/OtherCenter.vue";
export default {
components: {
OtherCenter,
},
data() {
return {
flag: true,
isShow: true ,
centerTitle: "",
otherCenterShow: false,
alarmTimer: null,
detcetorList: [],
centerUserId: null,
centerTotal: null,
userCenterShow: false,
companyType,
deviceType,
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;
import { getTcqDevice } from "@/api/bigWindow/getDevice";
import { companyType, deviceType } from "@/utils/mapClass/config.js";
import { getTyxDevice, getFmDevice } from "@/api/bigWindow/getDevice.js";
import OtherCenter from "@/components/bigWindow/OtherCenter.vue";
export default {
components: {
OtherCenter,
},
data() {
return {
flag: true,
isShow: true,
centerTitle: "",
otherCenterShow: false,
alarmTimer: null,
detcetorList: [],
centerUserId: null,
centerTotal: null,
userCenterShow: false,
companyType,
deviceType,
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;
},
mounted() {
// 如果不是测试，而是真数据，就要用帧数据的东西
if (this.prodTest != "test") {
this.companyType = {};
this.company.forEach((item) => {
this.companyType[item.conpanyId] = item.companyName;
});
}
// 当点开infowindow的时候，重新调接口
this.myHttp();
console.log(this.deviceData);
company() {
return this.vueRoot.$store.state.bigWindowCompany.company;
},
methods: {
// 调压箱，阀门，场站睇下的设备
getTcqDevice(queryParams, title) {
console.log(queryParams);
return getTcqDevice(queryParams).then((res) => {
// console.log("queryParams", res);
console.log("resresresresreszzzzzzzzzzzzzzz", res);
},
mounted() {
// 如果不是测试，而是真数据，就要用帧数据的东西
if (this.prodTest != "test") {
this.companyType = {};
this.company.forEach((item) => {
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.centerUserId = queryParams.devId;
......@@ -241,214 +255,243 @@
// }
// 传递回去
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;
},
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.deviceId, relationDeviceType: 1,pageNum: 1, pageSize: 5, },
title
);
},
myHttp() {
console.log(this.deviceData.iconType);
this.getTcqDevice(
{
devId: this.deviceData.deviceId,
relationDeviceType: 1,
pageNum: 1,
pageSize: 5,
},
title
);
},
myHttp() {
console.log(this.deviceData.iconType);
if (this.deviceData.iconType == 2) {
getTyxDevice({ deviceId: this.deviceData.deviceId }).then((res) => {
// 过滤设备数为0的
this.list = res.data[0].subordinateEquipmentList.filter(
if (this.deviceData.iconType == 2) {
getTyxDevice({ deviceId: this.deviceData.deviceId }).then((res) => {
// 过滤设备数为0的
this.list = res.data[0].subordinateEquipmentList.filter(
(item) => item.numberPressureGauges > 0
);
console.log("this.list333333333",this.list);
);
console.log("this.list333333333", this.list);
});
} else {
getFmDevice({ deviceId: this.deviceData.deviceId }).then((res) => {
// 过滤设备数为0的
this.list = res.data[0].subordinateEquipmentList.filter(
} else {
getFmDevice({ deviceId: this.deviceData.deviceId }).then((res) => {
// 过滤设备数为0的
this.list = res.data[0].subordinateEquipmentList.filter(
(item) => item.numberPressureGauges > 0
);
);
});
}
},
}
},
};
},
};
</script>
<style lang="scss" scoped>
.arrowTransform {
transition: 0s;
transform-origin: center;
transform: rotateZ(180deg);
.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: 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 {
transition: 0s;
transform-origin: center;
transform: rotateZ(0deg);
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;
}
.devicea-wrapper {
box-shadow: 0px 0px 10px #54e0ef inset;
background-color: #071738;
padding: 10px;
position: relative;
width: 670px;
border-radius: 7px;
.title {
// padding-top: 10px;
// padding-left: 10px;
font-size: 14px;
line-height: 14px;
color: #ffffff;
}
.close {
position: absolute;
right: 10px;
top: 5px;
cursor: pointer;
}
.top {
margin-top: 10px;
margin-bottom: 10px;
box-sizing: border-box;
.top-left {
flex: 1.8;
.group {
height: 30px;
.top {
margin-top: 10px;
margin-bottom: 10px;
box-sizing: border-box;
.top-left {
flex: 1.8;
.group {
height: 30px;
flex: 1;
display: flex;
justify-content: space-between;
box-sizing: border-box;
div {
flex: 1;
display: flex;
justify-content: space-between;
box-sizing: border-box;
div {
flex: 1;
box-sizing: border-box;
font-size: 14px;
color: #ffffff;
line-height: 30px;
padding: 0 5px;
&.last {
border-bottom: none;
}
}
.left {
text-align: right;
}
.right {
flex:2;
font-size: 14px;
color: #ffffff;
line-height: 30px;
padding: 0 5px;
&.last {
border-bottom: none;
}
}
}
.top-center {
flex: 1.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;
}
.left {
text-align: right;
}
.right {
flex: 2;
}
}
.top-right {
}
.top-center {
flex: 1.8;
.group {
height: 30px;
flex: 1;
display: flex;
justify-content: center;
justify-content: space-between;
box-sizing: border-box;
div {
width: 50px;
flex: 1;
box-sizing: border-box;
font-size: 14px;
color: #ffffff;
line-height: 30px;
padding: 0 5px;
&.last {
border-bottom: none;
}
}
.imgtext {
color: #ffffff;
font-size: 30px;
.left {
text-align: right;
}
.right {
flex: 2;
}
}
}
// .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;
.top-right {
flex: 1;
display: flex;
justify-content: center;
box-sizing: border-box;
padding-top: 5px;
div {
width: 50px;
font-size: 14px;
color: #ffffff;
&.last {
border-bottom: none;
}
// .first {
// flex: 2;
// }
// .last {
// border-right: none;
// }
}
.tbody {
border-top: none;
.imgtext {
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 {
position: relative;
margin-top: 10px;
}
// .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 {
font-size: 14px;
color: #ffffff;
background: url('../../assets/second/boxbtn-bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 7px 15px;
flex: 1;
text-align: left;
box-sizing: border-box;
text-align: center;
border: 1px solid #1b365d;
}
// .first {
// flex: 2;
// }
// .last {
// border-right: none;
// }
}
.flex {
display: flex;
justify-content: space-between;
.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;
}
}
.arrowTransform {
transition: 0s;
transform-origin: center;
transform: rotateZ(180deg);
}
.arrowTransformReturn {
transition: 0s;
transform-origin: center;
transform: rotateZ(0deg);
}
</style>
zh-baseversion-web/src/components/bigWindow/Line.vue
View file @ f471396f
<!--
* @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 @ f471396f
<!--
* @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 @ f471396f
<!--
* @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 @ f471396f
<!--
* @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 @ f471396f
<!--
* @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 @ f471396f
<!--
* @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 @ f471396f
/*
* @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 @ f471396f
......@@ -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 @ f471396f
<!--
* @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;
......
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