18 changed files with 1196 additions and 730 deletions
@ -0,0 +1,78 @@ |
|||||
|
<template> |
||||
|
<div class="flex-column"> |
||||
|
<a-form :form="form"> |
||||
|
<div v-for="(item, index) in caseList" :key="index" style="width: 100%"> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" :label="item.name" label-align="left"> |
||||
|
<a-form-item v-if="item.optionStatus === 1" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol"> |
||||
|
<a-input-number |
||||
|
placeholder="最小值" |
||||
|
style="width: 100px; margin-left: 40px" |
||||
|
:min="0" |
||||
|
@change="onChange($event, item.code, 'min')" |
||||
|
/>~ |
||||
|
<a-input-number placeholder="最大值" style="width: 100px" :min="0" @change="onChange($event, item.code, 'max')" /> |
||||
|
</a-form-item> |
||||
|
<!-- <a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
v-if="item.children.length > 0" |
||||
|
label-align="left" |
||||
|
> --> |
||||
|
<CaseKTTwo v-if="item.children.length > 0" :case-list="item.children" style="margin-top: 40px" /> |
||||
|
<!-- </a-form-item> --> |
||||
|
</a-form-item> |
||||
|
</div> |
||||
|
</a-form> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState, mapMutations } from 'vuex'; |
||||
|
import { searchParam } from 'config/api'; |
||||
|
import CaseKTTwo from './CaseKTTwo'; |
||||
|
const formItemLayout = { |
||||
|
labelCol: { span: 5 }, |
||||
|
wrapperCol: { span: 18 }, |
||||
|
}; |
||||
|
const tailItemLayout = { wrapperCol: { span: 18, offset: 4 } }; |
||||
|
export default { |
||||
|
name: 'CaseKTOne', |
||||
|
components: { CaseKTTwo }, |
||||
|
props: { |
||||
|
caseList: { |
||||
|
type: Array, |
||||
|
default: () => [], |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
formItemLayout, |
||||
|
tailItemLayout, |
||||
|
form: this.$form.createForm(this, { name: 'page-add' }), |
||||
|
form1: this.$form.createForm(this, { name: 'search' }), |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
...mapMutations('home', ['setCaseData']), |
||||
|
onChange(e, code, str) { |
||||
|
console.log(e); |
||||
|
let obj = {}; |
||||
|
if (str === 'min') { |
||||
|
obj = { |
||||
|
code, |
||||
|
start: e, |
||||
|
}; |
||||
|
} else { |
||||
|
obj = { |
||||
|
code, |
||||
|
end: e, |
||||
|
}; |
||||
|
} |
||||
|
this.setCaseData(obj); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped></style> |
||||
@ -0,0 +1,82 @@ |
|||||
|
<template> |
||||
|
<div class="flex-column"> |
||||
|
<a-form :form="form"> |
||||
|
<div v-for="(item, index) in caseList" :key="index" style="width: 100%"> |
||||
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" :label="item.name"> |
||||
|
<a-form-item |
||||
|
v-if="item.optionStatus === 1" |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
label-align="left" |
||||
|
> |
||||
|
<a-input-number |
||||
|
placeholder="最小值" |
||||
|
style="width: 100px; margin-left: 40px" |
||||
|
:min="0" |
||||
|
@change="onChange1($event, item.code, 'min')" |
||||
|
/>~ |
||||
|
<a-input-number placeholder="最大值" style="width: 100px" :min="0" @change="onChange1($event, item.code, 'max')" /> |
||||
|
</a-form-item> |
||||
|
<!-- <a-form-item |
||||
|
:label-col="formItemLayout.labelCol" |
||||
|
:wrapper-col="formItemLayout.wrapperCol" |
||||
|
v-if="item.children.length > 0" |
||||
|
label-align="left" |
||||
|
> --> |
||||
|
<CaseKTOne v-if="item.children.length > 0" :case-list="item.children" style="margin-top: 40px" /> |
||||
|
<!-- </a-form-item> --> |
||||
|
</a-form-item> |
||||
|
</div> |
||||
|
</a-form> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState, mapMutations } from 'vuex'; |
||||
|
import CaseKTOne from './CaseKTOne'; |
||||
|
const formItemLayout = { |
||||
|
labelCol: { span: 6 }, |
||||
|
wrapperCol: { span: 18 }, |
||||
|
}; |
||||
|
const tailItemLayout = { wrapperCol: { span: 18, offset: 4 } }; |
||||
|
export default { |
||||
|
name: 'CaseKTOne', |
||||
|
components: { CaseKTOne }, |
||||
|
props: { |
||||
|
caseList: { |
||||
|
type: Array, |
||||
|
default: () => [], |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
formItemLayout, |
||||
|
tailItemLayout, |
||||
|
form: this.$form.createForm(this, { name: 'page-add' }), |
||||
|
form1: this.$form.createForm(this, { name: 'search' }), |
||||
|
activeKey: [], |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
...mapMutations('home', ['setCaseData']), |
||||
|
onChange1(e, code, str) { |
||||
|
let obj = {}; |
||||
|
if (str === 'min') { |
||||
|
obj = { |
||||
|
code, |
||||
|
start: e, |
||||
|
}; |
||||
|
} else { |
||||
|
obj = { |
||||
|
code, |
||||
|
end: e, |
||||
|
}; |
||||
|
} |
||||
|
this.setCaseData(obj); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped></style> |
||||
@ -0,0 +1,75 @@ |
|||||
|
<template> |
||||
|
<!-- <div>数据统计组件</div> --> |
||||
|
<div style="width: 50%; height: 300px" class="chart-box"> |
||||
|
<div id="PiemapHos" style="height: 300px"></div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { selByHosAllYBS } from 'config/api'; |
||||
|
import mixins from 'views/Mixin/mixin.js'; |
||||
|
import { mapState } from 'vuex'; |
||||
|
export default { |
||||
|
name: 'PiemapHos', |
||||
|
mixins: [mixins], |
||||
|
data() { |
||||
|
return { |
||||
|
// msg: 'Welcome to Your Vue.js App', |
||||
|
width: '', |
||||
|
height: '', |
||||
|
dataList: [], |
||||
|
}; |
||||
|
}, |
||||
|
computed: mapState('home', ['hospitalId']), |
||||
|
mounted() { |
||||
|
this.init(this.drawLine); |
||||
|
}, |
||||
|
methods: { |
||||
|
async drawLine() { |
||||
|
// 基于准备好的dom，初始化echarts实例 |
||||
|
let myChart = this.$echarts.init(document.getElementById('PiemapHos')); |
||||
|
// 绘制图表 |
||||
|
await this.getData(); |
||||
|
var option = { |
||||
|
tooltip: { trigger: 'item' }, |
||||
|
color: ['#FE9C58', '#7AEBFF', '#FFCC00', '#744CFF'], |
||||
|
legend: { top: 'bottom' }, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '生物样本数量', |
||||
|
type: 'pie', |
||||
|
radius: [20, 100], |
||||
|
center: ['50%', '50%'], |
||||
|
roseType: 'area', |
||||
|
itemStyle: { borderRadius: 8 }, |
||||
|
data: this.dataList, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
myChart.setOption(option); |
||||
|
}, |
||||
|
async getData() { |
||||
|
try { |
||||
|
const params = { param: { hospitalId: this.hospitalId } }; |
||||
|
const res = await selByHosAllYBS(params); |
||||
|
const { code, msg, data } = res.data; |
||||
|
if (code === 200) { |
||||
|
console.log(data, 123); |
||||
|
for (let i = 0; i < data.length; i++) { |
||||
|
var obj = { |
||||
|
value: data[i].nums, |
||||
|
name: data[i].name, |
||||
|
}; |
||||
|
this.dataList.push(obj); |
||||
|
} |
||||
|
} else { |
||||
|
console.log(msg, 132); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.log(error); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped ></style> |
||||
File diff suppressed because it is too large
Loading…
Reference in new issue