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

邓洁 : 有害气体echarts数据,切换站点与隧道数据渲染

Browse Source
This commit is contained in:
dengj
2023-12-18 14:38:40 +08:00
parent 61261eeee1
commit 24c54caca7
5 changed files with 147 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/api/largeScreen.js
View File

@@ -14,6 +14,13 @@ export const getLargeScreenInfo = () => {
method: 'get'
})
}
//通过站点id获取隧道信息
export const getTunnelBySiteId = (siteId) => {
return request({
url: `/tunnel/large/screen/tunnel/option/${siteId}`,
method: 'get'
})
}
// 风压echarts数据
export const getEchartsInfo = (equipmentId) => {
return request({
@@ -21,3 +28,10 @@ export const getEchartsInfo = (equipmentId) => {
method: 'get'
})
}
// 有害气体echarts数据
export const getBadGasEchartsInfo = (tunnelId) => {
return request({
url: `/tunnel/large/screen/echarts/gas/sensor/${tunnelId}`,
method: 'get'
})
}

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

@@ -81,7 +81,6 @@ body,
.current-site {
display: flex;
align-items: center;
> span:first-child {
color: #f7b500;
margin-right: 20px;

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

@@ -44,10 +44,12 @@
import GasInfoItem from "./childComps/GasInfoItem.vue";
import * as echarts from "echarts";
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue";
import {getBadGasEchartsInfo} from "@/api/largeScreen";
const props = defineProps({
list: Array,
badGasData: Array,
tunnelId:Number
});
const timeList = ref(["年", "月", "日"]);
const selectTimeButton = ref(2);
@@ -80,6 +82,14 @@ watch(
},
{ deep: true }
);
watch(
() => props.tunnelId,
(now) => {
props.tunnelId=now
},
{ deep: true }
);
const timeSelect = (index) => {
console.log("选择时间", index);
if (index === 0) {
@@ -119,12 +129,19 @@ const changeData = (item) => {
unit: item.unit,
};
};
const getBadGasChartInfo = () => {
console.log('tunnnelid--------',props.tunnelId)
getBadGasEchartsInfo(props.tunnelId).then(res => {
if (res?.code === 1000) {
isVisited.value = true
nextTick(() => {
initChart(res.data.dates, res.data)
})
}
})
}
const handleOpenChart = () => {
console.log("有害气体弹窗");
isVisited.value = true;
nextTick(() => {
initChart();
});
getBadGasChartInfo()
};
const getImageUrl = (name) => {
return new URL(`../../../assets/images/badGasInfo/${name}`, import.meta.url)
@@ -133,7 +150,7 @@ const getImageUrl = (name) => {
/**
* 初始化echarts实例方法
*/
const initChart = () => {
const initChart = (type, values) => {
//3.初始化container容器
myEcharts = echarts.init(document.getElementById("containerBad"));
//5.传入数据
@@ -196,33 +213,34 @@ const initChart = () => {
//X轴
xAxis: {
type: "category",
data: [
"00:00",
"01:00",
"02:00",
"03:00",
"04:00",
"05:00",
"06:00",
"07:00",
"08:00",
"09:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00",
"21:00",
"22:00",
"23:00",
"24:00",
],
// data: [
// "00:00",
// "01:00",
// "02:00",
// "03:00",
// "04:00",
// "05:00",
// "06:00",
// "07:00",
// "08:00",
// "09:00",
// "10:00",
// "11:00",
// "12:00",
// "13:00",
// "14:00",
// "15:00",
// "16:00",
// "17:00",
// "18:00",
// "19:00",
// "20:00",
// "21:00",
// "22:00",
// "23:00",
// "24:00",
// ],
data:type,
axisLabel: {
textStyle: {
fontSize: 45,
@@ -244,10 +262,11 @@ const initChart = () => {
series: [
{
name: "二氧化碳",
data: [
56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76,
69, 25, 31, 49, 81, 63,
],
// data: [
// 56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76,
// 69, 25, 31, 49, 81, 63,
// ],
data:values.carbonDioxideValues,
type: "line",
smooth: true,
symbolSize: 24,
@@ -257,10 +276,11 @@ const initChart = () => {
},
{
name: "一氧化碳",
data: [
96, 38, 75, 10, 62, 81, 41, 27, 69, 16, 33, 57, 73, 87, 22, 46, 11,
79, 51, 29, 60, 48, 83, 15,
],
// data: [
// 96, 38, 75, 10, 62, 81, 41, 27, 69, 16, 33, 57, 73, 87, 22, 46, 11,
// 79, 51, 29, 60, 48, 83, 15,
// ],
data:values.carbonMonoxideValues,
type: "line",
smooth: true,
symbolSize: 24,
@@ -270,10 +290,11 @@ const initChart = () => {
},
{
name: "二氧化氮",
data: [
53, 88, 10, 67, 92, 31, 74, 46, 20, 37, 85, 16, 63, 70, 41, 99, 25,
77, 82, 13, 68, 49, 55, 7, 39,
],
// data: [
// 53, 88, 10, 67, 92, 31, 74, 46, 20, 37, 85, 16, 63, 70, 41, 99, 25,
// 77, 82, 13, 68, 49, 55, 7, 39,
// ],
data:values.nitrogenDioxideValues,
type: "line",
smooth: true,
symbolSize: 24,
@@ -283,10 +304,11 @@ const initChart = () => {
},
{
name: "一氧化氮",
data: [
37, 19, 85, 62, 28, 91, 43, 76, 14, 68, 33, 52, 71, 26, 97, 49, 82,
17, 66, 30, 78, 55, 23, 47,
],
// data: [
// 37, 19, 85, 62, 28, 91, 43, 76, 14, 68, 33, 52, 71, 26, 97, 49, 82,
// 17, 66, 30, 78, 55, 23, 47,
// ],
data:values.sulfurMonoxideValues,
type: "line",
smooth: true,
symbolSize: 24,
@@ -296,10 +318,11 @@ const initChart = () => {
},
{
name: "二氧化硫",
data: [
6, 30, 91, 77, 28, 51, 42, 83, 16, 65, 35, 72, 18, 96, 47, 79, 100,
23, 80, 44, 62, 59, 13, 86,
],
// data: [
// 6, 30, 91, 77, 28, 51, 42, 83, 16, 65, 35, 72, 18, 96, 47, 79, 100,
// 23, 80, 44, 62, 59, 13, 86,
// ],
data:values.sulfurDioxideValues,
type: "line",
smooth: true,
symbolSize: 24,
@@ -309,10 +332,11 @@ const initChart = () => {
},
{
name: "硫化氢",
data: [
13, 27, 39, 51, 62, 73, 84, 95, 10, 20, 30, 40, 50, 60, 70, 80, 90,
100, 11, 21, 31, 41, 51,
],
// data: [
// 13, 27, 39, 51, 62, 73, 84, 95, 10, 20, 30, 40, 50, 60, 70, 80, 90,
// 100, 11, 21, 31, 41, 51,
// ],
data:values.hydrogenSulfideValues,
type: "line",
smooth: true,
symbolSize: 24,

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

@@ -31,7 +31,7 @@
import WindPressureItem from "./childComps/WindPressureItem.vue";
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
import * as echarts from 'echarts';
import {getEchartsInfo} from "../../../api/largeScreen";
import {getEchartsInfo} from "@/api/largeScreen";
const props = defineProps({
list: Array,
@@ -60,7 +60,6 @@ watch(() => props.winData, (now) => {
const getWindInfo = (equipmentId) => {
getEchartsInfo(equipmentId).then(res => {
console.log('res-wind', res)
if (res?.code === 1000) {
isVisited.value = true
nextTick(() => {

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

@@ -7,7 +7,14 @@
<div class="top-right">
<div class="current-site">
当前站点：<span>{{ currentSite }}</span>
<div class="toggle"></div>
<el-dropdown trigger="click" @command="handleCommand">
<div class="toggle"></div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{ item.label }}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<div class="current-user">
上午好：<span>{{ currentUser }}</span>
@@ -32,7 +39,7 @@
:close-on-click-modal="false" :close-on-press-escape="false">
<wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-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"/>
<bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"/>
</el-drawer>
<div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
<div v-else class="shrink-right" @click="closeRight"></div>
@@ -62,10 +69,9 @@ import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
import ManageBtn from "@/components/manageBtn/index.vue";
import ManageLength from "@/components/manageLength/index.vue";
import {dateFormat} from "@/utils/date.js";
import {onMounted} from "vue";
import {getToken} from "@/utils/auth";
import {useAuthStore} from "@/store/userstore.js";
import {getLargeScreen, getLargeScreenInfo} from "@/api/largeScreen";
import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
import {ElMessageBox} from "element-plus";
import {getUserInfo} from "@/api/login";
@@ -75,7 +81,8 @@ const selectIndex = ref(-1);
const showFan = ref(false);
const drawerLeft = ref(true);
const drawerRight = ref(true);
const currentSite = ref("松江站");
const currentSite = ref("");
const siteList = ref([])
const currentUser = ref("");
const currentDate = ref(dateFormat());
const tunnelBtn = ref();
@@ -114,8 +121,9 @@ const getOtherInfo = () => {
if (res?.code === 1000) {
routeList.value = res.data.routeList
currentSite.value = res.data.siteOption[0].label
tunnelList.value = res.data.tunnelOption
siteList.value = res.data.siteOption
tunnelId.value = res.data.tunnelOption[0].value
getTunnel(res.data.siteOption[0].value)
getScreenInfo(tunnelId.value);
}
});
@@ -127,8 +135,17 @@ const getScreenInfo = async (id) => {
}
});
};
//根据站点id获取隧道信息
const getTunnel = (id) => {
getTunnelBySiteId(id).then((res) => {
if (res?.code === 1000) {
tunnelList.value = res.data
getScreenInfo(res.data[0].value)
}
});
}
const changeTunnel = (e) => {
console.log('e', e,tunnelList.value)
tunnelId.value = e
let newObj = {}
tunnelList.value.forEach((item, index) => {
if (index === e) {
@@ -139,7 +156,6 @@ const changeTunnel = (e) => {
nextTick(() => {
showFan.value = true;
});
console.log('newObj', newObj)
}
const manageSelect = (index) => {
console.log("首页点击-", index);
@@ -149,6 +165,11 @@ const manageSelect = (index) => {
router.push("/tunnel/1");
}
};
const handleCommand=(item)=>{
console.log('commads',item)
currentSite.value=item.label
getTunnel(item.value)
}
const closeLeft = () => {
drawerLeft.value = !drawerLeft.value;
};
@@ -216,7 +237,29 @@ const closeSocket = () => {
};
initWebSocket();
</script>
<style lang="scss">
.el-popper{
border: 1px solid #0F82AF;
.el-scrollbar__wrap {
.el-dropdown__list {
.el-dropdown-menu {
background-color:#072247;
.el-dropdown-menu__item{
color: #FFFFFF;
border:none;
}
.el-dropdown-menu__item:hover{
background-color:#072247;
color: #08B7B8;
}
}
}
}
}
</style>
<style lang="scss" scoped>
#main {
height: 100%;