fix: 编写基坑监测页面
This commit is contained in:
cjp
parent
72487bbe04
commit
14b7cb5896
BIN
src/assets/images/foundationPitMonitor/pointPic.png
Normal file
BIN
src/assets/images/foundationPitMonitor/pointPic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
@ -117,6 +117,11 @@ export const staticRouter: RouteRecordRaw[] = [
|
||||
path: "/toxicGasMonitor",
|
||||
name: "有毒气体监测",
|
||||
component: () => import("@/views/sevenLargeScreen/safetyManagement/toxicGasMonitor/index.vue")
|
||||
},
|
||||
{
|
||||
path: "/foundationPitMonitor",
|
||||
name: "基坑监测",
|
||||
component: () => import("@/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/index.vue")
|
||||
}
|
||||
],
|
||||
meta: {
|
||||
|
||||
@ -131,7 +131,6 @@ let menuList = ref([
|
||||
moduleName: "劳务管理",
|
||||
modulePath: "/laborManagement"
|
||||
},
|
||||
|
||||
{
|
||||
moduleName: "安全管理",
|
||||
modulePath: "/securityManagement",
|
||||
@ -140,6 +139,10 @@ let menuList = ref([
|
||||
menuName: "安全管理",
|
||||
companyPath: "/securityManagement"
|
||||
},
|
||||
{
|
||||
companyPath: "/foundationPitMonitor",
|
||||
menuName: "基坑监测"
|
||||
},
|
||||
{
|
||||
menuName: "临边防护",
|
||||
companyPath: "/edgeProtection"
|
||||
|
||||
@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div class="pit-box">
|
||||
<div class="pit-content">
|
||||
<div class="pit-left">
|
||||
<div class="left-top">
|
||||
<div class="top-left">
|
||||
<TopLeft></TopLeft>
|
||||
</div>
|
||||
<div class="top-right">
|
||||
<TopRight></TopRight>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-bottom">
|
||||
<LeftBottom></LeftBottom>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pit-right">
|
||||
<div class="right-first">
|
||||
<RightFirst></RightFirst>
|
||||
</div>
|
||||
<div class="right-second">
|
||||
<RightSecond></RightSecond>
|
||||
</div>
|
||||
<div class="right-third">
|
||||
<RightThird></RightThird>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TopLeft from "@/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/topLeft.vue";
|
||||
import TopRight from "@/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/topRight.vue";
|
||||
import LeftBottom from "@/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/leftBottom.vue";
|
||||
import RightFirst from "@/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightFirst.vue";
|
||||
import RightSecond from "@/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightSecond.vue";
|
||||
import RightThird from "@/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightThird.vue";
|
||||
|
||||
export default {
|
||||
components: { TopLeft, TopRight, LeftBottom, RightFirst, RightSecond, RightThird }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pit-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.pit-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.pit-left {
|
||||
width: 50%;
|
||||
margin-right: 1%;
|
||||
.left-top {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
margin-bottom: 1%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.top-left {
|
||||
width: 49%;
|
||||
margin-right: 1%;
|
||||
}
|
||||
.top-right {
|
||||
width: 49%;
|
||||
}
|
||||
}
|
||||
.left-bottom {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 1% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pit-right {
|
||||
width: 50%;
|
||||
.right-first {
|
||||
height: 30%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 1% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right-second {
|
||||
height: 30%;
|
||||
margin-top: 4%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 1% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right-third {
|
||||
height: 30%;
|
||||
margin-top: 4%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 1% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<Card title="土地深层水平位移监测">
|
||||
<div class="pit-left-bottom">
|
||||
<div class="methane-content">
|
||||
<div class="select-right">
|
||||
<el-form-item label="测点编号">
|
||||
<el-select v-model="selectPoint" style="width: 75%" size="small">
|
||||
<el-option v-for="(item, index) in pointList" :key="index" :label="item.dayType" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="次数">
|
||||
<el-select v-model="selectTime" style="width: 70%" size="small">
|
||||
<el-option v-for="(item, index) in timeList" :key="index" :label="item.dayType" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<div class="check-time">监测时间: {{ checkTime }}</div>
|
||||
</div>
|
||||
<div id="pitLeftBottom" ref="pitLeftBottom" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import symbolIcon from "@/assets/images/toxicGasMonitor/lineIcon.png";
|
||||
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"; //兄弟组件传值
|
||||
let checkTime = ref("2023-08-23 19:08:26" as any);
|
||||
const store = GlobalStore();
|
||||
// x轴
|
||||
|
||||
// 图表数据项
|
||||
let option = ref(null as any);
|
||||
// 选中
|
||||
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: "1次"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
dayType: "2次"
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
dayType: "3次"
|
||||
}
|
||||
]);
|
||||
|
||||
function initOption() {
|
||||
option.value = {
|
||||
legend: {
|
||||
show: true,
|
||||
bottom: "3%",
|
||||
icon: "rect",
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
itemGap: 55,
|
||||
textStyle: {
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
},
|
||||
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 currentInnerHtml = "";
|
||||
for (let index = 0; index < params.length; index++) {
|
||||
let nowTime = params[index].seriesName;
|
||||
let displace = params[index].data[0];
|
||||
let deepHeight = params[index].data[1];
|
||||
let stateText = "正常";
|
||||
let markLine = params[index].marker;
|
||||
if (displace > 40 || displace < -40) {
|
||||
stateText = "异常";
|
||||
}
|
||||
currentInnerHtml =
|
||||
currentInnerHtml +
|
||||
checkTime.value +
|
||||
"<br/>" +
|
||||
"第" +
|
||||
nowTime +
|
||||
"<br/>" +
|
||||
markLine +
|
||||
"状态: " +
|
||||
stateText +
|
||||
"<br/>" +
|
||||
"位移: " +
|
||||
displace +
|
||||
"mm" +
|
||||
"<br/>" +
|
||||
"深度: " +
|
||||
" " +
|
||||
deepHeight +
|
||||
"m" +
|
||||
"<br/>" +
|
||||
"<br/>";
|
||||
}
|
||||
return currentInnerHtml;
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: "25%",
|
||||
left: "8%",
|
||||
right: "12%",
|
||||
bottom: "20%"
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "value", // 设置 X 轴为数值轴
|
||||
name: "位移（mm）", // 设置 X 轴的名称，表示位移
|
||||
position: "top",
|
||||
nameLocation: "end", // 设置 X 轴名称的位置
|
||||
nameGap: 20, // 设置 X 轴名称与轴线的距离
|
||||
inverse: false, // 不反转 X 轴
|
||||
nameTextStyle: {
|
||||
// align: "right", // 将 Y 轴名称文字右对齐
|
||||
// verticalAlign: "middle", // 将 Y 轴名称文字垂直居中
|
||||
// padding: [0, 0, 0, 10], // 设置名称文字的内边距，调整位置
|
||||
color: "#fff"
|
||||
// nameLocation: "start"
|
||||
},
|
||||
min: -60,
|
||||
max: 60,
|
||||
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
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
position: "left",
|
||||
type: "value", // 设置 Y 轴为数值轴
|
||||
name: "深度（m）", // 设置 Y 轴的名称，表示深度
|
||||
nameLocation: "end", // 设置 Y 轴名称的位置
|
||||
nameGap: 25, // 设置 Y 轴名称与轴线的距离
|
||||
inverse: true, // 反转 Y 轴，使其变为第四象限坐标系
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
verticalAlign: "middle",
|
||||
padding: [0, 760, 0, 0] // 设置名称文字的内边距，调整位置
|
||||
},
|
||||
alignTicks: true,
|
||||
// min: 0,
|
||||
// max: 140,
|
||||
splitNumber: 3,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
color: "#4AC0F3",
|
||||
name: "1次",
|
||||
type: "line", // 设置系列类型为折线图
|
||||
data: [
|
||||
[-48, 1],
|
||||
[-25, 2],
|
||||
[23, 5],
|
||||
[42, 3],
|
||||
[51, 6]
|
||||
], // 调整数据点的 x 坐标为负数，使其显示在第四象限
|
||||
markLine: {
|
||||
// 添加 MarkLine 组件配置
|
||||
data: [
|
||||
// { type: 'average', name: '平均值' }, // 平均值标注线
|
||||
{ xAxis: 40, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
|
||||
{ xAxis: 60, name: "控制值", lineStyle: { color: "#EEA959" } }, // 自定义阈值标注线
|
||||
{ xAxis: -40, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
|
||||
{ xAxis: -60, name: "控制值", lineStyle: { color: "#EEA959" } } // 自定义阈值标注线
|
||||
],
|
||||
label: {
|
||||
normal: {
|
||||
color: "inherit",
|
||||
fontSize: 14,
|
||||
position: "insideEndBottom",
|
||||
distance: [0, -25],
|
||||
formatter: function (params) {
|
||||
return params.name + "（" + params.value + "）";
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
smooth: true // 设置线条平滑显示
|
||||
},
|
||||
{
|
||||
color: "#81F279",
|
||||
name: "2次",
|
||||
type: "line", // 设置系列类型为折线图
|
||||
data: [
|
||||
[-48, 1],
|
||||
[-37, 2],
|
||||
[25, 5],
|
||||
[43, 3],
|
||||
[51, 6]
|
||||
], // 调整数据点的 x 坐标为负数，使其显示在第四象限
|
||||
smooth: true // 设置线条平滑显示
|
||||
},
|
||||
{
|
||||
color: "#6375C7",
|
||||
name: "3次",
|
||||
type: "line", // 设置系列类型为折线图
|
||||
data: [
|
||||
[-48, 1],
|
||||
[-45, 2],
|
||||
[23, 5],
|
||||
[45, 3],
|
||||
[52, 6]
|
||||
], // 调整数据点的 x 坐标为负数，使其显示在第四象限
|
||||
smooth: true // 设置线条平滑显示
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
function drawChart() {
|
||||
initOption();
|
||||
// console.log("绘制前数据", yData.value);
|
||||
let pitLeftBottom = echarts.init(document.getElementById("pitLeftBottom"));
|
||||
pitLeftBottom.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-left-bottom {
|
||||
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%;
|
||||
}
|
||||
}
|
||||
.methane-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: 50%;
|
||||
top: 5%;
|
||||
z-index: 9;
|
||||
.check-time {
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
margin-top: 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
background: #112d59;
|
||||
padding-left: 10%;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-select .el-input .el-select__caret) {
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-form-item--default .el-form-item__label) {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,425 @@
|
||||
<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>
|
||||
@ -0,0 +1,425 @@
|
||||
<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="pitRightSecond" ref="pitRightSecond" 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("位移(mm)" as any);
|
||||
// Y轴数据
|
||||
let yData1 = ref([
|
||||
["2023-9-19 05:15:00", 12],
|
||||
["2023-9-19 15:15:00", 16],
|
||||
["2023-9-19 17:15:00", 5],
|
||||
["2023-9-19 19:15:00", 14],
|
||||
["2023-9-20 05:15:00", 10],
|
||||
["2023-9-20 15:15:00", 40]
|
||||
] 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] > 15 || params[0].value[1] < -15) {
|
||||
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] +
|
||||
"mm"
|
||||
);
|
||||
}
|
||||
},
|
||||
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, 0, 0, 0], // 设置名称文字的内边距，调整位置
|
||||
color: "#fff",
|
||||
nameLocation: "start"
|
||||
},
|
||||
type: "value",
|
||||
min: -30,
|
||||
max: 30,
|
||||
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: 25, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
|
||||
{ yAxis: 15, name: "控制值", lineStyle: { color: "#EEA959" } }, // 自定义阈值标注线
|
||||
{ yAxis: -25, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
|
||||
{ yAxis: -15, 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 pitRightSecond = echarts.init(document.getElementById("pitRightSecond"));
|
||||
pitRightSecond.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>
|
||||
@ -0,0 +1,425 @@
|
||||
<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="pitRightThird" ref="pitRightThird" 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("位移(mm)" 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 pitRightThird = echarts.init(document.getElementById("pitRightThird"));
|
||||
pitRightThird.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>
|
||||
@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<Card title="点位图">
|
||||
<div class="pit-top-left">
|
||||
<div class="point-state-top">
|
||||
<div class="common">
|
||||
<div class="background"></div>
|
||||
<div class="state-text">正常</div>
|
||||
</div>
|
||||
<div class="warn">
|
||||
<div class="background"></div>
|
||||
<div class="state-text">超出报警值</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="background"></div>
|
||||
<div class="state-text">超出控制值</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="point-map">
|
||||
<img src="@/assets/images/foundationPitMonitor/pointPic.png" alt="" />
|
||||
<div class="point-list" v-for="item in list" :key="item.id">
|
||||
<div
|
||||
class="point-item"
|
||||
:class="
|
||||
item.alarmState == 1
|
||||
? 'changeColor1'
|
||||
: item.alarmState == 2
|
||||
? 'changeColor2'
|
||||
: item.alarmState == 3
|
||||
? 'changeColor3'
|
||||
: ''
|
||||
"
|
||||
:style="{
|
||||
left: item.xMap + 'px',
|
||||
top: item.yMap + 'px'
|
||||
}"
|
||||
@click="openDialog(item)"
|
||||
></div>
|
||||
<div
|
||||
class="item-dialog"
|
||||
:style="{
|
||||
left: item.xMap + 20 + 'px',
|
||||
top: item.yMap - 10 + 'px'
|
||||
}"
|
||||
v-if="item.id === currentIndex && showDialog"
|
||||
@click="closeDialog"
|
||||
>
|
||||
<div class="triangle"></div>
|
||||
<div class="dialog-title">{{ item.pointName }}</div>
|
||||
<div class="dialog-text">监测类型:地下水位</div>
|
||||
<div class="dialog-text">单次变化值:0.56mm</div>
|
||||
<div class="dialog-text">累计变化值:2.04mm</div>
|
||||
<div class="dialog-text">变化速率:0.96mm/d</div>
|
||||
<div class="dialog-text">采集时间:2023-01-01 15:00:00</div>
|
||||
<div style="border-bottom: 1px solid rgba(255, 255, 255, 0.2); margin-top: 5%"></div>
|
||||
<div class="dialog-text">当前累计变化值为2.04mm,超过报警值10mm,偏差为39.1mm</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="check-time">已安全监测: 2065天19时30分28秒</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
let currentIndex = ref(1 as any);
|
||||
let showDialog = ref(false as any);
|
||||
function openDialog(item: any) {
|
||||
currentIndex.value = item.id;
|
||||
showDialog.value = true;
|
||||
}
|
||||
function closeDialog() {
|
||||
showDialog.value = false;
|
||||
console.log("点击");
|
||||
}
|
||||
const list = reactive([
|
||||
{
|
||||
id: 1,
|
||||
alarmState: 1,
|
||||
xMap: 150,
|
||||
yMap: 70,
|
||||
pointName: "基坑监测点001"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
alarmState: 2,
|
||||
xMap: 120,
|
||||
yMap: 70,
|
||||
pointName: "基坑监测点002"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
alarmState: 1,
|
||||
xMap: 180,
|
||||
yMap: 90,
|
||||
pointName: "基坑监测点003"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
alarmState: 3,
|
||||
xMap: 80,
|
||||
yMap: 100,
|
||||
pointName: "基坑监测点004"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.item-dialog {
|
||||
width: 189px;
|
||||
padding: 2%;
|
||||
left: 100%;
|
||||
top: -40%;
|
||||
z-index: 10;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
background-color: #000000;
|
||||
position: absolute;
|
||||
.dialog-title {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding-bottom: 2%;
|
||||
}
|
||||
.dialog-time {
|
||||
margin-top: 4%;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
.dialog-text {
|
||||
margin-top: 5%;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.triangle {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: -4%;
|
||||
top: 5%;
|
||||
border-top: 8px solid transparent;
|
||||
border-bottom: 8px solid transparent;
|
||||
border-right: 12px solid #000000;
|
||||
}
|
||||
}
|
||||
.changeColor1 {
|
||||
background: #48da39;
|
||||
}
|
||||
.changeColor2 {
|
||||
background: #eea959;
|
||||
}
|
||||
.changeColor3 {
|
||||
background: #ec6266;
|
||||
}
|
||||
.pit-top-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.point-map {
|
||||
width: 80%;
|
||||
height: 70%;
|
||||
margin: 0 auto;
|
||||
margin-top: 5%;
|
||||
position: relative;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.point-list {
|
||||
.point-item {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
.point-state-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-top: 5%;
|
||||
margin-left: 5%;
|
||||
.common {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.background {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 15%;
|
||||
background: #48da39;
|
||||
}
|
||||
.state-text {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.warn {
|
||||
width: 30%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.background {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 15%;
|
||||
background: #eea959;
|
||||
}
|
||||
.state-text {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.control {
|
||||
width: 30%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.background {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-right: 15%;
|
||||
background: #ec6266;
|
||||
}
|
||||
.state-text {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.check-time {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
margin-top: 3%;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,406 @@
|
||||
<template>
|
||||
<Card title="近30天报警情况统计">
|
||||
<div class="load-top-right">
|
||||
<div id="pitWeekWarn" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Card from "@/components/card.vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { noop } from "@vueuse/core";
|
||||
const store = GlobalStore();
|
||||
const airType = ref(1);
|
||||
// 选中
|
||||
let checked = ref(1);
|
||||
function getNowData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
// initOption();
|
||||
}
|
||||
function getWeekData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
// initOption();
|
||||
}
|
||||
function getMonthData(type: any) {
|
||||
checked.value = type;
|
||||
// 初始化option
|
||||
// initOption();
|
||||
}
|
||||
let rangeTime = ref("" as any);
|
||||
let dataList = ref([
|
||||
{
|
||||
value: 25,
|
||||
show: true,
|
||||
name: "超出控制值",
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#EC6266",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 75,
|
||||
show: true,
|
||||
name: "超出报警值",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#EEA959",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
]);
|
||||
function Pie() {
|
||||
let dataArr = [];
|
||||
for (let i = 0; i < 150; i++) {
|
||||
if (i % 2 === 0) {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#7cf4f1",
|
||||
borderWidth: 0,
|
||||
borderColor: "#7f6546"
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
borderWidth: 0,
|
||||
borderColor: "rgba(0,0,0,0)"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
return dataArr;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
drawEchart();
|
||||
});
|
||||
|
||||
function drawEchart() {
|
||||
let max = 0;
|
||||
dataList.value.map(item => {
|
||||
max = max + item.value;
|
||||
});
|
||||
let echartsTest = echarts.init(document.getElementById("pitWeekWarn"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.9)",
|
||||
borderColor: "#010306",
|
||||
textStyle: {
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
formatter: function (params) {
|
||||
// console.log(params.seriesName, "当前图例");
|
||||
let result = " " + params.marker + params.name + " : " + params.value;
|
||||
if (params.seriesName == "数据主体") {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: max,
|
||||
subtext: "风险总数",
|
||||
x: "55%",
|
||||
y: "26%",
|
||||
textAlign: "right",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 26,
|
||||
fontWeight: "normal",
|
||||
fontFamily: "sadigitalNumber",
|
||||
lineHeight: 50
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#ccc",
|
||||
fontSize: 14,
|
||||
fontWeight: "normal"
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
selectedMode: false, // 取消图例上的点击事件
|
||||
icon: "rect",
|
||||
type: "plain",
|
||||
orient: "vertical",
|
||||
left: "center",
|
||||
bottom: "10%",
|
||||
itemGap: 20,
|
||||
itemWidth: 10, // 设置宽度
|
||||
itemHeight: 10, // 设置高度
|
||||
symbolKeepAspect: false,
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF",
|
||||
rich: {
|
||||
name: {
|
||||
width: 110,
|
||||
verticalAlign: "left"
|
||||
},
|
||||
value: {
|
||||
width: 110,
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
},
|
||||
data: dataList.value.map(item => {
|
||||
if (item.show) {
|
||||
return item.name;
|
||||
}
|
||||
}),
|
||||
formatter: function (data: any) {
|
||||
if (dataList.value && dataList.value.length) {
|
||||
for (let i = 0; i < dataList.value.length; i++) {
|
||||
if (data === dataList.value[i].name) {
|
||||
let value = dataList.value[i].value;
|
||||
let valuePercent = ((dataList.value[i].value / max) * 100).toFixed(2);
|
||||
return "{name| " + data + "}" + "{value| " + value + "个}" + valuePercent + "%";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
// 外侧光线
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["50%", "37%"],
|
||||
radius: "55%",
|
||||
startAngle: 235,
|
||||
endAngle: -50,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
100 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#526277"
|
||||
},
|
||||
{
|
||||
offset: 0.25,
|
||||
color: "rgba(4, 14, 54,0.4)"
|
||||
},
|
||||
{
|
||||
offset: 0.7,
|
||||
color: "rgba(4, 14, 54,0.4)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#526277"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["50%", "37%"],
|
||||
radius: "47%",
|
||||
startAngle: 245,
|
||||
endAngle: -115,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
200 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0.8,
|
||||
color: "#52bef0"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#13356b"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "数据主体",
|
||||
type: "pie",
|
||||
radius: ["37%", "40%"],
|
||||
center: ["50%", "37%"],
|
||||
hoverAnimation: true,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderWidth: 10
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: dataList.value
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["32%", "33%"],
|
||||
center: ["50%", "37%"],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
data: Pie()
|
||||
}
|
||||
]
|
||||
};
|
||||
echartsTest.setOption(option, true);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.load-top-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.num {
|
||||
width: 66px;
|
||||
text-align: center;
|
||||
font-family: sadigitalNumber;
|
||||
font-size: calc(100vw * 24 / 1920);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 18%;
|
||||
z-index: 9;
|
||||
}
|
||||
// .styleImg {
|
||||
// left: 6%;
|
||||
// top: 17%;
|
||||
// width: 40%;
|
||||
// position: absolute;
|
||||
// height: 60%;
|
||||
// background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
|
||||
// background-size: cover;
|
||||
// }
|
||||
.select-right {
|
||||
width: 35%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
right: -1%;
|
||||
top: 5%;
|
||||
.selected {
|
||||
height: 5%;
|
||||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.day {
|
||||
padding: 0 6%;
|
||||
margin-right: 5%;
|
||||
z-index: 99;
|
||||
}
|
||||
.week {
|
||||
padding: 0 6%;
|
||||
margin-right: 5%;
|
||||
z-index: 99;
|
||||
}
|
||||
.month {
|
||||
padding: 0 6%;
|
||||
z-index: 99;
|
||||
}
|
||||
.active {
|
||||
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.time {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
left: 37%;
|
||||
margin-top: -18%;
|
||||
}
|
||||
::v-deep .el-input__wrapper {
|
||||
width: 85%;
|
||||
height: 0%;
|
||||
background: #0d2956;
|
||||
}
|
||||
::v-deep .el-range-separator {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
::v-deep .el-range-input {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user