Commit c1e5c241 authored by 纪泽龙's avatar 纪泽龙

Merge branch 'jzl'

parents 9ee22145 b2b24350
...@@ -746,3 +746,7 @@ ...@@ -746,3 +746,7 @@
// pointer-events:auto !important; // pointer-events:auto !important;
// top:-30px !important; // top:-30px !important;
} }
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
--> -->
<template> <template>
<div> <div>
<div class="pipePressure"> <!-- <div class="pipePressure"> -->
<!-- <!--
<div style="float: left;margin-right: 5px;"> <div style="float: left;margin-right: 5px;">
<div class="hasColorBox"> <div class="hasColorBox">
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
监控 监控
</div> </div>
</div> --> </div> -->
<div> <!-- <div>
<div class="hasColorBox" :style="{ color: pipeColor[`1`] }"> <div class="hasColorBox" :style="{ color: pipeColor[`1`] }">
<div :style="{ backgroundColor: pipeColor[`1`] }"></div> <div :style="{ backgroundColor: pipeColor[`1`] }"></div>
低压管线 低压管线
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
高压管线 高压管线
</div> </div>
</div> </div>
</div> </div> -->
<div class="mapChange"> <div class="mapChange">
<div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div> <div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
......
...@@ -1151,6 +1151,7 @@ export default { ...@@ -1151,6 +1151,7 @@ export default {
.rightb { .rightb {
width: 98%; width: 98%;
height: 100%; height: 100%;
} }
.rightbar1 { .rightbar1 {
width: 90%; width: 90%;
...@@ -1161,7 +1162,7 @@ export default { ...@@ -1161,7 +1162,7 @@ export default {
.rightbar2 { .rightbar2 {
width: 76%; width: 76%;
height: 37%; height: 37%;
padding-top: 15px; padding-top: 30px;
margin-left: 20%; margin-left: 20%;
pointer-events: auto; pointer-events: auto;
} }
......
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2023-07-12 13:58:25
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2023-07-12 17:12:59
* @FilePath: /gassafetyprogress-web/src/views/bigWindow/components/Bottom.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="bigwindow-bottom listingsSty">
<img
src="~@/assets/firstimage/bottombk.svg"
alt=""
style="backdrop-filter: blur(4px)"
/>
<div class="listingsSty">
<div
class="firsty selectAll"
@click.stop="selectAll"
:class="[
{
active:
selectActive.length == listFlatArr.length &&
selectActive.length > 1,
},
]"
>
全部
</div>
<div class="firsty item" v-for="(item, index) in list" :key="item.value">
<div
class="itemCompany"
@click.stop="selectChange(item.value)"
:class="[
{ active: selectSome(index) },
{ activeAll: selectEvery(index) },
]"
>
{{ item.label }}
</div>
<div
class="up-select"
:class="[{ hide: !selectShowNum.includes(item.value) }]"
:style="{ height: item.children.length * 35 + 'px' }"
>
<div
class="selectItem"
v-for="selectItem in item.children"
:class="[{ active: selectActive.includes(selectItem.value) }]"
:key="selectItem.value"
@click.stop="selectActiveChange(selectItem.value)"
>
{{ selectItem.label }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
name: "",
data() {
return {
list: [
{
value: 1,
label: "天然气公司",
children: [
// { value: 10, label: "东阿道夫阿" },
// { value: 11, label: "阿发送到" },
// { value: 19, label: "发打算发大水" },
],
},
{
value: 2,
label: "液化气公司",
children: [
// { value: 21, label: "2-1" },
// { value: 22, label: "2-2" },
],
},
{
value: 3,
label: "加气站",
children: [
// { value: 31, label: "3-1" },
// { value: 32, label: "3-2" },
],
},
],
selectShowNum: [],
// 被选中的值
selectActive: [],
listFlatArr: [],
};
},
computed: {
...mapGetters(["company", "systemSetting"]),
},
beforeCreate() {},
mounted() {
this.GetCompany().then((res) => {
this.company.forEach((item) => {
this.list[item.companyType-1].children.push({
value: item.conpanyId,
label: item.companyName,
});
});
this.selectAll();
});
},
methods: {
...mapActions({
GetCompany: "bigWindowCompany/GetCompany",
}),
// 把下拉框放下
selectUpClear(){
this.selectShowNum=[];
},
selectAll() {
// 生成所有都选中的数组
this.listFlatArr = this.list
.map((item) => {
return item.children.map((iten) => {
return iten.value;
});
})
.flat();
// 如果是全选中状态,则全取消,否则全选
if (this.selectActive.length == this.listFlatArr.length) {
this.selectActive = [];
} else {
this.selectActive = [...this.listFlatArr];
}
this.$emit("listChange", this.selectActive);
},
selectChange(value) {
const num = this.selectShowNum.indexOf(value);
if (num >= 0) {
this.selectShowNum.splice(num, 1);
} else {
this.selectShowNum.push(value);
}
},
selectActiveChange(value) {
const num = this.selectActive.indexOf(value);
if (num >= 0) {
this.selectActive.splice(num, 1);
} else {
this.selectActive.push(value);
}
this.$emit("listChange", this.selectActive);
},
// 至少有一个被选中
selectSome(index) {
return (
this.list[index].children.length > 0 &&
this.list[index].children.some((item) => {
return this.selectActive.includes(item.value);
})
);
},
// 都被选中
selectEvery(index) {
return (
this.list[index].children.length > 0 &&
this.list[index].children.every((item) => {
return this.selectActive.includes(item.value);
})
);
},
},
};
</script>
<style lang="scss" scoped>
.bigwindow-bottom {
width: 40%;
height: 70px;
position: fixed;
bottom: 0;
margin-left: 30%;
display: flex;
// z-index: 1000;
img {
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
bottom: -10px;
}
.listingsSty {
padding-left: 15%;
padding-right: 15%;
box-sizing: border-box;
width: 180%;
display: flex;
justify-content: space-between;
.firsty {
// width: 15%;
min-width: 80px;
height: 35px;
text-align: center;
line-height: 35px;
color: #fff;
font-size: 16px;
cursor: pointer;
&.selectAll {
transition: all 0.5s ease;
&.active {
color: #00ffff;
text-shadow: 0 0 20px rgba(0, 255, 255, 1),
0 0 35px rgb(0, 255, 255, 1);
}
}
&.item {
min-width: 180px;
position: relative;
.itemCompany {
transition: all 0.5s ease;
&.active {
color: #00ffff;
text-shadow: 0 0 20px rgba(0, 255, 255, 0.3),
0 0 35px rgb(0, 255, 255, 0.3);
}
&.activeAll {
color: #00ffff;
text-shadow: 0 0 20px rgba(0, 255, 255, 1),
0 0 35px rgb(0, 255, 255, 1);
}
}
.up-select {
transition: all 0.5s ease;
position: absolute;
bottom: 50px;
left: 0;
width: 100%;
background: rgb(18, 92, 155, 0.3);
overflow: hidden;
&.hide {
height: 0px !important;
}
.selectItem {
transition: all 0.5s ease;
&.active {
color: #00ffff;
text-shadow: 0 0 20px #00ffff, 0 0 35px #00ffff;
}
}
}
}
}
}
}
</style>
...@@ -35,8 +35,9 @@ module.exports = { ...@@ -35,8 +35,9 @@ module.exports = {
// detail: https://cli.vuejs.org/config/#devserver-proxy // detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: { [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://27.128.233.145:8905/gassafety`,
target: ` http://36.138.180.82:8905/gassafety`,
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '' ['^' + 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