唐润平：视角切换修改版-重新提交
This commit is contained in:
trp
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<div id="bad-gas-info">
|
||||
<div
|
||||
id="bad-gas-info"
|
||||
:style="{ backgroundImage: 'url(' + getImageUrl(bgImage) + ')' }"
|
||||
>
|
||||
<div class="title">有害气体</div>
|
||||
<div class="info-list">
|
||||
<gas-info-item
|
||||
@@ -9,133 +12,50 @@
|
||||
@click="handleOpenChart"
|
||||
/>
|
||||
</div>
|
||||
<el-dialog
|
||||
v-model="isVisited"
|
||||
title="有害气体监控数据"
|
||||
width="1996px"
|
||||
:modal="false"
|
||||
>
|
||||
<div class="left-icon"></div>
|
||||
<div class="right-icon"></div>
|
||||
<div id="container" ref="chart" @click.stop></div>
|
||||
<div class="time-select"></div>
|
||||
</el-dialog>
|
||||
|
||||
<div class="digital-tunnel">
|
||||
<el-dialog
|
||||
v-model="isVisited"
|
||||
title="有害气体监控数据"
|
||||
width="2400px"
|
||||
:modal="false"
|
||||
>
|
||||
<div class="left-top-icon"></div>
|
||||
<div class="right-top-icon"></div>
|
||||
<div class="chat-dialog">
|
||||
<div id="container"></div>
|
||||
<div style="width: 1px"></div>
|
||||
</div>
|
||||
<div class="time-select">
|
||||
<time-range-btn
|
||||
:buttonList="timeList"
|
||||
v-model="selectTimeButton"
|
||||
@select="timeSelect"
|
||||
/>
|
||||
</div>
|
||||
<div class="left-bottom-icon"></div>
|
||||
<div class="right-bottom-icon"></div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
>>>>>>> 077ff6a0744d396411f6b0bd5f409d42997965e9
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import GasInfoItem from "./childComps/GasInfoItem.vue";
|
||||
import * as echarts from "echarts";
|
||||
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue";
|
||||
|
||||
const props = defineProps({
|
||||
list: Array,
|
||||
badGasData: Array,
|
||||
});
|
||||
const timeList = ref(["年", "月", "日"]);
|
||||
const selectTimeButton = ref(2);
|
||||
const isVisited = ref(false);
|
||||
const badGasList = ref([]);
|
||||
const chart = ref(null);
|
||||
let myEcharts = reactive({});
|
||||
const option = reactive({
|
||||
//图例
|
||||
legend: {
|
||||
left: 0,
|
||||
textStyle: {
|
||||
color: "#FFFFFF",
|
||||
fontSize: 28,
|
||||
},
|
||||
// itemWidth: 20,
|
||||
// itemHeight: 20
|
||||
},
|
||||
//离容器四侧的距离
|
||||
grid: {
|
||||
left: 45, // 左边距
|
||||
// right: 60, // 右边距
|
||||
top: 60, // 顶边距
|
||||
bottom: 40, // 底边距
|
||||
// containLabel: true,
|
||||
},
|
||||
//提示框组件
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: "axis",
|
||||
},
|
||||
//X轴
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: 24,
|
||||
color: "#D6F1FA",
|
||||
},
|
||||
},
|
||||
},
|
||||
//Y轴
|
||||
yAxis: {
|
||||
type: "value",
|
||||
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: 24,
|
||||
color: "#D6F1FA",
|
||||
},
|
||||
},
|
||||
},
|
||||
//配置项
|
||||
series: [
|
||||
{
|
||||
name: "二氧化碳",
|
||||
data: [5, 9, 10, 7, 8, 15, 12],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 24,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "一氧化碳",
|
||||
data: [8, 15, 5, 9, 10, 7, 12],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 24,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "二氧化氮",
|
||||
data: [5, 15, 1, 9, 10, 7, 8],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 24,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "二氧化硫",
|
||||
data: [8, 15, 12, 5, 9, 2, 7],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 24,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "硫化氢",
|
||||
data: [2, 9, 10, 15, 12, 7, 8],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 24,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const bgImage = computed(() => (isVisited.value ? "sp_active.png" : "bg.png"));
|
||||
watch(
|
||||
() => props.list,
|
||||
(now) => {
|
||||
@@ -157,13 +77,16 @@ watch(
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
initChart();
|
||||
});
|
||||
});
|
||||
|
||||
const timeSelect = (index) => {
|
||||
console.log("选择时间", index);
|
||||
if (index === 0) {
|
||||
console.log("--年");
|
||||
} else if (index === 1) {
|
||||
console.log("--月");
|
||||
} else if (index === 2) {
|
||||
console.log("--日");
|
||||
}
|
||||
};
|
||||
const getBadGasInfo = (now) => {
|
||||
let windPressureObj = {};
|
||||
let windPressureArr = [];
|
||||
@@ -195,16 +118,175 @@ const changeData = (item) => {
|
||||
const handleOpenChart = () => {
|
||||
console.log("有害气体弹窗");
|
||||
isVisited.value = true;
|
||||
initChart();
|
||||
nextTick(() => {
|
||||
initChart();
|
||||
});
|
||||
};
|
||||
const getImageUrl = (name) => {
|
||||
return new URL(`../../../assets/images/badGasInfo/${name}`, import.meta.url)
|
||||
.href;
|
||||
};
|
||||
/**
|
||||
* 初始化echarts实例方法
|
||||
*/
|
||||
const initChart = () => {
|
||||
//3.初始化container容器
|
||||
myEcharts = echarts.init(chart.value);
|
||||
myEcharts = echarts.init(document.getElementById("container"));
|
||||
//5.传入数据
|
||||
myEcharts.setOption(option, true);
|
||||
let option = {
|
||||
//图例
|
||||
legend: {
|
||||
left: 0,
|
||||
textStyle: {
|
||||
color: "#FFFFFF",
|
||||
fontSize: 40,
|
||||
},
|
||||
// itemWidth: 20,
|
||||
// itemHeight: 20
|
||||
},
|
||||
//离容器四侧的距离
|
||||
grid: {
|
||||
left: 0, // 左边距
|
||||
right: 20, // 右边距
|
||||
top: 80, // 顶边距
|
||||
bottom: 0, // 底边距
|
||||
containLabel: true,
|
||||
},
|
||||
//提示框组件
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: "axis",
|
||||
},
|
||||
//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",
|
||||
],
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: 45,
|
||||
color: "#D6F1FA",
|
||||
},
|
||||
},
|
||||
},
|
||||
//Y轴
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: 45,
|
||||
color: "#D6F1FA",
|
||||
},
|
||||
},
|
||||
},
|
||||
//配置项
|
||||
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,
|
||||
],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 24,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
},
|
||||
},
|
||||
{
|
||||
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,
|
||||
],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 24,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
},
|
||||
},
|
||||
{
|
||||
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,
|
||||
],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 24,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
},
|
||||
},
|
||||
{
|
||||
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,
|
||||
],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 24,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
},
|
||||
},
|
||||
{
|
||||
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,
|
||||
],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 24,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
},
|
||||
},
|
||||
{
|
||||
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,
|
||||
],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 24,
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myEcharts.setOption(option);
|
||||
//图表大小自适应窗口大小变化
|
||||
window.onresize = () => {
|
||||
myEcharts.resize();
|
||||
@@ -213,37 +295,6 @@ const initChart = () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#container {
|
||||
box-sizing: border-box;
|
||||
height: 754px;
|
||||
width: 1996px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
:deep(.el-dialog) {
|
||||
border: 2px solid #0f82af;
|
||||
background: rgba(6, 34, 71, 0.78);
|
||||
border-radius: 20px;
|
||||
padding: 47px 30px;
|
||||
box-sizing: border-box;
|
||||
margin: 588px auto 0 auto;
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 0;
|
||||
//display: none;
|
||||
.el-dialog__title {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #d6f1fa;
|
||||
}
|
||||
|
||||
.el-dialog__close {
|
||||
color: #05feff;
|
||||
font-size: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#bad-gas-info {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
@@ -251,36 +302,8 @@ const initChart = () => {
|
||||
height: 621px;
|
||||
top: 1441px;
|
||||
right: 72px;
|
||||
background-image: url(@/assets/images/badGasInfo/bg.png);
|
||||
background-image: url(../../../assets/images/badGasInfo/bg.png);
|
||||
|
||||
.left-icon {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
background-image: url(@/assets/images/badGasInfo/sp_jz.png);
|
||||
}
|
||||
|
||||
.right-icon {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: -3px;
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
background-image: url(@/assets/images/badGasInfo/sp_jz.png);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.time-select {
|
||||
position: absolute;
|
||||
top: 47px;
|
||||
right: 119px;
|
||||
//display: flex;
|
||||
width: 204px;
|
||||
height: 68px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #0f82af;
|
||||
}
|
||||
.title {
|
||||
width: 128px;
|
||||
height: 45px;
|
||||
|
||||
Reference in New Issue
Block a user