Commit 024e64bd authored by 纪泽龙's avatar 纪泽龙

餐饮 工商 居民 弹框内容更改,map优化

parent 3a377098
/*
* @Author: your name
* @Date: 2022-02-26 16:01:37
* @LastEditTime: 2022-02-26 21:11:12
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-09-07 15:08:36
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/api/detector/detectorInfo.js
*/
......@@ -31,6 +31,17 @@ export function yhqlistDetectorInfo(query) {
},
});
}
export function getUserList(query) {
return request({
url: "/supervise/user/pageQueryLabelsLayerMarksDUser",
method: "get",
params: {
pageNum: 1,
pageSize: 5,
...query,
},
});
}
// 探测器列表
export function detectorInfoList(query) {
return request({
......
<!--
* @Author: your name
* @Date: 2022-01-26 20:07:52
* @LastEditTime: 2024-08-01 09:48:18
* @LastEditTime: 2024-09-07 15:47:08
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
......@@ -10,56 +10,56 @@
<template>
<div class="devicea-wrapper">
<div class="title">
{{ deviceData.nickName }}
{{ deviceData.villageName }}
</div>
<div class="close" @click="close">
<!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> -->
<i class="el-icon-close" style="font-size: 20px; color: #49d8ff"></i>
</div>
<div class="line"></div>
<div class="line"></div>
<div class="top">
<div class="info-item" :show-overflow-tooltip="true">
<div class="label">联系人:</div>
<div class="username-value" :title="deviceData.linkman">{{ deviceData.linkman }}</div>
</div>
<div class="info-item" :show-overflow-tooltip="true">
<div class="label">联系电话:</div>
<div class="phone-value" :title="deviceData.phone"> {{ deviceData.phone }} </div>
<div class="info-item" :show-overflow-tooltip="true">
<div class="label">名称</div>
<div class="username-value" :title="deviceData.villageName">
{{ deviceData.villageName }}
</div>
</div>
</div>
<div class="addresstop">
<div class="info-item" :show-overflow-tooltip="true">
<div class="label">联系地址</div>
<div class="phone-value" :title="deviceData.address">
{{ deviceData.address || "-" }}
</div>
</div>
</div>
<!-- <div class="addresstop">
<div class="group">
<div class="left">联系地址:</div>
<div :title="deviceData.address" class="right last zzz">
{{ deviceData.address || "-" }}
</div>
</div>
</div>
</div>
</div> -->
<template v-if="deviceData.detectorCountList.length>0">
<template>
<div class="foot">
<div class="thead flex">
<div class="first">设备类型</div>
<div class="first">用户数量</div>
<div>设备数量</div>
<div>在线设备</div>
<div>离线设备</div>
<div>气瓶数量</div>
<!-- <div>历史报警</div>
<div>已处理报警</div> -->
<div class="last">报警中</div>
<!-- <div class="last">报警中</div> -->
</div>
<div
v-for="data in deviceData.detectorCountList"
:key="data.userId"
class="tbody flex"
>
<div v-unValue class="first zzz">{{ data.detectorType }}</div>
<div class="">{{ data.detectorCount }}</div>
<div class="tbody flex">
<div v-unValue class="first zzz">{{ deviceData.userNum }}</div>
<div class="">{{ deviceData.deviceNum }}</div>
<div v-unValue class="">
{{ data.onLineNum }}
{{ deviceData.onLineNum || "-" }}
</div>
<div v-unValue class="">
{{ data.offLineNum }}
{{ deviceData.offLineNum || "-" }}
</div>
<!-- <div v-unValue class="">
{{ data.historyAlarmNum }}
......@@ -67,20 +67,20 @@
<div v-unValue class="">
{{ data.cancelAlarmNum }}
</div> -->
<div v-unValue class="last zzz">
{{ data.processingAlarmNum }}
</div>
<!-- <div v-unValue class="last zzz">
{{ deviceData.processingAlarmNum }}
</div> -->
</div>
</div>
</template>
</template>
<div style="width: 100%; display: flex" v-if="detcetorList>0">
<div style="width: 100%; display: flex" v-if="detcetorList.length > 0">
<div class="btn">
<div>感知设备</div>
</div>
<p
style="
width: 85%;
width: 86%;
height: 10px;
background-color: #022346;
margin-top: 22px;
......@@ -102,7 +102,7 @@
:show="userCenterShow"
ref="userCenter"
:detcetorList="detcetorList"
:userId="centerUserId"
:villageId="villageId"
:total="centerTotal"
:pageSize="5"
v-show="!isShow"
......@@ -113,8 +113,8 @@
<script>
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";
import { listDetectorInfo, getUserList } from "@/api/detector/detectorInfo";
// import { detectorUserList } from "@/api/detector/detectorUser";
import UserCenter from "@/components/bigWindow/UserCenter.vue";
export default {
......@@ -129,7 +129,7 @@ export default {
deviceType,
centerTitle: "",
detcetorList: [],
centerUserId: null,
villageId: null,
centerTotal: null,
userCenterShow: false,
};
......@@ -150,23 +150,23 @@ export default {
this.companyType[item.conpanyId] = item.companyName;
});
}
this.myHttp();
// console.log(this.deviceData);
},
methods: {
//用户的设备center
getDetectorInfoList(httpFunc, queryParams, title) {
console.log(queryParams);
return httpFunc(queryParams).then((res) => {
// console.log("queryParamssssssssssss", res);
if (res.code == 200) {
this.detcetorList = res.rows;
this.centerUserId = queryParams.userId;
this.villageId = queryParams.villageId;
// 总数据
this.centerTotal = res.total;
// this.$refs.userCenter.fade = "fade";
this.otherCenterShow = false;
this.userCenterShow = true;
// this.otherCenterShow = false;
// this.userCenterShow = true;
this.centerTitle = title;
// 传递回去
return res.code;
......@@ -179,22 +179,19 @@ export default {
btnClick() {
this.isShow = !this.isShow;
// this.vueRoot.centerDataFunc(this.deviceData.pressureFlows);
// this.getDetectorInfoList(
// listDetectorInfo,
// { userId: this.deviceData.userId, pageNum: 1, pageSize: 5 },
// this.deviceData.nickName
// );
},
myHttp() {
this.getDetectorInfoList(
listDetectorInfo,
{ userId: this.deviceData.userId, pageNum: 1, pageSize: 5 },
getUserList,
{ villageId: this.deviceData.villageId, pageNum: 1, pageSize: 5 },
this.deviceData.nickName
);
},
myHttp() {
detectorUserList({ userId: this.deviceData.userId }).then((res) => {
if (res.code == 200) {
const data = res.data.filter(
(item) => item.userId == this.deviceData.userId
)[0].detectorCountList;
this.deviceData.detectorCountList = data;
}
});
},
},
};
</script>
......@@ -212,12 +209,12 @@ export default {
transform: rotateZ(0deg);
}
.devicea-wrapper {
background: rgba(2, 26, 51, 0.9);
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;
width: 800px;
.title {
// padding-top: 10px;
// padding-left: 10px;
......@@ -247,18 +244,17 @@ export default {
cursor: pointer;
}
.addresstop {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
// gap: 10px; /* 列与列之间的间隔 */
display: flex;
// gap: 10px; /* 列与列之间的间隔 */
.group {
height: 30px;
display: flex;
justify-content: flex-start; /* 左对齐 */
align-items: center; /* 垂直居中,如果需要的话 */
div {
justify-content: flex-start; /* 左对齐 */
align-items: center; /* 垂直居中,如果需要的话 */
div {
box-sizing: border-box;
text-align: left;
font-size: 14px;
......@@ -278,29 +274,28 @@ export default {
.top {
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
width: 100%;
display: flex; /* 使用 Flexbox 布局 */
align-items: center; /* 垂直居中 */
justify-content: space-between; /* 平均分布 */
box-sizing: border-box; /* 边框盒模型 */
.info-item{
flex: 1; /* 每个组合占据一半的空间 */
justify-content: space-between; /* 平均分布 */
box-sizing: border-box; /* 边框盒模型 */
.info-item {
flex: 1; /* 每个组合占据一半的空间 */
display: flex;
align-items: center; /* 垂直居中 */
justify-content: flex-start; /* 左对齐 */
overflow: hidden; /* 防止内容溢出容器 */
}
align-items: center; /* 垂直居中 */
justify-content: flex-start; /* 左对齐 */
overflow: hidden; /* 防止内容溢出容器 */
}
.label {
min-width: 80px;
text-align: left; /* 标签右对齐 */
padding-left: 5px; /* 添加一些右侧内边距 */
color: #ffffff;
font-size: 14px;
}
min-width: 80px;
text-align: left; /* 标签右对齐 */
padding-left: 5px; /* 添加一些右侧内边距 */
color: #ffffff;
font-size: 14px;
}
.username-value,
.phone-value {
flex: 1; /* 弹性布局,占据剩余空间 */
flex: 1; /* 弹性布局,占据剩余空间 */
overflow: hidden; /* 如果值过长,隐藏超出的部分 */
text-overflow: ellipsis; /* 显示省略号 */
white-space: nowrap; /* 不允许文本换行 */
......@@ -309,7 +304,6 @@ export default {
padding-left: 5px; /* 添加一些左侧内边距 */
color: #ffffff;
font-size: 14px;
}
// .info-item {
// width: 50%;
......@@ -354,7 +348,7 @@ export default {
// flex: 1;
// }
// }
// }
// }
.foot {
font-size: 14px;
color: #ffffff;
......@@ -365,6 +359,7 @@ export default {
.thead,
.tbody {
div {
padding: 5px 0;
flex: 1;
text-align: left;
box-sizing: border-box;
......
......@@ -12,48 +12,65 @@
<el-table
size="mini"
:data="tableData"
style="width: 720px"
style="width: 780px !important"
class="el-bottom"
:key="Math.random()"
>
<!-- :height="tableHeight" -->
<!-- <el-table-column prop="detectorCode" label="设备编号" width="180">
<template slot-scope="scope">
<div :title="scope.row.detectorCode" class="ddd" v-unValue>
{{ scope.row.detectorCode }}
</div>
</template>
</el-table-column> -->
<el-table-column prop="detectorName" label="设备名称" width="100">
<el-table-column
prop="detectonickNamerName"
label="用户姓名"
width="100"
>
<template slot-scope="scope">
<div :title="scope.row.detectorName" class="ddd" v-unValue>
<div :title="scope.row.nickName" class="ddd" v-unValue>
{{ scope.row.detectorName }}
</div>
</template>
</el-table-column>
<el-table-column prop="medium" label="监测介质" width="100">
<el-table-column prop="phone" label="联系电话" width="120">
<template slot-scope="scope">
<div v-unValue>{{ scope.row.medium }}</div>
<div v-unValue>{{ scope.row.phone }}</div>
</template>
</el-table-column>
<el-table-column prop="detectorAddr" label="设备地址" width="100">
<el-table-column prop="detectorAddr" label="地址" width="140">
<template slot-scope="scope">
<div v-unValue style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ scope.row.detectorAddr }}</div>
<div v-unValue class="zzz">{{ scope.row.address }}</div>
</template>
</el-table-column>
<el-table-column prop="linkman" label="联系人" width="80">
<el-table-column prop="linkman" label="设备详情" width="120">
<template slot-scope="scope">
<div v-unValue>{{ scope.row.linkman }}</div>
<div class="detail">
<el-button
:disabled="scope.row.safetyDeviceList.length == 0"
type="text"
@click.stop="deviceShow(scope.row.safetyDeviceList)"
>设备</el-button
>
<el-button disabled type="text">气瓶</el-button>
</div>
</template>
</el-table-column>
<el-table-column prop="phone" label="联系电话" width="100">
<el-table-column
prop="detectorStatus"
label="末次安检时间"
width="120"
>
<template slot-scope="scope">
<div v-unValue>
{{ scope.row.time }}
</div>
</template>
</el-table-column>
<el-table-column prop="detectorStatus" label="设备状态" width="100">
<el-table-column prop="alarmTime" label="安检人员" width="80">
<template slot-scope="scope">
<div v-unValue :style="{color:scope.row.detectorStatus==1?'red':''}">{{scope.row.detectorStatus}}</div>
<div v-unValue>{{ scope.row.alarmTime }}</div>
</template>
</el-table-column>
<el-table-column prop="alarmTime" label="预警时间" width="140">
<el-table-column prop="alarmTime" label="安检情况" width="100">
<template slot-scope="scope">
<div v-unValue>{{ scope.row.alarmTime }}</div>
</template>
......@@ -72,6 +89,31 @@
</div>
</div>
</div>
<div
class="toBody"
ref="toBody"
@click.stop="toBodyClick"
v-show="yhquserCenterShow"
>
<div class="list-top">
<div class="title">设备列表</div>
<div class="close" @click="close">
<i
class="el-icon-close"
style="font-size: 20px; color: #5dfefe"
></i>
</div>
</div>
<yhqUserCenter
ref="yhquserCenter"
:show="true"
:detcetorList="safetyDeviceList"
v-if="safetyDeviceList.length > 0"
/>
</div>
</div>
</transition>
</template>
......@@ -79,7 +121,8 @@
<script>
// import Velocity from "velocity-animate";
// import { listDeviceAlarm } from "@/api/dataMonitoring/deviceAlarm";
import { listDetectorInfo } from "@/api/detector/detectorInfo";
import { listDetectorInfo, getUserList } from "@/api/detector/detectorInfo";
import yhqUserCenter from "@/components/bigWindow/yhqUserCenter.vue";
export default {
props: {
......@@ -93,7 +136,7 @@ export default {
title: {
type: String,
},
userId: {
villageId: {
type: [Number, String],
},
total: {
......@@ -103,6 +146,9 @@ export default {
type: Number,
},
},
components: {
yhqUserCenter,
},
data() {
return {
// 动画效果的切换
......@@ -116,6 +162,8 @@ export default {
// address: "上海市普陀区金沙江路",
// },
],
safetyDeviceList: [],
yhquserCenterShow: false,
};
},
created() {
......@@ -127,22 +175,43 @@ export default {
detcetorList(newData) {
// console.log(bol);
// if (bol) {
console.log("55555555",newData);
console.log("55555555", newData);
this.tableData = [...newData];
// }
},
},
mounted() {
// document.querySelector(".bigwindow").removeChild(this.$refs.toBody);
let domArr = document.querySelectorAll(".bigwindow .toBody");
console.log("domArr", domArr.length);
domArr.forEach((item) => {
document.querySelector(".bigwindow").removeChild(item);
});
console.log("domArr", domArr);
// document.querySelector("body").addEventListener("click", () => {
// console.log(123);
// this.yhquserCenterShow = false;
// console.log(this.yhquserCenterShow);
// });
document.querySelector(".bigwindow").appendChild(this.$refs.toBody);
},
methods: {
toBodyClick() {},
deviceShow(list) {
this.yhquserCenterShow = true;
this.safetyDeviceList = list;
},
handleSizeChange(val) {
console.log(val);
},
handleCurrentChangvale(val) {
this.$parent.getDetectorInfoList(
listDetectorInfo,
getUserList,
{
userId: this.userId,
villageId: this.villageId,
pageNum: val,
pageSize: this.pageSize,
},
......@@ -151,13 +220,14 @@ export default {
},
close() {
// this.fade = "fade";
this.$parent.userCenterShow = false;
this.safetyDeviceList=[];
this.yhquserCenterShow = false;
},
},
};
</script>
<style lang="scss" scoped>
<style lang="scss" scoped>
.wrapper {
// width: 978px;
// max-height: 600px;
......@@ -169,7 +239,7 @@ export default {
// // background-color: #fff;
// display: flex;
// justify-content: space-between;
margin-top: 10px;
margin-top: 2px;
z-index: 9999;
& > div {
......@@ -254,7 +324,7 @@ export default {
}
}
.right {
width: 740px;
width: 800px;
display: flex;
flex-wrap: wrap;
// justify-content: space-between;
......@@ -304,4 +374,29 @@ export default {
font-size: 50px !important;
}
}
</style>
\ No newline at end of file
.toBody {
position: fixed;
left: 50%;
top: 20%;
height: 500px;
width: 760px;
margin-left: -380px;
background: rgba(0, 0, 0, 0.3);
box-sizing: border-box;
padding: 10px 20px;
// padding-top:-10px;
.list-top {
display: flex;
justify-content: space-between;
.title {
color: rgb(73, 216, 255);
flex:1;
text-align: center;
}
.close{
cursor: pointer;
}
}
}
</style>
<!--
* @Author: your name
* @Date: 2022-01-26 20:07:52
* @LastEditTime: 2024-07-25 17:11:56
* @LastEditTime: 2024-09-07 15:55:19
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
......@@ -10,52 +10,52 @@
<template>
<div class="devicea-wrapper">
<div class="title">
{{ deviceData.township }}
{{ deviceData.nickName }}
</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 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>-->
<!--</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 class="top flex top-top">
<div class="group" style="width: 20%">
<div class="left">用户姓名</div>
<div :title="deviceData.nickName" class="right zzz">{{ deviceData.nickName }}</div>
</div>
<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 class="top flex top-bottom">
<div class="group">
<div class="left">联系地址:</div>
<div :title="deviceData.address" class="right last zzz">
{{ deviceData.address || "-" }}
<div class="group">
<div class="left">联系地址:</div>
<div :title="deviceData.address" class="right last zzz">
{{ deviceData.address || "-" }}
</div>
</div>
</div>
</div> -->
</div> -->
<template v-if="deviceData.detectorCountList">
<!-- <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>历史报警</div>
<div>已处理报警</div>
<div class="last">报警中</div>
</div>
<div
......@@ -71,21 +71,21 @@
<div v-unValue class="">
{{ data.offLineNum }}
</div>
<!-- <div v-unValue class="">
<div v-unValue class="">
{{ data.historyAlarmNum }}
</div>
<div v-unValue class="">
{{ data.cancelAlarmNum }}
</div> -->
</div>
<div v-unValue class="last zzz">
{{ data.processingAlarmNum }}
</div>
</div>
</div>
</template>
</template> -->
</div>
<div style="width: 100%; display: flex">
<div style="width: 100%; display: flex" v-if="deviceData.safetyDeviceList.length>0">
<div class="btn">
<div>感知设备</div>
</div>
......@@ -108,16 +108,30 @@
/>
</div>
</div>
<yhqUserCenter
:title="centerTitle"
:show="yhquserCenterShow"
ref="yhquserCenter"
:detcetorList="detcetorList"
:detcetorList="deviceData.safetyDeviceList"
:userId="centerUserId"
:total="centerTotal"
:pageSize="5"
v-show="!isShow"
/>
<div class="body-wrapper" ref="toBody">
<!-- <yhqUserCenter
:title="centerTitle"
:show="false"
ref="yhquserCenter"
:detcetorList="detcetorList"
:userId="centerUserId"
:total="centerTotal"
:pageSize="5"
v-show="!isShow"
/> -->
</div>
</div>
</template>
......@@ -129,8 +143,8 @@ import {
deviceUserList,
} from "@/api/bigWindow/getDevice";
import { companyType, deviceType } from "@/utils/mapClass/config.js";
import { yhqlistDetectorInfo } from "@/api/detector/detectorInfo";
import { yhqdetectorUserList } from "@/api/detector/detectorUser";
// import { yhqlistDetectorInfo } from "@/api/detector/detectorInfo";
import { yhqdetectorUserList,labelsLayerMarksDUserVillageSafDevInfoMap } from "@/api/detector/detectorUser";
import yhqUserCenter from "@/components/bigWindow/yhqUserCenter.vue";
export default {
......@@ -139,6 +153,7 @@ export default {
},
data() {
return {
dialogVisible: true,
flag: true,
isShow: true,
companyType,
......@@ -166,9 +181,13 @@ export default {
this.companyType[item.conpanyId] = item.companyName;
});
}
//this.myHttp();
// console.log(this.deviceData);
this.btnClick();
// console.log("this.deviceData",this.deviceData);
// this.btnClick();
// console.log(this.$refs.toBody);
// document.querySelector(".bigwindow").appendChild(this.$refs.toBody);
},
methods: {
//用户的设备center
......@@ -190,33 +209,44 @@ export default {
}
});
},
getDeviceList(){
// return labelsLayerMarksDUserVillageSafDevInfoMap().then(res=>{
// console.log("设备",res)
// })
},
close() {
this.mapClass.infowindowClose();
},
btnClick() {
this.isShow = !this.isShow;
// this.vueRoot.centerDataFunc(this.deviceData.pressureFlows);
this.getDetectorInfoList(
deviceUserList,
{ township: this.deviceData.township, pageNum: 1, pageSize: 5 },
this.deviceData.nickName
);
// this.getDetectorInfoList(
// deviceUserList,
// { township: this.deviceData.township, pageNum: 1, pageSize: 5 },
// this.deviceData.nickName
// );
},
myHttp() {
yhqdetectorUserList({ userId: this.deviceData.userId }).then((res) => {
if (res.code == 200) {
const data = res.data.filter(
(item) => item.userId == this.deviceData.userId
)[0].detectorCountList;
this.deviceData.detectorCountList = data;
}
});
// yhqdetectorUserList({ userId: this.deviceData.userId }).then((res) => {
// if (res.code == 200) {
// const data = res.data.filter(
// (item) => item.userId == this.deviceData.userId
// )[0].detectorCountList;
// this.deviceData.detectorCountList = data;
// }
// });
},
},
};
</script>
<style lang="scss" scoped>
.body-wrapper {
position: fixed;
top: 100px;
}
.arrowTransform {
transition: 0s;
transform-origin: center;
......@@ -241,9 +271,9 @@ export default {
font-size: 14px;
line-height: 14px;
color: #ffffff;
padding-left:5px;
padding-left: 5px;
}
.line {
.line {
width: 50%;
height: 2px;
margin-top: 10px;
......@@ -275,10 +305,10 @@ export default {
.group {
height: 30px;
display: flex;
justify-content: space-between;
// justify-content: space-between;
box-sizing: border-box;
div {
flex: 1;
// flex: 1;
box-sizing: border-box;
text-align: left;
font-size: 14px;
......@@ -293,6 +323,9 @@ export default {
.left {
text-align: left;
}
.right{
flex:1;
}
}
&.top-bottom {
.left {
......
......@@ -11,63 +11,67 @@
<div class="bottom right-bottom-data-left">
<el-table
size="mini"
:data="tableData"
:data="detcetorList"
style="width: 720px"
class="el-bottom"
:key="Math.random()"
>
<!-- :height="tableHeight" -->
<!-- <el-table-column prop="detectorCode" label="设备编号" width="180">
<el-table-column prop="detectorCode" label="报警器编号" width="180">
<template slot-scope="scope">
<div :title="scope.row.detectorCode" class="ddd" v-unValue>
{{ scope.row.detectorCode }}
<div :title="scope.row.detectorCode" class="zzz" v-unValue>
{{ scope.row.iotNo }}
</div>
</template>
</el-table-column> -->
<el-table-column prop="detectorName" label="设备名称" width="100">
</el-table-column>
<el-table-column prop="detectorName" label="报警器名称" width="100">
<template slot-scope="scope">
<div :title="scope.row.detectorName" class="ddd" v-unValue>
家用报警器
<div :title="scope.row.detectorName" class="zzz" v-unValue>
{{scope.row.deviceName}}
</div>
</template>
</el-table-column>
<el-table-column prop="medium" label="监测介质" width="100">
<template slot-scope="scope">
<div v-unValue>{{ scope.row.medium }}</div>
<div v-unValue>{{ scope.row.detctionMedium }}</div>
</template>
</el-table-column>
<el-table-column prop="detectorAddr" label="设备地址" width="100">
<!-- <el-table-column prop="detectorAddr" label="设备地址" width="100">
<template slot-scope="scope">
<div v-unValue style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" :title="scope.row.address">
{{ scope.row.address }}
</div>
</template>
</el-table-column>
<el-table-column prop="linkman" label="联系人" width="80">
</el-table-column> -->
<!-- <el-table-column prop="linkman" label="联系人" width="80">
<template slot-scope="scope">
<div v-unValue style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ scope.row.linkman }}</div>
</template>
</el-table-column>
<el-table-column prop="phone" label="联系电话" width="100">
</el-table-column>
<el-table-column prop="detectorStatus" label="设备状态" width="100">
</el-table-column> -->
<el-table-column prop="detectorStatus" label="状态" width="100">
<template slot-scope="scope">
<div v-if="scope.row.status == 0">在线</div>
<div v-else-if="scope.row.status == 1">
离线
</div>
<div v-else>-</div>
<div class="detail" v-if="scope.row.status == 0">在线</div>
<div class="detail" v-else-if="scope.row.status == 1">离线</div>
<div class="detail" v-else>-</div>
<!-- <div v-unValue :style="{color:scope.row.detectorStatus==1?'red':''}">{{scope.row.detectorStatus}}</div> -->
</template>
</el-table-column>
<el-table-column prop="alarmTime" label="预警时间" width="140">
<el-table-column prop="alarmTime" label="报警记录" width="140">
<template slot-scope="scope">
<div v-unValue>{{ scope.row.alarmTime }}</div>
<div class="zzz" v-unValue>{{ scope.row.alarmTime }}</div>
</template>
</el-table-column>
<el-table-column prop="alarmTime" label="安装时间" width="140">
<template slot-scope="scope">
<div class="zzz" v-unValue>{{ scope.row.deviceInstallTime }}</div>
</template>
</el-table-column>
</el-table>
<div>
<el-pagination
<!-- <el-pagination
@current-change="handleCurrentChangvale"
:page-size="pageSize"
layout="prev, pager, next, jumper"
......@@ -75,7 +79,7 @@
:hide-on-single-page="total <= pageSize"
:key="total + '' + pageSize"
>
</el-pagination>
</el-pagination> -->
</div>
</div>
</div>
......@@ -123,10 +127,10 @@ export default {
// address: "上海市普陀区金沙江路",
// },
],
detectorStatusList:{
"0":"在线",
"1":"离线",
}
detectorStatusList: {
0: "在线",
1: "离线",
},
};
},
created() {
......@@ -138,11 +142,15 @@ export default {
detcetorList(newData) {
// console.log(bol);
// if (bol) {
console.log("222222222222222222222222222222222222222222",newData);
console.log("222222222222222222222222222222222222222222", newData);
this.tableData = [...newData];
console.log(this.tableData)
// }
},
},
mounted(){
},
methods: {
handleSizeChange(val) {
......@@ -167,7 +175,7 @@ export default {
};
</script>
<style lang="scss" scoped>
<style lang="scss" scoped>
.wrapper {
// width: 978px;
// max-height: 600px;
......@@ -179,7 +187,7 @@ export default {
// // background-color: #fff;
// display: flex;
// justify-content: space-between;
margin-top: 10px;
// margin-top: 10px;
z-index: 9999;
& > div {
......@@ -314,4 +322,7 @@ export default {
font-size: 50px !important;
}
}
.detail{
text-align: left;
}
</style>
/*
* @Author: your name
* @Date: 2022-01-11 13:45:12
* @LastEditTime: 2024-08-01 10:21:14
* @LastEditTime: 2024-09-07 14:57:27
* @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
......@@ -979,7 +979,12 @@ export class EditorMap {
* @param {*} component
* @param {*} showBool
*/
labelsLayerMarksDetectorUserList(mapData, compontent, showBool = true) {
labelsLayerMarksDetectorUserList(
mapData,
compontent1,
compontent2,
showBool = true
) {
if (mapData !== null && mapData !== undefined) {
const hashMap = new Map();
for (var key in mapData) {
......@@ -998,7 +1003,7 @@ export class EditorMap {
const icon = {
type: "image", //图标类型,现阶段只支持 image 类型
image: svgUrl[6], //可访问的图片 URL
size: [44, 49], //图片尺寸
size: [44, 49], //图片尺寸
anchor: "center", //图片相对 position 的锚点,默认为 bottom-center
};
var markers = [];
......@@ -1007,7 +1012,7 @@ export class EditorMap {
jsonValueArr.forEach((item) => {
let longitude = item.longitude;
let latitude = item.latitude;
var userId = item.userId;
var userId = item.villageId;
icon.userId = userId;
var curData = {
position: [longitude, latitude],
......@@ -1027,7 +1032,7 @@ export class EditorMap {
var userId = JSON.stringify(optsObj.icon.userId);
var extData = hashMap.get(userId);
// 如果control==0就是默认值,没有使用123功能,就显示infowindow
this.massMarksMarkerClick(extData, compontent);
this.massMarksMarkerClick(extData, compontent1);
});
if (item.companyType) {
labelMarker.filterData = {
......@@ -1089,7 +1094,7 @@ export class EditorMap {
var userId = JSON.stringify(optsObj.icon.userId);
var extData = hashMap.get(userId);
// 如果control==0就是默认值,没有使用123功能,就显示infowindow
this.massMarksMarkerClick(extData, compontent);
this.massMarksMarkerClick(extData, compontent2);
});
if (item.companyType) {
......@@ -1774,9 +1779,9 @@ export class EditorMap {
this.pipeArr[item].forEach((pipe) => {
const options = pipe.getOptions();
pipe.setOptions({ ...options, strokeOpacity: num });
});
});
}
console.log(123)
console.log(123);
}
// searchPipeClear() {
// const { pipePressure } = this.searchDevice.getExtData();
......
......@@ -124,7 +124,7 @@ export default {
val: 61,
ischeck: false,
imgurl: require("@/assets/firstimage/syUser1.png"),
name: "商业用户",
name: "商业用户",
},
{
val: 18,
......@@ -293,7 +293,7 @@ export default {
height: 20px;
}
.device-btn-wrapper {
width: 780px;
width: 790px;
margin-right: 5px;
flex-wrap: wrap;
}
......
<!--
* @Author: your name
* @Date: 2022-01-11 13:44:17
* @LastEditTime: 2024-08-02 14:09:08
* @LastEditTime: 2024-09-06 16:40:07
* @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
......@@ -10,7 +10,7 @@
<div class="home bigwindow" @click="windowClick">
<div id="map"></div>
<!-- <Center :show="show" :centerData="centerData" /> -->
<UserCenter
<!-- <UserCenter
:title="centerTitle"
:show="userCenterShow"
ref="userCenter"
......@@ -27,7 +27,7 @@
:userId="centerUserId"
:total="centerTotal"
:pageSize="20"
/>
/> -->
<!-- <PipeSelect
@transmit="getPipeSelectMessage"
@closeMediumPressureLine="clearBigWindowsSelectPipe"
......@@ -309,8 +309,7 @@ export default {
},
async mounted() {
labelsLayerMarksDUserVillageSafDevInfoMap();
// labelsLayerMarksDUserVillageSafDevInfoMap();
// console.log(99999999999999)
// getPipe().then(res=>{
// console.log("成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功",res)
......@@ -384,13 +383,19 @@ export default {
this.labelsLayerMarksVideoGoMap(getVideo, VideoView, false);
//this.goMap(getYhq, this.addDevice2, yhqUser, false); //液化气用户上图
if (this.enterpriseId == -2) {
this.labelsLayerMarksDeviceUserGoMap(deviceUser, yhqUser, false); //用户上图
// this.labelsLayerMarksDeviceUserGoMap(deviceUser, yhqUser, false); //用户上图
this.labelsLayerMarksDeviceUserGoMap(
labelsLayerMarksDUserVillageSafDevInfoMap,
yhqUser,
false
); //用户上图
}
// 用户要等一下 因为有报警数据
this.labelsLayerMarksDetectorUserGoMap(
labelsLayerMarksDetectorUserList,
labelsLayerMarksDUserVillageSafDevInfoMap,
User,
yhqUser,
false
).then((res) => {
// 先查一下,然后开启定时器
......@@ -633,9 +638,8 @@ export default {
labelsLayerMarksDeviceUserGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
const mapData = res.data[18];
console.log("液化气用户用户", mapData);
this.map.labelsLayerMarksDeviceUserGoMap(mapData, component, show);
});
},
......@@ -671,11 +675,17 @@ export default {
this.map.labelsLayerMarksTysGoMap(mapData, component, show);
});
},
labelsLayerMarksDetectorUserGoMap(httpFunc, component, show) {
labelsLayerMarksDetectorUserGoMap(httpFunc, component1, component2, show) {
return httpFunc().then((res) => {
const mapData = res.data;
const mapData = { 6: res.data[6], 61: res.data[61] };
// const mapData =res.data
console.log("用户用户用户用户用户", mapData);
this.map.labelsLayerMarksDetectorUserList(mapData, component, show);
this.map.labelsLayerMarksDetectorUserList(
mapData,
component1,
component2,
show
);
});
},
goMap(httpFunc, addFunc, component, show) {
......
......@@ -34,9 +34,11 @@ module.exports = {
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8905/gassafety`,
// target: `http://localhost:8905/gassafety`,
// target: `http://27.128.233.145:8905/gassafety`,
// target: `http://36.138.180.82:8905/gassafety`,
// 服务器
target: `http://36.138.180.82:8079//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