1087 lines
31 KiB
Vue
1087 lines
31 KiB
Vue
<template>
|
||
<div class="fullHeight" style="padding: 0 40px">
|
||
<div style="padding-top: 10px">
|
||
<div class="pageTitle">
|
||
<!-- 实时数据 -->
|
||
{{$t('message.projectManage.realData')}}
|
||
<div class="filterBox">
|
||
<el-button type="primary" size="medium" style="margin-right:30px" @click="dialogVisible=true">
|
||
<!-- 导出报警 -->
|
||
{{$t('message.projectManage.exportAlarm')}}
|
||
</el-button>
|
||
<!-- <span class="devDetail"> {{$t('message.projectManage.isAcceptAlarm')+':'}}{{selectedDevDetail.isEnable==0?$t('message.projectManage.is'):$t('message.projectManage.isNot')}}</span> -->
|
||
<span class="devDetail" v-show="selectedDevDetail.isEnable==1">{{$t('message.projectManage.notAcceptreason')+':'}}{{selectedDevDetail.reason}}</span>
|
||
<el-select size="medium" v-model="devSn" @change="changeDev">
|
||
<el-option
|
||
v-for="(item, index) in devList"
|
||
:key="index"
|
||
:label="item.laboratoryName"
|
||
:value="item.devSn"
|
||
></el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
<div class="top">
|
||
<div class="statusBox">
|
||
<img src="@/assets/images/markRoomOverview/statusBG.png" alt="" />
|
||
<span>{{ devState == 2 ? $t('message.projectManage.notOnline') :$t('message.projectManage.online') }}</span>
|
||
</div>
|
||
<div class="realTimeBox">
|
||
<div class="numBlock">
|
||
<img src="@/assets/images/markRoomOverview/numBG1.png" alt="" />
|
||
<p><!-- 温度 -->{{$t('message.projectManage.temperature2')}}</p>
|
||
<p class="num" v-if="devState == 2"><!-- 离线 -->{{$t('message.projectManage.notOnline') }}</p>
|
||
<p class="num" v-else>{{ currentData.temperature }}°C</p>
|
||
</div>
|
||
<div class="numBlock">
|
||
<img src="@/assets/images/markRoomOverview/numBG2.png" alt="" />
|
||
<p><!-- 湿度 -->{{$t('message.projectManage.humidity')}}</p>
|
||
<p class="num" v-if="devState == 2"><!-- 离线 -->{{$t('message.projectManage.notOnline') }}</p>
|
||
<p class="num" v-else>{{ currentData.humidity }}%RH</p>
|
||
</div>
|
||
<div class="numBlock">
|
||
<img src="@/assets/images/markRoomOverview/numBG3.png" alt="" />
|
||
<p><!-- 今日报警次数 -->{{$t('message.projectManage.todayAlarmNum')}}</p>
|
||
<p class="num" v-if="devState == 2"><!-- 离线 -->{{$t('message.projectManage.notOnline') }}</p>
|
||
<p class="num" v-else>{{ currentData.currentDayAlarmNum }}次</p>
|
||
</div>
|
||
<!-- <div class="numBlock">
|
||
<img src="@/assets/images/markRoomOverview/numBG4.png" alt="" />
|
||
<p>当前试块数</p>
|
||
<p class="num">{{ currentData.sampleNum }}个</p>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="whiteBlock">
|
||
<div class="pageTitle">
|
||
<!-- 视频监控 -->
|
||
{{$t('message.projectManage.videoMontor')}}
|
||
<div class="filterBox">
|
||
<el-popover placement="top" width="200" trigger="click">
|
||
<ul class="videoListBox">
|
||
<li
|
||
v-for="(item, index) in videoList"
|
||
:key="index"
|
||
@click="playVideo(item)"
|
||
>
|
||
{{ item.videoName }}
|
||
</li>
|
||
</ul>
|
||
<el-button slot="reference" size="medium">
|
||
<!-- 选择视频 -->
|
||
{{$t('message.projectInfo.chooseVideo')}}
|
||
</el-button>
|
||
</el-popover>
|
||
|
||
<!-- <el-select size="medium" v-model="currentVideoItemId" @change="changeVideo">
|
||
<el-option v-for="(item, index) in videoList" :key="index" :label="item.videoName" :value="item.itemId"></el-option>
|
||
</el-select> -->
|
||
</div>
|
||
|
||
</div>
|
||
<div class="placeholderBox" v-if="videoList.length == 0" style="position: absolute;top: 70%;left:25%">
|
||
<img src="@/assets/images/noData.png" alt="" />
|
||
<p>
|
||
<!-- 暂无数据 -->
|
||
{{$t('message.projectManage.noData')}}
|
||
</p>
|
||
</div>
|
||
<div class="blockContent">
|
||
<videoModule
|
||
v-show="selectVideoList.length"
|
||
class="playVideoBox"
|
||
:type="'2x2'"
|
||
:value="selectVideoList"
|
||
:displayBottomMod="false"
|
||
:winNumBer="4"
|
||
:autoplay="false"
|
||
:showCaptrue="false"
|
||
:showControl="false"
|
||
:showPlayback="false"
|
||
></videoModule>
|
||
</div>
|
||
</div>
|
||
<div class="whiteBlock" ref="blockContent">
|
||
<div class="pageTitle">
|
||
<span
|
||
class="item"
|
||
:class="tabIndex == 1 ? 'active' : ''"
|
||
@click="changeTabs(1)"
|
||
><!-- 历史运行数据 -->{{$t('message.projectManage.pageTitleList[0]')}}</span
|
||
>
|
||
<span
|
||
class="item"
|
||
:class="tabIndex == 0 ? 'active' : ''"
|
||
@click="tabIndex = 0"
|
||
><!-- 报警记录 -->{{$t('message.projectManage.pageTitleList[1]')}}</span
|
||
>
|
||
<span
|
||
class="item"
|
||
:class="tabIndex == 2 ? 'active' : ''"
|
||
@click="changeTabs(2)"
|
||
><!-- 环境分析报告 -->{{$t('message.projectManage.pageTitleList[2]')}}</span
|
||
>
|
||
<span
|
||
class="item"
|
||
:class="tabIndex == 3 ? 'active' : ''"
|
||
@click="changeTabs(3)"
|
||
><!-- 试块分析报告 -->{{$t('message.projectManage.pageTitleList[3]')}}</span
|
||
>
|
||
<div class="filterBox">
|
||
<el-date-picker
|
||
v-show="tabIndex == 2 || tabIndex == 3"
|
||
style="width: 260px"
|
||
:clearable="false"
|
||
v-model="dateRangeArr"
|
||
type="daterange"
|
||
align="right"
|
||
unlink-panels
|
||
:range-separator="$t('message.projectManage.to')"
|
||
:start-placeholder="$t('message.projectManage.startData')"
|
||
:end-placeholder="$t('message.projectManage.endData')"
|
||
:picker-options="pickerOptions"
|
||
size="medium"
|
||
value-format="yyyy-MM-dd"
|
||
@change="changeTabs(tabIndex)"
|
||
>
|
||
</el-date-picker>
|
||
<el-date-picker
|
||
v-show="tabIndex != 2 && tabIndex != 3"
|
||
size="medium"
|
||
@change="changeDate"
|
||
v-model="date1"
|
||
type="date"
|
||
:placeholder="$t('message.projectManage.chooseDate')"
|
||
value-format="yyyy-MM-dd"
|
||
:clearable="false"
|
||
style="width: 140px"
|
||
>
|
||
</el-date-picker>
|
||
</div>
|
||
</div>
|
||
<div class="blockContent" v-if="tabIndex == 0">
|
||
<vue-scroll>
|
||
<ul class="alarmList">
|
||
<li v-for="(item, index) in alarmList" :key="index">
|
||
<span><!-- 报警原因： -->{{$t('message.projectManage.alarmReason')+':'}}{{ item.alarmType }}</span>
|
||
<!-- <span>报 警 值：{{item.alarmValue}}</span> -->
|
||
<!-- <span>报警阈值：{{item.thresholdValue}}</span> -->
|
||
<span><!-- 报警时间： -->{{$t('message.projectManage.alarmTime')+':'}}{{ item.alarmTime }}</span>
|
||
</li>
|
||
</ul>
|
||
</vue-scroll>
|
||
<div class="placeholderBox" v-if="alarmList.length == 0">
|
||
<img src="@/assets/images/noData.png" alt="" />
|
||
<p>
|
||
<!-- 暂无数据 -->
|
||
{{$t('message.projectManage.noData')}}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="blockContent" v-if="tabIndex == 1">
|
||
<div class="placeholderBox" v-if="dustData_24.length == 0">
|
||
<img src="@/assets/images/noData.png" alt="" />
|
||
<p>
|
||
<!-- 暂无数据 -->
|
||
{{$t('message.projectManage.noData')}}
|
||
</p>
|
||
</div>
|
||
<div class="chart" ref="personnelType"></div>
|
||
</div>
|
||
<div class="blockContent" v-if="tabIndex == 2">
|
||
<div class="titleHeade" style="display: flex;margin-top: 5%;">
|
||
<div>湿度</div>
|
||
<div style="margin-left: 20%;">温度</div>
|
||
<div style="margin-left: 15%;">时间</div>
|
||
</div>
|
||
<vue-scroll>
|
||
<ul class="alarmList">
|
||
<li v-for="(item, index) in AnalysisData" :key="index">
|
||
<span>{{ item.avgHumidity }}</span>
|
||
<span>{{ item.avgTemperature }}</span>
|
||
<span>{{ item.dayTitle }}</span>
|
||
</li>
|
||
</ul>
|
||
</vue-scroll>
|
||
<div class="placeholderBox" v-if="AnalysisData.length == 0">
|
||
<img src="@/assets/images/noData.png" alt="" />
|
||
<p><!-- 暂无数据 -->{{$t('message.projectManage.noData')}}</p>
|
||
</div>
|
||
<div class="chart" ref="devChart" :style="chartStyle"></div>
|
||
</div>
|
||
<div class="blockContent" v-if="tabIndex == 3">
|
||
<div class="placeholderBox" v-if="sampAnalysisData.length == 0">
|
||
<img src="@/assets/images/noData.png" alt="" />
|
||
<p><!-- 暂无数据 -->{{$t('message.projectManage.noData')}}</p>
|
||
</div>
|
||
<div class="chart" ref="devChart2" :style="chartStyle"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 选择要导出的报警时间段 -->
|
||
<el-dialog :title="$t('message.projectManage.pleaseChooseExportAlarmTime')"
|
||
:visible.sync="dialogVisible"
|
||
:modal-append-to-body="false" width="667px">
|
||
<div class="dialogContent" style="text-align:center">
|
||
<el-date-picker
|
||
v-model="daterange"
|
||
type="daterange"
|
||
:range-separator="$t('message.projectManage.to')"
|
||
:start-placeholder="$t('message.projectManage.startData')"
|
||
:end-placeholder="$t('message.projectManage.endData')" value-format="yyyy-MM-dd">
|
||
</el-date-picker>
|
||
<div class="dialog-footer" style="text-align:center">
|
||
<el-button
|
||
class="cancleBtn"
|
||
@click="dialogVisible = false"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
>{{ $t("message.alarmValueSet.cancel") }}
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
@click="exportFn"
|
||
size="medium"
|
||
><!-- 导出 -->{{$t('message.projectManage.export')}}
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import echarts from 'echarts4';;
|
||
import { GetDateStr, timestampToTime } from "@/assets/js/util";
|
||
import {
|
||
getstandardDevListApi,
|
||
selectStandardCurrentDataListApi,
|
||
selectStandardAlarmListByTimeApi,
|
||
selectStandardDevStatisticsBySnApi,
|
||
selectStandardAnalysisReportApi,
|
||
selectSampleAnalysisReportApi,
|
||
} from "@/assets/js/api/markingRoom";
|
||
import videoModule from "@/components/videoModule/videoModule.vue";
|
||
export default {
|
||
components: {
|
||
videoModule,
|
||
},
|
||
props: ["projectsn"],
|
||
watch: {
|
||
projectsn: function () {
|
||
this.initData();
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
devSn: "",
|
||
devList: [],
|
||
date1: GetDateStr(0, "-"),
|
||
date2: GetDateStr(0, "-"),
|
||
alarmList: [],
|
||
currentData: {
|
||
currentDayAlarmNum: 0,
|
||
humidity: 0,
|
||
sampleNum: 0,
|
||
temperature: 0,
|
||
},
|
||
devState: 2,
|
||
dustData_24: [],
|
||
tabIndex: 1,
|
||
videoList: [],
|
||
currentVideoItemId: "",
|
||
selectVideoList: [],
|
||
searchSn: "",
|
||
personnelTypeChart: null,
|
||
chartStyle: {
|
||
width: "100%",
|
||
height: "100%",
|
||
},
|
||
dateRangeArr: [],
|
||
pickerOptions: {
|
||
shortcuts: [
|
||
{
|
||
text: /* "最近一周", */this.$t('message.projectManage.dateList'[0]),
|
||
onClick(picker) {
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||
picker.$emit("pick", [start, end]);
|
||
},
|
||
},
|
||
{
|
||
text: /* "最近一个月", */this.$t('message.projectManage.dateList'[1]),
|
||
onClick(picker) {
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||
picker.$emit("pick", [start, end]);
|
||
},
|
||
},
|
||
{
|
||
text:/* "最近三个月", */this.$t('message.projectManage.dateList'[2]),
|
||
onClick(picker) {
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||
picker.$emit("pick", [start, end]);
|
||
},
|
||
},
|
||
],
|
||
},
|
||
AnalysisData: [],
|
||
sampAnalysisData: [],
|
||
selectedDevDetail:{
|
||
isEnable:0,//是否启用，0是，1否
|
||
reason:''
|
||
},
|
||
dialogVisible:false,
|
||
daterange:[]
|
||
};
|
||
},
|
||
mounted() {
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||
// console.log(start.getTime(),end.getTime())
|
||
this.dateRangeArr.push(timestampToTime(start.getTime(), "date"));
|
||
this.dateRangeArr.push(timestampToTime(end.getTime(), "date"));
|
||
// console.log(this.dateRangeArr);
|
||
if (this.$store.state.projectSn) {
|
||
this.searchSn = this.$store.state.projectSn;
|
||
this.$nextTick(() => {
|
||
this.getDevList();
|
||
});
|
||
} else {
|
||
this.initData();
|
||
}
|
||
},
|
||
methods: {
|
||
exportFn(){
|
||
let start = '',end='';
|
||
if(this.daterange){
|
||
start=this.daterange[0]
|
||
end=this.daterange[1]
|
||
}
|
||
window.location.href =
|
||
this.$http.defaults.baseURL +
|
||
"xmgl/download/exporExcelStandardDevAlarm?sn=" + this.searchSn +
|
||
"&startTime=" + start +
|
||
"&endTime=" + end;
|
||
this.dialogVisible=false
|
||
},
|
||
//初始化数据
|
||
initData() {
|
||
this.searchSn = this.projectsn;
|
||
this.alarmList = [];
|
||
this.selectVideoList = [];
|
||
this.devState = 2;
|
||
this.currentData = {
|
||
currentDayAlarmNum: 0,
|
||
humidity: 0,
|
||
sampleNum: 0,
|
||
temperature: 0,
|
||
};
|
||
this.dustData_24 = [];
|
||
this.devSn = "";
|
||
if (this.personnelTypeChart) {
|
||
this.personnelTypeChart.clear();
|
||
}
|
||
|
||
this.getDevList();
|
||
},
|
||
changeDate() {
|
||
this.getAlarmList();
|
||
this.selectDustNoiseData();
|
||
},
|
||
playVideo(item) {
|
||
this.selectVideoList = [item];
|
||
},
|
||
//获取设备列表--环境监测实时数据--下拉
|
||
getDevList() {
|
||
getstandardDevListApi({ projectSn: this.searchSn }).then((result) => {
|
||
// console.log('列表', result)
|
||
this.devList = result.result;
|
||
if (result.result.length > 0) {
|
||
this.devSn = result.result[0].devSn;
|
||
this.selectedDevDetail=result.result[0]
|
||
this.selectDustNoiseData();
|
||
this.getAlarmList();
|
||
this.getRealTimeData();
|
||
}
|
||
});
|
||
},
|
||
changeTabs(index) {
|
||
this.tabIndex = index;
|
||
this.$nextTick(() => {
|
||
this.chartStyle.width = this.$refs.blockContent.clientWidth - 60 + "px";
|
||
this.chartStyle.height = this.$refs.blockContent.clientHeight - 100 + "px";
|
||
if (index === 1) {
|
||
this.selectDustNoiseData();
|
||
}
|
||
if (index == 2) {
|
||
this.getAnalysisReportData();
|
||
}
|
||
if (index == 3) {
|
||
this.getSampleAnalysisReport();
|
||
}
|
||
});
|
||
},
|
||
//获取试块分析报告数据
|
||
getSampleAnalysisReport() {
|
||
let json = {
|
||
projectSn: this.searchSn,
|
||
devSn: this.devSn,
|
||
startTime: this.dateRangeArr[0],
|
||
endTime: this.dateRangeArr[1],
|
||
type: 3,
|
||
};
|
||
selectSampleAnalysisReportApi(json).then((res) => {
|
||
this.sampAnalysisData = res.result;
|
||
let xData = [],
|
||
yData1 = [],
|
||
yData2 = [],
|
||
yData3 = [],
|
||
yData4 = [];
|
||
this.sampAnalysisData.forEach((element, index) => {
|
||
xData.push(element.dayTitle);
|
||
yData1.push(element.addNum);
|
||
yData2.push(element.curingExpireNum);
|
||
yData3.push(element.formingNum);
|
||
yData4.push(element.inspectionNum);
|
||
});
|
||
this.createBarChart(
|
||
["#5181F6", "#44D7B6", "#F67F51", "#9a78e7"],
|
||
this.$refs.devChart2,
|
||
xData,
|
||
yData1,
|
||
yData2,
|
||
yData3,
|
||
yData4
|
||
);
|
||
});
|
||
},
|
||
createBarChart(color, div, xData, yData1, yData2, yData3, yData4) {
|
||
let that = this;
|
||
let installChart = echarts.init(div);
|
||
installChart.clear();
|
||
let option = {
|
||
grid: {
|
||
top: 30,
|
||
left: 0,
|
||
bottom: 0,
|
||
right: 20,
|
||
containLabel: true,
|
||
},
|
||
color: color,
|
||
legend: {
|
||
textStyle: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: xData,
|
||
boundaryGap: true,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "#9fa2ad",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
],
|
||
yAxis: {
|
||
type: "value",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(231, 233, 243, 0.5)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "添加样品数",
|
||
type: "bar",
|
||
data: yData1,
|
||
barMaxWidth: 26,
|
||
stack:"总数",
|
||
label: {
|
||
show: false,
|
||
position: "top",
|
||
fontSize: 12,
|
||
color: "rgba(42, 46, 63, 0.44)",
|
||
},
|
||
},
|
||
{
|
||
name:"养护到期样品数",
|
||
type: "bar",
|
||
data: yData2,
|
||
barMaxWidth: 26,
|
||
stack: "总数",
|
||
label: {
|
||
show: false,
|
||
position: "top",
|
||
fontSize: 12,
|
||
color: "rgba(42, 46, 63, 0.44)",
|
||
},
|
||
},
|
||
{
|
||
name:"成型样品数",
|
||
type: "bar",
|
||
data: yData3,
|
||
barMaxWidth: 26,
|
||
stack: "总数",
|
||
label: {
|
||
show: false,
|
||
position: "top",
|
||
fontSize: 12,
|
||
color: "rgba(42, 46, 63, 0.44)",
|
||
},
|
||
},
|
||
{
|
||
name: "送检样品数",
|
||
type: "bar",
|
||
data: yData4,
|
||
barMaxWidth: 26,
|
||
stack: "总数",
|
||
label: {
|
||
show: false,
|
||
position: "top",
|
||
fontSize: 12,
|
||
color: "rgba(42, 46, 63, 0.44)",
|
||
},
|
||
},
|
||
],
|
||
};
|
||
|
||
installChart.setOption(option);
|
||
},
|
||
//获取环境分析报告数据
|
||
getAnalysisReportData() {
|
||
let json = {
|
||
projectSn: this.searchSn,
|
||
devSn: this.devSn,
|
||
startTime: this.dateRangeArr[0],
|
||
endTime: this.dateRangeArr[1],
|
||
type: 3,
|
||
};
|
||
selectStandardAnalysisReportApi(json).then((res) => {
|
||
this.AnalysisData = res.result;
|
||
this.createDevChart(res.result, this.$refs.devChart);
|
||
});
|
||
},
|
||
getRealTimeData() {
|
||
selectStandardDevStatisticsBySnApi({
|
||
projectSn: this.searchSn,
|
||
devSn: this.devSn,
|
||
}).then((res) => {
|
||
this.devState = res.result.devState;
|
||
this.currentData = res.result.currentData;
|
||
this.videoList = res.result.videoList;
|
||
this.videoList.forEach((element, index) => {
|
||
if (index < 4) {
|
||
this.selectVideoList.push(element);
|
||
}
|
||
});
|
||
});
|
||
},
|
||
//近24小时数据
|
||
selectDustNoiseData() {
|
||
let data = {
|
||
projectSn: this.searchSn,
|
||
devSn: this.devSn,
|
||
queryTime: this.date1,
|
||
};
|
||
selectStandardCurrentDataListApi(data).then((res) => {
|
||
// console.log(res)
|
||
this.dustData_24 = res.result;
|
||
this.$nextTick(() => {
|
||
let xdata = [],
|
||
ydata1 = [],
|
||
ydata2 = [];
|
||
this.dustData_24.forEach((element) => {
|
||
let time = element.receiveTime;
|
||
xdata.push(time.split(" ")[1]);
|
||
ydata1.push(element.humidity);
|
||
ydata2.push(element.temperature);
|
||
});
|
||
console.log('历史运行数据绘图数据',xdata,ydata1,ydata2)
|
||
this.createdEcharts(xdata, ydata1, ydata2);
|
||
});
|
||
});
|
||
},
|
||
//获取报警列表
|
||
getAlarmList() {
|
||
let data = {
|
||
projectSn: this.searchSn,
|
||
devSn: this.devSn,
|
||
queryTime: this.date1,
|
||
};
|
||
selectStandardAlarmListByTimeApi(data).then((res) => {
|
||
this.alarmList = res.result;
|
||
});
|
||
},
|
||
//人员类型统计
|
||
createdEcharts(xdata, ydata1, ydata2) {
|
||
let personnelType = echarts.init(this.$refs.personnelType);
|
||
this.personnelTypeChart = personnelType;
|
||
|
||
let option = {
|
||
color: ["rgba(72, 141, 236, 1)", "rgba(254, 175, 126, 1)"],
|
||
tooltip: {
|
||
show: true,
|
||
trigger: "axis",
|
||
formatter: "{b} <br /> {a0}: {c0}<br /> {a1}: {c1}",
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: "transparent",
|
||
},
|
||
},
|
||
textStyle: {
|
||
color: "#000",
|
||
fontSize: 12,
|
||
},
|
||
backgroundColor: "rgba(236,236,236,0.75)",
|
||
},
|
||
grid: {
|
||
left: 10,
|
||
right: 30,
|
||
bottom: 10,
|
||
top: 30,
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: false,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: { show: false },
|
||
data: xdata,
|
||
axisLabel: {
|
||
// rotate: 30,
|
||
textStyle: {
|
||
color: "#9fa2ad",
|
||
fontSize: 10,
|
||
},
|
||
},
|
||
},
|
||
yAxis: {
|
||
show: true,
|
||
// type: "time",
|
||
axisTick: { show: false },
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(231, 233, 243, 0.5)",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
// show: false,
|
||
textStyle: {
|
||
color: "#9fa2ad",
|
||
fontSize: 10,
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "湿度",
|
||
data: ydata1,
|
||
type: "line",
|
||
symbolSize: 5,
|
||
symbol: "circle",
|
||
lineStyle: {
|
||
width: 2,
|
||
},
|
||
smooth: true,
|
||
|
||
},
|
||
{
|
||
name: "温度",
|
||
data: ydata2,
|
||
type: "line",
|
||
symbolSize: 5,
|
||
symbol: "circle",
|
||
lineStyle: {
|
||
width: 2,
|
||
},
|
||
smooth: true,
|
||
|
||
},
|
||
],
|
||
};
|
||
personnelType.setOption(option);
|
||
},
|
||
changeDev() {
|
||
|
||
this.selectDustNoiseData();
|
||
this.getAlarmList();
|
||
this.getRealTimeData();
|
||
this.devList.forEach(element => {
|
||
if(element.devSn==this.devSn){
|
||
this.selectedDevDetail=element
|
||
return
|
||
}
|
||
});
|
||
},
|
||
|
||
createDevChart(echartData, el) {
|
||
let devChart = echarts.init(el);
|
||
// let bgColor = "#fff";
|
||
devChart.clear();
|
||
let color = [
|
||
"#5181F6",
|
||
"#00DBB6",
|
||
"#F67F51",
|
||
"#FF515A",
|
||
"#8B5CFF",
|
||
"#00CA69",
|
||
];
|
||
let symbolSize = 10;
|
||
let xAxisData = [],
|
||
yAxisData1 = [],
|
||
yAxisData2 = [];
|
||
xAxisData = echartData.map((v) => v.dayTitle);
|
||
yAxisData1 = echartData.map((v) => v.avgTemperature);
|
||
yAxisData2 = echartData.map((v) => v.avgHumidity);
|
||
|
||
const hexToRgba = (hex, opacity) => {
|
||
let rgbaColor = "";
|
||
let reg = /^#[\da-f]{6}$/i;
|
||
if (reg.test(hex)) {
|
||
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
|
||
"0x" + hex.slice(3, 5)
|
||
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
|
||
}
|
||
return rgbaColor;
|
||
};
|
||
|
||
let option = {
|
||
// backgroundColor: bgColor,
|
||
color: color,
|
||
legend: {
|
||
textStyle: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
formatter: function (params) {
|
||
let html = "";
|
||
params.forEach((v) => {
|
||
// console.log(v)
|
||
html += `<div style="color: #666;font-size: 14px;line-height: 24px">
|
||
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
|
||
color[v.componentIndex]
|
||
};"></span>
|
||
${v.seriesName}.${v.name}
|
||
<span style="color:${
|
||
color[v.componentIndex]
|
||
};font-weight:700;font-size: 18px">${
|
||
v.value
|
||
}</span>`;
|
||
});
|
||
return html;
|
||
},
|
||
extraCssText:
|
||
"background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
|
||
// axisPointer: {
|
||
// type: 'shadow',
|
||
// shadowStyle: {
|
||
// color: '#ffffff',
|
||
// shadowColor: 'rgba(225,225,225,1)',
|
||
// shadowBlur: 5
|
||
// }
|
||
// }
|
||
},
|
||
grid: {
|
||
top: 35,
|
||
right: 0,
|
||
left: 0,
|
||
bottom: 0,
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
boundaryGap: false,
|
||
axisLabel: {
|
||
formatter: "{value}",
|
||
textStyle: {
|
||
color: "#9fa2ad",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#D9D9D9",
|
||
},
|
||
},
|
||
data: xAxisData,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: $t('message.projectManage.temperature2')+"(°C)",
|
||
axisLabel: {
|
||
textStyle: {
|
||
getProjectChilderSystemUserListApiolor: "#9fa2ad",
|
||
},
|
||
},
|
||
nameTextStyle: {
|
||
getProjectChilderSystemUserListApiolor: "#9fa2ad",
|
||
fontSize: 12,
|
||
lineHeight: 24,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(231, 233, 243, 0.5)",
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
type: "value",
|
||
name: this.$t('message.projectManage.humidity')+"(%RH)",
|
||
axisLabel: {
|
||
textStyle: {
|
||
getProjectChilderSystemUserListApiolor: "#9fa2ad",
|
||
},
|
||
},
|
||
nameTextStyle: {
|
||
getProjectChilderSystemUserListApiolor: "#9fa2ad",
|
||
fontSize: 12,
|
||
lineHeight: 24,
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(231, 233, 243, 0.5)",
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: /* "温度", */$t('message.projectManage.temperature2'),
|
||
type: "line",
|
||
smooth: true,
|
||
|
||
symbolSize: symbolSize,
|
||
zlevel: 3,
|
||
lineStyle: {
|
||
normal: {
|
||
color: color[0],
|
||
shadowBlur: 3,
|
||
shadowColor: hexToRgba(color[0], 0.76),
|
||
shadowOffsetY: 8,
|
||
},
|
||
},
|
||
data: yAxisData1,
|
||
},
|
||
{
|
||
name: /* "湿度", */this.$t('message.projectManage.humidity'),
|
||
type: "line",
|
||
smooth: true,
|
||
// showSymbol: false,
|
||
|
||
symbolSize: symbolSize,
|
||
zlevel: 3,
|
||
yAxisIndex: 1,
|
||
lineStyle: {
|
||
normal: {
|
||
color: color[1],
|
||
shadowBlur: 3,
|
||
shadowColor: hexToRgba(color[1], 0.76),
|
||
shadowOffsetY: 8,
|
||
},
|
||
},
|
||
data: yAxisData2,
|
||
},
|
||
],
|
||
};
|
||
devChart.setOption(option);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.filterBox {
|
||
position: absolute;
|
||
right: 0;
|
||
top: -10px;
|
||
}
|
||
.top {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.statusBox {
|
||
width: 22%;
|
||
height: 250px;
|
||
text-align: center;
|
||
line-height: 250px;
|
||
color: rgba(72, 141, 236, 1);
|
||
font-size: 18px;
|
||
position: relative;
|
||
img {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
span {
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
.numBlock {
|
||
position: relative;
|
||
flex: 1;
|
||
height: 100%;
|
||
color: #fff;
|
||
font-size: 22px;
|
||
img {
|
||
// position: absolute;
|
||
// left: 50%;
|
||
// transform: translateX(-50%);
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
margin: auto;
|
||
}
|
||
p {
|
||
z-index: 2;
|
||
position: absolute;
|
||
left: 36px;
|
||
top: 30px;
|
||
}
|
||
.num {
|
||
font-size: 38px;
|
||
bottom: 30px;
|
||
right: 36px;
|
||
left: auto;
|
||
top: auto;
|
||
}
|
||
}
|
||
.realTimeBox {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 78%;
|
||
height: 176px;
|
||
}
|
||
.whiteBlock {
|
||
padding: 30px;
|
||
border-radius: 12px;
|
||
box-shadow: 0px 2px 16px 0px rgba(131, 183, 255, 0.2);
|
||
}
|
||
.bottom {
|
||
margin-top: 30px;
|
||
height: calc(100% - 367px);
|
||
.whiteBlock {
|
||
width: calc(50% - 75px);
|
||
float: left;
|
||
height: calc(100% - 30px);
|
||
&:first-child {
|
||
margin-right: 15px;
|
||
}
|
||
&:last-child {
|
||
margin-left: 15px;
|
||
}
|
||
}
|
||
}
|
||
.chart {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.blockContent {
|
||
height: calc(100% - 37px);
|
||
position: relative;
|
||
}
|
||
.alarmList {
|
||
color: rgba(50, 59, 93, 1);
|
||
font-size: 14px;
|
||
padding-top: 30px;
|
||
li {
|
||
padding: 12px 0;
|
||
border-top: 1px dashed rgba(50, 59, 93, 0.32);
|
||
&:last-child {
|
||
border-bottom: 1px dashed rgba(50, 59, 93, 0.32);
|
||
}
|
||
span {
|
||
margin-right: 40px;
|
||
display: inline-block;
|
||
min-width: 100px;
|
||
&:first-child {
|
||
min-width: 160px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.pageTitle {
|
||
.item {
|
||
margin-right: 15px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.active {
|
||
color: @--color-primary;
|
||
}
|
||
.videoListBox {
|
||
li {
|
||
cursor: pointer;
|
||
padding: 3px 0;
|
||
&:hover {
|
||
color: @--color-primary;
|
||
}
|
||
}
|
||
}
|
||
.devDetail{
|
||
margin-right: 20px;
|
||
font-size: 13px;
|
||
font-weight: normal;
|
||
}
|
||
</style> |