Skip to content

platform / fanxing_new

Go to a project
Commit 5fcce698 by 夏新然
Options

Merge branch 'fanxing' of http://git.keliuyun.com:55676/platform/fanxing_new into fanxing

2 parents 95211591 ad552bac
Inline Side-by-side
Showing 1 changed file with 518 additions and 453 deletions
src/views/taskManage/index.vue
<template> <template>
<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>
</span> </span>
</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>
</span> </span>
</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>
</span> </span>
</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>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<div style="padding: 20px 15px 20px 23px;"> <div style="padding: 20px 15px 20px 23px;">
<span class="inputBox"> <span class="inputBox">
<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="4" label='人脸'></el-option> --> <el-option value="0" label="交通"></el-option>
</el-select> <el-option value="1" label="客流"></el-option>
</span> <el-option value="2" label="行为分析"></el-option>
<el-button type="primary" style="position: relative;top: -2px;" @click="query">查询</el-button> <el-option value="7" label="综合流量"></el-option>
<span style="float: right;"> <!-- <el-option value="4" label='人脸'></el-option> -->
<el-button type="info" icon="el-icon-plus" @click="editTask('add')">新建任务</el-button> </el-select>
</span> </span>
</div> <el-button
<div style="padding: 0 23px 20px 23px;width:99%"> type="primary"
<el-table style="position: relative;top: -2px;"
height="574" @click="query"
:data="tableData" >查询</el-button
stripe >
border <span style="float: right;">
style="width: 100%"> <el-button type="info" icon="el-icon-plus" @click="editTask('add')"
<el-table-column >新建任务</el-button
align="center" >
prop="num" </span>
:formatter="numFormatter" </div>
label="序号"> <div style="padding: 0 23px 20px 23px;width:99%">
</el-table-column> <el-table
<el-table-column height="574"
prop="task_name" :data="tableData"
align="center" stripe
label="任务名称"> border
</el-table-column> style="width: 100%"
<el-table-column >
align="center" <el-table-column
prop="status" align="center"
:formatter="statusFormatter" prop="num"
label="状态"> :formatter="numFormatter"
</el-table-column> label="序号"
<el-table-column >
align="center" </el-table-column>
prop="task_algo_type" <el-table-column prop="task_name" align="center" label="任务名称">
:formatter="typeFormatter" </el-table-column>
label="算法类型"> <el-table-column
</el-table-column> align="center"
<el-table-column prop="status"
align="center" :formatter="statusFormatter"
prop="store_conf.name" label="状态"
label="存储配置"> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="workers_count" prop="task_algo_type"
label="场景占用"> :formatter="typeFormatter"
</el-table-column> label="算法类型"
<el-table-column >
align="center" </el-table-column>
prop="workers_count" <el-table-column
label="资源用量"> align="center"
</el-table-column> prop="store_conf.name"
<el-table-column label="存储配置"
align="center" >
prop="priority" </el-table-column>
:formatter="priorityFormatter" <el-table-column align="center" prop="workers_count" label="场景占用">
label="优先级"> </el-table-column>
</el-table-column> <el-table-column align="center" prop="workers_count" label="资源用量">
<el-table-column </el-table-column>
align="center" <el-table-column
prop="start_dt" align="center"
width="200" prop="priority"
:formatter="dateFormatter" :formatter="priorityFormatter"
label="时间计划"> label="优先级"
</el-table-column> >
<el-table-column </el-table-column>
align="center" <el-table-column
width="300" align="center"
prop="operation" prop="start_dt"
label="操作"> width="200"
<template slot-scope="scope"> :formatter="dateFormatter"
<el-tooltip content="修改视频源配置" placement="bottom" effect="light" :visible-arrow=false> label="时间计划"
<span class="iconfont icon-xiugai editIcon" @click="editVideo(scope.$index, scope.row)"></span> >
</el-tooltip> </el-table-column>
<span class="tableSpanBorder"></span> <el-table-column
<el-tooltip content="修改任务源配置" placement="bottom" effect="light" :visible-arrow=false> align="center"
<span class="iconfont icon-xiugai editIcon2" @click="editTask('edit',scope.$index, scope.row)"></span> width="300"
</el-tooltip> prop="operation"
<span class="tableSpanBorder"></span> label="操作"
<el-tooltip content="启动" placement="bottom" effect="light" :visible-arrow=false> >
<span class="iconfont icon-bofang playIcon" @click="setTaskStatus(scope.row,'start')"></span> <template slot-scope="scope">
</el-tooltip> <el-tooltip
<span class="tableSpanBorder"></span> content="修改视频源配置"
<el-tooltip content="暂停" placement="bottom" effect="light" :visible-arrow=false> placement="bottom"
<span class="iconfont icon-zanting pauseIcon" @click="setTaskStatus(scope.row,'stop')"></span> effect="light"
</el-tooltip> :visible-arrow="false"
<span class="tableSpanBorder"></span> >
<el-tooltip content="删除" placement="bottom" effect="light" :visible-arrow=false> <span
<span class="iconfont icon-detail delIcon" @click="delFun(scope.$index, scope.row)"></span> class="iconfont icon-xiugai editIcon"
</el-tooltip> @click="editVideo(scope.$index, scope.row)"
</template> ></span>
</el-table-column> </el-tooltip>
</el-table> <span class="tableSpanBorder"></span>
<div style="margin-top: 28px;"> <el-tooltip
<el-pagination content="修改任务源配置"
style="float: right;" placement="bottom"
background effect="light"
prev-text="上一页" :visible-arrow="false"
next-text="下一页" >
:page-sizes="[30, 50, 100, 200]" <span
layout="prev, pager, next,sizes" class="iconfont icon-xiugai editIcon2"
:current-page="page" @click="editTask('edit', scope.$index, scope.row)"
@size-change="handleSizeChange" ></span>
@current-change="handleCurrentChange" </el-tooltip>
:total="total"> <span class="tableSpanBorder"></span>
</el-pagination> <el-tooltip
<div style="clear: both;"></div> content="启动"
</div> placement="bottom"
effect="light"
</div> :visible-arrow="false"
<editset ref="editset" :pedittype="pedittype" @refresh="getTaskList"></editset> >
<editvideo ref="editvideo" :parentData="curtask" :pedittype="pedittype" @refresh="getTaskList"></editvideo> <span
</div> 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> </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(){ },
this.getTaskList(); mounted() {
}, this.getTaskList();
methods:{ },
statusFormatter(row, column, cellValue, index){ methods: {
if(cellValue == 'Running'){ statusFormatter(row, column, cellValue, index) {
return '工作中' if (cellValue == "Running") {
}else if(cellValue == 'Finished'){ return "工作中";
return '已完成' } else if (cellValue == "Finished") {
}else if(cellValue == 'Pause'){ return "已完成";
return '暂停' } else if (cellValue == "Pause") {
}else if(cellValue == 'Error'){ return "暂停";
return '异常' } else if (cellValue == "Error") {
}else if(cellValue == 'Deleted'){ return "异常";
return '已删除' } else if (cellValue == "Deleted") {
}else { return "已删除";
return '未部署' } else {
} return "未部署";
}, }
priorityFormatter(row, column, cellValue, index) { },
if(cellValue == 'high'){ priorityFormatter(row, column, cellValue, index) {
return '高' if (cellValue == "high") {
}else if(cellValue == 'normal'){ return "高";
return '中' } else if (cellValue == "normal") {
}else if(cellValue == 'low'){ return "中";
return '低' } else if (cellValue == "low") {
}else { return "低";
return '未知' } else {
} return "未知";
}, }
dateFormatter(row, column, cellValue, index){ },
let startDate=cellValue ? cellValue.split(' ')[0]:''; dateFormatter(row, column, cellValue, index) {
let endDate=row.end_dt ? row.end_dt.split(' ')[0]:''; let startDate = cellValue ? cellValue.split(" ")[0] : "";
return startDate+' ~ '+endDate; let endDate = row.end_dt ? row.end_dt.split(" ")[0] : "";
}, return startDate + " ~ " + endDate;
typeFormatter(row, column, cellValue, index) { },
if(cellValue == 0){ typeFormatter(row, column, cellValue, index) {
return '交通' if (cellValue == 0) {
}else if(cellValue == 1){ return "交通";
return '客流' } else if (cellValue == 1) {
}else if(cellValue == 2){ return "客流";
return '行为分析' } else if (cellValue == 2) {
}else if(cellValue == 3){ return "行为分析";
return '违停' } else if (cellValue == 3) {
}else if(cellValue == 5){ return "违停";
return '交通行人' } else if (cellValue == 5) {
}else if(cellValue == 7){ return "交通行人";
return '综合流量' } else if (cellValue == 7) {
}else { return "综合流量";
return '未知' } else {
} return "未知";
}, }
numFormatter(row, column, cellValue, index) { },
return (index+1)*this.page; numFormatter(row, column, cellValue, index) {
}, return (index + 1) * this.page;
handleSizeChange(val) { },
this.pageSize=val; handleSizeChange(val) {
this.getTaskList(); this.pageSize = val;
}, this.getTaskList();
handleCurrentChange(val) { },
this.page=val; handleCurrentChange(val) {
this.getTaskList(); this.page = val;
}, this.getTaskList();
query(){ },
this.getTaskList(); query() {
}, this.getTaskList();
getTaskList(){ },
this.tableData=[]; getTaskList() {
let offset = (this.page - 1) * this.pageSize; this.tableData = [];
this.$api.task.getTask({ let offset = (this.page - 1) * this.pageSize;
limit: this.pageSize, this.$api.task
offset: offset, .getTask({
task_algo_type: this.task_algo_type, limit: this.pageSize,
source_type: "pull_video_stream", offset: offset,
task_type: "normal", task_algo_type: this.task_algo_type,
task_name: this.task_name source_type: "pull_video_stream",
}).then((res)=>{ task_type: "normal",
this.total=res.total_num; task_name: this.task_name
})
if(res.list_data==null){ .then(res => {
this.tableData=[] this.total = res.total_num;
}else{
res.list_data.forEach(item=>{ if (res.list_data == null) {
if(item.start_dt){ this.tableData = [];
//先转utc格式 } else {
let date=this.$moment.utc(item.start_dt).format(); res.list_data.forEach(item => {
//再utc时间转本地时间 if (item.start_dt) {
item.start_dt=this.$moment(date).local().format('YYYY-MM-DD HH:mm:ss') //先转utc格式
} let date = this.$moment.utc(item.start_dt).format();
if(item.end_dt){ //再utc时间转本地时间
//先转utc格式 item.start_dt = this.$moment(date)
let date=this.$moment.utc(item.end_dt).format(); .local()
//再utc时间转本地时间 .format("YYYY-MM-DD HH:mm:ss");
item.end_dt=this.$moment(date).local().format('YYYY-MM-DD HH:mm:ss') }
} if (item.end_dt) {
}) //先转utc格式
this.tableData=res.list_data; let date = this.$moment.utc(item.end_dt).format();
} //再utc时间转本地时间
}).catch((error)=>{ item.end_dt = this.$moment(date)
.local()
}) .format("YYYY-MM-DD HH:mm:ss");
}, }
editVideo(index,row){ });
this.$refs.editvideo.showModal(row) this.tableData = res.list_data;
}, }
editTask(type,index,row){ })
this.$refs.editset.initData(type,row) .catch(error => {});
this.pedittype = type },
this.$nextTick(() => { editVideo(index, row) {
this.editForm=row; this.$refs.editvideo.showModal(row);
}) },
editTask(type, index, row) {
}, this.$refs.editset.initData(type, row);
setTaskStatus(data,type){ this.pedittype = type;
this.$api.task.setTaskStatus(data.task_id,{start_stop_status:type}).then(res =>{ this.$nextTick(() => {
this.$message({ this.editForm = row;
type: res.ecode=='200'?'success':'error', });
message: res.enote },
}) setTaskStatus(data, type) {
if(res.ecode=='200') { this.$api.task
this.getTaskList(); .setTaskStatus(data.task_id, { start_stop_status: type })
} .then(res => {
}) this.$message({
}, type: res.ecode == "200" ? "success" : "error",
delFun(index, data){ message: res.enote
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { });
confirmButtonText: '确定', if (res.ecode == "200") {
cancelButtonText: '取消', this.getTaskList();
type: 'warning' }
}).then(() => { });
this.$api.task.deleteTask(data.task_id).then(res => { },
this.$message({ delFun(index, data) {
type: res.ecode=='200'?'success':'error', this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
message: res.enote confirmButtonText: "确定",
}) cancelButtonText: "取消",
if (res.ecode == '200'){ type: "warning"
this.getTaskList(); }).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> </script>
<style lang="scss" scoped> <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 \ 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!