<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>应急突发事件保障</title>
<link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container" id="vueapp">
<h2 class="text-center">{$info['title']}</h2>
<h4>开始时间：{$info['create_time']}</h4>
<div v-for="(item,index) in question" :key="index" style="overflow: hidden;height: auto;">
<div v-if="item.status == 0" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
步骤{{index + 1}}：{{item.title}} (响应时间{{item.time}}分钟)
<span v-if="item.status == 0" class="pull-right">未开始</span>
<span v-if="item.status == 1" class="pull-right">进行中</span>
<span v-if="item.status == 2" class="pull-right">已结束</span>
</h3>
</div>
<table class="table">
<tr v-for="(item2,index2) in item.options" :key="index2">
<td v-if="item.status == 2&&item2.status == 0" class="text-danger">{{index2 + 1}}. {{item2.text}}</td>
<td v-else>{{index2 + 1}}. {{item2.text}}</td>
<td v-if="status == 1" style="width: 100px" class="text-center">
<button v-if="item2.status == 0" type="button" class="btn btn-success btn-xs" @click="finish(index,index2)">完成</button>
<span v-if="item2.status == 1">已完成</span>
</td>
<td v-if="status == 2||status == 3" style="width: 100px" class="text-center">
<span v-if="item2.status == 1">已完成</span>
<span v-if="item2.status == 0">未完成</span>
</td>
</tr>
</table>
</div>
<div v-if="item.status == 1" class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">
步骤{{index + 1}}：{{item.title}} (响应时间{{item.time}}分钟)
<span v-if="item.status == 0" class="pull-right">未开始</span>
<span v-if="item.status == 1" class="pull-right">进行中</span>
<span v-if="item.status == 2" class="pull-right">已结束</span>
</h3>
</div>
<table class="table">
<tr v-for="(item2,index2) in item.options" :key="index2">
<td v-if="item.status == 2&&item2.status == 0" class="text-danger">{{index2 + 1}}. {{item2.text}}</td>
<td v-else>{{index2 + 1}}. {{item2.text}}</td>
<td style="width: 100px" class="text-center">
<button v-if="item2.status == 0" type="button" class="btn btn-success btn-xs" @click="finish(index,index2)">完成</button>
<span v-if="item2.status == 1">已完成</span>
</td>
</tr>
</table>
</div>
<div v-if="item.status == 2" class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">
步骤{{index + 1}}：{{item.title}} (响应时间{{item.time}}分钟)
<span v-if="item.status == 0" class="pull-right">未开始</span>
<span v-if="item.status == 1" class="pull-right">进行中</span>
<span v-if="item.status == 2" class="pull-right">已结束</span>
</h3>
</div>
<table class="table">
<tr v-for="(item2,index2) in item.options" :key="index2">
<td v-if="item.status == 2&&item2.status == 0" class="text-danger">{{index2 + 1}}. {{item2.text}}</td>
<td v-else>{{index2 + 1}}. {{item2.text}}</td>
<td style="width: 100px" class="text-center">
<button v-if="item2.status == 0" type="button" class="btn btn-success btn-xs" @click="finish(index,index2)">完成</button>
<span v-if="item2.status == 1">已完成</span>
</td>
</tr>
</table>
</div>
</div>
</div>
<script src="/static/jquery-1.11.3.min.js"></script>
<script src="/static/layer/layer.js"></script>
<script type="text/javascript" src="/static/elementui2.15.5/vue-2.6.14.js"></script>
<script>
setInterval(function () {
window.location.reload();
},10000);
var question = {$info['content']|raw};
var status = {$info['status']};
var id = {$info['id']};
var vm = new Vue({
el: '#vueapp',
data: {
question: question,
status: status,
id: id,
},
created: function () {
console.log(this.question);
},
methods: {
finish: function (index,index2) {
$.post('{:url("Bursting/finish")}',{id:this.id,index:index,index2:index2},function (res) {
if(res.code == 1){
layer.msg('操作成功',{time:2000},function () {
location.reload();
})
}else{
layer.msg(res.msg);
}
});
}
}
})
</script>
</body>
</html>