<template>
|
<div style="width: 100%; height: 100%">
|
<video
|
ref="videoElement"
|
id="videoElement"
|
controls
|
width="0"
|
height="0"
|
v-show="false"
|
>
|
xxx
|
</video>
|
<el-container>
|
<el-header height="60px">
|
<span
|
>{{ pontInfoData.monitorpointName }} -
|
{{ pontInfoData.monitorstationId_name }} -
|
</span>
|
<span style="color: #4dd6b6" v-if="pontInfoData.status == 1"
|
>{{ pontInfoData.status_name }}状态</span
|
>
|
<span style="color: red" v-if="!(pontInfoData.status == 1)"
|
>{{ pontInfoData.status_name }}状态</span
|
>
|
|
<el-button
|
type="primary"
|
size="mini"
|
class="topButton"
|
@click="lookBack(pontInfoData)"
|
>回放</el-button
|
>
|
</el-header>
|
<el-container>
|
<el-aside width="119px">
|
<el-menu
|
default-active="2"
|
class="el-menu-vertical-demo"
|
background-color="#0b1536"
|
text-color="#fff"
|
@open="handleOpen"
|
@close="handleClose"
|
@select="selectItem"
|
>
|
<div
|
class="menuItem"
|
v-for="(item, i) in frequencyArray"
|
:key="item.frequencyId"
|
@dblclick="dbClick(item)"
|
style="user-select: none"
|
>
|
<el-menu-item :index="i.toString()">
|
<span slot="title">{{ item.frequencyValue }}</span>
|
</el-menu-item>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="点击收藏"
|
placement="top"
|
>
|
<el-image
|
style="
|
width: 20px;
|
height: 20px;
|
cursor: pointer;
|
margin-top: 18px;
|
"
|
v-if="!item.isCollection"
|
@click="joinCollection(item)"
|
:src="require('@/assets/unLove.png')"
|
></el-image>
|
</el-tooltip>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="取消收藏"
|
placement="top"
|
>
|
<el-image
|
style="
|
width: 20px;
|
height: 20px;
|
cursor: pointer;
|
margin-top: 18px;
|
"
|
v-if="item.isCollection"
|
@click="dropCollection(item)"
|
:src="require('@/assets/love.png')"
|
></el-image>
|
</el-tooltip>
|
</div>
|
</el-menu>
|
</el-aside>
|
<el-main
|
v-loading="loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
element-loading-spinner="el-icon-loading"
|
>
|
<div v-if="!showInfo.frequencyValue">
|
<p>请选择频率</p>
|
</div>
|
<div v-else>
|
<div class="mainTitle">
|
<div style="display: flex">
|
<p style="width: 50px">监听:</p>
|
<span
|
style="margin-left: 10px"
|
v-show="!isEdit"
|
@dblclick="changeInput()"
|
>{{ showFrequencyValue }}</span
|
>
|
<el-input
|
v-model="showFrequencyValue"
|
placeholder=""
|
v-show="isEdit"
|
@blur="changeP"
|
ref="editInput"
|
style="width: 80px"
|
></el-input>
|
</div>
|
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="开始直播"
|
placement="top"
|
v-if="!isplay"
|
>
|
<i
|
class="el-icon-video-play"
|
@click="startPlay"
|
style="cursor: pointer; line-height: 40px"
|
></i>
|
</el-tooltip>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="暂停直播"
|
placement="top"
|
v-else
|
>
|
<i
|
class="el-icon-video-pause"
|
@click="stopPlay"
|
style="cursor: pointer; line-height: 40px"
|
></i>
|
</el-tooltip>
|
<p>
|
<span>信号:{{ showInfo.level }}</span>
|
</p>
|
<el-dropdown @command="handleCommand">
|
<span class="el-dropdown-link" style="color: #409eff">
|
人工评分: {{ dropScore }}分
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="1" :disabled="!isAssess"
|
>1分</el-dropdown-item
|
>
|
<el-dropdown-item command="2" :disabled="!isAssess"
|
>2分</el-dropdown-item
|
>
|
<el-dropdown-item command="3" :disabled="!isAssess"
|
>3分</el-dropdown-item
|
>
|
<el-dropdown-item command="4" :disabled="!isAssess"
|
>4分</el-dropdown-item
|
>
|
<el-dropdown-item command="5" :disabled="!isAssess"
|
>5分</el-dropdown-item
|
>
|
<el-dropdown-item command="0" :disabled="!isAssess"
|
>无效</el-dropdown-item
|
>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
|
<div class="recordingBlock">
|
<div class="joinRecording">
|
<div>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="加入通道"
|
placement="top"
|
>
|
<svg-icon
|
class="svgIcon"
|
icon-class="add"
|
@click="addLeftRecord"
|
></svg-icon>
|
</el-tooltip>
|
</div>
|
<div style="margin-top: 20px">
|
<span>录制通道:</span>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="双击修改"
|
placement="top"
|
>
|
<span v-show="!isLeftEdit" @dblclick="changeLeftInput">{{
|
leftRecordFrequency.frequencyValue
|
}}</span>
|
</el-tooltip>
|
<el-input
|
v-model="leftRecordFrequency.frequencyValue"
|
placeholder=""
|
style="width: 80px; height: 22px"
|
v-show="isLeftEdit"
|
ref="editLeftInput"
|
@blur="changeLeftP"
|
></el-input>
|
</div>
|
<div style="margin-top: 20px">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="加入录制"
|
placement="top"
|
>
|
<svg-icon
|
class="svgIcon"
|
icon-class="recordAdd"
|
@click="joinLeftMain"
|
></svg-icon>
|
</el-tooltip>
|
</div>
|
</div>
|
|
<!-- <div class="joinRecording">
|
<div>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="加入通道"
|
placement="top"
|
>
|
<svg-icon
|
class="svgIcon"
|
icon-class="add"
|
@click="addRightRecord"
|
></svg-icon>
|
</el-tooltip>
|
</div>
|
<div style="margin-top: 20px">
|
<span>副录通道:</span>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="双击修改"
|
placement="top"
|
>
|
<span v-show="!isRightEdit" @dblclick="changeRightInput">{{
|
rightRecordFrequency.frequencyValue
|
}}</span>
|
</el-tooltip>
|
<el-input
|
v-model="rightRecordFrequency.frequencyValue"
|
placeholder=""
|
style="width: 80px; height: 22px"
|
v-show="isRightEdit"
|
ref="editRightInput"
|
@blur="changeRightP"
|
></el-input>
|
</div>
|
<div style="margin-top: 20px">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="开始录制"
|
placement="top"
|
>
|
<svg-icon
|
class="svgIcon"
|
icon-class="recordAdd"
|
@click="joinRightMain"
|
></svg-icon>
|
</el-tooltip>
|
</div>
|
</div> -->
|
</div>
|
|
<div class="pointChart">
|
<p>历史压制效果</p>
|
<div ref="chart" style="width: 100%; height: 120px"></div>
|
</div>
|
</div>
|
</el-main>
|
</el-container>
|
</el-container>
|
</div>
|
</template>
|
<script>
|
export default {
|
watch: {
|
pontInfoData: {
|
handler(n, o) {
|
this.getInfo();
|
},
|
deep: true,
|
immediate: true,
|
},
|
switchValue: {
|
handler(n, o) {
|
this.getEchartData(this.showInfo);
|
},
|
deep: true,
|
immediate: true,
|
},
|
},
|
|
props: {
|
pontInfoData: {
|
type: Object,
|
default: {},
|
},
|
switchValue: {
|
type: Number,
|
default: 1,
|
},
|
username: {
|
type: String,
|
default: "",
|
},
|
userid: {
|
type: String,
|
default: "",
|
},
|
isLoney: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
data() {
|
return {
|
loading: false,
|
lookBackData: {},
|
lookBackVisible: false,
|
isAssess: false,
|
isDisable: true,
|
dropScore: "请选择",
|
isEdit: false,
|
isLeftEdit: false,
|
isRightEdit: false,
|
selScoreValue: "",
|
selScoreArr: [],
|
scoreOperationDialog: false,
|
dialogVisible: true,
|
frequencyArray: [],
|
showInfo: {},
|
collectionArray: [],
|
leftFrequency: {},
|
rightFrequency: {},
|
isplay: false,
|
rtsp: "",
|
player: null,
|
playFrequency: {},
|
leftRecordFrequency: {},
|
rightRecordFrequency: {},
|
showFrequencyValue: "",
|
};
|
},
|
mounted() {
|
this.getCollection();
|
},
|
methods: {
|
lookBack(data) {
|
this.$emit("showLookBack", data);
|
},
|
joinRightMain() {
|
let param = {
|
monitorpointId: this.showInfo.monitorpointId,
|
frequencyValue: this.rightRecordFrequency.frequencyValue,
|
};
|
this.$emit("joinRecord", param);
|
},
|
joinLeftMain() {
|
let recordData = {
|
monitorpointId: this.showInfo.monitorpointId,
|
frequencyValue: this.leftRecordFrequency.frequencyValue,
|
};
|
this.$emit("joinRecord", recordData);
|
},
|
addLeftRecord() {
|
this.leftRecordFrequency.frequencyValue = this.showFrequencyValue;
|
},
|
addRightRecord() {
|
this.rightRecordFrequency.frequencyValue = this.showFrequencyValue;
|
},
|
handleCommand(command) {
|
this.dropScore = command;
|
let param = {
|
bid: "assessPress",
|
frequency: this.showFrequencyValue,
|
assessvalue: command,
|
monitorpointId: this.showInfo.monitorpointId,
|
taskid: "",
|
userid: this.userid,
|
recording_time: this.dateFormatter(new Date()),
|
};
|
|
this.$getJSON(window.backstageURL +
|
"dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
this.$message.success(res.data.data[0][0].messg);
|
});
|
},
|
changeP(e) {
|
this.isplay = false;
|
if (this.player) {
|
this.player.pause();
|
this.player.unload();
|
this.player.detachMediaElement();
|
this.player.destroy();
|
this.player = null;
|
}
|
this.isEdit = !this.isEdit;
|
},
|
changeInput() {
|
this.isEdit = !this.isEdit;
|
setTimeout(() => {
|
this.$refs.editInput.focus();
|
}, 500);
|
},
|
changeLeftInput() {
|
this.isLeftEdit = !this.isLeftEdit;
|
setTimeout(() => {
|
this.$refs.editLeftInput.focus();
|
}, 500);
|
},
|
changeLeftP(e) {
|
this.isLeftEdit = !this.isLeftEdit;
|
},
|
changeRightInput() {
|
this.isRightEdit = !this.isRightEdit;
|
setTimeout(() => {
|
this.$refs.editRightInput.focus();
|
}, 500);
|
},
|
changeRightP(e) {
|
this.isRightEdit = !this.isRightEdit;
|
},
|
dbClick(item) {
|
this.$emit("showLoading", "luzhi");
|
setTimeout(() => {
|
this.startPlay();
|
}, 2000);
|
},
|
cancleRecoding(frequency) {
|
let param = new URLSearchParams();
|
param.append("method", "delete");
|
param.append("key", 123456);
|
param.append("monitorpointId", frequency.monitorpointId);
|
param.append("frequencyValue", frequency.frequencyValue);
|
this.$getJSON(window.equipmentURL +
|
"FRP/TNewrecordtask.do",
|
param
|
).then((res) => {
|
if (res.success) {
|
this.getFrequency(this.showInfo);
|
this.getEchartData(this.showInfo);
|
} else {
|
this.$message.warning(res.msg);
|
}
|
});
|
},
|
dropMain() {
|
this.$confirm("是否停止录制", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
let param = new URLSearchParams();
|
param.append("method", "delete");
|
param.append("key", 123456);
|
param.append("monitorpointId", this.showInfo.monitorpointId);
|
param.append(
|
"frequencyValue",
|
this.leftRecordFrequency.frequencyValue
|
);
|
this.$getJSON(window.equipmentURL +
|
"FRP/TNewrecordtask.do",
|
param
|
).then((res) => {
|
if (res.success) {
|
this.getFrequency(this.showInfo);
|
this.getEchartData(this.showInfo);
|
} else {
|
this.$message.warning(res.msg);
|
}
|
});
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消",
|
});
|
});
|
},
|
dropVice() {
|
this.$confirm("是否停止录制", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
let param = new URLSearchParams();
|
param.append("method", "delete");
|
param.append("key", 123456);
|
param.append("monitorpointId", this.showInfo.monitorpointId);
|
param.append(
|
"frequencyValue",
|
this.rightRecordFrequency.frequencyValue
|
);
|
this.$getJSON(window.equipmentURL +
|
"FRP/TNewrecordtask.do",
|
param
|
).then((res) => {
|
if (res.success) {
|
this.getFrequency(this.showInfo);
|
this.getEchartData(this.showInfo);
|
} else {
|
this.$message.warning(res.msg);
|
}
|
});
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消",
|
});
|
});
|
},
|
scoreOperation() {
|
if (this.userid == "" || this.username == "") {
|
if (this.isLoney) {
|
this.$emit("showLogin");
|
} else {
|
window.location.href =window.backstageURL +
|
"ammonitor/#/passport/login";
|
}
|
} else {
|
this.$emit("startScore", this.showInfo);
|
}
|
},
|
getCharFromUtf8(str) {
|
var cstr = "";
|
var nOffset = 0;
|
if (str == "") return "";
|
str = str.toLowerCase();
|
nOffset = str.indexOf("%e");
|
if (nOffset == -1) return str;
|
while (nOffset != -1) {
|
cstr += str.substr(0, nOffset);
|
str = str.substr(nOffset, str.length - nOffset);
|
if (str == "" || str.length < 9) return cstr;
|
cstr += utf8ToChar(str.substr(0, 9));
|
str = str.substr(9, str.length - 9);
|
nOffset = str.indexOf("%e");
|
}
|
return cstr + str;
|
},
|
joinRecording() {
|
if (this.userid == "" || this.username == "") {
|
if (this.isLoney) {
|
this.$emit("showLogin");
|
} else {
|
window.location.href =window.backstageURL +
|
"ammonitor/#/passport/login";
|
}
|
} else {
|
this.$confirm(
|
`是否确定将${this.showInfo.frequencyValue}加入录制`,
|
"提示",
|
{
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}
|
)
|
.then(() => {
|
this.$emit("showLoading", "luzhi");
|
let param = new URLSearchParams();
|
param.append("method", "record");
|
param.append("key", 111111);
|
param.append("recordTimeLength", 180);
|
param.append("monitorpointId", this.showInfo.monitorpointId);
|
param.append("frequencyValue", this.showInfo.frequencyValue);
|
param.append("isUnderWay", 0);
|
|
let url = `${window.equipmentURL}FRP/TNewrecordtask.do?method=record&monitorpointId=${this.showInfo.monitorpointId}&frequencyValue=${this.showInfo.frequencyValue}`;
|
this.$getJSON(window.equipmentURL +
|
"FRP/TNewrecordtask.do",
|
param
|
).then((res) => {
|
this.$emit("hideLoading");
|
let param1 = {
|
bid: "setChannelRecord",
|
monitorpointId: this.showInfo.monitorpointId,
|
frequency: this.showInfo.frequencyValue,
|
userid: this.userid,
|
requesturl: url,
|
success: res[0].success.toString(),
|
msg: res[0].msg,
|
recordminitus: 180,
|
};
|
|
this.$post(window.backstageURL +
|
"dataservice/dealData",
|
param1
|
).then((res1) => {});
|
|
if (res.success) {
|
this.$message.success(res[0].msg);
|
this.getCollection();
|
this.getFrequency(this.showInfo);
|
} else {
|
this.$message.error(res[0].msg);
|
}
|
});
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消删除",
|
});
|
});
|
}
|
},
|
joinCollection(item) {
|
if (this.userid == "" || this.username == "") {
|
if (this.isLoney) {
|
this.$emit("showLogin");
|
} else {
|
window.location.href = window.backstageURL +
|
"ammonitor/#/passport/login";
|
}
|
} else {
|
let param = new URLSearchParams();
|
param.append("bid", "addFavoriteFreqs");
|
param.append("frequency", item.frequencyValue);
|
param.append("adduser", this.username);
|
this.$getJSON(window.backstageURL +
|
"dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
if (res.code == 20000) {
|
this.$message.success("收藏成功");
|
this.getCollection();
|
}
|
});
|
}
|
},
|
dropCollection(item) {
|
if (this.userid == "" || this.username == "") {
|
if (this.isLoney) {
|
this.$emit("showLogin");
|
} else {
|
window.location.href = window.backstageURL +
|
"ammonitor/#/passport/login";
|
}
|
} else {
|
let param = new URLSearchParams();
|
param.append("bid", "cancelFavoriteFreqs");
|
param.append("frequency", item.frequencyValue);
|
this.$getJSON(window.backstageURL +
|
"dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
if (res.code == 20000) {
|
this.$confirm(res.data.data[0][0].msg, "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
let param1 = new URLSearchParams();
|
param1.append("bid", "delFavoriteFreqs");
|
param1.append("frequency", item.frequencyValue);
|
param1.append("canceluser", this.username);
|
this.$getJSON(window.backstageURL +
|
"dataservice/getNoTokenData",
|
param1
|
).then((res) => {
|
if (res.code == 20000) {
|
this.$message.success("成功取消收藏");
|
this.getCollection();
|
}
|
});
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消删除",
|
});
|
});
|
}
|
});
|
}
|
},
|
getCollection() {
|
this.$getJSON(window.backstageURL +
|
"dataservice/getNoTokenData?bid=getFavoriteFreqs"
|
).then((res) => {
|
let sourceData = [];
|
res.data.data.forEach((item) => {
|
sourceData.push(item.frequency);
|
});
|
this.collectionArray = sourceData;
|
// this.getInfo();
|
});
|
},
|
getInfo() {
|
let param = new URLSearchParams();
|
param.append("monitorpointId", this.pontInfoData.monitorpointId);
|
param.append("userid", this.userid);
|
this.$getJSON(window.backstageURL +
|
"dataservice/getNoTokenData?bid=getCurrPointFreqs",
|
param
|
).then((res) => {
|
this.frequencyArray = JSON.parse(JSON.stringify(res.data.data[0]));
|
this.selectItem(2)
|
});
|
},
|
selectItem(index) {
|
console.log(index)
|
this.isplay = false;
|
this.isAssess = false;
|
this.loading = true;
|
if (this.frequencyArray[index].assessvalue) {
|
this.dropScore = this.frequencyArray[index].assessvalue;
|
} else {
|
this.dropScore = "请选择";
|
}
|
|
this.recordingtime = "";
|
this.rtsp = "";
|
|
this.playFrequency = {};
|
this.showFrequencyValue = this.frequencyArray[index].frequencyValue;
|
if (this.player) {
|
this.player.pause();
|
this.player.unload();
|
this.player.detachMediaElement();
|
this.player.destroy();
|
this.player = null;
|
}
|
this.showInfo = this.frequencyArray[index];
|
|
this.getFrequency(this.showInfo);
|
this.getEchartData(this.showInfo);
|
},
|
|
getFrequency(value) {
|
this.playFrequency = {};
|
this.leftRecordFrequency = {};
|
this.rightRecordFrequency = {};
|
let param = new URLSearchParams();
|
param.append("bid", "getChannelRecord");
|
param.append("monitorpointId", value.monitorpointId);
|
|
this.$getJSON(window.backstageURL +
|
"dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
let sourceData = res.data.data[0];
|
sourceData.forEach((item) => {
|
let playItem = JSON.parse(JSON.stringify(item));
|
playItem.level = "--";
|
playItem.pressvalue = "--";
|
this.frequencyArray.forEach((i) => {
|
if (i.frequencyValue == playItem.frequencyValue) {
|
playItem.level = i.level;
|
playItem.pressvalue = i.pressvalue;
|
}
|
});
|
|
if (playItem.channelId == 1) {
|
this.playFrequency = playItem;
|
} else if (playItem.channelId == 2) {
|
this.rightRecordFrequency = playItem;
|
} else if (playItem.channelId == 3) {
|
this.leftRecordFrequency = playItem;
|
} else {
|
}
|
});
|
this.loading = false;
|
});
|
},
|
handleOpen(key, keyPath) {},
|
handleClose(key, keyPath) {},
|
getEchartData(value) {
|
let param = new URLSearchParams();
|
if (this.switchValue == 1) {
|
param.append("bid", "getPointSuppress");
|
}
|
if (this.switchValue == 0) {
|
param.append("bid", "getPointSuppress_auto");
|
}
|
param.append("frequencystr", value.frequencyValue);
|
param.append("monitorpointId", this.pontInfoData.monitorpointId);
|
|
this.$getJSON(window.backstageURL +
|
"dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
let sourceData = res.data.data;
|
let seriesData = [];
|
let legendData = [];
|
let xAxisData = [];
|
|
for (let i = 0; i < sourceData.length - 1; i++) {
|
let oneLegendData = { textStyle: {} };
|
if (sourceData[i].length != 0) {
|
oneLegendData.name = sourceData[i][0].frequencyValue;
|
oneLegendData.icon = "circle";
|
oneLegendData.textStyle.fontSize = 10;
|
oneLegendData.textStyle.color = "white";
|
legendData.push(oneLegendData);
|
|
let oneSeriesData = { data: [] };
|
oneSeriesData.name = sourceData[i][0].frequencyValue;
|
oneSeriesData.type = "line";
|
for (let j = 0; j < 15; j++) {
|
let paramvalue = sourceData[i][j].paramvalue;
|
oneSeriesData.data.push(paramvalue);
|
xAxisData.push(
|
this.formatDateTime(sourceData[i][j].wdate) +
|
"\n" +
|
sourceData[i][j].whour +
|
":00"
|
);
|
}
|
seriesData.push(oneSeriesData);
|
}
|
}
|
|
const chart = this.$refs.chart;
|
if (chart) {
|
const myChart = this.$echarts.init(chart);
|
const option = {
|
grid: {
|
top: "20px",
|
|
left: "25px",
|
|
right: "0px",
|
|
bottom: "35px",
|
|
backgroundColor: "#fff",
|
},
|
xAxis: {
|
type: "category",
|
data: xAxisData,
|
axisLabel: {
|
interval: 0,
|
rotate: 0,
|
color: "#FFFFFF",
|
fontSize: 10,
|
},
|
},
|
yAxis: {
|
type: "value",
|
min: 0,
|
max: 4,
|
axisLabel: {
|
formatter: function (value) {
|
var texts = [];
|
if (value == 0) {
|
texts.push("1");
|
} else if (value <= 1) {
|
texts.push("2");
|
} else if (value <= 2) {
|
texts.push("3");
|
} else if (value <= 3) {
|
texts.push("4");
|
} else {
|
texts.push("5");
|
}
|
return texts;
|
},
|
interval: 0,
|
rotate: 0,
|
color: "#FFFFFF",
|
fontSize: 10,
|
},
|
splitLine: {
|
show: true,
|
lineStyle: {
|
color: "rgba(255,225,255,0.5)",
|
width: 1,
|
type: "solid",
|
},
|
},
|
},
|
legend: {
|
itemHeight: 7,
|
data: legendData,
|
},
|
series: seriesData,
|
};
|
myChart.setOption(option);
|
window.addEventListener("resize", function () {
|
myChart.resize();
|
});
|
}
|
});
|
},
|
|
startPlay() {
|
this.isplay = true;
|
this.isAssess = true;
|
let playData = {
|
monitorpointId: this.showInfo.monitorpointId,
|
frequencyValue: this.showFrequencyValue,
|
};
|
this.$emit("startPlay", playData);
|
},
|
stopPlay() {
|
this.$emit("stopPlay");
|
this.isplay = false;
|
// this.player.pause();
|
},
|
formatDateTime(date) {
|
if (date) {
|
let time = new Date(date);
|
var month = time.getMonth() + 1;
|
var date = time.getDate();
|
return this.add0(month) + "-" + this.add0(date);
|
} else {
|
return "--";
|
}
|
},
|
|
dateFormatter(time) {
|
if (time) {
|
var year = time.getFullYear();
|
var month = time.getMonth() + 1;
|
var date = time.getDate();
|
var hour = time.getHours();
|
var minute = time.getMinutes();
|
var second = time.getSeconds();
|
return (
|
this.add0(year) +
|
"-" +
|
this.add0(month) +
|
"-" +
|
this.add0(date) +
|
" " +
|
this.add0(hour) +
|
":" +
|
this.add0(minute) +
|
":" +
|
this.add0(second)
|
);
|
} else {
|
return 0;
|
}
|
},
|
|
add0(val) {
|
return val < 10 ? "0" + val : val;
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.el-header {
|
background-color: #132763;
|
color: #ffffff;
|
text-align: center;
|
line-height: 60px;
|
font-size: 22px;
|
}
|
|
.el-aside {
|
background-color: #0b1536;
|
color: #ffffff;
|
text-align: center;
|
line-height: 200px;
|
height: 370px;
|
border-right: 1px solid rgba(255, 255, 255, 0.6);
|
}
|
|
.el-main {
|
background-color: #0b1536;
|
color: #ffffff;
|
text-align: center;
|
height: 370px;
|
padding: 0px;
|
overflow: hidden;
|
}
|
|
.menuItem {
|
display: flex;
|
flex-wrap: nowrap;
|
justify-content: center;
|
|
li {
|
}
|
|
i {
|
line-height: 56px;
|
font-size: 10px;
|
width: 30px;
|
}
|
}
|
|
.mainTitle {
|
width: 90%;
|
margin-left: 5%;
|
height: 40px;
|
line-height: 40px;
|
margin-top: 10px;
|
padding-bottom: 10px;
|
display: flex;
|
flex-wrap: nowrap;
|
justify-content: space-between;
|
border-bottom: 1px solid rgba($color: #ffffff, $alpha: 0.3);
|
font-size: 16px;
|
}
|
|
.recordingBlock {
|
margin-top: 10px;
|
width: 90%;
|
margin-left: 5%;
|
display: flex;
|
flex-wrap: nowrap;
|
justify-content: space-between;
|
padding-bottom: 10px;
|
border-bottom: 1px solid rgba($color: #ffffff, $alpha: 0.3);
|
font-size: 16px;
|
height: 120px;
|
|
.joinRecording {
|
width: 100%;
|
|
.joinRecordingIcon {
|
height: 40px;
|
cursor: pointer;
|
p {
|
line-height: 40px;
|
}
|
}
|
|
.joinRecordingContent {
|
height: 40px;
|
|
.have {
|
line-height: 40px;
|
}
|
|
.nohave {
|
text-align: center;
|
}
|
}
|
}
|
}
|
|
.pointChart {
|
margin-top: 10px;
|
width: 90%;
|
margin-left: 5%;
|
p {
|
line-height: 40px;
|
font-size: 14px;
|
}
|
}
|
|
.alertBlock {
|
width: 100px;
|
height: 100px;
|
position: fixed;
|
top: 50%;
|
height: 50%;
|
z-index: 999;
|
background-color: aqua;
|
}
|
|
.el-aside::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
|
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
height: 1px;
|
}
|
|
.el-aside::-webkit-scrollbar-thumb {
|
/*滚动条里面小方块*/
|
|
border-radius: 10px;
|
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
background: #535353;
|
}
|
|
.el-aside::-webkit-scrollbar-track {
|
/*滚动条里面轨道*/
|
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
border-radius: 0;
|
|
background: #ededed;
|
}
|
|
/deep/ .el-input__inner {
|
height: 22.5px;
|
line-height: 22.5px;
|
}
|
|
.topButton {
|
position: absolute;
|
right: 30px;
|
margin-top: 16px;
|
}
|
|
.svgIcon {
|
cursor: pointer;
|
}
|
</style>
|
