422 lines
9.6 KiB
Vue
422 lines
9.6 KiB
Vue
<template>
|
|
<Card title="高支模累计变形量">
|
|
<div class="formwork-bottom-right">
|
|
<div class="formwork-content">
|
|
<div class="select-right">
|
|
<el-select v-model="selectPoint" style="width: 100%" size="small" @change="selectChange">
|
|
<el-option
|
|
v-for="(item, index) in pointList"
|
|
:key="index"
|
|
:label="item.measurePointName"
|
|
:value="item.measurePointNumber"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
<div id="formworkLine" ref="formworkLine" style="width: 100%; height: 100%"></div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import Card from "@/components/card.vue";
|
|
import { onMounted, ref, onBeforeUnmount } from "vue";
|
|
import * as echarts from "echarts";
|
|
import { highFormworkPoint, countTransform } from "@/api/modules/highFormwork";
|
|
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("");
|
|
// let selectTime = ref(1);
|
|
|
|
// 当前对应的种类
|
|
// let nowType = ref("温度");
|
|
const pointList = ref([] as any);
|
|
|
|
let typeList = ref([
|
|
{
|
|
value: 1,
|
|
dayType: "立杆倾斜",
|
|
typeUnit: "°",
|
|
key: "poleTilt"
|
|
},
|
|
{
|
|
value: 2,
|
|
dayType: "水平位移",
|
|
typeUnit: "mm",
|
|
key: "horizontalDisplacement"
|
|
},
|
|
{
|
|
value: 3,
|
|
dayType: "立杆轴力",
|
|
typeUnit: "N",
|
|
key: "poleAxialForce"
|
|
},
|
|
{
|
|
value: 4,
|
|
dayType: "地基沉降",
|
|
typeUnit: "mm",
|
|
key: "foundationSettlement"
|
|
},
|
|
{
|
|
value: 5,
|
|
dayType: "模板沉降",
|
|
typeUnit: "mm",
|
|
key: "formworkSettlement"
|
|
}
|
|
]);
|
|
|
|
// 时间轴起止时间
|
|
let startValue = ref("2023-9-19 05:15:00" as any);
|
|
let endValue = ref("2023-9-21 05:15:00" as any);
|
|
|
|
const selectChange = async () => {
|
|
await getCountTransform();
|
|
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: "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: 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",
|
|
// min: 0,
|
|
// max: 500,
|
|
// 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 = [
|
|
// ["2023-9-19 05:15:00", 42 * 2 * (i + 1)],
|
|
// ["2023-9-19 07:15:00", 24 * 2 * (i + 1)],
|
|
// ["2023-9-19 09:15:00", 35 * 2 * (i + 1)],
|
|
// ["2023-9-19 10:15:00", 30 * 2 * (i + 1)],
|
|
// ["2023-9-19 15:15:00", 20 * 2 * (i + 1)],
|
|
// ["2023-9-19 17:15:00", 50 * 2 * (i + 1)],
|
|
// ["2023-9-19 20:15:00", 24 * 2 * (i + 1)],
|
|
// ["2023-9-20 05:15:00", 30 * 2 * (i + 1)],
|
|
// ["2023-9-20 15:15:00", 55 * 2 * (i + 1)]
|
|
// ];
|
|
// let lineObj = {
|
|
// showAllSymbol: false,
|
|
// smooth: true, //是否平滑
|
|
// name: typeList.value[i].dayType,
|
|
// type: "line",
|
|
// showSymbol: false,
|
|
// // color: "#4AC",
|
|
// data: data
|
|
// };
|
|
// option.value.series.push(lineObj);
|
|
// }
|
|
}
|
|
|
|
function drawChart() {
|
|
// console.log("绘制前数据", option.value);
|
|
let chartDom = document.getElementById("formworkLine");
|
|
if (chartDom) {
|
|
chartDom.removeAttribute("_echarts_instance_");
|
|
}
|
|
let formworkLine = echarts.init(document.getElementById("formworkLine"));
|
|
formworkLine.setOption(option.value);
|
|
}
|
|
// 获取累计变形量
|
|
const getCountTransform = async () => {
|
|
const res: any = await countTransform({ projectSn: store.sn, measurePointNumber: selectPoint.value });
|
|
console.log("获取高支模累计变形量", res);
|
|
option.value.series = []; // 每次渲染先置空
|
|
for (let i = 0; i < typeList.value.length; i++) {
|
|
// 根据点位的种类画图(立杆倾斜,水平位移,立杆轴力,地基沉降)
|
|
let responseData = res.result;
|
|
let data = [] as any;
|
|
for (let x = 0; x < responseData.length; x++) {
|
|
data.push([responseData[x].time, responseData[x][typeList.value[i].key]]);
|
|
}
|
|
let lineObj = {
|
|
showAllSymbol: false,
|
|
smooth: true, //是否平滑
|
|
name: typeList.value[i].dayType,
|
|
type: "line",
|
|
showSymbol: false,
|
|
// color: "#4AC",
|
|
data: data
|
|
};
|
|
option.value.series.push(lineObj);
|
|
}
|
|
console.log(option.value, "66666777777");
|
|
};
|
|
// 获取监测点数据
|
|
const getMonitorViewPoint = async () => {
|
|
const res: any = await highFormworkPoint({ projectSn: store.sn, pageNo: -1 });
|
|
console.log("获取测点数据", res);
|
|
pointList.value = res.result.records;
|
|
if (res.result.records && res.result.records.length > 0) {
|
|
selectPoint.value = res.result.records[0].measurePointNumber;
|
|
}
|
|
};
|
|
onMounted(async () => {
|
|
initOption();
|
|
await getMonitorViewPoint();
|
|
await getCountTransform();
|
|
drawChart();
|
|
});
|
|
|
|
onBeforeUnmount(async () => {
|
|
mitts.off("devSn");
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.formwork-bottom-right {
|
|
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%;
|
|
}
|
|
}
|
|
.formwork-content {
|
|
height: 100%;
|
|
background: url("@/assets/images/cardImg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
.select-right {
|
|
position: absolute;
|
|
display: flex;
|
|
right: 3%;
|
|
width: 10%;
|
|
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>
|