Skip to content

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

左右bar缩放完成

parent 49da8d56
Show whitespace changes
Inline Side-by-side
Showing with 135 additions and 75 deletions
zh-baseversion-web/src/components/bigWindow/rightBar.vue
View file @ 39f97485
......@@ -1151,6 +1151,7 @@ export default {
.rightb {
width: 98%;
height: 100%;
}
.rightbar1 {
width: 90%;
......@@ -1161,7 +1162,7 @@ export default {
.rightbar2 {
width: 76%;
height: 37%;
padding-top: 15px;
padding-top: 30px;
margin-left: 20%;
pointer-events: auto;
}
......
zh-baseversion-web/src/views/bigWindow/index.vue
View file @ 39f97485
<!--
* @Author: your name
* @Date: 2022-01-11 13:44:17
* @LastEditTime: 2023-07-12 17:13:16
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2024-07-13 16:22:48
* @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/Home.vue
-->
<template>
<div class="home bigwindow" @click='windowClick'>
<div class="home bigwindow" @click="windowClick">
<div class="goSystem" @click="$router.push('/index')">进入管理系统</div>
<div id="map"></div>
<!-- <Center :show="show" :centerData="centerData" /> -->
......@@ -30,7 +30,10 @@
:pageSize="20"
/>
<PipeColor />
<PipeSelect @transmit="getPipeSelectMessage" @closeMediumPressureLine="clearBigWindowsSelectPipe"/>
<PipeSelect
@transmit="getPipeSelectMessage"
@closeMediumPressureLine="clearBigWindowsSelectPipe"
/>
<!-- 底部按钮 -->
<!-- <div class="home-div">
......@@ -54,7 +57,7 @@
</div>
</div>
</div> -->
<Bottom v-if="enterpriseId==-2" @listChange="listChange" ref='Bottom'/>
<Bottom v-if="enterpriseId == -2" @listChange="listChange" ref="Bottom" />
<!-- 设备按钮 -->
<div class="typelist-div">
<div
......@@ -83,18 +86,21 @@
<!-- 头部 -->
<div class="banner-test">
<!-- <dv-decoration-5 style="width:100%;height:100%;" /> -->
<img v-if="this.enterpriseId==-2" src="../../assets/images/zibk.png" alt="" />
<img
v-if="this.enterpriseId == -2"
src="../../assets/images/zibk.png"
alt=""
/>
<img v-else src="../../assets/images/20230805152711.png" alt="" />
</div>
<!-- 左边 -->
<div class="leftbar">
<div class="leftbar" :style="changeLeftBarStyle">
<leftBar ref="mychild2"></leftBar>
</div>
<!-- 右边 -->
<div class="rightbar">
<div class="rightbar" :style="changeRightBarStyle">
<rightBar ref="mychild"></rightBar>
</div>
<!-- <img src="../../assets/images/leftbk.svg" alt=""> -->
......@@ -150,7 +156,11 @@
import { EditorMap } from "@/utils/mapClass/map";
import { mapGetters, mapActions } from "vuex";
import { listDetectorInfo } from "@/api/detector/detectorInfo";
import { detectorUserList,massMarksDetectorUserList,labelsLayerMarksDetectorUserList } from "@/api/detector/detectorUser";
import {
detectorUserList,
massMarksDetectorUserList,
labelsLayerMarksDetectorUserList,
} from "@/api/detector/detectorUser";
import {
pipeData,
tiaoyaxiang,
......@@ -171,7 +181,7 @@ import {
userAlarm,
getTcqDevice,
getYhq,
deviceUser
deviceUser,
} from "@/api/bigWindow/getDevice";
import Line from "@/components/bigWindow/Line.vue";
import VideoView from "@/components/bigWindow/VideoView.vue";
......@@ -190,9 +200,9 @@ 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 { mapState } from 'vuex'
import MediumPressureLineVue from '../../components/bigWindow/MediumPressureLine.vue';
import PipeSelect from '../../components/bigWindow/PipeSelect.vue';
import { mapState } from "vuex";
import MediumPressureLineVue from "../../components/bigWindow/MediumPressureLine.vue";
import PipeSelect from "../../components/bigWindow/PipeSelect.vue";
export default {
name: "Home",
components: {
......@@ -217,6 +227,8 @@ export default {
nowDate: "",
nowweek: "",
nowtime: "", // 当前日期
changeRightBarStyle: "",
changeLeftBarStyle: "",
typeList: [
{
val: 1,
......@@ -300,7 +312,7 @@ export default {
},
computed: {
...mapGetters(["company", "systemSetting","enterpriseId"]),
...mapGetters(["company", "systemSetting", "enterpriseId"]),
companyLength() {
return this.typeList.length;
},
......@@ -313,6 +325,12 @@ export default {
}
},
},
created() {
window.addEventListener("resize", this.leftRightBarChange);
this.leftRightBarChange();
// changeRightBarStyle
},
async mounted() {
// console.log(99999999999999)
// getPipe().then(res=>{
......@@ -334,10 +352,10 @@ export default {
this
);
getUserProfile().then(response => {
getUserProfile().then((response) => {
var user = response.data;
if(user.deptId ==13){
this.map.setCenter(["117.908541","39.688353"])
if (user.deptId == 13) {
this.map.setCenter(["117.908541", "39.688353"]);
}
});
......@@ -369,22 +387,32 @@ export default {
await this.goMap(getEnterprise, this.addDevice, Company, true);
// this.goMap(getPipe, this.addPipeLine, Line, true);
//管道
this.goMediumPressureLineMap(getPipe, this.addMediumPipeLine, Line,MediumPressureLineVue, true);
this.goMediumPressureLineMap(
getPipe,
this.addMediumPipeLine,
Line,
MediumPressureLineVue,
true
);
//调压箱
this.labelsLayerMarksTysGoMap(getTyx, Device, false);
//阀门井
this.labelsLayerMarksFmjGoMap(getFm, Device, false);
//场站
this.labelsLayerMarksCzGoMap(getCz,Cz, false);
this.labelsLayerMarksCzGoMap(getCz, Cz, false);
//监控
this.labelsLayerMarksVideoGoMap(getVideo,VideoView, false);
this.labelsLayerMarksVideoGoMap(getVideo, VideoView, false);
//this.goMap(getYhq, this.addDevice2, yhqUser, false); //液化气用户上图
if (this.enterpriseId==-2){
if (this.enterpriseId == -2) {
this.labelsLayerMarksDeviceUserGoMap(deviceUser, yhqUser, false); //用户上图
}
// 用户要等一下 因为有报警数据
this.labelsLayerMarksDetectorUserGoMap(labelsLayerMarksDetectorUserList,User, false).then((res) => {
this.labelsLayerMarksDetectorUserGoMap(
labelsLayerMarksDetectorUserList,
User,
false
).then((res) => {
// 先查一下，然后开启定时器
this.userAlarm();
this.alarmTimer = setInterval(() => {
......@@ -403,17 +431,42 @@ export default {
...mapActions({
GetCompany: "bigWindowCompany/GetCompany",
}),
windowClick(){
leftRightBarChange() {
const scale = window.innerHeight / 1080;
let right = 0;
if (scale >= 1) {
right = (585 / 2) * (scale - 1) - 20;
} else {
right = (585 / 2) * (scale - 1) - 20;
}
// console.log("right", right, "scale", scale);
this.changeRightBarStyle = [
{ right: right + "px" },
{ transform: `scale(${scale})` },
];
this.changeLeftBarStyle = [
{ left: right + 20 + "px" },
{ transform: `scale(${scale})` },
];
},
windowClick() {
this.$refs.Bottom.selectUpClear();
},
// 点击了 大屏端 管道搜索的清除键
clearBigWindowsSelectPipe(){
clearBigWindowsSelectPipe() {
this.map.infowindowClose();
},
getPipeSelectMessage(data,id) {
let arrArea = data.split(',');
this.map.setCenter([arrArea[0],arrArea[1]])
this.map.filterSelectPipe(id,MediumPressureLineVue,arrArea[0],arrArea[1]);
getPipeSelectMessage(data, id) {
let arrArea = data.split(",");
this.map.setCenter([arrArea[0], arrArea[1]]);
this.map.filterSelectPipe(
id,
MediumPressureLineVue,
arrArea[0],
arrArea[1]
);
},
// 管道上图
addPipeLine(data, component) {
......@@ -424,10 +477,10 @@ export default {
}
},
// 管道上图
addMediumPipeLine(data, component,mediumComponent) {
addMediumPipeLine(data, component, mediumComponent) {
for (let comp in data) {
data[comp].forEach((pipe) => {
this.map.addMediumPipeLine(pipe, component,mediumComponent);
this.map.addMediumPipeLine(pipe, component, mediumComponent);
});
}
},
......@@ -461,7 +514,13 @@ export default {
});
}
},
goMediumPressureLineMap(httpFunc, addFunc, component,mediumComponent, show){
goMediumPressureLineMap(
httpFunc,
addFunc,
component,
mediumComponent,
show
) {
return httpFunc().then((res) => {
// 给用户加icontype
if (res.data && !res.data[0].iconType) {
......@@ -482,46 +541,41 @@ export default {
} else {
config = { data: res.data || res.rows };
}
addFunc(config, component, mediumComponent,show);
addFunc(config, component, mediumComponent, show);
return config.iconType;
});
},
labelsLayerMarksDeviceUserGoMap(httpFunc,component,show){
labelsLayerMarksDeviceUserGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
this.map.labelsLayerMarksDeviceUserGoMap(mapData, component, show);
})
}
,
labelsLayerMarksVideoGoMap(httpFunc,component,show){
});
},
labelsLayerMarksVideoGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
this.map.labelsLayerMarksVideoGoMap(mapData, component, show);
})
}
,
labelsLayerMarksCzGoMap(httpFunc,component,show){
});
},
labelsLayerMarksCzGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
this.map.labelsLayerMarksCzGoMap(mapData, component, show);
})
}
,
labelsLayerMarksFmjGoMap(httpFunc,component,show){
});
},
labelsLayerMarksFmjGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
this.map.labelsLayerMarksFmjGoMap(mapData, component, show);
})
}
,
labelsLayerMarksTysGoMap(httpFunc,component,show){
});
},
labelsLayerMarksTysGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
this.map.labelsLayerMarksTysGoMap(mapData, component, show);
})
}
,
});
},
labelsLayerMarksDetectorUserGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
......@@ -572,9 +626,9 @@ export default {
// },
// 更改下方列表
listChange(arr) {
console.log(arr)
console.log(arr);
// return;
this.selarr=[...arr]
this.selarr = [...arr];
this.map.allfilter(this.selarr, this.selarr1);
this.map.infowindowClose();
this.show = false;
......@@ -653,7 +707,6 @@ export default {
getTcqDevice(queryParams, title) {
console.log(queryParams);
return getTcqDevice(queryParams).then((res) => {
this.detcetorList = res;
this.centerUserId = queryParams.devId;
// 总数据
......@@ -700,6 +753,7 @@ export default {
},
// 销毁定时器
beforeDestroy() {
window.removeEventListener("resize",this.leftRightBarChange);
if (this.formatDate) {
clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
}
......@@ -755,9 +809,13 @@ export default {
.leftbar {
width: 565px;
height: 93%;
// height: 93%;
height: 1010px;
position: fixed;
top: 70px;
// top: 70px;
top: 50%;
margin-top: -470px;
z-index: 999;
background: url("../../assets/firstimage/le.png");
background-size: 105% 100%;
......@@ -767,15 +825,15 @@ export default {
}
.rightbar {
width: 585px;
height: 93%;
height: 1010px;
position: fixed;
top: 70px;
top: 50%;
margin-top: -470px;
z-index: 999;
right: 0;
// right: 861px;
background: url("../../assets/firstimage/ri.png");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-right: -20px;
pointer-events: none;
}
.home-div {
......
zh-baseversion-web/vue.config.js
View file @ 39f97485
......@@ -35,8 +35,9 @@ module.exports = {
// 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`,
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