23 changed files with 1051 additions and 836 deletions
@ -1,10 +1,10 @@ |
|||||
VUE_APP_MODE=development |
VUE_APP_MODE=development |
||||
VUE_APP_NODE_ENV=development |
VUE_APP_NODE_ENV=development |
||||
VUE_APP_SCENE=tcm |
VUE_APP_SCENE=tcm |
||||
VUE_APP_BASE_URL=https://test.tall.wiki/ |
VUE_APP_BASE_URL=http://www.sxwikionline.com/ |
||||
VUE_APP_API_URL=https://test.tall.wiki/gateway |
VUE_APP_API_URL=http://www.sxwikionline.com/gateway |
||||
VUE_APP_PROXY_URL=/gateway |
VUE_APP_PROXY_URL=/gateway |
||||
VUE_APP_PUBLIC_PATH=/tcm |
VUE_APP_PUBLIC_PATH=/tcm |
||||
VUE_APP_MSG_URL=wss://test.tall.wiki/websocket/message/v4.0/ws |
VUE_APP_MSG_URL=wss://www.sxwikionline.com/websocket/message/v4.0/ws |
||||
VUE_APP_TITLE=中医药大学课题数据库 |
VUE_APP_TITLE=中医药大学课题数据库 |
||||
VUE_APP_DESCRIPTION=中医药大学课题数据库 |
VUE_APP_DESCRIPTION=中医药大学课题数据库 |
||||
|
|||||
@ -0,0 +1,124 @@ |
|||||
|
<template> |
||||
|
<!-- <div>数据统计组件</div> --> |
||||
|
<div style="width: 100%; height: 500px" class="chart-box"> |
||||
|
<div id="PatientProgress" style="height: 500px"></div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { HospitalComplete } from 'config/api'; |
||||
|
import mixins from 'views/Mixin/mixin.js'; |
||||
|
export default { |
||||
|
name: 'PatientProgress', |
||||
|
mixins: [mixins], |
||||
|
props: { |
||||
|
lists: { |
||||
|
type: Array, |
||||
|
default: () => [], |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
// msg: 'Welcome to Your Vue.js App', |
||||
|
width: '', |
||||
|
height: '', |
||||
|
stringList: ['0', '14', '90', '180', '360'], // legend数组 |
||||
|
stringList1: ['0天', '14天', '90天', '180天', '360天'], // legend数组 |
||||
|
nameList: [], // 住院号Id数组 |
||||
|
dataList: [], |
||||
|
series: [], // 统计展示数据数组 |
||||
|
colorList: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE'], |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
lists() { |
||||
|
this.nameList = []; |
||||
|
this.dataList = []; |
||||
|
this.series = []; |
||||
|
console.log(this.lists); |
||||
|
// 遍历 对照组 数组 |
||||
|
for (let i = 0; i < this.lists.length; i++) { |
||||
|
// 把所有搜索出来的住院号，组成一个数组作为Y轴 |
||||
|
this.nameList.push(this.lists[i].hospitalization); |
||||
|
let arr = []; |
||||
|
// 遍历 横坐标 数组 |
||||
|
for (let j = 0; j < this.stringList.length; j++) { |
||||
|
// 遍历 每个对照组 下的list数组 |
||||
|
for (let k = 0; k < this.lists[i].collectTime.length; k++) { |
||||
|
// 当 某个横坐标 等于 某个对照组下的list数组的content时，添加 content 和 value |
||||
|
if (this.lists[i].collectTime[k] === this.stringList[j] - 0) { |
||||
|
let obj = { |
||||
|
name: this.lists[i].collectTime[k], |
||||
|
value: 100, |
||||
|
}; |
||||
|
arr.push(obj); |
||||
|
break; |
||||
|
// 当 不等于 且 当前处于 list数组最后一位时 |
||||
|
} else if (k === this.lists[i].collectTime.length - 1) { |
||||
|
let obj = { |
||||
|
name: this.stringList[j] - 0, |
||||
|
value: 0, |
||||
|
}; |
||||
|
arr.push(obj); |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
this.dataList.push(arr); |
||||
|
} |
||||
|
// 遍历 存储的数组 ，动态生成统计图的数据 |
||||
|
for (let i = 0; i < this.dataList[0].length; i++) { |
||||
|
let arr1 = []; |
||||
|
for (let k = 0; k < this.dataList.length; k++) { |
||||
|
arr1.push(this.dataList[k][i].value); |
||||
|
} |
||||
|
let obj = { |
||||
|
name: this.dataList[0][i].name + '天', |
||||
|
type: 'bar', |
||||
|
stack: 'total', |
||||
|
label: { show: true }, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
label: { show: false }, |
||||
|
color: this.colorList[`${i % 5}`], |
||||
|
}, |
||||
|
}, |
||||
|
emphasis: { focus: 'series' }, |
||||
|
data: arr1, |
||||
|
}; |
||||
|
this.series.push(obj); |
||||
|
} |
||||
|
console.log(this.stringList); |
||||
|
console.log(this.series); |
||||
|
this.drawLine(); |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.init(this.drawLine); |
||||
|
}, |
||||
|
methods: { |
||||
|
drawLine() { |
||||
|
// 基于准备好的dom，初始化echarts实例 |
||||
|
let myChart = this.$echarts.init(document.getElementById('PatientProgress')); |
||||
|
// 绘制图表 |
||||
|
var option = { |
||||
|
legend: { data: this.stringList1 }, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
xAxis: { type: 'value' }, |
||||
|
yAxis: { |
||||
|
type: 'category', |
||||
|
data: this.nameList, |
||||
|
}, |
||||
|
series: this.series, |
||||
|
}; |
||||
|
myChart.setOption(option); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped ></style> |
||||
File diff suppressed because it is too large
@ -0,0 +1,17 @@ |
|||||
|
const mixins = { |
||||
|
data() { |
||||
|
return {}; |
||||
|
}, |
||||
|
methods: { |
||||
|
init(fn) { |
||||
|
if (sessionStorage.getItem('anyringToken')) { |
||||
|
fn(); |
||||
|
} else { |
||||
|
setTimeout(() => { |
||||
|
this.init(fn); |
||||
|
}, 10); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
export default mixins; |
||||
@ -0,0 +1,80 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<!-- search --> |
||||
|
<div style="width: 100%" v-if="objList && objList.list && objList.list.length > 0"> |
||||
|
<a-table |
||||
|
:columns="columns" |
||||
|
:data-source="objList.list" |
||||
|
:loading="loading" |
||||
|
:pagination="pagination" |
||||
|
:row-key="record => record.id" |
||||
|
@change="getTableData" |
||||
|
bordered |
||||
|
class="white pa-3" |
||||
|
> |
||||
|
<template slot="shijian" slot-scope="text, record"> |
||||
|
<span>{{ record.shijian.toLocaleString().replace(/:\d{1,2}$/, ' ') }}</span> |
||||
|
</template> |
||||
|
</a-table> |
||||
|
</div> |
||||
|
<a-empty v-else /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapMutations, mapState } from 'vuex'; |
||||
|
const columns = [ |
||||
|
{ |
||||
|
title: '住院号', |
||||
|
align: 'center', |
||||
|
dataIndex: 'hospitalization', |
||||
|
key: 'hospitalization', |
||||
|
}, |
||||
|
{ |
||||
|
title: '日期', |
||||
|
align: 'center', |
||||
|
dataIndex: 'shijian', |
||||
|
key: 'shijian', |
||||
|
scopedSlots: { customRender: 'shijian' }, |
||||
|
}, |
||||
|
{ |
||||
|
title: '任务', |
||||
|
align: 'center', |
||||
|
dataIndex: 'task', |
||||
|
key: 'task', |
||||
|
scopedSlots: { customRender: 'task' }, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
export default { |
||||
|
name: 'AdjacentTasks', |
||||
|
|
||||
|
props: { objList: { type: Object, default: () => {} } }, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
columns, |
||||
|
loading: false, |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
pagination() { |
||||
|
const { pageNum, pageSize, total } = this.objList; |
||||
|
return { |
||||
|
current: pageNum, |
||||
|
pageSize, |
||||
|
total: +total, |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
...mapMutations('home', ['setPatientId']), |
||||
|
getTableData(pagination) { |
||||
|
const { current } = pagination; |
||||
|
this.$emit('getTableData', current); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
Loading…
Reference in new issue