<template>
|
<div
|
v-loading="loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
:element-loading-text="alertInfo"
|
element-loading-spinner="el-icon-loading"
|
>
|
<div
|
id="img"
|
style="
|
display: none;
|
width: 200px;
|
height: 450px;
|
position: absolute;
|
top: 8px;
|
left: 216px;
|
"
|
></div>
|
|
<div class="title">
|
<p class="whether">
|
<span
|
>{{ whetherInfo.reporttime.split(" ")[0] }}
|
{{ whetherInfo.reporttime.split(" ")[1].split(":")[0] + ":00" }}
|
天气:{{ whetherInfo.weather }} 气温:{{
|
whetherInfo.temperature
|
}}</span
|
>
|
<br /><span>
|
湿度:{{ whetherInfo.humidity }} 风向:{{
|
whetherInfo.winddirection
|
}}
|
风力:{{ whetherInfo.windpower }}</span
|
>
|
|
<!-- 日期+ 小时 天气 气温 湿度 风向 风力 -->
|
</p>
|
<p class="titleText">上海市中波广播监测平台</p>
|
<p class="tagDiv">
|
<el-radio-group v-model="radioValue" size="mini">
|
<el-radio-button label="0">监测评估</el-radio-button>
|
<el-radio-button label="1">覆盖评估</el-radio-button>
|
</el-radio-group>
|
<svg-icon
|
class="svgIcon"
|
icon-class="task"
|
style="margin-left: 20px"
|
@click="showSocket()"
|
></svg-icon>
|
</p>
|
</div>
|
<transition name="topMove" enter-class="topMoveStart">
|
<div class="topBlock" v-if="topDrawState">
|
<div class="topBlockMain">
|
<topBlock
|
@changeFrequency="changeFrequency"
|
@changeTimeValue="changeTimeValue"
|
@changeSwitchValue="changeSwitchValue"
|
@changeMap="changeMap"
|
@showColorBlock="showColorBlock"
|
:leftSelFre="leftSelFre"
|
></topBlock>
|
</div>
|
<div class="topButton" @click="hideTop" v-if="!topDrawState">
|
<i class="el-icon-caret-top"></i>
|
</div>
|
</div>
|
</transition>
|
<div class="hideTopButton" @click="showTop" v-if="!topDrawState">
|
<i class="el-icon-caret-bottom"></i>
|
</div>
|
|
<!-- <div v-draw class="drawTip">1231231 12312312</div> -->
|
|
<el-dialog
|
title=""
|
:visible.sync="colorBlockIsShow"
|
width="40%"
|
style="z-index: 8000; over-flow: scroll"
|
>
|
<span slot="title">
|
<div
|
style="
|
display: flex;
|
flex-wrap: nowrap;
|
justify-content: space-between;
|
width: 80%;
|
margin-left: 10%;
|
"
|
>
|
<p style="line-height: 28px; font-size: 16px">设置色值</p>
|
<el-button type="primary" size="mini" @click="addColor"
|
>增加</el-button
|
>
|
</div>
|
</span>
|
<el-table :data="colors" style="width: 100%" height="400">
|
<el-table-column label="序号" type="index" width="60">
|
</el-table-column>
|
<el-table-column prop="color" label="颜色">
|
<template slot-scope="scope">
|
<div>
|
<el-color-picker v-model="scope.row.color"></el-color-picker>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="color" label="色值"></el-table-column>
|
<el-table-column prop="" label="操作">
|
<template slot-scope="scope">
|
<div>
|
<el-button size="mini" type="danger" @click="delColor(scope)"
|
>删除</el-button
|
>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="colorBlockIsShow = false">取 消</el-button>
|
<el-button type="primary" @click="sureColor">确 定</el-button>
|
</span>
|
</el-dialog>
|
|
<transition name="pointMove" enter-class="pointMoveStart">
|
<div class="pointBlock" v-if="pointDrawState">
|
<div class="pointBlockMain">
|
<div class="pointBlockContent">
|
<pointInfo
|
ref="pointInfo"
|
:pontInfoData="pontInfoData"
|
@showLogin="showLogin"
|
@showLoading="showLoading"
|
@hideLoading="hideLoading"
|
@startScore="startScore"
|
@showLookBack="showLookBack"
|
@joinRecord="joinRecord"
|
@startPlay="startPlay"
|
@stopPlay="stopPlay"
|
:userid="userid"
|
:username="username"
|
:isLoney="isLoney"
|
></pointInfo>
|
</div>
|
</div>
|
<div class="pointButton" @click="hidePoint">
|
<i class="el-icon-circle-close"></i>
|
</div>
|
</div>
|
</transition>
|
|
<div style="z-index: 98">
|
<bigScreenMap
|
@showInfo="showInfo"
|
@changeNowType="changeNowType"
|
:switchValue="switchValue"
|
:frequencyValue="frequencyValue"
|
:timeValue="timeValue"
|
:isChage="isChage"
|
ref="bigScreenMap"
|
:jumpPointId="jumpPointId"
|
:changeAssessValue="changeAssessValue"
|
></bigScreenMap>
|
</div>
|
|
<transition name="leftMove" enter-class="leftMoveStart">
|
<div class="leftBlock" v-if="leftDrawState">
|
<leftBlock
|
class="leftBlockMain"
|
:switchValue="switchValue"
|
:frequencyValue="frequencyValue"
|
:timeValue="timeValue"
|
:radioValue="radioValue"
|
@selFre="selFre"
|
></leftBlock>
|
<div class="leftButton" @click="hideLeft">
|
<i class="el-icon-caret-left"></i>
|
</div>
|
</div>
|
</transition>
|
<div class="hideLeftButton" @click="showLeft" v-if="!leftDrawState">
|
<i class="el-icon-caret-right"></i>
|
</div>
|
|
<transition name="rightMove" enter-class="rightMoveStart">
|
<div class="rightBlock" v-if="rightDrawState">
|
<rightBlock
|
class="rightBlockMain"
|
:switchValue="switchValue"
|
:frequencyValue="frequencyValue"
|
:timeValue="timeValue"
|
:radioValue="radioValue"
|
:leftSelFre="leftSelFre"
|
:userid="userid"
|
@showLoading="showLoading"
|
@hideLoading="hideLoading"
|
@assessUpdate="assessUpdate"
|
@jumpPoint="jumpPoint"
|
@changeAssess="changeAssess"
|
@playVideoRight="playVideoRight"
|
@startPlay="startPlay"
|
@stopPlay="stopPlay"
|
></rightBlock>
|
<div class="rightButton" @click="hideRight">
|
<i class="el-icon-caret-right"></i>
|
</div>
|
</div>
|
</transition>
|
|
<div class="hideRightButton" @click="showRight" v-if="!rightDrawState">
|
<i class="el-icon-caret-left"></i>
|
</div>
|
|
<div>
|
<el-dialog title="提示" :visible.sync="loginDialogVisible" width="50%">
|
<el-form
|
:model="loginForm"
|
:rules="loginFormRule"
|
ref="loginForm"
|
label-width="80px"
|
>
|
<el-form-item label="用户名" prop="username">
|
<el-input v-model="loginForm.username"></el-input>
|
</el-form-item>
|
<el-form-item label="密码" prop="password">
|
<el-input v-model="loginForm.password" type="password"></el-input>
|
</el-form-item>
|
<el-form-item label="验证码" prop="identifyCode">
|
<div style="display: flex">
|
<el-input v-model="loginForm.identifyCode"></el-input>
|
|
<valid-code @changeIdent="changeIdent"></valid-code>
|
</div>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button type="primary" @click="submitForm('loginForm')"
|
>确定</el-button
|
>
|
<el-button @click="loginDialogVisible = false">取消</el-button>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
</div>
|
|
<el-dialog title="请评分" :visible.sync="scoreOperationDialog">
|
<div class="scoreOperation">
|
<p>评分:</p>
|
<el-select
|
v-model="selScoreValue"
|
placeholder="请选择评分"
|
style="width: 100%; margin-left: 20px"
|
>
|
<el-option
|
:label="item.level_name"
|
:value="item.id"
|
v-for="item in selScoreArr"
|
:key="item.id"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="scoreOperationDialog = false" size="mini"
|
>取 消</el-button
|
>
|
<el-button type="primary" @click="sureScore()" size="mini"
|
>确 定</el-button
|
>
|
</div>
|
</el-dialog>
|
|
<socketInfo
|
:visible.sync="socketInfoDialog"
|
@closeIsShow="closeIsShow"
|
@showLookBack="showLookBack"
|
:userid="userid"
|
:username="username"
|
:isLoney="isLoney"
|
>
|
</socketInfo>
|
|
<el-dialog :visible.sync="lookBackVisible" @close="closeReplay">
|
<div slot="title" class="lookBackDataTitle">
|
<p>{{ lookBackData.monitorpointName }}</p>
|
<p>{{ lookBackData.status_name }}</p>
|
</div>
|
<div>
|
<div class="lookBackBlock">
|
<span class="demonstration">回放时间</span>
|
<el-date-picker
|
v-model="selTimeValue"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
style="margin-left: 20px"
|
>
|
</el-date-picker>
|
</div>
|
<div class="lookBackBlock" style="margin-top: 30px">
|
<span>请选择频率:</span>
|
<el-select
|
v-model="frequencySel"
|
placeholder="请先填写日期"
|
style="margin-left: 20px"
|
>
|
<el-option
|
v-for="(item, index) in frequencyArr"
|
:key="index"
|
:label="item"
|
:value="item"
|
></el-option>
|
</el-select>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="点击收听"
|
placement="top"
|
>
|
<i
|
class="el-icon-video-play"
|
style="margin-left: 20px"
|
@click="replayRecord()"
|
v-show="!isReplay"
|
></i>
|
</el-tooltip>
|
</div>
|
</div>
|
|
<div style="margin-top: 30px">
|
<video
|
id="testVideo"
|
ref="testVideo"
|
src=""
|
controls
|
preload
|
width="90%"
|
height="300"
|
v-show="isReplay"
|
>
|
qqq
|
</video>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import bigScreenMap from "./components/bigScreenMap";
|
import leftBlock from "./components/leftBlock";
|
import rightBlock from "./components/rightBlock";
|
import topBlock from "./components/topBlock";
|
import pointInfo from "./components/pointInfo";
|
import socketInfo from "./components/socketInfo";
|
import validCode from "./components/validCode";
|
import kriging_default_params from "@/utils/kriging_default_params";
|
import { Notification } from "element-ui";
|
|
export default {
|
components: {
|
bigScreenMap,
|
leftBlock,
|
rightBlock,
|
topBlock,
|
pointInfo,
|
socketInfo,
|
validCode,
|
},
|
filters: {
|
formatSocketTime(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;
|
}
|
},
|
},
|
sockets: {
|
connect() {
|
this.$socket.emit("connection"); //监听connect事件
|
},
|
getMsg(data) {
|
console.log(JSON.parse(data));
|
this.$refs.bigScreenMap.changePointState(JSON.parse(data));
|
},
|
},
|
data() {
|
return {
|
nowType: 0,
|
colors: [],
|
colorBlockIsShow: false,
|
identifyCode: null,
|
changeAssessValue: null,
|
isChage: false,
|
leftSelFre: "",
|
radioValue: "0",
|
isReplay: false,
|
lookBackVisible: false,
|
lookBackData: {},
|
selTimeValue: [],
|
frequencySel: "",
|
frequencyArr: [],
|
isLoney: false,
|
userid: "",
|
username: "",
|
rateValue: "",
|
isChange: true,
|
whetherInfo: {
|
city: "",
|
weather: "",
|
reporttime: "",
|
temperature: "",
|
humidity: "",
|
winddirection: "",
|
windpower: "",
|
},
|
loginForm: {
|
username: "",
|
password: "",
|
identifyCode: "",
|
},
|
loginFormRule: {
|
username: [
|
{ required: true, message: "请输入用户名", trigger: "blur" },
|
],
|
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
|
identifyCode: [
|
{ required: true, message: "请输入验证码", trigger: "blur" },
|
],
|
},
|
scoreFrequency: "",
|
switchValue: 1,
|
leftDrawState: false,
|
rightDrawState: false,
|
topDrawState: true,
|
pointDrawState: false,
|
pontInfoData: null,
|
timeValue: "",
|
frequencyValue: 1557,
|
loginDialogVisible: false,
|
alertInfo: "",
|
loading: false,
|
scoreOperationDialog: false,
|
selScoreValue: "",
|
selScoreArr: [],
|
scoreInfo: {},
|
socketInfoDialog: false,
|
isClose: false,
|
socketArray: [{ frequency: "--", monitorpointName: "--" }],
|
nowTaskId: "",
|
nowPlayId: null,
|
player: null,
|
showIndex: 0,
|
isLogin: false,
|
playVideo: null,
|
|
jumpPointId: null,
|
};
|
},
|
mounted() {
|
let nowUrl = window.parent.document.URL.split("/");
|
if (nowUrl[3] == "ammonitor") {
|
this.isLoney = false;
|
if (localStorage.getItem("user") && localStorage.getItem("_token")) {
|
this.userid = JSON.parse(localStorage.getItem("user")).name;
|
this.username = JSON.parse(localStorage.getItem("_token")).account;
|
this.getColors();
|
} else {
|
window.location.href =
|
window.backstageURL + "ammonitor/#/passport/login";
|
}
|
} else {
|
this.isLoney = true;
|
if (sessionStorage.getItem("userName")) {
|
this.isLogin = true;
|
let userInfo = JSON.parse(sessionStorage.getItem("userName"));
|
this.userid = userInfo.account;
|
this.username = userInfo.username;
|
this.getColors();
|
} else {
|
this.isLogin = false;
|
this.showLogin();
|
}
|
}
|
|
if (this.timeValue) {
|
this.getWhetherInfo();
|
} else {
|
this.timeValue = this.getCurrentTime();
|
}
|
},
|
watch: {
|
selTimeValue: {
|
handler(n, o) {
|
if (this.selTimeValue.length == 2) {
|
this.frequencySel = "";
|
this.getFrequencySel();
|
}
|
},
|
},
|
frequencySel: {
|
handler(n, o) {
|
if (this.frequencySel) {
|
this.isReplay = false;
|
if (this.playVideo) {
|
this.playVideo.pause();
|
this.playVideo = null;
|
}
|
}
|
},
|
},
|
|
timeValue: {
|
handler(n, o) {
|
if (this.timeValue) {
|
this.getWhetherInfo();
|
} else {
|
this.timeValue = this.getCurrentTime();
|
}
|
},
|
deep: true,
|
immediate: true,
|
},
|
},
|
methods: {
|
startPlay(playData) {
|
this.$emit("startPlay", playData);
|
},
|
stopPlay() {
|
this.$emit("stopPlay");
|
},
|
joinRecord(recordData) {
|
this.$emit("joinRecord", recordData);
|
},
|
playVideoRight() {
|
this.$emit("playVideo");
|
},
|
changeNowType(nowType) {
|
this.nowType = nowType;
|
},
|
getColors() {
|
let param = {
|
bid: "getCoverColors",
|
userid: this.userid,
|
};
|
this.$getJSON(
|
window.backstageURL + "dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
let getColor = JSON.parse(res.data.data[0][0].colors);
|
this.color = [];
|
kriging_default_params.colors = getColor;
|
getColor.forEach((item) => {
|
let one = { color: item };
|
this.colors.push(one);
|
});
|
});
|
},
|
sureColor() {
|
this.colorBlockIsShow = false;
|
let changeColor = [];
|
this.colors.forEach((item) => {
|
changeColor.push(item.color);
|
});
|
kriging_default_params.colors = changeColor;
|
|
let param = {
|
bid: "setCoverColors",
|
userid: this.userid,
|
colors: changeColor,
|
};
|
this.$getJSON(
|
window.backstageURL + "dataservice/getNoTokenData",
|
param
|
).then((res) => {});
|
|
if (this.nowType == 1) {
|
this.$refs.bigScreenMap.changeColor();
|
}
|
},
|
addColor() {
|
if (this.colors.length > 30) {
|
this.$message.warning("个数不能大于30个");
|
} else {
|
let oneColor = { color: "#FFFFFF" };
|
this.colors.push(oneColor);
|
}
|
},
|
delColor(scope) {
|
this.colors.splice(scope.$index, 1);
|
},
|
showColorBlock() {
|
this.colorBlockIsShow = true;
|
},
|
changeIdent(val) {
|
this.identifyCode = val;
|
},
|
changeAssess(changeAssessValue) {
|
this.changeAssessValue = changeAssessValue;
|
},
|
jumpPoint(pointInfo) {
|
this.jumpPointId = pointInfo.monitorpointId;
|
},
|
add0(val) {
|
return val < 10 ? "0" + val : val;
|
},
|
tryDownLoad() {
|
this.$refs.bigScreenMap.tryDown();
|
},
|
assessUpdate() {
|
this.isChage = !this.isChage;
|
},
|
selFre(fre) {
|
this.leftSelFre = fre;
|
},
|
closeReplay() {
|
this.selTimeValue = [];
|
this.frequencySel = "";
|
this.frequencyArr = [];
|
this.isReplay = false;
|
if (this.playVideo) {
|
this.playVideo.pause();
|
this.playVideo = null;
|
}
|
},
|
playReplay(url) {
|
this.playVideo = this.$refs.testVideo;
|
if (Hls.isSupported()) {
|
var hls = new Hls();
|
hls.loadSource(url);
|
hls.attachMedia(this.playVideo);
|
hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
this.playVideo.play();
|
});
|
} else if (this.playVideo.canPlayType("application/vnd.apple.mpegurl")) {
|
this.playVideo.src = url;
|
this.playVideo.addEventListener("loadedmetadata", function () {
|
this.playVideo.play();
|
});
|
}
|
},
|
replayRecord() {
|
let param = new URLSearchParams();
|
param.append("method", "mutipleReview");
|
param.append("instruct", 1);
|
param.append("playType", 1);
|
param.append("hls", 1);
|
param.append("key", 123456);
|
param.append("monitorpointId", this.lookBackData.monitorpointId);
|
param.append("frequencyValue", this.frequencySel);
|
param.append("startTime", this.dateFormatter(this.selTimeValue[0]));
|
param.append("endTime", this.dateFormatter(this.selTimeValue[1]));
|
|
this.$post(window.equipmentURL + "FRP/NetRequest.do", param).then(
|
(res) => {
|
if (res.success == "true") {
|
this.isReplay = true;
|
this.playReplay(res.url);
|
} else {
|
this.$message.error(res.msg);
|
}
|
}
|
);
|
},
|
getFrequencySel() {
|
this.isReplay = false;
|
if (this.playVideo) {
|
this.playVideo.pause();
|
this.playVideo = null;
|
}
|
|
let param = new URLSearchParams();
|
param.append("bid", "getRecordFreqs");
|
param.append("start_time", this.dateFormatter(this.selTimeValue[0]));
|
param.append("end_time", this.dateFormatter(this.selTimeValue[1]));
|
param.append("monitorpointId", this.lookBackData.monitorpointId);
|
this.$getJSON(
|
window.backstageURL + "dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
let fArr = [];
|
res.data.data[0].forEach((item) => {
|
fArr.push(item.frequencyValue);
|
});
|
this.frequencyArr = fArr;
|
});
|
},
|
showLookBack(data) {
|
this.$emit("showRePlay", data);
|
},
|
handleCommand(command) {
|
if (command == "a") {
|
this.showSocket();
|
}
|
if (command == "b") {
|
this.loginOut();
|
}
|
if (command == "c") {
|
this.showLogin();
|
}
|
},
|
loginOut() {
|
sessionStorage.setItem("userName", "");
|
this.isLogin = false;
|
this.$message.success("退出成功");
|
},
|
closeIsShow() {
|
this.socketInfoDialog = false;
|
},
|
|
tableRowClassName({ row, rowIndex }) {
|
if (rowIndex === this.showIndex) {
|
return "successRow";
|
}
|
return "";
|
},
|
changeMap() {
|
// this.colorTips = true
|
this.$refs.bigScreenMap.changeMapInit();
|
},
|
|
openSocket() {
|
let that = this;
|
this.$notify({
|
title: "提示",
|
message: "您有一条未处理信息",
|
type: "warning",
|
duration: 0,
|
onClick() {
|
that.showSocket(); //自定义回调,message为传的参数
|
},
|
onClose() {
|
if (that.socketInfoDialog) {
|
} else {
|
that.isClose = true;
|
}
|
},
|
});
|
},
|
showSocket() {
|
if (this.userid == "" || this.username == "") {
|
if (this.isLoney) {
|
this.showLogin();
|
} else {
|
window.location.href =
|
window.backstageURL + "ammonitor/#/passport/login";
|
}
|
} else {
|
this.socketInfoDialog = true;
|
this.isClose = false;
|
Notification.closeAll();
|
}
|
},
|
sureScore() {
|
let param = new URLSearchParams();
|
param.append("bid", "assessPress");
|
param.append("frequency", this.scoreInfo.frequencyValue);
|
param.append("monitorstationId", this.scoreInfo.monitorpointId);
|
param.append("assessvalue", this.selScoreValue);
|
param.append("userName", this.username);
|
param.append("userid", this.userid);
|
if (this.scoreInfo.taskid) {
|
param.append("taskid", this.scoreInfo.taskid);
|
} else {
|
param.append("taskid", "");
|
}
|
|
this.$getJSON(
|
window.backstageURL + "dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
if (res.code == 20000) {
|
this.$message.success(res.data.data[0][0].messg);
|
} else {
|
this.$message.error(res.data.data[0][0].messg);
|
}
|
this.scoreOperationDialog = false;
|
});
|
},
|
showStartScore(info) {
|
this.scoreInfo = {};
|
this.scoreInfo.taskid = info.id;
|
this.scoreInfo.frequencyValue = info.frequency;
|
this.scoreInfo.monitorpointId = info.monitorpointId;
|
let param = new URLSearchParams();
|
param.append("bid", "assessDict");
|
this.$getJSON(
|
window.backstageURL + "dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
if (res.code == 20000) {
|
this.selScoreArr = res.data.data;
|
this.scoreOperationDialog = true;
|
}
|
});
|
},
|
startScore(info) {
|
this.scoreInfo = {};
|
this.scoreInfo = info;
|
let param = new URLSearchParams();
|
param.append("bid", "assessDict");
|
this.$getJSON(
|
window.backstageURL + "dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
if (res.code == 20000) {
|
this.selScoreArr = res.data.data;
|
this.scoreOperationDialog = true;
|
}
|
});
|
},
|
getWhetherInfo() {
|
console.log(new Date(this.timeValue));
|
let param = new URLSearchParams();
|
param.append("bid", "getWeather");
|
param.append("datestr", this.timeValue.split(" ")[0]);
|
param.append("hour", this.timeValue.split(" ")[1].split(":")[0]);
|
this.$getJSON(
|
window.backstageURL + "dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
this.whetherInfo = res.data.data[0][0];
|
});
|
},
|
submitForm(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
if (
|
this.identifyCode.toUpperCase() ==
|
this.loginForm.identifyCode.toUpperCase()
|
) {
|
let param = new URLSearchParams();
|
param.append("bid", "login");
|
param.append("userid", this.loginForm.username);
|
param.append("psw", this.loginForm.password);
|
this.$getJSON(
|
window.backstageURL + "dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
if (res.data.data.length == 0) {
|
this.$message.error("用户名或者密码错误");
|
} else {
|
sessionStorage.setItem(
|
"userName",
|
JSON.stringify(res.data.data[0])
|
);
|
this.userid = res.data.data[0].account;
|
this.username = res.data.data[0].username;
|
this.loginDialogVisible = false;
|
this.isLogin = true;
|
// this.$refs.bigScreenMap.oldMapInit()
|
localStorage.setItem("user",JSON.stringify({name:res.data.data[0].account}));
|
localStorage.setItem("_token",JSON.stringify({account:res.data.data[0].username}));
|
this.$refs.bigScreenMap.mapInit()
|
this.getColors();
|
}
|
});
|
} else {
|
this.$message.error("验证码错误");
|
}
|
} else {
|
return false;
|
}
|
});
|
},
|
resetForm() {},
|
showInfo(content) {
|
this.pontInfoData = content;
|
this.pointDrawState = true;
|
// this.showDraw();
|
},
|
hideLeft() {
|
this.leftDrawState = false;
|
},
|
showLeft() {
|
this.leftDrawState = true;
|
},
|
hideTop() {
|
this.topDrawState = false;
|
},
|
showTop() {
|
this.topDrawState = true;
|
},
|
hidePoint() {
|
this.pointDrawState = false;
|
},
|
hideRight() {
|
this.rightDrawState = false;
|
},
|
showRight() {
|
this.rightDrawState = true;
|
},
|
showDraw() {
|
this.leftDrawState = true;
|
this.topDrawState = true;
|
this.rightDrawState = true;
|
this.pointDrawState = true;
|
},
|
closeDrow() {
|
this.leftDrawState = false;
|
this.rightDrawState = false;
|
this.topDrawState = false;
|
this.pointDrawState = false;
|
},
|
changeFrequency(value) {
|
this.frequencyValue = value;
|
},
|
changeTimeValue(value) {
|
this.timeValue = value;
|
},
|
changeSwitchValue(value) {
|
this.switchValue = value;
|
},
|
showLogin() {
|
this.loginDialogVisible = true;
|
},
|
showLoading(msg) {
|
if (msg == "jianting") {
|
this.alertInfo = "正在获取监听文件";
|
}
|
if (msg == "luzhi") {
|
this.alertInfo = "正在加入录制";
|
}
|
this.loading = true;
|
},
|
hideLoading() {
|
this.loading = false;
|
},
|
getCurrentTime() {
|
//获取当前时间并打印
|
let yy = new Date().getFullYear();
|
let mm = new Date().getMonth() + 1;
|
let dd = new Date().getDate();
|
let hh = new Date().getHours();
|
let mf =
|
new Date().getMinutes() < 10
|
? "0" + new Date().getMinutes()
|
: new Date().getMinutes();
|
let ss =
|
new Date().getSeconds() < 10
|
? "0" + new Date().getSeconds()
|
: new Date().getSeconds();
|
let gettime = yy + "-" + mm + "-" + dd + " " + hh + ":00";
|
return gettime;
|
},
|
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;
|
},
|
},
|
beforeDestroy() {
|
if (this.player) {
|
this.player.pause();
|
this.player.unload();
|
this.player.detachMediaElement();
|
this.player.destroy();
|
this.player = null;
|
}
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.leftMove-leave-to {
|
animation: leftMoveLeave 0.3s linear;
|
}
|
.leftMove-enter-to {
|
animation: leftMoveEnter 0.3s linear;
|
}
|
|
@keyframes leftMoveLeave {
|
0% {
|
transform: translate(0, 0);
|
}
|
100% {
|
transform: translate(-100%, 0);
|
}
|
}
|
@keyframes leftMoveEnter {
|
0% {
|
transform: translate(-100%, 0);
|
}
|
100% {
|
transform: translate(0, 0);
|
}
|
}
|
|
.rightMove-leave-to {
|
animation: rightMoveLeave 0.3s linear;
|
}
|
.rightMove-enter-to {
|
animation: rightMoveEnter 0.3s linear;
|
}
|
|
@keyframes rightMoveLeave {
|
0% {
|
transform: translate(0, 0);
|
}
|
100% {
|
transform: translate(100%, 0);
|
}
|
}
|
@keyframes rightMoveEnter {
|
0% {
|
transform: translate(100%, 0);
|
}
|
100% {
|
transform: translate(0, 0);
|
}
|
}
|
|
.topMove-leave-to {
|
animation: topMoveLeave 0.3s linear;
|
}
|
.topMove-enter-to {
|
animation: topMoveEnter 0.3s linear;
|
}
|
|
@keyframes topMoveLeave {
|
0% {
|
transform: translate(0, 0);
|
}
|
100% {
|
transform: translate(0, -100%);
|
}
|
}
|
@keyframes topMoveEnter {
|
0% {
|
transform: translate(0, -100%);
|
}
|
100% {
|
transform: translate(0, 0);
|
}
|
}
|
|
.pointMove-leave-to {
|
animation: pointMoveLeave 0.3s linear;
|
}
|
.pointMove-enter-to {
|
animation: pointMoveEnter 0.3s linear;
|
}
|
|
@keyframes pointMoveLeave {
|
0% {
|
transform: scale(100%, 100%);
|
}
|
100% {
|
transform: scale(0, 0);
|
}
|
}
|
@keyframes pointMoveEnter {
|
0% {
|
transform: scale(0, 0);
|
}
|
100% {
|
transform: scale(100%, 100%);
|
}
|
}
|
|
.title {
|
width: 100%;
|
height: 80px;
|
background-color: rgba(0, 0, 0, 0.8);
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: 99;
|
|
.titleText {
|
font-size: 46px;
|
line-height: 80px;
|
text-align: center;
|
background: linear-gradient(
|
to bottom,
|
rgba($color: aqua, $alpha: 0.8),
|
rgba($color: blue, $alpha: 0.8)
|
);
|
-webkit-background-clip: text;
|
color: transparent;
|
font-weight: 900;
|
letter-spacing: 20px;
|
font-family: Tahoma;
|
}
|
|
.whether {
|
position: fixed;
|
line-height: 40px;
|
font-size: 18px;
|
color: white;
|
left: 30px;
|
top: 0;
|
|
span {
|
font-size: 18px;
|
font-weight: 800;
|
}
|
}
|
|
.tagDiv {
|
position: fixed;
|
line-height: 80px;
|
font-size: 20px;
|
color: white;
|
right: 30px;
|
top: 0;
|
}
|
}
|
.haveMessage {
|
position: flex;
|
top: 0;
|
left: 0;
|
|
width: 106px;
|
z-index: 999;
|
}
|
.topBlock {
|
top: 85px;
|
left: 30%;
|
width: 40%;
|
height: 150px;
|
position: fixed;
|
z-index: 100;
|
background: rgba(0, 0, 0, 0.8);
|
|
.topBlockMain {
|
width: 100%;
|
height: 100%;
|
z-index: 100;
|
background: linear-gradient(
|
to top,
|
rgba(77, 214, 182, 0.6),
|
rgba(77, 214, 182, 1)
|
)
|
left top no-repeat,
|
linear-gradient(to right, rgba(77, 214, 182, 1), rgba(77, 214, 182, 0.6))
|
left top no-repeat,
|
linear-gradient(to top, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
|
right top no-repeat,
|
linear-gradient(to left, rgba(77, 214, 182, 1), rgba(77, 214, 182, 0.6))
|
right top no-repeat,
|
linear-gradient(to bottom, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
|
left bottom no-repeat,
|
linear-gradient(to left, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
|
left bottom no-repeat,
|
linear-gradient(to bottom, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
|
right bottom no-repeat,
|
linear-gradient(to right, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
|
right bottom no-repeat;
|
background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
|
}
|
|
.topButton {
|
width: 100px;
|
height: 30px;
|
background: rgba(0, 0, 0, 0.8);
|
color: rgba(77, 214, 182, 1);
|
position: absolute;
|
left: 50%;
|
top: 100%;
|
margin-left: -50px;
|
font-size: 24px;
|
font-weight: 900;
|
z-index: 100;
|
}
|
}
|
.hideTopButton {
|
width: 100px;
|
height: 30px;
|
background: rgba(0, 0, 0, 0.8);
|
color: rgba(77, 214, 182, 1);
|
position: absolute;
|
left: 52.5%;
|
top: 0;
|
margin-left: -50px;
|
font-size: 24px;
|
font-weight: 900;
|
z-index: 99;
|
}
|
|
.topMoveStart {
|
top: -150px;
|
left: 33%;
|
width: 39%;
|
height: 150px;
|
position: fixed;
|
z-index: 99;
|
background: rgba(0, 0, 0, 0.8);
|
}
|
|
.pointBlock {
|
position: fixed;
|
top: 300px;
|
left: 30%;
|
width: 40%;
|
background: rgba(0, 0, 0, 0.8);
|
height: 450px;
|
z-index: 99;
|
|
.pointBlockMain {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
background: linear-gradient(
|
to top,
|
rgba(77, 214, 182, 0.6),
|
rgba(77, 214, 182, 1)
|
)
|
left top no-repeat,
|
linear-gradient(to right, rgba(77, 214, 182, 1), rgba(77, 214, 182, 0.6))
|
left top no-repeat,
|
linear-gradient(to top, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
|
right top no-repeat,
|
linear-gradient(to left, rgba(77, 214, 182, 1), rgba(77, 214, 182, 0.6))
|
right top no-repeat,
|
linear-gradient(to bottom, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
|
left bottom no-repeat,
|
linear-gradient(to left, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
|
left bottom no-repeat,
|
linear-gradient(to bottom, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
|
right bottom no-repeat,
|
linear-gradient(to right, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
|
right bottom no-repeat;
|
background-size: 3px 25px, 20px 3px, 3px 20px, 20px 3px;
|
|
.pointBlockContent {
|
width: 96%;
|
margin-left: 2%;
|
height: 450px;
|
margin-top: 10px;
|
}
|
}
|
|
.pointButton {
|
width: 20px;
|
height: 20px;
|
border-radius: 10px;
|
position: absolute;
|
top: -10px;
|
right: -10px;
|
color: rgba(77, 214, 182, 1);
|
background: rgba(0, 0, 0, 0.8);
|
i {
|
font-size: 20px;
|
}
|
}
|
}
|
|
.pointMoveStart {
|
position: fixed;
|
top: 300px;
|
left: 50%;
|
background: rgba(0, 0, 0, 0.8);
|
width: 0;
|
height: 0;
|
margin-left: -250px;
|
z-index: 99;
|
}
|
|
.leftBlock {
|
position: fixed;
|
top: 85px;
|
left: 0px;
|
bottom: 5px;
|
background: rgba(0, 0, 0, 0.8);
|
width: 28%;
|
z-index: 99;
|
|
.leftBlockMain {
|
width: 100%;
|
height: 100%;
|
background: linear-gradient(
|
to top,
|
rgba(77, 214, 182, 0.6),
|
rgba(77, 214, 182, 1)
|
)
|
left top no-repeat,
|
linear-gradient(to right, rgba(77, 214, 182, 1), rgba(77, 214, 182, 0.6))
|
left top no-repeat,
|
linear-gradient(to top, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
|
right top no-repeat,
|
linear-gradient(to left, rgba(77, 214, 182, 1), rgba(77, 214, 182, 0.6))
|
right top no-repeat,
|
linear-gradient(to bottom, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
|
left bottom no-repeat,
|
linear-gradient(to left, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
|
left bottom no-repeat,
|
linear-gradient(to bottom, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
|
right bottom no-repeat,
|
linear-gradient(to right, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
|
right bottom no-repeat;
|
background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
|
}
|
|
.leftButton {
|
display: block;
|
width: 30px;
|
height: 100px;
|
background: rgba(0, 0, 0, 0.8);
|
color: rgba(77, 214, 182, 1);
|
position: absolute;
|
left: 100%;
|
top: 50%;
|
margin-top: -50px;
|
line-height: 100px;
|
font-size: 24px;
|
font-weight: 900;
|
}
|
}
|
|
.hideLeftButton {
|
display: block;
|
width: 30px;
|
height: 100px;
|
background: rgba(0, 0, 0, 0.8);
|
color: rgba(77, 214, 182, 1);
|
position: absolute;
|
left: 0;
|
top: 50%;
|
margin-top: -7.5px;
|
line-height: 100px;
|
font-size: 24px;
|
font-weight: 900;
|
}
|
|
.leftMoveStart {
|
position: fixed;
|
top: 85px;
|
left: 0px;
|
bottom: 5px;
|
width: 0px;
|
z-index: 999;
|
}
|
|
.rightBlock {
|
position: fixed;
|
top: 85px;
|
right: 0;
|
bottom: 5px;
|
background: rgba(0, 0, 0, 0.8);
|
width: 28%;
|
z-index: 99;
|
|
.rightBlockMain {
|
width: 100%;
|
height: 100%;
|
background: linear-gradient(
|
to top,
|
rgba(77, 214, 182, 0.6),
|
rgba(77, 214, 182, 1)
|
)
|
left top no-repeat,
|
linear-gradient(to right, rgba(77, 214, 182, 1), rgba(77, 214, 182, 0.6))
|
left top no-repeat,
|
linear-gradient(to top, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
|
right top no-repeat,
|
linear-gradient(to left, rgba(77, 214, 182, 1), rgba(77, 214, 182, 0.6))
|
right top no-repeat,
|
linear-gradient(to bottom, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
|
left bottom no-repeat,
|
linear-gradient(to left, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
|
left bottom no-repeat,
|
linear-gradient(to bottom, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
|
right bottom no-repeat,
|
linear-gradient(to right, rgba(77, 214, 182, 0.6), rgba(77, 214, 182, 1))
|
right bottom no-repeat;
|
background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
|
}
|
|
.rightButton {
|
display: block;
|
width: 30px;
|
height: 100px;
|
background: rgba(0, 0, 0, 0.8);
|
color: rgba(77, 214, 182, 1);
|
position: absolute;
|
right: 100%;
|
top: 50%;
|
margin-top: -50px;
|
line-height: 100px;
|
font-size: 24px;
|
font-weight: 900;
|
}
|
}
|
|
.hideRightButton {
|
display: block;
|
width: 30px;
|
height: 100px;
|
background: rgba(0, 0, 0, 0.8);
|
color: rgba(77, 214, 182, 1);
|
position: absolute;
|
right: 0;
|
top: 50%;
|
margin-top: -7.5px;
|
line-height: 100px;
|
font-size: 24px;
|
font-weight: 900;
|
}
|
|
.rightMoveStart {
|
position: fixed;
|
top: 85px;
|
right: 0;
|
bottom: 5px;
|
width: 0px;
|
z-index: 99;
|
}
|
|
.scoreOperation {
|
display: flex;
|
flex-wrap: nowrap;
|
justify-content: space-between;
|
|
p {
|
width: 40px;
|
line-height: 40px;
|
}
|
}
|
|
.optionButton {
|
display: flex;
|
flex-wrap: nowrap;
|
justify-content: center;
|
}
|
|
/deep/ .el-carousel__arrow {
|
transition: none !important;
|
border-radius: 0 !important;
|
top: 0;
|
transform: none !important;
|
height: 100%;
|
line-height: 100%;
|
}
|
|
/deep/ .el-icon-arrow-right::after {
|
content: "\4e0b\4e00\9879";
|
display: block;
|
color: black;
|
margin-top: 10px;
|
}
|
/deep/ .el-icon-arrow-right::before {
|
content: ">>";
|
color: black;
|
}
|
|
/deep/ .el-carousel__arrow--right {
|
right: 0px !important;
|
width: 50px;
|
}
|
|
/deep/ .el-icon-arrow-left::after {
|
content: "\4e0a\4e00\9879";
|
display: block;
|
color: black;
|
margin-top: 10px;
|
}
|
/deep/ .el-icon-arrow-left::before {
|
content: "<<";
|
color: black;
|
}
|
|
/deep/ .el-carousel__arrow--left {
|
left: 0px !important;
|
width: 50px;
|
}
|
|
/deep/ .renwu .el-dialog__body {
|
background: transparent !important;
|
}
|
|
/deep/ .el-table .successRow {
|
background: #67c23a;
|
}
|
|
.middleLine {
|
height: 500px;
|
width: 1px;
|
border-left: dashed 1px #cccccc;
|
}
|
|
.lookBackDataTitle {
|
width: 90%;
|
margin-left: 5%;
|
display: flex;
|
flex-wrap: nowrap;
|
justify-content: space-between;
|
}
|
|
.svgIcon {
|
cursor: pointer;
|
}
|
|
.colorBlock {
|
top: 220px;
|
left: 50%;
|
width: 20%;
|
margin-left: 50px;
|
height: 300px;
|
position: fixed;
|
z-index: 6000;
|
background-color: #ffffff;
|
}
|
|
// .drawTip {
|
// z-index: 9000 !important;
|
// overflow: scroll !important;
|
// position: fixed !important;
|
// top: 50px;
|
// height: 300px !important;
|
// width: 100px !important;
|
// background-color: white !important;
|
// }
|
</style>
|
