<template>
<div class="jyl">
<el-card class="box-card">
<el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="12" :lg="12">
<div
v-for="item in lineData"
:key="item.id"
class="jyl-con jyl-con-left"
>
<div class="lcl-title">{{ item.name }}</div>
<div class="chart-jyl">
<ChartsForLine :ChartsForLineParant="item" />
</div>
</div>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
<div class="jyl-con jyl-con-left">
<div class="lcl-title">监测示意图</div>
<div class="">
<img src="../../assets/images/PM/02.png" alt="" />
</div>
</div>
<div class="jyl-con">
<div class="lcl-title">历史数据</div>
<div class="">
<el-table
:data="hisDatajyl"
height="350"
border
stripe
style="width: 100%"
:header-cell-style="{
textAlign: 'center',
height: '20px',
}"
:row-style="{ height: '20px' }"
>
<el-table-column
align="center"
type="index"
width="50"
label="序号"
>
</el-table-column>
<el-table-column align="center" prop="monName" label="监测项" />
<el-table-column
align="center"
prop="createTime"
label="监测时间"
/>
<el-table-column align="center" prop="monValue" label="监测值">
<template slot-scope="scope">
<span
>{{ scope.row.monValue }}（{{ scope.row.monUnit }}）</span
>
</template>
</el-table-column>
<el-table-column
align="center"
prop="monStatus"
label="报警状态"
>
<template slot-scope="scope">
<span v-if="scope.row.monStatus == 0">正常</span>
<span v-if="scope.row.monStatus == 1">停止</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="jyl-con">
<div class="lcl-title">报警数据列表</div>
<div class="">
<el-table
:data="alarmData"
height="350"
border
stripe
style="width: 100%"
:header-cell-style="{
textAlign: 'center',
height: '20px',
}"
:row-style="{ height: '20px' }"
>
<el-table-column
align="center"
type="index"
width="50"
label="序号"
>
</el-table-column>
<el-table-column align="center" prop="monName" label="监测项" />
<el-table-column
align="center"
prop="alarmTime"
label="监测时间"
/>
<el-table-column align="center" prop="monValue" label="监测值">
<template slot-scope="scope">
<span
>{{ scope.row.monValue }}（{{ scope.row.monUnit }}）</span
>
</template>
</el-table-column>
<el-table-column
align="center"
prop="alarmIfRes"
label="报警状态"
>
<template slot-scope="scope">
<span v-if="scope.row.alarmLevel == 1" style="color: red"
>红色报警</span
>
<span v-if="scope.row.alarmLevel == 2" style="color: orange"
>橙色报警</span
>
<span v-if="scope.row.alarmLevel == 3" style="color: yellow"
>黄色报警</span
>
<span v-if="scope.row.alarmLevel == 4" style="color: blue"
>蓝色报警</span
>
</template>
</el-table-column>
</el-table>
</div>
</div>
</el-col>
</el-row>
</el-card>
</div>
</template>
<script>
// import { api } from '@vue/api'
import ChartsForLine from "@/components/lclEcharts/ChartsForLine";
import {
meteorologicalhistory,
meteorologicalimage,
dataAlarm,
} from "@/api/lclApi/lclapi";
export default {
name: "jyl",
components: {
ChartsForLine,
},
props: [],
data() {
return {
lineData: [
{
name: "+205马道 地下水位监测点",
chartId: "radar-chart",
color: ["#f7af0b", "#05f57a", "#f40852"],
value: [
{
name: "1-1测斜仪",
value: [
{
createTime: "2023-03-11 14:05:51",
updateTime: "2023-03-11 08:37:51",
monStatus: 0,
pointName: "+205马道 地下水位监测点",
id: 8,
monNumber: "1-1测斜仪",
monName: "1-1测斜仪",
monValueA: "0.1",
monValueB: "0.11",
monAlarmStatus: 0,
monDept: "10m",
disValue: "0.149",
},
],
},
],
},
],
lineDataBar: {
name: "降雨量",
chartId: "jylbar",
chartType: "line",
color: ["#1890FF", "#f40852", "#f7af0b"],
axisLabel: "#0562AF",
itemColor: "rgba(42,148,226,1)",
unit: "mm",
bgc: "#fff",
grid: {
left: "10%",
right: "5%",
bottom: "10%",
top: "15%",
z: 22,
},
showlegend: false,
legendItem: ["降雨量"],
// xAxisData: that.allXDataForEchart,
xAxisData: ["03/01"],
yData: [[2]],
},
hisDatajyl: [
{
createTime: "2023-03-20 08:26:17",
updateTime: null,
monStatus: 0,
pointName: "+205马道 内部位移监测点",
id: 1,
monNumber: "降雨量",
monValue: "0.41",
monValueAll: "4",
monAlarmStatus: 0,
weekCreateTime: null,
},
],
alarmData: [],
};
},
watch: {},
created() {
this.$nextTick(function () {
this.lineData.yData = [[4, 7]];
this.lineDataBar.chartType = "bar";
});
},
mounted() {
this.$nextTick(function () {
this.getHisList();
this.get24hList();
this.getChartList();
this.getAlarm();
});
},
methods: {
//历史
getHisList() {
let that = this;
meteorologicalhistory().then((res) => {
if (res && res.code === 200 && res.rows) {
that.hisDatajyl = res.rows;
}
});
},
//24h
get24hList() {
this.lineData.yData = [];
meteorologicalimage().then((res) => {
if (res && res.code === 200 && res.rows) {
this.lineData.xAxisData = res.rows.map((v) => v.weekCreateTime);
this.lineData.yData.push(res.rows.map((v) => v.monValue));
}
});
},
//week
getChartList() {
this.lineDataBar.yData = [];
meteorologicalimage()
.then((res) => {
if (res && res.code === 200 && res.rows) {
this.lineData = res.rows;
// console.log(res.rows.map((v) => v.monValue));
// this.lineDataBar.xAxisData = res.rows.map((v) =>
// v.weekCreateTime.split("-").slice(1).join("/")
// );
// this.lineDataBar.yData.push(res.rows.map((v) => v.monValue));
}
})
.then(() => {
var yFData = this.lineData.map((v) => v.value);
var allYdata = [];
var sonData = [];
for (let i = 0; i < yFData.length; i++) {
var yDataitem = [];
for (let j = 0; j < yFData[i].length; j++) {
yDataitem.push(yFData[i][j].value);
}
sonData.push(yDataitem);
}
for (let i = 0; i < sonData.length; i++) {
var hhh = [];
for (let j = 0; j < sonData[i].length; j++) {
hhh.push(sonData[i][j].map((v) => v.disValue));
}
allYdata.push(hhh);
}
this.allYDataForEchart = allYdata;
})
.then(() => {
let that = this;
this.lineData = this.lineData.map((v, k) => {
console.log(v.value[0]);
return {
name: v.name,
chartId: `nbwy-${k + 1}`,
color: ["#f7af0b", "#05f57a", "#f40852"],
chartType: "line",
axisLabel: "#0562AF",
itemColor: "rgba(42,148,226,1)",
unit: v.value[0].value[0].monUnit,
bgc: "#fff",
grid: {
left: "10%",
right: "5%",
bottom: "10%",
top: "15%",
z: 22,
},
showlegend: true,
legendItem: v.value.map((item) => item.name),
// xAxisData: that.allXDataForEchart,
xAxisData: v.value[0].value.map((item, kk) => item.createTime),
yData: that.allYDataForEchart[k],
};
});
});
},
//dataAlarm
getAlarm() {
let that = this;
dataAlarm({ monType: 12 }).then((res) => {
if (res && res.code === 200 && res.rows) {
that.alarmData = res.rows;
}
});
},
},
};
</script>
<style lang="scss" scoped>
.jyl {
width: 100%;
min-height: 100%;
// border-radius: 10px;
// background-color: teal;
.box-card {
width: 100%;
.jyl-con {
width: 100%;
height: 380px;
overflow: hidden;
}
.jyl-con-left {
float: left;
width: 50%;
height: 380px;
}
.lcl-title {
font-size: 22px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
line-height: 30px;
position: relative;
padding-left: 10px;
&:before {
content: "";
position: absolute;
left: 0px;
top: 4px;
width: 6px;
height: 22px;
background: #0d85f4;
}
}
img {
width: 100%;
height: 320px;
object-fit: scale-down;
}
.chart-jyl {
width: 100%;
height: 350px;
}
.weather-jyl,
.jyl-bar {
width: 100%;
height: 350px;
overflow: hidden;
}
.weather-jyl {
padding-top: 30px;
}
::v-deep .el-table--border,
::v-deep .el-table--group {
border: 1px solid #c7d8ee !important;
}
// 设置滚动条的宽度
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 6px;
}
// 设置滚动条的背景色和圆角
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #c7d8ee;
border-radius: 8px;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::v-deep ::-webkit-scrollbar {
width: 6px;
/*滚动条宽度*/
height: 12px;
/*滚动条高度*/
background-color: white;
}
/*定义滑块 内阴影+圆角*/
::v-deep ::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0px white;
-webkit-box-shadow: inset 0 0 0px white;
background-color: rgb(193, 193, 193);
/*滚动条的背景颜色*/
border-radius: 20px;
}
//解决表格固定列时的压样式问题
.el-table__fixed {
height: 100px;
width: 12px;
}
}
}
</style>