<template>
|
<div v-loading="loading">
|
<div>
|
<div class="rightTableTitle">
|
<div>
|
<span style="width: 50px">时间:</span>
|
<el-date-picker
|
v-model="leftList.time"
|
type="datetimerange"
|
range-separator="-"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
size="mini"
|
style="width: 200px; margin-left: 10px"
|
>
|
</el-date-picker>
|
</div>
|
<div style="margin-left: 20px">
|
<span style="width: 50px">频率:</span>
|
<el-input
|
v-model="leftList.frequency"
|
placeholder="频率"
|
style="width: 200px; margin-left: 10px"
|
size="mini"
|
></el-input>
|
</div>
|
|
<div style="margin-left: 20px">
|
<span style="width: 50px">执行人</span>
|
<el-input
|
v-model="selectionConditions.executor"
|
placeholder="执行人"
|
style="width: 200px; margin-left: 10px"
|
size="mini"
|
></el-input>
|
</div>
|
|
<div style="margin-left: 20px">
|
<span style="width: 50px">监测点</span>
|
|
<el-input
|
v-model="selectionConditions.monitoringPoint"
|
placeholder="监测点"
|
style="width: 200px; margin-left: 10px"
|
size="mini"
|
></el-input>
|
</div>
|
</div>
|
<div class="rightTableTitle">
|
<div>
|
<span style="width: 50px">评估值状态</span>
|
<el-radio-group
|
v-model="selectionConditions.assessmentRadio"
|
style="margin-left: 10px"
|
size="mini"
|
>
|
<el-radio :label="1">显示全部</el-radio>
|
<el-radio :label="2">已评估</el-radio>
|
<el-radio :label="3">未评估</el-radio>
|
</el-radio-group>
|
</div>
|
|
<div
|
style="margin-left: 50px"
|
v-if="selectionConditions.assessmentRadio == 2"
|
>
|
<span style="width: 50px">评估分值</span>
|
<el-slider
|
v-model="selectionConditions.assessmentValue"
|
range
|
show-stops
|
:max="5"
|
:min="1"
|
style="
|
width: 250px;
|
margin-left: 10px;
|
display: inline-block;
|
vertical-align: top;
|
margin-top: -10px;
|
"
|
size="mini"
|
>
|
</el-slider>
|
</div>
|
</div>
|
</div>
|
<div class="assessmentMain" :style="{ height: bHtight }">
|
<div class="leftSel" :style="{ height: bHtight }">
|
<v-tree
|
:data="allArrData"
|
show-line
|
@select="select"
|
ref="allTree"
|
></v-tree>
|
</div>
|
<div class="rightTable" :style="{ height: bHtight }">
|
<div>
|
<el-table
|
:data="screenTableData"
|
style="width: 96%; margin-left: 2%"
|
:height="tHeight"
|
:key="key"
|
border
|
>
|
<el-table-column prop="frequency" label="频率"> </el-table-column>
|
<el-table-column prop="username" label="执行人"> </el-table-column>
|
<el-table-column prop="wdate" label="日期" sortable>
|
<template slot-scope="scope">
|
<div>
|
{{ formatDate(scope.row.wdate) }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="whour" label="时钟"> </el-table-column>
|
<el-table-column
|
prop="assessvalue"
|
label="评估分值"
|
fixed="right"
|
sortable
|
>
|
<template slot-scope="scope">
|
<div style="display: flex">
|
<p
|
v-show="!scope.row.edit"
|
style="width: 30px; line-height: 48px"
|
>
|
{{ scope.row.assessvalue }}
|
</p>
|
<el-select
|
v-show="scope.row.edit"
|
v-model="scope.row.assessvalue"
|
placeholder="请选择评分"
|
style="width: 90%"
|
>
|
<el-option
|
:label="item"
|
:value="item"
|
v-for="item in selScoreArr"
|
:key="item.id"
|
>
|
</el-option>
|
</el-select>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
:content="scope.row.edit ? '确认' : '评估'"
|
placement="top"
|
style="margin-left: 10px"
|
>
|
<i
|
style="line-height: 48px"
|
:class="{
|
'el-icon-edit': !scope.row.edit,
|
'el-icon-check': scope.row.edit,
|
}"
|
@click="sureScore(scope)"
|
></i>
|
</el-tooltip>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="monitorpoint_name" label="监测点" sortable>
|
</el-table-column>
|
<el-table-column prop="taskstatus" label="任务状态">
|
<template slot-scope="scope">
|
<div>
|
{{ scope.row.taskstatus | formatStatus }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="update_time" label="任务完成时间" sortable>
|
<template slot-scope="scope">
|
<div>
|
{{ formatDateTime(scope.row.update_time) }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="update_time" label="回放">
|
<template slot-scope="scope">
|
<div>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="点击回放"
|
placement="top"
|
>
|
<i class="el-icon-refresh-right" @click="rePlay(scope)"></i>
|
</el-tooltip>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</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"></el-input>
|
</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>
|
</div>
|
|
<el-dialog :visible.sync="socketPlay" width="50" @close="socketReplay">
|
<video
|
id="socketVidoPlay"
|
ref="socketVidoPlay"
|
src=""
|
controls
|
preload
|
width="100%"
|
height="300"
|
></video>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
export default {
|
filters: {
|
formatStatus(status) {
|
if (status == 0) {
|
return "未完成";
|
} else if (status == 1) {
|
return "完成";
|
} else {
|
return "--";
|
}
|
},
|
},
|
watch: {
|
selectionConditions: {
|
handler(n, o) {
|
this.loading = true;
|
let result;
|
var objIsEmpty =
|
this.selectionConditions.executor == "" &&
|
this.selectionConditions.monitoringPoint == "" &&
|
this.selectionConditions.state == "";
|
if (objIsEmpty) {
|
result = JSON.parse(JSON.stringify(this.showTableData));
|
} else {
|
let tempFilter = {};
|
if (this.selectionConditions.executor) {
|
tempFilter.username = this.selectionConditions.executor;
|
}
|
if (this.selectionConditions.monitoringPoint) {
|
tempFilter.monitorpoint_name =
|
this.selectionConditions.monitoringPoint;
|
}
|
if (this.selectionConditions.state) {
|
tempFilter.taskstatus = this.selectionConditions.state;
|
}
|
|
result = this.showTableData.filter(
|
//筛选
|
(item) => {
|
let flag = false;
|
|
for (const key in tempFilter) {
|
if (
|
item[key].toString().indexOf(tempFilter[key].toString()) >= 0
|
) {
|
flag = true;
|
} else {
|
flag = false;
|
break;
|
}
|
}
|
if (flag) {
|
return item;
|
}
|
}
|
);
|
}
|
|
let tmpScreenTableData = [];
|
|
result.forEach((item) => {
|
if (this.selectionConditions.assessmentRadio == 1) {
|
tmpScreenTableData.push(item);
|
} else if (this.selectionConditions.assessmentRadio == 2) {
|
if (
|
Number(item.assessvalue) >=
|
this.selectionConditions.assessmentValue[0] &&
|
Number(item.assessvalue) <=
|
this.selectionConditions.assessmentValue[1]
|
) {
|
tmpScreenTableData.push(item);
|
}
|
} else if (this.selectionConditions.assessmentRadio == 3) {
|
if (item.assessvalue) {
|
} else {
|
tmpScreenTableData.push(item);
|
}
|
} else {
|
}
|
});
|
tmpScreenTableData.forEach((item) => {
|
item.edit = false;
|
});
|
this.screenTableData = tmpScreenTableData;
|
this.loading = false
|
},
|
deep: true,
|
},
|
leftList: {
|
handler(n, o) {
|
if (this.timer) {
|
clearTimeout(this.timer);
|
}
|
this.timer = setTimeout(() => {
|
this.getInfo();
|
}, 1000);
|
},
|
deep: true,
|
},
|
},
|
data() {
|
return {
|
socketPlay: false,
|
playVideo: null,
|
timer: null,
|
leftList: {
|
frequency: "",
|
time: [new Date(new Date().getTime() - 86400 * 7 * 1000), new Date()],
|
},
|
edit: false,
|
searchInput: "",
|
tHeight: "",
|
bHtight: "",
|
key: false,
|
showTableData: [],
|
selectionConditions: {
|
executor: "",
|
monitoringPoint: "",
|
state: "",
|
assessmentRadio: 1,
|
assessmentValue: [1, 5],
|
},
|
allArrData: [],
|
screenTableData: [],
|
selScoreArr: [1, 2, 3, 4, 5, "无效"],
|
assessmentDialog: false,
|
selScoreValue: "",
|
loading: false,
|
loginDialogVisible: false,
|
loginForm: {
|
username: "",
|
password: "",
|
},
|
loginFormRule: {
|
username: [
|
{ required: true, message: "请输入用户名", trigger: "blur" },
|
],
|
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
|
},
|
};
|
},
|
mounted() {
|
this.tHeight = window.innerHeight - 120 + "px";
|
this.bHtight = window.innerHeight - 100 + "px";
|
this.getInfo();
|
// let aaa = this.try()
|
// console.log(aaa)
|
},
|
methods: {
|
// try() {
|
// var p = new Promise(function (resolve, reject) {
|
// setTimeout(() => {
|
// resolve("qweqweqwe");
|
// }, 2000);
|
// });
|
// return p
|
// },
|
|
socketReplay() {
|
if (this.playVideo) {
|
this.playVideo.pause();
|
this.playVideo = null;
|
}
|
},
|
rePlay(scope) {
|
if (scope.row.update_time) {
|
let startTime = this.dateFormatter(
|
new Date(new Date(scope.row.update_time).getTime())
|
);
|
let endTime = this.dateFormatter(
|
new Date(new Date(scope.row.update_time).getTime() + 1000 * 60 * 180)
|
);
|
|
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", scope.row.monitorpoint_id);
|
param.append("frequencyValue", scope.row.frequency);
|
param.append("startTime", startTime);
|
param.append("endTime", endTime);
|
|
this.$post(window.equipmentURL + "FRP/NetRequest.do", param).then(
|
(res) => {
|
if (res.success == "true") {
|
this.socketPlay = true;
|
|
this.playVideo = this.$refs.socketVidoPlay;
|
if (Hls.isSupported()) {
|
var hls = new Hls();
|
hls.loadSource(res.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 = res.url;
|
this.playVideo.addEventListener("loadedmetadata", function () {
|
this.playVideo.play();
|
});
|
}
|
} else {
|
this.$message.error(res.msg);
|
}
|
}
|
);
|
} else {
|
this.$message.warning("尚未有回放");
|
}
|
},
|
showLogin() {
|
window.location.href = window.backstageURL + "ammonitor/#/passport/login";
|
},
|
submitForm(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
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.loginDialogVisible = false;
|
this.isLogin = true;
|
}
|
});
|
} else {
|
return false;
|
}
|
});
|
},
|
|
sureScore(scope) {
|
this.loading = true;
|
if (scope.row.edit) {
|
if (localStorage.getItem("user") && localStorage.getItem("_token")) {
|
let time = "";
|
if (scope.row.update_time) {
|
time = this.formatDateTime(new Date(scope.row.update_time));
|
} else {
|
time = this.formatDateTime(new Date());
|
}
|
|
let userInfo = JSON.parse(localStorage.getItem("user"));
|
let userIdInfo = JSON.parse(localStorage.getItem("_token"));
|
let param = new URLSearchParams();
|
let ass = null;
|
if (scope.row.assessvalue == "无效") {
|
ass = 0;
|
} else {
|
ass = scope.row.assessvalue;
|
}
|
param.append("bid", "assessPress");
|
param.append("frequency", scope.row.frequency);
|
param.append("monitorpointId", scope.row.monitorpoint_id);
|
param.append("assessvalue", ass);
|
param.append("taskid", scope.row.id);
|
param.append("userName", userInfo.name);
|
param.append("userid", userIdInfo.account);
|
|
param.append("recording_time", time);
|
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);
|
}
|
});
|
} else {
|
this.showLogin();
|
}
|
}
|
scope.row.edit = !scope.row.edit;
|
this.key = !this.key;
|
this.loading = false;
|
},
|
formatDate(date) {
|
if (date) {
|
let time = new Date(date);
|
var year = time.getFullYear();
|
var month = time.getMonth() + 1;
|
var date = time.getDate();
|
return this.add0(year) + "-" + this.add0(month) + "-" + this.add0(date);
|
} else {
|
return "--";
|
}
|
},
|
|
formatDateTime(date) {
|
if (date) {
|
let time = new Date(date);
|
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 "--";
|
}
|
},
|
|
add0(val) {
|
return val < 10 ? "0" + val : val;
|
},
|
|
getInfo() {
|
if (localStorage.getItem("user") && localStorage.getItem("_token")) {
|
this.loading = true;
|
let userInfo = JSON.parse(localStorage.getItem("user"));
|
let userIdInfo = JSON.parse(localStorage.getItem("_token"));
|
|
let param = {
|
bid: "getTasklistA",
|
userid: "admin",
|
start_time: this.formatDateTime(this.leftList.time[0].getTime()),
|
end_time: this.formatDateTime(this.leftList.time[1].getTime()),
|
frequency: "",
|
username: "",
|
monitorpointname: "",
|
assessvalue: "",
|
};
|
this.$getJSON(
|
window.backstageURL + "dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
let tmpArr = JSON.parse(JSON.stringify(res.data.data.schedules));
|
|
tmpArr.forEach((item) => {
|
item.title = item.name;
|
item.isFir = 1;
|
item.expanded = false;
|
item.selected = false;
|
item.disableCheckbox = false;
|
item.children = item.subschedules;
|
|
item.subschedules.forEach((secItem) => {
|
secItem.isFir = 2;
|
secItem.title = secItem.name;
|
secItem.disableCheckbox = true;
|
secItem.myThrArr = secItem.tasklist;
|
});
|
});
|
this.allArrData = tmpArr;
|
this.loading = false;
|
});
|
} else {
|
this.showLogin();
|
}
|
},
|
|
select(param) {
|
if (param.length == 0) {
|
this.screenTableData = [];
|
this.key = !this.key;
|
this.$message.warning("请点击选中节点");
|
} else {
|
this.loading = true;
|
if (param[0].isFir == 2) {
|
if (param[0].myThrArr.length == 0) {
|
this.$message.warning("没有数据");
|
this.screenTableData = [];
|
this.key = !this.key;
|
this.loading = false;
|
} else {
|
this.showTableData = param[0].myThrArr;
|
this.screenTableData = JSON.parse(
|
JSON.stringify(this.showTableData)
|
);
|
this.key = !this.key;
|
this.loading = false;
|
}
|
} else {
|
this.$message.warning("请选择子节点");
|
this.screenTableData = [];
|
this.key = !this.key;
|
this.loading = false;
|
}
|
// this.loading = false;
|
}
|
},
|
|
screenShowData(name) {
|
let screenData = [];
|
this.showTableData.forEach((item) => {});
|
},
|
|
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">
|
.assessmentMain {
|
width: 96%;
|
margin-left: 2%;
|
overflow: hidden;
|
display: flex;
|
flex-wrap: nowrap;
|
flex-direction: row;
|
justify-content: space-between;
|
}
|
.leftSel {
|
width: 20%;
|
text-align: left;
|
overflow-y: scroll;
|
border-right: 1px dashed #cccccc;
|
}
|
.rightTable {
|
width: 80%;
|
}
|
|
.rightTableTitle {
|
width: 96%;
|
margin-left: 2%;
|
height: 50px;
|
margin-top: 20px;
|
display: flex;
|
flex-wrap: nowrap;
|
overflow-x: scroll;
|
}
|
|
/deep/ .el-form-item__content {
|
margin-left: 10px !important;
|
}
|
</style>
|
