odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'dengjie' (#216) from dengjie into dev

Browse Source 
Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/216
This commit is contained in:
odjbin
2024-01-07 13:47:50 +00:00
parent c730283e78 275db768e2
commit 8f310554d8
13 changed files with 512 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/assets/styles/index.scss
View File

@@ -154,7 +154,7 @@ body,
position: static !important; position: static !important;
.el-drawer { .el-drawer {
width: 900px !important; width: 960px !important;
background-color: transparent; background-color: transparent;
box-shadow: none; box-shadow: none;
} }
@@ -503,60 +503,14 @@ body,
} }
} }
//el-select 下拉框样式 .el-dropdown-menu__item:not(.is-disabled):focus {
.el-select__popper { background-color: transparent !important;
margin-top: -12px !important;
background: #072247 !important;
border: 1px solid #0F82AF !important;
} }
.el-popper {
max-width: 200px !important;
box-sizing: border-box;
}
.el-popper__arrow::before { .el-popper__arrow::before {
display: none; display: none;
} }
.el-select-dropdown {
width: 200px !important;
}
.el-select-dropdown__item {
> span {
color: #FFFFFF;
}
}
.el-select .el-input .el-select__caret {
font-size: 35px !important;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
background-color: #064B66 !important;
width: 198px !important;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
background-color: #064B66 !important;
width: 200px !important;
}
.el-select-tags-wrapper {
.el-tag {
padding: 28px 20px !important;
font-size: 35px;
.el-icon {
width: 40px;
height: 40px;
font-size: 40px !important;
}
}
}
.current-site { .current-site {
.el-select-dropdown { .el-select-dropdown {
width: 200px !important; width: 200px !important;
} }
@@ -671,3 +625,42 @@ input[type="number"] {
background-color: transparent !important; background-color: transparent !important;
color: #60DDDE !important; color: #60DDDE !important;
} }
.showNull{
font-size:35px;
min-height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #2fb0df;
letter-spacing: 3px;
}
//loading
.loading-block{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height:900px;
font-size: 55px;
color: #38CAFB;
letter-spacing: 3px;
}
.loading {
margin-bottom: 20px;
width: 100px;
height: 100px;
border: 2px solid #38CAFB;
border-top-color: transparent;
border-radius: 100%;
animation: circle infinite 0.75s linear;
}
// 转转转动画
@keyframes circle {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}

67
src/components/content/airInfo/AirInfo.vue
View File

@@ -1,27 +1,29 @@
<template> <template>
<div id="air-info"> <div id="air-info">
<div class="fan-speed"> <div style="height: 21px" v-if="airList.length!==0"></div>
<div class="fan-speed" v-if="windSpeed!==0">
<img src="@/assets/images/airInfo/fan-v-icon.png" alt=""/> <img src="@/assets/images/airInfo/fan-v-icon.png" alt=""/>
<div class="fan-info" @click="handleOpenChart"> <div class="fan-info" @click="handleOpenChart">
<div class="input-fan"><span>风速</span>{{ windSpeed }}m/s</div> <div class="input-fan"><span>风速</span>{{ windSpeed }}m/s</div>
</div> </div>
</div> </div>
<item-info <item-info
v-for="item in airList" v-for="(item,index) in airList"
:key="item.equipmentId" :key="index"
:wp="item" :wp="item"
:icon="item.icon"
:name="item.name"
:unit="item.unit"
@click="handleOpenAirChart(item)" @click="handleOpenAirChart(item)"
/> />
<div style="height: 1px" v-if="airList.length!==0"></div>
<div class="digital-tunnel"> <div class="digital-tunnel">
<el-dialog :close-on-click-modal="false" v-model="isWindSpeedVisited" :title="'风速监控数据'" width="2175px" <el-dialog :close-on-click-modal="false" v-model="isWindSpeedVisited" :title="'风速监控数据'" width="2175px"
:modal="false"> :modal="false">
<div class="left-top-icon"></div> <div class="left-top-icon"></div>
<div class="right-top-icon"></div> <div class="right-top-icon"></div>
<div class="chat-dialog"> <div class="loading-block" v-if="showSpeedLoading">
<div class="loading" v-if="loadingText==='加载中...'"></div>
<span>{{loadingText}}</span>
</div>
<div class="chat-dialog" v-else>
<div id="containerWind"></div> <div id="containerWind"></div>
<div style="width: 1px;"></div> <div style="width: 1px;"></div>
</div> </div>
@@ -41,7 +43,11 @@
:modal="false"> :modal="false">
<div class="left-top-icon"></div> <div class="left-top-icon"></div>
<div class="right-top-icon"></div> <div class="right-top-icon"></div>
<div class="chat-dialog"> <div class="loading-block" v-if="showLoading">
<div class="loading" ></div>
<span>加载中...</span>
</div>
<div class="chat-dialog" v-else>
<div id="containerAir"></div> <div id="containerAir"></div>
<div style="width: 1px;"></div> <div style="width: 1px;"></div>
</div> </div>
@@ -65,6 +71,7 @@ import ItemInfo from "./childComps/ItemInfo.vue";
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue" import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import {getEchartsInfo} from "../../../api/largeScreen"; import {getEchartsInfo} from "../../../api/largeScreen";
import {ElMessage} from "element-plus";
let myEcharts = reactive({}); let myEcharts = reactive({});
let myAirEcharts = reactive({}); let myAirEcharts = reactive({});
@@ -72,14 +79,17 @@ const props = defineProps({
list: Array, list: Array,
airData: Array airData: Array
}); });
const windSpeed = ref('') const windSpeed = ref(0)
const loadingText = ref('加载中...')
const windSpeedId = ref(0) const windSpeedId = ref(0)
const airTitle = ref('') const airTitle = ref('')
const airList = ref([]) const airList = ref([])
const timeList = ref(["年", "月", "日"]); const timeList = ref(["年", "月", "日"]);
const selectTimeButton = ref(2); const selectTimeButton = ref(2);
const isWindSpeedVisited = ref(false); const isWindSpeedVisited = ref(false);
const showSpeedLoading = ref(false)
const isAirVisited = ref(false); const isAirVisited = ref(false);
const showLoading = ref(false)
watch(() => props.list, (now) => { watch(() => props.list, (now) => {
airList.value?.forEach(item => { airList.value?.forEach(item => {
now.forEach(newItem => { now.forEach(newItem => {
@@ -90,28 +100,37 @@ watch(() => props.list, (now) => {
}) })
}, {deep: true}); }, {deep: true});
watch(() => props.airData, (now) => { watch(() => props.airData, (now) => {
if (now.sensorList !== null) { if (now.sensorList.length !== 0) {
if (now.sensorList.length === 0) { if (now.sensorList.length === 0) {
airList.value = [] airList.value = []
} else { } else {
getAirInfo(now.sensorList) getAirInfo(now.sensorList)
} }
}else {
airList.value = []
windSpeed.value = 0
} }
}, {deep: true}); }, {deep: true});
const getChartInfo = (equipmentId) => { const getChartInfo = (equipmentId) => {
isWindSpeedVisited.value = true
showSpeedLoading.value=true
getEchartsInfo(equipmentId).then(res => { getEchartsInfo(equipmentId).then(res => {
if (res?.code === 1000) { if (res?.code === 1000) {
isWindSpeedVisited.value = true showSpeedLoading.value=false
nextTick(() => { nextTick(() => {
initChart(res.data.dates, res.data.values) initChart(res.data.dates, res.data.values)
}) })
}else {
loadingText.value=res.msg
} }
}) })
} }
const getGasChartInfo = (equipmentId) => { const getGasChartInfo = (equipmentId) => {
isAirVisited.value = true
showLoading.value=true
getEchartsInfo(equipmentId).then(res => { getEchartsInfo(equipmentId).then(res => {
if (res?.code === 1000) { if (res?.code === 1000) {
isAirVisited.value = true showLoading.value = false
nextTick(() => { nextTick(() => {
initAirChart(res.data.dates, res.data.values) initAirChart(res.data.dates, res.data.values)
}) })
@@ -119,7 +138,6 @@ const getGasChartInfo = (equipmentId) => {
}) })
} }
const handleOpenChart = () => { const handleOpenChart = () => {
// isWindSpeedVisited.value = true
getChartInfo(windSpeedId.value) getChartInfo(windSpeedId.value)
} }
@@ -177,8 +195,10 @@ const getAirInfo = (now) => {
windSpeed.value = item.value windSpeed.value = item.value
} }
}) })
airArr.push(airArr.shift()) if(airArr.length!==0){
airList.value = airArr airArr.push(airArr.shift())
airList.value = airArr
}
} }
const initChart = (type, values) => { const initChart = (type, values) => {
//3.初始化container容器 //3.初始化container容器
@@ -378,26 +398,27 @@ const initAirChart = (type, values) => {
<style lang="scss" scoped> <style lang="scss" scoped>
#air-info { #air-info {
position: absolute; //min-height: 350px;
margin-top: 40px;
//position: absolute;
z-index: 100; z-index: 100;
width: 824px; width: 824px;
//height: 400px; //height: 400px;
top: 1003px; //top: 1003px;
right: 72px; //right: 72px;
background-image: url(@/assets/images/airInfo/bg.png); background-image: url(@/assets/images/airInfo/bg.png);
padding: 25px 20px 0 21px; //padding: 25px 20px 1px 21px;
.fan-speed { .fan-speed {
box-sizing: border-box;
display: flex; display: flex;
//height: 40px; //height: 40px;
font-size: 30px; font-size: 30px;
font-family: MicrosoftYaHei;
color: #ffffff; color: #ffffff;
line-height: 40px;
align-items: center; align-items: center;
padding: 5px 0 5px 15px; padding: 5px 0 5px 15px;
margin-bottom: 25px; margin-bottom: 25px;
margin-left: 21px;
&:hover { &:hover {
//width: 790px; //width: 790px;
background: #2E5589; background: #2E5589;

53
src/components/content/airInfo/childComps/ItemInfo.vue
View File

@@ -1,45 +1,38 @@
<template> <template>
<div id="item-info"> <div id="item-info" v-if="params.wp!==undefined">
<div class="label"> <div class="label">
<div :style="{ backgroundImage: 'url(' +getImageUrl(windIcon)+')' }" class="wind-icon"></div> <div :style="{ backgroundImage: 'url(' +getImageUrl(windIcon)+')' }" class="wind-icon"></div>
<span>{{ params.name }}</span> <span>{{ params.wp.name }}</span>
</div> </div>
<div class="container" ref="length"> <div class="container" ref="length">
<div class="value" ref="value"></div> <div class="value" ref="value"></div>
<div id="point" ref="point"></div> <div id="point" ref="point"></div>
</div> </div>
<div class="value-num" :class="{ warning: isWaring }"> <div class="value-num" :class="{ warning: isWaring }">
{{ valueAndUnit }} {{ params.wp.value }} {{ params.wp.unit }}
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
const params = defineProps({ const params = defineProps({
wp: Object, wp: Object
icon: String,
name: String,
unit: String,
}); });
// const info = {
// windPId: 0, //编号 const windIcon = ref();
// max: 120, //最大值
// value: 40, //测量值
// point: 60, //阈值
// };
const windIcon = reactive(params.icon);
const length = ref(null); const length = ref(null);
const value = ref(null); const value = ref(null);
const point = ref(null); const point = ref(null);
onMounted(handleOnMounted); const isWaring = ref();
// watch(() => params.wp.value, () => {
function handleOnMounted() { // setValue();
setValue(); // });
} onMounted(() => {
if (params.wp !== undefined) {
watch(() => params.wp.value, () => { setValue();
setValue(); windIcon.value = params.wp.icon
}); }
})
const getImageUrl = (name) => { const getImageUrl = (name) => {
return new URL(`../../../../assets/images/airInfo/${name}`, import.meta.url).href return new URL(`../../../../assets/images/airInfo/${name}`, import.meta.url).href
} }
@@ -55,23 +48,25 @@ const setValue = () => {
value.value.style.background = value.value.style.background =
"linear-gradient(270deg, #38CAFB 0%, #E9D726 100%)"; "linear-gradient(270deg, #38CAFB 0%, #E9D726 100%)";
} }
isWaring.value = params.wp.value >= params.wp.point;
} }
let isWaring = computed(() => { // let isWaring = computed(() => {
return params.wp.value >= params.wp.point; // return params.wp.value >= params.wp.point;
}); // });
const valueAndUnit = computed(() => params.wp.value + " "+ params.unit );
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#item-info { #item-info {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 790px;
padding: 5px 14px; padding: 5px 14px;
margin-bottom: 30px; margin-bottom: 25px;
margin-left: 21px;
&:hover { &:hover {
width: 790px;
background: #2E5589; background: #2E5589;
border-radius: 6px; border-radius: 6px;

42
src/components/content/badGasInfo/BadGasInfo.vue
View File

@@ -3,7 +3,11 @@
id="bad-gas-info" id="bad-gas-info"
:style="{ backgroundImage: 'url(' + getImageUrl(bgImage) + ')' }"> :style="{ backgroundImage: 'url(' + getImageUrl(bgImage) + ')' }">
<div class="title">有害气体</div> <div class="title">有害气体</div>
<div class="info-list"> <div v-if="badGasList==null||badGasList.length===0" class="showNull">
<div class="loading" v-if="loading===0"></div>
{{loading===0?'加载中...':'暂无数据~'}}
</div>
<div v-else class="info-list">
<gas-info-item <gas-info-item
v-for="item in badGasList" v-for="item in badGasList"
:key="item.equipmentId" :key="item.equipmentId"
@@ -11,7 +15,6 @@
@click="handleOpenChart" @click="handleOpenChart"
/> />
</div> </div>
<div class="digital-tunnel"> <div class="digital-tunnel">
<el-dialog <el-dialog
:close-on-click-modal="false" :close-on-click-modal="false"
@@ -22,7 +25,11 @@
> >
<div class="left-top-icon"></div> <div class="left-top-icon"></div>
<div class="right-top-icon"></div> <div class="right-top-icon"></div>
<div class="chat-dialog"> <div class="loading-block" v-if="showLoading">
<div class="loading" ></div>
<span>加载中...</span>
</div>
<div class="chat-dialog" v-else>
<div id="containerBad"></div> <div id="containerBad"></div>
<div style="width: 1px"></div> <div style="width: 1px"></div>
</div> </div>
@@ -49,11 +56,13 @@ import {getBadGasEchartsInfo} from "@/api/largeScreen";
const props = defineProps({ const props = defineProps({
list: Array, list: Array,
badGasData: Array, badGasData: Array,
tunnelId: Number tunnelId: Number,
loading: Number,
}); });
const timeList = ref(["年", "月", "日"]); const timeList = ref(["年", "月", "日"]);
const selectTimeButton = ref(2); const selectTimeButton = ref(2);
const isBadGasVisited = ref(false); const isBadGasVisited = ref(false);
const showLoading = ref(false)
const badGasList = ref([]); const badGasList = ref([]);
let myEcharts = reactive({}); let myEcharts = reactive({});
const bgImage = computed(() => (isBadGasVisited.value ? "sp_active.png" : "bg.png")); const bgImage = computed(() => (isBadGasVisited.value ? "sp_active.png" : "bg.png"));
@@ -130,10 +139,12 @@ const changeData = (item) => {
}; };
}; };
const getBadGasChartInfo = () => { const getBadGasChartInfo = () => {
isBadGasVisited.value = true
showLoading.value=true
let id = props.tunnelId let id = props.tunnelId
getBadGasEchartsInfo(id).then(res => { getBadGasEchartsInfo(id).then(res => {
if (res?.code === 1000) { if (res?.code === 1000) {
isBadGasVisited.value = true showLoading.value=false
nextTick(() => { nextTick(() => {
initChart(res.data.dates, res.data) initChart(res.data.dates, res.data)
}) })
@@ -355,32 +366,31 @@ const initChart = (type, values) => {
<style lang="scss" scoped> <style lang="scss" scoped>
#bad-gas-info { #bad-gas-info {
margin-top:40px;
cursor: pointer; cursor: pointer;
position: absolute; //position: absolute;
width: 824px; width: 824px;
min-height: 300px;
//height: 621px; //height: 621px;
top: 1441px; //top: 1441px;
right: 72px; //right: 72px;
background-image: url(../../../assets/images/badGasInfo/bg.png); background-image: url(../../../assets/images/badGasInfo/bg.png);
padding: 22px 17px 25px 50px;
.title { .title {
width: 128px; font-size: 38px;
height: 45px;
font-size: 32px;
font-family: PingFang-SC, PingFang-SC;
font-weight: 800; font-weight: 800;
color: #38cafb; color: #38cafb;
line-height: 45px; line-height: 45px;
margin: 22px 0px 0px 62px; //margin: 22px 0px 0px 62px;
} }
.info-list { .info-list {
width: 100%; width: 100%;
height: calc(621px - 45px - 22px); //height: calc(621px - 45px - 22px);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
padding: 10px 0px 0px 10px; padding: 16px 0 0 10px;
} }
} }
</style> </style>

44
src/components/content/fanInfo/FanInfo.vue
View File

@@ -1,7 +1,11 @@
<template> <template>
<div id="fan_info"> <div id="fan_info">
<div class="title">风机</div> <div class="title">风机</div>
<div class="fans"> <div v-if="socketData==null||socketData.length===0" class="showNull ">
<div class="loading" v-if="loading===0"></div>
{{loading===0?'加载中...':'暂无数据~'}}
</div>
<div v-else class="fans">
<div class="fan-item" v-for="(item,index) in socketData" :key="item.equipmentId"> <div class="fan-item" v-for="(item,index) in socketData" :key="item.equipmentId">
<div> <div>
<!-- echarts --> <!-- echarts -->
@@ -69,12 +73,17 @@
</div> </div>
</div> </div>
</div> </div>
<div class="digital-tunnel"> <div class="digital-tunnel">
<el-dialog :close-on-click-modal="false" v-model="isVisited" :title="changeNum(fanIndex)+'号风机电流监控数据'" width="2175px" <el-dialog :close-on-click-modal="false" v-model="isVisited" :title="changeNum(fanIndex)+'号风机电流监控数据'" width="2175px"
:modal="false"> :modal="false">
<div class="left-top-icon"></div> <div class="left-top-icon"></div>
<div class="right-top-icon"></div> <div class="right-top-icon"></div>
<div class="chat-dialog"> <div class="loading-block" v-if="showLoading">
<div class="loading" ></div>
<span>加载中...</span>
</div>
<div class="chat-dialog" v-else>
<div id="containerFan"></div> <div id="containerFan"></div>
<div style="width: 1px;"></div> <div style="width: 1px;"></div>
</div> </div>
@@ -100,7 +109,8 @@ import {getFanEchartsInfo} from "../../../api/largeScreen";
const props = defineProps({ const props = defineProps({
list: Array, list: Array,
fanData: Array, fanData: Array,
transducerData: Array transducerData: Array,
loading: Number,
}); });
const socketData = ref() const socketData = ref()
let Echarts_info1 = null; let Echarts_info1 = null;
@@ -111,9 +121,12 @@ const stateA = ref(false)
const stateB = ref(false) const stateB = ref(false)
const stateC = ref(false) const stateC = ref(false)
const isVisited = ref(false) const isVisited = ref(false)
const showLoading = ref(false)
const fanIndex = ref(0) const fanIndex = ref(0)
let myEcharts = reactive({}); let myEcharts = reactive({});
watch(() => props.loading, (now) => {
props.loading=now
}, {deep: true});
watch(() => props.transducerData, (now) => { watch(() => props.transducerData, (now) => {
getTransData(now.frequencyChangerList) getTransData(now.frequencyChangerList)
}, {deep: true}); }, {deep: true});
@@ -148,9 +161,11 @@ watch(() => props.list, (now) => {
handleOnMounted() handleOnMounted()
}, {deep: true}); }, {deep: true});
const getFanInfo = (equipmentId) => { const getFanInfo = (equipmentId) => {
isVisited.value = true
showLoading.value=true
getFanEchartsInfo(equipmentId).then(res => { getFanEchartsInfo(equipmentId).then(res => {
if (res?.code === 1000) { if (res?.code === 1000) {
isVisited.value = true showLoading.value=false
nextTick(() => { nextTick(() => {
initChart(res.data.dates, res.data.currentsA,res.data.currentsB,res.data.currentsC) initChart(res.data.dates, res.data.currentsA,res.data.currentsB,res.data.currentsC)
}) })
@@ -158,6 +173,7 @@ const getFanInfo = (equipmentId) => {
}) })
} }
const handleOpenChart = (item,index) => { const handleOpenChart = (item,index) => {
getFanInfo(item.equipmentId) getFanInfo(item.equipmentId)
fanIndex.value=index+1 fanIndex.value=index+1
} }
@@ -167,7 +183,7 @@ const getTransData = (data) => {
data?.map(item => { data?.map(item => {
tranObj = { tranObj = {
equipmentId: item.equipmentId, equipmentId: item.equipmentId,
max: 200, max: 800,
valueA: item.phaseCurrentA, valueA: item.phaseCurrentA,
pointA: item.phaseCurrentAThreshold, pointA: item.phaseCurrentAThreshold,
valueB: item.phaseCurrentB, valueB: item.phaseCurrentB,
@@ -470,6 +486,7 @@ const initChart = (type, valueA,valueB,valueC) => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep( .el-radio__input.is-checked + .el-radio__label) { :deep( .el-radio__input.is-checked + .el-radio__label) {
color: #38CAFB; color: #38CAFB;
} }
@@ -516,11 +533,12 @@ input[type="number"] {
#fan_info { #fan_info {
//height: 1465px; //height: 1465px;
//height: 1000px; //height: 1000px;
min-height: 350px;
width: 830px; width: 830px;
position: absolute; //position: absolute;
z-index: 100; z-index: 100;
top: 184px; //top: 184px;
left: 68px; //left: 68px;
padding: 10px 10px 20px 10px; padding: 10px 10px 20px 10px;
background-image: url(../../../assets/images/fanInfo/bg.png); background-image: url(../../../assets/images/fanInfo/bg.png);
color: #2fb0df; color: #2fb0df;
@@ -529,8 +547,8 @@ input[type="number"] {
.title { .title {
width: 40%; width: 40%;
text-align: left; text-align: left;
padding: 0 0 0 62px; padding: 0 0 0 50px;
font-size: 32px; font-size: 38px;
font-weight: bold; font-weight: bold;
color: #38cafb; color: #38cafb;
line-height: 42px; line-height: 42px;
@@ -553,7 +571,7 @@ input[type="number"] {
.echart { .echart {
height: 270px; height: 270px;
width: 30%; width: 34%;
margin: 0px 0px 0px 10px; margin: 0px 0px 0px 10px;
position: relative; position: relative;
} }
@@ -659,7 +677,7 @@ input[type="number"] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: 0 20px; //padding: 0 20px;
font-size: 28px; font-size: 28px;
color: #38cafb; color: #38cafb;
line-height: 37px; line-height: 37px;

16
src/components/content/fanInfo/FanInfoItem.vue
View File

@@ -97,14 +97,14 @@ let isWaringC = computed(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.abnormal:hover { //.abnormal:hover {
background: #9C5252 !important; // background: #9C5252 !important;
border-radius: 6px; // border-radius: 6px;
//
.point { // .point {
background: #fff !important; // background: #fff !important;
} // }
} //}
.wind-pressure-item { .wind-pressure-item {
display: flex; display: flex;

76
src/components/content/usedEle/UsedEle.vue
View File

@@ -38,7 +38,11 @@
<div class="value">345v</div> <div class="value">345v</div>
</div> </div>
</div> </div>
<div class="chat-dialog"> <div class="loading-block" v-if="showLoading">
<div class="loading" ></div>
<span>加载中...</span>
</div>
<div class="chat-dialog" v-else>
<div id="containerEle"></div> <div id="containerEle"></div>
<div style="width: 1px;"></div> <div style="width: 1px;"></div>
</div> </div>
@@ -58,8 +62,8 @@ const props = defineProps({
}); });
let myEcharts = reactive({}); let myEcharts = reactive({});
const isVisited = ref(false); const isVisited = ref(false);
const eleData = ref([]) const showLoading = ref(false)
const electricityConsumptionMonthly = ref() const electricityConsumptionMonthly = ref(0)
const monthlySavings = ref(4000) const monthlySavings = ref(4000)
const length = ref(null); const length = ref(null);
const valueA = ref(); const valueA = ref();
@@ -70,51 +74,45 @@ const bgImage = computed(() =>
: "bg.png" : "bg.png"
); );
watch(() => props.eleData, (now) => { watch(() => props.eleData, (now) => {
getBasicData(now.frequencyChangerList) if(now.frequencyChangerList.length===0){
electricityConsumptionMonthly.value=0
}else {
getBasicData(now.frequencyChangerList)
}
setValueA() setValueA()
}, {deep: true}); }, {deep: true});
watch(() => props.list, (now) => { watch(() => props.list, (now) => {
eleData.value.forEach(item => { // props.eleData.forEach(item => {
now.forEach(newItem => { // now.forEach(newItem => {
if (item.equipmentId === newItem.equipmentId) { // if (item.equipmentId === newItem.equipmentId) {
if (newItem.electricityConsumptionDay) { // if (newItem.electricityConsumptionDay) {
electricityConsumptionMonthly.value = newItem.electricityConsumptionMonthly // electricityConsumptionMonthly.value = newItem.electricityConsumptionMonthly
// item.electricityConsumptionDay = newItem.electricityConsumptionDay // }
// item.electricityConsumptionMonthly = newItem.electricityConsumptionMonthly // }
// item.electricityConsumptionTotal = newItem.electricityConsumptionTotal // })
} // })
}
})
})
setValueA() setValueA()
}, {deep: true}); }, {deep: true});
onMounted(()=>{ onMounted(() => {
setValueA() setValueA()
setValueB() setValueB()
}) })
const setValueA=()=> { const setValueA = () => {
if (electricityConsumptionMonthly.value === 0 || length.value === null) {
valueA.value.style.height = `0px`;
}
let width = (electricityConsumptionMonthly.value * length.value.offsetHeight) / 10000; let width = (electricityConsumptionMonthly.value * length.value.offsetHeight) / 10000;
valueA.value.style.height = `${width}px`; valueA.value.style.height = `${width}px`;
} }
const setValueB=()=> { const setValueB = () => {
let width = (4000 * length.value.offsetHeight) / 10000; if (monthlySavings.value === 0 || length.value === null) {
valueB.value.style.height = `0px`;
}
let width = (monthlySavings.value * length.value.offsetHeight) / 10000;
valueB.value.style.height = `${width}px`; valueB.value.style.height = `${width}px`;
} }
const getBasicData = (data) => { const getBasicData = (data) => {
let tranObj = {} electricityConsumptionMonthly.value = data[0].electricityConsumptionMonthly
let tranArr = []
data?.map(item => {
electricityConsumptionMonthly.value = item.electricityConsumptionMonthly,
tranObj = {
equipmentId: item.equipmentId,
// equipmentName: item.equipmentName,
// electricityConsumptionDay: item.electricityConsumptionDay,
// electricityConsumptionMonthly: item.electricityConsumptionMonthly,
// electricityConsumptionTotal: item.electricityConsumptionTotal,
}
tranArr.push(tranObj)
})
eleData.value = tranArr
} }
const handleOpenChart = () => { const handleOpenChart = () => {
console.log('用电量弹窗') console.log('用电量弹窗')
@@ -234,15 +232,15 @@ const getImageUrl = (name) => {
} }
#used-ele { #used-ele {
//flex:1; margin-top: 40px;
cursor: pointer; cursor: pointer;
width: 830px; width: 830px;
//height: 373px; //height: 373px;
color: aliceblue; color: aliceblue;
position: absolute; //position: absolute;
top: 1220px; //top: 1220px;
//top: 1680px; //top: 1680px;
left: 68px; //left: 68px;
background-image: url(../../../assets/images/usedEle/bg.png); background-image: url(../../../assets/images/usedEle/bg.png);
padding: 21px 62px 35px 62px; padding: 21px 62px 35px 62px;
@@ -270,6 +268,7 @@ const getImageUrl = (name) => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.container { .container {
width: 60px; width: 60px;
height: 210px; height: 210px;
@@ -288,6 +287,7 @@ const getImageUrl = (name) => {
transition: width 0.5s linear 0s; transition: width 0.5s linear 0s;
} }
} }
> div:nth-child(2) { > div:nth-child(2) {
display: flex; display: flex;

36
src/components/content/windPressure/WindPressureList.vue
View File

@@ -1,7 +1,11 @@
<template> <template>
<div id="wind-pressure"> <div id="wind-pressure">
<div class="name">风压</div> <div class="name">风压</div>
<div class="list"> <div v-if="wpList==null||wpList.length===0" class="showNull">
<div class="loading" v-if="loading===0"></div>
{{loading===0?'加载中...':'暂无数据~'}}
</div>
<div v-else class="list">
<wind-pressure-item v-for="(item,index) in wpList" :key="item.equipmentId" :wp="item" <wind-pressure-item v-for="(item,index) in wpList" :key="item.equipmentId" :wp="item"
@click="handleOpenChart(item)"/> @click="handleOpenChart(item)"/>
</div> </div>
@@ -10,7 +14,11 @@
:modal="false"> :modal="false">
<div class="left-top-icon"></div> <div class="left-top-icon"></div>
<div class="right-top-icon"></div> <div class="right-top-icon"></div>
<div class="chat-dialog"> <div class="loading-block" v-if="showLoading">
<div class="loading" ></div>
<span>加载中...</span>
</div>
<div class="chat-dialog" v-else>
<div id="container"></div> <div id="container"></div>
<div style="width: 1px;"></div> <div style="width: 1px;"></div>
</div> </div>
@@ -36,15 +44,16 @@ import {getEchartsInfo} from "@/api/largeScreen";
const props = defineProps({ const props = defineProps({
list: Array, list: Array,
winData: Array winData: Array,
loading: Number,
}); });
const windSort = ref(1) const windSort = ref(1)
const timeList = ref(["年", "月", "日"]); const timeList = ref(["年", "月", "日"]);
const selectTimeButton = ref(2); const selectTimeButton = ref(2);
const isVisited = ref(false); const isVisited = ref(false);
const showLoading = ref(false)
let myEcharts = reactive({}); let myEcharts = reactive({});
const wpList = ref([]); const wpList = ref([]);
const chartData = ref()
watch(() => props.list, (now) => { watch(() => props.list, (now) => {
wpList.value.forEach(item => { wpList.value.forEach(item => {
now.forEach(newItem => { now.forEach(newItem => {
@@ -60,9 +69,11 @@ watch(() => props.winData, (now) => {
}, {deep: true}); }, {deep: true});
const getWindInfo = (equipmentId) => { const getWindInfo = (equipmentId) => {
isVisited.value = true
showLoading.value=true
getEchartsInfo(equipmentId).then(res => { getEchartsInfo(equipmentId).then(res => {
if (res?.code === 1000) { if (res?.code === 1000) {
isVisited.value = true showLoading.value=false
nextTick(() => { nextTick(() => {
initChart(res.data.dates, res.data.values) initChart(res.data.dates, res.data.values)
}) })
@@ -206,21 +217,20 @@ const initChart = (type, values) => {
#wind-pressure { #wind-pressure {
width: 830px; width: 830px;
//height: 779px; //height: 779px;
position: absolute; //position: absolute;
top: 185px; min-height: 350px;
right: 68px; //top: 185px;
//right: 68px;
background-image: url(../../../assets/images/windPressure/bg.png); background-image: url(../../../assets/images/windPressure/bg.png);
padding: 22px 17px 0 23px; padding: 22px 17px 1px 23px;
.name { .name {
width: 64px; font-size: 38px;
height: 42px;
font-size: 32px;
font-family: MicrosoftYaHei, MicrosoftYaHei; font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold; font-weight: bold;
color: #38cafb; color: #38cafb;
line-height: 42px; line-height: 42px;
margin-left: 62px; margin-left: 50px;
margin-bottom: 38px; margin-bottom: 38px;
} }
} }

9
src/router/index.js
View File

@@ -23,6 +23,15 @@ const routes = [
breadcrumb: true breadcrumb: true
}, },
}, },
{
path: '/:tunnelId',
name: 'previewTunnel',
component: () => import('@/views/tunnel/index.vue'),
meta: {
title: '隧道预览',
breadcrumb: true
},
},
{ {
path: '/edit/:tunnelId(\\d+)/:type/:userId(\\d+)', path: '/edit/:tunnelId(\\d+)/:type/:userId(\\d+)',
name: 'tunneledit', name: 'tunneledit',

41
src/views/site/index.vue
View File

@@ -62,8 +62,8 @@
<div class="siteId"> <div class="siteId">
<span>{{ title }}</span> <span>{{ title }}</span>
</div> </div>
<el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="168px"> <el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="190px">
<el-form-item label="站点名称"> <el-form-item label="站点名称" prop="siteName">
<el-input v-model="form.siteName" placeholder="请输入站点名称"/> <el-input v-model="form.siteName" placeholder="请输入站点名称"/>
</el-form-item> </el-form-item>
<el-form-item label="是否默认"> <el-form-item label="是否默认">
@@ -108,35 +108,7 @@ import {ElMessage, ElMessageBox} from "element-plus";
const router = useRouter() const router = useRouter()
const userId = reactive(router.currentRoute.value.params.userId) const userId = reactive(router.currentRoute.value.params.userId)
const siteList = ref([ const siteList = ref([])
// {
// siteName: '松江站',
// info:{
// tunnelNum: 1,
// tunnelName: '一号隧道',
// constructionLength: 500,
// implementationLength: 10
// }
// },
// {
// siteName: '松江站',
// info:{
// tunnelNum: 1,
// tunnelName: '二号隧道',
// constructionLength: 500,
// implementationLength: 10
// }
// },
// {
// siteName: '松江站',
// info:{
// tunnelNum: 1,
// tunnelName: '三号隧道',
// constructionLength: 500,
// implementationLength: 10
// }
// }
])
const siteIds = ref([]) const siteIds = ref([])
const siteNameList = ref([]) const siteNameList = ref([])
const info = ref({ const info = ref({
@@ -160,7 +132,7 @@ const form = ref({
isDefault: false isDefault: false
}); });
const formRules = ref({ const formRules = ref({
siteName: [{required: true, message: '请输入站点名称', trigger: 'blur'}] siteName: [{required: true, message: '请输入站点名称', trigger:['blur','change']}]
}) })
const formInstance = ref() const formInstance = ref()
const getList = () => { const getList = () => {
@@ -235,7 +207,7 @@ const handleAdd = () => {
} }
const handleSubmit = (instance) => { const handleSubmit = (instance) => {
if (!instance) return if (!instance) return
instance.validate(async (valid) => { instance.validate(valid => {
if (!valid) return if (!valid) return
if (title.value === '编辑站点') { if (title.value === '编辑站点') {
editSite(form.value).then((res) => { editSite(form.value).then((res) => {
@@ -328,6 +300,9 @@ const handleCurrentChange = (val) => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
:deep(.el-form-item__error){
font-size: 35px;
}
:deep(.el-radio-group) { :deep(.el-radio-group) {
margin-top: 10px; margin-top: 10px;
} }

145
src/views/tunnel-manage/index.vue
View File

@@ -5,11 +5,11 @@
<div class="back-icon"></div> <div class="back-icon"></div>
<span>返回</span> <span>返回</span>
</div> </div>
<!-- <div class="site-name">--> <div class="site-name">
<!-- {{ siteName }}--> {{ siteName }}
<!-- </div>--> </div>
<div class="tunnel-title"></div> <div class="tunnel-title"></div>
<div class="all-del-btn"> <div class="all-del-btn" v-if="showOperation">
<div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd"> <div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
添加 添加
</div> </div>
@@ -31,7 +31,7 @@
</div> </div>
<div class="box-center"> <div class="box-center">
<div> <div>
<div class="left-img"></div> <div class="left-img" @click="handlePreview(item.tunnelId)"></div>
<div> <div>
<div class="edit-btn" @click.stop="handleGoToEditTunnel(item.tunnelId)"> <div class="edit-btn" @click.stop="handleGoToEditTunnel(item.tunnelId)">
<div class="edit-icon"></div> <div class="edit-icon"></div>
@@ -57,7 +57,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="site-box add-box" @click="handleAdd"> <div class="site-box add-box" @click="handleAdd" v-if="showOperation">
<div class="add-icon"></div> <div class="add-icon"></div>
<div style="cursor: pointer">添加隧道</div> <div style="cursor: pointer">添加隧道</div>
</div> </div>
@@ -67,13 +67,13 @@
<span>{{ title }}</span> <span>{{ title }}</span>
</div> </div>
<el-form :model="form" :label-position="right" label-width="188px" :rules="formRules" ref="formInstance"> <el-form :model="form" :label-position="right" label-width="188px" :rules="formRules" ref="formInstance">
<el-form-item label="隧道名称" required> <el-form-item label="隧道名称" prop="tunnelName">
<el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/> <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
</el-form-item> </el-form-item>
<el-form-item label="序列号" required> <el-form-item label="序列号" prop="serialNumber">
<el-input v-model="form.serialNumber" placeholder="请输入序列号"/> <el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
</el-form-item> </el-form-item>
<el-form-item label="隧道长度" required> <el-form-item label="隧道长度" prop="totalLength">
<el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/> <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
</el-form-item> </el-form-item>
<el-form-item label="是否默认"> <el-form-item label="是否默认">
@@ -113,83 +113,26 @@ import {getSiteDetail} from "@/api/site";
const router = useRouter() const router = useRouter()
const showAddIcon = ref(true) const showAddIcon = ref(true)
const siteId = reactive(router.currentRoute.value.params.siteId) const params = router.currentRoute.value.params;
const userId = reactive(router.currentRoute.value.params.userId) const siteId = reactive(params.siteId)
const type = reactive(router.currentRoute.value.params.type) const userId = reactive(params.userId)
const type = reactive(params.type)
const validateNumber = (rule, value) => {
const reg = /^[A-Za-z0-9]+$/;
return reg.test(value);
}
const formRules = ref({ const formRules = ref({
tunnelName: [{required: true, message: '请输入隧道名称', trigger: 'blur'}], tunnelName: [{required: true, message: '请输入隧道名称', trigger: ['blur', 'change']}],
serialNumber: [{required: true, message: '请输入序列号', trigger: 'blur'}] serialNumber: [
{required: true, message: '请输入序列号', trigger: ['blur', 'change']},
{validator: validateNumber, message: '请输入英文、数字、英文数字组合的用户名', trigger: ['blur', 'change']}
],
totalLength: [{required: true, message: '请输入隧道长度', trigger: ['blur', 'change']}]
}) })
const showFirst = ref(true) const showFirst = ref(true)
const showOperation = ref(true)
const formInstance = ref() const formInstance = ref()
const tunnelList = ref([ const tunnelList = ref([])
{
tunnelName: '一号隧道',
num: 1,
constructionLength: 500,
implementationLength: 10
},
{
tunnelName: '二号隧道',
num: 1,
constructionLength: 500,
implementationLength: 10
},
{
tunnelName: '三号隧道',
num: 1,
constructionLength: 500,
implementationLength: 10
},
{
tunnelName: '三号隧道',
num: 1,
constructionLength: 500,
implementationLength: 10
},
{
tunnelName: '三号隧道',
num: 1,
constructionLength: 500,
implementationLength: 10
},
{
tunnelName: '三号隧道',
num: 1,
constructionLength: 500,
implementationLength: 10
},
{
tunnelName: '三号隧道',
num: 1,
constructionLength: 500,
implementationLength: 10
},
{
tunnelName: '三号隧道',
num: 1,
constructionLength: 500,
implementationLength: 10
},
{
tunnelName: '三号隧道',
num: 1,
constructionLength: 500,
implementationLength: 10
},
{
tunnelName: '三号隧道',
num: 1,
constructionLength: 500,
implementationLength: 10
},
{
tunnelName: '三号隧道',
num: 1,
constructionLength: 500,
implementationLength: 10
}
])
const iconsList = ref([ const iconsList = ref([
{ {
icon: 'sd_icon_fj.png', icon: 'sd_icon_fj.png',
@@ -244,7 +187,7 @@ const title = ref('新增隧道')
const isVisited = ref(false); const isVisited = ref(false);
const tunnelIds = ref([]) const tunnelIds = ref([])
const tunnelNameList = ref([]) const tunnelNameList = ref([])
const siteName = ref('') const siteName = ref(localStorage.getItem('site'))
const form = ref({ const form = ref({
tunnelName: '', tunnelName: '',
serialNumber: '', serialNumber: '',
@@ -259,9 +202,7 @@ const pageInfo = reactive({
}); });
const total = ref(10); const total = ref(10);
onMounted(() => { onMounted(() => {
// getSiteDetail(siteId).then((res) => { showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
// siteName.value = res.data.siteName
// });
}) })
const handleGoSiteOrIndex = () => { const handleGoSiteOrIndex = () => {
if (type === 's') { if (type === 's') {
@@ -299,16 +240,13 @@ const handleCurrentChange = (val) => {
getList() getList()
} }
const handleSubmit = (instance) => { const handleSubmit = (instance) => {
// if (!instance) return if (!instance) return
// console.log('instance',instance) instance.validate(async (valid) => {
// instance.validate(async (valid) => { if (!valid) return
// console.log('valid',valid) const data = {
// if (!valid) return siteId: siteId,
const data = { ...form.value
siteId: siteId, }
...form.value
}
if (form.value.tunnelName && form.value.serialNumber && form.value.totalLength) {
addTunnel(data).then(res => { addTunnel(data).then(res => {
if (res.code === 1000) { if (res.code === 1000) {
ElMessage.success('新增成功') ElMessage.success('新增成功')
@@ -318,10 +256,14 @@ const handleSubmit = (instance) => {
ElMessage.warning(res.msg) ElMessage.warning(res.msg)
} }
}) })
} else { })
ElMessage.warning('请先完善信息再新增') }
//预览隧道
const handlePreview = (id) => {
console.log('预览')
if (id) {
router.push('/' + id)
} }
// })
} }
const handleGoToEditTunnel = (tunnelId) => { const handleGoToEditTunnel = (tunnelId) => {
isEdit.value = true isEdit.value = true
@@ -413,6 +355,10 @@ const handleMoreDelete = () => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
:deep(.el-form-item__error) {
font-size: 35px;
}
.site-name { .site-name {
position: absolute; position: absolute;
left: 250px; left: 250px;
@@ -653,6 +599,7 @@ const handleMoreDelete = () => {
} }
.left-img { .left-img {
cursor: pointer;
margin-top: 110px; margin-top: 110px;
margin-right: 50px; margin-right: 50px;
width: 340px; width: 340px;

142
src/views/tunnel/index.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div id="main"> <div id="main">
<div class="box-top"> <div class="box-top">
<manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu" /> <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu"/>
<div class="tunnel-title"></div> <div class="tunnel-title"></div>
<!-- <manage-length class="tunnel-length"></manage-length>--> <!-- <manage-length class="tunnel-length"></manage-length>-->
<div class="top-length"> <div class="top-length">
@@ -16,8 +16,8 @@
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{ <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
item.label item.label
}} }}
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
@@ -36,28 +36,27 @@
<preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId"></preview-scene> <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId"></preview-scene>
<div class="left"> <div class="left">
<el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false" <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
:close-on-click-modal="false" :close-on-press-escape="false"> :close-on-click-modal="false" :close-on-press-escape="false">
<fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData" <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
:transducer-data="largeScreenData" /> :transducer-data="largeScreenData" :loading="showFanLoading"/>
<!-- <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />--> <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData"/>
<used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData" />
</el-drawer> </el-drawer>
<div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div> <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
<div v-else class="shrink-left" @click="closeLeft"></div> <div v-else class="shrink-left" @click="closeLeft"></div>
</div> </div>
<div class="right"> <div class="right">
<el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false" <el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
:close-on-click-modal="false" :close-on-press-escape="false"> :close-on-click-modal="false" :close-on-press-escape="false">
<wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData" /> <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData" :loading="showWindLoading"/>
<air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" /> <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" />
<bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId" /> <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId" :loading="showBadLoading"/>
</el-drawer> </el-drawer>
<div v-if="drawerRight" class="right-arrow" @click="closeRight"></div> <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
<div v-else class="shrink-right" @click="closeRight"></div> <div v-else class="shrink-right" @click="closeRight"></div>
</div> </div>
<div class="switch-btn"> <div class="switch-btn">
<div class="arrow" @click="previousBtn"></div> <div class="arrow" @click="previousBtn"></div>
<el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false" @change="changeTunnel"> <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false" :initial-index="initialIndex" @change="changeTunnel" >
<div class="btn"> <div class="btn">
<el-carousel-item v-for="item in tunnelList" :key="item.value"> <el-carousel-item v-for="item in tunnelList" :key="item.value">
{{ item.label }} {{ item.label }}
@@ -77,21 +76,23 @@ import WindPressureList from "@/components/content/windPressure/WindPressureList
import AirInfo from "@/components/content/airInfo/AirInfo.vue"; import AirInfo from "@/components/content/airInfo/AirInfo.vue";
import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue"; import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
import ManageBtn from "@/components/manageBtn/index.vue"; import ManageBtn from "@/components/manageBtn/index.vue";
import { dateFormat } from "@/utils/date.js"; import {dateFormat} from "@/utils/date.js";
import { getToken } from "@/utils/auth"; import {getToken} from "@/utils/auth";
import { useAuthStore } from "@/store/userstore.js"; import {useAuthStore} from "@/store/userstore.js";
import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen"; import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
import { ElMessage, ElMessageBox } from "element-plus"; import {ElMessage, ElMessageBox} from "element-plus";
import { getUserInfo } from "@/api/login"; import {getUserInfo} from "@/api/login";
import { initSceneData } from "@/api/tunnelScene"; import {initSceneData} from "@/api/tunnelScene";
import { getSiteDetail } from "../../api/site";
import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
const authStore = useAuthStore(); const authStore = useAuthStore();
const router = useRouter(); const router = useRouter();
const previewId = reactive(router.currentRoute.value.params.tunnelId)
const selectIndex = ref(-1); const selectIndex = ref(-1);
const showFan = ref(false); const showFan = ref(false);
const drawerLeft = ref(true); const drawerLeft = ref(true);
const initialIndex = ref(0)
const showFanLoading = ref(0)
const showWindLoading = ref(0)
const showBadLoading = ref(0)
const drawerRight = ref(true); const drawerRight = ref(true);
const showMenu = ref(false); const showMenu = ref(false);
const currentSiteId = ref(0); const currentSiteId = ref(0);
@@ -153,24 +154,25 @@ const socketData = reactive({
sensor: [], sensor: [],
}); });
onMounted(() => { onMounted(() => {
if(previewId){
getScreenInfo(previewId)
}
getUser()
getOtherInfo()
nextTick(() => { nextTick(() => {
showFan.value = true; showFan.value = true;
}); });
getUser()
getOtherInfo()
}); });
const getUser = () => { const getUser = () => {
getUserInfo().then(res => { getUserInfo().then(res => {
currentUser.value = res.data.user.userName currentUser.value = res.data.user.userName
currentUserId.value = res.data.user.userId currentUserId.value = res.data.user.userId
localStorage.setItem('roleKey', res.data.user.roles[0].roleKey)
localStorage.setItem('userId', currentUserId.value)
}) })
} }
const getDefaultSite = (siteId) => {
// console.log('siteList.value',siteList.value)
// getSiteDetail(siteId).then((res) => {
// console.log('res',res)
// });
}
const getOtherInfo = () => { const getOtherInfo = () => {
getLargeScreenInfo().then((res) => { getLargeScreenInfo().then((res) => {
if (res?.code === 1000) { if (res?.code === 1000) {
@@ -187,8 +189,17 @@ const getOtherInfo = () => {
siteList.value = res.data.siteOption siteList.value = res.data.siteOption
currentSiteId.value = res.data.siteOption[0].value currentSiteId.value = res.data.siteOption[0].value
currentSite.value = res.data.siteOption[0].label currentSite.value = res.data.siteOption[0].label
localStorage.setItem('site', currentSite.value)
tunnelList.value = res.data.tunnelOption tunnelList.value = res.data.tunnelOption
getTunnel(res.data.siteOption[0].value) if(previewId){
tunnelList.value.forEach((item, index) => {
if(item.value == previewId){
initialIndex.value = index
}
})
}else{
getTunnel(res.data.siteOption[0].value)
}
} }
}); });
}; };
@@ -197,6 +208,34 @@ const getScreenInfo = (id) => {
tunnelId.value = id tunnelId.value = id
getLargeScreen(id).then((res) => { getLargeScreen(id).then((res) => {
if (res?.code === 1000) { if (res?.code === 1000) {
if(res.data.frequencyChangerList.length!==0){
showFanLoading.value=0
}else {
showFanLoading.value=1
}
if(res.data.windPressureSensorList.length!==0){
showWindLoading.value=0
}else {
showWindLoading.value=1
}
if(res.data.sensorList.length!==0){
res.data.sensorList.forEach((item,index)=>{
if (
item.equipmentType === "carbonDioxide" ||
item.equipmentType === "carbonMonoxide" ||
item.equipmentType === "hydrogenSulfide" ||
item.equipmentType === "sulfurDioxide" ||
item.equipmentType === "sulfurMonoxide" ||
item.equipmentType === "nitrogenDioxide"
) {
showBadLoading.value=0
}else {
showBadLoading.value=1
}
})
}else {
showBadLoading.value=1
}
largeScreenData.value = res.data; largeScreenData.value = res.data;
} else { } else {
ElMessage.warning(res.msg) ElMessage.warning(res.msg)
@@ -212,7 +251,6 @@ const getScreenInfo = (id) => {
const getTunnel = (id) => { const getTunnel = (id) => {
getTunnelBySiteId(id).then((res) => { getTunnelBySiteId(id).then((res) => {
if (res?.code === 1000) { if (res?.code === 1000) {
tunnelList.value = res.data
getScreenInfo(res.data[0]?.value) getScreenInfo(res.data[0]?.value)
} }
}); });
@@ -224,6 +262,9 @@ const changeTunnel = (e) => {
newObj = item newObj = item
} }
}) })
showBadLoading.value=0
showWindLoading.value=0
showFanLoading.value=0
getScreenInfo(newObj.value) getScreenInfo(newObj.value)
nextTick(() => { nextTick(() => {
showFan.value = true; showFan.value = true;
@@ -237,7 +278,7 @@ const manageSelect = (index) => {
} }
} else if (index == '隧道管理') { } else if (index == '隧道管理') {
if (currentSiteId.value && currentUserId.value) { if (currentSiteId.value && currentUserId.value) {
router.push("/tunnel/" + currentSiteId.value + '/i'+'/' + currentUserId.value); router.push("/tunnel/" + currentSiteId.value + '/i' + '/' + currentUserId.value);
} }
} else if (index == '用户管理') { } else if (index == '用户管理') {
if (currentSiteId.value) { if (currentSiteId.value) {
@@ -316,37 +357,18 @@ const initWebSocket = () => {
socket.send(JSON.stringify(send)); socket.send(JSON.stringify(send));
}, 30000); }, 30000);
}; };
const closeSocket = () => {
socket.close();
};
initWebSocket(); initWebSocket();
// watch(
// () => tunnelId.value,
// (now) => {
// tunnelId.value = now
// },
// { deep: true }
// )
// const getTunnelPreview = () => {
// getTunnelDetail(tunnelId).then((res) => {
// if (res?.code === 1000) {
// form.value = res.data;
// }
// });
// };
// getTunnelPreview();
</script> </script>
<style lang="scss"> <style lang="scss">
//.el-drawer__body{ .el-drawer__header {
// width: 100%; display: none;
// display: flex!important; }
// flex-direction: column!important;
// flex: 1; .el-drawer__body {
// height: 100%; padding: 180px 68px 0 68px;
//} overflow: hidden;
}
.el-dropdown__popper.el-popper { .el-dropdown__popper.el-popper {
background: transparent; background: transparent;
//border: none; //border: none;

186
src/views/user/index.vue
View File

@@ -49,7 +49,7 @@
<el-table-column prop="phoneNumber" label="电话号码" align="center"/> <el-table-column prop="phoneNumber" label="电话号码" align="center"/>
<el-table-column prop="state" label="状态" align="center"> <el-table-column prop="state" label="状态" align="center">
<template #default="scope"> <template #default="scope">
{{scope.row.state=="1"?'启用':'停用'}} {{ scope.row.state == "1" ? '启用' : '停用' }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center">
@@ -70,18 +70,18 @@
</div> </div>
<el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="240px"> <el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="240px">
<el-form-item label="当前站点"> <el-form-item label="当前站点">
<div class="current-site">{{ currentSite }}<span>如果需要切换站点,请返回首屏切换</span></div> <div class="current-site">{{ currentSite }}<span v-if="showAdmin">如果需要切换站点,请返回首屏切换</span></div>
</el-form-item> </el-form-item>
<el-form-item label="输入用户名"> <el-form-item label="输入用户名" prop="userName">
<el-input v-model="form.userName" placeholder="请输入用户名"/> <el-input v-model="form.userName" placeholder="请输入用户名"/>
</el-form-item> </el-form-item>
<el-form-item label="输入密码" v-if="title==='添加用户'"> <el-form-item label="输入密码" v-if="title==='添加用户'" prop="password">
<el-input type="password" show-password v-model="form.password" placeholder="请输入密码"/> <el-input type="password" show-password v-model="form.password" placeholder="请输入密码"/>
</el-form-item> </el-form-item>
<el-form-item label="输入昵称"> <el-form-item label="输入昵称" prop="nickName">
<el-input v-model="form.nickName" placeholder="请输入昵称"/> <el-input v-model="form.nickName" placeholder="请输入昵称"/>
</el-form-item> </el-form-item>
<el-form-item label="输入电话号码"> <el-form-item label="输入电话号码" prop="phoneNumber">
<el-input v-model="form.phoneNumber" placeholder="输入电话号码"/> <el-input v-model="form.phoneNumber" placeholder="输入电话号码"/>
</el-form-item> </el-form-item>
<el-form-item label="是否启用"> <el-form-item label="是否启用">
@@ -90,7 +90,7 @@
<el-radio label="0">停用</el-radio> <el-radio label="0">停用</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="选择身份"> <el-form-item label="选择身份" prop="roleId">
<el-radio-group v-model="form.roleId" @change="(val) => { <el-radio-group v-model="form.roleId" @change="(val) => {
if (val >3){ if (val >3){
getTunnel() getTunnel()
@@ -98,22 +98,25 @@
<el-radio v-for="item in radioList" :label="item.value" :key="item.value">{{ item.label }}</el-radio> <el-radio v-for="item in radioList" :label="item.value" :key="item.value">{{ item.label }}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="选择隧道" v-if="form.roleId>3"> <el-form-item label="选择隧道" v-if="form.roleId>3" prop="tunnelList">
<el-select <div class="user-select">
v-model="form.tunnelList" <el-select
multiple v-model="form.tunnelList"
filterable multiple
clearable filterable
placeholder="请选择隧道" clearable
:fit-input-width="true" placeholder="请选择隧道"
> :fit-input-width="true"
<el-option :teleported="false"
v-for="item in tunnelList" >
:key="item.value" <el-option
:label="item.label" v-for="item in tunnelList"
:value="item.value" :key="item.value"
/> :label="item.label"
</el-select> :value="item.value"
/>
</el-select>
</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
@@ -143,12 +146,10 @@ import {addUser, editUser, getUser, getRoleOption} from "@/api/user";
import {ElMessage, ElMessageBox} from "element-plus"; import {ElMessage, ElMessageBox} from "element-plus";
import {getTunnelOption} from "@/api/tunnel"; import {getTunnelOption} from "@/api/tunnel";
import {deleteUser, getUserDetail} from "../../api/user"; import {deleteUser, getUserDetail} from "../../api/user";
import {getSiteDetail} from "@/api/site";
const router = useRouter() const router = useRouter()
const title = ref('添加用户') const title = ref('添加用户')
const siteId = reactive(router.currentRoute.value.params.siteId) const siteId = reactive(router.currentRoute.value.params.siteId)
const tunnelIndex = ref()
const username = ref() const username = ref()
const userIds = ref() const userIds = ref()
const showFirst = ref(true) const showFirst = ref(true)
@@ -161,6 +162,7 @@ const pageInfo = reactive({
}); });
const total = ref(10); const total = ref(10);
const isVisited = ref(false); const isVisited = ref(false);
const showAdmin = ref(false);
const form = ref({ const form = ref({
password: '', password: '',
userName: '', userName: '',
@@ -170,13 +172,27 @@ const form = ref({
roleId: [], roleId: [],
tunnelList: [1] tunnelList: [1]
}); });
const validateName = (rule, value) => {
const reg = /^[A-Za-z0-9]+$/;
return reg.test(value);
}
const formRules = ref({ const formRules = ref({
userName: [{required: true, message: '请输入用户名', trigger: 'blur'}], userName: [
password: [{required: true, message: '请输入密码', trigger: 'blur'}] {required: true, message: '请输入用户名', trigger: ['blur', 'change']},
{validator: validateName, message: '请输入英文、数字、英文数字组合的用户名', trigger: ['blur', 'change']}
],
password: [{required: true, message: '请输入密码', trigger: ['blur', 'change']}],
nickName: [{required: true, message: '请输入昵称', trigger: ['blur', 'change']}],
roleId: [{required: true, message: '请选择身份', trigger: ['blur', 'change']}],
tunnelList: [{required: true, message: '请选择隧道', trigger: ['blur', 'change']}]
}) })
const radioList = ref([]) const radioList = ref([])
const tunnelList = ref([]) const tunnelList = ref([])
const multipleTable = ref() const multipleTable = ref()
onMounted(() => {
showAdmin.value = localStorage.getItem('userId') == 2;
})
const getTunnel = () => { const getTunnel = () => {
getTunnelOption(siteId).then(res => { getTunnelOption(siteId).then(res => {
if (res.code === 1000) { if (res.code === 1000) {
@@ -189,9 +205,7 @@ const handleAddUser = () => {
reset() reset()
title.value = '添加用户' title.value = '添加用户'
isVisited.value = true isVisited.value = true
getSiteDetail(siteId).then((res) => { currentSite.value = localStorage.getItem('site')
currentSite.value = res.data.siteName
});
} }
const handleEditUser = (row) => { const handleEditUser = (row) => {
reset() reset()
@@ -210,7 +224,7 @@ const handleAll = () => {
multipleTable.value.toggleAllSelection() multipleTable.value.toggleAllSelection()
} }
const handleDelete = () => { const handleDelete = () => {
if (userIds.value ===undefined) { if (userIds.value === undefined) {
ElMessage.warning('请先选择用户进行删除') ElMessage.warning('请先选择用户进行删除')
} else { } else {
ElMessageBox.confirm(`是否确认删除该用户吗?`, '系统提示', { ElMessageBox.confirm(`是否确认删除该用户吗?`, '系统提示', {
@@ -273,22 +287,22 @@ const handleCurrentChange = (val) => {
pageInfo.pageNum = val pageInfo.pageNum = val
getInfo() getInfo()
} }
const handleSubmit = async (formInstance) => { const handleSubmit = (formInstance) => {
if (!formInstance) return; if (!formInstance) return;
formInstance.validate(async (valid) => { formInstance.validate((valid) => {
if (!valid) return; if (!valid) return;
const data = { const data = {
siteId: siteId, siteId: siteId,
nickName: form.value.nickName, nickName: form.value.nickName,
password: form.value.password, password: form.value.password,
phoneNumber: form.value.phoneNumber, phoneNumber: form.value.phoneNumber,
state:form.value.state, state: form.value.state,
userName: form.value.userName, userName: form.value.userName,
roleIds: [form.value.roleId], roleIds: [form.value.roleId],
tunnelList: form.value.tunnelList tunnelList: form.value.tunnelList
} }
if (title.value === '添加用户') { if (title.value === '添加用户') {
await addUser(data).then(res => { addUser(data).then(res => {
if (res.code === 1000) { if (res.code === 1000) {
getInfo() getInfo()
isVisited.value = false isVisited.value = false
@@ -298,11 +312,11 @@ const handleSubmit = async (formInstance) => {
} }
}) })
} else { } else {
const editData={ const editData = {
userId:form.value.userId, userId: form.value.userId,
...data ...data
} }
await editUser(editData).then(res => { editUser(editData).then(res => {
if (res.code === 1000) { if (res.code === 1000) {
getInfo() getInfo()
isVisited.value = false isVisited.value = false
@@ -327,8 +341,72 @@ const handleSelect = async (selection, row) => {
} }
} }
</script> </script>
<style lang="scss">
.user-select {
.el-input {
min-height: 75px;
height: auto !important;
}
.el-select__popper {
margin-top: -12px !important;
background: #072247 !important;
border: 1px solid #0F82AF !important;
}
.el-popper {
box-sizing: border-box;
}
.el-popper__arrow::before {
display: none;
}
.el-select-dropdown__item {
font-size: 38px !important;
height: 60px !important;
line-height: 60px !important;
> span {
color: #FFFFFF;
}
}
.el-select .el-input .el-select__caret {
font-size: 35px !important;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
background-color: #064B66 !important;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
background-color: #064B66 !important;
}
.el-select-tags-wrapper {
.el-tag {
padding: 28px 20px !important;
font-size: 35px;
.el-icon {
width: 40px;
height: 40px;
font-size: 40px !important;
}
}
}
}
</style>
<style scoped lang="scss"> <style scoped lang="scss">
:deep(.el-select__tags .el-tag--info) {
background-color: #05FEFF;
color: #000;
}
:deep(.el-form-item__error) {
font-size: 35px;
}
:deep(.el-input .el-input__password) { :deep(.el-input .el-input__password) {
font-size: 60px; font-size: 60px;
} }
@@ -353,10 +431,6 @@ const handleSelect = async (selection, row) => {
display: none display: none
} }
:deep(.el-select-dropdown__item:hover) {
background-color: #064B66 !important;
width: 137px !important;
}
:deep(.el-radio-group) { :deep(.el-radio-group) {
margin-top: 10px; margin-top: 10px;
@@ -523,20 +597,20 @@ const handleSelect = async (selection, row) => {
color: #FFFFFF; color: #FFFFFF;
} }
:deep(.el-input__wrapper) { //:deep(.el-input__wrapper) {
width: 300px; // width: 300px;
height: 70px; // height: 70px;
border-radius: 6px; // border-radius: 6px;
border: 1px solid #05FEFF; // border: 1px solid #05FEFF;
background-color: transparent; // background-color: transparent;
font-size: 38px; // font-size: 38px;
//
.el-input__inner { // .el-input__inner {
height: 70px; // height: 70px;
line-height: 70px; // line-height: 70px;
color: #FFFFFF; // color: #FFFFFF;
} // }
} //}
} }
} }