console
var jsonData = {
"title": "基于销售场景的推荐方案应用",
"ques": [
{
"id": 1,
"info": "请选择项目机构",
"opt":[
{"key": "公立/私立医院","val":3},
{"key": "第三方影像中心","val":13},
{"key": "第三方体检中心","val":14},
{"key": "其他","val":2}
]
},
{
"id": 2,
"info": "请选择项目机构",
"opt":[
{"key": "医学鉴定中心","val":22},
{"key": "其他","val":15}
]
},
{
"id": 3,
"info": "请选择项目科室",
"opt":[
{"key": "影像科","val":4},
{"key": "临床科室","val":6},
{"key": "医务科","val":23},
{"key": "医教科","val":24},
]
},
{
"id": 4,
"info": "项目性质",
"opt":[
{"key": "旧科室翻新/旧科室改造/科室扩建/合并","val":7},
{"key": "引进影像专家门诊","val":26},
{"key": "有提升诊断水平需求","val":27},
{"key": "有规培生、学生进修学习需求","val":28},
{"key": "其他","val":5}
]
},
{
"id": 5,
"info": "项目性质",
"opt":[
{"key": "区域质控中心","val":21},
{"key": "新建医技楼","val":29},
{"key": "新增设备","val":30},
{"key": "PACS系统升级","val":30},
{"key": "医院升级、规模增长","val":30},
{"key": "其他","val":12}
]
},
{
"id": 6,
"info": "项目性质",
"opt":[
{"key": "有影像阅片、讨论需求","val":33},
{"key": "有会诊需求","val":34},
{"key": "其他","val":16}
]
},
{
"id": 7,
"info": "本院共有几个院区",
"opt":[
{"key": "只有1个","val":10},
{"key": "1个以上","val":11}
]
},
{
"id": 9,
"info": " 单位性质",
"opt":[
{"key": "医联体发起单位","val":35},
{"key": "医联体参与单位","val":36}
]
},
{
"id": 10,
"info": " 科室人数及规模",
"opt":[
{"key": "1个房间10人以内","val":37},
{"key": "1个房间10人以上","val":38},
{"key": "两个房间","val":43}
]
},
{
"id": 11,
"info": " 是否多院区同一主任",
"opt":[
{"key": "是","val":40},
{"key": "否","val":41}
]
},
{
"id": 12,
"info": " 有加入医联体需求",
"opt":[
{"key": "有","val":9},
{"key": "没有","val":16}
]
},
{
"id": 13,
"info": " 本机构目前是否连锁经营",
"opt":[
{"key": "是","val":43},
{"key": "否","val":44}
]
},
{
"id": 14,
"info": " 本机构目前是否连锁经营",
"opt":[
{"key": "是","val":45},
{"key": "否","val":46}
]
},
{
"id": 21,
"info": "推荐方案：",
"opt":[
{"key":"多功能影像质控中心：通过影像设备组合式布局,互通互联,实现集中诊断,统一质控,远程会诊,远程培训等功能。<br/><br/>必推产品：交互式医学影像软阅片终端、ICMS智能管理平台、ICC智能控制系统、会诊大屏、医用胶片直投。<br/><br/>视情况而推：Image+云诊断客户端、Image+云教学、t-Rad、无线投屏。"}
]
},
{
"id": 22,
"info": "推荐方案：",
"opt":[
{"key":"医用胶片直投系统:帮助鉴定医师进行多胶片的快速查看、可存储生成电子病历、满足留档需求。<br/><br/>必推产品：会诊大屏、医用胶片直投。"}
]
},
{
"id": 23,
"info": "推荐方案：",
"opt":[
{"key":"MDT多学科会诊中心：通过信号一键切换、模式化控制，实现远程会诊、学术交流、视频会议等多应用场景。满足多院区、多学科的在线交互。<br/><br/>必推产品：ICC智能控制系统、会诊大屏、医用胶片直投、无线投屏。<br/><br/>视情况而推：交互式医学影像软阅片终端、t-Rad。"}
]
},
{
"id": 24,
"info": "推荐方案：",
"opt":[
{"key":"Image+云教学平台：具备课件管理、点播直播、影像PACS阅片、测试、学习进度管理的专业影像教学软件平台，有完整的DICOM图像阅片工具，方便的互动教学工具，满足主任教学、进修、研讨、课程、考试等需求。用户管理分为普通用户和管理员账户，普通用户可以在线参与课程的学习和随堂测试，管理员账户可以进行课程管理和学生分组管理并设置权限。"}
]
},
{
"id": 26,
"info": "推荐方案：",
"opt":[
{"key":"影像专家工作室：更专业合理的影像阅片场景设计，满足智能阅片、线上诊室、远程会诊、家属听诊、外院资料入库等需求。<br/><br/>必推产品：交互式医学影像软阅片终端、Image+云诊断。<br/><br/>必推产品：视情况而推：会诊大屏、医用胶片直投。"}
]
},
{
"id": 27,
"info": "推荐方案：",
"opt":[
{"key":"一站式精诊学习平台：可利用学习、分享、在线影像诊断、课程等功能，帮助医生团队提升诊断水平。<br/><br/>必推产品：Image+云教学。<br/><br/>视情况而推：医用胶片直投。"}
]
},
{
"id": 28,
"info": "推荐方案：",
"opt":[
{"key":"综合性进修教育系统：专为满足主任教学、规培进修医师学习研讨、考试等需求而设计的教育平台。具备课件管理、点播直播、影像PACS阅片、测试、学习进度管理的专业影像教学软件平台，有完整的DICOM图像阅片工具，方便的互动教学工具。用户管理分为普通用户和管理员账户，普通用户可以在线参与课程的学习和随堂测试，管理员账户可以进行课程管理和学生分组管理并设置权限。<br/><br/>必推产品：Image+云教学。<br/><br/>视情况而推：交互式医学影像软阅片终端、会诊大屏。"}
]
},
{
"id": 29,
"info": "推荐方案：",
"opt":[
{"key":"多功能智慧影像中心：满足科室阅片、会诊、教学、研讨需求。<br/><br/>必推产品：交互式医学影像软阅片终端、ICMS智能管理平台、ICC智能控制系统、会诊大屏、医用胶片直投。<br/><br/>视情况而推：t-Rad、无线投屏。"}
]
},
{
"id": 30,
"info": "推荐方案：",
"opt":[
{"key":"一体化软阅片终端：四种记忆模式，一键电动升降，符合人体工程学原理，采用独立背景灯、新风系统，专为影像科医生健康阅片而生。"}
]
},
{
"id": 33,
"info": "推荐方案：",
"opt":[
{"key":"交互式医学影像软阅片终端：一体化配置4MP专业医用彩色显示屏，动态捕捉触发的背景灯光，四种高度记忆模式，触摸式电动升降、一键考勤，科室分组、科室人员日常管理，实时查看通知、排班信息，在满足影像科医生智能阅片的同时营造健康阅片环境。更能打破空间隔阂，实现多诊室间语音交互、高效率协同阅片。"}
]
},
{
"id": 34,
"info": "推荐方案：",
"opt":[
{"key":"多功能会诊中心：满足远程会诊，本院少见病研讨，外院病人本院会诊，常见病教学等需求。<br/><br/>必推产品：交互式医学影像软阅片终端、ICC智能控制系统、会诊大屏、医用胶片直投。<br/><br/>视情况而推：t-Rad、无线投屏。"}
]
},
{
"id": 35,
"info": "推荐方案：",
"opt":[
{"key":"医学影像联盟示范中心：贴切医联体顶尖影像诊断需求，满足远程影像在线会诊，精准化阅片，教学示范等需求。<br/><br/>必推产品：交互式医学影像软阅片终端、Image+云诊断客户端、ICC智能控制系统、t-Rad、会诊大屏、医用胶片直投。<br/><br/>视情况而推：Image+云教学、无线投屏。"}
]
},
{
"id": 36,
"info": "推荐方案：",
"opt":[
{"key":"医学影像示教中心：满足健康阅片，精准诊断，读片研讨，进修教学，远程诊断等需求。<br/><br/>必推产品：交互式医学影像软阅片终端、Image+云诊断客户端、ICC智能控制系统、t-Rad、会诊大屏、医用胶片直投。<br/><br/>视情况而推：无线投屏。"}
]
},
{
"id": 37,
"info": "推荐方案：",
"opt":[
{"key":"智慧影像科：满足小规模影像科智慧阅片需求，营造舒适健康阅片环境。还可开展教学研讨活动。<br/><br/>必推产品：交互式医学影像软阅片终端。<br/><br/>视情况而推：ICMS智能管理平台、ICC智能控制系统、会诊大屏、医用胶片直投、无线投屏。"}
]
},
{
"id": 38,
"info": "推荐方案：",
"opt":[
{"key":"智慧影像中心：满足中等规模影像科阅片会诊需求。在营造舒适健康阅片环境的同时，满足科室早读片、教研学习等需求。<br/><br/>必推产品：交互式医学影像软阅片终端、ICMS智能管理平台、ICC智能控制系统、会诊大屏、医用胶片直投。<br/><br/>视情况而推：无线投屏。"}
]
},
{
"id": 40,
"info": "推荐方案：",
"opt":[
{"key":"多院区交互阅片中心：满足多院区间交互、会诊、教学需求。<br/><br/>必推产品：交互式医学影像软阅片终端、ICMS智能管理平台、Image+云教学、Image+云诊断客户端、ICC智能控制系统、会诊大屏、医用胶片直投。<br/><br/>视情况而推：t-Rad、无线投屏。"}
]
},
{
"id": 41,
"info": "推荐方案：",
"opt":[
{"key":"多院区远程会诊中心：满足多院区间交互、会诊需求。<br/><br/>必推产品：交互式医学影像软阅片终端、ICMS智能管理平台、ICC智能控制系统、会诊大屏、医用胶片直投。<br/><br/>视情况而推：Image+云教学、Image+云诊断客户端、t-Rad、无线投屏。"}
]
},
{
"id": 43,
"info": "推荐方案：",
"opt":[
{"key":"多功能阅片会诊中心：满足多机构联动，远程会诊，智能交互阅片需求。<br/><br/>必推产品：交互式医学影像软阅片终端、ICMS智能管理平台、ICC智能控制系统、t-Rad、会诊大屏、医用胶片直投、无线投屏。"}
]
},
{
"id": 44,
"info": "推荐方案：",
"opt":[
{"key":"综合影像中心：满足智能交互阅片需求。<br/><br/>必推产品：交互式医学影像软阅片终端、ICMS智能管理平台、ICC智能控制系统、会诊大屏、医用胶片直投、无线投屏。"}
]
},
{
"id": 45,
"info": "推荐方案：",
"opt":[
{"key":"多功能影像云交互中心：满足连锁体检中心的电子胶片存储、线上诊断等需求。<br/><br/>必推产品：Image+云诊断客户端、ICC智能控制系统、t-Rad、会诊大屏。<br/><br/>视情况而推：胶片直投、无线投屏。"}
]
},
{
"id": 46,
"info": "推荐方案：",
"opt":[
{"key":"医学影像云平台：通过交互系统、云报告，满足线上远程会诊和影像云端诊断的功能，满足医生足不出户的会诊和诊断报告撰写需求。<br/><br/>必推产品：Image+云诊断客户端。<br/><br/>视情况而推：交互式医学影像软阅片终端、Image+云教学。"}
]
},
{
"id": 16,
"info": "需求不明确:",
"opt":[
{"key":"请联系大区经理寻求帮助。"}
]
}
]
}
<!DOCTYPE html>
<html lang="zh" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style>
html ,body {
height:100%;
}
#app{
height:100%;
}
[v-cloak] {
display: none !important;
}
.head-div {
height: 30px;
background-image: linear-gradient(to top , #fff,#0bf);
}
.con-div{
height: 70%;
}
.main-div{
min-height: 700px;
width:100%;
margin:auto;
box-shadow: 0 2px 12px 0 #0000001a;
border-radius: 4px;
border: 1px solid #ebeef5;
background-color: #fff;
overflow: hidden;
color: #303133;
transition: .3s;
}
.info-div{
padding: 18px 20px;
border-bottom: 1px solid #ebeef5;
box-sizing: border-box;
}
button{
cursor: pointer;
border-color: transparent;
color: #409eff;
background: transparent;
padding-left: 0;
padding-right: 0;
}
li{
margin: 10px auto;
}
.set-div{
margin: 20px;
}
.res{
list-style: none;
margin-left: -10px;
font-size: 14px;
color: #00afff;
}
</style>
</head>
<script>
</script>
<body>
<div id="app" v-cloak>
<div class="con-div">
<div class="main-div">
<div class="info-div">
<h6>{{title}}</h6>
<h4>{{que.info}}</h4>
</div>
<div>
<button v-if="index > 0" @click="reset()"> <span>重做</span></button>
</div>
<ol>
<li v-bind:class="{res: isResult}" v-for="q,index in que.opt">
<div><button style="text-align:left;" :id="index"v-bind:class="{res: isResult}" @click="setVal(q.val)"></button></div>
</li>
</ol>
</div>
</div>
</div>
</body>
<script src="https://gitee.com/meteis/clod-weath/raw/master/js/vue.min.js"></script>
<script>
var c = {
data() {
return {
title: '',
obj: {},
index: -1,
history: [],
que: {},
isResult: false
}
},
mounted: function() {
this.getObj();
this.setVal(1,0);
},
methods: {
getObj(){
this.obj = jsonData.ques;
this.title = jsonData.title;
},
setVal(index,his){
if(!index || index < 1){
return false;
}
let obj = this.obj;
let b = true;
for (i in obj) {
let que = obj[i];
if(index === que.id){
this.que = que;
if(que.opt.length == 1){
this.isResult = true;
}else{
this.isResult = false;
}
if(his === 1){
this.history.pop();
this.index -= 1;
}else{
this.history.push(que.id);
this.index += 1;
}
b = false;
setTimeout(() => {
let optArr = que.opt;
for(var i = 0;i< optArr.length;i++){
try{
document.getElementById(i).innerHTML=optArr[i].key+'';
}catch(err){
}
}
}, 100);
break;
}
}
if(b){
alert('无解');
}
},
goHis(){
let index = this.index;
let history = this.history;
if((index+1) != history.length || history.length < 1){
alert('没有记录');
return false;
}
this.setVal(history[index],1);
},
reset(){
this.que = {};
this.index = -1;
this.history = [];
this.setVal(1,0);
}
}
}
var Ctor = Vue.extend(c);
new Ctor().$mount('#app');
</script>
</html>