438 lines
9.3 KiB
Vue
438 lines
9.3 KiB
Vue
<template>
|
||
<Card title="监测曲线">
|
||
<div class="concrete-bottom-left">
|
||
<div class="choice-right">
|
||
<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">温度</div>
|
||
<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">温差</div>
|
||
<div class="month selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">降温速度</div>
|
||
</div>
|
||
|
||
<div class="concrete-content">
|
||
<div class="select-right">
|
||
<el-date-picker v-model="selectTime" type="date" size="small" />
|
||
</div>
|
||
<div id="concreteLine" ref="concreteLine" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import Card from "@/components/card.vue";
|
||
// import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";
|
||
|
||
import { onMounted, ref, onBeforeUnmount } from "vue";
|
||
import * as echarts from "echarts";
|
||
// import { getSelectDataListApi } from "@/api/modules/distribution";
|
||
// import Card from "@/components/card.vue";
|
||
import { GlobalStore } from "@/stores";
|
||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||
const store = GlobalStore();
|
||
// x轴
|
||
// let twenty_four_time = ref([] as any);
|
||
// Y轴单位
|
||
let unit = ref("" as any);
|
||
// Y轴数据
|
||
// let yData1 = ref([
|
||
// ["2023-9-19 05:15:00", 12],
|
||
// ["2023-9-19 15:15:00", 200],
|
||
// ["2023-9-19 17:15:00", 50],
|
||
// ["2023-9-19 19:15:00", 24],
|
||
// ["2023-9-20 05:15:00", 30],
|
||
// ["2023-9-20 15:15:00", 60]
|
||
// ]);
|
||
|
||
// 图表数据项
|
||
let option = ref(null as any);
|
||
// 选中
|
||
// let rangeTime = ref("");
|
||
let selectPoint = ref(1);
|
||
let selectTime = ref("2023-09-01");
|
||
|
||
// 选中
|
||
let checked = ref(1);
|
||
function getNowData(type: any) {
|
||
checked.value = type;
|
||
// 初始化option
|
||
// drawChart();
|
||
}
|
||
function getWeekData(type: any) {
|
||
checked.value = type;
|
||
// 初始化option
|
||
// drawChart();
|
||
}
|
||
function getMonthData(type: any) {
|
||
checked.value = type;
|
||
// 初始化option
|
||
// drawChart();
|
||
}
|
||
|
||
let typeList = ref([
|
||
{
|
||
value: 1,
|
||
dayType: "表面温度",
|
||
typeUnit: "℃"
|
||
},
|
||
{
|
||
value: 2,
|
||
dayType: "中上层温度",
|
||
typeUnit: "℃"
|
||
},
|
||
{
|
||
value: 3,
|
||
dayType: "中层温度",
|
||
typeUnit: "℃"
|
||
},
|
||
{
|
||
value: 4,
|
||
dayType: "中下层温度",
|
||
typeUnit: "℃"
|
||
},
|
||
{
|
||
value: 5,
|
||
dayType: "底层温度",
|
||
typeUnit: "℃"
|
||
}
|
||
]);
|
||
|
||
// 时间轴起止时间
|
||
let startValue = ref("2023-9-19 05:15:00" as any);
|
||
let endValue = ref("2023-9-21 05:15:00" as any);
|
||
|
||
function selectChange(e: any) {
|
||
console.log("当前日期", e);
|
||
drawChart();
|
||
}
|
||
|
||
function initOption() {
|
||
option.value = {
|
||
// backgroundColor: '#071c3a',
|
||
legend: {
|
||
align: "left",
|
||
top: "5%",
|
||
left: "2%",
|
||
textStyle: {
|
||
color: "#FFFFFF",
|
||
fontSize: 14,
|
||
padding: [0, 0, 0, 10]
|
||
},
|
||
icon: "rect",
|
||
itemGap: 25,
|
||
itemWidth: 10,
|
||
itemHeight: 10
|
||
},
|
||
// dataZoom: [
|
||
// {
|
||
// // orient: "vertical", //水平显示
|
||
// type: "slider",
|
||
// show: true, //显示滚动条
|
||
// height: 0,
|
||
// // startValue: startValue.value, //起始值
|
||
// // endValue: endValue.value, //结束值
|
||
// start: 0,
|
||
// end: 35,
|
||
// showDetail: false,
|
||
// bottom: "8%",
|
||
// moveHandleStyle: {
|
||
// color: "#4AC0F3"
|
||
// },
|
||
// backgroundColor: "#193C8D"
|
||
// }
|
||
// ],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
backgroundColor: "rgba(0, 0, 0, 0.9)",
|
||
borderColor: "#010306",
|
||
textStyle: {
|
||
color: "#FFFFFF"
|
||
},
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(0, 255, 233,0)"
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: "rgba(255, 255, 255,1)"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(0, 255, 233,0)"
|
||
}
|
||
],
|
||
global: false
|
||
}
|
||
}
|
||
},
|
||
formatter: function (params: any) {
|
||
// console.log("tooltip", params);
|
||
let currentInnerHtml = "";
|
||
let nowTime = params[0].axisValueLabel;
|
||
for (let index = 0; index < params.length; index++) {
|
||
let pointType = params[index].seriesName;
|
||
let pointValue = params[index].data[1];
|
||
let currentTypeData = typeList.value.filter((item: any) => {
|
||
return item.dayType === params[index].seriesName;
|
||
});
|
||
let unit = currentTypeData[0].typeUnit;
|
||
// console.log(unit, "单位");
|
||
currentInnerHtml = currentInnerHtml + "</br>" + params[index].marker + pointType + " " + pointValue + unit;
|
||
}
|
||
return nowTime + currentInnerHtml;
|
||
}
|
||
},
|
||
grid: {
|
||
top: "20%",
|
||
left: "5%",
|
||
right: "3%",
|
||
bottom: "10%"
|
||
// containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#14346C"
|
||
}
|
||
},
|
||
splitArea: {
|
||
// show: true,
|
||
color: "#f00",
|
||
lineStyle: {
|
||
color: "#f00"
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: "#fff"
|
||
// formatter: function (value: any) {
|
||
// //需要的时间格式
|
||
// let t_date = new Date(value);
|
||
// let nowMinutes: any = t_date.getMinutes();
|
||
// if (nowMinutes < 10) {
|
||
// nowMinutes = "0" + nowMinutes;
|
||
// }
|
||
// let nowSeconds: any = t_date.getSeconds();
|
||
// if (nowSeconds < 10) {
|
||
// nowSeconds = "0" + nowSeconds;
|
||
// }
|
||
// return (
|
||
// [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join("-") +
|
||
// " " +
|
||
// [t_date.getHours(), nowMinutes, nowSeconds].join(":")
|
||
// );
|
||
// }
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
boundaryGap: false
|
||
// data: twenty_four_time.value
|
||
}
|
||
],
|
||
|
||
yAxis: [
|
||
{
|
||
name: unit.value,
|
||
nameGap: 25,
|
||
nameTextStyle: {
|
||
align: "right", // 将 Y 轴名称文字右对齐
|
||
verticalAlign: "middle", // 将 Y 轴名称文字垂直居中
|
||
padding: [0, 5, 0, 0], // 设置名称文字的内边距，调整位置
|
||
color: "#fff",
|
||
nameLocation: "start"
|
||
},
|
||
type: "value",
|
||
splitNumber: 3,
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#14346C"
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#14346C"
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
margin: 20,
|
||
textStyle: {
|
||
color: "#fff"
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: true
|
||
}
|
||
}
|
||
],
|
||
series: []
|
||
// [
|
||
// // {
|
||
// // showAllSymbol: false,
|
||
// // smooth: true, //是否平滑
|
||
// // name: "监测点001",
|
||
// // type: "line",
|
||
// // showSymbol: false,
|
||
// // color: "#4AC0F3",
|
||
// // data: yData1.value
|
||
// // }
|
||
// ]
|
||
};
|
||
|
||
for (let i = 0; i < typeList.value.length; i++) {
|
||
// 根据点位的种类画图(立杆倾斜,水平位移,立杆轴力,地基沉降)
|
||
|
||
// 测试点位数据[x,y]
|
||
let data = [
|
||
["00:00", 42 * 2 * (i + 1)],
|
||
["02:00", 24 * 2 * (i + 1)],
|
||
["04:00", 35 * 2 * (i + 1)],
|
||
["06:00", 30 * 2 * (i + 1)],
|
||
["08:00", 20 * 2 * (i + 1)],
|
||
["10:00", 50 * 2 * (i + 1)],
|
||
["12:00", 24 * 2 * (i + 1)],
|
||
["14:00", 30 * 2 * (i + 1)],
|
||
["16:00", 55 * 2 * (i + 1)],
|
||
["18:00", 30 * 2 * (i + 1)],
|
||
["20:00", 30 * 2 * (i + 1)],
|
||
["22:00", 30 * 2 * (i + 1)],
|
||
["24:00", 30 * 2 * (i + 1)]
|
||
];
|
||
let lineObj = {
|
||
smooth: true, //是否平滑
|
||
name: typeList.value[i].dayType,
|
||
type: "line",
|
||
showSymbol: true,
|
||
symbol: "emptyCircle",
|
||
symbolSize: 6,
|
||
// color: "#4AC",
|
||
data: data
|
||
};
|
||
option.value.series.push(lineObj);
|
||
}
|
||
}
|
||
|
||
function drawChart() {
|
||
initOption();
|
||
// console.log("绘制前数据", option.value);
|
||
let chartDom = document.getElementById("concreteLine");
|
||
if (chartDom) {
|
||
chartDom.removeAttribute("_echarts_instance_");
|
||
}
|
||
let concreteLine = echarts.init(document.getElementById("concreteLine"));
|
||
concreteLine.setOption(option.value);
|
||
}
|
||
|
||
onMounted(async () => {
|
||
drawChart();
|
||
});
|
||
|
||
// 即时销毁事件总线派发，否则会执行两次mitts.on造成不必要的内存浪费 7.14 by CJP
|
||
onBeforeUnmount(async () => {
|
||
mitts.off("devSn");
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.concrete-bottom-left {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
.title {
|
||
height: 10%;
|
||
line-height: 33px;
|
||
text-align: left;
|
||
font-size: calc(100vw * 18 / 1920);
|
||
color: #ffffff;
|
||
background: url("@/assets/images/titleBig.webp") no-repeat;
|
||
background-size: 100% 100%;
|
||
i {
|
||
font-family: OPPOSansH;
|
||
margin-left: 6%;
|
||
}
|
||
}
|
||
.concrete-content {
|
||
height: 100%;
|
||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
.select-right {
|
||
position: absolute;
|
||
display: flex;
|
||
right: 22%;
|
||
width: 10%;
|
||
top: 5%;
|
||
z-index: 9;
|
||
}
|
||
}
|
||
}
|
||
|
||
.choice-right {
|
||
width: 25%;
|
||
display: flex;
|
||
position: absolute;
|
||
z-index: 99;
|
||
color: #fff;
|
||
font-size: 10px;
|
||
text-align: center;
|
||
line-height: 20px;
|
||
right: -6%;
|
||
top: 5%;
|
||
.selected {
|
||
height: 5%;
|
||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
}
|
||
.day {
|
||
padding: 0 5%;
|
||
margin-right: 4%;
|
||
z-index: 99;
|
||
}
|
||
.week {
|
||
padding: 0 5%;
|
||
margin-right: 4%;
|
||
z-index: 99;
|
||
}
|
||
.month {
|
||
padding: 0 5%;
|
||
z-index: 99;
|
||
}
|
||
.active {
|
||
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
:deep(.el-input__wrapper) {
|
||
background: #112d59;
|
||
}
|
||
:deep(.el-input__inner) {
|
||
color: #fff;
|
||
}
|
||
:deep(.el-select .el-input .el-select__caret) {
|
||
color: #fff;
|
||
}
|
||
:deep(.el-date-editor) {
|
||
width: 100%;
|
||
}
|
||
:deep(.el-range-separator) {
|
||
color: #fff;
|
||
}
|
||
:deep(.el-date-editor .el-range-input) {
|
||
color: #fff;
|
||
}
|
||
</style>
|