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