newPeter7
2 years ago
6 changed files with 1106 additions and 121 deletions
@ -0,0 +1,211 @@ |
|||||
|
<template> |
||||
|
<div v-loading="loading"> |
||||
|
<div :id="idName" ref="yanyaRef" :style="{ height: height, width: width }" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import moment from 'moment/moment' |
||||
|
|
||||
|
export default { |
||||
|
name: 'EyeAxis', |
||||
|
props: { |
||||
|
idName: { type: String, default: 'chart' }, |
||||
|
width: { type: String, default: '100%' }, |
||||
|
height: { type: String, default: '200px' }, |
||||
|
desc: { type: String, default: '眼轴' }, |
||||
|
patientId: { |
||||
|
type: String |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
loading: false, |
||||
|
date: [], |
||||
|
typeList: { |
||||
|
OD: [], |
||||
|
OS: [], |
||||
|
typeNull: [] |
||||
|
}, |
||||
|
chartData: [], |
||||
|
legendData: [], |
||||
|
seriesData: [], |
||||
|
disabled: false |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.queryAxisData() |
||||
|
}, |
||||
|
methods: { |
||||
|
queryAxisData() { |
||||
|
this.loading = true |
||||
|
this.$http.get('/defocused/getSecDefocusedLine', { params: { |
||||
|
patientId: this.patientId |
||||
|
}}).then(res => { |
||||
|
this.loading = false |
||||
|
console.log(res) |
||||
|
this.chartData = res.data.data |
||||
|
this.initFun() |
||||
|
}) |
||||
|
}, |
||||
|
initFun() { |
||||
|
this.date = [] |
||||
|
this.typeList = { |
||||
|
OD: [], |
||||
|
OS: [], |
||||
|
typeNull: [] |
||||
|
} |
||||
|
this.legendData = [] |
||||
|
this.seriesData = [] |
||||
|
if (this.chartData && this.chartData.length > 0) { |
||||
|
this.disabled = false |
||||
|
this.chartData.forEach(item => { |
||||
|
this.date.push(moment(item.checkDate).format('l')) |
||||
|
this.typeList.OD.push([item.checkDate, item.iolOd]) |
||||
|
this.legendData[0] = 'OD' |
||||
|
this.typeList.OS.push([item.checkDate, item.iolOs]) |
||||
|
this.legendData[1] = 'OS' |
||||
|
}) |
||||
|
} else { |
||||
|
this.disabled = true |
||||
|
} |
||||
|
this.$nextTick(() => { |
||||
|
this.visionFun() |
||||
|
}) |
||||
|
}, |
||||
|
visionFun() { |
||||
|
// 基于准备好的dom，初始化echarts实例 |
||||
|
const yanya = this.$echarts.init(document.getElementById(this.idName)) |
||||
|
var colors = ['#4462FF', '#0DB760', '#000000'] |
||||
|
Object.keys(this.typeList).forEach((item, index) => { |
||||
|
if (this.typeList[item].length > 0) { |
||||
|
this.seriesData.push({ |
||||
|
name: item, |
||||
|
type: 'line', |
||||
|
// stack: index, |
||||
|
data: this.typeList[item], |
||||
|
label: { |
||||
|
show: true, |
||||
|
position: item === 'OD' ? [-25, -30] : [10, -5], |
||||
|
backgroundColor: item === 'OD' ? '#4a6bff' : '#0db760', |
||||
|
padding: [6, 6], |
||||
|
color: '#ffffff', |
||||
|
// color: 'rgba(24, 24, 24, 0.1)', |
||||
|
borderRadius: 10 |
||||
|
}, |
||||
|
smooth: true, |
||||
|
itemStyle: { |
||||
|
color: colors[index] |
||||
|
}, |
||||
|
symbolSize: 10 |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
// 基于准备好的dom，初始化echarts实例 |
||||
|
yanya.setOption({ |
||||
|
title: { |
||||
|
text: this.desc, |
||||
|
textStyle: { |
||||
|
'color': '#000000' |
||||
|
}, |
||||
|
left: 10 |
||||
|
}, |
||||
|
tooltip: { |
||||
|
// trigger: 'axis' |
||||
|
backgroundColor: '#ece6e6', |
||||
|
textStyle: { |
||||
|
color: '#000000' // 设置文字颜色 |
||||
|
}, |
||||
|
formatter(params) { |
||||
|
return params.seriesName + '<br/>' + params.data[0] + '   ' + params.data[1] |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
legend: { |
||||
|
data: this.legendData, |
||||
|
icon: 'pin', |
||||
|
textStyle: { |
||||
|
color: '#000000' |
||||
|
}, |
||||
|
right: 30 |
||||
|
}, |
||||
|
dataZoom: [ |
||||
|
{ |
||||
|
type: 'inside', |
||||
|
disabled: this.disabled, |
||||
|
start: 0, |
||||
|
end: 100 |
||||
|
} |
||||
|
], |
||||
|
grid: { |
||||
|
top: 55, |
||||
|
left: 50, |
||||
|
right: 50, |
||||
|
bottom: 30, |
||||
|
containLabel: false |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'time', |
||||
|
boundaryGap: false, |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
showMaxLabel: true, |
||||
|
textStyle: { |
||||
|
color: '#000000' |
||||
|
}, |
||||
|
formatter: function(value, index) { |
||||
|
const showD = moment(value).format('YYYY/M/D') |
||||
|
return showD |
||||
|
} |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: 'rgba(24, 24, 24, 0.1)' |
||||
|
} |
||||
|
}, |
||||
|
// 显示网格线 |
||||
|
splitLine: { |
||||
|
show: true |
||||
|
} |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
min: function(value) { // 取最小值向下取整为最小刻度 |
||||
|
return Math.floor(value.min) |
||||
|
}, |
||||
|
max: function(value) { // 取最大值向上取整为最大刻度 |
||||
|
return Math.ceil(value.max) |
||||
|
}, |
||||
|
splitNumber: 1, // 分割刻度 |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
color: '#000000' |
||||
|
} |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: 'rgba(24, 24, 24, 0.1)' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
...this.seriesData |
||||
|
] |
||||
|
}) |
||||
|
// 随窗口变化 |
||||
|
window.addEventListener('resize', () => { yanya.resize() }) |
||||
|
// 随外层div的大小变化自适应 |
||||
|
this.$erd.listenTo(this.$refs.yanyaRef, () => { |
||||
|
this.$nextTick(() => { |
||||
|
yanya.resize() |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,407 @@ |
|||||
|
<template> |
||||
|
<div class="reviewContain"> |
||||
|
<div class="reviewLeft"> |
||||
|
<div class="content-top"> |
||||
|
<div v-for="(item, index) in formList" :key="index" class="formBox" :class="[index === curIndex ? 'active' : '']" @click="handleForm(index, item)"> |
||||
|
<div style="display: flex;padding: 2px 0"> |
||||
|
<p :class="[index === curIndex ? 'activeFont' : 'curFont']">{{ item.checkDate }}</p> |
||||
|
<i v-if="index === curIndex" style="margin-top: 5px;color: rgb(199,5,5);margin-left: 12px" class="el-icon-delete" @click="deleteForm(item.id)" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<img v-if="!formList.length" src="@/assets/img/nodata.png" alt="" class="nodata"> |
||||
|
</div> |
||||
|
<div class="content-bottom"> |
||||
|
<div class="commonForm-text"> |
||||
|
<span>常用表单</span> |
||||
|
<span class="line" /> |
||||
|
</div> |
||||
|
<div class="record"> |
||||
|
<p>离焦眼镜复查单</p> |
||||
|
<img :src="require('@/assets/img/add.png')" alt="" @click="addRecord()"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="reviewRight"> |
||||
|
<div v-if="formList.length"> |
||||
|
<div style="display: flex;justify-content: flex-end;margin-bottom: 16px"> |
||||
|
<el-button type="primary" size="small" @click="saveSecondForm()">保存</el-button> |
||||
|
</div> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
:span-method="objectSecondMethod" |
||||
|
style="width: 100%" |
||||
|
> |
||||
|
<el-table-column |
||||
|
label="复诊记录" |
||||
|
width="220" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
日期： |
||||
|
<el-date-picker |
||||
|
v-model="secondForm.checkDate" |
||||
|
style="width: 140px" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
type="date" |
||||
|
placeholder="选择日期" |
||||
|
/> |
||||
|
<!-- <el-input v-model="secondForm.checkDate" placeholder="" style="width: 100px" />--> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
width="100" |
||||
|
align="center" |
||||
|
label="眼别" |
||||
|
prop="name" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
align="center" |
||||
|
label="球镜" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-if="scope.row.ds === '右眼'" v-model="secondForm.dsOd" placeholder="" /> |
||||
|
<el-input v-if="scope.row.ds === '左眼'" v-model="secondForm.dsOs" placeholder="" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="柱镜" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-if="scope.row.dc === '右眼'" v-model="secondForm.dcOd" placeholder="" /> |
||||
|
<el-input v-if="scope.row.dc === '左眼'" v-model="secondForm.dcOs" placeholder="" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="轴向" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-if="scope.row.a === '右眼'" v-model="secondForm.aod" placeholder="" /> |
||||
|
<el-input v-if="scope.row.a === '左眼'" v-model="secondForm.aos" placeholder="" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="矫正视力" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-if="scope.row.va === '右眼'" v-model="secondForm.vaOd" placeholder="" /> |
||||
|
<el-input v-if="scope.row.va === '左眼'" v-model="secondForm.vaOs" placeholder="" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="戴镜视力" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-if="scope.row.vag === '右眼'" v-model="secondForm.vagOd" placeholder="" /> |
||||
|
<el-input v-if="scope.row.vag === '左眼'" v-model="secondForm.vagOs" placeholder="" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="眼轴" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-if="scope.row.iol === '右眼'" v-model="secondForm.iolOd" placeholder="" /> |
||||
|
<el-input v-if="scope.row.iol === '左眼'" v-model="secondForm.iolOs" placeholder="" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="联合光度" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-if="scope.row.lhgd === '右眼'" v-model="secondForm.lhgdOd" placeholder="" /> |
||||
|
<el-input v-if="scope.row.lhgd === '左眼'" v-model="secondForm.lhgdOs" placeholder="" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="下次复诊时间" |
||||
|
align="center" |
||||
|
width="150" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-date-picker |
||||
|
v-model="secondForm.nextCheckDate" |
||||
|
style="width: 140px" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
type="date" |
||||
|
placeholder="选择日期" |
||||
|
/> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="备注" |
||||
|
width="130" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-model="secondForm.remark" type="textarea" :rows="3" placeholder="" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
patientId: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
tableData: [ |
||||
|
{ |
||||
|
checkDate: '', |
||||
|
nextCheckDate: '', |
||||
|
name: '右眼', |
||||
|
ds: '右眼', |
||||
|
dc: '右眼', |
||||
|
iol: '右眼', |
||||
|
lhgd: '右眼', |
||||
|
vag: '右眼', |
||||
|
va: '右眼', |
||||
|
a: '右眼', |
||||
|
remark: '' |
||||
|
}, |
||||
|
{ |
||||
|
checkDate: '', |
||||
|
nextCheckDate: '', |
||||
|
name: '左眼', |
||||
|
ds: '左眼', |
||||
|
dc: '左眼', |
||||
|
iol: '左眼', |
||||
|
lhgd: '左眼', |
||||
|
vag: '左眼', |
||||
|
va: '左眼', |
||||
|
a: '左眼', |
||||
|
remark: '' |
||||
|
} |
||||
|
], |
||||
|
secondForm: { |
||||
|
patientId: '', |
||||
|
checkDate: '', |
||||
|
nextCheckDate: '', |
||||
|
dcOd: '', |
||||
|
dcOs: '', |
||||
|
dsOd: '', |
||||
|
dsOs: '', |
||||
|
iolOd: '', |
||||
|
iolOs: '', |
||||
|
lhgdOd: '', |
||||
|
lhgdOs: '', |
||||
|
vagOd: '', |
||||
|
vagOs: '', |
||||
|
remark: '', |
||||
|
vaOd: '', |
||||
|
vaOs: '', |
||||
|
aod: '', |
||||
|
aos: '' |
||||
|
}, |
||||
|
id: '', |
||||
|
curIndex: 0, |
||||
|
formList: [] |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getFormList() |
||||
|
}, |
||||
|
methods: { |
||||
|
objectSecondMethod({ row, column, rowIndex, columnIndex }) { |
||||
|
if (columnIndex === 0 || columnIndex === 9 || columnIndex === 10) { |
||||
|
if (rowIndex % 2 === 0) { |
||||
|
return { |
||||
|
rowspan: 2, |
||||
|
colspan: 1 |
||||
|
} |
||||
|
} else { |
||||
|
return { |
||||
|
rowspan: 0, |
||||
|
colspan: 0 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
saveSecondForm() { |
||||
|
this.secondForm.patientId = this.patientId |
||||
|
this.$http.post('/defocused/saveOrUpdateSecondDefocused', this.secondForm).then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg) |
||||
|
} |
||||
|
this.$message({ |
||||
|
message: this.$t('prompt.success'), |
||||
|
type: 'success', |
||||
|
duration: 500, |
||||
|
onClose: () => { |
||||
|
this.getSecondForm() |
||||
|
} |
||||
|
}) |
||||
|
}).catch(() => {}) |
||||
|
}, |
||||
|
async getSecondForm() { |
||||
|
this.$http.get('/defocused/getSecondDefocused', { |
||||
|
params: { |
||||
|
id: this.id |
||||
|
} |
||||
|
}).then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg) |
||||
|
} else { |
||||
|
this.secondForm = res.data |
||||
|
} |
||||
|
}).catch(() => {}) |
||||
|
}, |
||||
|
async getFormList() { |
||||
|
const { data: res } = await this.$http.get('/defocused/getAllSecDefocusedByPid', { |
||||
|
params: { |
||||
|
patientId: this.patientId |
||||
|
} |
||||
|
}) |
||||
|
if (res.code === 0) { |
||||
|
this.formList = res.data || [] |
||||
|
if (this.formList.length) { |
||||
|
this.id = this.formList[0].id |
||||
|
this.secondForm = this.formList[0] |
||||
|
} |
||||
|
} else { |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}, |
||||
|
handleForm(index, item) { |
||||
|
this.curIndex = index |
||||
|
this.id = item.id |
||||
|
this.secondForm = item |
||||
|
}, |
||||
|
async addRecord() { |
||||
|
const params = { |
||||
|
patientId: this.patientId |
||||
|
} |
||||
|
const { data: res } = await this.$http.post('/defocused/saveOrUpdateSecondDefocused', params) |
||||
|
if (res.code === 0) { |
||||
|
await this.getFormList() |
||||
|
this.$message.success('新增成功') |
||||
|
} else { |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}, |
||||
|
deleteForm(id) { |
||||
|
const params = { |
||||
|
id: id |
||||
|
} |
||||
|
this.$confirmFun('你确定要删除吗？').then(async() => { |
||||
|
const { data: res } = await this.$http.post('/defocused/delSecDefocusedById', params) |
||||
|
if (res.code === 0) { |
||||
|
this.$message.success('删除成功') |
||||
|
await this.getFormList() |
||||
|
} else { |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.reviewContain { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
.reviewLeft{ |
||||
|
width: 180px; |
||||
|
height: 100%; |
||||
|
margin-right: 16px; |
||||
|
|
||||
|
.content-top, .content-bottom{ |
||||
|
height: 50%; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
.content-bottom { |
||||
|
.commonForm-text { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 14px; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
.line { |
||||
|
border-bottom: 1px solid #e5e6eb; |
||||
|
flex: 1; |
||||
|
display: inline-block; |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
.record{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding-top: 12px; |
||||
|
cursor: pointer; |
||||
|
p { |
||||
|
display: inline-block; |
||||
|
font-size: 14px; |
||||
|
color: rgba(0, 0, 0, 0.85); |
||||
|
letter-spacing: 1px; |
||||
|
} |
||||
|
img { |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
margin-top: 3px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.formBox{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
cursor: pointer; |
||||
|
padding: 2px 8px; |
||||
|
border-radius: 2px; |
||||
|
margin-top: 12px; |
||||
|
} |
||||
|
.active { |
||||
|
color: white; |
||||
|
background-color: #1C76FD; |
||||
|
} |
||||
|
.curFont { |
||||
|
color: #A6A4A4; |
||||
|
} |
||||
|
.activeFont { |
||||
|
color: #D9D9D9; |
||||
|
} |
||||
|
.nodata { |
||||
|
width: 200px; |
||||
|
margin-top: 50px; |
||||
|
} |
||||
|
} |
||||
|
.reviewRight{ |
||||
|
flex: 1; |
||||
|
//background-color: #ececf1; |
||||
|
} |
||||
|
.review-head { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding-bottom: 16px; |
||||
|
} |
||||
|
.review-content { |
||||
|
width: 100%; |
||||
|
height: calc( 100vh - 50px - 32px - 42px - 48px - 15px); |
||||
|
padding: 16px; |
||||
|
background: #ffffff; |
||||
|
overflow-x: auto; |
||||
|
} |
||||
|
.vision{ |
||||
|
display: inline-block; |
||||
|
width: 24px; |
||||
|
height: 24px; |
||||
|
line-height: 24px; |
||||
|
border-radius: 50%; |
||||
|
text-align: center; |
||||
|
color: #1E79FF; |
||||
|
font-weight: 600; |
||||
|
margin-right: 8px; |
||||
|
background-color: #EBF6FF; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,211 @@ |
|||||
|
<template> |
||||
|
<div v-loading="loading"> |
||||
|
<div :id="idName" ref="yanyaRef" :style="{ height: height, width: width }" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import moment from 'moment/moment' |
||||
|
|
||||
|
export default { |
||||
|
name: 'sunAxis', |
||||
|
props: { |
||||
|
idName: { type: String, default: 'chart' }, |
||||
|
width: { type: String, default: '100%' }, |
||||
|
height: { type: String, default: '200px' }, |
||||
|
desc: { type: String, default: '联合光度' }, |
||||
|
patientId: { |
||||
|
type: String |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
loading: false, |
||||
|
date: [], |
||||
|
typeList: { |
||||
|
OD: [], |
||||
|
OS: [], |
||||
|
typeNull: [] |
||||
|
}, |
||||
|
chartData: [], |
||||
|
legendData: [], |
||||
|
seriesData: [], |
||||
|
disabled: false |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.queryAxisData() |
||||
|
}, |
||||
|
methods: { |
||||
|
queryAxisData() { |
||||
|
this.loading = true |
||||
|
this.$http.get('/defocused/getSecDefocusedLine', { params: { |
||||
|
patientId: this.patientId |
||||
|
}}).then(res => { |
||||
|
this.loading = false |
||||
|
console.log(res) |
||||
|
this.chartData = res.data.data |
||||
|
this.initFun() |
||||
|
}) |
||||
|
}, |
||||
|
initFun() { |
||||
|
this.date = [] |
||||
|
this.typeList = { |
||||
|
OD: [], |
||||
|
OS: [], |
||||
|
typeNull: [] |
||||
|
} |
||||
|
this.legendData = [] |
||||
|
this.seriesData = [] |
||||
|
if (this.chartData && this.chartData.length > 0) { |
||||
|
this.disabled = false |
||||
|
this.chartData.forEach(item => { |
||||
|
this.date.push(moment(item.checkDate).format('l')) |
||||
|
this.typeList.OD.push([item.checkDate, item.lhgdOd]) |
||||
|
this.legendData[0] = 'OD' |
||||
|
this.typeList.OS.push([item.checkDate, item.lhgdOs]) |
||||
|
this.legendData[1] = 'OS' |
||||
|
}) |
||||
|
} else { |
||||
|
this.disabled = true |
||||
|
} |
||||
|
this.$nextTick(() => { |
||||
|
this.visionFun() |
||||
|
}) |
||||
|
}, |
||||
|
visionFun() { |
||||
|
// 基于准备好的dom，初始化echarts实例 |
||||
|
const yanya = this.$echarts.init(document.getElementById(this.idName)) |
||||
|
var colors = ['#4462FF', '#0DB760', '#000000'] |
||||
|
Object.keys(this.typeList).forEach((item, index) => { |
||||
|
if (this.typeList[item].length > 0) { |
||||
|
this.seriesData.push({ |
||||
|
name: item, |
||||
|
type: 'line', |
||||
|
// stack: index, |
||||
|
data: this.typeList[item], |
||||
|
label: { |
||||
|
show: true, |
||||
|
position: item === 'OD' ? [-25, -30] : [10, -5], |
||||
|
backgroundColor: item === 'OD' ? '#4a6bff' : '#0db760', |
||||
|
padding: [6, 6], |
||||
|
color: '#ffffff', |
||||
|
// color: 'rgba(24, 24, 24, 0.1)', |
||||
|
borderRadius: 10 |
||||
|
}, |
||||
|
smooth: true, |
||||
|
itemStyle: { |
||||
|
color: colors[index] |
||||
|
}, |
||||
|
symbolSize: 10 |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
// 基于准备好的dom，初始化echarts实例 |
||||
|
yanya.setOption({ |
||||
|
title: { |
||||
|
text: this.desc, |
||||
|
textStyle: { |
||||
|
'color': '#000000' |
||||
|
}, |
||||
|
left: 10 |
||||
|
}, |
||||
|
tooltip: { |
||||
|
// trigger: 'axis' |
||||
|
backgroundColor: '#ece6e6', |
||||
|
textStyle: { |
||||
|
color: '#000000' // 设置文字颜色 |
||||
|
}, |
||||
|
formatter(params) { |
||||
|
return params.seriesName + '<br/>' + params.data[0] + '   ' + params.data[1] |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
legend: { |
||||
|
data: this.legendData, |
||||
|
icon: 'pin', |
||||
|
textStyle: { |
||||
|
color: '#000000' |
||||
|
}, |
||||
|
right: 30 |
||||
|
}, |
||||
|
dataZoom: [ |
||||
|
{ |
||||
|
type: 'inside', |
||||
|
disabled: this.disabled, |
||||
|
start: 0, |
||||
|
end: 100 |
||||
|
} |
||||
|
], |
||||
|
grid: { |
||||
|
top: 55, |
||||
|
left: 50, |
||||
|
right: 50, |
||||
|
bottom: 30, |
||||
|
containLabel: false |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'time', |
||||
|
boundaryGap: false, |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
showMaxLabel: true, |
||||
|
textStyle: { |
||||
|
color: '#000000' |
||||
|
}, |
||||
|
formatter: function(value, index) { |
||||
|
const showD = moment(value).format('YYYY/M/D') |
||||
|
return showD |
||||
|
} |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: 'rgba(24, 24, 24, 0.1)' |
||||
|
} |
||||
|
}, |
||||
|
// 显示网格线 |
||||
|
splitLine: { |
||||
|
show: true |
||||
|
} |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
min: function(value) { // 取最小值向下取整为最小刻度 |
||||
|
return Math.floor(value.min) |
||||
|
}, |
||||
|
max: function(value) { // 取最大值向上取整为最大刻度 |
||||
|
return Math.ceil(value.max) |
||||
|
}, |
||||
|
splitNumber: 1, // 分割刻度 |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
color: '#000000' |
||||
|
} |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: 'rgba(24, 24, 24, 0.1)' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
...this.seriesData |
||||
|
] |
||||
|
}) |
||||
|
// 随窗口变化 |
||||
|
window.addEventListener('resize', () => { yanya.resize() }) |
||||
|
// 随外层div的大小变化自适应 |
||||
|
this.$erd.listenTo(this.$refs.yanyaRef, () => { |
||||
|
this.$nextTick(() => { |
||||
|
yanya.resize() |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue