Skip to content

G
gassafety-progress
Commit 7c8202cd authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

再次修复

parent d291c999
Show whitespace changes
Inline Side-by-side
Showing with 562 additions and 7 deletions
gassafetyprogress-web/src/views/bigWindow/index.vue
View file @ 7c8202cd
<!--
* @Author: your name
* @Date: 2022-02-26 22:46:14
* @LastEditTime: 2022-02-26 22:46:14
* @Date: 2022-01-11 13:44:17
* @LastEditTime: 2022-02-26 22:06:26
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /newDev/gassafety-progress/gassafetyprogress-web/src/views/bigWindow/index.vue
* @FilePath: /test/hello-world/src/views/Home.vue
-->
<template>
<div>123</div>
<div class="home bigwindow">
<div class="goSystem" @click="$router.push('/index')">进入管理系统</div>
<div id="map"></div>
<Center :show="show" :centerData="centerData" />
<PipeColor />
<!-- 底部按钮 -->
<div class="home-div">
<img src="@/assets/mapinages/bottombanner.png" alt="" style="" />
<div class="listingsSty fangy">
<div
@click="allCompany"
:class="selarr.length == companyLength ? '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>
<!-- 设备按钮 -->
<div class="typelist-div">
<div class="list" v-for="(item,index) in arr" :key="index" :class="item.ischeck==true?'active':''" @click="sel1(index,item)">
<img :src="item.imgurl" style="margin-top: 2px;float: left;margin-right: 3px;" /> {{item.name}}
</div>
</div>
<!-- 弹框 -->
<div
id=""
style="position: fixed; top: 0; right: 0; width: 100px; height: 100px"
>
<!-- <markerInfoWindow></markerInfoWindow> -->
</div>
<!-- 头部 -->
<div class="banner-test">
<!-- <dv-decoration-5 style="width:100%;height:100%;" /> -->
<img src="@/assets/mapinages/topbanner.png" alt="" />
</div>
<!-- 左边 -->
<div class="leftbar">
<leftBar ref="mychild2"></leftBar>
</div>
<!-- 右边 -->
<div class="rightbar">
<rightBar ref="mychild"></rightBar>
</div>
<!-- 左上角天气 -->
<div
class="weather"
style="
position: fixed;
top: 0;
margin-top: 10px;
margin-left: 15px;
left: 0;
z-index: 999;
width: 300px;
height: 50px;
"
>
<!-- <iframe src="../../static/weather.html" frameborder="0"></iframe> -->
<iframe
scrolling="no"
src="https://tianqiapi.com/api.php?style=tz&skin=pitaya&color=339CC9"
frameborder="0"
width="400"
height="30"
allowtransparency="true"
></iframe>
<!-- <iframe scrolling="no" src="https://yiketianqi.com/api.php?style=ty&skin=pitaya" frameborder="0" width="300" height="75" allowtransparency="true"></iframe> -->
</div>
<!-- 右上角时间 -->
<div
class="right-time"
style="
position: fixed;
top: 0;
margin-top: 10px;
margin-right: 15px;
right: 0;
z-index: 999;
width: 200px;
height: 50px;
color: #339CC9;
"
>
<div style="height: 20px; width: 100%; float: right; font-size: 14px;">
{{ nowDate }}&nbsp;{{ nowtime }}&nbsp;{{ nowweek }}
</div>
</div>
</div>
</template>
<script>
// @ is an alias to /src
import { EditorMap } from "@/utils/mapClass/map";
import { mapGetters, mapActions } from "vuex";
import {
pipeData,
tiaoyaxiang,
famen,
changzhan,
jiankong,
user,
} from "@/utils/mapClass/config.js";
import {
getPipe,
getTyx,
getFm,
getCz,
getVideo,
getUser,
} from "@/api/bigWindow/getDevice";
import Line from "@/components/bigWindow/Line.vue";
import VideoView from "@/components/bigWindow/VideoView.vue";
import DeviceA from "@/components/bigWindow/DeviceA.vue";
import User from "@/components/bigWindow/User.vue";
import Center from "@/components/bigWindow/Center.vue";
import PipeColor from "@/components/bigWindow/PipeColor.vue";
// import markerInfoWindow from './components/markerInfoWindow.vue'
import leftBar from "@/components/bigWindow/leftBar.vue";
import rightBar from "@/components/bigWindow/rightBar.vue";
export default {
name: "Home",
components: {
leftBar,
rightBar,
Center,
PipeColor,
},
data() {
return {
map: null,
show: false,
centerData: null,
selarr: [1, 2, 3],
weather: "",
lower: "",
higher: "",
nowDate: "",
nowweek: "",
nowtime: "", // 当前日期
}
typeList: [
{
val: 1,
name: "中燃翔科",
},
{
val: 2,
name: "中诚然气",
},
{
val: 3,
name: "中燃韵科",
},
],
arr:[
{
val:1,
ischeck:false,
imgurl: require('@/assets/image/tyxsub.svg'),
name: "调压箱"
},
{
val:2,
ischeck:false,
imgurl: require('@/assets/image/fmjsub.svg'),
name: "阀门井"
},
{
val:3,
ischeck:false,
imgurl: require('@/assets/image/czsub.svg'),
name: "场 站"
},
{
val:4,
ischeck:false,
imgurl: require('@/assets/image/usersub.svg'),
name: "用 户"
},
{
val:5,
ischeck:false,
imgurl: require('@/assets/image/jksub.svg'),
name: "监 控"
}
],
selarr1:[],
};
},
computed: {
...mapGetters(["company", "systemSetting"]),
companyLength() {
return this.typeList.length;
},
},
watch: {
selarr(newValue) {
if (newValue.length == this.companyLength) {
this.$refs.mychild.choice(0);
this.$refs.mychild2.choice(0);
}
},
},
mounted() {
// console.log(99999999999999)
// getPipe().then(res=>{
// console.log("成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功",res)
// }).catch(res=>{
// console.log(123)
// })
// return;
const path = eval(this.systemSetting.map_center);
this.map = new EditorMap(
"map",
{
center: path,
mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
zoom: 14.5,
},
this
);
// 这是测试，用本地数据
if (this.systemSetting.prod_test === "test") {
this.addPipeLine(pipeData, Line);
this.addDevice(tiaoyaxiang, DeviceA);
this.addDevice(famen, DeviceA);
this.addDevice(changzhan, DeviceA);
this.addDevice(user, User);
this.addDevice(jiankong, VideoView);
} else {
// 调用状态管理器方法获取公司信息每次都要调取,因为每次进来都是更新的
this.GetCompany();
this.typeList = this.company.map((item) => ({
val: item.conpanyId,
name: item.companyName,
}));
this.selarr = this.company.map((item) => item.conpanyId);
// getPipe() getTyx() getFm() getCz() getVideo() getUser()
this.goMap(getPipe, this.addPipeLine, Line);
this.goMap(getTyx, this.addDevice, DeviceA);
this.goMap(getFm, this.addDevice, DeviceA);
this.goMap(getCz, this.addDevice, DeviceA);
this.goMap(getVideo, this.addDevice, VideoView);
this.goMap(getUser, this.addDevice, User);
// getVideo().then((res) => {
// console.log("getVideo", res);
// });
}
this.currentTime();
this.$refs.mychild.choice(0);
this.$refs.mychild2.choice(0);
},
methods: {
...mapActions({
GetCompany: "bigWindowCompany/GetCompany",
}),
// 管道上图
addPipeLine(data, component) {
for (let comp in data) {
data[comp].forEach((pipe) => {
this.map.addPipeLine(pipe, component);
});
}
},
// 设备上图
addDevice(data, component) {
for (let comp in data) {
data[comp].forEach((pipe) => {
this.map.addDevice(pipe, component);
});
}
},
goMap(httpFunc, addFunc, component) {
httpFunc().then((res) => {
console.log("resresres", res);
// 根据数据格式不同，赋值不同，如果是个数组，就用res，如果不是就用res.data
let config = {};
if (Array.isArray(res)) {
config = { data: res };
} else {
config = { data: res.data };
}
addFunc(config, component);
});
},
centerShow(boolean) {
this.show = boolean;
},
centerDataFunc(centerData) {
this.centerData = centerData;
console.log(centerData);
this.show = true;
},
allCompany() {
if (this.selarr.length == this.companyLength) {
this.selarr = [];
} else {
this.selarr = this.company.map((item) => item.conpanyId);
}
this.map.companyFilter(this.selarr);
this.map.infowindowClose();
this.show = false;
},
sel(index, item) {
this.map.infowindowClose();
this.show = false;
const ind = this.selarr.indexOf(item.val);
if (ind >= 0) {
this.selarr.splice(ind, 1);
if (item.val == 3) {
this.$refs.mychild.choice(1);
this.$refs.mychild2.choice(1);
} else {
this.$refs.mychild.choice(item.val + 1);
this.$refs.mychild2.choice(item.val + 1);
}
} else {
this.selarr.push(item.val);
this.$refs.mychild.choice(item.val);
this.$refs.mychild2.choice(item.val);
}
this.map.companyFilter(this.selarr);
},
sel1(index,item){
let arr=[...this.arr];
let selarr1=[...this.selarr1];
if(arr[index].ischeck==false){
arr[index].ischeck=true;
selarr1.push(item)
}else{
arr[index].ischeck=false;
var index11=selarr1.indexOf(index)
selarr1.splice(index11,1)
}
this.arr=arr;
this.selarr1=selarr1;
},
currentTime() {
setInterval(() => {
this.formatDate();
}, 1000);
},
formatDate() {
let date = new Date();
let year = date.getFullYear(); // 年
let month = date.getMonth() + 1; // 月
let day = date.getDate(); // 日
let week = date.getDay(); // 星期
let weekArr = [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
];
let hour = date.getHours(); // 时
hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
let minute = date.getMinutes(); // 分
minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
let second = date.getSeconds(); // 秒
second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
this.nowtime = `${hour}:${minute}:${second}`;
this.nowweek = `${weekArr[week]}`;
this.nowDate = `${year}年${month}月${day}`;
},
},
// 销毁定时器
beforeDestroy() {
if (this.formatDate) {
clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
}
},
};
</script>
<style lang="scss" scoped>
.home {
position: relative;
height: 100vh;
}
.goSystem {
position: fixed;
z-index: 9999;
top: 50px;
right: 20px;
font-size: 14px;
color: #18baff;
cursor: pointer;
padding: 3px 5px;
border: 1px solid #339CC9;
color: #339CC9;
&:hover {
background-color: #053B6A ;
color: #2CD5DB;
}
}
#map {
position: absolute;
top: 0px;
bottom: 0;
width: 100%;
}
.banner-test {
width: 100%;
height: 85px;
position: relative;
top: 0;
z-index: 999;
}
.banner-test img {
width: 100%;
height: 100%;
}
<style>
.leftbar {
width: 450px;
height: 90%;
position: fixed;
top: 10%;
left: 0;
background: #112238;
}
.rightbar {
width: 450px;
height: 90%;
position: fixed;
top: 10%;
right: 0;
background: #112238;
}
.home-div {
width: 50%;
height: 70px;
position: fixed;
bottom: 0;
margin-left: 25%;
// z-index: 1000;
img {
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
}
}
.listingsSty {
/* height: 25px; */
// position: fixed;
/* border: 1px solid #fff; */
margin-left: 25%;
width: 50%;
display: flex;
justify-content: space-between;
padding-top: 25px;
// font-family: 'arialbd';
}
.firsty {
// width: 15%;
min-width: 80px;
height: 35px;
text-align: center;
line-height: 35px;
/* border: 1px solid #fff; */
color: #fff;
font-size: 16px;
// float: left;
// margin-left: 8%;
cursor: pointer;
// font-family: 'arialbd';
}
.active {
color: #2ee7e7;
background: url(../../assets/mapinages/background.png);
background-repeat: no-repeat;
background-size: 100% 100%;
font-size: 18px;
/*position:relative;*/
/*&::after{
width: 80px;
height: 50px;
z-index: -1;
content: " ";
position: absolute;
top: -7px;
left: 50%;
margin-left:-40px;
background: url(/img/bac1.0ec28f27.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
color: aquamarine;
}*/
}
.weather-icon {
float: left;
width: 30px !important;
height: 30px !important;
margin-top: 10px !important;
margin-left: 10px !important;
padding-right: 5px;
}
.tttt {
background-image: -webkit-linear-gradient(
bottom,
rgb(134, 185, 233),
#ffffff
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.typelist-div{
width: 450px;
height: 50px;
z-index: 9999;
position: fixed;
top: 0;
margin-top: 120px;
right: 450px;
}
.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: 14px;
padding: 5px 7px;
}
.list.active{
background: linear-gradient(86deg, #112238 0%, #32A3D3 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125C9B;
color: #2ee7e7;
font-size: 14px;
}
</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