Skip to content

platform / fanxing_new

Go to a project
Commit 918a409f by 潘建波
Options

临时提交

1 parent b2b6f76c
Inline Side-by-side
Showing 1 changed file with 286 additions and 221 deletions
src/views/taskManage/index.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="contentBox"> <div class="contentBox">
<div class="topCon"> <div class="topCon">
<div class="left"> <div class="left">
<img src="../../assets/img/taskmanage/weather.png" alt=""> <img src="../../assets/img/taskmanage/weather.png" alt="" />
<span class="textCon"> <span class="textCon">
<div class="topText">21°/31°</div> <div class="topText">21°/31°</div>
<div class="bottomText">西北风1级 空气优</div> <div class="bottomText">西北风1级 空气优</div>
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</div> </div>
<div class="right"> <div class="right">
<div class="rightBox"> <div class="rightBox">
<img src="../../assets/img/taskmanage/pic1.png" alt=""> <img src="../../assets/img/taskmanage/pic1.png" alt="" />
<span class="textCon"> <span class="textCon">
<div class="topText">80</div> <div class="topText">80</div>
<div class="bottomText">可用分析资源</div> <div class="bottomText">可用分析资源</div>
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
</div> </div>
<span class="border"></span> <span class="border"></span>
<div class="rightBox"> <div class="rightBox">
<img src="../../assets/img/taskmanage/pic2.png" alt=""> <img src="../../assets/img/taskmanage/pic2.png" alt="" />
<span class="textCon"> <span class="textCon">
<div class="topText">80</div> <div class="topText">80</div>
<div class="bottomText">在用分析资源</div> <div class="bottomText">在用分析资源</div>
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
</div> </div>
<span class="border"></span> <span class="border"></span>
<div class="rightBox"> <div class="rightBox">
<img src="../../assets/img/taskmanage/pic3.png" alt=""> <img src="../../assets/img/taskmanage/pic3.png" alt="" />
<span class="textCon"> <span class="textCon">
<div class="topText">80</div> <div class="topText">80</div>
<div class="bottomText">任务数量</div> <div class="bottomText">任务数量</div>
...@@ -40,18 +40,29 @@ ...@@ -40,18 +40,29 @@
<el-input v-model="task_name" placeholder="请输入任务名称"></el-input> <el-input v-model="task_name" placeholder="请输入任务名称"></el-input>
</span> </span>
<span class="selectBox"> <span class="selectBox">
<el-select v-model="task_algo_type" placeholder="请选择" :popper-append-to-body=false> <el-select
<el-option value="" label='全部'></el-option> v-model="task_algo_type"
<el-option value="0" label='交通'></el-option> placeholder="请选择"
<el-option value="1" label='客流'></el-option> :popper-append-to-body="false"
<el-option value="2" label='行为分析'></el-option> >
<el-option value="7" label='综合流量'></el-option> <el-option value="" label="全部"></el-option>
<el-option value="0" label="交通"></el-option>
<el-option value="1" label="客流"></el-option>
<el-option value="2" label="行为分析"></el-option>
<el-option value="7" label="综合流量"></el-option>
<!-- <el-option value="4" label='人脸'></el-option> --> <!-- <el-option value="4" label='人脸'></el-option> -->
</el-select> </el-select>
</span> </span>
<el-button type="primary" style="position: relative;top: -2px;" @click="query">查询</el-button> <el-button
type="primary"
style="position: relative;top: -2px;"
@click="query"
>查询</el-button
>
<span style="float: right;"> <span style="float: right;">
<el-button type="info" icon="el-icon-plus" @click="editTask('add')">新建任务</el-button> <el-button type="info" icon="el-icon-plus" @click="editTask('add')"
>新建任务</el-button
>
</span> </span>
</div> </div>
<div style="padding: 0 23px 20px 23px;width:99%"> <div style="padding: 0 23px 20px 23px;width:99%">
...@@ -60,82 +71,121 @@ ...@@ -60,82 +71,121 @@
:data="tableData" :data="tableData"
stripe stripe
border border
style="width: 100%"> style="width: 100%"
>
<el-table-column <el-table-column
align="center" align="center"
prop="num" prop="num"
:formatter="numFormatter" :formatter="numFormatter"
label="序号"> label="序号"
>
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="task_name" align="center" label="任务名称">
prop="task_name"
align="center"
label="任务名称">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="status" prop="status"
:formatter="statusFormatter" :formatter="statusFormatter"
label="状态"> label="状态"
>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="task_algo_type" prop="task_algo_type"
:formatter="typeFormatter" :formatter="typeFormatter"
label="算法类型"> label="算法类型"
>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="store_conf.name" prop="store_conf.name"
label="存储配置"> label="存储配置"
>
</el-table-column> </el-table-column>
<el-table-column <el-table-column align="center" prop="workers_count" label="场景占用">
align="center"
prop="workers_count"
label="场景占用">
</el-table-column> </el-table-column>
<el-table-column <el-table-column align="center" prop="workers_count" label="资源用量">
align="center"
prop="workers_count"
label="资源用量">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="priority" prop="priority"
:formatter="priorityFormatter" :formatter="priorityFormatter"
label="优先级"> label="优先级"
>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="start_dt" prop="start_dt"
width="200" width="200"
:formatter="dateFormatter" :formatter="dateFormatter"
label="时间计划"> label="时间计划"
>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
width="300" width="300"
prop="operation" prop="operation"
label="操作"> label="操作"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-tooltip content="修改视频源配置" placement="bottom" effect="light" :visible-arrow=false> <el-tooltip
<span class="iconfont icon-xiugai editIcon" @click="editVideo(scope.$index, scope.row)"></span> content="修改视频源配置"
placement="bottom"
effect="light"
:visible-arrow="false"
>
<span
class="iconfont icon-xiugai editIcon"
@click="editVideo(scope.$index, scope.row)"
></span>
</el-tooltip> </el-tooltip>
<span class="tableSpanBorder"></span> <span class="tableSpanBorder"></span>
<el-tooltip content="修改任务源配置" placement="bottom" effect="light" :visible-arrow=false> <el-tooltip
<span class="iconfont icon-xiugai editIcon2" @click="editTask('edit',scope.$index, scope.row)"></span> content="修改任务源配置"
placement="bottom"
effect="light"
:visible-arrow="false"
>
<span
class="iconfont icon-xiugai editIcon2"
@click="editTask('edit', scope.$index, scope.row)"
></span>
</el-tooltip> </el-tooltip>
<span class="tableSpanBorder"></span> <span class="tableSpanBorder"></span>
<el-tooltip content="启动" placement="bottom" effect="light" :visible-arrow=false> <el-tooltip
<span class="iconfont icon-bofang playIcon" @click="setTaskStatus(scope.row,'start')"></span> content="启动"
placement="bottom"
effect="light"
:visible-arrow="false"
>
<span
class="iconfont icon-bofang playIcon"
@click="setTaskStatus(scope.row, 'start')"
></span>
</el-tooltip> </el-tooltip>
<span class="tableSpanBorder"></span> <span class="tableSpanBorder"></span>
<el-tooltip content="暂停" placement="bottom" effect="light" :visible-arrow=false> <el-tooltip
<span class="iconfont icon-zanting pauseIcon" @click="setTaskStatus(scope.row,'stop')"></span> content="暂停"
placement="bottom"
effect="light"
:visible-arrow="false"
>
<span
class="iconfont icon-zanting pauseIcon"
@click="setTaskStatus(scope.row, 'stop')"
></span>
</el-tooltip> </el-tooltip>
<span class="tableSpanBorder"></span> <span class="tableSpanBorder"></span>
<el-tooltip content="删除" placement="bottom" effect="light" :visible-arrow=false> <el-tooltip
<span class="iconfont icon-detail delIcon" @click="delFun(scope.$index, scope.row)"></span> content="删除"
placement="bottom"
effect="light"
:visible-arrow="false"
>
<span
class="iconfont icon-detail delIcon"
@click="delFun(scope.$index, scope.row)"
></span>
</el-tooltip> </el-tooltip>
</template> </template>
</el-table-column> </el-table-column>
...@@ -151,310 +201,325 @@ ...@@ -151,310 +201,325 @@
:current-page="page" :current-page="page"
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:total="total"> :total="total"
>
</el-pagination> </el-pagination>
<div style="clear: both;"></div> <div style="clear: both;"></div>
</div> </div>
</div> </div>
<editset ref="editset" :pedittype="pedittype" @refresh="getTaskList"></editset> <editset
<editvideo ref="editvideo" :parentData="curtask" :pedittype="pedittype" @refresh="getTaskList"></editvideo> ref="editset"
:pedittype="pedittype"
@refresh="getTaskList"
></editset>
<editvideo
ref="editvideo"
:parentData="curtask"
:pedittype="pedittype"
@refresh="getTaskList"
></editvideo>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import editset from './editSet' import editset from "./editSet";
import editvideo from './editVideo' import editvideo from "./editVideo";
export default { export default {
data(){ data() {
return{ return {
task_name:'', task_name: "",
curtask:'', curtask: "",
task_algo_type:'', task_algo_type: "",
total:0, total: 0,
page:1, page: 1,
pageSize:30, pageSize: 30,
setShow:false, setShow: false,
videoShow:false, videoShow: false,
editForm:{}, editForm: {},
tableData: [], tableData: [],
pedittype:'add' pedittype: "add"
} };
}, },
components:{ components: {
editset,editvideo editset,
editvideo
}, },
mounted(){ mounted() {
this.getTaskList(); this.getTaskList();
}, },
methods:{ methods: {
statusFormatter(row, column, cellValue, index){ statusFormatter(row, column, cellValue, index) {
if(cellValue == 'Running'){ if (cellValue == "Running") {
return '工作中' return "工作中";
}else if(cellValue == 'Finished'){ } else if (cellValue == "Finished") {
return '已完成' return "已完成";
}else if(cellValue == 'Pause'){ } else if (cellValue == "Pause") {
return '暂停' return "暂停";
}else if(cellValue == 'Error'){ } else if (cellValue == "Error") {
return '异常' return "异常";
}else if(cellValue == 'Deleted'){ } else if (cellValue == "Deleted") {
return '已删除' return "已删除";
}else { } else {
return '未部署' return "未部署";
} }
}, },
priorityFormatter(row, column, cellValue, index) { priorityFormatter(row, column, cellValue, index) {
if(cellValue == 'high'){ if (cellValue == "high") {
return '高' return "高";
}else if(cellValue == 'normal'){ } else if (cellValue == "normal") {
return '中' return "中";
}else if(cellValue == 'low'){ } else if (cellValue == "low") {
return '低' return "低";
}else { } else {
return '未知' return "未知";
} }
}, },
dateFormatter(row, column, cellValue, index){ dateFormatter(row, column, cellValue, index) {
let startDate=cellValue ? cellValue.split(' ')[0]:''; let startDate = cellValue ? cellValue.split(" ")[0] : "";
let endDate=row.end_dt ? row.end_dt.split(' ')[0]:''; let endDate = row.end_dt ? row.end_dt.split(" ")[0] : "";
return startDate+' ~ '+endDate; return startDate + " ~ " + endDate;
}, },
typeFormatter(row, column, cellValue, index) { typeFormatter(row, column, cellValue, index) {
if(cellValue == 0){ if (cellValue == 0) {
return '交通' return "交通";
}else if(cellValue == 1){ } else if (cellValue == 1) {
return '客流' return "客流";
}else if(cellValue == 2){ } else if (cellValue == 2) {
return '行为分析' return "行为分析";
}else if(cellValue == 3){ } else if (cellValue == 3) {
return '违停' return "违停";
}else if(cellValue == 5){ } else if (cellValue == 5) {
return '交通行人' return "交通行人";
}else if(cellValue == 7){ } else if (cellValue == 7) {
return '综合流量' return "综合流量";
}else { } else {
return '未知' return "未知";
} }
}, },
numFormatter(row, column, cellValue, index) { numFormatter(row, column, cellValue, index) {
return (index+1)*this.page; return (index + 1) * this.page;
}, },
handleSizeChange(val) { handleSizeChange(val) {
this.pageSize=val; this.pageSize = val;
this.getTaskList(); this.getTaskList();
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.page=val; this.page = val;
this.getTaskList(); this.getTaskList();
}, },
query(){ query() {
this.getTaskList(); this.getTaskList();
}, },
getTaskList(){ getTaskList() {
this.tableData=[]; this.tableData = [];
let offset = (this.page - 1) * this.pageSize; let offset = (this.page - 1) * this.pageSize;
this.$api.task.getTask({ this.$api.task
.getTask({
limit: this.pageSize, limit: this.pageSize,
offset: offset, offset: offset,
task_algo_type: this.task_algo_type, task_algo_type: this.task_algo_type,
source_type: "pull_video_stream", source_type: "pull_video_stream",
task_type: "normal", task_type: "normal",
task_name: this.task_name task_name: this.task_name
}).then((res)=>{ })
this.total=res.total_num; .then(res => {
this.total = res.total_num;
if(res.list_data==null){ if (res.list_data == null) {
this.tableData=[] this.tableData = [];
}else{ } else {
res.list_data.forEach(item=>{ res.list_data.forEach(item => {
if(item.start_dt){ if (item.start_dt) {
//先转utc格式 //先转utc格式
let date=this.$moment.utc(item.start_dt).format(); let date = this.$moment.utc(item.start_dt).format();
//再utc时间转本地时间 //再utc时间转本地时间
item.start_dt=this.$moment(date).local().format('YYYY-MM-DD HH:mm:ss') item.start_dt = this.$moment(date)
.local()
.format("YYYY-MM-DD HH:mm:ss");
} }
if(item.end_dt){ if (item.end_dt) {
//先转utc格式 //先转utc格式
let date=this.$moment.utc(item.end_dt).format(); let date = this.$moment.utc(item.end_dt).format();
//再utc时间转本地时间 //再utc时间转本地时间
item.end_dt=this.$moment(date).local().format('YYYY-MM-DD HH:mm:ss') item.end_dt = this.$moment(date)
.local()
.format("YYYY-MM-DD HH:mm:ss");
} }
}) });
this.tableData=res.list_data; this.tableData = res.list_data;
} }
}).catch((error)=>{
}) })
.catch(error => {});
}, },
editVideo(index,row){ editVideo(index, row) {
this.$refs.editvideo.showModal(row) this.$refs.editvideo.showModal(row);
}, },
editTask(type,index,row){ editTask(type, index, row) {
this.$refs.editset.initData(type,row) this.$refs.editset.initData(type, row);
this.pedittype = type this.pedittype = type;
this.$nextTick(() => { this.$nextTick(() => {
this.editForm=row; this.editForm = row;
}) });
}, },
setTaskStatus(data,type){ setTaskStatus(data, type) {
this.$api.task.setTaskStatus(data.task_id,{start_stop_status:type}).then(res =>{ this.$api.task
.setTaskStatus(data.task_id, { start_stop_status: type })
.then(res => {
this.$message({ this.$message({
type: res.ecode=='200'?'success':'error', type: res.ecode == "200" ? "success" : "error",
message: res.enote message: res.enote
}) });
if(res.ecode=='200') { if (res.ecode == "200") {
this.getTaskList(); this.getTaskList();
} }
}) });
}, },
delFun(index, data){ delFun(index, data) {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning"
}).then(() => { }).then(() => {
this.$api.task.deleteTask(data.task_id).then(res => { this.$api.task.deleteTask(data.task_id).then(res => {
this.$message({ this.$message({
type: res.ecode=='200'?'success':'error', type: res.ecode == "200" ? "success" : "error",
message: res.enote message: res.enote
}) });
if (res.ecode == '200'){ if (res.ecode == "200") {
this.getTaskList(); this.getTaskList();
} }
}) });
});
})
} }
},
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.topCon{ .topCon {
background: $white-back-color; background: $white-back-color;
margin-bottom: 12px; margin-bottom: 12px;
height: 100px; height: 100px;
.left{ .left {
display: inline-block; display: inline-block;
margin: { margin: {
top: 22px; top: 22px;
left: 30px; left: 30px;
}; }
img{ img {
width:65px ; width: 65px;
height: 55px; height: 55px;
margin-right: 11px; margin-right: 11px;
} }
.topText{ .topText {
font-size:24px; font-size: 24px;
font-family:MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI; font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight:bold; font-weight: bold;
margin-bottom: 4px; margin-bottom: 4px;
} }
.bottomText{ .bottomText {
font-size:14px; font-size: 14px;
font-family:MicrosoftYaHeiUI; font-family: MicrosoftYaHeiUI;
} }
} }
.right{ .right {
float: right; float: right;
.topText{ .topText {
font-size:28px; font-size: 28px;
font-family:MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI; font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight:bold; font-weight: bold;
} }
.bottomText{ .bottomText {
position: relative; position: relative;
top: -1px; top: -1px;
font-size:14px; font-size: 14px;
font-family:MicrosoftYaHeiUI; font-family: MicrosoftYaHeiUI;
} }
} }
.textCon{ .textCon {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
.border{ .border {
display: inline-block; display: inline-block;
height: 40px; height: 40px;
border: { border: {
left: 2px solid $border-color; left: 2px solid $border-color;
};
} }
.rightBox{ }
.rightBox {
margin-top: 14px; margin-top: 14px;
display: inline-block; display: inline-block;
img{ img {
margin:{ margin: {
top:15px; top: 15px;
right: 22px; right: 22px;
} }
} }
} }
.rightBox:nth-of-type(1){ .rightBox:nth-of-type(1) {
img{ img {
width: 34px; width: 34px;
height: 34px; height: 34px;
} }
.textCon{ .textCon {
margin-right:114px ; margin-right: 114px;
} }
} }
.rightBox:nth-of-type(2){ .rightBox:nth-of-type(2) {
position: relative; position: relative;
top: 4px; top: 4px;
img{ img {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin-left: 102px; margin-left: 102px;
} }
.textCon{ .textCon {
margin-right:101px ; margin-right: 101px;
} }
} }
.rightBox:nth-of-type(3){ .rightBox:nth-of-type(3) {
img{ img {
width: 34px; width: 34px;
height: 35px; height: 35px;
margin-left: 104px; margin-left: 104px;
} }
.textCon{ .textCon {
margin-right:184px ; margin-right: 184px;
}
} }
} }
.content{ }
background: #FFFFFF; .content {
} background: #ffffff;
.inputBox{ }
.inputBox {
margin-right: 20px; margin-right: 20px;
} }
.selectBox{ .selectBox {
margin-right: 20px; margin-right: 20px;
} }
.editIcon{ .editIcon {
cursor: pointer; cursor: pointer;
color:#0069ff; color: #0069ff;
font-size:16px; font-size: 16px;
} }
.editIcon2{ .editIcon2 {
cursor: pointer; cursor: pointer;
color:#87d14b; color: #87d14b;
font-size:16px; font-size: 16px;
} }
.playIcon{ .playIcon {
cursor: pointer; cursor: pointer;
color:#34b3a2; color: #34b3a2;
font-size:16px; font-size: 16px;
} }
.pauseIcon{ .pauseIcon {
cursor: pointer; cursor: pointer;
color:#ffc62e; color: #ffc62e;
font-size:14px; font-size: 14px;
} }
.delIcon{ .delIcon {
cursor: pointer; cursor: pointer;
color:#f2365a; color: #f2365a;
font-size:16px; font-size: 16px;
} }
</style> </style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!