Skip to content

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

top搜索功能样式完成，调接口查询数据，调整企业设备过滤逻辑，更改设备图标。

parent b2b24350
Hide whitespace changes
Inline Side-by-side
Showing with 881 additions and 355 deletions
zh-baseversion-web/src/api/bigWindow/getDevice.js
View file @ 7132ffda
/*
* @Author: your name
* @Date: 2022-02-23 15:28:07
* @LastEditTime: 2022-03-08 14:52:13
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-07-18 15:13:55
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /newDev/gassafety-progress/gassafetyprogress-web/src/api/bigWindow/getdevice.js
*/
import request from '@/utils/request'
import request from "@/utils/request";
// 查询管道去查询
export function getPipeForSelect(query) {
return request({
url: '/pipe/pipe/getPipeForSelect',
method: 'get',
params: query
})
url: "/pipe/pipe/getPipeForSelect",
method: "get",
params: query,
});
}
// 查询管道
export function getPipe(query) {
return request({
url: '/pipe/pipe/selectPipeData',
method: 'get',
params: query
})
url: "/pipe/pipe/selectPipeData",
method: "get",
params: query,
});
}
// 调压箱
export function getTyx(query) {
return request({
url: '/pipe/pipe/selectDeviceData',
method: 'get',
params: query
})
url: "/pipe/pipe/selectDeviceData",
method: "get",
params: query,
});
}
// 调压箱下面的设备接口
export function getTyxDevice(query) {
return request({
url: '/pipe/pipe/selectPressureFlow',
method: 'get',
params: query
})
url: "/pipe/pipe/selectPressureFlow",
method: "get",
params: query,
});
}
// 是阀门
export function getFm(query) {
return request({
url: '/pipe/pipe/selectvalveData',
method: 'get',
params: query
})
url: "/pipe/pipe/selectvalveData",
method: "get",
params: query,
});
}
// 阀门下面的设备接口
export function getFmDevice(query) {
return request({
url: '/pipe/pipe/selectPressureFlow',
method: 'get',
params: query
})
url: "/pipe/pipe/selectPressureFlow",
method: "get",
params: query,
});
}
// 厂站
export function getCz(query) {
return request({
url: '/pipe/pipe/selectTSiteStationInfoData',
method: 'get',
params: query
})
url: "/pipe/pipe/selectTSiteStationInfoData",
method: "get",
params: query,
});
}
// 场站下的设备
export function getCzDevice(query) {
return request({
url: '/pipe/pipe/selecttSiteStationInfoData',
method: 'get',
params: query
})
url: "/pipe/pipe/selecttSiteStationInfoData",
method: "get",
params: query,
});
}
// 设备id ：devId 类型 relationDeviceType 1调压箱/阀门井 2场站
export function getTcqDevice(query) {
return request({
url: '/pipe/pipe/selectSensingDevice',
method: 'get',
url: "/pipe/pipe/selectSensingDevice",
method: "get",
params: {
pageNum: 1,
pageSize: 20,
...query,
},
})
});
}
// 液化气
export function getYhq(query) {
return request({
url: '/system/yehuaqiUser/allList',
method: 'get',
params: query
})
url: "/system/yehuaqiUser/allList",
method: "get",
params: query,
});
}
export function getyhqUser(query) {
return request({
url: '/system/yehuaqiDevice/list',
method: 'get',
params: query
})
url: "/system/yehuaqiDevice/list",
method: "get",
params: query,
});
}
export function deviceUser() {
return request({
url: '/system/deviceUser/allListbyTownship',
method: 'get',
})
url: "/system/deviceUser/allListbyTownship",
method: "get",
});
}
export function deviceUserList(query) {
return request({
url: '/system/deviceUser/list',
method: 'get',
params: query
})
url: "/system/deviceUser/list",
method: "get",
params: query,
});
}
// 监控
export function getVideo(query) {
return request({
url: '/pipe/pipe/selectTvideoManagerData',
method: 'get',
params: query
})
url: "/pipe/pipe/selectTvideoManagerData",
method: "get",
params: query,
});
}
// 燃气用户接口
export function getUser(query) {
return request({
url: '/pipe/pipe/selectTdetectorUser',
method: 'get',
params: query
})
url: "/pipe/pipe/selectTdetectorUser",
method: "get",
params: query,
});
}
// 企业接口
export function getEnterprise(query) {
return request({
url: '/regulation/info/enterpriseInfoList',
method: 'get',
params: query
})
url: "/regulation/info/enterpriseInfoList",
method: "get",
params: query,
});
}
// 获取公司名称以及id
export function getCompany(query) {
return request({
url: '/pipe/pipe/selectTenterpriseInfoData',
method: 'get',
params: query
})
url: "/pipe/pipe/selectTenterpriseInfoData",
method: "get",
params: query,
});
}
// 报警
export function userAlarm(query) {
return request({
url: '/supervise/user/getDetectorUserAlarmList',
method: 'get',
params: query
})
url: "/supervise/user/getDetectorUserAlarmList",
method: "get",
params: query,
});
}
// 搜索设备
export function searchDevice(query) {
return request({
url: "/device/device/queryBasicInforByNameForBigWindows",
method: "get",
params: query,
});
}
export function searchDeviceDetail(query) {
return request({
url: "/device/device/queryBasicInforByTypeAndIdForBigWindows",
method: "get",
params: query,
});
}
zh-baseversion-web/src/assets/styles/all.scss
View file @ 7132ffda
......@@ -7,48 +7,63 @@
.pt5 {
padding-top: 5px;
}
.pr5 {
padding-right: 5px;
}
.pb5 {
padding-bottom: 5px;
}
.mt5 {
margin-top: 5px;
}
.mr5 {
margin-right: 5px;
}
.mb5 {
margin-bottom: 5px;
}
.mb8 {
margin-bottom: 8px;
}
.ml5 {
margin-left: 5px;
}
.mt10 {
margin-top: 10px;
}
.mr10 {
margin-right: 10px;
}
.mb10 {
margin-bottom: 10px;
}
.ml0 {
margin-left: 10px;
}
.mt20 {
margin-top: 20px;
}
.mr20 {
margin-right: 20px;
}
.mb20 {
margin-bottom: 20px;
}
.m20 {
margin-left: 20px;
}
......@@ -56,12 +71,16 @@
.el-dialog:not(.is-fullscreen) {
margin-top: 6vh !important;
}
.el-dialog__header {
border-bottom: 1px solid #cccccc;
}
.bigwindow {
// 全局表格样式
.el-table {
.el-table__header-wrapper,
.el-table__fixed-header-wrapper {
th {
......@@ -72,9 +91,11 @@
font-size: 13px;
}
}
.el-table__body-wrapper {
.el-table__row:nth-child(2n + 1) {
background-color: #e6e6e6;
// &:hover {
// td {
// background-color: #f4f4f4;
......@@ -86,8 +107,10 @@
}
}
}
.el-table__row:nth-child(2n) {
background-color: #f4f4f4;
// &:hover {
// td {
// background-color: #e6e6e6;
......@@ -100,8 +123,9 @@
}
}
}
.el-table__body-wrapper {
.el-button [class*="el-icon-"] + span {
.el-button [class*="el-icon-"]+span {
margin-left: 1px;
}
}
......@@ -111,24 +135,30 @@
.drawer {
.el-button {
color: #ffffff;
&:not(.is-disabled):hover {
color: rgb(46, 231, 231);
}
&.is-disabled {
border-color: #ccccccc3 !important;
color: #ccccccc3;
}
}
}
.right-bottom-data-left {
.el-table {
background-color: rgb(11 22 37 / 0%) !important;
.el-table__body {
width: 100% !important;
}
&::before {
height: 0px !important;
}
td {
border-bottom: none !important;
}
......@@ -138,6 +168,7 @@
tr {
background-color: #213b52 !important;
}
th {
word-break: break-word;
background-color: #213b52 !important;
......@@ -145,17 +176,21 @@
height: 30px;
font-size: 13px;
padding: 0;
&.is-leaf {
border-bottom: none;
}
}
}
.el-table__body-wrapper {
.el-table__row:nth-child(2n + 1) {
background-color: rgb(11 22 37);
&:hover td {
background-color: #7bf8f430 !important;
}
td {
.cell {
// color: #525252;
......@@ -163,11 +198,14 @@
}
}
}
.el-table__row:nth-child(2n) {
background-color: #213b52;
&:hover td {
background-color: #7bf8f430 !important;
}
td {
.cell {
color: #fff;
......@@ -175,12 +213,14 @@
}
}
}
.el-table__body-wrapper {
.el-button [class*="el-icon-"] + span {
.el-button [class*="el-icon-"]+span {
// margin-left: 1px;
}
}
}
// 滚动条样式
.el-table--scrollable-y {
.el-table__body-wrapper {
......@@ -190,6 +230,7 @@
position: absolute;
top: 0;
}
&::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
// border-radius: 10px;
......@@ -197,6 +238,7 @@
background: #00000052;
border-radius: 8px;
}
&::-webkit-scrollbar-track {
/*滚动条里面轨道*/
// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
......@@ -207,6 +249,7 @@
&::-webkit-scrollbar-button:start {
// overflow: hidden;
}
&::-webkit-scrollbar-button:end {
// overflow: hidden;
}
......@@ -215,6 +258,7 @@
}
}
}
// gis地图右上角的滚动条隐藏
.rightPic {
.el-table {
......@@ -224,40 +268,49 @@
}
}
}
.videoView {
.el-dialog__body {
padding: 0;
}
}
// center下的分页
.myCenter {
.el-pagination {
button:disabled {
background-color: rgba(0, 0, 0, 0);
}
.el-pager li {
background-color: rgba(0, 0, 0, 0);
color: #fff;
cursor: pointer;
&.active {
color: #1890ff;
}
&:hover {
color: #7bf8f4;
}
}
.btn-prev,
.el-pagination .btn-next {
background-color: rgba(0, 0, 0, 0);
}
}
.el-pagination .btn-prev,
.el-pagination .btn-next {
background-color: rgba(0, 0, 0, 0);
}
// 禁用状态的左箭头
button[disabled] {
&:hover {
.el-icon-arrow-left,
.el-icon-arrow-right {
&::before {
......@@ -265,6 +318,7 @@
}
}
}
.el-icon-arrow-left,
.el-icon-arrow-right {
&::before {
......@@ -272,8 +326,10 @@
}
}
}
button {
&:hover {
.el-icon-arrow-left,
.el-icon-arrow-right {
&::before {
......@@ -282,6 +338,7 @@
}
}
}
// 平常状态下的
.el-icon-arrow-left,
.el-icon-arrow-right {
......@@ -289,15 +346,18 @@
color: #ffffff;
}
}
.el-pagination__jump {
color: #fff;
}
.el-input__inner {
background-color: rgba(0, 0, 0, 0);
border-color: #1890ff;
color: #fff;
}
}
// gis地图里抽屉的搜索样式
.search-input {
.el-input__inner {
......@@ -306,12 +366,14 @@
outline: #053b6a;
background: none !important;
color: #fff;
&:focus {
// outline: #053b6a;
border-color: #fff;
}
}
}
/** 表单布局 **/
.form-header {
font-size: 15px;
......@@ -349,11 +411,11 @@
width: inherit;
}
.el-tree-node__content > .el-checkbox {
.el-tree-node__content>.el-checkbox {
margin-right: 8px;
}
.list-group-striped > .list-group-item {
.list-group-striped>.list-group-item {
border-left: 0;
border-right: 0;
border-radius: 0;
......@@ -475,12 +537,14 @@
position: relative;
float: right;
}
// 上传按钮
.hide {
.el-upload--picture-card {
display: none;
}
}
// 所有的提示框标题
.el-dialog__header {
padding-bottom: 0;
......@@ -488,22 +552,25 @@
height: 51px;
line-height: 50px;
background-color: #053b6a;
.el-dialog__title {
display: inline-block;
margin-left: 22px;
color: #fff;
}
.el-dialog__headerbtn {
i {
color: #fff;
}
}
// background-color: ;
}
// gis地图内的bottom列表，如果隐藏在出现会有一个bug，这样可以解决
.b {
& > .el-bottom {
&>.el-bottom {
.el-table__body-wrapper {
height: 140px !important;
}
......@@ -526,9 +593,11 @@
}
}
}
// 设备巡检详情页表格样式
.inspectiondetail {
.el-table {
.el-table__header-wrapper,
.el-table__fixed-header-wrapper {
th {
......@@ -539,9 +608,11 @@
font-size: 14px;
}
}
.el-table__body-wrapper {
.el-table__row:nth-child(2n + 1) {
background-color: #e6e6e6;
// &:hover {
// td {
// background-color: #f4f4f4;
......@@ -553,8 +624,10 @@
}
}
}
.el-table__row:nth-child(2n) {
background-color: #f4f4f4;
// &:hover {
// td {
// background-color: #e6e6e6;
......@@ -567,8 +640,9 @@
}
}
}
.el-table__body-wrapper {
.el-button [class*="el-icon-"] + span {
.el-button [class*="el-icon-"]+span {
margin-left: 1px;
}
}
......@@ -590,6 +664,7 @@
// position: absolute;
// top: 0;
}
&::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
// border-radius: 10px;
......@@ -598,6 +673,7 @@
border-radius: 8px;
}
&::-webkit-scrollbar-track {
/*滚动条里面轨道*/
// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
......@@ -608,6 +684,7 @@
&::-webkit-scrollbar-button:start {
// overflow: hidden;
}
&::-webkit-scrollbar-button:end {
// overflow: hidden;
}
......@@ -620,6 +697,7 @@
.map-bottom-wrapper {
.el-table {
.el-table__body-wrapper {
// 滚动条样式
&::-webkit-scrollbar {
width: 10px;
......@@ -628,6 +706,7 @@
// position: absolute;
// top: 0;
}
&::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
// border-radius: 10px;
......@@ -636,6 +715,7 @@
border-radius: 8px;
}
&::-webkit-scrollbar-track {
/*滚动条里面轨道*/
// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
......@@ -646,42 +726,51 @@
&::-webkit-scrollbar-button:start {
overflow: hidden;
}
&::-webkit-scrollbar-button:end {
overflow: hidden;
}
}
}
.el-table::before {
height: 0px;
}
.el-table__fixed::before {
height: 0px;
}
.el-table__header {
tr th {
background-color: rgba(24, 144, 255, 0.1);
&.gutter {
display: none;
}
}
}
.el-table__row {
td {
padding: 0 !important;
}
}
}
// map里的label
.amap-info {
position: fixed !important;
z-index: 999 !important;
}
.amap-marker-label {
background-color: rgba(9, 18, 32, 0.6) !important;
color: #fff !important;
border: none !important;
padding: 10px;
}
.left {
.el-table__body-wrapper {
overflow-x: hidden !important;
......@@ -697,6 +786,7 @@
margin-bottom: 25px;
margin-right: 25px;
}
.el-icon-chat-dot-round {
font-family: "element-icons" !important;
speak: none;
......@@ -715,18 +805,22 @@
color: #5a5e66;
-moz-osx-font-smoothing: grayscale;
}
.el-badge__content.is-fixed {
top: 15px !important;
right: -5px !important;
}
.el-badge__content {
padding: 0 2px !important;
}
//去除高德logo
.amap-logo {
display: none;
opacity: 0 !important;
}
.amap-copyright {
opacity: 0;
}
......@@ -740,9 +834,10 @@
text-overflow: ellipsis;
white-space: nowrap;
}
.echarts-tooltip{
.echarts-tooltip {
background-color: transparent !important;
box-shadow:none !important;
box-shadow: none !important;
// pointer-events:auto !important;
// top:-30px !important;
}
......@@ -750,3 +845,35 @@
.gdt {
&::-webkit-scrollbar {
width: 10px;
background: #012a53;
position: absolute;
top: 0;
}
&::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
// border-radius: 10px;
// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #00000052;
border-radius: 8px;
}
&::-webkit-scrollbar-track {
/*滚动条里面轨道*/
// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
// border-radius: 10px;
// background-color: red;
}
&::-webkit-scrollbar-button:start {
// overflow: hidden;
}
&::-webkit-scrollbar-button:end {
// overflow: hidden;
}
}
\ No newline at end of file
zh-baseversion-web/src/assets/styles/transition.scss
View file @ 7132ffda
......@@ -40,9 +40,22 @@
}
.breadcrumb-move {
transition: all .5s;
transition: all .1s;
}
.breadcrumb-leave-active {
position: absolute;
}
/* .fadeBottom */
.fadeBottom-enter-active,
.fadeBottom-leave-active {
transition: opacity 0.5s;
}
.fadeBottom-enter,
.fadeBottom-leave-active {
opacity: 0;
}
zh-baseversion-web/src/utils/mapClass/config.js
View file @ 7132ffda
/*
* @Author: your name
* @Date: 2022-01-26 10:47:44
* @LastEditTime: 2022-04-14 15:38:29
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-07-18 17:36:58
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/utils/config.js
*/
......@@ -27,12 +27,16 @@ export const alarmtime = 10000;
export const svgUrl = {
// bigwindow页面的设备
2: require("@/assets/firstimage/tiaoyaxiang.svg"),
3: require("@/assets/firstimage/famen.svg"),
4: require("@/assets/firstimage/changzhan.svg"),
5: require("@/assets/firstimage/jiankong.svg"),
6: require("@/assets/firstimage/user.svg"),
61: require("@/assets/firstimage/user1.svg"),
2: require("@/assets/firstimage/device/tyx.png"),
3: require("@/assets/firstimage/device/fmj.png"),
4: require("@/assets/firstimage/device/cz.png"),
5: require("@/assets/firstimage/device/video.png"),
//居民用户
6: require("@/assets/firstimage/device/jmUser.png"),
// 商业用户
61:require("@/assets/firstimage/device/syUser.png"),
7: require("@/assets/image/zrxk.svg"),
8: require("@/assets/image/zcrq.svg"),
......@@ -51,7 +55,8 @@ export const svgUrl = {
16: require("@/assets/image/yj-xj.png"),
//煤气罐罐 运行监测 气瓶回溯
17: require("@/assets/mapinages/meiqiguan.svg"),
18: require("@/assets/firstimage/yehuaqi.svg"),
// 液化气用户
18: require("@/assets/firstimage/device/yhqUser.png"),
// 巡检巡查
98: require("@/assets/image-xjxc/start.svg"),
......
zh-baseversion-web/src/utils/mapClass/map.js
View file @ 7132ffda
/*
* @Author: your name
* @Date: 2022-01-11 13:45:12
* @LastEditTime: 2023-07-19 18:02:31
* @LastEditTime: 2024-07-18 17:07:55
* @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
......@@ -64,12 +64,15 @@ export class EditorMap {
//餐饮单位液化气用户
deviceUserlableLayer = null;
// 通过搜索出来的设备，用它存
searchDevice = null;
selarr = [];
constructor(contaienr, config = {}, vue) {
this.map = new AMap.Map(contaienr, {
viewMode: "3D",
center: [114.684979,38.038292],
center: [114.684979, 38.038292],
layers: [AMap.createDefaultLayer()], // layers 字段为空或者不赋值将会自动创建默认底图。
zoom: 14,
zooms: [3, 20],
......@@ -224,7 +227,7 @@ export class EditorMap {
}
}
});
this.map.on("movestart",()=>{
this.map.on("movestart", () => {
console.log("地图开始移动");
//居民用户
......@@ -282,7 +285,7 @@ export class EditorMap {
this.deviceUserlableLayer.hide();
}
}
})
});
// this.map.on('zoomchange', () => {
// //获取当前最新的地图层级
// let Zoom = this.map.getZoom()
......@@ -459,7 +462,7 @@ export class EditorMap {
icon,
position: [lng, lat],
extData: deviceData,
alwaysRender: false
alwaysRender: false,
// label:{
// content:123,
// direction:"top",
......@@ -578,7 +581,7 @@ export class EditorMap {
// return new AMap.MarkerClusterer(MarkerOptions);
}
filterSelectPipe(id,mediumComponent,lng, lat) {
filterSelectPipe(id, mediumComponent, lng, lat) {
this.pipeArr[6].forEach((pipe) => {
const deviceExtData = pipe.getExtData();
if (deviceExtData.pipeId === id) {
......@@ -606,76 +609,86 @@ export class EditorMap {
});
this.infowindow.open(this.map);
}
})
});
}
/**
/**
* 地图上添加 餐饮单位液化气用户 海量标注 LabelMarker 方式
* @param {*} detectorUserData
* @param {*} compontent
* @param {*} showBool
*/
labelsLayerMarksDeviceUserGoMap(mapData,compontent,showBool = true){
if(mapData != null) {
const hashMap = new Map();
this.deviceUserlableLayer = new AMap.LabelsLayer({
zooms: [3, 20],
zIndex: 1000,
collision: true, //该层内标注是否避让
allowCollision: false, //不同标注层之间是否避让
});
//设置一个图标对象
const icon = {
type: "image", //图标类型，现阶段只支持 image 类型
image: svgUrl[18], //可访问的图片 URL
size: [44, 49], //图片尺寸
anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
labelsLayerMarksDeviceUserGoMap(mapData, compontent, showBool = true) {
if (mapData != null) {
const hashMap = new Map();
this.deviceUserlableLayer = new AMap.LabelsLayer({
zooms: [3, 20],
zIndex: 1000,
collision: true, //该层内标注是否避让
allowCollision: false, //不同标注层之间是否避让
});
//设置一个图标对象
const icon = {
type: "image", //图标类型，现阶段只支持 image 类型
image: svgUrl[18], //可访问的图片 URL
size: [44, 49], //图片尺寸
anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
};
var markers = [];
mapData.forEach((item) => {
let longitude = item.longitude;
let latitude = item.latitude;
var userId = item.userId;
icon.userId = userId;
var curData = {
position: [longitude, latitude],
icon: icon,
rank: 1, //避让优先级
};
var markers = [];
mapData.forEach(item => {
let longitude = item.longitude;
let latitude = item.latitude;
var userId = item.userId;
icon.userId = userId;
var curData = {
position: [longitude, latitude],
icon: icon,
rank: 1, //避让优先级
};
hashMap.set(JSON.stringify(userId),item);
//创建 LabelMarker
const labelMarker = new AMap.LabelMarker(curData);
// var marker = new AMap.Marker(curData);
markers.push(labelMarker);
labelMarker.on("click", (e) => {
var opts = JSON.stringify(e.data.opts);
var optsObj = JSON.parse(opts);
var userId = JSON.stringify(optsObj.icon.userId);
var extData = hashMap.get(userId);
// 如果control==0就是默认值，没有使用123功能，就显示infowindow
this.massMarksMarkerClick(extData, compontent);
});
});
hashMap.set(JSON.stringify(userId), item);
//创建 LabelMarker
const labelMarker = new AMap.LabelMarker(curData);
// var marker = new AMap.Marker(curData);
markers.push(labelMarker);
this.deviceUserlableLayer.add(markers);
this.map.add(this.deviceUserlableLayer)
if (!showBool) {
this.deviceUserlableLayer.hide();
labelMarker.on("click", (e) => {
var opts = JSON.stringify(e.data.opts);
var optsObj = JSON.parse(opts);
var userId = JSON.stringify(optsObj.icon.userId);
var extData = hashMap.get(userId);
// 如果control==0就是默认值，没有使用123功能，就显示infowindow
this.massMarksMarkerClick(extData, compontent);
});
if (item.companyType) {
labelMarker.filterData = {
companyType: item.companyType,
iconType: item.iconType,
};
const iconType = item.iconType;
if (!Array.isArray(this.allDevice[iconType])) {
this.allDevice[iconType] = [];
}
this.allDevice[iconType].push(labelMarker);
}
});
this.deviceUserlableLayer.add(markers);
this.map.add(this.deviceUserlableLayer);
if (!showBool) {
this.deviceUserlableLayer.hide();
}
}
}
/**
* 地图上添加监控 海量标注 LabelMarker 方式
* @param {*} detectorUserData
* @param {*} compontent
* @param {*} showBool
*/
labelsLayerMarksVideoGoMap(mapData,compontent,showBool = true){
if(mapData != null) {
labelsLayerMarksVideoGoMap(mapData, compontent, showBool = true) {
if (mapData != null) {
const hashMap = new Map();
this.videolabelLayer = new AMap.LabelsLayer({
zooms: [3, 20],
......@@ -683,7 +696,7 @@ export class EditorMap {
collision: true, //该层内标注是否避让
allowCollision: false, //不同标注层之间是否避让
});
//设置一个图标对象
//设置一个图标对象
const icon = {
type: "image", //图标类型，现阶段只支持 image 类型
image: svgUrl[5], //可访问的图片 URL
......@@ -692,18 +705,18 @@ export class EditorMap {
};
var markers = [];
mapData.forEach(item => {
let longitude = item.longitude;
mapData.forEach((item) => {
let longitude = item.longitude;
let latitude = item.latitude;
var userId = item.userId;
icon.userId = userId;
var curData = {
position: [longitude, latitude],
icon: icon,
rank: 1, //避让优先级
position: [longitude, latitude],
icon: icon,
rank: 1, //避让优先级
};
hashMap.set(JSON.stringify(userId),item);
hashMap.set(JSON.stringify(userId), item);
//创建 LabelMarker
const labelMarker = new AMap.LabelMarker(curData);
// var marker = new AMap.Marker(curData);
......@@ -717,10 +730,21 @@ export class EditorMap {
// 如果control==0就是默认值，没有使用123功能，就显示infowindow
this.massMarksMarkerClick(extData, compontent);
});
if (item.companyType) {
labelMarker.filterData = {
companyType: item.companyType,
iconType: item.iconType,
};
const iconType = item.iconType;
if (!Array.isArray(this.allDevice[iconType])) {
this.allDevice[iconType] = [];
}
this.allDevice[iconType].push(labelMarker);
}
});
this.videolabelLayer.add(markers);
this.map.add(this.videolabelLayer)
this.map.add(this.videolabelLayer);
if (!showBool) {
this.videolabelLayer.hide();
}
......@@ -732,9 +756,8 @@ export class EditorMap {
* @param {*} compontent
* @param {*} showBool
*/
labelsLayerMarksCzGoMap(mapData,compontent,showBool = true){
if(mapData != null) {
labelsLayerMarksCzGoMap(mapData, compontent, showBool = true) {
if (mapData != null) {
const hashMap = new Map();
this.czlabelLayer = new AMap.LabelsLayer({
zooms: [3, 20],
......@@ -742,7 +765,7 @@ export class EditorMap {
collision: true, //该层内标注是否避让
allowCollision: false, //不同标注层之间是否避让
});
//设置一个图标对象
//设置一个图标对象
const icon = {
type: "image", //图标类型，现阶段只支持 image 类型
image: svgUrl[4], //可访问的图片 URL
......@@ -751,18 +774,18 @@ export class EditorMap {
};
var markers = [];
mapData.forEach(item => {
let longitude = item.longitude;
mapData.forEach((item) => {
let longitude = item.longitude;
let latitude = item.latitude;
var userId = item.userId;
icon.userId = userId;
var curData = {
position: [longitude, latitude],
icon: icon,
rank: 1, //避让优先级
position: [longitude, latitude],
icon: icon,
rank: 1, //避让优先级
};
hashMap.set(JSON.stringify(userId),item);
hashMap.set(JSON.stringify(userId), item);
//创建 LabelMarker
const labelMarker = new AMap.LabelMarker(curData);
// var marker = new AMap.Marker(curData);
......@@ -776,10 +799,22 @@ export class EditorMap {
// 如果control==0就是默认值，没有使用123功能，就显示infowindow
this.massMarksMarkerClick(extData, compontent);
});
if (item.companyType) {
labelMarker.filterData = {
companyType: item.companyType,
iconType: item.iconType,
};
const iconType = item.iconType;
if (!Array.isArray(this.allDevice[iconType])) {
this.allDevice[iconType] = [];
}
this.allDevice[iconType].push(labelMarker);
}
});
this.czlabelLayer.add(markers);
this.map.add(this.czlabelLayer)
this.map.add(this.czlabelLayer);
if (!showBool) {
this.czlabelLayer.hide();
}
......@@ -791,9 +826,8 @@ export class EditorMap {
* @param {*} compontent
* @param {*} showBool
*/
labelsLayerMarksFmjGoMap(mapData,compontent,showBool = true){
if(mapData != null) {
labelsLayerMarksFmjGoMap(mapData, compontent, showBool = true) {
if (mapData != null) {
const hashMap = new Map();
this.fmjlabelLayer = new AMap.LabelsLayer({
zooms: [3, 20],
......@@ -801,7 +835,7 @@ export class EditorMap {
collision: true, //该层内标注是否避让
allowCollision: false, //不同标注层之间是否避让
});
//设置一个图标对象
//设置一个图标对象
const icon = {
type: "image", //图标类型，现阶段只支持 image 类型
image: svgUrl[3], //可访问的图片 URL
......@@ -810,18 +844,18 @@ export class EditorMap {
};
var markers = [];
mapData.forEach(item => {
let longitude = item.longitude;
mapData.forEach((item) => {
let longitude = item.longitude;
let latitude = item.latitude;
var userId = item.userId;
icon.userId = userId;
var curData = {
position: [longitude, latitude],
icon: icon,
rank: 1, //避让优先级
position: [longitude, latitude],
icon: icon,
rank: 1, //避让优先级
};
hashMap.set(JSON.stringify(userId),item);
hashMap.set(JSON.stringify(userId), item);
//创建 LabelMarker
const labelMarker = new AMap.LabelMarker(curData);
// var marker = new AMap.Marker(curData);
......@@ -835,10 +869,21 @@ export class EditorMap {
// 如果control==0就是默认值，没有使用123功能，就显示infowindow
this.massMarksMarkerClick(extData, compontent);
});
if (item.companyType) {
labelMarker.filterData = {
companyType: item.companyType,
iconType: item.iconType,
};
const iconType = item.iconType;
if (!Array.isArray(this.allDevice[iconType])) {
this.allDevice[iconType] = [];
}
this.allDevice[iconType].push(labelMarker);
}
});
this.fmjlabelLayer.add(markers);
this.map.add(this.fmjlabelLayer)
this.map.add(this.fmjlabelLayer);
if (!showBool) {
this.fmjlabelLayer.hide();
}
......@@ -850,8 +895,8 @@ export class EditorMap {
* @param {*} compontent
* @param {*} showBool
*/
labelsLayerMarksTysGoMap(mapData,compontent,showBool = true){
if(mapData != null) {
labelsLayerMarksTysGoMap(mapData, compontent, showBool = true) {
if (mapData != null) {
const hashMap = new Map();
this.tyxlabelsLayer = new AMap.LabelsLayer({
zooms: [3, 20],
......@@ -859,7 +904,7 @@ export class EditorMap {
collision: true, //该层内标注是否避让
allowCollision: false, //不同标注层之间是否避让
});
//设置一个图标对象
//设置一个图标对象
const icon = {
type: "image", //图标类型，现阶段只支持 image 类型
image: svgUrl[2], //可访问的图片 URL
......@@ -868,18 +913,18 @@ export class EditorMap {
};
var markers = [];
mapData.forEach(item => {
let longitude = item.longitude;
mapData.forEach((item) => {
let longitude = item.longitude;
let latitude = item.latitude;
var userId = item.userId;
icon.userId = userId;
var curData = {
position: [longitude, latitude],
icon: icon,
rank: 1, //避让优先级
position: [longitude, latitude],
icon: icon,
rank: 1, //避让优先级
};
hashMap.set(JSON.stringify(userId),item);
hashMap.set(JSON.stringify(userId), item);
//创建 LabelMarker
const labelMarker = new AMap.LabelMarker(curData);
// var marker = new AMap.Marker(curData);
......@@ -893,10 +938,21 @@ export class EditorMap {
// 如果control==0就是默认值，没有使用123功能，就显示infowindow
this.massMarksMarkerClick(extData, compontent);
});
if (item.companyType) {
labelMarker.filterData = {
companyType: item.companyType,
iconType: item.iconType,
};
const iconType = item.iconType;
if (!Array.isArray(this.allDevice[iconType])) {
this.allDevice[iconType] = [];
}
this.allDevice[iconType].push(labelMarker);
}
});
this.tyxlabelsLayer.add(markers);
this.map.add(this.tyxlabelsLayer)
this.map.add(this.tyxlabelsLayer);
if (!showBool) {
this.tyxlabelsLayer.hide();
}
......@@ -909,25 +965,22 @@ export class EditorMap {
* @param {*} component
* @param {*} showBool
*/
labelsLayerMarksDetectorUserList(mapData,compontent,showBool = true){
if(mapData !== null && mapData !== undefined) {
labelsLayerMarksDetectorUserList(mapData, compontent, showBool = true) {
if (mapData !== null && mapData !== undefined) {
const hashMap = new Map();
for(var key in mapData){
for (var key in mapData) {
var value = mapData[key];
var jsonValue = JSON.stringify(value);
var jsonValueArr = JSON.parse(jsonValue);
//居民用户
if (key === "6") {
this.detectorUserlabelsLayer = new AMap.LabelsLayer({
zooms: [3, 20],
zIndex: 1000,
collision: true, //该层内标注是否避让
allowCollision: false, //不同标注层之间是否避让
});
//设置一个图标对象
//设置一个图标对象
const icon = {
type: "image", //图标类型，现阶段只支持 image 类型
image: svgUrl[6], //可访问的图片 URL
......@@ -936,19 +989,19 @@ export class EditorMap {
};
var markers = [];
if(jsonValueArr !== null && jsonValueArr !== undefined) {
jsonValueArr.forEach(item => {
let longitude = item.longitude;
if (jsonValueArr !== null && jsonValueArr !== undefined) {
jsonValueArr.forEach((item) => {
let longitude = item.longitude;
let latitude = item.latitude;
var userId = item.userId;
icon.userId = userId;
var curData = {
position: [longitude, latitude],
icon: icon,
rank: 1, //避让优先级
position: [longitude, latitude],
icon: icon,
rank: 1, //避让优先级
};
hashMap.set(JSON.stringify(userId),item);
hashMap.set(JSON.stringify(userId), item);
//创建 LabelMarker
const labelMarker = new AMap.LabelMarker(curData);
// var marker = new AMap.Marker(curData);
......@@ -962,15 +1015,26 @@ export class EditorMap {
// 如果control==0就是默认值，没有使用123功能，就显示infowindow
this.massMarksMarkerClick(extData, compontent);
});
if (item.companyType) {
labelMarker.filterData = {
companyType: item.companyType,
iconType: item.iconType,
};
const iconType = item.iconType;
if (!Array.isArray(this.allDevice[iconType])) {
this.allDevice[iconType] = [];
}
this.allDevice[iconType].push(labelMarker);
}
});
}
this.detectorUserlabelsLayer.add(markers);
this.map.add(this.detectorUserlabelsLayer)
this.map.add(this.detectorUserlabelsLayer);
if (!showBool) {
this.detectorUserlabelsLayer.hide();
}
//商业用户
//商业用户
} else if (key === "61") {
this.businessDetectorUserlabelsLayer = new AMap.LabelsLayer({
zooms: [3, 20],
......@@ -978,7 +1042,7 @@ export class EditorMap {
collision: true, //该层内标注是否避让
allowCollision: false, //不同标注层之间是否避让
});
//设置一个图标对象
//设置一个图标对象
const icon = {
type: "image", //图标类型，现阶段只支持 image 类型
image: svgUrl[61], //可访问的图片 URL
......@@ -987,19 +1051,19 @@ export class EditorMap {
};
var markers = [];
if(jsonValueArr !== null && jsonValueArr !== undefined) {
jsonValueArr.forEach(item => {
let longitude = item.longitude;
if (jsonValueArr !== null && jsonValueArr !== undefined) {
jsonValueArr.forEach((item) => {
let longitude = item.longitude;
let latitude = item.latitude;
var userId = item.userId;
icon.userId = userId;
var curData = {
position: [longitude, latitude],
icon: icon,
rank: 2, //避让优先级
position: [longitude, latitude],
icon: icon,
rank: 2, //避让优先级
};
hashMap.set(JSON.stringify(userId),item);
hashMap.set(JSON.stringify(userId), item);
//创建 LabelMarker
const labelMarker = new AMap.LabelMarker(curData);
// var marker = new AMap.Marker(curData);
......@@ -1013,11 +1077,23 @@ export class EditorMap {
// 如果control==0就是默认值，没有使用123功能，就显示infowindow
this.massMarksMarkerClick(extData, compontent);
});
if (item.companyType) {
labelMarker.filterData = {
companyType: item.companyType,
iconType: item.iconType,
};
const iconType = item.iconType;
if (!Array.isArray(this.allDevice[iconType])) {
this.allDevice[iconType] = [];
}
this.allDevice[iconType].push(labelMarker);
}
});
}
this.businessDetectorUserlabelsLayer.add(markers);
this.map.add(this.businessDetectorUserlabelsLayer)
this.map.add(this.businessDetectorUserlabelsLayer);
if (!showBool) {
this.businessDetectorUserlabelsLayer.hide();
}
......@@ -1031,34 +1107,38 @@ export class EditorMap {
* @param {*} component
* @param {*} showBool
*/
addMassMarksDetectorUserGoMap(mapData,compontent,showBool = true){
if(mapData !== null && mapData !== undefined) {
addMassMarksDetectorUserGoMap(mapData, compontent, showBool = true) {
if (mapData !== null && mapData !== undefined) {
var style;
for(var key in mapData){
for (var key in mapData) {
var value = mapData[key];
var jsonValue = JSON.stringify(value);
var jsonValueArr = JSON.parse(jsonValue);
if ("6" === key) {
style = [{
url: svgUrl[6],
anchor: new AMap.Pixel(3, 3),
size: new AMap.Size(11, 11),
zIndex: 3,
}]
style = [
{
url: svgUrl[6],
anchor: new AMap.Pixel(3, 3),
size: new AMap.Size(11, 11),
zIndex: 3,
},
];
} else if ("61" === key) {
style = [{
url: svgUrl[6],
anchor: new AMap.Pixel(3, 3),
size: new AMap.Size(11, 11),
zIndex: 3,
}]
style = [
{
url: svgUrl[6],
anchor: new AMap.Pixel(3, 3),
size: new AMap.Size(11, 11),
zIndex: 3,
},
];
}
var mass = new AMap.MassMarks(jsonValueArr, {
opacity: 0.8,
zIndex: 111,
cursor: 'pointer',
style: style
cursor: "pointer",
style: style,
});
//先一启动，直接显示
......@@ -1095,7 +1175,7 @@ export class EditorMap {
// var lat = lnglatArray[1];
// var detectorUserVO = {"userId":159843,"iconType":null,"userStatus":null,"nickName":"曾宪成","userType":"2","detectorCountList":[{"userId":159843,"iconType":null,"userStatus":null,"nickName":"曾宪成","userType":"2","detectorCountList":null,"detectorType":"工业探测器","detectorCount":1,"onLineNum":1,"offLineNum":0,"historyAlarmNum":0,"cancelAlarmNum":0,"processingAlarmNum":0,"address":"河北省-廊坊市-三河市-泃阳镇老厨小吃","longitude":117.06009,"latitude":39.991257,"linkman":"曾宪成","phone":"13172132000","email":null}],"detectorType":"工业探测器","detectorCount":1,"onLineNum":1,"offLineNum":0,"historyAlarmNum":0,"cancelAlarmNum":0,"processingAlarmNum":0,"address":"河北省-廊坊市-三河市-泃阳镇老厨小吃","longitude":117.06009,"latitude":39.991257,"linkman":"曾宪成","phone":"13172132000","email":null}
let lng = data.longitude;
let lng = data.longitude;
let lat = data.latitude;
// 创建一个可以控制的组件，将其dom插入infowindow
......@@ -1118,12 +1198,12 @@ export class EditorMap {
}
// 地图上add管道
addMediumPipeLine(objData, component,mediumConponent) {
const { path, pipePressure, iconType ,id} = objData;
addMediumPipeLine(objData, component, mediumConponent) {
const { path, pipePressure, iconType, id } = objData;
// 根据压力获取颜色
const color = pipeColor[pipePressure];
const pipe = this.createPipeLine({
id:id,
id: id,
path: eval(path),
strokeWeight: objData.strokeWeight || 2,
strokeColor: color,
......@@ -1137,12 +1217,12 @@ export class EditorMap {
this.pipeArr[iconType] = [];
}
this.pipeArr[iconType].push(pipe);
if (pipePressure == 1 ){
if (pipePressure == 1) {
this.pipeEvent(pipe, mediumConponent);
} else {
this.pipeEvent(pipe, component);
}
};
}
// 地图上add管道
addPipeLine(objData, component) {
const { path, pipePressure, iconType } = objData;
......@@ -1180,11 +1260,9 @@ export class EditorMap {
});
pipe.on("mouseout", (e) => {
if(this.infowindow) {
if (this.infowindow) {
var infowindowOptions = this.infowindow.getOptions();
if (infowindowOptions.visible){
if (infowindowOptions.visible) {
var pipeData = this.infowindowComponent.deviceData;
const target = e.target;
......@@ -1195,7 +1273,6 @@ export class EditorMap {
}
}
const target = e.target;
// 根据管道压力获取颜色
const { pipePressure } = target.getExtData();
......@@ -1290,9 +1367,11 @@ export class EditorMap {
}
});
}
console.log(this.allDevice);
for (let deviceItem in this.allDevice) {
this.allDevice[deviceItem].forEach((device) => {
const data = device.getExtData();
const data = device.filterData || device.getExtData();
console.log(data.iconType);
// 设备过滤受到bigwindow页面的的两种制约，companyArr, typeArr 两个数组制约显示隐藏
// 燃气没有公司，所以没有device.companyType不收到公司的控制
const companyHas = companyArr.indexOf(data.companyType + "") >= 0;
......@@ -1320,7 +1399,6 @@ export class EditorMap {
}
}
// 判断是否需要显示 商业用户
const businessDetectorUserHas = typeArr.indexOf(61) >= 0;
if (this.businessDetectorUserlabelsLayer != null) {
......@@ -1341,7 +1419,6 @@ export class EditorMap {
}
}
//判断是否需要显示 阀门井
const fmjHas = typeArr.indexOf(3) >= 0;
if (this.fmjlabelLayer != null) {
......@@ -1518,6 +1595,10 @@ export class EditorMap {
}
}
}
// 搜索设备或者管道上图
onlySearchDeviceOrLine(type, deviceOrLine) {}
// 轨迹回放
/**
* @description:
......
zh-baseversion-web/src/views/bigWindow/components/Bottom.vue
View file @ 7132ffda
......@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2024-07-15 10:26:41
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2024-07-16 17:27:41
* @LastEditTime: 2024-07-16 17:33:46
* @FilePath: /zh-baseversion-web/src/views/bigWindow/components/Bottom.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
......@@ -17,8 +17,8 @@
/>
</div>
<div class="container">
<transition name="fade" mode="out-in">
<div v-if="activeCom.label" class="children">
<transition name="fadeBottom" mode="out-in">
<div v-if="activeCom.label" class="children" @click.stop="">
<div
v-for="item in activeCom.children"
:key="item.value"
......@@ -331,6 +331,7 @@ export default {
// overflow: hidden;
}
.child {
transition: all 0.5s linear;
width: 275px;
height: 32px;
margin-bottom: 16px;
......
zh-baseversion-web/src/views/bigWindow/components/Top.vue 0 → 100644
View file @ 7132ffda
<template>
<!-- 设备按钮 -->
<div class="typelist-div" @click.stop="">
<div class="t flex" :class="{ show: searchShow }" @click.stop="">
<div class="device-btn-wrapper flex">
<div
class="list"
v-for="(item, index) in arr"
:key="index"
:class="selarr1.indexOf(item.val) >= 0 ? 'active' : ''"
@click.stop="sel1(index, item)"
>
<img
:src="item.imgurl"
style="margin-top: 2px; float: left; margin-right: 3px"
/>
{{ item.name }}
</div>
</div>
<div class="img-wrapper flex">
<img
@click.stop="searchChange"
:class="{ show: searchShow }"
class="active"
src="@/assets/firstimage/top-down.png"
alt=""
/>
</div>
<div class="search flex">
<div class="input-wrapper flex">
<input v-model="searchVal" type="text" />
</div>
<div @click.stop="searchClick" class="btn-wrapper">搜索</div>
</div>
<img src="@/assets/firstimage/index-top-line.png" class="bottom-line" />
</div>
<!-- <div class="b"> -->
<transition name="fadeBottom" mode="out-in">
<div
@click.stop=""
class="device-container gdt"
v-if="searchShow && searchItemShow"
>
<div
class="devie-item zzz"
v-for="item in searchList"
:key="item.id+''+item.type"
@click="deviceItemClick(item)"
>
<!-- {{ item.NAME }} -->
<div class="a">{{ devviceData[item.type] }}</div>
<div class="b">{{ item.NAME }}</div>
</div>
</div>
</transition>
<!-- </div> -->
</div>
</template>
<script>
import { searchDevice, searchDeviceDetail } from "@/api/bigWindow/getDevice.js";
export default {
name: "",
data() {
return {
selarr1: [],
searchShow: false,
searchItemShow: false,
searchVal: "",
searchList: [],
devviceData: {
1: "阀井 :",
2: "调压箱 :",
3: "场站 :",
4: "居民用户 :",
5: "商业用户 :",
6: "工业用户 :",
7: "监控 :",
8: "餐饮单位液化气用户 :",
9: "管道 :",
},
arr: [
{
val: 2,
ischeck: false,
imgurl: require("@/assets/firstimage/tiaoyaxiang.png"),
name: "调压箱",
},
{
val: 3,
ischeck: false,
imgurl: require("@/assets/firstimage/famen.png"),
name: "阀门井",
},
{
val: 4,
ischeck: false,
imgurl: require("@/assets/firstimage/changzhan.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: 5,
ischeck: false,
imgurl: require("@/assets/firstimage/jiankong.png"),
name: "监 控",
},
{
val: 18,
ischeck: false,
imgurl: require("@/assets/firstimage/yhq.png"),
name: "餐饮单位液化气用户",
},
],
};
},
methods: {
searchChange() {
this.searchShow = !this.searchShow;
// 如果关闭了搜索框，那么搜索联动数据框也要关闭
if (!this.searchShow) {
this.searchItemShow = false;
}
},
searchClick() {
this.searchItemShow = true;
searchDevice({ name: this.searchVal }).then((res) => {
if (res.code == 200) {
this.searchList = Object.values(res.data).flat();
console.log(this.searchList);
}
});
},
deviceItemClick(item) {
searchDeviceDetail({ type: item.type, id: item.id }).then((res) => {
if (res.code == 200) {
if (res.data.length == 0) return;
this.$emit("deviceSearchClick",item, res.data[0]);
}
console.log(res);
});
},
clearSearchContainer() {
this.searchItemShow = false;
},
sel1(index, item) {
const ind = this.selarr1.indexOf(item.val);
if (ind >= 0) {
this.selarr1.splice(ind, 1);
} else {
this.selarr1.push(item.val);
}
this.$emit("sel1", this.selarr1);
// this.map.allfilter(this.selarr, this.selarr1);
},
},
};
</script>
<style lang="scss" scoped>
.typelist-div {
transition: all 0.2s linear;
width: 800px;
// height: 96px;
// height: 56px;
z-index: 9999;
position: fixed;
top: 90px;
margin-left: calc((100% - 755px) / 2);
background: rgba(2, 41, 81, 0.25);
border: 1px solid #275275;
box-sizing: border-box;
padding-top: 10px;
transform: scale(1);
.t {
transition: all 0.2s linear;
height: 40px;
// background: blue;
position: relative;
overflow: hidden;
&.show {
height: 85px;
}
.list {
z-index: 9999;
float: left;
margin-left: 15px;
height: 28px;
// margin-bottom:10px;
color: #fff;
line-height: auto;
text-align: center;
/* background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b; */
font-size: 12px;
padding: 1px 10px;
cursor: pointer;
line-height: 26px;
background: rgba(31, 106, 215, 0.32);
box-sizing: border-box;
border: 1px solid #2d64b4;
border-radius: 2px;
}
.list.active {
/* background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b; */
// font-size: 12px;
// color: #00ffff;
// border: 1px solid #0f6ca1;
// box-shadow: inset 0px 0px 10px 1px #0f6ca1;
// background-size: 100% 100%;
// background-repeat: no-repeat;
background: linear-gradient(180deg, #ffb464 0%, #e96310 100%);
border-radius: 2px;
box-sizing: border-box;
border: 1px solid #ffa065;
}
.list img {
width: 20px;
height: 20px;
}
.device-btn-wrapper {
width: 755px;
margin-right: 5px;
flex-wrap: wrap;
}
.search {
width: 755px;
position: absolute;
top: 40px;
.input-wrapper {
background: #082337;
box-sizing: border-box;
border: 1px solid #1a498e;
margin-left: 15px;
margin-right: 12px;
box-sizing: border-box;
// width: 600px;
flex: 1;
height: 28px;
align-items: center;
input {
border: none;
background: none;
color: #fff;
width: 100%;
padding-left: 8px;
&:focus {
outline: none;
}
}
}
.btn-wrapper {
width: 50px;
height: 28px;
color: #fff;
text-align: center;
line-height: 28px;
background: linear-gradient(180deg, #19d6fe 0%, #1684e5 100%);
box-sizing: border-box;
border: 1px solid #72c1ff;
cursor: pointer;
&:hover {
opacity: 0.7;
}
}
}
.img-wrapper {
width: 28px;
height: 28px;
background: rgba(3, 39, 70, 0.8);
border: 1px solid #125c98;
margin-right: 10px;
align-items: center;
justify-content: center;
img {
width: 20px;
height: 12px;
transform: rotateZ(0deg);
transition: all 0.2s linear;
cursor: pointer;
&.show {
transform: rotateZ(180deg);
}
}
}
.bottom-line {
position: absolute;
right: 0;
bottom: 0;
width: 280px;
height: 1px;
// background: red;
}
}
.device-container {
width: 755px;
max-height: 400px;
position: absolute;
background: rgba(2, 41, 81, 0.7);
border: 1px solid #275275;
box-sizing: border-box;
top: 100px;
padding: 10px;
padding-bottom: 0;
overflow-y: auto;
.devie-item {
color: #fff;
margin-bottom: 10px;
height: 28px;
line-height: 28px;
cursor: pointer;
box-sizing: border-box;
padding: 0 2px;
display: flex;
.a {
width: 150px;
}
&:hover {
background: linear-gradient(180deg, #ffb464 0%, #e96310 100%);
}
}
}
}
</style>
zh-baseversion-web/src/views/bigWindow/index.vue
View file @ 7132ffda
<!--
* @Author: your name
* @Date: 2022-01-11 13:44:17
* @LastEditTime: 2024-07-15 14:29:45
* @LastEditTime: 2024-07-18 17:27:20
* @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
......@@ -35,45 +35,8 @@
@closeMediumPressureLine="clearBigWindowsSelectPipe"
/> -->
<!-- 底部按钮 -->
<!-- <div class="home-div">
<img src="../../assets/firstimage/bottombk.svg" alt="" style="backdrop-filter: blur(4px);" />
<div class="listingsSty fangy">
<div
@click="allCompany"
:class="selarr.length == 2 ? 'active' : ''"
class="firsty"
>
全部
</div>
<div
class="firsty"
:class="selarr.indexOf(item.val) >= 0 ? 'active' : ''"
v-for="(item, index) in typeList"
:key="item.val"
@click="sel(index, item)"
>
{{ item.name }}
</div>
</div>
</div> -->
<Top @sel1="sel1" @deviceSearchClick="deviceSearchClick" ref="Top" />
<Bottom v-if="enterpriseId == -2" @listChange="listChange" ref="Bottom" />
<!-- 设备按钮 -->
<div class="typelist-div">
<div
class="list"
v-for="(item, index) in arr"
:key="index"
:class="selarr1.indexOf(item.val) >= 0 ? 'active' : ''"
@click="sel1(index, item)"
>
<img
:src="item.imgurl"
style="margin-top: 2px; float: left; margin-right: 3px"
/>
{{ item.name }}
</div>
</div>
<!-- 弹框 -->
<div
......@@ -200,6 +163,7 @@ import { getUserProfile } from "@/api/system/user";
import leftBar from "@/components/bigWindow/leftBar.vue";
import rightBar from "@/components/bigWindow/rightBar.vue";
import Bottom from "./components/Bottom.vue";
import Top from "./components/Top.vue";
import { mapState } from "vuex";
import MediumPressureLineVue from "../../components/bigWindow/MediumPressureLine.vue";
import PipeSelect from "../../components/bigWindow/PipeSelect.vue";
......@@ -213,6 +177,7 @@ export default {
OtherCenter,
PipeColor,
PipeSelect,
Top,
Bottom,
},
data() {
......@@ -431,12 +396,15 @@ export default {
...mapActions({
GetCompany: "bigWindowCompany/GetCompany",
}),
// 搜索设备上图功能
deviceSearchClick(device,deviceDetail){
console.log(device,deviceDetail)
},
leftRightBarChange() {
const scale = window.innerHeight / 1080;
let right = 0;
if (scale >= 1) {
right = (585 / 2) * (scale - 1) - 20;
right = (585 / 2) * (scale - 1) - 20;
} else {
right = (585 / 2) * (scale - 1) - 20;
}
......@@ -453,6 +421,7 @@ export default {
},
windowClick() {
this.$refs.Bottom.selectUpClear();
this.$refs.Top.clearSearchContainer();
},
// 点击了 大屏端 管道搜索的清除键
clearBigWindowsSelectPipe() {
......@@ -549,36 +518,44 @@ export default {
labelsLayerMarksDeviceUserGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
console.log("用户用户",mapData)
this.map.labelsLayerMarksDeviceUserGoMap(mapData, component, show);
});
},
labelsLayerMarksVideoGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
console.log('Video',mapData)
this.map.labelsLayerMarksVideoGoMap(mapData, component, show);
});
},
labelsLayerMarksCzGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
console.log("场站场站场站场站场站场站场站场站场站场站场站场站",mapData)
this.map.labelsLayerMarksCzGoMap(mapData, component, show);
});
},
labelsLayerMarksFmjGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
console.log("阀门井",mapData)
this.map.labelsLayerMarksFmjGoMap(mapData, component, show);
});
},
labelsLayerMarksTysGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
console.log("调压箱",mapData)
this.map.labelsLayerMarksTysGoMap(mapData, component, show);
});
},
labelsLayerMarksDetectorUserGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
console.log("用户",mapData)
this.map.labelsLayerMarksDetectorUserList(mapData, component, show);
});
},
......@@ -636,22 +613,22 @@ export default {
this.$refs.mychild.choice(this.selarr);
},
// 睇下列表更改
allCompany() {
if (this.selarr.length == 2) {
this.selarr = [];
} else {
this.selarr = this.company
.filter((item) => item.conpanyId != 6 && item.conpanyId != 12)
.map((item) => item.conpanyId);
}
// allCompany() {
// if (this.selarr.length == 2) {
// this.selarr = [];
// } else {
// this.selarr = this.company
// .filter((item) => item.conpanyId != 6 && item.conpanyId != 12)
// .map((item) => item.conpanyId);
// }
// this.map.companyFilter(this.selarr);
this.map.allfilter(this.selarr, this.selarr1);
this.map.infowindowClose();
this.show = false;
this.$refs.mychild2.choice(this.selarr);
this.$refs.mychild.choice(this.selarr);
},
// // this.map.companyFilter(this.selarr);
// this.map.allfilter(this.selarr, this.selarr1);
// this.map.infowindowClose();
// this.show = false;
// this.$refs.mychild2.choice(this.selarr);
// this.$refs.mychild.choice(this.selarr);
// },
sel(index, item) {
this.map.infowindowClose();
this.show = false;
......@@ -676,13 +653,15 @@ export default {
this.$refs.mychild.choice(this.selarr);
},
sel1(index, item) {
const ind = this.selarr1.indexOf(item.val);
if (ind >= 0) {
this.selarr1.splice(ind, 1);
} else {
this.selarr1.push(item.val);
}
sel1(selarr1) {
// const ind = this.selarr1.indexOf(item.val);
// if (ind >= 0) {
// this.selarr1.splice(ind, 1);
// } else {
// this.selarr1.push(item.val);
// }
this.selarr1 = [...selarr1];
console.log(this.selarr, this.selarr1)
this.map.allfilter(this.selarr, this.selarr1);
},
//用户的设备center
......@@ -753,7 +732,7 @@ export default {
},
// 销毁定时器
beforeDestroy() {
window.removeEventListener("resize",this.leftRightBarChange);
window.removeEventListener("resize", this.leftRightBarChange);
if (this.formatDate) {
clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
}
......@@ -902,44 +881,4 @@ export default {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.typelist-div {
width: 755px;
height: 50px;
z-index: 9999;
position: fixed;
top: 0;
margin-top: 90px;
margin-left: calc((100% - 755px) / 2);
}
.list {
z-index: 9999;
float: left;
margin-left: 15px;
color: #fff;
line-height: auto;
text-align: center;
/* background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b; */
font-size: 12px;
padding: 1px 10px;
cursor: pointer;
line-height: 26px;
border: 1px solid rgb(57, 68, 124);
background: #12268e33;
border-radius: 3px;
}
.list.active {
/* background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b; */
font-size: 12px;
color: #00ffff;
border: 1px solid #0f6ca1;
box-shadow: inset 0px 0px 10px 1px #0f6ca1;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.list img {
width: 20px;
}
</style>
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