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