426 lines
9.7 KiB
Vue
426 lines
9.7 KiB
Vue
|
<template>
|
|||
|
|
<Card title="锚杆内力监测">
|
|||
|
|
<div class="pit-right-first">
|
|||
|
|
<div class="pit-content">
|
|||
|
|
<div class="select-right">
|
|||
|
|
<div style="width: 33%; margin-right: 5%">
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="rangeTime"
|
|||
|
|
type="datetimerange"
|
|||
|
|
range-separator="至"
|
|||
|
|
start-placeholder="开始时间"
|
|||
|
|
end-placeholder="结束时间"
|
|||
|
|
:clearable="false"
|
|||
|
|
size="small"
|
|||
|
|
@change="selectRangeTime"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<el-select v-model="selectPoint" style="width: 15%; margin-right: 5%" size="small">
|
|||
|
|
<el-option v-for="(item, index) in pointList" :key="index" :label="item.dayType" :value="item.value" />
|
|||
|
|
</el-select>
|
|||
|
|
<el-select v-model="selectTime" style="width: 15%" size="small">
|
|||
|
|
<el-option v-for="(item, index) in timeList" :key="index" :label="item.dayType" :value="item.value" />
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
<div id="pitRightFirst" ref="pitRightFirst" 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, reactive, 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("内力(kN)" as any);
|
|||
|
|
// Y轴数据
|
|||
|
|
let yData1 = ref([
|
|||
|
|
["2023-9-19 05:15:00", 12],
|
|||
|
|
["2023-9-19 15:15:00", 160],
|
|||
|
|
["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]
|
|||
|
|
] as any);
|
|||
|
|
|
|||
|
|
// 图表数据项
|
|||
|
|
let option = ref(null as any);
|
|||
|
|
// 选中
|
|||
|
|
let rangeTime = ref("");
|
|||
|
|
let selectPoint = ref(1);
|
|||
|
|
let selectTime = ref(1);
|
|||
|
|
|
|||
|
|
// 当前对应的种类
|
|||
|
|
// let nowType = ref("温度");
|
|||
|
|
let pointList = ref([
|
|||
|
|
{
|
|||
|
|
value: 1,
|
|||
|
|
dayType: "基坑监测点001"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 2,
|
|||
|
|
dayType: "基坑监测点002"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 3,
|
|||
|
|
dayType: "基坑监测点003"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 4,
|
|||
|
|
dayType: "基坑监测点004"
|
|||
|
|
}
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
let timeList = ref([
|
|||
|
|
{
|
|||
|
|
value: 1,
|
|||
|
|
dayType: "本次内力"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 2,
|
|||
|
|
dayType: "本次变化"
|
|||
|
|
}
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
// 时间轴起止时间
|
|||
|
|
let startValue = ref("2023-9-19 05:15:00" as any);
|
|||
|
|
let endValue = ref("2023-9-21 05:15:00" as any);
|
|||
|
|
|
|||
|
|
function selectRangeTime(e: any) {
|
|||
|
|
console.log("选择时间", e);
|
|||
|
|
startValue.value = e[0];
|
|||
|
|
endValue.value = e[1];
|
|||
|
|
drawChart();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initOption() {
|
|||
|
|
option.value = {
|
|||
|
|
// backgroundColor: '#071c3a',
|
|||
|
|
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) {
|
|||
|
|
// console.log("tooltip", params);
|
|||
|
|
let currentMarker = "";
|
|||
|
|
let currentState = "";
|
|||
|
|
if (params[0].value[1] > 150 || params[0].value[1] < -150) {
|
|||
|
|
currentState = "超出报警值";
|
|||
|
|
currentMarker = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#f00;"> </span>`;
|
|||
|
|
} else {
|
|||
|
|
currentMarker = params[0].marker;
|
|||
|
|
currentState = "正常";
|
|||
|
|
}
|
|||
|
|
return (
|
|||
|
|
params[0].axisValueLabel +
|
|||
|
|
params[0].name +
|
|||
|
|
"<br/>" +
|
|||
|
|
"分类:" +
|
|||
|
|
// params[0].seriesName +
|
|||
|
|
"本次内力" +
|
|||
|
|
"<br/>" +
|
|||
|
|
currentMarker +
|
|||
|
|
// params[0].marker +
|
|||
|
|
"状态:" +
|
|||
|
|
currentState +
|
|||
|
|
"<br/>" +
|
|||
|
|
params[0].seriesName +
|
|||
|
|
":" +
|
|||
|
|
params[0].value[1] +
|
|||
|
|
"kN"
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
top: "35%",
|
|||
|
|
left: "7%",
|
|||
|
|
right: "3%",
|
|||
|
|
bottom: "20%"
|
|||
|
|
// containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
type: "time",
|
|||
|
|
minInterval: 3600 * 1000 * 6,
|
|||
|
|
min: startValue.value,
|
|||
|
|
max: endValue.value,
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#14346C"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitArea: {
|
|||
|
|
// show: true,
|
|||
|
|
color: "#f00",
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#f00"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
color: "#fff",
|
|||
|
|
formatter: function (value) {
|
|||
|
|
//在这里写你需要的时间格式
|
|||
|
|
let t_date = new Date(value);
|
|||
|
|
return (
|
|||
|
|
[t_date.getMonth() + 1, t_date.getDate()].join("-") +
|
|||
|
|
" " +
|
|||
|
|
[t_date.getHours(), t_date.getMinutes()].join(":") +
|
|||
|
|
"0:00"
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
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",
|
|||
|
|
min: -300,
|
|||
|
|
max: 300,
|
|||
|
|
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: true,
|
|||
|
|
// symbol: `image://${symbolIcon2}`,
|
|||
|
|
// symbol: "circle",
|
|||
|
|
symbolSize: 8,
|
|||
|
|
smooth: true, //是否平滑
|
|||
|
|
name: "基坑监测点001",
|
|||
|
|
type: "line",
|
|||
|
|
// symbol: "emptyCircle",
|
|||
|
|
color: "#4AC0F3",
|
|||
|
|
data: yData1.value,
|
|||
|
|
markLine: {
|
|||
|
|
// 添加 MarkLine 组件配置
|
|||
|
|
data: [
|
|||
|
|
// { type: 'average', name: '平均值' }, // 平均值标注线
|
|||
|
|
{ yAxis: 250, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
|
|||
|
|
{ yAxis: 150, name: "控制值", lineStyle: { color: "#EEA959" } }, // 自定义阈值标注线
|
|||
|
|
{ yAxis: -250, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
|
|||
|
|
{ yAxis: -150, name: "控制值", lineStyle: { color: "#EEA959" } } // 自定义阈值标注线
|
|||
|
|
],
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
// color: function (params) {
|
|||
|
|
// console.log(params, "特殊值");
|
|||
|
|
// // return params.lineStyle.color;
|
|||
|
|
// },
|
|||
|
|
color: "inherit",
|
|||
|
|
fontSize: 14,
|
|||
|
|
position: "insideEndBottom",
|
|||
|
|
distance: [15, -15],
|
|||
|
|
formatter: function (params) {
|
|||
|
|
return params.value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// function countTime() {
|
|||
|
|
// // 设置起始时间和结束时间
|
|||
|
|
// let startDate = new Date("2023-09-18T18:02:00");
|
|||
|
|
// let endDate = new Date("2023-09-21T19:02:00");
|
|||
|
|
// // 存放小时数
|
|||
|
|
// let timeData = [];
|
|||
|
|
// // 返回特定小时数
|
|||
|
|
// const hours = [0, 6, 12, 18]; // 0时、6时、12时、18时
|
|||
|
|
// for (let i = 0; i < 72; i++) {
|
|||
|
|
// // 每次循环，将时间递增一小时
|
|||
|
|
// const date = new Date(startDate);
|
|||
|
|
// date.setHours(startDate.getHours() + i);
|
|||
|
|
|
|||
|
|
// // 仅将特定小时数进行处理
|
|||
|
|
// if (hours.includes(date.getHours())) {
|
|||
|
|
// // 格式化为mm-dd hh:00:00格式
|
|||
|
|
// const month = ("0" + (date.getMonth() + 1)).slice(-2);
|
|||
|
|
// const day = ("0" + date.getDate()).slice(-2);
|
|||
|
|
// const hour = ("0" + date.getHours()).slice(-2);
|
|||
|
|
// const formattedTime = `2023-${month}-${day} ${hour}:00:00`;
|
|||
|
|
// timeData.push(formattedTime);
|
|||
|
|
// // console.log(formattedTime, "时间");
|
|||
|
|
// }
|
|||
|
|
// // 超过结束时间，退出循环
|
|||
|
|
// if (date >= endDate) {
|
|||
|
|
// break;
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// twenty_four_time.value = timeData;
|
|||
|
|
// drawChart();
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
function drawChart() {
|
|||
|
|
initOption();
|
|||
|
|
// console.log("绘制前数据", yData.value);
|
|||
|
|
let pitRightFirst = echarts.init(document.getElementById("pitRightFirst"));
|
|||
|
|
pitRightFirst.setOption(option.value);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//获取当前时间-24小时
|
|||
|
|
// function generateTimes() {
|
|||
|
|
// let timeArrays = new Array(24).fill("");
|
|||
|
|
// timeArrays.forEach((item, index) => (timeArrays[index] = (index < 10 ? "0" + index : index) + ":00"));
|
|||
|
|
// return timeArrays;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
onMounted(async () => {
|
|||
|
|
drawChart();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
|
|||
|
|
onBeforeUnmount(async () => {
|
|||
|
|
mitts.off("devSn");
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.pit-right-first {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
.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%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.pit-content {
|
|||
|
|
height: 100%;
|
|||
|
|
background: url("@/assets/images/cardImg.png") no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
position: relative;
|
|||
|
|
.select-right {
|
|||
|
|
position: absolute;
|
|||
|
|
display: flex;
|
|||
|
|
right: -25%;
|
|||
|
|
width: 100%;
|
|||
|
|
top: 5%;
|
|||
|
|
z-index: 9;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
: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>
|