23 changed files with 1051 additions and 836 deletions
@ -1,10 +1,10 @@ |
|||
VUE_APP_MODE=development |
|||
VUE_APP_NODE_ENV=development |
|||
VUE_APP_SCENE=tcm |
|||
VUE_APP_BASE_URL=https://test.tall.wiki/ |
|||
VUE_APP_API_URL=https://test.tall.wiki/gateway |
|||
VUE_APP_BASE_URL=http://www.sxwikionline.com/ |
|||
VUE_APP_API_URL=http://www.sxwikionline.com/gateway |
|||
VUE_APP_PROXY_URL=/gateway |
|||
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_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